index.html

   1 <html><head>
   2     <meta charset="utf-8">
   3     <link rel="stylesheet" href="css/csshake.min.css">
   4     <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&amp;display=swap" rel="stylesheet">
   5     <link 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>
  10     <style>
  11      body {
  12          margin: 0px;
  13          font-family: 'Press Start 2P', cursive;
  14          color: white;
  15          text-shadow:
  16              1px 1px 0 #000;
  17          background-color: #f98012;
  18          background-image: url("img/tile.png");
  19          background-repeat: repeat;
  20          background-size: 10%;
  21          image-rendering: crisp-edges;
  22          background-position-x: -33px;
  23          background-blend-mode: multiply;
  24          font-size: 22px;
  25      }
  26
  27      .angereyWrap {
  28          position: absolute;
  29          color: #cc0000;
  30      }
  31
  32      .angerey {
  33          letter-spacing: -20px;
  34          transform: rotate(90deg) scale(1, 1.5);
  35      }
  36
  37      .thonkingWrap {
  38          position: absolute;
  39      }
  40
  41      .hljs {
  42          font-family: 'Press Start 2P', cursive;
  43          text-shadow: 2px 2px 0 #000;
  44          font-size: 30px;
  45          overflow: hidden;
  46      }
  47
  48      h1, h2 {
  49          text-shadow: 2px 2px 0 #000;
  50      }
  51
  52      .slide-title {
  53          font-size: 40px;
  54          margin: 20px;
  55          text-shadow: 10px 10px 0 #00000069;
  56          text-align: center;
  57      }
  58
  59      .slide {
  60          margin: 40px;
  61          box-shadow: 10px 10px 0 #00000069;
  62          padding: 20px;
  63          height: 80%;
  64          background: #6187a8e3;
  65      }
  66
  67      .flexotron {
  68          display: flex;
  69          justify-content: center;
  70          align-items: center;
  71          flex-wrap: wrap;
  72      }
  73
  74      #slide-0 #cloudguy {
  75          height: 100%;
  76          display: flex;
  77          justify-content: center;
  78          align-items: center;
  79          flex-wrap: wrap;
  80      }
  81
  82      #cgquotes {
  83          font-size: 30px;
  84          text-shadow: 2px 2px 0 #000;
  85      }
  86
  87      #slide-1 .slide div {
  88          display: flex;
  89          width: 40%;
  90      }
  91
  92      li {
  93          list-style: square;
  94      }
  95
  96      img {
  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+                           */
 104      }
 105
 106      .fig {
 107          text-align: center;
 108      }
 109
 110      #slide-1 .shake-constant, .crazy, .span {
 111          display: inline-block;
 112      }
 113
 114      #slide-1 .shake-opacity {
 115          color: #f98012;
 116      }
 117
 118      #slide-1 #rant {
 119          padding: 20px;
 120          height: 80%;
 121          font-size: 14px;
 122      }
 123
 124      .textbox {
 125          text-align: center;
 126          box-shadow: 10px 10px 0 #00000069;
 127          border: 2px solid black;
 128          background-color: #3f6382;
 129          padding: 5px;
 130      }
 131
 132      .hljs {
 133          box-shadow: 10px 10px 0 #00000069;
 134          border: 2px solid black;
 135      }
 136
 137      div[id^="slide-"] {
 138          display: none;
 139      }
 140
 141      span[class^="code-friends"].on, span[class^="code-friends"].on > span, span[class^="code-friends"].on > span > span {
 142          color: #f98012 !important;
 143      }
 144
 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;
 147      }
 148
 149      .highlight {
 150          color: #f98012;
 151      }
 152
 153      li {
 154          margin-top: 10px;
 155      }
 156
 157     </style>
 158 </head>
 159 <body>
 160     <div id="slide-0">
 161         <div id="cloudguy">
 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>
 165             </div>
 166         </div>
 167     </div>
 168     <div id="slide-1">
 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%;">
 173             </div>
 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>
 178                     </div>
 179                 </div>
 180             </div>
 181             <div class="fig">Fig 1.1 What most people thing a typical functional programming advocate looks like</div>
 182         </div>
 183     </div>
 184     <div id="slide-2">
 185         <div class="slide-title">=<< Obligatory Quote >>=</div>
 186         <div class="slide">
 187         </div>
 188     </div>
 189     <div id="slide-3">
 190         <div class="slide-title">=<< Obligatory Quote >>=</div>
 191         <div class="slide">
 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>
 193         </div>
 194     </div>
 195     <div id="slide-4">
 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;">
 203                         <li>Haskell</li>
 204                         <li>Elm</li>
 205                         <li>Elixir</li>
 206                         <li>Clojure</li>
 207                     </ul>
 208                 </div>
 209             </div>
 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;">
 215                         <li>PHP</li>
 216                         <li>C</li>
 217                         <li>Java</li>
 218                         <li>DamoScript</li>
 219                     </ul>
 220                 </div>
 221             </div>
 222         </div>
 223     </div>
 224     <div id="slide-5">
 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;">
 231                     <li>He runs.</li>
 232                     <li>I like climbing.</li>
 233                     <li>Ice is cold.</li>
 234                     <li>Mathieu is shredded.</li>
 235                 </ul>
 236             </div>
 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>
 245                 </ul>
 246             </div>
 247         </div>
 248     </div>
 249     <div id="slide-6">
 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>
 254                 This is this.
 255             </div>
 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>
 258                 Do this.
 259             </div>
 260         </div>
 261     </div>
 262     <div id="slide-7">
 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>
 266         </div>
 267     </div>
 268     <div id="slide-8">
 269         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 270         <div class="slide">
 271             <h1>The Great Dividers</h1>
 272             <h2>Consider:</h2>
 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>
 275             </div>
 276             <div style="display: flex; margin-top: 20px; margin-bottom: 20px;">
 277                 <span style="margin: auto;">and:</span>
 278             </div>
 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>
 283             </div>
 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>
 287             </div>
 288         </div>
 289     </div>
 290     <div id="slide-9">
 291         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 292         <div class="slide">
 293             <div style="display: flex; margin-top: 50px;">
 294                 <pre style="margin: auto;"><code style="font-size: 20px;">x = x + 1;</code></pre>
 295             </div>
 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 />
 300                     Complete nonsense!
 301                 </div>
 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.
 306                 </div>
 307             </div>
 308         </div>
 309     </div>
 310     <div id="slide-10">
 311         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 312         <div class="slide">
 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);
 316 }</code></pre>
 317             </div>
 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`!
 323                 </div>
 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?
 328                 </div>
 329             </div>
 330         </div>
 331     </div>
 332     <div id="slide-11">
 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>
 336         </div>
 337     </div>
 338     <div id="slide-12">
 339         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 340         <div class="slide">
 341             <h1>Real Haskell Code That Runs</h1>
 342             <pre><code class="haskell">repeat x = x ++ repeat x
 343 threeFs = take 3 (repeat "f")
 344
 345 > "fff"
 346 </code></pre>
 347         </div>
 348     </div>
 349     <div id="slide-13">
 350         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 351         <div class="slide">
 352             <h1>Real JavaScript Code That Hangs</h1>
 353             <pre><code class="javascript">function repeat(x) {
 354     return x + repeat(x);
 355 }
 356
 357 threeFs = repeat("f").substr(0,3);
 358
 359 > InternalError: too much recursion
 360 </code></pre>
 361         </div>
 362     </div>
 363     <div id="slide-20">
 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>
 378         </div>
 379     </div>
 380     <div id="slide-21">
 381         <div class="slide-title">=<< Promises >>=</div>
 382         <div class="slide">
 383             <h2>What problems do promises solve?</h2>
 384             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 385                 <ul>
 386                     <li>Asynchronous request management</li>
 387                     <li>Error handling for computations which may fail</li>
 388                     <li>Probably more too</li>
 389                 </ul>
 390             </div>
 391             <h2 style="margin-top: 50px;">What are promises then?</h2>
 392             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 393                 <ul>
 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>
 397                 </ul>
 398             </div>
 399         </div>
 400     </div>
 401     <div id="slide-22">
 402         <div class="slide-title">=<< Promises >>=</div>
 403         <div class="slide">
 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>
 408             </div>
 409             <div style="display: flex; margin-top: 20px; margin-bottom: 20px;">
 410                 <span style="margin: auto;">is equivalent to:</span>
 411             </div>
 412             <div style="display: flex; margin-bottom:50px;">
 413                 <pre style="margin: auto;"><code style="font-size: 20px;">function(x) {
 414     return x+1;
 415 }</code></pre>
 416             </div>
 417             <h2>Composition</h2>
 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>
 420             </div>
 421         </div>
 422     </div>
 423     <div id="slide-23">
 424         <div class="slide-title">=<< Promises >>=</div>
 425         <div class="slide">
 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>
 429             </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>
 432             </div>
 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>
 435             </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>
 438             </div>
 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>
 441             </div>
 442         </div>
 443     </div>
 444     <div id="slide-24">
 445         <div class="slide-title">=<< Promises >>=</div>
 446         <div class="slide">
 447             <h1>OK great but who cares?</h1>
 448             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 449                 <ul>
 450                     <li>We are <span class="shake-constant shake-opacity highlight" style="display: inline-block;">declaring</span> how we want promises to compose</li>
 451                     <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>
 454                     </li>
 455                     <li>We can <span class="shake-constant shake-opacity highlight" style="display: inline-block;">declare</span> a failure anywhere in the chain</li>
 456                 </ul>
 457             </div>
 458         </div>
 459     </div>
 460     <div id="slide-25">
 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>
 469             </div>
 470         </div>
 471     </div>
 472     <div id="slide-26">
 473         <div class="slide-title">=<< Promises >>=</div>
 474         <div class="slide">
 475             <h1>Woah!</h1>
 476             <h2>JavaScript</h2>
 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>
 480             <h2>Haskell</h2>
 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>
 484         </div>
 485     </div>
 486     <div id="slide-27">
 487         <div class="slide-title">=<< Promises >>=</div>
 488         <div class="slide">
 489             <h1>Woah!</h1>
 490             <h2>JavaScript</h2>
 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>
 495             <h2>Haskell</h2>
 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>
 500         </div>
 501     </div>
 502 </body>
 503 <script>
 504  var div, i, j, span, duration = "";
 505  var crazyTexts = [];
 506  var opacyTexts = [];
 507  div = document.querySelectorAll("#rant > span.crazy");
 508  for (j = 0; j < div.length; j++) {
 509      span=""
 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] == " " ? "&nbsp;" : div[j].innerText[i];
 514          span += "</span>";
 515      }
 516      crazyTexts.push(span);
 517  }
 518
 519  opacities = document.querySelectorAll("#rant > span.shake-opacity");
 520  for (k = 0; k < opacities.length; k++) {
 521      shrek=Math.random();
 522      opacities[k].style.animationDuration = shrek + 's';
 523      opacyTexts.push(opacities[k].outerHTML);
 524  }
 525
 526  allText = ""
 527  for (l = 0; l< crazyTexts.length; l++) {
 528      allText+=crazyTexts[l] + (opacyTexts[l] ? opacyTexts[l] : "");
 529  }
 530
 531  document.getElementById('rant').innerHTML = allText;
 532
 533  var x = 0;
 534  var y = 0;
 535  var b = document.querySelectorAll('body')[0];
 536  setInterval(function(){
 537      x+=2;
 538      y-=2;
 539      b.style.backgroundPosition = x + 'px ' + y + 'px';
 540  }, 250);
 541
 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;
 547
 548  function checkKey(e) {
 549
 550      e = e || window.event;
 551      if (e.keyCode == '37') {
 552          if (document.getElementById('slide-' + currentSlide)) {
 553              document.getElementById('slide-' + currentSlide).style.display = 'none';
 554          }
 555          currentSlide--;
 556          document.getElementById('slide-' + currentSlide).style.display = 'block';
 557      }
 558      else if (e.keyCode == '39') {
 559          if (document.getElementById('slide-' + currentSlide)) {
 560              document.getElementById('slide-' + currentSlide).style.display = 'none';
 561          }
 562          currentSlide++;
 563          document.getElementById('slide-' + currentSlide).style.display = 'block';
 564      }
 565
 566      console.log(currentSlide);
 567  }
 568
 569
 570  function activateFriends(n) {
 571      f = document.querySelectorAll('.code-friends' + n);
 572
 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");
 577      }
 578  }
 579
 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");
 586      }
 587  }
 588
 589  function activatePromise(n) {
 590      p = document.querySelectorAll('.promise' + n);
 591      for (fr = 0; fr< p.length; fr++) {
 592          p[fr].classList.add('on');
 593      }
 594  }
 595
 596  function deactivatePromise(n) {
 597      p = document.querySelectorAll('.promise' + n);
 598      for (fr = 0; fr< p.length; fr++) {
 599          p[fr].classList.remove('on');
 600      }
 601  }
 602
 603  cloudGuyQuotes = [
 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."
 616  ];
 617
 618  cgq = document.getElementById("cgquotes");
 619  numQuotes = cloudGuyQuotes.length;
 620  currentQuote = 0;
 621  setInterval(function(){
 622      if (currentQuote == 0 || currentQuote == 1) {
 623          currentQuote++;
 624      } else {
 625          currentQuote = Math.floor(Math.random()*(cloudGuyQuotes.length - 3)) + 3;
 626          console.log(currentQuote);
 627      }
 628
 629      cgq.innerText = cloudGuyQuotes[currentQuote];
 630  }, 10000);
 631
 632  angeries = document.querySelectorAll(".angereyWrap");
 633  usedPositions = [];
 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) + "%";
 639
 640      while (usedPositions.includes(thing)) {
 641          thing = ((Math.floor(Math.random() * 10) + 1) * 9) + "%";
 642      }
 643
 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);
 648  }
 649
 650  thonkings = document.querySelectorAll(".thonkingWrap");
 651  shakes = ["shake-slow", "shake-little", "shake-opacity"];
 652  usedPositions = [];
 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);
 657
 658      while (usedPositions.includes(thing)) {
 659          thing = Math.floor(Math.random() * 4) + 1;
 660      }
 661
 662      switch(thing) {
 663          case 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)]);
 669              break;
 670          case 2:
 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)]);
 676              break;
 677          case 3:
 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)]);
 683              break;
 684          case 4:
 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)]);
 690              break;
 691      }
 692
 693
 694      usedPositions.push(thing);
 695  }
 696 </script>
 697 </html>