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     <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     </style>
  96 </head>
  97 <body>
  98     <div id="slide-1">
  99         <div class="slide-title">=<< What's up with that Title? >>=</div>
 100         <div class="slide">
 101             <div style="justify-content: right;">
 102                 <img class="shake-constant shake" src="img/wide-eyed-crazy.png" style="width: 70%; margin-right: 10%;">
 103             </div>
 104             <div style="justify-content: left">
 105                 <div style="display: flex; align-items: center; width: 70%">
 106                     <div id="rant" class="textbox" style="display: block;height: auto; width:100%; margin-left:10%;">
 107                         <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>
 108                     </div>
 109                 </div>
 110             </div>
 111             <div>Fig 1.1 What most people thing a typical functional programming advocate looks like</div>
 112         </div>
 113     </div>
 114     <div id="slide-2">
 115         <div class="slide-title">=<< Obligatory Quote >>=</div>
 116         <div class="slide">
 117         </div>
 118     </div>
 119     <div id="slide-3">
 120         <div class="slide-title">=<< Obligatory Quote >>=</div>
 121         <div class="slide">
 122             <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>
 123         </div>
 124     </div>
 125     <div id="slide-4">
 126         <div class="slide-title">=<< The Third Slide >>=</div>
 127         <div class="slide">
 128             <pre><code class="haskell textbox">Left "Hello" >>= \x -> Right "ah shit"</code></pre>
 129         </div>
 130     </div>
 131 </body>
 132 <script>
 133  (function() {
 134      var div, i, j, span, duration = "";
 135      var crazyTexts = [];
 136      var opacyTexts = [];
 137      div = document.querySelectorAll("#rant > span.crazy");
 138      for (j = 0; j < div.length; j++) {
 139          span=""
 140          for (i = 0; i < div[j].innerText.length; i++) {
 141              duration = Math.floor(Math.random() * 5) + 100
 142              span += "<span class=\"letter shake-constant shake-little\" style=\"animation-duration: " + duration + "ms\">";
 143              span += div[j].innerText[i] == " " ? "&nbsp;" : div[j].innerText[i];
 144              span += "</span>";
 145          }
 146          crazyTexts.push(span);
 147      }
 148
 149      opacities = document.querySelectorAll("#rant > span.shake-opacity");
 150      for (k = 0; k < opacities.length; k++) {
 151          shrek=Math.random();
 152          opacities[k].style.animationDuration = shrek + 's';
 153          opacyTexts.push(opacities[k].outerHTML);
 154      }
 155
 156      allText = ""
 157      for (l = 0; l< crazyTexts.length; l++) {
 158          allText+=crazyTexts[l] + "&nbsp;" + (opacyTexts[l] ? opacyTexts[l] : "") + "&nbsp";
 159      }
 160
 161      document.getElementById('rant').innerHTML = allText;
 162
 163      var x = 0;
 164      var y = 0;
 165      var b = document.querySelectorAll('body')[0];
 166      setInterval(function(){
 167          x+=2;
 168          y-=2;
 169          b.style.backgroundPosition = x + 'px ' + y + 'px';
 170      }, 250);
 171
 172      var currentSlide = 0;
 173      document.onkeydown = checkKey;
 174
 175      function checkKey(e) {
 176
 177          e = e || window.event;
 178          if (e.keyCode == '37') {
 179              if (document.getElementById('slide-' + currentSlide)) {
 180                  document.getElementById('slide-' + currentSlide).style.display = 'none';
 181              }
 182              currentSlide--;
 183              document.getElementById('slide-' + currentSlide).style.display = 'block';
 184          }
 185          else if (e.keyCode == '39') {
 186              if (document.getElementById('slide-' + currentSlide)) {
 187                  document.getElementById('slide-' + currentSlide).style.display = 'none';
 188              }
 189              currentSlide++;
 190              document.getElementById('slide-' + currentSlide).style.display = 'block';
 191          }
 192
 193      }
 194  })();
 195 </script>
 196 </html>