Hard to break
Tags: resilience, brittleness, invisible, frontend
Published: 2020-05-22 09:48:13

---
title: Hard to break
published: true
date: 2020-05-18 09:10:50 UTC
tags: resilience,brittleness,invisible,frontend
canonical_url: https://adactio.com/journal/16910
---

I keep thinking about some feedback that [Cassie](https://www.cassie.codes/) received recently.

She had delivered the front-end code for a project at [Clearleft](https://clearleft.com/), and—this being [Cassie](https://clearleft.com/about/team/cassie-evans) we’re talking about—the code was rock solid. The client’s Quality Assurance team came back with the verdict that it was “hard to break.”

Hard to break. I love that. That might be the best summation I’ve heard for describing [resilience on the web](https://resilientwebdesign.com/).

If there’s a corollary to resilient web design, it would be brittle web design. In a piece completely unrelated to web development, [Jamais Cascio describes brittle systems](https://medium.com/@cascio/facing-the-age-of-chaos-b00687b1f51d):

> When something is brittle, it’s susceptible to sudden and catastrophic failure.

That sounds like an inarguably bad thing. So why would anyone end up building something in a brittle way? Jamais Cascio continues:

> Things that are brittle look strong, may even _be_ strong, until they hit a breaking point, then everything falls apart.

Ah, there’s the rub! It’s not that brittle sites don’t work. They work just fine …until they don’t.

> Brittle systems are solid until they’re not. **Brittleness is illusory strength**. Things that are brittle are non-resilient, sometimes even anti-resilient — they can make resilience more difficult.

Kilian Valkhof makes the same point when it comes to front-end development. [For many, accessibility is an unknown unknown](https://kilianvalkhof.com/2020/accessibility/accessibility-is-an-unknown-unknown/):

> When you start out it’s you, notepad and a browser against the world. You open up that notepad, and you type
> 
> `<div onclick="alert('hello world');">Click me!</div>`
> 
> You fire up your browser, you click your div and …it works! It just works! Awesome. You open up the devtools. No errors. Well done! Clearly you did a good job. On to the next thing.

At the surface level, there’s no discernable difference between a resilient solution and a brittle one:

> For all sorts of reasons, both legitimate and, as always, weird browser legacy reasons, a clickable `div` will mostly work. Well enough to fool someone starting out anyway.
> 
> If everything works, how would they know it kinda doesn’t?

Killian goes on to suggest ways to try to make this kind of hidden brittleness more visible.

> Furthermore we could envision a browser that is much stricter when developing.

This something I touched on when I was talking about web performance with Gerry [on his podcast](https://www.thisishcd.com/episodes/world-wide-waste-with-gerry-mcgovern/jeremy-keith-weve-ruined-the-web-heres-how-we-fix-it/):

> There’s a disconnect in the process we go through when we’re making something, and then how that thing is experienced when it’s actually on the web, which is dependent on network speeds and processing speeds and stuff.

I spend a lot of time wondering why so many websites are badly built. Sure, there’s a lot can be explained by [misaligned priorities](https://adactio.com/journal/16811). And it could just be an expression of [Sturgeon’s Law](https://en.wikipedia.org/wiki/Sturgeon%27s_law)—90% of websites are crap because 90% of everything is crap. But I’ve also come to realise that even though resilience is the antithesis to brittleness, they both share something in common: they’re invisible.

We have a natural bias towards what’s visible. Being committed to making sure something is beautiful to behold is, in some ways, the easy path to travel. But being committed to making sure something is also hard to break? That takes real dedication.