The Self-Rendering Eval Shirt

A few months ago I was looking for a way to say “thanks” to our users who came to our meetups, tried out our new products, or took a demo from our team.

A free t-shirt fit the bill, but free t-shirts are everywhere. With a few exceptions, most are pretty boring: usually just a logo on a t-shirt.

Instead, I wanted to challenge ourselves to create a design our community would be genuinely excited to wear.

I also wanted our shirt to capture the spirit of what we do at StackBlitz—providing a web-based IDE that lets developers build for the web, anywhere.

The idea hit me as I was waiting to board a flight to Hawaii with my in-laws: a t-shirt design that incorporated the StackBlitz lightning bolt constructed with actually valid JavaScript code. And not only would the code be valid, it would be the source code of the image itself.

With 5 hours of uninterrupted plane time ahead of me, I pulled out my laptop and popped open a vite.new project. By the time the wheels touched the ground, I had a working design.

And a few months later, here’s the final result:

Getting this ready for prime time included a number of wild challenges: technically, how can you even make this type of program/design? And once we had it, how can you get it printed (without paying an arm and a leg) in full fidelity with such small font sizes?

In the rest of this post I’m going to go into detail how we pulled it off, but first…

How can you get one?!

Of course, the question you’re almost certainly asking 😃 Here are the three ways you can currently get your own StackBlitz Eval t-shirt:

1. Join the meetup we’re hosting this Thursday, Feb 22nd at Figma HQ (space limited)!
2. If you work at a company with more than a few hundred employees or a design system team, we’d love to chat! Just fill out this form and take a demo call with our team and we’ll send you a free t-shirt 👕
3. If you don’t already have one, sign up for a StackBlitz Teams plan (starting at $29/month)!

So how did we make it? That’s one heck of a story…

Here’s where things get inception-y

First of all, for (perhaps obvious) recursive reasons, it’s not possible for a statically rendered image to display the exact source code of that image itself.

If you did try such a thing, you’d end up with an infinite loop that slugged through every bit of memory and storage your device has until it crashes completely. Every time you embed the source code, it would change the image code, which then would trigger a re-render, which would then change the image’s code…

But what about SVGs? Those things can accept plaintext as a subset of HTML. But we still run into the same problem. Each code addition changes the resulting image, leaving us with another infinite loop but this time with SVG markup.

How do you solve an impossible problem? Change the requirements to be possible.

So image binaries/markup alone cannot defeat the infinite loop problem. What if instead, we wrote a program that when evaluated, generates the image dynamically? The code displayed within the image is the source code of that program.

This means that the program’s code would have to be identical to the outputted code of the image. Or, in programming terms: what if we wrote a new type of quine?

Theoretically, that could work. But first, I needed a design as that will set the requirements of the program’s size and shape. StackBlitz’s logo is a lightning bolt. This is great, because it’s one contiguous object which means it should be easier to draw ASCII-art style.

I started by putting the StackBlitz bolt on the webpage, and then zero-filling by hand all the values to get a sense of how the image should look. This was a process of a lot of tweaking, figuring out how many lines of code top to bottom, how many characters for each line, and getting the spacing just right so it mapped perfectly onto the real lightning bolt.

After all my tweaks, I ended up with a very obvious lightning bolt. However, from a design/UX point of view, I didn’t think that it would be clear this is real, runnable code. To try and emphasize this, I add the big eval() statement around it — a function every JavaScript dev is familiar with. This was purely a design choice and isn’t technically needed as the code will be an IIFE.

Looks amazing! So I now have the ASCII-ified logo design. But, it’s not actually showing real code in the bolt. Now I need to make the program that’s actually going to output and render the program itself. Easy enough, right? Just call .toString() on the function?

And this is where things got really hard… and tedious! 🥵

To start, I wrote an IIFE that simply took the SVG layout, called .toString on itself, and inserted every character into the bolt. There were two problems with this:

1. This was way too many characters, I’d need to minify the code.
2. For someone to be able to copy and paste this code, every single line has to be valid JavaScript. And nearly everly line of code in the lightning bolt was not a valid statement after it got rendered.

I’ll spare you the tedious details of my 5 hours of trial and error. But let’s just say, it was like playing a murderous game of Jenga. You get one line to be valid, only to mess up the one 4 lines down, rinse and repeat…

One nice trick for solving multi-line was using modern ES6 template literals, which is how I was able to load the correct Google Font in there (technically you could do this for every line of code which would’ve made it far easier, but what’s the fun in that?!)

Finally… voilà!

An SVG composed of actual code that you can copy and paste directly into any Javascript console and it outputs itself. Need convincing? Try it for yourself over at stackblitz.com/eval or in the embedded editor below:

Several weeks later, wearing the design on an actual t-shirt, I like to think the code is actually rendering itself onto the fabric. It’s a piece of digital graffiti that can be copied infinitely in both the physical and digital mediums.

Getting the small font size of the code printed in full fidelity was a challenge most vendors couldn’t achieve. Fortunately, our merchandising partners at Canary were able to work some magic and brought my idea to life, and we’re excited to share this with all of you! Developer cred aside, these are the softest shirts I’ve ever worn and arrive in packaging (created by Corey Thomas) that explain the story behind the design.

Again… how can you get one?!

It’s pretty cool, right! Here are the ways you can currently get your own StackBlitz Eval t-shirt:

1. If you work at a company with more than a few hundred employees or a design system team, we’d love to chat! Just fill out this form and take a demo call with our team and we’ll send you a free t-shirt 👕
2. If you don’t already have one, sign up for a StackBlitz Teams plan (starting at $29/month)!

I hope you’re as excited to share this with your friends and coworkers as I am. I can’t wait to for the selfies to start popping up on my timeline 🤳