A Holiday Update

'Tis the season.. The season to be smashing christmas lights, that is!

For some reason or another, I have usually found myself adding random seasonal items to my site - especially around the christmas holiday time. The following is an overview of some of the stranger yuletide offerings I've built over the last six years.

A Brief History (Or, How I Learned To Smash)

Random Weirdness III 2000: "Random Weirdness III", with seasonal flavour (IE-only, very old, buggy/broken and weird!)

Back in 2000, I decided to try to add some holiday cheer to my site design around Christmas time. I had one of those "crescent" things around my site's wordmark at the time (as was the apparent trend,) and so I ended up adorning it with christmas lights. It was OK at first, but felt like it had potential to be far more entertaining.

Needs More Smash!

The lights were just static at first, but I thought it would be fun to animate them. I cut separate images for the lights' on/off states, and used some timeout-based javascript to randomly toggle lights on and off. The result was fairly nice, but something else was needed: More smash!

I had played with a few ways of embedding and scripting sounds back in the day, so I added some glass shattering sound effects and created a third set of "broken" images. More script was added to then also generate a dynamic, random explosion effect of several glass shards when the bulbs were broken. Once all bulbs on the chain were smashed, the process could be repeated ad infinitum.

And thus, Christmas Light Smashfest was born.

Christmas Light Smashfest 2001

Christmas Light Smashfest 2001 2001: Christmas Light Smashfest (IE-only)

Smash the lights as fast as possible for a record. Includes goofy sounds, commentary and (that year,) highscores.

Linked from a christmas section on about.com, mention in a "site of the day" e-mail by colonize.com resulted in 17,000+ unique visitors, Dec. 26th, 2001 (related)

The next year (what became the second year of seasonal smashing,) I decided to continue the trend, but up the ante a bit; make a dedicated page which would host some music, sound effects, colour commentary under certain conditions, and a highscores table which would bring people back for more. The idea was really simple: Smash as many lights in as little time as possible!


Winter.02. Put javascript:ciao() in your address bar and hit enter for a bonus on this one! 2000: Winter.02 design. Easter Egg: After loading this page, put javascript:ciao() in your address bar and hit enter for a random surprise.

By mid-2002, I had started writing standards-compliant code that would run on browsers other than IE, my personal preference up until that time. (I had been developing standards-based sites professionally for a little while before this, and was running short on excuses.) Again the "interactive ornament on the web site" idea was re-hashed, but with less grandeur than previous versions. The sound effects work in IE, and used to work in old versions of Mozilla's Phoenix (now Firefox) browser.

Don't forget to put javascript:ciao() in your address bar (and hit enter/return) when you hit winter.02, for a truly random (inside joke) easter egg.


In 2003 I decorated the Spring.03 version of my site with a new javascript snow effect I'd been working on. I then made the script available for anyone to use. It's kind of neat in that I haven't updated it in two years, and it's still flexible enough that it works on modern browsers.


In the spirit of the season, I've been working on some new javascript sound projects - SoundManager 2 is on the way, and I've been busy tinkering with a javascript MP3 player implementation which uses SoundManager as its base. I don't know why the holidays seem to always be a source of creative inspiration for me, but it's fun - I'm going to roll with it.

Happy holidays!

Related links