Phil Wolstenholme
@wolstenhol.me
Lead front-end eng @CoopDigital. Interested in the web (front-end, #a11y, performance), environment, bikes (everyday/utility) and science. @philw_@hachyderm.io
Other than @devongovett.me 's work on React Spectrum/ARIA are there any other good sources on 'how to make nice full screen UI' for iOS 26? I've found some base-ui PRs but are looking for more examples. I've gotta make a full screen mobile nav full-screen again…
I think I finally found a solution to reliably prevent scrolling behind modals on iOS! 😲
Works when tapping inputs, with different keyboard sizes, when the address bar is collapsed or expanded, programmatic focus, dialog scroll animations, etc.
Coming soon to React Aria! 🎉
Works when tapping inputs, with different keyboard sizes, when the address bar is collapsed or expanded, programmatic focus, dialog scroll animations, etc.
Coming soon to React Aria! 🎉
November 6, 2025 at 2:16 PM
Other than @devongovett.me 's work on React Spectrum/ARIA are there any other good sources on 'how to make nice full screen UI' for iOS 26? I've found some base-ui PRs but are looking for more examples. I've gotta make a full screen mobile nav full-screen again…
@jensimmons.bsky.social @saron.bsky.social @jondavis.bsky.social – do you know why using this CSS would cause flickering? It's across devices and iOS versions:
```
:where(:root) {
--vpc-loader-height: 23.75rem;
}
content-visibility: auto;
contain-intrinsic-size: auto var(--vpc-loader-height);
```
```
:where(:root) {
--vpc-loader-height: 23.75rem;
}
content-visibility: auto;
contain-intrinsic-size: auto var(--vpc-loader-height);
```
October 23, 2025 at 1:58 PM
@jensimmons.bsky.social @saron.bsky.social @jondavis.bsky.social – do you know why using this CSS would cause flickering? It's across devices and iOS versions:
```
:where(:root) {
--vpc-loader-height: 23.75rem;
}
content-visibility: auto;
contain-intrinsic-size: auto var(--vpc-loader-height);
```
```
:where(:root) {
--vpc-loader-height: 23.75rem;
}
content-visibility: auto;
contain-intrinsic-size: auto var(--vpc-loader-height);
```
Team size changes, project work, and winter sickness has meant that we're sometimes running as a pair rather than a small mob/ensemble at work. I've never done much pairing! Are there any particularly good blog posts, talks, or books on doing it well and/or different approaches to try?
October 8, 2025 at 9:29 PM
Team size changes, project work, and winter sickness has meant that we're sometimes running as a pair rather than a small mob/ensemble at work. I've never done much pairing! Are there any particularly good blog posts, talks, or books on doing it well and/or different approaches to try?
Neat little feature on my new personal site: use the `Sec-CH-UA-Mobile` header (or UA sniffing 😔) to know the device type during SSR and show fewer items per page. This saves mobile users from having to scroll past giant stacked lists that would be in a nice grid on desktop:
September 28, 2025 at 2:29 PM
Neat little feature on my new personal site: use the `Sec-CH-UA-Mobile` header (or UA sniffing 😔) to know the device type during SSR and show fewer items per page. This saves mobile users from having to scroll past giant stacked lists that would be in a nice grid on desktop:
New feature on the redesign of my personal site (wolstenhol.me) – show when its the birthday of a repo I've starred on Github. Happy anniversary for oRPC, @unnoq.com!
September 18, 2025 at 8:53 PM
New feature on the redesign of my personal site (wolstenhol.me) – show when its the birthday of a repo I've starred on Github. Happy anniversary for oRPC, @unnoq.com!
I'd almost completely forgotten about a talk I gave in the depths of Covid for DrupalCon EU. I've just found a blog post I wrote (on a Medium account that I'd also forgotten about!) after getting my session feedback back and I'm feeling nostalgic: philwolstenholme.medium.com/my-drupalcon...
My DrupalCon Europe 2020 session feedback
Back in December I gave a talk on using Tailwind with Drupal, and why, for me, it makes sense in an agency environment where long-running…
philwolstenholme.medium.com
September 17, 2025 at 8:23 PM
I'd almost completely forgotten about a talk I gave in the depths of Covid for DrupalCon EU. I've just found a blog post I wrote (on a Medium account that I'd also forgotten about!) after getting my session feedback back and I'm feeling nostalgic: philwolstenholme.medium.com/my-drupalcon...
Reposted by Phil Wolstenholme
This post is the culmination of my thinking about (and building) SPA-like apps w minimal JS for the last 2 yrs
The ideas are informed in large part by the @infrequently.org blog posts and talks
Thanks @htmx.bsky.social and @astro.build for building great tools.
www.lorenstew.art/blog/progres...
The ideas are informed in large part by the @infrequently.org blog posts and talks
Thanks @htmx.bsky.social and @astro.build for building great tools.
www.lorenstew.art/blog/progres...
A Progressive Complexity Manifesto | Loren Stewart
A manifesto for progressive web complexity. Reject the false binary between static sites and SPAs. Embrace the powerful middle ground with server-rendered HTML, HTMX, and intentional complexity escala...
www.lorenstew.art
August 11, 2025 at 5:10 PM
This post is the culmination of my thinking about (and building) SPA-like apps w minimal JS for the last 2 yrs
The ideas are informed in large part by the @infrequently.org blog posts and talks
Thanks @htmx.bsky.social and @astro.build for building great tools.
www.lorenstew.art/blog/progres...
The ideas are informed in large part by the @infrequently.org blog posts and talks
Thanks @htmx.bsky.social and @astro.build for building great tools.
www.lorenstew.art/blog/progres...
Lodash with imports from `lodash/package`: 151.16kb
`es-toolkit`: 3.88kb
Tests passing, TS happy, linter happy. There's a bundle size reduction, a speed increase, and we can drop the Lodash ESLint plugin and `@types/lodash` too 🙌
Thanks github.com/toss!
`es-toolkit`: 3.88kb
Tests passing, TS happy, linter happy. There's a bundle size reduction, a speed increase, and we can drop the Lodash ESLint plugin and `@types/lodash` too 🙌
Thanks github.com/toss!
July 11, 2025 at 8:27 AM
Lodash with imports from `lodash/package`: 151.16kb
`es-toolkit`: 3.88kb
Tests passing, TS happy, linter happy. There's a bundle size reduction, a speed increase, and we can drop the Lodash ESLint plugin and `@types/lodash` too 🙌
Thanks github.com/toss!
`es-toolkit`: 3.88kb
Tests passing, TS happy, linter happy. There's a bundle size reduction, a speed increase, and we can drop the Lodash ESLint plugin and `@types/lodash` too 🙌
Thanks github.com/toss!
This is a glorious blog post on the history of rendering web pages, how to write a BFF very neatly, returning a representation of UI from a server – and how you might end up inventing React Server Components if you think about these things for long enough:
⚛️📝 New on Overreacted: JSX Over The Wire overreacted.io/jsx-over-the...
JSX Over The Wire — overreacted
Turning your API inside-out.
overreacted.io
April 15, 2025 at 10:03 PM
This is a glorious blog post on the history of rendering web pages, how to write a BFF very neatly, returning a representation of UI from a server – and how you might end up inventing React Server Components if you think about these things for long enough:
Nice article: blog.nelhage.com/post/persona...
Some key points: the person knows what they are doing, the LLM is speeding them up, but when there's a hiccup they can get back on track with their own skills, and the software they are generating is only their responsibility to maintain.
Some key points: the person knows what they are doing, the LLM is speeding them up, but when there's a hiccup they can get back on track with their own skills, and the software they are generating is only their responsibility to maintain.
Building personal software with Claude
Earlier this month, I used Claude to port (parts of) an Emacs package into Rust, shrinking the execution time by a factor of 1000 or more (in one concrete case: from 90s to about 15ms).
This is a vari...
blog.nelhage.com
February 10, 2025 at 11:55 AM
Nice article: blog.nelhage.com/post/persona...
Some key points: the person knows what they are doing, the LLM is speeding them up, but when there's a hiccup they can get back on track with their own skills, and the software they are generating is only their responsibility to maintain.
Some key points: the person knows what they are doing, the LLM is speeding them up, but when there's a hiccup they can get back on track with their own skills, and the software they are generating is only their responsibility to maintain.
Reposted by Phil Wolstenholme
I blogged about what my testing workflow is like now that I'm one of those developer creatures:
cactus-flamingo.ghost.io/a-software-e...
cactus-flamingo.ghost.io/a-software-e...
A Software Engineer in Testing: How I Build Quality In
If you're familiar with my journey, you'll know I made the transition to a software engineer role around 6 months ago, after being a QA engineer in various forms for the best part of a decade. Part of...
cactus-flamingo.ghost.io
December 31, 2024 at 4:43 PM
I blogged about what my testing workflow is like now that I'm one of those developer creatures:
cactus-flamingo.ghost.io/a-software-e...
cactus-flamingo.ghost.io/a-software-e...
Locked in
For those on BlueSky unfamiliar with this modern British tradition:
During times of high winds, we all jump on YouTube and watch planes trying to land at Heathrow, with excited commentary from the UK's premier plane nerd channel.
Currently live here!
www.youtube.com/live/egvoBvc...
During times of high winds, we all jump on YouTube and watch planes trying to land at Heathrow, with excited commentary from the UK's premier plane nerd channel.
Currently live here!
www.youtube.com/live/egvoBvc...
December 7, 2024 at 9:58 AM
Locked in
Reposted by Phil Wolstenholme
It's December 1st, and you know what that means: For the next 24 days, we'll publish articles about HTML by 24 authors. You can read them on the website or subscribe to the RSS channel.
Enjoy!
htmhell.dev/adventcalend...
Enjoy!
htmhell.dev/adventcalend...
HTMHell Advent Calendar 2024 - HTMHell
An article, talk, or tool that focuses on HTML every day until Christmas.
htmhell.dev
December 1, 2024 at 8:00 AM
It's December 1st, and you know what that means: For the next 24 days, we'll publish articles about HTML by 24 authors. You can read them on the website or subscribe to the RSS channel.
Enjoy!
htmhell.dev/adventcalend...
Enjoy!
htmhell.dev/adventcalend...
Just picked this up
🚨 New Price Alert
I’ve dropped the price of my book from $39 to just $19.99 to make it accessible to a wider audience!
Level up your CSS debugging skills: debuggingcss.com
I’ve dropped the price of my book from $39 to just $19.99 to make it accessible to a wider audience!
Level up your CSS debugging skills: debuggingcss.com
November 24, 2024 at 1:25 PM
Just picked this up
Absolutely this, Knip probably saves me and my team about twice a week from leaving dead code in the codebase, exporting things that don't need to be exported, forgetting to remove a library from package.json when we stop using it in code – that sort of thing
✂️ knip.dev by @webpro.nl is the best tool to find all unused exports and unused deps.
Easy setup 🚀
bun create @knip/config
bun add
Resolving dependencies
Resolved, downloaded and extracted [8]
Saved lockfile
✓ Install Knip
✓ Add knip to package.json#scripts
✓ Run "bun run knip" to run knip
Easy setup 🚀
bun create @knip/config
bun add
Resolving dependencies
Resolved, downloaded and extracted [8]
Saved lockfile
✓ Install Knip
✓ Add knip to package.json#scripts
✓ Run "bun run knip" to run knip
Declutter your JavaScript & TypeScript projects
Project linter to find and remove unused files, dependencies and exports in JavaScript and TypeScript projects
knip.dev
November 23, 2024 at 12:15 PM
Absolutely this, Knip probably saves me and my team about twice a week from leaving dead code in the codebase, exporting things that don't need to be exported, forgetting to remove a library from package.json when we stop using it in code – that sort of thing
Reposted by Phil Wolstenholme
Scroll gallery effect using CSS grid and scroll-driven animations ✨
- split images into layers
- lay out images in stacked layers with same grid structure
- animate the size of the center image
- animate the layers to reveal with different timings
- split images into layers
- lay out images in stacked layers with same grid structure
- animate the size of the center image
- animate the layers to reveal with different timings
November 22, 2024 at 2:57 AM
Scroll gallery effect using CSS grid and scroll-driven animations ✨
- split images into layers
- lay out images in stacked layers with same grid structure
- animate the size of the center image
- animate the layers to reveal with different timings
- split images into layers
- lay out images in stacked layers with same grid structure
- animate the size of the center image
- animate the layers to reveal with different timings
I tried moving from Lodash to `es-toolkit/compat` (as a stepping stone) but now it looks like Webpack is pulling in www.npmjs.com/package/buffer and its dependencies (62.93kb!) so my bundle size has _increased_. I think it's github.com/vercel/next.... from @nextjs.org causing mischief 😭 @leerob.com
buffer
Node.js Buffer API, for the browser. Latest version: 6.0.3, last published: 4 years ago. Start using buffer in your project by running `npm i buffer`. There are 9127 other projects in the npm registry...
www.npmjs.com
November 20, 2024 at 7:50 PM
I tried moving from Lodash to `es-toolkit/compat` (as a stepping stone) but now it looks like Webpack is pulling in www.npmjs.com/package/buffer and its dependencies (62.93kb!) so my bundle size has _increased_. I think it's github.com/vercel/next.... from @nextjs.org causing mischief 😭 @leerob.com
Reposted by Phil Wolstenholme
🚀 New Interactive Article: Overflow Clip
Explore how overflow: clip works in CSS and see why it’s useful with practical examples and demos.
🔗 ishadeed.com/article/over...
Explore how overflow: clip works in CSS and see why it’s useful with practical examples and demos.
🔗 ishadeed.com/article/over...
November 12, 2024 at 5:22 PM
🚀 New Interactive Article: Overflow Clip
Explore how overflow: clip works in CSS and see why it’s useful with practical examples and demos.
🔗 ishadeed.com/article/over...
Explore how overflow: clip works in CSS and see why it’s useful with practical examples and demos.
🔗 ishadeed.com/article/over...
Has anyone ever seen Safari render a page correctly (visually/layout speaking) but all the touch tap targets are offset? Only reproducible when Safari has been configured to show the address bar at the top of the screen, and only when a particular style of Flexbox-based modal is open? #frontend
November 12, 2024 at 7:18 PM
Has anyone ever seen Safari render a page correctly (visually/layout speaking) but all the touch tap targets are offset? Only reproducible when Safari has been configured to show the address bar at the top of the screen, and only when a particular style of Flexbox-based modal is open? #frontend
Reposted by Phil Wolstenholme
🚨 Introducing the 2024 Web Almanac, our annual "state of the web" report!
🔖 almanac.httparchive.org/en/2024/
21 chapters (11 publishing today, the rest to follow)
65 contributors for today's chapters (more to follow)
17M websites analyzed
83 TB of data processed
628 queries written
🔖 almanac.httparchive.org/en/2024/
21 chapters (11 publishing today, the rest to follow)
65 contributors for today's chapters (more to follow)
17M websites analyzed
83 TB of data processed
628 queries written
The 2024 Web Almanac
The Web Almanac is an annual state of the web report combining the expertise of the web community with the data and trends of the HTTP Archive.
almanac.httparchive.org
November 11, 2024 at 4:30 PM
🚨 Introducing the 2024 Web Almanac, our annual "state of the web" report!
🔖 almanac.httparchive.org/en/2024/
21 chapters (11 publishing today, the rest to follow)
65 contributors for today's chapters (more to follow)
17M websites analyzed
83 TB of data processed
628 queries written
🔖 almanac.httparchive.org/en/2024/
21 chapters (11 publishing today, the rest to follow)
65 contributors for today's chapters (more to follow)
17M websites analyzed
83 TB of data processed
628 queries written
I'm not sold on the colour scheme yet but as of last night wolstenhol.me is now showing Bluesky posts where it used to show Twitter posts 🙌. I just need to post some photos and videos so I can make sure it handles those okay, the old approach used a lightbox for photos and could play videos inline.
November 11, 2024 at 11:39 AM
I'm not sold on the colour scheme yet but as of last night wolstenhol.me is now showing Bluesky posts where it used to show Twitter posts 🙌. I just need to post some photos and videos so I can make sure it handles those okay, the old approach used a lightbox for photos and could play videos inline.
If anyone in the UK is looking for a simple but good beans-to-cup coffee machine then this is the one I've had for three years now, and £399 is a great price! www.techradar.com/home/coffee-...
I test coffee machines for a living, and this Smeg espresso machine is the best Black Friday deal I've seen so far
With £300 off, this is the cheapest this bean-to-cup machine has ever been
www.techradar.com
November 10, 2024 at 9:30 AM
If anyone in the UK is looking for a simple but good beans-to-cup coffee machine then this is the one I've had for three years now, and £399 is a great price! www.techradar.com/home/coffee-...
I'm sick, which obviously means it's time to rebuild wolstenhol.me in Astro, mainly just because my current site won't build anymore due to hitting the max environment variables size limit on AWS/Netlify Functions… I should probably just try and fix that first, right?
Phil Wolstenholme's personal website, blog and portfolio
Phil Wolstenholme's personal site
wolstenhol.me
November 9, 2024 at 3:35 PM
I'm sick, which obviously means it's time to rebuild wolstenhol.me in Astro, mainly just because my current site won't build anymore due to hitting the max environment variables size limit on AWS/Netlify Functions… I should probably just try and fix that first, right?
Reposted by Phil Wolstenholme
This may be helpful for you new followers. You can block every single person on these lists. Just click on the subscribe button and it will give you the option to block every one on it. Here’s the first: bsky.app/profile/did:...
November 6, 2024 at 9:49 PM
This may be helpful for you new followers. You can block every single person on these lists. Just click on the subscribe button and it will give you the option to block every one on it. Here’s the first: bsky.app/profile/did:...