Kenneth's Picnic

Someone recently asked me whether it would be possible to chain asynchronous events in JavaScript. After a little pondering, I figured out a way to do it with a simple queue. I thought this would be an awesome addition to chaining for a good few hours, until I remembered how jQuery did it, and that I’d recently used exactly that function. (more…)

I’ve taken another look at last year’s Chrome Experiment, JS Fireworks.

This time I’ve rewritten it to use SVG, whose arrival in IE9 promises to make HTML more interesting. In fact, I’m far more excited about animated SVG than CSS transforms and the fabled HTML5.

I used Keith Wood’s jQuery SVG library, which seems quite helpful, and simply replaced the ‘draw line’ commands with their equivalents.

Canvas is the bitmap to SVG’s vector, so while I have to clear the screen and redraw each time in canvas, I merely need to move the lines in SVG. Presumably the number of shapes on screen affects performance, so that was a big difference.

Here’s the result: JS-Fireworks in SVG. I’ve reduced the number of items in each explosion from 30 down to 10. You’ll see why.

It runs very quickly in Chrome (Mac), slowly in FireFox, and smoothly, though not excessively quickly, in IE9, which I’m quite excited about. Where’s IE9 Experiments?

I haven’t tried IE678. But then I haven’t tried Mosaic either.

I’ve just finished working on McLaren’s new F1 site, http://mclaren.com/home, for the 2010 season, at Pirata London, for Work Club.

I’ll be writing up what we’ve done here in several parts. Sign up for my RSS feed to keep updated.

Part three covers the JavaScript data for the telemetry panel, known as “The Race 1.0b”. (more…)

I’ve just finished working on McLaren’s new F1 site, http://mclaren.com/home, for the 2010 season, at Pirata London, for Work Club.

I’ll be writing up what we’ve done here in several parts. Sign up for my RSS feed to keep updated.

First up, the HTML. The site design is brilliantly engineered for layout on the web. It’s clean, fresh and bold. No rounded corners or “web 2.0″ gradients. (more…)

I’ve just submitted my Chrome Experiment – JavaScript Fireworks.
http://js-fireworks.appspot.com/

This amuses me because it’s such an old-fashioned idea. A bit like snow on your website, it’s a very nineties theme and I suspect I’ll have a lot of ex-Geocities users asking me how to include it on their pages.

I’m particularly pleased with the TinyURL inclusion, just for the hell of it And I look forward to tracking the messages via Google Analytics.

It’s no revolution (some of those experiments are awesome), and it’s not very Chrome-specific. Firefox handles the canvas better now, and Safari is very fast. Should I use excanvas to support IE???
Anyways, I’m pleased with the effect.

Update (12 May 2009):
No response so far (snif). I saw some hits from California, and one message sent saying “Not Your Mother’s JavaScript” – which is the experiments’ tagline. Fingers still crossed.

Update (13 May 2009):
Some quick updates: IE support! Really shows off the awesome excanvas library. But it’s a bit slow. I’ve intentionally not reduced the activity in IE to show the performance difference. Also, changed the default message.
Also, allowed click events to bring up the window, so it’s a bit more useable.

Update (16 May 2009):

Added various controls to experiment with. Time and gravity controls are fun. Toyed with framerate and number of sparks sliders, but didn’t work out.

Update (21 May 2009):

Added credit for the font, which was a free font, BM Receipt, passed through Cufon Generator to get each point as a JavaScript array, then stripped back to remove the lines, leaving just the points.