What's new with js

pwa.js

@@ -33,7 +33,7 @@ class Pwa {
          * Cache version
          * @type {number}
          */
-        this.CACHE_VERSION = 1.2;
+        this.CACHE_VERSION = 1.3;
         /**
          * Pre-emptive files to cache
          * @type {string[]}
@@ -181,27 +181,28 @@ 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
-                            const headers = response.headers.entries();
-                            let date = null;
-                            for (let pair of headers) {
-                                if (pair[0] === 'date') {
-                                    date = new Date(pair[1]);
-                                    break;
-                                }
-                            }
-                            if (!date) {
-                                return response;
-                            }
-                            const age = parseInt(((new Date().getTime() - date.getTime()) / 1000).toString());
-                            const ttl = this.getTTL(event.request.url);
-                            if (ttl === null || (ttl && age < ttl)) {
-                                return response;
+                    if (event.request.url.startsWith("http://localhost")) {
+                        return fetch(event.request.clone());
+                    }
+                    const response = await cache.match(event.request);
+                    if (response) {
+                        // found it, see if expired
+                        const headers = response.headers.entries();
+                        let date = null;
+                        for (let pair of headers) {
+                            if (pair[0] === 'date') {
+                                date = new Date(pair[1]);
+                                break;
                             }
                         }
+                        if (!date) {
+                            return response;
+                        }
+                        const age = parseInt(((new Date().getTime() - date.getTime()) / 1000).toString());
+                        const ttl = this.getTTL(event.request.url);
+                        if (ttl === null || (ttl && age < ttl)) {
+                            return response;
+                        }
                     }
                     // not found or expired, fresh request
                     return fetch(event.request.clone()).then(resp => {

slides/120-gosinta.html

@@ -2,25 +2,20 @@
 <h1>Arrow Functions (Gosinta)</h1>
 <pre>
 var solarsystem = {
-    planets: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 
-    'Saturn', 'Uranus', 'Neptune', 'Pluto (?)'],
+    planets: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune', 'Pluto (?)'],
     showPlanets: function() {
         this.planets.forEach(function(planet, idx) { 
-            console.log(this.planets[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 (?)'],
+    planets: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune', 'Pluto (?)'],
     showPlanets: function() {
         this.planets.forEach((planet, idx) => { 
-            console.log(this.planets[idx]);
-        })
-    }
-};
+            console.log(this.planets[idx]);});
+    }};
 solarsystem.showPlanets(); // success! 🌍
 </pre>
+<next-slide>130-string-power</next-slide>

slides/130-string-power.html

@@ -0,0 +1,13 @@
+<title>String Power</title>
+<h1>String Power</h1>
+<pre>
+const code = "Pure JavaScript and clean code make great apps";
+</pre>
+<pre class="appear">
+if (code.startsWith("Pure JavaScript") &&
+    code.includes("clean code")) {
+        console.log(`${code} is ${code.endsWith("great apps")}`);
+    }
+</pre>
+<pre class="appear">"Pure JavaScript and clean code make great apps is true"</pre>
+<next-slide>140-spread-operator</next-slide>

slides/140-spread-operator.html

@@ -0,0 +1,21 @@
+<title>The Spread Operator</title>
+<h1>The Spread Operator</h1>
+<pre>
+const list = [1,1,2,3,5];
+const bigger_list = [...list, 8, 13];
+// [1, 1, 2, 3, 5, 8, 13];
+</pre>
+<pre class="appear">
+const fn = (x, y, z) => x + y + z;
+fn(bigger_list);
+// "1,1,2,3,5,8,13ndefinedundefined" ([1,1,2,3,5,8,13] + undefined + undefined)
+fn(...bigger_list);
+// 4 (1 + 1 + 2)
+</pre>
+<pre class="appear">
+const src = { foo: "bar" };
+const cpy = { ...src }; // { foo: "bar" }
+const tgt = { ...src, bar: "foo" }
+// { foo: "bar", bar: "foo" }
+</pre>
+<next-slide>150-destructuring</next-slide>

slides/150-destructuring.html

@@ -0,0 +1,21 @@
+<title>Destructuring</title>
+<h1>Destructuring</h1>
+<pre>
+var [x,y] = [1,2];
+// x=1, y=2
+[x,y] = [y,x];
+// x=2, y=1
+</pre>
+<pre class="appear">
+const obj = { foo: "bar", bar: "foo" };
+const {foo: f, bar} = obj;
+// f = "bar", bar = "foo";
+</pre>
+<pre class="appear">
+const twoRandos = () => [Math.random(), Math.random()];
+const randos = twoRandos();
+// [0.45235454, 0.6455656]
+const [random1, random2] = twoRandos();
+// random1 = 0.45235454, random2 = 0.6455656
+</pre>
+<next-slide>160-classes</next-slide>

slides/160-classes.html

@@ -0,0 +1,16 @@
+<title>Classes</title>
+<h1>Classes</h1>
+<pre>
+class shape {
+    constructor(sides) {
+        this._sides = sides;
+    }
+    get sides() { return this._sides; }
+    static makeShape(sides) {
+        return new shape(sides);
+    }
+}
+const triangle = shape.makeShape(3);
+// triangle.sides = 3
+</pre>
+<next-slide>165-classes-2</next-slide>

slides/165-classes-2.html

@@ -0,0 +1,15 @@
+<title>Classes (2)</title>
+<h1>Classes</h1>
+<pre>
+class square extends shape {
+    constructor() {
+        super(4);
+    }
+}
+
+const sq = new square();
+// square.sides = 4;
+
+const hex = sq.makeShape(6);
+// error: static method isn't inherited
+</pre>