Eleven Reasons to Love Eleventy

On November 29th I gave a talk at the CambridgeJS meetup on a favourite topic of mine: the static site generator Eleventy. I gave it the listicle-adjacent title “Eleven Reasons to Love Eleventy” but I didn’t go to great lengths to declare what each of these were.

Slides and notes from my presentation are available but I wanted to spell out the bones of my talk and record the magnificent Eleven for posterity.

Simple & Flexible

Eleventy is a super simple static site generator. In short it takes input files like Markdown and converts it into website. Critically no boilerplate or JavaScript code is included by default which give a really great base to add whatever bits and pieces you wish to add to your site.

Unopinionated Templates

Unlike other static site generators, Eleventy supports many template languages out of the box. My preference is Nunjucks, a reasonably intuitive language to do a sort of meta-programming on top of whatever file you wish to generate.

Eleventy allows you to use a blend of different templating languages in one site. One benefit of this flexibility is that it makes the process of migrating over from a alternative generator a cinch: you can “progressively” migrate content and formats as needed.

Written in JavaScript

Eleventy is written in JavaScript and it’s easy to use the language to do core configuration of your site. Custom shortcodes – snippets that can be expanded into wider markup from a small string can also be written in JavaScript along with transforms. These allow you to transform your HTML before being output in your application.

The Eleventy documentation takes care to note it is not a JavaScript framework itself. By being in the JavaScript ecosystem, Eleventy allows you to leverage the depth and breadth of packages available on NPM.

As you define every bit of code and markup that ends up on your website you it’s not uncommon to find yourself writing more JavaScript used to generate your site than actually deployed to end users.

Pagination

Eleventy pagination makes it easy to split collections of materials into chunks for your site. It can also be used to create multiple outputs for the same input – I use it to generate OpenGraph images for social sharing and email markup for my newsletter.

Data Cascade

Underpinning every Eleventy configuration is a flow of data from a variety of different sources and blended together according to a hierarchy of inheritance. For the best summary of what this means check out Ben Myer’s full coverage.

Extensible

Eleventy doesn’t care about the other libraries and tooling you may wish to use. There are countless starter templates covering a wide variety, from Gulp to PostCSS, Tailwind to Vite. As an extra bonus many of these have full marks over on Google Lighthouse.

Plugins

There are a wealth of fantastically useful plugins for Eleventy. Many plugins are official ones solving real problems in convenient and modular packages.

To give two examples: Eleventy Image makes it easy to generate modern image formats and necessary markup. Eleventy Syntax Highlighting makes it easy to add language highlighting in code snippets without requiring client-side JavaScript.

Accessibility

The documentation and ethos of Eleventy prioritises and promotes accessibility when building websites. Official plugins like Inclusive Language normalize considering accessible language when writing content for an Eleventy site. As per the documentation (emphasis mine):

It’s very important that we take responsibility for the code we publish and deliver and strive to correct accessibility issues with the same veracity as a full service outage.

Fast

I’m a nosy web browser – whenever I come across a site that impresses me I reach for one of my favourite Firefox extensions: Wappalyzer. This takes an educated guess at the technologies used to build sites. A site built with Eleventy will have very few “tells” that give away it’s generator and it’s invariably the fastest sites that don’t have anything in their Wappalyzer results.

On the other (server) side – Eleventy builds are very quick to run and will provide pointers if particular configurations start to slow down the build.

Community

My experience with the Eleventy ecosystem is that of collaboration and camaraderie in the name of making great websites. The Eleventy community Discord is friendly and the regular Eleventy meetups are supportive and welcoming.

It’s Fun

Finally I find that the documentation and general ethos of Eleventy is fun – from the reassuring possum mascot to irreverant humor sprinkled around the documentation.

I like to say that Eleventy sites are “hand-crafted but not by hand.” By being in full control of the process outputs it’s fun to build sites that have everything you need and nothing you don’t.

notes icon posted


great mistakes

My handwriting isn’t very good. You might even go so far to say it’s bad. I remember being told to write my name again and again at school as I couldn’t seem to get my cursive to a good enough quality for my teacher. After years of preferring to hammer away with the clacky safety of a keyboard I find myself reaching for a pen a lot more often than ever before. I scratch away with a feisty little compact fountain pen in a little journal and dabble with sketching pictures as a form of self-acceptance for a handwriting ability I was always ashamed of.

At this time of year my usual error is to coast into a “Christian” when I mean to write “Christmas,” but writing a handful of cards today my mind wandered and I slipped out a “great” when I meant to write “grateful.” I stared blankly at the page and considered scrapping the card in favour of a clean slate – a fresh card without evidence of err.

It’s hard to make this sort of error when typing an email. You may make typos but you’ll summon the squiggly reds and some forgiving, trusty backspacing will make everything okay. The tablet I use for sketching has a helpful undo button but every press and resulting removal of the last stroke feels like a cheat, a betrayal of the intent of the moment.

I leaned into the “great” mistake and made it part of the message with a splotch of extra ink. I don’t think it looked bad. In fact, in some small way, I think it made it better.

When writing a card my handwriting is me, writing a card, by hand. Making mistakes is okay.

notes icon posted


newsletters I like

I get a small amount of joy from the handful of newsletters I subscribe to. Here they are in no particular order.

Drawing Links

Drawing Links is the newsletter I recommend to everyone. Subscribe for little comic strip vignettes from Edith’s day-to-day accompanied by high-quality recommendations and her sharp eye for humour.

Dense Discovery

Dense Discovery is a blend of productivity and design along with a smattering of climate and environmental coverage. It’s one of the more beautiful emails I receive and, arriving on Monday, it slots comfortably into my inbox as I start my week.

HN Blogs

This newsletter feels like a secret: Paul collates submissions to Hacker News that point to personal and independent sites. By avoiding the links that ascended to the front page it’s a helpful look at the nearly-made-its.

The signal-to-noise ratio is skewed slightly to the noise, but it’s smaller compared to the Hacker News firehose. I’ve found a wealth of interesting views and people through this newsletter.

Hello from Duncan

Duncan’s newsletter helped me appreciate the value of working in public. In it he recounts and discusses that which he’s worked on in the last 10 days. Since reading the reborn version of his newsletter I’ve understood better how I work and reflected on how I can be a better contributor to projects.

Reply All

I don’t remember actively registering for this newsletter and I stopped listening to Reply All a while ago but I let these recommendations slip into my inbox as they’re often good value. It’s funny to see the creep of Spotify links into the recommendations since the acquisition.

Today in Tabs

A relative newbie, it took me a few editions to appreciate the zippy, irreverent Today in Tabs from Rusty Foster. I’m since a convert, Rusty lives and breathes misanthropic internet and exudes equal parts joy and disdain for the world wide web in 2021.

Like an overstuffed tab bar of pages you promise you’ll read, each edition groans under the weight of itself. I always get a mixed wave of disappointment/relief when I reach the end.

An Irritable Métis

I love Chris La Tray’s writing and appreciate his perspective on some important topics. Arresting and disarming.

Exclusive Content by Megan Koester

Exclusive Content is exhausting. Acting as a biographical outlet, commentary on the dysfunctional comedy industry and scathing look at late-stage capitalism, Koester’s emails are an (un)healthy dose of anger and skepticism.

Unsupervised Learning

Daniel Miessler’s weekly email summarizing news on cybersecurity and technology was the first newsletter I subscribe to where I realized people were committing to writing and creating a newsletter.

Miessler does a great job at giving enough commentary on news to be helpful but not overbearing.

Where’s Your Ed At?

When I first read Ed Zitron’s newsletter I was turned off by his tendency to ramble. Recently, however, he’s truly knocked “it” out of the park with some head-turning takes on remote work and related topics. It’s refreshing to read someone so utterly committed to their takes and I like that.

Money Stuff

I subscribed to Money Stuff years ago but had to cut it loose after feeling overwhelmed by the sheer volume and quality of this daily newsletter. I picked it up again this year during the GameStop chaos and find it a really rewarding read. Levine’s writing is superb and I’m constantly in awe of his voice and ability to explain. It’s also really funny!

Noah Kalina

I find this newsletter a little infuriating – it seems so effortless. Photographer Noah Kalina shares some photos and a short commentary on life’s mundane side quests. It always makes me smile.

Laura Olin

An airy mix of internet and art, Laura Olin’s newsletter is short and well-crafted.

Data is Plural

A fantastic newsletter and resource: Jeremy Singer-Vine curates and provides links to datasets available online. It’s an impeccable treasure trove of real-world data.

notes icon posted


tall dog, short fountain

I don’t remember the last time I used a public water fountain on a run but I do remember using them. It’s a sunny day, I’m sweating profusely and dehydrated, perhaps planned or maybe stumbled upon, it’s a welcome pause.

Here in Victoria a lot of the public water fountains are encased in stones and cement. There’s often a bowl at the top with a button for operation and a mirrored bowl at the bottom for dogs – it makes a pleasing Z-shape to the eye. I say the bottom bowl is for dogs, I occasionally see people walking rabbits on a leash nearby but I’m not sure they use the fountain. During the pandemic I’ve settled into a running route that has at least three of these water fountains but for various competing reasons (winter, COVID) I haven’t touched them.

On a run a few weeks ago I saw a tall dog drinking out of the human end of the fountain. This dog was very tall, it’s head was comfortably above the basin and his owner/enabler had pressed the button. I thought back to the many times I’ve used water fountains in the past, how I’d been told they were unclean but how I’d used them anyway. Was the assumption today that the fountains weren’t being used due to COVID so why not? It’s unclear. Perhaps the dog was simply too tall to bow it’s head to the ground? It’s a possibility but perhaps unlikely. The bottom bowl was left alone.

I like loops and cycles. The feeling of resolution when something comes back to where it started. Or the synchrony of two plans coming together. I don’t like carrying things when I run so on multi-hour routes I’ve resorted to stashing a coin for a convenience store refuel. I sometimes daydream about leaving a bottle at a strategic point and looping back halfway through my run. I never do it, I’m concerned it would look suspicious or – more unlikely – be tampered with in some way.

Last week I saw a human sweep a little, short dog into their arms before holding them above the water fountain. Perhaps this dog was simply too short for the dog end of the stony-Z? As he lapped at the stream I thought how the fountain would look untouched once the thirst of the terrier was quenched.

notes icon posted


Stuff I use – macOS

I’m ruthless when it comes to the apps and tools I use. I could have used a piece software for a decade but if it becomes unmaintained or lags behind an alternative I’ll drop it. I’ll also try anything out in the name of a potential productivity or minimalism improvement. Here are the applications and software that have made the cut. For now.

Utilities

Homebrew

I used the indispensable Homebrew package manager to install most of the software on this list. I don’t like the way it tries to update everything before running the command I want it to. Otherwise it’s perfect.

Karabiner-Elements + Hammerspoon

I use these in a few ways integral to how I work. I bind CapsLock to ^++ and use it to launch all my apps with a single keyboard shortcut. When pressed alone it counts as a single ESC press. I’ve replaced the use of various window management tools over the years with a home-baked approach cobbled together in Lua.

AltTab

I’m not sure how it’s happened but my +TAB muscle memory has been miscalibrated to fail me almost every time. It could be because I often use +W to hide an application window which then makes it impossible to un-hide from the +TAB.

I found AltTab last week and it’s a game-changer. Another Open Source tool, the aim of the software is to replicate the Windows Alt-Tab pane but it’s the most feature-complete and responsive application switcher I’ve ever seen.

The thumbnail previews are nice but overall my favourite feature is preventing the pane from showing applications which don’t have any visible windows.

In defiance of the name I’ve mapped it to +TAB and I’m never looking back.

Keeping You Awake

Useful for when you want to keep a recipe or similar open without the screen dimming after a while.

BitWarden

I used standalone licenses of 1Password for over a decade but couldn’t bring myself to finally stump for a subscription to an app that seems to be getting worse by the year. BitWarden has been an admirable replacement that syncs across all my devices (macOS, iOS & Android) with minimal fuss. After using it for a few months I bought a modestly priced subscription.

Menu Bar

Battery Indicator

A customizable replacement for the stock battery indicator. I can’t remember the core reason I started using this but it’s nice.

Dato

This helps me keep track of a number of timezones and has a dispensable keyboard shortcut for quick-at-a-glance checks. Just like Battery Indicator it’s very customizable and works well.

Aware

The product design restraint on this tool is remarkable: it has a single feature.

Aware keeps a running total of how long you’ve been actively using your Mac. That’s it. It doesn’t force you to take a break or shame you for getting lost in some code, it’s just a simple reminder of the time you’ve invested in the current task.

Dozer

I used to use Vanilla but Dozer is an actively-maintained Open Source alternative. It allows me to hide all the menu bar cruft that I don’t always need visible.

I’m not sure why I insist on making the menu bar as clean as possible but this helps me with my #goals.

Productivity

Workflowy

After extensive evaluation of other notetaking tools I always slip back to Workflowy — and for good reason. The multi-platform app now houses, as a non-exhaustive list, my many todo lists, nodes, writing outlines, meal plans & newsletter planning.

The keyboard shortcuts are a little janky and the iOS experience leaves a lot to be desired but the reliability, collaboration, minimal interface & longevity puts it ahead of alternatives.

Firefox (Nightly)

The slow decline of the multi-platform browser landscape is depressing. Despite some missteps, Mozilla’s Firefox is still a competent choice and Nightly has a sweet logo.

This could be a separate post but my “couldn’t live without them” add-ons are: uBlock Origin, Intention, Hide Feed & Auto Tab Discard.

aText

There are thousands of “text expanders” or snippet tools out there. My pick is aText for the one-time cost and flexibility. This has saved me countless hours of typing: any text I copy-paste more than once goes into aText.

Development

Sublime Text

After a few years of using VSCode I’m back using Sublime as my daily driver. The visual cruft and overstuffed sidebars of VS Code were becoming a little too much – I missed the simplicity and speed of a native text editor. There’s more setup required and the plugin ecosystem is a little stale but it feels good to be back.

Sublime Merge

My use of Sublime Text for years led me to use Sublime Merge on release. I love the keyboard-oriented interface and native app experience. As a mediocre git user who often resorts to fresh clones to avoid reading the docs Sublime Merge is a dream to use.

Is it necessary? No. Does it feel nice to use good software? Yes.

RunJS

This provides an efficient, iterative runtime scratchpad for NodeJS/JavaScript without making me spend my entire life in Dev Tools. RunJS helps me be a little more atomic about my development and is the closest I get to writing tests for my personal projects.

kitty

I’ve been seduced by the raw speed of this GPU based terminal emulator. I didn’t notice the latency when typing with iTerm2 but now it’s painfully obvious.

notes icon posted