Journal

During a recent November week off I enjoyed a first visit to North Berwick. It’s a beautiful seaside town and I was lucky enough to get lovely cold-but-sunny winter weather.

Here are some of the things I did:

• Stayed at the Marine Hotel. This was a treat as it was quite posh, but I save money these days from being at home a lot and it was only for a couple of days so I’m gonna allow myself this one. The breakfast (porridge followed by cooked breakfast) was amazing and I also loved the pool and outdoor jacuzzi!
• Beach walk beside the golf course into town
• A walk around the harbour including great cliff views out to the Firth of Forth
• A visit to the seabird centre where, amongst other things, I learned that gannets inhabit the Bass rock and that a gathering of gannets is called a gannetry!
• Pretty good lil’ shops! I particularly enjoyed the Steampunk coffee shop which also houses the Orange Moon record store.
• Enjoyed a pint at The Ship Inn and The Auld Hoose. It turns out that my friend Kris’s dad (who I knew pretty well) was a regular at the latter.
• A nice frutti de mare pasta dinner at Bella Italia

Next time I visit (hopefully with Clair and Rudy) I should go in summer so I can catch The Lobster Shack open! I’d also like to visit nearby Tantallon Castle.

Here’s another tool from the Utopia creators to assist with breakpoint-free fluid responsive design.

Until now, the tooling for Utopia has been predominantly developer-focused, but we know that's only half the story. To start to address this, we've created a pair of Figma plugins to help designers set out Utopian project foundations.

I also really like the idea of having three sets of type styles at both defined viewport sizes.

We typically use a Strong style for headings and other text that we want to visually punctuate our designs. The Prose style is useful for longer-form text which might benefit from a larger, more relaxed line height. The Default style is a catch-all for other snippets of text in our designs, like a standlone link, a short piece of explainer text, or perhaps an image caption. The number and variety of styles required will vary depending on your design's purpose and style but these three serve as a reasonable starting point.

The best SL-1200/10 set-up video I’ve seen.

I especially like the section on testing for channel imbalance by playing a mono record (such as Nat Birchall's Upright Living LP) and comparing the output meter for any differences between left and right, then untightening the relevant tonearm screws in order to make adjustments.

Update 26/10/25:

This one from Resident Advisor and the Hoppetosse nightclub ain’t bad either (although the Longbox tutorial still edges it).

At the height of my playing career, David Baddiel wore blackface and put a pineapple on his head to mock me on national television every Friday night. While the chants have remained ever present, and David’s name has become synonymous with mine, it’s taken 25 years for us to finally meet face-to-face. In this episode, I talk with David about the impact his racist sketches had on me, my family and the wider community, and why allyship needs to become a bigger part of football.

While watching David Baddiel's excellent Jews Don't Count documentary on Channel Four I was intrigued by the section in which he spoke to Jason Lee, leading me to seek out this podcast episode.

In the nineties at the height of “lads’ culture”, Baddiel and Frank Skinner essentially bullied and abused footballer Lee, mocking his appearance in particular.

This conversation, difficult as it sounded, is fascinating. It throws up so many moral ambiguities, such as whether or not Baddiel is a fit person to publicly campaign against racism, and related questions around acceptance, rehabilitation and moving on.

It also made me question my own prejudices and behaviours, past and present.

Most of all I was impressed by Jason Lee. His past treatment has meant that he and his family have had a lot to endure, but he speaks with such dignity, positivity and resolve.

This article is not about when or why you would use visually-hidden content. There’s a number of excellent articles that discuss these questions in detail, notably Scott O’Hara’s Inclusively Hidden. But most of them don’t go into much detail about the specific CSS involved — why do we use this particular pattern, with these specific properties? So today I’m going to dissect it, looking at each of the properties in turn, why it’s there, and why it isn’t something else.

Relevant to How to hide elements on a web page.

I also liked this nugget:

it’s often called .sr-only (screen reader only, but that’s not a good name, because visually-hidden content is not just for screen readers).

Loved this thoughtful and insightful interview with Jeff Mills by Marcus Barnes.

Among the highlights were Jeff’s thoughts on whether his music could viably still be described as “Detroit” given how long he’s lived away from the motor city, and also his reflections on the impact on his peer group of the 1980 film American Gigolo.

Here’s a lovely slow-mo comparison of Liam Pitchford’s backhand technique versus that of an amateur.

The main things I take from it are:

• his posture – really low with weight forward
• how far in front of his body he strikes the ball – it’s way in front of his head and even in front of his non-playing hand, with impact at the back edge of the table
• the bat angle at the start (forehand side facing ceiling like you’re holding a frying pan)
• as he prepares, the bat’s left edge tilts up a bit and he gets slightly lower
• elbow moves forward (helping him rotate wrist back) but only as far as to create a virtual parallel horizontal line with the table’s back edge. This is the perfect stopping point for wrist pivoting (whereas I’ve let the elbow go further forward which is unnatural)
• uses wrist to bring bat tip way back to point back at his belly button – I think this greater “travel distance” might be crucial versus an amateur’s version of a wristy backhand
• then there’s a little forearm forward movement and a lot of wrist rotation to get the bat to the impact point
• stays low and on follow-through the bat only gets as high as his chin

People have used the HTML title attribute to achieve a native “tooltip” effect for many years. However accessibility experts have recommended that we should avoid this practice, and here I summarise my research on the topic.

Renowned accessibility solutions provider The Paciello Group recommend the title attribute should almost always be avoided. It causes problems for lots of different usage contexts (keyboard, touch device, screen readers). The only place where I can see that it is still helpful is on iframe. It was beneficial on form inputs in cases where a visible text label would be redundant and we want to provide our control with a programmatically associated label, however we now have aria attributes which do a better job.

So on anything other than iframe the title attribute is undesirable. To back this up, at work my team recently received the following accessibility feedback from Tetralogical when they reviewed one of our tables.

The Edit and Delete links use the title attribute to provide additional context for each link. The title attribute can be unreliable (for example, in testing VoiceOver announces the title in French). Provide additional context using the aria-describedby attribute to reference the name or reference value of the item.

I’ve been stockpiling good records for a while and it’s time they got an airing. I’ll be playing a few on Radio Buena Vida, Saturday 19/11 at 4–5pm. Tune in or even come hang out in the café, if you’re in the hood.

There’s a classic web developer interview question that goes something like this:

What happens when you type in “bbc.co.uk” into a browser? Describe the journey that results in you seeing a page.

You could answer it like this:

Your browser sends an HTTP request which gets routed through a local modem/router then gets sent to a nameserver. That nameserver routes the request to the correct IP address, which will resolve to some sort of web server. That server will serve up either some static files, or run some backend code in order to generate a resource (probably an html page). When the HTML page is returned, your browser will parse it, which will likely generate more requests, and the cycle will repeat.

To do:

• add something about HTTPS
• add more about the front-end aspects: DOM, CSSOM, Accessibility tree, render blocking resources etc

References:

• My favorite interview question, by Ben McCormick
• How browsers work, on MDN