Zach’s ugly mug (his face) Zach Leatherman

Queue Code—“Live” Code without Errors

March 08, 2021

I’ll be frank. (Hi Frank.) I don’t enjoy live coding. It doesn’t matter if it’s in front of two people or two hundred people. It fills me with unbridled anxiety.

I say this as someone who has spent over ten years doing technical public speaking. When I started doing talks, I had a lot of the same emotions about public speaking. Without doubt, live coding is something that I could invest time into and practice and improve—but right now I’m in the “I’m Terrible—Don’t Watch Me” stage of personal growth.

So like any naïve programmer faced with a problem, I decided the best way to fix it was to automate it. In This Web Site is a Tech Talk I built an entire slide deck project to create the illusion of live coding without having to write any code live.

My daughter used this to great effect in a tweet.

Now You Try

I decided to package some of this code up and put it on the web to make it easier to use. I’m calling it Queue Code (part Cue Cards, part queued pre-typed Source code 😅).


The source code for Queue Code is available on GitHub.

This is hosted on Netlify but arguably not very Jamstack-ish? It’s a gray area. The entire site runs through a Netlify Function.

When you visit the site, it makes a runtime request to the target url, either determined by a query parameter or pointing to the default GitHub gist I defined.

It then uses the Eleventy Syntax Highlighter to syntax highlight the code. It uses a yet-to-be-documented Character Wrap feature of the Eleventy Syntax Highlighter that will wrap every individual character of syntax highlighted code in an element that I can progressively show and hide based on arbitrary keyboard input.

The Character Wrap feature used JSDOM to achieve the wrapping behavior but I recently switched it to use linkedom for a much needed speed boost! Honestly I don’t think Queue Code would have made it to the finish line without this change. I did place an upper limit on the size of the documents it can handle. There are time limits (~10s) on how long requests in a serverless function can run. If the document is too large, it just returns the syntax highlighted version instead (without character wrapping).

You can use this for presentations (like me). You could use this for screencasts or recording video training materials. Hell, you could even use it for job interviews (probably don’t do this). But it wouldn’t hurt to have a fizzbuzz gist in your back pocket just in case 😅

More Features

You can read about the different query parameter controlled features on the default gist. But this is just a small subset of the features that I developed for This Web Site is a Tech Talk. I may add more if y’all really like this. You can browse through my slides to see what kind of stuff is already ready to port over, for example: additions inside of boilerplate code, “fake” deletes, multiple cursors, live browser preview, fake terminal output.

Enjoy it y’all—and cc me with any “live” coding videos you put up!

< Newer
Build IT Better: Architecture feat. Jason Lengstorf and Zach Leatherman
Older >
Unicode Range Interchange

Zach Leatherman IndieWeb Avatar for a builder for the web 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 81 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 »


Russell HeimlichRoel NieskensMike AparicioTodd MoreyMax BöckJohannes AmmonPaul Chin Jr.James NashRoss WintleMark Hernandez 💖💜💙 (they/them)IndieWeb Avatar for https://www.reddit.comIndieWeb Avatar for https://711web.comIndieWeb Avatar for


Yerzhan Utelbayevfabian wohlgemuthZach AttackEric WallaceLee FisherMarco HengstenbergMark Hernandez 💖💜💙 (they/them)Stephanie RewisFrank “Mottokrosh” Redingmithu ( Will work for 🍪cookies🍪 )TristanGaël PoupardBrett EvansEric WallacePaul Chin Jr.Stefan Kratzето лёхаAndy BellErickMax BöckNicolas HoizeybbqTodd MoreyNick NisiSøren Birkemeyer 🦊Derek 🚕Mike AparicioEthan Marcottefabian wohlgemuthStephanie EcklesRiccardo ErraAjit PanigrahiSpruce EmmanuelPrana AdiwiraRob Dodson
  1. Roel Nieskens


    This is so brilliant it's brilliant!!

  2. Zach Leatherman


    Thanks Roel! 🙌🏻

  3. Brett


    This looks awesome Frank!

  4. Zach Leatherman


    Thanks Frank!

  5. Josh Collinsworth


    This is neat!

  6. Zach Leatherman


    Thanks Josh!

Shamelessly plug your related post

These are webmentions via the IndieWeb and

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)