JS1k competition

About the js1k 2015 competition

So this year happens to be the first year where I have decided to take part in the JS1k competition. This is a competition that involves creating a game or other web app in less than a kilobyte of code (this means around less than a thousand letters and numbers). This size is of interest to many geeks out there, as files of this size can be sent as a single transmission unit over the internet (i.e. this size of file will take the same amount of time to arrive at a client's browser as it would have if it was just one or two characters long, but if it was longer, it would take twice as long!).

This competition runs once every year and usually has many excellent submissions that everyone is really impressed by. It is insane that various projects that most people in the world wouldn't even know how to start can be written in just a kb! The competition usually has a theme and the competitors have the choice to either create something relevant to the theme, or create something completely irrelevant (many people have, for example, created games for this year's competition).

This year's theme was 'Hype train'.

My attention was really drawn by the 'train' part of the theme. I had so many ideas involving doing something that could offload my anger at the daily commutes I take in the london tube.

However, it was not to be so.

After a first few attempts to create a simple game showed that if I wanted to create a game, the 1kb limit meant that it would either look terrible, or it wouldn't be a good or fun game to play. This was quite a depressing realisation and triggered a series of events that left me a calmer and better person and I decided not to create an app criticising TFL, even though they make my life hell so often.

In the end, my submission ended up being a visualisation of a train with a hyped-up rave travelling at night, complete with smoke, stars and trees (or as some people joked - rectangles [but seriously, they ARE trees]). Of course, I do not expect to win, but it has been fun being challenged and it has made me realise how little I know and how much there is still to learn.

What did I learn?

Unfortunately for most people, what I will write next will be completely irrelevant to their lives, so unless you have at least aSmallInterestInProgramming || someInterestInJavaScript, please stop reading HERE!

Having some humble skills in JavaScript already, most of the things I learnt in this project were details that are useful for minimising the file size of the code you have written. However, some of these things were code that I have never really used in projects before (I hope this doesn't make me a bad developer).

So, coming up are the bits of code that made my submission possible:

~~ operator

The tilde (~) operator is a bitwise NOT operator. This means it inverts the bits of its operand (10010101 in bits would become 01101010).

When the tilde is doubled up, it becomes a useful function for a programmer:

~~42 === 42
~~"42" === 42
~~"42a" === 0
~~"abc" === 0
~~null === 0
~~undefined === 0
~~true === 1
~~false === 0
~~Infinity === 0
~~-Infinity === 0
~~{} === 0
~~[] === 0
~~[4,2] === 0
~~4.2 === 4
~~0.42 === 0
~~-4.2 === -4
~~-0.42 === 0
~~(42e+42) === 0

What can be seen here is that this operation has useful features that can be exploited as a dirty hack.

The ~~ operator will always return a number, which is very useful when writing a project with a tiny amount of code, since this means you can use it and have functions that return numbers without going into type checking. For decimals, this operator will work as Math.floor() for numbers above 0 and Math.ceil() for numbers below 0 - a function that is sometimes desired but would otherwise use 3 lines of code. Strings will return numbers if they only contain a number, otherwise they will return 0. Arrays and Objects always return 0. True and false are neatly converted into 1 and 0.

The unfortunate side is that a string including a letter will return 0 even if the letter is at the end of the string (so is not as good as parseInt or parseFloat) for conversion purposes. Furthermore, when numbers become so big that they use exponentials, ~~ will return a 0.

However, when working with a small amount of code where big numbers won't be involved, this has its uses.

get, set

Writing function(){} takes up a lot of characters. Using JavaScripts getters and setters saves those few characters that might manage to let you squeeze in an extra feature. Getters can be used like this:

x = {get r(){return Math.random();}};

And can then be called like this:

x.r

Repeating something twice

Sometimes it is shorter to write something twice, but in the other cases you can use:

for(i in "--")

Which may save you those characters you need.

Colours

For generating random colours, '#'+(x.r*0xFFFFFF<<0).toString(16) is good.

But "hsl("+~~(x.r*360)+",99%,60%)" is better.