Sign in

Phil Wolstenholme

@wolstenhol.me
283 followers 901 following 100 posts

Lead front-end eng @CoopDigital. Interested in the web (front-end, #a11y, performance), environment, bikes (everyday/utility) and science. @philw_@hachyderm.io

PostsRepliesMedia
Phil Wolstenholme @wolstenhol.me · 04/07/2026
Lovely write-up :) I've been up there once by tagging onto a SkyRide (I think? Or some similar event) and it's bizarre but really cool being that high up and in a space usually completely reserved for motor traffic. Wish I'd spotted it was closed this time around too!
110
Phil Wolstenholme @wolstenhol.me · 04/07/2026
This sounds fantastic! I'm going to give this a go on my personal site and then the site I maintain at work.
000
Phil Wolstenholme @wolstenhol.me · 26/06/2026
I'm building a newer version of my personal site using Astro (wolstenhol-astro.netlify.app). It fetches some reading list items at build time and then some at request time once you start paginating. It looks like each time I fetch the Chrome for Developers blog I'm getting a different language 😁
000
Phil Wolstenholme @wolstenhol.me · 26/06/2026
Oh sweet! Good news for Next users, and Vercel are lucky to have you (part time) on board!
010
Phil Wolstenholme @wolstenhol.me · 17/06/2026
I show a little genre roundup on my website of what I've been listening to recently (the screenshot is a snapshot from a year or three ago) and I really miss the old genre names :(
120
Phil Wolstenholme @wolstenhol.me · 06/11/2025
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…
020
Phil Wolstenholme @wolstenhol.me · 29/10/2025
@jensimmons.bsky.social @saron.bsky.social @jondavis.bsky.social Sorry to chase, but any thoughts on what I could try next to help debug/prevent this, other than just remove content-visibility? Would it be worth raising a WebKit bug if I could make a repro? I can't reproduce it on macOS, only iOS
100
Phil Wolstenholme @wolstenhol.me · 24/10/2025
This all looks fantastic!
110
Phil Wolstenholme @wolstenhol.me · 23/10/2025
It seems to be the `content-visibility: auto;` that causes the issue, not the `contain-intrinsic-size`. I imagine there's something else on the page that combines with content-visibility to cause the issue, maybe our sticky header or something z-index or transform related?
000
Phil Wolstenholme @wolstenhol.me · 23/10/2025
I'm thinking maybe something compositing related but I'm a bit out of my depth! If you're based in the UK you can see a live example at shop.coop.co.uk?postcode=M60... – scroll to the bottom of the page then scroll back up to trigger the flicker.
shop.coop.co.uk
000
Phil Wolstenholme @wolstenhol.me · 23/10/2025
@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); ```
310
Phil Wolstenholme @wolstenhol.me · 08/10/2025
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?
010
Phil Wolstenholme @wolstenhol.me · 28/09/2025
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:
https://gist.github.com/philwolstenholme/fff89398fd02f0032859c9a3a60cfc94
020
Phil Wolstenholme @wolstenhol.me · 18/09/2025
Also, black tape pagination buttons, because why not?
'Previous' and 'Next' buttons using black masking tape as their background image
000
Phil Wolstenholme @wolstenhol.me · 18/09/2025
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!
A very close up and cropped screenshot of a website card representing the 'unnoq/orpc' Github repo. The card shows a repo description, its number of stars, its language, and a birthday cake emoji next to the next '1 year old this month'
141
Phil Wolstenholme @wolstenhol.me · 17/09/2025
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...
philwolstenholme.medium.com
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…
040
Phil Wolstenholme @wolstenhol.me · 12/08/2025
Oooh, what would this be?
120
Reposted by Phil Wolstenholme
Loren Stewart | Cheddy @cheddybop.bsky.social · 11/08/2025
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...
lorenstew.art
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...
4275
Phil Wolstenholme @wolstenhol.me · 11/07/2025
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!
Bundle size comparison table showing the `lodash` package being removed (saving 151.16KiB) and `es-toolkit` being added at a cost of `3.88KiB`
020
Phil Wolstenholme @wolstenhol.me · 15/04/2025
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:
080
Phil Wolstenholme @wolstenhol.me · 28/03/2025
This is really relevant to me at work at the moment! @tammyeverts.com do you have a link to that Akami study on slowness leading to 28% abandonment, please? I'd like to quote it at work but with a direct link to the source.
000
Phil Wolstenholme @wolstenhol.me · 10/02/2025
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.
blog.nelhage.com
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...
020
Phil Wolstenholme @wolstenhol.me · 09/01/2025
urn:li:fs_relatablePostCommaBeenThere:ACoAABQ11fIBQLGQbB1V1XPBZJsRwfK5r1U2Rzt !
040
Reposted by Phil Wolstenholme
meg 🌸 @cactusflamingo.bsky.social · 31/12/2024
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 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...
102910
Phil Wolstenholme @wolstenhol.me · 07/12/2024
Locked in
050
Phil Wolstenholme @wolstenhol.me · 01/12/2024
RSC
030
Reposted by Phil Wolstenholme
Manuel Matuzović @matuzo.at · 01/12/2024
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...
htmhell.dev
HTMHell Advent Calendar 2024 - HTMHell
An article, talk, or tool that focuses on HTML every day until Christmas.
2288123
Phil Wolstenholme @wolstenhol.me · 28/11/2024
Totally, that's why I like the idea, after a salesperson explains how the 'script is async so there's no performance impact' then you can nod and let them put their money where their mouth (as long as the clause explains the testing methodology so it's harder to wiggle out of it later!)
110
Phil Wolstenholme @wolstenhol.me · 28/11/2024
Ahhhh that makes perfect sense! I was thinking of reviewing RUM data rather than synthetic/lab testing! Maybe add that to the post just in case other readers' minds go to the same place I did.
010
Phil Wolstenholme @wolstenhol.me · 28/11/2024
…I think the way to counter that would be to run a 50/50 A/B test to rule out any changes in demographics or any first-party code changes that could have introduced a performance regression
200
Phil Wolstenholme @wolstenhol.me · 28/11/2024
The contract clause idea is interesting. I imagine a vendor or their legal rep. would argue that you couldn't tie the RUM score change to their product directly, because you could have just had an influx of users on lower-end devices around the time of deploying their tool (or some other excuse)…
110
Phil Wolstenholme @wolstenhol.me · 28/11/2024
That CSS generation idea is super nice! Does it render `style` elements with `linear()` easing functions?
100
Phil Wolstenholme @wolstenhol.me · 27/11/2024
Looks good. It'll make these sort of utilities stand out more, if there are specific values you know those are constants unless you configure Tailwind differently, and if there's a <number> type then you know it'll accept any number
000
Phil Wolstenholme @wolstenhol.me · 27/11/2024
What's the performance hit like (if any)? I am very tempted to suggest moving some of our single-component-level tests to use a real browser, possibly in Vitest's browser mode or Storybook's new testing stuff (both use Playwright I think) but always a bit worried about the overhead compared to JSDOM
100
Phil Wolstenholme @wolstenhol.me · 26/11/2024
Oh wow, I've never seen that before (the ARIA snapshot), that looks great!
010
Phil Wolstenholme @wolstenhol.me · 25/11/2024
Super well deserved!
110
Phil Wolstenholme @wolstenhol.me · 24/11/2024
Just picked this up
110
Phil Wolstenholme @wolstenhol.me · 23/11/2024
Yep, we have it in CI and a pre-push Git hook. Nothing gets past it 😄
010
Phil Wolstenholme @wolstenhol.me · 23/11/2024
Yep, there are quite a few packages we ignore. Interestingly Husky isn't on the list for us though!
110
Phil Wolstenholme @wolstenhol.me · 23/11/2024
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
4101
Phil Wolstenholme @wolstenhol.me · 23/11/2024
And Mean Time to Recovery when a year later the generated code stops working in prod and no one knows how to fix it… That said, it's not too different to having a team where one person is _especially_ experienced or has a particular style and then moves on - a general risk of solo work?
110
Phil Wolstenholme @wolstenhol.me · 22/11/2024
grim
010
Reposted by Phil Wolstenholme
Jhey ʕ·ᴥ· ʔ @jhey.dev · 22/11/2024
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
1132724
Phil Wolstenholme @wolstenhol.me · 22/11/2024
Can/could Sonda do comparisons, e.g. record a baseline somewhere (a JSON file perhaps) then compare the current analysis to the baseline? I'm using github.com/relative-ci/... for this at the moment but I imagine it is less accurate than Sonda
github.com
GitHub - relative-ci/bundle-stats: Analyze bundle stats(bundle size, assets, modules, packages) and compare the results between different builds. Support for webpack, rspack, rollup and vite.
Analyze bundle stats(bundle size, assets, modules, packages) and compare the results between different builds. Support for webpack, rspack, rollup and vite. - relative-ci/bundle-stats
110
Phil Wolstenholme @wolstenhol.me · 22/11/2024
Oooh that crossing by the Holiday Inn looks lethal today!
000
Phil Wolstenholme @wolstenhol.me · 20/11/2024
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
npmjs.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...
010
Phil Wolstenholme @wolstenhol.me · 18/11/2024
👋
120
Phil Wolstenholme @wolstenhol.me · 16/11/2024
Nice! A bit neater than my approach!
000
Phil Wolstenholme @wolstenhol.me · 14/11/2024
I came to the comments to try and tag someone from Meta or Vercel so thank you for saving me having to look up who'd be best to mention 😄
110
Phil Wolstenholme @wolstenhol.me · 14/11/2024
Oooh lovely, thank you for taking these. Emailing them to my work address to read later!
110