From 42f0985b286e051573e78053bd365fa37cabacd2 Mon Sep 17 00:00:00 2001 From: caspringer Date: Wed, 5 Dec 2018 08:47:29 -0500 Subject: [PATCH 01/26] Fix comma usage --- 1-js/05-data-types/10-date/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/10-date/article.md b/1-js/05-data-types/10-date/article.md index 00390812..7a87dfd0 100644 --- a/1-js/05-data-types/10-date/article.md +++ b/1-js/05-data-types/10-date/article.md @@ -2,7 +2,7 @@ Let's meet a new built-in object: [Date](mdn:js/Date). It stores the date, time and provides methods for date/time management. -For instance, we can use it to store creation/modification times, or to measure time, or just to print out the current date. +For instance, we can use it to store creation/modification times, to measure time, or just to print out the current date. ## Creation From 337c6deb7a45c4d49b2278d0f97e1e34dc2b4cda Mon Sep 17 00:00:00 2001 From: caspringer Date: Wed, 5 Dec 2018 08:49:44 -0500 Subject: [PATCH 02/26] Fix comma usage --- 1-js/05-data-types/10-date/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/10-date/article.md b/1-js/05-data-types/10-date/article.md index 00390812..13e9dcd0 100644 --- a/1-js/05-data-types/10-date/article.md +++ b/1-js/05-data-types/10-date/article.md @@ -108,7 +108,7 @@ alert( date.getHours() ); alert( date.getUTCHours() ); ``` -Besides the given methods, there are two special ones, that do not have a UTC-variant: +Besides the given methods, there are two special ones that do not have a UTC-variant: [getTime()](mdn:js/Date/getTime) : Returns the timestamp for the date -- a number of milliseconds passed from the January 1st of 1970 UTC+0. From cd7dcd6478796aaea620f2f5a7a5769c361c190e Mon Sep 17 00:00:00 2001 From: juhyun Date: Wed, 5 Dec 2018 23:03:18 +0900 Subject: [PATCH 03/26] Update article.md How about adding semicolon like this? Yes, omitting the semicolon does not cause a problem. But in this case, adding the semicolon is more consistent and obvious. --- 1-js/05-data-types/05-array-methods/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/05-array-methods/article.md b/1-js/05-data-types/05-array-methods/article.md index a378bd0f..86dc520d 100644 --- a/1-js/05-data-types/05-array-methods/article.md +++ b/1-js/05-data-types/05-array-methods/article.md @@ -329,7 +329,7 @@ It calls the function for each element of the array and returns the array of res For instance, here we transform each element into its length: ```js run -let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length) +let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length); alert(lengths); // 5,7,6 ``` From a22ab40e0380c97dec30c0bee0c091804856b920 Mon Sep 17 00:00:00 2001 From: caspringer Date: Wed, 5 Dec 2018 09:16:07 -0500 Subject: [PATCH 04/26] Fix incorrect grammer --- .../02-rest-parameters-spread-operator/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/02-rest-parameters-spread-operator/article.md b/1-js/06-advanced-functions/02-rest-parameters-spread-operator/article.md index 409c6dc1..a98d8edd 100644 --- a/1-js/06-advanced-functions/02-rest-parameters-spread-operator/article.md +++ b/1-js/06-advanced-functions/02-rest-parameters-spread-operator/article.md @@ -62,7 +62,7 @@ showName("Julius", "Caesar", "Consul", "Imperator"); ``` ````warn header="The rest parameters must be at the end" -The rest parameters gather all remaining arguments, so the following has no sense: +The rest parameters gather all remaining arguments, so the following does not make sense and causes an error: ```js function f(arg1, ...rest, arg2) { // arg2 after ...rest ?! From 9c99eec23a041b277d50a6f7a13d615c65a9b35a Mon Sep 17 00:00:00 2001 From: imidom Date: Wed, 5 Dec 2018 16:33:52 -0500 Subject: [PATCH 05/26] Update syntax / grammar of 3-devtools --- 1-js/01-getting-started/3-devtools/article.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/1-js/01-getting-started/3-devtools/article.md b/1-js/01-getting-started/3-devtools/article.md index 7f5b357f..1ef4744a 100644 --- a/1-js/01-getting-started/3-devtools/article.md +++ b/1-js/01-getting-started/3-devtools/article.md @@ -1,14 +1,14 @@ # Developer console -Code is prone to errors. You are quite likely to make errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)). +Code is prone to errors. You will quite likely make errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)). -But in the browser, a user doesn't see the errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it. +But in the browser, users doesn't see errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it. To see errors and get a lot of other useful information about scripts, "developer tools" have been embedded in browsers. -Most often developers lean towards Chrome or Firefox for development because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catch-up" to Chrome or Firefox. So most people have a "favorite" browser and switch to others if a problem is browser-specific. +Most developers lean towards Chrome or Firefox for development because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catch-up" to Chrome or Firefox. So most developers have a "favorite" browser and switch to others if a problem is browser-specific. -Developer tools are potent; there are many features. To start, we'll learn how to open them, look at errors and run JavaScript commands. +Developer tools are potent; they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands. ## Google Chrome @@ -31,20 +31,20 @@ The exact look of developer tools depends on your version of Chrome. It changes Below the error message, there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands. Press `key:Enter` to run them (`key:Shift+Enter` to input multi-line commands). -Now we can see errors, and that's enough for a start. We'll be back to developer tools later and cover debugging more in-depth in the chapter . +Now we can see errors, and that's enough for a start. We'll come back to developer tools later and cover debugging more in-depth in the chapter . ## Firefox, Edge, and others Most other browsers use `key:F12` to open developer tools. -The look & feel of them is quite similar. Once you know how to use one of those tools (you can start with Chrome), you can easily switch to another. +The look & feel of them is quite similar. Once you know how to use one of these tools (you can start with Chrome), you can easily switch to another. ## Safari Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first. -Open Preferences and go to "Advanced" pane. There's a checkbox at the bottom: +Open Preferences and go to the "Advanced" pane. There's a checkbox at the bottom: ![safari](safari.png) @@ -52,7 +52,7 @@ Now `key:Cmd+Opt+C` can toggle the console. Also, note that the new top menu ite ## Summary -- Developer tools allow us to see errors, run commands, examine variables and much more. -- They can be opened with `key:F12` for most browsers under Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first). +- Developer tools allow us to see errors, run commands, examine variables, and much more. +- They can be opened with `key:F12` for most browsers on Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first). Now we have the environment ready. In the next section, we'll get down to JavaScript. From b9b944dfe6bcd78b66fa764e2541c4d45efd0571 Mon Sep 17 00:00:00 2001 From: simmayor Date: Thu, 6 Dec 2018 14:47:40 -0500 Subject: [PATCH 06/26] Update task.md --- .../06-function-object/2-counter-inc-dec/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/task.md b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/task.md index e34bb67b..0177c8f6 100644 --- a/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/task.md +++ b/1-js/06-advanced-functions/06-function-object/2-counter-inc-dec/task.md @@ -8,7 +8,7 @@ Modify the code of `makeCounter()` so that the counter can also decrease and set - `counter()` should return the next number (as before). - `counter.set(value)` should set the `count` to `value`. -- `counter.decrease(value)` should decrease the `count` by 1. +- `counter.decrease()` should decrease the `count` by 1. See the sandbox code for the complete usage example. From 5dddf7de89a52c4f927d7140f49392b80ff40786 Mon Sep 17 00:00:00 2001 From: user Date: Thu, 6 Dec 2018 18:06:29 -0500 Subject: [PATCH 07/26] Grammar --- .../09-call-apply-decorators/01-spy-decorator/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md index 9ebb7abf..a3843107 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/01-spy-decorator/task.md @@ -27,4 +27,4 @@ for (let args of work.calls) { } ``` -P.S. That decorator is sometimes useful for unit-testing, it's advanced form is `sinon.spy` in [Sinon.JS](http://sinonjs.org/) library. +P.S. That decorator is sometimes useful for unit-testing. Its advanced form is `sinon.spy` in [Sinon.JS](http://sinonjs.org/) library. From efbf871dafdc79a89e81c3811a0ed6b4e0c29a0e Mon Sep 17 00:00:00 2001 From: simmayor Date: Sat, 8 Dec 2018 20:44:22 -0500 Subject: [PATCH 08/26] Changed 'fieldInnerCoords' to 'fieldCoords' to match image and text --- .../04-move-ball-field/solution.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md index 8312f039..bda48e2b 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md +++ b/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. From efafc9121b171246cf5ca90e3b6e4e65e412abea Mon Sep 17 00:00:00 2001 From: simmayor Date: Sat, 8 Dec 2018 20:47:01 -0500 Subject: [PATCH 09/26] Removed duplicate word --- .../01-introduction-browser-events/05-sliding-menu/task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md index 05af13cc..34c31371 100644 --- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/task.md +++ b/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: From 66ef6878b71c9a6e33d79e598301ecaaa6a9a6a2 Mon Sep 17 00:00:00 2001 From: simmayor Date: Sat, 8 Dec 2018 20:56:28 -0500 Subject: [PATCH 10/26] Fixed spelling and grammar --- .../05-sliding-menu/solution.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md b/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md index f4c10594..eed09623 100644 --- a/2-ui/2-events/01-introduction-browser-events/05-sliding-menu/solution.md +++ b/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: From d0d795ecc2630976a35541dce15c63ae826dfa4e Mon Sep 17 00:00:00 2001 From: Satwik Gupta Date: Mon, 10 Dec 2018 17:10:37 +0530 Subject: [PATCH 11/26] array of string --- 1-js/05-data-types/08-keys-values-entries/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/05-data-types/08-keys-values-entries/article.md b/1-js/05-data-types/08-keys-values-entries/article.md index 50ba91ce..66ca3ca9 100644 --- a/1-js/05-data-types/08-keys-values-entries/article.md +++ b/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] ]` From 46081def56b48f9956911e5844896637d9d081cc Mon Sep 17 00:00:00 2001 From: Mau Di Bert Date: Mon, 10 Dec 2018 10:19:16 -0300 Subject: [PATCH 12/26] Update article.md --- 1-js/03-code-quality/05-testing-mocha/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/03-code-quality/05-testing-mocha/article.md b/1-js/03-code-quality/05-testing-mocha/article.md index 02287077..a51ec705 100644 --- a/1-js/03-code-quality/05-testing-mocha/article.md +++ b/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) { From b2e6ab26058cc4de95defc1e95be7d3b0fe8f0e5 Mon Sep 17 00:00:00 2001 From: Mau Di Bert Date: Mon, 10 Dec 2018 10:24:20 -0300 Subject: [PATCH 13/26] Update test.js --- 1-js/03-code-quality/05-testing-mocha/pow-full.view/test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/03-code-quality/05-testing-mocha/pow-full.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-full.view/test.js index a5a34597..75ff5e99 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-full.view/test.js +++ b/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; From 7bc8404474b47c955a66d820061dc8867ebec00d Mon Sep 17 00:00:00 2001 From: Mau Di Bert Date: Mon, 10 Dec 2018 10:26:29 -0300 Subject: [PATCH 14/26] Update test.js --- 1-js/03-code-quality/05-testing-mocha/pow-4.view/test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/03-code-quality/05-testing-mocha/pow-4.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-4.view/test.js index 10a032d0..e5ce2ce4 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-4.view/test.js +++ b/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; From 8311b44581c6a4f1a8073fd997e8c3b15d35691d Mon Sep 17 00:00:00 2001 From: Mau Di Bert Date: Mon, 10 Dec 2018 10:27:48 -0300 Subject: [PATCH 15/26] Update test.js --- 1-js/03-code-quality/05-testing-mocha/pow-nan.view/test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/03-code-quality/05-testing-mocha/pow-nan.view/test.js b/1-js/03-code-quality/05-testing-mocha/pow-nan.view/test.js index a5a34597..75ff5e99 100644 --- a/1-js/03-code-quality/05-testing-mocha/pow-nan.view/test.js +++ b/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; From 7d4667a6204150a4fb169cc3c9733b93544d144a Mon Sep 17 00:00:00 2001 From: Bianca Power <30207144+biancapower@users.noreply.github.com> Date: Tue, 11 Dec 2018 08:36:58 +1100 Subject: [PATCH 16/26] Fix grammatical typo --- 1-js/03-code-quality/01-debugging-chrome/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index d09493a2..88592f05 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/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. From 72ef359fc02d6e2cccc0e0753a4f0db145df5fa5 Mon Sep 17 00:00:00 2001 From: simmayor Date: Tue, 11 Dec 2018 17:27:39 -0500 Subject: [PATCH 17/26] Grammar --- .../article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md index 25bd3856..30627f3c 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md +++ b/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. From a9756766a02800365dd005e4013ead005aa44a2c Mon Sep 17 00:00:00 2001 From: simmayor Date: Tue, 11 Dec 2018 22:02:30 -0500 Subject: [PATCH 18/26] Grammar --- 2-ui/3-event-details/4-mouse-drag-and-drop/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md index e8126f5b..6390b392 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md +++ b/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 `