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.



< Newer
Building an Automated Screenshot Service on Netlify in ~140 Lines of Code
Older >
Eleventy Serverless, a talk video from The Eleventy Meetup

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/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 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

5 Reposts

EleventyTon トンThomas Michael SemmlerIndieWeb Avatar for https://coduza.comIndieWeb Avatar for https://tympanus.net

17 Likes

Eduardo UribeCAHO badMiguel PalaciosAbubaker SaeedGaël Poupard☯Evil Jim O'DonnellTristan GibbsPhil HawksworthTanner DolbyTon トンEleventycoskuntekinBrian Louis RamirezJosé BreijoAnders Birkmose 🇩🇰🇪🇺Steve LeeGuillaume Dumoulin
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)