Sync with upstream @ bae0ef44

1-js/02-first-steps/05-types/article.md

@@ -46,13 +46,15 @@ Além dos números regulares, existem os chamados "valores numéricos especiais"
     alert( "not a number" / 2 ); // NaN, tal divisão é errônea
     ```
 
-    `NaN` é pegajoso. Qualquer outra operação em `NaN` retorna `NaN`:
+    `NaN` é pegajoso. Qualquer outra operação matemática com `NaN` retorna `NaN`:
 
     ```js run
-    alert( "not a number" / 2 + 5 ); // NaN
+    alert( NaN + 1 ); // NaN
+    alert( 3 * NaN ); // NaN
+    alert( "not a number" / 2 - 1 ); // NaN
     ```
 
-     Então, se há um `NaN` em algum lugar em uma expressão matemática, ele se propaga para o resultado inteiro.
+     Então, se há um `NaN` em algum lugar em uma expressão matemática, ele se propaga para o resultado inteiro (existe apenas uma exceção nisto: `NaN ** 0` é `1`).
 
 ```smart header="As operações matemáticas são seguras"
 Fazer matemática é "seguro" em JavaScript. Podemos fazer qualquer coisa: dividir por zero, tratar strings não-numéricas como números, etc.

1-js/02-first-steps/12-nullish-coalescing-operator/article.md

@@ -106,7 +106,7 @@ In practice, the zero height is often a valid value, that shouldn't be replaced
 
 ## Precedence
 
-The precedence of the `??` operator is about the same as `||`, just a bit lower. It equals `5` in the [MDN table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table), while `||` is `6`.
+The precedence of the `??` operator is the same as `||`. They both equal `4` in the [MDN table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table).
 
 That means that, just like `||`, the nullish coalescing operator `??` is evaluated before `=` and `?`, but after most other operations, such as `+`, `*`.
 

1-js/02-first-steps/16-function-expressions/article.md

@@ -12,7 +12,7 @@ function sayHi() {
 
 There is another syntax for creating a function that is called a *Function Expression*.
 
-It allows to create a new function in the middle of any expression.
+It allows us to create a new function in the middle of any expression.
 
 For example:
 

1-js/04-object-basics/04-object-methods/8-chain-calls/_js.view/solution.js

@@ -11,5 +11,6 @@ let ladder = {
   },
   showStep: function() { 
     alert(this.step);
+    return this;
   }
 };

1-js/04-object-basics/04-object-methods/8-chain-calls/_js.view/test.js

@@ -32,6 +32,14 @@ describe('Ladder', function() {
   it('down().up().up().up() ', function() {
     assert.equal(ladder.down().up().up().up().step, 2);
   });
+
+  it('showStep() should return this', function() {
+    assert.equal(ladder.showStep(), ladder);
+  });
+
+  it('up().up().down().showStep().down().showStep()', function () {
+    assert.equal(ladder.up().up().down().showStep().down().showStep().step, 0)
+  });
 
   after(function() {
     ladder.step = 0;

1-js/04-object-basics/07-optional-chaining/article.md

@@ -25,7 +25,7 @@ That's the expected result. JavaScript works like this. As `user.address` is `un
 
 In many practical cases we'd prefer to get `undefined` instead of an error here (meaning "no street").
 
-...And another example. In the web development, we can get an object that corresponds to a web page element using a special method call, such as `document.querySelector('.elem')`, and it returns `null` when there's no such element.
+...and another example. In Web development, we can get an object that corresponds to a web page element using a special method call, such as `document.querySelector('.elem')`, and it returns `null` when there's no such element.
 
 ```js run
 // document.querySelector('.elem') is null if there's no element

1-js/05-data-types/10-destructuring-assignment/article.md

@@ -5,7 +5,7 @@ The two most used data structures in JavaScript are `Object` and `Array`.
 - Objects allow us to create a single entity that stores data items by key. 
 - Arrays allow us to gather data items into an ordered list.
 
-Although, when we pass those to a function, it may need not an object/array as a whole. It may need individual pieces.
+Although, when we pass those to a function, it may need not be an object/array as a whole. It may need individual pieces.
 
 *Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes that's more convenient. 
 

1-js/11-async/01-callbacks/article.md

@@ -195,9 +195,9 @@ So the single `callback` function is used both for reporting errors and passing
 
 ## Pyramid of Doom
 
-From the first look, it's a viable way of asynchronous coding. And indeed it is. For one or maybe two nested calls it looks fine.
+At first glance, it looks like a viable approach to asynchronous coding. And indeed it is. For one or maybe two nested calls it looks fine.
 
-But for multiple asynchronous actions that follow one after another we'll have code like this:
+But for multiple asynchronous actions that follow one after another, we'll have code like this:
 
 ```js
 loadScript('1.js', function(error, script) {
@@ -228,8 +228,8 @@ loadScript('1.js', function(error, script) {
 ```
 
 In the code above:
-1. We load `1.js`, then if there's no error.
-2. We load `2.js`, then if there's no error.
+1. We load `1.js`, then if there's no error...
+2. We load `2.js`, then if there's no error...
 3. We load `3.js`, then if there's no error -- do something else `(*)`.
 
 As calls become more nested, the code becomes deeper and increasingly more difficult to manage, especially if we have real code instead of `...` that may include more loops, conditional statements and so on.
@@ -298,7 +298,7 @@ function step3(error, script) {
 }
 ```
 
-See? It does the same, and there's no deep nesting now because we made every action a separate top-level function.
+See? It does the same thing, and there's no deep nesting now because we made every action a separate top-level function.
 
 It works, but the code looks like a torn apart spreadsheet. It's difficult to read, and you probably noticed that one needs to eye-jump between pieces while reading it. That's inconvenient, especially if the reader is not familiar with the code and doesn't know where to eye-jump.
 

1-js/11-async/03-promise-chaining/article.md

@@ -120,7 +120,7 @@ new Promise(function(resolve, reject) {
 });
 ```
 
-Aqui o primeiro `.then` exibe `1` e retorna `new Promise(…)` na linha `(*)`. Após 1 segundo ele é resolvido, e o resultado (o argumento de `resolve`, no caso é `result * 2`) é passado ao tratador do segundo `.then`. O tratador está na linha `(**)`, ele exibe `2` e faz a mesma coisa.
+Aqui o primeiro `.then` exibe `1` e retorna `new Promise(…)` na linha `(*)`. Após 1 segundo ela é resolvida, e o resultado (o argumento de `resolve`, aqui é `result * 2`) é passado ao tratador do segundo `.then`. O tratador está na linha `(**)`, ele exibe `2` e faz a mesma coisa.
 
 Então a saída é a mesma que no exemplo anterior: 1 -> 2 -> 4, mas agora com 1 segundo de atraso entre as chamadas `alert`.
 

1-js/12-generators-iterators/2-async-iterators-generators/article.md

@@ -376,7 +376,7 @@ An example of use (shows commit authors in console):
 
   for await (const commit of fetchCommits('javascript-tutorial/en.javascript.info')) {
 
-    console.log(commit.author.login);
+    console.log(commit.author.name);
 
     if (++count == 100) { // let's stop at 100 commits
       break;

2-ui/2-events/03-event-delegation/article.md

@@ -1,7 +1,7 @@
 
 # Event delegation
 
-Capturing and bubbling allow us to implement one of most powerful event handling patterns called *event delegation*.
+Capturing and bubbling allow us to implement one of the most powerful event handling patterns called *event delegation*.
 
 The idea is that if we have a lot of elements handled in a similar way, then instead of assigning a handler to each of them -- we put a single handler on their common ancestor.
 

2-ui/2-events/04-default-browser-action/article.md

@@ -17,7 +17,7 @@ There are two ways to tell the browser we don't want it to act:
 - The main way is to use the `event` object. There's a method `event.preventDefault()`.
 - If the handler is assigned using `on<event>` (not by `addEventListener`), then returning `false` also works the same.
 
-In this HTML a click on a link doesn't lead to navigation, browser doesn't do anything:
+In this HTML, a click on a link doesn't lead to navigation; the browser doesn't do anything:
 
 ```html autorun height=60 no-beautify
 <a href="/" onclick="return false">Click here</a>
@@ -99,7 +99,7 @@ That's because the browser action is canceled on `mousedown`. The focusing is st
 
 The optional `passive: true` option of `addEventListener` signals the browser that the handler is not going to call `preventDefault()`.
 
-Why that may be needed?
+Why might that be needed?
 
 There are some events like `touchmove` on mobile devices (when the user moves their finger across the screen), that cause scrolling by default, but that scrolling can be prevented using `preventDefault()` in the handler.
 

2-ui/3-event-details/1-mouse-events-basics/article.md

@@ -39,9 +39,9 @@ In cases when a single action initiates multiple events, their order is fixed. T
 ```online
 Click the button below and you'll see the events. Try double-click too.
 
-On the teststand below all mouse events are logged, and if there is more than a 1 second delay between them they are separated by a horizontal ruler.
+On the teststand below, all mouse events are logged, and if there is more than a 1 second delay between them, they are separated by a horizontal rule.
 
-Also we can see the `button` property that allows to detect the mouse button, it's explained below.
+Also, we can see the `button` property that allows us to detect the mouse button; it's explained below.
 
 <input onmousedown="return logMouse(event)" onmouseup="return logMouse(event)" onclick="return logMouse(event)" oncontextmenu="return logMouse(event)" ondblclick="return logMouse(event)" value="Click me with the right or the left mouse button" type="button"> <input onclick="logClear('test')" value="Clear" type="button"> <form id="testform" name="testform"> <textarea style="font-size:12px;height:150px;width:360px;"></textarea></form>
 ```

2-ui/3-event-details/7-keyboard-events/article.md

@@ -107,7 +107,7 @@ So, `event.code` may match a wrong character for unexpected layout. Same letters
 
 To reliably track layout-dependent characters, `event.key` may be a better way.
 
-On the other hand, `event.code` has the benefit of staying always the same, bound to the physical key location, even if the visitor changes languages. So hotkeys that rely on it work well even in case of a language switch.
+On the other hand, `event.code` has the benefit of staying always the same, bound to the physical key location. So hotkeys that rely on it work well even in case of a language switch.
 
 Do we want to handle layout-dependant keys? Then `event.key` is the way to go.
 

9-regular-expressions/14-regexp-lookahead-lookbehind/article.md

@@ -59,6 +59,10 @@ alert( str.match(/\d+\b(?!€)/g) ); // 2 (the price is not matched)
 
 ## Lookbehind
 
+```warn header="Lookbehind browser compatibility"
+Please Note: Lookbehind is not supported in non-V8 browsers, such as Safari, Internet Explorer.
+```
+
 Lookahead allows to add a condition for "what follows".
 
 Lookbehind is similar, but it looks behind. That is, it allows to match a pattern only if there's something before it.