index.html

   1 <html><head>
   2     <meta charset="utf-8">
   3     <link rel="stylesheet" href="css/csshake.min.css">
   4     <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&amp;display=swap" rel="stylesheet">
   5     <link rel="stylesheet"
   6           href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css">
   7     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
   8     <script>hljs.initHighlightingOnLoad();</script>
   9     <title>Crazy Wide-Eyed Functional Programming</title>
  10     <style>
  11      body {
  12          margin: 0px;
  13          font-family: 'Press Start 2P', cursive;
  14          color: white;
  15          text-shadow:
  16              1px 1px 0 #000;
  17          background-color: #f98012;
  18          background-image: url("img/tile.png");
  19          background-repeat: repeat;
  20          background-size: 10%;
  21          image-rendering: crisp-edges;
  22          background-position-x: -33px;
  23          background-blend-mode: multiply;
  24      }
  25
  26      .angereyWrap {
  27          position: absolute;
  28          color: #cc0000;
  29      }
  30
  31      .angerey {
  32          letter-spacing: -20px;
  33          transform: rotate(90deg) scale(1, 1.5);
  34      }
  35
  36      .hljs {
  37          font-family: 'Press Start 2P', cursive;
  38          text-shadow: 2px 2px 0 #000;
  39          font-size: 30px;
  40          overflow: hidden;
  41      }
  42
  43      h1 {
  44          text-shadow: 2px 2px 0 #000;
  45      }
  46
  47      .slide-title {
  48          font-size: 40px;
  49          margin: 20px;
  50          text-shadow: 10px 10px 0 #00000069;
  51          text-align: center;
  52      }
  53
  54      .slide {
  55          display: flex;
  56          justify-content: center;
  57          align-items: center;
  58          flex-wrap: wrap;
  59          margin: 40px;
  60          box-shadow: 10px 10px 0 #00000069;
  61          padding: 20px;
  62          height: 80%;
  63          background: #6187a8e3;
  64      }
  65
  66      #slide-0 #cloudguy {
  67          height: 100%;
  68          display: flex;
  69          justify-content: center;
  70          align-items: center;
  71          flex-wrap: wrap;
  72      }
  73
  74      #cgquotes {
  75          font-size: 30px;
  76          text-shadow: 2px 2px 0 #000;
  77      }
  78
  79      #slide-1 .slide div {
  80          display: flex;
  81          width: 40%;
  82      }
  83
  84      img {
  85          image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  86          image-rendering: -moz-crisp-edges;          /* Firefox                        */
  87          image-rendering: -o-crisp-edges;            /* Opera                          */
  88          image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  89          image-rendering: pixelated; /* Chrome */
  90          image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
  91          -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
  92      }
  93
  94      #slide-1 .shake-constant, .crazy, .span {
  95          display: inline-block;
  96      }
  97
  98      #slide-1 .shake-opacity {
  99          color: #f98012;
 100      }
 101
 102      #slide-1 #rant {
 103          padding: 20px;
 104          height: 80%;
 105      }
 106
 107      .textbox {
 108          box-shadow: 10px 10px 0 #00000069;
 109          border: 2px solid black;
 110          background-color: #3f6382;
 111      }
 112
 113      .hljs {
 114          box-shadow: 10px 10px 0 #00000069;
 115          border: 2px solid black;
 116      }
 117
 118      div[id^="slide-"] {
 119          display: none;
 120      }
 121
 122      span[class^="code-friends"].on {
 123          color: #f98012 !important;
 124      }
 125
 126      span[class^="code-friends"].on > span {
 127          color: #f98012 !important;
 128      }
 129
 130     </style>
 131 </head>
 132 <body>
 133     <div id="slide-0">
 134         <div id="cloudguy">
 135             <div style="height: 20%; text-align: center;">
 136                 <img style="height: 100%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src="img/cloudguy.gif" />
 137                 <div id="cgquotes" style="width: 80%; margin: auto;">Welcome to the talk!</div>
 138             </div>
 139         </div>
 140     </div>
 141     <div id="slide-1">
 142         <div class="slide-title">=<< What's up with that Title? >>=</div>
 143         <div class="slide">
 144             <div style="justify-content: right;">
 145                 <img class="shake-constant shake" src="img/wide-eyed-crazy.png" style="width: 70%; margin-right: 10%;">
 146             </div>
 147             <div style="justify-content: left">
 148                 <div style="display: flex; align-items: center; width: 70%">
 149                     <div id="rant" class="textbox" style="display: block;height: auto; width:100%; margin-left:10%;">
 150                         <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>
 151                     </div>
 152                 </div>
 153             </div>
 154             <div>Fig 1.1 What most people thing a typical functional programming advocate looks like</div>
 155         </div>
 156     </div>
 157     <div id="slide-2">
 158         <div class="slide-title">=<< Obligatory Quote >>=</div>
 159         <div class="slide">
 160         </div>
 161     </div>
 162     <div id="slide-3">
 163         <div class="slide-title">=<< Obligatory Quote >>=</div>
 164         <div class="slide">
 165             <div style="text-align:center; font-size:40px; text-shadow: 4px 4px #000;" >If you wish to build a ship, do not divide the men into teams and send them to the forest to cut wood. Instead, teach them to long for the vast and endless sea.</div>
 166         </div>
 167     </div>
 168     <div id="slide-4">
 169         <div class="slide-title">=<< Promises >>=</div>
 170         <div class="slide">
 171             <div style="position: relative; text-align:center; font-size:40px; text-shadow: 4px 4px #000;" >
 172                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 173                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 174                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 175                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 176                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 177                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 178                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 179                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 180                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 181                 <div class="angereyWrap"><div class="angerey">>:(</div></div>
 182                 Promises <span class="shake-slow shake-constant" style="display: inline-block; color: #f98012">do not</span> make things asynchronous!</div>
 183         </div>
 184
 185     </div>
 186     <div id="slide-5">
 187         <div class="slide-title">=<< Promises >>=</div>
 188         <div class="slide">
 189             <h1>JavaScript</h1>
 190             <pre><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>)
 191     <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>))
 192     <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>
 193             <h1>Haskell</h1>
 194             <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>)
 195             <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>))
 196             <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>
 197         </div>
 198     </div>
 199     <div id="slide-6">
 200         <div class="slide-title">=<< Promises >>=</div>
 201         <div class="slide">
 202             <h1>JavaScript</h1>
 203             <pre><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>)
 204     <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>))
 205     <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>))
 206     <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>
 207             <h1>Haskell</h1>
 208             <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>)
 209             <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>))
 210             <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>))
 211             <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>
 212         </div>
 213     </div>
 214 </body>
 215 <script>
 216  var div, i, j, span, duration = "";
 217  var crazyTexts = [];
 218  var opacyTexts = [];
 219  div = document.querySelectorAll("#rant > span.crazy");
 220  for (j = 0; j < div.length; j++) {
 221      span=""
 222      for (i = 0; i < div[j].innerText.length; i++) {
 223          duration = Math.floor(Math.random() * 5) + 100
 224          span += "<span class=\"letter shake-constant shake-little\" style=\"animation-duration: " + duration + "ms\">";
 225          span += div[j].innerText[i] == " " ? "&nbsp;" : div[j].innerText[i];
 226          span += "</span>";
 227      }
 228      crazyTexts.push(span);
 229  }
 230
 231  opacities = document.querySelectorAll("#rant > span.shake-opacity");
 232  for (k = 0; k < opacities.length; k++) {
 233      shrek=Math.random();
 234      opacities[k].style.animationDuration = shrek + 's';
 235      opacyTexts.push(opacities[k].outerHTML);
 236  }
 237
 238  allText = ""
 239  for (l = 0; l< crazyTexts.length; l++) {
 240      allText+=crazyTexts[l] + "&nbsp;" + (opacyTexts[l] ? opacyTexts[l] : "") + "&nbsp";
 241  }
 242
 243  document.getElementById('rant').innerHTML = allText;
 244
 245  var x = 0;
 246  var y = 0;
 247  var b = document.querySelectorAll('body')[0];
 248  setInterval(function(){
 249      x+=2;
 250      y-=2;
 251      b.style.backgroundPosition = x + 'px ' + y + 'px';
 252  }, 250);
 253
 254  urlParts = document.URL.split('#');
 255  window.console.log(urlParts);
 256  var currentSlide = urlParts.length > 1 ? urlParts[1] : 0;
 257  document.getElementById('slide-' + currentSlide).style.display = 'block';
 258  document.onkeydown = checkKey;
 259
 260  function checkKey(e) {
 261
 262      e = e || window.event;
 263      if (e.keyCode == '37') {
 264          if (document.getElementById('slide-' + currentSlide)) {
 265              document.getElementById('slide-' + currentSlide).style.display = 'none';
 266          }
 267          currentSlide--;
 268          document.getElementById('slide-' + currentSlide).style.display = 'block';
 269      }
 270      else if (e.keyCode == '39') {
 271          if (document.getElementById('slide-' + currentSlide)) {
 272              document.getElementById('slide-' + currentSlide).style.display = 'none';
 273          }
 274          currentSlide++;
 275          document.getElementById('slide-' + currentSlide).style.display = 'block';
 276      }
 277
 278  }
 279
 280  function activateFriends(n) {
 281      f = document.querySelectorAll('.code-friends' + n);
 282
 283      for (fr = 0; fr< f.length; fr++) {
 284          f[fr].classList.add("shake-constant");
 285          f[fr].classList.add("shake-slow");
 286          f[fr].classList.add("on");
 287      }
 288  }
 289
 290  function deactivateFriends(n) {
 291      f = document.querySelectorAll('.code-friends' + n);
 292      for (fr = 0; fr< f.length; fr++) {
 293          f[fr].classList.remove("shake-constant");
 294          f[fr].classList.remove("shake-slow");
 295          f[fr].classList.remove("on");
 296      }
 297  }
 298
 299  cloudGuyQuotes = [
 300      "Welcome to the talk!",
 301      "I hope we'll have fun exploring functional programming together!",
 302      "But while we wait let's share interesting facts and anectodes :)",
 303      "If you can be disgruntled, can you also be gruntled?",
 304      "0.9 recurring is exactly equal to one if you think about it.",
 305      "In English, the word \"ghoti\" can be pronounced as \"fish\".",
 306      "Your credit card details are somewhere in Pi.",
 307      "It takes 366 people to make sure two of them share a birthday, but only 23 people to ensure a 50% chance.",
 308      "1729 is the best number (I checked them all).",
 309      "The secret to strengh is to eat only a banana for breakfast.",
 310      "All of Back to the Future happened in the past.",
 311      "Everything is in the future."
 312  ];
 313
 314  cgq = document.getElementById("cgquotes");
 315  numQuotes = cloudGuyQuotes.length;
 316  currentQuote = 0;
 317  setInterval(function(){
 318      if (currentQuote == 0 || currentQuote == 1) {
 319          currentQuote++;
 320      } else {
 321          currentQuote = Math.floor(Math.random()*(cloudGuyQuotes.length - 3)) + 3;
 322          console.log(currentQuote);
 323      }
 324
 325      cgq.innerText = cloudGuyQuotes[currentQuote];
 326  }, 10000);
 327
 328  angeries = document.querySelectorAll(".angereyWrap");
 329  usedPositions = [];
 330  shakes = ["shake", "shake-hard", "shake-slow", "shake-little", "shake-horizontal", "shake-vertical", "shake-rotate", "shake-opacity", "shake-crazy", "shake-chunk"];
 331  for (a = 0; a < angeries.length; a++) {
 332      randomness = (Math.round(Math.random() * 10) + 1) * -10;
 333      angeries[a].style.top = ((a > 4) ? (-180-randomness) : (180 + randomness)) + "%" ;
 334      thing = ((Math.floor(Math.random() * 10) + 1) * 9) + "%";
 335
 336      while (usedPositions.includes(thing)) {
 337          thing = ((Math.floor(Math.random() * 10) + 1) * 9) + "%";
 338      }
 339
 340      angeries[a].style.left = thing;
 341      angeries[a].classList.add("shake-constant");
 342      angeries[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
 343      usedPositions.push(thing);
 344  }
 345 </script>
 346 </html>