display: none;
}
- span[class^="code-friends"].on, span[class^="code-friends"].on > span {
+ span[class^="code-friends"].on, span[class^="code-friends"].on > span, span[class^="code-friends"].on > span > span {
color: #f98012 !important;
}
li {
margin-top: 10px;
}
+
</style>
</head>
<body>
</div>
</div>
<div id="slide-4">
+ <div class="slide-title">=<< Paradigms >>=</div>
+ <div class="slide flexotron">
+ <div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px;">
+ <span class="textbox" style="box-shadow: none; position: absolute; top: -20px; left: 30px;">Declarative</span>
+ <div class="textbox" style="position: relative; width: 80%; height: 60%;">
+ <span class="textbox" style="box-shadow: none; position: absolute; top: -20px; left: 30px;">Functional</span>
+ <ul style="text-align: left; margin-top: 65px;margin-left: 40px;">
+ <li>Haskell</li>
+ <li>Elm</li>
+ <li>Elixir</li>
+ <li>Clojure</li>
+ </ul>
+ </div>
+ </div>
+ <div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px;">
+ <span class="textbox" style="box-shadow: none; position: absolute; top: -20px; left: 30px;">Imperative</span>
+ <div class="textbox" style="position: relative; width: 80%; height: 60%;">
+ <span class="textbox" style="box-shadow: none; position: absolute; top: -20px; left: 30px;">Procedural</span>
+ <ul style="text-align: left; margin-top: 65px;margin-left: 40px;">
+ <li>PHP</li>
+ <li>C</li>
+ <li>Java</li>
+ <li>DamoScript</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="slide-5">
+ <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;">
+ <span class="textbox" style="box-shadow: none; position: absolute; top: -20px; left: 30px;">Declarative</span>
+ A sentence which expresses a statement of fact.
+ <ul style="text-align: left; margin-top: 65px;margin-left: 40px;">
+ <li>He runs.</li>
+ <li>I like climbing.</li>
+ <li>Ice is cold.</li>
+ <li>Mathieu is shredded.</li>
+ </ul>
+ </div>
+ <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
+ <span class="textbox" style="box-shadow: none; position: absolute; top: -20px; left: 30px;">Imperative</span>
+ <span>A sentence which expresses instructions, or requests.</span>
+ <ul style="text-align: left; margin-top: 65px;margin-left: 40px;">
+ <li>Shut the door.</li>
+ <li>Don't eat my burger.</li>
+ <li>Let's go to the pub.</li>
+ <li>Don't make eye contact with Mathieu.</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div id="slide-6">
+ <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;">
+ <span class="textbox" style="box-shadow: none; position: absolute; top: -20px; left: 30px;">Declarative</span>
+ This is this.
+ </div>
+ <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
+ <span class="textbox" style="box-shadow: none; position: absolute; top: -20px; left: 30px;">Imperative</span>
+ Do this.
+ </div>
+ </div>
+ </div>
+ <div id="slide-7">
+ <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-8">
+ <div class="slide-title">=<< Some Code (Finally) >>=</div>
+ <div class="slide">
+ <h1>The Great Dividers</h1>
+ <h2>Consider:</h2>
+ <div style="display: flex;">
+ <pre style="margin: auto;"><code style="font-size: 20px;"><span class="code-friends1 code-friends4">x = x + 1;</span></code></pre>
+ </div>
+ <div style="display: flex; margin-top: 20px; margin-bottom: 20px;">
+ <span style="margin: auto;">and:</span>
+ </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>
+ </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>
+ </div>
+ </div>
+ <div id="slide-9">
+ <div class="slide-title">=<< Some Code (Finally) >>=</div>
+ <div class="slide">
+ <div style="display: flex; margin-top: 50px;">
+ <pre style="margin: auto;"><code style="font-size: 20px;">x = x + 1;</code></pre>
+ </div>
+ <div class="flexotron" style="height: 80%;">
+ <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
+ <span class="textbox" style="box-shadow: none; position: absolute; top: -20px; left: 30px;">Declarative</span>
+ "x is the same as itself plus one."<br /><br /><br /><br /><br />
+ Complete nonsense!
+ </div>
+ <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
+ <span class="textbox" style="box-shadow: none; position: absolute; top: -20px; left: 30px;">Imperative</span>
+ "Evaluate the thing on the right of `=` then store it in the thing on the left of `=`."<br /><br /><br />
+ A list of instructions that can be followed.
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="slide-10">
+ <div class="slide-title">=<< Some Code (Finally) >>=</div>
+ <div class="slide">
+ <div style="display: flex; margin-top: 50px;">
+ <pre style="margin: auto;"><code style="font-size: 20px;">function repeat(x) {
+ return x + repeat(x);
+}</code></pre>
+ </div>
+ <div class="flexotron" style="height: 80%;">
+ <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 30px;">
+ <span class="textbox" style="box-shadow: none; position: absolute; top: -20px; left: 30px;">Declarative</span>
+ "The repeat of `x` is `x` appended to the repeat of `x`"<br /><br /><br />
+ An infinite list of `x`!
+ </div>
+ <div class="textbox" style="position: relative; width: 30%; height: 50%; margin-right:20px; padding-top: 40px;">
+ <span class="textbox" style="box-shadow: none; position: absolute; top: -20px; left: 30px;">Imperative</span>
+ "To evaluate the repeate of `x`, first evaluate the repeat of `x`""<br /><br /><br />
+ ...Yeah, you see the problem?
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="slide-11">
+ <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-12">
+ <div class="slide-title">=<< Some Code (Finally) >>=</div>
+ <div class="slide">
+ <h1>Real Haskell Code That Runs</h1>
+ <pre><code class="haskell">repeat x = x ++ repeat x
+threeFs = take 3 (repeat "f")
+
+> "fff"
+</code></pre>
+ </div>
+ </div>
+ <div id="slide-13">
+ <div class="slide-title">=<< Some Code (Finally) >>=</div>
+ <div class="slide">
+ <h1>Real JavaScript Code That Hangs</h1>
+ <pre><code class="javascript">function repeat(x) {
+ return x + repeat(x);
+}
+
+threeFs = repeat("f").substr(0,3);
+
+> InternalError: too much recursion
+</code></pre>
+ </div>
+ </div>
+ <div id="slide-20">
<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-5">
+ <div id="slide-21">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide">
- <h1>What problems do promises solve?</h1>
+ <h2>What problems do promises solve?</h2>
<div class="textbox" style="width: 60%; margin: auto; text-align: left;">
<ul>
<li>Asynchronous request management</li>
<li>Probably more too</li>
</ul>
</div>
- <h1 style="margin-top: 50px;">What are promises then?</h1>
+ <h2 style="margin-top: 50px;">What are promises then?</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>
</div>
</div>
</div>
- <div id="slide-6">
+ <div id="slide-22">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide">
<h1>Terminology/syntax recap</h1>
</div>
</div>
</div>
- <div id="slide-7">
+ <div id="slide-23">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide">
<h1>Promise composition</h1>
</div>
</div>
</div>
- <div id="slide-8">
+ <div id="slide-24">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide">
<h1>OK great but who cares?</h1>
</div>
</div>
</div>
- <div id="slide-9">
+ <div id="slide-25">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide flexotron">
<div style="position: relative;">
</div>
</div>
</div>
- <div id="slide-10">
+ <div id="slide-26">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide">
<h1>Woah!</h1>
<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-11">
+ <div id="slide-27">
<div class="slide-title">=<< Promises >>=</div>
<div class="slide">
<h1>Woah!</h1>
projects / fp-lecture.git / commitdiff
