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 href="https://fonts.googleapis.com/css?family=Press+Start+2P&amp;display=swap" rel="stylesheet">
   6     <link rel="stylesheet"
   7           href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css">
   8     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
   9     <script>hljs.initHighlightingOnLoad();</script>
  10     <script src="js/confetti.min.js"></script>
  11     <title>Wide-Eyed Crazy Functional Programming</title>
  12     <style>
  13      body {
  14          margin: 0px;
  15          font-family: 'Press Start 2P', cursive;
  16          color: white;
  17          text-shadow:
  18              1px 1px 0 #000;
  19          background-color: #f98012;
  20          background-image: url("img/tile.png");
  21          background-repeat: repeat;
  22          background-size: 10%;
  23          image-rendering: crisp-edges;
  24          background-position-x: -33px;
  25          background-blend-mode: multiply;
  26          font-size: 22px;
  27      }
  28
  29      .angereyWrap {
  30          position: absolute;
  31          color: #cc0000;
  32      }
  33
  34      .angerey {
  35          letter-spacing: -20px;
  36          transform: rotate(90deg) scale(1, 1.5);
  37      }
  38
  39      .thonkingWrap {
  40          position: absolute;
  41      }
  42
  43      .hljs {
  44          font-family: 'Press Start 2P', cursive;
  45          text-shadow: 2px 2px 0 #000;
  46          font-size: 30px;
  47          overflow: hidden;
  48      }
  49
  50      h1, h2 {
  51          text-shadow: 2px 2px 0 #000;
  52      }
  53
  54      .slide-title {
  55          font-size: 40px;
  56          margin: 20px;
  57          text-shadow: 10px 10px 0 #00000069;
  58          text-align: center;
  59      }
  60
  61      .slide {
  62          margin: 40px;
  63          box-shadow: 10px 10px 0 #00000069;
  64          padding: 20px;
  65          height: 80%;
  66          background: #6187a8e3;
  67      }
  68
  69      .flexotron {
  70          display: flex;
  71          justify-content: center;
  72          align-items: center;
  73          flex-wrap: wrap;
  74      }
  75
  76      #cloudguy, #cloudguy2 {
  77          height: 100%;
  78          display: flex;
  79          justify-content: center;
  80          align-items: center;
  81          flex-wrap: wrap;
  82      }
  83
  84      .cloudguypower {
  85          height: 24%;
  86      }
  87
  88      #cloudguys {
  89          height: 30%;
  90          width: 100%;
  91          display: flex;
  92          justify-content: space-around;
  93          text-align:center
  94
  95      }
  96
  97      #cloudguys img {
  98          height: 100%;
  99      }
 100
 101      #cloudguys div {
 102          width: 20%;
 103          max-width: 20%;
 104      }
 105
 106      #cloudguys span {
 107          display: block;
 108          opacity: 0;
 109      }
 110
 111      #cgquotes, #cloudguy2 > div > div {
 112          font-size: 30px;
 113          text-shadow: 2px 2px 0 #000;
 114      }
 115
 116      .idk div {
 117          display: flex;
 118          width: 40%;
 119      }
 120
 121      li {
 122          list-style: square;
 123      }
 124
 125      img {
 126          image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
 127          image-rendering: -moz-crisp-edges;          /* Firefox                        */
 128          image-rendering: -o-crisp-edges;            /* Opera                          */
 129          image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
 130          image-rendering: pixelated; /* Chrome */
 131          image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
 132          -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
 133      }
 134
 135      .fig {
 136          text-align: center;
 137      }
 138
 139      #rant .shake-constant, .crazy, .span {
 140          display: inline-block;
 141      }
 142
 143      #rant .shake-opacity {
 144          color: #f98012;
 145      }
 146
 147      #rant {
 148          padding: 20px;
 149          height: 80%;
 150          font-size: 14px;
 151      }
 152
 153      .textbox {
 154          text-align: center;
 155          box-shadow: 10px 10px 0 #00000069;
 156          border: 2px solid black;
 157          background-color: #3f6382;
 158          padding: 5px;
 159      }
 160
 161      .hljs {
 162          box-shadow: 10px 10px 0 #00000069;
 163          border: 2px solid black;
 164      }
 165
 166      div[id^="slide-"] {
 167          display: none;
 168      }
 169
 170      span[class^="code-friends"].on, span[class^="code-friends"].on > span, span[class^="code-friends"].on > span > span {
 171          color: #f98012 !important;
 172      }
 173
 174      span[class^="promise"].on, span[class^="promise"].on > span, span[class^="promise"].on > span > span, span[class^="promise"].on > span > span > span {
 175          color: #f98012 !important;
 176      }
 177
 178      .highlight {
 179          color: #f98012;
 180      }
 181
 182      li {
 183          margin-top: 10px;
 184      }
 185
 186      .notes {
 187          display: none;
 188      }
 189
 190     </style>
 191 </head>
 192 <body>
 193     <div id="slide-0">
 194         <div id="cloudguy">
 195             <div style="height: 20%; text-align: center;">
 196                 <img style="height: 100%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src="img/cloudguy.gif" />
 197                 <div id="cgquotes" style="width: 80%; margin: auto;">Welcome to the talk!</div>
 198             </div>
 199         </div>
 200         <div class="notes" >
 201             <ul>
 202                 <li>Thanks for the opporunity to talk about programming with you all</li>
 203             </ul>
 204         </div>
 205     </div>
 206     <div id="slide-1">
 207         <div class="slide-title">=<< Welcome to the Talk Called >>=</div>
 208         <div class="slide flexotron" style="flex-wrap: nowrap;">
 209             <img class="cloudguypower" style="margin-left: 70px;" src="img/cloudguy-power.gif" />
 210             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;">Wide-Eyed Crazy Functional Programming</div>
 211             <img class="cloudguypower" style="margin-right: 70px; transform: scaleX(-1);" src="img/cloudguy-power.gif" />
 212         </div>
 213     </div>
 214     <div id="slide-2">
 215         <div class="slide-title">=<< What's up with that Title? >>=</div>
 216         <div class="slide">
 217         </div>
 218         <div class="notes">
 219             <ul>
 220                 <li>A few people asked me about the title, so I thought I'd clear up what it means</li>
 221             </ul>
 222         </div>
 223     </div>
 224     <div id="slide-3">
 225         <div class="slide-title">=<< What's up with that Title? >>=</div>
 226         <div class="slide flexotron idk">
 227             <div style="justify-content: right;">
 228                 <img class="shake-constant shake" src="img/wide-eyed-crazy.png" style="width: 70%; margin-right: 10%;">
 229             </div>
 230             <div style="justify-content: left">
 231                 <div style="display: flex; align-items: center; width: 70%">
 232                     <div id="rant" class="textbox" style="display: block;height: auto; width:100%; margin-left:10%;">
 233                         <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>
 234                     </div>
 235                 </div>
 236             </div>
 237             <div class="fig">Fig 1.1 What most people thing a typical functional programming advocate looks like</div>
 238         </div>
 239         <div class="notes">
 240             <ul>
 241                 <li>Regarded as eccentric crazies with wild ideas</li>
 242                 <li>Spout nonsense like "monads" every 2 seconds</li>
 243                 <li>Often bald</li>
 244             </ul>
 245         </div>
 246     </div>
 247     <div id="slide-4">
 248         <div class="slide-title">=<< Obligatory Quote >>=</div>
 249         <div class="slide">
 250         </div>
 251         <div class="notes">
 252             <ul>
 253                 <li>Before I get to far in to it, I want to add some framing to the talk</li>
 254                 <li>My goal is not to teach you functional programming, my goal is to spark some curiosityt</li>
 255             </ul>
 256         </div>
 257     </div>
 258     <div id="slide-5">
 259         <div class="slide-title">=<< Obligatory Quote >>=</div>
 260         <div class="slide flexotron">
 261             <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.</div>
 262         </div>
 263         <div class="notes">
 264             <ul>
 265                 <li>Before I get to far in to it, I want to add some framing to the talk</li>
 266                 <li>My goal is not to teach you functional programming, my goal is to spark some curiosityt</li>
 267                 <li>And I think this obligatory quote (every good talk has a quote) conveys the framework I used when writing these slides</li>
 268                 <li>Also we like boats and ships and stuff like that here, so make sense I guess.</li>
 269             </ul>
 270         </div>
 271     </div>
 272     <div id="slide-6">
 273         <div class="slide-title">=<< Obligatory Quote >>=</div>
 274         <div class="slide flexotron">
 275             <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>
 276         </div>
 277         <div class="notes">
 278             <ul>
 279                 <li>Before I get to far in to it, I want to add some framing to the talk</li>
 280                 <li>My goal is not to teach you functional programming, my goal is to spark some curiosityt</li>
 281                 <li>And I think this obligatory quote (every good talk has a quote) conveys the framework I used when writing these slides</li>
 282                 <li>Also we like boats and ships and stuff like that here, so make sense I guess.</li>
 283                 <li>And of course, don't forget attribution. So that everyone knows you're cultured and read important things</li>
 284                 <li>With that in mind, don't take any code examples too seriously, they are to demonstrate the big picture idea.</li>
 285             </ul>
 286         </div>
 287     </div>
 288     <div id="slide-7">
 289         <div class="slide-title">=<< What is this Talk About? >>=</div>
 290         <div class="slide">
 291         </div>
 292         <div class="notes">
 293             <ul>
 294                 <li>So what is this talk about?</li>
 295                 <li>Let me start by telling you some things it is not about</li>
 296                 <li>Which is something you're not supposed to do as an educator but whatever</li>
 297             </ul>
 298         </div>
 299     </div>
 300     <div id="slide-8">
 301         <div class="slide-title">=<< What is this Talk About? >>=</div>
 302         <div class="slide">
 303             <h1>This talk is <span class="highlight">not</span> about:</h1>
 304             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 305                 <ul>
 306                     <li>Haskell</li>
 307                     <li>Convincing you to stop using whichever language you like</li>
 308                     <li>Mathematics</li>
 309                 </ul>
 310             </div>
 311         </div>
 312         <div class="notes">
 313             <ul>
 314                 <li>So what is it about?</li>
 315                 <li>When trying to explain to someone why they should learn functional programming, there are many perspectives to try explain it from.</li>
 316                 <li>For this discussion, I've settled on a very meta one. Perspective itself.</li>
 317             </ul>
 318         </div>
 319     </div>
 320     <div id="slide-9">
 321         <div class="slide-title">=<< What is this Talk About? >>=</div>
 322         <div class="slide flexotron">
 323             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Perspective</div>
 324         </div>
 325         <div class="notes">
 326             <ul>
 327                 <li>As said, this is not a talk about haskell, it's about viewing programming through different perspectives"</li>
 328                 <li>Please ask questions as we go!</li>
 329                 <li>Let's start the talk!</li>
 330             </ul>
 331         </div>
 332     </div>
 333     <div id="slide-10">
 334         <div class="slide-title">=<< What is Functional Programming? >>=</div>
 335         <div class="slide">
 336         </div>
 337     </div>
 338     <div id="slide-11">
 339         <div class="slide-title">=<< What is Functional Programming? >>=</div>
 340         <div class="slide flexotron">
 341             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Programming with functions.</div>
 342         </div>
 343     </div>
 344     <div id="slide-12">
 345         <div class="slide-title">=<< What is Functional Programming? >>=</div>
 346         <div class="slide flexotron">
 347             <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>
 348         </div>
 349     </div>
 350     <div id="slide-13">
 351         <div class="slide-title">=<< What is a Function? >>=</div>
 352         <div class="slide"></div>
 353     </div>
 354     <div id="slide-14">
 355         <div class="slide-title">=<< What is a Function? >>=</div>
 356         <div class="slide flexotron">
 357             <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>
 358         </div>
 359         <div class="notes">
 360             <ul>
 361                 <li>It's important to understand that that's it.</li>
 362                 <li>This is different to functions in procedural languages - actually the name "function" is a misnomer in that context. Really they should be called prodedures or subroutines (hence the name procedural)</li>
 363                 <li>A function is a mapping. It's equivalent to something like an array in PHP. It associates one value to another one</li>
 364                 <li>In the same way that a PHP array cannot mutate state, a function cannot</li>
 365                 <li>What I'm describing are actually pure functions, but for the rest of the talk I'll just be saying "functions"</li>
 366                 <li>This has some interesting consequences...</li>
 367             </ul>
 368         </div>
 369     </div>
 370     <div id="slide-15">
 371         <div class="slide-title">=<< What is a Function? >>=</div>
 372         <div class="slide">
 373             <h1>No equivalent constructs for:</h1>
 374             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 375                 <ul>
 376                     <li>For loops</li>
 377                     <li>While loops</li>
 378                     <li>Gotos</li>
 379                     <li>Variables*</li>
 380                     <li>Probably a bunch of other constructs I forgot</li>
 381                 </ul>
 382             </div>
 383             <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>
 384         </div>
 385     </div>
 386     <div id="slide-16">
 387         <div class="slide-title">=<< Huh? >>=</div>
 388         <div class="slide"></div>
 389         <div class="notes">
 390             <ul>
 391                 <li>And of course this all begs the question....</li>
 392             </ul>
 393         </div>
 394
 395     </div>
 396     <div id="slide-17">
 397         <div class="slide-title">=<< Huh? >>=</div>
 398         <div class="slide flexotron">
 399             <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>
 400         </div>
 401         <div class="notes">
 402             <ul>
 403                 <li>You're trying to tell me FP is awesome be because it has ... less features?</li>
 404                 <li>This is true, but it makes no difference. You can accomplish anything in FP that you can accomplish in a procedural language</li>
 405             </ul>
 406         </div>
 407     </div>
 408     <div id="slide-18">
 409         <div class="slide-title">=<< Huh? >>=</div>
 410         <div class="slide">
 411             <h1>Why tho?</h1>
 412             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 413                 <ul>
 414                     <li>Learning is good</li>
 415                     <li>Brain plasticity</li>
 416                     <li>Greater perspective</li>
 417                 </ul>
 418             </div>
 419         </div>
 420         <div class="notes">
 421             <ul>
 422                 <li>The best answer I can give is, "learning is good". I think that's something everyone at moodle can agree on</li>
 423                 <li>Learning FP 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>
 424                 <li>It will also make the math/logic part of your brain very buff</li>
 425                 <li>As we know, the brain has 3 main cortexes. The passion cortex, the power cortext, and the logic cortex</li>
 426                 <li>As programmers we need to engorge mostly the logic cortext, but also the passion cortex - as this is a profession that involves other people.</li>
 427                 <li>Communicating about programs written in the functional style is actually easier than the programs written in the procedural style. More on that later</li>
 428                 <li>And lets not forget that our very own MoodleNet is written in Elixir. A functional language.</li>
 429             </ul>
 430         </div>
 431     </div>
 432     <div id="slide-19">
 433         <div class="slide-title">=<< Paradigms >>=</div>
 434         <div class="slide flexotron">
 435             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Paradigms</div>
 436         </div>
 437         <div class="notes">
 438             <ul>
 439                 <li>Let's talk about paradigms for a bit</li>
 440                 <li>In particular, let's talk about the two most widely used paradigms. Which also happen to be the most at odds</li>
 441             </ul>
 442         </div>
 443     </div>
 444     <div id="slide-20">
 445         <div class="slide-title">=<< Paradigms >>=</div>
 446         <div class="slide flexotron">
 447             <div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px;">
 448                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Declarative</span>
 449                 <div class="textbox" style="position: relative; width: 80%; height: 60%;">
 450                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Functional</span>
 451                     <ul style="text-align: left; margin-top: 65px;margin-left: 40px;">
 452                         <li>Haskell</li>
 453                         <li>Elm</li>
 454                         <li>Elixir</li>
 455                         <li>Clojure</li>
 456                     </ul>
 457                 </div>
 458             </div>
 459             <div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px;">
 460                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Imperative</span>
 461                 <div class="textbox" style="position: relative; width: 80%; height: 60%;">
 462                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Procedural</span>
 463                     <ul style="text-align: left; margin-top: 65px;margin-left: 40px;">
 464                         <li>PHP</li>
 465                         <li>C</li>
 466                         <li>Java</li>
 467                         <li>DamoScript</li>
 468                     </ul>
 469                 </div>
 470             </div>
 471         </div>
 472         <div class="notes">
 473             <ul>
 474                 <li>So here they are. Declaritive and imperative, and inside those we see sub-paradigms (there are more, for example SQL is declaritive but not functional, and Assembly is imperative but not procedural - although the vast majority of imperative languages are indeed procedural):</li>
 475                 <li>And then inside the boxes we see some examples of language that embody that paradigm</li>
 476                 <li>For the purposes of this talk it's probably OK to just think of declaritive and functional as interchangeable, and some for imperative and procedural. I'll probably mix them up</li>
 477                 <li>So why am I showing this? Well, let's look at this through a different perspective... Some of you might have realised that imperative and declaritive are both words used to describe human language, and that's relevant</li>
 478                 <li>Learning a new paradigm is beneficial the same way learning a new human language is</li>
 479             </ul>
 480         </div>
 481     </div>
 482     <div id="slide-21">
 483         <div class="slide-title">=<< Gramatical Mood >>=</div>
 484         <div class="slide flexotron">
 485             <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 486                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Declarative</span>
 487                 A sentence which expresses a statement of fact.
 488                 <ul style="text-align: left; margin-top: 65px;margin-left: 40px;">
 489                     <li>He runs.</li>
 490                     <li>I like climbing.</li>
 491                     <li>Ice is cold.</li>
 492                     <li>Mathieu is shredded.</li>
 493                 </ul>
 494             </div>
 495             <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 496                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Imperative</span>
 497                 <span>A sentence which expresses instructions, or requests.</span>
 498                 <ul style="text-align: left; margin-top: 65px;margin-left: 40px;">
 499                     <li>Shut the door.</li>
 500                     <li>Don't eat my burger.</li>
 501                     <li>Let's go to the pub.</li>
 502                     <li>Don't make eye contact with Craig.</li>
 503                 </ul>
 504             </div>
 505         </div>
 506         <div class="notes">
 507             <ul>
 508                 <li>We can see here that in the declaritive mood you express statements of fact. They aren't instrcutions</li>
 509                 <li>Contrast this with the imperative style of expression where there is a very clear instruction to carry out</li>
 510             </ul>
 511         </div>
 512     </div>
 513     <div id="slide-22">
 514         <div class="slide-title">=<< Gramatical Mood >>=</div>
 515         <div class="slide flexotron">
 516             <div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 517                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Declarative</span>
 518                 This is this.
 519             </div>
 520             <div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 521                 <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Imperative</span>
 522                 Do this.
 523             </div>
 524         </div>
 525         <div class="notes">
 526             <ul>
 527                 <li>To make it more concise... here's the smallest definition I can think of</li>
 528                 <li>And this applies to programs too. In the functional paradigm we no longer have the "instruction words" - things like, for, while, goto, variable reassignment</li>
 529             </ul>
 530         </div>
 531     </div>
 532     <div id="slide-23">
 533         <div class="slide-title">=<< Big Brain Moment >>=</div>
 534         <div class="slide"></div>
 535         <div class="notes">
 536             <ul>
 537                 <li>And that brings us to the first of hopefully many "Big Brain Moments"</li>
 538             </ul>
 539         </div>
 540     </div>
 541     <div id="slide-24">
 542         <div class="slide-title">=<< Big Brain Moment >>=</div>
 543         <div class="slide flexotron">
 544             <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>
 545         </div>
 546         <div class="notes">
 547             <ul>
 548                 <li>We don't write programs for computers - we write programs for other humans.</li>
 549             </ul>
 550         </div>
 551     </div>
 552     <div id="slide-25">
 553         <div class="slide-title">=<< Why is declaritive mood good? >>=</div>
 554         <div class="slide">
 555         </div>
 556         <div class="notes">
 557             <ul>
 558                 <li>But in both cases, it seems like we lose something useful in the declaritive mode. What do we get by giving up these things?</li>
 559                 <li>Surely giving instructions is useful, otherwise how do you do anything?!</li>
 560             </ul>
 561         </div>
 562     </div>
 563     <div id="slide-26">
 564         <div class="slide-title">=<< Why is declaritive mood good? >>=</div>
 565         <div class="slide flexotron">
 566             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Atemporality</div>
 567         </div>
 568     </div>
 569     <div id="slide-27">
 570         <div class="slide-title">=<< Why is declaritive mood good? >>=</div>
 571         <div class="slide flexotron">
 572             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Independant of or unaffected by time.</div>
 573         </div>
 574     </div>
 575     <div id="slide-28">
 576         <div class="slide-title">=<< Why is declaritive mood good? >>=</div>
 577         <div class="slide flexotron">
 578             <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>
 579         </div>
 580         <div class="notes">
 581             <ul>
 582                 <li>A declaritive program expresses its operation in terms of relationships.</li>
 583                 <li>In an imperative paradigm, thinking about the program means thinking about changes over time => keeping track of changes</li>
 584                 <li>In a declaritive one, thinking about the program means thinking about relationships => look at what the thing is, how it relates to the other thing, and move on</li>
 585             </ul>
 586         </div>
 587     </div>
 588     <div id="slide-29">
 589         <div class="slide-title">=<< To Recap >>=</div>
 590         <div class="slide">
 591             <h1>Why tho?</h1>
 592             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 593                 <ul>
 594                     <li>Because sometimes there is such a thing as too much freedom</li>
 595                     <li>Functional programming is awesome because it stops you shooting yourself in the foot</li>
 596                     <li>"Constraints liberate, liberties constrain"</li>
 597                     <li>There are also classes of problems where the declaritive style is a more elegant way of expressing the solution</li>
 598                 </ul>
 599             </div>
 600             <div class="notes">
 601                 <ul>
 602                     <li>Some problems are simply very difficult to solve in an imperative way.</li>
 603                     <li>Especially when we are talking about events that are happening in parallel and may run at different speed/times</li>
 604                     <li>In the imperative paradigm, you quite easily come up against data races by virtue of the way the program is expressed</li>
 605                 </ul>
 606             </div>
 607         </div>
 608     </div>
 609     <div id="slide-30">
 610         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 611         <div class="slide">
 612         </div>
 613         <div class="notes">
 614             <ul>
 615                 <li>At this point I imagine a lot of you are thinking....</li>
 616             </ul>
 617         </div>
 618     </div>
 619     <div id="slide-31">
 620         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 621         <div class="slide flexotron">
 622             <div style="text-align:center; font-size:50px; text-shadow: 4px 4px #000; padding:20px;" >Enough of this philosophy and linguistics mumbo jumbo, already!</div>
 623         </div>
 624     </div>
 625     <div id="slide-32">
 626         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 627         <div class="slide">
 628             <h1>My favourite example</h1>
 629             <h2>Consider:</h2>
 630             <div style="display: flex;">
 631                 <pre style="margin: auto;"><code style="font-size: 20px;"><span class="code-friends1 code-friends4">x = x + 1;</span></code></pre>
 632             </div>
 633             <div style="display: flex; margin-top: 20px; margin-bottom: 20px;">
 634                 <span style="margin: auto;">and:</span>
 635             </div>
 636             <div style="display: flex; margin-bottom:50px;">
 637                 <pre style="margin: auto;"><code style="font-size: 20px;"><span class="code-friends2 code-friends3">function repeat(x) {
 638     return x + repeat(x);
 639 }</span></code></pre>
 640             </div>
 641             <h2>OK, so what?</h2>
 642             <div style="display: flex;">
 643                 <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>
 644             </div>
 645         </div>
 646     </div>
 647     <div id="slide-33">
 648         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 649         <div class="slide">
 650             <div style="display: flex; margin-top: 50px;">
 651                 <pre style="margin: auto;"><code style="font-size: 20px;">x = x + 1;</code></pre>
 652             </div>
 653             <div class="flexotron" style="height: 80%;">
 654                 <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 655                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Declarative</span>
 656                     "x is the same as itself plus one."<br /><br /><br /><br /><br />
 657                     Complete nonsense!
 658                 </div>
 659                 <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 660                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Imperative</span>
 661                     "Evaluate the thing on the right of `=` then store it in the thing on the left of `=`."<br /><br /><br />
 662                     A list of instructions that can be followed.
 663                 </div>
 664             </div>
 665         </div>
 666     </div>
 667     <div id="slide-34">
 668         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 669         <div class="slide">
 670             <div style="display: flex; margin-top: 50px;">
 671                 <pre style="margin: auto;"><code style="font-size: 20px;">function repeat(x) {
 672     return x + repeat(x);
 673 }</code></pre>
 674             </div>
 675             <div class="flexotron" style="height: 80%;">
 676                 <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 30px;">
 677                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Declarative</span>
 678                     "The repeat of `x` is `x` appended to the repeat of `x`"<br /><br /><br />
 679                     An infinite list of `x`!
 680                 </div>
 681                 <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
 682                     <span class="textbox" style="box-shadow: none; position: absolute; top:  -20px; left: 30px;">Imperative</span>
 683                     "To evaluate the repeate of `x`, first evaluate the repeat of `x`"<br /><br /><br />
 684                     ...Yeah, you see the problem?
 685                 </div>
 686             </div>
 687         </div>
 688     </div>
 689     <div id="slide-35">
 690         <div class="slide-title">=<< Big Brain Moment >>=</div>
 691         <div class="slide flexotron">
 692             <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>
 693         </div>
 694         <div class="notes">
 695             <ul>
 696                 <li>Let's take this time to reflect...</li>
 697                 <li>Imperative tells you what to do</li>
 698                 <li>Declaritive tells you what things are</li>
 699             </ul>
 700         </div>
 701     </div>
 702     <div id="slide-36">
 703         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 704         <div class="slide">
 705             <h1>Real Haskell code that runs</h1>
 706             <pre><code class="haskell">repeat x = x ++ repeat x
 707 threeFs = take 3 (repeat "f")
 708
 709 > "fff"
 710             </code></pre>
 711         </div>
 712         <div class="notes">
 713             <ul>
 714                 <li>Let's think about the way this is understood</li>
 715                 <li>threeFs is the first three elements in an infinite list of fs - totally fine, makes complete sense</li>
 716                 <li>Shame that the function name is "take" but whatever</li>
 717             </ul>
 718         </div>
 719     </div>
 720     <div id="slide-37">
 721         <div class="slide-title">=<< Some Code (Finally) >>=</div>
 722         <div class="slide">
 723             <h1>Real JavaScript code that hangs</h1>
 724             <pre><code class="javascript">function repeat(x) {
 725     return x + repeat(x);
 726 }
 727
 728 threeFs = repeat("f").substr(0,3);
 729
 730 > InternalError: too much recursion
 731             </code></pre>
 732         </div>
 733         <div class="notes">
 734             <ul>
 735                 <li>By contrast, this reads as "First compute an infinite list of fs" - which as we saw before was a problem. And even that human sentence clearly has a problem.</li>
 736             </ul>
 737         </div>
 738     </div>
 739     <div id="slide-38">
 740         <div class="slide-title">=<< Big Brain Moment >>=</div>
 741         <div class="slide">
 742             <h1>What did declaritive mode give us?</h1>
 743             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 744                 <ul>
 745                     <li>Atemporality</li>
 746                     <li>The ability to wield infinity!</li>
 747                 </ul>
 748             </div>
 749         </div>
 750         <div class="notes">
 751             <ul>
 752                 <li>Big brain moment two!</li>
 753                 <li>How cool is that? Because we can express what things are, we can express an infininte list!</li>
 754                 <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>
 755             </ul>
 756         </div>
 757     </div>
 758     <div id="slide-39">
 759         <div class="slide-title">=<< Promises >>=</div>
 760         <div class="slide flexotron">
 761             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Promises</div>
 762         </div>
 763         <div class="notes">
 764             <ul>
 765                 <li>Let's think about promises...</li>
 766                 <li>Seems like an odd tangent but let's go with it</li>
 767                 <li>And just as before, I'm gonna break one of the carinal rules of teaching by telling you what promises are not...</li>
 768             </ul>
 769         </div>
 770     </div>
 771     <div id="slide-40">
 772         <div class="slide-title">=<< Promises >>=</div>
 773         <div class="slide flexotron">
 774             <div style="position: relative; text-align:center; font-size:40px; text-shadow: 4px 4px #000;" >
 775                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 776                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 777                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 778                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 779                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 780                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 781                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 782                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 783                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 784                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 785                 Promises <span class="shake-slow shake-constant" style="display: inline-block; color: #f98012">do not</span> make things asynchronous!</div>
 786         </div>
 787         <div class="notes">
 788             <ul>
 789                 <li>So there's a lot of misleading information out there about promises</li>
 790                 <li>Some people believe that promises "make" things asynchronous, but this isn't true</li>
 791                 <li>You can have perfectly synchronous promises, the thing you pass as a callbackto a promise does not get "run in the background" or anything like that</li>
 792             </ul>
 793         </div>
 794     </div>
 795     <div id="slide-41">
 796         <div class="slide-title">=<< Promises >>=</div>
 797         <div class="slide">
 798             <h1>The real promises</h1>
 799             <h2>What problems do promises solve?</h2>
 800             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 801                 <ul>
 802                     <li>Asynchronous request management</li>
 803                     <li>Error handling for computations which may fail</li>
 804                     <li>Probably more too</li>
 805                 </ul>
 806             </div>
 807             <h2 style="margin-top: 50px;">What are promises then?</h2>
 808             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 809                 <ul>
 810                     <li>A value (which may or may not be available yet) wrapped in some additional context</li>
 811                     <li>Functions to instantiate the wrapper (`Promise.resolve`, `Promise.reject`)</li>
 812                     <li>A rule for composing these wrapped values (`then`)</li>
 813                 </ul>
 814             </div>
 815         </div>
 816     </div>
 817     <div id="slide-42">
 818         <div class="slide-title">=<< Promises >>=</div>
 819         <div class="slide">
 820             <h1>Terminology/syntax recap</h1>
 821             <h2>JavaScript arrow functions</h2>
 822             <div style="display: flex;">
 823                 <pre style="margin: auto;"><code style="font-size: 20px;">x => x + 1;</code></pre>
 824             </div>
 825             <div style="display: flex; margin-top: 20px; margin-bottom: 20px;">
 826                 <span style="margin: auto;">is equivalent to:</span>
 827             </div>
 828             <div style="display: flex; margin-bottom:50px;">
 829                 <pre style="margin: auto;"><code style="font-size: 20px;">function(x) {
 830     return x+1;
 831 }</code></pre>
 832             </div>
 833             <h2>Composition</h2>
 834             <div style="display: flex;">
 835                 <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>
 836             </div>
 837         </div>
 838         <div class="notes">
 839             <ul>
 840                 <li>Shoutout Mat about arrow functions</li>
 841                 <li>A quick note on composition: So far you may have come across function composition. There's lots of different kinds of composition, but function composition is incredibly common, especially in programming. However in the example we are talking the composition of promises. In the sense that we combine to promises, and get another promise.</li>
 842             </ul>
 843         </div>
 844     </div>
 845     <div id="slide-43">
 846         <div class="slide-title">=<< Promises >>=</div>
 847         <div class="slide">
 848             <h1>Promise composition</h1>
 849             <div style="display: flex;">
 850                 <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>
 851             </div>
 852             <div style="display: flex; margin-top: 100px">
 853                 <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>
 854             </div>
 855             <div style="display: flex;">
 856                 <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>
 857             </div>
 858             <div style="display: flex; margin-top: 100px">
 859                 <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>
 860             </div>
 861             <div style="display: flex;">
 862                 <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>
 863             </div>
 864         </div>
 865         <div class="notes">
 866             <ul>
 867                 <li>Depending on how we go for time, I hope to discuss composition after this section.</li>
 868             </ul>
 869         </div>
 870     </div>
 871     <div id="slide-44">
 872         <div class="slide-title">=<< Promises >>=</div>
 873         <div class="slide">
 874             <h1>OK great but who cares?</h1>
 875             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
 876                 <ul>
 877                     <li>We are <span class="highlight" style="display: inline-block;">declaring</span> how we want promises to compose</li>
 878                     <li>
 879                         The order that the promises actually resolve their values in is not important
 880                         <ul><li>In other words, we don't have to worry about <span class="highlight" style="display: inline-block;">timing</span> anymore</li></ul>
 881                     </li>
 882                     <li>We can <span class="highlight" style="display: inline-block;">declare</span> a failure anywhere in the chain</li>
 883                 </ul>
 884             </div>
 885         </div>
 886     </div>
 887     <div id="slide-45">
 888         <div class="slide-title">=<< Promises >>=</div>
 889         <div class="slide flexotron">
 890             <div style="position: relative;">
 891                 <img src="img/thonking.gif" />
 892                 <div class="thonkingWrap"><div class="thonk">atemporality?</div></div>
 893                 <div class="thonkingWrap"><div class="thonk">declaritive?</div></div>
 894                 <div class="thonkingWrap"><div class="thonk">functions?</div></div>
 895                 <div class="thonkingWrap"><div class="thonk">composition?</div></div>
 896             </div>
 897         </div>
 898         <div class="notes">
 899             <ul>
 900                 <li>This sure is starting to sound familiar.</li>
 901             </ul>
 902         </div>
 903     </div>
 904     <div id="slide-46">
 905         <div class="slide-title">=<< Big Brain Moment >>=</div>
 906         <div class="slide">
 907             <h1>Woah!</h1>
 908             <h2>JavaScript</h2>
 909             <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>)
 910     <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>))
 911     <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>
 912             <h2>Haskell</h2>
 913             <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>)
 914     <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>))
 915     <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>
 916         </div>
 917         <div class="notes">
 918             <ul>
 919                 <li>Big brain time again</li>
 920                 <li>It does not matter what order the promises resolve in, the final promise will always be resolved with "We start here..."</li>
 921                 <li>In this specific example, there is nothing asynchronous happening, but it's not much work to adapt it so there is. I just wanted to really highlight the similarities with haskell</li>
 922             </ul>
 923         </div>
 924     </div>
 925     <div id="slide-47">
 926         <div class="slide-title">=<< Big Brain Moment >>=</div>
 927         <div class="slide">
 928             <h1>Woah!</h1>
 929             <h2>JavaScript</h2>
 930             <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>)
 931     <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>))
 932     <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>))
 933     <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>
 934             <h2>Haskell</h2>
 935             <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>)
 936     <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>))
 937     <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>))
 938     <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>
 939         </div>
 940         <div class="notes">
 941             <ul>
 942                 <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>
 943                 <li>So, if you've ever used promises, you've been doing declaritive style programming without even realising it!</li>
 944                 <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>
 945                 <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>
 946                 <li>Although both are independed discoveries, I don't think it's a coincidence promises appeared given the nature of the JS world.</li>
 947             </ul>
 948         </div>
 949     </div>
 950     <div id="slide-48">
 951         <div class="slide-title">=<< Composition >>=</div>
 952         <div class="slide flexotron">
 953             <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Composition</div>
 954         </div>
 955         <div class="notes">
 956             <ul>
 957                 <li>Let's think about composition...</li>
 958                 <li>Mat touched on function composition briefly in his talk</li>
 959                 <li>I wantto talk about it in a more abstract sence. I think the idea of composition is so important that it deserves its own little bit</li>
 960             </ul>
 961         </div>
 962     </div>
 963     <div id="slide-49">
 964         <div class="slide-title">=<< Composition >>=</div>
 965         <div class="slide flexotron">
 966             <img src="img/composition0.png" style="height: 700px;" />
 967         </div>
 968     </div>
 969     <div id="slide-50">
 970         <div class="slide-title">=<< Composition >>=</div>
 971         <div class="slide flexotron">
 972             <div style="position: relative;">
 973                 <div style="position: absolute; top: -40px; left: -106px">If we can go from here to here</div>
 974                 <img src="img/composition1.png" style="height: 700px;" />
 975             </div>
 976         </div>
 977     </div>
 978     <div id="slide-51">
 979         <div class="slide-title">=<< Composition >>=</div>
 980         <div class="slide flexotron">
 981             <div style="position: relative;">
 982                 <div style="position: absolute; top: -40px; left: -106px">If we can go from here to here</div>
 983                 <div style="position: absolute; max-width: 425px; text-align: center; bottom: 149px; left: 220px">And we can go from here to here</div>
 984                 <img src="img/composition2.png" style="height: 700px;" />
 985             </div>
 986         </div>
 987     </div>
 988     <div id="slide-52">
 989         <div class="slide-title">=<< Composition >>=</div>
 990         <div class="slide flexotron">
 991             <div style="position: relative;">
 992                 <div style="position: absolute; top: -40px; left: -106px">If we can go from here to here</div>
 993                 <div style="position: absolute; max-width: 425px; text-align: center; bottom: 149px; left: 220px">And we can go from here to here</div>
 994                 <div style="position: absolute; text-align: center; bottom: -70px; left: 82px">Then the composition (if it exists) goes from here to here</div>
 995                 <img src="img/composition3.png" style="height: 700px;" />
 996             </div>
 997         </div>
 998         <div class="notes">
 999             <ul>
1000                 <li>RETURN LATER: Come back to this slide after looking at the next one</li>
1001                 <li>We want to go from A to C - but maybe that's really hard</li>
1002                 <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>
1003                 <li>Well, if we're in a system where composition is possible, then we just solved the problem!</li>
1004                 <li>This is the natural way people solve problems</li>
1005                 <li>RETURN EVEN LATER: After returning from the end slide: explain how side effects break composition</li>
1006                 <ul>
1007                     <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 should be the same.</li>
1008                     <li>Don't talk about it unless needed: Referential transparency. f(a, b) => return print(a + b) + print(a + b); is not the same program as f(a,b) => c = print(a + b); return c + c;</li>
1009                 </ul>
1010                 <li>Procedures in imperative languages are a short sighted attempt at composition</li>
1011                 <li>In the functional paradigm, composition is gauranteed because functions cannot have side effects</li>
1012             </ul>
1013         </div>
1014     </div>
1015     <div id="slide-53">
1016         <div class="slide-title">=<< Composition >>=</div>
1017         <div class="slide">
1018             <h1>OK great but who cares?</h1>
1019         </div>
1020         <div class="notes">
1021             <ul>
1022                 <li>Go back to the full composition diagram</li>
1023             </ul>
1024         </div>
1025     </div>
1026     <div id="slide-54">
1027         <div class="slide-title">=<< Composition >>=</div>
1028         <div class="slide">
1029             <h1>OK great but who cares?</h1>
1030             <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>
1031         </div>
1032     </div>
1033     <div id="slide-55">
1034         <div class="slide-title">=<< Composition >>=</div>
1035         <div class="slide">
1036             <h1>Examples</h1>
1037             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
1038                 <ul>
1039                     <li>The pyramids</li>
1040                     <li>The LHC</li>
1041                     <li>McDonald's</li>
1042                     <li>Moodle!</li>
1043                 </ul>
1044             </div>
1045         </div>
1046         <div class="notes">
1047             <ul>
1048                 <li>The pyramids were build by having loads of peope work in parallel</li>
1049                 <li>Same with the LHC. I don't believe there is a single person in the world who fully understands it</li>
1050                 <li>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>
1051                 <li>And Moodle does it too! Let's think about how we tackle projects...</li>
1052             </ul>
1053         </div>
1054     </div>
1055     <div id="slide-56">
1056         <div class="slide-title">=<< Composition >>=</div>
1057         <div class="slide"></div>
1058         <div class="notes">
1059             <ul>
1060                 <li>So... do we get one mega awesome dev to bash out features?</li>
1061             </ul>
1062         </div>
1063     </div>
1064     <div id="slide-57">
1065         <div class="slide-title">=<< Composition >>=</div>
1066         <div class="slide flexotron">
1067             <div style="height:80%;" >
1068                 <img src="img/10xdev.png" class="textbox" style="margin-bottom: 20px; 40px; height: 60%; display: block; margin: auto; padding-bottom: 0px;" />
1069                 <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>
1070             </div>
1071         </div>
1072         <div class="notes">
1073             <ul>
1074                 <li>idk about you, but I wouldn't be keen to work with this person</li>
1075                 <li>There's a thing in dev called the 10x developer, and it is something that simply does not exist</li>
1076                 <li>The correct way to work on software is of course...</li>
1077             </ul>
1078         </div>
1079     </div>
1080     <div id="slide-58">
1081         <div class="slide-title">=<< Composition >>=</div>
1082         <div class="slide flexotron">
1083             <div class="textbox"><h1>No, you get friends to take a piece and help!</h1></div>
1084             <div id="cloudguys">
1085                 <div>
1086                     <span>henlo</span>
1087                     <img src="img/cloudguy.gif" />
1088                 </div>
1089                 <div>
1090                     <span>henlo</span>
1091                     <img src="img/cloudguy.gif" />
1092                 </div>                <div>
1093                     <span>henlo</span>
1094                     <img src="img/cloudguy.gif" />
1095                 </div>
1096                 <div>
1097                     <span>henlo</span>
1098                     <img src="img/cloudguy.gif" />
1099                 </div>
1100                 <div>
1101                     <span>henlo</span>
1102                     <img src="img/cloudguy.gif" />
1103                 </div>
1104                 <div>
1105                     <span>henlo</span>
1106                     <img src="img/cloudguy.gif" />
1107                 </div>
1108             </div>
1109         </div>
1110         <div class="notes">
1111             <ul>
1112                 <li>As a team!</li>
1113                 <li>This is why it's worth spending the time to plan things and figure out how to "chop up" the work</li>
1114                 <li>We need to make sure we are chopping the problem up in to pieces that can be composed together later</li>
1115             </ul>
1116         </div>
1117     </div>
1118     <div id="slide-59">
1119         <div class="slide-title">=<< Composition >>=</div>
1120         <div class="slide flexotron">
1121             <div class="textbox" style="text-align:center; font-size:40px; text-shadow: 4px 4px #000; padding:20px;" >Composition is nature's greatest hack</div>
1122         </div>
1123         <div class="notes">
1124             <ul>
1125                 <li>My goal here was to try and convince you that composition really is important and is fundamental to the way we think</li>
1126                 <li>Humans are amazing for our ability to break down problems in to manageable chunks and then compose them together.</li>
1127                 <li>At its core, composition is about relationships, and building complexity by combining them. Hey, wasn't the whole declaritive thing about relationships?</li>
1128                 <li>And that brings me to my final point</li>
1129             </ul>
1130         </div>
1131     </div>
1132     <div id="slide-60">
1133         <div class="slide-title">=<< Composition >>=</div>
1134         <div class="slide">
1135             <h1>What's this got to do with FP?</h1>
1136             <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>
1137             <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>
1138             <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>
1139         </div>
1140         <div class="notes">
1141             <ul>
1142                 <li>Go back to the composition slide and explain that in FP the composition is gauranteed to exist, while in other paradigms it is not</li>
1143             </ul>
1144         </div>
1145     </div>
1146     <div id="slide-61">
1147         <div class="slide-title">=<< Closing Notes >>=</div>
1148         <div class="slide"></div>
1149         <div class="notes">
1150             <ul>
1151                 <li>I'd like to finish this talk with some food for thought...</li>
1152             </ul>
1153         </div>
1154     </div>
1155     <div id="slide-62">
1156         <div class="slide-title">=<< Closing Notes >>=</div>
1157         <div class="slide">
1158             <h1>Very big brain thoughts:</h1>
1159             <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
1160                 <ul>
1161                     <li>We work across multiple timezones, so being able to solve problems in a time-independant way seems appealing, doesn't it?</li>
1162                     <li>Moore's law is coming to an end, now the focus is shifting to parallel computing</li>
1163                     <ul>
1164                         <li>Imperative paradigms will not be the right tool for this</li>
1165                         <li>Either we'll see a shift to declaritive style programming</li>
1166                         <li>Or we'll make life hard for ourselves real fast</li>
1167                     </ul>
1168                     <li>Maybe quantum mechanics is so damn confusing because at a certain point we can't decompose things anymore?</li>
1169                     <ul><li>After all... why should the universe conform to the way our brains want it to be...</li></ul>
1170                 </ul>
1171             </div>
1172         </div>
1173         <div class="notes">
1174             <ul>
1175                 <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>
1176                 <li>Other analogies like the frog in slowly boiling water come to mind</li>
1177                 <li>And that's about it really!</li>
1178             </ul>
1179         </div>
1180     </div>
1181     <div id="slide-63">
1182         <div id="cloudguy2">
1183             <div style="height: 20%; text-align: center;">
1184                 <img style="height: 100%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src="img/cloudguy.gif" />
1185                 <div style="width: 80%; margin: auto;">Thanks for participating!!</div>
1186             </div>
1187         </div>
1188         <div class="notes">
1189             <ul>
1190                 <li>If nothing else, I really hope you're now just a little bit more curious about functional programming</li>
1191                 <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</li>
1192                 <li>If you have any questions please message me, I'm always happy to talk about this stuff</li>
1193                 <li>I'd suggest going to the pub to talk about it, but, well, we can't do that just now</li>
1194             </ul>
1195         </div>
1196     </div>
1197 </body>
1198 <script>
1199  var div, i, j, span, duration = "";
1200  var crazyTexts = [];
1201  var opacyTexts = [];
1202  div = document.querySelectorAll("#rant > span.crazy");
1203  for (j = 0; j < div.length; j++) {
1204      span=""
1205      for (i = 0; i < div[j].innerText.length; i++) {
1206          duration = Math.floor(Math.random() * 5) + 100
1207          span += "<span class=\"letter shake-constant shake-little\" style=\"animation-duration: " + duration + "ms\">";
1208          span += div[j].innerText[i] == " " ? "&nbsp;" : div[j].innerText[i];
1209          span += "</span>";
1210      }
1211      crazyTexts.push(span);
1212  }
1213
1214  opacities = document.querySelectorAll("#rant > span.shake-opacity");
1215  for (k = 0; k < opacities.length; k++) {
1216      shrek=Math.random();
1217      opacities[k].style.animationDuration = shrek + 's';
1218      opacyTexts.push(opacities[k].outerHTML);
1219  }
1220
1221  allText = ""
1222  for (l = 0; l< crazyTexts.length; l++) {
1223      allText+=crazyTexts[l] + (opacyTexts[l] ? opacyTexts[l] : "");
1224  }
1225
1226  document.getElementById('rant').innerHTML = allText;
1227
1228  var x = 0;
1229  var y = 0;
1230  var b = document.querySelectorAll('body')[0];
1231  setInterval(function(){
1232      x+=2;
1233      y-=2;
1234      b.style.backgroundPosition = x + 'px ' + y + 'px';
1235  }, 250);
1236
1237  urlParts = document.URL.split('#');
1238
1239  var currentSlide = urlParts.length > 1 ? urlParts[1] : 0;
1240  var bc = new BroadcastChannel('test_channel');
1241  document.getElementById('slide-' + currentSlide).style.display = 'block';
1242  document.onkeydown = checkKey;
1243
1244  notes = document.querySelectorAll('#slide-' + currentSlide + ' .notes');
1245  if(!!notes[0]) {
1246      bc.postMessage(notes[0].innerHTML);
1247  }
1248
1249  function checkKey(e) {
1250
1251      e = e || window.event;
1252      if (e.keyCode == '37') {
1253          if (document.getElementById('slide-' + currentSlide)) {
1254              document.getElementById('slide-' + currentSlide).style.display = 'none';
1255          }
1256          currentSlide--;
1257          document.getElementById('slide-' + currentSlide).style.display = 'block';
1258
1259          notes = document.querySelectorAll('#slide-' + currentSlide + ' .notes');
1260          if(!!notes[0]) {
1261              bc.postMessage(notes[0].innerHTML);
1262          } else {
1263              bc.postMessage("");
1264          }
1265      }
1266      else if (e.keyCode == '39') {
1267          if (document.getElementById('slide-' + currentSlide)) {
1268              document.getElementById('slide-' + currentSlide).style.display = 'none';
1269          }
1270          currentSlide++;
1271          document.getElementById('slide-' + currentSlide).style.display = 'block';
1272
1273          notes = document.querySelectorAll('#slide-' + currentSlide + ' .notes');
1274          if(!!notes[0]) {
1275              bc.postMessage(notes[0].innerHTML);
1276          } else {
1277              bc.postMessage("");
1278          }
1279
1280      }
1281
1282      if (currentSlide == 1 || currentSlide == 63) {
1283          confetti.start();
1284      } else {
1285          confetti.stop();
1286      }
1287  }
1288
1289
1290  function activateFriends(n, noshake) {
1291      f = document.querySelectorAll('.code-friends' + n);
1292
1293      for (fr = 0; fr< f.length; fr++) {
1294          if (!noshake) {
1295              f[fr].classList.add("shake-constant");
1296              f[fr].classList.add("shake-slow");
1297          }
1298          f[fr].classList.add("on");
1299      }
1300  }
1301
1302  function deactivateFriends(n) {
1303      f = document.querySelectorAll('.code-friends' + n);
1304      for (fr = 0; fr< f.length; fr++) {
1305          f[fr].classList.remove("shake-constant");
1306          f[fr].classList.remove("shake-slow");
1307          f[fr].classList.remove("on");
1308      }
1309  }
1310
1311  function activatePromise(n) {
1312      p = document.querySelectorAll('.promise' + n);
1313      for (fr = 0; fr< p.length; fr++) {
1314          p[fr].classList.add('on');
1315      }
1316  }
1317
1318  function deactivatePromise(n) {
1319      p = document.querySelectorAll('.promise' + n);
1320      for (fr = 0; fr< p.length; fr++) {
1321          p[fr].classList.remove('on');
1322      }
1323  }
1324
1325  cloudGuyQuotes = [
1326      "Welcome to the talk!",
1327      "I hope we'll have fun exploring functional programming together!",
1328      "But while we wait let's share interesting facts and anectodes :)",
1329      "If you can be disgruntled, can you also be gruntled?",
1330      "0.9 recurring is exactly equal to one if you think about it.",
1331      "In English, the word \"ghoti\" can be pronounced as \"fish\".",
1332      "Your credit card details are somewhere in Pi.",
1333      "It takes 366 people to make sure two of them share a birthday, but only 23 people to ensure a 50% chance.",
1334      "1729 is the best number (I checked them all).",
1335      "The secret to strengh is to eat only a banana for breakfast.",
1336      "All of Back to the Future happened in the past.",
1337      "Everything is in the future.",
1338      "We owe functional and procedural programming to the pre-Socratics, Heraclitus and Anaximander respectively.",
1339      "Preservative has a very different meaning in many European languages",
1340      "There are more stars in our galaxy than there are atoms in The Universe"
1341  ];
1342
1343  cgq = document.getElementById("cgquotes");
1344  numQuotes = cloudGuyQuotes.length;
1345  currentQuote = 0;
1346  setInterval(function(){
1347      if (currentQuote == 0 || currentQuote == 1) {
1348          currentQuote++;
1349      } else {
1350          currentQuote = Math.floor(Math.random()*(cloudGuyQuotes.length - 3)) + 3;
1351          console.log(currentQuote);
1352      }
1353
1354      cgq.innerText = cloudGuyQuotes[currentQuote];
1355  }, 10000);
1356
1357  helperQuotes = [
1358      "Let's go!",
1359      "Here to help!",
1360      "Aw yeah!",
1361      "Power!",
1362      "Teamwork!",
1363      "Let's code!",
1364      "Friendship!",
1365      "Bananas",
1366      "Bagels",
1367      "Coffee"
1368  ];
1369
1370  function animateCSS(element, animationName, callback) {
1371      const node = element;
1372      node.classList.add('animated', animationName)
1373
1374      function handleAnimationEnd() {
1375          node.classList.remove('animated', animationName)
1376          node.removeEventListener('animationend', handleAnimationEnd)
1377          node.style.opacity = '0';
1378          if (typeof callback === 'function') callback()
1379      }
1380
1381      node.addEventListener('animationend', handleAnimationEnd)
1382  }
1383
1384  helpers = document.querySelectorAll("#cloudguys span");
1385  setInterval(function(){
1386      quote = Math.floor(Math.random()*(helperQuotes.length));
1387      helper = Math.floor(Math.random()*(helpers.length));
1388      helpers[helper].innerText = helperQuotes[quote];
1389      animateCSS(helpers[helper], 'fadeOutUp');
1390  }, 1000);
1391
1392
1393  angeries = document.querySelectorAll(".angereyWrap");
1394  usedPositions = [];
1395  shakes = ["shake", "shake-hard", "shake-slow", "shake-little", "shake-horizontal", "shake-vertical", "shake-rotate", "shake-opacity", "shake-crazy", "shake-chunk"];
1396  for (a = 0; a < angeries.length; a++) {
1397      randomness = (Math.round(Math.random() * 10) + 1) * -10;
1398      angeries[a].style.top = ((a > 4) ? (-180-randomness) : (180 + randomness)) + "%" ;
1399      thing = ((Math.floor(Math.random() * 10) + 1) * 9) + "%";
1400
1401      while (usedPositions.includes(thing)) {
1402          thing = ((Math.floor(Math.random() * 10) + 1) * 9) + "%";
1403      }
1404
1405      angeries[a].style.left = thing;
1406      angeries[a].classList.add("shake-constant");
1407      angeries[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
1408      usedPositions.push(thing);
1409  }
1410
1411  thonkings = document.querySelectorAll(".thonkingWrap");
1412  shakes = ["shake-slow", "shake-little", "shake-opacity"];
1413  usedPositions = [];
1414  for (a = 0; a < thonkings.length; a++) {
1415      thing = Math.floor(Math.random() * 4) + 1;
1416      randomnessX = -(Math.round(Math.random() * 100) + 1);
1417      randomnessY = -(Math.round(Math.random() * 50) + 1);
1418
1419      while (usedPositions.includes(thing)) {
1420          thing = Math.floor(Math.random() * 4) + 1;
1421      }
1422
1423      switch(thing) {
1424          case 1:
1425              thonkings[a].style.left = randomnessX + 'px';
1426              thonkings[a].style.top = randomnessY + 'px';
1427              thonkings[a].children[0].style.transform = 'rotate(-40deg) scale(1, 1.5)'
1428              thonkings[a].classList.add("shake-constant");
1429              thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
1430              break;
1431          case 2:
1432              thonkings[a].style.right = randomnessX + 'px';
1433              thonkings[a].style.top = randomnessY + 'px';
1434              thonkings[a].classList.add("shake-constant");
1435              thonkings[a].children[0].style.transform = 'rotate(40deg) scale(1, 1.5)'
1436              thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
1437              break;
1438          case 3:
1439              thonkings[a].style.right = randomnessX + 'px';
1440              thonkings[a].style.bottom = randomnessY + 'px';
1441              thonkings[a].classList.add("shake-constant");
1442              thonkings[a].children[0].style.transform = 'rotate(-215deg) scale(1, 1.5)'
1443              thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
1444              break;
1445          case 4:
1446              thonkings[a].style.left = randomnessX + 'px';
1447              thonkings[a].style.bottom = randomnessY + 'px';
1448              thonkings[a].classList.add("shake-constant");
1449              thonkings[a].children[0].style.transform = 'rotate(215deg) scale(1, 1.5)'
1450              thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
1451              break;
1452      }
1453
1454
1455      usedPositions.push(thing);
1456  }
1457
1458 </script>
1459 </html>