Merge branch 'master' into patch-1

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).
+- [WebStorm](http://www.jetbrains.com/webstorm/) for frontend development. The same company offers other editors for other languages (paid).
-- [Visual Studio Code](https://code.visualstudio.com/) (free).
 - [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

@@ -205,7 +205,9 @@ 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 `showMessage()` 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/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/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md

@@ -7,7 +7,7 @@ importance: 3
 Make all external links orange by altering their `style` property.
 
 A link is external if:
-- It's `href` has `://` in it
+- Its `href` has `://` in it
 - But doesn't start with `http://internal.com`.
 
 Example:

2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js

@@ -1,3 +1,5 @@
+let isDragging = false;
+
 document.addEventListener('mousedown', function(event) {
 
   let dragElement = event.target.closest('.draggable');
@@ -5,13 +7,16 @@ document.addEventListener('mousedown', function(event) {
   if (!dragElement) return;
 
   event.preventDefault();
+  
+  dragElement.ondragstart = function() {
+      return false;
+  };
+
   let coords, shiftX, shiftY;
 
-  startDrag(event.clientX, event.clientY);
+  startDrag(dragElement, event.clientX, event.clientY);
 
-  document.addEventListener('mousemove', onMouseMove);
+  function onMouseUp(event) {
-
-  dragElement.onmouseup = function() {
     finishDrag();
   };
   
@@ -22,25 +27,37 @@ document.addEventListener('mousedown', function(event) {
   // on drag start:
   //   remember the initial shift
   //   move the element position:fixed and a direct child of body
-  function startDrag(clientX, clientY) {
+  function startDrag(element, clientX, clientY) {
+    if(isDragging) {
+      return;
+    }
     
-    shiftX = clientX - dragElement.getBoundingClientRect().left;
+    isDragging = true;
-    shiftY = clientY - dragElement.getBoundingClientRect().top;
     
-    dragElement.style.position = 'fixed';
+    document.addEventListener('mousemove', onMouseMove);
+    element.addEventListener('mouseup', onMouseUp);
 
-    document.body.append(dragElement);
+    shiftX = clientX - element.getBoundingClientRect().left;
+    shiftY = clientY - element.getBoundingClientRect().top;
+
+    element.style.position = 'fixed';
 
     moveAt(clientX, clientY);
   };
 
   // switch to absolute coordinates at the end, to fix the element in the document
   function finishDrag() {
+    if(!isDragging) {
+      return;
+    }
+    
+    isDragging = false;
+
     dragElement.style.top = parseInt(dragElement.style.top) + pageYOffset + 'px';
     dragElement.style.position = 'absolute';
 
     document.removeEventListener('mousemove', onMouseMove);
-    dragElement.onmouseup = null;
+    dragElement.removeEventListener('mouseup', onMouseUp);
   }
 
   function moveAt(clientX, clientY) {