Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Book Nerd's Guide to JavaScript
Search
Angus Croll
November 17, 2014
Technology
14
4.1k
The Book Nerd's Guide to JavaScript
Given at DotJS, Paris on 17th November 2014
Angus Croll
November 17, 2014
Tweet
Share
More Decks by Angus Croll
See All by Angus Croll
Stop being Perfect
anguscroll
11
1.4k
ES6 Uncensored
anguscroll
72
11k
Learning to Fly — Twitter Flight and Mixins
anguscroll
23
4.4k
JavaScript is Literature is JavaScript
anguscroll
21
3.2k
The Politics of JavaScript
anguscroll
122
23k
Parlez-Vous JavaScript
anguscroll
33
6.3k
Break all the Rulez
anguscroll
42
15k
How we Learned to Stop Worrying and Love JavaScript
anguscroll
90
21k
Other Decks in Technology
See All in Technology
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
AWSでRAGを作る法方
sonoda_mj
1
140
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
Classmethod Odyssey 登壇資料
yamahiro
0
390
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
MySQLのロックの種類とその競合
yoku0825
6
1.6k
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Teambox: Starting and Learning
jrom
130
8.6k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Facilitating Awesome Meetings
lara
46
5.8k
A Philosophy of Restraint
colly
200
16k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Music & Morning Musume
bryan
43
5.9k
Building Your Own Lightsaber
phodgson
101
5.9k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Transcript
A Book Nerd’s Guide to JavaScript @angustweets
None
Practical, Useful, Mind Numbingly Boring Nonsensical Work of Genius
What can Literature teach us about Programming?
Great literature is the creation of open minds As programmers
our focus can be very narrow
We’re encouraged to follow only one style…
Actual excerpts from: Google Style Guide AirBnb Style Guide JavaScript
Garden
None
None
We’re left with only one way to get from A
to B :(
None
None
Literature is about embracing the entire language
When programmers embrace the entire language we get choices…
None
None
"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)
None
None
(at least until the JavaScript Police get here)
None
None
Perhaps most importantly…
…Open Minds keep JavaScript fun.
This one just follows The Good Parts These two learn
by experiment
As programmers we’re not encouraged to experiment
Yet experiment is what keeps JavaScript alive
“You need a lot of bad code to write good
code” - Substack (dotJS 2014)
‣ if(!!x) ‣ fn && fn() ‣ immediately invoked functions
‣ module pattern ‣ promises
None
I decided to take experiment to the next level…
None
Wait What?
Twenty Five Authors solving Five JavaScript Problems
Hemingway developed the Iceberg Theory
Here is Hemingway’s Iceberg Theory applied to JavaScript…
(weird shit) (Deceptively Familiar Syntax) (weird shit) JavaScript
(weird shit) JAVA!! (Deceptively Familiar Syntax) (weird shit) JavaScript
(weird shit) JAVA!! But Easier!! (Deceptively Familiar Syntax) (weird shit)
JavaScript
(weird shit) JAVA!! But Easier!! (Deceptively Familiar Syntax) (weird shit)
WTF? JavaScript
Generate Prime Numbers
None
// 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;! };!
1 2 3 4 5 6 7 8 9 10
11 12 13 14 2 3 Borges vs. Prime Numbers
None
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;! }!
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;! }!
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;! }!
! new Array(5).join('A' + new Array(5).join('a'));! ! >! !
new Array(5).join("A" + new Array(5).join('a'));! ! > "AaaaaAaaaaAaaaaAaaaa"!
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;! }!
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;}”);!
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;!
Alice in Prime Numberland
Alice in Prime Numberland
Alice in Prime Numberland
Alice in Prime Numberland
Alice in Prime Numberland
Alice in Prime Numberland
Alice in Prime Numberland
Alice in Prime Numberland
Alice in Prime Numberland
Alice in Prime Numberland
Alice in Prime Numberland
So what did we learn?
Playing is Learning
Self-taught programmers are often the best programmers because they get
to make mistakes
Experiment, Play, Have Fun and Keep an Open Mind.
Fin, merci! @angustweets anguscroll.com/hemingway
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