Published

Inexactly benchmarking Eleventy vs Astro build times

The Eames Institute team is checking out some frameworks and static site generators for a project, and I wanted to see how Eleventy and Astro compare in terms of build time.

Zach Leatherman’s 2022 article “Which generator builds Markdown the fastest?” is probably the most thorough resource I’ve come across along these lines, and I’d recommend checking that out if you want to do some serious comparisons.

But I was curious about a “real world” test in 2024, so I decided to do some inexact benchmarking using a Markdown export of this blog. A caveat up front: I’m much more familiar with Eleventy than I am with Astro, which will likely be apparent when I get to the incremental build tests later in this post.

For Eleventy I used eleventy-netlify-boilerplate with zero modifications, and for Astro I used the blog template as described in their docs with some small modifications along the lines of this wordpress-to-astro repo to get categories and tags working. I didn’t want to use wordpress-to-astro directly since it was last updated two years ago, but it is a good reference point.

My blog has 770 posts which were exported to 770 Markdown files. With a paginated feed, categories, and tags, the total number of built pages is around 2550.*

Based on an average taken from 10 builds, Astro took 10.07 seconds and Eleventy took 4.29 seconds to build.

Incremental builds can speed things up significantly since the only built content is that which is relevant to the modified files.

Eleventy has supported incremental builds since December 2022 (I believe!), but it doesn’t yet support it on a CI server. There is an open issue for it which looks like it has traction.

To test incremental builds, I added and removed the same single tag on the same post 10 times.** Based on an average taken from 10 incremental builds, Eleventy took 2.17 seconds skipping 777 files. I would have expected it to skip more, but this might have to do with not being able to incrementally build paginated data.

I wanted to test the same content change in Astro… but it isn’t clear to me that there is an apples-to-apples comparison. Astro introduced an experimental Incremental Content Caching feature in v4.0 (not sure if this is supported on CI servers). When I added experimental.contentCollectionCache to the config, there was no difference between basic build times when I made a content change. I’m not sure if this is because having all of my content in Markdown makes the caching a mute point, or if it’s something else. If anyone has further context on how best to test Incremental Content Caching in Astro, would love to know.

For what it’s worth, running astro dev is extremely quick, just 125ms before it’s ready.

I’d be curious to do a similar benchmark using WordPress’s REST API but am not sure I’ll have the time… Will update here if I do.


* I give a rough number because the Eleventy boilerplate and Astro template generate a few additional pages, but the page total difference is in the single digits so I didn’t waste time evening them up perfectly.

** For my own future reference in case I do further tests: Add and remove the tag hello from this post.

Published

“‘AI’ is pretty much just shorthand for mediocre”

Just read through “You sound like a bot” by Adi Robertson in the Verge. I hadn’t really put my finger on the right word for my feelings about AI until reading that article but that’s it: it feels very mediocre.

If you want to get a rough overview of how the average frontend engineer might feel about a JavaScript framework, ChatGPT is useful enough. If you’re willing to ignore the questionable origins of the training data in use, Midjourney can be useful for rapid image generation for an early storyboard.

But as of right now, the output always feels meh, “yeah ok”. Never really surprises you with a unique perspective, or an unexpected visual language. That vibe is only becoming stronger as AI developers continue to sand off the “rough” edges on their products.

Maybe that will change. As Robertson says, “Maybe the schism between artists and AI developers will resolve, and we’ll see more tools that amplify human idiosyncrasy instead of offering a lowest-common-denominator replacement for it.”

That’s not happening any time soon. One reason is that artists have been given about 1,000 reasons to distrust AI, and I think that it is only widespread artistic use and input that could actually lead to that sort of breakthrough.

Another reason: spewing mediocrity is a pretty strong sweet spot for AI. AI is useful as a summarizer so long as you take the response with a grain of salt and follow up on sources. Case in point: Elicit seems pretty cool! Listen to this ShopTalk Show episode with Maggie Appleton for more.

Anyways, maybe we’ll eventually get to the point where AI has that human “spark”, who knows. Maybe it’ll happen next month and I’ll eat my words. Until then, as most of the content we experience online becomes more grey and sludgy, the personal will become far more valuable.

In Anil Dash’s article “The Internet Is About to Get Weird Again” for Rolling Stone late last year, he says that “the human web, the one made by regular people, is resurgent”. He places a lot of emphasis on the breakdown of the content silos we’ve relied on for so many years, which definitely seems like the major catalyst for the shift. But AI’s growing mediocrity will be the force that drives it home and really makes the human web stick.

(Related side point: clearly I need to read Filterworld by Kyle Chayka.)


Edit 21 Feb 2024: Maybe I should eat my words sooner? OpenAI just came out with Sora. Which is impressive! But… IDK, it still feels meh somehow? Maybe it’s just because it’s still early days, we’ll see.

Published

Some thoughts about making a Donald Judd-esque table

Most of the NYC crew from the Eames Institute took a little field trip to 101 Spring Street yesterday. There was a lot I found beautiful, and a few things that gave me pause.

But one of the things I most enjoyed inspecting was Donald Judd’s big 14-seater whitewood table in the kitchen / dining space on the second floor. Clearly well-loved, and slightly more rough-and-ready than some of his other furniture. It was good fun to have a close look at the dining chairs too, though I’m more interested in the form there. Don’t look too comfortable.

This is a very broad overview of some points to consider if I ever want to make a Judd-esque table.

Read more

Published

Color contrast tools to check against APCA

EL introduced me to contrast.tools recently, it uses the Advanced Perception of Color Algorithm (APCA) to check the accessibility of your text based on the desired colors and the font weight + size. But importantly, it also provides a lookup table to verify how you should (possibly, probably) interpret things.

I think that APCA is being floated as the new contrast algorithm for WCAG 3.0? But I’d need to look in to it more to be sure. Apparently APCA Readability Criterion (ARC) might be a new standard for visual contrast.

Side note: I kind of wish we could get away from acronyms-within-acronyms-within-acronyms in the accessibility standards world…

Published

SUCCESSFUL Adventures in setting up ActivityPub + Webfinger on a Flywheel-hosted WordPress site

Updated 31 October 2023 at 2:45pm to edit the NGINX config and give a further explanation.

I gave up too soon!

Emerson from Flywheel did more digging in the Fastly cache documentation and realized that we could tweak the NGINX config to fully support content negotiation. He added a Vary header to the necessary URLs et voilà, everything started working properly. Now, courtesy of Matthias Pfefferle’s great WordPress plugins and Flywheel’s dogged help, you can follow this blog on Mastodon if you search for @blog@piperhaywood.com or https://piperhaywood.com/@blog.

For future reference, this is the NGINX config tweak that got ActivityPub and Webfinger working on Flywheel with their Fastly caching setup:

location ~* /.well-known/webfinger {
    default_type application/activity+json;
    add_header Vary Accept;
    include internal-proxy.conf;
}

location ~* / {
    add_header Vary Accept;
    include internal-proxy.conf;
}

It’s fairly self-explanatory, but essentially the first location block ensures that all Webfinger endpoints have a default content type of application/activity+json, adds a Vary HTTP header so that Flywheel’s caching via Fastly will cache different versions of the page depending upon the content type, and includes further configuration via an internal-proxy.conf file. The second location block ensures that all URLs across the site basically do all of the above, but no default content type is set. (TBH I feel like I might only need the second block… but at this point everything is working nicely so I’m not going to ask the kind souls at Flywheel to change the config yet again!)

Colin from Flywheel explained the internal-proxy.conf file to me in my far-too-long support ticket:

The internal-proxy.conf is indeed an internal file that has platform-specific rules. Some of this config file is just simple cache rules, excluding common paths, whereas other parts are potentially sensitive as they pertain to our load balancing and proxy configs.

So that’s it! You can follow this blog now on Mastodon, and all blog posts published after October 30th should show up.

Published

Adventures in setting up ActivityPub + Webfinger on a Flywheel-hosted WordPress site

Update: We got it working! Take a look at this post for more.


I recently moved my hosting from NFSN to Flywheel. NFSN had served me beautifully for years, very economically, but I just don’t have as much time for admin anymore and Flywheel’s managed WordPress hosting was a useful move to cut down on that stress.

Alongside the hosting move, I’ve been trying to set up the very talented Matthias Pfefferle’s ActivityPub and Webfinger WordPress plugins to get this site on Mastodon.

Unfortunately, Flywheel doesn’t seem to play super nicely with the plugins. Part of this is Flywheel’s NGINX configuration which they lock down tight with good reason. But the bigger sticking point is Flywheel’s full-page caching mechanism. Though their caching provider supports content negotiation, Flywheel itself does not. This causes issues where JSON can end up being cached instead of HTML on various pages, most notably the homepage. (Apologies if you saw a JSON blob when visiting this site recently!) We tried to get around this by forcing the content type on the homepage and Webfinger endpoints, but JSON was still served up on the homepage whenever a client sent through a header with Accept: application/activity+json.

For now, I’ve deactivated the plugins. I’m hoping that Flywheel might look in to supporting them more broadly, but that realistically depends on demand from their customers. For posterity since I hope to revisit this in the future 🤞, here is the discussion about all of the above within the Webfinger repo, including some tips from Matthias.

Flywheel’s support staff have been pretty fantastic through all of this and I’ve been really happy with the hosting thus far so I’m not tempted to move hosts (again) for this. Not yet at least!

Published

Thoughts on search, AI as a rubber duck, and this blog

I’ve been working on a little side project recently that has been in the backlog for ages. I finally have a moment to pull it together, and it’s helping me brush up on a few Next.js 13 features I haven’t had the chance to play with yet.

As part of that, I’m doing a lot of searching around best practices on this that and the other, particularly server side rendering. It’s the first time in a while that I’ve been pointedly trying to use the internet to teach myself something in-depth related to coding, as opposed to finding quick sporadic answers.

Read some rambling thoughts on search 🔍, AI as a rubber duck 🦆, digital gardens 🪴, and the future of this blog 🧠

Published

Dave Rupert’s animation-timeline example

See Dave Rupert’s post on scroll shadows with animation-timeline. Browser support isn’t quite there yet so it’s more of a progressive enhancement, but this is a great use case example.

He wrote that off the back of Bramus’s scroll-driven animation exploration, and wow. So many of those behaviors would have been useful on past projects…

Published

What to do if Command + R won’t reload your VSCode window

So CommandR hasn’t been reloading my VSCode window. But the “Reload window” command in the palette (ShiftCommandP to open palette) shows that it should work. Charles told me how to fix it!

To sort it out, click the cog icon next to the “Reload window” command in the palette to open the Keyboard Shortcuts settings for that command. Then under the “When” column, right-click isDevelopment and select “Change when expression”. Delete the contents, then press enter. There should now be a dash under “When” to indicate that it’s empty. Close the Keyboard Shortcuts file, then try reloading a window by typing CommandR and it should work.