Merge branch 'master' of github.com:javascript-tutorial/en.javascript.info into sync-fbf443e4

Author: iliakan

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

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

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

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

2-ui/3-event-details/6-pointer-events/article.md

@@ -1,28 +1,28 @@
 # Pointer events
 
-Pointer events is a modern way to handle input from a variety of pointing devices, such as a mouse, a pen/stylus, a touchscreen and so on.
+Pointer events are a modern way to handle input from a variety of pointing devices, such as a mouse, a pen/stylus, a touchscreen, and so on.
 
 ## The brief history
 
 Let's make a small overview, so that you understand the general picture and the place of Pointer Events among other event types.
 
-- Long ago, in the past, there existed only mouse events.
+- Long ago, in the past, there were only mouse events.
 
     Then touch devices appeared. For the old code to work, they also generate mouse events. For instance, tapping generates `mousedown`. But mouse events were not good enough, as touch devices are more powerful in many aspects. For example, it's possible to touch multiple points at once, and mouse events don't have any properties for that.
 
 - So touch events were introduced, such as `touchstart`, `touchend`, `touchmove`, that have touch-specific properties (we don't cover them in detail here, because pointer events are even better).
 
-    Still, it wasn't enough, as there are many other devices, such as pens, that have their own features. Also, writing a code that listens both touch and mouse events was cumbersome. 
+    Still, it wasn't enough, as there are many other devices, such as pens, that have their own features. Also, writing code that listens for both touch and mouse events was cumbersome. 
 
 - To solve these issues, the new standard Pointer Events was introduced. It provides a single set of events for all kinds of pointing devices.
 
-As of now, [Pointer Events Level 2](https://www.w3.org/TR/pointerevents2/) specification is supported in all major browsers, while the [Pointer Events Level 3](https://w3c.github.io/pointerevents/) is in the works. Unless you code for Internet Explorer 10 or Safari 12 and below, there's no point in using mouse or touch events any more. We can switch to pointer events.
+As of now, [Pointer Events Level 2](https://www.w3.org/TR/pointerevents2/) specification is supported in all major browsers, while [Pointer Events Level 3](https://w3c.github.io/pointerevents/) is in the works. Unless you code for Internet Explorer 10, or for Safari 12 or below, there's no point in using mouse or touch events any more -- we can switch to pointer events.
 
-That said, there are important peculiarities, one should know them to use them correctly and avoid extra surprises.  We'll pay attention to them in this article.
+That being said, they have some important peculiarities that one should know in order to use them correctly and avoid surprises. We'll make note of them in this article.
 
 ## Pointer event types
 
-Pointer events are named similar to mouse events:
+Pointer events are named similarly to mouse events:
 
 | Pointer Event | Mouse event |
 |---------------|-------------|
@@ -37,30 +37,30 @@ Pointer events are named similar to mouse events:
 | `gotpointercapture` | - |
 | `lostpointercapture` | - |
 
-As we can see, for every `mouse<event>`, there's a `pointer<event>` that plays a similar role. Also there are 3 additional pointer events that don't have a corresponding `mouse...` counterpart, we'll soon explain about them. 
+As we can see, for every `mouse<event>`, there's a `pointer<event>` that plays a similar role. Also there are 3 additional pointer events that don't have a corresponding `mouse...` counterpart, we'll explain them soon. 
 
 ```smart header="Replacing `mouse<event>` with `pointer<event>` in our code"
 We can replace `mouse<event>` events with `pointer<event>` in our code and expect things to continue working fine with mouse.
 
-The support for touch devices will also "magically" improve, but we'll probably need to add `touch-action: none` rule in CSS. See the details below in the section about `pointercancel`. 
+The support for touch devices will also "magically" improve, but we'll probably need to add `touch-action: none` in CSS. See the details below in the section about `pointercancel`. 
 ```
 
 ## Pointer event properties
 
-Pointer events have the same properties as mouse events, such as `clientX/Y`, `target` etc, plus some extra:
+Pointer events have the same properties as mouse events, such as `clientX/Y`, `target`, etc., plus some others:
 
 - `pointerId` - the unique identifier of the pointer causing the event.
     
-    Allows to handle multiple pointers, such as a touchscreen with stylus and multi-touch (explained below).
-- `pointerType` - the pointing device type, must be a string, one of: "mouse", "pen" or "touch". 
+    Allows us to handle multiple pointers, such as a touchscreen with stylus and multi-touch (explained below).
+- `pointerType` - the pointing device type. Must be a string, one of: "mouse", "pen" or "touch". 
 
     We can use this property to react differently on various pointer types.
 - `isPrimary` - `true` for the primary pointer (the first finger in multi-touch).
 
-For pointers that measure a contact area and pressure, e.g. a finger on the touchscreen, the additional properties can be useful:
+For pointers that measure contact area and pressure, e.g. a finger on the touchscreen, the additional properties can be useful:
 
-- `width` - the width of of the area where the pointer touches the device. Where unsupported, e.g. for mouse it's always `1`. 
-- `height` - the height of of the area where the pointer touches the device. Where unsupported, always `1`.
+- `width` - the width of the area where the pointer touches the device. Where unsupported, e.g. for a mouse, it's always `1`. 
+- `height` - the height of the area where the pointer touches the device. Where unsupported, it's always `1`.
 - `pressure` - the pressure of the pointer tip, in range from 0 to 1. For devices that don't support pressure must be either `0.5` (pressed) or `0`.
 - `tangentialPressure` - the normalized tangential pressure.
 - `tiltX`, `tiltY`, `twist` - pen-specific properties that describe how the pen is positioned relative the surface.
@@ -69,29 +69,29 @@ These properties aren't very well supported across devices, so they are rarely u
 
 ## Multi-touch
 
-One of the things that mouse events totally don't support is multi-touch: a user can touch them in several places at once at their phone or tablet, perform special gestures.
+One of the things that mouse events totally don't support is multi-touch: a user can touch in several places at once on their phone or tablet, or perform special gestures.
 
-Pointer Events allow to handle multi-touch with the help of `pointerId` and `isPrimary` properties.
+Pointer Events allow handling multi-touch with the help of the `pointerId` and `isPrimary` properties.
 
-Here's what happens when a user touches a screen at one place, and then puts another finger somewhere else on it:
+Here's what happens when a user touches a screen in one place, then puts another finger somewhere else on it:
 
 1. At the first touch:
     - `pointerdown` with `isPrimary=true` and some `pointerId`.
 2. For the second finger and further touches:
     - `pointerdown` with `isPrimary=false` and a different `pointerId` for every finger.
 
-Please note: there `pointerId` is assigned not to the whole device, but for each touching finger. If we use 5 fingers to simultaneously touch the screen, we have 5 `pointerdown` events with respective coordinates and different `pointerId`.
+Please note: the `pointerId` is assigned not to the whole device, but for each touching finger. If we use 5 fingers to simultaneously touch the screen, we have 5 `pointerdown` events, each with their respective coordinates and a different `pointerId`.
 
 The events associated with the first finger always have `isPrimary=true`.
 
-We can track multiple touching fingers using their `pointerId`. When the user moves move and then detouches a finger, we get `pointermove` and `pointerup` events with the same `pointerId` as we had in `pointerdown`.
+We can track multiple touching fingers using their `pointerId`. When the user moves and then removes a finger, we get `pointermove` and `pointerup` events with the same `pointerId` as we had in `pointerdown`.
 
 ```online
 Here's the demo that logs `pointerdown` and `pointerup` events:
 
 [iframe src="multitouch" edit height=200]
 
-Please note: you must be using a touchscreen device, such as a phone or a tablet to actually see the difference. For single-touch devices, such as a mouse, there'll be always same `pointerId` with `isPrimary=true`, for all pointer events.
+Please note: you must be using a touchscreen device, such as a phone or a tablet, to actually see the difference. For single-touch devices, such as a mouse, there'll be always same `pointerId` with `isPrimary=true`, for all pointer events.
 ```
 
 ## Event: pointercancel
@@ -109,7 +109,7 @@ We'll demonstrate `pointercancel` on a practical example to see how it affects u
 
 Let's say we're impelementing drag'n'drop for a ball, just as in the beginning of the article <info:mouse-drag-and-drop>.
 
-Here are the flow of user actions and corresponding events:
+Here is the flow of user actions and the corresponding events:
 
 1) The user presses the mouse button on an image, to start dragging
     - `pointerdown` event fires
@@ -134,13 +134,13 @@ We'd like to implement our own drag'n'drop, so let's tell the browser not to tak
 We need to do two things:
 
 1. Prevent native drag'n'drop from happening:
-    - Can do it by setting `ball.ondragstart = () => false`, just as described in the article <info:mouse-drag-and-drop>.
+    - We can do this by setting `ball.ondragstart = () => false`, just as described in the article <info:mouse-drag-and-drop>.
     - That works well for mouse events.
 2. For touch devices, there are also touch-related browser actions. We'll have problems with them too.
     - We can prevent them by setting `#ball { touch-action: none }` in CSS. 
     - Then our code will start working on touch devices.
 
-After we do that, the events will work as intended, the browser won't hijack the process and emit no `pointercancel`.
+After we do that, the events will work as intended, the browser won't hijack the process and doesn't emit `pointercancel`.
 
 ```online
 This demo adds these lines:
@@ -214,16 +214,16 @@ There are two associated pointer events:
 
 ## Summary
 
-Pointer events allow to handle mouse, touch and pen events simultaneously.
+Pointer events allow handling mouse, touch and pen events simultaneously.
 
 Pointer events extend mouse events. We can replace `mouse` with `pointer` in event names and expect our code to continue working for mouse, with better support for other device types.
 
-Remember to set `touch-events: none` in CSS for elements that we engage, otherwise the browser hijacks many types of touch interactions and pointer events won't be generated.
+Remember to set `touch-events: none` in CSS for elements that we engage, otherwise the browser will hijack many types of touch interactions, and pointer events won't be generated.
 
 Additional abilities of Pointer events are:
 
 - Multi-touch support using `pointerId` and `isPrimary`.
-- Device-specific properties, such as `pressure`, `width/height` and others.
+- Device-specific properties, such as `pressure`, `width/height`, and others.
 - Pointer capturing: we can retarget all pointer events to a specific element until `pointerup`/`pointercancel`.
 
-As of now, pointer events are supported in all major browsers, so we can safely switch to them, if IE10- and Safari 12- are not needed. And even with those browsers, there are polyfills that enable the support of pointer events.
+As of now, pointer events are supported in all major browsers, so we can safely switch to them, as long as IE10- and Safari 12- are not needed. And even with those browsers, there are polyfills that enable the support of pointer events.

5-network/11-websocket/article.md

@@ -177,12 +177,12 @@ A call `socket.send(body)` allows `body` in string or a binary format, including
 
 **When we receive the data, text always comes as string. And for binary data, we can choose between `Blob` and `ArrayBuffer` formats.**
 
-That's set by `socket.bufferType` property, it's `"blob"` by default, so binary data comes as `Blob` objects.
+That's set by `socket.binaryType` property, it's `"blob"` by default, so binary data comes as `Blob` objects.
 
 [Blob](info:blob) is a high-level binary object, it directly integrates with `<a>`, `<img>` and other tags, so that's a sane default. But for binary processing, to access individual data bytes, we can change it to `"arraybuffer"`:
 
 ```js
-socket.bufferType = "arraybuffer";
+socket.binaryType = "arraybuffer";
 socket.onmessage = (event) => {
   // event.data is either a string (if text) or arraybuffer (if binary)
 };