Lea Verou, PhD

I make things that help people make things. • W3C TAG alum • CSS WG Invited Expert • CS/HCI PhD @MIT • Shy extrovert.

Public Key

npub1m6e8q4lxpwxhjcczsjfsnf79g24pcuvppzlysycgdh40jyualamqapyan3

NIP-05 Address

leaverou@front--end-social.mostr.pub

Profile Code

nprofile1qqsdavns2lnqhrtevvpgfycf5lz592suwxqs30jgzvyxm6hezwwl7aspz3mhxue69uhhyetvv9ujuerpd46hxtnfduqs6amnwvaz7tmwdaejumr0ds2hfjc4

Publishing to

relay.damus.io

nos.lol

Author Public Key

npub1m6e8q4lxpwxhjcczsjfsnf79g24pcuvppzlysycgdh40jyualamqapyan3

Show more details

Last Notes

2026-08-06 13:19:20 UTC

🔥 New blog post: "Dark mode toggles: two states are enough"
Dark mode toggles that expose three visible states (system, light, dark) seem like the best option.
Until you think about user goals, that is.
Before rushing to disagree, hear me out.
https://lea.verou.me/blog/2026/dark-mode-toggles/
PS: As a data point, @nprofile…ud26 was converted after reading this 😅
https://cdn.masto.host/frontendsocial/media_attachments/files/117/048/762/449/071/247/original/7153b001f5b11d55.png

2026-07-13 16:51:48 UTC

🔥 New blog post: In defense of polyfills
A highly influential spec editor expressed the opinion that polyfilling is harmful.
I beg to differ.
https://lea.verou.me/blog/2026/polyfills/

2026-05-02 16:39:59 UTC

TIL crows only *look* black to us — they’re actually very colorful in ways human eyes are unable to perceive. 🤯
Remember that next time people can’t see your “colors”.
Some colors just require different eyes.
https://cdn.masto.host/frontendsocial/media_attachments/files/116/505/966/630/578/003/original/c6ac84e26f5da427.png

2026-03-26 22:21:58 UTC

🚨 Want mixins in CSS?
Help the @nprofile…gzhk 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*
* from the mixin
Poll in https://front-end.social/@leaverou/116297811172593173
Please answer based on what feels natural *to you*, it's not a quiz.
https://cdn.masto.host/frontendsocial/media_attachments/files/116/297/805/091/782/996/original/95f6b5718eb9d2d1.png

2026-01-07 19:36:08 UTC

- reply

@nprofile…ezqw 1. As a member of several standards bodies since 2012, you’re just …wrong.
Spec makes are not holier than thou, but we do have the weight of responsibility that ANYTHING we define can never change, the Web will carry it forever. And it needs to work for everyone, and every little edge case. It’s very different concerns than userland.
2. If you read it, you didn’t understand it, because the core point it's making is that this is not functionality that should be solved in userland.

2026-01-07 19:16:58 UTC

- reply

@nprofile…ezqw Please go find a blackboard and write "I will not reply to articles I haven’t read" 50 times.
I’ll wait.

2026-01-07 19:01:34 UTC

🔥 New blog post: Web dependencies are broken. Can we fix them?
“Dear JS ecosystem, I love you, but you have a dependency management problem when it comes to the Web, and the time has come for an intervention.”
Read more: https://lea.verou.me/blog/2026/web-deps/

2025-12-03 19:51:47 UTC

TIL: You can highlight a JS template tag as another language by prepending it with a comment like /* html */ in at least VS Code and editors wrapping it like Cursor.
How did I find out? Cursor suggested it when I tried to instead do a more convoluted
const html = String.raw;
const template = html`…`;
https://cdn.masto.host/frontendsocial/media_attachments/files/115/657/369/533/357/936/original/171a5622c75f6171.mp4

2025-11-14 02:40:19 UTC

🔥 Live from TPAC:
Native routing coming to the web platform!
First step was URLPattern.
Next is matching routes in CSS¹
Then naming them and using these high-level names in HTML, CSS, JS.
Exciting stuff.
¹ See CSS WG issue 12594 (not linking to avoid too much noise)

2025-10-27 21:08:30 UTC

After years of internalizing that JS proxies are suuuper slow, I was surprised to find that in Chrome, they seem faster for running function side effects than simply wrapping a function: https://jsbenchmark.com/#eyJjYXNlcyI6W3siaWQiOiJ4a3BUc1NaOEt0THo4VWR3MzduX2MiLCJjb2RlIjoiREFUQS5iMSgpIiwibmFtZSI6IldyYXBwZWQgZnVuY3Rpb24iLCJkZXBlbmRlbmNpZXMiOltdfSx7ImlkIjoicDBpUTFnSlExOWd3ZnNITEF1OElVIiwiY29kZSI6IkRBVEEuYjIoKSIsIm5hbWUiOiJGdW5jdGlvbiBwcm94eSIsImRlcGVuZGVuY2llcyI6W119XSwiY29uZmlnIjp7Im5hbWUiOiJGdW5jdGlvbiBzaWRlIGVmZmVjdHMgdmlhIHdyYXBwaW5nIHZzIHByb3hpZXMiLCJwYXJhbGxlbCI6dHJ1ZSwiZ2xvYmFsVGVzdENvbmZpZyI6eyJkZXBlbmRlbmNpZXMiOltdfSwiZGF0YUNvZGUiOiIvLyBtYWluIGZ1bmN0aW9uXG5sZXQgZm4gPSBmdW5jdGlvbihhKSB7IHJldHVybiBhICsgMSB9XG4vLyBzaWRlIGVmZmVjdFxubGV0IHNlID0gZnVuY3Rpb24oYSkgeyBjb25zb2xlLmxvZyhhKSB9XG5cbmxldCBiMSA9IGZ1bmN0aW9uKC4uLmFyZ3MpIHsgXG4gIGxldCByZXQgPSBSZWZsZWN0LmFwcGx5KGZuLCB0aGlzLCBhcmdzKTtcbiAgZm9yIChsZXQgcyBvZiBiMS5zZSkgUmVmbGVjdC5hcHBseShzLCB0aGlzLCBhcmdzKTtcbiAgcmV0dXJuIHJldDtcbn1cbmIxLnNlID0gW3NlXTtcblxubGV0IGIyID0gbmV3IFByb3h5KGZuLCB7IFxuICBhcHBseSh0YXJnZXQsIHRoaXNBcmcsIGFyZ3MpIHtcbiAgICBsZXQgcmV0ID0gUmVmbGVjdC5hcHBseSh0YXJnZXQsIHRoaXNBcmcsIGFyZ3MpO1xuICAgIFJlZmxlY3QuYXBwbHkoc2UsIHRoaXNBcmcsIGFyZ3MpO1xuICAgIHJldHVybiByZXQ7XG4gIH1cbn0pO1xuXG5yZXR1cm4ge2IxLCBiMn07In19
https://cdn.masto.host/frontendsocial/media_attachments/files/115/448/169/114/184/746/original/cbfae17224e5d40e.png

2025-06-19 04:14:41 UTC

- reply

@nprofile…l5uf @nprofile…g3gc @nprofile…fds5 Are you notifying me? I’m in the discussion if you scroll, and was at the TPAC meeting we got consensus to add this. It’s linked from my post too. 🙃

2025-06-18 18:21:37 UTC

💙 New blog post!
I set out to announce two web components I put together for displaying 🦋 Bluesky likes and ended up ranting about how painful it is to build accessible, localizable web components in 2025.
The components are still there, though — lucky you?
https://lea.verou.me/blog/2025/bluesky-likes/
Credits to @nprofile…g3gc for early a11y feedback and @nprofile…fds5 for the initial API exploration.

2025-06-15 06:52:13 UTC

My best recent micro-productivity hack has been to alias Cmd+T to New Tab to the Right via the OSX system settings [1]
1. Makes tab groups work properly for isolating chunks of work
2. Eliminates the spatial disconnect when you have many tabs open where you had to hunt the new tab down in a completely different place in the UI.
[1]: https://superuser.com/a/1627227

2025-06-14 18:32:10 UTC

Just realized why HF #ADHD folks make great PMs & entrepreneurs.
We spend years building systems to manage our executive dysfunction: frameworks, principles, data etc.
Imagine climbing with boulders to your waist — mastering technique is your only hope.
When we manage, we apply the same systems to folks without that weight, so they FLY.
Add the diverse skillsets, innovative thinking, hyperfocus, pattern recognition, and it’s shooting through the sky like a tiger defying the laws of gravity!
https://cdn.masto.host/frontendsocial/media_attachments/files/114/683/140/355/437/313/original/e8a5287e3139334f.png

2025-06-14 18:25:08 UTC

- reply

@nprofile…datw I recently renewed the domain, not sure why it's still down. Will investigate!

2025-06-13 15:18:57 UTC

New blog post: Construction Lines
I turned 39 today.
My career turns 20 this summer.
Prompted by a recent career change, I paused to reflect; and ask myself
“What has brought me the most joy — and why?”
https://lea.verou.me/blog/2025/construction-lines/

2025-06-13 13:36:22 UTC

I keep finding myself rewording text to remove em dashes, because some people use them as a proxy to filter out AI-generated content.
Mute em dashes, block AI bots — and typography nerds.
What surreal times we live in.

2025-06-13 07:28:27 UTC

- reply

@nprofile…wkjs What is agency? How do you know you have agency?

2025-06-13 06:34:11 UTC

Saying that AI is just "fancy autocomplete" is not the put-down you think it is.
Unless you think there’s something metaphysical to Human Intelligence (HI? 😅), that argument is like saying that Human Intelligence is just "electrical signals between neurons".
Nothing looks sophisticated if you zoom in enough.
It’s about the result, not how it’s implemented.
And the result right now is pretty damn intelligent. Especially in comparison to the average human!

2025-06-03 03:23:54 UTC

🔥 Unpopular opinion:
The girl singing Moana on the Delta plane was lovely. Cannot fathom how someone can be so cold inside they see that video and think annoying or embarrassing.
Uh, embarrassing?! She’s a QUEEN. Nothing but admiration for her. 🙇🏽‍♀️
Kudos to the parents too for making the right cost-benefit tradeoff: letting her spread her wings and brighten most people’s day even if it displeased some curmudgeons.

2025-05-30 03:50:40 UTC

- reply

@nprofile…fw6m Blink and WebKit are considered distinct engines at this point.

2025-05-29 20:26:13 UTC

I LOVE this …Chart of Shame on webstatus.dev/stats “Features missing in only one browser”.
Even lets you click on individual data points and see which features each browser is holding the Web back from.
Hopefully it will motivate implementations of these features!
https://cdn.masto.host/frontendsocial/media_attachments/files/114/592/990/080/430/253/original/a4d3a815aa2f7bbf.png

2025-05-24 05:12:16 UTC

- reply

@nprofile…md7n Heh fair enough! And yes, bedsharing is what let me breastfeed for 5 years effortlessly (plan was 2, but wanted her to stop when she was ready and …she took her time 😅). Recommending breastfeeding to women and telling them not to bedshare is setting them up for failure IMO.
Still bedsharing with our almost 6 year old with no end in sight 🫠 I’m still loving the cuddles though so not in a huge rush to get her out of our bed 🥲

2025-05-24 04:21:18 UTC

- reply

@nprofile…md7n bedsharing is the most natural thing, not a failure to set boundaries. No mammal puts their babies to sleep in a separate cave.

2025-04-24 05:20:06 UTC

Success (any kind) is usually a mix of luck, a few good calls, and not fucking up the rest too spectacularly.
Yet, cognitive biases¹ turn chaos into case studies. When someone presents their journey like divine revelation, take it with a grain of salt. Learn from the insights, discard what doesn’t resonate.
¹ Self-serving bias, hindsight bias, survivorship bias, narrative fallacy, to name a few. Our brains are so buggy that not questioning your thinking is a sign of ignorance, not competence.

2025-04-01 15:48:39 UTC

Live from the @csswg F2F:
…not only is corner-shape coming
…not only do we get squircles in CSS
…it will even be possible to *animate* between these different corner shapes because under the hood they'll all expressed as different params of the same function! 🤩
Props to @nprofile…smzc for leading this work!

2025-03-29 04:50:03 UTC

Delta’s website: “Your password must contain special characters”
Also Delta’s website: “Whoa, whoa, whoa, steady on there, not _that_ many!”
(fwiw they weren’t even special characters — I just tried to choose a password in my native language. In case you thought we live in a post-Unicode world 🥲)
https://cdn.masto.host/frontendsocial/media_attachments/files/114/243/904/340/710/198/original/07899f149c1a6702.png

2025-03-08 07:16:05 UTC

Every day, way more knowledge is created than we could possibly consume.
Therefore, if we define ignorance as the ratio of our knowledge over all knowledge, we can mathematically prove that we are becoming more ignorant by the day.
I’ll let that sink in for a bit.

2025-02-26 05:04:57 UTC

Sometimes, rarely, I encounter a problem that makes me wonder about using generators (JS).
Even less frequently, I give in to these thoughts.
Inevitably, soon after, I find myself with two problems.

2025-02-21 07:20:23 UTC

So I was browsing Amazon for a toaster and saw this.🪳
Err, thanks Amazon for giving me yet another thing to worry about 🤢
https://cdn.masto.host/frontendsocial/media_attachments/files/114/040/641/996/642/691/original/528696f46448f947.png

2025-02-12 16:38:08 UTC

- reply

@nprofile…xpjq @nprofile…fds5 @nprofile…cut6 @nprofile…44rr You mean attributes? That's already done via MutationObserver, you don't need a library :)

2025-02-12 11:09:36 UTC

🚀 Launching style-observer: A bulletproof, production-ready library for observing CSS property changes in JS.
Developed with the help of my apprentice @nprofile…fds5 over the last month, to scratch possibly one of my longest-standing itches.
Made possible by the pioneering work of @nprofile…cut6, Artem Godin, @nprofile…44rr and many others!
Blog post: https://lea.verou.me/blog/2025/style-observer/
Docs: https://observe.style
https://cdn.masto.host/frontendsocial/media_attachments/files/113/990/584/596/736/628/original/7a8ccae27bc799b5.png

2025-02-12 11:03:24 UTC

🚀 Launching style-observer: A bulletproof way to observe CSS property changes in JS.
Developed with the help of my apprentice @nprofile…fds5 over the last month.
Made possible thanks to pioneering work by @nprofile…cut6, Artem Godin, @nprofile…44rr and many others!
Blog post: https://lea.verou.me/blog/2025/style-observer/
Docs: https://observe.style

2025-02-06 06:37:39 UTC

- reply

@nprofile…syrc I do that too for occasional nose blowing, but when you have a cold and need to blow your nose 3x/min it makes your skin painful and raw, fast.

2025-02-05 16:03:19 UTC

- reply

[2/2]
The XY problem comes up all the time in #productdesign.
There is a widespread misconception that eagerly satisfying user requests is user-centered design.
Users are experts on the problems they face, but they are not product designers.
To best serve them, you need to dig deeper, figure out what their *actual* goals are, and design a good solution for *those*.

2025-02-05 16:02:49 UTC

My spouse just inadvertently inspired one of the simplest, most relatable demos of the XY problem¹ I have ever seen.
He asked if I could buy unscented TP 🧻 next time I grocery shop.
Knowing he had been getting a cold, I probed: when does the scent become a problem?
Yuuup, as I suspected, he was using it to blow his nose. 🤧
His real need was not unscented TP (the X) — it was facial tissue! (the Y)
[1/2]
¹ https://en.m.wikipedia.org/wiki/XY_problem

2025-02-05 07:27:13 UTC

- reply

@nprofile…9k0n @nprofile…5cqg A babysitter was not an option, since that would have been about $1000 out of pocket (no employer reimburses childcare) on top of her flight that was also out of pocket. It was between that and not attending. But fwiw she keeps telling everybody what an amazing time she had at “the meeting” haha.

2025-02-02 23:19:38 UTC

- reply

@nprofile…ga7k @nprofile…5cqg Surprisingly not. A missed opportunity!

2025-02-02 21:34:19 UTC

Scariest thing I’ve done as a parent: The recent CSS WG meeting had no childcare so @nprofile…5cqg and I took Zoe with us and she just sat quietly at her tablet during the meetings and ran around in the Apple HQ park during lunch.
Kids are normally not allowed so special permission had to be obtained. She had her own little badge with her affiliation down as “W3C Invited Experts” 🥹
I was very apprehensive but she asked us to trust her, so we did. And she did great! So proud of her. 🥰
https://cdn.masto.host/frontendsocial/media_attachments/files/113/936/434/615/659/580/original/6488395a2174bab0.png
https://cdn.masto.host/frontendsocial/media_attachments/files/113/936/435/691/388/268/original/c1176025d60ea8b5.png

2025-02-02 03:04:22 UTC

California public transport in a nutshell
https://cdn.masto.host/frontendsocial/media_attachments/files/113/932/070/980/548/812/original/13dd642a7414ca16.png

2025-01-30 23:50:21 UTC

🎉 Live from the CSS WG F2F: We resolved to adopt my proposal for relative colors with 2+ colors!
https://github.com/w3c/csswg-drafts/issues/11533
Very excited. This will fill a big gap that my original Relative Colors proposal (now Baseline 2024) left, and make SO MANY more use cases possible.

2025-01-22 19:15:53 UTC

- reply

@nprofile…4ju7 @nprofile…cut6 Yup, this is a low-level feature that makes things *possible* that currently are not possible, and gives us more time to figure out how to make the common cases *easy*.
That said, I was trying to keep the code small — in real use cases you'd probably use intermediate variables to make it more readable.

2025-01-22 19:14:47 UTC

- reply

@nprofile…cut6 Just left a comment, and added it to the agenda for next week.
If there's anything else I can do to move the needle on this, please let me know!

2025-01-22 19:08:41 UTC

- reply

@nprofile…xt77 Oh ffs. Once more:
1. You said that "it's just biology", but failed to justify it in any way. If you don't like people pointing out the logical fallacies in your reasoning, don't use faulty reasoning.
2. People can consider whatever they want red flags without justifying them. I did not make any claims that this being a red flag is part of biology.
3. Saying things like "feminism blinds you" is a also a red flag.

2025-01-21 14:28:32 UTC

- reply

@nprofile…xt77 I'm starting to suspect there's a language barrier here.
1. If this was just your experience, what did "It's just biology" mean?
2. I said it's a red flag, I didn't say anything about inferiority.
3. Once again, I did not try to frame my opinion as biology, or any other science. You did. The burden of proof is on you.
I suspect you threw "it's just biology" in there for emphasis and are now furiously backpedaling and flailing about. Boring. I'm probably not going to engage further.

2025-01-20 18:58:19 UTC

- reply

@nprofile…xt77 Nothing wrong with expressing opinions. It's trying to add a veneer of science to justify one's opinions that is problematic. Unless you have any actual proof for your claims, it's not "just biology", it's just you, and you might want to look into it. Here's another hot take: it's not normal to see half the population as nothing more than potential sexual mates (and even less so to think everyone shares that view). 🙄

2025-01-20 18:53:50 UTC

- reply

@nprofile…en6n @nprofile…hp3e Heh, that's the only downside: it has happened that I went shopping and forgot to take a picture. I wish there was something that synced to your phone in the background, while maintaining the same low-tech UX.

2025-01-20 18:52:54 UTC

- reply

@nprofile…g4vz TJ is Trader Joe's and black garlic is only the BEST CONDIMENT EVER. It literally goes well with anything savory.
https://cdn.masto.host/frontendsocial/media_attachments/files/113/862/191/263/757/352/original/f3b0747549bfce67.png

2025-01-20 15:21:49 UTC

- reply

@nprofile…ffvv you’re not the only one!

2025-01-20 14:42:49 UTC

We switched to a low-fi, magnetic whiteboard on the fridge for our shopping list and it’s the best thing ever.
Best thing about it? Our 5 yo can now also add her own items and it’s the cutest 🥰
https://cdn.masto.host/frontendsocial/media_attachments/files/113/861/205/366/267/589/original/507656bcde31853c.png

2025-01-19 00:51:22 UTC

- reply

@nprofile…xt77 I did. The second sentence makes an assertion without backing it up, and the third pointlessly states it's your opinion and experience, which duh, of course it is.

2025-01-16 22:12:29 UTC

- reply

@nprofile…xt77 Which part of biology would that be?

2025-01-16 22:11:38 UTC

- reply

@nprofile…dufr which is why I said "more often than not" instead of "always". E.g. there are also men who don't have friends at all, of any gender.

2025-01-16 22:08:10 UTC

🎉 OMG OMG OMG Chrome is shipping CSS attr() for every property!!! 🎉
I’ve been asking for this for over a decade!! w00t!!! 🤩
https://developer.chrome.com/blog/advanced-attr

2025-01-16 22:00:37 UTC

I wish there was a website that used past browser adoption trends to predict when a given web platform feature would reach X% market share. It would be a godsend for planning!
@nprofile…rx6j perhaps something caniuse might be interested in doing?

2025-01-16 03:40:37 UTC

- reply

@nprofile…en6n
1. How are you supposed to know? By using LLMs more, and seeing the patterns.
2. How do you identify a lie? The same way you (should be able to) fact check a statement made by a human.
LLMs are great tools, but you need to do your due diligence after and fact check their responses. But you should be doing that *anyway*!

2025-01-16 03:36:36 UTC

🔥 Hot take: If a (straight) man tells you they have no female friends, that's a red flag.
It more often than not means they cannot see women as anything other than sexual/romantic partners.
https://cdn.masto.host/frontendsocial/media_attachments/files/113/835/928/478/403/155/original/7a1e3757a08a7d15.png

2025-01-05 22:18:44 UTC

- reply

@nprofile…en6n
> We also assess what topics they have valid takes on.
How is this different than knowing what topics to ask an LLM about (because there's high probability it will be right) and what topics it will be useless at?
In my experience, most of the answers they hallucinate, I could have predicted they'd hallucinate.
> It’s a bad idea to trust it on anything without verifying after.
Well, duh. Also true for humans! 😅

2024-12-31 07:59:10 UTC

Every time someone says LLMs are useless because they are so often wrong, I can’t help but wonder if they also consider talking to other humans useless for the same reason.

2024-12-29 19:05:17 UTC

- reply

@nprofile…d22q That depends on how they’re implemented and could easily be a whole separate post. I believe what they went with (@nprofile…czmx?) was a separate fieldset with radios that is hidden from assistive tech until the main option is selected which would produce adequate a11y but not optimal UX.

2024-12-28 04:34:29 UTC

🚀 [Case study] Context Chips in Survey Design: “Okay, but how does it feel?”
The story of how a weird little UI to collect sentiment alongside survey responses defied constraints and triumphed over skepticism through #usability testing.
This is about one of the novel UIs I designed when leading #StateOfHTML 2023 — the one I’m most proud of. 💙
I’ve been meaning to write this for over a year, finally found the time during this winter break!
https://lea.verou.me/blog/2024/context-chips/

2024-12-27 05:21:27 UTC

- reply

@nprofile…dvjg sadly it’s not, apparently this was a used collectible from back then. Odd that toys seemed to have become *less* inclusive.

2024-12-26 17:48:26 UTC

💝 Holiday gift: Color.js v0.6.0-alpha.1 finally out! 🎉
- Release notes: https://github.com/color-js/color.js/releases/tag/v0.6.0-alpha.1
- NPM: https://www.npmjs.com/package/colorjs.io/v/0.6.0-alpha.1
- Docs: https://colorjs.io

2024-12-26 02:13:11 UTC

One of the gifts my daughter got today was an educational anatomy model, since she’s into medicine.
I noticed there were no female reproductive organs and the overall anatomy was masculine, so I set out to find one that would look like an adult woman.
Folks, I …had not expected this to be an insurmountable task.
I must just be using the wrong keywords, right? Right?? 👀
https://cdn.masto.host/frontendsocial/media_attachments/files/113/716/702/232/046/037/original/e2e781595fe6db8d.png

2024-12-21 06:06:28 UTC

- reply

@nprofile…u9kz I knowwwww. But to be fair, my or your experience is rather atypical 😅
FWIW I'd say yes, it is a document, and yes it counts.

2024-12-19 23:47:01 UTC

Last chance to fill out Survey Awesome!
Please do so: http://survey.awesome.me/?from=lv_masto
The more data we have (and the more representative it is) the better we can all understand the community. 🙏🏼

2024-12-18 14:33:09 UTC

- reply

@nprofile…383v Yes, you just described my exact confusion.

2024-12-18 14:22:38 UTC

Few CSS things have me as confused as transition-behavior: allow-discrete.
In theory, it's supposed to allow discrete properties like `display` to animate as well, allowing for entry and exit animations.
However, I can never seem to get it to work both ways (without @starting-style).
Example:
https://codepen.io/leaverou/pen/NPKpdKb
Fade out: ✅
Fade in: 🚫

2024-12-11 20:54:04 UTC

🪲 PSA: If an element is resized by the user (using CSS resize), Safari will *add a style attribute, yet not fire any mutation observers for it*!!
Just in case you thought MutationObserver could actually, you know, observe all relevant mutations…
Testcase: https://codepen.io/leaverou/pen/yyBabMK
---
@nprofile…r9xg dug up this old fixed Chrome bug: https://issues.chromium.org/issues/41054467
I wonder if a similar fix could work for WebKit too.

2024-12-11 20:14:03 UTC

- reply

@nprofile…yjp2 Yes! https://front-end.social/@web.awesome@threads.net/113635070925732840

2024-12-11 03:09:37 UTC

- reply

Looking at the candidates [1] and considering the needs of the TAG, these would be my top 3 choices:
1. Dan Clark: the TAG desperately needs folks with JS and UI expertise
2. @nprofile…z0wa We need people who believe the Web can be a viable alternative to proprietary native platforms, and he also seems to have the kind of energy the TAG needs.
3. @nprofile…uc22 Marcos Caceres: his past TAG tenure and extensive standards experience make this a no brainer.
[1]: https://www.w3.org/2024/10/tag-nominations

2024-12-11 03:07:42 UTC

🔥 TAG election closes in 2 hours!
I loved being a W3C TAG member for the past 4 years; it has been some of my most meaningful work. I’m grateful to @nprofile…az33 for nominating me, and all the @nprofile…ykly member organizations that voted for me, twice.
However, I decided not to stand for this election. It has been getting hard to find time, so I made the tough decision to free up my seat for someone with more of it.
[1/2]

2024-12-08 06:43:51 UTC

- reply

@nprofile…a0c8 I think a lot of it is just bad typing on built-ins. There were *so many* of these.

2024-12-08 02:45:04 UTC

- reply

@nprofile…a0c8 A common annoyance was due to it being somewhat dumb. E.g. things like:
if (element.hasAttribute("foo")) {
// do stuff with element.getAttribute("foo");
}
TS cries: "But getAttribute() can be null!"

2024-12-08 02:37:16 UTC

- reply

@nprofile…a0c8 I wouldn't mind, but it wasn't just one issue. I keep having to fight it.
I think one of the worst was a function to absolutize URLs in an HTML subtree which was iterating over a list of URL-containing attributes and setting el.setAttribute(attrName, el[attrName]); and TS went ballistic over it (and I did not want to just cast to specific element types like HTMLAnchorElement, that defats the whole point of doing it generically)

2024-12-08 02:34:14 UTC

- reply

@nprofile…nxxd GOTO the footnote in my post. TS is not the only way to have typings.

2024-12-08 01:20:37 UTC

I’ve spent some time on a TypeScript codebase this week¹.
I’ve now spent more time fighting against TS than writing out logic.
Corollary: I would've been 2x as productive without it.
Of all these warnings, how many helped me fix real bugs? None.
The original vision of TS was brilliant: Optional type hints get you the benefits of type checking, without getting in the way when you don't need them.
But at this point, TypeScript is no less painful than Java.
¹ I prefer JSDoc+TS imports myself.

2024-12-06 21:57:59 UTC

- reply

This is true across all languages, from CSS to C++. They only differ wrt how well they allow you to express your intent.
I guess in some ways, this is the common sociological pattern where the descriptive eventually becomes prescriptive ¹. But damn, in sociology it takes years or decades, not a few keystrokes. 😅
¹ Example: "Oh, many women seem to like kids. I guess that means ALL women MUST have kids"

2024-12-06 21:57:46 UTC

The idea behind prefer-const is well intentioned: if you plan to never reassign a variable, make it a constant to declare your intent upfront, reducing cognitive load.
But intent is crucial here. Good code expresses *intent*, not coincidence.
Yet linters try to enforce this rule by looking at the current snapshot of the code and asserting that if a variable currently _happens_ to not be reassigned, it means you MUST formalize this as a restriction so that it can never be reassigned! 🙃
https://cdn.masto.host/frontendsocial/media_attachments/files/113/608/044/247/932/729/original/8faa7ea7b09cb308.png

2024-12-06 21:38:28 UTC

- reply

@nprofile…n270 @nprofile…3ekn OMG thank you!!!

2024-12-06 21:35:28 UTC

- reply

@nprofile…8e3x You can attach them even without that, using a regular <link>.
The main issue is bundlers choking :(

2024-12-06 19:42:30 UTC

#lazyweb Is there any esbuild or Lit plugin that allows using regular CSS files (with @import etc) and converting them to the css`…` format that @nprofile…3ekn expects?

2024-12-05 17:57:44 UTC

- reply

@nprofile…92l0 You were not the only one. I just deleted and reposted to make it clearer

2024-12-03 05:02:10 UTC

#webcomponents API design dilemma: consistency with the platform or ergonomics?
HTML uses concatenatedcase for attributes¹ which is *terrible* for readability². But if you choose to do something different in your components they will end up with a mix of both since native attributes still apply, which also sucks.
What to do?
¹ https://w3.org/TR/design-principles/#casing-rules
² Especially as we start having 4 word attributes like shadowrootreferencetarget 🤮

2024-12-01 09:39:29 UTC

Me to @nprofile…5cqg: Look! I moved [our sleeping 5 yo] just slightly further over and now I’m free to get up and pee whenever I want!
@nprofile…5cqg: “Master has given Dobby a sock! 🥹 Dobby is free!!”
Folks, I snorted my water out 🤣🤣🤣

2024-11-30 01:25:40 UTC

WTF who spends $5k on an electric mattress pad?
https://cdn.masto.host/frontendsocial/media_attachments/files/113/569/295/341/379/167/original/8e145723814709ae.png

2024-11-29 01:23:06 UTC

My 5 yo: “This is not a proper watch, all it does is tell the time”

2024-11-21 04:01:31 UTC

“React proponents might claim that React will teach you modern UI, but from what I've seen it barely copes with modern UI.”
💯
Great read by @nprofile…0h3v
https://indieweb.social/@keithamus/113518012130847468

2024-11-20 15:04:44 UTC

- reply

@nprofile…kvc0 @nprofile…jpw4 Thank you for letting us know! It *is* set to support multiple answers, though I see now that Tally spits out radios even in that case and probably uses some very contorted JS to make them behave like checkboxes. 🤦🏽‍♀️ I can also confirm the keyboard UX is weird. It *does* work, but behaves a bit oddly when you navigate up/down 🤦🏽‍♀️
I just reported it to Tally and I will explore potentially fixing it with custom JS meanwhile. Thanks again so much for letting us know!

2024-11-19 21:59:20 UTC

- reply

@nprofile…k43c Thanks, those are some impressive sliders!
I was trying to avoid gradients for 2 reasons:
1. That gets really messy if your ticks are not evenly spaced.
2. If you miscalculate and they are not exactly in the same place the slider would snap to different places than the ticks indicate (and if you don't use a datalist at all you lose the snapping)

2024-11-19 19:54:20 UTC

- reply

@nprofile…une7 @nprofile…9k0n You can do that without JS??

2024-11-19 19:08:46 UTC

- reply

@nprofile…9sfn @nprofile…jpw4 Thank you so much! Should be fixed now :)

2024-11-19 17:58:05 UTC

- reply

@nprofile…9k0n @nprofile…une7 The thing is, ticks aren't just presentational, they also snap the slider to these points. So recreating them with gradients needs to be exactly at the same points or UX would suffer…

2024-11-19 17:24:40 UTC

CSS challenge for y'all: Is there any way to change the color of slider ticks that browsers generate when using a <datalist> with an <input type=range>?
https://codepen.io/leaverou/pen/gOVJZxb

2024-11-19 06:29:08 UTC

As his wife, I can attest that this did, indeed, happen (this morning in fact)
https://mastodon.scot/@svgeesus/113507752608489710

2024-11-09 08:31:32 UTC

My 5 year old, to her friend during pretend play: “I’m a taxi! It’s like an Uber”
Me: 👀

2024-11-08 07:06:52 UTC

TIL you can literally copy SVG code (e.g. a @npub1jcl…v6kk icon) and paste it into Adobe Illustrator and OMG I see a lot of this in my future
https://cdn.masto.host/frontendsocial/media_attachments/files/113/446/053/037/535/260/original/c284b692c59fa866.png

2024-11-07 23:27:39 UTC

- reply

@npub1kvm…5tsm More a design failure on the side of whomever wrote the HTML I’m trying to style. Web standards already has a solution to this — if they had used CSS variables I wouldn’t have to do any of this shit.

2024-11-07 22:54:21 UTC

Ah, the things we do when styling HTML we don’t control… 🫠
https://cdn.masto.host/frontendsocial/media_attachments/files/113/444/114/676/356/577/original/2d11ffbfcff156af.png

2024-09-08 00:21:26 UTC

- reply

@npub1jn2…ew2a haha interesting, which company would it be a hint for? It could be a subconscious hint!