I won a ticket to Google I/O!

We've been using the Google Web Toolkit (GWT) for about 2 years and have also gone to the past 2 years of Google I/O. It's been a fun and useful conference and there was no question we were going to go again this year.

I had been watching @googleio on Twitter and was ready to buy tickets when they were available. The day they went on sale I was traveling to Providence, RI to do a week of product design and strategic planning with the rest of the Traction team. While I was in the air, tickets for Google I/O sold out in 59 minutes.

A few weeks ago, Google announced Last Call for Google I/O, a series of developer challenges that would award 100 developers a ticket to Google I/O. One of those challenges involved creating a countdown timer using GWT and my submission was one of the 10 winners chosen.

See my countdown timer live

The implementation is simple but uses some novel techniques that only work in modern browsers.

Here are the pieces that make this countdown timer work:

Google Web Toolkit (GWT)

GWT compiles Java into JavaScript. I use it to create a timer that, every second, computes the time remaining for the countdown and adjusts the CSS class value for the digit elements. The markup is pretty simple and here's what you see if you inspect it the digits:

The first class on the digit lets the background color of the digits be styled independently. The second class corresponds to the value of the digit.

CSS3 Transitions

Instead of doing the animation in GWT, I wanted to use CSS3 Transitions to let the browser take care of the animation. CSS3 Transitions are incredibly simple and powerful. I use SASS and Compass to write all of my CSS and here's what that looks like:

+transition is a Compass mixin that creates all the CSS3 transition rules for browsers that support it and +replace-text will replace text with an image with a specified background position. If you inspect a digit, you can see the CSS that Compass generates and maybe appreciate why we love SASS and Compass. It's the GWT of CSS.

CSS3 Transitions are really simple. When the class on an element changes, instead of rendering the new styles immediately, the two transition rules say to animate the background-position change over 0.3s. This is why the digits appear to slide in as they change.

24-bit Transparency in PNG

The individual digits are rendered using the same single image, digits.png. The image has a white foreground and transparent numbers. This means that any background behind the image will show through. You'll notice that the numbers have nice rounded corners. They are anti-aliased which is possible because 24-bit PNGs have a full 8-bits (256 values) of transparency.

In the 4 hours I spent on this implementation, I think an hour was spent creating that image. I know emacs better than Photoshop and pasting into a layer mask is a non-obvious process.

The source code is available at code.google.com/p… if you'd like to explore it.

Hope to see you at Google I/O this year!

-Andy (@pulazzo)