“Web Development” from Nathan Upchurch

Eleventy Becomes, Sigh, Build Awesome

2026-03-11T00:00:00Z

In case you haven’t heard, Eleventy, the excellent static site generator that I use for this very website has been acquired by Font Awesome. As a result, it has been renamed, sigh, Build Awesome. After seeing what happened to Shoelace, I’m apprehensive and very much not looking forward to seeing what features get locked behind a paywall. But beside the enshittification likely to follow, I thought we’d stopped appending “awesome” to everything at roughly the same time bacon memes, curly moustaches, and stomp-clap music went out of style. It seems like I’m not the only one who feels this way either.

While disappointed with this state of affairs, I’m not terribly surprised. Beyond the matter of funding, as W. Evan Sheehan of The Darth Mall put it:

…the vibe of open source in the JavaScript community is a little bit different than what I think of as the broader open source movement. Open source JavaScript projects often feel a little more tied to corporations than Linux, or Python, or NeoVim.

I wholeheartedly agree. There’s a big difference in philosophy between “free software” and “open source,” and many JavaScript projects seem to be firmly in the latter camp.

The choice of the MIT license for Eleventy in the first place speaks volumes—it’s antithetical to the free software movement. The MIT license allows corporations to snatch up free and open source software, insert whatever malicious functionality they please, lock down the source code, and abuse the users they extort with their rent-seeking pricing schemes. On the other hand, code licensed under a strong copyleft license such as the GPL ensures that software always remains free (as in speech). Under a strong copyleft license, anyone can use the software for any purpose. They may study, change, improve, and redistribute it. But unlike permissive licenses such as the MIT license, developers may not strip these rights from users at any point.

The goal of the free software movement is to create a commons of software that anyone is free to use, study, redistribute, and improve so that abusive software ceases to be competitive. In terms of how MIT licensed software helps this cause, it’s a bit like putting a soldier on the battlefield with no armor. They may do some damage, but they’re a cinch to eliminate from the field. At this point, I see MIT licensing as a red flag on all but the very few projects where it makes sense (such as programming languages). When you decide to rely on MIT-licensed software for your day to day activities, you never know when it will be enshittified, put behind a paywall, or EEE’d out of existence.

I’m not saying that these things are going to happen to what we knew and loved as Eleventy. Who knows what the future may bring. But I am saying that this move is certainly not in the spirit of Free / Libre and Open Source Software. I fear that the age-old pattern that befell Standard Notes is going to happen once again here: first attractive new features appear behind a paywall, then old features you relied on get put behind a paywall, using the software without paying is slowly made increasingly difficult, and, before you know it, they pull the ol’ switcheroo on the license (even if they revert from embarrassment later).

At the same time, despite my misgivings, I’m happy that Zach Leatherman is (I assume) going to be properly paid to continue his work on the project. It shouldn’t be so damned hard to make a living while performing a public good. Zach seemed pretty happy about all of this during his appearance on, sigh, Podcast Awesome. He strikes me as someone who really cares about his work, and seems a lovely man, always willing to jump in help someone even when the problem is between the chair and the keyboard (ask me how I know). Zach deserves, at minimum, to be paid a decent salary for his contribution to the world, and I’m thrilled that it seems he’s going to get at least that.

Now I’m tempted to turn this into a screed on funding for FLOSS projects, but better informed people than I have written plenty of those already, so I’ll leave it at this—the fact that NASA, Cern, Google, Microsoft, Mozilla, Ubuntu, JetBrains, CloudCannon, Netlify, Cloudflare, Shopify, MIT, Stanford, the governments of France, the UK, and the USA, Orange, Red Hat, Just Eat, and others didn’t manage to muster between them a piddling $6,000 per month to pay the developer of a tool they use to publish their websites is disgusting. We might have avoided this situation if they had.

I developed something like a brand loyalty to Eleventy. It’s a scrappy project from a talented developer who has managed to keep it alive and well for eight years. The project has become widely used because it’s excellent: flexible, powerful, fast, and easy to use for web developers who are used to working with JavaScript. I’m sad to see the name go, along with the red balloon, and that scruffy possum. The clean, middle-class replacement with its stupid clothing and fancy green balloon ^[1] can take a hike—I can’t believe they’ve gentrified the damn mascot!

They say Grumpy floats among the stars now.

While I have major apprehensions about where, sigh, Font Awesome is going to take the project, I suppose we’ll just have to wait and see where this goes. In the meantime, let’s all be sure to donate to the FLOSS projects we use, publicly shame corporations who don’t give back to the projects they profit from, and pressure our representatives to fund FLOSS software!

And green is my favorite color, too :[ ↩︎

100 Webmaster Questions

2026-02-05T00:00:00Z

I found this questionnaire on the website of my Geekring neighbor Corvidae. Original questions sheet on mousling.net.

Please introduce yourself. #

I’m Nathan. I live in Chicago, U.S.A., and have far too many interests. I play classical trombone for fun, make incense sticks, write things, cook vegan food, and more.

How long have you been making websites? #

Beside tinkering with HTML and CSS to customize my MySpace profile, I first started back in, oh, 2004 or 2005.

And what got you into the hobby? #

I just became so exhausted with both mainstream social media and the idea of a “personal brand” that I decided I needed a space on the internet where I could just sort of exist as a human honestly, and on my own terms.

What kind of website are you most interested in? #

Personal sites, featuring real people earnestly documenting their existence creatively. I’d like everyone to have one.

What’s your workflow? do you plan your websites out thoroughly or do you come up with the design as you go along? #

If I’m making a site for a client, the whole thing is absolutely planned out first in order to nail down the scope. Then the design has to be done, from concepts to revisions and final approval, before any code can be written. If I’m making something for myself, I often just start with code and see where it goes.

Please link to your biggest inspirations. #

This might sound a bit conceited, but I don’t know that I have any. I find that a lot of competition-winning design work is actually just ghastly to use and totally ignores accessibility, so I kind of have beef with many of my contemporaries. Really, the goal for my website was to try to make an excellent reading experience. It’s not the most cutting-edge design, or the most interesting, but I think I’ve at least done that.

What’s your favourite part about making websites? #

I love getting to that stage where you have systems in place and updates become really simple. I get a lot of satisfaction in refactoring, and trying to make things modular and reusable.

And the thing you struggle with the most? #

Getting over the blank page. Starting from nothing is always stressful.

Do you keep the same layout on all of your pages? or do you use different ones? #

Pretty much, yea. I use fluid spacing and type-sizing so the whole site is responsive and usable at any screen size without a single media query. I don’t have much interest in tackling all of those problems again for a different layout haha.

How confident are you with css? #

I think I’m pretty solid. CSS is becoming more and more capable and easy to use. Christ, we have variables (custom properties) and nested selectors these days. It’s not often I find myself banging my head against the wall anymore at any rate. Now if only I could keep my CSS a little more tidy…

Do you know how to correctly use `<dl>`? #

I’ve never needed it, but I’m glad to have learned about it here.

What is your favorite html element? #

The dialog element is really neat. It does so much for you too.

If you’re making a new web page from scratch, what is the first thing you do? #

I like to use Eleventy, so I’m not likely to be starting from scratch. If I had to though, I’d probably go remind myself what HTML boilerplate I’m supposed to be using these days.

Do you know javascript? #

Yes. I use it for desktop automation too, with Node.

How about php? #

I fear PHP.

Does your website have a theme that you stick to? #

For sure.

Are you more focused on content or design? #

Content. The reading experience is pretty good, so while I sometimes feel that my site is a little dull compared to some other personal sites, I’m happy with that.

Do you own a domain name? if not, would you ever want to? #

Absolutely. A few, actually.

What do you think of nostalgia-focused or “retro” websites? #

I think they’re fun and I like to see them.

Is your html valid? do you even check? #

Lord, I haven’t thought about that in a minute. I may have to fix a few things…

What are your opinion on buttons and banners? #

They’re fun. I’d like to make a dedicated page for them at some point.

What do you think of button walls in particular? #

I think they’re fun.

If you started over again, would you make something similar or completely different? #

I think it would be pretty similar, to be honest.

Are you envious of other people’s websites? #

All the time! I love the cool stuff people build onto their sites: music players, et cetera. I just have to remind myself that my site has different goals.

What text editor do you use? #

I use the woefully underrated Kate. For quick edits I use KWrite. In the terminal, I use Nano.

Why do you use that one? #

Kate is a lightweight native application with no electron bloat, and it has so may features. KWrite is also native, but it’s really pared down, which is what you want sometimes. And as for Nano, well I just don’t want to have to memorize esoteric commands to edit text.

Do you host your image files on your web server, or on another host? #

All images and typefaces are served locally. I’m careful to optimize images, and I don’t want my visitors to be tracked by Google via Google Fonts. I do use a PeerTube instance for video.

This might not be relevant to you, but what’s your opinion on the neocities vs. nekoweb debate? #

No idea. I host my own stuff.

How much server space would you estimate your main website takes up? #

At the time of writing, it’s 90.2 MiB, with 564 files and 247 directories. Nuts!

Do you keep local backups of your files? #

I develop my site locally, so there’s that. I also have a copy on my Gitea instance.

Do you prefer simple or highly visual websites? #

It really depends on the goals of the site! If it’s designed to be a visually engaging website that encourages exploration, it makes sense to have some visual complexity going on. On the other hand, if I’m there to read an article, I don’t want that to be hindered by the design.

Do you stick to certain colours? do you do that on purpose, or is it your subconscious? #

It varies from project to project.

Have you ever thought about quitting? why? #

No, at least where it concerns my personal projects. Client work isn’t as fun, so I think I’m going to be pretty choosy about what I work on for the foreseeable future (outside of my day-job) because I really have come to value my free time very highly.

Do you have many webmaster friends, or is it a solitary hobby? #

Not many, but one or two.

Do people in your real life know about your website? #

Yes. It’s got my name on it haha.

Do you update your website very often? how often is “very often”? #

I do; I have “status” and “now burning” sections on my site for micro-blogging and listing what incense sticks I’m burning. I wrote a wee utility to make it quick and easy to post these during the work-day, so updates usually happen from at least every other day to multiple times a day.

And the overall design, do you change that much? why or why not? #

No. I feel that I’ve met my design goals for my site, and getting the fluid type / spacing system and variable typefaces right took so. much. time. I have zero interest in doing all of that work again.

Is your website more you-focused, hobby-focused, or outside world-focused? #

It’s a little of everything. I really want my website to represent me as a whole human, so I try to make sure that there’s a good mix of creativity, life stuff, writing on hobbies and interests, et cetera.

Do you do web design professionally? #

Yes. I have a design firm that I operate with my business partner Davey, although we don’t do a lot with it at the minute. I also sometimes do web projects as a part of my role at my day job.

If not, would you like to? and if you’re comfortable answering, what do you do for work? #

My title doesn’t elucidate much, but my day job is a director-level role at a Chicago non-profit. It’s a small organization, so we all have a hand in operations, but I also do design work, process work, and a little automation. I do everything from design collateral for events, to leading digital infrastructure integration projects, and building processes and tools for our team. I know a lot of people would complain about doing so many things, but I really value variety and enjoy project work so it fits me pretty well.

Do you communicate with people by email very much? #

Yea, I often email with other incense-heads and I get occasional emails from people who read my blog. I enjoy it when people get in touch with questions and comments.

I try to avoid mainstream social media, but I am all over the fediverse.

How about instant messengers? do you use a mainstream one like discord or telegram? or something like matrix? do you avoid them? #

With great resentment I still have a Discord account that I rarely use. I use Matrix and Signal often, and I also have an XMPP account through the FSF that I have never once used haha. I stay signed in though, so if you have XMPP and want to get in touch, it would be a novelty to use it for once.

Do you listen to music while you work on websites? if so, what kinds of artists? #

Often! It depends on my mood, and my taste in music is hugely varied and slightly insane. It could be anything from Hindustani classical to deathcore, drum and bass, Russian ecclesiastical music, classical trombone concertos, black metal, or trip-hop. To throw some artists at the wall: Christian Lindberg, Ladytron, Mora Prokaza, Enei, Pandit Jasraj, Marie Keyrouz.

Do you keep everything you make on one website, or do you have more than one? #

Just the one right now. I eventually plan to make a “professional” website for all the corpo-speak that employers like to see when hiring.

On a similar note, do you keep to one topic on your site, or many? #

I write about many things, but I do try to keep incense at the fore, because it’s something that very few people write about—especially when it comes to making incense. It’s so hard to find information on incense-making and I want to do my part to keep the tradition alive.

Do you present your real self, or at least try? or do you construct a persona on purpose? #

Yes, with some caveats. I swear much more in the flesh. My philosophy is that I treat speech on my website as though I’m at a casual gathering with mixed company.

Have you ever made a good friend thanks to your website? #

Not really. Outside of the incense scene, I don’t really make many online friends.

Are you happy with the way html and css currently work? #

Mostly. I do wish I could get a bit more programmatic with CSS. They’re working on it, though.

What are practices that you think people should avoid? #

Ignoring accessibility: alt text, contrast ratios, et cetera. It’s so much easier now with semantic HTML, too, and the WCAG is published online for anyone to read.

What about under-utilised practices, or things you think people should do more? #

Beside accessibility, using containers to encapsulate elements so that they can be more easily positioned with CSS grids and flexbox. Also using the proper elements. For example my comment form, which I did not write, has a bunch of <p> tags as containers and doesn’t separate the buttons from the input fields in separate containers, making styling a nightmare.

Do you use a lot of semantic html? or are you guilty of generic structure? #

Absolutely. Why wouldn’t you?

Do you consider different browsers? #

For pro work, you have to. I once had a subcontractor complaining that a site I built wasn’t working only to find out that she was using a browser that hadn’t been updated in seven years. (We found out that this was Apple’s fault. After a point, they stop letting you upgrade your OS, and that means Safari too. What a nightmare.) You’ve got to decide where the cutoff is in order to know what features you can use. For personal stuff, I just target the most current version of Firefox. Usually, it’s Chrome playing fast and loose with web standards, so if you target Chrome it seems like there’s no guarantee that your site will work in Firefox, whereas the opposite usually isn’t true.

Speaking of, what’s your preferred browser? convince your readers why they should use it. #

Anything not using the Chromium engine, so basically Firefox and derivatives. Google uses their superior Chrome user numbers to justify making features outside of open web standards. This causes sites to break on non-Chromium browsers. This behavior is part of an ongoing pattern of EEE on Google’s part, and if it is allowed to continue, it risks making the web worse for everyone. I would encourage people to avoid Chrome, and any browser that uses its engine. If we don’t, Google will use the leverage to kill competition and screw us all over like it has done time and time again (XMPP and RSS are some examples).

And what os are you on? #

EndeavourOS, an Arch GNU/Linux derivative.

Do you have a strong opinion on that, or do you just happen to use it? #

Well, I strongly feel that GNU/Linux is better than proprietary options. EndeavourOS just fits my needs really well with its up-to-date packages, frequent updates, and flexibility.

Are your websites mobile-friendly? #

Of course!

What are your thoughts on autoplay? #

It’s for the best that it’s blocked by default, but I still wish I could get away with using it on one or two special pages.

What are your thoughts on webrings? are you in any? #

Big fan. I’m in two at the moment: Fediring, and Geekring.

Do you have any web shrines? what do you like to see in that sort of page? #

No, nothing like that. I like discovering them though.

Are your websites “cliche,” in your opinion? #

I hope not!

What is your ideal website? are you striving for that, or for something else? #

Real, fun, and ever-changing.

Are you an artist? do you draw or design your own assets? #

While I do graphic design, I’m not really an illustrator or anything like that—beyond the odd project for fun. So designer yes, artist no.

What are your favourite resource sites? #

I have an absolute ton of them on my /links page.

Is there a habit you just can’t get away from no matter how hard you try? #

Sloppy CSS. The cascade is tricky, but I think I’m improving.

What’s your biggest advice for a new webmaster? #

Take your time, and learn git and make a new branch for any significant and complicated work so that it’s easy to revert it if you make a mistake or get stuck.

Do you keep all your styling in css? or do you hard-code some? #

I use inline styles only as a last resort, usually for styling widgets that I have little control over such as the comment form.

What do you think of frameset layouts? #

It’s not the 90s any more.

How about table-based layouts? #

Again, we’re in 2026. There is no excuse for this haha.

I mean, when you look at eye-tracking studies, you see that the way people engage with websites is always changing. I think that, so long as you’re applying gestalt principles in your design, you’re probably doing an okay job no matter the layout.

Do you spend longer on the html or the css? #

The CSS, without question.

Have you ever made a page with no css? it’s useful for your thoughts. #

No, never!

Do you ever find yourself making layouts with nothing to put on them? or do you only make layouts when the need arises? #

Only when necessary.

Would you consider yourself a beginner? or advanced? somewhere in the middle? #

I wouldn’t go so far as to say advanced, but I think I know what I’m doing.

Do you have a habit of looking at the source code of websites you visit? #

Not often, as many sites have crazy obfuscated code these days. It’s not often that you find well formatted, human-readable source anymore. More often I find myself reading documentation or Stack Overflow.

How did you learn how to make websites? #

I began in what was either a digital graphics or multimedia class in school where we learned to make websites using Adobe Dreamweaver. In adulthood I wound up tripping and falling into a career that eventually led to me making a number of websites professionally. I started with Adobe Muse, actually winning Adobe’s Muse Site of the Day at one point. Once Adobe canned Muse, I realized I was going to have to get serious about learning HTML, CSS, and JavaScript, so I did.

Do you ever force elements to do things they’re not supposed to? #

I do my best to avoid hacks.

Thoughts on floating elements? #

Again I say: it’s not the 90s anymore.

When you’re sizing stuff, what do you use first? do you use px, em, %, or something else? #

I’m using my responsive spacing system, so it’s something like var(--space-l), which will resolve to something like clamp(2.5rem, 2.2183rem + 1.4085vw, 3rem). It makes things very easy and keeps everything nice and consistent.

Do you have a favourite font? #

I wouldn’t know how to begin to choose!

Would you run a website with another person? how would that work? #

Why not? If it was interesting.

Do you surf the web to find new personal websites very often? #

Yes, I really enjoy clicking through web-rings and buttons.

Do you bookmark other people’s websites? how would you feel knowing someone else bookmarked yours? #

Not often, no.

What do you want people to be most impressed with when they see your website? #

The fact that the layout uses no media queries.

Are you interested in technology outside of websites? do you collect? #

Yea, I love computers and FLOSS software. I do try to make good purchases that will last a long time, so I don’t have a ton of tech, but I’m certainly not short on gadgets.

How often and for how long are you online? #

I work on a computer, so most of the day.

When it comes to your website, who is your target audience? #

Mostly incense nerds and people who want to keep up with my life. It’s super easy to get an audience if you’re on the fediverse and write about tech, but there are already plenty of blogs like that out there.

Have you ever been interested in xhtml? #

Not especially. It seems like one of those things that just never really took off.

Do you program in general? have you ever written a program for use with or on your website, not counting simple javascript? #

Yea, I wrote Poaster in Ruby for some reason. I have also done desktop automation stuff with Node.

Speaking of programs that help you make websites, what do you think of static site generators (ssgs)? have you ever used one? #

Big fan of Eleventy. I love being able to just get straight to the content when I want to, and I love that my site is modular and simple to update.

Do you keep a hitcounter? why or why not? #

No, but I do use some privacy respecting FLOSS analytics tools. I like to see how many people are reading my posts and where they are from.

Do you frequent forums? which ones? #

I wouldn’t use the term frequent, but I do have a presence on some FLOSS forums, as well as Dogs on Acid, and Ouddict.

Do you write your page content directly into the editor, or do you prepare it elsewhere, like a text document or a word document? #

I often use Marknote. It’s new and a little rough around the edges, but the potential is huge and I already enjoy using it despite its sometimes very annoying bugs.

Do you think you appear cool to others? a more accurate answer now: do other people ever say you’re cool? #

I’ve been told that I write like a 50 year old academic, so, no haha. I also don’t know that adults call each other cool very often. Certainly not the cool ones anyway!

Are you embarrassed of your old work? have you ever deleted everything out of shame? #

Always and forever.

Would you close down your website if you couldn’t update it, or would you leave an archive? #

I think I’d like to leave it.

So you reveal a lot about yourself on your website? or are you more secretive? #

I try not to overshare too much, but I do keep it real, I think.

Are you willing to reveal who your best online friend is, and/or if they have a website? #

I will never tell.

And do you optimise the images on your website? #

Yes, with the utterly incredible Converseen.

We’re out of time! how do you feel after answering 100 questions? … other than exhausted. #

Ready for bed!

Building a Quiz System With Eleventy

2025-02-04T00:00:00Z

You might seen my recent toot about the fancy new “How Much of a Linux Nerd are You?” quiz on my website. Some time ago, I realized that I missed taking fun internet quizzes and decided to implement a quiz system on my own site that would allow me to easily make fun quizzes to share. Here’s how I built it with Eleventy.

The plan #

First, I had to decide what sort of quizzes I wanted to be able to make. Some quizzes are designed to score the quiz-taker in order to place them into a category at the end, like those fun Buzzfeed quizzes that used to be so popular. Other quizzes are designed to test the quiz-takers knowledge of a subject, with each question having a definite right answer. I wanted to be able to do both, and I wanted my quizzes to be fairly flexible.

I decided to arrange things so that the quiz-author can enter any number of questions, answers, and consequences. While any number of answers can be entered for a given question, only one answer can be selected at a time, and every question must be answered. Each answer is assigned a number of points by the quiz author: positive, negative, or zero, and consequences each have a certain points threshold after which they are eligible to appear.

A consequence is a result that appears in a modal when the quiz-taker clicks the “submit” button at the end. It shows text defined by the quiz author, an image if the author chooses to include one, and it contains a “Score Details” dropdown that shows the number of points scored on each question.

I decided that I didn’t want to use a global data file, not only because it isn’t terribly ergonomic, but also because it’s much simpler to take advantage of Eleventy’s tag/collection system when possible, and frankly, I hoped to avoid some of the faffing about I had to do when implementing image galleries.

Setting up the content directory #

As I was going to use markdown files to build my quizzes, I needed to set up a content directory, /content/quizzes/, and set some defaults in /content/quizzes/quizzes.11tydata.js to make sure that everything I put inside of it was automatically tagged as a quiz, and would use the correct layout.

export default {
	tags: ["quiz"],
	layout: "layouts/quizzes.njk",
};

By tagging these files as quizzes, a new collection containing all of my quizzes will be created, and I can add this collection to the filterTagList filter in my config file that allows me to easily omit everything that isn’t a blog post from post-lists on my site, but that’s out of scope for this article.

Quiz Structure #

YAML (or in fact any markup or programming language that respects whitespace) is no fun, but at least I won’t wind up with a gargantuan JavaScript data file like I have for my galleries. Here’s what /content/quizzes/my-quiz.md might look like:

---
title: ""
description: ""
date: 2025-02-04
imageURL: ""
imageAlt: ""
consequences:
 - title: ""
   points: 0
   spiel: ""
   image: ""
   imageAlt: ""
questions:
 - title: ""
   image: ""
   imageAlt: ""
   imageCaption: ""
   answers:
   - name: ""
     points: 0
---
This is a great quiz that I'm sure you'll have fun taking.

This results in a nice JavaScript object we can iterate through. In the body of the markdown document, beneath the front matter, is the text that can be injected via {{ content }}. You’ll see in a bit that this will go at the top of the quiz, beneath the title, which is injected with my post layout. This is so that it’s easy to use markdown to style this part of the content, include images, et cetera, without worrying about trying to get that working while including it in the YAML.

The quiz layout #

Alright! Now that we have the quiz structure nailed down, we can write /includes/layouts/quizzes.njk which will iterate through the data and spit out an HTML form for us. I’m using the loop index number as the question number, which I can also use to set the name attribute for each of the answer <input> elements related to a given question. By doing this, the browser knows that the answers beneath a question are all related and will only allow the quiz-taker to select one of them.

I’m going to add a link to our yet-to-be-written script here and set the form to call handleQuizSubmit() on submit (return false prevents the page from refreshing when the submit button is clicked). Don’t ask me why I put the script there precisely; as it isn’t called until the submit button is clicked, I suppose it could go just about anywhere.

The points threshold for each consequence is stored in the dataset data-points-threshold so that we can use these numbers in our JavaScript.

The answers are assigned an ID that looks like this: q[questionNumber]a[answerNumber]. Beyond using this to also populate the for property of their respective labels, you could use this to link to individual answers too.

---
layout: layouts/post.njk
structuredData: none
---
{{ content | safe }}
<section class="quiz">
	<form onsubmit="handleQuizSubmit(); return false">
		{% for question in questions %}
		{% set q = loop.index %}
		<div class="questionBox">
			<p class="quizQuestion">{{ q }}. {{ question.title }}</p>
			{% if question.image %}
			<figure>
				<a href="{{ question.image }}">
					<img src="{{ question.image }}" alt="{{ question.imageAlt }}">
				</a>
				{% if question.imageCaption %}
				<figcaption>{{ question.imageCaption }}</figcaption>
				{% endif %}
			</figure>
			{% endif %}
			<div class="answersBox">
				{% for answer in question.answers %}
				<div class="answerBox">
					<input class="answer" type="radio" value="{{ answer.points }}" id="q{{ q }}a{{ loop.index }}" name="{{ q }}" required>
					<label for="q{{ q }}a{{ loop.index }}">{{ answer.name }}</label>
				</div>
				{% endfor %}
			</div>
		</div>
		{% endfor %}
		<script src="/js/quiz.js"></script>
		<button>Submit</button>
	</form>
</section>

{% for consequence in consequences %}
<dialog class="consequence" data-points-threshold="{{ consequence.points }}">
	<h2>{{ consequence.title }}</h2>
  <p>{{ consequence.spiel }}</p>
  {% if consequence.image %}
  <img src="{{ consequence.image }}" alt="{{ consequence.imageAlt }}">
  {% endif %}
  <details>
		<summary>Score Details</summary>
		<p class="scoreDetails"></p>
	</details>
  <form method="dialog">
    <button>Thanks</button>
  </form>
</dialog>
{% endfor %}

All of the consequences are rendered as <dialog> elements that we can open as a modal later with our script. And look, I know people have opinions about JavaScript, but I really didn’t fancy the extra build time, bandwidth, and effort it would have taken to avoid fourty lines of simple JavaScript, and to be honest, I like JavaScript. I think it’s useful and fun to write, so there.

The quiz script #

As far as logic goes, in /js/quiz.js we first want to calculate the score, and get the data to populate the <details> elements in our consequence modals. This is handled by score(), which will return an object containing the total number of points scored and an array containing the points scored on each question. When we have that, we’ll go ahead and populateDetails() and finally use dishOutConsequences() to launch the freshly updated <dialog> as a modal via showModal().

const score = (answers) => {
	let total = 0;
	let scores = [];
	for (let i = 0; i < answers.length; i++) {
		const questionNumber = answers[i].name;
		if (answers[i].checked) {
			total += Number(answers[i].value);
			scores.push({
				questionNumber: questionNumber,
				points: answers[i].value,
			});
		}
	}
	return { totalPoints: total, scores: scores };
};

const dishOutConsequences = (consequences, points) => {
	for (let i = consequences.length - 1; i >= 0; i--) {
		if (points >= Number(consequences[i].dataset.pointsThreshold)) {
			consequences[i].showModal();
			return;
		}
	}
};

const populateDetails = (detailsElement, scores, total) => {
	detailsElement.innerHTML = `Total Score: ${total} points<br />`;
	for (let i = 0; i < scores.length; i++) {
		detailsElement.innerHTML += `<br />Question ${scores[i].questionNumber >= 10 ? scores[i].questionNumber : "0" + scores[i].questionNumber}: ${scores[i].points} points`;
	}
};

const handleQuizSubmit = () => {
	const answers = document.getElementsByClassName("answer");
	const consequences = document.getElementsByClassName("consequence");
	const details = document.getElementsByClassName("scoreDetails");
	const totalPoints = score(answers).totalPoints;
	const scoreDetails = score(answers).scores;
	for (let i = 0; i < details.length; i++) {
		populateDetails(details[i], scoreDetails, totalPoints);
	}
	dishOutConsequences(consequences, totalPoints);
};

And with that, our quiz ought to be operational! After this, I went ahead and listed my latest quiz on my index page, but that’s beyond the scope of this article. It took me some time to get around to finishing this, but as you can see, it wasn’t terribly difficult at all. I hope you enjoyed reading about how I built my quiz system. Please let me know if you decide to implement something similar!

Adding Image Galleries to My Website

2024-12-02T00:00:00Z

I’ve been meaning to add an image gallery feature to this website for ages, and I’m happy to finally announce that I’ve done it! If you’d like to see my very first image gallery in action, here’s a gallery of PopTart memes I’ve collected. If you’re a massive nerd and would like to read about how I implemented this feature on my Eleventy website, read on.

Note: this is a fast and loose description of the process. It should be helpful if you’re trying to do this yourself, but don’t expect to be able to copy and paste my implementation. See the repo to copy and paste my spaghetti.

Specifying new galleries #

First of all, I had to decide how new galleries would be specified so that Eleventy could work its magic. There are a few approaches here, such as utilizing template frontmatter, directories of images, or using a data file in my site’s _data directory. After weighing up the pros and cons, I decided to use the latter option, even though it’s not the most ergonomic. So I created _data/galleries.js, which looks like this^[1]:

export default [
	{
		title: "",
		description: "",
		synopsis: "",
		url: "",
		date: new Date(""),
		galleryImage: "",
		galleryImageAlt: "",
		pictures: [
			{
				title: "",
				filename: "",
				altText: "",
				thumbAltText: "",
				caption: "",
			},
		],
	},
];

Gallery index pagination #

Now that I know how I’ll go about specifying my galleries, I need to paginate the gallery index pages; the pages that feature thumbnails of each image in the gallery and allow the user to navigate to the images. To do this, I created content/galleries.njk:

---
pagination:
	data: galleries
	size: 1
 	alias: gallery
layout: layouts/base.njk
tags: gallery
eleventyComputed:
	title: "{{ gallery.title }}"
	permalink: "/gallery/{{ gallery.title | slugify }}/"
	description: "{{ gallery.description }}"
---
<h1>{{ gallery.title }}</h1>
<p>{{ gallery.description }}</p>
<section>
	{% for picture in gallery.pictures %}
	<a href="/gallery/{{ gallery.title | slugify }}/{{ picture.filename | slugify }}/">
		<div>
			<img alt="{{ gallery.thumbAltText }}" class="gallery-image" src="{{ gallery.url }}{{ picture.filename }}">
		</div>
	</a>
	{% endfor %}
</section>

By ensuring that each gallery index page is tagged “gallery,” they will automatically be grouped into a new collection by that name, which is important so that I can filter galleries out from post lists and other things throughout my site.

Generating image pages #

I considered using a lightbox / modal sort of arrangement for viewing images, but I decided against it as it can be tricky to get accessibility right for these patterns, and I wanted to avoid using JavaScript if possible. What I chose to do instead was to create a page for each image, which would feature buttons to navigate to the next / previous image, and to return to the gallery. The first step was to create a collection containing all gallery images in my Eleventy config file:

// Collections
	eleventyConfig.addCollection("galleryImages", (collection) => {
		const galleries = collection.getAll()[0].data.galleries;
		let galleryImages = [];

		galleries.forEach((gallery) => {
			gallery.pictures.forEach((picture, i, arr) => {
				picture.containingGallery = `${gallery.title}`;
				picture.baseUrl = `${gallery.url}`;
				i ? (picture.previousImage = arr[i - 1].filename) : null;
				i + 1 != arr.length ? (picture.nextImage = arr[i + 1].filename) : null;
				galleryImages.push(picture);
			});
		});

You may notice that I did a little jiggery-pokery in that callback function to provide information about each image that isn’t included in _data/galleries.js because it would have been a pain to include or would have unecessarily inflated the tile size, specifically: the filenames of images before and after the current image (should they exist), and the URL of the gallery that the image belongs to. We can use this information to have our image pages generated in the same directory as their parent gallery index, and to generate next / previous buttons to help the user navigate through the gallery. This information is added to the galleryImages collection object in memory so that we can use it when we paginate the image pages using content/galleryImage.njk:

---
pagination:
  data: collections.galleryImages
  size: 1
  alias: picture
layout: layouts/base.njk
eleventyComputed:
  title: "Image: {{ picture.title }}"
	permalink: "/gallery/{{ picture.containingGallery | slugify }}/{{ picture.filename | slugify }}/"
	description: "{{ picture.title }} from gallery: {{ picture.containingGallery}}"
---
<article>
	<h1>{{ picture.title }}</h1>
	<div>
		{% if picture.previousImage %}
		<a href="../{{ picture.previousImage | slugify }}">
			<button type="button">Previous</button>
		</a>
		{% endif %}
		<a href="/gallery/{{ picture.containingGallery | slugify }}/">
			<button type="button">Gallery</button>
		</a>
		{% if picture.nextImage %}
		<a href="../{{ picture.nextImage | slugify }}">
			<button type="button">Next</button>
		</a>
		{% endif %}
	</div>
	<figure>
		<a href="{{ picture.baseUrl }}/{{ picture.filename }}">
			<img src="{{ picture.baseUrl }}/{{ picture.filename }}" alt="{{ picture.altText }}">
		</a>
		{% if picture.caption %}
		<figcaption>
			{{ picture.caption }}
		</figcaption>
		{% endif %}
	</figure>
</article>

Et voilà; we have galleries! But before we can call this project done, it would be nice to have a page that lists all galleries on the site for the benefit of visitors. For this, I created /content/galleries/index.njk:

---
layout: layouts/base.njk
eleventyNavigation:
  key: Pics
  order: 4
---
<h1>Image Galleries</h1>
<p>
Some pictures I thought would be worth posting.
</p>
<section>
<div>
	{% for gallery in galleries %}
	<article>
		<a href="../gallery/{{ gallery.title | slugify }}" class="postlist-link">
			<div>
				<img {% if gallery.galleryImage %} src="{{ gallery.url }}{{ gallery.galleryImage }}" alt="{{ gallery.galleryImageAlt }}" {% else %} src="{{ metadata.defaultPostImageURL }}" alt="{{ metadata.defaultPostImageAlt }}"{% endif %}>
			</div>
		</a>
		<div>
			<a href="../gallery/{{ gallery.title | slugify }}" class="postlist-link">
				<h3>
					{{ gallery.title }}
				</h3>
			</a>
			<time datetime="{{ gallery.date | htmlDateString}}">{{ gallery.date | readableDate("LLLL yyyy") }}</time>
			<p>{{ gallery.synopsis | truncate(105) | safe }}</p>
		</div>
	</article>
	{% endfor %}
</div>
</section>

Note that readableDate() and htmlDateString are custom filters that came with the Eleventy Base Blog template that I based my website on. They require Luxon:

eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
		// Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
		return DateTime.fromJSDate(dateObj, { zone: zone || "utc" }).toFormat(
			format || "dd LLLL yyyy",
		);
	});

	eleventyConfig.addFilter("htmlDateString", (dateObj) => {
		// dateObj input: https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string
		return DateTime.fromJSDate(dateObj, { zone: "utc" }).toFormat("yyyy-LL-dd");
	});

You may be thinking that this all seems a convoluted, and I agree! If you know of a simpler way to accomplish this functionality, do feel free to let me know, but for now, I’m just happy that I finally have the ability to add image galleries to this website.

Thanks to those who answered my cry for help! ↩︎

A New Audio Web Component; Ballin’

2024-10-23T00:00:00Z

Update 2025-11-21: I actually got rid of of all web components on this site because they were heavy, unnecessary, and didn’t render in folks’ RSS readers. Currently, I’m using plain old HTML for this, rendered by Eleventy from a convenient shortcode.

Fresh from my text editor comes a neat little web component that packages the native HTML <audio> tag inside a <figure> with a song name, title, and a graphic — an album cover perhaps. Here’s what it looks like, featuring a very catchy drum and bass tune, “Ballin’,” by Vibe Chemistry:

Ballin’
Vibe Chemistry

It’s pretty basic for now; it doesn’t even truncate an over-long title, but it’ll do the job for the moment. My hope is to use this to play short song snippets so that I can talk about and review them. I think this falls pretty squarely under “fair use” in the United States, and there’s no admin for litigious record companies to complain to but myself anyway; coincidentally, direct all copyright complaints to me to have any decent snippets of your IP replaced with samples of significantly lower quality.