Back of the .NET!

Developer Emma Lewis explains the No Half Measures inspiration behind her .NET magazine tutorial...

While budding actors dream of seeing their name in lights, would-be developers envisage their name on the pages of .NET magazine. So it was with a big smile that I sat down to write a tutorial for the latest edition of the industry-leading publication. My piece, entitled Infinite Scroll and Filtering, shows readers how to combine both features while displaying content in a masonry layout. The solution makes use of two excellent jQuery plugins: Infinite Scroll, written by Paul Irish; and Metafizzy’s Isotope, written by Twitter’s Dave DeSandro. Dave kindly peer-reviewed my tutorial, which was inspired by our work on relentlessenergy.com. 

Relentless Energy Drink is an extreme sports-loving, music-blaring, No Half Measures can of action fizz. When our head of design, Rich Dean, was given the task of reskinning the brand’s website, he wanted to reflect this philosophy online. The resulting design promised a website that would push the boundaries of front-end technologies. It features a homepage that displays the website’s vast array of categorised articles in a masonry layout, with in-page filtering by category and infinite scroll in place of pagination. To our knowledge, these three elements have not been successfully combined before.

We developed a solution using the two aforementioned plugins in combination with some custom javascript code to perform the filtering. We also implemented a full-screen background video using YouTube’s Chromeless player and we used regular expressions to split article content (entered through the CMS via a single Wysiwyg editor) into 'blocks' to continue the masonry theme throughout the site.

The technical challenge was immense, but the reward was a website that is as exciting and adventurous as the brand itself.