Andrew Roberts
@andwrobs.com
software engineer • (re)posts about web, systems, cloud, maps, iOS, games
Reposted by Andrew Roberts
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/...
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/...
December 20, 2025 at 2:23 PM
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/...
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/...
Reposted by Andrew Roberts
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
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/...
Your job is to deliver code you have proven to work
In all of the debates about the value of AI-assistance in software development there’s one depressing anecdote that I keep on seeing: the junior engineer, empowered by some class of …
simonwillison.net
December 18, 2025 at 6:53 PM
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
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
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
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
December 16, 2025 at 10:45 PM
hugely excited for this- finally!!!
Reposted by Andrew Roberts
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 🎄
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 🎄
December 10, 2025 at 7:36 PM
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 🎄
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 🎄
Reposted by Andrew Roberts
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.
www.smashingmagazine.com
December 10, 2025 at 6:02 PM
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...
Reposted by Andrew Roberts
📣 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.
frontendmasters.com/blog/the-dee...
Would love your thoughts.
December 4, 2025 at 8:15 PM
📣 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.
frontendmasters.com/blog/the-dee...
Would love your thoughts.
Reposted by Andrew Roberts
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
November 18, 2025 at 7:09 PM
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/...
Reposted by Andrew Roberts
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
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
October 31, 2025 at 6:28 PM
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
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
Reposted by Andrew Roberts
✍️ Solved by Modern CSS: Section Layout
A new interactive article about a typical section layout and exploring how to make it more dynamic with modern CSS. Happy reading!
ishadeed.com/article/mode...
A new interactive article about a typical section layout and exploring how to make it more dynamic with modern CSS. Happy reading!
ishadeed.com/article/mode...
Solved By Modern CSS: Section Layout
Building a typical section design with modern CSS.
ishadeed.com
October 23, 2025 at 7:20 PM
✍️ Solved by Modern CSS: Section Layout
A new interactive article about a typical section layout and exploring how to make it more dynamic with modern CSS. Happy reading!
ishadeed.com/article/mode...
A new interactive article about a typical section layout and exploring how to make it more dynamic with modern CSS. Happy reading!
ishadeed.com/article/mode...
Reposted by Andrew Roberts
Reposted by Andrew Roberts
Geoffrey Litt just proposed a new analogy for working with AI coding tools that I really like: you are the surgeon, staying in command and doing the most challenging work - the AI tools are your support team and surgical assistants simonwillison.net/2025/Oct/24/...
A quote from Geoffrey Litt
A lot of people say AI will make us all "managers" or "editors"...but I think this is a dangerously incomplete view! Personally, I'm trying to code like a surgeon. A …
simonwillison.net
October 24, 2025 at 2:28 PM
Geoffrey Litt just proposed a new analogy for working with AI coding tools that I really like: you are the surgeon, staying in command and doing the most challenging work - the AI tools are your support team and surgical assistants simonwillison.net/2025/Oct/24/...
Reposted by Andrew Roberts
Don't [...spread] or .split() your strings!
Use Intl.Segmenter API. Available in every JS runtime
Use Intl.Segmenter API. Available in every JS runtime
October 23, 2025 at 2:55 PM
Don't [...spread] or .split() your strings!
Use Intl.Segmenter API. Available in every JS runtime
Use Intl.Segmenter API. Available in every JS runtime
@britegrid.io // I was building a fully static site & admin experience for a musician friend, and cost was a very important factor for them. I landed on Decap CMS, tried it, errors. same as github.com/sveltia/svel.... with Sveltia CMS, works ezpz- awesome project and UX. kudos
October 20, 2025 at 1:08 PM
@britegrid.io // I was building a fully static site & admin experience for a musician friend, and cost was a very important factor for them. I landed on Decap CMS, tried it, errors. same as github.com/sveltia/svel.... with Sveltia CMS, works ezpz- awesome project and UX. kudos
full transcript of Mitchell Hashimoto vibe coding a Ghostty feature- super cool of him to share!
mitchellh.com/writing/non-...
mitchellh.com/writing/non-...
Vibing a Non-Trivial Ghostty Feature
mitchellh.com
October 12, 2025 at 12:40 PM
full transcript of Mitchell Hashimoto vibe coding a Ghostty feature- super cool of him to share!
mitchellh.com/writing/non-...
mitchellh.com/writing/non-...
Reposted by Andrew Roberts
Please stop setting `width: 100vw` on the `body`.
It's unnecessary. By default, the `body` stretches horizontally as much as necessary.
It's problematic. Setting `width: 100vw` on it can cause overflow even if you remove the default `margin`... because the page may have a scrollbar.
#CSS
It's unnecessary. By default, the `body` stretches horizontally as much as necessary.
It's problematic. Setting `width: 100vw` on it can cause overflow even if you remove the default `margin`... because the page may have a scrollbar.
#CSS
October 11, 2025 at 7:33 PM
Please stop setting `width: 100vw` on the `body`.
It's unnecessary. By default, the `body` stretches horizontally as much as necessary.
It's problematic. Setting `width: 100vw` on it can cause overflow even if you remove the default `margin`... because the page may have a scrollbar.
#CSS
It's unnecessary. By default, the `body` stretches horizontally as much as necessary.
It's problematic. Setting `width: 100vw` on it can cause overflow even if you remove the default `margin`... because the page may have a scrollbar.
#CSS
Reposted by Andrew Roberts
cursor tracking on 3D CSS surfaces 👨🍳
inverse projection mappin' to calculate proximity in 3D space and apply an eased 0-1 value 🤙
the key: measuring the 4 corners, check the reveal 👇
(ideal for 2D canvas w/ 3D transforms)
inverse projection mappin' to calculate proximity in 3D space and apply an eased 0-1 value 🤙
the key: measuring the 4 corners, check the reveal 👇
(ideal for 2D canvas w/ 3D transforms)
October 9, 2025 at 10:13 AM
cursor tracking on 3D CSS surfaces 👨🍳
inverse projection mappin' to calculate proximity in 3D space and apply an eased 0-1 value 🤙
the key: measuring the 4 corners, check the reveal 👇
(ideal for 2D canvas w/ 3D transforms)
inverse projection mappin' to calculate proximity in 3D space and apply an eased 0-1 value 🤙
the key: measuring the 4 corners, check the reveal 👇
(ideal for 2D canvas w/ 3D transforms)
looking forward to pt. 2 of this series, fun one! Smashing Magazine's quality is consistently top-notch
Ambient Animations In Web Design: "Creating motion can be tricky. Too much and it’s distracting. Too little and a design feels flat. Ambient animations are the middle ground — subtle, slow-moving details that add atmosphere without stealing the show." #CSS www.smashingmagazine.com/2025/09/ambi...
Ambient Animations In Web Design: Principles And Implementation (Part 1) — Smashing Magazine
Creating motion can be tricky. Too much and it’s distracting. Too little and a design feels flat. Ambient animations are the middle ground — subtle, slow-moving details that add atmosphere without…
www.smashingmagazine.com
October 1, 2025 at 10:47 PM
looking forward to pt. 2 of this series, fun one! Smashing Magazine's quality is consistently top-notch
Reposted by Andrew Roberts
SQLite is such a powerhouse.
The State of Vector Search in SQLite
Making vector search fast, memory-efficient, and natural in SQLite.
marcobambini.substack.com
September 26, 2025 at 7:18 PM
SQLite is such a powerhouse.
Reposted by Andrew Roberts
CloudFlare's Distributed R2 SQL engine's is a pretty good exemplar of how to build a serverless database to process petabytes in seconds using Apache DataFusion and Apache Parquet
blog.cloudflare.com/r2-sql-deep-...
blog.cloudflare.com/r2-sql-deep-...
R2 SQL: a deep dive into our new distributed query engine
R2 SQL provides a built-in, serverless way to run ad-hoc analytic queries against your R2 Data Catalog. This post dives deep under the Iceberg into how we built this distributed engine, from its metad...
blog.cloudflare.com
September 26, 2025 at 10:29 AM
CloudFlare's Distributed R2 SQL engine's is a pretty good exemplar of how to build a serverless database to process petabytes in seconds using Apache DataFusion and Apache Parquet
blog.cloudflare.com/r2-sql-deep-...
blog.cloudflare.com/r2-sql-deep-...
Reposted by Andrew Roberts
Damn this is a thorough and concise article on Liquid Glass in CSS using SVG filters. kube.io/blog/liquid-...
Liquid Glass in the Browser: Refraction with CSS and SVG — kube.io
Explore how to recreate Apple's stunning Liquid Glass effect using CSS, SVG Displacement Maps, and refraction calculations.
kube.io
September 19, 2025 at 3:32 PM
Damn this is a thorough and concise article on Liquid Glass in CSS using SVG filters. kube.io/blog/liquid-...
Reposted by Andrew Roberts
Recreated the Apple Photos UI with React Aria in just ~200 lines! Complete with virtualized scrolling, view transitions, adjustable waterfall layout, folder tree, search, multi-selection, and accessible drag and drop.
Just one of the demos I'm planning for the new docs. 🙂
Just one of the demos I'm planning for the new docs. 🙂
September 8, 2025 at 8:38 PM
Recreated the Apple Photos UI with React Aria in just ~200 lines! Complete with virtualized scrolling, view transitions, adjustable waterfall layout, folder tree, search, multi-selection, and accessible drag and drop.
Just one of the demos I'm planning for the new docs. 🙂
Just one of the demos I'm planning for the new docs. 🙂
Reposted by Andrew Roberts
Visual anagrams are a really clever use of diffusion models.
Many more examples here! dangeng.github.io/visual_anagr...
Many more examples here! dangeng.github.io/visual_anagr...
August 19, 2025 at 8:56 PM
Visual anagrams are a really clever use of diffusion models.
Many more examples here! dangeng.github.io/visual_anagr...
Many more examples here! dangeng.github.io/visual_anagr...
Reposted by Andrew Roberts
Lots of questions about how to get the FPS meter to show up and a few other CSS rendering debugging tools
August 7, 2025 at 2:31 PM
Lots of questions about how to get the FPS meter to show up and a few other CSS rendering debugging tools
Reposted by Andrew Roberts
July 22, 2025 at 4:48 PM