From 2086a20e3c12711164d7412e21d742817fc955cb Mon Sep 17 00:00:00 2001 From: Jeremy Likness Date: Tue, 28 Jan 2020 13:41:29 -0800 Subject: [PATCH] What's new with js --- pwa.js | 41 +++++++++++++++++---------------- slides/120-gosinta.html | 25 ++++++++------------ slides/130-string-power.html | 13 +++++++++++ slides/140-spread-operator.html | 21 +++++++++++++++++ slides/150-destructuring.html | 21 +++++++++++++++++ slides/160-classes.html | 16 +++++++++++++ slides/165-classes-2.html | 15 ++++++++++++ 7 files changed, 117 insertions(+), 35 deletions(-) create mode 100644 slides/130-string-power.html create mode 100644 slides/140-spread-operator.html create mode 100644 slides/150-destructuring.html create mode 100644 slides/160-classes.html create mode 100644 slides/165-classes-2.html diff --git a/pwa.js b/pwa.js index 993002e..7e88db1 100644 --- a/pwa.js +++ b/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 => { diff --git a/slides/120-gosinta.html b/slides/120-gosinta.html index a9c8a63..80fdf24 100644 --- a/slides/120-gosinta.html +++ b/slides/120-gosinta.html @@ -2,25 +2,20 @@

Arrow Functions (Gosinta)

 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]);
-        })
-    }
-};
+        this.planets.forEach(function(planet, idx) { 
+            console.log(this.planets[idx]);});
+    }};
 solarsystem.showPlanets(); // crash! ⛔ 
 
 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]);
-        })
-    }
-};
+        this.planets.forEach((planet, idx) => { 
+            console.log(this.planets[idx]);});
+    }};
 solarsystem.showPlanets(); // success! 🌍
-
\ No newline at end of file + +130-string-power \ No newline at end of file diff --git a/slides/130-string-power.html b/slides/130-string-power.html new file mode 100644 index 0000000..f312868 --- /dev/null +++ b/slides/130-string-power.html @@ -0,0 +1,13 @@ +String Power +

String Power

+
+const code = "Pure JavaScript and clean code make great apps";
+
+
+if (code.startsWith("Pure JavaScript") &&
+    code.includes("clean code")) {
+        console.log(`${code} is ${code.endsWith("great apps")}`);
+    }
+
+
"Pure JavaScript and clean code make great apps is true"
+140-spread-operator \ No newline at end of file diff --git a/slides/140-spread-operator.html b/slides/140-spread-operator.html new file mode 100644 index 0000000..2c14eb7 --- /dev/null +++ b/slides/140-spread-operator.html @@ -0,0 +1,21 @@ +The Spread Operator +

The Spread Operator

+
+const list = [1,1,2,3,5];
+const bigger_list = [...list, 8, 13];
+// [1, 1, 2, 3, 5, 8, 13];
+
+
+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)
+
+
+const src = { foo: "bar" };
+const cpy = { ...src }; // { foo: "bar" }
+const tgt = { ...src, bar: "foo" }
+// { foo: "bar", bar: "foo" }
+
+150-destructuring \ No newline at end of file diff --git a/slides/150-destructuring.html b/slides/150-destructuring.html new file mode 100644 index 0000000..45d248d --- /dev/null +++ b/slides/150-destructuring.html @@ -0,0 +1,21 @@ +Destructuring +

Destructuring

+
+var [x,y] = [1,2];
+// x=1, y=2
+[x,y] = [y,x];
+// x=2, y=1
+
+
+const obj = { foo: "bar", bar: "foo" };
+const {foo: f, bar} = obj;
+// f = "bar", bar = "foo";
+
+
+const twoRandos = () => [Math.random(), Math.random()];
+const randos = twoRandos();
+// [0.45235454, 0.6455656]
+const [random1, random2] = twoRandos();
+// random1 = 0.45235454, random2 = 0.6455656
+
+160-classes diff --git a/slides/160-classes.html b/slides/160-classes.html new file mode 100644 index 0000000..6a755b2 --- /dev/null +++ b/slides/160-classes.html @@ -0,0 +1,16 @@ +Classes +

Classes

+
+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
+
+165-classes-2 \ No newline at end of file diff --git a/slides/165-classes-2.html b/slides/165-classes-2.html new file mode 100644 index 0000000..976f4d7 --- /dev/null +++ b/slides/165-classes-2.html @@ -0,0 +1,15 @@ +Classes (2) +

Classes

+
+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
+
\ No newline at end of file