

Journal 2975 Links 9920 Articles 82 Notes 6999
Saturday, June 10th, 2023

Long hot Caturday.
Some blogging myths
- myth: you need to be original
- myth: you need to be an expert
- myth: posts need to be 100% correct
- myth: writing boring posts is bad
- myth: you need to explain every concept
- myth: page views matter
- myth: more material is always better
- myth: everyone should blog
Friday, June 9th, 2023

So long and thanks for all the bitterballen!
Another excellent #CSSday!
Web Apps on macOS Sonoma 14 Beta
It’s great to see how (progressive) web apps are being supported on both iOS and macOS …I just wish the discovery were better.
Thursday, June 8th, 2023

Building a personal site is a radical act in 2023.
— @sophie@social.lol CSS Day 2023

Build your own website!
Wednesday, June 7th, 2023
Going to Amsterdam. brb
Putting growth at the heart of GOV.UK’s strategy - Government Digital Service
This may mark the beginning of Gov.uk’s decline. The top-listed priorities are the very antithesis of starting with user needs. Instead from now on it’s going to be about growth, shiny new technology, having a native app, and literally pivoting to video.
It’ll be interesting to see if they try to maintain their existing design principles while simultaneously abandoning them.
Tuesday, June 6th, 2023
Reading Babel by R.F. Kuang.

Reaction
It all started with a trip into the countryside one Sunday a few weeks back.
The weather has been getting better and better. The countryside was calling. Meanwhile, Jessica was getting worried about her newly-acquired driving skills getting rusty. She has her license, but doesn’t get the chance to drive very often. She signed up to a car club that lets her book a hybrid car for a few hours at a time—just enough to keep in practice, and also just enough for a little jaunt into the countryside.
We went for Sunday lunch at the Shepherd and Dog in Fulking, near to Devil’s Dyke (I swear that sentence makes sense if you live ’round these parts). It was a lovely day. The Sunday roast was good. But it was on the way back that things started to go wrong.
We had noticed that one of the front tyres was looking a little flat so we planned to stop into a garage to get that seen to. We never made it that far. The tell-tale rhythmic sounds of rubber flapping around told us that we now had a completely flat tyre. Cue panic.
Fortunately we weren’t too far from a layby. We pulled in on the side of the busy road that runs by Saddlescombe Farm.
This is when the Kafkaesque portion of the day began. Jessica had to call the car club, but reception was spotty to put it mildly. There was much frustration, repitition, and hold music.
Eventually it was sorted out enough that we were told to wait for someone from the AA who’d come by and change the tyre in a few hours. To be fair, there are worse places to be stuck on a sunny Summer’s day. We locked the car and walked off across the rolling hills to pass the time.
The guy from the AA actually showed up earlier than expected. We hurried back and then sat and watched as he did his mechanical mending. We got the all-clear to drive the car back to Brighton, as long we didn’t exceed 50 miles per hour.
By the time we got home, we were beat. What a day! I could feel the beginnings of a headache so I popped some ibuprofin to stave it off. Neither of us could be bothered cooking, so we opted for a lazy evening in front of the telly eating takeaway.
I went onto Deliveroo and realised I couldn’t even manage the cognitive overhead of deciding what to eat. So I just went to my last order—a nice mix of Chinese food—and clicked on the option to place exactly the same order again.
And so we spent our Sunday evening munching on Singapore fried noodles and catching up on the most excellent Aussie comedy series, Colin From Accounts. It was just what I needed after an eventful day.
I had just finished my last bite when I felt I needed to cough. That kicked off some wheezing. That was a bit weird. So was the itchy sensation in my ears. Like, the insides of my ears were itchy. Come to think of it, my back was feeling really itchy too.
The wheeziness was getting worse. I had been trying to pass it off, responding to Jessica’s increasingly worried questions with “I’m grand, I’ll be f…” Sorry, had to cough. Trying to clear my throat. It feels a bit constricted.
When Jessica asked if she should call 111, I nodded. Talking took a bit of effort.
Jessica described my symptoms over the phone. Then the operator asked to speak to me. I answered the same questions, but in a much wheezier way.
An ambulance was on its way. But if the symptoms got worse, we should call 999.
The symptoms got worse. Jessica called 999. The ambulance arrived within minues.
The two paramedics, Alastair and Lucy, set to work diagnosing the problem. Let’s go into the ambulance, they said. They strapped a nebuliser onto my face which made breathing easier. It also made everything I said sound like a pronouncement from Bane.
They were pretty sure it was anaphylaxis. I’ve never been allergic to anything in my life, but clearly I was reacting to something. Was it something in the Chinese food? Something in the countryside?
In any case, they gave me a jab of antihistamine into my arm and took us to the emergency room.
By the time we got there, I was feeling much better. But they still needed to keep me under observation. So Jessica and I spent a few hours sitting in the hallway. Someone came by every now and then to check on me and offer us some very welcome cups of tea.
Once it was clear that I was fully recovered, I was discharged with a prescription for an EpiPen.
I picked up the prescription the next day. Having an EpiPen filled with adrenaline was reassuring but it was disconcerting not knowing what caused my anaphylactic reaction in the first place.
After that stressful weekend, life went back to normal, but with this cloud of uncertainty hovering above. Was that it? Would it happen again? Why did it happen?
The weather stayed nice all week. By the time the next weekend rolled around, I planned to spend it doing absolutely nothing. That was just as well, because when I woke up on Saturday morning, I had somehow managed to twist something in my shoulder. I guess I’m at that age now where I can injure myself in my sleep.
I took some neproxin, which helped. After a while, the pain was gone completely.
Jessica and I strolled to the park and had brunch in a nice local café. Then we strolled home and sat out in the garden, enjoying the sunshine.
I was sitting there reading my book when I noticed it. The insides of my ears. They were getting itchy. I swallowed nervously. Was it my imagination or did that swallowing sensation feel slightly constricted. And is that a wheeze I hear?
It was happening again.
The symptoms continued to get worse. Alright, it was time to use that EpiPen. I had read the instructions carefully so I knew just what to do. I did the EpiPen mambo: hold, jab, press.
It worked. We called 999 (as instructed) and were told to go the emergency room. This time we went by taxi.
I checked in, and then sat in the waiting room. I noticed that everyone else had white wristbands, but mine was red. I guess my place in the triage was high priority.
As I sat there, I could feel some of those symptoms returning, but very slowly. By the time we saw someone, there was no mistaking it. The symptoms were coming back.
I was hooked up to the usual instruments—blood pressure, heart rate, blood oxygen—while the hospital staff conferred about what to do. I was getting a bit clammy. I started to feel a bit out of it.
Beep, beep! One of those numbers—blood oxygen?—had gone below a safe threshold. I saw the staff go into action mode. Someone hit a button—the red light in the ceiling started flashing. Staff who had been dealing with other patients came to me.
Instructions were spoken clearly and efficiently, then repeated back with equal clarity and efficiency. “Adrenaline. One in ten thousand.” “Adrenaline. One in ten thousand.” They reclined my chair, elevated my legs, pulled down my trousers, and gave me my second shot in one day.
It worked. I started to feel much better straight away. But once again, I needed to be kept under observation. I was moved to the “recus” ward, passing through the corridor that was so familiar from the previous weekend.
This time we’d spend a grand total of twelve hours in the hospital. Once again, it was mercifully uneventful. But it gave us the opportunity to put two and two together. What was the common thread between both episodes?
Ibuprofin. Neproxin. They’re both non-steroidal anti-inflammatory drugs (NSAIDS). That fits
Foods are the most common trigger in children and young adults, while medications and insect bites and stings are more common in older adults. … Any medication may potentially trigger anaphylaxis. The most common are β-lactam antibiotics (such as penicillin) followed by aspirin and NSAIDs.
The doctors agreed—the connection looked pretty clear. I saw my GP a few days later and she’s reffered me to an allergy-testing clinic to confirm it. That might take a while though. In the meantime, I also got another prescription for more EpiPens.
Hopefully I won’t need them. I’m very, very glad that I don’t appear to be allergic to a foodstuff. I’d rather do without ibuprofin and aspirin than have to vigilantly monitor my diet.
But I do need to get into the habit of making sure I’ve got at least one EpiPen with me wherever I go. I’ll probably never need to use it. I feel like I’ve had enough anaphylaxis in the past couple of weeks to last me a lifetime.
Oh, and one more thing. I know everyone says this after dealing with some kind of health emergency in this country, but I’m going to say it anyway:
The NHS is easily the best thing ever invented in the UK. Everyone I dealt with was fantastic. It was all in a day’s work for them, but I am forever in their debt (whereas had this happened in, say, the USA, I would forever be in a much more literal debt).
Thank you, NHS!
Monday, June 5th, 2023
Accessibility Personas
Personas are often toothless, but these accessibility personas from gov.uk are more practical and useful than most:
Each profile has a different simulation of their persona’s condition and runs the assistive technology they use to help them.
You can use these profiles to experience the web from the perspective of the personas and gain more understanding of accessibility issues.
Saturday, June 3rd, 2023
Bookin’. — Ethan Marcotte
The twelve(!) year old photo that Ethan has illustrated this post with still makes my heart sing.
Watch Transitions in Slow Motion in Chrome’s DevTools - Jim Nielsen’s Blog
This is a very handy tip if you’re adding view transitions to your website!
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.