If you haven't seen it yet, check out the JS1K demo contest. The goal is to do something neat in 1 kilobyte of JavaScript code.

I couldn't resist making one myself, so I pulled out my bag of tricks from my Winamp music visualization days and started coding. I'm really happy with how it turned out. And no, it won't work in Internet Explorer:

Original Version

Stop DemoStart DemoView Source

Edit: OH SNAP! I just rewrote the demo to include volumetric light beams and still fit in 1K:

New and Improved Version

Stop DemoStart DemoView Source
(the music is not part of the 1K, but it does make it more enjoyable)

Now, whenever size is an issue, the best way to make a small program is to generate all data of the fly, i.e. procedurally. This saves valuable storage space. While this might seem like a black art, often it just comes down to clever use of (high school) math. And as is often the case, the best tricks are also the simplest, as they use the least amount of code.

To illustrate this, I'm going to break down my demo and show you all the major pieces and shortcuts used. Unlike the actual 1k demo, the code snippets here will feature legible spacing and descriptive variable names.

HTML5 gives us a couple new toys to play with, such as <audio> and <video> tags. On the visual side, we've already seen live green-screening with Canvas and JS, and in terms of audio there's been several JS drum machines already. But the question I was interested in was: can you use JavaScript to stream live data into these media tags?

Enter the JavaScript audio synth. It generates a handful of samples using very basic time-domain synthesis, wraps them up in a WAVE file header and embeds them in <audio> tags using base64-encoded data URIs. Each sample is then triggered using timers to play the drum pattern. It's quite simple to do and runs fast enough in HTML5 capable browsers to be unnoticeable. Yes, it sounds tinny, but that's just because I'm too lazy to design proper filters for toys like this.

The Canvas tag's popularity is slowly increasing around the web. I've seen big sites use it for image rotation, graph plotting, reflection effects and much more.

However, Canvas is still limited to 2D: its drawing operations can only do typical vector graphics with so-called affine transformations, i.e. scaling, rotating, skewing and translation. Though there have been some efforts to try and add a 3D context to Canvas, these efforts are still experimental and only available for a minority of browsers through plug-ins.

So when my colleague Ross asked me if we could build a Cover Flow-like widget with JavaScript, my initial reaction was no... but really, that's just a cop out. All you need are textured rectangles drawn in a convincing perspective: a much simpler scenario than full blown 3D.

The days of static UIs that only have jarring transitions between pages are pretty much over. With frameworks like CoreAnimation or jQuery, it's easy to add useful animations to applications and webpages. In the case of jQuery, you can easily animate any CSS property, and you get free work-arounds for browser bugs to boot. You can run multiple animations (of arbitrary duration) at the same time, queue animations and even animate complex properties like colors or clipping rectangles.

But what if you want to go beyond mere CSS? You might have a custom widget that is drawn using <canvas>, whose contents are controlled by internal variables; maybe you're using 3D transformations to scale and position images on a page, and simple 2D tweening just doesn't cut it.

In that case, it would seem you are out of luck: jQuery's .animate() method can only be applied to a collection of DOM elements, and relies heavily on the browser's own semantics for processing CSS values and their units. However thanks to JavaScript's flexibility and jQuery's architecture, we can work around this, and re-use jQuery's excellent animation core for our own nefarious purposes.

(with apologies to Matt Groening)

After about two years, it's time for another make-over of my site.

My last design had a relatively quirky look, with a bold red/yellow theme built from various irregular vector shapes. The idea was to step away from the typical mold of rectangular aligned frames on a page. I tried to incorporate some elements of perspective into the page composition, but it ended up being a relatively flat, geometrical theme.

This time I wanted to work on the depth aspect and try to create something that feels spacious. To do this, I based the entire redesign on a two-point perspective. While the content itself is normal 2D markup, it sits in a 3D frame.

According to Ohloh, Drupal 6 core now consists of 8% JavaScript. This is quite a lot.

Drupal and JavaScript haven't always seen eye to eye though.

While the first clean and consistent usage of JavaScript in core was the textfield autocompleter and accompanying drupal.js base (committed a little over two years ago), this was not the first line of JavaScript in Drupal core.

The Yaroon theme for example had a little JS dropdown navigator in 2001, while the Goofy theme used JavaScript to compress its gigantic table-based markup—yes, we were n00bs at one time too. In fact it took until January 2003 (with the retiring of the Goofy theme) for core to go back to plain PHP, HTML and CSS.

From that point on, JavaScript was shunned and suggesting it as a solution to a problem was sure to cause grumpy voices to rise. So it's not surprising that in 2005, a lot of people were skeptical about the proposed JavaScript features for Drupal 4.7. Still, the new incarnation was written with the clear mindset that everything must degrade gracefully without it, and that the methods used should be accessible, extensible and clean. The code got committed and was eventually released in May 2006.

Even so, it really wasn't until we included the jQuery library in Drupal 5 core that a significant amount of Drupal contributors started working with JavaScript in their modules and themes, as it lowered the barrier to entry for browser scripting massively.

Given all that, I'm quite impressed with this 8% figure for core. Slowly but surely, JavaScript in Drupal has gone from ugly duckling to shining star.