Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Aleph – א

The Aleph – א

Presented at YGLF 2015 in Tel Aviv, Isreal

The JavaScript world has seen stunning demos in 1024 bytes, crazy hacks in 140 characters and esoteric sequences of only 6 different symbols. This talk will push the limits even further and reveal, how to write invisible code and singularities: Hidden programs that will generate new worlds out of a single character.

http://yougottalovefrontend.com/#speakers

Martin Kleppe

June 08, 2015
Tweet

More Decks by Martin Kleppe

Other Decks in Technology

Transcript

  1. א
    Martin Kleppe

    View Slide

  2. Bauhaus

    View Slide

  3. Ubilabs

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMNdyssoooyNMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMNy/..` ``` ``..--/+/+yydNMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMNy- ` `....+mMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMNs.` `` `...`/hNMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMN+` `-dMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMN: ` ``-dMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMN- ` ``.:/dMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMdo` `.-/-hMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMNo` .:/:/.:hMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMN/ `.../sms.:oNMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMo` ``..-//:yNMMm::shMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMy. ``..---.``.::///++oyNMMMMM+:soMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMN- ``..---::::/+ooosydmNMMMMMMN+//+NMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMy- `....---:://+oyhdmNNNNMMMMMMmy/-+NMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMmo `....----::/++ohmmNNNNMMMMMMMMN/./mMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMN/ `.....``````..-::/osyhddhhddddmNd..+NMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMy` `.--...```````` ``-:/+++/:.``./hs`oNMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMNo+:.` .---..``` `.`````.:+o:.` `:+mNNMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMm:` ```----...``````:-``.``-+mN+..``:NNMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMmh-..`..`-::--........---....-oNMNdyyhmMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMho:. `-..``-:----..--::::::-...-+NMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMNo. ` `.-------:://///:-....-/hMMMMMMMMMh`oMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMN- .-:------:::::--.`..--/sMMMh+yNMMh sMMMMMMMMMMMMMMM
    MMMMMMMMMMMMo `.-----..........`````.-+dNm+-/dN- +MMMMMMMMMMMMMMM
    MMMMMMMMMMMM. `.--...````````````````.oNMMo:.o/ +MMMMMMMMMMMMMMM
    MMMMMMMMMMMM/ `....````` ````.-:/+hmmy-:/y oMMMMMMMMMMMMMMM
    MMMMMMMMMMMMs ``..````````` ```.-+shyydh. dMMMMMMMMMMMMMMM
    MMMMMMMMMMMMy ``````````..``````--:/yMMNmh. /mMMMMMMMMMMMMMM
    MMMMMMMMMMMMs `````` ``````````.-oNNh+. .+oyhhmMMMMMMMM
    MMMMMMMMMMMM. ` ````````....-:ohmNd/` `-:+sh
    MMMMMMMMMMMs `...--/ydy:
    MMMMMMMMmdy- `.-.
    MMMNy+-.
    ms: ```
    Martin Kleppe
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM

    View Slide

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

    View Slide

  11. aem1k.com/world

    View Slide

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

    View Slide

  13. View Slide

  14. aem1k.com/mandelcode

    View Slide


  15. E<br/>= 1<br/>, z=1.07 ;<br/>function s( a)<br/>{ for(a&&(E=!E),H="",z *=<br/>.9,T*=.8,Y=0;2>Y;Y+=.1) {<br/>for (X=0;2>X;X+=.04){for(x=y=i<br/>=0;99>i &&99>=x*x+y*y;i++)t=2*x*y,x<br/>= x*x-y*y+z*X -z-Z/(1-T),y=t+z*Y-z-U;(/*<br/>MANDELCODE=A-QUINE-BY-AEMKEI=CLICK-TO-ZOOM*/<br/>H )+=" .+#"[ i%5]}H+=n}!E&&setTimeout(s<br/>,99),P[ I]=H}Z=1.74909351853611232,<br/>U = 3.40212772e-7,onclick=s;n<br/>="\n";P.textContent="<" +<br/>"pre id=P>\n"+P[I= "i"+<br/>"nnerHTML" ]<br/>T /*aem1k*/<br/>= -<br/>2<br/>

    View Slide

  16. View Slide

  17. View Slide

  18. jsfuck.com

    View Slide

  19. View Slide

  20. [][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]
    +[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]][(
    [(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!
    []]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+![+[]]]]]+
    [+[[!+[]+!+[]+!+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!
    []]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]
    []+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]]+([][[]]+[])[+[[+!+[]]
    (![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[+!+[]]]]+([][[]]+[
    [[+[]]]]+([][(![]+[])[[[[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])
    [[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!
    []]]]]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+([][(![]+[])[+[[+[]]]]+([][[]
    [])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(
    +[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]+
    []]]]+(!![]+[])[+[[+!+[]]]]]((![]+[])[+[[+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+
    [+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]+(!![]+[])[+[[+[]]]]+([][(![]+[])[+[[+
    []]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]+!+[]+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[
    +[]]]]+(!![]+[])[+[[!+[]+!+[]+!+[]]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[
    []+!+[]+!+[]+!+[]]]]+[+!+[]]+([][(![]+[])[+[[+[]]]]+([][[]]+[])[+[[!+[]+!+[]+!+[]
    []+!+[]]]]+(![]+[])[+[[!+[]+!+[]]]]+(!![]+[])[+[[+[]]]]+(!![]+[])[+[[!+[]+!+[]+!+
    []]]]+(!![]+[])[+[[+!+[]]]]]+[])[+[[+!+[]]]+[[!+[]+!+[]+!+[]+!+[]+!+[]+!+[]]]])()

    View Slide

  21. __
    | \
    _______ ______ ____| $$ ______
    / \ / \ / $$ / \
    | $$$$$$$| $$$$$$\| $$$$$$$| $$$$$$\
    | $$ | $$ | $$| $$ | $$| $$ $$
    | $$_____ | $$__/ $$| $$__| $$| $$$$$$$$
    \$$ \ \$$ $$ \$$ $$ \$$ \
    \$$$$$$$ \$$$$$$ \$$$$$$$ \$$$$$$$
    888 .d888 d8b
    888 d88P" Y8P
    888 888
    .d88b. .d88b. 888 888888 888 88888b. .d88b.
    d88P"88b d88""88b 888 888 888 888 "88b d88P"88b
    888 888 888 888 888 888 888 888 888 888 888
    Y88b 888 Y88..88P 888 888 888 888 888 Y88b 888
    "Y88888 "Y88P" 888 888 888 888 888 "Y88888
    888 888
    Y8b d88P Y8b d88P
    "Y88P" "Y88P"

    View Slide

  22. DHTML5
    DHTML5

    View Slide




  23. Title
    <br/>function init() { ... }<br/>


    ...


    View Slide



  24. Title
    <br/>function init() { ... }<br/>


    ...


    View Slide


  25. Title
    <br/>function init() { ... }<br/>


    ...

    View Slide


  26. ...

    Title
    <br/>function init() { ... }<br/>

    View Slide

  27. <br/>function init() { ... }<br/>

    ...

    View Slide

  28. <br/>function init() { ... }<br/>

    ...

    View Slide


  29. ...

    View Slide


  30. View Slide


  31. View Slide


  32. View Slide


  33. View Slide


  34. View Slide


  35. View Slide


  36. View Slide

  37. '+1>

    View Slide

  38. '+1>

    View Slide

  39. '+1>

    View Slide


  40. View Slide


  41. View Slide


  42. id=b onload="b.innerHTML=''+1"

    View Slide


  43. View Slide


  44. View Slide


  45. View Slide

  46. b.innerHTML=1

    View Slide

  47. min.js

    View Slide

  48. var x = Math.random();
    var y = Math.random();
    var z = Math.max(x, y);

    View Slide

  49. x = Math.random();
    y = Math.random();
    z = Math.max(x, y);

    View Slide

  50. M = Math;
    x = Math.random();
    y = Math.random();
    z = Math.max(x, y);

    View Slide

  51. M = Math;
    x = M.random();
    y = M.random();
    z = M.max(x, y);

    View Slide

  52. M = Math;
    r = M.random;
    x = M.random();
    y = M.random();
    z = M.max(x, y);

    View Slide

  53. M = Math;
    r = M.random;
    x = r();
    y = r();
    z = M.max(x, y);

    View Slide

  54. M = Math;
    r = "random";
    x = M[r]();
    y = M[r]();
    z = M.max(x, y);

    View Slide

  55. M = Math;
    r = "random";
    x = M[r="random"]();
    y = M[r]();
    z = M.max(x, y);

    View Slide

  56. M = Math;
    x = M[r="random"]();
    y = M[r]();
    z = M.max(x, y);

    View Slide

  57. with (Math){
    x = random();
    y = random();
    z = max(x, y);
    }

    View Slide

  58. with (Math)
    x = random(),
    y = random(),
    z = max(x, y);

    View Slide

  59. with (Math)
    x = (r=random)(),
    y = r(),
    z = max(x, y);

    View Slide

  60. with (Math)
    z = max((r=random)(), r());

    View Slide

  61. with(Math)z=max((r=random)(),r())

    View Slide

  62. ?

    View Slide

  63. Jorge Luis Borges

    View Slide

  64. View Slide

  65. View Slide

  66. Portrait
    by: John Sokol

    View Slide

  67. View Slide

  68. View Slide


  69. View Slide

  70. 0

    View Slide

  71. "Writing long books
    is an act of foolishness."

    View Slide

  72. A man sets out to draw the world.
    As the years go by, he peoples a space
    with images of provinces, kingdoms,
    mountains, bays, ships, islands, fishes, rooms,
    instruments, stars, horses, and individuals.
    A short time before he dies, he discovers
    that the patient labyrinth of lines
    traces his own face.

    View Slide

  73. A man sets out to draw the world.
    As the years go by, he peoples a space
    with images of provinces, kingdoms,
    mountains, bays, ships, islands, fishes, rooms,
    instruments, stars, horses, and individuals.
    A short time before he dies, he discovers
    that the patient labyrinth of lines
    traces his own face.

    View Slide

  74. A man sets out to draw the world.
    As the years go by, he peoples a space
    with images of provinces, kingdoms,
    mountains, bays, ships, islands, fishes, rooms,
    instruments, stars, horses, and individuals.
    A short time before he dies, he discovers
    that the patient labyrinth of lines
    traces his own face.

    View Slide

  75. A man sets out to draw the world.
    As the years go by, he peoples a space
    with images of provinces, kingdoms,
    mountains, bays, ships, islands, fishes, rooms,
    instruments, stars, horses, and individuals.
    A short time before he dies, he discovers
    that the patient labyrinth of lines
    traces his own face.

    View Slide

  76. א

    View Slide

  77. Hebrew
    === first letter
    === number 1

    View Slide

  78. Kabbalah
    === origin of the universe
    === contains all numbers

    View Slide

  79. The Aleph
    "the only place on earth
    where all places are
    – seen from every angle,
    each standing clear,
    without any confusion
    or blending."

    View Slide

  80. ...

    View Slide

  81. א
    <br/>ֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲ֥֧֧֤֥֧֤֥֥֧֤֥֤֦֥֤֦֥֦֥֥֦֥֧֤֤֧֥֤֦֥֤֦֦֥֥֤֥֥֥֦֣֤֧֥֤֤֣֧֥֣֥֤֥֥֥֣֣֤֣֥֥֣֥֤֣֥֥֣֣֤֥֧֣֥֤֤֥֣֧֥֣֥֧֧֥֥֥֥֥֥֥֤֧֦֥֥֧֥֤֣֧֥֦֥֧֥֤֥֦֥֧֤֤֥֦֧֥֦֤֥֥֣֦֧֦֥֤֧֦֥֤֥֥֤֦֦֧֤֤֥֧֥֧֦֦֤֥֣֥֣֣֤֤֧֤֤֥֧֥֧֣֦֧֧֤֥֧֥֣֥֣֣֤֧֧֦֧֥֤֥֣֣֤֥֥֧֧֥֦֦֥֦֤֣֦֧֥֦֦֥֦֤֣֤֥֧֣֥֥֣֧֥֥֥֥֥֣֧֦֦֦֧֦֣֦֥֧֥֤֥֥֣֣֣֥֧֥֥֧֤֤֥֤֥֧֤֥֦֧֥֦֤֧֤֥֤֥֤֦֦֦֥֤֤֦֦֥֤֦֥֤֣֦֤֥֧֤֤֡֠֡֠֡֠֠֠֠֡֠֡֡֡֡֡֠֡֡֡֡֡֡֡֡֠֡֡֡֡֡֠֡֡֡֡֡֡֡֡֠֡֡֠֡֡֡֡֡֠֡֡֠֡֡֡֡֡֠֠֡֡֠֠֡֠֡֠֠֠֠֡֠֠֠֡֠֠֠֠֠֡֠֠֠֡֠֠֠֠֡֠֠֡֡֡֡֠֡֠֠֠֠֠֠֡֡֠֠֠֠֡֠֠֠֠֡֡֡֡֡֡֡֡֠֠֠֠֡֡֠֡֡֡֡֡֠֠֡֠֠֡֡֡֠֠֡֠֠֠֠֠֡֡֡֠֠֠֠֠֡֡֠֠֠֠֡֠֠֠֡֡֠֠֠֠֠֠֠֡֡֠֡֡֠֠֡֠֡֠֡֠֡֡֠֠֡֡֡֠֠֠֡֡֡֡֡֡֡֡֡֡֡֡֡֡֡֠֠֡֠א'= א'<br/>ח , "" = ב<br/>= ! ב + ב<br/>, ח ! = ד +<br/>ב = ו , ב + {<br/>} , ה = ' " '<br/>, 0 ] ח = ע ] ,<br/>ך , [ 1 ] ח = נ =<br/>ח ) = ם , [ 5 ] ו .<br/>ח = ף , [ 1 ] ( ו + ד<br/>[ 2 ] , ד = ס , [ 1 ] ו = מ<br/>[ 3 ] , 1 ] ד = י , [ 3 ] ח = כ ]<br/>ך = ז ) = ט , " " + ם + נ + ף + ע + כ + נ = ג<br/>+ ג ) ט ) ט , [ ז ] [ ז ] ( נ + מ + ע + ך + ף + נ + ע + ס + ם + מ +<br/>ל)+"/)"+כ+ך+י+"154\\"+ן+כ+נ+".(א)"+כ+("160\\"=ן)+י+ך+ס+כ+ה+ג)ט+ג)ט+ה<br/>=".{5}(.)")+ה+()(()(ה+"('$1$2$3\\\\\\\\',147\\/"+ל+ל)())()

    View Slide

  82. א
    <br/>ֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲ֥֧֧֤֥֧֤֥֥֧֤֥֤֦֥֤֦֥֦֥֥֦֥֧֤֤֧֥֤֦֥֤֦֦֥֥֤֥֥֥֦֣֤֧֥֤֤֣֧֥֣֥֤֥֥֥֣֣֤֣֥֥֣֥֤֣֥֥֣֣֤֥֧֣֥֤֤֥֣֧֥֣֥֧֧֥֥֥֥֥֥֥֤֧֦֥֥֧֥֤֣֧֥֦֥֧֥֤֥֦֥֧֤֤֥֦֧֥֦֤֥֥֣֦֧֦֥֤֧֦֥֤֥֥֤֦֦֧֤֤֥֧֥֧֦֦֤֥֣֥֣֣֤֤֧֤֤֥֧֥֧֣֦֧֧֤֥֧֥֣֥֣֣֤֧֧֦֧֥֤֥֣֣֤֥֥֧֧֥֦֦֥֦֤֣֦֧֥֦֦֥֦֤֣֤֥֧֣֥֥֣֧֥֥֥֥֥֣֧֦֦֦֧֦֣֦֥֧֥֤֥֥֣֣֣֥֧֥֥֧֤֤֥֤֥֧֤֥֦֧֥֦֤֧֤֥֤֥֤֦֦֦֥֤֤֦֦֥֤֦֥֤֣֦֤֥֧֤֤֡֠֡֠֡֠֠֠֠֡֠֡֡֡֡֡֠֡֡֡֡֡֡֡֡֠֡֡֡֡֡֠֡֡֡֡֡֡֡֡֠֡֡֠֡֡֡֡֡֠֡֡֠֡֡֡֡֡֠֠֡֡֠֠֡֠֡֠֠֠֠֡֠֠֠֡֠֠֠֠֠֡֠֠֠֡֠֠֠֠֡֠֠֡֡֡֡֠֡֠֠֠֠֠֠֡֡֠֠֠֠֡֠֠֠֠֡֡֡֡֡֡֡֡֠֠֠֠֡֡֠֡֡֡֡֡֠֠֡֠֠֡֡֡֠֠֡֠֠֠֠֠֡֡֡֠֠֠֠֠֡֡֠֠֠֠֡֠֠֠֡֡֠֠֠֠֠֠֠֡֡֠֡֡֠֠֡֠֡֠֡֠֡֡֠֠֡֡֡֠֠֠֡֡֡֡֡֡֡֡֡֡֡֡֡֡֡֠֠֡֠א'= א'<br/>ח , "" = ב<br/>= ! ב + ב<br/>, ח ! = ד +<br/>ב = ו , ב + {<br/>} , ה = ' " '<br/>, 0 ] ח = ע ] ,<br/>ך , [ 1 ] ח = נ =<br/>ח ) = ם , [ 5 ] ו .<br/>ח = ף , [ 1 ] ( ו + ד<br/>[ 2 ] , ד = ס , [ 1 ] ו = מ<br/>[ 3 ] , 1 ] ד = י , [ 3 ] ח = כ ]<br/>ך = ז ) = ט , " " + ם + נ + ף + ע + כ + נ = ג<br/>+ ג ) ט ) ט , [ ז ] [ ז ] ( נ + מ + ע + ך + ף + נ + ע + ס + ם + מ +<br/>ל)+"/)"+כ+ך+י+"154\\"+ן+כ+נ+".(א)"+כ+("160\\"=ן)+י+ך+ס+כ+ה+ג)ט+ג)ט+ה<br/>=".{5}(.)")+ה+()(()(ה+"('$1$2$3\\\\\\\\',147\\/"+ל+ל)())()

    View Slide

  83. א
    <br/>ֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲ֥֧֧֤֥֧֤֥֥֧֤֥֤֦֥֤֦֥֦֥֥֦֥֧֤֤֧֥֤֦֥֤֦֦֥֥֤֥֥֥֦֣֤֧֥֤֤֣֧֥֣֥֤֥֥֥֣֣֤֣֥֥֣֥֤֣֥֥֣֣֤֥֧֣֥֤֤֥֣֧֥֣֥֧֧֥֥֥֥֥֥֥֤֧֦֥֥֧֥֤֣֧֥֦֥֧֥֤֥֦֥֧֤֤֥֦֧֥֦֤֥֥֣֦֧֦֥֤֧֦֥֤֥֥֤֦֦֧֤֤֥֧֥֧֦֦֤֥֣֥֣֣֤֤֧֤֤֥֧֥֧֣֦֧֧֤֥֧֥֣֥֣֣֤֧֧֦֧֥֤֥֣֣֤֥֥֧֧֥֦֦֥֦֤֣֦֧֥֦֦֥֦֤֣֤֥֧֣֥֥֣֧֥֥֥֥֥֣֧֦֦֦֧֦֣֦֥֧֥֤֥֥֣֣֣֥֧֥֥֧֤֤֥֤֥֧֤֥֦֧֥֦֤֧֤֥֤֥֤֦֦֦֥֤֤֦֦֥֤֦֥֤֣֦֤֥֧֤֤֡֠֡֠֡֠֠֠֠֡֠֡֡֡֡֡֠֡֡֡֡֡֡֡֡֠֡֡֡֡֡֠֡֡֡֡֡֡֡֡֠֡֡֠֡֡֡֡֡֠֡֡֠֡֡֡֡֡֠֠֡֡֠֠֡֠֡֠֠֠֠֡֠֠֠֡֠֠֠֠֠֡֠֠֠֡֠֠֠֠֡֠֠֡֡֡֡֠֡֠֠֠֠֠֠֡֡֠֠֠֠֡֠֠֠֠֡֡֡֡֡֡֡֡֠֠֠֠֡֡֠֡֡֡֡֡֠֠֡֠֠֡֡֡֠֠֡֠֠֠֠֠֡֡֡֠֠֠֠֠֡֡֠֠֠֠֡֠֠֠֡֡֠֠֠֠֠֠֠֡֡֠֡֡֠֠֡֠֡֠֡֠֡֡֠֠֡֡֡֠֠֠֡֡֡֡֡֡֡֡֡֡֡֡֡֡֡֠֠֡֠א'= א'<br/>ח , "" = ב<br/>= ! ב + ב<br/>, ח ! = ד +<br/>ב = ו , ב + {<br/>} , ה = ' " '<br/>, 0 ] ח = ע ] ,<br/>ך , [ 1 ] ח = נ =<br/>ח ) = ם , [ 5 ] ו .<br/>ח = ף , [ 1 ] ( ו + ד<br/>[ 2 ] , ד = ס , [ 1 ] ו = מ<br/>[ 3 ] , 1 ] ד = י , [ 3 ] ח = כ ]<br/>ך = ז ) = ט , " " + ם + נ + ף + ע + כ + נ = ג<br/>+ ג ) ט ) ט , [ ז ] [ ז ] ( נ + מ + ע + ך + ף + נ + ע + ס + ם + מ +<br/>ל)+"/)"+כ+ך+י+"154\\"+ן+כ+נ+".(א)"+כ+("160\\"=ן)+י+ך+ס+כ+ה+ג)ט+ג)ט+ה<br/>=".{5}(.)")+ה+()(()(ה+"('$1$2$3\\\\\\\\',147\\/"+ל+ל)())()

    View Slide

  84. א
    <br/>ֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲ֥֧֧֤֥֧֤֥֥֧֤֥֤֦֥֤֦֥֦֥֥֦֥֧֤֤֧֥֤֦֥֤֦֦֥֥֤֥֥֥֦֣֤֧֥֤֤֣֧֥֣֥֤֥֥֥֣֣֤֣֥֥֣֥֤֣֥֥֣֣֤֥֧֣֥֤֤֥֣֧֥֣֥֧֧֥֥֥֥֥֥֥֤֧֦֥֥֧֥֤֣֧֥֦֥֧֥֤֥֦֥֧֤֤֥֦֧֥֦֤֥֥֣֦֧֦֥֤֧֦֥֤֥֥֤֦֦֧֤֤֥֧֥֧֦֦֤֥֣֥֣֣֤֤֧֤֤֥֧֥֧֣֦֧֧֤֥֧֥֣֥֣֣֤֧֧֦֧֥֤֥֣֣֤֥֥֧֧֥֦֦֥֦֤֣֦֧֥֦֦֥֦֤֣֤֥֧֣֥֥֣֧֥֥֥֥֥֣֧֦֦֦֧֦֣֦֥֧֥֤֥֥֣֣֣֥֧֥֥֧֤֤֥֤֥֧֤֥֦֧֥֦֤֧֤֥֤֥֤֦֦֦֥֤֤֦֦֥֤֦֥֤֣֦֤֥֧֤֤֡֠֡֠֡֠֠֠֠֡֠֡֡֡֡֡֠֡֡֡֡֡֡֡֡֠֡֡֡֡֡֠֡֡֡֡֡֡֡֡֠֡֡֠֡֡֡֡֡֠֡֡֠֡֡֡֡֡֠֠֡֡֠֠֡֠֡֠֠֠֠֡֠֠֠֡֠֠֠֠֠֡֠֠֠֡֠֠֠֠֡֠֠֡֡֡֡֠֡֠֠֠֠֠֠֡֡֠֠֠֠֡֠֠֠֠֡֡֡֡֡֡֡֡֠֠֠֠֡֡֠֡֡֡֡֡֠֠֡֠֠֡֡֡֠֠֡֠֠֠֠֠֡֡֡֠֠֠֠֠֡֡֠֠֠֠֡֠֠֠֡֡֠֠֠֠֠֠֠֡֡֠֡֡֠֠֡֠֡֠֡֠֡֡֠֠֡֡֡֠֠֠֡֡֡֡֡֡֡֡֡֡֡֡֡֡֡֠֠֡֠א'= א'<br/>ח , "" = ב<br/>= ! ב + ב<br/>, ח ! = ד +<br/>ב = ו , ב + {<br/>} , ה = ' " '<br/>, 0 ] ח = ע ] ,<br/>ך , [ 1 ] ח = נ =<br/>ח ) = ם , [ 5 ] ו .<br/>ח = ף , [ 1 ] ( ו + ד<br/>[ 2 ] , ד = ס , [ 1 ] ו = מ<br/>[ 3 ] , 1 ] ד = י , [ 3 ] ח = כ ]<br/>ך = ז ) = ט , " " + ם + נ + ף + ע + כ + נ = ג<br/>+ ג ) ט ) ט , [ ז ] [ ז ] ( נ + מ + ע + ך + ף + נ + ע + ס + ם + מ +<br/>ל)+"/)"+כ+ך+י+"154\\"+ן+כ+נ+".(א)"+כ+("160\\"=ן)+י+ך+ס+כ+ה+ג)ט+ג)ט+ה<br/>=".{5}(.)")+ה+()(()(ה+"('$1$2$3\\\\\\\\',147\\/"+ל+ל)())()

    View Slide

  85. א
    <br/>ֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲ֥֧֧֤֥֧֤֥֥֧֤֥֤֦֥֤֦֥֦֥֥֦֥֧֤֤֧֥֤֦֥֤֦֦֥֥֤֥֥֥֦֣֤֧֥֤֤֣֧֥֣֥֤֥֥֥֣֣֤֣֥֥֣֥֤֣֥֥֣֣֤֥֧֣֥֤֤֥֣֧֥֣֥֧֧֥֥֥֥֥֥֥֤֧֦֥֥֧֥֤֣֧֥֦֥֧֥֤֥֦֥֧֤֤֥֦֧֥֦֤֥֥֣֦֧֦֥֤֧֦֥֤֥֥֤֦֦֧֤֤֥֧֥֧֦֦֤֥֣֥֣֣֤֤֧֤֤֥֧֥֧֣֦֧֧֤֥֧֥֣֥֣֣֤֧֧֦֧֥֤֥֣֣֤֥֥֧֧֥֦֦֥֦֤֣֦֧֥֦֦֥֦֤֣֤֥֧֣֥֥֣֧֥֥֥֥֥֣֧֦֦֦֧֦֣֦֥֧֥֤֥֥֣֣֣֥֧֥֥֧֤֤֥֤֥֧֤֥֦֧֥֦֤֧֤֥֤֥֤֦֦֦֥֤֤֦֦֥֤֦֥֤֣֦֤֥֧֤֤֡֠֡֠֡֠֠֠֠֡֠֡֡֡֡֡֠֡֡֡֡֡֡֡֡֠֡֡֡֡֡֠֡֡֡֡֡֡֡֡֠֡֡֠֡֡֡֡֡֠֡֡֠֡֡֡֡֡֠֠֡֡֠֠֡֠֡֠֠֠֠֡֠֠֠֡֠֠֠֠֠֡֠֠֠֡֠֠֠֠֡֠֠֡֡֡֡֠֡֠֠֠֠֠֠֡֡֠֠֠֠֡֠֠֠֠֡֡֡֡֡֡֡֡֠֠֠֠֡֡֠֡֡֡֡֡֠֠֡֠֠֡֡֡֠֠֡֠֠֠֠֠֡֡֡֠֠֠֠֠֡֡֠֠֠֠֡֠֠֠֡֡֠֠֠֠֠֠֠֡֡֠֡֡֠֠֡֠֡֠֡֠֡֡֠֠֡֡֡֠֠֠֡֡֡֡֡֡֡֡֡֡֡֡֡֡֡֠֠֡֠א'= א'<br/>ח , "" = ב<br/>= ! ב + ב<br/>, ח ! = ד +<br/>ב = ו , ב + {<br/>} , ה = ' " '<br/>, 0 ] ח = ע ] ,<br/>ך , [ 1 ] ח = נ =<br/>ח ) = ם , [ 5 ] ו .<br/>ח = ף , [ 1 ] ( ו + ד<br/>[ 2 ] , ד = ס , [ 1 ] ו = מ<br/>[ 3 ] , 1 ] ד = י , [ 3 ] ח = כ ]<br/>ך = ז ) = ט , " " + ם + נ + ף + ע + כ + נ = ג<br/>+ ג ) ט ) ט , [ ז ] [ ז ] ( נ + מ + ע + ך + ף + נ + ע + ס + ם + מ +<br/>ל)+"/)"+כ+ך+י+"154\\"+ן+כ+נ+".(א)"+כ+("160\\"=ן)+י+ך+ס+כ+ה+ג)ט+ג)ט+ה<br/>=".{5}(.)")+ה+()(()(ה+"('$1$2$3\\\\\\\\',147\\/"+ל+ל)())()

    View Slide

  86. View Slide

  87. life in the browser?
    How to create

    View Slide

  88. Conway's Game of Life
    Count the neighbors of a cell …
    Any dead cell with …
    three: becomes alive, as if by reproduction.
    Any live cell with …
    two or three: lives on to the next generation.
    fewer than two: dies, as if caused by under-population.
    more than three: dies, as if by overcrowding.

    View Slide

  89. Conway's Game of Life
    Count the neighbors of a cell …
    Any dead cell with …
    three: becomes alive, as if by reproduction.
    Any live cell with …
    two or three: lives on to the next generation.
    fewer than two: dies, as if caused by under-population.
    more than three: dies, as if by overcrowding.

    View Slide

  90. View Slide

  91. Any dead cell with …
    three: becomes alive, as if by reproduction.
    Any live cell with …
    two or three: lives on to the next generation.
    fewer than two: dies, as if caused by under-population.
    more than three: dies, as if by overcrowding.

    View Slide

  92. Any dead cell with …
    three: becomes alive, as if by reproduction.
    Any live cell with …
    two or three: lives on to the next generation.
    fewer than two: dies, as if caused by under-population.
    more than three: dies, as if by overcrowding.

    View Slide

  93. View Slide

  94. View Slide

  95. View Slide

  96. View Slide

  97. Any dead cell with …
    three: becomes alive, as if by reproduction.
    Any live cell with …
    two or three: lives on to the next generation.
    fewer than two: dies, as if caused by under-population.
    more than three: dies, as if by overcrowding.

    View Slide

  98. Any dead cell with …
    three: becomes alive
    Any live cell with …
    two or three: lives on
    fewer than two: dies
    more than three: dies

    View Slide

  99. Any dead cell with …
    three: becomes alive
    Any live cell with …
    two or three: lives on

    View Slide

  100. Any dead cell with …
    three: lives
    Any live cell with …
    two or three: lives

    View Slide

  101. Any dead cell with …
    three: lives
    Any live cell with …
    two or three: lives

    View Slide

  102. Any dead cell with …
    three: lives
    Any live cell with …
    two or three: lives

    View Slide

  103. Any cell with …
    three: lives
    Any live cell with …
    two : lives

    View Slide

  104. A cell with three or
    a live cell with two neighbors lives

    View Slide

  105. var count = ...;
    if (!alive) {
    if (count == 3) {
    cell.alive = true;
    } else {
    cell.alive = false;
    }
    } else {
    if (count == 2 || count == 3) {
    cell.alive = true;
    } else if (count < 2 || count > 3) {
    cell.alive = false;
    }
    }

    View Slide

  106. var count = ...;
    cell.alive = false;
    if (count == 3) {
    cell.alive = true;
    } else if (alive) {
    if (count == 2) {
    cell.alive = true;
    }
    }

    View Slide

  107. var count = ...;
    cell.alive = (count == 3) || (alive && count == 2)

    View Slide

  108. var c = ...;
    b[i] = (c == 3) || (a[i] && c == 2)

    View Slide

  109. b[i] = (c == 3) || (a[i] && c == 2)

    View Slide

  110. b[i] = c == 3 || a[i] && c == 2

    View Slide

  111. b[i] = c == 3 | a[i] & c == 2

    View Slide

  112. b[i]=c==3|a[i]&c==2

    View Slide

  113. a=b,b=h=[],i=3760;i--;h+=" -"[
    i%92?b[i]=a?3==d|a[i]&2==d:24*i%7
    %2:2])for(d=0,j=5;e=(2)d+=a[i+e]+a[i-e];s.innerHTML=h',
    99) id=s>

    View Slide

  114. a=b,b=h=[],i=3760;i--;h+=" -"[
    i%92?b[i]=a?3==d|a[i]&2==d:24*i%7
    %2:2])for(d=0,j=5;e=(2)d+=a[i+e]+a[i-e];s.innerHTML=h',
    99) id=s>

    View Slide

  115. a=b,b=h=[],i=3760;i--;h+=" -"[
    i%92?b[i]=a?3==d|a[i]&2==d:24*i%7
    %2:2])for(d=0,j=5;e=(2)d+=a[i+e]+a[i-e];s.innerHTML=h',
    99) id=s>

    View Slide

  116. a=b,b=h=[],i=3760;i--;h+=" -"[
    i%92?b[i]=a?3==d|a[i]&2==d:24*i%7
    %2:2])for(d=0,j=5;e=(2)d+=a[i+e]+a[i-e];s.innerHTML=h',
    99) id=s>

    View Slide

  117. a=b,b=h=[],i=3760;i--;h+=" -"[
    i%92?b[i]=a?3==d|a[i]&2==d:24*i%7
    %2:2])for(d=0,j=5;e=(2)d+=a[i+e]+a[i-e];s.innerHTML=h',
    99) id=s>

    View Slide

  118. a=b,b=h=[],i=3760;i--;h+=" -"[
    i%92?b[i]=a?3==d|a[i]&2==d:24*i%7
    %2:2])for(d=0,j=5;e=(2)d+=a[i+e]+a[i-e];s.innerHTML=h',
    99) id=s>

    View Slide

  119. a=b,b=h=[],i=3760;i--;h+=" -"[
    i%92?b[i]=a?3==d|a[i]&2==d:24*i%7
    %2:2])for(d=0,j=5;e=(2)d+=a[i+e]+a[i-e];s.innerHTML=h',
    99) id=s>

    View Slide

  120. a=b,b=h=[],i=3760;i--;h+=" -"[
    i%92?b[i]=a?3==d|a[i]&2==d:24*i%7
    %2:2])for(d=0,j=5;e=(2)d+=a[i+e]+a[i-e];s.innerHTML=h',
    99) id=s>

    View Slide

  121. a=b,b=h=[],i=3760;i--;h+=" -"[
    i%92?b[i]=a?3==d|a[i]&2==d:24*i%7
    %2:2])for(d=0,j=5;e=(2)d+=a[i+e]+a[i-e];s.innerHTML=h',
    99) id=s>

    View Slide

  122. a=b,b=h=[],i=3760;i--;h+=" -"[
    i%92?b[i]=a?3==d|a[i]&2==d:24*i%7
    %2:2])for(d=0,j=5;e=(2)d+=a[i+e]+a[i-e];s.innerHTML=h',
    99) id=s>

    View Slide

  123. a=b,b=h=[],i=3760;i--;h+=" -"[
    i%92?b[i]=a?3==d|a[i]&2==d:24*i%7
    %2:2])for(d=0,j=5;e=(2)d+=a[i+e]+a[i-e];s.innerHTML=h',
    99) id=s>

    View Slide

  124. without Latin characters?
    How to write JavaScript

    View Slide

  125. Зв
    езда

    View Slide

  126. Зв
    езда

    View Slide

  127. Зв
    езда

    View Slide

  128. Зв
    езда

    View Slide


  129. View Slide

  130. ="" ,= !+ , =! +,
    =
    +{}, = [++ ],= [ =] ,=
    ++ +, =
    [+ ],[ +=
    [
    ]+(
    .
    +
    )[] +[ ]++ + []+
    + +
    [ ]+ ][ ] ([
    ]+ [ ]+ []+
    ++ "()"
    )()

    View Slide

  131. View Slide

  132. View Slide

  133. aem1k.com/

    View Slide

  134. aem1k.com/matrix

    View Slide

  135. View Slide

  136. View Slide

  137. aem1k.com/םלוע-םולש

    View Slide

  138. aem1k.com/hebrew

    View Slide

  139. How does it work?

    View Slide

  140. 1. Escape Sequences
    2. Playing Scrabble

    View Slide

  141. a

    View Slide

  142. a \u0061

    View Slide

  143. \u0061\u006c\u0065\u0072\u0074(1)

    View Slide

  144. a l e r t (1)

    View Slide

  145. a \u0061

    View Slide

  146. א \u05D0

    View Slide

  147. a \x61

    View Slide

  148. "a" "\x61"

    View Slide

  149. "a" "\141"

    View Slide

  150. []["\155\141\160\]["\
    \143\157\156\163\164\
    \162\165\143\164\157\
    \162"]("\141\154\145\
    \162\164\50\61\51")()

    View Slide

  151. []["\155\141\160"]["\
    \143\157\156\163\164\
    \162\165\143\164\157\
    \162"]("\141\154\145\
    \162\164\50\61\51")()

    View Slide

  152. [][" m a p "]["\
    c o n s t \
    r u c t o \
    r "](" a l e \
    r t ( 1 ) ")()

    View Slide

  153. []["map"]["constructor"]("alert(1)")()

    View Slide

  154. []["map"]["constructor"]("alert(1)")()

    View Slide

  155. function["constructor"]("alert(1)")()

    View Slide

  156. function["constructor"]("alert(1)")()

    View Slide

  157. Function("alert(1)")()

    View Slide

  158. Function("alert(1)")()

    View Slide

  159. eval("alert(1)")

    View Slide

  160. []["map"]["constructor"]("...")()

    View Slide

  161. C="constructor"
    C[C][C]("...")()

    View Slide

  162. 1. Escape Sequences
    2. Playing Scrabble

    View Slide

  163. ![] => false
    !![] => true

    View Slide

  164. ![] + "" => "false"
    !![] + "" => "true"

    View Slide

  165. "true"[0] => "t"
    "true"[1] => "r"
    "true"[2] => "u"
    "true"[3] => "e"

    View Slide

  166. "false" [1]
    "false" [2]
    "true" [3]
    "true" [1]
    "true" [0]

    View Slide

  167. f a l s e
    f a l s e
    t r u e
    t r u e
    t r u e

    View Slide

  168. f a l s e
    f a l s e
    t r u e
    t r u e
    t r u e

    View Slide

  169. f a l s e
    o b j e c t
    t r u e
    f a l s e
    o b j e c t
    o b j e c t
    f a l s e
    t r u e

    View Slide

  170. o b j e c t
    o b j e c t
    u n d e f i n e d
    f a l s e
    t r u e
    t r u e
    t r u e
    o b j e c t
    t r u e
    o b j e c t
    t r u e

    View Slide

  171. []["map"]["constructor"]("alert(1)")()

    View Slide

  172. View Slide

  173. Invisible Code

    View Slide

  174. Can we hide JavaScript
    inside itself?

    View Slide

  175. 00 | Null
    01 | Start of Heading
    02 | Start of Text
    Whitespace
    04 | End of Transmission
    05 | Enquiry
    06 | Acknowledge
    07 | Bell (audible or
    \b | 08 | Backspace
    \t | 09 | Horizontal Tabulation
    \n | 0A | Line Feed
    \v | 0B | Vertical Tab
    \f | 0C | Form Feed
    \r | 0D | Carriage Return
    0E | Shift Out
    0F | Shift In

    View Slide

  176. 00 | Null
    01 | Start of Heading
    02 | Start of Text
    03 | End of Text
    04 | End of Transmission
    05 | Enquiry
    06 | Acknowledge
    07 | Bell
    \b | 08 | Backspace
    \t | 09 | Horizontal Tabulation
    \n | 0A | Line Feed
    \v | 0B | Vertical Tab
    \f | 0C | Form Feed
    \r | 0D | Carriage Return
    0E | Shift Out
    0F | Shift In

    View Slide

  177. 10 | Data Link Escape
    11 | Device Control 1
    12 | Device Control 2
    13 | Device Control 3
    14 | Device Control 4
    15 | Negative Acknowledge
    16 | Synchronous Idle
    17 | End of Transmission Block
    18 | Cancel
    19 | End of Medium
    1A | Substitute
    1B | Escape
    1C | File Separator
    1D | Group Separator
    1E | Record Separator
    1F | Unit Separator

    View Slide

  178. aem1k.com/0

    View Slide


  179. View Slide

  180. View Slide

  181. 1616161F171212181612131D1619131D151B1518131D1313131713171312
    151D131B1619121D121D131B12191612151B1619151D131D13161318121A
    16191215131912151312131B1713161517141419161E1714161517121716
    1611161C121812171616161F171212181611131D1612121C1612131D151B
    1618131D1212131C171017121615131E1212151D121C1619131D1310131B
    1619121B121B131C1518131B161912151717171C171C12181618121B131D
    1212151C151C161E121212191219171B1616161F171212181614131D161A
    131D1310131B1615131D151B1311121C13191311121C1717121C13191313
    151D151B161A121B121B151D131B12191614121B131D1611151B1619121B
    1615151D121B1611151B1619121D1615151D131B1618121B131D1212121E
    12131212151B1612151B1619151D131D1313131D131D1614171C1611151B
    1619151D12161312131D131D1614151D171D1614161F16131715161D1615
    161E1714121E1612161F16141719121E1619161E161E1615171214181514
    141D141C131D16181217121C1717131D131913121219

    View Slide

  182. a=b,b=h=[],i=3760;i--;h+=" -"[
    i%92?b[i]=a?3==d|a[i]&2==d:24*i%7
    %2:2])for(d=0,j=5;e=(2)d+=a[i+e]+a[i-e];s.innerHTML=h',
    99) id=s>

    View Slide

  183. escape('').replace(/..(.)..(.)/g,'\\x$1$2')

    View Slide

  184. escape('').replace(/..(.)..(.)/g,'\\x$1$2')

    View Slide

  185. escape('').replace(/..(.)..(.)/g,'\\x$1$2')

    View Slide

  186. escape('').replace(/..(.)..(.)/g,'\\x$1$2')

    View Slide

  187. 0 1 2 3 4 5 6 7 8 9 A B C D E F

    View Slide

  188. 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
    10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F

    View Slide

  189. 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
    16 11 16 1C 16 15 17 12 17 14 12 18 13 11 12 19

    View Slide

  190. %16%11%16%1C%16%15%17%12%17%14%12%18%13%11%12%19

    View Slide

  191. 6 1 6 C 6 5 7 2 7 4 2 8 3 1 2 9

    View Slide

  192. 61 6C 65 72 74 28 31 29

    View Slide

  193. \x61\x6C\x65\x72\x74\x28\x31\x29

    View Slide

  194. a l e r t ( 1 )

    View Slide

  195. -moz-control-character-visibility: visible;

    View Slide

  196. -moz-control-character-visibility: visible;

    View Slide

  197. ").replace(/..(.)..(.)/g,'\\x$1$2')
    escape("

    View Slide

  198. ").replace(/..(.)..(.)/g,'\\x$1$2')
    escape(" 1616161F171212181612131D1619131D151B1518131D
    1313131713171312151D131B1619121D121D131B12191612151B1619151D13
    1D13161318121A16191215131912151312131B1713161517141419161E1714
    1615171217161611161C121812171616161F171212181611131D1612121C16
    12131D151B1618131D1212131C171017121615131E1212151D121C1619131D
    1310131B1619121B121B131C1518131B161912151717171C171C1218161812
    1B131D1212151C151C161E121212191219171B1616161F171212181614131D
    161A131D1310131B1615131D151B1311121C13191311121C1717121C131913
    13151D151B161A121B121B151D131B12191614121B131D1611151B1619121B
    1615151D121B1611151B1619121D1615151D131B1618121B131D1212121E12
    131212151B1612151B1619151D131D1313131D131D1614171C1611151B1619
    151D12161312131D131D1614151D171D1614161F16131715161D1615161E17
    14121E1612161F16141719121E1619161E161E1615171214181514141D141C
    131D16181217121C17

    View Slide

  199. ... within Mozilla;
    some people like
    the idea of displaying
    control characters


    View Slide

  200. Pack the code
    in a single char?

    View Slide

  201. escape('')
    .replace(
    /..(.)..(.)/g,
    '\\x$1$2'
    )

    View Slide

  202. escape('')
    .replace(
    /.{5}(.).{5}(.).{5}(.)/g,
    '\\$1$2$3'
    )

    View Slide

  203. 0 1 2 3 4 5 6 7
    8 9 A B C D E F

    View Slide

  204. 0 1 2 3 4 5 6 7

    View Slide

  205. 1 1 1 1 1 1 1 1
    4 4 4 4 4 4 4 4
    4 4 4 4 4 4 4 4
    0 1 2 3 4 5 6 7

    View Slide

  206. 1 1 1 1 1 1 1 1
    4 4 4 4 4 4 4 4
    4 4 4 4 4 4 4 4
    0 1 2 3 4 5 6 7

    View Slide

  207. 1 1 1 1 1 1 1 1
    4 4 4 4 4 4 4 4
    4 4 4 4 4 4 4 4
    0 1 2 3 4 5 6 7
    ֠ ֡ ֢ ֣ ֤ ֥ ֦ ֧

    View Slide

  208. ֠ ֡ ֢ ֣ ֤ ֥ ֦ ֧

    View Slide

  209. ֢֣֤֥֦֧֠֡
    " א "

    View Slide

  210. 1 1 1 1 1 1
    4 4 4 4 4 4
    4 4 4 4 4 4
    1 4 1 1 5 4

    View Slide

  211. %u05A1%u05A4%u05A1%u05A1%u05A5%u05A4

    View Slide

  212. 1 4 1 1 5 4

    View Slide

  213. 141 154

    View Slide

  214. \141 \154

    View Slide

  215. \141\154\145\162\164\50\61\51

    View Slide

  216. a l e r t ( 1 )

    View Slide

  217. aem1k.com/א

    View Slide

  218. aem1k.com/aleph

    View Slide

  219. א
    <br/>ֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲֲ֥֧֧֤֥֧֤֥֥֧֤֥֤֦֥֤֦֥֦֥֥֦֥֧֤֤֧֥֤֦֥֤֦֦֥֥֤֥֥֥֦֣֤֧֥֤֤֣֧֥֣֥֤֥֥֥֣֣֤֣֥֥֣֥֤֣֥֥֣֣֤֥֧֣֥֤֤֥֣֧֥֣֥֧֧֥֥֥֥֥֥֥֤֧֦֥֥֧֥֤֣֧֥֦֥֧֥֤֥֦֥֧֤֤֥֦֧֥֦֤֥֥֣֦֧֦֥֤֧֦֥֤֥֥֤֦֦֧֤֤֥֧֥֧֦֦֤֥֣֥֣֣֤֤֧֤֤֥֧֥֧֣֦֧֧֤֥֧֥֣֥֣֣֤֧֧֦֧֥֤֥֣֣֤֥֥֧֧֥֦֦֥֦֤֣֦֧֥֦֦֥֦֤֣֤֥֧֣֥֥֣֧֥֥֥֥֥֣֧֦֦֦֧֦֣֦֥֧֥֤֥֥֣֣֣֥֧֥֥֧֤֤֥֤֥֧֤֥֦֧֥֦֤֧֤֥֤֥֤֦֦֦֥֤֤֦֦֥֤֦֥֤֣֦֤֥֧֤֤֡֠֡֠֡֠֠֠֠֡֠֡֡֡֡֡֠֡֡֡֡֡֡֡֡֠֡֡֡֡֡֠֡֡֡֡֡֡֡֡֠֡֡֠֡֡֡֡֡֠֡֡֠֡֡֡֡֡֠֠֡֡֠֠֡֠֡֠֠֠֠֡֠֠֠֡֠֠֠֠֠֡֠֠֠֡֠֠֠֠֡֠֠֡֡֡֡֠֡֠֠֠֠֠֠֡֡֠֠֠֠֡֠֠֠֠֡֡֡֡֡֡֡֡֠֠֠֠֡֡֠֡֡֡֡֡֠֠֡֠֠֡֡֡֠֠֡֠֠֠֠֠֡֡֡֠֠֠֠֠֡֡֠֠֠֠֡֠֠֠֡֡֠֠֠֠֠֠֠֡֡֠֡֡֠֠֡֠֡֠֡֠֡֡֠֠֡֡֡֠֠֠֡֡֡֡֡֡֡֡֡֡֡֡֡֡֡֠֠֡֠א'= א'<br/>ח , "" = ב<br/>= ! ב + ב<br/>, ח ! = ד +<br/>ב = ו , ב + {<br/>} , ה = ' " '<br/>, 0 ] ח = ע ] ,<br/>ך , [ 1 ] ח = נ =<br/>ח ) = ם , [ 5 ] ו .<br/>ח = ף , [ 1 ] ( ו + ד<br/>[ 2 ] , ד = ס , [ 1 ] ו = מ<br/>[ 3 ] , 1 ] ד = י , [ 3 ] ח = כ ]<br/>ך = ז ) = ט , " " + ם + נ + ף + ע + כ + נ = ג<br/>+ ג ) ט ) ט , [ ז ] [ ז ] ( נ + מ + ע + ך + ף + נ + ע + ס + ם + מ +<br/>ל)+"/)"+כ+ך+י+"154\\"+ן+כ+נ+".(א)"+כ+("160\\"=ן)+י+ך+ס+כ+ה+ג)ט+ג)ט+ה<br/>=".{5}(.)")+ה+()(()(ה+"('$1$2$3\\\\\\\\',147\\/"+ל+ל)())()

    View Slide

  220. View Slide

  221. WHY???

    View Slide

  222. __/\\\______________/\\\\\\\\\\\__/\\\\____________/\\\\__/\\\\\\\\\\\__/\\\\\\\\\\\\\\\_____/\\\\\\\\\\\___
    _\/\\\_____________\/////\\\///__\/\\\\\\________/\\\\\\_\/////\\\///__\///////\\\/////____/\\\/////////\\\_
    _\/\\\_________________\/\\\_____\/\\\//\\\____/\\\//\\\_____\/\\\___________\/\\\________\//\\\______\///__
    _\/\\\_________________\/\\\_____\/\\\\///\\\/\\\/_\/\\\_____\/\\\___________\/\\\_________\////\\\_________
    _\/\\\_________________\/\\\_____\/\\\__\///\\\/___\/\\\_____\/\\\___________\/\\\____________\////\\\______
    _\/\\\_________________\/\\\_____\/\\\____\///_____\/\\\_____\/\\\___________\/\\\_______________\////\\\___
    _\/\\\_________________\/\\\_____\/\\\_____________\/\\\_____\/\\\___________\/\\\________/\\\______\//\\\__
    _\/\\\\\\\\\\\\\\\__/\\\\\\\\\\\_\/\\\_____________\/\\\__/\\\\\\\\\\\_______\/\\\_______\///\\\\\\\\\\\/___
    _\///////////////__\///////////__\///______________\///__\///////////________\///__________\///////////_____

    View Slide

  223. .-:::::' ... .,-::::: ... ::: .::::::.
    ;;;'''' .;;;;;;;. ,;;;'````' ;; ;;;;;;` `
    [[[,,==,[[ \[[,[[[ [[' [[['[==/[[[[,
    `$$$"``$$$, $$$$$$ $$ $$$ ''' $
    888 "888,_ _,88P`88bo,__,o,88 .d888 88b dP
    "MM, "YMMMMMP" "YUMMMMMP""YmmMMMM"" "YMmMY"

    View Slide

  224. ________ _________ ________ ___ ___ ________ _________ ___ ___ ________ _______
    |\ ____\|\___ ___\\ __ \|\ \|\ \|\ ____\\___ ___\\ \|\ \|\ __ \|\ ___ \
    \ \ \___|\|___ \ \_\ \ \|\ \ \ \\\ \ \ \___\|___ \ \_\ \ \\\ \ \ \|\ \ \ __/|
    \ \_____ \ \ \ \ \ \ _ _\ \ \\\ \ \ \ \ \ \ \ \ \\\ \ \ _ _\ \ \_|/__
    \|____|\ \ \ \ \ \ \ \\ \\ \ \\\ \ \ \____ \ \ \ \ \ \\\ \ \ \\ \\ \ \_|\ \
    ____\_\ \ \ \__\ \ \__\\ _\\ \_______\ \_______\ \ \__\ \ \_______\ \__\\ _\\ \_______\
    |\_________\ \|__| \|__|\|__|\|_______|\|_______| \|__| \|_______|\|__|\|__|\|_______|
    \|_________|

    View Slide

  225. ███████╗██╗ ██╗███╗ ██╗
    ██╔════╝██║ ██║████╗ ██║
    █████╗ ██║ ██║██╔██╗ ██║
    ██╔══╝ ██║ ██║██║╚██╗██║
    ██║ ╚██████╔╝██║ ╚████║
    ╚═╝ ╚═════╝ ╚═╝ ╚═══╝

    View Slide

  226. ▄▄· ▄▄▄ ▄▄▄ . ▄▄▄· ▄▄▄▄▄ ▀ ▌ ▐· ▀ ▄▄▄▄▄ ▄· ▄
    ▐█ ▌▪▀▄ █·▀▄.▀·▐█ ▀█ •██ ██ ▪█·█▌██ •██ ▐█▪▐█
    ██ ▄▄▐▀▀▄ ▐▀▀▪▄▄█▀▀█ ▐█.▪▐█·▐█▐█•▐█· ▐█.▪ █▌█▌▪
    ▐███▌▐█•█▌▐█▄▄▌▐█ ▪▐▌ ▐█▌·▐█▌ ███ ▐█▌ ▐█▌· █·.
    ·▀▀▀ .▀ ▀ ▀▀▀ ▀ ▀ ▀▀▀ ▀▀▀. ▀ ▀▀▀ ▀▀▀ ▀▀▀•

    View Slide

  227. a88888b. .88888. 8888ba.88ba 8888ba.88ba dP dP 888888ba dP d888888P dP dP
    d8' `88 d8' `8b 88 `8b `8b 88 `8b `8b 88 88 88 `8b 88 88 Y8. .8P
    88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 Y8aa8P
    88 88 88 88 88 88 88 88 88 88 88 88 88 88 88 88
    Y8. .88 Y8. .8P 88 88 88 88 88 88 Y8. .8P 88 88 88 88 88
    Y88888P' `8888P' dP dP dP dP dP dP `Y88888P' dP dP dP dP dP
    oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
    special thanks to: subzey, xem, 0ndras, p01, jed, mametter, kuvos, marijnjh, mathias …

    View Slide

  228. YOU!!!

    View Slide

  229. View Slide

  230. View Slide

  231. View Slide

  232. View Slide

  233. KEEP

    CALM
    AND
    JS
    ON
    ()+
    []!

    View Slide

  234. ::::::::::: ::: ::: ::: :::: ::: ::: :::
    :+: :+: :+: :+: :+: :+:+: :+: :+: :+:
    +:+ +:+ +:+ +:+ +:+ :+:+:+ +:+ +:+ +:+
    +#+ +#++:++#++ +#++:++#++: +#+ +:+ +#+ +#++:+
    +#+ +#+ +#+ +#+ +#+ +#+ +#+#+# +#+ +#+
    #+# #+# #+# #+# #+# #+# #+#+# #+# #+#

    View Slide

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

    View Slide