Loading indicator overlay for images (and maybe other things later).
@zachleat/throbber@1.0.2
Loading indicator overlay for images (and maybe other things later).
@zachleat/hypercard@1.0.2
Web component to add a three-dimensional hover effect to a card.
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

Registration for 11ty Conference (May 9, 2024) is now open—join us!
I got my ticket to the @eleventy Conference!
https://conf.11ty.dev/tickets/876cecc5531648eab7137c5f853c7539
@zachleat/hypercard@1.0.1
Web component to add a three-dimensional hover effect to a card.
@zachleat/hypercard@1.0.0
Web component to add a three-dimensional hover effect to a card.
zachleat/hypercard
Web component to add a three-dimensional hover effect to a card.
@zachleat/webcare-webshare@1.0.1
Either uses the Web Share API or copies share text to the clipboard.
@zachleat/webcare-webshare@1.0.0
Either uses the Web Share API or copies share text to the clipboard.
zachleat/webcare-webshare
@buttondown I think you have a JS error on one specific docs page: https://docs.buttondown.email/tutorials/names (I tried in multiple browsers)
@zachleat/throbber@1.0.1
Loading indicator overlay for images (and maybe other things later).
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!
@zachleat/throbber@1.0.0
Loading indicator overlay for images (and maybe other things later).
zachleat/throbber
A loading indicator overlay for images (and maybe other things later).
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!
vice-principal software engineer
@11ty/eleventy@3.0.0-alpha.5
A simpler static site generator.
“Why Bloat is Still Software’s Biggest Vulnerability”—@bert_hubert
@11ty/eleventy-img@4.0.2
Low level utility to perform build-time image transformations.
🪧 New release: Eleventy Image v4.0.0
⚙️ Node.js 18+
🧭 Adds `fixOrientation`
⛰️ Adds `minimumThreshold`
🎨 Fix height on animated GIF sources
🚣 Experimental: new Eleventy Transform plugin for zero-config Image Optimization
Full release notes: github.com/11ty/elevent...
@11ty/eleventy-img@4.0.1
Low level utility to perform build-time image transformations.
@11ty/eleventy-img@4.0.0
Low level utility to perform build-time image transformations.
@11ty/posthtml-urls@1.0.0
PostHTML plugin for transforming URLs. A fork of posthtml/posthtml-urls.
11ty/posthtml-urls
PostHTML plugin for transforming URLs. A fork of posthtml/posthtml-urls.
sometimes the best way to follow your dreams is to take a nap
the “💡 Insightful” reaction on linkedin is always sarcastic—right? people aren’t using that earnestly, are they?
…are they??
4 out of 5 dentists recommend toothbrush botnet
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?
📮 New post:
Lessons learned moving @eleventy from CommonJS to ESM.
https://www.zachleat.com/web/eleventy-v3-esm/
New talk video and slides from @cfedev’s #TheJamDev event.
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`:
@zachleat/carouscroll@1.0.6
Add next/previous buttons to a horizontal scrollable container.
📮 New web component: <carou-scroll>
https://www.zachleat.com/web/carouscroll/
Not quite a carousel, this component allows next/previous buttons to control a horizontal scrollable container.
I use this on my site to render exported Keynote slide decks in blog posts.
@zachleat/carouscroll@1.0.5
Add next/previous buttons to a horizontal scrollable container.
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
zachleat@41.0.0
Meta package for Zach Leatherman
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
The Good, the Bad, the Web Components
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)
@zachleat/carouscroll@1.0.4
Add next/previous buttons to a horizontal scrollable container.
📮 New post:
The Good, The Bad, The Web Components
https://www.zachleat.com/web/good-bad-web-components/
A full crash course on the state of web components, where they fit in JavaScript frameworks landscape, and how to make use of them moving forward!
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/

@zachleat/carouscroll@1.0.3
Add next/previous buttons to a horizontal scrollable container.
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 😬)
@zachleat/carouscroll@1.0.2
Add next/previous buttons to a horizontal scrollable container.
@zachleat/carouscroll@1.0.1
Add next/previous buttons to a horizontal scrollable container.
@zachleat/carouscroll@1.0.0
Add next/previous buttons to a horizontal scrollable container.
zachleat/carouscroll
Add next/previous buttons to a horizontal scrollable container.
Join us for the 11ty International Symposium on Making Web Sites Real Good
(We are running a conference in May 2024!)
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!
(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.
microsoft, this is the moment we’ve all been waiting for:
IE on iOS
The first release of Internet Explorer (1995) is closer in time to the Apollo 11 moon landing (1969) than now.
“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!
Had a great chat with @mikeneu about the Jamstack and what we can do to preserve the usefulness of the term moving forward: https://www.youtube.com/watch?v=BPKIU9Ow_ZU
The view today 👀

“When I […] go to canisue, it seems that all browsers support the inert attribute.”
is canisue new? haven’t heard of that one before
a substack alternative named superstack
a short commute to the @cloudcannon office 🇳🇿

@zachleat/seven-minute-tabs@3.0.2
A no-theme tabs component based heavily on an example from the WAI-ARIA Authoring Practices documentation.
@zachleat/seven-minute-tabs@3.0.1
A no-theme tabs component based heavily on an example from the WAI-ARIA Authoring Practices documentation.
@zachleat/seven-minute-tabs@3.0.0
A no-theme tabs component based heavily on an example from the WAI-ARIA Authoring Practices documentation.
“Bake, Don’t Fry” was almost 22 years ago—and it is still one of the all-time great blog posts.
@zachleat/seven-minute-tabs@2.0.4
A no-theme tabs component based heavily on an example from the WAI-ARIA Authoring Practices documentation.
@zachleat/seven-minute-tabs@2.0.3
A no-theme tabs component based heavily on an example from the WAI-ARIA Authoring Practices documentation.
@zachleat/seven-minute-tabs@2.0.2
A no-theme tabs component based heavily on an example from the WAI-ARIA Authoring Practices documentation.
@zachleat/seven-minute-tabs@2.0.1
A no-theme tabs component based heavily on an example from the WAI-ARIA Authoring Practices documentation.
Do any web browser devtools (Chrome, Firefox, Safari, etc) allow you to inspect an image’s EXIF metadata?
11ty/11ty-conf
The 11ty Conference Web Site.
Just a regular reminder that https://www.fastmail.com/ is great.
I tested the new microsoft copilot button and I have bad news: it’s actually a copilot <div>
Looks like Google Fonts placeholder text is pulling excerpts from the UN’s Universal Declaration of Human Rights 👀
https://www.un.org/en/about-us/universal-declaration-of-human-rights

what can web components do for US student loan forgiveness
if we are going to have unrealistic expectations for web components—can they do something about the military-industrial complex?