Adactio: Links

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!

Barebones — An initial directory setup, style guide and pattern primer by Paul Lloyd

Here are some nice patterns that Paul uses for starting points in his own projects.

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.

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…

Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes - Tantek

I love that Tantek is as pedantic as I am …although I don’t think “pedantic” is exactly the right word.

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.

Base CSS | Pasteup | Guardian News

The Guardian’s front-end patterns library. The modules section contains their equivalent of a pattern primer. Very nice!

» 23 October 2012, baked by Leisa Reichelt @ The Pastry Box Project

Less wireframing, more prototyping.

—Leisa

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.

Build a smart mobile navigation without hacks | Tutorial | .net magazine

A really great markup and CSS pattern for “content first, navigation second” from Aaron.

A New Take on Responsive Tables by ZURB

An interesting approach to squishing down large data tables for small-screen viewing …though I wonder if there isn’t a “Mobile First” approach that could scale up, say, lists to become tables on large screens.

The origin of the blink tag

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

Style guide round-up

Anna goes through some of her favourite pattern libraries. It’s really, really great to see this stuff getting documented.

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.

About HTML semantics and front-end architecture – Nicolas Gallagher

An in-depth look at naming patterns for classes to help streamline CSS.

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.

» 21 January 2012, baked by Ben Ward @ The Pastry Box Project

Some valuable musings from Ben on how browsers could be better — and I don’t mean the usual moaning about performance or device APIs.

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.

A Responsive Design Approach for Complex, Multicolumn Data Tables | Filament Group, Inc., Boston, MA

A really nice pattern for data tables in responsive designs. Just as with conditional loading, the key point is making a distinction between essential and optional content.

Confusion over HTML5 & WAI-ARIA | Karl Groves

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

The Mobile Case for Progressive Enhancement | Brad Frost Web

A great, great reminder from Brad on the importance of progressive enhancement especially on mobile. There seems to be a real mindset amongst developers working on mobile sites that JavaScript is a requirement for building anything (and there’s a corresponding frustration with the wildly-varying levels of JavaScript support). It ain’t necessarily so!

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!

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.

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.

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.

HTML5 Rocks - How Browsers Work: Behind the Scenes of Modern Web Browsers

Insanely in-depth look at how browsers work, right down to the nitty gritty. You’d think there’d be a lot of engineering talk, but actually a lot of it is more about linguistics and language parsing.

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.

5 STEPS TO HTML5

A really nice little primer on getting started with HTML5.

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.

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.

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.

Don’t use IDs in CSS selectors? ❧ Oli.jp (@boblet)

I agree with Oli’s conclusion:

Save IDs for fragment identifiers or JavaScript hooks.

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.

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

New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 | David B. Calhoun – Developer Blog

A look at some of the new HTML5/JavaScript additions coming in the next version of Mobile Safari.

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.

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.

Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement — Easy Readers

Buy. This. Book.

I mean it.

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.

Read ePub ebooks online : Bookworm ePub reader

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

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.

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.

Beautiful Element Creation with jQuery — Article — The Nerdary

Good advice for generating markup with jQuery. As usual, there’s more than one way to do it.

FUMSI Article: Microformats: Digging Deeper into the Web

A nice, neat, short introduction to microformats from Ben.

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.

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.

Create a new Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

This looks like it could be a handy little tool for creating test cases with HTML, CSS and JavaScript.

Tags: markup

More information

About this site

Customise

Search

Subscribe