<p>The most famous keyboard shortcut is probably <kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>.</p>

The browser (by default) renders the kbd tags in a monotype font, just like code and pre. But if you’re already going to mark up keys like that for semantic reasons, why not apply a little styling and make it fancy? (I’ve seen a few sites do this, Stack Overflow being one of them.)

kbd {
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 0.1em 0.5em;
	margin: 0 0.2em;
	box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
	background-color: #f7f7f7;
}

While the tag isn’t solely meant for this use case—it can also be used for any user input, such as something you intend the reader to search on Google—I think it’s a great use. The code element tends to be used for the latter case more often, whether it’s considered appropriate or not, so styling it like so shouldn’t get in the way in most cases.

If you have need to display keyboard shortcuts periodically, it’s definitely a nice touch.

…there is now native support for Audio and Video in core! There has been great support for embeds by way of WP_Embed and oEmbed providers for a while, but, if you wanted to play an MP3 from your Media Library, you had to install a plugin. Supporting audio and video in core gives bands, podcasters, vloggers, et al the ability to easily and beautifully expresses themselves through sounds and moving pictures without using an external service.

This should go nicely with the coming changes to Post Formats—unless the plans have change, a UI based on the one by Crowd Favorite is going to be a part of the WordPress core, hopefully making post formats actually useful. (I’ve been using the Crowd Favorite plugin on my personal blog for awhile now, and it’s great.)

Another part I find interesting is the addition of embed handlers for common media files. You will be able to paste an URL to an AAC/MP3/etc. into a post and it will be seamlessly replaced by a media player, just like how oEmbed works.

Audio / Video support in Core [Make WordPress]

It features a chapter on logically marking up page structure with the new semantic tags (header, nav, section, article, etc.), which explains the contexts they should be used in with a hands-on example of restructuring a blog without excessive divs. A lot of online tutorials make the error of suggesting the aside element for a blog sidebar, which the book helpfully points out as wrong. The section element is the proper tag for the job, as it denotes an arbitrary section of the page, whereas aside is for broken-out sections of your article content, such as pullquotes or diagrams.

From there the author moves on to some CSS3 tricks using newly-added selectors. He shows some simple methods to add zebra-striping to tables with pseudo-classes and add visible URLs to links via a print stylesheet with :after. There’s a brief section demonstrating media queries, as well some on the new JavaScript APIs—localStorage and history pushState, for example. There’s even a bit on using cache manifests to set up offline access.

Oh, and the deprecations. HTML5 deprecates a good many tags and attributes. There is a section listing those, as well as some modern alternatives, such as opening links in new windows without the deprecated target attribute. It can be done cleanly and semantically by using JavaScript, without impacting the user’s ability to middle-click a link and open a new tab…which far too many sites still do today. If you do that, you need to read this book just for that reason.

Apparently Chrome, Safari, Internet Explorer and Opera all have a flaw in their localStorage implementations that allow a website to use a little trick to fill your hard disk up. They allow each subdomain of an origin to have its own storage pool, so you can bypass the quota by looping around and storing data for tons of subdomains. FillDisk manages 1GB per 16 seconds on the author’s MacBook Pro. Firefox gets it right and sets the quota for the entire second-level domain.

Now Mozilla’s solution doesn’t exactly seem optimal to me. There are plenty of sites that allow users to host things on subdomains, GitHub Pages being a noteworthy example. It seems to me that a more equitable solution is to extend the partial solution Firefox implements and prompt the user to allow the pool to be enlarged when needed.

Introducing the HTML5 Hard Disk Filler™ API [Feross.org]

The clever demonstration, featured on the Mozilla Hacks blog, works on both desktops and mobile devices, in all it’s scrolling two-dimensional glory. It’s rendered on an HTML5 Canvas, uses WebSockets to stay in constant communication with the Node.js server, saves your progress with the local storage API, preloads the map in a different thread with Web Workers, plays sound with HTML5 Audio and even uses media queries to adapt to different devices. Oh, and the source code is all available on GitHub.

The game is largely exploring, hacking-and-slashing monsters along the way, while you collect achievements. It has chat, and you can find new items to replace your default gear, but no player-versus-player combat.

My laptop’s fans stayed far quieter than they would while playing a similar Flash game, which I would say says something about the level of optimization browsers have done when compared to OS X/Linux versions of Flash.

I think we’ll be seeing more games built this way in the near future, and 3D games once WebGL reaches the same level of maturity and browser support.

<a href="https://twitter.com/share" data-count="vertical" data-via="redwall_hp">Tweet</a>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

I did too, and after a bit of Google searching, I found a post by John Resig (the creator of jQuery) that explains that they’re something called data attributes.

A new feature in HTML5, they provide a way to embed data in an element and access it from a script. (An accompanying JavaScript API makes it very easy to retrieve the data.)

HTML 5 data- Attributes [John Resig]

The book, both the free online version and the print copy, cover things like HTML5 video, offline storage, detecting browser support of HTML5 features with JavaScript, as well as an overview of the new elements. An interesting chapter on the history of HTML is also included.

It’s a short book, not intended to teach newbies about HTML so much as to bring adepts up to speed with the latest advancements.

You can find it in the Chrome Web Store, or at this URL. It’s currently in public beta, and is free for the time being at least. (It also runs in Firefox 4.)

The game is 100% HTML5 and JavaScript, and it runs very smoothly all things considered. There were a couple of quirks when I tried it, but they are likely just bugs for Rovio to work out and not a product of the platform. It really puts the myth that Flash is necessary for browser games to death. (Hopefully in the future we will see GUI composing tools along the lines of Adobe Flash that export to plain HTML5 instead of a proprietary format.)

If that’s not enough of an Angry Birds fix for you, how about a cover version of the theme with real instruments?

Using the generic HTLM5 video and audio elements and a bit of JavaScript, the timeupdate event in particular, you can synchronize script events to the media playback. The timeupdate event returns the media’s timecode, which you can then use to fire off DOM changes.

<script>
(function(){
    var v = document.getElementsByTagName('video')[0]
    var t = document.getElementById('time');
    v.addEventListener('timeupdate',function(event){
      t.innerHTML = v.currentTime;
    },false);
  })();
</script>

There are so many applications where this could be useful. You could supply show notes synchronized to a podcast, for instance, or additional information to supplement a video tutorial.

Syncing Content With HTML5 Video [Smashing Magazine]

You can pick up SVG and PNG versions of the icon there, as well as T-Shirts featuring the logo…and free stickers if you live in the U.S. and have some spare postage stamps laying around.

Webmonkey brings up an interesting, and troubling, point about the HTML5 Logo site. The FAQ calls the logo a “general-purpose visual identity for a broad set of open web technologies, including HTML5, CSS, SVG, WOFF, and others.”

It doesn’t really matter if the New York Times thinks CSS 3 or SVG are HTML5, but we’d like to think that at least the organization in charge of describing what is, and is not, HTML5 would make some effort to distinguish between tools. Lumping everything together is as silly as a carpenter referring to every tool in their toolkit as “a hammer.”

That doesn’t sound very good to me. Is “HTML5″ becoming the new buzzword to replace “Web 2.0,” and sanctioned by its own standards body?

Update: And now it sounds like the HTML spec is no longer going to have specific version numbers…