Writing a Vite plugin to add lazyloaded critical CSS fallbacks for users with JavaScript disabled or unavailable
I'm using a Netlify build plugin to automatically split out and inline critical CSS for my personal...
Phil Wolstenholme
Hi 👋, welcome to my personal site. It’s part blog, part portfolio, part place to try new things.
I'm a lead frontend engineer at the Co-op. I have a wide range of skills, knowledge, and experience, particularly focussed on accessibility and frontend web performance. Outside of work I'm interested in science, the environment, bouldering, bikes (everyday/utility), and open source software.
- Github
- Drupal.org
- LinkedInI hardly use Linkedin, but it's here to look ✨professional✨…
Meanwhile, elsewhere on the internet…
Tweets from Twitter, blog posts from DEV/Medium, talks from YouTube and beyond, photos from Instagram, music from Spotify, and nice places from Foursquare (lol, I know, but I've built the API integration now so Foursquare lives on on this website!).
Words
Section titled WordsBlog posts I've posted on DEV Community or Medium (one day I'll build my own blog, I promise…)
There's more!
Reading
Section titled ReadingSome things I've been reading recently:
The cost of convenience
It is tempting to build abstractions so developers have to do less and build more. However, this can
SPAs: theory versus practice
I’ve been thinking a lot recently about Single-Page Apps (SPAs) and Multi-Page Apps (MPAs). I’ve bee
The new wave of React state management
Understand the core problems state management libraries need to solve. And how the proliferation of
LeanEssays: When Demand Exceeds Capacity
We are getting solar panels on our roof. Someday. We signed a contract last November and the origina
Feature Toggles (aka Feature Flags)
Feature Flags can be categorized into several buckets; manage each appropriately. Smart implementati
There are 7 more of these. I thought I'd save you some scrolling, but if you want you can…
How Internet Explorer invented all the cool things, but we never knew.
From 2-way data binding to standard libraries to Web Components: A tribute to the innovations of the
Can large headings be exempt from Success Criterion 1.4.4 Resize text? · Issue #1671 · w3c/wcag · GitHub
A website might use fluid typography with the CSS clamp() function and viewport units. See “Fluid ty
Horizontal Scrolling in a Centered Max-Width Container
Applying modern CSS techniques to align the start position of a horizontal scrolling gallery to a pa
The balance has shifted away from SPAs
There’s a feeling in the air. A zeitgeist. SPAs are no longer the cool kids they once were 10 years
The “dark yellow problem” in design system color palettes
When defining a proper color palette for the design system I was working on, I came across the “Dark
Routing: I’m not smart enough for a SPA
Retreating to classic navigation may be cowardice, but it’s INFORMED cowardice
Refactor ➞ Organisation
Changing the organisation — to build the technology right
Speaking
Section titled SpeakingTalks I've given at conferences or other events. I'll link to slides or videos where they are available.
Write Better CSS by Stopping Writing Any More CSS! Utility-first with Tailwind
- Event
- DrupalCon Europe 2020
- Talk
- Write Better CSS by Stopping Writing Any More CSS! Utility-first with Tailwind
“Phil Wolstenholme gave an insightful and well thought out presentation.”
Daniel Lemon, Amazee Labs Progressive decoupling with Vue and Drupal
- Event
- DrupalCon Europe 2019
- Talk
- Progressive decoupling with Vue and Drupal
“Stunning talk – those tips on Twig syntax gotchas were worth it alone. Many 'thank you's!”
Jack Garratt on YouTube “Brilliant talk. If this guy made a 10 hour series on Drupal & Vue development I'd watch it ASAP.”
'just another human' on YouTube Let's go on a Contrib module safari!
- Event
- NWDUG
- Talk
- Let's go on a Contrib module safari!
Progressive decoupling with Vue and Drupal
- Event
- NWDUG Unconference 2019
- Talk
- Progressive decoupling with Vue and Drupal
Pattern Lab, Tailwind, and Vue (or the time I tried to cover three talks in one… 😬)
- Event
- NWDUG
- Talk
- Pattern Lab, Tailwind, and Vue (or the time I tried to cover three talks in one… 😬)
Vue at the Royal Navy
- Event
- VueJS Manchester Community
- Talk
- Vue at the Royal Navy
How to write better CSS by stopping writing CSS
- Event
- NWDUG Unconference 2018
- Talk
- How to write better CSS by stopping writing CSS
Performance Optimisation for the Rich and Famous
- Event
- NWDUG Unconference 2017
- Talk
- Performance Optimisation for the Rich and Famous
“Phil normally delivers really good talks, and this was no exception.”
Phil Norton A New Era of Accessibility with Drupal 8
- Event
- DrupalCamp London 2017
- Talk
- A New Era of Accessibility with Drupal 8
There's more!
Music
Section titled MusicAccording to the Spotify API, I've been listening to a bit of indietronica (Caroline Polachek), anthem emo (State Champs), oxford indie (Foals), acoustic punk (Beans on Toast), english indie rock (Asylums) and alternative hip hop (Gorillaz) over the last few weeks (their genre names, not mine!)
Foals
Foals Play 30 second preview of FoalsState Champs
State Champs Play 30 second preview of State ChampsLorde
Lorde Play 30 second preview of LordeOvermono
Overmono Play 30 second preview of OvermonoGorillaz
Gorillaz Play 30 second preview of GorillazWolf Alice
Wolf Alice Play 30 second preview of Wolf AliceCaroline Polachek
Caroline Polachek Play 30 second preview of Caroline PolachekCaribou
Caribou Play 30 second preview of CaribouAsylums
Asylums Play 30 second preview of AsylumsSleep On It
Sleep On It Play 30 second preview of Sleep On ItBeans on Toast
Beans on Toast Play 30 second preview of Beans on ToastEditors
Editors Play 30 second preview of EditorsCut Capers
Cut Capers Play 30 second preview of Cut CapersWillow Kayne
Willow Kayne Play 30 second preview of Willow Kayne
There's more!
You can click the cards above to play a little preview of the artist, courtesy of the Spotify API. I also use the Spotify API to get the tempo/BPM of the preview song, and I use this to influence the speed that a card bops at while its playing.
Press the pause icon or the esc key on your keyboard to stop the previews.
Tweets
Section titled TweetsTweets by me, @philw_.
Nice article on state management in React and how it's changed over time: https://frontendmastery.com/posts/the-new-wave-of-react-state-management/ …
We've published our internal test guidance for each Web Content Accessibility Guideline (level AA) as used by our monitoring team: https://github.com/alphagov/wcag-primer/wiki … 🎉 Great work @00selfthinker @kclarkson295 @accessibleweb @streats_ and Katherine! #accessibility #a11y
H&M wrote/translated labels for dynamic values that always assumed a positive integer. Even a negative value would still use the same label and so be printed as '30% less water used' instead of '30% more water'. Perhaps Hanlon's razor rather than greenwashing, but still not good. https://twitter.com/AShendruk/status/1542491697980100609 …
Photos
Section titled PhotosPhotos and videos from Instagram.
Likes: 14 Comments: 3
Tagged location: Glastonbury Festival
Glastonbury stage and set photos, featuring emotional highlights from Wolf Alice, Confidence Man, Glass Animals, Pet Shop Boys, Lily Allen appearing during Olivia Rodrigo with a message for the US Supreme Court, Sir Paul McCartney, and er, the Sugababes
Likes: 43 Comments: 8
Tagged location: Glastonbury Festival
Some Glastonbury pics, delayed due to post-festival Covid (almost gone!) and the usual post-festival existential slump!
Likes: 48 Comments: 1
Tagged location: Split, Croatia
Uploading a few Croatia pics to make way for Glastonbury ones! A few weeks ago Marli and I spent some time in Split and Vis (an island near Split), got very hot, rented some great ebikes (my next ebike has to have a torque sensor rather than one of them stick-a-magnet-on-the-spokes ones!), saw some great beaches and got in the sea at least once each day, and ate a lot of ice cream/gelato and pistachio yogurt. Also we went in a UNESCO protected Spar (the first picture) with Roman columns next to the fruit and beer sections!
Likes: 24 Comments: 3
Tagged location: Playa Kašjuni
Happy birthday to @marley.rude! 🥳
Likes: 69 Comments: 9
Tagged location: Cottonopolis Food & Liquor
Happy birthday to me (for yesterday!) Another year older and I still have no idea what to do with my hands in photos.
Likes: 38 Comments: 4
Tagged location: University of Liverpool
#LivUniGrad (for @marley.rude !)
Likes: 29 Comments: 1
Tagged location: Hotel Ottilia by Brøchner Hotels
Hanging out in Copenhagen while Marli finishes her (Danish company) work Christmas do. Featuring pod hotel first night, Danish Architecture Centre, then a much fancier hotel in one of the original Carlsberg brewery buildings for the rest of the trip! Free wine hour from 5-6! #copenhagen #cph
Likes: 31 Comments: 1
Tagged location: Wadi Mujib
Having just about recovered from the million steps we did across two days at Petra (and one evening of Petra by candlelight) I was ready to do a bit of canyoning-lite at Wadi Mujib which is a part hike, part canyoning, part via ferrata up a canyon (wadi) using ropes, ladders, and walking up to a nice double waterfall, then climb/jump/slide/float back down. On the way down you can float on your back and look up at the lovely sandstone rock formations and patterns. This was my last Jordan activity, now I'm just abusing the happy hour at the W hotel back in the capital after a week away from non-Arabic country levels of access to alcohol!
Likes: 30
Tagged location: Dead Sea Beach (Holiday Inn Resort)
Obligatory Dead Sea floating and mud photos! The most fun I've ever had at a Holiday Inn (probably)!
Likes: 45 Comments: 1
Tagged location: Petra, Ma`An, Jordan
Went to Petra, saw some rather old things, got offered a million donkey rides! Props to the Bedouin guy who took the first photo and had clearly done this a million times before!
Likes: 45 Comments: 4
Tagged location: Wadi Rum
Some Wadi Rum spam, featuring obligatory photo of me hanging off a rock, a totally not staged at all 'looking at the sunset' photo, and the first time I used the Astronomy mode on my phone's camera and caught a shooting star? (Or maybe just a satellite, not sure, but don't rain on my parade if you can tell what it is!) 🌠🌟🌞🇯🇴
Likes: 11 Comments: 2
Tagged location: Amman, Jordan
I also saw this in the downtown area, which doesn't really fit with the Amman Citadel pictures, but that I still liked!
There's more!
Places
Section titled PlacesA randomised asortment of places I've liked on Foursquare at one point - it could be somewhere from a holiday, or it could be a random bar in Manchester that closed three years ago…
The White Hart
People talk about breweries, casual, great value.
1 Mile End Rd (at Cambridge Heath Rd), London
Endcliffe Park
People talk about café, ice cream, Porter.
Rustings Rd (at Ecclesall Rd), Sheffield
The Tyne Bar
People talk about great value, trendy, breweries.
1 Maling St, Newcastle upon Tyne
Bravissimi!
People talk about casual.
Gateway House (Station Approach), Manchester
Taqueria Pistola y Corazon
R. da Boavista, 16, Lisboa
Hotel SP34
People talk about wine, trendy, happy hour.
Sankt Peders Stræde 34 (Vester Voldgade),
Hold Fast Bar
People talk about healthy food, lively, good for a late night.
50 Newton St, Manchester
Rudy's
People talk about pizza, authentic, casual.
9 Cotton St, Manchester
Design Museum
28 Shad Thames, London
There's more!
Contact
Section titled ContactGet in touch
You can send me a direct message on Twitter or drop me an email via this contact form (all fields are required).