moar slides, disable localhost pwa cache

css/style.css

@@ -4,6 +4,10 @@ body {
     font-size: 3vh;
 }
 
+code {
+    font-size: 3vh;
+}
+
 br {
     clear: both;
 }
@@ -63,8 +67,23 @@ slide-deck img.expandable:hover {
     max-height: 80vh;
 }
 
+div.card {
+    margin: 0.5em;
+    padding: 1.0em;
+    float: left;
+    text-align: center;
+    border: solid 2px darkgreen;
+    background: lightcyan;
+    width: 18vw;
+    height: 12vh;
+}
+
+div.card span {
+    height: 12vh;
+}
+
 @media only screen and (max-width: 800px) {
-    body {
+    body, code {
         font-size: 14px;
     }
     button, input {
@@ -74,10 +93,13 @@ slide-deck img.expandable:hover {
     label > div, input {
         width: 90vw;
     }
+    div.card {
+        width: 80vw;
+    }
 }
 
 @media only screen and (max-width: 1200px) {
-    body {
+    body, code {
         font-size: 2vh;
     }
     button, input {
@@ -123,6 +145,7 @@ img {
 
 .center {
     text-align: center;
+    vertical-align: middle;
 }
 
 slide-deck > div {

pwa.js

@@ -33,7 +33,7 @@ class Pwa {
          * Cache version
          * @type {number}
          */
-        this.CACHE_VERSION = 1.0;
+        this.CACHE_VERSION = 1.2;
         /**
          * Pre-emptive files to cache
          * @type {string[]}
@@ -181,6 +181,7 @@ class Pwa {
         this.scope.addEventListener('fetch', event => {
             event.respondWith(
                 caches.open(this.CACHE_NAME).then(async cache => {
+                    if (!event.request.url.startsWith("http://localhost")) {
                         const response = await cache.match(event.request);
                         if (response) {
                             // found it, see if expired
@@ -201,6 +202,7 @@ class Pwa {
                                 return response;
                             }
                         }
+                    }
                     // not found or expired, fresh request
                     return fetch(event.request.clone()).then(resp => {
                         if (resp.status < 400) {

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>
+<div class="center">
-    <li class="appear" repeat="why">{{item}}</li>
+    <div class="card appear" repeat="why">
-</ul>
+        <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>
+<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>