yes it works with your existing CommonJS project too 👀

it took a lot of work to get here 😅

could it be real

could it be happening

ESM config, async config in @eleventy

#11ty #11tyESM

“…and of course NextJS is heavily controlled by Vercel. We want to be a bit more untethered than that, unfettered to a specific vendor. We want to be truly agnostic to vendor, like a true open source project that's not really controlled by a for profit company right now.”—Tom Preston-Werner

https://www.heavybit.com/library/podcasts/jamstack-radio/ep-133-react-server-components-with-tom-preston-werner-of-redwoodjs

the sound I made when the credits rolled and the legend Jake Weary appeared

artificial is to flavoring as artificial is to intelligence

We just shipped the brand new <table-saw> web component for Responsive Tables to the @cloudcannon web site and you can see it in action on this blog post:

https://cloudcannon.com/blog/eleventy-11ty-vs-gatsby-in-2023-which-ssg-is-best-for-you/

Learn more about table-saw: https://github.com/zachleat/table-saw/

Watching https://github.com/nodejs/TSC/issues/1445, looks like CommonJS packages in Node.js will need to add a `"type": "commonjs"` to their package.json to have compatibility with this flag (and possible future compatibility if/when Node swaps to ESM by default without the flag).

via @mcollina

days since I’ve felt annoyed that serverless function implementations don’t have a standardized (read: non-vendor locked) API: 0

just got a sneak peek at the new @eleventy mascot (by @reverentgeek) and it is *amazing*—excited!

glad I caught a screenshot of it

did anyone else just get the “time to migrate off of react” mobile alert

Had a lovely chat with George Phillips yesterday about the long term vision of @cloudcannon and I’m still buzzing about it today—some very exciting ideas in the pipeline about modernizing the original vision of a writable world wide web.

TIRED: domains
WIRED: subdomains
WIRELESS: footlongsubdomains

Kinda wish that <input type="search"> had an option to submit a value into the browser’s native page search (⌘+F).

A form control that aliases on-page search to get a bunch of browser functionality for-free.

uh oh—had to unregister their service worker and now it’s working 😬

you either die a fully rendered MPA or live long enough to white screen the SPA

New cookie consent dark pattern dropped: obtrusive popup in the corner of the page that only goes away when you hit the Accept All Cookies button

This web component hardly merits mentioning but I’ve used it a few times so now it gets a baby blog post:

<resize-asaurus>

A little wrapper for resizing responsive component demos, little more than CSS `resize: horizontal` 😅

https://www.zachleat.com/web/resizeasaurus/

as best practices middle management I say that we need to return to the office to make sure that best practices are working

announcing my new food blog zacheats

New web site added to https://esif.dev/:

Cutting the Mustard—BBC News team (2012)
https://responsivenews.co.uk/post/18948466399/cutting-the-mustard

Well, it’s working. Can it survive a month on FaunaDB’s free tier? Only time will tell 👀

rather than upgrade google analytics to a new major version—why not instead write my own analytics library on a sunday afternoon

why not

Remember when browsers weren’t evergreen? Feature testing and cutting the mustard were more common practices. But it’s impressive how quickly things ship now.

Quick release update of table-saw@1.0.2 includes the option to use Container Queries for responsive breakpoints instead of viewport based media queries.

Demo: https://zachleat.github.io/table-saw/demo.html

The web component revival of Tablesaw begins:

https://github.com/zachleat/table-saw/

Easily transform `<table>` elements for small viewports.

We love to see `inputmode="decimal"` in the wild for a mobile numeric keyboard with a decimal point—nice work @jeffsheets!

https://hachyderm.io/@jeffsheets/111144228957452470

See it live: https://gaspumpr.com/

A web component revival of the tablesaw stack mode responsive <table> jQuery plugin might be coming soon 👀

Remember https://github.com/filamentgroup/tablesaw
Demo: https://filamentgroup.github.io/tablesaw/demo/stack.html

Finish this sentence:

Software is like a septic tank…

what stage of capitalism hawks products exclusively via school fundraisers?

our local school district is selling mattresses—what in the mattress firm money laundering is going on here

if shadow dom does not spark joy we must put the shadow root up for garbage collection

Seeing some discussion about iOS 17’s Safari Advanced Tracking and Fingerprinting Protection feature.

Is there any documentation on what this actually does, practically speaking?

Just taking stock of my 2023 so far and I can say that this year has easily been the most tumultuous of my professional career thus far.

For a few months there my mental state was pretty broken.

Starting to slowly come out of it now—and feeling thankful to everyone that helped and reached out and listened, especially my partner who was on the receiving end of so many long-winded rants 😅

@eleventy (shout out to @hi_mayank! https://hachyderm.io/@hi_mayank/110952442284730729)

@eleventy Developer Log Star Date September 22:

✅ Added data cascade support for named exports in ESM data files

New release of `performance-leaderboard` bumps to use Lighthouse v11.1, requires Node 18.16+

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

Already in use on speedlify: https://www.speedlify.dev/ssg/

on my best days I feel like a librarian for blog posts

Referenced at @hugoconf today:

https://blog.cloudflare.com/new-dev-docs/

Cloudflare (in 2022) migrated from Gatsby to Hugo to work around almost hour-long build times (for a project with 1600 markdown files).

It makes me think of the Jamstack pivot to include on-request rendering models that sacrificed the benefits of SSG to solve problems introduced by slow build tooling. In this case, Cloudflare swapped back to Hugo rather than over-complicate their architecture.

(reminded of https://www.zachleat.com/web/build-benchmark/ too 🫣)

At the request of @davatron5000, I snuck some quick filters onto https://esif.dev/ 👀

(using web components, but don’t tell Dave that or I have to pay royalties)

This quote says so much about the ideology and mindset of folks still influencing the modern JavaScript community.

On React from React’s engineering manager (now at Vercel):

“So people started playing around with this internally, and everyone had the same reaction. They were like, ‘Okay, A.) I have no idea how this is going to be performant enough, but B.) it’s so fun to work with.’ Right? Everybody was like, ‘This is so cool, I don’t really care if it’s too slow — somebody will make it faster.’”

https://www.youtube.com/watch?v=KVZ-P-ZI6W4&t=310s

via https://dev.to/tigt/why-not-react-2f8l by @tigt HT @grigs

wicked on tiny desk
wicked on tiny desk
wicked on tiny desk
wicked on tiny desk
wicked on tiny desk
wicked on tiny desk
be cool
be cool
no big deal
wicked is on the tiny desk

in paris they call it a royale menu ☰ with cheese

I’m not sure how many Hugo fans I have following me but you may be interested to know that HugoConf is tomorrow! @hugoconf

https://hugoconf.io/

I’m personally very excited to see the StaticShape lightning talk from George Phillips—debuting a new open source project to automate the migration of a folder-of-static-files to a variety of SSGs (not just Hugo)

we reached the absolute peak of lyricism when destiny’s child uttered the sheer unadulterated genius of “pay my automo-bills”

CSS `:has()` on Firefox imminent!

https://bugzilla.mozilla.org/show_bug.cgi?id=1853701

A discussion launched from @nolan’s blog post: https://nolanlawson.com/2023/08/23/use-web-components-for-what-theyre-good-at/

“What web components are good at”—@nolan

https://podrocket.logrocket.com/what-web-components-are-good-at

Nolan talks about “framework chauvinism” and where web components can fit in that discussion.

One unfortunate byproduct of the shuttering of Google Domains is that .dev registrations are now $30+/year on Squarespace instead of $12.

That’s a 150% price increase—for business!

how often do you think about the times new roman empire

❌ garbage in ➡️ garbage out
✅ garbage in ➡️ LLM ➡️ garbage out

the infinite grift machine has finally churned out shakespeare this time, we promise

@bglw’s static site search library Pagefind just hit 1.0!

https://github.com/CloudCannon/pagefind/releases/tag/v1.0.0

I’ve used this in a bunch of different projects to great effect, it’s great! Congrats Liam!

Edit: fwiw I’m using Pagefind 1.0 on 11ty.dev already too!

Can the Jamstack community be saved? Can we reorganize as a community-led effort? Do we want to? What is a Zhuzh? Is that how you spell it? Let’s talk about it!

Join us 🚨 LIVE (IN ONE HOUR) 🚨 for a discussion on these topics and more: https://www.youtube.com/watch?v=BX6U8M5rjtg

With:
• @philhawksworth
• @jaredwhite
• @remotesynth
• @brittneypostma
• (and me, your moderator)

If you have questions you’d like to see answered by this panel (no guarantees of course)—please drop them in the replies below! 🙌🏻

Can the Jamstack community be saved? Can we reorganize as a community-led effort? Do we want to? What is a Zhuzh? Is that how you’re supposed to spell it? Let’s talk about it!

Join us 🚨 LIVE TOMORROW 🚨 for a discussion on these topics and more: https://www.youtube.com/watch?v=BX6U8M5rjtg

With:
• @philhawksworth
• @jaredwhite
• @remotesynth
• @brittneypostma
• (and me, your moderator)

Make sure you hit the Notify Me button to subscribe for reminders!

To the individual this morning asking @eleventy to keep politics out of software, I made a few changes to our homepage just for you, I hope you enjoy them 😘

Added a new post to https://esif.dev/

https://blog.chriszacharias.com/page-weight-matters by Chris Zacharias (December 2012)

Is there a term for a video game that’s free to play, but algorithmically manipulates players to lose if they don’t pay for premium features?

@jaredwhite Just wanted to make sure that you were on for next week! I don’t see your response to the calendar invite I sent to your newtabletweb gmail account so I wanted to double check

New JavaScript ecosystem tool: “Look at these 200 new features we just added to our runtime—aren’t they cool?”

Me: “Great—how are you funded?”

I don’t post on social media much while attending events (I prefer to be more present than virtual) so please forgive the delayed stream of @smashingconf after I arrived home 😅

And of course the always entertaining @mia made a couple of very important points at @smashingconf Freiburg:

1. Gave much needed historical attribution to @jensimmons for their work on Intrinsic Web Design.
2. Reminded us that media queries aren’t going away even if container queries are ubiquitous. They’ll continue to be useful for non-size related things like `prefers-reduced-motion` and `hover`, etc.
3. Style queries are coming and they are awesome when used with Custom Properties.

ShadowRealm for sandboxed JavaScript execution will be very helpful in WebC too 👍🏻

https://github.com/tc39/proposal-shadowrealm

There are new Set methods coming for `intersection`, `difference`, `isSubsetOf`, `union`!

Not yet available anywhere yet but I am so ready for these 🏆

There are new Array APIs that don’t mutate!

`toReversed`
`toSorted`
`toSpliced`
`with`

(already in Safari 16 and Node 20+)

I took entirely too many notes during @porteneuve’s @smashingconf talk on Future JavaScript ⬇️🧵

Have you ever struggled with a focusable element (custom drop down menu) that disappears when you swap focus to your Developer Tools?

This “Emulate a focused page” checkbox is for you!

More: https://developer.chrome.com/docs/devtools/rendering/apply-effects/#emulate-a-focused-page

Absolutely loved that @jecfish gave a shout out to Firefox Developer Tools in their energetic talk on Source Maps at @smashingconf Freiburg:

Dan Donald made two very relevant points in his @smashingconf Freiburg talk:

1. You don’t need to solve Big Tech Company problems, nor repeat their solutions.
2. The success of your design system is reflected in how successful the end users feel when interacting with the products created using the design system.

(so many great quotes in this talk)

• Design systems can create bias at scale!
• You can’t retrofit inclusion!
• Are simplicity and inclusion incompatible?

“You can create really inaccessible experiences from accessible components.”

—@Amy_Hupe in their talk Systems of Harm at @smashingconf Freiburg

At @smashingconf this week, Slava Shestopalov reminded us that the Russian invasion of Ukraine is creating more people that need accessible experiences—so investing in accessibility testing and improving those experiences in our work is one small way that we can do our part.

US airports are not good airports

Had a really lovely time at @smashingconf in Freiburg today! It was my great honor to be the mystery speaker as we trapped hundreds of people in a room to teach them about web components 😈😈😈

Thanks for having me!

what if the quiet train car, but for everywhere

today I used a className attribute in HTML just to feel alive

slowly but steadily—@eleventy is still growing!

This poll got a lot of responses (and helpful replies)!

I wasn’t all that interested in preferences 😅. I really wanted to learn about the folks that selected the first two options.

A few lessons:

1. Supporting both modes is an accessibility priority—some folks need light, some dark.
2. Which mode folks need can be dependent on their surroundings (not just time of day).
3. Untested poor color contrast is a big problem!
4. UI toggles are used by folks as a workaround for color contrast issues.

Some really great color contrast checking features in Polypane: test dark and light mode at the same time!

via https://mastodon.social/@Kilian/110984597045130057

Learn more: https://polypane.app/