Human-powered Javascript Compression for Fun and Gummy Bears

2,047 views
1,915 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,047
On SlideShare
0
From Embeds
0
Number of Embeds
248
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Human-powered Javascript Compression for Fun and Gummy Bears

  1. 1. Human-powered Javascript Compression for Fun and Gummy Bears #codebits2010 :: @ruidlopes :: ruidlopes.com
  2. 2. First of all... Let there be gummy bears!
  3. 3. Javascript
  4. 4. Javascript
  5. 5. BAD!!
  6. 6. Being evil is fun!!
  7. 7. Let the fun begin
  8. 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. 9. Original Google Closure Google Closure (agressive) 405 331 255
  10. 10. 37% decrease (not bad – for a robot)
  11. 11. Javascript
  12. 12. shorter variable names 333
  13. 13. ‘window’ is... redundant 326
  14. 14. only one function 314
  15. 15. DOM is versatile 311
  16. 16. assignments return values 301
  17. 17. DOM is freaking versatile! 277
  18. 18. Know your APIs inside out 217
  19. 19. pure evil variable creation 215
  20. 20. know your loops 199
  21. 21. master your automatic type-casting 187
  22. 22. numbers have different representations 181
  23. 23. ok, let’s remove some whitespace now 153
  24. 24. know your math 152
  25. 25. “function” is expensive, just eval it. 139already fits a twit!
  26. 26. ; is optional, sometimes 135
  27. 27. 0 125 250 375 500 Humans Robots
  28. 28. 67% decrease (pretty awesome – for a human)
  29. 29. get inspired by raphaël.js js1k the incredible demoscene
  30. 30. Thank you!

×