1024+ seconds of js wizardry - jsconf.eu 2013

147
1024+ Seconds of JS Wizardry

Upload: martin-kleppe

Post on 19-Jan-2015

3.282 views

Category:

Technology


2 download

DESCRIPTION

We spend our days creating large-scale applications byte by byte. But what happens at night when we get rid of bloated libraries and browser dependencies? What will we discover deep under the surface if we dissect the language of the web into its atomic parts? In this talk we will hack tweet-sized games, write code in only six characters and create the self-modifying “Hello World” in less than 1024 bytes of JavaScript. All just for fun and without asking “Why?”. Prepare yourself for 140 slides full of old-school ASCII art and crazy code golfing! More info here: http://2013.jsconf.eu/speakers/martin-kleppe-1024-seconds-of-js-wizardry.html

TRANSCRIPT

Page 1: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

1024+ Seconds of JS Wizardry

Page 4: 1024+ Seconds of JS Wizardry - JSConf.eu 2013
Page 5: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

Maps API

Page 6: 1024+ Seconds of JS Wizardry - JSConf.eu 2013
Page 7: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

Real World

Page 8: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

Dark Side

Page 9: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

_vo~^'':&b::d,#b\_ ..`" `:v +9P]MMMMMMMMMMHo_ ,- ?Mb#MMMMMMMMMMMMMMMMMHo. . " ,ooM*&&&HMMMMMMMMMMMMMMMMHb. . - 99Soo?|'`*?##HMMMMMMMMMMMMMH\ - .HMMMMMM#od#boodMMMMHMMMMMMMMMMb - :MMMMMMMMMMMMMMMM67HMMH&$R**HMMMMMb : .MMMMMMMMMMMMMMMMMMM/HMMMMM| `9MM'HL: {MMMMMMMMMMMMMMMMMMMM\MM*'' `H[ `9|| `HMMMMMMMMMMMMMMMMMMMMb##| `F. :?H `"*"'"`#MMMMMMMMMMMMMMM? ' kM. MMMMMMMMMMMMM"' HMMH. `HMMMMMMMMMM: |&MM| `MMMMMMMMMM, -`MM| dMMMMMMMMMM|.oH : 9ML `HMMMMMMM? dH' - Hi |MMMMMMP "' .' T. `MMM#' - `. ` .` ` - `.. . ..' ... .- '-. //######M#b~""

Crazy Hacks

Page 10: 1024+ Seconds of JS Wizardry - JSConf.eu 2013
Page 12: 1024+ Seconds of JS Wizardry - JSConf.eu 2013
Page 13: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

. ,> <

+ - [ ]

Page 14: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

("-^-/")

`o__o' ] (_Y_) _/

_..`--'-.`,

(__)_,--(__) 7: ; 1

_/,`-.-' : (_,)-~~(_,)

Page 15: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

Brainfuck8 Characters

Page 16: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

+++++ +++++ initialize counter (cell #0) to 10[ use loop to set the next four cells to 70/100/30/10 > +++++ ++ add 7 to cell #1 > +++++ +++++ add 10 to cell #2 > +++ add 3 to cell #3 > + add 1 to cell #4 <<<< - decrement counter (cell #0)] > ++ . print 'H'> + . print 'e'+++++ ++ . print 'l'. print 'l'+++ . print 'o'> ++ . print ' '<< +++++ +++++ +++++ . print 'W'> . print 'o'+++ . print 'r'----- - . print 'l'----- --- . print 'd'> + . print '!'> . print '\n'

Page 17: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

!e brainfuck language is designed to challengeand amuse programmers,and was not made to be suitable for practical use.

Page 18: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

!e brainfuck language is designed to challengeand amuse programmers,and was not made to be suitable for practical use!

Page 21: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

+[] => 0 +!+[] => 1!+[] + !+[] => 2

Page 22: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

![] => false !![] => true[][[]] => undefined

Page 23: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

![] +[] => "false" !![] +[] => "true"[][[]] +[] => "undefined"

Page 24: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

"false"[0] => "f""undefined"[5] => "i""false"[2] => "l""true"[0] => "t""true"[3] => "e""true"[1] => "r"

Page 25: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

[]["filter"]

Page 26: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

[]["filter"]["constructor"]

Page 27: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

[]["filter"]["constructor"](" CODE ")()

Page 28: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

[]["filter"]["constructor"]("alert(1)")()

Page 29: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

[][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]][([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+![]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]]+([][[]]+[])[+[[+!+[]]]]+(![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[+!+[]]]]+([][[]]+[])[+[[+[]]]]+([][(![]+[])[[[[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]((![]+[])[+[[+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]+(!![]+[])[+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+[+!+[]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]])()

Page 30: 1024+ Seconds of JS Wizardry - JSConf.eu 2013
Page 31: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

v = (31)["toString"](32) 2400< = ("")["link"]()[0] 4000% = GLOBAL["escape"]("<")[0] 11000C = GLOBAL["unescape"]("%43")[0] 18000} = String["fromCharCode"](123) 41000

Page 33: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

2011

Page 35: 1024+ Seconds of JS Wizardry - JSConf.eu 2013
Page 36: 1024+ Seconds of JS Wizardry - JSConf.eu 2013
Page 37: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

function(a,b,c){for(a=12;a--;c=[c]+(4095^[,396,82,66,76,80,76][a]).toString(2)+2);for(a in c)b=

[b]+"■\n"[c[a]];return b} //j.mp/140js

Page 38: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

function(){/**Your entry, a useful, unique, and valid JavaScript expression thatpacks as much functionality into 140 bytes as possible. **/}

Page 39: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

function(){................................................................................................................................}

128

Page 40: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

function(a){.......................................................................................................................return a}

119

Page 41: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

Base64Encoder()jsLogo()rotate3D()gameOfLive()rubik()...tetris()

Page 42: 1024+ Seconds of JS Wizardry - JSConf.eu 2013
Page 43: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

function(a,b,c,d){d+=c;return[d<0|a&b<<d?a=parseInt((a|b<<c).toString(d=32,b=newDate&2|1).replace('v',''),d):a|b<<d,a,b,d]} // tweetris

Page 44: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

function(a,b,c,d){d+=c;return[d<0|a&b<<d?a=parseInt((a|b<<c).toString(d=32,b=newDate&2|1).replace('v',''),d):a|b<<d,a,b,d]}

Page 45: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

function(a,b,c,d){d+=c;return[d<0|a&b<<d?a=parseInt((a|b<<c).toString(d=32,b=newDate&2|1).replace('v',''),d):a|b<<d,a,b,d]}

Page 46: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

function(a,b,c,d){d+=c;return[d<0|a&b<<d?a=parseInt((a|b<<c).toString(d=32,b=newDate&2|1).replace('v',''),d):a|b<<d,a,b,d]}

Page 47: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

function(a,b,c,d){d+=c;return[d<0|a&b<<d?a=parseInt((a|b<<c).toString(d=32,b=newDate&2|1).replace('v',''),d):a|b<<d,a,b,d]}

Page 48: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

.....

..##.

.....

Page 49: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

..... 00000

..##. => 00110

..... 00000

Page 50: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

..... 00000

..##. => 00110 192

..... 00000

Page 51: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

..... 00000

..... => 00000 192>>5=6

..##. 00110

Page 52: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

..... 00000

..... => 00000 6>>1=3

...## 00011

Page 53: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

..... 00000

..... => 00000 6&3 =2

...X. 00010

Page 54: 1024+ Seconds of JS Wizardry - JSConf.eu 2013
Page 55: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

http://js1k.com@kuvos

Page 56: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

<!doctype html>

<html>

<canvas></canvas>

<script>

var b = document.body;

var c = document.getElementsByTagName('canvas')[0];

var a = c.getContext('2d');

// start of submission //

*** YOUR SCRIPT ***

// end of submission //

</script>

</html>

Page 57: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

for(a;b;){c;d;} // 15for(a;b;){c;d} // 14for(a;b;)c,d; // 13for(a;b;d)c; // 12for(a;b;d)c // 11

Page 58: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

88b d888 888 888888 .d8888b. d888 888 d8P "88b d88P Y88b d8888 888 d8P 888 Y88b. 888 888 d8P 888 "Y888b. 888 888d88K 888 "Y88b. 888 8888888b 888 "888 888 888 Y88b 88P Y88b d88P 888 888 Y88b 888 "Y8888P" 8888888 888 Y88b .d88P d88P 888 d888 88888888b. .d88888b. 888 d8P 8888888888 8888888b. 8888 Y88b d88P" "Y88b 888 d8P 888 888 888 Y88b 888 888 888 888 888 d8P 888 888 888 888 d88P 888 888 888d88K 8888888 888 d88P 8888888P" 888 888 8888888b 888 "" 8888888P" 888 888 888 888 Y88b 888 888 T88b 88888 Y88b. .d88P 888 Y88b 888 888 888 T88b 88888 "Y88888P" 888 Y88b 8888888888 888 T8888b 88888 T8888b

______.------.______ .------|J.--. |Q.--. |K.--. |------. |T.--. | :(): | (\/) | :/\: |A.--. | | :/\: | ()() | :\/: | :\/: | (\/) | | (__) | '--'J| '--'Q| '--'K| :\/: | | '--'T`______'------'______| '--'A| `------´ `------'

Page 60: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

a = canvas.getContext('2d');

a.translate(x, y);a.createLinearGradient( x0, y0, x1, y1);

Page 61: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

a = canvas.getContext('2d');

a.translate(x, y);a.createLinearGradient( x0, y0, x1, y1);

Page 62: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

for (prop in a){ a[ prop[0]+(prop[6]||'') ] = a[prop];}

Page 63: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

// translate// createLinearGradient

a.ta(x, y);a.cL(x0, y0, x1, y1);

Page 64: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

with (a){ ta(x, y); cL(x0, y0, x1, y1);}

Page 65: 1024+ Seconds of JS Wizardry - JSConf.eu 2013
Page 67: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

<body id=b onkeyup=e=event onload=z=c.getContext('2d');z.fillRect(s=0,0,n=150,x=11325);setInterval("0<x%n&x<n*n&(z[x+=[1,-n,-1,n][e.which&3]]^=1)?z.clearRect(x%n,x/n,1,1,s++):b.innerHTML='game over:'+s",9)><canvas id=c>

Page 68: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

<body id=b onkeyup=e=event onload=z=c.getContext('2d');z.fillRect(s=0,0,n=150,x=11325);setInterval("0<x%n&x<n*n&(z[x+=[1,-n,-1,n][e.which&3]]^=1)?z.clearRect(x%n,x/n,1,1,s++):b.innerHTML='game over:'+s",9)><canvas id=c>

Page 69: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

<body id=b onkeyup=e=event onload=z=c.getContext('2d');z.fillRect(s=0,0,n=150,x=11325);setInterval("0<x%n&x<n*n&(z[x+=[1,-n,-1,n][e.which&3]]^=1)?z.clearRect(x%n,x/n,1,1,s++):b.innerHTML='game over:'+s",9)><canvas id=c>

Page 70: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

<body id=b onkeyup=e=event onload=z=c.getContext('2d');z.fillRect(s=0,0,n=150,x=11325);setInterval("0<x%n&x<n*n&(z[x+=[1,-n,-1,n][e.which&3]]^=1)?z.clearRect(x%n,x/n,1,1,s++):b.innerHTML='game over:'+s",9)><canvas id=c>

Page 71: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

<body id=b onkeyup=e=event onload=z=c.getContext('2d');z.fillRect(s=0,0,n=150,x=11325);setInterval("0<x%n&x<n*n&(z[x+=[1,-n,-1,n][e.which&3]]^=1)?z.clearRect(x%n,x/n,1,1,s++):b.innerHTML='game over:'+s",9)><canvas id=c>

Page 73: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

‰PNG IHDR ù‰<$º IDATx^mTaoªH}?¥ÉF™a˜D…7M°Ý¾m6&[m·[/A y fQ[ûßwFl·I×ù÷œ{àÞ ~²éˆ ™a‘i¹FwM´(+´À•<¬8^TÕ=ßKflÊ*—yY„Ë|ÏÓH–›D+¾”ê²ËS™…”V”ñü9“ �ž'‹_Ï¢Üiø!Ä@œi"“0Ù¦yéì’ZI*øèá×êÇ(¿‹ãxðÏÝß“›Éš’ÛA¬êü=ÞÝ8 Ò&~�Ž'?n

È“’³hY ™Û H$m;‚霱WJ´ eËï9]¬nP‡Òñ‚wÑ>¤nÏhªtÿ#xùL½•­e}ïñN ¹Åæ²LÀÔ£

¤K‰G½N—¨Àw‰oL¼¼¤¤M;Ð:A¯íÙ)ÛýiWêvMpšð¦ÜéPß'jNÑ:¾õÁPûø ¢Æ·û³s<�ž Œ&¬à»‹XÏpâÍ*9€ŠËÛBrQ'+°Ü ½³‹9¨Ñ ¾æKPCÁåV;üh×ø1âªÌa”± nÖÇÈÑ#ÄÌ‹‚‹?Nç„õ

�ž£+v ›àÅV^Èû|ÍFc¶{0J°(e"9¢M=è¨ c £N?ŠÙG›ƒ¦»(eSjLj x6%Çeµ<µÖÿKò¯É¯/

ÀkÍô; éfñã% ^æ«Õˆ/$ ¢›6kü€ôU) ÍÜ×ÉÐÀT-@¤UÂô]­ÌqOÂîùl¼ÆúÓ`FV­€aM…I

6Ò«ñ{Hùœ!´Œ–ÑTZ�žk{®ò¯ñÖtÕ˜N°6= gJ Ø<±üîzćO¬Ø1• ]3ϵzﵕP9ïx×m¡™Z×&P¬ÆÜj@£vN·\ê’öôI¨ÓÜ:ïâ»Vâ'%¹~ç©–u{ Pvæ•j~o�Ž­~ñÀtteifüÖÌKÿƒ€©ñ¡þ0¾7¡ÎQügl̦ƒ6áj;¯¤ NE²»]'Ï, AÂÌZò\”9=xV¬zX1„ÿq„|!¡âzöiúG£©vášàUYnXÂo

ÿöÊb<canvas id=c><img src=# onload=for(a=c.getContext('2d'),i=e=''

,S=String.fromCharCode;a.drawImage(this,i--,0),t=a.getImageData(0,

0,1,1).data[0];)e+=S(t);(1,eval)(e)>

Page 74: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

‰PNG IHDR ù‰<$º IDATx^mTaoªH}?¥ÉF™a˜D…7M°Ý¾m6&[m·[/A y fQ[ûßwFl·I×ù÷œ{àÞ ~²éˆ ™a‘i¹FwM´(+´À•<¬8^TÕ=ßKflÊ*—yY„Ë|ÏÓH–›D+¾”ê²ËS™…”V”ñü9“ �ž'‹_Ï¢Üiø!Ä@œi"“0Ù¦yéì’ZI*øèá×êÇ(¿‹ãxðÏÝß“›Éš’ÛA¬êü=ÞÝ8 Ò&~�Ž'?n

È“’³hY ™Û H$m;‚霱WJ´ eËï9]¬nP‡Òñ‚wÑ>¤nÏhªtÿ#xùL½•­e}ïñN ¹Åæ²LÀÔ£

¤K‰G½N—¨Àw‰oL¼¼¤¤M;Ð:A¯íÙ)ÛýiWêvMpšð¦ÜéPß'jNÑ:¾õÁPûø ¢Æ·û³s<�ž Œ&¬à»‹XÏpâÍ*9€ŠËÛBrQ'+°Ü ½³‹9¨Ñ ¾æKPCÁåV;üh×ø1âªÌa”± nÖÇÈÑ#ÄÌ‹‚‹?Nç„õ

�ž£+v ›àÅV^Èû|ÍFc¶{0J°(e"9¢M=è¨ c £N?ŠÙG›ƒ¦»(eSjLj x6%Çeµ<µÖÿKò¯É¯/

ÀkÍô; éfñã% ^æ«Õˆ/$ ¢›6kü€ôU) ÍÜ×ÉÐÀT-@¤UÂô]­ÌqOÂîùl¼ÆúÓ`FV­€aM…I

6Ò«ñ{Hùœ!´Œ–ÑTZ�žk{®ò¯ñÖtÕ˜N°6= gJ Ø<±üîzćO¬Ø1• ]3ϵzﵕP9ïx×m¡™Z×&P¬ÆÜj@£vN·\ê’öôI¨ÓÜ:ïâ»Vâ'%¹~ç©–u{ Pvæ•j~o�Ž­~ñÀtteifüÖÌKÿƒ€©ñ¡þ0¾7¡ÎQügl̦ƒ6áj;¯¤ NE²»]'Ï, AÂÌZò\”9=xV¬zX1„ÿq„|!¡âzöiúG£©vášàUYnXÂo

ÿöÊb<canvas id=c><img src=# onload=for(a=c.getContext('2d'),i=e=''

,S=String.fromCharCode;a.drawImage(this,i--,0),t=a.getImageData(0,

0,1,1).data[0];)e+=S(t);(1,eval)(e)>

Page 75: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

‰PNG IHDR ù‰<$º IDATx^mTaoªH}?¥ÉF™a˜D…7M°Ý¾m6&[m·[/A y fQ[ûßwFl·I×ù÷œ{àÞ ~²éˆ ™a‘i¹FwM´(+´À•<¬8^TÕ=ßKflÊ*—yY„Ë|ÏÓH–›D+¾”ê²ËS™…”V”ñü9“ �ž'‹_Ï¢Üiø!Ä@œi"“0Ù¦yéì’ZI*øèá×êÇ(¿‹ãxðÏÝß“›Éš’ÛA¬êü=ÞÝ8 Ò&~�Ž'?n

È“’³hY ™Û H$m;‚霱WJ´ eËï9]¬nP‡Òñ‚wÑ>¤nÏhªtÿ#xùL½•­e}ïñN ¹Åæ²LÀÔ£

¤K‰G½N—¨Àw‰oL¼¼¤¤M;Ð:A¯íÙ)ÛýiWêvMpšð¦ÜéPß'jNÑ:¾õÁPûø ¢Æ·û³s<�ž Œ&¬à»‹XÏpâÍ*9€ŠËÛBrQ'+°Ü ½³‹9¨Ñ ¾æKPCÁåV;üh×ø1âªÌa”± nÖÇÈÑ#ÄÌ‹‚‹?Nç„õ

�ž£+v ›àÅV^Èû|ÍFc¶{0J°(e"9¢M=è¨ c £N?ŠÙG›ƒ¦»(eSjLj x6%Çeµ<µÖÿKò¯É¯/

ÀkÍô; éfñã% ^æ«Õˆ/$ ¢›6kü€ôU) ÍÜ×ÉÐÀT-@¤UÂô]­ÌqOÂîùl¼ÆúÓ`FV­€aM…I

6Ò«ñ{Hùœ!´Œ–ÑTZ�žk{®ò¯ñÖtÕ˜N°6= gJ Ø<±üîzćO¬Ø1• ]3ϵzﵕP9ïx×m¡™Z×&P¬ÆÜj@£vN·\ê’öôI¨ÓÜ:ïâ»Vâ'%¹~ç©–u{ Pvæ•j~o�Ž­~ñÀtteifüÖÌKÿƒ€©ñ¡þ0¾7¡ÎQügl̦ƒ6áj;¯¤ NE²»]'Ï, AÂÌZò\”9=xV¬zX1„ÿq„|!¡âzöiúG£©vášàUYnXÂo

ÿöÊb<canvas id=c><img src=# onload=for(a=c.getContext('2d'),i=e=''

,S=String.fromCharCode;a.drawImage(this,i--,0),t=a.getImageData(0,

0,1,1).data[0];)e+=S(t);(1,eval)(e)>

Page 76: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

‰PNG IHDR ù‰<$º IDATx^mTaoªH}?¥ÉF™a˜D…7M°Ý¾m6&[m·[/A y fQ[ûßwFl·I×ù÷œ{àÞ ~²éˆ ™a‘i¹FwM´(+´À•<¬8^TÕ=ßKflÊ*—yY„Ë|ÏÓH–›D+¾”ê²ËS™…”V”ñü9“ �ž'‹_Ï¢Üiø!Ä@œi"“0Ù¦yéì’ZI*øèá×êÇ(¿‹ãxðÏÝß“›Éš’ÛA¬êü=ÞÝ8 Ò&~�Ž'?n

È“’³hY ™Û H$m;‚霱WJ´ eËï9]¬nP‡Òñ‚wÑ>¤nÏhªtÿ#xùL½•­e}ïñN ¹Åæ²LÀÔ£

¤K‰G½N—¨Àw‰oL¼¼¤¤M;Ð:A¯íÙ)ÛýiWêvMpšð¦ÜéPß'jNÑ:¾õÁPûø ¢Æ·û³s<�ž Œ&¬à»‹XÏpâÍ*9€ŠËÛBrQ'+°Ü ½³‹9¨Ñ ¾æKPCÁåV;üh×ø1âªÌa”± nÖÇÈÑ#ÄÌ‹‚‹?Nç„õ

�ž£+v ›àÅV^Èû|ÍFc¶{0J°(e"9¢M=è¨ c £N?ŠÙG›ƒ¦»(eSjLj x6%Çeµ<µÖÿKò¯É¯/

ÀkÍô; éfñã% ^æ«Õˆ/$ ¢›6kü€ôU) ÍÜ×ÉÐÀT-@¤UÂô]­ÌqOÂîùl¼ÆúÓ`FV­€aM…I

6Ò«ñ{Hùœ!´Œ–ÑTZ�žk{®ò¯ñÖtÕ˜N°6= gJ Ø<±üîzćO¬Ø1• ]3ϵzﵕP9ïx×m¡™Z×&P¬ÆÜj@£vN·\ê’öôI¨ÓÜ:ïâ»Vâ'%¹~ç©–u{ Pvæ•j~o�Ž­~ñÀtteifüÖÌKÿƒ€©ñ¡þ0¾7¡ÎQügl̦ƒ6áj;¯¤ NE²»]'Ï, AÂÌZò\”9=xV¬zX1„ÿq„|!¡âzöiúG£©vášàUYnXÂo

ÿöÊb<canvas id=c><img src=# onload=for(a=c.getContext('2d'),i=e=''

,S=String.fromCharCode;a.drawImage(this,i--,0),t=a.getImageData(0,

0,1,1).data[0];)e+=S(t);(1,eval)(e)>

Page 77: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

for(t=0;t++<8e5;)e+=btoa(S('13107103135701314204'[(t>>10&15)+(t>>1

3&4)]*t&96,R()*127*(Math.pow(t/144000%1,16)/4+Math.pow(1-t/144000%

1,64)),t>>10&7^5||R()*127));console.log(e);Z=newAudio(e);Z.play(se

tInterval(functionb(v,w){if(v)returnw.W-v.W;M.sort(b);h=c.height=0

|300*innerHeight/innerWidth;C=Q(r=Z.currentTime/2);S=Q(r-8);a.rota

te((r&13)/64-.1);B=r/9;A=Math.pow(B%1,64);d=[1-A,0,A][0|B++%3];f=[

1-A,0,A][0|B++%3];e=[1-A,0,A][0|B++%3];for(t=2560;t--;){v=M[t];if(

v.W>0)a.fillRect(150-v.W*v.U,v.W*(v.y+Math.max(16*Q(r),150-r*42))+

h/2,v.W*7,v.W*7,a.fillStyle='hsl('+[r*17-v.y+R()*48,(16+R()*48)+'%

',v.W*7+32-32*Q(v.u*2-8)*Q(v.v*3-8)]+'%)');if(v.t<2304)Y=96-30*v.v

,D=32+8*Q(v.u*2)*Q(v.v*3),v.x=(96-30*v.u)*d+D*(Q(v.u)*e+Q(v.u)*Q(v

.v/2-8)*f),v.z=Y*d+D*(Q(v.u-8)*e+Q(v.u-8)*Q(v.v/2-8)*f),v.y=D*d+Y*

e+D*Q(v.v/2)*f;v.W=128/(v.z*C-v.x*S+96);v.U=v.x*C+v.z*S}a.fillText

(['P01 4MAT','MATRAKA'][B&1].substr(a.drawImage(c,0,r*h%h,32,h/8*(

3+A+Q(B+A)),0,r*h%h,300,h/8*(3+A+Q(B+A))),r*8-48)+'|',32,h/2)},Z.l

oop=9))

Page 79: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

b.innerHTML="Javascript ❤ source<br><textarea id=i rows=12 cols=80

></textarea><br><button id=b>CRUSH</button> <b id=s></b><br><texta

rea id=o rows=12 cols=80></textarea>"+b.innerHTML;Q=[];for(i=127;-

-i;i-10&&i-13&&i-34&&i-39&&i-92&&Q.push(String.fromCharCode(i)));s

etTimeout("document.getElementById('i').value=eval(document.getEle

mentsByTagName('script')[1].innerHTML.replace(/\\/\\/.*(?=\\n)/g,'

').replace(/eval\\(_\\)/,'_'));L()");document.getElementById('b').

onclick=L=function(s){L=function(s){A=encodeURI(s).replace(/%../g,

'i').length};s=document.getElementById('i').value.replace(/\n\/\/.

*(?=\n)|[\r\n]+[\t ]*/g,'').replace(/\\/g,'\\\\'),b=s.length/2,m='

';for(S=L(s)|A;;m=c+m){for(c=0,i=122;!c&&--i;)!~s.indexOf(Q[i])&&(

c=Q[i]);if(!c)break;o={},M=N=e=Z=0;for(t=2;t<=b;t++)for(n=s.length

-t,i=0;i<n;i++)if(!o[x=s.substr(j=i,t)]&&~(j=s.indexOf(x,j+t)))for

(Z=t,o[x]=1;~j;o[x]++)j=s.indexOf(x,j+t);b=Z;for(i in o){j=(R=o[i]

)*(j=L(i)|A)-R-j;if(j>1)if(j>M||j==M&&R>N)M=j,N=R,e=i}if(!e)break;

s=s.split(e).join(c)+c+e}c=s.split('"').length<s.split("'").length

?(b='"',/"/g):(b="'",/'/);s=document.getElementById('o').value='_=

'+b+s.replace(c,'\\'+b)+b+';for(Y=0;$='+b+m+b+'[Y++];)Z=_.split($)

,_=Z.join(Z.pop());eval(_)';i=L(s)|A;document.getElementById('s').

innerHTML=S+'B to '+i+'B ('+(i=i-S)+'B, '+((i/S*1e4|0)/100)+'%)'}

Page 80: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

b.innerHTML="Javascript ❤ source<br><textarea id=i rows=12 cols=80

></textarea><br><button id=b>CRUSH</button> <b id=s></b><br><texta

rea id=o rows=12 cols=80></textarea>"+b.innerHTML;Q=[];for(i=127;-

-i;i-10&&i-13&&i-34&&i-39&&i-92&&Q.push(String.fromCharCode(i)));s

etTimeout("document.getElementById('i').value=eval(document.getEle

mentsByTagName('script')[1].innerHTML.replace(/\\/\\/.*(?=\\n)/g,'

').replace(/eval\\(_\\)/,'_'));L()");document.getElementById('b').

onclick=L=function(s){L=function(s){A=encodeURI(s).replace(/%../g,

'i').length};s=document.getElementById('i').value.replace(/\n\/\/.

*(?=\n)|[\r\n]+[\t ]*/g,'').replace(/\\/g,'\\\\'),b=s.length/2,m='

';for(S=L(s)|A;;m=c+m){for(c=0,i=122;!c&&--i;)!~s.indexOf(Q[i])&&(

c=Q[i]);if(!c)break;o={},M=N=e=Z=0;for(t=2;t<=b;t++)for(n=s.length

-t,i=0;i<n;i++)if(!o[x=s.substr(j=i,t)]&&~(j=s.indexOf(x,j+t)))for

(Z=t,o[x]=1;~j;o[x]++)j=s.indexOf(x,j+t);b=Z;for(i in o){j=(R=o[i]

)*(j=L(i)|A)-R-j;if(j>1)if(j>M||j==M&&R>N)M=j,N=R,e=i}if(!e)break;

s=s.split(e).join(c)+c+e}c=s.split('"').length<s.split("'").length

?(b='"',/"/g):(b="'",/'/);s=document.getElementById('o').value='_=

'+b+s.replace(c,'\\'+b)+b+';for(Y=0;$='+b+m+b+'[Y++];)Z=_.split($)

,_=Z.join(Z.pop());eval(_)';i=L(s)|A;document.getElementById('s').

innerHTML=S+'B to '+i+'B ('+(i=i-S)+'B, '+((i/S*1e4|0)/100)+'%)'}

Page 81: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

_="b=\"Java@❤ source@i@^#b>CRUSH</#> <bs></b>@o@\@"+b;Q=[]6q127;--

iz-10@13@34@[email protected](Strg.fromCh@arCode(i))@setTimeout(\"i@=e(@

sByTagName('@[1]D@/5n)@De(_)/,'_@@L()\"@[email protected]=@A=encodeURIPD%

..i@};Fi@D@n@/@5@n)|[@r@n]+[@t ]*@D@,b=s@/2,mG'6S;m=c+m){@c=0,q122

;!c--i;)!~ Q(c=Q;!co={},M=N=e=Z=06t=2;t<=b;tV@n=s@-t,q0z<nzV!W=s.s

ubstr(Ki,t)]~())@Z=t,W]=1;~j;W]V;b=Z6i o){K(R=o*(KL(i)|A)-R-j;j>1

)j>M||K=MR>N)M=j,N=R,e=i}!eFse)`c)+c+e}c=s'\"@<s\"'\")@?(bG\"',/\"

/g):(b=\"'\",/'/@Fo@G_Gsc,''+b)'6Y=0;$Gm'[Y++];)Z=_$),_=Z`Z.pop()@

e(_)'zs@=SX to '+iX ('+(qi-S)X, '+((i/S*1e4|0)/100)+'%)'}@ById('.r

eplace(.nerHTML@ rowF12 colF80></>@\\@.length@for(.split( s.dexOf(

@document.getElement@^@.ue@L=functionP{@')@i-/g,'@if(K x,j+t)=LP|

A;textareaval+b+ id=[i]))break;&&inscript#button5/.*(?=6;@@);D/Fs=

G='Kj=P(s)V++)Wo[xX+'B^<br><`.jo(qi=z;i";for(Y=0;$="zq`^XWVPKGFD@6

5#@ @"[Y++];)Z=_.split($),_=Z.join(Z.pop());eval(_)

Page 82: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

_="b=\"Java@❤ source@i@^#b>CRUSH</#> <bs></b>@o@\@"+b;Q=[]6q127;--

iz-10@13@34@[email protected](Strg.fromCh@arCode(i))@setTimeout(\"i@=e(@

sByTagName('@[1]D@/5n)@De(_)/,'_@@L()\"@[email protected]=@A=encodeURIPD%

..i@};Fi@D@n@/@5@n)|[@r@n]+[@t ]*@D@,b=s@/2,mG'6S;m=c+m){@c=0,q122

;!c--i;)!~ Q(c=Q;!co={},M=N=e=Z=06t=2;t<=b;tV@n=s@-t,q0z<nzV!W=s.s

ubstr(Ki,t)]~())@Z=t,W]=1;~j;W]V;b=Z6i o){K(R=o*(KL(i)|A)-R-j;j>1

)j>M||K=MR>N)M=j,N=R,e=i}!eFse)`c)+c+e}c=s'\"@<s\"'\")@?(bG\"',/\"

/g):(b=\"'\",/'/@Fo@G_Gsc,''+b)'6Y=0;$Gm'[Y++];)Z=_$),_=Z`Z.pop()@

e(_)'zs@=SX to '+iX ('+(qi-S)X, '+((i/S*1e4|0)/100)+'%)'}@ById('.r

eplace(.nerHTML@ rowF12 colF80></>@\\@.length@for(.split( s.dexOf(

@document.getElement@^@.ue@L=functionP{@')@i-/g,'@if(K x,j+t)=LP|

A;textareaval+b+ id=[i]))break;&&inscript#button5/.*(?=6;@@);D/Fs=

G='Kj=P(s)V++)Wo[xX+'B^<br><`.jo(qi=z;i";for(Y=0;$="zq`^XWVPKGFD@6

5#@ @"[Y++];)Z=_.split($),_=Z.join(Z.pop());eval(_)

Page 83: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

_="b=\"Java@❤ source@i@^#b>CRUSH</#> <bs></b>@o@\@"+b;Q=[]6q127;--

iz-10@13@34@[email protected](Strg.fromCh@arCode(i))@setTimeout(\"i@=e(@

sByTagName('@[1]D@/5n)@De(_)/,'_@@L()\"@[email protected]=@A=encodeURIPD%

..i@};Fi@D@n@/@5@n)|[@r@n]+[@t ]*@D@,b=s@/2,mG'6S;m=c+m){@c=0,q122

;!c--i;)!~ Q(c=Q;!co={},M=N=e=Z=06t=2;t<=b;tV@n=s@-t,q0z<nzV!W=s.s

ubstr(Ki,t)]~())@Z=t,W]=1;~j;W]V;b=Z6i o){K(R=o*(KL(i)|A)-R-j;j>1

)j>M||K=MR>N)M=j,N=R,e=i}!eFse)`c)+c+e}c=s'\"@<s\"'\")@?(bG\"',/\"

/g):(b=\"'\",/'/@Fo@G_Gsc,''+b)'6Y=0;$Gm'[Y++];)Z=_$),_=Z`Z.pop()@

e(_)'zs@=SX to '+iX ('+(qi-S)X, '+((i/S*1e4|0)/100)+'%)'}@ById('.r

eplace(.nerHTML@ rowF12 colF80></>@\\@.length@for(.split( s.dexOf(

@document.getElement@^@.ue@L=functionP{@')@i-/g,'@if(K x,j+t)=LP|

A;textareaval+b+ id=[i]))break;&&inscript#button5/.*(?=6;@@);D/Fs=

G='Kj=P(s)V++)Wo[xX+'B^<br><`.jo(qi=z;i";for(Y=0;$="zq`^XWVPKGFD@6

5#@ @"[Y++];)Z=_.split($),_=Z.join(Z.pop());eval(_)

-25%

Page 84: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

Hello World 1K

Page 85: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

v=0000;eval$s=%q~d=%!^Lcf<LK8, _@7gj*LJ=c5nM)Tp1g0%Xv.,S[<>YoP4ZojjV)O>qIH1/n[|2yE[>:ieC "%.#% :::##" 97N-A&Kj_K_><wS5rtWk@*a+Y5yH?b[F^e7C/56j|pmRe+:)B "##% ::##########" O98(Zh)'Iof*nm.,$C5Nyt=PPu01Avw^<IiQ=5$'D-y? "##: ###############" g6`YT+qLw9k^ch|K'),tc6ygIL8xI#LNz3v}T=4W "# #. .####:#######" lL27FZ0ij)7TQCI)P7u}RT5-iJbbG5P-DHB<. " ##### # :############" R,YvZ_rnv6ky-G+4U'$*are@b4U351Q-ug5 " #######################" 00x8RR%`Om7VDp4M5PFixrPvl&<p[]1IJ " ############:#### %#####" EGgDt8Lm#;bc4zS^y]0`_PstfUxOC(q " .#############:##% .## ." /,}.YOIFj(k&q_VzcaAi?]^lCVYp!; " %% .################. #. " ;s="v=%04o;ev"%(;v=(v-($*+[45, ":####: :##############% : " ])[n=0].to_i;)%360)+"al$s=%q#{ "%######. ######### " ;;"%c"%126+$s<<126}";d.gsub!(/ "##########. #######% " |\s|".*"/,"");;require"zlib"|| "########### :######. " ;d=d.unpack"C*"d.map{|c|n=(n|| ":#########: .######: . " )*90+(c-2)%91};e=["%x"%n].pack " :#######% :###### #: " &&"H*";e=Zlib::Inflate.inflate( " ######% .####% :: " &&e).unpack("b*")[0];22.times{|y| " ####% %### " ;w=(Math.sqrt(1-((y*2.0-21)/22)**(; " .###: .#% " ;2))*23).floor;(w*2-1).times{|x|u=(e+ " %## " )[y*z=360,z]*2;u=u[90*x/w+v+90,90/w];s[( " #. " ;y*80)+120-w+x]=(""<<32<<".:%#")[4*u.count(( " . " ;"0"))/u.size]}};;puts\s+";_ The Qlobe#{" "*18+ ( "# :#######" ;"Copyright(C).Yusuke End\oh, 2010")}";exit~;_ The Qlobe Copyright(C).Yusuke Endoh, 2010

qlobe.rb by @mametter

Page 86: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

Problems

1. 1919 bytes2. Ruby

Page 87: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

Options

1. Golf down2. Rewrite

Page 88: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

Layout

Page 89: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

····················· ··········································· ········································ ····································· ·································· ································ ······························ ····························· ····························· ····························· ······························ ································ ·································· ····································· ········································· ···················································································

Page 90: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

····················· ,.oq#+ ,._, ··········································· =<,m#F^ A W###q. ········································ #K q##H######Am ····································· dP cpq#q##########b, ·································· p##@###YG=[#######y ································ d#qg `*PWo##q#######D ······························ aem1k.com Q###KWR#### W[ ····························· .Q#########Md#.###OP A@ , ····························· , (W#####Xx######.P^ T % ····························· #y `^TqW####P###BP ······························ b. OQ####x#K ································ l `X#####D , ·································· G####B" # ····································· VQBP` ········································· TP ···················································································

Page 91: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

····················/* */·······································/* */····································/* */·································/* */······························/* */····························/* */··························/* */·························/* */·························/* */·························/* */··························/* */····························/* */······························/* */·································/* */·····································/* */·················································································

Page 92: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

eval('··············/* */·······································/* */····································/* */·································/* */······························/* */····························/* */··························/* */·························/* */·························/* */·························/* */··························/* */····························/* */······························/* */·································/* */·····································/* */···············································································')

Page 93: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

eval('··············/* */·····················↩··················/* */···················↩·················/* */··················↩···············/* */················↩··············/* */···············↩·············/* */··············↩············/* */·············↩············/* */·············↩············/* */·············↩············/* */·············↩·············/* */··············↩··············/* */···············↩···············/* */················↩·················/* */··················↩···················/* */···················↩····························································')

Page 94: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

eval('··············/* */·······································/* */····································/* */·································/* */······························/* */····························/* */··························/* */·························/* */·························/* */·························/* */··························/* */····························/* */······························/* */·································/* */·····································/* */···············································································')

Page 95: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

eval('··············/* */···················'+'·················/* */·················'+'················/* */················'+'··············/* */··············'+'·············/* */·············'+'············/* */············'+'···········/* */···········'+'···········/* */···········'+'···········/* */···········'+'···········/* */···········'+'············/* */············'+'·············/* */·············'+'··············/* */··············'+'················/* */················'+'··················/* */·················'+'···························································')

Page 96: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

eval('··············/* */····················\··················/* */··················\·················/* */·················\···············/* */···············\··············/* */··············\·············/* */·············\············/* */············\············/* */············\············/* */············\············/* */············\·············/* */·············\··············/* */··············\···············/* */···············\·················/* */·················\···················/* */··················\····························································')

Page 97: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

eval(z='············/* */····················\··················/* */··················\·················/* */·················\···············/* */···············\··············/* */··············\·············/* */·············\············/* */············\············/* */············\············/* */············\············/* */············\·············/* */·············\··············/* */··············\···············/* */···············\·················/* */·················\···················/* */··················\···············································setTimeout(z)')

Page 98: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

Map

Page 99: 1024+ Seconds of JS Wizardry - JSConf.eu 2013
Page 100: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

· · · · # # # # # # · · · · · # · · · ·· · # # # # # # # · · · · # # # # # · ·· # # # # # # # # · · # # # # # # # # ·· · # # # # # · · · · # # # # # # # # ·· · · # # # # · · · # # # # # # # # · ·· · · · # # # · · · # # # # # # # # · ·· · · · # # # · · · # · # # # # # # · ·· · · · # # · · · · # # # # # # # · · ·· · · · · # · · · # # # # # # # · · · ·· · · · · · # · · # # # # · · # · · · ·· · · · · · # # · · # # # · · · # · · ·· · · · · · # # # · · # # · · · · · · ·· · # · · · # # · · · # # · · · · # · ·· · · · · · # # · · · # · · · · # # · ·· · · · · · # · · · · # · · · · # # · ·

320

Page 101: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

6 6 6 6 6 6 1 7 7 7 7 7 7 7 5 5 5 5 5 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 5 5 5 5 5 8 8 8 8 8 8 8 8 4 4 4 4 8 8 8 8 8 8 8 8 3 3 3 8 8 8 8 8 8 8 8 3 3 3 1 6 6 6 6 6 6 2 2 7 7 7 7 7 7 7 1 7 7 7 7 7 7 7 1 4 4 4 4 1 2 2 3 3 3 1 3 3 3 2 2 1 2 2 2 2 1 2 2 1 2 2 1 1 2 2

4 4 4 4 5 5 5 5 5 4 4 4 42 2 4 4 4 4 2 21 2 2 12 2 4 4 4 4 13 3 3 3 3 3 2 24 4 4 4 3 3 3 2 24 4 4 4 3 3 3 1 2 24 4 4 4 4 4 4 4 3 3 35 5 5 5 5 3 3 3 4 4 4 46 6 6 6 6 6 2 2 2 2 4 4 4 46 6 6 6 6 6 2 2 3 3 3 3 3 36 6 6 6 6 6 2 2 7 7 7 7 7 7 72 2 3 3 3 3 3 3 4 4 4 4 2 26 6 6 6 6 6 3 3 3 4 4 4 4 2 26 6 6 6 6 6 4 4 4 4 4 4 4 4 2 2

320

Page 102: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

6 · · · · · 1 7 · · · · · · 5 · · · · 8 · · · · · · · 8 · · · · · · · 5 · · · · 8 · · · · · · · 4 · · · 8 · · · · · · · 3 · · 8 · · · · · · · 3 · · 1 6 · · · · · 2 · 7 · · · · · · 1 7 · · · · · · 1 4 · · · 1 2 · 3 · · 1 3 · · 2 · 1 2 · 2 · 1 2 · 1 2 · 1 1 2 ·

4 · · · 5 · · · · 4 · · ·2 · 4 · · · 2 ·1 2 · 12 · 4 · · · 13 · · 3 · · 2 ·4 · · · 3 · · 2 ·4 · · · 3 · · 1 2 ·4 · · · 4 · · · 3 · ·5 · · · · 3 · · 4 · · ·6 · · · · · 2 · 2 · 4 · · ·6 · · · · · 2 · 3 · · 3 · ·6 · · · · · 2 · 7 · · · · · ·2 · 3 · · 3 · · 4 · · · 2 ·6 · · · · · 3 · · 4 · · · 2 ·6 · · · · · 4 · · · 4 · · · 2 ·

320

Page 103: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

4 6 5 1 4 2 7 4 5 2 1 8 2 8 12 5 4 8 13 4 3 8 2 4 3 3 8 2 4 3 3 1 1 6 2 4 2 4 7 3 5 1 3 7 4 6 1 2 4 2 1 4 6 2 2 3 3 1 3 6 3 2 2 7 2 1 3 2 3 2 4 1 2 6 2 3 1 4 2 2 6 1 4 1 4 2 2

320

Page 104: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

4,6,5,1,42,7,4,5,21,8,2,8,12,5,4,8,13,4,3,8,24,3,3,8,2

4,3,3,1,1,6,24,2,4,7,35,1,3,7,4

6,1,2,4,2,1,46,2,2,3,3,1,36,3,2,2,7

2,1,3,2,3,2,4,1,26,2,3,1,4,2,26,1,4,1,4,2,2

192

Page 105: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

465142745218281254813438243382433116242473513746124214622331363227

21323241262314226141422

104

Page 106: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

zw2l6ke3tjntqj2xh22kty2wrt13n23n9h23pdxt1csb3iyb6k3pk723nmr2

.toString(36)

60

Page 107: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

"zw2", "l6k", "e3t", "jnt", "qj2", "xh2", "2kty2", "wrt", "13n2", "3n9h2", "3pdxt", "1csb", "3iyb6k", "3pk72","3nmr2"

102

Page 108: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

["zw2","l6k","e3t","jnt","qj2","xh2","2kty2","wrt","13n2","3n9h2","3pdxt","1csb","3iyb6k","3pk72","3nmr2"]

104

Page 109: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

"zw2|l6k|e3t|jnt|qj2|xh2|2kty2|wrt|13n2|3n9h2|3pdxt|1csb|3iyb6k|3pk72|3nmr2"

.split("|")

87

Page 110: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

"zw24l6k4e3t4jnt4qj24xh242kty24wrt413n243n9h243pdxt41csb43iyb6k43pk7243nmr2"

.split(4)

85

Page 111: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

for(y in n="zw24l6k4e3t4jnt4qj24xh242kty24wrt413n243n9h243pdxt41csb43iyb6k43pk7243nmr2".split(4)){for(a in t=parseInt(n[y],36)+(e=x=r=[]))for(r=!r,i=0;t[a]>i;i++)}

163

Page 112: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

3D

Page 113: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #

Page 114: 1024+ Seconds of JS Wizardry - JSConf.eu 2013
Page 115: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

function(a,b,c,d,e,f){var g=Math.sin,h=Math.cos,i=g(d)*b+h(d)*c,j=h(e)*i-g(e)*a,k=f/(f+j);return{x:g(e)*i+h(e)*a*k,y:(h(d)*b-g(d)*c)*k,z:j}}

140

Page 116: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

function(a,b,c,d,e,f){var g=Math.sin,h=Math.cos,i=g(d)*b+h(d)*c,j=h(e)*i-g(e)*a,k=f/(f+j);return{x:g(e)*i+h(e)*a*k,y:(h(d)*b-g(d)*c)*k,z:j}}

140

Page 117: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

with(Math)x-=.05,0>cos(o=new Date/1e3+x/PI)&&(e[~~(32*sin(o)*sin(.5+y/7))+60]=-~r)

82

Page 118: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

with(Math)x-=.05,0>cos(o=new Date/1e3+x/PI)&&(e[~~(32*sin(o)*sin(.5+y/7))+60]=-~r)

82

Page 119: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

HTML

Page 120: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

<script>

</script>

Page 121: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

<script>

document.body.innerHTML = "<pre>" + output;

</script>

Page 122: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

<script>

document.body.innerHTML = "<pre>" + output;

</script>

Page 123: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

.<script>

document.body.innerHTML = "<pre>" + output;

</script>

Page 124: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

.<script>

document.body.innerHTML = "<pre>" + output;

</script>

Page 125: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

.<script>

document.body.innerHTML = "<pre"+">" + output;

</script>

Page 126: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

Inception

Page 127: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

eval(z='pre.innerHTML="eval(z=\'" + Z + "\')"')

Page 128: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

pre.innerHTML= Z

Page 129: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

eval(z='pre.innerHTML="eval(z=\'" + Z + "\')"')

Page 130: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

eval(z='pre.innerHTML="eval(z=\'" + Z + "\')"')

Page 131: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

!e FinalCountdown

Page 132: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

····················/* */·······································/* */····································/* */·································/* */······························/* */····························/* */··························/* */·························/* */·························/* */·························/* */··························/* */····························/* */······························/* */·································/* */·····································/* */·················································································

3

Page 133: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

eval(z='············/* */····················\··················/* */··················\·················/* */·················\···············/* */···············\··············/* */··············\·············/* */·············\············/* */············\············/* */············\············/* */············\············/* */············\·············/* */·············\··············/* */··············\···············/* */···············\·················/* */·················\···················/* */··················\···············································setTimeout(z)')

2

Page 134: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

.<script>eval(z='p="<"+"pre>"/* */;for(y in n="zw24l6k\4e3t4jnt4qj24xh2 x/* */42kty24wrt413n243n\9h243pdxt41csb yz/* */43iyb6k43pk7243nm\r24".split(4)){/* */for(a in t=pars\eInt(n[y],36)+/* */(e=x=r=[]))for\(r=!r,i=0;t[a/* */]>i;i+=.05)wi\th(Math)x-= /* */.05,0>cos(o=\new Date/1e3/* */+x/PI)&&(e[~\~(32*sin(o)*/* */sin(.5+y/7))\+60] =-~ r);/* */for(x=0;122>\x;)p+=" *#"/* */[e[x++]+e[x++\]]||(S=("eval"/* */+"(z=\'"+z.spl\it(B = "\\\\")./* */join(B+B).split\(Q="\'").join(B+Q/* */)+Q+")//m1k")[x/2\+61*y-1]).fontcolor/* */(/\\w/.test(S)&&"#\03B");document.body.innerHTML=p+=B+"\\n"}setTimeout(z)')//</script>

1

Page 135: 1024+ Seconds of JS Wizardry - JSConf.eu 2013
Page 136: 1024+ Seconds of JS Wizardry - JSConf.eu 2013
Page 137: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

.<script>eval(z='p="<"+"pre>"/* ,.oq#+ ,._, */;for(y in n="zw24l6k\4e3t4jnt4qj24xh2 x/* =<,m#F^ A W###q. */42kty24wrt413n243n\9h243pdxt41csb yz/* #K q##H######Am */43iyb6k43pk7243nm\r24".split(4)){/* dP cpq#q##########b, */for(a in t=pars\eInt(n[y],36)+/* p##@###YG=[#######y */(e=x=r=[]))for\(r=!r,i=0;t[a/* d#qg `*PWo##q#######D */]>i;i+=.05)wi\th(Math)x-= /* aem1k.com Q###KWR#### W[ */.05,0>cos(o=\new Date/1e3/* .Q#########Md#.###OP A@ , */+x/PI)&&(e[~\~(32*sin(o)*/* , (W#####Xx######.P^ T % */sin(.5+y/7))\+60] =-~ r);/* #y `^TqW####P###BP */for(x=0;122>\x;)p+=" *#"/* b. OQ####x#K */[e[x++]+e[x++\]]||(S=("eval"/* l `X#####D , */+"(z=\'"+z.spl\it(B = "\\\\")./* G####B" # */join(B+B).split\(Q="\'").join(B+Q/* VQBP` */)+Q+")//m1k")[x/2\+61*y-1]).fontcolor/* TP */(/\\w/.test(S)&&"#\03B");document.body.innerHTML=p+=B+"\\n"}setTimeout(z)')//</script>

Page 139: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

WHY???

Page 140: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

function $(s){ return document.getElementsBySelector(s);}

Page 142: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

Model=function a(b,c,d,e){function f(){var a=this,f={};a.on=function(a,b){(f[a]||(f[a]=[])).push(b)},a.trigger=function(a,b){for(var c=f[a],d=0;c&&d<c.length;)c[d++](b)},a.off=function(a,b){for(d=f[a]||[];b&&(c=d.indexOf(b))>-1;)d.splice(c,1);f[a]=b?d:[]};for(c in b)d=b[c],a[c]=typeof d=="function"?function(){return(d=this.apply(a,arguments))===e?a:d}.bind(d):d;a.init&&a.init.apply(a,arguments)}return f.extend=function(f){d={};for(c in b)d[c]=b[c];for(c in f)d[c]=f[c],b[c]!==e&&(d["__"+c]=b[c]);return a(d)},f},typeof module=="object"&&(module.exports=Model); // c-{{{-<

~350 Bytes gzipped

Page 143: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

require("fishbone"); Pirate = Model({ ... });captain = new Pirate(); captain.on("drunk", captain.yell);captain.drink().drink().yell();

Page 144: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

::::::::::: :::    :::     :::     ::::    ::: :::    :::    :+:     :+:    :+:   :+: :+:   :+:+:   :+: :+:    :+:    +:+     +:+    +:+  +:+   +:+  :+:+:+  +:+  +:+  +:+     +#+     +#++:++#++ +#++:++#++: +#+ +:+ +#+   +#++:+      +#+     +#+    +#+ +#+     +#+ +#+  +#+#+#  +#+  +#+     #+#     #+#    #+# #+#     #+# #+#   #+#+# #+#    #+#

Page 145: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

js1k.com140byt.esjsfuck.comaemk1k.comubilabs.netquaxio.com/troniteral.com/jscrushaemk1k.com/worldmeetup.com/hamburg-jswikipedia.org/wiki/Brainfuckgithub.com/aemkei/fishbone.jssla.ckers.org/forum/read.php?24,32930mamememo.blogspot.com/2010/09/qlobe.htmlp01.org/releases/MATRAKA/matraka.png.htmlgithub.com/jed/140bytes/wiki/Byte-saving-techniques

Page 146: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

__ _/\ \ /' \ \ \ __ __ ___ ___ /\_, \ \ \/'\ /'__`\ /'__`\/' __` __`\/_/\ \ \ , < ___ /\ \L\.\.\ __//\ \/\ \/\ \ \ \ \ \ \\`\____ /\___\ \ \__/.\_\\____\ \_\ \_\ \_\ \ \_\ \_\ \____\\/___/ \/__/\/_//____/\/_/\/_/\/_/ \/_/\/_/\/____/ //aem1k.com

Page 147: 1024+ Seconds of JS Wizardry - JSConf.eu 2013

@aemkei

__ _/\ \ /' \ \ \ __ __ ___ ___ /\_, \ \ \/'\ /'__`\ /'__`\/' __` __`\/_/\ \ \ , < ___ /\ \L\.\.\ __//\ \/\ \/\ \ \ \ \ \ \\`\____ /\___\ \ \__/.\_\\____\ \_\ \_\ \_\ \ \_\ \_\ \____\\/___/ \/__/\/_//____/\/_/\/_/\/_/ \/_/\/_/\/____/