I've always been a t-shirt kind of guy.

Tees are a perk of living in a warm and mild city like Sydney, and some might say I'm a tad obsessed with the trusty old tee, especially those a grey persuasion.

As I'm currently packing up two boxes of old tees to take to Vinnies in preparation for our move to Coogee Beach for the summer, it's only fitting that I drum up some tee purchasing excitement with the release of the official tee for the Web Directions South conference: tshirt09.webdirections.org

The design

It seems that I've replaced my habit of impulsive Threadless tee purchasing (I was there for the first print of Flowers in the Attic man, I WAS THERE!) with a habit of dragging Carla in to design geek tees for every geek event I help organise. Last May I dragged her in, once again, to whip up a new design for the Rails Camp tee, and like all good things a new one-pager Sinatra app had to be built to pimp it: railscampteev3.agencyrainford.com.

Maxine saw this shiny ordering process and asked if she could have a site just like it for a tshirt project for Web Directions.

After some sketches and a couple of balsamiq mockups I had a pretty good idea of how I wanted it to work, the next step was to bust out some photoshop.

The build was done with the trusty combination of Sinatra, HAML, SASS and fancyviews. Deployment and hosting is on the awesome that is Heroku.

Embedding custom typefaces with @font-face

Forget image-replacement, sifr and cufon! @font-face has traction with most of the major browsers now (IE6+, Firefox 3.5+, Safari 3.1+, Opera, etc).

I simply grabbed a couple of free fonts (ChunkFive by The League of Movable Type and zorque by Ray Larabie), converted them to EOT for IE, and declared them via CSS:

@font-face {
  font-family: "ChunkFive";
  src: url("/chunkfive.eot");
  src: local("ChunkFive"), url("/chunkfive.otf") format("opentype"); }

Using the font is as simple as:

h1 {
  font-family: "ChunkFive";
}

One of the many advantages to using @font-face is we get back all the standard webby things such as inline links and images.

Motion blur with sprites

The blurry tshirt effects were made using sprites.

Above is the 5 frame sprite used to animate the male tee. At different stages during the animation I change the offset of the background image to give the effect of motion blur. I did try to get away with just 3 frames but adding an extra two meant I could go with more angle and blur.

Decorating dom nodes with $$

For the JS I used a Yehuda Katz and Myles Byrne inspired trick of attaching methods directly to DOM nodes using jQuery's data method.

// Decorates dom elements with methods
$$ = function(elem, methods) {
  if (methods) $(elem).data("controller", methods);
  return $(elem).data("controller");
}

This allows you to construct an object model around the DOM, like so:

$(function() {
  var cut = $("#cut"),
      maleTee = cut.find(".m-tee");
  $$(cut, {
    show: function() {
      cut.show();
      maleTee.animate({left:"400px"});
    }
  });

All the local variables are like instance variables, accessible through closure. To get a handle on the object with your custom functions you can use a selector:

$$("#cut").show();

or if you've already got a jquery collection object you can call $$ on it instead:

var cut = $("#cut");
$$(cut).show();

The final test

In the end I'm pretty happy with the result, all that's left now is to see if it sells some tees.