Lea Verou Dev Tweets

🤩 Turns out *both* Chrome & Safari quietly implemented calc(length/length) last year and it's reached 80% market share! Testcase: codepen.io/leaverou/pen/B… caniuse: caniuse.com/mdn-css_types_… Sadly, @janeori's atan2 hack won't work in Firefox as a fallback dev.to/janeori/css-ty…

Our implementation has been merged into Chrome Canary; please enable the `enable-experimental-web-platform-features` flag . Enjoy it! 🔥🔥 codepen.io/yisi/pen/NPRLE…

I and @imCGQAQ are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to @LeaVerou for bringing it to CSS. The CodePen link is coming soon.

Thank you all for voting! Thanks to your input we managed to reverse the resolution that forced all mixins to be scoped — sibling and ancestor rules will no longer be silently dropped from mixins. 🎉 Relevant WG resolution: #issuecomment-4173187508" target="_blank" rel="nofollow noopener">github.com/w3c/csswg-draf… My slides: webplatform.design/talks/mixins

This ended up being such a useful lil' utility I just published a package with it so others can enjoy hassle-free #JS symbols by the truckload! npmjs.com/package/get-sy…

Looks like there's a bug with @X polls right now (e.g. I see 0 votes although I know people who have voted). Hopefully votes are still stored and will eventually be counted! I set up a poll here if you want to make sure your vote is counted: github.com/LeaVerou/blog/… Or on Mastodon: @leaverou/116297811172593173" target="_blank" rel="nofollow noopener">front-end.social/@leaverou/1162…

🚨 Want mixins in CSS? Help the @csswg by telling us what feels natural to you! Look at the code in the screenshot. What resulting widths would you find least surprising? A: All get 100px B: div gets 100px, div > h2 gets 200px, div + p gets 300px C: div gets 100px, div > h2 gets 200px, div + p gets no width D: div and div > h2 get 100px, div + p gets no width Poll in next tweet! Please answer based on what feels natural to you, not what the current proposal says.

Folks don’t want to hear this, but my guess is, in a year, you won’t look at the code your agent writes at all. Doing so would be both beyond your ability and pointless.

After 16 years of using git, it finally happened: I came across a use case for using git to track changes to the .git directory itself. 🥲 (If you guessed that AI agents had a hand in this …you’d have guessed right)

This is great for consumers, but as a library author where do you put skills that teach @claudeai (and other agents) how to use your library effectively? Have we converged to a standard location yet? Does Claude read .claude or CLAUDE.md from node_modules?

@LeaVerou I've had to add a CLAUDE .md rule that cli commands should never be chained, only single commands, 1 at a time.

Claude: I can understand complex architectures in minutes and write highly maintainable code in a fraction of the time it would have taken a human! Also Claude: Um, how do I put this. I know you gave me permission to run a bunch of terminal commands, but I need you to approve this one manually because ampersands are hard.

There are currently two mature @TC39 proposals for the low-level functionality that would make it possible to declare *any* file type as a dependency: 1. Import text (Stage 3 as of last week!): github.com/tc39/proposal-… 2. Import bytes (Stage 2.7): github.com/tc39/proposal-… Perhaps we should push for these to get implemented *first* instead of ad hoc types for every possible type of dependency (CSS modules, HTML modules, etc), which doesn’t scale. Especially Import bytes, which is the root of them all: Even Import text can be trivially implemented on top of it via `new TextDecoder("utf-8").decode(bytes);`

If you use AI agents to write code for you, how do you think the code your setup produces compares to that of other people's AI agents?

What best expresses your setup? A: I use a bundler and wish I didn't have to B: I use a bundler and think it's fine C: I don't use a bundler D: No idea what you’re talking about (N/A)

Fascinating. iOS: "I will not allow .vibrate in the browser." Also iOS: The toggle can have the "switch" attribute, which makes the phone vibrate when you toggle it -> people build the entire haptic library on top of this fact. Also, creating a dope video of your library will greatly help it become popular.

New blog post: External import maps, today! lea.verou.me/blog/2026/exte…

Since many asked, the two relevant instructions from my CLAUDE.md are: 1. For modern web tech: “- Always use the most modern HTML, CSS, and JS you can. If it's supported in every browser, even if it's only the most recent version, use it.” Note that the overshoot is intentional: The “most recent version” as far as Claude is concerned is May 2025! 2. For pushback: “- User should not have to ask you for your opinion explicitly. Always evaluate what the user is asking you to do, and voice your concerns before proceeding if you don’t think it's a good idea. If possible, propose a better solution, but you can voice concerns even without one. This applies even to direct requests to revert or simplify. Still evaluate whether your original approach was better. The user may be missing important context. If there was a solid reasoning you suggested that approach, push back with reasoning instead of silently complying.” I suspect there is a more succinct way to achieve the same result (I never claimed to be a prompt engineering expert!), but this works.

I’ve instructed @claudeai to question anything I ask it to do and to always use modern web technologies, and it’s glorious. 😀 Alt text: Me: ok yeah I think we'll need VTs after all Claude: Before going with VTs — have you considered @property? Registering --tilt as would make it natively transitionable, and since both the parent and children read the same variable, they'd stay in sync (no double-animation issue like with raw transition: transform): @property --tilt { syntax: ""; initial-value: deg; inherits: true; Then just transition: --tilt .4s ease-out on .equation-display. Much simpler than VTs for this specific case. Or do you want VTs because other things should animate too (factors moving, etc.)?

Lots of talk about how the detachment from code inherent in AI code generation tools reduces code quality. But what about the ways it *improves* code quality? This detachment can be beneficial too: it reduces emotional attachment to the code artifact, and the biases that come with it. For example, a well-documented cognitive bias in creative work is the “IKEA effect”¹ where creators overvalue artifacts they created. The more time we spend creating something, the more attached we become, and the harder it is to see its flaws clearly. Painters are often advised to periodically turn a canvas upside down, precisely to break that attachment and regain objectivity. AI reduces exposure to the code artifact being produced, which obliterates this bias: 1. It inserts a layer of indirection between the creator and the artifact. You are no longer engaging with the code primarily as its author, but as a reviewer and mentor. You may edit, refine, and restructure it, but your default stance shifts from “I made this” to “Does this hold up?”. 2. Bias increases with time and effort invested. AI dramatically reduces both the time and effort sunk into any given implementation. Lower sunk cost makes it easier to delete, rewrite, or discard. Another positive effect is reduced rejection sensitivity. When teammates review “your” code, it can feel personal. But for a PR "co-authored with Claude", they are effectively joining you as co-reviewers. Change requests are no longer critiques of your craftsmanship; they’re corrections to an external artifact you are all evaluating together. The concern that detachment harms quality assumes an idealized human, perfectly objective and rational — a standard no actual human could ever meet. ¹ en.wikipedia.org/wiki/IKEA_effe…