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;
}
- #slide-0 #cloudguy {
+ #cloudguy {
height: 100%;
display: flex;
justify-content: center;
text-shadow: 2px 2px 0 #000;
}
- #slide-1 .slide div {
+ .idk div {
display: flex;
width: 40%;
}
text-align: center;
}
- #slide-1 .shake-constant, .crazy, .span {
+ #rant .shake-constant, .crazy, .span {
display: inline-block;
}
- #slide-1 .shake-opacity {
+ #rant .shake-opacity {
color: #f98012;
}
- #slide-1 #rant {
+ #rant {
padding: 20px;
height: 80%;
font-size: 14px;
margin-top: 10px;
}
+ .notes {
+ display: none;
+ }
+
</style>
</head>
<body>
<div id="cgquotes" style="width: 80%; margin: auto;">Welcome to the talk!</div>
</div>
</div>
+ <div class="notes" >
+ <ul>
+ <li>Thanks for the opporunity to talk about programming with you all</li>
+ </ul>
+ </div>
</div>
<div id="slide-1">
<div class="slide-title">=<< What's up with that Title? >>=</div>
- <div class="slide flexotron">
+ <div class="slide">
+ </div>
+ <div class="notes">
+ <ul>
+ <li>A few people asked me about the title, so I thought I'd clear up what it means</li>
+ </ul>
+ </div>
+ </div>
+ <div id="slide-2">
+ <div class="slide-title">=<< What's up with that Title? >>=</div>
+ <div class="slide flexotron idk">
<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 class="fig">Fig 1.1 What most people thing a typical functional programming advocate looks like</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>Regarded as eccentric crazies with wild ideas</li>
+ <li>Spout nonsense like "monads" every 2 seconds</li>
+ <li>Often bald</li>
+ </ul>
+ </div>
</div>
- <div id="slide-2">
+ <div id="slide-3">
<div class="slide-title">=<< Obligatory Quote >>=</div>
<div class="slide">
</div>
+ <div class="notes">
+ <ul>
+ <li>Before I get to far in to it, I want to add some framing to the talk</li>
+ <li>My goal is not to teach you functional programming, my goal is to spark some curiosityt</li>
+ </ul>
+ </div>
</div>
- <div id="slide-3">
+ <div id="slide-4">
<div class="slide-title">=<< Obligatory Quote >>=</div>
<div class="slide flexotron">
<div class="textbox">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 class="notes">
+ <ul>
+ <li>Before I get to far in to it, I want to add some framing to the talk</li>
+ <li>My goal is not to teach you functional programming, my goal is to spark some curiosityt</li>
+ <li>And I think this obligatory quote (every good talk has a quote) conveys the framework I used when writing these slides</li>
+ <li>Also we like boats and ships and stuff like that here, so make sense I guess.</li>
+ </ul>
+ </div>
</div>
- <div id="slide-4">
+ <div id="slide-5">
<div class="slide-title">=<< Obligatory Quote >>=</div>
<div class="slide flexotron">
<div class="textbox">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.<br /><br /> - Some French Guy. Idk. Who cares, I'm not cultured. I'm Australian.</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>Before I get to far in to it, I want to add some framing to the talk</li>
+ <li>My goal is not to teach you functional programming, my goal is to spark some curiosityt</li>
+ <li>And I think this obligatory quote (every good talk has a quote) conveys the framework I used when writing these slides</li>
+ <li>Also we like boats and ships and stuff like that here, so make sense I guess.</li>
+ <li>And of course, don't forget attribution. So that everyone knows you're cultured and read important things</li>
+ <li>With that in mind, don't take any code examples too seriously, they are to demonstrate the big picture idea.</li>
+ </ul>
+ </div>
</div>
- <div id="slide-4">
+ <div id="slide-6">
<div class="slide-title">=<< What is this Talk About? >>=</div>
<div class="slide">
</div>
+ <div class="notes">
+ <ul>
+ <li>So what is this talk about?</li>
+ <li>Let me start by telling you some things it is not about</li>
+ <li>Which is something you're not supposed to do as an educator but whatever</li>
+ </ul>
+ </div>
</div>
- <div id="slide-5">
+ <div id="slide-7">
+ <div class="slide-title">=<< What is this Talk About? >>=</div>
+ <div class="slide">
+ <h1>This talk is <span class="highlight">not</span> about:</h1>
+ <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
+ <ul>
+ <li>Haskell</li>
+ <li>Convincing you to stop using whichever language you like</li>
+ <li>Maths nonsense</li>
+ <li>So what is it about?</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div id="slide-8">
<div class="slide-title">=<< What is this Talk About? >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Perspective</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>When trying to explain to someone why they should learn functional programming, there are many perspectives to try explain it from. For this discussion, I've settled on a very meta one. Perspective itself. As said, this is not a talk about haskell, it's about viewing programming through different perspectives"</li>
+ </ul>
+ </div>
</div>
- <div id="slide-6">
+ <div id="slide-9">
<div class="slide-title">=<< What is Functional Programming? >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Programming with functions.</div>
</div>
</div>
- <div id="slide-7">
+ <div id="slide-10">
+ <div class="slide-title">=<< What is Functional Programming? >>=</div>
+ <div class="slide flexotron">
+ <div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Programming with functions.<br /><br />No, really. Everything is a function.</div>
+ </div>
+ </div>
+ <div id="slide-11">
<div class="slide-title">=<< What is a Function? >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >A mapping between sets that associates every element of the first set to exactly one element of the second set.</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>It's important to understand that that's it.</li>
+ <li>This is different to functions in procedural languages - actually the name "function" is a misnomer in that context. Really they should be called prodedures or subroutines (hence the name procedural)</li>
+ <li>A function is a mapping. It's equivalent to something like an array in PHP. It associates one value to another one</li>
+ <li>In the same way that a PHP array cannot mutate state, a function cannot</li>
+ <li>This has some interesting consequences...</li>
+ </ul>
+ </div>
</div>
- <div id="slide-8">
- <div class="slide-title">=<< Huh? >>=</div>
+ <div id="slide-12">
+ <div class="slide-title">=<< What is a Function? >>=</div>
<div class="slide">
- <h1>Why would you wanna do that?!</h1>
+ <h1>This means a functional language has no equivalent construct for:</h1>
+ <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
+ <ul>
+ <li>For loops</li>
+ <li>While loops</li>
+ <li>Gotos</li>
+ <li>Variables*</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>
</div>
- <div id="slide-9">
+ <div id="slide-13">
+ <div class="slide-title">=<< Huh? >>=</div>
+ <div class="slide"></div>
+ <div class="notes">
+ <ul>
+ <li>And of course this all begs the question....</li>
+ </ul>
+ </div>
+
+ </div>
+ <div id="slide-14">
+ <div class="slide-title">=<< Huh? >>=</div>
+ <div class="slide flexotron">
+ <div class="textbox" style="text-align:center; font-size:40px; text-shadow: 4px 4px #000; padding:20px;" >Who in their right mind would wanna do that?!</div>
+ </div>
+ <div class="notes">
+ <ul>
+ <li>You're trying to tell me FP is awesome be because it has ... less features?</li>
+ <li>This is true, but it makes no difference. You can accomplish anything in FP that you can accomplish in a procedural language</li>
+ </ul>
+ </div>
+ </div>
+ <div id="slide-15">
<div class="slide-title">=<< Huh? >>=</div>
<div class="slide">
<h1>Why would you wanna do that?!</h1>
</ul>
</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>The best answer I can give is, "learning is good". I think that's something everyone at moodle can agree on</li>
+ <li>Learning FP is gonna require you to wrestle your brain in to shapes it's never taken before. Which will leave it with the plasticity to learn a greater variety of things you encounter.</li>
+ <li>It will also make the math/logic part of your brain very buff</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>
+ </ul>
+ </div>
</div>
- <div id="slide-10">
+ <div id="slide-16">
<div class="slide-title">=<< Paradigms >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Paradigms</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>Let's talk about paradigms for a bit</li>
+ <li>In particular, let's talk about the two most widely used paradigms. Which also happen to be the most at odds</li>
+ </ul>
+ </div>
</div>
- <div id="slide-11">
+ <div id="slide-17">
<div class="slide-title">=<< Paradigms >>=</div>
<div class="slide flexotron">
<div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px;">
</div>
</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>So here they are. Declaritive and imperative, and inside those we see sub-paradigms (there are more, for example SQL is declaritive but not functional, and Assembly is imperative but not procedural - although the vast majority of imperative languages are indeed procedural):</li>
+ <li>And then inside the boxes we see some examples of language that embody that paradigm</li>
+ <li>For the purposes of this talk it's probably OK to just think of declaritive and functional as interchangeable, and some for imperative and procedural. I'll probably mix them up</li>
+ <li>So why am I showing this? Well, let's look at this through a different perspective... Some of you might have realised that imperative and declaritive are both words used to describe human language, and that's relevant</li>
+ <li>Learning a new paradigm is beneficial the same way learning a new human language is</li>
+ </ul>
+ </div>
</div>
- <div id="slide-12">
+ <div id="slide-18">
<div class="slide-title">=<< Gramatical Mood >>=</div>
<div class="slide flexotron">
<div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
</ul>
</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>We can see here that in the declaritive mood you express statements of fact. They aren't instrcutions</li>
+ <li>Contrast this with the imperative style of expression where there is a very clear instruction to carry out</li>
+ </ul>
+ </div>
</div>
<div id="slide-13">
<div class="slide-title">=<< Gramatical Mood >>=</div>
Do this.
</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>To make it more concise... here's the smallest definition I can think of</li>
+ <li>And this applies to programs too. In the functional paradigm we no longer have the "instruction words" - things like, for, while, goto, variable reassignment</li>
+ </ul>
+ </div>
</div>
<div id="slide-14">
<div class="slide-title">=<< Big Brain Moment >>=</div>
+ <div class="slide">
+ </div>
+ </div>
+ <div id="slide-15">
+ <div class="slide-title">=<< Big Brain Moment >>=</div>
<div class="slide flexotron">
<div class="textbox" style="text-align:center; font-size:40px; text-shadow: 4px 4px #000; padding:20px;" >Programming languages <span class="shake-slow shake-constant" style="color: #f98012">ARE</span> human languages.</div>
</div>
</div>
- <div id="slide-15">
+ <div id="slide-16">
<div class="slide-title">=<< Why is declaritive mood good? >>=</div>
<div class="slide">
</div>
+ <div class="notes">
+ <ul>
+ <li>But in both cases, it seems like we lose something useful in the declaritive mode. What do we get by giving up these things?</li>
+ </ul>
+ </div>
</div>
- <div id="slide-16">
+ <div id="slide-17">
<div class="slide-title">=<< Why is declaritive mood good? >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Atemporality</div>
</div>
</div>
- <div id="slide-17">
+ <div id="slide-18">
<div class="slide-title">=<< Why is declaritive mood good? >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:60px; text-shadow: 4px 4px #000; padding:20px;" >Independant of or unaffected by time.</div>
</div>
</div>
- <div id="slide-18">
+ <div id="slide-19">
<div class="slide-title">=<< Why is declaritive mood good? >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:50px; text-shadow: 4px 4px #000; padding:20px;" >Declarative programs express what <span class="shake-slow shake-constant" style="color: #f98012">they actually do</span> Leaving more "brain space" to focus on solving the problem.</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>A declaritive program expresses its operation in terms of relationships.</li>
+ <li>In an imperative paradigm, thinking about the program means thinking about changes over time</li>
+ <li>In a declaritive one, thinking about the program means thinking about relationships</li>
+ </ul>
+ </div>
</div>
- <div id="slide-19">
+ <div id="slide-20">
<div class="slide-title">=<< To Recap >>=</div>
<div class="slide">
<h2>Why would you wanna do that?</h2>
<li>"Constraints liberate, liberties constrain"</li>
</ul>
</div>
+ <div class="notes">
+ <ul>
+ <li>Some problems are simply very difficult to solve in an imperative way.</li>
+ <li>Especially when we are talking about events that are happening in parallel and may run at different speed/times</li>
+ <li>In the imperative paradigm, you quite easily come up against data races by virtue of the way the program is expressed</li>
+ </ul>
+ </div>
</div>
</div>
- <div id="slide-20">
+ <div id="slide-21">
<div class="slide-title">=<< Some Code (Finally) >>=</div>
<div class="slide">
</div>
</div>
- <div id="slide-21">
+ <div id="slide-22">
<div class="slide-title">=<< Some Code (Finally) >>=</div>
<div class="slide flexotron">
<div style="text-align:center; font-size:50px; text-shadow: 4px 4px #000; padding:20px;" >Enough of this philosophy and linguistics mumbo jumbo, already!</div>
</div>
</div>
- <div id="slide-22">
+ <div id="slide-23">
<div class="slide-title">=<< Some Code (Finally) >>=</div>
<div class="slide">
<h1>The Great Dividers</h1>
</div>
<div style="display: flex; margin-bottom:50px;">
<pre style="margin: auto;"><code style="font-size: 20px;"><span class="code-friends2 code-friends3">function repeat(x) {
- return x + repeat(x);
-}</span></code></pre>
+ return x + repeat(x);
+ }</span></code></pre>
</div>
<h2>OK, so what?</h2>
<div style="display: flex;">
</div>
</div>
</div>
- <div id="slide-23">
+ <div id="slide-24">
<div class="slide-title">=<< Some Code (Finally) >>=</div>
<div class="slide">
<div style="display: flex; margin-top: 50px;">
</div>
</div>
</div>
- <div id="slide-24">
+ <div id="slide-25">
<div class="slide-title">=<< Some Code (Finally) >>=</div>
<div class="slide">
<div style="display: flex; margin-top: 50px;">
</div>
</div>
</div>
- <div id="slide-25">
+ <div id="slide-26">
<div class="slide-title">=<< Big Brain Moment >>=</div>
<div class="slide flexotron">
<div class="textbox" style="text-align:center; font-size:40px; text-shadow: 4px 4px #000; padding:20px;" >Programming languages <span class="shake-slow shake-constant" style="color: #f98012">ARE</span> human languages.</div>
</div>
</div>
- <div id="slide-26">
+ <div id="slide-27">
<div class="slide-title">=<< Some Code (Finally) >>=</div>
<div class="slide">
<h1>Real Haskell Code That Runs</h1>
> "fff"
</code></pre>
</div>
+ <div class="notes">
+ <ul>
+ <li>Let's think about the way this is understood</li>
+ <li>To get 3 fs, take 3 fs from an infinite list of fs - totally fine, makes complete sense</li>
+ </ul>
+ </div>
</div>
- <div id="slide-27">
+ <div id="slide-28">
<div class="slide-title">=<< Some Code (Finally) >>=</div>
<div class="slide">
<h1>Real JavaScript Code That Hangs</h1>
> InternalError: too much recursion
</code></pre>
</div>
+ <div class="notes">
+ <ul>
+ <li>By contrast, this reads as "First compute an infinite list of fs" - which as we saw before was a problem. And even that human sentence clearly has a problem.</li>
+ </ul>
+ </div>
</div>
- <div id="slide-28">
+ <div id="slide-29">
+ <div class="slide-title">=<< Big Brain Moment >>=</div>
+ <div class="slide flexotron">
+ <h1>What did declaritive mode give us?</h1>
+ <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
+ <ul>
+ <li>Atemporality</li>
+ <li>The ability to wield infinity!</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div id="slide-30">
+ <div class="slide-title">=<< Big Brain Moment >>=</div>
+ <div class="slide flexotron">
+ <h1>Promises</h1>
+ </div>
+ <div class="notes">
+ <ul>
+ <li>Let's think about promises...</li>
+ <li>Seems like an odd tangent but let's go with it</li>
+ <li>And just as before, I'm gonna break one of the carinal rules of teaching by telling you what promises are not...</li>
+ </ul>
+ </div>
+ </div>
+ <div id="slide-31">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide flexotron">
<div style="position: relative; text-align:center; font-size:40px; text-shadow: 4px 4px #000;" >
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-29">
+ <div id="slide-32">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide">
<h2>What problems do promises solve?</h2>
<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>Functions to instantiate the wrapper (Promise.resolve, Promise.reject)</li>
<li>A rule for composing these wrapped values (then)</li>
</ul>
</div>
</div>
</div>
- <div id="slide-30">
+ <div id="slide-33">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide">
<h1>Terminology/syntax recap</h1>
<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 class="notes">
+ <ul>
+ <li>A quick note on composition: So far you may have come across function composition. There's lots of different kinds of composition, but function composition is incredibly common, especially in programming. However in the example we are talking the composition of promises. In the sense that we combine to promises, and get another promise.</li>
+ </ul>
+ </div>
</div>
- <div id="slide-31">
+ <div id="slide-34">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide">
<h1>Promise composition</h1>
</div>
</div>
</div>
- <div id="slide-32">
+ <div id="slide-35">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide">
<h1>OK great but who cares?</h1>
</div>
</div>
</div>
- <div id="slide-33">
+ <div id="slide-36">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide flexotron">
<div style="position: relative;">
<div class="thonkingWrap"><div class="thonk">composition?</div></div>
</div>
</div>
+ <div class="notes">
+ <ul>
+ <li>This sure is starting to sound familiar.</li>
+ </ul>
+ </div>
</div>
- <div id="slide-34">
+ <div id="slide-37">
<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>
+ <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>
<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-35">
+ <div id="slide-38">
<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-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>
+ <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>
<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 class="notes">
+ <ul>
+ <li>So, if you've ever used promises, you've been doing declaritive style programming without even realising it!</li>
+ <li>They give us some new powers, we can now write atemporal code, which explains why they emerged in JS, a place where people are constantly dealing with requests that can finish in any order</li>
+ <li>So it's super cool that people using a language very far removed from haskell ended up solving the problem in the same way</li>
+ <li>Although both are independed discoveries, I don't think it's a coincidence promises appeared given the nature of the JS world.</li>
+ </ul>
+ </div>
+ </div>
+ <div id="slide-39">
+ <div class="slide-title">=<< Composition >>=</div>
+ <div class="slide flexotron">
+ <h1>Composition</h1>
+ </div>
+ <div class="notes">
+ <ul>
+ <li>Let's think about composition...</li>
+ <li>I touched on it before, but it's so important that I think it deserves its own little bit</li>
+ <li>I don't really have that many slides for this bit because composition is not really something you can make drawings of easily</li>
+ <li>I do have a few illustrations though</li>
+ </ul>
</div>
</div>
</body>
urlParts = document.URL.split('#');
window.console.log(urlParts);
var currentSlide = urlParts.length > 1 ? urlParts[1] : 0;
+ var bc = new BroadcastChannel('test_channel');
document.getElementById('slide-' + currentSlide).style.display = 'block';
document.onkeydown = checkKey;
}
currentSlide--;
document.getElementById('slide-' + currentSlide).style.display = 'block';
+
+ notes = document.querySelectorAll('#slide-' + currentSlide + ' .notes');
+ if(!!notes[0]) {
+ bc.postMessage(notes[0].innerHTML);
+ }
}
else if (e.keyCode == '39') {
if (document.getElementById('slide-' + currentSlide)) {
}
currentSlide++;
document.getElementById('slide-' + currentSlide).style.display = 'block';
- }
- console.log(currentSlide);
+ notes = document.querySelectorAll('#slide-' + currentSlide + ' .notes');
+ if(!!notes[0]) {
+ bc.postMessage(notes[0].innerHTML);
+ }
+
+ }
}
"1729 is the best number (I checked them all).",
"The secret to strengh is to eat only a banana for breakfast.",
"All of Back to the Future happened in the past.",
- "Everything is in the future."
+ "Everything is in the future.",
+ "We owe functional and procedural programming to the pre-Socratics, Heraclitus and Anaximander respectively.",
+ "Preservative has a very different meaning in many European languages"
];
cgq = document.getElementById("cgquotes");
usedPositions.push(thing);
}
+
</script>
</html>
projects / fp-lecture.git / commitdiff
