Mastodon

It’s absolutely wild that for *years* the React community has made the claim that interactions on Single Page Applications are faster!

I’m reminded of these: https://www.zachleat.com/twitter/1259834737390161922

But Interaction to Next Paint is showing the opposite to be true. If anything, to me it suggests that Virtual DOM is trading slower page interactions for marginal improvements to page navigations.

tfw the sign-up form asks for your work email

I hope we are all prioritizing profitability today

fixed a bug and said aloud to absolutely no one: “we did it, joe”

…send help

I’ll start us off with this one from PlanetScale: https://planetscale.com/blog/planetscale-forever

(via @nmoo https://mas.to/@nmoo/112050444053820199)

apropos of nothing I’m collecting the worst layoff announcements—please post a reply with your nomination(s) below:

Going live with @mikeneu to talk about yesterday’s Jamstack panel, Web Components, the Core Web Vitalpocalypse with INP on this week’s Static Web Development Happy Hour:

https://www.twitch.tv/cloudcannoncms

(doesn’t have to be positive or negative, just an absolute value of mentions)

Based on pure feels, which web browser do you hear the most about on Mastodon?

Better late than never to archive `fontfaceonload`: https://github.com/zachleat/fontfaceonload

Use the CSS Font Loading API instead: https://caniuse.com/font-loading

Join us on another #TheFutureOfJamstack panel—live now!

With @5t3ph @philhawksworth @mikeneu @henrihelvetica and @remotesynth

https://www.twitch.tv/thefutureofjamstack

One human earth week (March 12) until INP becomes a Core Web Vital, with big implications to the JavaScript-heavy React-ecosystem.

Folks hiding bad lab data (Lighthouse scores) behind decent field data (Core Web Vitals) are right to be nervous about this! Remember that Core Web Vitals affect your SEO/rank on Google 👀

https://web.dev/blog/inp-cwv-march-12

A few samples:

1️⃣ nextjs.org: FID 19ms ✅ is now INP 363ms ⚠️
2️⃣ react.dev: FID 18ms ✅ is now INP 408ms ⚠️
3️⃣ vercel.com: FID 135ms ⚠️ is now INP 975ms ⛔

“A lesson I’ve learned from all of this is that coining a term for something is actually a bit like releasing a piece of open source software: putting it out into the world isn’t enough, you also need to maintain it.”— @simon

Thinking about this in relation to Jamstack. The term needs new maintainers. #TheFutureOfJamstack

https://simonwillison.net/2024/Mar/5/prompt-injection-jailbreaking/#coined-term-maintenance

Are you still using `X-UA-Compatible` in your HTML?

still surprised that the people that prefer not to write CSS want to put it in HTML instead of JavaScript

ooh it merged! https://github.com/paulirish/lite-youtube-embed/pull/164

Wordle 988 6/6 🫠

🟩🟩🟩⬛🟩
🟩🟩🟩⬛🟩
🟩🟩🟩⬛🟩
🟩🟩🟩⬛🟩
🟩🟩🟩⬛🟩
🟩🟩🟩🟩🟩

a secret user-agent (shared only on a whisper network) that means you’re cool and you get access to all the other cool people’s APIs without additional auth or rate limits

alright, which one of you jokers endorsed me for javascript on linkedin

Generative.
—@beep https://ethanmarcotte.com/wrote/generative/

A collection of quotes on automation and artificial intelligence.

I wrote up a bit more about this here: https://fediverse.zachleat.com/@zachleat/112009677115338756

“So, what exactly did Apple break in the EU?”—@tomayac

(spoiler: it’s a lot)

https://blog.tomayac.com/2024/02/so-what-exactly-did-apple-break-in-the-eu.md/#what-breaks

If you’re curious, the https://conf.11ty.dev/ web site is now officially open source (including the trending-on-Mastodon virtual tickets):

https://github.com/11ty/11ty-conf

#11ty #11tyConf

bringing the “I’m only here so I don’t get fined” energy to mastodon today

no comment

“It’s only in the EU” 😬 from folks that don’t live in the EU 😬😬😬

some toots are just for me

tune in on saturday mornings as ms. frizzle continues her career in the private sector on gartner’s the magic quadrant school bus

The table shows how much of the web is being broken with the release of iOS 17.4.

via https://infrequently.org/2024/02/home-screen-advantage/

(hat tip to @knowler https://sunny.garden/@knowler/111999357409515094)

A few streams back @mikeneu and I collab’d on a way to embed a YouTube video transcript right into a blog post for easy static search integration and I finally got a little demo of that going on my personal web site—you can see it in action here: https://www.zachleat.com/web/taylor-swift-fansite/#searchable-transcript

The transcript deep links to the video and the video updates the active caption from the video. (I kinda love it)

Hoping to get a more substantial blog post up on the approach soon!

portrait of a dad—my son (6)

last night I dreamed that I had a wedgie and when I woke up I had a wedgie

sometimes you follow your dreams and sometimes your dreams follow you

Genuinely curious: what’s the point in developer advocacy or developer relations work if the parent company requires radio silence during periods of extreme criticism, facing backlash for the company’s direction and decisions?

Shouldn’t this be the moment in which your team are *most* useful?

@mikeneu and I stumbled into this improvement on the stream last week: https://www.youtube.com/watch?v=MrVMewBq0jE

(and shout out to @rdela who encouraged contributing the fixes upstream!)

Dropped a new pull request to unlock JavaScript control of @paul_irish’s `<lite-youtube>` custom elements using the YouTube IFrame Player API:

https://github.com/paulirish/lite-youtube-embed/pull/164

sure we can talk about centering a div but are we ready to talk about how the overton window of centering divs has moved away from the center entirely

“Apple is trying to kill the Open Internet!”—@techlore

https://www.youtube.com/watch?v=up-zUEFNMww

I am a middle child

“The future of Jamstack is anti-capitalist”—Salma Alam-Naylor

https://whitep4nth3r.com/blog/the-future-of-jamstack-is-anti-capitalist/

#TheFutureOfJamstack

In about 10 minutes @mikeneu and I will be walking through the tech stack of the @eleventy Conference web site on Twitch! https://conf.11ty.dev/

We’ll be talking about Jamstack, managing static/dynamic pieces side-by-side, the social ticketing images that were trending on Mastodon, web components, @buttondown and more!

Join us: https://www.twitch.tv/cloudcannoncms

This is the last entry in my #11tyConf web component series!

If you’d like to learn more about how the ticketing and registration piece of https://conf.11ty.dev/ was built—tune in later today to the Static Web Development Happy Hour with Mike and Zach: https://www.twitch.tv/cloudcannoncms/

The State of Jamstack: Developers Want Return to Simplicity—Jeff James on @TheNewStack

https://thenewstack.io/the-state-of-jamstack-developers-want-return-to-simplicity/

#TheFutureOfJamstack

Going live in a few minutes with a few friends to talk about the Future of Jamstack!

Featuring @cassidoo, Salma Alam-Naylor, @brob, and @mikeneu!

Join us: https://www.twitch.tv/TheFutureOfJamstack

#TheFutureOfJamstack

My blog is 17 years old today! 🎉 :verify:

@DavidDarnes howdy! Someone at CloudCannon asked me if y’all use a CMS at Nordhealth and I have no clue so I thought I’d just ask the source 😅

This is the first of a few new web components I made for the @eleventy conference registration web site—more to come!

New web component: <throb-ber>

Adds a small rainbow gradient overlay until all of the images nested inside have finished loading. Works best with expensive dynamically generated images (like dynamic screenshot images).

📮 Blog post: https://www.zachleat.com/web/throbber/
🖼️ Demo: https://zachleat.github.io/throbber/demo.html
⚙️ Source code: https://github.com/zachleat/throbber

Luckily there are some helpful folks organizing to fight back and you can join them—fill out the @owa survey:

https://open-web-advocacy.org/blog/its-official-apple-kills-web-apps-in-the-eu/

I’m very concerned about Apple breaking the web by intentionally removing PWA features in the EU.

If we assume good intentions and the root issue is merely one of regulatory deadlines—an almost $3 trillion (USD) market cap company would make a plan to work with third-party browsers to add that compatibility back in (or at the very least provide APIs for others to do so).

But as far as I can tell they’re just removing the feature (only in the EU??) with no plan at all to add it back? *yikes*

did I win

is this winning

@buttondown I think you have a JS error on one specific docs page: https://docs.buttondown.email/tutorials/names (I tried in multiple browsers)

what’s the name for the thing where you post to social media and the post kinda blows up but you’re way too busy to reply to everyone so you leave a whole bunch of replies unread until you have the spoons to go back to it and you feel guilty about it

😬

I will circle back, y’all—sorry about that!

A front-end web developer just starting out—in order to feel most aligned with the industry and apply for the best jobs—will most likely start in a tool-chain that is *not* aligned with web standards.

In some cases these tools are actively hostile to web standards.

How do we begin to dig ourselves out of this mess?

The Static Web Development Hour is happening again today on Twitch with @mikeneu and I streaming in a few hours!

Tune in! Ask questions about dev workflow and the Jamstack! Watch me stumble around in a code editor!

https://www.twitch.tv/cloudcannoncms/schedule

vice-principal software engineer

“Why Bloat is Still Software’s Biggest Vulnerability”—@bert_hubert

https://spectrum.ieee.org/lean-software-development

the “💡 Insightful” reaction on linkedin is always sarcastic—right? people aren’t using that earnestly, are they?

…are they??

new shirt by @heydon

What are your favorite examples of Accessibility Statements?

@eleventy has one but I’m curious if it could be better: https://www.11ty.dev/docs/accessibility/

When a company claims they needed to do layoffs for a “reorg”—it’s understood that this is about as good a reason as “we wanted to, lol” right?

sorry, I don’t make the rules

Formal and official hierarchy of email hostnames:

@YOUR_CUSTOM_DOMAIN
@fastmail.com
…
…
…
@icloud.com
@gmail.com
@aol.com
@outlook.com
@hotmail.com
…
…
…
…
…
…
…
…
…
@hey.com

Thanks to @argyleink we’ve shipped v1.0.6 with `overscroll-behavior`:

https://github.com/zachleat/carouscroll/pull/4

0 open issues?? mmhmmmmm 😅🫠😅🫠

New package version dropped: `zachleat@41.0.0`

Run: npx zachleat
Install: npm install zachleat
Source code: https://github.com/zachleat/package-zachleat

Changelog:
Breaking change—full ESM

just ran into a typeface that took a bit of artistic license with the Multiplication Sign × (U+00D7) to make it asymmetrical and rotated it a little—THIS WAS A VERY BAD CHOICE

I am just a boy standing in front of the internet, asking it to think about how “use-for-free” things are funded before you deeply integrate them into your daily workflow

can we at least agree that naming it “the browser company” while building a new user interface on top of chromium is a little much

*throws away my IoT smart-toaster*

it wasn’t even AI-enabled!!

the arc of arc from “the browser company” wasn’t very long—and through the power of VC funding it inevitably bent towards AI

Would be nice if Safari supported `scrollend`: https://caniuse.com/mdn-api_element_scrollend_event

(the humblest of humble cc’s to the incredible @jensimmons)

#Please #ThankYou

Wanted to make a global CSS change to my site (that wasn’t using scoped CSS) and wanted to know which pages would be affected.

Trotted out this still-useful old CLI tool to spider a URL and search for any matching CSS selectors: https://www.zachleat.com/web/spider-pig/

The official issue for these can be found at https://github.com/web-platform-dx/web-features/issues/562

HT @McNeely @darth_mall@notacult.social @elomatreb

As @knowler notes, this is also a problem with `customElements.define()` too! 😭

https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define

Social media bug report 😱

The Baseline widget for `:defined` is not accurate here: https://developer.mozilla.org/en-US/docs/Web/CSS/:defined

(Also the report feedback link there is for generic Baseline feedback, not specific issues 😬)

As my online friends are now scattered across 4 or 5 social networks now, I’m wishing there were a better way to like/share/boost cross-posted content across a bunch of networks (from the original source).

Some kind of superboost feature?

How are y’all handling this?

Tried out Hole io for Switch today and the 4-player multiplayer was incredible. We had a lot of fun playing it with the kids. Only $2!

https://www.nintendo.com/us/store/products/hole-io-switch/

(So many Vercel folks are missing from Mastodon 👀)

Reading and nodding along to this excellent Core Web Vitals piece from Malte Ubl and Alice Alexandra Moore:

https://vercel.com/blog/how-core-web-vitals-affect-seo

Some of this is likely proactive defense in preparation for the upcoming March 2024 SEO INPocalypse facing mega-bundle framework sites (aka apps? 😅)

@aworkinglibrary’s https://aworkinglibrary.com/writing/unified-theory-of------ had me thinking about this.

I think of all the technical discussions, the back and forth about clarity versus overreach, the thing I miss most about Jamstack is that it used to be about the people and the community—and that’s the piece I want back.

#TheFutureOfJamstack
https://thefutureofjamstack.org/

microsoft, this is the moment we’ve all been waiting for:

IE on iOS

“The wind in your hair feeling of the developer experience getting better may have just been you rolling coal in someone else’s face”—@slightlyoff today at @cfedev’s #TheJamDev

Join me right now at @cfedev’s #TheJamDev!

https://cfe.dev/events/the-jam-2024/

Learn about @eleventy and the 3.0 release!

Just added a fact to my talk for @cfedev’s #TheJamDev tomorrow that shook me to my core.

https://cfe.dev/events/the-jam-2024/

Listen in tomorrow if you like learning little facts that make you anxious and sweaty

(did I sell it, do you want to listen now)

clutching my URLs

oooh https://github.com/wooorm/npm-esm-vs-cjs from @wooorm looks to be an attempt at answering this!

Has npm ever talked about how many packages are published as ESM versus CommonJS? How many packages are dual published?

Why are the unofficial/official HTML and CSS logos tied to HTML5 and CSS3?

We need a https://github.com/voodootikigod/logo.js for HTML and CSS, posthaste!