

Journal 2974 Links 9914 Articles 82 Notes 6992
Thursday, June 1st, 2023

Checked in at The Ancient Mariner. Lovely, lovely tunes! 🎶🎻 — with Jessica
Automate the CEOs - by Hamilton Nolan - How Things Work
Let’s be rational here. If I were to imagine a job that was a perfect candidate for replacement by AI, it would be one that consists of measurable tasks that can be learned—allocation of capital, creation and execution of market strategy, selection of candidates for top roles—and one that costs the company a shitload of money. In other words: executives.
The logic is sound. However…
The CEOs will be spared from automation not because they should be, but because they are making the decisions about who is spared from automation.
Reading City Of Illusions by Ursula K. Le Guin.

Wednesday, May 31st, 2023
Accessibility audits for all
It’s often said that it’s easier to make a fast website than it is to keep a website fast. Things slip through. If you’re not vigilant, performance can erode without you noticing.
It’s a similar story for other invisible but important facets of your website: privacy, security, accessibility. Because they’re hidden from view, you won’t be able to see if there’s a regression.
That’s why it’s a good idea to have regular audits for performance, privacy, security, and accessibility.
I wrote about accessibility testing a while back, and how there’s quite a bit that you can do for yourself before calling in an expert to look at the really gnarly stuff:
When you commission an accessibility audit, you want to make sure you’re getting the most out of it. Don’t squander it on issues that you can catch and fix yourself. Make sure that the bulk of the audit is being spent on the specific issues that are unique to your site.
I recently did an internal audit of the Clearleft website. After writing up the report, I also did a lunch’n’learn to share my methodology. I wanted to show that there’s some low-hanging fruit that pretty much anyone can catch.
To start with, there’s keyboard navigation. Put your mouse and trackpad to one side and use the tab
key to navigate around.
Caveat: depending on what browser you’re using, you might need to update some preferences for keyboard navigation to work on links. If you’re using Safari, go to “Preferences”, then “Advanced”, and tick “Press Tab to highlight each item on a web page.”
Tab around and find out. You should see some nice chunky :focus-visible
styles on links and form fields.
Here’s something else that anyone can do: zoom in. Increase the magnification to 200%. Everything should scale proportionally. How about 500%? You’ll probably see a mobile-friendly layout. That’s fine. As long as nothing is broken or overlapping, you’re good.
At this point, I reach for some tools. I’ve got some bookmarklets that do similar things: tota11y and ANDI. They both examine the source HTML and CSS to generate reports on structure, headings, images, forms, and so on.
These tools are really useful, but you need to be able to interpret the results. For example, a tool can tell you if an image has no alt
text. But it can’t tell you if an image has good or bad alt
text.
Likewise, these tools are great for catching colour-contrast issues. But there’s a big difference between a colour-contrast issue on the body copy compared to a colour-contrast issue on one unimportant page element.
I think that demonstrates the most important aspect of any audit: prioritisation.
Finding out that you have accessibility issues isn’t that useful if they’re all presented as an undifferentiated list. What you really need to know are which issues are the most important to fix.
By the way, I really like the way that the Gov.uk team prioritises accessibility concerns:
The team puts accessibility concerns in 2 categories:
- Theoretical: A question or statement regarding the accessibility of an implementation within the Design System without evidence of real-world impact.
- Evidenced: Sharing new research, data or evidence showing that an implementation within the Design System could cause barriers for disabled people.
The team will usually prioritise evidenced issues and queries over theoretical ones.
When I wrote up my audit for the Clearleft website, I structured it in order of priority. The most important things to fix are at the start of the audit. I also used a simple scale for classifying the severity of issues: low, medium, and high priority.
Thankfully there were no high-priority issues. There were a couple of medium-priority issues. There were plenty of low-priority issues. That’s okay. That’s a pretty good distribution.
If you’re interested, here’s the report I delivered…
Accessibility audit on clearleft.com
Colour contrast
There are a few issues with the pink colour. When it’s used on a grey background, or when it’s used as a background colour for white text, the colour contrast isn’t high enough.
The SVG arrow icon could be improved too.
Recommendations
Medium priority
- Change the pink colour universally to be darker. The custom property
--red
is currentlyrgb(234, 33, 90)
. Change it torgb(210, 20, 73)
(thanks, James!)
Low priority
- The SVG arrow icon currently uses
currentColor
. Consider hardcoding solid black (or a very, very dark grey) instead.
Images
Alt text is improving on the site. There’s reasonable alt text at the top level pages and the first screen’s worth of case studies and blog posts. I made a sweep through these pages a while back to improve the alt text but I haven’t done older blog posts and case studies.
Recommendations
Medium priority
- Make a sweep of older blog posts and case studies and fix alt text.
Low priority
- Images on the contact page have alt text that starts with “A photo of…” — this is redundant and can be removed.
Headings
The site is using headings sensibly. Sometimes the nesting of headings isn’t perfect, but this is a low priority issue. For example, on the contact page there’s an h1
followed by two h3
s. In theory this isn’t correct. In practice (for screen reader users) it’s not an issue.
Recommendations
Low priority
- On the home page, “UX London 2023” should probably be
h3
instead ofh1
. - On the case studies index page we’re currently using
h3
headings for the industry sector (“Charities”, “Education” etc.) but these should probably not be headings at all. On the blog index page we use a class “Tags” for a similar purpose. Consider reusing that pattern on the case studies index page. - On the about index page, “We’re driven to be” is an
h3
and the subsequent three headings areh2
s. Ideally this would be reversed: a singleh2
followed by threeh3
s.
Link text
Sometimes the same text is used for different links.
Recommendations
Low priority
- On the home page the text “Read the case study” is re-used for multiple links. It would be better if each link were different e.g. “Read about The Natural History Museum.”
Forms
The only form on the site is the newsletter sign-up form. It’s marked up pretty well: the input
has an associated label
, although a visible (clickable) label
would be better.
Tabbing order
The site doesn’t use JavaScript to mess with tabbing order for keyboard users. The source order of elements in the markup generally makes sense so all is good.
The focus styles are nice and clear too!
Structure
The site is using HTML landmark elements sensibly (header
, nav
, main
, footer
, etc.).
Future-first design thinking
If we’re serious about creating a sustainable future, perhaps we should change this common phrase from “Form follows Function” to “Form – Function – Future”. While form and function are essential considerations, the future, represented by sustainability, should be at the forefront of our design thinking. And actually, if sustainability is truly at the forefront of the way we create new products, then maybe we should revise the phrase even further to “Future – Function – Form.” This revised approach would place our future, represented by sustainability, at the forefront of our design thinking. It would encourage us to first ask ourselves, “What is the most sustainable way to design X?” and then consider how the function of X can be met while ensuring it remains non-harmful to people and the planet.
Tuesday, May 30th, 2023
Sure, the Succession finale was good, but hot damn, the University Challenge final was terrific!
TimeGuessr
Where and when were these photographs taken?
It’s like that Chronophoto game I linked to with an added dimension of location.
Our Maps Don’t Know Where You Are – The Markup
I wish more publishers and services took this approach to evaluating technology:
We scrutinize third-party services before including them in our articles or elsewhere on our site. Many include trackers or analytics that would collect data on our readers. These may be standard across much of the web, but we don’t use them.
First Experiments with View Transitions for Multi-page Apps
Some great ideas for view transitionts in here! Also:
If you look at any of the examples on a browser that does not support them, the pages still function just fine. The transitions are an extra that’s layered on top if and when your browser supports them. Another concrete example of progressive enhancement in practice.
Five questions
In just a couple of weeks, I’ll be heading to Bristol for Pixel Pioneers. The line-up looks really, really good …with the glaring exception of the opening talk, which I’ll be delivering. But once that’s done, I’m very much looking forward to enjoying the rest of the day’s talks.
There are still tickets available if you fancy joining me.
This will be my second time speaking at this conference. I spoke at the inaugural conference back in 2017 when I gave a talk called Evaluating Technology. This time my talk is called Declarative Design.
A few weeks back, Oliver asked me some questions about my upcoming talk. I figured I’d post my answers here…
Welcome back to Pixel Pioneers! You return with another keynote - how do you manage to stay so ever-enthusiastic about designing for the web?
Well, I’d say my enthusiasm is mixed with frustration. And that’s always been the case. Just as I’ve always found new things that excite me about the World Wide Web, there are just as many things that upset me.
But that’s okay. Both forces can be motivating. When I find myself writing a blog post or preparing a talk, the impetus might be “This is so cool! Check this out!” or it might be “This is so maddening! What’s happening!?” …or perhaps a mix of both.
But to answer your question, the World Wide Web never stays still so there’s always something to get excited about. Equally, the longer the web exists, the more sense it makes to examine the fundamental bedrock—HTML, accessibility,progressive enhancement—and see how they’re just as important as ever. And that’s also something to get excited about!
Without too many spoilers, what can we expect to take away from your talk?
I’m hoping to provide people with a lens that they can use to examine their tools, processes, and approaches to designing for the web. It’s a fairly crude lens—it divides the world into a binary split that I’ve borrowed from the world of programming; imperative and declarative languages. But it’s a surprisingly thought-provoking angle.
Along the way I’ll also be pointing out some of the incredible things that we can do with CSS now. In the past few years there’s been an explosion in capabilities.
But this won’t be a code-heavy presentation. It’s mostly about the ideas. I’ll be referencing some projects by other people that I’m very excited by.
What other web design and development tools, techniques and technologies are you currently most excited about?
Outside of the world of CSS—which is definitely where a lot of the most exciting developments are happening—I’m really interested in the View Transitions API. If it delivers on its promise, it could be a very useful nail in the coffin of uneccessary single page apps. But I’m a little nervous. Right now the implementation only works for single page apps, which makes it an incentive to use that model. I really, really hope that the multipage version ships soon.
But honestly, I probably get most excited about discovering some aspect of HTML that I wasn’t aware of. Even after all these years the language can still surprise me.
And on the flipside, what bugs you most about the web at the moment?
How much time have you got?
Seriously though, the thing that’s really bugged me for the past decade is the increasing complexity of “modern” frontend development when it isn’t driven by user needs. Yes, I’m talking about JavaScript frameworks like React and the assumption that everything should be a single page app.
Honestly, the mindset became so ubiquitous that I felt like I must be missing something. But no, the situation really has spiralled out of control, much to the detriment of end users.
Luckily we’re starting to see the pendulum swing back. The proponents of trickle-down developer convenience are having to finally admit that it’s bollocks.
I don’t care if the move back to making websites is re-labelled as “isomorphic server-rendered multi-page apps.” As long as we make sensible architectural decisions, that’s all that matters.
What’s next, Jeremy?
Right now I’m curating the line-up for this year’s UX London conference which is the week after Pixel Pioneers. As you know, conference curation is a lot of work, but it’s also very rewarding. I’m really proud of the line-up.
It’s been a while since the last season of the Clearleft podcast. I hope to remedy that soon. It takes a lot of effort to make even one episode, but again, it’s very rewarding.
Jack Franklin – Abstractions, complexities and off-ramps – All Day Hey! 2023 - YouTube
This is a terrific talk by Jack on how to deal with the tooling involved in modern front-end development:
- Maintaining control,
- Dependency awareness,
- Lean on browser primitives,
- Have an exit strategy.
“Artificial Intelligence & Humanity,” an article by Dan Mall
AI is great anything quantity-related and bad and anything quality-related.
Sensible thinking from Dan here, that mirrors what we’re thinking at Clearleft.
In other words, it leans heavily on averages; the closer the training data matches an average, the higher degree of confidence that the result is more “correct,” or at least desirable.
The problem is that this is the polar opposite of what we consider creativity to be. Creativity isn’t about averages. It’s about the outliers, sometimes the one thing that’s different than all the rest.
Sunday, May 28th, 2023

Getting ready to cèilidh’n’roll!
Saturday, May 27th, 2023
404 Page Not Found | Kate Wagner
Considering the average website is less than ten years old, that old warning from your parents that says to “be careful what you post online because it’ll be there forever” is like the story your dad told you about chocolate milk coming from brown cows, a well-meant farce. On the contrary, librarians and archivists have implored us for years to be wary of the impermanence of digital media; when a website, especially one that invites mass participation, goes offline or executes a huge dump of its data and resources, it’s as if a smallish Library of Alexandria has been burned to the ground. Except unlike the burning of such a library, when a website folds, the ensuing commentary from tech blogs asks only why the company folded, or why a startup wasn’t profitable. Ignored is the scope and species of the lost material, or what it might have meant to the scant few who are left to salvage the digital wreck.
Better Living Through Algorithms by Naomi Kritzer : Clarkesworld Magazine – Science Fiction & Fantasy
This short story feels like a prequel to Maneki Neko.
Thursday, May 25th, 2023

Checked in at The Lord Nelson Inn. Last Thursday of the month — with Jessica
Wednesday, May 24th, 2023

Checked in at Jolly Brewer. Wednesday night session — with Jessica
Generative AI: What You Need To Know
Generative AI: What You Need To Know is a free resource that will help you develop an AI-bullshit detector.
You can read all the cards on one page, print them out, or print to PDF.

I’ll be part of the Pooka Cèilidh Band providing music for the Candlelight Cèilidh this Sunday.
There’ll be all sorts of witchy shit.
https://www.brightonfringe.org/events/the-candlelight-ceilidh/
Add view transitions to your website
I must admit, when Jake told me he was leaving Google, I got very worried about the future of the View Transitions API.
To recap: Chrome shipped support for the API, but only for single page apps. That had me worried:
If the View Transitions API works across page navigations, it could be the single best thing to happen to the web in years.
If the View Transitions API only works for single page apps, it could be the single worst thing to happen to the web in years.
Well, the multi-page version still hasn’t yet shipped in Chrome stable, but it is available in Chrome Canary behind a flag, so it looks like it’s almost here!
Robin took the words out of my mouth:
Anyway, even this cynical jerk is excited about this thing.
Are you the kind of person who flips feature flags on in nightly builds to test new APIs?
Me neither.
But I made an exception for the View Transitions API. So did Dave:
I think the most telling predictor for the success of the multi-page View Transitions API – compared to all other proposals and solutions that have come before it – is that I actually implemented this one. Despite animations being my bread and butter for many years, I couldn’t be arsed to even try any of the previous generation of tools.
Dave’s post is an excellent step-by-step introduction to using view transitions on your website. To recap:
Enable these two flags in Chrome Canary:
chrome://flags#view-transition
chrome://flags#view-transition-on-navigation
Then add this meta
element to the head
of your website:
<meta name="view-transition" content="same-origin">
You could stop there. If you navigate around your site, you’ll see that the navigations now fade in and out nicely from one page to another.
But the real power comes with transitioning page elements. Basically, you want to say “this element on this page should morph into that element on that page.” And when I say morph, I mean morph. As Dave puts it:
Behind the scenes the browser is rasterizing (read: making an image of) the before and after states of the DOM elements you’re transitioning. The browser figures out the differences between those two snapshots and tweens between them similar to Apple Keynote’s “Magic Morph” feature, the liquid metal T-1000 from Terminator 2: Judgement Day, or the 1980s cartoon series Turbo Teen.
If those references are lost on you, how about the popular kids book series Animorphs?
Some classic examples would be:
- A thumbnail of a video on one page morphs into the full-size video on the next page.
- A headline and snippet of an article on one page morphs into the full article on the next page.
I’ve added view transitions to The Session. Where I’ve got index pages with lists of titles, each title morphs into the heading on the next page.
Again, Dave’s post was really useful here. Each transition needs a unique name, so I used Dave’s trick of naming each transition with the ID of the individual item being linked to.
In the recordings section, for example, there might be a link like this on the index page:
<a href="/recordings/7812" style="view-transition-name: recording-7812">The Banks Of The Moy</a>
Which, if you click on it, takes you to the page with this heading:
<h1><span style="view-transition-name: recording-7812">The Banks Of The Moy</span></h1>
Why the span
? Well, like Dave, I noticed some weird tweening happening between block and inline elements. Dave solved the problem with width: fit-content
on the block-level element. I just stuck in an extra inline element.
Anyway, the important thing is that the name of the view transition matches: recording-7812
.
I also added a view transition to pages that have maps. The position of the map might change from page to page. Now there’s a nice little animation as you move from one page with a map to another page with a map.
That’s all good, but I found myself wishing that I could just have those enhancements. Every single navigation on the site was triggering a fade in and out—the default animation. I wondered if there was a way to switch off the default fading.
There is! That default animation is happening on a view transition named root
. You can get rid of it with this snippet of CSS:
::view-transition-image-pair(root) {
isolation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
display: block;
}
Voila! Now only the view transitions that you name yourself will get applied.
You can adjust the timing, the easing, and the animation properites of your view transitions. Personally, I was happy with the default morph.
In fact, that’s one of the things I like about this API. It’s another good example of declarative design. I say what I want to happen, but I don’t need to specify the details. I’ll let the browser figure all that out.
That’s what’s got me so excited about this API. Yes, it’s powerful. But just as important, it’s got a very low barrier to entry.
Chris has gathered a bunch of examples together in his post Early Days Examples of View Transitions. Have a look around to get some ideas.
If you like what you see, I highly encourage you to add view transitions to your website now.
“But wait,” I hear you cry, “this isn’t supported in any public-facing browser yet!”
To which, I respond “So what?” It’s a perfect example of progressive enhancement. Adding one meta
element and a smidgen of CSS will do absolutely no harm to your website. And while no-one will see your lovely view transitions yet, once browsers do start shipping with support for the API, your site will automatically get better.
Your website will be enhanced. Progressively.
Update: Simon Pieters quite rightly warns against adding view transitions to live sites before the API is done:
in general, using features before they ship in a browser isn’t a great idea since it can poison the feature with legacy content that might break when the feature is enabled. This has happened several times and renames or so were needed.
Good point. I must temper my excitement with pragmatism. Let me amend my advice:
I highly encourage you to experiment with view transitions on your website now.