The Book Nerd's Guide to JavaScript

Given at DotJS, Paris on 17th November 2014

Transcript

1. A Book Nerd’s
   Guide to JavaScript
   @angustweets
   

   View Slide

2. View Slide

3. Practical, Useful, Mind
   Numbingly Boring
   Nonsensical
   Work of Genius
   

   View Slide

4. What can Literature teach us about
   Programming?
   

   View Slide

5. Great literature is the creation of
   
   open minds
   As programmers our focus can be
   
   very narrow
   

   View Slide

6. We’re encouraged to follow
   
   only one style…
   

   View Slide

7. Actual excerpts from:
   
   Google Style Guide
   AirBnb Style Guide
   JavaScript Garden
   

   View Slide

8. View Slide

9. View Slide

10. We’re left with only one way to get
    
    from A to B :(
    

    View Slide

11. View Slide

12. View Slide

13. Literature is about
    
    embracing the entire language
    

    View Slide

14. When programmers embrace the entire
    language we get choices…
    

    View Slide

15. View Slide

16. View Slide

17. "There are indeed many ways to do the
    same thing in JS. That's one of the
    beauties of the language"
    
    - Peter van der Zee (@kuvos)
    

    View Slide

18. View Slide

19. View Slide

20. (at least until the
    
    JavaScript Police
    
    get here)
    

    View Slide

21. View Slide

22. View Slide

23. Perhaps most importantly…
    

    View Slide

24. …Open Minds
    
    keep JavaScript fun.
    

    View Slide

25. This one just follows
    
    The Good Parts
    These two learn by
    experiment
    

    View Slide

26. As programmers we’re not encouraged
    to experiment
    

    View Slide

27. Yet experiment is what keeps
    JavaScript alive
    

    View Slide

28. “You need a lot of bad code to write
    good code” - Substack (dotJS 2014)
    

    View Slide

29. ‣ if(!!x)
    
    ‣ fn && fn()
    
    ‣ immediately invoked functions
    
    ‣ module pattern
    
    ‣ promises
    

    View Slide

30. View Slide

31. I decided to take experiment to the next
    level…
    

    View Slide

32. View Slide

33. Wait What?
    

    View Slide

34. Twenty Five Authors solving
    
    Five JavaScript Problems
    

    View Slide

35. Hemingway developed the
    
    Iceberg Theory
    

    View Slide

36. Here is Hemingway’s Iceberg Theory
    applied to JavaScript…
    

    View Slide

37. (weird shit)
    (Deceptively Familiar
    Syntax)
    (weird shit) JavaScript
    

    View Slide

38. (weird shit)
    JAVA!!
    (Deceptively Familiar
    Syntax)
    (weird shit) JavaScript
    

    View Slide

39. (weird shit)
    JAVA!!
    But Easier!!
    
    (Deceptively Familiar
    Syntax)
    (weird shit) JavaScript
    

    View Slide

40. (weird shit)
    JAVA!!
    But Easier!!
    
    (Deceptively Familiar
    Syntax)
    (weird shit)
    WTF?
    JavaScript
    

    View Slide

41. Generate Prime Numbers
    

    View Slide

42. View Slide

43. // A succession of creatures mount the stairs;!
    // each creature's stride exceeds that of its predecessor!
    var monstersAscendingAStaircase = function(numberOfSteps) {!
    var stairs = []; stepsUntrodden = [];!
    var largestGait = Math.sqrt(numberOfSteps);!
    for (var i = 2; i <= largestGait; i++) {!
    if (!stairs[i]) {!
    for (var j = i * i; j <= numberOfSteps; j += i) {!
    stairs[j] = 'stomp';!
    }!
    }!
    }!
    !
    // Long-limbed monsters won't tread on prime numbered stairs.!
    for (var i = 2; i <= numberOfSteps; i++) {!
    if(!stairs[i]) {!
    stepsUntrodden.push(i);!
    }!
    }!
    !
    // Here, then, is our answer.!
    return stepsUntrodden;!
    };!
    

    View Slide

44. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    2
    3
    Borges vs. Prime
    Numbers
    

    View Slide

45. View Slide

46. function downTheRabbitHole(growThisBig) {!
    var theFullDeck = Array(growThisBig);!
    var theHatter = Function('return this/4').call(2*2);!
    var theMarchHare = Boolean("The frumious Bandersnatch!");!
    !
    var theVerdict = "the white rabbit".split(/the march
    hare/).slice(theHatter);!
    !
    //into the pool of tears...!
    eval(theFullDeck.join("if (!theFullDeck[++theHatter]) {\!
    theMarchHare = 1;\!
    theVerdict.push(theHatter);\!
    " + theFullDeck.join("theFullDeck[++theMarchHare *
    theHatter]=true;") + "}")!
    );!
    !
    return theVerdict;!
    }!
    

    View Slide

47. function downTheRabbitHole(growThisBig) {!
    var theFullDeck = Array(growThisBig);!
    var theHatter = Function('return this/4').call(2*2);!
    var theMarchHare = Boolean("The frumious Bandersnatch!");!
    !
    var theVerdict = "the white rabbit".split(/the march
    hare/).slice(theHatter);!
    !
    //into the pool of tears...!
    eval(theFullDeck.join("if (!theFullDeck[++theHatter]) {\!
    theMarchHare = 1;\!
    theVerdict.push(theHatter);\!
    " + theFullDeck.join("theFullDeck[++theMarchHare *
    theHatter]=true;") + "}")!
    );!
    !
    return theVerdict;!
    }!
    

    View Slide

48. function downTheRabbitHole(growThisBig) {!
    var theFullDeck = Array(growThisBig);!
    var theHatter = Function('return this/4').call(2*2);!
    var theMarchHare = Boolean("The frumious Bandersnatch!");!
    !
    var theVerdict = "the white rabbit".split(/the march
    hare/).slice(theHatter);!
    !
    //into the pool of tears...!
    eval(theFullDeck.join("if (!theFullDeck[++theHatter]) {\!
    theMarchHare = 1;\!
    theVerdict.push(theHatter);\!
    " + theFullDeck.join("theFullDeck[++theMarchHare *
    theHatter]=true;") + "}")!
    );!
    !
    return theVerdict;!
    }!
    

    View Slide

49. !
    new Array(5).join('A' + new Array(5).join('a'));!
    !
    >!
    !
    

    View Slide

50. new Array(5).join("A" + new Array(5).join('a'));!
    !
    > "AaaaaAaaaaAaaaaAaaaa"!
    

    View Slide

51. function downTheRabbitHole(growThisBig) {!
    var theFullDeck = Array(growThisBig);!
    var theHatter = Function('return this/4').call(2*2);!
    var theMarchHare = Boolean("The frumious Bandersnatch!");!
    !
    var theVerdict = "the white rabbit".split(/the march
    hare/).slice(theHatter);!
    !
    //into the pool of tears...!
    eval(theFullDeck.join("if (!theFullDeck[++theHatter]) {\!
    theMarchHare = 1;\!
    theVerdict.push(theHatter);\!
    " + theFullDeck.join("theFullDeck[++theMarchHare *
    theHatter]=true;") + "}")!
    );!
    !
    return theVerdict;!
    }!
    

    View Slide

52. eval(“if(!theFullDeck[++theHatter]){theMarchHare=1;theVerdict.push(theHatter);theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;}if(!theFullDeck[+
    +theHatter]){theMarchHare=1;theVerdict.push(theHatter);theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;}if(!theFullDeck[+
    +theHatter]){theMarchHare=1;theVerdict.push(theHatter);theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;}if(!theFullDeck[+
    +theHatter]){theMarchHare=1;theVerdict.push(theHatter);theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;}if(!theFullDeck[+
    +theHatter]){theMarchHare=1;theVerdict.push(theHatter);theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;}if(!theFullDeck[+
    +theHatter]){theMarchHare=1;theVerdict.push(theHatter);theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;theFullDeck[+
    +theMarchHare*theHatter]=true;theFullDeck[++theMarchHare*theHatter]=true;}”);!
    

    View Slide

53. eval(“if (!theFullDeck[++theHatter]) {!
    theMarchHare = 1;!
    theVerdict.push(theHatter);!
    theFullDeck[++theMarchHare * theHatter] = true;!
    theFullDeck[++theMarchHare * theHatter] = true;!
    theFullDeck[++theMarchHare * theHatter] = true;!
    theFullDeck[++theMarchHare * theHatter] = true;!
    theFullDeck[++theMarchHare * theHatter] = true;!
    theFullDeck[++theMarchHare * theHatter] = true;!
    }!
    if (!theFullDeck[++theHatter]) {!
    theMarchHare = 1;!
    theVerdict.push(theHatter);!
    theFullDeck[++theMarchHare * theHatter] = true;!
    theFullDeck[++theMarchHare * theHatter] = true;!
    theFullDeck[++theMarchHare * theHatter] = true;!
    theFullDeck[++theMarchHare * theHatter] = true;!
    theFullDeck[++theMarchHare * theHatter] = true;!
    theFullDeck[++theMarchHare * theHatter] = true;!
    }!
    if (!theFullDeck[++theHatter]) {!
    theMarchHare = 1;!
    

    View Slide

54. Alice in Prime
    Numberland
    

    View Slide

55. Alice in Prime
    Numberland
    

    View Slide

56. Alice in Prime
    Numberland
    

    View Slide

57. Alice in Prime
    Numberland
    

    View Slide

58. Alice in Prime
    Numberland
    

    View Slide

59. Alice in Prime
    Numberland
    

    View Slide

60. Alice in Prime
    Numberland
    

    View Slide

61. Alice in Prime
    Numberland
    

    View Slide

62. Alice in Prime
    Numberland
    

    View Slide

63. Alice in Prime
    Numberland
    

    View Slide

64. Alice in Prime
    Numberland
    

    View Slide

65. So what did we learn?
    

    View Slide

66. Playing is Learning
    

    View Slide

67. Self-taught programmers are often the
    best programmers because they get to
    make mistakes
    

    View Slide

68. Experiment, Play, Have Fun and Keep
    an Open Mind.
    

    View Slide

69. Fin, merci!
    @angustweets
    anguscroll.com/hemingway
    

    View Slide

70. Books: http://pixgood.com/classic-book-spines.html/
    Montparnasse Tower: http://allparisguides.com
    Eiffel Tower:
    Yellow Monster: http://content.mycutegraphics.com/
    
    Green Monster: http://wondersofdisney2.yolasite.com/
    
    White Rabbit: http://www.clker.com/
    
    Mad Hatter, March Hare: http://wondersofdisney2.yolasite.com/
    
    Cow, tree, office buildings: clipartpanda.com/
    
    Grass: imgarcade.com/
    
    Lion cubs: https://www.flickr.com/photos/mbiddulph/6947067048/
    
    Cheetah cubs: http://www.bhmpics.com/view-cheetah_cubs_playing-1920x1080.html/
    
    !
    Image credits
    

    View Slide