Future-proof HTML5 with jQuery


These are my notes from a talk given by Mike Taylor at the 2010 jQuery conference in Mountain View, California. You can follow him on Twitter @miketaylr

I live in Brooklyn. My talk is about the future.

I don't want to say it's about philosophy, because that sound pretty fancy. I just want to share what I've been thinking about.

The future is about HTML 5. It has nothing to do with robots, (unless they have DOM parsers.) I believe in:

Mike Taylor on stage

  • New semantic elements
  • Canvas 2d contexts
  • Microdata
  • Cross-document and channel messaging
  • Forms
  • Web workers
  • Web storage
  • Web sockets (API and protocol)
  • Server-side events
  • Geolocation

Progressive Enhancement

I mentioned I was giving this talk to someone, and they said "I don't see what HTML5 has to do with jQuery." I hope to show that in this talk.

My talk is not about progressive enhancement. Steve defined it earlier this morning; we provide this simple functionality across all platforms, and then we use JavaScript to build it up for the platforms that can handle it.

Regressive Enhancement

This is the idea that we should be using HTML5 markup today to build native experiences with the semantic elements and form attributes.

Of course, not everyone has a browser can use these features, and we'll use JavaScript to handle this. We'll do feature detection, and back-port functionality for crappy browsers. Wait for your code to be obsolete.

Here's an example:

This is regressive enhancement.

Forms in HTML5

[Mike gave a really short overview of all the new Form elements in HTML5]

We'll need to backport all this functionality for the crappy browsers. (Or should I say "older browsers.") Take the autofocus plugin for example. There's a focus method you can call on the input, and it will do what you want it to do. [dn: autofocus plugin demo on Mike's site here] We can do the same thing with Placeholders.

Thanks to Mike for giving this talk. As of this writing, the presentation was not yet up on his website, but it may eventually show up here.

Did you enjoy this post? Please spread the word.