From 0bc2ef70ceee7834af9624b6a93f58ae9c8d5e87 Mon Sep 17 00:00:00 2001 From: Isabelle Viktoria Maciohsek Date: Sun, 30 Jan 2022 20:40:47 +0200 Subject: [PATCH] Update formatting --- blog_posts/async-javascript-cheatsheet.md | 2 +- blog_posts/javascript-arrow-function-event-listeners.md | 6 +++--- blog_posts/javascript-boolean-function.md | 4 ++-- .../javascript-event-bubbling-capturing-delegation.md | 8 ++++---- blog_posts/javascript-iterable-to-array.md | 2 +- blog_posts/javascript-modify-url-without-reload.md | 2 +- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/blog_posts/async-javascript-cheatsheet.md b/blog_posts/async-javascript-cheatsheet.md index 514a8c39f..58450ff28 100644 --- a/blog_posts/async-javascript-cheatsheet.md +++ b/blog_posts/async-javascript-cheatsheet.md @@ -17,7 +17,7 @@ lastUpdated: 2021-06-12T19:30:41+03:00 ### Creating promises -- The function passed to a `new Promise` will execute synchronously. +- The function passed to the `Promise` constructor will execute synchronously. - Use `resolve()` or `reject()` to create promises from values. - `Promise.resolve(val)` will fulfill the promise with `val`. - `Promise.reject(err)` will reject the promise with `err`. diff --git a/blog_posts/javascript-arrow-function-event-listeners.md b/blog_posts/javascript-arrow-function-event-listeners.md index 99593fdd9..a12f4cee6 100644 --- a/blog_posts/javascript-arrow-function-event-listeners.md +++ b/blog_posts/javascript-arrow-function-event-listeners.md @@ -32,19 +32,19 @@ In the example above, we use `NodeList.prototype.forEach()` to iterate over matc ### Arrow functions as callbacks -As we have already explained, arrow functions do not have their own bindings for `this`. So what happens if we convert the previous code snippet's callback to an arrow function? Its `this` context refers to the global one, which in this case is the `window` object. +As we have already explained, arrow functions do not have their own bindings for `this`. So what happens if we convert the previous code snippet's callback to an arrow function? Its `this` context refers to the global one, which in this case is the `Window` object. ```js const toggleElements = document.querySelectorAll('.toggle'); toggleElements.forEach(el => { el.addEventListener('click', () => { - this.classList.toggle('active'); // `this` refers to `window` + this.classList.toggle('active'); // `this` refers to `Window` // Error: Cannot read property 'toggle' of undefined }); }); ``` -This code will fire the event listener and execute the callback anytime the matching element is clicked. It will, however, throw an error, due to the `window` object not having a `classList` property. Oftentimes, the code could even fail silently. An example would be a condition that always evaluates to `false` for `window`, but could evaluate to `true` for a given element. Issues like that result in many headaches and wasted hours until you can uncover and fix them. +This code will fire the event listener and execute the callback anytime the matching element is clicked. It will, however, throw an error, due to the `Window` object not having a `classList` property. Oftentimes, the code could even fail silently. An example would be a condition that always evaluates to `false` for `Window`, but could evaluate to `true` for a given element. Issues like that result in many headaches and wasted hours until you can uncover and fix them. To deal with this, one could simply use the first argument of the callback function and `Event.target` or `Event.currentTarget` depending on their needs: diff --git a/blog_posts/javascript-boolean-function.md b/blog_posts/javascript-boolean-function.md index 66b527887..89d198ce4 100644 --- a/blog_posts/javascript-boolean-function.md +++ b/blog_posts/javascript-boolean-function.md @@ -41,7 +41,7 @@ const nonEmptyValues = values.filter(Boolean); ### Handle Boolean objects with care -While the `Boolean()` function is pretty useful, you might run into some issues with the `Boolean` object and the `new Boolean()` constructor. The `Boolean` object is an object wrapper for a boolean value, but the tricky part is that, as an object, it's always truthy even if the contained value is `false`! +While the `Boolean()` function is pretty useful, you might run into some issues with the `Boolean` object and the `Boolean` constructor. The `Boolean` object is an object wrapper for a boolean value, but the tricky part is that, as an object, it's always truthy even if the contained value is `false`! ```js let x = new Boolean(false); @@ -51,4 +51,4 @@ if (x) { } ``` -For example, the above code will consider `x` truthy, even if it clearly contains `false` as its value. This might some confusing, but you can easily avoid it if you generally avoid using `Boolean` objects and the `new Boolean()` constructor, unless you are entirely certain that you need to use it for some reason. I cannot find any scenarios where I would need to use this, to be honest, so it might not be all that common to begin with. +For example, the above code will consider `x` truthy, even if it clearly contains `false` as its value. This might some confusing, but you can easily avoid it if you generally avoid using `Boolean` objects and the `Boolean` constructor, unless you are entirely certain that you need to use it for some reason. I cannot find any scenarios where I would need to use this, to be honest, so it might not be all that common to begin with. diff --git a/blog_posts/javascript-event-bubbling-capturing-delegation.md b/blog_posts/javascript-event-bubbling-capturing-delegation.md index c2dc0df2b..08afabcf4 100644 --- a/blog_posts/javascript-event-bubbling-capturing-delegation.md +++ b/blog_posts/javascript-event-bubbling-capturing-delegation.md @@ -43,7 +43,7 @@ ancestors.forEach(a => { }); ``` -If we add an event listener to each element in the tree, as shown above, we would see a listener fired by the `button` first, then each one of the others firing from the nearest ancestor all the way up to `window`. +If we add an event listener to each element in the tree, as shown above, we would see a listener fired by the `button` first, then each one of the others firing from the nearest ancestor all the way up to `Window`. ### Event capturing @@ -66,9 +66,9 @@ Given this code, we would see a listener fired for each ancestor of the `button` Having explained event bubbling and capturing, we can now explain the three phases of event propagation: -- During the **capture phase**, the event starts from `window` and moves down to `document`, the root element and through ancestors of the target element. +- During the **capture phase**, the event starts from `Window` and moves down to `Document`, the root element and through ancestors of the target element. - During the **target phase**, the event gets triggered on the event target (e.g. the `button` the user clicked). -- During the **bubble phase**, the event bubbles up through ancestors of the target element until the root element, `document` and, finally, `window`. +- During the **bubble phase**, the event bubbles up through ancestors of the target element until the root element, `Document` and, finally, `Window`. ### Event delegation @@ -80,7 +80,7 @@ window.addEventListener('click', e => { }); ``` -In the above example, we delegate event handling from the `button` to `window` and use `event.target` to get the original event's target. +In the above example, we delegate event handling from the `button` to `Window` and use `Event.target` to get the original event's target. Using the event delegation pattern is advantageous for two reasons: diff --git a/blog_posts/javascript-iterable-to-array.md b/blog_posts/javascript-iterable-to-array.md index 4a5f17277..619dd9137 100644 --- a/blog_posts/javascript-iterable-to-array.md +++ b/blog_posts/javascript-iterable-to-array.md @@ -36,7 +36,7 @@ Note that the above example is the basis for the [uniqueElements snippet](/js/s/ ### NodeList -A [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) is a collection of nodes, returned by methods such as `document.childNodes()` or `document.querySelectorAll()`. While it implements some methods that help manipulate it as an array (e.g. `NodeList.prototype.forEach()`), it's oftentimes desirable to convert it to an array. When the spread operator is applied to it, the result is an array of the contained nodes: +A [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) is a collection of nodes, returned by methods such as `Document.childNodes()` or `Document.querySelectorAll()`. While it implements some methods that help manipulate it as an array (e.g. `NodeList.prototype.forEach()`), it's oftentimes desirable to convert it to an array. When the spread operator is applied to it, the result is an array of the contained nodes: ```js const nodes = document.childNodes; diff --git a/blog_posts/javascript-modify-url-without-reload.md b/blog_posts/javascript-modify-url-without-reload.md index 3818c3f4b..38d8167e0 100644 --- a/blog_posts/javascript-modify-url-without-reload.md +++ b/blog_posts/javascript-modify-url-without-reload.md @@ -30,7 +30,7 @@ The arguments for both methods are the same, allowing you to pass a customized s ### Using the Location API -The older [Location API](https://developer.mozilla.org/en-US/docs/Web/API/Location) is not the best tool for the job. It reloads the page, but still allows you to modify the current URL and might be useful when working with legacy browsers. You can modify the URL, using either `window.location.href`, `location.assign()` or `location.replace()`: +The older [Location API](https://developer.mozilla.org/en-US/docs/Web/API/Location) is not the best tool for the job. It reloads the page, but still allows you to modify the current URL and might be useful when working with legacy browsers. You can modify the URL, using either `Window.location.href`, `location.assign()` or `location.replace()`: ```js // Current URL: https://my-website.com/page_a