Zach’s ugly mug (his face)

Zach Leatherman

Uniclode: yet another demo of Eleventy Serverless

July 21, 2021

Here we find ourselves again, with yet another demo of Eleventy Serverless. You may already be familiar with Rainglow, first showcased at the Eleventy Meetup. Uniclode shared that debut.

Uniclode is a zero-clientside JavaScript application that lets the end user select individual characters to generate a unicode-range value that can be used in font subsetting.

A screenshot of uniclode.zachleat.dev

On first page render, each individual character is a hyperlink containing a new unicode-range set containing the current unicode-range of characters with the addition of itself.

When the links are clicked and the page is re-rendered, all of the link href attributes are recalculated. If a character is already present in the unicode-range, the hyperlink will contain a new set that has it removed. If a character is not yet in the unicode-range, the hyperlink will add it.

This is an interesting use case for Eleventy Serverless, in that it maintains state in the URL and re-renders the template based on that state. One might argue that this is a state machine, but I will not be pressured into assuming that role.

This demo shows that multiple URL paths can be assigned to a single serverless template, e.g.:

---
permalink:
  serverless: ["/", "/:chars/"]
---

This demo also makes use of On-demand Builders. That means that once a template is generated for a specific unicode-range, it will serve that cached page instead of re-rendering. This saves on both Netlify Functions quotas and run-time performance.

While this is a fully-functioning demo, I would consider it to be a demo and not a finished product. For this use case specifically, full page refreshes to select a character in a list is not the best-case UX. What this does show is that Eleventy Serverless allows a new class of projects to be built with a progressive enhancement friendly baseline that previously weren’t possible with static build-time templates alone.


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
Building an Automated Screenshot Service on Netlify in ~140 Lines of Code
Next
Eleventy Serverless, a talk video from The Eleventy Meetup

3 Retweets

Thomas Michael SemmlerTon トンEleventy
17 Likes
Eduardo UribeCAHO badMiguel PalaciosAbubaker SaeedGaël Poupard☯Evil Jim O'DonnellTristan GibbsPhil HawksworthTanner DolbyTon トンEleventycoskuntekinBrian Louis RamirezJosé BreijoAnders Birkmose 🇩🇰🇪🇺Steve LeeGuillaume Dumoulin
3 Mentions
  1. admin https://h4host.com/index.php/author/admin/ #

    Website of the Week: Dpt. Innovative like its studio, this website shines with playful details and exciting interactions. Our pick this week. Get inspired Building a breadcrumbs component A foundational overview of how to build a responsive and accessible breadcrumbs componen… Truncated

  2. tympanus.net #

  3. Website of the Week: Dpt. Innovative like its studio, this website shines with playful details and exciting interactions. Our pick this week. Get inspired Building a breadcrumbs component A foundational overview of how to build a responsive and accessible breadcrumbs compone… Truncated

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)