Misc fixes and a shit tonne of initial slides

diff --git a/index.html b/index.html
index 7aac56e..20de7a2 100644 (file)
--- a/index.html
+++ b/index.html
@@ -188,11 +188,65 @@
     </div>
     <div id="slide-3">
         <div class="slide-title">=<< Obligatory Quote >>=</div>
-        <div class="slide">
-            <div style="text-align:center; font-size:40px; text-shadow: 4px 4px #000;" >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 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>
+    <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.<br /><br /> - Some French Guy. Idk. Who cares, I'm not cultured. I'm Australian.</div>
         </div>
     </div>
     <div id="slide-4">
+        <div class="slide-title">=<< What is this Talk About? >>=</div>
+        <div class="slide">
+        </div>
+    </div>
+    <div id="slide-5">
+        <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>
+    <div id="slide-6">
+        <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 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>
+    <div id="slide-8">
+        <div class="slide-title">=<< Huh? >>=</div>
+        <div class="slide">
+            <h1>Why would you wanna do that?!</h1>
+        </div>
+    </div>
+    <div id="slide-9">
+        <div class="slide-title">=<< Huh? >>=</div>
+        <div class="slide">
+            <h1>Why would you wanna do that?!</h1>
+            <div class="textbox" style="width: 60%; margin: auto; text-align: left;">
+                <ul>
+                    <li>Learning is good</li>
+                    <li>Brain plasticity</li>
+                    <li>Greater perspective</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div id="slide-10">
+        <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>
+    <div id="slide-11">
         <div class="slide-title">=<< Paradigms >>=</div>
         <div class="slide flexotron">
             <div class="textbox flexotron" style="position: relative; width: 30%; height: 50%; margin-right:20px;">
@@ -221,7 +275,7 @@
             </div>
         </div>
     </div>
-    <div id="slide-5">
+    <div id="slide-12">
         <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;">
@@ -246,26 +300,73 @@
             </div>
         </div>
     </div>
-    <div id="slide-6">
+    <div id="slide-13">
         <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;">
+            <div class="textbox flexotron" 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;">
+            <div class="textbox flexotron" 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 id="slide-14">
         <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 id="slide-15">
+        <div class="slide-title">=<< Why is declaritive mood good? >>=</div>
+        <div class="slide">
+        </div>
+    </div>
+    <div id="slide-16">
+        <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 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 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>
+    <div id="slide-19">
+        <div class="slide-title">=<< To Recap >>=</div>
+        <div class="slide">
+            <h2>Why would you wanna do that?</h2>
+            <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>
+                    <li>Functional programming is awesome because it stops you shooting yourself in the foot</li>
+                    <li>"Constraints liberate, liberties constrain"</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <div id="slide-20">
+        <div class="slide-title">=<< Some Code (Finally) >>=</div>
+        <div class="slide">
+        </div>
+    </div>
+    <div id="slide-21">
+        <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 class="slide-title">=<< Some Code (Finally) >>=</div>
         <div class="slide">
             <h1>The Great Dividers</h1>
@@ -287,7 +388,7 @@
             </div>
         </div>
     </div>
-    <div id="slide-9">
+    <div id="slide-23">
         <div class="slide-title">=<< Some Code (Finally) >>=</div>
         <div class="slide">
             <div style="display: flex; margin-top: 50px;">
@@ -307,7 +408,7 @@
             </div>
         </div>
     </div>
-    <div id="slide-10">
+    <div id="slide-24">
         <div class="slide-title">=<< Some Code (Finally) >>=</div>
         <div class="slide">
             <div style="display: flex; margin-top: 50px;">
@@ -323,19 +424,19 @@
                 </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 />
+                    "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 id="slide-25">
         <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 id="slide-26">
         <div class="slide-title">=<< Some Code (Finally) >>=</div>
         <div class="slide">
             <h1>Real Haskell Code That Runs</h1>
@@ -343,10 +444,10 @@
 threeFs = take 3 (repeat "f")
 
 > "fff"
-</code></pre>
+            </code></pre>
         </div>
     </div>
-    <div id="slide-13">
+    <div id="slide-27">
         <div class="slide-title">=<< Some Code (Finally) >>=</div>
         <div class="slide">
             <h1>Real JavaScript Code That Hangs</h1>
@@ -357,10 +458,10 @@ threeFs = take 3 (repeat "f")
 threeFs = repeat("f").substr(0,3);
 
 > InternalError: too much recursion
-</code></pre>
+            </code></pre>
         </div>
     </div>
-    <div id="slide-20">
+    <div id="slide-28">
         <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;" >
@@ -377,7 +478,7 @@ threeFs = repeat("f").substr(0,3);
                 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-21">
+    <div id="slide-29">
         <div class="slide-title">=<< Promises >>=</div>
         <div class="slide">
             <h2>What problems do promises solve?</h2>
@@ -398,7 +499,7 @@ threeFs = repeat("f").substr(0,3);
             </div>
         </div>
     </div>
-    <div id="slide-22">
+    <div id="slide-30">
         <div class="slide-title">=<< Promises >>=</div>
         <div class="slide">
             <h1>Terminology/syntax recap</h1>
@@ -420,7 +521,7 @@ threeFs = repeat("f").substr(0,3);
             </div>
         </div>
     </div>
-    <div id="slide-23">
+    <div id="slide-31">
         <div class="slide-title">=<< Promises >>=</div>
         <div class="slide">
             <h1>Promise composition</h1>
@@ -441,7 +542,7 @@ threeFs = repeat("f").substr(0,3);
             </div>
         </div>
     </div>
-    <div id="slide-24">
+    <div id="slide-32">
         <div class="slide-title">=<< Promises >>=</div>
         <div class="slide">
             <h1>OK great but who cares?</h1>
@@ -457,7 +558,7 @@ threeFs = repeat("f").substr(0,3);
             </div>
         </div>
     </div>
-    <div id="slide-25">
+    <div id="slide-33">
         <div class="slide-title">=<< Promises >>=</div>
         <div class="slide flexotron">
             <div style="position: relative;">
@@ -469,7 +570,7 @@ threeFs = repeat("f").substr(0,3);
             </div>
         </div>
     </div>
-    <div id="slide-26">
+    <div id="slide-34">
         <div class="slide-title">=<< Promises >>=</div>
         <div class="slide">
             <h1>Woah!</h1>
@@ -483,7 +584,7 @@ threeFs = repeat("f").substr(0,3);
      <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-27">
+    <div id="slide-35">
         <div class="slide-title">=<< Promises >>=</div>
         <div class="slide">
             <h1>Woah!</h1>