From cb3380ce07cbd1a7372dda81dbe36b6ef3283d45 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Sun, 17 Apr 2022 15:41:37 +0800 Subject: [PATCH 01/28] Update index.html --- .../1-behavior-nested-tooltip/solution.view/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html index e998165fd..84d52b18c 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html @@ -54,7 +54,7 @@

Once upon a time there was a mother pig who had three little pigs.

-

The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you." +

The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."

The three little pigs set off. "We will take care that the wolf does not catch us," they said.

From 95498b469bcbfa8fb818c390adc7ee7cdf1994b2 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Sun, 17 Apr 2022 15:42:41 +0800 Subject: [PATCH 02/28] Update index.html --- .../1-behavior-nested-tooltip/source.view/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html index 2dc4394e7..774e24a21 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/source.view/index.html @@ -54,7 +54,7 @@

Once upon a time there was a mother pig who had three little pigs.

-

The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you." +

The three little pigs grew so big that their mother said to them, "You are too big to live here any longer. You must go and build houses for yourselves. But take care that the wolf does not catch you."

The three little pigs set off. "We will take care that the wolf does not catch us," they said.

From bb31eefa04b5d356b831b123a69f00b87336804e Mon Sep 17 00:00:00 2001 From: Tim Ruszala <87249513+TimothyRuszala@users.noreply.github.com> Date: Sun, 17 Apr 2022 17:10:19 -0600 Subject: [PATCH 03/28] fix minor grammatical mistakes --- .../3-class-extend-object/solution.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/1-js/09-classes/03-static-properties-methods/3-class-extend-object/solution.md b/1-js/09-classes/03-static-properties-methods/3-class-extend-object/solution.md index ca9e80601..cb9829ce0 100644 --- a/1-js/09-classes/03-static-properties-methods/3-class-extend-object/solution.md +++ b/1-js/09-classes/03-static-properties-methods/3-class-extend-object/solution.md @@ -21,14 +21,14 @@ alert( rabbit.hasOwnProperty('name') ); // true But that's not all yet. -Even after the fix, there's still important difference in `"class Rabbit extends Object"` versus `class Rabbit`. +Even after the fix, there's still an important difference between `"class Rabbit extends Object"` and `class Rabbit`. As we know, the "extends" syntax sets up two prototypes: 1. Between `"prototype"` of the constructor functions (for methods). 2. Between the constructor functions themselves (for static methods). -In our case, for `class Rabbit extends Object` it means: +In the case of `class Rabbit extends Object` it means: ```js run class Rabbit extends Object {} @@ -37,7 +37,7 @@ alert( Rabbit.prototype.__proto__ === Object.prototype ); // (1) true alert( Rabbit.__proto__ === Object ); // (2) true ``` -So `Rabbit` now provides access to static methods of `Object` via `Rabbit`, like this: +So `Rabbit` now provides access to the static methods of `Object` via `Rabbit`, like this: ```js run class Rabbit extends Object {} @@ -67,7 +67,7 @@ alert ( Rabbit.getOwnPropertyNames({a: 1, b: 2})); // Error So `Rabbit` doesn't provide access to static methods of `Object` in that case. -By the way, `Function.prototype` has "generic" function methods, like `call`, `bind` etc. They are ultimately available in both cases, because for the built-in `Object` constructor, `Object.__proto__ === Function.prototype`. +By the way, `Function.prototype` also has "generic" function methods, like `call`, `bind` etc. They are ultimately available in both cases, because for the built-in `Object` constructor, `Object.__proto__ === Function.prototype`. Here's the picture: From 06416483b00096923fde1f74ca6d1d3441e68fae Mon Sep 17 00:00:00 2001 From: pavans Date: Mon, 18 Apr 2022 18:01:39 +0530 Subject: [PATCH 04/28] Case sensitive word change Change of case sensitive word from AppLE to APPLE --- 1-js/02-first-steps/04-variables/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md index 0d5d2f30b..b8f860eb3 100644 --- a/1-js/02-first-steps/04-variables/article.md +++ b/1-js/02-first-steps/04-variables/article.md @@ -192,7 +192,7 @@ let my-name; // hyphens '-' aren't allowed in the name ``` ```smart header="Case matters" -Variables named `apple` and `AppLE` are two different variables. +Variables named `apple` and `APPLE` are two different variables. ``` ````smart header="Non-Latin letters are allowed, but not recommended" From e424ad23e5a05da4c5f17b6e9c791b988ae0efa7 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Tue, 19 Apr 2022 00:50:41 +0600 Subject: [PATCH 05/28] minor grammar fix --- 1-js/05-data-types/02-number/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/02-number/article.md b/1-js/05-data-types/02-number/article.md index afb679890..5a50cd622 100644 --- a/1-js/05-data-types/02-number/article.md +++ b/1-js/05-data-types/02-number/article.md @@ -178,7 +178,7 @@ There are two ways to do so: alert( num.toFixed(1) ); // "12.4" ``` - Please note that result of `toFixed` is a string. If the decimal part is shorter than required, zeroes are appended to the end: + Please note that the result of `toFixed` is a string. If the decimal part is shorter than required, zeroes are appended to the end: ```js run let num = 12.34; From ee1daf7664e93bd200001b5dc0892e02642a834a Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Tue, 19 Apr 2022 01:47:49 +0600 Subject: [PATCH 06/28] Update article.md --- 1-js/05-data-types/02-number/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/02-number/article.md b/1-js/05-data-types/02-number/article.md index afb679890..0579893b5 100644 --- a/1-js/05-data-types/02-number/article.md +++ b/1-js/05-data-types/02-number/article.md @@ -246,7 +246,7 @@ Can we work around the problem? Sure, the most reliable method is to round the r ```js run let sum = 0.1 + 0.2; -alert( sum.toFixed(2) ); // 0.30 +alert( sum.toFixed(2) ); // "0.30" ``` Please note that `toFixed` always returns a string. It ensures that it has 2 digits after the decimal point. That's actually convenient if we have an e-shopping and need to show `$0.30`. For other cases, we can use the unary plus to coerce it into a number: From 888e4b9c3a1de39499846d5fbdb662203d2ac123 Mon Sep 17 00:00:00 2001 From: Luca1152 Date: Tue, 19 Apr 2022 18:55:38 +0300 Subject: [PATCH 07/28] Fix language in Methods of primitives task Use "What do you think" instead of "How do you think". --- .../01-primitives-methods/1-string-new-property/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/01-primitives-methods/1-string-new-property/task.md b/1-js/05-data-types/01-primitives-methods/1-string-new-property/task.md index 50c781ea5..208f84cc7 100644 --- a/1-js/05-data-types/01-primitives-methods/1-string-new-property/task.md +++ b/1-js/05-data-types/01-primitives-methods/1-string-new-property/task.md @@ -15,4 +15,4 @@ str.test = 5; alert(str.test); ``` -How do you think, will it work? What will be shown? +What do you think, will it work? What will be shown? From 1f81da024dd80905a4476e010f21010825dc20ad Mon Sep 17 00:00:00 2001 From: Luca1152 Date: Tue, 19 Apr 2022 19:01:56 +0300 Subject: [PATCH 08/28] Fix grammar in 'Symbol type' New: That said, all symbols have the `description` property. Old: That said, any symbols have `description` property. --- 1-js/04-object-basics/08-symbol/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/08-symbol/article.md b/1-js/04-object-basics/08-symbol/article.md index f61e88583..d6b8e9c9b 100644 --- a/1-js/04-object-basics/08-symbol/article.md +++ b/1-js/04-object-basics/08-symbol/article.md @@ -238,7 +238,7 @@ alert( Symbol.keyFor(sym2) ); // id The `Symbol.keyFor` internally uses the global symbol registry to look up the key for the symbol. So it doesn't work for non-global symbols. If the symbol is not global, it won't be able to find it and returns `undefined`. -That said, any symbols have `description` property. +That said, all symbols have the `description` property. For instance: From d62faffa0d44f848aeeff3a8f99d2859bba366ba Mon Sep 17 00:00:00 2001 From: Omer Baddour <36576544+OmerBaddour@users.noreply.github.com> Date: Wed, 20 Apr 2022 14:16:17 -0400 Subject: [PATCH 09/28] minor typos and English improvements --- 1-js/02-first-steps/16-function-expressions/article.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/1-js/02-first-steps/16-function-expressions/article.md b/1-js/02-first-steps/16-function-expressions/article.md index 0135cf1cb..d502c9d27 100644 --- a/1-js/02-first-steps/16-function-expressions/article.md +++ b/1-js/02-first-steps/16-function-expressions/article.md @@ -90,7 +90,7 @@ Everything would work the same. ````smart header="Why is there a semicolon at the end?" -You might wonder, why does Function Expression have a semicolon `;` at the end, but Function Declaration does not: +You might wonder, why do Function Expressions have a semicolon `;` at the end, but Function Declarations do not: ```js function sayHi() { @@ -144,13 +144,13 @@ function showCancel() { ask("Do you agree?", showOk, showCancel); ``` -In practice, such functions are quite useful. The major difference between a real-life `ask` and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such function usually draws a nice-looking question window. But that's another story. +In practice, such functions are quite useful. The major difference between a real-life `ask` and the example above is that real-life functions use more complex ways to interact with the user than a simple `confirm`. In the browser, such functions usually draw a nice-looking question window. But that's another story. **The arguments `showOk` and `showCancel` of `ask` are called *callback functions* or just *callbacks*.** The idea is that we pass a function and expect it to be "called back" later if necessary. In our case, `showOk` becomes the callback for "yes" answer, and `showCancel` for "no" answer. -We can use Function Expressions to write the same function much shorter: +We can use Function Expressions to write an equivalent, shorter function: ```js run no-beautify function ask(question, yes, no) { @@ -186,7 +186,7 @@ Let's formulate the key differences between Function Declarations and Expression First, the syntax: how to differentiate between them in the code. -- *Function Declaration:* a function, declared as a separate statement, in the main code flow. +- *Function Declaration:* a function, declared as a separate statement, in the main code flow: ```js // Function Declaration From adca4b352b4c6bba39e49d3dd9831e4ba191dbaf Mon Sep 17 00:00:00 2001 From: Omer Baddour <36576544+OmerBaddour@users.noreply.github.com> Date: Thu, 21 Apr 2022 14:18:23 -0400 Subject: [PATCH 10/28] minor fix, and explanation improvements --- 1-js/04-object-basics/02-object-copy/article.md | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/1-js/04-object-basics/02-object-copy/article.md b/1-js/04-object-basics/02-object-copy/article.md index b56a8034b..e59b0481e 100644 --- a/1-js/04-object-basics/02-object-copy/article.md +++ b/1-js/04-object-basics/02-object-copy/article.md @@ -37,7 +37,7 @@ And here's how it's actually stored in memory: The object is stored somewhere in memory (at the right of the picture), while the `user` variable (at the left) has a "reference" to it. -We may think of an object variable, such as `user`, as like a sheet of paper with the address of the object on it. +We may think of an object variable, such as `user`, like a sheet of paper with the address of the object on it. When we perform actions with the object, e.g. take a property `user.name`, the JavaScript engine looks at what's at that address and performs the operation on the actual object. @@ -104,11 +104,9 @@ For comparisons like `obj1 > obj2` or for a comparison against a primitive `obj So, copying an object variable creates one more reference to the same object. -But what if we need to duplicate an object? Create an independent copy, a clone? +But what if we need to duplicate an object? -That's also doable, but a little bit more difficult, because there's no built-in method for that in JavaScript. But there is rarely a need -- copying by reference is good most of the time. - -But if we really want that, then we need to create a new object and replicate the structure of the existing one by iterating over its properties and copying them on the primitive level. +We can create a new object and replicate the structure of the existing one, by iterating over its properties and copying them on the primitive level. Like this: @@ -133,7 +131,7 @@ clone.name = "Pete"; // changed the data in it alert( user.name ); // still John in the original object ``` -Also we can use the method [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) for that. +We can also use the method [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign). The syntax is: @@ -190,7 +188,7 @@ There are also other methods of cloning an object, e.g. using the [spread syntax ## Nested cloning -Until now we assumed that all properties of `user` are primitive. But properties can be references to other objects. What to do with them? +Until now we assumed that all properties of `user` are primitive. But properties can be references to other objects. Like this: ```js run @@ -205,9 +203,7 @@ let user = { alert( user.sizes.height ); // 182 ``` -Now it's not enough to copy `clone.sizes = user.sizes`, because the `user.sizes` is an object, it will be copied by reference. So `clone` and `user` will share the same sizes: - -Like this: +Now it's not enough to copy `clone.sizes = user.sizes`. `user.sizes` is an object, and will be copied by reference, so `clone` and `user` will share the same sizes: ```js run let user = { From 68aa3ef83c27dbd30050fde69d361b9fdc2d6ba8 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Sat, 23 Apr 2022 16:55:57 +0600 Subject: [PATCH 11/28] Update article.md --- 7-animation/2-css-animations/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 8dd64f39a..1b1b0ca0d 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -210,7 +210,6 @@ Other names are shorthands for the following `cubic-bezier`: So we could use `ease-out` for our slowing down train: - ```css .train { left: 0; @@ -226,6 +225,7 @@ But it looks a bit differently. The control points on the curve can have any `y` coordinates: even negative or huge ones. Then the Bezier curve would also extend very low or high, making the animation go beyond its normal range. In the example below the animation code is: + ```css .train { left: 100px; From c3d92ec52a016f4db081a1bd74e10c9f2ad71d5c Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Sat, 23 Apr 2022 21:04:48 +0600 Subject: [PATCH 12/28] add a comma --- 1-js/05-data-types/03-string/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/03-string/article.md b/1-js/05-data-types/03-string/article.md index 41bda2254..01e934ef1 100644 --- a/1-js/05-data-types/03-string/article.md +++ b/1-js/05-data-types/03-string/article.md @@ -48,7 +48,7 @@ let guestList = "Guests: // Error: Unexpected token ILLEGAL * John"; ``` -Single and double quotes come from ancient times of language creation when the need for multiline strings was not taken into account. Backticks appeared much later and thus are more versatile. +Single and double quotes come from ancient times of language creation, when the need for multiline strings was not taken into account. Backticks appeared much later and thus are more versatile. Backticks also allow us to specify a "template function" before the first backtick. The syntax is: func`string`. The function `func` is called automatically, receives the string and embedded expressions and can process them. This is called "tagged templates". This feature makes it easier to implement custom templating, but is rarely used in practice. You can read more about it in the [manual](mdn:/JavaScript/Reference/Template_literals#Tagged_templates). From 4aa9f818e8089f884bbff47719496c5aa0131630 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Mon, 25 Apr 2022 23:11:54 +0600 Subject: [PATCH 13/28] replace side-effect with side effect --- 1-js/02-first-steps/13-while-for/article.md | 2 +- 1-js/02-first-steps/14-switch/article.md | 2 +- 1-js/02-first-steps/15-function-basics/article.md | 2 +- 1-js/06-advanced-functions/08-settimeout-setinterval/article.md | 2 +- 1-js/13-modules/01-modules-intro/article.md | 2 +- 2-ui/3-event-details/1-mouse-events-basics/article.md | 2 +- 2-ui/3-event-details/4-mouse-drag-and-drop/article.md | 2 +- 2-ui/3-event-details/7-keyboard-events/article.md | 2 +- 3-frames-and-windows/06-clickjacking/article.md | 2 +- 4-binary/03-blob/article.md | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/1-js/02-first-steps/13-while-for/article.md b/1-js/02-first-steps/13-while-for/article.md index a7a211569..eadbf5322 100644 --- a/1-js/02-first-steps/13-while-for/article.md +++ b/1-js/02-first-steps/13-while-for/article.md @@ -268,7 +268,7 @@ for (let i = 0; i < 10; i++) { From a technical point of view, this is identical to the example above. Surely, we can just wrap the code in an `if` block instead of using `continue`. -But as a side-effect, this created one more level of nesting (the `alert` call inside the curly braces). If the code inside of `if` is longer than a few lines, that may decrease the overall readability. +But as a side effect, this created one more level of nesting (the `alert` call inside the curly braces). If the code inside of `if` is longer than a few lines, that may decrease the overall readability. ```` ````warn header="No `break/continue` to the right side of '?'" diff --git a/1-js/02-first-steps/14-switch/article.md b/1-js/02-first-steps/14-switch/article.md index effdafcf9..d86babcec 100644 --- a/1-js/02-first-steps/14-switch/article.md +++ b/1-js/02-first-steps/14-switch/article.md @@ -139,7 +139,7 @@ switch (a) { Now both `3` and `5` show the same message. -The ability to "group" cases is a side-effect of how `switch/case` works without `break`. Here the execution of `case 3` starts from the line `(*)` and goes through `case 5`, because there's no `break`. +The ability to "group" cases is a side effect of how `switch/case` works without `break`. Here the execution of `case 3` starts from the line `(*)` and goes through `case 5`, because there's no `break`. ## Type matters diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md index 262dff809..79dee432d 100644 --- a/1-js/02-first-steps/15-function-basics/article.md +++ b/1-js/02-first-steps/15-function-basics/article.md @@ -522,7 +522,7 @@ function name(parameters, delimited, by, comma) { To make the code clean and easy to understand, it's recommended to use mainly local variables and parameters in the function, not outer variables. -It is always easier to understand a function which gets parameters, works with them and returns a result than a function which gets no parameters, but modifies outer variables as a side-effect. +It is always easier to understand a function which gets parameters, works with them and returns a result than a function which gets no parameters, but modifies outer variables as a side effect. Function naming: diff --git a/1-js/06-advanced-functions/08-settimeout-setinterval/article.md b/1-js/06-advanced-functions/08-settimeout-setinterval/article.md index 984102687..e4203f57e 100644 --- a/1-js/06-advanced-functions/08-settimeout-setinterval/article.md +++ b/1-js/06-advanced-functions/08-settimeout-setinterval/article.md @@ -232,7 +232,7 @@ setTimeout(function() {...}, 100); For `setInterval` the function stays in memory until `clearInterval` is called. -There's a side-effect. A function references the outer lexical environment, so, while it lives, outer variables live too. They may take much more memory than the function itself. So when we don't need the scheduled function anymore, it's better to cancel it, even if it's very small. +There's a side effect. A function references the outer lexical environment, so, while it lives, outer variables live too. They may take much more memory than the function itself. So when we don't need the scheduled function anymore, it's better to cancel it, even if it's very small. ```` ## Zero delay setTimeout diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md index fede84069..e9b7272b9 100644 --- a/1-js/13-modules/01-modules-intro/article.md +++ b/1-js/13-modules/01-modules-intro/article.md @@ -272,7 +272,7 @@ In other words: - module scripts wait until the HTML document is fully ready (even if they are tiny and load faster than HTML), and then run. - relative order of scripts is maintained: scripts that go first in the document, execute first. -As a side-effect, module scripts always "see" the fully loaded HTML-page, including HTML elements below them. +As a side effect, module scripts always "see" the fully loaded HTML-page, including HTML elements below them. For instance: diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index c322126e4..80c1875f5 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -154,7 +154,7 @@ Move the mouse over the input field to see `clientX/clientY` (the example is in ## Preventing selection on mousedown -Double mouse click has a side-effect that may be disturbing in some interfaces: it selects text. +Double mouse click has a side effect that may be disturbing in some interfaces: it selects text. For instance, double-clicking on the text below selects it in addition to our handler: diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md index 9789e1c2d..e9a23ad63 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md +++ b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md @@ -100,7 +100,7 @@ ball.style.left = pageX - ball.offsetWidth / 2 + 'px'; ball.style.top = pageY - ball.offsetHeight / 2 + 'px'; ``` -Not bad, but there's a side-effect. To initiate the drag'n'drop, we can `mousedown` anywhere on the ball. But if "take" it from its edge, then the ball suddenly "jumps" to become centered under the mouse pointer. +Not bad, but there's a side effect. To initiate the drag'n'drop, we can `mousedown` anywhere on the ball. But if "take" it from its edge, then the ball suddenly "jumps" to become centered under the mouse pointer. It would be better if we keep the initial shift of the element relative to the pointer. diff --git a/2-ui/3-event-details/7-keyboard-events/article.md b/2-ui/3-event-details/7-keyboard-events/article.md index 86e9b83fd..12fe63201 100644 --- a/2-ui/3-event-details/7-keyboard-events/article.md +++ b/2-ui/3-event-details/7-keyboard-events/article.md @@ -149,7 +149,7 @@ The `onkeydown` handler here uses `checkPhoneKey` to check for the key pressed. As we know, the `false` value returned from the event handler, assigned using a DOM property or an attribute, such as above, prevents the default action, so nothing appears in the `` for keys that don't pass the test. (The `true` value returned doesn't affect anything, only returning `false` matters) -Please note that special keys, such as `key:Backspace`, `key:Left`, `key:Right`, do not work in the input. That's a side-effect of the strict filter `checkPhoneKey`. These keys make it return `false`. +Please note that special keys, such as `key:Backspace`, `key:Left`, `key:Right`, do not work in the input. That's a side effect of the strict filter `checkPhoneKey`. These keys make it return `false`. Let's relax the filter a little bit by allowing arrow keys `key:Left`, `key:Right` and `key:Delete`, `key:Backspace`: diff --git a/3-frames-and-windows/06-clickjacking/article.md b/3-frames-and-windows/06-clickjacking/article.md index 1daa87dd0..34d0a91ae 100644 --- a/3-frames-and-windows/06-clickjacking/article.md +++ b/3-frames-and-windows/06-clickjacking/article.md @@ -154,7 +154,7 @@ Depending on your browser, the `iframe` above is either empty or alerting you th ## Showing with disabled functionality -The `X-Frame-Options` header has a side-effect. Other sites won't be able to show our page in a frame, even if they have good reasons to do so. +The `X-Frame-Options` header has a side effect. Other sites won't be able to show our page in a frame, even if they have good reasons to do so. So there are other solutions... For instance, we can "cover" the page with a `
` with styles `height: 100%; width: 100%;`, so that it will intercept all clicks. That `
` is to be removed if `window == top` or if we figure out that we don't need the protection. diff --git a/4-binary/03-blob/article.md b/4-binary/03-blob/article.md index e3bd32b38..41ad4b36e 100644 --- a/4-binary/03-blob/article.md +++ b/4-binary/03-blob/article.md @@ -101,7 +101,7 @@ For each URL generated by `URL.createObjectURL` the browser stores a URL -> `Blo A generated URL (and hence the link with it) is only valid within the current document, while it's open. And it allows to reference the `Blob` in ``, ``, basically any other object that expects a URL. -There's a side-effect though. While there's a mapping for a `Blob`, the `Blob` itself resides in the memory. The browser can't free it. +There's a side effect though. While there's a mapping for a `Blob`, the `Blob` itself resides in the memory. The browser can't free it. The mapping is automatically cleared on document unload, so `Blob` objects are freed then. But if an app is long-living, then that doesn't happen soon. From 37057a7b5722a34e09212149957a13a467beb2df Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Tue, 26 Apr 2022 14:51:28 +0600 Subject: [PATCH 14/28] Update article.md --- 2-ui/3-event-details/1-mouse-events-basics/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index c322126e4..39963b185 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -30,7 +30,7 @@ We've already seen some of these events: ## Events order -As you can see from the list above, a user action may trigger multiple events. +As you can see z 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. @@ -52,7 +52,7 @@ Click-related events always have the `button` property, which allows to get the 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 may need `event.button`, because these events trigger on any button, so `button` allows to distinguish between "right-mousedown" and "left-mousedown". +On the other hand, `mousedown` and `mouseup` handlers may need `event.button`, because these events trigger on any button, so `button` allows to distinguish between "right-mousedown" and "left-mousedown". The possible values of `event.button` are: From f8d68ca445a1605b6301bea46b6e83eb0c92124b Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Tue, 26 Apr 2022 14:52:47 +0600 Subject: [PATCH 15/28] Update article.md --- 2-ui/3-event-details/1-mouse-events-basics/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/1-mouse-events-basics/article.md b/2-ui/3-event-details/1-mouse-events-basics/article.md index 39963b185..aa91504bf 100644 --- a/2-ui/3-event-details/1-mouse-events-basics/article.md +++ b/2-ui/3-event-details/1-mouse-events-basics/article.md @@ -30,7 +30,7 @@ We've already seen some of these events: ## Events order -As you can see z list above, a user action may trigger multiple events. +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. From 9bcd822a5e509115de79ee6c743ab706d50f7888 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Sat, 30 Apr 2022 03:31:24 +0600 Subject: [PATCH 16/28] add a run button --- 1-js/05-data-types/03-string/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/03-string/article.md b/1-js/05-data-types/03-string/article.md index 41bda2254..624dab98e 100644 --- a/1-js/05-data-types/03-string/article.md +++ b/1-js/05-data-types/03-string/article.md @@ -214,7 +214,7 @@ alert( 'Interface'.toLowerCase() ); // interface Or, if we want a single character lowercased: -```js +```js run alert( 'Interface'[0].toLowerCase() ); // 'i' ``` From cc9b015e1b78b936391007f9726123a9638742bc Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Sat, 30 Apr 2022 14:25:34 +0600 Subject: [PATCH 17/28] add quotes --- 2-ui/1-document/07-modifying-document/5-why-aaa/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md index f87074dba..861f70503 100644 --- a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md +++ b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md @@ -22,6 +22,6 @@ Why does that happen? alert(table); // the table, as it should be table.remove(); - // why there's still aaa in the document? + // why there's still "aaa" in the document? ``` From 2cccadc5ee2991bd4cee2031dc680e8f409ef414 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Sun, 1 May 2022 01:16:47 +0600 Subject: [PATCH 18/28] add highliting --- 1-js/05-data-types/03-string/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/05-data-types/03-string/article.md b/1-js/05-data-types/03-string/article.md index 41bda2254..01c31fad8 100644 --- a/1-js/05-data-types/03-string/article.md +++ b/1-js/05-data-types/03-string/article.md @@ -371,8 +371,8 @@ alert( "Widget".includes("id", 3) ); // false, from position 3 there is no "id" The methods [str.startsWith](mdn:js/String/startsWith) and [str.endsWith](mdn:js/String/endsWith) do exactly what they say: ```js run -alert( "Widget".startsWith("Wid") ); // true, "Widget" starts with "Wid" -alert( "Widget".endsWith("get") ); // true, "Widget" ends with "get" +alert( "*!*Wid*/!*get".startsWith("Wid") ); // true, "Widget" starts with "Wid" +alert( "Wid*!*get*/!*".endsWith("get") ); // true, "Widget" ends with "get" ``` ## Getting a substring From b4379c5dc8c82d66a7a75aefb70256e1bd6362b2 Mon Sep 17 00:00:00 2001 From: Ryan <50547130+MondoBurrito@users.noreply.github.com> Date: Sat, 30 Apr 2022 21:04:34 -0600 Subject: [PATCH 19/28] Fixed grammatical error. Line 54: "What functionality we're describing" -- I believe this is a question? Without a question mark, it doesn't make much sense. --- 1-js/03-code-quality/05-testing-mocha/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/03-code-quality/05-testing-mocha/article.md b/1-js/03-code-quality/05-testing-mocha/article.md index 9037b484d..79f190370 100644 --- a/1-js/03-code-quality/05-testing-mocha/article.md +++ b/1-js/03-code-quality/05-testing-mocha/article.md @@ -51,7 +51,7 @@ describe("pow", function() { A spec has three main building blocks that you can see above: `describe("title", function() { ... })` -: What functionality we're describing. In our case we're describing the function `pow`. Used to group "workers" -- the `it` blocks. +: What functionality we're describing? In our case we're describing the function `pow`. Used to group "workers" -- the `it` blocks. `it("use case description", function() { ... })` : In the title of `it` we *in a human-readable way* describe the particular use case, and the second argument is a function that tests it. From c5c1d6101fc6680ce88f7378c18152882fb3e601 Mon Sep 17 00:00:00 2001 From: Kirshanov Dmitrii <59695332+Kirshach@users.noreply.github.com> Date: Sun, 1 May 2022 13:57:34 +0200 Subject: [PATCH 20/28] update localStorage size limit I think it's safe now to assume that localStorage can store at least 5MB of data since the last time 2MB was mentioned was in 2015 for Android Browser v4 which has a reported global usage of 0.36% according to caniuse.com. Its' current version of 100 seems to support the same 5MB standard --- 6-data-storage/02-localstorage/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/6-data-storage/02-localstorage/article.md b/6-data-storage/02-localstorage/article.md index 412f44c16..e4a4b3558 100644 --- a/6-data-storage/02-localstorage/article.md +++ b/6-data-storage/02-localstorage/article.md @@ -6,7 +6,7 @@ What's interesting about them is that the data survives a page refresh (for `ses We already have cookies. Why additional objects? -- Unlike cookies, web storage objects are not sent to server with each request. Because of that, we can store much more. Most browsers allow at least 2 megabytes of data (or more) and have settings to configure that. +- Unlike cookies, web storage objects are not sent to server with each request. Because of that, we can store much more. Most modern browsers allow at least 5 megabytes of data (or more) and have settings to configure that. - Also unlike cookies, the server can't manipulate storage objects via HTTP headers. Everything's done in JavaScript. - The storage is bound to the origin (domain/protocol/port triplet). That is, different protocols or subdomains infer different storage objects, they can't access data from each other. From a1cd7b776fce004bc8eeb5e571826862aea95599 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Sun, 1 May 2022 19:02:44 +0600 Subject: [PATCH 21/28] add missing break line --- 8-web-components/5-slots-composition/article.md | 1 + 1 file changed, 1 insertion(+) diff --git a/8-web-components/5-slots-composition/article.md b/8-web-components/5-slots-composition/article.md index ada52a06a..871ac711a 100644 --- a/8-web-components/5-slots-composition/article.md +++ b/8-web-components/5-slots-composition/article.md @@ -130,6 +130,7 @@ For example, the second `` here is ignored (as it's not a top-level child If there are multiple elements in light DOM with the same slot name, they are appended into the slot, one after another. For example, this: + ```html John From bf83b15e1d1f09e17cea8f4ff92a275dcd2c7c66 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Wed, 4 May 2022 00:39:19 +0600 Subject: [PATCH 22/28] remove one extra break line --- 6-data-storage/01-cookie/article.md | 1 - 1 file changed, 1 deletion(-) diff --git a/6-data-storage/01-cookie/article.md b/6-data-storage/01-cookie/article.md index 2667b6948..b88849457 100644 --- a/6-data-storage/01-cookie/article.md +++ b/6-data-storage/01-cookie/article.md @@ -282,7 +282,6 @@ Here's a small set of functions to work with cookies, more convenient than a man There exist many cookie libraries for that, so these are for demo purposes. Fully working though. - ### getCookie(name) The shortest way to access a cookie is to use a [regular expression](info:regular-expressions). From 5ef143d48e748ddfb8206e65746e87980b91a843 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Tue, 3 May 2022 22:48:27 +0400 Subject: [PATCH 23/28] closes #2982 --- .../03-static-properties-methods/article.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/1-js/09-classes/03-static-properties-methods/article.md b/1-js/09-classes/03-static-properties-methods/article.md index 60b9824dc..4b493a5e8 100644 --- a/1-js/09-classes/03-static-properties-methods/article.md +++ b/1-js/09-classes/03-static-properties-methods/article.md @@ -109,6 +109,17 @@ Static methods are also used in database-related classes to search/save/remove e Article.remove({id: 12345}); ``` +````warn header="Static methods aren't available for individual objects" +Static methods are callable on classes, not on individual objects. + +E.g. such code won't work: + +```js +// ... +article.createTodays(); /// Error: article.createTodays is not a function +``` +```` + ## Static properties [recent browser=Chrome] From 8149cb0a8725a6470459e99024fb79d2adcc744c Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Wed, 4 May 2022 00:55:29 +0600 Subject: [PATCH 24/28] just add a comma --- 1-js/05-data-types/03-string/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/03-string/article.md b/1-js/05-data-types/03-string/article.md index 41bda2254..59a40e19b 100644 --- a/1-js/05-data-types/03-string/article.md +++ b/1-js/05-data-types/03-string/article.md @@ -604,7 +604,7 @@ You will find more ways to deal with surrogate pairs later in the chapter Date: Tue, 3 May 2022 22:57:52 +0400 Subject: [PATCH 25/28] closes #2973 --- 1-js/06-advanced-functions/06-function-object/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/06-function-object/article.md b/1-js/06-advanced-functions/06-function-object/article.md index 12342f45a..c84f4e52f 100644 --- a/1-js/06-advanced-functions/06-function-object/article.md +++ b/1-js/06-advanced-functions/06-function-object/article.md @@ -326,7 +326,7 @@ welcome(); // Hello, Guest (nested call works) Now it works, because the name `"func"` is function-local. It is not taken from outside (and not visible there). The specification guarantees that it will always reference the current function. -The outer code still has its variable `sayHi` or `welcome`. And `func` is an "internal function name", how the function can call itself internally. +The outer code still has its variable `sayHi` or `welcome`. And `func` is an "internal function name", the way for the function to can call itself reliably. ```smart header="There's no such thing for Function Declaration" The "internal name" feature described here is only available for Function Expressions, not for Function Declarations. For Function Declarations, there is no syntax for adding an "internal" name. From 0e4767832b21ef3047a00cc627e0b0c389053e21 Mon Sep 17 00:00:00 2001 From: Lavrentiy Rubtsov Date: Wed, 4 May 2022 01:18:30 +0600 Subject: [PATCH 26/28] typo --- .../04-prototype-methods/2-dictionary-tostring/solution.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md b/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md index a92e17900..f3c9cf0e5 100644 --- a/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md +++ b/1-js/08-prototypes/04-prototype-methods/2-dictionary-tostring/solution.md @@ -28,4 +28,4 @@ alert(dictionary); // "apple,__proto__" When we create a property using a descriptor, its flags are `false` by default. So in the code above, `dictionary.toString` is non-enumerable. -See the the chapter [](info:property-descriptors) for review. +See the chapter [](info:property-descriptors) for review. From 12024bc6b86469680b4e623401a135b954afafe8 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Tue, 3 May 2022 23:43:43 +0400 Subject: [PATCH 27/28] minor fixes --- 1-js/04-object-basics/02-object-copy/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/1-js/04-object-basics/02-object-copy/article.md b/1-js/04-object-basics/02-object-copy/article.md index e59b0481e..7fe8a26a6 100644 --- a/1-js/04-object-basics/02-object-copy/article.md +++ b/1-js/04-object-basics/02-object-copy/article.md @@ -203,7 +203,7 @@ let user = { alert( user.sizes.height ); // 182 ``` -Now it's not enough to copy `clone.sizes = user.sizes`. `user.sizes` is an object, and will be copied by reference, so `clone` and `user` will share the same sizes: +Now it's not enough to copy `clone.sizes = user.sizes`, because `user.sizes` is an object, and will be copied by reference, so `clone` and `user` will share the same sizes: ```js run let user = { @@ -220,10 +220,10 @@ alert( user.sizes === clone.sizes ); // true, same object // user and clone share sizes user.sizes.width++; // change a property from one place -alert(clone.sizes.width); // 51, see the result from the other one +alert(clone.sizes.width); // 51, get the result from the other one ``` -To fix that, we should use a cloning loop that examines each value of `user[key]` and, if it's an object, then replicate its structure as well. That is called a "deep cloning". +To fix that and make `user` and `clone` truly separate objects, we should use a cloning loop that examines each value of `user[key]` and, if it's an object, then replicate its structure as well. That is called a "deep cloning". We can use recursion to implement it. Or, to not reinvent the wheel, take an existing implementation, for instance [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep) from the JavaScript library [lodash](https://lodash.com). From c01efda697a311fa5ad50f73ed20ba4fd2b3d695 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Tue, 3 May 2022 23:52:08 +0400 Subject: [PATCH 28/28] minor fixes --- 1-js/02-first-steps/04-variables/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/02-first-steps/04-variables/article.md b/1-js/02-first-steps/04-variables/article.md index b8f860eb3..7bce4b9c8 100644 --- a/1-js/02-first-steps/04-variables/article.md +++ b/1-js/02-first-steps/04-variables/article.md @@ -297,7 +297,7 @@ const pageLoadTime = /* time taken by a webpage to load */; The value of `pageLoadTime` is not known prior to the page load, so it's named normally. But it's still a constant because it doesn't change after assignment. -In other words, capital-named constants are only used as aliases for "hard-coded" values. +In other words, capital-named constants are only used as aliases for "hard-coded" values. ## Name things right