3 <link rel=
"stylesheet" href=
"css/csshake.min.css">
4 <link href=
"https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel=
"stylesheet">
6 href=
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css">
7 <script src=
"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
8 <script>hljs.initHighlightingOnLoad();
</script>
9 <title>Crazy Wide-Eyed Functional Programming
</title>
13 font-family: 'Press Start
2P', cursive;
17 background-color: #f98012;
18 background-image: url(
"img/tile.png");
19 background-repeat: repeat;
21 image-rendering: crisp-edges;
22 background-position-x: -
33px;
23 background-blend-mode: multiply;
33 letter-spacing: -
20px;
34 transform: rotate(
90deg) scale(
1,
1.5);
42 font-family: 'Press Start
2P', cursive;
43 text-shadow:
2px
2px
0 #
000;
49 text-shadow:
2px
2px
0 #
000;
55 text-shadow:
10px
10px
0 #
00000069;
61 box-shadow:
10px
10px
0 #
00000069;
64 background: #
6187a8e3;
69 justify-content: center;
77 justify-content: center;
84 text-shadow:
2px
2px
0 #
000;
97 image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
98 image-rendering: -moz-crisp-edges; /* Firefox */
99 image-rendering: -o-crisp-edges; /* Opera */
100 image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
101 image-rendering: pixelated; /* Chrome */
102 image-rendering: optimize-contrast; /* CSS3 Proposed */
103 -ms-interpolation-mode: nearest-neighbor; /* IE8+ */
110 #slide-
1 .shake-constant, .crazy, .span {
111 display: inline-block;
114 #slide-
1 .shake-opacity {
126 box-shadow:
10px
10px
0 #
00000069;
127 border:
2px solid black;
128 background-color: #
3f6382;
133 box-shadow:
10px
10px
0 #
00000069;
134 border:
2px solid black;
141 span[class^=
"code-friends"].on, span[class^=
"code-friends"].on
> span, span[class^=
"code-friends"].on
> span
> span {
142 color: #f98012 !important;
145 span[class^=
"promise"].on, span[class^=
"promise"].on
> span, span[class^=
"promise"].on
> span
> span, span[class^=
"promise"].on
> span
> span
> span {
146 color: #f98012 !important;
162 <div style=
"height: 20%; text-align: center;">
163 <img style=
"height: 100%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src=
"img/cloudguy.gif" />
164 <div id=
"cgquotes" style=
"width: 80%; margin: auto;">Welcome to the talk!
</div>
169 <div class=
"slide-title">=<< What's up with that Title?
>>=
</div>
170 <div class=
"slide flexotron">
171 <div style=
"justify-content: right;">
172 <img class=
"shake-constant shake" src=
"img/wide-eyed-crazy.png" style=
"width: 70%; margin-right: 10%;">
174 <div style=
"justify-content: left">
175 <div style=
"display: flex; align-items: center; width: 70%">
176 <div id=
"rant" class=
"textbox" style=
"display: block;height: auto; width:100%; margin-left:10%;">
177 <span class=
"crazy">It’s functions,
</span><span class=
"shake-constant shake-opacity">pure
</span><span class=
"crazy"> functions! Pure functions and their values, PURE FUNCTIONS FOREVER AND FOREVER AND FOREVER A HUNDRED YEARS
</span><span class=
"shake-constant shake-opacity">monad
</span><span class=
"crazy">... some... things... Me and
</span><span class=
"shake-constant shake-opacity">monads
</span><span class=
"crazy"> runnin' around and...
</span><span class=
"shake-constant shake-opacity">applicative functor
</span><span class=
"crazy"> time... a- all day long forever... All a - a hundred days
</span><span class=
"shake-constant shake-opacity">applicatives
</span><span class=
"crazy"> and
</span><span class=
"shake-constant shake-opacity">functors
</span><span class=
"crazy">! Forever a hundred times.... OVER and over
</span><span class=
"shake-constant shake-opacity">monad transformers
</span><span class=
"crazy">... adventures dot com... W W W dot at
</span><span class=
"shake-constant shake-opacity">lambda calculus
</span><span class=
"crazy"> and
</span><span class=
"shake-constant shake-opacity">category theory
</span><span class=
"crazy"> dot com w..w..w... function composition adventures... Ah- hundred years… Every minute
</span><span class=
"shake-constant shake-opacity">referential... transparency
</span><span class=
"crazy"> dot com.... w w w a hundred times...
</span><span class=
"shake-constant shake-opacity">composition
</span><span class=
"crazy"> dot com...
</span>
181 <div class=
"fig">Fig
1.1 What most people thing a typical functional programming advocate looks like
</div>
185 <div class=
"slide-title">=<< Obligatory Quote
>>=
</div>
190 <div class=
"slide-title">=<< Obligatory Quote
>>=
</div>
192 <div style=
"text-align:center; font-size:40px; text-shadow: 4px 4px #000;" >If you wish to build a ship, do not divide the men into teams and send them to the forest to cut wood. Instead, teach them to long for the vast and endless sea.
</div>
196 <div class=
"slide-title">=<< Paradigms
>>=
</div>
197 <div class=
"slide flexotron">
198 <div class=
"textbox flexotron" style=
"position: relative; width: 30%; height: 50%; margin-right:20px;">
199 <span class=
"textbox" style=
"box-shadow: none; position: absolute; top: -20px; left: 30px;">Declarative
</span>
200 <div class=
"textbox" style=
"position: relative; width: 80%; height: 60%;">
201 <span class=
"textbox" style=
"box-shadow: none; position: absolute; top: -20px; left: 30px;">Functional
</span>
202 <ul style=
"text-align: left; margin-top: 65px;margin-left: 40px;">
210 <div class=
"textbox flexotron" style=
"position: relative; width: 30%; height: 50%; margin-right:20px;">
211 <span class=
"textbox" style=
"box-shadow: none; position: absolute; top: -20px; left: 30px;">Imperative
</span>
212 <div class=
"textbox" style=
"position: relative; width: 80%; height: 60%;">
213 <span class=
"textbox" style=
"box-shadow: none; position: absolute; top: -20px; left: 30px;">Procedural
</span>
214 <ul style=
"text-align: left; margin-top: 65px;margin-left: 40px;">
225 <div class=
"slide-title">=<< Gramatical Mood
>>=
</div>
226 <div class=
"slide flexotron">
227 <div class=
"textbox" style=
"position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
228 <span class=
"textbox" style=
"box-shadow: none; position: absolute; top: -20px; left: 30px;">Declarative
</span>
229 A sentence which expresses a statement of fact.
230 <ul style=
"text-align: left; margin-top: 65px;margin-left: 40px;">
232 <li>I like climbing.
</li>
233 <li>Ice is cold.
</li>
234 <li>Mathieu is shredded.
</li>
237 <div class=
"textbox" style=
"position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
238 <span class=
"textbox" style=
"box-shadow: none; position: absolute; top: -20px; left: 30px;">Imperative
</span>
239 <span>A sentence which expresses instructions, or requests.
</span>
240 <ul style=
"text-align: left; margin-top: 65px;margin-left: 40px;">
241 <li>Shut the door.
</li>
242 <li>Don't eat my burger.
</li>
243 <li>Let's go to the pub.
</li>
244 <li>Don't make eye contact with Mathieu.
</li>
250 <div class=
"slide-title">=<< Gramatical Mood
>>=
</div>
251 <div class=
"slide flexotron">
252 <div class=
"textbox" style=
"position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
253 <span class=
"textbox" style=
"box-shadow: none; position: absolute; top: -20px; left: 30px;">Declarative
</span>
256 <div class=
"textbox" style=
"position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
257 <span class=
"textbox" style=
"box-shadow: none; position: absolute; top: -20px; left: 30px;">Imperative
</span>
263 <div class=
"slide-title">=<< Big Brain Moment
>>=
</div>
264 <div class=
"slide flexotron">
265 <div class=
"textbox" style=
"text-align:center; font-size:40px; text-shadow: 4px 4px #000; padding:20px;" >Programming languages
<span class=
"shake-slow shake-constant" style=
"color: #f98012">ARE
</span> human languages.
</div>
269 <div class=
"slide-title">=<< Some Code (Finally)
>>=
</div>
271 <h1>The Great Dividers
</h1>
273 <div style=
"display: flex;">
274 <pre style=
"margin: auto;"><code style=
"font-size: 20px;"><span class=
"code-friends1 code-friends4">x = x +
1;
</span></code></pre>
276 <div style=
"display: flex; margin-top: 20px; margin-bottom: 20px;">
277 <span style=
"margin: auto;">and:
</span>
279 <div style=
"display: flex; margin-bottom:50px;">
280 <pre style=
"margin: auto;"><code style=
"font-size: 20px;"><span class=
"code-friends2 code-friends3">function repeat(x) {
281 return x + repeat(x);
282 }
</span></code></pre>
284 <h2>OK, so what?
</h2>
285 <div style=
"display: flex;">
286 <div class=
"textbox" style=
"margin: auto; width: 60%; font-size: 20px;">In the declaritive paradigm,
<span class=
"code-friends1" onmouseenter=
"activateFriends(1);" onmouseleave=
"deactivateFriends(1);" style=
"display: inline-block;">this
</span> code hangs while
<span class=
"code-friends2" onmouseenter=
"activateFriends(2);" onmouseleave=
"deactivateFriends(2);" style=
"display: inline-block;">this
</span> code runs. In the imperative paradigm
<span class=
"code-friends3" onmouseenter=
"activateFriends(3);" onmouseleave=
"deactivateFriends(3);" style=
"display: inline-block;">this
</span> code hangs, while
<span class=
"code-friends4" onmouseenter=
"activateFriends(4);" onmouseleave=
"deactivateFriends(4);" style=
"display: inline-block;">this
</span> code runs.
</div>
291 <div class=
"slide-title">=<< Some Code (Finally)
>>=
</div>
293 <div style=
"display: flex; margin-top: 50px;">
294 <pre style=
"margin: auto;"><code style=
"font-size: 20px;">x = x +
1;
</code></pre>
296 <div class=
"flexotron" style=
"height: 80%;">
297 <div class=
"textbox" style=
"position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
298 <span class=
"textbox" style=
"box-shadow: none; position: absolute; top: -20px; left: 30px;">Declarative
</span>
299 "x is the same as itself plus one."<br /><br /><br /><br /><br />
302 <div class=
"textbox" style=
"position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
303 <span class=
"textbox" style=
"box-shadow: none; position: absolute; top: -20px; left: 30px;">Imperative
</span>
304 "Evaluate the thing on the right of `=` then store it in the thing on the left of `=`."<br /><br /><br />
305 A list of instructions that can be followed.
311 <div class=
"slide-title">=<< Some Code (Finally)
>>=
</div>
313 <div style=
"display: flex; margin-top: 50px;">
314 <pre style=
"margin: auto;"><code style=
"font-size: 20px;">function repeat(x) {
315 return x + repeat(x);
318 <div class=
"flexotron" style=
"height: 80%;">
319 <div class=
"textbox" style=
"position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 30px;">
320 <span class=
"textbox" style=
"box-shadow: none; position: absolute; top: -20px; left: 30px;">Declarative
</span>
321 "The repeat of `x` is `x` appended to the repeat of `x`"<br /><br /><br />
322 An infinite list of `x`!
324 <div class=
"textbox" style=
"position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
325 <span class=
"textbox" style=
"box-shadow: none; position: absolute; top: -20px; left: 30px;">Imperative
</span>
326 "To evaluate the repeate of `x`, first evaluate the repeat of `x`""<br /><br /><br />
327 ...Yeah, you see the problem?
333 <div class="slide-title
">=<< Big Brain Moment >>=</div>
334 <div class="slide flexotron
">
335 <div class="textbox
" style="text-align:center; font-size:
40px; text-shadow:
4px
4px #
000; padding:
20px;
" >Programming languages <span class="shake-slow shake-constant
" style="color: #f98012
">ARE</span> human languages.</div>
339 <div class="slide-title
">=<< Some Code (Finally) >>=</div>
341 <h1>Real Haskell Code That Runs</h1>
342 <pre><code class="haskell
">repeat x = x ++ repeat x
343 threeFs = take 3 (repeat "f
")
350 <div class="slide-title
">=<< Some Code (Finally) >>=</div>
352 <h1>Real JavaScript Code That Hangs</h1>
353 <pre><code class="javascript
">function repeat(x) {
354 return x + repeat(x);
357 threeFs = repeat("f
").substr(0,3);
359 > InternalError: too much recursion
364 <div class="slide-title
">=<< Promises >>=</div>
365 <div class="slide flexotron
">
366 <div style="position: relative; text-align:center; font-size:
40px; text-shadow:
4px
4px #
000;
" >
367 <div class="angereyWrap
"><div class="angerey
">>:(</div></div>
368 <div class="angereyWrap
"><div class="angerey
">>:(</div></div>
369 <div class="angereyWrap
"><div class="angerey
">>:(</div></div>
370 <div class="angereyWrap
"><div class="angerey
">>:(</div></div>
371 <div class="angereyWrap
"><div class="angerey
">>:(</div></div>
372 <div class="angereyWrap
"><div class="angerey
">>:(</div></div>
373 <div class="angereyWrap
"><div class="angerey
">>:(</div></div>
374 <div class="angereyWrap
"><div class="angerey
">>:(</div></div>
375 <div class="angereyWrap
"><div class="angerey
">>:(</div></div>
376 <div class="angereyWrap
"><div class="angerey
">>:(</div></div>
377 Promises <span class="shake-slow shake-constant
" style="display: inline-block; color: #f98012
">do not</span> make things asynchronous!</div>
381 <div class="slide-title
">=<< Promises >>=</div>
383 <h2>What problems do promises solve?</h2>
384 <div class="textbox
" style="width:
60%; margin: auto; text-align: left;
">
386 <li>Asynchronous request management</li>
387 <li>Error handling for computations which may fail</li>
388 <li>Probably more too</li>
391 <h2 style="margin-top:
50px;
">What are promises then?</h2>
392 <div class="textbox
" style="width:
60%; margin: auto; text-align: left;
">
394 <li>A value (which may or may not be available yet) wrapped in some additional context</li>
395 <li>Functions to instantiate the wrapper (Promise.resolve, Promise.reject)
396 <li>A rule for composing these wrapped values (then)</li>
402 <div class="slide-title
">=<< Promises >>=</div>
404 <h1>Terminology/syntax recap</h1>
405 <h2>JavaScript arrow functions</h2>
406 <div style="display: flex;
">
407 <pre style="margin: auto;
"><code style="font-size:
20px;
">x => x + 1;</code></pre>
409 <div style="display: flex; margin-top:
20px; margin-bottom:
20px;
">
410 <span style="margin: auto;
">is equivalent to:</span>
412 <div style="display: flex; margin-bottom:
50px;
">
413 <pre style="margin: auto;
"><code style="font-size:
20px;
">function(x) {
418 <div style="display: flex;
">
419 <div class="textbox
" style="margin: auto; width:
60%; font-size:
20px;
">A method of combining two things of the same type in to another thing that is also of the same type</div>
424 <div class="slide-title
">=<< Promises >>=</div>
426 <h1>Promise composition</h1>
427 <div style="display: flex;
">
428 <div class="textbox
" style="margin: auto; width:
60%; font-size:
20px;
">The `then` method of a promise accepts a function as an argument. This function takes a value and returns a new promise. The new promise "combines
" the previous two using the "composition rule
" given to `then`.</div>
430 <div style="display: flex; margin-top:
100px
">
431 <pre style="margin: auto;
"><code style="font-size:
12px;
"><span class="promise3
"><span class="promise2
"><span class="promise1
">Promise.resolve("Some value
")</span>.then(x => Promise.resolve(x + " and another value
"))</span>.then(x => Promise.resolve(x + " and another one!
"))</span>;</code></pre>
433 <div style="display: flex;
">
434 <div class="textbox
" style="margin: auto; width:
60%; font-size:
20px; margin-top:
50px;
">There are three promises in the above snippet. <span onmouseenter="activatePromise(
1)
" onmouseleave="deactivatePromise(
1)
" class="promise1
">One</span>, <span onmouseenter="activatePromise(
2)
" onmouseleave="deactivatePromise(
2)
" class="promise2
">two</span>, <span onmouseenter="activatePromise(
3)
" onmouseleave="deactivatePromise(
3)
" class="promise3
">three</span>.</div>
436 <div style="display: flex; margin-top:
100px
">
437 <pre style="margin: auto;
"><code style="font-size:
12px;
">Promise.resolve("Some value
").then(x => Promise.reject("It's all gone wrong
")).then(x => Promise.resolve(x + " and another one!
"));</code></pre>
439 <div style="display: flex;
">
440 <div class="textbox
" style="margin: auto; width:
60%; font-size:
20px; margin-top:
50px;
">The above snippet still results in a promise, but it is a "failed
" one. Any subsequent `then` after the `reject` has no effect.</div>
445 <div class="slide-title
">=<< Promises >>=</div>
447 <h1>OK great but who cares?</h1>
448 <div class="textbox
" style="width:
60%; margin: auto; text-align: left;
">
450 <li>We are <span class="shake-constant shake-opacity highlight
" style="display: inline-block;
">declaring</span> how we want promises to compose</li>
452 The order that the promises actually resolve their values in is not important
453 <ul><li>In other words, we don't have to worry about <span class="shake-constant shake-opacity highlight
" style="display: inline-block;
">timing</span> anymore</li></ul>
455 <li>We can <span class="shake-constant shake-opacity highlight
" style="display: inline-block;
">declare</span> a failure anywhere in the chain</li>
461 <div class="slide-title
">=<< Promises >>=</div>
462 <div class="slide flexotron
">
463 <div style="position: relative;
">
464 <img src="img/thonking.gif
" />
465 <div class="thonkingWrap
"><div class="thonk
">atemporality?</div></div>
466 <div class="thonkingWrap
"><div class="thonk
">declaritive?</div></div>
467 <div class="thonkingWrap
"><div class="thonk
">functions?</div></div>
468 <div class="thonkingWrap
"><div class="thonk
">composition?</div></div>
473 <div class="slide-title
">=<< Promises >>=</div>
477 <pre style="margin-bottom:
50px;
"><code class="javascript
"><span class="code-friends1
" onmouseenter="activateFriends(
1);
" onmouseleave="deactivateFriends(
1);
" style="display: inline-block
">Promise.resolve</span>(<span class="code-friends2
" onmouseenter="activateFriends(
2);
" onmouseleave="deactivateFriends(
2);
" style="display: inline-block
">"We start here
"</span>)
478 <span class="code-friends3
" onmouseenter="activateFriends(
3);
" onmouseleave="deactivateFriends(
3);
" style="display: inline-block
">.then</span>(<span class="code-friends4
" onmouseenter="activateFriends(
4);
" onmouseleave="deactivateFriends(
4);
" style="display: inline-block
">x =></span> <span class="code-friends5
" onmouseenter="activateFriends(
5);
" onmouseleave="deactivateFriends(
5);
" style="display: inline-block
">Promise.resolve</span>(<span class="code-friends6
" onmouseenter="activateFriends(
6);
" onmouseleave="deactivateFriends(
6);
" style="display: inline-block
">x + " then get here
"</span>))
479 <span class="code-friends7
" onmouseenter="activateFriends(
7);
" onmouseleave="deactivateFriends(
7);
" style="display: inline-block
">.then</span>(<span class="code-friends8
" onmouseenter="activateFriends(
8);
" onmouseleave="deactivateFriends(
8);
" style="display: inline-block
">x =></span> <span class="code-friends9
" onmouseenter="activateFriends(
9);
" onmouseleave="deactivateFriends(
9);
" style="display: inline-block
">Promise.resolve</span>(<span class="code-friends10
" onmouseenter="activateFriends(
10);
" onmouseleave="deactivateFriends(
10);
" style="display: inline-block
">x + " and finally here!
"</span>))</code></pre>
481 <pre><code class="haskell
"><span class="code-friends1
" onmouseenter="activateFriends(
1);
" onmouseleave="deactivateFriends(
1);
" style="display: inline-block
">Right</span>(<span class="code-friends2
" onmouseenter="activateFriends(
2);
" onmouseleave="deactivateFriends(
2);
" style="display: inline-block
">"We start here
"</span>)
482 <span class="code-friends3
" onmouseenter="activateFriends(
3);
" onmouseleave="deactivateFriends(
3);
" style="display: inline-block
">>>=</span> (<span class="code-friends4
" onmouseenter="activateFriends(
4);
" onmouseleave="deactivateFriends(
4);
" style="display: inline-block
">\x -> </span><span class="code-friends5
" onmouseenter="activateFriends(
5);
" onmouseleave="deactivateFriends(
5);
" style="display: inline-block
">Right</span> (<span class="code-friends6
" onmouseenter="activateFriends(
6);
" onmouseleave="deactivateFriends(
6);
" style="display: inline-block
">x ++ " then get here
"</span>))
483 <span class="code-friends7
" onmouseenter="activateFriends(
7);
" onmouseleave="deactivateFriends(
7);
" style="display: inline-block
">>>=</span> (<span class="code-friends8
" onmouseenter="activateFriends(
8);
" onmouseleave="deactivateFriends(
8);
" style="display: inline-block
">\x -></span> <span class="code-friends9
" onmouseenter="activateFriends(
9);
" onmouseleave="deactivateFriends(
9);
" style="display: inline-block
">Right</span> (<span class="code-friends10
" onmouseenter="activateFriends(
10);
" onmouseleave="deactivateFriends(
10);
" style="display: inline-block
">x ++ " and finally here!
"</span>))</code></pre>
487 <div class="slide-title
">=<< Promises >>=</div>
491 <pre style="margin-bottom:
50px;
"><code class="javascript
"><span class="code-friends1
" onmouseenter="activateFriends(
1);
" onmouseleave="deactivateFriends(
1);
" style="display: inline-block
">Promise.resolve</span>(<span class="code-friends2
" onmouseenter="activateFriends(
2);
" onmouseleave="deactivateFriends(
2);
" style="display: inline-block
">"We start here
"</span>)
492 <span class="code-friends3
" onmouseenter="activateFriends(
3);
" onmouseleave="deactivateFriends(
3);
" style="display: inline-block
">.then</span>(<span class="code-friends4
" onmouseenter="activateFriends(
4);
" onmouseleave="deactivateFriends(
4);
" style="display: inline-block
">x =></span> <span class="code-friends5
" onmouseenter="activateFriends(
5);
" onmouseleave="deactivateFriends(
5);
" style="display: inline-block
">Promise.resolve</span>(<span class="code-friends6
" onmouseenter="activateFriends(
6);
" onmouseleave="deactivateFriends(
6);
" style="display: inline-block
">x + " then get here
"</span>))
493 <span class="code-friends11
" onmouseenter="activateFriends(
11);
" onmouseleave="deactivateFriends(
11);
" style="display: inline-block
">.then</span>(<span class="code-friends12
" onmouseenter="activateFriends(
12);
" onmouseleave="deactivateFriends(
12);
" style="display: inline-block
">x =></span> <span class="code-friends13
" onmouseenter="activateFriends(
13);
" onmouseleave="deactivateFriends(
13);
" style="display: inline-block
">Promise.reject</span>(<span class="code-friends14
" onmouseenter="activateFriends(
14);
" onmouseleave="deactivateFriends(
14);
" style="display: inline-block
">"Oh noes!
"</span>))
494 <span class="code-friends7
" onmouseenter="activateFriends(
7);
" onmouseleave="deactivateFriends(
7);
" style="display: inline-block
">.then</span>(<span class="code-friends8
" onmouseenter="activateFriends(
8);
" onmouseleave="deactivateFriends(
8);
" style="display: inline-block
">x =></span> <span class="code-friends9
" onmouseenter="activateFriends(
9);
" onmouseleave="deactivateFriends(
9);
" style="display: inline-block
">Promise.resolve</span>(<span class="code-friends10
" onmouseenter="activateFriends(
10);
" onmouseleave="deactivateFriends(
10);
" style="display: inline-block
">x + " and finally here!
"</span>))</code></pre>
496 <pre><code class="haskell
"><span class="code-friends1
" onmouseenter="activateFriends(
1);
" onmouseleave="deactivateFriends(
1);
" style="display: inline-block
">Right</span>(<span class="code-friends2
" onmouseenter="activateFriends(
2);
" onmouseleave="deactivateFriends(
2);
" style="display: inline-block
">"We start here
"</span>)
497 <span class="code-friends3
" onmouseenter="activateFriends(
3);
" onmouseleave="deactivateFriends(
3);
" style="display: inline-block
">>>=</span> (<span class="code-friends4
" onmouseenter="activateFriends(
4);
" onmouseleave="deactivateFriends(
4);
" style="display: inline-block
">\x -> </span><span class="code-friends5
" onmouseenter="activateFriends(
5);
" onmouseleave="deactivateFriends(
5);
" style="display: inline-block
">Right</span> (<span class="code-friends6
" onmouseenter="activateFriends(
6);
" onmouseleave="deactivateFriends(
6);
" style="display: inline-block
">x ++ " then get here
"</span>))
498 <span class="code-friends11
" onmouseenter="activateFriends(
11);
" onmouseleave="deactivateFriends(
11);
" style="display: inline-block
">>>=</span> (<span class="code-friends12
" onmouseenter="activateFriends(
12);
" onmouseleave="deactivateFriends(
12);
" style="display: inline-block
">\x -></span> <span class="code-friends13
" onmouseenter="activateFriends(
13);
" onmouseleave="deactivateFriends(
13);
" style="display: inline-block
">Left </span>(<span class="code-friends14
" onmouseenter="activateFriends(
14);
" onmouseleave="deactivateFriends(
14);
" style="display: inline-block
">"Oh noes!
"</span>))
499 <span class="code-friends7
" onmouseenter="activateFriends(
7);
" onmouseleave="deactivateFriends(
7);
" style="display: inline-block
">>>=</span> (<span class="code-friends8
" onmouseenter="activateFriends(
8);
" onmouseleave="deactivateFriends(
8);
" style="display: inline-block
">\x -></span> <span class="code-friends9
" onmouseenter="activateFriends(
9);
" onmouseleave="deactivateFriends(
9);
" style="display: inline-block
">Right</span> (<span class="code-friends10
" onmouseenter="activateFriends(
10);
" onmouseleave="deactivateFriends(
10);
" style="display: inline-block
">x ++ " and finally here!
"</span>))</code></pre>
504 var div, i, j, span, duration = "";
507 div = document.querySelectorAll("#rant
> span.crazy
");
508 for (j = 0; j < div.length; j++) {
510 for (i = 0; i < div[j].innerText.length; i++) {
511 duration = Math.floor(Math.random() * 5) + 100
512 span += "<span class=
\"letter shake-constant shake-little
\" style=
\"animation-duration:
" + duration + "ms
\">";
513 span += div[j].innerText[i] == " " ? " " : div[j].innerText[i];
516 crazyTexts.push(span);
519 opacities = document.querySelectorAll("#rant
> span.shake-opacity
");
520 for (k = 0; k < opacities.length; k++) {
522 opacities[k].style.animationDuration = shrek + 's';
523 opacyTexts.push(opacities[k].outerHTML);
527 for (l = 0; l< crazyTexts.length; l++) {
528 allText+=crazyTexts[l] + (opacyTexts[l] ? opacyTexts[l] : "");
531 document.getElementById('rant').innerHTML = allText;
535 var b = document.querySelectorAll('body')[0];
536 setInterval(function(){
539 b.style.backgroundPosition = x + 'px ' + y + 'px';
542 urlParts = document.URL.split('#');
543 window.console.log(urlParts);
544 var currentSlide = urlParts.length > 1 ? urlParts[1] : 0;
545 document.getElementById('slide-' + currentSlide).style.display = 'block';
546 document.onkeydown = checkKey;
548 function checkKey(e) {
550 e = e || window.event;
551 if (e.keyCode == '37') {
552 if (document.getElementById('slide-' + currentSlide)) {
553 document.getElementById('slide-' + currentSlide).style.display = 'none';
556 document.getElementById('slide-' + currentSlide).style.display = 'block';
558 else if (e.keyCode == '39') {
559 if (document.getElementById('slide-' + currentSlide)) {
560 document.getElementById('slide-' + currentSlide).style.display = 'none';
563 document.getElementById('slide-' + currentSlide).style.display = 'block';
566 console.log(currentSlide);
570 function activateFriends(n) {
571 f = document.querySelectorAll('.code-friends' + n);
573 for (fr = 0; fr< f.length; fr++) {
574 f[fr].classList.add("shake-constant
");
575 f[fr].classList.add("shake-slow
");
576 f[fr].classList.add("on
");
580 function deactivateFriends(n) {
581 f = document.querySelectorAll('.code-friends' + n);
582 for (fr = 0; fr< f.length; fr++) {
583 f[fr].classList.remove("shake-constant
");
584 f[fr].classList.remove("shake-slow
");
585 f[fr].classList.remove("on
");
589 function activatePromise(n) {
590 p = document.querySelectorAll('.promise' + n);
591 for (fr = 0; fr< p.length; fr++) {
592 p[fr].classList.add('on');
596 function deactivatePromise(n) {
597 p = document.querySelectorAll('.promise' + n);
598 for (fr = 0; fr< p.length; fr++) {
599 p[fr].classList.remove('on');
604 "Welcome to the talk!
",
605 "I hope we'll have fun exploring functional programming together!
",
606 "But while we wait let's share interesting facts and anectodes :)
",
607 "If you can be disgruntled, can you also be gruntled?
",
608 "0.9 recurring is exactly equal to one if you think about it.
",
609 "In English, the word
\"ghoti
\" can be pronounced as
\"fish
\".
",
610 "Your credit card details are somewhere in Pi.
",
611 "It takes
366 people to make sure two of them share a birthday, but only
23 people to ensure a
50% chance.
",
612 "1729 is the best number (I checked them all).
",
613 "The secret to strengh is to eat only a banana for breakfast.
",
614 "All of Back to the Future happened in the past.
",
615 "Everything is in the future.
"
618 cgq = document.getElementById("cgquotes
");
619 numQuotes = cloudGuyQuotes.length;
621 setInterval(function(){
622 if (currentQuote == 0 || currentQuote == 1) {
625 currentQuote = Math.floor(Math.random()*(cloudGuyQuotes.length - 3)) + 3;
626 console.log(currentQuote);
629 cgq.innerText = cloudGuyQuotes[currentQuote];
632 angeries = document.querySelectorAll(".angereyWrap
");
634 shakes = ["shake
", "shake-hard
", "shake-slow
", "shake-little
", "shake-horizontal
", "shake-vertical
", "shake-rotate
", "shake-opacity
", "shake-crazy
", "shake-chunk
"];
635 for (a = 0; a < angeries.length; a++) {
636 randomness = (Math.round(Math.random() * 10) + 1) * -10;
637 angeries[a].style.top = ((a > 4) ? (-180-randomness) : (180 + randomness)) + "%
" ;
638 thing = ((Math.floor(Math.random() * 10) + 1) * 9) + "%
";
640 while (usedPositions.includes(thing)) {
641 thing = ((Math.floor(Math.random() * 10) + 1) * 9) + "%
";
644 angeries[a].style.left = thing;
645 angeries[a].classList.add("shake-constant
");
646 angeries[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
647 usedPositions.push(thing);
650 thonkings = document.querySelectorAll(".thonkingWrap
");
651 shakes = ["shake-slow
", "shake-little
", "shake-opacity
"];
653 for (a = 0; a < thonkings.length; a++) {
654 thing = Math.floor(Math.random() * 4) + 1;
655 randomnessX = -(Math.round(Math.random() * 100) + 1);
656 randomnessY = -(Math.round(Math.random() * 50) + 1);
658 while (usedPositions.includes(thing)) {
659 thing = Math.floor(Math.random() * 4) + 1;
664 thonkings[a].style.left = randomnessX + 'px';
665 thonkings[a].style.top = randomnessY + 'px';
666 thonkings[a].children[0].style.transform = 'rotate(-40deg) scale(1, 1.5)'
667 thonkings[a].classList.add("shake-constant
");
668 thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
671 thonkings[a].style.right = randomnessX + 'px';
672 thonkings[a].style.top = randomnessY + 'px';
673 thonkings[a].classList.add("shake-constant
");
674 thonkings[a].children[0].style.transform = 'rotate(40deg) scale(1, 1.5)'
675 thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
678 thonkings[a].style.right = randomnessX + 'px';
679 thonkings[a].style.bottom = randomnessY + 'px';
680 thonkings[a].classList.add("shake-constant
");
681 thonkings[a].children[0].style.transform = 'rotate(-215deg) scale(1, 1.5)'
682 thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
685 thonkings[a].style.left = randomnessX + 'px';
686 thonkings[a].style.bottom = randomnessY + 'px';
687 thonkings[a].classList.add("shake-constant
");
688 thonkings[a].children[0].style.transform = 'rotate(215deg) scale(1, 1.5)'
689 thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
694 usedPositions.push(thing);