Friday, August 6th, 2010

What Can You Build in 1k of JS?

Category: Contests, JavaScript

Here’s a fun way to end the week. Peter van der Zee has cranked up a cool contest where you’ll be judged on what you can build using just 1k of JavaScript. The rules are simple:

  1. Create a fancy pancy Javascript demo
  2. Submissions may be up to 1k. (And not crash)
  3. Externals are strictly forbidden, unlike “some” contests. (Good luck minifying jQuery though!)
  4. Must work on current fx, sa, ch and o. (Let’s level the playing field)
  5. Minification and hacks allowed. (Go nuts)
  6. Bonus points if your submission fits in one tweet ;)
  7. Last day to submit is 10 September 2010

This looks like a fun way to test your skills out so be sure to check it out. There’s already five submissions and the contest runs through September 10th, 2010.

Posted by Rey Bango at 11:00 am

2.3 rating from 8 votes


Comments feed TrackBack URI


alert(‘I have no chance of winning this, do I?’)

Comment by igaenssley — August 6, 2010

Lest we forget: this is probably based on The 5k contest back in 2000.

Now we’re down to 1k :D

Comment by evilsizord — August 6, 2010

Unlike “some” competitions, this has no chance of being popular or beneficial.

Comment by sixtyseconds — August 6, 2010

@sixtyseconds Typical sour ajaxian comment. This contest has blown up on twitter and submissions keep rolling in. I dig the challenge as well as an excuse to try out some canvas goodness. Popular and beneficial all the way :{D

Comment by jdalton — August 6, 2010

I remember the 5k, some submission were real masterpiece. Developping a FPS in only 5k who runned on legacy browser… thoses peoples were real artists !

Comment by ywg — August 7, 2010

Aahhh…. Finally a JS contest for the rest of us ;)

Comment by rasmusfl0e — August 7, 2010

@jdalton – my humor tags got stripped :(

Comment by sixtyseconds — August 7, 2010

Fun challenge. 1k seems like a lot more than it really is. Here’s my attempt:

Comment by Joeri — August 7, 2010

Addicting ;) Thanks for letting me know! I ended up making two demos for the competition: — I’m pretty happy with “JS1k Draw!” — even worked in a chrome workaround for a bug when using ctx.strokeText() on a element who’s dimensions have been changed (within the same process).

Comment by mudx — August 7, 2010

Awesome competition, very nice entries @mudx and @Joeri :)

Would be neat if there was somewhere on the site you could contribute to a list of tricks you used when working library-less (for cross-browserness, minification/coding speed.

Like is there an advantage in shortcut references like the old school
‘var $ = document.getElementById’? Minification-wise does the minifier do that for you? I can imagine it handy code-speed wise, even if you then stripped it out again later?

Comment by friendlyjs — August 9, 2010

Couldn’t think of a novel idea so ended up with Game of Life: Not new but still fun. Have to say, 1k seemed a lot smaller to me!

Comment by kissmyawesome — August 9, 2010

I found this part funny:

“Your demo does not need to be visual/graphical (although it’s the most probable choice). You do get the canvas tag for free (see demo page).”

If using canvas tag is allowed then it will most certainly be a graphics contest. Not that there’s a problem with it but they might as well as bill it as such from the beginning. But since the canvas tag is so helpful for doing things well beyond the 1k of Javascript, I would be interested in seeing what people can do with 1k of code without bootstrapping canvas.

Comment by travisalmand — August 9, 2010

“fx, sa, ch and o”

Sorry, but anything that doesn’t support id can’t be taken seriously. Well, besides primadonnas.

Comment by wwwmarty — August 10, 2010


mea faila

Comment by wwwmarty — August 10, 2010

Opera??? seriously???

Comment by wwwmarty — August 10, 2010

PS: my website is NOT http://null/ so don’t bother clicking on my username. #failtastic!

Comment by wwwmarty — August 10, 2010

@wwwmarty: they also only require you to get it running in the absolute latest version of each browser. The goal here isn’t to get production apps, it’s to see just how far you can get with 1k using modern browser technology. My demo works just fine in IE9 preview, without any code changes or compatibility code, because that’s the first version of IE that’s actually a fully modern browser.

Comment by Joeri — August 10, 2010

It’s supposed to be a fun competition and requiring IE support would make it not fun and make canvas demos impossible. Opera is not hard to support.

Comment by friendlyjs — August 10, 2010

I entered a similar (10k) competition only to find that the latest ie9 dp didn’t support global composition operations (which the compatibility chart shows ‘full compatibility’ for). Had to rewrite the whole thing to path out the individual objects and clip. Luckily it was only 10k… :D

My point, you ask. IE9 may not suck as much as Microsoft, but only just.

Comment by sixtyseconds — August 10, 2010

I found useful tips from

Comment by roylory — August 10, 2010

What about 10k contest ?

It looks more interesting for now.

Comment by keemor — August 11, 2010

@friendlyjs: I’ve been coding from scratch, using some elements from libraries from past projects – such as ColorJack Sphere, Mugtug Sketchpad/Darkroom, and Shortening objects is essential, for instance if you use window.innerWidth use w = window.innerWidth. Or if you use 14.12849 >> 0 (which == 14) instead of Math.round/floor/ceil and accept the data loss (if any). Here’s a great list of bitwise gems:

Here’s my latest demo for JS1k:

Daltonization is a method of augmenting an image so people with color vision deficiencies can see the difference between colors which would otherwise be indistinguishable to them.

Comment by mudx — August 12, 2010

oh, and YUI & Closure compressors are great ;)

Comment by mudx — August 12, 2010

Here’s another trick – to convert the values from HSL to RGB, use the native code – this was useful in Daltonize, and could be handy with Mathias’s “color picker extraordinaire” to give users a more natural means of picking colors:

c.fillStyle = “hsl(0,100%,50%)”;
c.fillRect(0, 0, 1, 1);
var rgb = c.getImageData(0, 0, 1, 1).data;

Comment by mudx — August 13, 2010

ywg: How about doing it in 1k then ?

Comment by p01 — September 10, 2010

Leave a comment

You must be logged in to post a comment.