- Opera and Chrome to have ship <picture> imminently, RICG beginning work on Element Queries
- Opera reaches 1024 upstreamed Blink patches Team celebrates in sauna with fermented moose milk (“Ringnes”)
- It looks like Manifest for web application is gonna be, like, literally, a thing. It’s already in Firefox OS, Opera likes it, and Alex Russell – sounding like an enthusiastic estate agent with his breathless talk of “window decorating” & “exit extents” – gave it a yay from the Chrome team.
- W3C HTML JSON form submission – W3C draft spec
- A high-profile fork: one year of Blink and Webkit – ” a look at the Blink/Webkit fork one year later: how have the projects diverged, who is driving them, and what are they up to?”
- Looking at Russian market? Blink-based Opera is default on Huawei’s Android smartphones & tablets shipped to Russia.
- Everything You Need to Know About the CSS will-change Property by Sara Soueidan
- The CSS ‘will-change’ property; odd solution to an odd problem. by Matt Wilcox
- What is WAI-ARIA, what does it do for me, and what not? by Marco Zehe, a Firefox accessibility engineer and screenreader user
- HTTP Archive – new stuff! – See trends in what the web is made of: “The HTTP Archive crawls the world’s top 300K URLs twice each month and records detailed information”.
- Getting Started with Gulp – the newest kewlest task runner thingie since Grunt became sooooo last Thursday
- Amazon, Hachette, And Giant Stompy Corporations – a post about book publishing, monopolies and culture. “Do not be married to a single ecosystem. Fuck the monoculture”
- Tubes: part of the mission to JSify everything, @dglazkov works on Web Platform Plumbing (henceforth, plz call me “Sugar Layer”)
- Oh! You Kid! How a sexed-up viral hit from the summer of ’09—1909—changed American pop music forever
Archive for the 'accessibility web standards' Category
A little over ten years ago, on 4 June 2004, Opera employee Ian “Hixie” Hickson sent a mail titled WHAT open mailing list announcement announcing
a loose, unofficial, and open collaboration of Web browser manufacturers and interested parties. The group aims to develop specifications based on HTML and related technologies to ease the deployment of interoperable Web Applications
Ten years is a long time, especially so in software, but nevertheless, the achievements of WHATWG have been remarkable. Hixie wrote
The working group intends to ensure that all its specifications address backwards compatibility concerns, clearly provide reasonable transition strategies for authors, and specify error handling behavior to ensure interoperability even in the face of documents that do not comply to the letter of the specifications.
Core aspects of the web platform were never adequately specified. XMLHttpRequest, for example, was shipped in IE5 in March 1999, and reverse-engineered and shipped in Firefox, Opera, Safari and iCab, but never actually documented until Anne van Kesteren co-specified it in WHATWG in a Working Draft of 5 April 2006. Anne’s currently working on the Fetch Standard, which defines something as basic as “requests, responses, and the process that binds them” and the Encoding Standard:
While encodings have been defined to some extent, implementations have not always implemented them in the same way, have not always used the same labels, and often differ in dealing with undefined and former proprietary areas of encodings. This specification attempts to fill those gaps so that new implementations do not have to reverse engineer encoding implementations of the market leaders and existing implementations can converge.
Of course, the poster children of WHATWG are the slew of new APIs that “HTML5″ brings us – Web Workers, Web Sockets, native video and audio etc etc. There have been mistakes along the way (of course there have, in a decade!). Last year, Hixie told me
My biggest mistake…there are so many to choose from! pushState() is my favourite mistake, for the sheer silliness of ending up with an API that has a useless argument and being forced to keep it because the feature was so desired that people used it on major sites before we were ready to call it done, preventing us from changing lest we break it. postMessage()‘s security model is so poorly designed that it’s had academic papers written about how dumb I was, so that’s a pretty big mistake. (It’s possible to use postMessage() safely. It’s just that the easiest thing to do is not the safe way, so people get it wrong all the time.) The appcache API is another big mistake. It’s the best example of not understanding the problem before designing a solution, and I’m still trying to fix that mess.
But to me, the biggest triumph of WHATWG has been error-handling and interoperability (actually, two sides of the same coin). We’ve moved from a vision of the future where everything was supposed to be XML and browsers were to stop parsing if they met malformed markup, to a present where every browser knows how to construct an identical DOM from the most mangled/tangled HTML. We’re moving to a world where interoperability is paramount, and where specifications are made in the open, in constant consultation with developers (for example, Service Workers, Web Components) based on real use-cases.
I think the existence and the work of WHATWG has secured the viability of the web platform. Happy 10th birthday. And thanks.
A small reading list this week, due to there having been a bank holiday this week, and my pre-occupation with being a snot factory.
- Women talk design – Women Speakers for Your Next Conference
- Update and call for review. HTML manifest spec for offline apps v1 is published. Implementing in Gecko, Blink. “Devs and implementers, please let us know which V2 features should be prioritized.”
- Getting to know CSS Blend Modes – “CSS Blend Modes provide a way to specify how one layer will interact or “blend” with the one underneath. Until now, this was the domain of photo editing applications, but now they are available on the web using CSS itself!”
- Is Service Worker ready? – no. But Jank Architect has a useful page showing the implementation status of all the pieces needed to get to offline app utopia.
- There are more mobile-optimized sites than ever. So why are mobile pages getting bigger? – some interesting stats but no answer to the question asked
- Hacking with Unicode – presentation by Mathias Bynens, with a pile of poo on the astral plane. (Slides)
- Setting up a secure website with HTTPS and SPDY support under nginx on a Raspberry Pi by Matt Wilcox. The joys of setting up HTTPS can be everyone’s when Service Workers hit the streets
- the case against sharing – an interesting article “on access, scarcity, and trust” the commits the common mistake (made by San Franciscans) of thinking San Francisco is the whole world.
My artisan-curated organic bank holiday reading list. There will be a test on Tuesday.
- A comparison of various features and APIs across mobile platforms
- Responsive Images Done Right: A Guide To <picture> And srcset
- Summary of drop-caps/initial-letters discussion – CSS Working Group
- Service Workers: Supporting HTTP? “We will not support non-secure connections. Closing.”
- Script-injected “async scripts” considered harmful by Ilya Grigorik (Google)
- A More Compatible, Smoother Touch (HTML5 rocks)
- Revenge of the brochureware billboard designers – “Organizations can’t resist broadcasting when customers just want to get something done.”
- Web Wishes (Unofficial Draft) – “This specification defines a mechanism for Web applications to register themselves as being able to handle certain specific types of services (“grant wishes”) with a user agent.”
- What the fuck is my wearable strategy? – an artisan-curated strategy at your fingertips
- Mozilla add HTML5 DRM, sadly but inevitably – The most sensible and measured response to Mozilla’s DRM announcement I’ve read, by Stuart Langridge, whose Open Source credentials are unquestionable.
- On the security problems of EME (DRM in browsers) by Sergey Konstantinov (@blogovodoved). Sergey is a Yandex rep on TAG but this isn’t a formal TAG document.
- Service Worker – first draft published by Jank Architect. If I could snog an article this week, it’d be this one…
- …and this one: An Introduction to IndexedDB by @webinista – so epically good, even I can understand it.
- I’d slow dance and smooch with Figuring Out Responsive Images by Chris Coyier, too.
- A <picture> perfect problem – “Been using <picture> polyfill for the first time. It’s good, but needs to be used wisely. Here are some thoughts” thinks Matt Wilcox
- Don’t Wait on Responsive Images – “The tools are there now. Let’s use them” by Tim Kadlec
- How fast is PDF.js? – MozHacks article about Opera and Mozilla collaborating to make PDF.js faster. It’s good fun collaborating with Google et al on Blink, Moz on PDF.js and contributing to WebKit too.
- HTML as Custom Elements “Custom Elements is a bedrock API. We should be able to build all HTML elements with it.” (Should we? Why?)
- Web Components: How should I name my element? (answer isn’t “Malcom or Fatima”, sadly.)
- The Designer’s Guide to Working with SVG – Pt 1
- A Complete Guide to Flexbox – Chris Coyier
- RFC 7258: Pervasive Monitoring Is an Attack – “IETF puts a stake in the ground on pervasive monitoring. This is a big deal” (Tim Bray)
- Developers of Earth, Your attention please. Brian Kardell appeals for action in getting more developers on the W3C Advisory Committee
- Using WAI-ARIA in HTML (Editors draft)
- No more JS frameworks – “we need to build a future where we don’t need to learn the latest model of the newest framework, instead we just work directly with the platform”
- CSS Shapes Polyfill – by Adobe
- Chromium: No keyboard accessibility for the html5 video player – good to see this bug getting some investigation
navigator.hardwareConcurrencyis being implemented in Blink and WebKit. Polyfill.
- Which companies do most to protect your data from government requests? – Electronic Frontier Federation.
- “Two Sentences About Getting Older and Working on the Web – we all feel like this from time-to-time. (Don’t we?)
- 250 Buzzwords We Love To Hate by Carl Smith
If you use Opera, we’d really appreciate if you could answer a few questions about how you use tabs.
Sexy video of the week
Browser performance panel at Codemotion.it – Microsoft, Mozilla & “I’m Bruce from Opera, and my browser’s the fastest”.
- Burying the URL “Today, a Canary build of Google Chrome removed something kind of important from the browser: the URL.”
- Improving the URL bar by Jank Archibald (a Chromo Sapian)
- URLy warning by Jeremy Keith
- On Chrome hiding URLs to protect users from phishing – Remy Sharp
- Security changes in Opera 21 – on reworking of the Address field, to cope with some situations which could have caused confusion. (Opera 15-20 obscured some of URL, Opera 21 ships with a setting to always show it in full.)
- URLs are already dead by Nicholas Zakas. Some compelling arguments here.
- Some data: Does Domain Highlighting Help People Identify Phishing Sites? (PDF, 10 pages)
Facebook announced App Links, a “an open, cross-platform solution for app-to-app linking”.
- Facebook-backed spec lets apps link to other apps on mobes (“Look, ma, we’ve invented the web – only with no browser”)
- Bye-Bye Browsers: Why Facebook’s New App Links Are a Big Deal
- Related-ish: The ebb of the web by Boris Smus (Google) “By dropping the notion of THE WEB (singular), and ushering an era of specialized browsers, we can split our universe of devices into subsets and increase the baseline greatest common denominator.”
Other standards ‘n’ stuff
- Why Service Workers will be HTTPS only. I complained on Twitter that “This means devs must pay to use SW. Also feels like social engineering?“. Pascal Hartig replied “There are free playground services like GitHub pages that are served over HTTPS as well as free certificates.” Jake Archibald said, “Free certs are available (eg startssl.com/?app=1). As you can see from that thread, the decision was purely for security reasons”. However, setting up SSL isn’t trivial, opined Matt Wilcox.
- WebComponents.org – a place to discuss and evolve web component best-practices
- talking of Web Components, should we require the use of a hyphen in custom attributes of custom elements? Yes, in my opinion; as custom elements must have a hphen in the name, requiring a hyphen in custom attributes establishes a useful convention that means they won’t clash with future global attributes.
- Tips for Creating Accessible SVG by Léonie Watson. If I could snog an article, I’d snog this one.
- Inline SVG vs Icon Fonts by Chris Coyier
- The new srcset and sizes explained by Martin Wolf
- Moving Forward with CSS Shapes by Sara Soueidan
- Mozilla hacks: How fast is PDF.js? – Opera and Mozilla working together to display PDFs with web technologies, fast
- Is HTML Too Big To Fail? by Robin Berjon (HTML editor, W3C)
- Create Rich Web Typography With OpenType: Discretionary Ligatures & True Small Caps (a year old; new to me.)
- The Secret Messages Inside Chinese URLs – Decoding 4008-517-517.com
On October 4th 2013, YouTubers ‘Sophie Danze’ and ‘JilianlovestheBiebs’ had a conversation on the video ‘One Direction: That’s what makes you beautiful. The following is a reconstruction.”
Matt Wilcox asked “I still don’t bother with <header> <footer> etc. I assume all widely used browsers support them now. But, do they do anything more than div?”.
It’s a good question. The answer I gave is “yes”. These two elements (and <nav> and <main>) give value to users of some assistive technologies on some browsers.
In the HTML5 spec, HTML elements are mapped to ARIA information. Some of those may be over-ridden by authors, but if they aren’t, they have default implicit ARIA semantics. A <header> element that is not a descendant of an article or section element maps to ARIA
role=banner, for example. You don’t need to add any ARIA information; it’s included, free, in the HTML element.
These aren’t necessarily implemented everywhere; Steve Faulkner’s excellent html5accessibility.com keeps tabs of implementation. As an example, <footer> causes Chrome to expose the element with a footer role in IA2, and Firefox to exposes as ARIA landmark role=”contentinfo” (when not a child of article or section elements).
These are useful to people, as we can see in WebAIM’s 5th annual screenreader users’s survey (which encouragingly tells us “For the first time in 5 years of surveys, respondents are more positive about web accessibility progress than in the previous survey”).
When asked “How often do you navigate by landmarks/regions in your screen reader?” (such as “contentinfo”, “banner”, “main”, “navigation”), 26% said “whenever they are present”.
20% thought 1-3 landmarks/regions per page is optimal; 29% thought 4-6 is the right number.
So my advice is: yes, use them – especially the main <header>, <footer>, <nav> and (once per page) <main>. On browsers/ ATs that don’t support them they do no harm. But don’t use billions.
Added 13 May to clear up confusion:
- Use <header>, <footer> as often as your content requires – only the main header and footer carry implicit banner and contentinfo roles. At a minimum, use them once (assuming you have a page header and footer, that is).
- Always use <nav> for the primary navigation.
- Use <main>, but only once per page.
The programming language, BASIC, turned 50 years old yesterday. I started using it 33 years ago, when my physics teacher persuaded our school to buy an Ohio Scientific Challanger 2 microcomputer, with Microsoft BASIC as its 8K ROM operating system and chunky 8K of RAM, then set up a computer club. I went along after school, because my mate Matt’s older brother was in computers and he was cool. (He had a job and owned all the punk LPs we listened to at lunchtime.)
Surprising everyone (including myself), I found that programming simply came naturally to me. I was soon coding games that my friends wanted to play.
It taught me several important concepts – primarily, how to break problems into logical flows, and how to debug when regaled with “Syntax error in line 40″ (you may also enjoy my Old programmer war story tale of epic debugging.)
It taught me about abstraction; I soon learned 6502 assembler and disassembled the ROM to see how the computer interpreted the stuff I typed in. (The joys of finding the message “Microsoft BASIC written by Richard W Weiland” hidden in the memory!)
It taught me about cross-platform; later, I borrowed a Sinclair ZX Spectrum, learned Z80 assembler and realised that although the code I entered was the same as the code I’d written for the Challenger 2 (with some minor syntactical variations), what happened under the hood was wildly different.
BASIC changed the world for me, and on cheap widely-accessible machines like the Sinclair ZX series and the BBC micros, it changed the whole world.
What I love about BASIC is that it was designed for simplicity. As wikipedia writes, “It was intended specifically for less technical users who did not have or want the mathematical background previously expected.” It also prefigured the WWW: “The designers of the language decided to make the compiler available free of charge so that the language would become widespread.”
Even the name “Basic” was a statement of intent; no wonder “real” computer professionals sneered at the language. “Goto considered harmful”, they said. I understood that to mean “working class 14 year olds who do literature and humanities not welcome here.”
Today there are still those who try to make programmers a special priesthood. They can kiss my algorithms.
- Sizer Soze “what is the cost of your non-responsive images?” – enter a URL and see!
- Element Queries, From the Feet Up Element Queries are the new
rounded corners, CSS gradients, responsive images
- Thoughts on Media Queries for Elements – over a year old, but new to me
- A “disclosure” web component using Polymer and WAI-ARIA – by Heydon Pickering, supplier of accessible web components to the crowned heads of Europe since 1793.
- Browser update news by l’il ol’ me.
The <picture> element
I proposed it 2.5 years ago. Loads of cleverer people worked hard on it. The RICG is holding a fundraiser to pay developer Yoav Weiss to code it in Blink and WebKit. Opera (my employer) contributed $1000, dozens of individual developers – people like you – pledged money as well.
The inital target of $10,000 has been reached, but don’t let that deter you from contributing – it means Yoav can work for longer, and maybe even have a break for a coffee and a piss now and then. (Coders, eh?)
- A Q&A on the Picture Element including “why <picture> *and* src-set?”
- Bringing Responsive Images to Browsers
- Srcset and sizes – A jolly illustrated guide to the newest bits in new <picture> spec:
Standards ‘n’ Shiz
- In a world… of web apps that don’t work off-line, one spec shall find his destiny. That spec… is …Service Worker. Think of it as AppCache done right: a non-slapdash AppCache.
- 2014 State of Element Queries by Tab Atkins.
showModalDialog()from the Web platform> – why, when and what to use instead.
- Happy first birthday to Blink – by me, and Blink’s First Birthday (chromium.org)
- The W3C Web Payments Workshop minutes of the first meeting. This is an important problem to solved, and work has begun.
- Confessions of a CSS Expert – “Before long, I’d gotten into the hard stuff. I was putting multiple classes on any one element… Soon enough, sites in production were using <div>s for everything: buttons, headings, checkboxes, whatever. It was like Drupal, but even more obsolete.”
- A Proposal for Credential-based Login – “There is a growing need for digitally verifiable credentials on the Web. Being able to prove that you are who you say you are is important when paying or receiving payment.”
- CSS Aliases (Draft) – “This specification defines methods of defining “aliases” for long or commonly-used values in several CSS features, reducing repetition in the stylesheet.”
- Peter Gasston: Introduction to Web Components (Edge Conf video, 10 minutes)
- Accessibility and the Shadow DOM
- Practical application and usage of the W3C Device Orientation API – amazingly in-depth article by Rich Tibbett. As a bonus, it uses the phrase “gimbal lock”.
Industry n Stuff
- Africa’s top 10 sites and mobile handsets (most visited domains: Facebook & Google) from the monthly State of the Mobile Web Report
- Waterfalls 101: How to use a waterfall chart to diagnose your website’s performance pains
- Make dropbox to serve html pages as UTF-8
- One link on GOV.UK – 350,000 more organ donors A/B testing copy on government website generates more sign-ups to organ donation service
- You Got the Documents. Now What? – guide for journalists on turning documents (including paper, and 1.7GB CSV files) into data for analysis and publication
- Learn from the BPAS web site data breach Pregnancy advice charity fined £200,000 after hack by anti-abortionist for inadvertently storing contact form submissions
- ‘Censor my internet please!’ – a Pakistani blogger writes “The Government in Pakistan does not censor the web – rather it follows a strategic covert control model… When a stance for the opening up of a video portal is equated with blasphemy, how many can be expected to speak up?”