- What can we create with only 140 bytes of JavaScript?
- How do we write small programs that output their own source in a different way?
- Why do we write code in English and limit us to ASCII characters?
- Can we write JS that is also valid CSS and HTML at the same time?
Follow Martin on his journey through a maze of code where the boundaries between art and programming are blurred. This entertaining talk will show off invisible code, tweet-sized games, Asian programs, symmetric JavaScript, polyglot inceptions, self-modifying functions, exotic symbols, and much more mind-blowing examples.
.jpg){kind=avatar}
.jpg){kind=small}
.jpg){kind=avatar}
aemkei
hakkadaikon
rkaga
cyberagentdevelopers
autifyhq
mhrtech
kazushi_ohata
fullkaiten
lycorptech_jp
smt7174
sferik
brad_frost
afnizarnur
smashingmag
scottboms
morganepeng
paigeccino
eileencodes
addyosmani
aki_iinuma
lynnandtonic
![S="\40\n";M="map";i=991;for(z = [ ] ; i ; )z[--i]=i%30? 8 :](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_5.jpg){kind=link}
/%100;C--;)0,,,C,.6C7==3,U44&p)*]=Zfyfor(/2DfcWY(M- Cp/(+1.82*t)<0&C)>.7).57+.79)C in c)c[C[0]+[C[6]]C;t=M=y=o =I=2,setInterval(h=>{t=t%3+T,a.width=a.height=$=9"#111"Zg C"lighter"ZsS"#333",$,$XtaW$6XsC"#0ff",C=82,R=t/9-23,p=R<3 ?R:3,M+=o=!M|M>78?-o:o,y+=I=!y|y>2?-I:I,R>0&&(DsB5,R>5&&Ds RW-C2*-CC2.8,(y-2p,24*y/C/3-9C188)XsBi=1;i++<24;c.clip()){ if(p=t+i|R=$/(i-tYs=R/4k=U28?0:/12*5$*9/R,l=U75?0:k`hsl($](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_19.jpg){kind=link}
![<body onload=for(l=D=11;d=k=D--;x=78)l+=" ".charCodeAt(D<7?D:10-D).toString(2) +3;l=l.split(""),setInterval("if(x^X)for(h =i=l[x]=2,l[x+=d=2%k||9&l[x+(o=k%2||~-k*14 )]?9&l[x+d]?0:d:o]=4,l[X]&=7,b=D%4-2,b=b++ %2||b*14,9&l[X+b]?D++:X+=b,l[X]|=8;i<154;) p.innerHTML=h+='.# \\nx'[l[++i]]||0",X=151 )](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_29.jpg){kind=link}
-w, 0,9,60+S(Y^w)*20))x[f='fillRect'](w-S(v=Y/w+t)*Y,w+799/Y,v*w&8? 2e3/Y:x.fillStyle=R(Y*3,0,w),w/Y) // @jylikangas](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_33.jpg){kind=link}
![for(i=h=c.width=432;i--;)C(t-i)>0&&x.fillText('.⬤'['榁 翻♮⭋ラ 㓁⢠挎ᩐ肦䰠椉䠊ᑒꊐင'.charCodeAt(i/16)>>i%16&1],192+(i*h-i*i)**.5*S(t- i)/2,i/2+9) // @p01](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_42.jpg){kind=link}
![[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[]) [+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]][([][(![]+[])[+[]]+([![]] +[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+ []+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![ ]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+ !+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[ ]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[]) [+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![] +[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+ (!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!!](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_49.jpg){kind=link}
![![] => false !![] => true](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_50.jpg){kind=link}
![![] + "" => "false" !![] + "" => "true"](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_51.jpg){kind=link}
!["true"[0] => "t" "true"[1] => "r" "true"[2] => "u" "true"[3]](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_52.jpg){kind=link}
!["false" [1] "false" [2] "true" [3] "true" [1] "true" [0]](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_53.jpg){kind=link}
![[]["constructor"]["constructor"]("alert(1)")()](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_58.jpg){kind=link}
![[]["constructor"]["constructor"]("alert(1)")()](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_59.jpg){kind=link}
![function["constructor"]("alert(1)")()](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_60.jpg){kind=link}
![function["constructor"]("alert(1)")()](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_61.jpg){kind=link}
![{(.0-{}-0.)} xXXx =wYYw= ([]+!!+[]) [0.**.0] +[([])]+ (''+!!+'') [0-~+!!+~-0] +([]+[]+[])+ (8+{}+8)](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_68.jpg){kind=link}
![{ } "false" "false" "object" "true" "object" "()" ["xXXx"] ")("](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_69.jpg){kind=link}
![č='',ī=!č+č,=!ī+č,ķ=č+ {},ā=ī[č++],ū=ī[ģ=č],ļ=+ +ģ+č,d=ķ[ģ+ļ],ī[d+=ķ[č ]+(ī.+ķ)[č]+[ļ]+ā+ū+ī[ ģ]+d+ā+ķ[č]+ū][d]([č] +[ģ]+ī[ļ]+ū+ā+"(č)")()](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_75.jpg){kind=link}
![π='',β=!π+π,ε=!β+π,γ=π+ {},µ=β[π++],τ=β[φ=π],θ=+ +φ+π,λ=γ[φ+θ],β[λ+=γ[π]+ (β.ε+γ)[π]+ε[θ]+µ+τ+β[φ] +λ+µ+γ[π]+τ][λ](ε[π]+ε[φ] +β[θ]+τ+µ+"(π)")``](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_77.jpg){kind=link}
![ᚦ='',ᚢ=!ᚦ+ᚦ,ᚠ=!ᚢ+ᚦ,ᚻ=ᚦ+ {},ᛉ=ᚢ[ᚦ++],ᛊ=ᚢ[ᛇ=ᚦ],ᛟ=+ +ᛇ+ᚦ,ᛞ=ᚻ[ᛇ+ᛟ],ᚢ[ᛞ+=ᚻ[ᚦ ] + ( ᚢ . ᚠ +](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_78.jpg){kind=link}
![Ä='',ja=!Ä+Ä,nein=!ja+Ä,ö=Ä+{},Ü=ja[Ä+ +],sch=ja[Schnitzel=Ä],Bier=+ +Schnitzel+Ä,ß=ö[Schnitzel+Bier],ja[ß+ =ö[Ä]+(ja.nein+ö)[Ä]+nein[Bier] +Ü+sch+ja[Schnitzel]+ß+Ü+ö[Ä]+sch][ß] (nein[Ä]+nein[Schnitzel]+ja[Bier] +sch+Ü+"(Ä)")``](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_80.jpg){kind=link}
![ロ='',コ=!ロ+ロ,Y=!コ+ロ,Ƙ =ロ+{},ᗐ=コ[ロ++],Ξ=コ[Δ= ロ],ᐳ=++Δ+ロ,Ɩ=Ƙ[Δ+ᐳ],コ [Ɩ+=Ƙ[ロ]+(コ.Y+Ƙ)[ロ]+Y[ ᐳ]+ᗐ+Ξ+コ[Δ]+Ɩ+ᗐ+Ƙ[ロ]+ Ξ][Ɩ](Y[ロ]+Y[Δ]+コ[ᐳ]+Ξ +ᗐ+"(ロ)")``](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_81.jpg){kind=link}
![_='',__=!_+_,___=!__+_,____=_+{},_____=__[_+ +],______=__[_______=_],________=++_______+ _,_________=____[_______+________],__[_________+= ____[_]+(__.___+____)[_]+___[________]+_____+ ______+__[_______]+_________+_____+____[_] +______][_________](___[_]+___[_______]+ __[________]+______+_____+'(_)')()](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_82.jpg){kind=link}
![⽌='',⽌⽌=!⽌+⽌,⽌⽌⽌=!⽌⽌+⽌,⽌⽌⽌⽌=⽌+{},⽌⽌⽌ ⽌⽌=⽌⽌[⽌++],⽌⽌⽌⽌⽌⽌=⽌⽌[⽌⽌⽌⽌⽌⽌⽌=⽌], ⽌⽌⽌⽌⽌⽌⽌⽌=++⽌⽌⽌⽌⽌⽌⽌+⽌,⽌⽌⽌⽌⽌⽌⽌ ⽌⽌=⽌⽌⽌⽌[⽌⽌⽌⽌⽌⽌⽌+⽌⽌⽌⽌⽌⽌⽌⽌],⽌⽌[⽌ ⽌⽌⽌⽌⽌⽌⽌⽌+=⽌⽌⽌⽌[⽌]+(⽌⽌.⽌⽌⽌+⽌⽌⽌⽌) [⽌]+⽌⽌⽌[⽌⽌⽌⽌⽌⽌⽌⽌]+⽌⽌⽌⽌⽌+⽌⽌⽌⽌⽌⽌ +⽌⽌[⽌⽌⽌⽌⽌⽌⽌]+⽌⽌⽌⽌⽌⽌⽌⽌⽌+⽌⽌⽌⽌⽌ +⽌⽌⽌⽌[⽌]+⽌⽌⽌⽌⽌⽌][⽌⽌⽌⽌⽌⽌⽌⽌⽌](⽌⽌⽌ [⽌]+⽌⽌⽌[⽌⽌⽌⽌⽌⽌⽌]+⽌⽌[⽌⽌⽌⽌⽌⽌⽌⽌]+⽌⽌ ⽌⽌⽌⽌+⽌⽌⽌⽌⽌+"(⽌)")``](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_83.jpg){kind=link}
![A='',B=!A+A,C=!B+A,D=A+ {},E=B[A++],F=B[G=A],H=+ +G+A,I=D[G+H],B[I+=D[A]+ (B.C+D)[A]+C[H]+E+F+B[G] +I+E+D[A]+F][I](C[A]+C[G] +B[H]+F+E+"(A)")``](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_85.jpg){kind=link}
![A='',B=!A+A,C=!B+A,D=A+ {},E=B[A++],F=B[G=A],H=+ +G+A,I=D[G+H],B[I+=D[A]+ (B.C+D)[A]+C[H]+E+F+B[G] +I+E+D[A]+F][I](C[A]+C[G] +B[H]+F+E+"(A)")``](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_86.jpg){kind=link}
![I + // "c" D[A] + // "o" = "object"[0]](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_88.jpg){kind=link}
![C[A] + // "a" C[G] + // "l" B[H] +](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_89.jpg){kind=link}
![ぁ="",お =!ぁ+ぁ, ぃ=!お+ぁ ,ぅ=ぁ+{ },ざ=お[ 0],ご=お [1],く= ぅ[5],け =(お.ぃ+ ぅ)[1],](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_96.jpg){kind=link}
![A='',B=!A+A,C=!B+A,D=A+ {},E=B[A++],F=B[G=A],H=+ +G+A,I=D[G+H],B[I+=D[A]+ (B.C+D)[A]+C[H]+E+F+B[G] +I+E+D[A]+F][I](C[A]+C[G] +B[H]+F+E+"(A)")``](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_101.jpg){kind=link}
![A='',B=!A+A,C=!B+A,D=A+ {},E=B[A++],F=B[G=A],H=+ +G+A,I=D[G+H],B[I+=D[A]+ (B.C+D)[A]+C[H]+E+F+B[G] +I+E+D[A]+F][I](C[A]+C[G] +B[H]+F+E+"(A)")``](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_102.jpg){kind=link}
![='',=!+,=!+,=+{},=[++],=[=],=+++,=[+] [+=[]+(.+)[]+[]+++[]+++[]+][]([]+[]+[]+++"()")``](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_103.jpg){kind=link}
![([,,,,,]=[]+{},[,,,,,,,,,,]= [!!]+!+.)[+=+++++++++][](+++++`+`)``](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_104.jpg){kind=link}
![/ /[ =""], ='"', = == , = == ,](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_112.jpg){kind=link}
![S="\40\n";M="map";i=991;for(z = [ ] ; i ; )z[--i]=i%30? 8 :](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_170.jpg){kind=link}
![for(z=[i=991];i--;)z[i]=i%30? 8:"\n";F=d=>[30,1,-30,-1].map ((f,g,h)=>" "<z[f=d+2*h[3&g+i ]]&&(z[f]=z[(d+f)/2]=" ",i+=7 ,F(f))),F(32),z+"" // 133 bytes](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_172.jpg){kind=link}
![for(z=[c=66,i=132];i--;X=a=>_. map((b,e)=>1<z[b=a+2*_[3&e+i]] &&X(b,i=9*Math.random(z[b]=z[( a+b)/2]=F=0))))_=[12,1,-12,z[i ]=i%12?5:-1];for(X(14);F<2;F?0 :$=[...z],$[13]=$[c]=4)c^14?z[ c]=z[c]+~F&3:c=++F&&66,5>z[n=c +_[z[c]]]&&(c=n);""+$.map(b=>` ....o#`[++b]) //](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_181.jpg){kind=link}
![for(z=[c=66,i=132];i--;X=a=>_. map((b,e)=>1<z[b=a+2*_[3&e+i]] &&X(b,i=9*Math.random(z[b]=z[( a+b)/2]=F=0))))_=[12,1,-12,z[i ]=i%12?5:-1];for(X(14);F<2;F?0 :$=[...z],$[13]=$[c]=4)c^14?z[ c]=z[c]+~F&3:c=++F&&66,5>z[n=c +_[z[c]]]&&(c=n);""+$.map(b=>` ....o#`[++b])](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_182.jpg){kind=link}
![for(z=[c=66,i=132];i--;X=a=>_. map((b,e)=>1<z[b=a+2*_[3&e+i]] &&X(b,i=9*Math.random(z[b]=z[( a+b)/2]=F=0))))_=[12,1,-12,z[i ]=i%12?5:-1];for(X(14);F<2;F?0 :$=[...z],$[13]=$[c]=4)c^14?z[ c]=z[c]+~F&3:c=++F&&66,5>z[n=c +_[z[c]]]&&(c=n);""+$.map(b=>` ....o#`[++b])](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_183.jpg){kind=link}
![for(z=[c=66,i=132];i--;X=a=>_. map((b,e)=>1<z[b=a+2*_[3&e+i]] &&X(b,i=9*Math.random(z[b]=z[( a+b)/2]=F=0))))_=[12,1,-12,z[i ]=i%12?5:-1];for(X(14);F<2;F?0 :$=[...z],$[13]=$[c]=4)c^14?z[ c]=z[c]+~F&3:c=++F&&66,5>z[n=c +_[z[c]]]&&(c=n);""+$.map(b=>` ....o#`[++b])](https://files.speakerdeck.com/presentations/1ab806a93fcb474db0c016ddb70a1a16/slide_184.jpg){kind=link}
