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 flexotron">
 192             <div class="textbox">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">=<< Obligatory Quote >>=</div>
 197         <div class="slide flexotron">
 198             <div class="textbox">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.<br /><br /> - Some French Guy. Idk. Who cares, I'm not cultured. I'm Australian.</div>
 199         </div>
 200     </div>
 201     <div id="slide-4">
 202         <div class="slide-title">=<< What is this Talk About? >>=</div>
 203         <div class="slide">
 204         </div>
 205     </div>
 206     <div id="slide-5">
 207         <div class="slide-title">=<< What is this Talk About? >>=</div>
 208         <div class="slide flexotron">
 209             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Perspective</div>
 210         </div>
 211     </div>
 212     <div id="slide-6">
 213         <div class="slide-title">=<< What is Functional Programming? >>=</div>
 214         <div class="slide flexotron">
 215             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Programming with functions.</div>
 216         </div>
 217     </div>
 218     <div id="slide-7">
 219         <div class="slide-title">=<< What is a Function? >>=</div>
 220         <div class="slide flexotron">
 221             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >A mapping between sets that associates every element of the first set to exactly one element of the second set.</div>
 222         </div>
 223     </div>
 224     <div id="slide-8">
 225         <div class="slide-title">=<< Huh? >>=</div>
 226         <div class="slide">
 227             <h1>Why would you wanna do that?!</h1>
 228         </div>
 229     </div>
 230     <div id="slide-9">
 231         <div class="slide-title">=<< Huh? >>=</div>
 232         <div class="slide">
 233             <h1>Why would you wanna do that?!</h1>
 234             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 235                 <ul>
 236                     <li>Learning is good</li>
 237                     <li>Brain plasticity</li>
 238                     <li>Greater perspective</li>
 239                 </ul>
 240             </div>
 241         </div>
 242     </div>
 243     <div id="slide-10">
 244         <div class="slide-title">=<< Paradigms >>=</div>
 245         <div class="slide flexotron">
 246             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Paradigms</div>
 247         </div>
 248     </div>
 249     <div id="slide-11">
 250         <div class="slide-title">=<< Paradigms >>=</div>
 251         <div class="slide flexotron">
 252             <div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px;">
 253                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Declarative</span>
 254                 <div class="textbox" style="position: relative; width: 80%; height: 60%;">
 255                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Functional</span>
 256                     <ul style="text-align: left; margin-top: 65px;margin-left: 40px;">
 257                         <li>Haskell</li>
 258                         <li>Elm</li>
 259                         <li>Elixir</li>
 260                         <li>Clojure</li>
 261                     </ul>
 262                 </div>
 263             </div>
 264             <div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px;">
 265                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Imperative</span>
 266                 <div class="textbox" style="position: relative; width: 80%; height: 60%;">
 267                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Procedural</span>
 268                     <ul style="text-align: left; margin-top: 65px;margin-left: 40px;">
 269                         <li>PHP</li>
 270                         <li>C</li>
 271                         <li>Java</li>
 272                         <li>DamoScript</li>
 273                     </ul>
 274                 </div>
 275             </div>
 276         </div>
 277     </div>
 278     <div id="slide-12">
 279         <div class="slide-title">=<< Gramatical Mood >>=</div>
 280         <div class="slide flexotron">
 281             <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 282                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Declarative</span>
 283                 A sentence which expresses a statement of fact.
 284                 <ul style="text-align: left; margin-top: 65px;margin-left: 40px;">
 285                     <li>He runs.</li>
 286                     <li>I like climbing.</li>
 287                     <li>Ice is cold.</li>
 288                     <li>Mathieu is shredded.</li>
 289                 </ul>
 290             </div>
 291             <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 292                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Imperative</span>
 293                 <span>A sentence which expresses instructions, or requests.</span>
 294                 <ul style="text-align: left; margin-top: 65px;margin-left: 40px;">
 295                     <li>Shut the door.</li>
 296                     <li>Don't eat my burger.</li>
 297                     <li>Let's go to the pub.</li>
 298                     <li>Don't make eye contact with Mathieu.</li>
 299                 </ul>
 300             </div>
 301         </div>
 302     </div>
 303     <div id="slide-13">
 304         <div class="slide-title">=<< Gramatical Mood >>=</div>
 305         <div class="slide flexotron">
 306             <div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 307                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Declarative</span>
 308                 This is this.
 309             </div>
 310             <div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 311                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Imperative</span>
 312                 Do this.
 313             </div>
 314         </div>
 315     </div>
 316     <div id="slide-14">
 317         <div class="slide-title">=<< Big Brain Moment >>=</div>
 318         <div class="slide flexotron">
 319             <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>
 320         </div>
 321     </div>
 322     <div id="slide-15">
 323         <div class="slide-title">=<< Why is declaritive mood good? >>=</div>
 324         <div class="slide">
 325         </div>
 326     </div>
 327     <div id="slide-16">
 328         <div class="slide-title">=<< Why is declaritive mood good? >>=</div>
 329         <div class="slide flexotron">
 330             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Atemporality</div>
 331         </div>
 332     </div>
 333     <div id="slide-17">
 334         <div class="slide-title">=<< Why is declaritive mood good? >>=</div>
 335         <div class="slide flexotron">
 336             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Independant of or unaffected by time.</div>
 337         </div>
 338     </div>
 339     <div id="slide-18">
 340         <div class="slide-title">=<< Why is declaritive mood good? >>=</div>
 341         <div class="slide flexotron">
 342             <div style="text-align:center; font-size:50px; text-shadow: 4px 4px #000; padding:20px;" >Declarative programs express what <span class="shake-slow shake-constant" style="color: #f98012">they actually do</span> Leaving more "brain space" to focus on solving the problem.</div>
 343         </div>
 344     </div>
 345     <div id="slide-19">
 346         <div class="slide-title">=<< To Recap >>=</div>
 347         <div class="slide">
 348             <h2>Why would you wanna do that?</h2>
 349             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 350                 <ul>
 351                     <li>Because sometimes there is such a thing as too much freedom</li>
 352                     <li>Functional programming is awesome because it stops you shooting yourself in the foot</li>
 353                     <li>"Constraints liberate, liberties constrain"</li>
 354                 </ul>
 355             </div>
 356         </div>
 357     </div>
 358     <div id="slide-20">
 359         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 360         <div class="slide">
 361         </div>
 362     </div>
 363     <div id="slide-21">
 364         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 365         <div class="slide flexotron">
 366             <div style="text-align:center; font-size:50px; text-shadow: 4px 4px #000; padding:20px;" >Enough of this philosophy and linguistics mumbo jumbo, already!</div>
 367         </div>
 368     </div>
 369     <div id="slide-22">
 370         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 371         <div class="slide">
 372             <h1>The Great Dividers</h1>
 373             <h2>Consider:</h2>
 374             <div style="display: flex;">
 375                 <pre style="margin: auto;"><code style="font-size: 20px;"><span class="code-friends1 code-friends4">x = x + 1;</span></code></pre>
 376             </div>
 377             <div style="display: flex; margin-top: 20px; margin-bottom: 20px;">
 378                 <span style="margin: auto;">and:</span>
 379             </div>
 380             <div style="display: flex; margin-bottom:50px;">
 381                 <pre style="margin: auto;"><code style="font-size: 20px;"><span class="code-friends2 code-friends3">function repeat(x) {
 382     return x + repeat(x);
 383 }</span></code></pre>
 384             </div>
 385             <h2>OK, so what?</h2>
 386             <div style="display: flex;">
 387                 <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>
 388             </div>
 389         </div>
 390     </div>
 391     <div id="slide-23">
 392         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 393         <div class="slide">
 394             <div style="display: flex; margin-top: 50px;">
 395                 <pre style="margin: auto;"><code style="font-size: 20px;">x = x + 1;</code></pre>
 396             </div>
 397             <div class="flexotron" style="height: 80%;">
 398                 <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 399                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Declarative</span>
 400                     "x is the same as itself plus one."<br /><br /><br /><br /><br />
 401                     Complete nonsense!
 402                 </div>
 403                 <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 404                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Imperative</span>
 405                     "Evaluate the thing on the right of `=` then store it in the thing on the left of `=`."<br /><br /><br />
 406                     A list of instructions that can be followed.
 407                 </div>
 408             </div>
 409         </div>
 410     </div>
 411     <div id="slide-24">
 412         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 413         <div class="slide">
 414             <div style="display: flex; margin-top: 50px;">
 415                 <pre style="margin: auto;"><code style="font-size: 20px;">function repeat(x) {
 416     return x + repeat(x);
 417 }</code></pre>
 418             </div>
 419             <div class="flexotron" style="height: 80%;">
 420                 <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 30px;">
 421                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Declarative</span>
 422                     "The repeat of `x` is `x` appended to the repeat of `x`"<br /><br /><br />
 423                     An infinite list of `x`!
 424                 </div>
 425                 <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 426                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Imperative</span>
 427                     "To evaluate the repeate of `x`, first evaluate the repeat of `x`"<br /><br /><br />
 428                     ...Yeah, you see the problem?
 429                 </div>
 430             </div>
 431         </div>
 432     </div>
 433     <div id="slide-25">
 434         <div class="slide-title">=<< Big Brain Moment >>=</div>
 435         <div class="slide flexotron">
 436             <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>
 437         </div>
 438     </div>
 439     <div id="slide-26">
 440         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 441         <div class="slide">
 442             <h1>Real Haskell Code That Runs</h1>
 443             <pre><code class="haskell">repeat x = x ++ repeat x
 444 threeFs = take 3 (repeat "f")
 445
 446 > "fff"
 447             </code></pre>
 448         </div>
 449     </div>
 450     <div id="slide-27">
 451         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 452         <div class="slide">
 453             <h1>Real JavaScript Code That Hangs</h1>
 454             <pre><code class="javascript">function repeat(x) {
 455     return x + repeat(x);
 456 }
 457
 458 threeFs = repeat("f").substr(0,3);
 459
 460 > InternalError: too much recursion
 461             </code></pre>
 462         </div>
 463     </div>
 464     <div id="slide-28">
 465         <div class="slide-title">=<< Promises >>=</div>
 466         <div class="slide flexotron">
 467             <div style="position: relative; text-align:center; font-size:40px; text-shadow: 4px 4px #000;" >
 468                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 469                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 470                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 471                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 472                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 473                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 474                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 475                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 476                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 477                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 478                 Promises <span class="shake-slow shake-constant" style="display: inline-block; color: #f98012">do not</span> make things asynchronous!</div>
 479         </div>
 480     </div>
 481     <div id="slide-29">
 482         <div class="slide-title">=<< Promises >>=</div>
 483         <div class="slide">
 484             <h2>What problems do promises solve?</h2>
 485             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 486                 <ul>
 487                     <li>Asynchronous request management</li>
 488                     <li>Error handling for computations which may fail</li>
 489                     <li>Probably more too</li>
 490                 </ul>
 491             </div>
 492             <h2 style="margin-top: 50px;">What are promises then?</h2>
 493             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 494                 <ul>
 495                     <li>A value (which may or may not be available yet) wrapped in some additional context</li>
 496                     <li>Functions to instantiate the wrapper (Promise.resolve, Promise.reject)
 497                     <li>A rule for composing these wrapped values (then)</li>
 498                 </ul>
 499             </div>
 500         </div>
 501     </div>
 502     <div id="slide-30">
 503         <div class="slide-title">=<< Promises >>=</div>
 504         <div class="slide">
 505             <h1>Terminology/syntax recap</h1>
 506             <h2>JavaScript arrow functions</h2>
 507             <div style="display: flex;">
 508                 <pre style="margin: auto;"><code style="font-size: 20px;">x => x + 1;</code></pre>
 509             </div>
 510             <div style="display: flex; margin-top: 20px; margin-bottom: 20px;">
 511                 <span style="margin: auto;">is equivalent to:</span>
 512             </div>
 513             <div style="display: flex; margin-bottom:50px;">
 514                 <pre style="margin: auto;"><code style="font-size: 20px;">function(x) {
 515     return x+1;
 516 }</code></pre>
 517             </div>
 518             <h2>Composition</h2>
 519             <div style="display: flex;">
 520                 <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>
 521             </div>
 522         </div>
 523     </div>
 524     <div id="slide-31">
 525         <div class="slide-title">=<< Promises >>=</div>
 526         <div class="slide">
 527             <h1>Promise composition</h1>
 528             <div style="display: flex;">
 529                 <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>
 530             </div>
 531             <div style="display: flex; margin-top: 100px">
 532                 <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>
 533             </div>
 534             <div style="display: flex;">
 535                 <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>
 536             </div>
 537             <div style="display: flex; margin-top: 100px">
 538                 <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>
 539             </div>
 540             <div style="display: flex;">
 541                 <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>
 542             </div>
 543         </div>
 544     </div>
 545     <div id="slide-32">
 546         <div class="slide-title">=<< Promises >>=</div>
 547         <div class="slide">
 548             <h1>OK great but who cares?</h1>
 549             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 550                 <ul>
 551                     <li>We are <span class="shake-constant shake-opacity highlight" style="display: inline-block;">declaring</span> how we want promises to compose</li>
 552                     <li>
 553                         The order that the promises actually resolve their values in is not important
 554                         <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>
 555                     </li>
 556                     <li>We can <span class="shake-constant shake-opacity highlight" style="display: inline-block;">declare</span> a failure anywhere in the chain</li>
 557                 </ul>
 558             </div>
 559         </div>
 560     </div>
 561     <div id="slide-33">
 562         <div class="slide-title">=<< Promises >>=</div>
 563         <div class="slide flexotron">
 564             <div style="position: relative;">
 565                 <img src="img/thonking.gif" />
 566                 <div class="thonkingWrap"><div class="thonk">atemporality?</div></div>
 567                 <div class="thonkingWrap"><div class="thonk">declaritive?</div></div>
 568                 <div class="thonkingWrap"><div class="thonk">functions?</div></div>
 569                 <div class="thonkingWrap"><div class="thonk">composition?</div></div>
 570             </div>
 571         </div>
 572     </div>
 573     <div id="slide-34">
 574         <div class="slide-title">=<< Promises >>=</div>
 575         <div class="slide">
 576             <h1>Woah!</h1>
 577             <h2>JavaScript</h2>
 578             <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>)
 579     <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>))
 580     <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>
 581             <h2>Haskell</h2>
 582             <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>)
 583      <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>))
 584      <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>
 585         </div>
 586     </div>
 587     <div id="slide-35">
 588         <div class="slide-title">=<< Promises >>=</div>
 589         <div class="slide">
 590             <h1>Woah!</h1>
 591             <h2>JavaScript</h2>
 592             <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>)
 593     <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>))
 594     <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>))
 595     <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>
 596             <h2>Haskell</h2>
 597             <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>)
 598     <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>))
 599     <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>))
 600     <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>
 601         </div>
 602     </div>
 603 </body>
 604 <script>
 605  var div, i, j, span, duration = "";
 606  var crazyTexts = [];
 607  var opacyTexts = [];
 608  div = document.querySelectorAll("#rant > span.crazy");
 609  for (j = 0; j < div.length; j++) {
 610      span=""
 611      for (i = 0; i < div[j].innerText.length; i++) {
 612          duration = Math.floor(Math.random() * 5) + 100
 613          span += "<span class=\"letter shake-constant shake-little\" style=\"animation-duration: " + duration + "ms\">";
 614          span += div[j].innerText[i] == " " ? "&nbsp;" : div[j].innerText[i];
 615          span += "</span>";
 616      }
 617      crazyTexts.push(span);
 618  }
 619
 620  opacities = document.querySelectorAll("#rant > span.shake-opacity");
 621  for (k = 0; k < opacities.length; k++) {
 622      shrek=Math.random();
 623      opacities[k].style.animationDuration = shrek + 's';
 624      opacyTexts.push(opacities[k].outerHTML);
 625  }
 626
 627  allText = ""
 628  for (l = 0; l< crazyTexts.length; l++) {
 629      allText+=crazyTexts[l] + (opacyTexts[l] ? opacyTexts[l] : "");
 630  }
 631
 632  document.getElementById('rant').innerHTML = allText;
 633
 634  var x = 0;
 635  var y = 0;
 636  var b = document.querySelectorAll('body')[0];
 637  setInterval(function(){
 638      x+=2;
 639      y-=2;
 640      b.style.backgroundPosition = x + 'px ' + y + 'px';
 641  }, 250);
 642
 643  urlParts = document.URL.split('#');
 644  window.console.log(urlParts);
 645  var currentSlide = urlParts.length > 1 ? urlParts[1] : 0;
 646  document.getElementById('slide-' + currentSlide).style.display = 'block';
 647  document.onkeydown = checkKey;
 648
 649  function checkKey(e) {
 650
 651      e = e || window.event;
 652      if (e.keyCode == '37') {
 653          if (document.getElementById('slide-' + currentSlide)) {
 654              document.getElementById('slide-' + currentSlide).style.display = 'none';
 655          }
 656          currentSlide--;
 657          document.getElementById('slide-' + currentSlide).style.display = 'block';
 658      }
 659      else if (e.keyCode == '39') {
 660          if (document.getElementById('slide-' + currentSlide)) {
 661              document.getElementById('slide-' + currentSlide).style.display = 'none';
 662          }
 663          currentSlide++;
 664          document.getElementById('slide-' + currentSlide).style.display = 'block';
 665      }
 666
 667      console.log(currentSlide);
 668  }
 669
 670
 671  function activateFriends(n) {
 672      f = document.querySelectorAll('.code-friends' + n);
 673
 674      for (fr = 0; fr< f.length; fr++) {
 675          f[fr].classList.add("shake-constant");
 676          f[fr].classList.add("shake-slow");
 677          f[fr].classList.add("on");
 678      }
 679  }
 680
 681  function deactivateFriends(n) {
 682      f = document.querySelectorAll('.code-friends' + n);
 683      for (fr = 0; fr< f.length; fr++) {
 684          f[fr].classList.remove("shake-constant");
 685          f[fr].classList.remove("shake-slow");
 686          f[fr].classList.remove("on");
 687      }
 688  }
 689
 690  function activatePromise(n) {
 691      p = document.querySelectorAll('.promise' + n);
 692      for (fr = 0; fr< p.length; fr++) {
 693          p[fr].classList.add('on');
 694      }
 695  }
 696
 697  function deactivatePromise(n) {
 698      p = document.querySelectorAll('.promise' + n);
 699      for (fr = 0; fr< p.length; fr++) {
 700          p[fr].classList.remove('on');
 701      }
 702  }
 703
 704  cloudGuyQuotes = [
 705      "Welcome to the talk!",
 706      "I hope we'll have fun exploring functional programming together!",
 707      "But while we wait let's share interesting facts and anectodes :)",
 708      "If you can be disgruntled, can you also be gruntled?",
 709      "0.9 recurring is exactly equal to one if you think about it.",
 710      "In English, the word \"ghoti\" can be pronounced as \"fish\".",
 711      "Your credit card details are somewhere in Pi.",
 712      "It takes 366 people to make sure two of them share a birthday, but only 23 people to ensure a 50% chance.",
 713      "1729 is the best number (I checked them all).",
 714      "The secret to strengh is to eat only a banana for breakfast.",
 715      "All of Back to the Future happened in the past.",
 716      "Everything is in the future."
 717  ];
 718
 719  cgq = document.getElementById("cgquotes");
 720  numQuotes = cloudGuyQuotes.length;
 721  currentQuote = 0;
 722  setInterval(function(){
 723      if (currentQuote == 0 || currentQuote == 1) {
 724          currentQuote++;
 725      } else {
 726          currentQuote = Math.floor(Math.random()*(cloudGuyQuotes.length - 3)) + 3;
 727          console.log(currentQuote);
 728      }
 729
 730      cgq.innerText = cloudGuyQuotes[currentQuote];
 731  }, 10000);
 732
 733  angeries = document.querySelectorAll(".angereyWrap");
 734  usedPositions = [];
 735  shakes = ["shake", "shake-hard", "shake-slow", "shake-little", "shake-horizontal", "shake-vertical", "shake-rotate", "shake-opacity", "shake-crazy", "shake-chunk"];
 736  for (a = 0; a < angeries.length; a++) {
 737      randomness = (Math.round(Math.random() * 10) + 1) * -10;
 738      angeries[a].style.top = ((a > 4) ? (-180-randomness) : (180 + randomness)) + "%" ;
 739      thing = ((Math.floor(Math.random() * 10) + 1) * 9) + "%";
 740
 741      while (usedPositions.includes(thing)) {
 742          thing = ((Math.floor(Math.random() * 10) + 1) * 9) + "%";
 743      }
 744
 745      angeries[a].style.left = thing;
 746      angeries[a].classList.add("shake-constant");
 747      angeries[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
 748      usedPositions.push(thing);
 749  }
 750
 751  thonkings = document.querySelectorAll(".thonkingWrap");
 752  shakes = ["shake-slow", "shake-little", "shake-opacity"];
 753  usedPositions = [];
 754  for (a = 0; a < thonkings.length; a++) {
 755      thing = Math.floor(Math.random() * 4) + 1;
 756      randomnessX = -(Math.round(Math.random() * 100) + 1);
 757      randomnessY = -(Math.round(Math.random() * 50) + 1);
 758
 759      while (usedPositions.includes(thing)) {
 760          thing = Math.floor(Math.random() * 4) + 1;
 761      }
 762
 763      switch(thing) {
 764          case 1:
 765              thonkings[a].style.left = randomnessX + 'px';
 766              thonkings[a].style.top = randomnessY + 'px';
 767              thonkings[a].children[0].style.transform = 'rotate(-40deg) scale(1, 1.5)'
 768              thonkings[a].classList.add("shake-constant");
 769              thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
 770              break;
 771          case 2:
 772              thonkings[a].style.right = randomnessX + 'px';
 773              thonkings[a].style.top = randomnessY + 'px';
 774              thonkings[a].classList.add("shake-constant");
 775              thonkings[a].children[0].style.transform = 'rotate(40deg) scale(1, 1.5)'
 776              thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
 777              break;
 778          case 3:
 779              thonkings[a].style.right = randomnessX + 'px';
 780              thonkings[a].style.bottom = randomnessY + 'px';
 781              thonkings[a].classList.add("shake-constant");
 782              thonkings[a].children[0].style.transform = 'rotate(-215deg) scale(1, 1.5)'
 783              thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
 784              break;
 785          case 4:
 786              thonkings[a].style.left = randomnessX + 'px';
 787              thonkings[a].style.bottom = randomnessY + 'px';
 788              thonkings[a].classList.add("shake-constant");
 789              thonkings[a].children[0].style.transform = 'rotate(215deg) scale(1, 1.5)'
 790              thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
 791              break;
 792      }
 793
 794
 795      usedPositions.push(thing);
 796  }
 797 </script>
 798 </html>