--- /dev/null
+<html><head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="https://csshake.surge.sh/csshake.min.css">
+ <link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
+ <link rel="stylesheet"
+ href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">
+ <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
+ <script>hljs.initHighlightingOnLoad();</script>
+ <style>
+ body {
+ margin: 0px;
+ font-family: 'Press Start 2P', cursive;
+ color: white;
+ text-shadow:
+ 1px 1px 0 #000;
+ background-color: #f98012;
+ background-image: url("img/tile.png");
+ background-repeat: repeat;
+ background-size: 10%;
+ image-rendering: crisp-edges;
+ background-position-x: -33px;
+ background-blend-mode: multiply;
+ }
+
+ .hljs {
+ font-family: 'Press Start 2P', cursive;
+ text-shadow: 2px 2px 0 #000;
+ color: #bcbcbc;
+ font-size: 30px;
+ }
+
+ .slide-title {
+ font-size: 40px;
+ margin: 20px;
+ text-shadow: 10px 10px 0 #00000069;
+ text-align: center;
+ }
+
+ .slide {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ margin: 40px;
+ box-shadow: 10px 10px 0 #00000069;
+ padding: 20px;
+ height: 80%;
+ background: #6187a8;
+ background-image: url("img/tile-nopad-bottom.png");
+ background-blend-mode: multiply;
+ background-size: 50%;
+ background-repeat: repeat-x;
+ background-position-x: center;
+ background-position-y: center;
+ }
+
+ #slide-1 .slide div {
+ display: flex;
+ width: 40%;
+ }
+
+ img {
+ image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
+ image-rendering: -moz-crisp-edges; /* Firefox */
+ image-rendering: -o-crisp-edges; /* Opera */
+ image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
+ image-rendering: pixelated; /* Chrome */
+ image-rendering: optimize-contrast; /* CSS3 Proposed */
+ -ms-interpolation-mode: nearest-neighbor; /* IE8+ */
+ }
+
+ #slide-1 .shake-constant, .crazy, .span {
+ display: inline-block;
+ }
+
+ #slide-1 .shake-opacity {
+ color: #f98012;
+ }
+
+ #slide-1 #rant {
+ padding: 20px;
+ height: 80%;
+ }
+
+ .textbox {
+ box-shadow: 10px 10px 0 #00000069;
+ border: 2px solid black;
+ background-color: #3f6382;
+ }
+
+ div[id^="slide-"] {
+ display: none;
+ }
+ </style>
+</head>
+<body>
+ <div id="slide-1">
+ <div class="slide-title">=<< What's up with that Title? >>=</div>
+ <div class="slide">
+ <div style="justify-content: right;">
+ <img class="shake-constant shake" src="img/wide-eyed-crazy.png" style="width: 70%; margin-right: 10%;">
+ </div>
+ <div style="justify-content: left">
+ <div style="display: flex; align-items: center; width: 70%">
+ <div id="rant" class="textbox" style="display: block;height: auto; width:100%; margin-left:10%;">
+ <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>
+ </div>
+ </div>
+ </div>
+ <div>Fig 1.1 What most people thing a typical functional programming advocate looks like</div>
+ </div>
+ </div>
+ <div id="slide-2">
+ <div class="slide-title">=<< Obligatory Quote >>=</div>
+ <div class="slide">
+ </div>
+ </div>
+ <div id="slide-3">
+ <div class="slide-title">=<< Obligatory Quote >>=</div>
+ <div class="slide">
+ <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>
+ </div>
+ </div>
+ <div id="slide-4">
+ <div class="slide-title">=<< The Third Slide >>=</div>
+ <div class="slide">
+ <pre><code class="haskell textbox">Left "Hello" >>= \x -> Right "ah shit"</code></pre>
+ </div>
+ </div>
+</body>
+<script>
+ (function() {
+ var div, i, j, span, duration = "";
+ var crazyTexts = [];
+ var opacyTexts = [];
+ div = document.querySelectorAll("#rant > span.crazy");
+ for (j = 0; j < div.length; j++) {
+ span=""
+ for (i = 0; i < div[j].innerText.length; i++) {
+ duration = Math.floor(Math.random() * 5) + 100
+ span += "<span class=\"letter shake-constant shake-little\" style=\"animation-duration: " + duration + "ms\">";
+ span += div[j].innerText[i] == " " ? " " : div[j].innerText[i];
+ span += "</span>";
+ }
+ crazyTexts.push(span);
+ }
+
+ opacities = document.querySelectorAll("#rant > span.shake-opacity");
+ for (k = 0; k < opacities.length; k++) {
+ shrek=Math.random();
+ opacities[k].style.animationDuration = shrek + 's';
+ opacyTexts.push(opacities[k].outerHTML);
+ }
+
+ allText = ""
+ for (l = 0; l< crazyTexts.length; l++) {
+ allText+=crazyTexts[l] + " " + (opacyTexts[l] ? opacyTexts[l] : "") + " ";
+ }
+
+ document.getElementById('rant').innerHTML = allText;
+
+ var x = 0;
+ var y = 0;
+ var b = document.querySelectorAll('body')[0];
+ setInterval(function(){
+ x+=2;
+ y-=2;
+ b.style.backgroundPosition = x + 'px ' + y + 'px';
+ }, 250);
+
+ var currentSlide = 0;
+ document.onkeydown = checkKey;
+
+ function checkKey(e) {
+
+ e = e || window.event;
+ if (e.keyCode == '37') {
+ if (document.getElementById('slide-' + currentSlide)) {
+ document.getElementById('slide-' + currentSlide).style.display = 'none';
+ }
+ currentSlide--;
+ document.getElementById('slide-' + currentSlide).style.display = 'block';
+ }
+ else if (e.keyCode == '39') {
+ if (document.getElementById('slide-' + currentSlide)) {
+ document.getElementById('slide-' + currentSlide).style.display = 'none';
+ }
+ currentSlide++;
+ document.getElementById('slide-' + currentSlide).style.display = 'block';
+ }
+
+ }
+ })();
+</script>
+</html>
projects / fp-lecture.git / commitdiff
