diff --git a/blog_images/javascript-iterators.jpg b/blog_images/javascript-iterators.jpg index 80555b85d..aaea3d050 100644 Binary files a/blog_images/javascript-iterators.jpg and b/blog_images/javascript-iterators.jpg differ 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 2485ba89f..1b79bda96 100644 --- a/blog_posts/10-vs-code-extensions-for-js-developers.md +++ b/blog_posts/10-vs-code-extensions-for-js-developers.md @@ -14,7 +14,7 @@ Developers will most likely argue for the rest of eternity about the most produc 2. GitLens [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) is a very powerful collaboration tool for VS Code. It provides many useful tools for git such as blame, code authorship, activity heatmaps, recent changes, file history and even commit search. - + 3. Debugger for Chrome [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) allows you to debug your JavaScript code in Chrome or Chromium. Breakpoints, call stack inspection and stepping inside a function are only some of its features. @@ -25,7 +25,7 @@ Developers will most likely argue for the rest of eternity about the most produc [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) is one of those extensions that will significantly reduce your time jumping between different files, as it allows you to save important positions and navigate back to them easily and quickly. 6. TODO Highlight -[TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) simplifies tracking leftover tasks by allowing you to list all of your TODO annotations, as well as adding a handy background highlight to them to make them pop out immediately. +[TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) simplifies tracking leftover tasks by allowing you to list all of your TODO annotations, as well as adding a handy background highlight to them to make them pop out immediately. 7. Live Server [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) gives you an easy way to serve web pages from VS Code, making previewing and debugging a lot easier. One of the core features is the live reload support that many developers are used to. @@ -35,8 +35,8 @@ Developers will most likely argue for the rest of eternity about the most produc 9. One Dark Pro [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) is one of the most popular VS Code themes and with very good reason. It provides a clean theme with a nice palette that has great contrast and is very comfortable to use on a daily basis. - + 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/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) +**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/4-javascript-array-methods.md b/blog_posts/4-javascript-array-methods.md index be416158b..20f2db88f 100644 --- a/blog_posts/4-javascript-array-methods.md +++ b/blog_posts/4-javascript-array-methods.md @@ -55,4 +55,4 @@ const isOdd = x => x % 2 === 1; arr.find(isOdd); // 1 ``` -**Image credit:** [Edgar Chaparro](https://unsplash.com/@echaparro) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) +**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 4b5bf9c21..839754cb9 100644 --- a/blog_posts/4-seo-tips-for-developers.md +++ b/blog_posts/4-seo-tips-for-developers.md @@ -21,4 +21,4 @@ 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/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) +**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 bc53266d6..0b54834e1 100644 --- a/blog_posts/5-tips-for-better-pull-requests.md +++ b/blog_posts/5-tips-for-better-pull-requests.md @@ -24,4 +24,4 @@ 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/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) +**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 f4ed53855..8af384fab 100644 --- a/blog_posts/6-javascript-regexp-tricks.md +++ b/blog_posts/6-javascript-regexp-tricks.md @@ -117,4 +117,4 @@ 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/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) +**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 d16187a6b..63d87d06d 100644 --- a/blog_posts/6-tips-for-your-next-remote-onboarding.md +++ b/blog_posts/6-tips-for-your-next-remote-onboarding.md @@ -23,4 +23,4 @@ Many developers find onboarding experience worrisome. Here are 6 helpful tips to - 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/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) +**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 691718936..913ec9612 100644 --- a/blog_posts/7-chrome-extensions-for-web-developers.md +++ b/blog_posts/7-chrome-extensions-for-web-developers.md @@ -30,4 +30,4 @@ 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/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) +**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 e05cd0576..841b92179 100644 --- a/blog_posts/8-tips-for-accessible-websites.md +++ b/blog_posts/8-tips-for-accessible-websites.md @@ -31,4 +31,4 @@ 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 groupped 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/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) +**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 2a4760299..4eceb6aa5 100644 --- a/blog_posts/8-tips-for-remote-work.md +++ b/blog_posts/8-tips-for-remote-work.md @@ -35,4 +35,4 @@ It's as easy to forget about breaks as it is to start working late. Try to set a **[Looking for a work from home role/job? Check out Jooble!](https://jooble.org/jobs-work-from-home)** -**Image credit:** [Goran Ivos](https://unsplash.com/@goran_ivos?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) +**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 b3ae68d71..bce2d3437 100644 --- a/blog_posts/async-javascript-cheatsheet.md +++ b/blog_posts/async-javascript-cheatsheet.md @@ -110,4 +110,4 @@ async () => { } ``` -**Image credit:** [Katie Burkhart](https://unsplash.com/@katieanalyzes?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) +**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/breaking-react.md b/blog_posts/breaking-react.md index bb12ba7e6..18ba8d13a 100644 --- a/blog_posts/breaking-react.md +++ b/blog_posts/breaking-react.md @@ -7,17 +7,17 @@ cover: blog_images/breaking-react.jpg excerpt: As powerful as React is, it is also quite fragile at places. Did you know that just a few lines are more than enough to break your entire React application? --- -I am by no means an expert React engineer, but I have a couple years of experience under my belt. While React is an extremely powerful library for building user interfaces, it is also quite fragile at places. A very common bug I have encountered is caused by direct DOM manipulation in combination with React. This is not exactly an anti-pattern, but under the right circumstances it can break your entire React application and might be hard to debug. +I am by no means an expert React engineer, but I have a couple years of experience under my belt. While React is an extremely powerful library for building user interfaces, it is also quite fragile at places. A very common bug I have encountered is caused by direct DOM manipulation in combination with React. This is not exactly an anti-pattern, but under the right circumstances it can break your entire React application and might be hard to debug. Here's [a minimal example](https://codepen.io/chalarangelo/pen/jOEojVJ?editors=0010) of how one can reproduce this bug, before we dive into explaining the problem and how to fix it: ```jsx -const destroyElement = () => +const destroyElement = () => document.getElementById('app').removeChild(document.getElementById('my-div')); const App = () => { const [elementShown, updateElement] = React.useState(true); - + return (