Sync with upstream @ fe571b36

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

@@ -66,7 +66,11 @@ Mehr über das Arbeiten mit Zahlen erfahren wir in diesem Kapitel <info:number>.
 
 ## BigInt
 
+<<<<<<< HEAD
 In JavaScript kann der Typ "Zahl" keine ganzzahligen Werte darstellen, die größer als <code>(2<sup>53</sup>-1)</code> (das ist `9007199254740991`) oder kleiner als <code>-(-2<sup>53</sup>-1)</code> für Negative sind. Es handelt sich um eine technische Einschränkung, die durch ihre interne Darstellung bedingt ist.
+=======
+In JavaScript, the "number" type cannot represent integer values larger than <code>(2<sup>53</sup>-1)</code> (that's `9007199254740991`), or less than <code>-(2<sup>53</sup>-1)</code> for negatives. It's a technical limitation caused by their internal representation.
+>>>>>>> fe571b36ed9e225f29239e82947005b08d74ac05
 
 Für die meisten Zwecke reicht das völlig aus, aber manchmal brauchen wir wirklich große Zahlen, z.B. für die Kryptographie oder Zeitstempel mit Mikrosekunden-Genauigkeit.
 

1-js/02-first-steps/06-alert-prompt-confirm/article.md

@@ -4,7 +4,11 @@ Da wir den Browser als unsere Demo-Umgebung verwenden, wollen wir einige Funktio
 
 ## alert
 
+<<<<<<< HEAD
 Diese haben wir bereits gesehen. Es zeigt eine Meldung an und wartet darauf, dass der Benutzer "OK" drückt.
+=======
+This one we've seen already. It shows a message and waits for the user to press "OK".
+>>>>>>> fe571b36ed9e225f29239e82947005b08d74ac05
 
 Zum Beispiel:
 

1-js/02-first-steps/10-ifelse/article.md

@@ -1,4 +1,4 @@
-# Conditional operators: if, '?'
+# Conditional branching: if, '?'
 
 Sometimes, we need to perform different actions based on different conditions.
 

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

@@ -68,7 +68,7 @@ Which behavior is better depends on a particular use case. When zero height is a
 
 ## Precedence
 
-The precedence of the `??` operator is rather low: `7` in the [MDN table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table).
+The precedence of the `??` operator is rather low: `5` in the [MDN table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table).
 
 So `??` is evaluated after most other operations, but before `=` and `?`.
 

1-js/03-code-quality/02-coding-style/1-style-errors/solution.md

@@ -12,7 +12,7 @@ function pow(x,n)  // <- no space between arguments
 
 let x=prompt("x?",''), n=prompt("n?",'') // <-- technically possible,
 // but better make it 2 lines, also there's no spaces and missing ;
-if (n<0)  // <- no spaces inside (n < 0), and should be extra line above it
+if (n<=0)  // <- no spaces inside (n <= 0), and should be extra line above it
 {   // <- figure bracket on a separate line
   // below - long lines can be split into multiple lines for improved readability
   alert(`Power ${n} is not supported, please enter an integer number greater than zero`);
@@ -39,7 +39,7 @@ function pow(x, n) {
 let x = prompt("x?", "");
 let n = prompt("n?", "");
 
-if (n < 0) {
+if (n <= 0) {
   alert(`Power ${n} is not supported,
     please enter an integer number greater than zero`);
 } else {

1-js/04-object-basics/03-garbage-collection/article.md

@@ -23,7 +23,7 @@ Simply put, "reachable" values are those that are accessible or usable somehow.
 
 2. Any other value is considered reachable if it's reachable from a root by a reference or by a chain of references.
 
-    For instance, if there's an object in a local variable, and that object has a property referencing another object, that object is considered reachable. And those that it references are also reachable. Detailed examples to follow.
+    For instance, if there's an object in a global variable, and that object has a property referencing another object, that object is considered reachable. And those that it references are also reachable. Detailed examples to follow.
 
 There's a background process in the JavaScript engine that is called [garbage collector](https://en.wikipedia.org/wiki/Garbage_collection_(computer_science)). It monitors all objects and removes those that have become unreachable.
 

1-js/04-object-basics/08-symbol/article.md

@@ -121,7 +121,7 @@ user.id = "Their id value"
 // Boom! overwritten by another script!
 ```
 
-### Symbols in a literal
+### Symbols in an object literal
 
 If we want to use a symbol in an object literal `{...}`, we need square brackets around it.
 
@@ -133,7 +133,7 @@ let id = Symbol("id");
 let user = {
   name: "John",
 *!*
-  [id]: 123 // not "id: 123"
+  [id]: 123 // not "id": 123
 */!*
 };
 ```

1-js/04-object-basics/09-object-toprimitive/article.md

@@ -46,7 +46,7 @@ There are three variants of type conversion, so-called "hints", described in the
 `"default"`
 : Occurs in rare cases when the operator is "not sure" what type to expect.
 
-    For instance, binary plus `+` can work both with strings (concatenates them) and numbers (adds them), so both strings and numbers would do. So if the a binary plus gets an object as an argument, it uses the `"default"` hint to convert it.
+    For instance, binary plus `+` can work both with strings (concatenates them) and numbers (adds them), so both strings and numbers would do. So if a binary plus gets an object as an argument, it uses the `"default"` hint to convert it.
 
     Also, if an object is compared using `==` with a string, number or a symbol, it's also unclear which conversion should be done, so the `"default"` hint is used.
 

1-js/06-advanced-functions/03-closure/7-let-scope/solution.md

@@ -15,7 +15,7 @@ function func() {
 func();
 ```
 
-In this example we can observe the peculiar difference between a "non-existing" and "unitialized" variable.
+In this example we can observe the peculiar difference between a "non-existing" and "uninitialized" variable.
 
 As you may have read in the article [](info:closure), a variable starts in the "uninitialized" state from the moment when the execution enters a code block (or a function). And it stays uninitalized until the corresponding `let` statement.
 

1-js/06-advanced-functions/03-closure/article.md

@@ -1,11 +1,15 @@
 
-# Variable scope
+# Variable scope, closure
 
-JavaScript is a very function-oriented language. It gives us a lot of freedom. A function can be created dynamically, passed as an argument to another function and called from a totally different place of code later.
+JavaScript is a very function-oriented language. It gives us a lot of freedom. A function can be created at any moment, passed as an argument to another function, and then called from a totally different place of code later.
 
-We already know that a function can access variables outside of it.
+We already know that a function can access variables outside of it ("outer" variables).
 
-Now let's expand our knowledge to include more complex scenarios.
+But what happens if outer variables change since a function is created? Will the function get newer values or the old ones?
+
+And what if a function is passed along as a parameter and called from another place of code, will it get access to outer variables at the new place?
+
+Let's expand our knowledge to understand these scenarios and more complex ones.
 
 ```smart header="We'll talk about `let/const` variables here"
 In JavaScript, there are 3 ways to declare a variable: `let`, `const` (the modern ones), and `var` (the remnant of the past).

1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md

@@ -6,7 +6,7 @@ importance: 5
 
 Create a "throttling" decorator `throttle(f, ms)` -- that returns a wrapper.
 
-When it's called multiple times, it passes the call to `f` at maximum once per `ms` milliseconds. 
+When it's called multiple times, it passes the call to `f` at maximum once per `ms` milliseconds.
 
 The difference with debounce is that it's completely different decorator:
 - `debounce` runs the function once after the "cooldown" period. Good for processing the final result.

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

@@ -167,7 +167,7 @@ sayHi(); // Hello, John!
 setTimeout(sayHi, 1000); // Hello, John!
 
 // even if the value of user changes within 1 second
-// sayHi uses the pre-bound value
+// sayHi uses the pre-bound value which is reference to the old user object
 user = {
   sayHi() { alert("Another user in setTimeout!"); }
 };
@@ -202,7 +202,7 @@ for (let key in user) {
 }
 ```
 
-JavaScript libraries also provide functions for convenient mass binding , e.g. [_.bindAll(obj)](http://lodash.com/docs#bindAll) in lodash.
+JavaScript libraries also provide functions for convenient mass binding , e.g. [_.bindAll(object, methodNames)](http://lodash.com/docs#bindAll) in lodash.
 ````
 
 ## Partial functions

1-js/08-prototypes/04-prototype-methods/article.md

@@ -7,7 +7,7 @@ The `__proto__` is considered outdated and somewhat deprecated (in browser-only
 
 The modern methods are:
 
-- [Object.create(proto[, descriptors])](mdn:js/Object/create) -- creates an empty object with given `proto` as `[[Prototype]]` and optional property descriptors.
+- [Object.create(proto, [descriptors])](mdn:js/Object/create) -- creates an empty object with given `proto` as `[[Prototype]]` and optional property descriptors.
 - [Object.getPrototypeOf(obj)](mdn:js/Object/getPrototypeOf) -- returns the `[[Prototype]]` of `obj`.
 - [Object.setPrototypeOf(obj, proto)](mdn:js/Object/setPrototypeOf) -- sets the `[[Prototype]]` of `obj` to `proto`.
 
@@ -175,7 +175,7 @@ alert(Object.keys(chineseDictionary)); // hello,bye
 
 Modern methods to set up and directly access the prototype are:
 
-- [Object.create(proto[, descriptors])](mdn:js/Object/create) -- creates an empty object with a given `proto` as `[[Prototype]]` (can be `null`) and optional property descriptors.
+- [Object.create(proto, [descriptors])](mdn:js/Object/create) -- creates an empty object with a given `proto` as `[[Prototype]]` (can be `null`) and optional property descriptors.
 - [Object.getPrototypeOf(obj)](mdn:js/Object.getPrototypeOf) -- returns the `[[Prototype]]` of `obj` (same as `__proto__` getter).
 - [Object.setPrototypeOf(obj, proto)](mdn:js/Object.setPrototypeOf) -- sets the `[[Prototype]]` of `obj` to `proto` (same as `__proto__` setter).
 

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

@@ -190,7 +190,7 @@ For most environment-specific objects, there is such a property. Here are some b
 
 ```js run
 // toStringTag for the environment-specific object and class:
-alert( window[Symbol.toStringTag]); // window
+alert( window[Symbol.toStringTag]); // Window
 alert( XMLHttpRequest.prototype[Symbol.toStringTag] ); // XMLHttpRequest
 
 alert( {}.toString.call(window) ); // [object Window]

1-js/09-classes/07-mixins/article.md

@@ -154,7 +154,7 @@ let eventMixin = {
    *  this.trigger('select', data1, data2);
    */
   trigger(eventName, ...args) {
-    if (!this._eventHandlers || !this._eventHandlers[eventName]) {
+    if (!this._eventHandlers?.[eventName]) {
       return; // no handlers for that event name
     }
 

1-js/10-error-handling/1-try-catch/article.md

@@ -363,7 +363,7 @@ The "rethrowing" technique can be explained in more detail as:
 
 1. Catch gets all errors.
 2. In the `catch(err) {...}` block we analyze the error object `err`.
-2. If we don't know how to handle it, we do `throw err`.
+3. If we don't know how to handle it, we do `throw err`.
 
 Usually, we can check the error type using the `instanceof` operator:
 

1-js/11-async/04-promise-error-handling/article.md

@@ -122,7 +122,7 @@ Here the `.catch` block finishes normally. So the next successful `.then` handle
 In the example below we see the other situation with `.catch`. The handler `(*)` catches the error and just can't handle it (e.g. it only knows how to handle `URIError`), so it throws it again:
 
 ```js run
-// the execution: catch -> catch -> then
+// the execution: catch -> catch
 new Promise((resolve, reject) => {
 
   throw new Error("Whoops!");

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

@@ -67,7 +67,7 @@ f();
 
 The function execution "pauses" at the line `(*)` and resumes when the promise settles, with `result` becoming its result. So the code above shows "done!" in one second.
 
-Let's emphasize: `await` literally makes JavaScript wait until the promise settles, and then go on with the result. That doesn't cost any CPU resources, because the engine can do other jobs in the meantime: execute other scripts, handle events, etc.
+Let's emphasize: `await` literally suspends the function execution until the promise settles, and then resumes it with the promise result. That doesn't cost any CPU resources, because the JavaScript engine can do other jobs in the meantime: execute other scripts, handle events, etc.
 
 It's just a more elegant syntax of getting the promise result than `promise.then`, easier to read and write.
 
@@ -83,7 +83,7 @@ function f() {
 }
 ```
 
-We will get this error if we do not put `async` before a function. As said, `await` only works inside an `async function`.
+We may get this error if we forget to put `async` before a function. As said, `await` only works inside an `async` function.
 ````
 
 Let's take the `showAvatar()` example from the chapter <info:promise-chaining> and rewrite it using `async/await`:
@@ -139,9 +139,8 @@ But we can wrap it into an anonymous async function, like this:
   ...
 })();
 ```
-
-
 ````
+
 ````smart header="`await` accepts \"thenables\""
 Like `promise.then`, `await` allows us to use thenable objects (those with a callable `then` method). The idea is that a third-party object may not be a promise, but promise-compatible: if it supports `.then`, that's enough to use it with `await`.
 

1-js/99-js-misc/01-proxy/01-error-nonexisting/task.md

@@ -1,8 +1,8 @@
-# Error on reading non-existant property
+# Error on reading non-existent property
 
-Usually, an attempt to read a non-existant property returns `undefined`.
+Usually, an attempt to read a non-existent property returns `undefined`.
 
-Create a proxy that throws an error for an attempt to read of a non-existant property instead.
+Create a proxy that throws an error for an attempt to read of a non-existent property instead.
 
 That can help to detect programming mistakes early.
 

1-js/99-js-misc/01-proxy/article.md

@@ -840,7 +840,7 @@ So there's no such problem when proxying an array.
 
 ### Private fields
 
-The similar thing happens with private class fields.
+A similar thing happens with private class fields.
 
 For example, `getName()` method accesses the private `#name` property and breaks after proxying:
 
@@ -963,7 +963,7 @@ revoke();
 alert(proxy.data); // Error
 ```
 
-A call to `revoke()` removes all internal references to the target object from the proxy, so they are no more connected. The target object can be garbage-collected after that.
+A call to `revoke()` removes all internal references to the target object from the proxy, so they are no longer connected. The target object can be garbage-collected after that.
 
 We can also store `revoke` in a `WeakMap`, to be able to easily find it by a proxy object:
 

1-js/99-js-misc/04-reference-type/article.md

@@ -106,9 +106,3 @@ That's for the subsequent method call `()` to get the object and set `this` to i
 For all other operations, the reference type automatically becomes the property value (a function in our case).
 
 The whole mechanics is hidden from our eyes. It only matters in subtle cases, such as when a method is obtained dynamically from the object, using an expression.
-
-
-
-
-
- result of dot `.` isn't actually a method, but a value of `` needs a way to pass the information about `obj`

1-js/99-js-misc/05-bigint/article.md

@@ -50,7 +50,7 @@ The conversion operations are always silent, never give errors, but if the bigin
 ````smart header="The unary plus is not supported on bigints"
 The unary plus operator `+value` is a well-known way to convert `value` to a number.
 
-On bigints it's not supported, to avoid confusion:
+In order to avoid confusion, it's not supported on bigints:
 ```js run
 let bigint = 1n;
 

2-ui/1-document/07-modifying-document/article.md

@@ -61,7 +61,7 @@ let div = document.createElement('div');
 // 2. Set its class to "alert"
 div.className = "alert";
 
-// Fill it with the content
+// 3. Fill it with the content
 div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";
 ```
 

2-ui/1-document/11-coordinates/article.md

@@ -88,8 +88,8 @@ As you can see, `left/top` do not equal `x/y` in such case.
 In practice though, `elem.getBoundingClientRect()` always returns positive width/height, here we mention negative `width/height` only for you to understand why these seemingly duplicate properties are not actually duplicates.
 ```
 
-```warn header="Internet Explorer and Edge: no support for `x/y`"
-Internet Explorer and Edge don't support `x/y` properties for historical reasons.
+```warn header="Internet Explorer: no support for `x/y`"
+Internet Explorer doesn't support `x/y` properties for historical reasons.
 
 So we can either make a polyfill (add getters in `DomRect.prototype`) or just use `top/left`, as they are always the same as `x/y` for positive `width/height`, in particular in the result of `elem.getBoundingClientRect()`.
 ```

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

@@ -236,7 +236,7 @@ element.removeEventListener(event, handler, [options]);
 ````warn header="Removal requires the same function"
 To remove a handler we should pass exactly the same function as was assigned.
 
-That doesn't work:
+This doesn't work:
 
 ```js no-beautify
 elem.addEventListener( "click" , () => alert('Thanks!'));

2-ui/2-events/05-dispatch-events/article.md

@@ -162,7 +162,7 @@ Besides, the event class describes "what kind of event" it is, and if the event
 
 ## event.preventDefault()
 
-Many browser events have a "default action", such as nagivating to a link, starting a selection, and so on.
+Many browser events have a "default action", such as navigating to a link, starting a selection, and so on.
 
 For new, custom events, there are definitely no default browser actions, but a code that dispatches such event may have its own plans what to do after triggering the event.
 

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

@@ -24,7 +24,7 @@ We've already seen some of these events:
 : Triggers after two clicks on the same element within a short timeframe. Rarely used nowadays.
 
 `contextmenu`
-: Triggers when when the right mouse button is pressed. There are other ways to open a context menu, e.g. using a special keyboard key, it triggers in that case also, so it's not exactly the mouse event.
+: Triggers when the right mouse button is pressed. There are other ways to open a context menu, e.g. using a special keyboard key, it triggers in that case also, so it's not exactly the mouse event.
 
 ...There are several other events too, we'll cover them later.
 
@@ -34,7 +34,7 @@ As you can see from the list above, a user action may trigger multiple events.
 
 For instance, a left-button click first triggers `mousedown`, when the button is pressed, then `mouseup` and `click` when it's released.
 
-In cases when a single action initiates multiple events, their order is fixed. That is, the handlers are called in the order `mousedown` -> `mouseup` -> `click`. 
+In cases when a single action initiates multiple events, their order is fixed. That is, the handlers are called in the order `mousedown` -> `mouseup` -> `click`.
 
 ```online
 Click the button below and you'll see the events. Try double-click too.
@@ -50,7 +50,7 @@ Also we can see the `button` property that allows to detect the mouse button, it
 
 Click-related events always have the `button` property, which allows to get the exact mouse button.
 
-We usually don't use it for `click` and `contextmenu` events, because the former happens only on left-click, and the latter -- only on right-click. 
+We usually don't use it for `click` and `contextmenu` events, because the former happens only on left-click, and the latter -- only on right-click.
 
 From the other hand, `mousedown` and `mouseup` handlers we may need `event.button`, because these events trigger on any button, so `button` allows to distinguish between "right-mousedown" and "left-mousedown".
 

2-ui/3-event-details/4-mouse-drag-and-drop/ball.view/index.html

@@ -13,7 +13,7 @@
 
 
   <script>
-    ball.onmousedown = function(event) { 
+    ball.onmousedown = function(event) {
       ball.style.position = 'absolute';
       ball.style.zIndex = 1000;
       document.body.appendChild(ball);