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 {
 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     </style>
 157 </head>
 158 <body>
 159     <div id="slide-0">
 160         <div id="cloudguy">
 161             <div style="height: 20%; text-align: center;">
 162                 <img style="height: 100%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src="img/cloudguy.gif" />
 163                 <div id="cgquotes" style="width: 80%; margin: auto;">Welcome to the talk!</div>
 164             </div>
 165         </div>
 166     </div>
 167     <div id="slide-1">
 168         <div class="slide-title">=<< What's up with that Title? >>=</div>
 169         <div class="slide flexotron">
 170             <div style="justify-content: right;">
 171                 <img class="shake-constant shake" src="img/wide-eyed-crazy.png" style="width: 70%; margin-right: 10%;">
 172             </div>
 173             <div style="justify-content: left">
 174                 <div style="display: flex; align-items: center; width: 70%">
 175                     <div id="rant" class="textbox" style="display: block;height: auto; width:100%; margin-left:10%;">
 176                         <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>
 177                     </div>
 178                 </div>
 179             </div>
 180             <div class="fig">Fig 1.1 What most people thing a typical functional programming advocate looks like</div>
 181         </div>
 182     </div>
 183     <div id="slide-2">
 184         <div class="slide-title">=<< Obligatory Quote >>=</div>
 185         <div class="slide">
 186         </div>
 187     </div>
 188     <div id="slide-3">
 189         <div class="slide-title">=<< Obligatory Quote >>=</div>
 190         <div class="slide">
 191             <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>
 192         </div>
 193     </div>
 194     <div id="slide-4">
 195         <div class="slide-title">=<< Promises >>=</div>
 196         <div class="slide flexotron">
 197             <div style="position: relative; text-align:center; font-size:40px; text-shadow: 4px 4px #000;" >
 198                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 199                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 200                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 201                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 202                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 203                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 204                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 205                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 206                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 207                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 208                 Promises <span class="shake-slow shake-constant" style="display: inline-block; color: #f98012">do not</span> make things asynchronous!</div>
 209         </div>
 210     </div>
 211     <div id="slide-5">
 212         <div class="slide-title">=<< Promises >>=</div>
 213         <div class="slide">
 214             <h1>What problem to promises solve?</h1>
 215             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 216                 <ul>
 217                     <li>Asynchronous request management</li>
 218                     <li>Error handling for computations which may fail</li>
 219                     <li>Probably more too</li>
 220                 </ul>
 221             </div>
 222             <h1 style="margin-top: 50px;">What are promises then?</h1>
 223             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 224                 <ul>
 225                     <li>A value (which may or may not be available yet) wrapped in some additional context</li>
 226                     <li>Functions to instantiate the wrapper (Promise.resolve, Promise.reject)
 227                     <li>A rule for composing these wrapped values (then)</li>
 228                 </ul>
 229             </div>
 230         </div>
 231     </div>
 232     <div id="slide-6">
 233         <div class="slide-title">=<< Promises >>=</div>
 234         <div class="slide">
 235             <h1>Terminology/syntax recap</h1>
 236             <h2>JavaScript arrow functions</h2>
 237             <div style="display: flex;">
 238                 <pre style="margin: auto;"><code style="font-size: 20px;">x => x + 1;</code></pre>
 239             </div>
 240             <div style="display: flex; margin-top: 20px; margin-bottom: 20px;">
 241                 <span style="margin: auto;">is equivalent to:</span>
 242             </div>
 243             <div style="display: flex; margin-bottom:50px;">
 244                 <pre style="margin: auto;"><code style="font-size: 20px;">function(x) {
 245     return x+1;
 246 }</code></pre>
 247             </div>
 248             <h2>Composition</h2>
 249             <div style="display: flex;">
 250                 <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>
 251             </div>
 252         </div>
 253     </div>
 254     <div id="slide-7">
 255         <div class="slide-title">=<< Promises >>=</div>
 256         <div class="slide">
 257             <h1>Promise composition</h1>
 258             <div style="display: flex;">
 259                 <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>
 260             </div>
 261             <div style="display: flex; margin-top: 100px">
 262                 <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>
 263             </div>
 264             <div style="display: flex;">
 265                 <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>
 266             </div>
 267             <div style="display: flex; margin-top: 100px">
 268                 <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>
 269             </div>
 270             <div style="display: flex;">
 271                 <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>
 272             </div>
 273         </div>
 274     </div>
 275     <div id="slide-8">
 276         <div class="slide-title">=<< Promises >>=</div>
 277         <div class="slide">
 278             <h1>OK great but who cares?</h1>
 279             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 280                 <ul>
 281                     <li>We are <span class="shake-constant shake-opacity highlight" style="display: inline-block;">declaring</span> how we want promises to compose</li>
 282                     <li>
 283                         The order that the promises actually resolve their values in is not important
 284                         <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>
 285                     </li>
 286                     <li>We can <span class="shake-constant shake-opacity highlight" style="display: inline-block;">declare</span> a failure anywhere in the chain</li>
 287                 </ul>
 288             </div>
 289         </div>
 290     </div>
 291     <div id="slide-9">
 292         <div class="slide-title">=<< Promises >>=</div>
 293         <div class="slide flexotron">
 294             <div style="position: relative;">
 295                 <img src="img/thonking.gif" />
 296                 <div class="thonkingWrap"><div class="thonk">atemporality?</div></div>
 297                 <div class="thonkingWrap"><div class="thonk">declaritive?</div></div>
 298                 <div class="thonkingWrap"><div class="thonk">functions?</div></div>
 299                 <div class="thonkingWrap"><div class="thonk">composition?</div></div>
 300             </div>
 301         </div>
 302     </div>
 303     <div id="slide-10">
 304         <div class="slide-title">=<< Promises >>=</div>
 305         <div class="slide">
 306             <h1>Woah!</h1>
 307             <h2>JavaScript</h2>
 308             <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>)
 309     <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>))
 310     <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>
 311             <h2>Haskell</h2>
 312             <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>)
 313      <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>))
 314      <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>
 315         </div>
 316     </div>
 317     <div id="slide-11">
 318         <div class="slide-title">=<< Promises >>=</div>
 319         <div class="slide">
 320             <h1>Woah!</h1>
 321             <h2>JavaScript</h2>
 322             <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>)
 323     <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>))
 324     <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>))
 325     <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>
 326             <h2>Haskell</h2>
 327             <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>)
 328     <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>))
 329     <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>))
 330     <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>
 331         </div>
 332     </div>
 333 </body>
 334 <script>
 335  var div, i, j, span, duration = "";
 336  var crazyTexts = [];
 337  var opacyTexts = [];
 338  div = document.querySelectorAll("#rant > span.crazy");
 339  for (j = 0; j < div.length; j++) {
 340      span=""
 341      for (i = 0; i < div[j].innerText.length; i++) {
 342          duration = Math.floor(Math.random() * 5) + 100
 343          span += "<span class=\"letter shake-constant shake-little\" style=\"animation-duration: " + duration + "ms\">";
 344          span += div[j].innerText[i] == " " ? "&nbsp;" : div[j].innerText[i];
 345          span += "</span>";
 346      }
 347      crazyTexts.push(span);
 348  }
 349
 350  opacities = document.querySelectorAll("#rant > span.shake-opacity");
 351  for (k = 0; k < opacities.length; k++) {
 352      shrek=Math.random();
 353      opacities[k].style.animationDuration = shrek + 's';
 354      opacyTexts.push(opacities[k].outerHTML);
 355  }
 356
 357  allText = ""
 358  for (l = 0; l< crazyTexts.length; l++) {
 359      allText+=crazyTexts[l] + (opacyTexts[l] ? opacyTexts[l] : "");
 360  }
 361
 362  document.getElementById('rant').innerHTML = allText;
 363
 364  var x = 0;
 365  var y = 0;
 366  var b = document.querySelectorAll('body')[0];
 367  setInterval(function(){
 368      x+=2;
 369      y-=2;
 370      b.style.backgroundPosition = x + 'px ' + y + 'px';
 371  }, 250);
 372
 373  urlParts = document.URL.split('#');
 374  window.console.log(urlParts);
 375  var currentSlide = urlParts.length > 1 ? urlParts[1] : 0;
 376  document.getElementById('slide-' + currentSlide).style.display = 'block';
 377  document.onkeydown = checkKey;
 378
 379  function checkKey(e) {
 380
 381      e = e || window.event;
 382      if (e.keyCode == '37') {
 383          if (document.getElementById('slide-' + currentSlide)) {
 384              document.getElementById('slide-' + currentSlide).style.display = 'none';
 385          }
 386          currentSlide--;
 387          document.getElementById('slide-' + currentSlide).style.display = 'block';
 388      }
 389      else if (e.keyCode == '39') {
 390          if (document.getElementById('slide-' + currentSlide)) {
 391              document.getElementById('slide-' + currentSlide).style.display = 'none';
 392          }
 393          currentSlide++;
 394          document.getElementById('slide-' + currentSlide).style.display = 'block';
 395      }
 396
 397      console.log(currentSlide);
 398  }
 399
 400
 401  function activateFriends(n) {
 402      f = document.querySelectorAll('.code-friends' + n);
 403
 404      for (fr = 0; fr< f.length; fr++) {
 405          f[fr].classList.add("shake-constant");
 406          f[fr].classList.add("shake-slow");
 407          f[fr].classList.add("on");
 408      }
 409  }
 410
 411  function deactivateFriends(n) {
 412      f = document.querySelectorAll('.code-friends' + n);
 413      for (fr = 0; fr< f.length; fr++) {
 414          f[fr].classList.remove("shake-constant");
 415          f[fr].classList.remove("shake-slow");
 416          f[fr].classList.remove("on");
 417      }
 418  }
 419
 420  function activatePromise(n) {
 421      p = document.querySelectorAll('.promise' + n);
 422      for (fr = 0; fr< p.length; fr++) {
 423          p[fr].classList.add('on');
 424      }
 425  }
 426
 427  function deactivatePromise(n) {
 428      p = document.querySelectorAll('.promise' + n);
 429      for (fr = 0; fr< p.length; fr++) {
 430          p[fr].classList.remove('on');
 431      }
 432  }
 433
 434  cloudGuyQuotes = [
 435      "Welcome to the talk!",
 436      "I hope we'll have fun exploring functional programming together!",
 437      "But while we wait let's share interesting facts and anectodes :)",
 438      "If you can be disgruntled, can you also be gruntled?",
 439      "0.9 recurring is exactly equal to one if you think about it.",
 440      "In English, the word \"ghoti\" can be pronounced as \"fish\".",
 441      "Your credit card details are somewhere in Pi.",
 442      "It takes 366 people to make sure two of them share a birthday, but only 23 people to ensure a 50% chance.",
 443      "1729 is the best number (I checked them all).",
 444      "The secret to strengh is to eat only a banana for breakfast.",
 445      "All of Back to the Future happened in the past.",
 446      "Everything is in the future."
 447  ];
 448
 449  cgq = document.getElementById("cgquotes");
 450  numQuotes = cloudGuyQuotes.length;
 451  currentQuote = 0;
 452  setInterval(function(){
 453      if (currentQuote == 0 || currentQuote == 1) {
 454          currentQuote++;
 455      } else {
 456          currentQuote = Math.floor(Math.random()*(cloudGuyQuotes.length - 3)) + 3;
 457          console.log(currentQuote);
 458      }
 459
 460      cgq.innerText = cloudGuyQuotes[currentQuote];
 461  }, 10000);
 462
 463  angeries = document.querySelectorAll(".angereyWrap");
 464  usedPositions = [];
 465  shakes = ["shake", "shake-hard", "shake-slow", "shake-little", "shake-horizontal", "shake-vertical", "shake-rotate", "shake-opacity", "shake-crazy", "shake-chunk"];
 466  for (a = 0; a < angeries.length; a++) {
 467      randomness = (Math.round(Math.random() * 10) + 1) * -10;
 468      angeries[a].style.top = ((a > 4) ? (-180-randomness) : (180 + randomness)) + "%" ;
 469      thing = ((Math.floor(Math.random() * 10) + 1) * 9) + "%";
 470
 471      while (usedPositions.includes(thing)) {
 472          thing = ((Math.floor(Math.random() * 10) + 1) * 9) + "%";
 473      }
 474
 475      angeries[a].style.left = thing;
 476      angeries[a].classList.add("shake-constant");
 477      angeries[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
 478      usedPositions.push(thing);
 479  }
 480
 481  thonkings = document.querySelectorAll(".thonkingWrap");
 482  shakes = ["shake-slow", "shake-little", "shake-opacity"];
 483  usedPositions = [];
 484  for (a = 0; a < thonkings.length; a++) {
 485      thing = Math.floor(Math.random() * 4) + 1;
 486      randomnessX = -(Math.round(Math.random() * 50) + 1);
 487      randomnessY = -(Math.round(Math.random() * 50) + 1);
 488
 489      while (usedPositions.includes(thing)) {
 490          thing = Math.floor(Math.random() * 4) + 1;
 491      }
 492
 493      switch(thing) {
 494          case 1:
 495              thonkings[a].style.left = randomnessX + 'px';
 496              thonkings[a].style.top = randomnessY + 'px';
 497              thonkings[a].children[0].style.transform = 'rotate(-45deg) scale(1, 1.5)'
 498              thonkings[a].classList.add("shake-constant");
 499              thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
 500              break;
 501          case 2:
 502              thonkings[a].style.right = randomnessX + 'px';
 503              thonkings[a].style.top = randomnessY + 'px';
 504              thonkings[a].classList.add("shake-constant");
 505              thonkings[a].children[0].style.transform = 'rotate(45deg) scale(1, 1.5)'
 506              thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
 507              break;
 508          case 3:
 509              thonkings[a].style.right = randomnessX + 'px';
 510              thonkings[a].style.bottom = randomnessY + 'px';
 511              thonkings[a].classList.add("shake-constant");
 512              thonkings[a].children[0].style.transform = 'rotate(-225deg) scale(1, 1.5)'
 513              thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
 514              break;
 515          case 4:
 516              thonkings[a].style.left = randomnessX + 'px';
 517              thonkings[a].style.bottom = randomnessY + 'px';
 518              thonkings[a].classList.add("shake-constant");
 519              thonkings[a].children[0].style.transform = 'rotate(225deg) scale(1, 1.5)'
 520              thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
 521              break;
 522      }
 523
 524
 525      usedPositions.push(thing);
 526  }
 527 </script>
 528 </html>