Tags: html

408

sparkline

From WordPress to Apple News, Instant Articles, and AMP - The Media Temple Blog

Chris runs through the process and pitfalls of POSSEing a site (like CSS Tricks) to Apple’s News app, Facebook’s Instant Articles, and Google’s AMP.

Hey, whatever you want. As long as…

  1. It’s not very much work
  2. The content’s canonical home is my website.

I just want people to read and like CSS-Tricks.

Web Platform Feature Availability

Here’s a handy graph from Paul:

Powered by data from caniuse.com and StatCounter, this page indicates the percentage of users who have a browser that natively supports various web platform features.

Responses To The Screen Reader Strategy Survey | HeydonWorks

Heydon asked screen readers some questions about their everyday interactions with websites. The answers quite revealing: if you’re using headings and forms correctly, you’re already making life a lot easier for them.

Why we use progressive enhancement to build GOV.UK | Technology at GDS

This is a terrific read that gets to the heart of why progressive enhancement is such a solid methodology: progressive enhancement improves resilience.

Meeting our many users’ needs is number one on our list of design principles. We can’t know every different setup a person might use while building our systems, but we can build them in a way that gives all of our users the greatest chance of success. Progressive enhancement lets us do this.

The article is full of great insights from a very large-scale web project.

I Wanted To Type a Number | Filament Group, Inc., Boston, MA

Choosing the right input type for your form field.

Aria-Controls is Poop | HeydonWorks

I wrote a while back about how I switched from using a button to using a link for progressive disclosure patterns. That looks like it was a good move—if I use a button, I’d need to use aria-controls and, as Heydon outlines here, the screen reader support is pants.

MarkApp: Building apps with HTML

Here’s an interesting collection from Lea: small JavaScript libraries that do their configuration declaratively via HTML, rather than in JavaScript.

Shadow DOM v1: self-contained web components | Web Fundamentals - Google Developers

An in-depth look at the current Shadow DOM spec. It’s well-written but I don’t think this will really click with me until I start playing around with it for myself.

It’s good to see that the examples have some thought given to fallback content.

There’s also a corresponding tutorial on custom elements

The History of the URL: Path, Fragment, Query, and Auth - Eager Blog

Another dive into the archives of the www-talk mailing list. This time there are some gems about the origins of the input element, triggered by the old isindex element.

Start Building Accessible Web Applications Today - Course by @marcysutton @eggheadio

A great series of short videos from Marcy on web accessibility.

Progressive Enhancement for JavaScript App Developers | De Voorhoede

Build JS apps responsibly - cover your basics, render strategically and enhance into true apps.

Official Google Webmaster Central Blog: AMP your content - A Preview of AMP’ed results in Search

Google’s search results now include AMP pages in the regular list of results (not just in a carousel). They’re marked with a little grey lightning bolt next to the word AMP.

The experience of opening of those results is certainly fast, but feels a little weird—like you haven’t really gone to the website yet, but instead that you’re still tethered to the search results page.

Clicking on a link within an AMP spawns a new window, which reinforces the idea of the web as something separate to AMP (much as they still like to claim that AMP is “a subset of HTML”—at this point, it really, really isn’t).

Web Design in 4 minutes

This is a wonderful way of progressively explaining the layered approach to building for the web that Charlotte was teaching in her Codebar workshop.

A Code Review, Or Yet Another Reason to Love the Web | Brad Frost

I love this back and forth between Brad and Jonathon. I think they’ve both got some good ideas:

  • I agree with Brad that you can start marking up these kind of patterns before you’ve got visual designs.
  • I agree with Jonathon that it’s often better to have a generic wrapper element to avoid making assumptions about which elements will be used.

shawnbot/custom-elements: All about HTML Custom Elements

A good introduction to custom elements, one piece of the web components stack.

That said, when using custom elements—or anything involving JavaScript, for that matter—you should always design experiences for progressive enhancement, and plan for the possibility that JavaScript isn’t enabled or available.

Hmmm …that’s kind of hard when JavaScript is required to make custom elements work at all.

Teaching web development to design students (Phil Gyford’s website)

Phil’s write-up of teaching web development to beginners is immensely valuable in the run-up to the Codebar workshop that Charlotte is running this weekend. This bit gave both us a real “a-ha!” moment:

It only occurred to me at the end that I should have encouraged the students to try and fix each other’s bugs. If anyone had problems I’d go round and help people and often it’d be a little typo somewhere. Helping each other would acknowledge that this is entirely normal and that a second pair of eyes is often all that’s needed.

How Will Web Components Change CSS Architecture? - Snook.ca

Depending on how you’re currently structuring your CSS and class attributes, web components might not make all that much of a difference to your workflow.

Jeremy Keith | < A > | HTML Special, CSS Day on Vimeo

The video of my talk on hypertext at the HTML Special before CSS Day. I’m pretty with my delivery here. There’s a bit of Q&A afterwards as well.

MarkSheet: a free HTML and CSS tutorial - Free tutorial to learn HTML and CSS

This looks like a great resource for beginners looking to learn HTML and CSS.

PURL: A Portable Content Store - Not Enough Neon

I need to wrap my head around the details of this approach, but it sounds like it might be something I could do here on my site (where I feel nervous about my current dependency on a database).

Introducing Multirange: A tiny polyfill for HTML5.1 two-handle sliders | Lea Verou

You’re supposed to be able to create two-handled sliders with input type="range" but the browser support isn’t there yet. In the meantime, Lea has created a nice lightweight polyfill.

Semantic CSS - Snook.ca

Snook has been on a roll lately, sharing lots of great insights into front-end development. This is a particularly astute post about that perennial issue of naming things.

Developing Dependency Awareness – Smashing Magazine

A typically superb article by Aaron. Here, he breaks down a resilient approach to building for the web by examining the multiple ways you could add a button to a page. There’s a larger lesson here too:

We don’t control where our web-based products go or how our users access them. All we can do is imagine as many less-than-perfect scenarios as possible and do our best to ensure our creations will continue to do what they’re supposed to do. One of the easiest ways to do that is to be aware of and limit our dependencies.

HTML5 accessibility

A glanceable one-stop-shop for how today’s browsers are dealing with today’s accessibility features. Then you can dive deeper into each one.

Sign O’ The Times - original video in pure CSS

This is quite wonderful: a recreation of the video for Prince’s Sign O’ The Times made entirely with HTML and CSS.

Sebastian Ly Serena

The greatest form ever made.

GitHub’s CSP journey - GitHub Engineering

A step-by-step walkthrough of how GitHub has tweaked its Content Security Policy over time. There are some valuable insights here, and I’m really, really happy to see companies share this kind of information.

Interview with Håkon Wium Lie — net magazine — Medium

A trip down memory lane with Håkon.

It’s not like the web has been done. This is history in the making. The web is only 25 years old. It’s going to be around for a long time, so there are lots of things to develop.

simpl.info

This is a very handy resource—a collection of minimum viable implementations of HTML5 features and JavaScript APIs.

Instagram-style filters in HTML5 Canvas | Viget

Una’s [Instagram filters in CSS}(https://github.com/una/CSSgram) are great, but the browser support for CSS filters isn’t as good as, say, the browser support for canvas. Here’s a clever bit of scripting to polyfill filters using canvas.

Maybe we could tone down the JavaScript / fuzzy notepad

Accept that sometimes, or for some people, your JavaScript will not work. Put some thought into what that means. Err on the side of basing your work on existing HTML mechanisms whenever you can.

If you’re going to override or reimplement something that already exists, do some research on what the existing thing does first. You cannot possibly craft a good replacement without understanding the original.

Remember that for all the power the web affords you, the control is still ultimately in end user’s hands.

Walmart Web Style Guide

A pattern library of Walmart’s front-end code.

Frontend Design | Brad Frost

Well, this pretty much sums up the front-end team at Clearleft:

Frontend design involves creating the HTML, CSS, and presentational JavaScript code that makes up a user interface.

I’ve often said that at Clearleft, development is always in the service of design. And like Brad, I often find myself defining that work by what it isn’t:

They understand UX principles and best practices, but may not spend their time conducting research, creating flows, and planning scenarios

They have a keen eye for aesthetics, but may not spend their time pouring over font pairings, comparing color palettes, or creating illustrations and icons.

They can write JavaScript, but may not spend their time writing application-level code, wiring up middleware, or debugging.

They understand the importance of backend development, but may not spend their time writing backend logic, spinning up servers, load testing, etc.

Short note on improving usability of scrollable regions

Three very easy to implement additions to scrollable areas of your web pages: tabindex="0", role="region", and an aria-label attribute.

Link rel=serviceworker - Chrome Platform Status

Ooh, I really like this idea! Pointing to your Service Worker the same way you point to your style sheet makes a lot of sense to me.

A simple HTML5 Progress bar | Charlotte Jackson, Front-end developer

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!

Links, Buttons, Submits, and Divs, Oh Hell | Adrian Roselli

Use the right element for the job.

  • Does the Control Take Me to Another Page? Use an Anchor.
  • Does the Control Change Something on the Current Page? Use a Button.
  • Does the Control Submit Form Fields? Use a Submit.

The accessibility stack: making a better layer cake » Simply Accessible

A great description of a solid architectural approach to building on the web (and not just for accessibility either).

The elements of HTML

A complete list of HTML elements, past and present. They’re all hyperlinked to the relevant specs.

Revisiting the Float Label pattern with CSS — That Emil is Emil Björklund

A clever technique by Emil to implement the “float label” pattern using CSS. It all hinges on browsers supporting the :placeholder-shown pseudo-class which, alas, is not universal.

I was hoping that maybe @supports could come to the rescue (so that a better fallback could be crafted), but that tests for properties and values, not selectors. Damn!

Why I hate your Single Page App by Stefan Tilkov

A linkbaity title for a ranty post. But it’s justified.

My point is that from an architectural perspective, most single page apps are the result of making the wrong choices and missing important opportunities.

Reimagining Single-Page Applications With Progressive Enhancement – Smashing Magazine

Some really great thinking here by Heydon on how to make single page apps but using HTML for the views instead of relying on client-side JavaScript for the rendering. He explains the code he’s using, but what really matters here isn’t the specific solution; it’s the approach. Smart!

Simply Jonathan: Multiple values for checkboxes

Following on from the post by Aaron that I linked to, more details about sending (and receiving) values from multiple checkboxes with the same name.

Affirming User Choice With Checkboxes, From the Notebook of Aaron Gustafson

Well, this is timely! Just today I was having a really good natter with Charlotte about using checkboxes, specifically sending multiple values to the server:

You’ll notice that the name given to each of these checkbox input elements is the same: “reservation-requested-device[]”. The square brackets (“[]”) at the end of the name are the magic bit that allows the values of each chosen “reservation-requested-device” checkbox to be submitted as the value of “reservation-requested-device”.

See, I wasn’t sure whether that was just a PHP thing (the only server-side input-handling I’ve had much experience of) or whether it was a more general way of sending multiple values.

Update: It seems that the square brackets are indeed a PHP thing. Multiple values will be sent in any case. See this test case.

Content and Display Patterns | Brad Frost

Brad follows up with his thoughts on Dan’s article, emphasising the importance of a developer’s role in not just slavishly recreating what’s in a static comp, but seeing through to the underlying pattern beneath:

It’s so incredibly crucial to treat development as a key part of the design process.

“Content & Display Patterns,” an article by Dan Mall

A really terrific article from Dan on building pattern libraries. In summary:

  1. Naming things is hard,
  2. Separation of content and presentation is A Good Thing.

There are some really good insights here into getting just the right level of abstraction for a component—not too tightly tied to a specific visual display, but also not too tightly tied to a specific kind of content type:

When thinking about patterns, content strategists are primarily thinking about Content patterns, designers are primarily thinking about Display patterns, and front-end developers are responsible for bringing the two together.

(And it’s great to see Charlotte’s excellent article get a shout-out in the “Related reading” section at the end,)

Simple inline error message pattern

This is my go-to method for adding validation messages to forms—I think I first heard about it from Derek—so it’s nice to see it corroborated by Steve:

Add the error message as a child of the label element associated with an input.

jordanmoore/Modern-Default-HTML

This is so weird—Jordan Moore’s boilerplate responsive HTML template is exactly the same as mine! What are the odds‽

(I was once asked to contribute a boilerplate starter for

Touch Keyboard Type ‘Cheat Sheet’ - Labs - Baymard Institute

A useful primer on which combinations of attributes and values work best for which form fields: type, autocomplete, autocorrect, and autocapitalize.

The web accessibility basics – Marco’s Accessibility Blog

Marco gives a run-down of the basics of getting accessibility right on the web. Nothing here is particularly onerous but you’d surprised how often developers get this wrong (or simply aren’t aware of it).

He finishes with a plea to avoid unnecessary complexity:

If there’s one wish I have for Christmas from the web developer community at large, it is this: Be good citizens of the web, and learn proper HTML before you even so much as touch any JavaScript framework. Those frameworks are great and offer a lot of features, no doubt. But before you use hundreds of kilobytes of JavaScript to make something clickable, you may want to try if a simple button element doesn’t do the trick just as fine!

HIKE - Introduction to accessibility concepts for the Web

It really isn’t hard to get the basics of accessibility right on the web …and yet those basics are often neglected.

Here’s a handy shortlist to run through, HIKE:

  • H stands for headings and semantic markup.
  • I stands for images and labels.
  • K stands for keyboard navigation.
  • E asks for you to ACT with a little extra love for custom components and more.

(ACT = ARIA, Colour Contrast, Text Size)

Web History Primer

Written in 2001, this history of the web takes in CERN, hypertext, the ARPANET, SGML, and lots more.

A Brief(ish) History of the Web Universe – Part I: The Pre-Web | briankardell

This is a wonderful, wonderful look back at the state of hypertext in the run-up to the creation of the World Wide Web.

My jaw may have dropped when I saw the GML markup.

Now I’m going to read part two.

HTML Developers: Please Consider | HTML5 Doctor

The best ARIA role is the one you don’t need to use.

Learn to Code HTML & CSS - Beginner & Advanced

This looks like a great resource for anyone setting out to learn how to make websites.

Gethtml - all the html elements

The A-Z of HTML, with an example for each and every element. Comprehensive and impressive.

openHTML

This seems like a decent endeavour:

A collaborative research project aimed at designing better tools and practices for learning web development.

HTML5: The New Flash

A new presentation from the wonderfully curmudgeonly Steven Pemberton, the Nosferatu of the web. Ignore the clickbaity title.

I don’t agree with everything he says here, but I strongly agree with his preference for declarative solutions over (or as well as) procedural ones. In short: don’t make JavaScript for something that could be handled in markup.

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.

Requiring a webpage to depend on a particular 100-year-old implementation of Javascript is not exactly evidence of future-thinking.

Aural UI of HTML elements

This is such an incredibly useful resource by Steve and Léonie: documenting how multiple screen readers handle each and every element in HTML.

It’s a work in progress, but it’s definitely one to remember the next time you’re thinking “I wonder how screen readers treat this markup…”

<input> I ♡ you, but you’re bringing me down – Monica Dinculescu

The sad history of input elements.

I wish I could share in the closing optimism:

Now imagine the future where Web Components are supported natively, and someone else is allowed to write a <better-input>, an element that is a real, encapsulated DOM element, and not just a div soup. Imagine using this <better-input> that isn’t implemented differently in each browser, that looks the same everywhere, and that probably also knows how to bake you a cherry pie.

But I all I can think is:

Now imagine the future where Web Components are supported natively, and everyone is allowed to write a million variations of <my-idea-of-a-better-input>, an element that is an inaccessible div soup under the hood.

Static AMP page

Maciej has created a version the AMP Project homepage that’s faster, more performant, and more …um …straight-talkin’.

The Be Nice AMP Project

An alternate version of AMP HTML that works in more parsers and user agents.

The AMP project have “A new approach to web performance” making your website dependent on Google. The Be Nice AMP Project follow the old approach: Make your site fast following best practice guidelines and be independent of Google.

Where to Put Your Search Role by Adrian Roselli

This is a very handy tip. I had been putting form role="search" all over The Session. Turns out that’s overriding the default role of “form”. Oops!

Confidence and Overwhelm

Following on from her great conversation with Jen on The Web Ahead podcast, Rachel outlines a strategy to avoid feeling overwhelmed by the deluge of tools, frameworks, libraries, and techniques inundating front-end developers every day:

Learn your core skills well. Understand HTML and CSS, be able to build a layout without leaning on a framework. Get a solid understanding of how a website actually gets from the server to a browser, an understanding of security and accessibility. These are the basics, the constants. These things change slowly. These things sit underneath all the complexity and the tooling, the CMSs and the noise of thousands of people all trying to make their mark on this industry.

She also makes this important point:

As you are doing this don’t forget to share what you know.

Designing with Progressive Enhancement — sixtwothree.org

The full text of Jason’s great talk at this year’s CSS Summit. It’s a great read, clearing up many of the misunderstandings around progressive enhancement and showing some practical examples of progressive enhancement working at each level of the web’s technology stack

When Responsive Images Get Ugly by Taylor Hunt on CodePen

This is a deep, deep dive into responsive images and I can only follow about half of it, but there are some really useful suggestions in here (I particularly like the ideas for swapping out images for print).

Practical Questions around Web Components - Ian Feather

An in-depth look at where web components stand today, together with some very good questions about where they might be heading tomorrow.

A Practical Guide to SVGs on the web

Handy tips for creating, optimising, and using SVG on the web, be it in CSS or HTML.

A Complete Guide to SVG Fallbacks | CSS-Tricks

An up-to-date round-up of the various techniques available when you want to provide a fallback for SVG.

GSWO Workshop with Sparkbox

Katie, Divya, and the other great designers and developers at Sparkbox run workshops on HTML and CSS for girl scouts. They’ve shared their resources and I might just borrow some of them for Codebar.

keyboard (div) ✿ dabblet.com

Here’s a really nifty use of the :checked behaviour pattern that Charlotte has been writing about—an interface for choosing a note from a piano keyboard. Under the hood, it’s a series of radio buttons and labels.

Let Links Be Links · An A List Apart Article

A superb piece by Ross Penman on the importance of being true to the spirit of the web.

isolani - Web Standards: Flash’s slide into irrelevance

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.

Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou

Lea wasn’t happy with the lack of styling and extensibility of the datalist element, so she rolled her own lightweight autocomplete/type-ahead widget, and she’s sharing it with the world.

Line Mode | Parallel Transport

Worth remembering:

The Web is the printing press of our times; an amazing piece of technology facilitating a free and wide-scale dissipation of our thoughts and ideas. And all of it is based on this near 20-year old, yet timeless idea of the Hyper Text Markup Language.

HTML5 Differences from HTML4

I just noticed that I’m mentioned in the acknowledgements of this most handy of W3C documents. This pleases me disproportionately.

Poor Man’s Styleguide | A frontend styleguide for the pragmatic

A handy starting point for creating a front-end styleguide: a single document of HTML elements.

Websites of Christmas Past, Present and Future ◆ 24 ways

A superb article by Josh on planning for progressive enhancement—clearly laid out and carefully explained.

Bruce Lawson’s personal site  : On the accessibility of web components. Again.

I completely share Bruce’s concern about the year-zero thinking that’s accompanying a lot of the web components marketing:

Snarking aside, why do so few people talk about extending existing HTML elements with web components? Why’s all the talk about brand new custom elements? I don’t know.

Hear, hear!

I’m a fan of web components. But I’m increasingly worried about the messaging surrounding them.

On File Formats, Very Briefly, by Paul Ford · The Manual

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.

WebP via picture

This strikes me as an eminently sensible idea by Emil: using the picture element to begin providing WebP alternatives to JPG.

Of course, picture-supporting browsers will have to adjust their decision-making algorithm to support this pattern.

Oh, Jeremy, you silly billy. It turns out that this works right out of the box. Nice!

Accessibility of Web Components

A great presentation on web components by Marcy, with an emphasis on keeping them accessible.

On HTML5 and the Group That Rules the Web

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.

You’re So Smart You Turned JavaScript into XHTML

Web developers overwhelmingly rejected the draconian error-handing of XML …and yet today, web developers are embracing that very same error-handling model by rendering everything with JavaScript.

I don’t think it’s the way of the web to have your site fail and show a blank screen because some third-party dependency doesn’t load, JavaScript is turned off or because your developer left a trailing comma in a JavaScript object and didn’t test in Internet Explorer.

Responsive Images in Practice · An A List Apart Article

A great primer on using srcset and picture. I think I’ll be referring back to this a lot.

Hitler reacts to the HTML5 URL normative reference controversy

This is hilarious …for about two dozen people.

For everyone else, it’s as opaque as the rest of the standardisation process.

The ride to 5 | HTML5 Doctor

HTML5 is now a W3C recommendation. Here’s what a bunch of people—myself included—have to say about that.

Startups and Shit, HTML-first

The Android vs. iOS debate is one hinges around whether you think it makes more sense to target a (perceived) larger market, or target one that the technorati favor. But why choose? Building a good responsive web app has a series of benefits, the primary one being that you target users on every platform with one app. Every user. Every platform. All the time. Release whenever you want. A/B test with ease. Go, go go.

The Tink Tank » Understanding screen reader interaction modes

Léonie gives a great, clear description of how screen readers switch modes as they traverse the DOM snapshot.

AurelioDeRosa/HTML5-API-demos

A collection of device APIs—which, despite the title, are all JavaScript, not HTML. Each API in the list has a link to its spec, an explanatory article, a demo, and the current level of support.

Web Archeology - daverupert.com

A bit of web history reacted by Paravel: the Microsoft homepage from 1994. View source to see some ooooold-school markup.

Ah, memories!

Radio-Controlled Web Design · An A List Apart Article

Turns out that the :checked pseudo-class selector allows you to do some clever interaction without JavaScript.

A Maintainable Style Guide - Ian Feather

The challenges of maintaining a living breathing front-end style guide for an always-evolving product (the Lonely Planet website in this case).

Web 2024 | Robin Berjon

Here’s a dystopian vision of the web in ten years time, where professional developers are the only people able to publish on the web.

This is why it worries me when I come across very smart people who don’t seem to see a problem with the creation of web pages being taken out of the reach of any human being with an internet connection and a smattering of declarative languages—HTML, CSS—and into the hands of an elite minority of JavaScript programmers.

simpl.info

A handy reference for HTML, CSS, and JavaScript features. Each feature has a bare-bones demo at a nice guessable URL e.g. http://simpl.info/datalist/

The elements of HTML

This (literally) charts the evolution of HTML, tracking which elements have been added and which have been removed.

Getting Back That Lovin’ Feeling on Sparkbox

A lovely little tale of empowerment through HTML and CSS.

It’s OK not to use tools by Jonas Downey of Basecamp

Today, a basic HTML/CSS site seems almost passé. But why? Is it because our new tools are so significantly better, or because we’ve gone overboard complicating simple things?

He’s right, y’know.

Index cards | A Working Library

A truly wonderful piece by Mandy detailing why and how she writes, edits, and publishes on her own website:

No one owns this domain but me, and no one but me can take it down. I will not wake up one morning to discover that my service has been “sunsetted” and I have some days or weeks to export my data (if I have that at all). These URLs will never break.

Creating Style Guides · An A List Apart Article

A great article by Susan on getting started with creating a styleguide for any project.

I’ve seen firsthand how style guides save development time, make communication regarding your front end smoother, and keep both code and design consistent throughout the site.

Confessions Of A CSS Expert

Funny because it’s true:

The thing I regret the most is how my class addiction affected my relationship with HTML.

Sharing Podcasts - daverupert.com

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!

Getting Started With Pattern Libraries ∙ An A List Apart Blog Post

A great post from Anna on the front-end styleguides she’s worked on for A List Apart and Code for America. ‘Twas a pleasure working with her on the Code for America project.

A-mer-ica! Fuck yeah!

Early History of HTML - 1990 to 1992

A fascinating look at the early history of HTML, tracing its roots from the dialect of SGML used at CERN.

A List Apart Pattern Library

Another front-end style guide for the collection. This time it’s from A List Apart. Lovely stuff!

The (other) Web we lost

John shares his concerns about the increasing complexity involved in developing for the web.

Building for the device agnostic web | Talks | Decade City

Some excellent practical advice on progressive enhancement.

The lie of the API by Ruben Verborgh

I agree completely with the sentiment of this article (although the title is perhaps a bit overblown): you shouldn’t need a separate API—that’s what you’re existing URL structure should be.

I’m not entirely sure that content negotiation is the best way to go when it comes to serving up different representations: there’s a real value in being able to paste a URL into a browser window to get back a JSON or XML representation of a resource.

But this is spot-on about the ludicrous over-engineered complexity of most APIs. It’s ridiculous that I can enter a URL into a browser window to get an HTML representation of my latest tweets, but I have to sign up for an API key and jump through OAuth hoops, and agree to display the results in a specific way if I want to get a JSON representation of the same content. Ludicrous!

Proto HTML

A nice bit of markup archeology, tracing the early development of HTML from its unspecced roots to the first drafts.

I recognise some of the extinct elements from the line-mode browser hack days at CERN e.g. HP1, HP2, ISINDEX, etc.

Against the Balkanization of the Web

A fascinating snapshot from 1995, arguing for the growing power of HTML instead of the siren song of proprietary formats.

I’m very happy that this is still available to read online 18 years later.

Jeremy Keith – The Power Of Simplicity – border:none

This is the talk I gave at the border:none event in Nuremberg last month. I really enjoyed it. This was a chance to gather together some thoughts I’ve been mulling over for a while about how we approach front-end development today …and tomorrow.

Warning: it does get quite ranty towards the end.

Also: it is only now that the video is released that I see I spent the entire talk looking like a dork with a loop of wire sticking out of the back of my head.

Laying The Groundwork For Extensibility—Smashing Coding

The authors of the Extensible Web Manifesto explain the thinking behind their …uh… thinking.

There’s a lot to like here, with some practical examples of where we’ve seen a disconnect between JavaScript APIs and declarative HTML (looking at you, Geolocation).

Long Term Web Semantics on Infrequently Noted

Alex starts with a bit of a rant about the phrase “semantic HTML”, which should really just be “well-written HTML, but there then follows some excellent thoughts on the emergence of meaning and the process of standardising on vocabularies.

cite and blockquote – reloaded | HTML5 Doctor

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.

Line Mode on Parallel Transport

A love letter to HTML, prompted by the line-mode browser hack event at CERN.

What is EME?

Henri gives an overview of the DRM-style encryption proposed for HTML. It’s a very balanced unbiased description, but if you have the slightest concern about security, sentences like this should give you the heebie-jeebies:

Neither the browser nor the JavaScript program understand the bytes.

Internet and Web Pioneers: Robert Cailliau - YouTube

Once you get past the cheesy intro music, there are some gems from Robert Cailliau in here.

Bruce Lawson’s personal site  : On citing quotations. Again.

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.

SVG and image tag tricks

A very, very clever hack to provide fallback images to browsers that don’t support SVG. Smart.

Not Real Programming by John Allsopp

A terrific long-zoom look at web technologies, pointing out that the snobbishness towards declarative languages is a classic example of missing out on the disruptive power of truly innovative ideas …much like the initial dismissive attitude towards the web itself.

Style Guide Boilerplate

A very handy starting point for creating a front-end style guide.

Designers’ Friend

I kind of love the interaction design of this site.

Words

I love this. I love this sooooo much! The perfect reminder of what makes the web so bloody great:

You and I have been able to connect because I wrote this and you’re reading it. That’s the web. Despite our different locations, devices, and time-zones we can connect here, on a simple HTML page.

DRM and HTML5: it’s now or never for the Open Web

Dr Harry Halpin writing in the Guardian about the crucial crossroads that we have reached with the very real possibility of DRM mechanisms becoming encoded within HTML:

Most of us are simply happy to launch our browsers and surf the web without a second thought as to how the standards like HTML are created. These standards are in the hands of a fairly small set of standards bodies that have in general acted as responsible stewards for the last few years. The issue of DRM in HTML may be the turning point where all sorts of organisations and users are going to stop taking the open web for granted.

Jeremy Keith - What We Talk About When We Talk About The Web on Vimeo

My presentation from the Industry conference in Newcastle a little while back, when I stepped in for John Allsopp to deliver the closing talk.

The thing and the whole of the thing: on DRM in HTML

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?

Code Club Queens Park

Josh has been teaching HTML and CSS schoolkids. I love the pages that they’ve made. I really mean it. I genuinely think these are wonderful!

List of pseudo-elements to style form controls by TJ VanToll

Want to style those new HTML5 input types? I hope you like vendor prefixes.

Thoughts on Blink

A good history lesson in rendering engines: KHTML, WebKit, and now, Blink.

datalist experiment

This is wonderful stuff! I’m a big fan of the datalist element but I hadn’t realised how it could be combined with input types like range and date.

So nifty!

How to lose weight (in the browser)

A handy one-stop-shop for tips on improving front-end performance.

Using SVG on CSS-Tricks

Chris takes a look at all the different ways you can use SVG today.

You can’t create a button by Nicholas Zakas

Related to my rant on links that aren’t actually links: buttons that aren’t actually buttons.

HTML5 in six steps by Andy Hume

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.

On the styling of forms by Bruce Lawson

Bruce takes a look at the tricky issue of styling native form controls. Help us, Shadow DOM, you’re our only hope!

The importance of HTML5 sectioning elements by Heydon Pickering

A good explanation of HTML5’s sectioning content and outline algorithm.

Interview with Ian Hickson, HTML editor on HTML5 Doctor

Bruce sits down for a chat with Hixie. This is a good insight into the past and present process behind HTML.

www-talk

Here’s a treasure trove of web history: an archive of the www-talk list dating back to 1991. Watch as HTML gets hammered out by a small group of early implementors: Tim Berners-Lee, Dave Raggett, Marc Andreessen, Dan Connolly…

Main element - WHATWG Wiki

Tantek has put together a wiki page to document the arguments for and against adding a new “main” element to HTML.

I Don’t Need No Stinking API: Web Scraping For Fun and Profit | Hartley Brody

A handy step-by-step guide to scraping HTML to get data out. Useful for services (—cough—Twitter—cough—) that keep changing the rules of their API use.

Twitter Engineering: Implementing pushState for twitter.com

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.

HTML5 forms (and IE10 (Mobile)) | Andrea Trasatti’s tech notes and more

Andrea looks at support for HTML5 input types in IE10 Mobile.

Accessibility – what is it good for? | Marco’s accessibility blog

A worrying look at how modern web developers approach accessibility. In short, they don’t.

034: With Jeremy Keith - ShopTalk

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.

Bruce Lawson’s personal site  : Scooby Doo and the proposed HTML5 element

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.

» 4 August 2012, baked by Bruce Lawson @ The Pastry Box Project

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.

Squirrel!

Here’s a brainbuster for ya: a single file that renders both as HTML and as a JPEG. As an HTML page, it even contains an img element with a src of …itself!

Compare the “view source” output with the generated source output to see it’s being interpreted.

Classes? Where We’re Going, We Don’t Need Classes! | Smashing Coding

This is a well-reasoned, thoughtful article on avoiding class names in CSS …but I don’t agree with it. That said, perhaps there’s a reasonable middle ground to be found between this extreme stance and the opposite (but in some ways just as extreme) stance of OOCSS.

How We Improved Page Speed By Cleaning CSS, HTML and Images | Dyn Blog

Some good practical advice on improving performance. This should all be familiar to you, but it’s always worth repeating.

Shallow Thoughts » srcset vs. picture

A well thought-out evaluation on responsive images from Bridget.

The origin of the blink tag

Have you thought “There must be a good reason for the blink element.” Well, read on.

Shirky: View Source… Lessons from the Web’s massively parallel development.

An oldie but a goodie: Clay Shirky looks at the design principles underlying HTML in order to figure out what made it so successful. Even though this is fourteen years old, there are plenty of still-relevant insights here.

Style Guide

I met one of the guys from the Starbucks team at South by Southwest and he mentioned that they had a markup pattern library. I encouraged them to make it public, and it here it is!

I really hope that more companies and agencies will start sharing stuff like this.

CSS3 Pseudo-Classes and HTML5 Forms | HTML5 Doctor

A look at the new pseudo-classes in CSS3 that go hand-in-hand with the form enhancements introduced in HTML5.

What We Don’t Know // Speaker Deck

The slides from Chris’s presentation on the known unknowns of the web.

ishida >> blog » HTML5 adds new translate attribute

Richard gives the lowdown on the new translate attribute in HTML.

Pears

A great pattern library from Dan.

HTML5 Please

This looks like a handy resource with a shitty, shitty name. Count the number of items that are in HTML (or JavaScript or APIs). Now count the number of items that are in CSS.

Markup / from a working library

A superb rallying cry from Mandy on the importance of markup literacy for professionals publishing on the web: writers, journalists, and most importantly, editors.

Confusion over HTML5 & WAI-ARIA | Karl Groves

This helps to clarify the difference between native semantics and ARIA additions.

The mobile app is going the way of the CD-ROM: To the dustbin of history | VentureBeat

Some future-friendly musings on mobile from Mozilla and Yahoo.

HTML5 and CSS3 Advent 2011

Here’s a geek advent calendar I missed. There are some great CSS techniques here.

Polyfilling The HTML5 Gaps With JavaScript

An in-depth look at browser polyfills: what they are, how they work, and how you can make your own.

InstaCSS | Instant CSS Documentation Search

A fantastically useful resource! Don’t let the name fool you: this provides instant access to documentation for CSS and HTML and JavaScript!

Put this one on speed dial.

Barack Obama

It’s responsive. It looks great. It’s using HTML5 structural elements and microformats.

HTML5 semantics and accessibility | The Paciello Group Blog

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:

Get involved!

The Convergence

A fun platform game with a twist.

Goodbye time, datetime, and pubdate. Hello data and value. | HTML5 Doctor

A very even-handed look at the time and data debacle in HTML5.

Why No Time?

A single-serving website expressing the frustration and bewilderment at Hixie’s unilateral decision to drop the time element from HTML.

Dive into HTML5… on HTML5 Doctor | HTML5 Doctor

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.

CSS3 Secrets 10 things you might not know about CSS3

This presentation from Lea contains some CSS gems (and it’s all delivered in HTML).

HTML5 Whiteboard Magnets / Cameron Moll / Designer, Speaker, Author

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.

Upperdog Labs: Video Canvas Responsive Design - YouTube

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.

Of Web Apps and HTML Apps : Jonathan Stark

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.

Things the W3C Should Stop Doing | Infrequently Noted

I was all set to bristle against an attack on the W3C from Alex …but when I actually read the post, I found it hard to disagree with. If anything, this shows just how much Alex cares about the W3C (probably more than most people).

The conversation in the comments is worth reading too.

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.

Stubbornella » Blog Archive » Don’t Style Headings Using HTML5 Sections

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.

via Frank : Designers vs Coding

Good design and good markup provide structure to content. Good markup is a fundamental part of good design: beautiful on the inside, beautiful on the outside. HTML and CSS give another venue to provide structure to content in the native language of the web, and learning these guides decisions by surfacing the affordances of the medium.

Code Babies | Publishing the ABC’s of the Web for Babies

The first book by this publisher is “HTML For Babies.”

HTML5 And The Document Outlining Algorithm - Smashing Magazine

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.

OLO

This is a thoroughly enjoyable, frustratingly addictive two-player game for the iPad.

Oh, and it just happens to be made with HTML, CSS and JavaScript.

Appcache Facts

A handy one-page cheatsheet for using HTML5’s appcache manifest file for offline storage.

Web Typography for the Lonely

A collection of experiments in typography using canvas, SVG, JavaScript and whatever else it takes.

5 STEPS TO HTML5

A really nice little primer on getting started with HTML5.

http://humanweb.ipq.co/

This is wonderful. A web server powered by people. Change the URL and a person will manually fetch the corresponding resource.

You can be part of the server team too.

Bruce Lawson’s personal site  : HTML5, hollow demos and forgetting the basics

A great reminder from Bruce that we need to remember to use cutting-edge web technology responsibly.

LocalStorage in use on the Fontdeck Website | Fontdeck Blog

Listen to Josh explain a genuinely useful example of HTML5’s local storage that he’s added to Fontdeck.

The Tink Tank » Marking up the current page with HTML5 links

Leonie points to a change in the semantics of the a element in HTML5 that could be very handy for accessible navigation.

Avoiding common HTML5 mistakes | HTML5 Doctor

A great round-up by Richard of some of the most common semantic pitfalls encountered with HTML5.

CreativeJS | The very best of creative JavaScript and HTML5

This is your one-stop shop for envelope-pushing in the browser:

The very best of creative JavaScript and HTML5.

Getting Sourcey – native HTML5 Audio and video | Web Directions

Everything you ever needed to know about adding HTML5 audio and video to your site, courtesy of the mighty John Allsopp.

Google

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.

Responsive web design from the future — Warpspire

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.

Mark Perkins  ★  All Marked Up

I agree 100% with Mark’s thoughts on what a Content Management System should and shouldn’t attempt to do.

I think that markup is too important to be left in the hands of the people who make content management systems. They all too often don’t care enough about it, and they can never know the context that you will be using it in, and so in my opinion they shouldn’t be trying to guess.

>> blog » html5′s new bdi element

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.

HTML5 Rocks - HTML5 vs Native: The Mobile App Debate

An even-handed weighing up of the pros and cons of native and web app development for mobile.

HTML5Pattern

A handy list of regular expressions that you can use in the new pattern attribute on the input element in HTML5.

Document Outlines | HTML5 Doctor

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.

manifestR - offline web apps made easy (well easier)

A bookmarklet to help you figure out what files you might want to put in your cache manifest for offline storage.

Get off(line) | Web Directions

John has written a very in-depth look at offline storage (using the cache manifest) in HTML5.

[whatwg] The blockquote element spec vs common quoting practices

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.

Which Fish

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.

Examples of blockquote metadata ❧ Oli.jp (@boblet)

Now this is how you make progress on getting changes made to a spec: by documenting real-world use cases.

Quoting and citing with blockquote, q, cite, and the cite attribute | HTML5 Doctor

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.

Accessibility and HTML5 Block Links — Simply Accessible

Derek runs some tests on how screenreaders behave when block-level elements are wrapped in links, which is now legal in HTML5.

Chloe Weil

Chloe’s redesign/realign is a lovely bit of HTML5 and CSS3 all wrapped up in a responsive layout.

The Story of the HTML5 Shiv « Paul Irish

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.

The hgroup hokey cokey | HTML5 Doctor

A good round-up by Jack Osborne of where things currently stand with the hgroup group.

the html5 switch | the 200ok weblog

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

New Titles in Lending Library! « The Open Library Blog

You can now borrow HTML5 For Web Designers through the Open Library. Nice one, George!

Page Speed Online

A supremely useful tool from Google for measuring performance.

HTTP Archive

This is wonderful stuff: a long-term project to track the performance of high-traffic sites over time: oodles of lovely data and some quite shocking stats.

Change Proposal for ISSUE-140 - WHATWG Wiki

An excellent zero-edit counter-proposal from Anne detailing why version numbers are unnecessary and undesirable for HTML.

Geek Ninja Battle Night | Stuff and Nonsense

Andy hammers home the benefit of a long-term format like HTML compared to the brittle, fleeting shininess of an ephemeral platform-specific app.

Read ePub ebooks online : Bookworm ePub reader

A browser-based ePub reader. ‘Cause it’s (X)HTML all the way down, baby.

The State of HTML5 Audio - PhobosLab

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 world of tweets

A very pretty visualisation of tweets on a map using canvas.

yepnope.js | A Conditional Loader For Your Polyfills!

A nice’n’small lazy loader that should make life easier when it comes to pollyfilling browser support for nifty HTML5 or CSS3 features.

W3C HTML5 Chinese Interest Group

Some excellent cross-polination between HTML5 and internationalisation — remember the other two Ws that come before Web in WWW.

HTML5 — Edition for Web Developers

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!

HTML5 Accessibility Chops: the placeholder attribute | The Paciello Group Blog

A nice succinct description of the placeholder attribute, with an emphasis on accessibility.

Thinking about the HTML and XML

Some musings from Norman Walsh. I have to say, I’m still not entirely sure why the HTML/XML Task Force exists. The “use cases” described here are vague and handwavey.

LONDON WEB - Sept 2010 - The Progressive Web - Andy Hume on Vimeo

A great presentation by Andy on the use of progressive enhancement at Clearleft.

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 WHATWG Blog — HTML is the new HTML5

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.

W3C’s new logo promotes HTML5—and more | Deep Tech - CNET News

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.

HTML5 Gains Logo, Loses Meaning | Webmonkey | Wired.com

Lumping everything together is as silly as a carpenter referring to every tool in their toolkit as “a hammer.”

Anna Debenham

Anna’s redesign is beautiful, no matter what browser or device you’re using.

accessifyhtml5.js at master from yatil’s accessifyhtml5.js - GitHub

A great little jQuery script to automatically assign ARIA roles to HTML5 elements with the corresponding semantics.

Getting to work with new web technologies

This is the webpage of a great presentation on HTML5 and CSS3. It is also the presentation itself.

Radi

A Mac app for creating animations with canvas and video.

..about validating

An oldie but a goodie. This is why we have standards.

audio.js

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.

20 Things I Learned About Browsers and the Web

A delightful online book that makes excellent use of HTML5's history API.

Long Live the Web: Scientific American

An inspiring State Of The Web address by Tim Berners-Lee. He can't resist pitching linked data at the end, but it's mostly a stirring call to arms.

HTML5 Forms Validation in Firefox 4 - Mounir Lamouri's Blog

A quick run-through of some of the new HTML5 form features coming in Firefox 4.

HTML5 Conformance Test Results

All the tests and all the results, all in one place.

MIX Online:Ai to Canvas Plug-In

A plug-in for Illustrator that allows you to export to canvas.

Position Paper for the W3C Workshop on Web Applications and Compound Documents

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.

HTML5 accessibility

A handy table of new HTML5 elements and whether or not they are exposed to assistive technology.

rem @ > 140 characters - Hold off on deploying HTML5 in websites?

I couldn't agree more with this rant from Remy. He took the words right out of my mouth.

The Space Game

By playing this canvas game, you can help the European Space Agency plan missions to the planets of our solar system.

Live style sheet editing!

Edit this page. Then view source.

Biolab Disaster

A great little platform game that is entirely Flash-free. Canvas all the way.

HTML5 for Web Designers by Jeremy Keith available as an EPUB : Threepress Consulting blog

Liza and co. did a fantastic job converting my book. I doff my cap.

HTML5 inputs and attribute support

A very handy page for showing HTML5 form element support in your browser.

Did you have a nice day? - Made by Rattle

A beautiful SVG visualisation (with source code) of the Rattle team's experience of dConstruct 2010.

The Wilderness Downtown

A nifty interactive video for Arcade Fire's "We Used To Wait." It claims to be built in HTML5 but actually uses XHTML 1.0 and HTML 4.01 doctypes throughout. *sigh*

HTML5 Pour Les Web Designers – Jeffrey Zeldman Presents The Daily Report

Zoot alors! Mon book is high in the iTunes Store Français. Quelle surprise!

MPEG LA’s AVC License Will Not Charge Royalties for Internet Video That Is Free to End Users Through Life of License | Business Wire

Well, well, well. It looks like h264 is not going to be torpedoing us with any submarine patents anytime soon ...but this only applies to end users, not browser makers. Sigh.

Periodic Table of the Elements - Josh Duck

Cute illustration of different content types in HTML (though, personally, I would put sectioning content — section, article, nav, aside — into their own group).

HTML5 Reference | Metal Toad Media

HTML5 resources, gathered together in one place.

Article vs. Section: We've Finally Gone Mad - Opinions - MIX Online

A great post from the frontline of markup. This is just a taste of the confusion to come.

HTML5 Boilerplate - A rock-solid default for HTML5 awesome.

Another set of default HTML/CSS/JS templates with some very clever ideas built in (courtesy of the always-brilliant Paul Irish).

Surfin’ Safari - Blog Archive » The HTML5 Parsing Algorithm

The latest Webkit nightly includes the HTML5 parsing algorithm. Now it's a race between Firefox, Safari and Chrome to see which will be first (non-beta) browser to ship with the new parser.

HTML5 Reset

Barebones templates for HTML5 documents. It needs a bit of work but it's a nifty idea.

The Beauty of Semantic Markup, Part 2: strong, b, em, i ~ A Blog Not Limited

A great bit of research from Emily. She correctly values data more than opinion.

Early History of HTML - 1990 to 1992

A wonderful document outlining the earliest history of the tags we know and love today.

HTML Resource Packages

An interesting performance proposal from mozilla that will degrade nicely in legacy browsers.

Unicorn

An all-in-one validator from the W3C: markup, CSS and feed validation.

fberriman » hgroups and sub-titles

Frances takes issue with the hgroup element in HTML5.

Daniel Mall: Mark

Dan has an idea for a possible application of the HTML5 mark element in navigation lists.

Unboxing A Book Apart - a set on Flickr

A lovely bit of unboxing porn.

_MG_7022

CanvasMol

Beautiful chemistry visualisations using canvas.

Is CSS3 part of HTML5?

Just in case you forget.

genManifest Bookmarklet

A handy little tool to help you get started with building offline apps by suggesting which files should go in your cache manifest.

HTML5Rocks - Home

A new HTML5 resource from Paul Irish and other Googlers.

The Creation Engine No. 2: HTML 5 multimedia

Jim experiments with canvas and audio.

My Canvas Learning Page

Conway's Game of Life, implemented in canvas.

The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything - Dive Into HTML5

A really handy list of really short JavaScript code for HTML5 feature detection.

Notes on HTML5 Parser History — Anne’s Weblog

Anne explains exactly why the HTML parser defined in HTML5 is A Very Good Thing for everyone.

HTML 5 Asteroids | Doug McInnes

Asteroids in canvas. Works a treat. Now I want Battlezone.

Firefox 4: the HTML5 parser – inline SVG, speed and more ✩ Mozilla Hacks – the Web developer blog

Henri Sivonen gives the lowdown on the HTML5 parser that will ship with the next version of Firefox. This is a huge development ...and yet users won't even notice it (by design).

Happy Magic Fun Time — HTML5 For Drunks

I wasted my time writing HTML5 For Web Designers when clearly, this is the best tutorial on HTML5 ever.

theoriginofthe<blink>tag (www)

The origins of the blink element are fascinating. To nobody's surprise, alcohol was involved.

The Big Web Show 2: HTML5 with Jeremy Keith | 5 by 5

I had a lot of fun chatting with Dan Benjamin and Jeffrey Zeldman about HTML5 for Web Designers. Now you can watch the video or listen to the podcast.

HTML Lint

Finally! A lint tool for HTML (including HTML5) so you can enforce strictness in your writing style.

HTML5, ARIA Roles, and Screen Readers in May 2010 — Research — Accessible Culture

Test results for screen readers navigating content that uses new HTML5 elements and ARIA roles.

WAI-ARIA Schemata

There is a doctype for HTML4 + ARIA but "This DTD is made available only as a bridging solution for applications requiring DTD validation but not using HTML 5."

MiniApps - HTML5 apps for iPhone, iPad, Android & other mobile platforms

A nice collection of free apps for your mobile device. No app store required, thanks to offline storage.

Code Standards | Isobar

A very detailed set of coding standards and guidelines.

An Event Apart News Archive

I'll be delivering half of A Day Apart in Washington DC in September — the HTML5 half. So... there's that.

Bulletproof HTML5 <details> fallback using jQuery · Mathias Bynens

A good example of the correct way to approach new interactive elements in HTML5 (the details element in this case): test for native support and then emulate with JavaScript if required.

ChangeProposals/KeepNewElements - HTML WG Wiki

An excellently written zero-edit change proposal from Edward O'Connor and others, refuting issues raised by Shelley Powers (I offered to help with this change proposal but I never followed through).

Daniel Davis - The HTML5 <ruby> element in words of one syllable or less

A nice explanation of the ruby element in HTML5: very handy for marking up phonetic pronunciation.

HTML/XHTML Compatibility Authoring Guidelines

A first bash at describing how to write (X)HTML5 documents that can be parsed as XML as well as HTML.

Akihabara

A framework for creating old-school arcade games in the browser, using HTML5.

HTML5 Video Destruction

Quite a stunning proof of concept that uses video and canvas.

Doctor Who: The WebKit Implementation

A (webkit-only) CSS3/HTML5 take on the Doctor Who opening titles.

Timed tracks - WHATWG Wiki

Hixie needs your help. Document examples of augmented video (or audio) such as captioned or subtitled media.

Bruce Lawson’s personal site : HTML5 articles and sections: what’s the difference?

Bruce gives a good explanation of the difference between section and article in HTML5.

Change Proposal Status

Purely for my own benefit because I keep needing this URL, here are the current outstanding issues registered at the W3C for HTML5.

Bruce Lawson’s personal site : HTML5 details element, built-in and bolt-on accessibility

An excellent piece by Bruce on why the details element needs to be in HTML5.

Demo jPlayer 1.1.0 : jQuery audio player plugin

A nice-looking jQuery plugin for HTML5's audio element, with fallback to a Flash player. I might just end up using this on Huffduffer.

Daring Fireball: GIF, H.264, and Patents

A thoughtful piece by John Gruber on HTML5 video: yes, software patents are toxic to the web but perhaps H.264 isn't the worst offender.

QuirksBlog: HTML5 apps

PPK proposes a new buzzword for standards-based mobile development: HTML5 Apps. Definition: "an iPhone app that works on several other platforms, too, and doesn’t have to go through the app store approval process."

oooooooOOOOOOOooh!

Because sometimes a sad trombone just won't do.

code · Video for Everybody!

Encode your video twice (mp4 and ogg) and you can then serve it up in 4 different ways: 2 HTML5 video sources, 1 quicktime player, and 1 Flash player.

PrimerCSS

This is an interesting idea: paste in some markup and this will automatically generate CSS selectors based on your classes and IDs.

HTML Device

Hixie is proposing a new addition to HTML but separate from HTML5, "to enable video conferencing from HTML applications."

Another World JS - Megidish.net

Quite astonishing use of canvas: the game Another World ported to JavaScript.

Times Skimmer by The New York Times

Beautifully done with HTML5 and font linking.

Glossary | HTML5 Doctor

A very handy glossary of HTML5 from the medical professionals at HTML5 Doctor.

PF/XTech/HTML5 - ESW Wiki

Your one-stop shop for ongoing accessibility work related to HTML5.

Why do we have an IMG element? [dive into mark]

A fascinating trip down memory lane to the birth of the IMG element.

The WHATWG Blog » Blog Archive » Usability testing HTML5

Hixie has been making changes to microdata in HTML5 based, not on opinion or theory, but on the results of user testing.

HTML5 Elements and Attributes

A very handy interface for browsing the contents of the HTML5 spec.

A Brief History of HTML | Aten Design Group

An entertaining and accurate history of markup up to and including HTML5.

The WHATWG Blog » Blog Archive » Spelling HTML5

The official word on that darned space.

HTML5: normativity & authoring guides — Edward O’Connor

Ted explains what all those HTML5 documents for authors are about.

CSSquirrel : Comic: Kyle Weems

I've been comicified (again), this time with my HTML5 Super Friends.

HTML 5 Super Friends

My buddies and I express our support for HTML5 ...with caveats ...and unicorns.

The HTML5 Semantics Debate - Opinions - MIX Online

A thoughtful piece on the question of extensibility in HTML5.

LAZEROIDS!

Asteroids implemented using HTML5's canvas.

Why is HTML Suddenly Interesting? - O'Reilly Radar

Simon St. Laurent explains why mobile support for HTML5 mitigates Microsoft's dominance of desktop web browsing.

New co-chairs for HTML Working Group from Tim Berners-Lee on 2009-08-26 (public-html@w3.org from August 2009)

Maciej Stachowiak is an inspired choice as co-chair of the HTMLWG. His evenhand peace-making has already made him an HTML5 hero.

HTML 5–What I’m Watching at Wendy Chisholm

Wendy gives some commentary from her ringside seat at the theatre of HTML5.

HTML 5 Outliner

A very handy tool to help you check the outline algorithm in HTML5.

Dive Into HTML 5

Watch this space for Mark Pilgrim's dive excursions into HTML5.

“Misunderstanding Markup” 日本語訳

Turning Japanese, I think I'm turning Japanese, I really think so.

HTML5 Canvas and Audio Experiment

A very pretty little Twitter canvas experiment accompanied by music delivered via the audio element. View this in a capable browser.

Cartagen

Lovely representation of OpenStreetMap data using canvas.

Let's make the web faster - Google Code

A whole heap of optimisation techniques from Google for faster CSS, JavaScript, markup and PHP.

Misunderstanding Markup: XHTML 2/HTML 5 Comic Strip | How-To | Smashing Magazine

My words have been given new life in comic form thanks to the very talented Brad Colbow.

IS HTML5 READY?

Remy's riposte to http://ishtml5readyyet.com/

HTML5 structure—HTML4 and XHTML1 to HTML5 ・ @boblet | random notes

Oli gives a nice hands-on tutorial on using the new structural elements in HTML 5.

Bug 25267 – Autobuffer on <audio /> cannot be disabled

This single issue is what's stopping me using the HTML 5 audio element on Huffduffer.

Thoughts on the whole XHTML/HTML5 affair | Morethanseven

I think Gareth is reading my mind. Get out my mind, Gareth!

Archive of W3C News in 2009

It looks like XHTML2 is going to get mothballed at the end of this year.

The Future of Code

Steven Pemberton, one of my favourite long-term thinkers, talks about programming, markup and XForms.

HTML5 Video + CSS Visual Effects

Experimenting with CSS3 and HTML5 features implemented in Webkit.

camen design · Video for Everybody!

The smart way to put video on the web: don't choose one single delivery method.

Bruce Lawson’s personal site : Impasse on HTML 5 video

The spectre of patents is hurting progress on the web.

HTML5 Demos

Courtesy of Remy. Doesn't he ever sleep?

Maintainability Guide (Beta) – Jens Meiert

A surface skim of maintainability in front-end development.

html5doctor, helping you implement html5 today

Answering your questions about HTML5.

Word has always done a great job of displaying the... · Ben Ward's Scattered Mind

Ben calls bullshit on Microsoft's defence of Outlook's rendering. Ben, as usual, is correct.

Styling buttons to look like links | Natalie Downe

An excellent tutorial from Nat explaining how to deal with those situations where you should be using a button but the design calls for it to look like a link.

Dinky pocketbooks with WebKit transforms | Natalie Downe

This is just brilliant! Natalie has taken the Flash-based Pocketmod and reproduced it using HTML and CSS (including CSS transforms).

Persuading Microsoft to Implement Canvas « Processing.js Blog

The 26 step process required to add +1 to a feature request in IE. Franz Kafka is alive and well and living in Redmond.

Uni-Form

A nice stab at a markup (and CSS) pattern for forms.

WebKitBits · A tumblog about the browser engine built into Safari, Chrome, iPhone, and Android.

A blog of all things webkit, itself showcasing some of the CSS niceties in the rendering engine.

html5 and Firefox2

Remy explains how to get Firefox 2 and Camino to recognise HTML5 structural elements.

Chris Shiflett: Save the Internet with rev="canonical"

Chris Shiflett gets behind the rev="canonical" movement. This thing is really gaining momentum.

RevCanonical’s Blog

rev="canonical" has a posse.

Wikirank

A Cederholm-designed site for tracking trends on Wikipedia. Check out the HTML5-based class names.

Official Google Webmaster Central Blog: Specify your canonical

There's a new rel value in town: "canonical". It looks like an awful lot like "bookmark".

FireScope

This addition to Firebug is rather excellent: a built in reference for whatever you're inspecting.

Juicy Studio: Requiring the alt Attribute in HTML5

Gez lays out the case for and against keeping the alt attribute mandatory in HTML5. If he's missed anything, add a comment.

Jounce, the online home of M. Jackson Wilkinson

Jackson's lovely new site ...written in HTML5.

Using WAI ARIA Landmark Roles - The Paciello Group Blog

A guide to using ARIA roles from the mighty Steve Faulkner.

12 resources for getting a jump on HTML 5 ~ Authentic Boredom

Cameron rounds up articles on HTML5 from 'round the web.

HTML-Ipsum

Lorem ipsum text pre-wrapped in HTML tags.

A List Apart: Articles: The Trouble With EM ’n EN (and Other Shady Characters)

This article is an oldie but a goodie. I find myself referring to it all the time: "Beating typographic correctness out of (X)HTML: more than you ever wanted to know about dashes, spaces, curly quotes, and other vagaries of online typography."

?C ?V Character

A very useful tool for getting character entities (use the "as HTML" option) in one click.

W3C Validator, now with HTML5 flavour - W3C Q&A Weblog

Henri Sivonen's HTML5 validator has now been integrated into the W3C validator.

HTML: The Markup Language

Mike Smith has extracted all the parts of the HTML5 spec related to authoring (as opposed to error handling, DOM and other user-agent instructions) to create a pure markup spec. Very handy.

Validifier: Turn Flash embed code into valid XHTML

A handy little tool to turn video embedding markup into valid XHTML.

Time to stop showing clients static design visuals | For A Beautiful Web

Andy makes a great case for presenting clients with designs in HTML/CSS rather than flat, fixed, non-interactive graphics.

iphone login screens - a set on Flickr

Screenshots of various log in screens on the iPhone. I think Cindy has been hanging out with Luke W.

Flickr login mobile

CSS for lunch » Mastering the presentation layer of the web… at lunch time.

Here's a great project from Andrew Mager. He takes a little time out at lunch to post a small markup or CSS tip. Over time this builds up into a really valuable resource.

Call for Review: Updated WAI-ARIA Specification from Shawn Henry on 2008-08-06 (w3c-wai-ig@w3.org from July to September 2008)

Shawn at the W3C wants feedback on the ARIA working draft, particularly "feedback on host language embedding, that is, how ARIA is implemented in HTML, XHTML, SVG, and other host languages." If you don't chime in now, don't bitch later.

Introduction to WAI ARIA - Opera Developer Community

A good overview of ARIA from the mighty Gez Lemon. There seems to be quite a bit of overlap with some HTML5 ideas here.

Opera Web Standards Curriculum

Opera have unveiled the Web Standards Curriculum. It's released under a CC attribution non-commercial share-alike license and it looks like a very valuable resource.

reboot10 - Jeremy Keith talks about Hypertext (Micropresentation)

Ooh, look what else I've found on the Reboot site.: this is my pecha kucha... I mean, this is my "micropresentation" about increasing the power of your hyperlinks (with microformats ...of course).

Eric's Archived Thoughts: The Missing Link

An excellent passionate call to action by Eric explaining why the href attribute should be freed from the shackles of the anchor element.

Google Doctype - Google Code

This looks like it could be a very valuable resource indeed: a user-contributed and edited reference for HTML, CSS and JavaScript.

font is dead, vive le style - W3C Q&A Weblog

About freakin' time! The FONT element, whose presence until now in HTML5 was an utter embarrassment to all concerned, is finally gone. Thanks, Hixie.

San Diego Web Standards Group

Live in San Diego? Interested in web standards? Come along tomorrow to the inaugural San Diego Web Standards Group meetup. You won't regret it.

XFN encoding, extraction, and visualizations - Opera Developer Community

Brian has written an excellent article that not only explains how to write XFN but also how to parse it.

Clichés are hard

An offhand remark I made on Twitter spurs Dom on to do a whole lotta research on character encoding in class names.

W3C DOM Compatibility - HTML

PPK has once again been doing sterling work. He's updated the DOM compatibility chart and things are actually looking pretty good.

Markup Map for hCard Microformat : Christopher Schmitt

A handy diagram showing the nesting of class names in an hCard. Useful for styling.

Validator S.A.C. - Stand-Alone W3C HTML Validator Application for Mac OS X

For those times when you need to validate your markup but you don't have a 'net connection.

Microformats: Toward a Semantic Web

An excellent overarching article looking at the current state of microformats adoption.

Juicy Studio: WAI-ARIA in HTML

How to get ARIA working in HTML (no namespaces in HTML, remember). Once again, Gez is providing superb documentation in the area of JavaScript and accessibility.

Jeffrey Zeldman Presents : What crisis?

I was feeling very browbeaten after Molly's tirade but count on Jeffrey to put things in perspective.

Microformats: More Meaning from Your Markup [HTML & XHTML Tutorials]

Great article from Brian ranging from introducing microformats right up to the current state of play.

microformatique - a blog about microformats and “data at the edges” : Semantics in HTML Part III - Towards a semantic web

John Allsopp has posted the third and final part of his superb series, Semantics in HTML. Read them all.

MiniAjax.com / A showroom of nice looking simple downloadable DHTML and AJAX scripts

A collection of scripts. There might be some good stuff here but use with care and discretion.

markup - a photoset on Flickr

This is funny in a very, very geeky way.

base

Semantics in HTML Part II - standardizing vocabularies at microformatique - a blog about microformats and “data at the edges”

The second part of John Allsopp's superb series on semantics, philosophy and markup. Don't miss it! And be sure to go back and read the first part, too.

Semantics in HTML - 1.”traditional semantic HTML” at microformatique - a blog about microformats and “data at the edges”

A superb article by John Allsopp on semantics in the broad sense, from philosophy and linguistics right through to markup. And this is just part one! Read, enjoy, and prepare for part two.

HTML Mastery - Semantics, Standards and Styling by Paul Haine

Paul's book will be out in a few weeks. Looks like it'll be a good one.

SimpleBits | Pairing Wine and Microformats

Dan documents the process of adding microformats to Cork'd.

Google Code: Web Authoring Statistics

Useful markup statistics from Google, complete with snotty commentary.

Eric's Archived Thoughts: Adium: Chatting With Style

You can skin Adium using just XHTML and CSS. Who knew?

rest/ahah - Microformats

Who knew? The way I do my Ajax is a microformat. AHAH: Asynchronous HTML and HTTP.

Valid downlevel-revealed conditional comments | 456 Berea Street

Keep this one handy in case you have to use conditional comments to hide something from Internet Explorer.

Liquid Designs

This is something I always meant to do but never got around to: a gallery site for good liquid design.

hReview

There's a new microformat on the block.

Web specifications supported in Opera 8

The DOM support looks great.

Rob Weychert

Rejoice! Rob has redesigned and it's a thing of beauty, semantically and visually.