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 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
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
Case study: Analyzing Notion app performance
How to make a React app load ~30% faster – by tuning some configs and delaying some scripts
Skeleton screens, but fast
Why use loading indicators if the code for them makes the load slower?
There are 7 more of these. I thought I'd save you some scrolling, but if you want you can…
How GitHub does take home technical interviews
We want to evaluate how well candidates can code, and we also want to ensure candidates can show the
Remixing React Router | Remix
Remix picked up where React Router v3 left off, and now almost everything great about Remix is comin
BBC Online — A year with serverless
Reflecting on our progress of moving the BBC’s website to serverless and outlining whats next for th
Understanding Layout Algorithms
As front-end developers, we often learn CSS by focusing on individual properties. Instead, we should
Remix: The Yang to React's Yin
Remix fills the missing piece that all React web applications need: The Network Chasm
Remix - Web Standards Are Cool Again
Remix is the first Javascript framework I’ve used that truly understands what it means to be a fulls
How I built Around the Web
How I added a new format to my website, automated publication to a newsletter, and added categories.
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 future funk (glue70), chamber psych (Katy J Pearson), drum and bass (Makoto), dutch indie rock (Pip Blom), experimental folk (Modern Nature) and washington indie (Death Cab for Cutie) over the last few weeks (their genre names, not mine!)
Death Cab for Cutie
Death Cab for Cutie Play 30 second preview of Death Cab for CutieMakoto
Makoto Play 30 second preview of MakotoFlorence + The Machine
Florence + The Machine Play 30 second preview of Florence + The MachineDijon
Dijon Play 30 second preview of DijonFreya Beer
Freya Beer Play 30 second preview of Freya BeerTaylor Swift
Taylor Swift Play 30 second preview of Taylor SwiftWesley Gonzalez
Wesley Gonzalez Play 30 second preview of Wesley GonzalezM83
M83 Play 30 second preview of M83Pip Blom
Pip Blom Play 30 second preview of Pip Blomglue70
glue70 Play 30 second preview of glue70Katy J Pearson
Katy J Pearson Play 30 second preview of Katy J Pearsonaudiobooks
audiobooks Play 30 second preview of audiobooksTYSON
TYSON Play 30 second preview of TYSONModern Nature
Modern Nature Play 30 second preview of Modern Nature
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_.
The balance has shifted away from SPAs - https://nolanlawson.com/2022/05/21/the-balance-has-shifted-away-from-spas/ … I really hope this holds. It's been quite a few years now for me that SPAs have felt like a very expensive trip in the wrong direction for most of the things they are being used for
Does anyone know what in #CSS could cause fragment links like https://wolstenhol.me/#photos to not work when first clicked? I know it's a CSS issue as https://wolstenhol.me/no-css#photos works OK. I thought maybe `content-visibility: auto` but it happens without that. Perhaps `scroll-padding`?
- Tweet media
Finally got videos from Instagram's CDN playing on my website by proxying the request via a Cloudflare Worker and spoofing an Origin and Referer header value of ` https://www.instagram.com ` on the request and then adding a Access-Control-Allow-Origin `*` value on the response 🤓💪 pic.twitter.com/J18iyHKTON
Photos
Section titled PhotosPhotos and videos from Instagram.
Likes: 65 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!
Likes: 32 Comments: 1
Tagged location: Amman, Jordan
Day 1 in Jordan 🇯🇴 Amman is a big sprawling, kinda messy (in terms of planning) capital city where I think it's assumed you drive everywhere, and my hotel is next to a dual carriageway (exotic!) so my morning errand of 'get a local SIM card so I can use data for directions and stuff' turned into an sweaty odyssey of going round in circles then coming up against ring roads/roundabouts of death with no way to cross, but I made it eventually. The afternoon (shown here!) was much more civilised! There's only me and another person on the Intrepid tour that I booked onto (I was expecting 5-12…) so it's going to be a cosy trip!
Likes: 38 Comments: 3
Tagged location: 2021 Hospitality Weekend In The Woods
Just about snuck in a full-blown day of festivalling this year (ignoring the Sunday of Moovin because it was so small!) It was SO GOOD to be back at a big event and listening to all the Hospital and related artists playing outside on generally pretty loud sound systems to a super friendly crowd and a not-oversold venue with LOADS of space to move! We made up for @_sannebosmans 's 30th being during one of the lockdowns by all wearing party hats, and hundreds of people had wished Sanne a happy birthday, sung to us, or presented us with an imaginary cake by the end of the night ☺️ There couldn't have been a better way to celebrate me finishing my job of 6.5 years on the Thursday then me and Marli jumping on a train to London to alternate between chilling and partying all weekend!
Likes: 36 Comments: 2
Tagged location: Manchester, United Kingdom
Super chill Sunday riding around Manchester with @dom_whiting 🚲🚴🔊📢
Likes: 13 Comments: 1
Tagged location: New Adelphi Building
One more for the Instagram collection of 'Phil hanging off things to make it look as if he actually does anything active anymore' - this is a giant bust of Engels' head and beard that's part sculpture, part bouldering object
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…
Wild Jordan (برية الاردن)
People talk about scenic views, healthy food, good for groups.
Othman Bin Affan St, عمان
Kuli Alma (כולי עלמא)
People talk about trendy, lively, good for groups.
Mikve Israel 10 (Barzilai), תל אביב-יפו
The Corner Hotel Barcelona
People talk about rooftop, rooftop pool, good service.
Mallorca 178 (Muntaner), Barcelona
Candelabro
People talk about wine, lively, trendy.
Lg. de Mompilher, 14, Porto
Hotel Ottilia
People talk about scenic views, wifi.
1799 København, København
Restaurant Bastard
People talk about healthy food, lively, breakfast food.
Reichenberger Str. 122, Berlin
Home Lisbon Hostel
People talk about comfortable, happy hour, complimentary breakfast.
Rua de São Nicolau, 13, 2E, Lisboa
La Lavandería
People talk about mezcal, authentic, cozy.
Álvaro Obregón 298 (Oaxaca), Ciudad de México
The Euston Tap
People talk about lively, casual, authentic.
190 Euston Rd, 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).