Accessible and animated expand/collapse components with Alpine.js and Tailwind CSS
Disclaimer: Animating max-height (or height) has a high performance cost and will lead to page...
Phil Wolstenholme
Hi š, welcome to my personal site. Itās part blog, part portfolio, part place to try new things.
I'm an accomplished developer with 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 (remember when we used to be able to go to nice places?) from Foursquare.
Words
Section titled WordsBlog posts from DEV Community or Medium (one day I'll build my own blog, I promiseā¦)
There's more!
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! (Tailwind)
- Event
- DrupalCon Europe 2020
- Talk
- Write Better CSS by Stopping Writing Any More CSS! (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 escape room (Anderson .Paak), emo (Sugarcult), vapor soul (Vaults), edm (Above & Beyond) and gauze pop (Glass Animals) over the last few weeks (their genre names, not mine!)
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.
Photos
Section titled PhotosPhotos and videos from Instagram.
Likes: 30 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: 28
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: 44 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: 44 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
Likes: 56 Comments: 5
Tagged location: Manchester, United Kingdom
It was my birthday yesterday! ššš Big thanks to @marley.rude for orchestrating a really good birthday weekend! We did a Manchester staycation thing, we stayed at @nativemcr @duciestreet which was great (red brick and iron columns! š), went to @treetopmanchester in Heaton Park (zip lines and squirrel befriending!), drank and ate at @escapetofreightisland (tacos, tequilaā¦) and was just really happy to be somewhere other than my flat for a weekend!
Likes: 34 Comments: 2
Speaking at a conference in 2019 versus speaking from your living room to a webcam in 2020 š©
Likes: 32 Comments: 8
Tagged location: Liverpool
Super late posting this, but @marley.rude and I went on a bike ride to Liverpool last weekend to escape Manchester (and not have to get a train anywhere), and it was LOVELY! (Despite cycling last about five sewage treatment works). We got a suite at @pullman_liverpool for pretty much the price of a normal one-level-up-from-standard room which was lush, saw @kilbyster and ate a bunch of tacos and drank a bunch of wine!
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ā¦
Seven Bro7hers Beerhouse
People talk about trendy, breweries.
39 Blossom Street, Manchester
La LavanderĆa
People talk about mezcal, authentic, cozy.
Ćlvaro ObregĆ³n 298 (Oaxaca), Ciudad de MĆ©xico
The Crown & Two Chairmen
People talk about burgers, wine, traditional atmosphere.
31-32 Dean St (at Bateman St), Soho
Time Out Market Lisboa
People talk about lively, good for groups, trendy.
Avenida 24 de Julho, 49 (PraƧa Dom LuĆs I), Lisboa
El Pescadito
People talk about tacos, authentic, lively.
Atlixco 38 (Juan Escutia), Cuauhtemoc
CafƩ Candelabro
Rua da ConceiĆ§Ć£o 3,, Porto
London Grind
People talk about coffee, lively, trendy.
2 London Bridge, London
PiƱa
People talk about tequila, romantic.
3 Harvest Ln, Sheffield
Blackjack Brewery
People talk about lively, good for groups, authentic.
36 Gould St, Manchester
There's more!
Tweets
Section titled TweetsTweets by me, @philw_.
Lovely new @radix_ui site: https://www.radix-ui.com ! Now that Iām using React (instead of Vue or Alpine) more Iām looking forward to a chance to try Radix at some point, and maybe Stitches too! https://twitter.com/colmtuite/status/1453021328274034694 ā¦
The new/beta @reactjs documentation ( https://beta.reactjs.org ) is using @tailwindcss. Iāve updated my list of companies/organisations that use a utility-first CSS approach: https://philwolstenholme.medium.com/companies-using-utility-first-css-in-production-c9b9c2568046 ā¦
Tweet media
Barcelona has an amazing school cycle bus every Friday. Wherever you are in the world, few kids will see this and think āIād like to be driven to school insteadā.
When the project started there were just five children taking part. Change can happen fast.
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).
Thanks!
Your message has been sent.