@leaverou@front-end.social
@leaverou@front-end.social avatar

leaverou

@leaverou@front-end.social

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!

This profile is from a federated server and may be incomplete. Browse more on the original instance.

leaverou, to random
@leaverou@front-end.social avatar

Less than a week ago, I predicted that @Firefox would implement Relative Colors (RCS) very soon.

I didn’t expect my prediction to come true that quickly: Firefox 128 (Nightly) shipped with RCS support! Pretty solid implementation too.

This means that Relative Colors will be Baseline 2024!

Testcase: https://dabblet.com/gist/58ec6a5493b95097a0c6a17b0cc9a840

Now if someone could update caniuse…

https://front-end.social/@leaverou/112451790361014358

leaverou, to random
@leaverou@front-end.social avatar

We’ve always told devs that browsers prioritize what to implement based on dev demand.

There is one exception: .

SVG is used on >65% of websites. Yet, browsers have been refusing to work on SVG, ignoring pressure and pain points from web devs.

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]

leaverou,
@leaverou@front-end.social avatar

[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" 🙉🙉🙉

leaverou,
@leaverou@front-end.social avatar

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?

leaverou,
@leaverou@front-end.social avatar

@raptor85 Yes. This is not a misunderstanding or lack of awareness. Browsers have communicated their lack of interest in improving or fixing their SVG implementations loud and clear, for years.

leaverou,
@leaverou@front-end.social avatar

@raptor85
Maybe search more thoroughly?

I can assure you that everyone in the web standards world has not hallucinated this over the last 15+ years.

Our communications with browsers are not limited to bugzilla issues. We’ve been repeatedly told this by actual people working in various UAs in meetings etc. It’s not a secret.

leaverou, to CSS
@leaverou@front-end.social avatar

🔥 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 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)?

leaverou,
@leaverou@front-end.social avatar

@SergKoren @mpospese I think your AI-involvement detector needs calibration 🤣 Did you even read the post?

leaverou,
@leaverou@front-end.social avatar

@SergKoren @mpospese You have quite the inflated ego if you think I’ll expend MY time to prove YOU wrong. Feel free to believe whatever you want, lol.

leaverou, to random
@leaverou@front-end.social avatar

The #StateOfHTML 2023 results are finally out!

Enjoy insights from 22K responses about the state of the web platform, from HTML and interactivity to #webcomponents, PWAs, and a lot more.

This project is a monumental effort from people across the world. We even designed novel data collection UIs to gather the data we needed while minimizing friction, which I plan to write a case study about soon.

https://2023.stateofhtml.com/en-US

sarajw, to random
@sarajw@front-end.social avatar

State of HTML results are out!

https://2023.stateofhtml.com

(I really wish they'd pick a more international T-shirt store than Cotton Bureau though - can we have something more local to not-USA, @sachagreif? The shipping costs are more than half the shirt!)

leaverou,
@leaverou@front-end.social avatar

@sarajw @sachagreif I proposed crowdsourcing the analysis which could help with that; we didn’t have the time to do that in this iteration, but it could be an option for the future.

leaverou, to random
@leaverou@front-end.social avatar

In order to explain to my daughter that all colors together make white, I tried to use CSS to recreate the usual hue wheel top. Not with great results: it sort of becomes white, but flashes a lot. I suspect I’m hitting a hardware limit at high fps.

https://codepen.io/leaverou/pen/XWQzxoz

leaverou, to random
@leaverou@front-end.social avatar

The advice I give most frequently to junior devs is to resist the urge to jump straight into implementation. Use the API first. Write out a few code snippets that use the API for common use cases. How does it feel? Can the user express their intent without friction and boilerplate?

It seems obvious, but it's striking how many times it's not followed, even by devs that have heard this many times before.

API design is just UI design with different constraints; putting user needs first pays off.

leaverou,
@leaverou@front-end.social avatar

And today I had a realization: The primary benefit of TDD is not that it produces better implementations, but that it produces better APIs. It forces engineers to do just that, since they have to use the APIs they are designing to write tests.

It's not the same as thinking about use cases directly, since unit tests are more contrived. But it's certainly better than plunging into implementation.

leaverou,
@leaverou@front-end.social avatar

@tomw How is that taking it further? Isn't that exactly what I'm saying?

leaverou, to random
@leaverou@front-end.social avatar

I just backed Web Awesome on @Kickstarter https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=thanks-tweet
Such an interesting project! So much potential in this space.

leaverou, to random
@leaverou@front-end.social avatar

I started collecting my web standards contributions since 2011 on a page, with detailed timelines from proposal to spec to shipping in browsers etc.

https://lea.verou.me/standards/

Q: What to call it (2 words max) that would be understood by the widest possible audience on e.g. a navigation menu or heading?

(my brainstorming in next toot)

leaverou,
@leaverou@front-end.social avatar
  1. "Web Standards"? Non-web folks think standards = rubber stamping proprietary tech, they have no idea that on the Web that’s where the actual design happens.
  2. "Web technologies" too cryptic
  3. "Web Design"/"Web development": Funny for whoever gets it, but misleading for the majority who won’t.
  4. "Proposals"? Sounds like they didn’t really go anywhere.
  5. "Web Platform work"? Too long + many don't know what the web platform is.
  6. "API design"? Sounds like JS libraries.
  7. ???
leaverou, to random
@leaverou@front-end.social avatar

When doing case-insensitive matching of a needle (string) against a haystack (potentially large array of strings), which is faster:

  1. toLowerCase() (once on needle, then per each item in the haystack)
  2. Create regex with i flag, use regex.test()

I would guess 1, but haven't checked. Does anyone know of any benchmark?

leaverou, to random
@leaverou@front-end.social avatar

If you are working on two npm packages, on of which depends on the other (say B depends on A), what is your process for making changes to A and trying them out on B without npm publish?

So far the best I’ve found is changing the package specifier to point to the local repo + npm install but there must be something faster and less error-prone? (so many times I forgot to change it back and committed the package.json with the local specifier!)

leaverou,
@leaverou@front-end.social avatar

Basically I want to tell npm "if I'm running this locally, load package specifier A from this local folder instead" without any intervention on my part.

leaverou,
@leaverou@front-end.social avatar

@pixelambacht @kieranmcguire @paulrosen @boldewyn @westbrook WRT npm link, how would it work together with the published version in the deps? Won't they conflict?

leaverou,
@leaverou@front-end.social avatar

@westbrook @kieranmcguire Ooh that's very interesting. What's the catch? @tbroyer said they'd prefer to change package.json, what's the issue with npm link?

leaverou, to random
@leaverou@front-end.social avatar

This person is my spirit animal
https://mas.to/@SmudgeTheInsultCat/112086058173372650

iamdtms, to Blog
@iamdtms@mas.to avatar

The entire self-hosted idea crashes both places for me:

  1. Being the operator of an own system. No. I'm a user of it.
  2. It would be easier to post on a mobile app than on the mobile web.
    cc: @leaverou
leaverou,
@leaverou@front-end.social avatar

@iamdtms @leaverou may I please have …a crumb of context? 🤔

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • JUstTest
  • rosin
  • thenastyranch
  • ethstaker
  • DreamBathrooms
  • osvaldo12
  • magazineikmin
  • tacticalgear
  • Youngstown
  • everett
  • mdbf
  • slotface
  • ngwrru68w68
  • kavyap
  • provamag3
  • Durango
  • InstantRegret
  • GTA5RPClips
  • tester
  • cubers
  • cisconetworking
  • normalnudes
  • khanakhh
  • modclub
  • anitta
  • Leos
  • megavids
  • lostlight
  • All magazines
    •