Mastodon

currently wondering how many client-rendered SPA implementations are just hiding slow servers

https://vulpine.club/@eevee/110019362386656521

and now I’m wondering about the future relationship between SPA and slower-than-static request-time frameworks

anyway, happy tuesday

free bad idea: type safe DOM

check yourself before you DOMRect yourself™

the toots archive is alive!! 🫀🫀🫀 https://www.zachleat.com/toots/

RT @tailwindcss@twitter.com HTML is better than JavaScript

when my dog gets eye boogies and I know she doesn’t have the anatomical equipment required to even have a chance at removing them—imma get those out immediately every time. I’ll chase her around the house, I’m getting those boogies out

A build step is great for front-end developers because it’s forgiving to code outside the specialty of front-end.

We can write slow and inefficient back-end code 😅 and pair it with what we’re good at: high quality, efficient, high-performance front end code.

@eleventy Don’t get me wrong, I’m all in on Mastodon and this is my home base moving forward—but I really pushed hard to set an example and cut-off Twitter 100% across-the-board.

I’m learning that this was not entirely tenable for a Brand Account—especially when folks with large follower counts weren’t willing to do the same.

I think @eleventy is going to have to return to at least broadcast content to Twitter, unfortunately. Given that a large portion of JavaScript folks have really dug in over there—it is doing harm to the project to not exist in those spaces.

Having some real feelings about it—mostly disappointment that folks didn’t make a bigger push to get off of the site.

When folks say: “Browsers are pretty fast. Hardware is pretty fast” 🚩🚩🚩 they really mean “My browser is pretty fast. My hardware is pretty fast.”

the side-eye has gone so far it has completed a full 360° revolution

mastodon question: why do I get follow requests on a public account?

is it just my brain that has been holeheartedly ruined or do other folks see it too

happy sunday

Pushed a bad commit to the site at the end of the day… did I fix it? No, I rolled back, locked deploys, and now I’m leaving byeeeeee

Stable releases of both `@11ty/webc` and `@11ty/is-land` now include support for the new `shadowrootmode` Declarative Shadow DOM attribute 🏆

Here’s a sneak peek at the magic coming to WebC:

https://github.com/11ty/webc/issues/122

Easily bundle up all of the CSS and JS for *any* element and *all* of its child content with a single `webc:bucket` attribute, with smart hoisting to the next bucket when needed.

a watched github action never boils

Hey—I’m going to be on @jsparty in about 15 minutes!

@nicknisi remember per our contractual agreements that you are not allowed to ask me about vim or TypeScript

https://changelog.social/@jsparty/109954793862974128

I’m guessing the standards folks would rather we use `shadowrootmode` only moving forward, as using the old name defeats the purpose of renaming the attribute? 😅

Current Declarative Shadow DOM browser support:

Chrome 90, Edge 90, Samsung Internet 15

`<template shadowroot="open">`

Chrome 111, Safari Technology Preview 162

`<template shadowrootmode="open">`

It’s tempting to use both `<template shadowroot="open" shadowrootmode="open">` for the broadest browser support, hmm.

https://caniuse.com/mdn-html_elements_template_shadowrootmode

Working on some really exciting WebC/<is-land> bundling magic today

speak softly and put down the big stick—it’s heavy and you’ve been carrying it for so long

I simultaneously like that this exists and would also like to preemptively apologize for this existing https://www.bryanbraun.com/checkboxland/

(via @bholmesdev)

A few updates to the JavaScript Site Generator Review, February 2023 edition:

1. Added @enhance_dev
2. Updated Nuxt telemetry collection info with a bit more nuance: https://www.zachleat.com/web/site-generator-review/#telemetry

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

The ebb and flow of JavaScript bundlers

A casual reminder that open sourcing things (even small things) is awesome, `flex-luthor` v4 now has connected separators thanks to @chriskirknielsen!

https://github.com/zachleat/flex-luthor

no—*you* are just getting around to blogging things from 3 years ago, not me

Flex Luthor, a Little CSS Flexbox Layout Helper
https://www.zachleat.com/web/flex-luthor/

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

cryptobros are fiat earthers

on this day, may we all have the unbridled confidence of a react framework author spinning almost 10 years of measured and data-backed criticism into an “I was never wrong” revolutionary new architecture for the web

what are the odds that in the **same week** the creator of next.js would downplay SPA and my uncle would admit that there is a curvature to the earth

this is relatable content

For everyone that uses GitHub Actions to run automated tests on a library that uses the `sharp` image processing module WITH the `ava` JS test runner in Node…

For *all* of those people that are doing that exact combination of things—make sure you run ava with `--no-worker-threads` or it will fail with a non-descriptive exitCode error message without any more information.

apps are not allowed to have content, you see