index.html

   1 <html><head>
   2     <meta charset="utf-8">
   3     <link rel="stylesheet" href="css/csshake.min.css">
   4     <link rel="stylesheet" href="css/animate.css">
   5     <link rel="stylesheet" href="css/style.css">
   6     <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&amp;display=swap" rel="stylesheet">
   7     <link rel="stylesheet"
   8           href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css">
   9     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
  10     <script>hljs.initHighlightingOnLoad();</script>
  11     <script src="js/confetti.min.js"></script>
  12     <title>Wide-Eyed Crazy Functional Programming</title>
  13 </head>
  14 <body>
  15     <div id="slide-0">
  16         <div id="cloudguy">
  17             <div style="height: 20%; text-align: center;">
  18                 <img style="height: 100%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src="img/cloudguy.gif" />
  19                 <div id="cgquotes" style="width: 80%; margin: auto;">Welcome to the talk!</div>
  20             </div>
  21         </div>
  22         <div id="commentary"><a href="notes.html" target="_blank"><img src="img/commentary.png" /><br />Click me!</a></div>
  23     </div>
  24     <div id="slide-1">
  25         <div class="slide-title">=<< Welcome to the Talk Called >>=</div>
  26         <div class="slide flexotron" style="flex-wrap: nowrap;">
  27             <img class="cloudguypower" style="margin-left: 70px;" src="img/cloudguy-power.gif" />
  28             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;">Wide-Eyed Crazy Functional Programming</div>
  29             <img class="cloudguypower" style="margin-right: 70px; transform: scaleX(-1);" src="img/cloudguy-power.gif" />
  30         </div>
  31         <div class="notes">
  32             Woo! Look at them go! If you throw on <a href="https://www.youtube.com/watch?v=vqz8c4ZP3Wg" target="_blank">this</a> then it's like a 2 hour dance party!
  33         </div>
  34     </div>
  35     <div id="slide-2">
  36         <div class="slide-title">=<< Just Wait a Sec... >>=</div>
  37         <div class="slide flexotron" style="flex-wrap: nowrap;">
  38             <div class="textbox flexotron" id="notes" style="position: relative; margin-right:20px; padding: 20px;">
  39                 This slide needs to be here to let the confetti settle otherwise the next slide lags even more lol... Just wait til the confetti goes away and continue.
  40             </div>
  41         </div>
  42     </div>
  43     <div id="slide-3">
  44         <div class="slide-title">=<< What's up with that Title? >>=</div>
  45         <div class="slide flexotron idk">
  46             <div style="justify-content: right;">
  47                 <img class="shake-constant shake" src="img/wide-eyed-crazy.png" style="width: 70%; margin-right: 10%;">
  48             </div>
  49             <div style="justify-content: left">
  50                 <div style="display: flex; align-items: center; width: 70%">
  51                     <div id="rant" class="textbox" style="display: block;height: auto; width:100%; margin-left:10%;">
  52                         <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>
  53                     </div>
  54                 </div>
  55             </div>
  56             <div class="fig">Fig 1.1 What most people thing a typical functional programming advocate looks like</div>
  57         </div>
  58         <div class="notes">
  59             <h1>Wide-eyed Crazy Functional Programmers</h1>
  60             <ul>
  61                 <li>Some people were curious about the title, so I figured I'd clarify what it means - functional programmers have a reputation of...</li>
  62                 <ul>
  63                     <li>Being eccentric wide-eyed crazies with wild ideas</li>
  64                     <li>Spouting nonsense like "monads" and "functors" every 2 seconds</li>
  65                     <li>Being bald</li>
  66                 </ul>
  67             </ul>
  68         </div>
  69     </div>
  70     <div id="slide-4">
  71         <div class="slide-title">=<< Obligatory Quote >>=</div>
  72         <div class="slide flexotron">
  73             <div class="textbox" style="font-size:30px;">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. I'm not cultured. I'm Australian.</div>
  74         </div>
  75         <div class="notes">
  76             <h1>Some Framing</h1>
  77             <ul>
  78                 <li>My goal is not to teach you functional programming, my goal is to spark curiosity</li>
  79                 <li>And I think this obligatory quote (every good talk has a quote) conveys the framework I used when writing these slides</li>
  80                 <li>Also we like boats and ships and stuff like that here, so make sense I guess</li>
  81                 <li>I'm not gonna make you build the ship, I'm gonna try make you curious about the sea that is functional programming</li>
  82                 <li>With that in mind, don't take any code examples too seriously, they are to demonstrate the big picture idea</li>
  83             </ul>
  84         </div>
  85     </div>
  86     <div id="slide-5">
  87         <div class="slide-title">=<< What is this Talk About? >>=</div>
  88         <div class="slide">
  89             <h1>This talk is <span class="highlight">not</span> about:</h1>
  90             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
  91                 <ul>
  92                     <li>Haskell</li>
  93                     <li>Convincing you to stop using whichever language you like</li>
  94                     <li>Mathematics</li>
  95                 </ul>
  96             </div>
  97         </div>
  98         <div class="notes">
  99             <h1>Teaching Violation!</h1>
 100             <ul>
 101                 <li>They say you should never say what something is not when teaching</li>
 102                 <li>But screw that, anarchy! Yeah!</li>
 103             </ul>
 104         </div>
 105     </div>
 106     <div id="slide-6">
 107         <div class="slide-title">=<< What is this Talk About? >>=</div>
 108         <div class="slide flexotron">
 109             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Perspective</div>
 110         </div>
 111         <div class="notes">
 112             <h1>What It Do, Then?</h1>
 113             <ul>
 114                 <li>So what is it about?</li>
 115                 <li>When trying to explain to someone why they should learn functional programming, there are many perspectives to try explain it from.</li>
 116                 <li>For this discussion, I've settled on a very meta one. Perspective itself.</li>
 117             </ul>
 118         </div>
 119     </div>
 120     <div id="slide-7">
 121         <div class="slide-title">=<< What is Functional Programming? >>=</div>
 122         <div class="slide flexotron">
 123             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Programming with functions.</div>
 124         </div>
 125         <div class="notes">
 126             <h1>Who could have guessed!</h1>
 127         </div>
 128     </div>
 129     <div id="slide-8">
 130         <div class="slide-title">=<< What is Functional Programming? >>=</div>
 131         <div class="slide flexotron">
 132             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Programming with functions.<br /><br />No, really. Everything is a function.</div>
 133         </div>
 134     </div>
 135     <div id="slide-9">
 136         <div class="slide-title">=<< What is a Function? >>=</div>
 137         <div class="slide flexotron">
 138             <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>
 139         </div>
 140         <div class="notes">
 141             <h1>Regarding Functions</h1>
 142             <ul>
 143                 <li>These aren't like procedural functions - "function" is a misnomer in that context. They are really procedures or subroutines (hence the name procedural)</li>
 144                 <li>A function is a mapping. It's equivalent to something like an array in PHP. It associates one value to another one</li>
 145                 <li>In the same way that a PHP array cannot mutate state, a function cannot</li>
 146                 <li>These are called "pure functions", but I'll just say "functions"</li>
 147                 <li>Mat asked a question about "impure functions"</li>
 148                 <ul>
 149                     <li>An impure function involves side effects. For example:
 150                         <div style="text-align: center;"><pre style="display: inline-block;"><code style="text-align: left; font-size: 18px;">
 151 function readFileAndAdd2(string $filePath) : int {
 152     $number = file_get_contents($filePath);
 153     return $number+2;
 154 }</code></pre></div>
 155                         is impure because it could be called with the same input and give different outputs (if the contents of the file at $filePath change).</li>
 156                     <li>I/O can be pure, but that's beyond the scope of this talk (maybe another dev training?)</li>
 157                 </ul>
 158             </ul>
 159         </div>
 160     </div>
 161     <div id="slide-10">
 162         <div class="slide-title">=<< What is a Function? >>=</div>
 163         <div class="slide">
 164             <h1>No equivalent constructs for:</h1>
 165             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 166                 <ul>
 167                     <li>For loops</li>
 168                     <li>While loops</li>
 169                     <li>Gotos</li>
 170                     <li>Variables*</li>
 171                     <li>Probably a bunch of other constructs I forgot</li>
 172                 </ul>
 173             </div>
 174             <div class="textbox" style="width: 60%; margin: auto; margin-top:10px;">*In pure functional programming, there are true variables. That is, once you declare the value of a variable, you cannot change it. Contrast this with procedural languages where you can reassign a variable whenever you like.</div>
 175         </div>
 176         <div class="notes">
 177             <h1>Consequences</h1>
 178             <ul>
 179                 <li>As a consequence, of having only pure functions, we have no more control structures D:</li>
 180                 <li>That raises the question... (go to the next slide xD)</li>
 181             </ul>
 182         </div>
 183     </div>
 184     <div id="slide-11">
 185         <div class="slide-title">=<< Huh? >>=</div>
 186         <div class="slide flexotron">
 187             <div class="textbox" style="text-align:center; font-size:40px; text-shadow: 4px 4px #000; padding:20px;" >Who in their right mind would wanna do that?!</div>
 188         </div>
 189         <div class="notes">
 190             <h1>Yeah, Who? Crazies, No Doubt</h1>
 191             <ul>
 192                 <li>It seems paradoxical, features have been removed, but somehow functional programming is just as good? Maybe better?</li>
 193                 <li>How can taking away all the tools we use to write programs be a good thing?</li>
 194                 <li>It actually makes no difference. You can accomplish anything in FP that you can accomplish in a procedural language, and gain some cool new superpowers</li>
 195             </ul>
 196         </div>
 197     </div>
 198     <div id="slide-12">
 199         <div class="slide-title">=<< Huh? >>=</div>
 200         <div class="slide">
 201             <h1>Why tho?</h1>
 202             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 203                 <ul>
 204                     <li>Learning is good</li>
 205                     <li>Brain plasticity</li>
 206                     <li>Greater perspective</li>
 207                 </ul>
 208             </div>
 209         </div>
 210         <div class="notes">
 211             <h1>Learn for Big Brain</h1>
 212             <ul>
 213                 <li>Learning functional programming is gonna require you to wrestle your brain in to shapes it's never taken before. Which will leave it with the plasticity to learn a greater variety of things you encounter.</li>
 214                 <li>It will also make the math/logic part of your brain very buff</li>
 215                 <li>As mentioned, there is no maths in this talk, but if you learn functional programming you will get buff maths brain</li>
 216                 <li>And as we know, the brain has 3 main cortexes: The passion cortex, the power cortext, and the maths/logic cortex</li>
 217                 <li>For the purposes of programming, we need a buff maths/logic cortext, learning functional programming will make us better programmers in general</li>
 218             </ul>
 219         </div>
 220     </div>
 221     <div id="slide-13">
 222         <div class="slide-title">=<< Paradigms >>=</div>
 223         <div class="slide flexotron">
 224             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Paradigms</div>
 225         </div>
 226     </div>
 227     <div id="slide-14">
 228         <div class="slide-title">=<< Paradigms >>=</div>
 229         <div class="slide flexotron">
 230             <div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px;">
 231                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Declarative</span>
 232                 <div class="textbox" style="position: relative; width: 80%; height: 60%;">
 233                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Functional</span>
 234                     <ul style="text-align: left; margin-top: 65px;margin-left: 40px;">
 235                         <li>Haskell</li>
 236                         <li>Elm</li>
 237                         <li>Elixir</li>
 238                         <li>Clojure</li>
 239                     </ul>
 240                 </div>
 241             </div>
 242             <div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px;">
 243                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Imperative</span>
 244                 <div class="textbox" style="position: relative; width: 80%; height: 60%;">
 245                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Procedural</span>
 246                     <ul style="text-align: left; margin-top: 65px;margin-left: 40px;">
 247                         <li>PHP</li>
 248                         <li>C</li>
 249                         <li>Java</li>
 250                         <li>BASIC</li>
 251                     </ul>
 252                 </div>
 253             </div>
 254         </div>
 255         <div class="notes">
 256             <h1>The Big Two</h1>
 257             <ul>
 258                 <li>Here are the big two paradigms, and inside those we see sub-paradigms.</li>
 259                 <li>And then in those there are some languages that embody that paradigm (there are more places languages can exist, for example SQL is declaritive but not functional, and Assembly is imperative but not procedural)</li>
 260                 <li>Marina made a comment that thinking about SQL while reading these slides is helpful - and I think that's true</li>
 261                 <ul>
 262                     <li>In SQL you express things in terms of relations, and there are no for loops, while loops, gotos, etc</li>
 263                 </ul>
 264                 <li>For this talk it's OK to just think of declaritive and functional as interchangeable, same with imperative and procedural</li>
 265                 <li>Foreshaddowing: Imperative and declaritive are both words used to describe human language</li>
 266                 <li>Learning a new paradigm is beneficial the same way learning a new human language is. It makes you better at programming and communicating.</li>
 267             </ul>
 268         </div>
 269     </div>
 270     <div id="slide-15">
 271         <div class="slide-title">=<< Gramatical Mood >>=</div>
 272         <div class="slide flexotron">
 273             <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 274                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Declarative</span>
 275                 A sentence which expresses a statement of fact.
 276                 <ul style="text-align: left; margin-top: 65px;margin-left: 40px;">
 277                     <li>He runs.</li>
 278                     <li>I like climbing.</li>
 279                     <li>Ice is cold.</li>
 280                     <li>Mathieu is shredded.</li>
 281                 </ul>
 282             </div>
 283             <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 284                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Imperative</span>
 285                 <span>A sentence which expresses instructions, or requests.</span>
 286                 <ul style="text-align: left; margin-top: 65px;margin-left: 40px;">
 287                     <li>Shut the door.</li>
 288                     <li>Don't eat my burger.</li>
 289                     <li>Let's go to the pub.</li>
 290                     <li>Don't make eye contact with Craig.</li>
 291                 </ul>
 292             </div>
 293         </div>
 294         <div class="notes">
 295             <ul>
 296                 <li>We can see here that in the declaritive mood you express statements of fact. They aren't instrcutions</li>
 297                 <li>Contrast this with the imperative style of expression where there is a very clear instruction to carry out</li>
 298             </ul>
 299         </div>
 300     </div>
 301     <div id="slide-16">
 302         <div class="slide-title">=<< Gramatical Mood >>=</div>
 303         <div class="slide flexotron">
 304             <div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 305                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Declarative</span>
 306                 This is this.
 307             </div>
 308             <div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 309                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Imperative</span>
 310                 Do this.
 311             </div>
 312         </div>
 313         <div class="notes">
 314             This is the simplest way I can think to express difference
 315         </div>
 316     </div>
 317     <div id="slide-17">
 318         <div class="slide-title">=<< Big Brain Moment >>=</div>
 319         <div class="slide flexotron">
 320             <div class="textbox" style="text-align:center; font-size:40px; text-shadow: 4px 4px #000; padding:20px;" >Programming languages <span class="highlight">ARE</span> human languages.</div>
 321         </div>
 322         <div class="notes">
 323             <h1>We don't write programs for computers<br />We write programs for other humans</h1>
 324         </div>
 325         <div class="notes">
 326             <li>Unless your writing machine code or something like that...</li>
 327         </div>
 328     </div>
 329     <div id="slide-18">
 330         <div class="slide-title">=<< Why is declaritive mood good? >>=</div>
 331         <div class="slide flexotron">
 332             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Atemporality<br />Independant of or unaffected by time.</div>
 333         </div>
 334         <div class="notes">
 335             <h1>I Can See Through Time!</h1>
 336             <ul>
 337                 <li>In both the human language case, and the programming case, we give up our "instruction words" (in the case of programming, this is for, while, goto, etc)</li>
 338                 <li>Surely giving instructions is useful, otherwise how do you do anything?!</li>
 339                 <li>Do we get something good in return? Yes! We get atemporality</li>
 340                 <ul>
 341                     <li>This is super powerful and quite different from how we normally write programs</li>
 342                     <li>When we write in a procedural language we have to think about how things change over time</li>
 343                 </ul>
 344             </ul>
 345         </div>
 346     </div>
 347     <div id="slide-19">
 348         <div class="slide-title">=<< Why is declaritive mood good? >>=</div>
 349         <div class="slide flexotron">
 350             <div style="text-align:center; font-size:50px; text-shadow: 4px 4px #000; padding:20px;" >Declarative programs express what <span class="highlight" style="display: block;">they actually do</span> leaving more "brain space" to focus on solving the problem.</div>
 351         </div>
 352         <div class="notes">
 353             <h1>Expressivity</h1>
 354             <ul>
 355                 <li>In an imperative paradigm, thinking about the program means thinking about changes over time - which means we have to keep track of state in our head</li>
 356                 <li>In a declaritive paradigm, thinking about the program means thinking about relationships - which means we look at what the thing is, how it relates to the other thing, and move on</li>
 357             </ul>
 358         </div>
 359     </div>
 360     <div id="slide-20">
 361         <div class="slide-title">=<< To Recap >>=</div>
 362         <div class="slide">
 363             <h1>Why tho?</h1>
 364             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 365                 <ul>
 366                     <li>Because sometimes there is such a thing as too much freedom</li>
 367                     <li>Functional programming is awesome because it stops you shooting yourself in the foot</li>
 368                     <li>"Constraints liberate, liberties constrain"</li>
 369                     <li>There are also classes of problems where the declaritive style is a more elegant way of expressing the solution</li>
 370                 </ul>
 371             </div>
 372             <div class="notes">
 373                 <ul>
 374                     <li>Some problems are very difficult to solve in an imperative way.</li>
 375                     <li>Especially when talking about events that are happening in parallel and may run at different speed/times</li>
 376                     <li>In the imperative paradigm, you quite easily come up against data races by virtue of the way the program is expressed</li>
 377                     <li>Functional programming takes away entire classes of problems by removing the "instruction words" - no more data races</li>
 378                     <li>If you ever used JavaScript before promises were a thing, I'm sure you've felt the pain</li>
 379                 </ul>
 380             </div>
 381         </div>
 382     </div>
 383     <div id="slide-21">
 384         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 385         <div class="slide">
 386             <h1>My favourite example</h1>
 387             <h2>Consider:</h2>
 388             <div style="display: flex;">
 389                 <pre style="margin: auto;"><code style="font-size: 20px;"><span class="code-friends1 code-friends4">x = x + 1;</span></code></pre>
 390             </div>
 391             <div style="display: flex; margin-top: 20px; margin-bottom: 20px;">
 392                 <span style="margin: auto;">and:</span>
 393             </div>
 394             <div style="display: flex; margin-bottom:50px;">
 395                 <pre style="margin: auto;"><code style="font-size: 20px;"><span class="code-friends2 code-friends3">function repeat(x) {
 396     return x + repeat(x);
 397 }</span></code></pre>
 398             </div>
 399             <h2>OK, so what?</h2>
 400             <div style="display: flex;">
 401                 <div class="textbox" style="margin: auto; width: 60%; font-size: 20px;">In the declaritive paradigm, <span class="code-friends1" onmouseenter="activateFriends(1, true);" onmouseleave="deactivateFriends(1);" style="display: inline-block;">this</span> code hangs while <span class="code-friends2" onmouseenter="activateFriends(2, true);" onmouseleave="deactivateFriends(2);" style="display: inline-block;">this</span> code runs. In the imperative paradigm <span class="code-friends3" onmouseenter="activateFriends(3, true);" onmouseleave="deactivateFriends(3);" style="display: inline-block;">this</span> code hangs, while <span class="code-friends4" onmouseenter="activateFriends(4, true);" onmouseleave="deactivateFriends(4);" style="display: inline-block;">this</span> code runs.</div>
 402             </div>
 403         </div>
 404         <div class="notes">
 405             <h1>Hot tip!</h1>
 406             <ul>
 407                 <li>Hover over the "this" words in the text box! Notice that the code which hangs is flipped in each paradigm!</li>
 408                 <li>This code is not any specific language. It's one I made up although it looks similar to other languages</li>
 409                 <li>The idea is to parse it in the declaritive and the imperative style to see the difference</li>
 410             </ul>
 411         </div>
 412     </div>
 413     <div id="slide-22">
 414         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 415         <div class="slide">
 416             <div style="display: flex; margin-top: 50px;">
 417                 <pre style="margin: auto;"><code style="font-size: 20px;">x = x + 1;</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: 40px;">
 421                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Declarative</span>
 422                     "x is the same as itself plus one."<br /><br /><br /><br /><br />
 423                     Complete nonsense!
 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                     "Evaluate the thing on the right of `=` then store it in the thing on the left of `=`."<br /><br /><br />
 428                     A list of instructions that can be followed.
 429                 </div>
 430             </div>
 431         </div>
 432         <div class="notes">
 433             <h1>Reminder!</h1>
 434             <ul>
 435                 <li>In the declaritive paradigm, = means that two things are one in the same - which leads to a contradiction in our example</li>
 436                 <li>In the imperative paradigm (assuming x is defined) there's no problem - we just add 1 to x, then save it back in x</li>
 437             </ul>
 438         </div>
 439     </div>
 440     <div id="slide-23">
 441         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 442         <div class="slide">
 443             <div style="display: flex; margin-top: 50px;">
 444                 <pre style="margin: auto;"><code style="font-size: 20px;">function repeat(x) {
 445     return x + repeat(x);
 446 }</code></pre>
 447             </div>
 448             <div class="flexotron" style="height: 80%;">
 449                 <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 450                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Declarative</span>
 451                     "The repeat of `x` is `x` appended to the repeat of `x`"<br /><br /><br />
 452                     An infinite list of `x`!
 453                 </div>
 454                 <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 455                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Imperative</span>
 456                     "To evaluate the repeate of `x`, first evaluate the repeat of `x`"<br /><br /><br />
 457                     ...Yeah, you see the problem?
 458                 </div>
 459             </div>
 460         </div>
 461         <div class="notes">
 462             <h1>Atemporality</h1>
 463             <ul>
 464                 <li>Here we are starting to touch on atemporality</li>
 465                 <li>The declaritive style does not read the definition as instructions. It's not things happening over time. It just is what it is. It's a list of whatever you pass in repeated forever</li>
 466             </ul>
 467         </div>
 468     </div>
 469     <div id="slide-24">
 470         <div class="slide-title">=<< Big Brain Moment >>=</div>
 471         <div class="slide flexotron">
 472             <div class="textbox" style="text-align:center; font-size:40px; text-shadow: 4px 4px #000; padding:20px;" >Programming languages <span class="highlight">ARE</span> human languages.</div>
 473         </div>
 474         <div class="notes">
 475             <h1>Recap/Reinforcement</h1>
 476             <ul>
 477                 <li>Imperative tells you what to do</li>
 478                 <li>Declaritive tells you what things are</li>
 479             </ul>
 480         </div>
 481     </div>
 482     <div id="slide-25">
 483         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 484         <div class="slide">
 485             <h1>Real Haskell code that runs</h1>
 486             <pre><code class="haskell">repeat x = x ++ repeat x
 487 threeFs = take 3 (repeat "f")
 488
 489 > "fff"
 490             </code></pre>
 491         </div>
 492         <div class="notes">
 493             <ul>
 494                 <li>The first line is the Haskell way of defining the repeat function from before</li>
 495                 <li>And we read this as: "threeFs is the first three elements in an infinite list of fs"</li>
 496                 <ul>
 497                     <li>And that's totally fine! If you have an infinitely long list of fs then of course you can just take the first 3</li>
 498                     <li>It's a but unfortunate that the function to get n elements is called "take" because that's kinda imperative, but whatever</li>
 499                 </ul>
 500             </ul>
 501         </div>
 502     </div>
 503     <div id="slide-26">
 504         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 505         <div class="slide">
 506             <h1>Real JavaScript code that hangs</h1>
 507             <pre><code class="javascript">function repeat(x) {
 508     return x + repeat(x);
 509 }
 510
 511 threeFs = repeat("f").substr(0,3);
 512
 513 > InternalError: too much recursion
 514             </code></pre>
 515         </div>
 516         <div class="notes">
 517             <ul>
 518                 <li>By contrast, this reads as "First compute an infinite list of fs" - which is clearly problematic</li>
 519                 <li>It's left as an exercise to the reader to try work out why the x = x + 1 example would hang in Haskell</li>
 520             </ul>
 521         </div>
 522     </div>
 523     <div id="slide-27">
 524         <div class="slide-title">=<< Big Brain Moment >>=</div>
 525         <div class="slide">
 526             <h1>What did declaritive mode give us?</h1>
 527             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 528                 <ul>
 529                     <li>Atemporality</li>
 530                     <li>The ability to wield infinity!</li>
 531                 </ul>
 532             </div>
 533         </div>
 534         <div class="notes">
 535             <h1>Big Brain Moment Two!</h1>
 536             <ul>
 537                 <li>How cool is that? Because we can express what things are, we can express an infininte list!</li>
 538                 <li>Often when we write programs, we have to worry about things cascading out infinitely, but not in the declaritive paradigm!</li>
 539                 <li>None of the declaritive version of the program relies on us traking changes anywhere. We just need to know what a thing is and how it relates to another thing</li>
 540                 <ul>
 541                     <li>And if that thing happens to be infinite, who cares! That's just what it is</li>
 542                 </ul>
 543             </ul>
 544         </div>
 545     </div>
 546     <div id="slide-28">
 547         <div class="slide-title">=<< Promises >>=</div>
 548         <div class="slide flexotron">
 549             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Promises</div>
 550         </div>
 551         <div class="notes">
 552             Seems like an odd tangent but let's go with it. And just as before, I'm gonna break one of the carinal rules of teaching by telling you what promises are not...
 553         </div>
 554     </div>
 555     <div id="slide-29">
 556         <div class="slide-title">=<< Promises >>=</div>
 557         <div class="slide flexotron">
 558             <div style="position: relative; text-align:center; font-size:40px; text-shadow: 4px 4px #000;" >
 559                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 560                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 561                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 562                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 563                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 564                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 565                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 566                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 567                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 568                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 569                 Promises <span class="shake-slow shake-constant" style="display: inline-block; color: #f98012">do not</span> make things asynchronous!</div>
 570         </div>
 571         <div class="notes">
 572             <ul>
 573                 <li>There's a lot of misleading information out there about promises</li>
 574                 <li>Some people believe that promises "make things asynchronous", but this isn't true</li>
 575                 <li>You can have perfectly synchronous promises, the thing you pass as a callback to a promise does not get "run in the background" or anything like that</li>
 576             </ul>
 577         </div>
 578     </div>
 579     <div id="slide-30">
 580         <div class="slide-title">=<< Promises >>=</div>
 581         <div class="slide">
 582             <h1>The real promises</h1>
 583             <h2>What problems do promises solve?</h2>
 584             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 585                 <ul>
 586                     <li>Asynchronous request management</li>
 587                     <li>Error handling for computations which may fail</li>
 588                     <li>Probably more too</li>
 589                 </ul>
 590             </div>
 591             <h2 style="margin-top: 50px;">What are promises then?</h2>
 592             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 593                 <ul>
 594                     <li>A value (which may or may not be available yet) wrapped in some additional context</li>
 595                     <li>Functions to instantiate the wrapper (`Promise.resolve`, `Promise.reject`)</li>
 596                     <li>A rule for composing these wrapped values (`then`)</li>
 597                 </ul>
 598             </div>
 599         </div>
 600         <div class="notes">
 601             <ul>
 602                 <li>The "value" is where the asynchronous part comes in</li>
 603                 <li>That value may become available later, but it may just be there the entire time as well</li>
 604             </ul>
 605         </div>
 606     </div>
 607     <div id="slide-31">
 608         <div class="slide-title">=<< Promises >>=</div>
 609         <div class="slide">
 610             <h1>Terminology/syntax recap</h1>
 611             <h2>JavaScript arrow functions</h2>
 612             <div style="display: flex;">
 613                 <pre style="margin: auto;"><code style="font-size: 20px;">x => x + 1;</code></pre>
 614             </div>
 615             <div style="display: flex; margin-top: 20px; margin-bottom: 20px;">
 616                 <span style="margin: auto;">is equivalent to:</span>
 617             </div>
 618             <div style="display: flex; margin-bottom:50px;">
 619                 <pre style="margin: auto;"><code style="font-size: 20px;">function(x) {
 620     return x+1;
 621 }</code></pre>
 622             </div>
 623             <h2>Composition</h2>
 624             <div style="display: flex;">
 625                 <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>
 626             </div>
 627         </div>
 628         <div class="notes">
 629             <h1>Regarding Composition</h1>
 630             <ul>
 631                 <li>You may have come across function composition. There's lots of different kinds of composition, but function composition is incredibly common, especially in programming. But we'll talk about the composition of promises.</li>
 632                 <li>In both cases the idea is the same. Function composition lets you combine two functions in to another function. Promise composition lets you combine two promises in to another promise</li>
 633             </ul>
 634         </div>
 635     </div>
 636     <div id="slide-32">
 637         <div class="slide-title">=<< Promises >>=</div>
 638         <div class="slide">
 639             <h1>Promise composition</h1>
 640             <div style="display: flex;">
 641                 <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>
 642             </div>
 643             <div style="display: flex; margin-top: 100px">
 644                 <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>
 645             </div>
 646             <div style="display: flex;">
 647                 <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>
 648             </div>
 649             <div style="display: flex; margin-top: 100px">
 650                 <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>
 651             </div>
 652             <div style="display: flex;">
 653                 <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>
 654             </div>
 655         </div>
 656         <div class="notes">
 657             <h1>Hot Tip!</h1>
 658             <ul>
 659                 <li>Hover over "one", "two", and "three" to see the promises highlighed</li>
 660                 <ul>
 661                     <li>The first one is all by itself</li>
 662                     <li>The second one is the composition of the first one using the composition rule (the function passed to `then`)</li>
 663                     <li>The third one is the composition of the second one using the composition rule (the function given to `then`)</li>
 664                 </ul>
 665                 <li>The `then` method accepts a function which:</li>
 666                 <ul>
 667                     <li>Will be passed the previous promise's wrapped value</li>
 668                     <li>Causing it return the next promise</li>
 669                     <li>Which will give its wrapped value to the function passed to the next `then` method</li>
 670                 </ul>
 671                 <li>It's very important to realise that we are passing a function to then, not a value, it's not actually doing anything when we set up the promise chain</li>
 672             </ul>
 673         </div>
 674     </div>
 675     <div id="slide-33">
 676         <div class="slide-title">=<< Promises >>=</div>
 677         <div class="slide">
 678             <h1>OK great but who cares?</h1>
 679             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 680                 <ul>
 681                     <li>We are <span class="highlight" style="display: inline-block;">declaring</span> how we want promises to compose</li>
 682                     <li>
 683                         The order that the promises actually resolve their values in is not important
 684                         <ul><li>In other words, we don't have to worry about <span class="highlight" style="display: inline-block;">timing</span> anymore</li></ul>
 685                     </li>
 686                     <li>We can <span class="highlight" style="display: inline-block;">declare</span> a failure anywhere in the chain</li>
 687                 </ul>
 688             </div>
 689         </div>
 690         <div class="notes">
 691             <h1>Pls Note</h1>
 692             <ul>
 693                 <li>Since this is JavaScript, you can mutate state in the functions that are passed to "then"</li>
 694                 <li>But that's beside the point I'm trying to demonstrate, and you shouldn't really do that anyway</li>
 695             </ul>
 696         </div>
 697     </div>
 698     <div id="slide-34">
 699         <div class="slide-title">=<< Promises >>=</div>
 700         <div class="slide flexotron">
 701             <div style="position: relative;">
 702                 <img src="img/thonking.gif" />
 703                 <div class="thonkingWrap"><div class="thonk">atemporality?</div></div>
 704                 <div class="thonkingWrap"><div class="thonk">declaritive?</div></div>
 705                 <div class="thonkingWrap"><div class="thonk">functions?</div></div>
 706                 <div class="thonkingWrap"><div class="thonk">composition?</div></div>
 707             </div>
 708         </div>
 709         <div class="notes">
 710             This sure is starting to sound familiar.
 711         </div>
 712     </div>
 713     <div id="slide-35">
 714         <div class="slide-title">=<< Big Brain Moment >>=</div>
 715         <div class="slide">
 716             <h1>Woah!</h1>
 717             <h2>JavaScript</h2>
 718             <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>)
 719     <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>))
 720     <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>
 721             <h2>Haskell</h2>
 722             <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>)
 723     <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>))
 724     <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>
 725         </div>
 726         <div class="notes">
 727             <h1>Hot Tip!</h1>
 728             <ul>
 729                 <li>Hover over the language elements to see how they pair up in each language!</li>
 730                 <li>Promises are very similar to a type in Haskell called "Either". "Either" can be instantiated with `Right` or `Left` which correspond to `resolve` and `reject`, respectively</li>
 731                 <li>It does not matter what order the promises resolve in, the final promise will always be resolved with "We start here then get here and finally here"</li>
 732                 <li>Bas made a good point that when looking at the calls to "then" you think about the things happening one after another.</li>
 733                 <ul>
 734                     <li>While that's true, what `then` does is describe the way to combine the results once they arrive</li>
 735                     <li>The "We start here" result could come from a web request that takes 10 seconds, whereas the other strings could resolve instantly, but the final promise would still be "We start here then get here and finally here" - even though that was not the order we got the results</li>
 736                     <li>Be careful, the `x` in each "then" call is not the same `x`. It's part of the function which is being passed to then, which means it is in a completely different scope. The purpose of the function is to describe what you want to happen</li>
 737                     <li>It's hard to untwist your brain from thinking about promises in the procedural way - this is what I meant by "wrestling your brain in to new shapes" :)</li>
 738                 </ul>
 739                 <li>In this example, there is nothing asynchronous happening, but it's not much work to adapt it so there is. I mainly wanted to really the similarities with haskell</li>
 740                 <li>How cool is it that these look so similar?</li>
 741                 <li>As mentioned, in the JavaScript version, you could mutate something inside the `then` functions - but this would absolutely lead to data races</li>
 742                 <li>In Haskell, you cannot do that, which is one of the ways it stops you shooting yourself in the foot</li>
 743                 <li>Noel made an interesting comment that JavaScript added async/await as "syntactic sugar" to make this kind of code look more imperative.</li>
 744                 <ul>
 745                     <li>And I was pleased to say that the exact same thing exists in Haskell :)</li>
 746                 </ul>
 747             </ul>
 748         </div>
 749     </div>
 750     <div id="slide-36">
 751         <div class="slide-title">=<< Big Brain Moment >>=</div>
 752         <div class="slide">
 753             <h1>Woah!</h1>
 754             <h2>JavaScript</h2>
 755             <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>)
 756     <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>))
 757     <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>))
 758     <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>
 759             <h2>Haskell</h2>
 760             <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>)
 761     <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>))
 762     <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>))
 763     <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>
 764         </div>
 765         <div class="notes">
 766             <h1>You Were Doing FP all Along!</h1>
 767             <ul>
 768                 <li>Likewise, we can put a failure anywhere in the chain. It doesn't matter if the failure happens first, last, or anywhere in between. The result is always a failed promise of "Oh noes!"</li>
 769                 <li>So, if you've ever used promises, you've been doing declaritive style programming without even realising it!</li>
 770                 <li>They give us some new powers, we can now write atemporal code, which explains why they emerged in JS, a place where people are constantly dealing with requests that can finish in any order</li>
 771                 <li>So it's super cool that people using a language very far removed from haskell ended up solving the problem in the same way</li>
 772                 <li>Although both are independed discoveries, I don't think it's a coincidence promises appeared given the nature of the JS world.</li>
 773             </ul>
 774         </div>
 775     </div>
 776     <div id="slide-37">
 777         <div class="slide-title">=<< Composition >>=</div>
 778         <div class="slide flexotron">
 779             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Composition</div>
 780         </div>
 781         <div class="notes">
 782             <h1>The section on composition!</h1>
 783             <ul>
 784                 <li>This gets its own section because it is not just important to programming, it's important to life in general</li>
 785             </ul>
 786         </div>
 787     </div>
 788     <div id="slide-38">
 789         <div class="slide-title">=<< Composition >>=</div>
 790         <div class="slide flexotron">
 791             <img src="img/composition0.png" style="height: 700px;" />
 792         </div>
 793     </div>
 794     <div id="slide-39">
 795         <div class="slide-title">=<< Composition >>=</div>
 796         <div class="slide flexotron">
 797             <div style="position: relative;">
 798                 <div style="position: absolute; top: -40px; left: -106px">If we can go from here to here</div>
 799                 <img src="img/composition1.png" style="height: 700px;" />
 800             </div>
 801         </div>
 802     </div>
 803     <div id="slide-40">
 804         <div class="slide-title">=<< Composition >>=</div>
 805         <div class="slide flexotron">
 806             <div style="position: relative;">
 807                 <div style="position: absolute; top: -40px; left: -106px">If we can go from here to here</div>
 808                 <div style="position: absolute; max-width: 425px; text-align: center; bottom: 149px; left: 220px">And we can go from here to here</div>
 809                 <img src="img/composition2.png" style="height: 700px;" />
 810             </div>
 811         </div>
 812     </div>
 813     <div id="slide-41">
 814         <div class="slide-title">=<< Composition >>=</div>
 815         <div class="slide flexotron">
 816             <div style="position: relative;">
 817                 <div style="position: absolute; top: -40px; left: -106px">If we can go from here to here</div>
 818                 <div style="position: absolute; max-width: 425px; text-align: center; bottom: 149px; left: 220px">And we can go from here to here</div>
 819                 <div style="position: absolute; text-align: center; bottom: -70px; left: 82px">Then the composition (if it exists) goes from here to here</div>
 820                 <img src="img/composition3.png" style="height: 700px;" />
 821             </div>
 822         </div>
 823         <div class="notes">
 824             <h1>Coins and pipes!</h1>
 825             <ul>
 826                 <li>Keep in mind the the composition of A->B and B->C is not gauranteed to exist!</li>
 827                 <li>I'm using coins and pipes to demonstrate, but the coins and pipes could be anything... Functions, promises, etc.</li>
 828                 <li>Stop reading here!! After reading the next slide come back to this one pls :)</li>
 829                 <ul>
 830                     <li>We want to go from A to C - but maybe that's really hard (I accidentally illustrated that in the diagram! The pipe from A to C is really long! But the A->B->C route is short!)</li>
 831                     <li>Perhaps someone worked out how to go from A to B, and someone else worked out how to go from B to C</li>
 832                     <li>If we're in a system where composition is possible, then we just solved the problem!</li>
 833                     <li>This is the natural way people solve problems</li>
 834                     <ul>
 835                         <li>We like to break things up in to small chunks and solve the small bits and then put them back together</li>
 836                         <li>You probably do it when you're writing software at Moodle!</li>
 837                     </ul>
 838                 </ul>
 839                 <li>Stop reading here!! After getting to the "What's this got to do with FP" slide, come back pls :)</li>
 840                 <ul>
 841                     <li>Maybe A->B has a side effect, this means when we call B->C with the result from A->B, it may not be the same as calling A->C. The point of composition is that the outcome of calling both should be indistinguishable.</li>
 842                     <li>Procedures in imperative languages (what most programmers call functions) are a short sighted attempt at composition, we wanted a way to break things up, and sure... You can put functions together in imperative languages and it kinda works, but it's not the same as true composition</li>
 843                     <li>In the functional paradigm, composition is gauranteed because functions cannot have side effects</li>
 844                 </ul>
 845             </ul>
 846         </div>
 847     </div>
 848     <div id="slide-42">
 849         <div class="slide-title">=<< Composition >>=</div>
 850         <div class="slide">
 851             <h1>OK great but who cares?</h1>
 852             <div class="textbox" style="width: 60%; margin: auto;">Big problems can often be chopped up in to smaller, easier to solve problems. If we can be clever about how we chop them up, such that the solutions to the individual problems can <span class="highlight">compose</span> together to form a full solution, then we can infinitely speed up the process by adding more workers!</div>
 853         </div>
 854         <div class="notes">
 855             <ul>
 856                 <li>Remember to go back to the previous slide!</li>
 857             </ul>
 858         </div>
 859     </div>
 860     <div id="slide-43">
 861         <div class="slide-title">=<< Composition >>=</div>
 862         <div class="slide">
 863             <h1>Examples</h1>
 864             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 865                 <ul>
 866                     <li>The pyramids</li>
 867                     <li>The LHC</li>
 868                     <li>McDonald's</li>
 869                     <li>Moodle!</li>
 870                 </ul>
 871             </div>
 872         </div>
 873         <div class="notes">
 874             <ul>
 875                 <li>The pyramids were build by having loads of peope work in parallel</li>
 876                 <li>Same with the LHC - I don't believe there is a single person in the world who fully understands it</li>
 877                 <ul>
 878                     <li>But with lots of people working together we can create this amazing thing which recreated conditions similar to that at the near-instant our universe began!</li>
 879                     <li>That's pretty amazing</li>
 880                 </ul>
 881                 <li>And with McDonald's - Instead of having one chef "make a burger" staff make individual parts of the burger and compose it together (I think McDonald's was the first place to do this)</li>
 882                 <ul>
 883                     <li>You can make a lot more burgers that way!</li>
 884                 </ul>
 885                 <li>And Moodle does it too! Let's think about how we tackle projects...</li>
 886             </ul>
 887         </div>
 888     </div>
 889     <div id="slide-44">
 890         <div class="slide-title">=<< Composition >>=</div>
 891         <div class="slide flexotron">
 892             <div style="height:80%;" >
 893                 <img src="img/10xdev.png" class="textbox" style="margin-bottom: 20px; 40px; height: 60%; display: block; margin: auto; padding-bottom: 0px;" />
 894                 <div class="textbox" style="margin-top: 20px !important; width: 50%; margin: auto; font-style: italic;">"With these biceps I can solve <span class="highlight shake shake-constant" style="display: inline-block">ANYTHING</span>"</div>
 895             </div>
 896         </div>
 897         <div class="notes">
 898             <ul>
 899                 <li>Do we get one ultimate developer to smash out the whole thing?</li>
 900                 <li>idk about you, but I wouldn't be keen to work with this person</li>
 901                 <li>Check out <a href="https://www.freecodecamp.org/news/we-fired-our-top-talent-best-decision-we-ever-made-4c0a99728fde/">this story</li>
 902             </ul>
 903         </div>
 904     </div>
 905     <div id="slide-45">
 906         <div class="slide-title">=<< Composition >>=</div>
 907         <div class="slide flexotron">
 908             <div class="textbox"><h1>No, you get friends to take a piece and help!</h1></div>
 909             <div id="cloudguys">
 910                 <div>
 911                     <span>henlo</span>
 912                     <img src="img/cloudguy.gif" />
 913                 </div>
 914                 <div>
 915                     <span>henlo</span>
 916                     <img src="img/cloudguy.gif" />
 917                 </div>                <div>
 918                     <span>henlo</span>
 919                     <img src="img/cloudguy.gif" />
 920                 </div>
 921                 <div>
 922                     <span>henlo</span>
 923                     <img src="img/cloudguy.gif" />
 924                 </div>
 925                 <div>
 926                     <span>henlo</span>
 927                     <img src="img/cloudguy.gif" />
 928                 </div>
 929                 <div>
 930                     <span>henlo</span>
 931                     <img src="img/cloudguy.gif" />
 932                 </div>
 933             </div>
 934         </div>
 935         <div class="notes">
 936             <ul>
 937                 <li>Of course not, we do it as a team!</li>
 938                 <li>This is why it's worth spending the time to plan things and figure out how to "chop up" the work</li>
 939                 <li>It's very important to make sure the way we "chop" the problem allows the solutions to be composed together later</li>
 940             </ul>
 941         </div>
 942     </div>
 943     <div id="slide-46">
 944         <div class="slide-title">=<< Composition >>=</div>
 945         <div class="slide flexotron">
 946             <div class="textbox" style="text-align:center; font-size:40px; text-shadow: 4px 4px #000; padding:20px;" >Composition is nature's greatest hack</div>
 947         </div>
 948         <div class="notes">
 949             <h1>Why was all that relevant?</h1>
 950             <ul>
 951                 <li>My goal here was to try and convince you that composition really is important and is fundamental to the way we think</li>
 952                 <li>Humans are amazing for our ability to break down problems in to manageable chunks and then compose them together - I don't think other animals do that</li>
 953                 <ul>
 954                     <li>Which is probably a big part of how we dominated this planet so fast</li>
 955                 </ul>
 956                 <li>At its core, composition is about relationships, and building complexity by combining them. Hey, wasn't the whole declaritive thing about relationships?</li>
 957                 <ul>
 958                     <li>At the beginning I said in the declaritive paradigm we express things in terms of relationships...</li>
 959                 </ul>
 960                 <li>And that brings me to the final point</li>
 961             </ul>
 962         </div>
 963     </div>
 964     <div id="slide-47">
 965         <div class="slide-title">=<< Composition >>=</div>
 966         <div class="slide">
 967             <h1>What's this got to do with FP?</h1>
 968             <div class="textbox" style="width: 60%; margin: auto;">When writing programs (as an individual in this case, not as a group) we naturally want to break the solution up in to "building blocks" that we put together to solve the problem (it's composition again).</div>
 969             <div class="textbox" style="width: 60%; margin: auto; margin-top: 20px;">The building blocks you use matter. Some compose better than others. Because of all the restrictions the functional paradigm places on the programmer (lack of mutation, lack of control flow), functions in a pure language are naturally well-suited to composition.</div>
 970             <div class="textbox" style="width: 60%; margin: auto; margin-top: 20px;">This is becoming more relevant than ever in the age of parallel computing</div>
 971         </div>
 972         <div class="notes">
 973             <ul>
 974                 <li>Functional programming is great because it gaurantees composition</li>
 975                 <li>In a procedural language, things don't necessarily compose</li>
 976                 <li>The building blocks we use for our compositions matter (whether it be programs, teamwork, whatever)</li>
 977                 <ul>
 978                     <li>The restrictions that the funcational paradigm places on you means you cannot work with blocks that do not compose</li>
 979                     <li>So by taking away our "instruction words" we have gained another powerful tool: composition</li>
 980                     <li>Remember that slide I said to go back to? Do that now pls! Then comeback here cos there's a few more slides after this one.</li>
 981                 </ul>
 982         </div>
 983     </div>
 984     <div id="slide-48">
 985         <div class="slide-title">=<< Closing Notes >>=</div>
 986         <div class="slide">
 987             <h1>Very big brain thoughts:</h1>
 988             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 989                 <h1>Functional programming is awesome because:</h1>
 990                 <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 991                     <ul>
 992                         <li>By taking away convenient, but dangerous tools we are left with tools that are incredibly powerful, but more difficult to wield</li>
 993                         <li>In particular</li>
 994                         <ul>
 995                             <li>Atemporality: The ability to express things independant of time</li>
 996                             <li>Infinity: Infinite recursion can't stop you now!</li>
 997                             <li>Composition: The fundamental way humans solve problems is available to you at all times</li>
 998                         </ul>
 999                     </ul>
1000                 </div>
1001             </div>
1002         </div>
1003         <div class="notes">
1004             <ul>
1005                 <li>New super powers!</li>
1006             </ul>
1007         </div>
1008     </div>
1009     <div id="slide-49">
1010         <div class="slide-title">=<< Closing Notes >>=</div>
1011         <div class="slide">
1012             <h1>Very big brain thoughts:</h1>
1013             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
1014                 <ul>
1015                     <li>We work across multiple timezones, so being able to solve problems in a time-independant way seems appealing, doesn't it?</li>
1016                     <li>Moore's law is coming to an end, now the focus is shifting to parallel computing</li>
1017                     <ul>
1018                         <li>Imperative paradigms will not be the right tool for this</li>
1019                         <li>Either we'll see a shift to declaritive style programming</li>
1020                         <li>Or we'll make life hard for ourselves real fast</li>
1021                     </ul>
1022                     <li>Maybe quantum mechanics is so damn confusing because at a certain point we can't decompose things anymore?</li>
1023                     <ul><li>After all... why should the universe conform to the way our brains want it to be...</li></ul>
1024                 </ul>
1025             </div>
1026         </div>
1027         <div class="notes">
1028             <ul>
1029                 <li>In regards to Moore's law, I personally hope we start seeing a paradigm shift soon. Because that's the definition of madness really. Doing the same thing over and over but expecting different results.</li>
1030                 <li>Other analogies like the frog in slowly boiling water come to mind</li>
1031                 <li>And that's about it really!</li>
1032             </ul>
1033         </div>
1034     </div>
1035     <div id="slide-50">
1036         <div id="cloudguy2">
1037             <div style="height: 20%; text-align: center;">
1038                 <img style="height: 100%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src="img/cloudguy.gif" />
1039                 <div style="width: 80%; margin: auto;">Thanks for participating!!</div>
1040             </div>
1041         </div>
1042         <div class="notes">
1043             <ul>
1044                 <li>If nothing else, I really hope you're now just a little bit more curious about functional programming</li>
1045                 <li>And even though functional programing is not incredibly relevant to our roles just now, learning more about it will make you a better programmer, and that benefits everyone :)</li>
1046                 <li>If you have any questions please message me, I'm always happy to talk about this stuff</li>
1047                 <li>I'd suggest going to the pub to talk about it, but, well, we can't do that just now</li>
1048                 <li>Bas mentioned that Haskell has a reputation for being academic</li>
1049                 <ul>
1050                     <li>It's true that it was initially written for academic purposes</li>
1051                     <li>But that was over 30 years ago and it has now evolved in to something that is usable in production</li>
1052                 </ul>
1053                 <li>Bas also asked about real world Haskell applications, here's a few I know of</li>
1054                 <ul>
1055                     <li>Facebook's spam filter is written in Haskell (and they even contributed back to the Haskell project)</li>
1056                     <li>Loads of banks use it for the reason that it's hard to write software that "goes wrong" in Haskell</li>
1057                     <li>Target use a program written in Haskell to optimise supply chains</li>
1058                     <li>NASA!</li>
1059                 </ul>
1060                 <li>And here's some resources!</li>
1061                 <ul>
1062                     <li>https://haskellbook.com/</li>
1063                     <li>http://learnyouahaskell.com/introduction</li>
1064                     <li>Me! I'm no master, but I'll always be happy to talk about Haskell and functional programming - send me a mesage!</li>
1065                 </ul>
1066                 <li>And remember, you can't spell "Functional Programming" without "Fun"!</li>
1067             </ul>
1068         </div>
1069     </div>
1070 </body>
1071 <script>
1072  var div, i, j, span, duration = "";
1073  var crazyTexts = [];
1074  var opacyTexts = [];
1075  div = document.querySelectorAll("#rant > span.crazy");
1076  for (j = 0; j < div.length; j++) {
1077      span=""
1078      for (i = 0; i < div[j].innerText.length; i++) {
1079          duration = Math.floor(Math.random() * 5) + 100
1080          span += "<span class=\"letter shake-constant shake-little\" style=\"animation-duration: " + duration + "ms\">";
1081          span += div[j].innerText[i] == " " ? "&nbsp;" : div[j].innerText[i];
1082          span += "</span>";
1083      }
1084      crazyTexts.push(span);
1085  }
1086
1087  opacities = document.querySelectorAll("#rant > span.shake-opacity");
1088  for (k = 0; k < opacities.length; k++) {
1089      shrek=Math.random();
1090      opacities[k].style.animationDuration = shrek + 's';
1091      opacyTexts.push(opacities[k].outerHTML);
1092  }
1093
1094  allText = ""
1095  for (l = 0; l< crazyTexts.length; l++) {
1096      allText+=crazyTexts[l] + (opacyTexts[l] ? opacyTexts[l] : "");
1097  }
1098
1099  document.getElementById('rant').innerHTML = allText;
1100
1101  var x = 0;
1102  var y = 0;
1103  var b = document.querySelectorAll('body')[0];
1104  setInterval(function(){
1105      x+=2;
1106      y-=2;
1107
1108      b.style.backgroundPosition = x + 'px ' + y + 'px';
1109  }, 250);
1110
1111  urlParts = document.URL.split('#');
1112
1113  var currentSlide = urlParts.length > 1 ? urlParts[1] : 0;
1114  var bc = new BroadcastChannel('test_channel');
1115  document.getElementById('slide-' + currentSlide).style.display = 'block';
1116  document.onkeydown = checkKey;
1117
1118  notes = document.querySelectorAll('#slide-' + currentSlide + ' .notes');
1119  if(!!notes[0]) {1
1120      bc.postMessage(notes[0].innerHTML);
1121  }
1122
1123  numSlides = document.querySelectorAll('div[id^="slide-"]').length;
1124
1125  function checkKey(e) {
1126
1127      e = e || window.event;
1128      if (e.keyCode == '37') {
1129          if (document.getElementById('slide-' + currentSlide)) {
1130              document.getElementById('slide-' + currentSlide).style.display = 'none';
1131          }
1132          currentSlide--;
1133          document.getElementById('slide-' + currentSlide).style.display = 'block';
1134
1135          notes = document.querySelectorAll('#slide-' + currentSlide + ' .notes');
1136          if(!!notes[0]) {
1137              bc.postMessage(notes[0].innerHTML);
1138          } else {
1139              bc.postMessage("");
1140          }
1141      }
1142      else if (e.keyCode == '39') {
1143          if (document.getElementById('slide-' + currentSlide)) {
1144              document.getElementById('slide-' + currentSlide).style.display = 'none';
1145          }
1146          currentSlide++;
1147          document.getElementById('slide-' + currentSlide).style.display = 'block';
1148
1149          notes = document.querySelectorAll('#slide-' + currentSlide + ' .notes');
1150          if(!!notes[0]) {
1151              bc.postMessage(notes[0].innerHTML);
1152          } else {
1153              bc.postMessage("");
1154          }
1155
1156      }
1157
1158      document.location.hash = currentSlide;
1159      if (currentSlide == 1 || currentSlide == numSlides) {
1160          confetti.start();
1161      } else {
1162          confetti.stop();
1163      }
1164  }
1165
1166
1167  function activateFriends(n, noshake) {
1168      f = document.querySelectorAll('.code-friends' + n);
1169
1170      for (fr = 0; fr< f.length; fr++) {
1171          if (!noshake) {
1172              f[fr].classList.add("shake-constant");
1173              f[fr].classList.add("shake-slow");
1174          }
1175          f[fr].classList.add("on");
1176      }
1177  }
1178
1179  function deactivateFriends(n) {
1180      f = document.querySelectorAll('.code-friends' + n);
1181      for (fr = 0; fr< f.length; fr++) {
1182          f[fr].classList.remove("shake-constant");
1183          f[fr].classList.remove("shake-slow");
1184          f[fr].classList.remove("on");
1185      }
1186  }
1187
1188  function activatePromise(n) {
1189      p = document.querySelectorAll('.promise' + n);
1190      for (fr = 0; fr< p.length; fr++) {
1191          p[fr].classList.add('on');
1192      }
1193  }
1194
1195  function deactivatePromise(n) {
1196      p = document.querySelectorAll('.promise' + n);
1197      for (fr = 0; fr< p.length; fr++) {
1198          p[fr].classList.remove('on');
1199      }
1200  }
1201
1202  cloudGuyQuotes = [
1203      "Welcome to the talk!",
1204      "I hope we'll have fun exploring functional programming together!",
1205      "But while we wait let's share interesting facts and anectodes :)",
1206      "If you can be disgruntled, can you also be gruntled?",
1207      "0.9 recurring is exactly equal to one if you think about it.",
1208      "In English, the word \"ghoti\" can be pronounced as \"fish\".",
1209      "Your credit card details are somewhere in Pi.",
1210      "It takes 366 people to make sure two of them share a birthday, but only 23 people to ensure a 50% chance.",
1211      "1729 is the best number (I checked them all).",
1212      "The secret to strengh is to eat only a banana for breakfast.",
1213      "All of Back to the Future happened in the past.",
1214      "Everything is in the future.",
1215      "We owe functional and procedural programming to the pre-Socratics, Heraclitus and Anaximander respectively.",
1216      "Preservative has a very different meaning in many European languages",
1217      "There are more stars in our galaxy than there are atoms in The Universe"
1218  ];
1219
1220  cgq = document.getElementById("cgquotes");
1221  numQuotes = cloudGuyQuotes.length;
1222  currentQuote = 0;
1223  setInterval(function(){
1224      if (currentQuote == 0 || currentQuote == 1) {
1225          currentQuote++;
1226      } else {
1227          currentQuote = Math.floor(Math.random()*(cloudGuyQuotes.length - 3)) + 3;
1228          console.log(currentQuote);
1229      }
1230
1231      cgq.innerText = cloudGuyQuotes[currentQuote];
1232  }, 10000);
1233
1234  helperQuotes = [
1235      "Let's go!",
1236      "Here to help!",
1237      "Aw yeah!",
1238      "Power!",
1239      "Teamwork!",
1240      "Let's code!",
1241      "Friendship!",
1242      "Bananas",
1243      "Bagels",
1244      "Coffee"
1245  ];
1246
1247  function animateCSS(element, animationName, callback) {
1248      const node = element;
1249      node.classList.add('animated', animationName)
1250
1251      function handleAnimationEnd() {
1252          node.classList.remove('animated', animationName)
1253          node.removeEventListener('animationend', handleAnimationEnd)
1254          node.style.opacity = '0';
1255          if (typeof callback === 'function') callback()
1256      }
1257
1258      node.addEventListener('animationend', handleAnimationEnd)
1259  }
1260
1261  helpers = document.querySelectorAll("#cloudguys span");
1262  setInterval(function(){
1263      quote = Math.floor(Math.random()*(helperQuotes.length));
1264      helper = Math.floor(Math.random()*(helpers.length));
1265      helpers[helper].innerText = helperQuotes[quote];
1266      animateCSS(helpers[helper], 'fadeOutUp');
1267  }, 1000);
1268
1269
1270  angeries = document.querySelectorAll(".angereyWrap");
1271  usedPositions = [];
1272  shakes = ["shake", "shake-hard", "shake-slow", "shake-little", "shake-horizontal", "shake-vertical", "shake-rotate", "shake-opacity", "shake-crazy", "shake-chunk"];
1273  for (a = 0; a < angeries.length; a++) {
1274      randomness = (Math.round(Math.random() * 10) + 1) * -10;
1275      angeries[a].style.top = ((a > 4) ? (-180-randomness) : (180 + randomness)) + "%" ;
1276      thing = ((Math.floor(Math.random() * 10) + 1) * 9) + "%";
1277
1278      while (usedPositions.includes(thing)) {
1279          thing = ((Math.floor(Math.random() * 10) + 1) * 9) + "%";
1280      }
1281
1282      angeries[a].style.left = thing;
1283      angeries[a].classList.add("shake-constant");
1284      angeries[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
1285      usedPositions.push(thing);
1286  }
1287
1288  thonkings = document.querySelectorAll(".thonkingWrap");
1289  shakes = ["shake-slow", "shake-little", "shake-opacity"];
1290  usedPositions = [];
1291  for (a = 0; a < thonkings.length; a++) {
1292      thing = Math.floor(Math.random() * 4) + 1;
1293      randomnessX = -(Math.round(Math.random() * 100) + 1);
1294      randomnessY = -(Math.round(Math.random() * 50) + 1);
1295
1296      while (usedPositions.includes(thing)) {
1297          thing = Math.floor(Math.random() * 4) + 1;
1298      }
1299
1300      switch(thing) {
1301          case 1:
1302              thonkings[a].style.left = randomnessX + 'px';
1303              thonkings[a].style.top = randomnessY + 'px';
1304              thonkings[a].children[0].style.transform = 'rotate(-40deg) scale(1, 1.5)'
1305              thonkings[a].classList.add("shake-constant");
1306              thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
1307              break;
1308          case 2:
1309              thonkings[a].style.right = randomnessX + 'px';
1310              thonkings[a].style.top = randomnessY + 'px';
1311              thonkings[a].classList.add("shake-constant");
1312              thonkings[a].children[0].style.transform = 'rotate(40deg) scale(1, 1.5)'
1313              thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
1314              break;
1315          case 3:
1316              thonkings[a].style.right = randomnessX + 'px';
1317              thonkings[a].style.bottom = randomnessY + 'px';
1318              thonkings[a].classList.add("shake-constant");
1319              thonkings[a].children[0].style.transform = 'rotate(-215deg) scale(1, 1.5)'
1320              thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
1321              break;
1322          case 4:
1323              thonkings[a].style.left = randomnessX + 'px';
1324              thonkings[a].style.bottom = randomnessY + 'px';
1325              thonkings[a].classList.add("shake-constant");
1326              thonkings[a].children[0].style.transform = 'rotate(215deg) scale(1, 1.5)'
1327              thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
1328              break;
1329      }
1330
1331
1332      usedPositions.push(thing);
1333  }
1334
1335 </script>
1336 </html>