Wednesday, January 19th, 2022
Thursday, November 18th, 2021
Thursday, November 4th, 2021
Writing on web.dev
Chrome Dev Summit kicked off yesterday. The opening keynote had its usual share of announcements.
There was quite a bit of talk about privacy, which sounds good in theory, but then we were told that Google would be partnering with “industry stakeholders.” That’s probably code for the kind of ad-tech sharks that have been making a concerted effort to infest W3C groups. Beware.
But once Una was on-screen, the topics shifted to the kind of design and development updates that don’t have sinister overtones.
My favourite moment was when Una said:
We’re also partnering with Jeremy Keith of Clearleft to launch Learn Responsive Design on web.dev. This is a free online course with everything you need to know about designing for the new responsive web of today.
This is what’s been keeping me busy for the past few months (and for the next month or so too). I’ve been writing fifteen pieces—or “modules”—on modern responsive web design. One third of them are available now at web.dev/learn/design:
The rest are on their way: typography, responsive images, theming, UI patterns, and more.
I’ve been enjoying this process. It’s hard work that requires me to dive deep into the nitty-gritty details of lots of different techniques and technologies, but that can be quite rewarding. As is often said, if you truly want to understand something, teach it.
Oh, and I made one more appearance at the Chrome Dev Summit. During the “Ask Me Anything” section, quizmaster Una asked the panelists a question from me:
Given the court proceedings against AMP, why should anyone trust FLOC or any other Google initiatives ostensibly focused on privacy?
(Thanks to Jake for helping craft the question into a form that could make it past the legal department but still retain its spiciness.)
The question got a response. I wouldn’t say it got an answer. My verdict remains:
I’m not sure that Google Chrome can be considered a user agent.
The fundamental issue is that you’ve got a single company that’s the market leader in web search, the market leader in web advertising, and the market leader in web browsers. I honestly believe all three would function better—and more honestly—if they were separate entities.
Monopolies aren’t just damaging for customers. They’re damaging for the monopoly too. I’d love to see Google Chrome compete on being a great web browser without having to also balance the needs of surveillance-based advertising.
Thursday, August 26th, 2021
Sunday, August 22nd, 2021
Friday, July 16th, 2021
Friday, July 2nd, 2021
Friday, April 30th, 2021
Tuesday, April 20th, 2021
Saturday, April 3rd, 2021
Principles and the English language
One of my roles at Clearleft is “content buddy.” If anyone is writing a talk, or a blog post, or a proposal and they want an extra pair of eyes on it, I’m there to help.
I think a lot about design principles for the web. The two principles I keep coming back to are the robustness principle and the principle of least power.
When it comes to words, the guide that I return to again and again is George Orwell, specifically his short essay, Politics and the English Language.
Towards the end, he offers some rules for writing.
- Never use a metaphor, simile, or other figure of speech which you are used to seeing in print.
- Never use a long word where a short one will do.
- If it is possible to cut a word out, always cut it out.
- Never use the passive where you can use the active.
- Never use a foreign phrase, a scientific word, or a jargon word if you can think of an everyday English equivalent.
- Break any of these rules sooner than say anything outright barbarous.
These look a lot like design principles. Not only that, but some of them look like specific design principles. Take the robustness principle:
Be conservative in what you send, be liberal in what you accept.
That first part applies to Orwell’s third rule:
If it is possible to cut a word out, always cut it out.
Be conservative in what words you send.
Then there’s the principle of least power:
Choose the least powerful language suitable for a given purpose.
Compare that to Orwell’s second rule:
Never use a long word where a short one will do.
That could be rephrased as:
Choose the shortest word suitable for a given purpose.
Or, going in the other direction, the principle of least power could be rephrased in Orwell’s terms as:
Never use a powerful language where a simple language will do.
Oh, I like that! I like that a lot.
Tuesday, March 9th, 2021
March 2020 was the month when the coronavirus really hit the fan for much of Europe and North America.
It’s now March 2021. People are understandably thinking about this time last year. Tantek wrote about this anniversary:
We reached our disembarkation stop and stepped off. I put my mask away. We hugged and said our goodbyes. Didn’t think it would be the last time I’d ride MUNI light rail. Or hug a friend without a second thought.
The next morning, before travelling back to Brighton (where we’ve been ever since), we had breakfast together in a nice café.
Eating toast with @Rem.
Usually when I post toast updates, it’s a deliberate attempt to be banal. It harks back to the early criticism of blogging as just being people sharing what they’re having for lunch.
But now I look back at that little update and it seems like a momentous event worth shouting from the rooftops. Breaking bread with a good friend? What I wouldn’t give to do that again!
I can’t wait until I can be together with my friends again, doing utterly ordinary things together. To “wallow in the habitual, the banal” as the poet Patrick Kavanagh put it.
I miss hanging out with Tantek. I miss hanging out with Remy. I miss hanging out.
But I’m looking forward to being in a very different situation in March 2022, when I can look back at this time as belonging to a different era.
Between now and then, there’ll be a gradual, bumpy, asynchronous reintroduction of the everyday social pleasures. I won’t take them for granted. I’ll be posting about toast and other everyday occurrences “wherever life pours ordinary plenty.”
Thursday, February 25th, 2021
Today is my birthday. I am one twentieth of a millenium old. I am eighteen and a quarter kilo-days old. I am six hundred months old. I am somewhere in the order of 26.28 mega-minutes old. I am fifty years old.
The reflected light of the sun that left Earth when I was born has passed Alpha Cephei and will soon reach Delta Aquilae. In that time, our solar system has completed 0.00002% of its orbit around the centre of our galaxy.
I was born into a world with the Berlin Wall. That world ended when I turned eighteen.
Fifty years before I was born, the Irish war of independence was fought while the world was recovering from an influenza pandemic.
Fifty years after I was born, the UK is beginning its post-Brexit splintering while the world is in the middle of a coronavirus pandemic.
In the past few years, I started to speculate about what I might do for the big Five Oh. Should I travel somewhere nice? Or should I throw a big party and invite everyone I know?
Neither of those are options now. The decision has been made for me. I will have a birthday (and subsequent weekend) filled with the pleasures of home. I plan to over-indulge with all my favourite foods, lovingly prepared by Jessica. And I want the finest wines available to humanity—I want them here and I want them now.
I will also, inevitably, be contemplating the passage of time. I’m definitely of an age now where I’ve shifted from “explore” to “exploit.” In other words, I’ve pretty much figured out what I like doing. That is in contrast to the many years spent trying to figure out how I should be spending my time. Now my plans are more about maximising what I know I like and minimising everything else. What I like mostly involves Irish traditional music and good food.
So that’s what I’ll be doubling down on for my birthday weekend.
Sunday, February 7th, 2021
I have mostly been inside one building for the best part of a year. I have avoided going inside of any other buildings during that time. I have made the occasional foray into shop buildings but rarely and briefly.
Last week I went into another building. But it was probably the safest building to enter. I was there to give blood. Masking and distancing were the order of the day.
I try to give blood whenever I can. Before The Situation, my travelling lifestyle made this difficult. It was tricky to book in advance when I didn’t know if I’d be in the country. And sometimes the destinations I went to prevented me from giving blood on my return.
Well, that’s all changed! For the past year I’ve been able to confidently make blood donation appointments knowing full well that I wasn’t going to be doing any travelling.
On video calls recently, a few people have remarked on how long my hair is now. I realised that in the past year I’ve gone to give blood more often than I’ve been to the hairdresser. Three nill, if you’re keeping score.
But why not do both? A combined haircut and blood donation.
Think about it. In both situations you have to sit in a chair doing nothing for a while.
I realise that the skillsets don’t overlap. Either barbers would need to be trained in the art of finding a vein or health workers would need to be trained in the art of cutting hair while discussing last night’s match and whether you’re going anywhere nice this year.
Anything that encourages more blood donations is good in my books. Perhaps there are other establishments that offer passive sitting activities that could be combined with the donation process.
Nail salons? You could get one hand manicured while donating blood from the other arm.
Libraries and book shops? Why not have a combined book-reading and blood donation? Give a pint and get a signed copy.
Airplanes? You’re stuck in a seat for a few hours anyway. Might as well make it count.
Dentists? Maybe that’s too much multitasking with different parts of the body.
But what about dentistry on airplanes? Specifically the kind of dentistry that requires sedation. The infrastructure is already in place: there are masks above every seat. Shortly after take off, pull the mask towards you and let the nitrous oxide flow. Even without any dentistry, that sounds like a reasonable way to make the hours stuck in an airplane just fly by.
None of us are going to be taking any flights any time soon, but when we do …build back better, I say.
In the meantime, give blood.
Monday, January 4th, 2021
I really, really missed speaking at conferences in 2020. I managed to squeeze in just one meatspace presentation before everything shut down. That was in Nottingham, where myself and Remy reprised our double-bill talk, How We Built The World Wide Web In Five Days.
That was pretty much all the travelling I did in 2020, apart from a joyous jaunt to Galway to celebrate my birthday shortly before the Nottingham trip. It’s kind of hilarious to look at a map of the entirety of my travel in 2020 compared to previous years.
Mind you, one of my goals for 2020 was to reduce my carbon footprint. Mission well and truly accomplished there.
But even when travel was out of the question, conference speaking wasn’t entirely off the table. I gave a brand new talk at An Event Apart Online Together: Front-End Focus in August. It was called Design Principles For The Web and I’ve just published a transcript of the presentation. I’m really pleased with how it turned out and I think it works okay as an article as well as a talk. Have a read and see what you think (or you can listen to the audio if you prefer).
Giving a talk online is …weird. It’s very different from public speaking. The public is theoretically there but you feel like you’re just talking at your computer screen. If anything, it’s more like recording a podcast than giving a talk.
Luckily for me, I like recording podcasts. So I’m going to be doing a new online talk this year. It will be at An Event Apart’s Spring Summit which runs from April 19th to 21st. Tickets are available now.
I have a pretty good idea what I’m going to talk about. Web stuff, obviously, but maybe a big picture overview this time: the past, present, and future of the web.
Time to prepare a conference talk.
Wednesday, December 16th, 2020
Seeing as my personal brand could be summed up “so late to the game that the stadium has been demolished”, I decided to start a podcast in 2020. It’s the podcast of my agency, Clearleft, and it has been given the soaringly imaginative title of The Clearleft Podcast. I’m really pleased with how the first season turned out. I’m also really pleased with the website I put together for it.
The website isn’t very big, though it will grow with time. I had a think about what the build process for the site should be and after literally seconds of debate, I settled on a build process of none. Zero. Nada.
This turned out to be enormously liberating. It felt very hands-on to write the actual HTML and CSS that will be delivered to end users, without any mediation. I felt like I was getting my hands into the soil of the site.
CSS has evolved so much in recent years—with features like
Don’t get me wrong—I totally understand why complicated pipelines are necessary for complicated websites. If you’re part of a large team, you probably need to have processes in place so that everyone can contribute to the codebase in a consistent way. The more complex that codebase is, the more technology you need to help you automate your work and catch errors before they go live.
But that set-up isn’t appropriate for every website. And all those tools and processes that are supposed to save time sometimes end up wasting time further down the road. Ever had to revisit a project after, say, six or twelve months? Maybe you just want to make one little change to the CSS. But you can’t because a dependency is broken. So you try to update it. But it relies on a different version of Node. Before you know it, you’re Bryan Cranston changing a light bulb. You should be tweaking one line of CSS but instead you’re battling entropy.
Whenever I’m tackling a problem in front-end development, I like to apply the principle of least power: choose the least powerful language suitable for a given purpose. A classic example would be using a simple HTML
button element instead of trying to recreate all the native functionality of a button using a
Instead of reaching for all-singing all-dancing toolchain by default, I’m going to start with a boring baseline. If and when that becomes too painful or unwieldy, then I’ll throw in a task manager. But every time I add a dependency, I’ll be limiting the lifespan of the project.
My new year’s resolution for 2021 will be to go on a diet. No more weighty
Wednesday, July 22nd, 2020
Wildlife Photographer Of The Year on the Clearleft podcast
This one is a bit different. Whereas previous episodes focused on specific topics—design systems, service design—this one is a case study. And, wow, what a case study! The whole time I was putting the episode together, I kept thinking “The team really did some excellent work here.”
I’m not sure what makes more sense: listen to the podcast episode first and then visit the site in question …or the other way around? Maybe the other way around. In which case, be sure to visit the website for Wildlife Photographer Of The Year.
This episode of the podcast ended up being half an hour long. It should probably be shorter but I just couldn’t bring myself to cut any of the insights that Helen, James, Chris, and Trys were sharing. I’m probably too close to the subject matter to be objective about it. I’m hoping that others will find it equally fascinating to hear about the process of the project. Research! Design! Dev! This has got it all.
I had a lot of fun with the opening of the episode. I wanted to create a montage effect like the scene-setting opening of a film that has overlapping news reports. I probably spent far too long doing it but I’m really happy with the final result.
And with this episode, we’re halfway through the first season of the podcast already! I figured a nice short run of six episodes is enough to cover a fair bit of ground and give a taste of what the podcast is aiming for, without it turning into an overwhelming number of episodes in a backlog for you to catch up with. Three down and three to go. Seems manageable, right?
Anyway, enough of the backstory. If you haven’t already subscribed to the Clearleft podcast, you should do that. Then do these three things in whichever order you think works best:
Friday, July 17th, 2020
Thursday, July 16th, 2020
The pushback I get usually takes the form of “Well, that approach is fine for websites, but it wouldn’t work something like Gmail.”
It’s always Gmail. Which is odd. Because if you really wanted to flummox me with a product or service that defies progressive enhancement, I’d have a hard time with something like, say, a game (although it would be pretty cool to build a text adventure that’s progressively enhanced into a first-person shooter). But an email client? That would work.
Identify core functionality.
Read emails. Write emails.
Make that functionality available using the simplest possible technology.
HTML for showing a list of emails, HTML for displaying the contents of the HTML, HTML for the form you write the response in.
Now add all the enhancements that improve the experience—keyboard shortcuts; Ajax instead of full-page refreshes; local storage, all that stuff.
Progressive enhancement isn’t about making a choice between using simpler more robust technologies or using more advanced features; it’s about using simpler more robust technologies and then using more advanced features. Have your cake and eat it.
Fortunately I no longer need to run this thought experiment to imagine what it would be like if something like Gmail were built with a progressive enhancement approach. That’s what HEY is.
HEY’s UI is 100% HTML over the wire. We render plain-old HTML pages on the server and send them to your browser encoded as text/html. No JSON APIs, no GraphQL, no React—just form submissions and links.
If you think that sounds like the web of 25 years ago, you’re right! Except the HEY front-end stack progressively enhances the “classic web” to work like the “2020 web,” with all the fidelity you’d expect from a well-built SPA.
See? It’s not either resilient or modern—it’s resilient and modern. Have your cake and eat it.
And yet this supremely sensible approach is not considered “modern” web development:
The architecture astronauts who, for the past decade, have been selling us on the necessity of React, Redux, and megabytes of JS, cannot comprehend the possibility of building an email app in 2020 with server-rendered HTML.
HEY isn’t perfect by any means—they’ve got a lot of work to do on their accessibility. But it’s good to have a nice short answer to the question “But what about something like Gmail?”
When Ethan Marcotte demonstrated the power of responsive design, it was met with resistance. “Sure, a responsive design might work for a simple personal site but there’s no way it could scale to a large complex project.”
Then the Boston Globe launched its responsive site. Microsoft made their homepage responsive. The floodgates opened again.
It’s a similar story today. “Sure, progressive enhancement might work for a simple personal site, but there’s no way it could scale to a large complex project.”
The floodgates are ready to open. We just need you to create the poster child for resilient web design.
It looks like HEY might be that poster child.
I have to wonder if its coincidence or connected that this is a service that’s also tackling ethical issues like tracking? Their focus is very much on people above technology. They’ve taken a human-centric approach to their product and a human-centric approach to web development …because ultimately, that’s what progressive enhancement is.
Wednesday, June 17th, 2020