At Silicon Valley Code Camp, I gave a couple of talks about HTML5 stuff. One of them, on Saturday evening, was a lightning survey of most of HTML5, particularly areas I thought were really cool but don't get much hype, so developers that don't read specs for fun may have missed out on them.

The talk was great - I didn't have time to do slides, so it was pure demos, source code, and me talking for an hour and a half. We went over the end of the session by 15 or 20 minutes, but I didn't lose a single person. Woo! Afterwards, and throughout the Code Camp, I had several people tell me that I gave the best HTML5 talk they'd ever heard. Double woo! I also didn't have time to write up a post or link to my demos in any discoverable fashion, so I promised everyone I'd do that today. Here goes:

New Elements

This is me attempting to cram as many of the new HTML5 elements into a single page as possible. I was also kind of silly with it. Looking at the page itself isn't very useful, as I didn't style anything and some of the new elements don't actually do anything yet, so just check out the source.

New Selection Functions

A quick demonstration and explanation of getElementsByClassName and querySelector. From here on out I start using my $() function in the demos, which is just a shortcut to querySelector. (Yes, querySelector isn't quite actually part of HTML5. Bite me.)

Data Attributes

Another View-Source only demo, this one showed off the new class of data-* attributes. It wasn't very interesting by itself, but this and the previous and following demos really drove home that a lot of what HTML5 has done in the JS side is just learning what was successful in libraries and pulling that natively into the platform.

Push/Pop State

I'm not sure if very many people really "got" what was so cool about push/pop state, unfortunately. It's possible I just didn't explain it well - I tried to bring up the example of large ajax-y apps like GMail that are forced to save state in the hash to make things bookmarkable. It gets me excited, at least. ^_^

Iframe Sandbox, Seamless, and Srcdoc

This one went over reasonably, showing off the beefiness being added to iframes. I went into depth into why iframes are cool to use for certain security-conscious scenarios (like embedding blog comments), and explained the downsides and how @seamless and @srcdoc get around those.

LocalStorage

I liked this talk; the audience was really sharp and caught a lot of the implications. Basically, localStorage is just easier cookies, and comes with all the same complications and implications that cookies do.

Workers

This one's mainly just interesting for the source code, though it does have something to display in the normal page. Workers are a cool concept, but it's not immediately obvious how to use them; this example shows it off really simply. Nothing gets the point across better than throwing up an infinite loop and seeing it not lock up your browser.

Drag & Drop

I completely skipped over this one by accident! T_T I can't believe it. I think people would have really liked to see this bit of code. Hopefully enough people from the audience actually return to my blog and read this. Drag & Drop is really easy, it's just kind of fucked up when you first attempt to wrap your head around it. It bit me a couple times while trying to write up this example, too!

Canvas

A relatively simple demo, just showing a grabbag of effects that you can accomplish with Canvas. This was made a little more interesting by John Foliot, who was sitting in the audience, asking about accessibility. I took a minute to rant on my soapbox about using Canvas to replicate textareas and such, and talked about how accessibility is hard, but we're working on it, and so just don't do anything stupid yet.

Other Demos I'd Shown Elsewhere

I also showed off my Colliding Circles toy, and turned up the sound on my laptop to maximum so the audience could hear the use of Audio in the game. Finally, to show off Video, Canvas, and just generally wow people, I finished off with a tour of my Video demos, which never fail to impress people, particularly the video-to-ASCII conversion. I'm glad I spent time putting together a few extra demos past that one, too, because everyone seemed to like having mouse interaction come into play.

Things I Regret Not Talking About

I really wanted to discuss EventSource, because I think it's really awesome, but I couldn't get the demo working in Chrome. I have no clue what's wrong with it; we clearly support EventSource because we make the appropriate request with the right headers, but then I continually get an error. I dunno what's up.

I also kinda wanted to talk about ARIA and Microdata, but they both slipped my mind completely when I was writing up demos. I encourage everyone to go read my Microdata tutorial, which breaks it down really simply.