By Louis Simoneau

What can YOU do with a kilobyte of JavaScript?

By Louis Simoneau
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

The JS1k competition, announced last week, challenges entrants to code up a JavaScript demo in less than a kilobyte (1,024 bytes). The rules are simple: your demo must run in the current versions of Firefox, Safari, Chrome, and Opera without crashing. Style doesn’t count, so eval away. And you can only submit one entry per person—the last entry you submit before the deadline will be the one that counts, so revisions and updates are possible. Minimization, of course, is permitted.

The script you submit is placed inside a script tag in a frame containing only a canvas element. Most of the scripts submitted so far have been graphical demos. Here are a few of the most interesting ones, in my opinion:

  • Marijn Haverbeke has submitted a fairly sophisticated side-scrolling game, where you control three different spaceships and try to prevent enemy ships from reaching the right side of the screen. Demo, source.
  • Tom Boshoven (as well as a few other participants) has implemented Conway’s Game of Life, complete with Play/Pause and speed controls. Demo.
  • Quite a few people have implemented JavaScript syntax highlighters.
  • Jonas Wagner had my favorite of the lot: a demonstration of evolution by natural selection. His script starts with a population of colored squares on a randomly-colored background. Each square has three “genes”: the R, G, and B components of its color. Each “generation,” the simulation kills a few cells—but not randomly: the cells whose color differs most from the background are more likely to be killed. Then, new cells are “bred” to fill in the space by combining the genes of surviving cells, and each new cell is given one random mutation. That’s all there is to it. Click through to the demo to watch the squares evolve their camouflage, and have a read of his blog post to see how it’s done. As if this wasn’t all cool enough, he’s used whitespace in his minimized script to draw a profile of Charles Darwin.

Have a look at the full list of demos and see what others have done.

The entries will be judged by a jury, and prizes (including a number of books and seats at the HTML5 Mobile Pro workshop) will be awarded. The deadline is September 10th, so I’ll ask again: What can you do with 1KB of JavaScript?

Login or Create Account to Comment
Login Create Account
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?