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 275125da8..37c4f9ac7 100644 --- a/blog_posts/10-vs-code-extensions-for-js-developers.md +++ b/blog_posts/10-vs-code-extensions-for-js-developers.md @@ -5,6 +5,8 @@ tags: devtools,vscode authors: chalarangelo 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. +firstSeen: 2019-12-23T10:41:56+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Developers will most likely argue for the rest of eternity about the most productive code editor and the best extensions. Here are my personal extension preferences for VS Code as a JavaScript developer: diff --git a/blog_posts/25-css-gradients.md b/blog_posts/25-css-gradients.md index c630d8edd..617fc9b0e 100644 --- a/blog_posts/25-css-gradients.md +++ b/blog_posts/25-css-gradients.md @@ -5,6 +5,8 @@ tags: css,visual authors: chalarangelo cover: blog_images/colors-mural.jpg excerpt: We hand picked 25 of our favorite CSS gradients from uiGradients for your next design. Get them now! +firstSeen: 2021-01-08T22:30:37+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- [uiGradients](https://uigradients.com/) has an amazing collection of ready-to-use CSS gradients for pretty much anything. I highly recommend checking out the full collection. Meantime, here are our top picks in case you're looking for some color: diff --git a/blog_posts/4-javascript-array-methods.md b/blog_posts/4-javascript-array-methods.md index ad3ba97b4..35239c4c3 100644 --- a/blog_posts/4-javascript-array-methods.md +++ b/blog_posts/4-javascript-array-methods.md @@ -5,6 +5,8 @@ tags: javascript,array,cheatsheet authors: chalarangelo cover: blog_images/arrays.jpg excerpt: JavaScript arrays have a very robust API offering a plethora of amazing tools. Learn the 4 must-know JavaScript array methods in this quick guide. +firstSeen: 2020-08-03T21:37:03+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- JavaScript arrays have a very robust API offering a plethora of amazing tools. Here are our top 4 JavaScript array methods every developer should know: diff --git a/blog_posts/4-seo-tips-for-developers.md b/blog_posts/4-seo-tips-for-developers.md index 4ce2d4c1e..8a9c0b7c3 100644 --- a/blog_posts/4-seo-tips-for-developers.md +++ b/blog_posts/4-seo-tips-for-developers.md @@ -5,6 +5,8 @@ tags: seo,webdev authors: chalarangelo 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. +firstSeen: 2020-01-17T14:51:15+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- SEO is becoming increasingly relevant as the internet keeps growing. While most web developers usually have little experience with SEO, it is not particularly difficult to handle some of the basics. Here are my top SEO tips for web developers: diff --git a/blog_posts/5-tips-for-better-pull-requests.md b/blog_posts/5-tips-for-better-pull-requests.md index 373b98d55..73e00946e 100644 --- a/blog_posts/5-tips-for-better-pull-requests.md +++ b/blog_posts/5-tips-for-better-pull-requests.md @@ -6,6 +6,8 @@ authors: chalarangelo 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 +firstSeen: 2020-06-24T12:44:03+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Writing good code is only part of the job. Here are 5 tips to improve your pull requests and help people review them: diff --git a/blog_posts/6-javascript-regexp-tricks.md b/blog_posts/6-javascript-regexp-tricks.md index 0207e6fa9..a96b587be 100644 --- a/blog_posts/6-javascript-regexp-tricks.md +++ b/blog_posts/6-javascript-regexp-tricks.md @@ -5,6 +5,8 @@ tags: javascript,string,regexp authors: chalarangelo 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. +firstSeen: 2020-04-15T14:24:50+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Regular expressions, while very powerful, are notoriously hard to master. Here are 6 useful features that can help you start using them in your JavaScript projects: 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 38f7c770e..2313a35c8 100644 --- a/blog_posts/6-tips-for-your-next-remote-onboarding.md +++ b/blog_posts/6-tips-for-your-next-remote-onboarding.md @@ -6,6 +6,8 @@ authors: fejes713 cover: blog_images/golden-gate-bridge.jpg excerpt: Many developers find onboarding experience worrisome. Here are 6 helpful tips to make your onboarding experience a pleasant one. unlisted: true +firstSeen: 2020-05-03T16:00:59+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Many developers find onboarding experience worrisome. Here are 6 helpful tips to make your onboarding experience a pleasant one: diff --git a/blog_posts/7-chrome-extensions-for-web-developers.md b/blog_posts/7-chrome-extensions-for-web-developers.md index e339cbe20..961ff4bae 100644 --- a/blog_posts/7-chrome-extensions-for-web-developers.md +++ b/blog_posts/7-chrome-extensions-for-web-developers.md @@ -5,6 +5,8 @@ tags: devtools,webdev authors: chalarangelo 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. +firstSeen: 2020-03-18T12:37:31+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Google Chrome's developer tools are nothing short of amazing, but there are a few missing tools that can increase your productivity even further. Here are my personal favorite extensions that I use everyday: diff --git a/blog_posts/8-tips-for-accessible-websites.md b/blog_posts/8-tips-for-accessible-websites.md index e9054550c..fb15f5b48 100644 --- a/blog_posts/8-tips-for-accessible-websites.md +++ b/blog_posts/8-tips-for-accessible-websites.md @@ -5,6 +5,8 @@ tags: javascript,accessibility,webdev authors: chalarangelo 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. +firstSeen: 2020-05-20T14:10:13+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- 1. Use semantic HTML diff --git a/blog_posts/8-tips-for-remote-work.md b/blog_posts/8-tips-for-remote-work.md index ce22d6c4d..3cbb2c035 100644 --- a/blog_posts/8-tips-for-remote-work.md +++ b/blog_posts/8-tips-for-remote-work.md @@ -6,6 +6,8 @@ authors: chalarangelo 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 +firstSeen: 2020-03-12T22:14:41+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Working from home (also known as remote work) seems like a great alternative to going to the office every morning, but it comes with its own set of challenges that you need to overcome in order to stay healthy and productive. Here are my tips for achieving just that: diff --git a/blog_posts/async-javascript-cheatsheet.md b/blog_posts/async-javascript-cheatsheet.md index c41df8a20..514a8c39f 100644 --- a/blog_posts/async-javascript-cheatsheet.md +++ b/blog_posts/async-javascript-cheatsheet.md @@ -5,6 +5,8 @@ tags: javascript,function,promise authors: chalarangelo cover: blog_images/green-plant.jpg excerpt: Learn everything you need to know about promises and asynchronous JavaScript with this handy cheatsheet. +firstSeen: 2020-08-18T23:05:52+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Promise basics diff --git a/blog_posts/benefits-of-writing.md b/blog_posts/benefits-of-writing.md index 7596622ab..108ee2f4c 100644 --- a/blog_posts/benefits-of-writing.md +++ b/blog_posts/benefits-of-writing.md @@ -5,6 +5,8 @@ tags: career,webdev,programming,jobs authors: chalarangelo cover: blog_images/laptop-view.jpg excerpt: Writing about a topic can often sound boring or worthless. But there are significant benefits to doing it from time to time. +firstSeen: 2021-04-12T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- I was recently tasked with writing a design document at work. What first seemed like a tiresome chore I had to endure turned out to be both enlightening and beneficial both to me and my team. This isn't just a case of making the best of a bad situation, but rather a case of rediscovering the reason behind why writing down your thoughts isn't an excerise in futility. Instead of boring you with a long-winded story about the task, I'll just present the takeaways and hopefully do some storytelling in the process. So why should you write then? diff --git a/blog_posts/breaking-react.md b/blog_posts/breaking-react.md index 7532d6ac7..f53ac3e2e 100644 --- a/blog_posts/breaking-react.md +++ b/blog_posts/breaking-react.md @@ -5,6 +5,8 @@ tags: react,debugging authors: chalarangelo 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? +firstSeen: 2020-01-30T12:35:19+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- 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. diff --git a/blog_posts/code-anatomy-chaining-reduce-for-loop.md b/blog_posts/code-anatomy-chaining-reduce-for-loop.md index 625702a15..94a53c8ef 100644 --- a/blog_posts/code-anatomy-chaining-reduce-for-loop.md +++ b/blog_posts/code-anatomy-chaining-reduce-for-loop.md @@ -5,6 +5,8 @@ tags: javascript,array,object,iterator authors: chalarangelo 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. +firstSeen: 2020-05-19T14:27:18+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### For loops diff --git a/blog_posts/code-anatomy-optimizing-recursion.md b/blog_posts/code-anatomy-optimizing-recursion.md index f25477972..ef192358b 100644 --- a/blog_posts/code-anatomy-optimizing-recursion.md +++ b/blog_posts/code-anatomy-optimizing-recursion.md @@ -5,6 +5,8 @@ tags: javascript,recursion,performance authors: chalarangelo 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. +firstSeen: 2020-05-12T21:57:09+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Recursive functions diff --git a/blog_posts/code-anatomy-performant-python.md b/blog_posts/code-anatomy-performant-python.md index 4eb0d7705..f7f52a6e2 100644 --- a/blog_posts/code-anatomy-performant-python.md +++ b/blog_posts/code-anatomy-performant-python.md @@ -5,6 +5,8 @@ tags: python,list,performance authors: maciv,chalarangelo 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. +firstSeen: 2020-03-15T12:50:05+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Writing short and efficient Python code is not always easy or straightforward. However, it's often that we see a piece of code and we don't realize the thought process behind the way it was written. We will be taking a look at the [difference](/python/s/difference) snippet, which returns the difference between two iterables, in order to understand its structure. diff --git a/blog_posts/console-log-cheatsheet.md b/blog_posts/console-log-cheatsheet.md index 6a52f97fa..7dfee3039 100644 --- a/blog_posts/console-log-cheatsheet.md +++ b/blog_posts/console-log-cheatsheet.md @@ -5,6 +5,8 @@ tags: javascript,browser,cheatsheet authors: chalarangelo cover: blog_images/terminal.jpg excerpt: Level up your JavaScript logging with these `console.log()` tips and tricks. +firstSeen: 2021-02-25T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Everyone uses the JavaScript console for logging or debugging every once in a while. But there is a lot more to the [console](https://developer.mozilla.org/en-US/docs/Web/API/Console) object than `console.log()`. diff --git a/blog_posts/cookies-local-storage-session.md b/blog_posts/cookies-local-storage-session.md index 601432207..a5fac6ced 100644 --- a/blog_posts/cookies-local-storage-session.md +++ b/blog_posts/cookies-local-storage-session.md @@ -5,6 +5,8 @@ tags: javascript,browser,webdev authors: chalarangelo cover: blog_images/three-vases.jpg excerpt: Learn the difference between cookies, local storage and session storage and start using the correct option for your needs. +firstSeen: 2020-08-18T13:02:24+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Cookies diff --git a/blog_posts/copy-text-to-clipboard-with-javascript.md b/blog_posts/copy-text-to-clipboard-with-javascript.md index 5787a6210..ae22d791a 100644 --- a/blog_posts/copy-text-to-clipboard-with-javascript.md +++ b/blog_posts/copy-text-to-clipboard-with-javascript.md @@ -5,6 +5,8 @@ tags: javascript,browser authors: chalarangelo 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. +firstSeen: 2020-01-20T11:41:23+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Core functionality diff --git a/blog_posts/css-centering.md b/blog_posts/css-centering.md index 127b8b26c..a495ae35e 100644 --- a/blog_posts/css-centering.md +++ b/blog_posts/css-centering.md @@ -5,6 +5,8 @@ tags: css,layout authors: chalarangelo cover: blog_images/mountain-lake.jpg excerpt: Centering content with CSS might often feel tricky. Here are 4 easy tricks you can use in your code today. +firstSeen: 2021-02-22T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Flexbox diff --git a/blog_posts/css-easing-variables.md b/blog_posts/css-easing-variables.md index 17647d3c4..7abeeff5b 100644 --- a/blog_posts/css-easing-variables.md +++ b/blog_posts/css-easing-variables.md @@ -5,6 +5,8 @@ tags: css,animation authors: chalarangelo cover: blog_images/curve.jpg excerpt: Learn how to use the `cubic-bezier()` class of easing functions and create beautiful animations that stand out. +firstSeen: 2020-12-30T16:13:58+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Most web developers use the built-in `ease`, `ease-in`, `ease-out` or `ease-in-out` functions for most use-cases of `transition-timing-function` in their designs. While these are perfectly fine for everyday use, there's a far more powerful, yet intimidating option available, the [`bezier-curve()`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) function. diff --git a/blog_posts/css-pseudo-classes.md b/blog_posts/css-pseudo-classes.md index 9d7ea0fcc..3c65bf774 100644 --- a/blog_posts/css-pseudo-classes.md +++ b/blog_posts/css-pseudo-classes.md @@ -5,6 +5,8 @@ tags: css,webdev authors: chalarangelo cover: blog_images/orange-flower.jpg excerpt: Learn how to use CSS pseudo-classes to style an element based on changes to its state. +firstSeen: 2020-08-18T19:56:12+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- CSS pseudo-classes provide a way to style elements, based on changes to their state. For example, `:hover` can be used to apply additional styles to an element when the user's pointer hovers over it. diff --git a/blog_posts/css-units-cheatsheet.md b/blog_posts/css-units-cheatsheet.md index a2afe1135..cf2e5f3ee 100644 --- a/blog_posts/css-units-cheatsheet.md +++ b/blog_posts/css-units-cheatsheet.md @@ -5,6 +5,8 @@ tags: css,layout,cheatsheet authors: chalarangelo cover: blog_images/measuring.jpg excerpt: Learn everything you need to know about CSS units with this handy cheatsheet. +firstSeen: 2021-01-25T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- - `px`: Absolute pixel value diff --git a/blog_posts/css-variables.md b/blog_posts/css-variables.md index 3e04e1c59..9debeb473 100644 --- a/blog_posts/css-variables.md +++ b/blog_posts/css-variables.md @@ -5,6 +5,8 @@ tags: css,visual,layout authors: chalarangelo cover: blog_images/css-variables.jpg excerpt: Learn how CSS custom properties (CSS variables) work and what you can use them for in your code and designs. +firstSeen: 2020-03-09T19:39:30+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- CSS variables (officially called CSS custom properties) behave much like variables in other languages, allowing you to define named variables that contain specific values to be reused within the CSS document. They are defined using the custom property notation, which always start with two dashes (e.g. `--my-color: black;`) and are accessed using the `var()` function (e.g. `color: var(--my-color);`). Custom properties are exceptionally useful for sharing styles between different elements and components (e.g. vertical rhythm, typography variables, color palettes etc.). diff --git a/blog_posts/custom-file-download-names.md b/blog_posts/custom-file-download-names.md index 813c946fc..321415c3b 100644 --- a/blog_posts/custom-file-download-names.md +++ b/blog_posts/custom-file-download-names.md @@ -5,6 +5,8 @@ tags: webdev,html,browser authors: chalarangelo cover: blog_images/hard-disk.jpg excerpt: Learn what HTML5 attribute you can use to customize the names of your downloadable files with this quick tip. +firstSeen: 2021-01-11T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- HTML5 introduced a variety of convenient features that many of us use every day. As downloadable links aren't something I work with very often, I recently found out that you can use the `download` attribute on an `` element for much more than just making it trigger a download. In fact, you can pass it a string value that will act as the name of the downloadable file, effectively allowing you to customize its name: diff --git a/blog_posts/detect-caps-lock-is-on.md b/blog_posts/detect-caps-lock-is-on.md index a6b3cc859..d2f26f8fd 100644 --- a/blog_posts/detect-caps-lock-is-on.md +++ b/blog_posts/detect-caps-lock-is-on.md @@ -5,6 +5,8 @@ tags: javascript,browser,event authors: chalarangelo cover: blog_images/keyboard.jpg excerpt: If you need to check if Caps Lock is on when the user is typing in the browser, JavaScript's got you covered. +firstSeen: 2021-02-18T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Oftentimes, especially when creating password inputs, you need to check if the Caps Lock key is on and inform the user. You can do that using the [`KeyboardEvent.getModifierState()`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState) method with a value of `'CapsLock'`. This means that you have to listen for a keyboard event on an element in order to check the state of the Caps Lock key: diff --git a/blog_posts/eslint-refactor-for-in.md b/blog_posts/eslint-refactor-for-in.md index 9c4cdff4d..1f50aab60 100644 --- a/blog_posts/eslint-refactor-for-in.md +++ b/blog_posts/eslint-refactor-for-in.md @@ -5,6 +5,8 @@ tags: javascript,array,iterator,eslint authors: chalarangelo 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. +firstSeen: 2020-05-19T02:32:10+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ESLint is one of my tools of choice, but oftentimes it gets in the way of work, due to the way it prefers me to do things. One of the warnings I have seen more times than I care to admit is the following: diff --git a/blog_posts/flexbox-cheatsheet.md b/blog_posts/flexbox-cheatsheet.md index bef45c7a7..34cb3e917 100644 --- a/blog_posts/flexbox-cheatsheet.md +++ b/blog_posts/flexbox-cheatsheet.md @@ -5,6 +5,8 @@ tags: css,layout,flexbox,cheatsheet authors: chalarangelo 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. +firstSeen: 2020-05-02T00:21:49+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Container diff --git a/blog_posts/git-aliases.md b/blog_posts/git-aliases.md index c44f760f1..236c2c855 100644 --- a/blog_posts/git-aliases.md +++ b/blog_posts/git-aliases.md @@ -5,6 +5,8 @@ tags: git,configuration,cheatsheet authors: chalarangelo cover: blog_images/organizer.jpg excerpt: Increase your productivity by creating aliases for many common git operations. +firstSeen: 2021-04-29T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Creating aliases diff --git a/blog_posts/git-commit-different-date.md b/blog_posts/git-commit-different-date.md index 2209c9d8b..1d81b4f06 100644 --- a/blog_posts/git-commit-different-date.md +++ b/blog_posts/git-commit-different-date.md @@ -5,6 +5,8 @@ tags: git,commit authors: chalarangelo cover: blog_images/ice.jpg excerpt: Ever needed to create a git commit with a different date? Here's a quick and easy way to do it. +firstSeen: 2021-04-22T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Sometimes, you might run into a situation where you need to create a commit with a different date than the current one. Luckily, you can handle this using `GIT_AUTHOR_DATE` and `GIT_COMMITTER_DATE`: diff --git a/blog_posts/github-co-authors.md b/blog_posts/github-co-authors.md index 36f66bc90..e3a38347a 100644 --- a/blog_posts/github-co-authors.md +++ b/blog_posts/github-co-authors.md @@ -5,6 +5,8 @@ tags: git,github,programming,webdev authors: chalarangelo cover: blog_images/book-chair.jpg excerpt: Learn how to add multiple authors to a git commit with this quick and easy tip. +firstSeen: 2020-08-18T12:14:24+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- You can add multiple authors to a git commit, by adding one or more `Co-authored-by` trailers to the commit's message: diff --git a/blog_posts/http-status-codes-cheatsheet.md b/blog_posts/http-status-codes-cheatsheet.md index b478ce584..5a13e4023 100644 --- a/blog_posts/http-status-codes-cheatsheet.md +++ b/blog_posts/http-status-codes-cheatsheet.md @@ -5,6 +5,8 @@ tags: webdev,http authors: chalarangelo cover: blog_images/lake-runner.jpg excerpt: Familiarize yourself with the most common HTTP status codes with this handy cheatsheet. +firstSeen: 2021-05-20T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### 1xx - Informational diff --git a/blog_posts/javascript-array-comparison.md b/blog_posts/javascript-array-comparison.md index 618a44629..c9a8717c2 100644 --- a/blog_posts/javascript-array-comparison.md +++ b/blog_posts/javascript-array-comparison.md @@ -5,6 +5,8 @@ tags: javascript,array,comparison authors: chalarangelo cover: blog_images/coconuts.jpg excerpt: Learn how you can compare two arrays in JavaScript using various different techniques. +firstSeen: 2020-08-07T14:23:14+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Equality comparison diff --git a/blog_posts/javascript-arrow-function-event-listeners.md b/blog_posts/javascript-arrow-function-event-listeners.md index 2d744898a..7d44b79cf 100644 --- a/blog_posts/javascript-arrow-function-event-listeners.md +++ b/blog_posts/javascript-arrow-function-event-listeners.md @@ -5,6 +5,8 @@ tags: javascript,browser,event,function authors: chalarangelo cover: blog_images/arrow-functions.jpg excerpt: Learn the differences between JavaScript ES6 arrow functions and regular functions and how they affect event listener callbacks. +firstSeen: 2020-08-04T15:29:43+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Arrow functions diff --git a/blog_posts/javascript-arrow-functions.md b/blog_posts/javascript-arrow-functions.md index 18b7cfdac..5024f1979 100644 --- a/blog_posts/javascript-arrow-functions.md +++ b/blog_posts/javascript-arrow-functions.md @@ -5,6 +5,8 @@ tags: javascript,function authors: chalarangelo cover: blog_images/arrow-functions.jpg excerpt: JavaScript arrow functions are a very useful tool to learn and master. Here's a complete introduction to everything you need to know. +firstSeen: 2021-04-08T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Syntax diff --git a/blog_posts/javascript-async-array-loops.md b/blog_posts/javascript-async-array-loops.md index 2e82bfd18..944790512 100644 --- a/blog_posts/javascript-async-array-loops.md +++ b/blog_posts/javascript-async-array-loops.md @@ -5,6 +5,8 @@ tags: javascript,array,function,promise authors: chalarangelo cover: blog_images/sunflowers.jpg excerpt: Asynchronously looping over arrays in JavaScript comes with a few caveats you should watch out for. +firstSeen: 2021-05-17T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Asynchronous operations seem to trip up a lot of developers. This is especially true when combined with looping over arrays, as there are some caveats that come with each option available. diff --git a/blog_posts/javascript-await-timeout.md b/blog_posts/javascript-await-timeout.md index a86513f78..83c8ff837 100644 --- a/blog_posts/javascript-await-timeout.md +++ b/blog_posts/javascript-await-timeout.md @@ -5,6 +5,8 @@ tags: javascript,promise,timeout,class authors: chalarangelo cover: blog_images/walking.jpg excerpt: Oftentimes you might need to add a timeout to a promise in JavaScript. Learn how to do this and more in this short guide. +firstSeen: 2021-05-13T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Many times in the past I've found myself needing to add a timeout to a promise in JavaScript. `setTimeout()` is not exactly a perfect tool for the job, but it's easy enough to wrap it into a promise: diff --git a/blog_posts/javascript-boolean-function.md b/blog_posts/javascript-boolean-function.md index f818259f6..66b527887 100644 --- a/blog_posts/javascript-boolean-function.md +++ b/blog_posts/javascript-boolean-function.md @@ -5,6 +5,8 @@ tags: javascript,function,type authors: chalarangelo cover: blog_images/rocky-lake.jpg excerpt: JavaScript's built-in Boolean function can be very useful for truth-checking data among other things. Learn how to use it and level up your code today. +firstSeen: 2020-09-18T16:28:30+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- JavaScript's built-in [`Boolean`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) is one of those things I find myself suggesting in code reviews quite often as of late, so I thought I could share some tips about it with the world. diff --git a/blog_posts/javascript-closures.md b/blog_posts/javascript-closures.md index ae9ee1f52..a8ee47292 100644 --- a/blog_posts/javascript-closures.md +++ b/blog_posts/javascript-closures.md @@ -5,6 +5,8 @@ tags: javascript,function,closure authors: chalarangelo cover: blog_images/cherry-trees.jpg excerpt: Learn and understand closures, a core concept in JavaScript programming, and level up your code. +firstSeen: 2020-08-04T12:40:08+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Closures are a JavaScript concept that comes up quite a lot, especially during interviews. While they sound confusing, they are not all that complicated and you have probably already used them in your code regardless of your expertise level. Let's start with what a closure is: diff --git a/blog_posts/javascript-copy-array.md b/blog_posts/javascript-copy-array.md index 3755fa911..24fc3fddc 100644 --- a/blog_posts/javascript-copy-array.md +++ b/blog_posts/javascript-copy-array.md @@ -5,6 +5,8 @@ tags: javascript,array authors: chalarangelo cover: blog_images/colorful-plastic.jpg excerpt: Pick up a few new tricks which you can use to clone arrays in JavaScript. +firstSeen: 2021-03-15T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- JavaScript provides quite a few ways to clone an array, most of which are pretty similar in terms of performance and results. Here's a quick rundown of some of the available options. diff --git a/blog_posts/javascript-deep-freeze-object.md b/blog_posts/javascript-deep-freeze-object.md index 76cf1d0de..aba4f9673 100644 --- a/blog_posts/javascript-deep-freeze-object.md +++ b/blog_posts/javascript-deep-freeze-object.md @@ -5,6 +5,8 @@ tags: javascript,object authors: chalarangelo 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. +firstSeen: 2020-03-17T16:15:30+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Objects in JavaScript are mutable, regardless if you define them as `const` variables or not. In fact, using `const` when defining an object only prevents the variable from being reassigned. However, you can reassign the properties of a `const` object or array, like this: diff --git a/blog_posts/javascript-destructuring-assignment.md b/blog_posts/javascript-destructuring-assignment.md index 036010fa9..741480546 100644 --- a/blog_posts/javascript-destructuring-assignment.md +++ b/blog_posts/javascript-destructuring-assignment.md @@ -5,6 +5,8 @@ tags: javascript,array,object authors: chalarangelo cover: blog_images/building-blocks.jpg excerpt: Learn the basics of the destructuring assignment syntax in JavaScript ES6 and improve your code with this easy guide. +firstSeen: 2021-02-01T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- The destructuring assignment syntax, first introduced in JavaScript ES6, allows the unpacking of values from arrays and objects into distinct variables. While it might seem intimidating at first, it's actually quite easy to learn and use. Let's break it down into easier to understand cases. diff --git a/blog_posts/javascript-empty-array.md b/blog_posts/javascript-empty-array.md index 20838105e..131f21b52 100644 --- a/blog_posts/javascript-empty-array.md +++ b/blog_posts/javascript-empty-array.md @@ -5,6 +5,8 @@ tags: javascript,array authors: chalarangelo cover: blog_images/coconuts.jpg excerpt: You can use a lot of different techniques to empty an array in JavaScript. See which ones best suits your needs with this quick guide. +firstSeen: 2021-03-08T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- When working with JavaScript arrays, a pretty common question is how does one empty an array and remove all its elements. As it turns out, there are a few ways you can go about this, each one with its pros and cons. diff --git a/blog_posts/javascript-encodeuri-encodeuricomponent.md b/blog_posts/javascript-encodeuri-encodeuricomponent.md index 63f296979..908817e16 100644 --- a/blog_posts/javascript-encodeuri-encodeuricomponent.md +++ b/blog_posts/javascript-encodeuri-encodeuricomponent.md @@ -5,6 +5,8 @@ tags: javascript,browser authors: chalarangelo cover: blog_images/laptop-view.jpg excerpt: JavaScript provides two methods for encoding characters to URL-safe strings. Do you know when to use each one? +firstSeen: 2021-01-07T10:41:38+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### encodeURIComponent() diff --git a/blog_posts/javascript-enum.md b/blog_posts/javascript-enum.md index 38f293d8f..a21407ed7 100644 --- a/blog_posts/javascript-enum.md +++ b/blog_posts/javascript-enum.md @@ -5,6 +5,8 @@ tags: javascript,object,class,symbol,generator authors: chalarangelo cover: blog_images/book-chair.jpg excerpt: Enums are part of TypeScript, but what about defininf enums in plain old JavaScript? Here are a few way you can do that. +firstSeen: 2021-05-24T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- TypeScript's enums are a very convenient feature present in many other languages. JavaScript, however, does not have a similar concept at this time. But what JavaScript lacks in syntactic sugar it makes up for in terms of flexibility. diff --git a/blog_posts/javascript-equality.md b/blog_posts/javascript-equality.md index 5f555c3ba..bc9fa00a8 100644 --- a/blog_posts/javascript-equality.md +++ b/blog_posts/javascript-equality.md @@ -5,6 +5,8 @@ tags: javascript,type,comparison authors: chalarangelo 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. +firstSeen: 2020-08-06T19:52:30+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- JavaScript provides two equality operators used for comparisons: diff --git a/blog_posts/javascript-event-bubbling-capturing-delegation.md b/blog_posts/javascript-event-bubbling-capturing-delegation.md index 67b71fa7c..c2dc0df2b 100644 --- a/blog_posts/javascript-event-bubbling-capturing-delegation.md +++ b/blog_posts/javascript-event-bubbling-capturing-delegation.md @@ -5,6 +5,8 @@ tags: javascript,browser,event authors: chalarangelo 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. +firstSeen: 2020-08-10T15:00:48+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Event bubbling diff --git a/blog_posts/javascript-for-in-for-of-foreach.md b/blog_posts/javascript-for-in-for-of-foreach.md index 5f9b14cf6..8c10b6c8b 100644 --- a/blog_posts/javascript-for-in-for-of-foreach.md +++ b/blog_posts/javascript-for-in-for-of-foreach.md @@ -5,6 +5,8 @@ tags: javascript,array,object,iterator authors: chalarangelo 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. +firstSeen: 2020-01-20T10:12:31+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- `for...in` is used to iterate over all enumerable properties of an object, including inherited enumerable properties. diff --git a/blog_posts/javascript-for-loop-early-break.md b/blog_posts/javascript-for-loop-early-break.md index 33eca432c..a4fe0d78a 100644 --- a/blog_posts/javascript-for-loop-early-break.md +++ b/blog_posts/javascript-for-loop-early-break.md @@ -5,6 +5,8 @@ tags: javascript,array,loop authors: chalarangelo cover: blog_images/armchair.jpg excerpt: JavaScript provides a handful of ways to iterate over data. While array methods are usually preferred, there are cases where a `for` loop is actually the best option. +firstSeen: 2021-05-27T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- The usefulness of the humble `for` loop in modern JavaScript is rarely talked about. Apart from it being particularly useful in [asynchronous operation scenarios](/blog/s/javascript-async-array-loops), it can also make your code a lot more performant shall you need to break out of a loop early. Consider the following example: diff --git a/blog_posts/javascript-function-call-apply-bind.md b/blog_posts/javascript-function-call-apply-bind.md index c237eb0cd..96dced4ca 100644 --- a/blog_posts/javascript-function-call-apply-bind.md +++ b/blog_posts/javascript-function-call-apply-bind.md @@ -5,6 +5,8 @@ tags: javascript,function authors: chalarangelo 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. +firstSeen: 2020-11-06T13:37:10+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Function.prototype.call() diff --git a/blog_posts/javascript-higher-order-functions.md b/blog_posts/javascript-higher-order-functions.md index 357ff1564..551d05134 100644 --- a/blog_posts/javascript-higher-order-functions.md +++ b/blog_posts/javascript-higher-order-functions.md @@ -5,6 +5,8 @@ tags: javascript,function authors: chalarangelo 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. +firstSeen: 2020-09-24T12:54:08+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Higher-order functions are functions that operate on other functions, either by taking them as arguments or by returning them as their results. This allows us to create an abstraction layer over actions, not just values. diff --git a/blog_posts/javascript-iife.md b/blog_posts/javascript-iife.md index d4c954068..da670ac11 100644 --- a/blog_posts/javascript-iife.md +++ b/blog_posts/javascript-iife.md @@ -5,6 +5,8 @@ tags: javascript,function authors: chalarangelo cover: blog_images/tropical-waterfall.jpg excerpt: An Immediately Invoked Function Expression (IIFE) is a JavaScript trick that trips up many developers. Here's what you need to know. +firstSeen: 2021-06-14T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- An **Immediately Invoked Function Expression** (IIFE for short) is a JavaScript function that is immediately invoked as soon as it's evaluated by the JavaScript runtime. Here's what it looks like alongside a roughly equivalent piece of code: diff --git a/blog_posts/javascript-iterable-to-array.md b/blog_posts/javascript-iterable-to-array.md index f95582dcd..4a5f17277 100644 --- a/blog_posts/javascript-iterable-to-array.md +++ b/blog_posts/javascript-iterable-to-array.md @@ -5,6 +5,8 @@ tags: javascript,object,array,string authors: chalarangelo cover: blog_images/waves.jpg excerpt: Learn how to use the JavaScript ES6 spread syntax to converting iterables to arrays and level up your code today. +firstSeen: 2020-08-04T14:18:09+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- JavaScript ES6 introduced, among many other things, the [spread operator (`...`)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax), which allows an iterable to be expanded in places where zero or more arguments or elements are expected. diff --git a/blog_posts/javascript-iterators.md b/blog_posts/javascript-iterators.md index 986d73b2b..4ea5cbf0b 100644 --- a/blog_posts/javascript-iterators.md +++ b/blog_posts/javascript-iterators.md @@ -5,6 +5,8 @@ tags: javascript,array,object,iterator authors: chalarangelo 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. +firstSeen: 2020-02-16T13:09:20+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- JavaScript iterators were introduced in ES6 and they are used to loop over a sequence of values, usually some sort of collection. By definition, an iterator must implement a `next()` function, that returns an object in the form of `{ value, done }` where `value` is the next value in the iteration sequence and `done` is a boolean determining if the sequence has already been consumed. diff --git a/blog_posts/javascript-listen-once.md b/blog_posts/javascript-listen-once.md index e9b61cb07..5d38af249 100644 --- a/blog_posts/javascript-listen-once.md +++ b/blog_posts/javascript-listen-once.md @@ -5,6 +5,8 @@ tags: javascript,browser,event authors: maciv 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. +firstSeen: 2020-08-12T11:21:48+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### jQuery diff --git a/blog_posts/javascript-make-iterable.md b/blog_posts/javascript-make-iterable.md index 9cc8e4194..a57962193 100644 --- a/blog_posts/javascript-make-iterable.md +++ b/blog_posts/javascript-make-iterable.md @@ -5,6 +5,8 @@ tags: javascript,array,iterator,generator authors: chalarangelo cover: blog_images/colorful-plastic.jpg excerpt: Did you know you can define an iterator for any JavaScript value? This quick tip will show you how. +firstSeen: 2021-06-10T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- JavaScript's `Symbol.iterator` is a very powerful tool that every web developer should learn how to use. It allows you to define and customize the way a value is iterated, effectively allowing you to make any value iterable. You can easily apply this knowledge to plain JavaScript objects and even classes. diff --git a/blog_posts/javascript-memoization.md b/blog_posts/javascript-memoization.md index 7c64e1dca..f4aa5f3a2 100644 --- a/blog_posts/javascript-memoization.md +++ b/blog_posts/javascript-memoization.md @@ -5,6 +5,8 @@ tags: javascript,function,memoization authors: chalarangelo 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. +firstSeen: 2020-02-27T16:23:25+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Memoization is a commonly used technique that you can use to speed up your code significantly. It uses a cache to store results, so that subsequent calls of time-consuming functions do not perform the same work another time. Based on this definition, we can easily extract some criteria that can help us decide when to use memoization in our code: diff --git a/blog_posts/javascript-merge-arrays.md b/blog_posts/javascript-merge-arrays.md index 86cabbba6..264c66c0b 100644 --- a/blog_posts/javascript-merge-arrays.md +++ b/blog_posts/javascript-merge-arrays.md @@ -5,6 +5,8 @@ tags: javascript,array authors: chalarangelo cover: blog_images/arrays.jpg excerpt: Arrays are one of the most used data types in any programming language. Learn how to merge two arrays in JavaScript with this short guide. +firstSeen: 2020-08-04T13:25:38+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Spread operator diff --git a/blog_posts/javascript-modify-url-without-reload.md b/blog_posts/javascript-modify-url-without-reload.md index fc05f1260..de25683ca 100644 --- a/blog_posts/javascript-modify-url-without-reload.md +++ b/blog_posts/javascript-modify-url-without-reload.md @@ -5,6 +5,8 @@ tags: javascript,browser authors: chalarangelo 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. +firstSeen: 2020-03-27T13:48:27+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Using the History API diff --git a/blog_posts/javascript-module-cheatsheet.md b/blog_posts/javascript-module-cheatsheet.md index ee7d179ca..4d97bd618 100644 --- a/blog_posts/javascript-module-cheatsheet.md +++ b/blog_posts/javascript-module-cheatsheet.md @@ -5,6 +5,8 @@ tags: javascript,cheatsheet authors: chalarangelo cover: blog_images/mountain-lake-2.jpg excerpt: Learn everything you need to know about JavaScript modules with this handy cheatsheet. +firstSeen: 2020-08-04T19:41:35+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Named exports diff --git a/blog_posts/javascript-naming-conventions.md b/blog_posts/javascript-naming-conventions.md index 735f589f7..24588bca1 100644 --- a/blog_posts/javascript-naming-conventions.md +++ b/blog_posts/javascript-naming-conventions.md @@ -5,6 +5,8 @@ tags: javascript,variable,cheatsheet authors: chalarangelo 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. +firstSeen: 2020-05-20T02:32:10+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Variables diff --git a/blog_posts/javascript-nullish-coalescing-optional-chaining.md b/blog_posts/javascript-nullish-coalescing-optional-chaining.md index debe99d24..bd608734f 100644 --- a/blog_posts/javascript-nullish-coalescing-optional-chaining.md +++ b/blog_posts/javascript-nullish-coalescing-optional-chaining.md @@ -5,6 +5,8 @@ tags: javascript,type authors: chalarangelo cover: blog_images/purple-leaves.jpg excerpt: JavaScript ES2020 introduced optional chaining and nullish coalescing among other features. Learn everything you need to know with this quick guide. +firstSeen: 2020-08-19T15:37:22+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- JavaScript ES2020 introduced some new features that help us write cleaner code. Let's take a quick look at two of them that aim to make working with objects and variables a lot easier. diff --git a/blog_posts/javascript-object-array-proxy.md b/blog_posts/javascript-object-array-proxy.md index 956ba2fba..858e49120 100644 --- a/blog_posts/javascript-object-array-proxy.md +++ b/blog_posts/javascript-object-array-proxy.md @@ -5,6 +5,8 @@ tags: javascript,object,array,proxy,iterator,pattern authors: chalarangelo cover: blog_images/birds.jpg excerpt: Learn how you can leverage the Proxy object to use a JavaScript object the same way as you would use a regular array. +firstSeen: 2021-05-03T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- While messing around with some code the other day, I stumbled upon a case where I received an object, the values of which I needed to repeatedly handle as a regular array. This was, of course, achievable using `Object.keys()`, `Object.values()` or `Object.entries()`, but it started getting verbose real quick. diff --git a/blog_posts/javascript-object-is-triple-equals.md b/blog_posts/javascript-object-is-triple-equals.md index c59cb79c3..adf4e6248 100644 --- a/blog_posts/javascript-object-is-triple-equals.md +++ b/blog_posts/javascript-object-is-triple-equals.md @@ -5,6 +5,8 @@ tags: javascript,object,type authors: chalarangelo cover: blog_images/rocky-mountains.jpg excerpt: "`Object.is()` and the triple equals operator (`===`) can both be used for equality checking in JavaScript, but when should you use each one?" +firstSeen: 2021-03-04T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- If you want to check equality in JavaScript, there are two comparison operators, which are explained in depth in a previous [article](/blog/s/javascript-equality). diff --git a/blog_posts/javascript-prevent-string-being-escaped.md b/blog_posts/javascript-prevent-string-being-escaped.md index 54625477e..48c3d2b12 100644 --- a/blog_posts/javascript-prevent-string-being-escaped.md +++ b/blog_posts/javascript-prevent-string-being-escaped.md @@ -5,6 +5,8 @@ tags: javascript,string authors: chalarangelo cover: blog_images/glass-blowing.jpg excerpt: Strings in JavaScript can be escaped in various ways. But what if you need to prevent a string from being escaped? Here's a handy trick for that. +firstSeen: 2021-06-17T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- By default, when JavaScript sees an escape character (`\`), it will escape the character after it. However, there are cases where you might not want this behavior (e.g. when you want to store a Windows path as a string). For these cases, you can use a template literal and the `String.raw()` tag function: diff --git a/blog_posts/javascript-primitive-instanceof.md b/blog_posts/javascript-primitive-instanceof.md index 52b0df406..08749a645 100644 --- a/blog_posts/javascript-primitive-instanceof.md +++ b/blog_posts/javascript-primitive-instanceof.md @@ -5,6 +5,8 @@ tags: javascript,type authors: chalarangelo cover: blog_images/wooden-bowl.jpg excerpt: JavaScript's `instanceof` operator can't be used with primitive values, but there are a couple of simple tricks that you can leverage to your advantage. +firstSeen: 2021-03-25T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- JavaScript provides two operators for typechecking: diff --git a/blog_posts/javascript-promise-then-catch.md b/blog_posts/javascript-promise-then-catch.md index 39847af63..32e0d1e42 100644 --- a/blog_posts/javascript-promise-then-catch.md +++ b/blog_posts/javascript-promise-then-catch.md @@ -5,6 +5,8 @@ tags: javascript,function,promise authors: chalarangelo cover: blog_images/blue-sunrise.jpg excerpt: Messing up the order of chained `then` and `catch` methods in JavaScript promises can result in all sorts of problems. Here's a short primer on the subject. +firstSeen: 2021-04-26T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Many if not most promise-related headaches come from incorrectly ordered `Promise.prototype.then()` and `Promise.prototype.catch()` methods. The order in which these methods are chained to a promise can lead to very different behaviors. Let's take a look at a very simple example: diff --git a/blog_posts/javascript-promise-then-finally.md b/blog_posts/javascript-promise-then-finally.md index 646bf5510..16ba5af2b 100644 --- a/blog_posts/javascript-promise-then-finally.md +++ b/blog_posts/javascript-promise-then-finally.md @@ -5,6 +5,8 @@ tags: javascript,function,promise authors: chalarangelo cover: blog_images/blue-sunrise.jpg excerpt: On the surface, a JavaScript promise's `then` and `finally` methods seem very similar. But there are a few important differences you need to keep in mind. +firstSeen: 2021-03-18T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- On the surface, `Promise.prototype.then()` and `Promise.prototype.finally` seem very similar. But there are a few important differences you need to keep in mind. diff --git a/blog_posts/javascript-query-selector-shorthand.md b/blog_posts/javascript-query-selector-shorthand.md index c7673bdc8..5bd2e6242 100644 --- a/blog_posts/javascript-query-selector-shorthand.md +++ b/blog_posts/javascript-query-selector-shorthand.md @@ -5,6 +5,8 @@ tags: javascript,browser authors: chalarangelo cover: blog_images/pineapple-at-work.jpg excerpt: Ever wanted to create your own jquery-like query selector shorthand? Here's how! +firstSeen: 2021-02-08T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Most of us are familiar with jquery and probably quite a few of us are familiar with the Chrome console's `$` and `$$` shorthands for query selectors. I recently figured out a way to replicate these shorthands in my code, using `Document.querySelector()`, `Document.querySelectorAll()` and `Function.prototype.bind()`. Here's how to do it, just make sure you don't mix them up with jquery if you are still using it: diff --git a/blog_posts/javascript-range-generator.md b/blog_posts/javascript-range-generator.md index 098584403..cf131c3b1 100644 --- a/blog_posts/javascript-range-generator.md +++ b/blog_posts/javascript-range-generator.md @@ -5,6 +5,8 @@ tags: javascript,function,array authors: chalarangelo cover: blog_images/generator.jpg excerpt: Learn how to use JavaScript ES6 generators and iterators to iterate over ranges of numbers. +firstSeen: 2020-08-04T16:28:16+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Generator functions diff --git a/blog_posts/javascript-remove-object-property.md b/blog_posts/javascript-remove-object-property.md index ba945be8a..72f67292c 100644 --- a/blog_posts/javascript-remove-object-property.md +++ b/blog_posts/javascript-remove-object-property.md @@ -5,6 +5,8 @@ tags: javascript,object authors: chalarangelo cover: blog_images/brown-bird.jpg excerpt: Ever wanted to delete a property from a JavaScript object? Here are a few way you can accomplish that. +firstSeen: 2021-03-22T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- When working with objects in JavaScript, you might come across situations where a property should be completely removed from an object. To accomplish that, there a few options you have at your disposal: diff --git a/blog_posts/javascript-return-constructor.md b/blog_posts/javascript-return-constructor.md index 13b0461e9..48bd86df5 100644 --- a/blog_posts/javascript-return-constructor.md +++ b/blog_posts/javascript-return-constructor.md @@ -5,6 +5,8 @@ tags: javascript,function,class,object authors: chalarangelo cover: blog_images/architectural.jpg excerpt: The constructor is arguably the most crucial part of any JavaScript class, which is why you might want to take a closer look at what they return. +firstSeen: 2020-09-30T19:35:32+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- The `constructor` method is a special method of a class for creating and initializing an object of that class. However, there is a little bit of magic involved around it, especially when it comes to its return value. This magic is nothing really complicated, but it seems to often confuse developers. diff --git a/blog_posts/javascript-shallow-deep-clone.md b/blog_posts/javascript-shallow-deep-clone.md index e85bbab78..931b81379 100644 --- a/blog_posts/javascript-shallow-deep-clone.md +++ b/blog_posts/javascript-shallow-deep-clone.md @@ -5,6 +5,8 @@ tags: javascript,object authors: chalarangelo 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. +firstSeen: 2020-04-14T16:19:56+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- JavaScript's primitive data types, such as numbers, strings, null, undefined and booleans are immutable, meaning their value cannot change once created. However, objects and arrays are mutable, allowing their value to be altered after creation. What this means in practice is that primitives are passed by value, whereas objects and arrays are passed by reference. Consider the following example: diff --git a/blog_posts/javascript-singleton-proxy.md b/blog_posts/javascript-singleton-proxy.md index 6daba9570..aa1c53ec6 100644 --- a/blog_posts/javascript-singleton-proxy.md +++ b/blog_posts/javascript-singleton-proxy.md @@ -5,6 +5,8 @@ tags: javascript,object,function,proxy,pattern authors: chalarangelo cover: blog_images/obelisk.jpg excerpt: Learn how to implement a singleton, a commonly used software design pattern, in JavaScript using the Proxy object. +firstSeen: 2020-02-25T16:02:03+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- A singleton is an object-oriented software design pattern which ensures a given class is only ever instantiated once and can be quite useful in many different situations, such as creating global objects and components shared across an application. While JavaScript supports object-oriented programming, it doesn't seem to provide many simple options to implement this pattern. diff --git a/blog_posts/javascript-sleep.md b/blog_posts/javascript-sleep.md index 71ad17ce6..2a8e6303d 100644 --- a/blog_posts/javascript-sleep.md +++ b/blog_posts/javascript-sleep.md @@ -5,6 +5,8 @@ tags: javascript,date,promise authors: chalarangelo cover: blog_images/sleepy-cat.jpg excerpt: Learn all the different ways you can implement a `sleep()` function in JavaScript. +firstSeen: 2020-08-04T20:08:54+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- JavaScript does not come with a `sleep()` function out of the box and that is probably a good idea considering the environments where it runs and the trouble such a function could cause if used incorrectly. The closest equivalent of such a function is `setTimeout`, however there are other, less common ways to implement a function that will freeze the current thread for a specified amount of time. diff --git a/blog_posts/javascript-spread-rest-syntax.md b/blog_posts/javascript-spread-rest-syntax.md index d20419d99..9b6ea5c1d 100644 --- a/blog_posts/javascript-spread-rest-syntax.md +++ b/blog_posts/javascript-spread-rest-syntax.md @@ -5,6 +5,8 @@ tags: javascript,array,function authors: chalarangelo cover: blog_images/antelope.jpg excerpt: JavaScript ES6 introduced us to several powerful features, such as the spread and rest syntax. Learn everything you need to know in this quick guide. +firstSeen: 2021-02-15T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Spread syntax diff --git a/blog_posts/javascript-store-dom-items.md b/blog_posts/javascript-store-dom-items.md index daa7bad2e..caf87c944 100644 --- a/blog_posts/javascript-store-dom-items.md +++ b/blog_posts/javascript-store-dom-items.md @@ -5,6 +5,8 @@ tags: javascript,browser authors: chalarangelo cover: blog_images/armchair.jpg excerpt: Increase your JavaScript code's performance when working with the DOM by leveraging this simple trick. +firstSeen: 2020-11-20T09:18:55+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- DOM operations, including accessing the DOM, are generally slow. This is usually not a problem until you have to perform many DOM operations and your JavaScript application's performance starts to suffer. A very quick trick to increase performance is to store DOM elements or their values in local variables if you plan to access them multiple times. diff --git a/blog_posts/javascript-swap-two-variables.md b/blog_posts/javascript-swap-two-variables.md index 7661b145e..1ee733a41 100644 --- a/blog_posts/javascript-swap-two-variables.md +++ b/blog_posts/javascript-swap-two-variables.md @@ -5,6 +5,8 @@ tags: javascript,array,variables authors: chalarangelo 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. +firstSeen: 2020-04-27T14:12:51+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- In the past, swapping the values of two variables in JavaScript required an intermediate variable to store one of the values while swapping, which would result in something similar to this: diff --git a/blog_posts/javascript-switch-object.md b/blog_posts/javascript-switch-object.md index 24c20f64d..0d5ffa7fe 100644 --- a/blog_posts/javascript-switch-object.md +++ b/blog_posts/javascript-switch-object.md @@ -5,6 +5,8 @@ tags: javascript,object authors: chalarangelo cover: blog_images/rocky-lake.jpg excerpt: JavaScript's `switch` statement often feels hard to remember and a little bit out of place. Maybe it's time to use object literals, instead. +firstSeen: 2021-04-01T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- JavaScript's `switch` statement is one of the few things I find hard to remember the syntax for (so glad VS Code has autocomplete). It also feels a little bit out of place syntactically, as it's the only thing that doesn't use curly braces and you need to remember to `break` for every `case`. Moreover, its performance is less than stellar as its control flow is procedural. diff --git a/blog_posts/javascript-target-blank.md b/blog_posts/javascript-target-blank.md index 68f5f2083..f7d46da34 100644 --- a/blog_posts/javascript-target-blank.md +++ b/blog_posts/javascript-target-blank.md @@ -5,6 +5,8 @@ tags: javascript,browser,security authors: chalarangelo cover: blog_images/laptop-with-code.jpg excerpt: Opening a link in a new tab comes with a security vulnerability that you may not be aware of. Protect your users with this simple trick. +firstSeen: 2020-11-20T09:19:07+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Oftentimes, when linking to an external resource from our websites, we use `target="_blank"` to open the linked page in a new tab or window. But there is a security risk we should be aware of. The new tab gains limited access to the linking page (i.e. our website) via `window.opener`, which it can then use to alter the linking page's URL via `window.opener.location` (this is known as tabnabbing). diff --git a/blog_posts/javascript-ternary-operator.md b/blog_posts/javascript-ternary-operator.md index 402045843..f739a322e 100644 --- a/blog_posts/javascript-ternary-operator.md +++ b/blog_posts/javascript-ternary-operator.md @@ -5,6 +5,8 @@ tags: javascript,condition authors: maciv 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. +firstSeen: 2020-09-01T01:53:34+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- JavaScript's ternary operator (`?:`), also called the conditional operator, is used to replace a conditional statement, most commonly an assignment. For example: diff --git a/blog_posts/javascript-this.md b/blog_posts/javascript-this.md index 2b33e72c9..81ad309a7 100644 --- a/blog_posts/javascript-this.md +++ b/blog_posts/javascript-this.md @@ -5,6 +5,8 @@ tags: javascript,function,object authors: chalarangelo cover: blog_images/u-got-this.jpg excerpt: JavaScript's `this` keyword is a source of confusion for many beginners and veterans alike. Learn how it works in different scenarios and start using it correctly. +firstSeen: 2020-05-03T15:31:25+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### What is `this`? diff --git a/blog_posts/javascript-undeclared-undefined-null.md b/blog_posts/javascript-undeclared-undefined-null.md index ebcea0b4e..3be3662f4 100644 --- a/blog_posts/javascript-undeclared-undefined-null.md +++ b/blog_posts/javascript-undeclared-undefined-null.md @@ -5,6 +5,8 @@ tags: javascript,type authors: chalarangelo cover: blog_images/river-houses.jpg excerpt: JavaScript has three different empty states for variables. Learn their differences and how you can check for each one. +firstSeen: 2021-03-29T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### undeclared diff --git a/blog_posts/javascript-value-as-number.md b/blog_posts/javascript-value-as-number.md index 6408586dc..8d66b5573 100644 --- a/blog_posts/javascript-value-as-number.md +++ b/blog_posts/javascript-value-as-number.md @@ -5,6 +5,8 @@ tags: javascript,browser,input authors: chalarangelo cover: blog_images/mac-and-coffee.jpg excerpt: Ever wanted to get the value of an HTML input element as a number? Learn an easy way to do it with this handy trick. +firstSeen: 2020-11-20T09:19:24+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Most of the time, when accessing the value of an `HTMLInputElement` in an event listener, we use something along the lines of `e.target.value`. This is fine in most cases, but when we want the numeric value of an input field, we have to parse it and check if the value is actually valid etc. That can get very annoying, especially when working with larger forms that have many input fields. diff --git a/blog_posts/javascript-variable-hoisting.md b/blog_posts/javascript-variable-hoisting.md index d9b94db2c..f921bea9c 100644 --- a/blog_posts/javascript-variable-hoisting.md +++ b/blog_posts/javascript-variable-hoisting.md @@ -5,6 +5,8 @@ tags: javascript,type,variable authors: chalarangelo 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. +firstSeen: 2020-09-22T23:28:14+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Before your JavaScript code is executed, it is first parsed and compiled. During the _compile_ phase, variable and function declarations are put into memory, which is called **hoisting**. diff --git a/blog_posts/javascript-variable-scope.md b/blog_posts/javascript-variable-scope.md index f39ef2ba0..ae1d84484 100644 --- a/blog_posts/javascript-variable-scope.md +++ b/blog_posts/javascript-variable-scope.md @@ -5,6 +5,8 @@ tags: javascript,type,variable authors: chalarangelo 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. +firstSeen: 2020-05-18T22:28:17+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- I have seen many developers - my younger self included - struggle with JavaScript's variables and scopes, even if they have some experience with coding and/or the language itself. While there are dozens of great articles on this subject, I found it somewhat difficult to memorize or understand the way these concepts work when I was starting out, so here's a short and simple breakdown that might help you as much as it helped me. diff --git a/blog_posts/javascript-void-links.md b/blog_posts/javascript-void-links.md index fcbcfc71b..43dbe7b50 100644 --- a/blog_posts/javascript-void-links.md +++ b/blog_posts/javascript-void-links.md @@ -5,6 +5,8 @@ tags: javascript,browser,accessibility authors: chalarangelo cover: blog_images/white-flower.jpg excerpt: There are various ways to create an empty link, but some options are more appropriate than others. Learn the best way to handle empty links with this quick tip. +firstSeen: 2020-11-15T11:46:42+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- There are various ways to create an empty link, but some options are more appropriate than others. One of the most common debates about it is if one should use `href=""`, `href="#"` or `href="javascript:void(0)"`. diff --git a/blog_posts/js-array-min-max.md b/blog_posts/js-array-min-max.md index 633a8eed5..545aba07b 100644 --- a/blog_posts/js-array-min-max.md +++ b/blog_posts/js-array-min-max.md @@ -5,6 +5,8 @@ tags: javascript,array,math authors: chalarangelo cover: blog_images/little-tree.jpg excerpt: When working with numeric arrays in JavaScript, you might find yourself in need of finding the minimum or maximum value. Here's a quick and easy way to do it. +firstSeen: 2021-03-01T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- When working with numeric arrays in JavaScript, you might find yourself in need of finding the minimum or maximum value. Luckily, JavaScript's `Math` built-in object has got you covered. You can simply use `Math.min()` or `Math.max()` combined with the spread operator (`...`), as both functions accept any number of arguments. diff --git a/blog_posts/js-array-sorting-shorthand.md b/blog_posts/js-array-sorting-shorthand.md index 662f13574..c51791c0b 100644 --- a/blog_posts/js-array-sorting-shorthand.md +++ b/blog_posts/js-array-sorting-shorthand.md @@ -5,6 +5,8 @@ tags: javascript,array authors: maciv,chalarangelo cover: blog_images/apples.jpg excerpt: Learn how to quickly write code to sort JavaScript arrays with this handy one-liner. +firstSeen: 2021-01-04T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- When sorting an array of primitive values (e.g. strings or numbers), you'll often see a lot of code that looks like this: diff --git a/blog_posts/js-remove-array-duplicates.md b/blog_posts/js-remove-array-duplicates.md index db545af1c..69a4cb335 100644 --- a/blog_posts/js-remove-array-duplicates.md +++ b/blog_posts/js-remove-array-duplicates.md @@ -5,6 +5,8 @@ tags: javascript,array authors: chalarangelo cover: blog_images/architectural.jpg excerpt: Easily remove duplicates from a JavaScript array using the built-in `Set` object. +firstSeen: 2021-02-11T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Removing duplicates from an array in JavaScript can be done in a variety of ways, such as using `Array.prototype.reduce()`, `Array.prototype.filter()` or even a simple `for` loop. But there's an easier alternative. JavaScript's built-in [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) object is described as a collection of values, where each value may occur only once. A `Set` object is also iterable, making it easily convertible to an array using the spread (`...`) operator. diff --git a/blog_posts/lazy-loading-images.md b/blog_posts/lazy-loading-images.md index 5efbbae89..c22cc38da 100644 --- a/blog_posts/lazy-loading-images.md +++ b/blog_posts/lazy-loading-images.md @@ -5,6 +5,8 @@ tags: webdev,html,image authors: chalarangelo cover: blog_images/bridge.jpg excerpt: Did you know you can use a native HTML attribute to add lazy load to images? Learn all you need to know with this quick tip. +firstSeen: 2021-05-31T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Images are nowadays a crucial part of any webpage, but, as with most things, they come at a cost. Images are usually a major percentage of a page's load, which is why they make for a great candidate for optimization. The most common technique is that of lazy loading, usually in the form of delaying loading images outside the initial viewport until they are close to being scrolled into view. diff --git a/blog_posts/nodejs-chrome-debugging.md b/blog_posts/nodejs-chrome-debugging.md index 16c06b009..1837c2ed3 100644 --- a/blog_posts/nodejs-chrome-debugging.md +++ b/blog_posts/nodejs-chrome-debugging.md @@ -5,6 +5,8 @@ tags: javascript,node,debugging authors: chalarangelo 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. +firstSeen: 2020-07-15T16:10:13+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Node.js can be debugged using Chrome Developer Tools since `v6.3.0`. Here's a quick guide on how to do this: diff --git a/blog_posts/password-autocomplete-suggestion.md b/blog_posts/password-autocomplete-suggestion.md index 51377fe70..89e4a12ce 100644 --- a/blog_posts/password-autocomplete-suggestion.md +++ b/blog_posts/password-autocomplete-suggestion.md @@ -5,6 +5,8 @@ tags: webdev authors: chalarangelo cover: blog_images/padlocks.jpg excerpt: Use the HTML `autocomplete` attribute to create more secure and accessible password fields. +firstSeen: 2021-05-10T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- The HTML `autocomplete` attribute provides a wide variety of options for `` fields. One of these is the `new-password` value, which can be used when the user is asked to create a new password (e.g. signup or reset password forms). This value ensures that the browser will not accidentally fill in an existing password, while it also allows the browser to suggest a secure password: diff --git a/blog_posts/perfect-css-transition-duration.md b/blog_posts/perfect-css-transition-duration.md index 2a85e434a..1178e2152 100644 --- a/blog_posts/perfect-css-transition-duration.md +++ b/blog_posts/perfect-css-transition-duration.md @@ -5,6 +5,8 @@ tags: css,interactivity,visual,animation authors: chalarangelo cover: blog_images/perfect-timing.jpg excerpt: Learn how to make your CSS transitions feel perfect when users interact with elements on the page with this simple tip. +firstSeen: 2020-12-30T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- We have all experienced a website interaction that feels sluggish or otherwise off on account of poor transition or animation duration and timing. However, there is a very simple "golden rule" to help you avoid this poor user experience, called **Doherty Threshold:** diff --git a/blog_posts/prefetching-resources.md b/blog_posts/prefetching-resources.md index 471107ee6..6a4fa48f6 100644 --- a/blog_posts/prefetching-resources.md +++ b/blog_posts/prefetching-resources.md @@ -5,6 +5,8 @@ tags: webdev,html,browser authors: chalarangelo 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. +firstSeen: 2020-06-20T13:41:31+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Resource prefetching is a great technique to improve perceived page speed on your website and provide a better user experience, without a lot of effort. Prefetching happens in the browser as soon as it is idle, meaning it will not slow down the initial load, but rather utilize idle time to fetch and cache resources that might be useful later on. diff --git a/blog_posts/python-dict-getkey-vs-dictkey.md b/blog_posts/python-dict-getkey-vs-dictkey.md index 005217a79..31436076e 100644 --- a/blog_posts/python-dict-getkey-vs-dictkey.md +++ b/blog_posts/python-dict-getkey-vs-dictkey.md @@ -5,6 +5,8 @@ tags: python,dictionary authors: maciv cover: blog_images/fruit-feast.jpg excerpt: Learn the difference between two common ways to access values in Python dictionaries and level up your code today. +firstSeen: 2021-01-07T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- A common debate among Python developers seems to stem from the retrieval of dictionary values, which can be accomplished using either `dict[key]` or `dict.get(key)`. diff --git a/blog_posts/python-fstrings-str-format.md b/blog_posts/python-fstrings-str-format.md index b7484f5d5..1195189d8 100644 --- a/blog_posts/python-fstrings-str-format.md +++ b/blog_posts/python-fstrings-str-format.md @@ -5,6 +5,8 @@ tags: python,string authors: maciv cover: blog_images/feathers.jpg excerpt: Learn two ways to format a string in Python with this quick tip. +firstSeen: 2021-01-21T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### f-string diff --git a/blog_posts/python-identity-equality.md b/blog_posts/python-identity-equality.md index 08d3e8a6b..9a5711090 100644 --- a/blog_posts/python-identity-equality.md +++ b/blog_posts/python-identity-equality.md @@ -5,6 +5,8 @@ tags: python,type,comparison authors: maciv cover: blog_images/umbrellas.jpg excerpt: Python provides two distinct comparison operators for different task. Stop mixing them up using this quick guide. +firstSeen: 2021-01-28T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Python provides two very similar equality operators used for comparisons: diff --git a/blog_posts/python-lists-tuples.md b/blog_posts/python-lists-tuples.md index dc9a328eb..b3fa986a7 100644 --- a/blog_posts/python-lists-tuples.md +++ b/blog_posts/python-lists-tuples.md @@ -5,6 +5,8 @@ tags: python,list authors: chalarangelo cover: blog_images/red-mountain.jpg excerpt: Learn how Python's lists and tuples are different and level up your code today. +firstSeen: 2020-08-08T14:54:56+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Python's lists and tuples may seem pretty similar in syntax and function, however they have some major differences the most important of which is the fact that lists are mutable and tuples aren't. Here's a quick breakdown: diff --git a/blog_posts/python-lowercase.md b/blog_posts/python-lowercase.md index 91e6f5aae..ad2777932 100644 --- a/blog_posts/python-lowercase.md +++ b/blog_posts/python-lowercase.md @@ -5,6 +5,8 @@ tags: python,string authors: maciv 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. +firstSeen: 2020-11-15T14:13:55+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### str.lower() diff --git a/blog_posts/python-named-tuples.md b/blog_posts/python-named-tuples.md index 7e36e21a3..9b476843b 100644 --- a/blog_posts/python-named-tuples.md +++ b/blog_posts/python-named-tuples.md @@ -5,6 +5,8 @@ tags: python,list,dictionary authors: maciv cover: blog_images/mask-quiet.jpg excerpt: Understand Python's named tuples and start using them in your projects today. +firstSeen: 2021-01-14T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Python's named tuples are a very simple yet interesting feature that can make a developer's life easier. They are part of the `collections` module and act very similar to regular tuples, the main difference being that values stored in a named tuple can be accessed using field names instead of indexes. diff --git a/blog_posts/python-slice-assignment.md b/blog_posts/python-slice-assignment.md index d9a932fb9..83e01adff 100644 --- a/blog_posts/python-slice-assignment.md +++ b/blog_posts/python-slice-assignment.md @@ -5,6 +5,8 @@ tags: python,list authors: maciv cover: blog_images/sliced-fruits.jpg excerpt: Learn everything you need to know about Python's slice assignment with this handy guide. +firstSeen: 2020-11-07T19:21:40+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- #### Python slice notation diff --git a/blog_posts/python-slice-notation.md b/blog_posts/python-slice-notation.md index cbcd07bf5..49b0b832e 100644 --- a/blog_posts/python-slice-notation.md +++ b/blog_posts/python-slice-notation.md @@ -5,6 +5,8 @@ tags: python,list authors: maciv cover: blog_images/sliced-fruits.jpg excerpt: Learn everything you need to know about Python's slice notation with this handy guide. +firstSeen: 2020-11-07T19:21:16+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- #### Python slice notation diff --git a/blog_posts/python-sortedlist-vs-list-sort.md b/blog_posts/python-sortedlist-vs-list-sort.md index 0188ea55c..0c71103bd 100644 --- a/blog_posts/python-sortedlist-vs-list-sort.md +++ b/blog_posts/python-sortedlist-vs-list-sort.md @@ -5,6 +5,8 @@ tags: python,list authors: maciv cover: blog_images/duck-plants.jpg excerpt: Learn the difference between Python’s built-in list sorting methods and when one is preferred over the other. +firstSeen: 2020-12-31T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Python provides two ways to sort a list, the built-in list method `list.sort()` and the built-in function `sorted()`. Although both will sort the elements of a list, if used incorrectly they can produce unexpected or undesired results. diff --git a/blog_posts/python-swap-variables.md b/blog_posts/python-swap-variables.md index ea2503cba..9a1f660f9 100644 --- a/blog_posts/python-swap-variables.md +++ b/blog_posts/python-swap-variables.md @@ -5,6 +5,8 @@ tags: python,variables authors: maciv cover: blog_images/leaves-read.jpg excerpt: Learn 3 easy ways to swap the values of two variables in Python. +firstSeen: 2021-02-04T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Using a temporary variable diff --git a/blog_posts/react-conditional-classname.md b/blog_posts/react-conditional-classname.md index b6f43422a..0d6f869d9 100644 --- a/blog_posts/react-conditional-classname.md +++ b/blog_posts/react-conditional-classname.md @@ -5,6 +5,8 @@ tags: react,components authors: maciv 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. +firstSeen: 2020-11-06T20:17:21+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- When developing React components, you often need to conditionally apply a `className` attribute to one or more elements. Sometimes, you will have two or more possible values depending on a condition, but there are also times that you might apply a `className` based on a condition or leave it completely empty otherwise. diff --git a/blog_posts/react-proptypes-objectof-vs-shape.md b/blog_posts/react-proptypes-objectof-vs-shape.md index caa3f5233..a7324dda8 100644 --- a/blog_posts/react-proptypes-objectof-vs-shape.md +++ b/blog_posts/react-proptypes-objectof-vs-shape.md @@ -5,6 +5,8 @@ tags: react,components,proptypes authors: chalarangelo cover: blog_images/shapes.jpg excerpt: Learn the differences between `PropTypes.objectOf()` and `PropTypes.shape()` and where to use each one with this quick guide. +firstSeen: 2021-01-18T11:00:00+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- The `prop-types` package is used by millions of React developers every day in order to type check the props passed to their components. Most of us are probably familiar with a variety of its built-in validators, but many a developer seems to fall short when dealing with object props. Luckily, the `PropTypes.objectOf()` and `PropTypes.shape()` validators are here to help. diff --git a/blog_posts/react-redux-readable-reducers.md b/blog_posts/react-redux-readable-reducers.md index 3a35282bd..7a0b29eff 100644 --- a/blog_posts/react-redux-readable-reducers.md +++ b/blog_posts/react-redux-readable-reducers.md @@ -5,6 +5,8 @@ tags: react,logic authors: chalarangelo cover: blog_images/beach-from-above.jpg excerpt: When working with state in your code, you often run into issues with maintaining complexity and readability. Oftentimes, these issues are easily fixable. +firstSeen: 2021-04-05T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- _This article's examples are based on Redux, where the issues described are more common. As these issues are not limited to Redux, you might still find some value in the tips and solutions presented if you are struggling with maintaining complexity and readability in your code._ diff --git a/blog_posts/react-rendering-basics.md b/blog_posts/react-rendering-basics.md index df6efb7ac..b17f92975 100644 --- a/blog_posts/react-rendering-basics.md +++ b/blog_posts/react-rendering-basics.md @@ -5,6 +5,8 @@ tags: react,render authors: chalarangelo 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. +firstSeen: 2020-06-16T20:41:02+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- #### React rendering diff --git a/blog_posts/react-rendering-optimization.md b/blog_posts/react-rendering-optimization.md index cbd1672be..5e484a4c3 100644 --- a/blog_posts/react-rendering-optimization.md +++ b/blog_posts/react-rendering-optimization.md @@ -5,6 +5,8 @@ tags: react,render authors: chalarangelo 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. +firstSeen: 2020-06-16T20:41:02+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- #### React rendering diff --git a/blog_posts/react-rendering-state.md b/blog_posts/react-rendering-state.md index 4838a6c66..f195801b0 100644 --- a/blog_posts/react-rendering-state.md +++ b/blog_posts/react-rendering-state.md @@ -5,6 +5,8 @@ tags: react,render authors: chalarangelo 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. +firstSeen: 2020-06-16T20:41:02+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- #### React rendering diff --git a/blog_posts/react-selected-option.md b/blog_posts/react-selected-option.md index eacbbf1eb..180d78451 100644 --- a/blog_posts/react-selected-option.md +++ b/blog_posts/react-selected-option.md @@ -5,6 +5,8 @@ tags: react,components,input authors: maciv 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. +firstSeen: 2020-09-01T00:25:32+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Adding selected to an option diff --git a/blog_posts/react-use-interval-explained.md b/blog_posts/react-use-interval-explained.md index 1c434311a..5ef0e70b6 100644 --- a/blog_posts/react-use-interval-explained.md +++ b/blog_posts/react-use-interval-explained.md @@ -5,6 +5,8 @@ tags: react,hooks,effect authors: chalarangelo cover: blog_images/clock.jpg excerpt: Wrapping your mind around React hooks and how they interact with `setInterval()` can be difficult. Here's a guide to get you started. +firstSeen: 2021-04-15T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Wrapping your mind around React hooks can be daunting at first, especially if you stumble into anything remotely related to timing, such as `setInterval()`. In order to solve such issues, you have to get used to the way hooks work, their limitations and potential workarounds. diff --git a/blog_posts/react-use-state-with-label.md b/blog_posts/react-use-state-with-label.md index d5a4ca3ba..9c0fd8d6a 100644 --- a/blog_posts/react-use-state-with-label.md +++ b/blog_posts/react-use-state-with-label.md @@ -5,6 +5,8 @@ tags: react,hooks authors: chalarangelo cover: blog_images/bunny-poster.jpg excerpt: When working with multiple `useState` hooks in React, things can get a bit complicated while debugging. Luckily, there's an easy way to label these values. +firstSeen: 2021-05-06T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- When working with multiple `useState` hooks in React, things can get a bit complicated while debugging. Luckily, there's an easy way to label these values, using the [`useDebugValue`](https://reactjs.org/docs/hooks-reference.html#usedebugvalue) hook to create a custom `useStateWithLabel` hook: diff --git a/blog_posts/regexp-cheatsheet.md b/blog_posts/regexp-cheatsheet.md index 93ae47eea..4467567c0 100644 --- a/blog_posts/regexp-cheatsheet.md +++ b/blog_posts/regexp-cheatsheet.md @@ -5,6 +5,8 @@ tags: javascript,string,regexp,cheatsheet authors: chalarangelo 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. +firstSeen: 2020-05-01T15:39:07+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Anchors diff --git a/blog_posts/responsive-favicon-dark-mode.md b/blog_posts/responsive-favicon-dark-mode.md index e5685c843..94c6402d4 100644 --- a/blog_posts/responsive-favicon-dark-mode.md +++ b/blog_posts/responsive-favicon-dark-mode.md @@ -5,6 +5,8 @@ tags: css,visual authors: chalarangelo cover: blog_images/dark-mode.jpg excerpt: Learn how to create a custom responsive favicon that can adapt its color palette for dark mode with this quick guide. +firstSeen: 2020-11-27T13:25:30+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- The rise of dark mode in recent years has made many website favicons feel awkward or even impossible to see in some cases. Provided your design team has created the appropriate assets, it's relatively easy to create a responsive favicon that can handle the user's color scheme preference without too much effort. diff --git a/blog_posts/setup-python3-pip3-as-default.md b/blog_posts/setup-python3-pip3-as-default.md index 7b45878e3..e7cd8e68b 100644 --- a/blog_posts/setup-python3-pip3-as-default.md +++ b/blog_posts/setup-python3-pip3-as-default.md @@ -5,6 +5,8 @@ tags: python,setup authors: chalarangelo cover: blog_images/avocado-slices.jpg excerpt: A very common problem when working with Python is having to remember the correct version. Luckily, there's an easy fix for that. +firstSeen: 2021-06-07T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- One of the most common headaches when working with Python is having to remember to use Python 3.x instead of Python 2.x. Luckily, it's really easy to setup Python 3 and pip 3 as the defaults. You first need to figure out where each one is installed using the `which` command: diff --git a/blog_posts/terminal-shortcuts-cheatsheet.md b/blog_posts/terminal-shortcuts-cheatsheet.md index 5d38da0b8..61ceab52a 100644 --- a/blog_posts/terminal-shortcuts-cheatsheet.md +++ b/blog_posts/terminal-shortcuts-cheatsheet.md @@ -5,6 +5,8 @@ tags: webdev,bash,cheatsheet authors: chalarangelo cover: blog_images/terminal.jpg excerpt: Maximize your productivity when working with a bash or other shell terminal by using these keyboard shortcuts. +firstSeen: 2021-04-19T12:00:00+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- - Ctrl + C Terminate the command diff --git a/blog_posts/testing-async-react-components.md b/blog_posts/testing-async-react-components.md index 14a2bd258..209001a8e 100644 --- a/blog_posts/testing-async-react-components.md +++ b/blog_posts/testing-async-react-components.md @@ -5,6 +5,8 @@ tags: react,testing,event authors: maciv,chalarangelo 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. +firstSeen: 2020-08-13T20:21:33+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- ### Components that update asynchronously diff --git a/blog_posts/testing-redux-connected-components.md b/blog_posts/testing-redux-connected-components.md index f40770414..1c8893c1a 100644 --- a/blog_posts/testing-redux-connected-components.md +++ b/blog_posts/testing-redux-connected-components.md @@ -5,6 +5,8 @@ tags: react,testing authors: chalarangelo 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. +firstSeen: 2020-07-15T13:54:26+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Testing Redux-connected components with React Testing Library is a very common scenario. However, it might be a little complicated without the proper tools and you could end up repeating yourself, especially when writing the boilerplate to connect to your redux store. diff --git a/blog_posts/testing-stateful-ui-components.md b/blog_posts/testing-stateful-ui-components.md index 006862472..965e15738 100644 --- a/blog_posts/testing-stateful-ui-components.md +++ b/blog_posts/testing-stateful-ui-components.md @@ -5,6 +5,8 @@ tags: react,testing authors: chalarangelo 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? +firstSeen: 2020-01-16T09:58:18+02:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Some time ago, I was tasked with writing tests for a handful of React components, an otherwise mundane and uninspiring task, that somehow ended with a "Eureka!" moment for me. The specifics of the project and its components are of little importance, however the key detail is that I was working with stateful React components that are used daily by a large team and, as such, are refactored and updated quite often. diff --git a/blog_posts/typographic-scale-basics.md b/blog_posts/typographic-scale-basics.md index 1eb5d2d21..752acd6bd 100644 --- a/blog_posts/typographic-scale-basics.md +++ b/blog_posts/typographic-scale-basics.md @@ -5,6 +5,8 @@ tags: css,webdev,typography authors: chalarangelo cover: blog_images/typography.jpg excerpt: Typography might seem intimidating, but you can quickly and easily create a simple typographic scale with this basic technique. +firstSeen: 2020-08-18T19:27:17+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Building a typographic scale, while seemingly hard, is not all that difficult, as long as you learn some basic techniques and principles. diff --git a/blog_posts/zooming-accessibility-tips.md b/blog_posts/zooming-accessibility-tips.md index c3926ae18..67d3e336a 100644 --- a/blog_posts/zooming-accessibility-tips.md +++ b/blog_posts/zooming-accessibility-tips.md @@ -6,6 +6,8 @@ authors: chalarangelo cover: blog_images/camera-zoom.jpg excerpt: Using the viewport meta tag incorrectly can harm your website's accessibility. Learn how to prevent problems with this handy guide. unlisted: true +firstSeen: 2020-09-16T23:12:17+03:00 +lastUpdated: 2021-06-12T19:30:41+03:00 --- Using the `"viewport"` meta tag incorrectly can cause some serious accessibility issues for people with low vision.