Rename articles prefixed with javascript-

collections/js/array-methods.yaml

@@ -4,12 +4,12 @@ featured: true
 snippetIds:
   - articles/s/js-array-map-vs-foreach
   - articles/s/4-javascript-array-methods
-  - articles/s/javascript-array-comparison
-  - articles/s/javascript-index-for-of-loop
-  - articles/s/javascript-for-loop-early-break
+  - js/s/array-comparison
+  - js/s/index-for-of-loop
+  - js/s/for-loop-early-break
   - articles/s/js-array-initialization
   - articles/s/code-anatomy-chaining-reduce-for-loop
-  - articles/s/javascript-async-array-loops
+  - js/s/async-array-loops
   - articles/s/js-typecheck-array
 splash: laptop-lamp.png
 description: >-

collections/js/arrow-functions.yaml

@@ -2,10 +2,10 @@ slug: js/arrow-functions
 name: JavaScript Arrow Functions
 featured: true
 snippetIds:
-  - articles/s/javascript-arrow-functions
-  - articles/s/javascript-arrow-regular-function-differences
-  - articles/s/javascript-arrow-function-event-listeners
-  - articles/s/javascript-this
+  - js/s/arrow-functions
+  - js/s/arrow-regular-function-differences
+  - js/s/arrow-function-event-listeners
+  - js/s/this
 splash: coffee-float.png
 description: >-
   Arrow functions are one of the most useful tools in a JavaScript developer's

collections/js/comparison.yaml

@@ -2,12 +2,12 @@ slug: js/comparison
 name: JavaScript Comparison
 featured: true
 snippetIds:
-  - articles/s/javascript-equality
-  - articles/s/javascript-value-not-equal-to-itself
-  - articles/s/javascript-object-comparison
-  - articles/s/javascript-array-comparison
-  - articles/s/javascript-date-comparison
-  - articles/s/javascript-object-is-triple-equals
+  - js/s/equality
+  - js/s/value-not-equal-to-itself
+  - js/s/object-comparison
+  - js/s/array-comparison
+  - js/s/date-comparison
+  - js/s/object-is-triple-equals
   - js/s/equals
   - js/s/matches
   - js/s/matches-with

collections/js/dom-querying.yaml

@@ -9,14 +9,14 @@ snippetIds:
   - js/s/element-contains
   - js/s/find-closest-anchor
   - js/s/get-images
-  - articles/s/javascript-query-selector-shorthand
+  - js/s/query-selector-shorthand
   - js/s/element-is-visible-in-viewport
   - articles/s/select-focused-dom-element
   - js/s/get-elements-bigger-than-viewport
   - articles/s/js-element-from-point
   - js/s/element-is-focused
   - js/s/get-vertical-offset
-  - articles/s/javascript-store-dom-items
+  - js/s/store-dom-items
 splash: laptop-plants-1.png
 description: >-
   Querying the DOM is an essential skill every web developer should have. Learn

collections/js/event-handling.yaml

@@ -6,14 +6,14 @@ snippetIds:
   - js/s/off
   - js/s/listen-once
   - js/s/on-click-outside
-  - articles/s/javascript-event-bubbling-capturing-delegation
+  - js/s/event-bubbling-capturing-delegation
   - js/s/add-event-listener-all
   - js/s/remove-event-listener-all
   - js/s/add-multiple-events
-  - articles/s/javascript-execute-event-handler-once
+  - js/s/execute-event-handler-once
   - articles/s/passive-scroll-listener-performance
   - js/s/on-scroll-stop
-  - articles/s/javascript-arrow-function-event-listeners
+  - js/s/arrow-function-event-listeners
   - articles/s/detect-caps-lock-is-on
   - js/s/trigger-event
   - js/s/on-user-input-change

collections/js/generators.yaml

@@ -2,7 +2,7 @@ slug: js/generators
 name: JavaScript Generator Functions
 featured: true
 snippetIds:
-  - articles/s/javascript-generator-for-range
+  - js/s/generator-for-range
   - js/s/range-generator
   - js/s/repeat-generator
   - js/s/cycle-generator
@@ -16,9 +16,9 @@ snippetIds:
   - js/s/generate-until
   - js/s/left-substr-generator
   - js/s/right-substr-generator
-  - articles/s/javascript-make-iterable
-  - articles/s/javascript-enum
-  - articles/s/javascript-object-array-proxy
+  - js/s/make-iterable
+  - js/s/enum
+  - js/s/object-array-proxy
 splash: generator.png
 description: >-
   JavaScript generator functions introduce a way to define an iterative

collections/js/interviews.yaml

@@ -4,38 +4,38 @@ miniName: Interview Questions
 featured: true
 parent: js
 snippetIds:
-  - articles/s/javascript-equality
-  - articles/s/javascript-truthy-falsy-values
-  - articles/s/javascript-expression-statement
-  - articles/s/javascript-undeclared-undefined-null
-  - articles/s/javascript-variable-hoisting
-  - articles/s/javascript-variable-scope
+  - js/s/equality
+  - js/s/truthy-falsy-values
+  - js/s/expression-statement
+  - js/s/undeclared-undefined-null
+  - js/s/variable-hoisting
+  - js/s/variable-scope
   - articles/s/js-callbacks
-  - articles/s/javascript-pass-by-reference-or-pass-by-value
-  - articles/s/javascript-promises
-  - articles/s/javascript-sync-async
-  - articles/s/javascript-classical-vs-prototypal-inheritance
-  - articles/s/javascript-this
-  - articles/s/javascript-shallow-deep-clone
-  - articles/s/javascript-copy-array
-  - articles/s/javascript-object-comparison
-  - articles/s/javascript-array-comparison
-  - articles/s/javascript-array-includes-value
+  - js/s/pass-by-reference-or-pass-by-value
+  - js/s/promises
+  - js/s/sync-async
+  - js/s/classical-vs-prototypal-inheritance
+  - js/s/this
+  - js/s/shallow-deep-clone
+  - js/s/copy-array
+  - js/s/object-comparison
+  - js/s/array-comparison
+  - js/s/array-includes-value
   - articles/s/js-array-map-vs-foreach
-  - articles/s/javascript-event-bubbling-capturing-delegation
-  - articles/s/javascript-value-not-equal-to-itself
-  - articles/s/javascript-blank-value
-  - articles/s/javascript-string-immutability
+  - js/s/event-bubbling-capturing-delegation
+  - js/s/value-not-equal-to-itself
+  - js/s/blank-value
+  - js/s/string-immutability
   - articles/s/js-static-instance-methods
-  - articles/s/javascript-arrow-functions
-  - articles/s/javascript-pure-functions
-  - articles/s/javascript-recursion
-  - articles/s/javascript-use-strict
+  - js/s/arrow-functions
+  - js/s/pure-functions
+  - js/s/recursion
+  - js/s/use-strict
   - articles/s/js-async-defer
-  - articles/s/javascript-closures
-  - articles/s/javascript-iife
-  - articles/s/javascript-event-loop-explained
-  - articles/s/javascript-prefix-postfix-operators
+  - js/s/closures
+  - js/s/iife
+  - js/s/event-loop-explained
+  - js/s/prefix-postfix-operators
   - articles/s/cors-explained
 splash: interview.png
 description: >-

collections/js/object-cloning.yaml

@@ -2,10 +2,10 @@ slug: js/object-cloning
 name: JavaScript Object Cloning
 featured: true
 snippetIds:
-  - articles/s/javascript-shallow-deep-clone
+  - js/s/shallow-deep-clone
   - js/s/shallow-clone
   - js/s/deep-clone
-  - articles/s/javascript-copy-array
+  - js/s/copy-array
 splash: coffee-phone-tray.png
 description: >-
   JavaScript objects and arrays are a little tricky to clone. Luckily, this

collections/js/performance.yaml

@@ -2,14 +2,14 @@ slug: js/performance
 name: JavaScript Performance Optimization
 featured: true
 snippetIds:
-  - articles/s/javascript-store-dom-items
+  - js/s/store-dom-items
   - articles/s/passive-scroll-listener-performance
   - articles/s/js-textcontent-or-innertext
-  - articles/s/javascript-memoization
+  - js/s/memoization
   - articles/s/js-array-filtering-tips
   - articles/s/js-fast-remove-array-element
   - articles/s/code-anatomy-optimizing-recursion
-  - articles/s/javascript-switch-object
+  - js/s/switch-object
   - articles/s/js-dynamic-properties-are-slow
   - articles/s/big-o-cheatsheet
 splash: do-more-computer.png

collections/js/promises.yaml

@@ -2,12 +2,12 @@ slug: js/promises
 name: JavaScript Promises
 featured: true
 snippetIds:
-  - articles/s/javascript-promises
+  - js/s/promises
   - articles/s/async-javascript-cheatsheet
-  - articles/s/javascript-sync-async
-  - articles/s/javascript-promise-then-catch
-  - articles/s/javascript-promise-then-finally
-  - articles/s/javascript-await-timeout
+  - js/s/sync-async
+  - js/s/promise-then-catch
+  - js/s/promise-then-finally
+  - js/s/await-timeout
   - js/s/debounce-promise
   - js/s/run-promises-in-series
 splash: blue-computer.png

collections/js/proxy.yaml

@@ -5,9 +5,9 @@ snippetIds:
   - articles/s/js-proxy-introduction
   - articles/s/js-dynamic-getter-setter-proxy
   - articles/s/js-immutable-object-proxy
-  - articles/s/javascript-singleton-proxy
+  - js/s/singleton-proxy
   - articles/s/js-dynamic-getter-chain-proxy
-  - articles/s/javascript-object-array-proxy
+  - js/s/object-array-proxy
   - articles/s/js-proxy-array-negative-index
   - articles/s/js-cannot-extend-proxy-object
   - articles/s/js-typecheck-proxy

collections/js/url.yaml

@@ -2,10 +2,10 @@ slug: js/url
 name: URLs in JavaScript
 featured: true
 snippetIds:
-  - articles/s/javascript-modify-url-without-reload
+  - js/s/modify-url-without-reload
   - articles/s/js-construct-url
   - articles/s/js-edit-url-params
-  - articles/s/javascript-reload-page
+  - js/s/reload-page
   - articles/s/js-window-location-cheatsheet
   - js/s/current-url
   - js/s/https-redirect

snippets/articles/s/code-anatomy-optimizing-recursion.md

@@ -54,7 +54,7 @@ As you can see, for each value of `n`, `fibonacciNumber` will be called twice, o
 
 ### Calculation memoization
 
-The solution to this problem, and the first trick that you can use to speed up recursive functions, is to use memoization. We already published [a great blog post on memoization](/articles/s/javascript-memoization/) a little while back, so be sure to check it out to learn more about the subject. Here's our `fibonacciNumber` function, using memoization:
+The solution to this problem, and the first trick that you can use to speed up recursive functions, is to use memoization. We already published [a great blog post on memoization](/js/s/memoization/) a little while back, so be sure to check it out to learn more about the subject. Here's our `fibonacciNumber` function, using memoization:
 
 ```js
 const fibonacciCache = new Map();

snippets/articles/s/js-array-map-vs-foreach.md

@@ -28,4 +28,4 @@ const doubledNumbers = numbers.map(num => num * 2);
 
 The way I like to distinguish them is by remembering that `Array.prototype.map()` represents a **transformation**, whereas `Array.prototype.forEach()` represents an **iteration**. Hopefully, one of these explanations will click for you and help you remember the difference between the two.
 
-As a closing note, I would like to remind you that the humble `for` loop can be more efficient in some cases, such as [breaking out of a loop early](/articles/s/javascript-for-loop-early-break). Always pick the right tool for the job, as ES6 has a method for almost every use case.
+As a closing note, I would like to remind you that the humble `for` loop can be more efficient in some cases, such as [breaking out of a loop early](/js/s/for-loop-early-break). Always pick the right tool for the job, as ES6 has a method for almost every use case.

snippets/articles/s/js-double-negation-operator.md

@@ -20,7 +20,7 @@ const y = null;
 !!y; // false
 ```
 
-Using the double negation operator is functionally equivalent to using the `Boolean()` function, which we explored in depth in a [previous article](/articles/s/javascript-boolean-function). In terms of readability and usability, I would still suggest using the `Boolean()` function. It conveys the intent of the operation more clearly, and it's easier to understand at a glance.
+Using the double negation operator is functionally equivalent to using the `Boolean()` function, which we explored in depth in a [previous article](/js/s/boolean-function). In terms of readability and usability, I would still suggest using the `Boolean()` function. It conveys the intent of the operation more clearly, and it's easier to understand at a glance.
 
 ```js
 const x = 1;

snippets/articles/s/js-immutable-object-proxy.md

@@ -10,7 +10,7 @@ excerpt: Freezing objects is not the only way to prevent mutations. Learn how yo
 dateModified: 2022-04-10T05:00:00-04:00
 ---
 
-Object mutability and its relation to the `const` keyword is a very common headache for developers. More often than not, when looking for ways to make an object immutable, `Object.freeze()` will pop up as a solution. We’ve explored this approach previously, elaborating on deep freezing solutions. You can read more about it in [this article](/articles/s/javascript-deep-freeze-object).
+Object mutability and its relation to the `const` keyword is a very common headache for developers. More often than not, when looking for ways to make an object immutable, `Object.freeze()` will pop up as a solution. We’ve explored this approach previously, elaborating on deep freezing solutions. You can read more about it in [this article](/js/s/deep-freeze-object).
 
 While `Object.freeze()` is the more straightforward approach, it might not always be the best solution. This may be especially true when dealing with extensive object nesting or when objects have a very short life. For such cases, a different approach using the [Proxy object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) might make more sense. Here’s what that looks like:
 

snippets/articles/s/js-object-freeze-vs-seal.md

@@ -33,4 +33,4 @@ If you want to prevent new properties from being added and existing properties f
 | `Object.freeze()` | No | Yes | No | No |
 | `Object.seal()` | No | Yes | Yes | No |
 
-As a closing note, remember that both methods perform a shallow freeze/seal on the object. This means that nested objects and arrays are not frozen or sealed and can be mutated. To prevent this, you can deep freeze objects, as described in [this related article](/articles/s/javascript-deep-freeze-object).
+As a closing note, remember that both methods perform a shallow freeze/seal on the object. This means that nested objects and arrays are not frozen or sealed and can be mutated. To prevent this, you can deep freeze objects, as described in [this related article](/js/s/deep-freeze-object).

snippets/articles/s/js-timeout-interval-delay.md

@@ -14,7 +14,7 @@ JavaScript provides two widely used timing functions, `setTimeout()` and `setInt
 
 ### Delays are not exact
 
-I went into detail about how JavaScript engines execute code in [the Event Loop explanation](/articles/s/javascript-event-loop-explained), but let me recap here. As JavaScript is single-threaded, tasks are queued to be executed in a loop. Thus, `setTimeout()` and `setInterval()` are tasks that will be executed after at least the given amount of time has elapsed. There is no guarantee, however, that the task will be executed exactly after the given amount of time has elapsed. The delay is a suggestion, signifying the **minimum amount of time** that must pass before the task is executed. The actual delay can be longer, depending on the current state of the JavaScript engine.
+I went into detail about how JavaScript engines execute code in [the Event Loop explanation](/js/s/event-loop-explained), but let me recap here. As JavaScript is single-threaded, tasks are queued to be executed in a loop. Thus, `setTimeout()` and `setInterval()` are tasks that will be executed after at least the given amount of time has elapsed. There is no guarantee, however, that the task will be executed exactly after the given amount of time has elapsed. The delay is a suggestion, signifying the **minimum amount of time** that must pass before the task is executed. The actual delay can be longer, depending on the current state of the JavaScript engine.
 
 ### Browser factors
 

snippets/articles/s/react-use-effect-primitive-dependencies.md

@@ -12,7 +12,7 @@ dateModified: 2022-06-12T05:00:00-04:00
 
 Conditionally firing an effect is a pretty common requirement when working with React. In most cases, this is as simple as passing a dependency array to `useEffect()`. Turns out that, in some cases, this can cause unnecessary performance degradation.
 
-Such issues arise when entire objects are passed as dependencies when you only need a primitive value. Due to the nature of objects, [being pass-by-reference](/articles/s/javascript-pass-by-reference-or-pass-by-value), comparing the dependencies will always trigger a re-run. This ends up causing effects to run unnecessarily.
+Such issues arise when entire objects are passed as dependencies when you only need a primitive value. Due to the nature of objects, [being pass-by-reference](/js/s/pass-by-reference-or-pass-by-value), comparing the dependencies will always trigger a re-run. This ends up causing effects to run unnecessarily.
 
 ```jsx
 const CartItem = ({ item }) => {

snippets/js/s/array-includes-value.md

@@ -24,7 +24,7 @@ array.includes(3, 3); // false
 
 ### Objects
 
-Unlike primitive values, you can't use `Array.prototype.includes()` to check if an array includes an object. This comes down to how JavaScript compares values and the fact that [objects are reference types](/articles/s/javascript-pass-by-reference-or-pass-by-value). I highly recommend reading the previous article about [object comparison](/articles/s/javascript-object-comparison), as I won't be going into detail on how to compare objects here.
+Unlike primitive values, you can't use `Array.prototype.includes()` to check if an array includes an object. This comes down to how JavaScript compares values and the fact that [objects are reference types](/js/s/pass-by-reference-or-pass-by-value). I highly recommend reading the previous article about [object comparison](/js/s/object-comparison), as I won't be going into detail on how to compare objects here.
 
 Due to this difference between primitive values and objects, you can't use `Array.prototype.includes()` to check if an array includes an object. However, provided you implement a [deep equality function](/js/s/equals), you can use `Array.prototype.some()` to check if any object matches the shape of another object.
 

snippets/js/s/evil-closures.md

@@ -12,7 +12,7 @@ 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.
 
-I strongly recommend you read the [previous article on closures](/articles/s/javascript-closures) if you haven't already. Instead of rehashing the same information, I would like to discuss the dangers of using closures and present my view on the topic.
+I strongly recommend you read the [previous article on closures](/js/s/closures) if you haven't already. Instead of rehashing the same information, I would like to discuss the dangers of using closures and present my view on the topic.
 
 ### Hidden state
 

snippets/js/s/index-for-of-loop.md

@@ -23,4 +23,4 @@ for (let [index, item] of items.entries()) {
 
 Moreover, you can use the spread operator (`...`) to convert a string into an array and then use `Array.prototype.entries()` the same way. Finally, both `Map` and `Set` prototypes provide a similar method (`Map.prototype.entries()` and `Set.prototype.entries()` respectively), which can be used the exact same way.
 
-_If you're not familiar with `for...of` and its syntax, I highly recommending you take a look at [this article about the various iteration methods in JavaScript](/articles/s/javascript-for-in-for-of-foreach)._
+_If you're not familiar with `for...of` and its syntax, I highly recommending you take a look at [this article about the various iteration methods in JavaScript](/js/s/for-in-for-of-foreach)._