Now that Hoop.la 2.0 has been in the wild for about a month, I wanted to give a bit of a deeper look into the technical underpinnings that power the platform. The Hoop.la 2.0 release involved redesigning, from scratch, every single component of the front-end web interface and back-end control panel in order to make it fully responsive. The ultimate goal was to provide a unified, consistent experience regardless of what type of device you use: desktop computer, laptop, tablet, or mobile phone.

The Hoop.la 2.0 project was the most significant development project in Hoop.la's history, and we wanted to make sure we took the time to do it right. We considered a wide array of new web technologies and frameworks in our quest to further improve upon Hoop.la's ease-of-use.

We ultimately decided on the following suite of new tools:

• Foundation For Sites 5 (Responsive Design Framework)
• jQuery (JavaScript framework)
• Sass (Dynamic CSS Generation)
• FormValidation.io (Client-side Form Validation)
• TinyMCE 4 (Rich Text Editor)
• jPlayer (HTML5 Video and Audio Player)

This isn't a comprehensive list of all of the front-end libraries Hoop.la uses, but these are the components that played the biggest role in making Hoop.la 2.0 what it is today. Foundation and jQuery are at the core of Hoop.la's new front-end; they truly provide the "foundation" upon which everything else is built. From structured UI components to flexible grids, Foundation is at the heart of nearly everything you see in Hoop.la 2.0. jQuery provides the JavaScript framework to make the interface dynamically adjust based on your interactions.

Sass enables Hoop.la to dynamically generate CSS stylesheets based on your theme settings, enabling a very simple theme control panel while still allowing customization of everything you see through custom CSS.

FormValidation.io adds client-side, dynamic form validation to warn users about form issues before they even submit the form. It also supports providing positive feedback about form fields that are filled out properly by applying a green border and a green checkmark to text input fields, where applicable.

TinyMCE 4 is the workhorse behind the content creation process in Hoop.la 2.0. It's a major upgrade from TinyMCE 3 that was used in Hoop.la 1.0, and provides an easy-to-use interface for the most novice users while also providing an extensive set of formatting tools and options for the most experienced content curators.

jPlayer provides the engine that powers the new HTML5 video and audio players in Hoop.la 2.0. Gone are the days of the Adobe Flash video and audio player; by using HTML5, Hoop.la's new media players provide cross-platform compatibility with all devices. The video and audio player skins are fully responsive to ensure they look beautiful and work perfectly regardless of what device you use.

In addition to implementing responsive design, one big goal for Hoop.la 2.0 was to improve the overall page load speed and performance. One successful approach we took to achieve that goal is caching the CSS and JavaScript heavily in web browsers so that most resources are static and only need to be downloaded once. Hoop.la aggregates the most commonly used JavaScript frameworks and libraries into a single, cacheable file to further reduce the number of resources your browser must download. Similar optimizations are made for static CSS stylesheets.

The organization and structure of the HTML and JavaScript code on every page has also been improved dramatically to improve performance, as well. Hoop.la 1.0 had a bunch of legacy code that had built up over the years that put a much heavier burden on web browsers by executing JavaScript inline and adding excess "page weight" for every page load. This is a sub-optimal design that we set out to improve in Hoop.la 2.0. Now, there is very little JavaScript embedded on every page. Instead of inlining JavaScript, almost all code is served in the cacheable, static files mentioned above. The small amount of dynamic JavaScript that is needed from page-to-page is evaluated at the bottom of the page in order to speed-up the initial page load times, a dramatic improvement over Hoop.la 1.0.

In reconsidering and rewriting every aspect of Hoop.la's interface from the ground up, it gave us the opportunity to re-invent the platform in a way to provide a very powerful and extensible framework that will accelerate product development for years to come.

Photo Credit: BinaryApe