10 years of web performance debate:

“Your site is only faster because it does less”
“Yep”
“It’s not fair to compare them”
“Why?”
“It does fewer things”
“Yeah—to make it faster”
“That’s not fair”
“Why?”
“I want mine to do more”
“Okay—but it will be slower”

today in console error messages:

“You may find that it works just fine, or you may not.”

I need to issue a correction for an earlier (deleted) toot about Next.js’ <Image> and WebP support.

The default `formats` value is `image/webp` https://nextjs.org/docs/pages/api-reference/components/image#formats

And using the Accept header to fallback to the original format: https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values#values_for_an_image

With that reading it suggests that a JPEG or PNG source would work fine on Safari (prior to Mac OS Big Sur)—though I doubt a newer format input would work there but that’s a much smaller problem.

Appreciate the pushback @flq!

Found myself nodding along to quite a few points in this one from @quii: https://quii.dev/HTMX_is_the_Future

(via @nhoizey)

keep building for the web

how do I defragment my friends currently spread across 3+ social medias

The raw unadulterated cringe of “Make the web great again” 🫠

Reading a new retrospective on Google’s AMP project from @davidpierce: https://www.theverge.com/23711172/google-amp-accelerated-mobile-pages-search-publishers-lawsuit

One small missing piece of history: the 700+ folks that signed http://ampletter.org/ starting back in 2017.

an LLM MLM

@mhartington hey Mike I was just reviewing some Stencil docs for a web components talk and stumbled across this reference, which might need an update!

https://stenciljs.com/docs/static-site-generation

Related: https://github.com/ionic-team/stencil-site/pull/902

if you can destroy the value of a thing by explaining how it works, it wasn’t very valuable to begin with

@Kilian I’m also curious why if ::selection isn’t supported on Safari iOS why the invalid pseudo element is forgiving in a comma separated selector: https://caniuse.com/css-selection https://codepen.io/zachleat/pen/BaqmJaV/92625f3aa238cfc8dd750f3d2cdfcc46

If you want your CSS custom properties to be available in `::backdrop` or `::selection`, note that they do not inherit!

Use `:root, ::backdrop, ::selection {}` to declare custom property values, suggests @Kilian:
https://kilianvalkhof.com/2023/css-html/root-isnt-global/

remembering the facebook cryptocurrency today

I feel like the reported <img> aspect ratios in this Chrome DevTools tooltip could be… improved 😅

I wonder if https://caniuse.com/ is planning to remove browsers that haven’t had a release in 10 years (e.g. Internet Explorer)

(cc @Fyrd)

if I let my five year old ghost write for this account would the number of poop jokes increase or decrease

alright so beds come in a bunch of sizes: twin, queen, king, and california king—all I’m saying is that there needs to be a short king size too

any pressing questions about web components that you’d like to see answered?

working on a cowboy themed web components talk

full stack developers have taken front-end web development hostage

@jenn Hello hi yes I am really sorry to cold DM you but I am kinda shopping around and wondering if y’all have anything that might be a good fit? Seems like Fastly has been pretty good to Glitch so far!

@paul Hey Paul, I just wanted to drop you a quick note to say that if you currently had any Zach-sized opportunities open in your sphere that I would love to discuss those with you! Appreciate it!

Taking a break from social media for awhile.

Take care of yourselves ❤️

I should write a blog post

(disclosure: I am firmly pro-build)

Folks that want to “abolish” build tools are (in my experience) arguing and demanding more from the platform (which I agree with 100%) to go further *without* a build—something that @rich_harris has argued in favor of in the web components discussion. This section of the video felt like a mischaracterization to me.

Oh wow, linking npm packages with specific GitHub source versions—an exciting update 🏆

https://github.blog/2023-04-19-introducing-npm-package-provenance/

@rich_harris surprisingly (to me) this slide is the one that made me cringe the most 🫠

I feel like it’d be fun to stream me watching @rich_harris’ latest talk 😎 https://www.youtube.com/watch?v=uXCipjbcQfM

I appreciate Rich’s insight and I think we usually agree ~90%, though that last 10% is where the spice hits 🌶🥵

“Wreak havoc as an irresistible bloatable possum”

“Join forces with a playful friend and increase the chaos in the local co-op”

“Embrace the chaos by screaming when you get chased or giggling when you get away with it”

“Risk it all for one final crumb of food”

now re-read these as taglines for an open source project

do you ever get the feeling that a game was made specifically for you, personally

https://www.pizzapossum.com/

(via @thomasorus)

cheers to the sneaky folks that already found and starred the repo I haven’t shared yet 😅

“React: Too big to fail”

I should write a blog post

If jQuery in the early 2010s had the same paid advocacy that React currently has, we’d likely still be using jQuery for everything.

It’s time for the next era of front end—bring on Svelte, Solid, Marko, Lit, et al.

you should write a blog post

Missing my friends at @btconf today but somehow I’m still feeling as though I’m there 🤔🥰

sometimes I wonder how much money has been spent on the development of react—I wouldn’t be surprised if facebook has spent something in the ballpark of $20-30 million at this point

is that too high? too low? curious what y’all think

tfw react finally ships support for custom elements

https://mastodon.social/@wonderofscience/110213818915651018

achievement unlocked: assembled ikea furniture with a five year old… helper

I’m reading this excellent theme switcher blog post from @mxbck
https://mxb.dev/blog/color-theme-switcher/

…and I wondered if there was an open standard or tooling to generate tokens in said format.

I know this community group exists for it! https://www.w3.org/community/design-tokens

What tools are y’all using to generate your design token source files?

being on linkedin feels like dumpster-diving in an enterprise roll-off garbage bin

Loving the unique layout of @lmorchard’s personal site: https://lmorchard.com/

Oooh the new enhance.dev web site looks great! Congrats @colepeters @brianleroux @kristoferjoseph and team!

https://indieweb.social/@brianleroux/110192492288049439

“it doesn’t scale to your current needs but it will definitely scale to your future needs”

“I would never have our content go anywhere that would risk our credibility.”—NPR CEO John Lansing commenting on NPR shuttering its 52 accounts on Twitter earlier today.

https://www.npr.org/2023/04/12/1169269161/npr-leaves-twitter-government-funded-media-label

sites vs the app directory

don’t mind me, just shopping around for a web framework

yay—it merged! https://github.com/mdn/browser-compat-data/pull/19334

spotted at LEGO Land today ❤️

objectively the best corporate or conference swag is crocs

even better if paired with themed socks

no I will not be taking questions at this time

New blog post:

3 Methods for Scoped Styles in Web Components That Work Everywhere

https://www.zachleat.com/web/styling-web-components/

okay AM radio is good for the morning but what do I listen to in the PM

Here’s an HTML-only check for Declarative Shadow DOM support that I used in a demo just now:

```
<div>
<p>Declarative Shadow DOM is <strong>⚠️ not supported</strong> in your browser.</p>
<template shadowrootmode="open">
<p>Declarative Shadow DOM <strong>✅ is supported</strong> in your browser.</p>
</template>
</div>
```

every day can be css naked day when you have a css toggle in your footer ok bye

https://www.zachleat.com/

it’s a good day when you submit a PR to browser-compat-data

https://github.com/mdn/browser-compat-data/pull/19334

“Evergreen” Does Not Mean Immediately Available

Great post by @eric

https://css-tricks.com/evergreen-does-not-mean-immediately-available/

the number of web sites should never be finite

The 5-year stability of Eleventy, in which I revert the eleventy-base-blog project from v8 to v1 to see if it will still run on Eleventy v2.0 😰😅

https://www.11ty.dev/blog/stability/

@Schepp I’m just seeing your “DMs” 😅

if you want to delete those and continue the conversation here that might be best!

Working on a WebC demo to show how to easily swap a web component between different rendering modes:

1. Server rendered plain HTML
2. Declarative Shadow DOM
3. JS-only (boo) Shadow DOM

Stay tuned!

it’s always jet lag and never jet 120fps

a developer and react—a play in one act

https://ohai.social/@MeanwhileinCanada/110141165339425499

no one tell the two javascript conferences I’m speaking at next month

Just got my travel sorted for JSNation in Amsterdam on June 1st—see y’all there!

https://jsnation.com/

> Why did you choose Preact to build the directives system? Why not React or another JavaScript framework?
> It’s HTML-friendly (unlike React).

—WordPress core commenting on their Interactivity API proposal.

https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/#why-preact

via @developit

call me when he’s outdicted

dangerouslyBundleIsomorphicJavaScript

are you trying to tell me that the griddy has nothing to do with css grid

I’m not saying that I don’t trust people that don’t have a personal web site—no, that would be silly, right?

so silly

eye appointments be like “let’s use these eye drops that make your vision bad to make sure your vision isn’t bad”

Looks like https://www.zachleat.com/web/single-page-applications/ popped off on the orange site, currently holding 113 well reasoned comments—featuring gems like:

💎 “React 16 is about 5 KB uncompressed”
💎 “228 kB of JavaScript? That's a moderately sized image”
💎 “His way to make a website available to any browser is to use an API that nothing but the latest Chrome supports?”
💎 “is SEO important in 2023? how much traffic is coming from Google that converts to paying customers or clients?”

@bholmesdev ah I tried joining again and you were there but not there? 😭

@bholmesdev not able to make it today?

If your name is @kateholterhoff and you’re conversing with certain Next.js framework authors on a twitter thread (that mentions me), this timeline might interest you:

April 2020: `unstable_runtimeJS` merged to Next
https://github.com/vercel/next.js/pull/11949

Sept 2021: “øJS is coming to Next 🔜”
https://twitter.com/rauchg/status/1437494013137805312

Lest history be revised, “øJS is coming soon” was not referencing the already released `unstable_runtimeJS` feature. So what was it referencing (on a thread about islands architecture)? 🫠

I’m looking forward to the JSHeroes event in May!

See you there?

https://jsheroes.io/