Merge pull request #302 from phuocng/links

fix: Correct links

contents/a-vs-not-not-a.mdx

@@ -31,4 +31,4 @@ In general, using `a` is useful when you want to check if a value is **truthy**
 
 ## See also
 
-- [== vs ===](https://phuoc.ng/collection/this-vs-that/equality-operator-vs-strict-equality-operator)
+- [== vs ===](https://phuoc.ng/collection/this-vs-that/equality-operator-vs-strict-equality-operator/)

contents/any-vs-unknown.mdx

@@ -97,4 +97,4 @@ It's best for developers to **avoid using `any`** in production code and instead
 
 ## See also
 
-- [void vs never](https://phuoc.ng/collection/this-vs-that/void-vs-never)
+- [void vs never](https://phuoc.ng/collection/this-vs-that/void-vs-never/)

contents/append-vs-append-child.mdx

@@ -6,7 +6,7 @@ openGraphCover: /og/this-vs-that/append.png
 title: append vs appendChild
 ---
 
-When it comes to [adding new elements](https://phuoc.ng/collection/html-dom/append-to-an-element) to the Document Object Model (DOM) in JavaScript, there are two methods that may seem similar at first glance: `append` and `appendChild`.
+When it comes to [adding new elements](https://phuoc.ng/collection/html-dom/append-to-an-element/) to the Document Object Model (DOM) in JavaScript, there are two methods that may seem similar at first glance: `append` and `appendChild`.
 
 However, in the next section, we'll explore the key difference between the two.
 

contents/border-box-vs-content-box.mdx

@@ -73,4 +73,4 @@ Specifically, the content's width is `200 - 5 * 2 - 10 * 2 = 170px`.
 
 ## See also
 
-- [margin vs padding](https://phuoc.ng/collection/this-vs-that/margin-vs-padding)
+- [margin vs padding](https://phuoc.ng/collection/this-vs-that/margin-vs-padding/)

contents/border-vs-outline.mdx

@@ -136,8 +136,8 @@ document.addEventListener('keydown', (e) => {
 ## Tip
 
 The `outline` property is useful when you want to visualize elements on the page.
-In the following sample code, we [iterate](https://phuoc.ng/collection/html-dom/loop-over-a-nodelist) over all the elements and
-[set](https://phuoc.ng/collection/html-dom/set-css-style-for-an-element) the `outline` property with a [random hex color](https://phuoc.ng/collection/1-loc/random/generate-a-random-hex-color):
+In the following sample code, we [iterate](https://phuoc.ng/collection/html-dom/loop-over-a-nodelist/) over all the elements and
+[set](https://phuoc.ng/collection/html-dom/set-css-style-for-an-element/) the `outline` property with a [random hex color](https://phuoc.ng/collection/1-loc/random//generate-a-random-hex-color):
 
 ```js
 [].forEach.call(document.querySelectorAll('*'), (ele) => {
@@ -146,7 +146,7 @@ In the following sample code, we [iterate](https://phuoc.ng/collection/html-dom/
 });
 ```
 
-Of course, you will need an opposite command to [reset](https://phuoc.ng/collection/html-dom/set-css-style-for-an-element) the `outline` property:
+Of course, you will need an opposite command to [reset](https://phuoc.ng/collection/html-dom/set-css-style-for-an-element/) the `outline` property:
 
 ```js
 [].forEach.call(document.querySelectorAll('*'), (ele) => ele.style.removeProperty('outline'));

contents/call-stack-vs-task-queue.mdx

@@ -67,5 +67,5 @@ It's super important to know the difference between the call stack and task queu
 
 ## See also
 
-- [Microtasks vs macrotasks](https://phuoc.ng/collection/this-vs-that/microtasks-vs-macrotasks)
-- [setInterval() vs setTimeout() vs setTimeout(0)](https://phuoc.ng/collection/this-vs-that/set-interval-vs-set-timeout-vs-set-timeout-zero)
+- [Microtasks vs macrotasks](https://phuoc.ng/collection/this-vs-that/microtasks-vs-macrotasks/)
+- [setInterval() vs setTimeout() vs setTimeout(0)](https://phuoc.ng/collection/this-vs-that/set-interval-vs-set-timeout-vs-set-timeout-zero/)

contents/caret-vs-tilde-in-package-json-file.mdx

@@ -38,4 +38,4 @@ To sum up, when working with NPM, the caret and tilde symbols in the `package.js
 
 ## See also
 
-- [dev vs devDependencies vs peerDependencies in package.json](https://phuoc.ng/collection/this-vs-that/dev-vs-dev-dependencies-vs-peer-dependencies-in-package-json)
+- [dev vs devDependencies vs peerDependencies in package.json](https://phuoc.ng/collection/this-vs-that/dev-vs-dev-dependencies-vs-peer-dependencies-in-package-json/)

contents/children-vs-child-nodes.mdx

@@ -53,4 +53,4 @@ It's important to note that, unlike the `children` property, the `childNodes` pr
 
 > **Good to know**
 >
-> Both `children` and `childNodes` return a collection of nodes that is constantly updated. To learn more, check out the [Dynamic vs static NodeList](https://phuoc.ng/collection/this-vs-that/dynamic-vs-static-node-list) post.
+> Both `children` and `childNodes` return a collection of nodes that is constantly updated. To learn more, check out the [Dynamic vs static NodeList](https://phuoc.ng/collection/this-vs-that/dynamic-vs-static-node-list/) post.

contents/client-height-vs-offset-height-vs-scroll-height.mdx

@@ -12,4 +12,4 @@ title: clientHeight vs offsetHeight vs scrollHeight
 
 ## See also
 
-- [clientY vs pageY](https://phuoc.ng/collection/this-vs-that/client-y-vs-page-y)
+- [clientY vs pageY](https://phuoc.ng/collection/this-vs-that/client-y-vs-page-y/)

contents/client-y-vs-page-y.mdx

@@ -36,4 +36,4 @@ Here, _page_ is the whole rendered page which may have the scrollbars, whereas _
 
 ## See also
 
-- [clientHeight vs offsetHeight vs scrollHeight](https://phuoc.ng/collection/this-vs-that/client-height-vs-offset-height-vs-scroll-height)
+- [clientHeight vs offsetHeight vs scrollHeight](https://phuoc.ng/collection/this-vs-that/client-height-vs-offset-height-vs-scroll-height/)

contents/const-enum-vs-enum.mdx

@@ -60,4 +60,4 @@ If you do not want TypeScript to erase the generated code for `const` enums, you
 
 ## See also
 
-- [literal union type vs string enums](https://phuoc.ng/collection/this-vs-that/literal-union-type-vs-string-enums)
+- [literal union type vs string enums](https://phuoc.ng/collection/this-vs-that/literal-union-type-vs-string-enums/)

contents/controlled-vs-uncontrolled-components.mdx

@@ -118,4 +118,4 @@ While uncontrolled components have their advantages, it's best to use them spari
 
 ## See also
 
-- [Controlled vs uncontrolled modes](https://phuoc.ng/collection/this-vs-that/controlled-vs-uncontrolled-modes)
+- [Controlled vs uncontrolled modes](https://phuoc.ng/collection/this-vs-that/controlled-vs-uncontrolled-modes/)

contents/controlled-vs-uncontrolled-modes.mdx

@@ -212,4 +212,4 @@ When it comes to choosing between controlled or uncontrolled components, there's
 
 ## See also
 
-- [Controlled vs uncontrolled components](https://phuoc.ng/collection/this-vs-that/controlled-vs-uncontrolled-components)
+- [Controlled vs uncontrolled components](https://phuoc.ng/collection/this-vs-that/controlled-vs-uncontrolled-components/)

contents/cookie-vs-local-storage-vs-session-storage.mdx

@@ -158,5 +158,5 @@ To sum up, `cookies`, `localStorage`, and `sessionStorage` each have their own s
 
 ## See also
 
-- [Clear all cookies](https://phuoc.ng/collection/1-loc/clear-all-cookies)
-- [Get the value of a cookie](https://phuoc.ng/collection/1-loc/get-the-value-of-a-cookie)
+- [Clear all cookies](https://phuoc.ng/collection/1-loc/clear-all-cookies/)
+- [Get the value of a cookie](https://phuoc.ng/collection/1-loc/get-the-value-of-a-cookie/)

contents/create-document-fragment-vs-create-element.mdx

@@ -50,7 +50,7 @@ In this example, we create a new `documentFragment` and three new `paragraph` el
 
 Using document fragments is a great way to boost performance when adding multiple nodes to the DOM. Instead of adding each node one by one, you can group them together in a document fragment, and then add the fragment to the DOM. This can be faster because it only triggers one reflow instead of many.
 
-Check out this [tip](https://phuoc.ng/collection/tips/use-documentfragments-when-adding-a-big-list-of-elements) for more details.
+Check out this [tip](https://phuoc.ng/collection/tips/use-documentfragments-when-adding-a-big-list-of-elements/) for more details.
 
 ## The distinction
 

contents/deep-compare-vs-shallow-compare.mdx

@@ -72,4 +72,4 @@ To sum things up, shallow compare checks if two objects are the same instance in
 
 ## See also
 
-- [Deep copy vs shallow copy](https://phuoc.ng/collection/this-vs-that/deep-copy-vs-shallow-copy)
+- [Deep copy vs shallow copy](https://phuoc.ng/collection/this-vs-that/deep-copy-vs-shallow-copy/)

contents/deep-copy-vs-shallow-copy.mdx

@@ -104,4 +104,4 @@ When copying objects in JavaScript, it's essential to know the difference betwee
 
 ## See also
 
-- [Deep compare vs shallow compare](https://phuoc.ng/collection/this-vs-that/deep-compare-vs-shallow-compare)
+- [Deep compare vs shallow compare](https://phuoc.ng/collection/this-vs-that/deep-compare-vs-shallow-compare/)

contents/dev-vs-dev-dependencies-vs-peer-dependencies-in-package-json.mdx

@@ -62,4 +62,4 @@ When developing Node.js packages, it's crucial to understand the differences bet
 
 ## See also
 
-- [^a.b.c vs ~a.b.c in package.json file](https://phuoc.ng/collection/this-vs-that/caret-vs-tilde-in-package-json-file)
+- [^a.b.c vs ~a.b.c in package.json file](https://phuoc.ng/collection/this-vs-that/caret-vs-tilde-in-package-json-file/)

contents/dynamic-vs-static-node-list.mdx

@@ -85,5 +85,5 @@ However, if you're working with elements that might change frequently (like if y
 
 ## See also
 
-- [children vs childNodes](https://phuoc.ng/collection/this-vs-that/children-vs-child-nodes)
-- [NodeIterator vs TreeWalker](https://phuoc.ng/collection/this-vs-that/node-iterator-vs-tree-walker)
+- [children vs childNodes](https://phuoc.ng/collection/this-vs-that/children-vs-child-nodes/)
+- [NodeIterator vs TreeWalker](https://phuoc.ng/collection/this-vs-that/node-iterator-vs-tree-walker/)

contents/equality-operator-vs-strict-equality-operator.mdx

@@ -28,4 +28,4 @@ Always use `===` to compare values.
 
 ## See also
 
-- [a vs !!a](https://phuoc.ng/collection/this-vs-that/a-vs-not-not-a)
+- [a vs !!a](https://phuoc.ng/collection/this-vs-that/a-vs-not-not-a/)

contents/event-bubbling-vs-capturing.mdx

@@ -55,13 +55,13 @@ parent clicked children clicked
 
 ## Good practice
 
-It is not recommended to register the event handler via the element attributes such as `onclick`. For more details, check out the [addEventListener() function vs onproperty](https://phuoc.ng/collection/this-vs-that/add-event-listener-function-vs-on-property).
+It is not recommended to register the event handler via the element attributes such as `onclick`. For more details, check out the [addEventListener() function vs onproperty](https://phuoc.ng/collection/this-vs-that/add-event-listener-function-vs-on-property/).
 
 ## Good to know
 
 The capturing mode does not happen for some special events (`focus`, for example) and on IE < 9.
 
 ## See also
 
-- [event.preventDefault vs return false](https://phuoc.ng/collection/this-vs-that/event-prevent-default-vs-return-false)
-- [stopImmediatePropagation vs stopPropagation](https://phuoc.ng/collection/this-vs-that/stop-immediate-propagation-vs-stop-propagation)
+- [event.preventDefault vs return false](https://phuoc.ng/collection/this-vs-that/event-prevent-default-vs-return-false/)
+- [stopImmediatePropagation vs stopPropagation](https://phuoc.ng/collection/this-vs-that/stop-immediate-propagation-vs-stop-propagation/)

contents/event-prevent-default-vs-return-false.mdx

@@ -98,5 +98,5 @@ $(element).on('click', function (e) {
 
 ## See also
 
-- [event bubbling vs capturing](https://phuoc.ng/collection/this-vs-that/event-bubbling-vs-capturing)
-- [stopImmediatePropagation vs stopPropagation](https://phuoc.ng/collection/this-vs-that/stop-immediate-propagation-vs-stop-propagation)
+- [event bubbling vs capturing](https://phuoc.ng/collection/this-vs-that/event-bubbling-vs-capturing/)
+- [stopImmediatePropagation vs stopPropagation](https://phuoc.ng/collection/this-vs-that/stop-immediate-propagation-vs-stop-propagation/)

contents/function-vs-property-in-interface.mdx

@@ -136,4 +136,4 @@ interface Logger {
  }
  ```
 
- See the [differences](https://phuoc.ng/collection/this-vs-that/method-in-class-constructor-vs-prototype) between declaring methods in class constructor and prototype for more details.
+ See the [differences](https://phuoc.ng/collection/this-vs-that/method-in-class-constructor-vs-prototype/) between declaring methods in class constructor and prototype for more details.

contents/has-own-property-vs-in.mdx

@@ -72,4 +72,4 @@ In order to check the existence of a property, use `hasOwnProperty`. Use `in` to
 
 ## See also
 
-- [Object vs Map](https://phuoc.ng/collection/this-vs-that/object-vs-map)
+- [Object vs Map](https://phuoc.ng/collection/this-vs-that/object-vs-map/)

contents/is-nan-vs-number-is-nan.mdx

@@ -48,4 +48,4 @@ It's generally better to use `Number.isNaN` than `isNaN` since it gives more acc
 
 ## See also
 
-- [Number() vs parseInt()](https://phuoc.ng/collection/this-vs-that/number-constructor-vs-parse-int)
+- [Number() vs parseInt()](https://phuoc.ng/collection/this-vs-that/number-constructor-vs-parse-int/)

contents/javascript-events-vs-synthetic-react-events.mdx

@@ -26,7 +26,7 @@ button.addEventListener('click', function(e) {
 
 The event handler is a function that takes the native JavaScript event as a parameter.
 
-> When it comes to attaching events to elements in JavaScript, you have two options: `addEventListener` and the `on` prefix. But which one should you choose? Confused? Check out this [addEventListener vs on](https://phuoc.ng/collection/this-vs-that/add-event-listener-function-vs-on-property) post for a detailed breakdown of the differences between the two.
+> When it comes to attaching events to elements in JavaScript, you have two options: `addEventListener` and the `on` prefix. But which one should you choose? Confused? Check out this [addEventListener vs on](https://phuoc.ng/collection/this-vs-that/add-event-listener-function-vs-on-property/) post for a detailed breakdown of the differences between the two.
 
 ## Synthetic React events
 

contents/literal-union-type-vs-string-enums.mdx

@@ -126,4 +126,4 @@ let theme: Theme.DEFAULT = 'Default'; // ERROR
 
 ## See also
 
-- [const enum vs enum](https://phuoc.ng/collection/this-vs-that/const-enum-vs-enum)
+- [const enum vs enum](https://phuoc.ng/collection/this-vs-that/const-enum-vs-enum/)

contents/map-vs-weak-map.mdx

@@ -50,4 +50,4 @@ title: Map vs WeakMap
 
 ## See also
 
-- [Object vs Map](https://phuoc.ng/collection/this-vs-that/object-vs-map)
+- [Object vs Map](https://phuoc.ng/collection/this-vs-that/object-vs-map/)

contents/margin-vs-padding.mdx

@@ -77,4 +77,4 @@ title: margin vs padding
 
 ## See also
 
-- [border-box vs content-box](https://phuoc.ng/collection/this-vs-that/border-box-vs-content-box)
+- [border-box vs content-box](https://phuoc.ng/collection/this-vs-that/border-box-vs-content-box/)

contents/method-in-class-constructor-vs-prototype.mdx

@@ -77,4 +77,4 @@ The latter looks more readable and convenient.
 
 ## See also
 
-- [function vs property in interface](https://phuoc.ng/collection/this-vs-that/function-vs-property-in-interface)
+- [function vs property in interface](https://phuoc.ng/collection/this-vs-that/function-vs-property-in-interface/)

contents/microtasks-vs-macrotasks.mdx

@@ -41,5 +41,5 @@ In summary, microtasks and macrotasks are two types of tasks that are used to ma
 
 ## See also
 
-- [Call stack vs task queue](https://phuoc.ng/collection/this-vs-that/call-stack-vs-task-queue)
-- [setInterval() vs setTimeout() vs setTimeout(0)](https://phuoc.ng/collection/this-vs-that/set-interval-vs-set-timeout-vs-set-timeout-zero)
+- [Call stack vs task queue](https://phuoc.ng/collection/this-vs-that/call-stack-vs-task-queue/)
+- [setInterval() vs setTimeout() vs setTimeout(0)](https://phuoc.ng/collection/this-vs-that/set-interval-vs-set-timeout-vs-set-timeout-zero/)

contents/node-iterator-vs-tree-walker.mdx

@@ -146,4 +146,4 @@ To sum up, both `NodeIterator` and `TreeWalker` objects are handy when it comes
 
 ## See also
 
-- [Dynamic vs static NodeList](https://phuoc.ng/collection/this-vs-that/dynamic-vs-static-node-list)
+- [Dynamic vs static NodeList](https://phuoc.ng/collection/this-vs-that/dynamic-vs-static-node-list/)

contents/null-vs-undefined.mdx

@@ -29,7 +29,7 @@ title: null vs undefined
  console.log(typeof null); // 'object'
  ```
 
- Since they are different types, here are the result of [equality and identity](https://phuoc.ng/collection/this-vs-that/equality-operator-vs-strict-equality-operator) operators when comparing them to each other:
+ Since they are different types, here are the result of [equality and identity](https://phuoc.ng/collection/this-vs-that/equality-operator-vs-strict-equality-operator/) operators when comparing them to each other:
 
  ```js
  null == undefined; // true

contents/number-constructor-vs-parse-int.mdx

@@ -85,7 +85,7 @@ Both `Number()` and `parseInt()` are often used to convert a string to number.
  parseInt('12 345'); // 12, not 12345
  ```
 
- To avoid the similar situations, you should [remove all spaces](https://phuoc.ng/collection/1-loc/remove-spaces-from-a-string) before parsing:
+ To avoid the similar situations, you should [remove all spaces](https://phuoc.ng/collection/1-loc/remove-spaces-from-a-string/) before parsing:
 
  ```js
  parseInt(value.replace(/\s+/g, ''), 10);
@@ -109,7 +109,7 @@ Both `Number()` and `parseInt()` are often used to convert a string to number.
 
 ## Tip
 
-Instead of using the `Number()` constructor to [convert](https://phuoc.ng/collection/1-loc/convert-a-string-to-number) a string to number, you can use the `+` operator:
+Instead of using the `Number()` constructor to [convert](https://phuoc.ng/collection/1-loc/convert-a-string-to-number/) a string to number, you can use the `+` operator:
 
 ```js
 +'010'; // 10
@@ -119,4 +119,4 @@ Instead of using the `Number()` constructor to [convert](https://phuoc.ng/collec
 
 ## See also
 
-- [isNaN vs Number.isNaN](https://phuoc.ng/collection/this-vs-that/is-nan-vs-number-is-nan)
+- [isNaN vs Number.isNaN](https://phuoc.ng/collection/this-vs-that/is-nan-vs-number-is-nan/)

contents/object-property-vs-object-define-property.mdx

@@ -213,4 +213,4 @@ To sum up, we have two ways to define properties on an object: `object.property`
 
 ## See also
 
-- [object.property vs object["property"]](https://phuoc.ng/collection/this-vs-that/object-property-with-vs-without-quotes)
+- [object.property vs object["property"]](https://phuoc.ng/collection/this-vs-that/object-property-with-vs-without-quotes/)

contents/object-property-with-vs-without-quotes.mdx

@@ -50,4 +50,4 @@ obj['key'];
 
 ## See also
 
-- [object.property vs Object.defineProperty()](https://phuoc.ng/collection/this-vs-that/object-property-vs-object-define-property)
+- [object.property vs Object.defineProperty()](https://phuoc.ng/collection/this-vs-that/object-property-vs-object-define-property/)

contents/object-vs-map.mdx

@@ -129,5 +129,5 @@ const person = {
 
 ## See also
 
-- [hasOwnProperty vs in](https://phuoc.ng/collection/this-vs-that/has-own-property-vs-in)
-- [Map vs WeakMap](https://phuoc.ng/collection/this-vs-that/map-vs-weak-map)
+- [hasOwnProperty vs in](https://phuoc.ng/collection/this-vs-that/has-own-property-vs-in/)
+- [Map vs WeakMap](https://phuoc.ng/collection/this-vs-that/map-vs-weak-map/)

contents/preload-vs-prefetch.mdx

@@ -84,4 +84,4 @@ By combining `preload` and `prefetch`, you can speed up your web page loading ti
 
 ## See also
 
-- [script async vs script defer](https://phuoc.ng/collection/this-vs-that/script-async-vs-script-defer)
+- [script async vs script defer](https://phuoc.ng/collection/this-vs-that/script-async-vs-script-defer/)

contents/resize-event-vs-resize-observer.mdx

@@ -118,4 +118,4 @@ To use `ResizeObserver` effectively, it's important to follow the best practices
 
 ## See also
 
-- [Debouncing vs throttling](https://phuoc.ng/collection/this-vs-that/debouncing-vs-throttling)
+- [Debouncing vs throttling](https://phuoc.ng/collection/this-vs-that/debouncing-vs-throttling/)

contents/script-async-vs-script-defer.mdx

@@ -92,7 +92,7 @@ These attributes let browser know that the scripts can be downloaded in parallel
 
 ## Good to know
 
-Scripts that are injected to the page [dynamically](https://phuoc.ng/collection/html-dom/load-a-javascript-file-dynamically) are `async` by default.
+Scripts that are injected to the page [dynamically](https://phuoc.ng/collection/html-dom/load-a-javascript-file-dynamically/) are `async` by default.
 However, you can set the `async` attribute to `false` if you want.
 
 ```js
@@ -104,4 +104,4 @@ document.head.appendChild(script);
 
 ## See also
 
-- [preload vs prefetch](https://phuoc.ng/collection/this-vs-that/preload-vs-prefetch)
+- [preload vs prefetch](https://phuoc.ng/collection/this-vs-that/preload-vs-prefetch/)

contents/set-interval-vs-set-timeout-vs-set-timeout-zero.mdx

@@ -95,5 +95,5 @@ In JavaScript, `setInterval`, `setTimeout`, and `setTimeout(0)` are powerful too
 
 ## See also
 
-- [Call stack vs task queue](https://phuoc.ng/collection/this-vs-that/call-stack-vs-task-queue)
-- [Microtasks vs macrotasks](https://phuoc.ng/collection/this-vs-that/microtasks-vs-macrotasks)
+- [Call stack vs task queue](https://phuoc.ng/collection/this-vs-that/call-stack-vs-task-queue/)
+- [Microtasks vs macrotasks](https://phuoc.ng/collection/this-vs-that/microtasks-vs-macrotasks/)