merge

Author: iliakan

1-js/05-data-types/03-string/1-ucfirst/solution.md

@@ -15,7 +15,7 @@ There are two variants here:
 
 Here's the 2nd variant:
 
-```js run
+```js run demo
 function ucFirst(str) {
   if (!str) return str;
 

1-js/11-async/02-promise-basics/article.md

@@ -8,7 +8,7 @@ Everyone is happy, because the people don't crowd you any more, and fans, becaus
 
 This is a real-life analogy for things we often have in programming:
 
-1. A "producing code" that does something and takes time. For instance, the code loads a remote script. That's a "singer".
+1. A "producing code" that does something and takes time. For instance, the code loads data over a network. That's a "singer".
 2. A "consuming code" that wants the result of the "producing code" once it's ready. Many functions  may need that result. These are the "fans".
 3. A *promise* is a special JavaScript object that links the "producing code" and the "consuming code" together. In terms of our analogy: this is the "subscription list". The "producing code" takes whatever time it needs to produce the promised result, and the "promise" makes that result available to all of the subscribed code when it's ready.
 
@@ -27,7 +27,7 @@ The function passed to `new Promise` is called the *executor*. When the promise
 The resulting `promise` object has internal properties:
 
 - `state` — initially "pending", then changes to either "fulfilled" or "rejected",
-- `result` — an arbitrary value of your choosing, initially `undefined`.
+- `result` — an arbitrary value, initially `undefined`.
 
 When the executor finishes the job, it should call one of the functions that it gets as arguments:
 
@@ -56,7 +56,7 @@ let promise = new Promise(function(resolve, reject) {
 We can see two things by running the code above:
 
 1. The executor is called automatically and immediately (by the `new Promise`).
-2. The executor receives two arguments: `resolve` and `reject` — these functions are pre-defined by the JavaScript engine. So we don't need to create them. Instead, we should write the executor to call them when ready.
+2. The executor receives two arguments: `resolve` and `reject` — these functions are pre-defined by the JavaScript engine. So we don't need to create them. We only should call one of them when ready.
 
 After one second of "processing" the executor calls `resolve("done")` to produce the result:
 
@@ -77,7 +77,7 @@ let promise = new Promise(function(resolve, reject) {
 
 To summarize, the executor should do a job (something that takes time usually) and then call `resolve` or `reject` to change the state of the corresponding Promise object.
 
-The Promise that is either resolved or rejected is called "settled", as opposed to a "pending" Promise.
+The Promise that is either resolved or rejected is called "settled", as opposed to a initially "pending" Promise.
 
 ````smart header="There can be only a single result or an error"
 The executor should call only one `resolve` or one `reject`. The promise's state change is final.
@@ -112,9 +112,9 @@ let promise = new Promise(function(resolve, reject) {
 });
 ```
 
-For instance, this might happen when we start to do a job but then see that everything has already been completed.
+For instance, this might happen when we start to do a job but then see that everything has already been completed and  cached.
 
-That's fine. We immediately have a resolved Promise, nothing wrong with that.
+That's fine. We immediately have a resolved promise.
 ````
 
 ```smart header="The `state` and `result` are internal"
@@ -140,12 +140,12 @@ promise.then(
 
 The first argument of `.then` is a function that:
 
-1. runs when the Promise is resolved, and
+1. runs when the promise is resolved, and
 2. receives the result.
 
 The second argument of `.then` is a function that:
 
-1. runs when the Promise is rejected, and
+1. runs when the promise is rejected, and
 2. receives the error.
 
 For instance, here's a reaction to a successfully resolved promise:
@@ -233,10 +233,10 @@ new Promise((resolve, reject) => {
   .then(result => show result, err => show error)
 ```
 
-It's not exactly an alias though. There are several important differences:
+It's not exactly an alias of `then(f,f)` though. There are several important differences:
 
 1. A `finally` handler has no arguments. In `finally` we don't know whether the promise is successful or not. That's all right, as our task is usually to perform "general" finalizing procedures.
-2. Finally passes through results and errors to the next handler.
+2. A `finally` handler passes through results and errors to the next handler.
 
     For instance, here the result is passed through `finally` to `then`:
     ```js run
@@ -257,11 +257,11 @@ It's not exactly an alias though. There are several important differences:
       .catch(err => alert(err));  // <-- .catch handles the error object
     ```  
 
-    That's very convenient, because finally is not meant to process promise results. So it passes them through.
+    That's very convenient, because `finally` is not meant to process a promise result. So it passes it through.
 
     We'll talk more about promise chaining and result-passing between handlers in the next chapter.
 
-3. Last, but not least, `.finally(f)` is a more convenient syntax than `.then(f, f)`: no need to duplicate the function.
+3. Last, but not least, `.finally(f)` is a more convenient syntax than `.then(f, f)`: no need to duplicate the function `f`.
 
 ````smart header="On settled promises handlers runs immediately"
 If a promise is pending, `.then/catch/finally` handlers wait for the result. Otherwise, if a promise has already settled, they execute immediately:

1-js/11-async/03-promise-chaining/head.html

@@ -10,25 +10,6 @@
     document.head.append(script);
   });
 }
-
-class HttpError extends Error {
-  constructor(response) {
-    super(`${response.status} for ${response.url}`);
-    this.name = 'HttpError';
-    this.response = response;
-  }
-}
-
-function loadJson(url) {
-  return fetch(url)
-    .then(response => {
-      if (response.status == 200) {
-        return response.json();
-      } else {
-        throw new HttpError(response);
-      }
-    })
-}
 </script>
 
 <style>

1-js/11-async/04-promise-error-handling/head.html

@@ -1,16 +1,4 @@
 <script>
-function loadScript(src) {
-  return new Promise(function(resolve, reject) {
-    let script = document.createElement('script');
-    script.src = src;
-
-    script.onload = () => resolve(script);
-    script.onerror = () => reject(new Error("Script load error: " + src));
-
-    document.head.append(script);
-  });
-}
-
 class HttpError extends Error {
   constructor(response) {
     super(`${response.status} for ${response.url}`);

2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/my.css

@@ -20,6 +20,6 @@
 }
 
 .edit:focus {
-  outline: none;
   /* remove focus border in Safari */
+  outline: none;
 }

2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/my.css

@@ -20,6 +20,6 @@
 }
 
 .edit:focus {
-  outline: none;
   /* remove focus border in Safari */
+  outline: none;
 }

2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/my.css

@@ -3,14 +3,15 @@
   margin: 0;
   padding: 0;
   display: block;
-  resize: none;
+  
   /* remove resizing handle in Firefox */
+  resize: none;
 
-  outline: none;
   /* remove outline on focus in Chrome */
+  outline: none;
 
-  overflow: auto;
   /* remove scrollbar in IE */
+  overflow: auto;
 }
 
 .edit-controls {

2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md

@@ -1,5 +1,5 @@
 
-We can use `mouse.onclick` to handle the click and make the mouse "moveable" with `position:fixed`, then then `mouse.onkeydown` to handle arrow keys.
+We can use `mouse.onclick` to handle the click and make the mouse "moveable" with `position:fixed`, then `mouse.onkeydown` to handle arrow keys.
 
 The only pitfall is that `keydown` only triggers on elements with focus. So we need to add `tabindex` to the element.  As we're forbidden to change HTML, we can use `mouse.tabIndex` property for that.
 

2-ui/4-forms-controls/2-focus-blur/article.md

@@ -2,13 +2,13 @@
 
 An element receives a focus when the user either clicks on it or uses the `key:Tab` key on the keyboard. There's also an `autofocus` HTML attribute that puts the focus into an element by default when a page loads and other means of getting a focus.
 
-Focusing generally means: "prepare to accept the data here", so that's the moment when we can run the code to initialize or load something.
+Focusing on an element generally means: "prepare to accept the data here", so that's the moment when we can run the code to initialize the required functionality.
 
 The moment of losing the focus ("blur") can be even more important. That's when a user clicks somewhere else or presses `key:Tab` to go to the next form field, or there are other means as well.
 
 Losing the focus generally means: "the data has been entered", so we can run the code to check it or even to save it to the server and so on.
 
-There are important peculiarities when working with focus events. We'll do the best to cover them here.
+There are important peculiarities when working with focus events. We'll do the best to cover them further on.
 
 ## Events focus/blur
 
@@ -203,7 +203,6 @@ So here's another working variant:
 
 <script>
 *!*
-  // put the handler on capturing phase (last argument true)
   form.addEventListener("focusin", () => form.classList.add('focused'));
   form.addEventListener("focusout", () => form.classList.remove('focused'));
 */!*

2-ui/5-loading/02-script-async-defer/article.md

@@ -29,11 +29,11 @@ There are some workarounds to that. For instance, we can put a script at the bot
 </body>
 ```
 
-But this solution is far from perfect. For example, the browser actually notices the script (and can start downloading it) only after it downloaded the full HTML document. For long HTML documents, that may be a noticeable delay.
+But this solution is far from perfect. For example, the browser notices the script (and can start downloading it) only after it downloaded the full HTML document. For long HTML documents, that may be a noticeable delay.
 
-Such things are invisible for people using very fast connections, but many people in the world still have slower internet speeds and far-from-perfect mobile connectivity.
+Such things are invisible for people using very fast connections, but many people in the world still have slower internet speeds and use far-from-perfect mobile internet.
 
-Luckily, there are two `<script>` attributes that solve the problem for us: `defer` and `async`
+Luckily, there are two `<script>` attributes that solve the problem for us: `defer` and `async`.
 
 ## defer
 
@@ -86,7 +86,7 @@ But the specification requires scripts to execute in the document order, so it w
 ```
 
 ```smart header="The `defer` attribute is only for external scripts"
-The `defer` attribute is ignored if the script has no `src`.
+The `defer` attribute is ignored if the `<script>` tag has no `src`.
 ```
 
 
@@ -120,16 +120,17 @@ So, if we have several `async` scripts, they may execute in any order. Whatever
 2. `DOMContentLoaded` may happen both before and after `async`, no guarantees here.
 3. Async scripts don't wait for each other. A smaller script `small.js` goes second, but probably loads before `long.js`, so runs first. That's called a "load-first" order.
 
-Async scripts are great when we integrate an independent third-party script into the page: counters, ads and so on.
+Async scripts are great when we integrate an independent third-party script into the page: counters, ads and so on, as they don't depend on our scripts, and our scripts shouldn't wait for them:
 
 ```html
+<!-- Google Analytics is usually added like this -->
 <script async src="https://google-analytics.com/analytics.js"></script>
 ```
 
 
 ## Dynamic scripts
 
-We can also create a script dynamically using JavaScript:
+We can also add a script dynamically using JavaScript:
 
 ```js run
 let script = document.createElement('script');
@@ -145,7 +146,7 @@ That is:
 - They don't wait for anything, nothing waits for them.
 - The script that loads first -- runs first ("load-first" order).
 
-We can change the load-first order into the document order by explicitly setting `async` to `false`:
+We can change the load-first order into the document order (just like regular scripts) by explicitly setting `async` property to `false`:
 
 ```js run
 let script = document.createElement('script');
@@ -191,7 +192,4 @@ Please note that if you're using `defer`, then the page is visible before the sc
 
 So, buttons should be disabled by CSS or by other means, to let the user
 
-In practice, `defer` is used for scripts that need DOM and/or their relative execution order is important.
-
-
-So `async` is used for independent scripts, like counters or ads, that don't need to access page content. And their relative execution order does not matter.
+In practice, `defer` is used for scripts that need the whole DOM and/or their relative execution order is important. And  `async` is used for independent scripts, like counters or ads. And their relative execution order does not matter.