javascript-tutorial · tarasyyyk · Oct 11, 2021 · Aug 15, 2021 · Aug 16, 2021 · Aug 21, 2021
diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md
@@ -24,11 +24,11 @@
 
 Різні рушії мають різні "кодові назви". Наприклад:
 
-- [V8](https://uk.wikipedia.org/wiki/V8_(рушій_JavaScript)) -- в Chrome і Opera.
+- [V8](https://uk.wikipedia.org/wiki/V8_(рушій_JavaScript)) -- в Chrome, Opera та Edge.
 - [SpiderMonkey](https://uk.wikipedia.org/wiki/SpiderMonkey) -- в Firefox.
 - ...Є також інші кодові назви як "Chakra" для IE, "JavaScriptCore", "Nitro" і "SquirrelFish" для Safari, та інші.
 
-Написані вище терміни добре було б запам’ятати, оскільки вони використовуються в статтях розробників на просторах інтернету. Ми також будемо їх використовувати. Наприклад, якщо "можливість X підтримується в V8", тоді ймовірно це буде працювати в Chrome і Opera.
+Написані вище терміни добре було б запам’ятати, оскільки вони використовуються в статтях розробників на просторах інтернету. Ми також будемо їх використовувати. Наприклад, якщо "можливість X підтримується в V8", тоді ймовірно це буде працювати в Chrome, Opera та Edge.
 
 ```smart header="Як рушії працюють?"
 

diff --git a/1-js/01-getting-started/3-code-editors/article.md b/1-js/01-getting-started/3-code-editors/article.md
@@ -32,7 +32,6 @@ IDE завантажує проект (який може мати багато
 Ось ці варіанти заслуговують вашої уваги:
 
 - [Atom](https://atom.io/) (багатоплатформний, безкоштовний).
-- [Visual Studio Code](https://code.visualstudio.com/) (багатоплатформний, безкоштовний).
 - [Sublime Text](http://www.sublimetext.com) (багатоплатформний, випробувальний термін).
 - [Notepad++](https://notepad-plus-plus.org/) (Windows, безкоштовний).
 - [Vim](http://www.vim.org/) та [Emacs](https://www.gnu.org/software/emacs/) також хороші, якщо знати, як ними користуватися.

diff --git a/1-js/02-first-steps/09-comparison/article.md b/1-js/02-first-steps/09-comparison/article.md
@@ -7,7 +7,7 @@
 - Більше/менше: <code>a &gt; b</code>, <code>a &lt; b</code>.
 - Більше/менше або дорівнює: <code>a &gt;= b</code>, <code>a &lt;= b</code>.
 - Дорівнює: `a == b`. Зверніть увагу, для порівняння потрібно використовувати два знаки рівності `==`. Один знак рівності `a = b` означав б присвоєння.
-- Не дорівнює. В математиці позначається символом <code>&ne;</code>, проте в JavaScript записується як <code>a != b</code>.
+- Не дорівнює: в математиці позначається символом <code>&ne;</code>, проте в JavaScript записується як <code>a != b</code>.
 
 В цьому розділі ми вивчимо різні типи порівнянь, узнаємо, як JavaScript їх виконує, та розглянемо важливі особливості.
 

diff --git a/1-js/03-code-quality/02-coding-style/article.md b/1-js/03-code-quality/02-coding-style/article.md
@@ -301,11 +301,11 @@ function pow(x, n) {
 
 Ось декілька добре відомих засобів для перевірки:
 
-- [JSLint](http://www.jslint.com/) -- один з перших лінтерів.
-- [JSHint](http://www.jshint.com/) -- має більше налаштувань ніж JSLint.
-- [ESLint](http://eslint.org/) -- напевно, найсучасніший лінтер.
+- [JSLint](https://www.jslint.com/) -- один з перших лінтерів.
+- [JSHint](https://www.jshint.com/) -- має більше налаштувань ніж JSLint.
+- [ESLint](https://eslint.org/) -- напевно, найсучасніший лінтер.
 
-Всі вони роблять свою справу. Автор використовує [ESLint](http://eslint.org/).
+Всі вони роблять свою справу. Автор використовує [ESLint](https://eslint.org/).
 
 Більшість лінтерів інтегровані в популярні редактори: просто увімкніть відповідний плаґін в редакторі і налаштуйте стиль.
 
@@ -335,7 +335,7 @@ function pow(x, n) {
 
 Директива `"extends"` означає, що конфігурація базується на наборі налаштувань "eslint:recommended". Після цього, ви вказуєте ваші власні.
 
-Крім того, можна завантажити набори правил з мережі та розширити їх. Дивіться <http://eslint.org/docs/user-guide/getting-started> для отримання більш детальної інструкції зі встановлення.
+Крім того, можна завантажити набори правил з мережі та розширити їх. Дивіться <https://eslint.org/docs/user-guide/getting-started> для отримання більш детальної інструкції зі встановлення.
 
 Також, деякі середовища розробки (IDE) мають вбудовані засоби первірки коду, що є зручним, але не таким гнучким в налаштуванні рішенням, як ESLint.
 

diff --git a/1-js/04-object-basics/02-object-copy/article.md b/1-js/04-object-basics/02-object-copy/article.md
@@ -133,7 +133,7 @@ clone.name = "Петро"; // змінемо його вміст
 alert( user.name ); // як і раніше Іван залишився в оригінальному об’єкті
 ```
 
-Також ми можемо використати метод [Object.assign](mdn:js/Object/assign) для цього.
+Також ми можемо використати метод [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) для цього.
 
 Його синтаксис:
 

diff --git a/1-js/05-data-types/01-primitives-methods/article.md b/1-js/05-data-types/01-primitives-methods/article.md
@@ -48,7 +48,7 @@ john.sayHi(); // Привіт друже!
 2. JavaScript дозволяє отримати доступ до методів та властивостей рядків, чисел, булеанів та символів.
 3. Для цього створюється спеціальний "об’єкт обгортка" з додатковою функціональністю, та потім він знищується.
 
-Для кожного примітиву створюється своя "обгортка": `String`, `Number`, `Boolean` та `Symbol`. Отже, вони містять різні набори методів.
+Для кожного примітиву створюється своя "обгортка": `String`, `Number`, `Boolean`, `Symbol` та `BigInt`. Отже, вони містять різні набори методів.
 
 Наприклад: існує такий метод для рядка, як [str.toUpperCase()](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase), який поверне рядок `str` з великими літерами. 
 

diff --git a/...dvanced-functions/01-recursion/05-output-single-linked-list-reverse/solution.md b/...dvanced-functions/01-recursion/05-output-single-linked-list-reverse/solution.md
@@ -33,7 +33,7 @@ printReverseList(list);
 
 # За допомогою циклу
 
-Варіант циклу також трохи складніше, ніж прямий вивід.
+Варіант з циклом також трохи складніший, ніж прямий вивід.
 
 Немає можливості отримати останнє значення в нашому `list`. Ми також не можемо "повернутися назад".
 

diff --git a/1-js/11-async/03-promise-chaining/article.md b/1-js/11-async/03-promise-chaining/article.md
@@ -36,15 +36,15 @@ The idea is that the result is passed through the chain of `.then` handlers.
 
 Here the flow is:
 1. The initial promise resolves in 1 second `(*)`,
-2. Then the `.then` handler is called `(**)`.
-3. The value that it returns is passed to the next `.then` handler `(***)`
+2. Then the `.then` handler is called `(**)`, which in turn creates a new promise (resolved with `2` value).
+3. The next `then` `(***)` gets the result of the previous one, processes it (doubles) and passes the next handler.
 4. ...and so on.
 
 As the result is passed along the chain of handlers, we can see a sequence of `alert` calls: `1` -> `2` -> `4`.
 
 ![](promise-then-chain.svg)
 
-The whole thing works, because a call to `promise.then` returns a promise, so that we can call the next `.then` on it.
+The whole thing works, because every call to a `.then` returns a new promise, so that we can call the next `.then` on it.
 
 When a handler returns a value, it becomes the result of that promise, so the next `.then` is called with it.
 

diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md
@@ -58,31 +58,50 @@ So we can't use `event.preventDefault()` there -- it's just too late, there woul
 
 These events occur on cutting/copying/pasting a value.
 
-They belong to [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) class and provide access to the data that is copied/pasted.
+They belong to [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) class and provide access to the data that is cut/copied/pasted.
 
 We also can use `event.preventDefault()` to abort the action, then nothing gets copied/pasted.
 
-For instance, the code below prevents all such events and shows what we are trying to cut/copy/paste:
+For instance, the code below prevents all `cut/copy/paste` events and shows the text we're trying to cut/copy/paste:
 
 ```html autorun height=40 run
 <input type="text" id="input">
 <script>
-  input.oncut = input.oncopy = input.onpaste = function(event) {
-    alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
-    return false;
+  input.onpaste = function(event) {
+    alert("paste: " + event.clipboardData.getData('text/plain'));
+    event.preventDefault();
+  };
+
+  input.oncut = input.oncopy = function(event) {
+    alert(event.type + '-' + document.getSelection());
+    event.preventDefault();
   };
 </script>
 ```
 
-Please note, that it's possible to copy/paste not just text, but everything. For instance, we can copy a file in the OS file manager, and paste it.
+Please note: inside `cut` and `copy` event handlers a call to  `event.clipboardData.getData(...)` returns an empty string. That's because technically the data isn't in the clipboard yet. If we use `event.preventDefault()` it won't be copied at all.
 
-That's because `clipboardData` implements `DataTransfer` interface, commonly used for drag'n'drop and copy/pasting. It's bit beyond our scope now, but you can find its methods [in the specification](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).
+So the example above uses `document.getSelection()` to get the selected text. You can find more details about document selection in the article <info:selection-range>.
 
-```warn header="ClipboardAPI: user safety restrictions"
-The clipboard is a "global" OS-level thing. So most browsers allow read/write access to the clipboard only in the scope of certain user actions for the safety, e.g. in `onclick` event handlers.
+It's possible to copy/paste not just text, but everything. For instance, we can copy a file in the OS file manager, and paste it.
 
-Also it's forbidden to generate "custom" clipboard events with `dispatchEvent` in all browsers except Firefox.
-```
+That's because `clipboardData` implements `DataTransfer` interface, commonly used for drag'n'drop and copy/pasting. It's bit beyond our scope now, but you can find its methods in the [DataTransfer specification](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).
+
+Also, there's an additional asynchronous API of accessing the clipboard: `navigator.clipboard`. More about it in the specification [Clipboard API and events](https://www.w3.org/TR/clipboard-apis/), [not supported by Firefox](https://caniuse.com/async-clipboard).
+
+### Safety restrictions
+
+The clipboard is a "global" OS-level thing. A user may switch between various applications, copy/paste different things, and a browser page shouldn't see all that.
+
+So most browsers allow seamless read/write access to the clipboard only in the scope of certain user actions, such as copying/pasting etc.
+
+It's forbidden to generate "custom" clipboard events with `dispatchEvent` in all browsers except Firefox. And even if we manage to dispatch such event, the specification clearly states that such "syntetic" events must not provide access to the clipboard.
+
+Even if someone decides to save `event.clipboardData` in an event handler, and then access it later -- it won't work.
+
+To reiterate, [event.clipboardData](https://www.w3.org/TR/clipboard-apis/#clipboardevent-clipboarddata) works solely in the context of user-initiated event handlers.
+
+On the other hand, [navigator.clipboard](https://www.w3.org/TR/clipboard-apis/#h-navigator-clipboard) is the more recent API, meant for use in any context. It asks for user permission, if needed. Not supported in Firefox.
 
 ## Summary
 
@@ -92,4 +111,4 @@ Data change events:
 |---------|----------|-------------|
 | `change`| A value was changed. | For text inputs triggers on focus loss. |
 | `input` | For text inputs on every change. | Triggers immediately unlike `change`. |
-| `cut/copy/paste` | Cut/copy/paste actions. | The action can be prevented. The `event.clipboardData` property gives read/write access to the clipboard. |
+| `cut/copy/paste` | Cut/copy/paste actions. | The action can be prevented. The `event.clipboardData` property gives access to the clipboard. All browsers except Firefox also support `navigator.clipboard`. |
diff --git a/2-ui/5-loading/02-script-async-defer/article.md b/2-ui/5-loading/02-script-async-defer/article.md
@@ -193,7 +193,7 @@ In practice, `defer` is used for scripts that need the whole DOM and/or their re
 And  `async` is used for independent scripts, like counters or ads. And their relative execution order does not matter.
 
 ```warn header="Page without scripts should be usable"
-Please note: if you're using `defer` or `async`, then user will see the the page *before* the script loads.
+Please note: if you're using `defer` or `async`, then user will see the page *before* the script loads.
 
 In such case, some graphical components are probably not initialized yet.
 

diff --git a/4-binary/02-text-decoder/article.md b/4-binary/02-text-decoder/article.md
@@ -2,7 +2,7 @@
 
 What if the binary data is actually a string? For instance, we received a file with textual data.
 
-The build-in [TextDecoder](https://encoding.spec.whatwg.org/#interface-textdecoder) object allows to read the value into an actual JavaScript string, given the buffer and the encoding.
+The built-in [TextDecoder](https://encoding.spec.whatwg.org/#interface-textdecoder) object allows one to read the value into an actual JavaScript string, given the buffer and the encoding.
 
 We first need to create it:
 ```js