moar slides, disable localhost pwa cache

slides/080-why.html

@@ -1,8 +1,10 @@
 <title>Why Frameworks in the First Place?</title>
 <h1>Why Frameworks in the First Place?</h1>
-<ul>
-    <li class="appear" repeat="why">{{item}}</li>
-</ul>
+<div class="center">
+    <div class="card appear" repeat="why">
+        <span>{{item}}</span>
+    </div>
+</div>
 <script>
     this.why = [
         "Differences in the DOM (i.e. jQuery normalization)",
@@ -11,7 +13,8 @@
         "Asynchronous module loading/dependency graph",
         "Testability",
         "Databinding",
-        "Contacts (Types and Interfaces ➡ TypeScript)",
+        "Contracts (Types and Interfaces ➡ TypeScript)",
         "Minification or \"Packing\""
     ];
-</script>
+</script>
+<next-slide>090-embrace</next-slide>

slides/090-embrace.html

@@ -0,0 +1,4 @@
+<title>Embrace the Triad</title>
+<h1>Embrace the Triad</h1>
+<img src="/images/triad.png" alt="The triad: JavaScript, CSS3 and HTML5"/>
+<next-slide>100-javascript-new</next-slide>

slides/100-javascript-new.html

@@ -0,0 +1,20 @@
+<title>What's New with JavaScript?</title>
+<h1>What's New with JavaScript?</h1>
+<div class="center">
+    <div class="card appear" repeat="whatsnew">
+        <span>{{item}}</span>
+    </div>
+</div>
+<script>
+    this.whatsnew = [
+        "Scope and Variables",
+        "Powerful Strings",
+        "The Spread Operator",
+        "Destructuring",
+        "Parameters",
+        "Classes",
+        "Modules",
+        "...and a lot more!"
+    ];
+</script>
+<next-slide>110-variables</next-slide>

slides/110-variables.html

@@ -0,0 +1,19 @@
+<title>JavaScript Scope and Variables</title>
+<h1>JavaScript Scope and Variables</h1>
+<pre>var x = 1;</pre>
+<pre class="appear">
+// local scope
+for (let x = 1; x &lt; 100; x+=1) {...}
+var y = 1;
+function process(inp) {
+    let y = inp * 2;
+    return y;
+}
+process(y);
+</pre>
+<pre class="appear">
+// constants
+const x = 1;
+x = 2; // 💣 BOOM!
+</pre>
+<next-slide>120-gosinta</next-slide>

slides/120-gosinta.html

@@ -0,0 +1,26 @@
+<title>Arrow Functions (Gosinta)</title>
+<h1>Arrow Functions (Gosinta)</h1>
+<pre>
+var solarsystem = {
+    planets: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 
+    'Saturn', 'Uranus', 'Neptune', 'Pluto (?)'],
+    showPlanets: function() {
+        this.planets.forEach(function(planet, idx) {
+            console.log(this.planets[idx]);
+        })
+    }
+};
+solarsystem.showPlanets(); // crash! ⛔ 
+</pre>
+<pre class="appear">
+var solarsystem = {
+    planets: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 
+    'Saturn', 'Uranus', 'Neptune', 'Pluto (?)'],
+    showPlanets: function() {
+        this.planets.forEach((planet, idx) => {
+            console.log(this.planets[idx]);
+        })
+    }
+};
+solarsystem.showPlanets(); // success! 🌍
+</pre>