World Cup pick’em over, back to hax

13 Jul 2010 – 9:24 pm

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.

By Dave Foster | Posted in hax | Tagged , , | Comments (0)

FMCrests: internal cleanups

27 Mar 2010 – 4:17 pm

Continuing where I left off with FMCrests, I had offloaded a lot of logic in the script and left it up to the base SVG to describe a lot more of itself.  I realized the same could be done in order to properly style the patterns with fills and outline colors.  I used to have to require a big list of every pattern in the script, and then by hand sort them into lists where some need fills only, some need fills and outlines, etc.  Now, the document simply tells it what it needs based on the presence of a positive stroke-width.  Reducing the script further is always the goal!

By Dave Foster | Posted in fmcrests, hax | Tagged , | Comments (0)

Flag Combinator

26 Mar 2010 – 9:51 pm

Earlier, when I wrote about the Sinatra staging area I had set up, I had mentioned a project that I had worked on there but hadn’t made public yet.  That project was a precursor to the FMCrests project.  It was meant to serve a similar purpose, to provide logos for users on a site to differentiate them.  Its unofficial title is the Flag Combinator.

For the upcoming World Cup pick’em site, I wanted to have a way for the users to show their allegiances (often times more than one country), and it reminded me of the Enemy Territory days and Clanbase’s method of identifying player nationalities.  Next to every name was a stylized small flag icon, and some people got to make their own.  I thought it would be pretty neat to be able to have a service that automatically combines two flags in various ways, so after some experimenting with imagemagick, I created a few masks that can be used to combine two flags.

This was my first real project with Sinatra, and is what turned me onto the project in the first place.  This is not a world class service (and I hope it doesn’t get linked around, it likely won’t), but if you have a need to make a small flag icon, knock yourself out.  Here’s some samples:

By Dave Foster | Posted in hax | Tagged , | Comments (1)

256 Color Mode in Vim

25 Mar 2010 – 11:05 pm

Continuing with yesterday’s tools theme, today I decided to see what it would take to get vim in a terminal to work with 256 colors. I use gnome-terminal, and turns out it is as easy as doing in vim:

set t_Co=256

Nice!  Here’s a shot of my terminal with the desert256 color scheme:

I typically use gvim when writing code, but lately as I’ve done more Rails stuff, I’ve been using vim inside of GNU screen, with a few related screens next to each other, switching between them with F11 and F12.  This became a pretty handy setup for working with Rails apps, especially as I can do it from Windows machines using Putty.

This introduces a few more variables into the equation, Putty and screen.  Imagine my surprise when Putty Just Worked ™ as well as gnome-terminal did!

As for screen, a recompile with the –enable-colors256 configure flag specified was all it took.  I installed to my home dir on l3ib so as not to disturb the system screen, although if it works ok renamed to a different binary name like “screen256″ i may install it to /usr/local.  Much props to this blag entry.  His instructions make debian actually seem rather easy to use (I’m not familiar with it), and the screenrc is necessary to pull things together.  I still need to put my keybinds back in, but it looks like I have a sweet setup for Rails hacking now!

By Dave Foster | Posted in hax | Tagged , | Comments (0)