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