Dec 27, 2013 by Matt | Posted in Coding
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
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.)
border: 1px solid #ccc;
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;
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.
Apr 10, 2013 by Matt | Posted in WordPress
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]
Apr 3, 2013 by Matt | Posted in Design
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 (
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
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
Mar 6, 2013 by Matt | Posted in Software & Scripts
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]
Mar 29, 2012 by Matt | Posted in Coding
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.
Nov 21, 2011 by Matt | Posted in Coding
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>
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.
HTML 5 data- Attributes [John Resig]
May 16, 2011 by Matt | Posted in Coding
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.
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.
May 13, 2011 by Matt | Posted in General
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.)
If that’s not enough of an Angry Birds fix for you, how about a cover version of the theme with real instruments?
Apr 11, 2011 by Matt | Posted in Coding
This is one of the coolest Smashing Magazine articles I have seen in awhile: Syncing Content With HTML5 Video.
var v = document.getElementsByTagName('video')
var t = document.getElementById('time');
t.innerHTML = v.currentTime;
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]
Jan 21, 2011 by Matt | Posted in Coding
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…