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