Words in Boxes

Nouns, verbs, and occasionally adjectives.

Tuesday, July 05, 2011

Clockster: A Simple Online Countdown Timer

I've created a small, HTML5 online countdown timer called Clockster. There's not much to it - you enter a time, the browser starts counting down in big numbers, and then beeps and flashes when time expires. It has a few interesting features:

  • It's completely HTML based. Most of the timers out there are Flash based, because until recently that was really the only way to play audio in the browser (for the beeping). But now all the major browsers support HTML5 audio, rendering it unnecessary.
  • If you resize the window, the numbers resize as well. So you can either see it from across the room, or make a small clock in the corner of your screen.
  • There are controls (pause, restart) on the countdown screen.
  • The time is specified in the url. For example, http://clockster.net/25minutes/.
  • The front page or any specific timer can be pinned to the Windows taskbar using Chrome or Internet Explorer.

On the server, Clockster is written in ASP.NET MVC, and hosted on AppHarbor. While the server-side aspect of Clockster is very light weight, I've been nothing but happy with AppHarbor. Deploying is as simple as pushing your Git or Mercurial repository to AppHarbor, which handles building and deploying the site automatically, usually within a few seconds. (It's like Heroku, if you're familiar with it.) For a small app like Clockster, it's completely free.

On the client, Clockster uses jQuery and date.js. The audio is handled by HTML5 audio, which why you need a modern browser to use it. (That's the fun of doing a completely non-commercial personal site).

Clockster was also a great opportunity to check out Nuget, the .NET package manager. I'm really impressed. It's obviously heavily inspired by Ruby gems, and it makes installing all sorts of project dependencies (like jQuery and Elmah) really easy.

Clockster was a fun project and I hope you check it out.

I'm James Sulak, a software developer in Houston, Texas.

You can also find me on Twitter, or if you're curious, on my old-fashioned home page. If you want to contact me directly, you can e-mail comments@wordsinboxes.com.