Zach’s ugly mug (his face)

Zach Leatherman

Queue Code—“Live” Code without Errors

March 08, 2021 11ty

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 😅).

Architecture

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!

Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He created the Eleventy static site generator and is still fixated on web fonts. 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
Build IT Better: Architecture feat. Jason Lengstorf and Zach Leatherman
Next
Unicode Range Interchange

9 Retweets

Mark Hernandez 💖💜💙 (they/them)James NashPaul Chin Jr.Johannes AmmonMax BöckTodd MoreyMike AparicioRoel NieskensRussell Heimlich
36 Likes
Yerzhan Utelbayevfabian wohlgemuthZach AttackEric WallaceLee FisherMarco HengstenbergMark Hernandez 💖💜💙 (they/them)Stephanie RewisFrank “Mottokrosh” Redingmithu ( Will work for 🍪cookies🍪 )TristanBrett EvansGaël PoupardEric WallacePaul Chin Jr.Stefan Kratzето лёхаErickAndy BellMax BöckNicolas HoizeybbqTodd MoreyNick NisiSøren Birkemeyer 🦊Derek McConnellashur.cab/rera 🚕Ethan MarcotteMike Apariciofabian wohlgemuthStephanie EcklesRiccardo ErraAjit PanigrahiSpruce EmmanuelPrana AdiwiraRob Dodson
6 Replies
  1. Zach Leatherman

    Zach Leatherman @zachleat #

    Thanks Josh!

  2. Josh Collinsworth

    Josh Collinsworth @jjcollinsworth #

    This is neat!

  3. Zach Leatherman

    Zach Leatherman @zachleat #

    Thanks Frank!

  4. Brett

    Brett @BrettMN #

    This looks awesome Frank!

  5. Zach Leatherman

    Zach Leatherman @zachleat #

    Thanks Roel! 🙌🏻

  6. Roel Nieskens

    Roel Nieskens @PixelAmbacht #

    This is so brilliant it's brilliant!!

    8 Mentions
    1. Bramus! https://www.bram.us/author/bramus/ #

      Great talk by Zach Leatherman as recorded at Smashing Conf Austin 2020: The talk delves into Single Page Applications, Multi Page Applications, modern JavaScript Frameworks, and what I believe to be a better future for web development. /me nods along for the entirety of this t… Truncated

    2. websitedesign-usa.com #

    3. pixallus.com #

    4. wpguynews.com #

    5. ModeratorGT https://gotutoral.com/author/admin/ #

      Over the weekend I was finishing up some polish on the slides of my most recent conference talk when my daughter walked in to my office. We decided to record a short video of that interaction and put it up on Twitter. Needless to say, the tweet—uh—went much further than I expecte… Truncated

    6. 711web.com #

    7. dztechno.com #

    8. Ross Wintle

      Ross Wintle @magicroundabout #

      More from @changelog: @zachleat’s Queue Code is a…hmm…coding simulator? Point it at a Gist and then just type! Great for presentations, screen sharing, or showing off! zachleat.com/web/queue-code/ queuecode.zachleat.dev https://t.co/GrPLMnX79L

    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)