diff --git a/blog_posts/javascript-promise-then-finally.md b/blog_posts/javascript-promise-then-finally.md index 16ba5af2b..f801c599e 100644 --- a/blog_posts/javascript-promise-then-finally.md +++ b/blog_posts/javascript-promise-then-finally.md @@ -9,7 +9,7 @@ firstSeen: 2021-03-18T11:00:00+02:00 lastUpdated: 2021-06-12T19:30:41+03:00 --- -On the surface, `Promise.prototype.then()` and `Promise.prototype.finally` seem very similar. But there are a few important differences you need to keep in mind. +On the surface, `Promise.prototype.then()` and `Promise.prototype.finally()` seem very similar. But there are a few important differences you need to keep in mind. The first and most obvious one is that `finally()` doesn't receive the resulting value of the promise chain. On the same note, as no value is received by `finally()`, the resolved value of the promise can't be changed as well. diff --git a/blog_posts/javascript-target-blank.md b/blog_posts/javascript-target-blank.md index f7d46da34..1639b189d 100644 --- a/blog_posts/javascript-target-blank.md +++ b/blog_posts/javascript-target-blank.md @@ -9,7 +9,7 @@ firstSeen: 2020-11-20T09:19:07+02:00 lastUpdated: 2021-06-12T19:30:41+03:00 --- -Oftentimes, when linking to an external resource from our websites, we use `target="_blank"` to open the linked page in a new tab or window. But there is a security risk we should be aware of. The new tab gains limited access to the linking page (i.e. our website) via `window.opener`, which it can then use to alter the linking page's URL via `window.opener.location` (this is known as tabnabbing). +Oftentimes, when linking to an external resource from our websites, we use `target="_blank"` to open the linked page in a new tab or window. But there is a security risk we should be aware of. The new tab gains limited access to the linking page (i.e. our website) via `Window.opener`, which it can then use to alter the linking page's URL via `Window.opener.location` (this is known as tabnabbing). This might be a problem if the external resource is not trustworthy, might have been hacked, the domain has changed owners over the years etc. There is no guarantee that a third-party resource, no matter how trustworthy, can be actually trusted with our users' security and we, as developers, should always be aware of this risk. diff --git a/blog_posts/javascript-ternary-operator.md b/blog_posts/javascript-ternary-operator.md index f1d2b76b9..0d7b70c93 100644 --- a/blog_posts/javascript-ternary-operator.md +++ b/blog_posts/javascript-ternary-operator.md @@ -12,7 +12,7 @@ lastUpdated: 2021-06-12T19:30:41+03:00 JavaScript's ternary operator (`?:`), also called the conditional operator, is used to replace a conditional statement, most commonly an assignment. For example: ```js -// Code using if..else +// Code using if...else let x; if (someCondition) { x = 10; @@ -24,10 +24,10 @@ if (someCondition) { const x = someCondition ? 10 : 20; ``` -As you can tell from the above example, the ternary operator is shorter than using an `if..else` statement and allows us to assign the resulting value to a variable, provided the condition is pretty much a one-liner. A useful result of this is that we can use the ternary operator for arrow functions with implicit returns: +As you can tell from the above example, the ternary operator is shorter than using an `if...else` statement and allows us to assign the resulting value to a variable, provided the condition is pretty much a one-liner. A useful result of this is that we can use the ternary operator for arrow functions with implicit returns: ```js -// Code using if..else +// Code using if...else const conditionalX = (condition, x) => { if (condition) return x; else return x + 5; diff --git a/blog_posts/react-rendering-basics.md b/blog_posts/react-rendering-basics.md index b17f92975..0ddbf38fa 100644 --- a/blog_posts/react-rendering-basics.md +++ b/blog_posts/react-rendering-basics.md @@ -29,7 +29,7 @@ Conceptually, this work is divided into two phases: - **Render phase**: rendering components, calculating changes - **Commit phase**: applying the changes to the DOM -After the **commit phase** is complete, React will run `componentDidMount` and `componentDidUpdate` lifecycle methods, as well as `useLayoutEffect` and, after a short timeout, `useEffect` hooks. +After the **commit phase** is complete, React will run `componentDidMount` and `componentDidUpdate` lifecycle methods, as well as `useLayoutEffect()` and, after a short timeout, `useEffect()` hooks. Two key takeaways here are the following: diff --git a/blog_posts/react-rendering-state.md b/blog_posts/react-rendering-state.md index f195801b0..57ca87a39 100644 --- a/blog_posts/react-rendering-state.md +++ b/blog_posts/react-rendering-state.md @@ -40,7 +40,7 @@ While this most likely means that fewer components will have to re-render compar React-Redux provides two ways of connecting to its store, performing the necessary work and returning the combined `props`: - `connect` (any component): Higher-order component (HOC) that wraps any given component -- `useSeletor` (function components): Hook called inside function components +- `useSelector` (function components): Hook called inside function components `connect` acts a lot like memoizing a React component (i.e. using `React.PureComponent` or `React.memo()`), updating the wrapped component only when the combined `props` have changed. This means that passing new references from the parent or the passed functions will still cause a re-render. Components wrapped with `connect` usually read smaller pieces of data from the store state, are less likely to re-render due to that and usually affect fewer components down their tree. diff --git a/blog_posts/react-use-state-with-label.md b/blog_posts/react-use-state-with-label.md index dacd6e864..6a5fa3960 100644 --- a/blog_posts/react-use-state-with-label.md +++ b/blog_posts/react-use-state-with-label.md @@ -9,7 +9,7 @@ firstSeen: 2021-05-06T12:00:00+03:00 lastUpdated: 2021-11-07T16:34:37+03:00 --- -When working with multiple `useState` hooks in React, things can get a bit complicated while debugging. Luckily, there's an easy way to label these values, using the [`useDebugValue`](https://reactjs.org/docs/hooks-reference.html#usedebugvalue) hook to create a custom `useStateWithLabel` hook: +When working with multiple `useState()` hooks in React, things can get a bit complicated while debugging. Luckily, there's an easy way to label these values, using the [`useDebugValue`](https://reactjs.org/docs/hooks-reference.html#usedebugvalue) hook to create a custom `useStateWithLabel` hook: ```jsx const useStateWithLabel = (initialValue, label) => { @@ -30,4 +30,4 @@ ReactDOM.render(, document.getElementById('root')); // StateWithLabel: "counter: 0" ``` -This hook is obviously meant mainly for development, but it can also be useful when creating React component or hook libraries. Additionally, you can easily abstract it in a way that the label is ignored in production builds. An example would be exporting a hook that defaults back to `useState` when building for a production environment. +This hook is obviously meant mainly for development, but it can also be useful when creating React component or hook libraries. Additionally, you can easily abstract it in a way that the label is ignored in production builds. An example would be exporting a hook that defaults back to `useState()` when building for a production environment.