One of my favorite task is creating multi-line responsive ribbon shapes using "lh" and gradients! 😁 css-tip.com/multi-line-r... css-tip.com/multi-line-r...
Andrew Roberts
@ajr.sh
software engineer • (re)posts about web, systems, cloud, maps, iOS, games
Lightweight AI planning (avoiding a "plan" or "spec" which easily gets out of date): Start PRs with an empty commit + include all of the planned tasks in PR title and description (using checkboxes) Then keep this up to date and check off the points as you / AI implement github.com/karlhorky/do...
It's-a me, 3D CSS Mario! 🍄 ⭐ I'm recreating Giles Goddard's iconic N64 face engine, so we can use it on the web. The rendering is handled by CSS matrix transforms, without WebGL or canvas. demo: codepen.io/alowpoly/pen... repo: github.com/layoutit/css...
Exciting news: React Aria is now a first-class component base in shadcn/ui! Initialize a new project with `--base aria`, or use shadcn/create to build and customize your own component library. ui.shadcn.com/docs/changel...
The Goldilocks customizable select height. Jake Archibald sizes the customizable <select> picker with anchor positioning and calc-size() so it never hits the viewport edges, shrinks too small, or grows too tall. #css #anchor jakearchibald.com/20...
You can embed Apple Maps on your website 👀 MapKit JS has been around for a while, but v6 made it easier to use: npm install, native promises, addEventListener. No custom setup or no surprises. Just install and build. Here's a demo: webkit.org/demos/yosemite
React Router v8 is now available! - All v7 future flags are now the default (Middleware, Vite env API, Split Route Modules, etc.) - ESM-only - New baselines: node 22+, React 19+, Vite 7+ - Easy upgrade from v7
React Router v8
React Router v8 is available now.
remix.run
VoidZero is joining Cloudflare. Our mission stays the same: to make JavaScript developers more productive than ever before. Vite, Vitest, Rolldown, Oxc, and Vite+ remain MIT-licensed. Evan and the VoidZero team will continue leading them.
🚀 New article on gap decorations (coming soon) in CSS. I have a small obsession with clean layout lines, and this is the first time it feels easy to draw them without polluting the markup. Goes through the new properties, a playground, and some experiments... 👾 utilitybend.com/blog/css-is-...
CSS is filling the gaps with rules. A way to style gaps in grid and flex. | utilitybend
A practical walkthrough of CSS gap decorations: column-rule, row-rule, rule-break, rule-inset, rule-visibility-items, repeat(), and animation.
utilitybend.com
💡 Use "using" for Vitest/Jest mocks/spys It's really nice to simplify You don't need manual mockReset / global afterEach cleanups anymore
ECMAScript excitement 😉 Congrats to @chronicles.org on meeting the conditions for Explicit Resource Management to be Stage 4 at @tc39.es today 🎉 It introduces `using` declarations and the Symbol.dispose protocol to deterministically and ergonomically release resources 👍 github.com/tc39/proposa...
🥭 Cross-Document View Transitions: The Gotchas Nobody Mentions Part 1 by Durgesh Rajubhai Pawar at @css-tricks.com #ViewTransitions #CrossDocumentViewTransitions #css #webdev css-tricks.com/cross-docume...
most of these github actions driven breaches are because of pull_request_target. here's some tips of what to look for when reviewing your own workflows. worth noting - it is safe, and necessary, when used correctly 🧵
📚 Colocation matters. Cognitive load matters. Boundaries matter. High cohesion matters. Yes, even in the age of AI (maybe even more so). Enter the vertical codebase:
The Vertical Codebase
Let's take a look at why the common, horizontal code structure is not ideal, where it breaks down, and what we can do about it.
tkdodo.eu
Wobble Buttons made with HTML in Canvas I can't stop clicking these
HTML in Canvas API is NUTS
Real DOM content in a canvas: fully searchable, translatable, inspectable. You can have forms, add WebGL effects & much more. Imagine if this was a customizable select 🤯 A little WIP exploration (not finished) for a very exciting API. github.com/WICG/html-in...
16 developers. 15 minutes. Single elimination. Round 1 begins March 6. Who do you think is taking it all? Fill out your bracket now at madcss.com
No text duplication. A single image used. All with clever #CSS and #SVG #filter magic! 🪄✨ Uses `text-orientation: upright` for vertical text. Matrix filter extracts just the red areas of the image. These get intersected/ subtracted from the text. Live on @codepen.io: codepen.io/thebabydino/...
also it is so much EASIER to make comprehensive tests now if you know what you’re doing. in my three vibecoded projects i made the kind of tests i’d never bother to do before. and they saved my ass many times you do need to steer it to test the right things which requires some experience and taste
I see a lot of complaints about untested AI slop in pull requests. Submitting those is a dereliction of duty as a software engineer: Your job is to deliver code you have proven to work simonwillison.net/2025/Dec/18/...
hugely excited for this- finally!!!
Introducing the new React Aria docs! 🎉 All-new content and search experience. Interactive CSS and Tailwind examples to get you started quickly – just install with shadcn. New guides and full example apps. MCP server and AI integrations. Check it out! react-aria.adobe.com
I've heard folks express concern about React Router since the Remix 3 announcement Some variation of "is it on hold?"/"is it a secondary focus?"/"will it stop getting features?" etc No, No, and No 😀 To back it up, I thought I'd put together a little "React Router Wrapped" for 2025 🎄
Masonry: Things You Won’t Need A Library For Anymore: "#CSS Masonry is almost here! Patrick Brosset takes a deep dive into what this long-awaited feature means for web developers and how you could make use of it in your own work." www.smashingmagazine.com/2025/12/maso...
Masonry: Things You Won’t Need A Library For Anymore — Smashing Magazine
CSS Masonry is almost here! Patrick Brosset takes a deep dive into what this long-awaited feature means for web developers and how you could make use of it in your own work.
smashingmagazine.com
📣 New article on @frontendmasters.com about a visual problem that bugged me for years: making a card that truly feels deep. frontendmasters.com/blog/the-dee... Would love your thoughts.
My notes on Gemini 3, including analyzing a 3.5 hour council meeting audio recording and performance on a new, improved version of my pelican on a bicycle benchmark simonwillison.net/2025/Nov/18/...
Trying out Gemini 3 Pro with audio transcription and a new pelican benchmark
Google released Gemini 3 Pro today. Here’s the announcement from Sundar Pichai, Demis Hassabis, and Koray Kavukcuoglu, their developer blog announcement from Logan Kilpatrick, the Gemini 3 Pro Model C...
simonwillison.net
I have a new article out! Super Simple Full-Bleed & Breakout Styles frontendmasters.com/blog/super-s... - my take on an old problem using modern CSS solutions. Using a spooky made up Halloween recipe to illustrate concepts. PS @chriscoyier.net told me to be proud of it 😛 #CSS