index.html

   1 <html><head>
   2     <meta charset="utf-8">
   3     <link rel="stylesheet" href="https://csshake.surge.sh/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      .hljs {
  27          font-family: 'Press Start 2P', cursive;
  28          text-shadow: 2px 2px 0 #000;
  29          font-size: 30px;
  30      }
  31
  32      h1 {
  33          text-shadow: 2px 2px 0 #000;
  34      }
  35
  36      .slide-title {
  37          font-size: 40px;
  38          margin: 20px;
  39          text-shadow: 10px 10px 0 #00000069;
  40          text-align: center;
  41      }
  42
  43      .slide {
  44          display: flex;
  45          justify-content: center;
  46          align-items: center;
  47          flex-wrap: wrap;
  48          margin: 40px;
  49          box-shadow: 10px 10px 0 #00000069;
  50          padding: 20px;
  51          height: 80%;
  52          background: #6187a8e3;
  53      }
  54
  55      #slide-0 #cloudguy {
  56          height: 100%;
  57          display: flex;
  58          justify-content: center;
  59          align-items: center;
  60      }
  61
  62      #slide-1 .slide div {
  63          display: flex;
  64          width: 40%;
  65      }
  66
  67      img {
  68          image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  69          image-rendering: -moz-crisp-edges;          /* Firefox                        */
  70          image-rendering: -o-crisp-edges;            /* Opera                          */
  71          image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  72          image-rendering: pixelated; /* Chrome */
  73          image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
  74          -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
  75      }
  76
  77      #slide-1 .shake-constant, .crazy, .span {
  78          display: inline-block;
  79      }
  80
  81      #slide-1 .shake-opacity {
  82          color: #f98012;
  83      }
  84
  85      #slide-1 #rant {
  86          padding: 20px;
  87          height: 80%;
  88      }
  89
  90      .textbox {
  91          box-shadow: 10px 10px 0 #00000069;
  92          border: 2px solid black;
  93          background-color: #3f6382;
  94      }
  95
  96      .hljs {
  97          box-shadow: 10px 10px 0 #00000069;
  98          border: 2px solid black;
  99      }
 100
 101      div[id^="slide-"] {
 102          display: none;
 103      }
 104
 105      span[class^="code-friends"].on {
 106          color: #f98012;
 107      }
 108     </style>
 109 </head>
 110 <body>
 111     <div id="slide-0">
 112         <div id="cloudguy">
 113             <img class="shake-constant shake-slow" style="height: 20%; animation-duration: 15s" src="img/cloudguy.png" />
 114         </div>
 115     </div>
 116     <div id="slide-1">
 117         <div class="slide-title">=<< What's up with that Title? >>=</div>
 118         <div class="slide">
 119             <div style="justify-content: right;">
 120                 <img class="shake-constant shake" src="img/wide-eyed-crazy.png" style="width: 70%; margin-right: 10%;">
 121             </div>
 122             <div style="justify-content: left">
 123                 <div style="display: flex; align-items: center; width: 70%">
 124                     <div id="rant" class="textbox" style="display: block;height: auto; width:100%; margin-left:10%;">
 125                         <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>
 126                     </div>
 127                 </div>
 128             </div>
 129             <div>Fig 1.1 What most people thing a typical functional programming advocate looks like</div>
 130         </div>
 131     </div>
 132     <div id="slide-2">
 133         <div class="slide-title">=<< Obligatory Quote >>=</div>
 134         <div class="slide">
 135         </div>
 136     </div>
 137     <div id="slide-3">
 138         <div class="slide-title">=<< Obligatory Quote >>=</div>
 139         <div class="slide">
 140             <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>
 141         </div>
 142     </div>
 143     <div id="slide-4">
 144         <div class="slide-title">=<< The Third Slide >>=</div>
 145         <div class="slide">
 146             <h1>JavaScript</h1>
 147             <pre><code class="javascript">Promise.resolve("We start here")
 148     <span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">.then</span>(x => Promise.resolve(x + " then get here"))
 149     .then(x => Promise.resolve(x + " and finally here!"))</code></pre>
 150             <h1>Haskell</h1>
 151             <pre><code class="haskell">Right("We start here")
 152             <span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">>>=</span> (\x -> Right (x ++ " then get here"))
 153             >>= (\x -> Right (x ++ " and finally here!"))</code></pre>
 154         </div>
 155     </div>
 156 </body>
 157 <script>
 158  (function() {
 159      var div, i, j, span, duration = "";
 160      var crazyTexts = [];
 161      var opacyTexts = [];
 162      div = document.querySelectorAll("#rant > span.crazy");
 163      for (j = 0; j < div.length; j++) {
 164          span=""
 165          for (i = 0; i < div[j].innerText.length; i++) {
 166              duration = Math.floor(Math.random() * 5) + 100
 167              span += "<span class=\"letter shake-constant shake-little\" style=\"animation-duration: " + duration + "ms\">";
 168              span += div[j].innerText[i] == " " ? "&nbsp;" : div[j].innerText[i];
 169              span += "</span>";
 170          }
 171          crazyTexts.push(span);
 172      }
 173
 174      opacities = document.querySelectorAll("#rant > span.shake-opacity");
 175      for (k = 0; k < opacities.length; k++) {
 176          shrek=Math.random();
 177          opacities[k].style.animationDuration = shrek + 's';
 178          opacyTexts.push(opacities[k].outerHTML);
 179      }
 180
 181      allText = ""
 182      for (l = 0; l< crazyTexts.length; l++) {
 183          allText+=crazyTexts[l] + "&nbsp;" + (opacyTexts[l] ? opacyTexts[l] : "") + "&nbsp";
 184      }
 185
 186      document.getElementById('rant').innerHTML = allText;
 187
 188      var x = 0;
 189      var y = 0;
 190      var b = document.querySelectorAll('body')[0];
 191      setInterval(function(){
 192          x+=2;
 193          y-=2;
 194          b.style.backgroundPosition = x + 'px ' + y + 'px';
 195      }, 250);
 196
 197      urlParts = document.URL.split('#');
 198      window.console.log(urlParts);
 199      var currentSlide = urlParts.length > 1 ? urlParts[1] : 0;
 200      document.getElementById('slide-' + currentSlide).style.display = 'block';
 201      document.onkeydown = checkKey;
 202
 203      function checkKey(e) {
 204
 205          e = e || window.event;
 206          if (e.keyCode == '37') {
 207              if (document.getElementById('slide-' + currentSlide)) {
 208                  document.getElementById('slide-' + currentSlide).style.display = 'none';
 209              }
 210              currentSlide--;
 211              document.getElementById('slide-' + currentSlide).style.display = 'block';
 212          }
 213          else if (e.keyCode == '39') {
 214              if (document.getElementById('slide-' + currentSlide)) {
 215                  document.getElementById('slide-' + currentSlide).style.display = 'none';
 216              }
 217              currentSlide++;
 218              document.getElementById('slide-' + currentSlide).style.display = 'block';
 219          }
 220
 221      }
 222  })();
 223  function activateFriends(n) {
 224      f = document.querySelectorAll('.code-friends' + n);
 225      f[0].classList.add("shake-constant");
 226      f[0].classList.add("shake-slow");
 227      f[0].classList.add("on");
 228      f[1].classList.add("shake-constant");
 229      f[1].classList.add("shake-slow");
 230      f[1].classList.add("on");
 231  }
 232
 233  function deactivateFriends(n) {
 234      f = document.querySelectorAll('.code-friends' + n);
 235      f[0].classList.remove("shake-constant");
 236      f[0].classList.remove("shake-slow");
 237      f[0].classList.remove("on");
 238      f[1].classList.remove("shake-constant");
 239      f[1].classList.remove("shake-slow");
 240      f[1].classList.remove("on");
 241  }
 242 </script>
 243 </html>