image-rendering: crisp-edges;
background-position-x: -33px;
background-blend-mode: multiply;
+ font-size: 22px;
}
.angereyWrap {
transform: rotate(90deg) scale(1, 1.5);
}
+ .thonkingWrap {
+ position: absolute;
+ }
+
.hljs {
font-family: 'Press Start 2P', cursive;
text-shadow: 2px 2px 0 #000;
overflow: hidden;
}
- h1 {
+ h1, h2 {
text-shadow: 2px 2px 0 #000;
}
}
.slide {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-wrap: wrap;
margin: 40px;
box-shadow: 10px 10px 0 #00000069;
padding: 20px;
background: #6187a8e3;
}
+ .flexotron {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-wrap: wrap;
+ }
+
#slide-0 #cloudguy {
height: 100%;
display: flex;
width: 40%;
}
+ li {
+ list-style: square;
+ }
+
img {
image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */
image-rendering: -moz-crisp-edges; /* Firefox */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}
+ .fig {
+ text-align: center;
+ }
+
#slide-1 .shake-constant, .crazy, .span {
display: inline-block;
}
#slide-1 #rant {
padding: 20px;
height: 80%;
+ font-size: 14px;
}
.textbox {
+ text-align: center;
box-shadow: 10px 10px 0 #00000069;
border: 2px solid black;
background-color: #3f6382;
+ padding: 5px;
}
.hljs {
display: none;
}
- span[class^="code-friends"].on {
+ span[class^="code-friends"].on, span[class^="code-friends"].on > span {
color: #f98012 !important;
}
- span[class^="code-friends"].on > span {
+ span[class^="promise"].on, span[class^="promise"].on > span, span[class^="promise"].on > span > span, span[class^="promise"].on > span > span > span {
color: #f98012 !important;
}
+ .highlight {
+ color: #f98012;
+ }
+
+ li {
+ margin-top: 10px;
+ }
</style>
</head>
<body>
</div>
<div id="slide-1">
<div class="slide-title">=<< What's up with that Title? >>=</div>
- <div class="slide">
+ <div class="slide flexotron">
<div style="justify-content: right;">
<img class="shake-constant shake" src="img/wide-eyed-crazy.png" style="width: 70%; margin-right: 10%;">
</div>
</div>
</div>
</div>
- <div>Fig 1.1 What most people thing a typical functional programming advocate looks like</div>
+ <div class="fig">Fig 1.1 What most people thing a typical functional programming advocate looks like</div>
</div>
</div>
<div id="slide-2">
</div>
<div id="slide-4">
<div class="slide-title">=<< Promises >>=</div>
- <div class="slide">
+ <div class="slide flexotron">
<div style="position: relative; text-align:center; font-size:40px; text-shadow: 4px 4px #000;" >
<div class="angereyWrap"><div class="angerey">>:(</div></div>
<div class="angereyWrap"><div class="angerey">>:(</div></div>
<div class="angereyWrap"><div class="angerey">>:(</div></div>
Promises <span class="shake-slow shake-constant" style="display: inline-block; color: #f98012">do not</span> make things asynchronous!</div>
</div>
-
</div>
<div id="slide-5">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide">
- <h1>JavaScript</h1>
- <pre><code class="javascript"><span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends2" onmouseenter="activateFriends(2);" onmouseleave="deactivateFriends(2);" style="display: inline-block">"We start here"</span>)
+ <h1>What problem to promises solve?</h1>
+ <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
+ <ul>
+ <li>Asynchronous request management</li>
+ <li>Error handling for computations which may fail</li>
+ <li>Probably more too</li>
+ </ul>
+ </div>
+ <h1 style="margin-top: 50px;">What are promises then?</h1>
+ <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
+ <ul>
+ <li>A value (which may or may not be available yet) wrapped in some additional context</li>
+ <li>Functions to instantiate the wrapper (Promise.resolve, Promise.reject)
+ <li>A rule for composing these wrapped values (then)</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div id="slide-6">
+ <div class="slide-title">=<< Promises >>=</div>
+ <div class="slide">
+ <h1>Terminology/syntax recap</h1>
+ <h2>JavaScript arrow functions</h2>
+ <div style="display: flex;">
+ <pre style="margin: auto;"><code style="font-size: 20px;">x => x + 1;</code></pre>
+ </div>
+ <div style="display: flex; margin-top: 20px; margin-bottom: 20px;">
+ <span style="margin: auto;">is equivalent to:</span>
+ </div>
+ <div style="display: flex; margin-bottom:50px;">
+ <pre style="margin: auto;"><code style="font-size: 20px;">function(x) {
+ return x+1;
+}</code></pre>
+ </div>
+ <h2>Composition</h2>
+ <div style="display: flex;">
+ <div class="textbox" style="margin: auto; width: 60%; font-size: 20px;">A method of combining two things of the same type in to another thing that is also of the same type</div>
+ </div>
+ </div>
+ </div>
+ <div id="slide-7">
+ <div class="slide-title">=<< Promises >>=</div>
+ <div class="slide">
+ <h1>Promise composition</h1>
+ <div style="display: flex;">
+ <div class="textbox" style="margin: auto; width: 60%; font-size: 20px;">The `then` method of a promise accepts a function as an argument. This function takes a value and returns a new promise. The result of `then` is now a new promise that combines the previous two using the "composition rule" given to `then`.</div>
+ </div>
+ <div style="display: flex; margin-top: 100px">
+ <pre style="margin: auto;"><code style="font-size: 12px;"><span class="promise3"><span class="promise2"><span class="promise1">Promise.resolve("Some value")</span>.then(x => Promise.resolve(x + " and another value"))</span>.then(x => Promise.resolve(x + "and another one!"))</span>;</code></pre>
+ </div>
+ <div style="display: flex;">
+ <div class="textbox" style="margin: auto; width: 60%; font-size: 20px; margin-top: 50px;">There are three promises in the above snippet. <span onmouseenter="activatePromise(1)" onmouseleave="deactivatePromise(1)" class="promise1">One</span>, <span onmouseenter="activatePromise(2)" onmouseleave="deactivatePromise(2)" class="promise2">two</span>, <span onmouseenter="activatePromise(3)" onmouseleave="deactivatePromise(3)" class="promise3">three</span>.</div>
+ </div>
+ <div style="display: flex; margin-top: 100px">
+ <pre style="margin: auto;"><code style="font-size: 12px;">Promise.resolve("Some value").then(x => Promise.reject("It's all gone wrong")).then(x => Promise.resolve(x + "and another one!"));</code></pre>
+ </div>
+ <div style="display: flex;">
+ <div class="textbox" style="margin: auto; width: 60%; font-size: 20px; margin-top: 50px;">The above snippet still results in a promise, but it is a "failed" one. Any subsequent `then` after the `reject` has no effect.</div>
+ </div>
+ </div>
+ </div>
+ <div id="slide-8">
+ <div class="slide-title">=<< Promises >>=</div>
+ <div class="slide">
+ <h1>OK great but who cares?</h1>
+ <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
+ <ul>
+ <li>We are <span class="shake-constant shake-opacity highlight" style="display: inline-block;">declaring</span> how we want promises to compose</li>
+ <li>
+ The order that the promises actually resolve their values in is not important
+ <ul><li>In other words, we don't have to worry about <span class="shake-constant shake-opacity highlight" style="display: inline-block;">timing</span> anymore</li></ul>
+ </li>
+ <li>We can <span class="shake-constant shake-opacity highlight" style="display: inline-block;">declare</span> a failure anywhere in the chain</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div id="slide-9">
+ <div class="slide-title">=<< Promises >>=</div>
+ <div class="slide flexotron">
+ <div style="position: relative;">
+ <img src="img/thonking.gif" />
+ <div class="thonkingWrap"><div class="thonk">atemporality?</div></div>
+ <div class="thonkingWrap"><div class="thonk">declaritive?</div></div>
+ <div class="thonkingWrap"><div class="thonk">functions?</div></div>
+ <div class="thonkingWrap"><div class="thonk">composition?</div></div>
+ </div>
+ </div>
+ </div>
+ <div id="slide-10">
+ <div class="slide-title">=<< Promises >>=</div>
+ <div class="slide">
+ <h1>Woah!</h1>
+ <h2>JavaScript</h2>
+ <pre style="margin-bottom: 50px;"><code class="javascript"><span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends2" onmouseenter="activateFriends(2);" onmouseleave="deactivateFriends(2);" style="display: inline-block">"We start here"</span>)
<span class="code-friends3" onmouseenter="activateFriends(3);" onmouseleave="deactivateFriends(3);" style="display: inline-block">.then</span>(<span class="code-friends4" onmouseenter="activateFriends(4);" onmouseleave="deactivateFriends(4);" style="display: inline-block">x =></span> <span class="code-friends5" onmouseenter="activateFriends(5);" onmouseleave="deactivateFriends(5);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends6" onmouseenter="activateFriends(6);" onmouseleave="deactivateFriends(6);" style="display: inline-block">x + " then get here"</span>))
<span class="code-friends7" onmouseenter="activateFriends(7);" onmouseleave="deactivateFriends(7);" style="display: inline-block">.then</span>(<span class="code-friends8" onmouseenter="activateFriends(8);" onmouseleave="deactivateFriends(8);" style="display: inline-block">x =></span> <span class="code-friends9" onmouseenter="activateFriends(9);" onmouseleave="deactivateFriends(9);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends10" onmouseenter="activateFriends(10);" onmouseleave="deactivateFriends(10);" style="display: inline-block">x + " and finally here!"</span>))</code></pre>
- <h1>Haskell</h1>
+ <h2>Haskell</h2>
<pre><code class="haskell"><span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">Right</span>(<span class="code-friends2" onmouseenter="activateFriends(2);" onmouseleave="deactivateFriends(2);" style="display: inline-block">"We start here"</span>)
- <span class="code-friends3" onmouseenter="activateFriends(3);" onmouseleave="deactivateFriends(3);" style="display: inline-block">>>=</span> (<span class="code-friends4" onmouseenter="activateFriends(4);" onmouseleave="deactivateFriends(4);" style="display: inline-block">\x -> </span><span class="code-friends5" onmouseenter="activateFriends(5);" onmouseleave="deactivateFriends(5);" style="display: inline-block">Right</span> (<span class="code-friends6" onmouseenter="activateFriends(6);" onmouseleave="deactivateFriends(6);" style="display: inline-block">x ++ " then get here"</span>))
- <span class="code-friends7" onmouseenter="activateFriends(7);" onmouseleave="deactivateFriends(7);" style="display: inline-block">>>=</span> (<span class="code-friends8" onmouseenter="activateFriends(8);" onmouseleave="deactivateFriends(8);" style="display: inline-block">\x -></span> <span class="code-friends9" onmouseenter="activateFriends(9);" onmouseleave="deactivateFriends(9);" style="display: inline-block">Right</span> (<span class="code-friends10" onmouseenter="activateFriends(10);" onmouseleave="deactivateFriends(10);" style="display: inline-block">x ++ " and finally here!"</span>))</code></pre>
+ <span class="code-friends3" onmouseenter="activateFriends(3);" onmouseleave="deactivateFriends(3);" style="display: inline-block">>>=</span> (<span class="code-friends4" onmouseenter="activateFriends(4);" onmouseleave="deactivateFriends(4);" style="display: inline-block">\x -> </span><span class="code-friends5" onmouseenter="activateFriends(5);" onmouseleave="deactivateFriends(5);" style="display: inline-block">Right</span> (<span class="code-friends6" onmouseenter="activateFriends(6);" onmouseleave="deactivateFriends(6);" style="display: inline-block">x ++ " then get here"</span>))
+ <span class="code-friends7" onmouseenter="activateFriends(7);" onmouseleave="deactivateFriends(7);" style="display: inline-block">>>=</span> (<span class="code-friends8" onmouseenter="activateFriends(8);" onmouseleave="deactivateFriends(8);" style="display: inline-block">\x -></span> <span class="code-friends9" onmouseenter="activateFriends(9);" onmouseleave="deactivateFriends(9);" style="display: inline-block">Right</span> (<span class="code-friends10" onmouseenter="activateFriends(10);" onmouseleave="deactivateFriends(10);" style="display: inline-block">x ++ " and finally here!"</span>))</code></pre>
</div>
</div>
- <div id="slide-6">
+ <div id="slide-11">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide">
- <h1>JavaScript</h1>
- <pre><code class="javascript"><span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends2" onmouseenter="activateFriends(2);" onmouseleave="deactivateFriends(2);" style="display: inline-block">"We start here"</span>)
+ <h1>Woah!</h1>
+ <h2>JavaScript</h2>
+ <pre style="margin-bottom: 50px;"><code class="javascript"><span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends2" onmouseenter="activateFriends(2);" onmouseleave="deactivateFriends(2);" style="display: inline-block">"We start here"</span>)
<span class="code-friends3" onmouseenter="activateFriends(3);" onmouseleave="deactivateFriends(3);" style="display: inline-block">.then</span>(<span class="code-friends4" onmouseenter="activateFriends(4);" onmouseleave="deactivateFriends(4);" style="display: inline-block">x =></span> <span class="code-friends5" onmouseenter="activateFriends(5);" onmouseleave="deactivateFriends(5);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends6" onmouseenter="activateFriends(6);" onmouseleave="deactivateFriends(6);" style="display: inline-block">x + " then get here"</span>))
<span class="code-friends11" onmouseenter="activateFriends(11);" onmouseleave="deactivateFriends(11);" style="display: inline-block">.then</span>(<span class="code-friends12" onmouseenter="activateFriends(12);" onmouseleave="deactivateFriends(12);" style="display: inline-block">x =></span> <span class="code-friends13" onmouseenter="activateFriends(13);" onmouseleave="deactivateFriends(13);" style="display: inline-block">Promise.reject</span>(<span class="code-friends14" onmouseenter="activateFriends(14);" onmouseleave="deactivateFriends(14);" style="display: inline-block">"Oh noes!"</span>))
<span class="code-friends7" onmouseenter="activateFriends(7);" onmouseleave="deactivateFriends(7);" style="display: inline-block">.then</span>(<span class="code-friends8" onmouseenter="activateFriends(8);" onmouseleave="deactivateFriends(8);" style="display: inline-block">x =></span> <span class="code-friends9" onmouseenter="activateFriends(9);" onmouseleave="deactivateFriends(9);" style="display: inline-block">Promise.resolve</span>(<span class="code-friends10" onmouseenter="activateFriends(10);" onmouseleave="deactivateFriends(10);" style="display: inline-block">x + " and finally here!"</span>))</code></pre>
- <h1>Haskell</h1>
+ <h2>Haskell</h2>
<pre><code class="haskell"><span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block">Right</span>(<span class="code-friends2" onmouseenter="activateFriends(2);" onmouseleave="deactivateFriends(2);" style="display: inline-block">"We start here"</span>)
- <span class="code-friends3" onmouseenter="activateFriends(3);" onmouseleave="deactivateFriends(3);" style="display: inline-block">>>=</span> (<span class="code-friends4" onmouseenter="activateFriends(4);" onmouseleave="deactivateFriends(4);" style="display: inline-block">\x -> </span><span class="code-friends5" onmouseenter="activateFriends(5);" onmouseleave="deactivateFriends(5);" style="display: inline-block">Right</span> (<span class="code-friends6" onmouseenter="activateFriends(6);" onmouseleave="deactivateFriends(6);" style="display: inline-block">x ++ " then get here"</span>))
- <span class="code-friends11" onmouseenter="activateFriends(11);" onmouseleave="deactivateFriends(11);" style="display: inline-block">>>=</span> (<span class="code-friends12" onmouseenter="activateFriends(12);" onmouseleave="deactivateFriends(12);" style="display: inline-block">\x -></span> <span class="code-friends13" onmouseenter="activateFriends(13);" onmouseleave="deactivateFriends(13);" style="display: inline-block">Left </span>(<span class="code-friends14" onmouseenter="activateFriends(14);" onmouseleave="deactivateFriends(14);" style="display: inline-block">"Oh noes!"</span>))
- <span class="code-friends7" onmouseenter="activateFriends(7);" onmouseleave="deactivateFriends(7);" style="display: inline-block">>>=</span> (<span class="code-friends8" onmouseenter="activateFriends(8);" onmouseleave="deactivateFriends(8);" style="display: inline-block">\x -></span> <span class="code-friends9" onmouseenter="activateFriends(9);" onmouseleave="deactivateFriends(9);" style="display: inline-block">Right</span> (<span class="code-friends10" onmouseenter="activateFriends(10);" onmouseleave="deactivateFriends(10);" style="display: inline-block">x ++ " and finally here!"</span>))</code></pre>
+ <span class="code-friends3" onmouseenter="activateFriends(3);" onmouseleave="deactivateFriends(3);" style="display: inline-block">>>=</span> (<span class="code-friends4" onmouseenter="activateFriends(4);" onmouseleave="deactivateFriends(4);" style="display: inline-block">\x -> </span><span class="code-friends5" onmouseenter="activateFriends(5);" onmouseleave="deactivateFriends(5);" style="display: inline-block">Right</span> (<span class="code-friends6" onmouseenter="activateFriends(6);" onmouseleave="deactivateFriends(6);" style="display: inline-block">x ++ " then get here"</span>))
+ <span class="code-friends11" onmouseenter="activateFriends(11);" onmouseleave="deactivateFriends(11);" style="display: inline-block">>>=</span> (<span class="code-friends12" onmouseenter="activateFriends(12);" onmouseleave="deactivateFriends(12);" style="display: inline-block">\x -></span> <span class="code-friends13" onmouseenter="activateFriends(13);" onmouseleave="deactivateFriends(13);" style="display: inline-block">Left </span>(<span class="code-friends14" onmouseenter="activateFriends(14);" onmouseleave="deactivateFriends(14);" style="display: inline-block">"Oh noes!"</span>))
+ <span class="code-friends7" onmouseenter="activateFriends(7);" onmouseleave="deactivateFriends(7);" style="display: inline-block">>>=</span> (<span class="code-friends8" onmouseenter="activateFriends(8);" onmouseleave="deactivateFriends(8);" style="display: inline-block">\x -></span> <span class="code-friends9" onmouseenter="activateFriends(9);" onmouseleave="deactivateFriends(9);" style="display: inline-block">Right</span> (<span class="code-friends10" onmouseenter="activateFriends(10);" onmouseleave="deactivateFriends(10);" style="display: inline-block">x ++ " and finally here!"</span>))</code></pre>
</div>
</div>
</body>
document.getElementById('slide-' + currentSlide).style.display = 'block';
}
+ console.log(currentSlide);
}
+
function activateFriends(n) {
f = document.querySelectorAll('.code-friends' + n);
}
}
+ function activatePromise(n) {
+ p = document.querySelectorAll('.promise' + n);
+ for (fr = 0; fr< p.length; fr++) {
+ p[fr].classList.add('on');
+ }
+ }
+
+ function deactivatePromise(n) {
+ p = document.querySelectorAll('.promise' + n);
+ for (fr = 0; fr< p.length; fr++) {
+ p[fr].classList.remove('on');
+ }
+ }
+
cloudGuyQuotes = [
"Welcome to the talk!",
"I hope we'll have fun exploring functional programming together!",
angeries[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
usedPositions.push(thing);
}
+
+ thonkings = document.querySelectorAll(".thonkingWrap");
+ shakes = ["shake-slow", "shake-little", "shake-opacity"];
+ usedPositions = [];
+ for (a = 0; a < thonkings.length; a++) {
+ thing = Math.floor(Math.random() * 4) + 1;
+ randomnessX = -(Math.round(Math.random() * 50) + 1);
+ randomnessY = -(Math.round(Math.random() * 50) + 1);
+
+ while (usedPositions.includes(thing)) {
+ thing = Math.floor(Math.random() * 4) + 1;
+ }
+
+ switch(thing) {
+ case 1:
+ thonkings[a].style.left = randomnessX + 'px';
+ thonkings[a].style.top = randomnessY + 'px';
+ thonkings[a].children[0].style.transform = 'rotate(-45deg) scale(1, 1.5)'
+ thonkings[a].classList.add("shake-constant");
+ thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
+ break;
+ case 2:
+ thonkings[a].style.right = randomnessX + 'px';
+ thonkings[a].style.top = randomnessY + 'px';
+ thonkings[a].classList.add("shake-constant");
+ thonkings[a].children[0].style.transform = 'rotate(45deg) scale(1, 1.5)'
+ thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
+ break;
+ case 3:
+ thonkings[a].style.right = randomnessX + 'px';
+ thonkings[a].style.bottom = randomnessY + 'px';
+ thonkings[a].classList.add("shake-constant");
+ thonkings[a].children[0].style.transform = 'rotate(-225deg) scale(1, 1.5)'
+ thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
+ break;
+ case 4:
+ thonkings[a].style.left = randomnessX + 'px';
+ thonkings[a].style.bottom = randomnessY + 'px';
+ thonkings[a].classList.add("shake-constant");
+ thonkings[a].children[0].style.transform = 'rotate(225deg) scale(1, 1.5)'
+ thonkings[a].classList.add(shakes[Math.floor(Math.random()*shakes.length)]);
+ break;
+ }
+
+
+ usedPositions.push(thing);
+ }
</script>
</html>
projects / fp-lecture.git / commitdiff
