JavaScript Haikus: My Adventures in Tiny Coding

Rate this content
Bookmark

Discover the art of crafting extremely small JavaScript programs. In this talk you’ll learn principles and techniques behind crafting compact yet powerful scripts that are shorter than this description! Dive into the captivating world of minimalist coding, where we use these scripts to conjure art, games, tools, and a myriad of intriguing experiments.

27 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Talk is about writing super tiny JavaScript programs, known as tiny code. It explores the concept of code golf and the use of a live editor for instant feedback. The Talk discusses various ways to share tiny code, including Twitter.net. It also covers creating graphics, games, and sound in a small space. The speaker highlights inspiring tweets and showcases examples of tiny code, including asemic writing. The future of tiny code includes new techniques, better browser support, and AI-assisted programming.

Available in Español

1. Introduction to Tiny Code

Short description:

Welcome to JavaScript HiCues. A talk all about my adventures in writing super tiny JavaScript programs. Today we're going to be focused on these super tiny tweet sized programs. Let's talk about tiny code. Shakespeare said, Brevity is the soul of wit. And that's kind of what tiny code is. But for code instead of the language, there's a lot of different ways to describe tiny code. Code golf is kind of the heart of tiny coding and it's about using programming tricks to save space. Javascript is great for this kind of thing because you can use a live editor. It's a web based tool where you can type in code and see it happen and execute right way in real time. It's got instantaneous feedback and it's a very visual way of programming.

Hi, everyone. Welcome to JavaScript HiCues. A talk all about my adventures in writing super tiny JavaScript programs.

First, a little about myself. My name's Frank Forrest. I have a bachelor's in computer science and I have over 20 years working in the video game industry all across the United States, some games that maybe you've played right now, I'm focused on indie game dev and creating generative art. Here are some of the games I made all with JavaScript. And I also do generative art, which, again, is made with JavaScript.

But today we're going to be focused on these super tiny tweet sized programs. I made over a thousand of them. And I want to share my secrets with you today. Let's talk about tiny code. So what is tiny code? Shakespeare said, Brevity is the soul of wit. And that's kind of what tiny code is. But for code instead of the language, there's a lot of different ways to describe tiny code. You can call it size coding, code golf, or just minifying. But ultimately, the goal is to create cool art, music or other types of effects. And create it with very small, minimal amount of code while you're having fun.

Now this all started with the demo scene in the early 80s. Maybe you've heard of it. It's kind of a computer arts subculture where people make demos that are composed of graphics and music. And they often run on older computers. They can be anywhere from 64 kilobytes down to even below 256 bytes. But those are using bytecode, so they're starting to slowly embrace languages like Javascript. Code golf is kind of the heart of tiny coding and it's about using programming tricks to save space. So for example, you'll squish your code down by removing whitespace, making variables single letters. Not using ifs and just not using functions and kind of fighting for every single byte you could possibly get to squeeze everything down. Javascript is great for this kind of thing because you can use a live editor. It's a web based tool where you can type in code and see it happen and execute right way in real time. It's got instantaneous feedback and it's a very visual way of programming.

2. Sharing Tiny Code on Twitter

Short description:

Using a live editor is great for capturing gifs and images, debugging, and iterating code. There are multiple ways to share tiny code, such as submitting it to a demo party or using websites like Shader Toy or Twitter.net. Twitter.net is an open-source platform for sharing 140-character JavaScript demos. It provides a default code template and automatic setup for animation. Minifying the code and making optimizations can significantly reduce its size. Twitter can also be run standalone with minimal code. It allows for creative remixes and the use of astral Unicode characters to store more bytes in a single tweet.

So I really love using a live editor for this kind of thing. You can even capture gifs and images with it and has some tools to help debug and save and load your code to make it easy to iterate with. There's a couple different ways you can share tiny code.

You can submit it to a demo party. Are there also websites that you can share your code on such as Shader Toy or Twitter.net, which we're going to be talking about today? What is Twitter? Twitter.net is a place where you can share 140-character JavaScript demos. It was created in 2016 and currently has over 20,000 tweets. The website itself is open source. And we're working on a new beta version that has some advanced features that I'll also be showing today.

So the basics of Twitter is when you start a new tweet, you'll be presented with this default bit of code that draws nine lines on the screen, it has them moving back and forth. Here's the code for that. It also will automatically set up a canvas and a loop for you so that the animation is really easy to get working. There are a couple of functions that are set up automatically for sine cosine tangent and to get an RGBA color. So for example, if you want to minify the default twitter program, you start out with the one on the left then you start making optimizations and minifications by removing the comments and squishing it down. Then you can make it even smaller by making some concessions, which change the output a tiny bit, but not in a very noticeable way. Like for example, changing the gap between those rectangles from 100 to 99. That saves a whole byte of space, and saving those bytes really adds up.

Twitter can also be run standalone. So if you wanted to make, say, an HTML file that is able to execute a tweet, it would look something like this. The tweet code is just that little bit in the center there. Everything else is setting up the Twitter interface in a canvas. Just a really minimal amount of code necessary to run one of these. It's pretty much banal JavaScript. We've done all kinds of fun remixes of the default tweet. Here are some of my favorite community remixes. I've also done a couple myself, all using the same kind of concept and exploring what we can do with just those nine vertical lines.

Something you might want to be aware of when using Twitter is that Twitter uses 140 characters, and each one of those characters can hold multiple bytes. We found a way to store two bytes in each one of these Unicode characters, and with the decoder also included, we're able to fit up to 194 bytes in a single tweet. You can imagine the way that works is you have these astral Unicode characters where they hold four bytes, but two of the bytes can be whatever you want. So the way that uncompression works is it calls escape on the Unicode character, removes the unnecessary stuff, then unescapes it and evaluates what's leftover. And it's really allowed us to push the limit of what's possible in a tweet.

3. Creating Tiny Graphics, Games, and Sound

Short description:

You can use a similar technique to pack image data. Most of what we'll be doing is using the 2d canvas API to draw geometric shapes, text and emojis. Random numbers are really key to this whole kind of art creation. You can even make tiny games that fit in this space. If you wanted to make Flappy Bird, fit in 244 bytes of pure HTML, it would look something like this. You can do tiny sound in that bit of space as well. On Twitter, there's a BiteBeat Music as possible. You can even use speech synthesis to create voices which have the ability to tweak pitch and volume too.

You can use a similar technique to pack image data. And I've experimented with that a little bit to create the Mona Duitza, a Mona Lisa fit in a tweet, and even a self-portrait and all kinds of, um, old school graphics, bitmap art. It's pretty fun to experiment with tiny graphics.

Most of what we'll be doing is using the 2d canvas API to draw geometric shapes, text and emojis. We can set the color in alpha and use features like shadow and shadow blur to do special effects. It's even possible to draw one pixel at a time to create super high definition raster graphics. So for example, the kind of functions we'll use are like fill rect, arc, setting fill style, drawing lines, that type of thing, and nearly everything is done using these very small set of functions.

There are other options also you can use for graphics such as HTML, CSS has some neat things you can do, and even making SVGs , and I managed to plot one of my tweets that uses an SVG. It was kind of a fun experiment. Random numbers are really key to this whole kind of art creation, and there is a math random, of course, which you can use to get random numbers between zero and one. But sometimes you need something like a seated random number, and you can accomplish that with like, doing sine of a value squared is a simple way to get a type of random result. And there's all different types of things you can do to get random-ish numbers, like using the mod operator, and you can even create a kind of fractal noise, Perlin noise type of effect with this, too. There are so many different types of algorithms that are possible in this space. It's kind of incredible. Really anything is possible. And that's what I'm going to be showing you today.

You can even make tiny games that fit in this space. I've experimented with that a bit, and I've made quite a variety of games, though getting input does take a bit of space. You can use like an onclick event. It's your smallest option to get mouse input. Maybe something like onkeydown to get keyboard input. Or it's possible to even get gamepad input within a pretty small space to create these super tiny games and interactive experiences. So for example, if you wanted to make Flappy Bird, fit in 244 bytes of pure HTML, it would look something like this. Basically you're going to create a canvas and then the rest of it is all JavaScript, getting your canvas context, setting up an interval, and a little bit of logic for the physics part of stuff, and the only input is using an onclick event. Then to draw stuff, there's a FillRect and a FillText part of it, and the rest of it is just the little bit of logic necessary to run the game. You can do tiny sound in that bit of space as well, though it's really hard to fit because the code to play the sound ends up taking up so much of the space there's not much left to determine what to actually play. Still, we've done a lot of that. On Twitter, there's a BiteBeat Music as possible. I've released entire album of BiteBeat Music on Twitter, and you can even use speech synthesis to create voices which have the ability to tweak pitch and volume too. So there's opportunities there.

4. Inspiring Tweets

Short description:

Let's talk about some of the Tweets that inspired me. Check out this incredible underwater Tweet by Pavel. I just love this one. It's so simple and kind of shows you the power of Twitter. Here's a raycasting demo. That's pretty incredible. I love this quarantine door one by Yanni. This flying paper airplane one is really great. I love this city traffic simulator by Tom Exor. The sea and the thing that I love the most is the little tiny cars that drive around the city and appear to interact with each other. Yantan did this smoky 3D structure using shadow effects to create a cloudy smoky 3D blur.

Let's talk about some of the Tweets that inspired me. Check out this incredible underwater Tweet by Pavel. I just love this one. It's so simple and kind of shows you the power of Twitter. Nearly everything you see here will be a for loop and then a fill style and a fill rect is kind of like how a lot of these Tweets work. Here's a raycasting demo. That's pretty incredible. Blew me away when I first saw it. I love this quarantine door one by Yanni. He's got a nice little optimization here to store fill rect into F and then use that to call fill rect multiple times a common technique you see on Twitter. This flying paper airplane one is really great. It's done in a little bit of different way where you have a function that does align to I love this city traffic simulator by Tom Exor. It's just mind-blowing how he managed to create this. The sea and the thing that I love the most is the little tiny cars that drive around the city and appear to interact with each other. Yantan did this smoky 3D structure. In this case, it's using the shadow effects to create a kind of a cloudy smoky 3D blur.

5. Exploring Tiny Code Examples

Short description:

Let's take a look at some of my tiny code examples and how they work. I've made over a thousand tiny code tweets in the past four years, covering a wide range of subjects. Space is a favorite, and I've created effects like a black hole and fractal rendering. Cellular automata is powerful, with effects like water and fire. I've also experimented with tiny cities and buildings, including a city sunset and a raycasting system. Tree scapes, like the tree lake scene, have been optimized to just 119 bytes.

So let's take a look at some of my tiny code examples and I can walk you through how they actually work. Here's the very first tweet that I did way back in 2019. Not my best work, but at the time it was and I've come a long way though. In fact, I've made over a thousand of them in the past four years. Here are some of the best ones I've done.

I've covered a wide range of subjects. Space is one of my favorites. So for example, to create a black hole type of effect, you can do that by iterating and setting a color and drawing these fill recs. In this case, it's starting from the bottom, iterating up and spiraling out and that color starts red and goes towards the white, and there's a special test for the very first rec to be drawn to draw that black in the background. You can do fractal rendering in this space very well. It lends itself greatly to tiny code. For example, a tiny mandelbrot rendering would look something like this. It's using the technique of rendering out one pixel at a time to do a super high-definition render.

Cellular automata is a very powerful effect. Here are a couple of the ones I've done. A lot of different results you can get such as a water or fire type of effects are more of a mathematical type of result. Here's a Sierpinski triangle that's drawn using a 1D cellular automata effect. It's storing the cells into an array and going through and updating all those cells based on the rule which is rule 90 in this case, but ultimately matters is the bits of that rule that are used to determine the next state of each cell. I've done so many different experiments with tiny little cities and buildings. I love that kind of thing. For example, this city sunset you can do by again, looping and setting the color, drawing fill racks. In this case it draws the background during the very first frame a little bit different than the buildings and each building is drawn by a grid of squares which alternate between black and colored for the windows and they kind of are shuffled and drawn from the top to the bottom to create a kind of cityscape type of effect. I really love how this one turned out. One of the more recent things we've been able to do in Twitter is ray casting to really push the limit of what is possible. I've even done a super high definition raycasting system in Twitter, like this tweet here that draws a city and has shadows and just textures as well, using that code on the right there. I've done all different types of tree scapes, like this tree lake scene. And with some help in the community, we managed to squeeze it down from 194 characters down to only 119 bytes. So, it's pretty interesting the way this one works and how it kind of generates a random number, for example. Definitely worth digging into. Drawing from the left to the right for the trees, the very first frame is where it draws the stars or the kind of reflection and vertical or horizontal lines.

6. Asemic Writing and the Future of TinyCode

Short description:

Asemic writing is a fun subject to explore on Twitter. Creating a super tiny writing system involves drawing a scribbly line with breaks and different coefficients. I've even fit tiny people by drawing four lines for their limbs. I've created optical illusions, landscapes, chaotic systems, physics simulations, trees, tunnels, 3D effects, animated words, and more. Writing TinyCode is fun, relaxing, and improves coding skills. Join the TinyCode movement by creating your own art in 140 characters and sharing it on social media. The future of TinyCode holds new techniques, better browser support, evolving JavaScript language, faster computers, and AI-assisted programming.

Asemic writing is where you have a writing that looks like it's realistic and mean something, but it's actually just fake. I mess around with that a lot in Twitter. I think it's kind of a fun subject.

So for example, if you want to make a super tiny writing system, I was able to squeeze it down to the core essentials here, kind of like deciding when you're going to have breaks in the writing is the very first line, and then starting and stopping that line using a fill begin path. And for the rest of it, we're just going to draw this scribbly type line, which is moving from the left to the right and top to the bottom, and kind of circling around with different coefficients.

I've even managed to fit super tiny people that are running and jumping and fighting and stuff like that. So a little tiny person you can fit in this space by thinking of them as like drawing four lines. For the four limbs, you're starting at the top of the head, drawing down, and each one of those lines is a series of points. So you have a head, shoulder, elbow, hand, and then very similar thing for the other arm is just kind of offset and the legs are a little bit longer, but ultimately using the same code.

I'll just blast through a couple more tweets just to give you a sense of the kind of stuff I've created. I've done optical illusions and even one optical illusion of the year for the dual axis rotation illusion, which I originally posted on Twitter. I've done so many different types of landscapes. They're a really fun thing to play around with. Chaotic systems can have really interesting results. I love how they're just like unpredictable. Physics simulations can fit really well in a tweet like particles or water bouncing things, or even kind of pseudo physics. I've done all different types of trees, everything from palm trees, bamboo, 3D stuff. Often I'm inspired by mathematical concepts for tweets to make geometric designs. I've done a lot of tunnels and 3D effects. I've done a whole series of words that are kind of like animated to show off that word. It's kind of a weird idea, but it was really fun to try to fit these in the tweet. There are so many more that I've done and other people have done. It's really worth checking out what is there on Twitter. It's just amazing what we've managed to do and continue to keep pushing out new ideas all the time.

Maybe you've watched this whole presentation and are thinking, why write TinyCode? Well, I could tell you, it's fun and relaxing. It's one of my favorite things to do. It will also really help you improve your coding skills. You'll be able to practice prototyping ideas and get much faster at just making things happen. And there's also a community that you can be a part of and even be challenged by competitions like the demo scene. Today, I have a challenge for you, which is to join the TinyCode movement by creating your own art in 140 characters and share it on social media with hashtag TinyCode.

What is the future of TinyCode? We're constantly discovering these cool new techniques to make new things possible and browser support is getting better too, which means it's going to look the same across different browsers and mobile devices. Of course, the JavaScript language is constantly evolving, which means that as new features get added we can maybe have more opportunities to fit things into that space. And computers are getting faster too, so we can do higher resolution output and more complex simulations using the same amount of code. And one of the newest things that's been happening is AI-assisted programming, which can help explain how this TinyCode works and maybe even write it. That's all I have to share with you today. I hope my talk inspires you to write your own TinyCode. As DaVinci said, simplicity is the ultimate sophistication. Thank you so much for watching my talk.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit 2022React Summit 2022
27 min
Impact: Growing as an Engineer
Top Content
Becoming a web engineer is not easy, but there are tons of resources out there to help you on your journey. But where do you go from there? What do you do to keep growing, and to keep expanding the value you bring to your company? In this talk we’ll look at the different kinds of impact you can have as a web engineer. We’ll walk through what it means to take on bigger, more complex projects, and how to scale yourself, and grow the community around you. By driving our own development we can all grow our impact, and in this talk, we’ll discuss how to go about this.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
WorkshopFree
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner
Node Congress 2023Node Congress 2023
49 min
JavaScript-based full-text search with Orama everywhere
Workshop
In this workshop, we will see how to adopt Orama, a powerful full-text search engine written entirely in JavaScript, to make search available wherever JavaScript runs. We will learn when, how, and why deploying it on a serverless function could be a great idea, and when it would be better to keep it directly on the browser. Forget APIs, complex configurations, etc: Orama will make it easy to integrate search on projects of any scale.
Node Congress 2022Node Congress 2022
128 min
Back to the basics
WorkshopFree
“You’ll never believe where objects come from in JavaScript.”
“These 10 languages are worse than JavaScript in asynchronous programming.”
Let’s explore some aspects of JavaScript that you might take for granted in the clickbaitest nodecongress.com workshop.
To attend this workshop you only need to be able to write and run NodeJS code on your computer. Both junior and senior developers are welcome.
Objects are from Mars, functions are from Venus
Let’s deep-dive into the ins and outs of objects and then zoom out to see modules from a different perspective. How many ways are there to create objects? Are they all that useful? When should you consider using them?
If you’re now thinking “who cares?“, then this workshop is probably for you.
Asynchronous JavaScript: the good? parts
Let’s have an honest conversation.
I mean… why, oh why, do we need to bear with all this BS? My guess is that it depends on perspective too. Let’s first assume a hard truth about it: it could be worse… then maybe we can start seeing the not-so-bad-even-great features of JavaScript regarding non-blocking programs.