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