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


Zach’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like IndieWeb Avatar for https://jamstackconf.com/Jamstack Conf,btconf’s AvatarBeyond Tellerrand, IndieWeb Avatar for https://smashingconf.com/Smashing Conference,CSSConf’s AvatarCSSConf, and IndieWeb Avatar for https://www.whitehouse.govThe White House. He is an emeritus of IndieWeb Avatar for https://www.filamentgroup.comFilament Group, nejsconf’s AvatarNEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. 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
      Social Card Image Preview

      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)