Sync with upstream @ 4541b7af

1-js/02-first-steps/01-hello-world/article.md

@@ -73,7 +73,7 @@ Os arquivos de script são anexados ao HTML com o atributo `src`:
 <script src="/path/to/script.js"></script>
 ```
 
-Aqui, `/path/to/script.js` é um caminho absoluto para o arquivo script (da raiz do site). Você também pode fornecer um caminho relativo a partir da página atual. Por exemplo, `src="script.js"` significaria um arquivo `"script.js"` na pasta atual.
+Aqui, `/path/to/script.js` é um caminho absoluto para o arquivo (script) da raiz do site. Você também pode fornecer um caminho relativo a partir da página atual. Por exemplo, `src="script.js"`, tal como `src="./script.js"`, significaria um arquivo `"script.js"` na pasta atual.
 
 Nós também podemos dar uma URL completa. Por exemplo:
 

1-js/05-data-types/03-string/article.md

@@ -81,7 +81,7 @@ Here's the full list:
 | Character | Description |
 |-----------|-------------|
 |`\n`|New line|
-|`\r`|Carriage return: not used alone. Windows text files use a combination of two characters `\r\n` to represent a line break. |
+|`\r`|In Windows text files a combination of two characters `\r\n` represents a new break, while on non-Windows OS it's just `\n`. That's for historical reasons, most Windows software also understands `\n`. |
 |`\'`, `\"`|Quotes|
 |`\\`|Backslash|
 |`\t`|Tab|

1-js/06-advanced-functions/03-closure/9-sort-by-field/_js.view/test.js

@@ -23,7 +23,7 @@ describe("byField", function(){
       { name: "John", age: 20, surname: "Johnson"},
     ];
     let ageSortedAnswer = users.sort(byField("age"));
-    assert.deepEqual(ageSortedKey, ageSortedKey);
+    assert.deepEqual(ageSortedKey, ageSortedAnswer);
   });
 
   it("sorts users by surname", function(){

1-js/06-advanced-functions/10-bind/article.md

@@ -187,8 +187,8 @@ let user = {
 
 let say = user.say.bind(user);
 
-say("Hello"); // Hello, John ("Hello" argument is passed to say)
-say("Bye"); // Bye, John ("Bye" is passed to say)
+say("Hello"); // Hello, John! ("Hello" argument is passed to say)
+say("Bye"); // Bye, John! ("Bye" is passed to say)
 ```
 
 ````smart header="Convenience method: `bindAll`"

1-js/09-classes/06-instanceof/article.md

@@ -86,8 +86,11 @@ The algorithm of `obj instanceof Class` works roughly as follows:
     *!*
     alert(rabbit instanceof Animal); // true
     */!*
+
     // rabbit.__proto__ === Rabbit.prototype
+    *!*
     // rabbit.__proto__.__proto__ === Animal.prototype (match!)
+    */!*
     ```
 
 Here's the illustration of what `rabbit instanceof Animal` compares with `Animal.prototype`:

1-js/11-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html

@@ -10,7 +10,7 @@
       text-align: center;
     }
     .circle {
-      transition-property: width, height, margin-left, margin-top;
+      transition-property: width, height;
       transition-duration: 2s;
       position: fixed;
       transform: translateX(-50%) translateY(-50%);

1-js/11-async/08-async-await/article.md

@@ -303,7 +303,7 @@ The `async` keyword before a function has two effects:
 
 The `await` keyword before a promise makes JavaScript wait until that promise settles, and then:
 
-1. If it's an error, the exception is generated — same as if `throw error` were called at that very place.
+1. If it's an error, an exception is generated — same as if `throw error` were called at that very place.
 2. Otherwise, it returns the result.
 
 Together they provide a great framework to write asynchronous code that is easy to both read and write.

1-js/13-modules/01-modules-intro/article.md

@@ -261,7 +261,7 @@ In a module, top-level `this` is undefined, as opposed to a global object in non
 
 There are also several browser-specific differences of scripts with `type="module"` compared to regular ones.
 
-You may want skip those for now if you're reading for the first time, or if you don't use JavaScript in a browser.
+You may want to skip this section for now if you're reading for the first time, or if you don't use JavaScript in a browser.
 
 ### Module scripts are deferred
 

2-ui/1-document/05-basic-dom-node-properties/article.md

@@ -24,8 +24,10 @@ The classes are:
 - [HTMLElement](https://html.spec.whatwg.org/multipage/dom.html#htmlelement) -- is finally the basic class for all HTML elements. It is inherited by concrete HTML elements:
     - [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) -- the class for `<input>` elements,
     - [HTMLBodyElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlbodyelement) -- the class for `<body>` elements,
-    - [HTMLAnchorElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlanchorelement) -- the class for `<a>` elements
-    - ...and so on, each tag has its own class that may provide specific properties and methods.
+    - [HTMLAnchorElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlanchorelement) -- the class for `<a>` elements,
+    - ...and so on.
+
+There are many other tags with their own classes that may specific properties and methods, while some elements, such as `<span>`, `<section>`, `<article>` do not have any specific properties, so they are instances of `HTMLElement` class.
 
 So, the full set of properties and methods of a given node comes as the result of the inheritance.
 
@@ -130,7 +132,7 @@ For instance:
 
 ```html run
 <body>
-  <script>  
+  <script>
   let elem = document.body;
 
   // let's examine what it is?

2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.view/index.html

@@ -45,7 +45,7 @@
     function clockStart() {
       // set a new interval only if the clock is stopped
       // otherwise we would rewrite the timerID reference to the running interval and wouldn't be able to stop the clock ever again
-      if (!timerId) { 
+      if (!timerId) {
         timerId = setInterval(update, 1000);
       }
       update(); // <--  start right now, don't wait 1 second till the first setInterval works
@@ -56,7 +56,6 @@
       timerId = null; // <-- clear timerID to indicate that the clock has been stopped, so that it is possible to start it again in clockStart()
     }
 
-    clockStart();
   </script>
 
   <!-- click on this button calls clockStart() -->

2-ui/1-document/09-size-and-scroll/article.md

@@ -120,7 +120,7 @@ function isHidden(elem) {
 }
 ```
 
-Please note that such `isHidden` returns `true` for elements that are on-screen, but have zero sizes (like an empty `<div>`).
+Please note that such `isHidden` returns `true` for elements that are on-screen, but have zero sizes.
 ````
 
 ## clientTop/Left

2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html

@@ -10,7 +10,7 @@
   <div id="carousel" class="carousel">
     <button class="arrow prev">⇦</button>
     <div class="gallery">
-      <ul class="images">
+      <ul>
         <li><img src="https://en.js.cx/carousel/1.png"></li>
         <li><img src="https://en.js.cx/carousel/2.png"></li>
         <li><img src="https://en.js.cx/carousel/3.png"></li>

2-ui/2-events/01-introduction-browser-events/article.md

@@ -160,7 +160,7 @@ button.onclick = sayThanks;
 button.onclick = sayThanks();
 ```
 
-If we add parentheses, then `sayThanks()` becomes is a function call. So the last line actually takes the *result* of the function execution, that is `undefined` (as the function returns nothing), and assigns it to `onclick`. That doesn't work.
+If we add parentheses, then `sayThanks()` becomes a function call. So the last line actually takes the *result* of the function execution, that is `undefined` (as the function returns nothing), and assigns it to `onclick`. That doesn't work.
 
 ...But in the markup we do need the brackets:
 

2-ui/2-events/04-default-browser-action/3-image-gallery/solution.view/gallery.css

@@ -4,16 +4,6 @@ body {
   font: 75%/120% sans-serif;
 }
 
-h2 {
-  font: bold 190%/100% sans-serif;
-  margin: 0 0 .2em;
-}
-
-h2 em {
-  font: normal 80%/100% sans-serif;
-  color: #999999;
-}
-
 #largeImg {
   border: solid 1px #ccc;
   width: 550px;

2-ui/2-events/04-default-browser-action/3-image-gallery/source.view/gallery.css

@@ -4,16 +4,6 @@ body {
   font: 75%/120% sans-serif;
 }
 
-h2 {
-  font: bold 190%/100% sans-serif;
-  margin: 0 0 .2em;
-}
-
-h2 em {
-  font: normal 80%/100% sans-serif;
-  color: #999999;
-}
-
 #largeImg {
   border: solid 1px #ccc;
   width: 550px;
@@ -32,4 +22,13 @@ h2 em {
 
 #thumbs a:hover {
   border-color: #FF9900;
+}
+
+#thumbs li {
+  list-style: none;
+}
+
+#thumbs {
+  margin: 0;
+  padding: 0;
 }

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js

@@ -88,7 +88,7 @@ class HoverIntent {
     if (speed < this.sensitivity) {
       clearInterval(this.checkSpeedInterval);
       this.isHover = true;
-      this.over.call(this.elem, event);
+      this.over.call(this.elem);
     } else {
       // speed fast, remember new coordinates as the previous ones
       this.prevX = this.lastX;

2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/script.js

@@ -5,6 +5,8 @@ let lastTime = Date.now();
 function handle(e) {
   if (form.elements[e.type + 'Ignore'].checked) return;
 
+  area.scrollTop = 1e6;
+
   let text = e.type +
     ' key=' + e.key +
     ' code=' + e.code +

2-ui/5-loading/01-onload-ondomcontentloaded/article.md

@@ -185,6 +185,26 @@ window.onbeforeunload = function() {
 
 The behavior was changed, because some webmasters abused this event handler by showing misleading and annoying messages. So right now old browsers still may show it as a message, but aside of that -- there's no way to customize the message shown to the user.
 
+````warn header="The `event.preventDefault()` doesn't work from a `beforeunload` handler"
+That may sound weird, but most browsers ignore `event.preventDefault()`.
+
+Which means, following code may not work:
+```js run
+window.addEventListener("beforeunload", (event) => {
+  // doesn't work, so this event handler doesn't do anything
+	event.preventDefault();
+});
+```
+
+Instead, in such handlers one should set `event.returnValue` to a string to get the result similar to the code above:
+```js run
+window.addEventListener("beforeunload", (event) => {
+  // works, same as returning from window.onbeforeunload
+	event.returnValue = "There are unsaved changes. Leave now?";
+});
+```
+````
+
 ## readyState
 
 What happens if we set the `DOMContentLoaded` handler after the document is loaded?

2-ui/5-loading/02-script-async-defer/article.md

@@ -133,8 +133,12 @@ Async scripts are great when we integrate an independent third-party script into
 <script async src="https://google-analytics.com/analytics.js"></script>
 ```
 
+```smart header="The `async` attribute is only for external scripts"
+Just like `defer`, the `async` attribute is ignored if the `<script>` tag has no `src`.
+```
+
 ## Dynamic scripts
- 
+
 There's one more important way of adding a script to the page.
 
 We can create a script and append it to the document dynamically using JavaScript:
@@ -188,7 +192,7 @@ But there are also essential differences between them:
 | `async` | *Load-first order*. Their document order doesn't matter -- which loads first runs first |  Irrelevant. May load and execute while the document has not yet been fully downloaded. That happens if scripts are small or cached, and the document is long enough. |
 | `defer` | *Document order* (as they go in the document). |  Execute after the document is loaded and parsed (they wait if needed), right before `DOMContentLoaded`. |
 
-In practice, `defer` is used for scripts that need the whole DOM and/or their relative execution order is important. 
+In practice, `defer` is used for scripts that need the whole DOM and/or their relative execution order is important.
 
 And  `async` is used for independent scripts, like counters or ads. And their relative execution order does not matter.
 

4-binary/01-arraybuffer-binary-arrays/article.md

@@ -126,9 +126,9 @@ new TypedArray();
 
 We can create a `TypedArray` directly, without mentioning `ArrayBuffer`. But a view cannot exist without an underlying `ArrayBuffer`, so gets created automatically in all these cases except the first one (when provided).
 
-To access the `ArrayBuffer`, there are properties:
-- `arr.buffer` -- references the `ArrayBuffer`.
-- `arr.byteLength` -- the length of the `ArrayBuffer`.
+To access the underlying `ArrayBuffer`, there are following properties in `TypedArray`:
+- `buffer` -- references the `ArrayBuffer`.
+- `byteLength` -- the length of the `ArrayBuffer`.
 
 So, we can always move from one view to another:
 ```js

7-animation/2-css-animations/3-animate-circle/solution.view/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <style>
     .circle {
-      transition-property: width, height, margin-left, margin-top;
+      transition-property: width, height;
       transition-duration: 2s;
       position: fixed;
       transform: translateX(-50%) translateY(-50%);

7-animation/2-css-animations/3-animate-circle/source.view/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <style>
     .circle {
-      transition-property: width, height, margin-left, margin-top;
+      transition-property: width, height;
       transition-duration: 2s;
       position: fixed;
       transform: translateX(-50%) translateY(-50%);

7-animation/2-css-animations/4-animate-circle-callback/solution.view/index.html

@@ -10,7 +10,7 @@
       text-align: center;
     }
     .circle {
-      transition-property: width, height, margin-left, margin-top;
+      transition-property: width, height;
       transition-duration: 2s;
       position: fixed;
       transform: translateX(-50%) translateY(-50%);

7-animation/3-js-animation/1-animate-ball/solution.view/index.html

@@ -21,7 +21,7 @@
     }
 
     function bounce(timeFraction) {
-      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+      for (let a = 0, b = 1; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
           return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
         }

7-animation/3-js-animation/2-animate-ball-hops/solution.view/index.html

@@ -21,7 +21,7 @@
     }
 
     function bounce(timeFraction) {
-      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+      for (let a = 0, b = 1; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
           return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
         }

7-animation/3-js-animation/article.md

@@ -283,7 +283,7 @@ The `bounce` function does the same, but in the reverse order: "bouncing" starts
 
 ```js
 function bounce(timeFraction) {
-  for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+  for (let a = 0, b = 1; 1; a += b, b /= 2) {
     if (timeFraction >= (7 - 4 * a) / 11) {
       return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
     }

7-animation/3-js-animation/bounce-easeinout.view/index.html

@@ -26,7 +26,7 @@
 
 
     function bounce(timeFraction) {
-      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+      for (let a = 0, b = 1; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
           return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
         }

7-animation/3-js-animation/bounce-easeout.view/index.html

@@ -22,7 +22,7 @@
     }
 
     function bounce(timeFraction) {
-      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+      for (let a = 0, b = 1; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
           return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
         }

7-animation/3-js-animation/bounce.view/index.html

@@ -19,7 +19,7 @@
       animate({
         duration: 3000,
         timing: function bounce(timeFraction) {
-          for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+          for (let a = 0, b = 1; 1; a += b, b /= 2) {
             if (timeFraction >= (7 - 4 * a) / 11) {
               return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
             }

7-animation/3-js-animation/text.view/index.html

@@ -36,7 +36,7 @@
 
 
     function bounce(timeFraction) {
-      for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+      for (let a = 0, b = 1; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
           return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
         }

9-regular-expressions/05-regexp-multiline-mode/article.md

@@ -16,7 +16,7 @@ let str = `1st place: Winnie
 3rd place: Eeyore`;
 
 *!*
-alert( str.match(/^\d/gm) ); // 1, 2, 3
+console.log( str.match(/^\d/gm) ); // 1, 2, 3
 */!*
 ```
 
@@ -28,7 +28,7 @@ let str = `1st place: Winnie
 3rd place: Eeyore`;
 
 *!*
-alert( str.match(/^\d/g) ); // 1
+console.log( str.match(/^\d/g) ); // 1
 */!*
 ```
 
@@ -51,7 +51,7 @@ let str = `Winnie: 1
 Piglet: 2
 Eeyore: 3`;
 
-alert( str.match(/\d$/gm) ); // 1,2,3
+console.log( str.match(/\d$/gm) ); // 1,2,3
 ```
 
 Without the flag `pattern:m`, the dollar `pattern:$` would only match the end of the whole text, so only the very last digit would be found.
@@ -75,7 +75,7 @@ let str = `Winnie: 1
 Piglet: 2
 Eeyore: 3`;
 
-alert( str.match(/\d\n/gm) ); // 1\n,2\n
+console.log( str.match(/\d\n/g) ); // 1\n,2\n
 ```
 
 As we can see, there are 2 matches instead of 3.