diff --git a/1-js/01-getting-started/2-code-editors/article.md b/1-js/01-getting-started/2-code-editors/article.md index 940f506e..71c63158 100644 --- a/1-js/01-getting-started/2-code-editors/article.md +++ b/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. diff --git a/1-js/02-first-steps/14-function-basics/article.md b/1-js/02-first-steps/14-function-basics/article.md index 46949c33..5328a934 100644 --- a/1-js/02-first-steps/14-function-basics/article.md +++ b/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 everytime `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. + +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. + ``` diff --git a/1-js/07-object-oriented-programming/03-prototype-inheritance/article.md b/1-js/07-object-oriented-programming/03-prototype-inheritance/article.md index fa61cbc8..eac5ec81 100644 --- a/1-js/07-object-oriented-programming/03-prototype-inheritance/article.md +++ b/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() { diff --git a/1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/task.md b/1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/task.md index 92653bd8..09bb7f1e 100644 --- a/1-js/07-object-oriented-programming/06-prototype-methods/3-compare-calls/task.md +++ b/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: diff --git a/1-js/08-error-handling/2-custom-errors/article.md b/1-js/08-error-handling/2-custom-errors/article.md index d7d61166..35d690fe 100644 --- a/1-js/08-error-handling/2-custom-errors/article.md +++ b/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 = ` 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 = ` 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`. diff --git a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md b/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md index f7db9a04..b0a8ab7b 100644 --- a/2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md +++ b/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: diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js index 6c3daa5b..1c1443a7 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/soccer.js +++ b/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,16 +7,19 @@ document.addEventListener('mousedown', function(event) { if (!dragElement) return; event.preventDefault(); - let coords, shiftX, shiftY; - - startDrag(event.clientX, event.clientY); - - document.addEventListener('mousemove', onMouseMove); - - dragElement.onmouseup = function() { - finishDrag(); + + dragElement.ondragstart = function() { + return false; }; + let coords, shiftX, shiftY; + + startDrag(dragElement, event.clientX, event.clientY); + + function onMouseUp(event) { + finishDrag(); + }; + function onMouseMove(event) { moveAt(event.clientX, event.clientY); } @@ -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; + } + + isDragging = true; + + document.addEventListener('mousemove', onMouseMove); + element.addEventListener('mouseup', onMouseUp); - shiftX = clientX - dragElement.getBoundingClientRect().left; - shiftY = clientY - dragElement.getBoundingClientRect().top; + shiftX = clientX - element.getBoundingClientRect().left; + shiftY = clientY - element.getBoundingClientRect().top; - dragElement.style.position = 'fixed'; - - document.body.append(dragElement); + 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) { @@ -96,4 +113,4 @@ document.addEventListener('mousedown', function(event) { dragElement.style.top = newY + 'px'; } -}); +}); \ No newline at end of file