Tags: view

P&B: Jeremy Keith – Manu

In which I answer questions about blogging.

I’ve put a copy of this on my own site too.

Let’s start from the basics: can you introduce yourself?

My name is Jeremy Keith. I’m from Ireland. Cork, like. Now I live in Brighton on the south coast of England.

I play traditional Irish music on the mandolin. I also play bouzouki in the indie rock band Salter Cane.

I also make websites. I made a community website all about traditional Irish music that’s been going for decades. It’s called The Session.

Back in 2005 I co-founded a design agency called Clearleft. It’s still going strong twenty years later (I mean, as strong as any agency can be going in these volatile times).

Oh, and I’ve written some nerdy books about making websites. The one I’m most proud of is called Resilient Web Design.

What’s the story behind your blog?

I was living in Freiburg in southern Germany in the 1990s. That’s when I started making websites. My first ever website was for a band I was playing in at the time. My second ever website was for someone else’s band. Then I figured I should have my own website.

I didn’t want the domain name to be in German but I also didn’t want it to be in English. So I got adactio.com.

To begin with, it wasn’t a blog. It was more of a portfolio-type professional site. Although if you look at it now, it looks anything other than professional. Would ya look at that—the frameset still works!

Anyway, after moving to Brighton at the beginning of the 21st century, I decided I wanted to have one of those blogs that all the cool kids had. I thought I was very, very late to the game. This was in November 2001. That’s when I started my blog, though I just called it (and continue to call it) a journal.

What does your creative process look like when it comes to blogging?

Sometimes a thing will pop into my head and I’ll blog it straight away. More often, it bounces around inside my skull for a while. Sometimes it’s about spotting connections, like if if I’ve linked to a few different things that have some kind of connective thread, I’ll blog in order to point out the connections.

I never write down those things bouncing around in my head. I know I probably should. But then if I’m going to take the time to write down an idea for a blog post, I might as well write the blog post itself.

I never write drafts. I just publish. I can always go back and fix any mistakes later. The words are written on the web, not carved in stone.

Do you have an ideal creative environment? Also do you believe the physical space influences your creativity?

I mostly just blog from home, sitting at my laptop like I’m doing now. I have no idea whether there’s any connection between physical space and writing. That said, I do like writing on trains.

A question for the techie readers: can you run us through your tech stack?

I use my own hand-rolled hodge-podge of PHP and MySQL that could only very generously be described as a content management system. It works for me. It might not be the most powerful system, but it’s fairly simple. I like having control over everything. If there’s some feature I want, it’s up to me to add it.

So yeah, it’s a nice boring LAMP stack—Linux Apache MySQL PHP. It’s currently hosted on Digital Ocean. I use DNSimple for all the DNS stuff and Fastmail for my email. I like keeping those things separate so that I don’t have a single point of failure.

I realise this all makes me sound kind of paranoid, but when you’ve been making websites for as long as I have, you come to understand that you can’t rely on anything sticking around in the long term so a certain amount of paranoia is justified.

Given your experience, if you were to start a blog today, would you do anything differently?

I’m not sure. I’m not entirely comfortable about using a database. It feels more fragile than just having static files. But I do cache the blog posts as static HTML too, so I’m not entirely reliant on the database. And having a database allows me to do fun relational stuff like search.

If I were starting from scratch, I probably wouldn’t end up making the same codebase I’ve got now, but I almost certainly would still be aiming to keep it as simple as possible. Cleverness isn’t good for code in the long term.

Financial question since the Web is obsessed with money: how much does it cost to run your blog? Is it just a cost, or does it generate some revenue? And what’s your position on people monetising personal blogs?

I’ve got hosting costs but that’s pretty much it. I don’t make any money from my website.

That Irish traditional music website I mentioned, The Session, that does accept donations to cover the costs. As well as hosting, there’s a newsletter to pay for, and third-party mapping services.

Time for some recommendations: any blog you think is worth checking out? And also, who do you think I should be interviewing next?

You should absolutely check out Walknotes by Denise Wilton.

It’s about going out in the morning to pick up litter before work. From that simple premise you get some of the most beautiful writing on the web. Every week there’s a sentence that just stops me in my tracks. I love it.

We wife, Jessica Spengler, also has a wonderful blog, but I would say that, wouldn’t I?

Final question: is there anything you want to share with us?

You know I mentioned that The Session is funded by donations? Well, actually, this month—April 2025—any donations go towards funding something different; bursary sponsorship places for young musicians to attend workshops at the Belfest Trad Fest who otherwise wouldn’t be able to go:

thesession.org/donate

So if you’ve ever liked something I’ve written on my blog, you can thank me by contributing a little something to that.

Cheers,
Jeremy

Building WebSites With LLMS - Jim Nielsen’s Blog

And by LLMS I mean: (L)ots of (L)ittle ht(M)l page(S).

I really like this approach: using separate pages instead of in-page interactions. I remember Simon talking about how great this works, and that was a few years back, before we had view transitions.

I build separate, small HTML pages for each “interaction” I want, then I let CSS transitions take over and I get something that feels better than its JS counterpart for way less work.

5 Questions for Jeremy Keith · Frontend Dogma

If you like the prospect of an old man ranting at clouds, this is for you.

6 CSS Snippets Every Front-End Developer Should Know In 2025 · 19 January 2025

• Springy easing with linear()
• Typed custom properties
• View transitions for page navigation
• Transition animation for dialog and popover
• Transition animation for details
• Animated adaptive gradient text

UX London isn’t the only event from Clearleft coming your way in 2025. There’s a brand new spin-off event dedicated to user research happening in February. It’s called Research By The Sea.

I’m not curating this one, though I will be hosting it. The curation is being carried out most excellently by Benjamin, who has written more about how he’s doing it:

We’ve invited some of the best thinkers and doers from from in the research space to explore how researchers might respond to today’s most gnarly and pressing problems. They’ll challenge current perspectives, tools, practices and thinking styles, and provide practical steps for getting started today to shape a better tomorrow.

If that sounds like your cup of tea, you should put February 27th 2025 in your calendar and grab yourself a ticket.

Although I’m not involved in curating the line-up for the event, I offered Benjamin my swor… my web dev skillz. I made the website for Research By The Sea and I really enjoyed doing it!

These one-day events are a great chance to have a bit of fun with the website. I wrote about how enjoyable it was making the website for this year’s Patterns Day:

I felt like I was truly designing in the browser. Adjusting spacing, playing around with layout, and all that squishy stuff. Some of the best results came from happy accidents—the way that certain elements behaved at certain screen sizes would lead me into little experiments that yielded interesting results.

I took the same approach with Research By The Sea. I had a design language to work with, based on UX London, but with more of a playful, brighter feel. The idea was that the website (and the event) should feel connected to UX London, while also being its own thing.

I kept the typography of the UX London site more or less intact. The page structure is also very similar. That was my foundation. From there I was free to explore some other directions.

I took the opportunity to explore some new features of CSS. But before I talk about the newer stuff, I want to mention the bits of CSS that I don’t consider new. These are the things that are just the way things are done ‘round here.

Custom properties. They’ve been around for years now, and they’re such a life-saver, especially on a project like this where I’m messing around with type, colour, and spacing. Even on a small site like this, it’s still worth having a section at the start where you define your custom properties.

Logical properties. Again, they’ve been around for years. At this point I’ve trained my brain to use them by default. Now when I see a left, right, width or height in a style sheet, it looks like a bug to me.

Fluid type. It’s kind of a natural extension of responsive design to me. If a website’s typography doesn’t adjust to my viewport, it feels slightly broken. On this project I used Utopia because I wanted different type scales as the viewport increased. On other projects I’ve just used on clamp declaration on the body element, which can also get the job done.

Okay, so those are the things that feel standard to me. So what could I play around with that was new?

View transitions. So easy! Just point to an element on two different pages and say “Hey, do a magic move!” You can see this in action with the logo as you move from the homepage to, say, the venue page. I’ve also added view transitions to the speaker headshots on the homepage so that when you click through to their full page, you get a nice swoosh.

Unless, like me, you’re using Firefox. In that case, you won’t see any view transitions. That’s okay. They are very much an enhancement. Speaking of which…

Scroll-driven animations. You’ll only get these in Chromium browsers right now, but again, they’re an enhancement. I’ve got multiple background images—a bunch of cute SVG shapes. I’m using scroll-driven animations to change the background positions and sizes as you scroll. It’s a bit silly, but hopefully kind of cute.

You might be wondering how I calculated the movements of each background image. Good question. I basically just messed around with the values. I had fun! But imagine what an actually-skilled interaction designer could do.

That brings up an interesting observation about both view transitions and scroll-driven animations: Figma will not help you here. You need to be in a web browser with dev tools popped open. You’ve got to roll up your sleeves get your hands into the machine. I know that sounds intimidating, but it’s also surprisingly enjoyable and empowering.

Oh, and I made sure to wrap both the view transitions and the scroll-driven animations in a prefers-reduced-motion: no-preference @media query.

I’m pleased with how the website turned out. It feels fun. More importantly, it feels fast. There is zero JavaScript. That’s the main reason why it’s very, very performant (and accessible).

Smooth transitions across pages; smooth animations as you scroll: it’s great what you can do with just HTML and CSS.

“We bring the same problem-solving ethos that underpins great design.” | Top Interactive Agencies

Here’s a nice interview with Rich all about how things work at Clearleft.

Support for view transitions for regular websites (as opposed to single-page apps) will ship in Chrome 126. As someone who’s a big fan—to put it mildly—I am very happy about this!

Hopefully Firefox and Safari won’t be too far behind. But it’s still worth adding view transitions to your website even if not every browser supports them. They’re the perfect example of a progressive enhancement.

The browsers that don’t yet support view transitions won’t be harmed in any way if you give them the CSS for view transitions. They’ll just ignore it. For users of those browsers, nothing changes.

Then when those browsers do ship support for view transitions, your website automatically gets an upgrade for those users. Code you’ve already written starts working from one day to the next.

Don’t wait, is what I’m saying.

I really like the Baseline initiative as a way to track browser support. It’s great to see it in use on MDN and Can I Use. It’s very handy having a glanceable indication of which browser features are newly available and which are widely available.

But…

Not all browser features work the same way. For features that work as progressive enhancements you don’t need to wait for them to be widely available.

Service workers. Preference queries. View transitions.

If a browser doesn’t support one of those features, that’s fine. Your website won’t break in that browser.

Now that’s not true of all browser features, particularly some JavaScript APIs. If a feature is critical for your site to function then you definitely want to wait until it’s widely supported.

Baseline won’t tell you the difference between those two different kinds of features.

I don’t want Baseline to get too complicated. Like I said, I really like how it’s nice and glanceable right now. But it would be nice if there way some indication that a newly-available feature is a progressive enhancement.

For now it’s up to us to make that distinction. So don’t fall into the trap of thinking that just because a feature isn’t listed as widely-available you can’t use it yet.

Really you want to ask two questions:

1. How widely available is this feature?
2. Can this feature be used as a progressive enhancement?

If Baseline tells you that the answer to the first question is “newly-available”, move on to the second question. If the answer to that is “no, it can’t be used as a progressive enhancement”, don’t ship that feature in production just yet.

But if the answer to that second question is “hell yeah, it’s a progressive enhancement!” then go for it, regardless of the answer to the first question.

Y’know, there’s a real irony in a common misunderstanding around progressive enhancement: some people seem to think it’s about not being able to use advanced browser features. In reality it’s the opposite. Progressive enhancement allows you to use advanced browser features even before they’re widely supported.

Motorcycles, Cars, Websites, and Seams - Jim Nielsen’s Blog

Seams.

Intent to Ship: View Transitions Same-Origin Navigation

Finally! View transitions for multi-page apps (AKA websites) will be landing in Chrome soon—here’s hoping other browsers follow suit. Mozilla are up for it. Apple are, as usual, silent on their intentions.

Nice to see a blog post of mine referenced to show that this is a highly-requested feature. Blogging gets results, folks!

a view source web

As a self-initiated learner, being able to view source brought to mind the experience of a slow walk through someone else’s map.

This ability to “observe” software makes HTML special to work with.

PodRocket - A web development podcast from LogRocket: HTML web components with Chris Ferdinandi

I somehow missed this when it came out in January but Amber just pointed me to it—an interview with Chris about HTML web components, available for your huffduffing pleasure.

I read 25 books in 2023. That’s exactly the same amount that I read in 2022.

15 of the 25 books were written by women—a bit of a dip from last year.

I read a lot more fiction than non-fiction this year. I’m okay with that.

There was plenty of sci-fi as usual, but 2023 was also the year I went down a rabbit hole of reading retellings of the Homeric epics. I’ve had a copy of The Odyssey on my coffee table while I’ve been diving into the works of Madeline Miller, Natalie Haynes, Pat Barker, and more. I’m really enjoying this deep dive and I don’t intend to stop anytime soon.

It’s funny; reading different takes on the same characters and interweaving storylines is kind of like dipping into the Marvel Cinematic Universe, just a few millennia older. In some ways, it feels like reading fantasy, but as Ursula Le Guin points out, things aren’t so black and white:

The Trojan war is not and you cannot make it be the War of Good vs. Evil. It’s just a war, a wasteful, useless, needless, stupid, protracted, cruel mess full of individual acts of courage, cowardice, nobility, betrayal, limb-hacking-off, and disembowelment. Homer was a Greek and might have been partial to the Greek side, but he had a sense of justice or balance that seems characteristically Greek—maybe his people learned a good deal of it from him? His impartiality is far from dispassionate; the story is a torrent of passionate actions, generous, despicable, magnificent, trivial. But it is unprejudiced. It isn’t Satan vs. Angels. It isn’t Holy Warriors vs. Infidels. It isn’t hobbits vs. orcs. It’s just people vs. people.

I’ve been reading some Ursula Le Guin this year too, and that’s something else I intend to keep on doing. Like the retellings of Troy, her work just keeps on giving.

Anyway, in my usual manner, here’s my end-of-year summary of what I’ve read, along with a pointless rating out of five.

To recap, here’s my scoring system:

• One star means a book is meh.
• Two stars means a book is perfectly fine.
• Three stars means a book is a good—consider it recommended.
• Four stars means a book is exceptional.
• Five stars is pretty much unheard of.

The Star Of The Sea by Joseph O’Connor

A nautical tale of The Great Hunger. It’s a tricky subject but this book mostly tackles it well. It’s fairly dripping in atmosphere.

★★★☆☆

Who Fears Death by Nnedi Okorafor

Another rivetting tale from Nnedi Okorafor, this one set in a world that seems quite different from ours, where magic is a powerful force.

★★★☆☆

The Rosewater Insurrection by Tade Thompson

The second book in the trilogy—this time it’s war. Once again, the setting and the vibe are unlike any other alien invasion story. I’m looking forward to reading the final installment.

★★★☆☆

Understanding Privacy by Heather Burns

On the one hand, this book feels like homework because it really is required reading for any web designer or developer. On the other hand, Heather does an excellent job in making what could be a very dry topic as interesting as possible. The contrasts between the US and Europe are particulary eye-opening.

★★★☆☆

Children Of Time by Adrian Tschaikovsky

Absolutely top-notch hard sci-fi! It feels like two of the biggest characters in the book are time and evolution. For a tale that’s told over thousands of years, the pace never lets up. Now I get why this book won so many awards. It’s quite a feat of story-telling. I loved it!

★★★★☆

The Hacker Crackdown: Law and Disorder on the Electronic Frontier by Bruce Sterling

A fairly by-the-numbers retelling of the early days of computer hackers. To be honest, I found the pre-computer part (detailing telephone hacks) to be the most interesting bit.

★★☆☆☆

Circe by Madeline Miller

Everyone was going on about how great this book was so my expectations were high. They were exceeded. This book is just wonderful. When I finished it, I found myself craving more. That set me on the path of reading other retellings of Homeric characters, but none of them could quite match the brilliance of Circe.

★★★★☆

Make Something Wonderful: Steve Jobs in his own words by The Steve Jobs Archive

An assembly of speeches, memos, and emails. It’s refreshingly un-hagiographic, given the publisher. And of course it’s beautifully typeset.

★★★☆☆

The Song Of Achilles by Madeline Miller

After reading and loving Circe, I went back to Madeline Miller’s previous story of the Trojan War. The Song Of Achilles didn’t quite match Circe for me, but it came very close. Once again, everything is described vividly and once again, it stayed with me long after I finished reading it.

★★★★☆

A Thousand Ships by Natalie Haynes

Another retelling of the Trojan war. This is an episodic book that weaves its threads together nicely. Sometimes it’s a little on-the-nose about its intentions but it mostly works very well.

★★★☆☆

Rocannon’s World by Ursula K. Le Guin

Le Guin’s first novel is far from her best work but it’s still better than most sci-fi. A good planetary romance.

★★★☆☆

The Intelligence Illusion by Baldur Bjarnason

Refreshingly level-headed and practical. If you work somewhere that’s considering using generative tools built on large language models, read this before doing anything.

★★★☆☆

Planet Of Exile by Ursula K. Le Guin

The second of Le Guin’s Hainish books. Another planetary romance that’s perfectly fine but not in the same league as her later work.

★★★☆☆

City Of Illusions by Ursula K. Le Guin

The third of the Hainish novels, this one gets pretty trippy. I enjoyed the sensation of not knowing what was going on (much like the protaganist).

★★★☆☆

Babel by R.F. Kuang

This was such a frustrating read! On the one hand, the world-building as absolutely superb. The idea of magic being driven translation is brilliant. So is the depiction of a British empire that exploits and colonises foreign languages. But then the characters in this world are not well realised. The more the book went on, the less believable they seemed.

There’s also a really strange disconnect in the moods of the book; one minute it’s gritty revolutionary fare, the next it’s like Harry Potter goes to Oxford.

It didn’t work for me. And I know that my opinion can be easily dismissed as that of a mediocre middle-aged white man, but I really wanted to like this. I was totally on board with the politics of the book, but the way it hammered me over the head constantly didn’t do it any favours.

A message like “racism is bad” or “colonialism is bad” might work as subtext, but here, where it’s very much the text-text, it doesn’t succeed.

★★☆☆☆

That Old Country Music by Kevin Barry

A collection of short stories set in the west of Ireland. Good stuff.

★★★☆☆

The Silence Of The Girls by Pat Barker

Back to the Trojan war in the first of a series by Pat Barker. She takes a naturalistic tone with the dialogue, modernising it. It works quite well. By this time, having read Madeline Miller’s The Song Of Achilles and Natalie Hayne’s A Thousand Ships, I really felt like I was looking at the same series of events from different angles.

★★★☆☆

An Immense World by Ed Yong

Another great accessible science book from Ed Yong, this time about senses in the animal world. It sometimes feels a bit like a series of articles rather than a single book, but when the articles are this good, that’s absolutely fine.

★★★☆☆

The Water Knife by Paolo Bacigalupi

Okay, this might get a bit ranty…

The plot and the writing style in this book are perfectly fine, gripping even. It’s got that Gibsonesque structure of having two or three different characters in very different settings being propelled towards an inevitable meeting point (it happens pretty much exactly at the half-way point in this book).

But this is a cli-fi book that fails. It will not encourage anyone to take action other than turn into a doomer. Instead of asking what the future might actually be like, it instead asks “what’s the absolute worst that could happen?” Frankly, it’s a cop-out.

The book takes a similar tack with its characters. It assumes everyone’s terrible and will do terrible things. It’s lazy.

So you’ve got an unrelenting series of people behaving terribly in a horrific setting. It gets boring.

I was trying to cut the book some slack, but when there was a rare scene of actual consensual sex, it quickly turned into an adolescent male fantasy.

Reading this was like reading the opposite of Kim Stanley Robinson. Avoid.

★★☆☆☆

The Women Of Troy by Pat Barker

Back to Troy we go for the second in Pat Barker’s series. More good stuff.

★★★☆☆

How to Make the World Add Up: Ten Rules for Thinking Differently About Numbers by Tim Harford

A recommendation from Chris. He thought I’d enjoy this and he was not wrong. Tim Harford strikes just the right tone as he relays stories of statistics gone wrong as well as statistics done right.

★★★☆☆

Translation State by Ann Leckie

I’ll read anything by Ann Leckie. I loved her Imperial Radch series and this book is set in the same universe. There’s a strange juxtaposition of body horror in places with a Becky Chambers style cosiness. It’s partly a courtroom drama, but one where the courtroom gets very dramatic indeed. And there are lots of questions around identity and belonging. I liked it.

★★★☆☆

Trespasses by Louise Kennedy

Full disclosure: the author is a cousin of a friend of mine. She told me how much of this book was based on actual family history. It’s set in Belfast in the 70s and it is very vivid in a very kitchen-sink kind of way. It feels all-too real. Recommended.

★★★☆☆

Children Of Ruin by Adrian Tchaikovsky

The sequel to Children Of Time doesn’t quite hit the same high bar, but it’s still an excellent rip-roaring space adventure that continues the themes of evolution and time. Thoroughly enjoyable.

★★★☆☆

Clytemnestra by Costanza Casati

My final foray to ancient Greece for the year. This is a debut novel that’s absolutely on par with the other Homeric writers I’ve been reading. Even though you know where things are headed, you can’t turn away. In other words, it’s a classic Greek tragedy.

★★★☆☆

Extra(ordinary) People by Joanna Russ

I had’t read any Joanna Russ before, which was something I’ve been meaning to rectify. I picked up a second-hand copy of this slim volume of short stories that was published by The Women’s Press back in the 80s but which is now out of print. Stories are vaguely connected and they all explore identity, gender, disguises and passing. But it’s the opening award-winning story Souls that’s the real stand-out. Well worth reading.

★★★☆☆

So that was my reading year. There were some disappointments in the sci-fi category, with both Babel and The Water Knife, but generally the quality was high.

I didn’t really read enough non-fiction to choose a best one of the year.

When it came to fiction, there was a clear winner: Circe by Madeline Miller.

If you fancy reading any of the books I’ve reviewed here, there’s a list of them on bookshop.org. Or go to your local library.

If you’re interested in my round-ups from previous years, here they are:

• Books I read in 2022,
• Books I read in 2021,
• Books I read in 2020,
• Books I read in 2019,
• Books I read in 2018, and
• Books I read in 2017.

An Ode to Living on The Grid

A terrific interview with Deb Chachra. Her new book, How Infrastructure Works sounds excellent!

View Transitions Level 1 · Interop 2024

If you, like me, feel that view transitions—especially on multi-page apps—would be a good thing for browsers to prioritise for interoperability, give this issue a thumbs-up.

The #ViewSource Affordance

Engineers who care about the open culture of the web should recognize that the threats to that culture come not only from Digital Enclosure by large, private companies of the most important pieces of the web.

They should also recognize the risks of Technical Enclosure, and the non-technical value of the #ViewSource affordance in perpetuating the open culture of web development.

The ideal viewport doesn’t exist

Some lovely scroll-driven animations illustrate this great little microsite.

There’s something very pleasy about the chunky design that harkens back to the Zeldmanesque early web.

Modern CSS in Real Life - Chris Coyier

This is a terrrific presentation by Chris, going through some practical implementations of modern CSS: logical properties, viewport units, grid, subgrid, container queries, cascade layers, new colour spaces, and view transitions.

Watch Transitions in Slow Motion in Chrome’s DevTools - Jim Nielsen’s Blog

This is a very handy tip if you’re adding view transitions to your website!

First Experiments with View Transitions for Multi-page Apps

Some great ideas for view transitionts in here! Also:

If you look at any of the examples on a browser that does not support them, the pages still function just fine. The transitions are an extra that’s layered on top if and when your browser supports them. Another concrete example of progressive enhancement in practice.