Lea Verou

W3C TAG member, HCI researcher at MIT, CSS WG Invited Expert, CSS Secrets book author. I make things that help people make things. Shy extrovert. I ♥ product design, standards, code, UX, food, life!

Pronouns: she/her
Website: https://lea.verou.me
GitHub: https://github.com/leaverou

Public Key

npub1al72g7fmyugvn5u372hjg078y295gephuy7xqkewaycaqvcexdhsw2kh5q

NIP-05 Address

leaverou_at_front-end.social@momostr.pink

Profile Code

nprofile1qqswll9y0yajwyxf6wgl9tey8lrj9z6yvsm7z0rqtvhwjvwsxvvnxmcla9kxm

Author Public Key

npub1al72g7fmyugvn5u372hjg078y295gephuy7xqkewaycaqvcexdhsw2kh5q

Show more details

Last Notes

2024-08-03 19:20:17

npm link is a textbook example of a great idea rendered near-unusable by poor design (or implementation? Hard to tell).
The purpose is clear: Link to certain deps locally, so you can modularize without having to get every change through npm or make edits.
But it silently stops working and modules fall back to installed versions seemingly at random.
I have yet to build a consistent mental model about when exactly this happens. At this point, I can't even confidently assert it's deterministic!

2024-08-02 12:43:48

- reply

Btw I should also say, the UI is *gorgeous*. I think it may be one of the reasons I’m still in the app despite a fair bit of confusion. 😅
(this is known as the Aesthetic Usability Effect, see https://www.nngroup.com/articles/aesthetic-usability-effect/ )

2024-08-02 12:40:51

- reply

When you’ve been working on something for a while it's very easy to forget that concepts that are super basic and obvious to you are not to new users. 😊
Even a small note with a link to the relevant docs in each of these sections would do *wonders*. At least the user would have somewhere to go, whereas now it's a dead end.
And if there's a quick start guide, definitely direct people there when they start!

2024-08-02 12:36:01

- reply

(hope this is not coming across as complaining, just giving UX feedback as a means to give back)

2024-08-02 12:35:02

- reply

It's entirely possible these are difficult concepts to explain with a single sentence tip text in the UI, but perhaps it could _point_ to the relevant section in the docs.
Right now, there's not even a link to the docs *anywhere* in the UI. I had to poke around quite a lot to find it (eventually clicked the logo at the bottom left which took me to the homepage, which *did* have a link to Docs).
https://cdn.masto.host/frontendsocial/media_attachments/files/112/892/441/939/682/331/original/25e59d92193f618c.png
https://cdn.masto.host/frontendsocial/media_attachments/files/112/892/447/190/348/171/original/e11b7f55ba73202a.png

2024-08-02 12:30:49

- reply

Similarly, there is a "Schemas" item in the menu, which brings this up (Pic 1). Nothing tells me what a schema *is* in this context. Clicking "Create one" brings up the dialog in pic 2 but I still have no clue what I'm looking for and why.
https://cdn.masto.host/frontendsocial/media_attachments/files/112/892/430/556/954/480/original/c55cbeebf734cb45.png
https://cdn.masto.host/frontendsocial/media_attachments/files/112/892/433/367/491/979/original/3aa65c53b83758f5.png

2024-08-02 12:29:10

- reply

In general, don’t assume people will look up docs if something is confusing, especially if not linked.
E.g. another example. I have no idea what to do here and the UI does not point me anywhere to help me figure it out. "Add new collection" just brings up the dialog in Pic 2 to add a JSON file, but I still have no clue what a collection *is*, what it does, what it will be used for, what JSON file I should be looking for!
https://cdn.masto.host/frontendsocial/media_attachments/files/112/892/423/875/153/838/original/5f87090979c58a20.png
https://cdn.masto.host/frontendsocial/media_attachments/files/112/892/426/764/138/274/original/fef5efdb1f9b4ccf.png

2024-08-02 12:10:35

- reply

There is no link to the authentication docs from the note in that dialog.

2024-08-02 11:20:39

- reply

I know how to get the access token, just not how to enter it in @npub1nx8…kl34
@npub1h3w…n8wc also suggested using it instead of the password and it worked, I would've never thought!

2024-08-02 11:01:09

@npub1dau…34ue Hey, thanks for building @npub1nx8…kl34! I was trying to give it a try today and …I’m kinda stuck in step 1.
HOW to set up an access token? The only fields there are username and password!
https://cdn.masto.host/frontendsocial/media_attachments/files/112/892/068/836/586/071/original/53e135ae82510533.png

2024-08-01 13:54:03

I’m using @npub1f8f…ed9x and maintaining content in Markdown files on GitHub.
I want to collaborate on said MD files, with the option of a split view (MD on one side, rendered page on another) with my *own* config.
It seems like a basic use case, yet one no tool can accommodate!
Collaborative MD editors all interpret a hardcoded flavor of MD, no plugins. Can't remember when I last used Markdown *without* plugins!
And headless CMSes revolve around connecting JSON data to templates, not editing MD.

2024-07-31 12:58:55

Currently, Disqus is failing on any website that uses any of the many CSS color formats that shipped in the last decade. Yup, not being able to parse a color means *their entire widget* does not get included, and comments are not shown.
You cannot anticipate everything. This is why it’s important to design systems that are resilient and fault tolerant. Expect the unexpected, and handle it gracefully.
https://cdn.masto.host/frontendsocial/media_attachments/files/112/881/194/821/719/324/original/42cd3f6262f73da8.png
https://cdn.masto.host/frontendsocial/media_attachments/files/112/881/197/336/498/941/original/5c0d76df83a13fb0.png

2024-07-29 12:44:41

Whenever I feel bad about yak shaving, I’m reminded of Donald Knuth.
Apparently, he was writing his masterwork “The Art of Computer Programming” and decided to take a few weeks to write a better typesetter.
Thus, TeX was born.
10 years later he returned to continue the writing of the actual book…

2024-06-19 17:38:19

People do not realize what this Chrome OS announcement means.
Google took a bet on the Web with Chrome OS. They invested in the web platform, and kept trying to make it powerful. Mark my words, the fact that they gave up is Very Bad News™ for the Web.
Fingers crossed I’m wrong. 🤞🏼
https://blog.chromium.org/2024/06/building-faster-smarter-chromebook.html

2024-06-18 17:00:14

My if() tweet¹ got a ton of enthusiasm, but also a lot of questions and some misconceptions.
I posted some background and an FAQ: https://lea.verou.me/blog/2024/css-conditionals/
¹ https://front-end.social/@leaverou/112608705600433866

2024-06-13 09:54:45

A historical day for CSS 😀🎉
If you write any components used and/or styled by others, you know how huge this is!
background: if(style(--variant: success), var(--green));
Even if you don’t, this will allow things like:
padding: if(var(--2xl), 1em, var(--xl) or var(--m), .5em);
GitHub issue: https://github.com/w3c/csswg-drafts/issues/10064
https://cdn.masto.host/frontendsocial/media_attachments/files/112/608/704/376/881/367/original/3696ce656a987f47.png

2024-05-30 16:53:05

- reply

I know, haha https://front-end.social/@leaverou/112163734871744548

2024-05-30 15:36:23

Which companies are doing cool things in the design systems / web components space?
Edited to clarify:
- I mean companies whose main product is in this area, not companies who just have a nice design system.
- Asking about smaller companies / startups I may not have heard of, not Big Tech

2024-05-27 21:46:09

Doing some research on design systems / design tokens, especially around color.
What are some good open source color palettes?
So far I have: Open color, Open props, Tailwind, Material, Adobe Spectrum, GitHub Primer, Ant Design, IBM Design Language, Radix UI, Bootstrap.
Req: Need to have a page that lists all their colors (see examples).
Looking at color palettes primarily for UIs, not those designed exclusively for dataviz.
https://cdn.masto.host/frontendsocial/media_attachments/files/112/515/235/047/631/092/original/ae0d751727b6e176.png
https://cdn.masto.host/frontendsocial/media_attachments/files/112/515/235/895/805/044/original/157ad73cd2e3b7a9.png
https://cdn.masto.host/frontendsocial/media_attachments/files/112/515/239/747/176/464/original/8b8f0ac940014a1a.png

2024-05-21 17:08:20

Emulate #CSS math functions that are not baseline yet with CSS math functions that are:
1. abs(var(--x)) =
max(var(--x), -1 * var(--x))
2. sign(var(--x)) =
clamp(-1, var(--x) * infinity, 1)
(caveat: will return NaN instead of 0 for 0)

2024-05-18 16:01:20

- reply

Even if most web devs won’t directly write SVG markup, SVG is at the core of so many of our interactions on the Web. Logos, charts, icons, illustrations, it’s literally everywhere.
Ironically, browser efforts to kill it prove how crucial it is to web developers: at this point, it has been 15+ years that browsers have refused to improve SVG implementations, and SVG is used more widely than ever. What other Web technology could survive such neglect?

2024-05-18 15:57:51

- reply

[2/2]
Case that prompted this post, Custom SVG elements. 7y of pressure, a cornucopia of use cases, yet “no implementer interest”: https://github.com/WICG/webcomponents/issues/634
Can someone shed some light on why browsers are so desperate to kill SVG?
Because at this point, I refuse to believe this is just a rational business decision based on hard facts. The hard facts are shouting “Fix your damn implementations!” and browsers are going "la-la-la" 🙉🙉🙉

2024-05-18 15:57:31

We’ve always told devs that browsers prioritize what to implement based on dev demand.
There is one exception: #SVG.
SVG is used on >65% of websites. Yet, browsers have been *refusing* to work on SVG, ignoring pressure and pain points from web devs.
#StateOfHTML showed SVG as the top content pain point: https://2023.stateofhtml.com/en-US/features/content/#content_pain_points
Tons of work (SVG 2, fill & stroke, and more) has sat unimplemented for years. At this point, in standards circles, we know not to touch SVG with a barge pole.
[1/2]

2024-05-16 16:49:08

🔥 New blog post!
“On compliance vs readability: Generating text colors with CSS”
https://lea.verou.me/blog/2024/contrast-color/
This has been in the making for over a month! 😮‍💨
It includes:
🔥 New #CSS Technique: How can we use widely supported CSS features to automatically pick a text color that is readable over an arbitrary background?
🔥 Original research: What lightness ranges correspond to what color contrast compliance & readability buckets? How are these affected by additional constraints (gamut, chroma, hue)?