We’ll close it and start processing the data when he wakes up tomorrow (it's now night in 🇯🇵) All questions are optional, so even partial responses are useful!
I make things that help people make things. @leaverou@front-end.social on Mastodon, @leaverou elsewhere https://lea.verou.me
13,497 followers 302 following 342 posts
view profile on Bluesky
We’ll close it and start processing the data when he wakes up tomorrow (it's now night in 🇯🇵) All questions are optional, so even partial responses are useful!
Despite leading this year’s #StateOfHTML survey, I procrastinated in typical me fashion and submitted my response in the last few hours — I had to beg @sachagreif.com to leave it open for just a little longer 🫣 If you’re like me, here’s the link: survey.devographics.com/en-US/survey...
“…If you want to talk about possible risks to your supply chain, a single maintainer that’s grossly underpaid and overworked.” Yuuup. Baffling how so many companies depend on open source software without funding it, ever.
This is excellent. 👌🏼 “Open source, the thing that drives the world, the thing Harvard says has an economic value of $8.8 trillion. Most of it is one person. And I can promise you not one of those single person projects have the amount of resources they need” opensourcesecurity.io/2025/08-oss-...
Yes, for Lit it would defy its very premise (which is very elegant!)
Wow, TIL!
It seems a lot of the libraries that did that are old (e.g. Knockout). I wonder why. Impossible to get good performance without DOM ownership or lack of interest?
And yes, I could have just switched to using the framework to SSR everything and manage everything and maybe that wouldn't be a problem anymore. But that feels like a very blunt instrument. Often these things are tangential to what the rest of the website does.
Sure, you could argue that their script shouldn't be making these assumptions. Maybe they should have used WC so they work with every framework. But the reality is, there are a lot of UI scripts and libraries out there that make assumptions don't play work with what current frameworks do.
The example that prompted the OP: I was switching an old website to Vue so its UI update code can be more manageable. It used Carbon ads, which broke, as their script was making assumptions about the DOM that were no longer true. I now have to use a Vue component for Carbon ads. This doesn't scale.
A lot of this depends on the assumption that a single entity has full control over everything. That's not always the case (and I'd argue isn't even desirable — capability for composability is a good thing).
Yes, same for (p)react, Vue etc. The difference is it's on nodes *they* created, not nodes that were already there. So if anything else depends on nodes that were already there, you run into timing issues.
SSR tools *could* generate it too, but that's orthogonal, as long as the syntax is designed with hand-authoring DX in mind.
Either or both, they have different tradeoffs, as you know :) The latter is more verbose, but can facilitate better loading experience, if crafted well. Vue missed the opportunity there because it complains when there is HTML content too. It sees is as a mistake, not a deliberate fallback.
E.g. mostly static content where a static site generator works fine, with a few dynamic islands that you want to be able to manage with good DX without affecting the architecture / build process of the whole site.
Precisely that! Hydrate HTML that was already there (through Vue-like annotations about where data goes). JS would be the source of truth for the *data*. Important: I'm not suggesting this as the right approach for everything or even most things. Just that these cases exist and are not niche.
Reuses nodes it created. Not nodes that were in the page already. No?
Reactive templating and preserving DOM nodes (outside loops). I literally mentioned lit-html and React (Preact has the same issue AFAIK) in the 3rd post.
Yes, these may not need a build step, but they don't fit the other requirements.
How? Vue Vapor seems to require a build step at all times.
bsky.app/profile/lea....
bsky.app/profile/lea....
bsky.app/profile/lea.... (also, ❤️ at the "apologies if I'm over explaining")
Reading the other responses, I see where the confusion may be: By client-side only I was referring to not requiring a build step, nothing to do with routing. AFAIK SSR is part of the core philosophy of the project, which is counter to anything without a build step. Is that not the case?
If I have to build it myself, I have a pretty good idea of how I'd do it, but I'm *really* hoping to avoid that.
The first requirement was reactive templating :) If I have to manage UI imperatively, I can just use the DOM with a couple of my own abstractions just fine, I don't need jQuery. But managing UI updates imperatively is hell for anything nontrivial.
Oh that's interesting, thanks! I'll take another look at Alpine.
Last I checked @svelte.dev did not have a client-side version, I believe it goes against the philosophy of the tool completely.
[3/3] Reqs: - Reactive templating, not managing render() calls, so no React - Client-side, so no Svelte - Not recreate DOM when not needed (ok for loops), so it plays nicely with other stuff, so no lit-html - Data in JS, so no Alpine.js Is there anything? Am I alone in needing this?
[2/3] Petite Vue was close, but - is unmaintained - assumes this means I *also* want my data in the markup, which makes no sense - assumes this means I need tiny filesize, which is nice but orthogonal and makes it very underpowered Is there anything else in this area that is actively maintained?
I keep hitting this: How to add reactive templating to part of the page in a way that doesn't drive a steamroller through the DOM? @vuejs.org is my current go-to, but it recreates elements, which doesn't play nice with libraries not made for it and makes it fail badly when there's an error. [1/3]
🎉 Live from the CSS WG F2F: Resolved to adopt my proposal for a new @supports-query rule (name TBD) to test entire blocks of CSS and reuse feature queries! And to make me co-editor of the spec 😀 Interested in moving this forwards? Contact me for funding this work! github.com/w3c/csswg-dr...
Yesterday I found myself asking ChatGPT for advice for how to structure my prompt to get better results from another LLM. Have I now reached peak AI or what 🫠
The former! The latter would not be an improvement lol
The idea was there’s no sensible default because you need different spaces for each use case. Eventually we realized most authors do not have the background to make informed choices and end up specifying things like `in srgb` for all sorts of bogus reasons 😅
Polar spaces can produce unexpected results when interpolating because they can change the hue quite dramatically. Eg interpolating red and turquoise would give you a shade of green.
🎉 Live from the CSS WG F2F: RESOLVED: Make the color interpolation space of color-mix() to OKLab This means you'll no longer have to type color-mix(in oklab, color1, color2), just color-mix(color1, color2)
⚠️ Last chance to fill out #StateOfHTML 2025 and get browsers to pay attention to your web platform pain points! After popular demand, the survey closing date has been extended for a few more days so that returning OOO folks get a chance to fill it out too! survey.devographics.com/en-US/survey...
Obviously.
Thanks, that's exactly what I was hoping for! How would query() work? Like querySelector() on the element?
But what would you use it for? What types of relationships would you describe?
To add to @bram.us's question: What "queries" would you use it with? E.g. - first input descendant - closest name=foo sibling - input within the same
Thinking out loud, I wonder if you could productize it by framing it around something that hiring managers can use to evaluate candidates for CSS knowledge 🤔 Especially with more harder questions to distinguish surface level understanding from deeper understanding
Thank you! Don’t let these nitpicks distract from the core point that it was really well done overall! 🙌🏼
This might be a nitpick but both 2 and 3 are correct, you *can* use @property to only define inheritance rules with no type information via syntax: “*”
Re: inaccuracies the one that threw me the most was this one *Any* color function can perform color space conversion (with relative colors) including color()
Flex main/cross axis is one of those things that just won’t stick in my head no matter what
In case you felt bad for not getting a perfect score on css-questions.com, I just got 55 / 60 and I’m in the CSS WG 😅 There were a couple inaccuracies but overall pretty well done. #cssquestions
🚨 #StateofHTML 2025 closing in a few days! If you’ve been planning to take it but putting it off, now’s the time: survey.devographics.com/en-US/survey...
Just don’t ask it “in which episode does X happen?”, it will just hallucinate numbers and change them every time you tell it it was wrong 🤣
Just found another use case for ChatGPT: Getting spoilers in a controlled way while avoiding spoilers I never asked for, as often happens with searches. My prompt was “Without giving me spoilers without my consent (besides what I’m asking you about) can you tell me [question]”. Worked like a charm!
Dude? The writer is female.
I would, but there’s always user-generated content
Oooh we should bring this to
That plus control over autoplay, looping, playback rate, etc etc. But also because they #gifsAreVideos and the media typism must end 😅 Videos in is practically sugar over right? Is it just about not having to branch or can it do anything doesn’t?
🔥Hot take: Animated gifs are basically muted videos and should be allowed in
Another day, another weird print-related #ChromeBug I actually reported it this time: issues.chromium.org/issues/43489...
[2/2] I find that way more depressing compared to the slight inconvenience of folks trying to make a living doing what they love.
I also miss the free Web, and still give away a ton of my work. BUT if you idealize free labor yet understand that people need $$ to live, the obvious corollary is that they should relegate their passions to hobbies and do something else for survival. [1/2]
We recently got a Roomba for the first time. So far, its primary advantage has been getting our 6 year old to pick up her toys from the floor so that the robot doesn’t eat them. Natural consequences 😂
Fair point. I was indeed thinking of lawyers, haha!
Please let the owner be the cat. Please let the owner be the cat.
In most of these jobs that’s balanced out by the fact that good professionals tend to charge a lot more per hour though.
The better the AI agent, the less you need to iterate, right? Ideally, it just gets it right from the first prompt. The more you iterate, the higher your usage. Still with me? So usage-based billing = the worse the AI software, the more it costs! In which other industry would this fly? 🤔
I get why some #AI companies need to resort to usage-based pricing, but from a user-centered perspective, it’s completely nonsensical. Let me explain. 🧵
Lovely UX touch from ChatGPT: Holding down Cmd brings up a cheatsheet of keyboard shortcuts. Help that is there when it’s needed and out of the way when it’s not. Compare that to the common (anti)pattern where users must memorize a specific keyboard shortcut to bring this up (does anyone?).
🚀 Blog post with more background: lea.verou.me/blog/2025/st... 🙏🏼 Big thanks to @sachagreif.com @d12n.me @atopal.bsky.social @foolip.org!
🚀 The #StateOfHTML 2025 survey is now open! ➡️ Take it now: survey.devographics.com/en-US/survey... 💡 Spending time to fill these out is an investment into your craft, as browsers are using the results to make prioritization decisions. You don't have to do it in one sitting (or even one device).
Couldn't have said it better myself! In fact, I suggested to @sachagreif.com that the Baseline icons shouldn't be links, for the same reason.
Study finds A.I. LLMs advise women to ask for lower salaries than men. When prompted w/ a user profile of same education, experience & job role, differing only by gender, ChatGPT advised the female applicant to request $280K salary; Male applicant=$400K. thenextweb.com/news/chatgpt...
:state() is a great mechanism for matching elements without having to tweak their DOM. What if we could expand it to… …regular elements? github.com/whatwg/html/... …selectors (as an alias)? github.com/w3c/csswg-dr...
If you could dynamically mirror HTML content in multiple places (e.g. like a for HTML), what would you use it for?
Yup, that looks the closest. I just posted github.com/sindresorhus...
Yup, it seems that’s the closest term indeed, but currently it's defined around JS. I just posted github.com/sindresorhus... ! Let’s see what @sindresorhus.com thinks!
It's not a polyfill¹; polyfills implement an API exactly as it will be and can be removed it later without any further code changes. It's not a shim², because it doesn't intercept anything. Do we really not have a term for this? ¹ en.wikipedia.org/wiki/Polyfil... ² en.wikipedia.org/wiki/Shim_(c...
What would you call a piece of code that implements a proposed web standard, but with different syntax? E.g. it may use… - CSS custom properties instead of the proposed properties - HTML custom elements instead of the proposed element names - a regular CSS class instead of a proposed pseudo-class
I added an option for that! * Client-side templating E.g. raw DOM manipulation, jQuery, JS templating libraries, etc.
Ohh that's a great point, thanks! I’ll reword to make it clear that this means I *only* write HTML by hand.
Quick pulse check as @sachagreif.com and I finalize #StateOfHTML: If you were presented with this question in a survey: a) Do you know which options to check or would you be confused? b) Are there any options you'd personally need to enter but are missing? (this post may self-destruct tomorrow…)
There’s a nonzero chance you will die from a cancer that could have been curable because people who couldn’t pass 7th grade biology and are scared of things like “mRNA” and “riboflavin” and “walkable cities” decided to make their ignorance everybody else’s problem
cc @sachagreif.com
Surprised @bram.us's ident() didn’t make the cut. Personally, that’s the feature I’m looking forward to the most (+ mixins, functions, attr(), if())
Just finished taking this year’s #StateOfCSS! It was quite funny that there were CSS features I had designed where I had to select "Heard of it" because *technically* I haven't used them yet. 😅 If you plan to take it, do it now, it's closing very soon: stateofcss.com/en-US
Honestly, as a European, it’s baffling how lobbying is accepted as normal in the States. In any other country, that’s called corruption.
Absolutely! This is a great idea and totally wasn’t on my radar!
Browsers fund these surveys to see what matters to devs, so if others care too, it can really help. E.g. these surveys are the reason we have CSS Nesting, among other things. ⌛️ If you have ideas, time is of the essence, as the survey is launching later this month! lea.verou.me/blog/2025/de...
🔥 I have news! After a 1y hiatus, I’m once again leading this year’s #StateOfHTML survey, thanks to generous funding by Google. ❤️ 🙋🏽♀️ Is there is an HTML feature or Web API you're dying to see progress on? Suggest it and it could be included! [1/2] lea.verou.me/blog/2025/de...
[4/4] So perhaps our best bet today is: - sidenotes on large screens - popovers on other screens - regular ol' footnotes for print a11y can be tricky too. An HTML-native (longstanding HTML feature request) could help get this right w/out every dev having to figure it out from scratch.
[3/4] 3 is tough: how to add context w/out increasing prominence? Wrapping text could be a better anchor, but then we need a convention to distinguish from links. For large screens, sidenotes fix all three, but not all screens are large (+ implementation is nontrivial—even w/ anchor positioning).
[2/4] To recap the main UX issues: 1. Context switching 2. Small hit target 3. Contextless references Popovers do wonders for 1 and mitigate 3. Backlinks help, but don’t eliminate context switching as well as popovers. 2 is easy, just increase the hit testing area.
Jake points out some excellent UX issues with footnotes on the Web. But let's not throw the 👶 out with the 🛁! Footnotes add tertiary context for invested readers. All alternatives are way more prominent & harder to ignore. But they definitely need some UX love to work well on the Web. [1/4]
TIL people want to use gene editing to eliminate ADHD and ASD. Gene editing ethics aside, what a shortsighted view. Historically, most people that push humanity forwards have been neurodivergent, esp ASD, ADHD, and frequently both. [1/2]
[2/2] Sure, ADHD/ASD can make many things hard (mainly because the world is not built for us — ADHD/ASD folks work GREAT together) but hyperfocus is such a superpower. I owe everything I have ever achieved to it. I have zero discipline. I’m just lucky enough to have “productive” special interests.
TIL people want to use gene editing to eliminate ADHD and ASD. Gene editing ethics aside, what a shortsighted view. Historically, most people that push humanity forwards have been neurodivergent, esp ASD, ADHD, and frequently both. [1/2]
Heh, if it helps, that is typical ADHD. Add it to the list 🥲
I’m so sorry. I think without a list it would be very hard, I forget crucial ones. ADHD assessments should take that into account since poor memory is an ADHD hallmark. There may still be value in making a list for when you talk to your doctor. Start one now and add to it as you remember things.
…and another guilty pleasure
☺️ guilty pleasure
Are Shroedinger’s wasps vegan?
Happy birthday to you too!