Jeremy Keith's Blog, page 3

Salter Cane album launch gig on Friday, 20th June

Mark your calendars: Friday, 20th June ��� that���s when Salter Cane will be launching Deep Black Water at the The Hope And Ruin in Brighton

I can���t wait to get back on stage with the band! These songs sound great on the new album but I can guarantee that they���re going to absolutely rock when we play them live.

Support will be provided by our good friends Dreamytime Escorts, featuring former members of Caramel Jack. They���ve also got a new EP on the way.

Doors are at 8pm.

I���m really, really excited about this. It���s been far too long since Salter Cane were last bringing the noise live on stage. I hope to see you there!

Session spider

Here���s some code to show the distance to the nearest airports on a map.

Here���s a modified version that shows the distance to the nearest Gregg���s. The hub-and-spoke visualisation overlaid on the map changes as you pan around, making it look like a spider bestriding the landscape.

Jonty���s version shows the distance to the nearest Pret a Manger.

I got nerdsniped by someone saying:

@adactio This would be cool for sessions ����

He���s right, dammit! So here you go:

Session spider.

Now you can see how far you are from the nearest traditional Irish music sessions.

It���s using data from the weekly data dumps from thesession.org���I added a GeoJSON file in there.

Pure silliness, but it does make me wonder what kind of actually good data visualisations could be made with all this scrumptious data.

Awareness

Today is Global Accessibility Awareness Day:

The purpose of GAAD is to get everyone talking, thinking and learning about digital access and inclusion, and the more than One Billion people with disabilities/impairments.

Awareness is good. It���s necessary. But it���s not sufficient.

Accessibility, like sustainability and equality, is the kind of thing that most businesses will put at the end of sentences that begin ���We are committed to������

It���s what happens next that matters. How does that declared commitment���that awareness���turn into action?

In the worst-case scenario, an organisation might reach for an accessibility overlay. Who can blame them? They care about accessibility. They want to do something. This is something.

Good intentions alone can result in an inaccessible website. That���s why I think there���s another level of awareness that���s equally important. Designers and developers need to be aware of what they can actually do in service of accessibility.

Fortunately that���s not an onerous expectation. It doesn���t take long to grasp the importance of having good colour contrast or using the right HTML elements.

An awareness of HTML is like a superpower when it comes to accessibility. Like I wrote in the foreword to the Web Accessibility Cookbook by O���Reilly:

It���s supposed to be an accessibility cookbook but it���s also one of the best HTML tutorials you���ll ever find. Come for the accessibility recipe; stay for the deep understanding of markup.

The challenge is that HTML is hidden. Like Cassie said in the accessibility episode of The Clearleft Podcast:

You get JavaScript errors if you do that wrong and you can see if your CSS is broken, but you don���t really have that with accessibility. It���s not as obvious when you���ve got something wrong.

We are biased towards what we can see���hierarchy, layout, imagery, widgets. Those are the outputs. When it comes to accessibility, what matters is how those outputs are generated. Is that button actually a button element or is it a div? Is that heading actually an h1 or is it another div?

This isn���t about the semantics of HTML. This is about the UX of HTML:

Instead of explaining the meaning of a certain element, I show them what it does.

That���s the kind of awareness I���m talking about.

One way of gaining this awareness is to get a feel for using a screen reader.

The name is a bit of a misnomer. Reading the text on screen is the least important thing that the software does. The really important thing that a screen reader does is convey the structure of what���s on screen.

Friend of Clearleft, Jamie Knight very generously spent an hour of his time this week showing everyone the basics of using VoiceOver on a Mac (there���s a great short video by Ethan that also covers this).

Using the rotor, everyone was able to explore what���s under the hood of a web page; all the headings, the text of all the links, the different regions of the page.

That���s not going to turn anyone into an accessibility expert overnight, but it gave everyone an awareness of how much the HTML matters.

Mind you, accessibility is a much bigger field than just screen readers.

Fred recently hosted a terrific panel called Is neurodiversity the next frontier of accessibility in UX design?���well worth a watch!

One of those panelists���Craig Abbott���is speaking on day two of UX London next month. His talk has the magnificent title, Accessibility is a design problem:

I spend a bit of time covering some misconceptions about accessibility, who is responsible for it, and why it���s important that we design for it up front. It also includes real-world examples where design has impacted accessibility, before moving onto lots of practical guidance on what to be aware of and how to design for many different accessibility issues.

Get yourself a ticket and get ready for some practical accessibility awareness.

A tiny taxonomy of meetings

Meetings can be frustrating. But they don���t have to be.

A lot of the frustration comes from unmet expectations. You go into the meeting expecting one outcome, and when it doesn���t materialise, you declare the meeting a waste of time. But had you gone into that same meeting with different expectations, perhaps you would emerge from it in a happier state.

We were talking about this at Clearleft recently and I suggested that a simple little taxonomy of meetings might be a good starting point for avoiding frustration.

Divergent meetings

In a divergent meeting the goal is to generate ideas. These meetings often happen early in a project.

Quantity matters more than quality. Plenty of ���yes, and������ rather than ���no, but������ to create lots of suggestions. This is not the meeting to point out potential problems with the suggestions.

Convergent meetings

In a convergent meeting the goal is to come to a decision.

The meeting might begin with lots of options on the table. They need to be winnowed down. Poke at them. Dissect them. Ideally dismiss lots of them.

This is not the time to introduce new ideas���save that for a divergent meeting.

Just having those two categories alone could save you a lot of grief. The last thing you want is someone participating in a convergent meeting who thinks it���s a divergent meeting (or the other way around).

Those two categories account for the majority of meetings, but there���s one more category to consider���

Chemistry meetings

In a chemistry meeting there is no tangible output. The goal is to get to know one another.

In a large organisation this might be when multiple departments are going to work together on a project. At an agency like Clearleft, a chemistry meeting between us and the client team is really useful at the beginning of our partnership.

Again, the key thing is expectations. If there are people in a chemistry meeting who are expecting to emerge with a framework or a list or any kind of output, they���re going to be frustrated. But if everyone knows it���s a chemistry meeting there���s no expectation that any decisions are going to be made.

There you have it. A tiny taxonomy of meetings:

divergentconvergentchemistry

This tiny taxonomy won���t cover every possible kind of meeting, but it probably covers 90% of them.

Ideally every meeting should be categorised in advance so that everyone���s going in with the same expectations.

If you find yourself trying to categorise a meeting and you think ���Well, it���s mostly convergent, but there���s also this divergent aspect������ then you should probably have two separate shorter meetings instead.

And if you���re trying to categorise a meeting and you find yourself thinking, ���This meeting is mostly so I can deliver information��� ���that meeting should be an email.

The closing talks at UX London 2025

It���s just over one month until UX London. You should grab a ticket if you haven���t already!

The format of UX London is quite special. While the focus of each day is different���discovery, design, and delivery���each day unfolds like this���

There are four talks in the morning. You get your brain filled with ideas and learn from fantastic speakers. It���s a single track���everyone���s getting the same shared experience.

Then after a lunch, you choose from one of four workshops. Whatever you choose, it���s going to be hands-on. You can leave your laptop at home.

A day of listening to talks could get exhausting. A workshop that lasts all day could be even more exhausting. But somehow by splitting the day between both activities, the energy level is just right!

That said, we don���t want the day to end with everyone spread across four different workshop rooms. That���s why there���s one final talk at the end of each day.

These closing talks are a bit different to the morning talks. Whereas the focus of the morning talks is on practical skills that you can apply straight away, the closing talks are an opportunity to sit back and have your mind expanded. They���ll be fun and thought-provoking.

Paula Zuccotti is closing out day one with a talk about two of her projects: Every Thing We Touch and Future Archeology:

This talk invites audiences to reconsider the meaning of the objects they encounter every day and reflect on what their possessions might reveal about who we are and what we value, both now and in the years to come.

Sarah Hyndman will wrap up day two with a fun interactive talk about your senses:

Join a live expedition into our inner world to explore why we see, feel and remember.

Finally, Rachel Coldicutt is going to finish UX London with a rallying cry:

Introducing the Society of Hopeful Technologists and discussing how, in modern technology development, your practice is probably more political than you realise.

I can���t wait! Get yourself a ticket for a day or for all three days.

And as a little thank you for tolerating my excitement, use the discount code JOINJEREMY to get 20% off your ticket.

CSS snippets

I���ve been thinking about the kind of CSS I write by default when I start a new project.

Some of it is habitual. I now use logical properties automatically. It took me a while to rewire my brain, but now seeing left or top in a style sheet looks wrong to me.

When I mentioned this recently, I had some pushback from people wondering why you���d bother using logical properites if you never planned to translate the website into a language with a different writing system. I pointed out that even if you don���t plan to translate a web page, a user may still choose to. Using logical properties helps them. From that perspective, it���s kind of like using user preference queries.

That���s something else I use by default now. If I���ve got any animations or transitions in my CSS, I wrap them in prefers-reduced-motion: no-preference query.

For instance, I���m a huge fan of view transitions and I enable them by default on every new project, but I do it like this:

@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; }}

I���ll usually have a prefers-color-scheme query for dark mode too. This is often quite straightforward if I���m using custom properties for colours, something else I���m doing habitually. And now I���m starting to use OKLCH for those colours, even if they start as hexadecimal values.

Custom properties are something else I reach for a lot, though I try to avoid premature optimisation. Generally I wait until I spot a value I���m using more than two or three times in a stylesheet; then I convert it to a custom property.

I make full use of clamp() for text sizing. Sometimes I���ll just set a fluid width on the html element and then size everything else with ems or rems. More often, I���ll use Utopia to flow between different type scales.

Okay, those are all features of CSS���logical properties, preference queries, view transitions, custom properties, fluid type���but what about actual snippets of CSS that I re-use from project to project?

I���m not talking about a CSS reset, which usually involves zeroing out the initial values provided by the browser. I���m talking about tiny little enhancements just one level up from those user-agent styles.

Here���s one I picked up from Eric that I apply to the figcaption element:

figcaption { max-inline-size: max-content; margin-inline: auto;}

That will centre-align the text until it wraps onto more than one line, at which point it���s no longer centred. Neat!

Here���s another one I start with on every project:

a:focus-visible { outline-offset: 0.25em; outline-width: 0.25em; outline-color: currentColor;}

That puts a nice chunky focus ring on links when they���re tabbed to. Personally, I like having the focus ring relative to the font size of the link but I know other people prefer to use a pixel size. You do you. Using the currentColor of the focused is usually a good starting point, thought I might end up over-riding this with a different hightlight colour.

Then there���s typography. Rich has a veritable cornucopia of starting styles you can use to improve typography in CSS.

Something I���m reaching for now is the text-wrap property with its new values of pretty and balance:

ul,ol,dl,dt,dd,p,figure,blockquote { hanging-punctuation: first last; text-wrap: pretty;}

And maybe this for headings, if they���re being centred:

h1,h2,h3,h4,h5,h6 { text-align: center; text-wrap: balance;}

All of these little snippets should be easily over-writable so I tend to wrap them in a :where() selector to reduce their specificity:

:where(figcaption) { max-inline-size: max-content; margin-inline: auto;}:where(a:focus-visible) { outline-offset: 0.25em; outline-width: 0.25em; outline-color: currentColor;}:where(ul,ol,dl,dt,dd,p,figure,blockquote) { hanging-punctuation: first last; text-wrap: pretty;}

But if I really want them to be easily over-writable, then the galaxy-brain move would be to put them in their own cascade layer. That���s what Manu does with his CSS boilerplate:

@layer core, third-party, components, utility;

Then I could put those snippets in the core layer, making sure they could be overwritten by the CSS in any of the other layers:

@layer core { figcaption { max-inline-size: max-content; margin-inline: auto; } a:focus-visible { outline-offset: 0.25em; outline-width: 0.25em; outline-color: currentColor; } ul,ol,dl,dt,dd,p,figure,blockquote { hanging-punctuation: first last; text-wrap: pretty; }}

For now I���m just using :where() but I think I should start using cascade layers.

I also want to start training myself to use the lh value (line-height) for block spacing.

And although I���m using the :has() selector, I don���t think I���ve yet trained my brain to reach for it by default.

CSS has sooooo much to offer today���I want to make sure I���m taking full advantage of it.

Codewashing

I have little understanding for people using large language models to generate slop; words and images that nobody asked for.

I have more understanding for people using large language models to generate code. Code isn���t the thing in the same way that words or images are; code is the thing that gets you to the thing.

And if a large language model hallucinates some code, you���ll find out soon enough:

With code you get a powerful form of fact checking for free. Run the code, see if it works.

But I want to push back on one justification I see repeatedly about using large language models to write code. Here���s Craig:

There are many moral and ethical issues with using LLMs, but building software feels like one of the few truly ethically ���clean���(er) uses (trained on open source code, etc.)

That���s not how this works. Yes, the large language models are trained on lots of code (most of it open source), but they���re not only trained on that. That���s on top of everything else; all the stolen books, all the unpaid creative work of others.

Even Robin Sloan, who first says:

I think the case of code is especially clear, and, for me, basically settled.

���goes on to acknowledge:

But, again, it���s important to say: the code only works because of Everything. Take that data away, train a model using GitHub alone, and you���ll get a far less useful tool.

When large language models are trained on domain-specific data, it���s always in addition to the mahoosive amount of content they���ve already stolen. It���s that mohoosive amount of content���not the domain-specific data���that enables them to parse your instructions.

(Note that I���m being very delibarate in saying ���parse���, not ���understand.��� Though make no mistake, I���m astonished at how good these tools are at parsing instructions. I say that as someone who tried to write natural language parsers for text-only adventure games back in the 1980s.)

So, sure, go ahead and use large language models to write code. But don���t fool yourself into thinking that it���s somehow ethical.

What I said here applies to code too:

If you���re going to use generative tools powered by large language models, don���t pretend you don���t know how your sausage is made.

UX London flash sale

In exactly six weeks time, UX London is happening!

I am ridiculously excited about this year���s line-up���I can���t wait to see the talks and get hands-on in the workshops.

If you haven���t yet got your ticket, now is the time. There���s a flash sale this week: use the discount code FLASH20 to get a whopping 20% of any ticket. Do it before the end of Friday!

Whether you���re coming for all three days or choosing one focused day, you���re in for a treat.

Day one on Tuesday, 10 June is discovery day.Day two on Wednesday, 11 June is design day.Day three on Thursday, 12 June is deliver day.

Head on over to the website to get all the details and then get your discounted ticket.

See you there!

OKLCH()

I was at the State Of The Browser event recently, which was great as always.

Manu gave a great talk about colour in CSS. A lot of it focused on OKLCH. I was already convinced of the benefits of this colour space after seeing a terrific talk by Anton Lovchikov a while back.

After Manu���s talk, someone mentioned that even though OKLCH is well supported in browsers now, it���s a shame that it isn���t (yet) in design tools like Figma. So designers are still handing over mock-ups with hex values.

I get the frustration, but in my experience it���s not that big a deal in practice. Here���s why: oklch() isn���t just a way of defining colours with lightness, chroma, and hue in CSS. It���s also a function. You can use the magical from keyword in this function to convert hex colours to l, c, and h:

--page-colour: oklch(from #49498D l c h);

So even if you���re being handed hex colour values, you can still use OKLCH in your CSS. Once you���re doing that, you can use all of the good stuff that comes with having those three values separated out���something that was theoretically possible with hsl, but problematic in practice.

Let���s say you want to encode something into your CSS like this: ���if the user has specified that they prefer higher contrast, the background colour should be four times darker.���

@media (prefers-contrast: more) { --page-colour: oklch(from from #49498D calc(l / 4) c h);}

It���s really handy that you can use calc() within oklch()���functions within functions. And I haven���t even touched on the color-mix() function.

Hmmm ���y���know, this is starting to sound an awful lot like functional programming:

Functional programming is a programming paradigm where programs are constructed by applying and composing functions. It is a declarative programming paradigm in which function definitions are trees of expressions that map values to other values.

Paying it forward

For the past couple of years, myself and Jessica have been going to the Belfast Tradfest in the Summer. It���s an excellent event with great workshops, sessions, and concerts. And it helps that Belfast is such a lovely city to spend a week in.

What struck me the first time we were participating in workshops thre was the great mix of age ranges. It always warms my heart to see young people getting really into the music.

Then I found out about their bursary sponsorship scheme:

For many young musicians, financial barriers stand in the way of this invaluable experience.��Your support can make a real difference��by sponsoring a bursary that covers the cost of tuition for a deserving student.

Last year, I decided to forego one month���s worth of donations to The Session���the contributions that help cover the costs of hosting, newsletters, geocoding, and so on. Instead the money went towards bursary sponsorships for Belfast Tradfest.

It was a great success that managed to cover places for quite a few young musicians.

So we���re doing it again.

Normally, I wouldn���t mention the ins-and-outs of TheSession.org over here on adactio.com but I thought you might like to partake in this year���s fund drive:

For the month of April 2025, any donations made to The Session will go towards bursary sponsorships for young musicians to attend workshops at this year���s Belfast Trad Fest:

thesession.org/donate

Maybe you���ve liked something I���ve written here. Maybe you enjoyed Resilient Web Design, the free book I published online. You can also read HTML5 For Web Designers and Going Offline for free now too.

I���ve never asked for any recompense for my online ramblings, but if you���ve ever wanted to drop me some money to thank me for something I���ve put out there, now���s your chance.

Any contribution you make will go towards fostering the next generation of traditional Irish musicians, something that���s very dear to my heart.