Remove individual image credits
This commit is contained in:
@ -38,5 +38,3 @@ Developers will most likely argue for the rest of eternity about the most produc
|
|||||||
|
|
||||||
10. Fira Code
|
10. Fira Code
|
||||||
[Fira Code](https://github.com/tonsky/FiraCode) is not a traditional VS Code extension and might take a couple more steps to set up, but it's a superb programming font with ligatures that will help you scan code faster once you get used to it.
|
[Fira Code](https://github.com/tonsky/FiraCode) is not a traditional VS Code extension and might take a couple more steps to set up, but it's a superb programming font with ligatures that will help you scan code faster once you get used to it.
|
||||||
|
|
||||||
**Image credit:** [Fotis Fotopoulos](https://unsplash.com/@ffstop?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -298,5 +298,3 @@ excerpt: We hand picked 25 of our favorite CSS gradients from uiGradients for yo
|
|||||||
background: linear-gradient(to right, #ff6e7f, #bfe9ff);
|
background: linear-gradient(to right, #ff6e7f, #bfe9ff);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Toa Heftiba](https://unsplash.com/@heftiba?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -54,5 +54,3 @@ const arr = [1, 2, 3];
|
|||||||
const isOdd = x => x % 2 === 1;
|
const isOdd = x => x % 2 === 1;
|
||||||
arr.find(isOdd); // 1
|
arr.find(isOdd); // 1
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Edgar Chaparro](https://unsplash.com/@echaparro) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -20,5 +20,3 @@ This is hardly a new tip, but I think it deserves a spot on the list, as both of
|
|||||||
|
|
||||||
4. Keep an eye on your markup, performance and accessibility
|
4. Keep an eye on your markup, performance and accessibility
|
||||||
Last but not least, something that is probably already on your list, is optimizing your code. This includes everything from writing semantic markup and keeping requests to a minimum to optimizing for all device types, making your website accessible and ensuring fast load times. Keep in mind that websites have many moving parts that evolve and change over time, so it's a good idea to audit your website often with a tool like Lighthouse.
|
Last but not least, something that is probably already on your list, is optimizing your code. This includes everything from writing semantic markup and keeping requests to a minimum to optimizing for all device types, making your website accessible and ensuring fast load times. Keep in mind that websites have many moving parts that evolve and change over time, so it's a good idea to audit your website often with a tool like Lighthouse.
|
||||||
|
|
||||||
**Image credit:** [timJ](https://unsplash.com/@the_roaming_platypus?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -24,5 +24,3 @@ Before submitting your pull request for review, always take the time to review i
|
|||||||
|
|
||||||
5. Respond to reviews
|
5. Respond to reviews
|
||||||
Set some time aside to respond to reviews after submitting your pull request. Handle anything you can as soon as possible and start discussion whenever necessary to arrive to a solution. Use `--fixup` for changes suggested in review comments or add new commits to help reviewers parse new changes more easily. Finally, assume good intentions, be polite and thank your peers.
|
Set some time aside to respond to reviews after submitting your pull request. Handle anything you can as soon as possible and start discussion whenever necessary to arrive to a solution. Use `--fixup` for changes suggested in review comments or add new commits to help reviewers parse new changes more easily. Finally, assume good intentions, be polite and thank your peers.
|
||||||
|
|
||||||
**Image credit:** [Alexandru Acea](https://unsplash.com/@alexacea?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -116,5 +116,3 @@ const str = 'Greek looks like this: γεια';
|
|||||||
]
|
]
|
||||||
*/
|
*/
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Kace Rodriguez](https://unsplash.com/@kace?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -23,5 +23,3 @@ Many developers find onboarding experience worrisome. Here are 6 helpful tips to
|
|||||||
- If time allows it, plan virtual pair-programming sessions with your teammates. Once a week, pick a short task and try to solve it together. Doing this, you will pick up domain-specific knowledge faster, learn how to navigate new codebase efficiently, and improve your problem-solving skills.
|
- If time allows it, plan virtual pair-programming sessions with your teammates. Once a week, pick a short task and try to solve it together. Doing this, you will pick up domain-specific knowledge faster, learn how to navigate new codebase efficiently, and improve your problem-solving skills.
|
||||||
|
|
||||||
- Socialize with other team members on Slack channels like _#random_ and _#watercooler_. Just because you're new to the team doesn't mean you shouldn't participate in casual conversations with other employees. They are social beings too and are probably looking forward to getting to know better new colleagues.
|
- Socialize with other team members on Slack channels like _#random_ and _#watercooler_. Just because you're new to the team doesn't mean you shouldn't participate in casual conversations with other employees. They are social beings too and are probably looking forward to getting to know better new colleagues.
|
||||||
|
|
||||||
**Image credit:** [Umer Sayyam](https://unsplash.com/@sayyam197?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -29,5 +29,3 @@ Google Chrome's developer tools are nothing short of amazing, but there are a fe
|
|||||||
|
|
||||||
7. EditThisCookie
|
7. EditThisCookie
|
||||||
[EditThisCookie](https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=en) is a powerful cookie manager extension, that allows you to add, delete, edit and even export and import cookies quickly and efficiently.
|
[EditThisCookie](https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=en) is a powerful cookie manager extension, that allows you to add, delete, edit and even export and import cookies quickly and efficiently.
|
||||||
|
|
||||||
**Image credit:** [Fotis Fotopoulos](https://unsplash.com/@ffstop?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -30,5 +30,3 @@ Responsiveness is often thought in terms of screen size or mobile vs desktop, bu
|
|||||||
|
|
||||||
8. Organize your content
|
8. Organize your content
|
||||||
A website's layout should be easy to scan, understand and find the content that is relevant to the user. Good organization with clear sections and properly grouped content provides a better user experience for all users, regardless of device or accessibility needs.
|
A website's layout should be easy to scan, understand and find the content that is relevant to the user. Good organization with clear sections and properly grouped content provides a better user experience for all users, regardless of device or accessibility needs.
|
||||||
|
|
||||||
**Image credit:** [AbsolutVision](https://unsplash.com/@freegraphictoday?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -33,5 +33,3 @@ Working from home has its own challenges and issues, so try to find the right to
|
|||||||
|
|
||||||
8. Maintain regular hours
|
8. Maintain regular hours
|
||||||
It's as easy to forget about breaks as it is to start working late. Try to set a schedule that sits well with your team and stick to it. If you would work 9 to 5 in a regular office environment, do the same at home. Take regular breaks, do not forget to sign off when put in your daily hours and come back tomorrow. After all, it's business as usual.
|
It's as easy to forget about breaks as it is to start working late. Try to set a schedule that sits well with your team and stick to it. If you would work 9 to 5 in a regular office environment, do the same at home. Take regular breaks, do not forget to sign off when put in your daily hours and come back tomorrow. After all, it's business as usual.
|
||||||
|
|
||||||
**Image credit:** [Goran Ivos](https://unsplash.com/@goran_ivos?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -109,5 +109,3 @@ async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Katie Burkhart](https://unsplash.com/@katieanalyzes?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -18,5 +18,3 @@ I was recently tasked with writing a design document at work. What first seemed
|
|||||||
**You come up with more varied solutions.** Understanding past decisions, covering the gaps in your knowledge and boiling down the problem to a concise description you should already be a lot more informed about the topic you are researching than before. Hopefully at this stage, you will have an itch to try a different solution from the one you originally envisioned or you'll have come up with a solution where there was none. More varied solutions are always better because you can compare tradeoffs and get a better understanding of what's best. In my case, I ended up considering a solution I had mostly dismissed originally. And it was that solution which made the most sense to me in the end, even though it was more radical than the one I was planning to propose originally.
|
**You come up with more varied solutions.** Understanding past decisions, covering the gaps in your knowledge and boiling down the problem to a concise description you should already be a lot more informed about the topic you are researching than before. Hopefully at this stage, you will have an itch to try a different solution from the one you originally envisioned or you'll have come up with a solution where there was none. More varied solutions are always better because you can compare tradeoffs and get a better understanding of what's best. In my case, I ended up considering a solution I had mostly dismissed originally. And it was that solution which made the most sense to me in the end, even though it was more radical than the one I was planning to propose originally.
|
||||||
|
|
||||||
As a closing thought, try writing even if nobody is going to read it. Write it for you. It will help you understand, explain, reason about and tackle the task all at once. It's not a waste of time, it's a powerful tool you could leverage from time to time.
|
As a closing thought, try writing even if nobody is going to read it. Write it for you. It will help you understand, explain, reason about and tackle the task all at once. It's not a waste of time, it's a powerful tool you could leverage from time to time.
|
||||||
|
|
||||||
**Image credit:** [Austin Poon](https://unsplash.com/@austinpoon?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -45,5 +45,3 @@ This might still be cryptic, so let me explain what is going on. React uses its
|
|||||||
However, in this case React's virtual DOM and the real DOM are different, because of `destroyElement()` removing the `#my-div` element. As a result, when React tries to update the real DOM with the changes from the virtual DOM, the `#my-div` element cannot be removed as it doesn't exist anymore. This results in the above exception being thrown and your application breaking.
|
However, in this case React's virtual DOM and the real DOM are different, because of `destroyElement()` removing the `#my-div` element. As a result, when React tries to update the real DOM with the changes from the virtual DOM, the `#my-div` element cannot be removed as it doesn't exist anymore. This results in the above exception being thrown and your application breaking.
|
||||||
|
|
||||||
This example is short and easy to resolve, by refactoring `destroyElement()` to be part of the `App` component and interact with its state, yet it showcases how fragile React can be under circumstances. Having a shared codebase, with many developers working on different things, can lead to issues like this being introduced and tracking them down can be rather tricky, which is why you might want to be very careful when directly manipulating the DOM when you use React.
|
This example is short and easy to resolve, by refactoring `destroyElement()` to be part of the `App` component and interact with its state, yet it showcases how fragile React can be under circumstances. Having a shared codebase, with many developers working on different things, can lead to issues like this being introduced and tracking them down can be rather tricky, which is why you might want to be very careful when directly manipulating the DOM when you use React.
|
||||||
|
|
||||||
**Image credit:** [Julia Joppien](https://unsplash.com/@vitreous_macula?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -72,5 +72,3 @@ const filePaths = files
|
|||||||
- Declarative, easier to read and refactor, chain can grow as necessary.
|
- Declarative, easier to read and refactor, chain can grow as necessary.
|
||||||
- Does not use `Array.prototype.push()` or the spread (`...`) operator.
|
- Does not use `Array.prototype.push()` or the spread (`...`) operator.
|
||||||
- `O(cN)` complexity, `c` iterations per element, (`c`: length of the chain).
|
- `O(cN)` complexity, `c` iterations per element, (`c`: length of the chain).
|
||||||
|
|
||||||
**Image credit:** [Windows](https://unsplash.com/@windows?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -117,5 +117,3 @@ fibonacciNumber(4);
|
|||||||
The iterative solution above makes the same calculations as the memoized one, however it performs better due to two key reasons. First of all, there is no cache, which would take up space in memory, making the latter implementation require fewer resources. Similarly, as there are no recursive calls or checks for cache hits, the code performs better and requires fewer resources to execute.
|
The iterative solution above makes the same calculations as the memoized one, however it performs better due to two key reasons. First of all, there is no cache, which would take up space in memory, making the latter implementation require fewer resources. Similarly, as there are no recursive calls or checks for cache hits, the code performs better and requires fewer resources to execute.
|
||||||
|
|
||||||
However, you have to bear in mind what the actual use cases of your recursive code are and be very careful how you optimize them. Memoization can be a more powerful tool if a recursive function is called multiple times with different arguments, as its cache persists between calls, while iteration can be faster for recursive computations that are used less frequently. Always pay attention to your code and optimize for the cases you know or anticipate to be more common.
|
However, you have to bear in mind what the actual use cases of your recursive code are and be very careful how you optimize them. Memoization can be a more powerful tool if a recursive function is called multiple times with different arguments, as its cache persists between calls, while iteration can be faster for recursive computations that are used less frequently. Always pay attention to your code and optimize for the cases you know or anticipate to be more common.
|
||||||
|
|
||||||
**Image credit:** [Windows](https://unsplash.com/@windows?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -59,5 +59,3 @@ def difference(a, b):
|
|||||||
Using `timeit` to analyze the performance of the last two code examples, it's pretty clear that using list comprehension can be up to ten times faster than the alternative, as it's a native language feature that works very similar to a simple `for` loop without the overhead of the extra function calls. This explains why we prefer it, apart from readability.
|
Using `timeit` to analyze the performance of the last two code examples, it's pretty clear that using list comprehension can be up to ten times faster than the alternative, as it's a native language feature that works very similar to a simple `for` loop without the overhead of the extra function calls. This explains why we prefer it, apart from readability.
|
||||||
|
|
||||||
This pretty much applies to most mathematical list operation snippets, such as [difference](/python/s/difference), [symmetric_difference](/python/s/symmetric-difference) and [intersection](/python/s/intersection).
|
This pretty much applies to most mathematical list operation snippets, such as [difference](/python/s/difference), [symmetric_difference](/python/s/symmetric-difference) and [intersection](/python/s/intersection).
|
||||||
|
|
||||||
**Image credit:** [Kalen Emsley](https://unsplash.com/@kalenemsley?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -115,5 +115,3 @@ console.log(
|
|||||||
'' // Clear any styles
|
'' // Clear any styles
|
||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Tracy Adams](https://unsplash.com/@tracycodes?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -52,5 +52,3 @@ Session storage stores a larger amount of data on the client's computer only for
|
|||||||
| Sent with requests | Yes | No | No |
|
| Sent with requests | Yes | No | No |
|
||||||
| Blockable by users | Yes | Yes | Yes |
|
| Blockable by users | Yes | Yes | Yes |
|
||||||
| Editable by users | Yes | Yes | Yes |
|
| Editable by users | Yes | Yes | Yes |
|
||||||
|
|
||||||
**Image credit:** [Jonathan Pielmayer](https://unsplash.com/@jonathanpielmayer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -53,5 +53,3 @@ const copyToClipboard = str => {
|
|||||||
### Save and restore the original document's selection
|
### Save and restore the original document's selection
|
||||||
|
|
||||||
The final consideration before wrapping this up is respecting the user's previous interaction with the website, like having already selected some content. Luckily, we can now use some modern Javascript methods and properties like `DocumentOrShadowRoot.getSelection()`, `Selection.rangeCount`, `Selection.getRangeAt()`, `Selection.removeAllRanges()` and `Selection.addRange()` to save and restore the original document selection. You can find the final code with these improvements implemented in the [copyToClipboard snippet](/js/s/copy-to-clipboard/).
|
The final consideration before wrapping this up is respecting the user's previous interaction with the website, like having already selected some content. Luckily, we can now use some modern Javascript methods and properties like `DocumentOrShadowRoot.getSelection()`, `Selection.rangeCount`, `Selection.getRangeAt()`, `Selection.removeAllRanges()` and `Selection.addRange()` to save and restore the original document selection. You can find the final code with these improvements implemented in the [copyToClipboard snippet](/js/s/copy-to-clipboard/).
|
||||||
|
|
||||||
**Image credit:** [Kaitlyn Baker](https://unsplash.com/@kaitlynbaker?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -22,5 +22,3 @@ Transform centering uses, as the name implies, CSS transforms to center an eleme
|
|||||||
### Table
|
### Table
|
||||||
|
|
||||||
Last but not least, table centering is an older technique which you might favor when working with older browsers. It depends on the container element having a `display: table`, allowing the child element to utilize `display: table-cell` in combination with `text-align: center` and `vertical-align: middle` in order to center itself horizontally and vertically. You can view the [Display table centering snippet](/css/s/display-table-centering) for the code and examples.
|
Last but not least, table centering is an older technique which you might favor when working with older browsers. It depends on the container element having a `display: table`, allowing the child element to utilize `display: table-cell` in combination with `text-align: center` and `vertical-align: middle` in order to center itself horizontally and vertically. You can view the [Display table centering snippet](/css/s/display-table-centering) for the code and examples.
|
||||||
|
|
||||||
**Image credit:** [garrett parker](https://unsplash.com/@garrettpsystems?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -38,5 +38,3 @@ Using the `bezier-curve()` we can easily define custom easing variables that can
|
|||||||
--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Aaron Burson](https://unsplash.com/@aaronburson?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -20,5 +20,3 @@ Below is a list of the top 5 most commonly used pseudo-classes and their usage.
|
|||||||
- `:first-child`, `:last-child`, `:nth-child()` and `nth-last-child()` are useful when working with collections of elements
|
- `:first-child`, `:last-child`, `:nth-child()` and `nth-last-child()` are useful when working with collections of elements
|
||||||
- `:not()` is used to match everything except the given selector and can be useful in styling hard to select elements
|
- `:not()` is used to match everything except the given selector and can be useful in styling hard to select elements
|
||||||
- `:lang()` allows you to apply special styles based on the language of the document and is useful for multilingual websites
|
- `:lang()` allows you to apply special styles based on the language of the document and is useful for multilingual websites
|
||||||
|
|
||||||
**Image credit:** [Tj Holowaychuk](https://unsplash.com/@tjholowaychuk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -21,5 +21,3 @@ excerpt: Learn everything you need to know about CSS units with this handy cheat
|
|||||||
- `pt`: Points `1pt` = `1in` / `72` = `1.333px` (approximately)
|
- `pt`: Points `1pt` = `1in` / `72` = `1.333px` (approximately)
|
||||||
- `cm`: Centimeters `1cm` = `96px` / `2.54` = `37.8px` (approximately)
|
- `cm`: Centimeters `1cm` = `96px` / `2.54` = `37.8px` (approximately)
|
||||||
- `mm`: Millimeters `1mm` = `1cm` / `10` = `3.78px` (approximately)
|
- `mm`: Millimeters `1mm` = `1cm` / `10` = `3.78px` (approximately)
|
||||||
|
|
||||||
**Image credit:** [Sharon Sivertsen](https://unsplash.com/@sharon223?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -62,5 +62,3 @@ Finally, keep in mind the following useful tips for working with CSS variables:
|
|||||||
- You can define fallback values, by providing a second argument to the `var()` function (e.g. `var(--text-color, black);` will default to `black` if `--text-color` is not defined).
|
- You can define fallback values, by providing a second argument to the `var()` function (e.g. `var(--text-color, black);` will default to `black` if `--text-color` is not defined).
|
||||||
- CSS variables are case sensitive, so mind your capitalization. They can also be inlined in HTML like any other style (e.g. `<div style="--text-color: red">`).
|
- CSS variables are case sensitive, so mind your capitalization. They can also be inlined in HTML like any other style (e.g. `<div style="--text-color: red">`).
|
||||||
- You can nest `var()` calls, using another variable as fallback (e.g. `var(--main-color, var(--other-color))`), pass them to other functions such as `calc()` or even assign one variable to another (e.g. `--text-color: var(--main-color);`).
|
- You can nest `var()` calls, using another variable as fallback (e.g. `var(--main-color, var(--other-color))`), pass them to other functions such as `calc()` or even assign one variable to another (e.g. `--text-color: var(--main-color);`).
|
||||||
|
|
||||||
**Image credit:** [Pankaj Patel](https://unsplash.com/@pankajpatel?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -13,5 +13,3 @@ HTML5 introduced a variety of convenient features that many of us use every day.
|
|||||||
<!-- The downloaded file will be named 'June-2020.csv' -->
|
<!-- The downloaded file will be named 'June-2020.csv' -->
|
||||||
<a href="/data/2020/06/report.csv" download="June-2020.csv">June 2020</a>
|
<a href="/data/2020/06/report.csv" download="June-2020.csv">June 2020</a>
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Frank R](https://unsplash.com/@frank041985?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -32,5 +32,3 @@ el.addEventListener('keyup', e => {
|
|||||||
```
|
```
|
||||||
|
|
||||||
As you can see from the above example, the `'keyup'` event is used on our element of choice to then call `KeyboardEvent.getModifierState()` and determine the state of the `'CapsLock'` key. `'keydown'` and `'keypress'` might also work. However, after testing on multiple devices, it seems that using `'keyup'` is the preferred method as it works better across different OSes and browsers.
|
As you can see from the above example, the `'keyup'` event is used on our element of choice to then call `KeyboardEvent.getModifierState()` and determine the state of the `'CapsLock'` key. `'keydown'` and `'keypress'` might also work. However, after testing on multiple devices, it seems that using `'keyup'` is the preferred method as it works better across different OSes and browsers.
|
||||||
|
|
||||||
**Image credit:** [Markus Winkler](https://unsplash.com/@markuswinkler?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -45,5 +45,3 @@ const data = [3, 4];
|
|||||||
Object.entries(data).forEach(e => console.log(e[0], e[1]));
|
Object.entries(data).forEach(e => console.log(e[0], e[1]));
|
||||||
// [0, 3] [1, 4]
|
// [0, 3] [1, 4]
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Kaitlyn Baker](https://unsplash.com/@kaitlynbaker?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -76,5 +76,3 @@ excerpt: Flexbox allows you to create fluid layouts easily. If you find yourself
|
|||||||
- Accepts an integer value
|
- Accepts an integer value
|
||||||
- Items in a container are sorted by ascending `order` value and then by their source code order
|
- Items in a container are sorted by ascending `order` value and then by their source code order
|
||||||
- Might cause accessibility issues if used incorrectly
|
- Might cause accessibility issues if used incorrectly
|
||||||
|
|
||||||
**Image credit:** [Markus Spiske](https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -48,5 +48,3 @@ Additionally, you can use [edit the configuration file](/git/s/edit-config) and
|
|||||||
apply = stash apply
|
apply = stash apply
|
||||||
rl = reflog
|
rl = reflog
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Renáta-Adrienn](https://unsplash.com/@bajkorenata?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -16,5 +16,3 @@ GIT_AUTHOR_DATE='Mon May 18 19:32:10 2020 -0400' \
|
|||||||
```
|
```
|
||||||
|
|
||||||
As shown in the example above, you can set both values to any date you like and your code will be committed on that date. Note that the format for the values above is `'date +"%s %z"'`, also referred to as internal raw git format, but you can also use other formats, such as RFC 2822 (`'Mon, 18 May 2020 19:32:10 -0400'`), ISO 8601 (`'2020-05-18 19:32:10 -0400'`), local (`'Mon May 18 19:32:10 2020'`), short (`'2020-05-18'`) or relative (`5.seconds.ago`, `2.years.3.months.ago`, `'6am yesterday'`).
|
As shown in the example above, you can set both values to any date you like and your code will be committed on that date. Note that the format for the values above is `'date +"%s %z"'`, also referred to as internal raw git format, but you can also use other formats, such as RFC 2822 (`'Mon, 18 May 2020 19:32:10 -0400'`), ISO 8601 (`'2020-05-18 19:32:10 -0400'`), local (`'Mon May 18 19:32:10 2020'`), short (`'2020-05-18'`) or relative (`5.seconds.ago`, `2.years.3.months.ago`, `'6am yesterday'`).
|
||||||
|
|
||||||
**Image credit:** [Visit Greenland](https://unsplash.com/@greenland?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -22,5 +22,3 @@ Co-authored-by: another-name <another-name@example.com>"
|
|||||||
- To correctly attribute a commit to a co-author, you must use the email associated with their GitHub account.
|
- To correctly attribute a commit to a co-author, you must use the email associated with their GitHub account.
|
||||||
- If a person's email is private, you can use their GitHub-provided `no-reply` email.
|
- If a person's email is private, you can use their GitHub-provided `no-reply` email.
|
||||||
- Leave one or preferably two empty lines before any `Co-authored-by` trailers.
|
- Leave one or preferably two empty lines before any `Co-authored-by` trailers.
|
||||||
|
|
||||||
**Image credit:** [Taylor Simpson](https://unsplash.com/@taylorgsimpson?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -36,5 +36,3 @@ excerpt: Familiarize yourself with the most common HTTP status codes with this h
|
|||||||
- **502**: Bad Gateway - Gateway server got an invalid response
|
- **502**: Bad Gateway - Gateway server got an invalid response
|
||||||
- **503**: Service Unavailable - Server temporarily unable to handle request
|
- **503**: Service Unavailable - Server temporarily unable to handle request
|
||||||
- **504**: Gateway Timeout - Gateway server didn't get a response in time
|
- **504**: Gateway Timeout - Gateway server didn't get a response in time
|
||||||
|
|
||||||
**Image credit:** [Robin GAILLOT-DREVON](https://unsplash.com/@robingaillotdrevon?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -84,5 +84,3 @@ const equalsIgnoreOrder = (a, b) => {
|
|||||||
```
|
```
|
||||||
|
|
||||||
For a more detailed explanation, you should check out the [haveSameContents snippet](/js/s/have-same-contents).
|
For a more detailed explanation, you should check out the [haveSameContents snippet](/js/s/have-same-contents).
|
||||||
|
|
||||||
**Image credit:** [Irene Kredenets](https://unsplash.com/@ikredenets?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -54,5 +54,3 @@ toggleElements.forEach(el => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Matthew Smith](https://unsplash.com/@whale?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -104,5 +104,3 @@ As you can see from these examples, there's a difference in how constructors wor
|
|||||||
Moreover, arrow functions and regular functions present some differences when used to define class methods. A regular function method will end up with a different execution context when passed as a callback. This can be handled using `Function.prototype.bind()` or by using an arrow function which doesn't have this issue.
|
Moreover, arrow functions and regular functions present some differences when used to define class methods. A regular function method will end up with a different execution context when passed as a callback. This can be handled using `Function.prototype.bind()` or by using an arrow function which doesn't have this issue.
|
||||||
|
|
||||||
If you want to read more about the `this` keyword, you should check out our [previous article on the subject](/blog/s/javascript-this).
|
If you want to read more about the `this` keyword, you should check out our [previous article on the subject](/blog/s/javascript-this).
|
||||||
|
|
||||||
**Image credit:** [Matthew Smith](https://unsplash.com/@whale?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -89,5 +89,3 @@ const uppercaseItems = async () => {
|
|||||||
uppercaseItems();
|
uppercaseItems();
|
||||||
// LOGS: ''Items processed', 'B', 'A', 'C'
|
// LOGS: ''Items processed', 'B', 'A', 'C'
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Matteus Silva](https://unsplash.com/@matteusilva?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -102,5 +102,3 @@ const myFunc = async () => {
|
|||||||
// The 6000ms timeout will be cleared before firing, so 'Hello' won't be logged
|
// The 6000ms timeout will be cleared before firing, so 'Hello' won't be logged
|
||||||
// The 4000ms timeout will not be cleared, so 'Hi' will be logged
|
// The 4000ms timeout will not be cleared, so 'Hi' will be logged
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Sandro Antonietti](https://unsplash.com/@s_antonietti?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -50,5 +50,3 @@ 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 `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.
|
||||||
|
|
||||||
**Image credit:** [Louis Droege](https://unsplash.com/@lois184?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -50,5 +50,3 @@ counter.reset(); // 5
|
|||||||
In this example, we define a function, `initCounter`, that returns an object, whose properties are functions. All of the returned object's properties use closures to manipulate `initCounter`'s `value` variable in some way. The obvious benefit of this approach is that if you want to define multiple counters via `initCounter`, you do not need to create multiple `value` instances all over the place, but they are safely encapsulated by the returned object, using closures.
|
In this example, we define a function, `initCounter`, that returns an object, whose properties are functions. All of the returned object's properties use closures to manipulate `initCounter`'s `value` variable in some way. The obvious benefit of this approach is that if you want to define multiple counters via `initCounter`, you do not need to create multiple `value` instances all over the place, but they are safely encapsulated by the returned object, using closures.
|
||||||
|
|
||||||
Using closures, as shown in the example above, can help make your code more usable and maintainable, while allowing you to separate concerns and create abstractions as necessary.
|
Using closures, as shown in the example above, can help make your code more usable and maintainable, while allowing you to separate concerns and create abstractions as necessary.
|
||||||
|
|
||||||
**Image credit:** [Mark Tegethoff](https://unsplash.com/@tegethoff?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -62,5 +62,3 @@ Finally, `Object.assign()` can be used in the exact same way as it's used to cre
|
|||||||
let x = [1, 2, 3, 4];
|
let x = [1, 2, 3, 4];
|
||||||
let y = Object.assign([], x);
|
let y = Object.assign([], x);
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Paweł Czerwiński](https://unsplash.com/@pawel_czerwinski?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -76,5 +76,3 @@ myObj = {
|
|||||||
```
|
```
|
||||||
|
|
||||||
In the above example, we apply the techniques we described previously to ensure that the given object is deeply frozen. You can view the complete code, along with more examples in the [deepFreeze](/js/s/deep-freeze) snippet.
|
In the above example, we apply the techniques we described previously to ensure that the given object is deeply frozen. You can view the complete code, along with more examples in the [deepFreeze](/js/s/deep-freeze) snippet.
|
||||||
|
|
||||||
**Image credit:** [Aaron Burden](https://unsplash.com/@aaronburden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -66,5 +66,3 @@ const {
|
|||||||
...restData // restData = { '1': 'b', '3': 'd', '4': 'e', '5': 'f' }
|
...restData // restData = { '1': 'b', '3': 'd', '4': 'e', '5': 'f' }
|
||||||
} = arr;
|
} = arr;
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Xavi Cabrera](https://unsplash.com/@xavi_cabrera?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -44,5 +44,3 @@ Last but not least, using `Array.prototype.pop()` is another, more old-fashioned
|
|||||||
let a = [1, 2, 3, 4];
|
let a = [1, 2, 3, 4];
|
||||||
while (a.length) a.pop();
|
while (a.length) a.pop();
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Irene Kredenets](https://unsplash.com/@ikredenets?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -36,5 +36,3 @@ encodeURI(partOfURL); // Bad, does not escape all special characters
|
|||||||
encodeURI(fullURL); // Good, encoded URL is valid
|
encodeURI(fullURL); // Good, encoded URL is valid
|
||||||
// 'https://my-website.com/my-page?query=%22this%25thing%22&user=1'
|
// 'https://my-website.com/my-page?query=%22this%25thing%22&user=1'
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Austin Poon](https://unsplash.com/@austinpoon?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -55,5 +55,3 @@ const daysEnum = new Enum(
|
|||||||
|
|
||||||
const days = [...daysEnum]; // Array of the enum values as strings
|
const days = [...daysEnum]; // Array of the enum values as strings
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Taylor Simpson](https://unsplash.com/@taylorgsimpson?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -50,5 +50,3 @@ console.dir([
|
|||||||
```
|
```
|
||||||
|
|
||||||
As you can see from the examples above, using the triple equals (`===`) operator is far more predictable and intuitive than the double equals (`==`) operator. Therefore, we recommend you use the triple equals (`===`) operator for most cases, unless you are entirely certain you want type coercion to be applied to the comparison's operands.
|
As you can see from the examples above, using the triple equals (`===`) operator is far more predictable and intuitive than the double equals (`==`) operator. Therefore, we recommend you use the triple equals (`===`) operator for most cases, unless you are entirely certain you want type coercion to be applied to the comparison's operands.
|
||||||
|
|
||||||
**Image credit:** [Evi Radauscher](https://unsplash.com/@eviradauscher?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -84,5 +84,3 @@ Using the event delegation pattern is advantageous for two reasons:
|
|||||||
|
|
||||||
- By using event delegation, we can listen for events on a large amount of elements without having to attach event listeners individually, which can provide performance benefits.
|
- By using event delegation, we can listen for events on a large amount of elements without having to attach event listeners individually, which can provide performance benefits.
|
||||||
- By using event delegation, dynamic elements (i.e. added or removed from the DOM over the course of time) can have their events captured and handled without requiring listeners to be registered or removed.
|
- By using event delegation, dynamic elements (i.e. added or removed from the DOM over the course of time) can have their events captured and handled without requiring listeners to be registered or removed.
|
||||||
|
|
||||||
**Image credit:** [Mega Caesaria](https://unsplash.com/@megacaesaria?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -53,5 +53,3 @@ While `forEach()` only iterates over arrays, it can access both the value and th
|
|||||||
(val, i) => console.log(i) // 0, 1, 2 (array indexes)
|
(val, i) => console.log(i) // 0, 1, 2 (array indexes)
|
||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Tim Stief](https://unsplash.com/@timstief?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -42,5 +42,3 @@ const areEqual = (a, b) => {
|
|||||||
areEqual(largeArray, smallArray); // false
|
areEqual(largeArray, smallArray); // false
|
||||||
// Will only loop until the first mismatch is encountered
|
// Will only loop until the first mismatch is encountered
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Amin Hasani](https://unsplash.com/@aminhasani?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -61,5 +61,3 @@ const printObjTwoAndData = printThisAndData.bind(obj, 2);
|
|||||||
printObjTwoAndData(data); // logs: 0 2 [1, 2, 3]
|
printObjTwoAndData(data); // logs: 0 2 [1, 2, 3]
|
||||||
printObjTwoAndData(...data); // logs: 0 2 1 2 3
|
printObjTwoAndData(...data); // logs: 0 2 1 2 3
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Devon Hawkins](https://unsplash.com/@thelifeofdev?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -26,5 +26,3 @@ const evenSum = data.filter(isEven).reduce(add); // 12
|
|||||||
```
|
```
|
||||||
|
|
||||||
In the above example, we define two simple functions that we then use as callbacks in `Array.prototype.reduce()` and `Array.prototype.filter()` to get the result we want. Both of these functions are higher-order functions, allowing us to create an abstraction layer for any action we might want to perform without having to rewrite how the filtering or reduction algorithm is to be applied every single time.
|
In the above example, we define two simple functions that we then use as callbacks in `Array.prototype.reduce()` and `Array.prototype.filter()` to get the result we want. Both of these functions are higher-order functions, allowing us to create an abstraction layer for any action we might want to perform without having to rewrite how the filtering or reduction algorithm is to be applied every single time.
|
||||||
|
|
||||||
**Image credit:** [Brent Payton](https://unsplash.com/@brentpayton?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -42,5 +42,3 @@ Note that you can also use arrow functions for IIFEs, if you like. Just make sur
|
|||||||
```
|
```
|
||||||
|
|
||||||
IIFEs are often used to run some code, while keeping it and its variables out of the global scope. They are often criticized for lack of readability and how they are confusing to beginners. Additionally, they started going out of fashion with the rise of JavaScript modules and transpilers, so they might be less and less common as time goes by.
|
IIFEs are often used to run some code, while keeping it and its variables out of the global scope. They are often criticized for lack of readability and how they are confusing to beginners. Additionally, they started going out of fashion with the rise of JavaScript modules and transpilers, so they might be less and less common as time goes by.
|
||||||
|
|
||||||
**Image credit:** [Muhammad Ruqi Yaddin](https://unsplash.com/@mruqi?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -42,5 +42,3 @@ const nodeArray = [...nodes]; // [ <!DOCTYPE html>, html ]
|
|||||||
```
|
```
|
||||||
|
|
||||||
Note that the above example is the basis for the [nodeListToArray snippet](js/s/node-list-to-array).
|
Note that the above example is the basis for the [nodeListToArray snippet](js/s/node-list-to-array).
|
||||||
|
|
||||||
**Image credit:** [Holger Link](https://unsplash.com/@photoholgic?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -91,5 +91,3 @@ for(let item of myList.values()) {
|
|||||||
|
|
||||||
In this example, we use the native array iterator of the `data` object to make our `SpecialList` iterable, returning the exact values of the `data` array. Meanwhile, we also define a `values` method, which is an iterator itself, using `Array.prototype.filter()` and `Array.prototype.map()` on the `data` array, then finally returning the `Symbol.iterator` of the result, allowing iteration only over non-empty objects in the sequence and returning just the `value` for each one.
|
In this example, we use the native array iterator of the `data` object to make our `SpecialList` iterable, returning the exact values of the `data` array. Meanwhile, we also define a `values` method, which is an iterator itself, using `Array.prototype.filter()` and `Array.prototype.map()` on the `data` array, then finally returning the `Symbol.iterator` of the result, allowing iteration only over non-empty objects in the sequence and returning just the `value` for each one.
|
||||||
|
|
||||||
|
|
||||||
**Image credit:** [ian dooley](https://unsplash.com/@sadswim?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -58,5 +58,3 @@ listenOnce(
|
|||||||
() => console.log('Hello!')
|
() => console.log('Hello!')
|
||||||
); // 'Hello!' will only be logged on the first click
|
); // 'Hello!' will only be logged on the first click
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Josh Frenette](https://unsplash.com/@joshfrenette?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -29,5 +29,3 @@ class IterableNumber extends Number {
|
|||||||
const num = new IterableNumber(1337);
|
const num = new IterableNumber(1337);
|
||||||
[...num]; // [ 1, 3, 3, 7]
|
[...num]; // [ 1, 3, 3, 7]
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Paweł Czerwiński](https://unsplash.com/@pawel_czerwinski?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -64,5 +64,3 @@ for (let i = 0; i < 100; i ++)
|
|||||||
for (let i = 0; i < 100; i ++)
|
for (let i = 0; i < 100; i ++)
|
||||||
memoizedFibonacci(30); // ~50ms
|
memoizedFibonacci(30); // ~50ms
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Mark Tegethoff](https://unsplash.com/@tegethoff?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -53,5 +53,3 @@ const concatAb = [].concat(a, c); // [1, 2, 3, 'hi']
|
|||||||
As you can see in the above example, the spread operator either throws an error or doesn't output the correct result when passed a non-iterable object. `Array.prototype.concat()` on the other hand has no trouble being passed mixed input.
|
As you can see in the above example, the spread operator either throws an error or doesn't output the correct result when passed a non-iterable object. `Array.prototype.concat()` on the other hand has no trouble being passed mixed input.
|
||||||
|
|
||||||
So what's the verdict? Use the spread operator (`...`) whenever you know your inputs are arrays, as it performs better and is easy to read and understand. Favor `Array.prototype.concat()` when you are uncertain of one or more of the inputs and do not want to add additional checks, as it handles those cases more gracefully.
|
So what's the verdict? Use the spread operator (`...`) whenever you know your inputs are arrays, as it performs better and is easy to read and understand. Favor `Array.prototype.concat()` when you are uncertain of one or more of the inputs and do not want to add additional checks, as it handles those cases more gracefully.
|
||||||
|
|
||||||
**Image credit:** [Edgar Chaparro](https://unsplash.com/@echaparro) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -45,5 +45,3 @@ window.location.replace(nextURL);
|
|||||||
```
|
```
|
||||||
|
|
||||||
As you can see, all three options will cause a page reload, which can be undesirable. Additionally, you can only set the URL, without any additional arguments, unlike using the History API. Finally, the Location API doesn't restrict you to same-origin URLs, which can be the cause of security issues if you are not careful.
|
As you can see, all three options will cause a page reload, which can be undesirable. Additionally, you can only set the URL, without any additional arguments, unlike using the History API. Finally, the Location API doesn't restrict you to same-origin URLs, which can be the cause of security issues if you are not careful.
|
||||||
|
|
||||||
**Image credit:** [Alexander Andrews](https://unsplash.com/@alex_andrews?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -136,5 +136,3 @@ const { default: { key, port}, envType } = environment;
|
|||||||
- Use `*` to import everything a module exports.
|
- Use `*` to import everything a module exports.
|
||||||
- Named exports will be available by their names on the imported object.
|
- Named exports will be available by their names on the imported object.
|
||||||
- Default export will be available as the `default` key on the imported object.
|
- Default export will be available as the `default` key on the imported object.
|
||||||
|
|
||||||
**Image credit:** [roman manukyan](https://unsplash.com/@romanukyan?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -39,5 +39,3 @@ excerpt: Naming conventions, while not easy to enforce, make code easier to read
|
|||||||
|
|
||||||
- Prefix any variable or function with `_` to show intention for it to be private.
|
- Prefix any variable or function with `_` to show intention for it to be private.
|
||||||
- As a convention, this will not prevent other parts of the code from accessing it.
|
- As a convention, this will not prevent other parts of the code from accessing it.
|
||||||
|
|
||||||
**Image credit:** [Paul Hanaoka](https://unsplash.com/@plhnk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -54,5 +54,3 @@ const keepAlive = config.server.keepAlive ?? true;
|
|||||||
```
|
```
|
||||||
|
|
||||||
**Note:** Keep in mind that both features are quite new, so their support might not be great just yet (around 80% at the time of writing [[1]](https://caniuse.com/#feat=mdn-javascript_operators_optional_chaining)[[2]](https://caniuse.com/#feat=mdn-javascript_operators_nullish_coalescing)).
|
**Note:** Keep in mind that both features are quite new, so their support might not be great just yet (around 80% at the time of writing [[1]](https://caniuse.com/#feat=mdn-javascript_operators_optional_chaining)[[2]](https://caniuse.com/#feat=mdn-javascript_operators_nullish_coalescing)).
|
||||||
|
|
||||||
**Image credit:** [Hybrid](https://unsplash.com/@artbyhybrid?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -120,5 +120,3 @@ x.keyOf('B'); // 'b'
|
|||||||
x.keyOf('a'); // null
|
x.keyOf('a'); // null
|
||||||
x.lastKeyOf('c'); // 'c'
|
x.lastKeyOf('c'); // 'c'
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Marek Piwnicki](https://unsplash.com/@marekpiwnicki?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -26,5 +26,3 @@ Object.is(+0, -0); // false
|
|||||||
NaN === NaN; // false
|
NaN === NaN; // false
|
||||||
Object.is(NaN, NaN); // true
|
Object.is(NaN, NaN); // true
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Jonathan Sanchez](https://unsplash.com/@jonathansancheziam?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -14,5 +14,3 @@ const path = `C:\web\index.html`; // 'C:web.html'
|
|||||||
|
|
||||||
const unescapedPath = String.raw`C:\web\index.html`; // 'C:\web\index.html'
|
const unescapedPath = String.raw`C:\web\index.html`; // 'C:\web\index.html'
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Kym MacKinnon](https://unsplash.com/@vixenly?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -47,5 +47,3 @@ class PrimitiveUndefined {
|
|||||||
}
|
}
|
||||||
undefined instanceof PrimitiveUndefined; // true
|
undefined instanceof PrimitiveUndefined; // true
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Max Letek](https://unsplash.com/@blackprojection?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -21,5 +21,3 @@ myPromise().then(logger).catch(identity); // Nothing is logged
|
|||||||
As you can see from this example, swapping the `catch()` and `then()` methods results in entirely different behavior, even though the promise has the same result. This is due to the fact that each chained method will result itself in a promise. This means that the first one will pass its result to the second, the second to the third and so on and so forth. While this might seem obvious when looking at an example like this one, many times it's overlooked and can result in hard to debug issues. This is especially true when the promise chain is long and complicated.
|
As you can see from this example, swapping the `catch()` and `then()` methods results in entirely different behavior, even though the promise has the same result. This is due to the fact that each chained method will result itself in a promise. This means that the first one will pass its result to the second, the second to the third and so on and so forth. While this might seem obvious when looking at an example like this one, many times it's overlooked and can result in hard to debug issues. This is especially true when the promise chain is long and complicated.
|
||||||
|
|
||||||
So, next time you are working with promises, try to think of `then()` and `catch()` methods in terms of promise chaining and remember that order matters!
|
So, next time you are working with promises, try to think of `then()` and `catch()` methods in terms of promise chaining and remember that order matters!
|
||||||
|
|
||||||
**Image credit:** [Raimond Klavins](https://unsplash.com/@raimondklavins?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -42,5 +42,3 @@ new Promise((resolve, reject) => reject(0))
|
|||||||
```
|
```
|
||||||
|
|
||||||
The takeaway here is that you shouldn't substitute `then()` and `finally()` unless there is a very specific reason to do so. As a rule of thumb, `finally()` should be used for cleaning up (clearing timeouts, nulling references, resetting UI state etc.).
|
The takeaway here is that you shouldn't substitute `then()` and `finally()` unless there is a very specific reason to do so. As a rule of thumb, `finally()` should be used for cleaning up (clearing timeouts, nulling references, resetting UI state etc.).
|
||||||
|
|
||||||
**Image credit:** [Raimond Klavins](https://unsplash.com/@raimondklavins?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -16,5 +16,3 @@ const $$ = document.querySelectorAll.bind(document);
|
|||||||
const mainContent = $('.main-content');
|
const mainContent = $('.main-content');
|
||||||
const externalLinks = $$('a[target="_blank"]');
|
const externalLinks = $$('a[target="_blank"]');
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [engin akyurt](https://unsplash.com/@enginakyurt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -63,5 +63,3 @@ const range = (end, start = 0, step = 1) => {
|
|||||||
console.log([...range(7)]); // [0, 1, 2, 3, 4, 5, 6]
|
console.log([...range(7)]); // [0, 1, 2, 3, 4, 5, 6]
|
||||||
for (let i of range(8, 2, 2)) console.log(i); // Logs: 2, 4, 6
|
for (let i of range(8, 2, 2)) console.log(i); // Logs: 2, 4, 6
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Jayphen Simpson](https://unsplash.com/@jayphen?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -57,5 +57,3 @@ const { gender, ...newPet } = pet;
|
|||||||
Object.keys(pet); // ['species', 'age', 'name', 'gender]
|
Object.keys(pet); // ['species', 'age', 'name', 'gender]
|
||||||
Object.keys(newPet); // ['species', 'age', 'name']
|
Object.keys(newPet); // ['species', 'age', 'name']
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Alfred Kenneally](https://unsplash.com/@alken?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -54,5 +54,3 @@ new PrimitiveClass(); // { val: 0 }
|
|||||||
```
|
```
|
||||||
|
|
||||||
The two examples above are not optimal, each for a different reason. The first one is too verbose, as the `this` object is returned implicitly by the constructor anyways, so there is no reason to explicitly write `return this`. On the other hand, the second example doesn't return the `return` statement's value, as it isn't an `object`, therefore resulting in the constructor returning the `this` object instead. This might lead to a lot of confusion, so you should definitely avoid it.
|
The two examples above are not optimal, each for a different reason. The first one is too verbose, as the `this` object is returned implicitly by the constructor anyways, so there is no reason to explicitly write `return this`. On the other hand, the second example doesn't return the `return` statement's value, as it isn't an `object`, therefore resulting in the constructor returning the `this` object instead. This might lead to a lot of confusion, so you should definitely avoid it.
|
||||||
|
|
||||||
**Image credit:** [Luca Bravo](https://unsplash.com/@lucabravo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -47,5 +47,3 @@ clone.b.c = 4;
|
|||||||
While the above example works, it has to serialize and deserialize the whole object, which can significantly impact the performance of your code, so it might not be appropriate for larger objects or in projects where performance is important.
|
While the above example works, it has to serialize and deserialize the whole object, which can significantly impact the performance of your code, so it might not be appropriate for larger objects or in projects where performance is important.
|
||||||
|
|
||||||
Alternatively, you can use a recursive function that deep clones an object and is a lot faster, such as the one in the [deepClone snippet](/js/s/deep-clone). Similarly, if you want a ready-to-use shallow cloning function, you can find one in the [shallowClone snippet](/js/s/shallow-clone).
|
Alternatively, you can use a recursive function that deep clones an object and is a lot faster, such as the one in the [deepClone snippet](/js/s/deep-clone). Similarly, if you want a ready-to-use shallow cloning function, you can find one in the [shallowClone snippet](/js/s/shallow-clone).
|
||||||
|
|
||||||
**Image credit:** [Joshua Ang](https://unsplash.com/@jangus231?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -51,5 +51,3 @@ myObj2.printMsg(); // 'first'
|
|||||||
|
|
||||||
In the above example, you can see that the second time `MySingletonClass` is instantiated, nothing happens, due to the fact that an instance already exists, so it is returned instead of a new object being created. While this is the minimum implementation of a `singletonify` function, it can easily be extended to modify the behavior even further or even use some of the data passed to the constructor in subsequent calls to update the `instance` it holds.
|
In the above example, you can see that the second time `MySingletonClass` is instantiated, nothing happens, due to the fact that an instance already exists, so it is returned instead of a new object being created. While this is the minimum implementation of a `singletonify` function, it can easily be extended to modify the behavior even further or even use some of the data passed to the constructor in subsequent calls to update the `instance` it holds.
|
||||||
|
|
||||||
|
|
||||||
**Image credit:** [David Watkis](https://unsplash.com/@david_watkis?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -60,5 +60,3 @@ const printNums = async() => {
|
|||||||
|
|
||||||
printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)
|
printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Kate Stone Matheson](https://unsplash.com/@kstonematheson?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -50,5 +50,3 @@ const data = [4, 5, 6];
|
|||||||
// Spread operator, expanding the array
|
// Spread operator, expanding the array
|
||||||
fn('hey', ...data); // 'hey_456', `nums` will be [4, 5, 6]
|
fn('hey', ...data); // 'hey_456', `nums` will be [4, 5, 6]
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Nicolas Cool](https://unsplash.com/@shotz?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -23,5 +23,3 @@ myElement.hidden = false;
|
|||||||
```
|
```
|
||||||
|
|
||||||
Note that, while this trick may come in handy, it comes with the caveat that if you later remove the DOM element and you still have it stored in a variable, the variable should be set to `null` to avoid potential memory leaks.
|
Note that, while this trick may come in handy, it comes with the caveat that if you later remove the DOM element and you still have it stored in a variable, the variable should be set to `null` to avoid potential memory leaks.
|
||||||
|
|
||||||
**Image credit:** [Amin Hasani](https://unsplash.com/@aminhasani?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -33,5 +33,3 @@ let b = 20;
|
|||||||
|
|
||||||
[a , b] = [b, a];
|
[a , b] = [b, a];
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [roman manukyan](https://unsplash.com/@romanukyan?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -105,5 +105,3 @@ const fruitSwitch = switchFn(logFruit, 'default');
|
|||||||
fruitSwitch('apples'); // Logs: 'Known fruit'
|
fruitSwitch('apples'); // Logs: 'Known fruit'
|
||||||
fruitSwitch('pineapples'); // Logs: 'Unknown fruit'
|
fruitSwitch('pineapples'); // Logs: 'Unknown fruit'
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Louis Droege](https://unsplash.com/@lois184?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -28,5 +28,3 @@ This might be a problem if the external resource is not trustworthy, might have
|
|||||||
```
|
```
|
||||||
|
|
||||||
In order to prevent a link that is opened in a new tab from causing any trouble, we should always add the `rel="noopener noreferrer"` attribute to all of our `target="_blank"` links.
|
In order to prevent a link that is opened in a new tab from causing any trouble, we should always add the `rel="noopener noreferrer"` attribute to all of our `target="_blank"` links.
|
||||||
|
|
||||||
**Image credit:** [James Harrison](https://unsplash.com/@jstrippa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -44,5 +44,3 @@ const ItemListTitle = (count) => (
|
|||||||
```
|
```
|
||||||
|
|
||||||
Finally, you might be wondering why it's called the "ternary" operator. The word "ternary" is based on the [n-ary word setup](https://en.wikipedia.org/wiki/Arity) and means an operator with three operands (condition, expression to execute if truthy, expression to execute if falsy).
|
Finally, you might be wondering why it's called the "ternary" operator. The word "ternary" is based on the [n-ary word setup](https://en.wikipedia.org/wiki/Arity) and means an operator with three operands (condition, expression to execute if truthy, expression to execute if falsy).
|
||||||
|
|
||||||
**Image credit:** [Scott Webb](https://unsplash.com/@scottwebb?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -138,5 +138,3 @@ function f() {
|
|||||||
|
|
||||||
console.log(f.call({foo: 'hi'})); // 'hi'
|
console.log(f.call({foo: 'hi'})); // 'hi'
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Prateek Katyal](https://unsplash.com/@prateekkatyal?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -36,5 +36,3 @@ console.log(x); // null
|
|||||||
### Checking for empty states
|
### Checking for empty states
|
||||||
|
|
||||||
Undeclared variables will throw an error, which makes them easy to spot and are not very common anyways. `undefined` and `null` can be easily spotted with a conditional as they are both falsy values. Due to that, `null` and `undefined` are loosely equal (`==`), but not strictly equal (`===`).
|
Undeclared variables will throw an error, which makes them easy to spot and are not very common anyways. `undefined` and `null` can be easily spotted with a conditional as they are both falsy values. Due to that, `null` and `undefined` are loosely equal (`==`), but not strictly equal (`===`).
|
||||||
|
|
||||||
**Image credit:** [Theodor Lundqvist](https://unsplash.com/@umbriferous?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -21,5 +21,3 @@ quantity = quantityInput.valueAsNumber;
|
|||||||
```
|
```
|
||||||
|
|
||||||
As usual, this comes with a caveat which is that it only works for `type="number"` inputs (although that's probably where you need it the most). On a side note, you can also use `HTMLInputElement.valueAsDate` to get a `Date` object from a `type="date"` input, which might also come in handy in some cases.
|
As usual, this comes with a caveat which is that it only works for `type="number"` inputs (although that's probably where you need it the most). On a side note, you can also use `HTMLInputElement.valueAsDate` to get a `Date` object from a `type="date"` input, which might also come in handy in some cases.
|
||||||
|
|
||||||
**Image credit:** [Stefen Tan](https://unsplash.com/@stefentan?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -66,5 +66,3 @@ Generally, `const` and `let` provide more of a headache-free experience for a va
|
|||||||
- Always define variables, functions, objects and classes before using them. ESLint can probably help you with that.
|
- Always define variables, functions, objects and classes before using them. ESLint can probably help you with that.
|
||||||
- If your environment/team allows it, prefer `const` and `let`over `var` to minimize headaches.
|
- If your environment/team allows it, prefer `const` and `let`over `var` to minimize headaches.
|
||||||
- If possible, use only arrow functions or `function` declarations. Consistency can help reduce confusion.
|
- If possible, use only arrow functions or `function` declarations. Consistency can help reduce confusion.
|
||||||
|
|
||||||
**Image credit:** [Drew Dau](https://unsplash.com/@daunation?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -26,5 +26,3 @@ When we talk about scope, we mean the visibility of one or more entities (e.g va
|
|||||||
**Global scope**: Variables defined globally (i.e. not inside a block or function) are part of the global scope and can be accessed from anywhere in the code. When declared in the global scope, `var`, `let` and `const` behave the same in terms of scope.
|
**Global scope**: Variables defined globally (i.e. not inside a block or function) are part of the global scope and can be accessed from anywhere in the code. When declared in the global scope, `var`, `let` and `const` behave the same in terms of scope.
|
||||||
|
|
||||||
**Local scope**: Variables defined inside a block or function can only be accessed from the block or function where they were defined, as well as nested local scopes. When declared inside a block scope, `var` will be available but `undefined` in outer scopes, while `let` and `const` will not exist in outer scopes. When declared inside a function scope, `var`, `let` and `const` will all be non-existent in outer scopes.
|
**Local scope**: Variables defined inside a block or function can only be accessed from the block or function where they were defined, as well as nested local scopes. When declared inside a block scope, `var` will be available but `undefined` in outer scopes, while `let` and `const` will not exist in outer scopes. When declared inside a function scope, `var`, `let` and `const` will all be non-existent in outer scopes.
|
||||||
|
|
||||||
**Image credit:** [Jp Valery](https://unsplash.com/@jpvalery?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -14,5 +14,3 @@ Generally, you want to avoid `href="javascript:void(0)"`, as it will cause the b
|
|||||||
With that out of the way, it's clear that `href=""` or `href="#"` should be preferred in most cases. One key difference between the two is that `href="#"` points to the top of the page whereas `href=""` points to the current page. This can have unwanted side-effects, such as scrolling to the top of the page or issues with link styling respectively. To prevent either one of them from acting as links, you can use `Event.preventDefault()` and handle them appropriately using JavaScript.
|
With that out of the way, it's clear that `href=""` or `href="#"` should be preferred in most cases. One key difference between the two is that `href="#"` points to the top of the page whereas `href=""` points to the current page. This can have unwanted side-effects, such as scrolling to the top of the page or issues with link styling respectively. To prevent either one of them from acting as links, you can use `Event.preventDefault()` and handle them appropriately using JavaScript.
|
||||||
|
|
||||||
Finally, when creating an empty link, one should always consider more semantically appropriate alternatives, such as a `<button>`, `<div>` or `<span>` tag. After all, a link should always behave like a link and hijacking it with JavaScript or any other means is bound to run into some accessibility problems sooner or later.
|
Finally, when creating an empty link, one should always consider more semantically appropriate alternatives, such as a `<button>`, `<div>` or `<span>` tag. After all, a link should always behave like a link and hijacking it with JavaScript or any other means is bound to run into some accessibility problems sooner or later.
|
||||||
|
|
||||||
**Image credit:** [Malachi Brooks](https://unsplash.com/@mebrooks01?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -17,5 +17,3 @@ Math.min(...nums); // 1
|
|||||||
```
|
```
|
||||||
|
|
||||||
For more complex cases (i.e. finding the min/max value in an array of objects), you might have to resort to `Array.prototype.map()` or `Array.prototype.reduce()`, but our [minBy](/js/s/min-by) or [maxBy](/js/s/max-by) snippets might be all you need.
|
For more complex cases (i.e. finding the min/max value in an array of objects), you might have to resort to `Array.prototype.map()` or `Array.prototype.reduce()`, but our [minBy](/js/s/min-by) or [maxBy](/js/s/max-by) snippets might be all you need.
|
||||||
|
|
||||||
**Image credit:** [Luke Porter](https://unsplash.com/@lukeporter?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -38,5 +38,3 @@ arr.sort((a, b) => a.localeCompare(b)); // ['Hello', 'Hi', 'Hola']
|
|||||||
// Sort in descending order
|
// Sort in descending order
|
||||||
arr.sort((a, b) => b.localeCompare(a)); // ['Hola', 'Hi', 'Hello']
|
arr.sort((a, b) => b.localeCompare(a)); // ['Hola', 'Hi', 'Hello']
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Andra Ion](https://unsplash.com/@amiion?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -16,5 +16,3 @@ const nums = [1, 2, 2, 3, 1, 2, 4, 5, 4, 2, 6];
|
|||||||
```
|
```
|
||||||
|
|
||||||
You can wrap this in a helper method, which is exactly what the [uniqueElements](/js/s/unique-elements) snippet does. For more complex cases, such as unique objects in an array based on a specific key, you might want to take a look at [uniqueElementsBy](/js/s/unique-elements-by).
|
You can wrap this in a helper method, which is exactly what the [uniqueElements](/js/s/unique-elements) snippet does. For more complex cases, such as unique objects in an array based on a specific key, you might want to take a look at [uniqueElementsBy](/js/s/unique-elements-by).
|
||||||
|
|
||||||
**Image credit:** [Luca Bravo](https://unsplash.com/@lucabravo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -16,5 +16,3 @@ This exact behavior is already part of the HTML standard in the form of the `loa
|
|||||||
```
|
```
|
||||||
|
|
||||||
**Caveat:** At the time of writing, the `loading` attribute is supported in most modern browsers, except for Safari, but not in legacy browsers, such as IE. On that note, lazy loading can be seen as a progressive enhancement for browsers that support it, so it's still worth adding for any users that can benefit from it.
|
**Caveat:** At the time of writing, the `loading` attribute is supported in most modern browsers, except for Safari, but not in legacy browsers, such as IE. On that note, lazy loading can be seen as a progressive enhancement for browsers that support it, so it's still worth adding for any users that can benefit from it.
|
||||||
|
|
||||||
**Image credit:** [watcharlie](https://unsplash.com/@watcharlie?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -16,5 +16,3 @@ Node.js can be debugged using Chrome Developer Tools since `v6.3.0`. Here's a qu
|
|||||||
5. Use the Developer Tools to debug your Node.js application!
|
5. Use the Developer Tools to debug your Node.js application!
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
**Image credit:** [David Clode](https://unsplash.com/@davidclode?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -18,5 +18,3 @@ The HTML `autocomplete` attribute provides a wide variety of options for `<input
|
|||||||
```
|
```
|
||||||
|
|
||||||
Additionally, if the form contains a second password field asking the user to retype the newly created password, `autocomplete="new-password"` should be used for both of the password fields.
|
Additionally, if the form contains a second password field asking the user to retype the newly created password, `autocomplete="new-password"` should be used for both of the password fields.
|
||||||
|
|
||||||
**Image credit:** [Alberto Barrera](https://unsplash.com/@abarro?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -12,5 +12,3 @@ We have all experienced a website interaction that feels sluggish or otherwise o
|
|||||||
> Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
|
> Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
|
||||||
|
|
||||||
The **magic number** of `0.4s` sounds like a very reasonable threshold, but take a look at any of your favorite websites and you'll notice that most `transition-duration` or `animation-duration` values are closer to `0.3s`. This might have something to do with our more recent expectation of what a fast interaction should feel like - after all the relevant research paper was published in 1982.
|
The **magic number** of `0.4s` sounds like a very reasonable threshold, but take a look at any of your favorite websites and you'll notice that most `transition-duration` or `animation-duration` values are closer to `0.3s`. This might have something to do with our more recent expectation of what a fast interaction should feel like - after all the relevant research paper was published in 1982.
|
||||||
|
|
||||||
**Image credit:** [Josh Calabrese](https://unsplash.com/@joshcala?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -26,5 +26,3 @@ Similarly, you can preload assets using the `rel="preload"` attribute, which are
|
|||||||
```
|
```
|
||||||
|
|
||||||
The only downside to preloading resources compared to prefetching is that [browser support](https://caniuse.com/#search=preload) might be low depending on when you are reading this.
|
The only downside to preloading resources compared to prefetching is that [browser support](https://caniuse.com/#search=preload) might be low depending on when you are reading this.
|
||||||
|
|
||||||
**Image credit:** [Dominik Kempf](https://unsplash.com/@dominik_kempf?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -19,5 +19,3 @@ c = { 'min': 50 }
|
|||||||
a['min'] + b['min'] + c['min'] # throws KeyError
|
a['min'] + b['min'] + c['min'] # throws KeyError
|
||||||
a.get('min', 0) + b.get('min', 0) + c.get('min', 0) # 150
|
a.get('min', 0) + b.get('min', 0) + c.get('min', 0) # 150
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Danielle MacInnes](https://unsplash.com/@dsmacinnes?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -28,5 +28,3 @@ age = 32
|
|||||||
|
|
||||||
print('{0} is {1} years old'.format(name, age)) # 'John is 32 years old'
|
print('{0} is {1} years old'.format(name, age)) # 'John is 32 years old'
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Maksim Shutov](https://unsplash.com/@maksimshutov?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -41,5 +41,3 @@ print([
|
|||||||
x is z # False
|
x is z # False
|
||||||
])
|
])
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [cyril mazarin](https://unsplash.com/@cyril_m?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -26,5 +26,3 @@ Python's lists and tuples may seem pretty similar in syntax and function, howeve
|
|||||||
### When to use each one
|
### When to use each one
|
||||||
|
|
||||||
Lists provide a more accessible API and should be used whenever similar types of objects need to be stored and are expected to change over the course of the application's execution. On the other hand, tuples should be used for immutable data, behaving more like constants than variables.
|
Lists provide a more accessible API and should be used whenever similar types of objects need to be stored and are expected to change over the course of the application's execution. On the other hand, tuples should be used for immutable data, behaving more like constants than variables.
|
||||||
|
|
||||||
**Image credit:** [Hasan Almasi](https://unsplash.com/@hasanalmasi?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
@ -30,5 +30,3 @@ Python 3 introduced `str.casefold()`, which is very similar to `str.lower()`, bu
|
|||||||
# Returns the correct result when used for unicode case-insensitive matching
|
# Returns the correct result when used for unicode case-insensitive matching
|
||||||
'Straße'.upper().casefold() == 'Straße'.casefold() # True
|
'Straße'.upper().casefold() == 'Straße'.casefold() # True
|
||||||
```
|
```
|
||||||
|
|
||||||
**Image credit:** [Natalia Y](https://unsplash.com/@foxfox?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
|
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user