Friday, August 6th, 2010
What Can You Build in 1k of JS?
Category: Contests, JavaScript
- Create a fancy pancy Javascript demo
- Submissions may be up to 1k. (And not crash)
- Externals are strictly forbidden, unlike “some” contests. (Good luck minifying jQuery though!)
- Must work on current fx, sa, ch and o. (Let’s level the playing field)
- Minification and hacks allowed. (Go nuts)
- Bonus points if your submission fits in one tweet ;)
- 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.
Related Content:
- Node.js
Node.js, often called simply "Node" in conversation, is a development platform built on top of Google's V8 JavaScript virtual... - Simplified cloud-based application development with Node.js
Cloud-based application development with Node.js allows for one simple and scalable technology to be used on both the client and the server.... - Engine Yard adds Node.js support
Engine Yard adds programming language Node.js to its Platform as a Service... - An Easier Way To Include .Js Files For Javascript In R5
2.2 rating from 6 votes
Done.
alert(‘I have no chance of winning this, do I?’)
Lest we forget: this is probably based on The 5k contest back in 2000.
Now we’re down to 1k :D
Unlike “some” competitions, this has no chance of being popular or beneficial.
@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
@evilsizord
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 !
Aahhh…. Finally a JS contest for the rest of us ;)
@jdalton – my humor tags got stripped :(
Fun challenge. 1k seems like a lot more than it really is. Here’s my attempt: http://sebrechts.net/files/2010/js1k/fighter.html
Addicting ;) Thanks for letting me know! I ended up making two demos for the competition: http://tinyurl.com/2fnzefj — 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).
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?
Couldn’t think of a novel idea so ended up with Game of Life: http://bit.ly/98NNCy. Not new but still fun. Have to say, 1k seemed a lot smaller to me!
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.
“fx, sa, ch and o”
Sorry, but anything that doesn’t support id can’t be taken seriously. Well, besides primadonnas.
id=ie
mea faila
Opera??? seriously???
PS: my website is NOT http://null/ so don’t bother clicking on my username. #failtastic!
@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.
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.
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.
I found useful tips from http://qfox.nl/notes/111
What about 10k contest http://10k.aneventapart.com/ ?
It looks more interesting for now.
@friendlyjs: I’ve been coding from scratch, using some elements from libraries from past projects – such as ColorJack Sphere, Mugtug Sketchpad/Darkroom, and Daltonize.org. 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: http://lab.polygonal.de/2007/05/10/bitwise-gems-fast-integer-math/
Here’s my latest demo for JS1k: http://mudcu.be/labs/JS1k/Daltonize.html
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.
oh, and YUI & Closure compressors are great ;)
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;
ywg: How about doing it in 1k then ?