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
3. Practical, Useful, Mind Numbingly Boring Nonsensical Work of Genius
4. What can Literature teach us about Programming?
5. Great literature is the creation of open minds As programmers our focus can be very narrow
6. We’re encouraged to follow only one style…
7. Actual excerpts from: Google Style Guide AirBnb Style Guide JavaScript Garden
10. We’re left with only one way to get from A to B :(
13. Literature is about embracing the entire language
14. When programmers embrace the entire language we get choices…
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)
20. (at least until the JavaScript Police get here)
23. Perhaps most importantly…
24. …Open Minds keep JavaScript fun.
25. This one just follows The Good Parts These two learn by experiment
26. As programmers we’re not encouraged to experiment
27. Yet experiment is what keeps JavaScript alive
28. “You need a lot of bad code to write good code” - Substack (dotJS 2014)
29. ‣ if(!!x) ‣ fn && fn() ‣ immediately invoked functions ‣ module pattern ‣ promises
31. I decided to take experiment to the next level…
33. Wait What?
34. Twenty Five Authors solving Five JavaScript Problems
35. Hemingway developed the Iceberg Theory
36. Here is Hemingway’s Iceberg Theory applied to JavaScript…
37. (weird shit) (Deceptively Familiar Syntax) (weird shit) JavaScript
38. (weird shit) JAVA!! (Deceptively Familiar Syntax) (weird shit) JavaScript
39. (weird shit) JAVA!! But Easier!! (Deceptively Familiar Syntax) (weird shit) JavaScript
40. (weird shit) JAVA!! But Easier!! (Deceptively Familiar Syntax) (weird shit) WTF? JavaScript
41. Generate Prime Numbers
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;! };!
44. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 2 3 Borges vs. Prime Numbers
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;! }!
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;! }!
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;! }!
49. ! new Array(5).join('A' + new Array(5).join('a'));! ! >! !
50. new Array(5).join("A" + new Array(5).join('a'));! ! > "AaaaaAaaaaAaaaaAaaaa"!
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;! }!
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;}”);!
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;!
54. Alice in Prime Numberland
55. Alice in Prime Numberland
56. Alice in Prime Numberland
57. Alice in Prime Numberland
58. Alice in Prime Numberland
59. Alice in Prime Numberland
60. Alice in Prime Numberland
61. Alice in Prime Numberland
62. Alice in Prime Numberland
63. Alice in Prime Numberland
64. Alice in Prime Numberland
65. So what did we learn?
66. Playing is Learning
67. Self-taught programmers are often the best programmers because they get to make mistakes
68. Experiment, Play, Have Fun and Keep an Open Mind.
69. Fin, merci! @angustweets anguscroll.com/hemingway
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