iiinova — where your digital self keeps evolving

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

🗼 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)

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 😀

0100

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 · 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

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

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 · 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

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

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

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

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 · 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

Reposted by Lea Verou, PhD

Sunkanmi Fafowora @sunkanmifafowora.bsky.social · 25/08/2026

Two-state, tri-state, four-state...why should we concern ourselves with this anyway? I say users should not get this for free at all; therefore, I introduced a new mode in this article called capitalism mode ✅ codepen.io/editor/sunka... #css

Illustration of a satirical theme settings card labeled “CAPITALISM MODE.” Large text reads, “Pay $99 to change the theme.” Below, it says dark mode is a “premium” emotional support feature, while light mode is included because the invoice needs contrast. A theme toggle shows the current theme as Light, with a note: “Theme change fee: $99.00 per vibe shift.”

1345

Reposted by Lea Verou, PhD

Firefox for Web Developers @webdevs.firefox.com · 01/09/2026

Major versions of Firefox now land every two weeks, so Firefox 155 dropped today with web platform features including: 🎉 Fully typed CSS attr() 🎉 CSS progress() 🎉 Promise.allKeyed() and allSettledKeyed() 🎉 Lots of new WebTransport stuff …And more! developer.mozilla.org/en-US/docs/M...

developer.mozilla.org

Firefox 155 release notes for developers (Stable) - Mozilla | MDN

This article provides information about the changes in Firefox 155 that affect developers. Firefox 155 was released on September 1, 2026.

312113

Reposted by Lea Verou, PhD

Lea Verou, PhD @lea.verou.me · 01/09/2026

Yup, gamut mapping fixes most of the “Oklch is so weird/broken” issues circulating. I’ll never understand why people think it’s more likely that oklch is super weird and everyone praising it probably delusional, instead of the Occam’s razor explanation that browsers royally screwed it up. 🤷🏽‍♀️

062

Lea Verou, PhD @lea.verou.me · 31/08/2026

❓Fun CSS trivia! What do you get if you use contrast-color() on an out of gamut color? 😀 😀 😀 😀 😀 1. Chrome: uses the clipped color, so the result is at least legible 2. Safari/Firefox: uses the original, so the result is ILLEGIBLE ❌ 3. Firefox w/ gamut mapping enabled: uses the mapped color ✅

1175

Lea Verou, PhD @lea.verou.me · 31/08/2026

If you ever find yourself wondering whether a browser implements gamut mapping, here's a testcase that makes it blatantly obvious: codepen.io/leaverou/pen... Left: Chrome, Safari Right: Firefox 154 with layout.css.gamut-mapping.method=1

272

Reposted by Lea Verou, PhD

Ana Tudor @anatudor.bsky.social · 31/08/2026

ICYMI, `shape()` is now cross-browser! Check out this little thing on @codepen.io: codepen.io/thebabydino/... (Firefox still being weird about some of the masking stuff that's also there) #CSS

screenshot of my linked demo, showing a progress ring and a map area curving above it

2353

Lea Verou, PhD @lea.verou.me · 31/08/2026

Yay, one of my Bsky posts inspired a library for reactive updates to existing DOM! ❤️ So glad you released this, @konnorrogers.com!

1233

Reposted by Lea Verou, PhD

Kris 🧙‍♂️ Kowal @kriskowal.com · 30/08/2026

We have seen many examples of what people can make with very little effort in the new world. We have not yet seen what can be made with tremendous effort and it will be astonishing.

2164

Lea Verou, PhD @lea.verou.me · 30/08/2026

Call me naïve, but I think the Web should be making it *easier* to create accessible UIs than inaccessible ones. Instead, once you go beyond the basic primitives, the platform is a minefield: the obvious thing to do is rarely accessible, and devs must jump through hoops to make it so.

618712

Lea Verou, PhD @lea.verou.me · 30/08/2026

A design system should be able to simultaneously include <button>, <foo-tabs>, <progress class="ring"> (+ soon <progress foo-ring>), and document them via the same process. Is anyone working on a generalization of Custom Elements Manifest that supports non-CE components? If not, someone should. 🙏🏼

3190

Lea Verou, PhD @lea.verou.me · 30/08/2026

Dear @vscode.dev, please consider at least all official themes when making UI changes? The recent restyle makes it impossible to tell which tab is active and which is inactive, at least in Solarized Light.

2250

Reposted by Lea Verou, PhD

Ana Tudor @anatudor.bsky.social · 27/08/2026

Change the hue of clothes in the browser. No second image containing the clipped area of the first. All done just with #SVG #filter magic. 🪄🌟 Live on @codepen.io: codepen.io/thebabydino/... Article on the how behind: ❇️ ko-fi.com/post/Selecti... ❇️ www.patreon.com/anatudor/pos...

0122

Reposted by Lea Verou, PhD

Josh Collinsworth @collinsworth.dev · 24/08/2026

Developers Invent Developer-Shaped User

1111

Lea Verou, PhD @lea.verou.me · 24/08/2026

Starting to think this debate is moot. I sent my article to another HCI PhD less in the dev weeds. They had NO idea what control this was referring to! Then I realized, I also haven’t seen such a toggle on a consumer-facing site. It’s always tucked away in settings (which is a different use case).

5262

Reposted by Lea Verou, PhD

Chris Coyier @chriscoyier.net · 23/08/2026

I actually strive for perfect clarity with my color theme pickers. codepen.io/editor/chris...

2265174

Reposted by Lea Verou, PhD

Andreas Møller @handle.invalid · 22/08/2026

The current debate between 2 vs 3 state theme switchers is ridiculous. Everyone knows that the right answer is 100 #css #a11y

10976

Lea Verou, PhD @lea.verou.me · 23/08/2026

People often don’t believe me when I say you can take underwater photos with a modern iPhone. These are all taken with an iPhone 15, the one of me by Zoe and those of Zoe by me. #nofilter, very minimal editing for colors/definition.

Underwater pic of my daughter swimming with a full face snorkeling mask

3180

Lea Verou, PhD @lea.verou.me · 21/08/2026

So many career/life skills boil down to seeing things from someone else’s pov and focusing on value for THEM, not YOUR needs. The only variable is who you’re empathizing with (friends, customers, biz partners, etc). Perhaps Empathy is as fundamental as Math and should really be taught at school?

2504

Lea Verou, PhD @lea.verou.me · 20/08/2026

Beyond “originally pitching this” which the article cites as my only involvement, I also put a fair bit of effort into driving this resolution at the recent Berlin F2F, together with @tabatkins.com. I’m *delighted* we convinced the WG to do it. It will be a gamechanger for CSS utility classes! 🎉

4435

Lea Verou, PhD @lea.verou.me · 20/08/2026

I ran a prompt for a completely new website without specifying *anything* about client-side architecture, just "keep code lean, modern, and elegant", curious to see whether Claude would use React. Apparently, to Claude "lean, modern, and elegant" meant "use no frameworks". Interesting. 🤔

Screenshot where Claude recommends Vanilla ESM as the top option

8200