diff --git a/blog_posts/10-vs-code-extensions-for-js-developers.md b/blog_posts/10-vs-code-extensions-for-js-developers.md index fadfa5d58..275125da8 100644 --- a/blog_posts/10-vs-code-extensions-for-js-developers.md +++ b/blog_posts/10-vs-code-extensions-for-js-developers.md @@ -38,5 +38,3 @@ Developers will most likely argue for the rest of eternity about the most produc 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. - -**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) diff --git a/blog_posts/25-css-gradients.md b/blog_posts/25-css-gradients.md index 6c08175e8..c630d8edd 100644 --- a/blog_posts/25-css-gradients.md +++ b/blog_posts/25-css-gradients.md @@ -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); } ``` - -**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) diff --git a/blog_posts/4-javascript-array-methods.md b/blog_posts/4-javascript-array-methods.md index 20f2db88f..ad3ba97b4 100644 --- a/blog_posts/4-javascript-array-methods.md +++ b/blog_posts/4-javascript-array-methods.md @@ -54,5 +54,3 @@ const arr = [1, 2, 3]; const isOdd = x => x % 2 === 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) diff --git a/blog_posts/4-seo-tips-for-developers.md b/blog_posts/4-seo-tips-for-developers.md index 2c7332613..4ce2d4c1e 100644 --- a/blog_posts/4-seo-tips-for-developers.md +++ b/blog_posts/4-seo-tips-for-developers.md @@ -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 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) diff --git a/blog_posts/5-tips-for-better-pull-requests.md b/blog_posts/5-tips-for-better-pull-requests.md index 5df1134f3..373b98d55 100644 --- a/blog_posts/5-tips-for-better-pull-requests.md +++ b/blog_posts/5-tips-for-better-pull-requests.md @@ -24,5 +24,3 @@ Before submitting your pull request for review, always take the time to review i 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. - -**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) diff --git a/blog_posts/6-javascript-regexp-tricks.md b/blog_posts/6-javascript-regexp-tricks.md index 1c254c391..0207e6fa9 100644 --- a/blog_posts/6-javascript-regexp-tricks.md +++ b/blog_posts/6-javascript-regexp-tricks.md @@ -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) diff --git a/blog_posts/6-tips-for-your-next-remote-onboarding.md b/blog_posts/6-tips-for-your-next-remote-onboarding.md index 7a0db1e2b..38f7c770e 100644 --- a/blog_posts/6-tips-for-your-next-remote-onboarding.md +++ b/blog_posts/6-tips-for-your-next-remote-onboarding.md @@ -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. - 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) diff --git a/blog_posts/7-chrome-extensions-for-web-developers.md b/blog_posts/7-chrome-extensions-for-web-developers.md index 2107aad06..e339cbe20 100644 --- a/blog_posts/7-chrome-extensions-for-web-developers.md +++ b/blog_posts/7-chrome-extensions-for-web-developers.md @@ -29,5 +29,3 @@ Google Chrome's developer tools are nothing short of amazing, but there are a fe 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. - -**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) diff --git a/blog_posts/8-tips-for-accessible-websites.md b/blog_posts/8-tips-for-accessible-websites.md index 56050f2fd..e9054550c 100644 --- a/blog_posts/8-tips-for-accessible-websites.md +++ b/blog_posts/8-tips-for-accessible-websites.md @@ -30,5 +30,3 @@ Responsiveness is often thought in terms of screen size or mobile vs desktop, bu 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. - -**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) diff --git a/blog_posts/8-tips-for-remote-work.md b/blog_posts/8-tips-for-remote-work.md index 4db658cb8..ce22d6c4d 100644 --- a/blog_posts/8-tips-for-remote-work.md +++ b/blog_posts/8-tips-for-remote-work.md @@ -33,5 +33,3 @@ Working from home has its own challenges and issues, so try to find the right to 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. - -**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) diff --git a/blog_posts/async-javascript-cheatsheet.md b/blog_posts/async-javascript-cheatsheet.md index 26571eb75..c41df8a20 100644 --- a/blog_posts/async-javascript-cheatsheet.md +++ b/blog_posts/async-javascript-cheatsheet.md @@ -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) diff --git a/blog_posts/benefits-of-writing.md b/blog_posts/benefits-of-writing.md index d3e4b770e..7596622ab 100644 --- a/blog_posts/benefits-of-writing.md +++ b/blog_posts/benefits-of-writing.md @@ -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. 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) diff --git a/blog_posts/breaking-react.md b/blog_posts/breaking-react.md index 5e1bb6779..7532d6ac7 100644 --- a/blog_posts/breaking-react.md +++ b/blog_posts/breaking-react.md @@ -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. 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) diff --git a/blog_posts/code-anatomy-chaining-reduce-for-loop.md b/blog_posts/code-anatomy-chaining-reduce-for-loop.md index 67a70b134..625702a15 100644 --- a/blog_posts/code-anatomy-chaining-reduce-for-loop.md +++ b/blog_posts/code-anatomy-chaining-reduce-for-loop.md @@ -72,5 +72,3 @@ const filePaths = files - Declarative, easier to read and refactor, chain can grow as necessary. - Does not use `Array.prototype.push()` or the spread (`...`) operator. - `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) diff --git a/blog_posts/code-anatomy-optimizing-recursion.md b/blog_posts/code-anatomy-optimizing-recursion.md index 56bd5bf04..f25477972 100644 --- a/blog_posts/code-anatomy-optimizing-recursion.md +++ b/blog_posts/code-anatomy-optimizing-recursion.md @@ -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. 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) diff --git a/blog_posts/code-anatomy-performant-python.md b/blog_posts/code-anatomy-performant-python.md index b51730159..4eb0d7705 100644 --- a/blog_posts/code-anatomy-performant-python.md +++ b/blog_posts/code-anatomy-performant-python.md @@ -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. 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) diff --git a/blog_posts/console-log-cheatsheet.md b/blog_posts/console-log-cheatsheet.md index 1ebb6e253..6a52f97fa 100644 --- a/blog_posts/console-log-cheatsheet.md +++ b/blog_posts/console-log-cheatsheet.md @@ -115,5 +115,3 @@ console.log( '' // 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) diff --git a/blog_posts/cookies-local-storage-session.md b/blog_posts/cookies-local-storage-session.md index 923046703..601432207 100644 --- a/blog_posts/cookies-local-storage-session.md +++ b/blog_posts/cookies-local-storage-session.md @@ -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 | | Blockable 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) diff --git a/blog_posts/copy-text-to-clipboard-with-javascript.md b/blog_posts/copy-text-to-clipboard-with-javascript.md index 7459f7d26..5787a6210 100644 --- a/blog_posts/copy-text-to-clipboard-with-javascript.md +++ b/blog_posts/copy-text-to-clipboard-with-javascript.md @@ -53,5 +53,3 @@ const copyToClipboard = str => { ### 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/). - -**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) diff --git a/blog_posts/css-centering.md b/blog_posts/css-centering.md index f728a8c5e..127b8b26c 100644 --- a/blog_posts/css-centering.md +++ b/blog_posts/css-centering.md @@ -22,5 +22,3 @@ Transform centering uses, as the name implies, CSS transforms to center an eleme ### 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. - -**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) diff --git a/blog_posts/css-easing-variables.md b/blog_posts/css-easing-variables.md index 49700ec76..17647d3c4 100644 --- a/blog_posts/css-easing-variables.md +++ b/blog_posts/css-easing-variables.md @@ -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); } ``` - -**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) diff --git a/blog_posts/css-pseudo-classes.md b/blog_posts/css-pseudo-classes.md index d981e9205..9d7ea0fcc 100644 --- a/blog_posts/css-pseudo-classes.md +++ b/blog_posts/css-pseudo-classes.md @@ -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 - `: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 - -**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) diff --git a/blog_posts/css-units-cheatsheet.md b/blog_posts/css-units-cheatsheet.md index 93aa939b8..a2afe1135 100644 --- a/blog_posts/css-units-cheatsheet.md +++ b/blog_posts/css-units-cheatsheet.md @@ -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) - `cm`: Centimeters `1cm` = `96px` / `2.54` = `37.8px` (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) diff --git a/blog_posts/css-variables.md b/blog_posts/css-variables.md index 08c116c80..3e04e1c59 100644 --- a/blog_posts/css-variables.md +++ b/blog_posts/css-variables.md @@ -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). - CSS variables are case sensitive, so mind your capitalization. They can also be inlined in HTML like any other style (e.g. `
`). - 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) diff --git a/blog_posts/custom-file-download-names.md b/blog_posts/custom-file-download-names.md index 563d353ee..813c946fc 100644 --- a/blog_posts/custom-file-download-names.md +++ b/blog_posts/custom-file-download-names.md @@ -13,5 +13,3 @@ HTML5 introduced a variety of convenient features that many of us use every day. June 2020 ``` - -**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) diff --git a/blog_posts/detect-caps-lock-is-on.md b/blog_posts/detect-caps-lock-is-on.md index 892256666..a6b3cc859 100644 --- a/blog_posts/detect-caps-lock-is-on.md +++ b/blog_posts/detect-caps-lock-is-on.md @@ -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. - -**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) diff --git a/blog_posts/eslint-refactor-for-in.md b/blog_posts/eslint-refactor-for-in.md index 42793a47d..9c4cdff4d 100644 --- a/blog_posts/eslint-refactor-for-in.md +++ b/blog_posts/eslint-refactor-for-in.md @@ -45,5 +45,3 @@ const data = [3, 4]; Object.entries(data).forEach(e => console.log(e[0], e[1])); // [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) diff --git a/blog_posts/flexbox-cheatsheet.md b/blog_posts/flexbox-cheatsheet.md index 6d7523c5d..bef45c7a7 100644 --- a/blog_posts/flexbox-cheatsheet.md +++ b/blog_posts/flexbox-cheatsheet.md @@ -76,5 +76,3 @@ excerpt: Flexbox allows you to create fluid layouts easily. If you find yourself - Accepts an integer value - Items in a container are sorted by ascending `order` value and then by their source code order - 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) diff --git a/blog_posts/git-aliases.md b/blog_posts/git-aliases.md index 6c3a1998d..c44f760f1 100644 --- a/blog_posts/git-aliases.md +++ b/blog_posts/git-aliases.md @@ -48,5 +48,3 @@ Additionally, you can use [edit the configuration file](/git/s/edit-config) and apply = stash apply 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) diff --git a/blog_posts/git-commit-different-date.md b/blog_posts/git-commit-different-date.md index 4217421f0..2209c9d8b 100644 --- a/blog_posts/git-commit-different-date.md +++ b/blog_posts/git-commit-different-date.md @@ -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'`). - -**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) diff --git a/blog_posts/github-co-authors.md b/blog_posts/github-co-authors.md index 6bb6f8b4a..36f66bc90 100644 --- a/blog_posts/github-co-authors.md +++ b/blog_posts/github-co-authors.md @@ -22,5 +22,3 @@ Co-authored-by: another-name " - 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. - 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) diff --git a/blog_posts/http-status-codes-cheatsheet.md b/blog_posts/http-status-codes-cheatsheet.md index 8d93c57ea..b478ce584 100644 --- a/blog_posts/http-status-codes-cheatsheet.md +++ b/blog_posts/http-status-codes-cheatsheet.md @@ -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 - **503**: Service Unavailable - Server temporarily unable to handle request - **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) diff --git a/blog_posts/javascript-array-comparison.md b/blog_posts/javascript-array-comparison.md index e7235c4e1..618a44629 100644 --- a/blog_posts/javascript-array-comparison.md +++ b/blog_posts/javascript-array-comparison.md @@ -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). - -**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) diff --git a/blog_posts/javascript-arrow-function-event-listeners.md b/blog_posts/javascript-arrow-function-event-listeners.md index d7b4d605a..2d744898a 100644 --- a/blog_posts/javascript-arrow-function-event-listeners.md +++ b/blog_posts/javascript-arrow-function-event-listeners.md @@ -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) diff --git a/blog_posts/javascript-arrow-functions.md b/blog_posts/javascript-arrow-functions.md index bce667f1a..18b7cfdac 100644 --- a/blog_posts/javascript-arrow-functions.md +++ b/blog_posts/javascript-arrow-functions.md @@ -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. 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) diff --git a/blog_posts/javascript-async-array-loops.md b/blog_posts/javascript-async-array-loops.md index c360cfb60..2e82bfd18 100644 --- a/blog_posts/javascript-async-array-loops.md +++ b/blog_posts/javascript-async-array-loops.md @@ -89,5 +89,3 @@ const uppercaseItems = async () => { uppercaseItems(); // 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) diff --git a/blog_posts/javascript-await-timeout.md b/blog_posts/javascript-await-timeout.md index 8d79c7c37..a86513f78 100644 --- a/blog_posts/javascript-await-timeout.md +++ b/blog_posts/javascript-await-timeout.md @@ -102,5 +102,3 @@ const myFunc = async () => { // 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 ``` - -**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) diff --git a/blog_posts/javascript-boolean-function.md b/blog_posts/javascript-boolean-function.md index 6d902b7e0..f818259f6 100644 --- a/blog_posts/javascript-boolean-function.md +++ b/blog_posts/javascript-boolean-function.md @@ -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. - -**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) diff --git a/blog_posts/javascript-closures.md b/blog_posts/javascript-closures.md index db9091bf0..ae9ee1f52 100644 --- a/blog_posts/javascript-closures.md +++ b/blog_posts/javascript-closures.md @@ -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. 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) diff --git a/blog_posts/javascript-copy-array.md b/blog_posts/javascript-copy-array.md index e23fbee24..3755fa911 100644 --- a/blog_posts/javascript-copy-array.md +++ b/blog_posts/javascript-copy-array.md @@ -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 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) diff --git a/blog_posts/javascript-deep-freeze-object.md b/blog_posts/javascript-deep-freeze-object.md index e0a5e86e9..76cf1d0de 100644 --- a/blog_posts/javascript-deep-freeze-object.md +++ b/blog_posts/javascript-deep-freeze-object.md @@ -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. - -**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) diff --git a/blog_posts/javascript-destructuring-assignment.md b/blog_posts/javascript-destructuring-assignment.md index ab7048c3c..036010fa9 100644 --- a/blog_posts/javascript-destructuring-assignment.md +++ b/blog_posts/javascript-destructuring-assignment.md @@ -66,5 +66,3 @@ const { ...restData // restData = { '1': 'b', '3': 'd', '4': 'e', '5': 'f' } } = 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) diff --git a/blog_posts/javascript-empty-array.md b/blog_posts/javascript-empty-array.md index 72ef4d9b4..20838105e 100644 --- a/blog_posts/javascript-empty-array.md +++ b/blog_posts/javascript-empty-array.md @@ -44,5 +44,3 @@ Last but not least, using `Array.prototype.pop()` is another, more old-fashioned let a = [1, 2, 3, 4]; 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) diff --git a/blog_posts/javascript-encodeuri-encodeuricomponent.md b/blog_posts/javascript-encodeuri-encodeuricomponent.md index d867c702e..63f296979 100644 --- a/blog_posts/javascript-encodeuri-encodeuricomponent.md +++ b/blog_posts/javascript-encodeuri-encodeuricomponent.md @@ -36,5 +36,3 @@ encodeURI(partOfURL); // Bad, does not escape all special characters encodeURI(fullURL); // Good, encoded URL is valid // '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) diff --git a/blog_posts/javascript-enum.md b/blog_posts/javascript-enum.md index 523438238..38f293d8f 100644 --- a/blog_posts/javascript-enum.md +++ b/blog_posts/javascript-enum.md @@ -55,5 +55,3 @@ const daysEnum = new Enum( 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) diff --git a/blog_posts/javascript-equality.md b/blog_posts/javascript-equality.md index 4f772bcda..5f555c3ba 100644 --- a/blog_posts/javascript-equality.md +++ b/blog_posts/javascript-equality.md @@ -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. - -**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) diff --git a/blog_posts/javascript-event-bubbling-capturing-delegation.md b/blog_posts/javascript-event-bubbling-capturing-delegation.md index 56519af96..67b71fa7c 100644 --- a/blog_posts/javascript-event-bubbling-capturing-delegation.md +++ b/blog_posts/javascript-event-bubbling-capturing-delegation.md @@ -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, 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) diff --git a/blog_posts/javascript-for-in-for-of-foreach.md b/blog_posts/javascript-for-in-for-of-foreach.md index d33861e63..5f9b14cf6 100644 --- a/blog_posts/javascript-for-in-for-of-foreach.md +++ b/blog_posts/javascript-for-in-for-of-foreach.md @@ -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) ); ``` - -**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) diff --git a/blog_posts/javascript-for-loop-early-break.md b/blog_posts/javascript-for-loop-early-break.md index 46a4a8fc2..33eca432c 100644 --- a/blog_posts/javascript-for-loop-early-break.md +++ b/blog_posts/javascript-for-loop-early-break.md @@ -42,5 +42,3 @@ const areEqual = (a, b) => { areEqual(largeArray, smallArray); // false // 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) diff --git a/blog_posts/javascript-function-call-apply-bind.md b/blog_posts/javascript-function-call-apply-bind.md index ef602b38b..c237eb0cd 100644 --- a/blog_posts/javascript-function-call-apply-bind.md +++ b/blog_posts/javascript-function-call-apply-bind.md @@ -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 ``` - -**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) diff --git a/blog_posts/javascript-higher-order-functions.md b/blog_posts/javascript-higher-order-functions.md index 99a8c67b3..357ff1564 100644 --- a/blog_posts/javascript-higher-order-functions.md +++ b/blog_posts/javascript-higher-order-functions.md @@ -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. - -**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) diff --git a/blog_posts/javascript-iife.md b/blog_posts/javascript-iife.md index abf65e340..d4c954068 100644 --- a/blog_posts/javascript-iife.md +++ b/blog_posts/javascript-iife.md @@ -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. - -**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) diff --git a/blog_posts/javascript-iterable-to-array.md b/blog_posts/javascript-iterable-to-array.md index 9e67b5e43..f95582dcd 100644 --- a/blog_posts/javascript-iterable-to-array.md +++ b/blog_posts/javascript-iterable-to-array.md @@ -42,5 +42,3 @@ const nodeArray = [...nodes]; // [ , html ] ``` 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) diff --git a/blog_posts/javascript-iterators.md b/blog_posts/javascript-iterators.md index f14b78539..986d73b2b 100644 --- a/blog_posts/javascript-iterators.md +++ b/blog_posts/javascript-iterators.md @@ -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. - -**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) diff --git a/blog_posts/javascript-listen-once.md b/blog_posts/javascript-listen-once.md index f0122921a..e9b61cb07 100644 --- a/blog_posts/javascript-listen-once.md +++ b/blog_posts/javascript-listen-once.md @@ -58,5 +58,3 @@ listenOnce( () => console.log('Hello!') ); // '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) diff --git a/blog_posts/javascript-make-iterable.md b/blog_posts/javascript-make-iterable.md index 18d48236b..9cc8e4194 100644 --- a/blog_posts/javascript-make-iterable.md +++ b/blog_posts/javascript-make-iterable.md @@ -29,5 +29,3 @@ class IterableNumber extends Number { const num = new IterableNumber(1337); [...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) diff --git a/blog_posts/javascript-memoization.md b/blog_posts/javascript-memoization.md index 87d820229..7c64e1dca 100644 --- a/blog_posts/javascript-memoization.md +++ b/blog_posts/javascript-memoization.md @@ -64,5 +64,3 @@ for (let i = 0; i < 100; i ++) for (let i = 0; i < 100; i ++) 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) diff --git a/blog_posts/javascript-merge-arrays.md b/blog_posts/javascript-merge-arrays.md index 76a6ccde5..86cabbba6 100644 --- a/blog_posts/javascript-merge-arrays.md +++ b/blog_posts/javascript-merge-arrays.md @@ -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. 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) diff --git a/blog_posts/javascript-modify-url-without-reload.md b/blog_posts/javascript-modify-url-without-reload.md index 67dc0c6d5..fc05f1260 100644 --- a/blog_posts/javascript-modify-url-without-reload.md +++ b/blog_posts/javascript-modify-url-without-reload.md @@ -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. - -**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) diff --git a/blog_posts/javascript-module-cheatsheet.md b/blog_posts/javascript-module-cheatsheet.md index 1af14448c..ee7d179ca 100644 --- a/blog_posts/javascript-module-cheatsheet.md +++ b/blog_posts/javascript-module-cheatsheet.md @@ -136,5 +136,3 @@ const { default: { key, port}, envType } = environment; - Use `*` to import everything a module exports. - 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. - -**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) diff --git a/blog_posts/javascript-naming-conventions.md b/blog_posts/javascript-naming-conventions.md index 778e22db2..735f589f7 100644 --- a/blog_posts/javascript-naming-conventions.md +++ b/blog_posts/javascript-naming-conventions.md @@ -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. - 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) diff --git a/blog_posts/javascript-nullish-coalescing-optional-chaining.md b/blog_posts/javascript-nullish-coalescing-optional-chaining.md index 6d5561eba..debe99d24 100644 --- a/blog_posts/javascript-nullish-coalescing-optional-chaining.md +++ b/blog_posts/javascript-nullish-coalescing-optional-chaining.md @@ -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)). - -**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) diff --git a/blog_posts/javascript-object-array-proxy.md b/blog_posts/javascript-object-array-proxy.md index 22d8e1e9f..956ba2fba 100644 --- a/blog_posts/javascript-object-array-proxy.md +++ b/blog_posts/javascript-object-array-proxy.md @@ -120,5 +120,3 @@ x.keyOf('B'); // 'b' x.keyOf('a'); // null 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) diff --git a/blog_posts/javascript-object-is-triple-equals.md b/blog_posts/javascript-object-is-triple-equals.md index 06cefb04b..c59cb79c3 100644 --- a/blog_posts/javascript-object-is-triple-equals.md +++ b/blog_posts/javascript-object-is-triple-equals.md @@ -26,5 +26,3 @@ Object.is(+0, -0); // false NaN === NaN; // false 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) diff --git a/blog_posts/javascript-prevent-string-being-escaped.md b/blog_posts/javascript-prevent-string-being-escaped.md index 4bb5fb0b6..54625477e 100644 --- a/blog_posts/javascript-prevent-string-being-escaped.md +++ b/blog_posts/javascript-prevent-string-being-escaped.md @@ -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' ``` - -**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) diff --git a/blog_posts/javascript-primitive-instanceof.md b/blog_posts/javascript-primitive-instanceof.md index 35d81b67a..52b0df406 100644 --- a/blog_posts/javascript-primitive-instanceof.md +++ b/blog_posts/javascript-primitive-instanceof.md @@ -47,5 +47,3 @@ class PrimitiveUndefined { } 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) diff --git a/blog_posts/javascript-promise-then-catch.md b/blog_posts/javascript-promise-then-catch.md index a0df12cb2..39847af63 100644 --- a/blog_posts/javascript-promise-then-catch.md +++ b/blog_posts/javascript-promise-then-catch.md @@ -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. 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) diff --git a/blog_posts/javascript-promise-then-finally.md b/blog_posts/javascript-promise-then-finally.md index dd72ee6d5..646bf5510 100644 --- a/blog_posts/javascript-promise-then-finally.md +++ b/blog_posts/javascript-promise-then-finally.md @@ -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.). - -**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) diff --git a/blog_posts/javascript-query-selector-shorthand.md b/blog_posts/javascript-query-selector-shorthand.md index 295ba7161..c7673bdc8 100644 --- a/blog_posts/javascript-query-selector-shorthand.md +++ b/blog_posts/javascript-query-selector-shorthand.md @@ -16,5 +16,3 @@ const $$ = document.querySelectorAll.bind(document); const mainContent = $('.main-content'); 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) diff --git a/blog_posts/javascript-range-generator.md b/blog_posts/javascript-range-generator.md index 68ea9eeb3..098584403 100644 --- a/blog_posts/javascript-range-generator.md +++ b/blog_posts/javascript-range-generator.md @@ -63,5 +63,3 @@ const range = (end, start = 0, step = 1) => { 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 ``` - -**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) diff --git a/blog_posts/javascript-remove-object-property.md b/blog_posts/javascript-remove-object-property.md index 739c335b2..ba945be8a 100644 --- a/blog_posts/javascript-remove-object-property.md +++ b/blog_posts/javascript-remove-object-property.md @@ -57,5 +57,3 @@ const { gender, ...newPet } = pet; Object.keys(pet); // ['species', 'age', 'name', 'gender] 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) diff --git a/blog_posts/javascript-return-constructor.md b/blog_posts/javascript-return-constructor.md index 9aab0d1ef..13b0461e9 100644 --- a/blog_posts/javascript-return-constructor.md +++ b/blog_posts/javascript-return-constructor.md @@ -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. - -**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) diff --git a/blog_posts/javascript-shallow-deep-clone.md b/blog_posts/javascript-shallow-deep-clone.md index ec31660b7..e85bbab78 100644 --- a/blog_posts/javascript-shallow-deep-clone.md +++ b/blog_posts/javascript-shallow-deep-clone.md @@ -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. 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) diff --git a/blog_posts/javascript-singleton-proxy.md b/blog_posts/javascript-singleton-proxy.md index e424025fa..6daba9570 100644 --- a/blog_posts/javascript-singleton-proxy.md +++ b/blog_posts/javascript-singleton-proxy.md @@ -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. - -**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) diff --git a/blog_posts/javascript-sleep.md b/blog_posts/javascript-sleep.md index d22789cb6..71ad17ce6 100644 --- a/blog_posts/javascript-sleep.md +++ b/blog_posts/javascript-sleep.md @@ -60,5 +60,3 @@ const printNums = async() => { 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) diff --git a/blog_posts/javascript-spread-rest-syntax.md b/blog_posts/javascript-spread-rest-syntax.md index c579484b0..d20419d99 100644 --- a/blog_posts/javascript-spread-rest-syntax.md +++ b/blog_posts/javascript-spread-rest-syntax.md @@ -50,5 +50,3 @@ const data = [4, 5, 6]; // Spread operator, expanding the array 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) diff --git a/blog_posts/javascript-store-dom-items.md b/blog_posts/javascript-store-dom-items.md index c46653875..daa7bad2e 100644 --- a/blog_posts/javascript-store-dom-items.md +++ b/blog_posts/javascript-store-dom-items.md @@ -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. - -**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) diff --git a/blog_posts/javascript-swap-two-variables.md b/blog_posts/javascript-swap-two-variables.md index 94ecf14d5..7661b145e 100644 --- a/blog_posts/javascript-swap-two-variables.md +++ b/blog_posts/javascript-swap-two-variables.md @@ -33,5 +33,3 @@ let b = 20; [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) diff --git a/blog_posts/javascript-switch-object.md b/blog_posts/javascript-switch-object.md index d2818ad98..24c20f64d 100644 --- a/blog_posts/javascript-switch-object.md +++ b/blog_posts/javascript-switch-object.md @@ -105,5 +105,3 @@ const fruitSwitch = switchFn(logFruit, 'default'); fruitSwitch('apples'); // Logs: 'Known 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) diff --git a/blog_posts/javascript-target-blank.md b/blog_posts/javascript-target-blank.md index bb57b7ac8..68f5f2083 100644 --- a/blog_posts/javascript-target-blank.md +++ b/blog_posts/javascript-target-blank.md @@ -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. - -**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) diff --git a/blog_posts/javascript-ternary-operator.md b/blog_posts/javascript-ternary-operator.md index 4263f0e2b..402045843 100644 --- a/blog_posts/javascript-ternary-operator.md +++ b/blog_posts/javascript-ternary-operator.md @@ -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). - -**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) diff --git a/blog_posts/javascript-this.md b/blog_posts/javascript-this.md index ad3c1a906..2b33e72c9 100644 --- a/blog_posts/javascript-this.md +++ b/blog_posts/javascript-this.md @@ -138,5 +138,3 @@ function f() { 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) diff --git a/blog_posts/javascript-undeclared-undefined-null.md b/blog_posts/javascript-undeclared-undefined-null.md index db9fccf04..ebcea0b4e 100644 --- a/blog_posts/javascript-undeclared-undefined-null.md +++ b/blog_posts/javascript-undeclared-undefined-null.md @@ -36,5 +36,3 @@ console.log(x); // null ### 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 (`===`). - -**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) diff --git a/blog_posts/javascript-value-as-number.md b/blog_posts/javascript-value-as-number.md index 785f173d8..6408586dc 100644 --- a/blog_posts/javascript-value-as-number.md +++ b/blog_posts/javascript-value-as-number.md @@ -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. - -**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) diff --git a/blog_posts/javascript-variable-hoisting.md b/blog_posts/javascript-variable-hoisting.md index 26072bed8..d9b94db2c 100644 --- a/blog_posts/javascript-variable-hoisting.md +++ b/blog_posts/javascript-variable-hoisting.md @@ -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. - 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. - -**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) diff --git a/blog_posts/javascript-variable-scope.md b/blog_posts/javascript-variable-scope.md index ff2c9b499..f39ef2ba0 100644 --- a/blog_posts/javascript-variable-scope.md +++ b/blog_posts/javascript-variable-scope.md @@ -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. **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) diff --git a/blog_posts/javascript-void-links.md b/blog_posts/javascript-void-links.md index 447a8fa2b..fcbcfc71b 100644 --- a/blog_posts/javascript-void-links.md +++ b/blog_posts/javascript-void-links.md @@ -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. Finally, when creating an empty link, one should always consider more semantically appropriate alternatives, such as a `