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 😁
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
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…
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! 🎉
@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); ```
@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
@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); ```
@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); ```
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.
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!
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...
Phil Wolstenholme reposted
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...
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!
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:
⚛️📝 New on Overreacted: JSX Over The Wire overreacted.io/jsx-over-the...
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.
Phil Wolstenholme reposted
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...
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
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
Phil Wolstenholme reposted
🚀 New Interactive Article: Overflow Clip Explore how overflow: clip works in CSS and see why it’s useful with practical examples and demos. 🔗 ishadeed.com/article/over...
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
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.
If anyone in the UK is looking for a simple but good beans-to-cup coffee machine then this is the one I've had for three years now, and £399 is a great price! www.techradar.com/home/coffee-...
I'm sick, which obviously means it's time to rebuild wolstenhol.me in Astro, mainly just because my current site won't build anymore due to hitting the max environment variables size limit on AWS/Netlify Functions… I should probably just try and fix that first, right?
Okay, change of plan – I just fixed wolstenhol.me instead. My Eleventy x Vue for templating x Alpine.js for the client-side JS monster will limp on for another day!
Phil Wolstenholme reposted
I just spent way too long adding every guest to a Syntax starter pack If you want to follow the best devs in web development 👇🏻 go.bsky.app/SoASbQA
Phil Wolstenholme reposted
✂️ Support the mission to automate code maintenance and make it more fun by nominating Knip! Eternal gratitude will come your way uncluttered 🫶 syntax.fm/oss
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 🤙
Phil Wolstenholme reposted
I'm building a web perf starter pack but I'm still looking for folks to add - please let me know who I'm missing because I haven't found them all on bsky yet go.bsky.app/RVWSVqe
Phil Wolstenholme reposted
does everybody know about my favorite website, the embroidery tips page that forgot to close its <h3> tags
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
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.