<html><head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/csshake.min.css">
+ <link rel="stylesheet" href="css/animate.css">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/atom-one-dark.min.css">
margin: 20px;
text-shadow: 10px 10px 0 #00000069;
text-align: center;
- -webkit-text-stroke-width: 1px;
- -webkit-text-stroke-color: black;
}
.slide {
flex-wrap: wrap;
}
- #cloudguy {
+ #cloudguy, #cloudguy2 {
height: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
- #cgquotes {
+ #cloudguys {
+ height: 30%;
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+ text-align:center
+
+ }
+
+ #cloudguys img {
+ height: 100%;
+ }
+
+ #cloudguys div {
+ width: 20%;
+ max-width: 20%;
+ }
+
+ #cloudguys span {
+ display: block;
+ opacity: 0;
+ }
+
+ #cgquotes, #cloudguy2 > div > div {
font-size: 30px;
text-shadow: 2px 2px 0 #000;
}
<div id="slide-12">
<div class="slide-title">=<< What is a Function? >>=</div>
<div class="slide">
- <h1>This means a functional language has no equivalent construct for:</h1>
+ <h1>No equivalent constructs for:</h1>
<div class="textbox" style="width: 60%; margin: auto; text-align: left;">
<ul>
<li>For loops</li>
<li>Probably a bunch of other constructs I forgot</li>
</ul>
</div>
- <div class="textbox" style="width: 60%; margin: auto; margin-top:10px; text-align: left;">*In pure functional programming, there are true variables. That is, once you declare the value of a variable, you cannot change it. Contrast this with procedural languages where you can reassign a variable whenever you like.</div>
+ <div class="textbox" style="width: 60%; margin: auto; margin-top:10px;">*In pure functional programming, there are true variables. That is, once you declare the value of a variable, you cannot change it. Contrast this with procedural languages where you can reassign a variable whenever you like.</div>
</div>
</div>
<div id="slide-13">
<div id="slide-15">
<div class="slide-title">=<< Huh? >>=</div>
<div class="slide">
- <h1>Why would you wanna do that?!</h1>
+ <h1>Why tho?</h1>
<div class="textbox" style="width: 60%; margin: auto; text-align: left;">
<ul>
<li>Learning is good</li>
<li>As we know, the brain has 3 main cortexes. The passion cortex, the power cortext, and the logic cortex</li>
<li>As programmers we need to engorge mostly the logic cortext, but also the passion cortex - as this is a profession that involves other people.</li>
<li>Communicating about programs written in the functional style is actually easier than the programs written in the procedural style. More on that later</li>
+ <li>And lets not forget that our very own MoodleNet is written in Elixir. A functional language.</li>
</ul>
</div>
</div>
<div id="slide-20">
<div class="slide-title">=<< To Recap >>=</div>
<div class="slide">
- <h2>Why would you wanna do that?</h2>
+ <h1>Why tho?</h1>
<div class="textbox" style="width: 60%; margin: auto; text-align: left;">
<ul>
<li>Because sometimes there is such a thing as too much freedom</li>
</div>
<h2>OK, so what?</h2>
<div style="display: flex;">
- <div class="textbox" style="margin: auto; width: 60%; font-size: 20px;">In the declaritive paradigm, <span class="code-friends1" onmouseenter="activateFriends(1);" onmouseleave="deactivateFriends(1);" style="display: inline-block;">this</span> code hangs while <span class="code-friends2" onmouseenter="activateFriends(2);" onmouseleave="deactivateFriends(2);" style="display: inline-block;">this</span> code runs. In the imperative paradigm <span class="code-friends3" onmouseenter="activateFriends(3);" onmouseleave="deactivateFriends(3);" style="display: inline-block;">this</span> code hangs, while <span class="code-friends4" onmouseenter="activateFriends(4);" onmouseleave="deactivateFriends(4);" style="display: inline-block;">this</span> code runs.</div>
+ <div class="textbox" style="margin: auto; width: 60%; font-size: 20px;">In the declaritive paradigm, <span class="code-friends1" onmouseenter="activateFriends(1, true);" onmouseleave="deactivateFriends(1);" style="display: inline-block;">this</span> code hangs while <span class="code-friends2" onmouseenter="activateFriends(2, true);" onmouseleave="deactivateFriends(2);" style="display: inline-block;">this</span> code runs. In the imperative paradigm <span class="code-friends3" onmouseenter="activateFriends(3, true);" onmouseleave="deactivateFriends(3);" style="display: inline-block;">this</span> code hangs, while <span class="code-friends4" onmouseenter="activateFriends(4, true);" onmouseleave="deactivateFriends(4);" style="display: inline-block;">this</span> code runs.</div>
</div>
</div>
</div>
</div>
<div id="slide-29">
<div class="slide-title">=<< Big Brain Moment >>=</div>
- <div class="slide flexotron">
+ <div class="slide">
<h1>What did declaritive mode give us?</h1>
<div class="textbox" style="width: 60%; margin: auto; text-align: left;">
<ul>
</div>
</div>
<div id="slide-30">
- <div class="slide-title">=<< Big Brain Moment >>=</div>
+ <div class="slide-title">=<< Promises >>=</div>
<div class="slide flexotron">
<h1>Promises</h1>
</div>
</ul>
</div>
</div>
+ <div id="slide-40">
+ <div class="slide-title">=<< Composition >>=</div>
+ <div class="slide flexotron">
+ <img src="img/composition0.png" style="height: 700px;" />
+ </div>
+ </div>
+ <div id="slide-41">
+ <div class="slide-title">=<< Composition >>=</div>
+ <div class="slide flexotron">
+ <div style="position: relative;">
+ <div style="position: absolute; top: -40px; left: -106px">If we can go from here to here</div>
+ <img src="img/composition1.png" style="height: 700px;" />
+ </div>
+ </div>
+ </div>
+ <div id="slide-42">
+ <div class="slide-title">=<< Composition >>=</div>
+ <div class="slide flexotron">
+ <div style="position: relative;">
+ <div style="position: absolute; top: -40px; left: -106px">If we can go from here to here</div>
+ <div style="position: absolute; max-width: 425px; text-align: center; bottom: 149px; left: 220px">And we can go from here to here</div>
+ <img src="img/composition2.png" style="height: 700px;" />
+ </div>
+ </div>
+ </div>
+ <div id="slide-43">
+ <div class="slide-title">=<< Composition >>=</div>
+ <div class="slide flexotron">
+ <div style="position: relative;">
+ <div style="position: absolute; top: -40px; left: -106px">If we can go from here to here</div>
+ <div style="position: absolute; max-width: 425px; text-align: center; bottom: 149px; left: 220px">And we can go from here to here</div>
+ <div style="position: absolute; text-align: center; bottom: -70px; left: 82px">Then the composition (if it exists) goes from here to here</div>
+ <img src="img/composition3.png" style="height: 700px;" />
+ </div>
+ </div>
+ </div>
+ <div id="slide-44">
+ <div class="slide-title">=<< Composition >>=</div>
+ <div class="slide">
+ <h1>OK great but who cares?</h1>
+ </div>
+ </div>
+ <div id="slide-45">
+ <div class="slide-title">=<< Composition >>=</div>
+ <div class="slide">
+ <h1>OK great but who cares?</h1>
+ <div class="textbox" style="width: 60%; margin: auto;">Big problems can often be chopped up in to smaller, easier to solve problems. If we can be clever about how we chop them up, such that the solutions to the individual problems can <span class="highlight">compose</span> together to form a full solution, then we can infinitely speed up the process by adding more workers!</div>
+ </div>
+ </div>
+ <div id="slide-46">
+ <div class="slide-title">=<< Composition >>=</div>
+ <div class="slide">
+ <h1>Examples</h1>
+ <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
+ <ul>
+ <li>The pyramids</li>
+ <li>The LHC</li>
+ <li>McDonald's</li>
+ <li>Moodle!</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div id="slide-46">
+ <div class="slide-title">=<< Composition >>=</div>
+ <div class="slide"></div>
+ <div class="notes">
+ <ul>
+ <li>Think about how we do dev at moodle</li>
+ </ul>
+ </div>
+ </div>
+ <div id="slide-47">
+ <div class="slide-title">=<< Composition >>=</div>
+ <div class="slide">
+ <div class="textbox" style="margin-bottom: 20px; width: 60% margin: auto;"><h2>Do you get one "leet" dev to solve the whole thing?</h2></div>
+ <img src="img/10xdev.png" class="textbox" style="margin-bottom: 20px; height: 60%; display: block; margin: auto; padding-bottom: 0px;" />
+ <div class="textbox" style="margin-top: 20px !important; width: 60%; margin: auto">With these biceps I can solve <span class="highlight shake shake-constant">ANYTHING</span></div>
+ </div>
+ </div>
+ <div id="slide-48">
+ <div class="slide-title">=<< Composition >>=</div>
+ <div class="slide flexotron">
+ <div class="textbox"><h1>No, you get friends to take a piece and help!</h1></div>
+ <div id="cloudguys">
+ <div>
+ <span>henlo</span>
+ <img src="img/cloudguy.gif" />
+ </div>
+ <div>
+ <span>henlo</span>
+ <img src="img/cloudguy.gif" />
+ </div> <div>
+ <span>henlo</span>
+ <img src="img/cloudguy.gif" />
+ </div>
+ <div>
+ <span>henlo</span>
+ <img src="img/cloudguy.gif" />
+ </div>
+ <div>
+ <span>henlo</span>
+ <img src="img/cloudguy.gif" />
+ </div>
+ <div>
+ <span>henlo</span>
+ <img src="img/cloudguy.gif" />
+ </div>
+ </div>
+ </div>
+ <div class="notes">
+ <ul>
+ <li>This is why it's worth spending the time to plan things and figure out how to "chop up" the work</li>
+ </ul>
+ </div>
+ </div>
+ <div id="slide-49">
+ <div class="slide-title">=<< Composition >>=</div>
+ <div class="slide flexotron">
+ <div class="textbox" style="text-align:center; font-size:40px; text-shadow: 4px 4px #000; padding:20px;" >Composition is nature's greatest hack</div>
+ </div>
+ <div class="notes">
+ <ul>
+ <li>My goal here was to try and convince you that composition really is important and is fundamental to the way we think</li>
+ <li>At its core, composition is about relationships, and building complexity by combining them. Hey, wasn't the whole declaritive thing about relationships?</li>
+ <li>And that brings me to my final point</li>
+ </ul>
+ </div>
+ </div>
+ <div id="slide-50">
+ <div class="slide-title">=<< Composition >>=</div>
+ <div class="slide">
+ <h1>What's this got to do with FP?</h1>
+ <div class="textbox" style="width: 60%; margin: auto;">When writing programs (as an individual in this case, not as a group) we naturally want to break the solution up in to "building blocks" that we put together to solve the problem (it's composition again).</div>
+ <div class="textbox" style="width: 60%; margin: auto; margin-top: 20px;">The building blocks you use matter. Some compose better than otheres. Because of all the restrictions the functional paradigm places on the programmer (lack of mutation, lack of control flow), functions in a pure language are naturally well-suited to composition.</div>
+ <div class="textbox" style="width: 60%; margin: auto; margin-top: 20px;">This is becoming more relevant than ever in the age of parallel computing</div>
+ </div>
+ </div>
+ <div id="slide-51">
+ <div class="slide-title">=<< Composition >>=</div>
+ <div class="slide">
+ <h1>What's this got to do with FP?</h1>
+ <div class="textbox" style="width: 60%; margin: auto;">When writing programs (as an individual in this case, not as a group) we naturally want to break the solution up in to "building blocks" that we put together to solve the problem (it's composition again).</div>
+ <div class="textbox" style="width: 60%; margin: auto; margin-top: 20px;">The building blocks you use matter. Some compose better than otheres. Because of all the restrictions the functional paradigm places on the programmer (lack of mutation, lack of control flow), functions in a pure language are naturally well-suited to composition.</div>
+ <div class="textbox" style="width: 60%; margin: auto; margin-top: 20px;">This is becoming more relevant than ever in the age of parallel computing</div>
+ </div>
+ </div>
+ <div id="slide-52">
+ <div id="cloudguy2">
+ <div style="height: 20%; text-align: center;">
+ <img style="height: 100%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;" src="img/cloudguy.gif" />
+ <div style="width: 80%; margin: auto;">Thanks for listening!!</div>
+ </div>
+ </div>
+ </div>
</body>
<script>
var div, i, j, span, duration = "";
}
- function activateFriends(n) {
+ function activateFriends(n, noshake) {
f = document.querySelectorAll('.code-friends' + n);
for (fr = 0; fr< f.length; fr++) {
- f[fr].classList.add("shake-constant");
- f[fr].classList.add("shake-slow");
+ if (!noshake) {
+ f[fr].classList.add("shake-constant");
+ f[fr].classList.add("shake-slow");
+ }
f[fr].classList.add("on");
}
}
cgq.innerText = cloudGuyQuotes[currentQuote];
}, 10000);
+ helperQuotes = [
+ "Let's go!",
+ "Here to help!",
+ "Aw yeah!",
+ "Power!",
+ "Teamwork!",
+ "Let's code!"
+ ];
+
+ function animateCSS(element, animationName, callback) {
+ const node = element;
+ node.classList.add('animated', animationName)
+
+ function handleAnimationEnd() {
+ node.classList.remove('animated', animationName)
+ node.removeEventListener('animationend', handleAnimationEnd)
+ node.style.opacity = '0';
+ if (typeof callback === 'function') callback()
+ }
+
+ node.addEventListener('animationend', handleAnimationEnd)
+ }
+
+ helpers = document.querySelectorAll("#cloudguys span");
+ setInterval(function(){
+ quote = Math.floor(Math.random()*(helperQuotes.length));
+ helper = Math.floor(Math.random()*(helpers.length));
+ helpers[helper].innerText = helperQuotes[quote];
+ animateCSS(helpers[helper], 'fadeOutUp');
+ }, 1000);
+
+
angeries = document.querySelectorAll(".angereyWrap");
usedPositions = [];
shakes = ["shake", "shake-hard", "shake-slow", "shake-little", "shake-horizontal", "shake-vertical", "shake-rotate", "shake-opacity", "shake-crazy", "shake-chunk"];
projects / fp-lecture.git / blobdiff