Mastodon

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/

Them: ____ is in early PRIVATE BETA and NOT RECOMMENDED for production use.

Me: I just put up a new alpha on the canary channel and I’m using it in production on 13 sites

Defaulting on Single Page Applications (SPA)

https://www.zachleat.com/web/single-page-applications/

the faux meritocracy of pencils: why #2 is number 1

oh no it’s quite a few github domains: https://github.com/orgs/community/discussions/50966

oops the certificate expired for https://avatars.githubusercontent.com/ 🫠

(github avatar outage)

no I’m not sorry

LL Cool M

7. *react stays in the chat* we hear you, it’s too much javascript. but what if we put SVG in javascript too—would that help?

6. *react enters the chat* we hear you, it’s too much javascript. but what if we put our css in there too—would that help?

1. add library javascript
2. add app javascript
3. …oh no, this is too much javascript
4. let’s add more javascript for client-side navigation so that we don’t have to re-run the other javascript
5. …oh no

a little shout out to that “IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!” copy though

a new mantra dropped

If you’re having trouble pushing to GitHub today, perhaps seeing scary new errors on your console like this:

> WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!
> IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY!

Don’t freak out, just read this:
https://github.blog/2023-03-23-we-updated-our-rsa-ssh-host-key/

seeing folks jokingly use the term “woke” and I think we can file those right next to the “make ___ great again” jokes

we can do better!

mapquest was the original 90s-style navigation

https://twitter.com/timneutkens/status/1638087513007898625

Now that yesterday’s dust has settled—we recognize that create-next-app does in fact default to TypeScript and Tailwind, right?

https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides to override a outdated shrinkwrapped dependency was clutch today.

Trying to use `lodash-cli` with the latest version of `lodash` and this `package.json` addition did the trick:

@j98 @andy well wait where did @Amy_Hupe go

today is a good day to get excited about web sites

The new https://set.studio/ site launched with excellent work from @Amy_Hupe@social.design.systems Leanne @j98 and @andy!

I am really loving those live responsive previews of portfolio sites right on the home page (and the beautiful little resizer too) 😍

(via https://bell.bz/@andy/110066624439275736)

this subtoot brought to you by the developer currently attempting to convince the world that a pre-selected “Yes” value in a command line prompt is not a default choice.

The more time I spend in tech the more evidence mounts that misunderstanding consent is the root cause of so many issues.

Which is faster?

1. Total Blocking Time of one visit to nextjs.org
2. The time it takes to Eleventy to build ×1000 pages added to the Total Blocking Time of one visit to 11ty.dev

the toilet paper industry will sell you a hyper-localized drone delivery solution to ensure that you will never run out of toilet paper during business time when all you really needed was a bidet

in this essay about the JavaScript industrial complex I will…

When JavaScript Fails:

“We’re not talking about 3% of users being affected, but 3% of visits. Remember, the problem isn’t that people have turned JavaScript off, it’s that JavaScript isn’t reliable. Meaning it affects all of us, about 3% of the time.”

https://scribe.rip/@jason.godesky/when-javascript-fails-52eef47e90db

by Jason Godesky (https://jason.godesky.net/) via @slightlyoff

✅ Use the latest version of an ESM dependency: fine.
✅ Use the latest version of a CJS dependency: also fine.
❌ Pinning to a previous CJS major release that worked without issues after they bumped a major release for nothing other than ESM: ew, what? no—gross

Interesting that at some point @eleventy was removed from https://vercel.com/templates despite being more popular than some of the frameworks listed there 🤔

in my personal experience every relationship (that I’m personally a part of) has one person with 13 tabs open in their browser and one with 217 tabs open

how dare you all

Don’t vote for which one you’ve been conditioned to use, vote for which one is objectively best:

(choices pruned from https://en.wikipedia.org/wiki/Pajamas)

Suspense (sə-spĕns′)

> Anxiety or apprehension resulting from an uncertain, undecided, or mysterious situation.
> The state or quality of being undecided, uncertain, or indecisive.

…in hindsight maybe not the best branding choice.

Uploaded my slides from the @eleventy meetup talk from this morning: https://www.zachleat.com/web/eleventy-meetup-eleventy-v2/

Watch for the video on the Eleventy Meetup YouTube channel! https://www.youtube.com/@THEEleventyMeetup

The @eleventy Meetup is happening now!

https://11tymeetup.dev/

Found another one from 2017 for the React criticism timeline https://twitter.com/NetflixUIE/status/923374215041912833

https://www.zachleat.com/web/react-criticism/

Here it is!

https://fosstodon.org/@eleventy/110029514364983609

Today I learned: Node’s `vm.createContext` function is quite slow!

https://nodejs.org/api/vm.html#vmcreatecontextcontextobject-options

Some big (dare I say huge) WebC performance wins incoming 🏆

now you wait just one second—are you really attempting to convince me that I can’t do everything and be everything to everyone

rude

if you add enough JavaScript, it will modulus your site back to fast again—we just haven’t found the threshold yet—stay the course everyone, keep adding more!

@swithinbank added sparklines to speedlify.dev and they look incredible! 😍

https://www.speedlify.dev/ssg/

It strikes me that it might be useful to have a comprehensive web performance analysis tool with similar flame graph output that reports a holistic view of the performance of a web site (showing how every asset on the site influences the performance, not just JavaScript execution).

Does this exist?

Using `0x` to do some flame graph build performance analysis of an Eleventy project, super useful!

https://github.com/davidmarkclements/0x

You can use it on your Eleventy project too:

0x node_modules/@11ty/eleventy/cmd.js --quiet