<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>
+ href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<title>Crazy Wide-Eyed Functional Programming</title>
<style>
}
.slide {
- display: flex;
- justify-content: center;
- align-items: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
flex-wrap: wrap;
margin: 40px;
box-shadow: 10px 10px 0 #00000069;
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;
+ background-blend-mode: multiply;
+ background-size: 50%;
+ background-repeat: repeat-x;
+ background-position-x: center;
+ background-position-y: center;
}
#slide-1 .slide div {
background-color: #3f6382;
}
- div[id^="slide-"] {
- display: none;
- }
+ div[id^="slide-"] {
+ display: none;
+ }
+
+ span[class^="code-friends"].on {
+ color: #f98012;
+ }
</style>
</head>
<body>
<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>
+ <pre><code class="javascript textbox">Promise.resolve("We start here")
+ <span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">.then</span>(x => Promise.resolve(x + " then get here"))
+ .then(x => Promise.resolve(x + " and finally here!"))</code></pre>
+ <pre><code class="haskell textbox">Right("We start here")
+ <span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">>>=</span> (\x -> Right (x ++ " then get here"))
+ >>= (\x -> Right (x ++ " and finally here!"))</code></pre>
</div>
</div>
</body>
}
})();
+ function activateFriends(n) {
+ f = document.querySelectorAll('.code-friends' + n);
+ f[0].classList.add("shake-constant");
+ f[0].classList.add("shake-slow");
+ f[0].classList.add("on");
+ f[1].classList.add("shake-constant");
+ f[1].classList.add("shake-slow");
+ f[1].classList.add("on");
+ }
+
+ function deactivateFriends(n) {
+ f = document.querySelectorAll('.code-friends' + n);
+ f[0].classList.remove("shake-constant");
+ f[0].classList.remove("shake-slow");
+ f[0].classList.remove("on");
+ f[1].classList.remove("shake-constant");
+ f[1].classList.remove("shake-slow");
+ f[1].classList.remove("on");
+ }
</script>
</html>
projects / fp-lecture.git / commitdiff
