GDD Keynote: The HTML5 Demos

Monday, November 21, 2011

I had the opportunity to present a few demos during the Chrome section of Saturday’s Google Developer Day in Berlin (which, incidentally, was a blast). I expect a video to go up at some point in the vaguely near future, but, since I got more than a few questions about it, I’ll throw the links up here with a bit of background and credit for each. Incidentally, thanks to Paul Kinlan for taking some pictures during the demos. I’m glad I have something to show here as a stopgap before the video’s ready! Update: The keynote video is up on YouTube, and embedded below.

The first demo was pulled from a talk Mike Bostock gave just last week, highlighting the power of the impressive D3.js. D3 is a free JavaScript library that makes it easy to bind data to a DOM, and then generate stunning visualizations based on those bindings. His entire presentation is well worth checking out, and really highlight what an often overlooked technology like SVG is capable of.

Next, I pulled out an oldie-but-goodie: Joe Lambert’s Flux Slider. It’s a quick demonstration of the power of CSS-based transitions, and really well suited to venues like GDD, as it makes the capabilities of modern browsers immediately visually apparent. If you haven’t seen it yet, take a look. It’s another open-source library, so fiddle with the code as well.

Obviously, no HTML5 demo is complete without WebGL, and no WebGL demo is complete without Mr.doob and three.js. I introduced the topic by throwing a huge, Kinect-driven Mr.doob onto the wall behind me.

I followed up the introduction with a beautiful terrain rendering from AlteredQualia. What I liked most about that demo is the fact they they’ve pulled pieces from the ro.me project to save time and effort. Open source is brilliant.

Finally, I pulled the HTML5 Wow Visualizer from Eric and Arne’s excellent I/O 2011 presentation. It’s still the best WebAudio API demo out there, clearly demonstrating the power of the analyzer and showing off things that simply aren’t possible with the audio tag.

And that’s it. Fiveish quick demos in about five minutes. I enjoyed it! What did you think?

— Mike West