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="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">
   7     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
   8     <script>hljs.initHighlightingOnLoad();</script>
   9     <style>
  10      body {
  11          margin: 0px;
  12          font-family: 'Press Start 2P', cursive;
  13          color: white;
  14          text-shadow:
  15              1px 1px 0 #000;
  16          background-color: #f98012;
  17          background-image: url("img/tile.png");
  18          background-repeat: repeat;
  19          background-size: 10%;
  20          image-rendering: crisp-edges;
  21          background-position-x: -33px;
  22          background-blend-mode: multiply;
  23      }
  24
  25      .hljs {
  26          font-family: 'Press Start 2P', cursive;
  27          text-shadow: 2px 2px 0 #000;
  28          color: #bcbcbc;
  29          font-size: 30px;
  30      }
  31
  32      .slide-title {
  33          font-size: 40px;
  34          margin: 20px;
  35          text-shadow: 10px 10px 0 #00000069;
  36          text-align: center;
  37      }
  38
  39      .slide {
  40                display: flex;
  41                justify-content: center;
  42                align-items: center;
  43          flex-wrap: wrap;
  44          margin: 40px;
  45          box-shadow: 10px 10px 0 #00000069;
  46          padding: 20px;
  47          height: 80%;
  48          background: #6187a8;
  49          background-image: url("img/tile-nopad-bottom.png");
  50                background-blend-mode: multiply;
  51                background-size: 50%;
  52                background-repeat: repeat-x;
  53                background-position-x: center;
  54                background-position-y: center;
  55      }
  56
  57      #slide-1 .slide div {
  58          display: flex;
  59          width: 40%;
  60      }
  61
  62      img {
  63          image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
  64          image-rendering: -moz-crisp-edges;          /* Firefox                        */
  65          image-rendering: -o-crisp-edges;            /* Opera                          */
  66          image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
  67          image-rendering: pixelated; /* Chrome */
  68          image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
  69          -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */
  70      }
  71
  72      #slide-1 .shake-constant, .crazy, .span {
  73          display: inline-block;
  74      }
  75
  76      #slide-1 .shake-opacity {
  77          color: #f98012;
  78      }
  79
  80      #slide-1 #rant {
  81          padding: 20px;
  82          height: 80%;
  83      }
  84
  85      .textbox {
  86          box-shadow: 10px 10px 0 #00000069;
  87          border: 2px solid black;
  88          background-color: #3f6382;
  89      }
  90
  91          div[id^="slide-"] {
  92              display: none;
  93          }
  94     </style>
  95 </head>
  96 <body>
  97     <div id="slide-1">
  98         <div class="slide-title">=<< What's up with that Title? >>=</div>
  99         <div class="slide">
 100             <div style="justify-content: right;">
 101                 <img class="shake-constant shake" src="img/wide-eyed-crazy.png" style="width: 70%; margin-right: 10%;">
 102             </div>
 103             <div style="justify-content: left">
 104                 <div style="display: flex; align-items: center; width: 70%">
 105                     <div id="rant" class="textbox" style="display: block;height: auto; width:100%; margin-left:10%;">
 106                         <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>
 107                     </div>
 108                 </div>
 109             </div>
 110             <div>Fig 1.1 What most people thing a typical functional programming advocate looks like</div>
 111         </div>
 112     </div>
 113     <div id="slide-2">
 114         <div class="slide-title">=<< Obligatory Quote >>=</div>
 115         <div class="slide">
 116         </div>
 117     </div>
 118     <div id="slide-3">
 119         <div class="slide-title">=<< Obligatory Quote >>=</div>
 120         <div class="slide">
 121             <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>
 122         </div>
 123     </div>
 124     <div id="slide-4">
 125         <div class="slide-title">=<< The Third Slide >>=</div>
 126         <div class="slide">
 127             <pre><code class="haskell textbox">Left "Hello" >>= \x -> Right "ah shit"</code></pre>
 128         </div>
 129     </div>
 130 </body>
 131 <script>
 132  (function() {
 133      var div, i, j, span, duration = "";
 134      var crazyTexts = [];
 135      var opacyTexts = [];
 136      div = document.querySelectorAll("#rant > span.crazy");
 137      for (j = 0; j < div.length; j++) {
 138          span=""
 139          for (i = 0; i < div[j].innerText.length; i++) {
 140              duration = Math.floor(Math.random() * 5) + 100
 141              span += "<span class=\"letter shake-constant shake-little\" style=\"animation-duration: " + duration + "ms\">";
 142              span += div[j].innerText[i] == " " ? "&nbsp;" : div[j].innerText[i];
 143              span += "</span>";
 144          }
 145          crazyTexts.push(span);
 146      }
 147
 148      opacities = document.querySelectorAll("#rant > span.shake-opacity");
 149      for (k = 0; k < opacities.length; k++) {
 150          shrek=Math.random();
 151          opacities[k].style.animationDuration = shrek + 's';
 152          opacyTexts.push(opacities[k].outerHTML);
 153      }
 154
 155      allText = ""
 156      for (l = 0; l< crazyTexts.length; l++) {
 157          allText+=crazyTexts[l] + "&nbsp;" + (opacyTexts[l] ? opacyTexts[l] : "") + "&nbsp";
 158      }
 159
 160      document.getElementById('rant').innerHTML = allText;
 161
 162      var x = 0;
 163      var y = 0;
 164      var b = document.querySelectorAll('body')[0];
 165      setInterval(function(){
 166          x+=2;
 167          y-=2;
 168          b.style.backgroundPosition = x + 'px ' + y + 'px';
 169      }, 250);
 170
 171      var currentSlide = 0;
 172      document.onkeydown = checkKey;
 173
 174      function checkKey(e) {
 175
 176          e = e || window.event;
 177          if (e.keyCode == '37') {
 178              if (document.getElementById('slide-' + currentSlide)) {
 179                  document.getElementById('slide-' + currentSlide).style.display = 'none';
 180              }
 181              currentSlide--;
 182              document.getElementById('slide-' + currentSlide).style.display = 'block';
 183          }
 184          else if (e.keyCode == '39') {
 185              if (document.getElementById('slide-' + currentSlide)) {
 186                  document.getElementById('slide-' + currentSlide).style.display = 'none';
 187              }
 188              currentSlide++;
 189              document.getElementById('slide-' + currentSlide).style.display = 'block';
 190          }
 191
 192      }
 193  })();
 194 </script>
 195 </html>