Zach’s ugly mug (his face)

Zach Leatherman

Rainglow: a demo of Eleventy Serverless

July 16, 2021 #3 Popular

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


Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He’s currently fixated on web fonts and static site generators. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

Previous
Eleventy Serverless, a talk video from The Eleventy Meetup
Next
Inaugural Eleventy Meetup: Hello World (a talk about Eleventy Serverless)

5 Retweets

NorthStack®Serverless BotJess Peck 🐍👾✨Fran SwanEleventy
27 Likes
zshnKristofer KoishigawaPrakash 🔆AlphaGeekZenJake Dohmdavid metcalfJoe LamymanPatrick HaugwachiraAnders Birkmose 🇩🇰🇪🇺Mike Aparicio🌸🌕⭐🌕🌸TembokTanner DolbyJess Peck 🐍👾✨Bryce WrayChristopher AdamsFran SwanMark BuskbjergEleventyMatthias WestonEduardo UribePhilipp DormannStephanie EcklesBORING🕳PROTOCOLEric Wallace
2 Replies
  1. Zach Leatherman

    Zach Leatherman @zachleat #

    👀

  2. Fran Swan

    Fran Swan @FranTiberious #

    👀

    Webmentions