diff --git a/blog_images/a11y-cover.jpg b/blog_images/accessibility.jpg similarity index 100% rename from blog_images/a11y-cover.jpg rename to blog_images/accessibility.jpg diff --git a/blog_images/javascript-iterators.jpg b/blog_images/balloons.jpg similarity index 100% rename from blog_images/javascript-iterators.jpg rename to blog_images/balloons.jpg diff --git a/blog_images/js-equality.jpg b/blog_images/beach-pineapple.jpg similarity index 100% rename from blog_images/js-equality.jpg rename to blog_images/beach-pineapple.jpg diff --git a/blog_images/javascript-variable-hoisting.jpg b/blog_images/boat-port.jpg similarity index 100% rename from blog_images/javascript-variable-hoisting.jpg rename to blog_images/boat-port.jpg diff --git a/blog_images/breaking-react.jpg b/blog_images/broken-screen.jpg similarity index 100% rename from blog_images/breaking-react.jpg rename to blog_images/broken-screen.jpg diff --git a/blog_images/nodejs-chrome-debugging.jpg b/blog_images/bug.jpg similarity index 100% rename from blog_images/nodejs-chrome-debugging.jpg rename to blog_images/bug.jpg diff --git a/blog_images/js-functions.jpg b/blog_images/canoe.jpg similarity index 100% rename from blog_images/js-functions.jpg rename to blog_images/canoe.jpg diff --git a/blog_images/code-anatomy-optimizing-recursion.jpg b/blog_images/case-study.jpg similarity index 100% rename from blog_images/code-anatomy-optimizing-recursion.jpg rename to blog_images/case-study.jpg diff --git a/blog_images/javascript-concepts.jpg b/blog_images/cherry-trees.jpg similarity index 100% rename from blog_images/javascript-concepts.jpg rename to blog_images/cherry-trees.jpg diff --git a/blog_images/testing-react-side-effects.jpg b/blog_images/colorful-lounge.jpg similarity index 100% rename from blog_images/testing-react-side-effects.jpg rename to blog_images/colorful-lounge.jpg diff --git a/blog_images/react-rendering.jpg b/blog_images/comic-glasses.jpg similarity index 100% rename from blog_images/react-rendering.jpg rename to blog_images/comic-glasses.jpg diff --git a/blog_images/javascript-modify-url-without-reload.jpg b/blog_images/compass.jpg similarity index 100% rename from blog_images/javascript-modify-url-without-reload.jpg rename to blog_images/compass.jpg diff --git a/blog_images/10-vs-code-extensions-for-js-developers.jpg b/blog_images/computer-screens.jpg similarity index 100% rename from blog_images/10-vs-code-extensions-for-js-developers.jpg rename to blog_images/computer-screens.jpg diff --git a/blog_images/javascript-listen-once.jpg b/blog_images/dog-waiting].jpg similarity index 100% rename from blog_images/javascript-listen-once.jpg rename to blog_images/dog-waiting].jpg diff --git a/blog_images/js-event-capture.jpg b/blog_images/fishermen.jpg similarity index 100% rename from blog_images/js-event-capture.jpg rename to blog_images/fishermen.jpg diff --git a/blog_images/flexbox.jpg b/blog_images/frames.jpg similarity index 100% rename from blog_images/flexbox.jpg rename to blog_images/frames.jpg diff --git a/blog_images/javascript-deep-freeze-object.jpg b/blog_images/frozen-globe.jpg similarity index 100% rename from blog_images/javascript-deep-freeze-object.jpg rename to blog_images/frozen-globe.jpg diff --git a/blog_images/javascript-range-generator.jpg b/blog_images/generator.jpg similarity index 100% rename from blog_images/javascript-range-generator.jpg rename to blog_images/generator.jpg diff --git a/blog_images/8-tips-for-remote-work.jpg b/blog_images/kettle-laptop.jpg similarity index 100% rename from blog_images/8-tips-for-remote-work.jpg rename to blog_images/kettle-laptop.jpg diff --git a/blog_images/5-tips-for-better-pull-requests.jpg b/blog_images/keyboard-tea.jpg similarity index 100% rename from blog_images/5-tips-for-better-pull-requests.jpg rename to blog_images/keyboard-tea.jpg diff --git a/blog_images/javascript-for-in-for-of-foreach.jpg b/blog_images/lake-loop.jpg similarity index 100% rename from blog_images/javascript-for-in-for-of-foreach.jpg rename to blog_images/lake-loop.jpg diff --git a/blog_images/testing-stateful-ui-components.jpg b/blog_images/lake-trees.jpg similarity index 100% rename from blog_images/testing-stateful-ui-components.jpg rename to blog_images/lake-trees.jpg diff --git a/blog_images/javascript-swap-two-variables.jpg b/blog_images/mountain-lake-2.jpg similarity index 100% rename from blog_images/javascript-swap-two-variables.jpg rename to blog_images/mountain-lake-2.jpg diff --git a/blog_images/js-naming-conventions.jpg b/blog_images/naming-conventions.jpg similarity index 100% rename from blog_images/js-naming-conventions.jpg rename to blog_images/naming-conventions.jpg diff --git a/blog_images/javascript-singleton-proxy.jpg b/blog_images/obelisk.jpg similarity index 100% rename from blog_images/javascript-singleton-proxy.jpg rename to blog_images/obelisk.jpg diff --git a/blog_images/javascript-shallow-deep-clone.jpg b/blog_images/pagodas.jpg similarity index 100% rename from blog_images/javascript-shallow-deep-clone.jpg rename to blog_images/pagodas.jpg diff --git a/blog_images/javascript-variable-scope.jpg b/blog_images/periscope.jpg similarity index 100% rename from blog_images/javascript-variable-scope.jpg rename to blog_images/periscope.jpg diff --git a/blog_images/prefetching-resources.jpg b/blog_images/playing-fetch.jpg similarity index 100% rename from blog_images/prefetching-resources.jpg rename to blog_images/playing-fetch.jpg diff --git a/blog_images/python-lists-tuples.jpg b/blog_images/red-mountain.jpg similarity index 100% rename from blog_images/python-lists-tuples.jpg rename to blog_images/red-mountain.jpg diff --git a/blog_images/javascript-ternary-operator.jpg b/blog_images/red-succulent.jpg similarity index 100% rename from blog_images/javascript-ternary-operator.jpg rename to blog_images/red-succulent.jpg diff --git a/blog_images/javascript-higher-order-functions.jpg b/blog_images/rock-climbing.jpg similarity index 100% rename from blog_images/javascript-higher-order-functions.jpg rename to blog_images/rock-climbing.jpg diff --git a/blog_images/python-slice-notation.jpg b/blog_images/sliced-fruits.jpg similarity index 100% rename from blog_images/python-slice-notation.jpg rename to blog_images/sliced-fruits.jpg diff --git a/blog_images/testing-redux-connected-components.jpg b/blog_images/sparkles.jpg similarity index 100% rename from blog_images/testing-redux-connected-components.jpg rename to blog_images/sparkles.jpg diff --git a/blog_images/react-conditional-classname.jpg b/blog_images/succulent-red-light.jpg similarity index 100% rename from blog_images/react-conditional-classname.jpg rename to blog_images/succulent-red-light.jpg diff --git a/blog_images/4-seo-tips-for-developers.jpg b/blog_images/sunrise-over-city.jpg similarity index 100% rename from blog_images/4-seo-tips-for-developers.jpg rename to blog_images/sunrise-over-city.jpg diff --git a/blog_images/6-javascript-regexp-tricks.jpg b/blog_images/taking-photos.jpg similarity index 100% rename from blog_images/6-javascript-regexp-tricks.jpg rename to blog_images/taking-photos.jpg diff --git a/blog_images/cheatsheet1.jpg b/blog_images/tools.jpg similarity index 100% rename from blog_images/cheatsheet1.jpg rename to blog_images/tools.jpg diff --git a/blog_images/react-selected-option.jpg b/blog_images/two-doors.jpg similarity index 100% rename from blog_images/react-selected-option.jpg rename to blog_images/two-doors.jpg diff --git a/blog_images/python-lowercase.jpg b/blog_images/type-stamps.jpg similarity index 100% rename from blog_images/python-lowercase.jpg rename to blog_images/type-stamps.jpg diff --git a/blog_images/copy-text-to-clipboard-with-javascript.jpg b/blog_images/typing.jpg similarity index 100% rename from blog_images/copy-text-to-clipboard-with-javascript.jpg rename to blog_images/typing.jpg diff --git a/blog_images/code-anatomy-performant-python.jpg b/blog_images/walking-on-top.jpg similarity index 100% rename from blog_images/code-anatomy-performant-python.jpg rename to blog_images/walking-on-top.jpg 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 ea45a352d..fadfa5d58 100644 --- a/blog_posts/10-vs-code-extensions-for-js-developers.md +++ b/blog_posts/10-vs-code-extensions-for-js-developers.md @@ -3,7 +3,7 @@ title: 10 must-have VS Code extensions for JavaScript developers type: list tags: devtools,vscode authors: chalarangelo -cover: blog_images/10-vs-code-extensions-for-js-developers.jpg +cover: blog_images/computer-screens.jpg excerpt: VS Code is steadily gaining popularity among developers. Here are 10 essential extensions for JavaScript developers that aim to increase your productivity. --- diff --git a/blog_posts/4-seo-tips-for-developers.md b/blog_posts/4-seo-tips-for-developers.md index 839754cb9..2c7332613 100644 --- a/blog_posts/4-seo-tips-for-developers.md +++ b/blog_posts/4-seo-tips-for-developers.md @@ -3,7 +3,7 @@ title: 4 SEO tips for developers type: list tags: seo,webdev authors: chalarangelo -cover: blog_images/4-seo-tips-for-developers.jpg +cover: blog_images/sunrise-over-city.jpg excerpt: As time goes by, SEO is becoming increasingly relevant, but most web developers seem to have little experience with it. Here are 4 actionable SEO tips you can implement today. --- diff --git a/blog_posts/5-tips-for-better-pull-requests.md b/blog_posts/5-tips-for-better-pull-requests.md index 6256822b4..5df1134f3 100644 --- a/blog_posts/5-tips-for-better-pull-requests.md +++ b/blog_posts/5-tips-for-better-pull-requests.md @@ -3,7 +3,7 @@ title: 5 tips for better Pull Requests type: list tags: git,github,programming,webdev authors: chalarangelo -cover: blog_images/5-tips-for-better-pull-requests.jpg +cover: blog_images/keyboard-tea.jpg excerpt: Writing good code is only part of the job. Here are 5 tips to improve your pull requests and help people review them. unlisted: true --- diff --git a/blog_posts/6-javascript-regexp-tricks.md b/blog_posts/6-javascript-regexp-tricks.md index 8af384fab..1c254c391 100644 --- a/blog_posts/6-javascript-regexp-tricks.md +++ b/blog_posts/6-javascript-regexp-tricks.md @@ -3,7 +3,7 @@ title: 6 JavaScript Regular Expression features you can use today type: story tags: javascript,string,regexp authors: chalarangelo -cover: blog_images/6-javascript-regexp-tricks.jpg +cover: blog_images/taking-photos.jpg excerpt: Regular expressions, while very powerful, are notoriously hard to master. Start using them in your JavaScript code by understanding these 6 features. --- diff --git a/blog_posts/7-chrome-extensions-for-web-developers.md b/blog_posts/7-chrome-extensions-for-web-developers.md index 913ec9612..2107aad06 100644 --- a/blog_posts/7-chrome-extensions-for-web-developers.md +++ b/blog_posts/7-chrome-extensions-for-web-developers.md @@ -3,7 +3,7 @@ title: 7 essential Chrome extensions for web developers type: list tags: devtools,webdev authors: chalarangelo -cover: blog_images/10-vs-code-extensions-for-js-developers.jpg +cover: blog_images/computer-screens.jpg excerpt: Google Chrome's developer tools are nothing short of amazing. Here are 7 must-have extensions you can add to increase your productivity even further. --- diff --git a/blog_posts/8-tips-for-accessible-websites.md b/blog_posts/8-tips-for-accessible-websites.md index b51164f80..56050f2fd 100644 --- a/blog_posts/8-tips-for-accessible-websites.md +++ b/blog_posts/8-tips-for-accessible-websites.md @@ -3,7 +3,7 @@ title: 8 tips for accessible websites type: list tags: javascript,accessibility,webdev authors: chalarangelo -cover: blog_images/a11y-cover.jpg +cover: blog_images/accessibility.jpg excerpt: Accessibility (a11y) can improve your website and attract new users. Learn how to get started with these 8 quick tips. --- diff --git a/blog_posts/8-tips-for-remote-work.md b/blog_posts/8-tips-for-remote-work.md index 1d67aef7b..4db658cb8 100644 --- a/blog_posts/8-tips-for-remote-work.md +++ b/blog_posts/8-tips-for-remote-work.md @@ -3,7 +3,7 @@ title: 8 tips for working from home type: list tags: career,programming,jobs,webdev authors: chalarangelo -cover: blog_images/8-tips-for-remote-work.jpg +cover: blog_images/kettle-laptop.jpg excerpt: Working from home seems like a great alternative to going to the office, but there are challenges that come with it that you need to overcome... unlisted: true --- diff --git a/blog_posts/breaking-react.md b/blog_posts/breaking-react.md index 18ba8d13a..5e1bb6779 100644 --- a/blog_posts/breaking-react.md +++ b/blog_posts/breaking-react.md @@ -3,7 +3,7 @@ title: Breaking React - a common pattern to avoid type: story tags: react,debugging authors: chalarangelo -cover: blog_images/breaking-react.jpg +cover: blog_images/broken-screen.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? --- diff --git a/blog_posts/code-anatomy-chaining-reduce-for-loop.md b/blog_posts/code-anatomy-chaining-reduce-for-loop.md index a2bb71646..67a70b134 100644 --- a/blog_posts/code-anatomy-chaining-reduce-for-loop.md +++ b/blog_posts/code-anatomy-chaining-reduce-for-loop.md @@ -3,7 +3,7 @@ title: Code Anatomy - For loops, array reduce and method chaining type: story tags: javascript,array,object,iterator authors: chalarangelo -cover: blog_images/code-anatomy-optimizing-recursion.jpg +cover: blog_images/case-study.jpg excerpt: There are many ways to iterate and transform array data in JavaScript. Learn how each one works and where you should use them. --- diff --git a/blog_posts/code-anatomy-optimizing-recursion.md b/blog_posts/code-anatomy-optimizing-recursion.md index 8fe3d94e1..56bd5bf04 100644 --- a/blog_posts/code-anatomy-optimizing-recursion.md +++ b/blog_posts/code-anatomy-optimizing-recursion.md @@ -3,7 +3,7 @@ title: Code Anatomy - Optimizing recursive functions type: story tags: javascript,recursion,performance authors: chalarangelo -cover: blog_images/code-anatomy-optimizing-recursion.jpg +cover: blog_images/case-study.jpg excerpt: Recursive code has a tendency of being inefficient and can leave a lot of space for optimization. Learn a couple of tricks we use to speed up our recursive functions. --- diff --git a/blog_posts/code-anatomy-performant-python.md b/blog_posts/code-anatomy-performant-python.md index c80ad9f5b..b51730159 100644 --- a/blog_posts/code-anatomy-performant-python.md +++ b/blog_posts/code-anatomy-performant-python.md @@ -3,7 +3,7 @@ title: Code Anatomy - Writing high performance Python code type: story tags: python,list,performance authors: maciv,chalarangelo -cover: blog_images/code-anatomy-performant-python.jpg +cover: blog_images/walking-on-top.jpg excerpt: Writing short, efficient Python code is not always straightforward. Read how we optimize our list snippets to increase performance using a couple of simple tricks. --- diff --git a/blog_posts/copy-text-to-clipboard-with-javascript.md b/blog_posts/copy-text-to-clipboard-with-javascript.md index e3551bbe8..7459f7d26 100644 --- a/blog_posts/copy-text-to-clipboard-with-javascript.md +++ b/blog_posts/copy-text-to-clipboard-with-javascript.md @@ -3,7 +3,7 @@ title: How can I copy text to clipboard with JavaScript? type: question tags: javascript,browser authors: chalarangelo -cover: blog_images/copy-text-to-clipboard-with-javascript.jpg +cover: blog_images/typing.jpg excerpt: Learn how to programmatically copy text to clipboard with a few lines of JavaScript and level up your web development skills. --- diff --git a/blog_posts/eslint-refactor-for-in.md b/blog_posts/eslint-refactor-for-in.md index 24d65b5bc..42793a47d 100644 --- a/blog_posts/eslint-refactor-for-in.md +++ b/blog_posts/eslint-refactor-for-in.md @@ -3,7 +3,7 @@ title: "Tip: Refactoring your for...in loops to avoid ESLint warnings" type: tip tags: javascript,array,iterator,eslint authors: chalarangelo -cover: blog_images/copy-text-to-clipboard-with-javascript.jpg +cover: blog_images/typing.jpg excerpt: ESLint is a very powerful tool that can save you a lot of headaches, but sometimes it gets in the way. Learn how to refactor code to get rid of a common warning. --- diff --git a/blog_posts/flexbox-cheatsheet.md b/blog_posts/flexbox-cheatsheet.md index 22b0b0ec7..6d7523c5d 100644 --- a/blog_posts/flexbox-cheatsheet.md +++ b/blog_posts/flexbox-cheatsheet.md @@ -3,7 +3,7 @@ title: Flexbox Cheat Sheet type: cheatsheet tags: css,layout,flexbox,cheatsheet authors: chalarangelo -cover: blog_images/flexbox.jpg +cover: blog_images/frames.jpg excerpt: Flexbox allows you to create fluid layouts easily. If you find yourself constantly looking up the syntax or how it work, this handy cheatsheet is all you need. --- diff --git a/blog_posts/javascript-closures.md b/blog_posts/javascript-closures.md index 70eb9ba2e..db9091bf0 100644 --- a/blog_posts/javascript-closures.md +++ b/blog_posts/javascript-closures.md @@ -3,7 +3,7 @@ title: What are JavaScript closures? type: question tags: javascript,function,closure authors: chalarangelo -cover: blog_images/javascript-concepts.jpg +cover: blog_images/cherry-trees.jpg excerpt: Learn and understand closures, a core concept in JavaScript programming, and level up your code. --- diff --git a/blog_posts/javascript-deep-freeze-object.md b/blog_posts/javascript-deep-freeze-object.md index 4ba041990..e0a5e86e9 100644 --- a/blog_posts/javascript-deep-freeze-object.md +++ b/blog_posts/javascript-deep-freeze-object.md @@ -3,7 +3,7 @@ title: How can I deep freeze an object in JavaScript? type: question tags: javascript,object authors: chalarangelo -cover: blog_images/javascript-deep-freeze-object.jpg +cover: blog_images/frozen-globe.jpg excerpt: Learn how mutability works in JavaScript, its applications to objects and how you can properly freeze them to make them constant. --- diff --git a/blog_posts/javascript-equality.md b/blog_posts/javascript-equality.md index 511c8ce80..4f772bcda 100644 --- a/blog_posts/javascript-equality.md +++ b/blog_posts/javascript-equality.md @@ -3,7 +3,7 @@ title: What is the difference between JavaScript's equality operators? type: question tags: javascript,type,comparison authors: chalarangelo -cover: blog_images/js-equality.jpg +cover: blog_images/beach-pineapple.jpg excerpt: Learn all you need to know about the differences between JavaScript's double equals and triple equals operators. --- diff --git a/blog_posts/javascript-event-bubbling-capturing-delegation.md b/blog_posts/javascript-event-bubbling-capturing-delegation.md index b31ca6ea9..56519af96 100644 --- a/blog_posts/javascript-event-bubbling-capturing-delegation.md +++ b/blog_posts/javascript-event-bubbling-capturing-delegation.md @@ -3,7 +3,7 @@ title: Understanding event bubbling, capturing and delegation in JavaScript type: story tags: javascript,browser,event authors: chalarangelo -cover: blog_images/js-event-capture.jpg +cover: blog_images/fishermen.jpg excerpt: Understand how events work in JavaScript and learn when to use event bubbling, event capturing and event delegation with this short guide. --- diff --git a/blog_posts/javascript-for-in-for-of-foreach.md b/blog_posts/javascript-for-in-for-of-foreach.md index 596e52a39..d33861e63 100644 --- a/blog_posts/javascript-for-in-for-of-foreach.md +++ b/blog_posts/javascript-for-in-for-of-foreach.md @@ -3,7 +3,7 @@ title: What is the difference between JavaScript's for...in, for...of and forEac type: question tags: javascript,array,object,iterator authors: chalarangelo -cover: blog_images/javascript-for-in-for-of-foreach.jpg +cover: blog_images/lake-loop.jpg excerpt: Learn the differences between the three most commonly used iteration methods offered by JavaScript, which often confuse beginners and veterans alike. --- diff --git a/blog_posts/javascript-function-call-apply-bind.md b/blog_posts/javascript-function-call-apply-bind.md index 0cb584139..ef602b38b 100644 --- a/blog_posts/javascript-function-call-apply-bind.md +++ b/blog_posts/javascript-function-call-apply-bind.md @@ -3,7 +3,7 @@ title: JavaScript function methods - call(), apply() and bind() type: story tags: javascript,function authors: chalarangelo -cover: blog_images/js-functions.jpg +cover: blog_images/canoe.jpg excerpt: Learn everything you need to know about JavaScript's `Function.prototype.call()`, `Function.prototype.apply()` and `Function.prototype.bind()` with this short guide. --- diff --git a/blog_posts/javascript-higher-order-functions.md b/blog_posts/javascript-higher-order-functions.md index e3c081692..99a8c67b3 100644 --- a/blog_posts/javascript-higher-order-functions.md +++ b/blog_posts/javascript-higher-order-functions.md @@ -3,7 +3,7 @@ title: Understanding higher-order functions in JavaScript type: story tags: javascript,function authors: chalarangelo -cover: blog_images/javascript-higher-order-functions.jpg +cover: blog_images/rock-climbing.jpg excerpt: Learn everything you need to know about higher-order functions with this short guide and level up your programming skills. --- diff --git a/blog_posts/javascript-iterators.md b/blog_posts/javascript-iterators.md index 71ead657b..f14b78539 100644 --- a/blog_posts/javascript-iterators.md +++ b/blog_posts/javascript-iterators.md @@ -3,7 +3,7 @@ title: What are JavaScript Iterators and where can I use them? type: question tags: javascript,array,object,iterator authors: chalarangelo -cover: blog_images/javascript-iterators.jpg +cover: blog_images/balloons.jpg excerpt: Learn how the new JavaScript ES6 Iterators work and how you can use them to level up your programming projects by understanding these short code examples. --- diff --git a/blog_posts/javascript-listen-once.md b/blog_posts/javascript-listen-once.md index 10fddc736..f0122921a 100644 --- a/blog_posts/javascript-listen-once.md +++ b/blog_posts/javascript-listen-once.md @@ -3,7 +3,7 @@ title: How can I execute an event handler at most once? type: question tags: javascript,browser,event authors: maciv -cover: blog_images/javascript-listen-once.jpg +cover: blog_images/dog-waiting.jpg excerpt: Learn how to attach an event handler to events that is executed at most once in this JavaScript blog post. --- diff --git a/blog_posts/javascript-memoization.md b/blog_posts/javascript-memoization.md index 17ebe2b77..87d820229 100644 --- a/blog_posts/javascript-memoization.md +++ b/blog_posts/javascript-memoization.md @@ -3,7 +3,7 @@ title: Where and how can I use memoization in JavaScript? type: question tags: javascript,function,memoization authors: chalarangelo -cover: blog_images/javascript-concepts.jpg +cover: blog_images/cherry-trees.jpg excerpt: Learn different ways to memoize function calls in JavaScript as well as when to use memoization to get the best performance results. --- diff --git a/blog_posts/javascript-modify-url-without-reload.md b/blog_posts/javascript-modify-url-without-reload.md index 674cf0f51..67dc0c6d5 100644 --- a/blog_posts/javascript-modify-url-without-reload.md +++ b/blog_posts/javascript-modify-url-without-reload.md @@ -3,7 +3,7 @@ title: How do I use JavaScript to modify the URL without reloading the page? type: question tags: javascript,browser authors: chalarangelo -cover: blog_images/javascript-modify-url-without-reload.jpg +cover: blog_images/compass.jpg excerpt: Learn all of the options JavaScript provides for modifying the URL of the current page in the browser without reloading the page. --- diff --git a/blog_posts/javascript-module-cheatsheet.md b/blog_posts/javascript-module-cheatsheet.md index 74e5ab1b4..1af14448c 100644 --- a/blog_posts/javascript-module-cheatsheet.md +++ b/blog_posts/javascript-module-cheatsheet.md @@ -3,7 +3,7 @@ title: JavaScript modules Cheat Sheet type: cheatsheet tags: javascript,cheatsheet authors: chalarangelo -cover: blog_images/javascript-swap-two-variables.jpg +cover: blog_images/mountain-lake-2.jpg excerpt: Learn everything you need to know about JavaScript modules with this handy cheatsheet. --- diff --git a/blog_posts/javascript-naming-conventions.md b/blog_posts/javascript-naming-conventions.md index 6dad53024..778e22db2 100644 --- a/blog_posts/javascript-naming-conventions.md +++ b/blog_posts/javascript-naming-conventions.md @@ -3,7 +3,7 @@ title: JavaScript naming conventions type: story tags: javascript,variable,cheatsheet authors: chalarangelo -cover: blog_images/js-naming-conventions.jpg +cover: blog_images/naming-conventions.jpg excerpt: Naming conventions, while not easy to enforce, make code easier to read and understand. Learn how to name your variables in JavaScript with this handy guide. --- diff --git a/blog_posts/javascript-range-generator.md b/blog_posts/javascript-range-generator.md index e9e03b6ea..68ea9eeb3 100644 --- a/blog_posts/javascript-range-generator.md +++ b/blog_posts/javascript-range-generator.md @@ -3,7 +3,7 @@ title: Using JavaScript generator functions for ranges type: story tags: javascript,function,array authors: chalarangelo -cover: blog_images/javascript-range-generator.jpg +cover: blog_images/generator.jpg excerpt: Learn how to use JavaScript ES6 generators and iterators to iterate over ranges of numbers. --- diff --git a/blog_posts/javascript-shallow-deep-clone.md b/blog_posts/javascript-shallow-deep-clone.md index e40f8cefa..ec31660b7 100644 --- a/blog_posts/javascript-shallow-deep-clone.md +++ b/blog_posts/javascript-shallow-deep-clone.md @@ -3,7 +3,7 @@ title: How do I clone an object in JavaScript? type: question tags: javascript,object authors: chalarangelo -cover: blog_images/javascript-shallow-deep-clone.jpg +cover: blog_images/pagodas.jpg excerpt: Learn how JavaScript handles mutable data, such as objects and arrays, and understand how shallow cloning and deep cloning work. --- diff --git a/blog_posts/javascript-singleton-proxy.md b/blog_posts/javascript-singleton-proxy.md index 2e90f5821..e424025fa 100644 --- a/blog_posts/javascript-singleton-proxy.md +++ b/blog_posts/javascript-singleton-proxy.md @@ -3,7 +3,7 @@ title: How can I implement a singleton in JavaScript? type: question tags: javascript,object,function,proxy,pattern authors: chalarangelo -cover: blog_images/javascript-singleton-proxy.jpg +cover: blog_images/obelisk.jpg excerpt: Learn how to implement a singleton, a commonly used software design pattern, in JavaScript using the Proxy object. --- diff --git a/blog_posts/javascript-swap-two-variables.md b/blog_posts/javascript-swap-two-variables.md index cfeaf683a..94ecf14d5 100644 --- a/blog_posts/javascript-swap-two-variables.md +++ b/blog_posts/javascript-swap-two-variables.md @@ -3,7 +3,7 @@ title: "Tip: How to swap two variables in JavaScript" type: tip tags: javascript,array,variables authors: chalarangelo -cover: blog_images/javascript-swap-two-variables.jpg +cover: blog_images/mountain-lake-2.jpg excerpt: Learn how to swap the values of two variables in JavaScript using a single line of ES6 code. --- diff --git a/blog_posts/javascript-ternary-operator.md b/blog_posts/javascript-ternary-operator.md index 7134a1a52..4263f0e2b 100644 --- a/blog_posts/javascript-ternary-operator.md +++ b/blog_posts/javascript-ternary-operator.md @@ -3,7 +3,7 @@ title: What is the ternary operator and how do I use it? type: story tags: javascript,condition authors: maciv -cover: blog_images/javascript-ternary-operator.jpg +cover: blog_images/red-succulent.jpg excerpt: Learn everything you need to know about the conditional (ternary) operator and how to use it in JavaScript. --- diff --git a/blog_posts/javascript-variable-hoisting.md b/blog_posts/javascript-variable-hoisting.md index f133b2218..26072bed8 100644 --- a/blog_posts/javascript-variable-hoisting.md +++ b/blog_posts/javascript-variable-hoisting.md @@ -3,7 +3,7 @@ title: What is hoisting in JavaScript? type: question tags: javascript,type,variable authors: chalarangelo -cover: blog_images/javascript-variable-hoisting.jpg +cover: blog_images/boat-port.jpg excerpt: One of the most commonly asked JavaScript interview questions is about hoisting. It's also a concept that might require some getting used to, so read our guide to learn more. --- diff --git a/blog_posts/javascript-variable-scope.md b/blog_posts/javascript-variable-scope.md index 3d6a0f09b..ff2c9b499 100644 --- a/blog_posts/javascript-variable-scope.md +++ b/blog_posts/javascript-variable-scope.md @@ -3,7 +3,7 @@ title: Understanding JavaScript variables and scopes type: story tags: javascript,type,variable authors: chalarangelo -cover: blog_images/javascript-variable-scope.jpg +cover: blog_images/periscope.jpg excerpt: JavaScript developers often get confused by JavaScript's variables and scope. Here's a quick guide to understanding and remembering everything related to these concepts. --- diff --git a/blog_posts/nodejs-chrome-debugging.md b/blog_posts/nodejs-chrome-debugging.md index 18a78df80..94681843a 100644 --- a/blog_posts/nodejs-chrome-debugging.md +++ b/blog_posts/nodejs-chrome-debugging.md @@ -3,7 +3,7 @@ title: "Tip: Debugging Node.js using Chrome Developer Tools" type: tip tags: javascript,node,debugging authors: chalarangelo -cover: blog_images/nodejs-chrome-debugging.jpg +cover: blog_images/bug.jpg excerpt: Did you know you can use Chrome Developer Tools to debug your Node.js code? Find out how in this short guide. --- diff --git a/blog_posts/prefetching-resources.md b/blog_posts/prefetching-resources.md index 744331e41..c63c115d3 100644 --- a/blog_posts/prefetching-resources.md +++ b/blog_posts/prefetching-resources.md @@ -3,7 +3,7 @@ title: "Tip: Prefetching resources in the browser" type: tip tags: webdev,html,browser authors: chalarangelo -cover: blog_images/prefetching-resources.jpg +cover: blog_images/playing-fetch.jpg excerpt: Resource prefetching is a great technique to improve perceived page speed on your website and one that requires little to no effort. Learn how to use it today. --- diff --git a/blog_posts/python-lists-tuples.md b/blog_posts/python-lists-tuples.md index c4527b42c..060a36eaa 100644 --- a/blog_posts/python-lists-tuples.md +++ b/blog_posts/python-lists-tuples.md @@ -3,7 +3,7 @@ title: What is the difference between lists and tuples in Python? type: question tags: python,list authors: chalarangelo -cover: blog_images/python-lists-tuples.jpg +cover: blog_images/red-mountain.jpg excerpt: Learn how Python's lists and tuples are different and level up your code today. --- diff --git a/blog_posts/python-lowercase.md b/blog_posts/python-lowercase.md index 7e316f519..037f46ba5 100644 --- a/blog_posts/python-lowercase.md +++ b/blog_posts/python-lowercase.md @@ -3,7 +3,7 @@ title: How do I convert a string to lowercase in Python? type: question tags: python,string authors: maciv -cover: blog_images/python-lowercase.jpg +cover: blog_images/type-stamps.jpg excerpt: Learn of the two different way to convert a string to lowercase in Python and understand when you should use each one with this quick guide. --- diff --git a/blog_posts/python-slice-assignment.md b/blog_posts/python-slice-assignment.md index 9045b2da6..17e1a2707 100644 --- a/blog_posts/python-slice-assignment.md +++ b/blog_posts/python-slice-assignment.md @@ -3,7 +3,7 @@ title: Understanding Python's slice assignment type: story tags: python,list authors: maciv -cover: blog_images/python-slice-notation.jpg +cover: blog_images/sliced-fruits.jpg excerpt: Learn everything you need to know about Python's slice assignment with this handy guide. --- diff --git a/blog_posts/python-slice-notation.md b/blog_posts/python-slice-notation.md index c8d10cddf..05ca7b77b 100644 --- a/blog_posts/python-slice-notation.md +++ b/blog_posts/python-slice-notation.md @@ -3,7 +3,7 @@ title: Understanding Python's slice notation type: story tags: python,list authors: maciv -cover: blog_images/python-slice-notation.jpg +cover: blog_images/sliced-fruits.jpg excerpt: Learn everything you need to know about Python's slice notation with this handy guide. --- diff --git a/blog_posts/react-conditional-classname.md b/blog_posts/react-conditional-classname.md index b2a06f7bc..9d9ebb1ae 100644 --- a/blog_posts/react-conditional-classname.md +++ b/blog_posts/react-conditional-classname.md @@ -3,7 +3,7 @@ title: "Tip: React conditional className, empty strings and null" type: tip tags: react,components authors: maciv -cover: blog_images/react-conditional-classname.jpg +cover: blog_images/succulent-red-light.jpg excerpt: When developing React components, you might often need to conditionally apply a className. Learn how to handle empty classNames correctly using this handy tip. --- @@ -29,7 +29,7 @@ ReactDOM.render( ); ``` -In the code example above, we create two very similar components, both of which conditionally set the `className` of an element based on the value of the `enabled` prop. The first one will set the `className` to an empty string if `enabled` is `false` and the second one will set it to `null`. +In the code example above, we create two very similar components, both of which conditionally set the `className` of an element based on the value of the `enabled` prop. The first one will set the `className` to an empty string if `enabled` is `false` and the second one will set it to `null`. Both will result in a very similar output, however, if you carefully inspect the HTML, you will notice that the first one will render `
Hi
` whereas the second one will render `
Hi
`. This kind of markup (an attribute being present but without value) is rather uncommon and you'd rarely ever see something like that without React. This subtle difference is quite important and might be the root of a lot of problems, especially when trying to select elements with/without any classes using CSS selectors (e.g. `[class]`/`:not([class])`). diff --git a/blog_posts/react-rendering-basics.md b/blog_posts/react-rendering-basics.md index ae784bfef..96b9c0dfa 100644 --- a/blog_posts/react-rendering-basics.md +++ b/blog_posts/react-rendering-basics.md @@ -3,7 +3,7 @@ title: React rendering basics type: story tags: react,render authors: chalarangelo -cover: blog_images/react-rendering.jpg +cover: blog_images/comic-glasses.jpg excerpt: Take a deeper dive into React's rendering process and understand the basics behind the popular JavaScript framework. --- diff --git a/blog_posts/react-rendering-optimization.md b/blog_posts/react-rendering-optimization.md index 53f738ea5..e70ab6768 100644 --- a/blog_posts/react-rendering-optimization.md +++ b/blog_posts/react-rendering-optimization.md @@ -3,7 +3,7 @@ title: React rendering optimization type: story tags: react,render authors: chalarangelo -cover: blog_images/react-rendering.jpg +cover: blog_images/comic-glasses.jpg excerpt: Take a deeper dive into React's rendering process and understand how to make small yet powerful tweaks to optimize performance. --- diff --git a/blog_posts/react-rendering-state.md b/blog_posts/react-rendering-state.md index aaf3173db..7d0d3684c 100644 --- a/blog_posts/react-rendering-state.md +++ b/blog_posts/react-rendering-state.md @@ -3,7 +3,7 @@ title: React rendering state type: story tags: react,render authors: chalarangelo -cover: blog_images/react-rendering.jpg +cover: blog_images/comic-glasses.jpg excerpt: Take a deeper dive into React's rendering process and understand the role of the Context API and Redux in it. --- diff --git a/blog_posts/react-selected-option.md b/blog_posts/react-selected-option.md index bbc2d4b4b..3cea0cc32 100644 --- a/blog_posts/react-selected-option.md +++ b/blog_posts/react-selected-option.md @@ -3,7 +3,7 @@ title: How can I set the value of a select input in React? type: question tags: react,components,input authors: maciv -cover: blog_images/react-selected-option.jpg +cover: blog_images/two-doors.jpg excerpt: Learn of all the different ways to set the value of a selected input in React with this quick guide. --- diff --git a/blog_posts/regexp-cheatsheet.md b/blog_posts/regexp-cheatsheet.md index 0e7797e9d..064c739e9 100644 --- a/blog_posts/regexp-cheatsheet.md +++ b/blog_posts/regexp-cheatsheet.md @@ -3,7 +3,7 @@ title: Regular Expressions Cheat Sheet type: cheatsheet tags: javascript,string,regexp,cheatsheet authors: chalarangelo -cover: blog_images/cheatsheet1.jpg +cover: blog_images/tools.jpg excerpt: Regular expressions are a very useful tool in a variety of situations. Save this cheatsheet for any time you need to look up their syntax and speed up your development. --- diff --git a/blog_posts/testing-async-react-components.md b/blog_posts/testing-async-react-components.md index 89bbf1317..123958b9b 100644 --- a/blog_posts/testing-async-react-components.md +++ b/blog_posts/testing-async-react-components.md @@ -3,7 +3,7 @@ title: Testing React components that update asynchronously with React Testing Li type: story tags: react,testing,event authors: maciv,chalarangelo -cover: blog_images/testing-react-side-effects.jpg +cover: blog_images/colorful-lounge.jpg excerpt: Testing React components that update asynchronously with React Testing Library is a common scenario. Learn how to deal with common issues and speed up your testing. --- diff --git a/blog_posts/testing-redux-connected-components.md b/blog_posts/testing-redux-connected-components.md index ed35aa772..23a047bc6 100644 --- a/blog_posts/testing-redux-connected-components.md +++ b/blog_posts/testing-redux-connected-components.md @@ -3,7 +3,7 @@ title: Testing Redux-connected components with React Testing Library type: story tags: react,testing authors: chalarangelo -cover: blog_images/testing-redux-connected-components.jpg +cover: blog_images/sparkles.jpg excerpt: Testing Redux-connected components with React Testing Library is a very common scenario. Learn how to use this simple utility function to speed up your testing. --- diff --git a/blog_posts/testing-stateful-ui-components.md b/blog_posts/testing-stateful-ui-components.md index 461348aa5..83fbb3341 100644 --- a/blog_posts/testing-stateful-ui-components.md +++ b/blog_posts/testing-stateful-ui-components.md @@ -3,7 +3,7 @@ title: An approach to testing stateful React components type: story tags: react,testing authors: chalarangelo -cover: blog_images/testing-stateful-ui-components.jpg +cover: blog_images/lake-trees.jpg excerpt: Testing stateful React components is by no means a difficult task, but did you know there is an elegant solution that doesn't involve testing state directly? ---