diff --git a/10-regular-expressions-javascript/01-regexp-introduction/article.md b/10-regular-expressions-javascript/01-regexp-introduction/article.md
new file mode 100644
index 00000000..6206c57c
--- /dev/null
+++ b/10-regular-expressions-javascript/01-regexp-introduction/article.md
@@ -0,0 +1,132 @@
+# Patterns and flags
+
+Regular expressions is a powerful way of searching and replacing inside a string.
+
+In Javascript regular expressions are implemented using objects of a built-in `RegExp` class and integrated with strings.
+
+Please note that regular expressions vary between programming languages. In this tutorial we concentrate on Javascript. Of course there's a lot in common, but they are a somewhat different in Perl, Ruby, PHP etc.
+
+[cut]
+
+## Regular expressions
+
+A regular expression (also "regexp", or just "reg") consists of a *pattern* and optional *flags*.
+
+There are two syntaxes to create a regular expression object.
+
+The long syntax:
+
+```js
+regexp = new RegExp("pattern", "flags");
+```
+
+...And the short one, using slashes `"/"`:
+
+```js
+regexp = /pattern/; // no flags флагов
+regexp = /pattern/gmi; // with flags g,m and i (to be covered soon)
+```
+
+Slashes `"/"` tell Javascript that we are creating a regular expression. They play the same role as quotes for strings.
+
+## Usage
+
+To search inside a string, we can use method [search](mdn:js/String/search).
+
+Here's an example:
+
+```js run
+let str = "I love Javascript!"; // will search here
+
+let regexp = /love/;
+alert( str.search(regexp) ); // 2
+```
+
+The `str.search` method looks for the pattern `pattern:/love/` and returns the position inside the string. As we might guess, `pattern:/love/` is the simplest possible pattern. What it does is a simple substring search.
+
+The code above is the same as:
+
+```js run
+let str = "I love Javascript!"; // will search here
+
+let substr = 'love';
+alert( str.search(substr) ); // 2
+```
+
+So searching for `pattern:/love/` is the same as searching for `"love"`.
+
+But that's only for now. Soon we'll create more complex regular expressions with much searching more power.
+
+```smart header="Colors"
+From here on the color scheme is:
+
+- regexp -- `pattern:red`
+- string (where we search) -- `subject:blue`
+- result -- `match:green`
+```
+
+
+````smart header="When to use `new RegExp`?"
+Normally we use the short syntax `/.../`. But it does not allow any variables insertions, so we must know the exact regexp at the time of writing the code.
+
+From the other hand, `new RegExp` allows to construct a pattern dynamically from a string.
+
+So we can figure out what we need to search and create `new RegExp` from it:
+
+```js run
+let search = prompt("What you want to search?", "love");
+let regexp = new RegExp(search);
+
+// find whatever the user wants
+alert( "I love Javascript".search(regexp));
+```
+````
+
+
+## Flags
+
+Regular expressions may have flags that affect the search.
+
+There are only 5 of them in Javascript:
+
+`i`
+: With this flag the search is case-insensitive: no difference between `А` and `а` (see the example below).
+
+`g`
+: With this flag the search looks for all matches, without it -- only the first one (we'll see uses in the next chapter).
+
+`m`
+: Multiline mode (will cover in [todo]).
+
+`u`
+: Enables full unicode support. The flag enables correct processing of surrogate pairs. More about that in the chapter <info:regexp-unicode>.
+
+`y`
+: Sticky mode (covered in [todo])
+
+
+
+## The "i" flag
+
+The simplest flag is `i`.
+
+An example with it:
+
+```js run
+let str = "I love Javascript!";
+
+alert( str.search(/LOVE/) ); // -1 (not found)
+alert( str.search(/LOVE/i) ); // 2
+```
+
+1. The first search returns `-1` (not found), because the search is case-sensitive by default.
+2. With the flag `pattern:/LOVE/i` the search found `match:love` at position 2.
+
+So the `i` flag already makes regular expressions more powerful than a simple substring search. But there's so much more. We'll cover other flags and features in the next chapters.
+
+
+## Summary
+
+- A regular expression consists of a pattern and optional flags: `g`, `i`, `m`, `u`, `y`.
+- Without flags and special symbols that we'll study later, the search by a regexp is the same as a  substring search.
+- The method `str.search(regexp)` returns the index where the match is found or `-1` if there's no match.
diff --git a/10-regular-expressions-javascript/02-regexp-methods/article.md b/10-regular-expressions-javascript/02-regexp-methods/article.md
new file mode 100644
index 00000000..13dae08f
--- /dev/null
+++ b/10-regular-expressions-javascript/02-regexp-methods/article.md
@@ -0,0 +1,370 @@
+# Methods of RegExp and String
+
+There are two sets of methods to deal with regular expressions.
+
+1. First, regular expressions are objects of the built-in [RegExp](mdn:js/RegExp) class, it provides many methods.
+2. Besides that, there are methods in regular strings can work with regexps.
+
+The structure is a bit messed up, so we'll first consider methods separately, and then -- practical recipes for common tasks.
+
+[cut]
+
+## str.search(reg)
+
+We've seen this method already. It returns the position of the first match or `-1` if none found:
+
+```js run
+let str = "A drop of ink may make a million think";
+
+alert( str.search( *!*/a/i*/!* ) ); // 0 (the first position)
+```
+
+**The important limitation: `search` always looks for the first match.**
+
+We can't find next positions using `search`, there's just no syntax for that. But there are other mathods that can.
+
+## str.match(reg), no "g" flag
+
+The method `str.match` behavior varies depending on the `g` flag. First let's see the case without it.
+
+Then `str.match(reg)` looks for the first match only.
+
+The result is an array with that match and additional properties:
+
+- `index` -- the position of the match inside the string,
+- `input` -- the subject string.
+
+For instance:
+
+```js run
+let str = "Fame is the thirst of youth";
+
+let result = str.match( *!*/fame/i*/!* );
+
+alert( result[0] );    // Fame (the match)
+alert( result.index ); // 0 (at the zero position)
+alert( result.input ); // "Fame is the thirst of youth" (the string)
+```
+
+The array may have more than one element.
+
+**If a part of the pattern is delimited by brackets `(...)`, then it becomes a separate element of the array.**
+
+For instance:
+
+```js run
+lar str = "Javascript is a programming language";
+
+let result = str.match( *!*/JAVA(SCRIPT)/i*/!* );
+
+alert( result[0] ); // Javascript (the whole match)
+alert( result[1] ); // script (the part of the match that corresponds to the brackets)
+alert( result.index ); // 0
+alert( result.input ); // Javascript is a programming language
+```
+
+Due to the `i` flag the search is case-insensitive, so it finds `match:Javascript`. The part of the match that corresponds to `pattern:SCRIPT` becomes a separate array item.
+
+We'll be back to brackets later in the chapter [todo]. They are great for search-and-replace.
+
+## str.match(reg) with "g" flag
+
+When there's a `"g"` flag, then `str.match` returns an array of all matches. There are no additional properties in that array, and brackets do not create any elements.
+
+For instance:
+
+```js run
+let str = "HO-Ho-ho!";
+
+let result = str.match( *!*/ho/ig*/!* );
+
+alert( result ); // HO, Ho, ho (all matches, case-insensitive)
+```
+
+With brackets nothing changes, here we go:
+
+
+
+```js run
+let str = "HO-Ho-ho!";
+
+let result = str.match( *!*/h(o)/ig*/!* );
+
+alert( result ); // HO, Ho, ho
+```
+
+So, with `g` flag the `result` is a simple array of matches. No additional properties.
+
+If we want to get information about match positions and use brackets then we should use  [RegExp#exec](mdn:js/RegExp/exec) method that we'll cover below.
+
+````warn header="If there are no matches, the call to `match` returns `null`"
+Please note, that's important. If there were no matches, the result is not an empty array, but `null`.
+
+Keep that in mind to evade pitfalls like this:
+
+```js run
+let str = "Hey-hey-hey!";
+
+alert( str.match(/ho/gi).length ); // error! there's no length of null
+```
+````
+
+## str.split(regexp|substr, limit)
+
+Splits the string using the regexp (or a substring) as a delimiter.
+
+We already used `split` with strings, like this:
+
+```js run
+alert('12-34-56'.split('-')) // [12, 34, 56]
+```
+
+But we can also pass a regular expression:
+
+```js run
+alert('12-34-56'.split(/-/)) // [12, 34, 56]
+```
+
+## str.replace(str|reg, str|func)
+
+The swiss army knife for search and replace in strings.
+
+The simplest use -- search and replace a substring, like this:
+
+```js run
+// replace a dash by a colon
+alert('12-34-56'.replace("-", ":")) // 12:34-56
+```
+
+When the first argument of `replace` is a string, it only looks for the first match.
+
+To find all dashes, we need to use not the string `"-"`, but a regexp `pattern:/-/g`, with an obligatory `g` flag:
+
+```js run
+// replace all dashes by a colon
+alert( '12-34-56'.replace( *!*/-/g*/!*, ":" ) )  // 12:34:56
+```
+
+The second argument is a replacement string.
+
+We can use special characters in it:
+
+| Symbol | Inserts |
+|--------|--------|
+|`$$`|`"$"` |
+|`$&`|the whole match|
+|<code>$&#096;</code>|a part of the string before the match|
+|`$'`|a part of the string after the match|
+|`$n`|if `n` is a 1-2 digit number, then it means the contents of n-th brackets counting fro left to right|
+
+For instance let's use `$&` to replace all entries of `"John"` by `"Mr.John"`:
+
+```js run
+let str = "John Doe, John Smith and John Bull.";
+
+// for each John - replace it with Mr. and then John
+alert(str.replace(/John/g, 'Mr.$&'));
+// "Mr.John Doe, Mr.John Smith and Mr.John Bull.";
+```
+
+Brackets are very often used together with `$1`, `$2`, like this:
+
+```js run
+let str = "John Smith";
+
+alert(str.replace(/(John) (Smith)/, '$2, $1')) // Smith, John
+```
+
+**For situations that require "smart" replacements, the second argument can be a function.**
+
+It will be called for each match, and its result will be inserted as a replacement.
+
+For instance:
+
+```js run
+let i = 0;
+
+// replace each "ho" by the result of the function
+alert("HO-Ho-ho".replace(/ho/gi, function() {
+  return ++i;
+})); // 1-2-3
+```
+
+In the example above the function just returns the next number every time, but usually the result is based on the match.
+
+The function is called with arguments `func(str, p1, p2, ..., pn, offset, s)`:
+
+1. `str` -- the match,
+2. `p1, p2, ..., pn` -- contents of brackets (if there are any),
+3. `offset` -- position of the match,
+4. `s` -- the source string.
+
+If there are no brackets in the regexp, then the function always has 3 arguments: `func(str, offset, s)`.
+
+Let's use it to show full information about matches:
+
+```js run
+// show and replace all matches
+function replacer(str, offset, s) {
+  alert(`Found ${str} at position ${offset} in string ${s}`);
+  return str.toLowerCase();
+}
+
+let result = "HO-Ho-ho".replace(/ho/gi, replacer);
+alert( 'Result: ' + result ); // Result: ho-ho-ho
+
+// shows each match:
+// Found HO at position 0 in string HO-Ho-ho
+// Found Ho at position 3 in string HO-Ho-ho
+// Found ho at position 6 in string HO-Ho-ho
+```
+
+In the example below there are two brackets, so `replacer` is called with 5 arguments: `str` is the full match, then brackets, and then `offset` and `s`:
+
+```js run
+function replacer(str, name, surname, offset, s) {
+  // name is the first bracket, surname is the second one
+  return surname + ", " + name;
+}
+
+let str = "John Smith";
+
+alert(str.replace(/(John) (Smith)/, replacer)) // Smith, John
+```
+
+Using a function gives us the ultimate replacement power, because it gets all the information about the match, has access to outer variables and can do everything.
+
+## regexp.test(str)
+
+Let's move on to the methods of `RegExp` class, that are callable on regexps themselves.
+
+The `test` method looks for any match and returns `true/false` whether he found it.
+
+So it's basically the same as `str.search(reg) != -1`, for instance:
+
+```js run
+let str = "I love Javascript";
+
+// these two tests do the same
+alert( *!*/love/i*/!*.test(str) ); // true
+alert( str.search(*!*/love/i*/!*) != -1 ); // true
+```
+
+An example with the negative answer:
+
+```js run
+let str = "Bla-bla-bla";
+
+alert( *!*/love/i*/!*.test(str) ); // false
+alert( str.search(*!*/love/i*/!*) != -1 ); // false
+```
+
+## regexp.exec(str)
+
+We've already seen these searching methods:
+
+- `search` -- looks for the position of the match,
+- `match` -- if there's no `g` flag, returns the first match with brackets,
+- `match` -- if there's a `g` flag -- returns all matches, without separating brackets.
+
+The `regexp.exec` method is a bit harder to use, but it allows to search all matches with brackets and positions.
+
+It behaves differently depending on whether the regexp has the `g` flag.
+
+- If there's no `g`, then `regexp.exec(str)` returns the first match, exactly as `str.match(reg)`.
+- If there's `g`, then `regexp.exec(str)` returns the first match and *remembers* the position after it in `regexp.lastIndex` property. The next call starts to search from `regexp.lastIndex` and returns the next match. If there are no more matches then `regexp.exec` returns `null` and `regexp.lastIndex` is set to `0`.
+
+As we can see, the method gives us nothing new if we use it without the `g` flag, because `str.match` does exactly the same.
+
+But the `g` flag allows to get all matches with their positions and bracket groups.
+
+Here's the example how subsequent `regexp.exec` calls return matches one by one:
+
+```js run
+let str = "A lot about Javascript at https://javascript.info";
+
+let regexp = /JAVA(SCRIPT)/ig;
+
+*!*
+// Look for the first match
+*/!*
+let matchOne = regexp.exec(str);
+alert( matchOne[0] ); // Javascript
+alert( matchOne[1] ); // script
+alert( matchOne.index ); // 12 (the position of the match)
+alert( matchOne.input ); // the same as str
+
+alert( regexp.lastIndex ); // 22 (the position after the match)
+
+*!*
+// Look for the second match
+*/!*
+let matchTwo = regexp.exec(str); // continue searching from regexp.lastIndex
+alert( matchTwo[0] ); // javascript
+alert( matchTwo[1] ); // script
+alert( matchTwo.index ); // 34 (the position of the match)
+alert( matchTwo.input ); // the same as str
+
+alert( regexp.lastIndex ); // 44 (the position after the match)
+
+*!*
+// Look for the third match
+*/!*
+let matchThree = regexp.exec(str); // continue searching from regexp.lastIndex
+alert( matchThree ); // null (no match)
+
+alert( regexp.lastIndex ); // 0 (reset)
+```
+
+As we can see, each `regexp.exec` call returns the match in a "full format": as an array with brackets, `index` and `input` properties.
+
+The main use case for `regexp.exec` is to find all matches in a loop:
+
+```js run
+let str = 'A lot about Javascript at https://javascript.info';
+
+let regexp = /javascript/ig;
+
+let result;
+
+while (result = regexp.exec(str)) {
+  alert( `Found ${result[0]} at ${result.index}` );
+}
+```
+
+The loop continues until `regexp.exec` returns `null` that means "no more matches".
+
+````smart header="Search from the given position"
+We can force `regexp.exec` to start searching from the given position by setting `lastIndex` manually:
+
+```js run
+let str = 'A lot about Javascript at https://javascript.info';
+
+let regexp = /javascript/ig;
+regexp.lastIndex = 30;
+
+alert( regexp.exec(str).index ); // 34, the search starts from the 30th position
+```
+````
+
+## Summary, recipes
+
+Methods become much easier to understand if we separate them by their use in real-life tasks.
+
+To search for the first match only:
+: - Find the position of the first match -- `str.search(reg)`.
+- Find the full match -- `str.match(reg)`.
+- Check if there's a match -- `regexp.test(str)`.
+- Find the match from the given position -- `regexp.exec(str)`, set `regexp.lastIndex` to position.
+
+To search for all matches:
+: - An array of matches -- `str.match(reg)`, the regexp with `g` flag.
+- Get all matches with full information about each one -- `regexp.exec(str)` with `g` flag in the loop.
+
+To search and replace:
+: - Replace with another string or a function result -- `str.replace(reg, str|func)`
+
+To split the string:
+: - `str.split(str|reg)`
+
+Now we know the methods and can use regular expressions. But we need to learn their syntax and capabilities, so let's move on.
diff --git a/10-regular-expressions-javascript/03-regexp-character-classes/1-find-time-hh-mm/solution.md b/10-regular-expressions-javascript/03-regexp-character-classes/1-find-time-hh-mm/solution.md
new file mode 100644
index 00000000..829eda13
--- /dev/null
+++ b/10-regular-expressions-javascript/03-regexp-character-classes/1-find-time-hh-mm/solution.md
@@ -0,0 +1,6 @@
+
+The answer: `pattern:\b\d\d:\d\d\b`.
+
+```js run
+alert( "Breakfast at 09:00 in the room 123:456.".match( /\b\d\d:\d\d\b/ ) ); // 09:00
+```
diff --git a/10-regular-expressions-javascript/03-regexp-character-classes/1-find-time-hh-mm/task.md b/10-regular-expressions-javascript/03-regexp-character-classes/1-find-time-hh-mm/task.md
new file mode 100644
index 00000000..5e32b9c4
--- /dev/null
+++ b/10-regular-expressions-javascript/03-regexp-character-classes/1-find-time-hh-mm/task.md
@@ -0,0 +1,8 @@
+# Find the time
+
+The time has a format: `hours:minutes`. Both hours and minutes has two digits, like `09:00`.
+
+Make a regexp to find time in the string: `subject:Breakfast at 09:00 in the room 123:456.`
+
+P.S. In this task there's no need to check time correctness yet, so `25:99` can also be a valid result.
+P.P.S. The regexp shouldn't match `123:456`.
diff --git a/10-regular-expressions-javascript/03-regexp-character-classes/article.md b/10-regular-expressions-javascript/03-regexp-character-classes/article.md
new file mode 100644
index 00000000..6b8d8bcf
--- /dev/null
+++ b/10-regular-expressions-javascript/03-regexp-character-classes/article.md
@@ -0,0 +1,223 @@
+# Character classes
+
+Consider a practical task -- we have a phone number `"+7(903)-123-45-67"`, and we need to find all digits in that string. Other characters do not interest us.
+
+A character class is a special notation that matches any symbol from the set.
+
+[cut]
+
+For instance, there's a "digit" class. It's written as `\d`. We put it in the pattern, and during the search any digit matches it.
+
+That is: a regexp `pattern:/\d/` looks for a digit:
+
+```js run
+let str = "+7(903)-123-45-67";
+
+let reg = /\d/;
+
+alert( str.match(reg) ); // 7
+```
+
+The regexp is not global in the example above, so it only looks for the first match.
+
+Let's add the `g` flag to look for all digits:
+
+```js run
+let str = "+7(903)-123-45-67";
+
+let reg = /\d/g;
+
+alert( str.match(reg) ); // array of matches: 7,9,0,3,1,2,3,4,5,6,7
+```
+
+## Most used classes: \d \s \w
+
+That was a character class for digits. There are other character classes as well.
+
+Most used are:
+
+`\d` ("d" is from "digit")
+: A digit: a character from `0` to `9`.
+
+`\s` ("s" is from "space")
+: A space symbol: that includes spaces, tabs, newlines.
+
+`\w` ("w" is from "word")
+: A "wordly" character: either a letter of English alphabet or a digit or an underscore. Non-english letters (like cyricllic or hindi) do not belong to `\w`.
+
+For instance, `pattern:\d\s\w` means a digit followed by a space character followed by a wordly character, like `"1 Z"`.
+
+A regexp may contain both regular symbols and character classes.
+
+For instance, `pattern:CSS\d` matches a string `match:CSS` with a digit after it:
+
+```js run
+let str = "CSS4 is cool";
+let reg = /CSS\d/
+
+alert( str.match(reg) ); // CSS4
+```
+
+Also we can use many character classes:
+
+```js run
+alert( "I love HTML5!".match(/\s\w\w\w\w\d/) ); // 'HTML5'
+```
+
+The match (each character class corresponds to one result character):
+
+![](love-html5-classes.png)
+
+## Word boundary: \b
+
+The word boundary `pattern:\b` -- is a special character class.
+
+It does not denote a character, but rather a boundary between characters.
+
+For instance, `pattern:\bJava\b` matches `match:Java` in the string `subject:Hello, Java!`, but not in the script `subject:Hello, Javascript!`.
+
+```js run
+alert( "Hello, Java!".match(/\bJava\b/) ); // Java
+alert( "Hello, Javascript!".match(/\bJava\b/) ); // null
+```
+
+The boundary has "zero width" in a sense that usually a character class means a character in the result (like a wordly or a digit), but not in this case.
+
+The boundary is a test.
+
+When regular expression engine is doing the search, it's moving along the string in an attempt to find the match. At each string position it tries to find the pattern.
+
+When the pattern contains `pattern:\b`, it tests that the position in string fits one of the conditions:
+
+- String start, and the first string character is `\w`.
+- String end, and the last string character is `\w`.
+- Inside the string: from one side is `\w`, from the other side -- not `\w`.
+
+For instance, in the string `subject:Hello, Java!` the following positions fit `\b`:
+
+![](hello-java-boundaries.png)
+
+So it matches `pattern:\bHello\b` and `pattern:\bJava\b`, but not `pattern:\bHell\b` (because there's no word boundary after `l`) and not `Java!\b` (because the exclamation sign is not a wordly character, so there's no word boundary after it).
+
+```js run
+alert( "Hello, Java!".match(/\bHello\b/) ); // Hello
+alert( "Hello, Java!".match(/\Java\b/) );  // Java
+alert( "Hello, Java!".match(/\Hell\b/) );  // null
+alert( "Hello, Java!".match(/\Java!\b/) ); // null
+```
+
+Once again let's note that `pattern:\b` makes the searching engine to test for the boundary, so that `pattern:Java\b` finds `match:Java` only when followed by a word boundary, but it does not add a letter to the result.
+
+Usually we use `\b` to find standalone English words. So that if we want `"Java"` language then `pattern:\bJava\b` finds exactly a standalone word and ignores it when it's a part of `"Javascript"`.
+
+Another example: a regexp `pattern:\b\d\d\b` looks for standalone two-digit numbers. In other words, it requires that before and after `pattern:\d\d` must be a symbol different from `\w` (or beginning/end of the string).
+
+```js run
+alert( "1 23 456 78".match(/\b\d\d\b/g) ); // 23,78
+```
+
+## Reverse classes
+
+For every character class there exists a "reverse class", denoted with the same letter, but uppercased.
+
+The "reverse" means that it matches all other characters, for instance:
+
+`\D`
+: Non-digit: any character except `\d`, for instance a letter.
+
+`\S`
+: Non-space: any character except `\s`, for instance a letter.
+
+`\W`
+: Non-wordly character: anything but `\w`.
+
+`\B`
+: Non-boundary: a test reverse to `\b`.
+
+In the beginning of the chapter we saw how to get all digits from the phone `subject:+7(903)-123-45-67`. Let's get a "pure" phone number from the string:
+
+```js run
+let str = "+7(903)-123-45-67";
+
+alert( str.match(/\d/g).join('') ); // 79031234567
+```
+
+An alternative way would be to find non-digits and remove them from the string:
+
+
+```js run
+let str = "+7(903)-123-45-67";
+
+alert( str.replace(/\D/g, "") ); // 79031234567
+```
+
+## Spaces are regular characters
+
+Please note that regular expressions may include spaces. They are treated like regular characters.  
+
+Usually we pay little attention to spaces. For us strings `subject:1-5` and `subject:1 - 5` are nearly identical.
+
+But if a regexp does not take spaces into account, it won' work.
+
+Let's try to find digits separated by a dash:
+
+```js run
+alert( "1 - 5".match(/\d-\d/) ); // null, no match!
+```
+
+Here we fix it by adding spaces into the regexp:
+
+```js run
+alert( "1 - 5".match(/\d - \d/) ); // 1 - 5, now it works
+```
+
+Of course, spaces are needed only if we look for them. Extra spaces (just like any other extra characters) may prevent a match:
+
+```js run
+alert( "1-5".match(/\d - \d/) ); // null, because the string 1-5 has no spaces
+```
+
+In other words, in a regular expression all characters matter. Spaces too.
+
+## A dot is any character
+
+The dot `"."` is a special character class that matches *any character except a newline*.
+
+For instance:
+
+```js run
+alert( "Z".match(/./) ); // Z
+```
+
+Or in the middle of a regexp:
+
+```js run
+let reg = /CS.4/;
+
+alert( "CSS4".match(reg) ); // CSS4
+alert( "CS-4".match(reg) ); // CS-4
+alert( "CS 4".match(reg) ); // CS 4 (space is also a character)
+```
+
+Please note that the dot means "any character", but not the "absense of a character". There must be a character to match it:
+
+```js run
+alert( "CS4".match(/CS.4/) ); // null, no match because there's no character for the dot
+```
+
+
+## Summary
+
+We covered character classes:
+
+- `\d` -- digits.
+- `\D` -- non-digits.
+- `\s` -- space symbols, tabs, newlines.
+- `\S` -- all but `\s`.
+- `\w` -- English letters, digits, underscore `'_'`.
+- `\W` -- all but `\w`.
+- `'.'` -- any character except a newline.
+
+If we want to search for a character that has a special meaning like a backslash or a dot, then we should escape it with a backslash: `pattern:\.`
+
+Please note that a regexp may also contain string special characters such as a newline `\n`. There's no conflict with character classes, because other letters are used for them.
diff --git a/10-regular-expressions-javascript/03-regexp-character-classes/hello-java-boundaries.png b/10-regular-expressions-javascript/03-regexp-character-classes/hello-java-boundaries.png
new file mode 100644
index 00000000..ba293e6d
Binary files /dev/null and b/10-regular-expressions-javascript/03-regexp-character-classes/hello-java-boundaries.png differ
diff --git a/10-regular-expressions-javascript/03-regexp-character-classes/hello-java-boundaries@2x.png b/10-regular-expressions-javascript/03-regexp-character-classes/hello-java-boundaries@2x.png
new file mode 100644
index 00000000..9ebf623b
Binary files /dev/null and b/10-regular-expressions-javascript/03-regexp-character-classes/hello-java-boundaries@2x.png differ
diff --git a/10-regular-expressions-javascript/03-regexp-character-classes/love-html5-classes.png b/10-regular-expressions-javascript/03-regexp-character-classes/love-html5-classes.png
new file mode 100644
index 00000000..b8ed77c0
Binary files /dev/null and b/10-regular-expressions-javascript/03-regexp-character-classes/love-html5-classes.png differ
diff --git a/10-regular-expressions-javascript/03-regexp-character-classes/love-html5-classes@2x.png b/10-regular-expressions-javascript/03-regexp-character-classes/love-html5-classes@2x.png
new file mode 100644
index 00000000..9fb998b9
Binary files /dev/null and b/10-regular-expressions-javascript/03-regexp-character-classes/love-html5-classes@2x.png differ
diff --git a/10-regular-expressions-javascript/035-regexp-escaping/article.md b/10-regular-expressions-javascript/035-regexp-escaping/article.md
new file mode 100644
index 00000000..6a218c58
--- /dev/null
+++ b/10-regular-expressions-javascript/035-regexp-escaping/article.md
@@ -0,0 +1,50 @@
+
+# Special characters
+
+As we've seen, a backslash `"\"` is used to denote character classes. So it's a special character.
+
+There are other special characters as well, that have special meaning in a regexp. They are used to do more powerful searches.
+
+Here's a full list of them: `pattern:[ \ ^ $ . | ? * + ( )`.
+
+Don't try to remember it -- when we deal with each of them separately, you'll know it by heart automatically.
+
+## Escaping
+
+To use a special character as a regular one, prepend it with a backslash.
+
+That's also called "escaping a character".
+
+For instance, we need to find a dot `pattern:'.'`. In a regular expression a dot means "any character except a newline", so if we really mean "a dot", let's put a backslash before it: `pattern:\.`.
+
+```js run
+alert( "Chapter 5.1".match(/\d\.\d/) ); // 5.1
+```
+
+Brackets are also special characters, so if we want them, we should use `pattern:\(`. The example below looks for a string `"g()"`:
+
+```js run
+alert( "function g()".match(/g\(\)/) ); // "g()"
+```
+
+If we're looking for a backslash `\`, then we should double it:
+
+```js run
+alert( "1\2".match(/\\/) ); // '\'
+```
+
+## A slash
+
+The slash symbol `'/'` is not a special character, but in Javascript it is used to open and close the regexp: `pattern:/...pattern.../`, so we should escape it too.
+
+Here's what a search for a slash `'/'` looks like:
+
+```js run
+alert( "/".match(/\//) ); // '/'
+```
+
+From the other hand, the alternative `new RegExp` syntaxes does not require escaping it:
+
+```js run
+alert( "/".match(new RegExp()/\//) ); // '/'
+```
diff --git a/10-regular-expressions-javascript/04-regexp-character-sets-and-ranges/1-find-range-1/solution.md b/10-regular-expressions-javascript/04-regexp-character-sets-and-ranges/1-find-range-1/solution.md
new file mode 100644
index 00000000..a6d71f66
--- /dev/null
+++ b/10-regular-expressions-javascript/04-regexp-character-sets-and-ranges/1-find-range-1/solution.md
@@ -0,0 +1,12 @@
+Answers: **no, yes**.
+
+- In the script `subject:Java` it doesn't match anything, because `pattern:[^script]` means "any character except given ones". So the regexp looks for `"Java"` followed by one such symbol, but there's a string end, no symbols after it.
+
+    ```js run
+    alert( "Java".match(/Java[^script]/) ); // null
+    ```
+- Yes, because the regexp is case-insensitive, the `pattern:[^script]` part matches the character `"S"`.
+
+    ```js run
+    alert( "JavaScript".match(/Java[^script]/) ); // "JavaS"
+    ```
diff --git a/10-regular-expressions-javascript/04-regexp-character-sets-and-ranges/1-find-range-1/task.md b/10-regular-expressions-javascript/04-regexp-character-sets-and-ranges/1-find-range-1/task.md
new file mode 100644
index 00000000..5a48e01e
--- /dev/null
+++ b/10-regular-expressions-javascript/04-regexp-character-sets-and-ranges/1-find-range-1/task.md
@@ -0,0 +1,5 @@
+# Java[^script]
+
+We have a regexp `pattern:/Java[^script]/`.
+
+Does it match anything in the string `subject:Java`? In the string `subject:JavaScript`?
diff --git a/10-regular-expressions-javascript/04-regexp-character-sets-and-ranges/2-find-time-2-formats/solution.md b/10-regular-expressions-javascript/04-regexp-character-sets-and-ranges/2-find-time-2-formats/solution.md
new file mode 100644
index 00000000..349743dd
--- /dev/null
+++ b/10-regular-expressions-javascript/04-regexp-character-sets-and-ranges/2-find-time-2-formats/solution.md
@@ -0,0 +1,8 @@
+Ответ: `pattern:\d\d[-:]\d\d`.
+
+```js run
+var re = /\d\d[-:]\d\d/g;
+alert( "Завтрак в 09:00. Обед - в 21-30".match(re) );
+```
+
+Обратим внимание, что дефис `pattern:'-'` не экранирован, поскольку в начале скобок он не может иметь специального смысла.
diff --git a/10-regular-expressions-javascript/04-regexp-character-sets-and-ranges/2-find-time-2-formats/task.md b/10-regular-expressions-javascript/04-regexp-character-sets-and-ranges/2-find-time-2-formats/task.md
new file mode 100644
index 00000000..dd03af58
--- /dev/null
+++ b/10-regular-expressions-javascript/04-regexp-character-sets-and-ranges/2-find-time-2-formats/task.md
@@ -0,0 +1,11 @@
+# Найдите время в одном из форматов
+
+Время может быть в формате `часы:минуты` или `часы-минуты`. И часы и минуты состоят из двух цифр, например `09:00`, `21-30`.
+
+Напишите регулярное выражение для поиска времени:
+
+```js
+var re = /ваше выражение/;
+alert( "Завтрак в 09:00. Обед - в 21-30".match(re) ); // 09:00, 21-30
+```
+
diff --git a/10-regular-expressions-javascript/04-regexp-character-sets-and-ranges/article.md b/10-regular-expressions-javascript/04-regexp-character-sets-and-ranges/article.md
new file mode 100644
index 00000000..463b89b4
--- /dev/null
+++ b/10-regular-expressions-javascript/04-regexp-character-sets-and-ranges/article.md
@@ -0,0 +1,116 @@
+# Sets and ranges [...]
+
+Several characters or character classes inside square brackets `[…]` mean to "search for any character among given".
+
+[cut]
+
+## Sets
+
+For instance, `pattern:[еао]` means any of the 3 characters: `'а'`, `'е'`, or `'о'`.
+
+That's calles a *set*. Sets can be used in a regexp along with regular characters:
+
+```js run
+// find [t or m], and then "op"
+alert( "Mop top".match(/[tm]op/gi) ); // "Mop", "top"
+```
+
+Please note that although there are multiple characters in the set, they correspond to exactly one character in the match.
+
+So the example above gives no matches:
+
+```js run
+// find "V", then [o or i], then "la"
+alert( "Voila".match(/V[oi]la/) ); // null, no matches
+```
+
+The pattern assumes:
+
+- `pattern:В`,
+- then *одну* of the letters `pattern:[oi]`,
+- then `pattern:la`.
+
+So there would be a match for `match:Vola` or `match:Vila`.
+
+## Ranges
+
+Square brackets may also contain *character ranges*.
+
+For instance, `pattern:[a-z]` is a character in range from `a` to `z`, and `pattern:[0-5]` is a digit from `0` to `5`.
+
+In the example below we're searching for `"x"` followed by two digits or letters from `A` to `F`:
+
+```js run
+alert( "Exception 0xAF".match(/x[0-9A-F][0-9A-F]/g) ); // xAF
+```
+
+Please note that in the word `subject:Exception` there's a substring `subject:xce`. It didn't match the pattern, because the letters are lowercase, while in the set `pattern:[0-9A-F]` they are uppercase.
+
+If we want to find it too, then we can add a range `a-f`: `pattern:[0-9A-Fa-f]`. The `i` flag would allow lowercase too.
+
+**Character classes are shorthands for certain character sets.**
+
+For instance:
+
+- **\d** -- is the same as `pattern:[0-9]`,
+- **\w** -- is the same as `pattern:[a-zA-Z0-9_]`,
+- **\s** -- is the same as `pattern:[\t\n\v\f\r ]` plus few other unicode space characters.
+
+We can use character classes inside `[…]` as well.
+
+For instance, we want to match all wordly characters or a dash, for words like "twenty-third". We can't do it with `pattern:\w+`, because `pattern:\w` class does not include a dash. But we can use `pattern:[\w-]`.
+
+We also can use a combination of classes to cover every possible character, like `pattern:[\s\S]`. That matches spaces or non-spaces -- any character. That's wider than a dot `"."`, because the dot matches any character except a newline.
+
+## Excluding ranges
+
+Besides normal ranges, there are "excluding" ranges that look like `pattern:[^…]`.
+
+They are denoted by a caret character `^` at the start and match any character *except the given ones*.
+
+For instance:
+
+- `pattern:[^аеуо]` -- any character except  `'a'`, `'e'`, `'y'` or `'o'`.
+- `pattern:[^0-9]` -- any character except a digit, the same as `\D`.
+- `pattern:[^\s]` -- any non-space character, same as `\S`.
+
+The example below looks for any characters except letters, digits and spaces:
+
+```js run
+alert( "alice15@gmail.com".match(/[^\d\sA-Z]/gi) ); // @ and .
+```
+
+## No escaping in […]
+
+Usually when we want to find exactly the dot character, we need to escape it like `pattern:\.`. And if we need a backslash, then we use `pattern:\\`.
+
+In square brackets the vast majority of special characters can be used without escaping:
+
+- A dot `pattern:'.'`.
+- A plus `pattern:'+'`.
+- Brackets `pattern:'( )'`.
+- Dash `pattern:'-'` in the beginning or the end (where it does not define a range).
+- A caret `pattern:'^'` if not in the beginning (where it means exclusion).
+- And the opening square bracket `pattern:'['`.
+
+In other words, all special charactere are allowed except where they mean something for square brackets.
+
+A dot `"."` inside square brackets means just a dot. The pattern `pattern:[.,]` would look for one of characters: either a dot or a comma.
+
+In the example below the regexp `pattern:[-().^+]` looks for one of the characters `-().^`:
+
+```js run
+// No need to escape
+let reg = /[-().^+]/g;
+
+alert( "1 + 2 - 3".match(reg) ); // Matches +, -
+```
+
+...But if you decide to escape them "just in case", then there would be no harm:
+
+```js run
+// Escaped everything
+let reg = /[\-\(\)\.\^\+]/g;
+
+alert( "1 + 2 - 3".match(reg) ); // also works: +, -
+```
diff --git a/10-regular-expressions-javascript/05-regexp-unicode/article.md b/10-regular-expressions-javascript/05-regexp-unicode/article.md
new file mode 100644
index 00000000..39e6b46e
--- /dev/null
+++ b/10-regular-expressions-javascript/05-regexp-unicode/article.md
@@ -0,0 +1,69 @@
+
+# The unicode flag
+
+The unicode flag `/.../u` enables the correct support of surrogate pairs.
+
+Surrogate pairs are explained in the chapter <info:string>.
+
+Let's briefly remind them here. In short, normally characters are encoded with 2 bytes. That gives us 65536 characters maximum. But there are more characters in the world.
+
+So certain rare characters are encoded with 4 bytes, like `𝒳` (mathematical X) or `😄` (a smile).
+
+Here are the unicode values to compare:
+
+| Character  | Unicode | Bytes  |
+|------------|---------|--------|
+| `a` | 0x0061 |  2 |
+| `≈` | 0x2248 |  2 |
+|`𝒳`| 0x1d4b3 | 4 |
+|`𝒴`| 0x1d4b4 | 4 |
+|`😄`| 0x1f604 | 4 |
+
+So characters like `a` and `≈` occupy 2 bytes, and those rare ones take 4.
+
+The unicode is made in such a way that the 4-byte characters only have a meaning as a whole.
+
+In the past Javascript did not know about that, and many string methods still have problems. For instance, `length` thinks that here are two characters:
+
+```js run
+alert('😄'.length); // 2
+alert('𝒳'.length); // 2
+```
+
+...But we can see that there's only one, right? The point is that `length` treats 4 bytes as two 2-byte characters. That's incorrect, because they must be considered only together (so-called "surrogate pair").
+
+Normally, regular expressions also treat "long characters" as two 2-byte ones.
+
+That leads to odd results, for instance let's try to find `pattern:[𝒳𝒴]` in the string `subject:𝒳`:
+
+```js run
+alert( '𝒳'.match(/[𝒳𝒴]/) ); // odd result
+```
+
+The result would be wrong, because by default the regexp engine does not understand surrogate pairs. It thinks that `[𝒳𝒴]` are not two, but four characters: the left half of `𝒳` `(1)`, the right half of `𝒳` `(2)`, the left half of `𝒴` `(3)`, the right half of `𝒴` `(4)`.
+
+So it finds the left half of `𝒳` in the string `𝒳`, not the whole symbol.
+
+In other words, the search works like `'12'.match(/[1234]/)` -- the `1` is returned (left half of `𝒳`).
+
+The `/.../u` flag fixes that. It enables surrogate pairs in the regexp engine, so the result is correct:
+
+```js run
+alert( '𝒳'.match(/[𝒳𝒴]/u) ); // 𝒳
+```
+
+There's an error that may happen if we forget the flag:
+
+```js run
+'𝒳'.match(/[𝒳-𝒴]/); // SyntaxError: invalid range in character class
+```
+
+Here the regexp `[𝒳-𝒴]` is treated as `[12-34]` (where `2` is the right part of `𝒳` and `3` is the left part of `𝒴`), and the range between two halves `2` and `3` is unacceptable.
+
+Using the flag would make it work right:
+
+```js run
+alert( '𝒴'.match(/[𝒳-𝒵]/u) ); // 𝒴
+```
+
+To finalize, let's note that if we do not deal with surrogate pairs, then the flag does nothing for us. But in the modern world we often meet them.
diff --git a/10-regular-expressions-javascript/06-regexp-quantifiers/1-find-text-manydots/solution.md b/10-regular-expressions-javascript/06-regexp-quantifiers/1-find-text-manydots/solution.md
new file mode 100644
index 00000000..d4ddb136
--- /dev/null
+++ b/10-regular-expressions-javascript/06-regexp-quantifiers/1-find-text-manydots/solution.md
@@ -0,0 +1,9 @@
+
+Solution:
+
+```js run
+let reg = /\.{3,}/g;
+alert( "Hello!... How goes?.....".match(reg) ); // ..., .....
+```
+
+Please note that the dot is a special character, so we have to escape it and insert as `\.`.
diff --git a/10-regular-expressions-javascript/06-regexp-quantifiers/1-find-text-manydots/task.md b/10-regular-expressions-javascript/06-regexp-quantifiers/1-find-text-manydots/task.md
new file mode 100644
index 00000000..6fd91bdc
--- /dev/null
+++ b/10-regular-expressions-javascript/06-regexp-quantifiers/1-find-text-manydots/task.md
@@ -0,0 +1,14 @@
+importance: 5
+
+---
+
+#  How to find an ellipsis "..." ?
+
+Create a regexp to find ellipsis: 3 (or more?) dots in a row.
+
+Check it:
+
+```js
+let reg = /your regexp/g;
+alert( "Hello!... How goes?.....".match(reg) ); // ..., .....
+```
diff --git a/10-regular-expressions-javascript/06-regexp-quantifiers/2-find-html-colors-6hex/solution.md b/10-regular-expressions-javascript/06-regexp-quantifiers/2-find-html-colors-6hex/solution.md
new file mode 100644
index 00000000..811381cf
--- /dev/null
+++ b/10-regular-expressions-javascript/06-regexp-quantifiers/2-find-html-colors-6hex/solution.md
@@ -0,0 +1,32 @@
+Итак, нужно написать выражение для описания цвета, который начинается с "#", за которым следуют 6 шестнадцатеричных символов.
+
+Шестнадцатеричный символ можно описать с помощью `pattern:[0-9a-fA-F]`. Мы можем сократить выражение, используя не чувствительный к регистру шаблон `pattern:[0-9a-f]`.
+
+Для его шестикратного повторения мы будем использовать квантификатор `pattern:{6}`.
+
+В итоге, получаем выражение вида `pattern:/#[a-f0-9]{6}/gi`.
+
+```js run
+var re = /#[a-f0-9]{6}/gi;
+
+var str = "color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2";
+
+alert( str.match(re) );  // #121212,#AA00ef
+```
+
+Проблема этого выражения в том, что оно находит цвет и в более длинных последовательностях:
+
+```js run
+alert( "#12345678".match( /#[a-f0-9]{6}/gi ) ) // #12345678
+```
+
+Чтобы такого не было, можно добавить в конец `\b`:
+
+```js run
+// цвет
+alert( "#123456".match( /#[a-f0-9]{6}\b/gi ) ); // #123456
+
+// не цвет
+alert( "#12345678".match( /#[a-f0-9]{6}\b/gi ) ); // null
+```
+
diff --git a/10-regular-expressions-javascript/06-regexp-quantifiers/2-find-html-colors-6hex/task.md b/10-regular-expressions-javascript/06-regexp-quantifiers/2-find-html-colors-6hex/task.md
new file mode 100644
index 00000000..ea2dbf18
--- /dev/null
+++ b/10-regular-expressions-javascript/06-regexp-quantifiers/2-find-html-colors-6hex/task.md
@@ -0,0 +1,14 @@
+# Регулярное выражение для цвета
+
+Напишите регулярное выражение для поиска HTML-цвета, заданного как `#ABCDEF`, то есть `#` и содержит затем 6 шестнадцатеричных символов.
+
+Пример использования:
+
+```
+var re = /*...ваше регулярное выражение...*/
+
+var str = "color:#121212; background-color:#AA00ef bad-colors:f#fddee #fd2"
+
+alert( str.match(re) )  // #121212,#AA00ef
+```
+
diff --git a/10-regular-expressions-javascript/06-regexp-quantifiers/3-find-decimal-positive-numbers/solution.md b/10-regular-expressions-javascript/06-regexp-quantifiers/3-find-decimal-positive-numbers/solution.md
new file mode 100644
index 00000000..fa6db2c0
--- /dev/null
+++ b/10-regular-expressions-javascript/06-regexp-quantifiers/3-find-decimal-positive-numbers/solution.md
@@ -0,0 +1,18 @@
+
+
+Целое число -- это `pattern:\d+`.
+
+Десятичная точка с дробной частью -- `pattern:\.\d+`.
+
+Она не обязательна, так что обернём её в скобки с квантификатором `pattern:'?'`.
+
+Итого, получилось регулярное выражение `pattern:\d+(\.\d+)?`:
+
+```js run
+var re = /\d+(\.\d+)?/g
+
+var str = "1.5 0 12. 123.4.";
+
+alert( str.match(re) );   // 1.5, 0, 12, 123.4
+```
+
diff --git a/10-regular-expressions-javascript/06-regexp-quantifiers/3-find-decimal-positive-numbers/task.md b/10-regular-expressions-javascript/06-regexp-quantifiers/3-find-decimal-positive-numbers/task.md
new file mode 100644
index 00000000..e353cf43
--- /dev/null
+++ b/10-regular-expressions-javascript/06-regexp-quantifiers/3-find-decimal-positive-numbers/task.md
@@ -0,0 +1,13 @@
+# Найдите положительные числа
+
+Создайте регэксп, который ищет все положительные числа, в том числе и с десятичной точкой.
+
+Пример использования:
+
+```js
+var re = /* ваш регэксп */
+
+var str = "1.5 0 12. 123.4.";
+
+alert( str.match(re) );   // 1.5, 0, 12, 123.4
+```
diff --git a/10-regular-expressions-javascript/06-regexp-quantifiers/4-find-decimal-numbers/solution.md b/10-regular-expressions-javascript/06-regexp-quantifiers/4-find-decimal-numbers/solution.md
new file mode 100644
index 00000000..417dc1b0
--- /dev/null
+++ b/10-regular-expressions-javascript/06-regexp-quantifiers/4-find-decimal-numbers/solution.md
@@ -0,0 +1,12 @@
+Целое число с необязательной дробной частью -- это `pattern:\d+(\.\d+)?`.
+
+К этому нужно добавить необязательный `-` в начале:
+
+```js run
+var re = /-?\d+(\.\d+)?/g
+
+var str = "-1.5 0 2 -123.4.";
+
+alert( str.match(re) );   // -1.5, 0, 2, -123.4
+```
+
diff --git a/10-regular-expressions-javascript/06-regexp-quantifiers/4-find-decimal-numbers/task.md b/10-regular-expressions-javascript/06-regexp-quantifiers/4-find-decimal-numbers/task.md
new file mode 100644
index 00000000..01825ef3
--- /dev/null
+++ b/10-regular-expressions-javascript/06-regexp-quantifiers/4-find-decimal-numbers/task.md
@@ -0,0 +1,13 @@
+# Найдите десятичные числа
+
+Создайте регэксп, который ищет все числа, в том числе и с десятичной точкой, в том числе и отрицательные.
+
+Пример использования:
+
+```js
+var re = /* ваш регэксп */
+
+var str = "-1.5 0 2 -123.4.";
+
+alert( str.match(re) );   // -1.5, 0, 2, -123.4
+```
diff --git a/10-regular-expressions-javascript/06-regexp-quantifiers/article.md b/10-regular-expressions-javascript/06-regexp-quantifiers/article.md
new file mode 100644
index 00000000..3259cc14
--- /dev/null
+++ b/10-regular-expressions-javascript/06-regexp-quantifiers/article.md
@@ -0,0 +1,133 @@
+# Quantifiers +, *, ? and {n}
+
+Let's say we have a string like `+7(903)-123-45-67` and want to find all numbers in it. But unlike before, we are interested in not digits, but full numbers: `7, 903, 123, 45, 67`.
+
+A number is a sequence of 1 or more digits `\d`. The instrument to say how many we need is called *quantifiers*.
+
+## Quantity {n}
+
+The most obvious quantifier is a number in figure quotes: `pattern:{n}`. A quantifier is put after a character (or a character class and so on) and specifies exactly how many we need.
+
+It also has advanced forms, here we go with examples:
+
+Exact count: `{5}`
+: `pattern:\d{5}` denotes exactly 5 digits, the same as `pattern:\d\d\d\d\d`.
+
+    The example below looks for a 5-digit number:
+
+    ```js run
+    alert( "I'm 12345 years old".match(/\d{5}/) ); //  "12345"
+    ```
+
+    We can add `\b` to exclude longer numbers: `pattern:\b\d{5}\b`.
+
+The count from-to: `{3,5}`
+: To find numbers from 3 to 5 digits we can put the limits into figure brackets: `pattern:\d{3,5}`
+
+    ```js run
+    alert( "I'm not 12, but 1234 years old".match(/\d{3,5}/) ); // "1234"
+    ```
+
+    We can omit the upper limit. Then a regexp `pattern:\d{3,}` looks for numbers of `3` and more digits:
+
+    ```js run
+    alert( "I'm not 12, but 345678 years old".match(/\d{3,}/) ); // "345678"
+    ```
+
+In case with the string `+7(903)-123-45-67` we need numbers: one or more digits in a row. That is  `pattern:\d{1,}`:
+
+```js run
+let str = "+7(903)-123-45-67";
+
+let numbers = str.match(/\d{1,}/g);
+
+alert(numbers); // 7,903,123,45,67
+```
+
+## Shorthands
+
+Most often needed quantifiers have shorthands:
+
+`+`
+: Means "one or more", the same as `{1,}`.
+
+    For instance, `pattern:\d+` looks for numbers:
+
+    ```js run
+    let str = "+7(903)-123-45-67";
+
+    alert( str.match(/\d+/g) ); // 7,903,123,45,67
+    ```
+
+`?`
+: Means "zero or one", the same as `{0,1}`. In other words, it makes the symbol optional.
+
+    For instance, the pattern `pattern:ou?r` looks for `match:o` followed by zero or one `match:u`, and then `match:r`.
+
+    So it can find `match:or` in the word `subject:color` and `match:our` in `subject:colour`:
+
+    ```js run
+    let str = "Should I write color or colour?";
+
+    alert( str.match(/colou?r/g) ); // color, colour
+    ```
+
+`*`
+: Means "zero or more", the same as `{0,}`. That is, the character may repeat any times or be absent.
+
+    The example below looks for a digit followed by any number of zeroes:
+
+    ```js run
+    alert( "100 10 1".match(/\d0*/g) ); // 100, 10, 1
+    ```
+
+    Compare it with `'+'` (one or more):
+
+    ```js run
+    alert( "100 10 1".match(/\d0+/g) ); // 100, 10
+    ```
+
+## More examples
+
+Quantifiers are used very often. They are one of the main "building blocks" for complex regular expressions, so let's see more examples.
+
+Regexp "decimal fraction" (a number with a floating point): `pattern:\d+\.\d+`
+: In action:
+    ```js run
+    alert( "0 1 12.345 7890".match(/\d+\.\d+/g) ); // 12.345
+    ```
+
+Regexp "open HTML-tag without attributes", like `<span>` or `<p>`: `pattern:/<[a-z]+>/i`
+: In action:
+
+    ```js run
+    alert( "<body> ... </body>".match(/<[a-z]+>/gi) ); // <body>
+    ```
+
+    We look for character `pattern:'<'` followed by one or more English letters, and then  `pattern:'>'`.
+
+Regexp "open HTML-tag without attributes" (improved): `pattern:/<[a-z][a-z0-9]*>/i`
+: Better regexp: according to the standard, HTML tag name may have a digit at any position except the first one, like `<h1>`.
+
+    ```js run
+    alert( "<h1>Hi!</h1>".match(/<[a-z][a-z0-9]*>/gi) ); // <h1>
+    ```
+
+Regexp "opening or closing HTML-tag without attributes": `pattern:/<\/?[a-z][a-z0-9]*>/i`
+: We added an optional slash `pattern:/?` before the tag. Had to escape it with a backslash, otherwise Javascript would think it is the pattern end.
+
+    ```js run
+    alert( "<h1>Hi!</h1>".match(/<\/?[a-z][a-z0-9]*>/gi) ); // <h1>, </h1>
+    ```
+
+```smart header="More precise means more complex"
+We can see one common rule in these examples: the more precise is the regular expression -- the longer and more complex it is.
+
+For instance, HTML tags could use a simpler regexp: `pattern:<\w+>`.
+
+Because `pattern:\w` means any English letter or a digit or `'_'`, the regexp also matches non-tags, for instance `match:<_>`. But it's much simpler than `pattern:<[a-z][a-z0-9]*>`.
+
+Are we ok with `pattern:<\w+>` or we need `pattern:<[a-z][a-z0-9]*>`?
+
+In real life both variants are acceptable. Depends on how tolerant we can be to "extra" matches and whether it's difficult or not to filter them out by other means.
+```
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/1-lazy-greedy/solution.md b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/1-lazy-greedy/solution.md
new file mode 100644
index 00000000..838534ee
--- /dev/null
+++ b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/1-lazy-greedy/solution.md
@@ -0,0 +1,6 @@
+
+Результат: `123 456`.
+
+Ленивый `\d+?` будет брать цифры до пробела, то есть `123`. После каждой цифры он будет останавливаться, проверять -- не пробел ли дальше? Если нет -- брать ещё цифру, в итоге возьмёт `123`.
+
+Затем в дело вступит `\d+`, который по-максимуму возьмёт дальнейшие цифры, то есть `456`.
\ No newline at end of file
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/1-lazy-greedy/task.md b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/1-lazy-greedy/task.md
new file mode 100644
index 00000000..f8889ea4
--- /dev/null
+++ b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/1-lazy-greedy/task.md
@@ -0,0 +1,8 @@
+# Совпадение для /d+? d+/
+
+Что будет при таком поиске, когда сначала стоит ленивый, а потом жадный квантификаторы?
+
+```js
+"123 456".match(/\d+? \d+/g) ); // какой результат?
+```
+
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/2-difference-find-quote/solution.md b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/2-difference-find-quote/solution.md
new file mode 100644
index 00000000..e8b0ee73
--- /dev/null
+++ b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/2-difference-find-quote/solution.md
@@ -0,0 +1,15 @@
+Они очень похожи и, да, *почти* одинаковы. Оба ищут от одной кавычки до другой.
+
+Различие здесь в символе точка `pattern:'.'`. Как мы помним, точка `pattern:'.'` обозначает *любой символ, кроме перевода строки*.
+
+А `pattern:[^"]` -- это *любой символ, кроме кавычки `pattern:'"'`.
+
+Получается, что первый регэксп `pattern:"[^"]*"` найдёт закавыченные строки с `\n` внутри, а второй регэксп `pattern:".*?"` -- нет.
+
+Вот пример:
+```js run
+alert( '"многострочный \n текст"'.match(/"[^"]*"/) ); // найдёт
+
+alert( '"многострочный \n текст"'.match(/".*?"/) ); // null (нет совпадений)
+```
+
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/2-difference-find-quote/task.md b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/2-difference-find-quote/task.md
new file mode 100644
index 00000000..fb9c168e
--- /dev/null
+++ b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/2-difference-find-quote/task.md
@@ -0,0 +1,5 @@
+# Различие между "[^"]*" и ".*?"
+
+Регулярные выражения `pattern:"[^"]*"` и `pattern:".*?"` -- при выполнении одинаковы?
+
+Иначе говоря, существует ли такая строка, на которой они дадут разные результаты? Если да -- дайте такую строку.
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/3-find-html-comments/solution.md b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/3-find-html-comments/solution.md
new file mode 100644
index 00000000..b5c3b9e3
--- /dev/null
+++ b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/3-find-html-comments/solution.md
@@ -0,0 +1,17 @@
+Нужно найти начало комментария `match:<!--`, затем всё до конца `match:-->`.
+
+С первого взгляда кажется, что это сделает регулярное выражение `pattern:<!--.*?-->` -- квантификатор сделан ленивым, чтобы остановился, достигнув `match:-->`.
+
+Однако, точка в JavaScript -- любой символ, *кроме* конца строки. Поэтому такой регэксп не найдёт многострочный комментарий.
+
+Всё получится, если вместо точки использовать полностю "всеядный" `pattern:[\s\S]`.
+
+Итого:
+
+```js run
+var re = /<!--[\s\S]*?-->/g;
+
+var str = '.. <!-- Мой -- комментарий \n тест --> ..  <!----> .. ';
+
+alert( str.match(re) ); // '<!-- Мой -- комментарий \n тест -->', '<!---->'
+```
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/3-find-html-comments/task.md b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/3-find-html-comments/task.md
new file mode 100644
index 00000000..f14f839b
--- /dev/null
+++ b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/3-find-html-comments/task.md
@@ -0,0 +1,12 @@
+# Найти HTML-комментарии
+
+Найдите все HTML-комментарии в тексте:
+
+```js
+var re = ..ваш регэксп..
+
+var str = '.. <!-- Мой -- комментарий \n тест --> ..  <!----> .. ';
+
+alert( str.match(re) ); // '<!-- Мой -- комментарий \n тест -->', '<!---->'
+```
+
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/solution.md b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/solution.md
new file mode 100644
index 00000000..bd0934dd
--- /dev/null
+++ b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/solution.md
@@ -0,0 +1,36 @@
+Начнём поиск с `pattern:<`, затем один или более произвольный символ, но до закрывающего "уголка": `pattern:.+?>`.
+
+Проверим, как работает этот регэксп:
+
+```js run
+var re = /<.+?>/g;
+
+var str = '<> <a href="/"> <input type="radio" checked> <b>';
+
+alert( str.match(re) ); // <> <a href="/">, <input type="radio" checked>, <b>
+```
+
+Результат неверен! В качестве первого тега регэксп нашёл подстроку `match:<> <a href="/">`, но это явно не тег.
+
+Всё потому, что `pattern:.+?` -- это "любой символ (кроме `\n`), повторяющийся один и более раз до того, как оставшаяся часть шаблона совпадёт (ленивость)".
+
+Поэтому он находит первый `<`, затем есть "всё подряд" до следующего `>`.
+
+Первое совпадение получается как раз таким:
+
+```
+<.............>
+<> <a href="/"> <input type="radio" checked> <b>
+```
+
+Правильным решением будет использовать `pattern:<[^>]+>`:
+
+```js run
+var re = /<[^>]+>/g
+
+var str = '<> <a href="/"> <input type="radio" checked> <b>';
+
+alert( str.match(re) ); // <a href="/">, <input type="radio" checked>, <b>
+```
+
+Это же решение автоматически позволяет находится внутри тегу символу `\n`, который в класс точка `.` не входит.
\ No newline at end of file
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/task.md b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/task.md
new file mode 100644
index 00000000..e0f4ce4f
--- /dev/null
+++ b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/4-find-html-tags-greedy-lazy/task.md
@@ -0,0 +1,17 @@
+# Найти HTML-теги
+
+Создайте регулярное выражение для поиска всех (открывающихся и закрывающихся) HTML-тегов вместе с атрибутами.
+
+Пример использования:
+```js run
+var re = /* ваш регэксп */
+
+var str = '<> <a href="/"> <input type="radio" checked> <b>';
+
+alert( str.match(re) ); // '<a href="/">', '<input type="radio" checked>', '<b>'
+```
+
+В этой задаче можно считать, что тег начинается с <code>&lt;</code>, заканчивается <code>&gt;</code> и может содержать внутри любые символы, кроме <code>&lt;</code> и <code>&gt;</code>.
+
+Но хотя бы один символ внутри тега должен быть: <code>&lt;&gt;</code> -- не тег.
+
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/article.md b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/article.md
new file mode 100644
index 00000000..db3f0a47
--- /dev/null
+++ b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/article.md
@@ -0,0 +1,308 @@
+# Жадные и ленивые квантификаторы
+
+Квантификаторы -- с виду очень простая, но на самом деле очень хитрая штука.
+
+Необходимо очень хорошо понимать, как именно происходит поиск, если конечно мы хотим искать что-либо сложнее чем `pattern:/\d+/`.
+
+[cut]
+
+Для примера рассмотрим задачу, которая часто возникает в типографике -- заменить в тексте кавычки вида `"..."` (их называют "английские кавычки") на "кавычки-ёлочки": `«...»`.
+
+Для этого нужно сначала найти все слова в таких кавычках.
+
+Соответствующее регулярное выражение может выглядеть так: `pattern:/".+"/g`, то есть мы ищем кавычку, после которой один или более произвольный символ, и в конце опять кавычка.
+
+Однако, если попробовать применить его на практике, даже на таком простом случае...
+
+```js run
+var reg = /".+"/g;
+
+var str = 'a "witch" and her "broom" is one';
+
+alert( str.match(reg) ); // "witch" and her "broom"
+```
+
+...Мы увидим, что оно работает совсем не так, как задумано!
+
+Вместо того, чтобы найти два совпадения `match:"witch"` и `match:"broom"`, оно находит одно: `match:"witch" and her "broom"`.
+
+Это как раз тот случай, когда *жадность* -- причина всех зол.
+
+## Жадный поиск
+
+Чтобы найти совпадение, движок регулярных выражений обычно использует следующий алгоритм:
+
+- Для каждой позиции в поисковой строке
+    - Проверить совпадение на данной позиции
+    - Посимвольно, с учётом классов и квантификаторов сопоставив с ней регулярное выражение.
+
+Это общие слова, гораздо понятнее будет, если мы проследим, что именно он делает для регэкспа `pattern:".+"`.
+
+1. Первый символ шаблона -- это кавычка `pattern:"`.
+
+    Движок регулярных выражений пытается сопоставить её на 0-й позиции в строке, но символ `a`, поэтому на 0-й позиции соответствия явно нет.
+
+    Далее он переходит 1ю, 2ю позицию в исходной строке и, наконец, обнаруживает кавычку на 3-й позиции:
+
+    ![](witch_greedy1.png)
+
+2. Кавычка найдена, далее движок проверяет, есть ли соответствие для остальной части паттерна.
+
+    В данном случае следующий символ шаблона: `pattern:.` (точка). Она обозначает "любой символ", так что следующая буква строки `match:'w'` вполне подходит:
+
+    ![](witch_greedy2.png)
+
+3. Далее "любой символ" повторяется, так как стоит квантификатор `pattern:.+`. Движок регулярных выражений берёт один символ за другим, до тех пор, пока у него это получается.
+
+    В данном случае это означает "до конца строки":
+
+    ![](witch_greedy3.png)
+
+4. Итак, текст закончился, движок регулярных выражений больше не может найти "любой символ", он закончил повторения для `pattern:.+` и переходит к следующему символу шаблона.
+
+    Следующий символ шаблона -- это кавычка. Её тоже необходимо найти, чтобы соответствие было полным. А тут -- беда, ведь поисковый текст завершился!
+
+    Движок регулярных выражений понимает, что, наверное, взял многовато `pattern:.+` и начинает отступать обратно.
+
+    Иными словами, он сокращает текущее совпадение на один символ:
+
+    ![](witch_greedy4.png)
+
+    Это называется "фаза возврата" или "фаза бэктрекинга" (backtracking -- англ.).
+
+    Теперь `pattern:.+` соответствует почти вся оставшаяся строка, за исключением одного символа, и движок регулярных выражений ещё раз пытается подобрать соответствие для остатка шаблона, начиная с оставшейся части строки.
+
+    Если бы последним символом строки была кавычка `pattern:'"'`, то на этом бы всё и закончилось. Но последний символ `subject:'e'`, так что совпадения нет.
+
+5. ...Поэтому движок уменьшает число повторений `pattern:.+` ещё на один символ:
+
+    ![](witch_greedy5.png)
+
+    Кавычка `pattern:'"'` не совпадает с `subject:'n'`. Опять неудача.
+
+6. Движок продолжает отступать, он уменьшает количество повторений точки `pattern:'.'` до тех пор, пока остаток паттерна, то есть в данном случае кавычка `pattern:'"'`, не совпадёт:
+
+    ![](witch_greedy6.png)
+
+7. Совпадение получено. Дальнейший поиск по оставшейся части строки `subject:is one` новых совпадений не даст.
+
+Возможно, это не совсем то, что мы ожидали.
+
+**В жадном режиме (по умолчанию) регэксп повторяет квантификатор настолько много раз, насколько это возможно, чтобы найти соответствие.**
+
+То есть, любой символ `pattern:.+` повторился максимальное количество раз, что и привело к такой длинной строке.
+
+А мы, наверное, хотели, чтобы каждая строка в кавычках была независимым совпадением? Для этого можно переключить квантификатор `+` в "ленивый" режим, о котором будет речь далее.
+
+## Ленивый режим
+
+Ленивый режим работы квантификаторов -- противоположность жадному, он означает "повторять минимальное количество раз".
+
+Его можно включить, если поставить знак вопроса `pattern:'?'` после квантификатора, так что он станет таким: `pattern:*?` или `pattern:+?` или даже `pattern:??` для `pattern:'?'`.
+
+Чтобы не возникло путаницы -- важно понимать: обычно `?` сам является квантификатором (ноль или один). Но если он стоит *после другого квантификатора (или даже после себя)*, то обретает другой смысл -- в этом случае он меняет режим его работы на ленивый.
+
+Регэксп `pattern:/".+?"/g` работает, как задумано -- находит отдельно `match:witch` и `match:broom`:
+
+```js run
+var reg = /".+?"/g;
+
+var str = 'a "witch" and her "broom" is one';
+
+alert( str.match(reg) ); // witch, broom
+```
+
+Чтобы в точности понять, как поменялась работа квантификатора, разберём поиск по шагам.
+
+1. Первый шаг -- тот же, кавычка `pattern:'"'` найдена на 3-й позиции:
+
+    ![](witch_greedy1.png)
+
+2. Второй шаг -- тот же, находим произвольный символ `pattern:'.'`:
+
+    ![](witch_greedy2.png)
+
+3. А вот дальше -- так как стоит ленивый режим работы `+`, то движок не повторит точку (произвольный символ) ещё раз, а останавливается на достигнутом и пытается проверить, есть ли соответствие остальной части шаблона, то есть `pattern:'"'`:
+
+    ![](witch_lazy3.png)
+
+    Если бы остальная часть шаблона на данной позиции совпала, то совпадение было бы найдено. Но в данном случае -- нет, символ `'i'` не равен '"'.
+4. Движок регулярных выражений увиличивает количество повторений точки на одно и пытается найти соответствие остатку шаблона ещё раз:
+
+    ![](witch_lazy4.png)
+Опять неудача. Тогда поисковой движок увеличивает количество повторений ещё и ещё...
+5. Только на пятом шаге поисковой движок наконец находит соответствие для остатка паттерна:
+
+    ![](witch_lazy5.png)
+6. Так как поиск происходит с флагом `g`, то он продолжается с конца текущего совпадения, давая ещё один результат:
+
+    ![](witch_lazy6.png)
+
+В примере выше продемонстрирована работа ленивого режима для `pattern:+?`. Квантификаторы  `pattern:+?` и `pattern:??` ведут себя аналогично -- "ленивый" движок увеличивает количество повторений только в том случае, если для остальной части шаблона на данной позиции нет соответствия.
+
+**Ленивость распространяется только на тот квантификатор, после которого стоит `?`.**
+
+Прочие квантификаторы остаются жадными.
+
+Например:
+
+```js run
+alert( "123 456".match(/\d+ \d+?/g) ); // 123 4
+```
+
+1. Подшаблон `pattern:\d+` пытается найти столько цифр, сколько возможно (работает жадно), так что он находит `match:123` и останавливается, поскольку символ пробела `pattern:' '` не подходит под `pattern:\d`.
+2. Далее в шаблоне пробел, он совпадает.
+3. Далее в шаблоне идёт `pattern:\d+?`.
+
+    Квантификатор указан в ленивом режиме, поэтому он находит одну цифру `match:4` и пытается проверить, есть ли совпадение с остатком шаблона.
+
+    Но после `pattern:\d+?` в шаблоне ничего нет.
+
+    **Ленивый режим без необходимости лишний раз квантификатор не повторит.**
+
+    Так как шаблон завершился, то искать дальше, в общем-то нечего. Получено совпадение `match:123 4`.
+4. Следующий поиск продолжится с `5`, но ничего не найдёт.
+
+```smart header="Конечные автоматы и не только"
+Современные движки регулярных выражений могут иметь более хитрую реализацию внутренних алгоритмов, чтобы искать быстрее.
+
+Однако, чтобы понять, как работает регулярное выражение, и строить регулярные выражения самому, знание этих хитрых алгоритмов ни к чему. Они служат лишь внутренней оптимизации способа поиска, описанного выше.
+
+Кроме того, сложные регулярные выражения плохо поддаются всяким оптимизациям, так что поиск вполне может работать и в точности как здесь описано.
+```
+
+## Альтернативный подход
+
+В данном конкретном случае, возможно искать строки в кавычках, оставаясь в жадном режиме, с использованием регулярного выражения `pattern:"[^"]+"`:
+
+```js run
+var reg = /"[^"]+"/g;
+
+var str = 'a "witch" and her "broom" is one';
+
+alert( str.match(reg) ); // witch, broom
+```
+
+Регэксп `pattern:"[^"]+"` даст правильные результаты, поскольку ищет кавычку `pattern:'"'`, за которой идут столько не-кавычек (исключающие квадратные скобки), сколько возможно.
+
+Так что вторая кавычка автоматически прекращает повторения `pattern:[^"]+` и позволяет найти остаток шаблона `pattern:"`.
+
+**Эта логика ни в коей мере не заменяет ленивые квантификаторы!**
+
+Она просто другая. И то и другое бывает полезно.
+
+Давайте посмотрим пример, когда нужен именно такой вариант, а ленивые квантификаторы не подойдут.
+
+Например, мы хотим найти в тексте ссылки вида `<a href="..." class="doc">`, с любым содержанием `href`.
+
+Какое регулярное выражение для этого подойдёт?
+
+Первый вариант может выглядеть так: `pattern:/<a href=".*" class="doc">/g`.
+
+Проверим его:
+```js run
+var str = '...<a href="link" class="doc">...';
+var reg = /<a href=".*" class="doc">/g;
+
+// Сработало!
+alert( str.match(reg) ); // <a href="link" class="doc">
+```
+
+А если в тексте несколько ссылок?
+
+```js run
+var str = '...<a href="link1" class="doc">... <a href="link2" class="doc">...';
+var reg = /<a href=".*" class="doc">/g;
+
+// Упс! Сразу две ссылки!
+alert( str.match(reg) ); // <a href="link1" class="doc">... <a href="link2" class="doc">
+```
+
+На этот раз результат неверен.
+
+Жадный `pattern:.*` взял слишком много символов.
+
+Соответствие получилось таким:
+```
+<a href="....................................." class="doc">
+<a href="link1" class="doc">... <a href="link2" class="doc">
+```
+
+Модифицируем шаблон -- добавим ленивость квантификатору `pattern:.*?`:
+
+```js run
+var str = '...<a href="link1" class="doc">... <a href="link2" class="doc">...';
+var reg = /<a href=".*?" class="doc">/g;
+
+// Сработало!
+alert( str.match(reg) ); // <a href="link1" class="doc">, <a href="link2" class="doc">
+```
+
+Теперь всё верно, два результата:
+
+```
+<a href="....." class="doc">    <a href="....." class="doc">
+<a href="link1" class="doc">... <a href="link2" class="doc">
+```
+
+Почему теперь всё в порядке -- для внимательного читателя, после объяснений, данных выше в этой главе, должно быть полностью очевидно.
+
+Поэтому не будем останавливаться здесь на деталях, а попробуем ещё пример:
+
+```js run
+var str = '...<a href="link1" class="wrong">... <p style="" class="doc">...';
+var reg = /<a href=".*?" class="doc">/g;
+
+// Неправильное совпадение!
+alert( str.match(reg) ); // <a href="link1" class="wrong">... <p style="" class="doc">
+```
+
+Совпадение -- не ссылка, а более длинный текст.
+
+Получилось следующее:
+
+1. Найдено совпадение `match:<a href="`.
+2. Лениво ищем `pattern:.*?`, после каждого символа проверяя, есть ли совпадение остальной части шаблона.
+
+    Подшаблон `pattern:.*?` будет брать символы до тех пор, пока не найдёт `match:class="doc">`.
+
+    В данном случае этот поиск закончится уже за пределами ссылки, в теге `<p>`, вообще не имеющем отношения к `<a>`.
+3. Получившееся совпадение:
+
+    ```
+    <a href="..................................." class="doc">
+    <a href="link1" class="wrong">... <p style="" class="doc">
+    ```
+
+Итак, ленивость нам не помогла.
+
+Необходимо как-то прекратить поиск `pattern:.*`, чтобы он не вышел за пределы кавычек.
+
+Для этого мы используем более точное указание, какие символы нам подходят, а какие нет.
+
+Правильный вариант: `pattern:[^"]*`. Этот шаблон будет брать все символы до ближайшей кавычки, как раз то, что требуется.
+
+Рабочий пример:
+
+```js run
+var str1 = '...<a href="link1" class="wrong">... <p style="" class="doc">...';
+var str2 = '...<a href="link1" class="doc">... <a href="link2" class="doc">...';
+var reg = /<a href="[^"]*" class="doc">/g;
+
+// Работает!
+alert( str1.match(reg) ); // null, совпадений нет, и это верно
+alert( str2.match(reg) ); // <a href="link1" class="doc">, <a href="link2" class="doc">
+```
+
+## Итого
+
+Квантификаторы имеют два режима работы:
+
+Жадный
+: Режим по умолчанию -- движок регулярных выражений повторяет его по-максимуму. Когда повторять уже нельзя, например нет больше цифр для `\d+`, он продолжает поиск с оставшейся части текста. Если совпадение найти не удалось -- отступает обратно, уменьшая количество повторений.
+
+Ленивый
+: При указании после квантификатора символа `?` он работает в ленивом режиме. То есть, он перед каждым повторением проверяет совпадение оставшейся части шаблона на текущей позиции.
+
+Как мы видели в примере выше, ленивый режим -- не панацея от "слишком жадного" забора символов. Альтернатива -- более аккуратно настроенный "жадный", с исключением символов. Как мы увидим далее, можно исключать не только символы, но и целые подшаблоны.
+
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy1.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy1.png
new file mode 100644
index 00000000..5db6f17a
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy1.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy1@2x.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy1@2x.png
new file mode 100644
index 00000000..966e27aa
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy1@2x.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy2.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy2.png
new file mode 100644
index 00000000..9fdbe234
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy2.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy2@2x.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy2@2x.png
new file mode 100644
index 00000000..91e66582
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy2@2x.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy3.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy3.png
new file mode 100644
index 00000000..aeef75bd
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy3.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy3@2x.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy3@2x.png
new file mode 100644
index 00000000..a8c62e60
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy3@2x.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy4.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy4.png
new file mode 100644
index 00000000..c18ab43e
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy4.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy4@2x.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy4@2x.png
new file mode 100644
index 00000000..823a3717
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy4@2x.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy5.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy5.png
new file mode 100644
index 00000000..12442d2b
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy5.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy5@2x.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy5@2x.png
new file mode 100644
index 00000000..29d3cf0a
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy5@2x.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy6.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy6.png
new file mode 100644
index 00000000..3ed72b25
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy6.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy6@2x.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy6@2x.png
new file mode 100644
index 00000000..4833e676
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_greedy6@2x.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy3.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy3.png
new file mode 100644
index 00000000..1e0ce417
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy3.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy3@2x.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy3@2x.png
new file mode 100644
index 00000000..1e378468
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy3@2x.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy4.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy4.png
new file mode 100644
index 00000000..478834ee
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy4.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy4@2x.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy4@2x.png
new file mode 100644
index 00000000..495a2f24
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy4@2x.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy5.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy5.png
new file mode 100644
index 00000000..e5054367
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy5.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy5@2x.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy5@2x.png
new file mode 100644
index 00000000..870d4633
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy5@2x.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy6.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy6.png
new file mode 100644
index 00000000..66728501
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy6.png differ
diff --git a/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy6@2x.png b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy6@2x.png
new file mode 100644
index 00000000..4228e193
Binary files /dev/null and b/10-regular-expressions-javascript/07-regexp-greedy-and-lazy/witch_lazy6@2x.png differ
diff --git a/10-regular-expressions-javascript/08-regexp-groups/1-find-webcolor-3-or-6/solution.md b/10-regular-expressions-javascript/08-regexp-groups/1-find-webcolor-3-or-6/solution.md
new file mode 100644
index 00000000..e6af9289
--- /dev/null
+++ b/10-regular-expressions-javascript/08-regexp-groups/1-find-webcolor-3-or-6/solution.md
@@ -0,0 +1,29 @@
+Регулярное выражение для поиска 3-значного цвета вида `#abc`: `pattern:/#[a-f0-9]{3}/i`.
+
+Нужно добавить ещё три символа, причём нужны именно три, четыре или семь символов не нужны. Эти три символа либо есть, либо нет.
+
+Самый простой способ добавить -- просто дописать в конец регэкспа: `pattern:/#[a-f0-9]{3}([a-f0-9]{3})?/i`
+
+Можно поступить и хитрее: `pattern:/#([a-f0-9]{3}){1,2}/i`.
+
+Здесь регэксп `pattern:[a-f0-9]{3}` заключён в скобки, чтобы квантификатор `pattern:{1,2}` применялся целиком ко всей этой структуре.
+
+В действии:
+```js run
+var re = /#([a-f0-9]{3}){1,2}/gi;
+
+var str = "color: #3f3; background-color: #AA00ef; and: #abcd";
+
+alert( str.match(re) ); // #3f3 #AA0ef #abc
+```
+
+В последнем выражении `subject:#abcd` было найдено совпадение `match:#abc`. Чтобы этого не происходило, добавим в конец `pattern:\b`:
+
+```js run
+var re = /#([a-f0-9]{3}){1,2}\b/gi;
+
+var str = "color: #3f3; background-color: #AA00ef; and: #abcd";
+
+alert( str.match(re) ); // #3f3 #AA0ef
+```
+
diff --git a/10-regular-expressions-javascript/08-regexp-groups/1-find-webcolor-3-or-6/task.md b/10-regular-expressions-javascript/08-regexp-groups/1-find-webcolor-3-or-6/task.md
new file mode 100644
index 00000000..419c0476
--- /dev/null
+++ b/10-regular-expressions-javascript/08-regexp-groups/1-find-webcolor-3-or-6/task.md
@@ -0,0 +1,14 @@
+# Найдите цвет в формате #abc или #abcdef
+
+Напишите регулярное выражение, которое находит цвет в формате `#abc` или `#abcdef`. То есть, символ `#`, после которого идут 3 или 6 шестнадцатиричных символа.
+
+Пример использования:
+```js
+var re = /* ваш регэксп */
+
+var str = "color: #3f3; background-color: #AA00ef; and: #abcd";
+
+alert( str.match(re) ); // #3f3 #AA0ef
+```
+
+P.S. Значения из любого другого количества букв, кроме 3 и 6, такие как `#abcd`, не должны подходить под регэксп.
\ No newline at end of file
diff --git a/10-regular-expressions-javascript/08-regexp-groups/2-parse-expression/solution.md b/10-regular-expressions-javascript/08-regexp-groups/2-parse-expression/solution.md
new file mode 100644
index 00000000..d224acdc
--- /dev/null
+++ b/10-regular-expressions-javascript/08-regexp-groups/2-parse-expression/solution.md
@@ -0,0 +1,49 @@
+Регулярное выражение для числа, возможно, дробного и отрицательного: `pattern:-?\d+(\.\d+)?`. Мы уже разбирали его в предыдущих задачах.
+
+Оператор -- это `pattern:[-+*/]`. Заметим, что дефис `pattern:-` идёт в списке первым, так как на любой позиции, кроме первой и последней, он имеет специальный смысл внутри `pattern:[...]`, и его понадобилось бы экранировать.
+
+Кроме того, когда мы оформим это в JavaScript-синтаксис `pattern:/.../` -- понадобится заэкранировать слэш `pattern:/`.
+
+Нам нужно число, затем оператор, затем число, и необязательные пробелы между ними.
+
+Полное регулярное выражение будет таким: `pattern:-?\d+(\.\d+)?\s*[-+*/]\s*-?\d+(\.\d+)?`.
+
+Чтобы получить результат в виде массива, добавим скобки вокруг тех данных, которые нам интересны, то есть -- вокруг чисел и оператора: `pattern:(-?\d+(\.\d+)?)\s*([-+*/])\s*(-?\d+(\.\d+)?)`.
+
+Посмотрим в действии:
+```js run
+var re = /(-?\d+(\.\d+)?)\s*([-+*\/])\s*(-?\d+(\.\d+)?)/;
+
+alert( "1.2 + 12".match(re) );
+```
+
+Итоговый массив будет включать в себя компоненты:
+
+- `result[0] == "1.2 + 12"` (вначале всегда полное совпадение)
+- `result[1] == "1"` (первая скобка)
+- `result[2] == "2"` (вторая скобка -- дробная часть `(\.\d+)?`)
+- `result[3] == "+"` (...)
+- `result[4] == "12"` (...)
+- `result[5] == undefined` (последняя скобка, но у второго числа дробная часть отсутствует)
+
+Нам из этого массива нужны только числа и оператор. А, скажем, дробная часть сама по себе -- не нужна.
+
+Уберём её из запоминания, добавив в начало скобки `pattern:?:`, то есть: `pattern:(?:\.\d+)?`.
+
+Итого, решение:
+
+```js run
+function parse(expr) {
+  var re = /(-?\d+(?:\.\d+)?)\s*([-+*\/])\s*(-?\d+(?:\.\d+)?)/;
+
+  var result = expr.match(re);
+
+  if (!result) return;
+  result.shift();
+
+  return result;
+}
+
+alert( parse("-1.23 * 3.45") );  // -1.23, *, 3.45
+```
+
diff --git a/10-regular-expressions-javascript/08-regexp-groups/2-parse-expression/task.md b/10-regular-expressions-javascript/08-regexp-groups/2-parse-expression/task.md
new file mode 100644
index 00000000..56ad74bb
--- /dev/null
+++ b/10-regular-expressions-javascript/08-regexp-groups/2-parse-expression/task.md
@@ -0,0 +1,19 @@
+# Разобрать выражение
+
+Арифметическое выражение состоит из двух чисел и операции между ними, например:
+
+- `1 + 2`
+- `1.2 * 3.4`
+- `-3 / -6`
+- `-2 - 2`
+
+Список операций: `"+"`, `"-"`, `"*"` и `"/"`.
+
+Также могут присутствовать пробелы вокруг оператора и чисел.
+
+Напишите функцию, которая будет получать выражение и возвращать массив из трёх аргументов:
+
+1. Первое число.
+2. Оператор.
+3. Второе число.
+
diff --git a/10-regular-expressions-javascript/08-regexp-groups/article.md b/10-regular-expressions-javascript/08-regexp-groups/article.md
new file mode 100644
index 00000000..d8ab6ad6
--- /dev/null
+++ b/10-regular-expressions-javascript/08-regexp-groups/article.md
@@ -0,0 +1,139 @@
+# Скобочные группы
+
+Часть шаблона может быть заключена в скобки `pattern:(...)`. Такие выделенные части шаблона называют "скобочными выражениями" или "скобочными группами".
+
+У такого выделения есть два эффекта:
+
+1. Он позволяет выделить часть совпадения в отдельный элемент массива при поиске через [String#match](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/match) или [RegExp#exec](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec).
+2. Если поставить квантификатор после скобки, то он применится *ко всей скобке*, а не всего лишь к одному символу.
+
+[cut]
+
+## Пример
+
+В примере ниже, шаблон `pattern:(go)+` находит один или более повторяющихся `pattern:'go'`:
+
+```js run
+alert( 'Gogogo now!'.match(/(go)+/i) ); // "Gogogo"
+```
+
+Без скобок, шаблон `pattern:/go+/` означал бы `subject:g`, после которого идёт одна или более `subject:o`, например: `match:goooo`. А скобки "группируют" `pattern:(go)` вместе.
+
+## Содержимое группы
+
+Скобки нумеруются слева направо. Поисковой движок запоминает содержимое каждой скобки и позволяет обращаться к нему -- в шаблоне и строке замены и, конечно же, в результатах.
+
+Например, найти HTML-тег можно шаблоном `pattern:<.*?>`.
+
+После поиска мы захотим что-то сделать с результатом. Для удобства заключим содержимое `<...>` в скобки: `pattern:<(.*?)>`. Тогда оно будет доступно отдельно.
+
+При поиске методом [String#match](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/match) в результирующем массиве будет сначала всё совпадение, а далее -- скобочные группы. В шаблоне `pattern:<(.*?)>` скобочная группа только одна:
+
+```js run
+var str = '<h1>Привет, мир!</h1>';
+var reg = /<(.*?)>/;
+
+alert( str.match(reg) ); // массив: <h1>, h1
+```
+
+Заметим, что метод [String#match](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/String/match) выдаёт скобочные группы только при поиске без флага `/.../g`. В примере выше он нашёл только первое совпадение `match:<h1>`, а закрывающий `match:</h1>` не нашёл, поскольку без флага `/.../g` ищется только первое совпадение.
+
+Для того, чтобы искать и с флагом `/.../g` и со скобочными группами, используется метод [RegExp#exec](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec):
+
+```js run
+var str = '<h1>Привет, мир!</h1>';
+var reg = /<(.*?)>/g;
+
+var match;
+
+while ((match = reg.exec(str)) !== null) {
+  // сначала выведет первое совпадение: <h1>,h1
+  // затем выведет второе совпадение: </h1>,/h1
+  alert(match);
+}
+```
+
+Теперь найдено оба совпадения `pattern:<(.*?)>`, каждое -- массив из полного совпадения и скобочных групп (одна в данном случае).
+
+## Вложенные группы
+Скобки могут быть и вложенными. В этом случае нумерация также идёт слева направо.
+
+Например, при поиске тега в `subject:<span class="my">` нас может интересовать:
+
+1. Содержимое тега целиком: `span class="my"`.
+2. В отдельную переменную для удобства хотелось бы поместить тег: `span`.
+3. Также может быть удобно отдельно выделить атрибуты `class="my"`.
+
+Добавим скобки в регулярное выражение:
+
+```js run
+var str = '<span class="my">';
+
+var reg = /<(([a-z]+)\s*([^>]*))>/;
+
+alert( str.match(reg) ); // <span class="my">, span class="my", span, class="my"
+```
+
+Вот так выглядят скобочные группы:
+
+![](regexp-nested-groups.png)
+
+На нулевом месте -- всегда совпадение полностью, далее -- группы. Нумерация всегда идёт слева направо, по открывающей скобке.
+
+В данном случае получилось, что группа 1 включает в себя содержимое групп 2 и 3. Это совершенно нормальная ситуация, которая возникает, когда нужно выделить что-то отдельное внутри большей группы.
+
+**Даже если скобочная группа необязательна и не входит в совпадение, соответствующий элемент массива существует (и равен `undefined`).**
+
+Например, рассмотрим регэксп `pattern:a(z)?(c)?`. Он ищет `"a"`, за которой не обязательно идёт буква `"z"`, за которой необязательно идёт буква `"c"`.
+
+Если напустить его на строку из одной буквы `"a"`, то результат будет таков:
+
+```js run
+var match = 'a'.match(/a(z)?(c)?/)
+
+alert( match.length ); // 3
+alert( match[0] ); // a
+alert( match[1] ); // undefined
+alert( match[2] ); // undefined
+```
+
+Массив получился длины `3`, но все скобочные группы -- `undefined`.
+
+А теперь более сложная ситуация, строка `subject:ack`:
+
+```js run
+var match = 'ack'.match(/a(z)?(c)?/)
+
+alert( match.length ); // 3
+alert( match[0] ); // ac, всё совпадение
+alert( match[1] ); // undefined, для (z)? ничего нет
+alert( match[2] ); // c
+```
+
+Длина массива результатов по-прежнему `3`. Она постоянна. А вот для скобочной группы `pattern:(z)?` в ней ничего нет, поэтому результат: `["ac", undefined, "c"]`.
+
+## Исключение из запоминания через ?:
+
+Бывает так, что скобки нужны, чтобы квантификатор правильно применился, а вот запоминать их содержимое в массиве не нужно.
+
+Скобочную группу можно исключить из запоминаемых и нумеруемых, добавив в её начало `pattern:?:`.
+
+Например, мы хотим найти `pattern:(go)+`, но содержимое скобок (`go`) в отдельный элемент массива выделять не хотим.
+
+Для этого нужно сразу после открывающей скобки поставить `?:`, то есть: `pattern:(?:go)+`.
+
+Например:
+
+```js run
+var str = "Gogo John!";
+*!*
+var reg = /(?:go)+ (\w+)/i;
+*/!*
+
+var result = str.match(reg);
+
+alert( result.length ); // 2
+alert( result[1] ); // John
+```
+
+В примере выше массив результатов имеет длину `2` и содержит только полное совпадение и результат `pattern:(\w+)`. Это удобно в тех случаях, когда содержимое скобок нас не интересует.
diff --git a/10-regular-expressions-javascript/08-regexp-groups/regexp-nested-groups.png b/10-regular-expressions-javascript/08-regexp-groups/regexp-nested-groups.png
new file mode 100644
index 00000000..4434b7be
Binary files /dev/null and b/10-regular-expressions-javascript/08-regexp-groups/regexp-nested-groups.png differ
diff --git a/10-regular-expressions-javascript/08-regexp-groups/regexp-nested-groups@2x.png b/10-regular-expressions-javascript/08-regexp-groups/regexp-nested-groups@2x.png
new file mode 100644
index 00000000..2721e79d
Binary files /dev/null and b/10-regular-expressions-javascript/08-regexp-groups/regexp-nested-groups@2x.png differ
diff --git a/10-regular-expressions-javascript/09-regexp-backreferences/1-find-matching-bbtags/solution.md b/10-regular-expressions-javascript/09-regexp-backreferences/1-find-matching-bbtags/solution.md
new file mode 100644
index 00000000..31f24848
--- /dev/null
+++ b/10-regular-expressions-javascript/09-regexp-backreferences/1-find-matching-bbtags/solution.md
@@ -0,0 +1,20 @@
+
+Открывающий тег -- это `pattern:\[(b|url|quote)\]`.
+
+Для того, чтобы найти всё до закрывающего -- используем ленивый поиск `pattern:[\s\S]*?` и обратную ссылку на открывающий тег.
+
+Итого, получится: `pattern:\[(b|url|quote)\][\s\S]*?\[/\1\]`.
+
+В действии:
+
+```js run
+var re = /\[(b|url|quote)\][\s\S]*?\[\/\1\]/g;
+
+var str1 = "..[url]http://ya.ru[/url]..";
+var str2 = "..[url][b]http://ya.ru[/b][/url]..";
+
+alert( str1.match(re) ); // [url]http://ya.ru[/url]
+alert( str2.match(re) ); // [url][b]http://ya.ru[/b][/url]
+```
+
+Для закрывающего тега `[/1]` понадобилось дополнительно экранировать слеш: `\[\/1\]`.
diff --git a/10-regular-expressions-javascript/09-regexp-backreferences/1-find-matching-bbtags/task.md b/10-regular-expressions-javascript/09-regexp-backreferences/1-find-matching-bbtags/task.md
new file mode 100644
index 00000000..8596bed5
--- /dev/null
+++ b/10-regular-expressions-javascript/09-regexp-backreferences/1-find-matching-bbtags/task.md
@@ -0,0 +1,41 @@
+# Найдите пары тегов
+
+ББ-тег имеет вид `[имя]...[/имя]`, где имя -- слово, одно из: `b`, `url`, `quote`.
+
+Например:
+```
+[b]текст[/b]
+[url]http://ya.ru[/url]
+```
+
+ББ-теги могут быть вложенными, но сам в себя тег быть вложен не может, например:
+
+```
+Допустимо:
+[url] [b]http://ya.ru[/b] [/url]
+[quote] [b]текст[/b] [/quote]
+
+Нельзя:
+[b][b]текст[/b][/b]
+```
+
+Создайте регулярное выражение для поиска ББ-тегов и их содержимого.
+
+Например:
+
+```js
+var re = /* регулярка */
+
+var str = "..[url]http://ya.ru[/url]..";
+alert( str.match(re) ); // [url]http://ya.ru[/url]
+```
+
+Если теги вложены, то нужно искать самый внешний тег (при желании можно будет продолжить поиск в его содержимом):
+
+```js
+var re = /* регулярка */
+
+var str = "..[url][b]http://ya.ru[/b][/url]..";
+alert( str.match(re) ); // [url][b]http://ya.ru[/b][/url]
+```
+
diff --git a/10-regular-expressions-javascript/09-regexp-backreferences/article.md b/10-regular-expressions-javascript/09-regexp-backreferences/article.md
new file mode 100644
index 00000000..25aefb97
--- /dev/null
+++ b/10-regular-expressions-javascript/09-regexp-backreferences/article.md
@@ -0,0 +1,63 @@
+# Обратные ссылки: \n и $n
+
+Скобочные группы можно не только получать в результате.
+
+Движок регулярных выражений запоминает их содержимое, и затем его можно использовать как в самом паттерне, так и в строке замены.
+
+[cut]
+
+## Группа в строке замены
+
+Ссылки в строке замены имеют вид `$n`, где `n` -- это номер скобочной группы.
+
+Вместо `$n` подставляется содержимое соответствующей скобки:
+
+```js run
+var name = "Александр Пушкин";
+
+name = name.replace(/([а-яё]+) ([а-яё]+)/i, *!*"$2, $1"*/!*);
+alert( name ); // Пушкин, Александр
+```
+
+В примере выше вместо `pattern:$2` подставляется второе найденное слово, а вместо `pattern:$1` -- первое.
+
+## Группа в шаблоне
+
+Выше был пример использования содержимого групп в строке замены. Это удобно, когда нужно реорганизовать содержимое или создать новое с использованием старого.
+
+Но к скобочной группе можно также обратиться в самом поисковом шаблоне, ссылкой вида `\номер`.
+
+Чтобы было яснее, рассмотрим это на реальной задаче -- необходимо найти в тексте строку в кавычках. Причём кавычки могут быть одинарными `subject:'...'` или двойными `subject:"..."` -- и то и другое должно искаться корректно.
+
+Как такие строки искать?
+
+Можно в регэкспе предусмотреть произвольные кавычки: `pattern:['"](.*?)['"]`. Такой регэксп найдёт строки вида `match:"..."`, `match:'...'`, но он даст неверный ответ в случае, если одна кавычка ненароком оказалась внутри другой, как например в строке `subject:"She's the one!"`:
+
+```js run
+var str = "He said: \"She's the one!\".";
+
+var reg = /['"](.*?)['"]/g;
+
+// Результат не соответствует замыслу
+alert( str.match(reg) ); // "She'
+```
+
+Как видно, регэксп нашёл открывающую кавычку `match:"`, затем текст, вплоть до новой кавычки `match:'`, которая закрывает соответствие.
+
+Для того, чтобы попросить регэксп искать закрывающую кавычку -- такую же, как открывающую, мы обернём её в скобочную группу и используем обратную ссылку на неё:
+
+```js run
+var str = "He said: \"She's the one!\".";
+
+var reg = /(['"])(.*?)\1/g;
+
+alert( str.match(reg) ); // "She's the one!"
+```
+
+Теперь работает верно! Движок регулярных выражений, найдя первое скобочное выражение -- кавычку `pattern:(['"])`, запоминает его и далее `pattern:\1` означает "найти то же самое, что в первой скобочной группе".
+
+Обратим внимание на два нюанса:
+
+- Чтобы использовать скобочную группу в строке замены -- нужно использовать ссылку вида `$1`, а в шаблоне -- обратный слэш: `\1`.
+- Чтобы в принципе иметь возможность обратиться к скобочной группе -- не важно откуда, она не должна быть исключена из запоминаемых при помощи `?:`. Скобочные группы вида `(?:...)` не участвуют в нумерации.
+
diff --git a/10-regular-expressions-javascript/10-regexp-alternation/1-find-programming-language/solution.md b/10-regular-expressions-javascript/10-regexp-alternation/1-find-programming-language/solution.md
new file mode 100644
index 00000000..289ba6d0
--- /dev/null
+++ b/10-regular-expressions-javascript/10-regexp-alternation/1-find-programming-language/solution.md
@@ -0,0 +1,33 @@
+Сначала неправильный способ.
+
+Если перечислить языки один за другим через `|`, то получится совсем не то:
+
+```js run
+var reg = /Java|JavaScript|PHP|C|C\+\+/g;
+
+var str = "Java, JavaScript, PHP, C, C++";
+
+alert( str.match(reg) ); // Java,Java,PHP,C,C
+```
+
+Как видно, движок регулярных выражений ищет альтернации в порядке их перечисления. То есть, он сначала смотрит, есть ли `match:Java`, а если нет -- ищет `match:JavaScript`.
+
+Естественно, при этом `match:JavaScript` не будет найдено никогда.
+
+То же самое -- с языками `match:C` и `match:C++`.
+
+Есть два решения проблемы:
+
+1. Поменять порядок, чтобы более длинное совпадение проверялось первым: `pattern:JavaScript|Java|C\+\+|C|PHP`.
+2. Соединить длинный вариант с коротким: `pattern:Java(Script)?|C(\+\+)?|PHP`.
+
+В действии:
+
+```js run
+var reg = /Java(Script)?|C(\+\+)?|PHP/g;
+
+var str = "Java, JavaScript, PHP, C, C++";
+
+alert( str.match(reg) ); // Java,JavaScript,PHP,C,C++
+```
+
diff --git a/10-regular-expressions-javascript/10-regexp-alternation/1-find-programming-language/task.md b/10-regular-expressions-javascript/10-regexp-alternation/1-find-programming-language/task.md
new file mode 100644
index 00000000..b93570f3
--- /dev/null
+++ b/10-regular-expressions-javascript/10-regexp-alternation/1-find-programming-language/task.md
@@ -0,0 +1,6 @@
+# Найдите языки программирования
+
+Существует много языков программирования, например Java, JavaScript, PHP, C, C++.
+
+Напишите регулярное выражение, которое найдёт их все в строке "Java JavaScript PHP C++ C"
+
diff --git a/10-regular-expressions-javascript/10-regexp-alternation/2-match-quoted-string/solution.md b/10-regular-expressions-javascript/10-regexp-alternation/2-match-quoted-string/solution.md
new file mode 100644
index 00000000..ece03804
--- /dev/null
+++ b/10-regular-expressions-javascript/10-regexp-alternation/2-match-quoted-string/solution.md
@@ -0,0 +1,17 @@
+Решение задачи: `pattern:/"(\\.|[^"\\])*"/g`.
+
+То есть:
+
+- Сначала ищем кавычку `pattern:"`
+- Затем, если далее слэш `pattern:\\` (удвоение слэша -- техническое, для вставки в регэксп, на самом деле там один слэш), то после него также подойдёт любой символ (точка).
+- Если не слэш, то берём любой символ, кроме кавычек (которые будут означать конец строки) и слэша (чтобы предотвратить одинокие слэши, сам по себе единственный слэш не нужен, он должен экранировать какой-то символ) `pattern:[^"\\]`
+- ...И так жадно, до закрывающей кавычки.
+
+В действии:
+
+```js run
+var re = /"(\\.|[^"\\])*"/g;
+var str = '.. "test me" .. "Скажи \\"Привет\\"!" .. "\\r\\n\\\\" ..';
+
+alert( str.match(re) ); // "test me","Скажи \"Привет\"!","\r\n\\"
+```
diff --git a/10-regular-expressions-javascript/10-regexp-alternation/2-match-quoted-string/task.md b/10-regular-expressions-javascript/10-regexp-alternation/2-match-quoted-string/task.md
new file mode 100644
index 00000000..2bde0073
--- /dev/null
+++ b/10-regular-expressions-javascript/10-regexp-alternation/2-match-quoted-string/task.md
@@ -0,0 +1,25 @@
+# Найдите строки в кавычках
+
+Найдите в тексте при помощи регэкспа строки в двойных кавычках `subject:"..."`.
+
+В строке поддерживается экранирование при помощи слеша -- примерно в таком же виде, как в обычных строках JavaScript. То есть, строка может содержать любые символы, экранированные слэшем, в частности: `subject:\"`, `subject:\n`, и даже сам слэш в экранированном виде: `subject:\\`.
+
+Здесь особо важно, что двойная кавычка после слэша не оканчивает строку, а считается её частью. В этом и состоит основная сложность задачи, которая без этого условия была бы элементарной.
+
+Пример совпадающих строк:
+```js
+.. *!*"test me"*/!* ..  (обычная строка)
+.. *!*"Скажи \"Привет\"!"*/!* ... (строка с кавычками внутри)
+.. *!*"\r\n\\"*/!* ..  (строка со спец. символами и слэшем внутри)
+```
+
+Заметим, что в JavaScript такие строки удобнее всего задавать в одинарных кавычках, и слеши придётся удвоить (в одинарных кавычках они являются экранирующими символами):
+
+Пример задания тестовой строки в JavaScript:
+```js run
+var str = ' .. "test me" .. "Скажи \\"Привет\\"!" .. "\\r\\n\\\\" .. ';
+
+// эта строка будет такой:
+alert(str); //  .. "test me" .. "Скажи \"Привет\"!" .. "\r\n\\" ..
+```
+
diff --git a/10-regular-expressions-javascript/10-regexp-alternation/3-match-exact-tag/solution.md b/10-regular-expressions-javascript/10-regexp-alternation/3-match-exact-tag/solution.md
new file mode 100644
index 00000000..e8895fdd
--- /dev/null
+++ b/10-regular-expressions-javascript/10-regexp-alternation/3-match-exact-tag/solution.md
@@ -0,0 +1,17 @@
+
+Начало шаблона очевидно: `pattern:<style`.
+
+А вот дальше... Мы не можем написать просто `pattern:<style.*?>`, так как `match:<styler>` удовлетворяет этому регэкспу.
+
+Нужно уточнить его. После `match:<style` должен быть либо пробел, после которого может быть что-то ещё, либо закрытие тега.
+
+На языке регэкспов: `pattern:<style(>|\s.*?>)`.
+
+В действии:
+
+```js run
+var re = /<style(>|\s.*?>)/g;
+
+alert( "<style> <styler> <style test>".match(re) ); // <style>, <style test>
+```
+
diff --git a/10-regular-expressions-javascript/10-regexp-alternation/3-match-exact-tag/task.md b/10-regular-expressions-javascript/10-regexp-alternation/3-match-exact-tag/task.md
new file mode 100644
index 00000000..cc1450ef
--- /dev/null
+++ b/10-regular-expressions-javascript/10-regexp-alternation/3-match-exact-tag/task.md
@@ -0,0 +1,14 @@
+# Найдите тег style
+
+Напишите регулярное выражение, которое будет искать в тексте тег `<style>`. Подходят как обычный тег `<style>`, так и вариант с атрибутами `<style type="...">`.
+
+Но регулярное выражение не должно находить `<styler>`!
+
+Использование:
+
+```js
+var re = ваш регэксп
+
+alert( "<style> <styler> <style test>".match(re) ); // <style>, <style test>
+```
+
diff --git a/10-regular-expressions-javascript/10-regexp-alternation/article.md b/10-regular-expressions-javascript/10-regexp-alternation/article.md
new file mode 100644
index 00000000..7a783fd9
--- /dev/null
+++ b/10-regular-expressions-javascript/10-regexp-alternation/article.md
@@ -0,0 +1,25 @@
+# Альтернация (или) |
+
+Альтернация -- термин в регулярных выражениях, которому в русском языке соответствует слово "ИЛИ". Она обозначается символом вертикальной черты `pattern:|` и позволяет выбирать между вариантами.
+
+[cut]
+
+Например, нам нужно найти языки программирования: HTML, PHP, Java и JavaScript.
+
+Соответствующее регулярное выражение: `pattern:html|php|java(script)?`.
+
+Пример использования:
+
+```js run
+var reg = /html|php|css|java(script)?/gi
+
+var str = "Сначала появился HTML, затем CSS, потом JavaScript"
+
+alert( str.match(reg) ) // 'HTML', 'CSS', 'JavaScript'
+```
+
+Мы уже знаем похожую вещь -- квадратные скобки. Они позволяют выбирать между символами, например `pattern:gr[ae]y` найдёт `match:gray`, либо `match:grey`.
+
+Альтернация работает уже не посимвольно, а на уровне фраз и подвыражений. Регэксп `pattern:A|B|C` обозначает поиск одного из выражений: `A`, `B` или `C`, причём в качестве выражений могут быть другие, сколь угодно сложные регэкспы.
+
+Для указания границ альтернации используют скобки `(...)`, например: `pattern:before(XXX|YYY)after` будет искать `match:beforeXXXafter` или `match:beforeYYYafter`.
\ No newline at end of file
diff --git a/10-regular-expressions-javascript/11-regexp-ahchors/1-start-end/solution.md b/10-regular-expressions-javascript/11-regexp-ahchors/1-start-end/solution.md
new file mode 100644
index 00000000..3be0d244
--- /dev/null
+++ b/10-regular-expressions-javascript/11-regexp-ahchors/1-start-end/solution.md
@@ -0,0 +1,6 @@
+
+Нам нужна строка, которая начинается -- и тут же кончается. То есть, пустая.
+
+Или, если быть ближе к механике регэкспов, то движок сначала будет искать в тексте начальную позицию `pattern:^`, а как только найдёт её -- будет ожидать конечной `pattern:$`.
+
+Заметим, что и `pattern:^` и `pattern:$` не требуют наличия символов. Это -- проверки. В пустой строке движок сначала проверит первую, а потом -- вторую -- и зафиксирует совпадение.
\ No newline at end of file
diff --git a/10-regular-expressions-javascript/11-regexp-ahchors/1-start-end/task.md b/10-regular-expressions-javascript/11-regexp-ahchors/1-start-end/task.md
new file mode 100644
index 00000000..4d92d9fe
--- /dev/null
+++ b/10-regular-expressions-javascript/11-regexp-ahchors/1-start-end/task.md
@@ -0,0 +1,4 @@
+# Регэксп ^$
+
+Предложите строку, которая подойдёт под регулярное выражение `pattern:^$`.
+
diff --git a/10-regular-expressions-javascript/11-regexp-ahchors/2-test-mac/solution.md b/10-regular-expressions-javascript/11-regexp-ahchors/2-test-mac/solution.md
new file mode 100644
index 00000000..d429dc63
--- /dev/null
+++ b/10-regular-expressions-javascript/11-regexp-ahchors/2-test-mac/solution.md
@@ -0,0 +1,20 @@
+Двузначное шестнадцатиричное число -- это `pattern:[0-9a-f]{2}` (с учётом флага `pattern:/i`).
+
+Нам нужно одно такое число, и за ним ещё 5 с двоеточиями перед ними: `pattern:[0-9a-f]{2}(:[0-9a-f]{2}){5}`
+
+И, наконец, совпадение должно начинаться в начале строки и заканчиваться -- в конце. То есть, строка целиком должна подходить под шаблон. Для этого обернём шаблон в `pattern:^...$`.
+
+Итого, в действии:
+
+```js run
+var re = /^[0-9a-fA-F]{2}(:[0-9a-fA-F]{2}){5}$/i;
+
+alert( re.test('01:32:54:67:89:AB') ); // true
+
+alert( re.test('0132546789AB') ); // false (нет двоеточий)
+
+alert( re.test('01:32:54:67:89') ); // false (5 чисел, а не 6)
+
+alert( re.test('01:32:54:67:89:ZZ') ) // false (ZZ в конце)
+```
+
diff --git a/10-regular-expressions-javascript/11-regexp-ahchors/2-test-mac/task.md b/10-regular-expressions-javascript/11-regexp-ahchors/2-test-mac/task.md
new file mode 100644
index 00000000..00628147
--- /dev/null
+++ b/10-regular-expressions-javascript/11-regexp-ahchors/2-test-mac/task.md
@@ -0,0 +1,21 @@
+# Проверьте MAC-адрес
+
+MAC-адрес сетевого интерфейса состоит из шести двузначных шестнадцатеричных чисел, разделённых двоеточием.
+
+Например: `subject:'01:32:54:67:89:AB'`.
+
+Напишите регулярное выражение, которое по строке проверяет, является ли она корректным MAC-адресом.
+
+Использование:
+```js
+var re = ваш регэксп
+
+alert( re.test('01:32:54:67:89:AB') ); // true
+
+alert( re.test('0132546789AB') ); // false (нет двоеточий)
+
+alert( re.test('01:32:54:67:89') ); // false (5 чисел, а не 6)
+
+alert( re.test('01:32:54:67:89:ZZ') ) // false (ZZ в конце)
+```
+
diff --git a/10-regular-expressions-javascript/11-regexp-ahchors/article.md b/10-regular-expressions-javascript/11-regexp-ahchors/article.md
new file mode 100644
index 00000000..41ac5c90
--- /dev/null
+++ b/10-regular-expressions-javascript/11-regexp-ahchors/article.md
@@ -0,0 +1,64 @@
+# Начало строки ^ и конец $
+
+Знак каретки `pattern:'^'` и доллара `pattern:'$'` имеют в регулярном выражении особый смысл. Их называют "якорями" (anchor - англ.).
+
+[cut]
+
+Каретка `pattern:^` совпадает в начале текста, а доллар `pattern:$` -- в конце.
+
+**Якоря являются не символами, а проверками.**
+
+До этого мы говорили о регулярных выражениях, которые ищут один или несколько символов. Если совпадение есть -- эти символы включаются в результат.
+
+А якоря -- не такие. Когда поиск ходит до якоря -- он проверяет, есть ли соответствие, если есть -- продолжает идти по шаблону, не прибавляя ничего к результату.
+
+Каретку `pattern:^` обычно используют, чтобы указать, что регулярное выражение необходимо проверить именно с начала текста.
+
+Например, без каретки найдёт все числа:
+
+```js run
+var str = '100500 попугаев съели 500100 бананов!';
+alert( str.match(/\d+/ig) ); // 100500, 500100 (нашло все числа)
+```
+
+А с кареткой -- только первое:
+
+```js run
+var str = '100500 попугаев съели 500100 бананов!';
+alert( str.match(/^\d+/ig) ); // 100500 (только в начале строки)*!*
+```
+
+Знак доллара `pattern:$` используют, чтобы указать, что паттерн должен заканчиваться в конце текста.
+
+Аналогичный пример с долларом для поиска числа в конце:
+
+```js run
+var str = '100500 попугаев съели 500100';
+alert( str.match(/\d+$/ig) ); // 500100
+```
+
+Оба якоря используют одновременно, если требуется, чтобы шаблон охватывал текст с начала и до конца. Обычно это требуется при валидации.
+
+Например, мы хотим проверить, что в переменной `num` хранится именно десятичная дробь.
+
+Ей соответствует регэксп `pattern:\d+\.\d+`. Но простой поиск найдёт дробь в любом тексте:
+
+```js run
+var num = "ля-ля 12.34";
+alert( num.match(/\d+\.\d+/ig) ); // 12.34
+```
+
+Наша же задача -- проверить, что `num` *целиком* соответствует паттерну `pattern:\d+\.\d+`.
+
+Для этого обернём шаблон в якоря `pattern:^...$`:
+
+```js run
+var num = "ля-ля 12.34";
+alert( num.match(/^\d+\.\d+$/ig) ); // null, не дробь
+
+var num = "12.34";
+alert( num.match(/^\d+\.\d+$/ig) ); // 12.34, дробь!
+```
+
+Теперь поиск ищет начало текста, за которым идёт число, затем точка, ещё число и конец текста. Это как раз то, что нужно.
+
diff --git a/10-regular-expressions-javascript/12-regexp-multiline-mode/article.md b/10-regular-expressions-javascript/12-regexp-multiline-mode/article.md
new file mode 100644
index 00000000..f109356d
--- /dev/null
+++ b/10-regular-expressions-javascript/12-regexp-multiline-mode/article.md
@@ -0,0 +1,85 @@
+# Многострочный режим, флаг "m"
+
+Многострочный режим включается, если у регэкспа есть флаг `pattern:/m`.
+
+[cut]
+
+В этом случае изменяется поведение `pattern:^` и `pattern:$`.
+
+В многострочном режиме якоря означают не только начало/конец текста, но и начало/конец строки.
+
+## Начало строки ^
+
+В примере ниже текст состоит из нескольких строк. Паттерн `pattern:/^\d+/gm` берёт число с начала каждой строки:
+
+```js run
+var str = '1е место: Винни\n' +
+  '2е место: Пятачок\n' +
+  '33е место: Слонопотам';
+
+*!*
+alert( str.match(/^\d+/gm) ); // 1, 2, 33
+*/!*
+```
+
+Обратим внимание -- без флага `pattern:/m` было бы найдено только первое число:
+
+```js run
+var str = '1е место: Винни\n' +
+  '2е место: Пятачок\n' +
+  '33е место: Слонопотам';
+
+alert( str.match(/^\d+/g) ); // 1
+```
+
+Это потому что в обычном режиме каретка `pattern:^` -- это только начало текста, а в многострочном -- начало любой строки.
+
+Движок регулярных выражений двигается по тексту, и как только видит начало строки, начинает искать там `pattern:\d+`.
+
+## Конец строки $
+
+Символ доллара `pattern:$` ведёт себя аналогично.
+
+Регулярное выражение `pattern:[а-я]+$` в следующем примере находит последнее слово в каждой строке:
+
+```js run
+var str = '1е место: Винни\n' +
+  '2е место: Пятачок\n' +
+  '33е место: Слонопотам';
+
+alert( str.match(/[а-я]+$/gim) ); // Винни,Пятачок,Слонопотам
+```
+
+Без флага `pattern:m` якорь `pattern:$` обозначал бы конец всего текста, и было бы найдено только последнее слово.
+
+````smart header="Якорь `$` против `\n`"
+Для того, чтобы найти конец строки, можно использовать не только `$`, но и символ `\n`.
+
+Но, в отличие от `$`, символ `\n` во-первых берёт символ в результат, а во-вторых -- не совпадает в конце текста (если, конечно, последний символ -- не конец строки).
+
+Посмотрим, что будет с примером выше, если вместо `pattern:[а-я]+$` использовать `pattern:[а-я]+\n`:
+
+```js run
+var str = '1е место: Винни\n' +
+  '2е место: Пятачок\n' +
+  '33е место: Слонопотам';
+
+alert( str.match(/[а-я]+\n/gim) );
+/*
+Винни
+,Пятачок
+*/
+```
+
+Всего два результата: `match:Винни\n` (с символом перевода строки) и `match:Пятачок\n`. Последнее слово "Слонопотам" здесь не даёт совпадения, так как после него нет перевода строки.
+````
+
+## Итого
+
+В мультистрочном режиме:
+
+- Символ `^` означает начало строки.
+- Символ `$` означает конец строки.
+
+Оба символа являются проверками, они не добавляют ничего к результату. Про них также говорят, что "они имеют нулевую длину".
+
diff --git a/10-regular-expressions-javascript/13-regexp-lookahead/article.md b/10-regular-expressions-javascript/13-regexp-lookahead/article.md
new file mode 100644
index 00000000..2cd4438c
--- /dev/null
+++ b/10-regular-expressions-javascript/13-regexp-lookahead/article.md
@@ -0,0 +1,4 @@
+# Предпросмотр (неготово)
+
+Требуется добавить главу про предпросмотр lookahead.
+
diff --git a/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/article.md b/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/article.md
new file mode 100644
index 00000000..d5e42afe
--- /dev/null
+++ b/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/article.md
@@ -0,0 +1,277 @@
+# Чёрная дыра бэктрекинга
+
+Некоторые регулярные выражения, с виду являясь простыми, могут выполняться оооочень долго, и даже "подвешивать" интерпретатор JavaScript.
+
+Рано или поздно, с этим сталкивается любой разработчик, потому что нечаянно создать такое регулярное выражение -- легче лёгкого.
+
+Типична ситуация, когда регулярное выражение до поры до времени работает нормально, и вдруг на каком-то тексте как начнёт "подвешивать" интерпретатор и есть 100% процессора.
+
+Это может стать уязвимостью. Например, если JavaScript выполняется на сервере, то при разборе данных, присланных посетителем, он может зависнуть, если использует подобный регэксп. На клиенте тоже возможно подобное, при использовании регэкспа для подсветки синтаксиса.
+
+Такие уязвимости "убивали" почтовые сервера и системы обмена сообщениями и до появления JavaScript, и наверно будут "убивать" и после его исчезновения. Так что мы просто обязаны с ними разобраться.
+
+[cut]
+
+## Пример
+
+План изложения у нас будет таким:
+
+1. Сначала посмотрим на проблему в реальной ситуации.
+2. Потом упростим реальную ситуацию до "корней" и увидим, откуда она берётся.
+
+Рассмотрим, например, поиск по HTML.
+
+Мы хотим найти теги с атрибутами, то есть совпадения вида `subject:<a href="..." class=doc ...>`.
+
+Самый простой способ это сделать -- `pattern:<[^>]*>`. Но он же и не совсем корректный, так как тег может выглядеть так: `subject:<a test="<>" href="#">`. То есть, внутри "закавыченного" атрибута может быть символ `>`. Простейший регэксп на нём остановится и найдёт `match:<a test="<>`.
+
+Соответствие:
+```
+<[^>]*....>
+<a test="<>" href="#">
+```
+
+А нам нужен весь тег.
+
+Для того, чтобы правильно обрабатывать такие ситуации, нужно учесть их в регулярном выражении. Оно будет иметь вид `pattern:<тег (ключ=значение)*>`.
+
+Если перевести на язык регэкспов, то: `pattern:<\w+(\s*\w+=(\w+|"[^"]*")\s*)*>`:
+
+1. `pattern:<\w+` -- начало тега
+2. `pattern:(\s*\w+=(\w+|"[^"]*")\s*)*` -- произвольное количество пар вида `слово=значение`, где "значение" может быть также словом `pattern:\w+`, либо строкой в кавычках `pattern:"[^"]*"`.
+
+Мы пока не учитываем все детали грамматики HTML, ведь строки возможны и в 'одинарных' кавычках, но на данный момент этого достаточно. Главное, что регулярное выражение получилось в меру простым и понятным.
+
+Испытаем полученный регэксп в действии:
+
+```js run
+var reg = /<\w+(\s*\w+=(\w+|"[^"]*")\s*)*>/g;
+
+var str='...<a test="<>" href="#">... <b>...';
+
+alert( str.match(reg) ); // <a test="<>" href="#">, <b>
+```
+
+Отлично, всё работает! Нашло как длинный тег `match:<a test="<>" href="#">`, так и одинокий `match:<b>`.
+
+А теперь -- демонстрация проблемы.
+
+Если запустить пример ниже, то он может подвесить браузер:
+
+```js run
+var reg = /<\w+(\s*\w+=(\w+|"[^"]*")\s*)*>/g;
+
+var str = "<tag a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  \
+a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b";
+
+*!*
+// Этот поиск будет выполняться очень, очень долго
+alert( str.match(reg) );
+*/!*
+```
+
+Некоторые движки регулярных выражений могут в разумное время разобраться с таким поиском, но большинство -- нет.
+
+В чём дело? Почему несложное регулярное выражение на такой небольшой строке "виснет" наглухо?
+
+Упростим ситуацию, удалив тег и возможность указывать строки в кавычках:
+
+```js run
+// только атрибуты, разделённые пробелами
+var reg = /<(\s*\w+=\w+\s*)*>/g;
+
+var str = "<a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  \
+a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b";
+
+*!*
+// Этот поиск будет выполняться очень, очень долго
+alert( str.match(reg) );
+*/!*
+```
+
+То же самое.
+
+На этом мы закончим с демонстрацией "практического примера" и перейдём к разбору происходящего.
+
+## Бектрекинг
+
+В качестве ещё более простого регулярного выражения, рассмотрим `pattern:(\d+)*$`.
+
+В большинстве движков регэкспов, например в Chrome или IE, этот поиск выполняется очень долго (осторожно, может "подвесить" браузер):
+
+```js run
+alert( '12345678901234567890123456789123456789z'.match(/(\d+)*$/) );
+```
+
+В чём же дело, что не так с регэкспом?
+
+Внимательный читатель, посмотрев на него, наверняка удивится, ведь он "какой-то странный". Квантификатор `pattern:*` здесь выглядит лишним.
+
+Если хочется найти число, то с тем же успехом можно искать `pattern:\d+$`.
+
+Да, этот регэксп носит искусственный характер, но, разобравшись с ним, мы поймём и практический пример, данный выше. Причина их медленной работы одинакова.
+
+В целом, с регэкспом "всё так", синтаксис вполне допустимый. Проблема в том, как выполняется поиск по нему.
+
+Посмотрим, что происходит при поиске в строке `subject:123456789z`:
+
+1. Первым делом, движок регэкспов пытается найти `pattern:\d+`. Плюс `pattern:+` является жадным по умолчанию, так что он хватает все цифры, какие может:
+
+    ```
+    \d+.......
+    (123456789)z
+    ```
+2. Затем движок пытается применить звёздочку вокруг скобок `pattern:(\d+)*`, но больше цифр нет, так что звёздочка не даёт повторений.
+
+    Затем в шаблоне идёт символ конца строки `pattern:$`, а в тексте -- символ `subject:z`.
+
+    ```
+               X
+    \d+........$
+    (123456789)z
+    ```
+
+    Соответствия нет.
+3. Так как соответствие не найдено, то "жадный" плюс `pattern:+` отступает на один символ (бэктрекинг).
+
+    Теперь `\d+` -- это все цифры, за исключением последней:
+    ```
+    \d+.......
+    (12345678)9z
+    ```
+4. После бэктрекинга, `pattern:\d+` содержит всё число, кроме последней цифры. Движок снова пытается найти совпадение, уже с новой позиции (`9`).
+
+    Звёздочка `pattern:(\d+)*` теперь может быть применена -- она даёт число `match:9`:
+
+    ```
+
+    \d+.......\d+
+    (12345678)(9)z
+    ```
+
+    Движок пытается найти `$`, но это ему не удаётся -- на его пути опять `z`:
+
+    ```
+                 X
+    \d+.......\d+
+    (12345678)(9)z
+    ```
+
+    Так как совпадения нет, то поисковой движок отступает назад ещё раз.
+5. Теперь первое число `pattern:\d+` будет содержать 7 цифр, а остаток строки `subject:89` становится вторым `pattern:\d+`:
+
+    ```
+                 X
+    \d+......\d+
+    (1234567)(89)z
+    ```
+
+    Увы, всё ещё нет соответствия для `pattern:$`.
+
+    Поисковой движок снова должен отступить назад. При этом последний жадный квантификатор отпускает символ. В данном случае это означает, что укорачивается второй `pattern:\d+`, до одного символа `subject:8`, и звёздочка забирает следующий `subject:9`.
+
+    ```
+                   X
+    \d+......\d+\d+
+    (1234567)(8)(9)z
+    ```
+6. ...И снова неудача. Второе и третье `pattern:\d+` отступили по-максимуму, так что сокращается снова первое число, до `subject:123456`, а звёздочка берёт оставшееся:
+
+    ```
+                 X
+    \d+.......\d+
+    (123456)(789)z
+    ```
+
+    Снова нет совпадения. Процесс повторяется, последний жадный квантификатор `pattern:+` отпускает один символ (`9`):
+
+    ```
+                   X
+    \d+.....\d+ \d+
+    (123456)(78)(9)z
+    ```
+7. ...И так далее.
+
+Получается, что движок регулярных выражений перебирает все комбинации из `123456789` и их подпоследовательности. А таких комбинаций очень много.
+
+На этом месте умный читатель может воскликнуть: "Во всём виноват бэктрекинг? Давайте включим ленивый режим -- и не будет никакого бэктрекинга!"
+
+Что ж, заменим `pattern:\d+` на `pattern:\d+?` и посмотрим (аккуратно, может подвесить браузер):
+
+```js run
+alert( '12345678901234567890123456789123456789z'.match(/(\d+?)*$/) );
+```
+
+Не помогло!
+
+**Ленивые регулярные выражения делают то же самое, но в обратном порядке.**
+
+Просто подумайте о том, как будет в этом случае работать поисковой движок.
+
+Некоторые движки регулярных выражений содержат хитрые проверки и конечные автоматы, которые позволяют избежать бесконечного перебора или кардинально ускорить его, но не все движки и не всегда.
+
+Возвращаясь к примеру выше -- при поиске `pattern:<(\s*\w+=\w+\s*)*>` в строке `subject:<a=b  a=b  a=b  a=b` происходит то же самое.
+
+Поиск успешно начинается, выбирается некая комбинация из `pattern:\s*\w+=\w+\s*`, которая, так как в конце нет `>`, оказывается не подходящей. Движок честно отступает, пробует другую комбинацию -- и так далее.
+
+## Что делать?
+
+Проблема -- в сверхмноговариантном переборе.
+
+Движок регулярных выражений перебирает кучу возможных вариантов скобок там, где это не нужно.
+
+Например, в регэкспе `pattern:(\d+)*$` нам (людям) очевидно, что в `pattern:(\d+)` откатываться не нужно. От того, что вместо одного `pattern:\d+` у нас два независимых `pattern:\d+\d+`, ничего не изменится.
+
+Без разницы:
+
+```
+\d+........
+(123456789)z
+
+\d+...\d+....
+(1234)(56789)z
+```
+
+Если вернуться к более реальному примеру `pattern:<(\s*\w+=\w+\s*)*>` то
+сам алгоритм поиска, который у нас в голове, предусматривает, что мы "просто" ищем тег, а потом пары `атрибут=значение` (сколько получится).
+
+Никакого "отката" здесь не нужно.
+
+В современных регулярных выражениях для решения этой проблемы придумали "possessive" (сверхжадные? неоткатные? точный перевод пока не устоялся) квантификаторы, которые вообще не используют бэктрегинг.
+
+То есть, они даже проще, чем "жадные" -- берут максимальное количество символов и всё. Поиск продолжается дальше. При несовпадении никакого возврата не происходит.
+
+Это, с одной стороны, уменьшает количество возможных результатов, но, с другой стороны, в ряде случаев очевидно, что возврат (уменьшение количество повторений квантификатора) результата не даст. А только потратит время, что как раз и доставляет проблемы. Как раз такие ситуации и описаны выше.
+
+Есть и другое средство -- "атомарные скобочные группы", которые запрещают перебор внутри скобок, по сути позволяя добиваться того же, что и сверхжадные квантификаторы,
+
+К сожалению, в JavaScript они не поддерживаются.
+
+Однако, можно получить подобный эффект при помощи предпросмотра. Подробное описание соответствия с учётом синтаксиса сверхжадных квантификаторов и атомарных групп есть в статьях [Regex: Emulate Atomic Grouping (and Possessive Quantifiers) with LookAhead](http://instanceof.me/post/52245507631/regex-emulate-atomic-grouping-with-lookahead) и [Mimicking Atomic Groups](http://blog.stevenlevithan.com/archives/mimic-atomic-groups), здесь же мы останемся в рамках синтаксиса JavaScript.
+
+Взятие максимального количества повторений `a+` без отката выглядит так: `pattern:(?=(a+))\1`.
+
+То есть, иными словами, предпросмотр `pattern:?=` ищет максимальное количество повторений `pattern:a+`, доступных с текущей позиции. А затем они "берутся в результат" обратной ссылкой `pattern:\1`. Дальнейший поиск -- после найденных повторений.
+
+Откат в этой логике в принципе не предусмотрен, поскольку предпросмотр "откатываться" не умеет. То есть, если предпросмотр нашёл 5 штук `pattern:a+`, и в результате поиск не удался, то он не будет откатываться на 4 повторения. Эта возможность в предпросмотре отсутствует, а в данном случае она как раз и не нужна.
+
+Исправим регэксп для поиска тега с атрибутами `pattern:<\w+(\s*\w+=(\w+|"[^"]*")\s*)*>`, описанный в начале главы. Используем предпросмотр, чтобы запретить откат на меньшее количество пар `атрибут=значение`:
+
+```js run
+// регэксп для пары атрибут=значение
+var attr = /(\s*\w+=(\w+|"[^"]*")\s*)/
+
+// используем его внутри регэкспа для тега
+var reg = new RegExp('<\\w+(?=(' + attr.source + '*))\\1>', 'g');
+
+var good = '...<a test="<>" href="#">... <b>...';
+
+var bad = "<tag a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b\
+  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b  a=b";
+
+alert( good.match(reg) ); // <a test="<>" href="#">, <b>
+alert( bad.match(reg) ); // null (нет результатов, быстро)
+```
+
+Отлично, всё работает! Нашло как длинный тег `match:<a test="<>" href="#">`, так и одинокий `match:<b>`.
+
diff --git a/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy1.png b/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy1.png
new file mode 100644
index 00000000..8f207c4d
Binary files /dev/null and b/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy1.png differ
diff --git a/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy11.png b/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy11.png
new file mode 100644
index 00000000..713532ae
Binary files /dev/null and b/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy11.png differ
diff --git a/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy2.png b/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy2.png
new file mode 100644
index 00000000..0de64148
Binary files /dev/null and b/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy2.png differ
diff --git a/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy3.png b/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy3.png
new file mode 100644
index 00000000..8d0cd522
Binary files /dev/null and b/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy3.png differ
diff --git a/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy4.png b/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy4.png
new file mode 100644
index 00000000..c693a42e
Binary files /dev/null and b/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy4.png differ
diff --git a/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy5.png b/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy5.png
new file mode 100644
index 00000000..63f0e9e4
Binary files /dev/null and b/10-regular-expressions-javascript/14-regexp-infinite-backtracking-problem/bad_backtrack_greedy5.png differ
diff --git a/10-regular-expressions-javascript/index.md b/10-regular-expressions-javascript/index.md
new file mode 100644
index 00000000..ac25aaa6
--- /dev/null
+++ b/10-regular-expressions-javascript/index.md
@@ -0,0 +1,3 @@
+# Regular expressions
+
+Regular expressions is a powerful way of doing search and replace in strings.
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md
index 5a703646..25897746 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.md
@@ -1,6 +1,5 @@
 
-1. При клике -- заменяем `innerHTML` ячейки на `<textarea>` с размерами "под ячейку", без рамки.
-2. В `textarea.value` присваиваем содержимое ячейки.
-3. Фокусируем посетителя на ячейке вызовом `focus()`.
-4. Показываем кнопки OK/CANCEL под ячейкой.
-
+1. On click -- replace `innerHTML` of the cell by `<textarea>` with same sizes and no border. Can use Javascript or CSS to set the right size.
+2. Set `textarea.value` to `td.innerHTML`.
+3. Focus on the textarea.
+4. Show buttons OK/CANCEL under the cell, handle clicks on them.
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/bagua.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/bagua.css
index aa6c03fe..d9a65736 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/bagua.css
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/bagua.css
@@ -1,4 +1,4 @@
-/* общие стили для таблицы */
+/* common styles for the table, no need to modify these */
 
 th {
   text-align: center;
@@ -53,4 +53,4 @@ td {
 .se {
   background-color: #0c3;
   color: #fff;
-}
\ No newline at end of file
+}
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/index.html b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/index.html
index 376d83f7..08f23389 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/index.html
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/index.html
@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="my.css">
 
 
-  <p>Кликните на ячейке для начала редактирования. Когда закончите -- нажмите OK или CANCEL.</p>
+  <p>Click on a table cell to edit it. Press OK or CANCEL when you finish.</p>
 
   <table id="bagua-table">
     <tr>
@@ -75,4 +75,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/script.js b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/script.js
index 49cebc33..38db0fbd 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/script.js
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/script.js
@@ -1,32 +1,25 @@
-var table = document.getElementById('bagua-table');
+let table = document.getElementById('bagua-table');
 
-var editingTd;
+let editingTd;
 
 table.onclick = function(event) {
 
-  var target = event.target;
+  // 3 possible targets
+  let target = event.target.closest('.edit-cancel,.edit-ok,td');
 
-  while (target != table) {
-    if (target.className == 'edit-cancel') {
-      finishTdEdit(editingTd.elem, false);
-      return;
-    }
+  if (!table.contains(target)) return;
 
-    if (target.className == 'edit-ok') {
-      finishTdEdit(editingTd.elem, true);
-      return;
-    }
+  if (target.className == 'edit-cancel') {
+    finishTdEdit(editingTd.elem, false);
+  } else if (target.className == 'edit-ok') {
+    finishTdEdit(editingTd.elem, true);
+  } else if (target.nodeName == 'TD') {
+    if (editingTd) return; // already editing
 
-    if (target.nodeName == 'TD') {
-      if (editingTd) return; // already editing
-
-      makeTdEditable(target);
-      return;
-    }
-
-    target = target.parentNode;
+    makeTdEditable(target);
   }
-}
+
+};
 
 function makeTdEditable(td) {
   editingTd = {
@@ -34,9 +27,9 @@ function makeTdEditable(td) {
     data: td.innerHTML
   };
 
-  td.classList.add('edit-td'); // td, not textarea! the rest of rules will cascade
+  td.classList.add('edit-td'); // td is in edit state, CSS also styles the area inside
 
-  var textArea = document.createElement('textarea');
+  let textArea = document.createElement('textarea');
   textArea.style.width = td.clientWidth + 'px';
   textArea.style.height = td.clientHeight + 'px';
   textArea.className = 'edit-area';
@@ -57,6 +50,6 @@ function finishTdEdit(td, isOk) {
   } else {
     td.innerHTML = editingTd.data;
   }
-  td.classList.remove('edit-td'); // remove edit class
+  td.classList.remove('edit-td'); 
   editingTd = null;
-}
\ No newline at end of file
+}
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/bagua.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/bagua.css
index aa6c03fe..d9a65736 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/bagua.css
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/bagua.css
@@ -1,4 +1,4 @@
-/* общие стили для таблицы */
+/* common styles for the table, no need to modify these */
 
 th {
   text-align: center;
@@ -53,4 +53,4 @@ td {
 .se {
   background-color: #0c3;
   color: #fff;
-}
\ No newline at end of file
+}
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/index.html b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/index.html
index 376d83f7..08f23389 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/index.html
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/index.html
@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="my.css">
 
 
-  <p>Кликните на ячейке для начала редактирования. Когда закончите -- нажмите OK или CANCEL.</p>
+  <p>Click on a table cell to edit it. Press OK or CANCEL when you finish.</p>
 
   <table id="bagua-table">
     <tr>
@@ -75,4 +75,4 @@
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/my.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/my.css
index 89ebd23a..e144e901 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/my.css
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/my.css
@@ -1 +1 @@
-/* ваши стили */
\ No newline at end of file
+/* your styles */
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/script.js b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/script.js
index e4da643f..01571982 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/script.js
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/source.view/script.js
@@ -1,3 +1,3 @@
-var table = document.getElementById('bagua-table');
+let table = document.getElementById('bagua-table');
 
-/* ваш код */
\ No newline at end of file
+/* your code */
diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md
index 9c488795..2cccea02 100644
--- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md
+++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md
@@ -2,15 +2,15 @@ importance: 5
 
 ---
 
-# Редактирование TD по клику
+# Edit TD on click
 
-Сделать ячейки таблицы `td` редактируемыми по клику.
+Make table cells editable on click.
 
-- При клике -- ячейка `<td>` превращается в редактируемую, можно менять HTML. Размеры ячеек при этом не должны меняться.
-- В один момент может редактироваться одна ячейка.
-- При редактировании под ячейкой появляются кнопки для приема и отмена редактирования, только клик на них заканчивает редактирование.
+- On click -- the cell should became "editable" (textarea appears inside), we can change HTML. There should be no resize, all geometry should remain the same.
+- Buttons OK and CANCEL appear below the cell to finish/cancel the editing.
+- Only one cell may be editable at a moment. While a `<td>` is in "edit mode", clicks on other cells are ignored.
+- The table may have many cells. Use event delegation.
 
-Демо:
-
-[iframe src="solution"]
+The demo:
 
+[iframe src="solution" height=400]
diff --git a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.md b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.md
deleted file mode 100644
index d855940a..00000000
--- a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.md
+++ /dev/null
@@ -1,9 +0,0 @@
-Алгоритм решения такой.
-
-Только численный ввод в поле с суммой разрешаем, повесив обработчик на `keypress`.
-
-Отслеживаем события изменения для перевычисления результатов:
-
-- На `input`: событие `input` и дополнительно `propertychange/keyup` для совместимости со старыми IE.
-- На `checkbox`: событие `click` вместо `change` для совместимости с IE8-.
-- На `select`: событие `change`.
diff --git a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.view/index.html b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.view/index.html
deleted file mode 100644
index f86f424a..00000000
--- a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/solution.view/index.html
+++ /dev/null
@@ -1,153 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    td select,
-    td input {
-      width: 150px;
-    }
-    
-    #diagram td {
-      vertical-align: bottom;
-      text-align: center;
-      padding: 10px;
-    }
-    
-    #diagram div {
-      margin: auto;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  Калькулятор процентов, из расчёта 12% годовых.
-  <form name="calculator">
-    <table>
-      <tr>
-        <td>Сумма</td>
-        <td>
-          <input name="money" type="text" value="10000">
-        </td>
-      </tr>
-      <tr>
-        <td>Срок в месяцах</td>
-        <td>
-          <select name="months">
-            <option value="3">3 (минимум)</option>
-            <option value="6">6 (полгода)</option>
-            <option value="12" selected>12 (год)</option>
-            <option value="18">18 (1.5 года)</option>
-            <option value="24">24 (2 года)</option>
-            <option value="30">30 (2.5 года)</option>
-            <option value="36">36 (3 года)</option>
-          </select>
-        </td>
-      </tr>
-      <tr>
-        <td>С капитализацией</td>
-        <td>
-          <input name="capitalization" type="checkbox">
-        </td>
-      </tr>
-    </table>
-
-
-  </form>
-
-
-  <table id="diagram">
-    <tr>
-      <th>Было:</th>
-      <th>Станет:</th>
-    </tr>
-    <tr>
-      <th id="money-before"></th>
-      <th id="money-after"></th>
-    </tr>
-    <td>
-      <div style="background: red;width:40px;height:100px"></div>
-    </td>
-    <td>
-      <div style="background: green;width:40px;height:0" id="height-after"></div>
-    </td>
-  </table>
-
-  <script>
-    // event.type должен быть keypress
-    function getChar(event) {
-      if (event.which == null) {
-        if (event.keyCode < 32) return null;
-        return String.fromCharCode(event.keyCode) // IE
-      }
-
-      if (event.which != 0 && event.charCode != 0) {
-        if (event.which < 32) return null;
-        return String.fromCharCode(event.which) // остальные
-      }
-
-      return null; // специальная клавиша
-    }
-
-    var form = document.forms.calculator;
-
-
-    var moneyElem = form.elements.money;
-    moneyElem.onkeypress = function(e) {
-      e = e || event;
-      var chr = getChar(e);
-
-      if (e.ctrlKey || e.altKey || chr == null) return; // специальная клавиша
-      if (chr < '0' || chr > '9') return false;
-    }
-
-    // клавиатура, вставить/вырезать клавиатурой
-    moneyElem.onkeyup = calculate;
-
-    // любые действия, кроме IE. В IE9 также работает, кроме удаления
-    moneyElem.oninput = calculate;
-
-    moneyElem.onpropertychange = function() { // для IE8- изменение значения, кроме удаления
-      event.propertyName == "value" && calculate();
-    }
-
-    var capitalizationElem = form.elements.capitalization;
-    capitalizationElem.onclick = calculate;
-
-    var monthsElem = form.elements.months;
-    monthsElem.onchange = calculate;
-
-
-    function calculate() {
-      var sum = +moneyElem.value;
-      if (!sum) return;
-
-      var monthlyIncrease = 0.01;
-
-      if (!capitalizationElem.checked) {
-        sum = sum * (1 + monthlyIncrease * monthsElem.value);
-      } else {
-
-        for (var i = 0; i < monthsElem.value; i++) {
-          // 1000 1010 1020.1
-          sum = sum * (1 + monthlyIncrease);
-        }
-      }
-      sum = Math.round(sum);
-
-      var height = sum / moneyElem.value * 100 + 'px';
-      document.getElementById('height-after').style.height = height;
-      document.getElementById('money-before').innerHTML = moneyElem.value;
-      document.getElementById('money-after').innerHTML = sum;
-    }
-
-    calculate();
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/source.view/index.html b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/source.view/index.html
deleted file mode 100644
index b31bdf4b..00000000
--- a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/source.view/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    td select,
-    td input {
-      width: 150px;
-    }
-    
-    #diagram td {
-      vertical-align: bottom;
-      text-align: center;
-      padding: 10px;
-    }
-    
-    #diagram div {
-      margin: auto;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  Калькулятор процентов, из расчёта 12% годовых.
-  <form name="calculator">
-    <table>
-      <tr>
-        <td>Сумма</td>
-        <td>
-          <input name="money" type="text" value="10000">
-        </td>
-      </tr>
-      <tr>
-        <td>Срок в месяцах</td>
-        <td>
-          <select name="months">
-            <option value="3">3 (минимум)</option>
-            <option value="6">6 (полгода)</option>
-            <option value="12" selected>12 (год)</option>
-            <option value="18">18 (1.5 года)</option>
-            <option value="24">24 (2 года)</option>
-            <option value="30">30 (2.5 года)</option>
-            <option value="36">36 (3 года)</option>
-          </select>
-        </td>
-      </tr>
-      <tr>
-        <td>С капитализацией</td>
-        <td>
-          <input name="capitalization" type="checkbox">
-        </td>
-      </tr>
-    </table>
-
-
-  </form>
-
-
-  <table id="diagram">
-    <tr>
-      <th>Было:</th>
-      <th>Станет:</th>
-    </tr>
-    <tr>
-      <th id="money-before"></th>
-      <th id="money-after"></th>
-    </tr>
-    <tr>
-      <td>
-        <div style="background: red;width:40px;height:100px"></div>
-      </td>
-      <td>
-        <div style="background: green;width:40px;height:0" id="height-after"></div>
-      </td>
-    </tr>
-  </table>
-
-  <script>
-    // вспомогательная функция для получения символа из события keypress
-    // (вдруг понадобится))
-    function getChar(event) {
-      if (event.which == null) {
-        if (event.keyCode < 32) return null;
-        return String.fromCharCode(event.keyCode) // IE
-      }
-
-      if (event.which != 0 && event.charCode != 0) {
-        if (event.which < 32) return null;
-        return String.fromCharCode(event.which) // остальные
-      }
-
-      return null; // специальная клавиша
-    }
-
-    // ваш код...
-  </script>
-
-
-</body>
-
-</html>
diff --git a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/task.md b/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/task.md
deleted file mode 100644
index c8cf706c..00000000
--- a/2-ui/4-forms-controls/3-events-change/1-calculate-capitalization/task.md
+++ /dev/null
@@ -1,19 +0,0 @@
-importance: 5
-
----
-
-# Автовычисление процентов по вкладу
-
-Создайте интерфейс для автоматического вычисления процентов по вкладу.
-
-Ставка фиксирована: 12% годовых. При включённом поле "капитализация" -- проценты приплюсовываются к сумме вклада каждый месяц ([сложный процент](http://damoney.ru/finance/slozniy-procent.php)).
-
-Пример:
-
-[iframe src="solution" height="350" border="1"]
-
-Технические требования:
-
-- В поле с суммой должно быть нельзя ввести не-цифру. При этом пусть в нём работают специальные клавиши и сочетания Ctrl-X/Ctrl-V.
-- Изменения в форме отражаются в результатах сразу.
-
diff --git a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.md b/2-ui/4-forms-controls/3-events-change/1-deposit-calculator/solution.md
similarity index 100%
rename from 2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.md
rename to 2-ui/4-forms-controls/3-events-change/1-deposit-calculator/solution.md
diff --git a/2-ui/4-forms-controls/3-events-change/1-deposit-calculator/solution.view/index.html b/2-ui/4-forms-controls/3-events-change/1-deposit-calculator/solution.view/index.html
new file mode 100644
index 00000000..4850b2ca
--- /dev/null
+++ b/2-ui/4-forms-controls/3-events-change/1-deposit-calculator/solution.view/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    td select,
+    td input {
+      width: 150px;
+    }
+
+    #diagram td {
+      vertical-align: bottom;
+      text-align: center;
+      padding: 10px;
+    }
+
+    #diagram div {
+      margin: auto;
+    }
+  </style>
+</head>
+
+<body>
+
+  Deposit calculator.
+
+  <form name="calculator">
+    <table>
+      <tr>
+        <td>Initial deposit</td>
+        <td>
+          <input name="money" type="number" value="10000" required>
+        </td>
+      </tr>
+      <tr>
+        <td>How many months?</td>
+        <td>
+          <select name="months">
+            <option value="3">3 (minimum)</option>
+            <option value="6">6 (half-year)</option>
+            <option value="12" selected>12 (one year)</option>
+            <option value="18">18 (1.5 years)</option>
+            <option value="24">24 (2 years)</option>
+            <option value="30">30 (2.5 years)</option>
+            <option value="36">36 (3 years)</option>
+            <option value="60">60 (5   years)</option>
+          </select>
+        </td>
+      </tr>
+      <tr>
+        <td>Interest per year?</td>
+        <td>
+          <input name="interest" type="number" value="5" required>
+        </td>
+      </tr>
+    </table>
+
+
+  </form>
+
+
+  <table id="diagram">
+    <tr>
+      <th>Was:</th>
+      <th>Becomes:</th>
+    </tr>
+    <tr>
+      <th id="money-before"></th>
+      <th id="money-after"></th>
+    </tr>
+    <td>
+      <div style="background: red;width:40px;height:100px"></div>
+    </td>
+    <td>
+      <div style="background: green;width:40px;height:0" id="height-after"></div>
+    </td>
+  </table>
+
+  <script>
+
+    let form = document.forms.calculator;
+
+    form.money.oninput = calculate;
+    form.months.onchange = calculate;
+    form.interest.oninput = calculate;
+
+    function calculate() {
+      let initial = +form.money.value;
+      if (!initial) return;
+
+      let interest = form.interest.value * 0.01;
+
+      if (!interest) return;
+
+      let years = form.months.value / 12;
+      if (!years) return;
+
+      let result = Math.round(initial * (1 + interest * years));
+
+      let height = result / form.money.value * 100 + 'px';
+      document.getElementById('height-after').style.height = height;
+      document.getElementById('money-before').innerHTML = form.money.value;
+      document.getElementById('money-after').innerHTML = result;
+    }
+
+    calculate();
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/3-events-change/1-deposit-calculator/source.view/index.html b/2-ui/4-forms-controls/3-events-change/1-deposit-calculator/source.view/index.html
new file mode 100644
index 00000000..7f464020
--- /dev/null
+++ b/2-ui/4-forms-controls/3-events-change/1-deposit-calculator/source.view/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    td select,
+    td input {
+      width: 150px;
+    }
+
+    #diagram td {
+      vertical-align: bottom;
+      text-align: center;
+      padding: 10px;
+    }
+
+    #diagram div {
+      margin: auto;
+    }
+  </style>
+</head>
+
+<body>
+
+  Deposit calculator.
+
+  <form name="calculator">
+    <table>
+      <tr>
+        <td>Initial deposit</td>
+        <td>
+          <input name="money" type="number" value="10000" required>
+        </td>
+      </tr>
+      <tr>
+        <td>How many months?</td>
+        <td>
+          <select name="months">
+            <option value="3">3 (minimum)</option>
+            <option value="6">6 (half-year)</option>
+            <option value="12" selected>12 (one year)</option>
+            <option value="18">18 (1.5 years)</option>
+            <option value="24">24 (2 years)</option>
+            <option value="30">30 (2.5 years)</option>
+            <option value="36">36 (3 years)</option>
+            <option value="60">60 (5   years)</option>
+          </select>
+        </td>
+      </tr>
+      <tr>
+        <td>Interest per year?</td>
+        <td>
+          <input name="interest" type="number" value="5" required>
+        </td>
+      </tr>
+    </table>
+
+
+  </form>
+
+
+  <table id="diagram">
+    <tr>
+      <th>Was:</th>
+      <th>Becomes:</th>
+    </tr>
+    <tr>
+      <th id="money-before"></th>
+      <th id="money-after"></th>
+    </tr>
+    <td>
+      <div style="background: red;width:40px;height:100px"></div>
+    </td>
+    <td>
+      <div style="background: green;width:40px;height:0" id="height-after"></div>
+    </td>
+  </table>
+
+  <script>
+
+    let form = document.forms.calculator;
+
+    // your code
+  </script>
+
+
+</body>
+</html>
diff --git a/2-ui/4-forms-controls/3-events-change/1-deposit-calculator/task.md b/2-ui/4-forms-controls/3-events-change/1-deposit-calculator/task.md
new file mode 100644
index 00000000..e324577a
--- /dev/null
+++ b/2-ui/4-forms-controls/3-events-change/1-deposit-calculator/task.md
@@ -0,0 +1,21 @@
+importance: 5
+
+---
+
+# Deposit calculator
+
+Create an interface that allows to enter a sum of bank deposit and percentage, then calculates how much it will be after given periods of time.
+
+Here's the demo:
+
+[iframe src="solution" height="350" border="1"]
+
+Any input change should be processed immediately.
+
+The formula is:
+```js
+// initial: the initial money sum
+// interest: e.g. 0.05 means 5% per year
+// years: how many years to wait
+let result = Math.round(initial * (1 + interest * years));
+```
diff --git a/2-ui/4-forms-controls/3-events-change/article.md b/2-ui/4-forms-controls/3-events-change/article.md
index c8b775ad..3a2343ef 100644
--- a/2-ui/4-forms-controls/3-events-change/article.md
+++ b/2-ui/4-forms-controls/3-events-change/article.md
@@ -1,185 +1,79 @@
-# Изменение: change, input, cut, copy, paste
+# Handling change, input, cut, copy, paste
 
-На элементах формы происходят события клавиатуры и мыши, но есть и несколько других, особенных событий.
+Let's discuss various events that accompany data updates.
 
-## Событие change
+## Event: change
 
-Событие [change](http://www.w3.org/TR/html5/forms.html#event-input-change) происходит по окончании изменении значения элемента формы, когда это изменение зафиксировано.
+The [change](http://www.w3.org/TR/html5/forms.html#event-input-change) event triggers when the element has finished changing.
 
-Для текстовых элементов это означает, что событие произойдёт не при каждом вводе, а при потере фокуса.
+For text inputs that means that the event occurs when it looses focus.
 
-Например, пока вы набираете что-то в текстовом поле ниже -- события нет. Но как только вы уведёте фокус на другой элемент, например, нажмёте кнопку -- произойдет событие `onchange`.
+For instance, while we are typing in the text field below -- there's no event. But when we move the focus somewhere else, for instance, click on a button -- there will be a `change` event:
 
-```html autorun height=40
+```html autorun height=40 run
 <input type="text" onchange="alert(this.value)">
-<input type="button" value="Кнопка">
+<input type="button" value="Button">
 ```
 
-Для остальных же элементов: `select`, `input type=checkbox/radio` оно срабатывает сразу при выборе значения.
+For other elements: `select`, `input type=checkbox/radio` it triggers right after the selection changes.
 
-```warn header="Поздний `onchange` в IE8-"
-В IE8- `checkbox/radio` при изменении мышью не инициируют событие сразу, а ждут потери фокуса.
+## Event: input
 
-Для того, чтобы видеть изменения `checkbox/radio` тут же -- в IE8- нужно повесить обработчик на событие `click` (оно произойдет и при изменении значения с клавиатуры) или воспользоваться событием `propertychange`, описанным далее.
-```
+The `input` event triggers every time a value is modified.
 
-## Событие input
+For instance:
 
-Событие `input` срабатывает *тут же* при изменении значения текстового элемента и поддерживается всеми браузерами, кроме IE8-.
-
-В IE9 оно поддерживается частично, а именно -- *не возникает при удалении символов* (как и `onpropertychange`).
-
-Пример использования (не работает в IE8-):
-
-```html autorun height=40
-<input type="text"> oninput: <span id="result"></span>
+```html autorun height=40 run
+<input type="text" id="input"> oninput: <span id="result"></span>
 <script>
-  var input = document.body.children[0];
-
   input.oninput = function() {
-    document.getElementById('result').innerHTML = input.value;
+    result.innerHTML = input.value;
   };
 </script>
 ```
 
-В современных браузерах `oninput` -- самое главное событие для работы с элементом формы. Именно его, а не `keydown/keypress` следует использовать.
+If we want to handle every modification of an `<input>` then this event is the best choice.
 
-Если бы ещё не проблемы со старыми IE... Впрочем, их можно решить при помощи события `propertychange`.
+Unlike keyboard events it works on any value change, even those that does not involve keyboard actions: pasting with a mouse or using speech recognition to dictate the text.
 
-## IE10-, событие propertychange
+```smart header="Can't prevent anything in `oninput`"
+The `input` event occurs after the value is modified.
 
-Это событие происходит только в IE10-, при любом изменении свойства. Оно позволяет отлавливать изменение тут же. Оно нестандартное, и его основная область использования -- исправление недочётов обработки событий в старых IE.
-
-Если поставить его на `checkbox` в IE8-, то получится "правильное" событие `change`:
-
-```html autorun height=40
-<input type="checkbox"> Чекбокс с "onchange", работающим везде одинаково
-<script>
-  var checkbox = document.body.children[0];
-
-  if ("onpropertychange" in checkbox) {
-    // старый IE
-*!*
-    checkbox.onpropertychange = function() {
-      // проверим имя изменённого свойства
-      if (event.propertyName == "checked") {
-        alert( checkbox.checked );
-      }
-    };
-*/!*
-  } else {
-    // остальные браузеры
-    checkbox.onchange = function() {
-      alert( checkbox.checked );
-    };
-  }
-</script>
+So we can't use `event.preventDefault()` there -- it's just too late, there would be no effect.
 ```
 
-Это событие также срабатывает при изменении значения текстового элемента. Поэтому его можно использовать в старых IE вместо `oninput`.
+## Events: cut, copy, paste
 
-К сожалению, в IE9 у него недочёт: оно не срабатывает при удалении символов. Поэтому сочетания `onpropertychange` + `oninput` недостаточно, чтобы поймать любое изменение поля в старых IE. Далее мы рассмотрим пример, как это можно сделать иначе.
+These events occur on cutting/copying/pasting a value.
 
-## События cut, copy, paste
+They belong to [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) class and provide access to the data that is copied/pasted.
 
-Эти события используются редко. Они происходят при вырезании/вставке/копировании значения.
+We also can use `event.preventDefault()` to abort the action.
 
-К сожалению, кросс-браузерного способа получить данные, которые вставляются/копируются, не существует, поэтому их основное применение -- это отмена соответствующей операции.
+For instance, the code below prevents all such events and shows what we are trying to cut/copy/paste:
 
-Например, вот так:
-
-```html autorun height=40
-<input type="text" id="input"> event: <span id="result"></span>
+```html autorun height=40 run
+<input type="text" id="input">
 <script>
   input.oncut = input.oncopy = input.onpaste = function(event) {
-    result.innerHTML = event.type + ' ' + input.value;
+    alert(event.type + ' - ' + event.clipboardData.getData('text/plain'));
     return false;
   };
 </script>
 ```
 
-## Пример: поле с контролем СМС
+Technically, we can copy/paste everything. For instance, we can copy and file in the OS file manager, and paste it.
 
-Как видим, событий несколько и они взаимно дополняют друг друга.
+There's a list of methods [in the specification](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer) to work with different data types, read/write to the clipboard.
 
-Посмотрим, как их использовать, на примере.
+But please note that clipboard is a "global" OS-level thing. Most browsers allow read/write access to the clipboard only in the scope of certain user actions for the safety. Also it is forbidden to create "custom" clipboard events in all browsers except Firefox.
 
-Сделаем поле для СМС, рядом с которым должно показываться число символов, обновляющееся при каждом изменении поля.
+## Summary
 
-Как такое реализовать?
+Data change events:
 
-Событие `input` идеально решит задачу во всех браузерах, кроме IE9-. Собственно, если IE9- нам не нужен, то на этом можно и остановиться.
-
-### IE9-
-
-В IE8- событие `input` не поддерживается, но, как мы видели ранее, есть `onpropertychange`, которое может заменить его.
-
-Что же касается IE9 -- там поддерживаются и `input` и `onpropertychange`, но они оба не работают при удалении символов. Поэтому мы будем отслеживать удаление при помощи `keyup` на `key:Delete`  и `key:BackSpace` . А вот удаление командой "вырезать" из меню -- сможет отловить лишь `oncut`.
-
-Получается вот такая комбинация:
-
-```html autorun run height=60
-<input type="text" id="sms"> символов: <span id="result"></span>
-<script>
-  function showCount() {
-    result.innerHTML = sms.value.length;
-  }
-
-  sms.onkeyup = sms.oninput = showCount;
-  sms.onpropertychange = function() {
-    if (event.propertyName == "value") showCount();
-  }
-  sms.oncut = function() {
-    setTimeout(showCount, 0); // на момент oncut значение еще старое
-  };
-</script>
-```
-
-Здесь мы добавили вызов `showCount` на все события, которые могут приводить к изменению значения. Да, иногда изменение будет обрабатываться несколько раз, но зато с гарантией. А лишние вызовы легко убрать, например, при помощи `throttle`-декоратора, описанного в задаче <info:task/throttle>.
-
-**Есть и совсем другой простой, но действенный вариант: через `setInterval` регулярно проверять значение и, если оно слишком длинное, обрезать его.**
-
-Чтобы сэкономить ресурсы браузера, мы можем начинать отслеживание по `onfocus`, а прекращать -- по `onblur`, вот так:
-
-```html autorun height=60
-<input type="text" id="sms"> символов: <span id="result"></span>
-
-<script>
-  var timerId;
-
-  sms.onfocus = function() {
-
-    var lastValue = sms.value;
-    timerId = setInterval(function() {
-      if (sms.value != lastValue) {
-        showCount();
-        lastValue = sms.value;
-      }
-    }, 20);
-  };
-
-  sms.onblur = function() {
-    clearInterval(timerId);
-  };
-
-  function showCount() {
-    result.innerHTML = sms.value.length;
-  }
-</script>
-```
-
-Обратим внимание -- весь этот "танец с бубном" нужен только для поддержки IE8-, в которых не поддерживается `oninput` и IE9, где `oninput` не работает при удалении.
-
-## Итого
-
-События изменения данных:
-
-| Событие | Описание | Особенности |
+| Event | Description | Specials |
 |---------|----------|-------------|
-| `change`| Изменение значения любого элемента формы. Для текстовых элементов срабатывает при потере фокуса. | В IE8- на чекбоксах ждет потери фокуса, поэтому для мгновенной реакции ставят также <code>onclick</code>-обработчик или <code>onpropertychange</code>. |
-| `input` | Событие срабатывает только на текстовых элементах. Оно не ждет потери фокуса, в отличие от <code>change</code>. | В IE8- не поддерживается, в IE9 не работает при удалении символов. |
-| `propertychange` | Только для IE10-. Универсальное событие для отслеживания изменения свойств элементов. Имя изменённого свойства содержится в `event.propertyName`. Используют для мгновенной реакции на изменение значения в старых IE. | В IE9 не срабатывает при удалении символов. |
-| `cut/copy/paste` | Срабатывают при вставке/копировании/удалении текста. Если в их обработчиках отменить действие браузера, то вставки/копирования/удаления не произойдёт. | Вставляемое значение получить нельзя: на момент срабатывания события в элементе всё ещё *старое* значение, а новое недоступно. |
-
-Ещё особенность: в IE8- события `change`, `propertychange`, `cut` и аналогичные не всплывают. То есть, обработчики нужно назначать на сам элемент, без делегирования.
-
+| `change`| A value was changed. | For text inputs triggers on focus loss. |
+| `input` | For text inputs on every change. | Triggers immediately unlike `change`. |
+| `cut/copy/paste` | Cut/copy/paste actions. | The action can be prevented. The `event.clipbordData` property gives read/write access to the clipboard. |
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md
index 571ea27f..781ce5d5 100644
--- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.md
@@ -1,8 +1,4 @@
-Модальное окно делается путём добавления к документу `DIV`, полностью перекрывающего документ и имеющего больший `z-index`.
-
-В результате все клики будут доставаться этому `DIV'у`:
-
-Стиль:
+A modal window can be implemented using a half-transparent `<div id="cover-div">` that covers the whole window, like this:
 
 ```css
 #cover-div {
@@ -17,5 +13,8 @@
 }
 ```
 
-Самой форме можно дать еще больший `z-index`, чтобы она была над `DIV'ом`. Мы не помещаем форму в контейнер, чтобы она не унаследовала полупрозрачность.
+Because the `<div>` covers everything, it gets all clicks, not the page below it.
 
+Also we can prevent page scroll by setting `body.style.overflowY='hidden'`.
+
+The form should be not in the `<div>`, but next to it, because we don't want it to have `opacity`.
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html
index ef7cbfd0..ec9e1b5e 100644
--- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/index.html
@@ -3,96 +3,49 @@
 
 <head>
   <meta charset="utf-8">
-  <style>
-    html,
-    body {
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      height: 100%;
-    }
-    
-    #prompt-form {
-      display: inline-block;
-      padding: 5px 5px 5px 70px;
-      width: 200px;
-      border: 1px solid black;
-      background: white url(https://js.cx/clipart/prompt.png) no-repeat left 5px;
-      vertical-align: middle;
-    }
-    
-    #prompt-form-container {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 9999;
-      display: none;
-      width: 100%;
-      height: 100%;
-      text-align: center;
-    }
-    
-    #prompt-form-container:before {
-      display: inline-block;
-      height: 100%;
-      content: '';
-      vertical-align: middle;
-    }
-    
-    #cover-div {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 9000;
-      width: 100%;
-      height: 100%;
-      background-color: gray;
-      opacity: 0.3;
-    }
-    
-    #prompt-form input[name="text"] {
-      display: block;
-      margin: 5px;
-      width: 180px;
-    }
-  </style>
+  <link rel="stylesheet" href="style.css">
 </head>
 
 <body style="height:3000px">
 
-  <h1>Нажмите на кнопку ниже</h1>
+  <h2>Click the button below</h2>
 
-  <input type="button" value="Нажмите для показа формы ввода" id="show-button">
+  <input type="button" value="Click to show the form" id="show-button">
 
 
   <div id="prompt-form-container">
     <form id="prompt-form">
       <div id="prompt-message"></div>
       <input name="text" type="text">
-      <input type="submit" value="Ок">
-      <input type="button" name="cancel" value="Отмена">
+      <input type="submit" value="Ok">
+      <input type="button" name="cancel" value="Cancel">
     </form>
   </div>
 
   <script>
-    // Показать полупрозрачный DIV, затеняющий всю страницу 
-    // (а форма будет не в нем, а рядом с ним, чтобы не полупрозрачная) 
+    // Show a half-transparent DIV to "shadow" the page
+    // (the form is not inside, but near it, because it shouldn't be half-transparent)
     function showCover() {
-      var coverDiv = document.createElement('div');
+      let coverDiv = document.createElement('div');
       coverDiv.id = 'cover-div';
-      document.body.appendChild(coverDiv);
+
+      // make the page unscrollable while the modal form is open
+      document.body.style.overflowY = 'hidden';
+
+      document.body.append(coverDiv);
     }
 
     function hideCover() {
-      document.body.removeChild(document.getElementById('cover-div'));
+      document.getElementById('cover-div').remove();
+      document.body.style.overflowY = '';
     }
 
     function showPrompt(text, callback) {
       showCover();
-      var form = document.getElementById('prompt-form');
-      var container = document.getElementById('prompt-form-container');
+      let form = document.getElementById('prompt-form');
+      let container = document.getElementById('prompt-form-container');
       document.getElementById('prompt-message').innerHTML = text;
-      form.elements.text.value = '';
+      form.text.value = '';
 
       function complete(value) {
         hideCover();
@@ -102,54 +55,51 @@
       }
 
       form.onsubmit = function() {
-        var value = form.elements.text.value;
-        if (value == '') return false; // игнорировать пустой submit
+        let value = form.text.value;
+        if (value == '') return false; // ignore empty submit
 
         complete(value);
         return false;
       };
 
-      form.elements.cancel.onclick = function() {
+      form.cancel.onclick = function() {
         complete(null);
       };
 
       document.onkeydown = function(e) {
-        if (e.keyCode == 27) { // escape
+        if (e.key == 'Escape') {
           complete(null);
         }
       };
 
-      var lastElem = form.elements[form.elements.length - 1];
-      var firstElem = form.elements[0];
+      let lastElem = form.elements[form.elements.length - 1];
+      let firstElem = form.elements[0];
 
       lastElem.onkeydown = function(e) {
-        if (e.keyCode == 9 && !e.shiftKey) {
+        if (e.key == 'Tab' && !e.shiftKey) {
           firstElem.focus();
           return false;
         }
       };
 
       firstElem.onkeydown = function(e) {
-        if (e.keyCode == 9 && e.shiftKey) {
+        if (e.key == 'Tab' && e.shiftKey) {
           lastElem.focus();
           return false;
         }
       };
 
-
       container.style.display = 'block';
       form.elements.text.focus();
     }
 
     document.getElementById('show-button').onclick = function() {
-      showPrompt("Введите что-нибудь<br>...умное :)", function(value) {
-        alert("Вы ввели: " + value);
+      showPrompt("Enter something<br>...smart :)", function(value) {
+        alert("You entered: " + value);
       });
     };
   </script>
 
 
-
 </body>
-
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/style.css b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/style.css
new file mode 100644
index 00000000..d4da46ac
--- /dev/null
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/solution.view/style.css
@@ -0,0 +1,51 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+#prompt-form {
+  display: inline-block;
+  padding: 5px 5px 5px 70px;
+  width: 200px;
+  border: 1px solid black;
+  background: white url(https://en.js.cx/clipart/prompt.png) no-repeat left 5px;
+  vertical-align: middle;
+}
+
+#prompt-form-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  display: none;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+#prompt-form-container:before {
+  display: inline-block;
+  height: 100%;
+  content: '';
+  vertical-align: middle;
+}
+
+#cover-div {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9000;
+  width: 100%;
+  height: 100%;
+  background-color: gray;
+  opacity: 0.3;
+}
+
+#prompt-form input[name="text"] {
+  display: block;
+  margin: 5px;
+  width: 180px;
+}
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html
index 846f2706..230a5117 100644
--- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html
@@ -3,47 +3,7 @@
 
 <head>
   <meta charset="utf-8">
-  <style>
-    html,
-    body {
-      width: 100%;
-      height: 100%;
-      padding: 0;
-      margin: 0;
-    }
-    
-    #prompt-form {
-      display: inline-block;
-      padding: 5px 5px 5px 70px;
-      width: 200px;
-      border: 1px solid black;
-      background: white url(https://js.cx/clipart/prompt.png) no-repeat left 5px;
-      vertical-align: middle;
-    }
-    
-    #prompt-form-container {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: 9999;
-      width: 100%;
-      height: 100%;
-      text-align: center;
-    }
-    
-    #prompt-form-container:before {
-      display: inline-block;
-      height: 100%;
-      content: '';
-      vertical-align: middle;
-    }
-    
-    #prompt-form input[name="text"] {
-      display: block;
-      margin: 5px;
-      width: 180px;
-    }
-  </style>
+  <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
@@ -51,15 +11,15 @@
 
   <div id="prompt-form-container">
     <form id="prompt-form">
-      <div id="prompt-message">Введите, пожалуйста...
-        <br>Что-то..</div>
+      <div id="prompt-message">Enter something...
+        <br>Please..</div>
       <input name="text" type="text">
-      <input type="submit" value="Ок">
-      <input type="button" name="cancel" value="Отмена">
+      <input type="submit" value="Ok">
+      <input type="button" name="cancel" value="Cancel">
     </form>
   </div>
 
 
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/style.css b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/style.css
new file mode 100644
index 00000000..5b327593
--- /dev/null
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/style.css
@@ -0,0 +1,39 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+#prompt-form {
+  display: inline-block;
+  padding: 5px 5px 5px 70px;
+  width: 200px;
+  border: 1px solid black;
+  background: white url(https://en.js.cx/clipart/prompt.png) no-repeat left 5px;
+  vertical-align: middle;
+}
+
+#prompt-form-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+}
+
+#prompt-form-container:before {
+  display: inline-block;
+  height: 100%;
+  content: '';
+  vertical-align: middle;
+}
+
+#prompt-form input[name="text"] {
+  display: block;
+  margin: 5px;
+  width: 180px;
+}
diff --git a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
index 8b899ef6..c5b09589 100644
--- a/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
+++ b/2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md
@@ -2,32 +2,32 @@ importance: 5
 
 ---
 
-# Модальное диалоговое окно
+# Modal form
 
-Создайте функцию `showPrompt(text, callback)`, которая выводит форму для ввода с сообщением `text` и кнопками `ОК/Отмена`.
+Create a function `showPrompt(html, callback)` that shows a form with the message `html`, an input field and buttons `OK/CANCEL`.
 
-- При отправке формы (OK/ввод в текстовом поле) -- должна вызываться функция `callback` со значением поля.
-- При нажатии на `Отмена` или на клавишу `key:Esc` -- должна вызываться функция `callback(null)`. Клавиша `key:Esc` должна закрывать форму всегда, даже если поле для ввода сообщения не в фокусе.
+- A user should type something into a text field and press `key:Enter` or the OK button, then `callback(value)` is called with the value he entered.
+- Otherwise if the user presses `key:Esc` or CANCEL, then `callback(null)` is called.
 
-Особенности реализации:
+In both cases that ends the input process and removes the form.
 
-- Форма должна показываться в центре окна (и оставаться в центре при изменении его размеров, а также при прокрутке окна!).
-- Текст может состоять из нескольких строк, возможен любой HTML
-- При показе формы остальные элементы страницы использовать нельзя, не работают другие кнопки и т.п, это окно -- *модальное*.
-- При показе формы -- сразу фокус на `INPUT` для ввода.
-- Нажатия `key:Tab`/`key:Shift+Tab` переключают в цикле только по полям формы, они не позволяют переключиться на другие элементы страницы.
+Requirements:
+
+- The form should be in the center of the window.
+- The form is *modal*. In other words, no interaction with the rest of the page is possible until the user closes it.
+- When the form is shown, the focus should be inside the `<input>` for the user.
+- Keys `key:Tab`/`key:Shift+Tab` should shift the focus between form fields, don't allow it to leave for other page elements.
 
 Пример использования:
 
 ```js
-showPrompt("Введите что-нибудь<br>... умное :)", function(value) {
-  alert( value );
+showPrompt("Enter something<br>...smart :)", function(value) {
+  alert(value);
 });
 ```
 
-Демо в ифрейме:
+A demo in the iframe:
 
 [iframe src="solution" height=160 border=1]
 
-Исходный HTML/CSS для формы с готовым fixed-позиционированием - в песочнице.
-
+P.S. The source document has HTML/CSS for the form with fixed positioning, but it's up to you to make it modal.
diff --git a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.view/index.html b/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.view/index.html
deleted file mode 100644
index b4c28716..00000000
--- a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/solution.view/index.html
+++ /dev/null
@@ -1,118 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    td select,
-    td input {
-      width: 150px;
-    }
-    
-    label {
-      display: block;
-    }
-    
-    .error input,
-    .error textarea {
-      border: 1px solid red;
-    }
-    
-    .error {
-      color: red;
-    }
-  </style>
-</head>
-
-<body>
-
-
-  <form>
-    <table>
-      <tr>
-        <td>От кого</td>
-        <td>
-          <input name="from" type="text">
-        </td>
-      </tr>
-      <tr>
-        <td>Ваш пароль</td>
-        <td>
-          <input name="password" type="password">
-        </td>
-      </tr>
-      <tr>
-        <td>Повторите пароль</td>
-        <td>
-          <input name="password2" type="password">
-        </td>
-      </tr>
-      <tr>
-        <td>Куда</td>
-        <td>
-          <select name="to">
-            <option></option>
-            <option value="1">Отдел снабжения</option>
-            <option value="2">Отдел разработки</option>
-            <option value="3">Директору</option>
-          </select>
-        </td>
-      </tr>
-    </table>
-
-    Сообщение:
-    <label>
-      <textarea name="message" style="display:block;width:400px;height:80px"></textarea>
-    </label>
-
-    <input type="button" onclick="validate(this.form)" value="Проверить">
-  </form>
-
-  <script>
-    function showError(container, errorMessage) {
-      container.className = 'error';
-      var msgElem = document.createElement('span');
-      msgElem.className = "error-message";
-      msgElem.innerHTML = errorMessage;
-      container.appendChild(msgElem);
-    }
-
-    function resetError(container) {
-      container.className = '';
-      if (container.lastChild.className == "error-message") {
-        container.removeChild(container.lastChild);
-      }
-    }
-
-    function validate(form) {
-      var elems = form.elements;
-
-      resetError(elems.from.parentNode);
-      if (!elems.from.value) {
-        showError(elems.from.parentNode, ' Укажите от кого.');
-      }
-
-      resetError(elems.password.parentNode);
-      if (!elems.password.value) {
-        showError(elems.password.parentNode, ' Укажите пароль.');
-      } else if (elems.password.value != elems.password2.value) {
-        showError(elems.password.parentNode, ' Пароли не совпадают.');
-      }
-
-      resetError(elems.to.parentNode);
-      if (!elems.to.value) {
-        showError(elems.to.parentNode, ' Укажите, куда.');
-      }
-
-      resetError(elems.message.parentNode);
-      if (!elems.message.value) {
-        showError(elems.message.parentNode, ' Отсутствует текст.');
-      }
-
-    }
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/source.view/index.html b/2-ui/4-forms-controls/4-forms-submit/2-form-validation/source.view/index.html
deleted file mode 100644
index b316af7c..00000000
--- a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/source.view/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta charset="utf-8">
-  <style>
-    td select,
-    td input {
-      width: 150px;
-    }
-    
-    label {
-      display: block;
-    }
-    /* ваши стили */
-  </style>
-</head>
-
-<body>
-
-
-  <form>
-    <table>
-      <tr>
-        <td>От кого</td>
-        <td>
-          <input name="from" type="text">
-        </td>
-      </tr>
-      <tr>
-        <td>Ваш пароль</td>
-        <td>
-          <input name="password" type="password">
-        </td>
-      </tr>
-      <tr>
-        <td>Повторите пароль</td>
-        <td>
-          <input name="password2" type="password">
-        </td>
-      </tr>
-      <tr>
-        <td>Куда</td>
-        <td>
-          <select name="to">
-            <option></option>
-            <option value="1">Отдел снабжения</option>
-            <option value="2">Отдел разработки</option>
-            <option value="3">Директору</option>
-          </select>
-        </td>
-      </tr>
-    </table>
-
-    Сообщение:
-    <label>
-      <textarea name="message" style="display:block;width:400px;height:100px"></textarea>
-    </label>
-
-    <input type="button" onclick="validate(this.form)" value="Проверить">
-  </form>
-
-  <script>
-    function validate(form) {
-      /* ваш код */
-    }
-
-    /* ваш код */
-  </script>
-
-
-</body>
-
-</html>
\ No newline at end of file
diff --git a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/task.md b/2-ui/4-forms-controls/4-forms-submit/2-form-validation/task.md
deleted file mode 100644
index 42ec25fd..00000000
--- a/2-ui/4-forms-controls/4-forms-submit/2-form-validation/task.md
+++ /dev/null
@@ -1,17 +0,0 @@
-importance: 3
-
----
-
-# Валидация формы
-
-Напишите функцию `validate(form)`, которая проверяет содержимое формы по клику на кнопку "Проверить".
-
-Ошибки:
-
-1. Одно из полей не заполнено.
-2. Пароли не совпадают.
-
-Ошибка должна сопровождаться сообщением у поля. Например:
-
-[iframe height=280 src="solution"]
-
diff --git a/2-ui/4-forms-controls/4-forms-submit/article.md b/2-ui/4-forms-controls/4-forms-submit/article.md
index f3eb1409..0b4b6e1b 100644
--- a/2-ui/4-forms-controls/4-forms-submit/article.md
+++ b/2-ui/4-forms-controls/4-forms-submit/article.md
@@ -1,56 +1,67 @@
-# Формы: отправка, событие и метод submit
+# Form submission: event and method submit
 
-Событие `submit` возникает при отправке формы. Наиболее частое его применение -- это *валидация* (проверка) формы перед отправкой.
+The `submit` event triggers when the form is submitted, it is usually used to validate the form before sending it to the server or to abort the submission and process it in Javascript.
 
-Метод `submit` позволяет инициировать отправку формы из JavaScript, без участия пользователя. Далее мы рассмотрим детали их использования.
+The method `form.submit()` allows to initiate form sending from JavaScript. We can use it to dynamically create and send our own forms to server.
+
+Let's see more details of them.
 
 [cut]
 
-## Событие submit
+## Event: submit
 
-Чтобы отправить форму на сервер, у посетителя есть два способа:
+There are two main ways to submit a form:
 
-1. **Первый -- это нажать кнопку `<input type="submit">` или `<input type="image">`.**
-2. **Второй -- нажать Enter, находясь на каком-нибудь поле.**
+1. The first -- to click `<input type="submit">` or `<input type="image">`.
+2. The second -- press `key:Enter` on an input field.
 
-Какой бы способ ни выбрал посетитель -- будет сгенерировано событие `submit`. Обработчик в нём может проверить данные и, если они неверны, то вывести ошибку и сделать `event.preventDefault()` -- тогда форма не отправится на сервер.
+Both actions lead to `submit` event on the form. The handler can check the data, and if there are errors, show them and call `event.preventDefault()`, then the form won't be sent to the server.
 
-Например, в таком HTML оба способа выведут `alert`, форма не будет отправлена:
+In the form below:
+1. Go into the text field and press `key:Enter`.
+2. Click `<input type="submit">`.
 
-```html autorun height=80 no-beautify
+Both actions show `alert` and the form is not sent anywhere due to `return false`:
+
+```html autorun height=60 no-beautify
 <form onsubmit="alert('submit!');return false">
-  Первый: Enter в текстовом поле <input type="text" value="Текст"><br>
-  Второй: Нажать на "Отправить": <input type="submit" value="Отправить">
+  First: Enter in the input field <input type="text" value="text"><br>
+  Second: Click "submit": <input type="submit" value="Submit">
 </form>
 ```
 
-Ожидаемое поведение:
+````smart header="Relation between `submit` and `click`"
+When a form is sent using `key:Enter` on an input field, a `click` event triggers on the `<input type="submit">`.
 
-1. Перейдите в текстовое поле и нажмите Enter, будет событие, но форма не отправится на сервер благодаря `return false` в обработчике.
-2. То же самое произойдет при клике на `<input type="submit">`.
+That's rather funny, because there was no click at all.
 
-````smart header="Взаимосвязь событий `submit` и `click`"
-При отправке формы путём нажатия Enter на текстовом поле, на элементе `<input type="submit">` везде, кроме IE8-, генерируется событие `click`.
-
-Это довольно забавно, учитывая что клика-то и не было.
-
-```html autorun height=80
-<form onsubmit="alert('submit');return false">
- <input type="text" size="30" value="При нажатии Enter будет click">
+Here's the demo:
+```html autorun height=60
+<form onsubmit="return false">
+ <input type="text" size="30" value="Focus here and press enter">
  <input type="submit" value="Submit" *!*onclick="alert('click')"*/!*>
 </form>
 ```
+
 ````
 
-```warn header="В IE8- событие `submit` не всплывает"
-В IE8- событие `submit` не всплывает. Нужно вешать обработчик `submit` на сам элемент формы, без использования делегирования.
+## Method: submit
+
+To submit a form to the server manually, we can call `form.submit()`.
+
+Then the `submit` event is not generated. It is assumed that if the programmer calls `form.submit()`, then the script already did all related processing.
+
+Sometimes that's used to manually create and send a form, like this:
+
+```js run
+let form = document.createElement('form');
+form.action = 'https://google.com/search';
+form.method = 'GET';
+
+form.innerHTML = '<input name="q" value="test">';
+
+// the form must be in the document to submit it
+document.body.append(form);
+
+form.submit();
 ```
-
-## Метод submit
-
-Чтобы отправить форму на сервер из JavaScript -- нужно вызвать на элементе формы метод `form.submit()`.
-
-При этом само событие `submit` не генерируется. Предполагается, что если программист вызывает метод `form.submit()`, то он выполнил все проверки.
-
-Это используют, в частности, для искусственной генерации и отправки формы.
-
diff --git a/figures.sketch b/figures.sketch
index 222695ab..d2a41958 100644
Binary files a/figures.sketch and b/figures.sketch differ