I was a ghost around here during the World Cup due to the pick the winners site I was running, SevenSteps, which was a pretty big success. I had left a lot of it to do right before the tournament started, and even though I did add tests to this Rails site, it surely did not catch them all. Anyway, I’ll be blagging about the good and bad points of my experience running the site and try to deconstruct a few things here.
Even though the site is done, today I hacked a bit on reworking the way I did user combined flags. During haxpact (which abruptly ended, oops), I wrote about a mini Sinatra project I had in my staging area to allow users to combine two nations’ flags in a few ways. The goal was always to use this for the WC site, and I hacked the feature in a few days before people signed up. Many people used it and liked it, but the approach I took could’ve been improved.
The problem was twofold: first, the flag getter was a Rails controller, meaning it had to be routed and requested, and on a leaderboard page with 40+ different flags on it, it resulted in 41+ requests to the server. Despite caching, it still takes a while to get through routing as opposed to just a normal image resource (which can be cached by the user’s browser).
Second, the technique used to combine the flags was based on running the convert tool from ImageMagick from the command line. The end result was obviously cached, but ended up producing 152 separate cached images as users tweaked flags, taking up 604kb in computed images. Not to mention the taxing on the server during the production of these cached images! Clearly this wasn’t optimal, there had to be some way for the client to do the work.
A while ago, while doing some infovis stuff with Raphael on the site, I had thought of using that & canvas to have the client render the flags themselves, but dismissed it when I noticed the flags had some blurring issues when used as the fill to an SVG rectangle. However, today a friend mentioned that SVG is not the only thing that can be used on a canvas – he suggested I try just using Javascript to draw on the canvas directly. After some quick tests, this proved to be a viable option.
The technique I ended up going with involved using an image tag set to one of the two flags making up the combination, two HTML5 “data” attributes on that tag, then using some jQuery to replace the images with canvas tags and do the composition right there. This allows the flags to be retrieved just like any other image, and cached by the browser.
I didn’t push it yet, because I didn’t round out support for IE (aka, don’t do anything, it can’t handle canvas well), and well, the World Cup is over, so not much reason to do it. But still neat to see what could’ve been. I reduced the avg query time for the leaderboard from 10.5s down to 4.8s – rather significant. All lessons I’ll take with me for the future, and certainly will be considering how to use with my FM Crests project that I’ll be picking back up.

