Tag Archives: HTML5

Illustrating Keyboard Shortcuts with the <kbd> Tag and a Bit of CSS

Dec 27, 2013 by Matt | Posted in Coding 6 Comments

The HTML spec has long had a (much underutilized) tag called kbd, which is intended to be used for marking up user input. For example, you could write something like this:

<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.

WordPress 3.6 to Have Audio/Video Support in Core

Apr 10, 2013 by Matt | Posted in WordPress One Comment

Here’s some great news from the WordPress development blog: WordPress 3.6 is going to have built-in support for audio/video playback. You will be able to upload a media file, and WordPress will handle playback with the MediaElement.js. Shortcodes will be available, as well as template tags for theming support.

…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]

HTML and CSS: Develop with Tomorrow’s Standards Today by Brian P. Hogan

Apr 3, 2013 by Matt | Posted in Design No Comments

I recently unearthed a review copy of a book that somehow got lost in the shuffle a couple of years ago, HTML5 and CSS3: Develop with Tomorrow’s Standards Today by Brian P. Hogan, which is too bad, since it’s one of the better books I’ve seen on the subject. It’s a comprehensive primer on the changes in HTML5 and CSS3. I enjoyed reading through the book after I unburied it last week.

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.

FillDisk Proof-of-Concept Demonstrates Flaw in Browsers’ localStorage Implementations

Mar 6, 2013 by Matt | Posted in Software & Scripts No Comments

HTML5’s localStorage API makes it possible for a web page to store 5-10MB of persistent data, much like cookies, but for more complex data—as you probably already know if you’re familiar with HTML5’s fancy new APIs. Feross Aboukhadijeh came up with an interesting and relevant proof-of-concept that’s been making its rounds on the internet: a little something called FillDisk.

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]

BrowserQuest: A Massively Multiplayer Game in HTML5 and JavaScript

Mar 29, 2012 by Matt | Posted in Coding No Comments

Imagine a massively multiplayer game using HTML5 features, such as Canvas and WebSocket, that works in any modern browser. Ridiculous, you say? Then you haven’t seen BrowserQuest yet.

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.

HTML5 Data Attributes

Nov 21, 2011 by Matt | Posted in Coding No Comments

Have you ever looked at the HTML snippet for Twitter’s Tweet button and wondered what those data-something="loremipsum" attributes were?

<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]

Dive Into HTML5

May 16, 2011 by Matt | Posted in Coding No Comments

Looking to bring your HTML skills up-to-date, now that HTML5 support is growing in modern browsers? Mark Pilgrim has a nice online book by the name of Dive Into HTML5 that covers most of the big new things. It is also available in print, published by O’Reilly, under the name HTML5: Up & Running.

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.

Angry Birds Comes to the Web, in HTML5

May 13, 2011 by Matt | Posted in General No Comments

Rovio, on the 10th of May, released an unexpected new version of their popular Angry Birds game. Previously available on iOS, Android and OS X, Angry Birds is now available on the web.

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?

Syncing Content With HTML5 Video or Audio

Apr 11, 2011 by Matt | Posted in Coding No Comments

This is one of the coolest Smashing Magazine articles I have seen in awhile: Syncing Content With HTML5 Video.

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]

HTML5 Gets a Logo

Jan 21, 2011 by Matt | Posted in Coding No Comments

The W3C has put up a microsite with the new logo for HTML5. It looks pretty good, certainly better than its predecessors, even if it does have a bit of the “Web 2.0″ look that is finally starting to lose its novelty. I like that they kept the gradients to a minimum, which is starting to become more common in the aftermath of the glossy “Web 2.0″ style.

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…