Phil Wolstenholme

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

284 followers901 following100 posts

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 😁

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…

Devon Govett@devongovett.me

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! 🎉

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?

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:

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.comMy DrupalCon Europe 2020 session feedbackBack 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…

Phil Wolstenholme reposted

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!

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.comBuilding personal software with ClaudeEarlier 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...

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

Phil Wolstenholme reposted

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

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.combufferNode.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...

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

I've seen some iOS users physically tapping on one button, but the click is registered on the button below. The layout looks fine, but to get the button you want you have to click about 2cm higher than you'd expect. Super odd, and only happens when the address bar is at the top! Other browsers fine…

Phil Wolstenholme reposted

🚨 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.orgThe 2024 Web AlmanacThe 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.

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.

I want to either update my old site or build a new one pull Bluesky posts onto my homepage instead of tweets (API long since dead) or Mastodon posts (where my interest is long since dead!)

This is very very cool, a native feeling swipe-to-dismiss modal sheet but all with CSS and a touch of JavaScript, not a Framer Motion in sight! codepen.io/jh3y/pen/LYw...

just a drawer a Popover using CSS scroll-snap and scroll-driven animation to give you drag gestures for free on touch devices 🤙 scrollsnapchange to trigger close 🚀 scroller.addEventListener('scrollsnapchange', () => { if (scroller.scrollTop === 0) drawer.hidePopover() }) watch the trick 🤙

Made a cute bit of UI to switch between Adobe Target A/B test experiences in server-side rendered HTML. It's all managed with React Server Components and API calls to save us having to load a tonne of Adobe's third party JavaScript and still suffer layout shift and flicker.

Similar to what I'm feeling. Never got on with Mastodon (a bit too self-congratulatory) and persevered with Twitter but would much rather be on a better platform if the content/community/audience is there

Kevin VZB@vzb.io

I'm new here, first impressions: - the domain as handle feature is neat - starter kits are neat - performance and UI are neat - custom feeds with logic are neat all around it's neat

You are up to date.