Archive for the 'accessibility web standards' Category

Reading List

Shake your Brucie!

Once in a generation, there is a perfect combination of circumstances that leads to the creation of something truly extraordinary. Today is that day – the flawless union of programming, content, beauty and functionality.

This week at the Future of Web Apps conference, the Stella McCartney of geek crochet, Ruth John, gifted me with a hand-made, individually-designed crocheted mankini. A photo of me wearing it is available on my fashion blog What’s Bruce Wearing Today (caution advised).

At the same conference, Syd Lawrence demonstrated his accelerometer-driven app Shake Her Booty which allows you to control J Lo’s bottom (“booty”) by shaking your phone.

Claudia Snell asked “when can we expect the @brucel version?” so Syd mashed up some video he’d made of me dancing in the mankini at the FOWA after-party, and today has released Shake Your Brucie.

Just tap my booty to begin.

Enjoy.

Why is viewport in a meta tag?

Adam Bradley asked

Marcos Caceres replied

HTML never required an <html>, <head> or <body> element (only XHTML validators did). So if you open test 1 in any browser and view source you’ll see those three elements aren’t in the source. But if you inspect the DOM with any inspection tool, you’ll the browser has inserted those elements.

How does the browser know where to close the <head> and open the <body>? Test 2 shows a page that contains a <vomitingotter> element. This isn’t offcially part of HTML yet (hurry up Hixie!). There is no <body> element in the source, but the browser knew to leave the <title> and <meta charset> in the head and add the <vomitingotter> element into the <body> (which is why you can actually see its contents; by default, no text in the <head> makes its way into the visible page.)

Simply, the first element that isn’t known to be part of the <head> makes the browser close the <head> and open the <body>. So if it’s not recognised as metadata content (<base>, <link>, <meta>, <noscript>, <script>, <style>, <template>, <title>) it goes in the body. Any subsequent “head” elements remain in the <body>; they aren’t restored into the head (see the DOM of test 3), even if you explicitly wrap them in <html>, <head> and <body> elements in the original source – see test 4.

This doesn’t investigate the bigger question of why Apple – who invented the viewport meta tag – decided to add it to HTML at all. After all, HTML is about content and the viewport information is about styling, and would therefore be more appropriately be declared in CSS. I don’t know the answer to that, except that Apple knows best about everything.

There’s a CSS specification called CSS Device Adaptation that is basically “viewport in CSS”, with an @viewport rule (tutorial by Andreas Bovens). This generalises the viewport directive, and gives you more power, too; because it’s in CSS you can combine it with Media Queries. It’s supported in Opera, Chrome and Internet Explorer.

Reading List

Reading List

Reflections on Extensible Web Summit, Berlin

I was lucky enough to visit Berlin very briefly for the Extensible Web Summit. It was organised, it seems, by members of W3C (but was not an officially branded W3C) and hosted by Beuth University, Berlin. Lunch was provided by Google, beers afterwards by Yandex (although I missed those as I’d taken the inexplicable decision to fly back straight after rather than hobnob with the great, the good, and Chaals.) Thanks to all organisations.

This isn’t a record of the day; the event notes were crowd-scribed. It’s my preliminary thoughts about the concept of the “extensible web”.

As far as I can deduce – because the term “extensible web” wasn’t actually defined on the day – it’s about giving/ exposing primitives so developers can extend various parts of the platform. (Read The Extensible Web Manifesto for a longer description and statement of intent.)

In the current world, we wait for something like Appcache to be specified, then implemented and then scoffed at. This can take a long time, and we might not get what we want; Hixie told me “The appcache API is another big mistake. It’s the best example of not understanding the problem before designing a solution … Appcache works great if you want to do what it was designed for, but it turns out most people want to do something different enough that appcache feels horrible to them”.

So, an example of Extensible Web practices/ methodology is Service Worker – it allows you to control how websites fetch and store information across the network (and when there is no network) but it’s very low-level; you have to do everything yourself in JavaScript – but that gives you great power and flexibility.

One of the tests of Service Worker is: can we explain how AppCache works by coding it via Service Worker in JavaScript? Yes, we can. Similarly, Chrome’s Chris Wilson said how he hopes to be able to explain how the <audio> element works in terms of the Web Audio spec. Explaining how things work and giving us hooks in is a good idea, it seems to me. For example, in a sane, Extensible Web-world, we’d never have had the <canvas> element, but instead would have extended <img> with a scriptable API.

But while it’s good to explain magic, I feel we need to be careful about using the word “magic” pejoratively. A lot of the success of the Web was that simple HTML tags (<a>, <input>) made magic happen. You write <img src=”vomiting-otter.jpg”> and a vomiting otter appears; you don’t need to worry about how it gets there over the network, its caching, its format, etc. Similar with <input> – you just code a reasonably obvious word in angle brackets and it works.

As Steve Faulkner notes, a lot of the success of accessibility on the Web is/was that simple HTML elements makes accessibility happen.

Service Workers, and the spec that I’ve been closer to, <picture>, are great examples of listening to developers (partnership). Service Worker came out of a meeting between Opera, Mozilla, Google, BBC, Financial Times etc and was specified by Google, Mozilla and Samsung (and many others). <picture> came about because developers demanded it, even when the browser vendors and standards bodies didn’t care.

The Extensible Web Manifesto says “We prefer to enable feature development and iteration in JavaScript, followed by implementation in browsers and standardization”. I hope the end result is standardisation of a canon of best practice and then native implementation. Although JavaScript and C++ performance are (allegedly) very close now, I’d still rather see Sexy Feature implemented in 20K of C++ in a one-time download of a browser than loads of devs use a different Sexy Feature polyfill that gets downloaded squilions of times by billions of users of millions of sites.

But I’ve already heard potentially good ideas for extensions to core HTML handwaved away with “oh, that’s a job for Web Components”. So I’m not yet entirely convinced that we’re not heralding a new era of JavaScript-only web development. I don’t want to see the fossilisation of the declarative web and a new Programmer Priesthood (re-)emerge.

How can developers make their voices heard? It’s true that browser vendors are OBSESSED with solving developer’s problems. If we don’t, you’ll make native apps, and then browsers disappear, we default on our mortgages, our partners leave us for Apple employees and our hamsters starve. None of us want this to happen. So we try to listen.

Then there is the question of how developers can participate. The bravery barrier to entry for many of the mailing lists is already too high – I periodically get emails from people asking me to propose a feature or ask a question on a list as a proxy because lists are scary places.

W3C has set up a Specification forum where you can ask questions about specs/ propose a feature. Read around it to see if anyone else has a similar proposal, and if appropriate, add comments to that before you set up a new thread. Use Mozilla’s guidelines WebAPI Design Guidelines and please remember that use-cases are much better than a fully-worked out proposed syntax.

I’m enthused about the Extensible Web manifesto and the progress we’ve already made, eg baking popular jQuery-like syntax into browser engines via the Selectors API, getting our hands on the network with Service Worker, and the heady new world of Web Components. We need to ensure that all devs who want to can participate by allowing ease of collaboration, courteous discourse. And it would be perilous to forget that the declarative web reduces the barrier to entry and enhances accessibility.

Reading List

Standards smörgåsbord

Security Soufflé

Video Dessert

A Boy And His Atom: The World’s Smallest Movie, made by moving individual atoms at IBM, magnified 100 million times.

Reading List

Reading List

Standards ‘n’ all that jazz

French joke corner

Heard about the French chef who killed himself? He lost the huile d’olive.

Video corner

“Coders and hackers, ready to change the world, and the hackathon is the perfect place. But things don’t always go as planned…” by @ourmaninjapan

Reading List

Standards and tech

Freedom corner

Lonely hearts’ corner

Readers who are single may find this 80s dating video helpful. Invite me to the wedding, please.