Update snippet to articles in snippets

Author: Chalarangelo

content/snippets/css/s/fullscreen.md

@@ -4,7 +4,7 @@ shortTitle: Fullscreen element styling
 language: css
 tags: [visual]
 cover: flower-portrait-3
-excerpt: Did you know you can differentiate an element's styles when it's in fullscreen mode? Learn how to do it with this snippet!
+excerpt: Did you know you can differentiate an element's styles when it's in fullscreen mode? Learn how to do it with this code snippet!
 listed: true
 dateModified: 2024-09-08
 ---
@@ -27,4 +27,4 @@ https://codepen.io/chalarangelo/pen/bGXpEoP
 
 > [!NOTE]
 >
-> You can learn more about **requesting fullscreen access** in the [related JavaScript snippet](/js/s/fullscreen). The gist of it is that you can use `Element.requestFullscreen()` to make an element fullscreen and `Document.exitFullscreen()` to exit fullscreen mode.
+> You can learn more about **requesting fullscreen access** in the [related JavaScript article](/js/s/fullscreen). The gist of it is that you can use `Element.requestFullscreen()` to make an element fullscreen and `Document.exitFullscreen()` to exit fullscreen mode.

content/snippets/css/s/toggle-switch.md

@@ -4,7 +4,7 @@ shortTitle: Toggle switch
 language: css
 tags: [visual,interactivity]
 cover: interior-5
-excerpt: A toggle switch is little more than a checkbox with a custom appearance. This snippet shows you how to create one without using JavaScript.
+excerpt: A toggle switch is little more than a checkbox with a custom appearance. This article shows you how to create one without using JavaScript.
 listed: true
 dateModified: 2024-09-04
 ---

content/snippets/git/s/fast-forward-merge.md

@@ -21,4 +21,4 @@ As stated above, Git's default is to use fast-forward merge. It will take the co
 
 GitHub, on the other hand, uses non fast-forward merge by default. It will create a merge commit at the tip of the branch you're merging into, optionally referencing the branch being merged in the commit message. This has the advantage of **keeping track of branches** more explicitly than fast-forward merge. If you want to get the same behavior in a Git terminal, you can use the `--no-ff` flag.
 
-As a side note, you can configure the default Git merge behavior, using `git config`. To learn how to do so, you can take a look at the [relevant snippet](/git/s/disable-fast-forward).
+As a side note, you can configure the default Git merge behavior, using `git config`. To learn how to do so, you can take a look at the [relevant article](/git/s/disable-fast-forward).

content/snippets/git/s/set-or-amend-commit-author.md

@@ -48,4 +48,4 @@ Changing the author of a commit will also change its **SHA-1 checksum**. If you'
 
 Additionally, if your remote repository is configured to only accept **signed commits**, you might be unable to sign the commit unless you have the original author's GPG key.
 
-Finally, you can't use `--author` to add **multiple authors** to a commit. If you want to do so, you can find more information in [the relevant snippet](/git/s/github-co-authors).
+Finally, you can't use `--author` to add **multiple authors** to a commit. If you want to do so, you can find more information in [the relevant article](/git/s/github-co-authors).

content/snippets/js/s/add-remove-event-listener-multiple-elements.md

@@ -13,7 +13,7 @@ Adding or removing the **same event listener** from **multiple elements** can ge
 
 > [!NOTE]
 >
-> If you're looking to add or remove the **same handler for multiple event listeners** to a **single element**, take a look at the snippet on [adding multiple listeners to a single element](/js/s/add-remove-multiple-event-listeners-single-element).
+> If you're looking to add or remove the **same handler for multiple event listeners** to a **single element**, take a look at the article on [adding multiple listeners to a single element](/js/s/add-remove-multiple-event-listeners-single-element).
 
 ## Add event listener to multiple elements
 

content/snippets/js/s/add-remove-multiple-event-listeners-single-element.md

@@ -13,7 +13,7 @@ Have you ever wanted to listen for **multiple event types** on a **single elemen
 
 > [!NOTE]
 >
-> If you're looking to add or remove the **same handler for a single event** to **multiple elements**, take a look at the snippet on [adding or removing event listeners from multiple elements](/js/s/add-remove-event-listener-multiple-elements).
+> If you're looking to add or remove the **same handler for a single event** to **multiple elements**, take a look at the article on [adding or removing event listeners from multiple elements](/js/s/add-remove-event-listener-multiple-elements).
 
 ## Add multiple event listeners to an element
 

content/snippets/js/s/array-comparison.md

@@ -66,7 +66,7 @@ equals([str], [strObj]); // false
 equals([null], [undefined]); // false
 ```
 
-This approach safeguards against the serialization issue described above. However it does not take into account nested arrays or objects, which need to be checked recursively. For a robust solution that handles this and other issues, you should use the [equals snippet](/js/s/equals).
+This approach safeguards against the serialization issue described above. However it does not take into account nested arrays or objects, which need to be checked recursively. For a robust solution that handles this and other issues, you should check the [relevant article](/js/s/object-comparison).
 
 ## Comparing out of order
 
@@ -85,4 +85,4 @@ const equalsIgnoreOrder = (a, b) => {
 }
 ```
 
-For a more detailed explanation, you should check out the [haveSameContents snippet](/js/s/have-same-contents).
+For a more detailed explanation, you should check out the [relevant article](/js/s/arrays-have-same-contents).

content/snippets/js/s/array-includes-any-or-all-values.md

@@ -35,4 +35,4 @@ includesAll([1, 2, 3, 4], [1, 5]); // false
 
 > [!TIP]
 >
-> These snippets might perform poorly for rather large arrays. If you're working with large arrays, you might want to consider using a `Set` for improved performance.
+> These code snippets might perform poorly for rather large arrays. If you're working with large arrays, you might want to consider using a `Set` for improved performance.

content/snippets/js/s/array-set-operations.md

@@ -9,11 +9,11 @@ listed: true
 dateModified: 2024-01-01
 ---
 
-Mathematical **set operations** can be easily applied to JavaScript `Set` objects and arrays. This collection of snippets will introduce you to the most common set operations, such as union, intersection and difference.
+Mathematical **set operations** can be easily applied to JavaScript `Set` objects and arrays. This collection of articles will introduce you to the most common set operations, such as union, intersection and difference.
 
 > [!NOTE]
 >
-> At the time of writing, native support for this operation is coming to the `Set` object, yet it's still in the early stages. Make sure to check environment compatibility if you're planning to use the native methods.
+> At the time of writing, **native support** for this operation is coming to the `Set` object, yet it's still in the early stages. Make sure to check environment compatibility if you're planning to use the native methods.
 
 ## Union
 

content/snippets/js/s/bottom-visible.md

@@ -4,7 +4,7 @@ description: Check if bottom of page is visible
 language: javascript
 tags: [browser]
 cover: hiking-walking
-excerpt: If you've ever needed to check if the bottom of the page is visible, this snippet will help you do just that.
+excerpt: If you've ever needed to check if the bottom of the page is visible, this article will help you do just that.
 listed: true
 dateModified: 2024-06-01
 ---

content/snippets/js/s/complete-guide-to-js-type-checking.md

@@ -246,7 +246,7 @@ getType(new Set([1, 2, 3])); // 'Set'
 
 #### Check if value is of type
 
-Flipping the previous snippet around, we can also check if a value is of a specific type. Same as before, special care needs to be taken for `undefined` and `null`, as the do not have a `constructor` property.
+Flipping the previous code snippet around, we can also check if a value is of a specific type. Same as before, special care needs to be taken for `undefined` and `null`, as the do not have a `constructor` property.
 
 ```js
 const isOfType = (type, val) =>

content/snippets/js/s/complex-object-collections-in-memory.md

@@ -207,7 +207,7 @@ Ok, that last bit was somewhat confusing. Let me explain. If we define a `static
 
 > [!TIP]
 >
-> Confused? Don't worry, the `this` keyword is a tricky thing to master. I suggest reading [this article](/snippets/js/this) to get a better understanding of it.
+> Confused? Don't worry, the `this` keyword is a tricky thing to master. I suggest reading [this article](/js/s/this) to get a better understanding of it.
 
 ### Querying all records
 

content/snippets/js/s/create-html-elements.md

@@ -55,4 +55,4 @@ createElement(
 );
 ```
 
-That's pretty useful, but what happens if we have an HTML string we want to create an element from, instead? We have a [createElement snippet](/js/s/create-element) that does something along those lines. The only part that's missing is appending it to the parent element.
+That's pretty useful, but what happens if we have an HTML string we want to create an element from, instead? This [article on how to create and HTML element with JavaScript](/js/s/create-element) does something along those lines. The only part that's missing is appending it to the parent element.

content/snippets/js/s/date-difference.md

@@ -101,7 +101,7 @@ dateDifferenceInWeekdays(
 
 > [!WARNING]
 >
-> The above snippet may be ill-suited for real-life scenarios, as it **doesn't take official holidays into account**. It's recommended to tweak the weekday check to include a list of known holidays, too, if you plan on using it in production.
+> The above code snippet may be ill-suited for real-life scenarios, as it **doesn't take official holidays into account**. It's recommended to tweak the weekday check to include a list of known holidays, too, if you plan on using it in production.
 
 ## Date difference in weeks
 

content/snippets/js/s/date-range-generator.md

@@ -13,7 +13,7 @@ Generating a range of `Date` values is very common when working with any type of
 
 > [!NOTE]
 >
-> If you're **not familiar with generator functions**, be sure to read the [range generator snippet](/js/s/range-generator) first.
+> If you're **not familiar with generator functions**, be sure to read the [range generator article](/js/s/range-generator) first.
 
 As mentioned in [a previous post](/js/s/date-yesterday-today-tomorrow), we can manipulate `Date` objects using `Date.prototype.getDate()` and `Date.prototype.setDate()`. This allows us to easily **increment or decrement dates**.
 

content/snippets/js/s/distance-of-two-lat-lng-coordinates.md

@@ -17,7 +17,7 @@ Luckily, the complicated math for it has already been done for us. We can simply
 >
 > If you're unfamiliar with JavaScript's [numeric separators](/js/s/numeric-separator), used in the code below, they're just **syntactic sugar** to make large numeric values more readable.
 
-For the formula to work, we'll first have to **convert our coordinates to radians**. This is a matter of simply using `Math.PI` and multiplying by the latitude and longitude values, then dividing by `180` (essentially the [`toRadians` snippet](/js/s/convert-degrees-radians)). We'll also need to find the **differences in latitude and longitude between the two points**. Then, we can apply the Haversine formula to calculate the distance.
+For the formula to work, we'll first have to **convert our coordinates to radians**. This is a matter of simply using `Math.PI` and multiplying by the latitude and longitude values, then dividing by `180` (essentially the [`toRadians` code snippet](/js/s/convert-degrees-radians)). We'll also need to find the **differences in latitude and longitude between the two points**. Then, we can apply the Haversine formula to calculate the distance.
 
 ```js
 const coordinateDistance = (lat1, lon1, lat2, lon2) => {

content/snippets/js/s/first-last-date-of-month.md

@@ -24,7 +24,7 @@ firstDateOfMonth(new Date('2015-08-11')); // '2015-08-01'
 
 ## Get the last date of a month
 
-In order to get the last date of a month, we can use a clever trick on top of the previous snippet. Instead of setting the day to `1`, we can set it to `0`. This will give us the **last day of the previous month**. In order for this to work, we'll need to **advance the month** by `1` as well.
+In order to get the last date of a month, we can use a clever trick on top of the previous code snippet. Instead of setting the day to `1`, we can set it to `0`. This will give us the **last day of the previous month**. In order for this to work, we'll need to **advance the month** by `1` as well.
 
 ```js
 const lastDateOfMonth = (date = new Date()) =>

content/snippets/js/s/form-to-object.md

@@ -26,7 +26,7 @@ formToObject(document.querySelector('#form'));
 
 ## Serialize form data to a query string
 
-If, instead of an object, you need to **serialize the data** from a form into a query string, you need to make a few adjustments to the previous snippet.
+If, instead of an object, you need to **serialize the data** from a form into a query string, you need to make a few adjustments to the previous code snippet.
 
 After creating a `FormData` object, you can use `Array.from()` to create an **array of the entries**. Using the second argument of the function, you can specify how each entry should be mapped. In this case, we want to map each entry to a string, where the key and value are joined by an `=` sign and apply `encodeURIComponent()` to each part.
 

content/snippets/js/s/generator-to-array.md

@@ -11,7 +11,7 @@ dateModified: 2024-08-01
 
 When working with `Set` and `Map` objects, I came across an implementation detail that got a little annoying a little too fast. The `entries()` method of these objects returns a **generator object**, which is not directly usable as an array. But, more often than not, I needed the output as an array. Let's see how we can deal with this.
 
-As mentioned in [the range generator snippet](/js/s/range-generator), generators are [`Iterator` objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator) under the hood. This means that we can use the spread operator (`...`) to convert the output of a generator function to an array.
+As mentioned in [the range generator article](/js/s/range-generator), generators are [`Iterator` objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator) under the hood. This means that we can use the spread operator (`...`) to convert the output of a generator function to an array.
 
 This means we can convert the output of any generator function to an array by **simply spreading** it. Here's a simple function that does just that:
 

content/snippets/js/s/get-base-url-or-url-params.md

@@ -45,4 +45,4 @@ getURLParameters('google.com');
 
 > [!TIP]
 >
-> If you want to learn how to **edit URL parameters** in JavaScript, check out the snippet on [editing URL parameters](/js/s/edit-url-params).
+> If you want to learn how to **edit URL parameters** in JavaScript, check out the article on [editing URL parameters](/js/s/edit-url-params).

content/snippets/js/s/get-selected-text.md

@@ -21,4 +21,4 @@ getSelectedText(); // 'Lorem ipsum'
 
 > [!NOTE]
 >
-> A more **advanced use case** of this functionality can be found in [the copy text to clipboard snippet](/js/s/copy-text-to-clipboard#using-document-exec-command-copy), used to select and copy text to the clipboard.
+> A more **advanced use case** of this functionality can be found in [the copy text to clipboard article](/js/s/copy-text-to-clipboard#using-document-exec-command-copy), used to select and copy text to the clipboard.

content/snippets/js/s/is-absolute-url.md

@@ -4,7 +4,7 @@ shortTitle: Absolute URL check
 language: javascript
 tags: [string,browser,regexp]
 cover: coffee-phone-tray-2
-excerpt: Want to know if a string is an absolute URL? This snippet will help you out.
+excerpt: Want to know if a string is an absolute URL? This article will help you out.
 listed: true
 dateModified: 2024-07-09
 ---

content/snippets/js/s/iterable-to-array.md

@@ -45,4 +45,4 @@ const nodes = document.childNodes;
 const nodeArray = [...nodes]; // [ <!DOCTYPE html>, html ]
 ```
 
-Note that the above example is the basis for the [nodeListToArray snippet](/js/s/node-list-to-array).
+Note that the above example is the basis for the [`NodeList` to array article](/js/s/node-list-to-array).

content/snippets/js/s/nodejs-static-file-server.md

@@ -38,7 +38,7 @@ In theory, one could stop here and have a very basic static file server. However
 
 First and foremost, we don't necessarily want to serve files from the same directory as our Node.js server. To address this problem, we would have to change the directory `fs.readFile()` looks for the file in. To accomplish this, we can specify a directory to serve files from and use the `path` module to resolve files from that directory. This way, we can also better handle different operating systems and environments.
 
-Here's a short snippet on how to resolve a file path using the `path` module:
+Here's a short code snippet on how to resolve a file path using the `path` module:
 
 ```js
 import { readFile } from 'fs';

content/snippets/js/s/record-animation-frames.md

@@ -4,7 +4,7 @@ shortTitle: Record animation frames
 language: javascript
 tags: [browser,recursion]
 cover: mac-and-coffee
-excerpt: Ever wanted to run a function on each animation frame? This snippet shows you how to do it using `Window.requestAnimationFrame()`.
+excerpt: Ever wanted to run a function on each animation frame? This article shows you how to do it using `Window.requestAnimationFrame()`.
 listed: true
 dateModified: 2024-07-21
 ---

content/snippets/js/s/remove-element-from-array.md

@@ -39,5 +39,5 @@ Most of the time, `Array.prototype.filter()` is the best option for removing ele
 
 ## Alternative options
 
-The previous two options should cover the vast majority of use cases. Yet, there are some other options available for removing elements from an array, which might be preferable in certain cases. For example, if you like the interface of `Array.prototype.splice()` but need immutability, [this array element removal snippet](/js/s/remove-elements-from-array) might be the solution for you. Similarly, when working with large unsorted arrays, there's a [fast removal trick](/js/s/fast-remove-array-element) that might be of interest to you.
+The previous two options should cover the vast majority of use cases. Yet, there are some other options available for removing elements from an array, which might be preferable in certain cases. For example, if you like the interface of `Array.prototype.splice()` but need immutability, [this array element removal article](/js/s/remove-elements-from-array) might be the solution for you. Similarly, when working with large unsorted arrays, there's a [fast removal trick](/js/s/fast-remove-array-element) that might be of interest to you.
 

content/snippets/js/s/replace-all-occurences-of-string.md

@@ -25,7 +25,7 @@ Using `String.prototype.replaceAll()` is the recommended approach, as it's strai
 
 Before the introduction of `String.prototype.replaceAll()`, `String.prototype.replace()` was the method of choice for this sort of task. It's supported by all JavaScript engines, old and new and is very similar to `String.prototype.replaceAll()`.
 
-While this method doesn't replace all occurrences of a string, it supports regular expressions. Knowing the string to be replaced, a regular expression can be created with the global (`'g'`) flag. Then, it can be passed to `String.prototype.replace()` to replace all occurrences of the string. The only issue here is that special characters need to be escaped, so that they are matched correctly. The [escapeRegExp snippet](/js/s/escape-reg-exp) comes in handy for this task.
+While this method doesn't replace all occurrences of a string, it supports regular expressions. Knowing the string to be replaced, a regular expression can be created with the global (`'g'`) flag. Then, it can be passed to `String.prototype.replace()` to replace all occurrences of the string. The only issue here is that special characters need to be escaped, so that they are matched correctly. The [`escapeRegExp` code snippet](/js/s/escape-reg-exp) comes in handy for this task.
 
 ```js
 const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

content/snippets/js/s/superset-subset-of-array.md

@@ -32,4 +32,4 @@ subset(new Set([1, 5]), new Set([1, 2, 3, 4])); // false
 
 > [!NOTE]
 >
-> Future versions of ECMAScript may include a `Set.prototype.isSupersetOf()` and `Set.prototype.isSubsetOf()`, which will make this snippet obsolete.
+> Future versions of ECMAScript may include a `Set.prototype.isSupersetOf()` and `Set.prototype.isSubsetOf()`, which will make this code snippet obsolete.

content/snippets/react/s/use-timeout.md

@@ -13,7 +13,7 @@ Have you ever wanted to use `setTimeout()` in a declarative manner in React but
 
 > [!NOTE]
 >
-> It's highly suggested that you start by reading [how to implement a `useInterval` hook](/snippets/react/s/use-interval), as this implementation is very similar.
+> It's highly suggested that you start by reading [how to implement a `useInterval` hook](/react/s/use-interval), as this implementation is very similar.
 
 In order to create a custom hook for `setTimeout()`, you'll first need to use `useRef()` to create a `ref` for the **callback function**. You'll then use `useEffect()` to remember the latest callback and set up the timeout, as well as clean up when the component unmounts.