Merge branch 'master' into patch-2

1-js/01-getting-started/2-code-editors/article.md

@@ -2,23 +2,22 @@
 
 A code editor is the place where programmers spend most of their time.
 
-There are two archetypes: IDE and lightweight editors. Many people feel comfortable choosing one tool of each type.
+There are two main types of code editors: IDEs and lightweight editors. Many people use one tool of each type.
 
 ## IDE
 
-The term [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) means a powerful editor with many features that usually operates on a "whole project." As the name suggests, that's not just an editor, but a full-scale "development environment."
+The term [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) refers to a powerful editor with many features that usually operates on a "whole project." As the name suggests, it's not just an editor, but a full-scale "development environment."
 
-An IDE loads the project (can be many files), allows navigation between files, provides autocompletion based on the whole project (not just the open file), integrates with a version management system (like [git](https://git-scm.com/)), a testing environment and other "project-level" stuff.
+An IDE loads the project (which can be many files), allows navigation between files, provides autocompletion based on the whole project (not just the open file), and integrates with a version management system (like [git](https://git-scm.com/)), a testing environment, and other "project-level" stuff.
 
-If you haven't considered selecting an IDE yet, look at the following variants:
+If you haven't selected an IDE yet, consider the following options:
 
-- [WebStorm](http://www.jetbrains.com/webstorm/) for frontend development and other editors of the same company if you need additional languages (paid).
-- [Visual Studio Code](https://code.visualstudio.com/) (free).
+- [WebStorm](http://www.jetbrains.com/webstorm/) for frontend development. The same company offers other editors for other languages (paid).
 - [Netbeans](http://netbeans.org/) (paid).
 
-All of the IDEs are cross-platform.
+All of these IDEs are cross-platform.
 
-For Windows, there's also a "Visual Studio" editor, don't confuse it with "Visual Studio Code." "Visual Studio" is a paid and mighty Windows-only editor, well-suited for the .NET platform. A free version of it is called ([Visual Studio Community](https://www.visualstudio.com/vs/community/).
+For Windows, there's also "Visual Studio", not to be confused with "Visual Studio Code." "Visual Studio" is a paid and mighty Windows-only editor, well-suited for the .NET platform. A free version of it is called [Visual Studio Community](https://www.visualstudio.com/vs/community/).
 
 Many IDEs are paid but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose the best one for you.
 
@@ -34,7 +33,7 @@ In practice, lightweight editors may have a lot of plugins including directory-l
 
 The following options deserve your attention:
 
-- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free).
+- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free) also has many IDE-like features.
 - [Atom](https://atom.io/) (cross-platform, free).
 - [Sublime Text](http://www.sublimetext.com) (cross-platform, shareware).
 - [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
@@ -46,7 +45,7 @@ The personal preference of the author is to have both an IDE for projects and a
 
 I'm using:
 
-- [WebStorm](http://www.jetbrains.com/webstorm/) for JS, and if there is one more language in the project, then I switch to one of the other JetBrains offerings listed above.
+- As an IDE for JS -- [WebStorm](http://www.jetbrains.com/webstorm/) (I switch to one of the other JetBrains offerings when using other languages)
 - As a lightweight editor -- [Sublime Text](http://www.sublimetext.com) or [Atom](https://atom.io/).
 
 ## Let's not argue
@@ -55,4 +54,4 @@ The editors in the lists above are those that either I or my friends whom I cons
 
 There are other great editors in our big world. Please choose the one you like the most.
 
-The choice of an editor, like any other tool, is individual and depends on your projects, habits, personal preferences.
+The choice of an editor, like any other tool, is individual and depends on your projects, habits, and personal preferences.

1-js/02-first-steps/14-function-basics/article.md

@@ -206,6 +206,7 @@ function showMessage(from, text = anotherFunction()) {
 
 ```smart header="Evaluation of default parameters"
 In JavaScript, a default parameter is evaluated every time the function is called without the respective parameter. In the example above, `anotherFunction()` is called every time `someMessage()` is called without the `text` parameter. This is in contrast to some other languages like Python, where any default parameters are evaluated only once during the initial interpretation.
+
 ```
 
 

1-js/03-code-quality/01-debugging-chrome/article.md

@@ -56,7 +56,7 @@ A *breakpoint* is a point of code where the debugger will automatically pause th
 
 While the code is paused, we can examine current variables, execute commands in the console etc. In other words, we can debug it.
 
-We can always find a list of breakpoints in the right pane. That's useful when we have many breakpoints in various files. It allows to:
+We can always find a list of breakpoints in the right pane. That's useful when we have many breakpoints in various files. It allows us to:
 - Quickly jump to the breakpoint in the code (by clicking on it in the right pane).
 - Temporarily disable the breakpoint by unchecking it.
 - Remove the breakpoint by right-clicking and selecting Remove.

1-js/03-code-quality/05-testing-mocha/article.md

@@ -233,7 +233,7 @@ Grouping is done with a nested `describe`:
 describe("pow", function() {
 
 *!*
-  describe("raises x to power n", function() {
+  describe("raises x to power 3", function() {
 */!*
 
     function makeTest(x) {

1-js/03-code-quality/05-testing-mocha/pow-4.view/test.js

@@ -1,6 +1,6 @@
 describe("pow", function() {
 
-  describe("raises x to power n", function() {
+  describe("raises x to power 3", function() {
 
     function makeTest(x) {
       let expected = x * x * x;

1-js/03-code-quality/05-testing-mocha/pow-full.view/test.js

@@ -1,6 +1,6 @@
 describe("pow", function() {
 
-  describe("raises x to power n", function() {
+  describe("raises x to power 3", function() {
 
     function makeTest(x) {
       let expected = x * x * x;

1-js/03-code-quality/05-testing-mocha/pow-nan.view/test.js

@@ -1,6 +1,6 @@
 describe("pow", function() {
 
-  describe("raises x to power n", function() {
+  describe("raises x to power 3", function() {
 
     function makeTest(x) {
       let expected = x * x * x;

1-js/05-data-types/03-string/4-extract-currency/solution.md

@@ -1 +1,5 @@
-
+```js run
+    function extractCurrencyValue(str) {
+      return +str.slice(1);
+    }
+```

1-js/05-data-types/05-array-methods/8-sort-objects/solution.md

@@ -1,6 +1,6 @@
 ```js run no-beautify
 function sortByName(arr) {
-  arr.sort((a, b) => a.name > b.name);
+  arr.sort((a, b) => b.name > a.name ? 1 : -1);
 }
 
 let john = { name: "John", age: 25 };

1-js/05-data-types/08-keys-values-entries/article.md

@@ -45,7 +45,7 @@ let user = {
 };
 ```
 
-- `Object.keys(user) = [name, age]`
+- `Object.keys(user) = ["name", "age"]`
 - `Object.values(user) = ["John", 30]`
 - `Object.entries(user) = [ ["name","John"], ["age",30] ]`
 

1-js/06-advanced-functions/03-closure/article.md

@@ -475,7 +475,7 @@ They look like this:
 
 Here a Function Expression is created and immediately called. So the code executes right away and has its own private variables.
 
-The Function Expression is wrapped with brackets `(function {...})`, because when JavaScript meets `"function"` in the main code flow, it understands it as the start of a Function Declaration. But a Function Declaration must have a name, so there will be an error:
+The Function Expression is wrapped with parenthesis `(function {...})`, because when JavaScript meets `"function"` in the main code flow, it understands it as the start of a Function Declaration. But a Function Declaration must have a name, so there will be an error:
 
 ```js run
 // Error: Unexpected token (
@@ -497,7 +497,7 @@ function go() {
 }(); // <-- can't call Function Declaration immediately
 ```
 
-So, round brackets are needed to show JavaScript that the function is created in the context of another expression, and hence it's a Function Expression. It needs no name and can be called immediately.
+So, parenthesis are needed to show JavaScript that the function is created in the context of another expression, and hence it's a Function Expression. It needs no name and can be called immediately.
 
 There are other ways to tell JavaScript that we mean Function Expression:
 

1-js/07-object-oriented-programming/03-prototype-inheritance/article.md

@@ -112,7 +112,7 @@ let rabbit = {
 let longEar = {
   earLength: 10,
   __proto__: rabbit
-}
+};
 
 // walk is taken from the prototype chain
 longEar.walk(); // Animal walk
@@ -146,7 +146,7 @@ let animal = {
 
 let rabbit = {
   __proto__: animal
-}
+};
 
 *!*
 rabbit.walk = function() {

1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/task.md

@@ -2,7 +2,7 @@ importance: 5
 
 ---
 
-# The difference beteeen calls
+# The difference between calls
 
 Let's create a new `rabbit` object:
 

1-js/08-error-handling/2-custom-errors/article.md

@@ -185,7 +185,7 @@ try {
 
 The new class `PropertyRequiredError` is easy to use: we only need to pass the property name: `new PropertyRequiredError(property)`. The human-readable `message` is generated by the constructor.
 
-Please note that `this.name` in `PropertyRequiredError` constructor is again assigned manually. That may become a bit tedius -- to assign `this.name = <class name>` when creating each custom error. But there's a way out. We can make our own "basic error" class that removes this burden from our shoulders by using `this.constructor.name` for `this.name` in the constructor. And then inherit from it.
+Please note that `this.name` in `PropertyRequiredError` constructor is again assigned manually. That may become a bit tedious -- to assign `this.name = <class name>` when creating each custom error. But there's a way out. We can make our own "basic error" class that removes this burden from our shoulders by using `this.constructor.name` for `this.name` in the constructor. And then inherit from it.
 
 Let's call it `MyError`.
 

2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md

@@ -33,7 +33,7 @@ We have `event.clientX/clientY` -- window-relative coordinates of the click.
 To get field-relative `left` coordinate of the click, we can substract the field left edge and the border width:
 
 ```js
-let left = event.clientX - fieldInnerCoords.left - field.clientLeft;
+let left = event.clientX - fieldCoords.left - field.clientLeft;
 ```
 
 Normally, `ball.style.position.left` means the "left edge of the element" (the ball). So if we assign that `left`, then the ball edge would be under the mouse cursor.
@@ -43,7 +43,7 @@ We need to move the ball half-width left and half-height up to make it center.
 So the final `left` would be:
 
 ```js
-let left = event.clientX - fieldInnerCoords.left - field.clientLeft - ball.offsetWidth/2;
+let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2;
 ```
 
 The vertical coordinate is calculated using the same logic.

2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md

@@ -2,9 +2,9 @@
 # HTML/CSS
 First let's create HTML/CSS.
 
-A menu is a standalone graphical component on the page, so its better to put it into a single DOM element.
+A menu is a standalone graphical component on the page, so it's better to put it into a single DOM element.
 
-A list of menu items can be layed out as a list `ul/li`.
+A list of menu items can be laid out as a list `ul/li`.
 
 Here's the example structure:
 

2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md

@@ -2,7 +2,7 @@ importance: 5
 
 ---
 
-# Create a menu sliding menu
+# Create a sliding menu
 
 Create a menu that opens/collapses on click:
 

2-ui/3-event-details/11-onload-onerror/1-load-img-callback/task.md

@@ -4,7 +4,7 @@ importance: 4
 
 # Load images with a callback
 
-Normally, images are loaded when they are created. So i when we add `<img>` to the page, the user does not see the picture immediately. The browser needs to load it first.
+Normally, images are loaded when they are created. So when we add `<img>` to the page, the user does not see the picture immediately. The browser needs to load it first.
 
 To show an image immediately, we can create it "in advance", like this:
 

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md

@@ -96,7 +96,7 @@ Try entering the blue element and then moving the mouse on the red one -- and wa
 
 So, for a handler that does not take `target` into account, it looks like we left the parent in `mouseout` in `(2)` and returned back to it by `mouseover` in `(3)`.
 
-If we perform some actions on entering/leaving the element, then we'll get a lot of extra "false" runs. For simple stuff may be unnoticeable. For complex things that may bring unwanted side-effects.
+If we perform some actions on entering/leaving the element, then we'll get a lot of extra "false" runs. For simple stuff that may be unnoticeable. For complex things that may bring unwanted side-effects.
 
 We can fix it by using `mouseenter/mouseleave` events instead.
 

2-ui/3-event-details/4-mouse-drag-and-drop/article.md

@@ -15,7 +15,7 @@ So here we'll see how to implement Drag'n'Drop using mouse events. Not that hard
 The basic Drag'n'Drop algorithm looks like this:
 
 1. Catch `mousedown` on a draggable element.
-2. Prepare the element to moving (maybe create a copy of it or whatever).
+2. Prepare the element for moving (maybe create a copy of it or whatever).
 3. Then on `mousemove` move it by changing `left/top` and `position:absolute`.
 4. On `mouseup` (button release) -- perform all actions related to a finished Drag'n'Drop.
 
@@ -58,7 +58,7 @@ ball.onmousedown = function(event) { // (1) start the process
 };
 ```
 
-If we run the code, we can notice something strange. On the beginning of the drag'n'drop, the ball "forks": we start to dragging it's "clone".
+If we run the code, we can notice something strange. On the beginning of the drag'n'drop, the ball "forks": we start dragging its "clone".
 
 ```online
 Here's an example in action:
@@ -178,7 +178,7 @@ In action (inside `<iframe>`):
 [iframe src="ball3" height=230]
 ```
 
-The difference is especially noticeable if we drag the ball by it's right-bottom corner. In the previous example the ball "jumps" under the pointer. Now it fluently follows the cursor from the current position.
+The difference is especially noticeable if we drag the ball by its right-bottom corner. In the previous example the ball "jumps" under the pointer. Now it fluently follows the cursor from the current position.
 
 ## Detecting droppables
 

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

@@ -49,7 +49,7 @@ Your email please: <input type="email" id="input">
 </script>
 ```
 
-Modern HTML allows to do many validations using input attributes: `required`, `pattern` and so on. And sometimes they are just what we need. JavaScript can be used when we want more flexibility. Also we could automatically send the changed value on the server if it's correct.
+Modern HTML allows to do many validations using input attributes: `required`, `pattern` and so on. And sometimes they are just what we need. JavaScript can be used when we want more flexibility. Also we could automatically send the changed value to the server if it's correct.
 
 
 ## Methods focus/blur
@@ -100,7 +100,7 @@ One of them is when the visitor clicks somewhere else. But also JavaScript itsel
 
 These features sometimes cause `focus/blur` handlers to misbehave -- to trigger when they are not needed.
 
-The best recipe is to be careful when using these events. If we want to track user-initiated focus-loss, then we should evade causing it by ourselves.
+The best recipe is to be careful when using these events. If we want to track user-initiated focus-loss, then we should avoid causing it ourselves.
 ```
 ## Allow focusing on any element: tabindex
 

2-ui/4-forms-controls/3-events-change-input/article.md

@@ -6,7 +6,7 @@ Let's discuss various events that accompany data updates.
 
 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.
+For text inputs that means that the event occurs when it loses focus.
 
 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:
 
@@ -62,7 +62,7 @@ For instance, the code below prevents all such events and shows what we are tryi
 </script>
 ```
 
-Technically, we can copy/paste everything. For instance, we can copy and file in the OS file manager, and paste it.
+Technically, we can copy/paste everything. For instance, we can copy a 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.