diff --git a/1-js/01-getting-started/2-code-editors/article.md b/1-js/01-getting-started/2-code-editors/article.md
index d36561bc6..6532e54a3 100644
--- a/1-js/01-getting-started/2-code-editors/article.md
+++ b/1-js/01-getting-started/2-code-editors/article.md
@@ -12,14 +12,12 @@ An IDE loads the project (which can be many files), allows navigation between fi
 
 If you haven't selected an IDE yet, consider the following options:
 
-- [WebStorm](http://www.jetbrains.com/webstorm/) for frontend development. The same company offers other editors for other languages (paid).
-- [Netbeans](http://netbeans.org/) (free).
+- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free).
+- [WebStorm](http://www.jetbrains.com/webstorm/) (cross-platform, paid).
 
-All of these IDEs are cross-platform.
+For Windows, there's also "Visual Studio", not to be confused with "Visual Studio Code". "Visual Studio" is a paid and mighty Windows-only editor, well-suited for the .NET platform. It's also good at JavaScript. There's also a free version [Visual Studio Community](https://www.visualstudio.com/vs/community/).
 
-For Windows, there's also "Visual Studio", not to be confused with "Visual Studio Code." "Visual Studio" is a paid and mighty Windows-only editor, well-suited for the .NET platform. A free version of it is called [Visual Studio Community](https://www.visualstudio.com/vs/community/).
-
-Many IDEs are paid but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose the best one for you.
+Many IDEs are paid, but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose the best one for you.
 
 ## Lightweight editors
 
@@ -33,21 +31,11 @@ In practice, lightweight editors may have a lot of plugins including directory-l
 
 The following options deserve your attention:
 
-- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free) also has many IDE-like features.
 - [Atom](https://atom.io/) (cross-platform, free).
 - [Sublime Text](http://www.sublimetext.com) (cross-platform, shareware).
 - [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
 - [Vim](http://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them.
 
-## My favorites
-
-The personal preference of the author is to have both an IDE for projects and a lightweight editor for quick and easy file editing.
-
-I'm using:
-
-- As an IDE for JS -- [WebStorm](http://www.jetbrains.com/webstorm/) (I switch to one of the other JetBrains offerings when using other languages)
-- As a lightweight editor -- [Sublime Text](http://www.sublimetext.com) or [Atom](https://atom.io/).
-
 ## Let's not argue
 
 The editors in the lists above are those that either I or my friends whom I consider good developers have been using for a long time and are happy with.
diff --git a/1-js/04-object-basics/03-symbol/article.md b/1-js/04-object-basics/03-symbol/article.md
index 8323d6643..b3dfe9e14 100644
--- a/1-js/04-object-basics/03-symbol/article.md
+++ b/1-js/04-object-basics/03-symbol/article.md
@@ -16,7 +16,7 @@ A value of this type can be created using `Symbol()`:
 let id = Symbol();
 ```
 
-We can also give symbol a description (also called a symbol name), mostly useful for debugging purposes:
+Upon creation, we can give symbol a description (also called a symbol name), mostly useful for debugging purposes:
 
 ```js run
 // id is a symbol with the description "id"
@@ -74,7 +74,7 @@ alert(id.description); // id
 
 Symbols allow us to create "hidden" properties of an object, that no other part of code can occasionally access or overwrite.
 
-For instance, if we want to store an "identifier" for the object `user`, we can use a symbol as a key for it:
+For instance, if we'd like to add an "identifier" to the object `user`, we can use a symbol as a key for it:
 
 ```js run
 let user = { name: "John" };
@@ -88,7 +88,7 @@ What's the benefit of using `Symbol("id")` over a string `"id"`?
 
 Let's make the example a bit deeper to see that.
 
-Imagine that another script wants to have its own "id" property inside `user`, for its own purposes. That may be another JavaScript library, so the scripts are completely unaware of each other.
+Imagine that another script wants to have its own identifier inside `user`, for its own purposes. That may be another JavaScript library, so thes scripts are completely unaware of each other.
 
 Then that script can create its own `Symbol("id")`, like this:
 
@@ -99,9 +99,9 @@ let id = Symbol("id");
 user[id] = "Their id value";
 ```
 
-There will be no conflict, because symbols are always different, even if they have the same name.
+There will be no conflict between our and their identifiers, because symbols are always different, even if they have the same name.
 
-Now note that if we used a string `"id"` instead of a symbol for the same purpose, then there *would* be a conflict:
+...But if we used a string `"id"` instead of a symbol for the same purpose, then there *would* be a conflict:
 
 ```js run
 let user = { name: "John" };
@@ -117,7 +117,7 @@ user.id = "Their id value"
 
 ### Symbols in a literal
 
-If we want to use a symbol in an object literal, we need square brackets.
+If we want to use a symbol in an object literal `{...}`, we need square brackets around it.
 
 Like this:
 
@@ -155,7 +155,7 @@ for (let key in user) alert(key); // name, age (no symbols)
 alert( "Direct: " + user[id] );
 ```
 
-That's a part of the general "hiding" concept. If another script or a library loops over our object, it won't unexpectedly access a symbolic property.
+`Object.keys(user)` also ignores them. That's a part of the general "hiding symbolic properties" principle. If another script or a library loops over our object, it won't unexpectedly access a symbolic property.
 
 In contrast, [Object.assign](mdn:js/Object/assign) copies both string and symbol properties:
 
@@ -190,13 +190,13 @@ alert( obj[0] ); // test (same property)
 
 ## Global symbols
 
-As we've seen, usually all symbols are different, even if they have the same names. But sometimes we want same-named symbols to be same entities.
+As we've seen, usually all symbols are different, even if they have the same name. But sometimes we want same-named symbols to be same entities.
 
 For instance, different parts of our application want to access symbol `"id"` meaning exactly the same property.
 
 To achieve that, there exists a *global symbol registry*. We can create symbols in it and access them later, and it guarantees that repeated accesses by the same name return exactly the same symbol.
 
-In order to create or read a symbol in the registry, use `Symbol.for(key)`.
+In order to read (create if absent) a symbol from the registry, use `Symbol.for(key)`.
 
 That call checks the global registry, and if there's a symbol described as `key`, then returns it, otherwise creates a new symbol `Symbol(key)` and stores it in the registry by the given `key`.
 
@@ -206,7 +206,7 @@ For instance:
 // read from the global registry
 let id = Symbol.for("id"); // if the symbol did not exist, it is created
 
-// read it again
+// read it again (maybe from another part of the code)
 let idAgain = Symbol.for("id");
 
 // the same symbol
@@ -266,14 +266,14 @@ Other symbols will also become familiar when we study the corresponding language
 
 `Symbol` is a primitive type for unique identifiers.
 
-Symbols are created with `Symbol()` call with an optional description.
+Symbols are created with `Symbol()` call with an optional description (name).
 
-Symbols are always different values, even if they have the same name. If we want same-named symbols to be equal, then we should use the global registry: `Symbol.for(key)` returns (creates if needed) a global symbol with `key` as the name. Multiple calls of `Symbol.for` return exactly the same symbol.
+Symbols are always different values, even if they have the same name. If we want same-named symbols to be equal, then we should use the global registry: `Symbol.for(key)` returns (creates if needed) a global symbol with `key` as the name. Multiple calls of `Symbol.for` with the same `key` return exactly the same symbol.
 
 Symbols have two main use cases:
 
 1. "Hidden" object properties.
-    If we want to add a property into an object that "belongs" to another script or a library, we can create a symbol and use it as a property key. A symbolic property does not appear in `for..in`, so it won't be occasionally listed. Also it won't be accessed directly, because another script does not have our symbol, so it will not occasionally intervene into its actions.
+    If we want to add a property into an object that "belongs" to another script or a library, we can create a symbol and use it as a property key. A symbolic property does not appear in `for..in`, so it won't be occasionally processed together with other properties. Also it won't be accessed directly, because another script does not have our symbol. So the property will be protected from occasional use or overwrite.
 
     So we can "covertly" hide something into objects that we need, but others should not see, using symbolic properties.
 
diff --git a/1-js/05-data-types/03-string/2-check-spam/task.md b/1-js/05-data-types/03-string/2-check-spam/task.md
index 3e7220951..98b5dd8a0 100644
--- a/1-js/05-data-types/03-string/2-check-spam/task.md
+++ b/1-js/05-data-types/03-string/2-check-spam/task.md
@@ -4,7 +4,7 @@ importance: 5
 
 # Check for spam
 
-Write a function `checkSpam(str)` that returns `true` if `str` contains 'viagra' or 'XXX', otherwise false.
+Write a function `checkSpam(str)` that returns `true` if `str` contains 'viagra' or 'XXX', otherwise `false`.
 
 The function must be case-insensitive:
 
diff --git a/1-js/05-data-types/04-array/2-create-array/task.md b/1-js/05-data-types/04-array/2-create-array/task.md
index 3e9300793..16d14071f 100644
--- a/1-js/05-data-types/04-array/2-create-array/task.md
+++ b/1-js/05-data-types/04-array/2-create-array/task.md
@@ -16,7 +16,7 @@ The array in the process:
 
 ```js no-beautify
 Jazz, Blues
-Jazz, Bues, Rock-n-Roll
+Jazz, Blues, Rock-n-Roll
 Jazz, Classics, Rock-n-Roll
 Classics, Rock-n-Roll
 Rap, Reggae, Classics, Rock-n-Roll
diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md
index 2d6c225c9..c91a9e233 100644
--- a/1-js/05-data-types/04-array/article.md
+++ b/1-js/05-data-types/04-array/article.md
@@ -453,7 +453,7 @@ We can use an array as a deque with the following operations:
 - `push(...items)` adds `items` to the end.
 - `pop()` removes the element from the end and returns it.
 - `shift()` removes the element from the beginning and returns it.
-- `unshift(...items)` adds items to the beginning.
+- `unshift(...items)` adds `items` to the beginning.
 
 To loop over the elements of the array:
   - `for (let i=0; i<arr.length; i++)` -- works fastest, old-browser-compatible.
diff --git a/1-js/05-data-types/07-map-set-weakmap-weakset/article.md b/1-js/05-data-types/07-map-set-weakmap-weakset/article.md
index 034ad22c3..47658833f 100644
--- a/1-js/05-data-types/07-map-set-weakmap-weakset/article.md
+++ b/1-js/05-data-types/07-map-set-weakmap-weakset/article.md
@@ -58,7 +58,24 @@ 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 it would be difficult to replace the `Map` with a regular `Object` in the example above.
 
-In the old times, before `Map` existed, people added unique identifiers to objects for that:
+Let's try:
+
+```js run
+let john = { name: "John" };
+
+let visitsCountObj = {}; // try to use an object
+
+visitsCountObj[john] = 123; // try to use john object as the key
+
+*!*
+// That's what got written!
+alert( visitsCountObj["[object Object]"] ); // 123
+*/!*
+```
+
+As `john` is an object, it got converted to the key string `"[object Object]"`. All objects without a special conversion handling are converted to such string, so they'll all mess up.
+
+In the old times, before `Map` existed, people used to add unique identifiers to objects for that:
 
 ```js run
 // we add the id field
@@ -159,7 +176,7 @@ The iteration goes in the same order as the values were inserted. `Map` preserve
 Besides that, `Map` has a built-in `forEach` method, similar to `Array`:
 
 ```js
-// runs the function for each (key, value) pair 
+// runs the function for each (key, value) pair
 recipeMap.forEach( (value, key, map) => {
   alert(`${key}: ${value}`); // cucumber: 500 etc
 });
@@ -172,7 +189,7 @@ A `Set` is a collection of values, where each value may occur only once.
 
 Its main methods are:
 
-- `new Set(iterable)` -- creates the set, optionally from an array of values (any iterable will do).
+- `new Set(iterable)` -- creates the set, and if an `iterable` object is provided (usually an array), copies values from it into the set.
 - `set.add(value)` -- adds a value, returns the set itself.
 - `set.delete(value)` -- removes the value, returns `true` if `value` existed at the moment of the call, otherwise `false`.
 - `set.has(value)` -- returns `true` if the value exists in the set, otherwise `false`.
@@ -222,9 +239,9 @@ set.forEach((value, valueAgain, set) => {
 });
 ```
 
-Note the funny thing. The `forEach` function in the `Set` has 3 arguments: a value, then *again a value*, and then the target object. Indeed, the same value appears in the arguments twice.
+Note the funny thing. The callback function passed in `forEach` has 3 arguments: a value, then *again a value*, and then the target object. Indeed, the same value appears in the arguments twice.
 
-That's for compatibility with `Map` where `forEach` has three arguments. Looks a bit strange, for sure. But may help to replace `Map` with `Set` in certain cases with ease, and vice versa.
+That's for compatibility with `Map` where the callback passed `forEach` has three arguments. Looks a bit strange, for sure. But may help to replace `Map` with `Set` in certain cases with ease, and vice versa.
 
 The same methods `Map` has for iterators are also supported:
 
diff --git a/1-js/05-data-types/08-keys-values-entries/article.md b/1-js/05-data-types/08-keys-values-entries/article.md
index 66ca3ca92..3780b33e5 100644
--- a/1-js/05-data-types/08-keys-values-entries/article.md
+++ b/1-js/05-data-types/08-keys-values-entries/article.md
@@ -1,11 +1,11 @@
 
 # Object.keys, values, entries
 
-Let's step away from the individual data structures and talk about the iterations over them. 
+Let's step away from the individual data structures and talk about the iterations over them.
 
 In the previous chapter we saw methods `map.keys()`, `map.values()`, `map.entries()`.
 
-These methods are generic, there is a common agreement to use them for data structures. If we ever create a data structure of our own, we should implement them too. 
+These methods are generic, there is a common agreement to use them for data structures. If we ever create a data structure of our own, we should implement them too.
 
 They are supported for:
 
@@ -63,8 +63,93 @@ for (let value of Object.values(user)) {
 }
 ```
 
-## Object.keys/values/entries ignore symbolic properties
-
+```warn header="Object.keys/values/entries ignore symbolic properties"
 Just like a `for..in` loop, these methods ignore properties that use `Symbol(...)` as keys.
 
-Usually that's convenient. But if we want symbolic keys too, then there's a separate method [Object.getOwnPropertySymbols](mdn:js/Object/getOwnPropertySymbols) that returns an array of only symbolic keys. Also, the method [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) returns *all* keys.
+Usually that's convenient. But if we want symbolic keys too, then there's a separate method [Object.getOwnPropertySymbols](mdn:js/Object/getOwnPropertySymbols) that returns an array of only symbolic keys. Also, there exist a method [Reflect.ownKeys(obj)](mdn:js/Reflect/ownKeys) that returns *all* keys.
+```
+
+## Object.fromEntries to transform objects
+
+Sometimes we need to perform a transformation of an object to `Map` and back.
+
+We already have `new Map(Object.entries(obj))` to make a `Map` from `obj`.
+
+The syntax of `Object.fromEntries` does the reverse. Given an array of `[key, value]` pairs, it creates an object:
+
+```js run
+let prices = Object.fromEntries([
+  ['banana', 1],
+  ['orange', 2],
+  ['meat', 4]
+]);
+
+// now prices = { banana: 1, orange: 2, meat: 4 }
+
+alert(prices.orange); // 2
+```
+
+Let's see practical applications.
+
+For example, we'd like to create a new object with double prices from the existing one.
+
+For arrays, we have `.map` method that allows to transform an array, but nothing like that for objects.
+
+So we can use a loop:
+
+```js run
+let prices = {
+  banana: 1,
+  orange: 2,
+  meat: 4,
+};
+
+let doublePrices = {};
+for(let [product, price] of Object.entries(prices)) {
+  doublePrices[product] = price * 2;
+}
+
+alert(doublePrices.meat); // 8
+```
+
+...Or we can represent the object as an `Array` using `Object.entries`, then perform the operations with `map` (and potentially other array methods), and then go back using `Object.fromEntries`.
+
+Let's do it for our object:
+
+```js run
+let prices = {
+  banana: 1,
+  orange: 2,
+  meat: 4,
+};
+
+*!*
+let doublePrices = Object.fromEntries(
+  // convert to array, map, and then fromEntries gives back the object
+  Object.entries(prices).map(([key, value]) => [key, value * 2])
+);
+*/!*
+
+alert(doublePrices.meat); // 8
+```   
+
+It may look difficult from the first sight, but becomes easy to understand after you use it once or twice.
+
+We also can use `fromEntries` to get an object from `Map`.
+
+E.g. we have a `Map` of prices, but we need to pass it to a 3rd-party code that expects an object.
+
+Here we go:
+
+```js run
+let map = new Map();
+map.set('banana', 1);
+map.set('orange', 2);
+map.set('meat', 4);
+
+let obj = Object.fromEntries(map);
+
+// now obj = { banana: 1, orange: 2, meat: 4 }
+
+alert(obj.orange); // 2
+```
diff --git a/1-js/06-advanced-functions/01-recursion/01-sum-to/solution.md b/1-js/06-advanced-functions/01-recursion/01-sum-to/solution.md
index 237b9ef9e..3a281ef3f 100644
--- a/1-js/06-advanced-functions/01-recursion/01-sum-to/solution.md
+++ b/1-js/06-advanced-functions/01-recursion/01-sum-to/solution.md
@@ -37,4 +37,4 @@ P.S. Naturally, the formula is the fastest solution. It uses only 3 operations f
 
 The loop variant is the second in terms of speed. In both the recursive and the loop variant we sum the same numbers. But the recursion involves nested calls and execution stack management. That also takes resources, so it's slower.
 
-P.P.S. The standard describes a "tail call" optimization: if the recursive call is the very last one in the function (like in `sumTo` above), then the outer function will not need to resume the execution and we don't need to remember its execution context. In that case `sumTo(100000)` is countable. But if your JavaScript engine does not support it, there will be an error: maximum stack size exceeded, because there's usually a limitation on the total stack size.
+P.P.S. Some engines support the "tail call" optimization: if a recursive call is the very last one in the function (like in `sumTo` above), then the outer function will not need to resume the execution, so the engine doesn't need to remember its execution context. That removes the burden on memory, so counting `sumTo(100000)` becomes possible. But if the JavaScript engine does not support tail call optimization (most of them don't), there will be an error: maximum stack size exceeded, because there's usually a limitation on the total stack size.
diff --git a/1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/solution.md b/1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/solution.md
index a9ba0baf5..4357ff208 100644
--- a/1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/solution.md
+++ b/1-js/06-advanced-functions/01-recursion/05-output-single-linked-list-reverse/solution.md
@@ -37,7 +37,7 @@ The loop variant is also a little bit more complicated then the direct output.
 
 There is no way to get the last value in our `list`. We also can't "go back".
 
-So what we can do is to first go through the items in the direct order and rememeber them in an array, and then output what we remembered in the reverse order:
+So what we can do is to first go through the items in the direct order and remember them in an array, and then output what we remembered in the reverse order:
 
 ```js run
 let list = {
diff --git a/1-js/06-advanced-functions/01-recursion/article.md b/1-js/06-advanced-functions/01-recursion/article.md
index 735c75bf3..214de18c2 100644
--- a/1-js/06-advanced-functions/01-recursion/article.md
+++ b/1-js/06-advanced-functions/01-recursion/article.md
@@ -85,7 +85,7 @@ So, the recursion reduces a function call to a simpler one, and then -- to even
 ````smart header="Recursion is usually shorter"
 A recursive solution is usually shorter than an iterative one.
 
-Here we can rewrite the same using the ternary `?` operator instead of `if` to make `pow(x, n)` more terse and still very readable:
+Here we can rewrite the same using the conditional operator `?` instead of `if` to make `pow(x, n)` more terse and still very readable:
 
 ```js run
 function pow(x, n) {
@@ -100,11 +100,11 @@ The maximal recursion depth is limited by JavaScript engine. We can make sure ab
 
 That limits the application of recursion, but it still remains very wide. There are many tasks where recursive way of thinking gives simpler code, easier to maintain.
 
-## The execution stack
+## The execution context and stack
 
 Now let's examine how recursive calls work. For that we'll look under the hood of functions.
 
-The information about a function run is stored in its *execution context*.
+The information about the process of execution of a running function is stored in its *execution context*.
 
 The [execution context](https://tc39.github.io/ecma262/#sec-execution-contexts) is an internal data structure that contains details about the execution of a function: where the control flow is now, the current variables, the value of `this` (we don't use it here) and few other internal details.
 
@@ -416,7 +416,7 @@ let arr = [obj1, obj2, obj3];
 
 ...But there's a problem with arrays. The "delete element" and "insert element" operations are expensive. For instance, `arr.unshift(obj)` operation has to renumber all elements to make room for a new `obj`, and if the array is big, it takes time. Same with `arr.shift()`.
 
-The only structural modifications that do not require mass-renumbering are those that operate with the end of array: `arr.push/pop`. So an array can be quite slow for big queues.
+The only structural modifications that do not require mass-renumbering are those that operate with the end of array: `arr.push/pop`. So an array can be quite slow for big queues, when we have to work with the beginning.
 
 Alternatively, if we really need fast insertion/deletion, we can choose another data structure called a [linked list](https://en.wikipedia.org/wiki/Linked_list).
 
@@ -506,14 +506,17 @@ Naturally, lists are not always better than arrays. Otherwise everyone would use
 
 The main drawback is that we can't easily access an element by its number. In an array that's easy: `arr[n]` is a direct reference. But in the list we need to start from the first item and go `next` `N` times to get the Nth element.
 
-...But we don't always need such operations. For instance, when we need a queue or even a [deque](https://en.wikipedia.org/wiki/Double-ended_queue) -- the ordered structure that must allow very fast adding/removing elements from both ends.
+...But we don't always need such operations. For instance, when we need a queue or even a [deque](https://en.wikipedia.org/wiki/Double-ended_queue) -- the ordered structure that must allow very fast adding/removing elements from both ends, but access to its middle is not needed.
 
-Sometimes it's worth to add another variable named `tail` to track the last element of the list (and update it when adding/removing elements from the end). For large sets of elements the speed difference versus arrays is huge.
+Lists can be enhanced:
+- We can add property `prev` in addition to `next` to reference the previous element, to move back easily.
+- We can also add a variable named `tail` referencing the last element of the list (and update it when adding/removing elements from the end).
+- ...The data structure may vary according to our needs.
 
 ## Summary
 
 Terms:
-- *Recursion*  is a programming term that means a "self-calling" function. Such functions can be used to solve certain tasks in elegant ways.
+- *Recursion*  is a programming term that means calling a function from itself. Recursive functions can be used to solve tasks in elegant ways.
 
     When a function calls itself, that's called a *recursion step*. The *basis* of recursion is function arguments that make the task so simple that the function does not make further calls.
 
diff --git a/1-js/06-advanced-functions/04-var/article.md b/1-js/06-advanced-functions/04-var/article.md
index 0a3666641..dfab568d2 100644
--- a/1-js/06-advanced-functions/04-var/article.md
+++ b/1-js/06-advanced-functions/04-var/article.md
@@ -35,7 +35,7 @@ alert(phrase); // Error, phrase is not defined
 
 For instance:
 
-```js
+```js run
 if (true) {
   var test = true; // use "var" instead of "let"
 }
@@ -61,7 +61,7 @@ alert(i); // 10, "i" is visible after loop, it's a global variable
 
 If a code block is inside a function, then `var` becomes a function-level variable:
 
-```js
+```js run
 function sayHi() {
   if (true) {
     var phrase = "Hello";
@@ -71,7 +71,7 @@ function sayHi() {
 }
 
 sayHi();
-alert(phrase); // Error: phrase is not defined
+alert(phrase); // Error: phrase is not defined (Check the Developer Console)
 ```
 
 As we can see, `var` pierces through `if`, `for` or other code blocks. That's because a long time ago in JavaScript blocks had no Lexical Environments. And `var` is a remnant of that.
@@ -84,7 +84,7 @@ In other words, `var` variables are defined from the beginning of the function,
 
 So this code:
 
-```js
+```js run
 function sayHi() {
   phrase = "Hello";
 
@@ -94,11 +94,12 @@ function sayHi() {
   var phrase;
 */!*
 }
+sayHi();
 ```
 
 ...Is technically the same as this (moved `var phrase` above):
 
-```js
+```js run
 function sayHi() {
 *!*
   var phrase;
@@ -108,11 +109,12 @@ function sayHi() {
 
   alert(phrase);
 }
+sayHi();
 ```
 
 ...Or even as this (remember, code blocks are ignored):
 
-```js
+```js run
 function sayHi() {
   phrase = "Hello"; // (*)
 
@@ -124,6 +126,7 @@ function sayHi() {
 
   alert(phrase);
 }
+sayHi();
 ```
 
 People also call such behavior "hoisting" (raising), because all `var` are "hoisted" (raised) to the top of the function.
diff --git a/1-js/06-advanced-functions/05-global-object/article.md b/1-js/06-advanced-functions/05-global-object/article.md
index da4adc2b6..742132aae 100644
--- a/1-js/06-advanced-functions/05-global-object/article.md
+++ b/1-js/06-advanced-functions/05-global-object/article.md
@@ -1,11 +1,13 @@
 
 # Global object
 
-The global object provides variables and functions that are available anywhere. Mostly, the ones that are built into the language or the host environment.
+The global object provides variables and functions that are available anywhere. Mostly, the ones that are built into the language or the environment.
 
-In a browser it is named "window", for Node.js it is "global", for other environments it may have another name.
+In a browser it is named `window`, for Node.js it is `global`, for other environments it may have another name.
 
-For instance, we can call `alert` as a method of `window`:
+Recently, `globalThis` was added to the language, as a standartized name for a global object, that should be supported across all environments. In some browsers, namely non-Chromium Edge, `globalThis` is not yet supported, but can be easily polyfilled.
+
+All properties of the global object can be accessed directly:
 
 ```js run
 alert("Hello");
@@ -14,142 +16,72 @@ alert("Hello");
 window.alert("Hello");
 ```
 
-We can reference other built-in functions like `Array` as `window.Array` and create our own properties on it.
-
-## Browser: the "window" object
-
-For historical reasons, in-browser `window` object is a bit messed up.
-
-1. It provides the "browser window" functionality, besides playing the role of a global object.
-
-    We can use `window` to access properties and methods, specific to the browser window:
-
-    ```js run
-    alert(window.innerHeight); // shows the browser window height
-
-    window.open('http://google.com'); // opens a new browser window
-    ```
-
-2. Top-level `var` variables and function declarations automatically become properties of `window`.
-
-    For instance:
-    ```js untrusted run no-strict refresh
-    var x = 5;
-
-    alert(window.x); // 5 (var x becomes a property of window)
-
-    window.x = 0;
-
-    alert(x); // 0, variable modified
-    ```
-
-    Please note, that doesn't happen with more modern `let/const` declarations:
-
-    ```js untrusted run no-strict refresh
-    let x = 5;
-
-    alert(window.x); // undefined ("let" doesn't create a window property)
-    ```
-
-3. Also, all scripts share the same global scope, so variables declared in one `<script>` become visible in  another ones:
-
-    ```html run
-    <script>
-      var a = 1;
-      let b = 2;
-    </script>
-
-    <script>
-      alert(a); // 1
-      alert(b); // 2
-    </script>
-    ```
+In a browser, global variables declared with `var` become the property of the global object:
 
-4. And, a minor thing, but still: the value of `this` in the global scope is `window`.
+```js run untrusted refresh
+var gVar = 5;
 
-    ```js untrusted run no-strict refresh
-    alert(this); // window
-    ```
-
-Why was it made like this? At the time of the language creation, the idea to merge multiple aspects into a single `window` object was to "make things simple". But since then many things changed. Tiny scripts became big applications that require proper architecture.
-
-Is it good that different scripts (possibly from different sources) see variables of each other?
-
-No, it's not, because it may lead to naming conflicts: the same variable name can be used in two scripts for different purposes, so they will conflict with each other.
-
-As of now, the multi-purpose `window` is considered a design mistake in the language.
-
-Luckily, there's a "road out of hell", called "JavaScript modules".
-
-If we set `type="module"` attribute on a `<script>` tag, then such script is considered a separate "module" with its own top-level scope (lexical environment), not interfering with `window`.
-
-- In a module, `var x` does not become a property of `window`:
-
-    ```html run
-    <script type="module">
-      var x = 5;
-
-      alert(window.x); // undefined
-    </script>
-    ```
+alert(window.gVar); // 5 (became a property of the global object)
+```
 
-- Two modules that do not see variables of each other:
+Please don't rely on that! This behavior exists for compatibility reasons. Modern scripts use JavaScript modules where such thing doesn't happen. We'll cover them later in the chapter  [](info:modules).
 
-    ```html run
-    <script type="module">
-      let x = 5;
-    </script>
+Also, more modern variable declarations `let` and `const` do not exhibit such behavior at all:
 
-    <script type="module">
-      alert(window.x); // undefined
-      alert(x); // Error: undeclared variable
-    </script>
-    ```
+```js run untrusted refresh
+let gLet = 5;
 
-- And, the last minor thing, the top-level value of `this` in a module is `undefined` (why should it be `window` anyway?):
+alert(window.gLet); // undefined (doesn't become a property of the global object)
+```
 
-    ```html run
-    <script type="module">
-      alert(this); // undefined
-    </script>
-    ```
+If a value is so important that you'd like to make it available globally, write it directly as a property:
 
-**Using `<script type="module">` fixes the design flaw of the language by separating top-level scope from `window`.**
+```js run
+*!*
+// make current user information global, to let all scripts access it
+window.currentUser = {
+  name: "John"
+};
+*/!*
+
+// somewhere else in code
+alert(currentUser.name);  // John
+
+// or, if we have a local variable with the name "value"
+// get it from window explicitly (safe!)
+alert(window.currentUser.name); // John
+```
 
-We'll cover more features of modules later, in the chapter [](info:modules).
+That said, using global variables is generally discouraged. There should be as few global variables as possible. The code design where a function gets "input" variables and produces certain "outcome" is  clearer, less prone to errors and easier to test.
 
-## Valid uses of the global object
+## Using for polyfills
 
-1. Using global variables is generally discouraged. There should be as few global variables as possible, but if we need to make something globally visible, we may want to put it into `window` (or `global` in Node.js).
+We can test the global object for support of modern language features.
 
-    Here we put the information about the current user into a global object, to be accessible from all other scripts:
+For instance, test if a built-in `Promise` object exists (it doesn't in really old browsers):
+```js run
+if (!window.Promise) {
+  alert("Your browser is really old!");
+}
+```
 
-    ```js run
-    // explicitly assign it to `window`
-    window.currentUser = {
-      name: "John",
-      age: 30
-    };
+If there's none (say, we're in an old browser), we can create "polyfills": add functions that are not supported by the environment, but exist in the modern standard.
 
-    // then, elsewhere, in another script
-    alert(window.currentUser.name); // John
-    ```
+```js run
+if (!window.Promise) {
+  window.Promise = ... // custom implementation of the modern language feature
+}
+```
 
-2. We can test the global object for support of modern language features.
+## Summary
 
-    For instance, test if a build-in `Promise` object exists (it doesn't in really old browsers):
-    ```js run
-    if (!window.Promise) {
-      alert("Your browser is really old!");
-    }
-    ```
+- The global object holds variables that should be available everywhere.
 
-3. We can create "polyfills": add functions that are not supported by the environment (say, an old browser), but exist in the modern standard.
+    That includes JavaScript built-ins, such as `Array` and environment-specific values, such as `window.innerHeight` -- the window height in the browser.
+- The global object has a universal name `globalThis`.
 
-    ```js run
-    if (!window.Promise) {
-      window.Promise = ... // custom implementation of the modern language feature
-    }
-    ```
+    ...But more often is referred by "old-school" environment-specific names, such as `window` (browser) and `global` (Node.js). As `globalThis` is a recent proposal, it's not supported in non-Chromium Edge (but can be polyfilled).
+- We should store values in the global object only if they're truly global for our project. And keep their number at minimum.
+- In-browser, unless we're using [modules](info:modules), a global variable declared with `var` becomes a property of the global object.
 
-...And of course, if we're in a browser, using `window` to access browser window features (not as a global object) is completely fine.
+    To make the code easier to understand and more future-proof, we should operate directly on the properties of the global object: `window.x = ...` instead of `var x = ...`.
diff --git a/1-js/06-advanced-functions/07-new-function/article.md b/1-js/06-advanced-functions/07-new-function/article.md
index e0750e321..b36b68af0 100644
--- a/1-js/06-advanced-functions/07-new-function/article.md
+++ b/1-js/06-advanced-functions/07-new-function/article.md
@@ -8,20 +8,20 @@ There's one more way to create a function. It's rarely used, but sometimes there
 The syntax for creating a function:
 
 ```js
-let func = new Function ([arg1[, arg2[, ...argN]],] functionBody)
+let func = new Function ([arg1, arg2, ...argN], functionBody);
 ```
 
-In other words, function parameters (or, more precisely, names for them) go first, and the body is last. All arguments are strings.
+The function is created with the arguments `arg1...argN` and the given `functionBody`.
 
 It's easier to understand by looking at an example. Here's a function with two arguments:
 
 ```js run
-let sum = new Function('a', 'b', 'return a + b'); 
+let sum = new Function('a', 'b', 'return a + b');
 
 alert( sum(1, 2) ); // 3
 ```
 
-If there are no arguments, then there's only a single argument, the function body:
+And here there's a function without arguments, with only the function body:
 
 ```js run
 let sayHi = new Function('alert("Hello")');
@@ -29,7 +29,7 @@ let sayHi = new Function('alert("Hello")');
 sayHi(); // Hello
 ```
 
-The major difference from other ways we've seen is that the function is created literally from a string, that is passed at run time. 
+The major difference from other ways we've seen is that the function is created literally from a string, that is passed at run time.
 
 All previous declarations required us, programmers, to write the function code in the script.
 
@@ -42,7 +42,7 @@ let func = new Function(str);
 func();
 ```
 
-It is used in very specific cases, like when we receive code from a server, or to dynamically compile a function from a template. The need for that usually arises at advanced stages of development.
+It is used in very specific cases, like when we receive code from a server, or to dynamically compile a function from a template, in complex web-applications.
 
 ## Closure
 
@@ -50,6 +50,8 @@ Usually, a function remembers where it was born in the special property `[[Envir
 
 But when a function is created using `new Function`, its `[[Environment]]` references not the current Lexical Environment, but instead the global one.
 
+So, such function doesn't have access to outer variables, only to the global ones.
+
 ```js run
 
 function getFunc() {
@@ -67,7 +69,7 @@ getFunc()(); // error: value is not defined
 
 Compare it with the regular behavior:
 
-```js run 
+```js run
 function getFunc() {
   let value = "test";
 
@@ -87,48 +89,31 @@ Imagine that we must create a function from a string. The code of that function
 
 Our new function needs to interact with the main script.
 
-Perhaps we want it to be able to access outer local variables?
+What if it could access the outer variables?
 
 The problem is that before JavaScript is published to production, it's compressed using a *minifier* -- a special program that shrinks code by removing extra comments, spaces and -- what's important, renames local variables into shorter ones.
 
 For instance, if a function has `let userName`, minifier replaces it `let a` (or another letter if this one is occupied), and does it everywhere. That's usually a safe thing to do, because the variable is local, nothing outside the function can access it. And inside the function, minifier replaces every mention of it. Minifiers are smart, they analyze the code structure, so they don't break anything. They're not just a dumb find-and-replace.
 
-But, if `new Function` could access outer variables, then it would be unable to find `userName`, since this is passed in as a string *after* the code is minified.
-
-**Even if we could access outer lexical environment in `new Function`, we would have problems with minifiers.**
+So if `new Function` had access to outer variables, it would be unable to find renamed  `userName`.
 
-The "special feature" of `new Function` saves us from mistakes.
+**If `new Function` had access to outer variables, it would have problems with minifiers.**
 
-And it enforces better code. If we need to pass something to a function created by `new Function`, we should pass it explicitly as an argument.
-
-Our "sum" function actually does that right:
-
-```js run 
-*!*
-let sum = new Function('a', 'b', 'return a + b');
-*/!*
-
-let a = 1, b = 2;
-
-*!*
-// outer values are passed as arguments
-alert( sum(a, b) ); // 3
-*/!*
-```
+To pass something to a function, created as `new Function`, we should use its arguments.
 
 ## Summary
 
 The syntax:
 
 ```js
-let func = new Function(arg1, arg2, ..., body);
+let func = new Function ([arg1, arg2, ...argN], functionBody);
 ```
 
-For historical reasons, arguments can also be given as a comma-separated list. 
+For historical reasons, arguments can also be given as a comma-separated list.
 
-These three mean the same:
+These three lines mean the same:
 
-```js 
+```js
 new Function('a', 'b', 'return a + b'); // basic syntax
 new Function('a,b', 'return a + b'); // comma-separated
 new Function('a , b', 'return a + b'); // comma-separated with spaces
diff --git a/1-js/06-advanced-functions/11-currying-partials/article.md b/1-js/06-advanced-functions/11-currying-partials/article.md
index 299a0b643..e8a3d7bdf 100644
--- a/1-js/06-advanced-functions/11-currying-partials/article.md
+++ b/1-js/06-advanced-functions/11-currying-partials/article.md
@@ -195,18 +195,18 @@ Now we can easily make a convenience function for current logs:
 
 ```js
 // currentLog will be the partial of log with fixed first argument
-let currentLog = log(new Date());
+let logNow = log(new Date());
 
 // use it
-currentLog("INFO", "message"); // [HH:mm] INFO message
+logNow("INFO", "message"); // [HH:mm] INFO message
 ```
 
 And here's a convenience function for current debug messages:
 
 ```js
-let todayDebug = currentLog("DEBUG");
+let debugNow = logNow("DEBUG");
 
-currentLog("message"); // [HH:mm] DEBUG message
+debugNow("message"); // [HH:mm] DEBUG message
 ```
 
 So:
diff --git a/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.png b/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.png
index b1871dc72..30f4d9128 100644
Binary files a/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.png and b/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.png differ
diff --git a/1-js/09-classes/02-class-inheritance/super-homeobject-wrong@2x.png b/1-js/09-classes/02-class-inheritance/super-homeobject-wrong@2x.png
new file mode 100644
index 000000000..e7fd103f4
Binary files /dev/null and b/1-js/09-classes/02-class-inheritance/super-homeobject-wrong@2x.png differ
diff --git a/1-js/11-async/07-microtask-queue/article.md b/1-js/11-async/07-microtask-queue/article.md
index 820aa3129..0ea6fef4d 100644
--- a/1-js/11-async/07-microtask-queue/article.md
+++ b/1-js/11-async/07-microtask-queue/article.md
@@ -58,7 +58,7 @@ In-browser JavaScript execution flow, as well as Node.js, is based on an *event
 
 "Event loop" is a process when the engine sleeps and waits for events. When they occur - handles them and sleeps again.
 
-Events may come either comes from external sources, like user actions, or just as the end signal of an internal task.
+Events may come either from external sources, like user actions, or just as the end signal of an internal task.
 
 Examples of events:
 - `mousemove`, a user moved their mouse.
diff --git a/1-js/12-generators-iterators/1-generators/article.md b/1-js/12-generators-iterators/1-generators/article.md
index 93a53777d..531d59773 100644
--- a/1-js/12-generators-iterators/1-generators/article.md
+++ b/1-js/12-generators-iterators/1-generators/article.md
@@ -458,7 +458,7 @@ If we don't catch the error there, then, as usual, it falls through to the outer
 
 ## Summary
 
-- Generators are created by generator functions `function*(…) {…}`.
+- Generators are created by generator functions `function* f(…) {…}`.
 - Inside generators (only) there exists a `yield` operator.
 - The outer code and the generator may exchange results via `next/yield` calls.
 
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 0245a5da1..dda967177 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
@@ -130,7 +130,7 @@ That's natural, as it expects to find `Symbol.iterator`, same as `for..of` witho
 
 ## Async generators
 
-As we already know, JavaScript also supprots generators, and they are iterable.
+As we already know, JavaScript also supports generators, and they are iterable.
 
 Let's recall a sequence generator from the chapter [](info:generators). It generates a sequence of values from `start` to `end`:
 
diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md
index 6bf66abbf..789760fcc 100644
--- a/1-js/13-modules/01-modules-intro/article.md
+++ b/1-js/13-modules/01-modules-intro/article.md
@@ -4,7 +4,7 @@
 As our application grows bigger, we want to split it into multiple files, so called 'modules'.
 A module usually contains a class or a library of useful functions.
 
-For a long time, JavaScript existed without a language-level module syntax. That wasn't a problem, because initially scripts were small and simple. So there was no need.
+For a long time, JavaScript existed without a language-level module syntax. That wasn't a problem, because initially scripts were small and simple, so there was no need.
 
 But eventually scripts became more and more complex, so the community invented a variety of ways to organize code into modules, special libraries to load modules on demand.
 
diff --git a/10-misc/01-proxy/01-error-nonexisting/solution.md b/10-misc/01-proxy/01-error-nonexisting/solution.md
new file mode 100644
index 000000000..099664a1d
--- /dev/null
+++ b/10-misc/01-proxy/01-error-nonexisting/solution.md
@@ -0,0 +1,23 @@
+
+```js run
+let user = {
+  name: "John"
+};
+
+function wrap(target) {
+  return new Proxy(target, {
+    get(target, prop, receiver) {
+      if (prop in target) {
+        return Reflect.get(target, prop, receiver);
+      } else {
+        throw new ReferenceError(`Property doesn't exist: "${prop}"`)
+      }
+    }
+  });
+}
+
+user = wrap(user);
+
+alert(user.name); // John
+alert(user.age); // Error: Property doesn't exist
+```
diff --git a/10-misc/01-proxy/01-error-nonexisting/task.md b/10-misc/01-proxy/01-error-nonexisting/task.md
new file mode 100644
index 000000000..0b8b35720
--- /dev/null
+++ b/10-misc/01-proxy/01-error-nonexisting/task.md
@@ -0,0 +1,31 @@
+
+# Error on reading non-existant property
+
+Create a proxy that throws an error for an attempt to read of a non-existant property.
+
+That can help to detect programming mistakes early.
+
+Write a function `wrap(target)` that takes an object `target` and return a proxy instead with that functionality.
+
+That's how it should work:
+
+```js
+let user = {
+  name: "John"
+};
+
+function wrap(target) {
+  return new Proxy(target, {
+*!*
+      /* your code */
+*/!*
+  });
+}
+
+user = wrap(user);
+
+alert(user.name); // John
+*!*
+alert(user.age); // Error: Property doesn't exist
+*/!*
+```
diff --git a/10-misc/01-proxy/02-array-negative/solution.md b/10-misc/01-proxy/02-array-negative/solution.md
new file mode 100644
index 000000000..207205501
--- /dev/null
+++ b/10-misc/01-proxy/02-array-negative/solution.md
@@ -0,0 +1,19 @@
+
+```js run
+let array = [1, 2, 3];
+
+array = new Proxy(array, {
+  get(target, prop, receiver) {
+    if (prop < 0) {
+      // even if we access it like arr[1]
+      // prop is a string, so need to convert it to number
+      prop = +prop + target.length;
+    }
+    return Reflect.get(target, prop, receiver);
+  }
+});
+
+
+alert(array[-1]); // 3
+alert(array[-2]); // 2
+```
diff --git a/10-misc/01-proxy/02-array-negative/task.md b/10-misc/01-proxy/02-array-negative/task.md
new file mode 100644
index 000000000..6663b6f59
--- /dev/null
+++ b/10-misc/01-proxy/02-array-negative/task.md
@@ -0,0 +1,33 @@
+
+# Accessing array[-1]
+
+In some languages, we can access array elements using negative indexes, counted from the end.
+
+Like this:
+
+```js
+let array = [1, 2, 3];
+
+array[-1]; // 3, the last element
+array[-2]; // 2, one step from the end
+array[-3]; // 1, two steps from the end
+```
+
+In other words, `array[-N]` is the same as `array[array.length - N]`.
+
+Create a proxy to implement that behavior.
+
+That's how it should work:
+
+```js
+let array = [1, 2, 3];
+
+array = new Proxy(array, {
+  /* your code */
+});
+
+alert( array[-1] ); // 3
+alert( array[-2] ); // 2
+
+// Other array functionality should be kept "as is"
+```
diff --git a/10-misc/01-proxy/03-observable/solution.md b/10-misc/01-proxy/03-observable/solution.md
new file mode 100644
index 000000000..dcb4f2a79
--- /dev/null
+++ b/10-misc/01-proxy/03-observable/solution.md
@@ -0,0 +1,40 @@
+The solution consists of two parts:
+
+1. Whenever `.observe(handler)` is called, we need to remember the handler somewhere, to be able to call it later. We can store it right in the object, using our symbol as the key.
+2. We need a proxy with `set` trap to call handlers in case of any change.
+
+```js run
+let handlers = Symbol('handlers');
+
+function makeObservable(target) {
+  // 1. Initialize handlers store
+  target[handlers] = [];
+
+  // Store the handler function in array for future calls
+  target.observe = function(handler) {
+    this[handlers].push(handler);
+  };
+
+  // 2. Create a proxy to handle changes
+  return new Proxy(target, {
+    set(target, property, value, receiver) {
+      let success = Reflect.set(...arguments); // forward the operation to object
+      if (success) { // if there were no error while setting the property
+        // call all handlers
+        target[handlers].forEach(handler => handler(property, value));
+      }
+      return success;
+    }
+  });
+}
+
+let user = {};
+
+user = makeObservable(user);
+
+user.observe((key, value) => {
+  alert(`SET ${key}=${value}`);
+});
+
+user.name = "John";
+```
diff --git a/10-misc/01-proxy/03-observable/task.md b/10-misc/01-proxy/03-observable/task.md
new file mode 100644
index 000000000..6220104c8
--- /dev/null
+++ b/10-misc/01-proxy/03-observable/task.md
@@ -0,0 +1,29 @@
+
+# Observable
+
+Create a function `makeObservable(target)` that "makes the object observable" by returning a proxy.
+
+Here's how it should work:
+
+```js run
+function makeObservable(target) {
+  /* your code */
+}
+
+let user = {};
+user = makeObservable(user);
+
+user.observe((key, value) => {
+  alert(`SET ${key}=${value}`);
+});
+
+user.name = "John"; // alerts: SET name=John
+```
+
+In other words, an object returned by `makeObservable` has the method `observe(handler)`.
+
+Whenever a property changes, `handler(key, value)` is called with the name and value o the property.
+
+
+P.S. In this task, please handle only writing to a property. Other operations can be implemented in a similar way.
+P.P.S. You might want to introduce a global variable or a global structure to store handlers. That's fine here. In real life, such function lives in a module, that has its own global scope. 
diff --git a/10-misc/01-proxy/article.md b/10-misc/01-proxy/article.md
new file mode 100644
index 000000000..63b4ca2fe
--- /dev/null
+++ b/10-misc/01-proxy/article.md
@@ -0,0 +1,877 @@
+
+# Proxy and Reflect
+
+A *proxy* wraps another object and intercepts operations, like reading/writing properties and others, optionally handling them on its own, or transparently allowing the object to handle them.
+
+Proxies are used in many libraries and some browser frameworks. We'll see many practical applications in this chapter.
+
+The syntax:
+
+```js
+let proxy = new Proxy(target, handler)
+```
+
+- `target` -- is an object to wrap, can be anything, including functions.
+- `handler` -- an object with "traps": methods that intercept operations., e.g. `get` for reading a property, `set` for writing a property, etc.
+
+For operations on `proxy`, if there's a corresponding trap in `handler`, then it runs, and the proxy has a chance to handle it, otherwise the operation is performed on `target`.
+
+As a starting example, let's create a proxy without any traps:
+
+```js run
+let target = {};
+let proxy = new Proxy(target, {}); // empty handler
+
+proxy.test = 5; // writing to proxy (1)
+alert(target.test); // 5, the property appeared in target!
+
+alert(proxy.test); // 5, we can read it from proxy too (2)
+
+for(let key in proxy) alert(key); // test, iteration works (3)
+```
+
+As there are no traps, all operations on `proxy` are forwarded to `target`.
+
+1. A writing operation `proxy.test=` sets the value on `target`.
+2. A reading operation `proxy.test` returns the value from `target`.
+3. Iteration over `proxy` returns values from `target`.
+
+As we can see, without any traps, `proxy` is a transparent wrapper around `target`.
+
+![](proxy.png)  
+
+The proxy is a special "exotic object". It doesn't have "own" properties. With an empty handler it transparently forwards operations to `target`.
+
+If we want any magic, we should add traps.
+
+There's a list of internal object operations in the [Proxy specification](https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots). A proxy can intercept any of these, we just need to add a handler method.
+
+In the table below:
+- **Internal Method** is the specification-specific name for the operation. For example, `[[Get]]` is the name of the internal, specification-only method of reading a property. The specification describes how this is done at the very lowest level.
+- **Handler Method** is a method name that we should add to proxy `handler` to trap the operation and perform custom actions.
+
+
+| Internal Method | Handler Method | Traps... |
+|-----------------|----------------|-------------|
+| `[[Get]]` | `get` | reading a property |
+| `[[Set]]` | `set` | writing to a property |
+| `[[HasProperty]]` | `has` | `in` operator |
+| `[[Delete]]` | `deleteProperty` | `delete` operator |
+| `[[Call]]` | `apply` | function call |
+| `[[Construct]]` | `construct` | `new` operator |
+| `[[GetPrototypeOf]]` | `getPrototypeOf` | [Object.getPrototypeOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf) |
+| `[[SetPrototypeOf]]` | `setPrototypeOf` | [Object.setPrototypeOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf) |
+| `[[IsExtensible]]` | `isExtensible` | [Object.isExtensible](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible) |
+| `[[PreventExtensions]]` | `preventExtensions` | [Object.preventExtensions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions) |
+| `[[GetOwnProperty]]` | `getOwnPropertyDescriptor` | [Object.getOwnPropertyDescriptor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) |
+| `[[DefineOwnProperty]]` | `defineProperty` | [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty), [Object.defineProperties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties) |
+| `[[OwnPropertyKeys]]` | `ownKeys` | [Object.keys](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys), [Object.getOwnPropertyNames](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames), [Object.getOwnPropertySymbols](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols), iteration keys |
+
+```warn header="Invariants"
+JavaScript enforces some invariants -- conditions that must be fulfilled by internal methods and traps.
+
+Most of them are for return values:
+- `[[Set]]` must return `true` if the value was written successfully, otherwise `false`.
+- `[[Delete]]` must return `true` if the value was deleted successfully, otherwise `false`.
+- ...and so on, we'll see more in examples below.
+
+There are some other invariants, like:
+- `[[GetPrototypeOf]]`, applied to the proxy object must return the same value as `[[GetPrototypeOf]]` applied to the proxy object's target object.
+
+In other words, reading prototype of a `proxy` must always return the prototype of the target object. The `getPrototypeOf` trap may intercept this operation, but it must follow this rule, not do something crazy.
+
+Invariants ensure correct and consistent behavior of language features. The full invariants list is in [the specification](https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots), you probably won't violate them, if not doing something weird.
+```
+
+Let's see how that works on practical examples.
+
+## Default value with "get" trap
+
+The most common traps are for reading/writing properties.
+
+To intercept the reading, the `handler` should have a method `get(target, property, receiver)`.
+
+It triggers when a property is read:
+
+- `target` -- is the target object, the one passed as the first argument to `new Proxy`,
+- `property` -- property name,
+- `receiver` -- if the property is a getter, then `receiver` is the object that's going to be used as `this` in that code. Usually that's the `proxy` object itself (or an object that inherits from it, if we inherit from proxy).
+
+Let's use `get` to implement default values for an object.
+
+For instance, we'd like a numeric array to return `0` for non-existant values instead of `undefined`.
+
+Let's wrap it into a proxy that traps reading and returns the default value if there's no such property:
+
+```js run
+let numbers = [0, 1, 2];
+
+numbers = new Proxy(numbers, {
+  get(target, prop) {
+    if (prop in target) {
+      return target[prop];
+    } else {
+      return 0; // default value
+    }
+  }
+});
+
+*!*
+alert( numbers[1] ); // 1
+alert( numbers[123] ); // 0 (no such value)
+*/!*
+```
+
+The approach is generic. We can use `Proxy` to implement any logic for "default" values.
+
+Imagine, we have a dictionary with phrases along with translations:
+
+```js run
+let dictionary = {
+  'Hello': 'Hola',
+  'Bye': 'Adiós'
+};
+
+alert( dictionary['Hello'] ); // Hola
+alert( dictionary['Welcome'] ); // undefined
+```
+
+Right now, if there's no phrase, reading from `dictionary` returns `undefined`. But in practice, leaving a phrase non-translated is usually better than `undefined`. So let's make a non-translated phrase the default value instead of `undefined`.
+
+To achieve that, we'll wrap `dictionary` in a proxy that intercepts reading operations:
+
+```js run
+let dictionary = {
+  'Hello': 'Hola',
+  'Bye': 'Adiós'
+};
+
+dictionary = new Proxy(dictionary, {
+*!*
+  get(target, phrase) { // intercept reading a property from dictionary
+*/!*
+    if (phrase in target) { // if we have it in the dictionary
+      return target[phrase]; // return the translation
+    } else {
+      // otherwise, return the non-translated phrase
+      return phrase;
+    }
+  }
+});
+
+// Look up arbitrary phrases in the dictionary!
+// At worst, they are not translated.
+alert( dictionary['Hello'] ); // Hola
+*!*
+alert( dictionary['Welcome to Proxy']); // Welcome to Proxy (no translation)
+*/!*
+```
+
+````smart header="Proxy should be used instead of `target` everywhere"
+Please note how the proxy overwrites the variable:
+
+```js
+dictionary = new Proxy(dictionary, ...);
+numbers = new Proxy(numbers, ...);
+```
+
+The proxy should totally replace the target object everywhere. No one should ever reference the target object after it got proxied. Otherwise it's easy to mess up.
+````
+
+## Validation with "set" trap
+
+Now let's intercept writing as well.
+
+Let's say we want a numeric array. If a value of another type is added, there should be an error.
+
+The `set` trap triggers when a property is written: `set(target, property, value, receiver)`
+
+- `target` -- is the target object, the one passed as the first argument to `new Proxy`,
+- `property` -- property name,
+- `value` -- property value,
+- `receiver` -- same as in `get` trap, only matters if the property is a setter.
+
+The `set` trap should return `true` if setting is successful, and `false` otherwise (leads to `TypeError`).
+
+Let's use it to validate new values:
+
+```js run
+let numbers = [];
+
+numbers = new Proxy(numbers, { // (*)
+*!*
+  set(target, prop, val) { // to intercept property writing
+*/!*
+    if (typeof val == 'number') {
+      target[prop] = val;
+      return true;
+    } else {
+      return false;
+    }
+  }
+});
+
+numbers.push(1);
+numbers.push(2);
+alert("Length is: " + numbers.length); // 2
+
+*!*
+numbers.push("test"); // TypeError ('set' on proxy returned false)
+*/!*
+
+alert("This line is never reached (error in the line above)");
+```
+
+Please note: the built-in functionality of arrays is still working! The `length` property auto-increases when values are added. Our proxy doesn't break anything.
+
+Also, we don't have to override value-adding array methods like `push` and `unshift`, and so on! Internally, they use `[[Set]]` operation, that's intercepted by the proxy.
+
+So the code is clean and concise.
+
+```warn header="Don't forget to return `true`"
+As said above, there are invariants to be held.
+
+For `set`, it must return `true` for a successful write.
+
+If it returns a falsy value (or doesn't return anything), that triggers `TypeError`.
+```
+
+## Protected properties with "deleteProperty" and "ownKeys"
+
+There's a widespread convention that properties and methods prefixed by an underscore `_` are internal. They shouldn't be accessible from outside the object.
+
+Technically, that's possible though:
+
+```js run
+let user = {
+  name: "John",
+  _password: "secret"
+};
+
+alert(user._password); // secret  
+```
+
+Let's use proxies to prevent any access to properties starting with `_`.
+
+We'll need the traps:
+- `get` to throw an error when reading,
+- `set` to throw an error when writing,
+- `deleteProperty` to throw an error when deleting,
+- `ownKeys` to skip properties starting with `_` when iterating over an object or using `Object.keys()`
+
+Here's the code:
+
+```js run
+let user = {
+  name: "John",
+  _password: "***"
+};
+
+user = new Proxy(user, {
+*!*
+  get(target, prop) {
+*/!*
+    if (prop.startsWith('_')) {
+      throw new Error("Access denied");
+    }
+    let value = target[prop];
+    return (typeof value === 'function') ? value.bind(target) : value; // (*)
+  },
+*!*
+  set(target, prop, val) { // to intercept property writing
+*/!*
+    if (prop.startsWith('_')) {
+      throw new Error("Access denied");
+    } else {
+      target[prop] = val;
+    }
+  },
+*!*
+  deleteProperty(target, prop) { // to intercept property deletion
+*/!*  
+    if (prop.startsWith('_')) {
+      throw new Error("Access denied");
+    } else {
+      delete target[prop];
+      return true;
+    }
+  },
+*!*
+  ownKeys(target) { // to intercept property list
+*/!*
+    return Object.keys(target).filter(key => !key.startsWith('_'));
+  }
+});
+
+// "get" doesn't allow to read _password
+try {
+  alert(user._password); // Error: Access denied
+} catch(e) { alert(e.message); }
+
+// "set" doesn't allow to write _password
+try {
+  user._password = "test"; // Error: Access denied
+} catch(e) { alert(e.message); }
+
+// "deleteProperty" doesn't allow to delete _password
+try {
+  delete user._password; // Error: Access denied
+} catch(e) { alert(e.message); }
+
+// "ownKeys" filters out _password
+for(let key in user) alert(key); // name
+```
+
+Please note the important detail in `get` trap, in the line `(*)`:
+
+```js
+get(target, prop) {
+  // ...
+  let value = target[prop];
+*!*
+  return (typeof value === 'function') ? value.bind(target) : value; // (*)
+*/!*
+}
+```
+
+If an object method is called, such as `user.checkPassword()`, it must be able to access `_password`:
+
+```js
+user = {
+  // ...
+  checkPassword(value) {
+    // object method must be able to read _password
+    return value === this._password;
+  }
+}
+```
+
+Normally, `user.checkPassword()` call gets proxied `user` as `this` (the object before dot becomes `this`), so when it tries to access `this._password`, the property protection kicks in and throws an error. So we bind it to `target` in the line `(*)`. Then all operations from that function directly reference the object, without any property protection.
+
+That solution is not ideal, as the method may pass the unproxied object somewhere else, and then we'll get messed up: where's the original object, and where's the proxied one.
+
+As an object may be proxied multiple times (multiple proxies may add different "tweaks" to the object), weird bugs may follow.
+
+So, for complex objects with methods such proxy shouldn't be used.
+
+```smart header="Private properties of a class"
+Modern JavaScript engines natively support private properties in classes, prefixed with `#`. They are described in the chapter <info:private-protected-properties-methods>. No proxies required.
+
+Such properties have their own issues though. In particular, they are not inherited.
+```
+
+
+## "In range" with "has" trap
+
+Let's say we have a range object:
+
+```js
+let range = {
+  start: 1,
+  end: 10
+};
+```
+
+We'd like to use "in" operator to check that a number is in `range`.
+
+The "has" trap intercepts "in" calls: `has(target, property)`
+
+- `target` -- is the target object, passed as the first argument to `new Proxy`,
+- `property` -- property name
+
+Here's the demo:
+
+```js run
+let range = {
+  start: 1,
+  end: 10
+};
+
+range = new Proxy(range, {
+*!*
+  has(target, prop) {
+*/!*
+    return prop >= target.start && prop <= target.end
+  }
+});
+
+*!*
+alert(5 in range); // true
+alert(50 in range); // false
+*/!*
+```
+
+A nice syntactic sugar, isn't it?
+
+## Wrapping functions: "apply"
+
+We can wrap a proxy around a function as well.
+
+The `apply(target, thisArg, args)` trap handles calling a proxy as function:
+
+- `target` is the target object,
+- `thisArg` is the value of `this`.
+- `args` is a list of arguments.
+
+For example, let's recall `delay(f, ms)` decorator, that we did in the chapter <info:call-apply-decorators>.
+
+In that chapter we did it without proxies. A call to `delay(f, ms)` would return a function that forwards all calls to `f` after `ms` milliseconds.
+
+Here's the function-based implementation:
+
+```js run
+// no proxies, just a function wrapper
+function delay(f, ms) {
+  // return a wrapper that passes the call to f after the timeout
+  return function() { // (*)
+    setTimeout(() => f.apply(this, arguments), ms);
+  };
+}
+
+function sayHi(user) {
+  alert(`Hello, ${user}!`);
+}
+
+// now calls to sayHi will be delayed for 3 seconds
+sayHi = delay(sayHi, 3000);
+
+sayHi("John"); // Hello, John! (after 3 seconds)
+```
+
+As you can see, that mostly works. The wrapper function `(*)` performs the call after the timeout.
+
+But a wrapper function does not forward property read/write operations or anything else. So if we have a property on the original function, we can't access it after wrapping:
+
+```js run
+function delay(f, ms) {
+  return function() {
+    setTimeout(() => f.apply(this, arguments), ms);
+  };
+}
+
+function sayHi(user) {
+  alert(`Hello, ${user}!`);
+}
+
+*!*
+alert(sayHi.length); // 1 (function length is the arguments count)
+*/!*
+
+sayHi = delay(sayHi, 3000);
+
+*!*
+alert(sayHi.length); // 0 (wrapper has no arguments)
+*/!*
+```
+
+
+`Proxy` is much more powerful, as it forwards everything to the target object.
+
+Let's use `Proxy` instead of a wrapping function:
+
+```js run
+function delay(f, ms) {
+  return new Proxy(f, {
+    apply(target, thisArg, args) {
+      setTimeout(() => target.apply(thisArg, args), ms);
+    }
+  });
+}
+
+function sayHi(user) {
+  alert(`Hello, ${user}!`);
+}
+
+sayHi = delay(sayHi, 3000);
+
+*!*
+alert(sayHi.length); // 1 (*) proxy forwards "get length" operation to the target
+*/!*
+
+sayHi("John"); // Hello, John! (after 3 seconds)
+```
+
+The result is the same, but now not only calls, but all operations on the proxy are forwarded to the original function. So `sayHi.length` is returned correctly after the wrapping in the line `(*)`.
+
+We've got a "richer" wrapper.
+
+There exist other traps, but probably you've already got the idea.
+
+## Reflect
+
+The `Reflect` API was designed to work in tandem with `Proxy`.
+
+For every internal object operation that can be trapped, there's a `Reflect` method. It has the same name and arguments as the trap, and can be used to forward the operation to an object.
+
+For example:
+
+```js run
+let user = {
+  name: "John",
+};
+
+user = new Proxy(user, {
+  get(target, prop, receiver) {
+    alert(`GET ${prop}`);
+*!*
+    return Reflect.get(target, prop, receiver); // (1)
+*/!*
+  },
+  set(target, prop, val, receiver) {
+    alert(`SET ${prop} TO ${val}`);
+*!*
+    return Reflect.set(target, prop, val, receiver); // (2)
+*/!*
+  }
+});
+
+let name = user.name; // GET name
+user.name = "Pete"; // SET name TO Pete
+```
+
+- `Reflect.get` gets the property, like `target[prop]` that we used before.
+- `Reflect.set` sets the property, like `target[prop] = value`, and also ensures the correct return value.
+
+In most cases, we can do the same thing without `Reflect`. But we may miss some peculiar aspects.
+
+Consider the following example, it doesn't use `Reflect` and doesn't work right.
+
+We have a proxied user object and inherit from it, then use a getter:
+
+```js run
+let user = {
+  _name: "Guest",
+  get name() {
+    return this._name;
+  }
+};
+
+user = new Proxy(user, {
+  get(target, prop, receiver) {
+    return target[prop]; // (*)
+  }
+});
+
+
+let admin = {
+  __proto__: user,
+  _name: "Admin"
+};
+
+*!*
+// Expected: Admin
+alert(admin.name); // Guest (?!?)
+*/!*
+```
+
+As you can see, the result is incorrect! The `admin.name` is expected to be `"Admin"`, not `"Guest"`! Without the proxy, it would be `"Admin"`, looks like the proxying "broke" our object.
+
+![](proxy-inherit.png)
+
+Why this happens? That's easy to understand if we explore what's going on during the call in the last line of the code.
+
+1. There's no `name` property in `admin`, so `admin.name` call goes to `admin` prototype.
+2. The prototype is the proxy, so its `get` trap intercepts the attempt to read `name`.
+3. In the line `(*)` it returns `target[prop]`, but what is the `target`?
+    - The `target`, the first argument of `get`, is always the object passed to `new Proxy`, the original `user`.
+    - So, `target[prop]` invokes the getter `name` with `this=target=user`.
+    - Hence the result is `"Guest"`.
+
+How to fix it? That's what the `receiver`, the third argument of `get` is for! It holds the correct `this`. We just need to call `Reflect.get` to pass it on.
+
+Here's the correct variant:
+
+```js run
+let user = {
+  _name: "Guest",
+  get name() {
+    return this._name;
+  }
+};
+
+user = new Proxy(user, {
+  get(target, prop, receiver) {
+*!*
+    return Reflect.get(target, prop, receiver); // (*)
+*/!*
+  }
+});
+
+
+let admin = {
+  __proto__: user,
+  _name: "Admin"
+};
+
+*!*
+alert(admin.name); // Admin
+*/!*
+```
+
+Now the `receiver` holding the correct `this` is passed to getter by `Reflect.get` in the line `(*)`, so it works correctly.
+
+We could also write the trap as:
+
+```js
+get(target, prop, receiver) {
+  return Reflect.get(*!*...arguments*/!*);
+}
+```
+
+`Reflect` calls are named exactly the same way as traps and accept the same arguments. They were specifically designed this way.
+
+So, `return Reflect...` provides a safe no-brainer to forward the operation and make sure we don't forget anything related to that.
+
+## Proxy limitations
+
+Proxies are a great way to alter or tweak the behavior of the existing objects, including built-in ones, such as arrays.
+
+Still, it's not perfect. There are limitations.
+
+### Built-in objects: Internal slots
+
+Many built-in objects, for example `Map`, `Set`, `Date`, `Promise` and others make use of so-called "internal slots".
+
+These are like properties, but reserved for internal purposes. Built-in methods access them directly, not via `[[Get]]/[[Set]]` internal methods. So `Proxy` can't intercept that.
+
+Who cares? They are internal anyway!
+
+Well, here's the issue. After such built-in object gets proxied, the proxy doesn't have these internal slots, so built-in methods will fail.
+
+For example:
+
+```js run
+let map = new Map();
+
+let proxy = new Proxy(map, {});
+
+*!*
+proxy.set('test', 1); // Error
+*/!*
+```
+
+An attempt to set a value into a proxied `Map` fails, for the reason related to its [internal implementation](https://tc39.es/ecma262/#sec-map.prototype.set).
+
+Internally, a `Map` stores all data in its `[[MapData]]` internal slot. The proxy doesn't have such slot. The `set` method tries to access `this.[[MapData]]` internal property, but because `this=proxy`, can't find it in `proxy` and just fails.
+
+Fortunately, there's a way to fix it:
+
+```js run
+let map = new Map();
+
+let proxy = new Proxy(map, {
+  get(target, prop, receiver) {
+    let value = Reflect.get(...arguments);
+*!*
+    return typeof value == 'function' ? value.bind(target) : value;
+*/!*
+  }
+});
+
+proxy.set('test', 1);
+alert(proxy.get('test')); // 1 (works!)
+```
+
+Now it works fine, because `get` trap binds function properties, such as `map.set`, to the target object (`map`) itself.
+
+Unlike the previous example, the value of `this` inside `proxy.set(...)` will be not `proxy`, but the original `map`. So when the internal implementation of `set` tries to access `this.[[MapData]]` internal slot, it succeeds.
+
+```smart header="`Array` has no internal slots"
+A notable exception: built-in `Array` doesn't use internal slots. That's for historical reasons, as it appeared so long ago.
+
+So there's no such problem when proxying an array.
+```
+
+### Private fields
+
+The similar thing happens with private class fields.
+
+For example, `getName()` method accesses the private `#name` property and breaks after proxying:
+
+```js run
+class User {
+  #name = "Guest";
+
+  getName() {
+    return this.#name;
+  }
+}
+
+let user = new User();
+
+user = new Proxy(user, {});
+
+*!*
+alert(user.getName()); // Error
+*/!*
+```
+
+The reason is that private fields are implemented using internal slots. JavaScript does not use `[[Get]]/[[Set]]` when accessing them.
+
+In the call `user.getName()` the value of `this` is the proxied user, and it doesn't have the slot with private fields.
+
+Once again, the solution with binding the method makes it work:
+
+```js run
+class User {
+  #name = "Guest";
+
+  getName() {
+    return this.#name;
+  }
+}
+
+let user = new User();
+
+user = new Proxy(user, {
+  get(target, prop, receiver) {
+    let value = Reflect.get(...arguments);
+    return typeof value == 'function' ? value.bind(target) : value;
+  }
+});
+
+alert(user.getName()); // Guest
+```
+
+That said, the solution has drawbacks, explained previously: it exposes the original object to the method, potentially allowing it to be passed further and breaking other proxied functionality.
+
+### Proxy != target
+
+Proxy and the original object are different objects. That's natural, right?
+
+So if we store the original object somewhere, and then proxy it, then things might break:
+
+```js run
+let allUsers = new Set();
+
+class User {
+  constructor(name) {
+    this.name = name;
+    allUsers.add(this);
+  }
+}
+
+let user = new User("John");
+
+alert(allUsers.has(user)); // true
+
+user = new Proxy(user, {});
+
+*!*
+alert(allUsers.has(user)); // false
+*/!*
+```
+
+As we can see, after proxying we can't find `user` in the set `allUsers`, because the proxy is a different object.
+
+```warn header="Proxies can't intercept a strict equality test `===`"
+Proxies can intercept many operators, such as `new` (with `construct`), `in` (with `has`), `delete` (with `deleteProperty`) and so on.
+
+But there's no way to intercept a strict equality test for objects. An object is strictly equal to itself only, and no other value.
+
+So all operations and built-in classes that compare objects for equality will differentiate between the object and the proxy. No transparent replacement here.
+```
+
+
+## Revocable proxies
+
+A *revocable* proxy is a proxy that can be disabled.
+
+Let's say we have a resource, and would like to close access to it any moment.
+
+What we can do is to wrap it into a revocable proxy, without any traps. Such proxy will forward operations to object, and we also get a special method to disable it.
+
+The syntax is:
+
+```js
+let {proxy, revoke} = Proxy.revocable(target, handler)
+```
+
+The call returns an object with the `proxy` and `revoke` function to disable it.
+
+Here's an example:
+
+```js run
+let object = {
+  data: "Valuable data"
+};
+
+let {proxy, revoke} = Proxy.revocable(object, {});
+
+// pass the proxy somewhere instead of object...
+alert(proxy.data); // Valuable data
+
+// later in our code
+revoke();
+
+// the proxy isn't working any more (revoked)
+alert(proxy.data); // Error
+```
+
+A call to `revoke()` removes all internal references to the target object from the proxy, so they are no more connected. The target object can be garbage-collected after that.
+
+We can also store `revoke` in a `WeakMap`, to be able to easily find it by the proxy:
+
+
+```js run
+*!*
+let revokes = new WeakMap();
+*/!*
+
+let object = {
+  data: "Valuable data"
+};
+
+let {proxy, revoke} = Proxy.revocable(object, {});
+
+revokes.set(proxy, revoke);
+
+// ..later in our code..
+revoke = revokes.get(proxy);
+revoke();
+
+alert(proxy.data); // Error (revoked)
+```
+
+The benefit of such approach is that we don't have to carry `revoke` around. We can get it from the map by `proxy` when needeed.
+
+Using `WeakMap` instead of `Map` here, because it should not 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 (we don't need its revoke in that case).
+
+## References
+
+- Specification: [Proxy](https://tc39.es/ecma262/#sec-proxy-object-internal-methods-and-internal-slots).
+- MDN: [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).
+
+## Summary
+
+`Proxy` is a wrapper around an object, that forwards operations to the object, optionally trapping some of them.
+
+It can wrap any kind of object, including classes and functions.
+
+The syntax is:
+
+```js
+let proxy = new Proxy(target, {
+  /* traps */
+});
+```
+
+...Then we should use `proxy` everywhere instead of `target`. A proxy doesn't have its own properties or methods. It traps an operation if the trap is provided or forwards it to `target` object.
+
+We can trap:
+- Reading (`get`), writing (`set`), deleting (`deleteProperty`) a property (even a non-existing one).
+- Calling functions with `new` (`construct` trap) and without `new` (`apply` trap)
+- Many other operations (the full list is at the beginning of the article and in the [docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)).
+
+That allows us to create "virtual" properties and methods, implement default values, observable objects, function decorators and so much more.
+
+We can also wrap an object multiple times in different proxies, decorating it with various aspects of functionality.
+
+The [Reflect](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect) API is designed to complement [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). For any `Proxy` trap, there's a `Reflect` call with same arguments. We should use those to forward calls to target objects.
+
+Proxies have some limitations:
+
+- Built-in objects have "internal slots", access to those can't be proxied. See the workaround above.
+- The same holds true for private class fields, as they are internally implemented using slots. So proxied method calls must have the target object as `this` to access them.
+- Object equality tests `===` can't be intercepted.
+- Performance: benchmarks depend on an engine, but generally accessing a property using a simplest proxy takes a few times longer. In practice that only matters for some "bottleneck" objects though.
diff --git a/10-misc/01-proxy/proxy-inherit.png b/10-misc/01-proxy/proxy-inherit.png
new file mode 100644
index 000000000..84110b6d6
Binary files /dev/null and b/10-misc/01-proxy/proxy-inherit.png differ
diff --git a/10-misc/01-proxy/proxy-inherit@2x.png b/10-misc/01-proxy/proxy-inherit@2x.png
new file mode 100644
index 000000000..bfb71b6a0
Binary files /dev/null and b/10-misc/01-proxy/proxy-inherit@2x.png differ
diff --git a/10-misc/01-proxy/proxy.png b/10-misc/01-proxy/proxy.png
new file mode 100644
index 000000000..97aa07390
Binary files /dev/null and b/10-misc/01-proxy/proxy.png differ
diff --git a/10-misc/01-proxy/proxy@2x.png b/10-misc/01-proxy/proxy@2x.png
new file mode 100644
index 000000000..53b4610c8
Binary files /dev/null and b/10-misc/01-proxy/proxy@2x.png differ
diff --git a/10-misc/02-eval/1-eval-calculator/solution.md b/10-misc/02-eval/1-eval-calculator/solution.md
new file mode 100644
index 000000000..24d40c9b8
--- /dev/null
+++ b/10-misc/02-eval/1-eval-calculator/solution.md
@@ -0,0 +1,11 @@
+Let's use `eval` to calculate the maths expression:
+
+```js demo run
+let expr = prompt("Type an arithmetic expression?", '2*3+2');
+
+alert( eval(expr) );
+```
+
+The user can input any text or code though.
+
+To make things safe, and limit it to arithmetics only, we can check the `expr` using a [regular expression](info:regular-expressions), so that it only may contain digits and operators.
diff --git a/10-misc/02-eval/1-eval-calculator/task.md b/10-misc/02-eval/1-eval-calculator/task.md
new file mode 100644
index 000000000..3ebf7272f
--- /dev/null
+++ b/10-misc/02-eval/1-eval-calculator/task.md
@@ -0,0 +1,11 @@
+importance: 4
+
+---
+
+# Eval-calculator
+
+Create a calculator that prompts for an arithmetic expression and returns its result.
+
+There's no need to check the expression for correctness in this task.
+
+[demo]
diff --git a/10-misc/02-eval/article.md b/10-misc/02-eval/article.md
new file mode 100644
index 000000000..1f3b487a3
--- /dev/null
+++ b/10-misc/02-eval/article.md
@@ -0,0 +1,107 @@
+# Eval: run a code string
+
+The built-in `eval` function allows to execute a string of `code`.;
+
+The syntax is:
+
+```js
+let result = eval(code);
+```
+
+For example:
+
+```js run
+let code = 'alert("Hello")';
+eval(code); // Hello
+```
+
+A call to `eval` returns the result of the last statement.
+
+For example:
+```js run
+let value = eval('1+1');
+alert(value); // 2
+```
+
+The code is executed in the current lexical environment, so it can see outer variables:
+
+```js run no-beautify
+let a = 1;
+
+function f() {
+  let a = 2;
+
+*!*
+  eval('alert(a)'); // 2
+*/!*
+}
+
+f();
+```
+
+It can change outer variables as well:
+
+```js untrusted refresh run
+let x = 5;
+eval("x = 10");
+alert(x); // 10, value modified
+```
+
+In strict mode, `eval` has its own lexical environment. So functions and variables, declared inside eval, are not visible outside:
+
+```js untrusted refresh run
+// reminder: 'use strict' is enabled in runnable examples by default
+
+eval("let x = 5; function f() {}");
+
+alert(typeof x); // undefined (no such variable)
+// function f is also not visible
+```
+
+Without `use strict`, `eval` doesn't have its own lexical environment, so we would see `x` and `f` outside.
+
+## Using "eval"
+
+In modern programming `eval` is used very sparingly. It's often said that "eval is evil".
+
+The reason is simple: long, long time ago JavaScript was a much weaker language, many things could only be done with `eval`. But that time passed a decade ago.
+
+Right now, there's almost no reason to use `eval`. If someone is using it, there's a good chance they can replace it with a modern language construct or a [JavaScript Module](info:modules).
+
+Still, if you're sure you need to dynamically `eval` a string of code, please note that its ability to access outer variables has side-effects.
+
+Code minifiers (tools used before JS gets to production, to compress it) replace local variables with shorter ones for brewity. That's usually safe, but not if `eval` is used, as it may reference them. So minifiers don't replace all local variables that might be visible from `eval`. That negatively affects code compression ratio.
+
+Using outer local variables inside `eval` is a bad programming practice, as it makes maintaining the code more difficult.
+
+There are two ways how to evade any eval-related problems.
+
+**If eval'ed code doesn't use outer variables, please call `eval` as `window.eval(...)`:**
+
+This way the code is executed in the global scope:
+
+```js untrusted refresh run
+let x = 1;
+{
+  let x = 5;
+  window.eval('alert(x)'); // 1 (global variable)
+}
+```
+
+**If your code needs local variables, execute it with `new Function` and pass them as arguments:**
+
+```js run
+let f = new Function('a', 'alert(a)');
+
+f(5); // 5
+```
+
+The `new Function` construct is explained in the chapter <info:new-function>. It creates a function from a string, also in the global scope. So it can't see local variables. But it's so much clearer to pass them explicitly as arguments, like in the example above.
+
+## Summary
+
+A call to `eval(code)` runs the string of code and returns the result of the last statement.
+- Rarely used in modern JavaScript, as there's usually no need.
+- Can access outer local variables. That's considered bad practice.
+- Instead, to `eval` the code in the global scope, use `window.eval(code)`.
+- Or, if your code needs some data from the outer scope, use `new Function` and pass it as arguments.
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
index aec462fe8..06d9c01b1 100755
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/build-tree-dom.view/index.html
@@ -17,7 +17,7 @@
           "oak": {}
         },
         "Flowering": {
-          "redbud": {},
+          "apple tree": {},
           "magnolia": {}
         }
       }
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
index fd85e6c76..0f5f6b037 100644
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/innerhtml.view/index.html
@@ -17,7 +17,7 @@
           "oak": {}
         },
         "Flowering": {
-          "redbud": {},
+          "apple tree": {},
           "magnolia": {}
         }
       }
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html b/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html
index d035aec68..8586f6b24 100755
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/source.view/index.html
@@ -28,7 +28,7 @@
       </li>
       <li>Flowering
         <ul>
-          <li>redbud</li>
+          <li>apple tree</li>
           <li>magnolia</li>
         </ul>
       </li>
@@ -51,7 +51,7 @@
           "oak": {}
         },
         "Flowering": {
-          "redbud": {},
+          "apple tree": {},
           "magnolia": {}
         }
       }
diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
index 6b60c096f..5ec1a01bc 100644
--- a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
+++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md
@@ -21,7 +21,7 @@ let data = {
       "oak": {}
     },
     "Flowering": {
-      "redbud": {},
+      "apple tree": {},
       "magnolia": {}
     }
   }
diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md
index 16aacb456..39f002cf8 100644
--- a/2-ui/1-document/07-modifying-document/article.md
+++ b/2-ui/1-document/07-modifying-document/article.md
@@ -38,7 +38,7 @@ That was an HTML example. Now let's create the same `div` with JavaScript (assum
 To create DOM nodes, there are two methods:
 
 `document.createElement(tag)`
-: Creates a new element with the given tag:
+: Creates a new *element node* with the given tag:
 
     ```js
     let div = document.createElement('div');
@@ -67,7 +67,7 @@ After that, we have our DOM element ready. Right now it is just in a variable an
 
 To make the `div` show up, we need to insert it somewhere into `document`. For instance, in `document.body`.
 
-There's a special method for that: `document.body.appendChild(div)`.
+There's a special method `appendChild` for that: `document.body.appendChild(div)`.
 
 Here's the full code:
 
@@ -146,9 +146,9 @@ Here's a brief list of methods to insert a node into a parent element (`parentEl
 
 All these methods return the inserted node. In other words, `parentElem.appendChild(node)` returns `node`. But usually the returned value is not used, we just run the method.
 
-These methods are "old school": they exist from the ancient times and we can meet them in many old scripts. Unfortunately, there are some tasks that are hard to solve with them.
+These methods are "old school": they exist from the ancient times and we can meet them in many old scripts. Unfortunately, they are not flexible enough.
 
-For instance, how to insert *html* if we have it as a string? Or, given a node, how to insert another node *before* it? Of course, all that is doable, but not in an elegant way.
+For instance, how to insert *html* if we have it as a string? Or, given a node, without reference to its parent, how to remove it? Of course, that's doable, but not in an elegant way.
 
 So there exist two other sets of insertion methods to handle all cases easily.
 
@@ -162,6 +162,8 @@ This set of methods provides more flexible insertions:
 - `node.after(...nodes or strings)` –- insert nodes or strings after the `node`,
 - `node.replaceWith(...nodes or strings)` –- replaces `node` with the given nodes or strings.
 
+All of them accept a list of DOM nodes and/or text strings. If a string is given it's inserted as a text node.
+
 Here's an example of using these methods to add more items to a list and the text before/after it:
 
 ```html autorun
@@ -236,14 +238,14 @@ But what if we want to insert HTML "as html", with all tags and stuff working, l
 
 There's another, pretty versatile method: `elem.insertAdjacentHTML(where, html)`.
 
-The first parameter is a string, specifying where to insert. Must be one of the following:
+The first parameter is a code word, specifying where to insert relative to `elem`. Must be one of the following:
 
-- `"beforebegin"` -- insert `html` before `elem`,
+- `"beforebegin"` -- insert `html` immediately before `elem`,
 - `"afterbegin"` -- insert `html` into `elem`, at the beginning,
 - `"beforeend"` -- insert `html` into `elem`, at the end,
-- `"afterend"` -- insert `html` after `elem`.
+- `"afterend"` -- insert `html` immediately after `elem`.
 
-The second parameter is an HTML string, inserted "as is".
+The second parameter is an HTML string, that is inserted "as HTML".
 
 For instance:
 
@@ -338,9 +340,9 @@ An example of copying the message:
 
 ## DocumentFragment [#document-fragment]
 
-`DocumentFragment` is a special DOM node that serves as a wrapper to pass around groups of nodes.
+`DocumentFragment` is a special DOM node that serves as a wrapper to pass around lists of nodes.
 
-We can append other nodes to it, but when we insert it somewhere, then it "disappears", leaving its content inserted instead.
+We can append other nodes to it, but when we insert it somewhere, then its content is inserted instead.
 
 For example, `getListContent` below generates a fragment with `<li>` items, that are later inserted into `<ul>`:
 
@@ -502,7 +504,7 @@ So it's kind of unusable at "after loaded" stage, unlike other DOM methods we co
 
 That was the downside.
 
-Technically, when `document.write` is called while the browser is still reading HTML, it appends something to it, and the browser consumes it just as it were initially there.
+Technically, when `document.write` is called while the browser is reading ("parsing") incoming HTML, and it writes something, the browser consumes it just as it were initially there, in the   HTML text.
 
 That gives us the upside -- it works blazingly fast, because there's *no DOM modification*. It writes directly into the page text, while the DOM is not yet built, and the browser puts it into DOM at generation-time.
 
diff --git a/2-ui/3-event-details/5-keyboard-events/article.md b/2-ui/3-event-details/5-keyboard-events/article.md
index afaa50bf1..ed9088fc1 100644
--- a/2-ui/3-event-details/5-keyboard-events/article.md
+++ b/2-ui/3-event-details/5-keyboard-events/article.md
@@ -104,7 +104,7 @@ So, `event.code` will equal `KeyZ` for people with German layout when they press
 That sounds odd, but so it is. The [specification](https://www.w3.org/TR/uievents-code/#table-key-code-alphanumeric-writing-system) explicitly mentions such behavior.
 
 - `event.code` has the benefit of staying always the same, bound to the physical key location, even if the visitor changes languages. So hotkeys that rely on it work well even in case of a language switch.
-- `event.code` may match a wrong character for unexpected layout. Same letters in different layouts may map to different physical keys, leading to different codes. That happens for several codes, e.g. `keyA`, `keyQ`, `keyZ` (as we've seen). You can find the list in the [specification](https://www.w3.org/TR/uievents-code/#table-key-code-alphanumeric-writing-system).
+- `event.code` may match a wrong character for unexpected layout. Same letters in different layouts may map to different physical keys, leading to different codes. Luckily, that happens only with several codes, e.g. `keyA`, `keyQ`, `keyZ` (as we've seen), and doesn't happen with special keys such as `Shift`. You can find the list in the [specification](https://www.w3.org/TR/uievents-code/#table-key-code-alphanumeric-writing-system).
 
 So, to reliably track layout-dependent characters, `event.key` may be a better way.
 
@@ -163,9 +163,9 @@ Now arrows and deletion works well.
 
 In the past, there was a `keypress` event, and also `keyCode`, `charCode`, `which` properties of the event object.
 
-There were so many browser incompatibilities that developers of the specification decided to deprecate all of them. The old code still works, as browsers keep supporting them, but there's totally no need to use those any more.
+There were so many browser incompatibilities while working with them, that developers of the specification had no way, other than deprecating all of them and creating new, modern events (described above in this chapter). The old code still works, as browsers keep supporting them, but there's totally no need to use those any more.
 
-There was a time when this chapter included their detailed description. But as of now it was removed and replaced with more details about the modern event handling.
+There was a time when this chapter included their detailed description. But, as of now, browsers support modern events, so it was removed and replaced with more details about the modern event handling.
 
 ## Summary
 
@@ -179,7 +179,7 @@ Keyboard events:
 Main keyboard event properties:
 
 - `code` -- the "key code" (`"KeyA"`, `"ArrowLeft"` and so on), specific to the physical location of the key on keyboard.
-- `key` -- the character (`"A"`, `"a"` and so on), for non-character keys usually has the same value  as `code`.
+- `key` -- the character (`"A"`, `"a"` and so on), for non-character keys, such as `key:Esc`, usually has the same value  as `code`.
 
 In the past, keyboard events were sometimes used to track user input in form fields. That's not reliable, because the input can come from various sources. We have `input` and `change` events to handle any input (covered later in the chapter <info:events-change-input>). They trigger after any kind of input, including copy-pasting or speech recognition.
 
diff --git a/4-binary/01-arraybuffer-binary-arrays/article.md b/4-binary/01-arraybuffer-binary-arrays/article.md
index de4e719b2..9de9ee4d6 100644
--- a/4-binary/01-arraybuffer-binary-arrays/article.md
+++ b/4-binary/01-arraybuffer-binary-arrays/article.md
@@ -99,17 +99,17 @@ new TypedArray();
     *!*
     let arr = new Uint8Array([0, 1, 2, 3]);
     */!*
-    alert( arr.length ); // 4
-    alert( arr[1] ); // 1
+    alert( arr.length ); // 4, created binary array of the same length
+    alert( arr[1] ); // 1, filled with 4 bytes (unsigned 8-bit integers) with given values
     ```
-3. If another `TypedArray` is supplied, it does the same: creates a typed array of the same length and copies values. Values are converted to the new type in the process.
+3. If another `TypedArray` is supplied, it does the same: creates a typed array of the same length and copies values. Values are converted to the new type in the process, if needed.
     ```js run
     let arr16 = new Uint16Array([1, 1000]);
     *!*
     let arr8 = new Uint8Array(arr16);
     */!*
     alert( arr8[0] ); // 1
-    alert( arr8[1] ); // 232 (tried to copy 1000, but can't fit 1000 into 8 bits)
+    alert( arr8[1] ); // 232, tried to copy 1000, but can't fit 1000 into 8 bits (explanations below)
     ```
 
 4. For a numeric argument `length` -- creates the typed array to contain that many elements. Its byte length will be `length` multiplied by the number of bytes in a single item `TypedArray.BYTES_PER_ELEMENT`:
@@ -224,6 +224,7 @@ new DataView(buffer, [byteOffset], [byteLength])
 For instance, here we extract numbers in different formats from the same buffer:
 
 ```js run
+// binary array of 4 bytes, all have the maximal value 255
 let buffer = new Uint8Array([255, 255, 255, 255]).buffer;
 
 let dataView = new DataView(buffer);
@@ -231,13 +232,13 @@ let dataView = new DataView(buffer);
 // get 8-bit number at offset 0
 alert( dataView.getUint8(0) ); // 255
 
-// now get 16-bit number at offset 0, that's 2 bytes, both with max value
+// now get 16-bit number at offset 0, it consists of 2 bytes, together iterpreted as 65535
 alert( dataView.getUint16(0) ); // 65535 (biggest 16-bit unsigned int)
 
 // get 32-bit number at offset 0
 alert( dataView.getUint32(0) ); // 4294967295 (biggest 32-bit unsigned int)
 
-dataView.setUint32(0, 0); // set 4-byte number to zero
+dataView.setUint32(0, 0); // set 4-byte number to zero, thus setting all bytes to 0
 ```
 
 `DataView` is great when we store mixed-format data in the same buffer. E.g we store a sequence of pairs (16-bit integer, 32-bit float). Then `DataView` allows to access them easily.
@@ -257,12 +258,11 @@ To do almost any operation on `ArrayBuffer`, we need a view.
 
 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.
 
-There are also two additional terms:
+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.
 - `BufferSource` is an umbrella term for `ArrayBuffer` or `ArrayBufferView`.
 
-These are used in descriptions of methods that operate on binary data. `BufferSource` is one of the most common terms, as it means "any kind of binary data" -- an `ArrayBuffer` or a view over it. 
-
+We'll see these terms in the next chapters. `BufferSource` is one of the most common terms, as it means "any kind of binary data" -- an `ArrayBuffer` or a view over it.
 
 Here's a cheatsheet:
 
diff --git a/5-network/04-fetch-crossorigin/article.md b/5-network/04-fetch-crossorigin/article.md
index 4d659a80a..d4d09a5e1 100644
--- a/5-network/04-fetch-crossorigin/article.md
+++ b/5-network/04-fetch-crossorigin/article.md
@@ -18,82 +18,96 @@ try {
 
 Fetch fails, as expected.
 
-## Why?
+## Why? A brief history
 
 Because cross-origin restrictions protect the internet from evil hackers.
 
 Seriously. Let's make a very brief historical digression.
 
-For many years JavaScript did not have any special methods to perform network requests.
-
-**A script from one site could not access the content of another site.**
+**For many years a script from one site could not access the content of another site.**
 
 That simple, yet powerful rule was a foundation of the internet security. E.g. a script from the page `hacker.com` could not access user's mailbox at `gmail.com`. People felt safe.
 
-But web developers demanded more power. A variety of tricks were invented to work around it.
+JavaScript also did not have any special methods to perform network requests at that time. It was a toy language to decorate a web page.
+
+But web developers demanded more power. A variety of tricks were invented to work around the limitation.
+
+### Using forms
 
 One way to communicate with another server was to submit a `<form>` there. People submitted it into `<iframe>`, just to stay on the current page, like this:
 
 ```html
 <!-- form target -->
+*!*
 <iframe name="iframe"></iframe>
+*/!*
 
 <!-- a form could be dynamically generated and submited by JavaScript -->
+*!*
 <form target="iframe" method="POST" action="http://another.com/…">
+*/!*
   ...
 </form>
 
 ```
 
-- So, it was possible to make a GET/POST request to another site, even without networking methods.
-- But as it's forbidden to access the content of an `<iframe>` from another site, it wasn't possible to read the response.
+So, it was possible to make a GET/POST request to another site, even without networking methods. But as it's forbidden to access the content of an `<iframe>` from another site, it wasn't possible to read the response.
 
-So, `<form>` allowed to submit the data anywhere, but the response content was unaccessible.
+...Okay, in fact there actually were tricks for that (required special scripts at both remote and our page), but let's not delve deeper. Nothing good in those for us now.
+
+### Using scripts
 
 Another trick was to use a `<script src="http://another.com/…">` tag. A script could have any `src`, from any domain. But again -- it was impossible to access the raw content of such script.
 
 If `another.com` intended to expose data for this kind of access, then a so-called "JSONP (JSON with padding)" protocol was used.
 
-Here's the flow:
+Let's say we need to get the data from `http://another.com` this way:
 
 1. First, in advance, we declare a global function to accept the data, e.g. `gotWeather`.
-2. Then we make a `<script>` and pass its name as the `callback` query parameter, e.g. `src="http://another.com/weather.json?callback=gotWeather"`.
-3. The remote server dynamically generates a response that wraps the data into `gotWeather(...)` call.  
+
+    ```js
+    // 1. Declare the function to process the data
+    function gotWeather({ temperature, humidity }) {
+      alert(`temperature: ${temperature}, humidity: ${humidity}`);
+    }
+    ```
+2. Then we make a `<script>` tag with `src="http://another.com/weather.json?callback=gotWeather"`,  please note that the name of our function is its `callback` parameter.
+
+    ```js
+    let script = document.createElement('script');
+    script.src = `http://another.com/weather.json?callback=gotWeather`;
+    document.body.append(script);
+    ```
+3. The remote server dynamically generates a script that calls `gotWeather(...)` with the data it wants us to receive.
+    ```js
+    // The expected answer from the server looks like this:
+    gotWeather({
+      temperature: 25,
+      humidity: 78
+    });
+    ```
 4. As the script executes, `gotWeather` runs, and, as it's our function, we have the data.
 
-Here's an example of the code to receive the data in JSONP:
 
-```js run
-// 1. Declare the function to process the data
-function gotWeather({ temperature, humidity }) {
-  alert(`temperature: ${temperature}, humidity: ${humidity}`);
-}
 
-// 2. Pass its name as the ?callback parameter for the script
-let script = document.createElement('script');
-script.src = `https://cors.javascript.info/article/fetch-crossorigin/demo/script?callback=gotWeather`;
-document.body.append(script);
+That works, and doesn't violate security, because both sides agreed to pass the data this way. And, when both sides agree, it's definitely not a hack. There are still services that provide such access, as it works even for very old browsers.
 
-// 3. The expected answer from the server looks like this:
-/*
-gotWeather({
-  temperature: 25,
-  humidity: 78
-});
-*/
-```
+After a while, networking methods appeared, such as `XMLHttpRequest`.
 
+At first, cross-origin requests were forbidden. But as a result of long discussions, cross-domain requests were  allowed, in a way that does not add any capabilities unless explicitly allowed by the server.
 
-That works, and doesn't violate security, because both sides agreed to pass the data this way. And, when both sides agree, it's definitely not a hack. There are still services that provide such access, as it works even for very old browsers.
+## Simple requests
 
-After a while, modern network methods appeared. At first, cross-origin requests were forbidden. But as a result of long discussions, cross-domain requests were  allowed, in a way that does not add any capabilities unless explicitly allowed by the server.
+There are two types of cross-domain requests:
+1. Simple requests.
+2. All the others.
 
-## Simple requests
+Simple Requests are, well, simpler to make, so let's start with them.
 
-[Simple requests](http://www.w3.org/TR/cors/#terminology) must satisfy the following conditions:
+A [simple request](http://www.w3.org/TR/cors/#terminology) is a request that satisfies two conditions:
 
 1. [Simple method](http://www.w3.org/TR/cors/#simple-method): GET, POST or HEAD
-2. [Simple headers](http://www.w3.org/TR/cors/#simple-header) -- only allowed:
+2. [Simple headers](http://www.w3.org/TR/cors/#simple-header) -- the only allowed custom headers are:
     - `Accept`,
     - `Accept-Language`,
     - `Content-Language`,
diff --git a/5-network/09-server-sent-events/article.md b/5-network/09-server-sent-events/article.md
new file mode 100644
index 000000000..49b191fdb
--- /dev/null
+++ b/5-network/09-server-sent-events/article.md
@@ -0,0 +1,270 @@
+# Server Sent Events
+
+The [Server-Sent Events](https://html.spec.whatwg.org/multipage/comms.html#the-eventsource-interface) specification describes a built-in class `EventSource`, that keeps connection with the server and allows to receive events from it.
+
+Similar to `WebSocket`, the connection is persistent.
+
+But there are several important differences:
+
+| `WebSocket` | `EventSource` |
+|-------------|---------------|
+| Bi-directional: both client and server can exchange messages | One-directional: only server sends data |
+| Binary and text data | Only text |
+| WebSocket protocol | Regular HTTP |
+
+`EventSource` is a less-powerful way of communicating with the server than `WebSocket`.
+
+Why should one ever use it?
+
+The main reason: it's simpler. In many applications, the power of `WebSocket` is a little bit too much.
+
+We need to receve a stream of data from server: maybe chat messages or market prices, or whatever. That's what `EventSource` is good at. Also it supports auto-reconnect, something  we need to implement manually with `WebSocket`. Besides, it's a plain old HTTP, not a new protocol.
+
+## Getting messages
+
+To start receiving messages, we just need to create `new EventSource(url)`.
+
+The browser will connect to `url` and keep the connection open, waiting for events.
+
+The server should respond with status 200 and the header `Content-Type: text/event-stream`, then keep the connection and write messages into it in the special format, like this:
+
+```
+data: Message 1
+
+data: Message 2
+
+data: Message 3
+data: of two lines
+```
+
+- A message text goes after `data:`, the space after the semicolon is optional.
+- Messages are delimited with double line breaks `\n\n`.
+- To send a line break `\n`, we can immediately one more `data:` (3rd message above).
+
+In practice, complex messages are usually sent JSON-encoded, so line-breaks are encoded within them.
+
+For instance:
+
+```js
+data: {"user":"John","message":"First line*!*\n*/!* Second line"}
+```
+
+...So we can assume that one `data:` holds exactly one message.
+
+For each such message, the `message` event is generated:
+
+```js
+let eventSource = new EventSource("/events/subscribe");
+
+eventSource.onmessage = function(event) {
+  console.log("New message", event.data);
+  // will log 3 times for the data stream above
+};
+
+// or eventSource.addEventListener('message', ...)
+```
+
+### Cross-domain requests
+
+`EventSource` supports cross-origin requests, like `fetch` any other networking methods. We can use any URL:
+
+```js
+let source = new EventSource("https://another-site.com/events");
+```
+
+The remote server will get the `Origin` header and must respond with `Access-Control-Allow-Origin` to proceed.
+
+To pass credentials, we should set the additional option `withCredentials`, like this:
+
+```js
+let source = new EventSource("https://another-site.com/events", {
+  withCredentials: true
+});
+```
+
+Please see the chapter <info:fetch-crossorigin> for more details about cross-domain headers.
+
+
+## Reconnection
+
+Upon creation, `new EventSource` connects to the server, and if the connection is broken -- reconnects.
+
+That's very convenient, as we don't have to care about it.
+
+There's a small delay between reconnections, a few seconds by default.
+
+The server can set the recommended delay using `retry:` in response (in milliseconds):
+
+```js
+retry: 15000
+data: Hello, I set the reconnection delay to 15 seconds
+```
+
+The `retry:` may come both together with some data, or as a standalone message.
+
+The browser should wait that much before reconnect. If the network connection is lost, the browser may wait till it's restored, and then retry.
+
+- If the server wants the browser to stop reconnecting, it should respond with HTTP status 204.
+- If the browser wants to close the connection, it should call `eventSource.close()`:
+
+```js
+let eventSource = new EventSource(...);
+
+eventSource.close();
+```
+
+Also, there will be no reconnection if the response has an incorrect `Content-Type` or its HTTP status differs from 301, 307, 200 and 204. The connection the `"error"` event is emitted, and the browser won't reconnect.
+
+```smart
+There's no way to "reopen" a closed connection. If we'd like to connect again, just create a new `EventSource`.
+```
+
+## Message id
+
+When a connection breaks due to network problems, either side can't be sure which messages were received, and which weren't.
+
+To correctly resume the connection, each message should have an `id` field, like this:
+
+```
+data: Message 1
+id: 1
+
+data: Message 2
+id: 2
+
+data: Message 3
+data: of two lines
+id: 3
+```
+
+When a message with `id:` is received, the browser:
+
+- Sets the property `eventSource.lastEventId` to its value.
+- Upon reconnection sends the header `Last-Event-ID` with that `id`, so that the server may re-send following messages.
+
+```smart header="Put `id:` after `data:`"
+Please note: the `id:` is appended below the message data, to ensure that `lastEventId` is updated after the message data is received.
+```
+
+## Connection status: readyState
+
+The `EventSource` object has `readyState` property, that has one of three values:
+
+```js no-beautify
+EventSource.CONNECTING = 0; // connecting or reconnecting
+EventSource.OPEN = 1;       // connected
+EventSource.CLOSED = 2;     // connection closed
+```
+
+When an object is created, or the connection is down, it's always `EventSource.CONNECTING` (equals `0`).
+
+We can query this property to know the state of `EventSource`.
+
+## Event types
+
+By default `EventSource` object generates three events:
+
+- `message` -- a message received, available as `event.data`.
+- `open` -- the connection is open.
+- `error` -- the connection could not be established, e.g. the server returned HTTP 500 status.
+
+The server may specify another type of event with `event: ...` at the event start.
+
+For example:
+
+```
+event: join
+data: Bob
+
+data: Hello
+
+event: leave
+data: Bob
+```
+
+To handle custom events, we must use `addEventListener`, not `onmessage`:
+
+```js
+eventSource.addEventListener('join', event => {
+  alert(`Joined ${event.data}`);
+});
+
+eventSource.addEventListener('message', event => {
+  alert(`Said: ${event.data}`);
+});
+
+eventSource.addEventListener('leave', event => {
+  alert(`Left ${event.data}`);
+});
+```
+
+## Full example
+
+Here's the server that sends messages with `1`, `2`, `3`, then `bye` and breaks the connection.
+
+Then the browser automatically reconnects.
+
+[codetabs src="eventsource"]
+
+
+## Summary
+
+The `EventSource` object communicates with the server. It establishes a persistent connection and allows the server to send messages over it.
+
+It offers:
+- Automatic reconnect, with tunable `retry` timeout.
+- Message ids to resume events, the last identifier is sent in `Last-Event-ID` header.
+- The current state is in the `readyState` property.
+
+That makes `EventSource` a viable alternative to `WebSocket`, as it's more low-level and lacks these features.
+
+In many real-life applications, the power of `EventSource` is just enough.
+
+Supported in all modern browsers (not IE).
+
+The syntax is:
+
+```js
+let source = new EventSource(url, [credentials]);
+```
+
+The second argument has only one possible option: `{ withCredentials: true }`, it allows sending cross-domain credentials.
+
+Overall cross-domain security is same as for `fetch` and other network methods.
+
+### Properties of an `EventSource` object
+
+`readyState`
+: The current connection state: either `EventSource.CONNECTING (=0)`, `EventSource.OPEN (=1)` or `EventSource.CLOSED (=2)`.
+
+`lastEventId`
+: The last received `id`. Upon reconnection the browser sends it in the header `Last-Event-ID`.
+
+### Methods
+
+`close()`
+: Closes the connection соединение.
+
+### Events
+
+`message`
+: Message received, the data is in `event.data`.
+
+`open`
+: The connection is established.
+
+`error`
+: In case of an error, including both lost connection (will auto-reconnect) and fatal errors. We can check `readyState` to see if the reconnection is being attempted.
+
+The server may set a custom event name in `event:`. Such events should be handled using `addEventListener`, not `on<event>`.
+
+### Server response format
+
+The server sends messages, delimited by `\n\n`.
+
+Message parts may start with:
+
+- `data:` -- message body, a sequence of multiple `data` is interpreted as a single message, with `\n` between the parts.
+- `id:` -- renews `lastEventId`, sent in `Last-Event-ID` on reconnect.
+- `retry:` -- recommends a retry delay for reconnections in ms. There's no way to set it from JavaScript.
+- `event:` -- even name, must precede `data:`.
diff --git a/5-network/09-server-sent-events/eventsource.view/index.html b/5-network/09-server-sent-events/eventsource.view/index.html
new file mode 100644
index 000000000..795b07ebb
--- /dev/null
+++ b/5-network/09-server-sent-events/eventsource.view/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<script>
+let eventSource;
+
+function start() { // when "Start" button pressed
+  if (!window.EventSource) {
+    // IE or an old browser
+    alert("The browser doesn't support EventSource.");
+    return;
+  }
+
+  eventSource = new EventSource('digits');
+
+  eventSource.onopen = function(e) {
+    log("Event: open");
+  };
+
+  eventSource.onerror = function(e) {
+    log("Event: error");
+    if (this.readyState == EventSource.CONNECTING) {
+      log(`Reconnecting (readyState=${this.readyState})...`);
+    } else {
+      log("Error has occured.");
+    }
+  };
+
+  eventSource.addEventListener('bye', function(e) {
+    log("Event: bye, data: " + e.data);
+  });
+
+  eventSource.onmessage = function(e) {
+    log("Event: message, data: " + e.data);
+  };
+}
+
+function stop() { // when "Stop" button pressed
+  eventSource.close();
+  log("eventSource.close()");
+}
+
+function log(msg) {
+  logElem.innerHTML += msg + "<br>";
+  document.documentElement.scrollTop = 99999999;
+}
+</script>
+
+<button onclick="start()">Start</button> Press the "Start" to begin.
+<div id="logElem" style="margin: 6px 0"></div>
+
+<button onclick="stop()">Stop</button> "Stop" to finish.
diff --git a/5-network/09-server-sent-events/eventsource.view/server.js b/5-network/09-server-sent-events/eventsource.view/server.js
new file mode 100644
index 000000000..34c7b1253
--- /dev/null
+++ b/5-network/09-server-sent-events/eventsource.view/server.js
@@ -0,0 +1,47 @@
+let http = require('http');
+let url = require('url');
+let querystring = require('querystring');
+
+function onDigits(req, res) {
+  res.writeHead(200, {
+    'Content-Type': 'text/event-stream; charset=utf-8',
+    'Cache-Control': 'no-cache'
+  });
+
+  let i = 0;
+
+  let timer = setInterval(write, 1000);
+  write();
+
+  function write() {
+    i++;
+
+    if (i == 4) {
+      res.write('event: bye\ndata: bye-bye\n\n');
+      clearInterval(timer);
+      res.end();
+      return;
+    }
+
+    res.write('data: ' + i + '\n\n');
+
+  }
+}
+
+function accept(req, res) {
+
+  if (req.url == '/digits') {
+    onDigits(req, res);
+    return;
+  }
+
+  fileServer.serve(req, res);
+
+}
+
+
+if (!module.parent) {
+  http.createServer(accept).listen(8080);
+} else {
+  exports.accept = accept;
+}
diff --git a/6-data-storage/03-indexeddb/article.md b/6-data-storage/03-indexeddb/article.md
index ecf3f3566..4194bd15a 100644
--- a/6-data-storage/03-indexeddb/article.md
+++ b/6-data-storage/03-indexeddb/article.md
@@ -57,7 +57,7 @@ openRequest.onupgradeneeded = function() {
 };
 
 openRequest.onerror = function() {
-  console.error("Error", openResult.error);
+  console.error("Error", openRequest.error);
 };
 
 openRequest.onsuccess = function() {
@@ -107,16 +107,18 @@ IndexedDB uses the [standard serialization algorithm](https://www.w3.org/TR/html
 
 An example of object that can't be stored: an object with circular references. Such objects are not serializable. `JSON.stringify` also fails for such objects.
 
-**There must be an unique `key` for every value in the store.**     
+**There must be a unique `key` for every value in the store.**     
 
 A key must have a type one of: number, date, string, binary, or array. It's an unique identifier: we can search/remove/update values by the key.
 
 ![](indexeddb-structure.png)
 
-As we'll see very soon, we can provide a key when we add an value to the store, similar to `localStorage`. But when we store objects, IndexedDB allows to setup an object property as the key, that's much more convenient. Or we can auto-generate keys.
+
+As we'll see very soon, we can provide a key when we add a value to the store, similar to `localStorage`. But when we store objects, IndexedDB allows to setup an object property as the key, that's much more convenient. Or we can auto-generate keys.
 
 But we need to create an object store first.
 
+
 The syntax to create an object store:
 ```js
 db.createObjectStore(name[, keyOptions]);
@@ -194,7 +196,7 @@ db.transaction(store[, type]);
   - `readonly` -- can only read, the default.
   - `readwrite` -- can only read and write the data, but not create/remove/alter object stores.
 
-There'is also `versionchange` transaction type: such transactions can do everything, but we can't create them manually. IndexedDB automatically creates a `versionchange` transaction when opening the database, for `updateneeded` handler. That's why it's a single place where we can update the database structure, create/remove object stores.
+There's also `versionchange` transaction type: such transactions can do everything, but we can't create them manually. IndexedDB automatically creates a `versionchange` transaction when opening the database, for `updateneeded` handler. That's why it's a single place where we can update the database structure, create/remove object stores.
 
 ```smart header="Why there exist different types of transactions?"
 Performance is the reason why transactions need to be labeled either `readonly` and `readwrite`.
@@ -462,7 +464,7 @@ objectStore.createIndex(name, keyPath, [options]);
 - **`keyPath`** -- path to the object field that the index should track (we're going to search by that field),
 - **`option`** -- an optional object with properties:
   - **`unique`** -- if true, then there may be only one object in the store with the given value at the `keyPath`. The index will enforce that by generating an error if we try to add a duplicate.
-  - **`multiEntry`** -- only used if there value on `keyPath` is an array. In that case, by default, the index will treat the whole array as the key. But if `multiEntry` is true, then the index will keep a list of store objects for each value in that array. So array members become index keys.
+  - **`multiEntry`** -- only used if the value on `keyPath` is an array. In that case, by default, the index will treat the whole array as the key. But if `multiEntry` is true, then the index will keep a list of store objects for each value in that array. So array members become index keys.
 
 In our example, we store books keyed by `id`.
 
@@ -611,7 +613,7 @@ Whether there are more values matching the cursor or not -- `onsuccess` gets cal
 
 In the example above the cursor was made for the object store.
 
-But we also can make a cursor over an index. As we remember, indexes allow to search by an object field. Cursors over indexes to precisely the same as over object stores -- they save memory by returning one value at a timee.
+But we also can make a cursor over an index. As we remember, indexes allow to search by an object field. Cursors over indexes to precisely the same as over object stores -- they save memory by returning one value at a time.
 
 For cursors over indexes, `cursor.key` is the index key (e.g. price), and we should use `cursor.primaryKey` property the object key:
 
@@ -685,7 +687,9 @@ window.addEventListener('unhandledrejection', event => {
 
 ### "Inactive transaction" pitfall
 
-A we know already, a transaction auto-commits as soon as the browser is done with the current code and microtasks. So if we put an *macrotask* like `fetch` in the middle of a transaction, then the transaction won't wait for it to finish. It just auto-commits. So the next request in it would fail.
+
+As we already know, a transaction auto-commits as soon as the browser is done with the current code and microtasks. So if we put a *macrotask* like `fetch` in the middle of a transaction, then the transaction won't wait for it to finish. It just auto-commits. So the next request in it would fail.
+
 
 For a promise wrapper and `async/await` the situation is the same.
 
@@ -712,7 +716,7 @@ The workaround is same as when working with native IndexedDB: either make a new
 
 Internally, the wrapper performs a native IndexedDB request, adding `onerror/onsuccess` to it, and returns a promise that rejects/resolves with the result.
 
-That works most fine of the time. The examples are at the lib page <https://github.com/jakearchibald/idb>.
+That works fine most of the time. The examples are at the lib page <https://github.com/jakearchibald/idb>.
 
 In few rare cases, when we need the original `request` object, we can access it as `promise.request` property of the promise:
 
diff --git a/8-web-components/7-shadow-dom-events/article.md b/8-web-components/7-shadow-dom-events/article.md
index 14e310a55..4199d104d 100644
--- a/8-web-components/7-shadow-dom-events/article.md
+++ b/8-web-components/7-shadow-dom-events/article.md
@@ -2,9 +2,9 @@
 
 The idea behind shadow tree is to encapsulate internal implementation details of a component.
 
-Let's say, a click event happens inside a shadow DOM of `<user-card>` component. But scripts in the main document have no idea about the shadow DOM internals, especially if the component comes from a 3rd-party library or so.  
+Let's say, a click event happens inside a shadow DOM of `<user-card>` component. But scripts in the main document have no idea about the shadow DOM internals, especially if the component comes from a 3rd-party library.  
 
-So, to keep things simple, the browser *retargets* the event.
+So, to keep the details encapsulated, the browser *retargets* the event.
 
 **Events that happen in shadow DOM have the host element as the target, when caught outside of the component.**
 
@@ -39,7 +39,7 @@ Event retargeting is a great thing to have, because the outer document doesn't h
 
 **Retargeting does not occur if the event occurs on a slotted element, that physically lives in the light DOM.**
 
-For example, if a user clicks on `<span slot="username">` in the example below, the event target is exactly this element, for both shadow and light handlers:
+For example, if a user clicks on `<span slot="username">` in the example below, the event target is exactly this `span` element, for both shadow and light handlers:
 
 ```html run autorun="no-epub" untrusted height=60
 <user-card id="userCard">
@@ -75,7 +75,7 @@ For purposes of event bubbling, flattened DOM is used.
 
 So, if we have a slotted element, and an event occurs somewhere inside it, then it bubbles up to the `<slot>` and upwards.
 
-The full path to the original event target, with all the shadow root elements, can be obtained using `event.composedPath()`. As we can see from the name of the method, that path is taken after the composition.
+The full path to the original event target, with all the shadow elements, can be obtained using `event.composedPath()`. As we can see from the name of the method, that path is taken after the composition.
 
 In the example above, the flattened DOM is:
 
@@ -119,7 +119,7 @@ All touch events and pointer events also have `composed: true`.
 
 There are some events that have `composed: false` though:
 
-- `mouseenter`, `mouseleave` (they also do not bubble),
+- `mouseenter`, `mouseleave` (they do not bubble at all),
 - `load`, `unload`, `abort`, `error`,
 - `select`,
 - `slotchange`.
@@ -189,4 +189,4 @@ These events can be caught only on elements within the same DOM.
 
 If we dispatch a `CustomEvent`, then we should explicitly set `composed: true`.
 
-Please note that in case of nested components, composed events bubble through all shadow DOM boundaries. So, if an event is intended only for the immediate enclosing component, we can also dispatch it on the shadow host. Then it's out of the shadow DOM already.
+Please note that in case of nested components, one shadow DOM may be nested into another. In that case composed events bubble through all shadow DOM boundaries. So, if an event is intended only for the immediate enclosing component, we can also dispatch it on the shadow host and set `composed: false`. Then it's out of the component shadow DOM, but won't bubble up to higher-level DOM.
diff --git a/9-regular-expressions/14-regexp-lookahead-lookbehind/article.md b/9-regular-expressions/14-regexp-lookahead-lookbehind/article.md
index 376d52d66..ec13cedc5 100644
--- a/9-regular-expressions/14-regexp-lookahead-lookbehind/article.md
+++ b/9-regular-expressions/14-regexp-lookahead-lookbehind/article.md
@@ -60,9 +60,9 @@ alert( str.match(/(?<!\$)\d+/) ); // 2 (skipped the price)
 
 Generally, what's inside the lookaround (a common name for both lookahead and lookbehind) parentheses does not become a part of the match.
 
-E.g. in the pattern `pattern:\d+(?!€)`, the `pattern:€` sign doesn't get captured as a part of the match.
+E.g. in the pattern `pattern:\d+(?=€)`, the `pattern:€` sign doesn't get captured as a part of the match. That's natural: we look for a number `pattern:\d+`, while `pattern:(?=€)` is just a test that it should be followed by `subject:€`.
 
-But if we want to capture the whole lookaround expression or a part of it, that's possible. Just need to wrap that into additional parentheses.
+But in some situations we might want to capture the lookaround expression as well, or a part of it. That's possible. Just  wrap that into additional parentheses.
 
 For instance, here the currency `pattern:(€|kr)` is captured, along with the amount:
 
@@ -89,9 +89,13 @@ Usually parentheses are numbered left-to-right, but lookbehind is an exception,
 
 ## Summary
 
-Lookahead and lookbehind (commonly referred to as "lookaround") are useful for simple regular expressions, when we'd like not to take something into the match depending on the context before/after it.
+Lookahead and lookbehind (commonly referred to as "lookaround") are useful when we'd like to take something into the match depending on the context before/after it.
 
-Sometimes we can do the same manually, that is: match all and filter by context in the loop. Remember, `str.matchAll` and `reg.exec` return matches with `.index` property, so we know where exactly in the text it is. But generally regular expressions can do it better.
+For simple regexps we can do the similar thing manually. That is: match everything, in any context, and then filter by context in the loop.
+
+Remember, `str.matchAll` and `reg.exec` return matches with `.index` property, so we know where exactly in the text it is, and can check the context.
+
+But generally regular expressions are more convenient.
 
 Lookaround types:
 
@@ -102,4 +106,4 @@ Lookaround types:
 | `pattern:(?<=y)x` |  Positive lookbehind | `x` if after `y` |
 | `pattern:(?<!y)x` | Negative lookbehind | `x` if not after `y` |
 
-Lookahead can also used to disable backtracking. Why that may be needed -- see in the next chapter.
+Lookahead can also used to disable backtracking. Why that may be needed and other details  -- see in the next chapter.
diff --git a/README.md b/README.md
index e496af85b..1b1738396 100755
--- a/README.md
+++ b/README.md
@@ -113,6 +113,7 @@ Some files, usually tasks, have YAML metadata at the top, delimited by `---`:
 importance: 5
 
 ---
+<<<<<<< HEAD
 ...
 ```
 
@@ -133,3 +134,7 @@ Please don't translate or remove the `[#...]` part, it's for URL anchors.
 You can run the tutorial server locally to see how the translation looks.
 
 The server and install instructions are at <https://github.com/javascript-tutorial/server>. 
+=======
+♥  
+Ilya Kantor @iliakan
+>>>>>>> 027933531e121650120f7e8385f691de99af12d2
diff --git a/css.md b/css.md
new file mode 100644
index 000000000..6a6316e69
--- /dev/null
+++ b/css.md
@@ -0,0 +1,4 @@
+
+# CSS for JS developers
+
+- Outline
diff --git a/figures.sketch b/figures.sketch
index bebfcd3ec..ca923477e 100644
Binary files a/figures.sketch and b/figures.sketch differ