+ <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">