Zach’s ugly mug (his face) Zach Leatherman

Rainglow: a demo of Eleventy Serverless

July 16, 2021

After a stream with Ben Myers a few weeks back in which we built a color contrast checker using Eleventy Serverless (and to prepare for an upcoming talk at the Eleventy Meetup), I wanted another crack at the use case: to build a site with individually addressable URLs for every color. It’s an awesome demo—a huge sample space that’s not feasible for build-time generation. Even if you limited the space to hex color formats only (without transparency), that’d be 16 million colors and 16 million pages.

…there are 24 bits used to specify a web color within the sRGB gamut, and 16,777,216 colors that may be so specified.—Web colors, Wikipedia

Eleventy Serverless is well suited for this use case, it can accept wildcard slugs via the URL and generates pages based on that input at run-time instead of build time:

---
permalink:
  serverless: "/:color/"
---

Without further ado, here’s where the project (code named Rainglow) landed:

A screenshot of rainglow.zachleat.dev

Implementation



< Newer
Eleventy Serverless, a talk video from The Eleventy Meetup
Older >
Inaugural Eleventy Meetup: Hello World (a talk about Eleventy Serverless)

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

5 Reposts

EleventyFran SwanJess Peck 🐍👾✨Serverless BotNorthStack®

27 Likes

zshnKristofer KoishigawaAlphaGeekPrakash 🔆ZenJake Dohmdavid metcalfJoe LamymanPatrick HaugAnders Birkmose 🇩🇰🇪🇺wachiraMike Aparicio🌸🌕⭐🌕🌸Tanner DolbyTembokJess Peck 🐍👾✨Bryce WrayChristopher AdamsFran SwanMark BuskbjergEleventyEduardo UribeMatthias WestonPhilipp DormannStephanie EcklesBORING🕳PROTOCOLEric Wallace
2 Comments
  1. Fran Swan

    @FranTiberious

    👀

  2. Zach Leatherman

    @zachleat

    👀

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)