Had a few minutes so I forked and updated one of my favorite (but never published) Filament Group classics:

`flex-luthor` is a flexbox helper to configure layouts using a few CSS custom properties.

Source: https://github.com/zachleat/flex-luthor
Demo: https://flex-luthor.zachleat.dev/

This utility predated Flexbox `gap` but this new version uses it internally. Automatic horizontal/vertical border separators are probably its coolest feature!

Experimenting with an `esbuild` style animated ASCII benchmark chart on the @eleventy home page 👀

(inspired by https://esbuild.github.io/)

I should probably cross-post to the blog post that resulted from the above thread!

https://fediverse.zachleat.com/@zachleat/109921346256931088

(it has evolved to its final form: the blog post)

The JavaScript Site Generator Review, 2023

https://www.zachleat.com/web/site-generator-review/

Comparing Site Generator install times, node_modules weight, client JavaScript footprint, npm audits and Telemetry.

This concludes the Site Generator Review—happy to receive feedback or recommendations on aspects of these tools you’d like to see reviewed for next time!

Telemetry (anonymous data collection on usage) enabled by default (requires opt-out):

Astro
Next.js
Gatsby
Nuxt

No known Telemetry or data collection:

Eleventy
Remix
SvelteKit

Hides `npm audit` reports during installation:

Astro
Gatsby
Next (via vendoring)

Shows `npm audit` reports during installation:

Eleventy
Nuxt
Remix
SvelteKit

`npm install` time (in seconds)

(forcing a clean cache, average of 5 runs)

Notably, next.js seems to bypass `npm` by vendoring its dependencies (speedier install, without those pesky npm audits)

node_modules Weight (in MB)

Client JavaScript Baselines

It’s time again for every framework author’s favorite: The JavaScript Site Generator Review (Feb 2023 edition).

Site generators and versions (in alphabetical order):

Astro 2.0.15
Eleventy 2.0.0
Gatsby 5.7.0
Next.js 13.2.1
Nuxt 3.2.2
Remix 1.13.0
SvelteKit 1.8.3

(…uh, this is a thread 🧵⬇️)

you say jump, I say how many high severity vulnerabilities

Frameworks that offer CLI tools that generously offer to help `npm install` your dependencies for you…

(and also hide npm’s security audit reports 🫠)

moving forward all twitter dev drama will now be canonically referred to as (in the style of the daytime television soap opera) “your stories”

don’t forget to log on to the hell site and catch up on your stories

the above is the user experience, here’s what the developer experience looks like:

“the web is an application platform now so you should use my application framework for your web site”

alert alert this is not a drill—@hdv is on the market!

https://front-end.social/@hdv/109909010647090931

the temptation to push at least two releases of every module to npm so it doesn’t say “1 Versions” on the package page 😅

it lives https://fosstodon.org/@eleventy/109904522806324175

jesse eisenberg was pretty decent in the react documentary

(cc @nhoizey)

noodling around with a mastodon version of tweetback: https://www.zachleat.com/toots/

I’m guessing some other folks might be interested in this to self-host your content and make it searchable?

just got done explaining to my son that traffic lights are technically robots and now I’m deep in the philosophical rabbit hole of when it’s okay for robots to orchestrate our choices

I am fun at parties

My kids carried out the Midwest (USA) rite of passage of going sledding on the same day they had swim lessons.

this just in—effective 30 days from today twitter will disallow the use of vowels in tweets for freeloading non-twitter blue subscribers

well—sure, why not?

what’s the name for the SPA phenomenon where it has an outdated data model on the client so even when you do a faux-navigation it shows you old, stale data and you have to force a full page refresh anyway to see the latest data

that thing where it goes fast, but it’s wrong

what’s the name for that

https://sparq.stanford.edu/solutions/opt-out-policies-increase-organ-donation

> “In… opt-out countries, more than 90% of people register to donate their organs”

> “In… opt-in countries, fewer than 15% of people register.”

Thinking today about what harmful defaults our industry encourages, too.

Here’s the context from @jerryD (thank you!)

https://techhub.social/@jerryD/109876616115187403

Wait—why does Safari use a `shadowrootmode` attribute when all the other docs on Declarative Shadow DOM use `shadowroot`?

https://webkit.org/blog/13851/declarative-shadow-dom/

(I remember retweeting something about this but I’m having trouble finding it)

@brad_frost @bkardell (I deleted my reply)

@brad_frost @bkardell well, shit—sorry I blew up your thread, y’all.

thankful to everyone that went full mastodon and didn’t look back—y’all are the real ones

Which is more true?

@matuzo what’s the core-js author drama? I saw a few Ukraine/Russia issues on their GitHub—wonder if there was more

…and of course a huge thank you to Peter deHaan for their work on the Eleventy issue tracker!

https://oss.love/card/Ylu7cIaun

This one is for @lovell 😍 for their work on `sharp`

https://oss.love/card/JKwMnqhe3

(with thanks to @RyunoKi and @charlie for discussion about this!)

If you use `core-js` in your personal projects or you use `core-js` in projects at work, they need your support:

https://github.com/zloirock/core-js/blob/master/docs/2023-02-14-so-whats-next.md

Notably, the author here has done a lot elevate the discourse around Open Source Sustainability—and it was pretty harsh how their original attempts were received by the community. Some good lessons here, and it shows how much further we still have to go.

Rethinking the Modern Web—by Oxford Harrison

https://dev.to/oxharris/rethinking-the-modern-web-5cn1

Featuring this gem:

[HTML, CSS, JS] ➡️ Build Step ➡️ [JS, JS, JS](e.g. Svelte, Vue)
[JS, JS, JS] ➡️ Build Step ➡️ [JS, JS, JS] (e.g. React)

Over the weekend I published a PageSpeed Insights variant of the `performance-leaderboard` module:

https://github.com/zachleat/performance-leaderboard-pagespeed-insights/

Useful when you want to run Lighthouse tests and rankings against a large number of web sites *in the cloud* on Google servers (though anecdotally the results are a bit less consistent).

I switched to use this method to Lighthouse test the Eleventy Starter projects: https://www.11ty.dev/docs/starter/

@stubbornella Test test @hi_mayank can you see this? My theory is that the super dangerous difference is that mentions pull folks into DM conversations, which is not how Twitter worked

Which job posting is better?

A: “It's more important that you have a solid foundation as a web developer than knowing about every framework”

B: “React—we use React—you should know React”

Just something to think about as “using React makes it easy to hire React developers” is somehow still taking up space in the dialogue.

this abstraction is leakier than a cheap diaper blowout

Puppeteer v19 moved its Chromium download, which caused me a few problems with `speedlify`. I wrote up a quick tip to hopefully help you if you run into the same thing:

https://www.zachleat.com/web/chromium-missing/

New package release:

`performance-leaderboard` v10 using the brand new lighthouse v10!

https://github.com/zachleat/performance-leaderboard

(I think y’all know what’s coming next)

Eleventy v2.0 is on Product Hunt today—appreciate y’alls support!

https://www.producthunt.com/posts/eleventy-v2-0-0

Taking a deep breath after shipping Eleventy v2.0.0 yesterday.

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

(just kidding—it’s time to iterate the docs!)

Feels like a good day to re-up on this 2018 blog post:

Don’t Stop Learning Frameworks

https://www.zachleat.com/web/dont-stop-learning/

the absolute delight of a scorching (42°F / 5°C) outdoor picnic in February

Alright, I pushed a fairly sizeable addendum to this post with a bunch more links.

Thank you to @nachtfunke @krinkle @whalecoiner @hi_mayank @thomasapowell @frehner and the others who sent me things over DMs and will remain anonymous!

The nice thing about the React community grinding it out until the heat death of the Twitter universe is that it’s much easier to speak freely over here 😇

@whalecoiner hey! Someone sent along your *incredible* 2019 post on React for my React criticisms history blog post, but it’s not online any more. I wanted to ask if it was okay with you if I link to it on archive.org? I would also say that I want you to feel 100% comfortable saying no!

https://web.archive.org/web/20191202190319/https://www.sonniesedge.net/posts/react/

Wow, I… uh, well, there are quite a few more submissions from folks that need to be added to this post—I’ll try to get to them in a bit.

A lot more than I remembered, for sure.

With Twitter retiring the free version of their API on February 9, I’m also going through my own open source packages to retire/archive/deprecate things that would be affected:

`twitter-avatar-url`, you were fun while it lasted.

https://github.com/zachleat/twitter-avatar-url
https://www.npmjs.com/package/twitter-avatar-url

I have wanted a nugget ice maker for years and my partner got me one for my birthday and I am still so unreasonably happy about it, days later 🧊🧊🧊

A Historical Reference of React Criticism

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

There have been a number of criticisms levied at the React project over the years, some of them handled and some of them still wavering in the wind. In this post, I’ll summarize the ones that are most prominent in my memory as a way of maintaining a record (primarily for my own use but maybe you’ll find it useful too).

https://infrequently.org/2023/02/the-market-for-lemons/ from @slightlyoff is an excellent and highly relevant post here

If we moved on from React with even half of the enthusiasm level we used to move from CommonJS to ESM, the web (and the folks using the things we build) would be better off for it.

(thank you for the lovely birthday messages, y’all! 🙌🏻)

New major version of `zachleat` published: v40.0.0 🥳

https://www.npmjs.com/package/zachleat

ahahahaha

is anyone else accumulating a large number of piles of office clutter *just* outside the FoV of your desk webcam

yeah no me neither

Some big #Netlify news today: Netlify has acquired Gatsby

Here’s a bit of coverage on what this means from The New Stack: https://thenewstack.io/netlify-acquires-gatsby-its-struggling-jamstack-competitor/

And the press release: https://www.netlify.com/press/netlify-acquires-gatsby-inc-to-accelerate-adoption-of-composable-web-architectures/

(it has come to my attention that Mastodon web interface removes # anchors from the URL in the preview block 😭 so make sure you click the text link)

This comment on the future of create-react-app is a *doozy*, y’all. A reaction blog post might be warranted here 🧐

https://github.com/reactjs/reactjs.org/pull/5487#issuecomment-1409720741