diff --git a/snippet-template.md b/snippet-template.md index f066d72f4..dbfaa896e 100644 --- a/snippet-template.md +++ b/snippet-template.md @@ -2,11 +2,11 @@ title: My amazing story shortTitle: Amazing story type: story -tags: javascript,webdev +tags: [javascript,webdev] author: chalarangelo cover: image excerpt: A short summary of your story up to 180 characters long. -firstSeen: 2021-06-13T05:00:00-04:00 +dateModified: 2021-06-13T05:00:00-04:00 --- Write your blog post here. diff --git a/blog_posts/10-vs-code-extensions-for-js-developers.md b/snippets/10-vs-code-extensions-for-js-developers.md similarity index 97% rename from blog_posts/10-vs-code-extensions-for-js-developers.md rename to snippets/10-vs-code-extensions-for-js-developers.md index 8d5086d99..515021dea 100644 --- a/blog_posts/10-vs-code-extensions-for-js-developers.md +++ b/snippets/10-vs-code-extensions-for-js-developers.md @@ -2,13 +2,12 @@ title: 10 must-have VS Code extensions for JavaScript developers shortTitle: Essential VS Code extensions type: story -tags: devtools,vscode +tags: [devtools,vscode] author: chalarangelo cover: computer-screens excerpt: VS Code is steadily gaining popularity among developers. Here are 10 essential extensions for JavaScript developers that aim to increase your productivity. unlisted: true -firstSeen: 2019-12-23T10:41:56+02:00 -lastUpdated: 2021-06-12T19:30:41+03:00 +dateModified: 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/snippets/25-css-gradients.md similarity index 98% rename from blog_posts/25-css-gradients.md rename to snippets/25-css-gradients.md index 1bc4d66d5..0b82eaaf5 100644 --- a/blog_posts/25-css-gradients.md +++ b/snippets/25-css-gradients.md @@ -2,12 +2,11 @@ title: 25 CSS gradients for your next project shortTitle: CSS gradients type: cheatsheet -tags: css,visual +tags: [css,visual] author: chalarangelo cover: colors-mural 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 +dateModified: 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/snippets/4-javascript-array-methods.md similarity index 95% rename from blog_posts/4-javascript-array-methods.md rename to snippets/4-javascript-array-methods.md index b1c8576fb..f7a1ff948 100644 --- a/blog_posts/4-javascript-array-methods.md +++ b/snippets/4-javascript-array-methods.md @@ -2,12 +2,11 @@ title: 4 JavaScript Array methods you must know shortTitle: Useful array methods type: story -tags: javascript,array,cheatsheet +tags: [javascript,array,cheatsheet] author: chalarangelo cover: arrays 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 +dateModified: 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/snippets/4-seo-tips-for-developers.md similarity index 96% rename from blog_posts/4-seo-tips-for-developers.md rename to snippets/4-seo-tips-for-developers.md index 6318d3d36..8efa0bc7a 100644 --- a/blog_posts/4-seo-tips-for-developers.md +++ b/snippets/4-seo-tips-for-developers.md @@ -2,12 +2,11 @@ title: 4 SEO tips for developers shortTitle: SEO tips type: story -tags: seo,webdev +tags: [seo,webdev] author: chalarangelo cover: sunrise-over-city 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 +dateModified: 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/snippets/5-tips-for-better-pull-requests.md similarity index 95% rename from blog_posts/5-tips-for-better-pull-requests.md rename to snippets/5-tips-for-better-pull-requests.md index 52eeb8aa7..ba8268ad0 100644 --- a/blog_posts/5-tips-for-better-pull-requests.md +++ b/snippets/5-tips-for-better-pull-requests.md @@ -1,13 +1,12 @@ --- title: 5 tips for better Pull Requests type: story -tags: git,github,programming,webdev +tags: [git,github,programming,webdev] author: chalarangelo cover: keyboard-tea 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 +dateModified: 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/snippets/6-javascript-regexp-tricks.md similarity index 96% rename from blog_posts/6-javascript-regexp-tricks.md rename to snippets/6-javascript-regexp-tricks.md index a98941b0f..86234140d 100644 --- a/blog_posts/6-javascript-regexp-tricks.md +++ b/snippets/6-javascript-regexp-tricks.md @@ -2,12 +2,11 @@ title: 6 JavaScript Regular Expression features you can use today shortTitle: JavaScript Regular Expression tips type: story -tags: javascript,string,regexp +tags: [javascript,string,regexp] author: chalarangelo cover: taking-photos 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 +dateModified: 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-python-f-strings-tips.md b/snippets/6-python-f-strings-tips.md similarity index 97% rename from blog_posts/6-python-f-strings-tips.md rename to snippets/6-python-f-strings-tips.md index c05b3530c..29880fec0 100644 --- a/blog_posts/6-python-f-strings-tips.md +++ b/snippets/6-python-f-strings-tips.md @@ -1,11 +1,11 @@ --- title: 6 Python f-strings tips and tricks type: story -tags: python,string +tags: [python,string] author: chalarangelo cover: sea-view excerpt: Python's f-strings can do a lot more than you might expect. Learn a few useful tips and tricks in this quick guide. -firstSeen: 2021-07-20T05:00:00-04:00 +dateModified: 2021-07-20T05:00:00-04:00 --- Python's f-strings provide a more readable, concise and less error-prone way to format strings than traditional string formatting. They are packed with useful features that are sure to come in handy in day-to-day use. Let's take a look at some of them. diff --git a/blog_posts/7-chrome-extensions-for-web-developers.md b/snippets/7-chrome-extensions-for-web-developers.md similarity index 96% rename from blog_posts/7-chrome-extensions-for-web-developers.md rename to snippets/7-chrome-extensions-for-web-developers.md index c8b11f5ca..7d82b5df9 100644 --- a/blog_posts/7-chrome-extensions-for-web-developers.md +++ b/snippets/7-chrome-extensions-for-web-developers.md @@ -2,13 +2,12 @@ title: 7 essential Chrome extensions for web developers shortTitle: Essential Chrome extensions type: story -tags: devtools,webdev +tags: [devtools,webdev] author: chalarangelo cover: computer-screens 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. unlisted: true -firstSeen: 2020-03-18T12:37:31+02:00 -lastUpdated: 2021-06-12T19:30:41+03:00 +dateModified: 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/snippets/8-tips-for-accessible-websites.md similarity index 96% rename from blog_posts/8-tips-for-accessible-websites.md rename to snippets/8-tips-for-accessible-websites.md index 3f1eef03e..821ab0389 100644 --- a/blog_posts/8-tips-for-accessible-websites.md +++ b/snippets/8-tips-for-accessible-websites.md @@ -2,12 +2,11 @@ title: 8 tips for accessible websites shortTitle: Accessibility tips type: story -tags: javascript,accessibility,webdev +tags: [javascript,accessibility,webdev] author: chalarangelo cover: accessibility 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### Use semantic HTML diff --git a/blog_posts/8-tips-for-remote-work.md b/snippets/8-tips-for-remote-work.md similarity index 97% rename from blog_posts/8-tips-for-remote-work.md rename to snippets/8-tips-for-remote-work.md index 5d4e8466e..915bae3f7 100644 --- a/blog_posts/8-tips-for-remote-work.md +++ b/snippets/8-tips-for-remote-work.md @@ -1,13 +1,12 @@ --- title: 8 tips for working from home type: story -tags: career,programming,jobs,webdev +tags: [career,programming,jobs,webdev] author: chalarangelo cover: kettle-laptop 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 +dateModified: 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/snippets/async-javascript-cheatsheet.md similarity index 97% rename from blog_posts/async-javascript-cheatsheet.md rename to snippets/async-javascript-cheatsheet.md index 02f76a769..9c5a5eba3 100644 --- a/blog_posts/async-javascript-cheatsheet.md +++ b/snippets/async-javascript-cheatsheet.md @@ -1,12 +1,11 @@ --- title: Asynchronous JavaScript Cheat Sheet type: cheatsheet -tags: javascript,function,promise +tags: [javascript,function,promise] author: chalarangelo cover: green-plant 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### Promise basics diff --git a/blog_posts/bash-alias-dollar-sign.md b/snippets/bash-alias-dollar-sign.md similarity index 93% rename from blog_posts/bash-alias-dollar-sign.md rename to snippets/bash-alias-dollar-sign.md index ea1e2b1db..63e5dc47a 100644 --- a/blog_posts/bash-alias-dollar-sign.md +++ b/snippets/bash-alias-dollar-sign.md @@ -2,11 +2,11 @@ title: "Tip: A bash alias for copying from the web" shortTitle: Bash alias for copying from the web type: tip -tags: git,configuration +tags: [git,configuration] author: chalarangelo cover: capsule-coffee excerpt: Many online resources prefix their terminal commands with a dollar sign. Luckily, we've got a solution to this small annoyance. -firstSeen: 2023-03-05T05:00:00-04:00 +dateModified: 2023-03-05T05:00:00-04:00 --- If you've ever copied a terminal command from the web, chances are you've also copied the dollar sign (`$`) that precedes it. This is a small annoyance that many developers encounter almost daily, but it can be easily dealt with. All you need to do is add an `alias` for the dollar sign to your `.bashrc` or `.zshrc` file: diff --git a/blog_posts/benefits-of-writing.md b/snippets/benefits-of-writing.md similarity index 97% rename from blog_posts/benefits-of-writing.md rename to snippets/benefits-of-writing.md index c427f027a..6ae9184b2 100644 --- a/blog_posts/benefits-of-writing.md +++ b/snippets/benefits-of-writing.md @@ -1,12 +1,11 @@ --- title: The benefits of writing type: story -tags: career,webdev,programming,jobs +tags: [career,webdev,programming,jobs] author: chalarangelo cover: laptop-view 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: 2022-11-05T14:00:07+03:00 +dateModified: 2022-11-05T14:00:07+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 exercise 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/big-o-cheatsheet.md b/snippets/big-o-cheatsheet.md similarity index 98% rename from blog_posts/big-o-cheatsheet.md rename to snippets/big-o-cheatsheet.md index 259dd0a1e..691849d77 100644 --- a/blog_posts/big-o-cheatsheet.md +++ b/snippets/big-o-cheatsheet.md @@ -1,11 +1,11 @@ --- title: Big-O Cheat Sheet type: cheatsheet -tags: javascript,algorithm +tags: [javascript,algorithm] author: chalarangelo cover: light-ring excerpt: Learn everything you need to know about Big-O notation with this handy cheatsheet. -firstSeen: 2023-01-08T05:00:00-04:00 +dateModified: 2023-01-08T05:00:00-04:00 --- ### Definition diff --git a/blog_posts/breaking-react.md b/snippets/breaking-react.md similarity index 97% rename from blog_posts/breaking-react.md rename to snippets/breaking-react.md index a491e6c80..d2564dd6d 100644 --- a/blog_posts/breaking-react.md +++ b/snippets/breaking-react.md @@ -1,12 +1,11 @@ --- title: Breaking React - a common pattern to avoid type: story -tags: react,debugging +tags: [react,debugging] author: chalarangelo cover: broken-screen 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-11-06T20:51:47+03:00 +dateModified: 2021-11-06T20:51:47+03:00 --- I am by no means an expert React engineer, but I have a couple years of experience under my belt. React is a powerful library for building user interfaces, but it's also quite fragile at places. A common bug I have encountered is caused by **direct DOM manipulation in combination with React**. This is sort of an anti-pattern, as it can break your entire React application under the right circumstances and it's hard to debug. diff --git a/blog_posts/code-anatomy-chaining-reduce-for-loop.md b/snippets/code-anatomy-chaining-reduce-for-loop.md similarity index 96% rename from blog_posts/code-anatomy-chaining-reduce-for-loop.md rename to snippets/code-anatomy-chaining-reduce-for-loop.md index 9f38b8620..0487df521 100644 --- a/blog_posts/code-anatomy-chaining-reduce-for-loop.md +++ b/snippets/code-anatomy-chaining-reduce-for-loop.md @@ -2,12 +2,11 @@ title: Code Anatomy - For loops, array reduce and method chaining shortTitle: For loops, array reduce and method chaining type: story -tags: javascript,array,iterator +tags: [javascript,array,iterator] author: chalarangelo cover: case-study 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### For loops diff --git a/blog_posts/code-anatomy-optimizing-recursion.md b/snippets/code-anatomy-optimizing-recursion.md similarity index 97% rename from blog_posts/code-anatomy-optimizing-recursion.md rename to snippets/code-anatomy-optimizing-recursion.md index c9098d9e8..b7adf8e78 100644 --- a/blog_posts/code-anatomy-optimizing-recursion.md +++ b/snippets/code-anatomy-optimizing-recursion.md @@ -2,12 +2,11 @@ title: Code Anatomy - Optimizing recursive functions shortTitle: Optimizing recursive functions type: story -tags: javascript,recursion,performance +tags: [javascript,recursion,performance] author: chalarangelo cover: case-study 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### Recursive functions diff --git a/blog_posts/code-anatomy-performant-python.md b/snippets/code-anatomy-performant-python.md similarity index 96% rename from blog_posts/code-anatomy-performant-python.md rename to snippets/code-anatomy-performant-python.md index e21bba314..492d8b0a4 100644 --- a/blog_posts/code-anatomy-performant-python.md +++ b/snippets/code-anatomy-performant-python.md @@ -2,11 +2,10 @@ title: Code Anatomy - Writing high performance Python code shortTitle: Performant Python code type: story -tags: python,list,performance +tags: [python,list,performance] cover: walking-on-top 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-11-07T16:34:37+03:00 +dateModified: 2021-11-07T16:34:37+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/common-regexp-cheatsheet.md b/snippets/common-regexp-cheatsheet.md similarity index 98% rename from blog_posts/common-regexp-cheatsheet.md rename to snippets/common-regexp-cheatsheet.md index d89b1557c..35ec342fd 100644 --- a/blog_posts/common-regexp-cheatsheet.md +++ b/snippets/common-regexp-cheatsheet.md @@ -1,11 +1,11 @@ --- title: Common regular expressions type: cheatsheet -tags: javascript,string,regexp +tags: [javascript,string,regexp] author: chalarangelo cover: rocky-beach excerpt: A collection of regular expressions that can be used to solve common problems. -firstSeen: 2022-11-09T05:00:00-04:00 +dateModified: 2022-11-09T05:00:00-04:00 --- ### Exact string match diff --git a/blog_posts/console-log-cheatsheet.md b/snippets/console-log-cheatsheet.md similarity index 97% rename from blog_posts/console-log-cheatsheet.md rename to snippets/console-log-cheatsheet.md index f77536636..01569c19b 100644 --- a/blog_posts/console-log-cheatsheet.md +++ b/snippets/console-log-cheatsheet.md @@ -1,12 +1,11 @@ --- title: JavaScript console.log() tips & tricks type: story -tags: javascript,browser,cheatsheet +tags: [javascript,browser,cheatsheet] author: chalarangelo cover: terminal 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 +dateModified: 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/snippets/cookies-local-storage-session.md similarity index 94% rename from blog_posts/cookies-local-storage-session.md rename to snippets/cookies-local-storage-session.md index c5e624747..3b1746966 100644 --- a/blog_posts/cookies-local-storage-session.md +++ b/snippets/cookies-local-storage-session.md @@ -2,12 +2,11 @@ title: What is the difference between cookies, local storage, and session storage? shortTitle: Cookies, local storage, and session storage type: question -tags: javascript,browser,webdev +tags: [javascript,browser,webdev] author: chalarangelo cover: three-vases 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### Cookies diff --git a/blog_posts/copy-text-to-clipboard-with-javascript.md b/snippets/copy-text-to-clipboard-with-javascript.md similarity index 96% rename from blog_posts/copy-text-to-clipboard-with-javascript.md rename to snippets/copy-text-to-clipboard-with-javascript.md index d8c103f1e..93c26aa98 100644 --- a/blog_posts/copy-text-to-clipboard-with-javascript.md +++ b/snippets/copy-text-to-clipboard-with-javascript.md @@ -2,12 +2,11 @@ title: How can I copy text to clipboard with JavaScript? shortTitle: Copy text to clipboard type: question -tags: javascript,browser +tags: [javascript,browser] author: chalarangelo cover: typing 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: 2022-01-11T09:47:54+03:00 +dateModified: 2022-01-11T09:47:54+03:00 --- ### Asynchronous Clipboard API diff --git a/blog_posts/cors-explained.md b/snippets/cors-explained.md similarity index 96% rename from blog_posts/cors-explained.md rename to snippets/cors-explained.md index c69b3f3db..4750a36d0 100644 --- a/blog_posts/cors-explained.md +++ b/snippets/cors-explained.md @@ -2,11 +2,11 @@ title: What is CORS? shortTitle: CORS explained type: question -tags: javascript,browser,webdev +tags: [javascript,browser,webdev] author: chalarangelo cover: chill-surfing excerpt: CORS (Cross-Origin Resource Sharing) trips up many developers, but it's pretty easy to wrap your head around. -firstSeen: 2023-05-07T05:00:00-04:00 +dateModified: 2023-05-07T05:00:00-04:00 --- When it comes to HTTP, an **origin** is defined by several different aspects of a URL. As mentioned in a [previous article](/articles/s/js-window-location-cheatsheet/), the origin is composed of the following: diff --git a/blog_posts/css-centering.md b/snippets/css-centering.md similarity index 95% rename from blog_posts/css-centering.md rename to snippets/css-centering.md index eea81047a..c3959314f 100644 --- a/blog_posts/css-centering.md +++ b/snippets/css-centering.md @@ -2,12 +2,11 @@ title: 4 ways to center content with CSS shortTitle: Centering content with CSS type: story -tags: css,layout +tags: [css,layout] author: chalarangelo cover: mountain-lake 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-09-28T19:35:49+03:00 +dateModified: 2021-09-28T19:35:49+03:00 --- ### Flexbox diff --git a/blog_posts/css-clamp.md b/snippets/css-clamp.md similarity index 93% rename from blog_posts/css-clamp.md rename to snippets/css-clamp.md index 9a8224c70..b50afc198 100644 --- a/blog_posts/css-clamp.md +++ b/snippets/css-clamp.md @@ -2,11 +2,11 @@ title: "Tip: Use clamp() in CSS for responsive typography" shortTitle: CSS clamp() type: tip -tags: css,visual +tags: [css,visual] author: chalarangelo cover: strawberries excerpt: Implement responsive typography with the CSS clamp() function. -firstSeen: 2022-12-28T05:00:00-04:00 +dateModified: 2022-12-28T05:00:00-04:00 --- Responsive typography has been in fashion for a while now, but some developers find it hard to implement. This is usually due to confusing algebraic formulas or complex hacks. Luckily, CSS has introduced the `clamp()` function, which makes it easy to create responsive typography with a single line of code. All you need to do is set the minimum, maximum, and preferred value and the browser will do the rest. diff --git a/blog_posts/css-code-reviews.md b/snippets/css-code-reviews.md similarity index 98% rename from blog_posts/css-code-reviews.md rename to snippets/css-code-reviews.md index 18812de61..216e2872d 100644 --- a/blog_posts/css-code-reviews.md +++ b/snippets/css-code-reviews.md @@ -2,11 +2,11 @@ title: How do you review CSS code in Pull Requests? shortTitle: CSS code reviews type: story -tags: css,webdev +tags: [css,webdev] author: chalarangelo cover: green-css excerpt: Reviewing CSS code is a skill that takes time to master. Here are some tips from my personal experience to help you get started. -firstSeen: 2023-05-21T05:00:00-04:00 +dateModified: 2023-05-21T05:00:00-04:00 --- Reviewing CSS code is a bit different than reviewing JavaScript code. In fact, many developers pay little attention to CSS, which can lead to problems down the line. Yet, many developers don't know how to review CSS code properly. In this post, we'll go over some of the things you should look for when reviewing CSS code in Pull Requests. diff --git a/blog_posts/css-current-color.md b/snippets/css-current-color.md similarity index 94% rename from blog_posts/css-current-color.md rename to snippets/css-current-color.md index e4059bb55..ec971453c 100644 --- a/blog_posts/css-current-color.md +++ b/snippets/css-current-color.md @@ -1,11 +1,11 @@ --- title: The currentColor CSS keyword type: tip -tags: css,visual +tags: [css,visual] author: chalarangelo cover: picking-berries excerpt: The `currentColor` CSS keyword is a nifty alternative to custom properties for simple use cases. -firstSeen: 2022-11-30T05:00:00-04:00 +dateModified: 2022-11-30T05:00:00-04:00 --- Modern CSS supports custom properties, yet the `currentColor` keyword precedes them by a few years. Thus, you might still find it in the wild and it is worth knowing what it does and how it works. diff --git a/blog_posts/css-easing-variables.md b/snippets/css-easing-variables.md similarity index 95% rename from blog_posts/css-easing-variables.md rename to snippets/css-easing-variables.md index 1bf845c7e..7d6d377b5 100644 --- a/blog_posts/css-easing-variables.md +++ b/snippets/css-easing-variables.md @@ -2,12 +2,11 @@ title: "Tip: CSS easing variables" shortTitle: CSS easing variables type: tip -tags: css,animation +tags: [css,animation] author: chalarangelo cover: curve 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 +dateModified: 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-footer-at-the-bottom.md b/snippets/css-footer-at-the-bottom.md similarity index 97% rename from blog_posts/css-footer-at-the-bottom.md rename to snippets/css-footer-at-the-bottom.md index 272023cbc..c84cbe5d5 100644 --- a/blog_posts/css-footer-at-the-bottom.md +++ b/snippets/css-footer-at-the-bottom.md @@ -2,11 +2,11 @@ title: How can I ensure the footer is always at the bottom of the page? shortTitle: Footer at the bottom type: question -tags: css,layout +tags: [css,layout] author: chalarangelo cover: flower-shape-sunset excerpt: Make sure the footer stays at the bottom of the page, instead of floating up when the content is too short. -firstSeen: 2022-10-30T05:00:00-04:00 +dateModified: 2022-10-30T05:00:00-04:00 --- Preventing the footer from floating up the page is important when trying to create a polished website. Pages with **short content** can run into this issue, but it's easy to fix with a few lines of CSS. Assuming your HTML looks something like the snippet below, here are two modern ways to ensure the footer is always at the bottom of the page: diff --git a/blog_posts/css-inherited-properties-cheatsheet.md b/snippets/css-inherited-properties-cheatsheet.md similarity index 94% rename from blog_posts/css-inherited-properties-cheatsheet.md rename to snippets/css-inherited-properties-cheatsheet.md index 0891b8e7a..cc1e92f12 100644 --- a/blog_posts/css-inherited-properties-cheatsheet.md +++ b/snippets/css-inherited-properties-cheatsheet.md @@ -2,11 +2,11 @@ title: CSS inherited properties cheatsheet shortTitle: Inherited properties type: cheatsheet -tags: css,layout +tags: [css,layout] author: chalarangelo cover: half-trees excerpt: A quick reference for inherited CSS properties. -firstSeen: 2022-11-20T05:00:00-04:00 +dateModified: 2022-11-20T05:00:00-04:00 --- The [CSS specification](https://www.w3.org/TR/CSS21/propidx.html) clearly states which CSS properties are inherited but the related appendix is not the most user-friendly resource. Here's a quick reference of the inherited properties that you are most likely to run into: diff --git a/blog_posts/css-nested-border-radius.md b/snippets/css-nested-border-radius.md similarity index 95% rename from blog_posts/css-nested-border-radius.md rename to snippets/css-nested-border-radius.md index 640523fc3..0f2d35a41 100644 --- a/blog_posts/css-nested-border-radius.md +++ b/snippets/css-nested-border-radius.md @@ -2,11 +2,11 @@ title: "Tip: Perfect nested border radius in CSS" shortTitle: Perfect nested border radius in CSS type: tip -tags: css,visual +tags: [css,visual] author: chalarangelo cover: rocky-beach-waves excerpt: Nesting elements with rounded borders can look very wrong if not done correctly. Here's a quick tip on how to do it right. -firstSeen: 2022-04-03T05:00:00-04:00 +dateModified: 2022-04-03T05:00:00-04:00 --- Nesting elements with rounded borders can look very wrong if not done correctly. Luckily, there's a simple math trick to make it look right. All you need to do is **calculate the border radius of one of the elements and the distance between them**. The border radius of the outer element should be equal to the sum of the border radius of the inner element and the distance between the two elements. This can be mathematically expressed as `innerRadius + distance = outerRadius` or more tersely `R1 + D = R2`. diff --git a/blog_posts/css-pseudo-classes.md b/snippets/css-pseudo-classes.md similarity index 94% rename from blog_posts/css-pseudo-classes.md rename to snippets/css-pseudo-classes.md index d8414311f..abe82e5db 100644 --- a/blog_posts/css-pseudo-classes.md +++ b/snippets/css-pseudo-classes.md @@ -2,12 +2,11 @@ title: What are CSS pseudo-classes? shortTitle: CSS pseudo-classes type: question -tags: css,webdev +tags: [css,webdev] author: chalarangelo cover: orange-flower 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-11-07T16:34:37+03:00 +dateModified: 2021-11-07T16:34:37+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-reset.md b/snippets/css-reset.md similarity index 97% rename from blog_posts/css-reset.md rename to snippets/css-reset.md index f73f0e977..a6591ba71 100644 --- a/blog_posts/css-reset.md +++ b/snippets/css-reset.md @@ -1,11 +1,11 @@ --- title: CSS Reset type: story -tags: css,visual +tags: [css,visual] author: chalarangelo cover: pink-flower-tree excerpt: A short, opinionated CSS reset to make your websites look great everywhere. -firstSeen: 2022-10-16T05:00:00-04:00 +dateModified: 2022-10-16T05:00:00-04:00 --- Browsers nowadays are much better at presenting HTML in a consistent manner, making CSS resets of the past largely unnecessary. However, **default browser styles are not particularly great** in most cases, which is why there are tons of CSS resets out there. Drawing inspiration from some of them, here's my opinionated CSS reset, along with an explanation of why I chose to include each rule. diff --git a/blog_posts/css-root-vs-html.md b/snippets/css-root-vs-html.md similarity index 94% rename from blog_posts/css-root-vs-html.md rename to snippets/css-root-vs-html.md index c949af885..6f4d352f4 100644 --- a/blog_posts/css-root-vs-html.md +++ b/snippets/css-root-vs-html.md @@ -2,11 +2,11 @@ title: What's the difference between :root and html in CSS? shortTitle: :root vs html type: story -tags: css,layout,selector +tags: [css,layout,selector] author: chalarangelo cover: tree-roots excerpt: The CSS selectors used to target the root element of an HTML share some similarities, but they also have some differences. -firstSeen: 2022-05-22T05:00:00-04:00 +dateModified: 2022-05-22T05:00:00-04:00 --- CSS has two ways to target the root element of an HTML document - the `:root` pseudo-class and the `html` selector. While these are very similar to each other, they have a couple of differences you should know. diff --git a/blog_posts/css-select-any-link.md b/snippets/css-select-any-link.md similarity index 92% rename from blog_posts/css-select-any-link.md rename to snippets/css-select-any-link.md index 91a41a269..42816642e 100644 --- a/blog_posts/css-select-any-link.md +++ b/snippets/css-select-any-link.md @@ -2,11 +2,11 @@ title: "Tip: Select any link with CSS" shortTitle: "CSS :any-link pseudo-class" type: tip -tags: css,visual,interactivity +tags: [css,visual,interactivity] author: chalarangelo cover: round-leaves excerpt: You can use a CSS pseudo-class selector to style all links in a page, without worrying if they have been visited or not. -firstSeen: 2022-03-06T05:00:00-04:00 +dateModified: 2022-03-06T05:00:00-04:00 --- Styling links with CSS is considered straightforward, with most developers using the `:link` and `:visited` pseudo-classes. While this solution is very common, there's a less verbose alternative in the form of the [`:any-link`](https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link) pseudo-class. This pseudo-class selects all links, regardless of whether they have been visited or not. Thus, it acts as a catch-all for all links on the page. diff --git a/blog_posts/css-style-default-links.md b/snippets/css-style-default-links.md similarity index 91% rename from blog_posts/css-style-default-links.md rename to snippets/css-style-default-links.md index 7ca99fe0e..5e6e07d37 100644 --- a/blog_posts/css-style-default-links.md +++ b/snippets/css-style-default-links.md @@ -2,11 +2,11 @@ title: "Tip: Style links without a class" shortTitle: Style default links type: tip -tags: css,visual,interactivity +tags: [css,visual,interactivity] author: chalarangelo cover: citrus-drink excerpt: A short summary of your story up to 180 characters long. -firstSeen: 2022-11-23T05:00:00-04:00 +dateModified: 2022-11-23T05:00:00-04:00 --- When styling injected or generated HTML content, you might not have access to the classes or IDs of the elements you want to style. This can become especially annoying when dealing with link elements. Luckily, you can use the `:not()` selector with an appropriate attribute selector to check for the absence of a class and style links accordingly. diff --git a/blog_posts/css-unitless-line-height.md b/snippets/css-unitless-line-height.md similarity index 96% rename from blog_posts/css-unitless-line-height.md rename to snippets/css-unitless-line-height.md index 2101ababb..e31fe38e5 100644 --- a/blog_posts/css-unitless-line-height.md +++ b/snippets/css-unitless-line-height.md @@ -2,11 +2,11 @@ title: Why should line-height be unitless in CSS? shortTitle: Unitless line height type: tip -tags: css,layout,visual +tags: [css,layout,visual] author: chalarangelo cover: gold-typewriter excerpt: You might have heard that `line-height` should be unitless, but do you know why? -firstSeen: 2022-11-27T05:00:00-04:00 +dateModified: 2022-11-27T05:00:00-04:00 --- I've often heard that `line-height` should always be **unitless**. In my earlier coding years, I didn't question it much, but lately I've come to wonder why that is. In my mind `1.5` and `1.5em` should produce the same result, right? Turns out, they don't. diff --git a/blog_posts/css-units-cheatsheet.md b/snippets/css-units-cheatsheet.md similarity index 90% rename from blog_posts/css-units-cheatsheet.md rename to snippets/css-units-cheatsheet.md index 3967c2200..03c8263e2 100644 --- a/blog_posts/css-units-cheatsheet.md +++ b/snippets/css-units-cheatsheet.md @@ -1,12 +1,11 @@ --- title: CSS units Cheat Sheet type: cheatsheet -tags: css,layout,cheatsheet +tags: [css,layout,cheatsheet] author: chalarangelo cover: measuring 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 +dateModified: 2021-06-12T19:30:41+03:00 --- - `px`: Absolute pixel value diff --git a/blog_posts/css-variables.md b/snippets/css-variables.md similarity index 97% rename from blog_posts/css-variables.md rename to snippets/css-variables.md index 834a1ef7d..34a740811 100644 --- a/blog_posts/css-variables.md +++ b/snippets/css-variables.md @@ -2,12 +2,11 @@ title: What are CSS variables and where can I use them? shortTitle: CSS variables type: question -tags: css,visual,layout +tags: [css,visual,layout] author: chalarangelo cover: css-variables 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-09-28T19:52:58+03:00 +dateModified: 2021-09-28T19:52:58+03:00 --- CSS variables (officially called CSS **custom properties**) behave much like variables in other programming languages. They allow you to define named variables that contain specific values that can be reused within the CSS document. As specified in the custom property notation, CSS variables are prefixed with two dashes (e.g. `--my-color: black`). To access them, you can use the `var()` function (e.g. `color: var(--my-color)`). CSS variables are exceptionally useful for **sharing styles** between different elements and components. Examples include but are not limited to vertical rhythm, typography variables and color palettes. diff --git a/blog_posts/custom-file-download-names.md b/snippets/custom-file-download-names.md similarity index 89% rename from blog_posts/custom-file-download-names.md rename to snippets/custom-file-download-names.md index 09ab6d0c7..f350b72d8 100644 --- a/blog_posts/custom-file-download-names.md +++ b/snippets/custom-file-download-names.md @@ -2,12 +2,11 @@ title: "Tip: Customize the names of downloadable files" shortTitle: Customize the names of downloadable files type: tip -tags: webdev,html,browser +tags: [webdev,html,browser] author: chalarangelo cover: hard-disk 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 +dateModified: 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/snippets/detect-caps-lock-is-on.md similarity index 93% rename from blog_posts/detect-caps-lock-is-on.md rename to snippets/detect-caps-lock-is-on.md index 09c1ffdee..cada92994 100644 --- a/blog_posts/detect-caps-lock-is-on.md +++ b/snippets/detect-caps-lock-is-on.md @@ -2,12 +2,11 @@ title: How can I detect if Caps Lock is on with JavaScript? shortTitle: Detect Caps Lock type: question -tags: javascript,browser,event +tags: [javascript,browser,event] author: chalarangelo cover: keyboard 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 +dateModified: 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/dns-record-basics.md b/snippets/dns-record-basics.md similarity index 94% rename from blog_posts/dns-record-basics.md rename to snippets/dns-record-basics.md index 7dcd0af45..9a90407dc 100644 --- a/blog_posts/dns-record-basics.md +++ b/snippets/dns-record-basics.md @@ -1,11 +1,11 @@ --- title: DNS Record Basics type: cheatsheet -tags: webdev,dns,server,cheatsheet +tags: [webdev,dns,server,cheatsheet] author: chalarangelo cover: sparkles excerpt: DNS records may not be a thing you work too often with. Regardless, some basic knowledge can go a long way. -firstSeen: 2022-01-09T05:00:00-04:00 +dateModified: 2022-01-09T05:00:00-04:00 --- Most web developers go about their day-to-day without having to deal with DNS records most of the time. Regardless, knowing what DNS stands for and the types of DNS records are pretty useful. diff --git a/blog_posts/escaping-tutorial-hell.md b/snippets/escaping-tutorial-hell.md similarity index 97% rename from blog_posts/escaping-tutorial-hell.md rename to snippets/escaping-tutorial-hell.md index 7d2b15a96..b756827a8 100644 --- a/blog_posts/escaping-tutorial-hell.md +++ b/snippets/escaping-tutorial-hell.md @@ -1,11 +1,11 @@ --- title: Escaping tutorial hell type: story -tags: career,webdev,programming,jobs +tags: [career,webdev,programming,jobs] author: chalarangelo cover: campfire excerpt: Many beginners get stuck in tutorial hell without even realizing. Here are 4 simple ways to escape tutorial hell and get back to learning. -firstSeen: 2022-05-26T05:00:00-04:00 +dateModified: 2022-05-26T05:00:00-04:00 --- Tutorial hell refers to the stage in your learning journey, where you are following along with tutorials, not truly learning that much. Tutorials are by nature a curated experience. While that's not definitively bad, it's **not always the best way** to explore the landscape and familiarize with concepts and tools. Neither is it the best way to learn how to think for yourself. So how can you escape it? diff --git a/blog_posts/eslint-refactor-for-in.md b/snippets/eslint-refactor-for-in.md similarity index 93% rename from blog_posts/eslint-refactor-for-in.md rename to snippets/eslint-refactor-for-in.md index 1321292c8..596b06013 100644 --- a/blog_posts/eslint-refactor-for-in.md +++ b/snippets/eslint-refactor-for-in.md @@ -2,12 +2,11 @@ title: "Tip: Refactoring your for...in loops to avoid ESLint warnings" shortTitle: Refactoring for...in loops to avoid ESLint warnings type: tip -tags: javascript,array,iterator,eslint +tags: [javascript,array,iterator,eslint] author: chalarangelo cover: typing 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 +dateModified: 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/snippets/flexbox-cheatsheet.md similarity index 97% rename from blog_posts/flexbox-cheatsheet.md rename to snippets/flexbox-cheatsheet.md index 6ff47ec26..8eaf0eeda 100644 --- a/blog_posts/flexbox-cheatsheet.md +++ b/snippets/flexbox-cheatsheet.md @@ -1,12 +1,11 @@ --- title: Flexbox Cheat Sheet type: cheatsheet -tags: css,layout,flexbox,cheatsheet +tags: [css,layout,flexbox,cheatsheet] author: chalarangelo cover: frames 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### Container diff --git a/blog_posts/git-aliases.md b/snippets/git-aliases.md similarity index 91% rename from blog_posts/git-aliases.md rename to snippets/git-aliases.md index 4c7c139c0..170bd02dd 100644 --- a/blog_posts/git-aliases.md +++ b/snippets/git-aliases.md @@ -1,12 +1,11 @@ --- title: Git aliases type: cheatsheet -tags: git,configuration,cheatsheet +tags: [git,configuration,cheatsheet] author: chalarangelo cover: organizer 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### Creating aliases diff --git a/blog_posts/git-commit-different-date.md b/snippets/git-commit-different-date.md similarity index 92% rename from blog_posts/git-commit-different-date.md rename to snippets/git-commit-different-date.md index 68c0721df..b79c01bc8 100644 --- a/blog_posts/git-commit-different-date.md +++ b/snippets/git-commit-different-date.md @@ -2,12 +2,11 @@ title: "Tip: Create a commit with a different date" shortTitle: Create a commit with a different date type: tip -tags: git,commit +tags: [git,commit] author: chalarangelo cover: ice 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 +dateModified: 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/git-fast-forward.md b/snippets/git-fast-forward.md similarity index 96% rename from blog_posts/git-fast-forward.md rename to snippets/git-fast-forward.md index 31bdae97f..48960eb07 100644 --- a/blog_posts/git-fast-forward.md +++ b/snippets/git-fast-forward.md @@ -2,11 +2,11 @@ title: How does Git's fast-forward mode work? shortTitle: Git fast-forward type: question -tags: git,branch +tags: [git,branch] author: chalarangelo cover: boats excerpt: Merging a branch is a pretty common Git operation. Learn how fast-forward mode works and its benefits, so you can decide if it's a good fit for you and your team. -firstSeen: 2021-07-15T05:00:00-04:00 +dateModified: 2021-07-15T05:00:00-04:00 --- Merging a branch is one of the most common operations when working with Git. Depending on your team and projects you've been a part of, you might have heard of or even used Git's **fast-forward** mode when merging. Fast-forward mode is the default in Git, however GitHub will essentially override this by default and create a merge commit instead. diff --git a/blog_posts/github-co-authors.md b/snippets/github-co-authors.md similarity index 87% rename from blog_posts/github-co-authors.md rename to snippets/github-co-authors.md index fc4e78bbc..74e860755 100644 --- a/blog_posts/github-co-authors.md +++ b/snippets/github-co-authors.md @@ -2,12 +2,11 @@ title: "Tip: How to add multiple authors to a commit" shortTitle: Add multiple authors to a commit type: tip -tags: git,github,programming,webdev +tags: [git,github,programming,webdev] author: chalarangelo cover: book-chair 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 +dateModified: 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/html-head-icons.md b/snippets/html-head-icons.md similarity index 94% rename from blog_posts/html-head-icons.md rename to snippets/html-head-icons.md index 7ea2fbbee..1039100f2 100644 --- a/blog_posts/html-head-icons.md +++ b/snippets/html-head-icons.md @@ -2,11 +2,11 @@ title: Recommended HTML head icon tags shortTitle: HTML favicons template type: story -tags: webdev,html,browser +tags: [webdev,html,browser] author: chalarangelo cover: boutique-home-office-3 excerpt: Ensure your HTML documents have a proper favicon by including these lines in your `` element. -firstSeen: 2023-01-24T05:00:00-04:00 +dateModified: 2023-01-24T05:00:00-04:00 --- Over the years, I've seen many different and often conflicting guidelines about favicons and which tags are essential. Nowadays, I think you can get away with a very **minimal set of meta tags** and tailor them to your needs as you go. Here's my recommendation for the bare minimum you should include in your `` element: diff --git a/blog_posts/html-head-links.md b/snippets/html-head-links.md similarity index 96% rename from blog_posts/html-head-links.md rename to snippets/html-head-links.md index 2d9b9bec7..84be62111 100644 --- a/blog_posts/html-head-links.md +++ b/snippets/html-head-links.md @@ -2,11 +2,11 @@ title: Recommended HTML head links shortTitle: HTML head links template type: story -tags: webdev,html,browser +tags: [webdev,html,browser] author: chalarangelo cover: boutique-home-office-4 excerpt: Make your HTML documents more SEO-friendly by including these lines in your `` element. -firstSeen: 2023-01-26T05:00:00-04:00 +dateModified: 2023-01-26T05:00:00-04:00 --- The `` element of an HTML document is where you can include links to external resources such as CSS stylesheets and JavaScript files. Some `` elements, however, are important for SEO and metadata purposes. Here's a list of a few really important ones I like to include: diff --git a/blog_posts/html-head-social-tags.md b/snippets/html-head-social-tags.md similarity index 96% rename from blog_posts/html-head-social-tags.md rename to snippets/html-head-social-tags.md index 5f747fb64..7e9ae9d27 100644 --- a/blog_posts/html-head-social-tags.md +++ b/snippets/html-head-social-tags.md @@ -2,11 +2,11 @@ title: Recommended social tags for HTML head shortTitle: HTML social tags template type: story -tags: webdev,html,browser +tags: [webdev,html,browser] author: chalarangelo cover: boutique-home-office-2 excerpt: Ensure your HTML documents can be shared on social media by including these lines in your `` element. -firstSeen: 2023-01-22T05:00:00-04:00 +dateModified: 2023-01-22T05:00:00-04:00 --- Social media play an important role to any content's success. To ensure your content is properly shared on social media, you should include some essential tags in your `` element: diff --git a/blog_posts/html-recommended-minimum-head.md b/snippets/html-recommended-minimum-head.md similarity index 95% rename from blog_posts/html-recommended-minimum-head.md rename to snippets/html-recommended-minimum-head.md index 954fbc86a..e063ed029 100644 --- a/blog_posts/html-recommended-minimum-head.md +++ b/snippets/html-recommended-minimum-head.md @@ -2,11 +2,11 @@ title: Recommended minimum HTML head shortTitle: HTML head template type: story -tags: webdev,html,browser +tags: [webdev,html,browser] author: chalarangelo cover: boutique-home-office-1 excerpt: Ensure your HTML documents are properly structured by including these lines in your `` element. -firstSeen: 2023-01-18T05:00:00-04:00 +dateModified: 2023-01-18T05:00:00-04:00 --- An essential part of an HTML document is the `` element, which contains metadata about the document. Some vital information, such as the document's title and character encoding are stored in the `` element. It's also where you can include links to external resources such as CSS stylesheets and JavaScript files. diff --git a/blog_posts/http-status-codes-cheatsheet.md b/snippets/http-status-codes-cheatsheet.md similarity index 93% rename from blog_posts/http-status-codes-cheatsheet.md rename to snippets/http-status-codes-cheatsheet.md index 4b5d070bd..e7bdd3120 100644 --- a/blog_posts/http-status-codes-cheatsheet.md +++ b/snippets/http-status-codes-cheatsheet.md @@ -2,12 +2,11 @@ title: Common HTTP status codes Cheat Sheet shortTitle: HTTP status codes type: cheatsheet -tags: webdev,http +tags: [webdev,http] author: chalarangelo cover: lake-runner 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### 1xx - Informational diff --git a/blog_posts/javascript-add-key-value-pair-to-object.md b/snippets/javascript-add-key-value-pair-to-object.md similarity index 97% rename from blog_posts/javascript-add-key-value-pair-to-object.md rename to snippets/javascript-add-key-value-pair-to-object.md index e365fbbcb..923382acf 100644 --- a/blog_posts/javascript-add-key-value-pair-to-object.md +++ b/snippets/javascript-add-key-value-pair-to-object.md @@ -2,11 +2,11 @@ title: How can I add a key-value pair to a JavaScript object? shortTitle: Add key-value pair to object type: question -tags: javascript,object +tags: [javascript,object] author: chalarangelo cover: pineapple-laptop excerpt: Adding a key-value pair to a JavaScript object is straightforward, yet there are multiple ways available to do so. -firstSeen: 2022-07-21T05:00:00-04:00 +dateModified: 2022-07-21T05:00:00-04:00 --- Adding a key-value pair to a JavaScript object is straightforward, yet there are multiple ways available to do so. While mostly similar, these approaches have some differences that you should be aware of. diff --git a/blog_posts/javascript-array-comparison.md b/snippets/javascript-array-comparison.md similarity index 96% rename from blog_posts/javascript-array-comparison.md rename to snippets/javascript-array-comparison.md index a72b94a5e..ff9cc1608 100644 --- a/blog_posts/javascript-array-comparison.md +++ b/snippets/javascript-array-comparison.md @@ -2,12 +2,11 @@ title: How do I compare two arrays in JavaScript? shortTitle: JavaScript array comparison type: question -tags: javascript,array,comparison +tags: [javascript,array,comparison] author: chalarangelo cover: coconuts excerpt: Learn how you can compare two arrays in JavaScript using various different techniques. -firstSeen: 2020-08-07T14:23:14+03:00 -lastUpdated: 2021-09-27T16:36:32+03:00 +dateModified: 2021-09-27T16:36:32+03:00 --- ### Equality comparison diff --git a/blog_posts/javascript-array-includes-value.md b/snippets/javascript-array-includes-value.md similarity index 96% rename from blog_posts/javascript-array-includes-value.md rename to snippets/javascript-array-includes-value.md index 28ed737b8..5e1cc5d55 100644 --- a/blog_posts/javascript-array-includes-value.md +++ b/snippets/javascript-array-includes-value.md @@ -2,11 +2,11 @@ title: How can I check if a JavaScript array includes a specific value? shortTitle: JavaScript array includes value type: question -tags: javascript,array +tags: [javascript,array] author: chalarangelo cover: bridge-drop excerpt: Checking if an array includes a specific value is pretty straightforward, except when it comes to objects. -firstSeen: 2022-09-18T05:00:00-04:00 +dateModified: 2022-09-18T05:00:00-04:00 --- ### Primitive values diff --git a/blog_posts/javascript-arrow-function-event-listeners.md b/snippets/javascript-arrow-function-event-listeners.md similarity index 96% rename from blog_posts/javascript-arrow-function-event-listeners.md rename to snippets/javascript-arrow-function-event-listeners.md index d9ece87e0..ffbbb2775 100644 --- a/blog_posts/javascript-arrow-function-event-listeners.md +++ b/snippets/javascript-arrow-function-event-listeners.md @@ -2,12 +2,11 @@ title: Can I use an arrow function as the callback for an event listener in JavaScript? shortTitle: Arrow function as callback for event listener type: question -tags: javascript,browser,event,function +tags: [javascript,browser,event,function] author: chalarangelo cover: coffee-float 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### Arrow functions diff --git a/blog_posts/javascript-arrow-functions.md b/snippets/javascript-arrow-functions.md similarity index 97% rename from blog_posts/javascript-arrow-functions.md rename to snippets/javascript-arrow-functions.md index 71d6bc89c..4831437bd 100644 --- a/blog_posts/javascript-arrow-functions.md +++ b/snippets/javascript-arrow-functions.md @@ -2,12 +2,11 @@ title: Introduction to arrow functions in JavaScript shortTitle: Arrow functions introduction type: story -tags: javascript,function +tags: [javascript,function] author: chalarangelo cover: arrow-functions 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### Syntax diff --git a/blog_posts/javascript-arrow-regular-function-differences.md b/snippets/javascript-arrow-regular-function-differences.md similarity index 98% rename from blog_posts/javascript-arrow-regular-function-differences.md rename to snippets/javascript-arrow-regular-function-differences.md index 2209b10ee..b6b00e820 100644 --- a/blog_posts/javascript-arrow-regular-function-differences.md +++ b/snippets/javascript-arrow-regular-function-differences.md @@ -2,11 +2,11 @@ title: What are the differences between arrow functions and regular functions in JavaScript? shortTitle: Arrow functions vs regular functions type: question -tags: javascript,function +tags: [javascript,function] author: chalarangelo cover: fallen-leaves excerpt: JavaScript's arrow functions are seemingly the same as regular functions, but there are some important differences you need to know. -firstSeen: 2021-10-17T05:00:00-04:00 +dateModified: 2021-10-17T05:00:00-04:00 --- JavaScript's arrow functions might seem the same as regular functions on the surface, but they have some very important differences: diff --git a/blog_posts/javascript-async-array-loops.md b/snippets/javascript-async-array-loops.md similarity index 96% rename from blog_posts/javascript-async-array-loops.md rename to snippets/javascript-async-array-loops.md index 3f9c8e3ce..cc96dd4d8 100644 --- a/blog_posts/javascript-async-array-loops.md +++ b/snippets/javascript-async-array-loops.md @@ -2,12 +2,11 @@ title: Asynchronous array loops in JavaScript shortTitle: Asynchronous array loops type: story -tags: javascript,array,function,promise +tags: [javascript,array,function,promise] author: chalarangelo cover: sunflowers 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 +dateModified: 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/snippets/javascript-await-timeout.md similarity index 97% rename from blog_posts/javascript-await-timeout.md rename to snippets/javascript-await-timeout.md index d917e3891..e11ddf04a 100644 --- a/blog_posts/javascript-await-timeout.md +++ b/snippets/javascript-await-timeout.md @@ -2,12 +2,11 @@ title: How can I add a timeout to a promise in JavaScript? shortTitle: Promise timeout type: question -tags: javascript,promise,timeout,class +tags: [javascript,promise,timeout,class] author: chalarangelo cover: walking 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 +dateModified: 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-blank-value.md b/snippets/javascript-blank-value.md similarity index 98% rename from blog_posts/javascript-blank-value.md rename to snippets/javascript-blank-value.md index 2369bfe77..3abb913f6 100644 --- a/blog_posts/javascript-blank-value.md +++ b/snippets/javascript-blank-value.md @@ -2,11 +2,11 @@ title: How can I check for a blank value in JavaScript? shortTitle: Value is blank type: question -tags: javascript,type +tags: [javascript,type] author: chalarangelo cover: workspace-with-speaker excerpt: JavaScript doesn't have a built-in way to check if a value is blank, but it's easy to create one. -firstSeen: 2022-09-25T05:00:00-04:00 +dateModified: 2022-09-25T05:00:00-04:00 --- JavaScript doesn't have a built-in way to check if a value is blank, but it's easy to create one. Before we do, however, we should define the behavior of such a method. The inspiration for this comes from Rails' `blank?` method, but modified to fit JavaScript's needs. diff --git a/blog_posts/javascript-boolean-function.md b/snippets/javascript-boolean-function.md similarity index 95% rename from blog_posts/javascript-boolean-function.md rename to snippets/javascript-boolean-function.md index 4e1f6bccd..97d700035 100644 --- a/blog_posts/javascript-boolean-function.md +++ b/snippets/javascript-boolean-function.md @@ -2,12 +2,11 @@ title: Where and how can I use the Boolean function in JavaScript? shortTitle: Boolean function use-cases type: question -tags: javascript,function,type +tags: [javascript,function,type] author: chalarangelo cover: rocky-lake 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 +dateModified: 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-boolean-trap.md b/snippets/javascript-boolean-trap.md similarity index 98% rename from blog_posts/javascript-boolean-trap.md rename to snippets/javascript-boolean-trap.md index 14cb88b65..0bc955220 100644 --- a/blog_posts/javascript-boolean-trap.md +++ b/snippets/javascript-boolean-trap.md @@ -2,11 +2,11 @@ title: Boolean traps and how to avoid them shortTitle: Boolean traps type: story -tags: javascript,function,type,boolean +tags: [javascript,function,type,boolean] author: chalarangelo cover: lighthouse excerpt: Boolean traps can cause readability and maintainability issues in your code. Learn what they are, how to spot and fix them in this article. -firstSeen: 2021-07-11T05:00:00-04:00 +dateModified: 2021-07-11T05:00:00-04:00 --- I recently came across the concept of **Boolean traps** and it instantly resonated with me due to the volume of Google searches I've performed because of it. In this article, I'll try to explain what it is, why it's somewhat of an anti-pattern, how to spot it in your code and ways to refactor around it. diff --git a/blog_posts/javascript-callbacks.md b/snippets/javascript-callbacks.md similarity index 98% rename from blog_posts/javascript-callbacks.md rename to snippets/javascript-callbacks.md index 1b7639a06..0389c4ce0 100644 --- a/blog_posts/javascript-callbacks.md +++ b/snippets/javascript-callbacks.md @@ -2,11 +2,11 @@ title: A cautionary tale about JavaScript callbacks shortTitle: Callback pitfalls type: story -tags: javascript,function +tags: [javascript,function] author: chalarangelo cover: rabbit-call excerpt: JavaScript callbacks are especially tricky when you're not careful. Take a deeper dive into potential issues and how to avoid them. -firstSeen: 2021-07-01T05:00:00-04:00 +dateModified: 2021-07-01T05:00:00-04:00 --- A piece of advice I've found myself repeating often as of late is this: diff --git a/blog_posts/javascript-classical-vs-prototypal-inheritance.md b/snippets/javascript-classical-vs-prototypal-inheritance.md similarity index 97% rename from blog_posts/javascript-classical-vs-prototypal-inheritance.md rename to snippets/javascript-classical-vs-prototypal-inheritance.md index a936b5b54..bf00cf471 100644 --- a/blog_posts/javascript-classical-vs-prototypal-inheritance.md +++ b/snippets/javascript-classical-vs-prototypal-inheritance.md @@ -2,11 +2,11 @@ title: How does JavaScript's prototypal inheritance differ from classical inheritance? shortTitle: Prototypal vs classical inheritance type: question -tags: javascript,object,class +tags: [javascript,object,class] author: chalarangelo cover: last-light excerpt: Understanding the difference between these two object-oriented programming paradigms is key to taking your skills to the next level. -firstSeen: 2021-11-21T05:00:00-04:00 +dateModified: 2021-11-21T05:00:00-04:00 --- ### Object-oriented programming diff --git a/blog_posts/javascript-closures.md b/snippets/javascript-closures.md similarity index 95% rename from blog_posts/javascript-closures.md rename to snippets/javascript-closures.md index f12cb1503..8fc458488 100644 --- a/blog_posts/javascript-closures.md +++ b/snippets/javascript-closures.md @@ -2,12 +2,11 @@ title: What are JavaScript closures? shortTitle: Closures introduction type: question -tags: javascript,function,closure +tags: [javascript,function,closure] author: chalarangelo cover: cherry-trees 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 +dateModified: 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/snippets/javascript-copy-array.md similarity index 94% rename from blog_posts/javascript-copy-array.md rename to snippets/javascript-copy-array.md index ea31907ad..c6dcf3195 100644 --- a/blog_posts/javascript-copy-array.md +++ b/snippets/javascript-copy-array.md @@ -2,12 +2,11 @@ title: How can I clone an array in JavaScript? shortTitle: Clone an array type: question -tags: javascript,array +tags: [javascript,array] author: chalarangelo cover: colorful-plastic 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 +dateModified: 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-date-comparison.md b/snippets/javascript-date-comparison.md similarity index 94% rename from blog_posts/javascript-date-comparison.md rename to snippets/javascript-date-comparison.md index a6538b5ef..1e2e55dc9 100644 --- a/blog_posts/javascript-date-comparison.md +++ b/snippets/javascript-date-comparison.md @@ -2,11 +2,11 @@ title: How do I compare two dates in JavaScript? shortTitle: Date comparison type: question -tags: javascript,date,comparison +tags: [javascript,date,comparison] author: chalarangelo cover: pineapple-at-work excerpt: Learn how you can compare two dates in JavaScript using various different techniques. -firstSeen: 2022-01-16T05:00:00-04:00 +dateModified: 2022-01-16T05:00:00-04:00 --- ### Equality comparison diff --git a/blog_posts/javascript-deep-freeze-object.md b/snippets/javascript-deep-freeze-object.md similarity index 95% rename from blog_posts/javascript-deep-freeze-object.md rename to snippets/javascript-deep-freeze-object.md index 81d0cce49..efab9365c 100644 --- a/blog_posts/javascript-deep-freeze-object.md +++ b/snippets/javascript-deep-freeze-object.md @@ -2,12 +2,11 @@ title: How can I deep freeze an object in JavaScript? shortTitle: Deep freeze object type: question -tags: javascript,object +tags: [javascript,object] author: chalarangelo cover: frozen-globe 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 +dateModified: 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/snippets/javascript-destructuring-assignment.md similarity index 96% rename from blog_posts/javascript-destructuring-assignment.md rename to snippets/javascript-destructuring-assignment.md index 37c68b6b3..72a1ceb88 100644 --- a/blog_posts/javascript-destructuring-assignment.md +++ b/snippets/javascript-destructuring-assignment.md @@ -2,12 +2,11 @@ title: Where and how can I use the destructuring assignment syntax in JavaScript? shortTitle: Destructuring assignment introduction type: question -tags: javascript,array,object +tags: [javascript,array,object] author: chalarangelo cover: building-blocks 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 +dateModified: 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/snippets/javascript-empty-array.md similarity index 94% rename from blog_posts/javascript-empty-array.md rename to snippets/javascript-empty-array.md index 4d21882a9..67f2e54f0 100644 --- a/blog_posts/javascript-empty-array.md +++ b/snippets/javascript-empty-array.md @@ -2,12 +2,11 @@ title: How do I empty an array in JavaScript? shortTitle: Empty an array type: question -tags: javascript,array +tags: [javascript,array] author: chalarangelo cover: coconuts 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 +dateModified: 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/snippets/javascript-encodeuri-encodeuricomponent.md similarity index 94% rename from blog_posts/javascript-encodeuri-encodeuricomponent.md rename to snippets/javascript-encodeuri-encodeuricomponent.md index 2facde7c6..49b76c1c8 100644 --- a/blog_posts/javascript-encodeuri-encodeuricomponent.md +++ b/snippets/javascript-encodeuri-encodeuricomponent.md @@ -2,12 +2,11 @@ title: What is the difference between encodeURI() and encodeURIComponent() in JavaScript? shortTitle: encodeURI() vs encodeURIComponent() type: question -tags: javascript,browser +tags: [javascript,browser] author: chalarangelo cover: laptop-view 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### encodeURIComponent() diff --git a/blog_posts/javascript-enum.md b/snippets/javascript-enum.md similarity index 95% rename from blog_posts/javascript-enum.md rename to snippets/javascript-enum.md index d93083694..d138c6156 100644 --- a/blog_posts/javascript-enum.md +++ b/snippets/javascript-enum.md @@ -2,12 +2,11 @@ title: How can I define an enum in JavaScript? shortTitle: Enum implementation type: question -tags: javascript,object,class,symbol,generator +tags: [javascript,object,class,symbol,generator] author: chalarangelo cover: book-chair excerpt: Enums are part of TypeScript, but what about defining 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 +dateModified: 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/snippets/javascript-equality.md similarity index 94% rename from blog_posts/javascript-equality.md rename to snippets/javascript-equality.md index db6ed5574..de3544b38 100644 --- a/blog_posts/javascript-equality.md +++ b/snippets/javascript-equality.md @@ -2,12 +2,11 @@ title: What is the difference between JavaScript's equality operators? shortTitle: JavaScript equality operators type: question -tags: javascript,type,comparison +tags: [javascript,type,comparison] author: chalarangelo cover: beach-pineapple 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 +dateModified: 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/snippets/javascript-event-bubbling-capturing-delegation.md similarity index 97% rename from blog_posts/javascript-event-bubbling-capturing-delegation.md rename to snippets/javascript-event-bubbling-capturing-delegation.md index 33311bc67..148cceae3 100644 --- a/blog_posts/javascript-event-bubbling-capturing-delegation.md +++ b/snippets/javascript-event-bubbling-capturing-delegation.md @@ -2,12 +2,11 @@ title: Understanding event bubbling, capturing and delegation in JavaScript shortTitle: Event bubbling, capturing and delegation type: story -tags: javascript,browser,event +tags: [javascript,browser,event] author: chalarangelo cover: fishermen 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### Event bubbling diff --git a/blog_posts/javascript-event-loop-explained.md b/snippets/javascript-event-loop-explained.md similarity index 98% rename from blog_posts/javascript-event-loop-explained.md rename to snippets/javascript-event-loop-explained.md index c884a9962..965249ce0 100644 --- a/blog_posts/javascript-event-loop-explained.md +++ b/snippets/javascript-event-loop-explained.md @@ -2,11 +2,11 @@ title: What is the Event Loop in JavaScript? shortTitle: Event loop explained type: question -tags: javascript,browser,event +tags: [javascript,browser,event] author: chalarangelo cover: tranquility excerpt: The Event Loop is a source of confusion for many developers, but it's a fundamental piece of the JavaScript engine. -firstSeen: 2022-08-21T05:00:00-04:00 +dateModified: 2022-08-21T05:00:00-04:00 --- The Event Loop is a source of confusion for many developers, but it's a fundamental piece of the JavaScript engine. It's what allows JavaScript to be single-threaded, yet able to execute in a non-blocking fashion. To understand the Event Loop, we first need to explain a few things about the JavaScript engine, such as the Call Stack, Tasks, Microtasks and their respective Queues. Let's break them down one by one. diff --git a/blog_posts/javascript-evil-closures.md b/snippets/javascript-evil-closures.md similarity index 98% rename from blog_posts/javascript-evil-closures.md rename to snippets/javascript-evil-closures.md index c41941a2a..405bfc100 100644 --- a/blog_posts/javascript-evil-closures.md +++ b/snippets/javascript-evil-closures.md @@ -2,11 +2,11 @@ title: Are JavaScript closures inherently evil? shortTitle: Closures and hidden state type: story -tags: javascript,function,closure +tags: [javascript,function,closure] author: chalarangelo cover: silver-flat-screen excerpt: Closures are used frequently, yet often misunderstood. Understanding them in depth is crucial to be able to write clean, maintainable code. -firstSeen: 2022-05-18T05:00:00-04:00 +dateModified: 2022-05-18T05:00:00-04:00 --- JavaScript closures are used frequently, yet often misunderstood. Understanding them in depth is crucial to be able to write clean, maintainable and bug-free code. We previously discussed what they are and how they work. diff --git a/blog_posts/javascript-expression-statement.md b/snippets/javascript-expression-statement.md similarity index 93% rename from blog_posts/javascript-expression-statement.md rename to snippets/javascript-expression-statement.md index 5cad18e3b..c318a888f 100644 --- a/blog_posts/javascript-expression-statement.md +++ b/snippets/javascript-expression-statement.md @@ -2,11 +2,11 @@ title: What is the difference between an expression and a statement in JavaScript? shortTitle: Expressions and statements type: question -tags: javascript,type +tags: [javascript,type] author: chalarangelo cover: forest-balcony excerpt: JavaScript distinguishes expressions and statements. Learn their differences in this short article. -firstSeen: 2021-11-07T05:00:00-04:00 +dateModified: 2021-11-07T05:00:00-04:00 --- JavaScript distinguishes expressions and statements. An **expression** is any valid unit of code that resolves to a value. A **statement** is a unit of code that performs an action. Some examples: diff --git a/blog_posts/javascript-for-in-for-of-foreach.md b/snippets/javascript-for-in-for-of-foreach.md similarity index 94% rename from blog_posts/javascript-for-in-for-of-foreach.md rename to snippets/javascript-for-in-for-of-foreach.md index 92bed2327..6cdc9b561 100644 --- a/blog_posts/javascript-for-in-for-of-foreach.md +++ b/snippets/javascript-for-in-for-of-foreach.md @@ -2,12 +2,11 @@ title: What is the difference between JavaScript's for...in, for...of and forEach? shortTitle: JavaScript iteration methods comparison type: question -tags: javascript,array,object,iterator +tags: [javascript,array,object,iterator] author: chalarangelo cover: lake-loop 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 +dateModified: 2021-06-12T19:30:41+03:00 --- `for...in` is used to iterate over all enumerable properties of an object, including inherited enumerable properties. This iteration statement can be used with arrays strings or plain objects, but not with `Map` or `Set` objects. diff --git a/blog_posts/javascript-for-loop-early-break.md b/snippets/javascript-for-loop-early-break.md similarity index 93% rename from blog_posts/javascript-for-loop-early-break.md rename to snippets/javascript-for-loop-early-break.md index 6037794b3..ca0cd3ada 100644 --- a/blog_posts/javascript-for-loop-early-break.md +++ b/snippets/javascript-for-loop-early-break.md @@ -2,12 +2,11 @@ title: "Tip: Use JavaScript for loops if you need to break out early" shortTitle: For loops for early breaking type: tip -tags: javascript,array,loop +tags: [javascript,array,loop] author: chalarangelo cover: armchair 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 +dateModified: 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/snippets/javascript-function-call-apply-bind.md similarity index 95% rename from blog_posts/javascript-function-call-apply-bind.md rename to snippets/javascript-function-call-apply-bind.md index 760b93eae..a4d087672 100644 --- a/blog_posts/javascript-function-call-apply-bind.md +++ b/snippets/javascript-function-call-apply-bind.md @@ -2,12 +2,11 @@ title: JavaScript function methods - call(), apply() and bind() shortTitle: Function methods - call(), apply() and bind() type: story -tags: javascript,function +tags: [javascript,function] author: chalarangelo cover: canoe 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### Function.prototype.call() diff --git a/blog_posts/javascript-higher-order-functions.md b/snippets/javascript-higher-order-functions.md similarity index 95% rename from blog_posts/javascript-higher-order-functions.md rename to snippets/javascript-higher-order-functions.md index 88dbce5f7..92c4cf6da 100644 --- a/blog_posts/javascript-higher-order-functions.md +++ b/snippets/javascript-higher-order-functions.md @@ -2,12 +2,11 @@ title: Understanding higher-order functions in JavaScript shortTitle: Higher-order functions type: story -tags: javascript,function +tags: [javascript,function] author: chalarangelo cover: rock-climbing 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-11-07T16:34:37+03:00 +dateModified: 2021-11-07T16:34:37+03:00 --- Higher-order functions are **functions that operate on other functions**, either by accepting 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/snippets/javascript-iife.md similarity index 95% rename from blog_posts/javascript-iife.md rename to snippets/javascript-iife.md index a30fb5c49..041ae8a1d 100644 --- a/blog_posts/javascript-iife.md +++ b/snippets/javascript-iife.md @@ -2,12 +2,11 @@ title: What is an IIFE in JavaScript? shortTitle: IIFE introduction type: question -tags: javascript,function +tags: [javascript,function] author: chalarangelo cover: tropical-waterfall 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-12T19:30:41+03:00 -lastUpdated: 2021-06-14T12:00:00+03:00 +dateModified: 2021-06-14T12:00:00+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-index-for-of-loop.md b/snippets/javascript-index-for-of-loop.md similarity index 94% rename from blog_posts/javascript-index-for-of-loop.md rename to snippets/javascript-index-for-of-loop.md index e6a8e7308..c1689f2e7 100644 --- a/blog_posts/javascript-index-for-of-loop.md +++ b/snippets/javascript-index-for-of-loop.md @@ -2,11 +2,11 @@ title: "Tip: Get the index of an array item in a JavaScript for...of loop" shortTitle: Array index in for...of loops type: tip -tags: javascript,array,iterator +tags: [javascript,array,iterator] author: chalarangelo cover: cave-view excerpt: Did you know you can get the index of an array item in a JavaScript for...of loop? Learn how with this bite-sized tip. -firstSeen: 2021-07-25T05:00:00-04:00 +dateModified: 2021-07-25T05:00:00-04:00 --- JavaScript's `for...of` loops provide an easy way to iterate over all kinds of iterables from arrays and stings to `Map` and `Set` objects. One supposed limitation over other options (e.g. `Array.prototype.forEach()`) is that you only get the value of each item in the iterable. But that is not necessarily the case, as you can easily leverage `Array.prototype.entries()` to get both the index and value of each array item: diff --git a/blog_posts/javascript-iterable-to-array.md b/snippets/javascript-iterable-to-array.md similarity index 94% rename from blog_posts/javascript-iterable-to-array.md rename to snippets/javascript-iterable-to-array.md index de8c22ce7..0ef951d15 100644 --- a/blog_posts/javascript-iterable-to-array.md +++ b/snippets/javascript-iterable-to-array.md @@ -2,12 +2,11 @@ title: How do I convert an iterable to an array in JavaScript? shortTitle: Iterable to array type: question -tags: javascript,object,array,string +tags: [javascript,object,array,string] author: chalarangelo cover: waves 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 +dateModified: 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/snippets/javascript-iterators.md similarity index 97% rename from blog_posts/javascript-iterators.md rename to snippets/javascript-iterators.md index e21ebdfab..487feb862 100644 --- a/blog_posts/javascript-iterators.md +++ b/snippets/javascript-iterators.md @@ -2,12 +2,11 @@ title: What are JavaScript Iterators and where can I use them? shortTitle: JavaScript iterators introduction type: question -tags: javascript,array,object,iterator +tags: [javascript,array,object,iterator] author: chalarangelo cover: balloons 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-09-26T13:20:57+03:00 +dateModified: 2021-09-26T13:20:57+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-json-stringify-pick-keys.md b/snippets/javascript-json-stringify-pick-keys.md similarity index 96% rename from blog_posts/javascript-json-stringify-pick-keys.md rename to snippets/javascript-json-stringify-pick-keys.md index 3ceb35cc5..7baf239b6 100644 --- a/blog_posts/javascript-json-stringify-pick-keys.md +++ b/snippets/javascript-json-stringify-pick-keys.md @@ -2,11 +2,11 @@ title: "Tip: Serialize specific properties from a JSON object" shortTitle: Selective property serialization type: tip -tags: javascript,object,json +tags: [javascript,object,json] author: chalarangelo cover: coffee-drip excerpt: Have you ever wanted to serialize an object but only include certain keys? Turns out JavaScript provides an easy way to do this! -firstSeen: 2021-07-06T05:00:00-04:00 +dateModified: 2021-07-06T05:00:00-04:00 --- The default behavior for `JSON.stringify()` is to pull all serializable properties from the given object. However, there are many scenarios where you might want to pick a specific subset of keys from an object. This problem is handled by the second argument of `JSON.stringify()` by passing it either an array of keys or a replacer function. diff --git a/blog_posts/javascript-listen-once.md b/snippets/javascript-listen-once.md similarity index 95% rename from blog_posts/javascript-listen-once.md rename to snippets/javascript-listen-once.md index 8bfa96ec5..f747ea555 100644 --- a/blog_posts/javascript-listen-once.md +++ b/snippets/javascript-listen-once.md @@ -2,11 +2,10 @@ title: How can I execute an event handler at most once? shortTitle: Execute event handler only once type: question -tags: javascript,browser,event +tags: [javascript,browser,event] cover: dog-waiting excerpt: Learn how to attach an event handler to events that is executed at most once in this JavaScript article. -firstSeen: 2020-08-12T11:21:48+03:00 -lastUpdated: 2021-06-12T19:30:41+03:00 +dateModified: 2021-06-12T19:30:41+03:00 --- ### jQuery diff --git a/blog_posts/javascript-make-iterable.md b/snippets/javascript-make-iterable.md similarity index 91% rename from blog_posts/javascript-make-iterable.md rename to snippets/javascript-make-iterable.md index 2ca98da5f..8346a86c5 100644 --- a/blog_posts/javascript-make-iterable.md +++ b/snippets/javascript-make-iterable.md @@ -2,12 +2,11 @@ title: "Tip: Make any JavaScript value iterable" shortTitle: Make any value iterable type: tip -tags: javascript,array,iterator,generator +tags: [javascript,array,iterator,generator] author: chalarangelo cover: colorful-plastic 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 +dateModified: 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/snippets/javascript-memoization.md similarity index 96% rename from blog_posts/javascript-memoization.md rename to snippets/javascript-memoization.md index d0901fc52..0fb0f6d9e 100644 --- a/blog_posts/javascript-memoization.md +++ b/snippets/javascript-memoization.md @@ -2,12 +2,11 @@ title: Where and how can I use memoization in JavaScript? shortTitle: Memoization introduction type: question -tags: javascript,function,memoization +tags: [javascript,function,memoization] author: chalarangelo cover: cherry-trees 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-11-07T16:34:37+03:00 +dateModified: 2021-11-07T16:34:37+03:00 --- Memoization is a commonly used technique that can help speed up your code significantly. This technique relies on a **cache** to store results for previously completed units of work. The purpose of the cache is to **avoid performing the same work more than once**, speeding up subsequent calls of time-consuming functions. 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/snippets/javascript-merge-arrays.md similarity index 96% rename from blog_posts/javascript-merge-arrays.md rename to snippets/javascript-merge-arrays.md index 273c96ce2..f56bc92c3 100644 --- a/blog_posts/javascript-merge-arrays.md +++ b/snippets/javascript-merge-arrays.md @@ -2,12 +2,11 @@ title: How do I merge two arrays in JavaScript? shortTitle: Merge arrays type: question -tags: javascript,array +tags: [javascript,array] author: chalarangelo cover: arrays 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### Spread operator diff --git a/blog_posts/javascript-modify-url-without-reload.md b/snippets/javascript-modify-url-without-reload.md similarity index 96% rename from blog_posts/javascript-modify-url-without-reload.md rename to snippets/javascript-modify-url-without-reload.md index b7f404cf6..cea26d067 100644 --- a/blog_posts/javascript-modify-url-without-reload.md +++ b/snippets/javascript-modify-url-without-reload.md @@ -2,12 +2,11 @@ title: How do I use JavaScript to modify the URL without reloading the page? shortTitle: Modify URL without reloading type: question -tags: javascript,browser +tags: [javascript,browser] author: chalarangelo cover: compass 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-09-27T16:47:49+03:00 +dateModified: 2021-09-27T16:47:49+03:00 --- ### Using the History API diff --git a/blog_posts/javascript-module-cheatsheet.md b/snippets/javascript-module-cheatsheet.md similarity index 96% rename from blog_posts/javascript-module-cheatsheet.md rename to snippets/javascript-module-cheatsheet.md index 8abac9602..c2545c599 100644 --- a/blog_posts/javascript-module-cheatsheet.md +++ b/snippets/javascript-module-cheatsheet.md @@ -1,12 +1,11 @@ --- title: JavaScript modules Cheat Sheet type: cheatsheet -tags: javascript,cheatsheet +tags: [javascript,cheatsheet] author: chalarangelo cover: mountain-lake-2 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### Named exports diff --git a/blog_posts/javascript-naming-conventions.md b/snippets/javascript-naming-conventions.md similarity index 93% rename from blog_posts/javascript-naming-conventions.md rename to snippets/javascript-naming-conventions.md index d17919abf..28169ca93 100644 --- a/blog_posts/javascript-naming-conventions.md +++ b/snippets/javascript-naming-conventions.md @@ -2,12 +2,11 @@ title: JavaScript naming conventions shortTitle: Naming conventions type: story -tags: javascript,variable,cheatsheet +tags: [javascript,variable,cheatsheet] author: chalarangelo cover: naming-conventions 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### Variables diff --git a/blog_posts/javascript-nullish-coalescing-optional-chaining.md b/snippets/javascript-nullish-coalescing-optional-chaining.md similarity index 96% rename from blog_posts/javascript-nullish-coalescing-optional-chaining.md rename to snippets/javascript-nullish-coalescing-optional-chaining.md index 39ccc4298..debf5cacd 100644 --- a/blog_posts/javascript-nullish-coalescing-optional-chaining.md +++ b/snippets/javascript-nullish-coalescing-optional-chaining.md @@ -2,12 +2,11 @@ title: How can I use optional chaining and nullish coalescing in my JavaScript project? shortTitle: Optional chaining and nullish coalescing type: question -tags: javascript,type +tags: [javascript,type] author: chalarangelo cover: purple-leaves 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 +dateModified: 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-numeric-separator.md b/snippets/javascript-numeric-separator.md similarity index 95% rename from blog_posts/javascript-numeric-separator.md rename to snippets/javascript-numeric-separator.md index 864062374..aded6caf2 100644 --- a/blog_posts/javascript-numeric-separator.md +++ b/snippets/javascript-numeric-separator.md @@ -2,11 +2,11 @@ title: JavaScript's numeric separators explained shortTitle: Numeric separators explained type: story -tags: javascript,math,type +tags: [javascript,math,type] author: chalarangelo cover: coffee-drip excerpt: Numeric separators are a somewhat lesser-known JavaScript syntactic sugar that can make working with large constants a lot easier. -firstSeen: 2021-06-27T05:00:00-04:00 +dateModified: 2021-06-27T05:00:00-04:00 --- Numeric separators are a lesser-known JavaScript syntactic sugar that can make working with numeric constants a lot easier. The long and short of it is that you can add underscores (`_`) to numeric values to make them more readable. diff --git a/blog_posts/javascript-object-array-proxy.md b/snippets/javascript-object-array-proxy.md similarity index 97% rename from blog_posts/javascript-object-array-proxy.md rename to snippets/javascript-object-array-proxy.md index 97cb93ca5..66b7086a1 100644 --- a/blog_posts/javascript-object-array-proxy.md +++ b/snippets/javascript-object-array-proxy.md @@ -2,12 +2,11 @@ title: Can I use an object as an array without modifying it in JavaScript? shortTitle: Object as array type: question -tags: javascript,object,array,proxy,iterator,pattern +tags: [javascript,object,array,proxy,iterator,pattern] author: chalarangelo cover: birds 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-09-27T16:42:11+03:00 +dateModified: 2021-09-27T16:42:11+03:00 --- The other day, I stumbled upon some code where I needed to handle an object as a regular array a few times. 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-comparison.md b/snippets/javascript-object-comparison.md similarity index 96% rename from blog_posts/javascript-object-comparison.md rename to snippets/javascript-object-comparison.md index 72f7e2f0d..f0c37f621 100644 --- a/blog_posts/javascript-object-comparison.md +++ b/snippets/javascript-object-comparison.md @@ -2,11 +2,11 @@ title: How do I compare two objects in JavaScript? shortTitle: Object comparison type: question -tags: javascript,object,comparison +tags: [javascript,object,comparison] author: chalarangelo cover: blue-lake excerpt: Learn how you can compare two objects in JavaScript using various different techniques. -firstSeen: 2021-09-26T05:00:00-04:00 +dateModified: 2021-09-26T05:00:00-04:00 --- ### Equality comparison diff --git a/blog_posts/javascript-object-is-triple-equals.md b/snippets/javascript-object-is-triple-equals.md similarity index 91% rename from blog_posts/javascript-object-is-triple-equals.md rename to snippets/javascript-object-is-triple-equals.md index 3611ff9f6..016743b4c 100644 --- a/blog_posts/javascript-object-is-triple-equals.md +++ b/snippets/javascript-object-is-triple-equals.md @@ -2,12 +2,11 @@ title: What's the difference between Object.is() and the triple equals operator in JavaScript? shortTitle: Object.is() vs triple equals operator type: question -tags: javascript,object,type +tags: [javascript,object,type] author: chalarangelo cover: rocky-mountains 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 +dateModified: 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-pass-by-reference-or-pass-by-value.md b/snippets/javascript-pass-by-reference-or-pass-by-value.md similarity index 96% rename from blog_posts/javascript-pass-by-reference-or-pass-by-value.md rename to snippets/javascript-pass-by-reference-or-pass-by-value.md index 96b42c00a..6a30d0337 100644 --- a/blog_posts/javascript-pass-by-reference-or-pass-by-value.md +++ b/snippets/javascript-pass-by-reference-or-pass-by-value.md @@ -2,11 +2,11 @@ title: Is JavaScript pass-by-value or pass-by-reference? shortTitle: Pass-by-value or pass-by-reference type: question -tags: javascript,function,object +tags: [javascript,function,object] author: chalarangelo cover: baloons-field excerpt: How JavaScript handles passing data is a source of confusion and bugs for many developers, especially when it comes to object types. -firstSeen: 2021-12-05T05:00:00-04:00 +dateModified: 2021-12-05T05:00:00-04:00 --- JavaScript is always **pass-by-value**. This means everything in JavaScript is a value type and function arguments are always passed by value. That being said, object types are a bit more confusing. diff --git a/blog_posts/javascript-prefix-postfix-operators.md b/snippets/javascript-prefix-postfix-operators.md similarity index 93% rename from blog_posts/javascript-prefix-postfix-operators.md rename to snippets/javascript-prefix-postfix-operators.md index 1e5926c80..4c4b946dc 100644 --- a/blog_posts/javascript-prefix-postfix-operators.md +++ b/snippets/javascript-prefix-postfix-operators.md @@ -2,11 +2,11 @@ title: What is the difference between prefix and postfix operators? shortTitle: Prefix and postfix operators type: question -tags: javascript,math +tags: [javascript,math] author: chalarangelo cover: plant-candle excerpt: While both the prefix and postfix operators increment a value, the resulting value of the expression is very different. -firstSeen: 2021-10-31T05:00:00-04:00 +dateModified: 2021-10-31T05:00:00-04:00 --- The increment operator (`++`) adds `1` to its operand and returns a value. Similarly, the decrement operator (`--`) subtracts `1` from its operand and returns a value. Both of these operators can be used either prefix (`++i`, `--i`) or postfix (`i++`, `i--`). diff --git a/blog_posts/javascript-pretty-print-json.md b/snippets/javascript-pretty-print-json.md similarity index 96% rename from blog_posts/javascript-pretty-print-json.md rename to snippets/javascript-pretty-print-json.md index b8ab9517b..59b90d6d1 100644 --- a/blog_posts/javascript-pretty-print-json.md +++ b/snippets/javascript-pretty-print-json.md @@ -2,11 +2,11 @@ title: "Tip: Pretty-print a JSON object with JavaScript" shortTitle: Pretty-print JSON type: tip -tags: javascript,object,json +tags: [javascript,object,json] author: chalarangelo cover: memories-of-pineapple-3 excerpt: Pretty-printing JSON objects in pretty easy and customizable in JavaScript. Here's the gist of it. -firstSeen: 2022-07-30T05:00:00-04:00 +dateModified: 2022-07-30T05:00:00-04:00 --- Pretty-printing refers to the process of making some data more human-readable. In regards to JSON, it's primarily the process of indenting the data so that it is easier to read. This is pretty easy to accomplish, using `JSON.stringify()` with the appropriate arguments. diff --git a/blog_posts/javascript-prevent-string-being-escaped.md b/snippets/javascript-prevent-string-being-escaped.md similarity index 88% rename from blog_posts/javascript-prevent-string-being-escaped.md rename to snippets/javascript-prevent-string-being-escaped.md index a9d5c1da5..b46734c29 100644 --- a/blog_posts/javascript-prevent-string-being-escaped.md +++ b/snippets/javascript-prevent-string-being-escaped.md @@ -2,12 +2,11 @@ title: "Tip: Prevent a string from being escaped in JavaScript" shortTitle: Prevent string escaping type: tip -tags: javascript,string +tags: [javascript,string] author: chalarangelo cover: glass-blowing 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-12T19:30:41+03:00 -lastUpdated: 2021-06-17T12:00:00+03:00 +dateModified: 2021-06-17T12:00:00+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/snippets/javascript-primitive-instanceof.md similarity index 95% rename from blog_posts/javascript-primitive-instanceof.md rename to snippets/javascript-primitive-instanceof.md index acffe283a..67784902f 100644 --- a/blog_posts/javascript-primitive-instanceof.md +++ b/snippets/javascript-primitive-instanceof.md @@ -2,12 +2,11 @@ title: Is there a way to use instanceof for primitive JavaScript values? shortTitle: Using instanceof for primitive values type: question -tags: javascript,type +tags: [javascript,type] author: chalarangelo cover: wooden-bowl 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 +dateModified: 2021-06-12T19:30:41+03:00 --- JavaScript provides two operators for typechecking: diff --git a/blog_posts/javascript-promise-then-catch.md b/snippets/javascript-promise-then-catch.md similarity index 93% rename from blog_posts/javascript-promise-then-catch.md rename to snippets/javascript-promise-then-catch.md index 7abf5b247..5a60b741c 100644 --- a/blog_posts/javascript-promise-then-catch.md +++ b/snippets/javascript-promise-then-catch.md @@ -2,12 +2,11 @@ title: "Tip: The order of then and catch matters" shortTitle: The order of then and catch matters type: tip -tags: javascript,function,promise +tags: [javascript,function,promise] author: chalarangelo cover: blue-sunrise 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 +dateModified: 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/snippets/javascript-promise-then-finally.md similarity index 94% rename from blog_posts/javascript-promise-then-finally.md rename to snippets/javascript-promise-then-finally.md index 98547e48c..dba3ab684 100644 --- a/blog_posts/javascript-promise-then-finally.md +++ b/snippets/javascript-promise-then-finally.md @@ -2,12 +2,11 @@ title: What is the difference between then and finally in a JavaScript promise? shortTitle: Promise then vs finally type: question -tags: javascript,function,promise +tags: [javascript,function,promise] author: chalarangelo cover: blue-sunrise 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 +dateModified: 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-promises.md b/snippets/javascript-promises.md similarity index 96% rename from blog_posts/javascript-promises.md rename to snippets/javascript-promises.md index a649468c7..23b996443 100644 --- a/blog_posts/javascript-promises.md +++ b/snippets/javascript-promises.md @@ -2,11 +2,11 @@ title: What are promises in JavaScript? In which states can a promise be? shortTitle: Promises introduction type: question -tags: javascript,function,promise +tags: [javascript,function,promise] author: chalarangelo cover: sail-away excerpt: JavaScript's promises represent the eventual completion (or failure) of asynchronous operations and their resulting value. -firstSeen: 2021-10-24T05:00:00-04:00 +dateModified: 2021-10-24T05:00:00-04:00 --- The `Promise` object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. A common example of using promises would be fetching data from a URL. This would create a `Promise` object that represents the data we expect to receive. For example: diff --git a/blog_posts/javascript-property-enumerability.md b/snippets/javascript-property-enumerability.md similarity index 96% rename from blog_posts/javascript-property-enumerability.md rename to snippets/javascript-property-enumerability.md index ec567907e..302affca2 100644 --- a/blog_posts/javascript-property-enumerability.md +++ b/snippets/javascript-property-enumerability.md @@ -2,11 +2,11 @@ title: JavaScript property enumerability shortTitle: Property enumerability type: story -tags: javascript,object +tags: [javascript,object] author: chalarangelo cover: old-consoles excerpt: Property enumerability dictates how JavaScript object properties behave in different scenarios. -firstSeen: 2022-09-11T05:00:00-04:00 +dateModified: 2022-09-11T05:00:00-04:00 --- In most cases, object properties are enumerable by default, unless they are Symbols. This means that you can use the `for...in` loop to iterate over the properties of an object. Similarly, enumerable properties appear in object methods that enumerate the properties of an object. An example of this is the `Object.keys()` method, which will omit properties that are not enumerable. Finally, when using the object spread operator (`...`), only enumerable properties are copied to the new object. diff --git a/blog_posts/javascript-pure-functions.md b/snippets/javascript-pure-functions.md similarity index 95% rename from blog_posts/javascript-pure-functions.md rename to snippets/javascript-pure-functions.md index 2586fba36..018fb25f3 100644 --- a/blog_posts/javascript-pure-functions.md +++ b/snippets/javascript-pure-functions.md @@ -2,11 +2,11 @@ title: What is a pure function? shortTitle: Pure function introduction type: question -tags: javascript,function +tags: [javascript,function] author: chalarangelo cover: dark-leaves excerpt: Pure functions are a very important concept to know, especially if you're interested in functional programming. -firstSeen: 2021-12-19T05:00:00-04:00 +dateModified: 2021-12-19T05:00:00-04:00 --- Pure functions are one of the most important concepts to learn and understand, especially if you're interested in functional programming. diff --git a/blog_posts/javascript-query-selector-shorthand.md b/snippets/javascript-query-selector-shorthand.md similarity index 89% rename from blog_posts/javascript-query-selector-shorthand.md rename to snippets/javascript-query-selector-shorthand.md index 42357833f..6a71adc7e 100644 --- a/blog_posts/javascript-query-selector-shorthand.md +++ b/snippets/javascript-query-selector-shorthand.md @@ -2,12 +2,11 @@ title: "Tip: Create your own query selector shorthand" shortTitle: Query selector shorthand type: tip -tags: javascript,browser +tags: [javascript,browser] author: chalarangelo cover: pineapple-at-work 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 +dateModified: 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-random-value-pure-functions.md b/snippets/javascript-random-value-pure-functions.md similarity index 96% rename from blog_posts/javascript-random-value-pure-functions.md rename to snippets/javascript-random-value-pure-functions.md index 9d445cd51..2af13f6b7 100644 --- a/blog_posts/javascript-random-value-pure-functions.md +++ b/snippets/javascript-random-value-pure-functions.md @@ -2,11 +2,11 @@ title: Using random values with pure functions shortTitle: Pure functions & randomness type: story -tags: javascript,function,random,testing +tags: [javascript,function,random,testing] author: chalarangelo cover: do-more-computer excerpt: Randomness and pure functions don't seem to go hand in hand. But where there's a will, there's a way. -firstSeen: 2022-06-19T05:00:00-04:00 +dateModified: 2022-06-19T05:00:00-04:00 --- Working with random values can create code that's hard to test. Usually, the remedy to such issues is to use [pure functions](/articles/javascript-pure-functions). A pure function is a function that always returns the same value given the same input. As they do not have side effects and their return value is predictable, testing pure functions is much easier. diff --git a/blog_posts/javascript-range-generator.md b/snippets/javascript-range-generator.md similarity index 95% rename from blog_posts/javascript-range-generator.md rename to snippets/javascript-range-generator.md index d4039fdc8..e23edea98 100644 --- a/blog_posts/javascript-range-generator.md +++ b/snippets/javascript-range-generator.md @@ -2,12 +2,11 @@ title: Using JavaScript generator functions for ranges shortTitle: Generator functions for ranges type: story -tags: javascript,function,array +tags: [javascript,function,array] author: chalarangelo cover: generator 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### Generator functions diff --git a/blog_posts/javascript-recursion.md b/snippets/javascript-recursion.md similarity index 95% rename from blog_posts/javascript-recursion.md rename to snippets/javascript-recursion.md index 4b689372c..abe944c57 100644 --- a/blog_posts/javascript-recursion.md +++ b/snippets/javascript-recursion.md @@ -2,11 +2,11 @@ title: What is recursion and when is it useful? shortTitle: Recursion introduction type: question -tags: javascript,function,recursion +tags: [javascript,function,recursion] author: chalarangelo cover: curve excerpt: Recursion is a very important programming concept all developers should be familiar with. -firstSeen: 2022-01-23T05:00:00-04:00 +dateModified: 2022-01-23T05:00:00-04:00 --- Recursion is the **repeated application of a process**. In JavaScript, recursion involves functions that call themselves repeatedly until they reach a base case. The base case breaks out of the recursion loop, thus allowing previous calls to the function to return a result. If no such case exists, the function will call itself indefinitely resulting in a stack overflow. diff --git a/blog_posts/javascript-reload-page.md b/snippets/javascript-reload-page.md similarity index 96% rename from blog_posts/javascript-reload-page.md rename to snippets/javascript-reload-page.md index da290533a..37d62567f 100644 --- a/blog_posts/javascript-reload-page.md +++ b/snippets/javascript-reload-page.md @@ -2,11 +2,11 @@ title: How can I use JavaScript to reload the page? shortTitle: Reload page type: story -tags: javascript,browser +tags: [javascript,browser] author: chalarangelo cover: night-tram excerpt: Need to reload the current page using JavaScript? Here's the best way to do it, as well as some alternatives. -firstSeen: 2023-05-14T05:00:00-04:00 +dateModified: 2023-05-14T05:00:00-04:00 --- ### The short answer diff --git a/blog_posts/javascript-remove-object-property.md b/snippets/javascript-remove-object-property.md similarity index 95% rename from blog_posts/javascript-remove-object-property.md rename to snippets/javascript-remove-object-property.md index 761c761d3..4320ca075 100644 --- a/blog_posts/javascript-remove-object-property.md +++ b/snippets/javascript-remove-object-property.md @@ -2,12 +2,11 @@ title: How do I remove a property from a JavaScript object? shortTitle: Remove property from object type: question -tags: javascript,object +tags: [javascript,object] author: chalarangelo cover: brown-bird 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 +dateModified: 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/snippets/javascript-return-constructor.md similarity index 95% rename from blog_posts/javascript-return-constructor.md rename to snippets/javascript-return-constructor.md index 485e38067..656bfc4ec 100644 --- a/blog_posts/javascript-return-constructor.md +++ b/snippets/javascript-return-constructor.md @@ -2,12 +2,11 @@ title: What does a JavaScript constructor return? shortTitle: Constructor return value type: question -tags: javascript,function,class,object +tags: [javascript,function,class,object] author: chalarangelo cover: architectural 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 +dateModified: 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/snippets/javascript-shallow-deep-clone.md similarity index 96% rename from blog_posts/javascript-shallow-deep-clone.md rename to snippets/javascript-shallow-deep-clone.md index 4cfcb449d..5d0224b6e 100644 --- a/blog_posts/javascript-shallow-deep-clone.md +++ b/snippets/javascript-shallow-deep-clone.md @@ -2,12 +2,11 @@ title: How do I clone an object in JavaScript? shortTitle: Object cloning type: question -tags: javascript,object +tags: [javascript,object] author: chalarangelo cover: pagodas 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 +dateModified: 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/snippets/javascript-singleton-proxy.md similarity index 96% rename from blog_posts/javascript-singleton-proxy.md rename to snippets/javascript-singleton-proxy.md index 287051f59..814e0cf1a 100644 --- a/blog_posts/javascript-singleton-proxy.md +++ b/snippets/javascript-singleton-proxy.md @@ -2,12 +2,11 @@ title: How can I implement a singleton in JavaScript? shortTitle: Singleton implementation type: question -tags: javascript,object,proxy,pattern +tags: [javascript,object,proxy,pattern] author: chalarangelo cover: obelisk excerpt: Learn how to implement the singleton design pattern in JavaScript, using the Proxy object. -firstSeen: 2020-02-25T16:02:03+02:00 -lastUpdated: 2021-09-28T20:11:55+03:00 +dateModified: 2021-09-28T20:11:55+03:00 --- A singleton is an **object-oriented software design pattern** which ensures a given class is only ever instantiated once. It can be useful in many different situations, such as creating global objects shared across an application. While JavaScript supports object-oriented programming, it doesn't provide many simple options to implement this pattern. diff --git a/blog_posts/javascript-sleep.md b/snippets/javascript-sleep.md similarity index 95% rename from blog_posts/javascript-sleep.md rename to snippets/javascript-sleep.md index 15af0600e..6f449d775 100644 --- a/blog_posts/javascript-sleep.md +++ b/snippets/javascript-sleep.md @@ -2,12 +2,11 @@ title: How can I implement a sleep function in JavaScript? shortTitle: Sleep function type: question -tags: javascript,date,promise +tags: [javascript,date,promise] author: chalarangelo cover: sleepy-cat excerpt: Learn all the different ways you can implement a `sleep()` function in JavaScript. -firstSeen: 2020-08-04T20:08:54+03:00 -lastUpdated: 2021-11-06T20:51:47+03:00 +dateModified: 2021-11-06T20:51:47+03:00 --- JavaScript does not come with a `sleep()` function out of the box. That's probably a good idea considering the environments where it runs and the trouble it could cause if used incorrectly. The closest equivalent is the `setTimeout()` function, but there are other, less common ways to implement a function that will pause execution for a specified amount of time. diff --git a/blog_posts/javascript-spread-rest-syntax.md b/snippets/javascript-spread-rest-syntax.md similarity index 94% rename from blog_posts/javascript-spread-rest-syntax.md rename to snippets/javascript-spread-rest-syntax.md index 173bf83ef..d341b5dfb 100644 --- a/blog_posts/javascript-spread-rest-syntax.md +++ b/snippets/javascript-spread-rest-syntax.md @@ -2,12 +2,11 @@ title: Understanding the spread and rest syntax in Javascript shortTitle: Spread and rest syntax type: story -tags: javascript,array,function +tags: [javascript,array,function] author: chalarangelo cover: antelope 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### Spread syntax diff --git a/blog_posts/javascript-store-dom-items.md b/snippets/javascript-store-dom-items.md similarity index 92% rename from blog_posts/javascript-store-dom-items.md rename to snippets/javascript-store-dom-items.md index 7b4846dc1..c8489f82b 100644 --- a/blog_posts/javascript-store-dom-items.md +++ b/snippets/javascript-store-dom-items.md @@ -2,12 +2,11 @@ title: "Tip: Minimize DOM access" shortTitle: Minimize DOM access type: tip -tags: javascript,browser +tags: [javascript,browser] author: chalarangelo cover: armchair 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 +dateModified: 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-string-contains-substring.md b/snippets/javascript-string-contains-substring.md similarity index 95% rename from blog_posts/javascript-string-contains-substring.md rename to snippets/javascript-string-contains-substring.md index f3b193759..a915e6e9f 100644 --- a/blog_posts/javascript-string-contains-substring.md +++ b/snippets/javascript-string-contains-substring.md @@ -2,11 +2,11 @@ title: Check if a string contains a substring in JavaScript shortTitle: String contains substring type: story -tags: javascript,string +tags: [javascript,string] author: chalarangelo cover: sea-view-2 excerpt: Let's have a look at how to check if a string contains a substring in JavaScript. -firstSeen: 2022-07-27T05:00:00-04:00 +dateModified: 2022-07-27T05:00:00-04:00 --- ### String.prototype.includes() diff --git a/blog_posts/javascript-string-immutability.md b/snippets/javascript-string-immutability.md similarity index 93% rename from blog_posts/javascript-string-immutability.md rename to snippets/javascript-string-immutability.md index 1db4176ef..0f13f5c9e 100644 --- a/blog_posts/javascript-string-immutability.md +++ b/snippets/javascript-string-immutability.md @@ -2,11 +2,11 @@ title: Are JavaScript strings immutable? shortTitle: String immutability type: question -tags: javascript,string,type +tags: [javascript,string,type] author: chalarangelo cover: purple-sunset excerpt: When it comes to immutability, many developers have trouble wrapping their head around JavaScript strings. Yet they're not as complicated as you might expect. -firstSeen: 2021-10-10T05:00:00-04:00 +dateModified: 2021-10-10T05:00:00-04:00 --- String specifications among programming languages vary, however most languages treat them as reference types. But strings in JavaScript are different. They are **immutable primitives**. This means that the characters within them may not be changed and that any operations on strings actually create new strings. diff --git a/blog_posts/javascript-string-to-boolean.md b/snippets/javascript-string-to-boolean.md similarity index 95% rename from blog_posts/javascript-string-to-boolean.md rename to snippets/javascript-string-to-boolean.md index 2120c781a..9d47ad7a1 100644 --- a/blog_posts/javascript-string-to-boolean.md +++ b/snippets/javascript-string-to-boolean.md @@ -2,11 +2,11 @@ title: "Tip: Convert a string to a boolean" shortTitle: String to boolean type: tip -tags: javascript,string,boolean,type +tags: [javascript,string,boolean,type] author: chalarangelo cover: two-cities excerpt: Have you ever tried to convert the string representation of a boolean to an actual boolean value? Here's a simple way to do it. -firstSeen: 2022-09-14T05:00:00-04:00 +dateModified: 2022-09-14T05:00:00-04:00 --- Sometimes, one might run into the problem of converting the string representation of a value into the value itself. This is often straightforward, such as with numeric values. However, string representations of boolean values can be a bit trickier. diff --git a/blog_posts/javascript-swap-two-variables.md b/snippets/javascript-swap-two-variables.md similarity index 91% rename from blog_posts/javascript-swap-two-variables.md rename to snippets/javascript-swap-two-variables.md index b171ace69..5d5188f32 100644 --- a/blog_posts/javascript-swap-two-variables.md +++ b/snippets/javascript-swap-two-variables.md @@ -2,12 +2,11 @@ title: "Tip: How to swap two variables in JavaScript" shortTitle: Swap two variables type: tip -tags: javascript,variables +tags: [javascript,variables] author: chalarangelo cover: mountain-lake-2 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 +dateModified: 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/snippets/javascript-switch-object.md similarity index 97% rename from blog_posts/javascript-switch-object.md rename to snippets/javascript-switch-object.md index 9bceb2270..e6113818e 100644 --- a/blog_posts/javascript-switch-object.md +++ b/snippets/javascript-switch-object.md @@ -2,12 +2,11 @@ title: Replacing JavaScript switch statement with object literals shortTitle: Switch with object literals type: story -tags: javascript,object +tags: [javascript,object] author: chalarangelo cover: rocky-lake 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-11-07T16:34:37+03:00 +dateModified: 2021-11-07T16:34:37+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-sync-async.md b/snippets/javascript-sync-async.md similarity index 93% rename from blog_posts/javascript-sync-async.md rename to snippets/javascript-sync-async.md index 27b996b7f..0d245bd20 100644 --- a/blog_posts/javascript-sync-async.md +++ b/snippets/javascript-sync-async.md @@ -2,11 +2,11 @@ title: What is the difference between synchronous and asynchronous code in JavaScript? shortTitle: Synchronous vs asynchronous code type: question -tags: javascript,function,promise +tags: [javascript,function,promise] author: chalarangelo cover: pineapple-on-green excerpt: Understanding the differences between synchronous and asynchronous code is a crucial piece of knowledge for every web developer. -firstSeen: 2021-11-14T05:00:00-04:00 +dateModified: 2021-11-14T05:00:00-04:00 --- Synchronous code runs in sequence. This means that each operation must wait for the previous one to complete before executing. diff --git a/blog_posts/javascript-target-blank.md b/snippets/javascript-target-blank.md similarity index 93% rename from blog_posts/javascript-target-blank.md rename to snippets/javascript-target-blank.md index fdbf44fbd..1d55164df 100644 --- a/blog_posts/javascript-target-blank.md +++ b/snippets/javascript-target-blank.md @@ -2,12 +2,11 @@ title: 'Tip: Protect your users from malicious websites when using target="_blank"' shortTitle: 'Safeguarding target="_blank"' type: tip -tags: javascript,browser,security +tags: [javascript,browser,security] author: chalarangelo cover: laptop-with-code 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 +dateModified: 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/snippets/javascript-ternary-operator.md similarity index 94% rename from blog_posts/javascript-ternary-operator.md rename to snippets/javascript-ternary-operator.md index 4d09bfb71..cafa33a89 100644 --- a/blog_posts/javascript-ternary-operator.md +++ b/snippets/javascript-ternary-operator.md @@ -2,11 +2,10 @@ title: What is the ternary operator and how do I use it? shortTitle: Ternary operation introduction type: question -tags: javascript,condition +tags: [javascript,condition] cover: red-succulent 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 +dateModified: 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/snippets/javascript-this.md similarity index 97% rename from blog_posts/javascript-this.md rename to snippets/javascript-this.md index 87b86eee3..716885331 100644 --- a/blog_posts/javascript-this.md +++ b/snippets/javascript-this.md @@ -2,12 +2,11 @@ title: Understanding the "this" keyword in JavaScript shortTitle: The "this" keyword in JavaScript type: story -tags: javascript,function,object +tags: [javascript,function,object] author: chalarangelo cover: u-got-this 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### What is `this`? diff --git a/blog_posts/javascript-truthy-falsy-values.md b/snippets/javascript-truthy-falsy-values.md similarity index 95% rename from blog_posts/javascript-truthy-falsy-values.md rename to snippets/javascript-truthy-falsy-values.md index 13277d00f..9787954f3 100644 --- a/blog_posts/javascript-truthy-falsy-values.md +++ b/snippets/javascript-truthy-falsy-values.md @@ -2,11 +2,11 @@ title: What are truthy and falsy values in JavaScript? shortTitle: Truthy and falsy values type: question -tags: javascript,type,comparison +tags: [javascript,type,comparison] author: chalarangelo cover: little-bird excerpt: JavaScript uses type coercion in Boolean contexts, resulting in truthy or falsy values. Get a hang of how it all works in this quick guide. -firstSeen: 2021-09-12T05:00:00-04:00 +dateModified: 2021-09-12T05:00:00-04:00 --- JavaScript uses **type coercion** (implicit conversion of values from one data type to another) in Boolean contexts, such as conditionals. This means that values are considered either truthy (evaluate to `true`) or falsy (evaluate to `false`) depending on how they are evaluated in a Boolean context. diff --git a/blog_posts/javascript-undeclared-undefined-null.md b/snippets/javascript-undeclared-undefined-null.md similarity index 93% rename from blog_posts/javascript-undeclared-undefined-null.md rename to snippets/javascript-undeclared-undefined-null.md index dd16d6deb..dbc3021a4 100644 --- a/blog_posts/javascript-undeclared-undefined-null.md +++ b/snippets/javascript-undeclared-undefined-null.md @@ -2,12 +2,11 @@ title: What's the difference between undeclared, undefined and null in JavaScript? shortTitle: Undeclared, undefined and null type: question -tags: javascript,type +tags: [javascript,type] author: chalarangelo cover: river-houses 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 +dateModified: 2021-06-12T19:30:41+03:00 --- ### undeclared diff --git a/blog_posts/javascript-use-strict.md b/snippets/javascript-use-strict.md similarity index 97% rename from blog_posts/javascript-use-strict.md rename to snippets/javascript-use-strict.md index fec531875..8d252f112 100644 --- a/blog_posts/javascript-use-strict.md +++ b/snippets/javascript-use-strict.md @@ -2,11 +2,11 @@ title: What does 'use strict' do and what are some of the key benefits to using it? shortTitle: Strict mode introduction type: question -tags: javascript,function,object +tags: [javascript,function,object] author: chalarangelo cover: palm-tree-house excerpt: JavaScript's strict mode can make your code faster, cleaner and more secure. -firstSeen: 2021-11-28T05:00:00-04:00 +dateModified: 2021-11-28T05:00:00-04:00 --- Strict mode can be applied to entire scripts or individual functions by including `'use strict'` before any other statements. diff --git a/blog_posts/javascript-value-as-number.md b/snippets/javascript-value-as-number.md similarity index 93% rename from blog_posts/javascript-value-as-number.md rename to snippets/javascript-value-as-number.md index 209f91b7a..46c9f4262 100644 --- a/blog_posts/javascript-value-as-number.md +++ b/snippets/javascript-value-as-number.md @@ -2,12 +2,11 @@ title: "Tip: You can get the value of an input element as a number" shortTitle: Input element value as number type: tip -tags: javascript,browser,input +tags: [javascript,browser,input] author: chalarangelo cover: mac-and-coffee 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 +dateModified: 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-value-not-equal-to-itself.md b/snippets/javascript-value-not-equal-to-itself.md similarity index 93% rename from blog_posts/javascript-value-not-equal-to-itself.md rename to snippets/javascript-value-not-equal-to-itself.md index 713ed4ba5..3285cf44b 100644 --- a/blog_posts/javascript-value-not-equal-to-itself.md +++ b/snippets/javascript-value-not-equal-to-itself.md @@ -2,11 +2,11 @@ title: What is the only value not equal to itself in JavaScript? shortTitle: The only value not equal to itself type: question -tags: javascript,type,comparison +tags: [javascript,type,comparison] author: chalarangelo cover: eagle excerpt: Did you know there's a JavaScript value that's not equal to itself? -firstSeen: 2021-12-12T05:00:00-04:00 +dateModified: 2021-12-12T05:00:00-04:00 --- `NaN` (Not-a-Number) is the only JavaScript value not equal to itself when comparing with any of the comparison operators. `NaN` is often the result of meaningless or invalid math computations, so it doesn't make sense for two `NaN` values to be considered equal. diff --git a/blog_posts/javascript-var-let-const.md b/snippets/javascript-var-let-const.md similarity index 95% rename from blog_posts/javascript-var-let-const.md rename to snippets/javascript-var-let-const.md index 5380b2361..ed142b530 100644 --- a/blog_posts/javascript-var-let-const.md +++ b/snippets/javascript-var-let-const.md @@ -2,12 +2,11 @@ title: What are the differences between var, let and const in JavaScript? shortTitle: Var, let and const type: question -tags: javascript,type,variable +tags: [javascript,type,variable] author: chalarangelo cover: highlands excerpt: JavaScript variables can be declared a handful of ways. However, they're not all created equal and understanding their differences can drastically change the way you code. -firstSeen: 2021-09-19T05:00:00-04:00 -lastUpdated: 2021-12-02T09:50:42-04:00 +dateModified: 2021-12-02T09:50:42-04:00 --- JavaScript has three variable declaration statements: `var`, `let` and `const`. The latter two were added in ES6, whereas `var` existed since previous versions. One of the first things to notice is that `const` defines constants (i.e. values that will not be reassigned), whereas `var` and `let` define variables. Yet, `var` behaves differently from both `let` and `const` in various other ways. diff --git a/blog_posts/javascript-variable-hoisting.md b/snippets/javascript-variable-hoisting.md similarity index 96% rename from blog_posts/javascript-variable-hoisting.md rename to snippets/javascript-variable-hoisting.md index ec68060f3..d28076cc7 100644 --- a/blog_posts/javascript-variable-hoisting.md +++ b/snippets/javascript-variable-hoisting.md @@ -2,12 +2,11 @@ title: What is hoisting in JavaScript? shortTitle: Hoisting introduction type: question -tags: javascript,type,variable +tags: [javascript,type,variable] author: chalarangelo cover: boat-port 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 +dateModified: 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/snippets/javascript-variable-scope.md similarity index 95% rename from blog_posts/javascript-variable-scope.md rename to snippets/javascript-variable-scope.md index b42fd2f5b..d8488b05f 100644 --- a/blog_posts/javascript-variable-scope.md +++ b/snippets/javascript-variable-scope.md @@ -2,12 +2,11 @@ title: Understanding JavaScript variables and scopes shortTitle: Variables and scopes type: story -tags: javascript,type,variable +tags: [javascript,type,variable] author: chalarangelo cover: periscope 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 +dateModified: 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/snippets/javascript-void-links.md similarity index 93% rename from blog_posts/javascript-void-links.md rename to snippets/javascript-void-links.md index 63274b25a..145cd0e11 100644 --- a/blog_posts/javascript-void-links.md +++ b/snippets/javascript-void-links.md @@ -2,12 +2,11 @@ title: "Tip: Avoid \"javascript:void(0)\" for empty links" shortTitle: Avoid "javascript:void(0)" for empty links type: tip -tags: javascript,browser,accessibility +tags: [javascript,browser,accessibility] author: chalarangelo cover: white-flower 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 +dateModified: 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/jest-mock-global-methods.md b/snippets/jest-mock-global-methods.md similarity index 95% rename from blog_posts/jest-mock-global-methods.md rename to snippets/jest-mock-global-methods.md index fc9308b12..e34a718b9 100644 --- a/blog_posts/jest-mock-global-methods.md +++ b/snippets/jest-mock-global-methods.md @@ -1,11 +1,11 @@ --- title: Mocking global object methods in Jest type: story -tags: javascript,testing +tags: [javascript,testing] author: chalarangelo cover: trippy-chemicals excerpt: Testing your code is important, but mocking can be tricky at times. Here's a quick guide on how to mock global object methods in Jest. -firstSeen: 2022-03-27T05:00:00-04:00 +dateModified: 2022-03-27T05:00:00-04:00 --- Testing is a big part of the development process. It's also where a lot of mistakes can be overlooked, which can pile up and lead to hard-to-debug issues. A common problem is poorly-written mocks, especially regarding global objects and their methods. Let's take a look at how to mock global object methods in Jest. diff --git a/blog_posts/js-abort-fetch.md b/snippets/js-abort-fetch.md similarity index 94% rename from blog_posts/js-abort-fetch.md rename to snippets/js-abort-fetch.md index 7c6fd2aa5..f9e9ba90c 100644 --- a/blog_posts/js-abort-fetch.md +++ b/snippets/js-abort-fetch.md @@ -2,11 +2,11 @@ title: "Tip: Abort a fetch request in JavaScript" shortTitle: Abort a fetch request type: story -tags: javascript,function +tags: [javascript,function] author: chalarangelo cover: cancel-typographer excerpt: Aborting a fetch request in JavaScript is a common problem. Here's how to handle it correctly. -firstSeen: 2022-05-15T05:00:00-04:00 +dateModified: 2022-05-15T05:00:00-04:00 --- The Fetch API is nowadays the de facto way to send asynchronous requests in JavaScript. This is in part due to the fact that the `fetch()` method accepts a multitude of useful options. One of these is the `signal` option, which can be used to abort a request. To create a valid value for this option, you can use `AbortController.signal` after creating a new instance of `AbortController`. Then, you can use `AbortController.abort()` to cancel the request at any time. diff --git a/blog_posts/js-append-elements-to-array.md b/snippets/js-append-elements-to-array.md similarity index 98% rename from blog_posts/js-append-elements-to-array.md rename to snippets/js-append-elements-to-array.md index d49e32f50..639115948 100644 --- a/blog_posts/js-append-elements-to-array.md +++ b/snippets/js-append-elements-to-array.md @@ -2,11 +2,11 @@ title: Append elements to a JavaScript array shortTitle: Append elements to array type: story -tags: javascript,array +tags: [javascript,array] author: chalarangelo cover: switzerland-night excerpt: Have you ever tried appending elements to an array in JavaScript? Here's a primer on all the available options. -firstSeen: 2022-07-10T05:00:00-04:00 +dateModified: 2022-07-10T05:00:00-04:00 --- Appending a value or values from an array in JavaScript is a pretty common task. While not hard to accomplish, there are a few approaches available, each with their own pros and cons. Choosing the correct one ultimately depends on the use case. diff --git a/blog_posts/js-array-filtering-tips.md b/snippets/js-array-filtering-tips.md similarity index 97% rename from blog_posts/js-array-filtering-tips.md rename to snippets/js-array-filtering-tips.md index 746f55d2e..7a937c2fe 100644 --- a/blog_posts/js-array-filtering-tips.md +++ b/snippets/js-array-filtering-tips.md @@ -2,11 +2,11 @@ title: JavaScript array filtering tips shortTitle: Array filtering tips type: story -tags: javascript,array +tags: [javascript,array] author: chalarangelo cover: violin excerpt: A few tips and tricks to help you filter arrays in JavaScript more efficiently. -firstSeen: 2022-09-28T05:00:00-04:00 +dateModified: 2022-09-28T05:00:00-04:00 --- While `Array.prototype.filter()` is a very convenient method, its performance often leaves something to be desired. This is exaggerated due to the fact that it has become the go-to method for many operations that can be performed using different alternatives. Let's look at a couple of common scenarios and see how we can improve their performance. diff --git a/blog_posts/js-array-map-vs-foreach.md b/snippets/js-array-map-vs-foreach.md similarity index 96% rename from blog_posts/js-array-map-vs-foreach.md rename to snippets/js-array-map-vs-foreach.md index ff49349b1..df3b4d0ee 100644 --- a/blog_posts/js-array-map-vs-foreach.md +++ b/snippets/js-array-map-vs-foreach.md @@ -2,11 +2,11 @@ title: What is the difference between Array.prototype.map() and Array.prototype.forEach()? shortTitle: Array.prototype.map() vs Array.prototype.forEach() type: question -tags: javascript,array +tags: [javascript,array] author: chalarangelo cover: fort-lamp excerpt: Which method do you reach for first? What are the differences between them? Let's find out! -firstSeen: 2023-03-26T05:00:00-04:00 +dateModified: 2023-03-26T05:00:00-04:00 --- `Array.prototype.map()` and `Array.prototype.forEach()` are two of the most commonly used methods in JavaScript. Both of them iterate over an array and perform some action on each element. Yet, they're not the same and they're not interchangeable. diff --git a/blog_posts/js-array-min-max.md b/snippets/js-array-min-max.md similarity index 90% rename from blog_posts/js-array-min-max.md rename to snippets/js-array-min-max.md index 7a1d46185..03af2c2ec 100644 --- a/blog_posts/js-array-min-max.md +++ b/snippets/js-array-min-max.md @@ -2,12 +2,11 @@ title: "Tip: Min and max value in a JavaScript array" shortTitle: Min and max value of an array type: tip -tags: javascript,array,math +tags: [javascript,array,math] author: chalarangelo cover: little-tree 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-11-06T20:51:47+03:00 +dateModified: 2021-11-06T20:51:47+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/snippets/js-array-sorting-shorthand.md similarity index 93% rename from blog_posts/js-array-sorting-shorthand.md rename to snippets/js-array-sorting-shorthand.md index 9267ac75b..3226fc242 100644 --- a/blog_posts/js-array-sorting-shorthand.md +++ b/snippets/js-array-sorting-shorthand.md @@ -2,11 +2,10 @@ title: "Tip: JavaScript array sorting shorthand" shortTitle: Array sorting shorthand type: tip -tags: javascript,array +tags: [javascript,array] cover: apples 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 +dateModified: 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-async-defer.md b/snippets/js-async-defer.md similarity index 97% rename from blog_posts/js-async-defer.md rename to snippets/js-async-defer.md index bde6fbff1..c069b3b71 100644 --- a/blog_posts/js-async-defer.md +++ b/snippets/js-async-defer.md @@ -2,11 +2,11 @@ title: What is the difference between async and defer in script loading? shortTitle: Async and defer type: question -tags: javascript,html +tags: [javascript,html] author: chalarangelo cover: coworking-space excerpt: Understanding how to correctly load your JavaScript files can significantly improve your web application's performance. -firstSeen: 2022-09-04T05:00:00-04:00 +dateModified: 2022-09-04T05:00:00-04:00 --- When it comes to loading JavaScript files, there are a few different options available. Understanding exactly how scripts are loaded and executed is crucial for website performance, as well as for the overall quality of the user experience. Let's take a look at how the `