The Blogroll

When you make speed and “moving fast” the biggest priority on a project or in an organization, the first thing to breakdown is talking to each other. Talking takes time. Consensus is expensive and slow. In a pressurized environment there’s no time to schedule calls, get input from subject matter experts, or resolve key differences of opinion. ASAP makes a big assumption that all relevant parties are already in the room.

Not everything needs to be a conversation. I’m a firm believer in “get the user something to see if there’s interest”. I’d agree that over-thinking a problem and under-thinking a problem both have pitfalls. But dozens of ways exist to get feedback from users on in-progress work without overcommitting to a particular design. By prioritizing speed over talking, cross-org collaboration suffers and a faulty design can steamroll ahead. I am no soothsayer, but I can tell you that you set your organization up for a messy merge conflict in the future between teams who have been traveling in different directions.

I think the second organizational casualty is “the system”. When speed is the priority, there’s no incentive to improve or invest in the shared system (e.g. a design system or codebase) under a tight deadline. If everyone needs to move fast, even something simple like renaming a folder could have dramatic setbacks. Hypermovers will create a new project folder or detach a Figma component. And that new folder of files grows to create it’s own duplicative system of components that are ever-so-slightly different such that they are incompatible with the rest of the system. Resolving system gaps requires conversations, it’s easier to eject from the system at the slightest inconvenience, duplicate, and go your own way. Effectively hiding the time bomb of technical debt for the next unfortunate sucker.

I think AI exacerbates this problem. I think AI can help you build faster (although data suggest otherwise), but I also believe that LLMs are the ultimate tool in the “Don’t talk to my coworkers” toolchain. Why talk to an expert who might tell me no, when the omniscient machine that always tells me yes is right here? Avoiding that friction doesn’t produce better products faster. It makes future conversations more difficult thanks to higher sunk costs and deeper entrenched opinions.

Other pieces of infrastructure begin to chip away when moving fast too: documentation, security, performance, reliability, the fabric of modern American democracy, and developer satisfaction to name a handful. I’m pro-reducing bullshit, I’m pro-reducing toil. But I’m also pro-slowing the fuck down and doing actual human thinking before pulling a trigger… or sending a laser-guided Tomahawk missile… or whatever action-based analogy works best for your organization.

We all love dopamine, we all love seeing new ideas come to life, but more lines of code and duplicate systems –our own little kingdoms in code– doesn’t produce horizontal strength. The job of Engineering Management is no longer pushing tickets across the board to make executives clap, it’s helping organizations row in the same direction together. It’s relentlessly focusing on your users over lines of code and cool project codenames.

As well as showing off work in progress on Sho!io, I thought it might be interesting to document what I’ve been working on here. So I’m starting a new regular “Last week in the studio” series.

Week 15, 2026: Mountain Duck

Some weeks are “bitty,” and I need to jump from one thing to another. Those are the weeks I find the hardest. Fortunately, last week wasn’t one of those, as I was able to concentrate fully on a set of animated graphics for a new website design for the Mountain Duck app.

This design and the illustrations that go into it are intended to portray Mountain Duck as a product that lets people work with files in cloud storage and servers, as if they were on a local disc. Everything works transparently in the background, and files always stay in sync, so people never need to worry about where their files are.

So I created a series of duck machines, with this one intended for the home page. Here’s that CSS/JS animated SVG on CodePen:

See the Pen An animated SVG illustration for Mountain Duck by Andy Clarke (@malarkey) on CodePen.

My intention was to make the illustration feel meaningful, mechanical, and playful using bubbles, moving background elements, and streams of files travelling through different parts of the scene. The result should look effortless, which usually means there’s a lot going on behind the scenes. I built this with inline SVG, CSS, and vanilla JavaScript.

SVG was the right tool

I wanted to target individual parts of the artwork directly, style them with CSS, and use JavaScript only where timing or spawning logic genuinely needed it. Instead of treating the SVG as one asset, I structured it as a collection of moving parts: bubbles, buttons, cogs, dials, and file icons.

SVG structure matters, so I exported the static elements first and optimised them as much as possible by reducing the number of path points and merging them. Then, I brought in the animated elements one by one, adding CSS animations and the occasional bit of JavaScript as I went. CSS handles motion while JavaScript dictates when things happen and what values each instance should use. I made an initial pass for each animated element, then refined them over several iterations. This is the part I enjoy most. Not just making something move, but making it move in a way that feels intentional and natural.

More work from the week

This home page illustration wasn’t the only animation I made for Mountain Duck last week. There are several others which may find their way onto the new website I’m designing.

All in all, last week was productive, and I feel good about what I achieved.

The UK local and Senedd Cymru (Welsh Parliament) elections are a few weeks away. If, like me, you want to say a resounding “no” to far-right Reform and its bigotry, racism, and xenophobia, you might like to show it. My Stop Reform t-shirts are now back in my shop.

I have several Far Right So Wrong designs available, including these four.

Available in sizes XS to 5XL. These organic cotton t-shirts are made from sustainable materials and printed in Teemill’s renewable energy-powered factory.

Every purchase helps fund HOPE not hate, an organisation dedicated to challenging the far right in Britain and building communities based on unity and compassion.

What Carter did in his speech was something rare in the annals of democratic government: he confronted the people with the truth—about his own failings, about the reality of the world around them, and most importantly about themselves. Even as Americans grow, for the second time, disillusioned with a Trump presidency, we have put drapes […]

The post Jimmy Carter was right appeared first on Jeffrey Zeldman Presents.

Most UX teams are too small to shape the whole experience. An organizational AI skills library might be the answer.

The best project management tool is still a pen, plus the discipline to notice what the machine cannot. Wisdom from Lucas Radke.

The post Handwritten notes in the time of AI note takers appeared first on Jeffrey Zeldman Presents.

Times are tough out there. I know that a lot of people are looking for work, which can be a very stressful experience.

One of the things that can make the job search stressful is uncertainty. There’s a real taboo around talking about salaries. This taboo ends up benefiting employers and punishing potential employees. There’s an information gap that can be exploited (see also: job postings that don’t list salary ranges).

That’s why I’m always pleased when people voluntarily share their income. Here are some of the people who have done this over the years:

• Dan Mall (US)
• Alistair Hey (UK)
• Jamie Tanna (UK)
• Tom Withers (UK)
• Matt Brunt (UK)
• Carolina Gilabert (UK)
• Xe Iaso (Canada)
• Kristófer Reykjalín (Canada/US/Iceland)

Because the jobs are generally in software or design, you can sort of make apples-to-apples comparisons. You can definitely get the general gist of what kind of salary to expect for certain roles.

In the interest of full transparency, I figured I’d share my own income numbers, though as you’ll see, they’re not very representative of a normal career:

• 2003: £15,434 (freelance)
• 2004: £15,900 (freelance)
• 2005: £14,125 (freelance)
• 2006: £43,009 (freelance/Clearleft)
• 2007: £34,900 (Clearleft)
• 2008: £33,833 (Clearleft)
• 2009: £35,549 (Clearleft)
• 2010: £37,174 (Clearleft)
• 2011: £40,666 (Clearleft)
• 2012: £39,750 (Clearleft)
• 2013: £39,500 (Clearleft)
• 2014: £48,655 (Clearleft)
• 2015: £46,499 (Clearleft)
• 2016: £52,106 (Clearleft)
• 2017: £56,492 (Clearleft)
• 2018: £59,498 (Clearleft)
• 2019: £59,670 (Clearleft)
• 2020: £43,807 (Clearleft)
• 2021: £48,344 (Clearleft)
• 2022: £60,446 (Clearleft)
• 2023: £55,721 (Clearleft)
• 2024: £47,104 (Clearleft)
• 2025: £42,133 (Clearleft)

The first thing you’ll notice is that agency work isn’t nearly as well paid as in-house work at a technology company. So don’t embrace agency life for the money. Speaking personally, the benefits are in autonomy and variety. Those are things I value highly.

Also, I haven’t put any job titles or levels on there because they’ve never really been codified for me. I just made up my own job titles as I went along. Again, this is not very helpful to you if you’re looking for a job at a typical company.

You’ll see that things got weird in 2020, which is to be expected because things did get weird in 2020. I was furloughed, and I also took some more time off. I got a taste for it, which is why I went down to a four-day week and later a three-day week, which is what I’m doing now. So those last five years of numbers are loopy—I’m making less than before, but if you were to adjust it for a five-day week, I’m still getting paid more than before …if that makes sense.

Perhaps the most unusual thing about my career trajectory is that I’ve been at the same place for twenty years now. That’s pretty much unheard of in tech. It’s far more usual to see people switch companies—and get a salary bump—every couple of years.

So I’m not sure if there’s any value in me sharing my numbers like this. But like I said, I admire when other people do it so I figured I’d throw mine out there.

Perhaps you’d like to share your numbers too.

Although I feel deeply conflicted, I’ve been using AI coding tools more often to speed up particular aspects of development. Recently, I added an AGENTS.md to my setup so I don’t need to repeat my preferences.

I started using ChatGPT and DeepSeek to help me fix bugs and debug error messages, especially when I was new to working with Eleventy. I asked them questions, pasted in code, and then copied the result back into my project. Now, I use Codex to clone my boilerplate files and set up new projects. But whenever I started something new, I had to tell the machine my preferences again.

Machines don’t write code the way I do, so I constantly needed to reorder CSS selectors. Machines use too many class attributes and overly specific selectors, and don’t format CSS and HTML the way I like. When I switched to Codex, I realised there was a way to stop repeating myself by telling it ways to make the machine’s code more like mine.

The AGENTS.md file

Codex supports files called AGENTS.md, which is to a machine what a README is to fleshy ones. It can tell an agent what I care about and how I write code. It also defines a set of rules which prevent me from repeating myself at the start of every project.

You can add an AGENTS.md file to any project repo or put one into Codex’s hidden global config folder, which is in the root of your user directory (on a Mac.) Putting preferences there means that every new project starts using them.

~/.codex/AGENTS.md

I included a list of five things I was constantly correcting and needed the machine to stop doing. Here’s my global file:

# AGENTS.md## Core rules

- Prefer plain CSS and vanilla JavaScript.
- Prefer inline SVG when control, styling, or reuse matter.
- Use native platform features. Avoid dependencies and libraries.
- Use semantic HTML.

## CSS rules
- Don’t indent CSS declarations.
- Don’t use the `transform` shorthand property. 
- Keep the closing curly brace on the same line as the last property.
- Order all CSS properties alphabetically.
- Prefer shallow selectors and avoid deep selector chains.
- Use individual transform properties (`rotate`, `scale`, `translate`).

## Motion
- Always respect `prefers-reduced-motion`.
- Motion should be subtle, purposeful, and non-disruptive.
- Use CSS for animation and JavaScript for triggers.

## Writing
- Use British English.
- Use sentence case for headings, interface copy, and labels.

Quickly running through that list:

1. By telling Codex I prefer native platform features, I get solutions that rely more on CSS, which is faster and much easier for me to work with.

2. Machines will also happily wrap everything in <div> elements unless I tell it otherwise. I want meaningful structure, so I ask it to prioritise semantic elements like <article>, <header>, <footer>, and <section>. I also work mostly with inline SVG because I need control over animation and styling, so I make that explicit too.

3. I’m especially picky about how I write CSS. Nothing AI did was technically incorrect; it just wasn’t my way of doing things. My AGENTS file tells the machine to write properties in alphabetical order, so I can scan them more quickly. I also want consistent formatting and simple selectors, so code stays easy to read.

4. When I animate, I’m often aiming for ambient motion to add atmosphere. I also need animations that respect someone’s motion preferences, not as an afterthought.

5. Finally, when adding UI copy such as button text and form labels, I want British English spelling in sentence case.

AGENTS.md as a project brief

A global AGENTS file gets used by every project, but putting one in a project repo makes it act more like a brief. Here’s the boilerplate file I use with Eleventy projects:

# AGENTS.md## Overview
- This is an Eleventy project.
- Follow existing patterns in templates, styles, and naming.
- Make the smallest change that solves the problem cleanly.
- Don’t write new code unless absolutely necessary.

## Structure
- `src/` contains all source files.
- `src/_includes/` contains layouts and partials.
- `src/css/` contains global and component styles.
- `src/js/` contains small progressive-enhancement scripts.

## Working approach
- Don’t refactor unrelated code.
- Reuse existing patterns before creating new ones.

## HTML
- Don’t add unnecessary wrapper elements.
- Reuse existing partials where possible.
- Use semantic HTML elements.

## CSS
- Extend existing styles before creating new ones.
- Follow the global AGENTS.md for formatting and style rules.
- Keep selectors shallow and readable.
- Place media queries at the end of stylesheets.
- Use `.alt-*` for variations and `.item-*` for content types when needed.

## JavaScript
- Always use progressive enhancement.
- Don’t use JavaScript if HTML and CSS can solve the problem.
- Keep scripts small and vanilla.
- Scope behaviour to the relevant component or page.

## Eleventy
- Don’t duplicate already defined logic.
- Reuse existing collections, data files, and filters.
- Check if the content fits an existing collection before creating a new one.

## Verification
- Run the local build before finishing.

Wrapping up

I started using AI coding tools to free up time by avoiding repetitive tasks. AGENTS files define the rules the machine should follow, so I don’t have to also spend time editing its code to suit my style.

• Global AGENTS.md
• AGENTS.md project brief

Sometimes I look back through my blogging archives and notice what’s changed over time.

For example, I used to write quite enthusiastically about the arrival of a new operating system from Apple. That is no longer the case, to put it mildly. I’m currently holed up on Sequioa, trying to resist all the nudgings to “upgrade” to the tacky design nightmare that is Tahoe. I feel like the protagonist of Pluribus.

I used to write about software I really liked. Sometimes it was software made by Apple. More often it was from some independent developer.

Like, I remember how much I loved a little application called Quicksilver. It just did one thing. You pressed control and space and then started typing the name of any programme installed on your computer. After a few characters Quicksilver would show you the match, you hit enter and the programme launched.

If that process sounds familiar, it’s because Apple ended up incorporating it into their own Spotlight feature. Quicksilver got sherlocked (ask your parents).

Recently though, Spotlight got worse and worse at doing its one job. It’s been laggy and inaccurate, even though I set my Spotlight indexing options to only index the Applications folder.

Then I found TinyStart. It’s like Quicksilver reborn!

A tiny launcher for macOS, fast and focused on the essentials.

Actually, it does double duty. As well as being an application launcher, it’s also an emoji picker. 👍

Best of all, not only is TinyStart a return to the focus and quality of software of yore, it’s also a return to the pricing model. You buy the software—for a measly €5—and that’s it. You own it now. There’s no subscription you have to pay every month.

I love everything about this.

We rolled out adaptive light-dark() support on our design system themes and it’s been a delightful upgrade. Creating light and dark variable sets isn’t difficult, but delivery has trade-offs. Most apps that do this probably ship both sets of token values in a single stylesheet. That’s fine until you have multiple kilobytes of duplicate definitions. To get around the performance problems we built two separate stylesheets –which is also not great– but my coworker Zacky found a good trick with <link disabled> to make it tolerable. Ultimately, we wanted to offer a single stylesheet for our human (and agent) friends to control theming.

Having light-dark() makes it trivial to support dual color modes in a single stylesheet and doesn’t add too much weight (0.5kb gzip for ~500 variables). It also gives you the ability to switch themes mid-page.

:root {
	color-scheme: light dark;
	--bg-color: light-dark(white, black);
	--text-color: light-dark(black: white);
	/* ...etc */
}

/* Add hard-coded theme overrides */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

Adding [data-theme="dark"] to the body, or any element with color tokens defined, will force that section to be dark mode. The difference here between hanging variable definitions off a class is that you can respect the user preference without using JS to toggle, light-dark() does all the work.

Adding dark tier on a light theme is dramatic. Adding light tier on a dark theme sure would stand out. But when yielding light and dark modes over to the browser… something changes. In that situation hardcoding a theme mode into HTML loses a bit of meaning because I’m not controlling the theme anymore, the user is. What I actually want is the theme to be “opposite” the current theme. After a handful of attempts I think I came across a solution that’s easy to understand, maintain, and I even wrote a polyfill for you.

Automatic inversion with [data-theme=“inverted]

See the Pen [data-theme="inverted"] by Dave Rupert (@davatron5000) on CodePen.

The goal was to make it so that when the browser switched from light/dark modes, themed elements would switch to their inverse theme. The trick I uncovered was setting the current theme as a CSS variable:

:root {
	color-scheme: light dark;
	
	/* Initialize the theme variables */
	--theme: light; 
	@media (prefers-color-scheme: dark) {
		--theme: dark;
	}
}

/* Have data-theme use the variable */
[data-theme] { color-scheme: var(--theme); }

/* Update hard-coded themes to use the variable */
[data-theme="light"] { --theme: light; }
[data-theme="dark"] { --theme: dark; }

The reason we use manage --theme variable instead of purely color-scheme is because we can pass that into a style() query. An that’s the magic that enables inverted themes:

/* Add style query magic ✨ */
@container style(--theme: light) {
	[data-theme="inverted"] {
		--theme: dark;
	}
}

@container style(--theme: dark) {
	[data-theme="inverted"] {
		--theme: light;
	}
}

Again, the nice thing here is that we’re not creating two different trees of variables or re-redefining variables inside [data-theme="inverted"], we’re relying on light-dark() and color-scheme to do the heavy lifting. We’re contextually updating the color-scheme and letting the browser negotiate the cascade.

I added a .funky card theme to the demo to give an idea of how far you might be able to push this tech. Roman Kamorov noted in his post on Querying the Color Scheme something Vadim Makeev said on a Russian podcast that while this inversion trick is neat, people who prefer dark-mode (e.g. for medical reasons) probably want dark mode and not to be flash-banged mid-page. That’s something to think about and I think I have some ideas about that but I’d love to see/hear yours.

Polyfilling browser support

At the time of writing this trick only works in Safari 18+ and Edge/Chrome 111+. Firefox is the outlier but the good news is container style queries is on the roadmap for Interop 2026 and behind a flag in nightly. That gives you two options:

• Roll out a bespoke polyfill for [data-theme="inverted]
• Do nothing. Wait it out.

Given that I know the experience will auto-upgrade for Firefox users at some point this year, I’m prone to wait it out per the rules of progressive enhancement. If it falls back to the current theme, I don’t think the world falls over.

However, you probably support browsers outside the latest version and what’s acceptable for a fallback depends on your company’s understanding of the eventual consistency of browsers. iOS devices version-locked at Safari 17.4 are of particular concern for me, so I wrote an inverted theme polyfill.

The CSS style-query-support detection is pretty simple, but quirky.

/* Style query support check */
body {
  --syle-query-support: 0;
}

@container style(--theme) {
  body { --syle-query-support: 1 }
}

There’s a new @supports at-rule() function that would be more idiomatic, but you can’t detect at-rule function support with at-rule() so we have to do this variable hack. Ideally we could do this purely in JS with CSS.supports(), but alas. Booleans in CSS, what could go wrong?

That brings us to the JavaScript part which is pretty simple as well but comes with one big potential tradeoff…

/**
 * Polyfill for inverted themes using a `--theme` variable in a style query
 * ⚠️ The use of `getComputedStyle` can trigger layout and style recalcs
 */
(()=>{
  const isContainerStyleQueriesSupported = () => {
    const bodyElStyle = getComputedStyle(document.body);
    const hasStyleQueries = bodyElStyle.getPropertyValue("--syle-query-support");
    
    if(hasStyleQueries === "1") {
      return true;
    }
    return false;
  }
  
  if(!isContainerStyleQueriesSupported()) {
    const invertedThemes = document.querySelectorAll('[data-theme="inverted"]');
  
    invertedThemes.forEach((el) => {
      const elTheme = getComputedStyle(el).getPropertyValue("--theme");
      const invertedTheme = elTheme == "light" ? "dark" : "light";
      el.dataset.theme = invertedTheme;
    })
  }
})();

Because we need to get the computed value of --style-query-support, getComputedStyle is known to trigger style recalcs and layout reflows, effectively penalizing all users not just browsers that don’t support container style queries. I tested this out by putting the polyfill inside a setTimeout, turning on paint flashing, and checking the Performance Monitor panel and I didn’t see any recalcs or layout reflows, but your mileage may vary depending on your setup.

Anyways, happy inverting! Let me know if you do something cool with it or if you already figured this out 10 months ago and I didn’t see your blog post.

UPDATE: I’m just gonna put the answer at the top of this blog post to help anyone finding this. Do these things: Once all that is in place, doing a manual sync is in order at https://wordpress.com/settings/manage-connection/{YOUR_DOMAIN} And now the original post… I’ve got a Custom Post Type in WordPress. It’s called docs because it’s for […]

It’s a secret to everyone! This post is for RSS subscribers only. Read more about RSS Club.

I’ve heard the term “Ozempic face” for awhile. People have opinions about that one, but I tend to feel like we should be comfortable with bodies changing. There’s also “Ozempic butt” and there’s even “Ozempic penis”. I’ll let you search those up on your own but they’re also related to physical changes from losing weight.

I started Wegovy, a GLP-1 like Ozempic, in December and the weight line is trending down down. That’s a good place to be and while I’m not experiencing any of the above symptoms, there has been one noticeable change. One thing I wasn’t prepared for was a change to my dreaming and sure enough “Ozempic dreams” are a thing (at least on Reddit).

Since starting GLP-1 my dreams have been much more vivid. Colors are more colorful. Weirdness more weird. People more real. Dialogue more rich. Storylines are more complex and multi-layered, not linear. If I wake up in the middle of the night I can seamlessly resume at the previous checkpoint.

They nearly fall under the category of “lucid dreams” where you know you’re dreaming and can control them. It’s not every night, but when it happens I sleep harder and wake up more rested. Like most dreams I don’t remember the details after waking up, but I do remember the sensation of “Wow, this is a wild and complex dream.”

I’m curious what’s causing it: change in diet, calorie deficiency, blood sugar, or (as some claim) a hormone in the GLP-1? I don’t know and realize my experience is entirely anecdotal hearsay, but what a weird yet welcome side effect. Is this what dreams are like for people with better peptides?

I’ve watched a billion hours of YouTube and I’ve noticed a common trend: Whether that’s a drawing, a video game, a song, a cake, or a whole-ass off-grid house; I’ve learned that it’s fun to watch people make something. Since the beginning of humanity, the act of slapping two rocks together to make an arrowhead or a fire will draw a crowd. I feel like mankind has an innate curiosity to pause and say “Oooh, whatcha making?” We like it when others make. This might not even be unique to humans, have you ever seen a bowerbird nest? Incredible.

The Maker Movement harnessed that creative attention energy and built an entire subculture around it. I’ve been watching the same guy make a musical marble machine for ten years. Practical effects artists Adam Savage and Jamie Hyneman built their entire TV show Mythbusters around this premise. We are problem solvers, all of us. The process can often be as enjoyable as the final object. I’d go so far to say they built the empires of YouTube, TikTok, and Instagram on the same principle: it’s fun to watch (hot) people make something even if that “something” is a video about fingernails.

I harp on my kids from time-to-time about making. We’re pretty permissive about device time but I frequently try to impart that we give them these devices as tools for creativity, not just brainrot. Kids are innately creative, so they understand my intent. But black rectangles are powerful energy vampires. From time to time though I’m blessed with an artwork, animation, a short film, an overdubbed movie trailer, or a half-built Roblox game. And those go on the proverbial refrigerator in my heart.

I suppose there’s limits to this thesis. Watching someone make a murder machine wouldn’t be fun. Watching someone make war, not fun.

Watching someone make numbers by typing into the random number generator isn’t that fun. But if there’s some novel, reason, or idea behind it… you could convince me it isn’t slop. I don’t particularly find the medium of decoupage enjoyable but with the right artistic mindset, curiosity, or obsession… sure? And if a bird assembles a house from trash, well I love that.

Some like to draw thin blurry lines and some prefer to draw thick crisp lines, I love to see and read both. And I’m glad the term “slop” exists because we as a creative species created a label for the abstract idea of thoughtless outputs from a thoughtless content extruder.

So, make something. Or not. I don’t care. Actually, I do care. Please make something. With your hands, or your brain, or your feet… wait, no that has other connotations.

Four years ago I wrote about something that has long puzzled me in the world of front-end development. Trust:

The mindset I’ve noticed is that many developers are suspicious of browser features but trusting of third-party libraries.

Developers are more likely to trust, say, Bootstrap than they are to trust CSS grid or custom properties. Developers are more likely to trust React than they are to trust web components.

That post got some thoughtful responses but I never really understood the imbalance of trust and suspicion:

I’m kind of confused by this prevalent mindset of trusting third-party code more than built-in browser features.

But something happened recently that helped me understand that mindset better.

I wrote a while back about how the datalist element on iOS has been completely fucked up. It’s worse than if Safari simply didn’t support it.

Breaking the web like that should be a five-alarm fire, but nobody is in any rush to fix it. I recall a similar lackadaisical attitude when Safari completely broke their implentation of IndexedDB.

I had it in my head that browser features followed a forward path generally. They’d be iterated on and improved on to iron out any glitches, but it was reasonable to expect things to get better with each new version of a browser.

Now I see that’s not necessarily the case.

Had I used an over-engineered JavaScript library instead of the datalist element, I wouldn’t be facing the current situation of having to use browser-sniffing to avoid sending a standard HTML element to any browser on iOS.

Sure, that third-party JavaScript would mean that users are downloading more code, and it probably wouldn’t work well with assistive technology, but as long as I didn’t touch it, it would continue to work. That should be true of web standards—I should be able to use them secure in the knowledge that they won’t suddenly shit the bed.

Perhaps I should be grateful to Apple for dispelling my naïveté. I now have much more empathy and understanding for web developers who are suspicious of web standards and prefer to use third-party libraries instead.

Good job, Apple. Happy anniversary.

I designed an information-rich website for The Shared Homeland Paradigm, using typography and graphics to clearly and visually explain complex political ideas. Here’s how I approached it.

The Shared Homeland Paradigm is a collaboration between A Land for All, University College London (UCL,) and the University of the Pacific. The project aims to develop a new conceptual basis for configuring space and rights in Palestine-Israel. The project came via a recommendation from ClearLeft.

Typography design

I always start with type, because it sets the tone for everything else, and I’ve developed a process for selecting type that balances personality with readability. For this project, I needed a readable typeface which isn’t overly academic-looking.

That process lets me shortlist a handful of typeface options to present to a client. I don’t ask clients to make the decision, as that’s my job. Instead, I help them respond to how type feels. I asked the team about which typefaces “felt right” to them.

Understanding the voice

Typography isn’t just about readability—it’s about a typeface’s tone of voice. I always demonstrate the characteristics of several typefaces to find out what they say. Are they neutral or opinionated? Approachable but still serious?

I explore how they look in branding, especially an organisation’s name, as that provides the first impression and can set the tone for the rest of a design.

Then, I test typefaces in real contexts—headlines, lists, and paragraphs—so I can see how they behave in the design, not just in isolation. I create what I call type sheets and always use copy as close as possible to what I’ll be setting in the design. If copy’s not available—which it often isn’t at the start of a project—I write my own, rather than use dummy lorem ipsum.

I study individual letterforms, looking for specific characters that can either add personality through a distinctive design or could be dealbreakers if they don’t look or feel right.

I also look at the design of numerals and special characters, which is important when client content will contain facts and figures.

Finally, I settled on Bankside Sans—designed by Dalton Maag. Bankside Sans has “clear, classic letter shapes (that) convey intent, while its extreme widths deliver impact.” It has a license fee that’s well worth paying for a variable font that perfectly balances approachability and seriousness.

Working through creative concepts

One of the parts of a project I enjoy the most is thinking of creative ways to tell stories through my choice of graphics, illustrations, and photography. Looking back through my folders, I’m reminded how many ideas never make it past a first iteration—and that’s never a failure. Design decisions are often subjective, so every attempt becomes a conversation.

My first creative concept included illustrations of birds which are native to Israel-Palestine, including the Eurasian Hoopoe and the Palestine Sunbird. Birds cross national boundaries, and using them seemed like a concept worth developing. But the Shared Homeland Paradigm team thought differently.

Instead, I incorporated topographical maps of the region and other ancient maps which were drawn before the state of Israel was formed. This idea resonated with the team.

Designing the colour palette

Colour is highly evocative and needs careful consideration, especially when dealing with sensitive subjects like Israel-Palestine. I started by studying the colours in the region’s flags, avoiding Israeli blue, and Arabic green and red.

First, I devised a new set of colours which have cultural associations for people in the region and included:

• Yellow: Happiness, optimism and warmth
• Orange: Love, happiness, humility and health
• White: Absence of colour, represents death and mourning
• Black: Can represent rebirth and mourning

Then, I created a second palette of blues, greens, and greys, which represent the earth, sea, and sky.

This second palette combined well with a set of simplified shapes, which represent populated areas overlaid on a map made before 1948.

Pulling everything together

The Shared Homeland Paradigm team needed a website on which they could add:

• Background papers
• Resources
• Scenarios for peace in the region
• Terms for their Alternative Lexicon

To make that happen, I developed their website using the open source Eleventy CMS (Now Build Awesome.)

When I design content-rich websites, I use layout, typography, and graphics to tell the story—not just the words on the page. This project brought together everything I care about in story-led web design—graphic design, layout, and typography, working together.

My typeface choice echoes their voice, and the SVG graphics help to tell their story. For organisations like The Shared Homeland Paradigm, a website isn’t just about presenting information. It’s about helping people understand complex issues and engage with them. Websites that make more people aware of sensitive subjects, help them understand the issues, and show how we might solve them are always the ones I want to work on.

I’m just back from the United States 50th state, a staggering 2,500 miles from the mainland. For the next week or two, I’ll pronounce it Ha-Vie-ee, like how it’s pronounced in the native Hawaiian language. A language, by the way, that only a few thousand people speak natively, no doubt due to the 91 years […]

The Academy of Scoring Arts just launched its new website. It’s a community of arrangers, composers, and musicians that helps industry professionals develop their craft through events and video tutorials.

The Academy of Scoring Arts is for professionals at every stage of their careers, so the website needed to do more than present information. It had to clearly communicate the benefits of joining, make video content easier to discover and consume, promote events, and ultimately increase member sign-ups.

A clearer, more confident direction

This was a redesign of a membership-focused website for a music organisation, with a strong emphasis on conversion, content discovery, and editorial-style layout. The Academy of Scoring Arts’ previous website felt bland and dated. It lacked a clear visual identity, and the benefits of joining weren’t obvious. I wanted to change that. The new design is bold, confident, and more expressive—better reflecting the energy of the Academy’s community while still looking professional.

That meant walking a fine line between personality and professionalism. Too safe, and the design fades into the background. Too expressive, and it risks undermining trust.

Typography as the defining element

Type plays a central role in the design. I chose Bankside Sans by Dalton Maag. It’s an early British grotesque reinterpreted for modern use, with clear letterforms that give it authority, while its extreme widths add impact and flexibility.

I used it to establish a strong, consistent voice across the site:

• Bold, condensed headlines
• Careful attention to typographic detail
• Layouts which rely on type as much as imagery

The result is a design where type isn’t just functional, it’s a defining characteristic.

A restrained colour system

The colour palette I chose is deliberately limited. Light and dark form the foundation, with just two accent colours used sparingly. There’s no shading or visual noise—everything is clean, direct, and intentional. This restraint helps the typography and layout do more of the work, and gives the site a confident, considered feel.

Structured layouts with editorial influence

Unlike some of my more expressive work, this design uses a straightforward 12-column grid. But within that structure, I leaned heavily on modular, editorial-inspired layouts—particularly for the video library and gallery.

These modular systems:

• Make content easier to scan
• Create rhythm and variation
• Allow the design to scale without becoming repetitive

It’s a reminder that even a conventional grid can feel distinctive when it’s used with intent.

Designing for clarity and conversion

The most important goal of this project was to increase member sign-ups. That meant making the value of joining obvious, and reducing friction wherever possible. I focused on:

• Better organisation of video content
• Clearer messaging around benefits
• Deliberate calls to action
• Stronger visual hierarchy

The result is a website that looks better—and works harder.

Interaction and detail

The interaction design for The Academy of Scoring Arts is subtle. There are no large animated elements, just micro-interactions and hover effects that add polish without distracting from the content.

Bringing it all together

This project reinforces something I believe strongly: even with conventional content and a standard grid, a website can feel distinctive, communicate clearly, and drive real results when design decisions are made with intent. I’m especially pleased at how well Sush Kelly implemented my design into the Academy’s WordPress CMS.

Websites like this, for The Academy of Scoring Arts, is the kind of work I like to focus on—designing websites for creative organisations where editorial layout, typography, and structure work together to improve clarity and conversion.

I designed a website for composer Begoña Pereda using typography and animated SVG graphics to reflect her personality and musical style. Here’s how I approached it.

Living and working in Mexico City, Begoña Pereda is a composer for films and video games. She’s an up-and-coming young artist who collaborates with filmmakers and makes music that supports video gameplay and narratives. Bego came to me on the recommendation of another composer client.

Bego was looking for a website to demonstrate her work and introduce herself to new clients. She wanted something which reflects her interests, personality, and the experience of working with her. This is exactly the type of project I love to work on.

Type design

I always start with type, because it sets the tone for everything else. I’ve developed a process for selecting type that balances personality with readability. The typeface Bego chose for her YouTube showreel gave me some idea of the style she preferred: irregular, quirky, and unconventional.

Over the years, I’ve developed a process that lets me shortlist a handful of typeface options to present to a client. When I do that, I don’t ask clients to choose typefaces—that’s my job. Instead, I help them respond to how type feels. I asked Bego about which typefaces “felt right” for her and how she wanted to express herself.

Understanding the tone

Typography isn’t just about readability—it’s about how something feels. That can be very subjective, so I always demonstrate the characteristics of several typefaces to find out how they make someone feel. Are they formal or informal? Approachable but still professional?

I explore how they look in branding, especially a person’s name, as that is possibly the most personal design element I can work on.

Testing type in context

I also need to bear in mind other typefaces I might include in a design. In Bego’s case, this involved evaluating how the combination of a highly stylised typeface with another, more readable one for setting longer passages of text.

For stylised typefaces like this one, I need to understand how much text I can set and the size I need to make it legible in both upper and lowercase.

Writing copy for type testing

I always test typefaces in real contexts—names, paragraphs, and combinations—so I can see how they behave in the design, not just in isolation. I create what I call type sheets to determine at what size I should switch to a more readable typeface. I always use copy as close as possible to what I’ll be setting in the design. If copy’s not available—which it often isn’t at the start of a project—I write my own, rather than use dummy lorem ipsum.

I study individual letterforms, looking for specific characters that can either add personality through a distinctive design or could be dealbreakers if they don’t look or feel right. This can be especially important when considering the letters in a company, person, or product’s name.

I also look at the design of numerals and special characters, which is important when client content will contain facts and figures.

For someone like Bego, who speaks Spanish, I also need to ensure that any typeface I choose includes any accents, special characters, and punctuation we don’t have in English.

Finally, I settled on Fido—designed by Canada Type—for branding, headlines, and short blocks of text, and paired it with Archivo Condensed—by Omnibus-Type—for longer passages of copy. Archivo is available from Google, whereas Fido has a license fee I was happy to pay. This combination gave me a typographic system that felt distinctive but still readable.

Animating SVGs with CSS and JavaScript

I use a combination of CSS and JavaScript to animate SVG graphics—CSS for continuous motion and JavaScript to control when animations start and stop.

Bego loves retro music tech, especially cassette tapes and reel-to-reel tape recorders. I wanted to recreate them both using SVG and explore ways to connect animation with playing her music.

In my cassette tape, I created a base layer which contains its static elements. I optimise SVGs by reducing points, merging paths, and stripping unnecessary data to keep them lightweight. After optimising it with SVGOMG, the cassette graphic weighs less than 12 KB.

I separate every SVG into a static base layer and independent animated elements. That way, I can control motion without affecting the rest of the graphic. Then, I added the animated elements, including the cassette spools and tape, which moves between them.

By naming paths and carefully structuring the SVG, I can reuse the same graphic in multiple variations—changing colours, labels, and details without duplicating the artwork. I was able to make as many cassette versions as I needed, with different colour branding, labels, and plastic cases.

I used the same approach for Bego’s animated tape reels and covers, where the reel slides out of its cover when the cursor moves over it.

Combining CSS animation with JavaScript control

For more complex interactions, I use JavaScript to control when animations run, rather than how they move. The large reel-to-reel tape recorder on Bego’s home page was by far the most complex graphic, even though it again weighs less than 12 KB.

I broke this graphic down into its animated and static components.

I use CSS for continuous, predictable animation like rotation and movement, and JavaScript to control state—starting and stopping animations based on user interaction or audio playback. CSS handles the motion, while JavaScript adds an is-playing attribute so animations only run when Bego’s music is playing.

Designing for interaction

Static deliverables like PDFs, and even interactive tools like Figma, can give an indication of how a design will feel. But they can’t replicate the experience of interacting with a real website. For that, I need to work in the browser using HTML, CSS, JavaScript, and SVG.

I spend several days experimenting with interactions—building, testing, and revisiting a design repeatedly to ensure it still feels right. If it doesn’t feel right in the browser, it isn’t right, no matter how good it looked in a mockup.

Bringing it all together

When I design portfolio websites for artists like Bego, I try to express who they are, not just present their work. This project brought together everything I care about in web design—animation, illustration, layout, and typography working as a single system.

The type choices shaped the tone. The SVG graphics gave the design personality, and animation brought it to life—subtly, but meaningfully. For artists like Bego, a website isn’t just a portfolio. It’s an experience. And that experience should reflect not just what they make, but who they are.

That’s what I’m always aiming for.

If you’ve followed my work for any length of time, you’ll know I have strong feelings about one-size-fits-all processes. What we bring to the table as UX professionals isn’t a fixed methodology. It’s a toolkit of approaches (top task analysis, persona creation, customer journey mapping, diary studies, surveys) and, more importantly, years of experience knowing […]

People of Brighton, mark your calendars: Saturday, April 4th. That’s when Salter Cane will be playing in The Hope And Ruin.

It’s not just Salter Cane though. We’ll be joined by Skyscrapers from Lewes, and The Equatorial Group from Eastbourne. We’ve played with them before, and they’re superb!

Tickets are available now. They’re £8 in advance. It’ll be £10 on the door. So please get your ticket in advance!

Doors are at 7:30pm. Skyscrapers will be on stage at 8pm, The Equatorial group at 9pm, and Salter Cane at 10pm.

I’m really, really looking forward to rocking out playing songs from our newest album and I would love it if you could make it.

See you there!

I was in the library the weekend before last when I spotted something on the shelf of recently-returned books. Project Hail Mary by Andy Weir.

I knew the film adaptation was coming out later that week. Ideally, I’d like to read the book before seeing the film. It would be a race against time! The film would be out in days, and the book is over 450 pages long. Could this nerdy white guy rise to challenge and overcome the odds?

As it turned out, it wasn’t all that arduous. Project Hail Mary is a real page-turner, just like Andy Weir’s previous book, The Martian.

But his books are worryingly regressive. The so-called golden age of science fiction featured plenty of plucky white science guys saving the day with their brainpower in books written by white science guys. Andy Weir’s books have a similar outlook.

On the other hand, they’re undeniably fun. And who knows? Maybe his next book will feature a protaganist that isn’t an aw-shucks white guy.

(Update: multiple people have pointed out that I completely missed that Andy Weir’s other book, Artemis, features a refreshingly different kind of protaganist—phew!)

Project Hail Mary is packed with plenty of plausible-sounding science. Perhaps too much. After a while it felt like elements were being added to the story to showcase the author’s smarts rather than to propel the plot.

Over all, the book is good entertaining fun but a bit baggy and could’ve been edited down somewhat.

I was interested to see how the film would translate the science from the written page to the screen. Very commendably, as it turns out.

The film does a great job of avoiding expositional blackboard sequences or explanatory dialogue. Wherever possible, it shows rather than tells. It helps that it doesn’t underestimate what the audience can handle.

Above all, it’s entertaining. Popcorn was invented for this kind of film. Ryan Gosling does his usual entertaining shtick, though I kept thinking that Sam Rockwell would’ve really delivered the goods.

The film trims the book down to its essentials. I didn’t miss any of the elements they chose to cut. I did spot one glaring mistake, but that was continuity error rather than anything to do with the science.

Project Hail Mary the film is better than Project Hail Mary the book. Go see it. And if it leaves you wishing for more, then you can always read the book.

The best defense is to write humanly.

The post Dine ’n em-dash appeared first on Jeffrey Zeldman Presents.

My social feed has divided mostly into two camps—those who can now only talk about how excited they are about AI, and those who are refusing to use it at all. I’m somewhat bemused by both of these positions, I see LLMs as a useful tool, in the way that I see spreadsheets as a […]

Bluesky can't abandon the developers who made a bet on AT Proto, so they should give the protocol to a standards body while catching up on UX.—Dave Winer

The post RSS creator on Bluesky & AT Proto appeared first on Jeffrey Zeldman Presents.

The Gell-Mann Amnesia Effect of AI is a pretty well documented phenomenon:

The Gell-Mann amnesia effect is a cognitive bias describing the tendency of individuals to critically assess media reports in a domain they are knowledgeable about, yet continue to trust reporting in other areas despite recognizing similar potential inaccuracies.

Summarizing, AI sounds like an incredible genius synthesizing the world’s knowledge right up until you ask it about the thing you know about, then it’s an idiot. Even knowing about this phenomenon and having experienced it countless times, LLMs have an intoxicating quality to them.

If there’s one thing LLMs do well, it’s delivering an enormous blast of dopamine if they do a good job on the first try. That “if” does a lot of heavy lifting, but when it happens you start to believe the idea that the multi-modal chat box could make you faster and infinitely capable. A hop and a skip and hundreds of dollars in tokens later, you made something that would take lifetimes of learning to create.

The marketing around Generative AI is that every person can be their own Designer, Developer, Researcher, Content Writer, Video Producer, and Podcast Editor. With the right skills.md files everything will fall into place. We will automate all automatable tasks. The experience will be “frictionless”.

You’ll be able to automate away the jobs you don’t enjoy…
And the jobs you don’t know how to do…
And the people who do those jobs…
The people you don’t enjoy…

You won’t need to talk to or wait on anyone. You can automate away anything or anyone that stands in your way. You will reduce costs. You will be richer. It will be frictionless.

Sometimes I feel like there’s a palpable tension in the air as if we’re waiting to see whether AI will replace designers or engineers first. Designers empowered by AI might feel those pesky nay-saying, opinionated engineers aren’t needed anymore. Engineers empowered with AI might feel like AI creates designs that are good enough for most situations. Backend engineers feel like frontend engineering is a solved problem. Frontend engineers know scaffolding a CRUD app or an entire backend API is simple fodder for the agent. Meanwhile, management cackles in their leather chairs saying “Let them fight…”

I think it’s a dangerous place to be when we start to consider people as friction.

That’s because we know Gell-Mann is real. We know there’s an optimism bias the size of the sun blinding us to the actual quality of what the machine is producing. We need knowledgeable people to share what they know to improve the quality of our work, generated or otherwise. We even need ignorant people to make sure we can break ideas down into their simplest form that everyone, agents or human, understand. People can have bad attitudes, be shitty, and have wrong opinions… but people are not friction. An LLM may be able to autocorrect its way into a plausible human response, but it’s not people. It doesn’t care if it’s right or wrong. The money and hype surrounding it acts as a shield to its reputation. LLMs make up answers if it doesn’t have enough context and they fall over if it has too much context. It amplifies good patterns the same as bad patterns. And it glazes you with flattering language the entire time so that chart go up.

People, the context-bearers, have experience and capabilities that machines might never understand encoded in our muscles and memory. I’m on record saying I despise nuance –and I do– but it’s more important than ever to be able to connect to our fellow humans over this nuance so our world is not paved over by contextless opinions from ill-informed robots. Empower and believe people over machines.

Last week I spoke at the very lovely Web Day Out in Brighton. My talk was about browser support, based on the work I’ve done over the past almost five years on Baseline. I ran through the various things you need to consider when deciding whether to use features that don’t meet your Baseline target. […]

You should come to UX London in the first week of June. Why? Because it’s going to be awesome, that’s why!

You probably knew that already. You probably already decided to get a ticket because you’re smart like that.

But don’t dilly-dally! Early-bird tickets are available now but in just over one week, they won’t be.

So get your ticket by Friday, March 27th. If you get your ticket now, it’s a win for everyone. You get a cheaper ticket. We know for sure that you’re coming.

Every time someone buys a conference ticket in plenty of time, the conference organiser sleeps a little better at night.

If you need to convince your boss, you can give them these reasons to attend. I even made an email template you can use a starting point for making the case.

You could come for all three days of UX London, or you can pick just one day.

Tuesday, June 2nd is discovery day with a focus on user research. You’ll hear from great speakers like Melin Edomwonyi and Maria Isachenko as well as getting workshops from Natasha den Dekker and Feyikemi Akinwolemiwa.

Wednesday, June 3rd is design day where it’s all about the nitty-gritty details. Not only will there be great talks from Andrea Grigsby, Julia Petretta, and Hidde de Vries, there’s going to be the best-named workshop ever from my colleague Chris How: Yippee IA!

Thursday, June 4th is delivery with a focus on design systems and collaboration. Alex Edwards, Lucy Blackwell, Rachel Ilan Simpson and Ben Callahan will all be giving talks (and Ben’s doing a workshop too).

That’s not even close to the final line-up. I’m confirming more speakers right now and getting very, very excited about how it’s all shaping up.

You know you don’t want to miss this one. So get your early-bird ticket now while you still can.

I’ve accepted an invitation to speak at Smashing’s (Online) Conference Meets Style Sheets. It’s free on Wednesday, May 6th. I named my talk In-N-Out Styling. Long time CSS evangelist Chris Coyier will talk about how you can style things on their way into view on a webpage, and on their way out. Of course, with […]

When I was summing up my reading habits in 2022 I said:

I think the lesson this year is: you can’t go wrong with Octavia E. Butler or Ursula K. Le Guin.

I stand by that. But maybe I’d recommend some Ursula K. Le Guin books more than others.

A Fisherman Of The Inland Sea is a good collection of short stories. But it’s not a great collection of short stories. If you’re looking for a great collection of short stories, read The Unreal and the Real.

When it comes to Ursula K. Le Guin, the standard is always going to be high so even when the stories aren’t her best, they’re still better than the output of most other sci-fi writers.

My slight disappointment with A Fisherman Of The Inland Sea isn’t so much with the stories themselves but with the collection.

To begin with, there are four unconnected short stories. That’s fine. It’s a short story collection after all.

But then after that there are three interconnected short stories from the Hainish cycle. They’re the best part of this book. That just makes the preceding stories look like filler.

If those three stories had been released as little collection, it would be a miniature classic. As it stands, you get more of a mixed bag.

But still, it’s worth reading this collection for those three stories alone.

On March 12th, 1989, Tim Berners-Lee submitted Information Management: A Proposal. This would form the basis of what became the World Wide Web.

On March 12th, 2026, Web Day Out happened in Brighton.

Coincidence?

Yes. Yes, it is a coincidence. But it’s a pretty nice coincidence, you must admit.

It was a day dedicated to the World Wide Web. Not just the foundational languages of the web—HTML, CSS, and JavaScript—but also the foundational ideas of the web.

“Share what you know!” That was the original motto of the World Wide Web project. That was the motto of Web Day Out too.

Look, I’m biased because I put the line-up together but honestly, all of the speakers were superb! So much knowledge delivered in such entertaining fashion.

I had a blast. And I’ll give myself a little pat on the back for how I grouped the talks into rhyming couplets:

Browsers: Jemima talked about what you can do with just HTML and CSS these days, and Rachel followed up with how to come up with your own browser support strategy.

Performance: Aleth made the case for multi-page progressive web apps that work under any network conditions, and Harry followed up with an impassioned rant about how much time and energy has been wasted on over-engineered single-page apps that ignore what browsers can do.

Styling: Manuel walked us through a whole new approach to writing modern CSS, and Rich followed up with a whirlwind tour of all the great typographic possibilities in CSS.

Standards Jake took us on the standards journey to customisable select elements, including anchor positioning and popovers, and then Lola showed us exactly what it takes to add a new feature to a web browser.

Everything flowed together really nicely.

I was a little apprehensive going into Web Day Out that it would just be preaching to the converted. And sure, there were plenty of veteran devs there who already knew the value of progressive enhancement and making the most of web standards. But I was gratified to also see lots of younger faces in the crowd.

I was talking to one young developer afterwards and she told me what an eye-opening experience it was. Whereas before she would have defaulted to a framework-driven single-page app for everything, now she’s got the knowledge to make an appropriate architectural choice.

Mission accomplished!

If you couldn’t make it to Web Day Out and you want to experience some RAMO, here’s the chatter on Bluesky and Mastodon, lovely photos by Marc, a post by Dave, and a lovely post by Amber.

Thank you so much to everyone who came. I think you’ll agree it was a most excellent day out.

Lately, in work conversations, I find myself fighting a lifelong tendency to provide way more context than is absolutely required. If you ask me to okay your work, for example, I may respond with an essay on what delighted me about it. The teaching gene, plus the exuberance of writing and thinking clearly, compel me […]

The post Too Many Notes appeared first on Jeffrey Zeldman Presents.

I was at a school function the other day where the 2nd graders performed a bunch of Aesop’s Fabels and it was great. It was a double-header with 3rd graders who then read prepared reports on famous people. It was cross-disciplinary thing as the kids brought props from design class, costumes from performing arts, and […]

I mean… it’s not really, of course. I just thought such a thing would start to trickle out to people’s minds as agentic workflows start to take hold. AI agents are already up in your codebase fingerbanging whole batches of files on command. What’s the difference between a CMS taking some content and smashing it […]

Cover art for the 1971 prog-rock LP “Fearless,” by British band Family features a distinctive, die-cut cover design depicting the five band members gradually morphing into a single entity combining features of them all. Tom Brigham, a high school student and friend of mine the year the LP was released, had not yet invented morphing […]

The post A die-cut above appeared first on Jeffrey Zeldman Presents.

It can personalize and reduce friction. It can also wreck consistency and muscle memory. Here is my take on the latest buzzword.

Jerod Santo: After 13 years, 1042 podcasts, 452 newsletters, and countless friends made along the way… it’s time to say goodbye to The Changelog. I shipped my final News last Monday and Adam shipped our Friends finale yesterday. Huge congrats Jerod! Heck of a legacy.

The Session has been online in some form since the late 1990s. That’s long before web fonts existed.

To begin with, Times New Roman was the only game in town if you wanted serif type on a website. When Microsoft introduced Georgia it was a godsend. A beautiful typeface designed by Matthew Carter for the screen. I put it right at the start of my font stack for The Session.

Later, web fonts came along. Boy, does that short sentence belie the drama! There were very heated discussions about whether web browsers should provide this ability at all, and what it would mean for type foundries.

Microsoft led the way with their prorietary EOT format. Then everyone agreed on WOFF. Finally we got WOFF2, Electric Boogaloo.

Perhaps more important than that, we got intermediaries. Typekit, Fontdeck, and then the big daddy, Google Fonts.

That’s pretty much the state of play today. Oh yeah, and we’ve got variable fonts now.

I remember Nick Sherman presenting the idea of variable fonts at an Ampersand event years ago. I remember thinking “great idea, but it’ll never happen.” Pure science fiction. I thought the same thing when I first saw a conference presentation about a miraculous image format called Scalable Vector Graphics.

Sometimes I like to stop and take stock of what we take for granted in web browsers now. Web fonts. Variable web fonts. SVG. Flexbox. Grid. Media queries. Container queries. Fluid typography. And I haven’t even mentioned how we were once limited to just 216 colours on the web.

Georgia

Given all the advances in web typography, you might be wondering how my font strategy for The Session changed over the years.

It didn’t.

I mean, sure, I added fluid typography. That was a natural extension of my love for liquid layouts and, later, responsive design. But the font stack itself? That was still Georgia all the way.

Y’see, performance has always been a top priority for The Session. If I was going to replace a system font with a web font that the user had to download, it really needed to be worth it.

Over the years I dabbled with different typefaces but none of them felt quite right to me. And I still think Georgia is a beautiful typeface.

“But your website will look like lots of other websites!” some may cry. That used to be true when all we had was system fonts. But now that web fonts have become the norm, it’s actually pretty unusual to see Georgia in the wild.

Lora

Recently I found a font I liked. Part of why I like it is that it shares a lot of qualities with Georgia. It’s Lora by Olga Karpushina and Alexei Vanyashin.

I started to dabble with it and began seriously contemplating using it on The Session.

It’s a variable font, which is great. But actually, I’m not using that many weights on The Session. I could potentially just use a non-variable variety. It comes in fixed weights of regular, medium, semibold, and bold.

Alas, the regular weight (400) is a bit too light and the medium weight (500) is a bit too heavy. My goldilocks font weight is more like 450.

Okay, so the variable font it is. That also allows me to play around with some subtle variations in weights. As the font size gets bigger for headings, the font weight can reduce ever so slightly. And I can adjust the overall font weight down in dark mode (there’s no grading feature in this font, alas).

Subsetting

Lora supports a lot of alphabets, which is great—quite a few alphabets turn up on The Session occasionally. But this means that the font file size is quite large. 84K.

Subsetting to the rescue!

I created a subset of Lora that has everything except Cyrillic, Greek, and Latin Extended-B. I created another subset that only has Cyrillic, Greek, and Latin Extended-B. Now I’ve got two separate font files that are 48K and 41K in size.

I wrote two @font-face declarations for the two files. They’ve got the same font-family (Lora), the same font-weight (400 700), and the same font-style (normal) but they’ve got different values for unicode-range. That way, browsers know to only use appropriate file when characters on the page actually match the unicode range.

The first file is definitely going to be used. The second one might not even be needed on most pages.

I want to prioritise the loading of that first subsetted font file so it gets referenced in a link element with rel="preload".

The switcheroo

As well as file size, my other concern was how the swapping from Georgia to Lora would be perceived, especially on a slow connection. I wanted to avoid any visible rejiggering of the content.

This is where size-adjust comes in, along with its compadres ascent-override and descent-override.

Rather than adjusting the default size of Lora to match that of Georgia, I want to do it the other way around; adjust the fallback font to match the web font.

Here’s how I’m doing it:

@font-face {
    font-family: 'Fallback for Lora';
    src: local('Georgia');
    size-adjust: 105.77%;
    ascent-override: 95.11%;
    descent-override: 25.9%;
}

And then my font stack is:

font-family: Lora, 'Fallback for Lora', Georgia, serif;

It’s highly unlikely that any device out there has a system font called “Fallback for Lora” so I can be pretty confident that the @font-face adjustment rules will only get applied to browsers that have the right local font, Georgia.

But where did those magic numbers come from for size-adjust, ascent-override, and descent-override?

They came from Katie Hempenius. As well as maintaing a repo of font metrics, she provides the formula needed to calculate all three values. Or you could use this handy tool to eyeball it.

With that, Georgia gets swapped out for Lora with a minimum of layout shift.

First-timers and repeat visitors

Even with the layout shift taken care of, do I want to serve up web fonts to someone on a slow connection?

It depends. Specifically, it depends on whether it’s their first time visiting.

The Session already treats first time visitors differently to repeat visitors. The first time you visit the site, critical CSS is embedded in the head of the HTML page instead of being referenced in an external style sheet. Only once the page has loaded does the full style sheet also get downloaded and cached.

I decided that my @font-face rules pointing to the web fonts are not critical CSS. If it’s your first time visiting, those CSS rules only get downloaded after the page is done loading.

And unless you’re on a fast connection, you won’t see Georgia get swapped out for Lora. That’s because I’ve gone with a font-display value of “optional”.

Most people use “swap”. Some people use “fallback”. You’ve got to be pretty hardcore to use “optional”.

But the next page you go to, or the next time you come to the site, you more than likely will see Lora straight away. That’s because of the service worker I’ve got quietly putting static assets into the Cache API: CSS, JavaScript, and now web fonts.

So even though I’m prioritising snappy performance over visual consistency, it’s a trade-off that only really comes into play for first visits.

Next

I’m pretty happy with the overall strategy. Still, I’m not going to just set it and forget it. I’ll be monitoring the CRUX data for The Session keeping a particular eye on cumulative layout shift.

Before adding web fonts, the cumulative layout shift on The Session was zero. I think I’ve taken all the necessary steps to keep it nice and low, but if I’m wrong I’ll need to revisit my strategy.

Update: Big thanks to Roel Nieskens—of Wakamai Fondue fame—who managed to get the file size of my main subsetted font down even further; bedankt!

Juicy intro from Nikita Prokopov:

The chances of macOS actually running an automatic update on my machines is super low. Even if I OK the “Update Tonight?” prompt, there is no way it actually goes through, because I’ll have apps open that prevent the restart. iTerm is a big one, that one won’t just quit on command. But even tabs […]

In my previous post, I mentioned that I’ve used the web install API in production. Specifically, I’ve used it on The Session. In order to do that, I had to register for the origin trial.

I’ve just signed up for another origin trial. This time it’s for the proposed focusgroup attribute:

The focusgroup HTML attribute is a proposed declarative way to add keyboard arrow-key navigation to composite widgets such as toolbars, tablists, menus, listboxes, etc. without writing any roving-tabindex JavaScript. One attribute replaces hundreds of lines of boilerplate.

I’ve got an HTML web component on The Session called tab-controls. And yes, there’s a bunch of code in there to listen for keyboard events and respond appropriately. I would very much like to rip that code out.

So now that I’ve opted into the origin trial, I’ve added this to my HTML:

<tab-controls role="tablist" focusgroup="tablist">

If this focusgroup attribute takes off, I’ll be able to remove the role attribute but for now, it’s very much needed.

In the JavaScript for my tab-controls custom element, I need to be able to detect support for focusgroup. Here’s how I’m doing it:

if (!this.focusgroup) {
// do all my key handling stuff here
}

Here’s the important thing: don’t use getAttribute('focusgroup') to test for browser support. That will return true if the attribute is in the HTML. But the attribute will only get converted into a property if the browser understands it.

Jake has a lot more detail on the differences between attributes and properties.

Anyway, I figured I’d share that little snippet in case you too were interested in trying out the focusgroup proposal using progressive enhancement.

Round One of Mad CSS is out on YouTube!

Lars Mensel: … the only way out of the delusion that AI can replace all of us is to do good meaningful work, and to appreciate good work when we see it.

Three podcasts for the price of one. One Footer in the Grave, Troika, and Unfinished Business. In this special crossover episode, Rich and I are joined by Jon Hicks and Marcus Lillington to discuss which three tracks we’d want with us if we were marooned on a deserted planet.

Listen to all tracks from this episode on Apple Music.

Sponsor Unfinished Business

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

Remembrance of beats passed.

The post My brother, the rhythmic conceptualist appeared first on Jeffrey Zeldman Presents.

AI can design something adequate. It still struggles with context, trade-offs, and taste. Here is what changes, and what does not.

In this episode of Unfinished Business, Rich and I talk about how AI coding tools fit into our workflows at ClearLeft and Stuff & Nonsense. Then, I explain how I used AI to help me build Sho!io, a new app for sharing designs.

Sponsor Unfinished Business

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

Know your web design history.

The post What a year that was. appeared first on Jeffrey Zeldman Presents.

In the first few minutes, Ruby says to me, “This is like The Giving Tree“, and by the end, I was like, “OK, you’re right.”

Pitching isn’t bragging.

The post Advice for job seekers appeared first on Jeffrey Zeldman Presents.

Is your website copy invisible? Three quick tests to find out if your headlines are too generic to differentiate you, and how to fix them.

If I can make it smaller, I should.

If I can make it dumber, I should.

Smaller, dumber things have more applications, go more places, and require less maintenance.

I had a small, intrusive realization the other day that computers and the internet are probably bad for me. I mean that beyond the general advice to touch grass. From an ADHD and generalized anxiety perspective, computers and the internet have become an endless supply of poison pills for my brain; feeds full of constant dopamine hits with doom at every turn.

This is hard to accept because a lot of my work, hobbies, education, entertainment, news, communities, and curiosities are all on the internet. I love the internet, it’s a big part of who I am today, but I understand how its incentive structures harm me. I’m not planning to unplug and go off-grid yet, but it did inspire me to come up with a “priority of constituencies” for my idle hands and downtime:

Instruments over pads of paper over laptop over tablet over phone.

Cooling my heels at the drugstore.

The post American healthcare appeared first on Jeffrey Zeldman Presents.

Why CRO, UX design, and design leadership aren't separate disciplines. They're three interconnected pieces that make each other more effective.

Some thoughts about managing a publishing pipeline in a world of generative AI.

Less, but better? Not this week.

The post The salad bar theory of UX professionalism appeared first on Jeffrey Zeldman Presents.

I’ve been quietly working on a side project called sho!io, and I’m opening it up to a few people. It’s meant to be a quiet place where you can share one thing you’re making each day, without the usual social noise. It’s early and very much still in progress, but I’d really value your honest feedback if you’re up for trying it.

Many design platforms started out as places to share work with friends. Then they became feeds. Then they became popularity contests. Then they became businesses built on attention. Along the way, the joy went missing. I want to bring it back.

I wanted somewhere where I could share what I’m working on every day, not a pseudo-portfolio, or a place to attract work. So, on sho!io, you post one thing a day. It can be an illustration, a layout, a sketch, or an unfinished work in progress. It doesn’t have to be perfect. It just has to be yours.

You can follow people, and they can follow you back, but no one else can see who you follow or who follows you. Likewise, you can like someone’s post, and they can like yours, but no one else can see how many likes a post received.

There are no public follower counts, visible popularity contests, and no pressure to perform. You can keep your profile private and share only with people you trust. Or it can be public. It’s your work, so your decision.

Building an app from scratch isn’t something I’ve done before, so building sho!io was a real journey into unexplored territory, as I had to create a Postgres database in Supabase and set it up using SQL queries. But, with a little help here and there, I managed it, and the scripts which enable membership, following, liking, and posting.

I know it can be improved massively, so if more people want to use it, I plan to find a developer who can help it scale.

Right now, I’m ready to open up sho!io to a few people. It’s early and very much still in progress, but I’d really value your feedback if you’re up for trying sho!io. Add your name to the wait list, and I’ll send 25 invites a week for the next few weeks.

Join the wait list

Should we worry about over-relying on AI? After becoming completely dependent on it, I think we're asking the wrong question.

This week on Unfinished Business, Rich and I are joined by developer and organizer of London Web Standards and State of the Browser, Dave Letorey.

Sponsored by Contract Killer

Most web design contract templates are stuffed with boilerplate content your clients will never read. Contract Killer covers everything—payments, revisions, scope, and timelines—in plain, human language. Trusted by designers for over a decade. Peer-reviewed, fully customisable, and built to keep projects on track, and your invoices paid.

Buy Contract Killer

Also available on YouTube

For anyone who can’t get enough Unfinished Business, we publish the show in video format on YouTube.

Sponsor Unfinished Business

The best way to promote your product or service to the Unfinished Business audience of creative professionals, designers, and developers. Sponsors get one exclusive two-minute ad per episode, live read by me or Rich, which feels personal and relatable. We can use your script or ad-lib, and you’ll also receive a link on each episode’s post, as well as a thank-you on our Bluesky and Mastodon accounts. Interested? We’d love to hear from you.

Support Unfinished Business on Patreon

We also have three monthly membership plans so you can support Unfinished Business on Patreon. $5, $10, and $20 if you’re feeling especially generous. All money goes towards podcast editing and hosting. Support Unfinished Business on Patreon.

New tunes from an old maker.

The post Works in Progress appeared first on Jeffrey Zeldman Presents.

Skills are the newest hype commodity in the world of agentic AI. Skills are text files that optionally get stapled onto the context window by the agent. You can have skills like “frontend design” or “design tokens” and if the LLM “thinks” it needs more context about that topic, it can import the contents of those files into the context to help generate a response.

Generally speaking, skills do an okay job at providing on-demand context. Assuming the AI model is always 12-to-18 months behind in its training data, a skill could potentially backfill any recent framework updates. A skill could potentially undo some training data biases. A skill could potentially apply some of your sensibilities to the output. I’ve seen some impressive results with design guidance skills… but I’ve also seen tons of mediocre results from the same skills. That’s why I deliberately use the word “potentially”. When skills can be optionally included, it’s hard to understand the when and why behind how they get applied.

In that way, skills remind me a bit of magic numbers.

In programming “magic numbers” are a pattern you typically try to avoid. They’re a code smell that you haven’t actually solved the problem, but found a workaround that only works in a particular context. They’re a flashing light that you have brittle logic somewhere in your system. “We don’t know why, but setting the value to 42 appears to have fixed the issue” is a phrase that should send shivers down the spine.

And so now we have these “magic words” in our codebases. Spells, essentially. Spells that work sometimes. Spells that we cast with no practical way to measure their effectiveness. They are prayers as much as they are instructions.

Were we to sit next to each other and cast the same spell from the same book with the same wand; one of us could have a graceful floating feather and the other could have avada kedavra’d their guts out onto the floor. That unstable magic is by design. That element of randomness –to which the models depend– still gives me apprehension.

There’s an opaqueness to it all. I understand how listing skills in an AGENTS.md gives the agent context on where to find more context. But how do you know if those words are the right words? If I cut the amount of words (read: “tokens”) in a skill in half, does it still work? If I double the amount of words, does it work better? Those questions matter when too little context is not enough context and too much context causes context rot. It also matters when you’re charged per-token and more tokens is more time on the GPU. How do you determine the “Minimum Viable Context” needed to get quality out of the machines?

That sort of quality variance is uncomfortable for me from a tooling perspective. Tooling should be highly consistent and this has a “works on my machine” vibe to it. I suppose all my discomfort goes away if I quit caring about the outputs. If I embrace the cognitive dissonance and switch to a “ZOMG the future is amazeballs” hype mode, my job becomes a lot easier. But my brain has been unsuccessful in doing that thus far. I like magic and mystery, but hope- or luck-based development has its challenges for me.

Looking ahead, I expect these types of errant conjurations will come under more scrutiny when the free money subsidies run out and consumers inherit the full cost of the models’ mistakes. Supply chain constraints around memory and GPUs are already making compute a scarce resource, but our Gas Towns plunder onward. When the cost of wrong answers goes up and more and more people spend all their monthly credits on hallucinations, that will be a lot of dissatisfied users.

Anyways, all this changes so much. Today it’s skills, before that MCP, before that PRDs, before that prompt engineering… what is it going to be next quarter? And aren’t those all flavors of the same managing context puzzle? Churn, churn, churn, I suppose.

File under: non-determinism

FIRST, the disclaimers: Some of my favorite writers—folks who are as anti-fascist and pro-democracy as they come—publish on Substack, but I read and recommend their work less and less frequently, because Substack has a Nazi problem. To wit: Awkward: Substack’s Nazi Problem Substack call themselves a platform rather than a publication, a classic web conundrum. […]

The post Claude Code for Designers appeared first on Jeffrey Zeldman Presents.

Fixing a broken website means inheriting all the reasons it broke. Try starting from nothing instead.

Posted today for no particular reason.

The post “A streamlined newspaper for a streamlined era” appeared first on Jeffrey Zeldman Presents.

There’s a lot that’s not going well; politics, tech bubbles, the economy, and so on. I spend most of my day reading angry tweets and blog posts. There’s a lot to be upset about, so that’s understandable. But in the interest of fostering better discourse, I’d like to offer a challenge that I think the world desperately needs right now: It’s cheap and easy to complain and say “[Thing] is bad”, but it’s also free to share what you think would be better.

If complaining worked, we would have won the culture war already. We’d have a reformed Elon and the White House wouldn’t be committing crimes against humanity. But that’s not the world we live in. The one we live in is much worse. If you hate the here and now, write about what would be a better future. Write about what’s good and why more of that good would be good.

If you believe the current trend in tech is exploitative, write about tech that isn’t. What impresses you? What compromises did you make? Are you happy? Does giving money to a small bootstrapped company feel ten thousand times better than a large venture-backed company like I imagine? Can you list some of those out for me? Show me where I can throw my dollars.

If you detest content theft at a massive scale, describe a world where copyright matters. Tell me how you’re only going to watch TikToks with royalty free music from now on and not use an ad-blocker. Tell me how you’re going to delete that hard-drive of pirated content. No? Then invent a better copyright system! Talk about the commons and how we should tax people who abuse it by taking more than they give. What does that system look like?

If you detest the ecological impact of AI data centers, propose an alternative piece of technology that drives shareholder value. Or advocate for a broader, more equitable definition of Responsible AI. Don’t let the Effective Altruists define the terms. Itemize the problems and then dream up a version that doesn’t have those. List demands. Find levers. Or make the case for how small, local, private, and less energy-intensive models are probably “good enough” for most use cases and we should stop burning barrels of crude and use those instead. If we must throw it away, point people to organizations and political groups working towards that end.

If you believe billionaires are the problem, talk about a world without them. Share how we redistribute a billionaire tax equitably and talk about the impact it has on society. Make a spreadsheet or a chart. Get into numbers. Talk about degrowth. I know that “Line Goes Up” has problems and won’t work forever, but how are my family and I more okay if we undo centuries of continued economic growth and technical acceleration.

I think history is wrought with examples of this working; Dr. King’s “I have a Dream” speech, the Federalist Papers, David Hasselhoff singing at the Berlin Wall during the height of the Cold War… the list goes on. Few will rise to the level of Ambassador Hasselhoff, but I don’t have to look far to find people around me who have inspired me by writing about the future they want.

After repeated mass layoffs, Ethan Marcotte identified a problem with the wealth and labor dynamics in the tech industry. While Ethan could have been perfectly happy bitching about it on Twitter, he didn’t do that. Instead, he put hands to keyboard and made a talk, which turned into a book, about what he feels is the time-tested solution to our predicament: Unions. Truthfully, I’m not particularly predispositioned to be pro-union (Texan, etc), but Ethan and I agree on the problem. Seeing Ethan spend time to communicate the problem and explore the solution changed my opinion on unions. And while I certainly still have nuanced questions, Ethan convinced me that collective action is the best leverage workers have against abuses of labor. That wouldn’t have happened without Ethan’s dedication to highlighting the problem and the solution over many years.

Often people need you to show, not tell the alternative. You need to paint a picture. Not a full complete picture, but one where a person can paint themselves in it. When people want change and bad change is happening all around them, that’s a hopeless place. Build a raft of opportunity that people can latch onto in the rough open waters, instead of hitting them with spears.

I bought my first mechanical watch back when we were living in Australia for those couple of years. It was a Flieger 47 from the Australian brand Panzera, and it sparked my love of pilot watches.

I’m not sure how I found out about Panzera, but I suppose it was an ad on social media, most likely Instagram. They’re based in Sydney—which is where I was—and design their own watches using Swiss movements. The Flieger 47 was an homage to the WW2 pilot watches made for the Luftwaffe and Allied air forces by brands like IWC.

It has all the hallmarks of a Big Pilot, with an oversized onion crown and a large, clear display. From a reasonable distance, it looked very similar to an IWC Big Pilot and coffee shop watch nerds commented on it more than once.

I bought one in a sale for around AUD $400 and loved it. That was until the crystal mysteriously cracked during some very hot weather, and it’s been in a drawer ever since.

I really must send it back to Panzera for repair, although I suspect that will cost me more than what I paid for the watch when I bought it.

It’s no secret that newspapers across the country exist in a fragile ecosystem. Automattic has long supported journalism and local media with investments in publications and platforms like Longreads, The Atavist, and Newspack. We believe that local news still matters—and now more than ever. That’s why we’re sponsoring Local News Day on April 9, 2026. — Support Journalism with […]

The post Mark your calendar: Local News Day is 9 April appeared first on Jeffrey Zeldman Presents.

CRO agencies promise quick UI fixes, but real conversion improvements need content overhauls and organizational change too.

“The word ‘computer’ only really slid over to mean ‘a machine’ in the late 19th and early 20th centuries, once we started building mechanical and then electronic devices to do that work instead [of people]. We did not name the machines after some abstract idea. We named them after the humans they were replacing.”

The post We named them after the humans they were replacing. appeared first on Jeffrey Zeldman Presents.

I got a lot of ideas for side projects rattling around in the old tin can. As part of my “No new projects” initiative, I’m trying to jump on building prototypes so I can decide if I want to explore ideas more or call it quits. A handful of my ideas are riffs or twists on existing app categories:

• A tennis ranking app… but modern and performant
• A nearby historical marker app… but with CarPlay support
• A nearby real estate listing app… but with CarPlay support

All three of those have ended unceremoniously at the same dead end: no API access. USTA denied my application for tennis rankings. The aptly named Historical Marker Database site doesn’t have a public API. And you have to be an MLS® Realtor® or Broker to get access to the MLS® listings. Womp womp.

Scraping the data is always an option… but I don’t like the ethics of that and worry about the brittleness of that dependency.

Ugh. I wish I could build these little apps so that tens of people could enjoy them. I’d even be willing to pay a small API access fee ($10/mo?) and run these at a loss but whatever happened to free APIs. When I survey the land of public APIs it feels like we’ve lost a lot since the Web 2.0 days where API access was almost a God-given right.

To prevent this time loop of disappointment from happening again, I’m swearing off APIs entirely. That’s a hard stance, but I need a backstop at the idea phase to prevent me from wasting limited life force. If I don’t have the data, or can’t generate the data, or it’s not an open protocol… it’s not worth building or even thinking about.

OAuth apps are a good option and generally the best way to exfiltrate data because it’s tied to a user’s account…. but you still might run into call limits, incomplete endpoints, user-scope limitations, and so on. History also shows us what the future holds. There’s a Tweetbot-style risk when building on a someone else’s platform. Even if your app drives activity to the parent application, your access might get cut because it competes or doesn’t drive stakeholder value. And if the idea isn’t big enough, being “a feature, not a product” is also a bad position to be in, lest you get Sherlock’d.

Where’s that leave me and my pile of side project ideas? Thankfully… in a good place. I can close out these project tabs and free up some much needed Brain RAM. It sounds strange but “No more APIs” makes “Making video games” jump up in the viability rankings for side projects too, because games have closed ecosystems. Or I could spend more time writing shitty sci-fi. Write a serial. Print some zines. Who knows.

If the goal of “No new projects” is to finish more projects than I start, then I have to accept that part of figuring out which ideas to explore means “Nope” is a potential answer. It’s also not a total loss, I’m learning along the way. For example, CarPlay only lets you choose from eight pre-approved templates. There’s also pre-defined app categories and diverting in the slightest would almost guarantee App Store rejection. That sucks the fun out it… but ayyyy, I’ll probably try again. But now I know the limitation for future projects and its in the limitations where play begins.

It’s a secret to everyone! This post is for RSS subscribers only. Read more about RSS Club.

It’s expected to freeze this evening in Austin and we may even see snow, which is exciting and novel for us Texans. But as we’ve learned in 2021 and 2023, cold snaps can lead to disaster. In those years the ice dealt untold damages as foot-thick tree limbs fell from the canopy like enormous glass Cadillacs. The crackle, pop, followed by crystalline shatter in the cold dead air is a sound I won’t forget. With the falling trees came down power lines and the lights went out.

It got worse. The disconnected Texas power grid failed. As homes and empty office buildings required more heating in the “extreme” cold, the rolling blackouts began to shed load. Except… they didn’t roll. Homes next to facilities (hospitals, fire stations, and water treatment plants) deemed critical were fine, but the rest of us were off-grid in the cold for nearly a week. The energy companies could have met capacity, but quit making energy because they would have had to sell it at a loss. Greed until the state promised them a windfall.

The infrastructure failed. Pipes burst, homes flooded, and trauma increased. While our senator and his banker wife fled to Mexico to stay in a Ritz Carlton, Texans burned their IKEA furniture and cedar fences to stay warm.

Building on past lessons, we’ve made all the preparations for today; external faucets capped, plants covered, and I built a cabinet out of foam board insulation for our external hot water heater. And now we wait… we wait to see if the Libertarian Capitalist systems my state has put into place will hold up. Waiting to see if the power goes out. Waiting for the impending disaster.

If you’ve ever had a child, you might know this feeling. You’ve taken the classes, assembled the crib, child-proofed the outlets, and then you wait… you wait for your life to change. While the miracle of childbirth is a beautiful event, any mother can tell you it’s not without some drawbacks. From prolonged labor, painful contractions, episiotomies, and beyond… every birth is a dice-roll of potentially life-threatening complications. A friend of mine who had three kids described it well; “Having a baby is like knowing you’ll be in a car accident.”

That feeling of pregnant, expectant waiting dominates a lot of my life right now as I wait for all the larger meta narratives in our country to unravel. I’m waiting for a mid-term election, one where I feel the fabric of democracy hangs by a thread. I’m waiting for an opposition party that has a fucking plan, but I don’t see one yet. I’m waiting for a particular person to leave office… or (preferred) die of natural causes. I’m waiting for the full release of the Epstein files, so the victims of billionaire pedophilia and human trafficking can have justice. I’m waiting for the government to stop its reign of cruelty on its own people, but masked fascists killed another innocent person in broad daylight today. I’m waiting for the economy to work for most Americans, not only the wealthy. I’m waiting for either the tech bubble to pop or for the robots to take my job… either way I’d like this story line to wrap up soon but I must ask, is there a third option? I’m waiting for the next big thing and praying it’s something that makes the world more loving and kind, but a new global religion would be a lot to deal with right now.

Stop settling for 'almost right' stock photos. A practical guide to generative imagery tools, when to use them, and how to get consistent results.

You might have noticed that I did a big design refresh on my entire site… unless you’re on RSS I guess. I’ll talk about aspects in detail, but at a high level there’s been three big changes:

1. A monospace font
2. Named CSS grid lines
3. Juicier multi-page view transitions

But my most favorite part is that today (when you set html { --hue-rotate: 15 }), my light theme looks like a stick of butter. And that brings me joy.

What didn’t change

Before I talk about what changed, here’s a quick list of the parts of my site that didn’t change:

• Same big “Dave” SVG on the homepage
• Same information architecture, no radical content changes.
• No new assets, same visuals.
• Same hue-rotating background, although I did simplify the formula.
• Same inverse text-sizing for H1s
• Same support for art-directed posts

Why change the parts you’re happy with, eh? Knowing what you want to change versus what you don’t want to change makes the whole process go faster.

All-in on a monospace font

My type system always falls apart. I start with a good setup and I’m guaranteed to ruin it over time. Whenever I read a site with a nice typeface and reasonable CPL, I started to feel like my system-ui based body text styles were letting me down. It didn’t feel cozy.

Then I saw Robin Rendle’s latest redesign (which is wonderful, btw) I wondered… Could I be a monospace font guy? Is that me? Do I identify as that? Is it too emo? Does it come off as a bad developer pun like bleep blorp I'm a programmer and using a computer bleep blorp?

All good questions to ask myself and exposes some insecurity I have, but I couldn’t shake the idea so I went for it.

The entire site is now set in Cascadia Mono which is a variant of Microsoft’s Cascadia Code. That decision is unintentionally on-brand for my current stage of life. Initially I wanted to use Inconsolata by Raph Levien, but it didn’t have a “numero” (№) symbol – which is a common missing glyph in a lot of indie fonts – and is an unfortunate piece of critical typographical infrastructure with my vibechecks.

In general I love the change. It feels very “me” right now. I worry about the readability of monospace fonts some, but I don’t think I was winning the Legibility Wars before.

Naming my grid lines

Improving the grid on my site is something I’ve wanted to do for nearly two years. The max-width container I had was fine before, but I relied a lot on margin overrides to change a container that felt like a hack that in my experience don’t scale.

Now I have something better with some sweet tech from Stephanie Eckles that I saw on Kevin Powell’s YouTube called “Named Grid Lines”. A not-so-well-known feature of grid is you can name the gutters in your grid template. The result is a grid that looks like this:

See how all the grids collapse into one line that’s offset from the edge? That’s what I want. And then to use it, you specify the *-start and *-end line you tweak your container with a modifier class and make all the children start at a different grid line.

.foo.container > * {
	grid-column: wide-start / wide-end; 
  /* or grid-column: wide */
}

This gives me a lot of scalable control for my layout at the template level. For example, the layout of my homepage looks like this:

But when you click through to a single post, the template shifts to this:

I don’t have this setup, but I could write out a system of utility classes to make all this super flexible.

That’s a lot of different layouts to craft. I look forward to more sustainable art direction for years to come. No more hacky negative margins or fixed positioned items… right?

More Multipage View Transitions

I’ve had multi-page view transitions on my site for years now. The original was a title transition from the index template to the post template where the post title would do a subtle swoop up and morph from an H3 to display-sized H1. This was great until I changed the font for my H1 (see above) and I obliterated the slight of hand magic I had before. Oops.

Now the flagship animation on my site is not typography dependent. If you navigate through my site, you’ll see that the “Dave” SVG on the homepage transitions into the main navigation on subpages. As a bonus, I get a little bit of much-needed branding on subpages. I didn’t do anything special other than naming the view transition and beefing up the stroke when the logo is in its smaller form.

The main nav is out-dented a bit by default, but using my new named columns I made the navigation go wider to match wide pages like my Bookshelf. Flexbox’s justify-content: space-between and view-transitions is doing all the heavy lifting on that animation there but I’m pleased with the effect and it feels natural (aka not synthetic and cheap).

I’m not a motion expert like Cyd Stumpel, but it feels good to have big, bold, un-ignorable view transitions on my site.

Slimmed down CSS

A redesign is always a great opportunity to clean house. I did the thing where I deleted my entire CSS and started from a naked page. Bit-by-bit I pulled back in the pieces I still needed.

I have about 40% less CSS which manifests in ~150 less lines of code to maintain and up to ~0.8 KB when compressed over the wire.

Now 0.8 KB isn’t much but because I inline my critical CSS the <head> on every page, this number matters. My entire homepage document is ~5.5 KB (Brotli), so that’s a 10%~20% performance improvement from cleaning up my CSS. How did I get these gains, you ask? Well…

One reason my CSS smaller is because I’m using modern CSS (nesting, :has(), :is(), :where(), :not(), etc). Those features seem like minor syntactic sugar but you also get more efficient selectors. For example my out-denting that I do in posts would previous be something like:

.post iframe, 
.post video, 
.post img,
.post table { }

In modern CSS that super-conjoined selector becomes something more expressive and elegant:

.post :is(iframe, video, img, table) {}

Those small improvements add up, but another reason the CSS is smaller is because its doing a lot less. Other than my inverse-sized H1s in posts, I’m not managing type styles at all beyond setting the body font-size. I think this is what Andy Bell calls “Be the Browser’s Mentor, Not Its Micromanager”. My strategy here is: Don’t futz with it until you can think of something way better than what the browser already does. That seems very Dao or Web’s Grain’y.

Onward to more art direction!

This redesign opens up a bright future for my site. I’ve already started on some of this work, but I’ll share that in a future post. I mentioned above but the named grid lines alone give me a lot of easy-to-use levers for expression. I touched up some old art-directed posts and they are benefitting from the changes already.

“Make it easy to play” seems like a good ethos for a personal site and I feel like I have that in the current manifestation.