I love this little markup pattern: simple, accessible and elegant …with some quirky CSS gotchas around styling non-standard prefixed pseudo-elements. They came from the Shadow DOM …dun dun DUN!
A new presentation from the wonderfully curmudgeonly Steven Pemberton, the Nosferatu of the web. Ignore the clickbaity title.
This part really, really resonated with me:
The web is the way now that we distribute information. We will need the web pages we create now to be readable in 100 years time, just as we can still read 100-year-old books.
Mike runs through the history of Flash. Those who forget the history of the web are doomed to repeat it:
The struggle now seems to be turning to native apps versus non-native apps on the mobile platform. It is similar to Flash’s original battle ground: the argument that the Web technology stack is not suitable for building applications with a polished user-experience.
I just noticed that I’m mentioned in the acknowledgements of this most handy of W3C documents. This pleases me disproportionately.
A history lesson and a love letter to the early web, taking in HTML, Photoshop, and the web standards movement.
Those were long years, the years of drop-shadows. Everything was jumping just slightly off the screen. For a stretch it seemed that drop-shadows and thin vertical columns of text would define the web. That was before we learned that the web is really a medium to display slideshows, as many slideshows as possible, with banner ads.
Paul Ford’s potted history of web standards, delivered in his own inimitable style.
Reading through the standards, which are dry as can be, you might imagine that standardization is a polite, almost academic process, where wonks calmly debate topics like semicolon placement. This is not the case.
This is hilarious …for about two dozen people.
For everyone else, it’s as opaque as the rest of the standardisation process.
HTML5 is now a W3C recommendation. Here’s what a bunch of people—myself included—have to say about that.
Great suggestions from Dave for podcasters keen on allowing easier sharing.
Oh, how I wish Soundcloud would do this and be less of an audio roach motel!
The definition of the cite element (and the blockquote element) has been changed for the better in HTML5 …at least in the W3C version anyway.
The semantics of the cite element are up for discussion again. Bruce, like myself, still thinks that we should be allowed to mark up names with the cite element (as per HTML 4), and also that cite elements should be allowed inside blockquotes to indicate the source of the quote.
Let’s pave that cowpath.
A great post by Stuart on the prospect of DRM-by-any-other-name in HTML.
The argument has been made that if the web doesn’t embrace this stuff, people won’t stop watching videos: they’ll just go somewhere other than the web to get them, and that is a correct argument. But what is the point in bringing people to the web to watch their videos, if in order to do so the web becomes platform-specific and unopen and balkanised?
You’re probably doing each of these already but just in case your’e not, Andy has listed six quick wins you can get from HTML5.
Bruce takes a look at the tricky issue of styling native form controls. Help us, Shadow DOM, you’re our only hope!
A good explanation of HTML5’s sectioning content and outline algorithm.
Bruce sits down for a chat with Hixie. This is a good insight into the past and present process behind HTML.
Tantek has put together a wiki page to document the arguments for and against adding a new “main” element to HTML.
A really nice explanation by Todd Kloots of Twitter’s use of progressive enhancement with Ajax and the HTML5 History API. There’s even a shout for Hijax in there.
Andrea looks at support for HTML5 input types in IE10 Mobile.
A worrying look at how modern web developers approach accessibility. In short, they don’t.
I had a lot of fun chatting with Chris and Dave on the Shop Talk Show. It is now available for your listening and huffduffing pleasure.
My case for the obsoletion of longdesc (Was: 48-Hour Consensus Call: InstateLongdesc CP Update) from James Craig on 2012-09-15 (email@example.com from September 2012)
James Craig is a mensch. This is how you give feedback to a working group.
Bruce’s thoughts on the proposed inclusion of a “content” or “maincontent” element in HTML5.
Personally, I don’t think there’s much point in adding a new element when there’s an existing attribute (role=”main”) that does exactly the same thing.
Also, I don’t see much point in adding an element that can only be used once and only once in a document. However, if a “content” or “maincontent” element could be used inside any sectioning content (section, article, nav, aside), then I could see it being far more useful.
Bruce writes about a worrying trend in standards work:
Tossing a specification that you’ve written in-house, in secret and already implemented onto a table at W3C, saying “here, standardise this” as you saunter past isn’t a Get Out of Jail Free card for proprietary misdemeanours. And it isn’t standardisation.
A look at the new pseudo-classes in CSS3 that go hand-in-hand with the form enhancements introduced in HTML5.
Richard gives the lowdown on the new translate attribute in HTML.
This helps to clarify the difference between native semantics and ARIA additions.
Some future-friendly musings on mobile from Mozilla and Yahoo.
Here’s a geek advent calendar I missed. There are some great CSS techniques here.
An in-depth look at browser polyfills: what they are, how they work, and how you can make your own.
It’s responsive. It looks great. It’s using HTML5 structural elements and microformats.
This is a great response to my recent post about semantics in HTML. Steve explores the accessibility implications. I heartily concur with his rallying cry at the end:
A fun platform game with a twist.
A very even-handed look at the time and data debacle in HTML5.
A single-serving website expressing the frustration and bewilderment at Hixie’s unilateral decision to drop the time element from HTML.
The HTML5 doctors are hosting a copy Mark Pilgrim’s Dive Into HTML5 at http://diveinto.html5doctor.com/ and they plan to keep it updated via Github.
This is such a great idea: magnetic HTML elements. And now Cameron is sharing the source files so that we can all print our own.
I never expected to see a cross between responsive design and AR, but here ya go:
A silly mashup of HTML5 technologies: We use the canvas to capture the contents of a video element. The canvas then identifies the blue markers and overlays an iframe on top of it. The iframe contains our website (upperdog.se) which has a responsive design.
A real-world anecdote from Jonathan illustrates some of the misconceptions around using HTML instead of going native. A lot of people don’t realise that web apps can store data offline.
It’s Opera …but it’s folk.
Mobile HTML5 - compatibility tables for iPhone, Android, BlackBerry, Symbian, iPad and other mobile devices
This just launched at the Breaking Development conference: another site that uses the term HTML5 to include CSS and Ajax. Still, despite its inaccurate nomenclature, it’s a useful compatibility table of device support in mobile browsers.
Nicole provides a step-by-step explanation of why it will probably benefit you to add classes to your headings to ensure consistent styling without writing overly-verbose CSS.
A brave attempt to explain the new outline algorithm in HTML (although it inaccurately states that no browsers have support for it—Firefox shipped with it a while back).
You can safely skip the comments: most of them are discouraging, ignorant, and frankly, just plain stupid.
A handy one-page cheatsheet for using HTML5’s appcache manifest file for offline storage.
A really nice little primer on getting started with HTML5.
A great reminder from Bruce that we need to remember to use cutting-edge web technology responsibly.
Listen to Josh explain a genuinely useful example of HTML5’s local storage that he’s added to Fontdeck.
Leonie points to a change in the semantics of the a element in HTML5 that could be very handy for accessible navigation.
A great round-up by Richard of some of the most common semantic pitfalls encountered with HTML5.
This is your one-stop shop for envelope-pushing in the browser:
Everything you ever needed to know about adding HTML5 audio and video to your site, courtesy of the mighty John Allsopp.
A fascinating examination by Hixie of web technologies that may have technically been “better” than HTML, but still found themselves subsumed into the simpler, more straightforward, good ol’ hypertext markup language.
The follow-on comments are definitely worth a read too.
I really like the thinking that’s gone into the design of Github, as shown in this presentation. It’s not really about responsive design as we commonly know it, but boy, is it a great deep dive into the importance of URLs and performance.
An excellent explanation from Richard of the bdi element (bi-directional isolate) for handling a mixture of left to right and right to left languages in HTML5.
An even-handed weighing up of the pros and cons of native and web app development for mobile.
A handy list of regular expressions that you can use in the new pattern attribute on the input element in HTML5.
Mike takes on the very tricky task of explaining the new outline algorithm—definitely one of the hardest features of HTML5 to explain, in my opinion.
A bookmarklet to help you figure out what files you might want to put in your cache manifest for offline storage.
John has written a very in-depth look at offline storage (using the cache manifest) in HTML5.
I’m getting behind Oli’s proposal to allow non-quoted footers within blockquotes in HTML. Here’s where I quote the design principles to support his case.
A handy mobile-friendly list from Mike Stenhouse of which fish are currently having their stocks depleted. It uses offline storage so once you’ve visited once, you’ll be able to pull it up anywhere.
Now this is how you make progress on getting changes made to a spec: by documenting real-world use cases.
New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 | David B. Calhoun – Developer Blog
An excellent article from Oli on markup patterns for quotations …though I still think that the cite element can be used for people’s names.
Derek runs some tests on how screenreaders behave when block-level elements are wrapped in links, which is now legal in HTML5.
Chloe’s redesign/realign is a lovely bit of HTML5 and CSS3 all wrapped up in a responsive layout.
This dovetails nicely with my recent post about the spirit of distributed collaboration. Here’s a great little bit of near-history spelunking from Paul, all about styling new HTML5 elements in pesky older versions of Internet Explorer.
A good round-up by Jack Osborne of where things currently stand with the hgroup group.
Ben Buchanan has a nice round-up of some of the options available when you’re switching over to HTML5.
Translation From MS-Speak to English of Selected Portions of Dean Hachamovitch’s “Native HTML5″ announcement [dive into mark]
Mark Pilgrim translates Dean Hachamovitch’s utterly bizarre and nonsensical announcement of IE10 that kept talking about “native HTML5.”
You can now borrow HTML5 For Web Designers through the Open Library. Nice one, George!
An excellent zero-edit counter-proposal from Anne detailing why version numbers are unnecessary and undesirable for HTML.
A rather vicious evaluation of browser support for the audio element and the audio API. It is divided up into:
- Browsers From Companies That Actually Care About HTML5 Audio
- Browsers From Companies That Hate the Web Enough to Not Support Ogg/Vorbis, but do Have an Audio Tag So They Can Say They Have an Audio Tag (Seriously, Fuck You)
- Browsers That Say They Support HTML5 Audio But Actually Don’t Support HTML5 Audio
A very pretty visualisation of tweets on a map using canvas.
A nice’n’small lazy loader that should make life easier when it comes to pollyfilling browser support for nifty HTML5 or CSS3 features.
Some excellent cross-polination between HTML5 and internationalisation — remember the other two Ws that come before Web in WWW.
A beautifully readable subset of the HTML spec, with an emphasis on writing web apps (and with information intended for browser makers has been removed). Very handy indeed!
A nice succinct description of the placeholder attribute, with an emphasis on accessibility.
HTML(5) and text-level semantics — CSS Wizardry—CSS, Web Standards, Typography, and Grids by Harry Roberts
A great round-up of some of the humbler new elements in HTML.
New W3C HTML5 Logo: Looks Ok But Inconsistent, Fire W3C Communications Person Who Led Messaging - Tantek
Tantek is as disappointed as I am with the buzzword-compliant definition of HTML5 being pushed by the W3C.
Instead of providing precision and clarity, they’ve muddied the definition of HTML5 further with yet another “here’s our bucket of things we like which we’re going to call ‘HTML5’” message.
The spec previously known as HTML5 is now simply HTML. Good. The W3C are now free to abuse the term “HTML5” to mean everything under the sun.
The new HTML5 logo is quite versatile.
Curiously, though, the standards group—the very people one might expect to have the narrowest interpretation of what exactly HTML5 means—instead say it stands for a swath of new Web technologies extending well beyond the next version of Hypertext Markup Language.
Lumping everything together is as silly as a carpenter referring to every tool in their toolkit as “a hammer.”
Anna’s redesign is beautiful, no matter what browser or device you’re using.
A great little jQuery script to automatically assign ARIA roles to HTML5 elements with the corresponding semantics.
This is the webpage of a great presentation on HTML5 and CSS3. It is also the presentation itself.
A Mac app for creating animations with canvas and video.
A handy shim for audio: it uses the native implementation where possible and Flash as a fallback.
Bobbie Johnson dot org : Ian Hickson on HTML5: “The W3C lost sight of the fact that they have no power”
Bobbie is publishing the interviews he conducted with various HTML5 bods when he was researching his Technology Review article. First up: Hixie.
A delightful online book that makes excellent use of HTML5's history API.
A quick run-through of some of the new HTML5 form features coming in Firefox 4.
All the tests and all the results, all in one place.
A plug-in for Illustrator that allows you to export to canvas.
Here's a little piece of web history: the proposal that was presented and rejected at the 2004 W3C workshop that led to the formation of the WHATWG.
A handy table of new HTML5 elements and whether or not they are exposed to assistive technology.
I couldn't agree more with this rant from Remy. He took the words right out of my mouth.