Sign in

Lea Verou, PhD

@lea.verou.me
18K followers 399 following 893 posts

I make things for making things. @leaverou@front-end.social on Mastodon, @leaverou elsewhere lea.verou.me

PostsRepliesMedia
Lea Verou, PhD @lea.verou.me · 18h
I’m skeptical about these. Eg if you write a first draft and give it to AI to polish it’s still your points, but it might get a 100% score. I think there’s a big difference between AI editing vs AI authoring and I really doubt this is the latter.
100
Lea Verou, PhD @lea.verou.me · 18h
This is so good. “Think about it this way: when the steam shovel was invented, digging didn’t stop. We just stopped using hand shovels and started building skyscrapers. The scale of what we could create exploded.” h/t @svgees.us
4194
Reposted by Lea Verou, PhD
Chrome for Developers @developer.chrome.com · 02/10/2026
Entry and exit animations in a card-based UI can break if card or screen dimensions change. Newer CSS animation properties can help, but not all browsers support them. We gave a coding agent the same prompt twice: once unaided, once with Modern Web Guidance installed 🧵
271
Lea Verou, PhD @lea.verou.me · 30/09/2026
Good holy fuck or bad holy fuck?
000
Lea Verou, PhD @lea.verou.me · 30/09/2026
🗼 Live from the @tc39.es plenary in Tokyo: Just resolved to advance github.com/tc39/proposa... to Stage 2.7 Soon, export * from "foo" will also re-export default. 🤯 Chuckling to myself thinking how this would have likely been a non-starter in a more compat risk-averse committee (e.g. WHATWG). 🙃
github.com
GitHub - tc39/proposal-export-star-default: Proposal to include default export in `export * from 'module'`
Proposal to include default export in `export * from 'module'` - tc39/proposal-export-star-default
1114
Reposted by Lea Verou, PhD
Rick Viscomi @rviscomi.dev · 29/09/2026
v0.0.191 of Modern Web Guidance is out and it's a big one! *16* new guides covering: web components by @castastrophe.bsky.social Cross-Origin Storage by @tomayac.com security by @rowan.fyi UI and PWA by @jamessw.com and @sturobson.com Wasm by @sbc100.bsky.social github.com/GoogleChrome...
accessible-web-components: Make custom elements accessible by default, setting roles and ARIA state via the ElementInternals ARIA mixin, managing focus with delegatesFocus, and keeping ARIA relationships within a single shadow root.
custom-elements: Define, register, and manage the lifecycle of autonomous custom elements, covering constructor rules, lifecycle callbacks, upgrade timing, attribute/property reflection, and naming conventions.
form-associated-custom-elements: Make a custom control participate natively in forms with formAssociated and ElementInternals, submitting its own value, integrating with constraint validation, and reacting to reset, disable, and state-restore.
prerendering-custom-elements: Server-render a custom element, then hydrate it in place without re-rendering or a flash of unstyled content.
shadow-dom: Encapsulate a component's DOM and styles with Shadow DOM, construct the tree efficiently with HTML templates, and project consumer content with slots.
styling-web-components: Style across the shadow boundary with :host selectors, inherited and custom properties for theming, ::slotted and ::part, and cascade layers and container queries inside components.
web-components: Orientation and cross-cutting principles for authoring and using Web Components, covering Custom Elements, Shadow DOM, templates and slots, Declarative Shadow DOM, styling across the shadow boundary, Form-Associated Custom Elements, and accessibility requirements. Use this guide when building reusable UI components, design systems, or server-rendered custom elements.
avoid-redundant-large-asset-downloads: Avoid re-downloading and re-storing large shared assets, such as AI models, Wasm modules, or fully-bundled JavaScript libraries, that a visitor's browser may already hold from an unrelated site.
load-shared-resources-declaratively: Serve popular, unmodified scripts, stylesheets, and JavaScript modules from a shared cross-origin cache using markup or import syntax alone, witho…New Guides
migrate-web-app-origin: Transfer an installed web app to a new origin while preserving user configuration and OS-level shortcuts.
local-network-access: Access resources on a user's local network or loopback interface from a public web application.
trusted-types: Help prevent DOM-based XSS attacks by ensuring all untrusted content is sanitized before being inserted into the page.
responsive-table: Build a data table that presents tabular data with proper header semantics, and remains readable and navigable on small screens and with assistive technologies.
spatial-navigation: Implement accessible spatial navigation using arrow keys that works correctly in different layout modes (grid etc)
cpp-on-the-web: Compile C/C++ to WebAssembly using Emscripten

Updated the animated-select-picker guide to advise using standard value attributes on <option> elements to ensure standard form submission behavior.
Updated the branded-select-styling guide to emphasize retaining standard value attributes on <option> elements to preserve default form submission behaviors.
Updated the custom-select-picker-layouts guide with guidance on using :open::picker(select) selectors, customizing the ::checkmark pseudo-element, wrapping <selectedcontent> in a <button>, and managing keyboard navigation and accessibility constraints for grid layouts.
Updated the rich-media-picker guide to clarify that standard value attributes should be maintained on <option> elements to preserve form submission functionality.
Updated the out-of-order-html-streaming guide to document the full suite of static and streaming DOM insertion methods, detailing built-in sanitizer behaviors, WritableStream integration, and processing instruction marker practices.
Updated the sanitize-untrusted-html guide to detail node manipulation patterns using Document.parseHTML() to avoid mutation XSS, explain child preservation rules via replaceWithChildrenElements, and provide aligned DOMPurify fallback configurations.
Updated…Removed the prevent-text-wrapping guide.

HTML processing instructions: Added Chrome 150 and Edge 150 support in out-of-order-html-streaming.

A four-column table titled "Benchmark Evaluations" comparing unguided versus guided pass rates across 132 tasks and 1,124 assertions.

Row 1: codex_cli (gpt-5.6-sol) achieved a 59% unguided pass rate and an 81% guided pass rate, an uplift of +22 percentage points.

Row 2: claude_code (claude-sonnet-5) achieved a 54% unguided pass rate and an 87% guided pass rate, an uplift of +33 percentage points.

Row 3: antigravity (gemini-3.8-flash-medium) achieved a 65% unguided pass rate and a 91% guided pass rate, an uplift of +26 percentage points.
12310
Lea Verou, PhD @lea.verou.me · 29/09/2026
My favorite part of being in Japan is the breakfast. ❤️ You can find good Japanese food outside Japan, but I’ve never seen Japanese breakfast outside Japan. Highlight: I tried Shiokara for the first time! And I liked it! 🤤 (I do tend to like slimy salty umami things, so not a big surprise, heh)
Shiokara coyly labeled “salted squid”
1260
Lea Verou, PhD @lea.verou.me · 28/09/2026
How you know you’re in Tokyo: you’re gently rocked by an earthquake in the middle of the night, followed by an announcement that the building is earthquake resistant and to “please continue to relax” in like 10 different languages, played 3x. As if my jetlag hadn’t woken me up sufficiently… 🫠
0150
Lea Verou, PhD @lea.verou.me · 28/09/2026
*Rubs hands* this is going to be fun 😀
Weekly Fable: 25% resets in 2h
0100
Lea Verou, PhD @lea.verou.me · 25/09/2026
Related: Users are not designers. They are the experts on the *problems* they face, but not on designing good solutions. Ask about what is hard instead of what you should do next. See also: en.wikipedia.org/wiki/XY_prob...
en.wikipedia.org
XY problem - Wikipedia
090
Lea Verou, PhD @lea.verou.me · 25/09/2026
Oldie but goodie: Don't listen to users (watch them!). I can’t count the number of times I had to explain this to well-meaning engineers, who thought the way to good UX was asking users what they prefer. www.nngroup.com/articles/fir...
nngroup.com
First Rule of Usability? Don't Listen to Users
For good UX, watch what users do, not what they say. Self-reported claims and speculations about future behavior are unreliable. Users do not know what they want.
37315
Lea Verou, PhD @lea.verou.me · 25/09/2026
@cassidoo.co Hey, a while back you were asking about GitHub improvements. I wish I could exclude comment changes from PRs so I could get a sense of the extent of the change. Also, to temporarily exclude certain files or paths (e.g. docs, tests), for the same reason.
150
Lea Verou, PhD @lea.verou.me · 25/09/2026
Haha I asked exactly the same question lnkd.in/p/dYTkBDS7 We’re showing our age mate 😂
lnkd.in
Patrick - Blurry before beautiful: image previews for the web | Patrick Brosset
<img previewsrc="preview.avif" src="photo.avif"> ➡️ Support for image previews on the web! ❓️ Would you use this? ❓️ What specific capabilities would you need? Yeah, I know, I often ask for feedback...
230
Lea Verou, PhD @lea.verou.me · 24/09/2026
Ah, I see. You can have multiple names in container-name! developer.mozilla.org/en-US/docs/W... Also, you can comma-separate *any* CQs to do a union, not just name-only ones.
developer.mozilla.org
container-name CSS property - CSS | MDN
The container-name CSS property specifies a list of query container names used by the @container at-rule in a container query.
041
Lea Verou, PhD @lea.verou.me · 24/09/2026
I’m not sure I understand what you mean by carry over, but in case it’s this: you can have multiple comma-separated names to compose them (assuming UAs have implemented this properly, haven’t tested)
120
Lea Verou, PhD @lea.verou.me · 23/09/2026
Love it! But why do some features have a chart and others don't?
100
Lea Verou, PhD @lea.verou.me · 23/09/2026
For that sort of thing name-only containers might work too and look a little nicer @container mobile { } Haven’t tried it though.
1130
Lea Verou, PhD @lea.verou.me · 19/09/2026
I’ve seen PhD theses that make a lot more sense 😅
010
Lea Verou, PhD @lea.verou.me · 19/09/2026
I end up gaslighting myself over it too. “This is such a well-articulated 5 paragraphs, why can I neither understand what problem this is solving, nor how? There must be something wrong with *me*
040
Lea Verou, PhD @lea.verou.me · 19/09/2026
“These five paragraphs of Claude’s PR description could have been a sentence” is a the new “this meeting could have been an email”
511615
Lea Verou, PhD @lea.verou.me · 19/09/2026
If someone as brilliant as Jane has to post a cry for help, something is very wrong with the world.
2316
Lea Verou, PhD @lea.verou.me · 18/09/2026
The dread and panic before a new talk. 😰 It never gets easier 😬
1370
Lea Verou, PhD @lea.verou.me · 16/09/2026
That particular one renders this: In my defense, it’s for a slide deck 😂
170
Lea Verou, PhD @lea.verou.me · 16/09/2026
Out of all the web components I’ve ever made, this must be the pinnacle 😅
3212
Lea Verou, PhD @lea.verou.me · 16/09/2026
image-orientation: auto; (My neck hurt trying to find my baggage belt 😂)
1150
Lea Verou, PhD @lea.verou.me · 15/09/2026
P3 colors are out of gamut for an sRGB monitor and still need gamut mapping to be properly displayed in it! It’s turtles all the way down 🥲
010
Lea Verou, PhD @lea.verou.me · 15/09/2026
(Screenshots from @rviscomi.dev's awesome app developer-signals.rviscomi.workers.dev/interop?sort... )
developer-signals.rviscomi.workers.dev
Interop 2027 proposals - Developer Signals
Explore and vote on proposals submitted to the Interop 2027 process to shape browser interoperability priorities.
100
Lea Verou, PhD @lea.verou.me · 15/09/2026
Whoa, folks… I knew there was a need, but this is unprecedented! In only 15h after I posted it, gamut mapping shot up to be the 4th most upvoted interop proposal¹! 🎉 It's also the #1 trending, but that's kind of expected given the fact above 😂 ¹ As of right now, note this is still very fluid
1131
Lea Verou, PhD @lea.verou.me · 14/09/2026
🎨 Ever wondered why oklch() is so odd? Why adjusting L doesn't produce good color ramps? And why TF is L=100% not white?! I just wrote a thorough explanation of why this happens¹: github.com/web-platform... 👍 Upvote if you want this fixed in browsers in 2027! ¹ Spoiler: it’s lack of gamut mapping
Illustration of the problem (screenshot from issue)
23013
Lea Verou, PhD @lea.verou.me · 14/09/2026
From a product perspective, I’m in *awe* of Apple. The ultimate goal isn’t customers making a rational decision to buy. It’s them falling in love with the product, often *against* their better judgement. Most CEOs lack the vision to realize how user delight (eg that animation) can help that goal.
110
Lea Verou, PhD @lea.verou.me · 13/09/2026
Okay, that’s it. I’ve seen enough, and I’m officially smitten. 😍 Am I a fool? Probably. I’m fully aware of all the reasons this is a terrible idea. But I still want it anyway 😅
New calendar event: iPhone Duo Pre-order start
3151
Reposted by Lea Verou, PhD
Patrick Brosset @patrickbrosset.com · 11/09/2026
Interop 2027 prep is now. Want to help? 1. Go to developer-signals.rviscomi.workers.dev 2. Sign-in using GitHub 3. Find features you need 4. Click the comment icon, add your use case 5. Submit There aren't many ways to tell browsers what you need and why you need them. That's a very effective one.
The website, showing a list of web features and a search tool. The title says Shape what browsers build next. The github sign-in button is highlighted as step 1. The speech bubble icon on one of the features is highlighted as step 2.The website, a feature has been selected, and the Provide developer signal dialog is displayed. The use case text input field is highlighted as step 3. The workaround text input field is highlighted as optional. And the submit button is highlighted as step 4.
32311
Lea Verou, PhD @lea.verou.me · 11/09/2026
So today at the hotel breakfast I squirted strawberry & chocolate sauce on my eggs & bacon thinking it was ketchup & BBQ sauce. 🤦🏽‍♀️ I ended up trying it anyway. It wasn’t bad! A metaphor for life? 😅
6310
Reposted by Lea Verou, PhD
Jake Gold @jacob.gold · 08/09/2026
If you use AI less than I do, you just don’t get it. If you use AI more than I do, you’ve fucking lost it. The optimal amount of AI is exactly how much I currently use.
1330929
Reposted by Lea Verou, PhD
Josh W. Comeau @joshwcomeau.com · 08/09/2026
I've been using border-shape a ton for an Electron project I'm working on and it's just the best thing ever. Well worth a vote!
2373
Reposted by Lea Verou, PhD
Firefox for Web Developers @webdevs.firefox.com · 08/09/2026
The CSS progress() function is now in all major engines! Here's how it works:
511818
Reposted by Lea Verou, PhD
Bramus @bram.us · 08/09/2026
But that is Chromium only … Oh look, Interop 2027 is getting started … time to give github.com/web-platform... a thumbs up 😉
github.com
CSS `interpolate-size` and `calc-size()` · Issue #1373 · web-platform-tests/interop
Description The CSS interpolate-size property allows a page to opt in to animations and transitions of CSS intrinsic sizing keywords such as auto, min-content, fit-content, etc. A common use case i...
163
Reposted by Lea Verou, PhD
Ciaran Lyons @ciaranlyons.com · 07/09/2026
New TIL: two-state dark mode toggles. I keep returning to @lea.verou.me’s argument: rather than making people think about `System`, a dark mode control should only switch away from whatever state looks “yuck”. ciaranlyons.com/til/2026/09/07/two-…
041
Lea Verou, PhD @lea.verou.me · 04/09/2026
Drat, I had forgotten about that. Deleted.
010
Lea Verou, PhD @lea.verou.me · 04/09/2026
Came across this fantastic post by Slava Shestopalov randomly while looking for something else medium.com/design-bridg... In the usability & web tech class we used to teach at MIT with @karger.bsky.social I’d give a lecture on graphic design that included this, but this is so much better presented.
medium.com
Optical effects in user interfaces
How to make optically balanced icons, correct shapes alignment, and perfect corner rounding
14512
Lea Verou, PhD @lea.verou.me · 04/09/2026
They are technical enough to install an extension for this but not technical enough to click the dark mode toggle of their OS? How many such users have you encountered?
000
Lea Verou, PhD @lea.verou.me · 04/09/2026
But then wouldn’t they set dark mode in their OS settings? I did recommend sites follow the OS setting by default…
100
Reposted by Lea Verou, PhD
Firefox for Web Developers @webdevs.firefox.com · 03/09/2026
CSS attr() now works on all properties in Firefox 155. Here's how it works, and how to get the most out of it:
1016726
Lea Verou, PhD @lea.verou.me · 03/09/2026
Not necessarily, this isn’t specific to JS.
000
Lea Verou, PhD @lea.verou.me · 03/09/2026
1. _redirects (Netlify, Cloudflare and a couple others) 2. Vercel uses vercel.json 3. Apache uses .htaccess 4. Firebase uses firebase.json And even then, the redirects still won’t work in localhost or GitHub Pages… No idea what WG this would live in…
180
Lea Verou, PhD @lea.verou.me · 03/09/2026
We need a standard format for redirects & rewrites that works in any server env, whether it’s @netlify.com, @vercel.com , @cloudflare.social, Apache, localhost, @github.com Pages, @firebase.com etc. Today, if a build tool needs to generate redirects/rewrites it must special case at least 4 formats:
2202
Reposted by Lea Verou, PhD
Catherine Rampell @crampell.bsky.social · 02/09/2026
I like that this design appears to show the birth date of liberty as 1776, and its death as 2026
627113862249
Lea Verou, PhD @lea.verou.me · 03/09/2026
Yes, you are 😅 I can't stand dark mode, it actively slows me down processing the content.
110
Lea Verou, PhD @lea.verou.me · 03/09/2026
I'm not saying the option shouldn't exist, just that it doesn't warrant an always-visible toggle. High-contrast is a little different as it's an a11y adjustment, not just a preference, but I *think* as long as it's clearly visible how to get to the settings, it should be fine to have it there?
220
Lea Verou, PhD @lea.verou.me · 02/09/2026
🔥 New blog post! My post on two-state dark mode toggles sparked a lot of discussion around what the optimal dark mode toggle design is. But should you have a (persistent) dark mode toggle *at all*? I have since been convinced that for most websites, the answer is NO. lea.verou.me/blog/2026/da...
lea.verou.me
The best dark mode toggle is probably none • Lea Verou
My post on two-state dark mode toggles convinced many. But should you have a persistent dark mode toggle at all? I have since been convinced that for most websites, the answer is no.
149216