merging all conflicts

Author: iliakan

1-js/01-getting-started/1-intro/article.md

@@ -67,8 +67,13 @@ Exemplos de tais restrições incluem:
 
     Os navegadores modernos permitem que ele trabalhe com arquivos, mas o acesso é limitado e fornecido apenas se o usuário executar determinadas ações, como "dropping" de um arquivo em uma janela do navegador ou selecioná-lo por meio de uma tag `<input>`.
 
+<<<<<<< HEAD
    Existem maneiras de interagir com a câmera / microfone e outros dispositivos, mas eles exigem permissão explícita do usuário. Assim, uma página habilitada para JavaScript pode não habilmente habilitar uma câmera web, observar os arredores e enviar as informações para a [NSA](https://pt.wikipedia.org/wiki/Ag%C3%AAncia_de_Seguran%C3%A7a_Nacional).
 - Diferentes abas/janelas geralmente não se conhecem mutuamente. Às vezes sim, por exemplo, quando uma janela usa JavaScript para abrir a outra. Mas mesmo neste caso, JavaScript de uma página pode não acessar a outra se eles vierem de sites diferentes (de um domínio, protocolo ou porta diferente).
+=======
+    There are ways to interact with camera/microphone and other devices, but they require a user's explicit permission. So a JavaScript-enabled page may not sneakily enable a web-camera, observe the surroundings and send the information to the [NSA](https://en.wikipedia.org/wiki/National_Security_Agency).
+- Different tabs/windows generally do not know about each other. Sometimes they do, for example when one window uses JavaScript to open the other one. But even in this case, JavaScript from one page may not access the other if they come from different sites (from a different domain, protocol or port).
+>>>>>>> d6e88647b42992f204f57401160ebae92b358c0d
 
     Isso é chamado de "Política de mesma origem ". Para contornar isso, *ambas as páginas* devem conter um código JavaScript especial que lida com a troca de dados.
 

1-js/04-object-basics/07-optional-chaining/article.md

@@ -9,51 +9,81 @@ The optional chaining `?.` is a safe way to access nested object properties, eve
 
 If you've just started to read the tutorial and learn JavaScript, maybe the problem hasn't touched you yet, but it's quite common.
 
-As an example, let's consider objects for user data. Most of our users have addresses in `user.address` property, with the street `user.address.street`, but some did not provide them. 
+As an example, consider objects for user data. Most of our users have addresses in `user.address` property, with the street `user.address.street`, but some did not provide them.
 
-In such case, when we attempt to get `user.address.street`, we'll get an error:
+In such case, when we attempt to get `user.address.street`, we may get an error:
 
 ```js run
-let user = {}; // the user without "address" property
+let user = {}; // a user without "address" property
 
 alert(user.address.street); // Error!
 ```
 
-That's the expected result, JavaScript works like this, but many practical cases we'd prefer to get `undefined` instead of an error (meaning "no street").
+That's the expected result, JavaScript works like this. As `user.address` is `undefined`, the attempt to get `user.address.street` fails with an error. Although, in many practical cases we'd prefer to get `undefined` instead of an error here (meaning "no street").
 
-...And another example. In the web development, we may need to get an information about an element on the page, that sometimes doesn't exist:
+...And another example. In the web development, we may need the information about an element on the page. The element is returned by `document.querySelector('.elem')`, and the catch is again - that it sometimes doesn't exist:
 
 ```js run
-// Error if the result of querySelector(...) is null
-let html = document.querySelector('.my-element').innerHTML;
+// the result of the call document.querySelector('.elem') may be an object or null
+let html = document.querySelector('.elem').innerHTML; // error if it's null
 ```
 
-Before `?.` appeared in the language, the `&&` operator was used to work around that.
+Once again, we may want to avoid the error in such case.
 
-For example:
+How can we do this?
+
+The obvious solution would be to check the value using `if` or the conditional operator `?`, before accessing it, like this:
+
+```js
+let user = {};
+
+alert(user.address ? user.address.street : undefined);
+```
+
+...But that's quite inelegant. As you can see, the `user.address` is duplicated in the code. For more deeply nested properties, that becomes a problem.
+
+E.g. let's try getting `user.address.street.name`.
+
+We need to check both `user.address` and `user.address.street`:
+
+```js
+let user = {}; // user has no address
+
+alert(user.address ? user.address.street ? user.address.street.name : null : null);
+```
+
+That looks awful.
+
+Before the optional chaining `?.` was added to the language, people used the `&&` operator for such cases:
 
 ```js run
 let user = {}; // user has no address
 
-alert( user && user.address && user.address.street ); // undefined (no error)
+alert( user.address && user.address.street && user.address.street.name ); // undefined (no error)
 ```
 
-AND'ing the whole path to the property ensures that all components exist (if not, the evaluation stops), but is cumbersome to write.
+AND'ing the whole path to the property ensures that all components exist (if not, the evaluation stops), but also isn't ideal.
+
+As you can see, the property names are still duplicated in the code. E.g. in the code above, `user.address` appears three times.
+
+And now, finally, the optional chaining comes to the rescue!
 
 ## Optional chaining
 
 The optional chaining `?.` stops the evaluation and returns `undefined` if the part before `?.` is `undefined` or `null`.
 
 **Further in this article, for brevity, we'll be saying that something "exists" if it's not `null` and not `undefined`.**
 
-Here's the safe way to access `user.address.street`:
+Here's the safe way to access `user.address.street` using `?.`:
 
 ```js run
 let user = {}; // user has no address
 
 alert( user?.address?.street ); // undefined (no error)
 ```
 
+The code is short and clean, there's no duplication at all.
+
 Reading the address with `user?.address` works even if `user` object doesn't exist:
 
 ```js run
@@ -65,14 +95,14 @@ alert( user?.address.street ); // undefined
 
 Please note: the `?.` syntax makes optional the value before it, but not any further.
 
-In the example above, `user?.` allows only `user` to be `null/undefined`.
+In the example above, `user?.address.street` allows only `user` to be `null/undefined`.
 
 On the other hand, if `user` does exist, then it must have `user.address` property, otherwise `user?.address.street` gives an error at the second dot.
 
 ```warn header="Don't overuse the optional chaining"
 We should use `?.` only where it's ok that something doesn't exist.
 
-For example, if according to our coding logic `user` object must be there, but `address` is optional, then `user.address?.street` would be better.
+For example, if according to our coding logic `user` object must exist, but `address` is optional, then we should write `user.address?.street`, but not `user?.address?.street`.
 
 So, if `user` happens to be undefined due to a mistake, we'll see a programming error about it and fix it. Otherwise, coding errors can be silenced where not appropriate, and become more difficult to debug.
 ```
@@ -84,7 +114,7 @@ If there's no variable `user` at all, then `user?.anything` triggers an error:
 // ReferenceError: user is not defined
 user?.address;
 ```
-There must be a declaration (e.g. `let/const/var user`). The optional chaining works only for declared variables.
+The variable must be declared (e.g. `let/const/var user` or as a function parameter). The optional chaining works only for declared variables.
 ````
 
 ## Short-circuiting

1-js/05-data-types/05-array-methods/2-filter-range/task.md

@@ -4,7 +4,7 @@ importance: 4
 
 # Filter range
 
-Write a function `filterRange(arr, a, b)` that gets an array `arr`, looks for elements between `a` and `b` in it and returns an array of them. 
+Write a function `filterRange(arr, a, b)` that gets an array `arr`, looks for elements with values higher or equal to `a` and lower or equal to `b` and return a result as an array.
 
 The function should not modify the array. It should return the new array.
 

2-ui/1-document/05-basic-dom-node-properties/article.md

@@ -424,23 +424,23 @@ Compare the two:
 <div id="elem2"></div>
 
 <script>
-  let name = prompt("What's your name?", "<b>Winnie-the-pooh!</b>");
+  let name = prompt("What's your name?", "<b>Winnie-the-Pooh!</b>");
 
   elem1.innerHTML = name;
   elem2.textContent = name;
 </script>
 ```
 
 1. The first `<div>` gets the name "as HTML": all tags become tags, so we see the bold name.
-2. The second `<div>` gets the name "as text", so we literally see `<b>Winnie-the-pooh!</b>`.
+2. The second `<div>` gets the name "as text", so we literally see `<b>Winnie-the-Pooh!</b>`.
 
 In most cases, we expect the text from a user, and want to treat it as text. We don't want unexpected HTML in our site. An assignment to `textContent` does exactly that.
 
 ## The "hidden" property
 
 The "hidden" attribute and the DOM property specifies whether the element is visible or not.
 
-We can use it in HTML or assign using JavaScript, like this:
+We can use it in HTML or assign it using JavaScript, like this:
 
 ```html run height="80"
 <div>Both divs below are hidden</div>

2-ui/4-forms-controls/1-form-elements/article.md

@@ -215,7 +215,9 @@ Here is an example:
 </script>
 ```
 
-Unlike most other controls, `<select>` allows to select multiple options at once if it has `multiple` attribute. That's feature is rarely used. In that case we need to use the first way: add/remove the `selected` property from `<option>` subelements.
+Unlike most other controls, `<select>` allows to select multiple options at once if it has `multiple` attribute. Although such functionality is available, it is rarely used. 
+
+In cases that you have to, then use the first way: add/remove the `selected` property from `<option>` subelements.
 
 We can get their collection as `select.options`, for instance:
 

9-regular-expressions/16-regexp-sticky/article.md

@@ -3,36 +3,37 @@
 
 The flag `pattern:y` allows to perform the search at the given position in the source string.
 
-To grasp the use case of `pattern:y` flag, and see how great it is, let's explore a practical use case.
+To grasp the use case of `pattern:y` flag, and better understand the ways of regexps, let's explore a practical example.
 
-One of common tasks for regexps is "lexical analysis": we get a text, e.g. in a programming language, and analyze it for structural elements.
-
-For instance, HTML has tags and attributes, JavaScript code has functions, variables, and so on.
+One of common tasks for regexps is "lexical analysis": we get a text, e.g. in a programming language, and need to find its structural elements. For instance, HTML has tags and attributes, JavaScript code has functions, variables, and so on.
 
 Writing lexical analyzers is a special area, with its own tools and algorithms, so we don't go deep in there, but there's a common task: to read something at the given position.
 
 E.g. we have a code string `subject:let varName = "value"`, and we need to read the variable name from it, that starts at position `4`.
 
 We'll look for variable name using regexp `pattern:\w+`. Actually, JavaScript variable names need a bit more complex regexp for accurate matching, but here it doesn't matter.
 
-A call to `str.match(/\w+/)` will find only the first word in the line. Or all words with the flag `pattern:g`. But we need only one word at position `4`.
+- A call to `str.match(/\w+/)` will find only the first word in the line (`var`). That's not it.
+- We can add the flag `pattern:g`. But then the call `str.match(/\w+/g)` will look for all words in the text, while we need one word at position `4`. Again, not what we need.
+
+**So, how to search for a regexp exactly at the given position?**
 
-To search from the given position, we can use method `regexp.exec(str)`.
+Let's try using method `regexp.exec(str)`.
 
-If the `regexp` doesn't have flags `pattern:g` or `pattern:y`, then this method looks for the first match in the string `str`, exactly like `str.match(regexp)`. Such simple no-flags case doesn't interest us here.
+For a `regexp` without flags `pattern:g` and `pattern:y`, this method looks only for the first match, it works exactly like `str.match(regexp)`.
 
-If there's flag `pattern:g`, then it performs the search in the string `str`, starting from position stored in its `regexp.lastIndex` property. And, if it finds a match, then sets `regexp.lastIndex` to the index immediately after the match.
+...But if there's flag `pattern:g`, then it performs the search in `str`, starting from position stored in the `regexp.lastIndex` property. And, if it finds a match, then sets `regexp.lastIndex` to the index immediately after the match.
 
-When a regexp is created, its `lastIndex` is `0`.
+In other words, `regexp.lastIndex` serves as a starting point for the search, that each `regexp.exec(str)` call resets to the new value ("after the last match"). That's only if there's `pattern:g` flag, of course.
 
 So, successive calls to `regexp.exec(str)` return matches one after another.
 
-An example (with flag `pattern:g`):
+Here's an example of such calls:
 
 ```js run
-let str = 'let varName';
-
+let str = 'let varName'; // Let's find all words in this string
 let regexp = /\w+/g;
+
 alert(regexp.lastIndex); // 0 (initially lastIndex=0)
 
 let word1 = regexp.exec(str);
@@ -48,8 +49,6 @@ alert(word3); // null (no more matches)
 alert(regexp.lastIndex); // 0 (resets at search end)
 ```
 
-Every match is returned as an array with groups and additional properties.
-
 We can get all matches in the loop:
 
 ```js run
@@ -65,11 +64,13 @@ while (result = regexp.exec(str)) {
 }
 ```
 
-Such use of `regexp.exec` is an alternative to method `str.matchAll`.
+Such use of `regexp.exec` is an alternative to method `str.matchAll`, with a bit more control over the process.
 
-Unlike other methods, we can set our own `lastIndex`, to start the search from the given position.
+Let's go back to our task.
 
-For instance, let's find a word, starting from position `4`:
+We can manually set `lastIndex` to `4`, to start the search from the given position!
+
+Like this:
 
 ```js run
 let str = 'let varName = "value"';
@@ -84,27 +85,35 @@ let word = regexp.exec(str);
 alert(word); // varName
 ```
 
+Hooray! Problem solved! 
+
 We performed a search of `pattern:\w+`, starting from position `regexp.lastIndex = 4`.
 
-Please note: the search starts at position `lastIndex` and then goes further. If there's no word at position `lastIndex`, but it's somewhere after it, then it will be found:
+The result is correct.
+
+...But wait, not so fast.
+
+Please note: the `regexp.exec` call start searching at position `lastIndex` and then goes further. If there's no word at position `lastIndex`, but it's somewhere after it, then it will be found:
 
 ```js run
 let str = 'let varName = "value"';
 
 let regexp = /\w+/g;
 
 *!*
+// start the search from position 3
 regexp.lastIndex = 3;
 */!*
 
-let word = regexp.exec(str);
+let word = regexp.exec(str); 
+// found the match at position 4
 alert(word[0]); // varName
 alert(word.index); // 4
 ```
 
-...So, with flag `pattern:g` property `lastIndex` sets the starting position for the search.
+For some tasks, including the lexical analysis, that's just wrong. We need to find a match exactly at the given position at the text, not somewhere after it. And that's what the flag `y` is for.
 
-**Flag `pattern:y` makes `regexp.exec` to look exactly at position `lastIndex`, not before, not after it.**
+**The flag `pattern:y` makes `regexp.exec` to search exactly at position `lastIndex`, not "starting from" it.**
 
 Here's the same search with flag `pattern:y`:
 
@@ -122,6 +131,8 @@ alert( regexp.exec(str) ); // varName (word at position 4)
 
 As we can see, regexp `pattern:/\w+/y` doesn't match at position `3` (unlike the flag  `pattern:g`), but matches at position `4`.
 
-Imagine, we have a long text, and there are no matches in it, at all. Then searching with flag `pattern:g` will go till the end of the text, and this will take significantly more time than the search with flag `pattern:y`.
+Not only that's what we need, there's an important performance gain when using flag `pattern:y`.
+
+Imagine, we have a long text, and there are no matches in it, at all. Then a search with flag `pattern:g` will go till the end of the text and find nothing, and this will take significantly more time than the search with flag `pattern:y`, that checks only the exact position.
 
-In such tasks like lexical analysis, there are usually many searches at an exact position. Using flag `pattern:y` is the key for a good performance.
+In tasks like lexical analysis, there are usually many searches at an exact position, to check what we have there. Using flag `pattern:y` is the key for correct implementations and a good performance.