draft

Author: iliakan

Diff for: 1-js/02-first-steps/03-strict-mode/article.md

@@ -57,7 +57,7 @@ Even if we press `key:Shift+Enter` to input multiple lines, and put `use strict`
 
 The reliable way to ensure `use strict` would be to input the code into console like this:
 
-```
+```js
 (function() {
   'use strict';
 

Diff for: 1-js/06-advanced-functions/08-settimeout-setinterval/3-rewrite-settimeout/solution.md

@@ -5,7 +5,7 @@ let i = 0;
 
 let start = Date.now();
 
-let timer = setInterval(count, 0);
+let timer = setInterval(count);
 
 function count() {
 
@@ -20,4 +20,3 @@ function count() {
 
 }
 ```
-

Diff for: 1-js/06-advanced-functions/08-settimeout-setinterval/3-rewrite-settimeout/task.md

@@ -18,7 +18,7 @@ function count() {
   if (i == 1000000000) {
     alert("Done in " + (Date.now() - start) + 'ms');
   } else {
-    setTimeout(count, 0);
+    setTimeout(count);
   }
 
   // a piece of heavy job

Diff for: 1-js/06-advanced-functions/08-settimeout-setinterval/article.md

@@ -15,7 +15,7 @@ These methods are not a part of JavaScript specification. But most environments
 The syntax:
 
 ```js
-let timerId = setTimeout(func|code, delay[, arg1, arg2...])
+let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)
 ```
 
 Parameters:
@@ -25,7 +25,7 @@ Parameters:
 Usually, that's a function. For historical reasons, a string of code can be passed, but that's not recommended.
 
 `delay`
-: The delay before run, in milliseconds (1000 ms = 1 second).
+: The delay before run, in milliseconds (1000 ms = 1 second), by default 0.
 
 `arg1`, `arg2`...
 : Arguments for the function (not supported in IE9-)
@@ -110,7 +110,7 @@ For browsers, timers are described in the [timers section](https://www.w3.org/TR
 The `setInterval` method has the same syntax as `setTimeout`:
 
 ```js
-let timerId = setInterval(func|code, delay[, arg1, arg2...])
+let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)
 ```
 
 All arguments have the same meaning. But unlike `setTimeout` it runs the function not only once, but regularly after the given interval of time.
@@ -238,7 +238,7 @@ There's a side-effect. A function references the outer lexical environment, so,
 
 ## setTimeout(...,0)
 
-There's a special use case: `setTimeout(func, 0)`.
+There's a special use case: `setTimeout(func, 0)`, or just `setTimeout(func)`.
 
 This schedules the execution of `func` as soon as possible. But scheduler will invoke it only after the current code is complete.
 
@@ -247,7 +247,7 @@ So the function is scheduled to run "right after" the current code. In other wor
 For instance, this outputs "Hello", then immediately "World":
 
 ```js run
-setTimeout(() => alert("World"), 0);
+setTimeout(() => alert("World"));
 
 alert("Hello");
 ```
@@ -260,7 +260,7 @@ There's a trick to split CPU-hungry tasks using `setTimeout`.
 
 For instance, a syntax-highlighting script (used to colorize code examples on this page) is quite CPU-heavy. To highlight the code, it performs the analysis, creates many colored elements, adds them to the document -- for a big text that takes a lot. It may even cause the browser to "hang", which is unacceptable.
 
-So we can split the long text into pieces. First 100 lines, then plan another 100 lines using `setTimeout(...,0)`, and so on.
+So we can split the long text into pieces. First 100 lines, then plan another 100 lines using `setTimeout(..., 0)`, and so on.
 
 For clarity, let's take a simpler example for consideration. We have a function to count from `1` to `1000000000`.
 
@@ -303,7 +303,7 @@ function count() {
   if (i == 1e9) {
     alert("Done in " + (Date.now() - start) + 'ms');
   } else {
-    setTimeout(count, 0); // schedule the new call (**)
+    setTimeout(count); // schedule the new call (**)
   }
 
 }
@@ -338,7 +338,7 @@ function count() {
 
   // move the scheduling at the beginning
   if (i < 1e9 - 1e6) {
-    setTimeout(count, 0); // schedule the new call
+    setTimeout(count); // schedule the new call
   }
 
   do {
@@ -371,8 +371,8 @@ setTimeout(function run() {
   times.push(Date.now() - start); // remember delay from the previous call
 
   if (start + 100 < Date.now()) alert(times); // show the delays after 100ms
-  else setTimeout(run, 0); // else re-schedule
-}, 0);
+  else setTimeout(run); // else re-schedule
+});
 
 // an example of the output:
 // 1,1,1,1,9,15,20,24,30,35,40,45,50,55,59,64,70,75,80,85,90,95,100
@@ -430,7 +430,7 @@ And if we use `setTimeout` to split it into pieces then changes are applied in-b
     } while (i % 1e3 != 0);
 
     if (i < 1e9) {
-      setTimeout(count, 0);
+      setTimeout(count);
     }
 
   }

Diff for: 8-web-components/1-webcomponents-intro/article.md

@@ -67,7 +67,7 @@ So, what comprises a component?
 
 - [Custom elements](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) -- to define custom HTML elements.
 - [Shadow DOM](https://dom.spec.whatwg.org/#shadow-trees) -- to create an internal DOM for the component, hidden from the others.
-- [CSS Scoping](https://drafts.csswg.org/css-scoping/) -- to declare styles that only apply inside the component.
+- [CSS Scoping](https://drafts.csswg.org/css-scoping/) -- to declare styles that only apply inside the Shadow DOM of the component.
 
 There exist many frameworks and development methodologies that aim to do the similar thing, each one with its own bells and whistles. Usually, special CSS classes and conventions are used to provide "component feel" -- CSS scoping and DOM encapsulation.
 

Diff for: 8-web-components/2-custom-elements/1-live-timer/solution.md

@@ -0,0 +1,4 @@
+
+Please note:
+1. We clear `setInterval` timer when the element is removed from the document. That's important, otherwise it continues ticking even if not needed any more. And the browser can't clear the memory from this element and referenced by it.
+2. We can access current date as `elem.date` property. All class methods and properties are naturally element methods and properties.

Diff for: 8-web-components/2-custom-elements/1-live-timer/solution.view/index.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<script src="time-formatted.js"></script>
+<script src="live-timer.js"></script>
+
+<live-timer id="elem"></live-timer>
+
+<script>
+  elem.addEventListener('tick', event => console.log(event.detail));
+</script>

Diff for: 8-web-components/2-custom-elements/1-custom-timer/live-timer.js renamed to 8-web-components/2-custom-elements/1-live-timer/solution.view/live-timer.js

@@ -14,18 +14,18 @@ class TimeFormatted extends HTMLElement {
     }).format(date);
   }
 
-  connectedCallback() { // (2)
+  connectedCallback() {
     if (!this.rendered) {
       this.render();
       this.rendered = true;
     }
   }
 
-  static get observedAttributes() { // (3)
+  static get observedAttributes() {
     return ['datetime', 'year', 'month', 'day', 'hour', 'minute', 'second', 'time-zone-name'];
   }
 
-  attributeChangedCallback(name, oldValue, newValue) { // (4)
+  attributeChangedCallback(name, oldValue, newValue) { 
     this.render();
   }
 

Diff for: 8-web-components/2-custom-elements/1-custom-timer/time-formatted.js renamed to 8-web-components/2-custom-elements/1-live-timer/solution.view/time-formatted.js

@@ -0,0 +1,12 @@
+<!doctype html>
+<!-- don't modify this -->
+<script src="time-formatted.js"></script>
+
+<!-- your code here: -->
+<script src="live-timer.js"></script>
+
+<live-timer id="elem"></live-timer>
+
+<script>
+  elem.addEventListener('tick', event => console.log(event.detail));
+</script>

Diff for: 8-web-components/2-custom-elements/1-live-timer/source.view/index.html

@@ -0,0 +1,7 @@
+class LiveTimer extends HTMLElement {
+
+  /* your code here */
+
+}
+
+customElements.define("live-timer", LiveTimer);

Diff for: 8-web-components/2-custom-elements/1-live-timer/source.view/live-timer.js

@@ -0,0 +1,34 @@
+class TimeFormatted extends HTMLElement {
+
+  render() {
+    let date = new Date(this.getAttribute('datetime') || Date.now());
+
+    this.innerHTML = new Intl.DateTimeFormat("default", {
+      year: this.getAttribute('year') || undefined,
+      month: this.getAttribute('month') || undefined,
+      day: this.getAttribute('day') || undefined,
+      hour: this.getAttribute('hour') || undefined,
+      minute: this.getAttribute('minute') || undefined,
+      second: this.getAttribute('second') || undefined,
+      timeZoneName: this.getAttribute('time-zone-name') || undefined,
+    }).format(date);
+  }
+
+  connectedCallback() {
+    if (!this.rendered) {
+      this.render();
+      this.rendered = true;
+    }
+  }
+
+  static get observedAttributes() {
+    return ['datetime', 'year', 'month', 'day', 'hour', 'minute', 'second', 'time-zone-name'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) { 
+    this.render();
+  }
+
+}
+
+customElements.define("time-formatted", TimeFormatted);

Diff for: 8-web-components/2-custom-elements/1-live-timer/source.view/time-formatted.js

@@ -0,0 +1,23 @@
+
+# Live timer element
+
+We already have `<time-formatted>` element to show a nicely formatted time.
+
+Create `<live-timer>` element to show the current time:
+1. It should use `<time-formatted>` internally, not duplicate its functionality.
+2. Ticks (updates) every second.
+3. For every tick, a custom event named `tick` should be generated, with the current date in `event.detail` (see chapter <info:dispatch-events>).
+
+Usage:
+
+```html
+<live-timer id="elem"></live-timer>
+
+<script>
+  elem.addEventListener('tick', event => console.log(event.detail));
+</script>
+```
+
+Demo:
+
+[iframe src="solution" height=40]