1. Human-powered
Javascript Compression
for Fun and Gummy Bears
#codebits2010 :: @ruidlopes :: ruidlopes.com

2. First of all...
Let there be
gummy bears!

3. Javascript

4. Javascript

5. BAD!!

6. Being
evil is
fun!!

7. Let the fun begin

8. var context = document.getElementById('c').getContext('2d');
var dataArray = context.getImageData(0,0,200,200);
var tick = function() {
for (var i = 0; i < 160000; i += 4) {
var color = Math.floor(Math.random() * 255);
dataArray.data[i] = color;
dataArray.data[i+1] = color;
dataArray.data[i+2] = color;
dataArray.data[i+3] = 255;
}
context.putImageData(dataArray, 0, 0);
};
window.setInterval(tick, 1);

9. Original Google Closure Google Closure (agressive)
405
331
255

10. 37% decrease
(not bad – for a robot)

11. Javascript

12. shorter variable names
333

13. ‘window’ is...
redundant
326

14. only one function
314

15. DOM is versatile
311

16. assignments return
values
301

17. DOM is freaking
versatile!
277

18. Know your APIs
inside out
217

19. pure evil variable
creation
215

20. know your loops
199

21. master your automatic
type-casting
187

22. numbers have
different
representations
181

23. ok, let’s remove some
whitespace now
153

24. know your math
152

25. “function” is
expensive, just eval it.
139already fits a twit!

26. ; is optional,
sometimes
135

27. 0
125
250
375
500
Humans Robots

28. 67% decrease
(pretty awesome – for a human)

29. get inspired by
raphaël.js js1k
the incredible demoscene

30. Thank you!