Party with Firefox 4 - insights

Today's a special day: Firefox 4 just launched and everyone is invited to join the party.

We're honored to be part of the Firefox 4 launch activities with this latest project of ours for Mozilla. It is a visualization of twitter activity surrounding this special moment, and everyone can join by tweeting with the #fx4 hashtag.

Let us give you a few insights to the party:

Goals

Get the party started! No, really: get as many people as possible to celebrate the Firefox 4 launch in big style by building a huge Firefox logo mosaic out of everyone's twitter avatar. That's what Mozilla challenged us to do, and that's what we've been working on for the past two months. Browser compatibility requirements included: Firefox 3.5+, Chrome 8+, IE8+, Safari 5+.

Solution

Divide the logo into 1.804 12x12 pixel avatars, each representing a single tweet containing the #fx4 hashtag. Each avatar is processed to match it's final position and coloring in the logo. So the complete Firefox logo only exists by the joint forces of the latest 1.804 individual users celebrating the moment. The user can also search for a specific twitter username and find his participation on the party.

Front-end

HTML5 markup, CSS3 for styling, 1.803 DOM elements for the mosaic and a lot of javascript magic to bring it all to life. Our first approach was to exclusively use canvas and base64 encoded images, but the browser compatibility requirements threw that off the table. But rest assured, even with all those DOM elements the performance is still good enough to run it on your iPad, Android or iPhone 4.

Since most of the Javascript work for this app involved some form of DOM manipulation, the excellent jQuery framework was used. We serve it directly from Google's AJAX CDN, fully minified, in order to guarantee the best downloading speed possible.

At first, all the tiles were generated and displayed on the screen at the same time. This generally slowed the experience down to a crawl as a result of overloading the browser UI queue, so by using some smart function throttling we managed to display tiles in evenly spaced intervals of time. Besides dramatically improving the snappiness of the app, this created a cool side effect: The logo was now built progressively, almost as if the Firefox brand was being slowly built by the community.

We also use a lot of event throttling (through basic usage of the setTimeout() function) to handle computationally expensive events such as hovering over the mosaic tiles. Had we not used throttling, just swiping your mouse over the mosaic could very well result in thousands of HTTP requests to the Twitter servers (because of the avatars). Oh, and the browser would eventually lock up.

Back-end

The backend was built on a PHP + ImageMagick + memcached + mysql stack. It relies on 3 separate jobs that perform the twitter search, the image processing and the mosaic building. The main challenges here were to keep this process streamlined, fast, and above all resilient to peaks and image processing errors, while at the same time compressing all images and other downloadable assets.

Localization

The party speaks 30 different languages, thanks to an amazing effort of the team of Mozilla Localizers. LTR and RTL are supported, and although the tweets themselves are the same across all languages, all the remaining interface (logo, date and number formats inclusive) are localized.

The team

On our side here at Quodis this meant a lot of challenges and fun, but it wouldn't have been half that good without the incredible support of everyone over at Mozilla, from Marketing and IT up to the L10n teams. Time-zone differences kept blurring away. Nothing is more motivating than waking up in the morning (or at any other point of the natural daylight cycle, really) and have tons of development done by the rest of the team while you were asleep. Thanks everyone!

Lessons learned

We tweaked and twisted DOM animation performance to learn it's limits, dived deep into ImageMagick and understood all the amazing things happening behind a localization project.

So what are you waiting for? Get Firefox 4 and join the party now at twitterparty.mozilla.org!