Crash Test Dummies

Crash test dummie reading "Crash Testing for Dummies"No, this isn’t a post about the band. It’s about real crash testing, also known as progressive enhancement testing.

Of course, this had to be Another Progressive Enhancement Post, didn’t it!

Ever thought about why car manufacturers test their cars under crash conditions? Is it because people deliberately drive their cars into walls or ditches? No; not usually, anyway. They test the safety of their cars because we live in an unpredictable world where things go wrong, all the time. Exceptional circumstances surround us every single day. Often we experience near misses – sometimes we’re no so lucky.

In fact, things go wrong on the roads so often that we’ve created thousands laws and guidelines that try to minimise the possibility of these exceptional circumstances occurring. We have speed limits and training before anyone can get behind the wheel of a car. We have street lighting and pedestrian crossings, kerbstones and crash barriers.

Yet things still go wrong on our roads. Sometimes through carelessness and stupidity, sometimes though negligence. Sometimes the blame can’t really be applied to anyone in particular.

Car manufacturers invest in making their cars safe, so that when the unexpected happens – which, at some point, it will – the occupants and other road users are kept as safe as possible. We expect nothing less, and safety features are rightly promoted to help sell cars. That’s good; we should strive to create a safer world where possible.

Yet on the web it’s a different story. No-one believes that things never go wrong online. In fact in my experience there’s rarely a web browsing session where something didn’t break. Images fail to load, sites respond so slowly they appear to be down, JavaScript throws an error because two scripts from different 3rd parties can’t co-exist, web fonts don’t load and so text is invisible. The list of what could – and often does – go wrong when loading websites goes on, and on, and on.

What’s happening here? Do we as web developers, designers, business owners not realise the inherent unpredictability of the Internet? Do we not understand that the web was designed to be like this – to keep going even if all that is delivered to the browser is the HTML? No, many of us understand but sweep this reality under the carpet.

We are dummies.

We’re dummies because we chase after the latest JavaScript framework-du-jour without considering if it supports the core principles of the web. We overload our pages with unoptimised images and gargantuan CSS files generated by a pre-processor. We fail to deliver first and foremost what our users fundamentally require – the content.

We’re dummies because we leave the crash testing to our users – the very people we should be protecting from those exceptional circumstances! And then we have the gall to complain that they aren’t using the latest browser or operating system, or that their device is underpowered. Here’s the reality for you: even when browsing conditions are optimal, things still often go wrong.

So, in my opinion are JavaScript frameworks bad? Do I detest CSS pre-processors? Do I have an allergy to beautiful imagery online? No, of course not. It’s our use of these tools which I rail against. Enhance your pages as mush as you want, but start from the beginning. Semantic HTML content and forms.

Don’t be a dummy.

Sunday is Link Day!

Business / project management

“Case studies and experiments demonstrating the impact of performance optimization on user experience and business metrics.”:

It’s always the right time to revisit the beans-up-noses article:

Uncle Bob chimes in on Volkswagen:

“Welcome to Traction Stack, a curated directory of marketing resources from six years of research for Traction, the bestselling book that helps businesses and projects of all kinds get traction.”:

Prevent feature creep:

How to avoid personalisation project pitfalls:


Google tells business leaders not to concentrate on mobile apps:

And the stats show that hoping your mobile app will become popular is like hoping you’ll win the lottery:

Case study on having push notifications in a web app:

A good overview of the different ways of implementing web apps for mobile:

Wait, what? Mobile browser traffic is 2X bigger than app traffic, and growing faster:

A publishing company abandons native apps:


From pages to patterns – practical tips for moving to modular design:

Lovely UI: a collection of mobile UI elements:

Loads of responsive navigation examples:

Not sure if I’ve linked to this Designing for Performance book; if not I apologise:

Using web fonts the best way: design principles:

Even the U.S. government has a style guide now:

Design thinking comes of age:

Web field manual – lots of good design resources:


Adding custom performance metrics:

Transcript and slides for Scott Jehl’s talk “Delivering Responsibly”:

Fantastic idea – Facebook will slow down their network every Tuesday so employees can experience the web as most of the world does:

The ad industry is starting to realise they are a big part of the performance problem:

Consumers still value performance over content:

Zeldman, the godfather of the web, reflects on performance over the years:

Great front-end performance primer for full-stack (i.e. back-end) devs:

Calculate a performance budget:

Web font anti-patterns:


Ever wondered what screen readers actually sound like? Here:

Accessibility wins – showcasing good accessibility:

Using the tabindex attribute:

A11y Rocks! An album for accessibility:

Simple guide to web accessibility testing:

Super-quick accessibility testing – just add a CSS file:

Progressive enhancement

Jake Archibald on implementing modern progressive enhancement:

Flipkart changed from having a native app to a progressive website:

Building an offline page for the Guardian:

There are no “buts” in progressive enhancement (slides):

Jason Garber bangs on about it. You must be getting the message by now, yes?

Good collection of resources:

A big deal: Google advocates progressive enhancement to help with SEO:

Resources, tools, libraries, all that good stuff

Bing have a mobile friendliness checker:

There’s a whole new post-CMS world out there:

“The one-stop place to find the information and tools you need to help you learn, build, and move the web forward.”:

Fantastic interactive site showcasing Firefox’s dev tools:

See who’s tracking you online with this Firefox add-on:

Firefox also have a really useful screenshot command:

The search engine for source code: (limited results, but I quickly found a site using one of my Open Source libraries)

Load testing for websites and APIs:

An image comparison tool, can be put into a build process to check for visual regression:

Passwordless authentication:

Lots of documentation in one place:

Geek life

What’s that? A browser API for taking payments? Yes please:

New HTML elements proposed: <panel> and <panelset>:

A think-piece on the changing form of the browser:

Technical debt: more than just code:

FLIF – free lossless image format:

HTTP is obsolete. It’s time for the distributed, permanent web:

Google is 2 billion lines of code, in one repository:

Designing for accountability, designing for broken-ness:


Guidelines on implementing REST, from the NSA (TL;DNR: put a back-door in it for us … not really :0):

The Terence McGhee Software Ninja Class Hierarchy:

Uncle Bob on making things future proof:

Is programming poetry?

Who Dictates Software Quality: Client or Coder?:

Front-end developer handbook:

The configuration complexity clock:

Programming sucks:


Experiments from Jen Simmons:

Create and maintain style guides using CSS comments:

Nice example of a generic CSS system:

Making the cascade your friend:

Free e-book – transforms in CSS by Eric Meyer:

Flexbox cheatsheet:


Some useful JavaScript utilities, including a C#-like stringFormat:

Making a site work offline with Service Worker:

Using the oninput event handler with onkeyup/onkeydown as its fallback: (note to self: do this)

Stats on the performance of different JavaScript frameworks on mobile devices: (I don’t hide the fact I’m unconvinced by the current obsession with frameworks)

Content aware image cropping:

The definitive source of the best JavaScript libraries, frameworks, and plugins.:

Copy text to the users clipboard:

12 rules for professional JavaScript:

The looping evolution:

Write a flowchart in text, see it instantly updated:

And finally…

Convert images to LEGO:

The wah wah machine. If this doesn’t make you smile you have no soul:

Like maps? Go down a mappy rabbit hole:

Magic playlist – song suggestions based on what you like:

Visualise events in history (powered by Wikipedia):

A new way to choose what to read next:

Wednesday is Link Day!

Business / Working Life

Data is not an asset, it’s a liability:

Strategic procrastination:

Putting on the shipping goggles: (if you’re not a regular reader of Signal vs Noise then you should be)

Reduce the distance between the people who make decisions about the product and the people who build the product:

Everything is broken:

Fluid coupling: When exactly did enterprises become late adopters of technology?

Preparing organisations to become design-infused:

New, responsive design reduces bounce rate at by 37%:


Little Big Details: taking inspiration from the little details that make designs great:

Predictive personas: quote: ‘…the question they should be asking themselves isn’t, “If I interviewed a user, would this describe her?” The question should be, “If I found a person like this, would she become a user?”’

Forget about the mobile Internet:

The style guide: (other examples available on

Style guide from Salesforce:

Improving the checkout experience with animations: (but read the article below…)

Design safer animation for motion sensitivity:

Design patterns:

Front-end principles for designers:

The language of modular design:

How modern web design works:

Progressive enhancement / Performance

Bruce Lawson’s talk “Ensuring a performant web for the next billion people”: (Opera Mini is a popular browser for those with low-powered and low-bandwidth devices)

Aaron Gustafson with a timely reminder that we don’t really control our web pages:

Jeremy Keith’s presentation on progressive enhancement from May: (video and full transcript)

Preloading, prefetching, prebrowsing:

Embracing the network: modern techniques for building resilient front ends: deck, no video published yet)

A beginners guide to website speed optimisation:

User experience / Usability / Accessibility

The psychological speed of mobile interfaces: (this is much the same as “perceived performance” which I bang on about)

The device context continuum – where does the common device context continuum start and end? (hint: it doesn’t)

Hello, my name is <Error>:

Living with bull:

How to write an error message:

Visual ARIA bookmarklet:


Fantastic introductory article about JavaScript promises:

Learning JavaScript in 2015 (from scratch):

Learn JavaScript essentials:

Really interesting look at why SoundCloud started using microservices, by their director of engineering:

5 questions every unit test must answer:

Package built on PhantomJS to generate screenshots at different sizes:

6 tips for Chrome devtools:

Client-side MVC is not a silver bullet:


Free e-book from Smashing Magazine:

Fill Murray: placeholder images of Bill Murray:

And finally…

Old maps:

Interactive cubic Bezier curve editor (more fun than it sounds):

Big list of naughty strings:

The tough truth of reality

I make no secret of the fact I’m a huge progressive enhancement believer. The fundamental reason why I believe the vast majority of web sites (yes, and web apps) should be written using progressive enhancement principles is that we just don’t know how they will be accessed.

We live in a time where many of us have powerful multi-core computers in our pockets, ridiculously fast Internet connections, high resolution screens, advanced web browsers supporting the latest web technologies. But even if we are one of those luck few, things go wrong.

Networks drop packets, servers go down, DNS fails. Resources on pages (most notably JavaScript) can fail to load or fail to run because of all manner of errors – both within and outside our control. Why would you not want to build your site in such a way that makes it as robust as possible?

This is how many developers believe the modern world looks:


The vertical axis is the capabilities of networks, devices and browsers. The horizontal access is time. As time goes on networks, devices and browsers get better, faster, more fully-featured. That’s true, these things do make progress.

But this belief gives developers a false sense of security, thinking they don’t need to worry about the same things they worried about in the past: crappy network connections, devices with hardly any RAM, browsers that don’t support modern JavaScript APIs etc. They put their trust in The Blessed Void Of Obsolescence.

But the harsh reality is more like this:


We should think about the massive possible spectrum of circumstances under which a user could interact with our sites.

Because even with a modern device things still go wrong. A user with the latest version of Google Chrome will get frustrated if your site doesn’t work because a CDN fails to deliver a crucial JavaScript file. All they will know is that your site doesn’t work.

Progressive enhancement is not about “what if users turn JavaScript off” but “what happens when the page is loaded in sub-optimal circumstances”.

Wednesday is Link Day

A super bumper jumbo crop for you :0)


Interface writing – code for humans:

The best interface is no interface:

Making companies competitive by expanding design’s role: (more UIE goodness)

Style guides best practices, a presentation by Brad Frost:

Wonderful presentation by Jared Spool on building delightful UX:

Performance and progressive enhancement

The Guardian reports on advertising affecting web page performance (if you can find the article amongst all the ads…):

And CNN Money is also talking about web performance:

Progressive enhancement, by the government:

Don’t add the clever thing:

10 ways to minimise reflows:

Designing with progressive enhancement (talk, slides):

Cache efficiency study by Facebook:

Offline first – the final frontier?:

The web’s cruft problem:

There was a lot of discussion about progressive enhancement following a couple of conferences in June, here are the best articles I saw about it:

Assumptions (by Remy Sharp):

Baseline (by my man-crush Jeremy Keith):

Thriving in unpredictability (by Tim Kadlec):

Availability (by Stuart Langridge): (also see


WAI-ARIA screen reader compatibility tables:

The great and good of the accessibility world are putting together an Album for Accessibility:

Styling forms accessibly:

The business case for (accessible) issue prevention:

The accessibility cheatsheet:

Tools and resources

Control and manage real smartphones from your browser:

Awesome geek podcasts! Awesome!

Lightweight, standalone JavaScript input masking:

Get started with CSS (a free course by Russ Weakley, CSS guru):

New W3C mobile checker tool:

Free book on JavaScript:

And another one:

Know your HTTP (posters to print):

Performance tools, a good list by CSS Tricks:

Accessibility testing plugin for Chrome:

Automated accessibility testing:

Accessibility visualisation toolkit:

New performance tools in Firefox:


Everyone knows about, so here’s

.Net Framework 4.6 is coming, with lots of goodies:

Yet Another Weekly Email:

Developer or user convenience, who should pay? Good stuff from Aaron Gustafson:

A website for code reviews:

The boring front-end developer:

Layers and legacies: a warning about old code:

Comparisons between software and medicine:

The whole of JavaScript in one picture:

.Net extensions galore:

Useful JavaScript debugging tips you didn’t know:

No good can come of bad code:

The role of a senior developer:

And finally…

You know (and hopefully love), so check out

An old-skool synth in JavaScript:

Finally, a solution to providing comments without feeding the trolls:

3D maps of every London Underground station:

Stories about the internet (more interesting than it sounds):

The untold story of the invention of the game cartridge:

For the pedants among you: