From 9bae8fdf3e3dd247db3aa998e898ca8b0633a77a Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Mon, 21 Sep 2020 18:25:55 -0300 Subject: [PATCH 01/81] Typos --- 7-animation/2-css-animations/article.md | 74 ++++++++++++------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 38987b1ca..d658e8bbd 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -1,14 +1,14 @@ # CSS-animations -CSS animations allow to do simple animations without JavaScript at all. +CSS animations make it possible to do simple animations without JavaScript at all. -JavaScript can be used to control CSS animation and make it even better with a little of code. +JavaScript can be used to control CSS animations and make them even better, with little code. ## CSS transitions [#css-transition] The idea of CSS transitions is simple. We describe a property and how its changes should be animated. When the property changes, the browser paints the animation. -That is: all we need is to change the property. And the fluent transition is made by the browser. +That is: all we need is to change the property. And the fluid transition is done by the browser. For instance, the CSS below animates changes of `background-color` for 3 seconds: @@ -47,7 +47,7 @@ There are 4 properties to describe CSS transitions: - `transition-timing-function` - `transition-delay` -We'll cover them in a moment, for now let's note that the common `transition` property allows to declare them together in the order: `property duration timing-function delay`, and also animate multiple properties at once. +We'll cover them in a moment, for now let's note that the common `transition` property allows declaring them together in the order: `property duration timing-function delay`, as well as animating multiple properties at once. For instance, this button animates both `color` and `font-size`: @@ -70,13 +70,13 @@ growing.onclick = function() { ``` -Now let's cover animation properties one by one. +Now, let's cover animation properties one by one. ## transition-property -In `transition-property` we write a list of property to animate, for instance: `left`, `margin-left`, `height`, `color`. +In `transition-property` we write a list of properties to animate, for instance: `left`, `margin-left`, `height`, `color`. -Not all properties can be animated, but [many of them](http://www.w3.org/TR/css3-transitions/#animatable-properties-). The value `all` means "animate all properties". +Not all properties can be animated, but [many of them can](http://www.w3.org/TR/css3-transitions/#animatable-properties-). The value `all` means "animate all properties". ## transition-duration @@ -84,11 +84,11 @@ In `transition-duration` we can specify how long the animation should take. The ## transition-delay -In `transition-delay` we can specify the delay *before* the animation. For instance, if `transition-delay: 1s`, then animation starts after 1 second after the change. +In `transition-delay` we can specify the delay *before* the animation. For instance, if `transition-delay: 1s`, then the animation starts 1 second after the property change. -Negative values are also possible. Then the animation starts from the middle. For instance, if `transition-duration` is `2s`, and the delay is `-1s`, then the animation takes 1 second and starts from the half. +Negative values are also possible. Then the animation starts from the middle. For instance, if `transition-duration` is `2s`, and the delay is `-1s`, then the animation takes 1 second and starts from the halfway point. -Here's the animation shifts numbers from `0` to `9` using CSS `translate` property: +Here the animation shifts numbers from `0` to `9` using CSS `translate` property: [codetabs src="digits"] @@ -108,13 +108,13 @@ In the example above JavaScript adds the class `.animate` to the element -- and stripe.classList.add('animate'); ``` -We can also start it "from the middle", from the exact number, e.g. corresponding to the current second, using the negative `transition-delay`. +We could also start it from somewhere in the middle of the transition, from an exact number, e.g. corresponding to the current second, using a negative `transition-delay`. Here if you click the digit -- it starts the animation from the current second: [codetabs src="digits-negative-delay"] -JavaScript does it by an extra line: +JavaScript does it with an extra line: ```js stripe.onclick = function() { @@ -129,25 +129,25 @@ stripe.onclick = function() { ## transition-timing-function -Timing function describes how the animation process is distributed along the time. Will it start slowly and then go fast or vise versa. +The timing function describes how the animation process is distributed along its timeline. Will it start slowly and then go fast or vice versa. -That's the most complicated property from the first sight. But it becomes very simple if we devote a bit time to it. +It appears to be the most complicated property at first. But it becomes very simple if we devote a bit time to it. -That property accepts two kinds of values: a Bezier curve or steps. Let's start from the curve, as it's used more often. +That property accepts two kinds of values: a Bezier curve or steps. Let's start with the curve, as it's used more often. ### Bezier curve -The timing function can be set as a [Bezier curve](/bezier-curve) with 4 control points that satisfies the conditions: +The timing function can be set as a [Bezier curve](/bezier-curve) with 4 control points that satisfy the conditions: 1. First control point: `(0,0)`. 2. Last control point: `(1,1)`. -3. For intermediate points values of `x` must be in the interval `0..1`, `y` can be anything. +3. For intermediate points the values of `x` must be in the interval `0..1`, `y` can be anything. The syntax for a Bezier curve in CSS: `cubic-bezier(x2, y2, x3, y3)`. Here we need to specify only 2nd and 3rd control points, because the 1st one is fixed to `(0,0)` and the 4th one is `(1,1)`. -The timing function describes how fast the animation process goes in time. +The timing function describes how fast the animation process goes. -- The `x` axis is the time: `0` -- the starting moment, `1` -- the last moment of `transition-duration`. +- The `x` axis is the time: `0` -- the start, `1` -- the end of `transition-duration`. - The `y` axis specifies the completion of the process: `0` -- the starting value of the property, `1` -- the final value. The simplest variant is when the animation goes uniformly, with the same linear speed. That can be specified by the curve `cubic-bezier(0, 0, 1, 1)`. @@ -197,7 +197,7 @@ CSS: There are several built-in curves: `linear`, `ease`, `ease-in`, `ease-out` and `ease-in-out`. -The `linear` is a shorthand for `cubic-bezier(0, 0, 1, 1)` -- a straight line, we saw it already. +The `linear` is a shorthand for `cubic-bezier(0, 0, 1, 1)` -- a straight line, which we described above. Other names are shorthands for the following `cubic-bezier`: @@ -221,9 +221,9 @@ So we could use `ease-out` for our slowing down train: But it looks a bit differently. -**A Bezier curve can make the animation "jump out" of its range.** +**A Bezier curve can make the animation exceed its range.** -The control points on the curve can have any `y` coordinates: even negative or huge. Then the Bezier curve would also jump very low or high, making the animation go beyond its normal range. +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 @@ -244,21 +244,21 @@ But if you click the train, you'll see that: [codetabs src="train-over"] -Why it happens -- pretty obvious if we look at the graph of the given Bezier curve: +Why it happens is pretty obvious if we look at the graph of the given Bezier curve: ![](bezier-train-over.svg) -We moved the `y` coordinate of the 2nd point below zero, and for the 3rd point we made put it over `1`, so the curve goes out of the "regular" quadrant. The `y` is out of the "standard" range `0..1`. +We moved the `y` coordinate of the 2nd point below zero, and for the 3rd point we made it over `1`, so the curve goes out of the "regular" quadrant. The `y` is out of the "standard" range `0..1`. -As we know, `y` measures "the completion of the animation process". The value `y = 0` corresponds to the starting property value and `y = 1` -- the ending value. So values `y<0` move the property lower than the starting `left` and `y>1` -- over the final `left`. +As we know, `y` measures "the completion of the animation process". The value `y = 0` corresponds to the starting property value and `y = 1` -- the ending value. So values `y<0` move the property beyond than the starting `left` and `y>1` -- past the final `left`. That's a "soft" variant for sure. If we put `y` values like `-99` and `99` then the train would jump out of the range much more. -But how to make the Bezier curve for a specific task? There are many tools. For instance, we can do it on the site . +But how do we make a Bezier curve for a specific task? There are many tools. For instance, we can do it on the site . ### Steps -Timing function `steps(number of steps[, start/end])` allows to split animation into steps. +The timing function `steps(number of steps[, start/end])` allows splitting an animation into steps. Let's see that in an example with digits. @@ -324,11 +324,11 @@ When the CSS animation finishes the `transitionend` event triggers. It is widely used to do an action after the animation is done. Also we can join animations. -For instance, the ship in the example below starts to swim there and back on click, each time farther and farther to the right: +For instance, the ship in the example below starts to sail there and back when clicked, each time farther and farther to the right: [iframe src="boat" height=300 edit link] -The animation is initiated by the function `go` that re-runs each time when the transition finishes and flips the direction: +The animation is initiated by the function `go` that re-runs each time the transition finishes, and flips the direction: ```js boat.onclick = function() { @@ -337,11 +337,11 @@ boat.onclick = function() { function go() { if (times % 2) { - // swim to the right + // sail to the right boat.classList.remove('back'); boat.style.marginLeft = 100 * times + 200 + 'px'; } else { - // swim to the left + // sail to the left boat.classList.add('back'); boat.style.marginLeft = 100 * times - 200 + 'px'; } @@ -357,7 +357,7 @@ boat.onclick = function() { }; ``` -The event object for `transitionend` has few specific properties: +The event object for `transitionend` has a few specific properties: `event.propertyName` : The property that has finished animating. Can be good if we animate multiple properties simultaneously. @@ -369,7 +369,7 @@ The event object for `transitionend` has few specific properties: We can join multiple simple animations together using the `@keyframes` CSS rule. -It specifies the "name" of the animation and rules: what, when and where to animate. Then using the `animation` property we attach the animation to the element and specify additional parameters for it. +It specifies the "name" of the animation and rules: what, when and where to animate. Then using the `animation` property we can attach the animation to the element and specify additional parameters for it. Here's an example with explanations: @@ -405,11 +405,11 @@ Here's an example with explanations: There are many articles about `@keyframes` and a [detailed specification](https://drafts.csswg.org/css-animations/). -Probably you won't need `@keyframes` often, unless everything is in the constant move on your sites. +You probably won't need `@keyframes` often, unless everything is in constant motion on your sites. ## Summary -CSS animations allow to smoothly (or not) animate changes of one or multiple CSS properties. +CSS animations allow smoothly (or not) animated changes of one or multiple CSS properties. They are good for most animation tasks. We're also able to use JavaScript for animations, the next chapter is devoted to that. @@ -419,9 +419,9 @@ Limitations of CSS animations compared to JavaScript animations: + Simple things done simply. + Fast and lightweight for CPU. - JavaScript animations are flexible. They can implement any animation logic, like an "explosion" of an element. -- Not just property changes. We can create new elements in JavaScript for purposes of animation. +- Not just property changes. We can create new elements in JavaScript as part of the animation. ``` -The majority of animations can be implemented using CSS as described in this chapter. And `transitionend` event allows to run JavaScript after the animation, so it integrates fine with the code. +The majority of animations can be implemented using CSS as described in this chapter. And the `transitionend` event allows JavaScript to be run after the animation, so it integrates fine with the code. But in the next chapter we'll do some JavaScript animations to cover more complex cases. From 2b8354b305cc63afacdd6279e393e436123b4ca2 Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:00:26 -0300 Subject: [PATCH 02/81] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 d658e8bbd..ceb95cc9c 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -8,7 +8,7 @@ JavaScript can be used to control CSS animations and make them even better, with The idea of CSS transitions is simple. We describe a property and how its changes should be animated. When the property changes, the browser paints the animation. -That is: all we need is to change the property. And the fluid transition is done by the browser. +That is, all we need is to change the property; and, the fluid transition will be done by the browser. For instance, the CSS below animates changes of `background-color` for 3 seconds: From 7c12746dc06d2bf3601c856902c6ff590f440927 Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:01:20 -0300 Subject: [PATCH 03/81] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 ceb95cc9c..a19c0a46f 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -74,7 +74,7 @@ Now, let's cover animation properties one by one. ## transition-property -In `transition-property` we write a list of properties to animate, for instance: `left`, `margin-left`, `height`, `color`. +In `transition-property`, we write a list of properties to animate, for instance: `left`, `margin-left`, `height`, `color`. Or we could write `all`, which means "animate all properties". Not all properties can be animated, but [many of them can](http://www.w3.org/TR/css3-transitions/#animatable-properties-). The value `all` means "animate all properties". From 74526b48006542bb507db18e5e52b13ea7ebb404 Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:34:23 -0300 Subject: [PATCH 04/81] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 a19c0a46f..36b280f53 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -76,7 +76,7 @@ Now, let's cover animation properties one by one. In `transition-property`, we write a list of properties to animate, for instance: `left`, `margin-left`, `height`, `color`. Or we could write `all`, which means "animate all properties". -Not all properties can be animated, but [many of them can](http://www.w3.org/TR/css3-transitions/#animatable-properties-). The value `all` means "animate all properties". +Do note that, there are properties which can not be animated. However, [most of the generally used properties are animatable](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties). ## transition-duration From e0db05885134c0f2800770d3a87b60cc9e741e4c Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:38:22 -0300 Subject: [PATCH 05/81] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 36b280f53..f543ed55e 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -84,7 +84,7 @@ In `transition-duration` we can specify how long the animation should take. The ## transition-delay -In `transition-delay` we can specify the delay *before* the animation. For instance, if `transition-delay: 1s`, then the animation starts 1 second after the property change. +In `transition-delay` we can specify the delay *before* the animation. For instance, if `transition-delay` is `1s` and `transition-duration` is 2s, then the animation starts 1 second after the property change and the total duration will be 2 seconds. Negative values are also possible. Then the animation starts from the middle. For instance, if `transition-duration` is `2s`, and the delay is `-1s`, then the animation takes 1 second and starts from the halfway point. From ed497e7e9c2156894cf2b00771cd4b41687055a1 Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:50:12 -0300 Subject: [PATCH 06/81] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 f543ed55e..686bd0c9f 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -129,7 +129,7 @@ stripe.onclick = function() { ## transition-timing-function -The timing function describes how the animation process is distributed along its timeline. Will it start slowly and then go fast or vice versa. +The timing function describes how the animation process is distributed along its timeline. Will it start slowly and then go fast, or vice versa. It appears to be the most complicated property at first. But it becomes very simple if we devote a bit time to it. From 2be35c995150936bc4ff370d3eb54f274b6d1b6f Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:51:14 -0300 Subject: [PATCH 07/81] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 686bd0c9f..7036f4c62 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -369,7 +369,7 @@ The event object for `transitionend` has a few specific properties: We can join multiple simple animations together using the `@keyframes` CSS rule. -It specifies the "name" of the animation and rules: what, when and where to animate. Then using the `animation` property we can attach the animation to the element and specify additional parameters for it. +It specifies the "name" of the animation and rules - what, when and where to animate. Then using the `animation` property, we can attach the animation to the element and specify additional parameters for it. Here's an example with explanations: From 443af20b99c70939367ecec501f0fa6fd399434b Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:51:52 -0300 Subject: [PATCH 08/81] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 7036f4c62..60f6e249f 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -141,7 +141,7 @@ The timing function can be set as a [Bezier curve](/bezier-curve) with 4 control 1. First control point: `(0,0)`. 2. Last control point: `(1,1)`. -3. For intermediate points the values of `x` must be in the interval `0..1`, `y` can be anything. +3. For intermediate points, the values of `x` must be in the interval `0..1`, `y` can be anything. The syntax for a Bezier curve in CSS: `cubic-bezier(x2, y2, x3, y3)`. Here we need to specify only 2nd and 3rd control points, because the 1st one is fixed to `(0,0)` and the 4th one is `(1,1)`. From f25dca843a7ce2f7fd9367679a63bc7d8b16a64d Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Tue, 22 Sep 2020 20:46:33 -0300 Subject: [PATCH 09/81] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 60f6e249f..bdee63036 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -250,7 +250,7 @@ Why it happens is pretty obvious if we look at the graph of the given Bezier cur We moved the `y` coordinate of the 2nd point below zero, and for the 3rd point we made it over `1`, so the curve goes out of the "regular" quadrant. The `y` is out of the "standard" range `0..1`. -As we know, `y` measures "the completion of the animation process". The value `y = 0` corresponds to the starting property value and `y = 1` -- the ending value. So values `y<0` move the property beyond than the starting `left` and `y>1` -- past the final `left`. +As we know, `y` measures "the completion of the animation process". The value `y = 0` corresponds to the starting property value and `y = 1` -- the ending value. So values `y<0` move the property beyond the starting `left` and `y>1` -- past the final `left`. That's a "soft" variant for sure. If we put `y` values like `-99` and `99` then the train would jump out of the range much more. From 6c37da4a66c698ce9215fb0f97c65bff2c851437 Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Wed, 23 Sep 2020 07:59:54 -0300 Subject: [PATCH 10/81] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 bdee63036..f8c68f665 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -84,7 +84,7 @@ In `transition-duration` we can specify how long the animation should take. The ## transition-delay -In `transition-delay` we can specify the delay *before* the animation. For instance, if `transition-delay` is `1s` and `transition-duration` is 2s, then the animation starts 1 second after the property change and the total duration will be 2 seconds. +In `transition-delay` we can specify the delay *before* the animation. For instance, if `transition-delay` is `1s` and `transition-duration` is `2s`, then the animation starts 1 second after the property change and the total duration will be 2 seconds. Negative values are also possible. Then the animation starts from the middle. For instance, if `transition-duration` is `2s`, and the delay is `-1s`, then the animation takes 1 second and starts from the halfway point. From 5168eaa4b182fe4133e4bb66bfe52851640c1b83 Mon Sep 17 00:00:00 2001 From: Peter Kampjes <67612358+peachesontour@users.noreply.github.com> Date: Wed, 23 Sep 2020 08:00:53 -0300 Subject: [PATCH 11/81] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 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 f8c68f665..b2ef821fe 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -8,7 +8,7 @@ JavaScript can be used to control CSS animations and make them even better, with The idea of CSS transitions is simple. We describe a property and how its changes should be animated. When the property changes, the browser paints the animation. -That is, all we need is to change the property; and, the fluid transition will be done by the browser. +That is, all we need is to change the property, and the fluid transition will be done by the browser. For instance, the CSS below animates changes of `background-color` for 3 seconds: From 689392ecce4b5522d8b7dda4d53b3533c648c0ff Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Sun, 11 Oct 2020 22:43:14 +0300 Subject: [PATCH 12/81] Fix my typos in 1.5.5 --- 1-js/05-data-types/05-array-methods/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/05-data-types/05-array-methods/article.md b/1-js/05-data-types/05-array-methods/article.md index ace4c7887..b14e9a0be 100644 --- a/1-js/05-data-types/05-array-methods/article.md +++ b/1-js/05-data-types/05-array-methods/article.md @@ -742,8 +742,8 @@ These methods are the most used ones, they cover 99% of use cases. But there are - [arr.some(fn)](mdn:js/Array/some)/[arr.every(fn)](mdn:js/Array/every) check the array. The function `fn` is called on each element of the array similar to `map`. If any/all results are `true`, returns `true`, otherwise `false`. - - These methods behave sort of like `||` and `&&` operators: if `fn` returns a truthy value, `arr.some()` immediately returns `true` and stops iterating over the rest items; if `fn` returns a falsy value, `arr.every()` immediately returns `false` and stops iterating over the rest items as well. + + These methods behave sort of like `||` and `&&` operators: if `fn` returns a truthy value, `arr.some()` immediately returns `true` and stops iterating over the rest of items; if `fn` returns a falsy value, `arr.every()` immediately returns `false` and stops iterating over the rest of items as well. We can use `every` to compare arrays: ```js run From 104bee3ccc0e6eb1911a86e1c1c51c777ae13282 Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Mon, 12 Oct 2020 19:22:13 +0300 Subject: [PATCH 13/81] Clarify a bit ambiguous wording in 1.5.7 --- 1-js/05-data-types/07-map-set/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/07-map-set/article.md b/1-js/05-data-types/07-map-set/article.md index e08c84084..b0662898d 100644 --- a/1-js/05-data-types/07-map-set/article.md +++ b/1-js/05-data-types/07-map-set/article.md @@ -42,7 +42,7 @@ alert( map.size ); // 3 As we can see, unlike objects, keys are not converted to strings. Any type of key is possible. ```smart header="`map[key]` isn't the right way to use a `Map`" -Although `map[key]` also works, e.g. we can set `map[key] = 2`, this is treating `map` as a plain JavaScript object, so it implies all corresponding limitations (no object keys and so on). +Although `map[key]` also works, e.g. we can set `map[key] = 2`, this is treating `map` as a plain JavaScript object, so it implies all corresponding limitations (only string/symbol keys and so on). So we should use `map` methods: `set`, `get` and so on. ``` From 7faa49eed9347ec61520dce7228bdcb1ab932535 Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Mon, 12 Oct 2020 19:27:38 +0300 Subject: [PATCH 14/81] Symmetrize Map and Set summaries --- 1-js/05-data-types/07-map-set/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/05-data-types/07-map-set/article.md b/1-js/05-data-types/07-map-set/article.md index e08c84084..ed9c3e312 100644 --- a/1-js/05-data-types/07-map-set/article.md +++ b/1-js/05-data-types/07-map-set/article.md @@ -304,10 +304,10 @@ The same methods `Map` has for iterators are also supported: Methods and properties: - `new Map([iterable])` -- creates the map, with optional `iterable` (e.g. array) of `[key,value]` pairs for initialization. -- `map.set(key, value)` -- stores the value by the key. +- `map.set(key, value)` -- stores the value by the key, returns the map itself. - `map.get(key)` -- returns the value by the key, `undefined` if `key` doesn't exist in map. - `map.has(key)` -- returns `true` if the `key` exists, `false` otherwise. -- `map.delete(key)` -- removes the value by the key. +- `map.delete(key)` -- removes the value by the key, returns `true` if `key` existed at the moment of the call, otherwise `false`. - `map.clear()` -- removes everything from the map. - `map.size` -- returns the current element count. From 154bf024ac452e3333b86792671097225d280b24 Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Mon, 12 Oct 2020 19:29:41 +0300 Subject: [PATCH 15/81] Fix possible typo in 1.5.7 task --- 1-js/05-data-types/07-map-set/03-iterable-keys/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/07-map-set/03-iterable-keys/task.md b/1-js/05-data-types/07-map-set/03-iterable-keys/task.md index 25c74bfc2..81507647f 100644 --- a/1-js/05-data-types/07-map-set/03-iterable-keys/task.md +++ b/1-js/05-data-types/07-map-set/03-iterable-keys/task.md @@ -4,7 +4,7 @@ importance: 5 # Iterable keys -We'd like to get an array of `map.keys()` in a variable and then do apply array-specific methods to it, e.g. `.push`. +We'd like to get an array of `map.keys()` in a variable and then apply array-specific methods to it, e.g. `.push`. But that doesn't work: From 0be77b09a04945571f63ccb3313c0cb04fb4763a Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Thu, 15 Oct 2020 04:44:52 +0300 Subject: [PATCH 16/81] Clarify some things in 1.5.12 --- 1-js/05-data-types/12-json/article.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/1-js/05-data-types/12-json/article.md b/1-js/05-data-types/12-json/article.md index a5f2974af..425022f8a 100644 --- a/1-js/05-data-types/12-json/article.md +++ b/1-js/05-data-types/12-json/article.md @@ -105,7 +105,7 @@ JSON is data-only language-independent specification, so some JavaScript-specifi Namely: - Function properties (methods). -- Symbolic properties. +- Symbolic keys and values. - Properties that store `undefined`. ```js run @@ -276,6 +276,7 @@ name: John name: Alice place: [object Object] number: 23 +occupiedBy: [object Object] */ ``` @@ -328,6 +329,8 @@ alert(JSON.stringify(user, null, 2)); */ ``` +The third argument can also be a string. In this case, the string is used for indentation instead of a number of spaces. + The `space` parameter is used solely for logging and nice-output purposes. ## Custom "toJSON" From 6df0982d84e649c707a0c3059f677e493db8f329 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Fri, 13 Nov 2020 20:22:16 +0800 Subject: [PATCH 17/81] FIX: minor typo error --- 5-network/04-fetch-abort/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/04-fetch-abort/article.md b/5-network/04-fetch-abort/article.md index 9efadd0ee..642190b2a 100644 --- a/5-network/04-fetch-abort/article.md +++ b/5-network/04-fetch-abort/article.md @@ -26,7 +26,7 @@ When `abort()` is called: Generally, we have two parties in the process: 1. The one that performs an cancelable operation, it sets a listener on `controller.signal`. -2. The one one that cancels: it calls `controller.abort()` when needed. +2. The one that cancels: it calls `controller.abort()` when needed. Here's the full example (without `fetch` yet): From 806e3710e5aabdac87791b2a2c97b0635f4f9173 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Fri, 13 Nov 2020 20:29:51 +0800 Subject: [PATCH 18/81] Update article.md --- 5-network/04-fetch-abort/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/04-fetch-abort/article.md b/5-network/04-fetch-abort/article.md index 642190b2a..32f7a173f 100644 --- a/5-network/04-fetch-abort/article.md +++ b/5-network/04-fetch-abort/article.md @@ -50,7 +50,7 @@ As we can see, `AbortController` is just a means to pass `abort` events when `ab We could implement same kind of event listening in our code on our own, without `AbortController` object at all. -But what's valuable is that `fetch` knows how to work with `AbortController` object, it's integrated with it. +But what's valuable is that `fetch` knows how to work with `AbortController` object, it's integrated with it. ## Using with fetch From fb43e39bd409d7d9d9f5e5c5486e4a220dc277df Mon Sep 17 00:00:00 2001 From: LeviDing Date: Fri, 13 Nov 2020 22:53:12 +0800 Subject: [PATCH 19/81] Update article.md --- 5-network/06-fetch-api/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/5-network/06-fetch-api/article.md b/5-network/06-fetch-api/article.md index 413aa47b0..20e26f7a6 100644 --- a/5-network/06-fetch-api/article.md +++ b/5-network/06-fetch-api/article.md @@ -217,8 +217,8 @@ Normally, when a document is unloaded, all associated network requests are abort It has a few limitations: -- We can't send megabytes: the body limit for `keepalive` requests is 64kb. +- We can't send megabytes: the body limit for `keepalive` requests is 64KB. - If we need to gather a lot of statistics about the visit, we should send it out regularly in packets, so that there won't be a lot left for the last `onunload` request. - - This limit applies to all `keepalive` requests together. In other words, we can perform multiple `keepalive` requests in parallel, but the sum of their body lengths should not exceed 64kb. + - This limit applies to all `keepalive` requests together. In other words, we can perform multiple `keepalive` requests in parallel, but the sum of their body lengths should not exceed 64KB. - We can't handle the server response if the document is unloaded. So in our example `fetch` will succeed due to `keepalive`, but subsequent functions won't work. - In most cases, such as sending out statistics, it's not a problem, as server just accepts the data and usually sends an empty response to such requests. From d9775827518e229938770fc2b44a63b444e80bf6 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Fri, 13 Nov 2020 23:03:44 +0800 Subject: [PATCH 20/81] Update article.md --- 5-network/06-fetch-api/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/06-fetch-api/article.md b/5-network/06-fetch-api/article.md index 20e26f7a6..52856bb90 100644 --- a/5-network/06-fetch-api/article.md +++ b/5-network/06-fetch-api/article.md @@ -220,5 +220,5 @@ It has a few limitations: - We can't send megabytes: the body limit for `keepalive` requests is 64KB. - If we need to gather a lot of statistics about the visit, we should send it out regularly in packets, so that there won't be a lot left for the last `onunload` request. - This limit applies to all `keepalive` requests together. In other words, we can perform multiple `keepalive` requests in parallel, but the sum of their body lengths should not exceed 64KB. -- We can't handle the server response if the document is unloaded. So in our example `fetch` will succeed due to `keepalive`, but subsequent functions won't work. +- We can't handle the server response if the document is unloaded. So in our example `fetch` will succeed due to `keepalive`, but subsequent functions won't work. - In most cases, such as sending out statistics, it's not a problem, as server just accepts the data and usually sends an empty response to such requests. From ee2bc1c6bdc8013ab45ad78e732ebea3dd1d3686 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Sat, 14 Nov 2020 00:26:50 +0800 Subject: [PATCH 21/81] Update article.md --- 5-network/10-long-polling/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/10-long-polling/article.md b/5-network/10-long-polling/article.md index 02d21d7a2..be367cee7 100644 --- a/5-network/10-long-polling/article.md +++ b/5-network/10-long-polling/article.md @@ -70,7 +70,7 @@ As you can see, `subscribe` function makes a fetch, then waits for the response, ```warn header="Server should be ok with many pending connections" The server architecture must be able to work with many pending connections. -Certain server architectures run one process per connection; resulting in there being as many processes as there are connections, while each process consumes quite a bit of memory. So, too many connections will just consume it all. +Certain server architectures run one process per connection, resulting in there being as many processes as there are connections, while each process consumes quite a bit of memory. So, too many connections will just consume it all. That's often the case for backends written in languages like PHP and Ruby. From 26d449c80e853348bf287ce0d748c50b141b1e22 Mon Sep 17 00:00:00 2001 From: Kevin Jones Date: Fri, 13 Nov 2020 14:58:10 -0600 Subject: [PATCH 22/81] Minor grammar alteration. --- 1-js/01-getting-started/1-intro/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index d4c81a3e3..0edb064c5 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -110,7 +110,7 @@ Examples of such languages: - [TypeScript](http://www.typescriptlang.org/) is concentrated on adding "strict data typing" to simplify the development and support of complex systems. It is developed by Microsoft. - [Flow](http://flow.org/) also adds data typing, but in a different way. Developed by Facebook. - [Dart](https://www.dartlang.org/) is a standalone language that has its own engine that runs in non-browser environments (like mobile apps), but also can be transpiled to JavaScript. Developed by Google. -- [Brython](https://brython.info/) is a Python transpiler to JavaScript that allow to write application in pure Python without JavaScript. +- [Brython](https://brython.info/) is a Python transpiler to JavaScript that enables the writing of applications in pure Python without JavaScript. There are more. Of course, even if we use one of transpiled languages, we should also know JavaScript to really understand what we're doing. From 7a67741a9b6dc35278829d7196721dc769e2b30a Mon Sep 17 00:00:00 2001 From: LeviDing Date: Sun, 15 Nov 2020 19:42:42 +0800 Subject: [PATCH 23/81] Update article.md --- 1-js/04-object-basics/07-optional-chaining/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/07-optional-chaining/article.md b/1-js/04-object-basics/07-optional-chaining/article.md index 97fab12eb..6f9f01cf2 100644 --- a/1-js/04-object-basics/07-optional-chaining/article.md +++ b/1-js/04-object-basics/07-optional-chaining/article.md @@ -9,7 +9,7 @@ The optional chaining `?.` is a safe way to access nested object properties, eve If you've just started to read the tutorial and learn JavaScript, maybe the problem hasn't touched you yet, but it's quite common. -As an example, let's say we have `user` objects that hold the information about our users. +As an example, let's say we have `user` objects that hold the information about our users. Most of our users have addresses in `user.address` property, with the street `user.address.street`, but some did not provide them. From 75e10e203e62e61deef15dc730299dd86bbcad8d Mon Sep 17 00:00:00 2001 From: LeviDing Date: Sun, 15 Nov 2020 20:09:54 +0800 Subject: [PATCH 24/81] Update article.md --- 1-js/04-object-basics/07-optional-chaining/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/07-optional-chaining/article.md b/1-js/04-object-basics/07-optional-chaining/article.md index 6f9f01cf2..e66d86acc 100644 --- a/1-js/04-object-basics/07-optional-chaining/article.md +++ b/1-js/04-object-basics/07-optional-chaining/article.md @@ -21,7 +21,7 @@ let user = {}; // a user without "address" property alert(user.address.street); // Error! ``` -That's the expected result. JavaScript works like this. As `user.address` is `undefined`, an attempt to get `user.address.street` fails with an error. +That's the expected result. JavaScript works like this. As `user.address` is `undefined`, an attempt to get `user.address.street` fails with an error. In many practical cases we'd prefer to get `undefined` instead of an error here (meaning "no street"). From cb62d6d867dd5917cc39720c5f0ba2a15a18a7e7 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Sun, 15 Nov 2020 21:19:03 +0800 Subject: [PATCH 25/81] Update article.md --- 1-js/04-object-basics/07-optional-chaining/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/04-object-basics/07-optional-chaining/article.md b/1-js/04-object-basics/07-optional-chaining/article.md index e66d86acc..deb0e5a8f 100644 --- a/1-js/04-object-basics/07-optional-chaining/article.md +++ b/1-js/04-object-basics/07-optional-chaining/article.md @@ -56,7 +56,7 @@ let user = {}; // user has no address alert(user.address ? user.address.street ? user.address.street.name : null : null); ``` -That's just awful, one may even have problems understanding such code. +That's just awful, one may even have problems understanding such code. Don't even care to, as there's a better way to write it, using the `&&` operator: From a39f437677b95d145dfe862d3b19bf7113a8fc22 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Sun, 15 Nov 2020 21:46:06 +0800 Subject: [PATCH 26/81] Update article.md --- 1-js/05-data-types/08-weakmap-weakset/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/08-weakmap-weakset/article.md b/1-js/05-data-types/08-weakmap-weakset/article.md index 178a4e233..5cfd6b3e0 100644 --- a/1-js/05-data-types/08-weakmap-weakset/article.md +++ b/1-js/05-data-types/08-weakmap-weakset/article.md @@ -30,7 +30,7 @@ let array = [ john ]; john = null; // overwrite the reference *!* -// the object previously referenced by john is stored inside the array +// the object previously referenced by john is stored inside the array // therefore it won't be garbage-collected // we can get it as array[0] */!* From 5b63e81e4e2d7ce48bb040fc7951942cfb585c84 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Sun, 15 Nov 2020 22:12:00 +0800 Subject: [PATCH 27/81] Update article.md --- 1-js/08-prototypes/01-prototype-inheritance/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/08-prototypes/01-prototype-inheritance/article.md b/1-js/08-prototypes/01-prototype-inheritance/article.md index cd4b94d32..1b0011633 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/article.md +++ b/1-js/08-prototypes/01-prototype-inheritance/article.md @@ -12,7 +12,7 @@ In JavaScript, objects have a special hidden property `[[Prototype]]` (as named ![prototype](object-prototype-empty.svg) -When we read a property from `object`, and it's missing, JavaScript automatically takes it from the prototype. In programming, such thing is called "prototypal inheritance". And soon we'll study many examples of such inheritance, as well as cooler language features built upon it. +When we read a property from `object`, and it's missing, JavaScript automatically takes it from the prototype. In programming, such thing is called "prototypal inheritance". And soon we'll study many examples of such inheritance, as well as cooler language features built upon it. The property `[[Prototype]]` is internal and hidden, but there are many ways to set it. From 358c38988d8573cbed7c61992a6be5844f0de8d0 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Sun, 15 Nov 2020 22:23:11 +0800 Subject: [PATCH 28/81] Update article.md --- 1-js/08-prototypes/01-prototype-inheritance/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/08-prototypes/01-prototype-inheritance/article.md b/1-js/08-prototypes/01-prototype-inheritance/article.md index 1b0011633..2a46a978a 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/article.md +++ b/1-js/08-prototypes/01-prototype-inheritance/article.md @@ -133,11 +133,11 @@ Also it may be obvious, but still: there can be only one `[[Prototype]]`. An obj ```smart header="`__proto__` is a historical getter/setter for `[[Prototype]]`" -It's a common mistake of novice developers not to know the difference between these two. +It's a common mistake of novice developers not to know the difference between these two. Please note that `__proto__` is *not the same* as the internal `[[Prototype]]` property. It's a getter/setter for `[[Prototype]]`. Later we'll see situations where it matters, for now let's just keep it in mind, as we build our understanding of JavaScript language. -The `__proto__` property is a bit outdated. It exists for historical reasons, modern JavaScript suggests that we should use `Object.getPrototypeOf/Object.setPrototypeOf` functions instead that get/set the prototype. We'll also cover these functions later. +The `__proto__` property is a bit outdated. It exists for historical reasons, modern JavaScript suggests that we should use `Object.getPrototypeOf/Object.setPrototypeOf` functions instead that get/set the prototype. We'll also cover these functions later. By the specification, `__proto__` must only be supported by browsers. In fact though, all environments including server-side support `__proto__`, so we're quite safe using it. From 80eb70fd90946e8b4f26196a7d5f61265f39ab0b Mon Sep 17 00:00:00 2001 From: LeviDing Date: Sun, 15 Nov 2020 22:27:03 +0800 Subject: [PATCH 29/81] Update article.md --- 1-js/08-prototypes/01-prototype-inheritance/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/08-prototypes/01-prototype-inheritance/article.md b/1-js/08-prototypes/01-prototype-inheritance/article.md index 2a46a978a..cfec05689 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/article.md +++ b/1-js/08-prototypes/01-prototype-inheritance/article.md @@ -135,7 +135,7 @@ Also it may be obvious, but still: there can be only one `[[Prototype]]`. An obj ```smart header="`__proto__` is a historical getter/setter for `[[Prototype]]`" It's a common mistake of novice developers not to know the difference between these two. -Please note that `__proto__` is *not the same* as the internal `[[Prototype]]` property. It's a getter/setter for `[[Prototype]]`. Later we'll see situations where it matters, for now let's just keep it in mind, as we build our understanding of JavaScript language. +Please note that `__proto__` is *not the same* as the internal `[[Prototype]]` property. It's a getter/setter for `[[Prototype]]`. Later we'll see situations where it matters, for now let's just keep it in mind, as we build our understanding of JavaScript language. The `__proto__` property is a bit outdated. It exists for historical reasons, modern JavaScript suggests that we should use `Object.getPrototypeOf/Object.setPrototypeOf` functions instead that get/set the prototype. We'll also cover these functions later. From adf83c64b7e0162ec09f3afe53e98e8ce5a8e0b3 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Mon, 16 Nov 2020 00:32:55 +0800 Subject: [PATCH 30/81] Update article.md --- .../2-async-iterators-generators/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/12-generators-iterators/2-async-iterators-generators/article.md b/1-js/12-generators-iterators/2-async-iterators-generators/article.md index 00a56b9c3..072e10472 100644 --- a/1-js/12-generators-iterators/2-async-iterators-generators/article.md +++ b/1-js/12-generators-iterators/2-async-iterators-generators/article.md @@ -363,7 +363,7 @@ More explanations about how it works: - The initial URL is `https://api.github.com/repos//commits`, and the next page will be in the `Link` header of the response. - The `fetch` method allows us to supply authorization and other headers if needed -- here GitHub requires `User-Agent`. 2. The commits are returned in JSON format. -3. We should get the next page URL from the `Link` header of the response. It has a special format, so we use a regular expression for that (we will lern this feature in [Regular expressions](info:regular-expressions)). +3. We should get the next page URL from the `Link` header of the response. It has a special format, so we use a regular expression for that (we will learn this feature in [Regular expressions](info:regular-expressions)). - The next page URL may look like `https://api.github.com/repositories/93253246/commits?page=2`. It's generated by GitHub itself. 4. Then we yield the received commits one by one, and when they finish, the next `while(url)` iteration will trigger, making one more request. From 9b3b10f507d04059851c6fa39e83b9085d783cb2 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Mon, 16 Nov 2020 13:33:19 +0800 Subject: [PATCH 31/81] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8d7ce909f..8624e8ea7 100755 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ We'd also like to collaborate on the tutorial with other people. Something's wrong? A topic is missing? Explain it to people, add as PR 👏 -**You can edit the text in any editor.** The tutorial uses enhanced "markdown" format, easy to grasp. And if you want to see how it looks on-site, there's a server to run the tutorial locally at . +**You can edit the text in any editor.** The tutorial uses enhanced "markdown" format, easy to grasp. And if you want to see how it looks on-site, there's a server to run the tutorial locally at . The list of contributors is available at . @@ -35,5 +35,5 @@ Each of these files starts from the `# Main header`. It's very easy to add something new. --- -♥ +♥ Ilya Kantor @iliakan From 6db57d9494c2a7ca7793dc96378279d481b74a29 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Mon, 16 Nov 2020 15:53:33 +0800 Subject: [PATCH 32/81] Update article.md --- 1-js/11-async/06-promisify/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/11-async/06-promisify/article.md b/1-js/11-async/06-promisify/article.md index ac9499899..1d81b31a6 100644 --- a/1-js/11-async/06-promisify/article.md +++ b/1-js/11-async/06-promisify/article.md @@ -50,7 +50,7 @@ As we can see, the new function is a wrapper around the original `loadScript` fu Now `loadScriptPromise` fits well in promise-based code. If we like promises more than callbacks (and soon we'll see more reasons for that), then we will use it instead. -In practice we may need to promisify more than one function, so it makes sense to use a helper. +In practice we may need to promisify more than one function, so it makes sense to use a helper. We'll call it `promisify(f)`: it accepts a to-promisify function `f` and returns a wrapper function. From 891495cd475c1bc68004311ade9ff31b7115d12b Mon Sep 17 00:00:00 2001 From: Mustafa Kemal Tuna <12192118+lumosmind@users.noreply.github.com> Date: Tue, 17 Nov 2020 07:55:57 +0300 Subject: [PATCH 33/81] Promise.any I think Promise.any() must be in this article. --- 1-js/11-async/05-promise-api/article.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/1-js/11-async/05-promise-api/article.md b/1-js/11-async/05-promise-api/article.md index 5b4930bee..fa0566288 100644 --- a/1-js/11-async/05-promise-api/article.md +++ b/1-js/11-async/05-promise-api/article.md @@ -217,6 +217,29 @@ Promise.race([ The first promise here was fastest, so it became the result. After the first settled promise "wins the race", all further results/errors are ignored. +## Promise.any + +Similar to `Promise.race`, but waits only for the first fulfilled promise and gets its result. If all of the given promises are rejected, then the returned promise is rejected. + +The syntax is: + +```js +let promise = Promise.any(iterable); +``` + +For instance, here the result will be `1`: + +```js run +Promise.race([ + new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 1000)), + new Promise((resolve, reject) => setTimeout(() => resolve(1), 2000)), + new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000)) +]).then(alert); // 1 +``` + +The first promise here was fastest, but it rejecets, so the second promise became the result. After the first fulfilled promise "wins the race", all further results are ignored. + + ## Promise.resolve/reject Methods `Promise.resolve` and `Promise.reject` are rarely needed in modern code, because `async/await` syntax (we'll cover it [a bit later](info:async-await)) makes them somewhat obsolete. From 15780b3a2456174d36d9dec0e657a176ad817466 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Tue, 17 Nov 2020 20:58:33 +0800 Subject: [PATCH 34/81] Update task.md --- .../09-call-apply-decorators/03-debounce/task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md index 347a5e64f..5b0fcc5f8 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md @@ -21,9 +21,9 @@ Here's the code for it (uses the debounce decorator from the [Lodash library](ht ```js let f = _.debounce(alert, 1000); -f("a"); +f("a"); setTimeout( () => f("b"), 200); -setTimeout( () => f("c"), 500); +setTimeout( () => f("c"), 500); // debounced function waits 1000ms after the last call and then runs: alert("c") ``` From a81bb4a29360e70053b07b2b9f0601d0327ab48a Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Tue, 17 Nov 2020 17:39:17 +0200 Subject: [PATCH 35/81] Fix typo in 2.2.5 (Dispatching custom events) --- 2-ui/2-events/05-dispatch-events/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/05-dispatch-events/article.md b/2-ui/2-events/05-dispatch-events/article.md index fa6a0308b..930c51fcb 100644 --- a/2-ui/2-events/05-dispatch-events/article.md +++ b/2-ui/2-events/05-dispatch-events/article.md @@ -266,7 +266,7 @@ Then we can either put the `dispatchEvent` (or another event-triggering call) at ``` -Now `dispatchEvent` runs asynchronously after the current code execution is finished, including `mouse.onclick`, so event handlers are totally separate. +Now `dispatchEvent` runs asynchronously after the current code execution is finished, including `menu.onclick`, so event handlers are totally separate. The output order becomes: 1 -> 2 -> nested. From 149f63ed203b0079f32252b60ebc414301988ab7 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 18 Nov 2020 10:37:38 +0800 Subject: [PATCH 36/81] FIX: minor typo error, missing "alert( " --- .../10-regexp-greedy-and-lazy/1-lazy-greedy/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/9-regular-expressions/10-regexp-greedy-and-lazy/1-lazy-greedy/task.md b/9-regular-expressions/10-regexp-greedy-and-lazy/1-lazy-greedy/task.md index b46f55917..596f61a4e 100644 --- a/9-regular-expressions/10-regexp-greedy-and-lazy/1-lazy-greedy/task.md +++ b/9-regular-expressions/10-regexp-greedy-and-lazy/1-lazy-greedy/task.md @@ -3,5 +3,5 @@ What's the match here? ```js -"123 456".match(/\d+? \d+?/g) ); // ? +alert( "123 456".match(/\d+? \d+?/g) ); // ? ``` From 1ba96d43ce5e76714b7495539e2a53c193a84733 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Wed, 18 Nov 2020 00:16:23 -0300 Subject: [PATCH 37/81] missssing --- 5-network/11-websocket/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/11-websocket/article.md b/5-network/11-websocket/article.md index b374c2b70..31033403c 100644 --- a/5-network/11-websocket/article.md +++ b/5-network/11-websocket/article.md @@ -117,7 +117,7 @@ There may be additional headers `Sec-WebSocket-Extensions` and `Sec-WebSocket-Pr For instance: -- `Sec-WebSocket-Extensions: deflate-frame` means that the browser supports data compression. An extension is something related to transferring the data, functionality that extends WebSocket protocol. The header `Sec-WebSocket-Extensions` is sent automatically by the browser, with the list of all extenions it supports. +- `Sec-WebSocket-Extensions: deflate-frame` means that the browser supports data compression. An extension is something related to transferring the data, functionality that extends WebSocket protocol. The header `Sec-WebSocket-Extensions` is sent automatically by the browser, with the list of all extensions it supports. - `Sec-WebSocket-Protocol: soap, wamp` means that we'd like to transfer not just any data, but the data in [SOAP](http://en.wikipedia.org/wiki/SOAP) or WAMP ("The WebSocket Application Messaging Protocol") protocols. WebSocket subprotocols are registered in the [IANA catalogue](http://www.iana.org/assignments/websocket/websocket.xml). So, this header describes data formats that we're going to use. From 5aeb8fe6ae7300df8d9719d802cd6e4be85b5de2 Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 18 Nov 2020 11:44:26 +0800 Subject: [PATCH 38/81] Update article.md --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 019398be9..a2f62c4d8 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -51,7 +51,7 @@ The DOM represents HTML as a tree structure of tags. Here's how it looks:
From ee8f6d153b6d92547775eb75112d9af5f1d101cc Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Wed, 18 Nov 2020 01:08:34 -0300 Subject: [PATCH 39/81] Update article.md --- 5-network/11-websocket/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/11-websocket/article.md b/5-network/11-websocket/article.md index 31033403c..c9febf339 100644 --- a/5-network/11-websocket/article.md +++ b/5-network/11-websocket/article.md @@ -194,7 +194,7 @@ Imagine, our app is generating a lot of data to send. But the user has a slow ne We can call `socket.send(data)` again and again. But the data will be buffered (stored) in memory and sent out only as fast as network speed allows. -The `socket.bufferedAmount` property stores how many bytes are buffered at this moment, waiting to be sent over the network. +The `socket.bufferedAmount` property stores how many bytes remain buffered at this moment, waiting to be sent over the network. We can examine it to see whether the socket is actually available for transmission. From 3709b0b9b4f495b88a9e6621564222b87cec931b Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 18 Nov 2020 21:55:24 +0800 Subject: [PATCH 40/81] Update article.md --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index a2f62c4d8..c253157e4 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -51,7 +51,7 @@ The DOM represents HTML as a tree structure of tags. Here's how it looks:
From cd052d1c47a9e45f1eced0216bb84159f0bdc7cb Mon Sep 17 00:00:00 2001 From: LeviDing Date: Wed, 18 Nov 2020 21:58:57 +0800 Subject: [PATCH 41/81] Update article.md --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index c253157e4..248ddb8a6 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -188,7 +188,7 @@ For example, comments:
From 0437d5702b325705222c499f7258f10361503dd6 Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Wed, 18 Nov 2020 19:07:21 +0200 Subject: [PATCH 42/81] Fix typo in 2.3.3 (Moving the mouse...) --- .../article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md index c7ac0d4db..d409c3f12 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md @@ -80,7 +80,7 @@ An important feature of `mouseout` -- it triggers, when the pointer moves from a ``` -If we're on `#parent` and then move the pointer deeper into `#child`, but we get `mouseout` on `#parent`! +If we're on `#parent` and then move the pointer deeper into `#child`, we get `mouseout` on `#parent`! ![](mouseover-to-child.svg) From 5e9937afe06ba086f4b4815794432d0b1ea97c59 Mon Sep 17 00:00:00 2001 From: Osvaldo Dias dos Santos Date: Wed, 18 Nov 2020 22:58:28 +0100 Subject: [PATCH 43/81] Rephrase sentence. --- 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 c0f9f3b27..93c9b8165 100644 --- a/1-js/05-data-types/03-string/article.md +++ b/1-js/05-data-types/03-string/article.md @@ -239,7 +239,7 @@ alert( str.indexOf('widget') ); // -1, not found, the search is case-sensitive alert( str.indexOf("id") ); // 1, "id" is found at the position 1 (..idget with id) ``` -The optional second parameter allows us to search starting from the given position. +The optional second parameter allows us to start searching from a given position. For instance, the first occurrence of `"id"` is at position `1`. To look for the next occurrence, let's start the search from position `2`: From 0b401e613e53d951abf4086e66263a12a8fd17d7 Mon Sep 17 00:00:00 2001 From: Patrik Date: Thu, 19 Nov 2020 02:40:36 +0100 Subject: [PATCH 44/81] Updated article.md Fixed couple of grammar mistakes. --- 1-js/05-data-types/06-iterable/article.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/1-js/05-data-types/06-iterable/article.md b/1-js/05-data-types/06-iterable/article.md index 5e464ac20..018926f16 100644 --- a/1-js/05-data-types/06-iterable/article.md +++ b/1-js/05-data-types/06-iterable/article.md @@ -1,7 +1,7 @@ # Iterables -*Iterable* objects is a generalization of arrays. That's a concept that allows us to make any object useable in a `for..of` loop. +*Iterable* objects are a generalization of arrays. That's a concept that allows us to make any object useable in a `for..of` loop. Of course, Arrays are iterable. But there are many other built-in objects, that are iterable as well. For instance, strings are also iterable. @@ -26,7 +26,7 @@ let range = { // for(let num of range) ... num=1,2,3,4,5 ``` -To make the `range` iterable (and thus let `for..of` work) we need to add a method to the object named `Symbol.iterator` (a special built-in symbol just for that). +To make the `range` object iterable (and thus let `for..of` work) we need to add a method to the object named `Symbol.iterator` (a special built-in symbol just for that). 1. When `for..of` starts, it calls that method once (or errors if not found). The method must return an *iterator* -- an object with the method `next`. 2. Onward, `for..of` works *only with that returned object*. @@ -140,7 +140,7 @@ for (let char of str) { ## Calling an iterator explicitly -For deeper understanding let's see how to use an iterator explicitly. +For deeper understanding, let's see how to use an iterator explicitly. We'll iterate over a string in exactly the same way as `for..of`, but with direct calls. This code creates a string iterator and gets values from it "manually": @@ -165,16 +165,16 @@ That is rarely needed, but gives us more control over the process than `for..of` ## Iterables and array-likes [#array-like] -There are two official terms that look similar, but are very different. Please make sure you understand them well to avoid the confusion. +Two official terms look similar, but are very different. Please make sure you understand them well to avoid the confusion. - *Iterables* are objects that implement the `Symbol.iterator` method, as described above. - *Array-likes* are objects that have indexes and `length`, so they look like arrays. -When we use JavaScript for practical tasks in browser or other environments, we may meet objects that are iterables or array-likes, or both. +When we use JavaScript for practical tasks in a browser or any other environment, we may meet objects that are iterables or array-likes, or both. For instance, strings are both iterable (`for..of` works on them) and array-like (they have numeric indexes and `length`). -But an iterable may be not array-like. And vice versa an array-like may be not iterable. +But an iterable may not be array-like. And vice versa an array-like may not be iterable. For example, the `range` in the example above is iterable, but not array-like, because it does not have indexed properties and `length`. @@ -293,7 +293,7 @@ alert( str.slice(1, 3) ); // garbage (two pieces from different surrogate pairs) Objects that can be used in `for..of` are called *iterable*. - Technically, iterables must implement the method named `Symbol.iterator`. - - The result of `obj[Symbol.iterator]()` is called an *iterator*. It handles the further iteration process. + - The result of `obj[Symbol.iterator]()` is called an *iterator*. It handles further iteration process. - An iterator must have the method named `next()` that returns an object `{done: Boolean, value: any}`, here `done:true` denotes the end of the iteration process, otherwise the `value` is the next value. - The `Symbol.iterator` method is called automatically by `for..of`, but we also can do it directly. - Built-in iterables like strings or arrays, also implement `Symbol.iterator`. From 565fef832c6061ddbc4cd225907339a5dea5f9df Mon Sep 17 00:00:00 2001 From: Manjunath Reddy <5035624+manjufy@users.noreply.github.com> Date: Thu, 19 Nov 2020 14:47:55 +0800 Subject: [PATCH 45/81] Include missing fileServer In the `accept` method, `fileServer.serve(req, res)` was called however, noticed that it has not been initialized hence the change --- 5-network/12-server-sent-events/eventsource.view/server.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/5-network/12-server-sent-events/eventsource.view/server.js b/5-network/12-server-sent-events/eventsource.view/server.js index 34c7b1253..ad279aaab 100644 --- a/5-network/12-server-sent-events/eventsource.view/server.js +++ b/5-network/12-server-sent-events/eventsource.view/server.js @@ -1,6 +1,8 @@ let http = require('http'); let url = require('url'); let querystring = require('querystring'); +let static = require('node-static'); +let fileServer = new static.Server('.'); function onDigits(req, res) { res.writeHead(200, { @@ -36,7 +38,6 @@ function accept(req, res) { } fileServer.serve(req, res); - } From fa4b19e6154445aa9b0f1682a038f7e230ef391e Mon Sep 17 00:00:00 2001 From: Patrik Date: Thu, 19 Nov 2020 15:04:22 +0100 Subject: [PATCH 46/81] Rephrased for better clarity. --- 1-js/05-data-types/07-map-set/article.md | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/1-js/05-data-types/07-map-set/article.md b/1-js/05-data-types/07-map-set/article.md index e08c84084..240ef10d0 100644 --- a/1-js/05-data-types/07-map-set/article.md +++ b/1-js/05-data-types/07-map-set/article.md @@ -1,10 +1,10 @@ # Map and Set -Now we've learned about the following complex data structures: +Till now, we've learned about the following complex data structures: -- Objects for storing keyed collections. -- Arrays for storing ordered collections. +- Objects are used for storing keyed collections. +- Arrays are used for storing ordered collections. But that's not enough for real life. That's why `Map` and `Set` also exist. @@ -63,24 +63,26 @@ visitsCountMap.set(john, 123); alert( visitsCountMap.get(john) ); // 123 ``` -Using objects as keys is one of most notable and important `Map` features. For string keys, `Object` can be fine, but not for object keys. +Using objects as keys is one of the most notable and important `Map` features. The same does not count for `Object`. String as a key in `Object` is fine, but we can't use another `Object` as a key in `Object`. Let's try: ```js run let john = { name: "John" }; +let ben = { name: "Ben" }; let visitsCountObj = {}; // try to use an object -visitsCountObj[john] = 123; // try to use john object as the key +visitsCountObj[ben] = 234; // try to use ben object as the key +visitsCountObj[john] = 123; // try to use john object as the key, ben object will get replaced *!* // That's what got written! -alert( visitsCountObj["[object Object]"] ); // 123 +alert( visitsCountObj["[object Object]"] ); // 123 */!* ``` -As `visitsCountObj` is an object, it converts all keys, such as `john` to strings, so we've got the string key `"[object Object]"`. Definitely not what we want. +As `visitsCountObj` is an object, it converts all `Object` keys, such as `john` and `ben` above, to same string `"[object Object]"`. Definitely not what we want. ```smart header="How `Map` compares keys" To test keys for equivalence, `Map` uses the algorithm [SameValueZero](https://tc39.github.io/ecma262/#sec-samevaluezero). It is roughly the same as strict equality `===`, but the difference is that `NaN` is considered equal to `NaN`. So `NaN` can be used as the key as well. From 1feed09c5e39fbb6f7f546f6e36f61a336184778 Mon Sep 17 00:00:00 2001 From: Patrik Date: Thu, 19 Nov 2020 16:15:26 +0100 Subject: [PATCH 47/81] Rephrased for clarity. --- .../08-weakmap-weakset/article.md | 29 ++++++++++--------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/1-js/05-data-types/08-weakmap-weakset/article.md b/1-js/05-data-types/08-weakmap-weakset/article.md index 178a4e233..8f07a18ac 100644 --- a/1-js/05-data-types/08-weakmap-weakset/article.md +++ b/1-js/05-data-types/08-weakmap-weakset/article.md @@ -60,7 +60,7 @@ Let's see what it means on examples. ## WeakMap -The first difference from `Map` is that `WeakMap` keys must be objects, not primitive values: +The first difference between `Map` and `WeakMap` is that keys must be objects, not primitive values: ```js run let weakMap = new WeakMap(); @@ -101,9 +101,9 @@ Compare it with the regular `Map` example above. Now if `john` only exists as th Why such a limitation? That's for technical reasons. If an object has lost all other references (like `john` in the code above), then it is to be garbage-collected automatically. But technically it's not exactly specified *when the cleanup happens*. -The JavaScript engine decides that. It may choose to perform the memory cleanup immediately or to wait and do the cleaning later when more deletions happen. So, technically the current element count of a `WeakMap` is not known. The engine may have cleaned it up or not, or did it partially. For that reason, methods that access all keys/values are not supported. +The JavaScript engine decides that. It may choose to perform the memory cleanup immediately or to wait and do the cleaning later when more deletions happen. So, technically, the current element count of a `WeakMap` is not known. The engine may have cleaned it up or not, or did it partially. For that reason, methods that access all keys/values are not supported. -Now where do we need such data structure? +Now, where do we need such a data structure? ## Use case: additional data @@ -147,7 +147,7 @@ countUser(john); // count his visits john = null; ``` -Now `john` object should be garbage collected, but remains in memory, as it's a key in `visitsCountMap`. +Now, `john` object should be garbage collected, but remains in memory, as it's a key in `visitsCountMap`. We need to clean `visitsCountMap` when we remove users, otherwise it will grow in memory indefinitely. Such cleaning can become a tedious task in complex architectures. @@ -164,13 +164,13 @@ function countUser(user) { } ``` -Now we don't have to clean `visitsCountMap`. After `john` object becomes unreachable by all means except as a key of `WeakMap`, it gets removed from memory, along with the information by that key from `WeakMap`. +Now we don't have to clean `visitsCountMap`. After `john` object becomes unreachable, by all means except as a key of `WeakMap`, it gets removed from memory, along with the information by that key from `WeakMap`. ## Use case: caching -Another common example is caching: when a function result should be remembered ("cached"), so that future calls on the same object reuse it. +Another common example is caching. We can store ("cache") results from a function, so that future calls on the same object can reuse it. -We can use `Map` to store results, like this: +To achieve that, we can use `Map` (not optimal scenario): ```js run // 📁 cache.js @@ -207,7 +207,7 @@ alert(cache.size); // 1 (Ouch! The object is still in cache, taking memory!) For multiple calls of `process(obj)` with the same object, it only calculates the result the first time, and then just takes it from `cache`. The downside is that we need to clean `cache` when the object is not needed any more. -If we replace `Map` with `WeakMap`, then this problem disappears: the cached result will be removed from memory automatically after the object gets garbage collected. +If we replace `Map` with `WeakMap`, then this problem disappears. The cached result will be removed from memory automatically after the object gets garbage collected . ```js run // 📁 cache.js @@ -248,7 +248,7 @@ obj = null; - An object exists in the set while it is reachable from somewhere else. - Like `Set`, it supports `add`, `has` and `delete`, but not `size`, `keys()` and no iterations. -Being "weak", it also serves as an additional storage. But not for an arbitrary data, but rather for "yes/no" facts. A membership in `WeakSet` may mean something about the object. +Being "weak", it also serves as additional storage. But not for arbitrary data, but rather for "yes/no" facts. A membership in `WeakSet` may mean something about the object. For instance, we can add users to `WeakSet` to keep track of those who visited our site: @@ -276,14 +276,15 @@ john = null; // visitedSet will be cleaned automatically ``` -The most notable limitation of `WeakMap` and `WeakSet` is the absence of iterations, and inability to get all current content. That may appear inconvenient, but does not prevent `WeakMap/WeakSet` from doing their main job -- be an "additional" storage of data for objects which are stored/managed at another place. +The most notable limitation of `WeakMap` and `WeakSet` is the absence of iterations, and the inability to get all current content. That may appear inconvenient, but does not prevent `WeakMap/WeakSet` from doing their main job -- be an "additional" storage of data for objects which are stored/managed at another place. ## Summary -`WeakMap` is `Map`-like collection that allows only objects as keys and removes them together with associated value once they become inaccessible by other means. +`WeakMap` is `Map` like collection that allows only objects as keys and removes them together with associated value once they become inaccessible by other means. -`WeakSet` is `Set`-like collection that stores only objects and removes them once they become inaccessible by other means. +`WeakSet` is `Set` like collection that stores only objects and removes them once they become inaccessible by other means. -Both of them do not support methods and properties that refer to all keys or their count. Only individual operations are allowed. +It's main advantages are that they have weak reference to objects, so they can easily be removed by garbage colector. +That comes at the cost of not having support for `clear`, `size`, `keys`, `values` ... -`WeakMap` and `WeakSet` are used as "secondary" data structures in addition to the "main" object storage. Once the object is removed from the main storage, if it is only found as the key of `WeakMap` or in a `WeakSet`, it will be cleaned up automatically. +`WeakMap` and `WeakSet` are used as "secondary" data structures in addition to the "primary" object storage. Once the object is removed from the primary storage, if it is only found as the key of `WeakMap` or in a `WeakSet`, it will be cleaned up automatically. From e289aba4ee76de0ae2655f5c947721fa74b46265 Mon Sep 17 00:00:00 2001 From: Mustafa Kemal Tuna <12192118+lumosmind@users.noreply.github.com> Date: Fri, 20 Nov 2020 15:43:20 +0300 Subject: [PATCH 48/81] Update 1-js/11-async/05-promise-api/article.md Co-authored-by: Vse Mozhe Buty --- 1-js/11-async/05-promise-api/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/11-async/05-promise-api/article.md b/1-js/11-async/05-promise-api/article.md index fa0566288..d6933ec4e 100644 --- a/1-js/11-async/05-promise-api/article.md +++ b/1-js/11-async/05-promise-api/article.md @@ -237,7 +237,7 @@ Promise.race([ ]).then(alert); // 1 ``` -The first promise here was fastest, but it rejecets, so the second promise became the result. After the first fulfilled promise "wins the race", all further results are ignored. +The first promise here was fastest, but it was rejected, so the second promise became the result. After the first fulfilled promise "wins the race", all further results are ignored. ## Promise.resolve/reject From 0bdacaf9fcba4c2c4751697cdb6fce0f475c9231 Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Sun, 22 Nov 2020 12:35:10 +0200 Subject: [PATCH 49/81] Fis typo in 2.5.2 (Scripts: async, defer) --- 2-ui/5-loading/02-script-async-defer/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md index 2f9d45e9c..93c32a7f5 100644 --- a/2-ui/5-loading/02-script-async-defer/article.md +++ b/2-ui/5-loading/02-script-async-defer/article.md @@ -103,7 +103,7 @@ The `async` attribute means that a script is completely independent: - `DOMContentLoaded` may happen both before an async script (if an async script finishes loading after the page is complete) - ...or after an async script (if an async script is short or was in HTTP-cache) -In other words, `async` scripts load in the background and run when ready. The DOM and other scripts don't wait for them, and they don't wait for anything. A fully independent script that runs when loaded. As simple, at it can get, right? +In other words, `async` scripts load in the background and run when ready. The DOM and other scripts don't wait for them, and they don't wait for anything. A fully independent script that runs when loaded. As simple, as it can get, right? Here's an example similar to what we've seen with `defer`: two scripts `long.js` and `small.js`, but now with `async` instead of `defer`. From bd448509d279bf39566a83460e316d282798be17 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Tue, 24 Nov 2020 01:27:40 -0300 Subject: [PATCH 50/81] fix nested markdown --- 1-js/04-object-basics/02-object-copy/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 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 bbaff9ca1..98f67a906 100644 --- a/1-js/04-object-basics/02-object-copy/article.md +++ b/1-js/04-object-basics/02-object-copy/article.md @@ -229,7 +229,7 @@ To fix that, we should use the cloning loop that examines each value of `user[ke We can use recursion to implement it. Or, not to reinvent the wheel, take an existing implementation, for instance [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep) from the JavaScript library [lodash](https://lodash.com). -```smart header="Const objects can be modified" +````smart header="Const objects can be modified" An important "side effect" of storing objects as references is that an object declared as `const` *can* be modified. For instance: @@ -251,7 +251,7 @@ It might seem that the line `(*)` would cause an error, but no. The value of `us In other words, the `const user` gives an error only if we try to set `user=...` as a whole, and that's all. That said, if we really need to make constant object properties, it's also possible, but using totally different methods, we'll mention that in the chapter . -``` +```` ## Summary From 58136cb44f8d0a53bd9e12ee69bfcde7f3cd9ec1 Mon Sep 17 00:00:00 2001 From: Peter Roche <46547072+paroche@users.noreply.github.com> Date: Tue, 24 Nov 2020 01:59:50 -0700 Subject: [PATCH 51/81] Update article.md Various minor punctuation and phrasing changes. --- .../02-object-copy/article.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 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 98f67a906..91de53506 100644 --- a/1-js/04-object-basics/02-object-copy/article.md +++ b/1-js/04-object-basics/02-object-copy/article.md @@ -1,8 +1,8 @@ # Object references and copying -One of the fundamental differences of objects versus primitives is that objects are stored and copied "by reference", as opposed to primitive values: strings, numbers, booleans, etc -- that are always copied "as a whole value". +One of the fundamental differences of objects versus primitives is that objects are stored and copied "by reference", whereas primitive values: strings, numbers, booleans, etc -- are always copied "as a whole value". -That's easy to understand if we look a bit "under a cover" of what happens when we copy a value. +That's easy to understand if we look a bit under the hood of what happens when we copy a value. Let's start with a primitive, such as a string. @@ -13,7 +13,7 @@ let message = "Hello!"; let phrase = message; ``` -As a result we have two independent variables, each one is storing the string `"Hello!"`. +As a result we have two independent variables, each one storing the string `"Hello!"`. ![](variable-copy-value.svg) @@ -21,9 +21,9 @@ Quite an obvious result, right? Objects are not like that. -**A variable assigned to an object stores not the object itself, but its "address in memory", in other words "a reference" to it.** +**A variable assigned to an object stores not the object itself, but its "address in memory" -- in other words "a reference" to it.** -Let's look at an example of such variable: +Let's look at an example of such a variable: ```js let user = { @@ -37,13 +37,13 @@ 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 of a sheet of paper with the address. +We may think of an object variable, such as `user`, as like a sheet of paper with the address. -When we perform actions with the object, e.g. take a property `user.name`, JavaScript engine looks into that address and performs the operation on the actual object. +When we perform actions with the object, e.g. take a property `user.name`, JavaScript engine looks at what's at that address and performs the operation on the actual object. Now here's why it's important. -**When an object variable is copied -- the reference is copied, the object is not duplicated.** +**When an object variable is copied, the reference is copied but the object is not duplicated.** For instance: @@ -57,7 +57,7 @@ Now we have two variables, each one with the reference to the same object: ![](variable-copy-reference.svg) -As you can see, there's still one object, now with two variables that reference it. +As you can see, there's still one object, but now with two variables that reference it. We can use any variable to access the object and modify its contents: @@ -73,7 +73,7 @@ admin.name = 'Pete'; // changed by the "admin" reference alert(*!*user.name*/!*); // 'Pete', changes are seen from the "user" reference ``` -It's just as if we had a cabinet with two keys and used one of them (`admin`) to get into it. Then, if we later use another key (`user`) we can see changes. +It's as if we had a cabinet with two keys and used one of them (`admin`) to get into it and make changes. Then, if we later use another key (`user`), we are still opening the same cabinet and can see the changed content. ## Comparison by reference @@ -98,7 +98,7 @@ let b = {}; // two independent objects alert( a == b ); // false ``` -For comparisons like `obj1 > obj2` or for a comparison against a primitive `obj == 5`, objects are converted to primitives. We'll study how object conversions work very soon, but to tell the truth, such comparisons are needed very rarely, usually they appear as a result of a programming mistake. +For comparisons like `obj1 > obj2` or for a comparison against a primitive `obj == 5`, objects are converted to primitives. We'll study how object conversions work very soon, but to tell the truth, such comparisons are needed very rarely -- usually they appear as a result of a programming mistake. ## Cloning and merging, Object.assign @@ -227,10 +227,10 @@ alert(clone.sizes.width); // 51, see the result from the other one To fix that, we should use the 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, not to reinvent the wheel, take an existing implementation, for instance [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep) from the JavaScript library [lodash](https://lodash.com). +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). ````smart header="Const objects can be modified" -An important "side effect" of storing objects as references is that an object declared as `const` *can* be modified. +An important side effect of storing objects as references is that an object declared as `const` *can* be modified. For instance: @@ -246,16 +246,16 @@ user.name = "Pete"; // (*) alert(user.name); // Pete ``` -It might seem that the line `(*)` would cause an error, but no. The value of `user` is constant, it must always reference the same object. But properties of that object are free to change. +It might seem that the line `(*)` would cause an error, but it does not. The value of `user` is constant, it must always reference the same object. But properties of that object are free to change. In other words, the `const user` gives an error only if we try to set `user=...` as a whole, and that's all. -That said, if we really need to make constant object properties, it's also possible, but using totally different methods, we'll mention that in the chapter . +That said, if we really need to make constant object properties, it's also possible, but using totally different methods. We'll mention that in the chapter . ```` ## Summary -Objects are assigned and copied by reference. In other words, a variable stores not the "object value", but a "reference" (address in memory) for the value. So copying such a variable or passing it as a function argument copies that reference, not the object. +Objects are assigned and copied by reference. In other words, a variable stores not the "object value", but a "reference" (address in memory) for the value. So copying such a variable or passing it as a function argument copies that reference, not the object itself. All operations via copied references (like adding/removing properties) are performed on the same single object. From 865c3290eda2b54c3003c7b4cf6905776a1ce8bf Mon Sep 17 00:00:00 2001 From: Peter Roche <46547072+paroche@users.noreply.github.com> Date: Tue, 24 Nov 2020 02:22:47 -0700 Subject: [PATCH 52/81] Further minor changes to punctuation and wording (even more minor) --- 1-js/04-object-basics/02-object-copy/article.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 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 91de53506..68b4dd5d7 100644 --- a/1-js/04-object-basics/02-object-copy/article.md +++ b/1-js/04-object-basics/02-object-copy/article.md @@ -39,11 +39,11 @@ The object is stored somewhere in memory (at the right of the picture), while th We may think of an object variable, such as `user`, as like a sheet of paper with the address. -When we perform actions with the object, e.g. take a property `user.name`, JavaScript engine looks at what's at that address and performs the operation on the actual object. +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. Now here's why it's important. -**When an object variable is copied, the reference is copied but the object is not duplicated.** +**When an object variable is copied, the reference is copied, but the object itself is not duplicated.** For instance: @@ -53,13 +53,13 @@ let user = { name: "John" }; let admin = user; // copy the reference ``` -Now we have two variables, each one with the reference to the same object: +Now we have two variables, each storing a reference to the same object: ![](variable-copy-reference.svg) As you can see, there's still one object, but now with two variables that reference it. -We can use any variable to access the object and modify its contents: +We can use either variable to access the object and modify its contents: ```js run let user = { name: 'John' }; @@ -73,7 +73,7 @@ admin.name = 'Pete'; // changed by the "admin" reference alert(*!*user.name*/!*); // 'Pete', changes are seen from the "user" reference ``` -It's as if we had a cabinet with two keys and used one of them (`admin`) to get into it and make changes. Then, if we later use another key (`user`), we are still opening the same cabinet and can see the changed content. +It's as if we had a cabinet with two keys and used one of them (`admin`) to get into it and make changes. Then, if we later use another key (`user`), we are still opening the same cabinet and can access the changed contents. ## Comparison by reference @@ -106,7 +106,7 @@ 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? -That's also doable, but a little bit more difficult, because there's no built-in method for that in JavaScript. Actually, that's rarely needed. Copying by reference is good most of the time. +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. @@ -225,7 +225,7 @@ user.sizes.width++; // change a property from one place alert(clone.sizes.width); // 51, see the result from the other one ``` -To fix that, we should use the 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, 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). @@ -248,7 +248,7 @@ alert(user.name); // Pete It might seem that the line `(*)` would cause an error, but it does not. The value of `user` is constant, it must always reference the same object. But properties of that object are free to change. -In other words, the `const user` gives an error only if we try to set `user=...` as a whole, and that's all. +In other words, the `const user` gives an error only if we try to set `user=...` as a whole. That said, if we really need to make constant object properties, it's also possible, but using totally different methods. We'll mention that in the chapter . ```` From ac92672cbd6554aeae4243c6f7c2f9745e5c1927 Mon Sep 17 00:00:00 2001 From: Peter Roche <46547072+paroche@users.noreply.github.com> Date: Tue, 24 Nov 2020 02:33:38 -0700 Subject: [PATCH 53/81] And a little more More little tweaks. That should do for now. --- 1-js/04-object-basics/02-object-copy/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 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 68b4dd5d7..bf646a382 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. +We may think of an object variable, such as `user`, as 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. @@ -246,7 +246,7 @@ user.name = "Pete"; // (*) alert(user.name); // Pete ``` -It might seem that the line `(*)` would cause an error, but it does not. The value of `user` is constant, it must always reference the same object. But properties of that object are free to change. +It might seem that the line `(*)` would cause an error, but it does not. The value of `user` is constant, it must always reference the same object, but properties of that object are free to change. In other words, the `const user` gives an error only if we try to set `user=...` as a whole. From 54378cbbb70df2cda6e686aa9f26e4ed8795c2be Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Tue, 24 Nov 2020 19:58:52 +0200 Subject: [PATCH 54/81] Correct subhead in 3.1 (Popups and window methods) --- 3-frames-and-windows/01-popup-windows/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md index 7540b0304..d32715f87 100644 --- a/3-frames-and-windows/01-popup-windows/article.md +++ b/3-frames-and-windows/01-popup-windows/article.md @@ -192,7 +192,7 @@ newWindow.onload = function() { ``` -## Scrolling and resizing +## Moving and resizing There are methods to move/resize a window: From f7b22087f46479d642ad08dae00596b19dfa0a2a Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Tue, 17 Nov 2020 17:56:25 +0200 Subject: [PATCH 55/81] Fix typo in 2.3.1 (Mouse events) --- 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 651c3273f..4f3be1933 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 @@ -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 we may need `event.button`, because these events trigger on any button, so `button` allows to distinguish between "right-mousedown" and "left-mousedown". +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". The possible values of `event.button` are: From b7a7e687a421c7e0902696800d95c6708c13f915 Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Mon, 23 Nov 2020 19:07:20 +0200 Subject: [PATCH 56/81] Fix typo in 2.99.2 (Selection and Range) --- 2-ui/99-ui-misc/02-selection-range/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/99-ui-misc/02-selection-range/article.md b/2-ui/99-ui-misc/02-selection-range/article.md index 9b6deb0d3..c56f55cf6 100644 --- a/2-ui/99-ui-misc/02-selection-range/article.md +++ b/2-ui/99-ui-misc/02-selection-range/article.md @@ -494,7 +494,7 @@ Focus on me, the cursor will be at position 10. // zero delay setTimeout to run after browser "focus" action finishes setTimeout(() => { // we can set any selection - // if start=end, the cursor it exactly at that place + // if start=end, the cursor is exactly at that place area.selectionStart = area.selectionEnd = 10; }); }; From 445d2c85e18f5052ca5d908422c04aae4b72a065 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Tue, 24 Nov 2020 23:32:40 +0300 Subject: [PATCH 57/81] minor fixes --- 1-js/05-data-types/11-date/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-js/05-data-types/11-date/article.md b/1-js/05-data-types/11-date/article.md index 2193b7cc4..a3117806e 100644 --- a/1-js/05-data-types/11-date/article.md +++ b/1-js/05-data-types/11-date/article.md @@ -388,7 +388,7 @@ The string format should be: `YYYY-MM-DDTHH:mm:ss.sssZ`, where: - `YYYY-MM-DD` -- is the date: year-month-day. - The character `"T"` is used as the delimiter. - `HH:mm:ss.sss` -- is the time: hours, minutes, seconds and milliseconds. -- The optional `'Z'` part denotes the time zone in the format `+-hh:mm`. A single letter `Z` that would mean UTC+0. +- The optional `'Z'` part denotes the time zone in the format `+-hh:mm`. A single letter `Z` would mean UTC+0. Shorter variants are also possible, like `YYYY-MM-DD` or `YYYY-MM` or even `YYYY`. @@ -427,7 +427,7 @@ Sometimes we need more precise time measurements. JavaScript itself does not hav alert(`Loading started ${performance.now()}ms ago`); // Something like: "Loading started 34731.26000000001ms ago" // .26 is microseconds (260 microseconds) -// more than 3 digits after the decimal point are precision errors, but only the first 3 are correct +// more than 3 digits after the decimal point are precision errors, only the first 3 are correct ``` Node.js has `microtime` module and other ways. Technically, almost any device and environment allows to get more precision, it's just not in `Date`. From 79710c4dd1cde50da0b7a0b156ea1b01af7d0419 Mon Sep 17 00:00:00 2001 From: Patrik Date: Tue, 24 Nov 2020 23:32:34 +0100 Subject: [PATCH 58/81] Update article.md --- 1-js/05-data-types/08-weakmap-weakset/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/1-js/05-data-types/08-weakmap-weakset/article.md b/1-js/05-data-types/08-weakmap-weakset/article.md index 8f07a18ac..42c11e822 100644 --- a/1-js/05-data-types/08-weakmap-weakset/article.md +++ b/1-js/05-data-types/08-weakmap-weakset/article.md @@ -248,7 +248,7 @@ obj = null; - An object exists in the set while it is reachable from somewhere else. - Like `Set`, it supports `add`, `has` and `delete`, but not `size`, `keys()` and no iterations. -Being "weak", it also serves as additional storage. But not for arbitrary data, but rather for "yes/no" facts. A membership in `WeakSet` may mean something about the object. +Being "weak", it also serves as additional storage. But not for arbitrary data, rather for "yes/no" facts. A membership in `WeakSet` may mean something about the object. For instance, we can add users to `WeakSet` to keep track of those who visited our site: @@ -280,9 +280,9 @@ The most notable limitation of `WeakMap` and `WeakSet` is the absence of iterati ## Summary -`WeakMap` is `Map` like collection that allows only objects as keys and removes them together with associated value once they become inaccessible by other means. +`WeakMap` is `Map`-like collection that allows only objects as keys and removes them together with associated value once they become inaccessible by other means. -`WeakSet` is `Set` like collection that stores only objects and removes them once they become inaccessible by other means. +`WeakSet` is `Set`-like collection that stores only objects and removes them once they become inaccessible by other means. It's main advantages are that they have weak reference to objects, so they can easily be removed by garbage colector. That comes at the cost of not having support for `clear`, `size`, `keys`, `values` ... From 47ca608d2847d316ab4c30391cdca6936b2b54cb Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Wed, 25 Nov 2020 08:48:30 +0300 Subject: [PATCH 59/81] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8624e8ea7..2709127b6 100755 --- a/README.md +++ b/README.md @@ -34,6 +34,6 @@ Each of these files starts from the `# Main header`. It's very easy to add something new. ---- -♥ +--- +♥. Ilya Kantor @iliakan From 31d94418829808f603861d18afb5b28440a51588 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Wed, 25 Nov 2020 08:48:48 +0300 Subject: [PATCH 60/81] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2709127b6..3c3ae2df7 100755 --- a/README.md +++ b/README.md @@ -35,5 +35,5 @@ Each of these files starts from the `# Main header`. It's very easy to add something new. --- -♥. +♥ Ilya Kantor @iliakan From 0e79e06444d69d8036b54d5f17e44e453be7248c Mon Sep 17 00:00:00 2001 From: Mustafa Kemal Tuna <12192118+lumosmind@users.noreply.github.com> Date: Wed, 25 Nov 2020 10:30:19 +0300 Subject: [PATCH 61/81] example is fixed and summary is extended example is fixed and summary is extended due to feedbacks --- 1-js/11-async/05-promise-api/article.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/1-js/11-async/05-promise-api/article.md b/1-js/11-async/05-promise-api/article.md index d6933ec4e..989ab02f2 100644 --- a/1-js/11-async/05-promise-api/article.md +++ b/1-js/11-async/05-promise-api/article.md @@ -230,7 +230,7 @@ let promise = Promise.any(iterable); For instance, here the result will be `1`: ```js run -Promise.race([ +Promise.any([ new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 1000)), new Promise((resolve, reject) => setTimeout(() => resolve(1), 2000)), new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000)) @@ -302,7 +302,8 @@ There are 5 static methods of `Promise` class: - `status`: `"fulfilled"` or `"rejected"` - `value` (if fulfilled) or `reason` (if rejected). 3. `Promise.race(promises)` -- waits for the first promise to settle, and its result/error becomes the outcome. -4. `Promise.resolve(value)` -- makes a resolved promise with the given value. -5. `Promise.reject(error)` -- makes a rejected promise with the given error. +4. `Promise.any(promises)` -- waits for the first promise to fulfill, and its result/error becomes the outcome. +5. `Promise.resolve(value)` -- makes a resolved promise with the given value. +6. `Promise.reject(error)` -- makes a rejected promise with the given error. Of these five, `Promise.all` is probably the most common in practice. From 5f040588ff75fd627e5238fab1d04f6e06702ba4 Mon Sep 17 00:00:00 2001 From: Mustafa Kemal Tuna <12192118+lumosmind@users.noreply.github.com> Date: Wed, 25 Nov 2020 10:37:06 +0300 Subject: [PATCH 62/81] Summary section is fixed first fulfilled promise can not return error. --- 1-js/11-async/05-promise-api/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/11-async/05-promise-api/article.md b/1-js/11-async/05-promise-api/article.md index 989ab02f2..617dc11dd 100644 --- a/1-js/11-async/05-promise-api/article.md +++ b/1-js/11-async/05-promise-api/article.md @@ -302,7 +302,7 @@ There are 5 static methods of `Promise` class: - `status`: `"fulfilled"` or `"rejected"` - `value` (if fulfilled) or `reason` (if rejected). 3. `Promise.race(promises)` -- waits for the first promise to settle, and its result/error becomes the outcome. -4. `Promise.any(promises)` -- waits for the first promise to fulfill, and its result/error becomes the outcome. +4. `Promise.any(promises)` -- waits for the first promise to fulfill, and its result becomes the outcome.If all of the given promises rejects, it becomes the error of `Promise.any`. 5. `Promise.resolve(value)` -- makes a resolved promise with the given value. 6. `Promise.reject(error)` -- makes a rejected promise with the given error. From b73c2a452599ff3bb395ed94e2b85abaae229796 Mon Sep 17 00:00:00 2001 From: Mustafa Kemal Tuna <12192118+lumosmind@users.noreply.github.com> Date: Wed, 25 Nov 2020 10:38:23 +0300 Subject: [PATCH 63/81] typo --- 1-js/11-async/05-promise-api/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/11-async/05-promise-api/article.md b/1-js/11-async/05-promise-api/article.md index 617dc11dd..83c65e2eb 100644 --- a/1-js/11-async/05-promise-api/article.md +++ b/1-js/11-async/05-promise-api/article.md @@ -302,7 +302,7 @@ There are 5 static methods of `Promise` class: - `status`: `"fulfilled"` or `"rejected"` - `value` (if fulfilled) or `reason` (if rejected). 3. `Promise.race(promises)` -- waits for the first promise to settle, and its result/error becomes the outcome. -4. `Promise.any(promises)` -- waits for the first promise to fulfill, and its result becomes the outcome.If all of the given promises rejects, it becomes the error of `Promise.any`. +4. `Promise.any(promises)` -- waits for the first promise to fulfill, and its result becomes the outcome. If all of the given promises rejects, it becomes the error of `Promise.any`. 5. `Promise.resolve(value)` -- makes a resolved promise with the given value. 6. `Promise.reject(error)` -- makes a rejected promise with the given error. From 193e174653324cdaf037bef488994d65981fb4b4 Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Wed, 25 Nov 2020 17:10:48 +0200 Subject: [PATCH 64/81] Fix possible typos in 4.1 (ArrayBuffer, binary arrays) --- 4-binary/01-arraybuffer-binary-arrays/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md index 4beb6f5cd..accd3c505 100644 --- a/4-binary/01-arraybuffer-binary-arrays/article.md +++ b/4-binary/01-arraybuffer-binary-arrays/article.md @@ -34,7 +34,7 @@ A view object does not store anything on it's own. It's the "eyeglasses" that gi For instance: -- **`Uint8Array`** -- treats each byte in `ArrayBuffer` as a separate number, with possible values are from 0 to 255 (a byte is 8-bit, so it can hold only that much). Such value is called a "8-bit unsigned integer". +- **`Uint8Array`** -- treats each byte in `ArrayBuffer` as a separate number, with possible values from 0 to 255 (a byte is 8-bit, so it can hold only that much). Such value is called a "8-bit unsigned integer". - **`Uint16Array`** -- treats every 2 bytes as an integer, with possible values from 0 to 65535. That's called a "16-bit unsigned integer". - **`Uint32Array`** -- treats every 4 bytes as an integer, with possible values from 0 to 4294967295. That's called a "32-bit unsigned integer". - **`Float64Array`** -- treats every 8 bytes as a floating point number with possible values from 5.0x10-324 to 1.8x10308. @@ -77,7 +77,7 @@ Please note, there's no constructor called `TypedArray`, it's just a common "umb When you see something like `new TypedArray`, it means any of `new Int8Array`, `new Uint8Array`, etc. -Typed array behave like regular arrays: have indexes and iterable. +Typed arrays behave like regular arrays: have indexes and are iterable. A typed array constructor (be it `Int8Array` or `Float64Array`, doesn't matter) behaves differently depending on argument types. @@ -259,7 +259,7 @@ To do almost any operation on `ArrayBuffer`, we need a view. - `Float32Array`, `Float64Array` -- for signed floating-point numbers of 32 and 64 bits. - Or a `DataView` -- the view that uses methods to specify a format, e.g. `getUint8(offset)`. -In most cases we create and operate directly on typed arrays, leaving `ArrayBuffer` under cover, as a "common discriminator". We can access it as `.buffer` and make another view if needed. +In most cases we create and operate directly on typed arrays, leaving `ArrayBuffer` under cover, as a "common denominator". We can access it as `.buffer` and make another view if needed. There are also two additional terms, that are used in descriptions of methods that operate on binary data: - `ArrayBufferView` is an umbrella term for all these kinds of views. From 0eef95040cd102e88cb89c8a17be0c8a7cc40c56 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Wed, 25 Nov 2020 23:22:50 +0300 Subject: [PATCH 65/81] minor fixes --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 248ddb8a6..c673bf324 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -143,7 +143,7 @@ drawHtmlTree(node4, 'div.domtree', 690, 360); ````warn header="Tables always have ``" -An interesting "special case" is tables. By the DOM specification they must have ``, but HTML text may (officially) omit it. Then the browser creates `` in the DOM automatically. +An interesting "special case" is tables. By DOM specification they must have `` tag, but HTML text may omit it. Then the browser creates `` in the DOM automatically. For the HTML: From 0ac7894d102d5356abb4e809e875b4efa38aa40a Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Wed, 25 Nov 2020 23:23:13 +0300 Subject: [PATCH 66/81] minor fixes --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index c673bf324..2a66b15dd 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -160,7 +160,7 @@ let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType": drawHtmlTree(node5, 'div.domtree', 600, 200); -You see? The `` appeared out of nowhere. You should keep this in mind while working with tables to avoid surprises. +You see? The `` appeared out of nowhere. We should keep this in mind while working with tables to avoid surprises. ```` ## Other node types From fee665777f74abad8e8d29beb3c13dbe44f1d984 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Wed, 25 Nov 2020 23:23:59 +0300 Subject: [PATCH 67/81] minor fixes --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index 2a66b15dd..c04c6b9cb 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -199,7 +199,7 @@ We may think -- why is a comment added to the DOM? It doesn't affect the visual **Everything in HTML, even comments, becomes a part of the DOM.** -Even the `` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before ``. We are not going to touch that node, we even don't draw it on diagrams for that reason, but it's there. +Even the `` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before ``. We are not going to touch that node, we even don't draw it on diagrams, but it's there. The `document` object that represents the whole document is, formally, a DOM node as well. From 6ec4c4fc99c0c8ef9ce0be8db0aed3255276b782 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Wed, 25 Nov 2020 23:24:12 +0300 Subject: [PATCH 68/81] minor fixes --- 2-ui/1-document/02-dom-nodes/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index c04c6b9cb..f5afca5e5 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -199,7 +199,7 @@ We may think -- why is a comment added to the DOM? It doesn't affect the visual **Everything in HTML, even comments, becomes a part of the DOM.** -Even the `` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before ``. We are not going to touch that node, we even don't draw it on diagrams, but it's there. +Even the `` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before ``. Few people know about that. We are not going to touch that node, we even don't draw it on diagrams, but it's there. The `document` object that represents the whole document is, formally, a DOM node as well. From 91da65d1d3e381c70c244471dd6f1896000ffee1 Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Wed, 25 Nov 2020 23:53:37 +0200 Subject: [PATCH 69/81] Fix typos in 4.3 (Blob) --- 4-binary/03-blob/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/4-binary/03-blob/article.md b/4-binary/03-blob/article.md index bb475bc7f..a44308f6f 100644 --- a/4-binary/03-blob/article.md +++ b/4-binary/03-blob/article.md @@ -55,7 +55,7 @@ This behavior is similar to JavaScript strings: we can't change a character in a ## Blob as URL -A Blob can be easily used as an URL for ``, `` or other tags, to show its contents. +A Blob can be easily used as a URL for ``, `` or other tags, to show its contents. Thanks to `type`, we can also download/upload `Blob` objects, and the `type` naturally becomes `Content-Type` in network requests. @@ -99,7 +99,7 @@ blob:https://javascript.info/1e67e00e-860d-40a5-89ae-6ab0cbee6273 For each URL generated by `URL.createObjectURL` the browser stores a URL -> `Blob` mapping internally. So such URLs are short, but allow to access the `Blob`. -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 an url. +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. @@ -151,7 +151,7 @@ reader.onload = function() { }; ``` -Both ways of making an URL of a `Blob` are usable. But usually `URL.createObjectURL(blob)` is simpler and faster. +Both ways of making a URL of a `Blob` are usable. But usually `URL.createObjectURL(blob)` is simpler and faster. ```compare title-plus="URL.createObjectURL(blob)" title-minus="Blob to data url" + We need to revoke them if care about memory. From 2793f330fdf0ff240d8e075a3ce9f6dcd9b24276 Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Thu, 26 Nov 2020 20:22:57 +0200 Subject: [PATCH 70/81] Fix typo in 5.2 (FormData) --- 5-network/02-formdata/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/02-formdata/article.md b/5-network/02-formdata/article.md index d281d0756..2a2cf6840 100644 --- a/5-network/02-formdata/article.md +++ b/5-network/02-formdata/article.md @@ -75,7 +75,7 @@ formData.append('key2', 'value2'); // List key/value pairs for(let [name, value] of formData) { - alert(`${name} = ${value}`); // key1=value1, then key2=value2 + alert(`${name} = ${value}`); // key1 = value1, then key2 = value2 } ``` From ae6f990d6277894b68bb0e842b1a9be56a1e570b Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Fri, 27 Nov 2020 16:47:08 +0200 Subject: [PATCH 71/81] Add missing parenthesis in 5.6 (Fetch API) --- 5-network/06-fetch-api/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/06-fetch-api/article.md b/5-network/06-fetch-api/article.md index 52856bb90..3ca61f35c 100644 --- a/5-network/06-fetch-api/article.md +++ b/5-network/06-fetch-api/article.md @@ -50,7 +50,7 @@ These options govern how `fetch` sets HTTP `Referer` header. Usually that header is set automatically and contains the url of the page that made the request. In most scenarios, it's not important at all, sometimes, for security purposes, it makes sense to remove or shorten it. -**The `referrer` option allows to set any `Referer` within the current origin) or remove it.** +**The `referrer` option allows to set any `Referer` (within the current origin) or remove it.** To send no referer, set an empty string: ```js From b79964ad8d9cb70df320bbbc2f2a729a8d9ebb43 Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Sat, 28 Nov 2020 19:52:12 +0200 Subject: [PATCH 72/81] Fix typos in 5.8 (XMLHttpRequest) --- 5-network/08-xmlhttprequest/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/5-network/08-xmlhttprequest/article.md b/5-network/08-xmlhttprequest/article.md index 1a2b754e0..6b4d3d739 100644 --- a/5-network/08-xmlhttprequest/article.md +++ b/5-network/08-xmlhttprequest/article.md @@ -93,7 +93,7 @@ xhr.onload = function() { if (xhr.status != 200) { // analyze HTTP status of the response alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found } else { // show the result - alert(`Done, got ${xhr.response.length} bytes`); // response is the server + alert(`Done, got ${xhr.response.length} bytes`); // response is the server response } }; @@ -190,7 +190,7 @@ All states, as in [the specification](https://xhr.spec.whatwg.org/#states): UNSENT = 0; // initial state OPENED = 1; // open called HEADERS_RECEIVED = 2; // response headers received -LOADING = 3; // response is loading (a data packed is received) +LOADING = 3; // response is loading (a data packet is received) DONE = 4; // request complete ``` From 513d36eabf5e4b744cd7a1e7fe053e1073a54530 Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Sat, 28 Nov 2020 19:56:23 +0200 Subject: [PATCH 73/81] Expand a note in 5.8 (XMLHttpRequest) --- 5-network/08-xmlhttprequest/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/08-xmlhttprequest/article.md b/5-network/08-xmlhttprequest/article.md index 1a2b754e0..af5d254f5 100644 --- a/5-network/08-xmlhttprequest/article.md +++ b/5-network/08-xmlhttprequest/article.md @@ -151,7 +151,7 @@ We can use `xhr.responseType` property to set the response format: - `"text"` -- get as string, - `"arraybuffer"` -- get as `ArrayBuffer` (for binary data, see chapter ), - `"blob"` -- get as `Blob` (for binary data, see chapter ), -- `"document"` -- get as XML document (can use XPath and other XML methods), +- `"document"` -- get as XML document (can use XPath and other XML methods) or HTML document (based on the MIME type of the received data), - `"json"` -- get as JSON (parsed automatically). For example, let's get the response as JSON: From 0f0a0c564a931a42bcaee457f2ae07d9c179682a Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Sat, 28 Nov 2020 22:49:20 +0200 Subject: [PATCH 74/81] Replace deprecated property in 5.9 (Resumable file upload) --- 5-network/09-resume-upload/article.md | 2 +- 5-network/09-resume-upload/upload-resume.view/uploader.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/5-network/09-resume-upload/article.md b/5-network/09-resume-upload/article.md index f5c9a5903..7eedc3fbd 100644 --- a/5-network/09-resume-upload/article.md +++ b/5-network/09-resume-upload/article.md @@ -24,7 +24,7 @@ To resume upload, we need to know *exactly* the number of bytes received by the 1. First, create a file id, to uniquely identify the file we're going to upload: ```js - let fileId = file.name + '-' + file.size + '-' + +file.lastModifiedDate; + let fileId = file.name + '-' + file.size + '-' + file.lastModified; ``` That's needed for resume upload, to tell the server what we're resuming. diff --git a/5-network/09-resume-upload/upload-resume.view/uploader.js b/5-network/09-resume-upload/upload-resume.view/uploader.js index 2e53ce4a3..10002039c 100644 --- a/5-network/09-resume-upload/upload-resume.view/uploader.js +++ b/5-network/09-resume-upload/upload-resume.view/uploader.js @@ -6,7 +6,7 @@ class Uploader { // create fileId that uniquely identifies the file // we could also add user session identifier (if had one), to make it even more unique - this.fileId = file.name + '-' + file.size + '-' + +file.lastModifiedDate; + this.fileId = file.name + '-' + file.size + '-' + file.lastModified; } async getUploadedBytes() { From c828fe3f3b18cf5c967e712d9c27f310fe2a6010 Mon Sep 17 00:00:00 2001 From: Vse Mozhe Buty Date: Sun, 29 Nov 2020 02:45:50 +0200 Subject: [PATCH 75/81] Fix typo in 5.11 (WebSocket) --- 5-network/11-websocket/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/11-websocket/article.md b/5-network/11-websocket/article.md index c9febf339..aab6d31be 100644 --- a/5-network/11-websocket/article.md +++ b/5-network/11-websocket/article.md @@ -238,7 +238,7 @@ socket.onclose = event => { Most common code values: - `1000` -- the default, normal closure (used if no `code` supplied), -- `1006` -- no way to such code manually, indicates that the connection was lost (no close frame). +- `1006` -- no way to set such code manually, indicates that the connection was lost (no close frame). There are other codes like: From e558805d8b04eddc067c3dee8619cd728de0a6d2 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Sun, 29 Nov 2020 10:02:02 +0300 Subject: [PATCH 76/81] fixes #2326 --- 5-network/03-fetch-progress/article.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/5-network/03-fetch-progress/article.md b/5-network/03-fetch-progress/article.md index 2d003157d..67630be77 100644 --- a/5-network/03-fetch-progress/article.md +++ b/5-network/03-fetch-progress/article.md @@ -110,3 +110,5 @@ Let's explain that step-by-step: At the end we have the result (as a string or a blob, whatever is convenient), and progress-tracking in the process. Once again, please note, that's not for *upload* progress (no way now with `fetch`), only for *download* progress. + +Also, if we the size is unknown, we should check `receivedLength` in the loop and break it once it reaches a certain limit. So that the `chunks` won't overflow the memory. \ No newline at end of file From b852cfef7f92ec5a28f19da45e4c27da77e40388 Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Sun, 29 Nov 2020 05:04:39 -0300 Subject: [PATCH 77/81] Update article.md --- 5-network/03-fetch-progress/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/5-network/03-fetch-progress/article.md b/5-network/03-fetch-progress/article.md index 67630be77..f5a64da54 100644 --- a/5-network/03-fetch-progress/article.md +++ b/5-network/03-fetch-progress/article.md @@ -111,4 +111,4 @@ At the end we have the result (as a string or a blob, whatever is convenient), a Once again, please note, that's not for *upload* progress (no way now with `fetch`), only for *download* progress. -Also, if we the size is unknown, we should check `receivedLength` in the loop and break it once it reaches a certain limit. So that the `chunks` won't overflow the memory. \ No newline at end of file +Also, if the size is unknown, we should check `receivedLength` in the loop and break it once it reaches a certain limit. So that the `chunks` won't overflow the memory. From ebd774d28d0deb0a108cbf3506ceb4133b4804a2 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Sun, 29 Nov 2020 11:12:18 +0300 Subject: [PATCH 78/81] Update 7-animation/2-css-animations/article.md Co-authored-by: Muhammed Zakir <8190126+MuhammedZakir@users.noreply.github.com> --- 7-animation/2-css-animations/article.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index b2ef821fe..e320520aa 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -86,7 +86,11 @@ In `transition-duration` we can specify how long the animation should take. The In `transition-delay` we can specify the delay *before* the animation. For instance, if `transition-delay` is `1s` and `transition-duration` is `2s`, then the animation starts 1 second after the property change and the total duration will be 2 seconds. -Negative values are also possible. Then the animation starts from the middle. For instance, if `transition-duration` is `2s`, and the delay is `-1s`, then the animation takes 1 second and starts from the halfway point. +Negative values are also possible. Then the animation is shown immediately, but the starting point of the animation will be after given value (time). For example, if `transition-delay` is `-1s` and `transition-duration` is `2s`, then animation starts from the halfway point and total duration will be 1 second. You can think it like this: + + `transition-delay + transition-duration = animation duration` + +So, if for instance, `transition-delay` is `-2s` and `transition-duration` is `2s`, then it will be as if there was no transitioning animation for that property and the changes are shown instantly. Therefore, "animation duration" must always be greater than `0s` for any animation to be shown. Here the animation shifts numbers from `0` to `9` using CSS `translate` property: From 6f7d9cf0f8e2ea89ec91326b8c8c24be53bb21dd Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Sun, 29 Nov 2020 11:14:29 +0300 Subject: [PATCH 79/81] minor fixes --- 7-animation/2-css-animations/article.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index e320520aa..80b38c835 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -86,11 +86,7 @@ In `transition-duration` we can specify how long the animation should take. The In `transition-delay` we can specify the delay *before* the animation. For instance, if `transition-delay` is `1s` and `transition-duration` is `2s`, then the animation starts 1 second after the property change and the total duration will be 2 seconds. -Negative values are also possible. Then the animation is shown immediately, but the starting point of the animation will be after given value (time). For example, if `transition-delay` is `-1s` and `transition-duration` is `2s`, then animation starts from the halfway point and total duration will be 1 second. You can think it like this: - - `transition-delay + transition-duration = animation duration` - -So, if for instance, `transition-delay` is `-2s` and `transition-duration` is `2s`, then it will be as if there was no transitioning animation for that property and the changes are shown instantly. Therefore, "animation duration" must always be greater than `0s` for any animation to be shown. +Negative values are also possible. Then the animation is shown immediately, but the starting point of the animation will be after given value (time). For example, if `transition-delay` is `-1s` and `transition-duration` is `2s`, then animation starts from the halfway point and total duration will be 1 second. Here the animation shifts numbers from `0` to `9` using CSS `translate` property: From 574dd84b23c54257faa27b6642186787a341c6f0 Mon Sep 17 00:00:00 2001 From: Ilya Kantor Date: Sun, 29 Nov 2020 11:22:53 +0300 Subject: [PATCH 80/81] closes #2319 --- 1-js/99-js-misc/01-proxy/article.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/1-js/99-js-misc/01-proxy/article.md b/1-js/99-js-misc/01-proxy/article.md index b1c351d3a..922c9ce0c 100644 --- a/1-js/99-js-misc/01-proxy/article.md +++ b/1-js/99-js-misc/01-proxy/article.md @@ -963,9 +963,13 @@ revoke(); alert(proxy.data); // Error ``` -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. +A call to `revoke()` removes all internal references to the target object from the proxy, so they are no longer connected. -We can also store `revoke` in a `WeakMap`, to be able to easily find it by a proxy object: +Initially, `revoke` is separate from `proxy`, so that we can pass `proxy` around while leaving `revoke` in the current scope. + +We can also bind `revoke` method to proxy by setting `proxy.revoke = revoke`. + +Another option is to create a `WeakMap` that has `proxy` as the key the corresponding `revoke` as the value, that allows to easily find `revoke` for a proxy: ```js run *!* @@ -980,15 +984,13 @@ let {proxy, revoke} = Proxy.revocable(object, {}); revokes.set(proxy, revoke); -// ..later in our code.. +// ..somewhere else in our code.. revoke = revokes.get(proxy); revoke(); alert(proxy.data); // Error (revoked) ``` -The benefit of such an approach is that we don't have to carry `revoke` around. We can get it from the map by `proxy` when needed. - We use `WeakMap` instead of `Map` here because it won't block garbage collection. If a proxy object becomes "unreachable" (e.g. no variable references it any more), `WeakMap` allows it to be wiped from memory together with its `revoke` that we won't need any more. ## References From ffa0401812fc586223c07ae5f8f9b49cd043dc25 Mon Sep 17 00:00:00 2001 From: Osvaldo Dias dos Santos Date: Mon, 30 Nov 2020 19:48:18 +0100 Subject: [PATCH 81/81] Resolve conflicts/Change tanslations --- 1-js/01-getting-started/1-intro/article.md | 14 +- 1-js/05-data-types/06-iterable/article.md | 8 - 7-animation/2-css-animations/article.md | 171 +++------------------ 3 files changed, 22 insertions(+), 171 deletions(-) diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 41fcd92c6..98de73575 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -106,19 +106,11 @@ Ferramentas modernas tornam a transpilação muito rápida e transparente, permi Exemplos de tais linguagens: -<<<<<<< HEAD - [CoffeeScript](http://coffeescript.org/) é um "açúcar sintático" para JavaScript. Ele introduz uma sintaxe mais curta, permitindo-nos escrever um código mais claro e preciso. Normalmente, Ruby devs gostam dele. -- [TypeScript](http://www.typescriptlang.org/) está concentrado em adicionar "dados estritos de digitação" para simplificar o desenvolvimento e suporte de sistemas complexos. É desenvolvido pela Microsoft. -- [Flow](http://flow.org/) também adiciona dados de digitação, mas de uma forma diferente. Desenvolvido pela Facebook. -- [Dart](https://www.dartlang.org/) é uma linguagem autônoma que tem seu próprio mecanismo que roda em ambientes sem navegador (como aplicativos móveis), mas também pode ser transpilada para JavaScript. Desenvolvido pela Google. +- [TypeScript](http://www.typescriptlang.org/) está concentrado em adicionar "estritos tipos de dados" para simplificar o desenvolvimento e suporte de sistemas complexos. É desenvolvido pela Microsoft. +- [Flow](http://flow.org/) também adiciona tipos de dados, mas de uma forma diferente. Desenvolvido pela Facebook. +- [Dart](https://www.dartlang.org/) é uma linguagem autônoma que tem seu próprio interpretador que roda em ambientes fora do navegador (como aplicativos móveis), mas também pode ser transpilada para JavaScript. Desenvolvido pela Google. - [Brython](https://brython.info/) é um transpilador de Python para JavaScript que permite escrever aplicativos em puro Python, sem JavaScript. -======= -- [CoffeeScript](http://coffeescript.org/) is a "syntactic sugar" for JavaScript. It introduces shorter syntax, allowing us to write clearer and more precise code. Usually, Ruby devs like it. -- [TypeScript](http://www.typescriptlang.org/) is concentrated on adding "strict data typing" to simplify the development and support of complex systems. It is developed by Microsoft. -- [Flow](http://flow.org/) also adds data typing, but in a different way. Developed by Facebook. -- [Dart](https://www.dartlang.org/) is a standalone language that has its own engine that runs in non-browser environments (like mobile apps), but also can be transpiled to JavaScript. Developed by Google. -- [Brython](https://brython.info/) is a Python transpiler to JavaScript that enables the writing of applications in pure Python without JavaScript. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 Há mais. Claro que, mesmo que usemos uma dessas linguagens transpiladas, também devemos saber JavaScript para entender o que estamos fazendo. diff --git a/1-js/05-data-types/06-iterable/article.md b/1-js/05-data-types/06-iterable/article.md index 01510ec52..782bf14b0 100644 --- a/1-js/05-data-types/06-iterable/article.md +++ b/1-js/05-data-types/06-iterable/article.md @@ -140,11 +140,7 @@ for (let char of str) { ## Calling an iterator explicitly -<<<<<<< HEAD -Normally, internals of iterables are hidden from the external code. There's a `for..of` loop, that works, that's all it needs to know. -======= For deeper understanding, let's see how to use an iterator explicitly. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 We'll iterate over a string in exactly the same way as `for..of`, but with direct calls. This code creates a string iterator and gets values from it "manually": @@ -174,13 +170,9 @@ Two official terms look similar, but are very different. Please make sure you un - *Iterables* are objects that implement the `Symbol.iterator` method, as described above. - *Array-likes* are objects that have indexes and `length`, so they look like arrays. -<<<<<<< HEAD -Naturally, these properties can combine. For instance, strings are both iterable (`for..of` works on them) and array-like (they have numeric indexes and `length`). -======= When we use JavaScript for practical tasks in a browser or any other environment, we may meet objects that are iterables or array-likes, or both. For instance, strings are both iterable (`for..of` works on them) and array-like (they have numeric indexes and `length`). ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 But an iterable may not be array-like. And vice versa an array-like may not be iterable. diff --git a/7-animation/2-css-animations/article.md b/7-animation/2-css-animations/article.md index 504d2bde1..47ecd1a19 100644 --- a/7-animation/2-css-animations/article.md +++ b/7-animation/2-css-animations/article.md @@ -1,24 +1,14 @@ # Animações CSS -<<<<<<< HEAD Animações CSS nos permitem criar animações simples sem usar *Javascript*. *Javascript* pode ser usado para controlar a animação CSS e torná-la ainda melhor com pouco código. -======= -CSS animations make it possible to do simple animations without JavaScript at all. - -JavaScript can be used to control CSS animations and make them even better, with little code. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 ## Transições CSS [#css-transition] A idéia das transições CSS é simples. Descrevemos uma propriedade e como suas mudanças devem ser animadas. Quando a propriedade muda, o navegador desenha a animação. -<<<<<<< HEAD -Isto é: tudo que precisamos fazer é mudar uma propriedade. E a transição é feita pelo navegador. -======= -That is, all we need is to change the property, and the fluid transition will be done by the browser. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 +Isto é: tudo que precisamos fazer é mudar uma propriedade. E a transição fluida é feita pelo navegador. Por exemplo, o CSS abaixo anima as mudanças em `background-color` por 3 segundos: @@ -57,11 +47,7 @@ Existem 4 propriedades que descrevem as transições CSS: - `transition-timing-function` - `transition-delay` -<<<<<<< HEAD -Iremos falar delas daqui a pouco, por ora notemos que a propriedade comum `transition` permite declará-las juntas em ordem: `property duration timing-function delay`, e permite também animar várias propriedades de uma vez. -======= -We'll cover them in a moment, for now let's note that the common `transition` property allows declaring them together in the order: `property duration timing-function delay`, as well as animating multiple properties at once. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 +Iremos falar delas daqui a pouco, por ora notemos que a propriedade comum `transition` permite declará-las juntas na ordem: `property duration timing-function delay`, e permite também animar várias propriedades de uma vez. Por exemplo, esse botão anima as propriedades `color` e `font-size` ao mesmo tempo: @@ -84,23 +70,13 @@ growing.onclick = function() { ``` -<<<<<<< HEAD Agora, vamos falar de cada uma das propriedades de animação. ## transition-property -Em `transition-property`, escrevemos uma lista de propriedades para animar, por exemplo: `left`, `margin-left`, `height`, `color`. - -Nem todas as propriedades podem ser animadas, mas [várias delas](http://www.w3.org/TR/css3-transitions/#animatable-properties-). O valor `all` significa "animar todas as propriedades". -======= -Now, let's cover animation properties one by one. - -## transition-property - -In `transition-property`, we write a list of properties to animate, for instance: `left`, `margin-left`, `height`, `color`. Or we could write `all`, which means "animate all properties". +Em `transition-property`, escrevemos uma lista de propriedades para animar, por exemplo: `left`, `margin-left`, `height`, `color`. Ou podemos escrever `all`, que significa "animar todas as propriedades". -Do note that, there are properties which can not be animated. However, [most of the generally used properties are animatable](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties). ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 +Note que nem todas as propriedades podem ser animadas, mas [a maioria das propriedades habitualmente utilizadas são animáveis](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties). ## transition-duration @@ -108,19 +84,11 @@ Em `transition-duration` especificamos quanto tempo a animação deve durar. Ele ## transition-delay -<<<<<<< HEAD -Em `transition-delay` especificamos o atraso *antes* da animação começar. Por exemplo, se `transition-delay: 1s`, então a animação começará 1 segundo após a mudança. +Em `transition-delay` especificamos o atraso *antes* da animação começar. Por exemplo, se `transition-delay` é `1s` e `transition-duration` é `2s`, então a animação começa 1 segundo depois da mudança da propriedade e a duração total é de 2 segundos. -Valores negativos também são possíveis. Dessa forma, a animação começará do meio, como se ela já estivesse ocorrendo. Por exemplo, se `transition-duration` é `2s`, e o atraso é de `-1s`, então a animação dura 1 segundo e começa do estado que estaria na metade de seu ciclo. +Valores negativos também são possíveis. Dessa forma, a animação começa imediatamente, mas o ponto inicial da animação é depois do valor dado (tempo). Por exemplo, se `transition-delay` é `-1s` e `transition-duration` é `2s`, então a animação começa do estado que estaria na metade de seu ciclo e dura 1 segundo. Essa é uma animação que desloca números de `0` a `9` usando a propriedade CSS `translate`: -======= -In `transition-delay` we can specify the delay *before* the animation. For instance, if `transition-delay` is `1s` and `transition-duration` is `2s`, then the animation starts 1 second after the property change and the total duration will be 2 seconds. - -Negative values are also possible. Then the animation is shown immediately, but the starting point of the animation will be after given value (time). For example, if `transition-delay` is `-1s` and `transition-duration` is `2s`, then animation starts from the halfway point and total duration will be 1 second. - -Here the animation shifts numbers from `0` to `9` using CSS `translate` property: ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 [codetabs src="digits"] @@ -140,21 +108,13 @@ No exemplo acima, *Javascript* adiciona a classe `.animate` no elemento, inician stripe.classList.add('animate'); ``` -<<<<<<< HEAD -Podemos também iniciar a animação "do meio", de um número exato, por exemplo, correspondendo ao segundo atual, usando um valor negativo em `transition-delay`. -======= -We could also start it from somewhere in the middle of the transition, from an exact number, e.g. corresponding to the current second, using a negative `transition-delay`. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 +Podemos também iniciar a animação "do meio" da transição, de um número exato, por exemplo correspondendo ao segundo atual, usando um valor negativo em `transition-delay`. Nesse exemplo, se você clicar no dígito, ele iniciará a animação à partir do segundo atual: [codetabs src="digits-negative-delay"] -<<<<<<< HEAD *JavaScript* faz isso por meio de uma linha extra: -======= -JavaScript does it with an extra line: ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 ```js stripe.onclick = function() { @@ -169,49 +129,26 @@ stripe.onclick = function() { ## transition-timing-function -<<<<<<< HEAD -*Timing function* (função de sincronização) descreve como o processo da animação é distribuído ao longo do tempo. Por exemplo, ela deve começar devagar e depois acelerar ou vice e versa. +A *timing function* (função de sincronização) descreve como o processo da animação é distribuído ao longo do tempo. Por exemplo, ela deve começar devagar e depois acelerar ou vice e versa. Essa parece ser a propriedade mais complicada à primeira vista. Mas fica simples se dedicarmos um pouco de tempo para ela. Essa propriedade aceita dois tipos de valores: uma curva Bezier ou *steps* (passos). Vamos começar com a curva, pois ela é usada com mais frequência. -======= -The timing function describes how the animation process is distributed along its timeline. Will it start slowly and then go fast, or vice versa. - -It appears to be the most complicated property at first. But it becomes very simple if we devote a bit time to it. - -That property accepts two kinds of values: a Bezier curve or steps. Let's start with the curve, as it's used more often. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 ### Curva Bezier -<<<<<<< HEAD -A *timing function* pode ser setada como uma [curva Bezier](/bezier-curve) com 4 pontos de controle que satisfaça as condições: +A *timing function* pode ser configurada como uma [curva Bezier](/bezier-curve) com 4 pontos de controle que satisfaça as condições: 1. Primeiro ponto de controle: `(0,0)`. 2. Último ponto de controle: `(1,1)`. -3. Para pontos intermediários, valores de `x` precisam estar no intervalo `0..1`, `y` pode ser qualquer coisa. -======= -The timing function can be set as a [Bezier curve](/bezier-curve) with 4 control points that satisfy the conditions: - -1. First control point: `(0,0)`. -2. Last control point: `(1,1)`. -3. For intermediate points, the values of `x` must be in the interval `0..1`, `y` can be anything. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 +3. Para pontos intermediários, os valores de `x` precisam de estar no intervalo `0..1`, `y` pode ser qualquer coisa. A sintaxe para a curva Bezier no CSS é: `cubic-bezier(x2, y2, x3, y3)`. Aqui precisamos especificar somente o segundo e o terceiro pontos de controle, porque o primeiro é fixado em `(0,0)` e o quarto, em `(1,1)`. -<<<<<<< HEAD A *timing function* descreve o quão rápido a animação acontece no tempo: -- O eixo `x` é o tempo: `0` -- representa o início, `1` -- representa o último momento da `transition-duration`. +- O eixo `x` é o tempo: `0` -- o início, `1` -- o fim da `transition-duration`. - O eixo `y` especifica o estado do processo: `0` -- representa o valor inicial da propriedade, `1` -- representa o valor final. -======= -The timing function describes how fast the animation process goes. - -- The `x` axis is the time: `0` -- the start, `1` -- the end of `transition-duration`. -- The `y` axis specifies the completion of the process: `0` -- the starting value of the property, `1` -- the final value. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 A variação mais simples é quando a animação acontece uniformemente, com a mesma velocidade linear. Ela pode ser especificada pela curva `cubic-bezier(0, 0, 1, 1)`. @@ -260,11 +197,7 @@ CSS: Existem várias curvas embutidas: `linear`, `ease`, `ease-in`, `ease-out` e `ease-in-out`. -<<<<<<< HEAD -A `linear` é uma abreviação para `cubic-bezier(0, 0, 1, 1)` -- uma linha reta, já a estudamos. -======= -The `linear` is a shorthand for `cubic-bezier(0, 0, 1, 1)` -- a straight line, which we described above. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 +A `linear` é uma abreviação para `cubic-bezier(0, 0, 1, 1)` -- uma linha reta, como descrevemos acima. Outros nomes são usados como abreviações para as seguintes `cubic-bezier`: @@ -288,15 +221,9 @@ Então, podemos usar `ease-out` para desacelerar nosso trem: Mas ele parece um pouco diferente. -<<<<<<< HEAD **Uma curva Bezier pode fazer uma animação "pular fora" de seu alcance.** Os pontos de controle da curva podem ter qualquer valor para a coordenada `y`: até mesmo negativo ou enorme. Então, a curva Bezier também pularia muito baixo ou muito alto, fazendo com que a animação vá além de seu alcance normal. -======= -**A Bezier curve can make the animation exceed its range.** - -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. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 No exemplo abaixo, o código da animação é: ```css @@ -317,39 +244,21 @@ Mas, se você clicar no trem, verá que: [codetabs src="train-over"] -<<<<<<< HEAD -Por que isso acontece? A resposta é óbvia se olharmos para o gráfico da seguinte curva: +Por que isso acontece é realmente óbvio se olharmos para o gráfico da seguinte curva Bezier: ![](bezier-train-over.svg) -Nós movemos a coordenada `y` do segundo ponto para abaixo de zero, e para o terceiro ponto, fizemos acima de `1`, então a curva ultrapassa seu quadrante "regular". O `y` está fora de seu alcance "padrão" `0..1`. +Nós movemos a coordenada `y` do segundo ponto para abaixo de zero, e para o terceiro ponto, o fizemos acima de `1`, então a curva ultrapassa seu quadrante "regular". O `y` está fora de seu alcance "padrão" `0..1`. -Como sabemos, `y` mede "o estado do processo da animação". O valor `y = 0` corresponde ao valor inicial da propriedade e `y = 1` -- ao valor final. Então, o valor `y<0` move a propriedade abaixo da propriedade inicial `left` e `y>1` -- para além do valor final `left`. -======= -Why it happens is pretty obvious if we look at the graph of the given Bezier curve: - -![](bezier-train-over.svg) - -We moved the `y` coordinate of the 2nd point below zero, and for the 3rd point we made it over `1`, so the curve goes out of the "regular" quadrant. The `y` is out of the "standard" range `0..1`. - -As we know, `y` measures "the completion of the animation process". The value `y = 0` corresponds to the starting property value and `y = 1` -- the ending value. So values `y<0` move the property beyond the starting `left` and `y>1` -- past the final `left`. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 +Como sabemos, `y` mede "o estado do processo da animação". O valor `y = 0` corresponde ao valor inicial da propriedade e `y = 1` -- ao valor final. Então, o valor `y<0` move a propriedade abaixo do inicial `left` e `y>1` -- para além do valor final `left`. Essa é uma variação "leve". Se definirmos valores de `y` como `-99` e `99` então, o trem pularia ainda mais fora de seu alcance. -<<<<<<< HEAD Mas, como criar uma curva Bezier para uma tarefa específica? Existem várias ferramentas. Por exemplo, podemos fazer isso em . -======= -But how do we make a Bezier curve for a specific task? There are many tools. For instance, we can do it on the site . ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 ### Steps (Passos) -<<<<<<< HEAD -A *Timing function* `steps(number of steps[, start/end])` nos permite separar a animação em passos. -======= -The timing function `steps(number of steps[, start/end])` allows splitting an animation into steps. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 +A *timing function* `steps(number of steps[, start/end])` nos permite separar a animação em passos. Vamos examiná-la em um exemplo com dígitos. @@ -413,21 +322,13 @@ Esses valores são usados raramente, porque não são realmente animações, mas Quando a animação CSS é finalizada, o evento `transitionend` é disparado. -É amplamente usado para executar uma ação assim que animação é finalizada. Também podemos utilizá-lo para encadear animações. +É amplamente usado para executar uma ação assim que animação é finalizada. Também podemos utilizadas são animáveis-lo para encadear animações. -<<<<<<< HEAD Por exemplo, ao clicar no navio do exemplo abaixo, ele começa a navegar para frente e para trás, indo, a cada vez, mais e mais longe para a direita: [iframe src="boat" height=300 edit link] -A animação é iniciada por meio da função `go` que é reexecutada a cada vez que a animação é finalizada: -======= -For instance, the ship in the example below starts to sail there and back when clicked, each time farther and farther to the right: - -[iframe src="boat" height=300 edit link] - -The animation is initiated by the function `go` that re-runs each time the transition finishes, and flips the direction: ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 +A animação é iniciada por meio da função `go` que é re-executada a cada vez que a transição chega ao fim, mudando aí de direção: ```js boat.onclick = function() { @@ -436,19 +337,11 @@ boat.onclick = function() { function go() { if (times % 2) { -<<<<<<< HEAD // navegue para a direita boat.classList.remove('back'); boat.style.marginLeft = 100 * times + 200 + 'px'; } else { // navegue para a esquerda -======= - // sail to the right - boat.classList.remove('back'); - boat.style.marginLeft = 100 * times + 200 + 'px'; - } else { - // sail to the left ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 boat.classList.add('back'); boat.style.marginLeft = 100 * times - 200 + 'px'; } @@ -464,11 +357,7 @@ boat.onclick = function() { }; ``` -<<<<<<< HEAD O objeto do evento `transitionend` possui algumas propriedades específicas: -======= -The event object for `transitionend` has a few specific properties: ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 `event.propertyName` : A propriedade que acabou de ser animada. Pode ser útil se animarmos múltiplas propriedades ao mesmo tempo. @@ -480,11 +369,7 @@ The event object for `transitionend` has a few specific properties: Nós podemos unir diversas animações simples juntas usando a regra CSS `@keyframes`. -<<<<<<< HEAD Ela especifica o "nome" da animação e regras: o quê, quando e onde animar. Então, usando a propriedade `animation` nós anexamos a animação ao elemento e especificamos parâmetros adicionais. -======= -It specifies the "name" of the animation and rules - what, when and where to animate. Then using the `animation` property, we can attach the animation to the element and specify additional parameters for it. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 Veja um exemplo com explicações: @@ -520,41 +405,23 @@ Veja um exemplo com explicações: Existem vários artigos sobre `@keyframes` e uma [especificação detalhada](https://drafts.csswg.org/css-animations/). -<<<<<<< HEAD Provavelmente, você não precisará de `@keyframes` regularmente, a não ser que tudo estiver em movimento constante em sua página. -======= -You probably won't need `@keyframes` often, unless everything is in constant motion on your sites. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 ## Resumo -<<<<<<< HEAD Animações CSS permitem animar de forma suave (ou não) mudanças em uma ou diversas propriedades CSS. -======= -CSS animations allow smoothly (or not) animated changes of one or multiple CSS properties. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 Elas são úteis para a maioria das tarefas envolvendo animações. Também podemos usar *Javascript* para animações, o próximo capítulo é dedicado a isso. Limitações de animações CSS comparadas a animações usando *JavaScript*: ```compare plus="CSS animations" minus="JavaScript animations" -<<<<<<< HEAD + Animações simples de forma simples. + Rápidas e leves para a CPU. - Animações *Javascript* são flexíveis. Elas podem produzir qualquer lógica de animação, como a "explosão" de um elemento. -- Não são apenas as propriedades que mudam. Podemos criar novos elementos em *JavaScript* para os propósitos da animação. +- Não são apenas as propriedades que mudam. Podemos criar novos elementos em *JavaScript* como parte da animação. ``` A maioria das animações pode ser implementada usando CSS como descrito nesse capítulo. E o evento `transitionend` nos permite rodar *Javascript* após a animação, integrando-se bem com o código. -======= -+ Simple things done simply. -+ Fast and lightweight for CPU. -- JavaScript animations are flexible. They can implement any animation logic, like an "explosion" of an element. -- Not just property changes. We can create new elements in JavaScript as part of the animation. -``` - -The majority of animations can be implemented using CSS as described in this chapter. And the `transitionend` event allows JavaScript to be run after the animation, so it integrates fine with the code. ->>>>>>> e1a3f634a47c119cf1ec7420c49fc0fc7172c0b5 Mas, no próximo capítulo, iremos criar animações em *Javascript* para cobrir casos mais complexos.