Human-powered Javascript Compression for Fun and Gummy Bears

Human-powered Javascript Compression

for Fun and Gummy Bears

#codebits2010 :: @ruidlopes :: ruidlopes.com

First of all...

Let there begummy bears!

Javascript

Javascript

BAD!!

Being evil is fun!!

Let the fun begin

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);

Original Google Closure Google Closure (agressive)

405

331

255

37% decrease(not bad – for a robot)

Javascript

shorter variable names

333

‘window’ is...redundant

326

only one function

314

DOM is versatile

311

assignments return values

301

DOM is freaking versatile!

277

Know your APIs inside out

217

pure evil variable creation

215

know your loops

199

master your automatic type-casting

187

numbers have different

representations

181

ok, let’s remove some whitespace now

153

know your math

152

“function” is expensive, just eval it.

139already fits a twit!

; is optional, sometimes

135

0

125

250

375

500

Humans Robots

67% decrease(pretty awesome – for a human)

get inspired by

raphaël.js js1k

the incredible demoscene

Thank you!