Lea Verou, PhD's Avatar

Lea Verou, PhD

@lea.verou.me

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

16,558
Followers
333
Following
537
Posts
24.04.2023
Joined
Posts Following

Latest posts by Lea Verou, PhD @lea.verou.me

Your manager is in serious need of lightening up πŸ˜‚

03.03.2026 07:34 πŸ‘ 7 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

This is the kind of content I’m here for πŸ˜‚

03.03.2026 01:59 πŸ‘ 36 πŸ” 2 πŸ’¬ 0 πŸ“Œ 0
External import maps, today! β€’ Lea Verou A few weeks ago, I posted lamenting the current state of web dependencies. Turns out that external import maps β€” the lack of which I had identified as a core limitation β€” can be emulated today!

New blog post: External import maps, today!

lea.verou.me/blog/2026/ex...

02.03.2026 21:57 πŸ‘ 14 πŸ” 1 πŸ’¬ 1 πŸ“Œ 0

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.

02.03.2026 14:59 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

[2/2]
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.”

02.03.2026 14:59 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

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.[1/2]

02.03.2026 14:59 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

Since many asked, the instructions from my CLAUDE.md were:

1. For modern web tech:

Always use the most modern HTML, CSS, JS you can. If supported in every browser, even if it's only the most recent version, use it.

Overshoot is intentional: β€œMost recent” as far as Claude is concerned is May 2025!

02.03.2026 14:59 πŸ‘ 23 πŸ” 1 πŸ’¬ 3 πŸ“Œ 1

Claude has a lot more context than me since they’ve just looked at the whole codebase. Even if I’ve written all the code, it may have been years. It’s quite common that I’m missing important context when I think they’re wrong. Anecdotally, about 50% of the time Claude pushes back, I agree with them.

01.03.2026 07:29 πŸ‘ 2 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

Note this may be unnecessarily verbose, I’m not a prompt engineering expert πŸ˜…
Also, it’s part of my Claude .md, not the prompt.

01.03.2026 07:22 πŸ‘ 5 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

[2/2] This applies even to direct requests. Still evaluate whether your original approach was better. The user may be missing important context. If there was a solid reason you suggested that approach (e.g. avoiding code duplication), push back with reasoning instead of silently complying.”

01.03.2026 07:20 πŸ‘ 7 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

β€œ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. [1/2]

01.03.2026 07:20 πŸ‘ 11 πŸ” 0 πŸ’¬ 2 πŸ“Œ 0

Claude .md!

01.03.2026 07:13 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Where is this checkbox from?

01.03.2026 02:01 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

"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."

The overshoot is intentional β€” the "most recent version" as far as Claude is concerned is what was most recent in May 2025.

01.03.2026 01:47 πŸ‘ 13 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

I generally do, sorry for the oversight! Here you go (unfortunately I can't edit the OP): bsky.app/profile/lea....

01.03.2026 01:40 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Me: ok yeah I think we'll need VTs after all
Claude: Before going with VTs β€” have you considered @property? Registering --tilt as <angle> 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: "<angle>";
  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.)?

Me: ok yeah I think we'll need VTs after all Claude: Before going with VTs β€” have you considered @property? Registering --tilt as <angle> 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: "<angle>"; 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.)?

With alt text (posted too soon!):

01.03.2026 01:40 πŸ‘ 8 πŸ” 0 πŸ’¬ 0 πŸ“Œ 1
Post image

I’ve instructed Claude to question anything I ask it to do and to always use modern web technologies, and it’s glorious. πŸ˜€

01.03.2026 01:09 πŸ‘ 115 πŸ” 4 πŸ’¬ 6 πŸ“Œ 3

- Some way to still have both ends on the pointer but clip the one we don't need
- Have two pointers and find a way to hide one of them (suboptimal because it would take up two pseudos, but not the end of the world)

28.02.2026 22:25 πŸ‘ 2 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Some ideas that led me nowhere but may lead you somewhere:

- drawing the arrow with backgrounds and then using some clever combination of background-attachment + positions to move the background.
- some way to trigger a *different* CQ on the parent when it flips

28.02.2026 22:25 πŸ‘ 2 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

Pretty much, yes.

If you’re distributing a component as part of a design system, it's suboptimal to have it break if consumers style it.

28.02.2026 22:17 πŸ‘ 1 πŸ” 0 πŸ’¬ 2 πŸ“Œ 0
Preview
Perfectly Pointed Tooltips: A Foundation The Anchor Positioning API in CSS is very powerful. This is the beginning of a series where we understand it through the perfect use-case: tooltips.

This is a great writeup as well (but no solution): frontendmasters.com/blog/perfect...

28.02.2026 21:48 πŸ‘ 6 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Anchor position container queries | Can I use... Support tables for HTML5, CSS3, etc

(Yes I know that anchored()ΒΉ will fix this, but that's no help right now if you need Safari support)

ΒΉ caniuse.com/wf-container...

28.02.2026 21:43 πŸ‘ 6 πŸ” 0 πŸ’¬ 2 πŸ“Œ 0
Preview
Dynamic Tooltip Position with Anchor Positioning A tootlip that follows its anchor while adjusting the position of its tail

Has anyone figured a bulletproof way to use anchor positioning w/ a tooltip pointer? @css-only.dev got farΒΉΒ²Β³ but these all depend on the tooltip being opaque.

Just got nerd sniped trying to figure this out!

ΒΉ css-tip.com/tooltip-anch...
Β² css-tip.com/tooltip-anch...
Β³ css-tip.com/tooltip-anch...

28.02.2026 21:43 πŸ‘ 30 πŸ” 6 πŸ’¬ 4 πŸ“Œ 0

A big advantage of using LLM chatbots I have not seen mentioned anywhere else: you develop an β€œAI-dar”: you can detect when someone is using LLMs to talk to you.

10.02.2026 16:43 πŸ‘ 23 πŸ” 2 πŸ’¬ 6 πŸ“Œ 0

Yes β€” for now.

10.02.2026 16:38 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

I feel that to my core. My condolences to you too!

07.02.2026 16:49 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

I do the same with booze that goes into food! Eg red wine in tomato sauces, Metaxa in meat sauces etc

07.02.2026 16:49 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

🀣🀣🀣

You sir, just won the internets. πŸ˜‚

07.02.2026 16:33 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

Vibe cooking!

Happens to me all the time.

nondeterministic, nonreproducible, but oh so enjoyable, and sometimes the end result is better than expected πŸ€—

07.02.2026 07:23 πŸ‘ 11 πŸ” 1 πŸ’¬ 1 πŸ“Œ 0

A tragedy in two acts:

I just cooked the best broccoli πŸ₯¦ of my life.
It had all the good stuff: guanciale, πŸ§„, eggs, parmesan, anchovy sauce, MSG…

It was SO GOOD even my 6 year old loved it! That’s HUGE.

But it was all by eye β€” I have NO idea what proportions I used so I can never recreate it 😭😭😭

07.02.2026 02:48 πŸ‘ 31 πŸ” 0 πŸ’¬ 5 πŸ“Œ 1