PPL30 Day 14: HTML5
Today I’ve been trying to catch up on all features of HTML5 and its brethren: web workers, embedding audio and video without third-party intervention, canvas, application caches, geolocation, persistent local storage, microdata, new form elements, and, last but not least, some new semantic elements. Whew! I started with semantic elements,
This is part of the Peer Pressure Learning 30 series. To learn more about what in the hell that means, see the intro to the series, A Good Time To Learn.
Resources
HTML5 Rocks
HTML5 Rocks has it all! Interactive presentation, a code playground that allows you to experiment with the API, tutorials, and links to other resources.
Dive Into HTML 5
Though I like HTML5 Rocks, Mark Pilgrim’s Dive Into HTML 5 captivated my attention. Perhaps I’m just a sucker for minimal designs, well-layed-out content, and good typography. In any case, it’s essentially a book in web form, and I found it an enjoyable read, and a good place to start.
What I Think I Now Know
What do I know? I know that you can start now. That’s what I did. If you view the source of this post, you’ll notice that several HTML5 elements have snuck in: header, hgroup, nav, article, time, and footer. In addition to new elements, several of the elements you might find in the head section of an HTML document and above have been updated to their HTML5 counterparts. Nearly all of it was valid HTML5, thus didn’t need changed necessarily, but then what would I write about?
I thought I’d play with <canvas> a bit. I think it’s required, if you’re doing anything with HTML5, that you at least mention <canvas>. So, I drew what looks like a snapshot of our friend Vim Diesel. Precious, isn’t he?
Here’s the code that got me there:
<% coderay(:lang => :javascript, :line_numbers => :inline) do #_ -%>
<% end %>
The geolocation feature is an intrigueing one. I was happy to hear (though I suppose I could’ve guessed) that it is opt-in. Sure, a site that wants to can probably figure out where I’m at, but at least my client is not going to help them unless I tell it to do so.
The form updates are going to be nice. Automatic validation is going to be interesting. The added elements could be great: sliders, date pickers, color pickers, etc., and a small but welcome one, placeholder text. It sounds silly, but having placeholder text in an input box be native instead of javascript-based makes me happy. You know what doesn’t make me happy? Firefox doesn’t yet support it.
There’s really so much that goes with HTML5, it’s hard to cover it all. I am very happy that I decided to at least attempt to bring my own knowledge up to speed on HTML5. I learned a lot, and it gave me an excuse to take a good look at my blog’s markup, too (which could still use some work). I recommend taking a look at Dive Into HTML 5. It’s a good read!
Tomorrow, I’d like to learn some Python. Perhaps I’ll become a Pythonista. I’d like to be some sort of -ista. It sounds glamorous. Well, not so much a barista.