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.

I finished some more tweaks to ComicJuice:

• IE6 and 7 are now supported, thanks to the amazing ExplorerCanvas by Google. It emulates the <canvas> tag in IE, meaning that client-side scriptable vector graphics are now available on all the major browsers (IE, Firefox, Safari, Opera). I doubt Konqueror will be far behind.

  This opens up some cool abilities, like dynamic in-page graphs, mini-widgets (sliders, dials, maps, ...) and even pure JS games. There's a bunch of examples linked on Wikipedia (though most don't use ExplorerCanvas yet).

• I added support for uploading your own images rather than using pictures on the web. It uses a customized and themed version of core's JS uploader.
  
  
• I improved the clipping of speech bubbles so there should be less useless whitespace around comics, especially when embedding them.

If you haven't played around with it yet, give it a shot. No registration is required if you just want to play around.