Content updates (#2053)

.vscode/settings.json

@@ -25,7 +25,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[markdown]": {
-    "editor.wordWrapColumn": 100,
+    "editor.wordWrapColumn": 80,
     "editor.wordWrap": "wordWrapColumn"
   },
   "workbench.editor.labelFormat": "short",

content/snippets/articles/s/bash-alias-dollar-sign.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: A bash alias for copying commands from the web"
+title: A bash alias for copying commands from the web
 shortTitle: Bash alias for copying from the web
 type: tip
 language: git

content/snippets/css/s/clamp.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Use clamp() in CSS for responsive typography"
+title: Use clamp() in CSS for responsive typography
 shortTitle: CSS clamp()
 type: tip
 language: css

content/snippets/css/s/easing-variables.md

@@ -1,6 +1,5 @@
 ---
-title: "Tip: CSS easing variables"
-shortTitle: CSS easing variables
+title: CSS easing variables
 type: tip
 language: css
 tags: [animation]

content/snippets/css/s/nested-border-radius.md

@@ -1,6 +1,5 @@
 ---
-title: "Tip: Perfect nested border radius in CSS"
-shortTitle: Perfect nested border radius in CSS
+title: Perfect nested border radius in CSS
 type: tip
 language: css
 tags: [visual]

content/snippets/css/s/perfect-transition-duration.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: The perfect duration for CSS transitions"
+title: The perfect duration for CSS transitions
 shortTitle: CSS transition duration
 type: tip
 language: css

content/snippets/css/s/select-any-link.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Select any link with CSS"
+title: Select any link with CSS
 shortTitle: "CSS :any-link pseudo-class"
 type: tip
 language: css

content/snippets/css/s/style-default-links.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Style links without a class"
+title: Style links without a class
 shortTitle: Style default links
 type: tip
 language: css

content/snippets/git/s/automatic-push-upstream.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Automate Git upstream branch creation"
+title: Automate Git upstream branch creation
 shortTitle: Automate upstream branch creation
 type: tip
 language: git

content/snippets/git/s/branches-containing-commit.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Find branches containing a specific Git commit"
+title: Find branches containing a specific Git commit
 shortTitle: Find branches containing commit
 type: tip
 language: git

content/snippets/git/s/commit-different-date.md

@@ -1,6 +1,5 @@
 ---
-title: "Tip: Create a commit with a different date"
-shortTitle: Create a commit with a different date
+title: Create a commit with a different date
 type: tip
 language: git
 tags: [commit]

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

@@ -6,7 +6,7 @@ language: git
 tags: [branch]
 author: chalarangelo
 cover: boats
-excerpt: Learn about Git's fast-forward mode works and its benefits when mergin branches, so you can decide if it's a good fit for you and your team.
+excerpt: Learn about Git's fast-forward mode and its benefits when merging branches, so you can decide if it's a good fit for you and your team.
 dateModified: 2021-07-15
 ---
 

content/snippets/git/s/github-co-authors.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: How to add multiple authors to a commit"
+title: How to add multiple authors to a commit
 shortTitle: Add multiple authors to a commit
 type: tip
 language: git

content/snippets/html/s/custom-file-download-names.md

@@ -1,6 +1,5 @@
 ---
-title: "Tip: Customize the names of downloadable files"
-shortTitle: Customize the names of downloadable files
+title: Customize the names of downloadable files
 type: tip
 language: html
 tags: [link]

content/snippets/html/s/lazy-loading-images.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Lazy load images in HTML"
+title: Lazy load images in HTML
 shortTitle: Image lazy loading
 type: tip
 language: html

content/snippets/html/s/password-autocomplete-suggestion.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Adding autocomplete to a password field"
+title: Add autocomplete to an HTML password field
 shortTitle: Password field autocomplete
 type: tip
 language: html

content/snippets/html/s/prefetching-resources.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Prefetching resources in the browser"
+title: Prefetching resources in the browser
 shortTitle: Resource prefetching
 type: tip
 language: html

content/snippets/html/s/reversed-list.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Create a descending list of numbered items"
+title: Create a descending list of numbered items in HTML
 shortTitle: Descending list
 type: tip
 language: html

content/snippets/js/s/abort-fetch.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Abort a fetch request in JavaScript"
+title: Abort a fetch request in JavaScript
 shortTitle: Abort a fetch request
 type: story
 language: javascript

content/snippets/js/s/array-min-max.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Min and max value in a JavaScript array"
+title: Min and max value in a JavaScript array
 shortTitle: Min and max value of an array
 type: tip
 language: javascript

content/snippets/js/s/array-sorting-shorthand.md

@@ -1,9 +1,10 @@
 ---
-title: "Tip: JavaScript array sorting shorthand"
+title: JavaScript array sorting shorthand
 shortTitle: Array sorting shorthand
 type: tip
 language: javascript
 tags: [array]
+author: chalarangelo
 cover: apples
 excerpt: Learn how to quickly write code to sort JavaScript arrays with this handy one-liner.
 dateModified: 2021-06-12

content/snippets/js/s/cannot-extend-proxy-object.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: You can't extend the Proxy object"
+title: You can't extend JavaScript's Proxy object
 shortTitle: Extending the Proxy object
 type: tip
 language: javascript

content/snippets/js/s/compare-string-case-accent-insensitive.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Compare strings regardless of case and accent"
+title: Compare strings regardless of case and accent
 shortTitle: Case and accent-insensitive string comparison
 type: tip
 language: javascript

content/snippets/js/s/debounce-function.md

@@ -1,18 +1,18 @@
 ---
-title: Debounce function
-type: snippet
+title: Debounce a JavaScript function
+shortTitle: Debounce function
+type: tip
 language: javascript
 tags: [function]
+author: chalarangelo
 cover: solitude-beach
-excerpt: Creates a debounced function that waits `ms` milliseconds before invoking the provided function again.
-dateModified: 2021-10-13
+excerpt: Create a debounced function that waits a certain amount of time before invoking the provided function again.
+dateModified: 2023-10-12
 ---
 
-Creates a debounced function that delays invoking the provided function until at least `ms` milliseconds have elapsed since its last invocation.
+**Debouncing** is a technique used to **limit the number of times** a function is called. The function will only be called once, after a **specific amount of time** has elapsed since its last invocation.
 
-- Each time the debounced function is invoked, clear the current pending timeout with `clearTimeout()`. Use `setTimeout()` to create a new timeout that delays invoking the function until at least `ms` milliseconds have elapsed.
-- Use `Function.prototype.apply()` to apply the `this` context to the function and provide the necessary arguments.
-- Omit the second argument, `ms`, to set the timeout at a default of `0` ms.
+To accomplish this, we can use **timeouts** to artificially create the necessary delay. Each time the debounced function is invoked, we need to **clear the current pending timeout** with `clearTimeout()`. Then, we must use `setTimeout()` to **create a new timeout** that delays invoking the function until at least `ms` milliseconds have elapsed. Finally, using `Function.prototype.apply()` we can apply the `this` context to the function and provide the necessary arguments.
 
 ```js
 const debounce = (fn, ms = 0) => {

content/snippets/js/s/debounce-promise.md

@@ -1,22 +1,24 @@
 ---
-title: Debounce promise
-type: snippet
+title: Debounce a JavaScript function and return a promise
+shortTitle: Debounce promise
+type: tip
 language: javascript
 tags: [function,promise]
-excerpt: Creates a debounced function that returns a promise.
+author: chalarangelo
+excerpt: Easily create a debounced function that returns a promise.
 cover: chess-pawns
-dateModified: 2020-10-19
+dateModified: 2023-10-13
 ---
 
-Creates a debounced function that returns a promise, but delays invoking the provided function until at least `ms` milliseconds have elapsed since the last time it was invoked.
-All promises returned during this time will return the same data.
+**Debouncing** is a technique used to **limit the number of times** a function is called. We've previously seen how to [debounce a function](/js/s/debounce-function), but what if we want to **return a promise** instead?
 
-- Each time the debounced function is invoked, clear the current pending timeout with `clearTimeout()` and use `setTimeout()` to create a new timeout that delays invoking the function until at least `ms` milliseconds has elapsed.
-- Use `Function.prototype.apply()` to apply the `this` context to the function and provide the necessary arguments.
-- Create a new `Promise` and add its `resolve` and `reject` callbacks to the `pending` promises stack.
-- When `setTimeout()` is called, copy the current stack (as it can change between the provided function call and its resolution), clear it and call the provided function.
-- When the provided function resolves/rejects, resolve/reject all promises in the stack (copied when the function was called) with the returned data.
-- Omit the second argument, `ms`, to set the timeout at a default of `0` ms.
+Same as before, we can use **timeouts** to create a delay as needed. We need to **clear the current pending timeout**, using `clearTimeout()`, and **create a new timeout** with `setTimeout()` each time the debounced function is invoked. Similarly, we can use `Function.prototype.apply()` to apply the `this` context to the function and provide the necessary arguments.
+
+However, we also need to **keep track of all pending promises** and resolve/reject them when the function is invoked. To do that, we can create a `pending` array and add the `resolve` and `reject` callbacks of each promise to it.
+
+When **the function is invoked**, the current `pending` array will have to be copied, as it can change between the function call and its resolution. Then, we can clear the `pending` array and call the provided function.
+
+Finally, when **the function resolves/rejects**, we can resolve/reject all promises in the copied array with the returned data. This means that **all promises created in the meantime will resolve/reject with the same data**.
 
 ```js
 const debouncePromise = (fn, ms = 0) => {

content/snippets/js/s/decimal-to-hex.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Convert decimal number to hexadecimal"
+title: Convert decimal number to hexadecimal
 shortTitle: Decimal to hexadecimal
 type: tip
 language: javascript

content/snippets/js/s/dynamic-properties-are-slow.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Optimize dynamically added object properties"
+title: Optimize dynamically added object properties
 shortTitle: Dynamically added property optimization
 type: tip
 language: javascript

content/snippets/js/s/edit-url-params.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Edit URL Parameters in JavaScript"
+title: Edit URL Parameters in JavaScript
 shortTitle: Edit URL Parameters
 type: tip
 language: javascript

content/snippets/js/s/element-from-point.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Element at a specific point on the page"
+title: Element at a specific point on the page
 shortTitle: Element at specific coordinates
 type: tip
 language: javascript

content/snippets/js/s/eslint-refactor-for-in.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Refactoring your for...in loops to avoid ESLint warnings"
+title: Refactoring your for...in loops to avoid ESLint warnings
 shortTitle: Refactoring for...in loops to avoid ESLint warnings
 type: tip
 language: javascript

content/snippets/js/s/first-last-n-elements.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Get the first or last n elements in a JavaScript array"
+title: Get the first or last n elements in a JavaScript array
 shortTitle: First or last n elements of an array
 type: tip
 language: javascript

content/snippets/js/s/for-each-right.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Iterate over a JavaScript array from right to left"
+title: Iterate over a JavaScript array from right to left
 shortTitle: Iterate over array in reverse
 type: tip
 language: javascript

content/snippets/js/s/for-loop-early-break.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Use JavaScript for loops if you need to break out early"
+title: Use JavaScript for loops if you need to break out early
 shortTitle: For loops for early breaking
 type: tip
 language: javascript

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

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Get the index of an array item in a JavaScript for...of loop"
+title: Get the index of an array item in a JavaScript for...of loop
 shortTitle: Array index in for...of loops
 type: tip
 language: javascript

content/snippets/js/s/json-stringify-pick-keys.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Serialize specific properties from a JSON object"
+title: Serialize specific properties from a JSON object
 shortTitle: Selective property serialization
 type: tip
 language: javascript

content/snippets/js/s/last-element-of-array.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Get the last element of a JavaScript array"
+title: Get the last element of a JavaScript array
 shortTitle: Last element of array
 type: tip
 language: javascript

content/snippets/js/s/make-iterable.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Make any JavaScript value iterable"
+title: Make any JavaScript value iterable
 shortTitle: Make any value iterable
 type: tip
 language: javascript

content/snippets/js/s/n-min-max-elements-in-array.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Find the n min or max elements in a JavaScript array"
+title: Find the n min or max elements in a JavaScript array
 shortTitle: N min or max elements of an array
 type: tip
 language: javascript

content/snippets/js/s/nodejs-chrome-debugging.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Debugging Node.js using Chrome Developer Tools"
+title: Debugging Node.js using Chrome Developer Tools
 shortTitle: Debug Node.js with Chrome Developer Tools
 type: tip
 language: javascript

content/snippets/js/s/passive-scroll-listener-performance.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Improve scroll listener performance"
+title: Improve JavaScript scroll listener performance
 shortTitle: Improve scroll listener performance
 type: tip
 language: javascript

content/snippets/js/s/pretty-print-json.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Pretty-print a JSON object with JavaScript"
+title: Pretty-print a JSON object with JavaScript
 shortTitle: Pretty-print JSON
 type: tip
 language: javascript

content/snippets/js/s/prevent-string-being-escaped.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Prevent a string from being escaped in JavaScript"
+title: Prevent a string from being escaped in JavaScript
 shortTitle: Prevent string escaping
 type: tip
 language: javascript

content/snippets/js/s/promise-then-catch.md

@@ -1,6 +1,5 @@
 ---
-title: "Tip: The order of then and catch matters"
-shortTitle: The order of then and catch matters
+title: The order of then and catch matters
 type: tip
 language: javascript
 tags: [function,promise]

content/snippets/js/s/query-selector-shorthand.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Create your own query selector shorthand"
+title: Create your own query selector shorthand in vanilla JavaScript
 shortTitle: Query selector shorthand
 type: tip
 language: javascript

content/snippets/js/s/remove-array-duplicates.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Remove duplicates from a JavaScript array"
+title: Remove duplicates from a JavaScript array
 shortTitle: Remove duplicates from an array
 type: tip
 language: javascript

content/snippets/js/s/select-focused-dom-element.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Select the focused DOM element"
+title: Select the focused DOM element with JavaScript
 shortTitle: Focused DOM element
 type: tip
 language: javascript

content/snippets/js/s/store-dom-items.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Minimize DOM access"
+title: Minimize DOM access in JavaScript
 shortTitle: Minimize DOM access
 type: tip
 language: javascript

content/snippets/js/s/string-to-boolean.md

@@ -1,5 +1,5 @@
 ---
-title: "Tip: Convert a string to a boolean"
+title: Convert a string to a boolean
 shortTitle: String to boolean
 type: tip
 language: javascript