From 8535fd33653d42bca060d4dd9fb5cceb32ed40a3 Mon Sep 17 00:00:00 2001
From: tahachm <97478750+tahachm@users.noreply.github.com>
Date: Sun, 9 Mar 2025 06:18:16 +0500
Subject: [PATCH 01/26] Executable coding blocks production-readiness - PR 1
 (#20)

Co-authored-by: GitHub Actions <github-actions[bot]@users.noreply.github.com>
---
 README.md                                     | 53 +++++++++-------
 .../en-US.mdx                                 |  8 +--
 .../en-US.mdx                                 | 16 +++--
 .../en-US.mdx                                 |  6 +-
 .../en-US.mdx                                 | 23 ++++---
 .../en-US.mdx                                 | 10 +--
 .../en-US.mdx                                 | 10 +--
 .../en-US.mdx                                 | 44 +++++++------
 .../en-US.mdx                                 | 10 +--
 .../en-US.mdx                                 | 34 +++++-----
 .../en-US.mdx                                 | 21 ++++---
 .../en-US.mdx                                 | 63 +++++++++++++------
 .../en-US.mdx                                 | 28 ++++-----
 .../en-US.mdx                                 | 32 +++++-----
 .../en-US.mdx                                 |  4 +-
 .../en-US.mdx                                 | 37 ++++++-----
 .../en-US.mdx                                 |  4 +-
 .../en-US.mdx                                 | 54 +++++++++++-----
 .../en-US.mdx                                 | 10 +--
 19 files changed, 276 insertions(+), 191 deletions(-)

diff --git a/README.md b/README.md
index d27c4e4..9647747 100644
--- a/README.md
+++ b/README.md
@@ -1494,7 +1494,7 @@ There are multiple ways to iterate over object properties as well as arrays in J
 
 The `for...in` loop iterates over all enumerable properties of an object, including inherited enumerable properties. So it is important to have a check if you only want to iterate over object's own properties
 
-```js
+```js live
 const obj = {
   a: 1,
   b: 2,
@@ -1513,7 +1513,7 @@ for (const key in obj) {
 
 `Object.keys()` returns an array of the object's own enumerable property names. You can then use a for...of loop or forEach to iterate over this array.
 
-```js
+```js live
 const obj = {
   a: 1,
   b: 2,
@@ -1529,7 +1529,7 @@ Most common ways to iterate over array are using `for` loop and `Array.prototype
 
 **Using `for` loop**
 
-```js
+```js live
 let array = [1, 2, 3, 4, 5, 6];
 for (let index = 0; index < array.length; index++) {
   console.log(array[index]);
@@ -1538,7 +1538,7 @@ for (let index = 0; index < array.length; index++) {
 
 **Using `Array.prototype.forEach` method**
 
-```js
+```js live
 let array = [1, 2, 3, 4, 5, 6];
 array.forEach((number, index) => {
   console.log(`${number} at index ${index}`);
@@ -1549,7 +1549,7 @@ array.forEach((number, index) => {
 
 This method is the newest and most convenient way to iterate over arrays. It automatically iterates over each element without requiring you to manage the index.
 
-```js
+```js live
 const numbers = [1, 2, 3, 4, 5];
 
 for (const number of numbers) {
@@ -2322,9 +2322,9 @@ Template literals are a feature in JavaScript that allow for easier string inter
 
 Example:
 
-```js
-const name = 'John';
-const greeting = `Hello, ${name}!`;
+```js live
+const myName = 'John';
+const greeting = `Hello, ${myName}!`;
 console.log(greeting); // Output: Hello, John!
 ```
 
@@ -2365,14 +2365,16 @@ console.log(result); // "Hello world! How are you?"
 
 The spread operator, represented by three dots (`...`), is used in JavaScript to expand iterable objects like arrays or strings into individual elements. It can also be used to spread object properties. For example, you can use it to combine arrays, copy arrays, or pass array elements as arguments to a function.
 
-```js
+```js live
 const arr1 = [1, 2, 3];
 const arr2 = [4, 5, 6];
-const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
+const combined = [...arr1, ...arr2];
+console.log(combined); // [1, 2, 3, 4, 5, 6]
 
 const obj1 = { a: 1, b: 2 };
 const obj2 = { c: 3, d: 4 };
-const combinedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }
+const combinedObj = { ...obj1, ...obj2 };
+console.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }
 ```
 
 <!-- Update here: /questions/what-is-the-spread-operator-and-how-is-it-used/en-US.mdx -->
@@ -2565,16 +2567,17 @@ let b = 10;
 
 To avoid problems related to hoisting, always declare variables at the top of their scope using `let` or `const` instead of `var`. This ensures that variables are block-scoped and not hoisted to the top of their containing function or global scope. Additionally, declare functions before they are called to avoid issues with function hoisting.
 
-```js
+```js live
 // Use let or const
 let x = 10;
 const y = 20;
+console.log(x, y); // Output: 10 20
 
 // Declare functions before calling them
 function myFunction() {
   console.log('Hello, world!');
 }
-myFunction();
+myFunction(); // Output: 'Hello, world!'
 ```
 
 <!-- Update here: /questions/how-can-you-avoid-problems-related-to-hoisting/en-US.mdx -->
@@ -2615,7 +2618,7 @@ There are multiple ways to iterate over object properties as well as arrays in J
 
 The `for...in` loop iterates over all enumerable properties of an object, including inherited enumerable properties. So it is important to have a check if you only want to iterate over object's own properties
 
-```js
+```js live
 const obj = {
   a: 1,
   b: 2,
@@ -2634,7 +2637,7 @@ for (const key in obj) {
 
 `Object.keys()` returns an array of the object's own enumerable property names. You can then use a for...of loop or forEach to iterate over this array.
 
-```js
+```js live
 const obj = {
   a: 1,
   b: 2,
@@ -2650,7 +2653,7 @@ Most common ways to iterate over array are using `for` loop and `Array.prototype
 
 **Using `for` loop**
 
-```js
+```js live
 let array = [1, 2, 3, 4, 5, 6];
 for (let index = 0; index < array.length; index++) {
   console.log(array[index]);
@@ -2659,7 +2662,7 @@ for (let index = 0; index < array.length; index++) {
 
 **Using `Array.prototype.forEach` method**
 
-```js
+```js live
 let array = [1, 2, 3, 4, 5, 6];
 array.forEach((number, index) => {
   console.log(`${number} at index ${index}`);
@@ -2670,7 +2673,7 @@ array.forEach((number, index) => {
 
 This method is the newest and most convenient way to iterate over arrays. It automatically iterates over each element without requiring you to manage the index.
 
-```js
+```js live
 const numbers = [1, 2, 3, 4, 5];
 
 for (const number of numbers) {
@@ -2698,7 +2701,7 @@ There are also other inbuilt methods available which are suitable for specific s
 
 The `break` statement is used to exit a loop or switch statement prematurely, while the `continue` statement skips the current iteration of a loop and proceeds to the next iteration. For example, in a `for` loop, `break` will stop the loop entirely, and `continue` will skip to the next iteration.
 
-```js
+```js live
 for (let i = 0; i < 10; i++) {
   if (i === 5) break; // exits the loop when i is 5
   console.log(i);
@@ -2738,7 +2741,7 @@ The ternary operator is a shorthand for an `if-else` statement in JavaScript. It
 
 To access the index of an element in an array during iteration, you can use methods like `forEach`, `map`, `for...of` with `entries`, or a traditional `for` loop. For example, using `forEach`:
 
-```js
+```js live
 const array = ['a', 'b', 'c'];
 array.forEach((element, index) => {
   console.log(index, element);
@@ -2786,7 +2789,7 @@ switch (expression) {
 
 Rest parameters in JavaScript allow a function to accept an indefinite number of arguments as an array. They are denoted by three dots (`...`) followed by the name of the array. This feature is useful for functions that need to handle multiple arguments without knowing the exact number in advance.
 
-```js
+```js live
 function sum(...numbers) {
   return numbers.reduce((acc, curr) => acc + curr, 0);
 }
@@ -2808,22 +2811,26 @@ console.log(sum(1, 2, 3, 4)); // Output: 10
 
 The spread operator (`...`) in JavaScript allows you to expand elements of an iterable (like an array or object) into individual elements. It is commonly used for copying arrays or objects, merging arrays or objects, and passing elements of an array as arguments to a function.
 
-```js
+```js live
 // Copying an array
 const arr1 = [1, 2, 3];
 const arr2 = [...arr1];
+console.log(arr2); // Output: [1, 2, 3]
 
 // Merging arrays
 const arr3 = [4, 5, 6];
 const mergedArray = [...arr1, ...arr3];
+console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]
 
 // Copying an object
 const obj1 = { a: 1, b: 2 };
 const obj2 = { ...obj1 };
+console.log(obj2); // Output: { a: 1, b: 2 }
 
 // Merging objects
 const obj3 = { c: 3, d: 4 };
 const mergedObject = { ...obj1, ...obj3 };
+console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }
 
 // Passing array elements as function arguments
 const sum = (x, y, z) => x + y + z;
@@ -3005,7 +3012,7 @@ A parameter is a variable in the declaration of a function, while an argument is
 
 Hoisting in JavaScript is a behavior where function declarations are moved to the top of their containing scope during the compile phase. This means you can call a function before it is defined in the code. However, this does not apply to function expressions or arrow functions, which are not hoisted in the same way.
 
-```js
+```js live
 // Function declaration
 hoistedFunction(); // Works fine
 function hoistedFunction() {
diff --git a/questions/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.mdx b/questions/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.mdx
index 5ee9f24..2c98bc1 100644
--- a/questions/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.mdx
+++ b/questions/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the concept of hoisting with regards to functions
 
 Hoisting in JavaScript is a behavior where function declarations are moved to the top of their containing scope during the compile phase. This means you can call a function before it is defined in the code. However, this does not apply to function expressions or arrow functions, which are not hoisted in the same way.
 
-```js
+```js live
 // Function declaration
 hoistedFunction(); // Works fine
 function hoistedFunction() {
@@ -30,7 +30,7 @@ Hoisting is a JavaScript mechanism where variables and function declarations are
 
 Function declarations are fully hoisted. This means you can call a function before its declaration in the code.
 
-```js
+```js live
 hoistedFunction(); // Works fine
 
 function hoistedFunction() {
@@ -42,7 +42,7 @@ function hoistedFunction() {
 
 Function expressions, including arrow functions, are not hoisted in the same way. They are treated as variable assignments and are only hoisted as undefined.
 
-```js
+```js live
 nonHoistedFunction(); // Throws an error: TypeError: nonHoistedFunction is not a function
 
 var nonHoistedFunction = function () {
@@ -54,7 +54,7 @@ var nonHoistedFunction = function () {
 
 Arrow functions behave similarly to function expressions in terms of hoisting.
 
-```js
+```js live
 arrowFunction(); // Throws an error: TypeError: arrowFunction is not a function
 
 var arrowFunction = () => {
diff --git a/questions/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.mdx b/questions/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.mdx
index 1a8864f..a5dd4cf 100644
--- a/questions/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.mdx
+++ b/questions/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.mdx
@@ -6,22 +6,26 @@ title: Explain the concept of the spread operator and its uses
 
 The spread operator (`...`) in JavaScript allows you to expand elements of an iterable (like an array or object) into individual elements. It is commonly used for copying arrays or objects, merging arrays or objects, and passing elements of an array as arguments to a function.
 
-```js
+```js live
 // Copying an array
 const arr1 = [1, 2, 3];
 const arr2 = [...arr1];
+console.log(arr2); // Output: [1, 2, 3]
 
 // Merging arrays
 const arr3 = [4, 5, 6];
 const mergedArray = [...arr1, ...arr3];
+console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]
 
 // Copying an object
 const obj1 = { a: 1, b: 2 };
 const obj2 = { ...obj1 };
+console.log(obj2); // Output: { a: 1, b: 2 }
 
 // Merging objects
 const obj3 = { c: 3, d: 4 };
 const mergedObject = { ...obj1, ...obj3 };
+console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }
 
 // Passing array elements as function arguments
 const sum = (x, y, z) => x + y + z;
@@ -37,7 +41,7 @@ console.log(sum(...numbers)); // Output: 6
 
 The spread operator can be used to create a shallow copy of an array. This is useful when you want to duplicate an array without affecting the original array.
 
-```js
+```js live
 const arr1 = [1, 2, 3];
 const arr2 = [...arr1];
 console.log(arr2); // Output: [1, 2, 3]
@@ -47,7 +51,7 @@ console.log(arr2); // Output: [1, 2, 3]
 
 You can use the spread operator to merge multiple arrays into one. This is a concise and readable way to combine arrays.
 
-```js
+```js live
 const arr1 = [1, 2, 3];
 const arr3 = [4, 5, 6];
 const mergedArray = [...arr1, ...arr3];
@@ -58,7 +62,7 @@ console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]
 
 Similar to arrays, the spread operator can be used to create a shallow copy of an object. This is useful for duplicating objects without affecting the original object.
 
-```js
+```js live
 const obj1 = { a: 1, b: 2 };
 const obj2 = { ...obj1 };
 console.log(obj2); // Output: { a: 1, b: 2 }
@@ -68,7 +72,7 @@ console.log(obj2); // Output: { a: 1, b: 2 }
 
 The spread operator can also be used to merge multiple objects into one. This is particularly useful for combining properties from different objects.
 
-```js
+```js live
 const obj1 = { a: 1, b: 2 };
 const obj3 = { c: 3, d: 4 };
 const mergedObject = { ...obj1, ...obj3 };
@@ -79,7 +83,7 @@ console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }
 
 The spread operator allows you to pass elements of an array as individual arguments to a function. This is useful for functions that accept multiple arguments.
 
-```js
+```js live
 const sum = (x, y, z) => x + y + z;
 const numbers = [1, 2, 3];
 console.log(sum(...numbers)); // Output: 6
diff --git a/questions/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.mdx b/questions/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.mdx
index 689919f..31cf4af 100644
--- a/questions/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.mdx
+++ b/questions/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.mdx
@@ -14,7 +14,7 @@ title: Explain the difference in hoisting between `var`, `let`, and `const`
 
 `var` declarations are hoisted to the top of their containing function or global scope. This means the variable is available throughout the entire function or script, even before the line where it is declared. However, the variable is initialized with `undefined` until the actual declaration is encountered.
 
-```js
+```js live
 console.log(a); // Output: undefined
 var a = 10;
 console.log(a); // Output: 10
@@ -24,7 +24,7 @@ console.log(a); // Output: 10
 
 `let` declarations are also hoisted to the top of their block scope, but they are not initialized. This creates a "temporal dead zone" (TDZ) from the start of the block until the declaration is encountered. Accessing the variable in the TDZ results in a `ReferenceError`.
 
-```js
+```js live
 console.log(b); // ReferenceError: Cannot access 'b' before initialization
 let b = 20;
 console.log(b); // Output: 20
@@ -34,7 +34,7 @@ console.log(b); // Output: 20
 
 `const` declarations behave similarly to `let` in terms of hoisting. They are hoisted to the top of their block scope but are not initialized, resulting in a TDZ. Additionally, `const` requires an initial value at the time of declaration and cannot be reassigned.
 
-```js
+```js live
 console.log(c); // ReferenceError: Cannot access 'c' before initialization
 const c = 30;
 console.log(c); // Output: 30
diff --git a/questions/how-can-you-avoid-problems-related-to-hoisting/en-US.mdx b/questions/how-can-you-avoid-problems-related-to-hoisting/en-US.mdx
index b31b9a2..f6ea850 100644
--- a/questions/how-can-you-avoid-problems-related-to-hoisting/en-US.mdx
+++ b/questions/how-can-you-avoid-problems-related-to-hoisting/en-US.mdx
@@ -6,16 +6,17 @@ title: How can you avoid problems related to hoisting?
 
 To avoid problems related to hoisting, always declare variables at the top of their scope using `let` or `const` instead of `var`. This ensures that variables are block-scoped and not hoisted to the top of their containing function or global scope. Additionally, declare functions before they are called to avoid issues with function hoisting.
 
-```js
+```js live
 // Use let or const
 let x = 10;
 const y = 20;
+console.log(x, y); // Output: 10 20
 
 // Declare functions before calling them
 function myFunction() {
   console.log('Hello, world!');
 }
-myFunction();
+myFunction(); // Output: 'Hello, world!'
 ```
 
 ---
@@ -30,7 +31,11 @@ Hoisting is JavaScript's default behavior of moving declarations to the top of t
 
 `let` and `const` are block-scoped, meaning they are only accessible within the block they are defined. This prevents them from being hoisted to the top of the function or global scope, reducing the risk of unexpected behavior.
 
-```js
+```js live
+console.log(x); // undefined. (Hoisted but uninitialized, risk of unexpected behavior)
+console.log(y); // ReferenceError: Cannot access 'y' before initialization. (Not hoisted)
+console.log(z); // ReferenceError: Cannot access 'z' before initialization. (Not hoisted)
+
 // Avoid using var
 var x = 10; // Hoisted to the top of the function or global scope
 
@@ -43,7 +48,7 @@ const z = 30; // Block-scoped, not hoisted to the top
 
 To avoid confusion and potential errors, always declare your variables at the top of their scope. This makes it clear where the variables are coming from and ensures they are initialized before use.
 
-```js
+```js live
 function example() {
   let a = 1;
   const b = 2;
@@ -51,13 +56,14 @@ function example() {
   // Now use a and b
   console.log(a + b);
 }
+example();
 ```
 
 ### Declare functions before calling them
 
 Function declarations are hoisted, but function expressions are not. To avoid issues, always declare functions before calling them.
 
-```js
+```js live
 // Function declaration (hoisted)
 function myFunction() {
   console.log('Hello, world!');
@@ -75,10 +81,10 @@ anotherFunction(); // No issues here
 
 Using undeclared variables can lead to unexpected behavior due to hoisting. Always declare your variables before using them.
 
-```js
+```js live
 // Avoid this
 function badExample() {
-  x = 10; // x is not declared
+  x = 10; // ReferenceError in strict mode
   console.log(x);
 }
 
@@ -87,6 +93,9 @@ function goodExample() {
   let x = 10; // x is declared
   console.log(x);
 }
+
+goodExample();
+badExample();
 ```
 
 ## Further reading
diff --git a/questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/en-US.mdx b/questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/en-US.mdx
index 646f4e7..293b1e8 100644
--- a/questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/en-US.mdx
+++ b/questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/en-US.mdx
@@ -6,7 +6,7 @@ title: How do you access the index of an element in an array during iteration?
 
 To access the index of an element in an array during iteration, you can use methods like `forEach`, `map`, `for...of` with `entries`, or a traditional `for` loop. For example, using `forEach`:
 
-```js
+```js live
 const array = ['a', 'b', 'c'];
 array.forEach((element, index) => {
   console.log(index, element);
@@ -19,7 +19,7 @@ array.forEach((element, index) => {
 
 The `forEach` method executes a provided function once for each array element. The callback function takes three arguments: the current element, the index of the current element, and the array itself.
 
-```js
+```js live
 const array = ['a', 'b', 'c'];
 array.forEach((element, index) => {
   console.log(index, element);
@@ -30,7 +30,7 @@ array.forEach((element, index) => {
 
 The `map` method creates a new array populated with the results of calling a provided function on every element in the calling array. The callback function also takes three arguments: the current element, the index of the current element, and the array itself.
 
-```js
+```js live
 const array = ['a', 'b', 'c'];
 array.map((element, index) => {
   console.log(index, element);
@@ -41,7 +41,7 @@ array.map((element, index) => {
 
 The `for...of` loop can be combined with the `entries` method to access both the index and the element.
 
-```js
+```js live
 const array = ['a', 'b', 'c'];
 for (const [index, element] of array.entries()) {
   console.log(index, element);
@@ -52,7 +52,7 @@ for (const [index, element] of array.entries()) {
 
 A traditional `for` loop gives you direct access to the index.
 
-```js
+```js live
 const array = ['a', 'b', 'c'];
 for (let index = 0; index < array.length; index++) {
   console.log(index, array[index]);
diff --git a/questions/how-do-you-check-the-data-type-of-a-variable/en-US.mdx b/questions/how-do-you-check-the-data-type-of-a-variable/en-US.mdx
index 3a45b34..dc0df87 100644
--- a/questions/how-do-you-check-the-data-type-of-a-variable/en-US.mdx
+++ b/questions/how-do-you-check-the-data-type-of-a-variable/en-US.mdx
@@ -14,7 +14,7 @@ To check the data type of a variable in JavaScript, you can use the `typeof` ope
 
 The `typeof` operator is the most common way to check the data type of a variable in JavaScript. It returns a string indicating the type of the operand.
 
-```js
+```js live
 let str = 'Hello, world!';
 console.log(typeof str); // "string"
 
@@ -41,7 +41,7 @@ console.log(typeof sym); // "symbol"
 
 The `typeof` operator returns `"object"` for `null`, which can be misleading. To specifically check for `null`, you should use a strict equality comparison.
 
-```js
+```js live
 let n = null;
 console.log(n === null); // true
 ```
@@ -50,7 +50,7 @@ console.log(n === null); // true
 
 Arrays are a special type of object in JavaScript. To check if a variable is an array, you can use the `Array.isArray` method.
 
-```js
+```js live
 let arr = [1, 2, 3];
 console.log(Array.isArray(arr)); // true
 ```
@@ -59,7 +59,7 @@ console.log(Array.isArray(arr)); // true
 
 `NaN` (Not-a-Number) is a special numeric value in JavaScript. To check if a value is `NaN`, you can use the `Number.isNaN` method.
 
-```js
+```js live
 let notANumber = NaN;
 console.log(Number.isNaN(notANumber)); // true
 ```
@@ -68,7 +68,7 @@ console.log(Number.isNaN(notANumber)); // true
 
 To check if a variable is either `null` or `undefined`, you can use a combination of the `==` operator and the `typeof` operator.
 
-```js
+```js live
 let value = null;
 console.log(value == null); // true
 
diff --git a/questions/how-do-you-convert-a-string-to-a-number-in-javascript/en-US.mdx b/questions/how-do-you-convert-a-string-to-a-number-in-javascript/en-US.mdx
index 91f6212..c827371 100644
--- a/questions/how-do-you-convert-a-string-to-a-number-in-javascript/en-US.mdx
+++ b/questions/how-do-you-convert-a-string-to-a-number-in-javascript/en-US.mdx
@@ -14,60 +14,68 @@ In JavaScript, you can convert a string to a number using several methods. The m
 
 The `Number()` function converts a string to a number. It can handle both integer and floating-point numbers.
 
-```js
+```js live
 let str = '123';
-let num = Number(str); // 123
+let num = Number(str);
+console.log(num); // 123
 
 let floatStr = '123.45';
-let floatNum = Number(floatStr); // 123.45
+let floatNum = Number(floatStr);
+console.log(floatNum); // 123.45
 ```
 
 ### Using the `parseInt()` function
 
 The `parseInt()` function parses a string and returns an integer. It can also take a second argument, the radix (base) of the numeral system to be used.
 
-```js
+```js live
 let str = '123';
-let num = parseInt(str); // 123
+let num = parseInt(str);
+console.log(num); // 123
 
-let floatStr = '123.45';
-let floatNum = parseInt(floatStr); // 123
+let floatStr = '120.45';
+let floatNum = parseInt(floatStr);
+console.log(floatNum); // 120
 
 let binaryStr = '1010';
-let binaryNum = parseInt(binaryStr, 2); // 10
+let binaryNum = parseInt(binaryStr, 2);
+console.log(binaryNum); // 10
 ```
 
 ### Using the `parseFloat()` function
 
 The `parseFloat()` function parses a string and returns a floating-point number.
 
-```js
+```js live
 let floatStr = '123.45';
-let floatNum = parseFloat(floatStr); // 123.45
+let floatNum = parseFloat(floatStr);
+console.log(floatNum); // 123.45
 ```
 
 ### Using the unary plus operator (`+`)
 
 The unary plus operator can be used to convert a string to a number. It is a shorthand method and works for both integers and floating-point numbers.
 
-```js
+```js live
 let str = '123';
-let num = +str; // 123
+let num = +str;
+console.log(num); // 123
 
 let floatStr = '123.45';
-let floatNum = +floatStr; // 123.45
+let floatNum = +floatStr;
+console.log(floatNum); // 123.45
 ```
 
 ### Handling non-numeric strings
 
 If the string cannot be converted to a number, these methods will return `NaN` (Not-a-Number).
 
-```js
+```js live
 let invalidStr = 'abc';
-let num = Number(invalidStr); // NaN
-let intNum = parseInt(invalidStr); // NaN
-let floatNum = parseFloat(invalidStr); // NaN
-let unaryNum = +invalidStr; // NaN
+console.log(Number(invalidStr)); // NaN
+console.log(parseInt(invalidStr)); // NaN
+console.log(parseFloat(invalidStr)); // NaN
+console.log(+invalidStr); // NaN
 ```
 
 ## Further reading
diff --git a/questions/what-are-rest-parameters-and-how-are-they-used/en-US.mdx b/questions/what-are-rest-parameters-and-how-are-they-used/en-US.mdx
index a30038d..53c7832 100644
--- a/questions/what-are-rest-parameters-and-how-are-they-used/en-US.mdx
+++ b/questions/what-are-rest-parameters-and-how-are-they-used/en-US.mdx
@@ -6,7 +6,7 @@ title: What are rest parameters and how are they used?
 
 Rest parameters in JavaScript allow a function to accept an indefinite number of arguments as an array. They are denoted by three dots (`...`) followed by the name of the array. This feature is useful for functions that need to handle multiple arguments without knowing the exact number in advance.
 
-```js
+```js live
 function sum(...numbers) {
   return numbers.reduce((acc, curr) => acc + curr, 0);
 }
@@ -26,10 +26,12 @@ Rest parameters allow a function to accept an indefinite number of arguments as
 
 The syntax for rest parameters is straightforward. You place three dots before the last parameter in the function definition:
 
-```js
+```js live
 function myFunction(a, b, ...rest) {
   // 'rest' is an array containing the remaining arguments
+  console.log(rest); // [3, 4, 5]
 }
+myFunction(1, 2, 3, 4, 5);
 ```
 
 ### Usage
@@ -40,7 +42,7 @@ Rest parameters are useful in various scenarios, such as when you need to handle
 
 Here's a simple example of a function that sums an indefinite number of arguments:
 
-```js
+```js live
 function sum(...numbers) {
   return numbers.reduce((acc, curr) => acc + curr, 0);
 }
@@ -54,7 +56,7 @@ In this example, the `sum` function uses the rest parameter `numbers` to collect
 
 Rest parameters can also be used to combine multiple arrays into one:
 
-```js
+```js live
 function combineArrays(...arrays) {
   return arrays.flat();
 }
diff --git a/questions/what-are-template-literals-and-how-are-they-used/en-US.mdx b/questions/what-are-template-literals-and-how-are-they-used/en-US.mdx
index f5a786d..4deffb2 100644
--- a/questions/what-are-template-literals-and-how-are-they-used/en-US.mdx
+++ b/questions/what-are-template-literals-and-how-are-they-used/en-US.mdx
@@ -8,9 +8,9 @@ Template literals are a feature in JavaScript that allow for easier string inter
 
 Example:
 
-```js
-const name = 'John';
-const greeting = `Hello, ${name}!`;
+```js live
+const myName = 'John';
+const greeting = `Hello, ${myName}!`;
 console.log(greeting); // Output: Hello, John!
 ```
 
@@ -32,10 +32,10 @@ One of the most powerful features of template literals is string interpolation.
 
 Example:
 
-```js
-const name = 'John';
+```js live
+const myName = 'John';
 const age = 30;
-const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
+const greeting = `Hello, my name is ${myName} and I am ${age} years old.`;
 console.log(greeting); // Output: Hello, my name is John and I am 30 years old.
 ```
 
@@ -45,7 +45,7 @@ Template literals make it easy to create multi-line strings without the need for
 
 Example:
 
-```js
+```js live
 const multiLineString = `This is a string
 that spans multiple
 lines.`;
@@ -62,16 +62,16 @@ Tagged templates allow you to parse template literals with a function. The funct
 
 Example:
 
-```js
+```js live
 function tag(strings, ...values) {
-  console.log(strings); // Array of string literals
-  console.log(values); // Array of values
-  return 'Tagged template result';
+  console.log(strings); // Array of string literals: ["Hello, ", "!"]
+  console.log(values); // Array of values: ["John"]
+  return 'Custom tagged template result';
 }
 
-const name = 'John';
-const result = tag`Hello, ${name}!`;
-console.log(result); // Output: Tagged template result
+const myName = 'John';
+const result = tag`Hello, ${myName}!`;
+console.log(result); // Output: Custom tagged template result
 ```
 
 ### Nesting template literals
@@ -80,10 +80,10 @@ You can nest template literals within each other for more complex string constru
 
 Example:
 
-```js
-const name = 'John';
+```js live
+const myName = 'John';
 const age = 30;
-const nestedTemplate = `Name: ${name}, Age: ${age}, Info: ${`Name: ${name}, Age: ${age}`}`;
+const nestedTemplate = `Name: ${myName}, Age: ${age}, Info: ${`Name: ${myName}, Age: ${age}`}`;
 console.log(nestedTemplate);
 // Output: Name: John, Age: 30, Info: Name: John, Age: 30
 ```
diff --git a/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx b/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx
index 6ee515a..7c9df6b 100644
--- a/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx
+++ b/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx
@@ -24,7 +24,7 @@ Let's look at the difference in behavior between `var`, `let`, and `const`.
 
 Variables declared using the `var` keyword are scoped to the function in which they are created, or if created outside of any function, to the global object. `let` and `const` are _block scoped_, meaning they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop).
 
-```js
+```js live
 function foo() {
   // All variables are accessible within functions.
   var bar = 1;
@@ -36,6 +36,7 @@ function foo() {
   console.log(qux); // 3
 }
 
+foo(); // Prints each variable successfully
 console.log(bar); // ReferenceError: bar is not defined
 console.log(baz); // ReferenceError: baz is not defined
 console.log(qux); // ReferenceError: qux is not defined
@@ -43,7 +44,7 @@ console.log(qux); // ReferenceError: qux is not defined
 
 In the following example, `bar` is accessible outside of the `if` block but `baz` and `quz` are not.
 
-```js
+```js live
 if (true) {
   var bar = 1;
   let baz = 2;
@@ -61,7 +62,7 @@ console.log(qux); // ReferenceError: qux is not defined
 
 `var` and `let` variables can be initialized without a value but `const` declarations must be initialized.
 
-```js
+```js live
 var foo; // Ok
 let bar; // Ok
 const baz; // SyntaxError: Missing initializer in const declaration
@@ -71,10 +72,10 @@ const baz; // SyntaxError: Missing initializer in const declaration
 
 Redeclaring a variable with `var` will not throw an error, but `let` and `const` will.
 
-```js
+```js live
 var foo = 1;
-var foo = 2;
-console.log(foo); // 2
+var foo = 2; // Ok
+console.log(foo); // Should print 2, but SyntaxError from baz prevents the code executing.
 
 let baz = 3;
 let baz = 4; // Uncaught SyntaxError: Identifier 'baz' has already been declared
@@ -84,7 +85,7 @@ let baz = 4; // Uncaught SyntaxError: Identifier 'baz' has already been declared
 
 `let` and `const` differ in that `var` and `let` allow reassigning the variable's value while `const` does not.
 
-```js
+```js live
 var foo = 1;
 foo = 2; // This is fine.
 
@@ -99,14 +100,14 @@ baz = 6; // Uncaught TypeError: Assignment to constant variable.
 
 `var` ,`let` and `const` declared variables are all hoisted. `var` declared variables are auto-initialized with an `undefined` value. However, `let` and `const` variables are not initialized and accessing them before the declaration will result in a `ReferenceError` exception because they are in a "temporal dead zone" from the start of the block until the declaration is processed.
 
-```js
+```js live
 console.log(foo); // undefined
 var foo = 'foo';
 
-console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization
+console.log(baz); // ReferenceError: Cannot access 'baz' before initialization
 let baz = 'baz';
 
-console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization
+console.log(bar); // ReferenceError: Cannot access 'baz' before initialization
 const bar = 'bar';
 ```
 
diff --git a/questions/what-are-the-various-data-types-in-javascript/en-US.mdx b/questions/what-are-the-various-data-types-in-javascript/en-US.mdx
index 20239d2..2bb952e 100644
--- a/questions/what-are-the-various-data-types-in-javascript/en-US.mdx
+++ b/questions/what-are-the-various-data-types-in-javascript/en-US.mdx
@@ -38,73 +38,86 @@ JavaScript, like many programming languages, has a variety of data types to repr
 
 1. **Number**: Represents both integer and floating-point numbers. JavaScript only has one type of number.
 
-```js
+```js live
 let age = 25;
 let price = 99.99;
+console.log(price); // 99.99
 ```
 
 2. **String**: Represents sequences of characters. `Strings` can be enclosed in single quotes, double quotes, or backticks (for template literals).
 
-```js
-let name = 'John Doe';
+```js live
+let myName = 'John Doe';
 let greeting = 'Hello, world!';
-let message = `Welcome, ${name}!`;
+let message = `Welcome, ${myName}!`;
+console.log(message); // "Welcome, John Doe!"
 ```
 
 3. **Boolean**: Represents logical entities and can have two values: `true` or `false`.
 
-```js
+```js live
 let isActive = true;
 let isOver18 = false;
+console.log(isOver18); // false
 ```
 
 4. **Undefined**: A variable that has been declared but not assigned a value is of type `undefined`.
 
-```js
+```js live
 let user;
 console.log(user); // undefined
 ```
 
 5. **Null**: Represents the intentional absence of any object value. It is a primitive value and is treated as a falsy value.
 
-```js
+```js live
 let user = null;
+console.log(user); // null
+if (!user) {
+  console.log('user is a falsy value');
+}
 ```
 
 6. **Symbol**: A unique and immutable `primitive` value, typically used as the key of an object property.
 
-```js
+```js live
 let sym1 = Symbol();
 let sym2 = Symbol('description');
+console.log(sym1); // Symbol()
+console.log(sym2); // Symbol(description)
 ```
 
 7. **BigInt**: Used for representing integers with arbitrary precision, useful for working with very large numbers.
 
-```js
+```js live
 let bigNumber = BigInt(9007199254740991);
 let anotherBigNumber = 1234567890123456789012345678901234567890n;
+console.log(bigNumber); // 9007199254740991n
+console.log(anotherBigNumber); // 1234567890123456789012345678901234567890n
 ```
 
 ### Non-primitive (reference) data types
 
 1. **Object**: It is used to store collections of data and more complex entities. `Objects` are created using curly braces `{}`.
 
-```js
+```js live
 let person = {
   name: 'Alice',
   age: 30,
 };
+console.log(person); // {name: "Alice", age: 30}
 ```
 
 2. **Array**: A special type of object used for storing ordered collections of data. `Arrays` are created using square brackets `[]`.
 
-```js
+```js live
 let numbers = [1, 2, 3, 4, 5];
+console.log(numbers);
 ```
 
 3. **Function**: `Functions` in JavaScript are `objects`. They can be defined using function declarations or expressions.
 
-```js
+```js live
 function greet() {
   console.log('Hello!');
 }
@@ -112,40 +125,47 @@ function greet() {
 let add = function (a, b) {
   return a + b;
 };
+
+greet(); // "Hello!"
+console.log(add(2, 3)); // 5
 ```
 
 4. **Date**: Represents dates and times. The `Date` object is used to work with dates.
 
-```js
+```js live
 let today = new Date();
+console.log(today);
 ```
 
 5. **RegExp**: Represents regular expressions, which are patterns used to match character combinations in strings.
 
-```js
+```js live
 let pattern = /abc/;
+console.log(pattern);
 ```
 
 6. **Map**: A collection of keyed data items, similar to an `object` but allows keys of any type.
 
-```js
+```js live
 let map = new Map();
 map.set('key1', 'value1');
+console.log(map);
 ```
 
 7. **Set**: A collection of unique values.
 
-```js
+```js live
 let set = new Set();
 set.add(1);
 set.add(2);
+console.log(set);
 ```
 
 ## Determining data types
 
 JavaScript is a dynamically-typed language, which means variables can hold values of different data types over time. The `typeof` operator can be used to determine the data type of a value or variable.
 
-```js
+```js live
 console.log(typeof 42); // "number"
 console.log(typeof 'hello'); // "string"
 console.log(typeof true); // "boolean"
@@ -164,9 +184,12 @@ console.log(typeof function () {}); // "function"
 
 JavaScript often performs type coercion, converting values from one type to another, which can lead to unexpected results.
 
-```js
-let result = '5' + 2; // '52' (string concatenation)
-let difference = '5' - 2; // 3 (numeric subtraction)
+```js live
+let result = '5' + 2;
+console.log(result, typeof result); // "52 string" (string concatenation)
+
+let difference = '5' - 2;
+console.log(difference, typeof difference); // 3 "number" (numeric subtraction)
 ```
 
 In the first example, since strings can be concatenated with the `+` operator, the number is converted into a string and the two strings are concatenated together. In the second example, strings cannot work with the minus operator (`-`), but two numbers can be minused, so the string is first converted into a number and the result is the difference.
diff --git a/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx b/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx
index f824108..098fc79 100644
--- a/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx
+++ b/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx
@@ -18,28 +18,28 @@ title: What is the difference between `==` and `===` in JavaScript?
 
 The `==` operator checks for equality between two values but performs type coercion if the values are of different types. This means that JavaScript will attempt to convert the values to a common type before making the comparison.
 
-```js
-42 == '42'; // true
-0 == false; // true
-null == undefined; // true
-[] == false; // true
-'' == false; // true
+```js live
+console.log(42 == '42'); // true
+console.log(0 == false); // true
+console.log(null == undefined); // true
+console.log([] == false); // true
+console.log('' == false); // true
 ```
 
 In these examples, JavaScript converts the operands to the same type before making the comparison. For example, `42 == '42'` is true because the string `'42'` is converted to the number `42` before comparison.
 
 However, when using `==`, unintuitive results can happen:
 
-```js
-1 == [1]; // true
-0 == ''; // true
-0 == '0'; // true
-'' == '0'; // false
+```js live
+console.log(1 == [1]); // true
+console.log(0 == ''); // true
+console.log(0 == '0'); // true
+console.log('' == '0'); // false
 ```
 
 As a general rule of thumb, never use the `==` operator, except for convenience when comparing against `null` or `undefined`, where `a == null` will return `true` if `a` is `null` or `undefined`.
 
-```js
+```js live
 var a = null;
 console.log(a == null); // true
 console.log(a == undefined); // true
@@ -49,7 +49,7 @@ console.log(a == undefined); // true
 
 The `===` operator, also known as the strict equality operator, checks for equality between two values without performing type coercion. This means that both the value and the type must be the same for the comparison to return true.
 
-```js
+```js live
 console.log(42 === '42'); // false
 console.log(0 === false); // false
 console.log(null === undefined); // false
@@ -59,7 +59,7 @@ console.log('' === false); // false
 
 For these comparisons, no type conversion is performed, so the statement returns `false` if the types are different. For instance, `42 === '42'` is `false` because the types (number and string) are different.
 
-```js
+```js live
 // Comparison with type coercion (==)
 console.log(42 == '42'); // true
 console.log(0 == false); // true
diff --git a/questions/what-is-the-purpose-of-the-break-and-continue-statements/en-US.mdx b/questions/what-is-the-purpose-of-the-break-and-continue-statements/en-US.mdx
index b3aff52..f01ee3d 100644
--- a/questions/what-is-the-purpose-of-the-break-and-continue-statements/en-US.mdx
+++ b/questions/what-is-the-purpose-of-the-break-and-continue-statements/en-US.mdx
@@ -6,7 +6,7 @@ title: What is the purpose of the `break` and `continue` statements?
 
 The `break` statement is used to exit a loop or switch statement prematurely, while the `continue` statement skips the current iteration of a loop and proceeds to the next iteration. For example, in a `for` loop, `break` will stop the loop entirely, and `continue` will skip to the next iteration.
 
-```js
+```js live
 for (let i = 0; i < 10; i++) {
   if (i === 5) break; // exits the loop when i is 5
   console.log(i);
@@ -28,7 +28,7 @@ The `break` statement is used to exit a loop or a switch statement before it has
 
 #### Example in a loop
 
-```js
+```js live
 for (let i = 0; i < 10; i++) {
   if (i === 5) break; // exits the loop when i is 5
   console.log(i);
@@ -38,18 +38,22 @@ for (let i = 0; i < 10; i++) {
 
 #### Example in a switch statement
 
-```js
-switch (day) {
-  case 1:
-    console.log('Monday');
-    break;
-  case 2:
-    console.log('Tuesday');
-    break;
-  // other cases
-  default:
-    console.log('Invalid day');
+```js live
+function printDayOfWeek(day) {
+  switch (day) {
+    case 1:
+      console.log('Monday');
+      break;
+    case 2:
+      console.log('Tuesday');
+      break;
+    // other cases
+    default:
+      console.log('Invalid day');
+  }
 }
+printDayOfWeek(2); // Tuesday
+printDayOfWeek('myDay'); // Invalid day
 ```
 
 ### `continue` statement
@@ -58,7 +62,7 @@ The `continue` statement is used to skip the current iteration of a loop and pro
 
 #### Example in a loop
 
-```js
+```js live
 for (let i = 0; i < 10; i++) {
   if (i === 5) continue; // skips the iteration when i is 5
   console.log(i);
diff --git a/questions/what-is-the-purpose-of-the-switch-statement/en-US.mdx b/questions/what-is-the-purpose-of-the-switch-statement/en-US.mdx
index 7903802..0f65637 100644
--- a/questions/what-is-the-purpose-of-the-switch-statement/en-US.mdx
+++ b/questions/what-is-the-purpose-of-the-switch-statement/en-US.mdx
@@ -57,7 +57,7 @@ switch (expression) {
 
 Here is an example of a `switch` statement in action:
 
-```js
+```js live
 let fruit = 'apple';
 
 switch (fruit) {
@@ -81,7 +81,7 @@ In this example, the output will be `Apple is red.` because the value of `fruit`
 
 If the `break` statement is omitted, the `switch` statement will continue to execute the subsequent `case` blocks until it encounters a `break` or the end of the `switch` block. This is known as fall-through behavior.
 
-```js
+```js live
 let day = 2;
 
 switch (day) {
diff --git a/questions/what-is-the-spread-operator-and-how-is-it-used/en-US.mdx b/questions/what-is-the-spread-operator-and-how-is-it-used/en-US.mdx
index 5df5754..99e38a6 100644
--- a/questions/what-is-the-spread-operator-and-how-is-it-used/en-US.mdx
+++ b/questions/what-is-the-spread-operator-and-how-is-it-used/en-US.mdx
@@ -6,14 +6,16 @@ title: What is the spread operator and how is it used?
 
 The spread operator, represented by three dots (`...`), is used in JavaScript to expand iterable objects like arrays or strings into individual elements. It can also be used to spread object properties. For example, you can use it to combine arrays, copy arrays, or pass array elements as arguments to a function.
 
-```js
+```js live
 const arr1 = [1, 2, 3];
 const arr2 = [4, 5, 6];
-const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
+const combined = [...arr1, ...arr2];
+console.log(combined); // [1, 2, 3, 4, 5, 6]
 
 const obj1 = { a: 1, b: 2 };
 const obj2 = { c: 3, d: 4 };
-const combinedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }
+const combinedObj = { ...obj1, ...obj2 };
+console.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }
 ```
 
 ---
@@ -24,60 +26,65 @@ const combinedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }
 
 The spread operator can be used to expand elements of an array into individual elements. This is useful for combining arrays or copying arrays.
 
-```js
+```js live
 const arr1 = [1, 2, 3];
 const arr2 = [4, 5, 6];
-const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
+const combined = [...arr1, ...arr2];
+console.log(combined); // [1, 2, 3, 4, 5, 6]
 ```
 
 ### Copying arrays
 
 You can create a shallow copy of an array using the spread operator.
 
-```js
+```js live
 const original = [1, 2, 3];
-const copy = [...original]; // [1, 2, 3]
+const copy = [...original];
+console.log(copy); // [1, 2, 3]
 ```
 
 ### Passing array elements as function arguments
 
 The spread operator can be used to pass elements of an array as arguments to a function.
 
-```js
+```js live
 function sum(a, b, c) {
   return a + b + c;
 }
 
 const numbers = [1, 2, 3];
-const result = sum(...numbers); // 6
+console.log(sum(...numbers)); // 6
 ```
 
 ### Expanding objects
 
 The spread operator can also be used to expand properties of an object. This is useful for combining objects or copying objects.
 
-```js
+```js live
 const obj1 = { a: 1, b: 2 };
 const obj2 = { c: 3, d: 4 };
-const combinedObj = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }
+const combinedObj = { ...obj1, ...obj2 };
+console.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }
 ```
 
 ### Copying objects
 
 You can create a shallow copy of an object using the spread operator.
 
-```js
+```js live
 const originalObj = { a: 1, b: 2 };
-const copyObj = { ...originalObj }; // { a: 1, b: 2 }
+const copyObj = { ...originalObj };
+console.log(copyObj); // { a: 1, b: 2 }
 ```
 
 ### Using with strings
 
 The spread operator can also be used to expand a string into individual characters.
 
-```js
+```js live
 const str = 'hello';
-const chars = [...str]; // ['h', 'e', 'l', 'l', 'o']
+const chars = [...str];
+console.log(chars); // ['h', 'e', 'l', 'l', 'o']
 ```
 
 ## Further reading
diff --git a/questions/what-is-the-ternary-operator-and-how-is-it-used/en-US.mdx b/questions/what-is-the-ternary-operator-and-how-is-it-used/en-US.mdx
index d67e1ac..62e8f9a 100644
--- a/questions/what-is-the-ternary-operator-and-how-is-it-used/en-US.mdx
+++ b/questions/what-is-the-ternary-operator-and-how-is-it-used/en-US.mdx
@@ -30,7 +30,7 @@ condition ? expr1 : expr2;
 
 Here is a basic example of the ternary operator:
 
-```js
+```js live
 let age = 18;
 let canVote = age >= 18 ? 'Yes' : 'No';
 console.log(canVote); // Output: Yes
@@ -42,7 +42,7 @@ In this example, the condition `age >= 18` is evaluated. If it is `true`, the st
 
 You can also nest ternary operators, although it can make the code harder to read:
 
-```js
+```js live
 let score = 85;
 let grade =
   score >= 90
diff --git a/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx b/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx
index 2b2f372..e6a7f0d 100644
--- a/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx
+++ b/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx
@@ -10,7 +10,7 @@ There are multiple ways to iterate over object properties as well as arrays in J
 
 The `for...in` loop iterates over all enumerable properties of an object, including inherited enumerable properties. So it is important to have a check if you only want to iterate over object's own properties
 
-```js
+```js live
 const obj = {
   a: 1,
   b: 2,
@@ -29,7 +29,7 @@ for (const key in obj) {
 
 `Object.keys()` returns an array of the object's own enumerable property names. You can then use a for...of loop or forEach to iterate over this array.
 
-```js
+```js live
 const obj = {
   a: 1,
   b: 2,
@@ -45,7 +45,7 @@ Most common ways to iterate over array are using `for` loop and `Array.prototype
 
 **Using `for` loop**
 
-```js
+```js live
 let array = [1, 2, 3, 4, 5, 6];
 for (let index = 0; index < array.length; index++) {
   console.log(array[index]);
@@ -54,7 +54,7 @@ for (let index = 0; index < array.length; index++) {
 
 **Using `Array.prototype.forEach` method**
 
-```js
+```js live
 let array = [1, 2, 3, 4, 5, 6];
 array.forEach((number, index) => {
   console.log(`${number} at index ${index}`);
@@ -65,7 +65,7 @@ array.forEach((number, index) => {
 
 This method is the newest and most convenient way to iterate over arrays. It automatically iterates over each element without requiring you to manage the index.
 
-```js
+```js live
 const numbers = [1, 2, 3, 4, 5];
 
 for (const number of numbers) {
@@ -89,7 +89,12 @@ Iterating over object properties and array is very common in JavaScript and we h
 
 This loop iterates over all **enumerable** properties of an object, including those inherited from its prototype chain.
 
-```js
+```js live
+const obj = {
+  status: 'working',
+  hoursWorked: 3,
+};
+
 for (const property in obj) {
   console.log(property);
 }
@@ -97,7 +102,12 @@ for (const property in obj) {
 
 Since `for...in` statement iterates over all the object's **enumerable** properties (including inherited enumerable properties). Hence most of the time you should check whether the property exists on directly on the object via `Object.hasOwn(object, property)` before using it.
 
-```js
+```js live
+const obj = {
+  status: 'working',
+  hoursWorked: 3,
+};
+
 for (const property in obj) {
   if (Object.hasOwn(obj, property)) {
     console.log(property);
@@ -111,7 +121,12 @@ Note that `obj.hasOwnProperty()` is not recommended because it doesn't work for
 
 `Object.keys()` is a static method that will return an array of all the enumerable property names of the object that you pass it. Since `Object.keys()` returns an array, you can also use the array iteration approaches listed below to iterate through it.
 
-```js
+```js live
+const obj = {
+  status: 'working',
+  hoursWorked: 3,
+};
+
 Object.keys(obj).forEach((property) => {
   console.log(property);
 });
@@ -121,7 +136,7 @@ Object.keys(obj).forEach((property) => {
 
 This method returns an array of an object's enumerable properties in `[key, value]` pairs.
 
-```js
+```js live
 const obj = { a: 1, b: 2, c: 3 };
 Object.entries(obj).forEach(([key, value]) => {
   console.log(`${key}: ${value}`);
@@ -130,7 +145,8 @@ Object.entries(obj).forEach(([key, value]) => {
 
 ### `Object.getOwnPropertyNames()`
 
-```js
+```js live
+const obj = { a: 1, b: 2, c: 3 };
 Object.getOwnPropertyNames(obj).forEach((property) => {
   console.log(property);
 });
@@ -142,7 +158,8 @@ Object.getOwnPropertyNames(obj).forEach((property) => {
 
 ### `for` loop
 
-```js
+```js live
+const arr = [1, 2, 3, 4, 5];
 for (var i = 0; i < arr.length; i++) {
   console.log(arr[i]);
 }
@@ -150,7 +167,8 @@ for (var i = 0; i < arr.length; i++) {
 
 A common pitfall here is that `var` is in the function scope and not the block scope and most of the time you would want block scoped iterator variable. ES2015 introduces `let` which has block scope and it is recommended to use `let` over `var`.
 
-```js
+```js live
+const arr = [1, 2, 3, 4, 5];
 for (let i = 0; i < arr.length; i++) {
   console.log(arr[i]);
 }
@@ -158,9 +176,10 @@ for (let i = 0; i < arr.length; i++) {
 
 ### `Array.prototype.forEach()`
 
-```js
+```js live
+const arr = [1, 2, 3, 4, 5];
 arr.forEach((element, index) => {
-  console.log(element, index);
+  console.log(`${element} at index ${index}`);
 });
 ```
 
@@ -168,7 +187,8 @@ The `Array.prototype.forEach()` method can be more convenient at times if you do
 
 ### `for...of` statement
 
-```js
+```js live
+const arr = [1, 2, 3, 4, 5];
 for (let element of arr) {
   console.log(element);
 }
@@ -180,11 +200,11 @@ Most of the time, prefer the `.forEach` method, but it really depends on what yo
 
 Also, when using the `for...of` statement, if you need to access both the index and value of each array element, you can do so with ES2015 `Array.prototype.entries()` method:
 
-```js
+```js live
 const arr = ['a', 'b', 'c'];
 
 for (let [index, elem] of arr.entries()) {
-  console.log(index, ': ', elem);
+  console.log(index, elem);
 }
 ```
 
diff --git a/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx b/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx
index 5bc5d61..d3837ba 100644
--- a/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx
+++ b/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx
@@ -17,18 +17,18 @@ subtitle: How would you go about checking for any of these states?
 
 **Undeclared** variables are created when you assign a value to an identifier that is not previously created using `var`, `let` or `const`. Undeclared variables will be defined globally, outside of the current scope. In strict mode, a `ReferenceError` will be thrown when you try to assign to an undeclared variable. Undeclared variables are bad in the same way that global variables are bad. Avoid them at all cost! To check for them, wrap its usage in a `try`/`catch` block.
 
-```js
+```js live
 function foo() {
   x = 1; // Throws a ReferenceError in strict mode
 }
 
 foo();
-console.log(x); // 1
+console.log(x); // 1 (if not in strict mode)
 ```
 
 Using the `typeof` operator on undeclared variables will give `'undefined'`.
 
-```js
+```js live
 console.log(typeof y === 'undefined'); // true
 ```
 
@@ -36,7 +36,7 @@ console.log(typeof y === 'undefined'); // true
 
 A variable that is `undefined` is a variable that has been declared, but not assigned a value. It is of type `undefined`. If a function does not return any value as the result of executing it is assigned to a variable, the variable also has the value of `undefined`. To check for it, compare using the strict equality (`===`) operator or `typeof` which will give the `'undefined'` string. Note that you should not be using the loose equality operator (`==`) to check, as it will also return `true` if the value is `null`.
 
-```js
+```js live
 let foo;
 console.log(foo); // undefined
 console.log(foo === undefined); // true
@@ -53,7 +53,7 @@ console.log(baz); // undefined
 
 A variable that is `null` will have been explicitly assigned to the `null` value. It represents no value and is different from `undefined` in the sense that it has been explicitly assigned. To check for `null,` simply compare using the strict equality operator. Note that like the above, you should not be using the loose equality operator (`==`) to check, as it will also return `true` if the value is `undefined`.
 
-```js
+```js live
 const foo = null;
 console.log(foo === null); // true
 console.log(typeof foo === 'object'); // true

From 86b341e338b9fcd840c6bf210d045bf6368c727c Mon Sep 17 00:00:00 2001
From: tahachm <97478750+tahachm@users.noreply.github.com>
Date: Sun, 9 Mar 2025 06:31:45 +0500
Subject: [PATCH 02/26] Executable coding blocks production-readiness - PR 2
 (#22)

Co-authored-by: GitHub Actions <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com>
---
 README.md                                     | 259 +++++++++++-------
 .../en-US.mdx                                 |  25 +-
 .../en-US.mdx                                 |   6 +-
 .../en-US.mdx                                 |   8 +-
 .../en-US.mdx                                 |  12 +-
 .../en-US.mdx                                 |  16 +-
 .../en-US.mdx                                 |   8 +-
 .../en-US.mdx                                 |   6 +-
 .../en-US.mdx                                 |  44 +--
 .../en-US.mdx                                 |   6 +-
 .../en-US.mdx                                 |  13 +-
 .../en-US.mdx                                 |  11 +-
 .../en-US.mdx                                 |  21 +-
 .../en-US.mdx                                 |   4 +-
 .../en-US.mdx                                 |  26 +-
 .../en-US.mdx                                 |   4 +-
 .../en-US.mdx                                 |  42 +--
 .../en-US.mdx                                 |   8 +-
 .../en-US.mdx                                 |  29 +-
 .../en-US.mdx                                 |  13 +-
 .../en-US.mdx                                 |  12 +-
 .../en-US.mdx                                 |  16 +-
 .../en-US.mdx                                 |   8 +-
 .../en-US.mdx                                 |  30 +-
 .../en-US.mdx                                 |  38 ++-
 .../en-US.mdx                                 |  44 +--
 .../en-US.mdx                                 |  95 ++++---
 .../en-US.mdx                                 |  12 +-
 .../en-US.mdx                                 |  20 +-
 .../en-US.mdx                                 |  14 +-
 .../en-US.mdx                                 |  16 +-
 .../en-US.mdx                                 |  24 +-
 .../en-US.mdx                                 |  11 +-
 .../en-US.mdx                                 |  10 +-
 .../en-US.mdx                                 |  12 +-
 35 files changed, 558 insertions(+), 365 deletions(-)

diff --git a/README.md b/README.md
index 9647747..6fbbefc 100644
--- a/README.md
+++ b/README.md
@@ -550,7 +550,7 @@ Here's a table summarizing the 3 ways of loading `<script>`s in a HTML document.
 
 Assuming we have a function `add`, the function can be invoked using `.call` and `.apply` in the following manner:
 
-```js
+```js live
 function add(a, b) {
   return a + b;
 }
@@ -599,7 +599,7 @@ The main advantage of using an arrow function as a method inside a constructor i
 
 For example, let's say we have a `Person` constructor that takes a first name as an argument has two methods to `console.log()` that name, one as a regular function and one as an arrow function:
 
-```js
+```js live
 const Person = function (name) {
   this.name = name;
   this.sayName1 = function () {
@@ -657,7 +657,7 @@ This behavior simulates classical inheritance, but it is really more of [delegat
 
 Here's an example of prototypal inheritance:
 
-```js
+```js live
 // Parent object constructor.
 function Animal(name) {
   this.name = name;
@@ -740,7 +740,7 @@ If you try to invoke a function expression before it is declared, you will get a
 
 Function declarations can be called in the enclosing scope even before they are declared.
 
-```js
+```js live
 foo(); // 'FOOOOO'
 function foo() {
   console.log('FOOOOO');
@@ -749,7 +749,7 @@ function foo() {
 
 Function expressions if called before they are declared will result in an error.
 
-```js
+```js live
 foo(); // Uncaught TypeError: foo is not a function
 var foo = function () {
   console.log('FOOOOO');
@@ -758,11 +758,13 @@ var foo = function () {
 
 Another key difference is in the scope of the function name. Function expressions can be named by defining it after the `function` and before the parenthesis. However when using named function expressions, the function name is only accessible within the function itself. Trying to access it outside will result in an error or `undefined`.
 
-```js
+```js live
 const myFunc = function namedFunc() {
   console.log(namedFunc); // Works
 };
-console.log(namedFunc); // undefined
+
+myFunc(); // Runs the function and logs the function reference
+console.log(namedFunc); // ReferenceError: namedFunc is not defined
 ```
 
 **Note**: The examples uses `var` due to legacy reasons. Function expressions can be defined using `let` and `const` and the key difference is in the hoisting behavior of those keywords.
@@ -892,15 +894,11 @@ A higher-order function is any function that takes one or more functions as argu
 
 Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is `Array.prototype.map()`, which takes an array and a function as arguments. `Array.prototype.map()` then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are `Array.prototype.forEach()`, `Array.prototype.filter()`, and `Array.prototype.reduce()`. A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. `Function.prototype.bind()` is an example that returns another function.
 
-Imagine a scenario where we have an array of names that we need to transform to uppercase.
+Imagine a scenario where we have an array of names that we need to transform to uppercase. The imperative way will be as such:
 
-```js
+```js live
 const names = ['irish', 'daisy', 'anna'];
-```
-
-The imperative way will be as such:
 
-```js
 function transformNamesToUppercase(names) {
   const results = [];
   for (let i = 0; i < names.length; i++) {
@@ -909,17 +907,19 @@ function transformNamesToUppercase(names) {
   return results;
 }
 
-transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
+console.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']
 ```
 
 Using `Array.prototype.map(transformerFn)` makes the code shorter and more declarative.
 
-```js
+```js live
+const names = ['irish', 'daisy', 'anna'];
+
 function transformNamesToUppercase(names) {
   return names.map((name) => name.toUpperCase());
 }
 
-transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
+console.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']
 ```
 
 <!-- Update here: /questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx -->
@@ -952,28 +952,47 @@ class Person {
 }
 ```
 
-For simple constructors, they look pretty similar. The main difference in the constructor comes when using inheritance. If we want to create a `Student` class that subclasses `Person` and add a `studentId` field, this is what we have to do in addition to the above.
+For simple constructors, they look pretty similar. The main difference in the constructor comes when using inheritance. If we want to create a `Student` class that subclasses `Person` and add a `studentId` field, this is what we have to do.
 
-```js
-// ES5 function constructor
-function Student(name, studentId) {
+```js live
+// ES5 inheritance
+// Superclass
+function Person1(name) {
+  this.name = name;
+}
+
+// Subclass
+function Student1(name, studentId) {
   // Call constructor of superclass to initialize superclass-derived members.
-  Person.call(this, name);
+  Person1.call(this, name);
 
   // Initialize subclass's own members.
   this.studentId = studentId;
 }
+Student1.prototype = Object.create(Person1.prototype);
+Student1.prototype.constructor = Student1;
 
-Student.prototype = Object.create(Person.prototype);
-Student.prototype.constructor = Student;
+const student1 = new Student1('John', 1234);
+console.log(student1.name, student1.studentId); // "John" 1234
 
-// ES2015 Class
-class Student extends Person {
+// ES2015 inheritance
+// Superclass
+class Person2 {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+// Subclass
+class Student2 extends Person2 {
   constructor(name, studentId) {
     super(name);
     this.studentId = studentId;
   }
 }
+
+const student2 = new Student2('Alice', 5678);
+console.log(student2.name, student2.studentId); // "Alice" 5678
 ```
 
 It's much more verbose to use inheritance in ES5 and the ES2015 version is easier to understand and remember.
@@ -1100,7 +1119,7 @@ Overall, the benefits outweigh the disadvantages and there is not really a need
 
 Synchronous functions are blocking while asynchronous functions are not. In synchronous functions, statements complete before the next statement is run. As a result, programs containing only synchronous code are evaluated exactly in order of the statements. The execution of the program is paused if one of the statements take a very long time.
 
-```js
+```js live
 function sum(a, b) {
   console.log('Inside sum function');
   return a + b;
@@ -1588,7 +1607,7 @@ There are also other inbuilt methods available which are suitable for specific s
 
 **Rest syntax** is the opposite of what spread syntax does. It collects a variable number of arguments into an array. This is often used in function parameters to handle a dynamic number of arguments.
 
-```js
+```js live
 // Using rest syntax in a function
 function sum(...numbers) {
   return numbers.reduce((total, num) => total + num, 0);
@@ -2861,7 +2880,7 @@ console.log(sum(...numbers)); // Output: 6
 
 **Rest syntax** is the opposite of what spread syntax does. It collects a variable number of arguments into an array. This is often used in function parameters to handle a dynamic number of arguments.
 
-```js
+```js live
 // Using rest syntax in a function
 function sum(...numbers) {
   return numbers.reduce((total, num) => total + num, 0);
@@ -2957,7 +2976,7 @@ If you try to invoke a function expression before it is declared, you will get a
 
 Function declarations can be called in the enclosing scope even before they are declared.
 
-```js
+```js live
 foo(); // 'FOOOOO'
 function foo() {
   console.log('FOOOOO');
@@ -2966,7 +2985,7 @@ function foo() {
 
 Function expressions if called before they are declared will result in an error.
 
-```js
+```js live
 foo(); // Uncaught TypeError: foo is not a function
 var foo = function () {
   console.log('FOOOOO');
@@ -2975,11 +2994,13 @@ var foo = function () {
 
 Another key difference is in the scope of the function name. Function expressions can be named by defining it after the `function` and before the parenthesis. However when using named function expressions, the function name is only accessible within the function itself. Trying to access it outside will result in an error or `undefined`.
 
-```js
+```js live
 const myFunc = function namedFunc() {
   console.log(namedFunc); // Works
 };
-console.log(namedFunc); // undefined
+
+myFunc(); // Runs the function and logs the function reference
+console.log(namedFunc); // ReferenceError: namedFunc is not defined
 ```
 
 **Note**: The examples uses `var` due to legacy reasons. Function expressions can be defined using `let` and `const` and the key difference is in the hoisting behavior of those keywords.
@@ -3045,7 +3066,7 @@ var nonHoistedFunction = function () {
 
 Assuming we have a function `add`, the function can be invoked using `.call` and `.apply` in the following manner:
 
-```js
+```js live
 function add(a, b) {
   return a + b;
 }
@@ -3068,7 +3089,7 @@ console.log(add.apply(null, [1, 2])); // 3
 
 Arrow functions provide a concise syntax for writing functions in JavaScript. They are particularly useful for maintaining the `this` context within methods and callbacks. For example, in an event handler or array method like `map`, arrow functions can simplify the code and avoid issues with `this` binding.
 
-```javascript
+```js live
 const numbers = [1, 2, 3];
 const doubled = numbers.map((n) => n * 2);
 console.log(doubled); // [2, 4, 6]
@@ -3113,15 +3134,11 @@ A higher-order function is any function that takes one or more functions as argu
 
 Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is `Array.prototype.map()`, which takes an array and a function as arguments. `Array.prototype.map()` then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are `Array.prototype.forEach()`, `Array.prototype.filter()`, and `Array.prototype.reduce()`. A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. `Function.prototype.bind()` is an example that returns another function.
 
-Imagine a scenario where we have an array of names that we need to transform to uppercase.
+Imagine a scenario where we have an array of names that we need to transform to uppercase. The imperative way will be as such:
 
-```js
+```js live
 const names = ['irish', 'daisy', 'anna'];
-```
-
-The imperative way will be as such:
 
-```js
 function transformNamesToUppercase(names) {
   const results = [];
   for (let i = 0; i < names.length; i++) {
@@ -3130,17 +3147,19 @@ function transformNamesToUppercase(names) {
   return results;
 }
 
-transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
+console.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']
 ```
 
 Using `Array.prototype.map(transformerFn)` makes the code shorter and more declarative.
 
-```js
+```js live
+const names = ['irish', 'daisy', 'anna'];
+
 function transformNamesToUppercase(names) {
   return names.map((name) => name.toUpperCase());
 }
 
-transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
+console.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']
 ```
 
 <!-- Update here: /questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx -->
@@ -3157,12 +3176,11 @@ transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
 
 A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. They are commonly used for asynchronous operations like handling events, making API calls, or reading files. For example:
 
-```js
+```js live
 function fetchData(callback) {
-  setTimeout(() => {
-    const data = { name: 'John Doe' };
-    callback(data);
-  }, 1000);
+  // assume an asynchronous operation to fetch data
+  const data = { name: 'John Doe' };
+  callback(data);
 }
 
 function handleData(data) {
@@ -3226,13 +3244,15 @@ console.log(double); // [2, 4, 6]
 
 Recursion is a programming technique where a function calls itself to solve a problem. In JavaScript, recursion is used to solve problems that can be broken down into smaller, similar sub-problems. A base case is essential to stop the recursive calls and prevent infinite loops. For example, calculating the factorial of a number can be done using recursion:
 
-```js
+```js live
 function factorial(n) {
   if (n === 0) {
     return 1;
   }
   return n * factorial(n - 1);
 }
+
+console.log(factorial(4)); // Output: 24
 ```
 
 <!-- Update here: /questions/what-is-recursion-and-how-is-it-used-in-javascript/en-US.mdx -->
@@ -3249,7 +3269,7 @@ function factorial(n) {
 
 Default parameters in JavaScript allow you to set default values for function parameters if no value or `undefined` is passed. This helps avoid `undefined` values and makes your code more robust. You can define default parameters by assigning a value to the parameter in the function definition.
 
-```js
+```js live
 function greet(name = 'Guest') {
   console.log(`Hello, ${name}!`);
 }
@@ -3306,7 +3326,7 @@ Creating objects in JavaScript offers several methods:
 
 Dot notation and bracket notation are two ways to access properties of an object in JavaScript. Dot notation is more concise and readable but can only be used with valid JavaScript identifiers. Bracket notation is more flexible and can be used with property names that are not valid identifiers, such as those containing spaces or special characters.
 
-```js
+```js live
 const obj = { name: 'Alice', 'favorite color': 'blue' };
 
 // Dot notation
@@ -3344,7 +3364,7 @@ There are several methods to iterate over an array in JavaScript. The most commo
 
 To add elements to an array, you can use methods like `push`, `unshift`, or `splice`. To remove elements, you can use `pop`, `shift`, or `splice`. To update elements, you can directly access the array index and assign a new value.
 
-```js
+```js live
 let arr = [1, 2, 3];
 
 // Add elements
@@ -3359,8 +3379,11 @@ arr.splice(1, 1); // [1, 2, 3]
 
 // Update elements
 arr[1] = 5; // [1, 5, 3]
+console.log(arr); // Final state: [1, 5, 3]
 ```
 
+**Note**: If you try to `console.log(arr)` after each operation in some environments (like Chrome DevTools), you may only see the final state of `arr`. This happens because the console sometimes keeps a live reference to the array instead of logging its state at the exact moment. To see intermediate states properly, store snapshots using `console.log([...arr])` or print values immediately after each operation.
+
 <!-- Update here: /questions/how-do-you-add-remove-and-update-elements-in-an-array/en-US.mdx -->
 
 <br>
@@ -3375,17 +3398,20 @@ arr[1] = 5; // [1, 5, 3]
 
 To copy an object or an array in JavaScript, you can use several methods. For shallow copies, you can use the spread operator (`...`) or `Object.assign()`. For deep copies, you can use `JSON.parse(JSON.stringify())` or libraries like Lodash's `_.cloneDeep()`.
 
-```js
+```js live
 // Shallow copy of an array
 const originalArray = [1, 2, 3];
 const shallowCopyArray = [...originalArray];
+console.log(shallowCopyArray); // [1, 2, 3]
 
 // Shallow copy of an object
 const originalObject = { a: 1, b: 2 };
 const shallowCopyObject = { ...originalObject };
+console.log(shallowCopyObject); // { a: 1, b: 2 };
 
 // Deep copy using JSON methods
 const deepCopyObject = JSON.parse(JSON.stringify(originalObject));
+console.log(deepCopyObject); // { a: 1, b: 2 };
 ```
 
 <!-- Update here: /questions/what-are-the-different-ways-to-copy-an-object-or-an-array/en-US.mdx -->
@@ -3402,17 +3428,20 @@ const deepCopyObject = JSON.parse(JSON.stringify(originalObject));
 
 A shallow copy duplicates the top-level properties of an object, but nested objects are still referenced. A deep copy duplicates all levels of an object, creating entirely new instances of nested objects. For example, using `Object.assign()` creates a shallow copy, while using libraries like `Lodash` or `structuredClone()` in modern JavaScript can create deep copies.
 
-```js
+```js live
 // Shallow copy example
 let obj1 = { a: 1, b: { c: 2 } };
 let shallowCopy = Object.assign({}, obj1);
 shallowCopy.b.c = 3;
-console.log(obj1.b.c); // Outputs: 3
+console.log(shallowCopy.b.c); // Output: 3
+console.log(obj1.b.c); // Output: 3 (original nested object changed too!)
 
 // Deep copy example
-let deepCopy = JSON.parse(JSON.stringify(obj1));
+let obj2 = { a: 1, b: { c: 2 } };
+let deepCopy = JSON.parse(JSON.stringify(obj2));
 deepCopy.b.c = 4;
-console.log(obj1.b.c); // Outputs: 2
+console.log(deepCopy.b.c); // Output: 4
+console.log(obj2.b.c); // Output: 2 (original nested object remains unchanged)
 ```
 
 <!-- Update here: /questions/explain-the-difference-between-shallow-copy-and-deep-copy/en-US.mdx -->
@@ -3429,14 +3458,16 @@ console.log(obj1.b.c); // Outputs: 2
 
 The spread operator (`...`) in JavaScript allows you to easily copy arrays and objects, merge them, and add new elements or properties. It simplifies syntax and improves readability. For arrays, it can be used to concatenate or clone arrays. For objects, it can be used to merge objects or add new properties.
 
-```js
+```js live
 // Arrays
 const arr1 = [1, 2, 3];
-const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
+const arr2 = [...arr1, 4, 5];
+console.log(arr2); // [1, 2, 3, 4, 5]
 
 // Objects
 const obj1 = { a: 1, b: 2 };
-const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }
+const obj2 = { ...obj1, c: 3 };
+console.log(obj2); // { a: 1, b: 2, c: 3 }
 ```
 
 <!-- Update here: /questions/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/en-US.mdx -->
@@ -3453,7 +3484,7 @@ const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }
 
 To check if an object has a specific property, you can use the `in` operator or the `hasOwnProperty` method. The `in` operator checks for both own and inherited properties, while `hasOwnProperty` checks only for own properties.
 
-```js
+```js live
 const obj = { key: 'value' };
 
 // Using the `in` operator
@@ -3525,7 +3556,7 @@ The key difference between mutable and immutable objects is modifiability. Immut
 
 Destructuring assignment is a syntax in JavaScript that allows you to unpack values from arrays or properties from objects into distinct variables. For arrays, you use square brackets, and for objects, you use curly braces. For example:
 
-```js
+```js live
 // Array destructuring
 const [a, b] = [1, 2];
 
@@ -3692,7 +3723,7 @@ The use cases of property descriptors are as follows:
 
 To reliably determine whether an object is empty, you can use `Object.keys()` to check if the object has any enumerable properties. If the length of the array returned by `Object.keys()` is zero, the object is empty.
 
-```js
+```js live
 const isEmpty = (obj) => Object.keys(obj).length === 0;
 
 const obj = {};
@@ -3745,7 +3776,7 @@ We recommend watching [Lydia's video](https://www.youtube.com/watch?v=eiC58R16hb
 
 Synchronous functions are blocking while asynchronous functions are not. In synchronous functions, statements complete before the next statement is run. As a result, programs containing only synchronous code are evaluated exactly in order of the statements. The execution of the program is paused if one of the statements take a very long time.
 
-```js
+```js live
 function sum(a, b) {
   console.log('Inside sum function');
   return a + b;
@@ -3826,18 +3857,21 @@ Promises in JavaScript are objects that represent the eventual completion (or fa
 ```js
 let promise = new Promise((resolve, reject) => {
   // asynchronous operation
-  if (/* operation successful */) {
+  const success = true;
+  if (success) {
     resolve('Success!');
   } else {
     reject('Error!');
   }
 });
 
-promise.then(result => {
-  console.log(result); // 'Success!'
-}).catch(error => {
-  console.error(error); // 'Error!'
-});
+promise
+  .then((result) => {
+    console.log(result); // 'Success!' (this will print)
+  })
+  .catch((error) => {
+    console.error(error); // 'Error!'
+  });
 ```
 
 <!-- Update here: /questions/what-are-promises-and-how-do-they-work/en-US.mdx -->
@@ -4036,7 +4070,7 @@ This behavior simulates classical inheritance, but it is really more of [delegat
 
 Here's an example of prototypal inheritance:
 
-```js
+```js live
 // Parent object constructor.
 function Animal(name) {
   this.name = name;
@@ -4131,7 +4165,7 @@ Classical inheritance is a model where classes inherit from other classes, typic
 
 Inheritance in ES2015 classes allows one class to extend another, enabling the child class to inherit properties and methods from the parent class. This is done using the `extends` keyword. The `super` keyword is used to call the constructor and methods of the parent class. Here's a quick example:
 
-```js
+```js live
 class Animal {
   constructor(name) {
     this.name = name;
@@ -4171,7 +4205,7 @@ dog.speak(); // Rex barks.
 
 The `new` keyword in JavaScript is used to create an instance of a user-defined object type or one of the built-in object types that has a constructor function. When you use `new`, it does four things: it creates a new object, sets the prototype, binds `this` to the new object, and returns the new object.
 
-```js
+```js live
 function Person(name) {
   this.name = name;
 }
@@ -4194,13 +4228,14 @@ console.log(person1.name); // Alice
 
 To create a constructor function in JavaScript, define a regular function with a capitalized name to indicate it's a constructor. Use the `this` keyword to set properties and methods. When creating an instance, use the `new` keyword.
 
-```js
+```js live
 function Person(name, age) {
   this.name = name;
   this.age = age;
 }
 
 const john = new Person('John', 30);
+console.log(john.age); // 30
 ```
 
 <!-- Update here: /questions/how-do-you-create-a-constructor-function/en-US.mdx -->
@@ -4231,28 +4266,47 @@ class Person {
 }
 ```
 
-For simple constructors, they look pretty similar. The main difference in the constructor comes when using inheritance. If we want to create a `Student` class that subclasses `Person` and add a `studentId` field, this is what we have to do in addition to the above.
+For simple constructors, they look pretty similar. The main difference in the constructor comes when using inheritance. If we want to create a `Student` class that subclasses `Person` and add a `studentId` field, this is what we have to do.
 
-```js
-// ES5 function constructor
-function Student(name, studentId) {
+```js live
+// ES5 inheritance
+// Superclass
+function Person1(name) {
+  this.name = name;
+}
+
+// Subclass
+function Student1(name, studentId) {
   // Call constructor of superclass to initialize superclass-derived members.
-  Person.call(this, name);
+  Person1.call(this, name);
 
   // Initialize subclass's own members.
   this.studentId = studentId;
 }
+Student1.prototype = Object.create(Person1.prototype);
+Student1.prototype.constructor = Student1;
 
-Student.prototype = Object.create(Person.prototype);
-Student.prototype.constructor = Student;
+const student1 = new Student1('John', 1234);
+console.log(student1.name, student1.studentId); // "John" 1234
 
-// ES2015 Class
-class Student extends Person {
+// ES2015 inheritance
+// Superclass
+class Person2 {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+// Subclass
+class Student2 extends Person2 {
   constructor(name, studentId) {
     super(name);
     this.studentId = studentId;
   }
 }
+
+const student2 = new Student2('Alice', 5678);
+console.log(student2.name, student2.studentId); // "Alice" 5678
 ```
 
 It's much more verbose to use inheritance in ES5 and the ES2015 version is easier to understand and remember.
@@ -4284,7 +4338,7 @@ The main advantage of using an arrow function as a method inside a constructor i
 
 For example, let's say we have a `Person` constructor that takes a first name as an argument has two methods to `console.log()` that name, one as a regular function and one as an arrow function:
 
-```js
+```js live
 const Person = function (name) {
   this.name = name;
   this.sayName1 = function () {
@@ -4406,7 +4460,7 @@ Key points to remember:
 
 Lexical scoping means that the scope of a variable is determined by its location within the source code, and nested functions have access to variables declared in their outer scope. For example:
 
-```js
+```js live
 function outerFunction() {
   let outerVariable = 'I am outside!';
 
@@ -4436,25 +4490,33 @@ In this example, `innerFunction` can access `outerVariable` because of lexical s
 
 In JavaScript, scope determines the accessibility of variables and functions at different parts of the code. There are three main types of scope: global scope, function scope, and block scope. Global scope means the variable is accessible everywhere in the code. Function scope means the variable is accessible only within the function it is declared. Block scope, introduced with ES6, means the variable is accessible only within the block (e.g., within curly braces `{}`) it is declared.
 
-```js
-// Global scope
-var globalVar = 'I am global';
+```js live
+var globalVar = 'I am a global var';
 
 function myFunction() {
-  // Function scope
-  var functionVar = 'I am in a function';
+  var functionVar = 'I am a function-scoped var';
 
   if (true) {
-    // Block scope
-    let blockVar = 'I am in a block';
-    console.log(blockVar); // Accessible here
+    let blockVar = 'I am a block-scoped var';
+
+    console.log('Inside block:');
+    console.log(globalVar); // Accessible
+    console.log(functionVar); // Accessible
+    console.log(blockVar); // Accessible
   }
 
-  // console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined
+  console.log('Inside function:');
+  console.log(globalVar); // Accessible
+  console.log(functionVar); // Accessible
+  // console.log(blockVar); // Uncaught ReferenceError
 }
 
-console.log(globalVar); // Accessible here
-// console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined
+myFunction();
+
+console.log('In global scope:');
+console.log(globalVar); // Accessible
+// console.log(functionVar); // Uncaught ReferenceError
+// console.log(blockVar); // Uncaught ReferenceError
 ```
 
 <!-- Update here: /questions/explain-the-concept-of-scope-in-javascript/en-US.mdx -->
@@ -4471,7 +4533,7 @@ console.log(globalVar); // Accessible here
 
 Closures in JavaScript can be used to create private variables by defining a function within another function. The inner function has access to the outer function's variables, but those variables are not accessible from outside the outer function. This allows you to encapsulate and protect the variables from being accessed or modified directly.
 
-```js
+```js live
 function createCounter() {
   let count = 0; // private variable
 
@@ -4524,7 +4586,7 @@ Closures can lead to memory leaks if not managed properly, especially when they
 
 Global scope means variables are accessible from anywhere in the code. Function scope means variables are accessible only within the function they are declared in. Block scope means variables are accessible only within the block (e.g., within `{}`) they are declared in.
 
-```js
+```js live
 var globalVar = "I'm global"; // Global scope
 
 function myFunction() {
@@ -4536,6 +4598,7 @@ function myFunction() {
   // console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined
 }
 // console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined
+myFunction();
 ```
 
 <!-- Update here: /questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.mdx -->
diff --git a/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx b/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx
index 7b31d24..2fca734 100644
--- a/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx
+++ b/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx
@@ -7,7 +7,7 @@ subtitle: How does this new syntax differ from other functions?
 
 Arrow functions provide a concise syntax for writing functions in JavaScript. They are particularly useful for maintaining the `this` context within methods and callbacks. For example, in an event handler or array method like `map`, arrow functions can simplify the code and avoid issues with `this` binding.
 
-```javascript
+```js live
 const numbers = [1, 2, 3];
 const doubled = numbers.map((n) => n * 2);
 console.log(doubled); // [2, 4, 6]
@@ -21,30 +21,35 @@ console.log(doubled); // [2, 4, 6]
 
 Arrow functions provide a more concise way to write functions. This is especially useful for short functions or callbacks.
 
-```javascript
+```js live
 // Traditional function
 const add = function (a, b) {
   return a + b;
 };
 
 // Arrow function
-const add = (a, b) => a + b;
+const anotherAdd = (a, b) => a + b;
+
+console.log(add(2, 3)); // Output: 5
+console.log(anotherAdd(2, 3)); // Output: 5
 ```
 
 ### Lexical `this` binding
 
 Arrow functions do not have their own `this` context. Instead, they inherit `this` from the surrounding scope. This is particularly useful in methods and callbacks where the `this` context can be tricky.
 
-```javascript
+```js live
 function Timer() {
   this.seconds = 0;
-  setInterval(() => {
-    this.seconds++;
+  this.increment = () => {
+    this.seconds++; // 'this.seconds' is inherited from the outer scope
     console.log(this.seconds);
-  }, 1000);
+  };
 }
 
 const timer = new Timer();
+timer.increment(); // 1
+timer.increment(); // 2
 ```
 
 In the example above, using a traditional function inside `setInterval` would require additional steps to maintain the correct `this` context.
@@ -53,11 +58,11 @@ In the example above, using a traditional function inside `setInterval` would re
 
 Arrow functions are often used in array methods like `map`, `filter`, and `reduce` for cleaner and more readable code.
 
-```javascript
+```js live
 const numbers = [1, 2, 3, 4, 5];
 
 // Traditional function
-const doubled = numbers.map(function (n) {
+const doubledTraditional = numbers.map(function (n) {
   return n * 2;
 });
 
@@ -71,7 +76,7 @@ console.log(doubled); // [2, 4, 6, 8, 10]
 
 Arrow functions can be used in event handlers to maintain the `this` context of the class or object.
 
-```javascript
+```js
 class Button {
   constructor() {
     this.count = 0;
diff --git a/questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.mdx b/questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.mdx
index 60fecd6..d1d6cba 100644
--- a/questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.mdx
+++ b/questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.mdx
@@ -33,12 +33,12 @@ This code defines a function named `Person` that takes a parameter `name` and as
 
 `const person = Person()` simply invoke the function's code. When you invoke `Person` as a regular function (i.e., without the `new` keyword), the function does not behave as a constructor. Instead, it executes its code and returns `undefined` if no return value is specified and that gets assigned to the variable intended as the instance. Invoking as such is a common mistake if the function is intended to be used as a constructor.
 
-```js
+```js live
 function Person(name) {
   this.name = name;
 }
 
-const person = Person('John');
+const person = Person('John'); // Throws error in strict mode
 console.log(person); // undefined
 console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined
 ```
@@ -49,7 +49,7 @@ In this case, `Person('John')` does not create a new object. The `person` variab
 
 `const person = new Person()` creates an instance of the `Person` object using the new operator, which inherits from `Person.prototype`. An alternative would be to use `Object.create`, such as: `Object.create(Person.prototype)` and `Person.call(person, 'John')` initializes the object.
 
-```js
+```js live
 function Person(name) {
   this.name = name;
 }
diff --git a/questions/explain-how-prototypal-inheritance-works/en-US.mdx b/questions/explain-how-prototypal-inheritance-works/en-US.mdx
index daf074b..6383c26 100644
--- a/questions/explain-how-prototypal-inheritance-works/en-US.mdx
+++ b/questions/explain-how-prototypal-inheritance-works/en-US.mdx
@@ -12,7 +12,7 @@ This behavior simulates classical inheritance, but it is really more of [delegat
 
 Here's an example of prototypal inheritance:
 
-```js
+```js live
 // Parent object constructor.
 function Animal(name) {
   this.name = name;
@@ -60,7 +60,7 @@ Prototypical inheritance is a feature in JavaScript used to create objects that
 
 1. **Prototypes** : Every object in Javascript has a prototype, which is another object. When you create an object using an object literal or a constructor function, the new object is linked to the prototype of its constructor function or the `Object.prototype` if no prototype is specified. This is commonly referenced using `__proto__` or `[[Prototype]]`. You can also get the prototype by using inbuilt method `Object.getPrototypeOf()` and you can set the prototype of an object via `Object.setPrototypeOf()`.
 
-```js
+```js live
 // Define a constructor function
 function Person(name, age) {
   this.name = name;
@@ -104,7 +104,7 @@ console.log(john.sayHello); // undefined
 
 3. **Constructor functions**: JavaScript provides constructor functions to create objects. When a function is used as a constructor with the new keyword, the new object's prototype (`[[Prototype]]`) is set to the constructor's prototype property.
 
-```js
+```js live
 // Define a constructor function
 function Animal(name) {
   this.name = name;
@@ -142,7 +142,7 @@ console.log(fido.fly); // undefined
 
 4. **`Object.create()`**: This method creates a new object with the specified prototype object and properties. It's a straightforward way to set up prototypical inheritance. If you create a object via `Object.create(null)` it will not inherit any properties from `Object.prototype`. This means the object will not have any built-in properties or methods like `toString()`, `hasOwnProperty()`,
 
-```js
+```js live
 // Define a prototype object
 let proto = {
   greet: function () {
diff --git a/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx b/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx
index 7ad9a56..947cb7e 100644
--- a/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx
+++ b/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx
@@ -32,7 +32,7 @@ A callback function is a function that is passed as an argument to another funct
 
 ### Example of a synchronous callback
 
-```js
+```js live
 function greet(name, callback) {
   console.log('Hello ' + name);
   callback();
@@ -76,13 +76,11 @@ fetchData((data) => {
 
 When dealing with asynchronous operations, it's important to handle errors properly. A common pattern is to use the first argument of the callback function to pass an error object, if any.
 
-```js
+```js live
 function fetchData(callback) {
-  setTimeout(() => {
-    const error = null;
-    const data = { name: 'John', age: 30 };
-    callback(error, data);
-  }, 1000);
+  // assume asynchronous operation to fetch data
+  const { data, error } = { data: { name: 'John', age: 30 }, error: null };
+  callback(error, data);
 }
 
 fetchData((error, data) => {
diff --git a/questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.mdx b/questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.mdx
index e68ad8e..7161054 100644
--- a/questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.mdx
+++ b/questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the concept of destructuring assignment for objects and arrays
 
 Destructuring assignment is a syntax in JavaScript that allows you to unpack values from arrays or properties from objects into distinct variables. For arrays, you use square brackets, and for objects, you use curly braces. For example:
 
-```js
+```js live
 // Array destructuring
 const [a, b] = [1, 2];
 
@@ -26,7 +26,7 @@ Array destructuring allows you to unpack values from arrays into distinct variab
 
 #### Basic example
 
-```js
+```js live
 const numbers = [1, 2, 3];
 const [first, second, third] = numbers;
 
@@ -39,7 +39,7 @@ console.log(third); // 3
 
 You can skip values in the array by leaving an empty space between commas.
 
-```js
+```js live
 const numbers = [1, 2, 3];
 const [first, , third] = numbers;
 
@@ -51,7 +51,7 @@ console.log(third); // 3
 
 You can assign default values in case the array does not have enough elements.
 
-```js
+```js live
 const numbers = [1];
 const [first, second = 2] = numbers;
 
@@ -65,7 +65,7 @@ Object destructuring allows you to unpack properties from objects into distinct
 
 #### Basic example
 
-```js
+```js live
 const person = { name: 'John', age: 30 };
 const { name, age } = person;
 
@@ -77,7 +77,7 @@ console.log(age); // 30
 
 You can rename the variables while destructuring.
 
-```js
+```js live
 const person = { name: 'John', age: 30 };
 const { name: personName, age: personAge } = person;
 
@@ -89,7 +89,7 @@ console.log(personAge); // 30
 
 You can assign default values in case the property does not exist in the object.
 
-```js
+```js live
 const person = { name: 'John' };
 const { name, age = 25 } = person;
 
@@ -101,7 +101,7 @@ console.log(age); // 25
 
 You can destructure nested objects as well.
 
-```js
+```js live
 const person = { name: 'John', address: { city: 'New York', zip: '10001' } };
 const {
   name,
diff --git a/questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.mdx b/questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.mdx
index 53b4d4a..67e07a5 100644
--- a/questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.mdx
+++ b/questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the concept of inheritance in ES2015 classes
 
 Inheritance in ES2015 classes allows one class to extend another, enabling the child class to inherit properties and methods from the parent class. This is done using the `extends` keyword. The `super` keyword is used to call the constructor and methods of the parent class. Here's a quick example:
 
-```js
+```js live
 class Animal {
   constructor(name) {
     this.name = name;
@@ -44,7 +44,7 @@ Inheritance in ES2015 classes allows a class (child class) to inherit properties
 
 The `extends` keyword is used to create a class that is a child of another class. The child class inherits all the properties and methods of the parent class.
 
-```js
+```js live
 class ParentClass {
   constructor() {
     this.parentProperty = 'I am a parent property';
@@ -75,7 +75,7 @@ child.parentMethod(); // This is a parent method
 
 The `super` keyword is used to call the constructor of the parent class and to access its methods. This is necessary when you want to initialize the parent class properties in the child class.
 
-```js
+```js live
 class Animal {
   constructor(name) {
     this.name = name;
@@ -108,7 +108,7 @@ dog.speak();
 
 Child classes can override methods from the parent class. This allows the child class to provide a specific implementation of a method that is already defined in the parent class.
 
-```js
+```js live
 class Animal {
   speak() {
     console.log('Animal makes a noise.');
diff --git a/questions/explain-the-concept-of-lexical-scoping/en-US.mdx b/questions/explain-the-concept-of-lexical-scoping/en-US.mdx
index 444b7af..609d288 100644
--- a/questions/explain-the-concept-of-lexical-scoping/en-US.mdx
+++ b/questions/explain-the-concept-of-lexical-scoping/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the concept of lexical scoping
 
 Lexical scoping means that the scope of a variable is determined by its location within the source code, and nested functions have access to variables declared in their outer scope. For example:
 
-```js
+```js live
 function outerFunction() {
   let outerVariable = 'I am outside!';
 
@@ -36,7 +36,7 @@ When a function is defined, it captures the scope in which it was created. This
 
 Consider the following example:
 
-```js
+```js live
 function outerFunction() {
   let outerVariable = 'I am outside!';
 
@@ -60,7 +60,7 @@ In this example:
 
 Lexical scoping is closely related to closures. A closure is created when a function retains access to its lexical scope, even when the function is executed outside that scope.
 
-```js
+```js live
 function outerFunction() {
   let outerVariable = 'I am outside!';
 
diff --git a/questions/explain-the-concept-of-scope-in-javascript/en-US.mdx b/questions/explain-the-concept-of-scope-in-javascript/en-US.mdx
index 24e7d94..c693c34 100644
--- a/questions/explain-the-concept-of-scope-in-javascript/en-US.mdx
+++ b/questions/explain-the-concept-of-scope-in-javascript/en-US.mdx
@@ -6,25 +6,33 @@ title: Explain the concept of scope in JavaScript
 
 In JavaScript, scope determines the accessibility of variables and functions at different parts of the code. There are three main types of scope: global scope, function scope, and block scope. Global scope means the variable is accessible everywhere in the code. Function scope means the variable is accessible only within the function it is declared. Block scope, introduced with ES6, means the variable is accessible only within the block (e.g., within curly braces `{}`) it is declared.
 
-```js
-// Global scope
-var globalVar = 'I am global';
+```js live
+var globalVar = 'I am a global var';
 
 function myFunction() {
-  // Function scope
-  var functionVar = 'I am in a function';
+  var functionVar = 'I am a function-scoped var';
 
   if (true) {
-    // Block scope
-    let blockVar = 'I am in a block';
-    console.log(blockVar); // Accessible here
+    let blockVar = 'I am a block-scoped var';
+
+    console.log('Inside block:');
+    console.log(globalVar); // Accessible
+    console.log(functionVar); // Accessible
+    console.log(blockVar); // Accessible
   }
 
-  // console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined
+  console.log('Inside function:');
+  console.log(globalVar); // Accessible
+  console.log(functionVar); // Accessible
+  // console.log(blockVar); // Uncaught ReferenceError
 }
 
-console.log(globalVar); // Accessible here
-// console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined
+myFunction();
+
+console.log('In global scope:');
+console.log(globalVar); // Accessible
+// console.log(functionVar); // Uncaught ReferenceError
+// console.log(blockVar); // Uncaught ReferenceError
 ```
 
 ---
@@ -35,13 +43,14 @@ console.log(globalVar); // Accessible here
 
 Variables declared outside any function or block have global scope. They are accessible from anywhere in the code.
 
-```js
+```js live
 var globalVar = 'I am global';
 
 function myFunction() {
   console.log(globalVar); // Accessible here
 }
 
+myFunction();
 console.log(globalVar); // Accessible here
 ```
 
@@ -49,33 +58,34 @@ console.log(globalVar); // Accessible here
 
 Variables declared within a function are in function scope. They are accessible only within that function.
 
-```js
+```js live
 function myFunction() {
   var functionVar = 'I am in a function';
   console.log(functionVar); // Accessible here
 }
 
-// console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined
+myFunction();
+console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined
 ```
 
 ### Block scope
 
 Variables declared with `let` or `const` within a block (e.g., within curly braces `{}`) have block scope. They are accessible only within that block.
 
-```js
+```js live
 if (true) {
   let blockVar = 'I am in a block';
   console.log(blockVar); // Accessible here
 }
 
-// console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined
+console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined
 ```
 
 ### Lexical scope
 
 JavaScript uses lexical scoping, meaning that the scope of a variable is determined by its location within the source code. Nested functions have access to variables declared in their outer scope.
 
-```js
+```js live
 function outerFunction() {
   var outerVar = 'I am outside';
 
diff --git a/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.mdx b/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.mdx
index f31d509..f66e089 100644
--- a/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.mdx
+++ b/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.mdx
@@ -52,7 +52,7 @@ Prototypal inheritance is a feature of JavaScript where objects inherit directly
 
 Example in JavaScript:
 
-```js
+```js live
 const animal = {
   eat() {
     console.log('This animal eats food.');
@@ -64,8 +64,8 @@ dog.bark = function () {
   console.log('The dog barks.');
 };
 
-dog.eat(); // Inherited method
-dog.bark(); // Own method
+dog.eat(); // Inherited method (Output: The animal eats food.)
+dog.bark(); // Own method (Output: The dog barks.)
 ```
 
 ### Key differences
diff --git a/questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/en-US.mdx b/questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/en-US.mdx
index ca58902..7851dd5 100644
--- a/questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/en-US.mdx
+++ b/questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the difference between dot notation and bracket notation for acce
 
 Dot notation and bracket notation are two ways to access properties of an object in JavaScript. Dot notation is more concise and readable but can only be used with valid JavaScript identifiers. Bracket notation is more flexible and can be used with property names that are not valid identifiers, such as those containing spaces or special characters.
 
-```js
+```js live
 const obj = { name: 'Alice', 'favorite color': 'blue' };
 
 // Dot notation
@@ -32,7 +32,7 @@ object.property;
 
 #### Example
 
-```js
+```js live
 const person = {
   name: 'Alice',
   age: 30,
@@ -59,7 +59,7 @@ object['property'];
 
 #### Example
 
-```js
+```js live
 const person = {
   name: 'Alice',
   'favorite color': 'blue',
@@ -78,7 +78,12 @@ console.log(person[1]); // one
 
 #### Example with dynamic property names
 
-```js
+```js live
+const person = {
+  name: 'Alice',
+  age: 30,
+};
+
 const property = 'name';
 console.log(person[property]); // Alice
 ```
diff --git a/questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.mdx b/questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.mdx
index 25eac18..d4c8598 100644
--- a/questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.mdx
+++ b/questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the difference between global scope, function scope, and block sc
 
 Global scope means variables are accessible from anywhere in the code. Function scope means variables are accessible only within the function they are declared in. Block scope means variables are accessible only within the block (e.g., within `{}`) they are declared in.
 
-```js
+```js live
 var globalVar = "I'm global"; // Global scope
 
 function myFunction() {
@@ -18,6 +18,7 @@ function myFunction() {
   // console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined
 }
 // console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined
+myFunction();
 ```
 
 ---
@@ -28,7 +29,7 @@ function myFunction() {
 
 Variables declared in the global scope are accessible from anywhere in the code. In a browser environment, these variables become properties of the `window` object.
 
-```js
+```js live
 var globalVar = "I'm global";
 
 function checkGlobal() {
@@ -43,21 +44,21 @@ console.log(globalVar); // Output: "I'm global"
 
 Variables declared within a function are only accessible within that function. This is true for variables declared using `var`, `let`, or `const`.
 
-```js
+```js live
 function myFunction() {
   var functionVar = "I'm in a function";
   console.log(functionVar); // Accessible here
 }
 
 myFunction(); // Output: "I'm in a function"
-// console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined
+console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined
 ```
 
 ### Block scope
 
 Variables declared with `let` or `const` within a block (e.g., within `{}`) are only accessible within that block. This is not true for `var`, which is function-scoped.
 
-```js
+```js live
 if (true) {
   let blockVar = "I'm in a block";
   console.log(blockVar); // Accessible here
diff --git a/questions/explain-the-difference-between-shallow-copy-and-deep-copy/en-US.mdx b/questions/explain-the-difference-between-shallow-copy-and-deep-copy/en-US.mdx
index ebe47c8..aaed330 100644
--- a/questions/explain-the-difference-between-shallow-copy-and-deep-copy/en-US.mdx
+++ b/questions/explain-the-difference-between-shallow-copy-and-deep-copy/en-US.mdx
@@ -6,17 +6,20 @@ title: Explain the difference between shallow copy and deep copy
 
 A shallow copy duplicates the top-level properties of an object, but nested objects are still referenced. A deep copy duplicates all levels of an object, creating entirely new instances of nested objects. For example, using `Object.assign()` creates a shallow copy, while using libraries like `Lodash` or `structuredClone()` in modern JavaScript can create deep copies.
 
-```js
+```js live
 // Shallow copy example
 let obj1 = { a: 1, b: { c: 2 } };
 let shallowCopy = Object.assign({}, obj1);
 shallowCopy.b.c = 3;
-console.log(obj1.b.c); // Outputs: 3
+console.log(shallowCopy.b.c); // Output: 3
+console.log(obj1.b.c); // Output: 3 (original nested object changed too!)
 
 // Deep copy example
-let deepCopy = JSON.parse(JSON.stringify(obj1));
+let obj2 = { a: 1, b: { c: 2 } };
+let deepCopy = JSON.parse(JSON.stringify(obj2));
 deepCopy.b.c = 4;
-console.log(obj1.b.c); // Outputs: 2
+console.log(deepCopy.b.c); // Output: 4
+console.log(obj2.b.c); // Output: 2 (original nested object remains unchanged)
 ```
 
 ---
@@ -29,11 +32,12 @@ A shallow copy creates a new object and copies the values of the original object
 
 #### Example
 
-```js
+```js live
 let obj1 = { a: 1, b: { c: 2 } };
 let shallowCopy = Object.assign({}, obj1);
 shallowCopy.b.c = 3;
-console.log(obj1.b.c); // Outputs: 3
+console.log(shallowCopy.b.c); // Output: 3
+console.log(obj1.b.c); // Output: 3 (original nested object changed too!)
 ```
 
 In this example, `shallowCopy` is a shallow copy of `obj1`. Changing `shallowCopy.b.c` also changes `obj1.b.c` because `b` is a reference to the same object in both `obj1` and `shallowCopy`.
@@ -44,11 +48,12 @@ A deep copy creates a new object and recursively copies all properties and neste
 
 #### Example
 
-```js
+```js live
 let obj1 = { a: 1, b: { c: 2 } };
 let deepCopy = JSON.parse(JSON.stringify(obj1));
 deepCopy.b.c = 4;
-console.log(obj1.b.c); // Outputs: 2
+console.log(deepCopy.b.c); // Output: 4
+console.log(obj1.b.c); // Output: 2 (original nested object remains unchanged)
 ```
 
 In this example, `deepCopy` is a deep copy of `obj1`. Changing `deepCopy.b.c` does not affect `obj1.b.c` because `b` is a completely new object in `deepCopy`.
diff --git a/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx b/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx
index 975d1bd..b79a4a5 100644
--- a/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx
+++ b/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the difference between synchronous and asynchronous functions in
 
 Synchronous functions are blocking while asynchronous functions are not. In synchronous functions, statements complete before the next statement is run. As a result, programs containing only synchronous code are evaluated exactly in order of the statements. The execution of the program is paused if one of the statements take a very long time.
 
-```js
+```js live
 function sum(a, b) {
   console.log('Inside sum function');
   return a + b;
@@ -70,7 +70,7 @@ Synchronous functions execute in a sequential order, one after the other. Each o
 
 2. **Looping over large datasets**: Iterating over a large array or dataset synchronously can freeze the user interface or browser tab until the operation completes, leading to an unresponsive application.
 
-   ```js
+   ```js live
    const largeArray = new Array(1_000_000).fill(0);
    // Blocks the main thread until the million operations are completed.
    const result = largeArray.map((num) => num * 2);
diff --git a/questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.mdx b/questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.mdx
index f00aa62..233b88e 100644
--- a/questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.mdx
+++ b/questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.mdx
@@ -10,7 +10,7 @@ If you try to invoke a function expression before it is declared, you will get a
 
 Function declarations can be called in the enclosing scope even before they are declared.
 
-```js
+```js live
 foo(); // 'FOOOOO'
 function foo() {
   console.log('FOOOOO');
@@ -19,7 +19,7 @@ function foo() {
 
 Function expressions if called before they are declared will result in an error.
 
-```js
+```js live
 foo(); // Uncaught TypeError: foo is not a function
 var foo = function () {
   console.log('FOOOOO');
@@ -28,11 +28,13 @@ var foo = function () {
 
 Another key difference is in the scope of the function name. Function expressions can be named by defining it after the `function` and before the parenthesis. However when using named function expressions, the function name is only accessible within the function itself. Trying to access it outside will result in an error or `undefined`.
 
-```js
+```js live
 const myFunc = function namedFunc() {
   console.log(namedFunc); // Works
 };
-console.log(namedFunc); // undefined
+
+myFunc(); // Runs the function and logs the function reference
+console.log(namedFunc); // ReferenceError: namedFunc is not defined
 ```
 
 **Note**: The examples uses `var` due to legacy reasons. Function expressions can be defined using `let` and `const` and the key difference is in the hoisting behavior of those keywords.
@@ -43,20 +45,22 @@ console.log(namedFunc); // undefined
 
 A function declaration is a statement that defines a function with a name. It is typically used to declare a function that can be called multiple times throughout the enclosing scope.
 
-```js
+```js live
 function foo() {
   console.log('FOOOOO');
 }
+foo(); // 'FOOOOO'
 ```
 
 ## Function expressions
 
 A function expression is an expression that defines a function and assigns it to a variable. It is often used when a function is needed only once or in a specific context.
 
-```js
+```js live
 var foo = function () {
   console.log('FOOOOO');
 };
+foo(); // 'FOOOOO'
 ```
 
 **Note**: The examples uses `var` due to legacy reasons. Function expressions can be defined using `let` and `const` and the key difference is in the hoisting behavior of those keywords.
@@ -69,7 +73,7 @@ The key difference is that function declarations have its body hoisted but the b
 
 Function declarations:
 
-```js
+```js live
 foo(); // 'FOOOOO'
 function foo() {
   console.log('FOOOOO');
@@ -78,7 +82,7 @@ function foo() {
 
 Function expressions:
 
-```js
+```js live
 foo(); // Uncaught TypeError: foo is not a function
 var foo = function () {
   console.log('FOOOOO');
@@ -89,11 +93,13 @@ var foo = function () {
 
 Function expressions can be named by defining it after the `function` and before the parenthesis. However when using named function expressions, the function name is only accessible within the function itself. Trying to access it outside will result in `undefined` and calling it will result in an error.
 
-```js
+```js live
 const myFunc = function namedFunc() {
   console.log(namedFunc); // Works
 };
-console.log(namedFunc); // undefined
+
+myFunc(); // Runs the function and logs the function reference
+console.log(namedFunc); // ReferenceError: namedFunc is not defined
 ```
 
 ## When to use each
diff --git a/questions/how-can-closures-be-used-to-create-private-variables/en-US.mdx b/questions/how-can-closures-be-used-to-create-private-variables/en-US.mdx
index d65a711..26e9f45 100644
--- a/questions/how-can-closures-be-used-to-create-private-variables/en-US.mdx
+++ b/questions/how-can-closures-be-used-to-create-private-variables/en-US.mdx
@@ -6,7 +6,7 @@ title: How can closures be used to create private variables?
 
 Closures in JavaScript can be used to create private variables by defining a function within another function. The inner function has access to the outer function's variables, but those variables are not accessible from outside the outer function. This allows you to encapsulate and protect the variables from being accessed or modified directly.
 
-```js
+```js live
 function createCounter() {
   let count = 0; // private variable
 
@@ -51,7 +51,7 @@ To create private variables using closures, you can define a function that retur
 
 Here's a detailed example to illustrate how closures can be used to create private variables:
 
-```js
+```js live
 function createCounter() {
   let count = 0; // private variable
 
diff --git a/questions/how-do-you-add-remove-and-update-elements-in-an-array/en-US.mdx b/questions/how-do-you-add-remove-and-update-elements-in-an-array/en-US.mdx
index b5c1287..615f8f3 100644
--- a/questions/how-do-you-add-remove-and-update-elements-in-an-array/en-US.mdx
+++ b/questions/how-do-you-add-remove-and-update-elements-in-an-array/en-US.mdx
@@ -6,7 +6,7 @@ title: How do you add, remove, and update elements in an array?
 
 To add elements to an array, you can use methods like `push`, `unshift`, or `splice`. To remove elements, you can use `pop`, `shift`, or `splice`. To update elements, you can directly access the array index and assign a new value.
 
-```js
+```js live
 let arr = [1, 2, 3];
 
 // Add elements
@@ -21,8 +21,11 @@ arr.splice(1, 1); // [1, 2, 3]
 
 // Update elements
 arr[1] = 5; // [1, 5, 3]
+console.log(arr); // Final state: [1, 5, 3]
 ```
 
+**Note**: If you try to `console.log(arr)` after each operation in some environments (like Chrome DevTools), you may only see the final state of `arr`. This happens because the console sometimes keeps a live reference to the array instead of logging its state at the exact moment. To see intermediate states properly, store snapshots using `console.log([...arr])` or print values immediately after each operation.
+
 ---
 
 ## Adding elements to an array
@@ -31,27 +34,30 @@ arr[1] = 5; // [1, 5, 3]
 
 The `push` method adds one or more elements to the end of an array and returns the new length of the array.
 
-```js
+```js live
 let arr = [1, 2, 3];
-arr.push(4); // arr is now [1, 2, 3, 4]
+console.log(arr.push(4)); // Output: 4 (new length of array)
+console.log(arr); // [1, 2, 3, 4]
 ```
 
 ### Using `unshift`
 
 The `unshift` method adds one or more elements to the beginning of an array and returns the new length of the array.
 
-```js
+```js live
 let arr = [1, 2, 3];
-arr.unshift(0); // arr is now [0, 1, 2, 3]
+console.log(arr.unshift(0)); // Output: 4 (new length of array)
+console.log(arr); // [0, 1, 2, 3]
 ```
 
 ### Using `splice`
 
 The `splice` method can add elements at any position in the array. The first parameter specifies the index at which to start changing the array, the second parameter specifies the number of elements to remove, and the rest are the elements to add.
 
-```js
+```js live
 let arr = [1, 2, 3];
-arr.splice(1, 0, 1.5); // arr is now [1, 1.5, 2, 3]
+arr.splice(1, 0, 1.5); // Removes no element, but adds 1.5
+console.log(arr); // [1, 1.5, 2, 3]
 ```
 
 ## Removing elements from an array
@@ -60,27 +66,30 @@ arr.splice(1, 0, 1.5); // arr is now [1, 1.5, 2, 3]
 
 The `pop` method removes the last element from an array and returns that element.
 
-```js
+```js live
 let arr = [1, 2, 3];
-arr.pop(); // arr is now [1, 2]
+console.log(arr.pop()); // Output: 3
+console.log(arr); // [1, 2]
 ```
 
 ### Using `shift`
 
 The `shift` method removes the first element from an array and returns that element.
 
-```js
+```js live
 let arr = [1, 2, 3];
-arr.shift(); // arr is now [2, 3]
+console.log(arr.shift()); // Output: 1
+console.log(arr); // [2, 3]
 ```
 
 ### Using `splice`
 
 The `splice` method can also remove elements from any position in the array. The first parameter specifies the index at which to start changing the array, and the second parameter specifies the number of elements to remove.
 
-```js
-let arr = [1, 2, 3];
-arr.splice(1, 1); // arr is now [1, 3]
+```js live
+let arr = [1, 2, 3, 4];
+console.log(arr.splice(1, 2)); // Output: [2, 3]
+console.log(arr); // [1, 4]
 ```
 
 ## Updating elements in an array
@@ -89,9 +98,10 @@ arr.splice(1, 1); // arr is now [1, 3]
 
 You can update elements in an array by directly accessing the index and assigning a new value.
 
-```js
+```js live
 let arr = [1, 2, 3];
-arr[1] = 5; // arr is now [1, 5, 3]
+arr[1] = 5;
+console.log(arr); // [1, 5, 3]
 ```
 
 ## Further reading
diff --git a/questions/how-do-you-check-if-an-object-has-a-specific-property/en-US.mdx b/questions/how-do-you-check-if-an-object-has-a-specific-property/en-US.mdx
index 7c9b9d8..28a75a4 100644
--- a/questions/how-do-you-check-if-an-object-has-a-specific-property/en-US.mdx
+++ b/questions/how-do-you-check-if-an-object-has-a-specific-property/en-US.mdx
@@ -6,7 +6,7 @@ title: How do you check if an object has a specific property?
 
 To check if an object has a specific property, you can use the `in` operator or the `hasOwnProperty` method. The `in` operator checks for both own and inherited properties, while `hasOwnProperty` checks only for own properties.
 
-```js
+```js live
 const obj = { key: 'value' };
 
 // Using the `in` operator
@@ -28,7 +28,7 @@ if (obj.hasOwnProperty('key')) {
 
 The `in` operator checks if a property exists in an object, including properties in the object's prototype chain.
 
-```js
+```js live
 const obj = { key: 'value' };
 
 if ('key' in obj) {
@@ -40,7 +40,7 @@ if ('key' in obj) {
 
 The `hasOwnProperty` method checks if a property exists directly on the object, not in its prototype chain.
 
-```js
+```js live
 const obj = { key: 'value' };
 
 if (obj.hasOwnProperty('key')) {
@@ -55,7 +55,7 @@ if (obj.hasOwnProperty('key')) {
 
 ### Example with inherited properties
 
-```js
+```js live
 const parentObj = { inheritedKey: 'inheritedValue' };
 const childObj = Object.create(parentObj);
 childObj.ownKey = 'ownValue';
diff --git a/questions/how-do-you-create-a-constructor-function/en-US.mdx b/questions/how-do-you-create-a-constructor-function/en-US.mdx
index b1f449a..ce96840 100644
--- a/questions/how-do-you-create-a-constructor-function/en-US.mdx
+++ b/questions/how-do-you-create-a-constructor-function/en-US.mdx
@@ -6,13 +6,14 @@ title: How do you create a constructor function?
 
 To create a constructor function in JavaScript, define a regular function with a capitalized name to indicate it's a constructor. Use the `this` keyword to set properties and methods. When creating an instance, use the `new` keyword.
 
-```js
+```js live
 function Person(name, age) {
   this.name = name;
   this.age = age;
 }
 
 const john = new Person('John', 30);
+console.log(john.age); // 30
 ```
 
 ---
@@ -23,7 +24,7 @@ const john = new Person('John', 30);
 
 A constructor function in JavaScript is a regular function that is used to create objects. By convention, the name of the constructor function starts with a capital letter to distinguish it from regular functions.
 
-```js
+```js live
 function Person(name, age) {
   this.name = name;
   this.age = age;
@@ -34,7 +35,7 @@ function Person(name, age) {
 
 Within the constructor function, the `this` keyword is used to refer to the object that will be created. Properties and methods can be assigned to `this`.
 
-```js
+```js live
 function Person(name, age) {
   this.name = name;
   this.age = age;
@@ -50,7 +51,17 @@ function Person(name, age) {
 
 To create an instance of the object, use the `new` keyword followed by the constructor function.
 
-```js
+```js live
+function Person(name, age) {
+  this.name = name;
+  this.age = age;
+  this.greet = function () {
+    console.log(
+      `Hello, my name is ${this.name} and I am ${this.age} years old.`,
+    );
+  };
+}
+
 const john = new Person('John', 30);
 john.greet(); // Output: Hello, my name is John and I am 30 years old.
 ```
@@ -59,7 +70,7 @@ john.greet(); // Output: Hello, my name is John and I am 30 years old.
 
 To save memory, it's a good practice to add methods to the constructor's prototype instead of defining them inside the constructor function.
 
-```js
+```js live
 function Person(name, age) {
   this.name = name;
   this.age = age;
@@ -77,7 +88,13 @@ jane.greet(); // Output: Hello, my name is Jane and I am 25 years old.
 
 You can check if an object is an instance of a constructor function using the `instanceof` operator.
 
-```js
+```js live
+function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+const jane = new Person('Jane', 25);
+
 console.log(jane instanceof Person); // Output: true
 ```
 
diff --git a/questions/how-do-you-reliably-determine-whether-an-object-is-empty/en-US.mdx b/questions/how-do-you-reliably-determine-whether-an-object-is-empty/en-US.mdx
index eb22d8b..78473b2 100644
--- a/questions/how-do-you-reliably-determine-whether-an-object-is-empty/en-US.mdx
+++ b/questions/how-do-you-reliably-determine-whether-an-object-is-empty/en-US.mdx
@@ -6,7 +6,7 @@ title: How do you reliably determine whether an object is empty?
 
 To reliably determine whether an object is empty, you can use `Object.keys()` to check if the object has any enumerable properties. If the length of the array returned by `Object.keys()` is zero, the object is empty.
 
-```js
+```js live
 const isEmpty = (obj) => Object.keys(obj).length === 0;
 
 const obj = {};
@@ -21,7 +21,7 @@ console.log(isEmpty(obj)); // true
 
 The most common and reliable way to check if an object is empty is by using `Object.keys()`. This method returns an array of the object's own enumerable property names. If the length of this array is zero, the object is empty.
 
-```js
+```js live
 const isEmpty = (obj) => Object.keys(obj).length === 0;
 
 const obj1 = {};
@@ -35,7 +35,7 @@ console.log(isEmpty(obj2)); // false
 
 Another method is to use `Object.entries()`, which returns an array of the object's own enumerable property `[key, value]` pairs. If the length of this array is zero, the object is empty.
 
-```js
+```js live
 const isEmpty = (obj) => Object.entries(obj).length === 0;
 
 const obj1 = {};
@@ -49,7 +49,7 @@ console.log(isEmpty(obj2)); // false
 
 Similarly, you can use `Object.values()`, which returns an array of the object's own enumerable property values. If the length of this array is zero, the object is empty.
 
-```js
+```js live
 const isEmpty = (obj) => Object.values(obj).length === 0;
 
 const obj1 = {};
@@ -63,7 +63,7 @@ console.log(isEmpty(obj2)); // false
 
 You can also use a `for...in` loop to check if an object has any properties. If the loop doesn't iterate over any properties, the object is empty.
 
-```js
+```js live
 const isEmpty = (obj) => {
   for (let key in obj) {
     if (obj.hasOwnProperty(key)) {
@@ -75,9 +75,12 @@ const isEmpty = (obj) => {
 
 const obj1 = {};
 const obj2 = { key: 'value' };
+const childObj = Object.create(obj2); // Inherit from obj2
 
 console.log(isEmpty(obj1)); // true
 console.log(isEmpty(obj2)); // false
+console.log(isEmpty(childObj)); // true (has no own properties)
+console.log(childObj.key); // Output: 'value' (still has the inherited property)
 ```
 
 ### Edge cases
diff --git a/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx b/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx
index 91c7ba0..70974f7 100644
--- a/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx
+++ b/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx
@@ -8,7 +8,7 @@ The main advantage of using an arrow function as a method inside a constructor i
 
 For example, let's say we have a `Person` constructor that takes a first name as an argument has two methods to `console.log()` that name, one as a regular function and one as an arrow function:
 
-```js
+```js live
 const Person = function (name) {
   this.name = name;
   this.sayName1 = function () {
@@ -68,12 +68,14 @@ const myFunction = (arg1, arg2, ...argN) => expression;
 
 ### Examples
 
-```js
+```js live
 // Arrow function with parameters
 const multiply = (x, y) => x * y;
+console.log(multiply(2, 3)); // Output: 6
 
 // Arrow function with no parameters
 const sayHello = () => 'Hello, World!';
+console.log(sayHello()); // Output: 'Hello, World!'
 ```
 
 ### Advantages
@@ -86,7 +88,7 @@ const sayHello = () => 'Hello, World!';
 
 Arrow functions cannot be used as constructors and will throw an error when used with the `new` keyword.
 
-```js
+```js live
 const Foo = () => {};
 const foo = new Foo(); // TypeError: Foo is not a constructor
 ```
@@ -104,7 +106,7 @@ arrowFunction(1, 2, 3);
 
 Since arrow functions do not have their own `this`, they are not suitable for defining methods in an object. Traditional function expressions or function declarations should be used instead.
 
-```js
+```js live
 const obj = {
   value: 42,
   getValue: () => this.value, // `this` does not refer to `obj`
@@ -119,7 +121,7 @@ One of the most notable features of arrow functions is their behavior with `this
 
 ### Arrow functions inside function constructors
 
-```js
+```js live
 const Person = function (name) {
   this.name = name;
   this.sayName1 = function () {
diff --git a/questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx b/questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx
index caad021..12c0811 100644
--- a/questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx
+++ b/questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx
@@ -6,12 +6,11 @@ title: What are callback functions and how are they used?
 
 A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. They are commonly used for asynchronous operations like handling events, making API calls, or reading files. For example:
 
-```js
+```js live
 function fetchData(callback) {
-  setTimeout(() => {
-    const data = { name: 'John Doe' };
-    callback(data);
-  }, 1000);
+  // assume an asynchronous operation to fetch data
+  const data = { name: 'John Doe' };
+  callback(data);
 }
 
 function handleData(data) {
@@ -33,7 +32,7 @@ A callback function is a function that is passed as an argument to another funct
 
 Synchronous callbacks are executed immediately within the function they are passed to. They are often used for tasks that need to be completed before moving on to the next line of code.
 
-```js
+```js live
 function greet(name, callback) {
   console.log('Hello ' + name);
   callback();
@@ -44,6 +43,9 @@ function sayGoodbye() {
 }
 
 greet('Alice', sayGoodbye);
+// Output:
+// Hello Alice
+// Goodbye!
 ```
 
 ### Asynchronous callbacks
@@ -105,7 +107,7 @@ function sayHello() {
   console.log('Hello, world!');
 }
 
-setTimeout(sayHello, 2000);
+setTimeout(sayHello, 2000); // After 2 seconds elapse, sayHello callback is called
 ```
 
 ## Further reading
diff --git a/questions/what-are-default-parameters-and-how-are-they-used/en-US.mdx b/questions/what-are-default-parameters-and-how-are-they-used/en-US.mdx
index f15728f..0b2712d 100644
--- a/questions/what-are-default-parameters-and-how-are-they-used/en-US.mdx
+++ b/questions/what-are-default-parameters-and-how-are-they-used/en-US.mdx
@@ -6,7 +6,7 @@ title: What are default parameters and how are they used?
 
 Default parameters in JavaScript allow you to set default values for function parameters if no value or `undefined` is passed. This helps avoid `undefined` values and makes your code more robust. You can define default parameters by assigning a value to the parameter in the function definition.
 
-```js
+```js live
 function greet(name = 'Guest') {
   console.log(`Hello, ${name}!`);
 }
@@ -35,7 +35,7 @@ function functionName(parameter1 = defaultValue1, parameter2 = defaultValue2) {
 
 Here is a simple example to illustrate how default parameters work:
 
-```js
+```js live
 function greet(name = 'Guest') {
   console.log(`Hello, ${name}!`);
 }
@@ -50,7 +50,7 @@ In this example, the `greet` function has a default parameter `name` with a defa
 
 You can also define multiple default parameters in a function:
 
-```js
+```js live
 function createUser(username = 'Anonymous', age = 18) {
   console.log(`Username: ${username}, Age: ${age}`);
 }
@@ -66,7 +66,7 @@ In this example, the `createUser` function has two default parameters: `username
 
 You can also use expressions as default values for parameters:
 
-```js
+```js live
 function add(a = 0, b = a + 1) {
   return a + b;
 }
diff --git a/questions/what-are-promises-and-how-do-they-work/en-US.mdx b/questions/what-are-promises-and-how-do-they-work/en-US.mdx
index a9df5ab..bc9b69a 100644
--- a/questions/what-are-promises-and-how-do-they-work/en-US.mdx
+++ b/questions/what-are-promises-and-how-do-they-work/en-US.mdx
@@ -9,18 +9,21 @@ Promises in JavaScript are objects that represent the eventual completion (or fa
 ```js
 let promise = new Promise((resolve, reject) => {
   // asynchronous operation
-  if (/* operation successful */) {
+  const success = true;
+  if (success) {
     resolve('Success!');
   } else {
     reject('Error!');
   }
 });
 
-promise.then(result => {
-  console.log(result); // 'Success!'
-}).catch(error => {
-  console.error(error); // 'Error!'
-});
+promise
+  .then((result) => {
+    console.log(result); // 'Success!' (this will print)
+  })
+  .catch((error) => {
+    console.error(error); // 'Error!'
+  });
 ```
 
 ---
@@ -46,7 +49,8 @@ You create a promise using the `Promise` constructor, which takes a function wit
 ```js
 let promise = new Promise((resolve, reject) => {
   // asynchronous operation
-  if (/* operation successful */) {
+  const success = true;
+  if (success) {
     resolve('Success!');
   } else {
     reject('Error!');
@@ -59,12 +63,22 @@ let promise = new Promise((resolve, reject) => {
 To handle the result of a promise, you use the `.then()` method for a successful outcome and the `.catch()` method for an error.
 
 ```js
+let promise = new Promise((resolve, reject) => {
+  // asynchronous operation
+  const success = false;
+  if (success) {
+    resolve('Success!');
+  } else {
+    reject('Error!');
+  }
+});
+
 promise
   .then((result) => {
     console.log(result); // 'Success!'
   })
   .catch((error) => {
-    console.error(error); // 'Error!'
+    console.error(error); // 'Error!' (this will print)
   });
 ```
 
diff --git a/questions/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/en-US.mdx b/questions/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/en-US.mdx
index 15be82e..acdce67 100644
--- a/questions/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/en-US.mdx
+++ b/questions/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/en-US.mdx
@@ -6,14 +6,16 @@ title: What are the advantages of using the spread operator with arrays and obje
 
 The spread operator (`...`) in JavaScript allows you to easily copy arrays and objects, merge them, and add new elements or properties. It simplifies syntax and improves readability. For arrays, it can be used to concatenate or clone arrays. For objects, it can be used to merge objects or add new properties.
 
-```js
+```js live
 // Arrays
 const arr1 = [1, 2, 3];
-const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
+const arr2 = [...arr1, 4, 5];
+console.log(arr2); // [1, 2, 3, 4, 5]
 
 // Objects
 const obj1 = { a: 1, b: 2 };
-const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }
+const obj2 = { ...obj1, c: 3 };
+console.log(obj2); // { a: 1, b: 2, c: 3 }
 ```
 
 ---
@@ -26,28 +28,31 @@ const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }
 
 The spread operator allows you to create a shallow copy of an array easily.
 
-```js
+```js live
 const originalArray = [1, 2, 3];
-const clonedArray = [...originalArray]; // [1, 2, 3]
+const clonedArray = [...originalArray];
+console.log(clonedArray); // [1, 2, 3]
 ```
 
 #### Merging arrays
 
 You can concatenate multiple arrays into one.
 
-```js
+```js live
 const array1 = [1, 2];
 const array2 = [3, 4];
-const mergedArray = [...array1, ...array2]; // [1, 2, 3, 4]
+const mergedArray = [...array1, ...array2];
+console.log(mergedArray); // [1, 2, 3, 4]
 ```
 
 #### Adding elements
 
 You can add new elements to an array without mutating the original array.
 
-```js
+```js live
 const array = [1, 2, 3];
-const newArray = [...array, 4, 5]; // [1, 2, 3, 4, 5]
+const newArray = [...array, 4, 5];
+console.log(newArray); // [1, 2, 3, 4, 5]
 ```
 
 ### Objects
@@ -56,28 +61,31 @@ const newArray = [...array, 4, 5]; // [1, 2, 3, 4, 5]
 
 The spread operator allows you to create a shallow copy of an object.
 
-```js
+```js live
 const originalObject = { a: 1, b: 2 };
-const clonedObject = { ...originalObject }; // { a: 1, b: 2 }
+const clonedObject = { ...originalObject };
+console.log(clonedObject); // { a: 1, b: 2 }
 ```
 
 #### Merging objects
 
 You can merge multiple objects into one.
 
-```js
+```js live
 const object1 = { a: 1 };
 const object2 = { b: 2 };
-const mergedObject = { ...object1, ...object2 }; // { a: 1, b: 2 }
+const mergedObject = { ...object1, ...object2 };
+console.log(mergedObject); // { a: 1, b: 2 }
 ```
 
 #### Adding properties
 
 You can add new properties to an object without mutating the original object.
 
-```js
+```js live
 const object = { a: 1, b: 2 };
-const newObject = { ...object, c: 3 }; // { a: 1, b: 2, c: 3 }
+const newObject = { ...object, c: 3 };
+console.log(newObject); // { a: 1, b: 2, c: 3 }
 ```
 
 ## Further reading
diff --git a/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx b/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx
index 86c4993..bc1a36a 100644
--- a/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx
+++ b/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx
@@ -15,7 +15,7 @@ title: What are the benefits of using spread syntax in JavaScript and how is it
 
 **Rest syntax** is the opposite of what spread syntax does. It collects a variable number of arguments into an array. This is often used in function parameters to handle a dynamic number of arguments.
 
-```js
+```js live
 // Using rest syntax in a function
 function sum(...numbers) {
   return numbers.reduce((total, num) => total + num, 0);
@@ -34,14 +34,14 @@ ES2015's spread syntax is very useful when coding in a functional paradigm as we
 
 The spread syntax provides a concise way to create copies of arrays or objects without modifying the originals. This is useful for creating immutable data structures. However do note that arrays copied via the spread operator are shallowly-copied.
 
-```js
+```js live
 // Copying arrays
 const array = [1, 2, 3];
 const newArray = [...array];
 console.log(newArray); // Output: [1, 2, 3]
 
 // Copying objects
-const obj = { name: 'John', age: 30 };
+const person = { name: 'John', age: 30 };
 const newObj = { ...person, city: 'New York' };
 console.log(newObj); // Output: { name: 'John', age: 30, city: 'New York' }
 ```
@@ -50,7 +50,7 @@ console.log(newObj); // Output: { name: 'John', age: 30, city: 'New York' }
 
 The spread syntax allows you to merge arrays or objects by spreading their elements/properties into a new array or object.
 
-```js
+```js live
 // Merging arrays
 const arr1 = [1, 2, 3];
 const arr2 = [4, 5, 6];
@@ -67,16 +67,17 @@ const obj2 = {
 };
 
 const merged = { ...obj1, ...obj2 };
-console.log(copyOfTodd); // Output: { foo: "bar", qux: "baz" }
+console.log(merged); // Output: { foo: "bar", qux: "baz" }
 ```
 
 ### Passing arguments to functions
 
 Use the spread syntax to pass an array of values as individual arguments to a function, avoiding the need for `apply()`.
 
-```js
+```js live
 const numbers = [1, 2, 3];
-Math.max(...numbers); // Same as Math.max(1, 2, 3)
+const max = Math.max(...numbers); // Same as Math.max(1, 2, 3)
+console.log(max); // Output: 3
 ```
 
 ### Array vs object spreads
@@ -85,7 +86,7 @@ Only iterable values like `Array`s and `String`s can be spread in an array. Tryi
 
 Spreading object into array:
 
-```js
+```js live
 const person = {
   name: 'Todd',
   age: 29,
@@ -95,9 +96,10 @@ const array = [...person]; // Error: Uncaught TypeError: person is not iterable
 
 On the other hand, arrays can be spread into objects.
 
-```js
+```js live
 const array = [1, 2, 3];
-const obj = { ...array }; // { 0: 1, 1: 2, 2: 3 }
+const obj = { ...array };
+console.log(obj); // { 0: 1, 1: 2, 2: 3 }
 ```
 
 ## Rest syntax
@@ -108,7 +110,7 @@ The rest syntax (`...`) in JavaScript allows you to represent an indefinite numb
 
 The rest syntax can be used in function parameters to collect all remaining arguments into an array. This is particularly useful when you don't know how many arguments will be passed to the function.
 
-```js
+```js live
 function addFiveToABunchOfNumbers(...numbers) {
   return numbers.map((x) => x + 5);
 }
@@ -119,7 +121,7 @@ console.log(result); // Output: [9, 10, 11, 12, 13, 14, 15]
 
 Provides a cleaner syntax than using the `arguments` object, which is unsupported for arrow functions and represents **all** arguments whereas the usage of the rest syntax below allows `remaining` to represent the 3rd argument and beyond.
 
-```js
+```js live
 const [first, second, ...remaining] = [1, 2, 3, 4, 5];
 console.log(first); // Output: 1
 console.log(second); // Output: 2
@@ -128,9 +130,9 @@ console.log(remaining); // Output: [3, 4, 5]
 
 Note that the rest parameters must be at the end. The rest parameters gather all remaining arguments, so the following does not make sense and causes an error:
 
-```js
+```js live
 function addFiveToABunchOfNumbers(arg1, ...numbers, arg2) {
-  // Error: Uncaught Rest element must be last element.
+  // Error: Rest parameter must be last formal parameter.
 }
 ```
 
@@ -138,21 +140,27 @@ function addFiveToABunchOfNumbers(arg1, ...numbers, arg2) {
 
 The rest syntax can be used in array destructuring to collect the remaining elements into a new array.
 
-```js
-const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
+```js live
+const [a, b, ...rest] = [1, 2, 3, 4];
+console.log(a); // Output: 1
+console.log(b); // Output: 2
+console.log(rest); // Output: [3, 4]
 ```
 
 ### Object destructuring
 
 The rest syntax can be used in object destructuring to collect the remaining properties into a new object.
 
-```js
+```js live
 const { e, f, ...others } = {
   e: 1,
   f: 2,
   g: 3,
   h: 4,
-}; // e: 1, f: 2, others: { g: 3, h: 4 }
+};
+console.log(e); // Output: 1
+console.log(f); // Output: 2
+console.log(others); // Output: { g: 3, h: 4 }
 ```
 
 ## Further Reading
diff --git a/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.mdx b/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.mdx
index 2fc4420..3948ee6 100644
--- a/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.mdx
+++ b/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.mdx
@@ -20,28 +20,47 @@ class Person {
 }
 ```
 
-For simple constructors, they look pretty similar. The main difference in the constructor comes when using inheritance. If we want to create a `Student` class that subclasses `Person` and add a `studentId` field, this is what we have to do in addition to the above.
+For simple constructors, they look pretty similar. The main difference in the constructor comes when using inheritance. If we want to create a `Student` class that subclasses `Person` and add a `studentId` field, this is what we have to do.
 
-```js
-// ES5 function constructor
-function Student(name, studentId) {
+```js live
+// ES5 inheritance
+// Superclass
+function Person1(name) {
+  this.name = name;
+}
+
+// Subclass
+function Student1(name, studentId) {
   // Call constructor of superclass to initialize superclass-derived members.
-  Person.call(this, name);
+  Person1.call(this, name);
 
   // Initialize subclass's own members.
   this.studentId = studentId;
 }
+Student1.prototype = Object.create(Person1.prototype);
+Student1.prototype.constructor = Student1;
 
-Student.prototype = Object.create(Person.prototype);
-Student.prototype.constructor = Student;
+const student1 = new Student1('John', 1234);
+console.log(student1.name, student1.studentId); // "John" 1234
 
-// ES2015 Class
-class Student extends Person {
+// ES2015 inheritance
+// Superclass
+class Person2 {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+// Subclass
+class Student2 extends Person2 {
   constructor(name, studentId) {
     super(name);
     this.studentId = studentId;
   }
 }
+
+const student2 = new Student2('Alice', 5678);
+console.log(student2.name, student2.studentId); // "Alice" 5678
 ```
 
 It's much more verbose to use inheritance in ES5 and the ES2015 version is easier to understand and remember.
@@ -67,7 +86,7 @@ ES5 function constructors and ES2015 classes are two different ways of defining
 
 In ES5, you define a class-like structure using a function constructor and prototypes. Here's an example:
 
-```js
+```js live
 // ES5 function constructor
 function Person(name, age) {
   this.name = name;
@@ -89,7 +108,7 @@ person1.greet(); // Hello, my name is John and I am 30 years old.
 
 ES2015 introduced the `class` syntax, which simplifies the definition of classes and supports more features such as static methods and subclassing. Here's the same example using ES2015:
 
-```js
+```js live
 // ES2015 Class
 class Person {
   constructor(name, age) {
@@ -121,26 +140,26 @@ person1.greet(); // Hello, my name is John and I am 30 years old.
    - **ES5**: Static methods are added directly to the constructor function.
    - **ES2015**: Static methods are defined within the class using the `static` keyword.
 
-   ```js
+   ```js live
    // ES5
-   function Person(name, age) {
+   function Person1(name, age) {
      this.name = name;
      this.age = age;
    }
 
-   Person.sayHi = function () {
-     console.log('Hi!');
+   Person1.sayHi = function () {
+     console.log('Hi from ES5!');
    };
 
-   Person.sayHi(); // Hi!
+   Person1.sayHi(); // Hi from ES5!
 
    // ES2015
-   class Person {
+   class Person2 {
      static sayHi() {
-       console.log('Hi!');
+       console.log('Hi from ES2015!');
      }
    }
-   Person.sayHi(); // Hi!
+   Person2.sayHi(); // Hi from ES2015!
    ```
 
 3. **Inheritance**
@@ -148,45 +167,41 @@ person1.greet(); // Hello, my name is John and I am 30 years old.
    - **ES5**: Inheritance is achieved using `Object.create()` and manually setting the prototype chain.
    - **ES2015**: Inheritance is much simpler and more intuitive with the extends keyword.
 
-   ```js
+   ```js live
    // ES5 Inheritance
 
    // ES5 function constructor
-   function Person(name, age) {
+   function Person1(name, age) {
      this.name = name;
      this.age = age;
    }
 
-   Person.prototype.greet = function () {
+   Person1.prototype.greet = function () {
      console.log(
-       'Hello, my name is ' +
-         this.name +
-         ' and I am ' +
-         this.age +
-         ' years old.',
+       `Hello, my name is ${this.name} and I am ${this.age} years old.`,
      );
    };
 
-   function Student(name, age, grade) {
-     Person.call(this, name, age);
+   function Student1(name, age, grade) {
+     Person1.call(this, name, age);
      this.grade = grade;
    }
 
-   Student.prototype = Object.create(Person.prototype);
-   Student.prototype.constructor = Student;
+   Student1.prototype = Object.create(Person1.prototype);
+   Student1.prototype.constructor = Student1;
 
-   Student.prototype.study = function () {
+   Student1.prototype.study = function () {
      console.log(this.name + ' is studying.');
    };
 
-   var student1 = new Student('Alice', 20, 'A');
-   student1.greet(); // Hello, my name is Alice and I am 20 years old.
-   student1.study(); // Alice is studying.
+   var student1 = new Student1('John', 22, 'B+');
+   student1.greet(); // Hello, my name is John and I am 22 years old.
+   student1.study(); // John is studying.
 
    // ES2015 Inheritance
 
    // ES2015 Class
-   class Person {
+   class Person2 {
      constructor(name, age) {
        this.name = name;
        this.age = age;
@@ -199,7 +214,7 @@ person1.greet(); // Hello, my name is John and I am 30 years old.
      }
    }
 
-   class Student extends Person {
+   class Student2 extends Person2 {
      constructor(name, age, grade) {
        super(name, age);
        this.grade = grade;
@@ -210,9 +225,9 @@ person1.greet(); // Hello, my name is John and I am 30 years old.
      }
    }
 
-   const student1 = new Student('Alice', 20, 'A');
-   student1.greet(); // Hello, my name is Alice and I am 20 years old.
-   student1.study(); // Alice is studying.
+   const student2 = new Student2('Alice', 20, 'A');
+   student2.greet(); // Hello, my name is Alice and I am 20 years old.
+   student2.study(); // Alice is studying.
    ```
 
 4. `super` calls:
diff --git a/questions/what-are-the-different-methods-for-iterating-over-an-array/en-US.mdx b/questions/what-are-the-different-methods-for-iterating-over-an-array/en-US.mdx
index 2ede973..92338b3 100644
--- a/questions/what-are-the-different-methods-for-iterating-over-an-array/en-US.mdx
+++ b/questions/what-are-the-different-methods-for-iterating-over-an-array/en-US.mdx
@@ -14,7 +14,7 @@ There are several methods to iterate over an array in JavaScript. The most commo
 
 The `for` loop is one of the most basic and versatile ways to iterate over an array. It allows you to control the iteration process completely.
 
-```js
+```js live
 const array = [1, 2, 3, 4, 5];
 for (let i = 0; i < array.length; i++) {
   console.log(array[i]);
@@ -25,7 +25,7 @@ for (let i = 0; i < array.length; i++) {
 
 The `for...of` loop is a more modern and readable way to iterate over arrays and other iterable objects.
 
-```js
+```js live
 const array = [1, 2, 3, 4, 5];
 for (const element of array) {
   console.log(element);
@@ -36,7 +36,7 @@ for (const element of array) {
 
 The `forEach` method executes a provided function once for each array element.
 
-```js
+```js live
 const array = [1, 2, 3, 4, 5];
 array.forEach((element) => {
   console.log(element);
@@ -47,7 +47,7 @@ array.forEach((element) => {
 
 The `map` method creates a new array populated with the results of calling a provided function on every element in the calling array.
 
-```js
+```js live
 const array = [1, 2, 3, 4, 5];
 const newArray = array.map((element) => element * 2);
 console.log(newArray); // [2, 4, 6, 8, 10]
@@ -57,7 +57,7 @@ console.log(newArray); // [2, 4, 6, 8, 10]
 
 The `filter` method creates a new array with all elements that pass the test implemented by the provided function.
 
-```js
+```js live
 const array = [1, 2, 3, 4, 5];
 const filteredArray = array.filter((element) => element > 2);
 console.log(filteredArray); // [3, 4, 5]
@@ -67,7 +67,7 @@ console.log(filteredArray); // [3, 4, 5]
 
 The `reduce` method executes a reducer function on each element of the array, resulting in a single output value.
 
-```js
+```js live
 const array = [1, 2, 3, 4, 5];
 const sum = array.reduce(
   (accumulator, currentValue) => accumulator + currentValue,
diff --git a/questions/what-are-the-different-ways-to-copy-an-object-or-an-array/en-US.mdx b/questions/what-are-the-different-ways-to-copy-an-object-or-an-array/en-US.mdx
index c106f4c..b55fa64 100644
--- a/questions/what-are-the-different-ways-to-copy-an-object-or-an-array/en-US.mdx
+++ b/questions/what-are-the-different-ways-to-copy-an-object-or-an-array/en-US.mdx
@@ -6,17 +6,20 @@ title: What are the different ways to copy an object or an array?
 
 To copy an object or an array in JavaScript, you can use several methods. For shallow copies, you can use the spread operator (`...`) or `Object.assign()`. For deep copies, you can use `JSON.parse(JSON.stringify())` or libraries like Lodash's `_.cloneDeep()`.
 
-```js
+```js live
 // Shallow copy of an array
 const originalArray = [1, 2, 3];
 const shallowCopyArray = [...originalArray];
+console.log(shallowCopyArray); // [1, 2, 3]
 
 // Shallow copy of an object
 const originalObject = { a: 1, b: 2 };
 const shallowCopyObject = { ...originalObject };
+console.log(shallowCopyObject); // { a: 1, b: 2 };
 
 // Deep copy using JSON methods
 const deepCopyObject = JSON.parse(JSON.stringify(originalObject));
+console.log(deepCopyObject); // { a: 1, b: 2 };
 ```
 
 ---
@@ -29,23 +32,26 @@ const deepCopyObject = JSON.parse(JSON.stringify(originalObject));
 
 The spread operator (`...`) is a concise way to create a shallow copy of an array or an object.
 
-```js
+```js live
 // Shallow copy of an array
 const originalArray = [1, 2, 3];
 const shallowCopyArray = [...originalArray];
+console.log(shallowCopyArray); // [1, 2, 3]
 
 // Shallow copy of an object
 const originalObject = { a: 1, b: 2 };
 const shallowCopyObject = { ...originalObject };
+console.log(shallowCopyObject); // { a: 1, b: 2 };
 ```
 
 #### Using `Object.assign()`
 
 `Object.assign()` can also be used to create a shallow copy of an object.
 
-```js
+```js live
 const originalObject = { a: 1, b: 2 };
 const shallowCopyObject = Object.assign({}, originalObject);
+console.log(shallowCopyObject); // { a: 1, b: 2 };
 ```
 
 ### Deep copy
@@ -54,9 +60,10 @@ const shallowCopyObject = Object.assign({}, originalObject);
 
 This method is a simple way to create a deep copy of an object or an array. However, it has limitations, such as not handling functions, `undefined`, or circular references.
 
-```js
+```js live
 const originalObject = { a: 1, b: { c: 2 } };
 const deepCopyObject = JSON.parse(JSON.stringify(originalObject));
+console.log(deepCopyObject); // { a: 1, b: { c: 2 } }
 ```
 
 #### Using Lodash's `_.cloneDeep()`
@@ -66,7 +73,7 @@ Lodash is a popular utility library that provides a `_.cloneDeep()` method for d
 ```js
 const _ = require('lodash');
 const originalObject = { a: 1, b: { c: 2 } };
-const deepCopyObject = _.cloneDeep(originalObject);
+const deepCopyObject = _.cloneDeep(originalObject); // { a: 1, b: { c: 2 } }
 ```
 
 ### Other methods
@@ -75,7 +82,7 @@ const deepCopyObject = _.cloneDeep(originalObject);
 
 For custom deep copy logic, you can implement a recursive function.
 
-```js
+```js live
 function deepCopy(obj) {
   if (obj === null || typeof obj !== 'object') {
     return obj;
@@ -96,6 +103,7 @@ function deepCopy(obj) {
 
 const originalObject = { a: 1, b: { c: 2 } };
 const deepCopyObject = deepCopy(originalObject);
+console.log(deepCopyObject); // { a: 1, b: { c: 2 } }
 ```
 
 ## Further reading
diff --git a/questions/what-are-the-various-ways-to-create-objects-in-javascript/en-US.mdx b/questions/what-are-the-various-ways-to-create-objects-in-javascript/en-US.mdx
index fd192ad..26b182b 100644
--- a/questions/what-are-the-various-ways-to-create-objects-in-javascript/en-US.mdx
+++ b/questions/what-are-the-various-ways-to-create-objects-in-javascript/en-US.mdx
@@ -22,30 +22,34 @@ Creating objects in JavaScript involves several methods. Here are the various wa
 
 This is the simplest and most popular way to create objects in JavaScript. It involves defining a collection of key-value pairs within curly braces (`{}`). It can be used when you need to create a single object with a fixed set of properties.
 
-```js
+```js live
 const person = {
   firstName: 'John',
   lastName: 'Doe',
   age: 50,
   eyeColor: 'blue',
 };
+
+console.log(person); // {firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue"}
 ```
 
 ## `Object()` constructor
 
 This method involves using the `new` keyword with the built-in `Object` constructor to create an object. You can then add properties to the object using dot notation. It can be used when you need to create an object from a primitive value or to create an empty object.
 
-```js
+```js live
 const person = new Object();
 person.firstName = 'John';
 person.lastName = 'Doe';
+
+console.log(person); // {firstName: "John", lastName: "Doe"}
 ```
 
 ## `Object.create()` Method
 
 This method allows you to create a new object using an existing object as a prototype. The new object inherits properties and methods from the prototype object. It can be used when you need to create a new object with a specific prototype.
 
-```js
+```js live
 // Object.create() Method
 const personPrototype = {
   greet() {
@@ -68,7 +72,7 @@ An object without a prototype can be created by doing `Object.create(null)`.
 
 Classes provide a more structured and familiar syntax (similar to other programming languages) for creating objects. They define a blueprint and use methods to interact with the object's properties. It can be used when you need to create complex objects with inheritance and encapsulation.
 
-```js
+```js live
 class Person {
   constructor(name, age) {
     this.name = name;
@@ -94,7 +98,7 @@ Constructor functions are used to create reusable blueprints for objects. They d
 
 However, now that ES2015 classes are readily supported in modern browsers, there's little reason to use constructor functions to create objects.
 
-```js
+```js live
 // Constructor function
 function Person(name, age) {
   this.name = name;
diff --git a/questions/what-is-recursion-and-how-is-it-used-in-javascript/en-US.mdx b/questions/what-is-recursion-and-how-is-it-used-in-javascript/en-US.mdx
index 40a55ae..ac8725f 100644
--- a/questions/what-is-recursion-and-how-is-it-used-in-javascript/en-US.mdx
+++ b/questions/what-is-recursion-and-how-is-it-used-in-javascript/en-US.mdx
@@ -6,13 +6,15 @@ title: What is recursion and how is it used in JavaScript?
 
 Recursion is a programming technique where a function calls itself to solve a problem. In JavaScript, recursion is used to solve problems that can be broken down into smaller, similar sub-problems. A base case is essential to stop the recursive calls and prevent infinite loops. For example, calculating the factorial of a number can be done using recursion:
 
-```js
+```js live
 function factorial(n) {
   if (n === 0) {
     return 1;
   }
   return n * factorial(n - 1);
 }
+
+console.log(factorial(4)); // Output: 24
 ```
 
 ---
@@ -35,7 +37,7 @@ The factorial of a number `n` (denoted as `n!`) is the product of all positive i
 
 Here is how you can implement this in JavaScript:
 
-```js
+```js live
 function factorial(n) {
   if (n === 0) {
     // base case
@@ -43,6 +45,8 @@ function factorial(n) {
   }
   return n * factorial(n - 1); // recursive case
 }
+
+console.log(factorial(4)); // Output: 24
 ```
 
 ### Example: Fibonacci sequence
@@ -55,7 +59,7 @@ The Fibonacci sequence is another classic example of recursion. Each number in t
 
 Here is how you can implement this in JavaScript:
 
-```js
+```js live
 function fibonacci(n) {
   if (n === 0) {
     // base case
@@ -67,19 +71,23 @@ function fibonacci(n) {
   }
   return fibonacci(n - 1) + fibonacci(n - 2); // recursive case
 }
+
+console.log(fibonacci(6)); // Output: 8
 ```
 
 ### Tail recursion
 
 Tail recursion is a special form of recursion where the recursive call is the last operation in the function. This can be optimized by some JavaScript engines to improve performance and prevent stack overflow. Here is an example of a tail-recursive factorial function:
 
-```js
+```js live
 function factorial(n, acc = 1) {
   if (n === 0) {
     return acc;
   }
   return factorial(n - 1, n * acc);
 }
+
+console.log(factorial(4)); // Output: 24
 ```
 
 ### Use cases for recursion
diff --git a/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx b/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx
index b01b69d..c1ac02b 100644
--- a/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx
+++ b/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx
@@ -8,15 +8,11 @@ A higher-order function is any function that takes one or more functions as argu
 
 Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is `Array.prototype.map()`, which takes an array and a function as arguments. `Array.prototype.map()` then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are `Array.prototype.forEach()`, `Array.prototype.filter()`, and `Array.prototype.reduce()`. A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. `Function.prototype.bind()` is an example that returns another function.
 
-Imagine a scenario where we have an array of names that we need to transform to uppercase.
+Imagine a scenario where we have an array of names that we need to transform to uppercase. The imperative way will be as such:
 
-```js
+```js live
 const names = ['irish', 'daisy', 'anna'];
-```
-
-The imperative way will be as such:
 
-```js
 function transformNamesToUppercase(names) {
   const results = [];
   for (let i = 0; i < names.length; i++) {
@@ -25,17 +21,19 @@ function transformNamesToUppercase(names) {
   return results;
 }
 
-transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
+console.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']
 ```
 
 Using `Array.prototype.map(transformerFn)` makes the code shorter and more declarative.
 
-```js
+```js live
+const names = ['irish', 'daisy', 'anna'];
+
 function transformNamesToUppercase(names) {
   return names.map((name) => name.toUpperCase());
 }
 
-transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
+console.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']
 ```
 
 ---
@@ -48,7 +46,7 @@ A higher-order function is a function that takes another function as an argument
 
 A higher-order function can take another function as an argument and execute it.
 
-```js
+```js live
 function greet(name) {
   return `Hello, ${name}!`;
 }
@@ -66,7 +64,7 @@ In this example, the `greetName` function takes another function `greet` as an a
 
 A higher-order function can return another function.
 
-```js
+```js live
 function multiplier(factor) {
   return function (num) {
     return num * factor;
@@ -86,7 +84,7 @@ In this example, the `multiplier` function returns a new function that multiplie
 
 1. **Logging decorator**: A higher-order function that adds logging functionality to another function:
 
-```js
+```js live
 function withLogging(fn) {
   return function (...args) {
     console.log(`Calling ${fn.name} with arguments`, args);
@@ -106,7 +104,7 @@ The `withLogging` function is a higher-order function that takes a function fn a
 
 2. **Memoization**: A higher-order function that caches the results of a function to avoid redundant computations:
 
-```js
+```js live
 function memoize(fn) {
   const cache = new Map();
   return function (...args) {
diff --git a/questions/what-is-the-difference-between-a-parameter-and-an-argument/en-US.mdx b/questions/what-is-the-difference-between-a-parameter-and-an-argument/en-US.mdx
index 53e183d..450b1f7 100644
--- a/questions/what-is-the-difference-between-a-parameter-and-an-argument/en-US.mdx
+++ b/questions/what-is-the-difference-between-a-parameter-and-an-argument/en-US.mdx
@@ -30,8 +30,11 @@ Arguments are the actual values that are passed to the function when it is invok
 
 Example:
 
-```js
-greet('Alice');
+```js live
+function greet(name) {
+  console.log('Hello, ' + name);
+}
+greet('Alice'); // Output: "Hello, Alice"
 ```
 
 In this example, `"Alice"` is an argument.
@@ -43,14 +46,14 @@ In this example, `"Alice"` is an argument.
 
 ### Example combining both
 
-```js
+```js live
 function add(a, b) {
   // a and b are parameters
   return a + b;
 }
 
 const result = add(2, 3); // 2 and 3 are arguments
-console.log(result); // Outputs: 5
+console.log(result); // Output: 5
 ```
 
 ## Further reading
diff --git a/questions/what-is-the-purpose-of-the-new-keyword/en-US.mdx b/questions/what-is-the-purpose-of-the-new-keyword/en-US.mdx
index bd482ff..b17622c 100644
--- a/questions/what-is-the-purpose-of-the-new-keyword/en-US.mdx
+++ b/questions/what-is-the-purpose-of-the-new-keyword/en-US.mdx
@@ -6,7 +6,7 @@ title: What is the purpose of the `new` keyword?
 
 The `new` keyword in JavaScript is used to create an instance of a user-defined object type or one of the built-in object types that has a constructor function. When you use `new`, it does four things: it creates a new object, sets the prototype, binds `this` to the new object, and returns the new object.
 
-```js
+```js live
 function Person(name) {
   this.name = name;
 }
@@ -23,7 +23,7 @@ console.log(person1.name); // Alice
 
 The `new` keyword is used to create a new instance of an object. When you call a constructor function with `new`, it creates a new object.
 
-```js
+```js live
 function Car(model) {
   this.model = model;
 }
@@ -36,7 +36,7 @@ console.log(myCar.model); // Toyota
 
 The new object’s internal `[[Prototype]]` property is set to the constructor function’s `prototype` property. This allows the new object to inherit properties and methods from the constructor’s prototype.
 
-```js
+```js live
 function Animal(type) {
   this.type = type;
 }
@@ -53,7 +53,7 @@ dog.speak(); // Dog makes a sound
 
 Inside the constructor function, `this` refers to the new object that is being created. This allows you to add properties and methods to the new object.
 
-```js
+```js live
 function Book(title) {
   this.title = title;
 }
@@ -66,7 +66,7 @@ console.log(myBook.title); // JavaScript Essentials
 
 The `new` keyword implicitly returns the new object created by the constructor function. If the constructor function explicitly returns an object, that object will be returned instead.
 
-```js
+```js live
 function Gadget(name) {
   this.name = name;
   return { type: 'Electronic' };
diff --git a/questions/whats-the-difference-between-call-and-apply/en-US.mdx b/questions/whats-the-difference-between-call-and-apply/en-US.mdx
index a61016e..8b08c46 100644
--- a/questions/whats-the-difference-between-call-and-apply/en-US.mdx
+++ b/questions/whats-the-difference-between-call-and-apply/en-US.mdx
@@ -11,7 +11,7 @@ title: What's the difference between `.call` and `.apply` in JavaScript?
 
 Assuming we have a function `add`, the function can be invoked using `.call` and `.apply` in the following manner:
 
-```js
+```js live
 function add(a, b) {
   return a + b;
 }
@@ -28,7 +28,7 @@ Both `.call` and `.apply` are used to invoke functions and the first parameter w
 
 An easy way to remember this is C for `call` and comma-separated and A for `apply` and an array of arguments.
 
-```js
+```js live
 function add(a, b) {
   return a + b;
 }
@@ -39,7 +39,7 @@ console.log(add.apply(null, [1, 2])); // 3
 
 With ES6 syntax, we can invoke `call` using an array along with the spread operator for the arguments.
 
-```js
+```js live
 function add(a, b) {
   return a + b;
 }
@@ -53,7 +53,7 @@ console.log(add.call(null, ...[1, 2])); // 3
 
 `.call` and `.apply` can set the `this` context explicitly when invoking methods on different objects.
 
-```js
+```js live
 const person = {
   name: 'John',
   greet() {
@@ -71,7 +71,7 @@ person.greet.apply(anotherPerson); // Hello, my name is Alice
 
 Both `.call` and `.apply` allow borrowing methods from one object and using them in the context of another. This is useful when passing functions as arguments (callbacks) and the original `this` context is lost. `.call` and `.apply` allow the function to be invoked with the intended `this` value.
 
-```js
+```js live
 function greet() {
   console.log(`Hello, my name is ${this.name}`);
 }
@@ -87,7 +87,7 @@ greet.call(person2); // Hello, my name is Alice
 
 `.apply` can be used with object methods by passing the object as the first argument followed by the usual parameters.
 
-```js
+```js live
 const arr1 = [1, 2, 3];
 const arr2 = [4, 5, 6];
 

From 71db9f863e24f5cfd74a4028eaeda2afc5ac8d7f Mon Sep 17 00:00:00 2001
From: Aziz Bohra <136102211+imazizbohra@users.noreply.github.com>
Date: Sun, 9 Mar 2025 11:49:15 +0530
Subject: [PATCH 03/26] contents(js): fix spread syntax typo (#19)

Co-authored-by: Aziz <iamazizbohra@gmail.com>
Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com>
---
 .../en-US.mdx                                                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx b/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx
index bc1a36a..b271783 100644
--- a/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx
+++ b/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx
@@ -66,8 +66,8 @@ const obj2 = {
   qux: 'baz',
 };
 
-const merged = { ...obj1, ...obj2 };
-console.log(merged); // Output: { foo: "bar", qux: "baz" }
+const mergedObj = { ...obj1, ...obj2 };
+console.log(mergedObj); // Output: { foo: "bar", qux: "baz" }
 ```
 
 ### Passing arguments to functions

From 2cfc234d27d1ff9df84091f0335a5bc7ca0ed400 Mon Sep 17 00:00:00 2001
From: tahachm <97478750+tahachm@users.noreply.github.com>
Date: Thu, 20 Mar 2025 10:03:37 +0500
Subject: [PATCH 04/26] Executable coding blocks production-readiness - PR 4
 (#24)

Co-authored-by: GitHub Actions <github-actions[bot]@users.noreply.github.com>
---
 README.md                                     | 20 +++++---
 .../en-US.mdx                                 |  8 ++--
 questions/explain-hoisting/en-US.mdx          | 14 +++---
 .../en-US.mdx                                 | 36 +++++++++++++--
 .../en-US.mdx                                 |  2 +-
 .../en-US.mdx                                 | 46 +++++++++++--------
 .../en-US.mdx                                 | 21 ++++++---
 .../en-US.mdx                                 |  2 +-
 questions/what-is-objectfreeze-for/en-US.mdx  |  8 ++--
 .../en-US.mdx                                 |  5 +-
 .../en-US.mdx                                 | 11 +++--
 11 files changed, 116 insertions(+), 57 deletions(-)

diff --git a/README.md b/README.md
index 6fbbefc..bb5d02b 100644
--- a/README.md
+++ b/README.md
@@ -3578,10 +3578,12 @@ const { name, age } = { name: 'John', age: 30 };
 
 `Object.freeze()` is used to make an object immutable. Once an object is frozen, you cannot add, remove, or modify its properties. This is useful for creating constants or ensuring that an object remains unchanged throughout the program.
 
-```js
+```js live
 const obj = { name: 'John' };
 Object.freeze(obj);
 obj.name = 'Doe'; // This will not change the name property
+
+console.log(obj); // { name: 'John' }
 ```
 
 <!-- Update here: /questions/what-is-objectfreeze-for/en-US.mdx -->
@@ -5056,8 +5058,8 @@ Here's a table summarizing the 3 client storage mechanisms.
 
 To make an HTTP request using the Fetch API, you can use the `fetch` function, which returns a promise. You can handle the response using `.then()` and `.catch()` for error handling. Here's a basic example of a GET request:
 
-```js
-fetch('https://api.example.com/data')
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then((response) => response.json())
   .then((data) => console.log(data))
   .catch((error) => console.error('Error:', error));
@@ -5065,13 +5067,17 @@ fetch('https://api.example.com/data')
 
 For a POST request, you can pass an options object as the second argument to `fetch`:
 
-```js
-fetch('https://api.example.com/data', {
+```js live
+fetch('https://jsonplaceholder.typicode.com/posts', {
   method: 'POST',
+  body: JSON.stringify({
+    title: 'foo',
+    body: 'bar',
+    userId: 1,
+  }),
   headers: {
-    'Content-Type': 'application/json',
+    'Content-Type': 'application/json; charset=UTF-8',
   },
-  body: JSON.stringify({ key: 'value' }),
 })
   .then((response) => response.json())
   .then((data) => console.log(data))
diff --git a/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx b/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx
index 2fca734..93a71c8 100644
--- a/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx
+++ b/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx
@@ -76,7 +76,7 @@ console.log(doubled); // [2, 4, 6, 8, 10]
 
 Arrow functions can be used in event handlers to maintain the `this` context of the class or object.
 
-```js
+```js live
 class Button {
   constructor() {
     this.count = 0;
@@ -84,13 +84,15 @@ class Button {
     this.button.innerText = 'Click me';
     this.button.addEventListener('click', () => {
       this.count++;
-      console.log(this.count);
+      console.log('count:', this.count);
     });
     document.body.appendChild(this.button);
   }
 }
 
-const button = new Button();
+const myButton = new Button();
+myButton.button.click(); // count: 1
+myButton.button.click(); // count: 2
 ```
 
 ## Further reading
diff --git a/questions/explain-hoisting/en-US.mdx b/questions/explain-hoisting/en-US.mdx
index a2004a9..6a317c6 100644
--- a/questions/explain-hoisting/en-US.mdx
+++ b/questions/explain-hoisting/en-US.mdx
@@ -41,7 +41,7 @@ Let's explain with a few code samples. Note that the code for these examples sho
 
 Hoisting is seen in action here as even though `foo` is declared and initialized after the first `console.log()`, the first `console.log()` prints the value of `foo` as `undefined`.
 
-```js
+```js live
 console.log(foo); // undefined
 var foo = 1;
 console.log(foo); // 1
@@ -49,7 +49,7 @@ console.log(foo); // 1
 
 You can visualize the code as:
 
-```js
+```js live
 var foo;
 console.log(foo); // undefined
 foo = 1;
@@ -60,17 +60,17 @@ console.log(foo); // 1
 
 Variables declared via `let`, `const`, and `class` are hoisted as well. However, unlike `var` and `function`, they are not initialized and accessing them before the declaration will result in a `ReferenceError` exception. The variable is in a "temporal dead zone" from the start of the block until the declaration is processed.
 
-```js
+```js live
 y; // ReferenceError: Cannot access 'y' before initialization
 let y = 'local';
 ```
 
-```js
+```js live
 z; // ReferenceError: Cannot access 'z' before initialization
 const z = 'local';
 ```
 
-```js
+```js live
 Foo; // ReferenceError: Cannot access 'Foo' before initialization
 
 class Foo {
@@ -82,7 +82,7 @@ class Foo {
 
 Function expressions are functions written in the form of variable declarations. Since they are also declared using `var`, only the variable declaration is hoisted.
 
-```js
+```js live
 console.log(bar); // undefined
 bar(); // Uncaught TypeError: bar is not a function
 
@@ -95,7 +95,7 @@ var bar = function () {
 
 Function declarations use the `function` keyword. Unlike function expressions, function declarations have both the declaration and definition hoisted, thus they can be called even before they are declared.
 
-```js
+```js live
 console.log(foo); // [Function: foo]
 foo(); // 'FOOOOO'
 
diff --git a/questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.mdx b/questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.mdx
index 9322966..3821e4a 100644
--- a/questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.mdx
+++ b/questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.mdx
@@ -18,10 +18,17 @@ In JavaScript, the `this` keyword is a reference to the object that is currently
 
 In the context of event handlers, `this` usually refers to the DOM element that triggered the event. For example:
 
-```js
+```js live
+// Create a button element and append it to the DOM
+const button = document.createElement('button');
+button.id = 'myButton';
+document.body.appendChild(button);
+
 document.getElementById('myButton').addEventListener('click', function () {
-  console.log(this); // Logs the button element
+  console.log(this); // `this` refers to the 'myButton' element
 });
+
+button.click(); // Logs the button element
 ```
 
 In this example, `this` inside the event handler refers to the button element that was clicked.
@@ -34,7 +41,12 @@ There are several ways to change the value of `this` in event handlers:
 
 The `bind()` method creates a new function that, when called, has its `this` keyword set to the provided value:
 
-```js
+```js live
+// Create a button element and append it to the DOM
+const button = document.createElement('button');
+button.id = 'myButton';
+document.body.appendChild(button);
+
 function handleClick() {
   console.log(this); // Logs the object passed to bind()
 }
@@ -43,6 +55,8 @@ const obj = { name: 'MyObject' };
 document
   .getElementById('myButton')
   .addEventListener('click', handleClick.bind(obj));
+
+button.click(); // Logs obj because handleClick was bound to obj using bind()
 ```
 
 In this example, `this` inside `handleClick` refers to `obj`.
@@ -51,7 +65,12 @@ In this example, `this` inside `handleClick` refers to `obj`.
 
 Arrow functions do not have their own `this` context; they inherit `this` from the surrounding lexical context:
 
-```js
+```js live
+// Create a button element and append it to the DOM
+const button = document.createElement('button');
+button.id = 'myButton';
+document.body.appendChild(button);
+
 const obj = {
   name: 'MyObject',
   handleClick: function () {
@@ -62,6 +81,7 @@ const obj = {
 };
 
 obj.handleClick();
+button.click(); // This will log obj
 ```
 
 In this example, `this` inside the arrow function refers to `obj`.
@@ -70,7 +90,12 @@ In this example, `this` inside the arrow function refers to `obj`.
 
 You can also assign the context explicitly by using a variable:
 
-```js
+```js live
+// Create a button element and append it to the DOM
+const button = document.createElement('button');
+button.id = 'myButton';
+document.body.appendChild(button);
+
 const obj = {
   name: 'MyObject',
   handleClick: function () {
@@ -82,6 +107,7 @@ const obj = {
 };
 
 obj.handleClick();
+button.click(); // This will log obj
 ```
 
 In this example, `self` is used to capture the value of `this` from the outer function.
diff --git a/questions/how-can-you-avoid-problems-related-to-hoisting/en-US.mdx b/questions/how-can-you-avoid-problems-related-to-hoisting/en-US.mdx
index f6ea850..31d9d51 100644
--- a/questions/how-can-you-avoid-problems-related-to-hoisting/en-US.mdx
+++ b/questions/how-can-you-avoid-problems-related-to-hoisting/en-US.mdx
@@ -56,7 +56,7 @@ function example() {
   // Now use a and b
   console.log(a + b);
 }
-example();
+example(); // Output: 3
 ```
 
 ### Declare functions before calling them
diff --git a/questions/how-do-you-make-an-http-request-using-the-fetch-api/en-US.mdx b/questions/how-do-you-make-an-http-request-using-the-fetch-api/en-US.mdx
index b633f02..b86ca9f 100644
--- a/questions/how-do-you-make-an-http-request-using-the-fetch-api/en-US.mdx
+++ b/questions/how-do-you-make-an-http-request-using-the-fetch-api/en-US.mdx
@@ -6,8 +6,8 @@ title: How do you make an HTTP request using the Fetch API?
 
 To make an HTTP request using the Fetch API, you can use the `fetch` function, which returns a promise. You can handle the response using `.then()` and `.catch()` for error handling. Here's a basic example of a GET request:
 
-```js
-fetch('https://api.example.com/data')
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then((response) => response.json())
   .then((data) => console.log(data))
   .catch((error) => console.error('Error:', error));
@@ -15,13 +15,17 @@ fetch('https://api.example.com/data')
 
 For a POST request, you can pass an options object as the second argument to `fetch`:
 
-```js
-fetch('https://api.example.com/data', {
+```js live
+fetch('https://jsonplaceholder.typicode.com/posts', {
   method: 'POST',
+  body: JSON.stringify({
+    title: 'foo',
+    body: 'bar',
+    userId: 1,
+  }),
   headers: {
-    'Content-Type': 'application/json',
+    'Content-Type': 'application/json; charset=UTF-8',
   },
-  body: JSON.stringify({ key: 'value' }),
 })
   .then((response) => response.json())
   .then((data) => console.log(data))
@@ -36,8 +40,8 @@ fetch('https://api.example.com/data', {
 
 To make a basic GET request, you can use the `fetch` function with the URL of the resource you want to fetch. The `fetch` function returns a promise that resolves to the `Response` object representing the response to the request.
 
-```js
-fetch('https://api.example.com/data')
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then((response) => {
     if (!response.ok) {
       throw new Error('Network response was not ok');
@@ -52,8 +56,8 @@ fetch('https://api.example.com/data')
 
 The `Response` object has several methods to handle different types of responses, such as `.json()`, `.text()`, `.blob()`, and `.arrayBuffer()`.
 
-```js
-fetch('https://api.example.com/data')
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then((response) => response.text())
   .then((text) => console.log(text))
   .catch((error) => console.error('Error:', error));
@@ -63,13 +67,17 @@ fetch('https://api.example.com/data')
 
 To make a POST request, you need to pass an options object as the second argument to `fetch`. This object can include the HTTP method, headers, and body of the request.
 
-```js
-fetch('https://api.example.com/data', {
+```js live
+fetch('https://jsonplaceholder.typicode.com/posts', {
   method: 'POST',
+  body: JSON.stringify({
+    title: 'foo',
+    body: 'bar',
+    userId: 1,
+  }),
   headers: {
-    'Content-Type': 'application/json',
+    'Content-Type': 'application/json; charset=UTF-8',
   },
-  body: JSON.stringify({ key: 'value' }),
 })
   .then((response) => {
     if (!response.ok) {
@@ -85,8 +93,8 @@ fetch('https://api.example.com/data', {
 
 Error handling in the Fetch API can be done using the `.catch()` method. It's also a good practice to check the `response.ok` property to ensure the request was successful.
 
-```js
-fetch('https://api.example.com/data')
+```js live
+fetch('https://jsonplaceholder.tyicode.com/posts/1/comments') // Typo in the URL
   .then((response) => {
     if (!response.ok) {
       throw new Error('Network response was not ok');
@@ -101,10 +109,12 @@ fetch('https://api.example.com/data')
 
 You can also use the Fetch API with `async/await` for a more synchronous-looking code.
 
-```js
+```js live
 async function fetchData() {
   try {
-    const response = await fetch('https://api.example.com/data');
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/todos/1',
+    );
     if (!response.ok) {
       throw new Error('Network response was not ok');
     }
diff --git a/questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx b/questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx
index 12c0811..1ba2261 100644
--- a/questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx
+++ b/questions/what-are-callback-functions-and-how-are-they-used/en-US.mdx
@@ -52,7 +52,7 @@ greet('Alice', sayGoodbye);
 
 Asynchronous callbacks are used for operations that take some time to complete, such as reading files, making HTTP requests, or handling events. These callbacks are executed after the asynchronous operation has finished.
 
-```js
+```js live
 function fetchData(callback) {
   setTimeout(() => {
     const data = { name: 'John Doe' };
@@ -65,6 +65,7 @@ function handleData(data) {
 }
 
 fetchData(handleData);
+// Output: { name: 'John Doe' } after 1 second
 ```
 
 ### Common use cases
@@ -73,19 +74,25 @@ fetchData(handleData);
 
 Callbacks are often used in event handling. For example, in JavaScript, you can pass a callback function to an event listener.
 
-```js
-document.getElementById('myButton').addEventListener('click', function () {
-  console.log('Button clicked!');
+```js live
+const button = document.createElement('button');
+
+button.addEventListener('click', () => {
+  setTimeout(() => {
+    console.log('Button clicked after 1s');
+  }, 1000);
 });
+
+button.click();
 ```
 
 #### API calls
 
 Callbacks are frequently used in making API calls to handle the response data.
 
-```js
+```js live
 function getUserData(userId, callback) {
-  fetch(`https://api.example.com/users/${userId}`)
+  fetch(`https://jsonplaceholder.typicode.com/todos/2`)
     .then((response) => response.json())
     .then((data) => callback(data))
     .catch((error) => console.error('Error:', error));
@@ -102,7 +109,7 @@ getUserData(1, displayUserData);
 
 Callbacks are also used with timers like `setTimeout` and `setInterval`.
 
-```js
+```js live
 function sayHello() {
   console.log('Hello, world!');
 }
diff --git a/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx b/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx
index dc7d7e9..20bfdb8 100644
--- a/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx
+++ b/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx
@@ -67,7 +67,7 @@ Microtasks are tasks that have a higher priority than macrotasks and are execute
 
 The following code logs some statements using a combination of normal execution, macrotasks, and microtasks.
 
-```js
+```js live
 console.log('Start');
 
 setTimeout(() => {
diff --git a/questions/what-is-objectfreeze-for/en-US.mdx b/questions/what-is-objectfreeze-for/en-US.mdx
index 3e6cfc0..aca3ab8 100644
--- a/questions/what-is-objectfreeze-for/en-US.mdx
+++ b/questions/what-is-objectfreeze-for/en-US.mdx
@@ -6,10 +6,12 @@ title: What is `Object.freeze()` for?
 
 `Object.freeze()` is used to make an object immutable. Once an object is frozen, you cannot add, remove, or modify its properties. This is useful for creating constants or ensuring that an object remains unchanged throughout the program.
 
-```js
+```js live
 const obj = { name: 'John' };
 Object.freeze(obj);
 obj.name = 'Doe'; // This will not change the name property
+
+console.log(obj); // { name: 'John' }
 ```
 
 ---
@@ -22,7 +24,7 @@ obj.name = 'Doe'; // This will not change the name property
 
 To use `Object.freeze()`, simply pass the object you want to freeze as an argument to the method. Here is a basic example:
 
-```js
+```js live
 const obj = {
   name: 'John',
   age: 30,
@@ -54,7 +56,7 @@ console.log(obj); // Output: { name: "John", age: 30 }
 - `Object.freeze()` only makes the object itself immutable. If the object contains nested objects, those nested objects are not frozen and can still be modified.
 - To deeply freeze an object, you would need to recursively apply `Object.freeze()` to all nested objects.
 
-```js
+```js live
 const deepFreeze = (obj) => {
   Object.keys(obj).forEach((key) => {
     if (typeof obj[key] === 'object' && obj[key] !== null) {
diff --git a/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx b/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx
index c1ac02b..7c6dcdd 100644
--- a/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx
+++ b/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx
@@ -97,7 +97,10 @@ function add(a, b) {
 }
 
 const loggedAdd = withLogging(add);
-console.log(loggedAdd(2, 3)); // Output: Calling add with arguments [2, 3] 5
+console.log(loggedAdd(2, 3));
+// Output:
+// Calling add with arguments [2, 3]
+// 5
 ```
 
 The `withLogging` function is a higher-order function that takes a function fn as an argument and returns a new function that logs the function call before executing the original function
diff --git a/questions/what-is-the-dom-and-how-is-it-structured/en-US.mdx b/questions/what-is-the-dom-and-how-is-it-structured/en-US.mdx
index 7091dde..85971b8 100644
--- a/questions/what-is-the-dom-and-how-is-it-structured/en-US.mdx
+++ b/questions/what-is-the-dom-and-how-is-it-structured/en-US.mdx
@@ -67,12 +67,15 @@ JavaScript can be used to access and manipulate the DOM. Here are some common me
 
 Example:
 
-```js
-// Select the <h1> element
-const heading = document.querySelector('h1');
+```js live
+// Create an <h1> element and add it to the DOM
+const newElement = document.createElement('h1');
+document.body.appendChild(newElement);
 
-// Change its text content
+// Get the h1 element using querySelector
+const heading = document.querySelector('h1');
 heading.textContent = 'Hello, DOM!';
+console.log(heading); // <h1>Hello, DOM!</h1>
 ```
 
 ## Further reading

From ba8ae61c4ff65a4fd661ea27e5fc5abdc02c6ebd Mon Sep 17 00:00:00 2001
From: tahachm <97478750+tahachm@users.noreply.github.com>
Date: Fri, 21 Mar 2025 17:00:46 +0500
Subject: [PATCH 05/26] Executable coding blocks production-readiness - PR 5
 (#25)

Co-authored-by: GitHub Actions <github-actions[bot]@users.noreply.github.com>
---
 README.md                                     | 89 +++++++++++--------
 .../en-US.mdx                                 | 12 +--
 .../explain-function-prototype-bind/en-US.mdx | 24 ++---
 .../en-US.mdx                                 |  2 +-
 .../en-US.mdx                                 | 20 +++--
 .../en-US.mdx                                 | 26 +++---
 .../en-US.mdx                                 |  2 +-
 .../en-US.mdx                                 | 34 +++++--
 .../en-US.mdx                                 | 10 ++-
 .../en-US.mdx                                 | 34 ++++---
 .../en-US.mdx                                 |  8 +-
 .../en-US.mdx                                 |  8 +-
 .../en-US.mdx                                 | 74 +++++++++------
 .../en-US.mdx                                 |  4 +-
 .../en-US.mdx                                 | 14 +--
 .../en-US.mdx                                 |  5 +-
 .../en-US.mdx                                 | 20 +++--
 .../en-US.mdx                                 | 14 ++-
 .../en-US.mdx                                 |  4 +-
 .../en-US.mdx                                 | 12 +--
 .../en-US.mdx                                 | 37 +++++---
 .../en-US.mdx                                 |  8 +-
 .../en-US.mdx                                 | 24 ++---
 .../en-US.mdx                                 | 32 ++++---
 .../en-US.mdx                                 |  6 +-
 questions/what-is-objectseal-for/en-US.mdx    | 20 +++--
 .../en-US.mdx                                 |  6 +-
 .../en-US.mdx                                 |  6 +-
 .../en-US.mdx                                 | 10 +--
 .../en-US.mdx                                 |  4 +-
 .../en-US.mdx                                 | 36 +++++---
 .../en-US.mdx                                 | 18 ++--
 .../en-US.mdx                                 |  2 +-
 33 files changed, 373 insertions(+), 252 deletions(-)

diff --git a/README.md b/README.md
index bb5d02b..aff1775 100644
--- a/README.md
+++ b/README.md
@@ -1190,7 +1190,7 @@ AJAX (Asynchronous JavaScript and XML) facilitates asynchronous communication be
 
 **Using `XMLHttpRequest`**
 
-```js
+```js live
 let xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function () {
   if (xhr.readyState === XMLHttpRequest.DONE) {
@@ -1207,7 +1207,7 @@ xhr.send();
 
 **Using `fetch()`**
 
-```js
+```js live
 fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then((response) => {
     if (!response.ok) {
@@ -1290,7 +1290,7 @@ These days `fetch()` is preferred for its cleaner syntax and modern features.
 
 `AbortController` is used to cancel ongoing asynchronous operations like fetch requests.
 
-```js
+```js live
 const controller = new AbortController();
 const signal = controller.signal;
 
@@ -1641,7 +1641,7 @@ In JavaScript, iterators and generators are powerful tools for managing sequence
 
 Here's an example of an object implementing the iterator interface.
 
-```js
+```js live
 const iterator = {
   current: 0,
   last: 5,
@@ -1663,7 +1663,7 @@ while (!result.done) {
 
 **Generators** are a special functions that **can pause execution and resume at a later point**. It uses the `function*` syntax and the `yield` keyword to control the flow of execution. When you call a generator function, it doesn't execute completely like a regular function. Instead, it returns an iterator object. Calling the `next()` method on the returned iterator advances the generator to the next `yield` statement, and the value after `yield` becomes the return value of `next()`.
 
-```js
+```js live
 function* numberGenerator() {
   let num = 0;
   while (num <= 5) {
@@ -1703,7 +1703,7 @@ Generators are powerful for creating iterators on-demand, especially for infinit
 
 **Mutable objects** allow for modification of properties and values after creation, which is the default behavior for most objects.
 
-```js
+```js live
 const mutableObject = {
   name: 'John',
   age: 30,
@@ -1718,7 +1718,7 @@ console.log(mutableObject); // Output: { name: 'Jane', age: 30 }
 
 **Immutable objects** cannot be directly modified after creation. Its content cannot be changed without creating an entirely new value.
 
-```js
+```js live
 const immutableObject = Object.freeze({
   name: 'John',
   age: 30,
@@ -2003,7 +2003,7 @@ Getters and setters are defined using the `get` and `set` keywords, respectively
 
 Here's a code example demonstrating the use of getters and setters:
 
-```js
+```js live
 const person = {
   _name: 'John Doe', // Private property
 
@@ -2050,7 +2050,7 @@ In JavaScript, a proxy is an object that acts as an intermediary between an obje
 
 Here's a basic example of using a `Proxy` to log every property access:
 
-```js
+```js live
 const myObject = {
   name: 'John',
   age: 42,
@@ -2065,11 +2065,13 @@ const handler = {
 
 const proxiedObject = new Proxy(myObject, handler);
 
-console.log(proxiedObject.name); // 'John'
+console.log(proxiedObject.name);
 // Someone accessed property "name"
+// 'John'
 
-console.log(proxiedObject.age); // 42
+console.log(proxiedObject.age);
 // Someone accessed property "age"
+// 42
 ```
 
 Use cases include:
@@ -2442,7 +2444,7 @@ In JavaScript, a proxy is an object that acts as an intermediary between an obje
 
 Here's a basic example of using a `Proxy` to log every property access:
 
-```js
+```js live
 const myObject = {
   name: 'John',
   age: 42,
@@ -2457,11 +2459,13 @@ const handler = {
 
 const proxiedObject = new Proxy(myObject, handler);
 
-console.log(proxiedObject.name); // 'John'
+console.log(proxiedObject.name);
 // Someone accessed property "name"
+// 'John'
 
-console.log(proxiedObject.age); // 42
+console.log(proxiedObject.age);
 // Someone accessed property "age"
+// 42
 ```
 
 Use cases include:
@@ -2536,7 +2540,7 @@ The following behavior summarizes the result of accessing the variables before t
 
 Hoisting in JavaScript means that function declarations are moved to the top of their containing scope during the compile phase, making them available throughout the entire scope. This allows you to call a function before it is defined in the code. However, function expressions are not hoisted in the same way. If you try to call a function expression before it is defined, you will get an error because the variable holding the function is hoisted but not its assignment.
 
-```js
+```js live
 // Function declaration
 console.log(foo()); // Works fine
 function foo() {
@@ -2912,7 +2916,7 @@ In JavaScript, iterators and generators are powerful tools for managing sequence
 
 Here's an example of an object implementing the iterator interface.
 
-```js
+```js live
 const iterator = {
   current: 0,
   last: 5,
@@ -2934,7 +2938,7 @@ while (!result.done) {
 
 **Generators** are a special functions that **can pause execution and resume at a later point**. It uses the `function*` syntax and the `yield` keyword to control the flow of execution. When you call a generator function, it doesn't execute completely like a regular function. Instead, it returns an iterator object. Calling the `next()` method on the returned iterator advances the generator to the next `yield` statement, and the value after `yield` becomes the return value of `next()`.
 
-```js
+```js live
 function* numberGenerator() {
   let num = 0;
   while (num <= 5) {
@@ -3512,7 +3516,7 @@ if (obj.hasOwnProperty('key')) {
 
 **Mutable objects** allow for modification of properties and values after creation, which is the default behavior for most objects.
 
-```js
+```js live
 const mutableObject = {
   name: 'John',
   age: 30,
@@ -3527,7 +3531,7 @@ console.log(mutableObject); // Output: { name: 'Jane', age: 30 }
 
 **Immutable objects** cannot be directly modified after creation. Its content cannot be changed without creating an entirely new value.
 
-```js
+```js live
 const immutableObject = Object.freeze({
   name: 'John',
   age: 30,
@@ -3598,15 +3602,19 @@ console.log(obj); // { name: 'John' }
 
 <!-- Update here: /questions/what-is-objectseal-for/en-US.mdx -->
 
-`Object.seal()` is used to prevent new properties from being added to an object and to mark all existing properties as non-configurable. This means you can still modify the values of existing properties, but you cannot delete them or add new ones.
+`Object.seal()` is used to prevent new properties from being added to an object and to mark all existing properties as non-configurable. This means you can still modify the values of existing properties, but you cannot delete them or add new ones. Doing so will throw errors in strict mode but fail silently in non-strict mode. In the following examples, you can uncomment the 'use strict' comment to see this.
+
+```js live
+// 'use strict'
 
-```js
 const obj = { name: 'John' };
 Object.seal(obj);
 
 obj.name = 'Jane'; // Allowed
-obj.age = 30; // Not allowed
-delete obj.name; // Not allowed
+obj.age = 30; // Not allowed, throws an error in strict mode
+delete obj.name; // Not allowed, throws an error in strict mode
+
+console.log(obj); // { name: 'Jane } (unchanged)
 ```
 
 <!-- Update here: /questions/what-is-objectseal-for/en-US.mdx -->
@@ -3623,7 +3631,7 @@ delete obj.name; // Not allowed
 
 `Object.preventExtensions()` is a method in JavaScript that prevents new properties from being added to an object. However, it does not affect the deletion or modification of existing properties. This method is useful when you want to ensure that an object remains in a certain shape and no additional properties can be added to it.
 
-```js
+```js live
 const obj = { name: 'John' };
 Object.preventExtensions(obj);
 
@@ -3649,7 +3657,7 @@ Getters and setters are defined using the `get` and `set` keywords, respectively
 
 Here's a code example demonstrating the use of getters and setters:
 
-```js
+```js live
 const person = {
   _name: 'John Doe', // Private property
 
@@ -3969,16 +3977,19 @@ Promise.all([promise1, promise2, promise3]).then((values) => {
 
 `async/await` is a modern syntax in JavaScript that simplifies working with promises. By using the `async` keyword before a function, you can use the `await` keyword inside that function to pause execution until a promise is resolved. This makes asynchronous code look and behave more like synchronous code, making it easier to read and maintain.
 
-```js
+```js live
 async function fetchData() {
   try {
-    const response = await fetch('https://api.example.com/data');
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/posts/1',
+    );
     const data = await response.json();
     console.log(data);
   } catch (error) {
     console.error('Error fetching data:', error);
   }
 }
+fetchData();
 ```
 
 <!-- Update here: /questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.mdx -->
@@ -5114,7 +5125,7 @@ AJAX (Asynchronous JavaScript and XML) facilitates asynchronous communication be
 
 **Using `XMLHttpRequest`**
 
-```js
+```js live
 let xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function () {
   if (xhr.readyState === XMLHttpRequest.DONE) {
@@ -5131,7 +5142,7 @@ xhr.send();
 
 **Using `fetch()`**
 
-```js
+```js live
 fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then((response) => {
     if (!response.ok) {
@@ -5208,7 +5219,7 @@ These days `fetch()` is preferred for its cleaner syntax and modern features.
 
 `AbortController` is used to cancel ongoing asynchronous operations like fetch requests.
 
-```js
+```js live
 const controller = new AbortController();
 const signal = controller.signal;
 
@@ -5296,13 +5307,15 @@ There are three main types of workers in JavaScript:
 
 The WebSocket API provides a way to open a persistent connection between a client and a server, allowing for real-time, two-way communication. Unlike HTTP, which is request-response based, WebSocket enables full-duplex communication, meaning both the client and server can send and receive messages independently. This is particularly useful for applications like chat apps, live updates, and online gaming.
 
-```js
-// Example of creating a WebSocket connection
-const socket = new WebSocket('ws://example.com/socket');
+The following example uses Postman's WebSocket echo service to demonstrate how web sockets work.
+
+```js live
+// Postman's echo server that will echo back messages you send
+const socket = new WebSocket('wss://ws.postman-echo.com/raw');
 
 // Event listener for when the connection is open
 socket.addEventListener('open', function (event) {
-  socket.send('Hello Server!');
+  socket.send('Hello Server!'); // Sends the message to the Postman WebSocket server
 });
 
 // Event listener for when a message is received from the server
@@ -5385,7 +5398,7 @@ To detect if JavaScript is disabled on a page, you can use the `<noscript>` HTML
 
 The `Intl` namespace object in JavaScript is used for internationalization purposes. It provides language-sensitive string comparison, number formatting, and date and time formatting. For example, you can use `Intl.DateTimeFormat` to format dates according to a specific locale:
 
-```js
+```js live
 const date = new Date();
 const formatter = new Intl.DateTimeFormat('en-US');
 console.log(formatter.format(date)); // Outputs date in 'MM/DD/YYYY' format
@@ -6546,7 +6559,7 @@ The Factory pattern is a design pattern used to create objects without specifyin
 
 For example, in JavaScript, you can use a factory function to create different types of objects:
 
-```js
+```js live
 function createAnimal(type) {
   if (type === 'dog') {
     return { sound: 'woof' };
@@ -6587,7 +6600,7 @@ The Observer pattern is a design pattern where an object, known as the subject,
 
 The Module pattern in JavaScript is a design pattern used to create self-contained modules of code. It helps with encapsulation by allowing you to define private and public members within a module. Private members are not accessible from outside the module, while public members are exposed through a returned object. This pattern helps in organizing code, avoiding global namespace pollution, and maintaining a clean separation of concerns.
 
-```js
+```js live
 var myModule = (function () {
   var privateVar = 'I am private';
 
@@ -6646,7 +6659,7 @@ The Decorator pattern is a structural design pattern that allows behavior to be
 
 For example, if you have a `Car` class and you want to add features like `GPS` or `Sunroof` without modifying the `Car` class itself, you can create decorators for these features.
 
-```js
+```js live
 class Car {
   drive() {
     return 'Driving';
diff --git a/questions/explain-ajax-in-as-much-detail-as-possible/en-US.mdx b/questions/explain-ajax-in-as-much-detail-as-possible/en-US.mdx
index 0c2cd34..4f4d1ba 100644
--- a/questions/explain-ajax-in-as-much-detail-as-possible/en-US.mdx
+++ b/questions/explain-ajax-in-as-much-detail-as-possible/en-US.mdx
@@ -8,7 +8,7 @@ AJAX (Asynchronous JavaScript and XML) facilitates asynchronous communication be
 
 **Using `XMLHttpRequest`**
 
-```js
+```js live
 let xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function () {
   if (xhr.readyState === XMLHttpRequest.DONE) {
@@ -25,7 +25,7 @@ xhr.send();
 
 **Using `fetch()`**
 
-```js
+```js live
 fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then((response) => {
     if (!response.ok) {
@@ -49,7 +49,7 @@ Traditionally, AJAX was implemented using the `XMLHttpRequest` API, but the `fet
 
 Here's a basic example of how it can be used:
 
-```js
+```js live
 let xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function () {
   if (xhr.readyState === XMLHttpRequest.DONE) {
@@ -70,7 +70,7 @@ Alternatively, the `fetch()` API provides a modern, promise-based approach to ma
 
 Here's how you can use it:
 
-```js
+```js live
 fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then((response) => {
     if (!response.ok) {
@@ -100,8 +100,8 @@ In modern browsers, AJAX is done using the `fetch()` API instead of `XMLHTTPRequ
 2. **Return a promise**: The `fetch()` function returns a `Promise` that resolves to a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object representing the response from the server. This `Promise needs` to be handled using `.then()` or `async/await`.
 3. **Handling the response**: The `Response` object provides methods to define how the body content should be handled, such as `.json()` for parsing JSON data, `.text()` for plain text, `.blob()` for binary data, etc.
 
-   ```js
-   fetch('https://api.example.com/data')
+   ```js live
+   fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then((response) => response.json())
      .then((data) => console.log(data))
      .catch((error) => console.error('Error:', error));
diff --git a/questions/explain-function-prototype-bind/en-US.mdx b/questions/explain-function-prototype-bind/en-US.mdx
index c3bc5b3..9968267 100644
--- a/questions/explain-function-prototype-bind/en-US.mdx
+++ b/questions/explain-function-prototype-bind/en-US.mdx
@@ -20,7 +20,7 @@ The `bind` method is particularly useful in scenarios where you need to ensure t
 
 `bind` was frequently used on legacy React class component methods which were not defined using arrow functions.
 
-```js
+```js live
 const john = {
   age: 42,
   getAge: function () {
@@ -53,28 +53,28 @@ Here are some common scenarios where `bind` is frequently used:
 
 When you pass a function as a callback, the `this` value inside the function can be unpredictable because it is determined by the execution context. Using `bind()` helps ensure that the correct `this` value is maintained.
 
-```js
+```js live
 class Person {
-  constructor(name) {
-    this.name = name;
+  constructor(firstName) {
+    this.firstName = firstName;
   }
   greet() {
-    console.log(`Hello, my name is ${this.name}`);
-  },
-};
+    console.log(`Hello, my name is ${this.firstName}`);
+  }
+}
 
-const john = new Person('John Doe');
+const john = new Person('John');
 
 // Without bind(), `this` inside the callback will be the global object
 setTimeout(john.greet, 1000); // Output: "Hello, my name is undefined"
 
 // Using bind() to fix the `this` value
-setTimeout(john.greet.bind(john), 2000); // Output: "Hello, my name is John Doe"
+setTimeout(john.greet.bind(john), 2000); // Output: "Hello, my name is John"
 ```
 
 You can also use [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) to define class methods for this purpose instead of using `bind`. Arrow functions have the `this` value bound to its lexical context.
 
-```js
+```js live
 class Person {
   constructor(name) {
     this.name = name;
@@ -92,7 +92,7 @@ setTimeout(john.greet, 1000); // Output: "Hello, my name is John Doe"
 
 `bind` can be used to create a new function with some arguments pre-set. This is known as partial application or currying.
 
-```js
+```js live
 function multiply(a, b) {
   return a * b;
 }
@@ -106,7 +106,7 @@ console.log(multiplyBy5(3)); // Output: 15
 
 `bind` allows you to borrow methods from one object and apply them to another object, even if they were not originally designed to work with that object. This can be handy when you need to reuse functionality across different objects
 
-```js
+```js live
 const person = {
   name: 'John',
   greet: function () {
diff --git a/questions/explain-the-concept-of-a-microtask-queue/en-US.mdx b/questions/explain-the-concept-of-a-microtask-queue/en-US.mdx
index 0e827c8..a60ce88 100644
--- a/questions/explain-the-concept-of-a-microtask-queue/en-US.mdx
+++ b/questions/explain-the-concept-of-a-microtask-queue/en-US.mdx
@@ -24,7 +24,7 @@ The microtask queue is a part of the JavaScript event loop mechanism. It is a qu
 
 Here is an example to illustrate how the microtask queue works:
 
-```js
+```js live
 console.log('Script start');
 
 setTimeout(() => {
diff --git a/questions/explain-the-concept-of-the-web-socket-api/en-US.mdx b/questions/explain-the-concept-of-the-web-socket-api/en-US.mdx
index cea6b54..d7374b5 100644
--- a/questions/explain-the-concept-of-the-web-socket-api/en-US.mdx
+++ b/questions/explain-the-concept-of-the-web-socket-api/en-US.mdx
@@ -6,13 +6,15 @@ title: Explain the concept of the Web Socket API
 
 The WebSocket API provides a way to open a persistent connection between a client and a server, allowing for real-time, two-way communication. Unlike HTTP, which is request-response based, WebSocket enables full-duplex communication, meaning both the client and server can send and receive messages independently. This is particularly useful for applications like chat apps, live updates, and online gaming.
 
-```js
-// Example of creating a WebSocket connection
-const socket = new WebSocket('ws://example.com/socket');
+The following example uses Postman's WebSocket echo service to demonstrate how web sockets work.
+
+```js live
+// Postman's echo server that will echo back messages you send
+const socket = new WebSocket('wss://ws.postman-echo.com/raw');
 
 // Event listener for when the connection is open
 socket.addEventListener('open', function (event) {
-  socket.send('Hello Server!');
+  socket.send('Hello Server!'); // Sends the message to the Postman WebSocket server
 });
 
 // Event listener for when a message is received from the server
@@ -42,16 +44,16 @@ The WebSocket API is a technology that provides a way to establish a persistent,
 
 ### Example usage
 
-Here is a basic example of how to use the WebSocket API in JavaScript:
+Here is a basic example of how to use the WebSocket API in JavaScript, using Postman's WebSocket Echo Service.
 
-```js
-// Create a new WebSocket connection
-const socket = new WebSocket('ws://example.com/socket');
+```js live
+// Postman's echo server that will echo back messages you send
+const socket = new WebSocket('wss://ws.postman-echo.com/raw');
 
 // Event listener for when the connection is open
 socket.addEventListener('open', function (event) {
   console.log('Connection opened');
-  socket.send('Hello Server!');
+  socket.send('Hello Server!'); // Sends the message to the Postman WebSocket server
 });
 
 // Event listener for when a message is received from the server
diff --git a/questions/explain-the-difference-between-mutable-and-immutable-objects/en-US.mdx b/questions/explain-the-difference-between-mutable-and-immutable-objects/en-US.mdx
index 0d2248c..974373d 100644
--- a/questions/explain-the-difference-between-mutable-and-immutable-objects/en-US.mdx
+++ b/questions/explain-the-difference-between-mutable-and-immutable-objects/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the difference between mutable and immutable objects in JavaScrip
 
 **Mutable objects** allow for modification of properties and values after creation, which is the default behavior for most objects.
 
-```js
+```js live
 const mutableObject = {
   name: 'John',
   age: 30,
@@ -21,7 +21,7 @@ console.log(mutableObject); // Output: { name: 'Jane', age: 30 }
 
 **Immutable objects** cannot be directly modified after creation. Its content cannot be changed without creating an entirely new value.
 
-```js
+```js live
 const immutableObject = Object.freeze({
   name: 'John',
   age: 30,
@@ -46,7 +46,7 @@ Immutability is a core principle in functional programming but it has lots to of
 
 Mutability refers to the ability of an object to have its properties or elements changed after it's created. A mutable object is an object whose state can be modified after it is created. In JavaScript, objects and arrays are mutable by default. They store references to their data in memory. Changing a property or element modifies the original object. Here is an example of a mutable object:
 
-```js
+```js live
 const mutableObject = {
   name: 'John',
   age: 30,
@@ -63,7 +63,7 @@ console.log(mutableObject); // Output: { name: 'Jane', age: 30 }
 
 An immutable object is an object whose state cannot be modified after it is created. Here is an example of an immutable object:
 
-```js
+```js live
 const immutableObject = Object.freeze({
   name: 'John',
   age: 30,
@@ -78,7 +78,7 @@ console.log(immutableObject); // Output: { name: 'John', age: 30 }
 
 Primitive data types like numbers, strings, booleans, `null`, and `undefined` are inherently immutable. Once assigned a value, you cannot directly modify them.
 
-```js
+```js live
 let name = 'Alice';
 name.toUpperCase(); // This won't modify the original name variable
 console.log(name); // Still prints "Alice"
@@ -101,7 +101,7 @@ A common confusion / misunderstanding is that declaring a variable using `const`
 
 On the other hand, an immutable object is an object whose state (properties and values) cannot be modified after it is created. This is achieved by using methods like `Object.freeze()` which makes the object immutable by preventing any changes to its properties.
 
-```js
+```js live
 // Using const
 const person = { name: 'John' };
 person = { name: 'Jane' }; // Error: Assignment to constant variable
@@ -127,7 +127,7 @@ Here are a few ways to add/simulate different forms of immutability in plain Jav
 
 By combining `writable: false` and `configurable: false`, you can essentially create a constant (cannot be changed, redefined or deleted) as an object property, like:
 
-```js
+```js live
 const myObject = {};
 Object.defineProperty(myObject, 'number', {
   value: 42,
@@ -143,7 +143,7 @@ console.log(myObject.number); // 42
 
 If you want to prevent an object from having new properties added to it, but otherwise leave the rest of the object's properties alone, call `Object.preventExtensions(...)`:
 
-```js
+```js live
 let myObject = {
   a: 2,
 };
@@ -151,7 +151,7 @@ let myObject = {
 Object.preventExtensions(myObject);
 
 myObject.b = 3;
-myObject.b; // undefined
+console.log(myObject.b); // undefined
 ```
 
 In non-strict mode, the creation of `b` fails silently. In strict mode, it throws a `TypeError`.
@@ -160,7 +160,7 @@ In non-strict mode, the creation of `b` fails silently. In strict mode, it throw
 
 `Object.seal()` creates a "sealed" object, which means it takes an existing object and essentially calls `Object.preventExtensions()` on it, but also marks all its existing properties as `configurable: false`. Therefore, not only can you not add any more properties, but you also cannot reconfigure or delete any existing properties, though you can still modify their values.
 
-```js
+```js live
 // Create an object
 const person = {
   name: 'John Doe',
@@ -181,8 +181,8 @@ person.age = 35;
 
 console.log(person); // Output: { name: 'John Doe', age: 35 }
 
-// Try to re-configure an existing property descriptor (this will fail)
-Object.defineProperty(person, 'name', { writable: false }); // TypeError: Cannot redefine property: name
+// Try to re-configure an existing property descriptor (this will fail silently)
+Object.defineProperty(person, 'name', { writable: false }); // Fails silently in non strict mode
 
 // Check if the object is sealed
 console.log(Object.isSealed(person)); // Output: true
@@ -202,7 +202,7 @@ Freezing an object does not allow new properties to be added to an object and pr
 
 `Object.freeze()` makes the object immutable. However, it is not necessarily constant. `Object.freeze` prevents modifications to the object itself and its direct properties, nested objects within the frozen object can still be modified.
 
-```js
+```js live
 let obj = {
   user: {},
 };
diff --git a/questions/explain-the-observer-pattern-and-its-use-cases/en-US.mdx b/questions/explain-the-observer-pattern-and-its-use-cases/en-US.mdx
index a5b8874..a0d28d7 100644
--- a/questions/explain-the-observer-pattern-and-its-use-cases/en-US.mdx
+++ b/questions/explain-the-observer-pattern-and-its-use-cases/en-US.mdx
@@ -23,7 +23,7 @@ The Observer pattern is a behavioral design pattern that defines a one-to-many d
 
 Here is a simple example in JavaScript:
 
-```js
+```js live
 class Subject {
   constructor() {
     this.observers = [];
diff --git a/questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.mdx b/questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.mdx
index f19d9eb..51fb33b 100644
--- a/questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.mdx
+++ b/questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.mdx
@@ -14,33 +14,50 @@ To optimize DOM manipulation for better performance, minimize direct DOM access
 
 Accessing the DOM is relatively slow, so try to minimize the number of times you read from or write to the DOM. Instead, store references to elements in variables and work with those.
 
-```js
-const element = document.getElementById('myElement');
+```js live
+// Creating an element for the example below
+const newElement = document.createElement('div');
+newElement.id = 'myElement';
+document.body.appendChild(newElement);
+
+const element = document.getElementById('myElement'); // Access once
+// Then use the reference to edit style
 element.style.color = 'red';
 element.style.backgroundColor = 'blue';
+
+console.log(document.body); // Notice the edits
 ```
 
 ### Batch DOM changes
 
 Instead of making multiple changes to the DOM one at a time, batch them together. This reduces the number of reflows and repaints.
 
-```js
+```js live
+// Creating an element for the example below
+const newElement = document.createElement('div');
+newElement.id = 'myElement';
+document.body.appendChild(newElement);
+
 const element = document.getElementById('myElement');
 element.style.cssText = 'color: red; background-color: blue;';
+
+console.log(document.body); // Notice the edits
 ```
 
 ### Use `documentFragment`
 
 When adding multiple elements to the DOM, use a `documentFragment` to minimize reflows and repaints.
 
-```js
+```js live
 const fragment = document.createDocumentFragment();
 for (let i = 0; i < 100; i++) {
   const newElement = document.createElement('div');
   newElement.textContent = `Item ${i}`;
   fragment.appendChild(newElement);
 }
-document.getElementById('container').appendChild(fragment);
+document.body.appendChild(fragment);
+
+console.log(document.body); // Notice that the divs have been added
 ```
 
 ### Leverage virtual DOM libraries
@@ -76,7 +93,12 @@ requestAnimationFrame(animate);
 
 Layout thrashing occurs when you read and write to the DOM repeatedly in a way that forces the browser to recalculate styles and layout multiple times. To avoid this, separate read and write operations.
 
-```js
+```js live
+// Creating an element for the example below
+const newElement = document.createElement('div');
+newElement.id = 'myElement';
+document.body.appendChild(newElement);
+
 const element = document.getElementById('myElement');
 const height = element.clientHeight; // Read
 element.style.height = `${height + 10}px`; // Write
diff --git a/questions/how-do-currying-and-partial-application-differ-from-each-other/en-US.mdx b/questions/how-do-currying-and-partial-application-differ-from-each-other/en-US.mdx
index 439ee45..8e4e27a 100644
--- a/questions/how-do-currying-and-partial-application-differ-from-each-other/en-US.mdx
+++ b/questions/how-do-currying-and-partial-application-differ-from-each-other/en-US.mdx
@@ -16,7 +16,7 @@ Currying is a technique where a function with multiple arguments is transformed
 
 #### Example
 
-```js
+```js live
 function add(a) {
   return function (b) {
     return function (c) {
@@ -25,7 +25,8 @@ function add(a) {
   };
 }
 
-const result = add(1)(2)(3); // 6
+const result = add(1)(2)(3);
+console.log(result); // 6
 ```
 
 In this example, `add` is a curried function that takes three arguments one at a time.
@@ -36,13 +37,14 @@ Partial application is a technique where you fix a few arguments of a function,
 
 #### Example
 
-```js
+```js live
 function add(a, b, c) {
   return a + b + c;
 }
 
 const addOne = add.bind(null, 1);
-const result = addOne(2, 3); // 6
+const result = addOne(2, 3);
+console.log(result); // 6
 ```
 
 In this example, `addOne` is a partially applied function that fixes the first argument of `add` to `1`.
diff --git a/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx b/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx
index 7d7b5bb..f7c7338 100644
--- a/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx
+++ b/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx
@@ -6,7 +6,7 @@ title: How do you abort a web request using `AbortController` in JavaScript?
 
 `AbortController` is used to cancel ongoing asynchronous operations like fetch requests.
 
-```js
+```js live
 const controller = new AbortController();
 const signal = controller.signal;
 
@@ -48,7 +48,7 @@ Using `AbortController`s involve the following steps:
 
 Here is an example of how to use `AbortController`s with the `fetch()` API:
 
-```js
+```js live
 const controller = new AbortController();
 const signal = controller.signal;
 
@@ -74,11 +74,12 @@ controller.abort();
 
 Cancel requests that take too long or are no longer relevant due to user interactions (e.g., user cancels uploading of a huge file).
 
-```js
-// HTML:
-// <div>
-//   <button id="cancel-button">Cancel upload</button>
-// </div>
+```js live
+// HTML: <button id='cancel-button'>Cancel upload</button>
+const btn = document.createElement('button');
+btn.id = 'cancel-button';
+btn.innerHTML = 'Cancel upload';
+document.body.appendChild(btn);
 
 const controller = new AbortController();
 const signal = controller.signal;
@@ -98,6 +99,7 @@ fetch('https://jsonplaceholder.typicode.com/todos/1', { signal })
 document.getElementById('cancel-button').addEventListener('click', () => {
   controller.abort();
 });
+document.getElementById('cancel-button').click(); // Simulate clicking the cancel button
 ```
 
 When you click the "Cancel upload" button, in-flight request will be aborted.
@@ -106,7 +108,7 @@ When you click the "Cancel upload" button, in-flight request will be aborted.
 
 In scenarios where multiple requests are initiated for the same data, use `AbortController` to prioritize the latest request and abort earlier ones.
 
-```js
+```js live
 let latestController = null; // Keeps track of the latest controller
 
 function fetchData(url) {
@@ -119,9 +121,8 @@ function fetchData(url) {
   const signal = controller.signal;
 
   fetch(url, { signal })
-    .then((response) => {
-      // Handle successful response
-    })
+    .then((response) => response.json())
+    .then((data) => console.log('Fetched data:', data))
     .catch((error) => {
       if (error.name === 'AbortError') {
         console.log('Request canceled');
@@ -130,6 +131,17 @@ function fetchData(url) {
       }
     });
 }
+
+fetchData('https://jsonplaceholder.typicode.com/posts/1');
+
+// Simulate race conditions with new requests that quickly cancel the previous one
+setTimeout(() => {
+  fetchData('https://jsonplaceholder.typicode.com/posts/2');
+}, 5);
+setTimeout(() => {
+  fetchData('https://jsonplaceholder.typicode.com/posts/3');
+}, 5);
+// Only the last request should (posts/3) will be allowed to complete
 ```
 
 In this example, when the `fetchData()` function is called multiple times triggering multiple fetch requests, `AbortController`s will cancel all the previous requests except the latest request. This is common in scenarios like type-ahead search or infinite scrolling, where new requests are triggered frequently.
diff --git a/questions/how-does-hoisting-affect-function-declarations-and-expressions/en-US.mdx b/questions/how-does-hoisting-affect-function-declarations-and-expressions/en-US.mdx
index b7069d1..b874575 100644
--- a/questions/how-does-hoisting-affect-function-declarations-and-expressions/en-US.mdx
+++ b/questions/how-does-hoisting-affect-function-declarations-and-expressions/en-US.mdx
@@ -6,7 +6,7 @@ title: How does hoisting affect function declarations and expressions?
 
 Hoisting in JavaScript means that function declarations are moved to the top of their containing scope during the compile phase, making them available throughout the entire scope. This allows you to call a function before it is defined in the code. However, function expressions are not hoisted in the same way. If you try to call a function expression before it is defined, you will get an error because the variable holding the function is hoisted but not its assignment.
 
-```js
+```js live
 // Function declaration
 console.log(foo()); // Works fine
 function foo() {
@@ -28,7 +28,7 @@ var bar = function () {
 
 Function declarations are hoisted to the top of their containing scope. This means you can call the function before it is defined in the code.
 
-```js
+```js live
 console.log(foo()); // Works fine
 function foo() {
   return 'Hello';
@@ -41,7 +41,7 @@ In the example above, the function `foo` is hoisted to the top of its scope, so
 
 Function expressions, on the other hand, are not hoisted in the same way. The variable that holds the function is hoisted, but its assignment is not. This means that if you try to call a function expression before it is defined, you will get an error.
 
-```js
+```js live
 console.log(bar()); // Throws TypeError: bar is not a function
 var bar = function () {
   return 'Hello';
@@ -57,7 +57,7 @@ It's also important to note the differences in hoisting behavior between `var`,
 - `var`: The variable is hoisted and initialized with `undefined`.
 - `let` and `const`: The variables are hoisted but not initialized, leading to a `ReferenceError` if accessed before initialization.
 
-```js
+```js live
 console.log(baz); // undefined
 var baz = function () {
   return 'Hello';
diff --git a/questions/how-is-promiseall-different-from-promiseallsettled/en-US.mdx b/questions/how-is-promiseall-different-from-promiseallsettled/en-US.mdx
index e3cee75..910496d 100644
--- a/questions/how-is-promiseall-different-from-promiseallsettled/en-US.mdx
+++ b/questions/how-is-promiseall-different-from-promiseallsettled/en-US.mdx
@@ -16,7 +16,7 @@ title: How is `Promise.all()` different from `Promise.allSettled()`?
 
 #### Example
 
-```js
+```js live
 const promise1 = Promise.resolve(3);
 const promise2 = 42;
 const promise3 = new Promise((resolve, reject) => {
@@ -36,7 +36,7 @@ In this example, `Promise.all()` resolves with an array of results `[3, 42, 'foo
 
 #### Failure case
 
-```js
+```js live
 const promise1 = Promise.resolve(3);
 const promise2 = Promise.reject('error');
 const promise3 = new Promise((resolve, reject) => {
@@ -60,7 +60,7 @@ In this example, `Promise.all()` rejects immediately with the reason `'error'` b
 
 #### Example
 
-```js
+```js live
 const promise1 = Promise.resolve(3);
 const promise2 = 42;
 const promise3 = new Promise((resolve, reject) => {
@@ -79,7 +79,7 @@ In this example, `Promise.allSettled()` resolves with an array of result objects
 
 #### Failure case
 
-```js
+```js live
 const promise1 = Promise.resolve(3);
 const promise2 = Promise.reject('error');
 const promise3 = new Promise((resolve, reject) => {
diff --git a/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx b/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx
index 83bb42c..835bb5e 100644
--- a/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx
+++ b/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx
@@ -15,7 +15,7 @@ In JavaScript, iterators and generators are powerful tools for managing sequence
 
 Here's an example of an object implementing the iterator interface.
 
-```js
+```js live
 const iterator = {
   current: 0,
   last: 5,
@@ -37,7 +37,7 @@ while (!result.done) {
 
 **Generators** are a special functions that **can pause execution and resume at a later point**. It uses the `function*` syntax and the `yield` keyword to control the flow of execution. When you call a generator function, it doesn't execute completely like a regular function. Instead, it returns an iterator object. Calling the `next()` method on the returned iterator advances the generator to the next `yield` statement, and the value after `yield` becomes the return value of `next()`.
 
-```js
+```js live
 function* numberGenerator() {
   let num = 0;
   while (num <= 5) {
@@ -74,7 +74,7 @@ Iterators are objects that define a sequence and provide a `next()` method to ac
 
 In JavaScript, we can provide a default implementation for iterator by implementing `[Symbol.iterator]()` in any custom object.
 
-```js
+```js live
 // Define a class named Range
 class Range {
   // The constructor takes two parameters: start and end
@@ -122,7 +122,7 @@ In JavaScript, several built-in objects implement the iterator protocol, meaning
 
 1. **Arrays**: Arrays have a built-in iterator that allows you to iterate over their elements.
 
-   ```js
+   ```js live
    const array = [1, 2, 3];
    const iterator = array[Symbol.iterator]();
 
@@ -138,7 +138,7 @@ In JavaScript, several built-in objects implement the iterator protocol, meaning
 
 2. **Strings**: Strings have a built-in iterator that allows you to iterate over their characters.
 
-   ```js
+   ```js live
    const string = 'hello';
    const iterator = string[Symbol.iterator]();
 
@@ -156,16 +156,20 @@ In JavaScript, several built-in objects implement the iterator protocol, meaning
 
 3. **DOM NodeLists**
 
-   ```js
+   ```js live
+   // Create a new div and append it to the DOM
+   const newDiv = document.createElement('div');
+   newDiv.id = 'div1';
+   document.body.appendChild(newDiv);
+
    const nodeList = document.querySelectorAll('div');
    const iterator = nodeList[Symbol.iterator]();
 
-   console.log(iterator.next()); // { value: firstDiv, done: false }
-   console.log(iterator.next()); // { value: secondDiv, done: false }
-   // ...
+   console.log(iterator.next()); // { value: HTMLDivElement, done: false }
+   console.log(iterator.next()); // { value: undefined, done: true }
 
    for (const node of nodeList) {
-     console.log(node); // Logs each <div> element
+     console.log(node); // Logs each <div> element, in this case only div1
    }
    ```
 
@@ -189,7 +193,7 @@ Generators provide several benefits:
 
 We can rewrite our `Range` example to use a generator function:
 
-```js
+```js live
 // Define a class named Range
 class Range {
   // The constructor takes two parameters: start and end
@@ -225,24 +229,33 @@ for (const number of range) {
 
 Generators are well-suited for iterating over data streams, such as fetching data from an API or reading files. This example demonstrates using a generator to fetch data from an API in batches:
 
-```js
-async function* fetchDataInBatches(url, batchSize = 10) {
+```js live
+async function* fetchDataInBatches(url, numBatches = 5, batchSize = 10) {
   let startIndex = 0;
-  while (true) {
+  let currBatch = 0;
+
+  while (currBatch < numBatches) {
     const response = await fetch(
-      `${url}?start=${startIndex}&limit=${batchSize}`,
+      `${url}?_start=${startIndex}&_limit=${batchSize}`,
     );
     const data = await response.json();
     if (data.length === 0) break;
     yield data;
     startIndex += batchSize;
+    currBatch += 1;
   }
 }
 
-const dataGenerator = fetchDataInBatches('https://api.example.com/data');
-for await (const batch of dataGenerator) {
-  console.log(batch);
+async function fetchAndLogData() {
+  const dataGenerator = fetchDataInBatches(
+    'https://jsonplaceholder.typicode.com/todos',
+  );
+
+  for await (const batch of dataGenerator) {
+    console.log(batch);
+  }
 }
+fetchAndLogData();
 ```
 
 This generator function `fetchDataInBatches` fetches data from an API in batches of a specified size. It yields each batch of data, allowing you to process it before fetching the next batch. This approach can be more memory-efficient than fetching all data at once.
@@ -251,22 +264,29 @@ This generator function `fetchDataInBatches` fetches data from an API in batches
 
 Generators can be used to implement asynchronous iterators, which are useful for working with asynchronous data sources. This example demonstrates an asynchronous iterator for fetching data from an API:
 
-```js
-async function* fetchDataAsyncIterator(url) {
-  let page = 1;
-  while (true) {
-    const response = await fetch(`${url}?page=${page}`);
+```js live
+async function* fetchDataAsyncIterator(url, pagesToFetch = 3) {
+  let currPage = 1;
+
+  while (currPage <= pagesToFetch) {
+    const response = await fetch(`${url}?_page=${currPage}`);
     const data = await response.json();
     if (data.length === 0) break;
     yield data;
-    page++;
+    currPage++;
   }
 }
 
-const asyncIterator = fetchDataAsyncIterator('https://api.example.com/data');
-for await (const chunk of asyncIterator) {
-  console.log(chunk);
+async function fetchAndLogData() {
+  const asyncIterator = fetchDataAsyncIterator(
+    'https://jsonplaceholder.typicode.com/todos',
+  );
+
+  for await (const chunk of asyncIterator) {
+    console.log(chunk);
+  }
 }
+fetchAndLogData();
 ```
 
 The generator function `fetchDataAsyncIterator` is an asynchronous iterator that fetches data from an API in pages. It yields each page of data, allowing you to process it before fetching the next page. This approach can be useful for handling large datasets or long-running operations.
diff --git a/questions/what-are-javascript-object-getters-and-setters-for/en-US.mdx b/questions/what-are-javascript-object-getters-and-setters-for/en-US.mdx
index 6437dbf..ba64882 100644
--- a/questions/what-are-javascript-object-getters-and-setters-for/en-US.mdx
+++ b/questions/what-are-javascript-object-getters-and-setters-for/en-US.mdx
@@ -10,7 +10,7 @@ Getters and setters are defined using the `get` and `set` keywords, respectively
 
 Here's a code example demonstrating the use of getters and setters:
 
-```js
+```js live
 const person = {
   _name: 'John Doe', // Private property
 
@@ -48,7 +48,7 @@ In JavaScript, getters and setters are special methods that allow you to control
 - **Getters**: Functions that are invoked whenever you try to access a property using dot notation (e.g., `obj.name`). They provide a way to customize the value that is returned when the property is read.
 - **Setters**: Functions that are called when you try to assign a value to a property using dot notation with the assignment operator (e.g., `obj.name = "John"`). They allow you to perform actions like data validation, formatting, or side effects before the actual value is stored in the object.
 
-```js
+```js live
 const person = {
   _firstName: 'John',
   _lastName: 'Doe',
diff --git a/questions/what-are-javascript-object-property-flags-and-descriptors/en-US.mdx b/questions/what-are-javascript-object-property-flags-and-descriptors/en-US.mdx
index 628a26b..1aba913 100644
--- a/questions/what-are-javascript-object-property-flags-and-descriptors/en-US.mdx
+++ b/questions/what-are-javascript-object-property-flags-and-descriptors/en-US.mdx
@@ -43,7 +43,7 @@ Property flags are used to specify the behavior of a property. They are set usin
 
 Property descriptors provide detailed information about an object's property, encapsulating its value and flags. They are retrieved using `Object.getOwnPropertyDescriptor()` and set using `Object.defineProperty()`
 
-```js
+```js live
 let user = { name: 'John Doe' };
 let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
 
@@ -56,7 +56,7 @@ console.log(descriptor); // {value: "John Doe", writable: true, enumerable: true
 
 The `writable` flag specifies whether a property can be written to. When `writable` is `false`, trying to assign value to the property fails silently in non-strict mode, and it throws a `TypeError` in strict mode.
 
-```js
+```js live
 const obj = {};
 
 Object.defineProperty(obj, 'name', {
@@ -65,14 +65,15 @@ Object.defineProperty(obj, 'name', {
 });
 
 console.log(obj.name); // Output: John Doe
-obj.name = 'Jane Doe'; // TypeError: Cannot assign to read only property 'name' of object '#<Object>'
+obj.name = 'Jane Doe'; // This does not change name. Generates TypeError in strict mode
+console.log(obj.name); // Output: John Doe (unchanged)
 ```
 
 ### `enumerable` flag
 
 The `enumerable` flag specifies whether a property is enumerable. The `enumerable flag` is set to `true`, which means the property is visible in a `for...in` loop.
 
-```js
+```js live
 const obj = {};
 
 Object.defineProperty(obj, 'name', {
@@ -100,7 +101,7 @@ for (const prop in obj1) {
 
 The `configurable` flag specifies whether a property can be deleted or its attributes changed. When `configurable` is `false`, trying to delete or change the property fails silently in non-strict mode, and it throws a `TypeError` in strict mode.
 
-```js
+```js live
 const obj = {};
 
 Object.defineProperty(obj, 'name', {
@@ -108,7 +109,8 @@ Object.defineProperty(obj, 'name', {
   value: 'John Doe',
 });
 
-delete obj.name; // Output: TypeError: Cannot delete property 'name' of #<Object>
+delete obj.name; // Does not delete property. Generates TypeError in strict mode
+console.log(obj.name); // Output: John Doe (not deleted)
 ```
 
 ## `Object.seal()`
diff --git a/questions/what-are-javascript-polyfills-for/en-US.mdx b/questions/what-are-javascript-polyfills-for/en-US.mdx
index db2fe65..f54a355 100644
--- a/questions/what-are-javascript-polyfills-for/en-US.mdx
+++ b/questions/what-are-javascript-polyfills-for/en-US.mdx
@@ -41,7 +41,7 @@ Polyfills detect if a feature or API is missing in a browser and provide a custo
 
 For example, let's consider the `Array.prototype.includes()` method, which determines if an array includes a specific element. This method is not supported in older browsers like Internet Explorer 11. To address this, we can use a polyfill:
 
-```js
+```js live
 // Polyfill for Array.prototype.includes()
 if (!Array.prototype.includes) {
   Array.prototype.includes = function (searchElement) {
@@ -54,6 +54,9 @@ if (!Array.prototype.includes) {
     return false;
   };
 }
+
+console.log([1, 2, 3].includes(2)); // true
+console.log([1, 2, 3].includes(4)); // false
 ```
 
 By including this polyfill, we can safely use `Array.prototype.includes()` even in browsers that don't support it natively.
diff --git a/questions/what-are-proxies-in-javascript-used-for/en-US.mdx b/questions/what-are-proxies-in-javascript-used-for/en-US.mdx
index 270b5ce..5869497 100644
--- a/questions/what-are-proxies-in-javascript-used-for/en-US.mdx
+++ b/questions/what-are-proxies-in-javascript-used-for/en-US.mdx
@@ -8,7 +8,7 @@ In JavaScript, a proxy is an object that acts as an intermediary between an obje
 
 Here's a basic example of using a `Proxy` to log every property access:
 
-```js
+```js live
 const myObject = {
   name: 'John',
   age: 42,
@@ -23,11 +23,13 @@ const handler = {
 
 const proxiedObject = new Proxy(myObject, handler);
 
-console.log(proxiedObject.name); // 'John'
+console.log(proxiedObject.name);
 // Someone accessed property "name"
+// 'John'
 
-console.log(proxiedObject.age); // 42
+console.log(proxiedObject.age);
 // Someone accessed property "age"
+// 42
 ```
 
 Use cases include:
@@ -53,7 +55,7 @@ Here are some common use cases and examples of how proxies can be used in JavaSc
 
 Proxies can be used to intercept and customize property access on an object.
 
-```js
+```js live
 const target = {
   message: 'Hello, world!',
 };
@@ -78,7 +80,7 @@ console.log(proxy.nonExistentProperty); // Property nonExistentProperty does not
 
 This is useful for creating wrappers for logging and debugging interactions with an object.
 
-```js
+```js live
 const target = {
   name: 'Alice',
   age: 30,
@@ -109,7 +111,7 @@ console.log(proxy.age); // Output: Getting property age
 
 Proxies can be used to validate property values before they are set on the target object.
 
-```js
+```js live
 const target = {
   age: 25,
 };
@@ -136,7 +138,7 @@ Proxies are often used to trigger updates in other parts of your application whe
 
 A practical example is JavaScript frameworks like [Vue.js](https://vuejs.org/), where proxies are used to [create reactive systems that automatically update the UI when data changes](https://vuejs.org/guide/extras/reactivity-in-depth.html).
 
-```js
+```js live
 const target = {
   firstName: 'John',
   lastName: 'Doe',
@@ -164,7 +166,7 @@ Other use cases for access interception include:
 
 Proxies can intercept and customize function calls.
 
-```js
+```js live
 const target = function (name) {
   return `Hello, ${name}!`;
 };
@@ -188,7 +190,7 @@ This interception can be used to cache and return the result of frequently acces
 
 Proxies can be used to dynamically create properties or methods on an object. This is useful for defining properties on-the-fly with default values and avoid storing redundant data in objects.
 
-```js
+```js live
 const target = {};
 
 const handler = {
diff --git a/questions/what-are-some-techniques-for-reducing-reflows-and-repaints/en-US.mdx b/questions/what-are-some-techniques-for-reducing-reflows-and-repaints/en-US.mdx
index c0464ef..adf2378 100644
--- a/questions/what-are-some-techniques-for-reducing-reflows-and-repaints/en-US.mdx
+++ b/questions/what-are-some-techniques-for-reducing-reflows-and-repaints/en-US.mdx
@@ -28,8 +28,11 @@ Grouping multiple DOM changes together can reduce the number of reflows and repa
 
 Instead of changing styles directly via JavaScript, use CSS classes:
 
-```js
-element.classList.add('new-class');
+```js live
+const element = document.createElement('h1');
+element.classList.add('text-center');
+
+console.log(element); // Notice that the class has been added.
 ```
 
 ### Avoid complex CSS selectors
@@ -65,9 +68,14 @@ The `will-change` property can hint to the browser about which elements will cha
 
 Reading and writing to the DOM separately can prevent layout thrashing:
 
-```js
+```js live
+// Mock div element
+const element = document.createElement('div');
+
 const height = element.offsetHeight; // Read
 element.style.height = `${height + 10}px`; // Write
+
+console.log(element);
 ```
 
 ## Further reading
diff --git a/questions/what-are-the-benefits-of-using-currying-and-partial-application/en-US.mdx b/questions/what-are-the-benefits-of-using-currying-and-partial-application/en-US.mdx
index 7b3a84f..74f85f4 100644
--- a/questions/what-are-the-benefits-of-using-currying-and-partial-application/en-US.mdx
+++ b/questions/what-are-the-benefits-of-using-currying-and-partial-application/en-US.mdx
@@ -22,7 +22,7 @@ Currying is a technique where a function with multiple arguments is transformed
 
 #### Example
 
-```js
+```js live
 function add(a) {
   return function (b) {
     return a + b;
@@ -45,7 +45,7 @@ Partial application is a technique where you fix a few arguments of a function a
 
 #### Example
 
-```js
+```js live
 function multiply(a, b) {
   return a * b;
 }
diff --git a/questions/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.mdx b/questions/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.mdx
index 5121e80..0512d9d 100644
--- a/questions/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.mdx
+++ b/questions/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.mdx
@@ -14,7 +14,7 @@ The `this` keyword in JavaScript can be tricky because its value depends on how
 
 When you pass a method as a callback, the context of `this` can be lost. For example:
 
-```js
+```js live
 const obj = {
   value: 42,
   getValue: function () {
@@ -32,7 +32,7 @@ In this case, `this` inside `getValue` is not bound to `obj`.
 
 In nested functions, `this` does not refer to the outer function's context:
 
-```js
+```js live
 const obj = {
   value: 42,
   getValue: function () {
@@ -52,7 +52,7 @@ Here, `this` inside `innerFunction` refers to the global object, not `obj`.
 
 Arrow functions do not have their own `this` context; they inherit it from the enclosing scope:
 
-```js
+```js live
 const obj = {
   value: 42,
   getValue: () => {
@@ -71,7 +71,7 @@ In this example, `this` inside the arrow function refers to the global object, n
 
 You can use `.bind()` to explicitly set the context of `this`:
 
-```js
+```js live
 const obj = {
   value: 42,
   getValue: function () {
@@ -87,7 +87,7 @@ console.log(getValue()); // 42
 
 Arrow functions inherit `this` from the enclosing scope, which can be useful:
 
-```js
+```js live
 const obj = {
   value: 42,
   getValue: function () {
@@ -105,7 +105,7 @@ console.log(obj.getValue()); // 42
 
 You can store the context in a variable to maintain it in nested functions:
 
-```js
+```js live
 const obj = {
   value: 42,
   getValue: function () {
diff --git a/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx b/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx
index c7fc07f..68b2e8e 100644
--- a/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx
+++ b/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx
@@ -26,7 +26,7 @@ Both `XMLHttpRequest` (XHR) and `fetch()` are ways to make asynchronous HTTP req
 
 `XMLHttpRequest` is event-driven and requires attaching event listeners to handle response/error states. The basic syntax for creating an `XMLHttpRequest` object and sending a request is as follows:
 
-```js
+```js live
 const xhr = new XMLHttpRequest();
 xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
 xhr.responseType = 'json';
@@ -42,7 +42,7 @@ xhr.send();
 
 `fetch()` provides a more straightforward and intuitive way of making HTTP requests. It is `Promise`-based and returns a promise that resolves with the response or rejects with an error. The basic syntax for making a GET request using `fetch()` is as follows:
 
-```js
+```js live
 fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then((response) => response.text())
   .then((data) => console.log(data));
@@ -111,10 +111,10 @@ fetch('https://jsonplaceholder.typicode.com/todos/1', {
 
 `XMLHttpRequest` provides a `responseType` property to set the response format that we are expecting. `responseType` is `'text'` by default but it support types likes `'text'`, `'arraybuffer'`, `'blob'`, `'document'` and `'json'`.
 
-```js
+```js live
 const xhr = new XMLHttpRequest();
 xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
-xhr.responseType = 'json';
+xhr.responseType = 'json'; // or 'text', 'blob', 'arraybuffer'
 xhr.onload = function () {
   if (xhr.status === 200) {
     console.log(xhr.response);
@@ -125,7 +125,7 @@ xhr.send();
 
 On the other hand, `fetch()` provides a unified `Response` object with `then` method for accessing data.
 
-```js
+```js live
 // JSON data
 fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then((response) => response.json())
@@ -143,19 +143,28 @@ Both support error handling but `fetch()` provides more flexibility in terms of
 
 `XMLHttpRequest` supports error handling using the `onerror` event:
 
-```js
+```js live
+const xhr = new XMLHttpRequest();
+xhr.open('GET', 'https://jsonplaceholder.typicod.com/todos/1', true); // Typo in URL
+xhr.responseType = 'json';
+xhr.onload = function () {
+  if (xhr.status === 200) {
+    console.log(xhr.response);
+  }
+};
 xhr.onerror = function () {
-  console.log('Error occurred');
+  console.error('Error occurred');
 };
+xhr.send();
 ```
 
 `fetch()` supports error handling using the `catch()` method on the returned `Promise`:
 
-```js
-fetch('https://jsonplaceholder.typicode.com/todos/1')
+```js live
+fetch('https://jsonplaceholder.typicod.com/todos/1') // Typo in URL
   .then((response) => response.json())
   .then((data) => console.log(data))
-  .catch((error) => console.log('Error occurred: ' + error));
+  .catch((error) => console.error('Error occurred: ' + error));
 ```
 
 ## Caching control
@@ -171,11 +180,11 @@ const res = await fetch('https://jsonplaceholder.typicode.com/todos/1', {
 
 Other values for the [`cache` option](https://developer.mozilla.org/en-US/docs/Web/API/Request/cache) include `default`, `no-store`, `reload`, `no-cache`, `force-cache`, and `only-if-cached`.
 
-## cancelation
+## Cancelation
 
 In-flight `XMLHttpRequest`s can be canceled by running the `XMLHttpRequest`'s `abort()` method. An `abort` handler can be attached by assigning to the `.onabort` property if necessary:
 
-```js
+```js live
 const xhr = new XMLHttpRequest();
 xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
 xhr.send();
@@ -186,14 +195,14 @@ xhr.abort();
 
 Aborting a `fetch()` requires creating an [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) object and passing it to as the `signal` property of the `options` object when calling `fetch()`.
 
-```js
+```js live
 const controller = new AbortController();
 const signal = controller.signal;
 
 fetch('https://jsonplaceholder.typicode.com/todos/1', { signal })
   .then((response) => response.json())
   .then((data) => console.log(data))
-  .catch((error) => console.log('Error occurred: ' + error));
+  .catch((error) => console.error('Error occurred: ' + error));
 
 // Abort request.
 controller.abort();
diff --git a/questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/en-US.mdx b/questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/en-US.mdx
index 72b29ae..77e5c01 100644
--- a/questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/en-US.mdx
+++ b/questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/en-US.mdx
@@ -14,9 +14,9 @@ In JavaScript, you can make API calls using several methods. The most common one
 
 `XMLHttpRequest` is the traditional way to make API calls in JavaScript. It is more verbose and requires more code compared to modern methods.
 
-```js
+```js live
 const xhr = new XMLHttpRequest();
-xhr.open('GET', 'https://api.example.com/data', true);
+xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
 xhr.onreadystatechange = function () {
   if (xhr.readyState === 4 && xhr.status === 200) {
     console.log(JSON.parse(xhr.responseText));
@@ -29,8 +29,8 @@ xhr.send();
 
 `fetch` is a modern and more convenient way to make API calls. It returns a promise, making it easier to handle asynchronous operations.
 
-```js
-fetch('https://api.example.com/data')
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then((response) => {
     if (!response.ok) {
       throw new Error('Network response was not ok');
diff --git a/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx b/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx
index 979460c..15a2a50 100644
--- a/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx
+++ b/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx
@@ -14,23 +14,23 @@ Promises offer a cleaner alternative to callbacks, helping to avoid callback hel
 
 Callback hell, also known as the "pyramid of doom," is a phenomenon that occurs when you have multiple nested callbacks in your code. This can lead to code that is difficult to read, maintain, and debug. Here's an example of callback hell:
 
-```js
+```js live
 function getFirstData(callback) {
   setTimeout(() => {
     callback({ id: 1, title: 'First Data' });
-  }, 2000);
+  }, 1000);
 }
 
 function getSecondData(data, callback) {
   setTimeout(() => {
     callback({ id: data.id, title: data.title + ' Second Data' });
-  }, 2000);
+  }, 1000);
 }
 
 function getThirdData(data, callback) {
   setTimeout(() => {
     callback({ id: data.id, title: data.title + ' Third Data' });
-  }, 2000);
+  }, 1000);
 }
 
 // Callback hell
@@ -45,13 +45,13 @@ getFirstData((data) => {
 
 Promises address the problem of callback hell by providing a more linear and readable structure for your code.
 
-```js
+```js live
 // Example of sequential asynchronous code using setTimeout and Promises
 function getFirstData() {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve({ id: 1, title: 'First Data' });
-    }, 2000);
+    }, 1000);
   });
 }
 
@@ -59,7 +59,7 @@ function getSecondData(data) {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve({ id: data.id, title: data.title + ' Second Data' });
-    }, 2000);
+    }, 1000);
   });
 }
 
@@ -67,7 +67,7 @@ function getThirdData(data) {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve({ id: data.id, title: data.title + ' Third Data' });
-    }, 2000);
+    }, 1000);
   });
 }
 
@@ -88,12 +88,12 @@ In the above code example, we use `.then()` method to chain these Promises toget
 
 Both `Promise.all()` and callbacks can be used to write parallel asynchronous code. However, `Promise.all()` provides a more concise and readable way to handle multiple Promises, especially when dealing with complex asynchronous workflows.
 
-```js
+```js live
 function getData1() {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve({ id: 1, title: 'Data 1' });
-    }, 2000);
+    }, 1000);
   });
 }
 
@@ -101,7 +101,7 @@ function getData2() {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve({ id: 2, title: 'Data 2' });
-    }, 2000);
+    }, 1000);
   });
 }
 
@@ -109,7 +109,7 @@ function getData3() {
   return new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve({ id: 3, title: 'Data 3' });
-    }, 2000);
+    }, 1000);
   });
 }
 
diff --git a/questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.mdx b/questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.mdx
index 58f2a0c..b0a7fbc 100644
--- a/questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.mdx
+++ b/questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.mdx
@@ -6,16 +6,19 @@ title: What is async/await and how does it simplify asynchronous code?
 
 `async/await` is a modern syntax in JavaScript that simplifies working with promises. By using the `async` keyword before a function, you can use the `await` keyword inside that function to pause execution until a promise is resolved. This makes asynchronous code look and behave more like synchronous code, making it easier to read and maintain.
 
-```js
+```js live
 async function fetchData() {
   try {
-    const response = await fetch('https://api.example.com/data');
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/posts/1',
+    );
     const data = await response.json();
     console.log(data);
   } catch (error) {
     console.error('Error fetching data:', error);
   }
 }
+fetchData();
 ```
 
 ---
@@ -30,7 +33,7 @@ async function fetchData() {
 
 The `async` keyword is used to declare an asynchronous function. When a function is declared as `async`, it automatically returns a promise. This means you can use the `await` keyword inside it to pause the execution of the function until a promise is resolved.
 
-```js
+```js live
 async function exampleFunction() {
   return 'Hello, World!';
 }
@@ -42,16 +45,19 @@ exampleFunction().then(console.log); // Output: Hello, World!
 
 The `await` keyword can only be used inside an `async` function. It pauses the execution of the function until the promise is resolved, and then returns the resolved value. If the promise is rejected, it throws an error, which can be caught using a `try...catch` block.
 
-```js
+```js live
 async function fetchData() {
   try {
-    const response = await fetch('https://api.example.com/data');
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/posts/1',
+    );
     const data = await response.json();
     console.log(data);
   } catch (error) {
     console.error('Error fetching data:', error);
   }
 }
+fetchData();
 ```
 
 ### Simplifying asynchronous code
@@ -60,8 +66,8 @@ Before `async/await`, handling asynchronous operations often involved chaining m
 
 #### Example with promises
 
-```js
-fetch('https://api.example.com/data')
+```js live
+fetch('https://jsonplaceholder.typicode.com/posts/1')
   .then((response) => response.json())
   .then((data) => {
     console.log(data);
@@ -73,32 +79,36 @@ fetch('https://api.example.com/data')
 
 #### Example with async/await
 
-```js
+```js live
 async function fetchData() {
   try {
-    const response = await fetch('https://api.example.com/data');
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/posts/1',
+    );
     const data = await response.json();
     console.log(data);
   } catch (error) {
     console.error('Error fetching data:', error);
   }
 }
+fetchData();
 ```
 
 ### Error handling
 
 Error handling with `async/await` is more straightforward compared to promises. You can use `try...catch` blocks to handle errors, making the code cleaner and more intuitive.
 
-```js
+```js live
 async function fetchData() {
   try {
-    const response = await fetch('https://api.example.com/data');
+    const response = await fetch('https://jsonplaceholder.typicod.com/posts/1'); // Typo in URL
     const data = await response.json();
     console.log(data);
   } catch (error) {
     console.error('Error fetching data:', error);
   }
 }
+fetchData();
 ```
 
 ## Further reading
diff --git a/questions/what-is-objectpreventextensions-for/en-US.mdx b/questions/what-is-objectpreventextensions-for/en-US.mdx
index a77b209..5a4f489 100644
--- a/questions/what-is-objectpreventextensions-for/en-US.mdx
+++ b/questions/what-is-objectpreventextensions-for/en-US.mdx
@@ -6,7 +6,7 @@ title: What is `Object.preventExtensions()` for?
 
 `Object.preventExtensions()` is a method in JavaScript that prevents new properties from being added to an object. However, it does not affect the deletion or modification of existing properties. This method is useful when you want to ensure that an object remains in a certain shape and no additional properties can be added to it.
 
-```js
+```js live
 const obj = { name: 'John' };
 Object.preventExtensions(obj);
 
@@ -36,7 +36,7 @@ Object.preventExtensions(obj);
 
 ### Example
 
-```js
+```js live
 const obj = { name: 'John' };
 Object.preventExtensions(obj);
 
@@ -54,7 +54,7 @@ console.log(obj.name); // undefined
 
 You can check if an object is extensible using the `Object.isExtensible()` method.
 
-```js
+```js live
 const obj = { name: 'John' };
 console.log(Object.isExtensible(obj)); // true
 
diff --git a/questions/what-is-objectseal-for/en-US.mdx b/questions/what-is-objectseal-for/en-US.mdx
index adf3a60..18a4b83 100644
--- a/questions/what-is-objectseal-for/en-US.mdx
+++ b/questions/what-is-objectseal-for/en-US.mdx
@@ -4,15 +4,19 @@ title: What is `Object.seal()` for?
 
 ## TL;DR
 
-`Object.seal()` is used to prevent new properties from being added to an object and to mark all existing properties as non-configurable. This means you can still modify the values of existing properties, but you cannot delete them or add new ones.
+`Object.seal()` is used to prevent new properties from being added to an object and to mark all existing properties as non-configurable. This means you can still modify the values of existing properties, but you cannot delete them or add new ones. Doing so will throw errors in strict mode but fail silently in non-strict mode. In the following examples, you can uncomment the 'use strict' comment to see this.
+
+```js live
+// 'use strict'
 
-```js
 const obj = { name: 'John' };
 Object.seal(obj);
 
 obj.name = 'Jane'; // Allowed
-obj.age = 30; // Not allowed
-delete obj.name; // Not allowed
+obj.age = 30; // Not allowed, throws an error in strict mode
+delete obj.name; // Not allowed, throws an error in strict mode
+
+console.log(obj); // { name: 'Jane } (unchanged)
 ```
 
 ---
@@ -37,7 +41,9 @@ Object.seal(obj);
 
 ### Example
 
-```js
+```js live
+// 'use strict'
+
 const person = {
   name: 'Alice',
   age: 25,
@@ -51,7 +57,7 @@ person.age = 30; // Allowed
 person.gender = 'female'; // Not allowed, throws an error in strict mode
 delete person.name; // Not allowed, throws an error in strict mode
 
-console.log(person); // { name: 'Bob', age: 30 }
+console.log(person); // { name: 'Bob', age: 30 } (unchanged)
 ```
 
 ### Use cases
@@ -63,7 +69,7 @@ console.log(person); // { name: 'Bob', age: 30 }
 
 You can check if an object is sealed using the `Object.isSealed()` method.
 
-```js
+```js live
 const obj = { name: 'John' };
 Object.seal(obj);
 
diff --git a/questions/what-is-the-decorator-pattern-and-how-is-it-used/en-US.mdx b/questions/what-is-the-decorator-pattern-and-how-is-it-used/en-US.mdx
index 9941aea..f4d8366 100644
--- a/questions/what-is-the-decorator-pattern-and-how-is-it-used/en-US.mdx
+++ b/questions/what-is-the-decorator-pattern-and-how-is-it-used/en-US.mdx
@@ -8,7 +8,7 @@ The Decorator pattern is a structural design pattern that allows behavior to be
 
 For example, if you have a `Car` class and you want to add features like `GPS` or `Sunroof` without modifying the `Car` class itself, you can create decorators for these features.
 
-```js
+```js live
 class Car {
   drive() {
     return 'Driving';
@@ -56,7 +56,7 @@ The Decorator pattern is a structural design pattern that allows you to dynamica
 
 In JavaScript, the Decorator pattern can be implemented using classes. Here is an example:
 
-```js
+```js live
 class Car {
   drive() {
     return 'Driving';
@@ -96,7 +96,7 @@ console.log(myCarWithGPSAndSunroof.drive()); // "Driving with GPS with Sunroof"
 
 Another way to implement the Decorator pattern in JavaScript is by using higher-order functions:
 
-```js
+```js live
 function car() {
   return {
     drive: () => 'Driving',
diff --git a/questions/what-is-the-factory-pattern-and-how-is-it-used/en-US.mdx b/questions/what-is-the-factory-pattern-and-how-is-it-used/en-US.mdx
index 1d47154..0488d66 100644
--- a/questions/what-is-the-factory-pattern-and-how-is-it-used/en-US.mdx
+++ b/questions/what-is-the-factory-pattern-and-how-is-it-used/en-US.mdx
@@ -8,7 +8,7 @@ The Factory pattern is a design pattern used to create objects without specifyin
 
 For example, in JavaScript, you can use a factory function to create different types of objects:
 
-```js
+```js live
 function createAnimal(type) {
   if (type === 'dog') {
     return { sound: 'woof' };
@@ -43,7 +43,7 @@ In JavaScript, the Factory pattern can be implemented using factory functions or
 
 A factory function is a simple function that returns an object. It can contain logic to decide which type of object to create.
 
-```js
+```js live
 function createAnimal(type) {
   if (type === 'dog') {
     return { sound: 'woof' };
@@ -64,7 +64,7 @@ console.log(cat.sound); // Output: meow
 
 A factory class can be used to encapsulate the creation logic within a class structure.
 
-```js
+```js live
 class AnimalFactory {
   createAnimal(type) {
     if (type === 'dog') {
diff --git a/questions/what-is-the-intl-namespace-object-for/en-US.mdx b/questions/what-is-the-intl-namespace-object-for/en-US.mdx
index 48ffb41..bc28884 100644
--- a/questions/what-is-the-intl-namespace-object-for/en-US.mdx
+++ b/questions/what-is-the-intl-namespace-object-for/en-US.mdx
@@ -6,7 +6,7 @@ title: What is the `Intl` namespace object for?
 
 The `Intl` namespace object in JavaScript is used for internationalization purposes. It provides language-sensitive string comparison, number formatting, and date and time formatting. For example, you can use `Intl.DateTimeFormat` to format dates according to a specific locale:
 
-```js
+```js live
 const date = new Date();
 const formatter = new Intl.DateTimeFormat('en-US');
 console.log(formatter.format(date)); // Outputs date in 'MM/DD/YYYY' format
@@ -22,7 +22,7 @@ The `Intl` namespace object in JavaScript is a part of the ECMAScript Internatio
 
 The `Intl.Collator` object is used for comparing strings in a locale-aware manner. This is useful for sorting strings in a way that is consistent with the conventions of a particular language.
 
-```js
+```js live
 const collator = new Intl.Collator('de-DE');
 console.log(collator.compare('ä', 'z')); // Outputs a negative number because 'ä' comes before 'z' in German
 ```
@@ -31,7 +31,7 @@ console.log(collator.compare('ä', 'z')); // Outputs a negative number because '
 
 The `Intl.NumberFormat` object is used for formatting numbers according to the conventions of a specific locale. This includes formatting for currency, percentages, and plain numbers.
 
-```js
+```js live
 const number = 1234567.89;
 const formatter = new Intl.NumberFormat('de-DE', {
   style: 'currency',
@@ -44,7 +44,7 @@ console.log(formatter.format(number)); // Outputs '1.234.567,89 €'
 
 The `Intl.DateTimeFormat` object is used for formatting dates and times according to the conventions of a specific locale.
 
-```js
+```js live
 const date = new Date();
 const formatter = new Intl.DateTimeFormat('en-GB', {
   year: 'numeric',
@@ -58,7 +58,7 @@ console.log(formatter.format(date)); // Outputs date in 'DD Month YYYY' format
 
 The `Intl.PluralRules` object is used to get the plural form of a number in a specific locale. This is useful for correctly pluralizing words in different languages.
 
-```js
+```js live
 const pluralRules = new Intl.PluralRules('en-US');
 console.log(pluralRules.select(1)); // Outputs 'one'
 console.log(pluralRules.select(2)); // Outputs 'other'
diff --git a/questions/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/en-US.mdx b/questions/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/en-US.mdx
index db342a6..8236090 100644
--- a/questions/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/en-US.mdx
+++ b/questions/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/en-US.mdx
@@ -6,7 +6,7 @@ title: What is the Module pattern and how does it help with encapsulation?
 
 The Module pattern in JavaScript is a design pattern used to create self-contained modules of code. It helps with encapsulation by allowing you to define private and public members within a module. Private members are not accessible from outside the module, while public members are exposed through a returned object. This pattern helps in organizing code, avoiding global namespace pollution, and maintaining a clean separation of concerns.
 
-```js
+```js live
 var myModule = (function () {
   var privateVar = 'I am private';
 
@@ -40,7 +40,7 @@ The Module pattern typically involves an immediately-invoked function expression
 
 Here is a simple example of the Module pattern:
 
-```js
+```js live
 var myModule = (function () {
   // Private members
   var privateVar = 'I am private';
diff --git a/questions/what-is-the-purpose-of-the-finally-block/en-US.mdx b/questions/what-is-the-purpose-of-the-finally-block/en-US.mdx
index 5238e7c..e7b8c5d 100644
--- a/questions/what-is-the-purpose-of-the-finally-block/en-US.mdx
+++ b/questions/what-is-the-purpose-of-the-finally-block/en-US.mdx
@@ -24,24 +24,33 @@ try {
 
 The `finally` block is often used to ensure that certain cleanup code runs regardless of whether an error occurred or not. This is useful for tasks like closing files, releasing resources, or resetting states.
 
-```js
-try {
-  // Attempt to execute code that may throw an error
-  let data = fetchData();
-} catch (error) {
-  // Handle any errors that occur
-  console.error('An error occurred:', error);
-} finally {
-  // Always execute this code
-  console.log('Cleanup code runs here');
+```js live
+async function fetchData() {
+  try {
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/posts/1',
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    console.log('Fetched data:', data);
+  } catch (error) {
+    console.error('An error occurred:', error);
+  } finally {
+    console.log('Cleanup code runs here');
+  }
 }
+
+fetchData();
+// Try creating a typo in the URL to see error handling.
 ```
 
 ### Guaranteeing execution
 
 The `finally` block guarantees that the code within it will execute after the `try` and `catch` blocks have finished. This is true even if a `return` statement is encountered in the `try` or `catch` blocks.
 
-```js
+```js live
 function exampleFunction() {
   try {
     return 'Try block';
@@ -59,9 +68,10 @@ console.log(exampleFunction()); // Output: 'Finally block' followed by 'Try bloc
 
 When dealing with asynchronous code, the `finally` block can be used to ensure that certain actions are taken after a promise is settled, regardless of its outcome.
 
-```js
-fetch('https://api.example.com/data')
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then((response) => response.json())
+  .then((res) => console.log(res))
   .catch((error) => console.error('Fetch error:', error))
   .finally(() => console.log('Fetch attempt finished'));
 ```
diff --git a/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.mdx b/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.mdx
index 2b75fc8..84a0513 100644
--- a/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.mdx
+++ b/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.mdx
@@ -37,7 +37,7 @@ When you use "use strict", it helps you to write cleaner code, like preventing y
 
 1. **Global Scope**: To enable strict mode globally, add the directive at the beginning of the JavaScript file:
 
-   ```js
+   ```js live
    'use strict';
    // any code in this file will be run in strict mode
    function add(a, b) {
@@ -47,7 +47,7 @@ When you use "use strict", it helps you to write cleaner code, like preventing y
 
 2. **Local Scope**: To enable strict mode within a function, add the directive at the beginning of the function:
 
-   ```js
+   ```js live
    function myFunction() {
      'use strict';
      // this will tell JavaScript engine to use strict mode only for the `myFunction`
@@ -73,7 +73,7 @@ When you use "use strict", it helps you to write cleaner code, like preventing y
 
 1. Preventing accidental creation of global variables:
 
-   ```js
+   ```js live
    // Without strict mode
 
    function defineNumber() {
@@ -83,7 +83,7 @@ When you use "use strict", it helps you to write cleaner code, like preventing y
    console.log(count); // logs: 123
    ```
 
-   ```js
+   ```js live
    'use strict'; // With strict mode
 
    function strictFunc() {
@@ -96,25 +96,25 @@ When you use "use strict", it helps you to write cleaner code, like preventing y
 
 2. Making assignments which would otherwise silently fail to throw an exception:
 
-   ```js
+   ```js live
    // Without strict mode
    NaN = 'foo'; // This fails silently
    console.log(NaN); // logs: NaN
    ```
 
-   ```js
+   ```js live
    'use strict'; // With strict mode
-   NaN = 'foo'; // TypeError: Assignment to read-only properties is not allowed in strict mode
+   NaN = 'foo'; // Uncaught TypeError: Cannot assign to read only property 'NaN' of object '#<Window>'
    ```
 
 3. Making attempts to delete undeletable properties throw an error in strict mode:
 
-   ```js
+   ```js live
    // Without strict mode
    delete Object.prototype; // This fails silently
    ```
 
-   ```js
+   ```js live
    'use strict'; // With strict mode
    delete Object.prototype; // TypeError: Cannot delete property 'prototype' of function Object() { [native code] }
    ```
diff --git a/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.mdx b/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.mdx
index 491fa50..b31aef3 100644
--- a/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.mdx
+++ b/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.mdx
@@ -14,7 +14,7 @@ The only time you may want to extend a native object is when you want to create
 
 In JavaScript it's very easy to extend a built-in/native object. You can simply extend a built-in object by adding properties and functions to its `prototype`.
 
-```js
+```js live
 String.prototype.reverseString = function () {
   return this.split('').reverse().join('');
 };

From 3d0c9a97d28da8b548332eca08a1ad8b2d1780b9 Mon Sep 17 00:00:00 2001
From: tahachm <97478750+tahachm@users.noreply.github.com>
Date: Fri, 21 Mar 2025 17:15:27 +0500
Subject: [PATCH 06/26] Executable coding blocks production-readiness - PR 3
 (corrected) (#26)

Co-authored-by: GitHub Actions <github-actions[bot]@users.noreply.github.com>
---
 README.md                                     | 49 +++++++++++--------
 .../en-US.mdx                                 |  4 +-
 .../en-US.mdx                                 |  6 +--
 .../en-US.mdx                                 |  6 +--
 .../en-US.mdx                                 | 16 ++++--
 .../en-US.mdx                                 |  6 +--
 .../en-US.mdx                                 | 26 ++++++----
 .../en-US.mdx                                 | 36 +++++++++++---
 .../en-US.mdx                                 |  2 +-
 .../en-US.mdx                                 | 16 +++---
 questions/what-are-symbols-used-for/en-US.mdx | 14 +++---
 .../en-US.mdx                                 |  4 +-
 .../en-US.mdx                                 | 19 ++++---
 .../en-US.mdx                                 | 14 +++---
 .../en-US.mdx                                 | 15 +++---
 .../en-US.mdx                                 |  4 +-
 .../en-US.mdx                                 | 28 ++++++++---
 .../en-US.mdx                                 |  6 ++-
 .../en-US.mdx                                 | 14 ++++--
 .../en-US.mdx                                 | 14 +++---
 20 files changed, 186 insertions(+), 113 deletions(-)

diff --git a/README.md b/README.md
index aff1775..b7240f0 100644
--- a/README.md
+++ b/README.md
@@ -853,7 +853,7 @@ In the book ["You Don't Know JS"](https://github.com/getify/You-Dont-Know-JS/tre
 
 In simple terms, functions have access to variables that were in their scope at the time of their creation. This is what we call the function's lexical scope. A closure is a function that retains access to these variables even after the outer function has finished executing. This is like the function has a memory of its original environment.
 
-```js
+```js live
 function outerFunction() {
   const outerVar = 'I am outside of innerFunction';
 
@@ -1822,7 +1822,7 @@ On the other hand, `WeakSet` only allows objects as elements, and these object e
 
 Static class members (properties/methods) has a `static` keyword prepended. Such members cannot be directly accessed on instances of the class. Instead, they're accessed on the class itself.
 
-```js
+```js live
 class Car {
   static noOfWheels = 4;
   static compare() {
@@ -1855,7 +1855,7 @@ Static members are useful under the following scenarios:
 
 `Symbol`s in JavaScript are a new primitive data type introduced in ES6 (ECMAScript 2015). They are unique and immutable identifiers that is primarily for object property keys to avoid name collisions. These values can be created using `Symbol(...)` function, and each `Symbol` value is guaranteed to be unique, even if they have the same key/description. `Symbol` properties are not enumerable in `for...in` loops or `Object.keys()`, making them suitable for creating private/internal object state.
 
-```js
+```js live
 let sym1 = Symbol();
 let sym2 = Symbol('myKey');
 
@@ -2412,7 +2412,7 @@ console.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }
 
 `Symbol`s in JavaScript are a new primitive data type introduced in ES6 (ECMAScript 2015). They are unique and immutable identifiers that is primarily for object property keys to avoid name collisions. These values can be created using `Symbol(...)` function, and each `Symbol` value is guaranteed to be unique, even if they have the same key/description. `Symbol` properties are not enumerable in `for...in` loops or `Object.keys()`, making them suitable for creating private/internal object state.
 
-```js
+```js live
 let sym1 = Symbol();
 let sym2 = Symbol('myKey');
 
@@ -2568,11 +2568,11 @@ var bar = function () {
 
 Hoisting can lead to unexpected behavior in JavaScript because variable and function declarations are moved to the top of their containing scope during the compilation phase. This can result in `undefined` values for variables if they are used before their declaration and can cause confusion with function declarations and expressions. For example:
 
-```js
+```js live
 console.log(a); // undefined
 var a = 5;
 
-console.log(b); // ReferenceError: b is not defined
+console.log(b); // ReferenceError: Cannot access 'b' before initialization
 let b = 10;
 ```
 
@@ -4135,7 +4135,7 @@ Things to note are:
 
 The prototype chain is a mechanism in JavaScript that allows objects to inherit properties and methods from other objects. When you try to access a property on an object, JavaScript will first look for the property on the object itself. If it doesn't find it, it will look at the object's prototype, and then the prototype's prototype, and so on, until it either finds the property or reaches the end of the chain, which is `null`.
 
-```js
+```js live
 function Person(name) {
   this.name = name;
 }
@@ -4401,7 +4401,7 @@ The main takeaway here is that `this` can be changed for a normal function, but
 
 Static class members (properties/methods) has a `static` keyword prepended. Such members cannot be directly accessed on instances of the class. Instead, they're accessed on the class itself.
 
-```js
+```js live
 class Car {
   static noOfWheels = 4;
   static compare() {
@@ -4436,7 +4436,7 @@ In the book ["You Don't Know JS"](https://github.com/getify/You-Dont-Know-JS/tre
 
 In simple terms, functions have access to variables that were in their scope at the time of their creation. This is what we call the function's lexical scope. A closure is a function that retains access to these variables even after the outer function has finished executing. This is like the function has a memory of its original environment.
 
-```js
+```js live
 function outerFunction() {
   const outerVar = 'I am outside of innerFunction';
 
@@ -5526,12 +5526,13 @@ window.location.replace('https://www.example.com');
 
 To get the query string values of the current page in JavaScript, you can use the `URLSearchParams` object. First, create a `URLSearchParams` instance with `window.location.search`, then use the `get` method to retrieve specific query parameters. For example:
 
-```js
+```js live
 const params = new URLSearchParams(window.location.search);
-const value = params.get('key');
+const value = params.get('language');
+console.log(value);
 ```
 
-This will give you the value of the query parameter named `key`.
+This will give you the value of the query parameter named `language`. If you look at the URL of this page, you can see that the `language` parameter is set to 'js'.
 
 <!-- Update here: /questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx -->
 
@@ -5868,7 +5869,7 @@ try {
 
 To create custom error objects in JavaScript, you can extend the built-in `Error` class. This allows you to add custom properties and methods to your error objects. Here's a quick example:
 
-```js
+```js live
 class CustomError extends Error {
   constructor(message) {
     super(message);
@@ -5928,7 +5929,7 @@ try {
 
 Currying is a technique in functional programming where a function that takes multiple arguments is transformed into a series of functions that each take a single argument. This allows for partial application of functions. For example, a function `f(a, b, c)` can be curried into `f(a)(b)(c)`. Here's a simple example in JavaScript:
 
-```js
+```js live
 function add(a) {
   return function (b) {
     return function (c) {
@@ -5938,8 +5939,13 @@ function add(a) {
 }
 
 const addOne = add(1);
+console.log(addOne); // function object
+
 const addOneAndTwo = addOne(2);
-const result = addOneAndTwo(3); // result is 6
+console.log(addOneAndTwo); // function object
+
+const result = addOneAndTwo(3);
+console.log(result); // Output: 6
 ```
 
 <!-- Update here: /questions/what-is-currying-and-how-does-it-work/en-US.mdx -->
@@ -6033,10 +6039,11 @@ Currying transforms a function with multiple arguments into a sequence of functi
 
 `Set`s and `Map`s are built-in JavaScript objects that help manage collections of data. A `Set` is a collection of unique values, while a `Map` is a collection of key-value pairs where keys can be of any type. `Set`s are useful for storing unique items, and `Map`s are useful for associating values with keys.
 
-```js
+```js live
 // Set example
-let mySet = new Set([1, 2, 3, 3]);
-mySet.add(4); // Set {1, 2, 3, 4}
+let mySet = new Set([1, 2, 3, 3]); // Set {1, 2, 3} (duplicate values are not added)
+mySet.add(4);
+console.log(mySet); // Set {1, 2, 3, 4}
 
 // Map example
 let myMap = new Map();
@@ -6149,7 +6156,7 @@ Both `Map` objects and plain objects in JavaScript can store key-value pairs, bu
 
 `Set`s and `Map`s in JavaScript handle equality checks for objects based on reference equality, not deep equality. This means that two objects are considered equal only if they reference the same memory location. For example, if you add two different object literals with the same properties to a `Set`, they will be treated as distinct entries.
 
-```js
+```js live
 const set = new Set();
 const obj1 = { a: 1 };
 const obj2 = { a: 1 };
@@ -6527,7 +6534,7 @@ Design patterns are reusable solutions to common problems in software design. Th
 
 The Singleton pattern ensures that a class has only one instance and provides a global point of access to that instance. This is useful when exactly one object is needed to coordinate actions across the system. In JavaScript, this can be implemented using closures or ES6 classes.
 
-```js
+```js live
 class Singleton {
   constructor() {
     if (!Singleton.instance) {
@@ -6632,7 +6639,7 @@ myModule.publicMethod(); // Logs: I am private
 
 The Prototype pattern is a creational design pattern used to create new objects by copying an existing object, known as the prototype. This pattern is useful when the cost of creating a new object is more expensive than cloning an existing one. In JavaScript, this can be achieved using the `Object.create` method or by using the `prototype` property of a constructor function.
 
-```js
+```js live
 const prototypeObject = {
   greet() {
     console.log('Hello, world!');
diff --git a/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx b/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx
index 54dbd83..a77c7bd 100644
--- a/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx
+++ b/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx
@@ -100,7 +100,7 @@ The CookieStore API is relatively new and may not be supported in all browsers (
 - **Access**: Data is accessible within all tabs and windows of the same origin.
 - **Security**: All JavaScript on the page have access to values within `localStorage`.
 
-```js
+```js live
 // Set a value in localStorage.
 localStorage.setItem('key', 'value');
 
@@ -123,7 +123,7 @@ localStorage.clear();
 - **Access**: Data is only accessible within the current tab or window. Different tabs or windows with the same page will have different `sessionStorage` objects.
 - **Security**: All JavaScript on the same page have access to values within `sessionStorage` for that page.
 
-```js
+```js live
 // Set a value in sessionStorage.
 sessionStorage.setItem('key', 'value');
 
diff --git a/questions/explain-the-concept-of-the-prototype-pattern/en-US.mdx b/questions/explain-the-concept-of-the-prototype-pattern/en-US.mdx
index 0c8faf7..0fb149a 100644
--- a/questions/explain-the-concept-of-the-prototype-pattern/en-US.mdx
+++ b/questions/explain-the-concept-of-the-prototype-pattern/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the concept of the Prototype pattern
 
 The Prototype pattern is a creational design pattern used to create new objects by copying an existing object, known as the prototype. This pattern is useful when the cost of creating a new object is more expensive than cloning an existing one. In JavaScript, this can be achieved using the `Object.create` method or by using the `prototype` property of a constructor function.
 
-```js
+```js live
 const prototypeObject = {
   greet() {
     console.log('Hello, world!');
@@ -35,7 +35,7 @@ In JavaScript, the Prototype pattern can be implemented using the `Object.create
 
 The `Object.create` method creates a new object with the specified prototype object and properties.
 
-```js
+```js live
 const prototypeObject = {
   greet() {
     console.log('Hello, world!');
@@ -52,7 +52,7 @@ In this example, `newObject` is created with `prototypeObject` as its prototype.
 
 Another way to implement the Prototype pattern in JavaScript is by using constructor functions and the `prototype` property.
 
-```js
+```js live
 function Person(name) {
   this.name = name;
 }
diff --git a/questions/explain-the-concept-of-the-singleton-pattern/en-US.mdx b/questions/explain-the-concept-of-the-singleton-pattern/en-US.mdx
index 35fec65..0d76911 100644
--- a/questions/explain-the-concept-of-the-singleton-pattern/en-US.mdx
+++ b/questions/explain-the-concept-of-the-singleton-pattern/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the concept of the Singleton pattern
 
 The Singleton pattern ensures that a class has only one instance and provides a global point of access to that instance. This is useful when exactly one object is needed to coordinate actions across the system. In JavaScript, this can be implemented using closures or ES6 classes.
 
-```js
+```js live
 class Singleton {
   constructor() {
     if (!Singleton.instance) {
@@ -40,7 +40,7 @@ There are several ways to implement the Singleton pattern in JavaScript. Here ar
 
 #### Using closures
 
-```js
+```js live
 const Singleton = (function () {
   let instance;
 
@@ -67,7 +67,7 @@ console.log(instance1 === instance2); // true
 
 #### Using ES6 classes
 
-```js
+```js live
 class Singleton {
   constructor() {
     if (!Singleton.instance) {
diff --git a/questions/how-can-you-create-custom-error-objects/en-US.mdx b/questions/how-can-you-create-custom-error-objects/en-US.mdx
index f11db4f..b718874 100644
--- a/questions/how-can-you-create-custom-error-objects/en-US.mdx
+++ b/questions/how-can-you-create-custom-error-objects/en-US.mdx
@@ -6,7 +6,7 @@ title: How can you create custom error objects?
 
 To create custom error objects in JavaScript, you can extend the built-in `Error` class. This allows you to add custom properties and methods to your error objects. Here's a quick example:
 
-```js
+```js live
 class CustomError extends Error {
   constructor(message) {
     super(message);
@@ -43,7 +43,7 @@ class CustomError extends Error {
 
 You can add custom properties to your custom error class to provide more context about the error.
 
-```js
+```js live
 class CustomError extends Error {
   constructor(message, errorCode) {
     super(message);
@@ -65,7 +65,7 @@ try {
 
 You can also add custom methods to your custom error class to handle specific error-related logic.
 
-```js
+```js live
 class CustomError extends Error {
   constructor(message, errorCode) {
     super(message);
@@ -89,7 +89,15 @@ try {
 
 You can use the `instanceof` operator to check if an error is an instance of your custom error class.
 
-```js
+```js live
+class CustomError extends Error {
+  constructor(message, errorCode) {
+    super(message);
+    this.name = 'CustomError';
+    this.errorCode = errorCode;
+  }
+}
+
 try {
   throw new CustomError('This is a custom error message', 404);
 } catch (error) {
diff --git a/questions/how-do-sets-and-maps-handle-equality-checks-for-objects/en-US.mdx b/questions/how-do-sets-and-maps-handle-equality-checks-for-objects/en-US.mdx
index 73971da..6691303 100644
--- a/questions/how-do-sets-and-maps-handle-equality-checks-for-objects/en-US.mdx
+++ b/questions/how-do-sets-and-maps-handle-equality-checks-for-objects/en-US.mdx
@@ -6,7 +6,7 @@ title: How do `Set`s and `Map`s handle equality checks for objects?
 
 `Set`s and `Map`s in JavaScript handle equality checks for objects based on reference equality, not deep equality. This means that two objects are considered equal only if they reference the same memory location. For example, if you add two different object literals with the same properties to a `Set`, they will be treated as distinct entries.
 
-```js
+```js live
 const set = new Set();
 const obj1 = { a: 1 };
 const obj2 = { a: 1 };
@@ -29,7 +29,7 @@ In JavaScript, `Set`s and `Map`s use reference equality to determine if two obje
 
 When you add objects to a `Set`, the `Set` will only consider them equal if they are the same object reference.
 
-```js
+```js live
 const set = new Set();
 const obj1 = { a: 1 };
 const obj2 = { a: 1 };
@@ -46,7 +46,7 @@ In this example, `obj1` and `obj2` have the same properties, but they are differ
 
 Similarly, when you use objects as keys in a `Map`, the `Map` will only consider them equal if they are the same object reference.
 
-```js
+```js live
 const map = new Map();
 const obj1 = { a: 1 };
 const obj2 = { a: 1 };
diff --git a/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx b/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx
index e5ceca9..f3def3d 100644
--- a/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx
+++ b/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx
@@ -6,12 +6,13 @@ title: How do you get the query string values of the current page in JavaScript?
 
 To get the query string values of the current page in JavaScript, you can use the `URLSearchParams` object. First, create a `URLSearchParams` instance with `window.location.search`, then use the `get` method to retrieve specific query parameters. For example:
 
-```js
+```js live
 const params = new URLSearchParams(window.location.search);
-const value = params.get('key');
+const value = params.get('language');
+console.log(value);
 ```
 
-This will give you the value of the query parameter named `key`.
+This will give you the value of the query parameter named `language`. If you look at the URL of this page, you can see that the `language` parameter is set to 'js'.
 
 ---
 
@@ -24,11 +25,14 @@ The `URLSearchParams` interface provides an easy way to work with query strings.
 1. **Create a `URLSearchParams` instance**: Use `window.location.search` to get the query string part of the URL.
 2. **Retrieve specific query parameters**: Use the `get` method to get the value of a specific query parameter.
 
-```js
+```js live
 const params = new URLSearchParams(window.location.search);
-const value = params.get('key'); // Replace 'key' with the actual query parameter name
+const value = params.get('key'); // Replace 'key' with the actual query parameter name (try 'language' or 'tab' for this page)
+console.log(value);
 ```
 
+If the query parameter does not exist, the `get` method returns `null`.
+
 ### Example
 
 Consider a URL like `https://example.com?page=2&sort=asc`. To get the values of `page` and `sort`:
@@ -50,22 +54,26 @@ const values = params.getAll('key'); // Returns an array of values
 
 ### Checking for the existence of a parameter
 
-You can use the `has` method to check if a query parameter exists:
+You can use the `has` method to check if a query parameter exists. Try to check for the query parameters present in the URL of this page.
 
-```js
+```js live
 const params = new URLSearchParams(window.location.search);
-const hasPage = params.has('page'); // true or false
+console.log(params.has('page')); // false
+console.log(params.has('language')); // true
+console.log(params.has('tab')); // true
 ```
 
 ### Iterating over all parameters
 
 You can iterate over all query parameters using the `forEach` method:
 
-```js
+```js live
 const params = new URLSearchParams(window.location.search);
 params.forEach((value, key) => {
   console.log(`${key}: ${value}`);
 });
+// language: js
+// tab: quiz
 ```
 
 ## Further reading
diff --git a/questions/how-do-you-handle-errors-using-trycatch-blocks/en-US.mdx b/questions/how-do-you-handle-errors-using-trycatch-blocks/en-US.mdx
index f535d9b..1b29074 100644
--- a/questions/how-do-you-handle-errors-using-trycatch-blocks/en-US.mdx
+++ b/questions/how-do-you-handle-errors-using-trycatch-blocks/en-US.mdx
@@ -38,7 +38,12 @@ try {
 
 Here is an example of using `try...catch` to handle errors:
 
-```js
+```js live
+function riskyOperation() {
+  const invalidJsonString = '{"name": "John}'; // Try changing this to a valid JSON string
+  return JSON.parse(invalidJsonString);
+}
+
 try {
   let result = riskyOperation();
   console.log(result);
@@ -59,15 +64,21 @@ try {
 
 You can nest `try...catch` blocks to handle different levels of errors:
 
-```js
+```js live
+function anotherRiskyOperation() {
+  const person = undefined;
+  console.log(person.name);
+}
+
 try {
   try {
-    let result = anotherRiskyOperation();
-    console.log(result);
+    anotherRiskyOperation();
   } catch (innerError) {
+    // Error (if any) for anotherRiskyOperation caught here
     console.error('Inner error:', innerError.message);
   }
 } catch (outerError) {
+  // Inner error does not reach here
   console.error('Outer error:', outerError.message);
 }
 ```
@@ -76,11 +87,21 @@ try {
 
 You can re-throw an error from the `catch` block if you want it to be handled by an outer `try...catch` block:
 
-```js
+```js live
+function yetAnotherRiskyOperation() {
+  const numerator = 10;
+  const denominator = 0;
+  if (denominator === 0) {
+    throw new Error('Cannot divide by zero');
+  }
+
+  return numerator / denominator;
+}
+
 try {
   try {
-    let result = yetAnotherRiskyOperation();
-    console.log(result);
+    const result = yetAnotherRiskyOperation();
+    console.log('Divisinon result:', result);
   } catch (innerError) {
     console.error('Inner error:', innerError.message);
     throw innerError; // Re-throw the error
@@ -95,6 +116,7 @@ try {
 The `finally` block is useful for cleanup tasks, such as closing a file or releasing resources:
 
 ```js
+// openFile() and closeFile() are custom implementations
 try {
   let file = openFile('example.txt');
   // Perform operations on the file
diff --git a/questions/what-are-design-patterns-and-why-are-they-useful/en-US.mdx b/questions/what-are-design-patterns-and-why-are-they-useful/en-US.mdx
index d3d3156..deaec83 100644
--- a/questions/what-are-design-patterns-and-why-are-they-useful/en-US.mdx
+++ b/questions/what-are-design-patterns-and-why-are-they-useful/en-US.mdx
@@ -34,7 +34,7 @@ Design patterns are typically categorized into three main types:
 
 The Singleton pattern ensures that a class has only one instance and provides a global point of access to it. Here is a simple implementation in JavaScript:
 
-```js
+```js live
 class Singleton {
   constructor() {
     if (Singleton.instance) {
diff --git a/questions/what-are-sets-and-maps-and-how-are-they-used/en-US.mdx b/questions/what-are-sets-and-maps-and-how-are-they-used/en-US.mdx
index 3202702..3783b7a 100644
--- a/questions/what-are-sets-and-maps-and-how-are-they-used/en-US.mdx
+++ b/questions/what-are-sets-and-maps-and-how-are-they-used/en-US.mdx
@@ -6,10 +6,11 @@ title: What are `Set`s and `Map`s and how are they used?
 
 `Set`s and `Map`s are built-in JavaScript objects that help manage collections of data. A `Set` is a collection of unique values, while a `Map` is a collection of key-value pairs where keys can be of any type. `Set`s are useful for storing unique items, and `Map`s are useful for associating values with keys.
 
-```js
+```js live
 // Set example
-let mySet = new Set([1, 2, 3, 3]);
-mySet.add(4); // Set {1, 2, 3, 4}
+let mySet = new Set([1, 2, 3, 3]); // Set {1, 2, 3} (duplicate values are not added)
+mySet.add(4);
+console.log(mySet); // Set {1, 2, 3, 4}
 
 // Map example
 let myMap = new Map();
@@ -30,7 +31,7 @@ A `Set` is a collection of values where each value must be unique. It is similar
 
 You can create a `Set` using the `Set` constructor:
 
-```js
+```js live
 let mySet = new Set([1, 2, 3, 3]);
 console.log(mySet); // Set {1, 2, 3}
 ```
@@ -45,7 +46,7 @@ console.log(mySet); // Set {1, 2, 3}
 
 ### Example usage
 
-```js
+```js live
 let mySet = new Set();
 mySet.add(1);
 mySet.add(2);
@@ -68,10 +69,11 @@ A `Map` is a collection of key-value pairs where keys can be of any type, includ
 
 You can create a `Map` using the `Map` constructor:
 
-```js
+```js live
 let myMap = new Map();
 myMap.set('key1', 'value1');
 myMap.set('key2', 'value2');
+console.log(myMap); // Map { key1: "value1", key2: "value2" }
 ```
 
 ### Common methods
@@ -85,7 +87,7 @@ myMap.set('key2', 'value2');
 
 ### Example usage
 
-```js
+```js live
 let myMap = new Map();
 myMap.set('key1', 'value1');
 myMap.set('key2', 'value2');
diff --git a/questions/what-are-symbols-used-for/en-US.mdx b/questions/what-are-symbols-used-for/en-US.mdx
index 6b176b3..2334bab 100644
--- a/questions/what-are-symbols-used-for/en-US.mdx
+++ b/questions/what-are-symbols-used-for/en-US.mdx
@@ -6,7 +6,7 @@ title: What are `Symbol`s used for in JavaScript?
 
 `Symbol`s in JavaScript are a new primitive data type introduced in ES6 (ECMAScript 2015). They are unique and immutable identifiers that is primarily for object property keys to avoid name collisions. These values can be created using `Symbol(...)` function, and each `Symbol` value is guaranteed to be unique, even if they have the same key/description. `Symbol` properties are not enumerable in `for...in` loops or `Object.keys()`, making them suitable for creating private/internal object state.
 
-```js
+```js live
 let sym1 = Symbol();
 let sym2 = Symbol('myKey');
 
@@ -38,7 +38,7 @@ Symbols in JavaScript are a unique and immutable data type used primarily for ob
 
 `Symbol`s can be created using the `Symbol()` function:
 
-```js
+```js live
 const sym1 = Symbol();
 const sym2 = Symbol('uniqueKey');
 
@@ -52,7 +52,7 @@ console.log(sym1 === sym2); // false, because each symbol is unique
 
 `Symbol`s can be used to add properties to an object without risk of name collision:
 
-```js
+```js live
 const obj = {};
 const sym = Symbol('uniqueKey');
 
@@ -66,7 +66,7 @@ console.log(obj[sym]); // "value"
 - This makes them suitable for creating private/internal object state.
 - Use` Object.getOwnPropertySymbols(obj)` to get all symbol properties on an object.
 
-```js
+```js live
 const mySymbol = Symbol('privateProperty');
 const obj = {
   name: 'John',
@@ -81,7 +81,7 @@ console.log(obj[mySymbol]); // Output: 42
 
 You can create global `Symbol`s using `Symbol.for('key')`, which creates a new `Symbol` in the global registry if it doesn't exist, or returns the existing one. This allows you to reuse `Symbol`s across different parts of your code base or even across different code bases.
 
-```js
+```js live
 const globalSym1 = Symbol.for('globalKey');
 const globalSym2 = Symbol.for('globalKey');
 
@@ -101,7 +101,7 @@ JavaScript includes several built-in `Symbol`s, referred as well-known `Symbol`s
 
 ### `Symbol.iterator`
 
-```js
+```js live
 let iterable = {
   [Symbol.iterator]() {
     let step = 0;
@@ -124,7 +124,7 @@ for (let value of iterable) {
 
 ### `Symbol.toStringTag`
 
-```js
+```js live
 let myObj = {
   [Symbol.toStringTag]: 'MyCustomObject',
 };
diff --git a/questions/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.mdx b/questions/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.mdx
index 3b788b6..6ee55a3 100644
--- a/questions/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.mdx
+++ b/questions/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.mdx
@@ -57,7 +57,7 @@ The key differences between `Map`/`Set` and `WeakMap`/`WeakSet` in JavaScript ar
 
 In a chat application, you might want to track which user objects are currently active without preventing garbage collection when the user logs out or the session expires. We use a `WeakSet` to track active user objects. When a user logs out or their session expires, the user object can be garbage-collected if there are no other references to it.
 
-```js
+```js live
 const activeUsers = new WeakSet();
 
 // Function to mark a user as active
@@ -91,7 +91,7 @@ console.log(isUserActive(user1)); // false
 
 `WeakSet` is provides a way of guarding against circular data structures by tracking which objects have already been processed.
 
-```js
+```js live
 // Create a WeakSet to track visited objects
 const visited = new WeakSet();
 
diff --git a/questions/what-are-the-different-types-of-errors-in-javascript/en-US.mdx b/questions/what-are-the-different-types-of-errors-in-javascript/en-US.mdx
index 021db55..50a4048 100644
--- a/questions/what-are-the-different-types-of-errors-in-javascript/en-US.mdx
+++ b/questions/what-are-the-different-types-of-errors-in-javascript/en-US.mdx
@@ -16,7 +16,7 @@ Syntax errors occur when the code does not follow the rules of the JavaScript la
 
 #### Example
 
-```js
+```js live
 console.log("Hello, world!; // Missing closing quote and parenthesis
 ```
 
@@ -26,9 +26,9 @@ Runtime errors, also known as exceptions, occur during the execution of the code
 
 #### Example
 
-```js
+```js live
 let obj = null;
-console.log(obj.property); // TypeError: Cannot read property 'property' of null
+console.log(obj.property); // TypeError: Cannot read properties of null (reading 'property')
 ```
 
 ### Logical errors
@@ -37,12 +37,15 @@ Logical errors are mistakes in the code's logic that lead to incorrect results.
 
 #### Example
 
-```js
-let total = 0;
-for (let i = 1; i <= 10; i++) {
-  total += i;
+```js live
+let isAdmin = false;
+
+if ((isAdmin = true)) {
+  // Wrong: Assignment instead of comparison
+  console.log('Access granted'); // Access granted even though isAdmin was falsy
+} else {
+  console.log('Access denied');
 }
-console.log(total); // Incorrectly expecting the sum of even numbers only
 ```
 
 ## Further reading
diff --git a/questions/what-are-the-potential-issues-caused-by-hoisting/en-US.mdx b/questions/what-are-the-potential-issues-caused-by-hoisting/en-US.mdx
index 647ba70..5d69cd2 100644
--- a/questions/what-are-the-potential-issues-caused-by-hoisting/en-US.mdx
+++ b/questions/what-are-the-potential-issues-caused-by-hoisting/en-US.mdx
@@ -6,11 +6,11 @@ title: What are the potential issues caused by hoisting?
 
 Hoisting can lead to unexpected behavior in JavaScript because variable and function declarations are moved to the top of their containing scope during the compilation phase. This can result in `undefined` values for variables if they are used before their declaration and can cause confusion with function declarations and expressions. For example:
 
-```js
+```js live
 console.log(a); // undefined
 var a = 5;
 
-console.log(b); // ReferenceError: b is not defined
+console.log(b); // ReferenceError: Cannot access 'b' before initialization
 let b = 10;
 ```
 
@@ -22,7 +22,7 @@ let b = 10;
 
 When using `var`, the variable is hoisted to the top of its scope but not initialized. This means you can reference the variable before its declaration, but it will be `undefined` until the assignment is executed.
 
-```js
+```js live
 console.log(a); // undefined
 var a = 5;
 ```
@@ -31,8 +31,8 @@ var a = 5;
 
 Variables declared with `let` and `const` are also hoisted, but they are not initialized. Accessing them before their declaration results in a `ReferenceError` due to the temporal dead zone.
 
-```js
-console.log(b); // ReferenceError: b is not defined
+```js live
+console.log(b); // ReferenceError: Cannot access 'b' before initialization
 let b = 10;
 ```
 
@@ -40,7 +40,7 @@ let b = 10;
 
 Function declarations are hoisted entirely, meaning you can call the function before its declaration. However, function expressions are not hoisted in the same way, leading to potential `TypeError` if called before they are defined.
 
-```js
+```js live
 foo(); // Works fine
 function foo() {
   console.log('Hello');
@@ -56,7 +56,7 @@ var bar = function () {
 
 Using `var` can lead to unintentional redeclarations, which can cause bugs that are hard to track down.
 
-```js
+```js live
 var x = 1;
 if (true) {
   var x = 2; // Same variable as above
diff --git a/questions/what-are-the-potential-pitfalls-of-using-closures/en-US.mdx b/questions/what-are-the-potential-pitfalls-of-using-closures/en-US.mdx
index d34f5e8..42dd6ed 100644
--- a/questions/what-are-the-potential-pitfalls-of-using-closures/en-US.mdx
+++ b/questions/what-are-the-potential-pitfalls-of-using-closures/en-US.mdx
@@ -14,7 +14,7 @@ Closures can lead to memory leaks if not managed properly, especially when they
 
 Closures can cause memory leaks if they capture variables that are no longer needed. This happens because closures keep references to the variables in their scope, preventing the garbage collector from freeing up memory.
 
-```js
+```js live
 function createClosure() {
   let largeArray = new Array(1000000).fill('some data');
   return function () {
@@ -24,13 +24,14 @@ function createClosure() {
 
 let closure = createClosure();
 // The largeArray is still in memory because the closure keeps a reference to it
+closure(); // Output: 'some data'
 ```
 
 ### Debugging complexity
 
 Closures can make debugging more difficult due to the complexity of the scope chain. When a bug occurs, it can be challenging to trace the source of the problem through multiple layers of nested functions and scopes.
 
-```js
+```js live
 function outerFunction() {
   let outerVar = 'I am outside!';
 
@@ -42,14 +43,14 @@ function outerFunction() {
 }
 
 let myFunction = outerFunction();
-myFunction();
+myFunction(); // Output: 'I am outside!'
 ```
 
 ### Performance issues
 
 Overusing closures or using them inappropriately can lead to performance issues. Since closures keep references to variables in their scope, they can prevent garbage collection, leading to increased memory usage and potential slowdowns.
 
-```js
+```js live
 function createManyClosures() {
   let counter = 0;
 
@@ -57,6 +58,8 @@ function createManyClosures() {
     (function () {
       counter++;
     })();
+    // The closure is executed immediately, but it still holds onto the reference to the `counter` variable
+    // This prevents the counter from being garbage collected
   }
 
   console.log(counter); // This can be inefficient
@@ -69,7 +72,7 @@ createManyClosures();
 
 Closures can lead to unintended variable sharing, especially in loops. This happens when all closures share the same reference to a variable, leading to unexpected behavior.
 
-```js
+```js live
 function createFunctions() {
   let functions = [];
 
@@ -90,7 +93,7 @@ funcs[2](); // 3
 
 To avoid this, use `let` instead of `var` to create a new binding for each iteration:
 
-```js
+```js live
 function createFunctions() {
   let functions = [];
 
diff --git a/questions/what-is-a-closure-and-how-why-would-you-use-one/en-US.mdx b/questions/what-is-a-closure-and-how-why-would-you-use-one/en-US.mdx
index 3e2c961..420bcc4 100644
--- a/questions/what-is-a-closure-and-how-why-would-you-use-one/en-US.mdx
+++ b/questions/what-is-a-closure-and-how-why-would-you-use-one/en-US.mdx
@@ -10,7 +10,7 @@ In the book ["You Don't Know JS"](https://github.com/getify/You-Dont-Know-JS/tre
 
 In simple terms, functions have access to variables that were in their scope at the time of their creation. This is what we call the function's lexical scope. A closure is a function that retains access to these variables even after the outer function has finished executing. This is like the function has a memory of its original environment.
 
-```js
+```js live
 function outerFunction() {
   const outerVar = 'I am outside of innerFunction';
 
@@ -49,7 +49,7 @@ Here's how closures work:
 
 With ES6, closures can be created using arrow functions, which provide a more concise syntax and lexically bind the `this` value. Here's an example:
 
-```js
+```js live
 const createCounter = () => {
   let count = 0;
   return () => {
diff --git a/questions/what-is-currying-and-how-does-it-work/en-US.mdx b/questions/what-is-currying-and-how-does-it-work/en-US.mdx
index 2913887..4adb1ab 100644
--- a/questions/what-is-currying-and-how-does-it-work/en-US.mdx
+++ b/questions/what-is-currying-and-how-does-it-work/en-US.mdx
@@ -6,7 +6,7 @@ title: What is currying and how does it work?
 
 Currying is a technique in functional programming where a function that takes multiple arguments is transformed into a series of functions that each take a single argument. This allows for partial application of functions. For example, a function `f(a, b, c)` can be curried into `f(a)(b)(c)`. Here's a simple example in JavaScript:
 
-```js
+```js live
 function add(a) {
   return function (b) {
     return function (c) {
@@ -16,8 +16,13 @@ function add(a) {
 }
 
 const addOne = add(1);
+console.log(addOne); // function object
+
 const addOneAndTwo = addOne(2);
-const result = addOneAndTwo(3); // result is 6
+console.log(addOneAndTwo); // function object
+
+const result = addOneAndTwo(3);
+console.log(result); // Output: 6
 ```
 
 ---
@@ -37,7 +42,7 @@ Currying is a functional programming technique where a function with multiple ar
 
 Here's a simple example to illustrate currying in JavaScript:
 
-```js
+```js live
 // Non-curried function
 function add(a, b, c) {
   return a + b + c;
@@ -54,8 +59,13 @@ function curriedAdd(a) {
 
 // Using the curried function
 const addOne = curriedAdd(1);
+console.log(addOne); // function object
+
 const addOneAndTwo = addOne(2);
-const result = addOneAndTwo(3); // result is 6
+console.log(addOneAndTwo); // function object
+
+const result = addOneAndTwo(3);
+console.log(result); // Output: 6
 ```
 
 ### Benefits of currying
@@ -68,7 +78,7 @@ const result = addOneAndTwo(3); // result is 6
 
 Consider a function that calculates the volume of a rectangular prism:
 
-```js
+```js live
 function volume(length, width, height) {
   return length * width * height;
 }
@@ -85,19 +95,21 @@ function curriedVolume(length) {
 // Using the curried function
 const volumeWithLength5 = curriedVolume(5);
 const volumeWithLength5AndWidth4 = volumeWithLength5(4);
-const result = volumeWithLength5AndWidth4(3); // result is 60
+const result = volumeWithLength5AndWidth4(3);
+console.log(result); // Output: 60
 ```
 
 ### Currying with arrow functions
 
 You can also use arrow functions to make the syntax more concise:
 
-```js
+```js live
 const curriedAdd = (a) => (b) => (c) => a + b + c;
 
 const addOne = curriedAdd(1);
 const addOneAndTwo = addOne(2);
-const result = addOneAndTwo(3); // result is 6
+const result = addOneAndTwo(3);
+console.log(result); // Output: 6
 ```
 
 ## Further reading
diff --git a/questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.mdx b/questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.mdx
index 772e607..42c6996 100644
--- a/questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.mdx
+++ b/questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.mdx
@@ -26,20 +26,22 @@ In JavaScript, `Map` objects and a plain object (also known as a "POJO" or "plai
 
 A plain object is a basic JavaScript object created using the `{}` syntax. It is a collection of key-value pairs, where each key is a string (or a symbol, in modern JavaScript) and each value can be any type of value, including strings, numbers, booleans, arrays, objects, and more.
 
-```js
+```js live
 const person = { name: 'John', age: 30, occupation: 'Developer' };
+console.log(person);
 ```
 
 ### `Map` objects
 
 A `Map` object, introduced in ECMAScript 2015 (ES6), is a more advanced data structure that allows you to store key-value pairs with additional features. A `Map` is an iterable, which means you can use it with `for...of` loops, and it provides methods for common operations like `get`, `set`, `has`, and `delete`.
 
-```js
+```js live
 const person = new Map([
   ['name', 'John'],
   ['age', 30],
   ['occupation', 'Developer'],
 ]);
+console.log(person);
 ```
 
 ## Key differences
diff --git a/questions/what-is-the-prototype-chain-and-how-does-it-work/en-US.mdx b/questions/what-is-the-prototype-chain-and-how-does-it-work/en-US.mdx
index c812362..4732fa2 100644
--- a/questions/what-is-the-prototype-chain-and-how-does-it-work/en-US.mdx
+++ b/questions/what-is-the-prototype-chain-and-how-does-it-work/en-US.mdx
@@ -6,7 +6,7 @@ title: What is the prototype chain and how does it work?
 
 The prototype chain is a mechanism in JavaScript that allows objects to inherit properties and methods from other objects. When you try to access a property on an object, JavaScript will first look for the property on the object itself. If it doesn't find it, it will look at the object's prototype, and then the prototype's prototype, and so on, until it either finds the property or reaches the end of the chain, which is `null`.
 
-```js
+```js live
 function Person(name) {
   this.name = name;
 }
@@ -40,7 +40,7 @@ When you try to access a property or method on an object, JavaScript will:
 
 ### Example
 
-```js
+```js live
 function Person(name) {
   this.name = name;
 }
@@ -64,7 +64,7 @@ In this example:
 
 JavaScript's built-in objects also use the prototype chain. For example, arrays inherit from `Array.prototype`, which in turn inherits from `Object.prototype`.
 
-```js
+```js live
 const arr = [1, 2, 3];
 console.log(arr.toString()); // "1,2,3"
 ```
@@ -80,7 +80,13 @@ In this example:
 
 You can add properties and methods to an object's prototype, and all instances of that object will have access to those properties and methods.
 
-```js
+```js live
+function Person(name) {
+  this.name = name;
+}
+
+const alice = new Person('Alice');
+
 Person.prototype.sayGoodbye = function () {
   console.log(`Goodbye from ${this.name}`);
 };
diff --git a/questions/why-you-might-want-to-create-static-class-members/en-US.mdx b/questions/why-you-might-want-to-create-static-class-members/en-US.mdx
index 8ea53a5..a3fa09d 100644
--- a/questions/why-you-might-want-to-create-static-class-members/en-US.mdx
+++ b/questions/why-you-might-want-to-create-static-class-members/en-US.mdx
@@ -6,7 +6,7 @@ title: Why might you want to create static class members in JavaScript?
 
 Static class members (properties/methods) has a `static` keyword prepended. Such members cannot be directly accessed on instances of the class. Instead, they're accessed on the class itself.
 
-```js
+```js live
 class Car {
   static noOfWheels = 4;
   static compare() {
@@ -29,7 +29,7 @@ Static members are useful under the following scenarios:
 
 Static class members (properties/methods) are not tied to a specific instance of a class and have the same value regardless of which instance is referring to it. Static properties are typically configuration variables and static methods are usually pure utility functions which do not depend on the state of the instance. Such properties has a `static` keyword prepended.
 
-```js
+```js live
 class Car {
   static noOfWheels = 4;
   static compare() {
@@ -43,7 +43,7 @@ console.log(Car.compare()); // Output: static method has been called.
 
 Static members are not accessible by specific instance of class.
 
-```js
+```js live
 class Car {
   static noOfWheels = 4;
   static compare() {
@@ -58,7 +58,7 @@ console.log(car.compare()); // Error: TypeError: car.compare is not a function
 
 The `Math` class in JavaScript is a good example of a common library that uses static members. The `Math` class in JavaScript is a built-in object that provides a collection of mathematical constants and functions. It is a static class, meaning that all of its properties and methods are static. Here's an example of how the `Math` class uses static members:
 
-```js
+```js live
 console.log(Math.PI); // Output: 3.141592653589793
 console.log(Math.abs(-5)); // Output: 5
 console.log(Math.max(1, 2, 3)); // Output: 3
@@ -72,7 +72,7 @@ In this example, `Math.PI`, `Math.abs()`, and `Math.max()` are all static member
 
 Static class members can be useful for defining utility functions that don't require any instance-specific (don't use `this`) data or behavior. For example, you might have a `Arithmetic` class with static methods for common mathematical operations.
 
-```js
+```js live
 class Arithmetic {
   static add(a, b) {
     return a + b;
@@ -90,7 +90,7 @@ console.log(Arithmetic.subtract(5, 2)); // Output: 3
 
 Static class members can be used to implement the Singleton pattern, where you want to ensure that only one instance of a class exists throughout your application.
 
-```js
+```js live
 class Singleton {
   static instance;
 
@@ -112,7 +112,7 @@ console.log(singleton1 === singleton2); // Output: true
 
 Static class members can be used to store configuration or settings that are shared across all instances of a class. This can be useful for things like API keys, feature flags, or other global settings.
 
-```js
+```js live
 class Config {
   static API_KEY = 'your-api-key';
   static FEATURE_FLAG = true;

From 168d103d5fae914a799031a14384875324a530e5 Mon Sep 17 00:00:00 2001
From: tahachm <97478750+tahachm@users.noreply.github.com>
Date: Mon, 24 Mar 2025 04:29:29 +0500
Subject: [PATCH 07/26] Executable coding blocks production-readiness - PR 6
 (#27)

---
 questions/describe-event-bubbling/en-US.mdx   | 36 +++++++++++--
 .../en-US.mdx                                 |  4 +-
 .../en-US.mdx                                 | 16 +++---
 .../en-US.mdx                                 |  4 +-
 .../en-US.mdx                                 | 20 ++++++--
 .../en-US.mdx                                 |  8 +--
 .../en-US.mdx                                 |  2 +-
 .../en-US.mdx                                 |  6 +--
 .../en-US.mdx                                 | 12 +++--
 .../en-US.mdx                                 | 26 ++++------
 .../en-US.mdx                                 | 16 +++---
 .../en-US.mdx                                 | 12 +++--
 .../en-US.mdx                                 | 11 ++--
 .../en-US.mdx                                 | 22 ++++----
 .../en-US.mdx                                 | 24 ++++++---
 .../en-US.mdx                                 | 50 ++++++++-----------
 .../en-US.mdx                                 | 16 +++---
 .../en-US.mdx                                 | 29 +++++++----
 .../en-US.mdx                                 | 14 +++---
 .../en-US.mdx                                 | 22 +++-----
 .../en-US.mdx                                 |  6 +--
 .../en-US.mdx                                 | 18 ++++---
 .../what-is-the-use-of-promiseall/en-US.mdx   |  6 +--
 .../en-US.mdx                                 | 14 +++---
 .../en-US.mdx                                 |  6 +--
 25 files changed, 228 insertions(+), 172 deletions(-)

diff --git a/questions/describe-event-bubbling/en-US.mdx b/questions/describe-event-bubbling/en-US.mdx
index 7370070..71d1d0f 100644
--- a/questions/describe-event-bubbling/en-US.mdx
+++ b/questions/describe-event-bubbling/en-US.mdx
@@ -22,11 +22,17 @@ During the bubbling phase, the event starts at the target element and bubbles up
 
 Here's an example using modern ES6 syntax to demonstrate event bubbling:
 
-```js
+```js live
 // HTML:
 // <div id="parent">
 //   <button id="child">Click me!</button>
 // </div>
+const parentDiv = document.createElement('div');
+parentDiv.id = 'parent';
+const button = document.createElement('button');
+button.id = 'child';
+parentDiv.appendChild(button);
+document.body.appendChild(parentDiv);
 
 const parent = document.getElementById('parent');
 const child = document.getElementById('child');
@@ -38,6 +44,9 @@ parent.addEventListener('click', () => {
 child.addEventListener('click', () => {
   console.log('Child element clicked');
 });
+
+// Simulate clicking the button:
+child.click();
 ```
 
 When you click the "Click me!" button, both the child and parent event handlers will be triggered due to the event bubbling.
@@ -46,11 +55,32 @@ When you click the "Click me!" button, both the child and parent event handlers
 
 Event bubbling can be stopped during the bubbling phase using the `stopPropagation()` method. If an event handler calls `stopPropagation()`, it prevents the event from further bubbling up the DOM tree, ensuring that only the handlers of the elements up to that point in the hierarchy are executed.
 
-```js
+```js live
+// HTML:
+// <div id="parent">
+//   <button id="child">Click me!</button>
+// </div>
+const parentDiv = document.createElement('div');
+parentDiv.id = 'parent';
+const button = document.createElement('button');
+button.id = 'child';
+parentDiv.appendChild(button);
+document.body.appendChild(parentDiv);
+
+const parent = document.getElementById('parent');
+const child = document.getElementById('child');
+
+parent.addEventListener('click', () => {
+  console.log('Parent element clicked');
+});
+
 child.addEventListener('click', (event) => {
   console.log('Child element clicked');
-  event.stopPropagation();
+  event.stopPropagation(); // Stops propagation to parent
 });
+
+// Simulate clicking the button:
+child.click();
 ```
 
 ## Event delegation
diff --git a/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx b/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx
index a77c7bd..54dbd83 100644
--- a/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx
+++ b/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx
@@ -100,7 +100,7 @@ The CookieStore API is relatively new and may not be supported in all browsers (
 - **Access**: Data is accessible within all tabs and windows of the same origin.
 - **Security**: All JavaScript on the page have access to values within `localStorage`.
 
-```js live
+```js
 // Set a value in localStorage.
 localStorage.setItem('key', 'value');
 
@@ -123,7 +123,7 @@ localStorage.clear();
 - **Access**: Data is only accessible within the current tab or window. Different tabs or windows with the same page will have different `sessionStorage` objects.
 - **Security**: All JavaScript on the same page have access to values within `sessionStorage` for that page.
 
-```js live
+```js
 // Set a value in sessionStorage.
 sessionStorage.setItem('key', 'value');
 
diff --git a/questions/explain-how-this-works-in-javascript/en-US.mdx b/questions/explain-how-this-works-in-javascript/en-US.mdx
index 85afbee..4773e5c 100644
--- a/questions/explain-how-this-works-in-javascript/en-US.mdx
+++ b/questions/explain-how-this-works-in-javascript/en-US.mdx
@@ -48,7 +48,7 @@ showThis(); // In non-strict mode: Window (global object). In strict mode: undef
 
 When a function is called as a method of an object, `this` refers to the object that the method is called on.
 
-```js
+```js live
 const obj = {
   name: 'John',
   showThis: function () {
@@ -77,7 +77,7 @@ showThisStandalone(); // In non-strict mode: Window (global object). In strict m
 
 When a function is used as a constructor (called with the `new` keyword), `this` refers to the newly-created instance. In the following example, `this` refers to the `Person` object being created, and the `name` property is set on that object.
 
-```js
+```js live
 function Person(name) {
   this.name = name;
 }
@@ -90,7 +90,7 @@ console.log(person.name); // "John"
 
 In ES2015 classes, `this` behaves as it does in object methods. It refers to the instance of the class.
 
-```js
+```js live
 class Person {
   constructor(name) {
     this.name = name;
@@ -114,7 +114,7 @@ You can use `bind()`, `call()`, or `apply()` to explicitly set the value of `thi
 
 Using the `call()` and `apply()` methods allow you to explicitly set the value of `this` when calling the function.
 
-```js
+```js live
 function showThis() {
   console.log(this);
 }
@@ -126,7 +126,7 @@ showThis.apply(obj); // { name: 'John' }
 
 The `bind()` method creates a new function with `this` bound to the specified value.
 
-```js
+```js live
 function showThis() {
   console.log(this);
 }
@@ -142,11 +142,11 @@ Arrow functions do not have their own `this` context. Instead, the `this` is lex
 
 In this example, `this` refers to the global object (window or global), because the arrow function is not bound to the `person` object.
 
-```js
+```js live
 const person = {
-  name: 'John',
+  firstName: 'John',
   sayHello: () => {
-    console.log(`Hello, my name is ${this.name}!`);
+    console.log(`Hello, my name is ${this.firstName}!`);
   },
 };
 
diff --git a/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx b/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx
index 947cb7e..296499e 100644
--- a/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx
+++ b/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the concept of a callback function in asynchronous operations
 
 A callback function is a function passed as an argument to another function, which is then invoked inside the outer function to complete some kind of routine or action. In asynchronous operations, callbacks are used to handle tasks that take time to complete, such as network requests or file I/O, without blocking the execution of the rest of the code. For example:
 
-```js
+```js live
 function fetchData(callback) {
   setTimeout(() => {
     const data = { name: 'John', age: 30 };
@@ -50,7 +50,7 @@ greet('Alice', sayGoodbye);
 
 ### Example of an asynchronous callback
 
-```js
+```js live
 function fetchData(callback) {
   setTimeout(() => {
     const data = { name: 'John', age: 30 };
diff --git a/questions/explain-the-concept-of-debouncing-and-throttling/en-US.mdx b/questions/explain-the-concept-of-debouncing-and-throttling/en-US.mdx
index 1aecfa4..c1cbbe4 100644
--- a/questions/explain-the-concept-of-debouncing-and-throttling/en-US.mdx
+++ b/questions/explain-the-concept-of-debouncing-and-throttling/en-US.mdx
@@ -8,7 +8,7 @@ Debouncing and throttling are techniques used to control the rate at which a fun
 
 Debouncing delays the execution of a function until a certain amount of time has passed since it was last called. This is useful for scenarios like search input fields where you want to wait until the user has stopped typing before making an API call.
 
-```js
+```js live
 function debounce(func, delay) {
   let timeoutId;
   return function (...args) {
@@ -16,11 +16,14 @@ function debounce(func, delay) {
     timeoutId = setTimeout(() => func.apply(this, args), delay);
   };
 }
+
+const debouncedHello = debounce(() => console.log('Hello world!'), 2000);
+debouncedHello(); // Prints 'Hello world!' after 2 seconds
 ```
 
 Throttling ensures that a function is called at most once in a specified time interval. This is useful for scenarios like window resizing or scrolling where you want to limit the number of times a function is called.
 
-```js
+```js live
 function throttle(func, limit) {
   let inThrottle;
   return function (...args) {
@@ -31,6 +34,17 @@ function throttle(func, limit) {
     }
   };
 }
+
+const handleResize = throttle(() => {
+  // Update element positions
+  console.log('Window resized at', new Date().toLocaleTimeString());
+}, 2000);
+
+// Simulate rapid calls to handleResize every 100ms
+let intervalId = setInterval(() => {
+  handleResize();
+}, 100);
+// 'Window resized' is outputted only every 2 seconds due to throttling
 ```
 
 ---
@@ -77,7 +91,7 @@ Imagine you have a function that updates the position of elements on the screen
 
 #### Code example
 
-```js
+```js live
 function throttle(func, limit) {
   let inThrottle;
   return function (...args) {
diff --git a/questions/explain-the-concept-of-error-propagation-in-javascript/en-US.mdx b/questions/explain-the-concept-of-error-propagation-in-javascript/en-US.mdx
index c9e9a15..41484b1 100644
--- a/questions/explain-the-concept-of-error-propagation-in-javascript/en-US.mdx
+++ b/questions/explain-the-concept-of-error-propagation-in-javascript/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the concept of error propagation in JavaScript
 
 Error propagation in JavaScript refers to how errors are passed through the call stack. When an error occurs in a function, it can be caught and handled using `try...catch` blocks. If not caught, the error propagates up the call stack until it is either caught or causes the program to terminate. For example:
 
-```js
+```js live
 function a() {
   throw new Error('An error occurred');
 }
@@ -36,7 +36,7 @@ When an error occurs in a function, it can either be caught and handled within t
 
 To handle errors and prevent them from propagating further, you can use `try...catch` blocks. Here is an example:
 
-```js
+```js live
 function a() {
   throw new Error('An error occurred');
 }
@@ -58,7 +58,7 @@ In this example, the error thrown in function `a` propagates to function `b`, an
 
 Error propagation works differently with asynchronous code, such as promises and `async/await`. For promises, you can use `.catch()` to handle errors:
 
-```js
+```js live
 function a() {
   return Promise.reject(new Error('An error occurred'));
 }
@@ -74,7 +74,7 @@ b().catch((e) => {
 
 For `async/await`, you can use `try...catch` blocks:
 
-```js
+```js live
 async function a() {
   throw new Error('An error occurred');
 }
diff --git a/questions/explain-the-concept-of-partial-application/en-US.mdx b/questions/explain-the-concept-of-partial-application/en-US.mdx
index 9397f77..f1b0aee 100644
--- a/questions/explain-the-concept-of-partial-application/en-US.mdx
+++ b/questions/explain-the-concept-of-partial-application/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the concept of partial application
 
 Partial application is a technique in functional programming where a function is applied to some of its arguments, producing a new function that takes the remaining arguments. This allows you to create more specific functions from general ones. For example, if you have a function `add(a, b)`, you can partially apply it to create a new function `add5` that always adds 5 to its argument.
 
-```js
+```js live
 function add(a, b) {
   return a + b;
 }
diff --git a/questions/explain-the-concept-of-tagged-templates/en-US.mdx b/questions/explain-the-concept-of-tagged-templates/en-US.mdx
index ecada6d..7714275 100644
--- a/questions/explain-the-concept-of-tagged-templates/en-US.mdx
+++ b/questions/explain-the-concept-of-tagged-templates/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the concept of tagged templates
 
 Tagged templates in JavaScript allow you to parse template literals with a function. The function receives the literal strings and the values as arguments, enabling custom processing of the template. For example:
 
-```js
+```js live
 function tag(strings, ...values) {
   return strings[0] + values[0] + strings[1] + values[1] + strings[2];
 }
@@ -44,7 +44,7 @@ When a tagged template is invoked, the tag function receives:
 
 For example:
 
-```js
+```js live
 function tag(strings, ...values) {
   console.log(strings); // ["Hello ", "! How are ", "?"]
   console.log(values); // ["world", "you"]
@@ -65,7 +65,7 @@ Tagged templates can be used for various purposes, such as:
 
 Here is a simple example of a tagged template that escapes HTML:
 
-```js
+```js live
 function escapeHTML(strings, ...values) {
   return strings.reduce((result, string, i) => {
     const value = values[i - 1];
diff --git a/questions/explain-the-concept-of-the-strategy-pattern/en-US.mdx b/questions/explain-the-concept-of-the-strategy-pattern/en-US.mdx
index 33f8325..0b0f3cf 100644
--- a/questions/explain-the-concept-of-the-strategy-pattern/en-US.mdx
+++ b/questions/explain-the-concept-of-the-strategy-pattern/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain the concept of the Strategy pattern
 
 The Strategy pattern is a behavioral design pattern that allows you to define a family of algorithms, encapsulate each one as a separate class, and make them interchangeable. This pattern lets the algorithm vary independently from the clients that use it. For example, if you have different sorting algorithms, you can define each one as a strategy and switch between them without changing the client code.
 
-```js
+```js live
 class Context {
   constructor(strategy) {
     this.strategy = strategy;
@@ -20,18 +20,20 @@ class Context {
 class ConcreteStrategyA {
   doAlgorithm(data) {
     // Implementation of algorithm A
+    return 'Algorithm A was run on ' + data;
   }
 }
 
 class ConcreteStrategyB {
   doAlgorithm(data) {
     // Implementation of algorithm B
+    return 'Algorithm B was run on ' + data;
   }
 }
 
 // Usage
 const context = new Context(new ConcreteStrategyA());
-context.executeStrategy(data);
+context.executeStrategy('someData'); // Output: Algorithm A was run on someData
 ```
 
 ---
@@ -52,7 +54,7 @@ The Strategy pattern is a behavioral design pattern that enables selecting an al
 
 Consider a scenario where you have different sorting algorithms and you want to switch between them without changing the client code.
 
-```js
+```js live
 // Strategy interface
 class Strategy {
   doAlgorithm(data) {
@@ -92,10 +94,10 @@ class Context {
 // Usage
 const data = [3, 1, 4, 1, 5, 9];
 const context = new Context(new ConcreteStrategyA());
-console.log(context.executeStrategy(data)); // Output: [1, 1, 3, 4, 5, 9]
+console.log(context.executeStrategy([...data])); // Output: [1, 1, 3, 4, 5, 9]
 
 context.setStrategy(new ConcreteStrategyB());
-console.log(context.executeStrategy(data)); // Output: [9, 5, 4, 3, 1, 1]
+console.log(context.executeStrategy([...data])); // Output: [9, 5, 4, 3, 1, 1]
 ```
 
 ### Benefits
diff --git a/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx b/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx
index b79a4a5..bd0cdfb 100644
--- a/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx
+++ b/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx
@@ -14,15 +14,11 @@ function sum(a, b) {
 
 const result = sum(2, 3); // The program waits for sum() to complete before assigning the result
 console.log('Result: ', result); // Output: 5
-
-// Console output:
-// Inside sum function
-// Result: 5
 ```
 
 Asynchronous functions usually accept a callback as a parameter and execution continue on to the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).
 
-```js
+```js live
 function fetchData(callback) {
   setTimeout(() => {
     const data = { name: 'John', age: 30 };
@@ -31,16 +27,12 @@ function fetchData(callback) {
 }
 
 console.log('Fetching data...');
+
 fetchData((data) => {
   console.log(data); // Output: { name: 'John', age: 30 } (after 2 seconds)
 });
 
-console.log('Call made to fetch data'); // Output: This will be printed first
-
-// Console output:
-// Fetching data...
-// Call made to fetch data
-// { name: 'John', age: 30 }
+console.log('Call made to fetch data'); // This will print before the data is fetched
 ```
 
 ---
@@ -89,10 +81,10 @@ Asynchronous functions do not block the execution of the program. They allow oth
 
 1. **Network requests**: Making network requests, such as fetching data from an API or sending data to a server, is typically done asynchronously. This allows the application to remain responsive while waiting for the response, preventing the user interface from freezing
 
-   ```js
+   ```js live
    console.log('Start of the program'); // This will be printed first as program starts here
 
-   fetch('https://api.example.com/data')
+   fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
@@ -102,7 +94,7 @@ Asynchronous functions do not block the execution of the program. They allow oth
      })
      .catch((error) => console.error(error));
 
-   console.log('End of program'); // This will be printed next before the fetch callback
+   console.log('End of program'); // This will be printed before the fetch callback
    ```
 
 2. **User input and events**: Handling user input events, such as clicks, key presses, or mouse movements, is inherently asynchronous. The application needs to respond to these events without blocking the main thread, ensuring a smooth user experience.
@@ -117,12 +109,14 @@ Asynchronous functions do not block the execution of the program. They allow oth
 
 3. **Timers and Animations**: Timers (`setTimeout()`, `setInterval()`) and animations (e.g., `requestAnimationFrame()`) are asynchronous operations that allow the application to schedule tasks or update animations without blocking the main thread.
 
-   ```js
+   ```js live
    setTimeout(() => {
      console.log('This message is delayed by 2 seconds');
    }, 2000);
 
-   const animationId = requestAnimationFrame(updateAnimation);
+   setInterval(() => {
+     console.log('Current time:', new Date().toLocaleString());
+   }, 2000); // Interval runs every 2 seconds
    ```
 
 By using asynchronous functions and operations, JavaScript can handle time-consuming tasks without freezing the user interface or blocking the main thread.
diff --git a/questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.mdx b/questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.mdx
index ab66e21..e9f8bc0 100644
--- a/questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.mdx
+++ b/questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.mdx
@@ -30,7 +30,7 @@ showThis(); // In non-strict mode: window, in strict mode: undefined
 
 When a function is called as a method of an object, `this` refers to the object.
 
-```js
+```js live
 const obj = {
   name: 'Alice',
   greet: function () {
@@ -47,7 +47,7 @@ Using `call`, `apply`, or `bind` methods, you can explicitly set `this`.
 
 ### Using `call`
 
-```js
+```js live
 function greet() {
   console.log(this.name);
 }
@@ -59,7 +59,7 @@ greet.call(person); // 'Bob'
 
 ### Using `apply`
 
-```js
+```js live
 function greet(greeting) {
   console.log(greeting + ', ' + this.name);
 }
@@ -71,7 +71,7 @@ greet.apply(person, ['Hello']); // 'Hello, Charlie'
 
 ### Using `bind`
 
-```js
+```js live
 function greet() {
   console.log(this.name);
 }
@@ -86,7 +86,7 @@ boundGreet(); // 'Dave'
 
 When a function is used as a constructor with the `new` keyword, `this` refers to the newly created object.
 
-```js
+```js live
 function Person(name) {
   this.name = name;
 }
@@ -99,11 +99,11 @@ console.log(person.name); // 'Eve'
 
 Arrow functions do not have their own `this` and inherit `this` from the surrounding lexical context.
 
-```js
+```js live
 const obj = {
-  name: 'Frank',
+  firstName: 'Frank',
   greet: () => {
-    console.log(this.name);
+    console.log(this.firstName);
   },
 };
 
diff --git a/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.mdx b/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.mdx
index 2dc5ce0..c1c9214 100644
--- a/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.mdx
+++ b/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.mdx
@@ -29,7 +29,7 @@ elementToModify.innerHTML = 'New Content';
 
 To add an HTML element, you can use the `document.createElement` method to create a new element and then append it to a parent element using `appendChild`.
 
-```js
+```js live
 // Create a new div element
 const newDiv = document.createElement('div');
 
@@ -38,6 +38,9 @@ newDiv.textContent = 'Hello, World!';
 
 // Append the new element to the body
 document.body.appendChild(newDiv);
+
+// See the changed document by running the code
+console.log(document.body);
 ```
 
 You can also use `insertBefore` to insert the new element before an existing child element.
@@ -73,9 +76,8 @@ elementToRemove.remove();
 
 To modify an HTML element, you can change its properties such as `innerHTML`, `textContent`, or attributes.
 
-```js
-// Select the element to be modified
-const elementToModify = document.getElementById('elementId');
+```js live
+const elementToModify = document.createElement('div');
 
 // Change its inner HTML
 elementToModify.innerHTML = 'New Content';
@@ -85,6 +87,8 @@ elementToModify.textContent = 'New Text Content';
 
 // Change an attribute
 elementToModify.setAttribute('class', 'new-class');
+
+console.log(elementToModify);
 ```
 
 You can also use methods like `classList.add`, `classList.remove`, and `classList.toggle` to modify the element's classes.
diff --git a/questions/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.mdx b/questions/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.mdx
index d5e5ba9..753ef50 100644
--- a/questions/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.mdx
+++ b/questions/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.mdx
@@ -6,11 +6,12 @@ title: How do you convert a `Set` to an array in JavaScript?
 
 To convert a `Set` to an array in JavaScript, you can use the `Array.from()` method or the spread operator. For example:
 
-```js
+```js live
 const mySet = new Set([1, 2, 3]);
 const myArray = Array.from(mySet);
-// or
-const myArray = [...mySet];
+// OR const myArray = [...mySet];
+
+console.log(myArray); // Output: [1, 2, 3]
 ```
 
 ---
@@ -21,7 +22,7 @@ const myArray = [...mySet];
 
 The `Array.from()` method creates a new, shallow-copied array instance from an array-like or iterable object, such as a `Set`.
 
-```js
+```js live
 const mySet = new Set([1, 2, 3]);
 const myArray = Array.from(mySet);
 console.log(myArray); // Output: [1, 2, 3]
@@ -31,7 +32,7 @@ console.log(myArray); // Output: [1, 2, 3]
 
 The spread operator (`...`) can be used to expand the elements of a `Set` into an array.
 
-```js
+```js live
 const mySet = new Set([1, 2, 3]);
 const myArray = [...mySet];
 console.log(myArray); // Output: [1, 2, 3]
diff --git a/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx b/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx
index f3def3d..6ceb2de 100644
--- a/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx
+++ b/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx
@@ -6,14 +6,12 @@ title: How do you get the query string values of the current page in JavaScript?
 
 To get the query string values of the current page in JavaScript, you can use the `URLSearchParams` object. First, create a `URLSearchParams` instance with `window.location.search`, then use the `get` method to retrieve specific query parameters. For example:
 
-```js live
+```js
 const params = new URLSearchParams(window.location.search);
 const value = params.get('language');
 console.log(value);
 ```
 
-This will give you the value of the query parameter named `language`. If you look at the URL of this page, you can see that the `language` parameter is set to 'js'.
-
 ---
 
 ## How do you get the query string values of the current page in JavaScript?
@@ -25,9 +23,9 @@ The `URLSearchParams` interface provides an easy way to work with query strings.
 1. **Create a `URLSearchParams` instance**: Use `window.location.search` to get the query string part of the URL.
 2. **Retrieve specific query parameters**: Use the `get` method to get the value of a specific query parameter.
 
-```js live
+```js
 const params = new URLSearchParams(window.location.search);
-const value = params.get('key'); // Replace 'key' with the actual query parameter name (try 'language' or 'tab' for this page)
+const value = params.get('key'); // Replace 'key' with the actual query parameter name
 console.log(value);
 ```
 
@@ -54,26 +52,24 @@ const values = params.getAll('key'); // Returns an array of values
 
 ### Checking for the existence of a parameter
 
-You can use the `has` method to check if a query parameter exists. Try to check for the query parameters present in the URL of this page.
+You can use the `has` method to check if a query parameter exists.
 
-```js live
+```js
 const params = new URLSearchParams(window.location.search);
-console.log(params.has('page')); // false
-console.log(params.has('language')); // true
-console.log(params.has('tab')); // true
+console.log(params.has('page'));
+console.log(params.has('language'));
+console.log(params.has('tab'));
 ```
 
 ### Iterating over all parameters
 
 You can iterate over all query parameters using the `forEach` method:
 
-```js live
+```js
 const params = new URLSearchParams(window.location.search);
 params.forEach((value, key) => {
   console.log(`${key}: ${value}`);
 });
-// language: js
-// tab: quiz
 ```
 
 ## Further reading
diff --git a/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx b/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx
index 1c3d660..730eda1 100644
--- a/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx
+++ b/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx
@@ -6,9 +6,10 @@ title: How do you handle errors in asynchronous operations?
 
 To handle errors in asynchronous operations, you can use `try...catch` blocks with `async/await` syntax or `.catch()` method with Promises. For example, with `async/await`, you can wrap your code in a `try...catch` block to catch any errors:
 
-```js
+```js live
 async function fetchData() {
   try {
+    // Invalid URl
     const response = await fetch('https://api.example.com/data');
     const data = await response.json();
     console.log(data);
@@ -16,12 +17,14 @@ async function fetchData() {
     console.error('Error fetching data:', error);
   }
 }
+
+fetchData(); // Error fetching data: ....
 ```
 
 With Promises, you can use the `.catch()` method:
 
-```js
-fetch('https://api.example.com/data')
+```js live
+fetch('https://api.example.com/data') // Invalid URl
   .then((response) => response.json())
   .then((data) => console.log(data))
   .catch((error) => console.error('Error fetching data:', error));
@@ -35,9 +38,10 @@ fetch('https://api.example.com/data')
 
 When using `async/await`, you can handle errors by wrapping your asynchronous code in a `try...catch` block. This allows you to catch any errors that occur during the execution of the `await` statement.
 
-```js
+```js live
 async function fetchData() {
   try {
+    // Invalid URl
     const response = await fetch('https://api.example.com/data');
     const data = await response.json();
     console.log(data);
@@ -45,15 +49,18 @@ async function fetchData() {
     console.error('Error fetching data:', error);
   }
 }
+
+fetchData(); // Error fetching data: ....
 ```
 
 ### Nested asynchronous operations
 
 If you have multiple asynchronous operations, you can nest `try...catch` blocks to handle errors at different levels.
 
-```js
+```js live
 async function fetchData() {
   try {
+    // Invalid URl
     const response = await fetch('https://api.example.com/data');
     const data = await response.json();
     console.log(data);
@@ -66,10 +73,13 @@ async function processData() {
   try {
     await fetchData();
     // Additional processing
+    console.log(arr); // Trying to reference an undefined variable will throw an error
   } catch (error) {
     console.error('Error processing data:', error);
   }
 }
+
+processData();
 ```
 
 ## Using `.catch()` with Promises
@@ -78,7 +88,7 @@ async function processData() {
 
 When working with Promises, you can handle errors using the `.catch()` method. This method is called if the Promise is rejected.
 
-```js
+```js live
 fetch('https://api.example.com/data')
   .then((response) => response.json())
   .then((data) => console.log(data))
@@ -89,7 +99,7 @@ fetch('https://api.example.com/data')
 
 If you have multiple Promises chained together, you can use a single `.catch()` at the end to handle any errors that occur in any of the Promises.
 
-```js
+```js live
 fetch('https://api.example.com/data')
   .then((response) => response.json())
   .then((data) => {
diff --git a/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx b/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx
index 49fdb84..e9b38ea 100644
--- a/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx
+++ b/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx
@@ -6,13 +6,17 @@ title: Provide some examples of how currying and partial application can be used
 
 Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. Partial application fixes a few arguments of a function, producing another function with a smaller number of arguments. For example, currying a function `add(a, b)` would look like `add(a)(b)`, while partial application of `add(2, b)` would fix the first argument to 2, resulting in a function that only needs the second argument.
 
-```js
-// Currying example
+### Currying example
+
+```js live
 const add = (a) => (b) => a + b;
 const addTwo = add(2);
 console.log(addTwo(3)); // 5
+```
 
-// Partial application example
+### Partial application example
+
+```js live
 const add = (a, b) => a + b;
 const addTwo = add.bind(null, 2);
 console.log(addTwo(3)); // 5
@@ -28,24 +32,18 @@ Currying is a technique where a function with multiple arguments is transformed
 
 #### Example
 
-Consider a simple function that adds two numbers:
-
-```js
+```js live
+// Consider a simple function that adds two numbers:
 function add(a, b) {
   return a + b;
 }
-```
-
-To curry this function, we transform it into a series of functions, each taking one argument:
-
-```js
-const add = (a) => (b) => a + b;
-```
 
-Now, you can use the curried function like this:
+// To curry this function, we transform it into a series of functions,
+// each taking one argument:
+const curriedAdd = (a) => (b) => a + b;
 
-```js
-const addTwo = add(2);
+// Now, you can use the curried function like this:
+const addTwo = curriedAdd(2);
 console.log(addTwo(3)); // 5
 ```
 
@@ -55,32 +53,26 @@ Partial application is a technique where you fix a few arguments of a function,
 
 #### Example
 
-Consider the same `add` function:
-
-```js
+```js live
+// Consider the same add function:
 function add(a, b) {
   return a + b;
 }
-```
 
-To partially apply this function, you can use the `bind` method to fix the first argument:
-
-```js
+// To partially apply this function
+// you can use the `bind` method to fix the first argument:
 const addTwo = add.bind(null, 2);
 console.log(addTwo(3)); // 5
-```
 
-Alternatively, you can create a custom partial application function:
-
-```js
+// Alternatively, you can create a custom partial application function:
 function partial(fn, ...fixedArgs) {
   return function (...remainingArgs) {
     return fn(...fixedArgs, ...remainingArgs);
   };
 }
 
-const addTwo = partial(add, 2);
-console.log(addTwo(3)); // 5
+const addTwoCustom = partial(add, 2);
+console.log(addTwoCustom(3)); // 5
 ```
 
 ## Further reading
diff --git a/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx b/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx
index 70974f7..e904548 100644
--- a/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx
+++ b/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx
@@ -10,12 +10,12 @@ For example, let's say we have a `Person` constructor that takes a first name as
 
 ```js live
 const Person = function (name) {
-  this.name = name;
+  this.firstName = name;
   this.sayName1 = function () {
-    console.log(this.name);
+    console.log(this.firstName);
   };
   this.sayName2 = () => {
-    console.log(this.name);
+    console.log(this.firstName);
   };
 };
 
@@ -95,9 +95,9 @@ const foo = new Foo(); // TypeError: Foo is not a constructor
 
 They also do not have `arguments` keyword; the arguments have to be obtained from using the rest operator (`...`) in the arguments.
 
-```js
+```js live
 const arrowFunction = (...args) => {
-  console.log(arguments); // Throws a TypeError
+  console.log(arguments); // Throws a ReferenceError
   console.log(args); // [1, 2, 3]
 };
 
@@ -123,12 +123,12 @@ One of the most notable features of arrow functions is their behavior with `this
 
 ```js live
 const Person = function (name) {
-  this.name = name;
+  this.firstName = name;
   this.sayName1 = function () {
-    console.log(this.name);
+    console.log(this.firstName);
   };
   this.sayName2 = () => {
-    console.log(this.name);
+    console.log(this.firstName);
   };
 };
 
diff --git a/questions/what-are-promises-and-how-do-they-work/en-US.mdx b/questions/what-are-promises-and-how-do-they-work/en-US.mdx
index bc9b69a..ba148b5 100644
--- a/questions/what-are-promises-and-how-do-they-work/en-US.mdx
+++ b/questions/what-are-promises-and-how-do-they-work/en-US.mdx
@@ -6,7 +6,7 @@ title: What are Promises and how do they work?
 
 Promises in JavaScript are objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value. They have three states: `pending`, `fulfilled`, and `rejected`. You can handle the results of a promise using the `.then()` method for success and the `.catch()` method for errors.
 
-```js
+```js live
 let promise = new Promise((resolve, reject) => {
   // asynchronous operation
   const success = true;
@@ -46,7 +46,7 @@ A promise can be in one of three states:
 
 You create a promise using the `Promise` constructor, which takes a function with two arguments: `resolve` and `reject`. These are callbacks that you call to change the state of the promise.
 
-```js
+```js live
 let promise = new Promise((resolve, reject) => {
   // asynchronous operation
   const success = true;
@@ -62,7 +62,7 @@ let promise = new Promise((resolve, reject) => {
 
 To handle the result of a promise, you use the `.then()` method for a successful outcome and the `.catch()` method for an error.
 
-```js
+```js live
 let promise = new Promise((resolve, reject) => {
   // asynchronous operation
   const success = false;
@@ -86,11 +86,15 @@ promise
 
 Promises can be chained to handle multiple asynchronous operations in sequence. Each `.then()` returns a new promise, allowing for further chaining.
 
-```js
-promise
+```js live
+new Promise((resolve, reject) => {
+  setTimeout(() => {
+    resolve('Promise 1 resolved after 1 second');
+  }, 1000);
+})
   .then((result) => {
     console.log(result);
-    return anotherPromise;
+    return 'Another promise';
   })
   .then((anotherResult) => {
     console.log(anotherResult);
@@ -104,15 +108,22 @@ promise
 
 You can use `Promise.all()` to run multiple promises in parallel and wait for all of them to complete.
 
-```js
+```js live
 let promise1 = Promise.resolve('First');
 let promise2 = Promise.resolve('Second');
+let promise3 = new Promise((resolve, reject) => {
+  setTimeout(() => {
+    resolve('Third');
+  }, 2000);
+});
 
-Promise.all([promise1, promise2]).then((results) => {
-  console.log(results); // ['First', 'Second']
+Promise.all([promise1, promise2, promise3]).then((results) => {
+  console.log(results); // ['First', 'Second', 'Third']
 });
 ```
 
+In the above example, while `promise1` and `promise2` resolve instantly, `Promise.all` waits for `promise3`, which takes 2 seconds, before logging the results.
+
 ## Further reading
 
 - [MDN Web Docs: Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
diff --git a/questions/what-are-the-various-data-types-in-javascript/en-US.mdx b/questions/what-are-the-various-data-types-in-javascript/en-US.mdx
index 2bb952e..85bbeb7 100644
--- a/questions/what-are-the-various-data-types-in-javascript/en-US.mdx
+++ b/questions/what-are-the-various-data-types-in-javascript/en-US.mdx
@@ -80,7 +80,7 @@ if (!user) {
 
 6. **Symbol**: A unique and immutable `primitive` value, typically used as the key of an object property.
 
-```js live
+```js
 let sym1 = Symbol();
 let sym2 = Symbol('description');
 console.log(sym1); // Symbol()
@@ -89,7 +89,7 @@ console.log(sym2); // Symbol(description)
 
 7. **BigInt**: Used for representing integers with arbitrary precision, useful for working with very large numbers.
 
-```js live
+```js
 let bigNumber = BigInt(9007199254740991);
 let anotherBigNumber = 1234567890123456789012345678901234567890n;
 console.log(bigNumber); // 9007199254740991n
@@ -133,7 +133,7 @@ console.log(add(2, 3)); // 5
 4. **Date**: Represents dates and times. The `Date` object is used to work with dates.
 
 ```js live
-let today = new Date();
+let today = new Date().toLocaleTimeString();
 console.log(today);
 ```
 
@@ -141,7 +141,9 @@ console.log(today);
 
 ```js live
 let pattern = /abc/;
-console.log(pattern);
+let str = '123abc456';
+
+console.log(pattern.test(str)); // true
 ```
 
 6. **Map**: A collection of keyed data items, similar to an `object` but allows keys of any type.
@@ -154,11 +156,11 @@ console.log(map);
 
 7. **Set**: A collection of unique values.
 
-```js live
+```js
 let set = new Set();
 set.add(1);
 set.add(2);
-console.log(set);
+console.log(set); // { 1, 2 }
 ```
 
 ## Determining data types
diff --git a/questions/what-is-the-command-pattern-and-how-is-it-used/en-US.mdx b/questions/what-is-the-command-pattern-and-how-is-it-used/en-US.mdx
index 39b1433..50e03ac 100644
--- a/questions/what-is-the-command-pattern-and-how-is-it-used/en-US.mdx
+++ b/questions/what-is-the-command-pattern-and-how-is-it-used/en-US.mdx
@@ -6,7 +6,7 @@ title: What is the Command pattern and how is it used?
 
 The Command pattern is a behavioral design pattern that turns a request into a stand-alone object containing all information about the request. This transformation allows for parameterization of methods with different requests, queuing of requests, and logging of the requests. It also supports undoable operations. In JavaScript, it can be implemented by creating command objects with `execute` and `undo` methods.
 
-```js
+```js live
 class Command {
   execute() {}
   undo() {}
@@ -58,18 +58,16 @@ The Command pattern is a behavioral design pattern that encapsulates a request a
 
 ### Implementation in JavaScript
 
-#### Step 1: Define the Command interface
+```js live
+// Step 1: Define the Command interface
 
-```js
 class Command {
   execute() {}
   undo() {}
 }
-```
 
-#### Step 2: Create ConcreteCommand classes
+// Step 2: Create ConcreteCommand classes
 
-```js
 class LightOnCommand extends Command {
   constructor(light) {
     super();
@@ -95,11 +93,9 @@ class LightOffCommand extends Command {
     this.light.on();
   }
 }
-```
 
-#### Step 3: Define the Receiver
+// Step 3: Define the Receiver
 
-```js
 class Light {
   on() {
     console.log('Light is on');
@@ -108,11 +104,9 @@ class Light {
     console.log('Light is off');
   }
 }
-```
 
-#### Step 4: Create the Invoker
+// Step 4: Create the Invoker
 
-```js
 class RemoteControl {
   setCommand(command) {
     this.command = command;
@@ -124,11 +118,9 @@ class RemoteControl {
     this.command.undo();
   }
 }
-```
 
-#### Step 5: Client code
+// Step 5: Client code
 
-```js
 const light = new Light();
 const lightOnCommand = new LightOnCommand(light);
 const lightOffCommand = new LightOffCommand(light);
diff --git a/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.mdx b/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.mdx
index 38ceb43..131cbdc 100644
--- a/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.mdx
+++ b/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.mdx
@@ -22,10 +22,10 @@ In this example, `process.nextTick()` will execute first, followed by either `se
 
 `setTimeout()` is a function that schedules a callback to be executed after a specified delay in milliseconds. The minimum delay is approximately 4ms in modern browsers and Node.js.
 
-```js
+```js live
 setTimeout(() => {
-  console.log('Executed after at least 0 milliseconds');
-}, 0);
+  console.log('Executed after at least 1000 milliseconds');
+}, 1000);
 ```
 
 ### `setImmediate()`
diff --git a/questions/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.mdx b/questions/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.mdx
index b7e5f58..70669bd 100644
--- a/questions/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.mdx
+++ b/questions/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.mdx
@@ -41,12 +41,18 @@ The `Document` object represents the HTML or XML document loaded in the browser
 
 Example:
 
-```js
-// Select an element by its ID
-const element = document.getElementById('myElement');
-
-// Change the content of the selected element
-element.textContent = 'New content';
+```js live
+// Create a new element and append it to the document body
+const newElement = document.createElement('div');
+newElement.id = 'myDiv';
+newElement.textContent = 'Hello world';
+document.body.appendChild(newElement);
+
+// Select that element by its ID
+const element = document.getElementById('myDiv');
+
+console.log(element);
+console.log(document.body);
 ```
 
 ### Key differences
diff --git a/questions/what-is-the-use-of-promiseall/en-US.mdx b/questions/what-is-the-use-of-promiseall/en-US.mdx
index d417bae..a36deaa 100644
--- a/questions/what-is-the-use-of-promiseall/en-US.mdx
+++ b/questions/what-is-the-use-of-promiseall/en-US.mdx
@@ -6,7 +6,7 @@ title: What is the use of `Promise.all()`
 
 `Promise.all()` is a method in JavaScript that takes an array of promises and returns a single promise. This returned promise resolves when all the input promises have resolved, or it rejects if any of the input promises reject. It is useful for running multiple asynchronous operations in parallel and waiting for all of them to complete.
 
-```js
+```js live
 const promise1 = Promise.resolve(3);
 const promise2 = 42;
 const promise3 = new Promise((resolve, reject) => {
@@ -45,7 +45,7 @@ When you pass an array of promises to `Promise.all()`, it returns a new promise.
 
 Here is an example to illustrate how `Promise.all()` works:
 
-```js
+```js live
 const promise1 = new Promise((resolve, reject) => {
   setTimeout(resolve, 100, 'one');
 });
@@ -69,7 +69,7 @@ In this example, `Promise.all()` waits for both `promise1` and `promise2` to res
 
 If any of the promises passed to `Promise.all()` reject, the returned promise will immediately reject with the reason of the first promise that rejects.
 
-```js
+```js live
 const promise1 = new Promise((resolve, reject) => {
   setTimeout(resolve, 100, 'one');
 });
diff --git a/questions/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx b/questions/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx
index fc0c91d..ea61f8d 100644
--- a/questions/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx
+++ b/questions/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx
@@ -6,14 +6,16 @@ title: What's a typical use case for anonymous functions in JavaScript?
 
 Anonymous function in Javascript is a function that does not have any name associated with it. They are typically used as arguments to other functions or assigned to variables.
 
-```js
+```js live
+const arr = [-1, 0, 5, 6];
+
 // The filter method is passed an anonymous function.
-arr.filter((x) => x > 1);
+arr.filter((x) => x > 1); // [5, 6]
 ```
 
 They are often used as arguments to other functions, known as higher-order functions, which can take functions as input and return a function as output. Anonymous functions can access variables from the outer scope, a concept known as closures, allowing them to "close over" and remember the environment in which they were created.
 
-```js
+```js live
 // Encapsulating Code
 (function () {
   // Some code here.
@@ -42,7 +44,7 @@ Anonymous functions provide a more concise way to define functions, especially f
 
 Anonymous functions are commonly used in Immediately Invoked Function Expressions (IIFEs) to encapsulate code within a local scope. This prevents variables declared within the function from leaking to the global scope and polluting the global namespace.
 
-```js
+```js live
 // This is an IIFE
 (function () {
   var x = 10;
@@ -59,7 +61,7 @@ In the above example, the IIFE creates a local scope for the variable `x`. As a
 
 Anonymous functions can be used as callbacks that are used once and do not need to be used anywhere else. The code will seem more self-contained and readable when handlers are defined right inside the code calling them, rather than having to search elsewhere to find the function body.
 
-```js
+```js live
 setTimeout(() => {
   console.log('Hello world!');
 }, 1000);
@@ -69,7 +71,7 @@ setTimeout(() => {
 
 It is used as arguments to functional programming constructs like Higher-order functions or Lodash (similar to callbacks). Higher-order functions take other functions as arguments or return them as results. Anonymous functions are often used with higher-order functions like `map()`, `filter()`, and `reduce()`.
 
-```js
+```js live
 const arr = [1, 2, 3];
 const double = arr.map((el) => {
   return el * 2;
diff --git a/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.mdx b/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.mdx
index 6b64543..a4629c3 100644
--- a/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.mdx
+++ b/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.mdx
@@ -30,7 +30,7 @@ For example:
 
 ```js
 // Assuming this is run in the global scope and not within a module.
-const globalVariable = 'I am global';
+var globalVariable = 'I am global';
 function globalFunction() {
   console.log('I am a global function');
 }
@@ -54,7 +54,7 @@ In general, it's a good software engineering practice to not pollute the global
 
 Here's an example of global scope being used.
 
-```js
+```js live
 // Assuming this is run in the global scope, not within a module.
 let count = 0;
 
@@ -83,7 +83,7 @@ By now we hope that you're convinced that it's not a good idea to define variabl
 - **Use modules**: Utilize module systems to encapsulate your code and prevent global scope pollution. Each module has its own scope, making it easier to manage and maintain your code.
 - **Use immediately invoked function expressions (IIFE)**: If modules are not available, wrap your code in an IIFE to create a new scope, preventing variables from being added to the global scope unless you explicitly expose them.
 
-```js
+```js live
 // Assuming this is run in the global scope, not within a module.
 (function () {
   let count = 0;

From 23d081650180f0ea6443b82e220ae717f68a5394 Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Mon, 24 Mar 2025 07:53:38 +0800
Subject: [PATCH 08/26] qns: fix issue and regenerate

---
 README.md                                     | 124 ++++++++++--------
 .../en-US.mdx                                 |   4 +-
 2 files changed, 69 insertions(+), 59 deletions(-)

diff --git a/README.md b/README.md
index b7240f0..24bc889 100644
--- a/README.md
+++ b/README.md
@@ -601,12 +601,12 @@ For example, let's say we have a `Person` constructor that takes a first name as
 
 ```js live
 const Person = function (name) {
-  this.name = name;
+  this.firstName = name;
   this.sayName1 = function () {
-    console.log(this.name);
+    console.log(this.firstName);
   };
   this.sayName2 = () => {
-    console.log(this.name);
+    console.log(this.firstName);
   };
 };
 
@@ -785,14 +785,16 @@ console.log(namedFunc); // ReferenceError: namedFunc is not defined
 
 Anonymous function in Javascript is a function that does not have any name associated with it. They are typically used as arguments to other functions or assigned to variables.
 
-```js
+```js live
+const arr = [-1, 0, 5, 6];
+
 // The filter method is passed an anonymous function.
-arr.filter((x) => x > 1);
+arr.filter((x) => x > 1); // [5, 6]
 ```
 
 They are often used as arguments to other functions, known as higher-order functions, which can take functions as input and return a function as output. Anonymous functions can access variables from the outer scope, a concept known as closures, allowing them to "close over" and remember the environment in which they were created.
 
-```js
+```js live
 // Encapsulating Code
 (function () {
   // Some code here.
@@ -1127,15 +1129,11 @@ function sum(a, b) {
 
 const result = sum(2, 3); // The program waits for sum() to complete before assigning the result
 console.log('Result: ', result); // Output: 5
-
-// Console output:
-// Inside sum function
-// Result: 5
 ```
 
 Asynchronous functions usually accept a callback as a parameter and execution continue on to the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).
 
-```js
+```js live
 function fetchData(callback) {
   setTimeout(() => {
     const data = { name: 'John', age: 30 };
@@ -1144,16 +1142,12 @@ function fetchData(callback) {
 }
 
 console.log('Fetching data...');
+
 fetchData((data) => {
   console.log(data); // Output: { name: 'John', age: 30 } (after 2 seconds)
 });
 
-console.log('Call made to fetch data'); // Output: This will be printed first
-
-// Console output:
-// Fetching data...
-// Call made to fetch data
-// { name: 'John', age: 30 }
+console.log('Call made to fetch data'); // This will print before the data is fetched
 ```
 
 <!-- Update here: /questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx -->
@@ -2363,7 +2357,7 @@ console.log(greeting); // Output: Hello, John!
 
 Tagged templates in JavaScript allow you to parse template literals with a function. The function receives the literal strings and the values as arguments, enabling custom processing of the template. For example:
 
-```js
+```js live
 function tag(strings, ...values) {
   return strings[0] + values[0] + strings[1] + values[1] + strings[2];
 }
@@ -3208,14 +3202,16 @@ fetchData(handleData);
 
 Anonymous function in Javascript is a function that does not have any name associated with it. They are typically used as arguments to other functions or assigned to variables.
 
-```js
+```js live
+const arr = [-1, 0, 5, 6];
+
 // The filter method is passed an anonymous function.
-arr.filter((x) => x > 1);
+arr.filter((x) => x > 1); // [5, 6]
 ```
 
 They are often used as arguments to other functions, known as higher-order functions, which can take functions as input and return a function as output. Anonymous functions can access variables from the outer scope, a concept known as closures, allowing them to "close over" and remember the environment in which they were created.
 
-```js
+```js live
 // Encapsulating Code
 (function () {
   // Some code here.
@@ -3794,15 +3790,11 @@ function sum(a, b) {
 
 const result = sum(2, 3); // The program waits for sum() to complete before assigning the result
 console.log('Result: ', result); // Output: 5
-
-// Console output:
-// Inside sum function
-// Result: 5
 ```
 
 Asynchronous functions usually accept a callback as a parameter and execution continue on to the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).
 
-```js
+```js live
 function fetchData(callback) {
   setTimeout(() => {
     const data = { name: 'John', age: 30 };
@@ -3811,16 +3803,12 @@ function fetchData(callback) {
 }
 
 console.log('Fetching data...');
+
 fetchData((data) => {
   console.log(data); // Output: { name: 'John', age: 30 } (after 2 seconds)
 });
 
-console.log('Call made to fetch data'); // Output: This will be printed first
-
-// Console output:
-// Fetching data...
-// Call made to fetch data
-// { name: 'John', age: 30 }
+console.log('Call made to fetch data'); // This will print before the data is fetched
 ```
 
 <!-- Update here: /questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx -->
@@ -3837,7 +3825,7 @@ console.log('Call made to fetch data'); // Output: This will be printed first
 
 A callback function is a function passed as an argument to another function, which is then invoked inside the outer function to complete some kind of routine or action. In asynchronous operations, callbacks are used to handle tasks that take time to complete, such as network requests or file I/O, without blocking the execution of the rest of the code. For example:
 
-```js
+```js live
 function fetchData(callback) {
   setTimeout(() => {
     const data = { name: 'John', age: 30 };
@@ -3864,7 +3852,7 @@ fetchData((data) => {
 
 Promises in JavaScript are objects that represent the eventual completion (or failure) of an asynchronous operation and its resulting value. They have three states: `pending`, `fulfilled`, and `rejected`. You can handle the results of a promise using the `.then()` method for success and the `.catch()` method for errors.
 
-```js
+```js live
 let promise = new Promise((resolve, reject) => {
   // asynchronous operation
   const success = true;
@@ -3937,7 +3925,7 @@ Promises offer a cleaner alternative to callbacks, helping to avoid callback hel
 
 `Promise.all()` is a method in JavaScript that takes an array of promises and returns a single promise. This returned promise resolves when all the input promises have resolved, or it rejects if any of the input promises reject. It is useful for running multiple asynchronous operations in parallel and waiting for all of them to complete.
 
-```js
+```js live
 const promise1 = Promise.resolve(3);
 const promise2 = 42;
 const promise3 = new Promise((resolve, reject) => {
@@ -4006,9 +3994,10 @@ fetchData();
 
 To handle errors in asynchronous operations, you can use `try...catch` blocks with `async/await` syntax or `.catch()` method with Promises. For example, with `async/await`, you can wrap your code in a `try...catch` block to catch any errors:
 
-```js
+```js live
 async function fetchData() {
   try {
+    // Invalid URl
     const response = await fetch('https://api.example.com/data');
     const data = await response.json();
     console.log(data);
@@ -4016,12 +4005,14 @@ async function fetchData() {
     console.error('Error fetching data:', error);
   }
 }
+
+fetchData(); // Error fetching data: ....
 ```
 
 With Promises, you can use the `.catch()` method:
 
-```js
-fetch('https://api.example.com/data')
+```js live
+fetch('https://api.example.com/data') // Invalid URl
   .then((response) => response.json())
   .then((data) => console.log(data))
   .catch((error) => console.error('Error fetching data:', error));
@@ -4353,12 +4344,12 @@ For example, let's say we have a `Person` constructor that takes a first name as
 
 ```js live
 const Person = function (name) {
-  this.name = name;
+  this.firstName = name;
   this.sayName1 = function () {
-    console.log(this.name);
+    console.log(this.firstName);
   };
   this.sayName2 = () => {
-    console.log(this.name);
+    console.log(this.firstName);
   };
 };
 
@@ -5526,14 +5517,12 @@ window.location.replace('https://www.example.com');
 
 To get the query string values of the current page in JavaScript, you can use the `URLSearchParams` object. First, create a `URLSearchParams` instance with `window.location.search`, then use the `get` method to retrieve specific query parameters. For example:
 
-```js live
+```js
 const params = new URLSearchParams(window.location.search);
 const value = params.get('language');
 console.log(value);
 ```
 
-This will give you the value of the query parameter named `language`. If you look at the URL of this page, you can see that the `language` parameter is set to 'js'.
-
 <!-- Update here: /questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.mdx -->
 
 <br>
@@ -5899,7 +5888,7 @@ try {
 
 Error propagation in JavaScript refers to how errors are passed through the call stack. When an error occurs in a function, it can be caught and handled using `try...catch` blocks. If not caught, the error propagates up the call stack until it is either caught or causes the program to terminate. For example:
 
-```js
+```js live
 function a() {
   throw new Error('An error occurred');
 }
@@ -5962,7 +5951,7 @@ console.log(result); // Output: 6
 
 Partial application is a technique in functional programming where a function is applied to some of its arguments, producing a new function that takes the remaining arguments. This allows you to create more specific functions from general ones. For example, if you have a function `add(a, b)`, you can partially apply it to create a new function `add5` that always adds 5 to its argument.
 
-```js
+```js live
 function add(a, b) {
   return a + b;
 }
@@ -5999,13 +5988,17 @@ Currying transforms a function with multiple arguments into a sequence of functi
 
 Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. Partial application fixes a few arguments of a function, producing another function with a smaller number of arguments. For example, currying a function `add(a, b)` would look like `add(a)(b)`, while partial application of `add(2, b)` would fix the first argument to 2, resulting in a function that only needs the second argument.
 
-```js
-// Currying example
+Currying example:
+
+```js live
 const add = (a) => (b) => a + b;
 const addTwo = add(2);
 console.log(addTwo(3)); // 5
+```
+
+Partial application example:
 
-// Partial application example
+```js live
 const add = (a, b) => a + b;
 const addTwo = add.bind(null, 2);
 console.log(addTwo(3)); // 5
@@ -6111,11 +6104,12 @@ On the other hand, `WeakSet` only allows objects as elements, and these object e
 
 To convert a `Set` to an array in JavaScript, you can use the `Array.from()` method or the spread operator. For example:
 
-```js
+```js live
 const mySet = new Set([1, 2, 3]);
 const myArray = Array.from(mySet);
-// or
-const myArray = [...mySet];
+// OR const myArray = [...mySet];
+
+console.log(myArray); // Output: [1, 2, 3]
 ```
 
 <!-- Update here: /questions/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.mdx -->
@@ -6197,7 +6191,7 @@ Debouncing and throttling are techniques used to control the rate at which a fun
 
 Debouncing delays the execution of a function until a certain amount of time has passed since it was last called. This is useful for scenarios like search input fields where you want to wait until the user has stopped typing before making an API call.
 
-```js
+```js live
 function debounce(func, delay) {
   let timeoutId;
   return function (...args) {
@@ -6205,11 +6199,14 @@ function debounce(func, delay) {
     timeoutId = setTimeout(() => func.apply(this, args), delay);
   };
 }
+
+const debouncedHello = debounce(() => console.log('Hello world!'), 2000);
+debouncedHello(); // Prints 'Hello world!' after 2 seconds
 ```
 
 Throttling ensures that a function is called at most once in a specified time interval. This is useful for scenarios like window resizing or scrolling where you want to limit the number of times a function is called.
 
-```js
+```js live
 function throttle(func, limit) {
   let inThrottle;
   return function (...args) {
@@ -6220,6 +6217,17 @@ function throttle(func, limit) {
     }
   };
 }
+
+const handleResize = throttle(() => {
+  // Update element positions
+  console.log('Window resized at', new Date().toLocaleTimeString());
+}, 2000);
+
+// Simulate rapid calls to handleResize every 100ms
+let intervalId = setInterval(() => {
+  handleResize();
+}, 100);
+// 'Window resized' is outputted only every 2 seconds due to throttling
 ```
 
 <!-- Update here: /questions/explain-the-concept-of-debouncing-and-throttling/en-US.mdx -->
@@ -6708,7 +6716,7 @@ console.log(myCarWithGPS.drive()); // "Driving with GPS"
 
 The Strategy pattern is a behavioral design pattern that allows you to define a family of algorithms, encapsulate each one as a separate class, and make them interchangeable. This pattern lets the algorithm vary independently from the clients that use it. For example, if you have different sorting algorithms, you can define each one as a strategy and switch between them without changing the client code.
 
-```js
+```js live
 class Context {
   constructor(strategy) {
     this.strategy = strategy;
@@ -6722,18 +6730,20 @@ class Context {
 class ConcreteStrategyA {
   doAlgorithm(data) {
     // Implementation of algorithm A
+    return 'Algorithm A was run on ' + data;
   }
 }
 
 class ConcreteStrategyB {
   doAlgorithm(data) {
     // Implementation of algorithm B
+    return 'Algorithm B was run on ' + data;
   }
 }
 
 // Usage
 const context = new Context(new ConcreteStrategyA());
-context.executeStrategy(data);
+context.executeStrategy('someData'); // Output: Algorithm A was run on someData
 ```
 
 <!-- Update here: /questions/explain-the-concept-of-the-strategy-pattern/en-US.mdx -->
@@ -6750,7 +6760,7 @@ context.executeStrategy(data);
 
 The Command pattern is a behavioral design pattern that turns a request into a stand-alone object containing all information about the request. This transformation allows for parameterization of methods with different requests, queuing of requests, and logging of the requests. It also supports undoable operations. In JavaScript, it can be implemented by creating command objects with `execute` and `undo` methods.
 
-```js
+```js live
 class Command {
   execute() {}
   undo() {}
diff --git a/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx b/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx
index e9b38ea..ac2dc75 100644
--- a/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx
+++ b/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.mdx
@@ -6,7 +6,7 @@ title: Provide some examples of how currying and partial application can be used
 
 Currying transforms a function with multiple arguments into a sequence of functions, each taking a single argument. Partial application fixes a few arguments of a function, producing another function with a smaller number of arguments. For example, currying a function `add(a, b)` would look like `add(a)(b)`, while partial application of `add(2, b)` would fix the first argument to 2, resulting in a function that only needs the second argument.
 
-### Currying example
+Currying example:
 
 ```js live
 const add = (a) => (b) => a + b;
@@ -14,7 +14,7 @@ const addTwo = add(2);
 console.log(addTwo(3)); // 5
 ```
 
-### Partial application example
+Partial application example:
 
 ```js live
 const add = (a, b) => a + b;

From 5fc8475218c3d706c45e31fdb218c906a1b5358d Mon Sep 17 00:00:00 2001
From: Raul Rivero <raul9501@gmail.com>
Date: Thu, 27 Mar 2025 16:55:06 -0700
Subject: [PATCH 09/26] contents: fix typo in how `this` works (#28)

---
 questions/explain-how-this-works-in-javascript/en-US.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/questions/explain-how-this-works-in-javascript/en-US.mdx b/questions/explain-how-this-works-in-javascript/en-US.mdx
index 4773e5c..2cff215 100644
--- a/questions/explain-how-this-works-in-javascript/en-US.mdx
+++ b/questions/explain-how-this-works-in-javascript/en-US.mdx
@@ -6,7 +6,7 @@ title: Explain how `this` works in JavaScript
 
 There's no simple explanation for `this`; it is one of the most confusing concepts in JavaScript because it's behavior differs from many other programming languages. The one-liner explanation of the `this` keyword is that it is a dynamic reference to the context in which a function is executed.
 
-A longer explanation follows is that `this` follows these rules:
+A longer explanation is that `this` follows these rules:
 
 1. If the `new` keyword is used when calling the function, meaning the function was used as a function constructor, the `this` inside the function is the newly-created object instance.
 2. If `this` is used in a `class` `constructor`, the `this` inside the `constructor` is the newly-created object instance.

From fc4269f845f1c28db3fd945e5a0ad2ec956cab46 Mon Sep 17 00:00:00 2001
From: GitHub Actions <github-actions[bot]@users.noreply.github.com>
Date: Thu, 27 Mar 2025 23:55:21 +0000
Subject: [PATCH 10/26] [auto] regenerate table of contents

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 24bc889..24de009 100644
--- a/README.md
+++ b/README.md
@@ -437,7 +437,7 @@ However, do note that:
 
 There's no simple explanation for `this`; it is one of the most confusing concepts in JavaScript because it's behavior differs from many other programming languages. The one-liner explanation of the `this` keyword is that it is a dynamic reference to the context in which a function is executed.
 
-A longer explanation follows is that `this` follows these rules:
+A longer explanation is that `this` follows these rules:
 
 1. If the `new` keyword is used when calling the function, meaning the function was used as a function constructor, the `this` inside the function is the newly-created object instance.
 2. If `this` is used in a `class` `constructor`, the `this` inside the `constructor` is the newly-created object instance.
@@ -4619,7 +4619,7 @@ myFunction();
 
 There's no simple explanation for `this`; it is one of the most confusing concepts in JavaScript because it's behavior differs from many other programming languages. The one-liner explanation of the `this` keyword is that it is a dynamic reference to the context in which a function is executed.
 
-A longer explanation follows is that `this` follows these rules:
+A longer explanation is that `this` follows these rules:
 
 1. If the `new` keyword is used when calling the function, meaning the function was used as a function constructor, the `this` inside the function is the newly-created object instance.
 2. If `this` is used in a `class` `constructor`, the `this` inside the `constructor` is the newly-created object instance.

From dc83f4815f22a7a5495e04f08e572c31b9340b64 Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Thu, 3 Apr 2025 19:52:03 +0800
Subject: [PATCH 11/26] i18n: add langnostic

---
 .gitignore           |    3 +
 langnostic.config.ts |   27 +
 package.json         |    9 +-
 pnpm-lock.yaml       | 1356 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 1393 insertions(+), 2 deletions(-)
 create mode 100644 langnostic.config.ts

diff --git a/.gitignore b/.gitignore
index c6bba59..28b5e3b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -128,3 +128,6 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+# Translations
+.langnostic
diff --git a/langnostic.config.ts b/langnostic.config.ts
new file mode 100644
index 0000000..5eb5b87
--- /dev/null
+++ b/langnostic.config.ts
@@ -0,0 +1,27 @@
+import { ConfigType } from 'langnostic';
+
+const config: ConfigType = {
+  ai: {
+    provider: 'google',
+  },
+  localeConfig: {
+    source: 'en-US',
+    target: ['zh-CN'],
+  },
+  groups: [
+    {
+      name: 'quiz-js',
+      plugin: 'mdx',
+      paths: [
+        {
+          source:
+            './questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx',
+          target:
+            './questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/{locale}.mdx',
+        },
+      ],
+    },
+  ],
+};
+
+export default config;
diff --git a/package.json b/package.json
index 346a7cd..c6e48cc 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "gen": "tsx scripts/gen.ts",
-    "rank": "tsx scripts/rank.ts"
+    "rank": "tsx scripts/rank.ts",
+    "translate": "langnostic translate"
   },
   "keywords": [
     "javascript",
@@ -19,8 +20,12 @@
     "github-slugger": "^2.0.0",
     "globby": "^14.0.1",
     "gray-matter": "^4.0.3",
+    "langnostic": "^0.0.3",
     "lodash-es": "^4.17.21",
     "tsx": "^4.15.1"
   },
-  "packageManager": "pnpm@8.15.8"
+  "packageManager": "pnpm@8.15.8",
+  "devDependencies": {
+    "typescript": "^5.8.2"
+  }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a0c0487..be1f664 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ dependencies:
   gray-matter:
     specifier: ^4.0.3
     version: 4.0.3
+  langnostic:
+    specifier: ^0.0.3
+    version: 0.0.3(react@19.1.0)(typescript@5.8.2)
   lodash-es:
     specifier: ^4.17.21
     version: 4.17.21
@@ -24,8 +27,136 @@ dependencies:
     specifier: ^4.15.1
     version: 4.15.1
 
+devDependencies:
+  typescript:
+    specifier: ^5.8.2
+    version: 5.8.2
+
 packages:
 
+  /@ai-sdk/deepseek@0.2.4(zod@3.24.2):
+    resolution: {integrity: sha512-D98J+qgZbr3qYoQCIfkd1E6SzmGPi7SelskvxT2329eCC7sPBlbHNbRT/fayShQT3qkqd7u/y24beI2rmMAuMg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.0.0
+    dependencies:
+      '@ai-sdk/openai-compatible': 0.2.4(zod@3.24.2)
+      '@ai-sdk/provider': 1.1.0
+      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.2)
+      zod: 3.24.2
+    dev: false
+
+  /@ai-sdk/google@1.2.5(zod@3.24.2):
+    resolution: {integrity: sha512-ykSPjYDmaDg7Qblo6Ea6n6O01NpyehZJE0j3+HCYBtUXKXP2RZWesr7XlceIfFBKHd0sumovRtX4ozHrb+1+sw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.0.0
+    dependencies:
+      '@ai-sdk/provider': 1.1.0
+      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.2)
+      zod: 3.24.2
+    dev: false
+
+  /@ai-sdk/openai-compatible@0.2.4(zod@3.24.2):
+    resolution: {integrity: sha512-hLQnBn5e69rUXvXW+9SOkiL+S4yQX62hjtlX3zKXBI/3VnfOTcGKMamK51GoQB7uQCN1h7l9orvWqWpuQXxzRg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.0.0
+    dependencies:
+      '@ai-sdk/provider': 1.1.0
+      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.2)
+      zod: 3.24.2
+    dev: false
+
+  /@ai-sdk/openai@1.3.6(zod@3.24.2):
+    resolution: {integrity: sha512-Lyp6W6dg+ERMJru3DI8/pWAjXLB0GbMMlXh4jxA3mVny8CJHlCAjlEJRuAdLg1/CFz4J1UDN2/4qBnIWtLFIqw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.0.0
+    dependencies:
+      '@ai-sdk/provider': 1.1.0
+      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.2)
+      zod: 3.24.2
+    dev: false
+
+  /@ai-sdk/provider-utils@2.2.3(zod@3.24.2):
+    resolution: {integrity: sha512-o3fWTzkxzI5Af7U7y794MZkYNEsxbjLam2nxyoUZSScqkacb7vZ3EYHLh21+xCcSSzEC161C7pZAGHtC0hTUMw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.23.8
+    dependencies:
+      '@ai-sdk/provider': 1.1.0
+      nanoid: 3.3.11
+      secure-json-parse: 2.7.0
+      zod: 3.24.2
+    dev: false
+
+  /@ai-sdk/provider@1.1.0:
+    resolution: {integrity: sha512-0M+qjp+clUD0R1E5eWQFhxEvWLNaOtGQRUaBn8CUABnSKredagq92hUS9VjOzGsTm37xLfpaxl97AVtbeOsHew==}
+    engines: {node: '>=18'}
+    dependencies:
+      json-schema: 0.4.0
+    dev: false
+
+  /@ai-sdk/react@1.2.5(react@19.1.0)(zod@3.24.2):
+    resolution: {integrity: sha512-0jOop3S2WkDOdO4X5I+5fTGqZlNX8/h1T1eYokpkR9xh8Vmrxqw8SsovqGvrddTsZykH8uXRsvI+G4FTyy894A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      zod: ^3.23.8
+    peerDependenciesMeta:
+      zod:
+        optional: true
+    dependencies:
+      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.2)
+      '@ai-sdk/ui-utils': 1.2.4(zod@3.24.2)
+      react: 19.1.0
+      swr: 2.3.3(react@19.1.0)
+      throttleit: 2.1.0
+      zod: 3.24.2
+    dev: false
+
+  /@ai-sdk/ui-utils@1.2.4(zod@3.24.2):
+    resolution: {integrity: sha512-wLTxEZrKZRyBmlVZv8nGXgLBg5tASlqXwbuhoDu0MhZa467ZFREEnosH/OC/novyEHTQXko2zC606xoVbMrUcA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.23.8
+    dependencies:
+      '@ai-sdk/provider': 1.1.0
+      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.2)
+      zod: 3.24.2
+      zod-to-json-schema: 3.24.5(zod@3.24.2)
+    dev: false
+
+  /@babel/code-frame@7.26.2:
+    resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.25.9
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+    dev: false
+
+  /@babel/helper-validator-identifier@7.25.9:
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
+    engines: {node: '>=6.9.0'}
+    dev: false
+
+  /@clack/core@0.4.1:
+    resolution: {integrity: sha512-Pxhij4UXg8KSr7rPek6Zowm+5M22rbd2g1nfojHJkxp5YkFqiZ2+YLEM/XGVIzvGOcM0nqjIFxrpDwWRZYWYjA==}
+    dependencies:
+      picocolors: 1.1.1
+      sisteransi: 1.0.5
+    dev: false
+
+  /@clack/prompts@0.9.1:
+    resolution: {integrity: sha512-JIpyaboYZeWYlyP0H+OoPPxd6nqueG/CmN6ixBiNFsIDHREevjIf0n0Ohh5gr5C8pEDknzgvz+pIJ8dMhzWIeg==}
+    dependencies:
+      '@clack/core': 0.4.1
+      picocolors: 1.1.1
+      sisteransi: 1.0.5
+    dev: false
+
   /@esbuild/aix-ppc64@0.21.5:
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -233,6 +364,18 @@ packages:
     dev: false
     optional: true
 
+  /@isaacs/cliui@8.0.2:
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: /string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: /strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: /wrap-ansi@7.0.0
+    dev: false
+
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -254,23 +397,153 @@ packages:
       fastq: 1.17.1
     dev: false
 
+  /@opentelemetry/api@1.9.0:
+    resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
+    engines: {node: '>=8.0.0'}
+    dev: false
+
   /@sindresorhus/merge-streams@2.3.0:
     resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
     engines: {node: '>=18'}
     dev: false
 
+  /@types/debug@4.1.12:
+    resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
+    dependencies:
+      '@types/ms': 2.1.0
+    dev: false
+
+  /@types/diff-match-patch@1.0.36:
+    resolution: {integrity: sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg==}
+    dev: false
+
+  /@types/estree-jsx@1.0.5:
+    resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
+    dependencies:
+      '@types/estree': 1.0.7
+    dev: false
+
+  /@types/estree@1.0.7:
+    resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
+    dev: false
+
+  /@types/hast@3.0.4:
+    resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
+    dependencies:
+      '@types/unist': 3.0.3
+    dev: false
+
+  /@types/mdast@4.0.4:
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+    dependencies:
+      '@types/unist': 3.0.3
+    dev: false
+
+  /@types/ms@2.1.0:
+    resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
+    dev: false
+
   /@types/node@20.14.2:
     resolution: {integrity: sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==}
     dependencies:
       undici-types: 5.26.5
     dev: false
 
+  /@types/unist@2.0.11:
+    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
+    dev: false
+
+  /@types/unist@3.0.3:
+    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
+    dev: false
+
+  /acorn-jsx@5.3.2(acorn@8.14.1):
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+    dependencies:
+      acorn: 8.14.1
+    dev: false
+
+  /acorn@8.14.1:
+    resolution: {integrity: sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: false
+
+  /ai@4.2.10(react@19.1.0)(zod@3.24.2):
+    resolution: {integrity: sha512-rOfKbNRWlzwxbFll6W9oAdnC0R5VVbAJoof+p92CatHzA3reqQZmYn33IBnj+CgqeXYUsH9KX9Wnj7g2wCHc9Q==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^18 || ^19 || ^19.0.0-rc
+      zod: ^3.23.8
+    peerDependenciesMeta:
+      react:
+        optional: true
+    dependencies:
+      '@ai-sdk/provider': 1.1.0
+      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.2)
+      '@ai-sdk/react': 1.2.5(react@19.1.0)(zod@3.24.2)
+      '@ai-sdk/ui-utils': 1.2.4(zod@3.24.2)
+      '@opentelemetry/api': 1.9.0
+      jsondiffpatch: 0.6.0
+      react: 19.1.0
+      zod: 3.24.2
+    dev: false
+
+  /ansi-escapes@7.0.0:
+    resolution: {integrity: sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==}
+    engines: {node: '>=18'}
+    dependencies:
+      environment: 1.1.0
+    dev: false
+
+  /ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /ansi-regex@6.1.0:
+    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+    dependencies:
+      color-convert: 2.0.1
+    dev: false
+
+  /ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+    dev: false
+
   /argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
     dependencies:
       sprintf-js: 1.0.3
     dev: false
 
+  /argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+    dev: false
+
+  /bail@2.0.2:
+    resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+    dev: false
+
+  /balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+    dev: false
+
+  /brace-expansion@2.0.1:
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
+    dependencies:
+      balanced-match: 1.0.2
+    dev: false
+
   /braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
@@ -278,6 +551,156 @@ packages:
       fill-range: 7.1.1
     dev: false
 
+  /callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+    dev: false
+
+  /chalk@5.4.1:
+    resolution: {integrity: sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+    dev: false
+
+  /character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+    dev: false
+
+  /character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+    dev: false
+
+  /character-entities@2.0.2:
+    resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+    dev: false
+
+  /character-reference-invalid@2.0.1:
+    resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
+    dev: false
+
+  /cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+    dependencies:
+      restore-cursor: 5.1.0
+    dev: false
+
+  /color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+    dependencies:
+      color-name: 1.1.4
+    dev: false
+
+  /color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+    dev: false
+
+  /cosmiconfig@9.0.0(typescript@5.8.2):
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      parse-json: 5.2.0
+      typescript: 5.8.2
+    dev: false
+
+  /cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+    dev: false
+
+  /debug@4.4.0:
+    resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.3
+    dev: false
+
+  /decode-named-character-reference@1.1.0:
+    resolution: {integrity: sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==}
+    dependencies:
+      character-entities: 2.0.2
+    dev: false
+
+  /dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /devlop@1.1.0:
+    resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
+    dependencies:
+      dequal: 2.0.3
+    dev: false
+
+  /diff-match-patch@1.0.5:
+    resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
+    dev: false
+
+  /dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+    dependencies:
+      path-type: 4.0.0
+    dev: false
+
+  /dotenv@16.4.7:
+    resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+    dev: false
+
+  /emoji-regex@10.4.0:
+    resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
+    dev: false
+
+  /emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+    dev: false
+
+  /emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+    dev: false
+
+  /env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+    dev: false
+
+  /environment@1.1.0:
+    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
+    engines: {node: '>=18'}
+    dev: false
+
+  /error-ex@1.3.2:
+    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+    dependencies:
+      is-arrayish: 0.2.1
+    dev: false
+
   /esbuild@0.21.5:
     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
     engines: {node: '>=12'}
@@ -315,6 +738,17 @@ packages:
     hasBin: true
     dev: false
 
+  /estree-util-is-identifier-name@3.0.0:
+    resolution: {integrity: sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==}
+    dev: false
+
+  /estree-util-visit@2.0.0:
+    resolution: {integrity: sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==}
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/unist': 3.0.3
+    dev: false
+
   /extend-shallow@2.0.1:
     resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
     engines: {node: '>=0.10.0'}
@@ -322,6 +756,10 @@ packages:
       is-extendable: 0.1.1
     dev: false
 
+  /extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+    dev: false
+
   /fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
@@ -346,6 +784,14 @@ packages:
       to-regex-range: 5.0.1
     dev: false
 
+  /foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+    dev: false
+
   /fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -354,6 +800,11 @@ packages:
     dev: false
     optional: true
 
+  /get-east-asian-width@1.3.0:
+    resolution: {integrity: sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==}
+    engines: {node: '>=18'}
+    dev: false
+
   /get-tsconfig@4.7.5:
     resolution: {integrity: sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw==}
     dependencies:
@@ -371,6 +822,30 @@ packages:
       is-glob: 4.0.3
     dev: false
 
+  /glob@11.0.1:
+    resolution: {integrity: sha512-zrQDm8XPnYEKawJScsnM0QzobJxlT/kHOOlRTio8IH/GrmxRE5fjllkzdaHclIuNjUQTJYH2xHNIGfdpJkDJUw==}
+    engines: {node: 20 || >=22}
+    hasBin: true
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 4.1.0
+      minimatch: 10.0.1
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 2.0.0
+    dev: false
+
+  /globby@13.2.2:
+    resolution: {integrity: sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      dir-glob: 3.0.1
+      fast-glob: 3.3.2
+      ignore: 5.3.1
+      merge2: 1.4.1
+      slash: 4.0.0
+    dev: false
+
   /globby@14.0.1:
     resolution: {integrity: sha512-jOMLD2Z7MAhyG8aJpNOpmziMOP4rPLcc95oQPKXBazW82z+CEgPFBQvEpRUa1KeIMUJo4Wsm+q6uzO/Q/4BksQ==}
     engines: {node: '>=18'}
@@ -398,6 +873,33 @@ packages:
     engines: {node: '>= 4'}
     dev: false
 
+  /import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+    dev: false
+
+  /is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+    dev: false
+
+  /is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+    dependencies:
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
+    dev: false
+
+  /is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+    dev: false
+
+  /is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+    dev: false
+
   /is-extendable@0.1.1:
     resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
     engines: {node: '>=0.10.0'}
@@ -408,6 +910,18 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /is-fullwidth-code-point@5.0.0:
+    resolution: {integrity: sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==}
+    engines: {node: '>=18'}
+    dependencies:
+      get-east-asian-width: 1.3.0
+    dev: false
+
   /is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -415,11 +929,35 @@ packages:
       is-extglob: 2.1.1
     dev: false
 
+  /is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+    dev: false
+
   /is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
     dev: false
 
+  /is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+    dev: false
+
+  /jackspeak@4.1.0:
+    resolution: {integrity: sha512-9DDdhb5j6cpeitCbvLO7n7J4IxnbM6hoF6O1g4HQ5TfhvvKN8ywDM7668ZhMHRqVmxqhps/F6syWK2KcPxYlkw==}
+    engines: {node: 20 || >=22}
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    dev: false
+
+  /js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+    dev: false
+
   /js-yaml@3.14.1:
     resolution: {integrity: sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==}
     hasBin: true
@@ -428,20 +966,471 @@ packages:
       esprima: 4.0.1
     dev: false
 
+  /js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+    dev: false
+
+  /json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+    dev: false
+
+  /json-schema@0.4.0:
+    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
+    dev: false
+
+  /json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: false
+
+  /jsondiffpatch@0.6.0:
+    resolution: {integrity: sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    dependencies:
+      '@types/diff-match-patch': 1.0.36
+      chalk: 5.4.1
+      diff-match-patch: 1.0.5
+    dev: false
+
   /kind-of@6.0.3:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /langnostic@0.0.3(react@19.1.0)(typescript@5.8.2):
+    resolution: {integrity: sha512-19EjuWWPDRIDg0LCQlm4y/hWPNWUlgVEGXTW7Q+3CPS4a0SMB+dIJ0jq6LKsytNAtITvvtMDJHk8Qtt4xwSslA==}
+    engines: {node: 18.18.2, pnpm: 8.15.8}
+    hasBin: true
+    dependencies:
+      '@ai-sdk/deepseek': 0.2.4(zod@3.24.2)
+      '@ai-sdk/google': 1.2.5(zod@3.24.2)
+      '@ai-sdk/openai': 1.3.6(zod@3.24.2)
+      '@clack/prompts': 0.9.1
+      ai: 4.2.10(react@19.1.0)(zod@3.24.2)
+      chalk: 5.4.1
+      cosmiconfig: 9.0.0(typescript@5.8.2)
+      dotenv: 16.4.7
+      glob: 11.0.1
+      globby: 13.2.2
+      gray-matter: 4.0.3
+      json5: 2.2.3
+      lodash-es: 4.17.21
+      log-update: 6.1.0
+      murmurhash: 2.0.1
+      remark-mdx: 3.1.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+      zod: 3.24.2
+    transitivePeerDependencies:
+      - react
+      - supports-color
+      - typescript
+    dev: false
+
+  /lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+    dev: false
+
   /lodash-es@4.17.21:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
     dev: false
 
+  /log-update@6.1.0:
+    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
+    engines: {node: '>=18'}
+    dependencies:
+      ansi-escapes: 7.0.0
+      cli-cursor: 5.0.0
+      slice-ansi: 7.1.0
+      strip-ansi: 7.1.0
+      wrap-ansi: 9.0.0
+    dev: false
+
+  /longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+    dev: false
+
+  /lru-cache@11.1.0:
+    resolution: {integrity: sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==}
+    engines: {node: 20 || >=22}
+    dev: false
+
+  /mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.1.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-mdx-expression@2.0.1:
+    resolution: {integrity: sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==}
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-mdx-jsx@3.2.0:
+    resolution: {integrity: sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==}
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-mdx@3.0.0:
+    resolution: {integrity: sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==}
+    dependencies:
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-mdxjs-esm@2.0.1:
+    resolution: {integrity: sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==}
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.0
+    dev: false
+
+  /mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.0.0
+      zwitch: 2.0.4
+    dev: false
+
+  /mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+    dependencies:
+      '@types/mdast': 4.0.4
+    dev: false
+
   /merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
     dev: false
 
+  /micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+    dependencies:
+      decode-named-character-reference: 1.1.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: false
+
+  /micromark-extension-mdx-expression@3.0.1:
+    resolution: {integrity: sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==}
+    dependencies:
+      '@types/estree': 1.0.7
+      devlop: 1.1.0
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: false
+
+  /micromark-extension-mdx-jsx@3.0.2:
+    resolution: {integrity: sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==}
+    dependencies:
+      '@types/estree': 1.0.7
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      vfile-message: 4.0.2
+    dev: false
+
+  /micromark-extension-mdx-md@2.0.0:
+    resolution: {integrity: sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==}
+    dependencies:
+      micromark-util-types: 2.0.2
+    dev: false
+
+  /micromark-extension-mdxjs-esm@3.0.0:
+    resolution: {integrity: sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==}
+    dependencies:
+      '@types/estree': 1.0.7
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.2
+    dev: false
+
+  /micromark-extension-mdxjs@3.0.0:
+    resolution: {integrity: sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==}
+    dependencies:
+      acorn: 8.14.1
+      acorn-jsx: 5.3.2(acorn@8.14.1)
+      micromark-extension-mdx-expression: 3.0.1
+      micromark-extension-mdx-jsx: 3.0.2
+      micromark-extension-mdx-md: 2.0.0
+      micromark-extension-mdxjs-esm: 3.0.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: false
+
+  /micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: false
+
+  /micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: false
+
+  /micromark-factory-mdx-expression@2.0.3:
+    resolution: {integrity: sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==}
+    dependencies:
+      '@types/estree': 1.0.7
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.2
+    dev: false
+
+  /micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+    dev: false
+
+  /micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: false
+
+  /micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: false
+
+  /micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: false
+
+  /micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+    dependencies:
+      micromark-util-symbol: 2.0.1
+    dev: false
+
+  /micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: false
+
+  /micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: false
+
+  /micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+    dependencies:
+      micromark-util-symbol: 2.0.1
+    dev: false
+
+  /micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+    dependencies:
+      decode-named-character-reference: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+    dev: false
+
+  /micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+    dev: false
+
+  /micromark-util-events-to-acorn@2.0.3:
+    resolution: {integrity: sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==}
+    dependencies:
+      '@types/estree': 1.0.7
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      vfile-message: 4.0.2
+    dev: false
+
+  /micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+    dev: false
+
+  /micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+    dependencies:
+      micromark-util-symbol: 2.0.1
+    dev: false
+
+  /micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+    dependencies:
+      micromark-util-types: 2.0.2
+    dev: false
+
+  /micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+    dev: false
+
+  /micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    dev: false
+
+  /micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+    dev: false
+
+  /micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+    dev: false
+
+  /micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+    dependencies:
+      '@types/debug': 4.1.12
+      debug: 4.4.0
+      decode-named-character-reference: 1.1.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /micromatch@4.0.7:
     resolution: {integrity: sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==}
     engines: {node: '>=8.6'}
@@ -450,11 +1439,104 @@ packages:
       picomatch: 2.3.1
     dev: false
 
+  /mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+    dev: false
+
+  /minimatch@10.0.1:
+    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
+    engines: {node: 20 || >=22}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: false
+
+  /minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    dev: false
+
+  /ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+    dev: false
+
+  /murmurhash@2.0.1:
+    resolution: {integrity: sha512-5vQEh3y+DG/lMPM0mCGPDnyV8chYg/g7rl6v3Gd8WMF9S429ox3Xk8qrk174kWhG767KQMqqxLD1WnGd77hiew==}
+    dev: false
+
+  /nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+    dev: false
+
+  /onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+    dependencies:
+      mimic-function: 5.0.1
+    dev: false
+
+  /package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+    dev: false
+
+  /parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+    dependencies:
+      callsites: 3.1.0
+    dev: false
+
+  /parse-entities@4.0.2:
+    resolution: {integrity: sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==}
+    dependencies:
+      '@types/unist': 2.0.11
+      character-entities-legacy: 3.0.0
+      character-reference-invalid: 2.0.1
+      decode-named-character-reference: 1.1.0
+      is-alphanumerical: 2.0.1
+      is-decimal: 2.0.1
+      is-hexadecimal: 2.0.1
+    dev: false
+
+  /parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@babel/code-frame': 7.26.2
+      error-ex: 1.3.2
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+    dev: false
+
+  /path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /path-scurry@2.0.0:
+    resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
+    engines: {node: 20 || >=22}
+    dependencies:
+      lru-cache: 11.1.0
+      minipass: 7.1.2
+    dev: false
+
+  /path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+    dev: false
+
   /path-type@5.0.0:
     resolution: {integrity: sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==}
     engines: {node: '>=12'}
     dev: false
 
+  /picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+    dev: false
+
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -464,10 +1546,56 @@ packages:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: false
 
+  /react@19.1.0:
+    resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /remark-mdx@3.1.0:
+    resolution: {integrity: sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==}
+    dependencies:
+      mdast-util-mdx: 3.0.0
+      micromark-extension-mdxjs: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      micromark-util-types: 2.0.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
+  /remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.1.2
+      unified: 11.0.5
+    dev: false
+
+  /resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+    dev: false
+
   /resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
     dev: false
 
+  /restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+    dev: false
+
   /reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -487,20 +1615,121 @@ packages:
       kind-of: 6.0.3
     dev: false
 
+  /secure-json-parse@2.7.0:
+    resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
+    dev: false
+
+  /shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+    dependencies:
+      shebang-regex: 3.0.0
+    dev: false
+
+  /shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+    dev: false
+
+  /signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+    dev: false
+
+  /sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+    dev: false
+
+  /slash@4.0.0:
+    resolution: {integrity: sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==}
+    engines: {node: '>=12'}
+    dev: false
+
   /slash@5.1.0:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
     engines: {node: '>=14.16'}
     dev: false
 
+  /slice-ansi@7.1.0:
+    resolution: {integrity: sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==}
+    engines: {node: '>=18'}
+    dependencies:
+      ansi-styles: 6.2.1
+      is-fullwidth-code-point: 5.0.0
+    dev: false
+
   /sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
     dev: false
 
+  /string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+    dev: false
+
+  /string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.0
+    dev: false
+
+  /string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+    dependencies:
+      emoji-regex: 10.4.0
+      get-east-asian-width: 1.3.0
+      strip-ansi: 7.1.0
+    dev: false
+
+  /stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+    dev: false
+
+  /strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+    dependencies:
+      ansi-regex: 5.0.1
+    dev: false
+
+  /strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-regex: 6.1.0
+    dev: false
+
   /strip-bom-string@1.0.0:
     resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /swr@2.3.3(react@19.1.0):
+    resolution: {integrity: sha512-dshNvs3ExOqtZ6kJBaAsabhPdHyeY4P2cKwRCniDVifBMoG/SVI7tfLWqPXriVspf2Rg4tPzXJTnwaihIeFw2A==}
+    peerDependencies:
+      react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    dependencies:
+      dequal: 2.0.3
+      react: 19.1.0
+      use-sync-external-store: 1.5.0(react@19.1.0)
+    dev: false
+
+  /throttleit@2.1.0:
+    resolution: {integrity: sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==}
+    engines: {node: '>=18'}
+    dev: false
+
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -508,6 +1737,10 @@ packages:
       is-number: 7.0.0
     dev: false
 
+  /trough@2.2.0:
+    resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
+    dev: false
+
   /tsx@4.15.1:
     resolution: {integrity: sha512-k/6h17jA1KfUR7SpcteOa880zGmF56s8gMIcSqUR5avyNFi9nlCEKpMiHLrzrqyARGr52A/JablmGey1DEWbCA==}
     engines: {node: '>=18.0.0'}
@@ -519,6 +1752,11 @@ packages:
       fsevents: 2.3.3
     dev: false
 
+  /typescript@5.8.2:
+    resolution: {integrity: sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
   /undici-types@5.26.5:
     resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
     dev: false
@@ -527,3 +1765,121 @@ packages:
     resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
     engines: {node: '>=18'}
     dev: false
+
+  /unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+    dev: false
+
+  /unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+    dependencies:
+      '@types/unist': 3.0.3
+    dev: false
+
+  /unist-util-position-from-estree@2.0.0:
+    resolution: {integrity: sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==}
+    dependencies:
+      '@types/unist': 3.0.3
+    dev: false
+
+  /unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+    dependencies:
+      '@types/unist': 3.0.3
+    dev: false
+
+  /unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+    dev: false
+
+  /unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+    dev: false
+
+  /use-sync-external-store@1.5.0(react@19.1.0):
+    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    dependencies:
+      react: 19.1.0
+    dev: false
+
+  /vfile-message@4.0.2:
+    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+    dev: false
+
+  /vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.2
+    dev: false
+
+  /which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+    dependencies:
+      isexe: 2.0.0
+    dev: false
+
+  /wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+    dev: false
+
+  /wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 5.1.2
+      strip-ansi: 7.1.0
+    dev: false
+
+  /wrap-ansi@9.0.0:
+    resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
+    engines: {node: '>=18'}
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 7.2.0
+      strip-ansi: 7.1.0
+    dev: false
+
+  /zod-to-json-schema@3.24.5(zod@3.24.2):
+    resolution: {integrity: sha512-/AuWwMP+YqiPbsJx5D6TfgRTc4kTLjsh5SOcd4bLsfUg2RcEXrFMJl1DGgdHy2aCfsIA/cr/1JM0xcB2GZji8g==}
+    peerDependencies:
+      zod: ^3.24.1
+    dependencies:
+      zod: 3.24.2
+    dev: false
+
+  /zod@3.24.2:
+    resolution: {integrity: sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==}
+    dev: false
+
+  /zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+    dev: false

From 089b1f55e7931bf4cb6300db4b43c37f6187bef8 Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Thu, 3 Apr 2025 19:52:27 +0800
Subject: [PATCH 12/26] i18n: translate all qns

---
 .../en-US.langnostic.json                     |  57 ++++
 .../zh-CN.mdx                                 | 112 +++++--
 .../en-US.langnostic.json                     |  96 ++++++
 questions/describe-event-bubbling/zh-CN.mdx   | 209 +++++++++++-
 .../en-US.langnostic.json                     |  62 ++++
 questions/describe-event-capturing/zh-CN.mdx  |  96 ++++++
 .../en-US.langnostic.json                     |  88 +++++
 .../zh-CN.mdx                                 | 156 +++++++--
 .../en-US.langnostic.json                     |  68 ++++
 .../zh-CN.mdx                                 | 119 ++++++-
 .../en-US.langnostic.json                     |  46 +++
 .../zh-CN.mdx                                 |  51 ++-
 .../en-US.langnostic.json                     |  56 ++++
 .../zh-CN.mdx                                 |  74 ++++-
 .../en-US.langnostic.json                     |  66 ++++
 .../zh-CN.mdx                                 | 126 +++++++-
 .../en-US.langnostic.json                     |  84 +++++
 questions/explain-event-delegation/zh-CN.mdx  | 124 +++++--
 .../en-US.langnostic.json                     |  72 +++++
 .../explain-function-prototype-bind/zh-CN.mdx | 106 +++++-
 .../explain-hoisting/en-US.langnostic.json    | 102 ++++++
 questions/explain-hoisting/zh-CN.mdx          | 138 ++++++--
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 |  79 ++++-
 .../en-US.langnostic.json                     |  56 ++++
 .../zh-CN.mdx                                 | 149 ++++++++-
 .../en-US.langnostic.json                     | 114 +++++++
 .../zh-CN.mdx                                 | 239 +++++++++++++-
 .../en-US.langnostic.json                     |  54 ++++
 .../zh-CN.mdx                                 |  99 ++++++
 .../en-US.langnostic.json                     |  54 ++++
 .../zh-CN.mdx                                 |  70 ++++
 .../en-US.langnostic.json                     |  74 +++++
 .../zh-CN.mdx                                 |  84 +++++
 .../en-US.langnostic.json                     |  70 ++++
 .../zh-CN.mdx                                 |  86 +++++
 .../en-US.langnostic.json                     |  64 ++++
 .../zh-CN.mdx                                 |  61 ++++
 .../en-US.langnostic.json                     |  60 ++++
 .../zh-CN.mdx                                 |  63 ++++
 .../en-US.langnostic.json                     |  60 ++++
 .../zh-CN.mdx                                 | 119 +++++++
 .../en-US.langnostic.json                     |  78 +++++
 .../zh-CN.mdx                                 | 120 +++++++
 .../en-US.langnostic.json                     |  58 ++++
 .../zh-CN.mdx                                 | 105 ++++++
 .../en-US.langnostic.json                     |  50 +++
 .../zh-CN.mdx                                 |  70 ++++
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 | 132 ++++++++
 .../en-US.langnostic.json                     |  46 +++
 .../zh-CN.mdx                                 |  84 +++++
 .../en-US.langnostic.json                     |  58 ++++
 .../zh-CN.mdx                                 |  72 +++++
 .../en-US.langnostic.json                     |  58 ++++
 .../zh-CN.mdx                                 |  88 +++++
 .../en-US.langnostic.json                     |  56 ++++
 .../zh-CN.mdx                                 |  69 ++++
 .../en-US.langnostic.json                     |  54 ++++
 .../zh-CN.mdx                                 | 106 ++++++
 .../en-US.langnostic.json                     |  62 ++++
 .../zh-CN.mdx                                 |  94 ++++++
 .../en-US.langnostic.json                     |  80 +++++
 .../zh-CN.mdx                                 |  86 +++++
 .../en-US.langnostic.json                     |  64 ++++
 .../zh-CN.mdx                                 |  88 +++++
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 |  96 ++++++
 .../en-US.langnostic.json                     |  60 ++++
 .../zh-CN.mdx                                 |  96 ++++++
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 | 118 +++++++
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 |  86 +++++
 .../en-US.langnostic.json                     |  68 ++++
 .../zh-CN.mdx                                 | 119 +++++++
 .../en-US.langnostic.json                     |  54 ++++
 .../zh-CN.mdx                                 |  61 ++++
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 |  81 +++++
 .../en-US.langnostic.json                     |  46 +++
 .../zh-CN.mdx                                 |  58 ++++
 .../en-US.langnostic.json                     |  66 ++++
 .../zh-CN.mdx                                 |  94 ++++++
 .../en-US.langnostic.json                     |  48 +++
 .../zh-CN.mdx                                 |  80 +++++
 .../en-US.langnostic.json                     | 122 +++++++
 .../zh-CN.mdx                                 | 221 +++++++++++--
 .../en-US.langnostic.json                     |  60 ++++
 .../zh-CN.mdx                                 |  79 +++++
 .../en-US.langnostic.json                     |  74 +++++
 .../zh-CN.mdx                                 | 165 +++++++++-
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 |  79 +++++
 .../en-US.langnostic.json                     |  46 +++
 .../zh-CN.mdx                                 |  48 +++
 .../en-US.langnostic.json                     |  62 ++++
 .../zh-CN.mdx                                 | 101 ++++++
 .../en-US.langnostic.json                     |  82 +++++
 .../zh-CN.mdx                                 | 106 +++++-
 .../en-US.langnostic.json                     |  48 +++
 .../zh-CN.mdx                                 |  58 ++++
 .../en-US.langnostic.json                     |  68 ++++
 .../zh-CN.mdx                                 | 115 +++++++
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 |  51 +++
 .../en-US.langnostic.json                     |  58 ++++
 .../zh-CN.mdx                                 |  84 +++++
 .../en-US.langnostic.json                     |  60 ++++
 .../zh-CN.mdx                                 |  68 +++-
 .../en-US.langnostic.json                     |  74 +++++
 .../zh-CN.mdx                                 | 124 ++++++-
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 |  46 ++-
 .../en-US.langnostic.json                     |  54 ++++
 .../zh-CN.mdx                                 |  96 ++++++
 .../en-US.langnostic.json                     |  58 ++++
 .../zh-CN.mdx                                 | 106 ++++++
 .../en-US.langnostic.json                     |  54 ++++
 .../zh-CN.mdx                                 | 116 +++++++
 .../en-US.langnostic.json                     |  76 +++++
 .../zh-CN.mdx                                 | 118 +++++++
 .../en-US.langnostic.json                     |  64 ++++
 .../zh-CN.mdx                                 | 109 +++++++
 .../en-US.langnostic.json                     |  64 ++++
 .../zh-CN.mdx                                 |  63 ++++
 .../en-US.langnostic.json                     |  68 ++++
 .../zh-CN.mdx                                 |  72 +++++
 .../en-US.langnostic.json                     |  68 ++++
 .../zh-CN.mdx                                 | 120 +++++++
 .../en-US.langnostic.json                     |  80 +++++
 .../zh-CN.mdx                                 | 132 +++++++-
 .../en-US.langnostic.json                     |  64 ++++
 .../zh-CN.mdx                                 | 125 +++++++
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 |  61 ++++
 .../en-US.langnostic.json                     |  64 ++++
 .../zh-CN.mdx                                 |  84 +++++
 .../en-US.langnostic.json                     |  54 ++++
 .../zh-CN.mdx                                 |  73 +++++
 .../en-US.langnostic.json                     |  72 +++++
 .../zh-CN.mdx                                 | 162 ++++++++++
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 |  67 ++++
 .../en-US.langnostic.json                     |  60 ++++
 .../zh-CN.mdx                                 | 116 +++++++
 .../en-US.langnostic.json                     |  78 +++++
 .../zh-CN.mdx                                 | 113 +++++++
 .../en-US.langnostic.json                     |  50 +++
 .../zh-CN.mdx                                 |  72 +++++
 .../en-US.langnostic.json                     |  58 ++++
 .../zh-CN.mdx                                 |  84 +++++
 .../en-US.langnostic.json                     |  46 +++
 .../zh-CN.mdx                                 |  49 +++
 .../en-US.langnostic.json                     |  58 ++++
 .../zh-CN.mdx                                 |  86 +++++
 .../en-US.langnostic.json                     |  60 ++++
 .../zh-CN.mdx                                 | 105 ++++++
 .../en-US.langnostic.json                     |  50 +++
 .../zh-CN.mdx                                 |  78 +++++
 .../en-US.langnostic.json                     |  64 ++++
 .../zh-CN.mdx                                 |  78 +++++
 .../en-US.langnostic.json                     |  60 ++++
 .../zh-CN.mdx                                 | 120 +++++++
 .../en-US.langnostic.json                     |  64 ++++
 .../zh-CN.mdx                                 | 134 ++++++++
 .../en-US.langnostic.json                     |  62 ++++
 .../zh-CN.mdx                                 |  92 ++++++
 .../en-US.langnostic.json                     |  64 ++++
 .../zh-CN.mdx                                 | 135 ++++++++
 .../en-US.langnostic.json                     |  58 ++++
 .../zh-CN.mdx                                 |  97 ++++++
 .../en-US.langnostic.json                     |  63 ++++
 .../zh-CN.mdx                                 |  75 ++++-
 .../en-US.langnostic.json                     |  58 ++++
 .../zh-CN.mdx                                 |  67 ++++
 .../en-US.langnostic.json                     |  60 ++++
 .../zh-CN.mdx                                 |  66 ++++
 .../en-US.langnostic.json                     |  58 ++++
 .../zh-CN.mdx                                 |  96 ++++++
 .../en-US.langnostic.json                     |  72 +++++
 .../zh-CN.mdx                                 | 117 +++++++
 .../en-US.langnostic.json                     |  74 +++++
 .../zh-CN.mdx                                 | 116 +++++++
 .../en-US.langnostic.json                     |  76 +++++
 .../zh-CN.mdx                                 | 139 ++++++++
 .../en-US.langnostic.json                     |  54 ++++
 .../zh-CN.mdx                                 |  82 +++++
 .../en-US.langnostic.json                     |  78 +++++
 .../zh-CN.mdx                                 |  93 ++++++
 .../en-US.langnostic.json                     |  60 ++++
 .../zh-CN.mdx                                 | 103 ++++++
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 |  82 +++++
 .../en-US.langnostic.json                     |  82 +++++
 .../zh-CN.mdx                                 | 162 +++++++++-
 .../en-US.langnostic.json                     |  66 ++++
 .../zh-CN.mdx                                 | 124 +++++++
 .../en-US.langnostic.json                     |  62 ++++
 .../zh-CN.mdx                                 |  85 +++++
 .../en-US.langnostic.json                     |  50 +++
 .../zh-CN.mdx                                 |  63 ++++
 .../en-US.langnostic.json                     |  64 ++++
 .../zh-CN.mdx                                 |  89 +++++
 .../en-US.langnostic.json                     | 100 ++++++
 .../zh-CN.mdx                                 | 306 ++++++++++++++++++
 .../en-US.langnostic.json                     |  48 +++
 .../zh-CN.mdx                                 |  85 +++++
 .../en-US.langnostic.json                     |  80 +++++
 .../zh-CN.mdx                                 | 124 +++++++
 .../en-US.langnostic.json                     |  62 ++++
 .../zh-CN.mdx                                 | 100 ++++++
 .../en-US.langnostic.json                     |  48 +++
 .../zh-CN.mdx                                 |  54 ++++
 .../en-US.langnostic.json                     |  76 +++++
 .../zh-CN.mdx                                 | 102 ++++++
 .../en-US.langnostic.json                     |  58 ++++
 .../zh-CN.mdx                                 |  89 +++++
 .../en-US.langnostic.json                     |  66 ++++
 .../zh-CN.mdx                                 | 131 ++++++++
 .../en-US.langnostic.json                     |  98 ++++++
 .../zh-CN.mdx                                 | 230 +++++++++++++
 .../en-US.langnostic.json                     |  64 ++++
 .../zh-CN.mdx                                 |  79 +++++
 .../en-US.langnostic.json                     |  72 +++++
 .../what-are-server-sent-events/zh-CN.mdx     | 200 ++++++++++++
 .../en-US.langnostic.json                     |  68 ++++
 .../zh-CN.mdx                                 | 107 ++++++
 .../en-US.langnostic.json                     |  62 ++++
 .../zh-CN.mdx                                 |  84 +++++
 .../en-US.langnostic.json                     |  76 +++++
 .../zh-CN.mdx                                 | 113 +++++++
 .../en-US.langnostic.json                     |  86 +++++
 .../zh-CN.mdx                                 | 185 +++++++++++
 .../en-US.langnostic.json                     |  76 +++++
 .../zh-CN.mdx                                 |  83 +++++
 .../en-US.langnostic.json                     |  68 ++++
 .../zh-CN.mdx                                 |  94 +++++-
 .../en-US.langnostic.json                     |  68 ++++
 .../zh-CN.mdx                                 |  94 ++++++
 .../en-US.langnostic.json                     |  70 ++++
 .../zh-CN.mdx                                 |  85 +++++
 .../en-US.langnostic.json                     |  56 ++++
 .../zh-CN.mdx                                 |  81 +++++
 .../en-US.langnostic.json                     |  68 ++++
 .../zh-CN.mdx                                 |  97 ++++++
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 |  57 ++++
 .../en-US.langnostic.json                     |  82 +++++
 questions/what-are-symbols-used-for/zh-CN.mdx | 144 +++++++++
 .../en-US.langnostic.json                     |  72 +++++
 .../zh-CN.mdx                                 |  95 ++++++
 .../en-US.langnostic.json                     |  50 +++
 .../zh-CN.mdx                                 |  43 ++-
 .../en-US.langnostic.json                     |  70 ++++
 .../zh-CN.mdx                                 |  95 ++++++
 .../en-US.langnostic.json                     |  62 ++++
 .../zh-CN.mdx                                 |  81 +++++
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 |  61 ++++
 .../en-US.langnostic.json                     |  96 ++++++
 .../zh-CN.mdx                                 | 155 ++++++++-
 .../en-US.langnostic.json                     |  72 +++++
 .../zh-CN.mdx                                 | 127 ++++++++
 .../en-US.langnostic.json                     |  62 ++++
 .../zh-CN.mdx                                 | 228 ++++++++++++-
 .../en-US.langnostic.json                     |  72 +++++
 .../zh-CN.mdx                                 | 146 +++++++++
 .../en-US.langnostic.json                     |  70 ++++
 .../zh-CN.mdx                                 | 126 +++++---
 .../en-US.langnostic.json                     | 126 ++++++++
 .../zh-CN.mdx                                 | 241 ++++++++++++++
 .../en-US.langnostic.json                     |  64 ++++
 .../zh-CN.mdx                                 |  81 +++++
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 |  55 ++++
 .../en-US.langnostic.json                     |  48 +++
 .../zh-CN.mdx                                 |  61 ++++
 .../en-US.langnostic.json                     |  66 ++++
 .../zh-CN.mdx                                 | 115 +++++++
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 |  81 +++++
 .../en-US.langnostic.json                     | 102 ++++++
 .../zh-CN.mdx                                 | 162 ++++++++++
 .../en-US.langnostic.json                     |  54 ++++
 .../zh-CN.mdx                                 |  71 ++++
 .../en-US.langnostic.json                     |  56 ++++
 .../zh-CN.mdx                                 | 119 +++++++
 .../en-US.langnostic.json                     |  60 ++++
 .../zh-CN.mdx                                 | 148 ++++++++-
 .../en-US.langnostic.json                     | 116 +++++++
 .../zh-CN.mdx                                 | 204 ++++++++++++
 .../en-US.langnostic.json                     |  66 ++++
 .../zh-CN.mdx                                 | 124 +++++++
 .../en-US.langnostic.json                     |  70 ++++
 .../zh-CN.mdx                                 | 117 +++++++
 .../en-US.langnostic.json                     | 100 ++++++
 .../zh-CN.mdx                                 | 185 +++++++++++
 .../en-US.langnostic.json                     |  76 +++++
 .../zh-CN.mdx                                 |  99 +++++-
 .../en-US.langnostic.json                     |  62 ++++
 .../zh-CN.mdx                                 | 107 +++++-
 .../en-US.langnostic.json                     |  64 ++++
 .../zh-CN.mdx                                 | 118 +++++++
 .../en-US.langnostic.json                     |  68 ++++
 .../zh-CN.mdx                                 |  79 +++++
 .../en-US.langnostic.json                     |  60 ++++
 .../zh-CN.mdx                                 | 119 +++++++
 .../en-US.langnostic.json                     |  73 +++++
 .../zh-CN.mdx                                 | 109 ++++++-
 .../en-US.langnostic.json                     |  52 +++
 questions/what-is-objectfreeze-for/zh-CN.mdx  |  87 +++++
 .../en-US.langnostic.json                     |  56 ++++
 .../zh-CN.mdx                                 |  74 +++++
 .../en-US.langnostic.json                     |  56 ++++
 questions/what-is-objectseal-for/zh-CN.mdx    |  83 +++++
 .../en-US.langnostic.json                     |  66 ++++
 .../zh-CN.mdx                                 | 103 ++++++
 .../en-US.langnostic.json                     |  46 +++
 .../zh-CN.mdx                                 | 149 +++++++++
 .../en-US.langnostic.json                     |  62 ++++
 .../zh-CN.mdx                                 | 140 ++++++++
 .../en-US.langnostic.json                     |  74 +++++
 .../zh-CN.mdx                                 | 158 ++++++++-
 .../en-US.langnostic.json                     |  66 ++++
 .../zh-CN.mdx                                 |  82 +++++
 .../en-US.langnostic.json                     |  56 ++++
 .../zh-CN.mdx                                 |  63 ++++
 .../en-US.langnostic.json                     |  66 ++++
 .../zh-CN.mdx                                 |  91 +++++-
 .../en-US.langnostic.json                     |  48 +++
 .../zh-CN.mdx                                 |  49 +++
 .../en-US.langnostic.json                     |  62 ++++
 .../zh-CN.mdx                                 |  65 ++++
 .../en-US.langnostic.json                     |  54 ++++
 .../zh-CN.mdx                                 | 107 ++++++
 .../en-US.langnostic.json                     |  62 ++++
 .../zh-CN.mdx                                 |  76 +++++
 .../en-US.langnostic.json                     |  52 +++
 .../zh-CN.mdx                                 |  68 ++++
 .../en-US.langnostic.json                     |  58 ++++
 .../zh-CN.mdx                                 |  85 +++++
 .../en-US.langnostic.json                     |  64 ++++
 .../zh-CN.mdx                                 | 120 +++++++
 .../en-US.langnostic.json                     |  56 ++++
 .../zh-CN.mdx                                 |  70 ++++
 .../en-US.langnostic.json                     |  66 ++++
 .../zh-CN.mdx                                 |  88 +++++
 .../en-US.langnostic.json                     |  68 ++++
 .../zh-CN.mdx                                 | 103 ++++++
 .../en-US.langnostic.json                     |  54 ++++
 .../zh-CN.mdx                                 |  82 +++++
 .../en-US.langnostic.json                     |  48 +++
 .../zh-CN.mdx                                 |  83 +++++
 .../en-US.langnostic.json                     |  54 ++++
 .../zh-CN.mdx                                 |  84 +++++
 .../en-US.langnostic.json                     |  64 ++++
 .../zh-CN.mdx                                 | 112 +++++++
 .../en-US.langnostic.json                     |  66 ++++
 .../zh-CN.mdx                                 |  92 ++++++
 .../en-US.langnostic.json                     |  64 ++++
 .../zh-CN.mdx                                 |  76 +++++
 .../en-US.langnostic.json                     |  66 ++++
 .../what-is-the-use-of-promiseall/zh-CN.mdx   | 102 ++++++
 .../en-US.langnostic.json                     |  67 ++++
 .../zh-CN.mdx                                 | 148 ++++++++-
 .../en-US.langnostic.json                     | 120 +++++++
 .../zh-CN.mdx                                 | 171 ++++++++--
 .../en-US.langnostic.json                     |  48 +++
 .../zh-CN.mdx                                 |  63 +++-
 .../en-US.langnostic.json                     |  62 ++++
 .../zh-CN.mdx                                 |  83 ++++-
 .../en-US.langnostic.json                     |  57 ++++
 .../zh-CN.mdx                                 |  70 +++-
 .../en-US.langnostic.json                     |  60 ++++
 .../zh-CN.mdx                                 |  74 ++++-
 .../en-US.langnostic.json                     |  78 +++++
 .../zh-CN.mdx                                 | 110 ++++++-
 .../en-US.langnostic.json                     |  54 ++++
 .../zh-CN.mdx                                 |  66 +++-
 .../en-US.langnostic.json                     |  56 ++++
 .../zh-CN.mdx                                 |  68 +++-
 .../en-US.langnostic.json                     |  66 ++++
 .../zh-CN.mdx                                 | 114 ++++++-
 .../en-US.langnostic.json                     |  72 +++++
 .../zh-CN.mdx                                 | 131 +++++++-
 386 files changed, 31970 insertions(+), 525 deletions(-)
 create mode 100644 questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.langnostic.json
 create mode 100644 questions/describe-event-bubbling/en-US.langnostic.json
 create mode 100644 questions/describe-event-capturing/en-US.langnostic.json
 create mode 100644 questions/describe-event-capturing/zh-CN.mdx
 create mode 100644 questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.langnostic.json
 create mode 100644 questions/describe-the-difference-between-script-async-and-script-defer/en-US.langnostic.json
 create mode 100644 questions/difference-between-document-load-event-and-document-domcontentloaded-event/en-US.langnostic.json
 create mode 100644 questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.langnostic.json
 create mode 100644 questions/explain-ajax-in-as-much-detail-as-possible/en-US.langnostic.json
 create mode 100644 questions/explain-event-delegation/en-US.langnostic.json
 create mode 100644 questions/explain-function-prototype-bind/en-US.langnostic.json
 create mode 100644 questions/explain-hoisting/en-US.langnostic.json
 create mode 100644 questions/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.langnostic.json
 create mode 100644 questions/explain-how-prototypal-inheritance-works/en-US.langnostic.json
 create mode 100644 questions/explain-how-this-works-in-javascript/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-a-microtask-queue/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-a-microtask-queue/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-debouncing-and-throttling/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-debouncing-and-throttling/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-error-propagation-in-javascript/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-error-propagation-in-javascript/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-hoisting-with-regards-to-functions/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-inheritance-in-es2015-classes/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-input-validation-and-its-importance-in-security/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-input-validation-and-its-importance-in-security/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-lexical-scoping/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-lexical-scoping/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-partial-application/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-partial-application/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-scope-in-javascript/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-scope-in-javascript/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-tagged-templates/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-tagged-templates/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-test-driven-development-tdd/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-test-driven-development-tdd/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-the-prototype-pattern/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-the-prototype-pattern/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-the-singleton-pattern/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-the-singleton-pattern/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-the-spread-operator-and-its-uses/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-the-strategy-pattern/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-the-strategy-pattern/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-the-web-socket-api/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-the-web-socket-api/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-this-binding-in-event-handlers/zh-CN.mdx
 create mode 100644 questions/explain-the-concept-of-tree-shaking-in-module-bundling/en-US.langnostic.json
 create mode 100644 questions/explain-the-concept-of-tree-shaking-in-module-bundling/zh-CN.mdx
 create mode 100644 questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.langnostic.json
 create mode 100644 questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/zh-CN.mdx
 create mode 100644 questions/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/en-US.langnostic.json
 create mode 100644 questions/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/zh-CN.mdx
 create mode 100644 questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/en-US.langnostic.json
 create mode 100644 questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/zh-CN.mdx
 create mode 100644 questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.langnostic.json
 create mode 100644 questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/zh-CN.mdx
 create mode 100644 questions/explain-the-difference-between-mutable-and-immutable-objects/en-US.langnostic.json
 create mode 100644 questions/explain-the-difference-between-shallow-copy-and-deep-copy/en-US.langnostic.json
 create mode 100644 questions/explain-the-difference-between-shallow-copy-and-deep-copy/zh-CN.mdx
 create mode 100644 questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.langnostic.json
 create mode 100644 questions/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/en-US.langnostic.json
 create mode 100644 questions/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/zh-CN.mdx
 create mode 100644 questions/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.langnostic.json
 create mode 100644 questions/explain-the-difference-in-hoisting-between-var-let-and-const/zh-CN.mdx
 create mode 100644 questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.langnostic.json
 create mode 100644 questions/explain-the-differences-between-commonjs-modules-and-es-modules/zh-CN.mdx
 create mode 100644 questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.langnostic.json
 create mode 100644 questions/explain-the-different-states-of-a-promise/en-US.langnostic.json
 create mode 100644 questions/explain-the-different-states-of-a-promise/zh-CN.mdx
 create mode 100644 questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.langnostic.json
 create mode 100644 questions/explain-the-different-ways-the-this-keyword-can-be-bound/zh-CN.mdx
 create mode 100644 questions/explain-the-event-phases-in-a-browser/en-US.langnostic.json
 create mode 100644 questions/explain-the-event-phases-in-a-browser/zh-CN.mdx
 create mode 100644 questions/explain-the-observer-pattern-and-its-use-cases/en-US.langnostic.json
 create mode 100644 questions/explain-the-observer-pattern-and-its-use-cases/zh-CN.mdx
 create mode 100644 questions/explain-the-same-origin-policy-with-regards-to-javascript/en-US.langnostic.json
 create mode 100644 questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/en-US.langnostic.json
 create mode 100644 questions/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/en-US.langnostic.json
 create mode 100644 questions/how-can-closures-be-used-to-create-private-variables/en-US.langnostic.json
 create mode 100644 questions/how-can-closures-be-used-to-create-private-variables/zh-CN.mdx
 create mode 100644 questions/how-can-you-avoid-problems-related-to-hoisting/en-US.langnostic.json
 create mode 100644 questions/how-can-you-avoid-problems-related-to-hoisting/zh-CN.mdx
 create mode 100644 questions/how-can-you-create-custom-error-objects/en-US.langnostic.json
 create mode 100644 questions/how-can-you-create-custom-error-objects/zh-CN.mdx
 create mode 100644 questions/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/en-US.langnostic.json
 create mode 100644 questions/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/zh-CN.mdx
 create mode 100644 questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.langnostic.json
 create mode 100644 questions/how-can-you-optimize-dom-manipulation-for-better-performance/zh-CN.mdx
 create mode 100644 questions/how-can-you-optimize-network-requests-for-better-performance/en-US.langnostic.json
 create mode 100644 questions/how-can-you-optimize-network-requests-for-better-performance/zh-CN.mdx
 create mode 100644 questions/how-can-you-prevent-clickjacking-attacks/en-US.langnostic.json
 create mode 100644 questions/how-can-you-prevent-clickjacking-attacks/zh-CN.mdx
 create mode 100644 questions/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/en-US.langnostic.json
 create mode 100644 questions/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/zh-CN.mdx
 create mode 100644 questions/how-can-you-share-code-between-files/en-US.langnostic.json
 create mode 100644 questions/how-can-you-test-asynchronous-code-in-javascript/en-US.langnostic.json
 create mode 100644 questions/how-can-you-test-asynchronous-code-in-javascript/zh-CN.mdx
 create mode 100644 questions/how-do-currying-and-partial-application-differ-from-each-other/en-US.langnostic.json
 create mode 100644 questions/how-do-currying-and-partial-application-differ-from-each-other/zh-CN.mdx
 create mode 100644 questions/how-do-iframe-on-a-page-communicate/en-US.langnostic.json
 create mode 100644 questions/how-do-iframe-on-a-page-communicate/zh-CN.mdx
 create mode 100644 questions/how-do-sets-and-maps-handle-equality-checks-for-objects/en-US.langnostic.json
 create mode 100644 questions/how-do-sets-and-maps-handle-equality-checks-for-objects/zh-CN.mdx
 create mode 100644 questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.langnostic.json
 create mode 100644 questions/how-do-you-abort-a-web-request-using-abortcontrollers/zh-CN.mdx
 create mode 100644 questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/en-US.langnostic.json
 create mode 100644 questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/zh-CN.mdx
 create mode 100644 questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.langnostic.json
 create mode 100644 questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/zh-CN.mdx
 create mode 100644 questions/how-do-you-add-remove-and-update-elements-in-an-array/en-US.langnostic.json
 create mode 100644 questions/how-do-you-add-remove-and-update-elements-in-an-array/zh-CN.mdx
 create mode 100644 questions/how-do-you-check-if-an-object-has-a-specific-property/en-US.langnostic.json
 create mode 100644 questions/how-do-you-check-if-an-object-has-a-specific-property/zh-CN.mdx
 create mode 100644 questions/how-do-you-check-the-data-type-of-a-variable/en-US.langnostic.json
 create mode 100644 questions/how-do-you-check-the-data-type-of-a-variable/zh-CN.mdx
 create mode 100644 questions/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.langnostic.json
 create mode 100644 questions/how-do-you-convert-a-set-to-an-array-in-javascript/zh-CN.mdx
 create mode 100644 questions/how-do-you-convert-a-string-to-a-number-in-javascript/en-US.langnostic.json
 create mode 100644 questions/how-do-you-convert-a-string-to-a-number-in-javascript/zh-CN.mdx
 create mode 100644 questions/how-do-you-create-a-constructor-function/en-US.langnostic.json
 create mode 100644 questions/how-do-you-create-a-constructor-function/zh-CN.mdx
 create mode 100644 questions/how-do-you-detect-if-javascript-is-disabled-on-a-page/en-US.langnostic.json
 create mode 100644 questions/how-do-you-detect-if-javascript-is-disabled-on-a-page/zh-CN.mdx
 create mode 100644 questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.langnostic.json
 create mode 100644 questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/zh-CN.mdx
 create mode 100644 questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.langnostic.json
 create mode 100644 questions/how-do-you-handle-errors-in-asynchronous-operations/zh-CN.mdx
 create mode 100644 questions/how-do-you-handle-errors-using-trycatch-blocks/en-US.langnostic.json
 create mode 100644 questions/how-do-you-handle-errors-using-trycatch-blocks/zh-CN.mdx
 create mode 100644 questions/how-do-you-import-and-export-modules-in-javascript/en-US.langnostic.json
 create mode 100644 questions/how-do-you-import-and-export-modules-in-javascript/zh-CN.mdx
 create mode 100644 questions/how-do-you-make-an-http-request-using-the-fetch-api/en-US.langnostic.json
 create mode 100644 questions/how-do-you-make-an-http-request-using-the-fetch-api/zh-CN.mdx
 create mode 100644 questions/how-do-you-manipulate-css-styles-using-javascript/en-US.langnostic.json
 create mode 100644 questions/how-do-you-manipulate-css-styles-using-javascript/zh-CN.mdx
 create mode 100644 questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.langnostic.json
 create mode 100644 questions/how-do-you-prevent-the-default-behavior-of-an-event/en-US.langnostic.json
 create mode 100644 questions/how-do-you-prevent-the-default-behavior-of-an-event/zh-CN.mdx
 create mode 100644 questions/how-do-you-redirect-to-a-new-page-in-javascript/en-US.langnostic.json
 create mode 100644 questions/how-do-you-redirect-to-a-new-page-in-javascript/zh-CN.mdx
 create mode 100644 questions/how-do-you-reliably-determine-whether-an-object-is-empty/en-US.langnostic.json
 create mode 100644 questions/how-do-you-reliably-determine-whether-an-object-is-empty/zh-CN.mdx
 create mode 100644 questions/how-do-you-use-windowhistory-api/en-US.langnostic.json
 create mode 100644 questions/how-do-you-use-windowhistory-api/zh-CN.mdx
 create mode 100644 questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.langnostic.json
 create mode 100644 questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/zh-CN.mdx
 create mode 100644 questions/how-do-you-write-unit-tests-for-javascript-code/en-US.langnostic.json
 create mode 100644 questions/how-do-you-write-unit-tests-for-javascript-code/zh-CN.mdx
 create mode 100644 questions/how-does-hoisting-affect-function-declarations-and-expressions/en-US.langnostic.json
 create mode 100644 questions/how-does-hoisting-affect-function-declarations-and-expressions/zh-CN.mdx
 create mode 100644 questions/how-does-javascript-garbage-collection-work/en-US.langnostic.json
 create mode 100644 questions/how-does-javascript-garbage-collection-work/zh-CN.mdx
 create mode 100644 questions/how-is-promiseall-different-from-promiseallsettled/en-US.langnostic.json
 create mode 100644 questions/how-is-promiseall-different-from-promiseallsettled/zh-CN.mdx
 create mode 100644 questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.langnostic.json
 create mode 100644 questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/zh-CN.mdx
 create mode 100644 questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.langnostic.json
 create mode 100644 questions/what-are-callback-functions-and-how-are-they-used/en-US.langnostic.json
 create mode 100644 questions/what-are-callback-functions-and-how-are-they-used/zh-CN.mdx
 create mode 100644 questions/what-are-default-parameters-and-how-are-they-used/en-US.langnostic.json
 create mode 100644 questions/what-are-default-parameters-and-how-are-they-used/zh-CN.mdx
 create mode 100644 questions/what-are-design-patterns-and-why-are-they-useful/en-US.langnostic.json
 create mode 100644 questions/what-are-design-patterns-and-why-are-they-useful/zh-CN.mdx
 create mode 100644 questions/what-are-event-listeners-and-how-are-they-used/en-US.langnostic.json
 create mode 100644 questions/what-are-event-listeners-and-how-are-they-used/zh-CN.mdx
 create mode 100644 questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.langnostic.json
 create mode 100644 questions/what-are-iterators-and-generators-and-what-are-they-used-for/zh-CN.mdx
 create mode 100644 questions/what-are-javascript-object-getters-and-setters-for/en-US.langnostic.json
 create mode 100644 questions/what-are-javascript-object-getters-and-setters-for/zh-CN.mdx
 create mode 100644 questions/what-are-javascript-object-property-flags-and-descriptors/en-US.langnostic.json
 create mode 100644 questions/what-are-javascript-object-property-flags-and-descriptors/zh-CN.mdx
 create mode 100644 questions/what-are-javascript-polyfills-for/en-US.langnostic.json
 create mode 100644 questions/what-are-javascript-polyfills-for/zh-CN.mdx
 create mode 100644 questions/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/en-US.langnostic.json
 create mode 100644 questions/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/zh-CN.mdx
 create mode 100644 questions/what-are-modules-and-why-are-they-useful/en-US.langnostic.json
 create mode 100644 questions/what-are-modules-and-why-are-they-useful/zh-CN.mdx
 create mode 100644 questions/what-are-progressive-web-applications-pwas/en-US.langnostic.json
 create mode 100644 questions/what-are-progressive-web-applications-pwas/zh-CN.mdx
 create mode 100644 questions/what-are-promises-and-how-do-they-work/en-US.langnostic.json
 create mode 100644 questions/what-are-promises-and-how-do-they-work/zh-CN.mdx
 create mode 100644 questions/what-are-proxies-in-javascript-used-for/en-US.langnostic.json
 create mode 100644 questions/what-are-proxies-in-javascript-used-for/zh-CN.mdx
 create mode 100644 questions/what-are-rest-parameters-and-how-are-they-used/en-US.langnostic.json
 create mode 100644 questions/what-are-rest-parameters-and-how-are-they-used/zh-CN.mdx
 create mode 100644 questions/what-are-server-sent-events/en-US.langnostic.json
 create mode 100644 questions/what-are-server-sent-events/zh-CN.mdx
 create mode 100644 questions/what-are-sets-and-maps-and-how-are-they-used/en-US.langnostic.json
 create mode 100644 questions/what-are-sets-and-maps-and-how-are-they-used/zh-CN.mdx
 create mode 100644 questions/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/en-US.langnostic.json
 create mode 100644 questions/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/zh-CN.mdx
 create mode 100644 questions/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/en-US.langnostic.json
 create mode 100644 questions/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/zh-CN.mdx
 create mode 100644 questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.langnostic.json
 create mode 100644 questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/zh-CN.mdx
 create mode 100644 questions/what-are-some-common-security-headers-and-their-purpose/en-US.langnostic.json
 create mode 100644 questions/what-are-some-common-security-headers-and-their-purpose/zh-CN.mdx
 create mode 100644 questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/en-US.langnostic.json
 create mode 100644 questions/what-are-some-popular-javascript-testing-frameworks/en-US.langnostic.json
 create mode 100644 questions/what-are-some-popular-javascript-testing-frameworks/zh-CN.mdx
 create mode 100644 questions/what-are-some-techniques-for-reducing-reflows-and-repaints/en-US.langnostic.json
 create mode 100644 questions/what-are-some-techniques-for-reducing-reflows-and-repaints/zh-CN.mdx
 create mode 100644 questions/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/en-US.langnostic.json
 create mode 100644 questions/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/zh-CN.mdx
 create mode 100644 questions/what-are-some-tools-that-can-be-used-for-javascript-testing/en-US.langnostic.json
 create mode 100644 questions/what-are-some-tools-that-can-be-used-for-javascript-testing/zh-CN.mdx
 create mode 100644 questions/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/en-US.langnostic.json
 create mode 100644 questions/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/zh-CN.mdx
 create mode 100644 questions/what-are-symbols-used-for/en-US.langnostic.json
 create mode 100644 questions/what-are-symbols-used-for/zh-CN.mdx
 create mode 100644 questions/what-are-template-literals-and-how-are-they-used/en-US.langnostic.json
 create mode 100644 questions/what-are-template-literals-and-how-are-they-used/zh-CN.mdx
 create mode 100644 questions/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.langnostic.json
 create mode 100644 questions/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/en-US.langnostic.json
 create mode 100644 questions/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/zh-CN.mdx
 create mode 100644 questions/what-are-the-benefits-of-using-a-module-bundler/en-US.langnostic.json
 create mode 100644 questions/what-are-the-benefits-of-using-a-module-bundler/zh-CN.mdx
 create mode 100644 questions/what-are-the-benefits-of-using-currying-and-partial-application/en-US.langnostic.json
 create mode 100644 questions/what-are-the-benefits-of-using-currying-and-partial-application/zh-CN.mdx
 create mode 100644 questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.langnostic.json
 create mode 100644 questions/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.langnostic.json
 create mode 100644 questions/what-are-the-common-pitfalls-of-using-the-this-keyword/zh-CN.mdx
 create mode 100644 questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.langnostic.json
 create mode 100644 questions/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.langnostic.json
 create mode 100644 questions/what-are-the-differences-between-map-set-and-weakmap-weakset/zh-CN.mdx
 create mode 100644 questions/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.langnostic.json
 create mode 100644 questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.langnostic.json
 create mode 100644 questions/what-are-the-differences-between-xmlhttprequest-and-fetch/zh-CN.mdx
 create mode 100644 questions/what-are-the-different-methods-for-iterating-over-an-array/en-US.langnostic.json
 create mode 100644 questions/what-are-the-different-methods-for-iterating-over-an-array/zh-CN.mdx
 create mode 100644 questions/what-are-the-different-types-of-errors-in-javascript/en-US.langnostic.json
 create mode 100644 questions/what-are-the-different-types-of-errors-in-javascript/zh-CN.mdx
 create mode 100644 questions/what-are-the-different-types-of-testing-in-software-development/en-US.langnostic.json
 create mode 100644 questions/what-are-the-different-types-of-testing-in-software-development/zh-CN.mdx
 create mode 100644 questions/what-are-the-different-ways-to-copy-an-object-or-an-array/en-US.langnostic.json
 create mode 100644 questions/what-are-the-different-ways-to-copy-an-object-or-an-array/zh-CN.mdx
 create mode 100644 questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/en-US.langnostic.json
 create mode 100644 questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/zh-CN.mdx
 create mode 100644 questions/what-are-the-metadata-fields-of-a-module/en-US.langnostic.json
 create mode 100644 questions/what-are-the-metadata-fields-of-a-module/zh-CN.mdx
 create mode 100644 questions/what-are-the-potential-issues-caused-by-hoisting/en-US.langnostic.json
 create mode 100644 questions/what-are-the-potential-issues-caused-by-hoisting/zh-CN.mdx
 create mode 100644 questions/what-are-the-potential-pitfalls-of-using-closures/en-US.langnostic.json
 create mode 100644 questions/what-are-the-potential-pitfalls-of-using-closures/zh-CN.mdx
 create mode 100644 questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.langnostic.json
 create mode 100644 questions/what-are-the-various-data-types-in-javascript/en-US.langnostic.json
 create mode 100644 questions/what-are-the-various-data-types-in-javascript/zh-CN.mdx
 create mode 100644 questions/what-are-the-various-ways-to-create-objects-in-javascript/en-US.langnostic.json
 create mode 100644 questions/what-are-the-various-ways-to-create-objects-in-javascript/zh-CN.mdx
 create mode 100644 questions/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/en-US.langnostic.json
 create mode 100644 questions/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/zh-CN.mdx
 create mode 100644 questions/what-are-workers-in-javascript-used-for/en-US.langnostic.json
 create mode 100644 questions/what-are-workers-in-javascript-used-for/zh-CN.mdx
 create mode 100644 questions/what-do-you-think-of-amd-vs-commonjs/en-US.langnostic.json
 create mode 100644 questions/what-is-a-closure-and-how-why-would-you-use-one/en-US.langnostic.json
 create mode 100644 questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.langnostic.json
 create mode 100644 questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/zh-CN.mdx
 create mode 100644 questions/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/en-US.langnostic.json
 create mode 100644 questions/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/zh-CN.mdx
 create mode 100644 questions/what-is-currying-and-how-does-it-work/en-US.langnostic.json
 create mode 100644 questions/what-is-currying-and-how-does-it-work/zh-CN.mdx
 create mode 100644 questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.langnostic.json
 create mode 100644 questions/what-is-objectfreeze-for/en-US.langnostic.json
 create mode 100644 questions/what-is-objectfreeze-for/zh-CN.mdx
 create mode 100644 questions/what-is-objectpreventextensions-for/en-US.langnostic.json
 create mode 100644 questions/what-is-objectpreventextensions-for/zh-CN.mdx
 create mode 100644 questions/what-is-objectseal-for/en-US.langnostic.json
 create mode 100644 questions/what-is-objectseal-for/zh-CN.mdx
 create mode 100644 questions/what-is-recursion-and-how-is-it-used-in-javascript/en-US.langnostic.json
 create mode 100644 questions/what-is-recursion-and-how-is-it-used-in-javascript/zh-CN.mdx
 create mode 100644 questions/what-is-the-command-pattern-and-how-is-it-used/en-US.langnostic.json
 create mode 100644 questions/what-is-the-command-pattern-and-how-is-it-used/zh-CN.mdx
 create mode 100644 questions/what-is-the-decorator-pattern-and-how-is-it-used/en-US.langnostic.json
 create mode 100644 questions/what-is-the-decorator-pattern-and-how-is-it-used/zh-CN.mdx
 create mode 100644 questions/what-is-the-definition-of-a-higher-order-function/en-US.langnostic.json
 create mode 100644 questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.langnostic.json
 create mode 100644 questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/zh-CN.mdx
 create mode 100644 questions/what-is-the-difference-between-a-parameter-and-an-argument/en-US.langnostic.json
 create mode 100644 questions/what-is-the-difference-between-a-parameter-and-an-argument/zh-CN.mdx
 create mode 100644 questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.langnostic.json
 create mode 100644 questions/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/en-US.langnostic.json
 create mode 100644 questions/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/zh-CN.mdx
 create mode 100644 questions/what-is-the-difference-between-innerhtml-and-textcontent/en-US.langnostic.json
 create mode 100644 questions/what-is-the-difference-between-innerhtml-and-textcontent/zh-CN.mdx
 create mode 100644 questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.langnostic.json
 create mode 100644 questions/what-is-the-difference-between-mouseenter-and-mouseover-event/zh-CN.mdx
 create mode 100644 questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.langnostic.json
 create mode 100644 questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/zh-CN.mdx
 create mode 100644 questions/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.langnostic.json
 create mode 100644 questions/what-is-the-difference-between-the-window-object-and-the-document-object/zh-CN.mdx
 create mode 100644 questions/what-is-the-dom-and-how-is-it-structured/en-US.langnostic.json
 create mode 100644 questions/what-is-the-dom-and-how-is-it-structured/zh-CN.mdx
 create mode 100644 questions/what-is-the-factory-pattern-and-how-is-it-used/en-US.langnostic.json
 create mode 100644 questions/what-is-the-factory-pattern-and-how-is-it-used/zh-CN.mdx
 create mode 100644 questions/what-is-the-intl-namespace-object-for/en-US.langnostic.json
 create mode 100644 questions/what-is-the-intl-namespace-object-for/zh-CN.mdx
 create mode 100644 questions/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/en-US.langnostic.json
 create mode 100644 questions/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/zh-CN.mdx
 create mode 100644 questions/what-is-the-prototype-chain-and-how-does-it-work/en-US.langnostic.json
 create mode 100644 questions/what-is-the-prototype-chain-and-how-does-it-work/zh-CN.mdx
 create mode 100644 questions/what-is-the-purpose-of-the-break-and-continue-statements/en-US.langnostic.json
 create mode 100644 questions/what-is-the-purpose-of-the-break-and-continue-statements/zh-CN.mdx
 create mode 100644 questions/what-is-the-purpose-of-the-finally-block/en-US.langnostic.json
 create mode 100644 questions/what-is-the-purpose-of-the-finally-block/zh-CN.mdx
 create mode 100644 questions/what-is-the-purpose-of-the-new-keyword/en-US.langnostic.json
 create mode 100644 questions/what-is-the-purpose-of-the-new-keyword/zh-CN.mdx
 create mode 100644 questions/what-is-the-purpose-of-the-switch-statement/en-US.langnostic.json
 create mode 100644 questions/what-is-the-purpose-of-the-switch-statement/zh-CN.mdx
 create mode 100644 questions/what-is-the-spread-operator-and-how-is-it-used/en-US.langnostic.json
 create mode 100644 questions/what-is-the-spread-operator-and-how-is-it-used/zh-CN.mdx
 create mode 100644 questions/what-is-the-ternary-operator-and-how-is-it-used/en-US.langnostic.json
 create mode 100644 questions/what-is-the-ternary-operator-and-how-is-it-used/zh-CN.mdx
 create mode 100644 questions/what-is-the-use-of-promiseall/en-US.langnostic.json
 create mode 100644 questions/what-is-the-use-of-promiseall/zh-CN.mdx
 create mode 100644 questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.langnostic.json
 create mode 100644 questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.langnostic.json
 create mode 100644 questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.langnostic.json
 create mode 100644 questions/whats-a-typical-use-case-for-anonymous-functions/en-US.langnostic.json
 create mode 100644 questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.langnostic.json
 create mode 100644 questions/whats-the-difference-between-an-attribute-and-a-property/en-US.langnostic.json
 create mode 100644 questions/whats-the-difference-between-call-and-apply/en-US.langnostic.json
 create mode 100644 questions/when-would-you-use-document-write/en-US.langnostic.json
 create mode 100644 questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.langnostic.json
 create mode 100644 questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.langnostic.json
 create mode 100644 questions/why-you-might-want-to-create-static-class-members/en-US.langnostic.json

diff --git a/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.langnostic.json b/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.langnostic.json
new file mode 100644
index 0000000..3109d8d
--- /dev/null
+++ b/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.langnostic.json
@@ -0,0 +1,57 @@
+{
+  "frontmatter": {
+    "title": "5ba0d4da",
+    "subtitle": "4d47ead"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "4010c03b",
+        "b7950cbe",
+        "2a7816d0",
+        "678d2642",
+        "7ac0c956",
+        "4e1ff55c",
+        "d3b7242",
+        "a203d791",
+        "8550812",
+        "54dee6b3",
+        "a6f52eea",
+        "cb0ae1a8",
+        "e5dcf6c0",
+        "839f0ebb",
+        "d8fa43b8",
+        "30eae852",
+        "be10dd6f",
+        "1f4770e5",
+        "6232231"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "4010c03b",
+        "b7950cbe",
+        "2a7816d0",
+        "678d2642",
+        "7ac0c956",
+        "4e1ff55c",
+        "d3b7242",
+        "a203d791",
+        "8550812",
+        "54dee6b3",
+        "a6f52eea",
+        "cb0ae1a8",
+        "e5dcf6c0",
+        "839f0ebb",
+        "d8fa43b8",
+        "30eae852",
+        "be10dd6f",
+        "1f4770e5",
+        "6232231"
+      ]
+    }
+  }
+}
diff --git a/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/zh-CN.mdx b/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/zh-CN.mdx
index c6ba1df..2b657a9 100644
--- a/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/zh-CN.mdx
+++ b/questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/zh-CN.mdx
@@ -1,50 +1,102 @@
 ---
-title: 您可以为新箭头函数语法提供一个用例吗？
-subtitle: 这个新语法与其他函数有什么不同？
+title: 箭头 => 函数语法有什么用例？
+subtitle: 这种新语法与其他函数有何不同？
 ---
 
-`=>` 函数语法，也被称为 "箭头函数"，是在 ECMAScript 6（ES6）中引入的 JavaScript 功能。它提供了一种更简洁的编写函数的方式，并且在 `this` 的行为方面与传统函数表达式有一些不同。下面通过一个简单的用例来说明它的实用性：
+## TL;DR
 
-## 用例：筛选数组
+箭头函数为用 JavaScript 编写函数提供了一种简洁的语法。它们对于在方法和回调中维护 `this` 上下文特别有用。例如，在事件处理程序或像 `map` 这样的数组方法中，箭头函数可以简化代码并避免 `this` 绑定问题。
 
-假设你有一个包含数字的数组，你想筛选出所有小于 10 的数字。你可以使用传统的函数语法和新的箭头函数语法来实现这一目标，如下所示：
+```js live
+const numbers = [1, 2, 3];
+const doubled = numbers.map((n) => n * 2);
+console.log(doubled); // [2, 4, 6]
+```
 
-### 传统函数语法
+***
 
-```js
-const numbers = [1, 5, 10, 15, 20];
-const filteredNumbers = numbers.filter(function (number) {
-  return number >= 10;
-});
+## 新箭头 => 函数语法的用例
+
+### 简化语法
+
+箭头函数提供了一种更简洁的编写函数的方式。这对于短函数或回调特别有用。
 
-console.log(filteredNumbers); // 输出: [10, 15, 20]
+```js live
+// Traditional function
+const add = function (a, b) {
+  return a + b;
+};
+
+// Arrow function
+const anotherAdd = (a, b) => a + b;
+
+console.log(add(2, 3)); // Output: 5
+console.log(anotherAdd(2, 3)); // Output: 5
 ```
 
-### 箭头函数语法
+### 词法 `this` 绑定
+
+箭头函数没有自己的 `this` 上下文。相反，它们从周围的范围继承 `this`。这在 `this` 上下文可能很棘手的方法和回调中特别有用。
 
-```js
-const numbers = [1, 5, 10, 15, 20];
-const filteredNumbers = numbers.filter((number) => number >= 10);
+```js live
+function Timer() {
+  this.seconds = 0;
+  this.increment = () => {
+    this.seconds++; // 'this.seconds' is inherited from the outer scope
+    console.log(this.seconds);
+  };
+}
 
-console.log(filteredNumbers); // 输出: [10, 15, 20]
+const timer = new Timer();
+timer.increment(); // 1
+timer.increment(); // 2
 ```
 
-## 箭头函数的优点
+在上面的例子中，在 `setInterval` 中使用传统函数需要额外的步骤来维护正确的 `this` 上下文。
 
-1. **简洁性**：箭头函数更加简洁，使你的代码更短且易于阅读。
-1. **`this` 行为**：箭头函数没有自己的 `this`。相反，它们继承自它们在定义时的父级作用域中的 `this`。这在处理回调并希望保留 `this` 上下文的情况下特别有用。
-1. **隐式返回**：如果函数体只包含一个表达式，箭头函数允许省略 `return` 关键字和花括号。
+### 在数组方法中使用箭头函数
 
-## 何时使用箭头函数
+箭头函数通常用于 `map`、`filter` 和 `reduce` 等数组方法中，以获得更简洁、更易读的代码。
 
-- 当你需要一个快速的、单行的函数时。
-- 在回调函数中，当你想要保留 `this` 的词法作用域时。
-- 在使用 `map`、`filter`、`reduce` 等高阶函数时。
+```js live
+const numbers = [1, 2, 3, 4, 5];
 
-## 何时不要使用箭头函数
+// Traditional function
+const doubledTraditional = numbers.map(function (n) {
+  return n * 2;
+});
+
+// Arrow function
+const doubled = numbers.map((n) => n * 2);
+
+console.log(doubled); // [2, 4, 6, 8, 10]
+```
+
+### 事件处理程序
+
+箭头函数可用于事件处理程序，以维护类或对象的 `this` 上下文。
+
+```js live
+class Button {
+  constructor() {
+    this.count = 0;
+    this.button = document.createElement('button');
+    this.button.innerText = 'Click me';
+    this.button.addEventListener('click', () => {
+      this.count++;
+      console.log('count:', this.count);
+    });
+    document.body.appendChild(this.button);
+  }
+}
+
+const myButton = new Button();
+myButton.button.click(); // count: 1
+myButton.button.click(); // count: 2
+```
 
-- **对象方法**：箭头函数没有自己的 `this` 上下文，在对象方法中可能会导致意外行为。
-- **作为构造函数**：箭头函数不能作为构造函数使用，如果使用 `new` 关键字会引发错误。
-- **当你需要使用函数提升**：与传统的函数声明不同，箭头函数不会提升。
+## 延伸阅读
 
-箭头函数是 JavaScript 的一个强大补充，简化了函数语法，并解决了传统函数中 `this` 关键字的一些常见问题。它们在现代 JavaScript 开发模式中特别有用。
+* [MDN Web Docs: Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
+* [JavaScript.info: Arrow functions revisited](https://javascript.info/arrow-functions)
+* [Eloquent JavaScript: Functions](https://eloquentjavascript.net/03_functions.html)
diff --git a/questions/describe-event-bubbling/en-US.langnostic.json b/questions/describe-event-bubbling/en-US.langnostic.json
new file mode 100644
index 0000000..c1c657a
--- /dev/null
+++ b/questions/describe-event-bubbling/en-US.langnostic.json
@@ -0,0 +1,96 @@
+{
+  "frontmatter": {
+    "title": "e76fac09"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "1cdd9fe1",
+        "940c1a5e",
+        "2a7816d0",
+        "8f8a1b0c",
+        "72e7e3c9",
+        "63bf7424",
+        "a71258b2",
+        "7009889d",
+        "7c18e66f",
+        "ae34ee20",
+        "e04e0f0f",
+        "d186cc4a",
+        "a517a702",
+        "9e538dcd",
+        "3818abba",
+        "47a90b06",
+        "10d6cb7a",
+        "1f177e65",
+        "d7a0aa2",
+        "68b07c90",
+        "e2a961ac",
+        "c81ac723",
+        "965b6bd7",
+        "b0d83e27",
+        "a8ff50ea",
+        "3625d327",
+        "ac7b2126",
+        "92f262c4",
+        "b37f85fb",
+        "3c0717ad",
+        "26112098",
+        "2dfccf1a",
+        "5a641ee3",
+        "647830d7",
+        "758c287c",
+        "ad083d17",
+        "da4b57bd",
+        "1f4770e5",
+        "d00fe19e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "1cdd9fe1",
+        "940c1a5e",
+        "2a7816d0",
+        "8f8a1b0c",
+        "72e7e3c9",
+        "63bf7424",
+        "a71258b2",
+        "7009889d",
+        "7c18e66f",
+        "ae34ee20",
+        "e04e0f0f",
+        "d186cc4a",
+        "a517a702",
+        "9e538dcd",
+        "3818abba",
+        "47a90b06",
+        "10d6cb7a",
+        "1f177e65",
+        "d7a0aa2",
+        "68b07c90",
+        "e2a961ac",
+        "c81ac723",
+        "965b6bd7",
+        "b0d83e27",
+        "a8ff50ea",
+        "3625d327",
+        "ac7b2126",
+        "92f262c4",
+        "b37f85fb",
+        "3c0717ad",
+        "26112098",
+        "2dfccf1a",
+        "5a641ee3",
+        "647830d7",
+        "758c287c",
+        "ad083d17",
+        "da4b57bd",
+        "1f4770e5",
+        "d00fe19e"
+      ]
+    }
+  }
+}
diff --git a/questions/describe-event-bubbling/zh-CN.mdx b/questions/describe-event-bubbling/zh-CN.mdx
index 720b389..af3b4bc 100644
--- a/questions/describe-event-bubbling/zh-CN.mdx
+++ b/questions/describe-event-bubbling/zh-CN.mdx
@@ -1,45 +1,222 @@
 ---
-title: 描述事件冒泡过程
+title: 描述 JavaScript 和浏览器的事件冒泡
 ---
 
-事件冒泡是 DOM（文档对象模型）中的一种传播机制，其中事件，如点击或键盘事件，首先在启动事件的目标元素上触发，然后向上（冒泡）通过 DOM 树传播到文档的根部。
+## TL;DR
+
+事件冒泡是一种 DOM 事件传播机制，其中一个事件（例如点击）从目标元素开始，冒泡到文档的根。这允许祖先元素也响应事件。
+
+事件冒泡对于事件委托至关重要，其中单个事件处理程序管理多个子元素的事件，从而提高性能和代码简洁性。虽然方便，但未能正确管理事件传播可能导致意外行为，例如多个处理程序为单个事件触发。
+
+---
+
+## 什么是事件冒泡？
+
+事件冒泡是 DOM（文档对象模型）中的一种传播机制，其中一个事件（例如点击或键盘事件）首先在触发事件的目标元素上触发，然后向上（冒泡）通过 DOM 树传播到文档的根。
+
+**注意**：甚至在事件冒泡阶段发生之前是 [事件捕获](/questions/quiz/describe-event-capturing) 阶段，该阶段与冒泡相反，事件从文档根向下到目标元素。
 
 ## 冒泡阶段
 
-在冒泡阶段期间，事件从目标元素开始，并通过其在 DOM 层次结构中的祖先向上冒泡。这意味着附加到目标元素及其祖先的事件处理程序都有可能接收并响应事件。
+在冒泡阶段，事件从目标元素开始，通过其在 DOM 层次结构中的祖先元素冒泡。这意味着附加到目标元素及其祖先的事件处理程序都可能接收并响应事件。
 
-以下是使用现代 ES6 语法演示事件冒泡的示例：
+这里有一个使用现代 ES6 语法的示例，用于演示事件冒泡：
 
-```js
+```js live
 // HTML:
 // <div id="parent">
-//   <button id="child">点击我！</button>
+//   <button id="child">Click me!</button>
 // </div>
+const parentDiv = document.createElement('div');
+parentDiv.id = 'parent';
+const button = document.createElement('button');
+button.id = 'child';
+parentDiv.appendChild(button);
+document.body.appendChild(parentDiv);
 
 const parent = document.getElementById('parent');
 const child = document.getElementById('child');
 
 parent.addEventListener('click', () => {
-  console.log('单击了父元素');
+  console.log('Parent element clicked');
 });
 
 child.addEventListener('click', () => {
-  console.log('单击了子元素');
+  console.log('Child element clicked');
 });
+
+// Simulate clicking the button:
+child.click();
 ```
 
-当单击 "点击我！" 按钮时，由于事件冒泡，子元素和父元素的事件处理程序都将被触发。
+当您点击“Click me!”按钮时，由于事件冒泡，子元素和父元素的事件处理程序都将被触发。
+
+## 停止冒泡
 
-## 阻止传播
+可以使用 `stopPropagation()` 方法在冒泡阶段停止事件冒泡。如果事件处理程序调用 `stopPropagation()`，它会阻止事件进一步冒泡到 DOM 树中，确保仅执行层次结构中该点之前的元素的处理程序。
 
-在冒泡阶段，可以使用 `stopPropagation()` 方法停止事件传播。如果事件处理程序调用 `stopPropagation()`，它将阻止事件继续向上冒泡到 DOM 树，确保只有位于层次结构中的元素的处理程序被执行。
+```js live
+// HTML:
+// <div id="parent">
+//   <button id="child">Click me!</button>
+// </div>
+const parentDiv = document.createElement('div');
+parentDiv.id = 'parent';
+const button = document.createElement('button');
+button.id = 'child';
+parentDiv.appendChild(button);
+document.body.appendChild(parentDiv);
+
+const parent = document.getElementById('parent');
+const child = document.getElementById('child');
+
+parent.addEventListener('click', () => {
+  console.log('Parent element clicked');
+});
+
+child.addEventListener('click', (event) => {
+  console.log('Child element clicked');
+  event.stopPropagation(); // Stops propagation to parent
+});
+
+// Simulate clicking the button:
+child.click();
+```
 
 ## 事件委托
 
-事件冒泡是一种称为 "事件委托" 的技术的基础，其中将单个事件处理程序附加到多个元素的共同祖先，并使用事件委托有效地处理这些元素的事件。当您有大量类似元素，例如项目列表时，希望避免为每个项目附加单独的事件处理程序时，这种方法特别有用。
+事件冒泡是称为 [事件委托](/questions/quiz/describe-event-delegation) 的技术的基础，您将单个事件处理程序附加到多个元素的公共祖先，并使用事件委托来有效地处理这些元素的事件。当您有大量相似的元素（如项目列表）并且希望避免将单独的事件处理程序附加到每个项目时，这特别有用。
+
+```js
+parent.addEventListener('click', (event) => {
+  if (event.target && event.target.id === 'child') {
+    console.log('Child element clicked');
+  }
+});
+```
+
+## 优点
+
+- **更简洁的代码：** 减少事件监听器的数量，提高代码可读性和可维护性。
+- **高效的事件处理：** 通过附加更少的监听器，最大限度地减少性能开销。
+- **灵活性：** 允许处理子元素上发生的事件，而无需直接将监听器附加到它们。
+
+## 陷阱
+
+- **意外的事件处理：** 请注意，父元素可能会无意中捕获子元素发生的事件。使用 `event.target` 来识别触发事件的特定元素。
+- **事件顺序：** 事件以特定顺序冒泡。如果多个父元素有事件监听器，它们的执行顺序取决于 DOM 层次结构。
+- **过度委托：** 虽然将事件委托给公共祖先是有效的，但在 DOM 树中附加一个过高的监听器可能会捕获意外的事件。
+
+## 用例
+
+以下是一些使用事件冒泡编写更好代码的实用方法。
+
+### 使用事件委托减少代码
+
+想象一下，您有一个产品列表，其中包含许多项目，每个项目都有一个“立即购买”按钮。 传统上，您可以将单独的点击事件监听器附加到每个按钮：
+
+```js
+// HTML:
+// <ul id="product-list">
+//   <li><button id="item1-buy">立即购买</button></li>
+//   <li><button id="item2-buy">立即购买</button></li>
+// </ul>
+
+const item1Buy = document.getElementById('item1-buy');
+const item2Buy = document.getElementById('item2-buy');
+
+item1Buy.addEventListener('click', handleBuyClick);
+item2Buy.addEventListener('click', handleBuyClick);
+
+// ... 对每个项目重复 ...
+
+function handleBuyClick(event) {
+  console.log('点击了项目的购买按钮：', event.target.id);
+}
+```
+
+随着项目数量的增加，这种方法变得很麻烦。 以下是事件冒泡如何简化事情的方法：
+
+```js
+// HTML:
+// <ul id="product-list">
+//   <li><button id="item1-buy">立即购买</button></li>
+//   <li><button id="item2-buy">立即购买</button></li>
+// </ul>
+
+const productList = document.getElementById('product-list');
+
+productList.addEventListener('click', handleBuyClick);
+
+function handleBuyClick(event) {
+  // 检查点击的元素是否是列表中的一个按钮
+  if (event.target.tagName.toLowerCase() === 'button') {
+    console.log('点击了项目的购买按钮：', event.target.textContent);
+  }
+}
+```
+
+通过将监听器附加到父元素 (`productList`) 并在处理程序中检查被点击的元素 (`event.target`)，您可以用更少的代码实现相同的功能。 当项目是动态的时，这种方法可以很好地扩展，因为当项目列表发生变化时，不需要添加或删除新的事件处理程序。
+
+### 下拉菜单
+
+考虑一个下拉菜单，点击菜单元素（父元素）的任何地方都应该关闭它。使用事件冒泡，您可以使用一个监听器来实现这一点：
+
+```js
+// HTML:
+// <div id="dropdown">
+//   <button>打开菜单</button>
+//   <ul>
+//     <li>项目 1</li>
+//     <li>项目 2</li>
+//   </ul>
+// </div>
+
+const dropdown = document.getElementById('dropdown');
+
+dropdown.addEventListener('click', handleDropdownClick);
+
+function handleDropdownClick(event) {
+  // 如果在按钮外部单击，则关闭下拉菜单
+  if (event.target !== dropdown.querySelector('button')) {
+    console.log('下拉菜单已关闭');
+    // 隐藏下拉菜单内容的逻辑
+  }
+}
+```
+
+在这里，点击事件从被点击的元素（按钮或列表项）冒泡到 `dropdown` 元素。 处理程序检查被点击的元素是否不是 `<button>`，并相应地关闭菜单。
+
+### 手风琴菜单
+
+想象一个手风琴菜单，点击一个部分标题（父级）会展开或折叠其下方的部分内容（子级）。 事件冒泡使这变得简单：
+
+```js
+// HTML:
+// <div class="accordion">
+//   <div class="header">第 1 节</div>
+//   <div class="content">第 1 节的内容</div>
+//   <div class="header">第 2 节</div>
+//   <div class="content">第 2 节的内容</div>
+// </div>
+
+const accordion = document.querySelector('.accordion');
+
+accordion.addEventListener('click', handleAccordionClick);
+
+function handleAccordionClick(event) {
+  // 检查点击的元素是否是标题
+  if (event.target.classList.contains('header')) {
+    const content = event.target.nextElementSibling;
+    content.classList.toggle('active'); // 切换内容的显示
+  }
+}
+```
+
+通过将监听器附加到 `accordion` 元素，单击任何标题都会触发该事件。 处理程序检查被点击的元素是否是标题，并切换相应内容部分的可见性。
 
-## 参考资料
+## 延伸阅读
 
-- [MDN Web Docs 上的事件冒泡](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling)
-- [JavaScript.info - 冒泡和捕获](https://javascript.info/bubbling-and-capturing)
-- [W3C DOM Level 3 事件规范](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)
+- [MDN Web Docs on Event Bubbling](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling)
+- [JavaScript.info - Bubbling and Capturing](https://javascript.info/bubbling-and-capturing)
+- [W3C DOM Level 3 Events Specification](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)
diff --git a/questions/describe-event-capturing/en-US.langnostic.json b/questions/describe-event-capturing/en-US.langnostic.json
new file mode 100644
index 0000000..08726d3
--- /dev/null
+++ b/questions/describe-event-capturing/en-US.langnostic.json
@@ -0,0 +1,62 @@
+{
+  "frontmatter": {
+    "title": "b0183641"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "2dbbafe4",
+        "58d82875",
+        "2a7816d0",
+        "4a46b75a",
+        "ac6b91fb",
+        "ebfdcf8e",
+        "3285d324",
+        "947f1c67",
+        "f2557d8b",
+        "b391e542",
+        "5089e2e8",
+        "571f9b6a",
+        "28762f9d",
+        "37ab3c2f",
+        "9d56c158",
+        "7b811adc",
+        "440e1878",
+        "59c63cca",
+        "e96a802a",
+        "e300e4d1",
+        "1f4770e5",
+        "7aa67f80"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "2dbbafe4",
+        "58d82875",
+        "2a7816d0",
+        "4a46b75a",
+        "ac6b91fb",
+        "ebfdcf8e",
+        "3285d324",
+        "947f1c67",
+        "f2557d8b",
+        "b391e542",
+        "5089e2e8",
+        "571f9b6a",
+        "28762f9d",
+        "37ab3c2f",
+        "9d56c158",
+        "7b811adc",
+        "440e1878",
+        "59c63cca",
+        "e96a802a",
+        "e300e4d1",
+        "1f4770e5",
+        "7aa67f80"
+      ]
+    }
+  }
+}
diff --git a/questions/describe-event-capturing/zh-CN.mdx b/questions/describe-event-capturing/zh-CN.mdx
new file mode 100644
index 0000000..1ac8435
--- /dev/null
+++ b/questions/describe-event-capturing/zh-CN.mdx
@@ -0,0 +1,96 @@
+---
+title: 描述 JavaScript 和浏览器中的事件捕获
+---
+
+## TL;DR
+
+事件捕获是 DOM 事件传播机制中较少使用的 [事件冒泡](/questions/quiz/describe-event-bubbling) 的对应部分。它遵循相反的顺序，事件首先在祖先元素上触发，然后向下传递到目标元素。
+
+与事件冒泡相比，事件捕获很少使用，但它可用于特定场景，例如需要在事件到达目标元素之前拦截更高级别的事件。默认情况下，它是禁用的，但可以通过 `addEventListener()` 上的一个选项来启用。
+
+***
+
+## 什么是事件捕获？
+
+事件捕获是 DOM（文档对象模型）中的一种传播机制，其中事件（例如单击或键盘事件）首先在文档的根处触发，然后通过 DOM 树向下流向目标元素。
+
+捕获的优先级高于冒泡，这意味着捕获事件处理程序在冒泡事件处理程序之前执行，如事件传播的各个阶段所示：
+
+* **捕获阶段**：事件向下移动到目标元素
+* **目标阶段**：事件到达目标元素
+* **冒泡阶段**：事件从目标元素冒泡
+
+请注意，默认情况下禁用事件捕获。要启用它，您必须将捕获选项传递到 `addEventListener()`。
+
+## 捕获阶段
+
+在捕获阶段，事件从文档根开始并向下传播到目标元素。此路径上任何祖先元素上的任何事件侦听器都将在目标元素的处理程序之前触发。但请注意，除非将 `addEventListener()` 的第三个参数设置为 `true`，否则事件捕获不会发生，如下所示（默认值为 `false`）。
+
+以下是使用现代 ES2015 语法的示例，用于演示事件捕获：
+
+```js
+// HTML:
+// <div id="parent">
+//   <button id="child">Click me!</button>
+// </div>
+
+const parent = document.getElementById('parent');
+const child = document.getElementById('child');
+
+parent.addEventListener(
+  'click',
+  () => {
+    console.log('Parent element clicked (capturing)');
+  },
+  true, // Set third argument to true for capturing
+);
+
+child.addEventListener('click', () => {
+  console.log('Child element clicked');
+});
+```
+
+当您单击“Click me!”按钮时，它将首先触发父元素的捕获处理程序，然后触发子元素的处理程序。
+
+## 停止传播
+
+可以使用 `stopPropagation()` 方法在捕获阶段停止事件传播。这可以防止事件进一步向下传递 DOM 树。
+
+```js
+// HTML:
+// <div id="parent">
+//   <button id="child">Click me!</button>
+// </div>
+
+const parent = document.getElementById('parent');
+const child = document.getElementById('child');
+
+parent.addEventListener(
+  'click',
+  (event) => {
+    console.log('Parent element clicked (capturing)');
+    event.stopPropagation(); // Stop event propagation
+  },
+  true,
+);
+
+child.addEventListener('click', () => {
+  console.log('Child element clicked');
+});
+```
+
+由于停止了事件传播，当您单击“Click Me!”按钮时，现在将仅调用 `parent` 事件侦听器，并且永远不会调用 `child` 事件侦听器，因为事件传播已在 `parent` 元素处停止。
+
+## 事件捕获的用途
+
+与事件冒泡相比，事件捕获很少使用，但它可以在特定情况下使用，例如需要在事件到达目标元素之前在高层拦截事件。
+
+* **阻止事件冒泡：** 想象一下，您有一个嵌套元素（如按钮）位于容器元素内。单击该按钮也可能触发容器上的单击事件。通过在容器的事件侦听器上启用事件捕获，您可以在那里捕获单击事件，并阻止其向下传播到按钮，从而可能导致意外行为。
+* **自定义下拉菜单：** 在构建自定义下拉菜单时，您可能希望捕获菜单元素之外的点击以关闭菜单。在 `document` 对象上使用 `capture: true` 允许您侦听页面上的任何位置的点击，并在点击发生在菜单边界之外时关闭菜单。
+* **在某些情况下提高效率：** 在某些情况下，事件捕获可能比依赖冒泡更有效。这是因为事件不需要在到达处理程序之前通过所有子元素传播。但是，对于大多数 Web 应用程序来说，性能差异通常可以忽略不计。
+
+## 延伸阅读
+
+* [事件捕获 | MDN](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events#event_capture)
+* [冒泡和捕获 | JavaScript.info](https://zh.javascript.info/bubbling-and-capturing)
+* [W3C DOM Level 3 事件规范](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)
diff --git a/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.langnostic.json b/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.langnostic.json
new file mode 100644
index 0000000..7e52c7e
--- /dev/null
+++ b/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.langnostic.json
@@ -0,0 +1,88 @@
+{
+  "frontmatter": {
+    "title": "cd74bf50"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "2133a8df",
+        "b3cb0b4e",
+        "67d43f33",
+        "d3702ac3",
+        "2a7816d0",
+        "42be5204",
+        "56f591d9",
+        "29d2bdb5",
+        "3e6fef3e",
+        "5775ff1b",
+        "8f3fb45c",
+        "63b5f704",
+        "6108b198",
+        "480fe8f4",
+        "bacd445e",
+        "b8c8cecb",
+        "58df7471",
+        "a8bf2799",
+        "2d2cfe6d",
+        "a812e0c",
+        "daa22c54",
+        "ecb36fec",
+        "722f87c0",
+        "dfbcf26f",
+        "247aee",
+        "bdc995c7",
+        "6f00d300",
+        "a69065a3",
+        "93d07e2c",
+        "1d856392",
+        "c5a208c4",
+        "add698fb",
+        "ae632d35",
+        "62fd75b6",
+        "599beffc"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "2133a8df",
+        "b3cb0b4e",
+        "67d43f33",
+        "d3702ac3",
+        "2a7816d0",
+        "42be5204",
+        "56f591d9",
+        "29d2bdb5",
+        "3e6fef3e",
+        "5775ff1b",
+        "8f3fb45c",
+        "63b5f704",
+        "6108b198",
+        "480fe8f4",
+        "bacd445e",
+        "b8c8cecb",
+        "58df7471",
+        "a8bf2799",
+        "2d2cfe6d",
+        "a812e0c",
+        "daa22c54",
+        "ecb36fec",
+        "722f87c0",
+        "dfbcf26f",
+        "247aee",
+        "bdc995c7",
+        "6f00d300",
+        "a69065a3",
+        "93d07e2c",
+        "1d856392",
+        "c5a208c4",
+        "add698fb",
+        "ae632d35",
+        "62fd75b6",
+        "599beffc"
+      ]
+    }
+  }
+}
diff --git a/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.mdx b/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.mdx
index 94b5c5a..47f6258 100644
--- a/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.mdx
+++ b/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.mdx
@@ -1,30 +1,146 @@
 ---
-title: 描述cookie、 `sessionStorage` 和 `localStorage` 之间的差异。
+title: 描述浏览器中 cookie、`sessionStorage` 和 `localStorage` 之间的区别
 ---
 
-LocalStorage 对于存储用户以后需要访问的数据很有用，例如离线数据，因为它把数据存储在浏览器和系统中。 即使用户关闭和重新打开浏览器，这些数据也将持续存在，并可被其他网站访问。
+## 总结
 
-SessionStorage 是提高你的 Web 应用程序性能的一个好方法。 它在浏览器上本地存储数据，但特定于（并且只能由）各自的网站/浏览器标签访问，并且只有当用户在网站/标签上时才能使用。 由于限制性的访问，这是一个更安全的存储方法，并且由于减少了服务器和客户端之间的数据传输，促进了更好的网站性能。
+以下都是在客户端（本例中为用户的浏览器）上存储数据的机制。`localStorage` 和 `sessionStorage` 都实现了 [Web Storage API 接口](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)。
 
-对于存储不应长期保存的数据，如会话 ID，Cookies 是一个不错的选择。 Cookies 允许你设置一个过期时间，届时它将被删除。 与其他两种存储方法相比，Cookies 只能是较小尺寸的数据。
+* **Cookies**：适用于服务器-客户端通信，存储容量小，可以是持久性的或基于会话的，特定于域。在每次请求时发送到服务器。
+* **`localStorage`**：适用于长期存储，即使在浏览器关闭后数据仍然存在，可在同一来源的所有选项卡和窗口中访问，在三者中存储容量最高。
+* **`sessionStorage`**：适用于单个页面会话中的临时数据，当选项卡或窗口关闭时数据将被清除，与 cookies 相比具有更高的存储容量。
 
-## 相似性
+以下表格总结了 3 种客户端存储机制。
 
-Cookies、`localStorage`和`sessionStorage`都是:
+| 属性 | Cookie | `localStorage` | `sessionStorage` |
+| --- | --- | --- | --- |
+| 发起者 | 客户端或服务器。服务器可以使用 `Set-Cookie` 标头 | 客户端 | 客户端 |
+| 寿命 | 如指定 | 直到删除 | 直到选项卡关闭 |
+| 是否跨浏览器会话持久 | 如果设置了未来的过期日期 | 是 | 否 |
+| 是否随每个 HTTP 请求发送到服务器 | 是，通过 `Cookie` 标头发送 | 否 | 否 |
+| 总容量（每个域） | 4kb | 5MB | 5MB |
+| 访问 | 跨窗口/选项卡 | 跨窗口/选项卡 | 相同选项卡 |
+| 安全性 | JavaScript 无法访问 `HttpOnly` cookies | 无 | 无 |
 
-- 客户端的存储机制。 这意味着客户端可以阅读和修改这些值。
-- 基于键值的存储。
-- 他们只能存储作为字符串的值。 对象必须序列化为字符串 (`JSON.stringify()`) 才能存储。
+***
 
-## 差异
+## Web 上的存储
 
-| 属性 | Cookie | `localStorage` | `sessionStorage` |
-| --- | --- | --- | --- |
-| 发起方 | 客户端或服务器。 服务器可以使用 `Set-Cookie` 头 | 客户端 | 客户端 |
-| 有效期 | 手动设置 | 永久 | 标签关闭时 |
-| 跨浏览器会话的持久性 | 取决于是否设置过期时间 | 是 | 否 |
-| 每次 HTTP 请求都发送到服务器 | Cookie 会自动通过 `Cookie` 头发送 | 否 | 否 |
-| 容量(每个域) | 4kb | 5MB | 5MB |
-| 访问权限 | 任何窗口 | 任何窗口 | 部分标签页 |
-
-还有其他客户端存储机制，如 [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/ADI/IndexedDB_API)，比上述技术更强大，但使用起来更复杂。
+Cookies、`localStorage` 和 `sessionStorage` 都是客户端（Web 浏览器）上的存储机制。在客户端存储数据对于仅客户端的状态很有用，例如访问令牌、主题、个性化布局，以便用户可以在跨选项卡和使用会话的网站上获得一致的体验。
+
+这些客户端存储机制具有以下常见属性：
+
+* 这意味着客户端可以读取和修改值（`HttpOnly` cookies 除外）。
+* 基于键值对的存储。
+* 它们只能将值存储为字符串。非字符串必须被序列化为字符串（例如 `JSON.stringify()`）才能被存储。
+
+### 每种存储机制的用例
+
+由于 cookies 的最大大小相对较小，因此不建议将所有客户端数据存储在 cookies 中。关于 cookies 的显著特性是 cookies 会在每个 HTTP 请求中发送到服务器，因此较小的最大大小是一个特性，可以防止您的 HTTP 请求由于 cookies 而变得过大。cookies 的自动过期也是一个有用的特性。
+
+考虑到这一点，最适合存储在 cookies 中的数据是需要传输到服务器的小块数据，例如身份验证令牌、会话 ID、分析跟踪 ID、GDPR cookie 同意、对身份验证、授权和在服务器上呈现很重要的语言偏好。这些值有时很敏感，并且可以从 cookies 提供的 `HttpOnly`、`Secure` 和 `Expires`/`Max-Age` 功能中受益。
+
+`localStorage` 和 `sessionStorage` 都实现了 [Web Storage API 接口](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API)。Web Storages 具有 5MB 的总容量，因此存储大小通常不是问题。关键的区别在于，存储在 Web Storage 中的值不会自动随 HTTP 请求一起发送。
+
+虽然您可以在发出 AJAX/`fetch()` 请求时手动包含来自 Web Storage 的值，但浏览器不会在页面的初始请求/首次加载中包含它们。因此，如果使用服务器端渲染（通常是与身份验证/授权相关的信息），则不应使用 Web Storage 来存储服务器用于页面初始渲染所依赖的数据。`localStorage` 最适合不失效的用户偏好数据，例如主题和布局（如果服务器渲染最终布局并不重要）。`sessionStorage` 最适合只需要在当前浏览会话中访问的临时数据，例如表单数据（用于在意外重新加载期间保留数据）。
+
+以下部分深入探讨了每种客户端存储机制。
+
+### Cookies
+
+Cookies 用于在客户端存储小块数据，这些数据可以通过每个 HTTP 请求发送回服务器。
+
+* **存储容量**：所有 cookies 限制在 4KB 左右。
+* **寿命**：Cookies 可以使用 `Expires` 或 `Max-Age` 属性设置特定的过期日期。如果未设置过期日期，则在浏览器关闭时删除 cookie（会话 cookie）。
+* **访问**：Cookies 是特定于域的，可以在同一域内的不同页面和子域之间共享。
+* **安全性**：Cookies 可以标记为 `HttpOnly` 以防止从 JavaScript 访问，从而降低 XSS 攻击的风险。它们也可以使用 `Secure` 标志进行保护，以确保仅在使用 HTTPS 时发送它们。
+
+```js
+// Set a cookie for the name/key `auth_token` with an expiry.
+document.cookie =
+  'auth_token=abc123def; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/';
+
+// Read all cookies. There's no way to read specific cookies using `document.cookie`.
+// You have to parse the string yourself.
+console.log(document.cookie); // auth_token=abc123def
+
+// Delete the cookie with the name/key `auth_token` by setting an
+// expiry date in the past. The value doesn't matter.
+document.cookie = 'auth_token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
+```
+
+读取/写入 Cookie 是一件很痛苦的事情。`document.cookie` 返回一个包含所有由 `;` 分隔的键/值对的字符串，您必须自己解析该字符串。[`js-cookie`](https://github.com/js-cookie/js-cookie) npm 库提供了一个简单轻量级的 API，用于在 JavaScript 中读写 Cookie。
+
+访问 Cookie 的现代原生方式是通过 [Cookie Store API](https://developer.mozilla.org/en-US/docs/Web/API/Cookie_Store_API)，该 API 仅在 HTTPS 页面上可用。
+
+```js
+// Set a cookie. More options are available too.
+cookieStore.set('auth_token', 'abc123def');
+
+// Async method to access a single cookie and do something with it.
+cookieStore.get('auth_token').then(...);
+
+// Async method to get all cookies.
+cookieStore.getAll().then(...);
+
+// Async method to delete a single cookie.
+cookieStore.delete('auth_token').then(() =>
+  console.log('Cookie deleted')
+);
+```
+
+CookieStore API 相对较新，可能并非所有浏览器都支持（截至 2024 年 6 月，在最新的 Chrome 和 Edge 中受支持）。请参阅 [caniuse.com](https://caniuse.com/mdn-api_cookiestore) 以获取最新的兼容性信息。
+
+### `localStorage`
+
+`localStorage` 用于存储即使在浏览器关闭并重新打开后仍保留的数据。它专为长期存储数据而设计。
+
+* **存储容量**：通常每个来源约 5MB（因浏览器而异）。
+* **生命周期**：`localStorage` 中的数据会一直存在，直到用户或应用程序显式删除。
+* **访问**：数据可在同一来源的所有选项卡和窗口中访问。
+* **安全性**：页面上的所有 JavaScript 都可以访问 `localStorage` 中的值。
+
+```js
+// Set a value in localStorage.
+localStorage.setItem('key', 'value');
+
+// Get a value from localStorage.
+console.log(localStorage.getItem('key'));
+
+// Remove a value from localStorage.
+localStorage.removeItem('key');
+
+// Clear all data in localStorage.
+localStorage.clear();
+```
+
+### `sessionStorage`
+
+`sessionStorage` 用于存储页面会话期间的数据。它专为临时存储数据而设计。
+
+* **存储容量**：通常每个来源约 5MB（因浏览器而异）。
+* **生命周期**：当页面会话结束时（即，当浏览器或选项卡关闭时），`sessionStorage` 中的数据将被清除。重新加载页面不会销毁 `sessionStorage` 中的数据。
+* **访问**：数据仅在当前选项卡或窗口中可访问。具有相同页面的不同选项卡或窗口将具有不同的 `sessionStorage` 对象。
+* **安全性**：同一页面上的所有 JavaScript 都可以访问该页面 `sessionStorage` 中的值。
+
+```js
+// Set a value in sessionStorage.
+sessionStorage.setItem('key', 'value');
+
+// Get a value from sessionStorage.
+console.log(sessionStorage.getItem('key'));
+
+// Remove a value from sessionStorage.
+sessionStorage.removeItem('key');
+
+// Clear all data in sessionStorage.
+sessionStorage.clear();
+```
+
+## 注意事项
+
+还有其他客户端存储机制，例如 [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)，它比上述技术更强大，但使用起来更复杂。
+
+## 参考
+
+* [localStorage、sessionStorage、session 和 cookie 之间有什么区别？](https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies)
diff --git a/questions/describe-the-difference-between-script-async-and-script-defer/en-US.langnostic.json b/questions/describe-the-difference-between-script-async-and-script-defer/en-US.langnostic.json
new file mode 100644
index 0000000..98b356b
--- /dev/null
+++ b/questions/describe-the-difference-between-script-async-and-script-defer/en-US.langnostic.json
@@ -0,0 +1,68 @@
+{
+  "frontmatter": {
+    "title": "d7ae8e9e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "f015f69a",
+        "c770ec40",
+        "9267a3a",
+        "15376261",
+        "2a7816d0",
+        "3dab564a",
+        "b62205e7",
+        "35bc0a6e",
+        "4bb1139c",
+        "c697e0a0",
+        "1135cb8e",
+        "43aae7f3",
+        "25fe358b",
+        "9413283",
+        "ecb7916f",
+        "a40917e4",
+        "bcdaddfc",
+        "8762e9b8",
+        "54597c7c",
+        "96e9e665",
+        "add698fb",
+        "43628d33",
+        "acc96ff7",
+        "1f4770e5",
+        "956d9bb9"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "f015f69a",
+        "c770ec40",
+        "9267a3a",
+        "15376261",
+        "2a7816d0",
+        "3dab564a",
+        "b62205e7",
+        "35bc0a6e",
+        "4bb1139c",
+        "c697e0a0",
+        "1135cb8e",
+        "43aae7f3",
+        "25fe358b",
+        "9413283",
+        "ecb7916f",
+        "a40917e4",
+        "bcdaddfc",
+        "8762e9b8",
+        "54597c7c",
+        "96e9e665",
+        "add698fb",
+        "43628d33",
+        "acc96ff7",
+        "1f4770e5",
+        "956d9bb9"
+      ]
+    }
+  }
+}
diff --git a/questions/describe-the-difference-between-script-async-and-script-defer/zh-CN.mdx b/questions/describe-the-difference-between-script-async-and-script-defer/zh-CN.mdx
index 244e329..cdc1c2a 100644
--- a/questions/describe-the-difference-between-script-async-and-script-defer/zh-CN.mdx
+++ b/questions/describe-the-difference-between-script-async-and-script-defer/zh-CN.mdx
@@ -1,30 +1,121 @@
 ---
-title: 描述`<script>`、`<script async>`和`<script defer> `之间的差异
+title: 描述 `<script>`、`<script async>` 和 `<script defer>` 之间的区别
 ---
 
-`<script>` 标签用于在网页上包含 JavaScript 。 `async` 和 `defer` 属性用于更改脚本加载和执行的方式/时机。
+## TL;DR
 
-## 普通`<script>`
+所有这些方式（`<script>`、`<script async>` 和 `<script defer>`）都用于在 HTML 文档中加载和执行 JavaScript 文件，但它们在浏览器处理脚本的加载和执行方式上有所不同：
 
-对于普通的 `<script>` 标签，在遇到它们时没有任何`async` 或 `defer`。 HTML 解析被阻止，脚本会被下载并立即执行。 脚本执行后 HTML 解析恢复。
+* `<script>` 是包含 JavaScript 的默认方式。浏览器在下载和执行脚本时会阻止 HTML 解析。在脚本执行完毕之前，浏览器不会继续渲染页面。
+* `<script async>` 异步下载脚本，与解析 HTML 并行。在脚本可用后立即执行脚本，可能会中断 HTML 解析。`<script async>` 之间不会互相等待，并且以不特定的顺序执行。
+* `<script defer>` 异步下载脚本，与解析 HTML 并行。但是，脚本的执行被推迟到 HTML 解析完成后，按照它们在 HTML 中出现的顺序。
+
+这是一个表格，总结了在 HTML 文档中加载 `<script>` 的 3 种方式。
+
+| 特性 | `<script>` | `<script async>` | `<script defer>` |
+| --- | --- | --- | --- |
+| 解析行为 | 阻止 HTML 解析 | 与解析并行运行 | 与解析并行运行 |
+| 执行顺序 | 按照出现顺序 | 不保证 | 按照出现顺序 |
+| DOM 依赖 | 否 | 否 | 是（等待 DOM） |
+
+***
+
+## `<script>` 标签的用途
+
+`<script>` 标签用于在网页中包含 JavaScript。`async` 和 `defer` 属性用于更改脚本的加载和执行方式/时间。
+
+## `<script>`
+
+对于没有任何 `async` 或 `defer` 的普通 `<script>` 标签，当遇到它们时，HTML 解析会被阻止，脚本会被立即获取和执行。HTML 解析在脚本执行完毕后恢复。如果脚本很大，这可能会阻止页面的渲染。
+
+将 `<script>` 用于页面依赖于正确渲染的关键脚本。
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <title>Regular Script</title>
+  </head>
+  <body>
+    <!-- Content before the script -->
+    <h1>Regular Script Example</h1>
+    <p>This content will be rendered before the script executes.</p>
+
+    <!-- Regular script -->
+    <script src="regular.js"></script>
+
+    <!-- Content after the script -->
+    <p>This content will be rendered after the script executes.</p>
+  </body>
+</html>
+```
+
+{/* TODO: Add CSB examples for blocking scripts */}
 
 ## `<script async>`
 
-在`<script async>`中，脚本将与 HTML 解析并行获取，并在其可用时立即执行（可能在 HTML 解析完成之前），而且不一定按照 HTML 文档中的顺序执行。 当脚本独立于页面上的任何其他脚本时使用 `async` ，比如分析。
+在 `<script async>` 中，浏览器异步下载脚本文件（与 HTML 解析并行），并在脚本可用后立即执行（可能在 HTML 解析完成之前）。执行不一定按照它在 HTML 文档中出现的顺序执行。这可以提高感知的性能，因为浏览器在继续渲染页面之前不必等待脚本下载。
+
+当脚本独立于页面上的任何其他脚本时，使用 `<script async>`，例如分析和广告脚本。
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <title>Async Script</title>
+  </head>
+  <body>
+    <!-- Content before the script -->
+    <h1>Async Script Example</h1>
+    <p>This content will be rendered before the async script executes.</p>
+
+    <!-- Async script -->
+    <script async src="async.js"></script>
+
+    <!-- Content after the script -->
+    <p>
+      This content may be rendered before or after the async script executes.
+    </p>
+  </body>
+</html>
+```
 
 ## `<script defer>`
 
-在`<script defer>`, 脚本将在文档已完全解析并执行时并行获取到 HTML 解析和执行， 但在 `DOMContentLoaded` 事件之前。 如果其中有多个，每个 defer 脚本都是按照它们在 HTML 文档中出现的顺序执行的。
+与 `<script async>` 类似，`<script defer>` 也会与 HTML 解析并行下载脚本，但脚本仅在文档被完全解析并且在触发 `DOMContentLoaded` 之前执行。如果有多个，则每个延迟脚本按照它们在 HTML 文档中出现的顺序执行。
+
+如果脚本依赖于完全解析的 DOM，则 `defer` 属性将有助于确保在执行之前完全解析 HTML。
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <title>Deferred Script</title>
+  </head>
+  <body>
+    <!-- Content before the script -->
+    <h1>Deferred Script Example</h1>
+    <p>This content will be rendered before the deferred script executes.</p>
+
+    <!-- Deferred script -->
+    <script defer src="deferred.js"></script>
+
+    <!-- Content after the script -->
+    <p>This content will be rendered before the deferred script executes.</p>
+  </body>
+</html>
+```
 
-如果脚本依赖于完全解析的 DOM，则`defer` 属性将有助于确保在执行前完全解析 HTML。
+## 注意事项
 
-## 备注
+* `async` 属性应用于对页面初始渲染不关键且彼此不依赖的脚本，而 `defer` 属性应用于依赖于/被另一个脚本依赖的脚本。
+* 对于没有 `src` 属性的脚本，将忽略 `async` 和 `defer` 属性。
+* 包含 `document.write()` 的带有 `defer` 或 `async` 的 `<script>` 将被忽略，并显示类似“从异步加载的外部脚本对 `document.write()` 的调用被忽略”的消息。
+* 即使 `async` 和 `defer` 有助于使脚本下载异步，但脚本最终仍在主线程上执行。如果这些脚本是计算密集型的，则可能导致 UI 滞后/冻结。[Partytown](https://partytown.builder.io/) 是一个库，它有助于将脚本执行重新定位到 [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) 并从 [主线程](https://developer.mozilla.org/en-US/docs/Glossary/Main_thread) 中移出，这对于您无法控制代码的第三方脚本非常有用。
 
-- 一般说来， `async` 属性应该用于对页面初始化不重要且不依赖于对方的脚本。 `defer` 属性应该用于依赖于/被依赖于其他脚本的脚本。
-- 没有`src`属性的脚本， `async` 和 `deleger` 属性会被忽略。
-- 包含`defer'或`async'的`<script>`将被忽略，并显示 "来自异步加载的外部脚本对 document.write()的调用被忽略 "的信息。
+{/* TODO: Add image https://media.licdn.com/dms/image/D5612AQEYCnsZ1f9GFQ/article-cover_image-shrink_600_2000/0/1699370054733?e=2147483647&v=beta&t=MeKuUXk5QMblVoausf5p3swTkBCICOHoRsijQqMfxZE */}
 
-## 参考资料
+## 延伸阅读
 
-- [`<script>`: 脚本元素 | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)
-- [async vs defer 属性](https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)
+* [`<script>`: The Script element | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)
+* [async vs defer attributes](https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)
diff --git a/questions/difference-between-document-load-event-and-document-domcontentloaded-event/en-US.langnostic.json b/questions/difference-between-document-load-event-and-document-domcontentloaded-event/en-US.langnostic.json
new file mode 100644
index 0000000..8ad0c73
--- /dev/null
+++ b/questions/difference-between-document-load-event-and-document-domcontentloaded-event/en-US.langnostic.json
@@ -0,0 +1,46 @@
+{
+  "frontmatter": {
+    "title": "81ee2f0a"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "cc68c002",
+        "a62a2a23",
+        "2a7816d0",
+        "55364efe",
+        "f4edb19c",
+        "e14328af",
+        "c610f08",
+        "1a0691e8",
+        "c345447a",
+        "c0525804",
+        "67423e0a",
+        "f3f1deb7",
+        "1f4770e5",
+        "d3ff56e2"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "cc68c002",
+        "a62a2a23",
+        "2a7816d0",
+        "55364efe",
+        "f4edb19c",
+        "e14328af",
+        "c610f08",
+        "1a0691e8",
+        "c345447a",
+        "c0525804",
+        "67423e0a",
+        "f3f1deb7",
+        "1f4770e5",
+        "d3ff56e2"
+      ]
+    }
+  }
+}
diff --git a/questions/difference-between-document-load-event-and-document-domcontentloaded-event/zh-CN.mdx b/questions/difference-between-document-load-event-and-document-domcontentloaded-event/zh-CN.mdx
index 8efd5b6..649e4c7 100644
--- a/questions/difference-between-document-load-event-and-document-domcontentloaded-event/zh-CN.mdx
+++ b/questions/difference-between-document-load-event-and-document-domcontentloaded-event/zh-CN.mdx
@@ -1,7 +1,52 @@
 ---
-title: Document `load` 事件和 `DOMContentLoaded` 事件之间的区别？
+title: document `load` 事件和 document `DOMContentLoaded` 事件的区别？
 ---
 
-当初始的 HTML 文档被完全加载并解析时，`DOMContentLoaded` 事件将被触发。 无需等待样式表、图片和子帧来完成加载。
+## TL;DR
 
-`window` 上的 `load` 事件只在 DOM 和所有依赖的资源和资产加载后才能触发。
+`DOMContentLoaded` 事件在初始 HTML 文档完全加载和解析后触发，而无需等待样式表、图像和子框架完成加载。另一方面，`load` 事件在整个页面（包括所有依赖资源，如样式表和图像）完成加载后触发。
+
+```javascript
+document.addEventListener('DOMContentLoaded', function () {
+  console.log('DOM fully loaded and parsed');
+});
+
+window.addEventListener('load', function () {
+  console.log('Page fully loaded');
+});
+```
+
+***
+
+## document `load` 事件和 document `DOMContentLoaded` 事件的区别
+
+### `DOMContentLoaded` 事件
+
+`DOMContentLoaded` 事件在初始 HTML 文档完全加载和解析后触发，而无需等待样式表、图像和子框架完成加载。当您希望在 DOM 准备就绪后立即执行 JavaScript 代码，而无需等待所有资源完全加载时，此事件非常有用。
+
+```javascript
+document.addEventListener('DOMContentLoaded', function () {
+  console.log('DOM fully loaded and parsed');
+});
+```
+
+### `load` 事件
+
+`load` 事件在整个页面（包括所有依赖资源，如样式表、图像和子框架）完成加载后触发。当您需要执行需要所有资源完全加载的操作时，此事件非常有用，例如初始化幻灯片或执行依赖于图像大小的布局计算。
+
+```javascript
+window.addEventListener('load', function () {
+  console.log('Page fully loaded');
+});
+```
+
+### 关键区别
+
+*   **时序**：`DOMContentLoaded` 比 `load` 提前触发。`DOMContentLoaded` 在 HTML 完全解析后发生，而 `load` 等待所有资源加载完毕。
+*   **用例**：将 `DOMContentLoaded` 用于仅需要 DOM 就绪的任务，例如附加事件侦听器或操作 DOM。将 `load` 用于依赖所有资源完全加载的任务，例如依赖于图像的布局计算。
+
+## 延伸阅读
+
+*   [MDN Web Docs: DOMContentLoaded](https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event)
+*   [MDN Web Docs: load event](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event)
+*   [JavaScript.info: DOMContentLoaded, load, beforeunload, unload](https://javascript.info/onload-ondomcontentloaded)
diff --git a/questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.langnostic.json b/questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.langnostic.json
new file mode 100644
index 0000000..83a1187
--- /dev/null
+++ b/questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.langnostic.json
@@ -0,0 +1,56 @@
+{
+  "frontmatter": {
+    "title": "a53864cf"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "d37f9ad6",
+        "bdd1f71e",
+        "2a7816d0",
+        "244434dd",
+        "954b69a7",
+        "cca5f117",
+        "83de2a2f",
+        "8675603b",
+        "45c8e75a",
+        "da77f48f",
+        "eb511457",
+        "738d0f97",
+        "484f0af9",
+        "13aa5e50",
+        "30c4051a",
+        "ebd53803",
+        "45e20bd0",
+        "1f4770e5",
+        "178428f1"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "d37f9ad6",
+        "bdd1f71e",
+        "2a7816d0",
+        "244434dd",
+        "954b69a7",
+        "cca5f117",
+        "83de2a2f",
+        "8675603b",
+        "45c8e75a",
+        "da77f48f",
+        "eb511457",
+        "738d0f97",
+        "484f0af9",
+        "13aa5e50",
+        "30c4051a",
+        "ebd53803",
+        "45e20bd0",
+        "1f4770e5",
+        "178428f1"
+      ]
+    }
+  }
+}
diff --git a/questions/difference-between-function-person-var-person-person-and-var-person-new-person/zh-CN.mdx b/questions/difference-between-function-person-var-person-person-and-var-person-new-person/zh-CN.mdx
index 567fcc3..b21c6ff 100644
--- a/questions/difference-between-function-person-var-person-person-and-var-person-new-person/zh-CN.mdx
+++ b/questions/difference-between-function-person-var-person-person-and-var-person-new-person/zh-CN.mdx
@@ -1,23 +1,81 @@
 ---
-title: '比较差异: `function Person(){}`, `var person = Person()`, 和 `var person = new Person()`?'
+title: >-
+  JavaScript 中：`function Person(){}`、`const person = Person()` 和 `const person =
+  new Person()` 的区别？
 ---
 
-这个问题相当含糊。 我们对其意图的最好猜测是，它在询问 JavaScript 中的构造函数。 从技术上讲，`function Person(){}` 只是一个正常函数声明。 惯例是对打算作为构造函数使用的函数使用 PascalCase。
+## TL;DR
 
-`var persons = Person()` 将`Person` 作为函数，而不是作为构造函数。 如果要将函数用作构造函数，这样的动作是常见的错误。 构造函数通常不会返回任何东西。 因此，调用构造函数像一个正常函数会返回 `undefined` ，它会被分配给指定为实例的变量。
+* `function Person(){}`：JavaScript 中的函数声明。它可以作为常规函数或构造函数使用。
+* `const person = Person()`：将 `Person` 作为常规函数调用，而不是构造函数。如果 `Person` 旨在用作构造函数，这将导致意外行为。
+* `const person = new Person()`：创建 `Person` 的新实例，正确利用构造函数来初始化新对象。
 
-`var persone = new Person()` 创建一个 `Person` 对象的实例，使用`new` 操作符继承了 `Person.prototype`。 另一种办法是使用 `Object.create`，例如：`Object.create(Person.prototype)`。
+| 方面 | `function Person(){}` | `const person = Person()` | `const person = new Person()` |
+| --- | --- | --- | --- |
+| 类型 | 函数声明 | 函数调用 | 构造函数调用 |
+| 用法 | 定义一个函数 | 将 `Person` 作为常规函数调用 | 创建 `Person` 的新实例 |
+| 实例创建 | 未创建实例 | 未创建实例 | 创建新实例 |
+| 常见错误 | N/A | 误用作构造函数，导致 `undefined` | 无（正确使用时） |
+
+***
+
+## 函数声明
+
+`function Person(){}` 是 JavaScript 中的标准函数声明。当用 PascalCase 编写时，它遵循旨在用作构造函数的函数的约定。
 
 ```js
 function Person(name) {
   this.name = name;
 }
+```
+
+此代码定义了一个名为 `Person` 的函数，该函数接受一个参数 `name` 并将其分配给从此构造函数创建的对象的 `name` 属性。当在构造函数中使用 `this` 关键字时，它指的是新创建的对象。
+
+## 函数调用
+
+`const person = Person()` 只是调用该函数的代码。当您将 `Person` 作为常规函数调用（即，不使用 `new` 关键字）时，该函数的行为不像构造函数。相反，它执行其代码，如果未指定返回值，则返回 `undefined`，并将其分配给作为实例的变量。如果该函数旨在用作构造函数，则这样调用是一个常见的错误。
 
-var person = Person('John');
+```js live
+function Person(name) {
+  this.name = name;
+}
+
+const person = Person('John'); // Throws error in strict mode
 console.log(person); // undefined
 console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined
+```
+
+在这种情况下，`Person('John')` 不会创建新对象。`person` 变量被赋值为 `undefined`，因为 `Person` 函数没有显式返回值。尝试访问 `person.name` 会抛出错误，因为 `person` 是 `undefined`。
 
-var person = new Person('John');
-console.log(person); // Person { name: "John" }
-console.log(person.name); // "john"
+## 构造函数调用
+
+`const person = new Person()` 使用 new 运算符创建 `Person` 对象的实例，该实例继承自 `Person.prototype`。另一种方法是使用 `Object.create`，例如：`Object.create(Person.prototype)` 和 `Person.call(person, 'John')` 初始化对象。
+
+```js live
+function Person(name) {
+  this.name = name;
+}
+
+const person = new Person('John');
+console.log(person); // Person { name: 'John' }
+console.log(person.name); // 'John'
+
+// Alternative
+const person1 = Object.create(Person.prototype);
+Person.call(person1, 'John');
+console.log(person1); // Person { name: 'John' }
+console.log(person1.name); // 'John'
 ```
+
+在这种情况下，`new Person('John')` 创建一个新对象，`Person` 中的 `this` 指的是这个新对象。`name` 属性在新对象上被正确设置。`person` 变量被分配了 `Person` 的新实例，其 name 属性设置为 `'John'`。对于备用对象创建，`Object.create(Person.prototype)` 创建一个新对象，并将 `Person.prototype` 作为其原型。`Person.call(person, 'John')` 初始化对象，设置 `name` 属性。
+
+## 后续问题
+
+* 函数构造函数和 ES6 类语法之间有什么区别？
+* `Object.create` 的一些常见用例是什么？
+
+## 延伸阅读
+
+* [MDN Web Docs: Object prototypes](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object_prototypes)
+* [Differences between Class and Function Constructors](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors?fpr=yangshun)
+* [How `this` keyword works in JavaScript?](https://www.greatfrontend.com/questions/quiz/explain-how-this-works-in-javascript?fpr=yangshun)
diff --git a/questions/explain-ajax-in-as-much-detail-as-possible/en-US.langnostic.json b/questions/explain-ajax-in-as-much-detail-as-possible/en-US.langnostic.json
new file mode 100644
index 0000000..cac9ffd
--- /dev/null
+++ b/questions/explain-ajax-in-as-much-detail-as-possible/en-US.langnostic.json
@@ -0,0 +1,66 @@
+{
+  "frontmatter": {
+    "title": "74a06a67"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "bf25ddb3",
+        "b76581cf",
+        "933366c8",
+        "792ac232",
+        "997ac64a",
+        "2a7816d0",
+        "cf7256bd",
+        "4911af41",
+        "43a448f1",
+        "74d90ce3",
+        "99d92485",
+        "933366c8",
+        "bf05c67b",
+        "67f1451",
+        "7923e2bf",
+        "997ac64a",
+        "5f9a1465",
+        "947370d5",
+        "f4042834",
+        "e5866039",
+        "6b08567a",
+        "67f96ccc",
+        "1f4770e5",
+        "1365d419"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "bf25ddb3",
+        "b76581cf",
+        "933366c8",
+        "792ac232",
+        "997ac64a",
+        "2a7816d0",
+        "cf7256bd",
+        "4911af41",
+        "43a448f1",
+        "74d90ce3",
+        "99d92485",
+        "933366c8",
+        "bf05c67b",
+        "67f1451",
+        "7923e2bf",
+        "997ac64a",
+        "5f9a1465",
+        "947370d5",
+        "f4042834",
+        "e5866039",
+        "6b08567a",
+        "67f96ccc",
+        "1f4770e5",
+        "1365d419"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-ajax-in-as-much-detail-as-possible/zh-CN.mdx b/questions/explain-ajax-in-as-much-detail-as-possible/zh-CN.mdx
index 326843f..9388b17 100644
--- a/questions/explain-ajax-in-as-much-detail-as-possible/zh-CN.mdx
+++ b/questions/explain-ajax-in-as-much-detail-as-possible/zh-CN.mdx
@@ -1,7 +1,127 @@
 ---
-title: 尽可能详细地解释Ajax
+title: 尽可能详细地解释 AJAX
 ---
 
-Ajax (异步 JavaScript 和 XML) 是一套网络开发技术，在客户端使用许多网络技术创建异步 Web 应用程序。 使用 Ajax， Web 应用程序可以将数据异步地发送到服务器（后端）并从服务器上检索，而不干扰现有页面的显示和行为。 通过将数据交换层与表现层解耦，Ajax 允许网页，以及扩展的 Web 应用程序，动态地改变内容，而不需要重新加载整个页面。 实际上，现代实现通常使用 JSON 而不是 XML，因为 JSON 是 JavaScript 的原生优势。
+## TL;DR
 
-`XMLHttpRequest` API 或如今的 `fetch()` API 经常用于异步通信。
+AJAX（异步 JavaScript 和 XML）促进客户端和服务器之间的异步通信，无需重新加载即可实现对网页的动态更新。它使用 `XMLHttpRequest` 或 `fetch()` API 等技术在后台发送和接收数据。在现代 Web 应用程序中，`fetch()` API 更常用于实现 AJAX。
+
+**使用 `XMLHttpRequest`**
+
+```js live
+let xhr = new XMLHttpRequest();
+xhr.onreadystatechange = function () {
+  if (xhr.readyState === XMLHttpRequest.DONE) {
+    if (xhr.status === 200) {
+      console.log(xhr.responseText);
+    } else {
+      console.error('Request failed: ' + xhr.status);
+    }
+  }
+};
+xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
+xhr.send();
+```
+
+**使用 `fetch()`**
+
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  })
+  .then((data) => console.log(data))
+  .catch((error) => console.error('Fetch error:', error));
+```
+
+***
+
+## AJAX（异步 JavaScript 和 XML）
+
+AJAX（异步 JavaScript 和 XML）是一组 Web 开发技术，在客户端使用许多 Web 技术来创建异步 Web 应用程序。与每次用户交互都会触发完全页面重新加载的传统 Web 应用程序不同，使用 AJAX，Web 应用程序可以异步地（在后台）向服务器发送数据并从服务器检索数据，而不会干扰现有页面的显示和行为。通过将数据交换层与表示层分离，AJAX 允许网页（以及扩展的 Web 应用程序）动态更改内容，而无需重新加载整个页面。实际上，由于 JSON 具有 JavaScript 原生的优势，现代实现通常使用 JSON 而不是 XML。
+
+传统上，AJAX 是使用 `XMLHttpRequest` API 实现的，但 `fetch()` API 更适合现代 Web 应用程序，也更容易使用。
+
+## `XMLHttpRequest` API
+
+以下是其使用方式的一个基本示例：
+
+```js live
+let xhr = new XMLHttpRequest();
+xhr.onreadystatechange = function () {
+  if (xhr.readyState === XMLHttpRequest.DONE) {
+    if (xhr.status === 200) {
+      console.log(xhr.responseText);
+    } else {
+      console.error('Request failed: ' + xhr.status);
+    }
+  }
+};
+xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
+xhr.send();
+```
+
+## `fetch()` API
+
+或者，`fetch()` API 提供了一种基于 Promise 的现代方法来发出 AJAX 请求。它在现代 Web 应用程序中更常用。
+
+以下是如何使用它：
+
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  })
+  .then((data) => console.log(data))
+  .catch((error) => console.error('Fetch error:', error));
+```
+
+## AJAX 如何工作？
+
+在现代浏览器中，AJAX 使用 `fetch()` API 而不是 `XMLHTTPRequest` 完成，因此我们将解释 `fetch()` API 的工作原理：
+
+1. **发出请求**：[`fetch()` 函数](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)启动异步请求，从 URL 获取资源。它接受一个强制性参数——要获取的资源的 URL，并可以选择接受第二个参数——一个 `options` 对象，该对象允许使用 HTTP 方法、标头、正文等选项配置 HTTP 请求。
+
+   ```js
+   fetch('https://api.example.com/data', {
+     method: 'GET', // or 'POST', 'PUT', 'DELETE', etc.
+     headers: {
+       'Content-Type': 'application/json',
+     },
+   });
+   ```
+
+2. **返回一个 promise**：`fetch()` 函数返回一个 `Promise`，该 `Promise` 解析为表示来自服务器的响应的 [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) 对象。此 `Promise` 需要使用 `.then()` 或 `async/await` 进行处理。
+
+3. **处理响应**：`Response` 对象提供定义如何处理正文内容的方法，例如 `.json()` 用于解析 JSON 数据，`.text()` 用于纯文本，`.blob()` 用于二进制数据等。
+
+   ```js live
+   fetch('https://jsonplaceholder.typicode.com/todos/1')
+     .then((response) => response.json())
+     .then((data) => console.log(data))
+     .catch((error) => console.error('Error:', error));
+   ```
+
+4. **异步性质** `fetch` API 是异步的，允许浏览器在等待服务器响应时继续执行其他任务。这可以防止阻塞主线程并提供更好的用户体验。当作为[事件循环](/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue)的一部分执行时，`then()` 和 `catch()` 回调被放入微任务队列中。
+
+5. **请求选项** `fetch()` 的可选第二个参数允许配置请求的各个方面，例如 HTTP 方法、标头、正文、凭据、缓存行为等。
+
+6. **错误处理** 请求期间的错误（例如网络故障或无效响应）通过使用 `.catch()` 方法或带有 `async/await` 的 try/catch 块在 Promise 链中捕获并传播。
+
+`fetch()` API 提供了一种基于 Promise 的现代方法，用于在 JavaScript 中发出 HTTP 请求，取代了旧的 `XMLHttpRequest` API。它提供了一种更简单、更灵活的方式来与 API 交互并从服务器获取资源，同时集成了 CORS 等高级 HTTP 概念和其他扩展。
+
+## AJAX 的优缺点
+
+虽然 AJAX 很有用，但使用它也有一些需要考虑的地方。阅读更多关于 [AJAX 的优缺点](/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax)。
+
+## 延伸阅读
+
+* [AJAX | MDN](https://developer.mozilla.org/en-US/docs/Glossary/AJAX)
+* [Fetch API | MDN ](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+* [XMLHttpRequest | MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
diff --git a/questions/explain-event-delegation/en-US.langnostic.json b/questions/explain-event-delegation/en-US.langnostic.json
new file mode 100644
index 0000000..825258f
--- /dev/null
+++ b/questions/explain-event-delegation/en-US.langnostic.json
@@ -0,0 +1,84 @@
+{
+  "frontmatter": {
+    "title": "36f29cf7"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "6d7004ca",
+        "33a79d62",
+        "9705614a",
+        "51d92a31",
+        "70951c03",
+        "2a7816d0",
+        "3818abba",
+        "c1c1be40",
+        "7c9a41b0",
+        "823e3d15",
+        "c60d6309",
+        "485a1648",
+        "1d712abb",
+        "3e16f4d8",
+        "7c299c53",
+        "f4fb21ad",
+        "c81ac723",
+        "9091bb3f",
+        "fb27e876",
+        "a27219d8",
+        "d97425a1",
+        "b5905a85",
+        "4688282c",
+        "1c737627",
+        "68b07c90",
+        "cd5dd65b",
+        "b8ab38ac",
+        "dc2a84da",
+        "fe9b15aa",
+        "2670c799",
+        "c7a88171",
+        "1f4770e5",
+        "fb9ea696"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "6d7004ca",
+        "33a79d62",
+        "9705614a",
+        "51d92a31",
+        "70951c03",
+        "2a7816d0",
+        "3818abba",
+        "c1c1be40",
+        "7c9a41b0",
+        "823e3d15",
+        "c60d6309",
+        "485a1648",
+        "1d712abb",
+        "3e16f4d8",
+        "7c299c53",
+        "f4fb21ad",
+        "c81ac723",
+        "9091bb3f",
+        "fb27e876",
+        "a27219d8",
+        "d97425a1",
+        "b5905a85",
+        "4688282c",
+        "1c737627",
+        "68b07c90",
+        "cd5dd65b",
+        "b8ab38ac",
+        "dc2a84da",
+        "fe9b15aa",
+        "2670c799",
+        "c7a88171",
+        "1f4770e5",
+        "fb9ea696"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-event-delegation/zh-CN.mdx b/questions/explain-event-delegation/zh-CN.mdx
index f8f9595..e70ed03 100644
--- a/questions/explain-event-delegation/zh-CN.mdx
+++ b/questions/explain-event-delegation/zh-CN.mdx
@@ -1,53 +1,133 @@
 ---
-title: 解释事件委托
+title: 解释 JavaScript 中的事件委托
 ---
 
-事件委托是 JavaScript 中的一种设计模式，用于通过将单个事件监听器附加到共同的祖先元素，高效地管理和处理多个子元素上的事件。这个模式在你有大量类似元素（例如列表项）并希望简化事件处理的情况下尤为有价值。
+## TL;DR
+
+事件委托是 JavaScript 中的一种技术，它将单个事件监听器附加到父元素，而不是将事件监听器附加到多个子元素。当子元素上发生事件时，该事件会冒泡到 DOM 树中，父元素的事件监听器会根据目标元素处理该事件。
+
+事件委托具有以下优点：
+
+* **提高性能**：附加单个事件监听器比将多个事件监听器附加到各个元素更有效，尤其是在处理大型或动态列表时。这减少了内存使用并提高了整体性能。
+* **简化事件处理**：使用事件委托，您只需要在父元素的事件监听器中编写一次事件处理逻辑。这使得代码更易于维护和更新。
+* **动态元素支持**：事件委托会自动处理父元素中动态添加或删除元素的事件。当 DOM 结构发生变化时，无需手动附加或删除事件监听器
+
+但是，请注意：
+
+* 确定触发事件的目标元素非常重要。
+* 并非所有事件都可以被委托，因为它们不会冒泡。不冒泡的事件包括：`focus`、`blur`、`scroll`、`mouseenter`、`mouseleave`、`resize` 等。
+
+***
+
+## 事件委托
+
+事件委托是 JavaScript 中用于通过将单个事件监听器附加到公共祖先元素来有效管理和处理多个子元素上的事件的设计模式。此模式在您有大量相似元素（例如列表项）并希望优化事件处理的场景中特别有价值。
 
 ## 事件委托的工作原理
 
-1. **将监听器附加到共同的祖先元素**：与将单独的事件监听器附加到每个子元素不同，你将一个单一的事件监听器附加到 DOM 层次结构中较高的共同祖先元素上。
-1. **事件冒泡**：当事件在子元素上发生时，它通过 DOM 树冒泡到共同祖先元素。在此传播期间，共同祖先上的事件监听器可以拦截并处理事件。
-1. **确定目标**：在事件监听器内部，你可以检查事件对象以识别事件的实际目标（触发事件的子元素）。你可以使用`event.target`或`event.currentTarget`等属性来确定与哪个特定子元素进行了交互。
-1. **根据目标执行操作**：根据目标元素，你可以执行所需的操作或执行特定于该元素的代码。这使你能够使用单个事件监听器处理多个子元素的事件。
+1. **将监听器附加到公共祖先**：您将单个事件监听器附加到 DOM 层次结构中较高的公共祖先元素，而不是将各个事件监听器附加到每个子元素。
+2. **事件冒泡**：当子元素上发生事件时，它会通过 DOM 树冒泡到公共祖先元素。在此传播过程中，公共祖先上的事件监听器可以拦截和处理该事件。
+3. **确定目标**：在事件监听器中，您可以检查事件对象以识别事件的实际目标（触发事件的子元素）。您可以使用 `event.target` 或 `event.currentTarget` 等属性来确定与哪个特定的子元素进行了交互。
+4. **根据目标执行操作**：根据目标元素，您可以执行所需的操作或执行特定于该元素的代码。这允许您使用单个事件监听器处理多个子元素的事件。
 
 ## 事件委托的优点
 
-1. **效率**：事件委托减少了事件监听器的数量，提高了内存使用和性能，特别是在处理大量元素时。
-1. **动态元素**：它与动态添加或删除的子元素无缝配合，因为共同祖先继续监听它们的事件。
+1. **效率**：事件委托减少了事件监听器的数量，从而提高了内存使用率和性能，尤其是在处理大量元素时。
+2. **动态元素**：它可以与动态添加或删除的子元素无缝协作，因为公共祖先会继续侦听它们的事件。
 
-## 示例
+## 例子
 
-以下是使用现代 ES6 语法的简单示例：
+这是一个简单的例子：
 
 ```js
 // HTML:
 // <ul id="item-list">
-//   <li>项目 1</li>
-//   <li>项目 2</li>
-//   <li>项目 3</li>
+//   <li>Item 1</li>
+//   <li>Item 2</li>
+//   <li>Item 3</li>
 // </ul>
 
 const itemList = document.getElementById('item-list');
 
 itemList.addEventListener('click', (event) => {
   if (event.target.tagName === 'LI') {
-    console.log(`单击了 ${event.target.textContent}`);
+    console.log(`Clicked on ${event.target.textContent}`);
   }
 });
 ```
 
-在此示例中，单个点击事件监听器附加到了`<ul>`元素上。当在`<li>`元素上发生点击事件时，事件冒泡到了`<ul>`元素，事件监听器检查目标的标签名称以识别单击的列表项。
+在此示例中，单个 click 事件监听器附加到 `<ul>` 元素。当 `<li>` 元素上发生 click 事件时，该事件会冒泡到 `<ul>` 元素，事件监听器会检查目标元素的标签名称以确定是否单击了列表项。检查 `event.target` 的身份至关重要，因为 DOM 树中可能存在其他类型的元素。
 
 ## 用例
 
-事件委托通常用于以下情况：
+事件委托通常用于以下场景：
+
+### 处理单页应用程序中的动态内容
+
+```js
+// HTML:
+// <div id="button-container">
+//   <button>Button 1</button>
+//   <button>Button 2</button>
+// </div>
+// <button id="add-button">Add Button</button>
+
+const buttonContainer = document.getElementById('button-container');
+const addButton = document.getElementById('add-button');
+
+buttonContainer.addEventListener('click', (event) => {
+  if (event.target.tagName === 'BUTTON') {
+    console.log(`Clicked on ${event.target.textContent}`);
+  }
+});
+
+addButton.addEventListener('click', () => {
+  const newButton = document.createElement('button');
+  newButton.textContent = `Button ${buttonContainer.children.length + 1}`;
+  buttonContainer.appendChild(newButton);
+});
+```
+
+在此示例中，`click` 事件侦听器附加到 `<div>` 容器。 当动态添加并单击一个新按钮时，容器上的事件侦听器会处理 click 事件。
+
+### 通过避免为更改的元素附加和删除事件侦听器来简化代码
+
+```js
+// HTML:
+// <form id="user-form">
+//   <input type="text" name="username" placeholder="Username">
+//   <input type="email" name="email" placeholder="Email">
+//   <input type="password" name="password" placeholder="Password">
+// </form>
+
+const userForm = document.getElementById('user-form');
+
+userForm.addEventListener('input', (event) => {
+  const { name, value } = event.target;
+  console.log(`Changed ${name}: ${value}`);
+});
+```
+
+在此示例中，单个 input 事件侦听器附加到表单元素。 它可以响应所有子输入元素的输入更改，从而简化代码，每个 `<input>` 元素使用一个事件侦听器。
+
+## 陷阱
+
+请注意，事件委托会带来某些陷阱：
+
+* **目标处理不正确：** 确保正确识别事件目标，以避免意外操作。
+* **并非所有事件都可以委托/冒泡**：并非所有事件都可以委托，因为它们不会冒泡。 不冒泡的事件包括：`focus`、`blur`、`scroll`、`mouseenter`、`mouseleave`、`resize` 等。
+* **事件开销：** 虽然事件委托通常更有效，但需要在根事件侦听器中编写复杂的逻辑来识别触发元素并做出适当的响应。 如果管理不当，这可能会引入开销，并且可能更复杂。
+
+## JavaScript 框架中的事件委托
+
+在 [React](https://react.dev/) 中，事件处理程序附加到 React 根的 DOM 容器中，React 树被渲染到该容器中。 即使将 `onClick` 添加到子元素，实际的事件侦听器也会附加到根 DOM 节点，利用事件委托来优化事件处理并提高性能。
+
+当事件发生时，React 的事件侦听器会捕获它，并根据其内部簿记确定哪个 React 组件呈现了目标元素。 然后，React 通过使用合成事件对象调用处理程序函数，将事件分派给相应的组件的事件处理程序。 此合成事件对象包装了本机浏览器事件，提供了跨不同浏览器的一致接口，并捕获了有关事件的信息。
 
-- 管理具有许多项目或行的列表、菜单或表格。
-- 处理单页面应用程序中的动态内容。
-- 通过避免为发生更改的元素附加和移除事件监听器来简化代码。
+通过使用事件委托，React 避免将单个事件处理程序附加到每个组件实例，这将产生巨大的开销，尤其对于大型组件树。 相反，React 利用浏览器的本机事件冒泡机制来捕获根处的事件并将它们分发到相应的组件。
 
-## 资源
+## 延伸阅读
 
-- [MDN Web 文档关于事件委托](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation)
-- [JavaScript.info - 事件委托](https://javascript.info/event-delegation)
+* [MDN Web Docs on Event Delegation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation)
+* [JavaScript.info - Event Delegation](https://javascript.info/event-delegation)
+* [React v17.0 Release Candidate: No New Features](https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html#changes-to-event-delegation)
diff --git a/questions/explain-function-prototype-bind/en-US.langnostic.json b/questions/explain-function-prototype-bind/en-US.langnostic.json
new file mode 100644
index 0000000..ff71b0d
--- /dev/null
+++ b/questions/explain-function-prototype-bind/en-US.langnostic.json
@@ -0,0 +1,72 @@
+{
+  "frontmatter": {
+    "title": "9152cbf3"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "b96bce3",
+        "68b9e64f",
+        "c6372431",
+        "2a7816d0",
+        "5a40ece9",
+        "2de811f4",
+        "d719bcd1",
+        "921441c1",
+        "a9925b37",
+        "3998cea5",
+        "c81ac723",
+        "f33c9db3",
+        "4e4dcd5f",
+        "b34abb70",
+        "74012c82",
+        "4958109e",
+        "cddb6bbf",
+        "426a14ba",
+        "b983455b",
+        "7945b3c",
+        "9bf3c015",
+        "a7dd80b8",
+        "55b481e7",
+        "45da4e57",
+        "6b60e315",
+        "ee9c1eea",
+        "4bd0132"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "b96bce3",
+        "68b9e64f",
+        "c6372431",
+        "2a7816d0",
+        "5a40ece9",
+        "2de811f4",
+        "d719bcd1",
+        "921441c1",
+        "a9925b37",
+        "3998cea5",
+        "c81ac723",
+        "f33c9db3",
+        "4e4dcd5f",
+        "b34abb70",
+        "74012c82",
+        "4958109e",
+        "cddb6bbf",
+        "426a14ba",
+        "b983455b",
+        "7945b3c",
+        "9bf3c015",
+        "a7dd80b8",
+        "55b481e7",
+        "45da4e57",
+        "6b60e315",
+        "ee9c1eea",
+        "4bd0132"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-function-prototype-bind/zh-CN.mdx b/questions/explain-function-prototype-bind/zh-CN.mdx
index 735063c..353173e 100644
--- a/questions/explain-function-prototype-bind/zh-CN.mdx
+++ b/questions/explain-function-prototype-bind/zh-CN.mdx
@@ -1,14 +1,26 @@
 ---
-title: 解释 `Function.prototype.bind`
+title: 解释 JavaScript 中的 `Function.prototype.bind`
 ---
 
-> `bind()`方法创建了一个新的函数，在被调用时，它有`this`关键字设置为提供的值。 具有在调用新函数时所提供的任何参数之前的特定序列。
+## TL;DR
 
-_资料来源：[Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)_
+`Function.prototype.bind` 是 JavaScript 中的一个方法，它允许你创建一个新函数，该函数具有特定的 `this` 值和可选的初始参数。它的主要目的是：
 
-`bind()` 对于在要传递给其他函数的类的方法中绑定 `this` 的值非常有用。 这通常是在 React 类组件方法中做的，而这些方法没有使用箭头函数来定义。
+* **绑定 `this` 值以保留上下文**：`bind` 的主要目的是将函数的 `this` 值绑定到特定的对象。当你调用 `func.bind(thisArg)` 时，它会创建一个与 `func` 具有相同主体的的新函数，但 `this` 永久绑定到 `thisArg`。
+* **部分应用参数**：`bind` 还允许你为新函数预先指定参数。传递给 `bind` 的任何参数（在 `thisArg` 之后）都将在调用新函数时添加到参数列表的前面。
+* **方法借用**：`bind` 允许你从一个对象借用方法并将其应用于另一个对象，即使它们最初并非设计为与该对象一起使用。
 
-```js
+`bind` 方法在需要确保使用特定的 `this` 上下文调用函数的情况下特别有用，例如在事件处理程序、回调或方法借用中。
+
+***
+
+## `Function.prototype.bind`
+
+`Function.prototype.bind` 允许你创建一个具有特定 `this` 上下文的新函数，以及可选的预设参数。`bind()` 对于在要传递给其他函数的类方法中保留 `this` 的值非常有用。
+
+`bind` 经常用于旧版 React 类组件方法，这些方法不是使用箭头函数定义的。
+
+```js live
 const john = {
   age: 42,
   getAge: function () {
@@ -29,14 +41,88 @@ const boundGetAgeMary = john.getAge.bind(mary);
 console.log(boundGetAgeMary()); // 21
 ```
 
-在上面的例子中，当`getAge`方法被调用时没有一个调用对象（如`unboundGetAge`）， 值为 `undefined` ，因为`getAge()` 里的 `this` 值变成了全局对象。 `boundGetAge()` 将其`this` 绑定到`john`，因此它能够获得`john`的`age`。
+在上面的例子中，当 `getAge` 方法在没有调用对象（作为 `unboundGetAge`）的情况下被调用时，该值为 `undefined`，因为 `getAge()` 中的 `this` 的值变为全局对象。`boundGetAge()` 的 `this` 绑定到 `john`，因此它能够获取 `john` 的 `age`。
+
+我们甚至可以在另一个不是 `john` 的对象上使用 `getAge`！`boundGetAgeMary` 返回 `mary` 的 `age`。
+
+## 用例
+
+以下是经常使用 `bind` 的一些常见场景：
+
+### 在回调中保留上下文并修复 `this` 值
+
+当你将一个函数作为回调传递时，函数内部的 `this` 值可能无法预测，因为它由执行上下文决定。使用 `bind()` 有助于确保维护正确的 `this` 值。
+
+```js live
+class Person {
+  constructor(firstName) {
+    this.firstName = firstName;
+  }
+  greet() {
+    console.log(`Hello, my name is ${this.firstName}`);
+  }
+}
+
+const john = new Person('John');
+
+// Without bind(), `this` inside the callback will be the global object
+setTimeout(john.greet, 1000); // Output: "Hello, my name is undefined"
+
+// Using bind() to fix the `this` value
+setTimeout(john.greet.bind(john), 2000); // Output: "Hello, my name is John"
+```
+
+你也可以使用 [箭头函数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) 来定义类方法，而不是使用 `bind`。箭头函数将 `this` 值绑定到其词法上下文。
+
+```js live
+class Person {
+  constructor(name) {
+    this.name = name;
+  }
+  greet = () => {
+    console.log(`Hello, my name is ${this.name}`);
+  };
+}
+
+const john = new Person('John Doe');
+setTimeout(john.greet, 1000); // Output: "Hello, my name is John Doe"
+```
+
+### 函数的部分应用（柯里化）
+
+`bind` 可以用来创建一个新函数，其中预先设置了一些参数。这被称为部分应用或柯里化。
 
-我们甚至可以在另一个不是`john`的对象上使用 `getAge`! `boundGetAgeMary` 返回 `mary` 的`age` 。
+```js live
+function multiply(a, b) {
+  return a * b;
+}
+
+// 使用 bind() 创建一个新函数，其中预先设置了一些参数
+const multiplyBy5 = multiply.bind(null, 5);
+console.log(multiplyBy5(3)); // Output: 15
+```
+
+### 方法借用
+
+`bind` 允许你从一个对象借用方法并将它们应用于另一个对象，即使它们最初不是为该对象设计的。当你需要在不同对象之间重用功能时，这会很有用
+
+```js live
+const person = {
+  name: 'John',
+  greet: function () {
+    console.log(`Hello, ${this.name}!`);
+  },
+};
+
+const greetPerson = person.greet.bind({ name: 'Alice' });
+greetPerson(); // Output: Hello, Alice!
+```
 
 ## 练习
 
-在 GreatFrontEnd 尝试[实现你自己的 `Function.prototype.bind()` 方法](/questions/javascript/function-bind)。
+尝试在 GreatFrontEnd 上[实现你自己的 `Function.prototype.bind()` 方法](/questions/javascript/function-bind)。
 
-## 参考资料
+## 延伸阅读
 
-- [Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)
+* [Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)
+* [Function Binding | javascript.info](https://javascript.info/bind)
diff --git a/questions/explain-hoisting/en-US.langnostic.json b/questions/explain-hoisting/en-US.langnostic.json
new file mode 100644
index 0000000..cdb82dd
--- /dev/null
+++ b/questions/explain-hoisting/en-US.langnostic.json
@@ -0,0 +1,102 @@
+{
+  "frontmatter": {
+    "title": "aeb58a5c"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "804794dd",
+        "168e6e39",
+        "316af5e0",
+        "d4eff71f",
+        "2a7816d0",
+        "7763dd73",
+        "b2550f45",
+        "840fdb2",
+        "c6d7bc32",
+        "d695a243",
+        "a7ad58ab",
+        "dbb12e59",
+        "18386894",
+        "e57f0051",
+        "ad972e07",
+        "3cc2814c",
+        "f5aa5b10",
+        "52cda30a",
+        "3b2df69c",
+        "e377b469",
+        "359e36e6",
+        "bff451a8",
+        "128d61d8",
+        "55a4f808",
+        "7ef0aca3",
+        "788be196",
+        "5113831d",
+        "d37a8add",
+        "63a6f868",
+        "240cdb8a",
+        "3174b2f2",
+        "41433774",
+        "cd4660b2",
+        "133cc421",
+        "7933da41",
+        "282a9481",
+        "11487978",
+        "b1f06233",
+        "b9a03b4e",
+        "c314f8b",
+        "1f4770e5",
+        "276e19b3"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "804794dd",
+        "168e6e39",
+        "316af5e0",
+        "d4eff71f",
+        "2a7816d0",
+        "7763dd73",
+        "b2550f45",
+        "840fdb2",
+        "c6d7bc32",
+        "d695a243",
+        "a7ad58ab",
+        "dbb12e59",
+        "18386894",
+        "e57f0051",
+        "ad972e07",
+        "3cc2814c",
+        "f5aa5b10",
+        "52cda30a",
+        "3b2df69c",
+        "e377b469",
+        "359e36e6",
+        "bff451a8",
+        "128d61d8",
+        "55a4f808",
+        "7ef0aca3",
+        "788be196",
+        "5113831d",
+        "d37a8add",
+        "63a6f868",
+        "240cdb8a",
+        "3174b2f2",
+        "41433774",
+        "cd4660b2",
+        "133cc421",
+        "7933da41",
+        "282a9481",
+        "11487978",
+        "b1f06233",
+        "b9a03b4e",
+        "c314f8b",
+        "1f4770e5",
+        "276e19b3"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-hoisting/zh-CN.mdx b/questions/explain-hoisting/zh-CN.mdx
index 60fcbf3..912234b 100644
--- a/questions/explain-hoisting/zh-CN.mdx
+++ b/questions/explain-hoisting/zh-CN.mdx
@@ -1,43 +1,143 @@
 ---
-title: 解释“（变量）提升”
+title: 解释 JavaScript 中的“hoisting”（变量提升）概念
 ---
 
-提升是用于解释你代码中变量声明行为的一个术语。 使用`var`关键字声明或初始化的变量将会将其声明“移动”到其模块/函数级别范围的顶端。 我们把它成为变量提升。 然而，只有声明被提升，赋值（如果有的话）将留在原地。
+## TL;DR
 
-请注意，声明实际上并没有被移动--JavaScript 引擎在编译过程中解析了声明，并意识到了声明及其作用域。 通过视觉将声明置于其作用域之首，更容易理解这种行为。 让我们用几个例子来解释。
+Hoisting（变量提升）是一种 JavaScript 机制，在编译阶段，变量和函数声明会被“提升”到其包含作用域的顶部。
 
-```js
+* **变量声明 (`var`)**：声明被提升，但未初始化。如果在使用前访问变量，则变量的值为 `undefined`。
+* **变量声明 (`let` 和 `const`)**：声明被提升，但未初始化。访问它们会导致 `ReferenceError`，直到遇到实际的声明。
+* **函数表达式 (`var`)**：声明被提升，但未初始化。如果在使用前访问变量，则变量的值为 `undefined`。
+* **函数声明 (`function`)**：声明和定义都被完全提升。
+* **类声明 (`class`)**：声明被提升，但未初始化。访问它们会导致 `ReferenceError`，直到遇到实际的声明。
+* **导入声明 (`import`)**：声明被提升，并且在执行其余代码之前，会执行导入模块的副作用。
+
+以下行为总结了在声明变量之前访问变量的结果。
+
+| 声明 | 在声明之前访问 |
+| ------------------------------ | ---------------------------- |
+| `var foo` | `undefined` |
+| `let foo` | `ReferenceError` |
+| `const foo` | `ReferenceError` |
+| `class Foo` | `ReferenceError` |
+| `var foo = function() { ... }` | `undefined` |
+| `function foo() { ... }` | 正常 |
+| `import` | 正常 |
+
+***
+
+## Hoisting（变量提升）
+
+Hoisting（变量提升）是一个术语，用于解释 JavaScript 代码中变量声明的行为。
+
+使用 `var` 关键字声明或初始化的变量将在编译期间将其声明“移动”到其包含作用域的顶部，我们将其称为变量提升。
+
+只有声明被提升，初始化/赋值（如果存在）将保留在原来的位置。请注意，声明实际上并没有移动——JavaScript 引擎在编译期间会解析声明，并了解变量及其作用域，但是通过将声明可视化为“提升”到其作用域的顶部，更容易理解这种行为。
+
+让我们用几个代码示例来解释。请注意，这些示例的代码应该在模块作用域内执行，而不是像浏览器控制台那样逐行输入到 REPL 中。
+
+### 使用 `var` 声明的变量的变量提升
+
+在这里可以看到变量提升的实际效果，即使在第一个 `console.log()` 之后才声明和初始化 `foo`，第一个 `console.log()` 也会将 `foo` 的值打印为 `undefined`。
+
+```js live
 console.log(foo); // undefined
 var foo = 1;
 console.log(foo); // 1
 ```
 
-函数声明的主体提升到顶端，而函数表达式(以变量声明的形式写成) 只有变量声明被提升到顶端。
+您可以将代码可视化为：
 
-```js
-// Function Declaration
-console.log(foo); // [Function: foo]
-foo(); // 'FOOOOO'
-function foo() {
-  console.log('FOOOOO');
+```js live
+var foo;
+console.log(foo); // undefined
+foo = 1;
+console.log(foo); // 1
+```
+
+### 使用 `let`、`const` 和 `class` 声明的变量的变量提升
+
+通过 `let`、`const` 和 `class` 声明的变量也会被提升。但是，与 `var` 和 `function` 不同，它们没有被初始化，在声明之前访问它们将导致 `ReferenceError` 异常。该变量处于一个“暂时性死区”，从块的开始到声明被处理。
+
+```js live
+y; // ReferenceError: Cannot access 'y' before initialization
+let y = 'local';
+```
+
+```js live
+z; // ReferenceError: Cannot access 'z' before initialization
+const z = 'local';
+```
+
+```js live
+Foo; // ReferenceError: Cannot access 'Foo' before initialization
+
+class Foo {
+  constructor() {}
 }
-console.log(foo); // [Function: foo]
+```
+
+### 函数表达式的提升
 
-// Function Expression
+函数表达式是以变量声明的形式编写的函数。由于它们也是使用 `var` 声明的，因此只有变量声明被提升。
+
+```js live
 console.log(bar); // undefined
 bar(); // Uncaught TypeError: bar is not a function
+
 var bar = function () {
   console.log('BARRRR');
 };
-console.log(bar); // [Function: bar]
 ```
 
-通过 `let` 和 `const` 声明的变量也被提升。 然而，与`var` 和 `function`不同的是，在声明导致`ReferenceError` 例外之前，它们没有初始化并访问它们。 该变量处于从代码块开始直到声明被处理时的一个“暂时性死区”。
+### 函数声明的提升
+
+函数声明使用 `function` 关键字。与函数表达式不同，函数声明同时提升声明和定义，因此即使在声明之前也可以调用它们。
+
+```js live
+console.log(foo); // [Function: foo]
+foo(); // 'FOOOOO'
+
+function foo() {
+  console.log('FOOOOO');
+}
+```
+
+这同样适用于生成器 (`function*`)、异步函数 (`async function`) 和异步函数生成器 (`async function*`)。
+
+### `import` 语句的提升
+
+Import 声明被提升。import 引入的标识符在整个模块范围内都可用，并且它们产生的副作用在模块的其余代码运行之前产生。
 
 ```js
-x; // undefined
-y; // Reference error: y is not defined
+foo.doSomething(); // Works normally.
 
-var x = 'local';
-let y = 'local';
+import foo from './modules/foo';
 ```
+
+## 幕后
+
+实际上，JavaScript 在尝试执行代码之前，会在当前作用域中创建所有变量。使用 `var` 关键字创建的变量的值将为 `undefined`，而使用 `let` 和 `const` 关键字创建的变量将被标记为 `<value unavailable>`。因此，在初始化之前访问它们将导致 `ReferenceError`，从而阻止您在初始化之前访问它们。
+
+在 ECMAScript 规范中，`let` 和 `const` 声明[解释如下](https://tc39.es/ecma262/#sec-let-and-const-declarations)：
+
+> 当它们包含的 Environment Record 被实例化时，变量被创建，但在变量的 LexicalBinding 被求值之前，可能无法以任何方式访问它们。
+
+但是，对于 `var` 关键字，此语句[略有不同](https://tc39.es/ecma262/#sec-variable-statement)：
+
+> 当它们包含的 Environment Record 被实例化时，Var 变量被创建，并在创建时被初始化为 `undefined`。
+
+## 现代实践
+
+在实践中，现代代码库避免使用 `var`，并且仅使用 `let` 和 `const`。建议在包含范围/模块的顶部声明和初始化变量和 import 语句，以消除跟踪何时可以使用变量的心理负担。
+
+ESLint 是一个静态代码分析器，可以发现违反此类情况，使用以下规则：
+
+* [`no-use-before-define`](https://eslint.org/docs/latest/rules/no-use-before-define): 当遇到对尚未声明的标识符的引用时，此规则将发出警告。
+* [`no-undef`](https://eslint.org/docs/latest/rules/no-undef): 当遇到对尚未声明的标识符的引用时，此规则将发出警告。
+
+## 延伸阅读
+
+* [Hoisting | MDN](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting)
+* [JavaScript Visualized: Hoisting](https://dev.to/lydiahallie/javascript-visualized-hoisting-478h)
diff --git a/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.langnostic.json b/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.langnostic.json
new file mode 100644
index 0000000..272dc31
--- /dev/null
+++ b/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "c1693c5a"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "4c1c525c",
+        "2a7816d0",
+        "a094b193",
+        "c01a4a78",
+        "282ab080",
+        "b0aaf596",
+        "98ceba85",
+        "da738909",
+        "9920f083",
+        "92c0c419",
+        "8c93a3b",
+        "8839d5cc",
+        "971fcc89",
+        "f9fa7113",
+        "4f06bc53",
+        "1f4770e5",
+        "8b51757d"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "4c1c525c",
+        "2a7816d0",
+        "a094b193",
+        "c01a4a78",
+        "282ab080",
+        "b0aaf596",
+        "98ceba85",
+        "da738909",
+        "9920f083",
+        "92c0c419",
+        "8c93a3b",
+        "8839d5cc",
+        "971fcc89",
+        "f9fa7113",
+        "4f06bc53",
+        "1f4770e5",
+        "8b51757d"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/zh-CN.mdx b/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/zh-CN.mdx
index 2428b3b..236426d 100644
--- a/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/zh-CN.mdx
+++ b/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/zh-CN.mdx
@@ -1,29 +1,74 @@
 ---
-title: 解释JSONP 如何工作(以及它为什么不是真正的 Ajax)
+title: 解释 JSONP 的工作原理（以及它实际上并非 Ajax）
 ---
 
-JSONP (JSON with Padding) 是一种通常用来绕过网络浏览器中的跨域策略的方法，因为不允许从当前页面的 Ajax 请求到跨源域。
+## TL;DR
 
-JSONP 工作方式是通过一个 `<script>` 标签向一个跨源域提出请求，通常使用一个 `callback` 查询参数， 例如：`https://example.com?callback=printData`。 然后，服务器将把数据填充到一个名为 `printData` 的函数中，然后返回给客户端。
+JSONP（带填充的 JSON）是一种用于克服 Web 浏览器中的同源策略的技术，允许您从不同域的服务器请求数据。它的工作原理是动态创建 `<script>` 标签，并将其 `src` 属性设置为数据源的 URL。服务器使用一个脚本进行响应，该脚本使用数据作为其参数调用预定义的 callback 函数。与 Ajax 不同，JSONP 不使用 XMLHttpRequest 对象，并且仅限于 GET 请求。
+
+***
+
+## JSONP 的工作原理（以及它实际上并非 Ajax）
+
+### 什么是 JSONP？
+
+JSONP 代表带填充的 JSON。它是一种用于绕过 Web 浏览器中的同源策略的技术，该策略限制网页向提供该网页的域以外的域发出请求。
+
+### JSONP 的工作原理
+
+1. **动态脚本标签创建**：动态创建 `<script>` 标签，并将其 `src` 属性设置为数据源的 URL，包括回调函数名称作为查询参数。
+2. **服务器响应**：服务器使用一个脚本进行响应，该脚本调用回调函数，并将数据作为参数传递。
+3. **回调执行**：浏览器执行脚本，使用数据调用回调函数。
+
+这是一个简单的例子：
 
 ```html
-<!-- https://mydomain.com -->
-<script>
-  function printData(data) {
-    console.log(`My name is ${data.name}!`);
-  }
-</script>
-
-<script src="https://example.com?callback=printData"></script>
+<!doctype html>
+<html>
+  <head>
+    <title>JSONP Example</title>
+    <script>
+      function handleResponse(data) {
+        console.log(data);
+      }
+
+      function fetchData() {
+        var script = document.createElement('script');
+        script.src = 'https://example.com/data?callback=handleResponse';
+        document.body.appendChild(script);
+      }
+    </script>
+  </head>
+  <body>
+    <button onclick="fetchData()">Fetch Data</button>
+  </body>
+</html>
 ```
 
-```js
-// 从 https://example.com?callback=printData 加载的文件
-printData({ name: 'John Doe' });
+在此示例中，当单击该按钮时，将创建一个 `<script>` 标签，其 `src` 属性设置为 `https://example.com/data?callback=handleResponse`。`example.com` 上的服务器将使用如下脚本进行响应：
+
+```javascript
+handleResponse({
+  name: 'John',
+  age: 30,
+});
 ```
 
-客户端必须将`printData`函数设在其全局范围内，当收到跨源域的响应时，该函数将由客户端执行。
+### JSONP 与 Ajax 的区别
+
+* **传输机制**：JSONP 使用 `<script>` 标签来获取数据，而 Ajax 使用 XMLHttpRequest 对象。
+* **请求类型**：JSONP 仅限于 GET 请求，而 Ajax 可以使用各种 HTTP 方法，如 GET、POST、PUT、DELETE 等。
+* **同源策略**：JSONP 可以绕过同源策略，而 Ajax 请求受其约束，除非使用 CORS（跨域资源共享）。
+* **错误处理**：与 Ajax 相比，JSONP 的错误处理能力有限。
+
+### JSONP 的局限性
+
+* **安全风险**：如果外部服务器受到破坏或恶意攻击，JSONP 可能会使您的应用程序面临跨站点脚本 (XSS) 攻击。
+* **仅限于 GET 请求**：JSONP 不能用于 POST 请求或其他 HTTP 方法。
+* **错误处理**：与 Ajax 相比，JSONP 缺乏强大的错误处理机制。
 
-JSONP 可能是不安全的，并涉及一些安全问题。 因为 JSONP 真的是 JavaScript，它可以做所有其它 JavaScript 可以做的事情，所以你需要信任 JSONP 数据的提供者。
+## 延伸阅读
 
-目前前端开发领域，[CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) 是推荐的方法，JSONP 被视为一种 hack（破解）。
+* [MDN Web 文档：JSONP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/JSONP)
+* [同源策略](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)
+* [跨域资源共享 (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
diff --git a/questions/explain-how-prototypal-inheritance-works/en-US.langnostic.json b/questions/explain-how-prototypal-inheritance-works/en-US.langnostic.json
new file mode 100644
index 0000000..0f9d25b
--- /dev/null
+++ b/questions/explain-how-prototypal-inheritance-works/en-US.langnostic.json
@@ -0,0 +1,56 @@
+{
+  "frontmatter": {
+    "title": "e48dcbd3"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "4912ac0",
+        "446d0998",
+        "95701010",
+        "1df4e2",
+        "ec4d1007",
+        "4066d9a9",
+        "eb8295dd",
+        "2a7816d0",
+        "4e4b421d",
+        "19bb87c5",
+        "a3376f34",
+        "be2d34c4",
+        "b52ddf94",
+        "1dc60677",
+        "11a400e1",
+        "3d40f5c3",
+        "3b5a819f",
+        "dae7e089",
+        "2b6d6fd1"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "4912ac0",
+        "446d0998",
+        "95701010",
+        "1df4e2",
+        "ec4d1007",
+        "4066d9a9",
+        "eb8295dd",
+        "2a7816d0",
+        "4e4b421d",
+        "19bb87c5",
+        "a3376f34",
+        "be2d34c4",
+        "b52ddf94",
+        "1dc60677",
+        "11a400e1",
+        "3d40f5c3",
+        "3b5a819f",
+        "dae7e089",
+        "2b6d6fd1"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-how-prototypal-inheritance-works/zh-CN.mdx b/questions/explain-how-prototypal-inheritance-works/zh-CN.mdx
index 7fbb839..10fdf29 100644
--- a/questions/explain-how-prototypal-inheritance-works/zh-CN.mdx
+++ b/questions/explain-how-prototypal-inheritance-works/zh-CN.mdx
@@ -1,12 +1,18 @@
 ---
-title: 解释原型继承如何工作
+title: 解释 JavaScript 中原型继承的工作原理
 ---
 
-这是一个极其常见的 JavaScript 面试问题。 所有 JavaScript 对象（用`Object.create(null)` 创建的对象除外）都有一个 `__proto__` 属性，是指另一个对象，它叫做对象的“原型”。 当一个属性在一个对象上被访问时，如果该属性未在该对象上被找到， JavaScript 引擎看看对象的 `__proto__`、 `__proto__` 的 `__proto__` 等，直到它在一个 `__proto__`中找到定义的属性或直到它到达原型链的末尾。 这种行为模拟传统继承，但它实际上更多是[委托而不是继承](https://davidwalsh.name/javascript-objects)。
+## TL;DR
 
-## 原型继承的例子
+JavaScript 中的原型继承是对象从其他对象继承属性和方法的一种方式。每个 JavaScript 对象都有一个名为 `[[Prototype]]` 的特殊隐藏属性（通常通过 `__proto__` 或使用 `Object.getPrototypeOf()` 访问），它引用另一个对象，该对象被称为对象的“原型”。
 
-```js
+当访问对象的属性，并且在该对象上找不到该属性时，JavaScript 引擎会查看对象的 `__proto__`，以及 `__proto__` 的 `__proto__`，依此类推，直到它在其中一个 `__proto__` 上找到定义的属性，或者直到它到达原型链的末尾。
+
+这种行为模拟了经典继承，但实际上它更像是[委托而不是继承](https://davidwalsh.name/javascript-objects)。
+
+以下是原型继承的示例：
+
+```js live
 // Parent object constructor.
 function Animal(name) {
   this.name = name;
@@ -41,9 +47,136 @@ bolt.bark(); // "Woof!"
 
 需要注意的是：
 
-- `.makeSound` 没有定义在`Dog`上，因此引擎会在继承的原型链`Animal`上发现`.makeSound`。
-- Using `Object.create` to build the inheritance chain is no longer recommended. Use `Object.setPrototypeOf` instead.
+*  `.makeSound` 未在 `Dog` 上定义，因此 JavaScript 引擎会向上查找原型链，并在继承的 `Animal` 上找到 `.makeSound`。
+*  不再推荐使用 `Object.create()` 来构建继承链。请改用 `Object.setPrototypeOf()`。
+
+***
+
+## Javascript 中的原型继承
+
+原型继承是 JavaScript 中用于创建从其他对象继承属性和方法对象的特性。JavaScript 使用基于原型的模型，而不是基于类的继承模型，对象可以直接从其他对象继承。
+
+### 关键概念
+
+1. **原型**：JavaScript 中的每个对象都有一个原型，它也是一个对象。当您使用对象字面量或构造函数创建对象时，新对象将链接到其构造函数的原型，如果未指定原型，则链接到 `Object.prototype`。这通常使用 `__proto__` 或 `[[Prototype]]` 引用。您还可以使用内置方法 `Object.getPrototypeOf()` 获取原型，并且可以通过 `Object.setPrototypeOf()` 设置对象的原型。
+
+```js live
+// Define a constructor function
+function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+// Add a method to the prototype
+Person.prototype.sayHello = function () {
+  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
+};
+
+// Create a new object using the constructor function
+let john = new Person('John', 30);
+
+// The new object has access to the methods defined on the prototype
+john.sayHello(); // "Hello, my name is John and I am 30 years old."
+
+// The prototype of the new object is the prototype of the constructor function
+console.log(john.__proto__ === Person.prototype); // true
+
+// You can also get the prototype using Object.getPrototypeOf()
+console.log(Object.getPrototypeOf(john) === Person.prototype); // true
+
+// You can set the prototype of an object using Object.setPrototypeOf()
+let newProto = {
+  sayGoodbye: function () {
+    console.log(`Goodbye, my name is ${this.name}`);
+  },
+};
+
+Object.setPrototypeOf(john, newProto);
+
+// Now john has access to the methods defined on the new prototype
+john.sayGoodbye(); // "Goodbye, my name is John"
+
+// But no longer has access to the methods defined on the old prototype
+console.log(john.sayHello); // undefined
+```
+
+2. **原型链**：当访问对象的属性或方法时，JavaScript 首先在对象本身上查找它。如果找不到，它会查看对象的原型，然后是原型的原型，依此类推，直到找到该属性或到达链的末尾（即 `null`）。
+
+3. **构造函数**：JavaScript 提供了构造函数来创建对象。当一个函数与 new 关键字一起用作构造函数时，新对象的原型 (`[[Prototype]]`) 将设置为构造函数 的原型属性。
+
+```js live
+// Define a constructor function
+function Animal(name) {
+  this.name = name;
+}
+
+// Add a method to the prototype
+Animal.prototype.sayName = function () {
+  console.log(`My name is ${this.name}`);
+};
+
+// Define a new constructor function
+function Dog(name, breed) {
+  Animal.call(this, name);
+  this.breed = breed;
+}
+
+// Set the prototype of Dog to be a new instance of Animal
+Dog.prototype = Object.create(Animal.prototype);
+
+// Add a method to the Dog prototype
+Dog.prototype.bark = function () {
+  console.log('Woof!');
+};
+
+// Create a new object using the Dog constructor function
+let fido = new Dog('Fido', 'Labrador');
+
+// The new object has access to the methods defined on its own prototype and the Animal prototype
+fido.bark(); // "Woof!"
+fido.sayName(); // "My name is Fido"
+
+// If we try to access a method that doesn't exist on the Dog prototype or the Animal prototype, JavaScript will return undefined
+console.log(fido.fly); // undefined
+```
+
+4. **`Object.create()`**：此方法使用指定原型对象和属性创建一个新对象。这是设置原型继承的一种直接方法。如果您通过 `Object.create(null)` 创建一个对象，它将不会从 `Object.prototype` 继承任何属性。这意味着该对象将没有任何内置属性或方法，例如 `toString()`、`hasOwnProperty()`
+
+```js live
+// Define a prototype object
+let proto = {
+  greet: function () {
+    console.log(`Hello, my name is ${this.name}`);
+  },
+};
+
+// Use `Object.create()` to create a new object with the specified prototype
+let person = Object.create(proto);
+person.name = 'John';
+
+// The new object has access to the methods defined on the prototype
+person.greet(); // "Hello, my name is John"
+
+// Check if the object has a property
+console.log(person.hasOwnProperty('name')); // true
+
+// Create an object that does not inherit from Object.prototype
+let animal = Object.create(null);
+animal.name = 'Rocky';
+
+// The new object does not have any built-in properties or methods
+console.log(animal.toString); // undefined
+console.log(animal.hasOwnProperty); // undefined
+
+// But you can still add and access custom properties
+animal.describe = function () {
+  console.log(`Name of the animal is ${this.name}`);
+};
+
+animal.describe(); // "Name of the animal is Rocky"
+```
 
-## Resources
+## 资源
 
-- [Inheritance and the prototype chain | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
+* [Inheritance and the prototype chain | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
+* [JavaScript Visualized: Prototypal Inheritance](https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co)
diff --git a/questions/explain-how-this-works-in-javascript/en-US.langnostic.json b/questions/explain-how-this-works-in-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..bc1a457
--- /dev/null
+++ b/questions/explain-how-this-works-in-javascript/en-US.langnostic.json
@@ -0,0 +1,114 @@
+{
+  "frontmatter": {
+    "title": "609c51e2"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "d5beaf35",
+        "6ac7163a",
+        "9dc36583",
+        "fd54d294",
+        "2a7816d0",
+        "9f0fe69f",
+        "cc40d86",
+        "59175592",
+        "d36decea",
+        "f0118c1e",
+        "b7456387",
+        "3f0d3ea6",
+        "e38f71e6",
+        "3f421e0b",
+        "4f360376",
+        "f8480c9e",
+        "e8879987",
+        "205121fd",
+        "a17f23b8",
+        "345ed5a0",
+        "7580adc9",
+        "2295bef7",
+        "98444efa",
+        "590c4175",
+        "47469115",
+        "1509e0b7",
+        "23699213",
+        "9eb5dc0b",
+        "a7030dd3",
+        "6ad9cdd9",
+        "2bf68e83",
+        "b854f8ca",
+        "8c5b27ca",
+        "71a6b122",
+        "dfac6653",
+        "5968c5a9",
+        "183f3bc9",
+        "8799f8c9",
+        "edb8b937",
+        "d5137db5",
+        "827f3281",
+        "fdec9eb8",
+        "9c48121d",
+        "8641d96e",
+        "c03c3989",
+        "f6206c2d",
+        "1f4770e5",
+        "f97fcd35"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "d5beaf35",
+        "6ac7163a",
+        "9dc36583",
+        "fd54d294",
+        "2a7816d0",
+        "9f0fe69f",
+        "cc40d86",
+        "59175592",
+        "d36decea",
+        "f0118c1e",
+        "b7456387",
+        "3f0d3ea6",
+        "e38f71e6",
+        "3f421e0b",
+        "4f360376",
+        "f8480c9e",
+        "e8879987",
+        "205121fd",
+        "a17f23b8",
+        "345ed5a0",
+        "7580adc9",
+        "2295bef7",
+        "98444efa",
+        "590c4175",
+        "47469115",
+        "1509e0b7",
+        "23699213",
+        "9eb5dc0b",
+        "a7030dd3",
+        "6ad9cdd9",
+        "2bf68e83",
+        "b854f8ca",
+        "8c5b27ca",
+        "71a6b122",
+        "dfac6653",
+        "5968c5a9",
+        "183f3bc9",
+        "8799f8c9",
+        "edb8b937",
+        "d5137db5",
+        "827f3281",
+        "fdec9eb8",
+        "9c48121d",
+        "8641d96e",
+        "c03c3989",
+        "f6206c2d",
+        "1f4770e5",
+        "f97fcd35"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-how-this-works-in-javascript/zh-CN.mdx b/questions/explain-how-this-works-in-javascript/zh-CN.mdx
index 8d6032c..0657cc6 100644
--- a/questions/explain-how-this-works-in-javascript/zh-CN.mdx
+++ b/questions/explain-how-this-works-in-javascript/zh-CN.mdx
@@ -1,18 +1,235 @@
 ---
-title: 解释 JavaScript `this` 如何工作
+title: 解释 JavaScript 中 `this` 的工作原理
 ---
 
-`this`没有简单的解释；它是 JavaScript 中最令人困惑的概念之一。 一个简短的解释是，`this`的值取决于函数如何调用。 在线阅读了很多关于`this`的解释，[Arnav Aggrawal](https://med.com/@arnav_aggarwal)的解释很清楚。 适用下列规则：
+## TL;DR
 
-1.  如果调用函数时使用 `new` 关键字，那么函数中的`this` 是一个全新的对象。
-2.  如果`apply`, `call`, 或 `bind` 用于调用/创建函数, 那么函数中的`this` 是作为参数传递的对象。
-3.  如果一个函数作为方法被调用，例如`obj.method()` -- `this`是该函数的一个属性对象。
-4.  如果一个函数被作为一个自由函数调用， 意思是在没有上述任何条件的情况下调用它，`this `就是全局对象。 在浏览器中，它是 `window ` 对象。 如果在严格模式下(`'use strict'`)，`this`将是`undefined ` 而不是全局对象。
-5.  如果上述多条规则都适用，则排名靠前的规则获胜，并将设置`this`值。
-6.  如果函数是一个 ES2015 箭头函数， 它将无视上面的所有规则，并在创建时接收其周围范围的`this`值。
+`this` 没有简单的解释；它是 JavaScript 中最令人困惑的概念之一，因为它的行为与其他许多编程语言不同。`this` 关键字的单行解释是，它是一个对函数执行上下文的动态引用。
 
-若要深入解释，请查阅他的[Medium 上面的文章]\(https://codeburst.io/the-simple-rules-this in javascript-35d97f31bde3)。
+更长的解释是，`this` 遵循以下规则：
 
-#### 你能否举例说明在 ES2015 年处理这一问题的方式已经发生变化？
+1. 如果在调用函数时使用了 `new` 关键字，这意味着该函数被用作函数构造函数，则函数内部的 `this` 是新创建的对象实例。
+2. 如果在 `class` `constructor` 中使用了 `this`，则 `constructor` 内部的 `this` 是新创建的对象实例。
+3. 如果使用 `apply()`、`call()` 或 `bind()` 调用/创建函数，则函数内部的 `this` 是作为参数传入的对象。
+4. 如果一个函数被调用为一个方法（例如 `obj.method()`）——`this` 是该函数所属的对象。
+5. 如果一个函数被调用为自由函数调用，这意味着它是在没有任何上述条件的情况下被调用的，`this` 是全局对象。在浏览器中，全局对象是 `window` 对象。如果在严格模式 (`'use strict';`) 中，`this` 将是 `undefined` 而不是全局对象。
+6. 如果应用了多个上述规则，则优先级较高的规则将获胜并设置 `this` 的值。
+7. 如果该函数是 ES2015 箭头函数，它会忽略上述所有规则，并在创建时接收其周围作用域的 `this` 值。
 
-ES2015 允许您使用[箭头函数](http://2ality.com/2017/12/alternate-this.html#arrow-functions)来使用[封闭的词汇范围](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this). 这通常很方便，但确实阻止了调用者通过`.call`或`.apply`控制上下文--后果是诸如`jQuery`这样的库不会在你的事件处理函数中正确绑定`this`。 因此，在重构大型遗留应用程序时必须牢记这一点。
+如需深入解释，请查看 [Arnav Aggrawal 在 Medium 上的文章](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3)。
+
+***
+
+## `this` 关键字
+
+在 JavaScript 中，`this` 是一个关键字，它引用函数或脚本的当前执行上下文。这是 JavaScript 中的一个基本概念，理解 `this` 的工作原理对于构建健壮且可维护的应用程序至关重要。
+
+### 全局使用
+
+在全局范围内，`this` 引用全局对象，在 Web 浏览器中是 `window` 对象，在 Node.js 环境中是 `global` 对象。
+
+```js
+console.log(this); // 在浏览器中，这将记录 window 对象（对于非严格模式）。
+```
+
+### 在常规函数调用中
+
+当一个函数在全局上下文中或作为独立函数被调用时，`this` 引用全局对象（在非严格模式下）或 `undefined`（在严格模式下）。
+
+```js
+function showThis() {
+  console.log(this);
+}
+
+showThis(); // 在非严格模式下：Window（全局对象）。在严格模式下：undefined。
+```
+
+### 在方法调用中
+
+当一个函数作为对象的方法被调用时，`this` 引用该方法被调用的对象。
+
+```js live
+const obj = {
+  name: 'John',
+  showThis: function () {
+    console.log(this);
+  },
+};
+
+obj.showThis(); // { name: 'John', showThis: ƒ }
+```
+
+请注意，如果你这样做，它就和常规函数调用一样，而不是方法调用。`this` 已经失去了它的上下文，不再指向 `obj`。
+
+```js
+const obj = {
+  name: 'John',
+  showThis: function () {
+    console.log(this);
+  },
+};
+
+const showThisStandalone = obj.showThis;
+showThisStandalone(); // 在非严格模式下：Window（全局对象）。在严格模式下：undefined。
+```
+
+### 在函数构造器中
+
+当一个函数被用作构造器（使用 `new` 关键字调用）时，`this` 指的是新创建的实例。在下面的例子中，`this` 指的是正在创建的 `Person` 对象，并且 `name` 属性是在该对象上设置的。
+
+```js live
+function Person(name) {
+  this.name = name;
+}
+
+const person = new Person('John');
+console.log(person.name); // "John"
+```
+
+### 在类构造函数和方法中
+
+在 ES2015 类中，`this` 的行为与在对象方法中一样。它指的是类的实例。
+
+```js live
+class Person {
+  constructor(name) {
+    this.name = name;
+  }
+
+  showThis() {
+    console.log(this);
+  }
+}
+
+const person = new Person('John');
+person.showThis(); // Person {name: 'John'}
+
+const showThisStandalone = person.showThis;
+showThisStandalone(); // `undefined` 因为类的所有部分都是严格模式。
+```
+
+### 显式绑定 `this`
+
+你可以使用 `bind()`、`call()` 或 `apply()` 来显式设置函数的 `this` 的值。
+
+使用 `call()` 和 `apply()` 方法允许您在调用函数时显式设置 `this` 的值。
+
+```js live
+function showThis() {
+  console.log(this);
+}
+const obj = { name: 'John' };
+
+showThis.call(obj); // { name: 'John' }
+showThis.apply(obj); // { name: 'John' }
+```
+
+`bind()` 方法创建一个新函数，并将 `this` 绑定到指定的值。
+
+```js live
+function showThis() {
+  console.log(this);
+}
+const obj = { name: 'John' };
+
+const boundFunc = showThis.bind(obj);
+boundFunc(); // { name: 'John' }
+```
+
+### 在箭头函数中
+
+箭头函数没有自己的 `this` 上下文。相反，`this` 是词法作用域的，这意味着它继承了定义时周围作用域的 `this` 值。
+
+在这个例子中，`this` 指的是全局对象（window 或 global），因为箭头函数没有绑定到 `person` 对象。
+
+```js live
+const person = {
+  firstName: 'John',
+  sayHello: () => {
+    console.log(`Hello, my name is ${this.firstName}!`);
+  },
+};
+
+person.sayHello(); // "Hello, my name is undefined!"
+```
+
+在下面的例子中，箭头函数中的 `this` 将是其封闭上下文的 `this` 值，因此它取决于 `showThis()` 的调用方式。
+
+```js
+const obj = {
+  name: 'John',
+  showThis: function () {
+    const arrowFunc = () => {
+      console.log(this);
+    };
+    arrowFunc();
+  },
+};
+
+obj.showThis(); // { name: 'John', showThis: ƒ }
+
+const showThisStandalone = obj.showThis;
+showThisStandalone(); // 在非严格模式下：Window（全局对象）。在严格模式下：undefined。
+```
+
+因此，箭头函数中的 `this` 值不能通过 `bind()`、`apply()` 或 `call()` 方法设置，它也不会指向对象方法中的当前对象。
+
+```js
+const obj = {
+  name: 'Alice',
+  regularFunction: function () {
+    console.log('Regular function:', this.name);
+  },
+  arrowFunction: () => {
+    console.log('Arrow function:', this.name);
+  },
+};
+
+const anotherObj = {
+  name: 'Bob',
+};
+
+// 使用 call/apply/bind 和常规函数
+obj.regularFunction.call(anotherObj); // Regular function: Bob
+obj.regularFunction.apply(anotherObj); // Regular function: Bob
+const boundRegularFunction = obj.regularFunction.bind(anotherObj);
+boundRegularFunction(); // Regular function: Bob
+
+// 使用 call/apply/bind 和箭头函数，`this` 指的是全局作用域，并且不能被修改。
+obj.arrowFunction.call(anotherObj); // Arrow function: window/undefined (depending if strict mode)
+obj.arrowFunction.apply(anotherObj); // Arrow function: window/undefined (depending if strict mode)
+const boundArrowFunction = obj.arrowFunction.bind(anotherObj);
+boundArrowFunction(); // Arrow function: window/undefined (depending if strict mode)
+```
+
+### 在事件处理程序中
+
+当一个函数被调用为 DOM 事件处理程序时，`this` 指的是触发该事件的元素。在这个例子中，`this` 指的是被点击的 `<button>` 元素。
+
+```html
+<button id="my-button" onclick="console.log(this)">Click me</button>
+<!-- Logs the button element -->
+```
+
+使用 JavaScript 设置事件处理程序时，`this` 也指的是接收事件的元素。
+
+```js
+document.getElementById('my-button').addEventListener('click', function () {
+  console.log(this); // Logs the button element
+});
+```
+
+如上所述，ES2015 引入了 [箭头函数](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，它使用 [封闭的词法范围](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this)。这通常很方便，但确实阻止了调用者通过 `.call`/`.apply`/`.bind` 定义 `this` 上下文。其中一个后果是，如果您使用箭头函数定义 `.addEventListener()` 的回调参数，DOM 事件处理程序将无法在您的事件处理程序函数中正确绑定 `this`。
+
+```js
+document.getElementById('my-button').addEventListener('click', () => {
+  console.log(this); // Window / undefined (depending on whether strict mode) instead of the button element.
+});
+```
+
+总而言之，JavaScript 中的 `this` 指的是函数或脚本的当前执行上下文，其值可以根据使用它的上下文而改变。理解 `this` 的工作方式对于构建健壮且可维护的 JavaScript 应用程序至关重要。
+
+## 延伸阅读
+
+* [this - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)
+* [The Simple Rules to `this` in Javascript](https://medium.com/m/global-identity-2?redirectUrl=https%3A%2F%2Fcodeburst.io%2Fthe-simple-rules-to-this-in-javascript-35d97f31bde3)
diff --git a/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.langnostic.json b/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.langnostic.json
new file mode 100644
index 0000000..b3df7ac
--- /dev/null
+++ b/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.langnostic.json
@@ -0,0 +1,54 @@
+{
+  "frontmatter": {
+    "title": "eeba62ba"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "980a7499",
+        "b7f83130",
+        "2a7816d0",
+        "d31d76ad",
+        "abc5b4e7",
+        "27a18226",
+        "5b0269a4",
+        "a48a2faf",
+        "fc625159",
+        "e293bbc3",
+        "88ad3fd9",
+        "9912c3a1",
+        "d8cf8c74",
+        "8fd6ee72",
+        "5de61f04",
+        "cac9a1fb",
+        "1f4770e5",
+        "c2276b55"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "980a7499",
+        "b7f83130",
+        "2a7816d0",
+        "d31d76ad",
+        "abc5b4e7",
+        "27a18226",
+        "5b0269a4",
+        "a48a2faf",
+        "fc625159",
+        "e293bbc3",
+        "88ad3fd9",
+        "9912c3a1",
+        "d8cf8c74",
+        "8fd6ee72",
+        "5de61f04",
+        "cac9a1fb",
+        "1f4770e5",
+        "c2276b55"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/zh-CN.mdx b/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/zh-CN.mdx
new file mode 100644
index 0000000..fb32c20
--- /dev/null
+++ b/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/zh-CN.mdx
@@ -0,0 +1,99 @@
+---
+title: 解释异步操作中回调函数的概念
+---
+
+## TL;DR
+
+回调函数是作为参数传递给另一个函数的函数，然后在外部函数中调用该函数以完成某种例程或操作。在异步操作中，回调用于处理需要时间才能完成的任务，例如网络请求或文件 I/O，而不会阻塞其余代码的执行。例如：
+
+```js live
+function fetchData(callback) {
+  setTimeout(() => {
+    const data = { name: 'John', age: 30 };
+    callback(data);
+  }, 1000);
+}
+
+fetchData((data) => {
+  console.log(data);
+});
+```
+
+***
+
+## 什么是回调函数？
+
+回调函数是作为参数传递给另一个函数并在完成某些操作后执行的函数。这在异步编程中特别有用，其中需要处理网络请求、文件 I/O 或计时器等操作，而不会阻塞主执行线程。
+
+### 同步与异步回调
+
+* **同步回调** 在传递给它们的函数中立即执行。它们是阻塞的，代码执行会等待它们完成。
+* **异步回调** 在完成某个事件或操作后执行。它们是非阻塞的，允许代码执行在等待操作完成的同时继续进行。
+
+### 同步回调示例
+
+```js live
+function greet(name, callback) {
+  console.log('Hello ' + name);
+  callback();
+}
+
+function sayGoodbye() {
+  console.log('Goodbye!');
+}
+
+greet('Alice', sayGoodbye);
+// Output:
+// Hello Alice
+// Goodbye!
+```
+
+### 异步回调示例
+
+```js live
+function fetchData(callback) {
+  setTimeout(() => {
+    const data = { name: 'John', age: 30 };
+    callback(data);
+  }, 1000);
+}
+
+fetchData((data) => {
+  console.log(data);
+});
+// Output after 1 second:
+// { name: 'John', age: 30 }
+```
+
+### 常见用例
+
+* **网络请求**：从 API 获取数据
+* **文件 I/O**：读取或写入文件
+* **计时器**：使用 `setTimeout` 或 `setInterval` 延迟执行
+* **事件处理**：响应用户操作，如单击或按键
+
+### 在回调中处理错误
+
+处理异步操作时，正确处理错误非常重要。一个常见的模式是使用回调函数的第一个参数来传递一个错误对象（如果有）。
+
+```js live
+function fetchData(callback) {
+  // assume asynchronous operation to fetch data
+  const { data, error } = { data: { name: 'John', age: 30 }, error: null };
+  callback(error, data);
+}
+
+fetchData((error, data) => {
+  if (error) {
+    console.error('An error occurred:', error);
+  } else {
+    console.log(data);
+  }
+});
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
+* [JavaScript.info: Callbacks](https://javascript.info/callbacks)
+* [Node.js: Asynchronous programming and callbacks](https://nodejs.org/en/knowledge/getting-started/control-flow/what-are-callbacks/)
diff --git a/questions/explain-the-concept-of-a-microtask-queue/en-US.langnostic.json b/questions/explain-the-concept-of-a-microtask-queue/en-US.langnostic.json
new file mode 100644
index 0000000..e4d253d
--- /dev/null
+++ b/questions/explain-the-concept-of-a-microtask-queue/en-US.langnostic.json
@@ -0,0 +1,54 @@
+{
+  "frontmatter": {
+    "title": "6e9360d9"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "9f8c52e9",
+        "2a7816d0",
+        "f88269dc",
+        "df8b5bba",
+        "7193af21",
+        "59a78bb1",
+        "eb130ea5",
+        "9b5019f0",
+        "d44d00ca",
+        "b52ffac3",
+        "11ea2a26",
+        "a956cc42",
+        "670df17e",
+        "a74d8261",
+        "6dd3b324",
+        "7cf0f039",
+        "1f4770e5",
+        "3096a863"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "9f8c52e9",
+        "2a7816d0",
+        "f88269dc",
+        "df8b5bba",
+        "7193af21",
+        "59a78bb1",
+        "eb130ea5",
+        "9b5019f0",
+        "d44d00ca",
+        "b52ffac3",
+        "11ea2a26",
+        "a956cc42",
+        "670df17e",
+        "a74d8261",
+        "6dd3b324",
+        "7cf0f039",
+        "1f4770e5",
+        "3096a863"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-a-microtask-queue/zh-CN.mdx b/questions/explain-the-concept-of-a-microtask-queue/zh-CN.mdx
new file mode 100644
index 0000000..b05f1c0
--- /dev/null
+++ b/questions/explain-the-concept-of-a-microtask-queue/zh-CN.mdx
@@ -0,0 +1,70 @@
+---
+title: 解释微任务队列的概念
+---
+
+## TL;DR
+
+微任务队列是一个任务队列，需要在当前执行的脚本之后和任何其他任务之前执行。微任务通常用于需要紧接在当前操作之后执行的任务，例如 promise 回调。微任务队列在宏任务队列之前处理，确保微任务尽快执行。
+
+***
+
+## 微任务队列的概念
+
+### 什么是微任务队列？
+
+微任务队列是 JavaScript 事件循环机制的一部分。它是一个队列，用于保存需要在当前执行的脚本之后和宏任务队列中的任何其他任务之前执行的任务。微任务通常用于需要尽快执行的操作，例如 promise 回调和 `MutationObserver` 回调。
+
+### 微任务队列如何工作？
+
+1. **执行顺序**：微任务队列在当前执行的脚本之后和宏任务队列之前处理。这意味着微任务的优先级高于宏任务。
+2. **事件循环**：在事件循环的每次迭代期间，JavaScript 引擎首先处理微任务队列中的所有微任务，然后再转到宏任务队列。
+3. **添加微任务**：可以使用 `Promise.resolve().then()` 和 `queueMicrotask()` 等方法将微任务添加到微任务队列中。
+
+### 例子
+
+这里有一个例子来说明微任务队列的工作原理：
+
+```js live
+console.log('Script start');
+
+setTimeout(() => {
+  console.log('setTimeout');
+}, 0);
+
+Promise.resolve()
+  .then(() => {
+    console.log('Promise 1');
+  })
+  .then(() => {
+    console.log('Promise 2');
+  });
+
+console.log('Script end');
+```
+
+输出：
+
+```
+Script start
+Script end
+Promise 1
+Promise 2
+setTimeout
+```
+
+在这个例子中：
+
+* 同步代码（`console.log('Script start')` 和 `console.log('Script end')`）首先执行。
+* promise 回调（`Promise 1` 和 `Promise 2`）被添加到微任务队列中，然后执行。
+* `setTimeout` 回调被添加到宏任务队列中，最后执行。
+
+### 用例
+
+1. **Promise 回调**：微任务通常用于 promise 回调，以确保它们在当前操作之后尽快执行。
+2. **MutationObserver**：`MutationObserver` API 使用微任务来通知 DOM 中的更改。
+
+## 延伸阅读
+
+* [MDN Web 文档：微任务](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide)
+* [JavaScript 事件循环解释](https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop)
+* [理解 JavaScript 微任务队列](https://javascript.info/microtask-queue)
diff --git a/questions/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/en-US.langnostic.json b/questions/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/en-US.langnostic.json
new file mode 100644
index 0000000..9fd11be
--- /dev/null
+++ b/questions/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/en-US.langnostic.json
@@ -0,0 +1,74 @@
+{
+  "frontmatter": {
+    "title": "c319828f"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "ef12deaa",
+        "2a7816d0",
+        "1f4647e1",
+        "b37a3266",
+        "407a0694",
+        "a3cd695d",
+        "24ce942e",
+        "6713c940",
+        "a4184ac7",
+        "a8313a18",
+        "46c46edc",
+        "b63a5de5",
+        "a3119474",
+        "76d52f4f",
+        "baef3852",
+        "9e416e41",
+        "837073c9",
+        "9408fe7b",
+        "6a91f2ea",
+        "cc9c3f80",
+        "f8e26a92",
+        "2727d1ce",
+        "5e1cd08a",
+        "928b5db7",
+        "8a9928c8",
+        "aabd55a0",
+        "1f4770e5",
+        "4a178175"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "ef12deaa",
+        "2a7816d0",
+        "1f4647e1",
+        "b37a3266",
+        "407a0694",
+        "a3cd695d",
+        "24ce942e",
+        "6713c940",
+        "a4184ac7",
+        "a8313a18",
+        "46c46edc",
+        "b63a5de5",
+        "a3119474",
+        "76d52f4f",
+        "baef3852",
+        "9e416e41",
+        "837073c9",
+        "9408fe7b",
+        "6a91f2ea",
+        "cc9c3f80",
+        "f8e26a92",
+        "2727d1ce",
+        "5e1cd08a",
+        "928b5db7",
+        "8a9928c8",
+        "aabd55a0",
+        "1f4770e5",
+        "4a178175"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/zh-CN.mdx b/questions/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/zh-CN.mdx
new file mode 100644
index 0000000..b50d98e
--- /dev/null
+++ b/questions/explain-the-concept-of-caching-and-how-it-can-be-used-to-improve-performance/zh-CN.mdx
@@ -0,0 +1,84 @@
+---
+title: 解释缓存的概念以及如何使用它来提高性能
+---
+
+## TL;DR
+
+缓存是一种用于存储文件或数据的副本的临时存储技术，以减少访问它们所需的时间。它通过减少重复从原始来源获取数据的需要来提高性能。在前端开发中，可以使用浏览器缓存、service workers 和 HTTP 标头（如 `Cache-Control`）来实现缓存。
+
+***
+
+## 缓存的概念以及如何使用它来提高性能
+
+### 什么是缓存？
+
+缓存是一种用于将文件或数据的副本存储在临时存储位置（称为缓存）中的技术，以减少访问它们所需的时间。缓存的主要目标是通过最大限度地减少重复从原始来源获取数据的需要来提高性能。
+
+### 缓存的类型
+
+#### 浏览器缓存
+
+浏览器缓存将网页、图像和其他资源的副本存储在用户设备的本地。当用户重新访问网站时，浏览器可以从缓存中加载这些资源，而不是从服务器获取它们，从而加快加载时间。
+
+#### Service workers
+
+Service workers 是在后台运行的脚本，可以拦截网络请求。它们可以缓存资源并从缓存中提供它们，即使在用户离线时也是如此。这可以显著提高性能并提供更好的用户体验。
+
+#### HTTP 缓存
+
+HTTP 缓存涉及使用 HTTP 标头来控制如何以及何时缓存资源。常见的标头包括 `Cache-Control`、`Expires` 和 `ETag`。
+
+### 缓存如何提高性能
+
+#### 减少延迟
+
+通过将经常访问的数据存储在更靠近用户的位置，缓存减少了检索该数据所需的时间。这可以加快加载时间并提供更流畅的用户体验。
+
+#### 减少服务器负载
+
+缓存减少了向服务器发出的请求数量，这有助于减少服务器负载并提高整体性能。
+
+#### 离线访问
+
+通过 Service Worker，即使在用户离线时也可以提供缓存的资源，从而提供无缝体验。
+
+### 实现缓存
+
+#### 浏览器缓存示例
+
+```html
+<head>
+  <link rel="stylesheet" href="styles.css" />
+  <script src="app.js"></script>
+</head>
+```
+
+#### Service worker 示例
+
+```js
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open('v1').then((cache) => {
+      return cache.addAll(['/index.html', '/styles.css', '/app.js']);
+    }),
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      return response || fetch(event.request);
+    }),
+  );
+});
+```
+
+#### HTTP 缓存示例
+
+```http
+Cache-Control: max-age=3600
+```
+
+## 延伸阅读
+
+* [Service Workers: an Introduction](https://developers.google.com/web/fundamentals/primers/service-workers)
diff --git a/questions/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/en-US.langnostic.json b/questions/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/en-US.langnostic.json
new file mode 100644
index 0000000..ee462d2
--- /dev/null
+++ b/questions/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/en-US.langnostic.json
@@ -0,0 +1,70 @@
+{
+  "frontmatter": {
+    "title": "5b42839e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "172ffd1e",
+        "2a7816d0",
+        "29768a8e",
+        "baf6db58",
+        "5f376a2",
+        "7019970f",
+        "9b5019f0",
+        "5ab8d5da",
+        "44a93b82",
+        "3ac49af5",
+        "acf59446",
+        "a55554af",
+        "d76d861f",
+        "dbf5de9e",
+        "4d3c2eaf",
+        "63e37a1f",
+        "46ed72e3",
+        "a87ced2",
+        "1a83fd81",
+        "8795769d",
+        "2819c383",
+        "66e3a020",
+        "5fedbc8e",
+        "d4ed1627",
+        "1f4770e5",
+        "2293135e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "172ffd1e",
+        "2a7816d0",
+        "29768a8e",
+        "baf6db58",
+        "5f376a2",
+        "7019970f",
+        "9b5019f0",
+        "5ab8d5da",
+        "44a93b82",
+        "3ac49af5",
+        "acf59446",
+        "a55554af",
+        "d76d861f",
+        "dbf5de9e",
+        "4d3c2eaf",
+        "63e37a1f",
+        "46ed72e3",
+        "a87ced2",
+        "1a83fd81",
+        "8795769d",
+        "2819c383",
+        "66e3a020",
+        "5fedbc8e",
+        "d4ed1627",
+        "1f4770e5",
+        "2293135e"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/zh-CN.mdx b/questions/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/zh-CN.mdx
new file mode 100644
index 0000000..02bfec4
--- /dev/null
+++ b/questions/explain-the-concept-of-code-coverage-and-how-it-can-be-used-to-assess-test-quality/zh-CN.mdx
@@ -0,0 +1,86 @@
+---
+title: 解释代码覆盖率的概念以及如何使用它来评估测试质量
+---
+
+## TL;DR
+
+代码覆盖率是一个衡量测试套件运行时执行代码百分比的指标。它通过识别代码库中未测试的部分来帮助评估测试的质量。较高的代码覆盖率通常表明测试更彻底，但并不能保证没有错误。可以使用 Istanbul 或 Jest 等工具来衡量代码覆盖率。
+
+***
+
+## 什么是代码覆盖率？
+
+代码覆盖率是一个软件测试指标，用于确定在自动化测试期间执行的代码量。它提供了关于代码库的哪些部分正在被测试以及哪些部分没有被测试的见解。
+
+### 代码覆盖率的类型
+
+1. **语句覆盖率**：衡量已执行的代码中的语句数量。
+2. **分支覆盖率**：衡量每个分支（例如，`if` 和 `else` 块）是否已被执行。
+3. **函数覆盖率**：衡量代码中每个函数是否已被调用。
+4. **行覆盖率**：衡量已执行的代码行数。
+5. **条件覆盖率**：衡量每个布尔子表达式是否已被评估为真和假。
+
+### 示例
+
+考虑以下 JavaScript 函数：
+
+```js
+function isEven(num) {
+  if (num % 2 === 0) {
+    return true;
+  } else {
+    return false;
+  }
+}
+```
+
+此函数的测试套件可能如下所示：
+
+```js
+test('isEven returns true for even numbers', () => {
+  expect(isEven(2)).toBe(true);
+});
+
+test('isEven returns false for odd numbers', () => {
+  expect(isEven(3)).toBe(false);
+});
+```
+
+在此测试套件上运行代码覆盖率工具将显示 100% 的语句、分支、函数和行覆盖率，因为代码的所有部分都已执行。
+
+## 如何衡量代码覆盖率
+
+### 工具
+
+1. **Istanbul**：一个流行的 JavaScript 代码覆盖率工具。
+2. **Jest**：一个测试框架，包含内置的代码覆盖率报告。
+3. **Karma**：一个测试运行器，可以配置为使用 Istanbul 进行代码覆盖率。
+
+### 使用 Jest 的示例
+
+要使用 Jest 衡量代码覆盖率，您可以在运行测试时添加 `--coverage` 标志：
+
+```bash
+jest --coverage
+```
+
+这将生成一个覆盖率报告，显示测试覆盖代码的百分比。
+
+## 使用代码覆盖率评估测试质量
+
+### 优点
+
+* **识别未测试的代码**：帮助找到未被测试覆盖的代码库部分。
+* **改进测试套件**：鼓励编写更全面的测试。
+* **增加信心**：更高的覆盖率可以增加对代码稳定性的信心。
+
+### 局限性
+
+* **虚假的安全感**：高覆盖率并不能保证没有错误。
+* **质量胜于数量**：100% 的覆盖率并不意味着测试质量高。测试还应检查边缘情况和潜在错误。
+
+## 延伸阅读
+
+* [Istanbul documentation](https://istanbul.js.org/)
+* [Jest code coverage](https://jestjs.io/docs/en/coverage)
+* [Karma coverage](https://karma-runner.github.io/6.3/intro/installation.html)
diff --git a/questions/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/en-US.langnostic.json b/questions/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/en-US.langnostic.json
new file mode 100644
index 0000000..5e85ff3
--- /dev/null
+++ b/questions/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "448c8185"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "293595c9",
+        "e41980b",
+        "2a7816d0",
+        "ba31e354",
+        "6f16ff94",
+        "e1c74fc9",
+        "b50e2cf4",
+        "eebac08f",
+        "adec322a",
+        "e41980b",
+        "1aafcf07",
+        "e0339a0",
+        "e9f379fa",
+        "3e11ad53",
+        "e37344eb",
+        "8f8fc594",
+        "c8c62017",
+        "915e71f8",
+        "3a463542",
+        "6a4d595f",
+        "849eb731",
+        "1f4770e5",
+        "a2eeaa"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "293595c9",
+        "e41980b",
+        "2a7816d0",
+        "ba31e354",
+        "6f16ff94",
+        "e1c74fc9",
+        "b50e2cf4",
+        "eebac08f",
+        "adec322a",
+        "e41980b",
+        "1aafcf07",
+        "e0339a0",
+        "e9f379fa",
+        "3e11ad53",
+        "e37344eb",
+        "8f8fc594",
+        "c8c62017",
+        "915e71f8",
+        "3a463542",
+        "6a4d595f",
+        "849eb731",
+        "1f4770e5",
+        "a2eeaa"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/zh-CN.mdx b/questions/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/zh-CN.mdx
new file mode 100644
index 0000000..fb61ce2
--- /dev/null
+++ b/questions/explain-the-concept-of-content-security-policy-csp-and-how-it-enhances-security/zh-CN.mdx
@@ -0,0 +1,61 @@
+---
+title: 解释内容安全策略 (CSP) 的概念以及它如何增强安全性
+---
+
+## 总结
+
+内容安全策略 (CSP) 是一项安全功能，通过指定受信任的内容来源，帮助防止各种类型的攻击，例如跨站点脚本 (XSS) 和数据注入攻击。它的工作原理是允许开发人员定义一个受信任的脚本、样式和图像等内容来源的白名单。这通过 HTTP 标头或 meta 标签完成。例如，您可以使用 `Content-Security-Policy` 标头来指定仅应执行来自您自己域的脚本：
+
+```http
+Content-Security-Policy: script-src 'self'
+```
+
+***
+
+## 什么是内容安全策略 (CSP)？
+
+内容安全策略 (CSP) 是一项安全标准，旨在缓解一系列攻击，包括跨站点脚本 (XSS) 和数据注入攻击。CSP 允许 Web 开发人员控制用户代理允许为给定页面加载的资源。通过指定受信任内容来源的白名单，CSP 有助于防止恶意内容的执行。
+
+### CSP 的工作原理
+
+CSP 的工作原理是允许开发人员定义一组规则，用于指定哪些内容来源被认为是可信的。这些规则通过 HTTP 标头或 meta 标签传递给浏览器。当浏览器加载页面时，它会检查 CSP 规则并阻止任何与指定来源不匹配的内容。
+
+### CSP 标头的示例
+
+以下是一个简单的 CSP 标头的示例，该标头仅允许来自同一来源的脚本：
+
+```http
+Content-Security-Policy: script-src 'self'
+```
+
+此策略告诉浏览器仅执行从与页面本身相同的来源加载的脚本。
+
+### 常用指令
+
+* `object-src`：指定 Flash 等插件的有效来源。
+
+### 使用 CSP 的好处
+
+* **提高安全态势**：实施 CSP 是一项积极措施，可增强 Web 应用程序的整体安全性。
+
+### 实施 CSP
+
+可以使用 HTTP 标头或 meta 标签来实现 CSP。通常首选 HTTP 标头方法，因为它更安全，并且不易被攻击者覆盖。
+
+#### 使用 HTTP 标头
+
+```http
+Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com
+```
+
+#### 使用 meta 标签
+
+```html
+<meta
+  http-equiv="Content-Security-Policy"
+  content="default-src 'self'; script-src 'self' https://trusted.cdn.com" />
+```
+
+## 延伸阅读
+
+* [Google Developers: CSP: Content Security Policy](https://developers.google.com/web/fundamentals/security/csp)
diff --git a/questions/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/en-US.langnostic.json b/questions/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/en-US.langnostic.json
new file mode 100644
index 0000000..233aa27
--- /dev/null
+++ b/questions/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/en-US.langnostic.json
@@ -0,0 +1,60 @@
+{
+  "frontmatter": {
+    "title": "263ed28c"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "87635176",
+        "2a7816d0",
+        "2683cb4e",
+        "26674715",
+        "1c4ea590",
+        "6e8f2ac6",
+        "8ad02911",
+        "3c08d812",
+        "918297ff",
+        "716b84bd",
+        "e07ea3e9",
+        "f18f1c05",
+        "2b3416e4",
+        "3011309e",
+        "4633a4e8",
+        "185d59b4",
+        "1456e5c7",
+        "3ed327fb",
+        "2b3a8c8b",
+        "79360ef1",
+        "c835929b"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "87635176",
+        "2a7816d0",
+        "2683cb4e",
+        "26674715",
+        "1c4ea590",
+        "6e8f2ac6",
+        "8ad02911",
+        "3c08d812",
+        "918297ff",
+        "716b84bd",
+        "e07ea3e9",
+        "f18f1c05",
+        "2b3416e4",
+        "3011309e",
+        "4633a4e8",
+        "185d59b4",
+        "1456e5c7",
+        "3ed327fb",
+        "2b3a8c8b",
+        "79360ef1",
+        "c835929b"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/zh-CN.mdx b/questions/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/zh-CN.mdx
new file mode 100644
index 0000000..06a5f50
--- /dev/null
+++ b/questions/explain-the-concept-of-cross-site-request-forgery-csrf-and-its-mitigation-techniques/zh-CN.mdx
@@ -0,0 +1,63 @@
+---
+title: 解释跨站点请求伪造 (CSRF) 的概念及其缓解技术
+---
+
+## TL;DR
+
+跨站点请求伪造 (CSRF) 是一种攻击，恶意网站会诱骗用户的浏览器向用户已通过身份验证的另一个站点发出不需要的请求。这可能导致代表用户执行未经授权的操作。缓解技术包括使用反 CSRF 令牌、SameSite cookie 和确保适当的 CORS 配置。
+
+***
+
+## 跨站点请求伪造 (CSRF) 及其缓解技术
+
+### 什么是 CSRF？
+
+跨站点请求伪造 (CSRF) 是一种攻击类型，当恶意网站导致用户的浏览器在用户已通过身份验证的不同站点上执行不需要的操作时，就会发生这种攻击。这可能导致未经授权的操作，例如更改帐户详细信息、进行购买或其他用户无意执行的操作。
+
+### CSRF 如何工作？
+
+1. **用户身份验证**：用户登录到受信任的网站（例如，银行网站）并收到身份验证 cookie。
+2. **恶意网站**：用户在仍登录到受信任网站的情况下访问恶意网站。
+3. **不需要的请求**：恶意网站包含向受信任网站发出请求的代码，使用用户的身份验证 cookie 代表用户执行操作。
+
+### 缓解技术
+
+#### 反 CSRF 令牌
+
+防止 CSRF 攻击的最有效方法之一是使用反 CSRF 令牌。这些令牌是服务器生成的、包含在表单或请求中的唯一且不可预测的值。然后，服务器验证该令牌以确保请求是合法的。
+
+```html
+<form method="POST" action="/update-profile">
+  <input type="hidden" name="csrf_token" value="unique_token_value" />
+  <!-- other form fields -->
+  <button type="submit">Update Profile</button>
+</form>
+```
+
+在服务器端，验证令牌以确保它与预期值匹配。
+
+#### SameSite cookie
+
+cookie 上的 `SameSite` 属性可以通过限制 cookie 如何与跨站点请求一起发送来帮助缓解 CSRF 攻击。`SameSite` 属性可以设置为 `Strict`、`Lax` 或 `None`。
+
+```http
+Set-Cookie: sessionId=abc123; SameSite=Strict
+```
+
+* `Strict`：Cookie 仅在第一方上下文中发送，而不是与第三方网站发起的请求一起发送。
+* `Lax`：Cookie 不会通过正常的跨站点子请求（例如，加载图像）发送，但会在用户从外部站点导航到 URL 时发送（例如，点击链接）。
+* `None`：Cookie 在所有上下文中发送，包括跨源请求。
+
+#### CORS（跨源资源共享）
+
+正确配置 CORS 可以通过确保只有受信任的来源才能向您的服务器发出请求来帮助防止 CSRF 攻击。这涉及在服务器上设置适当的标头以指定允许访问资源的来源。
+
+```http
+Access-Control-Allow-Origin: https://trustedwebsite.com
+```
+
+### 延伸阅读
+
+* [OWASP CSRF 预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html)
+* [MDN Web 文档：SameSite cookies](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Set-Cookie/SameSite)
+* [MDN Web 文档：跨域资源共享 (CORS)](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS)
diff --git a/questions/explain-the-concept-of-debouncing-and-throttling/en-US.langnostic.json b/questions/explain-the-concept-of-debouncing-and-throttling/en-US.langnostic.json
new file mode 100644
index 0000000..7bb7d1a
--- /dev/null
+++ b/questions/explain-the-concept-of-debouncing-and-throttling/en-US.langnostic.json
@@ -0,0 +1,60 @@
+{
+  "frontmatter": {
+    "title": "bdb54e0f"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "e0bf0fc6",
+        "8fe99b1c",
+        "b6ceacae",
+        "df0d9f8b",
+        "144aee45",
+        "2a7816d0",
+        "82338611",
+        "d5ddf6d9",
+        "9c54cfc4",
+        "9ba6aae0",
+        "c6877016",
+        "27dc1cb7",
+        "1d469c45",
+        "e0d93fc8",
+        "8f5e5605",
+        "9ba6aae0",
+        "8e8faeff",
+        "27dc1cb7",
+        "a188391e",
+        "1f4770e5",
+        "3eb83cab"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "e0bf0fc6",
+        "8fe99b1c",
+        "b6ceacae",
+        "df0d9f8b",
+        "144aee45",
+        "2a7816d0",
+        "82338611",
+        "d5ddf6d9",
+        "9c54cfc4",
+        "9ba6aae0",
+        "c6877016",
+        "27dc1cb7",
+        "1d469c45",
+        "e0d93fc8",
+        "8f5e5605",
+        "9ba6aae0",
+        "8e8faeff",
+        "27dc1cb7",
+        "a188391e",
+        "1f4770e5",
+        "3eb83cab"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-debouncing-and-throttling/zh-CN.mdx b/questions/explain-the-concept-of-debouncing-and-throttling/zh-CN.mdx
new file mode 100644
index 0000000..6ff08d3
--- /dev/null
+++ b/questions/explain-the-concept-of-debouncing-and-throttling/zh-CN.mdx
@@ -0,0 +1,119 @@
+---
+title: 解释防抖和节流的概念
+---
+
+## 总结
+
+防抖和节流是用于控制函数执行速率的技术。防抖确保函数仅在自上次调用后经过指定的延迟后才被调用。节流确保函数在一个指定的时间间隔内最多被调用一次。
+
+防抖会延迟函数的执行，直到自上次调用后经过一定的时间。这对于搜索输入框等场景非常有用，在这些场景中，您希望在用户停止输入后才进行 API 调用。
+
+```js live
+function debounce(func, delay) {
+  let timeoutId;
+  return function (...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func.apply(this, args), delay);
+  };
+}
+
+const debouncedHello = debounce(() => console.log('Hello world!'), 2000);
+debouncedHello(); // Prints 'Hello world!' after 2 seconds
+```
+
+节流确保函数在一个指定的时间间隔内最多被调用一次。这对于窗口调整大小或滚动等场景非常有用，在这些场景中，您希望限制函数被调用的次数。
+
+```js live
+function throttle(func, limit) {
+  let inThrottle;
+  return function (...args) {
+    if (!inThrottle) {
+      func.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+}
+
+const handleResize = throttle(() => {
+  // Update element positions
+  console.log('Window resized at', new Date().toLocaleTimeString());
+}, 2000);
+
+// Simulate rapid calls to handleResize every 100ms
+let intervalId = setInterval(() => {
+  handleResize();
+}, 100);
+// 'Window resized' is outputted only every 2 seconds due to throttling
+```
+
+***
+
+## 防抖和节流
+
+### 防抖
+
+防抖是一种技术，用于确保函数仅在自上次调用后经过一定时间后才执行。这在您希望限制函数被调用次数的场景中特别有用，例如处理用户输入事件（如按键或鼠标移动）。
+
+#### 使用案例
+
+想象一下，您有一个搜索输入框，并且您想进行 API 调用来获取搜索结果。如果没有防抖，每次用户输入一个字符时都会进行 API 调用，这可能会导致大量不必要的调用。防抖确保仅在用户停止输入指定时间后才进行 API 调用。
+
+#### 代码示例
+
+```js
+function debounce(func, delay) {
+  let timeoutId;
+  return function (...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => func.apply(this, args), delay);
+  };
+}
+
+// Usage
+const handleSearch = debounce((query) => {
+  // Make API call
+  console.log('API call with query:', query);
+}, 300);
+
+document.getElementById('searchInput').addEventListener('input', (event) => {
+  handleSearch(event.target.value);
+});
+```
+
+### 节流
+
+节流是一种技术，用于确保函数在一个指定的时间间隔内最多被调用一次。这在您希望限制函数被调用次数的场景中很有用，例如处理窗口调整大小或滚动等事件。
+
+#### 使用案例
+
+想象一下，您有一个函数，该函数根据窗口大小更新屏幕上元素的位置。如果没有节流，此函数可能会在用户调整窗口大小时每秒被调用多次，从而导致性能问题。节流确保该函数在一个指定的时间间隔内最多被调用一次。
+
+#### 代码示例
+
+```js live
+function throttle(func, limit) {
+  let inThrottle;
+  return function (...args) {
+    if (!inThrottle) {
+      func.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+}
+
+// Usage
+const handleResize = throttle(() => {
+  // Update element positions
+  console.log('Window resized');
+}, 100);
+
+window.addEventListener('resize', handleResize);
+```
+
+## 延伸阅读
+
+* [通过示例解释防抖和节流](https://css-tricks.com/debouncing-throttling-explained-examples/)
+* [了解防抖和节流之间的区别](https://www.freecodecamp.org/news/javascript-debounce-example/)
+* [Lodash 防抖和节流文档](https://lodash.com/docs/4.17.15#debounce)
diff --git a/questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.langnostic.json b/questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.langnostic.json
new file mode 100644
index 0000000..22f9a36
--- /dev/null
+++ b/questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/en-US.langnostic.json
@@ -0,0 +1,78 @@
+{
+  "frontmatter": {
+    "title": "faf08055"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "4343f7ff",
+        "d65dad60",
+        "2a7816d0",
+        "bd111846",
+        "44c43879",
+        "ee39f737",
+        "6b1f535a",
+        "14d9b8fe",
+        "72b08533",
+        "c383de16",
+        "22806766",
+        "f716cedc",
+        "84b9dad0",
+        "b029411",
+        "4f964001",
+        "60999da7",
+        "9b4f8c58",
+        "14d9b8fe",
+        "9d23190e",
+        "35444153",
+        "99a35ee6",
+        "e3490dde",
+        "84b9dad0",
+        "d2015ad4",
+        "7e957edf",
+        "10b4a84f",
+        "1530bb48",
+        "21ba8ff5",
+        "1f4770e5",
+        "794d2aa7"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "4343f7ff",
+        "d65dad60",
+        "2a7816d0",
+        "bd111846",
+        "44c43879",
+        "ee39f737",
+        "6b1f535a",
+        "14d9b8fe",
+        "72b08533",
+        "c383de16",
+        "22806766",
+        "f716cedc",
+        "84b9dad0",
+        "b029411",
+        "4f964001",
+        "60999da7",
+        "9b4f8c58",
+        "14d9b8fe",
+        "9d23190e",
+        "35444153",
+        "99a35ee6",
+        "e3490dde",
+        "84b9dad0",
+        "d2015ad4",
+        "7e957edf",
+        "10b4a84f",
+        "1530bb48",
+        "21ba8ff5",
+        "1f4770e5",
+        "794d2aa7"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/zh-CN.mdx b/questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/zh-CN.mdx
new file mode 100644
index 0000000..d4d5b6d
--- /dev/null
+++ b/questions/explain-the-concept-of-destructuring-assignment-for-objects-and-arrays/zh-CN.mdx
@@ -0,0 +1,120 @@
+---
+title: 解释对象和数组的解构赋值概念
+---
+
+## 总结
+
+解构赋值是 JavaScript 中的一种语法，它允许您将数组中的值或对象中的属性解包到不同的变量中。对于数组，您使用方括号，对于对象，您使用花括号。例如：
+
+```js live
+// 数组解构
+const [a, b] = [1, 2];
+
+// 对象解构
+const { name, age } = { name: 'John', age: 30 };
+```
+
+***
+
+## 对象和数组的解构赋值
+
+解构赋值是一种方便的方法，用于将数组和对象中的值提取到单独的变量中。这可以使您的代码更具可读性和简洁性。
+
+### 数组解构
+
+数组解构允许您使用方括号将数组中的值解包到不同的变量中。
+
+#### 基本示例
+
+```js live
+const numbers = [1, 2, 3];
+const [first, second, third] = numbers;
+
+console.log(first); // 1
+console.log(second); // 2
+console.log(third); // 3
+```
+
+#### 跳过值
+
+您可以通过在逗号之间留一个空格来跳过数组中的值。
+
+```js live
+const numbers = [1, 2, 3];
+const [first, , third] = numbers;
+
+console.log(first); // 1
+console.log(third); // 3
+```
+
+#### 默认值
+
+如果数组没有足够的元素，您可以分配默认值。
+
+```js live
+const numbers = [1];
+const [first, second = 2] = numbers;
+
+console.log(first); // 1
+console.log(second); // 2
+```
+
+### 对象解构
+
+对象解构允许您使用花括号将对象中的属性解包到不同的变量中。
+
+#### 基本示例
+
+```js live
+const person = { name: 'John', age: 30 };
+const { name, age } = person;
+
+console.log(name); // John
+console.log(age); // 30
+```
+
+#### 重命名变量
+
+您可以在解构时重命名变量。
+
+```js live
+const person = { name: 'John', age: 30 };
+const { name: personName, age: personAge } = person;
+
+console.log(personName); // John
+console.log(personAge); // 30
+```
+
+#### 默认值
+
+如果属性在对象中不存在，您可以分配默认值。
+
+```js live
+const person = { name: 'John' };
+const { name, age = 25 } = person;
+
+console.log(name); // John
+console.log(age); // 25
+```
+
+#### 嵌套对象
+
+您也可以解构嵌套对象。
+
+```js live
+const person = { name: 'John', address: { city: 'New York', zip: '10001' } };
+const {
+  name,
+  address: { city, zip },
+} = person;
+
+console.log(name); // John
+console.log(city); // New York
+console.log(zip); // 10001
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
+* [JavaScript.info: Destructuring assignment](https://javascript.info/destructuring-assignment)
+* [FreeCodeCamp: Destructuring assignment](https://www.freecodecamp.org/news/destructuring-assignment-in-es6-30e398f21d10/)
diff --git a/questions/explain-the-concept-of-error-propagation-in-javascript/en-US.langnostic.json b/questions/explain-the-concept-of-error-propagation-in-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..e11fb15
--- /dev/null
+++ b/questions/explain-the-concept-of-error-propagation-in-javascript/en-US.langnostic.json
@@ -0,0 +1,58 @@
+{
+  "frontmatter": {
+    "title": "37957fe"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "5b167941",
+        "ec95b57b",
+        "2a7816d0",
+        "8bf53bd5",
+        "e3442fc5",
+        "2961888",
+        "57146e71",
+        "cc9d21f9",
+        "2e84b21e",
+        "ec95b57b",
+        "be1d8b9a",
+        "187fe163",
+        "7f09e7d6",
+        "3718cbbf",
+        "d58fc766",
+        "3365175a",
+        "3b882e5b",
+        "649d13f3",
+        "1f4770e5",
+        "b03a35bb"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "5b167941",
+        "ec95b57b",
+        "2a7816d0",
+        "8bf53bd5",
+        "e3442fc5",
+        "2961888",
+        "57146e71",
+        "cc9d21f9",
+        "2e84b21e",
+        "ec95b57b",
+        "be1d8b9a",
+        "187fe163",
+        "7f09e7d6",
+        "3718cbbf",
+        "d58fc766",
+        "3365175a",
+        "3b882e5b",
+        "649d13f3",
+        "1f4770e5",
+        "b03a35bb"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-error-propagation-in-javascript/zh-CN.mdx b/questions/explain-the-concept-of-error-propagation-in-javascript/zh-CN.mdx
new file mode 100644
index 0000000..85fd139
--- /dev/null
+++ b/questions/explain-the-concept-of-error-propagation-in-javascript/zh-CN.mdx
@@ -0,0 +1,105 @@
+---
+title: 解释 JavaScript 中的错误传播概念
+---
+
+## TL;DR
+
+JavaScript 中的错误传播指的是错误如何通过调用堆栈传递。当函数中发生错误时，可以使用 `try...catch` 块捕获和处理它。如果未捕获，错误会沿着调用堆栈向上冒泡，直到它被捕获或导致程序终止。例如：
+
+```js live
+function a() {
+  throw new Error('An error occurred');
+}
+
+function b() {
+  a();
+}
+
+try {
+  b();
+} catch (e) {
+  console.error(e.message); // Outputs: An error occurred
+}
+```
+
+***
+
+## JavaScript 中的错误传播
+
+JavaScript 中的错误传播是一种机制，它允许错误沿着调用堆栈传递，直到它们被捕获和处理。这对于调试和确保错误不会导致整个应用程序意外崩溃至关重要。
+
+### 错误如何传播
+
+当函数中发生错误时，它可以在该函数内被捕获和处理，或者沿着调用堆栈传递到调用函数。如果调用函数不处理该错误，它会继续在堆栈上传播，直到它到达全局范围，这可能会导致程序终止。
+
+### 使用 `try...catch` 块
+
+为了处理错误并防止它们进一步传播，您可以使用 `try...catch` 块。这是一个例子：
+
+```js live
+function a() {
+  throw new Error('An error occurred');
+}
+
+function b() {
+  a();
+}
+
+try {
+  b();
+} catch (e) {
+  console.error(e.message); // Outputs: An error occurred
+}
+```
+
+在这个例子中，函数 `a` 中抛出的错误传播到函数 `b`，然后传播到 `try...catch` 块，在那里它最终被捕获和处理。
+
+### 异步代码的传播
+
+错误传播在异步代码（如 promises 和 `async/await`）中的工作方式有所不同。对于 promises，您可以使用 `.catch()` 来处理错误：
+
+```js live
+function a() {
+  return Promise.reject(new Error('An error occurred'));
+}
+
+function b() {
+  return a();
+}
+
+b().catch((e) => {
+  console.error(e.message); // Outputs: An error occurred
+});
+```
+
+对于 `async/await`，您可以使用 `try...catch` 块：
+
+```js live
+async function a() {
+  throw new Error('An error occurred');
+}
+
+async function b() {
+  await a();
+}
+
+(async () => {
+  try {
+    await b();
+  } catch (e) {
+    console.error(e.message); // Outputs: An error occurred
+  }
+})();
+```
+
+### 最佳实践
+
+* 始终在适当的级别处理错误，以防止它们不必要地传播。
+* 对同步代码使用 `try...catch` 块，对异步代码使用 `.catch()` 或带有 `async/await` 的 `try...catch`。
+* 记录错误以帮助调试，并向用户提供有意义的错误消息。
+
+## 延伸阅读
+
+* [MDN Web Docs: Error handling](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#exception_handling_statements)
+* [JavaScript.info: Error handling, "try...catch"](https://javascript.info/try-catch)
+* [Node.js Error Handling Best Practices](https://nodejs.dev/learn/error-handling-in-nodejs)
diff --git a/questions/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.langnostic.json b/questions/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.langnostic.json
new file mode 100644
index 0000000..c45ede5
--- /dev/null
+++ b/questions/explain-the-concept-of-hoisting-with-regards-to-functions/en-US.langnostic.json
@@ -0,0 +1,50 @@
+{
+  "frontmatter": {
+    "title": "13d50de"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "20406206",
+        "aa51f1b9",
+        "2a7816d0",
+        "f5599169",
+        "ec2260d9",
+        "85382bd2",
+        "42425171",
+        "c8679fed",
+        "7dbb6573",
+        "ebef5ef0",
+        "c1dce1a9",
+        "d25cb4b",
+        "5e9e708",
+        "ee71a154",
+        "1f4770e5",
+        "f4f94c23"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "20406206",
+        "aa51f1b9",
+        "2a7816d0",
+        "f5599169",
+        "ec2260d9",
+        "85382bd2",
+        "42425171",
+        "c8679fed",
+        "7dbb6573",
+        "ebef5ef0",
+        "c1dce1a9",
+        "d25cb4b",
+        "5e9e708",
+        "ee71a154",
+        "1f4770e5",
+        "f4f94c23"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-hoisting-with-regards-to-functions/zh-CN.mdx b/questions/explain-the-concept-of-hoisting-with-regards-to-functions/zh-CN.mdx
new file mode 100644
index 0000000..858d3e8
--- /dev/null
+++ b/questions/explain-the-concept-of-hoisting-with-regards-to-functions/zh-CN.mdx
@@ -0,0 +1,70 @@
+---
+title: 解释关于函数的提升概念
+---
+
+## TL;DR
+
+JavaScript 中的提升是一种行为，在编译阶段，函数声明会被移动到其包含作用域的顶部。这意味着你可以在代码中定义函数之前调用它。但是，这不适用于函数表达式或箭头函数，它们不会以相同的方式被提升。
+
+```js live
+// Function declaration
+hoistedFunction(); // Works fine
+function hoistedFunction() {
+  console.log('This function is hoisted');
+}
+
+// Function expression
+nonHoistedFunction(); // Throws an error
+var nonHoistedFunction = function () {
+  console.log('This function is not hoisted');
+};
+```
+
+***
+
+## 什么是提升？
+
+提升是一种 JavaScript 机制，在编译阶段，变量和函数声明会被移动到其包含作用域的顶部。这允许在代码中定义函数之前调用它们。
+
+### 函数声明
+
+函数声明会被完全提升。这意味着你可以在代码中声明函数之前调用它。
+
+```js live
+hoistedFunction(); // Works fine
+
+function hoistedFunction() {
+  console.log('This function is hoisted');
+}
+```
+
+### 函数表达式
+
+函数表达式（包括箭头函数）不会以相同的方式被提升。它们被视为变量赋值，并且仅被提升为 undefined。
+
+```js live
+nonHoistedFunction(); // Throws an error: TypeError: nonHoistedFunction is not a function
+
+var nonHoistedFunction = function () {
+  console.log('This function is not hoisted');
+};
+```
+
+### 箭头函数
+
+就提升而言，箭头函数的行为类似于函数表达式。
+
+```js live
+arrowFunction(); // Throws an error: TypeError: arrowFunction is not a function
+
+var arrowFunction = () => {
+  console.log('This arrow function is not hoisted');
+};
+```
+
+## 延伸阅读
+
+* [MDN Web Docs on Hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
+* [JavaScript.info on Hoisting](https://javascript.info/hoisting)
+* [MDN Web Docs on Function Declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)
+* [MDN Web Docs on Function Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function)
diff --git a/questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.langnostic.json b/questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.langnostic.json
new file mode 100644
index 0000000..6a4acbc
--- /dev/null
+++ b/questions/explain-the-concept-of-inheritance-in-es2015-classes/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "528b315e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "4dc5ca9f",
+        "5516c905",
+        "2a7816d0",
+        "3041a730",
+        "39ce6dd8",
+        "827ae944",
+        "a855c6b2",
+        "46758152",
+        "ba8ea597",
+        "c0179921",
+        "cfebc17e",
+        "c4db839b",
+        "3fa519d9",
+        "e37d3013",
+        "cc1df438",
+        "1f4770e5",
+        "c8e0edbf"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "4dc5ca9f",
+        "5516c905",
+        "2a7816d0",
+        "3041a730",
+        "39ce6dd8",
+        "827ae944",
+        "a855c6b2",
+        "46758152",
+        "ba8ea597",
+        "c0179921",
+        "cfebc17e",
+        "c4db839b",
+        "3fa519d9",
+        "e37d3013",
+        "cc1df438",
+        "1f4770e5",
+        "c8e0edbf"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-inheritance-in-es2015-classes/zh-CN.mdx b/questions/explain-the-concept-of-inheritance-in-es2015-classes/zh-CN.mdx
new file mode 100644
index 0000000..b3154d5
--- /dev/null
+++ b/questions/explain-the-concept-of-inheritance-in-es2015-classes/zh-CN.mdx
@@ -0,0 +1,132 @@
+---
+title: 解释 ES2015 类中的继承概念
+---
+
+## TL;DR
+
+ES2015 类中的继承允许一个类扩展另一个类，使子类能够从父类继承属性和方法。这是使用 `extends` 关键字完成的。`super` 关键字用于调用父类的构造函数和方法。这是一个快速示例：
+
+```js live
+class Animal {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(`${this.name} makes a noise.`);
+  }
+}
+
+class Dog extends Animal {
+  constructor(name, breed) {
+    super(name);
+    this.breed = breed;
+  }
+
+  speak() {
+    console.log(`${this.name} barks.`);
+  }
+}
+
+const dog = new Dog('Rex', 'German Shepherd');
+dog.speak(); // Rex barks.
+```
+
+***
+
+## ES2015 类中的继承
+
+### 基本概念
+
+ES2015 类中的继承允许一个类（子类）从另一个类（父类）继承属性和方法。这促进了代码重用和分层类结构。
+
+### 使用 `extends` 关键字
+
+使用 `extends` 关键字可以创建一个作为另一个类子类的类。子类继承父类的所有属性和方法。
+
+```js live
+class ParentClass {
+  constructor() {
+    this.parentProperty = 'I am a parent property';
+  }
+
+  parentMethod() {
+    console.log('This is a parent method');
+  }
+}
+
+class ChildClass extends ParentClass {
+  constructor() {
+    super(); // Calls the parent class constructor
+    this.childProperty = 'I am a child property';
+  }
+
+  childMethod() {
+    console.log('This is a child method');
+  }
+}
+
+const child = new ChildClass();
+console.log(child.parentProperty); // I am a parent property
+child.parentMethod(); // This is a parent method
+```
+
+### 使用 `super` 关键字
+
+`super` 关键字用于调用父类的构造函数并访问其方法。当您想在子类中初始化父类属性时，这是必需的。
+
+```js live
+class Animal {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(`${this.name} makes a noise.`);
+  }
+}
+
+class Dog extends Animal {
+  constructor(name, breed) {
+    super(name); // Calls the parent class constructor
+    this.breed = breed;
+  }
+
+  speak() {
+    super.speak(); // Calls the parent class method
+    console.log(`${this.name} barks.`);
+  }
+}
+
+const dog = new Dog('Rex', 'German Shepherd');
+dog.speak();
+// Rex makes a noise.
+// Rex barks.
+```
+
+### 方法重写
+
+子类可以重写父类中的方法。这允许子类提供已经在父类中定义的方法的特定实现。
+
+```js live
+class Animal {
+  speak() {
+    console.log('Animal makes a noise.');
+  }
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log('Dog barks.');
+  }
+}
+
+const dog = new Dog();
+dog.speak(); // Dog barks.
+```
+
+## 延伸阅读
+
+* [MDN Web 文档：类](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes)
+* [MDN Web 文档：继承](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
+* [JavaScript.info：类继承](https://zh.javascript.info/class-inheritance)
diff --git a/questions/explain-the-concept-of-input-validation-and-its-importance-in-security/en-US.langnostic.json b/questions/explain-the-concept-of-input-validation-and-its-importance-in-security/en-US.langnostic.json
new file mode 100644
index 0000000..5bd0678
--- /dev/null
+++ b/questions/explain-the-concept-of-input-validation-and-its-importance-in-security/en-US.langnostic.json
@@ -0,0 +1,46 @@
+{
+  "frontmatter": {
+    "title": "a0797bc2"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "b9b1fddb",
+        "2a7816d0",
+        "4c4db576",
+        "76990236",
+        "29cda8fc",
+        "7a23c7d5",
+        "6cdbb9c9",
+        "60ff0ed8",
+        "eeef6828",
+        "1bd4d65f",
+        "7ed5cd3e",
+        "2ac70d1f",
+        "1f4770e5",
+        "ff0e75d4"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "b9b1fddb",
+        "2a7816d0",
+        "4c4db576",
+        "76990236",
+        "29cda8fc",
+        "7a23c7d5",
+        "6cdbb9c9",
+        "60ff0ed8",
+        "eeef6828",
+        "1bd4d65f",
+        "7ed5cd3e",
+        "2ac70d1f",
+        "1f4770e5",
+        "ff0e75d4"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-input-validation-and-its-importance-in-security/zh-CN.mdx b/questions/explain-the-concept-of-input-validation-and-its-importance-in-security/zh-CN.mdx
new file mode 100644
index 0000000..0e2ec4e
--- /dev/null
+++ b/questions/explain-the-concept-of-input-validation-and-its-importance-in-security/zh-CN.mdx
@@ -0,0 +1,84 @@
+---
+title: 解释输入验证的概念及其在安全中的重要性
+---
+
+## TL;DR
+
+输入验证是确保用户输入正确、安全并满足应用程序要求的过程。它对安全至关重要，因为它有助于防止 SQL 注入、跨站点脚本 (XSS) 和其他形式的数据操纵等攻击。通过验证输入，您可以确保只有格式正确的数据才能进入您的系统，从而降低恶意数据造成损害的风险。
+
+***
+
+## 输入验证及其在安全中的重要性
+
+### 什么是输入验证？
+
+输入验证是验证用户或其他外部来源提供的数据在应用程序处理之前是否满足预期格式、类型和约束的过程。这可以包括检查：
+
+* 正确的数据类型（例如，字符串、数字）
+* 适当的格式（例如，电子邮件地址、电话号码）
+* 可接受的数值范围（例如，年龄在 0 到 120 岁之间）
+* 必填字段已填写
+
+### 输入验证的类型
+
+1. **客户端验证**：这发生在用户将数据发送到服务器之前，在用户的浏览器中进行。它向用户提供即时反馈，并可以改善用户体验。但是，不应仅依赖它来实现安全目的，因为它很容易被绕过。
+
+   ```html
+   <form>
+     <input type="text" id="username" required pattern="[A-Za-z0-9]{5,}" />
+     <input type="submit" />
+   </form>
+   ```
+
+2. **服务器端验证**：这发生在数据提交到服务器之后。它对于安全至关重要，因为它确保所有数据都经过验证，而不管客户端的行为如何。
+
+   ```js
+   const express = require('express');
+   const app = express();
+
+   app.post('/submit', (req, res) => {
+     const username = req.body.username;
+     if (!/^[A-Za-z0-9]{5,}$/.test(username)) {
+       return res.status(400).send('Invalid username');
+     }
+     // Proceed with processing the valid input
+   });
+   ```
+
+### 输入验证在安全中的重要性
+
+1. **防止 SQL 注入**：通过验证和清理输入，您可以防止攻击者将恶意 SQL 代码注入到您的数据库查询中。
+
+   ```js
+   const username = req.body.username;
+   const query = 'SELECT * FROM users WHERE username = ?';
+   db.query(query, [username], (err, results) => {
+     // Handle results
+   });
+   ```
+
+2. **防止跨站点脚本 (XSS)**：输入验证有助于确保用户输入不包含可能在浏览器中执行的恶意脚本。
+
+   ```js
+   const sanitizeHtml = require('sanitize-html');
+   const userInput = req.body.comment;
+   const sanitizedInput = sanitizeHtml(userInput);
+   ```
+
+3. **防止缓冲区溢出攻击**：通过验证输入数据的长度，您可以防止攻击者发送过大的输入，从而导致缓冲区溢出并使您的应用程序崩溃。
+
+4. **确保数据完整性**：输入验证通过确保仅处理和存储格式正确且预期的数据来帮助维护数据的完整性。
+
+### 输入验证的最佳实践
+
+* 始终在服务器端验证输入，即使您也在客户端进行验证
+* 尽可能使用内置验证函数和库
+* 清理输入以删除或转义潜在的有害字符
+* 实施白名单（仅允许已知的良好输入）而不是黑名单（阻止已知的错误输入）
+* 定期更新和审查您的验证规则以应对新的安全威胁
+
+## 延伸阅读
+
+* [OWASP 输入验证备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Input_Validation_Cheat_Sheet.html)
+* [MDN Web 文档：客户端表单验证](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
+* [Sanitize-html 库](https://www.npmjs.com/package/sanitize-html)
diff --git a/questions/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/en-US.langnostic.json b/questions/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/en-US.langnostic.json
new file mode 100644
index 0000000..ea55844
--- /dev/null
+++ b/questions/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/en-US.langnostic.json
@@ -0,0 +1,58 @@
+{
+  "frontmatter": {
+    "title": "36eddc8b"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "fd619192",
+        "4c8a3360",
+        "2a7816d0",
+        "2340e89e",
+        "3d01798d",
+        "7038ddb2",
+        "4e293a7f",
+        "a018c5c8",
+        "d61b86fa",
+        "3f1f84eb",
+        "1a5baa2",
+        "234b720",
+        "70533076",
+        "4c8a3360",
+        "689611e9",
+        "1387dbc5",
+        "83cbe7fe",
+        "9adb5bbb",
+        "1f4770e5",
+        "825318bc"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "fd619192",
+        "4c8a3360",
+        "2a7816d0",
+        "2340e89e",
+        "3d01798d",
+        "7038ddb2",
+        "4e293a7f",
+        "a018c5c8",
+        "d61b86fa",
+        "3f1f84eb",
+        "1a5baa2",
+        "234b720",
+        "70533076",
+        "4c8a3360",
+        "689611e9",
+        "1387dbc5",
+        "83cbe7fe",
+        "9adb5bbb",
+        "1f4770e5",
+        "825318bc"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/zh-CN.mdx b/questions/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/zh-CN.mdx
new file mode 100644
index 0000000..02e4d5c
--- /dev/null
+++ b/questions/explain-the-concept-of-lazy-loading-and-how-it-can-improve-performance/zh-CN.mdx
@@ -0,0 +1,72 @@
+---
+title: 解释惰性加载的概念以及它如何提高性能
+---
+
+## TL;DR
+
+惰性加载是一种设计模式，它将资源的加载延迟到实际需要时。这可以通过减少初始加载时间和节省带宽来显着提高性能。例如，网页上的图像可以进行惰性加载，以便它们仅在进入视口时加载。这可以使用 HTML 中的 `loading="lazy"` 属性或使用 JavaScript 库来实现。
+
+```html
+<img src="image.jpg" loading="lazy" alt="Lazy loaded image" />
+```
+
+***
+
+## 惰性加载的概念以及它如何提高性能
+
+### 什么是惰性加载？
+
+惰性加载是一种设计模式，用于推迟对象的初始化，直到需要时才进行。这可以应用于各种类型的资源，例如图像、视频、脚本，甚至从 API 获取的数据。
+
+### 惰性加载如何工作？
+
+惰性加载通过延迟加载资源直到实际需要时才进行。例如，网页上的图像可以进行惰性加载，以便它们仅在进入视口时加载。这可以使用 HTML 中的 `loading="lazy"` 属性或使用 JavaScript 库来实现。
+
+### 惰性加载的好处
+
+* **提高性能**：通过仅在初始加载时加载必要的资源，可以缩短页面加载时间，从而带来更快、响应更快的用户体验。
+* **减少带宽使用**：惰性加载有助于通过仅在需要时加载资源来节省带宽。
+* **更好的用户体验**：用户可以更快地开始与内容交互，因为初始加载时间缩短了。
+
+### 实现惰性加载
+
+#### 使用 HTML 中的 `loading` 属性
+
+实现图像惰性加载的最简单方法是使用 HTML 中的 `loading` 属性。
+
+```html
+<img src="image.jpg" loading="lazy" alt="Lazy loaded image" />
+```
+
+#### 使用 JavaScript
+
+对于更复杂的场景，您可以使用 JavaScript 来实现惰性加载。这是一个使用 Intersection Observer API 的示例：
+
+```js
+document.addEventListener('DOMContentLoaded', function () {
+  const lazyImages = document.querySelectorAll('img.lazy');
+
+  const imageObserver = new IntersectionObserver((entries, observer) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        const img = entry.target;
+        img.src = img.dataset.src;
+        img.classList.remove('lazy');
+        observer.unobserve(img);
+      }
+    });
+  });
+
+  lazyImages.forEach((image) => {
+    imageObserver.observe(image);
+  });
+});
+```
+
+在此示例中，带有 `lazy` 类的图像仅在进入视口时加载。
+
+## 延伸阅读
+
+* [MDN Web Docs: Lazy loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading)
+* [Google Developers: Lazy loading images and video](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video)
+* [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
diff --git a/questions/explain-the-concept-of-lexical-scoping/en-US.langnostic.json b/questions/explain-the-concept-of-lexical-scoping/en-US.langnostic.json
new file mode 100644
index 0000000..a766dac
--- /dev/null
+++ b/questions/explain-the-concept-of-lexical-scoping/en-US.langnostic.json
@@ -0,0 +1,58 @@
+{
+  "frontmatter": {
+    "title": "af91d864"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "f8875ab",
+        "b7c9b503",
+        "cdc318c9",
+        "2a7816d0",
+        "5449adb",
+        "78887597",
+        "a3b79723",
+        "52f723b5",
+        "9b5019f0",
+        "6ef3431",
+        "b7c9b503",
+        "670df17e",
+        "84bfb0a",
+        "d83b5de4",
+        "e386cee7",
+        "d5bfe237",
+        "670df17e",
+        "411f6623",
+        "1f4770e5",
+        "2b05c7f"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "f8875ab",
+        "b7c9b503",
+        "cdc318c9",
+        "2a7816d0",
+        "5449adb",
+        "78887597",
+        "a3b79723",
+        "52f723b5",
+        "9b5019f0",
+        "6ef3431",
+        "b7c9b503",
+        "670df17e",
+        "84bfb0a",
+        "d83b5de4",
+        "e386cee7",
+        "d5bfe237",
+        "670df17e",
+        "411f6623",
+        "1f4770e5",
+        "2b05c7f"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-lexical-scoping/zh-CN.mdx b/questions/explain-the-concept-of-lexical-scoping/zh-CN.mdx
new file mode 100644
index 0000000..d4faff8
--- /dev/null
+++ b/questions/explain-the-concept-of-lexical-scoping/zh-CN.mdx
@@ -0,0 +1,88 @@
+---
+title: 解释词法作用域的概念
+---
+
+## TL;DR
+
+词法作用域意味着变量的作用域由其在源代码中的位置决定，嵌套函数可以访问在其外部作用域中声明的变量。例如：
+
+```js live
+function outerFunction() {
+  let outerVariable = 'I am outside!';
+
+  function innerFunction() {
+    console.log(outerVariable); // 'I am outside!'
+  }
+
+  innerFunction();
+}
+
+outerFunction();
+```
+
+在这个例子中，`innerFunction` 可以访问 `outerVariable`，因为词法作用域。
+
+***
+
+## 词法作用域
+
+词法作用域是 JavaScript 和许多其他编程语言中的一个基本概念。它决定了在嵌套函数中如何解析变量名。变量的作用域由其在源代码中的位置定义，嵌套函数可以访问在其外部作用域中声明的变量。
+
+### 词法作用域的工作原理
+
+当一个函数被定义时，它会捕获创建它的作用域。这意味着该函数可以访问其自身作用域中的变量以及任何包含（外部）作用域中的变量。
+
+### 例子
+
+考虑以下示例：
+
+```js live
+function outerFunction() {
+  let outerVariable = 'I am outside!';
+
+  function innerFunction() {
+    console.log(outerVariable); // 'I am outside!'
+  }
+
+  innerFunction();
+}
+
+outerFunction();
+```
+
+在这个例子中：
+
+* `outerFunction` 声明一个变量 `outerVariable`。
+* `innerFunction` 嵌套在 `outerFunction` 内部，并将 `outerVariable` 记录到控制台。
+* 当调用 `innerFunction` 时，由于词法作用域，它可以访问 `outerVariable`。
+
+### 嵌套函数和闭包
+
+词法作用域与闭包密切相关。当一个函数保留对其词法作用域的访问权限时，即使该函数在作用域之外执行，也会创建一个闭包。
+
+```js live
+function outerFunction() {
+  let outerVariable = 'I am outside!';
+
+  function innerFunction() {
+    console.log(outerVariable);
+  }
+
+  return innerFunction;
+}
+
+const myInnerFunction = outerFunction();
+myInnerFunction(); // 'I am outside!'
+```
+
+在这个例子中：
+
+* `outerFunction` 返回 `innerFunction`。
+* `myInnerFunction` 被赋值为返回的 `innerFunction`。
+* 当调用 `myInnerFunction` 时，它仍然可以访问 `outerVariable`，因为词法作用域创建了闭包。
+
+## 延伸阅读
+
+* [MDN Web Docs: Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)
+* [JavaScript.info: Lexical environment](https://javascript.info/closure#lexical-environment)
+* [Eloquent JavaScript: Functions and closures](https://eloquentjavascript.net/03_functions.html#h_jxlm8r9e2g)
diff --git a/questions/explain-the-concept-of-partial-application/en-US.langnostic.json b/questions/explain-the-concept-of-partial-application/en-US.langnostic.json
new file mode 100644
index 0000000..841f95e
--- /dev/null
+++ b/questions/explain-the-concept-of-partial-application/en-US.langnostic.json
@@ -0,0 +1,56 @@
+{
+  "frontmatter": {
+    "title": "bdd76e95"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "7a176a9c",
+        "ccb4ad60",
+        "2a7816d0",
+        "1993a874",
+        "663a1ffc",
+        "9b5019f0",
+        "30ade118",
+        "2b49d068",
+        "827b6403",
+        "6894639b",
+        "4e8ede6c",
+        "2fc5f052",
+        "2819c383",
+        "252dcac",
+        "65d97317",
+        "68e56b3b",
+        "7641f0f3",
+        "1f4770e5",
+        "e9d26722"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "7a176a9c",
+        "ccb4ad60",
+        "2a7816d0",
+        "1993a874",
+        "663a1ffc",
+        "9b5019f0",
+        "30ade118",
+        "2b49d068",
+        "827b6403",
+        "6894639b",
+        "4e8ede6c",
+        "2fc5f052",
+        "2819c383",
+        "252dcac",
+        "65d97317",
+        "68e56b3b",
+        "7641f0f3",
+        "1f4770e5",
+        "e9d26722"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-partial-application/zh-CN.mdx b/questions/explain-the-concept-of-partial-application/zh-CN.mdx
new file mode 100644
index 0000000..48e3dd2
--- /dev/null
+++ b/questions/explain-the-concept-of-partial-application/zh-CN.mdx
@@ -0,0 +1,69 @@
+---
+title: 解释部分应用的理念
+---
+
+## 总结
+
+部分应用是函数式编程中的一种技术，它将一个函数应用于其部分参数，从而产生一个接受剩余参数的新函数。这允许你从通用函数中创建更具体的函数。例如，如果你有一个函数 `add(a, b)`，你可以部分应用它来创建一个新的函数 `add5`，它总是将其参数加上 5。
+
+```js live
+function add(a, b) {
+  return a + b;
+}
+
+const add5 = add.bind(null, 5);
+console.log(add5(10)); // Outputs 15
+```
+
+***
+
+## 部分应用
+
+部分应用是一种函数式编程技术，它将一个函数应用于其部分参数，从而产生一个接受剩余参数的新函数。这对于从通用函数创建更具体的函数、提高代码可重用性和可读性很有用。
+
+### 示例
+
+考虑一个接受两个参数的简单 `add` 函数：
+
+```js
+function add(a, b) {
+  return a + b;
+}
+```
+
+使用部分应用，你可以创建一个新的函数 `add5`，它总是将其参数加上 5：
+
+```js
+const add5 = add.bind(null, 5);
+console.log(add5(10)); // Outputs 15
+```
+
+### 工作原理
+
+在上面的例子中，`add.bind(null, 5)` 创建了一个新函数，其中第一个参数 (`a`) 被固定为 5。`null` 值用作 `this` 上下文，在这种情况下与此无关。
+
+### 优点
+
+* **代码可重用性**：你可以从通用函数中创建更具体的函数，使你的代码更模块化和可重用。
+* **可读性**：部分应用的函数可以通过减少你需要传递的参数数量来使你的代码更容易阅读和理解。
+
+### 真实世界的例子
+
+部分应用经常用于 Lodash 等库中。例如，Lodash 的 `_.partial` 函数允许你轻松创建部分应用的函数：
+
+```js
+const _ = require('lodash');
+
+function greet(greeting, name) {
+  return `${greeting}, ${name}!`;
+}
+
+const sayHelloTo = _.partial(greet, 'Hello');
+console.log(sayHelloTo('John')); // Outputs "Hello, John!"
+```
+
+## 延伸阅读
+
+* [MDN Web 文档：Function.prototype.bind()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)
+* [Lodash 文档：\_.partial](https://lodash.com/docs/4.17.15#partial)
+* [维基百科：部分应用](https://zh.wikipedia.org/wiki/%E9%83%A8%E5%88%86%E5%BA%94%E7%94%A8)
diff --git a/questions/explain-the-concept-of-scope-in-javascript/en-US.langnostic.json b/questions/explain-the-concept-of-scope-in-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..2b90341
--- /dev/null
+++ b/questions/explain-the-concept-of-scope-in-javascript/en-US.langnostic.json
@@ -0,0 +1,54 @@
+{
+  "frontmatter": {
+    "title": "f1d5c987"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "220bbf28",
+        "70e2c5f1",
+        "2a7816d0",
+        "454d89af",
+        "19fcdd6e",
+        "1d6f19ac",
+        "affa6549",
+        "9f817d95",
+        "39375d9f",
+        "3baf4fdd",
+        "35bb03fb",
+        "a8ba62be",
+        "9422beaa",
+        "a9a43f04",
+        "24883344",
+        "67ddff4a",
+        "1f4770e5",
+        "556d3732"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "220bbf28",
+        "70e2c5f1",
+        "2a7816d0",
+        "454d89af",
+        "19fcdd6e",
+        "1d6f19ac",
+        "affa6549",
+        "9f817d95",
+        "39375d9f",
+        "3baf4fdd",
+        "35bb03fb",
+        "a8ba62be",
+        "9422beaa",
+        "a9a43f04",
+        "24883344",
+        "67ddff4a",
+        "1f4770e5",
+        "556d3732"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-scope-in-javascript/zh-CN.mdx b/questions/explain-the-concept-of-scope-in-javascript/zh-CN.mdx
new file mode 100644
index 0000000..ff16eda
--- /dev/null
+++ b/questions/explain-the-concept-of-scope-in-javascript/zh-CN.mdx
@@ -0,0 +1,106 @@
+---
+title: 解释 JavaScript 中的作用域概念
+---
+
+## TL;DR
+
+在 JavaScript 中，作用域决定了变量和函数在代码不同部分的可访问性。主要有三种作用域：全局作用域、函数作用域和块级作用域。全局作用域意味着变量可以在代码中的任何地方访问。函数作用域意味着变量只能在其声明的函数内部访问。块级作用域是在 ES6 中引入的，意味着变量只能在其声明的块（例如，在大括号 `{}` 内）中访问。
+
+```js live
+var globalVar = 'I am a global var';
+
+function myFunction() {
+  var functionVar = 'I am a function-scoped var';
+
+  if (true) {
+    let blockVar = 'I am a block-scoped var';
+
+    console.log('Inside block:');
+    console.log(globalVar); // Accessible
+    console.log(functionVar); // Accessible
+    console.log(blockVar); // Accessible
+  }
+
+  console.log('Inside function:');
+  console.log(globalVar); // Accessible
+  console.log(functionVar); // Accessible
+  // console.log(blockVar); // Uncaught ReferenceError
+}
+
+myFunction();
+
+console.log('In global scope:');
+console.log(globalVar); // Accessible
+// console.log(functionVar); // Uncaught ReferenceError
+// console.log(blockVar); // Uncaught ReferenceError
+```
+
+***
+
+## JavaScript 中的作用域
+
+### 全局作用域
+
+在任何函数或块外部声明的变量具有全局作用域。它们可以在代码中的任何地方访问。
+
+```js live
+var globalVar = 'I am global';
+
+function myFunction() {
+  console.log(globalVar); // Accessible here
+}
+
+myFunction();
+console.log(globalVar); // Accessible here
+```
+
+### 函数作用域
+
+在函数内声明的变量属于函数作用域。它们只能在该函数内部访问。
+
+```js live
+function myFunction() {
+  var functionVar = 'I am in a function';
+  console.log(functionVar); // Accessible here
+}
+
+myFunction();
+console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined
+```
+
+### 块级作用域
+
+在块（例如，在大括号 `{}` 内）中使用 `let` 或 `const` 声明的变量具有块级作用域。它们只能在该块内访问。
+
+```js live
+if (true) {
+  let blockVar = 'I am in a block';
+  console.log(blockVar); // Accessible here
+}
+
+console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined
+```
+
+### 词法作用域
+
+JavaScript 使用词法作用域，这意味着变量的作用域由其在源代码中的位置决定。嵌套函数可以访问在其外部作用域中声明的变量。
+
+```js live
+function outerFunction() {
+  var outerVar = 'I am outside';
+
+  function innerFunction() {
+    console.log(outerVar); // Accessible here
+  }
+
+  innerFunction();
+}
+
+outerFunction();
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope)
+* [JavaScript.info: Variable scope](https://javascript.info/var)
+* [Eloquent JavaScript: Functions and Scope](https://eloquentjavascript.net/03_functions.html#h_scope)
diff --git a/questions/explain-the-concept-of-tagged-templates/en-US.langnostic.json b/questions/explain-the-concept-of-tagged-templates/en-US.langnostic.json
new file mode 100644
index 0000000..c348dd5
--- /dev/null
+++ b/questions/explain-the-concept-of-tagged-templates/en-US.langnostic.json
@@ -0,0 +1,62 @@
+{
+  "frontmatter": {
+    "title": "644bf6e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "d92293fb",
+        "cd3a5faf",
+        "2a7816d0",
+        "7dc7f9d",
+        "286c0237",
+        "ab9d62c3",
+        "eea083fa",
+        "8747d9ff",
+        "c523088d",
+        "4e8ede6c",
+        "40da1341",
+        "aab2ce46",
+        "a2cf7bc1",
+        "e275671d",
+        "6dd3b324",
+        "f8288cb8",
+        "f127d093",
+        "9b5019f0",
+        "a70e6617",
+        "e350925c",
+        "1f4770e5",
+        "9796ecbe"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "d92293fb",
+        "cd3a5faf",
+        "2a7816d0",
+        "7dc7f9d",
+        "286c0237",
+        "ab9d62c3",
+        "eea083fa",
+        "8747d9ff",
+        "c523088d",
+        "4e8ede6c",
+        "40da1341",
+        "aab2ce46",
+        "a2cf7bc1",
+        "e275671d",
+        "6dd3b324",
+        "f8288cb8",
+        "f127d093",
+        "9b5019f0",
+        "a70e6617",
+        "e350925c",
+        "1f4770e5",
+        "9796ecbe"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-tagged-templates/zh-CN.mdx b/questions/explain-the-concept-of-tagged-templates/zh-CN.mdx
new file mode 100644
index 0000000..a03a299
--- /dev/null
+++ b/questions/explain-the-concept-of-tagged-templates/zh-CN.mdx
@@ -0,0 +1,94 @@
+---
+title: 解释带标签的模板的概念
+---
+
+## TL;DR
+
+JavaScript 中的带标签的模板允许您使用函数解析模板字面量。该函数将字面量字符串和值作为参数接收，从而可以自定义处理模板。例如：
+
+```js live
+function tag(strings, ...values) {
+  return strings[0] + values[0] + strings[1] + values[1] + strings[2];
+}
+
+const result = tag`Hello ${'world'}! How are ${'you'}?`;
+console.log(result); // "Hello world! How are you?"
+```
+
+***
+
+## 带标签的模板
+
+### 什么是带标签的模板？
+
+带标签的模板是 JavaScript 中的一个特性，它允许您使用模板字面量调用一个函数（“标签”）。然后，标签函数可以以自定义方式处理模板字面量的各个部分（字面量字符串和插值）。
+
+### 语法
+
+带标签的模板的语法涉及在模板字面量之前放置一个函数名称：
+
+```js
+function tag(strings, ...values) {
+  // Custom processing
+}
+
+tag`template literal with ${values}`;
+```
+
+### 工作原理
+
+当调用带标签的模板时，标签函数会收到：
+
+1. 字面量字符串的数组（模板中未插值的各个部分）
+2. 作为附加参数的插值
+
+例如：
+
+```js live
+function tag(strings, ...values) {
+  console.log(strings); // ["Hello ", "! How are ", "?"]
+  console.log(values); // ["world", "you"]
+}
+
+tag`Hello ${'world'}! How are ${'you'}?`;
+```
+
+### 用例
+
+带标签的模板可用于各种目的，例如：
+
+* **字符串转义**：通过转义用户输入来防止 XSS 攻击
+* **本地化**：将模板字面量翻译成不同的语言
+* **自定义格式**：将自定义格式应用于插值
+
+### 示例
+
+这是一个转义 HTML 的带标签模板的简单示例：
+
+```js live
+function escapeHTML(strings, ...values) {
+  return strings.reduce((result, string, i) => {
+    const value = values[i - 1];
+    return (
+      result +
+      (value
+        ? String(value)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+        : '') +
+      string
+    );
+  });
+}
+
+const userInput = '<script>alert("XSS")</script>';
+const result = escapeHTML`User input: ${userInput}`;
+console.log(result); // "User input: &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;"
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates)
+* [JavaScript.info: Tagged templates](https://javascript.info/tagged-templates)
+* [Exploring JS: Template literals](http://exploringjs.com/es6/ch_template-literals.html#tagged-templates)
diff --git a/questions/explain-the-concept-of-test-driven-development-tdd/en-US.langnostic.json b/questions/explain-the-concept-of-test-driven-development-tdd/en-US.langnostic.json
new file mode 100644
index 0000000..f707fe5
--- /dev/null
+++ b/questions/explain-the-concept-of-test-driven-development-tdd/en-US.langnostic.json
@@ -0,0 +1,80 @@
+{
+  "frontmatter": {
+    "title": "98f2e179"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "3ed088f8",
+        "2a7816d0",
+        "d5dd7a38",
+        "ed01c895",
+        "95e2f781",
+        "acde2c9c",
+        "4743c356",
+        "76a6b3db",
+        "7e8c69c7",
+        "2b49d068",
+        "f67e5291",
+        "4e4108c1",
+        "404afa0d",
+        "b3b131ee",
+        "9d80de6f",
+        "6b224a22",
+        "ea32196c",
+        "74b3912a",
+        "69d899e1",
+        "18483de4",
+        "76c60b9c",
+        "c35f3a7a",
+        "3654a55e",
+        "86676132",
+        "fbf54f94",
+        "d0575c14",
+        "6be8e1e4",
+        "f20174db",
+        "1a6bf10b",
+        "1f4770e5",
+        "ee140c7f"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "3ed088f8",
+        "2a7816d0",
+        "d5dd7a38",
+        "ed01c895",
+        "95e2f781",
+        "acde2c9c",
+        "4743c356",
+        "76a6b3db",
+        "7e8c69c7",
+        "2b49d068",
+        "f67e5291",
+        "4e4108c1",
+        "404afa0d",
+        "b3b131ee",
+        "9d80de6f",
+        "6b224a22",
+        "ea32196c",
+        "74b3912a",
+        "69d899e1",
+        "18483de4",
+        "76c60b9c",
+        "c35f3a7a",
+        "3654a55e",
+        "86676132",
+        "fbf54f94",
+        "d0575c14",
+        "6be8e1e4",
+        "f20174db",
+        "1a6bf10b",
+        "1f4770e5",
+        "ee140c7f"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-test-driven-development-tdd/zh-CN.mdx b/questions/explain-the-concept-of-test-driven-development-tdd/zh-CN.mdx
new file mode 100644
index 0000000..53d20de
--- /dev/null
+++ b/questions/explain-the-concept-of-test-driven-development-tdd/zh-CN.mdx
@@ -0,0 +1,86 @@
+---
+title: 解释测试驱动开发 (TDD) 的概念
+---
+
+## TL;DR
+
+测试驱动开发 (TDD) 是一种软件开发方法，您在编写实际代码之前编写测试。该过程包括编写一个失败的测试，编写通过测试所需的最小代码，然后在保持测试通过的同时重构代码。这确保了代码始终经过测试，并有助于保持高代码质量。
+
+***
+
+## 什么是测试驱动开发 (TDD)？
+
+测试驱动开发 (TDD) 是一种软件开发方法，它强调在编写实际代码之前编写测试。 TDD 的主要目标是确保代码经过全面测试并满足指定的要求。 TDD 过程可以分为三个主要步骤：红色、绿色和重构。
+
+### 红色：编写一个失败的测试
+
+1. 为新功能或功能编写测试。
+2. 运行测试以确保它失败，确认该功能尚未实现。
+
+```js
+// Example using Jest
+test('adds 1 + 2 to equal 3', () => {
+  expect(add(1, 2)).toBe(3);
+});
+```
+
+### 绿色：编写通过测试所需的最小代码
+
+1. 编写最简单的代码以使测试通过。
+2. 运行测试以确保它通过。
+
+```js
+function add(a, b) {
+  return a + b;
+}
+```
+
+### 重构：改进代码
+
+1. 重构代码以改进其结构和可读性，而无需更改其行为。
+2. 确保所有测试在重构后仍然通过。
+
+```js
+// Refactored code (if needed)
+function add(a, b) {
+  return a + b; // In this simple example, no refactoring is needed
+}
+```
+
+## TDD 的好处
+
+### 改进的代码质量
+
+TDD 确保代码经过全面测试，这有助于在开发过程的早期识别和修复错误。
+
+### 更好的设计
+
+首先编写测试迫使开发人员思考代码的设计和需求，从而产生结构更好、更易于维护的代码。
+
+### 更快的调试
+
+由于为每个功能都编写了测试，因此当测试失败时，更容易确定错误的来源。
+
+### 文档
+
+测试充当代码的文档，使其他开发人员更容易理解代码的功能和目的。
+
+## TDD 的挑战
+
+### 初始学习曲线
+
+刚接触 TDD 的开发人员可能会发现最初采用这种方法具有挑战性。
+
+### 耗时
+
+在编写实际代码之前编写测试可能很耗时，尤其对于复杂的功能而言。
+
+### 开销
+
+维护大量测试可能会成为一种开销，尤其是在代码库经常更改时。
+
+## 延伸阅读
+
+* [Kent Beck 著的《测试驱动开发实例》](https://www.amazon.com/Test-Driven-Development-Kent-Beck/dp/0321146530)
+* [Martin Fowler 网站上的 TDD](https://martinfowler.com/bliki/TestDrivenDevelopment.html)
+* [Jest 文档](https://jestjs.io/docs/getting-started)
diff --git a/questions/explain-the-concept-of-the-prototype-pattern/en-US.langnostic.json b/questions/explain-the-concept-of-the-prototype-pattern/en-US.langnostic.json
new file mode 100644
index 0000000..68ca439
--- /dev/null
+++ b/questions/explain-the-concept-of-the-prototype-pattern/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "9eec2bcf"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "281bbcfa",
+        "cd6287b4",
+        "2a7816d0",
+        "ef514c68",
+        "dcd0dd8d",
+        "4e8ede6c",
+        "39554ae1",
+        "30fcf78",
+        "dcf962a3",
+        "4fd352b6",
+        "9a3a183b",
+        "cd6287b4",
+        "6b852229",
+        "97e7414d",
+        "277ca897",
+        "e95f7e1c",
+        "e3185288",
+        "852195c",
+        "4f390bfa",
+        "82c3077",
+        "893e18a0",
+        "1f4770e5",
+        "37ba55e8"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "281bbcfa",
+        "cd6287b4",
+        "2a7816d0",
+        "ef514c68",
+        "dcd0dd8d",
+        "4e8ede6c",
+        "39554ae1",
+        "30fcf78",
+        "dcf962a3",
+        "4fd352b6",
+        "9a3a183b",
+        "cd6287b4",
+        "6b852229",
+        "97e7414d",
+        "277ca897",
+        "e95f7e1c",
+        "e3185288",
+        "852195c",
+        "4f390bfa",
+        "82c3077",
+        "893e18a0",
+        "1f4770e5",
+        "37ba55e8"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-the-prototype-pattern/zh-CN.mdx b/questions/explain-the-concept-of-the-prototype-pattern/zh-CN.mdx
new file mode 100644
index 0000000..309fec8
--- /dev/null
+++ b/questions/explain-the-concept-of-the-prototype-pattern/zh-CN.mdx
@@ -0,0 +1,88 @@
+---
+title: 解释原型模式的概念
+---
+
+## TL;DR
+
+原型模式是一种创建型设计模式，用于通过复制现有对象（称为原型）来创建新对象。当创建新对象的成本高于克隆现有对象时，此模式非常有用。在 JavaScript 中，这可以使用 `Object.create` 方法或使用构造函数函数的 `prototype` 属性来实现。
+
+```js live
+const prototypeObject = {
+  greet() {
+    console.log('Hello, world!');
+  },
+};
+
+const newObject = Object.create(prototypeObject);
+newObject.greet(); // Outputs: Hello, world!
+```
+
+***
+
+## 原型模式
+
+原型模式是一种创建型设计模式，它允许您通过复制现有对象（称为原型）来创建新对象。当创建新对象的成本高于克隆现有对象时，此模式特别有用。
+
+### 工作原理
+
+在原型模式中，一个对象被用作创建新对象的蓝图。这个蓝图对象被称为原型。通过复制原型来创建新对象，这可以通过多种方式完成，具体取决于编程语言。
+
+### 在 JavaScript 中的实现
+
+在 JavaScript 中，原型模式可以使用 `Object.create` 方法或使用构造函数函数的 `prototype` 属性来实现。
+
+#### 使用 `Object.create`
+
+`Object.create` 方法使用指定原型对象和属性创建一个新对象。
+
+```js live
+const prototypeObject = {
+  greet() {
+    console.log('Hello, world!');
+  },
+};
+
+const newObject = Object.create(prototypeObject);
+newObject.greet(); // Outputs: Hello, world!
+```
+
+在此示例中，`newObject` 以 `prototypeObject` 作为其原型创建。这意味着 `newObject` 从 `prototypeObject` 继承了 `greet` 方法。
+
+#### 使用构造函数和 `prototype` 属性
+
+在 JavaScript 中实现原型模式的另一种方法是使用构造函数和 `prototype` 属性。
+
+```js live
+function Person(name) {
+  this.name = name;
+}
+
+Person.prototype.greet = function () {
+  console.log(`Hello, my name is ${this.name}`);
+};
+
+const person1 = new Person('Alice');
+const person2 = new Person('Bob');
+
+person1.greet(); // Outputs: Hello, my name is Alice
+person2.greet(); // Outputs: Hello, my name is Bob
+```
+
+在此示例中，`Person` 构造函数用于创建新的 `Person` 对象。`greet` 方法被添加到 `Person.prototype`，因此 `Person` 的所有实例都继承此方法。
+
+### 优点
+
+* 通过克隆现有对象来降低创建新对象的成本
+* 简化复杂对象的创建
+* 促进代码重用并减少冗余
+
+### 缺点
+
+* 在某些情况下，克隆对象可能不如创建新对象有效
+* 如果原型对象包含嵌套对象，则可能导致深度克隆出现问题
+
+## 延伸阅读
+
+* [MDN Web Docs: Object.create](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create)
+* [MDN Web Docs: Prototypes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes)
+* [Refactoring Guru: Prototype pattern](https://refactoring.guru/design-patterns/prototype)
diff --git a/questions/explain-the-concept-of-the-singleton-pattern/en-US.langnostic.json b/questions/explain-the-concept-of-the-singleton-pattern/en-US.langnostic.json
new file mode 100644
index 0000000..941461f
--- /dev/null
+++ b/questions/explain-the-concept-of-the-singleton-pattern/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "8d049ff2"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "c0e2e88a",
+        "a463f5e0",
+        "2a7816d0",
+        "c2cf3e5c",
+        "f8de5ab",
+        "b6df0131",
+        "a86655a8",
+        "30fcf78",
+        "fb8c9add",
+        "51751f90",
+        "361a279",
+        "5e04a9ba",
+        "a463f5e0",
+        "6dd3b324",
+        "1e0d2b6e",
+        "1f4770e5",
+        "5b7bc2dc"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "c0e2e88a",
+        "a463f5e0",
+        "2a7816d0",
+        "c2cf3e5c",
+        "f8de5ab",
+        "b6df0131",
+        "a86655a8",
+        "30fcf78",
+        "fb8c9add",
+        "51751f90",
+        "361a279",
+        "5e04a9ba",
+        "a463f5e0",
+        "6dd3b324",
+        "1e0d2b6e",
+        "1f4770e5",
+        "5b7bc2dc"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-the-singleton-pattern/zh-CN.mdx b/questions/explain-the-concept-of-the-singleton-pattern/zh-CN.mdx
new file mode 100644
index 0000000..58514e5
--- /dev/null
+++ b/questions/explain-the-concept-of-the-singleton-pattern/zh-CN.mdx
@@ -0,0 +1,96 @@
+---
+title: 解释单例模式的概念
+---
+
+## TL;DR
+
+单例模式确保一个类只有一个实例，并提供对该实例的全局访问点。当只需要一个对象来协调整个系统中的操作时，这非常有用。在 JavaScript 中，这可以使用闭包或 ES6 类来实现。
+
+```js live
+class Singleton {
+  constructor() {
+    if (!Singleton.instance) {
+      Singleton.instance = this;
+    }
+    return Singleton.instance;
+  }
+}
+
+const instance1 = new Singleton();
+const instance2 = new Singleton();
+
+console.log(instance1 === instance2); // true
+```
+
+***
+
+## 单例模式
+
+单例模式是一种设计模式，它将一个类的实例化限制为单个实例。当只需要一个对象来协调整个系统中的操作时，这特别有用。
+
+### 关键特征
+
+* **单个实例**：确保一个类只有一个实例。
+* **全局访问**：提供对该实例的全局访问点。
+* **延迟初始化**：仅在需要时才创建实例。
+
+### 在 JavaScript 中的实现
+
+有几种方法可以在 JavaScript 中实现单例模式。以下是两种常见的方法：
+
+#### 使用闭包
+
+```js live
+const Singleton = (function () {
+  let instance;
+
+  function createInstance() {
+    const object = new Object('I am the instance');
+    return object;
+  }
+
+  return {
+    getInstance: function () {
+      if (!instance) {
+        instance = createInstance();
+      }
+      return instance;
+    },
+  };
+})();
+
+const instance1 = Singleton.getInstance();
+const instance2 = Singleton.getInstance();
+
+console.log(instance1 === instance2); // true
+```
+
+#### 使用 ES6 类
+
+```js live
+class Singleton {
+  constructor() {
+    if (!Singleton.instance) {
+      Singleton.instance = this;
+    }
+    return Singleton.instance;
+  }
+}
+
+const instance1 = new Singleton();
+const instance2 = new Singleton();
+
+console.log(instance1 === instance2); // true
+```
+
+### 用例
+
+* **配置对象**：当您需要一个在整个应用程序中共享的配置对象时。
+* **日志记录**：用于管理日志条目的单个日志记录实例。
+* **数据库连接**：确保只建立一个到数据库的连接。
+
+## 延伸阅读
+
+* [维基百科上的单例模式](https://en.wikipedia.org/wiki/Singleton_pattern)
+* [JavaScript 设计模式：单例](https://www.dofactory.com/javascript/design-patterns/singleton)
+* [MDN Web 文档：类](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
diff --git a/questions/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.langnostic.json b/questions/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.langnostic.json
new file mode 100644
index 0000000..fb1884d
--- /dev/null
+++ b/questions/explain-the-concept-of-the-spread-operator-and-its-uses/en-US.langnostic.json
@@ -0,0 +1,60 @@
+{
+  "frontmatter": {
+    "title": "d5d88f1e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "4cddec00",
+        "18e2baf1",
+        "2a7816d0",
+        "466484ca",
+        "ee6c7c6d",
+        "e1ffa3a",
+        "f909b6e2",
+        "ca298e03",
+        "32a546a9",
+        "d2446c9d",
+        "c0fb02fb",
+        "b00d0348",
+        "40c21174",
+        "318becfc",
+        "c8de8ea9",
+        "81cf4eef",
+        "4dded10a",
+        "450199cb",
+        "1858d47f",
+        "1f4770e5",
+        "acae51c4"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "4cddec00",
+        "18e2baf1",
+        "2a7816d0",
+        "466484ca",
+        "ee6c7c6d",
+        "e1ffa3a",
+        "f909b6e2",
+        "ca298e03",
+        "32a546a9",
+        "d2446c9d",
+        "c0fb02fb",
+        "b00d0348",
+        "40c21174",
+        "318becfc",
+        "c8de8ea9",
+        "81cf4eef",
+        "4dded10a",
+        "450199cb",
+        "1858d47f",
+        "1f4770e5",
+        "acae51c4"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-the-spread-operator-and-its-uses/zh-CN.mdx b/questions/explain-the-concept-of-the-spread-operator-and-its-uses/zh-CN.mdx
new file mode 100644
index 0000000..4c6bb35
--- /dev/null
+++ b/questions/explain-the-concept-of-the-spread-operator-and-its-uses/zh-CN.mdx
@@ -0,0 +1,96 @@
+---
+title: 解释展开运算符的概念及其用途
+---
+
+## TL;DR
+
+JavaScript 中的展开运算符 (`...`) 允许你将可迭代对象（如数组或对象）的元素展开为单个元素。它通常用于复制数组或对象、合并数组或对象，以及将数组的元素作为参数传递给函数。
+
+```js live
+// Copying an array
+const arr1 = [1, 2, 3];
+const arr2 = [...arr1];
+console.log(arr2); // Output: [1, 2, 3]
+
+// Merging arrays
+const arr3 = [4, 5, 6];
+const mergedArray = [...arr1, ...arr3];
+console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]
+
+// Copying an object
+const obj1 = { a: 1, b: 2 };
+const obj2 = { ...obj1 };
+console.log(obj2); // Output: { a: 1, b: 2 }
+
+// Merging objects
+const obj3 = { c: 3, d: 4 };
+const mergedObject = { ...obj1, ...obj3 };
+console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }
+
+// Passing array elements as function arguments
+const sum = (x, y, z) => x + y + z;
+const numbers = [1, 2, 3];
+console.log(sum(...numbers)); // Output: 6
+```
+
+***
+
+## 展开运算符及其用途
+
+### 复制数组
+
+展开运算符可用于创建数组的浅拷贝。当你想要复制一个数组而不影响原始数组时，这很有用。
+
+```js live
+const arr1 = [1, 2, 3];
+const arr2 = [...arr1];
+console.log(arr2); // Output: [1, 2, 3]
+```
+
+### 合并数组
+
+你可以使用展开运算符将多个数组合并成一个。这是一种简洁易读的组合数组的方式。
+
+```js live
+const arr1 = [1, 2, 3];
+const arr3 = [4, 5, 6];
+const mergedArray = [...arr1, ...arr3];
+console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]
+```
+
+### 复制对象
+
+与数组类似，展开运算符可用于创建对象的浅拷贝。这对于复制对象而不影响原始对象很有用。
+
+```js live
+const obj1 = { a: 1, b: 2 };
+const obj2 = { ...obj1 };
+console.log(obj2); // Output: { a: 1, b: 2 }
+```
+
+### 合并对象
+
+展开运算符也可用于将多个对象合并成一个。这对于组合来自不同对象的属性特别有用。
+
+```js live
+const obj1 = { a: 1, b: 2 };
+const obj3 = { c: 3, d: 4 };
+const mergedObject = { ...obj1, ...obj3 };
+console.log(mergedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }
+```
+
+### 将数组元素作为函数参数传递
+
+展开运算符允许你将数组的元素作为单个参数传递给函数。这对于接受多个参数的函数很有用。
+
+```js live
+const sum = (x, y, z) => x + y + z;
+const numbers = [1, 2, 3];
+console.log(sum(...numbers)); // Output: 6
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
+* [JavaScript.info: Spread operator](https://javascript.info/rest-parameters-spread-operator#spread-operator)
+* [FreeCodeCamp: JavaScript spread operator explained](https://www.freecodecamp.org/news/javascript-spread-operator-explained/)
diff --git a/questions/explain-the-concept-of-the-strategy-pattern/en-US.langnostic.json b/questions/explain-the-concept-of-the-strategy-pattern/en-US.langnostic.json
new file mode 100644
index 0000000..66131f3
--- /dev/null
+++ b/questions/explain-the-concept-of-the-strategy-pattern/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "792ce120"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "1fff678c",
+        "5f29c9ba",
+        "2a7816d0",
+        "5e3a8d3a",
+        "25841bc3",
+        "4eb9debe",
+        "eb32a928",
+        "22000045",
+        "9b5019f0",
+        "7632dff0",
+        "858a84f1",
+        "2819c383",
+        "79dea2d5",
+        "c4e00cf2",
+        "4eab9522",
+        "1f4770e5",
+        "e4e7fbdd"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "1fff678c",
+        "5f29c9ba",
+        "2a7816d0",
+        "5e3a8d3a",
+        "25841bc3",
+        "4eb9debe",
+        "eb32a928",
+        "22000045",
+        "9b5019f0",
+        "7632dff0",
+        "858a84f1",
+        "2819c383",
+        "79dea2d5",
+        "c4e00cf2",
+        "4eab9522",
+        "1f4770e5",
+        "e4e7fbdd"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-the-strategy-pattern/zh-CN.mdx b/questions/explain-the-concept-of-the-strategy-pattern/zh-CN.mdx
new file mode 100644
index 0000000..aa02b88
--- /dev/null
+++ b/questions/explain-the-concept-of-the-strategy-pattern/zh-CN.mdx
@@ -0,0 +1,118 @@
+---
+title: 解释策略模式的概念
+---
+
+## TL;DR
+
+策略模式是一种行为型设计模式，它允许您定义一系列算法，将每个算法封装成一个单独的类，并使它们可以互换。这种模式使算法可以独立于使用它的客户端而变化。例如，如果您有不同的排序算法，您可以将每个算法定义为一个策略，并在它们之间切换，而无需更改客户端代码。
+
+```js live
+class Context {
+  constructor(strategy) {
+    this.strategy = strategy;
+  }
+
+  executeStrategy(data) {
+    return this.strategy.doAlgorithm(data);
+  }
+}
+
+class ConcreteStrategyA {
+  doAlgorithm(data) {
+    // Implementation of algorithm A
+    return 'Algorithm A was run on ' + data;
+  }
+}
+
+class ConcreteStrategyB {
+  doAlgorithm(data) {
+    // Implementation of algorithm B
+    return 'Algorithm B was run on ' + data;
+  }
+}
+
+// Usage
+const context = new Context(new ConcreteStrategyA());
+context.executeStrategy('someData'); // Output: Algorithm A was run on someData
+```
+
+***
+
+## 策略模式
+
+### 定义
+
+策略模式是一种行为型设计模式，它允许在运行时选择算法的行为。它定义了一系列算法，封装了每一个算法，并使它们可以互换。这种模式允许算法独立于使用它的客户端而变化。
+
+### 组件
+
+1. **Context**: 维护对 `Strategy` 对象的引用，并使用 `ConcreteStrategy` 对象进行配置。
+2. **Strategy**: 所有支持的算法通用的接口。`Context` 使用此接口来调用由 `ConcreteStrategy` 定义的算法。
+3. **ConcreteStrategy**: 实现 `Strategy` 接口以提供特定的算法。
+
+### 示例
+
+考虑一个场景，您有不同的排序算法，并且您希望在它们之间切换，而无需更改客户端代码。
+
+```js live
+// Strategy interface
+class Strategy {
+  doAlgorithm(data) {
+    throw new Error('This method should be overridden!');
+  }
+}
+
+// ConcreteStrategyA
+class ConcreteStrategyA extends Strategy {
+  doAlgorithm(data) {
+    return data.sort((a, b) => a - b); // Example: ascending sort
+  }
+}
+
+// ConcreteStrategyB
+class ConcreteStrategyB extends Strategy {
+  doAlgorithm(data) {
+    return data.sort((a, b) => b - a); // Example: descending sort
+  }
+}
+
+// Context
+class Context {
+  constructor(strategy) {
+    this.strategy = strategy;
+  }
+
+  setStrategy(strategy) {
+    this.strategy = strategy;
+  }
+
+  executeStrategy(data) {
+    return this.strategy.doAlgorithm(data);
+  }
+}
+
+// Usage
+const data = [3, 1, 4, 1, 5, 9];
+const context = new Context(new ConcreteStrategyA());
+console.log(context.executeStrategy([...data])); // Output: [1, 1, 3, 4, 5, 9]
+
+context.setStrategy(new ConcreteStrategyB());
+console.log(context.executeStrategy([...data])); // Output: [9, 5, 4, 3, 1, 1]
+```
+
+### 优点
+
+* **灵活性**：您可以在运行时更改算法。
+* **可维护性**：添加新的策略不会影响现有代码。
+* **封装**：每个算法都封装在自己的类中。
+
+### 缺点
+
+* **开销**：增加了类和对象的数量。
+* **复杂性**：如果使用不当，会使系统更加复杂。
+
+## 延伸阅读
+
+* [维基百科上的策略模式](https://en.wikipedia.org/wiki/Strategy_pattern)
+* [Refactoring Guru: 策略模式](https://refactoring.guru/design-patterns/strategy)
+* [MDN Web Docs: JavaScript 类](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
diff --git a/questions/explain-the-concept-of-the-web-socket-api/en-US.langnostic.json b/questions/explain-the-concept-of-the-web-socket-api/en-US.langnostic.json
new file mode 100644
index 0000000..8fcff73
--- /dev/null
+++ b/questions/explain-the-concept-of-the-web-socket-api/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "cc037bfb"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "1927e37a",
+        "d9d44665",
+        "e8f40c5d",
+        "2a7816d0",
+        "c92c0dcf",
+        "7dedde60",
+        "65abfcef",
+        "dec9bcb3",
+        "4e8ede6c",
+        "2366468e",
+        "19c254ba",
+        "19d8c504",
+        "7989cb83",
+        "6dd3b324",
+        "70cc2c28",
+        "1f4770e5",
+        "abc6b4bc"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "1927e37a",
+        "d9d44665",
+        "e8f40c5d",
+        "2a7816d0",
+        "c92c0dcf",
+        "7dedde60",
+        "65abfcef",
+        "dec9bcb3",
+        "4e8ede6c",
+        "2366468e",
+        "19c254ba",
+        "19d8c504",
+        "7989cb83",
+        "6dd3b324",
+        "70cc2c28",
+        "1f4770e5",
+        "abc6b4bc"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-the-web-socket-api/zh-CN.mdx b/questions/explain-the-concept-of-the-web-socket-api/zh-CN.mdx
new file mode 100644
index 0000000..2cd7526
--- /dev/null
+++ b/questions/explain-the-concept-of-the-web-socket-api/zh-CN.mdx
@@ -0,0 +1,86 @@
+---
+title: 解释 Web Socket API 的概念
+---
+
+## TL;DR
+
+WebSocket API 提供了一种在客户端和服务器之间打开持久连接的方式，允许进行实时的双向通信。与基于请求-响应的 HTTP 不同，WebSocket 实现了全双工通信，这意味着客户端和服务器都可以独立地发送和接收消息。这对于聊天应用程序、实时更新和在线游戏等应用程序特别有用。
+
+以下示例使用 Postman 的 WebSocket 回显服务来演示 WebSockets 的工作原理。
+
+```js live
+// Postman's echo server that will echo back messages you send
+const socket = new WebSocket('wss://ws.postman-echo.com/raw');
+
+// Event listener for when the connection is open
+socket.addEventListener('open', function (event) {
+  socket.send('Hello Server!'); // Sends the message to the Postman WebSocket server
+});
+
+// Event listener for when a message is received from the server
+socket.addEventListener('message', function (event) {
+  console.log('Message from server ', event.data);
+});
+```
+
+***
+
+## 什么是 WebSocket API？
+
+WebSocket API 是一种技术，它提供了一种在客户端（通常是 Web 浏览器）和服务器之间建立持久的、低延迟的、全双工通信通道的方式。这与传统的 HTTP 请求-响应模型不同，后者是无状态的，并且需要为每个请求建立新的连接。
+
+### 关键特性
+
+*   **全双工通信**：客户端和服务器都可以独立地发送和接收消息。
+*   **低延迟**：持久连接减少了为每条消息建立新连接的开销。
+*   **实时更新**：非常适合需要实时数据的应用程序，例如聊天应用程序、实时体育更新和在线游戏。
+
+### 它是如何工作的
+
+1.  **连接建立**：客户端通过向服务器发送握手请求来启动 WebSocket 连接。
+2.  **握手响应**：服务器使用握手响应进行响应，如果成功，则建立连接。
+3.  **数据交换**：客户端和服务器现在可以通过已建立的连接独立地发送和接收消息。
+4.  **连接关闭**：当不再需要连接时，客户端或服务器都可以关闭连接。
+
+### 使用示例
+
+这是一个关于如何在 JavaScript 中使用 WebSocket API 的基本示例，使用 Postman 的 WebSocket Echo Service。
+
+```js live
+// Postman's echo server that will echo back messages you send
+const socket = new WebSocket('wss://ws.postman-echo.com/raw');
+
+// Event listener for when the connection is open
+socket.addEventListener('open', function (event) {
+  console.log('Connection opened');
+  socket.send('Hello Server!'); // Sends the message to the Postman WebSocket server
+});
+
+// Event listener for when a message is received from the server
+socket.addEventListener('message', function (event) {
+  console.log('Message from server ', event.data);
+});
+
+// Event listener for when the connection is closed
+socket.addEventListener('close', function (event) {
+  console.log('Connection closed');
+});
+
+// Event listener for when an error occurs
+socket.addEventListener('error', function (event) {
+  console.error('WebSocket error: ', event);
+});
+```
+
+### 用例
+
+*   **聊天应用程序**：用户之间的实时消息传递。
+*   **实时更新**：股票价格、体育比分或新闻更新。
+*   **在线游戏**：玩家之间的实时互动。
+*   **协作工具**：实时文档编辑或白板。
+
+## 延伸阅读
+
+*   [MDN WebSocket API 文档](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket)
+*   [WebSocket.org](https://www.websocket.org/)
+*   [WebSockets 简介](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications)
diff --git a/questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.langnostic.json b/questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.langnostic.json
new file mode 100644
index 0000000..808e998
--- /dev/null
+++ b/questions/explain-the-concept-of-this-binding-in-event-handlers/en-US.langnostic.json
@@ -0,0 +1,68 @@
+{
+  "frontmatter": {
+    "title": "9d9ca7d4"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "b02cafdb",
+        "2a7816d0",
+        "92a95930",
+        "5689734b",
+        "51779df7",
+        "f1bbbe40",
+        "caca90b3",
+        "94f1f97f",
+        "c037271b",
+        "4853f86b",
+        "bbd231b",
+        "d88ee417",
+        "165bc57c",
+        "3356f7d",
+        "e339215b",
+        "e9e72c17",
+        "c7cd52c3",
+        "d76487f9",
+        "32d421c9",
+        "836c5237",
+        "104f8ce5",
+        "e33be333",
+        "8e37d275",
+        "1f4770e5",
+        "af15df23"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "b02cafdb",
+        "2a7816d0",
+        "92a95930",
+        "5689734b",
+        "51779df7",
+        "f1bbbe40",
+        "caca90b3",
+        "94f1f97f",
+        "c037271b",
+        "4853f86b",
+        "bbd231b",
+        "d88ee417",
+        "165bc57c",
+        "3356f7d",
+        "e339215b",
+        "e9e72c17",
+        "c7cd52c3",
+        "d76487f9",
+        "32d421c9",
+        "836c5237",
+        "104f8ce5",
+        "e33be333",
+        "8e37d275",
+        "1f4770e5",
+        "af15df23"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-this-binding-in-event-handlers/zh-CN.mdx b/questions/explain-the-concept-of-this-binding-in-event-handlers/zh-CN.mdx
new file mode 100644
index 0000000..61babf4
--- /dev/null
+++ b/questions/explain-the-concept-of-this-binding-in-event-handlers/zh-CN.mdx
@@ -0,0 +1,119 @@
+---
+title: 解释事件处理程序中 `this` 绑定的概念
+---
+
+## TL;DR
+
+在 JavaScript 中，`this` 关键字指的是当前正在执行代码的对象。在事件处理程序中，`this` 通常指的是触发事件的元素。但是，`this` 的值可能会根据事件处理程序的定义和调用方式而改变。为了确保 `this` 指的是期望的对象，你可以使用 `bind()` 方法、箭头函数或显式地分配上下文。
+
+***
+
+## 事件处理程序中 `this` 绑定的概念
+
+### 理解 JavaScript 中的 `this`
+
+在 JavaScript 中，`this` 关键字是对当前正在执行代码的对象的引用。`this` 的值由函数的调用方式决定，而不是定义的位置。这可能导致 `this` 在不同的上下文中具有不同的值。
+
+### 事件处理程序中的 `this`
+
+在事件处理程序的上下文中，`this` 通常指的是触发事件的 DOM 元素。例如：
+
+```js live
+// 创建一个 button 元素并将其附加到 DOM
+const button = document.createElement('button');
+button.id = 'myButton';
+document.body.appendChild(button);
+
+document.getElementById('myButton').addEventListener('click', function () {
+  console.log(this); // `this` 指的是 'myButton' 元素
+});
+
+button.click(); // 记录 button 元素
+```
+
+在这个例子中，事件处理程序中的 `this` 指的是被点击的 button 元素。
+
+### 改变 `this` 的值
+
+有几种方法可以改变事件处理程序中 `this` 的值：
+
+#### 使用 `bind()`
+
+`bind()` 方法创建一个新函数，当调用该函数时，其 `this` 关键字设置为提供的值：
+
+```js live
+// 创建一个 button 元素并将其附加到 DOM
+const button = document.createElement('button');
+button.id = 'myButton';
+document.body.appendChild(button);
+
+function handleClick() {
+  console.log(this); // 记录传递给 bind() 的对象
+}
+
+const obj = { name: 'MyObject' };
+document
+  .getElementById('myButton')
+  .addEventListener('click', handleClick.bind(obj));
+
+button.click(); // 记录 obj，因为 handleClick 使用 bind() 绑定到 obj
+```
+
+在这个例子中，`handleClick` 中的 `this` 指的是 `obj`。
+
+#### 使用箭头函数
+
+箭头函数没有自己的 `this` 上下文；它们从周围的词法上下文中继承 `this`：
+
+```js live
+// 创建一个 button 元素并将其附加到 DOM
+const button = document.createElement('button');
+button.id = 'myButton';
+document.body.appendChild(button);
+
+const obj = {
+  name: 'MyObject',
+  handleClick: function () {
+    document.getElementById('myButton').addEventListener('click', () => {
+      console.log(this); // 记录 obj
+    });
+  },
+};
+
+obj.handleClick();
+button.click(); // 这将记录 obj
+```
+
+在这个例子中，箭头函数中的 `this` 指的是 `obj`。
+
+#### 显式地分配上下文
+
+您还可以使用变量显式地分配上下文：
+
+```js live
+// Create a button element and append it to the DOM
+const button = document.createElement('button');
+button.id = 'myButton';
+document.body.appendChild(button);
+
+const obj = {
+  name: 'MyObject',
+  handleClick: function () {
+    const self = this;
+    document.getElementById('myButton').addEventListener('click', function () {
+      console.log(self); // Logs obj
+    });
+  },
+};
+
+obj.handleClick();
+button.click(); // This will log obj
+```
+
+在这个例子中，`self` 用于捕获外部函数中 `this` 的值。
+
+## 延伸阅读
+
+* [MDN Web Docs: `this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)
+* [MDN Web Docs: `bind()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind)
+* [MDN Web Docs: Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
diff --git a/questions/explain-the-concept-of-tree-shaking-in-module-bundling/en-US.langnostic.json b/questions/explain-the-concept-of-tree-shaking-in-module-bundling/en-US.langnostic.json
new file mode 100644
index 0000000..63e707c
--- /dev/null
+++ b/questions/explain-the-concept-of-tree-shaking-in-module-bundling/en-US.langnostic.json
@@ -0,0 +1,54 @@
+{
+  "frontmatter": {
+    "title": "817d7afc"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "38d45c46",
+        "2a7816d0",
+        "9103bc5",
+        "9035d25c",
+        "32ea89f8",
+        "d2418fbc",
+        "9b5019f0",
+        "6ef3431",
+        "6c633e70",
+        "9756851",
+        "4acfe5db",
+        "dd6813be",
+        "f7b6a0a0",
+        "90704233",
+        "83342f81",
+        "8bb2867d",
+        "1f4770e5",
+        "433806f0"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "38d45c46",
+        "2a7816d0",
+        "9103bc5",
+        "9035d25c",
+        "32ea89f8",
+        "d2418fbc",
+        "9b5019f0",
+        "6ef3431",
+        "6c633e70",
+        "9756851",
+        "4acfe5db",
+        "dd6813be",
+        "f7b6a0a0",
+        "90704233",
+        "83342f81",
+        "8bb2867d",
+        "1f4770e5",
+        "433806f0"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-concept-of-tree-shaking-in-module-bundling/zh-CN.mdx b/questions/explain-the-concept-of-tree-shaking-in-module-bundling/zh-CN.mdx
new file mode 100644
index 0000000..8d42798
--- /dev/null
+++ b/questions/explain-the-concept-of-tree-shaking-in-module-bundling/zh-CN.mdx
@@ -0,0 +1,61 @@
+---
+title: 解释模块打包中的 Tree Shaking 概念
+---
+
+## TL;DR
+
+Tree shaking 是一种用于模块打包的技术，用于消除死代码，即从未被使用或执行的代码。这有助于减小最终的 bundle 大小并提高应用程序的性能。它通过分析代码的依赖关系图并删除任何未使用的导出来实现。Webpack 和 Rollup 等工具在使用 ES6 模块语法（`import` 和 `export`）时支持 Tree shaking。
+
+***
+
+## 模块打包中的 Tree Shaking 概念
+
+Tree shaking 是一个常用术语，通常用于 JavaScript 模块打包器，如 Webpack 和 Rollup。它指的是从最终的 bundle 中消除死代码的过程，这有助于减小 bundle 大小并提高应用程序的性能。
+
+### Tree shaking 的工作原理
+
+Tree shaking 通过分析代码的依赖关系图来工作。它查看 `import` 和 `export` 语句，以确定代码的哪些部分实际被使用，哪些没有被使用。然后，将未使用的代码（也称为死代码）从最终的 bundle 中删除。
+
+### 示例
+
+考虑以下示例：
+
+```js
+// utils.js
+export function add(a, b) {
+  return a + b;
+}
+
+export function subtract(a, b) {
+  return a - b;
+}
+
+// main.js
+import { add } from './utils';
+
+console.log(add(2, 3));
+```
+
+在这个例子中，`subtract` 函数在 `main.js` 中从未使用。支持 Tree Shaking 的打包器会识别这一点，并将 `subtract` 函数从最终的 bundle 中排除。
+
+### Tree shaking 的要求
+
+1. **ES6 模块语法**：Tree shaking 依赖于 ES6 模块语法（`import` 和 `export`）的静态结构。CommonJS 模块（`require` 和 `module.exports`）无法进行静态分析，因此不适合进行 Tree shaking。
+2. **Bundler 支持**：您使用的打包器必须支持 Tree shaking。Webpack 和 Rollup 都内置了对 Tree shaking 的支持。
+
+### 支持 Tree shaking 的工具
+
+* **Webpack**: 使用 ES6 模块时，Webpack 开箱即支持 Tree Shaking。您可以通过在 Webpack 配置中将 `mode` 设置为 `production` 来启用它。
+* **Rollup**: Rollup 在设计时就考虑了 Tree Shaking，并为此提供了出色的支持。
+
+### Tree shaking 的好处
+
+* **减小 bundle 大小**：通过删除未使用的代码，最终的 bundle 大小减小，从而加快加载时间。
+* **提高性能**：更小的 bundle 意味着更少的代码需要解析和执行，这可以提高应用程序的性能。
+
+## 延伸阅读
+
+* [Webpack Tree Shaking](https://webpack.js.org/guides/tree-shaking/)
+* [Rollup Tree Shaking](https://rollupjs.org/guide/en/#tree-shaking)
+* [MDN Web Docs: Import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
+* [MDN Web Docs: Export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)
diff --git a/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.langnostic.json b/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.langnostic.json
new file mode 100644
index 0000000..23158b7
--- /dev/null
+++ b/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "7b24d351"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "e2ba4dd1",
+        "2a7816d0",
+        "de238ccd",
+        "28780379",
+        "eab2410d",
+        "75e7f824",
+        "57545be2",
+        "530d06c9",
+        "a3268b75",
+        "27f014d3",
+        "8460b666",
+        "8d9f8e10",
+        "521a97ea",
+        "67423e0a",
+        "489abc18",
+        "1f4770e5",
+        "dc2690c5"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "e2ba4dd1",
+        "2a7816d0",
+        "de238ccd",
+        "28780379",
+        "eab2410d",
+        "75e7f824",
+        "57545be2",
+        "530d06c9",
+        "a3268b75",
+        "27f014d3",
+        "8460b666",
+        "8d9f8e10",
+        "521a97ea",
+        "67423e0a",
+        "489abc18",
+        "1f4770e5",
+        "dc2690c5"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/zh-CN.mdx b/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/zh-CN.mdx
new file mode 100644
index 0000000..acf5e4e
--- /dev/null
+++ b/questions/explain-the-difference-between-classical-inheritance-and-prototypal-inheritance/zh-CN.mdx
@@ -0,0 +1,81 @@
+---
+title: 解释经典继承和原型继承的区别
+---
+
+## TL;DR
+
+经典继承是一种模型，其中类从其他类继承，通常在 Java 和 C++ 等语言中可见。原型继承（在 JavaScript 中使用）涉及对象直接从其他对象继承。在经典继承中，您定义一个类并从中创建实例。在原型继承中，您创建一个对象并将其用作其他对象的原型。
+
+***
+
+## 经典继承和原型继承的区别
+
+### 经典继承
+
+经典继承是许多面向对象编程语言（如 Java、C++ 和 Python）中使用的一种模式。它涉及创建一个类层次结构，其中类从其他类继承属性和方法。
+
+* **类定义**：您定义一个具有属性和方法的类。
+* **实例化**：您创建类的实例（对象）。
+* **继承**：一个类可以从另一个类继承，形成父子关系。
+
+Java 中的示例：
+
+```java
+class Animal {
+    void eat() {
+        System.out.println("This animal eats food.");
+    }
+}
+
+class Dog extends Animal {
+    void bark() {
+        System.out.println("The dog barks.");
+    }
+}
+
+public class Main {
+    public static void main(String[] args) {
+        Dog dog = new Dog();
+        dog.eat(); // Inherited method
+        dog.bark(); // Own method
+    }
+}
+```
+
+### 原型继承
+
+原型继承是 JavaScript 的一个特性，其中对象直接从其他对象继承。没有类；相反，对象充当其他对象的原型。
+
+* **对象创建**：您直接创建一个对象。
+* **原型链**：对象可以通过原型链从其他对象继承属性和方法。
+* **灵活性**：您可以动态地添加或修改属性和方法。
+
+JavaScript 中的示例：
+
+```js live
+const animal = {
+  eat() {
+    console.log('This animal eats food.');
+  },
+};
+
+const dog = Object.create(animal);
+dog.bark = function () {
+  console.log('The dog barks.');
+};
+
+dog.eat(); // Inherited method (Output: The animal eats food.)
+dog.bark(); // Own method (Output: The dog barks.)
+```
+
+### 主要区别
+
+* **基于类的与基于原型的**：经典继承使用类，而原型继承使用对象。
+* **继承模型**：经典继承形成一个类层次结构，而原型继承形成一个原型链。
+* **灵活性**：原型继承更灵活和动态，允许在运行时进行更改。
+
+## 延伸阅读
+
+* [MDN Web Docs: Inheritance and the prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
+* [JavaScript.info: Prototypal inheritance](https://javascript.info/prototype-inheritance)
+* [MDN Web Docs: Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
diff --git a/questions/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/en-US.langnostic.json b/questions/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/en-US.langnostic.json
new file mode 100644
index 0000000..a0444e2
--- /dev/null
+++ b/questions/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/en-US.langnostic.json
@@ -0,0 +1,46 @@
+{
+  "frontmatter": {
+    "title": "6e8251fa"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "f27a47d",
+        "c5f559c",
+        "2a7816d0",
+        "ccb9f1d1",
+        "929b1575",
+        "a9c23976",
+        "52f691e1",
+        "e3d26385",
+        "665bc7e6",
+        "4b9361ec",
+        "67423e0a",
+        "7bd8b7fe",
+        "1f4770e5",
+        "2901f003"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "f27a47d",
+        "c5f559c",
+        "2a7816d0",
+        "ccb9f1d1",
+        "929b1575",
+        "a9c23976",
+        "52f691e1",
+        "e3d26385",
+        "665bc7e6",
+        "4b9361ec",
+        "67423e0a",
+        "7bd8b7fe",
+        "1f4770e5",
+        "2901f003"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/zh-CN.mdx b/questions/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/zh-CN.mdx
new file mode 100644
index 0000000..96bb1ff
--- /dev/null
+++ b/questions/explain-the-difference-between-documentqueryselector-and-documentgetelementbyid/zh-CN.mdx
@@ -0,0 +1,58 @@
+---
+title: 解释 `document.querySelector()` 和 `document.getElementById()` 之间的区别
+---
+
+## TL;DR
+
+`document.querySelector()` 和 `document.getElementById()` 都是用于从 DOM 中选择元素的方法，但它们有关键的区别。`document.querySelector()` 可以使用 CSS 选择器选择任何元素并返回第一个匹配项，而 `document.getElementById()` 通过其 ID 选择一个元素并返回具有该特定 ID 的元素。
+
+```js
+// 使用 document.querySelector()
+const element = document.querySelector('.my-class');
+
+// 使用 document.getElementById()
+const elementById = document.getElementById('my-id');
+```
+
+***
+
+## `document.querySelector()` 和 `document.getElementById()` 之间的区别
+
+### `document.querySelector()`
+
+* 可以使用任何有效的 CSS 选择器选择元素，包括类、ID、标签、属性和伪类
+* 返回与指定选择器匹配的第一个元素
+* 更通用，但由于 CSS 选择器的灵活性，速度稍慢
+
+```js
+// 选择具有类 'my-class' 的第一个元素
+const element = document.querySelector('.my-class');
+
+// 选择第一个 <div> 元素
+const divElement = document.querySelector('div');
+
+// 选择具有属性 data-role='button' 的第一个元素
+const buttonElement = document.querySelector('[data-role="button"]');
+```
+
+### `document.getElementById()`
+
+* 通过其 ID 属性选择一个元素
+* 返回具有指定 ID 的元素
+* 通过 ID 选择元素更快更有效，但通用性较差
+
+```js
+// 选择具有 ID 'my-id' 的元素
+const elementById = document.getElementById('my-id');
+```
+
+### 关键区别
+
+* **选择器类型**：`document.querySelector()` 使用 CSS 选择器，而 `document.getElementById()` 仅使用 ID 属性。
+* **返回值**：`document.querySelector()` 返回第一个匹配的元素，而 `document.getElementById()` 返回具有指定 ID 的元素。
+* **性能**：`document.getElementById()` 通常更快，因为它直接通过 ID 访问元素，而 `document.querySelector()` 必须解析 CSS 选择器。
+
+## 延伸阅读
+
+* [MDN Web Docs: document.querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
+* [MDN Web Docs: document.getElementById()](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
diff --git a/questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/en-US.langnostic.json b/questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/en-US.langnostic.json
new file mode 100644
index 0000000..7d9063b
--- /dev/null
+++ b/questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/en-US.langnostic.json
@@ -0,0 +1,66 @@
+{
+  "frontmatter": {
+    "title": "2ca0663e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "bb599b30",
+        "329a47d5",
+        "2a7816d0",
+        "45340a21",
+        "51e6884c",
+        "5eb38f46",
+        "f4801713",
+        "4a88b64c",
+        "748ffe75",
+        "df60dafd",
+        "6fcc2862",
+        "c29a9d39",
+        "28216df6",
+        "e52f01fd",
+        "f4801713",
+        "28c7e2f3",
+        "748ffe75",
+        "c1be8a68",
+        "e21a058e",
+        "2ac07382",
+        "44210bbc",
+        "bdd529f9",
+        "1f4770e5",
+        "edfd734e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "bb599b30",
+        "329a47d5",
+        "2a7816d0",
+        "45340a21",
+        "51e6884c",
+        "5eb38f46",
+        "f4801713",
+        "4a88b64c",
+        "748ffe75",
+        "df60dafd",
+        "6fcc2862",
+        "c29a9d39",
+        "28216df6",
+        "e52f01fd",
+        "f4801713",
+        "28c7e2f3",
+        "748ffe75",
+        "c1be8a68",
+        "e21a058e",
+        "2ac07382",
+        "44210bbc",
+        "bdd529f9",
+        "1f4770e5",
+        "edfd734e"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/zh-CN.mdx b/questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/zh-CN.mdx
new file mode 100644
index 0000000..1b99258
--- /dev/null
+++ b/questions/explain-the-difference-between-dot-notation-and-bracket-notation-for-accessing-object-properties/zh-CN.mdx
@@ -0,0 +1,94 @@
+---
+title: 解释使用点符号和方括号符号访问对象属性的区别
+---
+
+## TL;DR
+
+点符号和方括号符号是 JavaScript 中访问对象属性的两种方式。点符号更简洁易读，但只能用于有效的 JavaScript 标识符。方括号符号更灵活，可以用于不是有效标识符的属性名称，例如包含空格或特殊字符的属性名称。
+
+```js live
+const obj = { name: 'Alice', 'favorite color': 'blue' };
+
+// Dot notation
+console.log(obj.name); // Alice
+
+// Bracket notation
+console.log(obj['favorite color']); // blue
+```
+
+***
+
+## 点符号 vs. 方括号符号
+
+### 点符号
+
+点符号是访问对象属性最常见和最直接的方式。它简洁易读，但也有一些限制。
+
+#### 语法
+
+```js
+object.property;
+```
+
+#### 示例
+
+```js live
+const person = {
+  name: 'Alice',
+  age: 30,
+};
+
+console.log(person.name); // Alice
+console.log(person.age); // 30
+```
+
+#### 限制
+
+* 属性名称必须是有效的 JavaScript 标识符（例如，没有空格、特殊字符，或不以数字开头）
+* 属性名称不能是动态的（即，它们必须是硬编码的）
+
+### 方括号符号
+
+方括号符号更灵活，可以在点符号无法使用的情况下使用。
+
+#### 语法
+
+```js
+object['property'];
+```
+
+#### 示例
+
+```js live
+const person = {
+  name: 'Alice',
+  'favorite color': 'blue',
+  1: 'one',
+};
+
+console.log(person['name']); // Alice
+console.log(person['favorite color']); // blue
+console.log(person[1]); // one
+```
+
+#### 优点
+
+* 可以访问名称不是有效 JavaScript 标识符的属性
+* 可以使用变量或表达式来动态确定属性名称
+
+#### 动态属性名示例
+
+```js live
+const person = {
+  name: 'Alice',
+  age: 30,
+};
+
+const property = 'name';
+console.log(person[property]); // Alice
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)
+* [JavaScript.info: Objects](https://javascript.info/object)
diff --git a/questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.langnostic.json b/questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.langnostic.json
new file mode 100644
index 0000000..7bb8991
--- /dev/null
+++ b/questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/en-US.langnostic.json
@@ -0,0 +1,48 @@
+{
+  "frontmatter": {
+    "title": "33b69221"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "889b5b6d",
+        "84025ce3",
+        "2a7816d0",
+        "4e03a4d4",
+        "19fcdd6e",
+        "fab8870f",
+        "3416169",
+        "9f817d95",
+        "42cf5b55",
+        "55b4452d",
+        "35bb03fb",
+        "e8d9b1b2",
+        "5e606b26",
+        "1f4770e5",
+        "cf31109e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "889b5b6d",
+        "84025ce3",
+        "2a7816d0",
+        "4e03a4d4",
+        "19fcdd6e",
+        "fab8870f",
+        "3416169",
+        "9f817d95",
+        "42cf5b55",
+        "55b4452d",
+        "35bb03fb",
+        "e8d9b1b2",
+        "5e606b26",
+        "1f4770e5",
+        "cf31109e"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/zh-CN.mdx b/questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/zh-CN.mdx
new file mode 100644
index 0000000..35de1cc
--- /dev/null
+++ b/questions/explain-the-difference-between-global-scope-function-scope-and-block-scope/zh-CN.mdx
@@ -0,0 +1,80 @@
+---
+title: 解释全局作用域、函数作用域和块级作用域的区别
+---
+
+## TL;DR
+
+全局作用域意味着变量可以在代码中的任何地方访问。函数作用域意味着变量只能在其声明的函数内部访问。块级作用域意味着变量只能在其声明的块（例如，在 `{}` 内）中访问。
+
+```js live
+var globalVar = "I'm global"; // 全局作用域
+
+function myFunction() {
+  var functionVar = "I'm in a function"; // 函数作用域
+  if (true) {
+    let blockVar = "I'm in a block"; // 块级作用域
+    console.log(blockVar); // 可以在这里访问
+  }
+  // console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined
+}
+// console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined
+myFunction();
+```
+
+***
+
+## 全局作用域、函数作用域和块级作用域
+
+### 全局作用域
+
+在全局作用域中声明的变量可以在代码中的任何地方访问。在浏览器环境中，这些变量会成为 `window` 对象的属性。
+
+```js live
+var globalVar = "I'm global";
+
+function checkGlobal() {
+  console.log(globalVar); // Accessible here
+}
+
+checkGlobal(); // Output: "I'm global"
+console.log(globalVar); // Output: "I'm global"
+```
+
+### 函数作用域
+
+在函数内声明的变量只能在该函数内部访问。这对于使用 `var`、`let` 或 `const` 声明的变量都是正确的。
+
+```js live
+function myFunction() {
+  var functionVar = "I'm in a function";
+  console.log(functionVar); // 可以在这里访问
+}
+
+myFunction(); // Output: "I'm in a function"
+console.log(functionVar); // Uncaught ReferenceError: functionVar is not defined
+```
+
+### 块级作用域
+
+使用 `let` 或 `const` 在块（例如，在 `{}` 内）中声明的变量只能在该块内访问。这对于 `var` 来说是不成立的，`var` 是函数作用域的。
+
+```js live
+if (true) {
+  let blockVar = "I'm in a block";
+  console.log(blockVar); // 可以在这里访问
+}
+// console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined
+
+if (true) {
+  var blockVarVar = "I'm in a block but declared with var";
+  console.log(blockVarVar); // 可以在这里访问
+}
+console.log(blockVarVar); // Output: "I'm in a block but declared with var"
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: JavaScript scoping](https://developer.mozilla.org/en-US/docs/Glossary/Scope)
+* [MDN Web Docs: var](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var)
+* [MDN Web Docs: let](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
+* [MDN Web Docs: const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)
diff --git a/questions/explain-the-difference-between-mutable-and-immutable-objects/en-US.langnostic.json b/questions/explain-the-difference-between-mutable-and-immutable-objects/en-US.langnostic.json
new file mode 100644
index 0000000..1f0a8f4
--- /dev/null
+++ b/questions/explain-the-difference-between-mutable-and-immutable-objects/en-US.langnostic.json
@@ -0,0 +1,122 @@
+{
+  "frontmatter": {
+    "title": "9ee6afcc"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "3ad141aa",
+        "3e4d7711",
+        "4adbc31c",
+        "50c9ec0c",
+        "e436fe1a",
+        "2a7816d0",
+        "1336182d",
+        "54735fd5",
+        "a106d00e",
+        "adc6f0d1",
+        "3e4d7711",
+        "543475e9",
+        "5c0c905a",
+        "50c9ec0c",
+        "a44e3981",
+        "b700e127",
+        "a1b7324e",
+        "77ee9c94",
+        "7d7101d5",
+        "757f8077",
+        "bf00b02b",
+        "d5d39cf6",
+        "55ee6e0b",
+        "508c5191",
+        "920ceebd",
+        "fbc0c27e",
+        "875f02d0",
+        "a7b4e6a2",
+        "64e53dbb",
+        "dabdde0f",
+        "f92176b0",
+        "901470d1",
+        "39f2d91c",
+        "b6caadd5",
+        "4d769f00",
+        "ebdc442b",
+        "9f355b2c",
+        "fd79cc03",
+        "6a66a886",
+        "b4b2d394",
+        "cc5e0144",
+        "27d4d017",
+        "a26bc9f8",
+        "ddd815e1",
+        "52c17055",
+        "3a0811b1",
+        "1f4d10ba",
+        "1e6219b5",
+        "3a5de94a",
+        "6ee43b19",
+        "1f4770e5",
+        "168bd85a"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "3ad141aa",
+        "3e4d7711",
+        "4adbc31c",
+        "50c9ec0c",
+        "e436fe1a",
+        "2a7816d0",
+        "1336182d",
+        "54735fd5",
+        "a106d00e",
+        "adc6f0d1",
+        "3e4d7711",
+        "543475e9",
+        "5c0c905a",
+        "50c9ec0c",
+        "a44e3981",
+        "b700e127",
+        "a1b7324e",
+        "77ee9c94",
+        "7d7101d5",
+        "757f8077",
+        "bf00b02b",
+        "d5d39cf6",
+        "55ee6e0b",
+        "508c5191",
+        "920ceebd",
+        "fbc0c27e",
+        "875f02d0",
+        "a7b4e6a2",
+        "64e53dbb",
+        "dabdde0f",
+        "f92176b0",
+        "901470d1",
+        "39f2d91c",
+        "b6caadd5",
+        "4d769f00",
+        "ebdc442b",
+        "9f355b2c",
+        "fd79cc03",
+        "6a66a886",
+        "b4b2d394",
+        "cc5e0144",
+        "27d4d017",
+        "a26bc9f8",
+        "ddd815e1",
+        "52c17055",
+        "3a0811b1",
+        "1f4d10ba",
+        "1e6219b5",
+        "3a5de94a",
+        "6ee43b19",
+        "1f4770e5",
+        "168bd85a"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-difference-between-mutable-and-immutable-objects/zh-CN.mdx b/questions/explain-the-difference-between-mutable-and-immutable-objects/zh-CN.mdx
index a06de95..5184bc0 100644
--- a/questions/explain-the-difference-between-mutable-and-immutable-objects/zh-CN.mdx
+++ b/questions/explain-the-difference-between-mutable-and-immutable-objects/zh-CN.mdx
@@ -1,23 +1,134 @@
 ---
-title: 解释可变和不可变对象之间的差异
+title: 解释 JavaScript 中可变对象和不可变对象的区别
 ---
 
-不可变性是函数式编程的一个核心原则，对面向对象的程序也有很多好处。 可变对象是一个可以在创建后修改状态的对象。 不可变对象是一个在创建后无法修改状态的对象。
+## TL;DR
 
-## JavaScript 中有什么是不可变对象的例子？
+**可变对象** 允许在创建后修改属性和值，这是大多数对象的默认行为。
 
-在 JavaScript 中，一些内置类型 (数字，字符串) 是不可变的，但自定义对象通常是可变的。
+```js live
+const mutableObject = {
+  name: 'John',
+  age: 30,
+};
 
-一些内置不可变的 JavaScript 对象是 `Math`, `Date`。
+// Modify the object
+mutableObject.name = 'Jane';
 
-这里有几种方法在普通 JavaScript 对象上添加/模拟不可变性。
+// The object has been modified
+console.log(mutableObject); // Output: { name: 'Jane', age: 30 }
+```
 
-### 对象常量属性
+**不可变对象** 在创建后不能直接修改。在不创建全新值的情况下，其内容无法更改。
 
-通过将`writable: false` 和 `configurable: false`, 你基本上可以创建一个不变值(无法更改, 重新定义或删除) 作为对象属性, 例如:
+```js live
+const immutableObject = Object.freeze({
+  name: 'John',
+  age: 30,
+});
 
-```js
-let myObject = {};
+// Attempt to modify the object
+immutableObject.name = 'Jane';
+
+// The object remains unchanged
+console.log(immutableObject); // Output: { name: 'John', age: 30 }
+```
+
+可变对象和不可变对象之间的主要区别在于可修改性。不可变对象在创建后无法修改，而可变对象可以。
+
+***
+
+## 不可变性
+
+不可变性是函数式编程的核心原则，但它也为面向对象程序提供了很多东西。
+
+### 可变对象
+
+可变性是指对象在创建后可以更改其属性或元素的能力。可变对象是指其状态在创建后可以修改的对象。在 JavaScript 中，对象和数组默认是可变的。它们在内存中存储对其数据的引用。更改属性或元素会修改原始对象。这是一个可变对象的示例：
+
+```js live
+const mutableObject = {
+  name: 'John',
+  age: 30,
+};
+
+// Modify the object
+mutableObject.name = 'Jane';
+
+// The object has been modified
+console.log(mutableObject); // Output: { name: 'Jane', age: 30 }
+```
+
+### 不可变对象
+
+不可变对象是指其状态在创建后无法修改的对象。这是一个不可变对象的示例：
+
+```js live
+const immutableObject = Object.freeze({
+  name: 'John',
+  age: 30,
+});
+
+// Attempt to modify the object
+immutableObject.name = 'Jane';
+
+// The object remains unchanged
+console.log(immutableObject); // Output: { name: 'John', age: 30 }
+```
+
+原始数据类型（如数字、字符串、布尔值、`null` 和 `undefined`）本质上是不可变的。一旦分配了值，就不能直接修改它们。
+
+```js live
+let name = 'Alice';
+name.toUpperCase(); // This won't modify the original name variable
+console.log(name); // Still prints "Alice"
+
+// To change the value, you need to reassign a new string
+name = name.toUpperCase();
+console.log(name); // Now prints "ALICE"
+```
+
+一些内置的不可变 JavaScript 对象是 `Math`、`Date`，但自定义对象通常是可变的。
+
+### `const` vs 不可变对象
+
+一个常见的混淆/误解是使用 `const` 声明变量会使该值不可变，这根本不是真的。
+
+`const` 阻止重新分配变量本身，但不会使其持有的值不可变。这意味着：
+
+* 对于原始值（数字、字符串、布尔值），`const` 使值不可变，因为原始值本质上是不可变的。
+* 对于非原始值，如对象和数组，`const` 仅阻止将新的对象/数组重新分配给变量，但现有对象/数组的属性/元素仍然可以被修改。
+
+另一方面，不可变对象是指在创建后其状态（属性和值）无法修改的对象。这可以通过使用 `Object.freeze()` 等方法来实现，该方法通过阻止对其属性的任何更改来使对象不可变。
+
+```js live
+// 使用 const
+const person = { name: 'John' };
+person = { name: 'Jane' }; // 错误：赋值给常量变量
+person.name = 'Jane'; // 允许，person.name 现在是 'Jane'
+
+// 使用 Object.freeze() 创建一个不可变对象
+const frozenPerson = Object.freeze({ name: 'John' });
+frozenPerson.name = 'Jane'; // 静默失败（没有错误，但没有变化）
+frozenPerson = { name: 'Jane' }; // 错误：赋值给常量变量
+```
+
+在第一个使用 `const` 的例子中，不允许将新对象重新分配给 `person`，但允许修改 `name` 属性。在第二个例子中，`Object.freeze()` 使 `frozenPerson` 对象不可变，从而阻止对其属性的任何更改。
+
+需要注意的是，`Object.freeze()` 创建的是一个浅不可变对象。如果对象包含嵌套对象或数组，除非单独冻结，否则这些嵌套数据结构仍然是可变的。
+
+因此，虽然 `const` 为原始值提供了不可变性，但创建真正不可变的对象需要使用 `Object.freeze()` 或其他不可变性技术，如深度冻结或使用来自 [Immer](https://immerjs.github.io/immer/) 或 [Immutable.js](https://immutable-js.com/) 等库的不可变数据结构。
+
+## 在普通 JavaScript 对象中实现不可变的各种方法
+
+以下是在普通 JavaScript 对象中添加/模拟不同形式的不可变性的几种方法。
+
+### 不可变对象属性
+
+通过结合 `writable: false` 和 `configurable: false`，您本质上可以创建一个常量（不能更改、重新定义或删除）作为对象属性，例如：
+
+```js live
+const myObject = {};
 Object.defineProperty(myObject, 'number', {
   value: 42,
   writable: false,
@@ -28,11 +139,11 @@ myObject.number = 43;
 console.log(myObject.number); // 42
 ```
 
-### 防止扩展
+### 阻止对象扩展
 
-如果你想阻止一个对象被添加新的属性，但在其他方面不影响该对象的其他属性，可以调用`Object.preventExtensions(...)`：
+如果您想阻止向对象添加新属性，但保持对象的其余属性不变，请调用 `Object.preventExtensions(...)`：
 
-```js
+```js live
 let myObject = {
   a: 2,
 };
@@ -40,42 +151,88 @@ let myObject = {
 Object.preventExtensions(myObject);
 
 myObject.b = 3;
-myObject.b; // undefined
+console.log(myObject.b); // undefined
 ```
 
-在非严格模式下，`b`的创建静默失败了。 在严格模式下，它会抛出一个 `TypeError` 。
+在非严格模式下，创建 `b` 会静默失败。在严格模式下，它会抛出 `TypeError`。
 
-### 密封
+### 密封一个对象
 
-`Object.seal()`创建一个 "密封 "的对象，这意味着它采用一个现有的对象，并基本上对其调用`Object.preventExtensions()`，但也将其所有现有属性标记为 `configurable: false`。
+`Object.seal()` 创建一个“密封”对象，这意味着它会获取一个现有对象，并基本上在其上调用 `Object.preventExtensions()`，但也会将所有现有属性标记为 `configurable: false`。因此，您不仅不能添加更多属性，而且也不能重新配置或删除任何现有属性，尽管您仍然可以修改它们的值。
+
+```js live
+// 创建一个对象
+const person = {
+  name: 'John Doe',
+  age: 30,
+};
 
-因此，你不仅不能再添加任何属性，而且也不能重新配置或删除任何现有的属性（尽管你仍然可以修改其值）。
+// 密封对象
+Object.seal(person);
 
-### 冻结
+// 尝试添加新属性（这将静默失败）
+person.city = 'New York'; // 这没有效果
 
-`Object.freeze()`创建一个冻结的对象，这意味着它采用一个现有的对象，并基本上对其调用`Object.seal()`，但它也将所有 "数据访问器 "属性标记为`writable: false` ，所以它们的值不能被改变。
+// 尝试删除现有属性（这将静默失败）
+delete person.age; // 这没有效果
 
-这种方法是你对一个对象本身所能达到的最高级别的不变性，因为它可以防止对该对象或其任何直接属性的任何改变（尽管如上所述，任何被引用的其他对象的内容都不会受到影响）。
+// 修改现有属性（这将起作用）
+person.age = 35;
+
+console.log(person); // 输出：{ name: 'John Doe', age: 35 }
+
+// 尝试重新配置现有属性描述符（这将静默失败）
+Object.defineProperty(person, 'name', { writable: false }); // 在非严格模式下静默失败
+
+// 检查对象是否被密封
+console.log(Object.isSealed(person)); // 输出：true
+```
+
+### 冻结一个对象
+
+`Object.freeze()` 创建一个冻结对象，这意味着它会获取一个现有对象，并基本上在其上调用 `Object.seal()`，但它也会将所有“数据访问器”属性标记为 writable:false，以便它们的值不能被更改。
+
+这种方法是您可以为对象本身达到的最高级别的不可变性，因为它阻止了对对象或其任何直接属性的任何更改（尽管，如上所述，任何引用的其他对象的内容不受影响）。
 
 ```js
 let immutableObject = Object.freeze({});
 ```
 
-冻结对象不允许将新属性添加到对象中，并阻止用户删除或更改现有属性。 `Object.freeze()`保留了对象的可枚举性、可配置性、可写入性和原型。 它返回传递的对象（第一个参数），不会创建一个冻结的副本。
+冻结对象不允许向对象添加新属性，并阻止用户删除或更改现有属性。`Object.freeze()` 保留了对象的枚举性、可配置性、可写性和 `prototype`。它返回传递的对象，并且不会创建冻结副本。
 
-## 不可变性的利弊是什么？
+`Object.freeze()` 使对象不可变。但是，它不一定是常量。`Object.freeze` 阻止对对象本身及其直接属性的修改，冻结对象内的嵌套对象仍然可以被修改。
+
+```js live
+let obj = {
+  user: {},
+};
+
+Object.freeze(obj);
+obj.user.name = 'John';
+
+console.log(obj.user.name); //Output: 'John'
+```
+
+## 不可变性的优缺点是什么？
 
 ### 优点
 
-- 更容易的变化检测：对象的平等性可以通过一种高效和简单的方式即引用的平等性来确定。 这有助于 React 和 Redux 中比较对象的差异。
-- 复杂程度较低：具有不可变对象的方案不那么复杂而难以思考， 因为你不需要担心一个对象可能会随着时间而演变。
-- 通过引用轻松共享：一个对象的一个副本和另一个一样好，所以你可以缓存对象或多次重复使用同一个对象。
-- 线程安全：在多线程环境中，可以安全地在线程之间使用不可变的对象，因为在其他同时运行的线程中不存在修改这些对象的风险。
-- 需要更少的内存：使用库，例如 [Immer](https://immerjs.github.io/immer/) 和 [Immutable.js](https://immutable-js), 对象是使用结构共享进行修改, 具有相似结构的多个对象需要较少内存。
-- 不需要防御性拷贝：当不可变的对象从函数中返回或传递给函数时，不再需要防御性拷贝，因为不可变的对象不可能被它所修改。
+* **更容易进行更改检测**：可以通过引用相等性以高性能和简单的方式确定对象相等性。这对于比较 React 和 Redux 中的对象差异很有用。
+* **更简单**：使用不可变对象的程序更易于思考，因为您无需担心对象可能随时间演变的方式。
+* 通过引用轻松共享：一个对象的副本与另一个对象一样好，因此您可以缓存对象或多次重用同一对象。
+* **线程安全**：不可变对象可以在多线程环境中的线程之间安全使用，因为它们不会有在其他并发运行的线程中被修改的风险。在大多数情况下，JavaScript 在单线程环境中运行
+* **减少内存需求**：使用 [Immer](https://immerjs.github.io/immer/) 和 [Immutable.js](https://immutable-js.com/) 等库，使用结构共享修改对象，并且对于具有相似结构的多个对象，所需的内存更少。
+* **无需防御性复制**：当从不可变对象返回或传递给函数时，不再需要防御性副本，因为不可变对象不可能被它修改。
 
 ### 缺点
 
-- 复杂，要自己创建：对不可变的数据结构及其操作的天真实现会导致性能极差，因为每次都要创建新的对象。 建议利用库来建立高效的不可改变的数据结构和运作，从而对结构共享产生影响。
-- 潜在的负面性能：分配（和减少分配）许多小对象，而不是修改现有对象，可能会对性能产生影响。 内存分配器或垃圾收集器的复杂性通常取决于堆上对象的数量。
-- 循环数据结构的复杂性：像图表这样的循环数据结构难以构建。 如果您有两个在初始化后无法修改的对象，如何让它们指向对方？
+* **难以自行创建**：不可变数据结构及其操作的朴素实现可能会导致性能极差，因为每次都会创建新对象。建议使用库来实现高效的不可变数据结构和利用结构共享的操作。
+* **潜在的负面性能**：分配（和释放）许多小对象而不是修改现有对象可能会导致性能影响。分配器或垃圾收集器的复杂性通常取决于堆上的对象数量。
+* **循环数据结构的复杂性**：循环数据结构（如图形）难以实现。
+
+## 延伸阅读
+
+* [Object.defineProperty() | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)
+* [Object.freeze() | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze)
+* [Object.seal() | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal)
+* [Object.preventExtensions() | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions)
diff --git a/questions/explain-the-difference-between-shallow-copy-and-deep-copy/en-US.langnostic.json b/questions/explain-the-difference-between-shallow-copy-and-deep-copy/en-US.langnostic.json
new file mode 100644
index 0000000..d8712e0
--- /dev/null
+++ b/questions/explain-the-difference-between-shallow-copy-and-deep-copy/en-US.langnostic.json
@@ -0,0 +1,60 @@
+{
+  "frontmatter": {
+    "title": "b464b6ed"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "2da4a603",
+        "2a097296",
+        "2a7816d0",
+        "81bf7792",
+        "7cbd2fa0",
+        "8a84aed0",
+        "748ffe75",
+        "2f269887",
+        "13d64888",
+        "4ee204dd",
+        "77f10b13",
+        "748ffe75",
+        "b3f5e718",
+        "90c7e71b",
+        "63480df5",
+        "ce2b509d",
+        "f3d7af6c",
+        "843ec0f0",
+        "b6be0b83",
+        "1f4770e5",
+        "9c662245"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "2da4a603",
+        "2a097296",
+        "2a7816d0",
+        "81bf7792",
+        "7cbd2fa0",
+        "8a84aed0",
+        "748ffe75",
+        "2f269887",
+        "13d64888",
+        "4ee204dd",
+        "77f10b13",
+        "748ffe75",
+        "b3f5e718",
+        "90c7e71b",
+        "63480df5",
+        "ce2b509d",
+        "f3d7af6c",
+        "843ec0f0",
+        "b6be0b83",
+        "1f4770e5",
+        "9c662245"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-difference-between-shallow-copy-and-deep-copy/zh-CN.mdx b/questions/explain-the-difference-between-shallow-copy-and-deep-copy/zh-CN.mdx
new file mode 100644
index 0000000..e62ef5a
--- /dev/null
+++ b/questions/explain-the-difference-between-shallow-copy-and-deep-copy/zh-CN.mdx
@@ -0,0 +1,79 @@
+---
+title: 解释浅拷贝和深拷贝的区别
+---
+
+## TL;DR
+
+浅拷贝复制对象的顶层属性，但嵌套对象仍然被引用。深拷贝复制对象的所有层级，创建嵌套对象的全新实例。例如，使用 `Object.assign()` 创建浅拷贝，而使用像 `Lodash` 或现代 JavaScript 中的 `structuredClone()` 这样的库可以创建深拷贝。
+
+```js live
+// Shallow copy example
+let obj1 = { a: 1, b: { c: 2 } };
+let shallowCopy = Object.assign({}, obj1);
+shallowCopy.b.c = 3;
+console.log(shallowCopy.b.c); // Output: 3
+console.log(obj1.b.c); // Output: 3 (original nested object changed too!)
+
+// Deep copy example
+let obj2 = { a: 1, b: { c: 2 } };
+let deepCopy = JSON.parse(JSON.stringify(obj2));
+deepCopy.b.c = 4;
+console.log(deepCopy.b.c); // Output: 4
+console.log(obj2.b.c); // Output: 2 (original nested object remains unchanged)
+```
+
+***
+
+## 浅拷贝和深拷贝的区别
+
+### 浅拷贝
+
+浅拷贝创建一个新对象，并将原始对象的顶层属性的值复制到新对象中。但是，如果这些属性中的任何一个是其他对象的引用，则仅复制引用，而不是实际对象。这意味着对复制对象中嵌套对象的更改将影响原始对象。
+
+#### 示例
+
+```js live
+let obj1 = { a: 1, b: { c: 2 } };
+let shallowCopy = Object.assign({}, obj1);
+shallowCopy.b.c = 3;
+console.log(shallowCopy.b.c); // Output: 3
+console.log(obj1.b.c); // Output: 3 (original nested object changed too!)
+```
+
+在此示例中，`shallowCopy` 是 `obj1` 的浅拷贝。更改 `shallowCopy.b.c` 也会更改 `obj1.b.c`，因为 `b` 是 `obj1` 和 `shallowCopy` 中对同一对象的引用。
+
+### 深拷贝
+
+深拷贝创建一个新对象，并递归地复制原始对象的所有属性和嵌套对象。这意味着新对象完全独立于原始对象，并且对复制对象中嵌套对象的更改不会影响原始对象。
+
+#### 示例
+
+```js live
+let obj1 = { a: 1, b: { c: 2 } };
+let deepCopy = JSON.parse(JSON.stringify(obj1));
+deepCopy.b.c = 4;
+console.log(deepCopy.b.c); // Output: 4
+console.log(obj1.b.c); // Output: 2 (original nested object remains unchanged)
+```
+
+在此示例中，`deepCopy` 是 `obj1` 的深拷贝。更改 `deepCopy.b.c` 不会影响 `obj1.b.c`，因为 `b` 在 `deepCopy` 中是一个全新的对象。
+
+### 创建浅拷贝和深拷贝的方法
+
+#### 浅拷贝方法
+
+* `Object.assign()`
+* 展开运算符 (`...`)
+
+#### 深拷贝方法
+
+* `JSON.parse(JSON.stringify())`
+* `structuredClone()` (现代 JavaScript)
+* 像 `Lodash` 这样的库 (`_.cloneDeep`)
+
+## 延伸阅读
+
+* [MDN Web Docs: Object.assign()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
+* [MDN Web Docs: JSON.parse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)
+* [MDN Web Docs: structuredClone()](https://developer.mozilla.org/en-US/docs/Web/API/structuredClone)
+* [Lodash Documentation: \_.cloneDeep](https://lodash.com/docs/4.17.15#cloneDeep)
diff --git a/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.langnostic.json b/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.langnostic.json
new file mode 100644
index 0000000..ca7e0c6
--- /dev/null
+++ b/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.langnostic.json
@@ -0,0 +1,74 @@
+{
+  "frontmatter": {
+    "title": "bda19b5e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "b45397",
+        "b96222cb",
+        "ea9c8d09",
+        "d903fbfe",
+        "2a7816d0",
+        "88ad93b4",
+        "d31824f0",
+        "89091bf",
+        "83bc36aa",
+        "1cebd99d",
+        "c1b47d4b",
+        "4e3a3fa6",
+        "e742614c",
+        "10cfe95e",
+        "3fe22110",
+        "fc64aed8",
+        "22d459a1",
+        "6d790401",
+        "c8718ad4",
+        "96c3e970",
+        "5ba185f5",
+        "f4ae8c6b",
+        "f978b707",
+        "62fab12e",
+        "1975533b",
+        "db7ed482",
+        "1f4770e5",
+        "2f2273a2"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "b45397",
+        "b96222cb",
+        "ea9c8d09",
+        "d903fbfe",
+        "2a7816d0",
+        "88ad93b4",
+        "d31824f0",
+        "89091bf",
+        "83bc36aa",
+        "1cebd99d",
+        "c1b47d4b",
+        "4e3a3fa6",
+        "e742614c",
+        "10cfe95e",
+        "3fe22110",
+        "fc64aed8",
+        "22d459a1",
+        "6d790401",
+        "c8718ad4",
+        "96c3e970",
+        "5ba185f5",
+        "f4ae8c6b",
+        "f978b707",
+        "62fab12e",
+        "1975533b",
+        "db7ed482",
+        "1f4770e5",
+        "2f2273a2"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/zh-CN.mdx b/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/zh-CN.mdx
index db127e8..46763cd 100644
--- a/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/zh-CN.mdx
+++ b/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/zh-CN.mdx
@@ -1,7 +1,166 @@
 ---
-title: 解释同步函数和异步函数之间的差异
+title: 解释 JavaScript 中同步和异步函数的区别
 ---
 
-同步函数是阻塞的，而异步函数则不是。 在同步函数中，语句在运行下一个语句之前完成。 在这种情况下， 该程序正是按照语句的顺序进行执行，如果其中一个语句需要很长时间，则该程序的执行将暂停。
+## 总结
 
-异步函数通常接受回调作为参数，并在调用异步函数后立即在下一行继续执行。 回调只有在异步操作完成且调用栈为空时才会被调用。 重型操作，例如从网络服务器上加载数据或查询数据库应该异步进行，以便主线程能够继续执行其他操作，而不是等到那个漫长的阻塞操作完成(在浏览器的情况下，界面将冻结)。
+同步函数是阻塞的，而异步函数则不是。在同步函数中，语句在运行下一条语句之前完成。因此，仅包含同步代码的程序将完全按照语句的顺序进行评估。如果其中一条语句花费很长时间，程序的执行将暂停。
+
+```js live
+function sum(a, b) {
+  console.log('Inside sum function');
+  return a + b;
+}
+
+const result = sum(2, 3); // The program waits for sum() to complete before assigning the result
+console.log('Result: ', result); // Output: 5
+```
+
+异步函数通常接受回调作为参数，并且在调用异步函数后立即继续执行到下一行。仅当异步操作完成且调用堆栈为空时，才会调用回调。诸如从 Web 服务器加载数据或查询数据库之类的繁重操作应异步完成，以便主线程可以继续执行其他操作，而不是阻塞直到该长时间操作完成（对于浏览器，UI 将冻结）。
+
+```js live
+function fetchData(callback) {
+  setTimeout(() => {
+    const data = { name: 'John', age: 30 };
+    callback(data); // Calling the callback function with data
+  }, 2000); // Simulating a 2-second delay
+}
+
+console.log('Fetching data...');
+
+fetchData((data) => {
+  console.log(data); // Output: { name: 'John', age: 30 } (after 2 seconds)
+});
+
+console.log('Call made to fetch data'); // This will print before the data is fetched
+```
+
+***
+
+## 同步函数与异步函数
+
+在 JavaScript 中，同步和异步函数的概念是理解代码执行方式的基础，尤其是在处理 I/O 任务、API 调用和其他耗时进程的上下文中。
+
+## 同步函数
+
+同步函数按顺序执行，一个接一个。每个操作都必须等待前一个操作完成才能继续进行。
+
+* 同步代码是阻塞的，这意味着程序执行会暂停，直到当前操作完成。
+* 它遵循严格的顺序，逐行执行指令。
+* 同步函数更容易理解和调试，因为流程是可预测的。
+
+### 同步函数示例
+
+1. **同步读取文件**：使用 Node.js 中 fs 模块的同步 readFileSync 方法从文件系统读取文件时，程序执行将被阻塞，直到整个文件被读取。这可能会导致性能问题，尤其是在处理大文件或顺序读取多个文件时
+
+   ```js
+   const fs = require('fs');
+   const data = fs.readFileSync('large-file.txt', 'utf8');
+   console.log(data); // Execution is blocked until the file is read.
+   console.log('End of the program');
+   ```
+
+2. **循环遍历大型数据集**：同步迭代大型数组或数据集可能会冻结用户界面或浏览器选项卡，直到操作完成，导致应用程序无响应。
+
+   ```js live
+   const largeArray = new Array(1_000_000).fill(0);
+   // Blocks the main thread until the million operations are completed.
+   const result = largeArray.map((num) => num * 2);
+   console.log(result);
+   ```
+
+## 异步函数
+
+异步函数不会阻塞程序的执行。它们允许其他操作继续进行，同时等待响应或完成耗时的任务。
+
+* 异步代码是非阻塞的，允许程序继续运行，而无需等待特定操作完成。
+* 它支持并发执行，从而提高性能和响应能力。
+* 异步函数通常用于网络请求、文件 I/O 和计时器等任务。
+
+### 异步函数示例
+
+1. **网络请求**：发出网络请求（例如从 API 获取数据或向服务器发送数据）通常是异步完成的。这使得应用程序在等待响应时保持响应，从而防止用户界面冻结
+
+   ```js live
+   console.log('Start of the program'); // This will be printed first as program starts here
+
+   fetch('https://jsonplaceholder.typicode.com/todos/1')
+     .then((response) => response.json())
+     .then((data) => {
+       console.log(data);
+       /** Process the data without blocking the main thread
+        *  and printed at the end if fetch call succeeds
+        */
+     })
+     .catch((error) => console.error(error));
+
+   console.log('End of program'); // This will be printed before the fetch callback
+   ```
+
+2. **用户输入和事件**：处理用户输入事件（例如单击、按键或鼠标移动）本质上是异步的。应用程序需要响应这些事件，而不会阻塞主线程，从而确保流畅的用户体验。
+
+   ```js
+   const button = document.getElementById('myButton');
+   button.addEventListener('click', () => {
+     // Handle the click event asynchronously
+     console.log('Button clicked');
+   });
+   ```
+
+3. **计时器和动画**：计时器（`setTimeout()`、`setInterval()`）和动画（例如，`requestAnimationFrame()`）是异步操作，允许应用程序调度任务或更新动画，而不会阻塞主线程。
+
+   ```js live
+   setTimeout(() => {
+     console.log('This message is delayed by 2 seconds');
+   }, 2000);
+
+   setInterval(() => {
+     console.log('Current time:', new Date().toLocaleString());
+   }, 2000); // Interval runs every 2 seconds
+   ```
+
+通过使用异步函数和操作，JavaScript 可以处理耗时的任务，而不会冻结用户界面或阻塞主线程。
+
+重要的是要注意，**`async` 函数不会在不同的线程上运行**。它们仍然在主线程上运行。但是，通过使用 [Web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)，可以在 JavaScript 中实现并行性。
+
+## 通过 Web worker 在 JavaScript 中实现并行性
+
+Web worker 允许您生成单独的后台线程，这些线程可以与主线程并行执行 CPU 密集型任务。这些工作线程可以通过消息传递与主线程通信，但它们无法直接访问 DOM 或其他浏览器 API。
+
+```js
+// main.js
+const worker = new Worker('worker.js');
+
+worker.onmessage = function (event) {
+  console.log('Result from worker:', event.data);
+};
+
+worker.postMessage('Start computation');
+```
+
+```js
+// worker.js
+self.onmessage = function (event) {
+  const result = performHeavyComputation();
+  self.postMessage(result);
+};
+
+function performHeavyComputation() {
+  // CPU-intensive computation
+  return 'Computation result';
+}
+```
+
+在此示例中，主线程创建一个新的 web worker，并向其发送一条消息以启动计算。worker 与主线程并行执行繁重的计算，并通过 `postMessage()` 将结果发送回去。
+
+## 事件循环
+
+JavaScript 的异步特性由 JavaScript 引擎的 [事件循环](/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue) 提供支持，即使 JavaScript 是单线程的，它也允许并发操作。 这是一个重要的概念，需要理解，因此我们强烈建议您也浏览该主题。
+
+## 延伸阅读
+
+* [Asynchronous JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous)
+* [The Basics: synchronous and asynchronous JavaScript](https://www.linkedin.com/pulse/basics-synchronous-asynchronous-javascript-abdulkabir-okeowo)
+* [Synchronous and asynchronous programming in JavaScript](https://code.pieces.app/blog/synchronous-and-asynchronous-programming-in-javascript)
+* [Web Workers API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API)
+* [An overview of web workers - Web.dev](https://web.dev/learn/performance/web-worker-overview)
diff --git a/questions/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/en-US.langnostic.json b/questions/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/en-US.langnostic.json
new file mode 100644
index 0000000..51efc69
--- /dev/null
+++ b/questions/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "4e6b68eb"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "42798ec9",
+        "2a7816d0",
+        "8ee3e685",
+        "7c737123",
+        "614cdd4e",
+        "400f2c90",
+        "1b7dfa50",
+        "ca7a8d03",
+        "353d24f5",
+        "5cf4274c",
+        "c4b56a3",
+        "3d29713c",
+        "ac5147e5",
+        "8c71025f",
+        "ed3052d4",
+        "1f4770e5",
+        "aca48b7"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "42798ec9",
+        "2a7816d0",
+        "8ee3e685",
+        "7c737123",
+        "614cdd4e",
+        "400f2c90",
+        "1b7dfa50",
+        "ca7a8d03",
+        "353d24f5",
+        "5cf4274c",
+        "c4b56a3",
+        "3d29713c",
+        "ac5147e5",
+        "8c71025f",
+        "ed3052d4",
+        "1f4770e5",
+        "aca48b7"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/zh-CN.mdx b/questions/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/zh-CN.mdx
new file mode 100644
index 0000000..f1bcb98
--- /dev/null
+++ b/questions/explain-the-difference-between-unit-testing-integration-testing-and-end-to-end-testing/zh-CN.mdx
@@ -0,0 +1,79 @@
+---
+title: 解释单元测试、集成测试和端到端测试的区别
+---
+
+## TL;DR
+
+单元测试侧重于隔离测试单个组件或函数，以确保它们按预期工作。集成测试检查不同模块或服务如何协同工作。端到端测试模拟真实用户场景，以验证从开始到结束的整个应用程序流程。
+
+***
+
+## 单元测试、集成测试和端到端测试的区别
+
+### 单元测试
+
+单元测试涉及隔离测试单个组件或函数。目标是确保代码的每个部分都能正常工作。这些测试通常由开发人员编写，是防止错误的的第一道防线。
+
+* **范围**：单个函数或组件
+* **工具**：Jest、Mocha、Jasmine
+* **示例**：测试一个将两个数字相加的函数
+
+```js
+function add(a, b) {
+  return a + b;
+}
+
+test('adds 1 + 2 to equal 3', () => {
+  expect(add(1, 2)).toBe(3);
+});
+```
+
+### 集成测试
+
+集成测试侧重于验证不同模块或服务之间的交互。目标是确保应用程序的组合部分按预期协同工作。这些测试通常比单元测试更复杂，可能涉及多个组件。
+
+* **范围**：多个组件或服务
+* **工具**：Jest、Mocha、Jasmine、Postman（用于 API 测试）
+* **示例**：测试一个从 API 获取数据并处理数据的函数
+
+```js
+async function fetchData(apiUrl) {
+  const response = await fetch(apiUrl);
+  const data = await response.json();
+  return processData(data);
+}
+
+test('fetches and processes data correctly', async () => {
+  const apiUrl = 'https://api.example.com/data';
+  const data = await fetchData(apiUrl);
+  expect(data).toEqual(expectedProcessedData);
+});
+```
+
+### 端到端测试
+
+端到端 (E2E) 测试模拟真实用户场景，以验证从开始到结束的整个应用程序流程。目标是确保应用程序作为一个整体工作，包括用户界面、后端和任何外部服务。
+
+* **范围**：整个应用程序
+* **工具**：Cypress、Selenium、Puppeteer
+* **示例**：测试用户登录流程
+
+```js
+describe('User Login Flow', () => {
+  it('should allow a user to log in', () => {
+    cy.visit('https://example.com/login');
+    cy.get('input[name="username"]').type('testuser');
+    cy.get('input[name="password"]').type('password123');
+    cy.get('button[type="submit"]').click();
+    cy.url().should('include', '/dashboard');
+  });
+});
+```
+
+## 延伸阅读
+
+* [维基百科上的单元测试](https://en.wikipedia.org/wiki/Unit_testing)
+* [维基百科上的集成测试](https://en.wikipedia.org/wiki/Integration_testing)
+* [维基百科上的端到端测试](https://en.wikipedia.org/wiki/End-to-end_testing)
+* [Jest 文档](https://jestjs.io/docs/getting-started)
+* [Cypress 文档](https://docs.cypress.io/guides/overview/why-cypress)
diff --git a/questions/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.langnostic.json b/questions/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.langnostic.json
new file mode 100644
index 0000000..8d2e751
--- /dev/null
+++ b/questions/explain-the-difference-in-hoisting-between-var-let-and-const/en-US.langnostic.json
@@ -0,0 +1,46 @@
+{
+  "frontmatter": {
+    "title": "ef61e101"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "6ca0ae49",
+        "2a7816d0",
+        "bf1362d8",
+        "cf21213f",
+        "8fe0f375",
+        "aa3aef43",
+        "2a8fefa2",
+        "48899074",
+        "11857e44",
+        "1623a878",
+        "1553a533",
+        "31d7ee9f",
+        "1f4770e5",
+        "a69fa1aa"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "6ca0ae49",
+        "2a7816d0",
+        "bf1362d8",
+        "cf21213f",
+        "8fe0f375",
+        "aa3aef43",
+        "2a8fefa2",
+        "48899074",
+        "11857e44",
+        "1623a878",
+        "1553a533",
+        "31d7ee9f",
+        "1f4770e5",
+        "a69fa1aa"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-difference-in-hoisting-between-var-let-and-const/zh-CN.mdx b/questions/explain-the-difference-in-hoisting-between-var-let-and-const/zh-CN.mdx
new file mode 100644
index 0000000..82341fd
--- /dev/null
+++ b/questions/explain-the-difference-in-hoisting-between-var-let-and-const/zh-CN.mdx
@@ -0,0 +1,48 @@
+---
+title: 解释 `var`、`let` 和 `const` 之间的变量提升区别
+---
+
+## 总结
+
+`var` 声明会被提升到其作用域的顶部并使用 `undefined` 初始化，允许它们在其声明之前被使用。`let` 和 `const` 声明也会被提升，但不会被初始化，如果在声明之前访问它们，则会导致 `ReferenceError`。`const` 声明在声明时还需要一个初始值。
+
+***
+
+## `var`、`let` 和 `const` 之间的变量提升区别
+
+### `var` 的变量提升
+
+`var` 声明会被提升到其包含的函数或全局作用域的顶部。这意味着变量可以在整个函数或脚本中使用，即使在声明它的行之前也是如此。但是，在遇到实际声明之前，变量会被初始化为 `undefined`。
+
+```js live
+console.log(a); // Output: undefined
+var a = 10;
+console.log(a); // Output: 10
+```
+
+### `let` 的变量提升
+
+`let` 声明也会被提升到其块级作用域的顶部，但它们不会被初始化。这会在块的开始到声明被遇到之间创建一个“暂时性死区”（TDZ）。在 TDZ 中访问变量会导致 `ReferenceError`。
+
+```js live
+console.log(b); // ReferenceError: Cannot access 'b' before initialization
+let b = 20;
+console.log(b); // Output: 20
+```
+
+### `const` 的变量提升
+
+`const` 声明在变量提升方面与 `let` 类似。它们被提升到其块级作用域的顶部，但未被初始化，从而导致 TDZ。此外，`const` 在声明时需要一个初始值，并且不能被重新赋值。
+
+```js live
+console.log(c); // ReferenceError: Cannot access 'c' before initialization
+const c = 30;
+console.log(c); // Output: 30
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: var](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var)
+* [MDN Web Docs: let](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
+* [MDN Web Docs: const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)
+* [JavaScript.info: Variable scope, closure](https://javascript.info/closure#var)
diff --git a/questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.langnostic.json b/questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.langnostic.json
new file mode 100644
index 0000000..7e7847f
--- /dev/null
+++ b/questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.langnostic.json
@@ -0,0 +1,62 @@
+{
+  "frontmatter": {
+    "title": "5f802061"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "2765778b",
+        "f56cb764",
+        "597ab666",
+        "c7fc1f4a",
+        "3dc21eb",
+        "4aadbe48",
+        "ec242a06",
+        "2a7816d0",
+        "23440456",
+        "61ea4d33",
+        "96b698d",
+        "8ac7ebde",
+        "3cfea1c2",
+        "597ab666",
+        "241f077b",
+        "fe089a",
+        "2e26993b",
+        "3dc21eb",
+        "67a1d4f3",
+        "ae22a9f0",
+        "1f4770e5",
+        "66926432"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "2765778b",
+        "f56cb764",
+        "597ab666",
+        "c7fc1f4a",
+        "3dc21eb",
+        "4aadbe48",
+        "ec242a06",
+        "2a7816d0",
+        "23440456",
+        "61ea4d33",
+        "96b698d",
+        "8ac7ebde",
+        "3cfea1c2",
+        "597ab666",
+        "241f077b",
+        "fe089a",
+        "2e26993b",
+        "3dc21eb",
+        "67a1d4f3",
+        "ae22a9f0",
+        "1f4770e5",
+        "66926432"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-differences-between-commonjs-modules-and-es-modules/zh-CN.mdx b/questions/explain-the-differences-between-commonjs-modules-and-es-modules/zh-CN.mdx
new file mode 100644
index 0000000..e75f3b0
--- /dev/null
+++ b/questions/explain-the-differences-between-commonjs-modules-and-es-modules/zh-CN.mdx
@@ -0,0 +1,101 @@
+---
+title: 解释 JavaScript 中 CommonJS 模块和 ES 模块的区别
+---
+
+## 总结
+
+在 JavaScript 中，模块是可重用的代码片段，封装了功能，使其更易于管理、维护和构建应用程序。模块允许您将代码分解为更小、更易于管理的部分，每个部分都有自己的作用域。
+
+**CommonJS** 是一个较旧的模块系统，最初是为使用 Node.js 进行服务器端 JavaScript 开发而设计的。它使用 `require()` 函数来加载模块，并使用 `module.exports` 或 `exports` 对象来定义模块的导出。
+
+```js
+// my-module.js
+const value = 42;
+module.exports = { value };
+
+// main.js
+const myModule = require('./my-module.js');
+console.log(myModule.value); // 42
+```
+
+**ES 模块**（ECMAScript 模块）是 ES6（ECMAScript 2015）中引入的标准化模块系统。它们使用 `import` 和 `export` 语句来处理模块依赖关系。
+
+```js
+// my-module.js
+export const value = 42;
+
+// main.js
+import { value } from './my-module.js';
+console.log(value); // 42
+```
+
+**CommonJS vs ES 模块**
+
+| 特性 | CommonJS | ES 模块 |
+| --- | --- | --- |
+| 模块语法 | `require()` 用于导入 `module.exports` 用于导出 | `import` 用于导入 `export` 用于导出 |
+| 环境 | 主要用于 Node.js 进行服务器端开发 | 专为浏览器和服务器端 JavaScript (Node.js) 设计 |
+| 加载 | 模块的同步加载 | 模块的异步加载 |
+| 结构 | 动态导入，可以有条件地调用 | 顶层的静态导入/导出 |
+| 文件扩展名 | `.js` (默认) | `.mjs` 或 `.js` (在 `package.json` 中使用 `type: "module"`) |
+| 浏览器支持 | 浏览器中不原生支持 | 现代浏览器中原生支持 |
+| 优化 | 由于其动态特性，优化有限 | 允许进行树摇等优化，因为具有静态结构 |
+| 兼容性 | 广泛用于现有的 Node.js 代码库和库 | 较新的标准，但在现代项目中得到越来越多的采用 |
+
+***
+
+## Javascript 中的模块
+
+JavaScript 中的模块是一种将代码组织和封装成可重用和可维护单元的方式。它们允许开发人员将他们的代码库分解成更小、自包含的部分，从而促进代码重用、关注点分离和更好的组织。JavaScript 中有两个主要的模块系统：CommonJS 和 ES 模块。
+
+### CommonJS
+
+CommonJS 是一个较旧的模块系统，最初是为使用 Node.js 进行服务器端 JavaScript 开发而设计的。它使用 require 函数来加载模块，并使用 `module.exports` 或 `exports` 对象来定义模块的导出。
+
+* **语法**：使用 `require()` 包含模块，使用 `module.exports` 导出模块。
+* **环境**：主要用于 `Node.js`。
+* **执行**：模块是同步加载的。
+* 模块在运行时动态加载。
+
+```js
+// my-module.js
+const value = 42;
+module.exports = { value };
+
+// main.js
+const myModule = require('./my-module.js');
+console.log(myModule.value); // 42
+```
+
+### ES 模块
+
+ES 模块（ECMAScript 模块）是 ES6（ECMAScript 2015）中引入的标准化模块系统。它们使用 `import` 和 `export` 语句来处理模块依赖关系。
+
+* **语法**：使用 `import` 导入模块，使用 `export` 导出模块。
+* **环境**：可以在浏览器环境和 Node.js 中使用（使用某些配置）。
+* **执行**：模块是异步加载的。
+* **支持**：在 ES2015 中引入，现在在现代浏览器和 Node.js 中得到广泛支持。
+* 模块在编译时静态加载。
+* 由于静态分析和树摇，可以实现更好的性能。
+
+```js
+// my-module.js
+export const value = 42;
+
+// main.js
+import { value } from './my-module.js';
+console.log(value); // 42
+```
+
+## 总结
+
+虽然 CommonJS 最初是 Node.js 中的默认模块系统，但 ES 模块现在是新项目的推荐方法，因为它们提供了更好的工具、性能和生态系统兼容性。 然而，CommonJS 模块仍然广泛用于现有的代码库和库中，尤其是在遗留依赖项中。
+
+## 延伸阅读
+
+* [JavaScript 模块 - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
+* [CommonJS vs ES Modules: 从 require 到 import 的转变](https://nikolasbarwicki.com/articles/commonjs-vs-es-modules-the-shift-from-require-to-import/)
+* [模块，简介 - javascript.info](https://javascript.info/modules-intro)
+* [模块 - Eloquent Javascript](https://eloquentjavascript.net/10_modules.html)
+* [Node.js 中的 CommonJS vs. ES 模块](https://blog.logrocket.com/commonjs-vs-es-modules-node-js/)
+* [理解 JavaScript 中的 CommonJS vs. ES 模块](https://www.syncfusion.com/blogs/post/js-commonjs-vs-es-modules)
diff --git a/questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.langnostic.json b/questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.langnostic.json
new file mode 100644
index 0000000..67ea573
--- /dev/null
+++ b/questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.langnostic.json
@@ -0,0 +1,82 @@
+{
+  "frontmatter": {
+    "title": "5774a226"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "d28a87d",
+        "959ea2a5",
+        "98f624dc",
+        "cb5c1a5",
+        "cf4b5868",
+        "83b2d277",
+        "454d71bd",
+        "573fa2a9",
+        "684325e8",
+        "2a7816d0",
+        "31940765",
+        "a843e4fa",
+        "5ff12ab0",
+        "4fb4aa30",
+        "7e46d513",
+        "77c1efe2",
+        "684325e8",
+        "657a3b69",
+        "9d8dc24e",
+        "6e2b15fe",
+        "e6bf7e83",
+        "cb5c1a5",
+        "25d7cd36",
+        "83b2d277",
+        "b99eac1f",
+        "32ca29c1",
+        "573fa2a9",
+        "91c903bb",
+        "fa071102",
+        "ee23a9aa",
+        "1f4770e5",
+        "60a334e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "d28a87d",
+        "959ea2a5",
+        "98f624dc",
+        "cb5c1a5",
+        "cf4b5868",
+        "83b2d277",
+        "454d71bd",
+        "573fa2a9",
+        "684325e8",
+        "2a7816d0",
+        "31940765",
+        "a843e4fa",
+        "5ff12ab0",
+        "4fb4aa30",
+        "7e46d513",
+        "77c1efe2",
+        "684325e8",
+        "657a3b69",
+        "9d8dc24e",
+        "6e2b15fe",
+        "e6bf7e83",
+        "cb5c1a5",
+        "25d7cd36",
+        "83b2d277",
+        "b99eac1f",
+        "32ca29c1",
+        "573fa2a9",
+        "91c903bb",
+        "fa071102",
+        "ee23a9aa",
+        "1f4770e5",
+        "60a334e"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/zh-CN.mdx b/questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/zh-CN.mdx
index bdf6193..ee350c6 100644
--- a/questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/zh-CN.mdx
+++ b/questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/zh-CN.mdx
@@ -1,23 +1,119 @@
 ---
-title: 解释`function foo() {}` 和 `var foo = function() {}` 之间在`foo` 使用方法上的差异
+title: '解释 JavaScript 中 `function foo() {}` 和 `var foo = function() {}` 之间 `foo` 的用法差异'
 ---
 
-前者是一个函数声明，而后者是一个函数表达式。 关键的区别是，函数声明会使它的主体被提升，但函数表达式的主体没有被提升（它们有和变量一样的提升行为）。 想要了解更多关于提升的解释，请参阅 [提升](/questions/quiz/explanin-hoisting)。 如果你试图在定义之前调用函数表达式，你将会得到一个 `Uncaught TypeError: XXX is not a function` 。
+## 总结
 
-## 函数声明
+`function foo() {}` 是一个函数声明，而 `var foo = function() {}` 是一个函数表达式。 关键区别在于函数声明具有函数体提升，但函数表达式的函数体没有（它们具有与 `var` 声明的变量相同的提升行为）。
+
+如果尝试在函数表达式声明之前调用它，将会得到一个 `Uncaught TypeError: XXX is not a function` 错误。
 
-```js
+即使在函数声明之前，也可以在封闭范围内调用函数声明。
+
+```js live
 foo(); // 'FOOOOO'
 function foo() {
   console.log('FOOOOO');
 }
 ```
 
+如果函数表达式在声明之前被调用，将会导致错误。
+
+```js live
+foo(); // Uncaught TypeError: foo is not a function
+var foo = function () {
+  console.log('FOOOOO');
+};
+```
+
+另一个关键区别在于函数名称的范围。 函数表达式可以通过在 `function` 之后和括号之前定义它来命名。 但是，当使用命名函数表达式时，函数名称只能在函数本身内部访问。 尝试在外部访问它将导致错误或 `undefined`。
+
+```js live
+const myFunc = function namedFunc() {
+  console.log(namedFunc); // Works
+};
+
+myFunc(); // Runs the function and logs the function reference
+console.log(namedFunc); // ReferenceError: namedFunc is not defined
+```
+
+**注意**：由于历史原因，示例使用 `var`。 函数表达式可以使用 `let` 和 `const` 定义，关键区别在于这些关键字的提升行为。
+
+***
+
+## 函数声明
+
+函数声明是一个使用名称定义函数的语句。 它通常用于声明可以在封闭范围内多次调用的函数。
+
+```js live
+function foo() {
+  console.log('FOOOOO');
+}
+foo(); // 'FOOOOO'
+```
+
 ## 函数表达式
 
-```js
+函数表达式是一个定义函数并将其分配给变量的表达式。 当只需要一次或在特定上下文中使用函数时，通常使用它。
+
+```js live
+var foo = function () {
+  console.log('FOOOOO');
+};
+foo(); // 'FOOOOO'
+```
+
+**注意**：由于历史原因，示例使用 `var`。 函数表达式可以使用 `let` 和 `const` 定义，关键区别在于这些关键字的提升行为。
+
+## 关键区别
+
+### 提升
+
+关键的区别在于函数声明有函数体提升，但函数表达式的函数体没有（它们具有与`var`声明的变量相同的提升行为）。有关提升的更多说明，请参阅关于[提升](/questions/quiz/explain-hoisting)的测验问题。如果尝试在函数表达式定义之前调用它，将会得到一个`Uncaught TypeError: XXX is not a function`错误。
+
+函数声明：
+
+```js live
+foo(); // 'FOOOOO'
+function foo() {
+  console.log('FOOOOO');
+}
+```
+
+函数表达式：
+
+```js live
 foo(); // Uncaught TypeError: foo is not a function
 var foo = function () {
   console.log('FOOOOO');
 };
 ```
+
+### 命名范围
+
+函数表达式可以通过在`function`之后和括号之前定义它来命名。但是，当使用命名函数表达式时，函数名称只能在函数本身内部访问。尝试在外部访问它将导致`undefined`，调用它将导致错误。
+
+```js live
+const myFunc = function namedFunc() {
+  console.log(namedFunc); // Works
+};
+
+myFunc(); // Runs the function and logs the function reference
+console.log(namedFunc); // ReferenceError: namedFunc is not defined
+```
+
+## 何时使用
+
+* 函数声明：
+  * 当您想在全局范围内创建一个函数，并在整个封闭范围内使用它时。
+  * 如果一个函数是可重用的，并且需要多次调用。
+* 函数表达式：
+  * 如果一个函数只需要一次或在特定上下文中。
+  * 用于将函数可用性限制为后续代码，并保持封闭范围的清洁。
+
+总的来说，最好使用函数声明来避免确定是否可以调用函数的精神负担。函数表达式的实际用法非常罕见。
+
+## 延伸阅读
+
+* [函数声明 | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)
+* [函数表达式 | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function)
diff --git a/questions/explain-the-different-states-of-a-promise/en-US.langnostic.json b/questions/explain-the-different-states-of-a-promise/en-US.langnostic.json
new file mode 100644
index 0000000..7762000
--- /dev/null
+++ b/questions/explain-the-different-states-of-a-promise/en-US.langnostic.json
@@ -0,0 +1,48 @@
+{
+  "frontmatter": {
+    "title": "cc83687d"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "b1472188",
+        "d8beae83",
+        "2a7816d0",
+        "531a7c0c",
+        "fa4c55a4",
+        "447d2aab",
+        "2df653b6",
+        "c93719ec",
+        "f70f8a4c",
+        "7144b344",
+        "665bc377",
+        "79c3ee71",
+        "db21ae1d",
+        "1f4770e5",
+        "a900f8fa"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "b1472188",
+        "d8beae83",
+        "2a7816d0",
+        "531a7c0c",
+        "fa4c55a4",
+        "447d2aab",
+        "2df653b6",
+        "c93719ec",
+        "f70f8a4c",
+        "7144b344",
+        "665bc377",
+        "79c3ee71",
+        "db21ae1d",
+        "1f4770e5",
+        "a900f8fa"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-different-states-of-a-promise/zh-CN.mdx b/questions/explain-the-different-states-of-a-promise/zh-CN.mdx
new file mode 100644
index 0000000..d6d174e
--- /dev/null
+++ b/questions/explain-the-different-states-of-a-promise/zh-CN.mdx
@@ -0,0 +1,58 @@
+---
+title: 解释 Promise 的不同状态
+---
+
+## 总结
+
+JavaScript 中的 `Promise` 可以处于三种状态之一：`pending`（待定）、`fulfilled`（已实现）或 `rejected`（已拒绝）。创建 `Promise` 时，它首先处于 `pending` 状态。如果操作成功完成，`Promise` 将转换为 `fulfilled` 状态，如果失败，则转换为 `rejected` 状态。 这是一个快速示例：
+
+```js
+let promise = new Promise((resolve, reject) => {
+  // some asynchronous operation
+  if (success) {
+    resolve('Success!');
+  } else {
+    reject('Error!');
+  }
+});
+```
+
+***
+
+## Promise 的不同状态
+
+### 待定
+
+首次创建 `Promise` 时，它处于 `pending` 状态。 这意味着异步操作尚未完成。
+
+```js
+let promise = new Promise((resolve, reject) => {
+  // asynchronous operation
+});
+```
+
+### 已实现
+
+当异步操作成功完成时，`Promise` 转换为 `fulfilled` 状态。 调用 `resolve` 函数来指示这一点。
+
+```js
+let promise = new Promise((resolve, reject) => {
+  resolve('Success!');
+});
+```
+
+### 已拒绝
+
+当异步操作失败时，`Promise` 转换为 `rejected` 状态。 调用 `reject` 函数来指示这一点。
+
+```js
+let promise = new Promise((resolve, reject) => {
+  reject('Error!');
+});
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+* [JavaScript.info: Promises](https://javascript.info/promise-basics)
+* [Promise/A+ Specification](https://promisesaplus.com/)
diff --git a/questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.langnostic.json b/questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.langnostic.json
new file mode 100644
index 0000000..d68816f
--- /dev/null
+++ b/questions/explain-the-different-ways-the-this-keyword-can-be-bound/en-US.langnostic.json
@@ -0,0 +1,68 @@
+{
+  "frontmatter": {
+    "title": "bc05d31c"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "9128e9",
+        "d45e572a",
+        "2a7816d0",
+        "543c624d",
+        "f6031b1a",
+        "a0d202c9",
+        "590c84ab",
+        "431e8ca9",
+        "e851d6d4",
+        "e3a09af8",
+        "93ce039d",
+        "2418943c",
+        "655f8caf",
+        "a87a1422",
+        "1b983f3a",
+        "722ad486",
+        "fe9ccd30",
+        "68e90143",
+        "ddfba541",
+        "8a141fe0",
+        "fb9680c5",
+        "48d5a19f",
+        "d7a0818b",
+        "1f4770e5",
+        "c113df0d"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "9128e9",
+        "d45e572a",
+        "2a7816d0",
+        "543c624d",
+        "f6031b1a",
+        "a0d202c9",
+        "590c84ab",
+        "431e8ca9",
+        "e851d6d4",
+        "e3a09af8",
+        "93ce039d",
+        "2418943c",
+        "655f8caf",
+        "a87a1422",
+        "1b983f3a",
+        "722ad486",
+        "fe9ccd30",
+        "68e90143",
+        "ddfba541",
+        "8a141fe0",
+        "fb9680c5",
+        "48d5a19f",
+        "d7a0818b",
+        "1f4770e5",
+        "c113df0d"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-different-ways-the-this-keyword-can-be-bound/zh-CN.mdx b/questions/explain-the-different-ways-the-this-keyword-can-be-bound/zh-CN.mdx
new file mode 100644
index 0000000..ec3425b
--- /dev/null
+++ b/questions/explain-the-different-ways-the-this-keyword-can-be-bound/zh-CN.mdx
@@ -0,0 +1,115 @@
+---
+title: 解释 `this` 关键字可以绑定的不同方式
+---
+
+## TL;DR
+
+`this` 关键字在 JavaScript 中可以通过几种方式绑定:
+
+* 默认绑定：在非严格模式下，`this` 指向全局对象（在浏览器中是 window）。在严格模式下，`this` 是 `undefined`。
+* 隐式绑定：当一个函数作为对象的方法被调用时，`this` 指向该对象。
+* 显式绑定：使用 `call`、`apply` 或 `bind` 方法显式设置 `this`。
+* new 绑定：当一个函数与 `new` 关键字一起用作构造函数时，`this` 指向新创建的对象。
+* 箭头函数：箭头函数没有自己的 `this`，并从周围的词法环境继承 `this`。
+
+***
+
+## 默认绑定
+
+在非严格模式下，如果一个函数在没有任何上下文的情况下被调用，`this` 指向全局对象（在浏览器中是 window）。在严格模式下，`this` 是 `undefined`。
+
+```js
+function showThis() {
+  console.log(this);
+}
+
+showThis(); // 在非严格模式下：window，在严格模式下：undefined
+```
+
+## 隐式绑定
+
+当一个函数作为对象的方法被调用时，`this` 指向该对象。
+
+```js live
+const obj = {
+  name: 'Alice',
+  greet: function () {
+    console.log(this.name);
+  },
+};
+
+obj.greet(); // 'Alice'
+```
+
+## 显式绑定
+
+使用 `call`、`apply` 或 `bind` 方法，你可以显式地设置 `this`。
+
+### 使用 `call`
+
+```js live
+function greet() {
+  console.log(this.name);
+}
+
+const person = { name: 'Bob' };
+
+greet.call(person); // 'Bob'
+```
+
+### 使用 `apply`
+
+```js live
+function greet(greeting) {
+  console.log(greeting + ', ' + this.name);
+}
+
+const person = { name: 'Charlie' };
+
+greet.apply(person, ['Hello']); // 'Hello, Charlie'
+```
+
+### 使用 `bind`
+
+```js live
+function greet() {
+  console.log(this.name);
+}
+
+const person = { name: 'Dave' };
+
+const boundGreet = greet.bind(person);
+boundGreet(); // 'Dave'
+```
+
+## New 绑定
+
+当一个函数与 `new` 关键字一起用作构造函数时，`this` 指的是新创建的对象。
+
+```js live
+function Person(name) {
+  this.name = name;
+}
+
+const person = new Person('Eve');
+console.log(person.name); // 'Eve'
+```
+
+## 箭头函数
+
+箭头函数没有自己的 `this`，并从周围的词法上下文中继承 `this`。
+
+```js live
+const obj = {
+  firstName: 'Frank',
+  greet: () => {
+    console.log(this.firstName);
+  },
+};
+
+obj.greet(); // undefined, because `this` is inherited from the global scope
+```
+
+## 延伸阅读
+
+* [You Don't Know JS: this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/this%20%26%20object%20prototypes)
diff --git a/questions/explain-the-event-phases-in-a-browser/en-US.langnostic.json b/questions/explain-the-event-phases-in-a-browser/en-US.langnostic.json
new file mode 100644
index 0000000..92707f3
--- /dev/null
+++ b/questions/explain-the-event-phases-in-a-browser/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "b7cf7a15"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "ee4fe510",
+        "2a7816d0",
+        "5bb02508",
+        "66438aa2",
+        "3cd951ed",
+        "7d068ce3",
+        "da357585",
+        "d1726b58",
+        "7eeed40d",
+        "aed7bcf3",
+        "29c0c77c",
+        "a1f1ab00",
+        "3da3df22",
+        "a2811563",
+        "d4e6827e",
+        "1f4770e5",
+        "b11ac82e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "ee4fe510",
+        "2a7816d0",
+        "5bb02508",
+        "66438aa2",
+        "3cd951ed",
+        "7d068ce3",
+        "da357585",
+        "d1726b58",
+        "7eeed40d",
+        "aed7bcf3",
+        "29c0c77c",
+        "a1f1ab00",
+        "3da3df22",
+        "a2811563",
+        "d4e6827e",
+        "1f4770e5",
+        "b11ac82e"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-event-phases-in-a-browser/zh-CN.mdx b/questions/explain-the-event-phases-in-a-browser/zh-CN.mdx
new file mode 100644
index 0000000..f510f33
--- /dev/null
+++ b/questions/explain-the-event-phases-in-a-browser/zh-CN.mdx
@@ -0,0 +1,51 @@
+---
+title: 解释浏览器中的事件阶段
+---
+
+## TL;DR
+
+在浏览器中，事件经历三个阶段：捕获、目标和冒泡。在捕获阶段，事件从根节点传递到目标元素。在目标阶段，事件到达目标元素。最后，在冒泡阶段，事件从目标元素传递回根节点。您可以使用带有 `capture` 选项的 `addEventListener` 来控制事件处理。
+
+***
+
+## 浏览器中的事件阶段
+
+### 捕获阶段
+
+捕获阶段，也称为渗透阶段，是事件传播的第一个阶段。在此阶段，事件从 DOM 树的根开始，向下传递到目标元素。在此阶段注册的事件监听器将按照从最外层祖先到目标元素的顺序触发。
+
+```js
+element.addEventListener('click', handler, true); // true indicates capturing phase
+```
+
+### 目标阶段
+
+目标阶段是事件传播的第二个阶段。在此阶段，事件已到达目标元素本身。直接在目标元素上注册的事件监听器将在此阶段触发。
+
+```js
+element.addEventListener('click', handler); // default is target phase
+```
+
+### 冒泡阶段
+
+冒泡阶段是事件传播的最后一个阶段。在此阶段，事件从目标元素传递回 DOM 树的根。在此阶段注册的事件监听器将按照从目标元素到最外层祖先的顺序触发。
+
+```js
+element.addEventListener('click', handler, false); // false indicates bubbling phase
+```
+
+### 控制事件传播
+
+您可以使用 `stopPropagation` 和 `stopImmediatePropagation` 等方法来控制事件传播。这些方法可以在事件处理程序中调用，以阻止事件进一步传播。
+
+```js
+element.addEventListener('click', function (event) {
+  event.stopPropagation(); // Stops the event from propagating further
+});
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Event bubbling and capturing](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture)
+* [JavaScript.info: Bubbling and capturing](https://javascript.info/bubbling-and-capturing)
+* [W3C: DOM Level 3 Events Specification](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)
diff --git a/questions/explain-the-observer-pattern-and-its-use-cases/en-US.langnostic.json b/questions/explain-the-observer-pattern-and-its-use-cases/en-US.langnostic.json
new file mode 100644
index 0000000..a08f64e
--- /dev/null
+++ b/questions/explain-the-observer-pattern-and-its-use-cases/en-US.langnostic.json
@@ -0,0 +1,58 @@
+{
+  "frontmatter": {
+    "title": "a08e4a16"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "fb4b2c4c",
+        "2a7816d0",
+        "56b6c25",
+        "74a21fe1",
+        "9027660",
+        "9fd9ba3",
+        "9b5019f0",
+        "7b60470b",
+        "ab56268a",
+        "c81ac723",
+        "59f141d",
+        "f1adbdff",
+        "a92588a9",
+        "a1194e21",
+        "4119a3f8",
+        "458e2b0a",
+        "b0df54c6",
+        "17e9083a",
+        "1f4770e5",
+        "5bc832d9"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "fb4b2c4c",
+        "2a7816d0",
+        "56b6c25",
+        "74a21fe1",
+        "9027660",
+        "9fd9ba3",
+        "9b5019f0",
+        "7b60470b",
+        "ab56268a",
+        "c81ac723",
+        "59f141d",
+        "f1adbdff",
+        "a92588a9",
+        "a1194e21",
+        "4119a3f8",
+        "458e2b0a",
+        "b0df54c6",
+        "17e9083a",
+        "1f4770e5",
+        "5bc832d9"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-observer-pattern-and-its-use-cases/zh-CN.mdx b/questions/explain-the-observer-pattern-and-its-use-cases/zh-CN.mdx
new file mode 100644
index 0000000..fbd653b
--- /dev/null
+++ b/questions/explain-the-observer-pattern-and-its-use-cases/zh-CN.mdx
@@ -0,0 +1,84 @@
+---
+title: 解释观察者模式及其用例
+---
+
+## 总结
+
+观察者模式是一种设计模式，其中一个对象（称为主题）维护其依赖项（称为观察者）的列表，并通知它们任何状态更改。此模式对于实现分布式事件处理系统非常有用，例如响应数据更改更新用户界面或实现事件驱动的架构。
+
+***
+
+## 什么是观察者模式？
+
+观察者模式是一种行为设计模式，它定义了对象之间的一对多依赖关系。当主题（一个）的状态发生变化时，它的所有观察者（多个）都会自动收到通知并更新。此模式特别适用于需要在不紧密耦合的情况下，将一个对象中的更改反映到多个其他对象中的场景。
+
+### 关键组件
+
+1. **主题**：保存状态并向观察者发送通知的对象。
+2. **观察者**：需要接收主题更改通知的对象。
+3. **具体主题**：主题的具体实现。
+4. **具体观察者**：观察者的具体实现。
+
+### 示例
+
+这是一个简单的 JavaScript 示例：
+
+```js live
+class Subject {
+  constructor() {
+    this.observers = [];
+  }
+
+  addObserver(observer) {
+    this.observers.push(observer);
+  }
+
+  removeObserver(observer) {
+    this.observers = this.observers.filter((obs) => obs !== observer);
+  }
+
+  notifyObservers() {
+    this.observers.forEach((observer) => observer.update());
+  }
+}
+
+class Observer {
+  update() {
+    console.log('Observer updated');
+  }
+}
+
+// Usage
+const subject = new Subject();
+const observer1 = new Observer();
+const observer2 = new Observer();
+
+subject.addObserver(observer1);
+subject.addObserver(observer2);
+
+subject.notifyObservers(); // Both observers will be updated
+```
+
+## 用例
+
+### 用户界面更新
+
+在前端开发中，观察者模式通常用于响应数据更改来更新用户界面。例如，在模型-视图-控制器 (MVC) 架构中，视图可以观察模型，并在模型状态发生变化时自行更新。
+
+### 事件处理
+
+观察者模式对于实现事件驱动系统非常有用。例如，在 JavaScript 中，`addEventListener` 方法允许您为单个事件（主题）注册多个事件处理程序（观察者）。
+
+### 实时数据馈送
+
+需要实时更新的应用程序（例如股票行情或聊天应用程序）可以从观察者模式中受益。观察者可以订阅数据馈送，并在有新数据可用时收到通知。
+
+### 依赖管理
+
+在复杂的应用程序中，管理不同模块之间的依赖关系可能具有挑战性。观察者模式有助于解耦这些模块，使系统更具模块化，更易于维护。
+
+## 延伸阅读
+
+* [维基百科上的观察者模式](https://en.wikipedia.org/wiki/Observer_pattern)
+* [JavaScript 中的观察者模式](https://www.dofactory.com/javascript/observer-design-pattern)
+* [设计模式：可复用面向对象软件要素](https://www.amazon.com/Design-Patterns-Elements-Reusable-Object-Oriented/dp/0201633612) 作者：Erich Gamma、Richard Helm、Ralph Johnson 和 John Vlissides
diff --git a/questions/explain-the-same-origin-policy-with-regards-to-javascript/en-US.langnostic.json b/questions/explain-the-same-origin-policy-with-regards-to-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..0056979
--- /dev/null
+++ b/questions/explain-the-same-origin-policy-with-regards-to-javascript/en-US.langnostic.json
@@ -0,0 +1,60 @@
+{
+  "frontmatter": {
+    "title": "9a5ac9b"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "733ca1c5",
+        "2a7816d0",
+        "a1c851e2",
+        "eb53477",
+        "d6658a2b",
+        "b041beb2",
+        "b70350cd",
+        "4e5cfec0",
+        "4e8ede6c",
+        "79fdd407",
+        "9b5019f0",
+        "6ef3431",
+        "bb53a3a4",
+        "68f59f31",
+        "847199cc",
+        "a84e4517",
+        "4ef53dec",
+        "e26e7ec",
+        "47acaca9",
+        "1f4770e5",
+        "b5722c23"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "733ca1c5",
+        "2a7816d0",
+        "a1c851e2",
+        "eb53477",
+        "d6658a2b",
+        "b041beb2",
+        "b70350cd",
+        "4e5cfec0",
+        "4e8ede6c",
+        "79fdd407",
+        "9b5019f0",
+        "6ef3431",
+        "bb53a3a4",
+        "68f59f31",
+        "847199cc",
+        "a84e4517",
+        "4ef53dec",
+        "e26e7ec",
+        "47acaca9",
+        "1f4770e5",
+        "b5722c23"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-the-same-origin-policy-with-regards-to-javascript/zh-CN.mdx b/questions/explain-the-same-origin-policy-with-regards-to-javascript/zh-CN.mdx
index 1e3b410..7803c3d 100644
--- a/questions/explain-the-same-origin-policy-with-regards-to-javascript/zh-CN.mdx
+++ b/questions/explain-the-same-origin-policy-with-regards-to-javascript/zh-CN.mdx
@@ -1,5 +1,69 @@
 ---
-title: 解释与JavaScript有关的同源策略。
+title: 解释 JavaScript 方面相同的来源策略
 ---
 
-同源策略阻止 JavaScript 跨域发出请求。 一个源被定义为 URI 协议、主机名和端口号的组合。 这项政策防止一个页面上的恶意脚本通过该页面的文档对象模型访问另一个网页上的敏感数据。
+## TL;DR
+
+同源策略是 Web 浏览器中实施的一项安全措施，旨在防止一个页面上的恶意脚本访问另一个页面上的数据。它确保网页只能向同一来源发出请求，其中来源由协议、域和端口的组合定义。例如，来自 `http://example.com` 的脚本无法访问来自 `http://anotherdomain.com` 的数据。
+
+***
+
+## 什么是同源策略？
+
+同源策略是 Web 应用程序的一个关键安全概念。它限制了从一个来源加载的文档或脚本与来自另一个来源的资源交互的方式。此策略有助于防止恶意活动，例如跨站点脚本 (XSS) 和跨站点请求伪造 (CSRF)。
+
+### 来源的定义
+
+来源由 URL 的方案（协议）、主机（域）和端口定义。例如，`http://example.com:80/page` 的来源是：
+
+* 方案：`http`
+* 主机：`example.com`
+* 端口：`80`
+
+当且仅当所有三个组件（方案、主机和端口）都相同时，两个 URL 具有相同的来源。
+
+### 它是如何工作的
+
+当网页向另一个 URL 发出请求时，浏览器会检查该请求是否来自同一来源。如果该请求来自不同的来源，浏览器会阻止该请求，除非服务器使用跨域资源共享 (CORS) 等机制明确允许该请求。
+
+### 例子
+
+考虑以下示例：
+
+* `http://example.com/page1` 可以访问 `http://example.com/page2`，因为它们共享相同的来源。
+* `http://example.com/page1` 无法访问 `http://anotherdomain.com/page`，因为它们具有不同的来源。
+
+### 异常
+
+同源策略有一些例外，例如：
+
+* 跨域资源共享 (CORS)：一种允许服务器指定谁可以访问其资源的机制。
+* JSONP：一种用于从位于不同域中的服务器请求数据的技术。
+* WebSockets：一种允许通过单个 TCP 连接进行全双工通信通道的协议。
+
+### 代码示例
+
+这是一个简单的示例，演示了同源策略：
+
+```html
+<!-- index.html -->
+<script>
+  // This will work because the request is to the same origin
+  fetch('/api/data')
+    .then((response) => response.json())
+    .then((data) => console.log(data));
+
+  // This will be blocked by the browser because the request is to a different origin
+  fetch('http://anotherdomain.com/api/data')
+    .then((response) => response.json())
+    .then((data) => console.log(data))
+    .catch((error) => console.error('Error:', error));
+</script>
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)
+* [MDN Web Docs: Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS)
+* [OWASP: Cross-Site Scripting (XSS)](https://owasp.org/www-community/attacks/xss/)
+* [OWASP: Cross-Site Request Forgery (CSRF)](https://owasp.org/www-community/attacks/csrf/)
diff --git a/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/en-US.langnostic.json b/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/en-US.langnostic.json
new file mode 100644
index 0000000..e5ddb08
--- /dev/null
+++ b/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/en-US.langnostic.json
@@ -0,0 +1,74 @@
+{
+  "frontmatter": {
+    "title": "ec3f5c7a"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "31268891",
+        "2a7816d0",
+        "44fd9eec",
+        "25841bc3",
+        "fd42bf20",
+        "b6df0131",
+        "73cdcff1",
+        "2819c383",
+        "d36335be",
+        "7d1034c0",
+        "7c02898d",
+        "f4ab82a8",
+        "db9220f6",
+        "4d454d2",
+        "3ae0c8",
+        "bc54e4ba",
+        "aa1ef90c",
+        "d0e673fe",
+        "3f1eb7c5",
+        "ba4429ac",
+        "559863ed",
+        "aa1ef90c",
+        "ef600ac6",
+        "fb53c1c1",
+        "de619341",
+        "4ce6f2db",
+        "1f4770e5",
+        "f1de3aab"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "31268891",
+        "2a7816d0",
+        "44fd9eec",
+        "25841bc3",
+        "fd42bf20",
+        "b6df0131",
+        "73cdcff1",
+        "2819c383",
+        "d36335be",
+        "7d1034c0",
+        "7c02898d",
+        "f4ab82a8",
+        "db9220f6",
+        "4d454d2",
+        "3ae0c8",
+        "bc54e4ba",
+        "aa1ef90c",
+        "d0e673fe",
+        "3f1eb7c5",
+        "ba4429ac",
+        "559863ed",
+        "aa1ef90c",
+        "ef600ac6",
+        "fb53c1c1",
+        "de619341",
+        "4ce6f2db",
+        "1f4770e5",
+        "f1de3aab"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/zh-CN.mdx b/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/zh-CN.mdx
index 9c30f95..c5aa783 100644
--- a/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/zh-CN.mdx
+++ b/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/zh-CN.mdx
@@ -1,19 +1,121 @@
 ---
-title: 解释一个单页应用程序是什么以及如何优化SEO
+title: 解释什么是单页应用程序以及如何使其对 SEO 友好
 ---
 
-当代的网络开发者指出他们构建的产品是 Web 应用，而不是网站。 虽然这两个词之间没有严格区别，但 Web 应用往往具有高度的互动性和动态， 允许用户执行操作并收到对其操作的响应。 通常情况下，浏览器从服务器接收 HTML 并渲染它。 当用户导航到另一个 URL 时，需要全页刷新，服务器将新的 HTML 发送到新页面。 这被称为服务器端渲染。
+## TL;DR
 
-然而，在现代 SPA 中，则使用客户端渲染。 浏览器从服务器加载初始页面，以及整个应用程序所需的脚本(框架、库、应用代码) 和样式表。 当用户导航到其他页面时，不会触发页面刷新。 页面的 URL 通过[HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)更新。 新页面所需的新数据，通常使用 JSON 格式，由浏览器通过 [AJAX](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Start) 向服务器检索. SPA 然后通过 JavaScript 动态地更新页面数据，它已经在初始页面加载中下载好了。 此模型类似于本地移动应用的工作方式。
+单页应用程序 (SPA) 是一种 Web 应用程序，它加载单个 HTML 页面，并在用户与应用程序交互时动态更新内容。这种方法提供了更流畅的用户体验，但对于 SEO 来说可能具有挑战性，因为搜索引擎可能不会执行 JavaScript 来呈现内容。要使 SPA 对 SEO 友好，您可以使用服务器端渲染 (SSR) 或静态站点生成 (SSG) 来确保搜索引擎可以索引您的内容。像 Next.js for React 或 Nuxt.js for Vue.js 这样的工具可以帮助实现这一点。
 
-## 优点
+***
 
-- 由于全页刷新，应用感觉更加敏捷，用户没有看到页面导航之间的闪烁。
-- 服务器收到的 HTTP 请求较少，因为同一个资源不必在每个页面加载时再次下载。
-- 客户端和服务器之间的关注点明确分离；你可以很容易地为不同的平台（如手机、聊天机器人、智能手表）建立新的客户端，而不必修改服务器代码。 只要 API 约定未被损坏，您也可以独立修改客户端和服务器上的技术堆栈。
+## 什么是单页应用程序？
 
-## 缺点
+### 定义
 
-- 由于加载框架、应用程序代码和多个页面所需的资产，初始页面负载较重。
-- 在您的服务器上还有一个步骤要做，即配置它来将所有请求路由到一个单一的入口点，并允许客户端路由从那里接管。
-- SPA 依赖 JavaScript 来呈现内容，但并非所有的搜索引擎在抓取过程中都会执行 JavaScript，它们可能会在你的页面上看到空的内容。 这无意中伤害了您的应用程序的 SEO（搜索引擎优化）。 然而，在大多数情况下，当你正在建造应用软件时，SEO 并不是最重要的因素， 因为并非所有内容都需要通过搜索引擎索引。 为了克服这个问题，你可以在服务器端渲染你的应用程序，或者使用[Plerender](https://prerender.io/)等服务来 "在浏览器中渲染你的 JavaScript，保存静态 HTML，并将其返回给爬虫"。
+单页应用程序 (SPA) 是一种 Web 应用程序，它通过动态重写当前页面而不是从服务器加载整个新页面来与用户交互。这会产生更流畅的用户体验，类似于桌面应用程序。
+
+### 关键特征
+
+* 应用程序加载单个 HTML 页面，并在用户与应用程序交互时动态更新它
+* 使用 AJAX 或 Fetch API 与服务器通信并更新页面，无需完全重新加载
+* 通常依赖客户端路由来管理应用程序内的不同视图或状态
+
+### 优点
+
+* 初始加载后交互更快
+* 由于页面请求减少，服务器负载降低
+* 通过更流畅的过渡改善用户体验
+
+## 如何使 SPA 对 SEO 友好
+
+### 挑战
+
+对于 SEO 来说，SPA 具有挑战性，因为搜索引擎可能不会执行 JavaScript 来呈现内容。这可能导致搜索引擎索引一个空的或不完整的页面。
+
+### 解决方案
+
+#### 服务器端渲染 (SSR)
+
+服务器端渲染涉及在将页面发送到客户端之前在服务器上呈现页面的初始 HTML。这确保了搜索引擎可以索引完全呈现的内容。
+
+* **React**：使用 Next.js，它提供对 SSR 的内置支持
+* **Vue.js**：使用 Nuxt.js，它也支持开箱即用的 SSR
+
+Next.js 示例：
+
+```javascript
+import React from 'react';
+import { GetServerSideProps } from 'next';
+
+const Page = ({ data }) => {
+  return (
+    <div>
+      <h1>{data.title}</h1>
+      <p>{data.content}</p>
+    </div>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  const res = await fetch('https://api.example.com/data');
+  const data = await res.json();
+
+  return {
+    props: {
+      data,
+    },
+  };
+};
+
+export default Page;
+```
+
+#### 静态站点生成 (SSG)
+
+静态站点生成涉及在构建时为每个页面生成 HTML。这种方法适用于内容不经常更改的情况。
+
+* **React**：使用 Next.js 及其静态生成功能
+* **Vue.js**：使用 Nuxt.js 及其静态站点生成功能
+
+Next.js 示例：
+
+```javascript
+import React from 'react';
+import { GetStaticProps } from 'next';
+
+const Page = ({ data }) => {
+  return (
+    <div>
+      <h1>{data.title}</h1>
+      <p>{data.content}</p>
+    </div>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async () => {
+  const res = await fetch('https://api.example.com/data');
+  const data = await res.json();
+
+  return {
+    props: {
+      data,
+    },
+  };
+};
+
+export default Page;
+```
+
+#### 使用工具进行预渲染
+
+一些工具可以预渲染您的 SPA 并将预渲染的 HTML 提供给搜索引擎。
+
+* **Prerender.io**：一项预渲染您的 JavaScript 应用程序并将静态 HTML 提供给搜索引擎的服务
+* **Rendertron**：一个无头 Chrome 渲染解决方案，可用于预渲染您的 SPA
+
+## 延伸阅读
+
+* [Next.js 文档](https://nextjs.org/docs)
+* [Nuxt.js 文档](https://nuxtjs.org/docs)
+* [Prerender.io](https://prerender.io/)
+* [Rendertron](https://github.com/GoogleChrome/rendertron)
diff --git a/questions/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/en-US.langnostic.json b/questions/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/en-US.langnostic.json
new file mode 100644
index 0000000..0e6350d
--- /dev/null
+++ b/questions/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "35c13a17"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "4d121f85",
+        "2a7816d0",
+        "fff110b0",
+        "ea3ed444",
+        "a715cecb",
+        "19a9f610",
+        "6613b3bd",
+        "77c6f040",
+        "87561c27",
+        "4bd5d872",
+        "19446346",
+        "fc4dacf3",
+        "1d39369a",
+        "f4eec989",
+        "ae769b85",
+        "1f4770e5",
+        "b0878d66"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "4d121f85",
+        "2a7816d0",
+        "fff110b0",
+        "ea3ed444",
+        "a715cecb",
+        "19a9f610",
+        "6613b3bd",
+        "77c6f040",
+        "87561c27",
+        "4bd5d872",
+        "19446346",
+        "fc4dacf3",
+        "1d39369a",
+        "f4eec989",
+        "ae769b85",
+        "1f4770e5",
+        "b0878d66"
+      ]
+    }
+  }
+}
diff --git a/questions/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/zh-CN.mdx b/questions/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/zh-CN.mdx
index ea7a46a..6e35dee 100644
--- a/questions/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/zh-CN.mdx
+++ b/questions/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/zh-CN.mdx
@@ -1,17 +1,45 @@
 ---
-title: '解释这为什么不能以IIFE工作: `function foo(){ }();`. 为了使它成为一个IIFE，需要作出哪些改变？'
+title: '解释为什么以下代码不能作为 IIFE 工作：`function foo(){}();`。需要更改什么才能使其成为一个正确的 IIFE？'
 ---
 
-IIFE 是 Immediately Invoked Function Expressions 的缩写，即立即调用函数表达式。 JavaScript 解析器读取`function foo(){ }();` 作为 `function foo(){ }` 和 `(); `, 如果前者是一个 _函数声明_, 而后者是一对括号, 则试图调用函数, 但没有指定名称, 因此，它抛出`Uncaught SyntaxError: Unexpected token )`。
+## TL;DR
 
-这里有两种方法修复它，涉及添加更多括号：`(function foo(){ })()` 和 `(function foo(){ }())` 以 `function` 开头的语句被认为是*函数声明*；通过将这个函数包裹在"() "中，它成为一个*函数表达式*，然后可以用后面的`()`执行。 这些函数不会在全局范围内暴露，如果你不需要在代码里提及，你甚至可以省略它的名称。
+代码 `function foo(){}();` 不能作为立即调用函数表达式 (IIFE) 工作，因为 JavaScript 解析器将 `function foo(){}` 视为函数声明，而不是表达式。要使其成为 IIFE，你需要将函数用括号括起来，将其转换为函数表达式：`(function foo(){})();`。
 
-您也可以使用 `void` 操作符：`void function foo(){ }();`. 不幸的是，这种做法有一个问题。 对给定表达式的执行结果总是\`undefined'，所以如果你的 IIFE 函数返回任何东西，你就不能使用它。 举个例子：
+***
 
-```js
-const foo = void (function bar() {
-  return 'foo';
-})();
+## 为什么代码不能作为 IIFE 工作
 
-console.log(foo); // undefined
+### 函数声明 vs. 函数表达式
+
+在 JavaScript 中，函数声明和函数表达式被解析器区别对待。代码 `function foo(){}` 被解释为函数声明。函数声明不会立即调用；它们会被提升到其作用域的顶部，并且可以在代码的后面调用。
+
+### 语法错误
+
+当你尝试通过在末尾添加 `();` 来立即调用函数声明时，会导致语法错误，因为解析器期望立即调用函数表达式，而不是声明。
+
+## 如何正确地将其制作为 IIFE
+
+### 用括号括起来
+
+要将函数声明转换为函数表达式，你需要将函数声明用括号括起来。这告诉 JavaScript 解析器将其视为一个表达式。以下是更正后的代码：
+
+```javascript
+(function foo(){})();
 ```
+
+### 替代语法
+
+你也可以使用替代语法，将括号放在原始行周围：
+
+```javascript
+(function foo(){}());
+```
+
+这两种语法都是有效的，并且将正确地创建 IIFE。
+
+## 延伸阅读
+
+* [MDN Web Docs: IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)
+* [JavaScript Function Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function)
+* [JavaScript Function Declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)
diff --git a/questions/how-can-closures-be-used-to-create-private-variables/en-US.langnostic.json b/questions/how-can-closures-be-used-to-create-private-variables/en-US.langnostic.json
new file mode 100644
index 0000000..575e5c0
--- /dev/null
+++ b/questions/how-can-closures-be-used-to-create-private-variables/en-US.langnostic.json
@@ -0,0 +1,54 @@
+{
+  "frontmatter": {
+    "title": "cb9cfc50"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "638551f9",
+        "2fa59015",
+        "2a7816d0",
+        "90c7d505",
+        "e71ffef0",
+        "5ee31a12",
+        "6f1a231",
+        "a8147b5f",
+        "9bd8967b",
+        "9b5019f0",
+        "193e6095",
+        "244a3088",
+        "2deb5771",
+        "9e55773d",
+        "2819c383",
+        "71bb9ada",
+        "1f4770e5",
+        "a51a8ee2"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "638551f9",
+        "2fa59015",
+        "2a7816d0",
+        "90c7d505",
+        "e71ffef0",
+        "5ee31a12",
+        "6f1a231",
+        "a8147b5f",
+        "9bd8967b",
+        "9b5019f0",
+        "193e6095",
+        "244a3088",
+        "2deb5771",
+        "9e55773d",
+        "2819c383",
+        "71bb9ada",
+        "1f4770e5",
+        "a51a8ee2"
+      ]
+    }
+  }
+}
diff --git a/questions/how-can-closures-be-used-to-create-private-variables/zh-CN.mdx b/questions/how-can-closures-be-used-to-create-private-variables/zh-CN.mdx
new file mode 100644
index 0000000..3835c03
--- /dev/null
+++ b/questions/how-can-closures-be-used-to-create-private-variables/zh-CN.mdx
@@ -0,0 +1,96 @@
+---
+title: 如何使用闭包创建私有变量？
+---
+
+## TL;DR
+
+JavaScript 中的闭包可以通过在另一个函数中定义一个函数来创建私有变量。内部函数可以访问外部函数的变量，但这些变量无法从外部函数外部访问。这允许您封装和保护变量，防止它们被直接访问或修改。
+
+```js live
+function createCounter() {
+  let count = 0; // private variable
+
+  return {
+    increment: function () {
+      count++;
+      return count;
+    },
+    decrement: function () {
+      count--;
+      return count;
+    },
+    getCount: function () {
+      return count;
+    },
+  };
+}
+
+const counter = createCounter();
+console.log(counter.increment()); // 1
+console.log(counter.getCount()); // 1
+console.log(counter.count); // undefined
+```
+
+***
+
+## 如何使用闭包创建私有变量？
+
+### 了解闭包
+
+闭包是 JavaScript 中的一个特性，其中内部函数可以访问外部（封闭）函数的变量。这包括：
+
+* 在外部函数作用域内声明的变量
+* 外部函数的参数
+* 来自全局作用域的变量
+
+### 创建私有变量
+
+要使用闭包创建私有变量，您可以定义一个返回包含方法的对象的函数。这些方法可以访问和修改私有变量，但变量本身无法从函数外部访问。
+
+### 示例
+
+这是一个详细的示例，说明如何使用闭包创建私有变量：
+
+```js live
+function createCounter() {
+  let count = 0; // private variable
+
+  return {
+    increment: function () {
+      count++;
+      return count;
+    },
+    decrement: function () {
+      count--;
+      return count;
+    },
+    getCount: function () {
+      return count;
+    },
+  };
+}
+
+const counter = createCounter();
+console.log(counter.increment()); // 1
+console.log(counter.increment()); // 2
+console.log(counter.decrement()); // 1
+console.log(counter.getCount()); // 1
+console.log(counter.count); // undefined
+```
+
+### 解释
+
+1. **外部函数**：`createCounter` 是定义私有变量 `count` 的外部函数。
+2. **内部函数**：`createCounter` 返回的对象包含形成闭包的方法（`increment`、`decrement` 和 `getCount`）。这些方法可以访问 `count` 变量。
+3. **封装**：`count` 变量无法直接从 `createCounter` 函数外部访问。它只能通过提供的方法进行访问和修改。
+
+### 优点
+
+* **封装**：私有变量有助于封装对象的状态和行为，防止意外干扰。
+* **数据完整性**：通过限制对变量的直接访问，您可以确保它们仅通过受控方法进行修改。
+
+## 延伸阅读
+
+* [MDN Web Docs: Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)
+* [JavaScript.info: Closures](https://javascript.info/closure)
+* [Eloquent JavaScript: Functions and Closures](https://eloquentjavascript.net/03_functions.html#h_jxlmhe5yFI)
diff --git a/questions/how-can-you-avoid-problems-related-to-hoisting/en-US.langnostic.json b/questions/how-can-you-avoid-problems-related-to-hoisting/en-US.langnostic.json
new file mode 100644
index 0000000..e1c67e8
--- /dev/null
+++ b/questions/how-can-you-avoid-problems-related-to-hoisting/en-US.langnostic.json
@@ -0,0 +1,58 @@
+{
+  "frontmatter": {
+    "title": "cab6c24d"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "1dec1891",
+        "e24c7c03",
+        "2a7816d0",
+        "cef60fa1",
+        "809fb48e",
+        "6fde55e0",
+        "c5534a15",
+        "8140b131",
+        "4ff37942",
+        "23bf8661",
+        "47194317",
+        "379ca7a1",
+        "d71d5ff8",
+        "3cdf6c68",
+        "53fa9c61",
+        "8810ed0d",
+        "eb39de0f",
+        "71a7f690",
+        "1f4770e5",
+        "cca0e26d"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "1dec1891",
+        "e24c7c03",
+        "2a7816d0",
+        "cef60fa1",
+        "809fb48e",
+        "6fde55e0",
+        "c5534a15",
+        "8140b131",
+        "4ff37942",
+        "23bf8661",
+        "47194317",
+        "379ca7a1",
+        "d71d5ff8",
+        "3cdf6c68",
+        "53fa9c61",
+        "8810ed0d",
+        "eb39de0f",
+        "71a7f690",
+        "1f4770e5",
+        "cca0e26d"
+      ]
+    }
+  }
+}
diff --git a/questions/how-can-you-avoid-problems-related-to-hoisting/zh-CN.mdx b/questions/how-can-you-avoid-problems-related-to-hoisting/zh-CN.mdx
new file mode 100644
index 0000000..af6b588
--- /dev/null
+++ b/questions/how-can-you-avoid-problems-related-to-hoisting/zh-CN.mdx
@@ -0,0 +1,106 @@
+---
+title: 如何避免与变量提升相关的问题？
+---
+
+## TL;DR
+
+为了避免与变量提升相关的问题，请始终在作用域顶部使用 `let` 或 `const` 声明变量，而不是 `var`。 这可以确保变量是块作用域的，并且不会被提升到包含函数或全局作用域的顶部。 此外，在调用函数之前声明函数，以避免函数提升问题。
+
+```js live
+// Use let or const
+let x = 10;
+const y = 20;
+console.log(x, y); // Output: 10 20
+
+// Declare functions before calling them
+function myFunction() {
+  console.log('Hello, world!');
+}
+myFunction(); // Output: 'Hello, world!'
+```
+
+***
+
+## 如何避免与变量提升相关的问题？
+
+### 了解变量提升
+
+变量提升是 JavaScript 将声明移至当前作用域（脚本或函数）顶部的默认行为。 如果管理不当，这可能会导致意外结果。
+
+### 使用 `let` 和 `const` 而不是 `var`
+
+`let` 和 `const` 是块作用域的，这意味着它们只能在定义它们的块中访问。 这可以防止它们被提升到函数或全局作用域的顶部，从而降低意外行为的风险。
+
+```js live
+console.log(x); // undefined. (Hoisted but uninitialized, risk of unexpected behavior)
+console.log(y); // ReferenceError: Cannot access 'y' before initialization. (Not hoisted)
+console.log(z); // ReferenceError: Cannot access 'z' before initialization. (Not hoisted)
+
+// Avoid using var
+var x = 10; // Hoisted to the top of the function or global scope
+
+// Use let or const
+let y = 20; // Block-scoped, not hoisted to the top
+const z = 30; // Block-scoped, not hoisted to the top
+```
+
+### 在变量作用域的顶部声明变量
+
+为了避免混淆和潜在的错误，请始终在变量的作用域顶部声明变量。 这样可以清楚地说明变量的来源，并确保它们在使用前已初始化。
+
+```js live
+function example() {
+  let a = 1;
+  const b = 2;
+
+  // Now use a and b
+  console.log(a + b);
+}
+example(); // Output: 3
+```
+
+### 在调用函数之前声明它们
+
+函数声明会被提升，但函数表达式不会。 为了避免出现问题，请始终在调用函数之前声明它们。
+
+```js live
+// Function declaration (hoisted)
+function myFunction() {
+  console.log('Hello, world!');
+}
+myFunction(); // No issues here
+
+// Function expression (not hoisted)
+const anotherFunction = function () {
+  console.log('Hello again!');
+};
+anotherFunction(); // No issues here
+```
+
+### 避免使用未声明的变量
+
+由于变量提升，使用未声明的变量可能会导致意外行为。 始终在使用变量之前声明它们。
+
+```js live
+// Avoid this
+function badExample() {
+  x = 10; // ReferenceError in strict mode
+  console.log(x);
+}
+
+// Do this instead
+function goodExample() {
+  let x = 10; // x is declared
+  console.log(x);
+}
+
+goodExample();
+badExample();
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
+* [MDN Web Docs: var](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var)
+* [MDN Web Docs: let](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
+* [MDN Web Docs: const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)
diff --git a/questions/how-can-you-create-custom-error-objects/en-US.langnostic.json b/questions/how-can-you-create-custom-error-objects/en-US.langnostic.json
new file mode 100644
index 0000000..2380c10
--- /dev/null
+++ b/questions/how-can-you-create-custom-error-objects/en-US.langnostic.json
@@ -0,0 +1,54 @@
+{
+  "frontmatter": {
+    "title": "ee312c2b"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "f508916b",
+        "88e52ef1",
+        "2a7816d0",
+        "9c7ddb56",
+        "83b881aa",
+        "1acc01cf",
+        "13fe1080",
+        "1745a880",
+        "befc42d8",
+        "d0b48bc5",
+        "3294d215",
+        "a1142c37",
+        "cfbb8b18",
+        "77590104",
+        "a87cc2bb",
+        "475e1dfb",
+        "1f4770e5",
+        "67003490"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "f508916b",
+        "88e52ef1",
+        "2a7816d0",
+        "9c7ddb56",
+        "83b881aa",
+        "1acc01cf",
+        "13fe1080",
+        "1745a880",
+        "befc42d8",
+        "d0b48bc5",
+        "3294d215",
+        "a1142c37",
+        "cfbb8b18",
+        "77590104",
+        "a87cc2bb",
+        "475e1dfb",
+        "1f4770e5",
+        "67003490"
+      ]
+    }
+  }
+}
diff --git a/questions/how-can-you-create-custom-error-objects/zh-CN.mdx b/questions/how-can-you-create-custom-error-objects/zh-CN.mdx
new file mode 100644
index 0000000..ccd0f18
--- /dev/null
+++ b/questions/how-can-you-create-custom-error-objects/zh-CN.mdx
@@ -0,0 +1,116 @@
+---
+title: 如何创建自定义错误对象？
+---
+
+## TL;DR
+
+要在 JavaScript 中创建自定义错误对象，您可以扩展内置的 `Error` 类。 这允许您向错误对象添加自定义属性和方法。 这是一个快速示例：
+
+```js live
+class CustomError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'CustomError';
+  }
+}
+
+try {
+  throw new CustomError('This is a custom error message');
+} catch (error) {
+  console.log(error.name); // CustomError
+  console.log(error.message); // This is a custom error message
+}
+```
+
+***
+
+## 如何创建自定义错误对象？
+
+### 扩展 `Error` 类
+
+要创建自定义错误对象，您可以扩展内置的 `Error` 类。 这允许您继承 `Error` 类的属性和方法，同时添加您自己的自定义属性和方法。
+
+```js
+class CustomError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'CustomError';
+  }
+}
+```
+
+### 添加自定义属性
+
+您可以向自定义错误类添加自定义属性，以提供有关错误的更多上下文。
+
+```js live
+class CustomError extends Error {
+  constructor(message, errorCode) {
+    super(message);
+    this.name = 'CustomError';
+    this.errorCode = errorCode;
+  }
+}
+
+try {
+  throw new CustomError('This is a custom error message', 404);
+} catch (error) {
+  console.log(error.name); // CustomError
+  console.log(error.message); // This is a custom error message
+  console.log(error.errorCode); // 404
+}
+```
+
+### 自定义方法
+
+您还可以向自定义错误类添加自定义方法来处理特定的错误相关逻辑。
+
+```js live
+class CustomError extends Error {
+  constructor(message, errorCode) {
+    super(message);
+    this.name = 'CustomError';
+    this.errorCode = errorCode;
+  }
+
+  logError() {
+    console.error(`${this.name} [${this.errorCode}]: ${this.message}`);
+  }
+}
+
+try {
+  throw new CustomError('This is a custom error message', 404);
+} catch (error) {
+  error.logError(); // CustomError [404]: This is a custom error message
+}
+```
+
+### 使用 `instanceof` 检查自定义错误
+
+您可以使用 `instanceof` 运算符来检查错误是否是您的自定义错误类的实例。
+
+```js live
+class CustomError extends Error {
+  constructor(message, errorCode) {
+    super(message);
+    this.name = 'CustomError';
+    this.errorCode = errorCode;
+  }
+}
+
+try {
+  throw new CustomError('This is a custom error message', 404);
+} catch (error) {
+  if (error instanceof CustomError) {
+    console.log('Caught a CustomError');
+  } else {
+    console.log('Caught a different type of error');
+  }
+}
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Error](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error)
+* [MDN Web Docs: Extending built-in classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#subclassing_built-in_classes)
+* [JavaScript.info: Custom errors](https://javascript.info/custom-errors)
diff --git a/questions/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/en-US.langnostic.json b/questions/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/en-US.langnostic.json
new file mode 100644
index 0000000..b97480c
--- /dev/null
+++ b/questions/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/en-US.langnostic.json
@@ -0,0 +1,76 @@
+{
+  "frontmatter": {
+    "title": "e798c866"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "5092b247",
+        "2a7816d0",
+        "e6136bea",
+        "c3a9a22a",
+        "21dc1205",
+        "711730f0",
+        "a6561702",
+        "8f40557f",
+        "cb53abeb",
+        "16fef52f",
+        "ea975acc",
+        "9ad3f1de",
+        "5a325cbc",
+        "a45ac085",
+        "c7650aab",
+        "7fa271b6",
+        "f118ce2c",
+        "eca84932",
+        "3f433d8c",
+        "3826dfe3",
+        "8c9eed30",
+        "f692c6c3",
+        "4611eb18",
+        "5c5ca95e",
+        "d7d1861f",
+        "525aeb8a",
+        "23b347d4",
+        "1f4770e5",
+        "1c8fd2b0"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "5092b247",
+        "2a7816d0",
+        "e6136bea",
+        "c3a9a22a",
+        "21dc1205",
+        "711730f0",
+        "a6561702",
+        "8f40557f",
+        "cb53abeb",
+        "16fef52f",
+        "ea975acc",
+        "9ad3f1de",
+        "5a325cbc",
+        "a45ac085",
+        "c7650aab",
+        "7fa271b6",
+        "f118ce2c",
+        "eca84932",
+        "3f433d8c",
+        "3826dfe3",
+        "8c9eed30",
+        "f692c6c3",
+        "4611eb18",
+        "5c5ca95e",
+        "d7d1861f",
+        "525aeb8a",
+        "23b347d4",
+        "1f4770e5",
+        "1c8fd2b0"
+      ]
+    }
+  }
+}
diff --git a/questions/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/zh-CN.mdx b/questions/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/zh-CN.mdx
new file mode 100644
index 0000000..81f471e
--- /dev/null
+++ b/questions/how-can-you-implement-secure-authentication-and-authorization-in-javascript-applications/zh-CN.mdx
@@ -0,0 +1,118 @@
+---
+title: 如何在 JavaScript 应用程序中实现安全的身份验证和授权？
+---
+
+## TL;DR
+
+要在 JavaScript 应用程序中实现安全的身份验证和授权，请使用 HTTPS 加密传输中的数据，并使用 `localStorage` 或 `sessionStorage` 安全地存储令牌等敏感数据。使用 JWT 实现基于令牌的身份验证，并在服务器端验证令牌。使用 OAuth 等库进行第三方身份验证，并确保为授权使用适当的基于角色的访问控制 (RBAC)。
+
+***
+
+## 如何在 JavaScript 应用程序中实现安全的身份验证和授权？
+
+### 使用 HTTPS
+
+确保您的应用程序使用 HTTPS 加密传输中的数据。这可以防止中间人攻击，并确保客户端和服务器之间交换的数据是安全的。
+
+### 基于令牌的身份验证
+
+使用 JSON Web 令牌 (JWT) 进行基于令牌的身份验证。JWT 是紧凑的、URL 安全的令牌，可用于在各方之间安全地传输信息。
+
+#### 生成 JWT 的示例
+
+```js
+const jwt = require('jsonwebtoken');
+
+const token = jwt.sign({ userId: 123 }, 'your-256-bit-secret', {
+  expiresIn: '1h',
+});
+```
+
+#### 验证 JWT 的示例
+
+```js
+const jwt = require('jsonwebtoken');
+
+try {
+  const decoded = jwt.verify(token, 'your-256-bit-secret');
+  console.log(decoded);
+} catch (err) {
+  console.error('Invalid token');
+}
+```
+
+### 安全存储
+
+安全地存储令牌等敏感数据。使用 `localStorage` 或 `sessionStorage` 存储令牌，但要注意它们存在的漏洞。为了提高安全性，请考虑使用 HttpOnly cookie。
+
+#### 将令牌存储在 `localStorage` 中的示例
+
+```js
+localStorage.setItem('token', token);
+```
+
+#### 从 `localStorage` 检索令牌的示例
+
+```js
+const token = localStorage.getItem('token');
+```
+
+### 服务器端验证
+
+始终在服务器端验证令牌，以确保它们未被篡改。这增加了额外的安全层。
+
+### 用于第三方身份验证的 OAuth
+
+使用 OAuth 进行第三方身份验证。像 Passport.js 这样的库可以简化应用程序中 OAuth 的实现。
+
+#### 使用 Passport.js 进行 Google OAuth 的示例
+
+```js
+const passport = require('passport');
+const GoogleStrategy = require('passport-google-oauth20').Strategy;
+
+passport.use(
+  new GoogleStrategy(
+    {
+      clientID: 'YOUR_GOOGLE_CLIENT_ID',
+      clientSecret: 'YOUR_GOOGLE_CLIENT_SECRET',
+      callbackURL: 'http://www.example.com/auth/google/callback',
+    },
+    function (accessToken, refreshToken, profile, done) {
+      User.findOrCreate({ googleId: profile.id }, function (err, user) {
+        return done(err, user);
+      });
+    },
+  ),
+);
+```
+
+### 基于角色的访问控制 (RBAC)
+
+实施基于角色的访问控制，以确保用户拥有访问资源的适当权限。
+
+#### Express.js 中 RBAC 中间件的示例
+
+```js
+function checkRole(role) {
+  return function (req, res, next) {
+    if (req.user && req.user.role === role) {
+      next();
+    } else {
+      res.status(403).send('Forbidden');
+    }
+  };
+}
+
+// Usage
+app.get('/admin', checkRole('admin'), (req, res) => {
+  res.send('Welcome, admin!');
+});
+```
+
+## 延伸阅读
+
+* [JWT.io](https://jwt.io/)
+* [Passport.js documentation](http://www.passportjs.org/docs/)
+* [OWASP Secure Coding Practices](https://owasp.org/www-project-secure-coding-practices/)
+* [MDN Web Docs on HTTPS](https://developer.mozilla.org/en-US/docs/Web/Security/HTTP_strict_transport_security)
diff --git a/questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.langnostic.json b/questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.langnostic.json
new file mode 100644
index 0000000..d1317d3
--- /dev/null
+++ b/questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "41e3c3c2"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "44f2282c",
+        "2a7816d0",
+        "bfc71049",
+        "88060c42",
+        "d2b977ef",
+        "3d4c94ed",
+        "6c91fbda",
+        "5494e869",
+        "828135ce",
+        "cf5c3931",
+        "6047ba4d",
+        "67c16a77",
+        "11d27bfa",
+        "fb9d3d6d",
+        "a42d2d9",
+        "417ae958",
+        "f3f85893",
+        "21c6396a",
+        "1d560b1c",
+        "5248ed8e",
+        "46ef02ea",
+        "1f4770e5",
+        "c070c801"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "44f2282c",
+        "2a7816d0",
+        "bfc71049",
+        "88060c42",
+        "d2b977ef",
+        "3d4c94ed",
+        "6c91fbda",
+        "5494e869",
+        "828135ce",
+        "cf5c3931",
+        "6047ba4d",
+        "67c16a77",
+        "11d27bfa",
+        "fb9d3d6d",
+        "a42d2d9",
+        "417ae958",
+        "f3f85893",
+        "21c6396a",
+        "1d560b1c",
+        "5248ed8e",
+        "46ef02ea",
+        "1f4770e5",
+        "c070c801"
+      ]
+    }
+  }
+}
diff --git a/questions/how-can-you-optimize-dom-manipulation-for-better-performance/zh-CN.mdx b/questions/how-can-you-optimize-dom-manipulation-for-better-performance/zh-CN.mdx
new file mode 100644
index 0000000..0ca20bc
--- /dev/null
+++ b/questions/how-can-you-optimize-dom-manipulation-for-better-performance/zh-CN.mdx
@@ -0,0 +1,109 @@
+---
+title: 如何优化 DOM 操作以获得更好的性能？
+---
+
+## TL;DR
+
+要优化 DOM 操作以获得更好的性能，请尽量减少直接访问和更新 DOM。使用诸如批处理 DOM 更改、使用 `documentFragment` 处理多个元素以及利用 React 等虚拟 DOM 库等技术。此外，还可以考虑使用 `requestAnimationFrame` 进行动画处理，并通过分别读取和写入 DOM 属性来避免布局抖动。
+
+***
+
+## 如何优化 DOM 操作以获得更好的性能？
+
+### 尽量减少直接 DOM 访问
+
+访问 DOM 相对较慢，因此请尽量减少从 DOM 读取或写入 DOM 的次数。相反，将对元素的引用存储在变量中，并使用这些变量。
+
+```js live
+// Creating an element for the example below
+const newElement = document.createElement('div');
+newElement.id = 'myElement';
+document.body.appendChild(newElement);
+
+const element = document.getElementById('myElement'); // Access once
+// Then use the reference to edit style
+element.style.color = 'red';
+element.style.backgroundColor = 'blue';
+
+console.log(document.body); // Notice the edits
+```
+
+### 批处理 DOM 更改
+
+不要一次对 DOM 进行多次更改，而是将它们批处理在一起。这减少了重排和重绘的次数。
+
+```js live
+// Creating an element for the example below
+const newElement = document.createElement('div');
+newElement.id = 'myElement';
+document.body.appendChild(newElement);
+
+const element = document.getElementById('myElement');
+element.style.cssText = 'color: red; background-color: blue;';
+
+console.log(document.body); // Notice the edits
+```
+
+### 使用 `documentFragment`
+
+将多个元素添加到 DOM 时，使用 `documentFragment` 以最大限度地减少重排和重绘。
+
+```js live
+const fragment = document.createDocumentFragment();
+for (let i = 0; i < 100; i++) {
+  const newElement = document.createElement('div');
+  newElement.textContent = `Item ${i}`;
+  fragment.appendChild(newElement);
+}
+document.body.appendChild(fragment);
+
+console.log(document.body); // Notice that the divs have been added
+```
+
+### 利用虚拟 DOM 库
+
+React 等库使用虚拟 DOM 来批处理更新并最大限度地减少直接 DOM 操作，这可以显著提高性能。
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const App = () => (
+  <div>
+    <h1>Hello, world!</h1>
+  </div>
+);
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+### 使用 `requestAnimationFrame` 进行动画处理
+
+为了获得更流畅的动画效果，请使用 `requestAnimationFrame` 确保更新与浏览器的重绘周期同步。
+
+```js
+function animate() {
+  // Update animation state
+  requestAnimationFrame(animate);
+}
+requestAnimationFrame(animate);
+```
+
+### 避免布局抖动
+
+当您以迫使浏览器多次重新计算样式和布局的方式反复读取和写入 DOM 时，就会发生布局抖动。为避免这种情况，请将读取和写入操作分开。
+
+```js live
+// Creating an element for the example below
+const newElement = document.createElement('div');
+newElement.id = 'myElement';
+document.body.appendChild(newElement);
+
+const element = document.getElementById('myElement');
+const height = element.clientHeight; // Read
+element.style.height = `${height + 10}px`; // Write
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Using requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
diff --git a/questions/how-can-you-optimize-network-requests-for-better-performance/en-US.langnostic.json b/questions/how-can-you-optimize-network-requests-for-better-performance/en-US.langnostic.json
new file mode 100644
index 0000000..ad5e39b
--- /dev/null
+++ b/questions/how-can-you-optimize-network-requests-for-better-performance/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "c8386077"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "98bd25f4",
+        "2a7816d0",
+        "4780cd69",
+        "9c37698e",
+        "b2025924",
+        "7e2467ee",
+        "34e56c4c",
+        "ea55ad9a",
+        "ccf8b2",
+        "fccff875",
+        "3f543125",
+        "d731b34e",
+        "7c97aef3",
+        "45332e17",
+        "8abe2715",
+        "262c12fa",
+        "1e93d8a5",
+        "5d29152e",
+        "7fd1cd0",
+        "1ab1a4f3",
+        "2a39d652",
+        "1f4770e5",
+        "ee20c174"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "98bd25f4",
+        "2a7816d0",
+        "4780cd69",
+        "9c37698e",
+        "b2025924",
+        "7e2467ee",
+        "34e56c4c",
+        "ea55ad9a",
+        "ccf8b2",
+        "fccff875",
+        "3f543125",
+        "d731b34e",
+        "7c97aef3",
+        "45332e17",
+        "8abe2715",
+        "262c12fa",
+        "1e93d8a5",
+        "5d29152e",
+        "7fd1cd0",
+        "1ab1a4f3",
+        "2a39d652",
+        "1f4770e5",
+        "ee20c174"
+      ]
+    }
+  }
+}
diff --git a/questions/how-can-you-optimize-network-requests-for-better-performance/zh-CN.mdx b/questions/how-can-you-optimize-network-requests-for-better-performance/zh-CN.mdx
new file mode 100644
index 0000000..da648ee
--- /dev/null
+++ b/questions/how-can-you-optimize-network-requests-for-better-performance/zh-CN.mdx
@@ -0,0 +1,63 @@
+---
+title: 如何优化网络请求以获得更好的性能？
+---
+
+## TL;DR
+
+为了优化网络请求以获得更好的性能，您可以尽量减少请求数量、使用缓存、压缩数据，并利用 HTTP/2 和 Service Worker 等现代 Web 技术。例如，您可以将多个 CSS 文件合并成一个以减少请求数量，使用 `Cache-Control` 标头缓存静态资源，并在您的服务器上启用 Gzip 压缩以减少传输的数据大小。
+
+***
+
+## 如何优化网络请求以获得更好的性能？
+
+### 尽量减少请求数量
+
+减少网络请求的数量可以显著提高性能。以下是一些策略：
+
+* **合并文件**：将多个 CSS 或 JavaScript 文件合并成一个文件。
+* **图像精灵**：将多个图像合并成一个精灵表，并使用 CSS 显示图像的正确部分。
+* **内联小资源**：使用数据 URI 将小图像或字体直接内联到您的 CSS 或 HTML 中。
+
+### 使用缓存
+
+缓存可以减少对尚未更改的资源进行网络请求的需求：
+
+* **HTTP 缓存**：使用 `Cache-Control` 和 `ETag` 标头来控制浏览器缓存资源的方式和时间。
+* **Service Worker**：实现 Service Worker 来缓存资源和 API 响应，允许您的应用程序离线工作，并在后续访问时更快地加载。
+
+### 压缩数据
+
+减少传输的数据大小可以加速网络请求：
+
+* **Gzip/Brotli 压缩**：在您的服务器上启用 Gzip 或 Brotli 压缩以压缩 HTML、CSS 和 JavaScript 文件。
+* **最小化**：最小化 CSS、JavaScript 和 HTML 文件以删除不必要的字符并减小文件大小。
+
+### 利用现代 Web 技术
+
+现代 Web 技术可以帮助优化网络性能：
+
+* **HTTP/2**：使用 HTTP/2 来利用多路复用、标头压缩和服务器推送，这可以减少延迟并提高加载时间。
+* **CDN**：使用内容分发网络 (CDN) 从更靠近用户的位置提供静态资源，从而减少延迟。
+
+### 优化图像
+
+图像通常占用了很大一部分已传输的数据：
+
+* **响应式图像**：使用 `srcset` 属性根据用户的设备提供不同的图像大小。
+* **图像格式**：使用现代图像格式，如 WebP 或 AVIF，它们比 JPEG 或 PNG 等传统格式提供更好的压缩。
+* **懒加载**：实现懒加载以推迟加载图像，直到需要它们。
+
+### 减少有效负载大小
+
+减少每个请求中发送的数据量可以提高性能：
+
+* **API 优化**：优化 API 响应，仅包含必要的数据。
+* **GraphQL**：使用 GraphQL 仅请求客户端所需的数据。
+
+## 延伸阅读
+
+* [MDN Web Docs: HTTP 缓存](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching)
+* [Google Developers: 优化内容效率](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/)
+* [Web.dev: 使用 HTTP/2](https://web.dev/http2/)
+* [MDN Web Docs: Service workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
+* [Google Developers: 图片优化](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization)
diff --git a/questions/how-can-you-prevent-clickjacking-attacks/en-US.langnostic.json b/questions/how-can-you-prevent-clickjacking-attacks/en-US.langnostic.json
new file mode 100644
index 0000000..4d97a2c
--- /dev/null
+++ b/questions/how-can-you-prevent-clickjacking-attacks/en-US.langnostic.json
@@ -0,0 +1,68 @@
+{
+  "frontmatter": {
+    "title": "722ba670"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "cf69a850",
+        "fbbc8b6e",
+        "d2a4f12b",
+        "2a7816d0",
+        "6ad936a2",
+        "cbb8d7bb",
+        "307b535d",
+        "30f8fee0",
+        "5f9a4064",
+        "45b272a8",
+        "e76b9a8",
+        "fbbc8b6e",
+        "64a91812",
+        "17402b8",
+        "e76b9a8",
+        "d2a4f12b",
+        "7da0887f",
+        "e76b9a8",
+        "68d3a59d",
+        "d8c3445e",
+        "1538d6fc",
+        "e76b9a8",
+        "3d0b6f3",
+        "1f4770e5",
+        "a3e41a8a"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "cf69a850",
+        "fbbc8b6e",
+        "d2a4f12b",
+        "2a7816d0",
+        "6ad936a2",
+        "cbb8d7bb",
+        "307b535d",
+        "30f8fee0",
+        "5f9a4064",
+        "45b272a8",
+        "e76b9a8",
+        "fbbc8b6e",
+        "64a91812",
+        "17402b8",
+        "e76b9a8",
+        "d2a4f12b",
+        "7da0887f",
+        "e76b9a8",
+        "68d3a59d",
+        "d8c3445e",
+        "1538d6fc",
+        "e76b9a8",
+        "3d0b6f3",
+        "1f4770e5",
+        "a3e41a8a"
+      ]
+    }
+  }
+}
diff --git a/questions/how-can-you-prevent-clickjacking-attacks/zh-CN.mdx b/questions/how-can-you-prevent-clickjacking-attacks/zh-CN.mdx
new file mode 100644
index 0000000..f7fdeb8
--- /dev/null
+++ b/questions/how-can-you-prevent-clickjacking-attacks/zh-CN.mdx
@@ -0,0 +1,72 @@
+---
+title: 如何防止点击劫持攻击？
+---
+
+## TL;DR
+
+为了防止点击劫持攻击，您可以使用 `X-Frame-Options` HTTP 标头来控制您的网站是否可以嵌入在 iframe 中。将其设置为 `DENY` 以防止所有框架，或设置为 `SAMEORIGIN` 以仅允许来自同一来源的框架。此外，您可以使用带有 `frame-ancestors` 指令的 `Content-Security-Policy` (CSP) 标头来指定允许哪些来源来构建您的内容。
+
+```http
+X-Frame-Options: DENY
+```
+
+```http
+Content-Security-Policy: frame-ancestors 'self'
+```
+
+***
+
+## 什么是点击劫持？
+
+点击劫持是一种攻击，恶意网站会诱骗用户点击与用户感知不同的内容，从而可能导致未经授权的操作或信息泄露。这通常是通过将目标网站嵌入到不可见的 iframe 中并用欺骗性内容覆盖它来实现的。
+
+## 如何防止点击劫持攻击
+
+### 使用 `X-Frame-Options` 标头
+
+`X-Frame-Options` HTTP 标头可用于控制是否应允许浏览器在 `<frame>`、`<iframe>`、`<embed>` 或 `<object>` 中呈现页面。此标头有三个可能的值：
+
+* `DENY`：阻止页面在框架中显示，无论尝试这样做的站点是什么。
+* `SAMEORIGIN`：允许页面在与页面本身相同的来源的框架中显示。
+* `ALLOW-FROM uri`：仅允许页面在指定的来源的框架中显示。
+
+示例：
+
+```http
+X-Frame-Options: DENY
+```
+
+### 使用 `Content-Security-Policy` 标头
+
+`Content-Security-Policy` (CSP) 标头提供了一种更灵活、更现代的方法来防止点击劫持。`frame-ancestors` 指令指定可以使用 `<frame>`、`<iframe>`、`<object>`、`<embed>` 或 `<applet>` 标签嵌入页面的有效父级。
+
+示例：
+
+```http
+Content-Security-Policy: frame-ancestors 'self'
+```
+
+此指令还可以指定多个来源或使用通配符来处理更复杂的场景。
+
+示例：
+
+```http
+Content-Security-Policy: frame-ancestors 'self' https://trusted.com
+```
+
+### 结合使用这两个标头
+
+为了获得最大的兼容性和安全性，建议同时使用 `X-Frame-Options` 和 `Content-Security-Policy` 标头。
+
+示例：
+
+```http
+X-Frame-Options: SAMEORIGIN
+Content-Security-Policy: frame-ancestors 'self'
+```
+
+## 延伸阅读
+
+* [MDN Web 文档：X-Frame-Options](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-Frame-Options)
+* [MDN Web 文档：Content-Security-Policy](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP)
+* [OWASP：Clickjacking 防御备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html)
diff --git a/questions/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/en-US.langnostic.json b/questions/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/en-US.langnostic.json
new file mode 100644
index 0000000..66799f0
--- /dev/null
+++ b/questions/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/en-US.langnostic.json
@@ -0,0 +1,68 @@
+{
+  "frontmatter": {
+    "title": "cd166929"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "8eb0ebb",
+        "2a7816d0",
+        "5b3c7cb1",
+        "3dd28c0f",
+        "24dabda0",
+        "e499d2f3",
+        "baa16ae1",
+        "45e67a27",
+        "320b639b",
+        "c077b67",
+        "f88561af",
+        "49551b38",
+        "7078b0fa",
+        "2f4be55f",
+        "256510fd",
+        "8098cbe6",
+        "18ed1b70",
+        "94c5ba5a",
+        "823641ab",
+        "49199f7d",
+        "5bde760f",
+        "321cba78",
+        "e79014e7",
+        "1f4770e5",
+        "b94ece34"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "8eb0ebb",
+        "2a7816d0",
+        "5b3c7cb1",
+        "3dd28c0f",
+        "24dabda0",
+        "e499d2f3",
+        "baa16ae1",
+        "45e67a27",
+        "320b639b",
+        "c077b67",
+        "f88561af",
+        "49551b38",
+        "7078b0fa",
+        "2f4be55f",
+        "256510fd",
+        "8098cbe6",
+        "18ed1b70",
+        "94c5ba5a",
+        "823641ab",
+        "49199f7d",
+        "5bde760f",
+        "321cba78",
+        "e79014e7",
+        "1f4770e5",
+        "b94ece34"
+      ]
+    }
+  }
+}
diff --git a/questions/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/zh-CN.mdx b/questions/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/zh-CN.mdx
new file mode 100644
index 0000000..6912f7d
--- /dev/null
+++ b/questions/how-can-you-prevent-sql-injection-vulnerabilities-in-javascript-applications/zh-CN.mdx
@@ -0,0 +1,120 @@
+---
+title: 如何防止在 JavaScript 应用程序中发生 SQL 注入漏洞？
+---
+
+## TL;DR
+
+为了防止 JavaScript 应用程序中出现 SQL 注入漏洞，请始终使用参数化查询或预处理语句，而不是使用字符串连接来构造 SQL 查询。这可确保用户输入被视为数据而不是可执行代码。此外，使用处理 SQL 注入预防的 ORM 库，并始终验证和清理用户输入。
+
+***
+
+## 如何防止在 JavaScript 应用程序中发生 SQL 注入漏洞？
+
+### 使用参数化查询或预处理语句
+
+参数化查询或预处理语句可确保用户输入被视为数据而不是可执行代码。这是防止 SQL 注入的最有效方法。
+
+#### 使用 Node.js 和 `mysql` 库的示例：
+
+```js
+const mysql = require('mysql');
+const connection = mysql.createConnection({
+  host: 'localhost',
+  user: 'root',
+  password: 'password',
+  database: 'test',
+});
+
+const userId = 1;
+const query = 'SELECT * FROM users WHERE id = ?';
+
+connection.query(query, [userId], (error, results) => {
+  if (error) throw error;
+  console.log(results);
+});
+```
+
+### 使用 ORM 库
+
+对象关系映射 (ORM) 库（如 Sequelize、TypeORM 或 Mongoose (用于 MongoDB)）抽象了 SQL 查询，并在内部处理 SQL 注入预防。
+
+#### 使用 Sequelize 的示例：
+
+```js
+const { Sequelize, DataTypes } = require('sequelize');
+const sequelize = new Sequelize('database', 'username', 'password', {
+  host: 'localhost',
+  dialect: 'mysql',
+});
+
+const User = sequelize.define('User', {
+  username: {
+    type: DataTypes.STRING,
+    allowNull: false,
+  },
+});
+
+User.findAll({
+  where: {
+    id: 1,
+  },
+}).then((users) => {
+  console.log(users);
+});
+```
+
+### 验证和清理用户输入
+
+始终验证和清理用户输入，以确保它们符合预期格式，并且不包含恶意代码。
+
+#### 使用 `validator` 库的示例：
+
+```js
+const validator = require('validator');
+
+const userInput = 'someUserInput';
+if (validator.isAlphanumeric(userInput)) {
+  // Proceed with using the input
+} else {
+  // Handle invalid input
+}
+```
+
+### 使用存储过程
+
+存储过程是存储在数据库中的预编译 SQL 语句。它们可以通过将 SQL 逻辑与用户输入分开来帮助防止 SQL 注入。
+
+#### 示例：
+
+```sql
+CREATE PROCEDURE GetUserById(IN userId INT)
+BEGIN
+  SELECT * FROM users WHERE id = userId;
+END;
+```
+
+### 使用安全库和框架
+
+利用提供内置 SQL 注入保护的安全库和框架。
+
+#### 使用 Express.js 和 `express-validator` 的示例：
+
+```js
+const { body, validationResult } = require('express-validator');
+
+app.post(
+  '/user',
+  [body('username').isAlphanumeric(), body('email').isEmail()],
+  (req, res) => {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+    // Proceed with safe input
+  },
+);
+```
+
+## 延伸阅读
+
+* [Validator.js 文档](https://github.com/validatorjs/validator.js)
diff --git a/questions/how-can-you-share-code-between-files/en-US.langnostic.json b/questions/how-can-you-share-code-between-files/en-US.langnostic.json
new file mode 100644
index 0000000..fdf9763
--- /dev/null
+++ b/questions/how-can-you-share-code-between-files/en-US.langnostic.json
@@ -0,0 +1,80 @@
+{
+  "frontmatter": {
+    "title": "3597530c"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "f2fac493",
+        "e59129d",
+        "b2998e25",
+        "b809df68",
+        "2a7816d0",
+        "feff2220",
+        "545d6966",
+        "266557de",
+        "ef0b0578",
+        "f5228623",
+        "53463c08",
+        "f875e8b1",
+        "5aecda15",
+        "4c36d999",
+        "fd1a3ce2",
+        "6c88082e",
+        "2b757c50",
+        "3c1db723",
+        "545d6966",
+        "9227a6a9",
+        "b0e6b589",
+        "f5228623",
+        "a56088d4",
+        "9db06f93",
+        "290b81c3",
+        "ebc9910f",
+        "f26ce216",
+        "a18d7e96",
+        "4b235c5c",
+        "1f4770e5",
+        "559f3236"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "f2fac493",
+        "e59129d",
+        "b2998e25",
+        "b809df68",
+        "2a7816d0",
+        "feff2220",
+        "545d6966",
+        "266557de",
+        "ef0b0578",
+        "f5228623",
+        "53463c08",
+        "f875e8b1",
+        "5aecda15",
+        "4c36d999",
+        "fd1a3ce2",
+        "6c88082e",
+        "2b757c50",
+        "3c1db723",
+        "545d6966",
+        "9227a6a9",
+        "b0e6b589",
+        "f5228623",
+        "a56088d4",
+        "9db06f93",
+        "290b81c3",
+        "ebc9910f",
+        "f26ce216",
+        "a18d7e96",
+        "4b235c5c",
+        "1f4770e5",
+        "559f3236"
+      ]
+    }
+  }
+}
diff --git a/questions/how-can-you-share-code-between-files/zh-CN.mdx b/questions/how-can-you-share-code-between-files/zh-CN.mdx
index 709a6ff..bdfca5b 100644
--- a/questions/how-can-you-share-code-between-files/zh-CN.mdx
+++ b/questions/how-can-you-share-code-between-files/zh-CN.mdx
@@ -1,11 +1,133 @@
 ---
-title: 如何在文件之间共享代码？
+title: 如何在 JavaScript 文件之间共享代码？
 ---
 
-这取决于 JavaScript 环境。
+## TL;DR
 
-在客户端上(浏览器环境)，只要变量/函数在全局范围(`window`) 内声明，所有脚本都可以引用它们。 另一种办法是通过 RequireJS 采用异步模块定义（AMD）以获取更多模块化方法。
+要在 JavaScript 文件之间共享代码，您可以使用模块。在现代 JavaScript 中，您可以使用带有 `export` 和 `import` 语句的 ES6 模块。例如，您可以从一个文件导出一个函数并将其导入到另一个文件中：
 
-在服务器 (Node.js) 上，通用的方法是使用 CommonJS。 每个文件被当作模块处理，它可以将变量和函数导出到`module.exports`对象。
+```javascript
+// file1.js
+export function greet() {
+  console.log('Hello, world!');
+}
 
-ES2015 定义了一个模块语法，旨在替换 AMD 和 CommonJS。 这最终将在浏览器和 Nodejs 环境中得到支持。
+// file2.js
+import { greet } from './file1.js';
+greet();
+```
+
+或者，在 Node.js 中，您可以使用 `module.exports` 和 `require`：
+
+```javascript
+// file1.js
+module.exports = function greet() {
+  console.log('Hello, world!');
+};
+
+// file2.js
+const greet = require('./file1.js');
+greet();
+```
+
+***
+
+## 使用 ES6 模块
+
+### 导出代码
+
+要共享代码，您可以使用 `export` 关键字从模块中导出变量、函数或类：
+
+```javascript
+// utils.js
+export function add(a, b) {
+  return a + b;
+}
+
+export const PI = 3.14;
+```
+
+### 导入代码
+
+然后，您可以使用 `import` 关键字在另一个文件中导入导出的代码：
+
+```javascript
+// main.js
+import { add, PI } from './utils.js';
+
+console.log(add(2, 3)); // 5
+console.log(PI); // 3.14
+```
+
+### 默认导出
+
+您还可以从模块导出一个默认值：
+
+```javascript
+// math.js
+export default function subtract(a, b) {
+  return a - b;
+}
+```
+
+并在没有大括号的情况下导入它：
+
+```javascript
+// main.js
+import subtract from './math.js';
+
+console.log(subtract(5, 2)); // 3
+```
+
+## 在 Node.js 中使用 CommonJS 模块
+
+### 导出代码
+
+在 Node.js 中，您可以使用 `module.exports` 导出代码：
+
+```javascript
+// utils.js
+module.exports.add = function (a, b) {
+  return a + b;
+};
+
+module.exports.PI = 3.14;
+```
+
+### 导入代码
+
+然后，您可以使用 `require` 导入导出的代码：
+
+```javascript
+// main.js
+const utils = require('./utils.js');
+
+console.log(utils.add(2, 3)); // 5
+console.log(utils.PI); // 3.14
+```
+
+### 导出单个值
+
+您也可以导出一个值：
+
+```javascript
+// math.js
+module.exports = function subtract(a, b) {
+  return a - b;
+};
+```
+
+并直接导入它：
+
+```javascript
+// main.js
+const subtract = require('./math.js');
+
+console.log(subtract(5, 2)); // 3
+```
+
+## 延伸阅读
+
+* [MDN Web Docs on ES6 modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
+* [Node.js documentation on modules](https://nodejs.org/api/modules.html)
+* [JavaScript modules: A beginner’s guide](https://www.freecodecamp.org/news/javascript-modules-a-beginner-s-guide-783f7d7a5fcc/)
diff --git a/questions/how-can-you-test-asynchronous-code-in-javascript/en-US.langnostic.json b/questions/how-can-you-test-asynchronous-code-in-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..708efe1
--- /dev/null
+++ b/questions/how-can-you-test-asynchronous-code-in-javascript/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "b7bb2a0c"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "cd53e4b8",
+        "790018e9",
+        "e3eaa85f",
+        "2a7816d0",
+        "153eb297",
+        "dce035e",
+        "34739f00",
+        "65822960",
+        "e7e6225c",
+        "2d3c5a3",
+        "4f6965d0",
+        "70e03492",
+        "e7e6225c",
+        "7f92b418",
+        "dcdb5674",
+        "dcc27677",
+        "e7e6225c",
+        "b6a5d2ff",
+        "65c7f3a1",
+        "ac281718",
+        "143d526c",
+        "1f4770e5",
+        "d88832a5"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "cd53e4b8",
+        "790018e9",
+        "e3eaa85f",
+        "2a7816d0",
+        "153eb297",
+        "dce035e",
+        "34739f00",
+        "65822960",
+        "e7e6225c",
+        "2d3c5a3",
+        "4f6965d0",
+        "70e03492",
+        "e7e6225c",
+        "7f92b418",
+        "dcdb5674",
+        "dcc27677",
+        "e7e6225c",
+        "b6a5d2ff",
+        "65c7f3a1",
+        "ac281718",
+        "143d526c",
+        "1f4770e5",
+        "d88832a5"
+      ]
+    }
+  }
+}
diff --git a/questions/how-can-you-test-asynchronous-code-in-javascript/zh-CN.mdx b/questions/how-can-you-test-asynchronous-code-in-javascript/zh-CN.mdx
new file mode 100644
index 0000000..3c8277e
--- /dev/null
+++ b/questions/how-can-you-test-asynchronous-code-in-javascript/zh-CN.mdx
@@ -0,0 +1,125 @@
+---
+title: 如何在 JavaScript 中测试异步代码？
+---
+
+## TL;DR
+
+要在 JavaScript 中测试异步代码，你可以使用 Jest 或 Mocha 等测试框架。这些框架提供了对处理异步操作的内置支持。你可以在测试函数中使用 `async`/`await` 或返回 promise。例如，在 Jest 中，你可以编写：
+
+```js
+test('fetches data successfully', async () => {
+  const data = await fetchData();
+  expect(data).toBeDefined();
+});
+```
+
+或者，你可以使用回调函数和 `done` 函数来指示异步测试的结束。
+
+***
+
+## 如何在 JavaScript 中测试异步代码？
+
+在 JavaScript 中测试异步代码可能具有挑战性，但像 Jest 和 Mocha 这样的现代测试框架为处理异步操作提供了强大的支持。以下是测试异步代码的一些常用方法：
+
+### 使用 `async`/`await`
+
+测试异步代码最直接的方法之一是使用 `async`/`await`。这种方法使你的测试代码看起来是同步的，这更容易阅读和编写。
+
+#### Jest 示例
+
+```js
+// fetchData.js
+export const fetchData = async () => {
+  const response = await fetch('https://api.example.com/data');
+  return response.json();
+};
+
+// fetchData.test.js
+import { fetchData } from './fetchData';
+
+test('fetches data successfully', async () => {
+  const data = await fetchData();
+  expect(data).toBeDefined();
+});
+```
+
+### 返回一个 promise
+
+处理异步测试的另一种方法是从你的测试函数中返回一个 promise。Jest 和 Mocha 将等待 promise 在完成测试之前被解析。
+
+#### Jest 示例
+
+```js
+// fetchData.js
+export const fetchData = () => {
+  return fetch('https://api.example.com/data').then((response) =>
+    response.json(),
+  );
+};
+
+// fetchData.test.js
+import { fetchData } from './fetchData';
+
+test('fetches data successfully', () => {
+  return fetchData().then((data) => {
+    expect(data).toBeDefined();
+  });
+});
+```
+
+### 使用回调函数
+
+对于旧的代码库或特定场景，你可能需要使用回调函数。在 Jest 中，你可以使用 `done` 函数来指示异步测试的结束。
+
+#### Jest 示例
+
+```js
+// fetchData.js
+export const fetchData = (callback) => {
+  fetch('https://api.example.com/data')
+    .then((response) => response.json())
+    .then((data) => callback(null, data))
+    .catch((error) => callback(error));
+};
+
+// fetchData.test.js
+import { fetchData } from './fetchData';
+
+test('fetches data successfully', (done) => {
+  fetchData((error, data) => {
+    expect(error).toBeNull();
+    expect(data).toBeDefined();
+    done();
+  });
+});
+```
+
+### 使用 Mocha
+
+Mocha 也支持 `async`/`await`、返回 promise 和使用回调函数。这是一个使用 `async`/`await` 和 Mocha 的示例：
+
+```js
+// fetchData.js
+export const fetchData = async () => {
+  const response = await fetch('https://api.example.com/data');
+  return response.json();
+};
+
+// fetchData.test.js
+import { fetchData } from './fetchData';
+import { expect } from 'chai';
+
+describe('fetchData', () => {
+  it('fetches data successfully', async () => {
+    const data = await fetchData();
+    expect(data).to.be.an('object');
+  });
+});
+```
+
+## 延伸阅读
+
+* [Jest 关于测试异步代码的文档](https://jestjs.io/docs/asynchronous)
+* [Mocha 关于测试异步代码的文档](https://mochajs.org/#asynchronous-code)
+* [MDN Web Docs 关于 async/await](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await)
+* [Chai 断言库](https://www.chaijs.com/)
diff --git a/questions/how-do-currying-and-partial-application-differ-from-each-other/en-US.langnostic.json b/questions/how-do-currying-and-partial-application-differ-from-each-other/en-US.langnostic.json
new file mode 100644
index 0000000..0270437
--- /dev/null
+++ b/questions/how-do-currying-and-partial-application-differ-from-each-other/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "d34df27e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "9fcd7e6e",
+        "2a7816d0",
+        "754f201a",
+        "1743fc64",
+        "dd75fb51",
+        "748ffe75",
+        "7b81a9eb",
+        "36d7fec4",
+        "5fd903ca",
+        "7caa40d3",
+        "748ffe75",
+        "ae4b5eab",
+        "bece61d8",
+        "67423e0a",
+        "7f8361a1",
+        "1f4770e5",
+        "367db191"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "9fcd7e6e",
+        "2a7816d0",
+        "754f201a",
+        "1743fc64",
+        "dd75fb51",
+        "748ffe75",
+        "7b81a9eb",
+        "36d7fec4",
+        "5fd903ca",
+        "7caa40d3",
+        "748ffe75",
+        "ae4b5eab",
+        "bece61d8",
+        "67423e0a",
+        "7f8361a1",
+        "1f4770e5",
+        "367db191"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-currying-and-partial-application-differ-from-each-other/zh-CN.mdx b/questions/how-do-currying-and-partial-application-differ-from-each-other/zh-CN.mdx
new file mode 100644
index 0000000..1f73464
--- /dev/null
+++ b/questions/how-do-currying-and-partial-application-differ-from-each-other/zh-CN.mdx
@@ -0,0 +1,61 @@
+---
+title: Currying 和部分应用之间有什么区别？
+---
+
+## 总结
+
+Currying 将具有多个参数的函数转换为一系列函数，每个函数只接受一个参数。例如，函数 `f(a, b, c)` 变为 `f(a)(b)(c)`。另一方面，部分应用会固定函数的几个参数，并生成另一个具有较少参数的函数。例如，如果使用 `a` 部分应用 `f(a, b, c)`，则会得到一个新函数 `f'(b, c)`。
+
+***
+
+## Currying vs 部分应用
+
+### Currying
+
+Currying 是一种将具有多个参数的函数转换为一系列函数的技术，每个函数只接受一个参数。这允许更灵活的函数组合和重用。
+
+#### 示例
+
+```js live
+function add(a) {
+  return function (b) {
+    return function (c) {
+      return a + b + c;
+    };
+  };
+}
+
+const result = add(1)(2)(3);
+console.log(result); // 6
+```
+
+在此示例中，`add` 是一个 curried 函数，它一次接受三个参数。
+
+### 部分应用
+
+部分应用是一种技术，您可以在其中固定函数的几个参数，从而生成另一个具有较少参数的函数。这对于从更通用的函数创建专门的函数很有用。
+
+#### 示例
+
+```js live
+function add(a, b, c) {
+  return a + b + c;
+}
+
+const addOne = add.bind(null, 1);
+const result = addOne(2, 3);
+console.log(result); // 6
+```
+
+在此示例中，`addOne` 是一个部分应用的函数，它将 `add` 的第一个参数固定为 `1`。
+
+### 主要区别
+
+* **Currying**：将具有多个参数的函数转换为一系列函数，每个函数只接受一个参数。
+* **部分应用**：固定函数的几个参数，并生成另一个具有较少参数的函数。
+
+## 延伸阅读
+
+* [MDN 上的 Currying](https://developer.mozilla.org/en-US/docs/Glossary/Currying)
+* [MDN 上的部分应用](https://developer.mozilla.org/en-US/docs/Glossary/Partial_application)
+* [JavaScript.info 关于 currying 和部分应用](https://javascript.info/currying-partials)
diff --git a/questions/how-do-iframe-on-a-page-communicate/en-US.langnostic.json b/questions/how-do-iframe-on-a-page-communicate/en-US.langnostic.json
new file mode 100644
index 0000000..fcf8e4a
--- /dev/null
+++ b/questions/how-do-iframe-on-a-page-communicate/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "4a79cb57"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "dc2f9c05",
+        "92a8f974",
+        "2a7816d0",
+        "69dc5012",
+        "d33a947e",
+        "5d100c93",
+        "e19e2160",
+        "a0d55074",
+        "3640ac51",
+        "ad9dff34",
+        "efcde362",
+        "3f4891b9",
+        "14b35049",
+        "cdbc8b7a",
+        "2a6b0356",
+        "ff7a01b",
+        "ee90fa1d",
+        "abc48e8e",
+        "c72464d1",
+        "3c1797a7",
+        "a0ec2f20",
+        "1f4770e5",
+        "367a32f6"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "dc2f9c05",
+        "92a8f974",
+        "2a7816d0",
+        "69dc5012",
+        "d33a947e",
+        "5d100c93",
+        "e19e2160",
+        "a0d55074",
+        "3640ac51",
+        "ad9dff34",
+        "efcde362",
+        "3f4891b9",
+        "14b35049",
+        "cdbc8b7a",
+        "2a6b0356",
+        "ff7a01b",
+        "ee90fa1d",
+        "abc48e8e",
+        "c72464d1",
+        "3c1797a7",
+        "a0ec2f20",
+        "1f4770e5",
+        "367a32f6"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-iframe-on-a-page-communicate/zh-CN.mdx b/questions/how-do-iframe-on-a-page-communicate/zh-CN.mdx
new file mode 100644
index 0000000..3e23c23
--- /dev/null
+++ b/questions/how-do-iframe-on-a-page-communicate/zh-CN.mdx
@@ -0,0 +1,84 @@
+---
+title: 页面上的 `<iframe>` 如何通信？
+---
+
+## 总结
+
+页面上的 `<iframe>` 元素可以使用 `postMessage` API 进行通信。这允许父页面和 iframe 之间进行安全的跨源通信。`postMessage` 方法发送消息，而 `message` 事件侦听器接收消息。这是一个简单的例子：
+
+```js
+// 在父页面中
+const iframe = document.querySelector('iframe');
+iframe.contentWindow.postMessage('Hello from parent', '*');
+
+// 在 iframe 中
+window.addEventListener('message', (event) => {
+  console.log(event.data); // 'Hello from parent'
+});
+```
+
+***
+
+## 页面上的 `<iframe>` 如何通信？
+
+### 使用 `postMessage` API
+
+`postMessage` API 是 iframe 相互之间或与其父页面通信的最常见和最安全的方式。此方法允许跨源通信，这对于现代 Web 应用程序至关重要。
+
+#### 发送消息
+
+要将消息从父页面发送到 iframe，您可以使用 `postMessage` 方法。这是一个例子：
+
+```js
+// 在父页面中
+const iframe = document.querySelector('iframe');
+iframe.contentWindow.postMessage('Hello from parent', '*');
+```
+
+在此示例中，父页面选择 iframe 并向其发送消息。第二个参数 `'*'` 是目标 origin。它指定目标窗口的 origin。使用 `'*'` 意味着任何 origin 都可以接收消息，但出于安全原因，最好指定确切的 origin。
+
+#### 接收消息
+
+要在 iframe 中接收消息，您需要为 `message` 事件添加一个事件侦听器：
+
+```js
+// 在 iframe 中
+window.addEventListener('message', (event) => {
+  console.log(event.data); // 'Hello from parent'
+});
+```
+
+`event` 对象包含 `data` 属性，该属性保存父页面发送的消息。
+
+### 安全注意事项
+
+使用 `postMessage` 时，考虑安全性至关重要：
+
+* **指定目标 origin**：不要使用 `'*'`，而是指定确切的 origin，以确保仅接收来自受信任来源的消息。
+* **验证消息**：始终验证消息内容，以防止处理恶意数据。
+
+### 带有目标 origin 的示例
+
+这是一个带有指定目标来源的示例：
+
+```js
+// In the parent page
+const iframe = document.querySelector('iframe');
+const targetOrigin = 'https://example.com';
+iframe.contentWindow.postMessage('Hello from parent', targetOrigin);
+
+// In the iframe
+window.addEventListener('message', (event) => {
+  if (event.origin === 'https://parent.com') {
+    console.log(event.data); // 'Hello from parent'
+  }
+});
+```
+
+在此示例中，父页面仅向 `https://example.com` 发送消息，并且 iframe 仅在消息来自 `https://parent.com` 时才处理该消息。
+
+## 延伸阅读
+
+* [MDN Web Docs: Window.postMessage()](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
+* [HTML Living Standard: postMessage](https://html.spec.whatwg.org/multipage/web-messaging.html#dom-window-postmessage)
+* [跨文档消息传递](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#cross-document_messaging)
diff --git a/questions/how-do-sets-and-maps-handle-equality-checks-for-objects/en-US.langnostic.json b/questions/how-do-sets-and-maps-handle-equality-checks-for-objects/en-US.langnostic.json
new file mode 100644
index 0000000..597e9c1
--- /dev/null
+++ b/questions/how-do-sets-and-maps-handle-equality-checks-for-objects/en-US.langnostic.json
@@ -0,0 +1,54 @@
+{
+  "frontmatter": {
+    "title": "eddc3137"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "b257cf1e",
+        "f5f518ad",
+        "2a7816d0",
+        "cdcc63f7",
+        "e27a0718",
+        "8da9bd5c",
+        "111a2a57",
+        "4848954f",
+        "f5f518ad",
+        "ce98107a",
+        "eb78f3",
+        "b886a8a6",
+        "a00f9384",
+        "dec76046",
+        "84c38fac",
+        "d91450c7",
+        "1f4770e5",
+        "208f7528"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "b257cf1e",
+        "f5f518ad",
+        "2a7816d0",
+        "cdcc63f7",
+        "e27a0718",
+        "8da9bd5c",
+        "111a2a57",
+        "4848954f",
+        "f5f518ad",
+        "ce98107a",
+        "eb78f3",
+        "b886a8a6",
+        "a00f9384",
+        "dec76046",
+        "84c38fac",
+        "d91450c7",
+        "1f4770e5",
+        "208f7528"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-sets-and-maps-handle-equality-checks-for-objects/zh-CN.mdx b/questions/how-do-sets-and-maps-handle-equality-checks-for-objects/zh-CN.mdx
new file mode 100644
index 0000000..a743bb1
--- /dev/null
+++ b/questions/how-do-sets-and-maps-handle-equality-checks-for-objects/zh-CN.mdx
@@ -0,0 +1,73 @@
+---
+title: Set 和 Map 如何处理对象的相等性检查？
+---
+
+## TL;DR
+
+JavaScript 中的 `Set` 和 `Map` 根据引用相等性（而不是深度相等性）处理对象的相等性检查。这意味着只有当两个对象引用相同的内存位置时，才认为它们相等。例如，如果将两个具有相同属性的不同对象字面量添加到 `Set` 中，它们将被视为不同的条目。
+
+```js live
+const set = new Set();
+const obj1 = { a: 1 };
+const obj2 = { a: 1 };
+
+set.add(obj1);
+set.add(obj2);
+
+console.log(set.size); // Output: 2
+```
+
+***
+
+## Set 和 Map 如何处理对象的相等性检查？
+
+### 引用相等性
+
+在 JavaScript 中，`Set` 和 `Map` 使用引用相等性来确定两个对象是否相同。这意味着只有当两个对象引用相同的内存位置时，才认为它们相等。
+
+### Set 示例
+
+当您将对象添加到 `Set` 时，`Set` 仅在它们是相同的对象引用时才认为它们相等。
+
+```js live
+const set = new Set();
+const obj1 = { a: 1 };
+const obj2 = { a: 1 };
+
+set.add(obj1);
+set.add(obj2);
+
+console.log(set.size); // Output: 2
+```
+
+在此示例中，`obj1` 和 `obj2` 具有相同的属性，但它们是不同的对象引用。因此，`Set` 将它们视为不同的条目。
+
+### Map 示例
+
+同样，当您将对象用作 `Map` 中的键时，`Map` 仅在它们是相同的对象引用时才认为它们相等。
+
+```js live
+const map = new Map();
+const obj1 = { a: 1 };
+const obj2 = { a: 1 };
+
+map.set(obj1, 'value1');
+map.set(obj2, 'value2');
+
+console.log(map.size); // Output: 2
+console.log(map.get(obj1)); // Output: 'value1'
+console.log(map.get(obj2)); // Output: 'value2'
+```
+
+在此示例中，`obj1` 和 `obj2` 是不同的对象引用，因此 `Map` 将它们视为不同的键。
+
+### 实际应用
+
+* 如果您需要检查深度相等性（即，具有相同属性和值的对象），则需要实现自己的比较逻辑或使用 Lodash 等库。
+* 在使用 `Set` 和 `Map` 时，请注意对象引用，尤其是在处理复杂数据结构时。
+
+## 延伸阅读
+
+* [MDN Web Docs: Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
+* [MDN Web Docs: Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
+* [Lodash: isEqual](https://lodash.com/docs/4.17.15#isEqual)
diff --git a/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.langnostic.json b/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.langnostic.json
new file mode 100644
index 0000000..a512b05
--- /dev/null
+++ b/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.langnostic.json
@@ -0,0 +1,72 @@
+{
+  "frontmatter": {
+    "title": "dc91ed05"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "bae7c876",
+        "e3798fa6",
+        "716bc398",
+        "df6c34a8",
+        "2a7816d0",
+        "bd08585c",
+        "17cfdb32",
+        "2dfd7d87",
+        "44adb60f",
+        "aca4a61c",
+        "943a40e8",
+        "e3798fa6",
+        "c81ac723",
+        "13d3181c",
+        "b3bf8350",
+        "82501121",
+        "d4a227e6",
+        "7e967733",
+        "537d5a74",
+        "25e5ba0a",
+        "f878d5b2",
+        "d9c2bda4",
+        "b35115b8",
+        "add698fb",
+        "31ad0416",
+        "1f4770e5",
+        "7787358c"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "bae7c876",
+        "e3798fa6",
+        "716bc398",
+        "df6c34a8",
+        "2a7816d0",
+        "bd08585c",
+        "17cfdb32",
+        "2dfd7d87",
+        "44adb60f",
+        "aca4a61c",
+        "943a40e8",
+        "e3798fa6",
+        "c81ac723",
+        "13d3181c",
+        "b3bf8350",
+        "82501121",
+        "d4a227e6",
+        "7e967733",
+        "537d5a74",
+        "25e5ba0a",
+        "f878d5b2",
+        "d9c2bda4",
+        "b35115b8",
+        "add698fb",
+        "31ad0416",
+        "1f4770e5",
+        "7787358c"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-abort-a-web-request-using-abortcontrollers/zh-CN.mdx b/questions/how-do-you-abort-a-web-request-using-abortcontrollers/zh-CN.mdx
new file mode 100644
index 0000000..bfd581f
--- /dev/null
+++ b/questions/how-do-you-abort-a-web-request-using-abortcontrollers/zh-CN.mdx
@@ -0,0 +1,162 @@
+---
+title: 如何在 JavaScript 中使用 `AbortController` 终止 Web 请求？
+---
+
+## TL;DR
+
+`AbortController` 用于取消进行中的异步操作，例如 fetch 请求。
+
+```js live
+const controller = new AbortController();
+const signal = controller.signal;
+
+fetch('https://jsonplaceholder.typicode.com/todos/1', { signal })
+  .then((response) => {
+    // Handle response
+  })
+  .catch((error) => {
+    if (error.name === 'AbortError') {
+      console.log('Request aborted');
+    } else {
+      console.error('Error:', error);
+    }
+  });
+
+// Call abort() to abort the request
+controller.abort();
+```
+
+终止 Web 请求对于以下情况很有用：
+
+* 根据用户操作取消请求。
+* 在有多个并发请求的情况下，优先处理最新的请求。
+* 取消不再需要的请求，例如，在用户已从页面导航离开之后。
+
+***
+
+## `AbortController`s
+
+`AbortController` 允许优雅地取消进行中的异步操作，例如 fetch 请求。 它提供了一种机制，向底层网络层发出信号，表明不再需要该请求，从而防止不必要的资源消耗并改善用户体验。
+
+## 使用 `AbortController`s
+
+使用 `AbortController` 涉及以下步骤：
+
+1. **创建 `AbortController` 实例**：初始化一个 `AbortController` 实例，它会创建一个可用于中止请求的信号。
+2. **将信号传递给请求**：将信号传递给请求，通常通过请求选项中的 `signal` 属性。
+3. **中止请求**：在 `AbortController` 实例上调用 `abort()` 方法以取消正在进行的请求。
+
+以下是如何将 `AbortController` 与 `fetch()` API 结合使用的示例：
+
+```js live
+const controller = new AbortController();
+const signal = controller.signal;
+
+fetch('https://jsonplaceholder.typicode.com/todos/1', { signal })
+  .then((response) => {
+    // Handle response
+  })
+  .catch((error) => {
+    if (error.name === 'AbortError') {
+      console.log('Request aborted');
+    } else {
+      console.error('Error:', error);
+    }
+  });
+
+// Call abort() to abort the request
+controller.abort();
+```
+
+## 用例
+
+### 在用户操作时取消 `fetch()` 请求
+
+取消由于用户交互（例如，用户取消上传一个大文件）而导致耗时过长或不再相关的请求。
+
+```js live
+// HTML: <button id='cancel-button'>Cancel upload</button>
+const btn = document.createElement('button');
+btn.id = 'cancel-button';
+btn.innerHTML = 'Cancel upload';
+document.body.appendChild(btn);
+
+const controller = new AbortController();
+const signal = controller.signal;
+
+fetch('https://jsonplaceholder.typicode.com/todos/1', { signal })
+  .then((response) => {
+    // Handle successful response
+  })
+  .catch((error) => {
+    if (error.name === 'AbortError') {
+      console.log('Request canceled');
+    } else {
+      console.error('Network or other error:', error);
+    }
+  });
+
+document.getElementById('cancel-button').addEventListener('click', () => {
+  controller.abort();
+});
+document.getElementById('cancel-button').click(); // Simulate clicking the cancel button
+```
+
+当您单击“取消上传”按钮时，正在进行的请求将被中止。
+
+### 在竞争条件下优先处理最新请求
+
+在为相同数据启动多个请求的情况下，使用 `AbortController` 优先处理最新请求并中止较早的请求。
+
+```js live
+let latestController = null; // Keeps track of the latest controller
+
+function fetchData(url) {
+  if (latestController) {
+    latestController.abort(); // Abort any previous request
+  }
+
+  const controller = new AbortController();
+  latestController = controller;
+  const signal = controller.signal;
+
+  fetch(url, { signal })
+    .then((response) => response.json())
+    .then((data) => console.log('Fetched data:', data))
+    .catch((error) => {
+      if (error.name === 'AbortError') {
+        console.log('Request canceled');
+      } else {
+        console.error('Network or other error:', error);
+      }
+    });
+}
+
+fetchData('https://jsonplaceholder.typicode.com/posts/1');
+
+// Simulate race conditions with new requests that quickly cancel the previous one
+setTimeout(() => {
+  fetchData('https://jsonplaceholder.typicode.com/posts/2');
+}, 5);
+setTimeout(() => {
+  fetchData('https://jsonplaceholder.typicode.com/posts/3');
+}, 5);
+// Only the last request should (posts/3) will be allowed to complete
+```
+
+在本例中，当多次调用 `fetchData()` 函数触发多个 fetch 请求时，`AbortController` 将取消所有之前的请求，除了最新的请求。这在诸如类型提示搜索或无限滚动等场景中很常见，在这些场景中，会频繁触发新的请求。
+
+### 取消不再需要的请求
+
+在用户已从页面导航出去的情况下，中止请求可以防止不必要的操作（例如，成功回调处理），并通过降低内存泄漏的可能性来释放资源。
+
+## 笔记
+
+* `AbortController` 并非 `fetch()` 专有，它也可以用于中止其他异步任务。
+* 一个单独的 `AbortContoller` 实例可以被重用或用于多个异步任务，并一次性取消所有任务。
+* 在 `AbortController` 上调用 `abort()` 不会向服务器发送任何通知或信号。服务器不知道取消操作，并将继续处理请求，直到它完成或超时。
+
+## 延伸阅读
+
+* [AbortController | MDN](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)
+* [Fetch: Abort | Javascript.info](https://javascript.info/fetch-abort)
diff --git a/questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/en-US.langnostic.json b/questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/en-US.langnostic.json
new file mode 100644
index 0000000..50194c7
--- /dev/null
+++ b/questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "944c644b"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "38163a0a",
+        "8def32e0",
+        "2a7816d0",
+        "8afe408d",
+        "57150fe8",
+        "8def32e0",
+        "c151373a",
+        "2608344a",
+        "1c30eb9b",
+        "3188acbe",
+        "105a896f",
+        "47f129",
+        "1f77a2b8",
+        "cc46a982",
+        "1f8d0cd7",
+        "1f4770e5",
+        "d40021a0"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "38163a0a",
+        "8def32e0",
+        "2a7816d0",
+        "8afe408d",
+        "57150fe8",
+        "8def32e0",
+        "c151373a",
+        "2608344a",
+        "1c30eb9b",
+        "3188acbe",
+        "105a896f",
+        "47f129",
+        "1f77a2b8",
+        "cc46a982",
+        "1f8d0cd7",
+        "1f4770e5",
+        "d40021a0"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/zh-CN.mdx b/questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/zh-CN.mdx
new file mode 100644
index 0000000..11be1d4
--- /dev/null
+++ b/questions/how-do-you-access-the-index-of-an-element-in-an-array-during-iteration/zh-CN.mdx
@@ -0,0 +1,67 @@
+---
+title: 如何在迭代过程中访问数组中元素的索引？
+---
+
+## TL;DR
+
+要在迭代过程中访问数组中元素的索引，可以使用 `forEach`、`map`、`for...of` 与 `entries` 或传统的 `for` 循环等方法。例如，使用 `forEach`：
+
+```js live
+const array = ['a', 'b', 'c'];
+array.forEach((element, index) => {
+  console.log(index, element);
+});
+```
+
+***
+
+## 使用 `forEach`
+
+`forEach` 方法为数组的每个元素执行一次提供的函数。回调函数接受三个参数：当前元素、当前元素的索引和数组本身。
+
+```js live
+const array = ['a', 'b', 'c'];
+array.forEach((element, index) => {
+  console.log(index, element);
+});
+```
+
+### 使用 `map`
+
+`map` 方法创建一个新数组，其中填充了在调用数组的每个元素上调用提供的函数的结果。回调函数也接受三个参数：当前元素、当前元素的索引和数组本身。
+
+```js live
+const array = ['a', 'b', 'c'];
+array.map((element, index) => {
+  console.log(index, element);
+});
+```
+
+### 使用 `for...of` 与 `entries`
+
+`for...of` 循环可以与 `entries` 方法结合使用，以访问索引和元素。
+
+```js live
+const array = ['a', 'b', 'c'];
+for (const [index, element] of array.entries()) {
+  console.log(index, element);
+}
+```
+
+### 使用传统的 `for` 循环
+
+传统的 `for` 循环使您可以直接访问索引。
+
+```js live
+const array = ['a', 'b', 'c'];
+for (let index = 0; index < array.length; index++) {
+  console.log(index, array[index]);
+}
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Array.prototype.forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
+* [MDN Web Docs: Array.prototype.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
+* [MDN Web Docs: for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
+* [MDN Web Docs: Array.prototype.entries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries)
diff --git a/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.langnostic.json b/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..2acff0b
--- /dev/null
+++ b/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/en-US.langnostic.json
@@ -0,0 +1,60 @@
+{
+  "frontmatter": {
+    "title": "52206d51"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "ad01cafc",
+        "bd1a01ac",
+        "2a7816d0",
+        "2e6c2400",
+        "9d1c0301",
+        "842a85a9",
+        "598de6f9",
+        "9acc7143",
+        "961a5ab5",
+        "1b907146",
+        "f08c59c3",
+        "cd8c19b3",
+        "bc5b741e",
+        "d1c61dce",
+        "19d5c9fb",
+        "b99f6bdf",
+        "4187d33b",
+        "bf476af9",
+        "4550576a",
+        "1f4770e5",
+        "ddc93d9c"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "ad01cafc",
+        "bd1a01ac",
+        "2a7816d0",
+        "2e6c2400",
+        "9d1c0301",
+        "842a85a9",
+        "598de6f9",
+        "9acc7143",
+        "961a5ab5",
+        "1b907146",
+        "f08c59c3",
+        "cd8c19b3",
+        "bc5b741e",
+        "d1c61dce",
+        "19d5c9fb",
+        "b99f6bdf",
+        "4187d33b",
+        "bf476af9",
+        "4550576a",
+        "1f4770e5",
+        "ddc93d9c"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/zh-CN.mdx b/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/zh-CN.mdx
new file mode 100644
index 0000000..04597e2
--- /dev/null
+++ b/questions/how-do-you-add-remove-and-modify-html-elements-using-javascript/zh-CN.mdx
@@ -0,0 +1,116 @@
+---
+title: 如何使用 JavaScript 添加、删除和修改 HTML 元素？
+---
+
+## TL;DR
+
+要使用 JavaScript 添加、删除和修改 HTML 元素，可以使用 `createElement`、`appendChild`、`removeChild` 等方法以及 `innerHTML` 和 `textContent` 等属性。例如，要添加一个元素，可以使用 `document.createElement` 创建它，然后使用 `appendChild` 将其附加到父元素。要删除一个元素，可以在其父元素上使用 `removeChild`。要修改一个元素，可以更改其 `innerHTML` 或 `textContent`。
+
+```js
+// Adding an element
+const newElement = document.createElement('div');
+newElement.textContent = 'Hello, World!';
+document.body.appendChild(newElement);
+
+// Removing an element
+const elementToRemove = document.getElementById('elementId');
+elementToRemove.parentNode.removeChild(elementToRemove);
+
+// Modifying an element
+const elementToModify = document.getElementById('elementId');
+elementToModify.innerHTML = 'New Content';
+```
+
+***
+
+## 使用 JavaScript 添加、删除和修改 HTML 元素
+
+### 添加元素
+
+要添加 HTML 元素，可以使用 `document.createElement` 方法创建一个新元素，然后使用 `appendChild` 将其附加到父元素。
+
+```js live
+// Create a new div element
+const newDiv = document.createElement('div');
+
+// Set its content
+newDiv.textContent = 'Hello, World!';
+
+// Append the new element to the body
+document.body.appendChild(newDiv);
+
+// See the changed document by running the code
+console.log(document.body);
+```
+
+您还可以使用 `insertBefore` 在现有子元素之前插入新元素。
+
+```js
+const parentElement = document.getElementById('parent');
+const newElement = document.createElement('p');
+newElement.textContent = 'Inserted Paragraph';
+const referenceElement = document.getElementById('reference');
+parentElement.insertBefore(newElement, referenceElement);
+```
+
+### 删除元素
+
+要删除 HTML 元素，可以在其父元素上使用 `removeChild` 方法。
+
+```js
+// Select the element to be removed
+const elementToRemove = document.getElementById('elementId');
+
+// Remove the element
+elementToRemove.parentNode.removeChild(elementToRemove);
+```
+
+或者，您可以在该元素上直接使用 `remove` 方法。
+
+```js
+const elementToRemove = document.getElementById('elementId');
+elementToRemove.remove();
+```
+
+### 修改元素
+
+要修改 HTML 元素，您可以更改其属性，例如 `innerHTML`、`textContent` 或属性。
+
+```js live
+const elementToModify = document.createElement('div');
+
+// Change its inner HTML
+elementToModify.innerHTML = 'New Content';
+
+// Change its text content
+elementToModify.textContent = 'New Text Content';
+
+// Change an attribute
+elementToModify.setAttribute('class', 'new-class');
+
+console.log(elementToModify);
+```
+
+您还可以使用 `classList.add`、`classList.remove` 和 `classList.toggle` 等方法来修改元素的类。
+
+```js
+const element = document.getElementById('elementId');
+
+// Add a class
+element.classList.add('new-class');
+
+// Remove a class
+element.classList.remove('old-class');
+
+// Toggle a class
+element.classList.toggle('active');
+```
+
+## 延伸阅读
+
+* [MDN Web 文档：Document.createElement](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement)
+* [MDN Web 文档：Node.appendChild](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild)
+* [MDN Web 文档：Node.removeChild](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/removeChild)
+* [MDN Web 文档：Element.innerHTML](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML)
+* [MDN Web 文档：Element.textContent](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent)
+* [MDN Web 文档：Element.classList](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList)
diff --git a/questions/how-do-you-add-remove-and-update-elements-in-an-array/en-US.langnostic.json b/questions/how-do-you-add-remove-and-update-elements-in-an-array/en-US.langnostic.json
new file mode 100644
index 0000000..d218acf
--- /dev/null
+++ b/questions/how-do-you-add-remove-and-update-elements-in-an-array/en-US.langnostic.json
@@ -0,0 +1,78 @@
+{
+  "frontmatter": {
+    "title": "f867d152"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "9c6cbc97",
+        "8c530221",
+        "77dbca1e",
+        "2a7816d0",
+        "42d739cd",
+        "d5d1d144",
+        "6a6e4bfc",
+        "29f48398",
+        "aa93d480",
+        "2d0b0765",
+        "10399246",
+        "15cbfb04",
+        "6c294d6",
+        "d01b2fce",
+        "6b5d1be4",
+        "d86b8d40",
+        "e44621ec",
+        "8a608c4e",
+        "8c47e77c",
+        "a9d80323",
+        "5f1b58e6",
+        "15cbfb04",
+        "80fa7e69",
+        "a1d66e98",
+        "5195f94c",
+        "1dfcd69f",
+        "da06c2a0",
+        "132fa112",
+        "1f4770e5",
+        "76e7d675"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "9c6cbc97",
+        "8c530221",
+        "77dbca1e",
+        "2a7816d0",
+        "42d739cd",
+        "d5d1d144",
+        "6a6e4bfc",
+        "29f48398",
+        "aa93d480",
+        "2d0b0765",
+        "10399246",
+        "15cbfb04",
+        "6c294d6",
+        "d01b2fce",
+        "6b5d1be4",
+        "d86b8d40",
+        "e44621ec",
+        "8a608c4e",
+        "8c47e77c",
+        "a9d80323",
+        "5f1b58e6",
+        "15cbfb04",
+        "80fa7e69",
+        "a1d66e98",
+        "5195f94c",
+        "1dfcd69f",
+        "da06c2a0",
+        "132fa112",
+        "1f4770e5",
+        "76e7d675"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-add-remove-and-update-elements-in-an-array/zh-CN.mdx b/questions/how-do-you-add-remove-and-update-elements-in-an-array/zh-CN.mdx
new file mode 100644
index 0000000..1fcf38c
--- /dev/null
+++ b/questions/how-do-you-add-remove-and-update-elements-in-an-array/zh-CN.mdx
@@ -0,0 +1,113 @@
+---
+title: 如何添加、删除和更新数组中的元素？
+---
+
+## TL;DR
+
+要向数组添加元素，可以使用 `push`、`unshift` 或 `splice` 等方法。要删除元素，可以使用 `pop`、`shift` 或 `splice`。要更新元素，可以直接访问数组索引并分配一个新值。
+
+```js live
+let arr = [1, 2, 3];
+
+// Add elements
+arr.push(4); // [1, 2, 3, 4]
+arr.unshift(0); // [0, 1, 2, 3, 4]
+arr.splice(2, 0, 1.5); // [0, 1, 1.5, 2, 3, 4]
+
+// Remove elements
+arr.pop(); // [0, 1, 1.5, 2, 3]
+arr.shift(); // [1, 1.5, 2, 3]
+arr.splice(1, 1); // [1, 2, 3]
+
+// Update elements
+arr[1] = 5; // [1, 5, 3]
+console.log(arr); // Final state: [1, 5, 3]
+```
+
+**注意**：如果在某些环境（如 Chrome DevTools）中尝试在每次操作后使用 `console.log(arr)`，您可能只能看到 `arr` 的最终状态。这是因为控制台有时会保留对数组的实时引用，而不是记录其确切时刻的状态。要正确查看中间状态，请使用 `console.log([...arr])` 存储快照，或在每次操作后立即打印值。
+
+***
+
+## 向数组添加元素
+
+### 使用 `push`
+
+`push` 方法将一个或多个元素添加到数组的末尾，并返回数组的新长度。
+
+```js live
+let arr = [1, 2, 3];
+console.log(arr.push(4)); // Output: 4 (new length of array)
+console.log(arr); // [1, 2, 3, 4]
+```
+
+### 使用 `unshift`
+
+`unshift` 方法将一个或多个元素添加到数组的开头，并返回数组的新长度。
+
+```js live
+let arr = [1, 2, 3];
+console.log(arr.unshift(0)); // Output: 4 (new length of array)
+console.log(arr); // [0, 1, 2, 3]
+```
+
+### 使用 `splice`
+
+`splice` 方法可以在数组中的任何位置添加元素。第一个参数指定开始更改数组的索引，第二个参数指定要删除的元素数量，其余的是要添加的元素。
+
+```js live
+let arr = [1, 2, 3];
+arr.splice(1, 0, 1.5); // Removes no element, but adds 1.5
+console.log(arr); // [1, 1.5, 2, 3]
+```
+
+## 从数组中删除元素
+
+### 使用 `pop`
+
+`pop` 方法从数组中删除最后一个元素并返回该元素。
+
+```js live
+let arr = [1, 2, 3];
+console.log(arr.pop()); // Output: 3
+console.log(arr); // [1, 2]
+```
+
+### 使用 `shift`
+
+`shift` 方法从数组中删除第一个元素，并返回该元素。
+
+```js live
+let arr = [1, 2, 3];
+console.log(arr.shift()); // Output: 1
+console.log(arr); // [2, 3]
+```
+
+### 使用 `splice`
+
+`splice` 方法也可以从数组中的任何位置删除元素。第一个参数指定开始更改数组的索引，第二个参数指定要删除的元素数量。
+
+```js live
+let arr = [1, 2, 3, 4];
+console.log(arr.splice(1, 2)); // Output: [2, 3]
+console.log(arr); // [1, 4]
+```
+
+## 更新数组中的元素
+
+### 直接赋值
+
+您可以通过直接访问索引并分配新值来更新数组中的元素。
+
+```js live
+let arr = [1, 2, 3];
+arr[1] = 5;
+console.log(arr); // [1, 5, 3]
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Array.prototype.push](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push)
+* [MDN Web Docs: Array.prototype.unshift](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift)
+* [MDN Web Docs: Array.prototype.splice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)
+* [MDN Web Docs: Array.prototype.pop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)
+* [MDN Web Docs: Array.prototype.shift](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift)
diff --git a/questions/how-do-you-check-if-an-object-has-a-specific-property/en-US.langnostic.json b/questions/how-do-you-check-if-an-object-has-a-specific-property/en-US.langnostic.json
new file mode 100644
index 0000000..2597bf9
--- /dev/null
+++ b/questions/how-do-you-check-if-an-object-has-a-specific-property/en-US.langnostic.json
@@ -0,0 +1,50 @@
+{
+  "frontmatter": {
+    "title": "37795a30"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "d3e286b8",
+        "c3030fc6",
+        "2a7816d0",
+        "f95d861f",
+        "48898820",
+        "fca4759a",
+        "502efdc2",
+        "8290aad7",
+        "d723dfa4",
+        "fde98498",
+        "972e8d49",
+        "d2a6ba28",
+        "aa9dd9ec",
+        "65593564",
+        "1f4770e5",
+        "c6a7da2c"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "d3e286b8",
+        "c3030fc6",
+        "2a7816d0",
+        "f95d861f",
+        "48898820",
+        "fca4759a",
+        "502efdc2",
+        "8290aad7",
+        "d723dfa4",
+        "fde98498",
+        "972e8d49",
+        "d2a6ba28",
+        "aa9dd9ec",
+        "65593564",
+        "1f4770e5",
+        "c6a7da2c"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-check-if-an-object-has-a-specific-property/zh-CN.mdx b/questions/how-do-you-check-if-an-object-has-a-specific-property/zh-CN.mdx
new file mode 100644
index 0000000..4fe1893
--- /dev/null
+++ b/questions/how-do-you-check-if-an-object-has-a-specific-property/zh-CN.mdx
@@ -0,0 +1,72 @@
+---
+title: 如何检查对象是否具有特定属性？
+---
+
+## TL;DR
+
+要检查对象是否具有特定属性，可以使用 `in` 运算符或 `hasOwnProperty` 方法。`in` 运算符检查自有属性和继承属性，而 `hasOwnProperty` 仅检查自有属性。
+
+```js live
+const obj = { key: 'value' };
+
+// 使用 `in` 运算符
+if ('key' in obj) {
+  console.log('Property exists');
+}
+
+// 使用 `hasOwnProperty`
+if (obj.hasOwnProperty('key')) {
+  console.log('Property exists');
+}
+```
+
+***
+
+## 如何检查对象是否具有特定属性？
+
+### 使用 `in` 运算符
+
+`in` 运算符检查属性是否存在于对象中，包括对象原型链中的属性。
+
+```js live
+const obj = { key: 'value' };
+
+if ('key' in obj) {
+  console.log('Property exists');
+}
+```
+
+### 使用 `hasOwnProperty`
+
+`hasOwnProperty` 方法检查属性是否直接存在于对象上，而不是在其原型链中。
+
+```js live
+const obj = { key: 'value' };
+
+if (obj.hasOwnProperty('key')) {
+  console.log('Property exists');
+}
+```
+
+### `in` 和 `hasOwnProperty` 之间的区别
+
+* `in` 运算符检查自有属性和继承属性。
+* `hasOwnProperty` 方法仅检查自有属性。
+
+### 具有继承属性的示例
+
+```js live
+const parentObj = { inheritedKey: 'inheritedValue' };
+const childObj = Object.create(parentObj);
+childObj.ownKey = 'ownValue';
+
+console.log('inheritedKey' in childObj); // true
+console.log(childObj.hasOwnProperty('inheritedKey')); // false
+console.log('ownKey' in childObj); // true
+console.log(childObj.hasOwnProperty('ownKey')); // true
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: in operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in)
+* [MDN Web Docs: Object.prototype.hasOwnProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)
diff --git a/questions/how-do-you-check-the-data-type-of-a-variable/en-US.langnostic.json b/questions/how-do-you-check-the-data-type-of-a-variable/en-US.langnostic.json
new file mode 100644
index 0000000..cd51218
--- /dev/null
+++ b/questions/how-do-you-check-the-data-type-of-a-variable/en-US.langnostic.json
@@ -0,0 +1,58 @@
+{
+  "frontmatter": {
+    "title": "bca54652"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "3861efe0",
+        "2a7816d0",
+        "6d38e731",
+        "5c53eee5",
+        "17179c3d",
+        "e2f91808",
+        "1d3d0025",
+        "25c20d60",
+        "e9b10e7d",
+        "4c828591",
+        "9e29b63a",
+        "73c17ccf",
+        "8867e535",
+        "d81372eb",
+        "9ba2a2f9",
+        "58e8d0e",
+        "4596bbc",
+        "f111ab2e",
+        "1f4770e5",
+        "11567994"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "3861efe0",
+        "2a7816d0",
+        "6d38e731",
+        "5c53eee5",
+        "17179c3d",
+        "e2f91808",
+        "1d3d0025",
+        "25c20d60",
+        "e9b10e7d",
+        "4c828591",
+        "9e29b63a",
+        "73c17ccf",
+        "8867e535",
+        "d81372eb",
+        "9ba2a2f9",
+        "58e8d0e",
+        "4596bbc",
+        "f111ab2e",
+        "1f4770e5",
+        "11567994"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-check-the-data-type-of-a-variable/zh-CN.mdx b/questions/how-do-you-check-the-data-type-of-a-variable/zh-CN.mdx
new file mode 100644
index 0000000..6ab4d6a
--- /dev/null
+++ b/questions/how-do-you-check-the-data-type-of-a-variable/zh-CN.mdx
@@ -0,0 +1,84 @@
+---
+title: 如何检查变量的数据类型？
+---
+
+## TL;DR
+
+要在 JavaScript 中检查变量的数据类型，可以使用 `typeof` 运算符。例如，`typeof variableName` 将返回一个字符串，指示变量的类型，例如 `"string"`、`"number"`、`"boolean"`、`"object"`、`"function"`、`"undefined"` 或 `"symbol"`。对于数组和 `null`，您可以分别使用 `Array.isArray(variableName)` 和 `variableName === null`。
+
+***
+
+## 如何检查变量的数据类型？
+
+### 使用 `typeof` 运算符
+
+`typeof` 运算符是检查 JavaScript 中变量数据类型最常用的方法。它返回一个字符串，指示操作数的类型。
+
+```js live
+let str = 'Hello, world!';
+console.log(typeof str); // "string"
+
+let num = 42;
+console.log(typeof num); // "number"
+
+let bool = true;
+console.log(typeof bool); // "boolean"
+
+let obj = { name: 'Alice' };
+console.log(typeof obj); // "object"
+
+let func = function () {};
+console.log(typeof func); // "function"
+
+let undef;
+console.log(typeof undef); // "undefined"
+
+let sym = Symbol();
+console.log(typeof sym); // "symbol"
+```
+
+### 检查 `null`
+
+`typeof` 运算符对 `null` 返回 `"object"`，这可能会产生误导。要专门检查 `null`，您应该使用严格的相等比较。
+
+```js live
+let n = null;
+console.log(n === null); // true
+```
+
+### 检查数组
+
+数组是 JavaScript 中一种特殊类型的对象。要检查变量是否为数组，可以使用 `Array.isArray` 方法。
+
+```js live
+let arr = [1, 2, 3];
+console.log(Array.isArray(arr)); // true
+```
+
+### 检查 `NaN`
+
+`NaN` (Not-a-Number) 是 JavaScript 中的一个特殊的数值。要检查一个值是否为 `NaN`，可以使用 `Number.isNaN` 方法。
+
+```js live
+let notANumber = NaN;
+console.log(Number.isNaN(notANumber)); // true
+```
+
+### 检查 `null` 和 `undefined`
+
+要检查变量是 `null` 还是 `undefined`，可以使用 `==` 运算符和 `typeof` 运算符的组合。
+
+```js live
+let value = null;
+console.log(value == null); // true
+
+let value2;
+console.log(typeof value2 === 'undefined'); // true
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: typeof](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof)
+* [MDN Web Docs: Array.isArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray)
+* [MDN Web Docs: Number.isNaN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN)
+* [MDN Web Docs: null](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null)
diff --git a/questions/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.langnostic.json b/questions/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..572faaf
--- /dev/null
+++ b/questions/how-do-you-convert-a-set-to-an-array-in-javascript/en-US.langnostic.json
@@ -0,0 +1,46 @@
+{
+  "frontmatter": {
+    "title": "7482a008"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "9f9e979b",
+        "4e7ceb05",
+        "2a7816d0",
+        "ff3155c3",
+        "5b5cb2f6",
+        "398d0e72",
+        "9dfc7c21",
+        "16f3aaf5",
+        "712c5871",
+        "adbdd43e",
+        "c500fc82",
+        "b08ab0aa",
+        "1f4770e5",
+        "84276796"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "9f9e979b",
+        "4e7ceb05",
+        "2a7816d0",
+        "ff3155c3",
+        "5b5cb2f6",
+        "398d0e72",
+        "9dfc7c21",
+        "16f3aaf5",
+        "712c5871",
+        "adbdd43e",
+        "c500fc82",
+        "b08ab0aa",
+        "1f4770e5",
+        "84276796"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-convert-a-set-to-an-array-in-javascript/zh-CN.mdx b/questions/how-do-you-convert-a-set-to-an-array-in-javascript/zh-CN.mdx
new file mode 100644
index 0000000..0d48268
--- /dev/null
+++ b/questions/how-do-you-convert-a-set-to-an-array-in-javascript/zh-CN.mdx
@@ -0,0 +1,49 @@
+---
+title: 如何在 JavaScript 中将 `Set` 转换为数组？
+---
+
+## TL;DR
+
+要在 JavaScript 中将 `Set` 转换为数组，可以使用 `Array.from()` 方法或扩展运算符。例如：
+
+```js live
+const mySet = new Set([1, 2, 3]);
+const myArray = Array.from(mySet);
+// OR const myArray = [...mySet];
+
+console.log(myArray); // Output: [1, 2, 3]
+```
+
+***
+
+## 如何在 JavaScript 中将 `Set` 转换为数组？
+
+### 使用 `Array.from()`
+
+`Array.from()` 方法从类似数组或可迭代对象（例如 `Set`）创建一个新的、浅拷贝的数组实例。
+
+```js live
+const mySet = new Set([1, 2, 3]);
+const myArray = Array.from(mySet);
+console.log(myArray); // Output: [1, 2, 3]
+```
+
+### 使用扩展运算符
+
+扩展运算符 (`...`) 可用于将 `Set` 的元素展开到数组中。
+
+```js live
+const mySet = new Set([1, 2, 3]);
+const myArray = [...mySet];
+console.log(myArray); // Output: [1, 2, 3]
+```
+
+### 性能考量
+
+这两种方法都高效且常用。但是，扩展运算符通常被认为更简洁易读。对于大多数用例，性能差异通常可以忽略不计，但对于非常大的集合，您可能需要对这两种方法进行基准测试，以查看哪种方法在您的特定场景中表现更好。
+
+## 延伸阅读
+
+* [MDN Web Docs: Array.from()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
+* [MDN Web Docs: Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
+* [MDN Web Docs: Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
diff --git a/questions/how-do-you-convert-a-string-to-a-number-in-javascript/en-US.langnostic.json b/questions/how-do-you-convert-a-string-to-a-number-in-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..d256481
--- /dev/null
+++ b/questions/how-do-you-convert-a-string-to-a-number-in-javascript/en-US.langnostic.json
@@ -0,0 +1,58 @@
+{
+  "frontmatter": {
+    "title": "1fe46ad4"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "72bfbeba",
+        "2a7816d0",
+        "ff093738",
+        "18656ac0",
+        "69c14205",
+        "ee13ede1",
+        "4333a2ea",
+        "3a855bf6",
+        "e7e1ff92",
+        "aaa562b2",
+        "bbcd9075",
+        "c12a9d77",
+        "c53b841b",
+        "44e42eb2",
+        "7351b3ea",
+        "95a1b822",
+        "6484d89",
+        "afe9c39e",
+        "1f4770e5",
+        "181eade1"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "72bfbeba",
+        "2a7816d0",
+        "ff093738",
+        "18656ac0",
+        "69c14205",
+        "ee13ede1",
+        "4333a2ea",
+        "3a855bf6",
+        "e7e1ff92",
+        "aaa562b2",
+        "bbcd9075",
+        "c12a9d77",
+        "c53b841b",
+        "44e42eb2",
+        "7351b3ea",
+        "95a1b822",
+        "6484d89",
+        "afe9c39e",
+        "1f4770e5",
+        "181eade1"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-convert-a-string-to-a-number-in-javascript/zh-CN.mdx b/questions/how-do-you-convert-a-string-to-a-number-in-javascript/zh-CN.mdx
new file mode 100644
index 0000000..afb87ed
--- /dev/null
+++ b/questions/how-do-you-convert-a-string-to-a-number-in-javascript/zh-CN.mdx
@@ -0,0 +1,86 @@
+---
+title: 如何在 JavaScript 中将字符串转换为数字？
+---
+
+## TL;DR
+
+在 JavaScript 中，您可以使用多种方法将字符串转换为数字。最常见的方法是 `Number()`、`parseInt()`、`parseFloat()` 和一元加运算符 (`+`)。例如，`Number("123")` 将字符串 `"123"` 转换为数字 `123`，而 `parseInt("123.45")` 将字符串 `"123.45"` 转换为整数 `123`。
+
+***
+
+## 如何在 JavaScript 中将字符串转换为数字？
+
+### 使用 `Number()` 函数
+
+`Number()` 函数将字符串转换为数字。它可以处理整数和浮点数。
+
+```js live
+let str = '123';
+let num = Number(str);
+console.log(num); // 123
+
+let floatStr = '123.45';
+let floatNum = Number(floatStr);
+console.log(floatNum); // 123.45
+```
+
+### 使用 `parseInt()` 函数
+
+`parseInt()` 函数解析一个字符串并返回一个整数。它还可以接受第二个参数，即要使用的数字系统的基数（底数）。
+
+```js live
+let str = '123';
+let num = parseInt(str);
+console.log(num); // 123
+
+let floatStr = '120.45';
+let floatNum = parseInt(floatStr);
+console.log(floatNum); // 120
+
+let binaryStr = '1010';
+let binaryNum = parseInt(binaryStr, 2);
+console.log(binaryNum); // 10
+```
+
+### 使用 `parseFloat()` 函数
+
+`parseFloat()` 函数解析一个字符串并返回一个浮点数。
+
+```js live
+let floatStr = '123.45';
+let floatNum = parseFloat(floatStr);
+console.log(floatNum); // 123.45
+```
+
+### 使用一元加运算符 (`+`)
+
+一元加运算符可用于将字符串转换为数字。这是一种简写方法，适用于整数和浮点数。
+
+```js live
+let str = '123';
+let num = +str;
+console.log(num); // 123
+
+let floatStr = '123.45';
+let floatNum = +floatStr;
+console.log(floatNum); // 123.45
+```
+
+### 处理非数字字符串
+
+如果字符串无法转换为数字，这些方法将返回 `NaN` (非数字)。
+
+```js live
+let invalidStr = 'abc';
+console.log(Number(invalidStr)); // NaN
+console.log(parseInt(invalidStr)); // NaN
+console.log(parseFloat(invalidStr)); // NaN
+console.log(+invalidStr); // NaN
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Number()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number)
+* [MDN Web Docs: parseInt()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseInt)
+* [MDN Web Docs: parseFloat()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/parseFloat)
+* [MDN Web Docs: Unary plus (+)](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Unary_plus)
diff --git a/questions/how-do-you-create-a-constructor-function/en-US.langnostic.json b/questions/how-do-you-create-a-constructor-function/en-US.langnostic.json
new file mode 100644
index 0000000..70a8e18
--- /dev/null
+++ b/questions/how-do-you-create-a-constructor-function/en-US.langnostic.json
@@ -0,0 +1,60 @@
+{
+  "frontmatter": {
+    "title": "2243699d"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "38d18dbb",
+        "8cfc2ad0",
+        "2a7816d0",
+        "528c2335",
+        "7f0e9485",
+        "a9b0c3e0",
+        "bb2cea8d",
+        "f25e75c4",
+        "80bca8a9",
+        "e3b5c44",
+        "b9bc035a",
+        "ce841525",
+        "97ba09c0",
+        "2339a0c6",
+        "948de165",
+        "55cf8bf6",
+        "aa1c88d2",
+        "ee363481",
+        "9af57c23",
+        "1f4770e5",
+        "e5d6bbb9"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "38d18dbb",
+        "8cfc2ad0",
+        "2a7816d0",
+        "528c2335",
+        "7f0e9485",
+        "a9b0c3e0",
+        "bb2cea8d",
+        "f25e75c4",
+        "80bca8a9",
+        "e3b5c44",
+        "b9bc035a",
+        "ce841525",
+        "97ba09c0",
+        "2339a0c6",
+        "948de165",
+        "55cf8bf6",
+        "aa1c88d2",
+        "ee363481",
+        "9af57c23",
+        "1f4770e5",
+        "e5d6bbb9"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-create-a-constructor-function/zh-CN.mdx b/questions/how-do-you-create-a-constructor-function/zh-CN.mdx
new file mode 100644
index 0000000..00f6d69
--- /dev/null
+++ b/questions/how-do-you-create-a-constructor-function/zh-CN.mdx
@@ -0,0 +1,105 @@
+---
+title: 如何创建构造函数？
+---
+
+## TL;DR
+
+要在 JavaScript 中创建构造函数，请定义一个名称大写的常规函数，以表明它是一个构造函数。使用 `this` 关键字设置属性和方法。创建实例时，使用 `new` 关键字。
+
+```js live
+function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+const john = new Person('John', 30);
+console.log(john.age); // 30
+```
+
+***
+
+## 如何创建构造函数？
+
+### 定义构造函数
+
+JavaScript 中的构造函数是一个用于创建对象的常规函数。按照惯例，构造函数的名称以大写字母开头，以区别于常规函数。
+
+```js live
+function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+```
+
+### 使用 `this` 关键字
+
+在构造函数中，`this` 关键字用于引用将要创建的对象。可以将属性和方法分配给 `this`。
+
+```js live
+function Person(name, age) {
+  this.name = name;
+  this.age = age;
+  this.greet = function () {
+    console.log(
+      `Hello, my name is ${this.name} and I am ${this.age} years old.`,
+    );
+  };
+}
+```
+
+### 创建实例
+
+要创建对象的实例，请使用 `new` 关键字，后跟构造函数。
+
+```js live
+function Person(name, age) {
+  this.name = name;
+  this.age = age;
+  this.greet = function () {
+    console.log(
+      `Hello, my name is ${this.name} and I am ${this.age} years old.`,
+    );
+  };
+}
+
+const john = new Person('John', 30);
+john.greet(); // Output: Hello, my name is John and I am 30 years old.
+```
+
+### 将方法添加到原型
+
+为了节省内存，最好将方法添加到构造函数的原型中，而不是在构造函数中定义它们。
+
+```js live
+function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+Person.prototype.greet = function () {
+  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
+};
+
+const jane = new Person('Jane', 25);
+jane.greet(); // Output: Hello, my name is Jane and I am 25 years old.
+```
+
+### 检查实例类型
+
+您可以使用 `instanceof` 运算符检查对象是否是构造函数的实例。
+
+```js live
+function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+const jane = new Person('Jane', 25);
+
+console.log(jane instanceof Person); // Output: true
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)
+* [MDN Web Docs: Object prototypes](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes)
+* [JavaScript.info: Constructor, operator "new"](https://javascript.info/constructor-new)
diff --git a/questions/how-do-you-detect-if-javascript-is-disabled-on-a-page/en-US.langnostic.json b/questions/how-do-you-detect-if-javascript-is-disabled-on-a-page/en-US.langnostic.json
new file mode 100644
index 0000000..f4052f6
--- /dev/null
+++ b/questions/how-do-you-detect-if-javascript-is-disabled-on-a-page/en-US.langnostic.json
@@ -0,0 +1,50 @@
+{
+  "frontmatter": {
+    "title": "8334a1c1"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "4774815",
+        "4102232f",
+        "2a7816d0",
+        "e85ad18d",
+        "f155fdc4",
+        "567312ea",
+        "19c254ba",
+        "ace1b291",
+        "836b473a",
+        "58d8485b",
+        "6e2c3b41",
+        "bcaeabdb",
+        "e81ff55f",
+        "e152fa7b",
+        "1f4770e5",
+        "f793b2e5"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "4774815",
+        "4102232f",
+        "2a7816d0",
+        "e85ad18d",
+        "f155fdc4",
+        "567312ea",
+        "19c254ba",
+        "ace1b291",
+        "836b473a",
+        "58d8485b",
+        "6e2c3b41",
+        "bcaeabdb",
+        "e81ff55f",
+        "e152fa7b",
+        "1f4770e5",
+        "f793b2e5"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-detect-if-javascript-is-disabled-on-a-page/zh-CN.mdx b/questions/how-do-you-detect-if-javascript-is-disabled-on-a-page/zh-CN.mdx
new file mode 100644
index 0000000..ce71e3a
--- /dev/null
+++ b/questions/how-do-you-detect-if-javascript-is-disabled-on-a-page/zh-CN.mdx
@@ -0,0 +1,78 @@
+---
+title: 如何检测页面是否禁用了 JavaScript？
+---
+
+## TL;DR
+
+要检测页面上是否禁用了 JavaScript，可以使用 `<noscript>` HTML 标签。此标签允许您向浏览器中禁用了 JavaScript 的用户显示内容或消息。例如，您可以在 `<noscript>` 标签中包含一条消息，告知用户需要 JavaScript 才能获得页面的全部功能。
+
+```html
+<noscript>
+  <p>
+    您的浏览器中禁用了 JavaScript。请启用 JavaScript 以获得
+    最佳体验。
+  </p>
+</noscript>
+```
+
+***
+
+## 使用 `<noscript>` 标签
+
+### 什么是 `<noscript>` 标签？
+
+`<noscript>` 标签是一个 HTML 元素，它为在浏览器中禁用了 JavaScript 的用户提供替代内容。此标签对于告知用户，如果没有 JavaScript，网站的某些功能可能无法正常工作很有用。
+
+### 示例用法
+
+以下是如何使用 `<noscript>` 标签向禁用了 JavaScript 的用户显示消息的示例：
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JavaScript 检测</title>
+  </head>
+  <body>
+    <h1>欢迎来到我们的网站</h1>
+    <noscript>
+      <p>
+        您的浏览器中禁用了 JavaScript。请启用 JavaScript 以获得
+        最佳体验。
+      </p>
+    </noscript>
+    <p>此内容对所有用户可见。</p>
+  </body>
+</html>
+```
+
+在此示例中，只有在禁用 JavaScript 的情况下，才会显示 `<noscript>` 标签内的消息。如果启用了 JavaScript，则会忽略 `<noscript>` 标签内的内容。
+
+### 设置 `<noscript>` 内容的样式
+
+您还可以使用 CSS 设置 `<noscript>` 标签内内容的样式，使其更引人注目。例如：
+
+```html
+<noscript>
+  <style>
+    .noscript-message {
+      color: red;
+      font-weight: bold;
+    }
+  </style>
+  <p class="noscript-message">
+    您的浏览器中禁用了 JavaScript。请启用 JavaScript 以获得
+    最佳体验。
+  </p>
+</noscript>
+```
+
+在此示例中，消息将使用红色文本和粗体字体设置样式，使其突出显示。
+
+## 延伸阅读
+
+* [MDN Web Docs: `<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript)
+* [W3Schools: HTML `<noscript>` 标签](https://www.w3schools.com/tags/tag_noscript.asp)
+* [Can I use: `<noscript>`](https://caniuse.com/?search=noscript)
diff --git a/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.langnostic.json b/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..ca1dd39
--- /dev/null
+++ b/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "42de1ecb"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "b0f74c9a",
+        "16926c3b",
+        "2a7816d0",
+        "6f6e729",
+        "7f9aab58",
+        "9ff0d9e6",
+        "700ae9a2",
+        "30d009a1",
+        "685b5a6d",
+        "9b5019f0",
+        "c820cf00",
+        "ff3ea8d8",
+        "792e7e39",
+        "9654aab9",
+        "82b1bf3e",
+        "88b9a950",
+        "d58ffb87",
+        "f74994a7",
+        "79e274c7",
+        "c8d558a3",
+        "4a421d53",
+        "1f4770e5",
+        "9789067d"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "b0f74c9a",
+        "16926c3b",
+        "2a7816d0",
+        "6f6e729",
+        "7f9aab58",
+        "9ff0d9e6",
+        "700ae9a2",
+        "30d009a1",
+        "685b5a6d",
+        "9b5019f0",
+        "c820cf00",
+        "ff3ea8d8",
+        "792e7e39",
+        "9654aab9",
+        "82b1bf3e",
+        "88b9a950",
+        "d58ffb87",
+        "f74994a7",
+        "79e274c7",
+        "c8d558a3",
+        "4a421d53",
+        "1f4770e5",
+        "9789067d"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/zh-CN.mdx b/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/zh-CN.mdx
new file mode 100644
index 0000000..51ac996
--- /dev/null
+++ b/questions/how-do-you-get-the-query-string-values-of-the-current-page-in-javascript/zh-CN.mdx
@@ -0,0 +1,78 @@
+---
+title: 如何用 JavaScript 获取当前页面的查询字符串值？
+---
+
+## 总结
+
+要在 JavaScript 中获取当前页面的查询字符串值，可以使用 `URLSearchParams` 对象。首先，使用 `window.location.search` 创建一个 `URLSearchParams` 实例，然后使用 `get` 方法检索特定的查询参数。例如：
+
+```js
+const params = new URLSearchParams(window.location.search);
+const value = params.get('language');
+console.log(value);
+```
+
+***
+
+## 如何用 JavaScript 获取当前页面的查询字符串值？
+
+### 使用 URLSearchParams
+
+`URLSearchParams` 接口提供了一种简单的方法来处理查询字符串。以下是如何使用它：
+
+1. **创建 `URLSearchParams` 实例**：使用 `window.location.search` 获取 URL 的查询字符串部分。
+2. **检索特定的查询参数**：使用 `get` 方法获取特定查询参数的值。
+
+```js
+const params = new URLSearchParams(window.location.search);
+const value = params.get('key'); // 将 'key' 替换为实际的查询参数名称
+console.log(value);
+```
+
+如果查询参数不存在，`get` 方法将返回 `null`。
+
+### 示例
+
+考虑一个像 `https://example.com?page=2&sort=asc` 这样的 URL。要获取 `page` 和 `sort` 的值：
+
+```js
+const params = new URLSearchParams(window.location.search);
+const page = params.get('page'); // '2'
+const sort = params.get('sort'); // 'asc'
+```
+
+### 处理多个值
+
+如果一个查询参数出现多次，可以使用 `getAll` 方法检索所有值：
+
+```js
+const params = new URLSearchParams(window.location.search);
+const values = params.getAll('key'); // 返回一个值数组
+```
+
+### 检查参数是否存在
+
+您可以使用 `has` 方法检查查询参数是否存在。
+
+```js
+const params = new URLSearchParams(window.location.search);
+console.log(params.has('page'));
+console.log(params.has('language'));
+console.log(params.has('tab'));
+```
+
+### 遍历所有参数
+
+您可以使用 `forEach` 方法遍历所有查询参数：
+
+```js
+const params = new URLSearchParams(window.location.search);
+params.forEach((value, key) => {
+  console.log(`${key}: ${value}`);
+});
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
+* [MDN Web Docs: window.location](https://developer.mozilla.org/en-US/docs/Web/API/Window/location)
diff --git a/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.langnostic.json b/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.langnostic.json
new file mode 100644
index 0000000..cacf4f7
--- /dev/null
+++ b/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.langnostic.json
@@ -0,0 +1,60 @@
+{
+  "frontmatter": {
+    "title": "83836691"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "327bddff",
+        "6f1c138c",
+        "f73efded",
+        "1e8e293b",
+        "2a7816d0",
+        "499dfcd3",
+        "f3ba35be",
+        "5c0b117d",
+        "6f1c138c",
+        "772c3745",
+        "393b7aae",
+        "6bffb974",
+        "a65a6657",
+        "f3ba35be",
+        "fda8e360",
+        "b240177e",
+        "58260fa0",
+        "9ae9590d",
+        "c7bcda64",
+        "1f4770e5",
+        "933046ae"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "327bddff",
+        "6f1c138c",
+        "f73efded",
+        "1e8e293b",
+        "2a7816d0",
+        "499dfcd3",
+        "f3ba35be",
+        "5c0b117d",
+        "6f1c138c",
+        "772c3745",
+        "393b7aae",
+        "6bffb974",
+        "a65a6657",
+        "f3ba35be",
+        "fda8e360",
+        "b240177e",
+        "58260fa0",
+        "9ae9590d",
+        "c7bcda64",
+        "1f4770e5",
+        "933046ae"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-handle-errors-in-asynchronous-operations/zh-CN.mdx b/questions/how-do-you-handle-errors-in-asynchronous-operations/zh-CN.mdx
new file mode 100644
index 0000000..1eed18d
--- /dev/null
+++ b/questions/how-do-you-handle-errors-in-asynchronous-operations/zh-CN.mdx
@@ -0,0 +1,120 @@
+---
+title: 如何处理异步操作中的错误？
+---
+
+## TL;DR
+
+要处理异步操作中的错误，可以使用带有 `async/await` 语法的 `try...catch` 块或带有 Promises 的 `.catch()` 方法。例如，使用 `async/await`，您可以将代码包装在 `try...catch` 块中以捕获任何错误：
+
+```js live
+async function fetchData() {
+  try {
+    // Invalid URl
+    const response = await fetch('https://api.example.com/data');
+    const data = await response.json();
+    console.log(data);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}
+
+fetchData(); // Error fetching data: ....
+```
+
+使用 Promises，您可以使用 `.catch()` 方法：
+
+```js live
+fetch('https://api.example.com/data') // Invalid URl
+  .then((response) => response.json())
+  .then((data) => console.log(data))
+  .catch((error) => console.error('Error fetching data:', error));
+```
+
+***
+
+## 使用 `try...catch` 和 `async/await`
+
+### 基本用法
+
+使用 `async/await` 时，您可以通过将异步代码包装在 `try...catch` 块中来处理错误。这允许您捕获在执行 `await` 语句期间发生的任何错误。
+
+```js live
+async function fetchData() {
+  try {
+    // Invalid URl
+    const response = await fetch('https://api.example.com/data');
+    const data = await response.json();
+    console.log(data);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}
+
+fetchData(); // Error fetching data: ....
+```
+
+### 嵌套异步操作
+
+如果您有多个异步操作，则可以嵌套 `try...catch` 块以处理不同级别的错误。
+
+```js live
+async function fetchData() {
+  try {
+    // Invalid URl
+    const response = await fetch('https://api.example.com/data');
+    const data = await response.json();
+    console.log(data);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}
+
+async function processData() {
+  try {
+    await fetchData();
+    // Additional processing
+    console.log(arr); // Trying to reference an undefined variable will throw an error
+  } catch (error) {
+    console.error('Error processing data:', error);
+  }
+}
+
+processData();
+```
+
+## 使用 `.catch()` 和 Promises
+
+### 基本用法
+
+使用 Promises 时，您可以使用 `.catch()` 方法处理错误。如果 Promise 被拒绝，则会调用此方法。
+
+```js live
+fetch('https://api.example.com/data')
+  .then((response) => response.json())
+  .then((data) => console.log(data))
+  .catch((error) => console.error('Error fetching data:', error));
+```
+
+### 链接多个 Promises
+
+如果您将多个 Promises 链接在一起，您可以在末尾使用一个 `.catch()` 来处理任何 Promise 中发生的错误。
+
+```js live
+fetch('https://api.example.com/data')
+  .then((response) => response.json())
+  .then((data) => {
+    // Process data
+    return processData(data);
+  })
+  .then((result) => {
+    // Further processing
+    console.log(result);
+  })
+  .catch((error) => console.error('Error in the chain:', error));
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: async/await](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await)
+* [MDN Web Docs: Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)
+* [JavaScript.info: Error handling with promises](https://javascript.info/promise-error-handling)
diff --git a/questions/how-do-you-handle-errors-using-trycatch-blocks/en-US.langnostic.json b/questions/how-do-you-handle-errors-using-trycatch-blocks/en-US.langnostic.json
new file mode 100644
index 0000000..2f261a8
--- /dev/null
+++ b/questions/how-do-you-handle-errors-using-trycatch-blocks/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "d57c372a"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "faeba4a7",
+        "2cfce4b6",
+        "2a7816d0",
+        "afedc9ab",
+        "ae1ce134",
+        "caf4cf80",
+        "2cfce4b6",
+        "9b5019f0",
+        "8b5b84e",
+        "672dfff6",
+        "2deb5771",
+        "2d397a97",
+        "7cc4268",
+        "4a1b5c91",
+        "d665ea43",
+        "25bfaa72",
+        "9b22b868",
+        "490dfaaa",
+        "bb88727",
+        "93edb5d0",
+        "74764fec",
+        "1f4770e5",
+        "ee7790b7"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "faeba4a7",
+        "2cfce4b6",
+        "2a7816d0",
+        "afedc9ab",
+        "ae1ce134",
+        "caf4cf80",
+        "2cfce4b6",
+        "9b5019f0",
+        "8b5b84e",
+        "672dfff6",
+        "2deb5771",
+        "2d397a97",
+        "7cc4268",
+        "4a1b5c91",
+        "d665ea43",
+        "25bfaa72",
+        "9b22b868",
+        "490dfaaa",
+        "bb88727",
+        "93edb5d0",
+        "74764fec",
+        "1f4770e5",
+        "ee7790b7"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-handle-errors-using-trycatch-blocks/zh-CN.mdx b/questions/how-do-you-handle-errors-using-trycatch-blocks/zh-CN.mdx
new file mode 100644
index 0000000..773a958
--- /dev/null
+++ b/questions/how-do-you-handle-errors-using-trycatch-blocks/zh-CN.mdx
@@ -0,0 +1,134 @@
+---
+title: 如何使用 `try...catch` 块处理错误？
+---
+
+## TL;DR
+
+要使用 `try...catch` 块处理错误，您需要将可能抛出错误的代码包装在 `try` 块中。如果发生错误，控制权将转移到 `catch` 块，您可以在其中处理错误。或者，您可以使用 `finally` 块来执行代码，无论是否发生错误。
+
+```js
+try {
+  // Code that may throw an error
+} catch (error) {
+  // Handle the error
+} finally {
+  // Code that will run regardless of an error
+}
+```
+
+***
+
+## 如何使用 `try...catch` 块处理错误？
+
+### 基本结构
+
+`try...catch` 语句由 `try` 块、`catch` 块和可选的 `finally` 块组成。
+
+```js
+try {
+  // Code that may throw an error
+} catch (error) {
+  // Handle the error
+} finally {
+  // Code that will run regardless of an error
+}
+```
+
+### 示例
+
+以下是使用 `try...catch` 处理错误的示例：
+
+```js live
+function riskyOperation() {
+  const invalidJsonString = '{"name": "John}'; // Try changing this to a valid JSON string
+  return JSON.parse(invalidJsonString);
+}
+
+try {
+  let result = riskyOperation();
+  console.log(result);
+} catch (error) {
+  console.error('An error occurred:', error.message);
+} finally {
+  console.log('This will run regardless of an error');
+}
+```
+
+### 解释
+
+* **`try` 块**：包含可能抛出错误的代码。如果发生错误，控制权将转移到 `catch` 块。
+* **`catch` 块**：包含处理错误的代码。`error` 对象包含有关错误的信息。
+* **`finally` 块**：包含无论是否发生错误都将运行的代码。这对于清理任务很有用。
+
+### 嵌套 `try...catch` 块
+
+您可以嵌套 `try...catch` 块来处理不同级别的错误：
+
+```js live
+function anotherRiskyOperation() {
+  const person = undefined;
+  console.log(person.name);
+}
+
+try {
+  try {
+    anotherRiskyOperation();
+  } catch (innerError) {
+    // Error (if any) for anotherRiskyOperation caught here
+    console.error('Inner error:', innerError.message);
+  }
+} catch (outerError) {
+  // Inner error does not reach here
+  console.error('Outer error:', outerError.message);
+}
+```
+
+### 重新抛出错误
+
+如果希望由外部 `try...catch` 块处理错误，您可以从 `catch` 块重新抛出错误：
+
+```js live
+function yetAnotherRiskyOperation() {
+  const numerator = 10;
+  const denominator = 0;
+  if (denominator === 0) {
+    throw new Error('Cannot divide by zero');
+  }
+
+  return numerator / denominator;
+}
+
+try {
+  try {
+    const result = yetAnotherRiskyOperation();
+    console.log('Divisinon result:', result);
+  } catch (innerError) {
+    console.error('Inner error:', innerError.message);
+    throw innerError; // Re-throw the error
+  }
+} catch (outerError) {
+  console.error('Outer error:', outerError.message);
+}
+```
+
+### 使用 `finally` 进行清理
+
+`finally` 块对于清理任务很有用，例如关闭文件或释放资源：
+
+```js
+// openFile() 和 closeFile() 是自定义实现
+try {
+  let file = openFile('example.txt');
+  // 对文件执行操作
+} catch (error) {
+  console.error('发生错误:', error.message);
+} finally {
+  closeFile(file); // 确保文件已关闭
+}
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: try...catch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch)
+* [JavaScript.info: Error handling, "try...catch"](https://javascript.info/try-catch)
+* [MDN Web Docs: Error object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error)
diff --git a/questions/how-do-you-import-and-export-modules-in-javascript/en-US.langnostic.json b/questions/how-do-you-import-and-export-modules-in-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..00e6595
--- /dev/null
+++ b/questions/how-do-you-import-and-export-modules-in-javascript/en-US.langnostic.json
@@ -0,0 +1,62 @@
+{
+  "frontmatter": {
+    "title": "6e46ab1a"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "95c9c1ca",
+        "9866d11c",
+        "2a7816d0",
+        "1423f9a4",
+        "4a8b3697",
+        "99ce95b0",
+        "854e709c",
+        "5aecda15",
+        "271e35e0",
+        "9c62d4fc",
+        "39551d08",
+        "abce53ee",
+        "d0d58bde",
+        "baa3139f",
+        "5c326618",
+        "7064378c",
+        "5347184c",
+        "d3f865f7",
+        "93180888",
+        "6a75df33",
+        "1f4770e5",
+        "926066f7"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "95c9c1ca",
+        "9866d11c",
+        "2a7816d0",
+        "1423f9a4",
+        "4a8b3697",
+        "99ce95b0",
+        "854e709c",
+        "5aecda15",
+        "271e35e0",
+        "9c62d4fc",
+        "39551d08",
+        "abce53ee",
+        "d0d58bde",
+        "baa3139f",
+        "5c326618",
+        "7064378c",
+        "5347184c",
+        "d3f865f7",
+        "93180888",
+        "6a75df33",
+        "1f4770e5",
+        "926066f7"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-import-and-export-modules-in-javascript/zh-CN.mdx b/questions/how-do-you-import-and-export-modules-in-javascript/zh-CN.mdx
new file mode 100644
index 0000000..4878ac9
--- /dev/null
+++ b/questions/how-do-you-import-and-export-modules-in-javascript/zh-CN.mdx
@@ -0,0 +1,92 @@
+---
+title: 如何在 JavaScript 中导入和导出模块？
+---
+
+## TL;DR
+
+在 JavaScript 中，您可以使用 `import` 和 `export` 语句导入和导出模块。要导出模块，您可以在函数、变量或类之前使用 `export`，或者对单个默认导出使用 `export default`。要导入模块，您可以使用 `import` 语句，后跟已导出模块的名称和模块文件的路径。
+
+```js
+// Exporting a module
+export const myFunction = () => {
+  /* ... */
+};
+export default myFunction;
+
+// Importing a module
+import { myFunction } from './myModule';
+import myFunction from './myModule';
+```
+
+***
+
+## 导出模块
+
+### 命名导出
+
+您可以从模块中导出多个已命名的项目。在要导出的函数、变量或类之前使用 `export` 关键字。
+
+```js
+// myModule.js
+export const myFunction = () => {
+  console.log('This is my function');
+};
+
+export const myVariable = 42;
+```
+
+### 默认导出
+
+一个模块可以有一个默认导出。使用 `export default` 关键字导出一个项目。
+
+```js
+// myModule.js
+const myFunction = () => {
+  console.log('This is my function');
+};
+
+export default myFunction;
+```
+
+## 导入模块
+
+### 导入命名导出
+
+要导入命名导出，请使用 `import` 语句，后跟包含导出名称的括号。
+
+```js
+// main.js
+import { myFunction, myVariable } from './myModule';
+
+myFunction(); // This is my function
+console.log(myVariable); // 42
+```
+
+### 导入默认导出
+
+要导入默认导出，请使用 `import` 语句，后跟您选择的名称。
+
+```js
+// main.js
+import myFunction from './myModule';
+
+myFunction(); // This is my function
+```
+
+### 导入所有导出
+
+您可以使用 `*` 语法和别名从模块导入所有已命名的导出。
+
+```js
+// main.js
+import * as myModule from './myModule';
+
+myModule.myFunction(); // This is my function
+console.log(myModule.myVariable); // 42
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
+* [MDN Web Docs: export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)
+* [JavaScript Modules: A Beginner’s Guide](https://www.sitepoint.com/understanding-es6-modules/)
diff --git a/questions/how-do-you-make-an-http-request-using-the-fetch-api/en-US.langnostic.json b/questions/how-do-you-make-an-http-request-using-the-fetch-api/en-US.langnostic.json
new file mode 100644
index 0000000..51f76db
--- /dev/null
+++ b/questions/how-do-you-make-an-http-request-using-the-fetch-api/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "1bc2711a"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "1dfb1cc3",
+        "b0f8e59f",
+        "5f93685",
+        "dde523a3",
+        "2a7816d0",
+        "b4813231",
+        "33b004b2",
+        "975b180e",
+        "3bab9183",
+        "f7de8e1c",
+        "b58c6263",
+        "deaf1b90",
+        "a6f86595",
+        "dcbf1f15",
+        "4f774dfb",
+        "709d86f1",
+        "691a51fb",
+        "fd336ae0",
+        "47fcde76",
+        "bbb7fc9a",
+        "ee855b6a",
+        "1f4770e5",
+        "18521edb"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "1dfb1cc3",
+        "b0f8e59f",
+        "5f93685",
+        "dde523a3",
+        "2a7816d0",
+        "b4813231",
+        "33b004b2",
+        "975b180e",
+        "3bab9183",
+        "f7de8e1c",
+        "b58c6263",
+        "deaf1b90",
+        "a6f86595",
+        "dcbf1f15",
+        "4f774dfb",
+        "709d86f1",
+        "691a51fb",
+        "fd336ae0",
+        "47fcde76",
+        "bbb7fc9a",
+        "ee855b6a",
+        "1f4770e5",
+        "18521edb"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-make-an-http-request-using-the-fetch-api/zh-CN.mdx b/questions/how-do-you-make-an-http-request-using-the-fetch-api/zh-CN.mdx
new file mode 100644
index 0000000..dcd96f9
--- /dev/null
+++ b/questions/how-do-you-make-an-http-request-using-the-fetch-api/zh-CN.mdx
@@ -0,0 +1,135 @@
+---
+title: 如何使用 Fetch API 发出 HTTP 请求？
+---
+
+## TL;DR
+
+要使用 Fetch API 发出 HTTP 请求，您可以使用 `fetch` 函数，该函数返回一个 promise。您可以使用 `.then()` 和 `.catch()` 来处理响应，以进行错误处理。 这是一个 GET 请求的基本示例：
+
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
+  .then((response) => response.json())
+  .then((data) => console.log(data))
+  .catch((error) => console.error('Error:', error));
+```
+
+对于 POST 请求，您可以将一个选项对象作为第二个参数传递给 `fetch`：
+
+```js live
+fetch('https://jsonplaceholder.typicode.com/posts', {
+  method: 'POST',
+  body: JSON.stringify({
+    title: 'foo',
+    body: 'bar',
+    userId: 1,
+  }),
+  headers: {
+    'Content-Type': 'application/json; charset=UTF-8',
+  },
+})
+  .then((response) => response.json())
+  .then((data) => console.log(data))
+  .catch((error) => console.error('Error:', error));
+```
+
+***
+
+## 使用 Fetch API 发出 HTTP 请求
+
+### 基本的 GET 请求
+
+要发出基本的 GET 请求，您可以使用 `fetch` 函数，并使用您要获取的资源的 URL。`fetch` 函数返回一个 promise，该 promise 解析为表示对请求的响应的 `Response` 对象。
+
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  })
+  .then((data) => console.log(data))
+  .catch((error) => console.error('Error:', error));
+```
+
+### 处理不同的响应类型
+
+`Response` 对象有几种方法来处理不同类型的响应，例如 `.json()`、`.text()`、`.blob()` 和 `.arrayBuffer()`。
+
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
+  .then((response) => response.text())
+  .then((text) => console.log(text))
+  .catch((error) => console.error('Error:', error));
+```
+
+### 发出 POST 请求
+
+要发出 POST 请求，您需要将一个选项对象作为第二个参数传递给 `fetch`。此对象可以包括 HTTP 方法、标头和请求正文。
+
+```js live
+fetch('https://jsonplaceholder.typicode.com/posts', {
+  method: 'POST',
+  body: JSON.stringify({
+    title: 'foo',
+    body: 'bar',
+    userId: 1,
+  }),
+  headers: {
+    'Content-Type': 'application/json; charset=UTF-8',
+  },
+})
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  })
+  .then((data) => console.log(data))
+  .catch((error) => console.error('Error:', error));
+```
+
+### 处理错误
+
+可以使用 `.catch()` 方法在 Fetch API 中进行错误处理。 检查 `response.ok` 属性以确保请求成功也是一个好习惯。
+
+```js live
+fetch('https://jsonplaceholder.tyicode.com/posts/1/comments') // Typo in the URL
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  })
+  .then((data) => console.log(data))
+  .catch((error) => console.error('Error:', error));
+```
+
+### 使用 async/await
+
+您还可以将 Fetch API 与 `async/await` 结合使用，以获得更具同步感知的代码。
+
+```js live
+async function fetchData() {
+  try {
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/todos/1',
+    );
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    const data = await response.json();
+    console.log(data);
+  } catch (error) {
+    console.error('Error:', error);
+  }
+}
+
+fetchData();
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+* [MDN Web Docs: Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
+* [JavaScript.info: Fetch](https://javascript.info/fetch)
diff --git a/questions/how-do-you-manipulate-css-styles-using-javascript/en-US.langnostic.json b/questions/how-do-you-manipulate-css-styles-using-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..33b40ef
--- /dev/null
+++ b/questions/how-do-you-manipulate-css-styles-using-javascript/en-US.langnostic.json
@@ -0,0 +1,58 @@
+{
+  "frontmatter": {
+    "title": "e7c58a4f"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "9b63a7a1",
+        "850eb5e8",
+        "44b2c038",
+        "d1c317b8",
+        "2a7816d0",
+        "5da8a342",
+        "b55920c3",
+        "b6b3e806",
+        "530f42be",
+        "46897af4",
+        "1ae24a7c",
+        "35e22bc6",
+        "5955deb",
+        "5fdff3b9",
+        "a15546f1",
+        "beefb0f",
+        "d78dc868",
+        "af769ec7",
+        "1f4770e5",
+        "f6661148"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "9b63a7a1",
+        "850eb5e8",
+        "44b2c038",
+        "d1c317b8",
+        "2a7816d0",
+        "5da8a342",
+        "b55920c3",
+        "b6b3e806",
+        "530f42be",
+        "46897af4",
+        "1ae24a7c",
+        "35e22bc6",
+        "5955deb",
+        "5fdff3b9",
+        "a15546f1",
+        "beefb0f",
+        "d78dc868",
+        "af769ec7",
+        "1f4770e5",
+        "f6661148"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-manipulate-css-styles-using-javascript/zh-CN.mdx b/questions/how-do-you-manipulate-css-styles-using-javascript/zh-CN.mdx
new file mode 100644
index 0000000..070aa76
--- /dev/null
+++ b/questions/how-do-you-manipulate-css-styles-using-javascript/zh-CN.mdx
@@ -0,0 +1,97 @@
+---
+title: 如何使用 JavaScript 操作 CSS 样式？
+---
+
+## TL;DR
+
+您可以通过访问 HTML 元素的 `style` 属性来使用 JavaScript 操作 CSS 样式。例如，要更改 `id` 为 `myDiv` 的 `div` 元素的背景颜色，您可以使用：
+
+```js
+document.getElementById('myDiv').style.backgroundColor = 'blue';
+```
+
+您还可以使用 `classList` 属性添加、删除或切换 CSS 类：
+
+```js
+document.getElementById('myDiv').classList.add('newClass');
+document.getElementById('myDiv').classList.remove('oldClass');
+document.getElementById('myDiv').classList.toggle('toggleClass');
+```
+
+***
+
+## 使用 JavaScript 操作 CSS 样式
+
+### 访问和修改内联样式
+
+您可以使用 `style` 属性直接操作 HTML 元素的内联样式。此属性允许您设置单个 CSS 属性。
+
+```js
+// Select the element
+const myDiv = document.getElementById('myDiv');
+
+// Change the background color
+myDiv.style.backgroundColor = 'blue';
+
+// Set multiple styles
+myDiv.style.width = '100px';
+myDiv.style.height = '100px';
+myDiv.style.border = '1px solid black';
+```
+
+### 使用 `classList` 属性
+
+`classList` 属性提供了在元素上添加、删除和切换 CSS 类的方法。这对于应用来自 CSS 文件的预定义样式很有用。
+
+```js
+// Select the element
+const myDiv = document.getElementById('myDiv');
+
+// Add a class
+myDiv.classList.add('newClass');
+
+// Remove a class
+myDiv.classList.remove('oldClass');
+
+// Toggle a class
+myDiv.classList.toggle('toggleClass');
+```
+
+### 使用 CSS 变量修改样式
+
+可以使用 JavaScript 操作 CSS 变量（自定义属性）。这对于主题和动态样式特别有用。
+
+```js
+// Set a CSS variable
+document.documentElement.style.setProperty('--main-color', 'blue');
+
+// Get the value of a CSS variable
+const mainColor = getComputedStyle(document.documentElement).getPropertyValue(
+  '--main-color',
+);
+console.log(mainColor);
+```
+
+### 使用外部样式表
+
+您还可以通过动态添加或删除样式表来操作样式。
+
+```js
+// Create a new link element
+const link = document.createElement('link');
+link.rel = 'stylesheet';
+link.href = 'styles.css';
+
+// Append the link element to the head
+document.head.appendChild(link);
+
+// Remove the link element
+document.head.removeChild(link);
+```
+
+## 延伸阅读
+
+* [MDN Web 文档：Element.style](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/style)
+* [MDN Web 文档：Element.classList](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList)
+* [MDN Web 文档：使用 CSS 自定义属性（变量）](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)
+* [MDN Web 文档：Document.createElement()](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement)
diff --git a/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.langnostic.json b/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.langnostic.json
new file mode 100644
index 0000000..d3212a6
--- /dev/null
+++ b/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.langnostic.json
@@ -0,0 +1,63 @@
+{
+  "frontmatter": {
+    "title": "a4d94590",
+    "subtitle": "d8b55125"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "9eacf6bc",
+        "2a7816d0",
+        "bc12ba0f",
+        "82aa747e",
+        "6ba2ffe5",
+        "89c85b75",
+        "b4c6d9cc",
+        "72b944e8",
+        "6c3c3a52",
+        "1ed032fa",
+        "1f4bd4d3",
+        "84afc48b",
+        "cb6ad0cd",
+        "d198ab1b",
+        "76c60b9c",
+        "53c68fb2",
+        "67ddc1a6",
+        "bc8f5185",
+        "e22beaf8",
+        "750510df",
+        "1f4770e5",
+        "d3c9fd72"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "9eacf6bc",
+        "2a7816d0",
+        "bc12ba0f",
+        "82aa747e",
+        "6ba2ffe5",
+        "89c85b75",
+        "b4c6d9cc",
+        "72b944e8",
+        "6c3c3a52",
+        "1ed032fa",
+        "1f4bd4d3",
+        "84afc48b",
+        "cb6ad0cd",
+        "d198ab1b",
+        "76c60b9c",
+        "53c68fb2",
+        "67ddc1a6",
+        "bc8f5185",
+        "e22beaf8",
+        "750510df",
+        "1f4770e5",
+        "d3c9fd72"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx b/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx
index a308488..0459da4 100644
--- a/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx
+++ b/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx
@@ -1,10 +1,75 @@
 ---
-title: 您如何组织您的代码？
-subtitle: 你是否使用模块模式，经典的继承，还是其他什么？
+title: 你如何组织你的代码？
+subtitle: 你使用模块模式、经典继承还是其他方式？
 ---
 
-在过去，开发人员使用 Backbone 来做 OOP（面向对象编程），这鼓励了更多的 OOP 方法，创建 Backbone 模型并为其附加方法。
+## TL;DR
 
-模块模式仍然很好，但现在，开发者更喜欢使用 React/Redux，它利用基于 Flux 架构的单方向数据流。 现在通常使用普通对象来表示一个应用的数据模型，并编写纯函数来操作这些对象。 像其他 Redux 应用程序一样，使用 actions 和 reducers 对状态进行操作。
+我通过遵循模块化方法、使用清晰的文件夹结构以及遵守编码标准和最佳实践来组织我的代码。我通过将代码划分为不同的层（如组件、服务和实用程序）来分离关注点。我还使用命名约定和文档来确保代码的可读性和可维护性。
 
-尽可能避免使用传统继承。 如果您确实如此，请坚持[这些规则](https://med.com/@dan_abramov/howto-use-classes-and-sleep-at-9af8de78ccb4)。
+***
+
+## 你如何组织你的代码？
+
+### 模块化方法
+
+我遵循模块化方法，将应用程序分解为更小、可重用的部分。这有助于更有效地管理代码库，并使其更易于维护和扩展。
+
+### 文件夹结构
+
+我使用清晰一致的文件夹结构来组织我的代码。以下是 React 项目的常见结构：
+
+```
+src/
+|-- components/
+|   |-- Header/
+|   |   |-- Header.js
+|   |   |-- Header.css
+|   |-- Footer/
+|   |   |-- Footer.js
+|   |   |-- Footer.css
+|-- services/
+|   |-- apiService.js
+|-- utils/
+|   |-- helpers.js
+|-- App.js
+|-- index.js
+```
+
+### 关注点分离
+
+我通过将代码划分为不同的层来分离关注点：
+
+* **组件**：可重用且自包含的 UI 元素
+* **服务**：处理数据获取和业务逻辑的函数
+* **实用程序**：可在整个应用程序中使用的辅助函数和常量
+
+### 命名约定
+
+我使用一致的命名约定来提高代码可读性：
+
+* **文件和文件夹**：对文件和文件夹名称使用 camelCase 或 kebab-case
+* **组件**：对 React 组件名称使用 PascalCase
+* **变量和函数**：对变量和函数名称使用 camelCase
+
+### 文档
+
+我记录我的代码，以便其他人（和我自己）更容易理解：
+
+* **注释**：添加注释以解释复杂的逻辑或代码的重要部分
+* **README**：包含一个 README 文件，其中包含有关如何设置和运行项目的说明
+
+### 编码标准和最佳实践
+
+我遵守编码标准和最佳实践，以确保代码质量：
+
+* **Linting**: 使用 ESLint 等工具来执行编码标准
+* **Formatting**: 使用 Prettier 等工具来保持一致的代码格式
+* **Testing**: 编写单元测试和集成测试以确保代码可靠性
+
+## 延伸阅读
+
+* [React 文件夹结构](https://reactjs.org/docs/faq-structure.html)
+* [JavaScript 编码标准](https://github.com/airbnb/javascript)
+* [编写干净的代码](https://www.freecodecamp.org/news/writing-clean-code-6a8e2889b9f8/)
+* [有效的 JavaScript 文档](https://jsdoc.app/)
diff --git a/questions/how-do-you-prevent-the-default-behavior-of-an-event/en-US.langnostic.json b/questions/how-do-you-prevent-the-default-behavior-of-an-event/en-US.langnostic.json
new file mode 100644
index 0000000..bcf501c
--- /dev/null
+++ b/questions/how-do-you-prevent-the-default-behavior-of-an-event/en-US.langnostic.json
@@ -0,0 +1,58 @@
+{
+  "frontmatter": {
+    "title": "87fe0485"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "bf104edd",
+        "cf44adc",
+        "7a1cb2be",
+        "2a7816d0",
+        "b03e75f4",
+        "3030837f",
+        "7498deed",
+        "cb221d89",
+        "e2d30460",
+        "575547b5",
+        "92b4d62f",
+        "4d6c4dda",
+        "dabdb934",
+        "fae963f1",
+        "7afed49",
+        "bb5aceeb",
+        "3da76af2",
+        "b967961d",
+        "1f4770e5",
+        "cb8ccacb"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "bf104edd",
+        "cf44adc",
+        "7a1cb2be",
+        "2a7816d0",
+        "b03e75f4",
+        "3030837f",
+        "7498deed",
+        "cb221d89",
+        "e2d30460",
+        "575547b5",
+        "92b4d62f",
+        "4d6c4dda",
+        "dabdb934",
+        "fae963f1",
+        "7afed49",
+        "bb5aceeb",
+        "3da76af2",
+        "b967961d",
+        "1f4770e5",
+        "cb8ccacb"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-prevent-the-default-behavior-of-an-event/zh-CN.mdx b/questions/how-do-you-prevent-the-default-behavior-of-an-event/zh-CN.mdx
new file mode 100644
index 0000000..2598e87
--- /dev/null
+++ b/questions/how-do-you-prevent-the-default-behavior-of-an-event/zh-CN.mdx
@@ -0,0 +1,67 @@
+---
+title: 如何阻止事件的默认行为？
+---
+
+## TL;DR
+
+要在 JavaScript 中阻止事件的默认行为，您可以在事件对象上使用 `preventDefault` 方法。例如，如果您想阻止表单提交，您可以执行以下操作：
+
+```js
+document.querySelector('form').addEventListener('submit', function (event) {
+  event.preventDefault();
+});
+```
+
+此方法会阻止与事件关联的默认操作发生。
+
+***
+
+## 如何阻止事件的默认行为？
+
+### 使用 `preventDefault` 方法
+
+`preventDefault` 方法用于阻止事件的默认操作发生。这在您想要覆盖元素的默认行为（例如，阻止链接导航到新页面或阻止表单提交）的情况下非常有用。
+
+### 示例：阻止表单提交
+
+要阻止表单提交，您可以将事件监听器附加到表单的 `submit` 事件，并在事件处理程序中调用 `preventDefault`：
+
+```js
+document.querySelector('form').addEventListener('submit', function (event) {
+  event.preventDefault();
+  // 额外的代码来处理表单提交
+});
+```
+
+### 示例：阻止链接导航
+
+要阻止链接导航到新页面，您可以将事件监听器附加到链接的 `click` 事件并调用 `preventDefault`：
+
+```js
+document.querySelector('a').addEventListener('click', function (event) {
+  event.preventDefault();
+  // 额外的代码来处理点击事件
+});
+```
+
+### 示例：阻止其他事件中的默认行为
+
+`preventDefault` 方法可以与各种其他事件一起使用，例如 `keydown`、`contextmenu` 等。 这是一个阻止右键单击时出现默认上下文菜单的示例：
+
+```js
+document.addEventListener('contextmenu', function (event) {
+  event.preventDefault();
+  // 额外的代码来处理右键单击事件
+});
+```
+
+### 重要注意事项
+
+* `preventDefault` 方法应在事件处理程序函数中调用。
+* 并非所有事件都具有可以阻止的默认行为。 例如，自定义事件没有默认操作。
+
+## 延伸阅读
+
+* [MDN Web Docs: Event.preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+* [JavaScript.info: Browser default actions](https://javascript.info/default-browser-action)
+* [W3Schools: JavaScript Event preventDefault()](https://www.w3schools.com/jsref/event_preventdefault.asp)
diff --git a/questions/how-do-you-redirect-to-a-new-page-in-javascript/en-US.langnostic.json b/questions/how-do-you-redirect-to-a-new-page-in-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..74c66d8
--- /dev/null
+++ b/questions/how-do-you-redirect-to-a-new-page-in-javascript/en-US.langnostic.json
@@ -0,0 +1,60 @@
+{
+  "frontmatter": {
+    "title": "6c0ed32d"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "a2d090b7",
+        "4ec99f70",
+        "2a7816d0",
+        "8ce9bef2",
+        "74a6daca",
+        "dc3f3967",
+        "f5729471",
+        "27dbb046",
+        "906695df",
+        "a71017d2",
+        "3ddeeef4",
+        "d574d5",
+        "af44266",
+        "fe16b779",
+        "ec1008d2",
+        "d4bec39f",
+        "a82b3d3c",
+        "895f229d",
+        "efb723d",
+        "1f4770e5",
+        "bb0a345a"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "a2d090b7",
+        "4ec99f70",
+        "2a7816d0",
+        "8ce9bef2",
+        "74a6daca",
+        "dc3f3967",
+        "f5729471",
+        "27dbb046",
+        "906695df",
+        "a71017d2",
+        "3ddeeef4",
+        "d574d5",
+        "af44266",
+        "fe16b779",
+        "ec1008d2",
+        "d4bec39f",
+        "a82b3d3c",
+        "895f229d",
+        "efb723d",
+        "1f4770e5",
+        "bb0a345a"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-redirect-to-a-new-page-in-javascript/zh-CN.mdx b/questions/how-do-you-redirect-to-a-new-page-in-javascript/zh-CN.mdx
new file mode 100644
index 0000000..ef73f08
--- /dev/null
+++ b/questions/how-do-you-redirect-to-a-new-page-in-javascript/zh-CN.mdx
@@ -0,0 +1,66 @@
+---
+title: 如何在 JavaScript 中重定向到新页面？
+---
+
+## TL;DR
+
+要在 JavaScript 中重定向到新页面，可以使用 `window.location` 对象。最常用的方法是 `window.location.href` 和 `window.location.replace()`。例如：
+
+```js
+// Using window.location.href
+window.location.href = 'https://www.example.com';
+
+// Using window.location.replace()
+window.location.replace('https://www.example.com');
+```
+
+***
+
+## 如何在 JavaScript 中重定向到新页面？
+
+### 使用 `window.location.href`
+
+`window.location.href` 属性用于获取或设置当前页面的 URL。设置此属性后，浏览器将导航到新的 URL，并将在浏览器的历史记录中创建一个新条目。
+
+```js
+window.location.href = 'https://www.example.com';
+```
+
+### 使用 `window.location.replace()`
+
+`window.location.replace()` 方法类似于 `window.location.href`，但它不会在浏览器的历史记录中创建新条目。这意味着用户无法使用后退按钮返回到原始页面。
+
+```js
+window.location.replace('https://www.example.com');
+```
+
+### 使用 `window.location.assign()`
+
+`window.location.assign()` 方法与 `window.location.href` 类似，并在浏览器的历史记录中创建一个新条目。
+
+```js
+window.location.assign('https://www.example.com');
+```
+
+### 使用 `window.location.reload()`
+
+如果要重新加载当前页面，可以使用 `window.location.reload()` 方法。如果您想刷新页面而不更改 URL，此方法很有用。
+
+```js
+window.location.reload();
+```
+
+### 使用 `window.history.pushState()`
+
+对于更高级的用例，例如单页应用程序 (SPA)，您可以使用 `window.history.pushState()` 方法。此方法允许您更改 URL 而无需重新加载页面。
+
+```js
+window.history.pushState({}, '', '/new-page');
+```
+
+## 延伸阅读
+
+* [MDN Web 文档：Window.location](https://developer.mozilla.org/en-US/docs/Web/API/Window/location)
+* [MDN Web 文档：Window.location.href](https://developer.mozilla.org/en-US/docs/Web/API/Location/href)
+* [MDN Web 文档：Window.location.replace()](https://developer.mozilla.org/en-US/docs/Web/API/Location/replace)
+* [MDN Web 文档：Window.history.pushState()](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState)
diff --git a/questions/how-do-you-reliably-determine-whether-an-object-is-empty/en-US.langnostic.json b/questions/how-do-you-reliably-determine-whether-an-object-is-empty/en-US.langnostic.json
new file mode 100644
index 0000000..f13d08b
--- /dev/null
+++ b/questions/how-do-you-reliably-determine-whether-an-object-is-empty/en-US.langnostic.json
@@ -0,0 +1,58 @@
+{
+  "frontmatter": {
+    "title": "bb4e7bf4"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "e40f8891",
+        "a04c812a",
+        "2a7816d0",
+        "95135f93",
+        "86130dde",
+        "f690abea",
+        "794b5e3a",
+        "ae932cd3",
+        "d3ff3995",
+        "d429a578",
+        "e41d192f",
+        "7406187",
+        "8bcb2a1f",
+        "26aeeb5a",
+        "8e3ac5c",
+        "8699a701",
+        "71a20fff",
+        "2fc4afe",
+        "1f4770e5",
+        "7f7019e3"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "e40f8891",
+        "a04c812a",
+        "2a7816d0",
+        "95135f93",
+        "86130dde",
+        "f690abea",
+        "794b5e3a",
+        "ae932cd3",
+        "d3ff3995",
+        "d429a578",
+        "e41d192f",
+        "7406187",
+        "8bcb2a1f",
+        "26aeeb5a",
+        "8e3ac5c",
+        "8699a701",
+        "71a20fff",
+        "2fc4afe",
+        "1f4770e5",
+        "7f7019e3"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-reliably-determine-whether-an-object-is-empty/zh-CN.mdx b/questions/how-do-you-reliably-determine-whether-an-object-is-empty/zh-CN.mdx
new file mode 100644
index 0000000..426b614
--- /dev/null
+++ b/questions/how-do-you-reliably-determine-whether-an-object-is-empty/zh-CN.mdx
@@ -0,0 +1,96 @@
+---
+title: 如何可靠地确定一个对象是否为空？
+---
+
+## TL;DR
+
+要可靠地确定一个对象是否为空，您可以使用 `Object.keys()` 来检查该对象是否具有任何可枚举的属性。如果 `Object.keys()` 返回的数组的长度为零，则该对象为空。
+
+```js live
+const isEmpty = (obj) => Object.keys(obj).length === 0;
+
+const obj = {};
+console.log(isEmpty(obj)); // true
+```
+
+***
+
+## 如何可靠地确定一个对象是否为空？
+
+### 使用 `Object.keys()`
+
+检查对象是否为空的最常见和可靠的方法是使用 `Object.keys()`。此方法返回一个包含对象自身可枚举属性名称的数组。如果此数组的长度为零，则该对象为空。
+
+```js live
+const isEmpty = (obj) => Object.keys(obj).length === 0;
+
+const obj1 = {};
+const obj2 = { key: 'value' };
+
+console.log(isEmpty(obj1)); // true
+console.log(isEmpty(obj2)); // false
+```
+
+### 使用 `Object.entries()`
+
+另一种方法是使用 `Object.entries()`，它返回一个包含对象自身可枚举属性 `[key, value]` 对的数组。如果此数组的长度为零，则该对象为空。
+
+```js live
+const isEmpty = (obj) => Object.entries(obj).length === 0;
+
+const obj1 = {};
+const obj2 = { key: 'value' };
+
+console.log(isEmpty(obj1)); // true
+console.log(isEmpty(obj2)); // false
+```
+
+### 使用 `Object.values()`
+
+同样，您可以使用 `Object.values()`，它返回一个包含对象自身可枚举属性值的数组。如果此数组的长度为零，则该对象为空。
+
+```js live
+const isEmpty = (obj) => Object.values(obj).length === 0;
+
+const obj1 = {};
+const obj2 = { key: 'value' };
+
+console.log(isEmpty(obj1)); // true
+console.log(isEmpty(obj2)); // false
+```
+
+### 使用 `for...in` 循环
+
+您还可以使用 `for...in` 循环来检查对象是否具有任何属性。如果循环没有遍历任何属性，则该对象为空。
+
+```js live
+const isEmpty = (obj) => {
+  for (let key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      return false;
+    }
+  }
+  return true;
+};
+
+const obj1 = {};
+const obj2 = { key: 'value' };
+const childObj = Object.create(obj2); // Inherit from obj2
+
+console.log(isEmpty(obj1)); // true
+console.log(isEmpty(obj2)); // false
+console.log(isEmpty(childObj)); // true (has no own properties)
+console.log(childObj.key); // Output: 'value' (still has the inherited property)
+```
+
+### 边缘情况
+
+* **原型属性**：上述方法仅检查对象自身的属性，而不是从其原型继承的属性。
+* **不可枚举属性**：这些方法不考虑不可枚举属性。
+
+## 延伸阅读
+
+* [MDN Web 文档：Object.keys()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)
+* [MDN Web 文档：Object.entries()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)
+* [MDN Web 文档：Object.values()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/values)
+* [MDN Web 文档：for...in](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in)
diff --git a/questions/how-do-you-use-windowhistory-api/en-US.langnostic.json b/questions/how-do-you-use-windowhistory-api/en-US.langnostic.json
new file mode 100644
index 0000000..7914eb9
--- /dev/null
+++ b/questions/how-do-you-use-windowhistory-api/en-US.langnostic.json
@@ -0,0 +1,72 @@
+{
+  "frontmatter": {
+    "title": "89e8be16"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "3de58dbe",
+        "2a7816d0",
+        "e4a7c86e",
+        "b4ce6522",
+        "fb0a4c07",
+        "3f17f66a",
+        "762a5af5",
+        "dfe52398",
+        "15b43d11",
+        "a89ccc61",
+        "bdc0a8a8",
+        "9eb64cc4",
+        "6e4399ea",
+        "7f8c9480",
+        "25f535d4",
+        "4fc778c7",
+        "cbb4a303",
+        "3a662b33",
+        "afa05dad",
+        "c41f0511",
+        "66836483",
+        "34606c68",
+        "9b5019f0",
+        "c856260e",
+        "302cc985",
+        "1f4770e5",
+        "ddc4e63b"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "3de58dbe",
+        "2a7816d0",
+        "e4a7c86e",
+        "b4ce6522",
+        "fb0a4c07",
+        "3f17f66a",
+        "762a5af5",
+        "dfe52398",
+        "15b43d11",
+        "a89ccc61",
+        "bdc0a8a8",
+        "9eb64cc4",
+        "6e4399ea",
+        "7f8c9480",
+        "25f535d4",
+        "4fc778c7",
+        "cbb4a303",
+        "3a662b33",
+        "afa05dad",
+        "c41f0511",
+        "66836483",
+        "34606c68",
+        "9b5019f0",
+        "c856260e",
+        "302cc985",
+        "1f4770e5",
+        "ddc4e63b"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-use-windowhistory-api/zh-CN.mdx b/questions/how-do-you-use-windowhistory-api/zh-CN.mdx
new file mode 100644
index 0000000..081ba1c
--- /dev/null
+++ b/questions/how-do-you-use-windowhistory-api/zh-CN.mdx
@@ -0,0 +1,117 @@
+---
+title: 如何使用 `window.history` API？
+---
+
+## TL;DR
+
+通过 `window.history` API，您可以操作浏览器的会话历史记录。您可以使用 `history.pushState()` 向历史堆栈添加新条目，使用 `history.replaceState()` 修改当前条目，以及使用 `history.back()`、`history.forward()` 和 `history.go()` 在历史记录中导航。例如，`history.pushState({page: 1}, "title 1", "?page=1")` 向历史记录添加一个新条目。
+
+***
+
+## 使用 `window.history` API
+
+`window.history` API 提供了与浏览器历史堆栈交互的方法。这对于单页应用程序 (SPA) 很有用，您希望管理 URL 和浏览器历史记录，而无需导致完全页面重新加载。
+
+### 方法
+
+#### `history.pushState()`
+
+此方法向历史堆栈添加一个新条目。
+
+```js
+history.pushState({ page: 1 }, 'title 1', '?page=1');
+```
+
+* 第一个参数是与新历史记录条目关联的状态对象。
+* 第二个参数是新历史记录条目的标题（目前大多数浏览器都忽略）。
+* 第三个参数是要显示在地址栏中的 URL。
+
+#### `history.replaceState()`
+
+此方法修改当前历史记录条目。
+
+```js
+history.replaceState({ page: 2 }, 'title 2', '?page=2');
+```
+
+* 参数与 `pushState()` 相同，但此方法替换当前条目，而不是添加新条目。
+
+#### `history.back()`
+
+此方法将用户在历史堆栈中后退一个条目，类似于单击浏览器的后退按钮。
+
+```js
+history.back();
+```
+
+#### `history.forward()`
+
+此方法使用户在历史堆栈中向前移动一个条目，类似于单击浏览器的前进按钮。
+
+```js
+history.forward();
+```
+
+#### `history.go()`
+
+此方法将用户在历史堆栈中移动指定的条目数。
+
+```js
+// Move back one entry
+history.go(-1);
+
+// Move forward one entry
+history.go(1);
+
+// Reload the current page
+history.go(0);
+```
+
+### 示例
+
+这是一个简单的示例，演示了 `pushState` 和 `replaceState` 的用法：
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>History API Example</title>
+  </head>
+  <body>
+    <button id="pushStateBtn">Push State</button>
+    <button id="replaceStateBtn">Replace State</button>
+    <button id="backBtn">Back</button>
+    <button id="forwardBtn">Forward</button>
+
+    <script>
+      document.getElementById('pushStateBtn').addEventListener('click', () => {
+        history.pushState({ page: 1 }, 'title 1', '?page=1');
+      });
+
+      document
+        .getElementById('replaceStateBtn')
+        .addEventListener('click', () => {
+          history.replaceState({ page: 2 }, 'title 2', '?page=2');
+        });
+
+      document.getElementById('backBtn').addEventListener('click', () => {
+        history.back();
+      });
+
+      document.getElementById('forwardBtn').addEventListener('click', () => {
+        history.forward();
+      });
+    </script>
+  </body>
+</html>
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)
+* [MDN Web Docs: `history.pushState()`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState)
+* [MDN Web Docs: `history.replaceState()`](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState)
+* [MDN Web Docs: `history.back()`](https://developer.mozilla.org/en-US/docs/Web/API/History/back)
+* [MDN Web Docs: `history.forward()`](https://developer.mozilla.org/en-US/docs/Web/API/History/forward)
+* [MDN Web Docs: `history.go()`](https://developer.mozilla.org/en-US/docs/Web/API/History/go)
diff --git a/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.langnostic.json b/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.langnostic.json
new file mode 100644
index 0000000..ee3a6f8
--- /dev/null
+++ b/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.langnostic.json
@@ -0,0 +1,74 @@
+{
+  "frontmatter": {
+    "title": "90486b0f"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "fbe2f2d5",
+        "2f04741c",
+        "2a7816d0",
+        "46083c74",
+        "83283a80",
+        "4a30a441",
+        "2c608d7b",
+        "6e5ba15f",
+        "a829ec7e",
+        "ff214208",
+        "6fd0665e",
+        "c0fbbc9a",
+        "ad893d15",
+        "a6c3196d",
+        "f24f07f8",
+        "ee0689eb",
+        "628b458c",
+        "d34b4358",
+        "cfce609c",
+        "2748d196",
+        "34237970",
+        "4f338cf9",
+        "9b5019f0",
+        "19646f73",
+        "fb469bef",
+        "1bf2c887",
+        "1f4770e5",
+        "616d6c3d"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "fbe2f2d5",
+        "2f04741c",
+        "2a7816d0",
+        "46083c74",
+        "83283a80",
+        "4a30a441",
+        "2c608d7b",
+        "6e5ba15f",
+        "a829ec7e",
+        "ff214208",
+        "6fd0665e",
+        "c0fbbc9a",
+        "ad893d15",
+        "a6c3196d",
+        "f24f07f8",
+        "ee0689eb",
+        "628b458c",
+        "d34b4358",
+        "cfce609c",
+        "2748d196",
+        "34237970",
+        "4f338cf9",
+        "9b5019f0",
+        "19646f73",
+        "fb469bef",
+        "1bf2c887",
+        "1f4770e5",
+        "616d6c3d"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/zh-CN.mdx b/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/zh-CN.mdx
new file mode 100644
index 0000000..6edb9f9
--- /dev/null
+++ b/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/zh-CN.mdx
@@ -0,0 +1,116 @@
+---
+title: 如何使用约束验证 API 验证表单元素？
+---
+
+## TL;DR
+
+约束验证 API 提供了一种验证 HTML 表单元素的方法。您可以使用 `validity`、`validationMessage` 等属性以及 `checkValidity()` 和 `setCustomValidity()` 等方法。例如，要检查输入是否有效，您可以使用：
+
+```js
+const input = document.querySelector('input');
+if (input.checkValidity()) {
+  console.log('Input is valid');
+} else {
+  console.log(input.validationMessage);
+}
+```
+
+***
+
+## 如何使用约束验证 API 验证表单元素？
+
+### 简介
+
+约束验证 API 是一组在表单元素上可用的方法和属性，允许您执行验证检查并向用户提供反馈。此 API 内置于 HTML5 中，提供了一种验证表单输入的方法，而无需编写自定义 JavaScript 验证逻辑。
+
+### 关键属性和方法
+
+#### `checkValidity()`
+
+`checkValidity()` 方法检查元素是否满足其所有验证约束。如果元素有效，则返回 `true`，否则返回 `false`。
+
+```js
+const input = document.querySelector('input');
+if (input.checkValidity()) {
+  console.log('Input is valid');
+} else {
+  console.log('Input is invalid');
+}
+```
+
+#### `reportValidity()`
+
+`reportValidity()` 方法的工作方式与 `checkValidity()` 类似，但如果元素无效，它还会显示浏览器的默认验证消息。
+
+```js
+const input = document.querySelector('input');
+if (!input.reportValidity()) {
+  console.log('Input is invalid');
+}
+```
+
+#### `setCustomValidity()`
+
+`setCustomValidity()` 方法允许您设置自定义验证消息。如果设置了自定义消息，则该元素将被视为无效。
+
+```js
+const input = document.querySelector('input');
+input.setCustomValidity('This field is required');
+if (!input.checkValidity()) {
+  console.log(input.validationMessage); // Outputs: This field is required
+}
+```
+
+#### `validity`
+
+`validity` 属性是一个对象，包含几个布尔属性，指示元素的有效性状态，例如 `valid`、`valueMissing`、`typeMismatch` 等。
+
+```js
+const input = document.querySelector('input');
+if (input.validity.valueMissing) {
+  console.log('Value is missing');
+}
+```
+
+#### `validationMessage`
+
+如果元素无效，`validationMessage` 属性将返回将向用户显示的消息。
+
+```js
+const input = document.querySelector('input');
+if (!input.checkValidity()) {
+  console.log(input.validationMessage);
+}
+```
+
+### 示例
+
+这是一个完整的示例，演示了如何使用约束验证 API 来验证表单：
+
+```html
+<form id="myForm">
+  <input type="text" id="username" required />
+  <input type="submit" value="Submit" />
+</form>
+
+<script>
+  const form = document.getElementById('myForm');
+  const username = document.getElementById('username');
+
+  form.addEventListener('submit', function (event) {
+    if (!username.checkValidity()) {
+      username.setCustomValidity('Username is required');
+      username.reportValidity();
+      event.preventDefault();
+    } else {
+      username.setCustomValidity(''); // Clear custom message
+    }
+  });
+</script>
+```
+
+在此示例中，如果 `username` 输入为空，则表单将不会提交，并且将显示自定义验证消息。
+
+## 延伸阅读
+
+* [MDN Web Docs: HTMLFormElement.setCustomValidity()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/setCustomValidity)
diff --git a/questions/how-do-you-write-unit-tests-for-javascript-code/en-US.langnostic.json b/questions/how-do-you-write-unit-tests-for-javascript-code/en-US.langnostic.json
new file mode 100644
index 0000000..94357b5
--- /dev/null
+++ b/questions/how-do-you-write-unit-tests-for-javascript-code/en-US.langnostic.json
@@ -0,0 +1,76 @@
+{
+  "frontmatter": {
+    "title": "94296de"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "5e12438a",
+        "8e4dcc86",
+        "8657052e",
+        "2a7816d0",
+        "f5a328f2",
+        "b2393455",
+        "56954944",
+        "2127f802",
+        "68c024d8",
+        "cd660751",
+        "a20311c6",
+        "63e91f35",
+        "ae1ce134",
+        "3f8f7a1d",
+        "e76b9a8",
+        "4036dd21",
+        "5bdb4be7",
+        "276d81b8",
+        "e76b9a8",
+        "ca741ea3",
+        "80dfc734",
+        "12cec0e7",
+        "e76b9a8",
+        "ebc5f58a",
+        "bd14ebd5",
+        "cbbe1b76",
+        "55afeaa7",
+        "1f4770e5",
+        "1b7e90d8"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "5e12438a",
+        "8e4dcc86",
+        "8657052e",
+        "2a7816d0",
+        "f5a328f2",
+        "b2393455",
+        "56954944",
+        "2127f802",
+        "68c024d8",
+        "cd660751",
+        "a20311c6",
+        "63e91f35",
+        "ae1ce134",
+        "3f8f7a1d",
+        "e76b9a8",
+        "4036dd21",
+        "5bdb4be7",
+        "276d81b8",
+        "e76b9a8",
+        "ca741ea3",
+        "80dfc734",
+        "12cec0e7",
+        "e76b9a8",
+        "ebc5f58a",
+        "bd14ebd5",
+        "cbbe1b76",
+        "55afeaa7",
+        "1f4770e5",
+        "1b7e90d8"
+      ]
+    }
+  }
+}
diff --git a/questions/how-do-you-write-unit-tests-for-javascript-code/zh-CN.mdx b/questions/how-do-you-write-unit-tests-for-javascript-code/zh-CN.mdx
new file mode 100644
index 0000000..ed86a6e
--- /dev/null
+++ b/questions/how-do-you-write-unit-tests-for-javascript-code/zh-CN.mdx
@@ -0,0 +1,139 @@
+---
+title: 如何为 JavaScript 代码编写单元测试？
+---
+
+## 总结
+
+要为 JavaScript 代码编写单元测试，您通常使用 Jest 或 Mocha 等测试框架。首先，您通过安装必要的库来设置测试环境。然后，您使用 `describe`、`it` 或 `test` 等函数编写测试用例来定义您的测试。每个测试用例都应侧重于一小段孤立的功能。您使用断言来检查代码的输出是否与预期结果匹配。
+
+使用 Jest 的示例：
+
+```js
+// sum.js
+function sum(a, b) {
+  return a + b;
+}
+module.exports = sum;
+
+// sum.test.js
+const sum = require('./sum');
+
+test('adds 1 + 2 to equal 3', () => {
+  expect(sum(1, 2)).toBe(3);
+});
+```
+
+***
+
+## 设置测试环境
+
+### 安装 Jest
+
+要开始使用 Jest，您需要通过 npm 安装它：
+
+```bash
+npm install --save-dev jest
+```
+
+### 配置 Jest
+
+将脚本添加到您的 `package.json` 以运行 Jest：
+
+```json
+{
+  "scripts": {
+    "test": "jest"
+  }
+}
+```
+
+## 编写测试用例
+
+### 基本结构
+
+测试文件通常包含一个或多个 `describe` 块（用于分组相关测试）和 `it` 或 `test` 块（用于定义单个测试用例）。
+
+示例：
+
+```js
+// sum.js
+function sum(a, b) {
+  return a + b;
+}
+module.exports = sum;
+
+// sum.test.js
+const sum = require('./sum');
+
+describe('sum function', () => {
+  test('adds 1 + 2 to equal 3', () => {
+    expect(sum(1, 2)).toBe(3);
+  });
+
+  test('adds -1 + 1 to equal 0', () => {
+    expect(sum(-1, 1)).toBe(0);
+  });
+});
+```
+
+### 使用断言
+
+断言用于检查代码的输出是否与预期结果匹配。Jest 提供了各种断言方法，如 `toBe`、`toEqual`、`toBeNull` 等。
+
+示例：
+
+```js
+test('object assignment', () => {
+  const data = { one: 1 };
+  data['two'] = 2;
+  expect(data).toEqual({ one: 1, two: 2 });
+});
+```
+
+## 模拟依赖项
+
+有时，您需要模拟依赖项以隔离您正在测试的代码单元。 Jest 提供了 `jest.fn()` 和 `jest.mock()` 等功能来实现此目的。
+
+示例：
+
+```js
+// fetchData.js
+const fetch = require('node-fetch');
+
+async function fetchData(url) {
+  const response = await fetch(url);
+  return response.json();
+}
+module.exports = fetchData;
+
+// fetchData.test.js
+const fetchData = require('./fetchData');
+const fetch = require('node-fetch');
+
+jest.mock('node-fetch');
+
+test('fetches data from API', async () => {
+  const mockResponse = { data: '12345' };
+  fetch.mockResolvedValueOnce({
+    json: async () => mockResponse,
+  });
+
+  const data = await fetchData('https://api.example.com/data');
+  expect(data).toEqual(mockResponse);
+});
+```
+
+## 运行测试
+
+要运行测试，请使用以下命令：
+
+```bash
+npm test
+```
+
+## 延伸阅读
+
+* [Jest 文档](https://jestjs.io/docs/getting-started)
+* [Mocha 文档](https://mochajs.org/)
+* [Chai 文档](https://www.chaijs.com/)
+* [Sinon 文档](https://sinonjs.org/)
diff --git a/questions/how-does-hoisting-affect-function-declarations-and-expressions/en-US.langnostic.json b/questions/how-does-hoisting-affect-function-declarations-and-expressions/en-US.langnostic.json
new file mode 100644
index 0000000..3ef5195
--- /dev/null
+++ b/questions/how-does-hoisting-affect-function-declarations-and-expressions/en-US.langnostic.json
@@ -0,0 +1,54 @@
+{
+  "frontmatter": {
+    "title": "1854114a"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "4b74c10c",
+        "98329d24",
+        "2a7816d0",
+        "544e6254",
+        "85382bd2",
+        "35cda8a0",
+        "701273a8",
+        "474bac8d",
+        "7dbb6573",
+        "c071fe6a",
+        "418e386e",
+        "4ed83929",
+        "97dedb35",
+        "1bc385b3",
+        "d1c335e0",
+        "20bdd608",
+        "1f4770e5",
+        "e5beba1e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "4b74c10c",
+        "98329d24",
+        "2a7816d0",
+        "544e6254",
+        "85382bd2",
+        "35cda8a0",
+        "701273a8",
+        "474bac8d",
+        "7dbb6573",
+        "c071fe6a",
+        "418e386e",
+        "4ed83929",
+        "97dedb35",
+        "1bc385b3",
+        "d1c335e0",
+        "20bdd608",
+        "1f4770e5",
+        "e5beba1e"
+      ]
+    }
+  }
+}
diff --git a/questions/how-does-hoisting-affect-function-declarations-and-expressions/zh-CN.mdx b/questions/how-does-hoisting-affect-function-declarations-and-expressions/zh-CN.mdx
new file mode 100644
index 0000000..582e805
--- /dev/null
+++ b/questions/how-does-hoisting-affect-function-declarations-and-expressions/zh-CN.mdx
@@ -0,0 +1,82 @@
+---
+title: Hoisting 如何影响函数声明和表达式？
+---
+
+## TL;DR
+
+JavaScript 中的 Hoisting 意味着函数声明在编译阶段被移动到其包含作用域的顶部，使其在整个作用域中可用。这允许您在代码中定义函数之前调用它。但是，函数表达式不会以相同的方式被 Hoisting。如果您尝试在定义函数表达式之前调用它，您将收到一个错误，因为保存函数的变量被 Hoisting，但其赋值没有被 Hoisting。
+
+```js live
+// Function declaration
+console.log(foo()); // Works fine
+function foo() {
+  return 'Hello';
+}
+
+// Function expression
+console.log(bar()); // Throws TypeError: bar is not a function
+var bar = function () {
+  return 'Hello';
+};
+```
+
+***
+
+## JavaScript 中的 Hoisting
+
+### 函数声明
+
+函数声明被 Hoisting 到其包含作用域的顶部。这意味着您可以在代码中定义函数之前调用该函数。
+
+```js live
+console.log(foo()); // Works fine
+function foo() {
+  return 'Hello';
+}
+```
+
+在上面的例子中，函数 `foo` 被 Hoisting 到其作用域的顶部，因此在定义之前调用 `foo()` 可以正常工作，没有任何问题。
+
+### 函数表达式
+
+另一方面，函数表达式不会以相同的方式被 Hoisting。保存函数的变量被 Hoisting，但其赋值没有被 Hoisting。这意味着如果您尝试在定义函数表达式之前调用它，您将收到一个错误。
+
+```js live
+console.log(bar()); // Throws TypeError: bar is not a function
+var bar = function () {
+  return 'Hello';
+};
+```
+
+在这个例子中，变量 `bar` 被 Hoisting 到其作用域的顶部，但赋值 `function() { return 'Hello'; }` 没有被 Hoisting。因此，在赋值之前调用 `bar()` 会导致 `TypeError`。
+
+### `var`、`let` 和 `const` 之间的区别
+
+在使用函数表达式时，注意 `var`、`let` 和 `const` 之间的 Hoisting 行为差异也很重要。
+
+* `var`：变量被 Hoisting 并使用 `undefined` 初始化。
+* `let` 和 `const`：变量被 Hoisting 但未初始化，如果在初始化之前访问，则会导致 `ReferenceError`。
+
+```js live
+console.log(baz); // undefined
+var baz = function () {
+  return 'Hello';
+};
+
+console.log(qux); // ReferenceError: Cannot access 'qux' before initialization
+let qux = function () {
+  return 'Hello';
+};
+
+console.log(quux); // ReferenceError: Cannot access 'quux' before initialization
+const quux = function () {
+  return 'Hello';
+};
+```
+
+## 延伸阅读
+
+* [MDN Web Docs on Hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
+* [JavaScript.info on Hoisting](https://javascript.info/var#var-hoisting)
+* [MDN Web Docs on Function Declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function)
+* [MDN Web Docs on Function Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function)
diff --git a/questions/how-does-javascript-garbage-collection-work/en-US.langnostic.json b/questions/how-does-javascript-garbage-collection-work/en-US.langnostic.json
new file mode 100644
index 0000000..5ffba37
--- /dev/null
+++ b/questions/how-does-javascript-garbage-collection-work/en-US.langnostic.json
@@ -0,0 +1,78 @@
+{
+  "frontmatter": {
+    "title": "735e9fc7"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "8d1749ee",
+        "44dd65df",
+        "e78c464",
+        "c2a87a44",
+        "6647873d",
+        "9480ed6",
+        "5229a444",
+        "eed5a7cb",
+        "2a7816d0",
+        "f2a2fae9",
+        "9cfccc60",
+        "18ec17a7",
+        "f0a51af9",
+        "bc54dce1",
+        "e1b5cb38",
+        "b7994e6b",
+        "9d15fa8d",
+        "e7b1f46b",
+        "6b187e30",
+        "bb85613f",
+        "b1fe1532",
+        "658d51a2",
+        "ad0dfb4f",
+        "ff9b461",
+        "1053d7b1",
+        "46560b3d",
+        "323764f2",
+        "6a446a16",
+        "1f4770e5",
+        "f992ea36"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "8d1749ee",
+        "44dd65df",
+        "e78c464",
+        "c2a87a44",
+        "6647873d",
+        "9480ed6",
+        "5229a444",
+        "eed5a7cb",
+        "2a7816d0",
+        "f2a2fae9",
+        "9cfccc60",
+        "18ec17a7",
+        "f0a51af9",
+        "bc54dce1",
+        "e1b5cb38",
+        "b7994e6b",
+        "9d15fa8d",
+        "e7b1f46b",
+        "6b187e30",
+        "bb85613f",
+        "b1fe1532",
+        "658d51a2",
+        "ad0dfb4f",
+        "ff9b461",
+        "1053d7b1",
+        "46560b3d",
+        "323764f2",
+        "6a446a16",
+        "1f4770e5",
+        "f992ea36"
+      ]
+    }
+  }
+}
diff --git a/questions/how-does-javascript-garbage-collection-work/zh-CN.mdx b/questions/how-does-javascript-garbage-collection-work/zh-CN.mdx
new file mode 100644
index 0000000..70fda7e
--- /dev/null
+++ b/questions/how-does-javascript-garbage-collection-work/zh-CN.mdx
@@ -0,0 +1,93 @@
+---
+title: JavaScript 垃圾回收机制是如何工作的？
+---
+
+## TL;DR
+
+JavaScript 中的垃圾回收是一种自动内存管理机制，用于回收程序不再使用的对象和变量所占用的内存。两种最常见的算法是标记-清除和分代垃圾回收。
+
+**标记-清除**
+
+JavaScript 中使用最常见的垃圾回收算法是标记-清除算法。它分两个阶段运行：
+
+* **标记阶段**：垃圾回收器遍历对象图，从根对象（全局变量、当前执行的函数等）开始，将所有可访问的对象标记为“在使用中”。
+* **清除阶段**：垃圾回收器扫描内存，删除所有未标记的对象，因为它们被认为不可访问且不再需要。
+
+该算法有效地识别并删除已变得不可访问的对象，从而为新的分配释放内存。
+
+**分代垃圾回收**
+
+现代 JavaScript 引擎利用了这一点，对象根据其年龄和使用模式被划分为不同的代。经常访问的对象被移动到年轻代，而较少使用的对象被提升到老年代。这种优化通过专注于年轻代（大多数对象寿命短）来减少垃圾回收的开销。
+
+不同的 JavaScript 引擎（根据浏览器而异）实现不同的垃圾回收算法，并且没有标准的垃圾回收方式。
+
+***
+
+## JavaScript 中的垃圾回收
+
+JavaScript 中的垃圾回收是由 JavaScript 引擎管理的自动过程，旨在回收不再需要的对象所占用的内存。这有助于防止内存泄漏并优化可用内存的使用。以下是 JavaScript 中垃圾回收工作原理的概述：
+
+### 内存管理基础
+
+JavaScript 在创建对象、数组和其他变量时为其分配内存。随着时间的推移，其中一些对象变得不可访问，因为没有对它们的引用。垃圾回收是识别这些不可访问的对象并回收其内存的过程。
+
+### 可达性
+
+JavaScript 垃圾回收中的主要概念是可达性。如果一个对象可以通过某种方式访问或到达，则认为它是可达的：
+
+* **全局变量**：全局变量引用的对象始终是可达的。
+* **局部变量和函数参数**：只要函数正在执行，这些对象就是可达的。
+* **闭包变量**：如果闭包是可达的，则闭包引用的对象是可达的。
+* **DOM 和其他系统根**：DOM 或其他宿主对象引用的对象。
+
+如果从根到对象存在引用链，则该对象被认为是可达的。
+
+### 垃圾回收算法
+
+1. **标记和清除**：
+   * **标记阶段**：垃圾收集器从根对象开始，标记所有可访问的对象。
+   * **清除阶段**：然后扫描内存，查找未被标记的对象，并回收它们的内存。
+2. **引用计数**：
+   * 此算法保留对每个对象的引用计数。当对象的引用计数降为零时，它被认为不可访问，可以被收集。
+   * 引用计数的缺点是它不能很好地处理循环引用（例如，两个对象相互引用，但没有被任何其他对象引用）。
+3. **分代垃圾回收**：
+   * 内存被划分为几代：年轻代和老年代。
+   * 对象最初分配在年轻代中。
+   * 存活了多次收集的对象被提升到老年代。
+   * 年轻代收集更频繁且更快，而老年代收集不太频繁，但涵盖更多对象。
+
+### JavaScript 引擎实现
+
+不同的 JavaScript 引擎使用这些算法的变体：
+
+* **V8 (Google Chrome, Node.js)**：使用分代、标记和清除以及其他优化来高效地进行垃圾回收。
+* **SpiderMonkey (Mozilla Firefox)**：使用增量和分代垃圾回收。
+* **JavaScriptCore (Safari)**：使用带有分代收集的标记和清除算法。
+
+### 内存泄漏
+
+当程序未能释放它不再需要的内存时，JavaScript 中就会发生内存泄漏，导致程序随着时间的推移消耗越来越多的内存。
+
+JavaScript 中的内存泄漏可能由于各种原因而发生，包括：
+
+* **意外的全局变量**：无意中创建全局变量，即使不再需要它们，这些变量仍然保留在内存中。
+* **闭包**：不正确地使用闭包，其中内部函数保留对来自外部函数作用域的变量的引用，阻止外部函数的作用域被垃圾回收。
+* **事件监听器**：当不再需要事件监听器或回调时，未能删除它们，导致相关对象保留在内存中。
+* **缓存**：实现缓存时没有适当的逐出逻辑，导致随着时间的推移内存无界增长。
+* **分离的 DOM 节点引用**：保留对分离的 DOM 节点的引用，阻止它们被垃圾回收。
+* **被遗忘的计时器或回调**：未能清除计时器或回调，导致它们的相关数据保留在内存中。
+
+为了避免内存泄漏：
+
+* **删除事件监听器**：当不再需要事件监听器时，始终删除它们。
+* **清除闭包中的引用**：避免在闭包中保留不必要的引用。
+* **管理 DOM 引用**：当不再需要 DOM 节点及其引用时，显式删除它们。
+* **避免全局变量**：尽量减少全局变量的使用，以降低无意中保持引用存活的风险。
+
+## 延伸阅读
+
+* [垃圾回收 - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection)
+* [内存管理](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_management)
+* [了解 JavaScript 中的内存管理和垃圾回收](https://www.linkedin.com/pulse/understanding-memory-management-garbage-collection-aayush-patniya)
+* [JavaScript 内存管理：JavaScript 中垃圾回收的综合指南](https://www.calibraint.com/blog/garbage-collection-in-javascript)
+* [垃圾回收 - javascript.info](https://javascript.info/garbage-collection)
diff --git a/questions/how-is-promiseall-different-from-promiseallsettled/en-US.langnostic.json b/questions/how-is-promiseall-different-from-promiseallsettled/en-US.langnostic.json
new file mode 100644
index 0000000..5b9172d
--- /dev/null
+++ b/questions/how-is-promiseall-different-from-promiseallsettled/en-US.langnostic.json
@@ -0,0 +1,60 @@
+{
+  "frontmatter": {
+    "title": "319260d3"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "5ba8509b",
+        "2a7816d0",
+        "4127c26d",
+        "af87d03a",
+        "d87546bb",
+        "748ffe75",
+        "81572b5b",
+        "9ba2ed32",
+        "b994d932",
+        "a5a4bb9f",
+        "e09c448",
+        "d11e620b",
+        "39160a6e",
+        "748ffe75",
+        "3fa9f5c4",
+        "695d3549",
+        "b994d932",
+        "31150e98",
+        "da9329f",
+        "1f4770e5",
+        "76963f99"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "5ba8509b",
+        "2a7816d0",
+        "4127c26d",
+        "af87d03a",
+        "d87546bb",
+        "748ffe75",
+        "81572b5b",
+        "9ba2ed32",
+        "b994d932",
+        "a5a4bb9f",
+        "e09c448",
+        "d11e620b",
+        "39160a6e",
+        "748ffe75",
+        "3fa9f5c4",
+        "695d3549",
+        "b994d932",
+        "31150e98",
+        "da9329f",
+        "1f4770e5",
+        "76963f99"
+      ]
+    }
+  }
+}
diff --git a/questions/how-is-promiseall-different-from-promiseallsettled/zh-CN.mdx b/questions/how-is-promiseall-different-from-promiseallsettled/zh-CN.mdx
new file mode 100644
index 0000000..be7d7bc
--- /dev/null
+++ b/questions/how-is-promiseall-different-from-promiseallsettled/zh-CN.mdx
@@ -0,0 +1,103 @@
+---
+title: Promise.all() 与 Promise.allSettled() 有什么区别？
+---
+
+## TL;DR
+
+Promise.all() 和 Promise.allSettled() 都是用于处理 JavaScript 中多个 Promise 的方法，但它们的行为有所不同。Promise.all() 等待所有 Promise 都被解决，如果任何一个 Promise 被拒绝，它会快速失败，返回一个被拒绝的 Promise。另一方面，Promise.allSettled() 等待所有 Promise 都被确定（解决或拒绝），并返回一个描述每个 Promise 结果的对象数组。
+
+***
+
+## Promise.all() 与 Promise.allSettled() 有什么区别？
+
+### Promise.all()
+
+Promise.all() 接受一个可迭代的 Promise，并返回一个 Promise，当所有输入的 Promise 都已解决时，该 Promise 将被解决。如果任何一个输入的 Promise 被拒绝，则返回的 Promise 会立即被拒绝，并带有第一个被拒绝的 Promise 的原因。
+
+#### 示例
+
+```js live
+const promise1 = Promise.resolve(3);
+const promise2 = 42;
+const promise3 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 100, 'foo');
+});
+
+Promise.all([promise1, promise2, promise3])
+  .then((values) => {
+    console.log(values); // [3, 42, 'foo']
+  })
+  .catch((error) => {
+    console.error(error);
+  });
+```
+
+在此示例中，Promise.all() 使用结果数组 `[3, 42, 'foo']` 进行解析，因为所有 Promise 都成功解析。
+
+#### 失败情况
+
+```js live
+const promise1 = Promise.resolve(3);
+const promise2 = Promise.reject('error');
+const promise3 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 100, 'foo');
+});
+
+Promise.all([promise1, promise2, promise3])
+  .then((values) => {
+    console.log(values);
+  })
+  .catch((error) => {
+    console.error(error); // 'error'
+  });
+```
+
+在此示例中，Promise.all() 立即拒绝，原因是 `'error'`，因为 `promise2` 被拒绝。
+
+### Promise.allSettled()
+
+Promise.allSettled() 接受一个可迭代的 Promise，并返回一个 Promise，当所有输入的 Promise 都已确定（已解决或已拒绝）时，该 Promise 将被解决。返回的 Promise 使用一个对象数组进行解析，每个对象描述每个 Promise 的结果。
+
+#### 示例
+
+```js live
+const promise1 = Promise.resolve(3);
+const promise2 = 42;
+const promise3 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 100, 'foo');
+});
+
+Promise.allSettled([promise1, promise2, promise3]).then((results) => {
+  results.forEach((result) => console.log(result));
+  // { status: 'fulfilled', value: 3 }
+  // { status: 'fulfilled', value: 42 }
+  // { status: 'fulfilled', value: 'foo' }
+});
+```
+
+在此示例中，Promise.allSettled() 使用结果对象数组进行解析，每个对象指示 Promise 的状态和值。
+
+#### 失败情况
+
+```js live
+const promise1 = Promise.resolve(3);
+const promise2 = Promise.reject('error');
+const promise3 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 100, 'foo');
+});
+
+Promise.allSettled([promise1, promise2, promise3]).then((results) => {
+  results.forEach((result) => console.log(result));
+  // { status: 'fulfilled', value: 3 }
+  // { status: 'rejected', reason: 'error' }
+  // { status: 'fulfilled', value: 'foo' }
+});
+```
+
+在此示例中，Promise.allSettled() 使用结果对象数组进行解析，包括被拒绝的 Promise 及其原因。
+
+## 延伸阅读
+
+* [MDN Web 文档：Promise.all()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)
+* [MDN Web 文档：Promise.allSettled()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled)
+* [JavaScript.info：Promise API](https://zh.javascript.info/promise-api)
diff --git a/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.langnostic.json b/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.langnostic.json
new file mode 100644
index 0000000..ef157af
--- /dev/null
+++ b/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "47d101a3"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "d4e3c085",
+        "ce69f685",
+        "db49f614",
+        "6e03c893",
+        "43645c83",
+        "2a7816d0",
+        "aba50af",
+        "1743fc64",
+        "dd75fb51",
+        "748ffe75",
+        "51a33446",
+        "5fd903ca",
+        "7caa40d3",
+        "748ffe75",
+        "cdda9b48",
+        "1f4770e5",
+        "a2a09611"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "d4e3c085",
+        "ce69f685",
+        "db49f614",
+        "6e03c893",
+        "43645c83",
+        "2a7816d0",
+        "aba50af",
+        "1743fc64",
+        "dd75fb51",
+        "748ffe75",
+        "51a33446",
+        "5fd903ca",
+        "7caa40d3",
+        "748ffe75",
+        "cdda9b48",
+        "1f4770e5",
+        "a2a09611"
+      ]
+    }
+  }
+}
diff --git a/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/zh-CN.mdx b/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/zh-CN.mdx
new file mode 100644
index 0000000..1ce29fe
--- /dev/null
+++ b/questions/provide-some-examples-of-how-currying-and-partial-application-can-be-used/zh-CN.mdx
@@ -0,0 +1,82 @@
+---
+title: 提供一些关于如何使用柯里化和部分应用的例子
+---
+
+## TL;DR
+
+柯里化将具有多个参数的函数转换为一系列函数，每个函数只接受一个参数。部分应用会固定函数的一些参数，生成另一个参数较少的函数。例如，柯里化函数 `add(a, b)` 看起来像 `add(a)(b)`，而部分应用 `add(2, b)` 会将第一个参数固定为 2，从而产生一个只需要第二个参数的函数。
+
+柯里化示例：
+
+```js live
+const add = (a) => (b) => a + b;
+const addTwo = add(2);
+console.log(addTwo(3)); // 5
+```
+
+部分应用示例：
+
+```js live
+const add = (a, b) => a + b;
+const addTwo = add.bind(null, 2);
+console.log(addTwo(3)); // 5
+```
+
+***
+
+## 柯里化和部分应用
+
+### 柯里化
+
+柯里化是一种将具有多个参数的函数转换为一系列函数的技术，每个函数只接受一个参数。这允许更灵活的函数组合和重用。
+
+#### 示例
+
+```js live
+// 考虑一个简单的加法函数：
+function add(a, b) {
+  return a + b;
+}
+
+// 要柯里化这个函数，我们将其转换为一系列函数，
+// 每个函数接受一个参数：
+const curriedAdd = (a) => (b) => a + b;
+
+// 现在，你可以这样使用柯里化函数：
+const addTwo = curriedAdd(2);
+console.log(addTwo(3)); // 5
+```
+
+### 部分应用
+
+部分应用是一种技术，你可以在其中固定函数的一些参数，从而生成另一个参数较少的函数。这对于从更通用的函数创建专门的函数很有用。
+
+#### 示例
+
+```js live
+// 考虑相同的 add 函数：
+function add(a, b) {
+  return a + b;
+}
+
+// 要部分应用此函数
+// 你可以使用 `bind` 方法来固定第一个参数：
+const addTwo = add.bind(null, 2);
+console.log(addTwo(3)); // 5
+
+// 或者，你可以创建一个自定义的部分应用函数：
+function partial(fn, ...fixedArgs) {
+  return function (...remainingArgs) {
+    return fn(...fixedArgs, ...remainingArgs);
+  };
+}
+
+const addTwoCustom = partial(add, 2);
+console.log(addTwoCustom(3)); // 5
+```
+
+## 延伸阅读
+
+* [MDN 上的柯里化](https://developer.mozilla.org/en-US/docs/Glossary/Currying)
+* [MDN 上的部分应用](https://developer.mozilla.org/en-US/docs/Glossary/Partial_application)
+* [JavaScript 中的函数式编程](https://eloquentjavascript.net/1st_edition/chapter6.html)
diff --git a/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.langnostic.json b/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.langnostic.json
new file mode 100644
index 0000000..90b874c
--- /dev/null
+++ b/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.langnostic.json
@@ -0,0 +1,82 @@
+{
+  "frontmatter": {
+    "title": "963f6d50"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "5864e0e9",
+        "bca760b0",
+        "ca098495",
+        "49ed6e0d",
+        "2a7816d0",
+        "fb9680c5",
+        "24ad4448",
+        "eea083fa",
+        "a3fdeea5",
+        "157fa572",
+        "fcdd0db7",
+        "a9b3b659",
+        "70e92007",
+        "29881730",
+        "852195c",
+        "e120ec",
+        "5fedbc8e",
+        "76335194",
+        "647094ae",
+        "96179f4f",
+        "3f88c3b",
+        "bff90e2",
+        "e8e1d7c5",
+        "d5d43694",
+        "65526585",
+        "66224a2",
+        "ca098495",
+        "49991086",
+        "9684ec1b",
+        "60c84d23",
+        "1f4770e5",
+        "7ff576dd"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "5864e0e9",
+        "bca760b0",
+        "ca098495",
+        "49ed6e0d",
+        "2a7816d0",
+        "fb9680c5",
+        "24ad4448",
+        "eea083fa",
+        "a3fdeea5",
+        "157fa572",
+        "fcdd0db7",
+        "a9b3b659",
+        "70e92007",
+        "29881730",
+        "852195c",
+        "e120ec",
+        "5fedbc8e",
+        "76335194",
+        "647094ae",
+        "96179f4f",
+        "3f88c3b",
+        "bff90e2",
+        "e8e1d7c5",
+        "d5d43694",
+        "65526585",
+        "66224a2",
+        "ca098495",
+        "49991086",
+        "9684ec1b",
+        "60c84d23",
+        "1f4770e5",
+        "7ff576dd"
+      ]
+    }
+  }
+}
diff --git a/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/zh-CN.mdx b/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/zh-CN.mdx
index 858ca73..8d75b23 100644
--- a/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/zh-CN.mdx
+++ b/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/zh-CN.mdx
@@ -1,12 +1,129 @@
 ---
-title: 在构造函数中对方法使用箭头语法有什么好处？
+title: 在构造函数中使用 JavaScript 箭头语法作为方法有什么优势？
 ---
 
-使用箭头函数作为构造函数内的一种方法的主要优点是，`this`的值在函数创建时被设置，之后无法更改。 因此，当构造函数用于创建一个新对象时，`this` 总是指该对象。 例如，假设我们有一个`Person`构造函数，以名字作为参数，有两个方法来`console.log`这个名字，一个是普通函数，一个是箭头函数：
+## TL;DR
+
+在构造函数中使用箭头函数作为方法的主要优点是 `this` 的值在函数创建时设置，之后无法更改。当构造函数用于创建新对象时，`this` 将始终引用该对象。
+
+例如，假设我们有一个 `Person` 构造函数，它接受一个名字作为参数，并有两个方法来 `console.log()` 该名称，一个作为常规函数，一个作为箭头函数：
+
+```js live
+const Person = function (name) {
+  this.firstName = name;
+  this.sayName1 = function () {
+    console.log(this.firstName);
+  };
+  this.sayName2 = () => {
+    console.log(this.firstName);
+  };
+};
+
+const john = new Person('John');
+const dave = new Person('Dave');
+
+john.sayName1(); // John
+john.sayName2(); // John
+
+// 常规函数可以更改其 `this` 值，但箭头函数不能
+john.sayName1.call(dave); // Dave (因为 `this` 现在是 dave 对象)
+john.sayName2.call(dave); // John
+
+john.sayName1.apply(dave); // Dave (因为 `this` 现在是 dave 对象)
+john.sayName2.apply(dave); // John
+
+john.sayName1.bind(dave)(); // Dave (因为 `this` 现在是 dave 对象)
+john.sayName2.bind(dave)(); // John
+
+const sayNameFromWindow1 = john.sayName1;
+sayNameFromWindow1(); // undefined (因为 `this` 现在是 window 对象)
+
+const sayNameFromWindow2 = john.sayName2;
+sayNameFromWindow2(); // John
+```
+
+这里的主要结论是，`this` 可以为普通函数更改，但 `this` 对于箭头函数始终保持不变。因此，即使您将箭头函数传递到应用程序的不同部分，您也不必担心 `this` 的值发生变化。
+
+***
+
+## 箭头函数
+
+箭头函数是在 ES2015 中引入的，它提供了一种用 Javascript 编写函数的简洁方式。箭头函数的一个关键特性是它在词法上绑定了 `this` 值，这意味着它从封闭范围获取 `this` 值。
+
+### 语法
+
+箭头函数使用 `=>` 语法代替 function 关键字。基本语法是：
 
 ```js
-const Person = function (firstName) {
-  this.firstName = firstName;
+const myFunction = (arg1, arg2, ...argN) => {
+  // function body
+};
+```
+
+如果函数体只有一个表达式，则可以省略大括号和 return 关键字：
+
+```js
+const myFunction = (arg1, arg2, ...argN) => expression;
+```
+
+### 例子
+
+```js live
+// 带有参数的箭头函数
+const multiply = (x, y) => x * y;
+console.log(multiply(2, 3)); // 输出：6
+
+// 没有参数的箭头函数
+const sayHello = () => 'Hello, World!';
+console.log(sayHello()); // 输出：'Hello, World!'
+```
+
+### 优点
+
+* **简洁**: 箭头函数提供更简洁的语法，尤其适用于短函数。
+* **隐式返回**: 它们对单行函数具有隐式返回。
+* **`this` 的值是可预测的**: 箭头函数在词法上绑定 `this` 值，从封闭范围继承它。
+
+### 局限性
+
+箭头函数不能用作构造函数，并且与 `new` 关键字一起使用时会抛出错误。
+
+```js live
+const Foo = () => {};
+const foo = new Foo(); // TypeError: Foo is not a constructor
+```
+
+它们也没有 `arguments` 关键字；参数必须通过在参数中使用 rest 运算符 (`...`) 来获取。
+
+```js live
+const arrowFunction = (...args) => {
+  console.log(arguments); // Throws a ReferenceError
+  console.log(args); // [1, 2, 3]
+};
+
+arrowFunction(1, 2, 3);
+```
+
+由于箭头函数没有自己的 `this`，因此它们不适合在对象中定义方法。 应该使用传统的函数表达式或函数声明。
+
+```js live
+const obj = {
+  value: 42,
+  getValue: () => this.value, // `this` does not refer to `obj`
+};
+
+console.log(obj.getValue()); // undefined
+```
+
+## 为什么箭头函数有用
+
+箭头函数最显著的特征之一是它们与 `this` 的行为。与常规函数不同，箭头函数没有自己的 `this`。相反，它们在定义时从父作用域继承 `this`。这使得箭头函数特别适用于事件处理程序、回调和类中的方法等场景。
+
+### 函数构造函数中的箭头函数
+
+```js live
+const Person = function (name) {
+  this.firstName = name;
   this.sayName1 = function () {
     console.log(this.firstName);
   };
@@ -21,23 +138,42 @@ const dave = new Person('Dave');
 john.sayName1(); // John
 john.sayName2(); // John
 
-// The regular function can have its 'this' value changed, but the arrow function cannot
-john.sayName1.call(dave); // Dave (because "this" is now the dave object)
+// 常规函数可以更改其 `this` 值，但箭头函数不能
+john.sayName1.call(dave); // Dave (因为 `this` 现在是 dave 对象)
 john.sayName2.call(dave); // John
 
-john.sayName1.apply(dave); // Dave (because 'this' is now the dave object)
+john.sayName1.apply(dave); // Dave (因为 `this` 现在是 dave 对象)
 john.sayName2.apply(dave); // John
 
-john.sayName1.bind(dave)(); // Dave (because 'this' is now the dave object)
+john.sayName1.bind(dave)(); // Dave (因为 `this` 现在是 dave 对象)
 john.sayName2.bind(dave)(); // John
 
-var sayNameFromWindow1 = john.sayName1;
-sayNameFromWindow1(); // undefined (because 'this' is now the window object)
+const sayNameFromWindow1 = john.sayName1;
+sayNameFromWindow1(); // undefined (因为 `this` 现在是 window 对象)
 
-var sayNameFromWindow2 = john.sayName2;
+const sayNameFromWindow2 = john.sayName2;
 sayNameFromWindow2(); // John
 ```
 
-这里的主要启示是，对于普通函数\`this'可以改变，但对于箭头函数，上下文始终保持不变。 所以，即使你将箭头函数传递到应用程序的不同部分，你也不必担心上下文会发生变化。
+### 箭头函数在事件处理程序中
+
+```js
+const button = document.getElementById('myButton');
+
+button.addEventListener('click', function () {
+  console.log(this); // Output: Button
+  console.log(this === button); // Output: true
+});
+
+button.addEventListener('click', () => {
+  console.log(this); // Output: Window
+  console.log(this === window); // Output: true
+});
+```
+
+这在 React 类组件中特别有用。 如果您使用普通函数定义一个类方法，例如单击处理程序，然后将该单击处理程序作为 prop 传递到子组件中，则还需要在父组件的构造函数中绑定 `this`。 如果您改为使用箭头函数，则无需绑定 `this`，因为该方法将自动从其封闭的词法上下文中获取其 `this` 值。 请参阅此 [文章](https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb) 以获得出色的演示和示例代码。
+
+## 延伸阅读
 
-这对 React 类组件特别有用。 如果你定义了一个类方法，例如使用普通函数的点击处理程序，然后你把这个点击处理程序作为一个道具传递给子组件，你将需要在父组件的构造函数中绑定`this`。 如果你使用一个箭头函数，就不需要同时绑定 "this"，因为方法会自动从其包围的词法上下文中获得 "this "值。 (关于优秀演示和样本代码：https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)
+* [箭头函数表达式 - MDN ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
+* [如何使用 JavaScript 箭头函数 – 详细解释](https://www.freecodecamp.org/news/javascript-arrow-functions-in-dep)
diff --git a/questions/what-are-callback-functions-and-how-are-they-used/en-US.langnostic.json b/questions/what-are-callback-functions-and-how-are-they-used/en-US.langnostic.json
new file mode 100644
index 0000000..8821f60
--- /dev/null
+++ b/questions/what-are-callback-functions-and-how-are-they-used/en-US.langnostic.json
@@ -0,0 +1,66 @@
+{
+  "frontmatter": {
+    "title": "d46d6047"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "78eadda8",
+        "8653c591",
+        "2a7816d0",
+        "f83af0df",
+        "25841bc3",
+        "72f4814c",
+        "63d1c073",
+        "b189f427",
+        "fc625159",
+        "316805a1",
+        "efc618b4",
+        "6d0fe492",
+        "9912c3a1",
+        "714a1b2d",
+        "4d9f1ec5",
+        "2d911d61",
+        "81e8fbc",
+        "fd95ec65",
+        "73a218d6",
+        "2b67e4ce",
+        "d72c4cfb",
+        "bc60df2b",
+        "1f4770e5",
+        "c2097a39"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "78eadda8",
+        "8653c591",
+        "2a7816d0",
+        "f83af0df",
+        "25841bc3",
+        "72f4814c",
+        "63d1c073",
+        "b189f427",
+        "fc625159",
+        "316805a1",
+        "efc618b4",
+        "6d0fe492",
+        "9912c3a1",
+        "714a1b2d",
+        "4d9f1ec5",
+        "2d911d61",
+        "81e8fbc",
+        "fd95ec65",
+        "73a218d6",
+        "2b67e4ce",
+        "d72c4cfb",
+        "bc60df2b",
+        "1f4770e5",
+        "c2097a39"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-callback-functions-and-how-are-they-used/zh-CN.mdx b/questions/what-are-callback-functions-and-how-are-they-used/zh-CN.mdx
new file mode 100644
index 0000000..ef0061b
--- /dev/null
+++ b/questions/what-are-callback-functions-and-how-are-they-used/zh-CN.mdx
@@ -0,0 +1,124 @@
+---
+title: 什么是回调函数以及如何使用它们？
+---
+
+## TL;DR
+
+回调函数是作为参数传递给另一个函数的函数，然后在外部函数中调用该函数以完成某种例程或操作。它们通常用于异步操作，例如处理事件、进行 API 调用或读取文件。例如：
+
+```js live
+function fetchData(callback) {
+  // assume an asynchronous operation to fetch data
+  const data = { name: 'John Doe' };
+  callback(data);
+}
+
+function handleData(data) {
+  console.log(data);
+}
+
+fetchData(handleData);
+```
+
+***
+
+## 什么是回调函数以及如何使用它们？
+
+### 定义
+
+回调函数是作为参数传递给另一个函数并在完成某些操作后执行的函数。这允许其他代码同时运行并防止阻塞。
+
+### 同步回调
+
+同步回调在传递给它们的函数中立即执行。它们通常用于需要在进入下一行代码之前完成的任务。
+
+```js live
+function greet(name, callback) {
+  console.log('Hello ' + name);
+  callback();
+}
+
+function sayGoodbye() {
+  console.log('Goodbye!');
+}
+
+greet('Alice', sayGoodbye);
+// Output:
+// Hello Alice
+// Goodbye!
+```
+
+### 异步回调
+
+异步回调用于需要一些时间才能完成的操作，例如读取文件、发出 HTTP 请求或处理事件。这些回调在异步操作完成后执行。
+
+```js live
+function fetchData(callback) {
+  setTimeout(() => {
+    const data = { name: 'John Doe' };
+    callback(data);
+  }, 1000);
+}
+
+function handleData(data) {
+  console.log(data);
+}
+
+fetchData(handleData);
+// Output: { name: 'John Doe' } after 1 second
+```
+
+### 常见用例
+
+#### 事件处理
+
+回调通常用于事件处理。例如，在 JavaScript 中，您可以将回调函数传递给事件侦听器。
+
+```js live
+const button = document.createElement('button');
+
+button.addEventListener('click', () => {
+  setTimeout(() => {
+    console.log('Button clicked after 1s');
+  }, 1000);
+});
+
+button.click();
+```
+
+#### API 调用
+
+回调经常用于进行 API 调用以处理响应数据。
+
+```js live
+function getUserData(userId, callback) {
+  fetch(`https://jsonplaceholder.typicode.com/todos/2`)
+    .then((response) => response.json())
+    .then((data) => callback(data))
+    .catch((error) => console.error('Error:', error));
+}
+
+function displayUserData(data) {
+  console.log(data);
+}
+
+getUserData(1, displayUserData);
+```
+
+#### 定时器
+
+回调函数也用于计时器，如 `setTimeout` 和 `setInterval`。
+
+```js live
+function sayHello() {
+  console.log('Hello, world!');
+}
+
+setTimeout(sayHello, 2000); // 2 秒后，sayHello 回调函数被调用
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
+* [JavaScript.info: Callbacks](https://javascript.info/callbacks)
+* [Eloquent JavaScript: Asynchronous Programming](https://eloquentjavascript.net/11_async.html)
diff --git a/questions/what-are-default-parameters-and-how-are-they-used/en-US.langnostic.json b/questions/what-are-default-parameters-and-how-are-they-used/en-US.langnostic.json
new file mode 100644
index 0000000..9d74319
--- /dev/null
+++ b/questions/what-are-default-parameters-and-how-are-they-used/en-US.langnostic.json
@@ -0,0 +1,62 @@
+{
+  "frontmatter": {
+    "title": "1addacf8"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "4b08f03b",
+        "6a552481",
+        "2a7816d0",
+        "8a464295",
+        "d7e64b68",
+        "eea083fa",
+        "1b6ecd61",
+        "9155cd6e",
+        "9b5019f0",
+        "ae7fa957",
+        "6a552481",
+        "d1d1fb12",
+        "9fb6eb8e",
+        "9a047168",
+        "f8c3b35e",
+        "916ba07f",
+        "87538ac8",
+        "1e9b6372",
+        "442a74d3",
+        "15fc8dff",
+        "1f4770e5",
+        "3ea4c540"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "4b08f03b",
+        "6a552481",
+        "2a7816d0",
+        "8a464295",
+        "d7e64b68",
+        "eea083fa",
+        "1b6ecd61",
+        "9155cd6e",
+        "9b5019f0",
+        "ae7fa957",
+        "6a552481",
+        "d1d1fb12",
+        "9fb6eb8e",
+        "9a047168",
+        "f8c3b35e",
+        "916ba07f",
+        "87538ac8",
+        "1e9b6372",
+        "442a74d3",
+        "15fc8dff",
+        "1f4770e5",
+        "3ea4c540"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-default-parameters-and-how-are-they-used/zh-CN.mdx b/questions/what-are-default-parameters-and-how-are-they-used/zh-CN.mdx
new file mode 100644
index 0000000..5987f73
--- /dev/null
+++ b/questions/what-are-default-parameters-and-how-are-they-used/zh-CN.mdx
@@ -0,0 +1,85 @@
+---
+title: 什么是默认参数以及如何使用它们？
+---
+
+## TL;DR
+
+JavaScript 中的默认参数允许您为函数参数设置默认值，如果没有传递任何值或 `undefined`。这有助于避免 `undefined` 值，并使您的代码更健壮。您可以通过在函数定义中为参数赋值来定义默认参数。
+
+```js live
+function greet(name = 'Guest') {
+  console.log(`Hello, ${name}!`);
+}
+
+greet(); // Output: Hello, Guest!
+greet('Alice'); // Output: Hello, Alice!
+```
+
+***
+
+## 默认参数
+
+JavaScript 中的默认参数提供了一种为函数参数设置默认值的方法。此功能是在 ECMAScript 2015 (ES6) 中引入的，通过避免未传递任何参数时出现 `undefined` 值，有助于使函数更健壮且更易于使用。
+
+### 语法
+
+您可以通过在函数定义中为参数赋值来定义默认参数。如果未传递该参数的值或 `undefined`，则将使用默认值。
+
+```js
+function functionName(parameter1 = defaultValue1, parameter2 = defaultValue2) {
+  // function body
+}
+```
+
+### 示例
+
+这是一个简单的示例，说明默认参数的工作原理：
+
+```js live
+function greet(name = 'Guest') {
+  console.log(`Hello, ${name}!`);
+}
+
+greet(); // Output: Hello, Guest!
+greet('Alice'); // Output: Hello, Alice!
+```
+
+在此示例中，`greet` 函数有一个默认参数 `name`，其默认值为 `'Guest'`。当不带任何参数调用该函数时，它使用默认值。当提供参数时，它会覆盖默认值。
+
+### 多个默认参数
+
+您还可以在一个函数中定义多个默认参数：
+
+```js live
+function createUser(username = 'Anonymous', age = 18) {
+  console.log(`Username: ${username}, Age: ${age}`);
+}
+
+createUser(); // Output: Username: Anonymous, Age: 18
+createUser('John'); // Output: Username: John, Age: 18
+createUser('John', 25); // Output: Username: John, Age: 25
+```
+
+在此示例中，`createUser` 函数有两个默认参数：`username` 和 `age`。如果未传递任何参数，则使用两个默认值。如果仅传递一个参数，则第二个参数使用其默认值。
+
+### 使用表达式作为默认值
+
+您还可以使用表达式作为参数的默认值：
+
+```js live
+function add(a = 0, b = a + 1) {
+  return a + b;
+}
+
+console.log(add()); // Output: 1
+console.log(add(5)); // Output: 11
+console.log(add(5, 10)); // Output: 15
+```
+
+在这个例子中，`b` 的默认值是一个依赖于 `a` 值的表达式。如果没有传递参数，`a` 是 `0`，`b` 是 `1`。如果只传递了 `a`，`b` 是 `a + 1`。如果同时传递了 `a` 和 `b`，则使用提供的值。
+
+## 延伸阅读
+
+* [MDN Web 文档：默认参数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters)
+* [JavaScript.info：默认参数](https://javascript.info/function-basics#default-values)
+* [ECMAScript 2015 (ES6) 规范](https://www.ecma-international.org/ecma-262/6.0/#sec-function-definitions)
diff --git a/questions/what-are-design-patterns-and-why-are-they-useful/en-US.langnostic.json b/questions/what-are-design-patterns-and-why-are-they-useful/en-US.langnostic.json
new file mode 100644
index 0000000..e0f0d62
--- /dev/null
+++ b/questions/what-are-design-patterns-and-why-are-they-useful/en-US.langnostic.json
@@ -0,0 +1,50 @@
+{
+  "frontmatter": {
+    "title": "29e1b7af"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "697cd09c",
+        "2a7816d0",
+        "a73b745d",
+        "a2d12ef9",
+        "27dcd70f",
+        "dfaabb48",
+        "3b039eaa",
+        "6191c545",
+        "b53dca6e",
+        "eaea05fa",
+        "88ad0e17",
+        "bb47c1cb",
+        "24936fbf",
+        "2928f66d",
+        "1f4770e5",
+        "44a9ce4b"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "697cd09c",
+        "2a7816d0",
+        "a73b745d",
+        "a2d12ef9",
+        "27dcd70f",
+        "dfaabb48",
+        "3b039eaa",
+        "6191c545",
+        "b53dca6e",
+        "eaea05fa",
+        "88ad0e17",
+        "bb47c1cb",
+        "24936fbf",
+        "2928f66d",
+        "1f4770e5",
+        "44a9ce4b"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-design-patterns-and-why-are-they-useful/zh-CN.mdx b/questions/what-are-design-patterns-and-why-are-they-useful/zh-CN.mdx
new file mode 100644
index 0000000..bb98497
--- /dev/null
+++ b/questions/what-are-design-patterns-and-why-are-they-useful/zh-CN.mdx
@@ -0,0 +1,63 @@
+---
+title: 什么是设计模式？它们为什么有用？
+---
+
+## TL;DR
+
+设计模式是软件设计中常见问题的可重用解决方案。它们为如何解决可以在许多不同情况下使用的问题提供了一个模板。它们之所以有用，是因为它们可以帮助开发人员避免常见的陷阱，提高代码可读性，并使维护和扩展应用程序更容易。
+
+***
+
+## 什么是设计模式？它们为什么有用？
+
+### 设计模式的定义
+
+设计模式是针对软件设计中出现的常见问题的一般性、可重用的解决方案。它们不是可以直接转化为代码的已完成设计，而是描述如何在各种上下文中解决问题的模板。这个概念由 Erich Gamma、Richard Helm、Ralph Johnson 和 John Vlissides（也称为“四人帮”（GoF））合著的《设计模式：可复用面向对象软件要素》一书推广。
+
+### 设计模式的类型
+
+设计模式通常分为三种主要类型：
+
+1. **创建型模式**：处理对象创建机制，试图以适合情况的方式创建对象。示例包括单例模式、工厂方法和抽象工厂。
+2. **结构型模式**：处理对象组合或类和对象的结构。示例包括适配器模式、组合模式和装饰器模式。
+3. **行为型模式**：处理对象交互和责任。示例包括观察者模式、策略模式和命令模式。
+
+### 为什么设计模式有用
+
+1. **可重用性**：设计模式为常见问题提供了经过验证的解决方案，可以在不同的项目中重复使用。
+2. **可维护性**：它们有助于编写更易于理解、维护和扩展的代码。
+3. **可扩展性**：设计模式可以帮助设计可扩展的系统，并可以处理复杂性的增长。
+4. **沟通**：它们为开发人员提供了通用词汇，使讨论和分享设计理念更容易。
+5. **最佳实践**：它们封装了最佳实践和行业标准，帮助开发人员避免常见的陷阱。
+
+### 示例：单例模式
+
+单例模式确保一个类只有一个实例，并提供对它的全局访问点。以下是 JavaScript 中的一个简单实现：
+
+```js live
+class Singleton {
+  constructor() {
+    if (Singleton.instance) {
+      return Singleton.instance;
+    }
+    Singleton.instance = this;
+  }
+
+  someMethod() {
+    console.log('Singleton method');
+  }
+}
+
+const instance1 = new Singleton();
+const instance2 = new Singleton();
+
+console.log(instance1 === instance2); // true
+```
+
+在此示例中，`Singleton` 类确保只创建一个类的实例。任何后续创建新实例的调用都将返回现有实例。
+
+## 延伸阅读
+
+* [设计模式：可复用面向对象软件的要素](https://en.wikipedia.org/wiki/Design_Patterns) by the Gang of Four
+* [Refactoring Guru: 设计模式](https://refactoring.guru/design-patterns)
+* [JavaScript 设计模式](https://addyosmani.com/resources/essentialjsdesignpatterns/book/) by Addy Osmani
diff --git a/questions/what-are-event-listeners-and-how-are-they-used/en-US.langnostic.json b/questions/what-are-event-listeners-and-how-are-they-used/en-US.langnostic.json
new file mode 100644
index 0000000..99d54f1
--- /dev/null
+++ b/questions/what-are-event-listeners-and-how-are-they-used/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "9f373e88"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "965047e7",
+        "7b0f39ef",
+        "2a7816d0",
+        "848476af",
+        "f006b370",
+        "bb257db9",
+        "4b18b236",
+        "d5d3a621",
+        "a929b399",
+        "282d85b5",
+        "f4b49386",
+        "48d0a82a",
+        "febabc20",
+        "b7029f4",
+        "49ab7913",
+        "c8b14e3f",
+        "671f2159",
+        "ef6c45eb",
+        "ee639337",
+        "3357370b",
+        "2551ecd",
+        "1f4770e5",
+        "7101ec23"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "965047e7",
+        "7b0f39ef",
+        "2a7816d0",
+        "848476af",
+        "f006b370",
+        "bb257db9",
+        "4b18b236",
+        "d5d3a621",
+        "a929b399",
+        "282d85b5",
+        "f4b49386",
+        "48d0a82a",
+        "febabc20",
+        "b7029f4",
+        "49ab7913",
+        "c8b14e3f",
+        "671f2159",
+        "ef6c45eb",
+        "ee639337",
+        "3357370b",
+        "2551ecd",
+        "1f4770e5",
+        "7101ec23"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-event-listeners-and-how-are-they-used/zh-CN.mdx b/questions/what-are-event-listeners-and-how-are-they-used/zh-CN.mdx
new file mode 100644
index 0000000..0b13d7c
--- /dev/null
+++ b/questions/what-are-event-listeners-and-how-are-they-used/zh-CN.mdx
@@ -0,0 +1,89 @@
+---
+title: 什么是事件监听器以及如何使用它们？
+---
+
+## TL;DR
+
+事件监听器是等待元素上发生特定事件（例如单击或按键）的函数。它们用于响应这些事件执行代码。您可以使用 `addEventListener` 方法将事件监听器添加到元素。例如：
+
+```js
+document.getElementById('myButton').addEventListener('click', function () {
+  alert('Button was clicked!');
+});
+```
+
+***
+
+## 什么是事件监听器以及如何使用它们？
+
+事件监听器是 Web 开发的基本组成部分，允许开发人员通过响应用户操作来使网页具有交互性。它们是等待元素上发生特定事件（例如单击、按键或鼠标移动）的函数，然后在这些事件发生时执行指定的函数。
+
+### 添加事件监听器
+
+要将事件监听器添加到元素，您可以使用 `addEventListener` 方法。此方法接受两个主要参数：要侦听的事件类型和事件发生时要执行的函数。
+
+```js
+const button = document.getElementById('myButton');
+
+button.addEventListener('click', function () {
+  alert('Button was clicked!');
+});
+```
+
+在此示例中，将事件监听器添加到 ID 为 `myButton` 的按钮元素。单击该按钮时，将弹出一个警报框，其中显示消息“Button was clicked!”。
+
+### 移除事件监听器
+
+您还可以使用 `removeEventListener` 方法移除事件监听器。此方法需要与 `addEventListener` 相同的参数：事件类型和要移除的函数。
+
+```js
+function handleClick() {
+  alert('Button was clicked!');
+}
+
+button.addEventListener('click', handleClick);
+
+// Later, you can remove the event listener
+button.removeEventListener('click', handleClick);
+```
+
+### 事件对象
+
+触发事件监听器时，会将一个事件对象传递给事件处理程序函数。此对象包含有关事件的有用信息，例如目标元素、事件类型等。
+
+```js
+button.addEventListener('click', function (event) {
+  console.log('Event type:', event.type);
+  console.log('Target element:', event.target);
+});
+```
+
+### 常见事件类型
+
+* `click`: 单击元素时触发
+* `mouseover`: 鼠标指针移动到元素上时触发
+* `mouseout`: 鼠标指针移出元素时触发
+* `keydown`: 按下某个键时触发
+* `keyup`: 释放某个键时触发
+
+### 事件委托
+
+事件委托是一种技术，其中将单个事件侦听器添加到父元素以管理多个子元素的事件。这对于提高性能和管理动态内容很有用。
+
+```js
+const list = document.getElementById('myList');
+
+list.addEventListener('click', function (event) {
+  if (event.target && event.target.nodeName === 'LI') {
+    console.log('List item clicked:', event.target.textContent);
+  }
+});
+```
+
+在此示例中，将单个事件侦听器添加到列表元素。当单击任何列表项 (`LI`) 时，事件侦听器将处理该事件。
+
+## 延伸阅读
+
+* [MDN Web Docs: EventTarget.addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
+* [JavaScript.info: Introduction to browser events](https://javascript.info/introduction-browser-events)
+* [W3Schools: JavaScript Event Listeners](https://www.w3schools.com/js/js_htmldom_eventlistener.asp)
diff --git a/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.langnostic.json b/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.langnostic.json
new file mode 100644
index 0000000..ffd0805
--- /dev/null
+++ b/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.langnostic.json
@@ -0,0 +1,100 @@
+{
+  "frontmatter": {
+    "title": "2d9a1101"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "1fbc1653",
+        "3ade285a",
+        "c89f20c8",
+        "a544b1ca",
+        "f9b750be",
+        "9b462d6c",
+        "c49d63cd",
+        "9b1ec55b",
+        "b03f6710",
+        "2a7816d0",
+        "498e3e0c",
+        "95767bd4",
+        "2b3876be",
+        "25fc3008",
+        "6d92d3ca",
+        "7399fd6f",
+        "120ea48b",
+        "1694de85",
+        "7c3979b6",
+        "a66dddf1",
+        "c873062e",
+        "8ee35790",
+        "ec42a2f7",
+        "e8a375ac",
+        "85abbd38",
+        "dec95974",
+        "cd488623",
+        "d6e49419",
+        "e7c3bd26",
+        "db059272",
+        "38954020",
+        "4c8a5ec5",
+        "f5d2f3b4",
+        "51c7926e",
+        "c927706b",
+        "88f6a16",
+        "b1239f8f",
+        "67a1d4f3",
+        "3f58a222",
+        "1f4770e5",
+        "d5505063"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "1fbc1653",
+        "3ade285a",
+        "c89f20c8",
+        "a544b1ca",
+        "f9b750be",
+        "9b462d6c",
+        "c49d63cd",
+        "9b1ec55b",
+        "b03f6710",
+        "2a7816d0",
+        "498e3e0c",
+        "95767bd4",
+        "2b3876be",
+        "25fc3008",
+        "6d92d3ca",
+        "7399fd6f",
+        "120ea48b",
+        "1694de85",
+        "7c3979b6",
+        "a66dddf1",
+        "c873062e",
+        "8ee35790",
+        "ec42a2f7",
+        "e8a375ac",
+        "85abbd38",
+        "dec95974",
+        "cd488623",
+        "d6e49419",
+        "e7c3bd26",
+        "db059272",
+        "38954020",
+        "4c8a5ec5",
+        "f5d2f3b4",
+        "51c7926e",
+        "c927706b",
+        "88f6a16",
+        "b1239f8f",
+        "67a1d4f3",
+        "3f58a222",
+        "1f4770e5",
+        "d5505063"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-iterators-and-generators-and-what-are-they-used-for/zh-CN.mdx b/questions/what-are-iterators-and-generators-and-what-are-they-used-for/zh-CN.mdx
new file mode 100644
index 0000000..c0daef3
--- /dev/null
+++ b/questions/what-are-iterators-and-generators-and-what-are-they-used-for/zh-CN.mdx
@@ -0,0 +1,306 @@
+---
+title: JavaScript 中的迭代器和生成器是什么，它们有什么用途？
+---
+
+## TL;DR
+
+在 JavaScript 中，迭代器和生成器是用于管理数据序列和以更灵活的方式控制执行流程的强大工具。
+
+**迭代器**是定义序列并可能在其终止时返回值的对象。它遵循一个特定的接口：
+
+* 迭代器对象必须实现一个 `next()` 方法。
+* `next()` 方法返回一个具有两个属性的对象：
+  * `value`：序列中的下一个值。
+  * `done`：一个布尔值，如果迭代器已完成其序列，则为 `true`，否则为 `false`。
+
+这是一个实现迭代器接口的对象的示例。
+
+```js live
+const iterator = {
+  current: 0,
+  last: 5,
+  next() {
+    if (this.current <= this.last) {
+      return { value: this.current++, done: false };
+    } else {
+      return { value: undefined, done: true };
+    }
+  },
+};
+
+let result = iterator.next();
+while (!result.done) {
+  console.log(result.value); // Logs 0, 1, 2, 3, 4, 5
+  result = iterator.next();
+}
+```
+
+**生成器**是一种特殊的函数，**可以暂停执行并在稍后恢复**。它使用 `function*` 语法和 `yield` 关键字来控制执行流程。当您调用生成器函数时，它不会像普通函数一样完全执行。相反，它返回一个迭代器对象。在返回的迭代器上调用 `next()` 方法会将生成器推进到下一个 `yield` 语句，并且 `yield` 之后的值将成为 `next()` 的返回值。
+
+```js live
+function* numberGenerator() {
+  let num = 0;
+  while (num <= 5) {
+    yield num++;
+  }
+}
+
+const gen = numberGenerator();
+console.log(gen.next()); // { value: 0, done: false }
+console.log(gen.next()); // { value: 1, done: false }
+console.log(gen.next()); // { value: 2, done: false }
+console.log(gen.next()); // { value: 3, done: false }
+console.log(gen.next()); // { value: 4, done: false }
+console.log(gen.next()); // { value: 5, done: false }
+console.log(gen.next()); // { value: undefined, done: true }
+```
+
+生成器对于按需创建迭代器非常强大，尤其适用于无限序列或复杂的迭代逻辑。它们可用于：
+
+* 惰性求值 – 仅在需要时处理元素，提高大型数据集的内存效率。
+* 为自定义数据结构实现迭代器。
+* 创建异步迭代器以处理数据流。
+
+***
+
+## 迭代器
+
+迭代器是定义序列并提供 `next()` 方法以访问序列中下一个值的对象。它们用于迭代 `数组`、`字符串` 和自定义 `对象` 等数据结构。迭代器的主要用例包括：
+
+* 实现迭代器协议以使自定义对象可迭代，允许它们与 `for...of` 循环和其他期望可迭代对象的语言结构一起使用。
+* 提供一种标准方式来迭代不同的数据结构，使代码更具可重用性和可维护性。
+
+### 为数字范围创建自定义迭代器
+
+在 JavaScript 中，我们可以通过在任何自定义对象中实现 `[Symbol.iterator]()` 来为迭代器提供默认实现。
+
+```js live
+// 定义一个名为 Range 的类
+class Range {
+  // 构造函数接受两个参数：start 和 end
+  constructor(start, end) {
+    // 将 start 和 end 值分配给实例
+    this.start = start;
+    this.end = end;
+  }
+
+  // 定义对象的默认迭代器
+  [Symbol.iterator]() {
+    // 将当前值初始化为起始值
+    let current = this.start;
+    const end = this.end;
+
+    // 返回一个带有 next 方法的对象
+    return {
+      // next 方法返回迭代中的下一个值
+      next() {
+        // 如果当前值小于或等于结束值...
+        if (current <= end) {
+          // ...返回一个带有当前值和 done 设置为 false 的对象
+          return { value: current++, done: false };
+        }
+
+        // ...否则，返回一个 value 设置为 undefined 且 done 设置为 true 的对象
+        return { value: undefined, done: true };
+      },
+    };
+  }
+}
+
+// 创建一个 start = 1 且 end = 3 的新 Range 对象
+const range = new Range(1, 3);
+// 迭代 range 对象
+for (const number of range) {
+  // 将每个数字记录到控制台
+  console.log(number); // 1, 2, 3
+}
+```
+
+### 使用迭代器协议的内置对象
+
+在 JavaScript 中，几个内置对象实现了迭代器协议，这意味着它们具有默认的 `@@iterator` 方法。这使得它们可以在 `for...of` 循环和扩展运算符等结构中使用。以下是实现迭代器的一些关键内置对象：
+
+1. **数组**：数组具有内置的迭代器，允许您遍历其元素。
+
+   ```js live
+   const array = [1, 2, 3];
+   const iterator = array[Symbol.iterator]();
+
+   console.log(iterator.next()); // { value: 1, done: false }
+   console.log(iterator.next()); // { value: 2, done: false }
+   console.log(iterator.next()); // { value: 3, done: false }
+   console.log(iterator.next()); // { value: undefined, done: true }
+
+   for (const value of array) {
+     console.log(value); // Logs 1, 2, 3
+   }
+   ```
+
+2. **字符串**：字符串具有内置的迭代器，允许您遍历其字符。
+
+   ```js live
+   const string = 'hello';
+   const iterator = string[Symbol.iterator]();
+
+   console.log(iterator.next()); // { value: "h", done: false }
+   console.log(iterator.next()); // { value: "e", done: false }
+   console.log(iterator.next()); // { value: "l", done: false }
+   console.log(iterator.next()); // { value: "l", done: false }
+   console.log(iterator.next()); // { value: "o", done: false }
+   console.log(iterator.next()); // { value: undefined, done: true }
+
+   for (const char of string) {
+     console.log(char); // Logs h, e, l, l, o
+   }
+   ```
+
+3. **DOM NodeLists**
+
+   ```js live
+   // Create a new div and append it to the DOM
+   const newDiv = document.createElement('div');
+   newDiv.id = 'div1';
+   document.body.appendChild(newDiv);
+
+   const nodeList = document.querySelectorAll('div');
+   const iterator = nodeList[Symbol.iterator]();
+
+   console.log(iterator.next()); // { value: HTMLDivElement, done: false }
+   console.log(iterator.next()); // { value: undefined, done: true }
+
+   for (const node of nodeList) {
+     console.log(node); // Logs each <div> element, in this case only div1
+   }
+   ```
+
+`Map` 和 `Set` 也有内置的迭代器。
+
+## 生成器
+
+生成器是一种特殊的函数，可以暂停和恢复其执行，允许它们动态生成一系列值。它们通常用于创建迭代器，但也有其他应用。生成器的主要用例包括：
+
+* 创建迭代器比手动实现迭代器协议更简洁易读。
+* 实现惰性求值，仅在需要时生成值，从而节省内存和计算时间。
+* 通过使用 `yield` 和 `await` 允许以同步风格编写代码，从而简化异步编程。
+
+生成器提供了一些好处：
+
+* **惰性求值**：它们动态生成值，并且仅在需要时才生成，这可以提高内存效率。
+* **暂停和恢复**：生成器可以暂停执行（通过 `yield`），并且可以在恢复时接收新数据。
+* **异步迭代**：随着 `async/await` 的出现，生成器可用于管理异步数据流。
+
+### 使用生成器函数创建迭代器
+
+我们可以重写我们的 `Range` 示例以使用生成器函数：
+
+```js live
+// Define a class named Range
+class Range {
+  // The constructor takes two parameters: start and end
+  constructor(start, end) {
+    // Assign the start and end values to the instance
+    this.start = start;
+    this.end = end;
+  }
+
+  // Define the default iterator for the object using a generator
+  *[Symbol.iterator]() {
+    // Initialize the current value to the start value
+    let current = this.start;
+
+    // While the current value is less than or equal to the end value...
+    while (current <= this.end) {
+      // ...yield the current value
+      yield current++;
+    }
+  }
+}
+
+// Create a new Range object with start = 1 and end = 3
+const range = new Range(1, 3);
+// Iterate over the range object
+for (const number of range) {
+  // Log each number to the console
+  console.log(number); // 1, 2, 3
+}
+```
+
+### 迭代数据流
+
+生成器非常适合迭代数据流，例如从 API 获取数据或读取文件。此示例演示了如何使用生成器分批从 API 获取数据：
+
+```js live
+async function* fetchDataInBatches(url, numBatches = 5, batchSize = 10) {
+  let startIndex = 0;
+  let currBatch = 0;
+
+  while (currBatch < numBatches) {
+    const response = await fetch(
+      `${url}?_start=${startIndex}&_limit=${batchSize}`,
+    );
+    const data = await response.json();
+    if (data.length === 0) break;
+    yield data;
+    startIndex += batchSize;
+    currBatch += 1;
+  }
+}
+
+async function fetchAndLogData() {
+  const dataGenerator = fetchDataInBatches(
+    'https://jsonplaceholder.typicode.com/todos',
+  );
+
+  for await (const batch of dataGenerator) {
+    console.log(batch);
+  }
+}
+fetchAndLogData();
+```
+
+此生成器函数 `fetchDataInBatches` 以指定大小的批次从 API 获取数据。它产生每批数据，允许您在获取下一批数据之前对其进行处理。这种方法可以比一次获取所有数据更节省内存。
+
+#### 实现异步迭代器
+
+生成器可用于实现异步迭代器，这对于处理异步数据源很有用。此示例演示了用于从 API 获取数据的异步迭代器：
+
+```js live
+async function* fetchDataAsyncIterator(url, pagesToFetch = 3) {
+  let currPage = 1;
+
+  while (currPage <= pagesToFetch) {
+    const response = await fetch(`${url}?_page=${currPage}`);
+    const data = await response.json();
+    if (data.length === 0) break;
+    yield data;
+    currPage++;
+  }
+}
+
+async function fetchAndLogData() {
+  const asyncIterator = fetchDataAsyncIterator(
+    'https://jsonplaceholder.typicode.com/todos',
+  );
+
+  for await (const chunk of asyncIterator) {
+    console.log(chunk);
+  }
+}
+fetchAndLogData();
+```
+
+生成器函数 `fetchDataAsyncIterator` 是一个异步迭代器，它从 API 中分页获取数据。它产生每页数据，允许您在获取下一页之前对其进行处理。这种方法对于处理大型数据集或长时间运行的操作很有用。
+
+生成器也广泛用于 JavaScript 库和框架中，例如 [Redux-Saga](https://redux-saga.js.org/) 和 [RxJS](https://rxjs.dev/)，用于处理异步操作和响应式编程。
+
+## 总结
+
+迭代器和生成器提供了一种强大而灵活的方式来处理 JavaScript 中的数据集合。 迭代器定义了一种遍历数据序列的标准化方式，而生成器提供了一种更具表现力和效率的方式来创建迭代器、处理异步操作以及组合复杂的数据管道。
+
+## 延伸阅读
+
+* [迭代器和生成器](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators)
+* [异步迭代和生成器](https://javascript.info/async-iterators-generators)
+* [可迭代对象](https://javascript.info/iterable)
+* [探索 JavaScript 中的迭代器和生成器](https://blog.bitsrc.io/explore-iterators-and-generators-in-javascript-ea4102015377)
+* [JavaScript 中的迭代器和生成器](https://syntactic-sugar.dev/blog/nested-route/iterators-and-generators)
diff --git a/questions/what-are-javascript-object-getters-and-setters-for/en-US.langnostic.json b/questions/what-are-javascript-object-getters-and-setters-for/en-US.langnostic.json
new file mode 100644
index 0000000..c8cfb86
--- /dev/null
+++ b/questions/what-are-javascript-object-getters-and-setters-for/en-US.langnostic.json
@@ -0,0 +1,48 @@
+{
+  "frontmatter": {
+    "title": "5c46612b"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "3c1a0797",
+        "f096b232",
+        "8901ee67",
+        "f8497794",
+        "2a7816d0",
+        "30a45725",
+        "a9ee9d27",
+        "c90fcbb1",
+        "7e333bf2",
+        "411b1b57",
+        "1f177e65",
+        "6c75d18f",
+        "2a91e89e",
+        "1f4770e5",
+        "f989df10"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "3c1a0797",
+        "f096b232",
+        "8901ee67",
+        "f8497794",
+        "2a7816d0",
+        "30a45725",
+        "a9ee9d27",
+        "c90fcbb1",
+        "7e333bf2",
+        "411b1b57",
+        "1f177e65",
+        "6c75d18f",
+        "2a91e89e",
+        "1f4770e5",
+        "f989df10"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-javascript-object-getters-and-setters-for/zh-CN.mdx b/questions/what-are-javascript-object-getters-and-setters-for/zh-CN.mdx
new file mode 100644
index 0000000..9641dee
--- /dev/null
+++ b/questions/what-are-javascript-object-getters-and-setters-for/zh-CN.mdx
@@ -0,0 +1,85 @@
+---
+title: JavaScript 对象 getter 和 setter 有什么用？
+---
+
+## TL;DR
+
+JavaScript 对象 getter 和 setter 用于控制对对象属性的访问。它们提供了一种封装属性的实现细节，并在获取或设置其值时定义自定义行为的方法。
+
+Getters 和 setters 分别使用 `get` 和 `set` 关键字定义，后跟一个在访问属性或为其分配新值时执行的函数。
+
+以下是一个代码示例，演示了 getter 和 setter 的用法：
+
+```js live
+const person = {
+  _name: 'John Doe', // 私有属性
+
+  get name() {
+    // Getter
+    return this._name;
+  },
+  set name(newName) {
+    // Setter
+    if (newName.trim().length > 0) {
+      this._name = newName;
+    } else {
+      console.log('Invalid name');
+    }
+  },
+};
+
+// 使用 getter 访问 name 属性
+console.log(person.name); // 输出：'John Doe'
+
+// 使用 setter 设置 name 属性
+person.name = 'Jane Smith'; // 调用 Setter
+console.log(person.name); // 输出：'Jane Smith'
+
+person.name = ''; // 调用 Setter，但由于验证，该值未设置
+console.log(person.name); // 输出：'Jane Smith'
+```
+
+***
+
+## JavaScript 对象 getter 和 setter
+
+在 JavaScript 中，getter 和 setter 是特殊的方法，允许您控制如何访问和修改对象的属性。
+
+* **Getters**：每当您尝试使用点表示法（例如，`obj.name`）访问属性时调用的函数。它们提供了一种自定义在读取属性时返回的值的方法。
+* **Setters**：当您尝试使用点表示法和赋值运算符（例如，`obj.name = "John"`）为属性赋值时调用的函数。它们允许您在将实际值存储在对象中之前执行数据验证、格式化或副作用等操作。
+
+```js live
+const person = {
+  _firstName: 'John',
+  _lastName: 'Doe',
+  get fullName() {
+    return `${this._firstName} ${this._lastName}`;
+  },
+  set fullName(value) {
+    const parts = value.split(' ');
+    this._firstName = parts[0];
+    this._lastName = parts[1];
+  },
+};
+
+console.log(person.fullName); // 输出：John Doe
+person.fullName = 'Jane Smith';
+console.log(person.fullName); // 输出：Jane Smith
+```
+
+在此示例中，`fullName` 属性没有直接存储在对象中的值。getter 函数通过组合 `_firstName` 和 `_lastName` 属性来计算它。setter 将分配的值拆分为名字和姓氏，并相应地更新内部属性。
+
+## 优点
+
+Getters 和 setters 提供了几个好处：
+
+1. **封装**：它们允许您封装属性的实现细节，从而更容易更改内部表示，而不会影响使用该属性的外部代码。
+2. **数据验证**：Setters 可用于验证分配给属性的值，确保数据完整性和一致性。
+3. **计算属性**：Getters 可用于计算并返回基于其他属性或计算的派生值。
+4. **副作用**：当属性更改时，Setters 可用于执行副作用。例如，您可能更新相关属性或在分配/修改特定值时触发操作，例如日志记录或调试。
+
+## 延伸阅读
+
+* [Object.defineProperty() | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)
+* [Property flags and descriptors | Javascript.info](https://javascript.info/property-descriptors)
+* [Object.seal() | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal)
diff --git a/questions/what-are-javascript-object-property-flags-and-descriptors/en-US.langnostic.json b/questions/what-are-javascript-object-property-flags-and-descriptors/en-US.langnostic.json
new file mode 100644
index 0000000..2c1dd33
--- /dev/null
+++ b/questions/what-are-javascript-object-property-flags-and-descriptors/en-US.langnostic.json
@@ -0,0 +1,80 @@
+{
+  "frontmatter": {
+    "title": "233e36c7"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "3bda0651",
+        "d74435c6",
+        "46295349",
+        "e715da72",
+        "5a6b18",
+        "9ba6b014",
+        "4d07e1e6",
+        "afa1c512",
+        "2a7816d0",
+        "717ba9b1",
+        "a7a3aa55",
+        "c9424fb8",
+        "9f62c70a",
+        "e715da72",
+        "a4aa0e23",
+        "a3b2613d",
+        "96037145",
+        "8f608957",
+        "9806536d",
+        "782fdbb",
+        "c47e9be6",
+        "d19a9609",
+        "e82f6a63",
+        "4f1379f7",
+        "a46fd8c3",
+        "4d560494",
+        "87d56d21",
+        "1c1c834d",
+        "42cfe6b9",
+        "1f4770e5",
+        "f989df10"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "3bda0651",
+        "d74435c6",
+        "46295349",
+        "e715da72",
+        "5a6b18",
+        "9ba6b014",
+        "4d07e1e6",
+        "afa1c512",
+        "2a7816d0",
+        "717ba9b1",
+        "a7a3aa55",
+        "c9424fb8",
+        "9f62c70a",
+        "e715da72",
+        "a4aa0e23",
+        "a3b2613d",
+        "96037145",
+        "8f608957",
+        "9806536d",
+        "782fdbb",
+        "c47e9be6",
+        "d19a9609",
+        "e82f6a63",
+        "4f1379f7",
+        "a46fd8c3",
+        "4d560494",
+        "87d56d21",
+        "1c1c834d",
+        "42cfe6b9",
+        "1f4770e5",
+        "f989df10"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-javascript-object-property-flags-and-descriptors/zh-CN.mdx b/questions/what-are-javascript-object-property-flags-and-descriptors/zh-CN.mdx
new file mode 100644
index 0000000..87ec9d1
--- /dev/null
+++ b/questions/what-are-javascript-object-property-flags-and-descriptors/zh-CN.mdx
@@ -0,0 +1,124 @@
+---
+title: JavaScript 对象属性标志和描述符是什么？
+---
+
+## TL;DR
+
+在 JavaScript 中，属性标志和描述符管理对象属性的行为和属性。
+
+**属性标志**
+
+属性标志用于指定对象上属性的行为。以下是可用的标志：
+
+* `writable`：指定是否可以写入属性。默认为 `true`。
+* `enumerable`：指定属性是否可枚举。默认为 `true`。
+* `configurable`：指定是否可以删除属性或更改其属性。默认为 `true`。
+
+**属性描述符**
+
+这些提供了关于对象属性的详细信息，包括其值和标志。它们使用 `Object.getOwnPropertyDescriptor()` 检索，并使用 `Object.defineProperty()` 设置。
+
+属性描述符的用例如下：
+
+* 通过设置 `writable: false` 使属性不可写，以确保数据一致性。
+* 通过设置 `enumerable: false` 隐藏属性，使其不被枚举。
+* 通过设置 `configurable: false` 阻止属性删除和修改。
+* 冻结或密封对象以防止全局修改。
+
+***
+
+## JavaScript 对象属性标志和描述符
+
+在 JavaScript 中，属性标志和描述符用于管理对象属性的行为和属性。这些标志和描述符对于理解如何访问、修改和继承属性至关重要。
+
+## 属性标志
+
+属性标志用于指定属性的行为。它们使用 `Object.defineProperty()` 方法设置，该方法允许您使用特定属性在对象上定义属性。可用的属性标志有：
+
+* `writable`：指定是否可以写入属性。默认为 `true`。
+* `enumerable`：指定属性是否可枚举。默认为 `true`。
+* `configurable`：指定是否可以删除属性或更改其属性。默认为 `true`。
+
+## 属性描述符
+
+属性描述符提供有关对象属性的详细信息，封装其值和标志。它们使用 `Object.getOwnPropertyDescriptor()` 检索，并使用 `Object.defineProperty()` 设置
+
+```js live
+let user = { name: 'John Doe' };
+let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
+
+console.log(descriptor); // {value: "John Doe", writable: true, enumerable: true, configurable: true}
+```
+
+## 操纵属性标志
+
+### `writable` 标志
+
+`writable` 标志指定是否可以写入属性。当 `writable` 为 `false` 时，在非严格模式下尝试为该属性赋值会静默失败，而在严格模式下会抛出 `TypeError`。
+
+```js live
+const obj = {};
+
+Object.defineProperty(obj, 'name', {
+  writable: false,
+  value: 'John Doe',
+});
+
+console.log(obj.name); // Output: John Doe
+obj.name = 'Jane Doe'; // This does not change name. Generates TypeError in strict mode
+console.log(obj.name); // Output: John Doe (unchanged)
+```
+
+### `enumerable` 标志
+
+`enumerable` 标志指定一个属性是否可枚举。`enumerable` 标志设置为 `true`，这意味着该属性在 `for...in` 循环中可见。
+
+```js live
+const obj = {};
+
+Object.defineProperty(obj, 'name', {
+  enumerable: false,
+  value: 'John Doe',
+});
+
+for (const prop in obj) {
+  console.log(prop); // Output: nothing
+}
+
+const obj1 = {};
+
+Object.defineProperty(obj1, 'name', {
+  enumerable: true,
+  value: 'John Doe',
+});
+
+for (const prop in obj1) {
+  console.log(prop); // Output: name
+}
+```
+
+## `configurable` 标志
+
+`configurable` 标志指定一个属性是否可以被删除或其属性是否可以被更改。当 `configurable` 为 `false` 时，在非严格模式下尝试删除或更改该属性会静默失败，而在严格模式下会抛出 `TypeError`。
+
+```js live
+const obj = {};
+
+Object.defineProperty(obj, 'name', {
+  configurable: false,
+  value: 'John Doe',
+});
+
+delete obj.name; // Does not delete property. Generates TypeError in strict mode
+console.log(obj.name); // Output: John Doe (not deleted)
+```
+
+## `Object.seal()`
+
+JavaScript 中的 `Object.seal()` 方法有效地阻止了向对象添加或删除属性，但仍然允许修改现有属性值。它还使所有属性变为不可配置，这意味着它们的描述符（如 `writable`、`enumerable` 和 `configurable`）无法更改。
+
+## 延伸阅读
+
+* [Object.defineProperty() | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)
+* [Property flags and descriptors | Javascript.info](https://javascript.info/property-descriptors)
+* [Object.seal() | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/seal)
diff --git a/questions/what-are-javascript-polyfills-for/en-US.langnostic.json b/questions/what-are-javascript-polyfills-for/en-US.langnostic.json
new file mode 100644
index 0000000..69ed304
--- /dev/null
+++ b/questions/what-are-javascript-polyfills-for/en-US.langnostic.json
@@ -0,0 +1,62 @@
+{
+  "frontmatter": {
+    "title": "e6181a69"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "30b924cf",
+        "6014f262",
+        "6c5bf15b",
+        "c5f93c97",
+        "f8d62d30",
+        "5cb33d95",
+        "2a7816d0",
+        "53cdde8",
+        "c7231b71",
+        "23d67c70",
+        "62e43a8f",
+        "44b3ebcf",
+        "eb0f191f",
+        "798b9972",
+        "f16e4aed",
+        "2a352a25",
+        "45df90e8",
+        "f82d827c",
+        "cd4edc9e",
+        "5cb33d95",
+        "1f4770e5",
+        "81dbf527"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "30b924cf",
+        "6014f262",
+        "6c5bf15b",
+        "c5f93c97",
+        "f8d62d30",
+        "5cb33d95",
+        "2a7816d0",
+        "53cdde8",
+        "c7231b71",
+        "23d67c70",
+        "62e43a8f",
+        "44b3ebcf",
+        "eb0f191f",
+        "798b9972",
+        "f16e4aed",
+        "2a352a25",
+        "45df90e8",
+        "f82d827c",
+        "cd4edc9e",
+        "5cb33d95",
+        "1f4770e5",
+        "81dbf527"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-javascript-polyfills-for/zh-CN.mdx b/questions/what-are-javascript-polyfills-for/zh-CN.mdx
new file mode 100644
index 0000000..ca5b443
--- /dev/null
+++ b/questions/what-are-javascript-polyfills-for/zh-CN.mdx
@@ -0,0 +1,100 @@
+---
+title: JavaScript 的 Polyfill 是什么？
+---
+
+## TL;DR
+
+JavaScript 中的 Polyfill 是一段代码，它为较旧的浏览器提供现代功能，而这些浏览器本身并不原生支持这些功能。它们弥合了现代浏览器中可用的 JavaScript 语言特性和 API 与旧版本浏览器有限功能之间的差距。
+
+它们可以手动实现或通过库引入，并且通常与功能检测结合使用。
+
+常见用例包括：
+
+* **新的 JavaScript 方法**：例如，`Array.prototype.includes()`、`Object.assign()` 等。
+* **新的 API**：例如 `fetch()`、`Promise`、`IntersectionObserver` 等。现代浏览器现在支持这些，但很长一段时间内它们必须被 polyfilled。
+
+用于 polyfill 的库和服务：
+
+* **`core-js`**：一个用于 JavaScript 的模块化标准库，其中包括各种 ECMAScript 特性的 polyfill。
+
+  ```js
+  import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.
+
+  [1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]
+  ```
+
+* **Polyfill.io**：一项服务，根据请求中指定的功能和用户代理提供 polyfill。
+
+  ```js
+  <script src="https://polyfill.io/v3/polyfill.min.js"></script>
+  ```
+
+***
+
+## JavaScript 中的 Polyfill
+
+JavaScript 中的 Polyfill 是一段代码（通常是 JavaScript），它在较旧的浏览器上提供现代功能，而这些浏览器本身并不原生支持这些功能。它们使开发人员能够使用该语言和 API 的较新功能，同时保持与旧环境的兼容性。
+
+## Polyfill 的工作原理
+
+Polyfill 检测浏览器中是否缺少某个功能或 API，并使用现有的 JavaScript 功能提供该功能的自定义实现。这使开发人员能够使用最新的 JavaScript 功能和 API 编写代码，而无需担心浏览器兼容性问题。
+
+例如，让我们考虑一下 `Array.prototype.includes()` 方法，该方法确定数组是否包含特定元素。较旧的浏览器（如 Internet Explorer 11）不支持此方法。为了解决这个问题，我们可以使用 polyfill：
+
+```js live
+// Polyfill for Array.prototype.includes()
+if (!Array.prototype.includes) {
+  Array.prototype.includes = function (searchElement) {
+    for (var i = 0; i < this.length; i++) {
+      if (this[i] === searchElement) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+}
+
+console.log([1, 2, 3].includes(2)); // true
+console.log([1, 2, 3].includes(4)); // false
+```
+
+通过包含此 polyfill，即使在原生不支持它的浏览器中，我们也可以安全地使用 `Array.prototype.includes()`。
+
+## 实现 polyfill
+
+1. **确定缺失的功能**：确定该功能是否与目标浏览器兼容，或使用 `typeof`、`in` 或 `window` 等功能检测方法检测其是否存在。
+2. **编写后备实现**：开发提供类似功能的后备实现，可以使用预先存在的 polyfill 库或纯 JavaScript 代码。
+3. **测试 polyfill**：彻底测试 polyfill，以确保它在不同的上下文和浏览器中按预期运行。
+4. **实现 polyfill**：将使用缺失功能的代码包含在 if 语句中，该语句检查功能支持。如果不支持，则运行 polyfill 代码。
+
+### 考虑事项
+
+* **选择性加载**：polyfill 应该仅针对需要它们的浏览器加载，以优化性能。
+* **功能检测**：在应用 polyfill 之前执行功能检测，以避免覆盖原生实现或应用不必要的 polyfill。
+* **大小和性能**：polyfill 可能会增加 JavaScript 捆绑包的大小，因此应使用缩小和压缩技术来减轻这种影响。
+* **现有库**：考虑使用现有的库和工具，这些库和工具为多个功能提供全面的 polyfill 解决方案，有效地处理功能检测、条件加载和后备
+
+### 用于 polyfill 的库和服务
+
+* **`core-js`**：一个用于 JavaScript 的模块化标准库，其中包括各种 ECMAScript 特性的 polyfill。
+
+  ```js
+  import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.
+
+  [1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]
+  ```
+
+* **Polyfill.io**：一项服务，根据请求中指定的功能和用户代理提供 polyfill。
+
+  ```js
+  <script src="https://polyfill.io/v3/polyfill.min.js"></script>
+  ```
+
+## 延伸阅读
+
+* [Polyfill - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Polyfill)
+* [Polyfills and transpilers](https://javascript.info/polyfills)
+* [Polyfills: How do they work?](https://medium.com/alienbrains/polyfills-how-do-they-work-ea6a12b792b)
+* [Polyfill in Javascript](https://www.linkedin.com/pulse/polyfill-javascript-divyansh-singh)
+* [Shubham Dutta](https://dev.to/shubhamdutta2000/polyfills-for-javascript-a-full-overview-3f7m)
diff --git a/questions/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/en-US.langnostic.json b/questions/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/en-US.langnostic.json
new file mode 100644
index 0000000..4d2ad35
--- /dev/null
+++ b/questions/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/en-US.langnostic.json
@@ -0,0 +1,48 @@
+{
+  "frontmatter": {
+    "title": "ee245e83"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "6b1c69bb",
+        "2a7816d0",
+        "c7180174",
+        "8ac4729d",
+        "db5f2029",
+        "748ffe75",
+        "6ab5ecbf",
+        "74edc431",
+        "5740dba6",
+        "748ffe75",
+        "3d044d6e",
+        "a014c83",
+        "622fba73",
+        "1f4770e5",
+        "3b413740"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "6b1c69bb",
+        "2a7816d0",
+        "c7180174",
+        "8ac4729d",
+        "db5f2029",
+        "748ffe75",
+        "6ab5ecbf",
+        "74edc431",
+        "5740dba6",
+        "748ffe75",
+        "3d044d6e",
+        "a014c83",
+        "622fba73",
+        "1f4770e5",
+        "3b413740"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/zh-CN.mdx b/questions/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/zh-CN.mdx
new file mode 100644
index 0000000..8472684
--- /dev/null
+++ b/questions/what-are-mocks-and-stubs-and-how-are-they-used-in-testing/zh-CN.mdx
@@ -0,0 +1,54 @@
+---
+title: 什么是模拟和存根，以及它们在测试中如何使用？
+---
+
+## TL;DR
+
+模拟和存根是用于测试的工具，用于模拟真实对象的行为。存根为函数调用提供预定义的响应，而模拟更复杂，可以验证交互，例如是否调用了函数以及使用什么参数。存根用于将正在测试的代码与外部依赖项隔离，而模拟用于确保代码与这些依赖项正确交互。
+
+***
+
+## 什么是模拟和存根，以及它们在测试中如何使用？
+
+### 存根
+
+存根是简单的对象，它们为测试期间进行的函数调用提供预定义的响应。它们用于通过提供受控响应来将正在测试的代码与外部依赖项（例如数据库或 API）隔离。
+
+#### 示例
+
+```js
+// 一个用于获取用户数据的函数的简单存根
+const fetchUserDataStub = sinon.stub();
+fetchUserDataStub.returns({ id: 1, name: 'John Doe' });
+
+// 在测试中使用存根
+const userData = fetchUserDataStub();
+console.log(userData); // { id: 1, name: 'John Doe' }
+```
+
+### 模拟
+
+模拟比存根更复杂。它们不仅提供预定义的响应，还记录有关如何调用它们的信息。这使您可以验证交互，例如是否调用了函数、调用了多少次以及使用什么参数。
+
+#### 示例
+
+```js
+// 一个用于记录用户数据的函数的简单模拟
+const logUserDataMock = sinon.mock();
+logUserDataMock.expects('log').once().withArgs({ id: 1, name: 'John Doe' });
+
+// 在测试中使用模拟
+logUserDataMock.log({ id: 1, name: 'John Doe' });
+logUserDataMock.verify(); // 验证 log 方法是否使用指定的参数调用了一次
+```
+
+### 何时使用存根和模拟
+
+* **存根**：当您需要将正在测试的代码与外部依赖项隔离并控制这些依赖项提供的响应时，请使用存根。
+* **模拟**：当您需要验证代码是否与外部依赖项正确交互时，例如确保使用正确的参数调用函数时，请使用模拟。
+
+## 延伸阅读
+
+* [Sinon.js 文档](https://sinonjs.org/releases/latest/)
+* [Mocks Aren't Stubs](https://martinfowler.com/articles/mocksArentStubs.html) 作者：Martin Fowler
+* [使用模拟和存根测试 JavaScript](https://www.sitepoint.com/testing-javascript-mocks-stubs/) on SitePoint
diff --git a/questions/what-are-modules-and-why-are-they-useful/en-US.langnostic.json b/questions/what-are-modules-and-why-are-they-useful/en-US.langnostic.json
new file mode 100644
index 0000000..8ab99a8
--- /dev/null
+++ b/questions/what-are-modules-and-why-are-they-useful/en-US.langnostic.json
@@ -0,0 +1,76 @@
+{
+  "frontmatter": {
+    "title": "b77edd7c"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "94016d21",
+        "35eb5fbe",
+        "2a7816d0",
+        "7d35de8e",
+        "760c4d8",
+        "e5354ea3",
+        "6d415e3b",
+        "d8d280e1",
+        "aa2ac676",
+        "cac7fdb8",
+        "de3eb95a",
+        "33ee4683",
+        "e0c9540e",
+        "86f854df",
+        "fe05ffd7",
+        "119f8a",
+        "3d68a40d",
+        "a232298b",
+        "afcabce6",
+        "8b451d4e",
+        "678c7eef",
+        "c833fa2",
+        "dd3f296e",
+        "e55f825e",
+        "f0af1f59",
+        "1a1c67e6",
+        "5ee88686",
+        "1f4770e5",
+        "3a8c9a7b"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "94016d21",
+        "35eb5fbe",
+        "2a7816d0",
+        "7d35de8e",
+        "760c4d8",
+        "e5354ea3",
+        "6d415e3b",
+        "d8d280e1",
+        "aa2ac676",
+        "cac7fdb8",
+        "de3eb95a",
+        "33ee4683",
+        "e0c9540e",
+        "86f854df",
+        "fe05ffd7",
+        "119f8a",
+        "3d68a40d",
+        "a232298b",
+        "afcabce6",
+        "8b451d4e",
+        "678c7eef",
+        "c833fa2",
+        "dd3f296e",
+        "e55f825e",
+        "f0af1f59",
+        "1a1c67e6",
+        "5ee88686",
+        "1f4770e5",
+        "3a8c9a7b"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-modules-and-why-are-they-useful/zh-CN.mdx b/questions/what-are-modules-and-why-are-they-useful/zh-CN.mdx
new file mode 100644
index 0000000..524e015
--- /dev/null
+++ b/questions/what-are-modules-and-why-are-they-useful/zh-CN.mdx
@@ -0,0 +1,102 @@
+---
+title: 什么是模块以及它们为什么有用？
+---
+
+## TL;DR
+
+模块是可重用的代码片段，可以在项目中的不同文件之间导入和导出。它们有助于组织代码，使其更易于维护和扩展。通过使用模块，您可以避免全局命名空间污染并更有效地管理依赖关系。在 JavaScript 中，您可以使用 `import` 和 `export` 语句来处理模块。
+
+```js
+// myModule.js
+export const myFunction = () => {
+  console.log('Hello, World!');
+};
+
+// main.js
+import { myFunction } from './myModule.js';
+myFunction(); // Outputs: Hello, World!
+```
+
+***
+
+## 什么是模块以及它们为什么有用？
+
+### 模块的定义
+
+模块是自包含的代码单元，封装了功能，可以在应用程序的不同部分之间导入和导出。它们允许开发人员将复杂的应用程序分解成更小、更易于管理的部分。
+
+### 使用模块的好处
+
+#### 代码组织
+
+模块通过将相关功能组合在一起，帮助组织代码。这使得代码库更易于导航和理解。
+
+#### 可维护性
+
+通过将代码分解成更小的模块，更容易维护和更新。一个模块中的更改不太可能影响应用程序的其他部分。
+
+#### 可重用性
+
+模块可以在应用程序的不同部分甚至不同项目中重复使用。这减少了代码重复，并促进了 DRY（不要重复自己）原则。
+
+#### 避免全局命名空间污染
+
+模块通过将变量和函数封装在其自己的作用域内，有助于避免全局命名空间污染。这降低了命名冲突的风险，并使代码更健壮。
+
+#### 依赖管理
+
+模块使管理应用程序不同部分之间的依赖关系更容易。您可以显式声明一个模块依赖于什么以及它导出什么，使代码更可预测且更易于调试。
+
+### 在 JavaScript 中使用模块
+
+#### 从模块导出
+
+您可以使用 `export` 关键字从模块中导出变量、函数或类。
+
+```js
+// myModule.js
+export const myVariable = 42;
+export function myFunction() {
+  console.log('Hello, World!');
+}
+export class MyClass {
+  constructor() {
+    console.log('MyClass instance created');
+  }
+}
+```
+
+#### 导入到模块中
+
+您可以使用 `import` 关键字从另一个模块导入变量、函数或类。
+
+```js
+// main.js
+import { myVariable, myFunction, MyClass } from './myModule.js';
+
+console.log(myVariable); // Outputs: 42
+myFunction(); // Outputs: Hello, World!
+const myClassInstance = new MyClass(); // Outputs: MyClass instance created
+```
+
+#### 默认导出
+
+一个模块可以有一个默认导出，可以在不使用大括号的情况下导入。
+
+```js
+// myModule.js
+const myDefaultFunction = () => {
+  console.log('Default export function');
+};
+export default myDefaultFunction;
+
+// main.js
+import myDefaultFunction from './myModule.js';
+myDefaultFunction(); // Outputs: Default export function
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
+* [MDN Web Docs: Export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)
+* [JavaScript Modules: A Beginner’s Guide](https://www.sitepoint.com/understanding-es6-modules/)
diff --git a/questions/what-are-progressive-web-applications-pwas/en-US.langnostic.json b/questions/what-are-progressive-web-applications-pwas/en-US.langnostic.json
new file mode 100644
index 0000000..a0f1443
--- /dev/null
+++ b/questions/what-are-progressive-web-applications-pwas/en-US.langnostic.json
@@ -0,0 +1,58 @@
+{
+  "frontmatter": {
+    "title": "53aedac1"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "87137522",
+        "2a7816d0",
+        "c128350b",
+        "25841bc3",
+        "c809c133",
+        "b6df0131",
+        "3e0f9fdd",
+        "a013ec6f",
+        "a4184ac7",
+        "e2d426d2",
+        "48fe022b",
+        "5b09eda8",
+        "7768403f",
+        "6ecf6518",
+        "8cc56a7",
+        "5994c607",
+        "2819c383",
+        "b3fe5e2a",
+        "1f4770e5",
+        "1e062e5d"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "87137522",
+        "2a7816d0",
+        "c128350b",
+        "25841bc3",
+        "c809c133",
+        "b6df0131",
+        "3e0f9fdd",
+        "a013ec6f",
+        "a4184ac7",
+        "e2d426d2",
+        "48fe022b",
+        "5b09eda8",
+        "7768403f",
+        "6ecf6518",
+        "8cc56a7",
+        "5994c607",
+        "2819c383",
+        "b3fe5e2a",
+        "1f4770e5",
+        "1e062e5d"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-progressive-web-applications-pwas/zh-CN.mdx b/questions/what-are-progressive-web-applications-pwas/zh-CN.mdx
new file mode 100644
index 0000000..9771e41
--- /dev/null
+++ b/questions/what-are-progressive-web-applications-pwas/zh-CN.mdx
@@ -0,0 +1,89 @@
+---
+title: 什么是渐进式 Web 应用程序 (PWA)？
+---
+
+## TL;DR
+
+渐进式 Web 应用程序 (PWA) 是使用现代 Web 功能为用户提供类似应用程序体验的 Web 应用程序。它们可靠、快速且引人入胜。PWA 可以离线工作、发送推送通知，并安装在用户的 home 屏幕上。它们利用服务工作者、Web 应用程序清单和 HTTPS 等技术来提供这些功能。
+
+***
+
+## 什么是渐进式 Web 应用程序 (PWA)？
+
+### 定义
+
+渐进式 Web 应用程序 (PWA) 是结合了 Web 和移动应用程序优点的 Web 应用程序。它们使用 HTML、CSS 和 JavaScript 等标准 Web 技术构建，但提供了增强的功能，使其感觉像原生应用程序。
+
+### 关键特征
+
+* **渐进式**：它们适用于每个用户，无论浏览器选择如何，因为它们以渐进式增强为核心原则构建。
+* **响应式**：它们适合任何外形尺寸，无论是桌面、移动设备还是平板电脑。
+* **独立于连接**：它们可以使用服务工作者离线或在低质量网络上工作。
+* **类似应用程序**：它们通过类似应用程序的交互和导航为用户提供类似应用程序的体验。
+* **新鲜**：由于服务工作者更新过程，它们始终保持最新状态。
+* **安全**：它们通过 HTTPS 提供，以防止窥探并确保内容未被篡改。
+* **可发现**：由于 W3C 清单和服务工作者注册，它们被标识为“应用程序”，从而允许搜索引擎找到它们。
+* **可重新参与**：它们可以发送推送通知以重新吸引用户。
+* **可安装**：它们允许用户将他们认为最有用的应用程序添加到他们的 home 屏幕，而无需麻烦的应用程序商店。
+* **可链接**：它们可以通过 URL 轻松共享，并且不需要复杂的安装。
+
+### 核心技术
+
+#### 服务工作者
+
+服务工作者是在后台运行的脚本，与网页分开，支持离线功能、后台同步和推送通知等功能。
+
+```js
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker
+    .register('/service-worker.js')
+    .then(function (registration) {
+      console.log('Service Worker registered with scope:', registration.scope);
+    })
+    .catch(function (error) {
+      console.log('Service Worker registration failed:', error);
+    });
+}
+```
+
+#### Web 应用程序清单
+
+Web 应用程序清单是一个 JSON 文件，它提供有关应用程序的元数据（名称、图标、启动 URL 等），并允许将其安装在用户的 home 屏幕上。
+
+```json
+{
+  "name": "My PWA",
+  "short_name": "PWA",
+  "start_url": "/index.html",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "icons": [
+    {
+      "src": "icon/lowres.webp",
+      "sizes": "48x48",
+      "type": "image/webp"
+    },
+    {
+      "src": "icon/hd_hi.ico",
+      "sizes": "72x72 96x96 128x128 256x256"
+    }
+  ]
+}
+```
+
+#### HTTPS
+
+PWA 必须通过 HTTPS 提供以确保安全性和隐私。这是服务工作者和其他高级 Web 功能的要求。
+
+### 优势
+
+* **改进的性能**：PWA 加载速度更快，并提供更流畅的用户体验。
+* **增加的参与度**：推送通知和 home 屏幕安装等功能有助于保持用户的参与度。
+* **具有成本效益**：开发 PWA 可能比为不同平台构建单独的本地应用程序更具成本效益。
+
+## 延伸阅读
+
+* [Google Developers: Progressive Web Apps](https://developers.google.com/web/progressive-web-apps)
+* [MDN Web Docs: Progressive web apps (PWAs)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)
+* [Web.dev: What are Progressive Web Apps?](https://web.dev/what-are-pwas/)
diff --git a/questions/what-are-promises-and-how-do-they-work/en-US.langnostic.json b/questions/what-are-promises-and-how-do-they-work/en-US.langnostic.json
new file mode 100644
index 0000000..c2f0c0a
--- /dev/null
+++ b/questions/what-are-promises-and-how-do-they-work/en-US.langnostic.json
@@ -0,0 +1,66 @@
+{
+  "frontmatter": {
+    "title": "43e8bb48"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "972d7668",
+        "2e5d8b18",
+        "2a7816d0",
+        "7b0ef71b",
+        "25841bc3",
+        "8d58a92e",
+        "e1eb96f4",
+        "8b2e7a29",
+        "a0e95d3d",
+        "a65a9210",
+        "b8d009d2",
+        "fd1653dc",
+        "940ecc2c",
+        "49045cb5",
+        "b31c193",
+        "b3413023",
+        "8e15a651",
+        "f4d4913a",
+        "343890f2",
+        "e5721686",
+        "1046830e",
+        "64794c1e",
+        "1f4770e5",
+        "75b959da"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "972d7668",
+        "2e5d8b18",
+        "2a7816d0",
+        "7b0ef71b",
+        "25841bc3",
+        "8d58a92e",
+        "e1eb96f4",
+        "8b2e7a29",
+        "a0e95d3d",
+        "a65a9210",
+        "b8d009d2",
+        "fd1653dc",
+        "940ecc2c",
+        "49045cb5",
+        "b31c193",
+        "b3413023",
+        "8e15a651",
+        "f4d4913a",
+        "343890f2",
+        "e5721686",
+        "1046830e",
+        "64794c1e",
+        "1f4770e5",
+        "75b959da"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-promises-and-how-do-they-work/zh-CN.mdx b/questions/what-are-promises-and-how-do-they-work/zh-CN.mdx
new file mode 100644
index 0000000..7487168
--- /dev/null
+++ b/questions/what-are-promises-and-how-do-they-work/zh-CN.mdx
@@ -0,0 +1,131 @@
+---
+title: 什么是 Promise 以及它们如何工作？
+---
+
+## TL;DR
+
+JavaScript 中的 Promise 是表示异步操作最终完成（或失败）及其结果值的对象。它们有三种状态：`pending`、`fulfilled` 和 `rejected`。您可以使用 `.then()` 方法处理 Promise 的结果以获取成功的结果，使用 `.catch()` 方法处理错误。
+
+```js live
+let promise = new Promise((resolve, reject) => {
+  // asynchronous operation
+  const success = true;
+  if (success) {
+    resolve('Success!');
+  } else {
+    reject('Error!');
+  }
+});
+
+promise
+  .then((result) => {
+    console.log(result); // 'Success!' (this will print)
+  })
+  .catch((error) => {
+    console.error(error); // 'Error!'
+  });
+```
+
+***
+
+## 什么是 Promise 以及它们如何工作？
+
+### 定义
+
+Promise 是一种在 JavaScript 中处理异步操作的方式。与传统的 callback 函数相比，它们提供了一种更清晰、更易读的方式来处理异步代码。
+
+### Promise 的状态
+
+一个 Promise 可以处于以下三种状态之一：
+
+* `Pending`：初始状态，既未完成也未拒绝。
+* `Fulfilled`：操作成功完成。
+* `Rejected`：操作失败。
+
+### 创建一个 Promise
+
+您可以使用 `Promise` 构造函数创建一个 Promise，该构造函数接受一个带有两个参数的函数：`resolve` 和 `reject`。这些是您用来更改 Promise 状态的回调函数。
+
+```js live
+let promise = new Promise((resolve, reject) => {
+  // asynchronous operation
+  const success = true;
+  if (success) {
+    resolve('Success!');
+  } else {
+    reject('Error!');
+  }
+});
+```
+
+### 处理 Promise
+
+要处理 Promise 的结果，您可以使用 `.then()` 方法来获取成功的结果，使用 `.catch()` 方法来获取错误。
+
+```js live
+let promise = new Promise((resolve, reject) => {
+  // asynchronous operation
+  const success = false;
+  if (success) {
+    resolve('Success!');
+  } else {
+    reject('Error!');
+  }
+});
+
+promise
+  .then((result) => {
+    console.log(result); // 'Success!'
+  })
+  .catch((error) => {
+    console.error(error); // 'Error!' (this will print)
+  });
+```
+
+### 链式 Promise
+
+Promise 可以链接起来以按顺序处理多个异步操作。每个 `.then()` 都会返回一个新的 Promise，从而允许进一步链接。
+
+```js live
+new Promise((resolve, reject) => {
+  setTimeout(() => {
+    resolve('Promise 1 resolved after 1 second');
+  }, 1000);
+})
+  .then((result) => {
+    console.log(result);
+    return 'Another promise';
+  })
+  .then((anotherResult) => {
+    console.log(anotherResult);
+  })
+  .catch((error) => {
+    console.error(error);
+  });
+```
+
+### 组合 Promise
+
+您可以使用 `Promise.all()` 并行运行多个 promise，并等待它们全部完成。
+
+```js live
+let promise1 = Promise.resolve('First');
+let promise2 = Promise.resolve('Second');
+let promise3 = new Promise((resolve, reject) => {
+  setTimeout(() => {
+    resolve('Third');
+  }, 2000);
+});
+
+Promise.all([promise1, promise2, promise3]).then((results) => {
+  console.log(results); // ['First', 'Second', 'Third']
+});
+```
+
+在上面的例子中，虽然 `promise1` 和 `promise2` 立即完成，但 `Promise.all` 会等待 `promise3`，它需要 2 秒钟，然后才会记录结果。
+
+## 延伸阅读
+
+* [MDN Web Docs: Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+* [JavaScript.info: Promises](https://javascript.info/promise-basics)
+* [You Don't Know JS: Promises](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/get-started/ch11.md#promises)
diff --git a/questions/what-are-proxies-in-javascript-used-for/en-US.langnostic.json b/questions/what-are-proxies-in-javascript-used-for/en-US.langnostic.json
new file mode 100644
index 0000000..92f11d1
--- /dev/null
+++ b/questions/what-are-proxies-in-javascript-used-for/en-US.langnostic.json
@@ -0,0 +1,98 @@
+{
+  "frontmatter": {
+    "title": "95b4aadc"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "1792064b",
+        "e17d8fa2",
+        "9dee662b",
+        "fb2e4b76",
+        "65ed4859",
+        "2a7816d0",
+        "f6caf337",
+        "819fe3",
+        "b786ee7",
+        "3c7af4ff",
+        "ca3db77f",
+        "3a81da43",
+        "9c639e26",
+        "becb2d1",
+        "4591913",
+        "d818552d",
+        "14f124cd",
+        "77e7e192",
+        "8d5f7b65",
+        "85b9f81a",
+        "9c8f784d",
+        "b880edd8",
+        "19606c83",
+        "d37daf2a",
+        "43a614a8",
+        "bb5f3c18",
+        "10e7c501",
+        "6f129e4f",
+        "9741b8e2",
+        "43f23e8e",
+        "ca09745c",
+        "65435984",
+        "be11f5be",
+        "98345b7d",
+        "1184dada",
+        "5754621e",
+        "67a1d4f3",
+        "db1e30d",
+        "1f4770e5",
+        "f191c537"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "1792064b",
+        "e17d8fa2",
+        "9dee662b",
+        "fb2e4b76",
+        "65ed4859",
+        "2a7816d0",
+        "f6caf337",
+        "819fe3",
+        "b786ee7",
+        "3c7af4ff",
+        "ca3db77f",
+        "3a81da43",
+        "9c639e26",
+        "becb2d1",
+        "4591913",
+        "d818552d",
+        "14f124cd",
+        "77e7e192",
+        "8d5f7b65",
+        "85b9f81a",
+        "9c8f784d",
+        "b880edd8",
+        "19606c83",
+        "d37daf2a",
+        "43a614a8",
+        "bb5f3c18",
+        "10e7c501",
+        "6f129e4f",
+        "9741b8e2",
+        "43f23e8e",
+        "ca09745c",
+        "65435984",
+        "be11f5be",
+        "98345b7d",
+        "1184dada",
+        "5754621e",
+        "67a1d4f3",
+        "db1e30d",
+        "1f4770e5",
+        "f191c537"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-proxies-in-javascript-used-for/zh-CN.mdx b/questions/what-are-proxies-in-javascript-used-for/zh-CN.mdx
new file mode 100644
index 0000000..3b79d98
--- /dev/null
+++ b/questions/what-are-proxies-in-javascript-used-for/zh-CN.mdx
@@ -0,0 +1,230 @@
+---
+title: JavaScript 中的代理有什么用？
+---
+
+## TL;DR
+
+在 JavaScript 中，代理是一个充当对象和代码之间中介的 对象。代理用于拦截和自定义 JavaScript 对象的基本操作，例如属性访问、赋值、函数调用等。
+
+以下是使用 `Proxy` 记录每个属性访问的基本示例：
+
+```js live
+const myObject = {
+  name: 'John',
+  age: 42,
+};
+
+const handler = {
+  get: function (target, prop, receiver) {
+    console.log(`Someone accessed property "${prop}"`);
+    return target[prop];
+  },
+};
+
+const proxiedObject = new Proxy(myObject, handler);
+
+console.log(proxiedObject.name);
+// Someone accessed property "name"
+// 'John'
+
+console.log(proxiedObject.age);
+// Someone accessed property "age"
+// 42
+```
+
+用例包括：
+
+* **属性访问拦截**：拦截和自定义对对象的属性访问。
+  * **属性赋值验证**：在将属性值设置到目标对象之前验证它们。
+  * **日志记录和调试**：创建用于记录和调试与对象交互的包装器
+  * **创建反应式系统**：当对象属性更改时，触发应用程序其他部分的更新（数据绑定）。
+  * **数据转换**：转换从对象设置或检索的数据。
+  * **在测试中模拟和存根**：为测试目的创建模拟或存根对象，允许您隔离依赖项并专注于被测单元
+* **函数调用拦截**：用于缓存和返回经常访问的方法的结果（如果它们涉及网络调用或计算密集型逻辑），从而提高性能
+* **动态属性创建**：用于即时定义具有默认值的属性，并避免在对象中存储冗余数据。
+
+***
+
+## JavaScript 代理
+
+在 JavaScript 中，代理是一个允许您自定义另一个对象（通常称为目标对象）行为的对象。代理可以拦截和重新定义目标对象的各种操作，例如属性访问、赋值、枚举、函数调用等。这使得代理成为各种用例的强大工具，包括但不限于验证、日志记录、性能监控和实现高级数据结构。
+
+以下是代理在 JavaScript 中使用的一些常见用例和示例：
+
+### 属性访问拦截
+
+代理可用于拦截和自定义对对象的属性访问。
+
+```js live
+const target = {
+  message: 'Hello, world!',
+};
+
+const handler = {
+  get: function (target, property) {
+    if (property in target) {
+      return target[property];
+    }
+
+    return `Property ${property} does not exist.`;
+  },
+};
+
+const proxy = new Proxy(target, handler);
+
+console.log(proxy.message); // Hello, world!
+console.log(proxy.nonExistentProperty); // Property nonExistentProperty does not exist.
+```
+
+#### 创建用于日志记录和调试的包装器
+
+这对于创建用于记录和调试与对象交互的包装器很有用。
+
+```js live
+const target = {
+  name: 'Alice',
+  age: 30,
+};
+
+const handler = {
+  get: function (target, property) {
+    console.log(`Getting property ${property}`);
+    return target[property];
+  },
+  set: function (target, property, value) {
+    console.log(`Setting property ${property} to ${value}`);
+    target[property] = value;
+    return true;
+  },
+};
+
+const proxy = new Proxy(target, handler);
+
+console.log(proxy.name); // Output: Getting property name
+//         Alice
+proxy.age = 31; // Output: Setting property age to 31
+console.log(proxy.age); // Output: Getting property age
+//         31
+```
+
+#### 属性赋值验证
+
+代理可用于在将属性值设置到目标对象之前验证它们。
+
+```js live
+const target = {
+  age: 25,
+};
+
+const handler = {
+  set: function (target, property, value) {
+    if (property === 'age' && typeof value !== 'number') {
+      throw new TypeError('Age must be a number');
+    }
+    target[property] = value;
+    return true;
+  },
+};
+
+const proxy = new Proxy(target, handler);
+
+proxy.age = 30; // Works fine
+proxy.age = 'thirty'; // Throws TypeError: Age must be a number
+```
+
+#### 创建响应式系统
+
+代理通常用于在对象属性更改时触发应用程序其他部分的更新（数据绑定）。
+
+一个实际的例子是像 [Vue.js](https://vuejs.org/) 这样的 JavaScript 框架，其中代理用于[创建响应式系统，当数据更改时自动更新 UI](https://vuejs.org/guide/extras/reactivity-in-depth.html)。
+
+```js live
+const target = {
+  firstName: 'John',
+  lastName: 'Doe',
+};
+
+const handler = {
+  set: function (target, property, value) {
+    console.log(`Property ${property} set to ${value}`);
+    target[property] = value;
+    // Automatically update the UI or perform other actions
+    return true;
+  },
+};
+
+const proxy = new Proxy(target, handler);
+
+proxy.firstName = 'Jane'; // Output: Property firstName set to Jane
+```
+
+访问拦截的其他用例包括：
+
+* **模拟和存根**：代理可用于创建用于测试目的的模拟或存根对象，允许您隔离依赖项并专注于被测单元。
+
+### 函数调用拦截
+
+代理可以拦截和自定义函数调用。
+
+```js live
+const target = function (name) {
+  return `Hello, ${name}!`;
+};
+
+const handler = {
+  apply: function (target, thisArg, argumentsList) {
+    console.log(`Called with arguments: ${argumentsList}`);
+    return target.apply(thisArg, argumentsList);
+  },
+};
+
+const proxy = new Proxy(target, handler);
+
+console.log(proxy('Alice')); // Called with arguments: Alice
+// Hello, Alice!
+```
+
+如果频繁访问的方法涉及网络调用或计算密集型逻辑，则此拦截可用于缓存并返回结果，从而通过减少发出的请求/计算次数来提高性能。
+
+### 动态属性创建
+
+代理可用于动态地在对象上创建属性或方法。这对于使用默认值即时定义属性并避免在对象中存储冗余数据非常有用。
+
+```js live
+const target = {};
+
+const handler = {
+  get: function (target, property) {
+    if (!(property in target)) {
+      target[property] = `Dynamic property ${property}`;
+    }
+    return target[property];
+  },
+};
+
+const proxy = new Proxy(target, handler);
+
+console.log(proxy.newProp); // Output: Dynamic property newProp
+console.log(proxy.anotherProp); // Output: Dynamic property anotherProp
+```
+
+### 实现对象关系映射器 (ORM)
+
+代理可用于创建数据库记录的对象，方法是拦截属性访问以从数据库中惰性加载数据。这提供了一个更面向对象的接口来与数据库交互。
+
+## 实际用例
+
+许多流行的库，尤其是状态管理解决方案，都是建立在 JavaScript 代理之上的：
+
+* **[Vue.js](https://vuejs.org/)**：Vue.js 是一个用于构建用户界面的渐进式框架。在 Vue 3 中，代理被广泛用于实现响应式系统。
+* **[MobX](https://mobx.js.org/)**：MobX 使用代理使对象和数组可观察，允许组件自动响应状态更改。
+* **[Immer](https://immerjs.github.io/)**：Immer 是一个允许您以更方便的方式使用不可变状态的库。它使用代理来跟踪更改并生成下一个不可变状态。
+
+## 总结
+
+JavaScript 中的代理提供了一种强大而灵活的方式来拦截和自定义对象上的操作。它们适用于广泛的应用程序，包括验证、日志记录、调试、动态属性创建和实现响应式系统。通过使用代理，开发人员可以创建更强大、更易于维护且功能更丰富的应用程序。
+
+## 延伸阅读
+
+* [Proxy - JavaScript | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
+* [Proxy and Reflect | JavaScript.info](https://zh.javascript.info/proxy)
diff --git a/questions/what-are-rest-parameters-and-how-are-they-used/en-US.langnostic.json b/questions/what-are-rest-parameters-and-how-are-they-used/en-US.langnostic.json
new file mode 100644
index 0000000..01956e6
--- /dev/null
+++ b/questions/what-are-rest-parameters-and-how-are-they-used/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "28fb9ff6"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "1565e945",
+        "687a2be1",
+        "2a7816d0",
+        "39bbed2f",
+        "25841bc3",
+        "1b87c763",
+        "eea083fa",
+        "a1a9c693",
+        "7c3f8893",
+        "4abfb705",
+        "8824fed9",
+        "5883129f",
+        "5cbf814",
+        "687a2be1",
+        "33174994",
+        "415fae55",
+        "a5e52a92",
+        "e19c111a",
+        "4135df60",
+        "31704ea",
+        "d4ff1ce1",
+        "1f4770e5",
+        "a94ca589"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "1565e945",
+        "687a2be1",
+        "2a7816d0",
+        "39bbed2f",
+        "25841bc3",
+        "1b87c763",
+        "eea083fa",
+        "a1a9c693",
+        "7c3f8893",
+        "4abfb705",
+        "8824fed9",
+        "5883129f",
+        "5cbf814",
+        "687a2be1",
+        "33174994",
+        "415fae55",
+        "a5e52a92",
+        "e19c111a",
+        "4135df60",
+        "31704ea",
+        "d4ff1ce1",
+        "1f4770e5",
+        "a94ca589"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-rest-parameters-and-how-are-they-used/zh-CN.mdx b/questions/what-are-rest-parameters-and-how-are-they-used/zh-CN.mdx
new file mode 100644
index 0000000..6a13404
--- /dev/null
+++ b/questions/what-are-rest-parameters-and-how-are-they-used/zh-CN.mdx
@@ -0,0 +1,79 @@
+---
+title: 什么是剩余参数以及如何使用它们？
+---
+
+## TL;DR
+
+JavaScript 中的剩余参数允许函数将不定数量的参数作为数组接受。它们由三个点 (`...`) 后跟数组的名称表示。此功能对于需要处理多个参数而无需预先知道确切数量的函数很有用。
+
+```js live
+function sum(...numbers) {
+  return numbers.reduce((acc, curr) => acc + curr, 0);
+}
+
+console.log(sum(1, 2, 3, 4)); // Output: 10
+```
+
+***
+
+## 剩余参数
+
+### 定义
+
+剩余参数允许函数将不定数量的参数作为数组接受。它们由三个点 (`...`) 后跟数组的名称表示。
+
+### 语法
+
+剩余参数的语法很简单。您将三个点放在函数定义中最后一个参数的前面：
+
+```js live
+function myFunction(a, b, ...rest) {
+  // 'rest' is an array containing the remaining arguments
+  console.log(rest); // [3, 4, 5]
+}
+myFunction(1, 2, 3, 4, 5);
+```
+
+### 用法
+
+剩余参数在各种情况下都很有用，例如当您需要处理多个参数而无需预先知道它们的确切数量时。
+
+#### 示例：求和数字
+
+这是一个对不定数量的参数求和的函数的简单示例：
+
+```js live
+function sum(...numbers) {
+  return numbers.reduce((acc, curr) => acc + curr, 0);
+}
+
+console.log(sum(1, 2, 3, 4)); // Output: 10
+```
+
+在这个例子中，`sum` 函数使用剩余参数 `numbers` 将传递给它的所有参数收集到一个数组中。然后使用 `reduce` 方法对数组的元素求和。
+
+#### 示例：合并数组
+
+剩余参数也可用于将多个数组合并为一个：
+
+```js live
+function combineArrays(...arrays) {
+  return arrays.flat();
+}
+
+console.log(combineArrays([1, 2], [3, 4], [5, 6])); // Output: [1, 2, 3, 4, 5, 6]
+```
+
+在这个例子中，`combineArrays` 函数使用剩余参数 `arrays` 将传递给它的所有数组收集到一个数组中。然后使用 `flat` 方法将数组的数组展平为单个数组。
+
+### 重要提示
+
+* Rest 参数必须是函数定义中的最后一个参数。
+* 每个函数只允许一个 rest 参数。
+* Rest 参数与 `arguments` 对象不同，`arguments` 对象是一个类似数组的对象，可在所有非箭头函数中使用。
+
+## 延伸阅读
+
+* [MDN Web 文档：Rest 参数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/rest_parameters)
+* [JavaScript.info：Rest 参数和展开语法](https://zh.javascript.info/rest-parameters-spread)
+* [W3Schools：JavaScript 函数参数](https://www.w3schools.com/js/js_function_parameters.asp)
diff --git a/questions/what-are-server-sent-events/en-US.langnostic.json b/questions/what-are-server-sent-events/en-US.langnostic.json
new file mode 100644
index 0000000..680d0db
--- /dev/null
+++ b/questions/what-are-server-sent-events/en-US.langnostic.json
@@ -0,0 +1,72 @@
+{
+  "frontmatter": {
+    "title": "51c64fdf"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "83baecdd",
+        "55ecde0c",
+        "454290fa",
+        "2e4ffa4f",
+        "91abdf7e",
+        "e6c42032",
+        "1b2ee0a9",
+        "dfb629f",
+        "bca5ce78",
+        "2a7816d0",
+        "ebd29b4d",
+        "b2ca17f1",
+        "48bd7142",
+        "b6ada2c3",
+        "722e9703",
+        "9a7585f1",
+        "be7b0b3",
+        "39dd268e",
+        "226476b4",
+        "6cee5ab5",
+        "4f0feaeb",
+        "3d9ca7fd",
+        "b0f9ac60",
+        "67a1d4f3",
+        "af98fae2",
+        "1f4770e5",
+        "aae9ac85"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "83baecdd",
+        "55ecde0c",
+        "454290fa",
+        "2e4ffa4f",
+        "91abdf7e",
+        "e6c42032",
+        "1b2ee0a9",
+        "dfb629f",
+        "bca5ce78",
+        "2a7816d0",
+        "ebd29b4d",
+        "b2ca17f1",
+        "48bd7142",
+        "b6ada2c3",
+        "722e9703",
+        "9a7585f1",
+        "be7b0b3",
+        "39dd268e",
+        "226476b4",
+        "6cee5ab5",
+        "4f0feaeb",
+        "3d9ca7fd",
+        "b0f9ac60",
+        "67a1d4f3",
+        "af98fae2",
+        "1f4770e5",
+        "aae9ac85"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-server-sent-events/zh-CN.mdx b/questions/what-are-server-sent-events/zh-CN.mdx
new file mode 100644
index 0000000..ceff67e
--- /dev/null
+++ b/questions/what-are-server-sent-events/zh-CN.mdx
@@ -0,0 +1,200 @@
+---
+title: 什么是服务器发送事件？
+---
+
+## TL;DR
+
+[服务器发送事件 (SSE)](https://html.spec.whatwg.org/multipage/comms.html#the-eventsource-interface) 是一种标准，允许网页通过 HTTP 连接从服务器接收自动更新。服务器发送事件与 `EventSource` 实例一起使用，该实例打开与服务器的连接，并允许客户端从服务器接收事件。服务器发送事件创建的连接是持久的（类似于 `WebSocket`），但是有一些区别：
+
+| 属性 | `WebSocket` | `EventSource` |
+| --- | --- | --- |
+| 方向 | 双向 – 客户端和服务器都可以交换消息 | 单向 – 只有服务器发送数据 |
+| 数据类型 | 二进制和文本数据 | 仅文本数据 |
+| 协议 | WebSocket 协议 (`ws://`) | 常规 HTTP (`http://`) |
+
+**创建事件源**
+
+```js
+const eventSource = new EventSource('/sse-stream');
+```
+
+**监听事件**
+
+```js
+// 建立连接时触发。
+eventSource.addEventListener('open', () => {
+  console.log('连接已打开');
+});
+
+// 从服务器收到消息时触发。
+eventSource.addEventListener('message', (event) => {
+  console.log('收到消息：', event.data);
+});
+
+// 发生错误时触发。
+eventSource.addEventListener('error', (error) => {
+  console.error('发生错误：', error);
+});
+```
+
+**从服务器发送事件**
+
+```js
+const express = require('express');
+const app = express();
+
+app.get('/sse-stream', (req, res) => {
+  // `Content-Type` 需要设置为 `text/event-stream`。
+  res.setHeader('Content-Type', 'text/event-stream');
+  res.setHeader('Cache-Control', 'no-cache');
+  res.setHeader('Connection', 'keep-alive');
+
+  // 每条消息都应以 data 开头。
+  const sendEvent = (data) => res.write(`data: ${data}\n\n`);
+
+  sendEvent('来自服务器的问候');
+
+  const intervalId = setInterval(() => sendEvent(new Date().toString()), 1000);
+
+  res.on('close', () => {
+    console.log('客户端关闭连接');
+    clearInterval(intervalId);
+  });
+});
+
+app.listen(3000, () => console.log('服务器已在端口 3000 启动'));
+```
+
+在此示例中，服务器最初发送“来自服务器的问候”消息，然后每秒发送当前日期。连接保持活动状态，直到客户端将其关闭
+
+***
+
+## 服务器发送事件 (SSE)
+
+服务器发送事件 (SSE) 是一种标准，允许服务器通过单个、长连接的 HTTP 连接将更新推送到 Web 客户端。它支持实时更新，而无需客户端不断轮询服务器以获取新数据。
+
+## SSE 的工作原理
+
+1. 客户端创建一个新的 `EventSource` 对象，传递将生成事件流的 `服务器端` 脚本的 URL：
+
+   ```js
+   const eventSource = new EventSource('/event-stream');
+   ```
+
+2. 服务器端脚本设置适当的标头以指示它将发送事件流 (`Content-Type: text/event-stream`)，然后开始向客户端发送事件。
+
+3. 服务器发送的每个事件都遵循特定的格式，包含 `event`、`data` 和 `id` 等字段。例如：
+
+   ```js
+   event: message
+   data: Hello, world!
+
+   event: update
+   id: 123
+   data: {"temperature": 25, "humidity": 60}
+   ```
+
+4. 在客户端，`EventSource` 对象接收这些事件并将其作为浏览器事件分派，可以使用事件侦听器或 `onmessage` 事件处理程序来处理这些事件：
+
+   ```js
+   eventSource.onmessage = function (event) {
+     console.log('Received message:', event.data);
+   };
+
+   eventSource.addEventListener('update', function (event) {
+     console.log('Received update:', JSON.parse(event.data));
+   });
+   ```
+
+5. 如果连接断开，`EventSource` 对象会自动处理重新连接，并且可以使用 `Last-Event-ID HTTP 标头` 从上次接收到的事件 ID 恢复事件流。
+
+## SSE 功能
+
+* **单向**：只有服务器才能向客户端发送数据。对于双向通信，Web 套接字将更合适。
+* **重试机制**：如果连接失败，客户端将重试连接，重试间隔由服务器的 `retry:` 字段指定。
+* **仅文本数据**：SSE 只能传输文本数据，这意味着在传输之前需要对二进制数据进行编码（例如，Base64）。对于需要传输大型二进制有效负载的应用程序，这可能会导致开销增加和效率低下。
+* **内置浏览器支持**：受大多数现代浏览器支持，无需其他库。
+* **事件类型**：SSE 使用 `event:` 字段支持自定义事件类型，允许对消息进行分类。
+* **`Last-Event-Id`**：客户端在重新连接时发送 `Last-Event-Id` 标头，允许服务器从上次接收到的事件恢复流。但是，没有内置的机制来重放断开连接期间错过的事件。您可能需要实现一种机制来处理错过的事件，例如使用 `Last-Event-Id` 标头。
+* **连接限制**：浏览器对并发 SSE 连接的最大数量有限制，通常每个域大约 6 个。如果需要从同一客户端建立多个 SSE 连接，这可能会成为瓶颈。使用 HTTP/2 将缓解此问题。
+
+## 在 JavaScript 中实现 SSE
+
+以下代码演示了客户端和服务器上 SSE 的最小实现：
+
+* 服务器设置适当的标头以建立 SSE 连接。
+* 消息每 5 秒发送到客户端。
+* 当客户端断开连接时，服务器清理间隔并结束响应。
+
+在客户端上：
+
+```js
+// Create a new EventSource object
+const eventSource = new EventSource('/sse');
+
+// Event listener for receiving messages
+eventSource.onmessage = function (event) {
+  console.log('New message:', event.data);
+};
+
+// Event listener for errors
+eventSource.onerror = function (error) {
+  console.error('Error occurred:', error);
+};
+
+// Optional: Event listener for open connection
+eventSource.onopen = function () {
+  console.log('Connection opened');
+};
+```
+
+在服务器上：
+
+```js
+const http = require('http');
+
+http
+  .createServer((req, res) => {
+    if (req.url === '/sse') {
+      // Set headers for SSE
+      res.writeHead(200, {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        Connection: 'keep-alive',
+      });
+
+      // Function to send a message
+      const sendMessage = (message) => {
+        res.write(`data: ${message}\n\n`); // Messages are delimited with double line breaks.
+      };
+
+      // Send a message every 5 seconds
+      const intervalId = setInterval(() => {
+        sendMessage(`Current time: ${new Date().toLocaleTimeString()}`);
+      }, 5000);
+
+      // Handle client disconnect
+      req.on('close', () => {
+        clearInterval(intervalId);
+        res.end();
+      });
+    } else {
+      res.writeHead(404);
+      res.end();
+    }
+  })
+  .listen(8080, () => {
+    console.log('SSE server running on port 8080');
+  });
+```
+
+## 总结
+
+服务器发送事件提供了一种高效且直接的方式，可以将更新从服务器推送到客户端。它们特别适用于需要连续数据流但不需要完全双向通信的应用程序。由于现代浏览器内置了支持，SSE 是许多实时 Web 应用程序的可靠选择。
+
+## 延伸阅读
+
+* [使用服务器发送事件 - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)
+* [服务器发送事件 - javascript.info](https://javascript.info/server-sent-events)
+* [服务器发送事件：一个准备好再次审视的 WebSockets 替代方案](https://ably.com/topic/server-sent-events)
+* [什么是 SSE（服务器发送事件）以及它们如何工作？](https://bunny.net/academy/http/what-is-sse-server-sent-events-and-how-do-they-work/)
diff --git a/questions/what-are-sets-and-maps-and-how-are-they-used/en-US.langnostic.json b/questions/what-are-sets-and-maps-and-how-are-they-used/en-US.langnostic.json
new file mode 100644
index 0000000..8068cc3
--- /dev/null
+++ b/questions/what-are-sets-and-maps-and-how-are-they-used/en-US.langnostic.json
@@ -0,0 +1,68 @@
+{
+  "frontmatter": {
+    "title": "3d261f3d"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "34bc80c5",
+        "1f91b5dd",
+        "2a7816d0",
+        "1e0a1760",
+        "3e35102c",
+        "ee945bdb",
+        "e86d7b3f",
+        "700ddb74",
+        "203ebe3f",
+        "86995dff",
+        "578a5b43",
+        "19c254ba",
+        "56281c57",
+        "2abf5c73",
+        "d4a2e6b5",
+        "cc2b3f0e",
+        "6308073",
+        "bbd54685",
+        "645d5fef",
+        "86995dff",
+        "611209ef",
+        "19c254ba",
+        "29df1c46",
+        "1f4770e5",
+        "a34dcc85"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "34bc80c5",
+        "1f91b5dd",
+        "2a7816d0",
+        "1e0a1760",
+        "3e35102c",
+        "ee945bdb",
+        "e86d7b3f",
+        "700ddb74",
+        "203ebe3f",
+        "86995dff",
+        "578a5b43",
+        "19c254ba",
+        "56281c57",
+        "2abf5c73",
+        "d4a2e6b5",
+        "cc2b3f0e",
+        "6308073",
+        "bbd54685",
+        "645d5fef",
+        "86995dff",
+        "611209ef",
+        "19c254ba",
+        "29df1c46",
+        "1f4770e5",
+        "a34dcc85"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-sets-and-maps-and-how-are-they-used/zh-CN.mdx b/questions/what-are-sets-and-maps-and-how-are-they-used/zh-CN.mdx
new file mode 100644
index 0000000..f5e4480
--- /dev/null
+++ b/questions/what-are-sets-and-maps-and-how-are-they-used/zh-CN.mdx
@@ -0,0 +1,107 @@
+---
+title: 什么是 `Set` 和 `Map` 以及如何使用它们？
+---
+
+## TL;DR
+
+`Set` 和 `Map` 是内置的 JavaScript 对象，可帮助管理数据集合。`Set` 是唯一值的集合，而 `Map` 是键值对的集合，其中键可以是任何类型。`Set` 适用于存储唯一项，而 `Map` 适用于将值与键关联。
+
+```js live
+// Set example
+let mySet = new Set([1, 2, 3, 3]); // Set {1, 2, 3} (duplicate values are not added)
+mySet.add(4);
+console.log(mySet); // Set {1, 2, 3, 4}
+
+// Map example
+let myMap = new Map();
+myMap.set('key1', 'value1');
+myMap.set('key2', 'value2');
+console.log(myMap.get('key1')); // 'value1'
+```
+
+***
+
+## Set
+
+### 什么是 `Set`？
+
+`Set` 是值的集合，其中每个值都必须是唯一的。它类似于数组，但不允许重复值。
+
+### 如何创建 `Set`
+
+您可以使用 `Set` 构造函数创建 `Set`：
+
+```js live
+let mySet = new Set([1, 2, 3, 3]);
+console.log(mySet); // Set {1, 2, 3}
+```
+
+### 常用方法
+
+* `add(value)`: 将具有给定值的元素添加到 `Set`。
+* `delete(value)`: 删除与该值关联的元素。
+* `has(value)`: 返回一个布尔值，指示该值是否存在于 `Set` 中。
+* `clear()`: 从 `Set` 中删除所有元素。
+* `size`: 返回 `Set` 中的元素数量。
+
+### 使用示例
+
+```js live
+let mySet = new Set();
+mySet.add(1);
+mySet.add(2);
+mySet.add(2); // Duplicate value, will not be added
+console.log(mySet.has(1)); // true
+console.log(mySet.size); // 2
+mySet.delete(1);
+console.log(mySet.has(1)); // false
+mySet.clear();
+console.log(mySet.size); // 0
+```
+
+## Map
+
+### 什么是 `Map`？
+
+`Map` 是键值对的集合，其中键可以是任何类型，包括对象、函数和基本类型。
+
+### 如何创建 `Map`
+
+您可以使用 `Map` 构造函数创建 `Map`：
+
+```js live
+let myMap = new Map();
+myMap.set('key1', 'value1');
+myMap.set('key2', 'value2');
+console.log(myMap); // Map { key1: "value1", key2: "value2" }
+```
+
+### 常用方法
+
+* `set(key, value)`: 添加或更新具有指定键和值的一个元素。
+* `get(key)`: 返回与该键关联的值。
+* `delete(key)`: 移除与该键关联的元素。
+* `has(key)`: 返回一个布尔值，指示该键是否存在于 `Map` 中。
+* `clear()`: 从 `Map` 中移除所有元素。
+* `size`: 返回 `Map` 中元素的数量。
+
+### 使用示例
+
+```js live
+let myMap = new Map();
+myMap.set('key1', 'value1');
+myMap.set('key2', 'value2');
+console.log(myMap.get('key1')); // 'value1'
+console.log(myMap.has('key2')); // true
+console.log(myMap.size); // 2
+myMap.delete('key1');
+console.log(myMap.has('key1')); // false
+myMap.clear();
+console.log(myMap.size); // 0
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
+* [MDN Web Docs: Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
+* [JavaScript.info: Set and Map](https://javascript.info/map-set)
diff --git a/questions/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/en-US.langnostic.json b/questions/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..deb69da
--- /dev/null
+++ b/questions/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/en-US.langnostic.json
@@ -0,0 +1,62 @@
+{
+  "frontmatter": {
+    "title": "103fb802"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "5cb4cb2a",
+        "2a7816d0",
+        "4dfad4fa",
+        "3222d51c",
+        "db93c569",
+        "fa093fb2",
+        "c3a9a22a",
+        "ec85ba13",
+        "cc899d4a",
+        "80e5991f",
+        "2b208b45",
+        "17683845",
+        "58103032",
+        "bf8819d8",
+        "35dee7ab",
+        "62e1f24a",
+        "e3a5e55f",
+        "f3220a13",
+        "8cbc1e25",
+        "c9e53633",
+        "1f4770e5",
+        "9ab11a3"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "5cb4cb2a",
+        "2a7816d0",
+        "4dfad4fa",
+        "3222d51c",
+        "db93c569",
+        "fa093fb2",
+        "c3a9a22a",
+        "ec85ba13",
+        "cc899d4a",
+        "80e5991f",
+        "2b208b45",
+        "17683845",
+        "58103032",
+        "bf8819d8",
+        "35dee7ab",
+        "62e1f24a",
+        "e3a5e55f",
+        "f3220a13",
+        "8cbc1e25",
+        "c9e53633",
+        "1f4770e5",
+        "9ab11a3"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/zh-CN.mdx b/questions/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/zh-CN.mdx
new file mode 100644
index 0000000..4da2fbf
--- /dev/null
+++ b/questions/what-are-some-best-practices-for-handling-sensitive-data-in-javascript/zh-CN.mdx
@@ -0,0 +1,84 @@
+---
+title: 在 JavaScript 中处理敏感数据的一些最佳实践是什么？
+---
+
+## TL;DR
+
+在 JavaScript 中处理敏感数据需要特别注意安全实践。 避免将敏感数据存储在客户端存储中，如 localStorage 或 sessionStorage。 使用 HTTPS 加密传输中的数据。 实施适当的身份验证和授权机制。 净化和验证所有输入以防止注入攻击。 考虑在服务器端代码中使用环境变量来存储敏感数据。
+
+***
+
+## 在 JavaScript 中处理敏感数据的最佳实践
+
+### 避免将敏感数据存储在客户端
+
+将敏感数据（如令牌、密码或个人信息）存储在客户端存储（如 `localStorage` 或 `sessionStorage`）中存在风险，因为恶意脚本可以轻松访问它。 而是使用带有 `HttpOnly` 和 `Secure` 标志的安全 cookie。
+
+```js
+// Example of setting a secure cookie in an Express.js server
+res.cookie('token', token, { httpOnly: true, secure: true });
+```
+
+### 使用 HTTPS
+
+始终使用 HTTPS 加密客户端和服务器之间传输的数据。 这可确保敏感数据不会暴露给窃听者。
+
+### 实施适当的身份验证和授权
+
+确保您的应用程序具有强大的身份验证和授权机制。 使用经过充分测试和维护的库和框架。
+
+```js
+// Example of using JSON Web Tokens (JWT) for authentication
+const jwt = require('jsonwebtoken');
+
+const token = jwt.sign({ userId: user.id }, process.env.JWT_SECRET, {
+  expiresIn: '1h',
+});
+```
+
+### 净化和验证输入
+
+始终净化和验证用户输入，以防止注入攻击，例如 SQL 注入和跨站点脚本 (XSS)。
+
+```js
+// Example of input validation using the express-validator library
+const { body, validationResult } = require('express-validator');
+
+app.post(
+  '/submit',
+  [body('email').isEmail(), body('password').isLength({ min: 5 })],
+  (req, res) => {
+    const errors = validationResult(req);
+    if (!errors.isEmpty()) {
+      return res.status(400).json({ errors: errors.array() });
+    }
+    // Proceed with handling the request
+  },
+);
+```
+
+### 使用环境变量
+
+将敏感数据（如 API 密钥和数据库凭据）存储在环境变量中，而不是在源代码中对其进行硬编码。
+
+```js
+// Example of accessing environment variables in Node.js
+const dbPassword = process.env.DB_PASSWORD;
+```
+
+### 定期更新依赖项
+
+保持您的依赖项为最新，以确保您拥有最新的安全补丁。使用 `npm audit` 等工具来识别和修复漏洞。
+
+```bash
+# Example of running npm audit
+npm audit fix
+```
+
+## 延伸阅读
+
+* [OWASP 十大安全风险](https://owasp.org/www-project-top-ten/)
+* [MDN Web 文档：HTTPS](https://developer.mozilla.org/en-US/docs/Web/Security/HTTP_strict_transport_security)
+* [Express.js 安全最佳实践](https://expressjs.com/en/advanced/best-practice-security.html)
+* [JSON Web Tokens (JWT) 简介](https://jwt.io/introduction/)
+* [express-validator 文档](https://express-validator.github.io/docs/)
diff --git a/questions/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/en-US.langnostic.json b/questions/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/en-US.langnostic.json
new file mode 100644
index 0000000..ca7bc60
--- /dev/null
+++ b/questions/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/en-US.langnostic.json
@@ -0,0 +1,76 @@
+{
+  "frontmatter": {
+    "title": "9891f6dc"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "6a50b786",
+        "2a7816d0",
+        "683ef6c1",
+        "c56b37b3",
+        "391c3ab8",
+        "dbe7da10",
+        "7428775f",
+        "3f9e27d3",
+        "ccbd3c1f",
+        "d8e3d3fb",
+        "1df0f7b8",
+        "ae21dbed",
+        "610a9440",
+        "193c9794",
+        "2b7727c1",
+        "51123f9",
+        "8fb04426",
+        "21e2ead",
+        "d041b6ce",
+        "68df128b",
+        "50b8876a",
+        "a93c6d57",
+        "6326c70f",
+        "29899051",
+        "f9e47e8b",
+        "cc580d1d",
+        "ed153471",
+        "1f4770e5",
+        "29af9e07"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "6a50b786",
+        "2a7816d0",
+        "683ef6c1",
+        "c56b37b3",
+        "391c3ab8",
+        "dbe7da10",
+        "7428775f",
+        "3f9e27d3",
+        "ccbd3c1f",
+        "d8e3d3fb",
+        "1df0f7b8",
+        "ae21dbed",
+        "610a9440",
+        "193c9794",
+        "2b7727c1",
+        "51123f9",
+        "8fb04426",
+        "21e2ead",
+        "d041b6ce",
+        "68df128b",
+        "50b8876a",
+        "a93c6d57",
+        "6326c70f",
+        "29899051",
+        "f9e47e8b",
+        "cc580d1d",
+        "ed153471",
+        "1f4770e5",
+        "29af9e07"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/zh-CN.mdx b/questions/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/zh-CN.mdx
new file mode 100644
index 0000000..aa8c0b4
--- /dev/null
+++ b/questions/what-are-some-best-practices-for-writing-maintainable-and-effective-tests/zh-CN.mdx
@@ -0,0 +1,113 @@
+---
+title: 在 JavaScript 中编写可维护且有效的测试的最佳实践是什么？
+---
+
+## 总结
+
+要编写可维护且有效的测试，请确保它们清晰、简洁，并侧重于单一行为。对测试用例使用描述性名称，并避免硬编码值。模拟外部依赖项并保持测试隔离。定期审查和重构测试，以使其与代码库保持同步。
+
+***
+
+## 编写可维护且有效的测试的最佳实践
+
+### 编写清晰且具有描述性的测试名称
+
+* 使用清晰描述被测行为的名称
+* 避免使用缩写，并保持名称有意义
+
+### 保持测试专注
+
+* 确保每个测试用例都侧重于单一行为或功能
+* 避免在单个测试中测试多项内容
+
+### 使用 AAA 模式（Arrange, Act, Assert）
+
+* **Arrange**：设置初始状态和依赖项
+* **Act**：执行被测行为
+* **Assert**：验证结果
+
+```js
+test('should add two numbers correctly', () => {
+  // Arrange
+  const a = 1;
+  const b = 2;
+
+  // Act
+  const result = add(a, b);
+
+  // Assert
+  expect(result).toBe(3);
+});
+```
+
+### 避免硬编码值
+
+* 使用变量和常量使测试更具可读性和可维护性
+
+```js
+const input = 5;
+const expectedOutput = 25;
+
+test('should return the square of a number', () => {
+  const result = square(input);
+  expect(result).toBe(expectedOutput);
+});
+```
+
+### 模拟外部依赖项
+
+* 使用模拟库来模拟外部依赖项，如 API、数据库或第三方服务
+* 保持测试与外部因素隔离
+
+```js
+jest.mock('axios');
+
+test('should fetch data from API', async () => {
+  const data = { id: 1, name: 'John Doe' };
+  axios.get.mockResolvedValue({ data });
+
+  const result = await fetchData();
+
+  expect(result).toEqual(data);
+});
+```
+
+### 保持测试隔离
+
+* 确保测试不相互依赖
+* 在每次测试后重置状态并清理
+
+```js
+afterEach(() => {
+  jest.clearAllMocks();
+});
+```
+
+### 定期审查和重构测试
+
+* 使测试与代码库中的更改保持同步
+* 删除冗余或过时的测试
+* 重构测试以提高可读性和可维护性
+
+### 使用测试覆盖率工具
+
+* 衡量测试覆盖率以识别代码库中未测试的部分
+* 争取高覆盖率，但优先考虑有意义的测试而不是 100% 的覆盖率
+
+### 在修复错误之前编写测试
+
+* 用失败的测试重现错误
+* 修复错误并确保测试通过
+
+### 使用一致的风格
+
+* 遵循编写测试的一致风格和约定
+* 使用 linters 和格式化程序来强制一致性
+
+## 延伸阅读
+
+* [Jest documentation](https://jestjs.io/docs/getting-started)
+* [Mocha documentation](https://mochajs.org/)
+* [Testing Library documentation](https://testing-library.com/docs/)
+* [Effective testing with Jest](https://kentcdodds.com/blog/effective-snapshot-testing)
+* [Test-driven development (TDD)](https://martinfowler.com/bliki/TestDrivenDevelopment.html)
diff --git a/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.langnostic.json b/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.langnostic.json
new file mode 100644
index 0000000..866cba4
--- /dev/null
+++ b/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.langnostic.json
@@ -0,0 +1,86 @@
+{
+  "frontmatter": {
+    "title": "214e612b"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "9d40d291",
+        "2a7816d0",
+        "4f4d41e",
+        "3ec06181",
+        "42bfdf1f",
+        "e1b03eaa",
+        "b356f884",
+        "8985808d",
+        "1762d061",
+        "18674338",
+        "fcbf17fa",
+        "567451fb",
+        "1c6c0071",
+        "12a25703",
+        "6f79dc80",
+        "9283bde8",
+        "f0864546",
+        "99d08231",
+        "9d2be4e0",
+        "d4dca9bc",
+        "75e5d34a",
+        "ca9a5cfe",
+        "df15d3ce",
+        "7f164625",
+        "eca56594",
+        "bb2003e5",
+        "77e9bf08",
+        "b44f4bc9",
+        "531ec191",
+        "16ec829f",
+        "d75cc67d",
+        "9aa3760d",
+        "1f4770e5",
+        "64321219"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "9d40d291",
+        "2a7816d0",
+        "4f4d41e",
+        "3ec06181",
+        "42bfdf1f",
+        "e1b03eaa",
+        "b356f884",
+        "8985808d",
+        "1762d061",
+        "18674338",
+        "fcbf17fa",
+        "567451fb",
+        "1c6c0071",
+        "12a25703",
+        "6f79dc80",
+        "9283bde8",
+        "f0864546",
+        "99d08231",
+        "9d2be4e0",
+        "d4dca9bc",
+        "75e5d34a",
+        "ca9a5cfe",
+        "df15d3ce",
+        "7f164625",
+        "eca56594",
+        "bb2003e5",
+        "77e9bf08",
+        "b44f4bc9",
+        "531ec191",
+        "16ec829f",
+        "d75cc67d",
+        "9aa3760d",
+        "1f4770e5",
+        "64321219"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/zh-CN.mdx b/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/zh-CN.mdx
new file mode 100644
index 0000000..2746829
--- /dev/null
+++ b/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/zh-CN.mdx
@@ -0,0 +1,185 @@
+---
+title: JavaScript 应用程序中常见的一些性能瓶颈是什么？
+---
+
+## TL;DR
+
+JavaScript 应用程序中常见的性能瓶颈包括低效的 DOM 操作、过度使用全局变量、使用繁重的计算阻塞主线程、内存泄漏以及不正确地使用异步操作。为了缓解这些问题，您可以使用诸如防抖和节流之类的技术、优化 DOM 更新以及利用 Web Worker 进行繁重的计算。
+
+***
+
+## 低效的 DOM 操作
+
+### 频繁的 DOM 更新
+
+频繁的 DOM 更新可能代价高昂，因为每次 DOM 更改时，浏览器都必须重新渲染页面。将 DOM 更新批量处理在一起，以最大限度地减少回流和重绘。
+
+```js
+// Inefficient
+for (let i = 0; i < 1000; i++) {
+  const div = document.createElement('div');
+  div.textContent = i;
+  document.body.appendChild(div);
+}
+
+// Efficient
+const fragment = document.createDocumentFragment();
+for (let i = 0; i < 1000; i++) {
+  const div = document.createElement('div');
+  div.textContent = i;
+  fragment.appendChild(div);
+}
+document.body.appendChild(fragment);
+```
+
+### 布局抖动
+
+当您反复读取和写入 DOM 时，就会发生布局抖动，从而导致多次回流和重绘。通过分别批量处理读取和写入来最大限度地减少布局抖动。
+
+```js
+// Inefficient
+for (let i = 0; i < 1000; i++) {
+  const height = element.clientHeight;
+  element.style.height = `${height + 10}px`;
+}
+
+// Efficient
+const height = element.clientHeight;
+for (let i = 0; i < 1000; i++) {
+  element.style.height = `${height + 10}px`;
+}
+```
+
+## 过度使用全局变量
+
+全局变量可能导致内存泄漏，并使代码更难维护。使用局部变量和闭包来限制变量的范围。
+
+```js
+// Inefficient
+var globalVar = 'I am global';
+
+// Efficient
+function myFunction() {
+  let localVar = 'I am local';
+}
+```
+
+## 阻塞主线程
+
+### 繁重的计算
+
+繁重的计算会阻塞主线程，从而导致 UI 无响应。使用 Web Worker 将繁重的计算分流到后台线程。
+
+```js
+// Main thread
+const worker = new Worker('worker.js');
+worker.postMessage('start');
+
+// worker.js
+self.onmessage = function (e) {
+  if (e.data === 'start') {
+    // Perform heavy computation
+    self.postMessage('done');
+  }
+};
+```
+
+### 同步操作
+
+避免使用 `alert`、`prompt` 等同步操作以及同步 XHR 请求，因为它们会阻塞主线程。
+
+```js
+// Inefficient
+alert('This blocks the main thread');
+
+// Efficient
+console.log('This does not block the main thread');
+```
+
+## 内存泄漏
+
+当不再需要的内存未被释放时，就会发生内存泄漏。常见原因包括循环引用和未移除的事件监听器。
+
+### 循环引用
+
+```js
+// Inefficient
+function createCircularReference() {
+  const obj1 = {};
+  const obj2 = {};
+  obj1.ref = obj2;
+  obj2.ref = obj1;
+}
+
+// Efficient
+function createNonCircularReference() {
+  const obj1 = {};
+  const obj2 = {};
+  obj1.ref = obj2;
+}
+```
+
+### 未移除的事件监听器
+
+```js
+// Inefficient
+element.addEventListener('click', handleClick);
+
+// Efficient
+element.removeEventListener('click', handleClick);
+```
+
+## 异步操作使用不当
+
+### 未优化的 Promise
+
+正确地链式调用 Promise，以避免阻塞主线程。
+
+```js
+// Inefficient
+fetch('url')
+  .then((response) => response.json())
+  .then((data) => {
+    // Process data
+  });
+
+// Efficient
+async function fetchData() {
+  const response = await fetch('url');
+  const data = await response.json();
+  // Process data
+}
+fetchData();
+```
+
+### Debouncing 和 throttling
+
+使用 debouncing 和 throttling 来限制函数执行的速率，尤其是在处理事件处理程序时。
+
+```js
+// Debouncing
+function debounce(func, wait) {
+  let timeout;
+  return function (...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
+
+// Throttling
+function throttle(func, limit) {
+  let inThrottle;
+  return function (...args) {
+    if (!inThrottle) {
+      func.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+}
+```
+
+## 延伸阅读
+
+* [MDN Web 文档：性能](https://developer.mozilla.org/zh-CN/docs/Web/Performance)
+* [Google Developers：Web 性能优化](https://developers.google.com/web/fundamentals/performance)
diff --git a/questions/what-are-some-common-security-headers-and-their-purpose/en-US.langnostic.json b/questions/what-are-some-common-security-headers-and-their-purpose/en-US.langnostic.json
new file mode 100644
index 0000000..a465893
--- /dev/null
+++ b/questions/what-are-some-common-security-headers-and-their-purpose/en-US.langnostic.json
@@ -0,0 +1,76 @@
+{
+  "frontmatter": {
+    "title": "67a753b8"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "43ca4189",
+        "edc2b6f1",
+        "2a7816d0",
+        "e7c7af49",
+        "4a793cc4",
+        "f83e64ad",
+        "1362dcc6",
+        "b675949c",
+        "5a9cfba",
+        "3ad390f9",
+        "17d3c818",
+        "4e84adb4",
+        "4a8a617b",
+        "d9fde042",
+        "7bc259cd",
+        "57735479",
+        "74ec24d3",
+        "fbbc8b6e",
+        "2a0eaea6",
+        "cf1be31b",
+        "272df81",
+        "70fb4fc4",
+        "3e2a1f86",
+        "7220b399",
+        "fec2887a",
+        "839194b0",
+        "643fa59b",
+        "1f4770e5",
+        "849f0c72"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "43ca4189",
+        "edc2b6f1",
+        "2a7816d0",
+        "e7c7af49",
+        "4a793cc4",
+        "f83e64ad",
+        "1362dcc6",
+        "b675949c",
+        "5a9cfba",
+        "3ad390f9",
+        "17d3c818",
+        "4e84adb4",
+        "4a8a617b",
+        "d9fde042",
+        "7bc259cd",
+        "57735479",
+        "74ec24d3",
+        "fbbc8b6e",
+        "2a0eaea6",
+        "cf1be31b",
+        "272df81",
+        "70fb4fc4",
+        "3e2a1f86",
+        "7220b399",
+        "fec2887a",
+        "839194b0",
+        "643fa59b",
+        "1f4770e5",
+        "849f0c72"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-some-common-security-headers-and-their-purpose/zh-CN.mdx b/questions/what-are-some-common-security-headers-and-their-purpose/zh-CN.mdx
new file mode 100644
index 0000000..02f5346
--- /dev/null
+++ b/questions/what-are-some-common-security-headers-and-their-purpose/zh-CN.mdx
@@ -0,0 +1,83 @@
+---
+title: 常见的安全标头及其用途是什么？
+---
+
+## TL;DR
+
+安全标头是 HTTP 响应标头，可帮助保护 Web 应用程序免受各种攻击。 一些常见的安全标头包括：
+
+* `Content-Security-Policy (CSP)`：通过指定允许的内容来源来防止跨站点脚本 (XSS) 和其他代码注入攻击。
+* `X-Content-Type-Options`：通过指示浏览器遵循声明的 `Content-Type` 来防止 MIME 类型嗅探。
+* `Strict-Transport-Security (HSTS)`：强制对服务器进行安全 (HTTPS) 连接。
+* `X-Frame-Options`：通过控制页面是否可以在框架中显示来防止点击劫持。
+* `X-XSS-Protection`：启用内置于大多数浏览器中的跨站点脚本 (XSS) 过滤器。
+* `Referrer-Policy`：控制请求中包含多少引用者信息。
+
+***
+
+## 常见的安全标头及其用途
+
+### Content-Security-Policy (CSP)
+
+`Content-Security-Policy` 标头通过指定允许在网页上加载哪些内容来源来帮助防止跨站点脚本 (XSS) 和其他代码注入攻击。 例如：
+
+```http
+Content-Security-Policy: default-src 'self'; img-src 'self' https://example.com; script-src 'self' 'unsafe-inline'
+```
+
+此策略允许仅从同一来源 (`'self'`)、来自同一来源或 `https://example.com` 的图像以及来自同一来源或内联脚本的脚本加载内容。
+
+### X-Content-Type-Options
+
+`X-Content-Type-Options` 标头通过指示浏览器遵循声明的 `Content-Type` 来防止 MIME 类型嗅探。 这有助于减轻基于内容类型误解的攻击。 最常见的值是 `nosniff`：
+
+```http
+X-Content-Type-Options: nosniff
+```
+
+### Strict-Transport-Security (HSTS)
+
+`Strict-Transport-Security` 标头强制对服务器进行安全 (HTTPS) 连接。 它指示浏览器仅使用 HTTPS 与站点交互，即使用户尝试通过 HTTP 访问它。 例如：
+
+```http
+Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
+```
+
+此策略告诉浏览器强制 HTTPS 一年 (`max-age=31536000`)，包括所有子域 (`includeSubDomains`)，并允许将该站点包含在浏览器的 HSTS 预加载列表中 (`preload`)。
+
+### X-Frame-Options
+
+`X-Frame-Options` 标头通过控制页面是否可以在框架中显示来防止点击劫持。 常见值为 `DENY` 和 `SAMEORIGIN`：
+
+```http
+X-Frame-Options: DENY
+```
+
+此策略可防止页面在框架、iframe 或对象中显示。
+
+### X-XSS-Protection
+
+标头 `X-XSS-Protection` 启用内置于大多数浏览器中的跨站点脚本 (XSS) 过滤器。它可以阻止页面或清除看似恶意的脚本。例如：
+
+```http
+X-XSS-Protection: 1; mode=block
+```
+
+此策略启用 XSS 过滤器，并指示浏览器在检测到攻击时阻止该页面。
+
+### Referrer-Policy
+
+标头 `Referrer-Policy` 控制请求中包含多少引用者信息。它有助于保护用户隐私并防止信息泄露。常见值包括 `no-referrer`、`no-referrer-when-downgrade` 和 `strict-origin-when-cross-origin`：
+
+```http
+Referrer-Policy: no-referrer
+```
+
+此策略确保不随请求发送任何引用者信息。
+
+## 延伸阅读
+
+* [MDN Web Docs: HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers)
+* [OWASP Secure Headers Project](https://owasp.org/www-project-secure-headers/)
+* [Content Security Policy (CSP) - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
+* [Strict-Transport-Security (HSTS) - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Strict-Transport-Security)
diff --git a/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/en-US.langnostic.json b/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..37ce091
--- /dev/null
+++ b/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/en-US.langnostic.json
@@ -0,0 +1,68 @@
+{
+  "frontmatter": {
+    "title": "2a723ac3"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "e032cb",
+        "c80a9eb",
+        "ccfde37f",
+        "902aa66c",
+        "ea98c021",
+        "2a7816d0",
+        "cfed8f3c",
+        "b4b9ddba",
+        "e952606d",
+        "c846b3f3",
+        "b7196cf9",
+        "87a68710",
+        "bb1495f8",
+        "2c46ac72",
+        "197f8bb2",
+        "4122c8b9",
+        "2ec4cc73",
+        "88841075",
+        "7445787",
+        "4db14557",
+        "52c1c0e8",
+        "e3411010",
+        "73818f",
+        "1f4770e5",
+        "fc4017d8"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "e032cb",
+        "c80a9eb",
+        "ccfde37f",
+        "902aa66c",
+        "ea98c021",
+        "2a7816d0",
+        "cfed8f3c",
+        "b4b9ddba",
+        "e952606d",
+        "c846b3f3",
+        "b7196cf9",
+        "87a68710",
+        "bb1495f8",
+        "2c46ac72",
+        "197f8bb2",
+        "4122c8b9",
+        "2ec4cc73",
+        "88841075",
+        "7445787",
+        "4db14557",
+        "52c1c0e8",
+        "e3411010",
+        "73818f",
+        "1f4770e5",
+        "fc4017d8"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/zh-CN.mdx b/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/zh-CN.mdx
index eaf9960..802efaf 100644
--- a/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/zh-CN.mdx
+++ b/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/zh-CN.mdx
@@ -1,23 +1,87 @@
 ---
-title: 用编译成 JavaScript 的语言编写JavaScript 代码的一些优点/缺点是什么？
+title: 用编译为 JavaScript 的语言编写 JavaScript 代码有哪些优缺点？
 ---
 
-编译为 JavaScript 的一些语言的例子包括 CoffeeScript、Elm、ClojureScript、PureScript 和 TypeScript。
+## TL;DR
 
-## 优点
+使用编译为 JavaScript 的语言（如 TypeScript 或 CoffeeScript）可以提供一些优势，例如改进的语法、类型安全性和更好的工具。但是，它们也有缺点，例如增加了构建步骤、潜在的性能开销以及需要学习新语法。
 
-- 修复 JavaScript 中一些长期存在的问题，并阻止 JavaScript 的反模式。
-- 通过在 JavaScript 之上提供一些语法糖，使你能够写出更短的代码，ES5 缺乏这种能力，但 ES2015 却很棒。
-- 静态类型对于需要长期维护的大型项目来说是很棒的（就 TypeScript 而言）。
+优点：
 
-## 缺点
+* 改进的语法和可读性
+* 类型安全性和错误检查
+* 更好的工具和编辑器支持
 
-- 需要一个构建/编译过程，因为浏览器只运行 JavaScript，你的代码在提供给浏览器之前需要被编译成 JavaScript。
-- 如果你的源码图没有很好地映射到你的预编译源码上，调试就会很麻烦。
-- 大多数开发者不熟悉这些语言，需要学习它。 如果你在你的项目中使用它，对你的团队来说会有一个增加成本。
-- 较小的社区(依赖于语言)，这意味着资源、教程、库和工具将更难找到。
-- IDE/编辑器的支持可能缺乏。
-- 这些语言将永远落后于最新的 JavaScript 标准。
-- 开发人员应该认识到他们的代码被编译成什么样子--因为那是实际运行的东西，而那是最终重要的东西。
+缺点：
 
-实际上，ES2015 极大地改善了 JavaScript，使其更易于编写。 现在实际上没有必要使用 CoffeeScript 相反，TypeScript 是首选，因为它带来了额外的类型安全和改进的开发者体验。
+* 增加了构建步骤和复杂性
+* 潜在的性能开销
+* 学习新语法的曲线
+
+***
+
+## 用编译为 JavaScript 的语言编写 JavaScript 代码的优点
+
+### 改进的语法和可读性
+
+与原始 JavaScript 相比，TypeScript 和 CoffeeScript 等语言通常提供更简洁、更易读的语法。这可以使代码更容易编写和维护。
+
+```typescript
+// TypeScript example
+class Person {
+  constructor(private name: string) {}
+
+  greet() {
+    console.log(`Hello, ${this.name}`);
+  }
+}
+```
+
+### 类型安全性和错误检查
+
+例如，TypeScript 将静态类型检查添加到 JavaScript 中，这可以在编译时而不是运行时捕获错误。这可以使代码更健壮、更可靠。
+
+```typescript
+// TypeScript example
+function add(a: number, b: number): number {
+  return a + b;
+}
+```
+
+### 更好的工具和编辑器支持
+
+编译为 JavaScript 的语言通常附带增强的工具和编辑器支持，例如自动完成、重构工具和更好的调试功能。这可以提高开发人员的工作效率。
+
+## 用编译为 JavaScript 的语言编写 JavaScript 代码的缺点
+
+### 增加了构建步骤和复杂性
+
+使用编译为 JavaScript 的语言会在开发过程中引入额外的构建步骤。这会使构建流程复杂化，并增加在浏览器中看到更改所需的时间。
+
+```json
+// Example of a build configuration for TypeScript
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true
+  }
+}
+```
+
+### 潜在的性能开销
+
+虽然编译后的 JavaScript 代码通常经过优化，但在某些情况下，其性能可能不如手写的 JavaScript。如果编译器引入不必要的抽象，尤其如此。
+
+### 新语法的学习曲线
+
+开发人员需要学习编译为 JavaScript 的语言的新语法和特性。这可能成为进入的障碍，并且可能需要额外的培训和资源。
+
+## 延伸阅读
+
+* [TypeScript 官方文档](https://www.typescriptlang.org/docs/)
+* [CoffeeScript 官方文档](https://coffeescript.org/)
+* [Babel：JavaScript 编译器](https://babeljs.io/)
+* [比较 TypeScript 和 JavaScript](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)
diff --git a/questions/what-are-some-popular-javascript-testing-frameworks/en-US.langnostic.json b/questions/what-are-some-popular-javascript-testing-frameworks/en-US.langnostic.json
new file mode 100644
index 0000000..07537b6
--- /dev/null
+++ b/questions/what-are-some-popular-javascript-testing-frameworks/en-US.langnostic.json
@@ -0,0 +1,68 @@
+{
+  "frontmatter": {
+    "title": "55736c1c"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "41de5666",
+        "2a7816d0",
+        "723afb36",
+        "20112cd5",
+        "58caca19",
+        "2157cfb7",
+        "e76b9a8",
+        "64e16708",
+        "4cefc826",
+        "916d976a",
+        "a9a77e98",
+        "e76b9a8",
+        "d3e74489",
+        "d6870afa",
+        "1c610157",
+        "8e439ffa",
+        "e76b9a8",
+        "7d846c04",
+        "a07a2d68",
+        "eb62d3e0",
+        "4160e701",
+        "e76b9a8",
+        "63996b52",
+        "1f4770e5",
+        "5460ef5"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "41de5666",
+        "2a7816d0",
+        "723afb36",
+        "20112cd5",
+        "58caca19",
+        "2157cfb7",
+        "e76b9a8",
+        "64e16708",
+        "4cefc826",
+        "916d976a",
+        "a9a77e98",
+        "e76b9a8",
+        "d3e74489",
+        "d6870afa",
+        "1c610157",
+        "8e439ffa",
+        "e76b9a8",
+        "7d846c04",
+        "a07a2d68",
+        "eb62d3e0",
+        "4160e701",
+        "e76b9a8",
+        "63996b52",
+        "1f4770e5",
+        "5460ef5"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-some-popular-javascript-testing-frameworks/zh-CN.mdx b/questions/what-are-some-popular-javascript-testing-frameworks/zh-CN.mdx
new file mode 100644
index 0000000..1dd4fc8
--- /dev/null
+++ b/questions/what-are-some-popular-javascript-testing-frameworks/zh-CN.mdx
@@ -0,0 +1,94 @@
+---
+title: 有哪些流行的 JavaScript 测试框架？
+---
+
+## 总结
+
+一些流行的 JavaScript 测试框架包括 Jest、Mocha、Jasmine 和 Cypress。Jest 以其简单性和与 React 的集成而闻名。Mocha 非常灵活，通常与其他库（如 Chai）一起用于断言。Jasmine 是一个行为驱动开发框架，不需要额外的库。Cypress 是一个端到端测试框架，提供出色的开发者体验。
+
+***
+
+## 流行的 JavaScript 测试框架
+
+### Jest
+
+Jest 是 Facebook 开发的测试框架，主要用于测试 React 应用程序。它以其简单性和易用性而闻名。
+
+* 它自带内置的测试运行器、断言库和模拟支持
+* 它的设置无需配置，易于上手
+* 它提供了快照测试和开箱即用的代码覆盖率等功能
+
+示例：
+
+```js
+test('adds 1 + 2 to equal 3', () => {
+  expect(1 + 2).toBe(3);
+});
+```
+
+### Mocha
+
+Mocha 是一个灵活的测试框架，可以与各种断言库（如 Chai）一起使用。它以其广泛的配置选项和对异步测试的支持而闻名。
+
+* 它提供了一个简单而灵活的 API 用于编写测试
+* 它支持 BDD（行为驱动开发）和 TDD（测试驱动开发）风格
+* 它可以轻松地与其他库和工具集成
+
+示例：
+
+```js
+const assert = require('assert');
+
+describe('Array', function () {
+  describe('#indexOf()', function () {
+    it('should return -1 when the value is not present', function () {
+      assert.strictEqual([1, 2, 3].indexOf(4), -1);
+    });
+  });
+});
+```
+
+### Jasmine
+
+Jasmine 是一个行为驱动开发框架，不需要额外的库。它以其简单性和易用性而闻名。
+
+* 它为编写测试提供了清晰易读的语法
+* 它包括内置的断言和模拟库
+* 它支持异步测试
+
+示例：
+
+```js
+describe('A suite', function () {
+  it('contains a spec with an expectation', function () {
+    expect(true).toBe(true);
+  });
+});
+```
+
+### Cypress
+
+Cypress 是一个端到端测试框架，提供出色的开发者体验。它以其快速可靠的测试而闻名。
+
+* 它为编写测试提供了一个简单直观的 API
+* 它包括对断言、模拟和存根的内置支持
+* 它提供实时重新加载和调试功能
+
+示例：
+
+```js
+describe('My First Test', function () {
+  it('Visits the Kitchen Sink', function () {
+    cy.visit('https://example.cypress.io');
+    cy.contains('type').click();
+    cy.url().should('include', '/commands/actions');
+  });
+});
+```
+
+## 延伸阅读
+
+* [Jest documentation](https://jestjs.io/docs/getting-started)
+* [Mocha documentation](https://mochajs.org/#getting-started)
+* [Jasmine documentation](https://jasmine.github.io/pages/getting_started.html)
+* [Cypress documentation](https://docs.cypress.io/guides/overview/why-cypress)
diff --git a/questions/what-are-some-techniques-for-reducing-reflows-and-repaints/en-US.langnostic.json b/questions/what-are-some-techniques-for-reducing-reflows-and-repaints/en-US.langnostic.json
new file mode 100644
index 0000000..27894c1
--- /dev/null
+++ b/questions/what-are-some-techniques-for-reducing-reflows-and-repaints/en-US.langnostic.json
@@ -0,0 +1,70 @@
+{
+  "frontmatter": {
+    "title": "e71c8ca"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "4a3db965",
+        "2a7816d0",
+        "8c2a2cb5",
+        "5a7e8ea8",
+        "18fc41dc",
+        "37ba4328",
+        "6c91fbda",
+        "8413ba48",
+        "db488ca",
+        "65a9540f",
+        "d5f4f592",
+        "8fbeb744",
+        "70b67439",
+        "99a5a5c0",
+        "9d06be04",
+        "417ae958",
+        "c93e3767",
+        "e7458e3d",
+        "de830d0b",
+        "42700f78",
+        "32537e85",
+        "1d560b1c",
+        "10e479a8",
+        "ff3456ab",
+        "1f4770e5",
+        "d8cb0be0"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "4a3db965",
+        "2a7816d0",
+        "8c2a2cb5",
+        "5a7e8ea8",
+        "18fc41dc",
+        "37ba4328",
+        "6c91fbda",
+        "8413ba48",
+        "db488ca",
+        "65a9540f",
+        "d5f4f592",
+        "8fbeb744",
+        "70b67439",
+        "99a5a5c0",
+        "9d06be04",
+        "417ae958",
+        "c93e3767",
+        "e7458e3d",
+        "de830d0b",
+        "42700f78",
+        "32537e85",
+        "1d560b1c",
+        "10e479a8",
+        "ff3456ab",
+        "1f4770e5",
+        "d8cb0be0"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-some-techniques-for-reducing-reflows-and-repaints/zh-CN.mdx b/questions/what-are-some-techniques-for-reducing-reflows-and-repaints/zh-CN.mdx
new file mode 100644
index 0000000..a83d267
--- /dev/null
+++ b/questions/what-are-some-techniques-for-reducing-reflows-and-repaints/zh-CN.mdx
@@ -0,0 +1,85 @@
+---
+title: 有哪些减少重排和重绘的技术？
+---
+
+## TL;DR
+
+要减少重排和重绘，您可以尽量减少 DOM 操作、批量处理 DOM 更改、使用 CSS 类进行样式更改、避免复杂的 CSS 选择器，并使用 `requestAnimationFrame` 进行动画。此外，请考虑对将经常更改的元素使用 `will-change`，并通过分别读取和写入 DOM 来避免布局颠簸。
+
+***
+
+## 减少重排和重绘的技术
+
+### 尽量减少 DOM 操作
+
+频繁更改 DOM 可能会导致多次重排和重绘。要尽量减少这种情况：
+
+* 使用 `documentFragment` 批量更新 DOM
+* 克隆节点，进行更改，然后替换原始节点
+
+### 批量处理 DOM 更改
+
+将多个 DOM 更改组合在一起可以减少重排和重绘的次数：
+
+* 使用 `innerHTML` 一次更新多个元素
+* 使用 `requestAnimationFrame` 批量更新
+
+### 使用 CSS 类进行样式更改
+
+不要通过 JavaScript 直接更改样式，而是使用 CSS 类：
+
+```js live
+const element = document.createElement('h1');
+element.classList.add('text-center');
+
+console.log(element); // Notice that the class has been added.
+```
+
+### 避免复杂的 CSS 选择器
+
+复杂的选择器会减慢渲染过程：
+
+* 使用简单直接的选择器
+* 避免深度嵌套
+
+### 使用 `requestAnimationFrame` 进行动画
+
+使用 `requestAnimationFrame` 可确保动画与浏览器的重绘周期同步：
+
+```js
+function animate() {
+  // Animation logic
+  requestAnimationFrame(animate);
+}
+requestAnimationFrame(animate);
+```
+
+### 对频繁更改的元素使用 `will-change`
+
+ `will-change` 属性可以向浏览器提示哪些元素将要更改，从而允许它优化渲染：
+
+```css
+.element {
+  will-change: transform;
+}
+```
+
+### 避免布局震荡
+
+分别读取和写入 DOM 可以防止布局震荡：
+
+```js live
+// Mock div element
+const element = document.createElement('div');
+
+const height = element.offsetHeight; // Read
+element.style.height = `${height + 10}px`; // Write
+
+console.log(element);
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Reflow](https://developer.mozilla.org/en-US/docs/Glossary/Reflow)
+* [Google Developers: Avoid large, complex layouts and layout thrashing](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing)
+* [CSS-Tricks: Debouncing and Throttling Explained Through Examples](https://css-tricks.com/debouncing-throttling-explained-examples/)
diff --git a/questions/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/en-US.langnostic.json b/questions/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/en-US.langnostic.json
new file mode 100644
index 0000000..41bbb8b
--- /dev/null
+++ b/questions/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/en-US.langnostic.json
@@ -0,0 +1,56 @@
+{
+  "frontmatter": {
+    "title": "fd7aa1c3"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "110638ec",
+        "2a7816d0",
+        "833a8ee0",
+        "384fd303",
+        "bc08155e",
+        "194c11d9",
+        "b9694daf",
+        "55b499f4",
+        "da0f98f5",
+        "1e792481",
+        "f46bccb1",
+        "d1aec808",
+        "c8907e97",
+        "bb75cfe2",
+        "78c4b9ca",
+        "af4d4f76",
+        "dc7392f7",
+        "1f4770e5",
+        "7ab720bb"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "110638ec",
+        "2a7816d0",
+        "833a8ee0",
+        "384fd303",
+        "bc08155e",
+        "194c11d9",
+        "b9694daf",
+        "55b499f4",
+        "da0f98f5",
+        "1e792481",
+        "f46bccb1",
+        "d1aec808",
+        "c8907e97",
+        "bb75cfe2",
+        "78c4b9ca",
+        "af4d4f76",
+        "dc7392f7",
+        "1f4770e5",
+        "7ab720bb"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/zh-CN.mdx b/questions/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/zh-CN.mdx
new file mode 100644
index 0000000..1a0d4c8
--- /dev/null
+++ b/questions/what-are-some-tools-and-techniques-for-identifying-security-vulnerabilities-in-javascript-code/zh-CN.mdx
@@ -0,0 +1,81 @@
+---
+title: 有哪些用于识别 JavaScript 代码中安全漏洞的工具和技术？
+---
+
+## TL;DR
+
+要识别 JavaScript 代码中的安全漏洞，您可以使用静态代码分析工具（如带有安全插件的 ESLint）、动态分析工具（如 OWASP ZAP）和依赖项检查器（如 npm audit）。此外，手动代码审查和遵守安全编码实践是必不可少的技术。
+
+***
+
+## 用于识别 JavaScript 代码中安全漏洞的工具和技术
+
+### 静态代码分析工具
+
+静态代码分析工具在不执行代码的情况下检查您的代码。它们可以通过分析代码结构和模式来识别潜在的安全漏洞。
+
+* **ESLint**：一个流行的 JavaScript 检查工具，可以使用安全插件（如 `eslint-plugin-security`）进行扩展，以捕获常见的安全问题。
+
+  ```bash
+  npm install eslint eslint-plugin-security --save-dev
+  ```
+
+  ```js
+  // .eslintrc.json
+  {
+    "plugins": ["security"],
+    "extends": ["plugin:security/recommended"]
+  }
+  ```
+
+* **SonarQube**：一个提供代码质量和安全漏洞持续检查的平台。它支持 JavaScript 并与各种 CI/CD 管道集成。
+
+### 动态分析工具
+
+动态分析工具在应用程序运行时对其进行测试，以识别安全漏洞。
+
+* **OWASP ZAP (Zed Attack Proxy)**：一个用于查找 Web 应用程序中安全漏洞的开源工具。它可用于执行自动化扫描和手动测试。
+
+  ```bash
+  zap.sh -daemon -port 8080 -config api.disablekey=true
+  ```
+
+* **Burp Suite**：一个用于 Web 应用程序安全测试的综合平台。它包括用于扫描、爬取和利用漏洞的工具。
+
+### 依赖项检查器
+
+依赖项检查器分析您的项目所依赖的第三方库和包，以识别已知的漏洞。
+
+* **npm audit**：npm 的一个内置工具，用于检查您的项目依赖项中的漏洞。
+
+  ```bash
+  npm audit
+  ```
+
+* **Snyk**：一个持续监控您的依赖项是否存在漏洞并提供修复的工具。
+  ```bash
+  snyk test
+  ```
+
+### 手动代码审查
+
+手动代码审查涉及开发人员检查彼此的代码以识别潜在的安全问题。这种技术是有效的，因为它利用了人类的直觉和经验。
+
+### 安全编码实践
+
+遵守安全编码实践可以帮助防止首先引入安全漏洞。
+
+* **输入验证**：始终验证和清理用户输入，以防止注入攻击。
+* **输出编码**：在呈现数据之前对其进行编码，以防止跨站点脚本 (XSS) 攻击。
+* **使用 HTTPS**：确保您的应用程序使用 HTTPS 对传输中的数据进行加密。
+* **最小权限原则**：向用户和服务授予最低限度的必要权限。
+
+## 延伸阅读
+
+* [OWASP Top Ten](https://owasp.org/www-project-top-ten/)
+* [ESLint](https://eslint.org/)
+* [SonarQube](https://www.sonarqube.org/)
+* [OWASP ZAP](https://www.zaproxy.org/)
+* [Burp Suite](https://portswigger.net/burp)
+* [npm audit](https://docs.npmjs.com/cli/v7/commands/npm-audit)
+* [Snyk](https://snyk.io/)
diff --git a/questions/what-are-some-tools-that-can-be-used-for-javascript-testing/en-US.langnostic.json b/questions/what-are-some-tools-that-can-be-used-for-javascript-testing/en-US.langnostic.json
new file mode 100644
index 0000000..8161f48
--- /dev/null
+++ b/questions/what-are-some-tools-that-can-be-used-for-javascript-testing/en-US.langnostic.json
@@ -0,0 +1,68 @@
+{
+  "frontmatter": {
+    "title": "5e1bc6e1"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "409132a7",
+        "2a7816d0",
+        "385dacab",
+        "20112cd5",
+        "c6b2b783",
+        "d4e58535",
+        "d41fa0ea",
+        "1bc867b8",
+        "4cefc826",
+        "f918f634",
+        "fc365ce0",
+        "4e61627f",
+        "fc79fa34",
+        "d6870afa",
+        "54e2cee1",
+        "6d7053a7",
+        "1763890f",
+        "394907e3",
+        "a07a2d68",
+        "9bcc86a9",
+        "13400b4c",
+        "18d0a397",
+        "184d2626",
+        "1f4770e5",
+        "577102ea"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "409132a7",
+        "2a7816d0",
+        "385dacab",
+        "20112cd5",
+        "c6b2b783",
+        "d4e58535",
+        "d41fa0ea",
+        "1bc867b8",
+        "4cefc826",
+        "f918f634",
+        "fc365ce0",
+        "4e61627f",
+        "fc79fa34",
+        "d6870afa",
+        "54e2cee1",
+        "6d7053a7",
+        "1763890f",
+        "394907e3",
+        "a07a2d68",
+        "9bcc86a9",
+        "13400b4c",
+        "18d0a397",
+        "184d2626",
+        "1f4770e5",
+        "577102ea"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-some-tools-that-can-be-used-for-javascript-testing/zh-CN.mdx b/questions/what-are-some-tools-that-can-be-used-for-javascript-testing/zh-CN.mdx
new file mode 100644
index 0000000..c54b76e
--- /dev/null
+++ b/questions/what-are-some-tools-that-can-be-used-for-javascript-testing/zh-CN.mdx
@@ -0,0 +1,97 @@
+---
+title: 有哪些可用于 JavaScript 测试的工具？
+---
+
+## TL;DR
+
+对于 JavaScript 测试，您可以使用 Jest、Mocha、Jasmine 和 Cypress 等工具。 Jest 因其易用性和内置功能而广受欢迎。 Mocha 具有灵活性，可以与其他库配对。 Jasmine 以其简单性和行为驱动开发 (BDD) 风格而闻名。 Cypress 非常适合端到端测试，侧重于真实的浏览器交互。
+
+***
+
+## JavaScript 测试工具
+
+### Jest
+
+Jest 是 Facebook 开发的一个流行的测试框架。 它被广泛用于测试 JavaScript 应用程序，尤其是那些使用 React 构建的应用程序。
+
+* **易于使用**：Jest 带有许多内置功能，使其易于设置和开始测试。
+* **快照测试**：Jest 允许您捕获组件的快照并在将来的测试运行期间进行比较。
+* **Mocking**：Jest 具有强大的模拟功能，这使得模拟函数、模块和计时器变得容易。
+* **代码覆盖率**：Jest 提供内置的代码覆盖率报告。
+
+使用 Jest 的简单测试示例：
+
+```js
+const sum = (a, b) => a + b;
+
+test('adds 1 + 2 to equal 3', () => {
+  expect(sum(1, 2)).toBe(3);
+});
+```
+
+### Mocha
+
+Mocha 是一个灵活的测试框架，可以与各种断言库和模拟工具一起使用。
+
+* **灵活性**：Mocha 允许您选择自己的断言库（例如，Chai）和模拟工具（例如，Sinon）。
+* **异步测试**：Mocha 具有出色的异步测试支持。
+* **浏览器支持**：Mocha 可以在 Node.js 和浏览器中运行。
+
+使用 Mocha 和 Chai 的简单测试示例：
+
+```js
+const { expect } = require('chai');
+
+describe('Array', () => {
+  it('should return -1 when the value is not present', () => {
+    expect([1, 2, 3].indexOf(4)).to.equal(-1);
+  });
+});
+```
+
+### Jasmine
+
+Jasmine 是一个用于测试 JavaScript 代码的行为驱动开发 (BDD) 框架。 它以其简单性和易用性而闻名。
+
+* **简单性**：Jasmine 附带了您开始测试所需的一切，包括断言库和模拟工具。
+* **BDD 风格**：Jasmine 鼓励以 BDD 风格编写测试，这可以使您的测试更具可读性。
+
+使用 Jasmine 的简单测试示例：
+
+```js
+describe('A suite', () => {
+  it('contains a spec with an expectation', () => {
+    expect(true).toBe(true);
+  });
+});
+```
+
+### Cypress
+
+Cypress 是一个端到端测试框架，专注于真实的浏览器交互。
+
+* **真实浏览器测试**：Cypress 在浏览器中运行测试，提供更准确的用户交互表示。
+* **时间旅行**：Cypress 允许您回溯时间，查看测试的每个步骤发生了什么。
+* **自动等待**：Cypress 自动等待元素出现和操作完成，减少了手动等待的需要。
+
+使用 Cypress 的简单测试示例：
+
+```js
+describe('My First Test', () => {
+  it('Visits the Kitchen Sink', () => {
+    cy.visit('https://example.cypress.io');
+    cy.contains('type').click();
+    cy.url().should('include', '/commands/actions');
+    cy.get('.action-email')
+      .type('fake@email.com')
+      .should('have.value', 'fake@email.com');
+  });
+});
+```
+
+## 延伸阅读
+
+* [Jest documentation](https://jestjs.io/docs/getting-started)
+* [Mocha documentation](https://mochajs.org/)
+* [Jasmine documentation](https://jasmine.github.io/)
+* [Cypress documentation](https://docs.cypress.io/guides/overview/why-cypress)
diff --git a/questions/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/en-US.langnostic.json b/questions/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/en-US.langnostic.json
new file mode 100644
index 0000000..7860ed1
--- /dev/null
+++ b/questions/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "23216d82"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "26122f94",
+        "2a7816d0",
+        "3c560570",
+        "9691800c",
+        "7e4068da",
+        "c44c1f6b",
+        "f2b84a2a",
+        "3d77f92",
+        "91e6f82e",
+        "a312a3f7",
+        "d3e03e76",
+        "acfcd3ce",
+        "d2365e35",
+        "af0fce2",
+        "92c2140",
+        "1f4770e5",
+        "146b3afc"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "26122f94",
+        "2a7816d0",
+        "3c560570",
+        "9691800c",
+        "7e4068da",
+        "c44c1f6b",
+        "f2b84a2a",
+        "3d77f92",
+        "91e6f82e",
+        "a312a3f7",
+        "d3e03e76",
+        "acfcd3ce",
+        "d2365e35",
+        "af0fce2",
+        "92c2140",
+        "1f4770e5",
+        "146b3afc"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/zh-CN.mdx b/questions/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/zh-CN.mdx
new file mode 100644
index 0000000..c78c36c
--- /dev/null
+++ b/questions/what-are-some-tools-that-can-be-used-to-measure-and-analyze-javascript-performance/zh-CN.mdx
@@ -0,0 +1,57 @@
+---
+title: 有哪些可以用来衡量和分析 JavaScript 性能的工具？
+---
+
+## TL;DR
+
+要衡量和分析 JavaScript 性能，可以使用 Chrome DevTools、Lighthouse、WebPageTest 和 JSPerf 等工具。Chrome DevTools 提供了一个用于分析的 Performance 面板，Lighthouse 提供性能指标的审核，WebPageTest 允许进行详细的性能测试，而 JSPerf 有助于比较不同 JavaScript 代码段的性能。
+
+***
+
+## 用于衡量和分析 JavaScript 性能的工具
+
+### Chrome DevTools
+
+Chrome DevTools 是一组直接内置于 Google Chrome 浏览器中的 Web 开发者工具。它提供了一个 Performance 面板，允许您录制和分析 Web 应用程序的运行时性能。
+
+* 通过按 `F12` 或 `Ctrl+Shift+I` 打开 Chrome DevTools
+* 导航到 Performance 面板
+* 单击“Record”按钮开始分析
+* 与您的 Web 应用程序交互以捕获性能数据
+* 单击“Stop”按钮结束分析并分析结果
+
+### Lighthouse
+
+Lighthouse 是一个开源的自动化工具，用于提高网页质量。它提供了对性能、可访问性、渐进式 Web 应用程序、SEO 等方面的审核。
+
+* 打开 Chrome DevTools
+* 导航到 Lighthouse 面板
+* 选择您要审核的类别（例如，性能）
+* 单击“Generate report”按钮
+* 查看生成的报告以获取性能见解和建议
+
+### WebPageTest
+
+WebPageTest 是一个免费的在线工具，提供对网页的详细性能测试。它允许您使用真实的浏览器从世界各地运行测试。
+
+* 访问 [WebPageTest](https://www.webpagetest.org/)
+* 输入您要测试的网页的 URL
+* 选择测试位置和浏览器
+* 单击“Start Test”按钮
+* 查看详细的性能报告，包括加载时间、首次字节时间等指标
+
+### JSPerf
+
+JSPerf 是一个用于比较不同 JavaScript 代码段性能的工具。它允许您创建和运行基准测试，以查看哪个代码的性能更好。
+
+* 访问 [JSPerf](https://jsperf.com/)
+* 通过输入不同的 JavaScript 代码段来创建新的测试用例
+* 运行基准测试以比较代码段的性能
+* 查看结果以了解哪个代码段的性能更好
+
+## 延伸阅读
+
+* [Chrome DevTools Performance Panel](https://developer.chrome.com/docs/devtools/evaluate-performance/)
+* [Lighthouse](https://developers.google.com/web/tools/lighthouse)
+* [WebPageTest](https://www.webpagetest.org/)
+* [JSPerf](https://jsperf.com/)
diff --git a/questions/what-are-symbols-used-for/en-US.langnostic.json b/questions/what-are-symbols-used-for/en-US.langnostic.json
new file mode 100644
index 0000000..1c80fdc
--- /dev/null
+++ b/questions/what-are-symbols-used-for/en-US.langnostic.json
@@ -0,0 +1,82 @@
+{
+  "frontmatter": {
+    "title": "9ececef0"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "52803f22",
+        "f2202eff",
+        "1234dd14",
+        "2a7816d0",
+        "e08d3ab8",
+        "29b6d840",
+        "9d9b7893",
+        "3d9b9578",
+        "63b8b4fc",
+        "b6ddc2d",
+        "24e3b828",
+        "5ae25d8b",
+        "d7ff0f80",
+        "2e223bf6",
+        "2bc773de",
+        "97959393",
+        "48aa66cc",
+        "6dd1724b",
+        "ba710b5a",
+        "7b441dab",
+        "1c759058",
+        "35ff3ba1",
+        "e56f796a",
+        "6fe8770b",
+        "c936499e",
+        "fef1f85c",
+        "33182f07",
+        "90368954",
+        "67a1d4f3",
+        "4f19066f",
+        "1f4770e5",
+        "34fcd156"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "52803f22",
+        "f2202eff",
+        "1234dd14",
+        "2a7816d0",
+        "e08d3ab8",
+        "29b6d840",
+        "9d9b7893",
+        "3d9b9578",
+        "63b8b4fc",
+        "b6ddc2d",
+        "24e3b828",
+        "5ae25d8b",
+        "d7ff0f80",
+        "2e223bf6",
+        "2bc773de",
+        "97959393",
+        "48aa66cc",
+        "6dd1724b",
+        "ba710b5a",
+        "7b441dab",
+        "1c759058",
+        "35ff3ba1",
+        "e56f796a",
+        "6fe8770b",
+        "c936499e",
+        "fef1f85c",
+        "33182f07",
+        "90368954",
+        "67a1d4f3",
+        "4f19066f",
+        "1f4770e5",
+        "34fcd156"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-symbols-used-for/zh-CN.mdx b/questions/what-are-symbols-used-for/zh-CN.mdx
new file mode 100644
index 0000000..8fccf3e
--- /dev/null
+++ b/questions/what-are-symbols-used-for/zh-CN.mdx
@@ -0,0 +1,144 @@
+---
+title: JavaScript 中 `Symbol` 的用途是什么？
+---
+
+## 总结
+
+JavaScript 中的 `Symbol` 是 ES6 (ECMAScript 2015) 中引入的一种新的原始数据类型。它们是唯一的、不可变的标识符，主要用于对象属性键，以避免名称冲突。这些值可以使用 `Symbol(...)` 函数创建，并且每个 `Symbol` 值都保证是唯一的，即使它们具有相同的键/描述。`Symbol` 属性在 `for...in` 循环或 `Object.keys()` 中不可枚举，这使得它们适合创建私有/内部对象状态。
+
+```js live
+let sym1 = Symbol();
+let sym2 = Symbol('myKey');
+
+console.log(typeof sym1); // "symbol"
+console.log(sym1 === sym2); // false, because each symbol is unique
+
+let obj = {};
+let sym = Symbol('uniqueKey');
+
+obj[sym] = 'value';
+console.log(obj[sym]); // "value"
+```
+
+**注意**：`Symbol()` 函数必须在没有 `new` 关键字的情况下调用。它并不完全是一个构造函数，因为它只能作为函数调用，而不是使用 `new Symbol()`。
+
+***
+
+## JavaScript 中的 `Symbol`
+
+JavaScript 中的 Symbols 是一种独特且不可变的数据类型，主要用于对象属性键，以避免名称冲突。
+
+## 关键特征
+
+* **唯一性**：每个 Symbol 值都是唯一的，即使它们具有相同的描述。
+* **不可变性**：Symbol 值是不可变的，这意味着它们的值不能被更改。
+* **不可枚举性**：Symbol 属性不包含在 for...in 循环或 Object.keys() 中。
+
+## 创建 `Symbol`
+
+`Symbol` 可以使用 `Symbol()` 函数创建：
+
+```js live
+const sym1 = Symbol();
+const sym2 = Symbol('uniqueKey');
+
+console.log(typeof sym1); // "symbol"
+console.log(sym1 === sym2); // false, because each symbol is unique
+```
+
+> 必须在没有 `new` 关键字的情况下调用 `Symbol(..)` 函数。
+
+## 将 `Symbol` 用作 `object` 属性键
+
+`Symbol` 可用于将属性添加到对象，而不会有名称冲突的风险：
+
+```js live
+const obj = {};
+const sym = Symbol('uniqueKey');
+
+obj[sym] = 'value';
+console.log(obj[sym]); // "value"
+```
+
+## `Symbol` 不可枚举
+
+* `Symbol` 属性不包含在 `for...in` 循环或 `Object.keys()` 中。
+* 这使得它们适合创建私有/内部对象状态。
+* 使用 `Object.getOwnPropertySymbols(obj)` 获取对象上的所有 symbol 属性。
+
+```js live
+const mySymbol = Symbol('privateProperty');
+const obj = {
+  name: 'John',
+  [mySymbol]: 42,
+};
+
+console.log(Object.keys(obj)); // Output: ['name']
+console.log(obj[mySymbol]); // Output: 42
+```
+
+### 全局 `Symbol` 注册表
+
+您可以使用 `Symbol.for('key')` 创建全局 `Symbol`，如果全局注册表中不存在，则创建一个新的 `Symbol`，或者返回现有的 `Symbol`。这允许您在代码库的不同部分甚至不同的代码库之间重用 `Symbol`。
+
+```js live
+const globalSym1 = Symbol.for('globalKey');
+const globalSym2 = Symbol.for('globalKey');
+
+console.log(globalSym1 === globalSym2); // true
+
+const key = Symbol.keyFor(globalSym1);
+console.log(key); // "globalKey"
+```
+
+## 众所周知的 `Symbol`
+
+JavaScript 包含几个内置的 `Symbol`，称为众所周知的 `Symbol`。
+
+* **`Symbol.iterator`**：定义对象的默认 `iterator`。
+* **`Symbol.toStringTag`**：用于创建对象的字符串描述。
+* **`Symbol.hasInstance`**：用于确定对象是否是构造函数的实例。
+
+### `Symbol.iterator`
+
+```js live
+let iterable = {
+  [Symbol.iterator]() {
+    let step = 0;
+    return {
+      next() {
+        step++;
+        if (step <= 5) {
+          return { value: step, done: false };
+        }
+        return { done: true };
+      },
+    };
+  },
+};
+
+for (let value of iterable) {
+  console.log(value); // 1, 2, 3, 4, 5
+}
+```
+
+### `Symbol.toStringTag`
+
+```js live
+let myObj = {
+  [Symbol.toStringTag]: 'MyCustomObject',
+};
+
+console.log(Object.prototype.toString.call(myObj)); // "[object MyCustomObject]"
+```
+
+## 总结
+
+Symbol 是 JavaScript 中一项强大的功能，尤其适用于创建唯一的对象属性和自定义对象行为。它们提供了一种创建隐藏属性的方法，防止意外访问或修改，这在大型应用程序和库中特别有益。
+
+## 延伸阅读
+
+* [Symbol - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol)
+* [Symbol type](https://javascript.info/symbol)
+* [A quick overview of JavaScript symbols](https://www.freecodecamp.org/news/how-did-i-miss-javascript-symbols-c1f1c0e1874a/)
+* [Symbol Values - You Don't Know JS Yet](https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/types-grammar/ch1.md#symbol-values)
diff --git a/questions/what-are-template-literals-and-how-are-they-used/en-US.langnostic.json b/questions/what-are-template-literals-and-how-are-they-used/en-US.langnostic.json
new file mode 100644
index 0000000..da2beca
--- /dev/null
+++ b/questions/what-are-template-literals-and-how-are-they-used/en-US.langnostic.json
@@ -0,0 +1,72 @@
+{
+  "frontmatter": {
+    "title": "1c06c8ed"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "af22901",
+        "e76b9a8",
+        "9ed51b7a",
+        "2a7816d0",
+        "525b39dd",
+        "560ae1bb",
+        "aec5d635",
+        "eea083fa",
+        "4ae016ea",
+        "34865eda",
+        "b007ea35",
+        "e76b9a8",
+        "5e51808f",
+        "bc788ade",
+        "d2711399",
+        "e76b9a8",
+        "e1b25c22",
+        "f5ffe889",
+        "289bb623",
+        "e76b9a8",
+        "f23627e0",
+        "fde57cf1",
+        "95c9e077",
+        "e76b9a8",
+        "deef4b72",
+        "1f4770e5",
+        "8724b6b"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "af22901",
+        "e76b9a8",
+        "9ed51b7a",
+        "2a7816d0",
+        "525b39dd",
+        "560ae1bb",
+        "aec5d635",
+        "eea083fa",
+        "4ae016ea",
+        "34865eda",
+        "b007ea35",
+        "e76b9a8",
+        "5e51808f",
+        "bc788ade",
+        "d2711399",
+        "e76b9a8",
+        "e1b25c22",
+        "f5ffe889",
+        "289bb623",
+        "e76b9a8",
+        "f23627e0",
+        "fde57cf1",
+        "95c9e077",
+        "e76b9a8",
+        "deef4b72",
+        "1f4770e5",
+        "8724b6b"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-template-literals-and-how-are-they-used/zh-CN.mdx b/questions/what-are-template-literals-and-how-are-they-used/zh-CN.mdx
new file mode 100644
index 0000000..359b78e
--- /dev/null
+++ b/questions/what-are-template-literals-and-how-are-they-used/zh-CN.mdx
@@ -0,0 +1,95 @@
+---
+title: 什么是模板字面量以及如何使用它们？
+---
+
+## TL;DR
+
+模板字面量是 JavaScript 中的一个特性，它允许更轻松的字符串插值和多行字符串。它们用反引号 (`` ` ``) 而不是单引号或双引号括起来。您可以使用 `${expression}` 语法在模板字面量中嵌入表达式。
+
+示例：
+
+```js live
+const myName = 'John';
+const greeting = `Hello, ${myName}!`;
+console.log(greeting); // Output: Hello, John!
+```
+
+***
+
+## 什么是模板字面量以及如何使用它们？
+
+### 模板字面量简介
+
+模板字面量是 ES6 (ECMAScript 2015) 中引入的一个特性，它提供了一种更简单、更易读的方式来处理 JavaScript 中的字符串。它们允许字符串插值、多行字符串和嵌入表达式。
+
+### 语法
+
+模板字面量用反引号 (`` ` ``) 而不是单引号或双引号括起来。这允许更灵活的字符串格式化。
+
+### 字符串插值
+
+模板字面量最强大的功能之一是字符串插值。您可以使用 `${expression}` 语法在字符串中嵌入表达式。
+
+示例：
+
+```js live
+const myName = 'John';
+const age = 30;
+const greeting = `Hello, my name is ${myName} and I am ${age} years old.`;
+console.log(greeting); // Output: Hello, my name is John and I am 30 years old.
+```
+
+### 多行字符串
+
+模板字面量可以轻松创建多行字符串，而无需转义字符。
+
+示例：
+
+```js live
+const multiLineString = `This is a string
+that spans multiple
+lines.`;
+console.log(multiLineString);
+// Output:
+// This is a string
+// that spans multiple
+// lines.
+```
+
+### 标记模板
+
+标记模板允许您使用函数解析模板字面量。然后，该函数可以在输出模板字面量的内容之前对其进行操作。
+
+示例：
+
+```js live
+function tag(strings, ...values) {
+  console.log(strings); // Array of string literals: ["Hello, ", "!"]
+  console.log(values); // Array of values: ["John"]
+  return 'Custom tagged template result';
+}
+
+const myName = 'John';
+const result = tag`Hello, ${myName}!`;
+console.log(result); // Output: Custom tagged template result
+```
+
+### 嵌套模板字面量
+
+您可以在彼此之间嵌套模板字面量，以构建更复杂的字符串。
+
+示例：
+
+```js live
+const myName = 'John';
+const age = 30;
+const nestedTemplate = `Name: ${myName}, Age: ${age}, Info: ${`Name: ${myName}, Age: ${age}`}`;
+console.log(nestedTemplate);
+// Output: Name: John, Age: 30, Info: Name: John, Age: 30
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
+* [JavaScript.info: Template literals](https://javascript.info/template-literals)
+* [ES6 Features: Template literals](http://es6-features.org/#StringInterpolation)
diff --git a/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.langnostic.json b/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.langnostic.json
new file mode 100644
index 0000000..f2909e5
--- /dev/null
+++ b/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.langnostic.json
@@ -0,0 +1,50 @@
+{
+  "frontmatter": {
+    "title": "19d259f4"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "593e1e8d",
+        "87deb665",
+        "52fe02c3",
+        "d37b5b85",
+        "a76b56e3",
+        "2a7816d0",
+        "cf7256bd",
+        "8dc822d1",
+        "c9f6d324",
+        "852195c",
+        "3a134047",
+        "82c3077",
+        "d758718c",
+        "8437ff7b",
+        "1f4770e5",
+        "d884c1e2"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "593e1e8d",
+        "87deb665",
+        "52fe02c3",
+        "d37b5b85",
+        "a76b56e3",
+        "2a7816d0",
+        "cf7256bd",
+        "8dc822d1",
+        "c9f6d324",
+        "852195c",
+        "3a134047",
+        "82c3077",
+        "d758718c",
+        "8437ff7b",
+        "1f4770e5",
+        "d884c1e2"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/zh-CN.mdx b/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/zh-CN.mdx
index 562b3e8..c78806f 100644
--- a/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/zh-CN.mdx
+++ b/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/zh-CN.mdx
@@ -1,18 +1,37 @@
 ---
-title: 使用Ajax的利弊是什么？
+title: 使用 AJAX 的优缺点是什么？
 ---
 
-## 优点
+## TL;DR
 
-- 更好的交互性。 来自服务器的新内容可以动态地改变，而不需要重新加载整个页面。
-- 减少与服务器的连接，因为脚本和样式表只能请求一次。
-- 状态可以在页面上维持。 JavaScript 变量和 DOM 状态将持续，因为主容器页面没有被重新加载。
-- 基本上是 SPA 的大部分优点。
+AJAX（异步 JavaScript 和 XML）是 JavaScript 中的一种技术，它允许网页从服务器异步发送和检索数据，而无需刷新或重新加载整个页面。
 
-## 缺点
+**优点**
 
-- 动态网页不好存书签。
-- 如果浏览器中禁用 JavaScript 则无法工作。
-- 有些网页爬虫不执行 JavaScript ，不会看到 JavaScript 加载的内容。
-- 使用 Ajax 获取数据的网页可能需要将已获取的远程数据与客户端模板合并以更新 DOM。 要做到这一点，JavaScript 就必须在浏览器中解析和执行，而低端移动设备可能会为此而挣扎。
-- 基本上是 SPA 的大部分缺点。
+* **更流畅的用户体验**：更新发生在没有完全页面重新加载的情况下，就像在邮件和聊天应用程序中一样。
+
+**缺点**
+
+* **依赖于 JavaScript**：如果禁用，Ajax 功能会中断。
+
+***
+
+## AJAX（异步 JavaScript 和 XML）
+
+AJAX（异步 JavaScript 和 XML）是 JavaScript 中的一种技术，它允许网页从服务器异步发送和检索数据，而无需刷新或重新加载整个页面。 当它最初创建时，它彻底改变了 Web 开发，并带来了更流畅、响应更快的用户体验。 AJAX 在[这个问题](/questions/quiz/explain-ajax-in-as-much-detail-as-possible)中进行了详细解释。
+
+以下是 AJAX 优缺点的细分：
+
+### 优点
+
+* **增强的用户体验**：AJAX 允许部分页面更新，而无需完全重新加载。 这为用户创造了更流畅、更灵敏的感觉，因为他们不必等待整个页面在每次交互时刷新。
+
+### 缺点
+
+* **增加复杂性**：与传统的 Web 开发相比，开发支持 AJAX 的应用程序可能更复杂。 它需要处理异步通信以及请求和响应之间的潜在竞争条件。 由于页面没有重新加载，页面的一部分可能会随着时间的推移而过时，并且可能会造成混淆。
+
+虽然 AJAX 在用户体验、性能和功能方面具有显着的优势，但它也带来了与开发、SEO、浏览器兼容性、安全性和导航相关的复杂性和潜在的缺点。
+
+## 延伸阅读
+
+* [Ajax | MDN](https://developer.mozilla.org/en-US/docs/Glossary/AJAX)
diff --git a/questions/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/en-US.langnostic.json b/questions/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/en-US.langnostic.json
new file mode 100644
index 0000000..c1f2a3b
--- /dev/null
+++ b/questions/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/en-US.langnostic.json
@@ -0,0 +1,70 @@
+{
+  "frontmatter": {
+    "title": "c7d07a0b"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "40474880",
+        "dd28d831",
+        "2a7816d0",
+        "6afe7b2f",
+        "d9a9e73d",
+        "6a751511",
+        "a0a667a8",
+        "eb7b89ee",
+        "d73656",
+        "f50b1d69",
+        "614db4aa",
+        "a9349d3",
+        "f73a1989",
+        "24ff9a8b",
+        "205e02a6",
+        "e32c4143",
+        "5d31c1dc",
+        "8c5c60a6",
+        "430c6d7f",
+        "33557289",
+        "7fa4abb1",
+        "ae1df12c",
+        "354cd757",
+        "2c7fba4d",
+        "1f4770e5",
+        "2497789e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "40474880",
+        "dd28d831",
+        "2a7816d0",
+        "6afe7b2f",
+        "d9a9e73d",
+        "6a751511",
+        "a0a667a8",
+        "eb7b89ee",
+        "d73656",
+        "f50b1d69",
+        "614db4aa",
+        "a9349d3",
+        "f73a1989",
+        "24ff9a8b",
+        "205e02a6",
+        "e32c4143",
+        "5d31c1dc",
+        "8c5c60a6",
+        "430c6d7f",
+        "33557289",
+        "7fa4abb1",
+        "ae1df12c",
+        "354cd757",
+        "2c7fba4d",
+        "1f4770e5",
+        "2497789e"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/zh-CN.mdx b/questions/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/zh-CN.mdx
new file mode 100644
index 0000000..6fd5522
--- /dev/null
+++ b/questions/what-are-the-advantages-of-using-the-spread-operator-with-arrays-and-objects/zh-CN.mdx
@@ -0,0 +1,95 @@
+---
+title: 使用扩展运算符处理数组和对象的优势是什么？
+---
+
+## TL;DR
+
+JavaScript 中的扩展运算符 (`...`) 允许您轻松复制数组和对象、合并它们以及添加新元素或属性。它简化了语法并提高了可读性。对于数组，它可用于连接或克隆数组。对于对象，它可用于合并对象或添加新属性。
+
+```js live
+// Arrays
+const arr1 = [1, 2, 3];
+const arr2 = [...arr1, 4, 5];
+console.log(arr2); // [1, 2, 3, 4, 5]
+
+// Objects
+const obj1 = { a: 1, b: 2 };
+const obj2 = { ...obj1, c: 3 };
+console.log(obj2); // { a: 1, b: 2, c: 3 }
+```
+
+***
+
+## 使用扩展运算符处理数组和对象的优势
+
+### 数组
+
+#### 克隆数组
+
+扩展运算符允许您轻松创建数组的浅拷贝。
+
+```js live
+const originalArray = [1, 2, 3];
+const clonedArray = [...originalArray];
+console.log(clonedArray); // [1, 2, 3]
+```
+
+#### 合并数组
+
+您可以将多个数组连接成一个。
+
+```js live
+const array1 = [1, 2];
+const array2 = [3, 4];
+const mergedArray = [...array1, ...array2];
+console.log(mergedArray); // [1, 2, 3, 4]
+```
+
+#### 添加元素
+
+您可以在不改变原始数组的情况下向数组添加新元素。
+
+```js live
+const array = [1, 2, 3];
+const newArray = [...array, 4, 5];
+console.log(newArray); // [1, 2, 3, 4, 5]
+```
+
+### 对象
+
+#### 克隆对象
+
+扩展运算符允许您创建对象的浅拷贝。
+
+```js live
+const originalObject = { a: 1, b: 2 };
+const clonedObject = { ...originalObject };
+console.log(clonedObject); // { a: 1, b: 2 }
+```
+
+#### 合并对象
+
+您可以将多个对象合并成一个。
+
+```js live
+const object1 = { a: 1 };
+const object2 = { b: 2 };
+const mergedObject = { ...object1, ...object2 };
+console.log(mergedObject); // { a: 1, b: 2 }
+```
+
+#### 添加属性
+
+您可以在不改变原始对象的情况下向对象添加新属性。
+
+```js live
+const object = { a: 1, b: 2 };
+const newObject = { ...object, c: 3 };
+console.log(newObject); // { a: 1, b: 2, c: 3 }
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
+* [JavaScript.info: Spread operator](https://javascript.info/rest-parameters-spread#spread-operator)
+* [FreeCodeCamp: How to use the spread operator in JavaScript](https://www.freecodecamp.org/news/how-to-use-the-spread-operator-in-javascript/)
diff --git a/questions/what-are-the-benefits-of-using-a-module-bundler/en-US.langnostic.json b/questions/what-are-the-benefits-of-using-a-module-bundler/en-US.langnostic.json
new file mode 100644
index 0000000..90bcbf6
--- /dev/null
+++ b/questions/what-are-the-benefits-of-using-a-module-bundler/en-US.langnostic.json
@@ -0,0 +1,62 @@
+{
+  "frontmatter": {
+    "title": "6a0d5cae"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "a1416a7f",
+        "2a7816d0",
+        "7d8acf2f",
+        "b0df54c6",
+        "4744f9ce",
+        "fbbfa5e5",
+        "3e9bdbb1",
+        "aaa56865",
+        "fd92fabc",
+        "f25df59d",
+        "de208217",
+        "cf2a3f0b",
+        "abb5b127",
+        "b642cfb8",
+        "b1d69617",
+        "2b8fd4f4",
+        "8124fa34",
+        "8de91377",
+        "34a15c6",
+        "7057de18",
+        "1f4770e5",
+        "fd192cdf"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "a1416a7f",
+        "2a7816d0",
+        "7d8acf2f",
+        "b0df54c6",
+        "4744f9ce",
+        "fbbfa5e5",
+        "3e9bdbb1",
+        "aaa56865",
+        "fd92fabc",
+        "f25df59d",
+        "de208217",
+        "cf2a3f0b",
+        "abb5b127",
+        "b642cfb8",
+        "b1d69617",
+        "2b8fd4f4",
+        "8124fa34",
+        "8de91377",
+        "34a15c6",
+        "7057de18",
+        "1f4770e5",
+        "fd192cdf"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-benefits-of-using-a-module-bundler/zh-CN.mdx b/questions/what-are-the-benefits-of-using-a-module-bundler/zh-CN.mdx
new file mode 100644
index 0000000..9cff64f
--- /dev/null
+++ b/questions/what-are-the-benefits-of-using-a-module-bundler/zh-CN.mdx
@@ -0,0 +1,81 @@
+---
+title: 使用模块打包器的好处是什么？
+---
+
+## TL;DR
+
+使用 Webpack、Rollup 或 Parcel 等模块打包器有助于管理依赖关系、优化性能并改进开发工作流程。它将多个 JavaScript 文件合并成一个或几个文件，从而减少 HTTP 请求的数量，并且可以包含代码拆分、tree shaking 和热模块替换等功能。
+
+***
+
+## 使用模块打包器的优点
+
+### 依赖管理
+
+模块打包器通过允许您以清晰和有组织的方式导入和导出模块来帮助管理依赖关系。这使得维护和理解代码库更容易。
+
+```js
+// Importing a module
+import { myFunction } from './myModule.js';
+
+// Using the imported function
+myFunction();
+```
+
+### 性能优化
+
+模块打包器可以通过减少 HTTP 请求的数量来优化性能。它们将多个 JavaScript 文件合并成一个或几个文件，这可以显著提高加载时间。
+
+### 代码拆分
+
+代码拆分允许您将代码拆分成更小的块，这些块可以按需加载。这可以通过仅加载必要的代码来改善应用程序的初始加载时间。
+
+```js
+// Example of dynamic import for code splitting
+import('./myModule.js').then((module) => {
+  module.myFunction();
+});
+```
+
+### Tree shaking
+
+Tree shaking 是一项从最终 bundle 中删除未使用的代码的功能。这有助于减小 bundle 大小并提高性能。
+
+```js
+// Only the used function will be included in the final bundle
+import { usedFunction } from './myModule.js';
+usedFunction();
+```
+
+### 热模块替换
+
+热模块替换 (HMR) 允许您实时更新模块，而无需刷新整个页面。这可以通过提供即时反馈来显着加快开发过程。
+
+```js
+if (module.hot) {
+  module.hot.accept('./myModule.js', function () {
+    // Handle the updated module
+    const updatedModule = require('./myModule.js');
+    updatedModule.myFunction();
+  });
+}
+```
+
+### 资源管理
+
+模块打包器还可以处理 CSS、图像和字体等其他资源。这允许您将这些资源直接导入到 JavaScript 文件中，从而更易于管理和优化它们。
+
+```js
+// Importing a CSS file
+import './styles.css';
+
+// Importing an image
+import myImage from './image.png';
+```
+
+## 延伸阅读
+
+* [Webpack documentation](https://webpack.js.org/concepts/)
+* [Rollup documentation](https://rollupjs.org/guide/en/)
+* [Parcel documentation](https://parceljs.org/getting_started.html)
+* [MDN Web Docs: JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
diff --git a/questions/what-are-the-benefits-of-using-currying-and-partial-application/en-US.langnostic.json b/questions/what-are-the-benefits-of-using-currying-and-partial-application/en-US.langnostic.json
new file mode 100644
index 0000000..df4751e
--- /dev/null
+++ b/questions/what-are-the-benefits-of-using-currying-and-partial-application/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "7525721e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "29e76d6b",
+        "2a7816d0",
+        "287ee5dc",
+        "1743fc64",
+        "be81b126",
+        "6fb11d1f",
+        "a040305",
+        "748ffe75",
+        "fba98502",
+        "5fd903ca",
+        "391c5082",
+        "6fb11d1f",
+        "9e8ad82d",
+        "748ffe75",
+        "213b2408",
+        "1f4770e5",
+        "f8b92363"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "29e76d6b",
+        "2a7816d0",
+        "287ee5dc",
+        "1743fc64",
+        "be81b126",
+        "6fb11d1f",
+        "a040305",
+        "748ffe75",
+        "fba98502",
+        "5fd903ca",
+        "391c5082",
+        "6fb11d1f",
+        "9e8ad82d",
+        "748ffe75",
+        "213b2408",
+        "1f4770e5",
+        "f8b92363"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-benefits-of-using-currying-and-partial-application/zh-CN.mdx b/questions/what-are-the-benefits-of-using-currying-and-partial-application/zh-CN.mdx
new file mode 100644
index 0000000..4c44330
--- /dev/null
+++ b/questions/what-are-the-benefits-of-using-currying-and-partial-application/zh-CN.mdx
@@ -0,0 +1,61 @@
+---
+title: 使用柯里化和部分应用的益处是什么？
+---
+
+## 总结
+
+柯里化将具有多个参数的函数转换为一系列函数，每个函数只接受一个参数。这使得代码更灵活、更可重用。另一方面，部分应用允许你固定函数的几个参数并生成一个新函数。这两种技术都有助于创建更模块化和可维护的代码。
+
+***
+
+## 使用柯里化和部分应用的益处
+
+### 柯里化
+
+柯里化是一种将具有多个参数的函数转换为一系列函数的技术，每个函数只接受一个参数。这可以使代码更灵活、更可重用。
+
+#### 优点
+
+* **函数可重用性**：柯里化允许你通过固定一些参数来从通用函数创建专用函数。
+* **代码可读性**：它可以通过将复杂函数分解为更简单的函数来使代码更具可读性和表现力。
+* **函数式编程**：柯里化是函数式编程的核心概念，这可以使代码更可预测和可测试。
+
+#### 示例
+
+```js live
+function add(a) {
+  return function (b) {
+    return a + b;
+  };
+}
+
+const addFive = add(5);
+console.log(addFive(3)); // Output: 8
+```
+
+### 部分应用
+
+部分应用是一种固定函数的几个参数并生成一个新函数的技术。这对于从通用函数创建更具体的函数很有用。
+
+#### 优点
+
+* **代码重用**：与柯里化一样，部分应用允许你从通用函数创建专用函数。
+* **提高可读性**：通过减少调用函数时所需的参数数量，可以使代码更具可读性。
+* **简化函数调用**：通过预先填充一些参数，你可以简化代码中的函数调用。
+
+#### 示例
+
+```js live
+function multiply(a, b) {
+  return a * b;
+}
+
+const double = multiply.bind(null, 2);
+console.log(double(5)); // Output: 10
+```
+
+## 延伸阅读
+
+* [JavaScript 中的柯里化](https://javascript.info/currying-partials)
+* [JavaScript 中的部分应用](https://medium.com/javascript-scene/curry-and-function-composition-2c208d774983)
+* [函数式编程概念](https://www.freecodecamp.org/news/functional-programming-in-js-with-practical-examples-part-1-87c2b0dbc276/)
diff --git a/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.langnostic.json b/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.langnostic.json
new file mode 100644
index 0000000..06115d6
--- /dev/null
+++ b/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.langnostic.json
@@ -0,0 +1,96 @@
+{
+  "frontmatter": {
+    "title": "7a249fd"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "d03c0acc",
+        "3e05b35d",
+        "8522ffad",
+        "624f4ed0",
+        "2a7816d0",
+        "e2d11b63",
+        "688c7858",
+        "89a01056",
+        "839e2fa6",
+        "48273238",
+        "e5536829",
+        "a4bb832d",
+        "6d26b995",
+        "e5e5f5a2",
+        "fefcfbf2",
+        "6cc2bb6d",
+        "59e7ef1b",
+        "13e24ce2",
+        "771a4fc5",
+        "8ba9f8b9",
+        "abcbfc61",
+        "d328bba9",
+        "fbf393c9",
+        "523b8f46",
+        "e34cf1b4",
+        "1205369c",
+        "7de054db",
+        "6ab03e6d",
+        "76e77f54",
+        "ecd1760a",
+        "2993b77e",
+        "ee39f737",
+        "a8e0d79",
+        "2f477587",
+        "60999da7",
+        "3d54fd1b",
+        "ac6a2075",
+        "ee9c1eea",
+        "976520fa"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "d03c0acc",
+        "3e05b35d",
+        "8522ffad",
+        "624f4ed0",
+        "2a7816d0",
+        "e2d11b63",
+        "688c7858",
+        "89a01056",
+        "839e2fa6",
+        "48273238",
+        "e5536829",
+        "a4bb832d",
+        "6d26b995",
+        "e5e5f5a2",
+        "fefcfbf2",
+        "6cc2bb6d",
+        "59e7ef1b",
+        "13e24ce2",
+        "771a4fc5",
+        "8ba9f8b9",
+        "abcbfc61",
+        "d328bba9",
+        "fbf393c9",
+        "523b8f46",
+        "e34cf1b4",
+        "1205369c",
+        "7de054db",
+        "6ab03e6d",
+        "76e77f54",
+        "ecd1760a",
+        "2993b77e",
+        "ee39f737",
+        "a8e0d79",
+        "2f477587",
+        "60999da7",
+        "3d54fd1b",
+        "ac6a2075",
+        "ee9c1eea",
+        "976520fa"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/zh-CN.mdx b/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/zh-CN.mdx
index 00a429d..96c8e03 100644
--- a/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/zh-CN.mdx
+++ b/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/zh-CN.mdx
@@ -1,39 +1,170 @@
 ---
-title: 使用展开语法 (Spread syntax) 的好处是什么？ 它与剩余语法 (Rest syntax) 有何不同？
+title: JavaScript 中使用展开语法有什么好处？它与 rest 语法有何不同？
 ---
 
-ES2015 的展开语法在函数式范式的编码中非常有用，因为我们可以很容易地创建数组或对象的副本，而不需要借助于`Object.create`、`slice`或库函数。 此语言功能经常用于 Redux 和 RxJS 项目。
+## TL;DR
 
-```js
-function putDookieInAnyArray(arr) {
-  return [...arr, 'dookie'];
+**展开语法** (`...`) 允许将可迭代对象（如数组或字符串）扩展为单个元素。这通常被用作一种方便且现代的方式，通过组合现有数组或对象来创建新的数组或对象。
+
+| 操作 | 传统方式 | 展开语法 |
+| -------------- | ------------------------------- | ---------------------- |
+| 数组克隆 | `arr.slice()` | `[...arr]` |
+| 数组合并 | `arr1.concat(arr2)` | `[...arr1, ...arr2]` |
+| 对象克隆 | `Object.assign({}, obj)` | `{ ...obj }` |
+| 对象合并 | `Object.assign({}, obj1, obj2)` | `{ ...obj1, ...obj2 }` |
+
+**Rest 语法**与展开语法的作用相反。它将可变数量的参数收集到一个数组中。这通常用于函数参数中，以处理动态数量的参数。
+
+```js live
+// Using rest syntax in a function
+function sum(...numbers) {
+  return numbers.reduce((total, num) => total + num, 0);
 }
 
-const result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"]
+console.log(sum(1, 2, 3)); // Output: 6
+```
+
+***
+
+## 展开语法
+
+ES2015 的展开语法在函数式编程范式中非常有用，因为我们可以轻松地创建数组或对象的副本/合并，而无需使用 `Object.create`、`Object.assign`、`Array.prototype.slice` 或库函数。此语言特性经常用于 Redux 和 RxJS 项目中。
+
+### 复制数组/对象
+
+展开语法提供了一种简洁的方式来创建数组或对象的副本，而无需修改原始数组或对象。这对于创建不可变数据结构很有用。但是请注意，通过展开运算符复制的数组是浅拷贝的。
+
+```js live
+// Copying arrays
+const array = [1, 2, 3];
+const newArray = [...array];
+console.log(newArray); // Output: [1, 2, 3]
+
+// Copying objects
+const person = { name: 'John', age: 30 };
+const newObj = { ...person, city: 'New York' };
+console.log(newObj); // Output: { name: 'John', age: 30, city: 'New York' }
+```
+
+### 合并数组/对象
+
+展开语法允许您通过将其元素/属性展开到新的数组或对象中来合并数组或对象。
+
+```js live
+// Merging arrays
+const arr1 = [1, 2, 3];
+const arr2 = [4, 5, 6];
+const mergedArray = [...arr1, ...arr2];
+console.log(mergedArray); // Output: [1, 2, 3, 4, 5, 6]
+
+// Merging objects
+const obj1 = {
+  foo: 'bar',
+};
+
+const obj2 = {
+  qux: 'baz',
+};
+
+const mergedObj = { ...obj1, ...obj2 };
+console.log(mergedObj); // Output: { foo: "bar", qux: "baz" }
+```
+
+### 将参数传递给函数
+
+使用展开语法将值数组作为单个参数传递给函数，避免了使用 `apply()` 的需要。
+
+```js live
+const numbers = [1, 2, 3];
+const max = Math.max(...numbers); // Same as Math.max(1, 2, 3)
+console.log(max); // Output: 3
+```
 
+### 数组与对象展开
+
+只有可迭代的值（如 `Array` 和 `String`）才可以在数组中展开。尝试展开不可迭代的值将导致 `TypeError`。
+
+将对象展开到数组中：
+
+```js live
 const person = {
   name: 'Todd',
   age: 29,
 };
+const array = [...person]; // Error: Uncaught TypeError: person is not iterable
+```
+
+另一方面，数组可以展开到对象中。
 
-const copyOfTodd = { ...person };
+```js live
+const array = [1, 2, 3];
+const obj = { ...array };
+console.log(obj); // { 0: 1, 1: 2, 2: 3 }
 ```
 
-ES2015 的剩余语法提供了一个短语，用于包含任意数量的参数传递给函数。 它就像展开语法的倒数，把数据塞进一个数组，而不是把一个数组的数据拆开，它在函数参数中起作用，也在数组和对象的去结构化赋值中起作用。
+## Rest 语法
+
+JavaScript 中的 rest 语法 (`...`) 允许你将不定数量的元素表示为数组或对象。它就像展开语法的逆向操作，获取数据并将其放入数组中，而不是解包数组中的数据，它适用于函数参数以及数组和对象解构赋值。
 
-```js
+### 函数中的 Rest 参数
+
+Rest 语法可用于函数参数中，将所有剩余的参数收集到一个数组中。当你不知道将向函数传递多少个参数时，这特别有用。
+
+```js live
 function addFiveToABunchOfNumbers(...numbers) {
   return numbers.map((x) => x + 5);
 }
 
-const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]
+const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10);
+console.log(result); // Output: [9, 10, 11, 12, 13, 14, 15]
+```
+
+与使用 `arguments` 对象相比，它提供了更简洁的语法，`arguments` 对象在箭头函数中不受支持，并且表示 **所有** 参数，而下面 rest 语法的用法允许 `remaining` 表示第三个参数及之后的参数。
+
+```js live
+const [first, second, ...remaining] = [1, 2, 3, 4, 5];
+console.log(first); // Output: 1
+console.log(second); // Output: 2
+console.log(remaining); // Output: [3, 4, 5]
+```
+
+请注意，rest 参数必须位于末尾。rest 参数会收集所有剩余的参数，因此以下操作没有意义，并且会导致错误：
+
+```js live
+function addFiveToABunchOfNumbers(arg1, ...numbers, arg2) {
+  // Error: Rest parameter must be last formal parameter.
+}
+```
+
+### 数组解构
+
+Rest 语法可用于数组解构，将剩余的元素收集到一个新数组中。
 
-const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
+```js live
+const [a, b, ...rest] = [1, 2, 3, 4];
+console.log(a); // Output: 1
+console.log(b); // Output: 2
+console.log(rest); // Output: [3, 4]
+```
+
+### 对象解构
+
+Rest 语法可用于对象解构，将剩余的属性收集到一个新对象中。
 
+```js live
 const { e, f, ...others } = {
   e: 1,
   f: 2,
   g: 3,
   h: 4,
-}; // e: 1, f: 2, others: { g: 3, h: 4 }
+};
+console.log(e); // Output: 1
+console.log(f); // Output: 2
+console.log(others); // Output: { g: 3, h: 4 }
 ```
+
+## 延伸阅读
+
+* [展开语法 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
+* [Rest 参数 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/rest_parameters)
+* [Rest 参数和展开语法 | JavaScript.info](https://zh.javascript.info/rest-parameters-spread)
diff --git a/questions/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.langnostic.json b/questions/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.langnostic.json
new file mode 100644
index 0000000..984b9bd
--- /dev/null
+++ b/questions/what-are-the-common-pitfalls-of-using-the-this-keyword/en-US.langnostic.json
@@ -0,0 +1,72 @@
+{
+  "frontmatter": {
+    "title": "71e94b5"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "e4315140",
+        "2a7816d0",
+        "71f47a3",
+        "f118ed33",
+        "3052ef2d",
+        "5a9818a9",
+        "e146225d",
+        "91cf93fe",
+        "e2f67879",
+        "a91f3d72",
+        "610d6503",
+        "b4e2d4e",
+        "56eb56b7",
+        "af6b2bfc",
+        "366ce736",
+        "db9220f6",
+        "6bb7178a",
+        "477a54e8",
+        "bba4152b",
+        "e9e72c17",
+        "a0670e23",
+        "cff4876d",
+        "690b751",
+        "33fe2392",
+        "9b0bf70b",
+        "1f4770e5",
+        "43683fcd"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "e4315140",
+        "2a7816d0",
+        "71f47a3",
+        "f118ed33",
+        "3052ef2d",
+        "5a9818a9",
+        "e146225d",
+        "91cf93fe",
+        "e2f67879",
+        "a91f3d72",
+        "610d6503",
+        "b4e2d4e",
+        "56eb56b7",
+        "af6b2bfc",
+        "366ce736",
+        "db9220f6",
+        "6bb7178a",
+        "477a54e8",
+        "bba4152b",
+        "e9e72c17",
+        "a0670e23",
+        "cff4876d",
+        "690b751",
+        "33fe2392",
+        "9b0bf70b",
+        "1f4770e5",
+        "43683fcd"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-common-pitfalls-of-using-the-this-keyword/zh-CN.mdx b/questions/what-are-the-common-pitfalls-of-using-the-this-keyword/zh-CN.mdx
new file mode 100644
index 0000000..7f2fbcd
--- /dev/null
+++ b/questions/what-are-the-common-pitfalls-of-using-the-this-keyword/zh-CN.mdx
@@ -0,0 +1,127 @@
+---
+title: 使用 `this` 关键字的常见陷阱是什么？
+---
+
+## TL;DR
+
+JavaScript 中的 `this` 关键字可能很棘手，因为它的值取决于函数的调用方式。常见的陷阱包括将方法作为回调传递时丢失 `this` 的上下文，在嵌套函数中使用 `this`，以及误解箭头函数中的 `this`。为了避免这些问题，您可以使用 `.bind()`、箭头函数或将上下文存储在变量中。
+
+***
+
+## 使用 `this` 关键字的常见陷阱
+
+### 在回调中丢失上下文
+
+当您将方法作为回调传递时，`this` 的上下文可能会丢失。例如：
+
+```js live
+const obj = {
+  value: 42,
+  getValue: function () {
+    return this.value;
+  },
+};
+
+const getValue = obj.getValue;
+console.log(getValue()); // undefined
+```
+
+在这种情况下，`getValue` 内部的 `this` 没有绑定到 `obj`。
+
+### 在嵌套函数中使用 `this`
+
+在嵌套函数中，`this` 不指向外部函数的上下文：
+
+```js live
+const obj = {
+  value: 42,
+  getValue: function () {
+    function innerFunction() {
+      return this.value;
+    }
+    return innerFunction();
+  },
+};
+
+console.log(obj.getValue()); // undefined
+```
+
+在这里，`innerFunction` 内部的 `this` 指向全局对象，而不是 `obj`。
+
+### 误解箭头函数中的 `this`
+
+箭头函数没有自己的 `this` 上下文；它们从封闭的范围继承它：
+
+```js live
+const obj = {
+  value: 42,
+  getValue: () => {
+    return this.value;
+  },
+};
+
+console.log(obj.getValue()); // undefined
+```
+
+在这个例子中，箭头函数内部的 `this` 指向全局对象，而不是 `obj`。
+
+### 解决方案
+
+#### 使用 `.bind()`
+
+您可以使用 `.bind()` 显式设置 `this` 的上下文：
+
+```js live
+const obj = {
+  value: 42,
+  getValue: function () {
+    return this.value;
+  },
+};
+
+const getValue = obj.getValue.bind(obj);
+console.log(getValue()); // 42
+```
+
+#### 使用箭头函数
+
+箭头函数从封闭的范围继承 `this`，这很有用：
+
+```js live
+const obj = {
+  value: 42,
+  getValue: function () {
+    const innerFunction = () => {
+      return this.value;
+    };
+    return innerFunction();
+  },
+};
+
+console.log(obj.getValue()); // 42
+```
+
+#### 将上下文存储在变量中
+
+您可以将上下文存储在变量中，以在嵌套函数中维护它：
+
+```js live
+const obj = {
+  value: 42,
+  getValue: function () {
+    const self = this;
+    function innerFunction() {
+      return self.value;
+    }
+    return innerFunction();
+  },
+};
+
+console.log(obj.getValue()); // 42
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: `this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)
+* [JavaScript.info: `this`](https://javascript.info/this)
+* [Eloquent JavaScript: `this`](https://eloquentjavascript.net/03_functions.html#h_jxlm9L8T4l)
diff --git a/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.langnostic.json b/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.langnostic.json
new file mode 100644
index 0000000..af94f09
--- /dev/null
+++ b/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.langnostic.json
@@ -0,0 +1,62 @@
+{
+  "frontmatter": {
+    "title": "f81c9361"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "95a6951c",
+        "281d57a3",
+        "797a0534",
+        "64b4e88c",
+        "2fea9e4b",
+        "bf96ba57",
+        "74770051",
+        "2a7816d0",
+        "9032ea75",
+        "ba3c5f84",
+        "44973fdf",
+        "53bc3236",
+        "d53971f4",
+        "58ee670a",
+        "ee80ee2e",
+        "f26b0b7a",
+        "9ffb161a",
+        "140088c7",
+        "516563ba",
+        "a2c43d1",
+        "dae7e089",
+        "2347bc75"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "95a6951c",
+        "281d57a3",
+        "797a0534",
+        "64b4e88c",
+        "2fea9e4b",
+        "bf96ba57",
+        "74770051",
+        "2a7816d0",
+        "9032ea75",
+        "ba3c5f84",
+        "44973fdf",
+        "53bc3236",
+        "d53971f4",
+        "58ee670a",
+        "ee80ee2e",
+        "f26b0b7a",
+        "9ffb161a",
+        "140088c7",
+        "516563ba",
+        "a2c43d1",
+        "dae7e089",
+        "2347bc75"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/zh-CN.mdx b/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/zh-CN.mdx
index 0778ffe..1bdeef3 100644
--- a/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/zh-CN.mdx
+++ b/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/zh-CN.mdx
@@ -1,11 +1,13 @@
 ---
-title: ES2015类和 ES5 函数构造函数之间有什么区别？
+title: JavaScript ES2015 类和 ES5 函数构造函数之间有什么区别？
 ---
 
-让我们首先看看每个例子：
+## TL;DR
+
+ES2015 引入了一种创建类的新方法，与 ES5 函数构造函数语法相比，它提供了一种更直观、更简洁的方式来定义和使用对象和继承。以下是每个的示例：
 
 ```js
-// ES5 Function Constructor
+// ES5 function constructor
 function Person(name) {
   this.name = name;
 }
@@ -18,30 +20,228 @@ class Person {
 }
 ```
 
-对简单的构造函数来说，它们看起来相当相似。
+对于简单的构造函数，它们看起来非常相似。构造函数的主要区别在于使用继承时。如果我们想创建一个 `Student` 类，该类是 `Person` 的子类，并添加一个 `studentId` 字段，这就是我们必须做的。
 
-构造函数中的主要差异是在使用继承时。 如果我们想创建一个`Person` 的子类 `Student` 类，并添加一个 "studentId "字段，这就是我们在上述基础上所要做的事情。
+```js live
+// ES5 inheritance
+// Superclass
+function Person1(name) {
+  this.name = name;
+}
 
-```js
-// ES5 Function Constructor
-function Student(name, studentId) {
+// Subclass
+function Student1(name, studentId) {
   // Call constructor of superclass to initialize superclass-derived members.
-  Person.call(this, name);
+  Person1.call(this, name);
 
   // Initialize subclass's own members.
   this.studentId = studentId;
 }
+Student1.prototype = Object.create(Person1.prototype);
+Student1.prototype.constructor = Student1;
 
-Student.prototype = Object.create(Person.prototype);
-Student.prototype.constructor = Student;
+const student1 = new Student1('John', 1234);
+console.log(student1.name, student1.studentId); // "John" 1234
 
-// ES2015 Class
-class Student extends Person {
+// ES2015 inheritance
+// Superclass
+class Person2 {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+// Subclass
+class Student2 extends Person2 {
   constructor(name, studentId) {
     super(name);
     this.studentId = studentId;
   }
 }
+
+const student2 = new Student2('Alice', 5678);
+console.log(student2.name, student2.studentId); // "Alice" 5678
+```
+
+在 ES5 中使用继承要冗长得多，而 ES2015 版本更容易理解和记忆。
+
+**ES5 函数构造函数与 ES2015 类的比较**
+
+| 特性 | ES5 函数构造函数 | ES2015 类 |
+| --- | --- | --- |
+| 语法 | 使用函数构造函数和原型 | 使用 `class` 关键字 |
+| 构造函数 | 使用 `this` 分配属性的函数 | 类中的 `constructor` 方法 |
+| 方法定义 | 在原型上定义 | 在类主体内定义 |
+| 静态方法 | 直接添加到构造函数 | 使用 `static` 关键字定义 |
+| 继承 | 使用 `Object.create()` 并手动设置原型链 | 使用 `extends` 关键字和 `super` 函数 |
+| 可读性 | 不太直观，更冗长 | 更简洁直观 |
+
+***
+
+## ES5 函数构造函数 vs ES2015 类
+
+ES5 函数构造函数和 ES2015 类是 JavaScript 中定义类的两种不同方式。它们都服务于相同的目的，但它们具有不同的语法和行为。
+
+### ES5 函数构造函数
+
+在 ES5 中，您可以使用函数构造函数和原型定义类似类的结构。这是一个例子：
+
+```js live
+// ES5 function constructor
+function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+Person.prototype.greet = function () {
+  console.log(
+    'Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.',
+  );
+};
+
+// Creating an instance
+var person1 = new Person('John', 30);
+person1.greet(); // Hello, my name is John and I am 30 years old.
+```
+
+### ES2015 类
+
+ES2015 引入了 `class` 语法，它简化了类的定义，并支持更多功能，例如静态方法和子类化。以下是使用 ES2015 的相同示例：
+
+```js live
+// ES2015 Class
+class Person {
+  constructor(name, age) {
+    this.name = name;
+    this.age = age;
+  }
+
+  greet() {
+    console.log(
+      `Hello, my name is ${this.name} and I am ${this.age} years old.`,
+    );
+  }
+}
+
+// Creating an instance
+const person1 = new Person('John', 30);
+person1.greet(); // Hello, my name is John and I am 30 years old.
 ```
 
-在 ES5 中使用继承要啰嗦得多，ES2015 版本更容易理解和记忆。
+### 主要区别
+
+1. **语法和可读性**：
+
+   * **ES5**：使用函数构造函数和原型，这不太直观，也更难阅读。
+   * **ES2015**：使用 `class` 关键字，使代码更简洁，更容易理解。
+
+2. **静态方法**：
+
+   * **ES5**：静态方法直接添加到构造函数中。
+   * **ES2015**：静态方法使用 `static` 关键字在类中定义。
+
+   ```js live
+   // ES5
+   function Person1(name, age) {
+     this.name = name;
+     this.age = age;
+   }
+
+   Person1.sayHi = function () {
+     console.log('Hi from ES5!');
+   };
+
+   Person1.sayHi(); // Hi from ES5!
+
+   // ES2015
+   class Person2 {
+     static sayHi() {
+       console.log('Hi from ES2015!');
+     }
+   }
+   Person2.sayHi(); // Hi from ES2015!
+   ```
+
+3. **继承**
+
+   * **ES5**：继承是使用 `Object.create()` 并手动设置原型链来实现的。
+   * **ES2015**：使用 extends 关键字，继承更加简单直观。
+
+   ```js live
+   // ES5 Inheritance
+
+   // ES5 function constructor
+   function Person1(name, age) {
+     this.name = name;
+     this.age = age;
+   }
+
+   Person1.prototype.greet = function () {
+     console.log(
+       `Hello, my name is ${this.name} and I am ${this.age} years old.`,
+     );
+   };
+
+   function Student1(name, age, grade) {
+     Person1.call(this, name, age);
+     this.grade = grade;
+   }
+
+   Student1.prototype = Object.create(Person1.prototype);
+   Student1.prototype.constructor = Student1;
+
+   Student1.prototype.study = function () {
+     console.log(this.name + ' is studying.');
+   };
+
+   var student1 = new Student1('John', 22, 'B+');
+   student1.greet(); // Hello, my name is John and I am 22 years old.
+   student1.study(); // John is studying.
+
+   // ES2015 Inheritance
+
+   // ES2015 Class
+   class Person2 {
+     constructor(name, age) {
+       this.name = name;
+       this.age = age;
+     }
+
+     greet() {
+       console.log(
+         `Hello, my name is ${this.name} and I am ${this.age} years old.`,
+       );
+     }
+   }
+
+   class Student2 extends Person2 {
+     constructor(name, age, grade) {
+       super(name, age);
+       this.grade = grade;
+     }
+
+     study() {
+       console.log(`${this.name} is studying.`);
+     }
+   }
+
+   const student2 = new Student2('Alice', 20, 'A');
+   student2.greet(); // Hello, my name is Alice and I am 20 years old.
+   student2.study(); // Alice is studying.
+   ```
+
+4. `super` 调用：
+
+   * **ES5**：手动调用父构造函数。
+   * **ES2015**：使用 `super` 关键字调用父类的构造函数和方法。
+
+### 结论
+
+虽然 ES5 和 ES2015 方法都可以实现相同的功能，但 ES2015 类提供了一种更清晰、更简洁的方式来定义和使用 JavaScript 中的面向对象结构，这使得代码更容易编写、阅读和维护。 如果您正在使用现代 JavaScript，通常建议使用 ES2015 类而不是 ES5 函数构造函数。
+
+## 资源
+
+* [类 - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
+* [继承 - MDN ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#inheritance)
+* [对象的秘密生活](https://eloquentjavascript.net/06_object.html)
+* [ES2015 vs ES5](https://www.educative.io/courses/learn-object-oriented-programming-in-javascript/es2015-vs-es5)
diff --git a/questions/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.langnostic.json b/questions/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.langnostic.json
new file mode 100644
index 0000000..4a666e2
--- /dev/null
+++ b/questions/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.langnostic.json
@@ -0,0 +1,72 @@
+{
+  "frontmatter": {
+    "title": "ce877cfc"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "3c2d208a",
+        "a456d26e",
+        "3cf45eea",
+        "a441a125",
+        "e2c972f2",
+        "3ba2b5f2",
+        "89fb2a78",
+        "d6cfa9b2",
+        "5894272",
+        "fbd9ad72",
+        "b3156da3",
+        "e2211430",
+        "e12dbe45",
+        "2a7816d0",
+        "acdb035",
+        "ecb8f1ef",
+        "17cea45a",
+        "77c6a53e",
+        "bdc7d1d6",
+        "a714d2d2",
+        "3efa8595",
+        "d47d82bc",
+        "af9a8022",
+        "bb4449e4",
+        "3eb3598c",
+        "1f4770e5",
+        "42fc8234"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "3c2d208a",
+        "a456d26e",
+        "3cf45eea",
+        "a441a125",
+        "e2c972f2",
+        "3ba2b5f2",
+        "89fb2a78",
+        "d6cfa9b2",
+        "5894272",
+        "fbd9ad72",
+        "b3156da3",
+        "e2211430",
+        "e12dbe45",
+        "2a7816d0",
+        "acdb035",
+        "ecb8f1ef",
+        "17cea45a",
+        "77c6a53e",
+        "bdc7d1d6",
+        "a714d2d2",
+        "3efa8595",
+        "d47d82bc",
+        "af9a8022",
+        "bb4449e4",
+        "3eb3598c",
+        "1f4770e5",
+        "42fc8234"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-differences-between-map-set-and-weakmap-weakset/zh-CN.mdx b/questions/what-are-the-differences-between-map-set-and-weakmap-weakset/zh-CN.mdx
new file mode 100644
index 0000000..96246fd
--- /dev/null
+++ b/questions/what-are-the-differences-between-map-set-and-weakmap-weakset/zh-CN.mdx
@@ -0,0 +1,146 @@
+---
+title: JavaScript 中 `Map`/`Set` 和 `WeakMap`/`WeakSet` 有什么区别？
+---
+
+## 总结
+
+JavaScript 中 `Map`/`Set` 和 `WeakMap`/`WeakSet` 的主要区别在于它们如何处理键。以下是细分：
+
+**`Map` vs. `WeakMap`**
+
+`Map` 允许任何数据类型（字符串、数字、对象）作为键。只要引用 `Map` 对象本身，键值对就会保留在内存中。因此，它们适用于通用键值存储，您希望维护对键和值的引用。常见用例包括存储用户数据、配置设置或对象之间的关系。
+
+`WeakMap` 仅允许对象作为键。但是，这些对象键被弱保存。这意味着垃圾收集器可以从内存中删除它们，即使 `WeakMap` 本身仍然存在，只要没有对这些对象的其他引用。`WeakMap` 非常适合您希望将数据与对象关联而不会阻止这些对象被垃圾回收的场景。这对于以下情况可能很有用：
+
+* 基于对象缓存数据，而不会阻止对象本身的垃圾回收。
+* 存储与 DOM 节点关联的私有数据，而不会影响其生命周期。
+
+**`Set` vs. `WeakSet`**
+
+与 `Map` 类似，`Set` 允许任何数据类型作为键。`Set` 中的元素必须是唯一的。`Set` 适用于存储唯一值并有效检查成员资格。常见用例包括从数组中删除重复项或跟踪已完成的任务。
+
+另一方面，`WeakSet` 仅允许对象作为元素，并且这些对象元素被弱保存，类似于 `WeakMap` 键。`WeakSet` 很少使用，但当您需要一组唯一对象而不影响其垃圾回收时适用。这可能对于以下情况是必要的：
+
+* 跟踪已交互的 DOM 节点，而不会影响其内存管理。
+* 为特定用例实现自定义对象弱引用。
+
+**以下是一个总结关键差异的表格：**
+
+| 特性 | Map | WeakMap | Set | WeakSet |
+| --- | --- | --- | --- | --- |
+| 键类型 | 任何数据类型 | 对象（弱引用） | 任何数据类型（唯一） | 对象（弱引用，唯一） |
+| 垃圾回收 | 键和值不会被垃圾回收 | 如果没有其他地方引用，键可以被垃圾回收 | 元素不会被垃圾回收 | 如果没有其他地方引用，元素可以被垃圾回收 |
+| 用例 | 通用键值存储 | 缓存、私有 DOM 节点数据 | 删除重复项、成员资格检查 | 对象弱引用、自定义用例 |
+
+**在它们之间进行选择**
+
+* 在大多数需要存储键值对或唯一元素并希望维护对键/元素和值的引用的情况下，使用 `Map` 和 `Set`。
+* 在特定情况下谨慎使用 `WeakMap` 和 `WeakSet`，您希望将数据与对象关联而不会影响其垃圾回收。如果使用不当，请注意弱引用的含义和潜在的内存泄漏。
+
+***
+
+## `Map`/`Set` vs `WeakMap`/`WeakSet`
+
+JavaScript 中 `Map`/`Set` 和 `WeakMap`/`WeakSet` 之间的主要区别在于：
+
+1. **键类型**：`Map` 和 `Set` 可以具有任何类型的键（对象、原始值等），而 `WeakMap` 和 `WeakSet` 只能将对象作为键。原始值（如字符串或数字）不允许作为 `WeakMap` 和 `WeakSet` 中的键。
+2. **内存管理**：主要区别在于它们如何处理内存。`Map` 和 `Set` 具有对其键和值的强引用，这意味着它们将阻止对这些值进行垃圾回收。另一方面，`WeakMap` 和 `WeakSet` 具有对其键（对象）的弱引用，如果对它们没有其他强引用，则允许对这些对象进行垃圾回收。
+3. **键枚举**：`Map` 和 `Set` 中的键是可枚举的（可以迭代），而 `WeakMap` 和 `WeakSet` 中的键不可枚举。这意味着您无法从 `WeakMap` 或 `WeakSet` 获取键或值的列表。
+4. **`size` 属性**：`Map` 和 `Set` 具有一个 `size` 属性，该属性返回元素的数量，而 `WeakMap` 和 `WeakSet` 没有 `size` 属性，因为它们的大小可能会因垃圾回收而改变。
+5. **用例**：`Map` 和 `Set` 适用于通用数据结构和缓存，而 `WeakMap` 和 `WeakSet` 主要用于存储与对象相关的元数据或其他数据，而不会阻止对这些对象进行垃圾回收。
+
+`Map` 和 `Set` 是维护对其键和值的强引用的常规数据结构，而 `WeakMap` 和 `WeakSet` 专为希望将数据与对象关联而设计的场景，而不会阻止在不再需要这些对象时对它们进行垃圾回收。
+
+## `WeakMap` 和 `WeakSet` 的用例
+
+### 跟踪活跃用户
+
+在聊天应用程序中，您可能希望跟踪当前处于活动状态的用户对象，而不会在用户注销或会话过期时阻止垃圾回收。我们使用 `WeakSet` 来跟踪活跃的用户对象。当用户注销或他们的会话过期时，如果没有对该用户的其他引用，则该用户对象可以被垃圾回收。
+
+```js live
+const activeUsers = new WeakSet();
+
+// Function to mark a user as active
+function markUserActive(user) {
+  activeUsers.add(user);
+}
+
+// Function to check if a user is active
+function isUserActive(user) {
+  return activeUsers.has(user);
+}
+
+// Example usage
+let user1 = { id: 1, name: 'Alice' };
+let user2 = { id: 2, name: 'Bob' };
+
+markUserActive(user1);
+markUserActive(user2);
+
+console.log(isUserActive(user1)); // true
+console.log(isUserActive(user2)); // true
+
+// Simulate user logging out
+user1 = null;
+
+// user1 is now eligible for garbage collection
+console.log(isUserActive(user1)); // false
+```
+
+### 检测循环引用
+
+`WeakSet` 提供了一种通过跟踪哪些对象已经被处理来防止循环数据结构的方法。
+
+```js live
+// Create a WeakSet to track visited objects
+const visited = new WeakSet();
+
+// Function to traverse an object recursively
+function traverse(obj) {
+  // Check if the object has already been visited
+  if (visited.has(obj)) {
+    return;
+  }
+
+  // Add the object to the visited set
+  visited.add(obj);
+
+  // Traverse the object's properties
+  for (let prop in obj) {
+    if (obj.hasOwnProperty(prop)) {
+      let value = obj[prop];
+      if (typeof value === 'object' && value !== null) {
+        traverse(value);
+      }
+    }
+  }
+
+  // Process the object
+  console.log(obj);
+}
+
+// Create an object with a circular reference
+const obj = {
+  name: 'John',
+  age: 30,
+  friends: [
+    { name: 'Alice', age: 25 },
+    { name: 'Bob', age: 28 },
+  ],
+};
+
+// Create a circular reference
+obj.self = obj;
+
+// Traverse the object
+traverse(obj);
+```
+
+## 延伸阅读
+
+* [`Map` | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
+* [`WeakMap` | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap)
+* [`Set` | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set)
+* [`WeakSet` | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet)
+* [`Map` and `Set` | Javascript.info](https://javascript.info/map-set)
+* [`WeakMap` and `WeakSet` | Javascript.info](https://javascript.info/weakmap-weakset)
diff --git a/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.langnostic.json b/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.langnostic.json
new file mode 100644
index 0000000..49e7102
--- /dev/null
+++ b/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.langnostic.json
@@ -0,0 +1,70 @@
+{
+  "frontmatter": {
+    "title": "aae4d062"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "24fa666",
+        "30dafcb",
+        "2a7816d0",
+        "a5a5095",
+        "ca73c2a2",
+        "811b0194",
+        "79a76be0",
+        "4010553e",
+        "9f2bcaf2",
+        "a54701f1",
+        "8b8a1185",
+        "cb05daeb",
+        "bd8fbd99",
+        "c5a997a5",
+        "68dadf9",
+        "4b37fb58",
+        "b4d0cbd5",
+        "a48acc3",
+        "d785bc36",
+        "f2d34bc5",
+        "fc92c388",
+        "1f56c1f8",
+        "add698fb",
+        "da72207b",
+        "1f4770e5",
+        "e246bb9a"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "24fa666",
+        "30dafcb",
+        "2a7816d0",
+        "a5a5095",
+        "ca73c2a2",
+        "811b0194",
+        "79a76be0",
+        "4010553e",
+        "9f2bcaf2",
+        "a54701f1",
+        "8b8a1185",
+        "cb05daeb",
+        "bd8fbd99",
+        "c5a997a5",
+        "68dadf9",
+        "4b37fb58",
+        "b4d0cbd5",
+        "a48acc3",
+        "d785bc36",
+        "f2d34bc5",
+        "fc92c388",
+        "1f56c1f8",
+        "add698fb",
+        "da72207b",
+        "1f4770e5",
+        "e246bb9a"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/zh-CN.mdx b/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/zh-CN.mdx
index 8459846..8c0e5ea 100644
--- a/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/zh-CN.mdx
+++ b/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/zh-CN.mdx
@@ -1,79 +1,123 @@
 ---
-title: 使用`let`、`var`或`const`创建的变量之间有什么差异？
+title: JavaScript 中使用 `let`、`var` 或 `const` 创建的变量有什么区别？
 ---
 
-使用`var`关键字声明的变量的作用范围是创建这些变量的函数。 或者如果是在任何函数之外创建的，则是全局对象。 `let` 和 `const` 是 _block scoped_, 意思是它们只能在最近的一组大括号内(函数, if-else 块, 或循环块)。
+## TL;DR
 
-```js
+在 JavaScript 中，`let`、`var` 和 `const` 都是用于声明变量的关键字，但它们在作用域、初始化规则、是否可以重新声明或重新赋值以及在声明前访问时的行为方面存在显着差异：
+
+| 行为 | `var` | `let` | `const` |
+| --- | --- | --- | --- |
+| 作用域 | 函数或全局 | 块 | 块 |
+| 初始化 | 可选 | 可选 | 必需 |
+| 重新声明 | 是 | 否 | 否 |
+| 重新赋值 | 是 | 是 | 否 |
+| 声明前访问 | `undefined` | `ReferenceError` | `ReferenceError` |
+
+***
+
+## 行为差异
+
+让我们看看 `var`、`let` 和 `const` 之间的行为差异。
+
+### 作用域
+
+使用 `var` 关键字声明的变量的作用域限定于创建它们的函数，或者如果创建在任何函数之外，则限定于全局对象。`let` 和 `const` 是*块作用域*，这意味着它们只能在最近的一组花括号（函数、if-else 块或 for 循环）内访问。
+
+```js live
 function foo() {
   // All variables are accessible within functions.
-  var bar = 'bar';
-  let baz = 'baz';
-  const qux = 'qux';
+  var bar = 1;
+  let baz = 2;
+  const qux = 3;
 
-  console.log(bar); // bar
-  console.log(baz); // baz
-  console.log(qux); // qux
+  console.log(bar); // 1
+  console.log(baz); // 2
+  console.log(qux); // 3
 }
 
+foo(); // Prints each variable successfully
 console.log(bar); // ReferenceError: bar is not defined
 console.log(baz); // ReferenceError: baz is not defined
 console.log(qux); // ReferenceError: qux is not defined
 ```
 
-```js
+在下面的示例中，`bar` 可以在 `if` 块之外访问，但 `baz` 和 `quz` 则不能。
+
+```js live
 if (true) {
-  var bar = 'bar';
-  let baz = 'baz';
-  const qux = 'qux';
+  var bar = 1;
+  let baz = 2;
+  const qux = 3;
 }
 
-// var declared variables are accessible anywhere in the function scope.
-console.log(bar); // bar
-// let and const defined variables are not accessible outside of the block they were defined in.
+// var variables are accessible anywhere in the function scope.
+console.log(bar); // 1
+// let and const variables are not accessible outside of the block they were defined in.
 console.log(baz); // ReferenceError: baz is not defined
 console.log(qux); // ReferenceError: qux is not defined
 ```
 
-`var`允许变量被提升，这意味着它们可以在声明之前用代码引用。 `let` 和 `const` 将不允许这样做，而是抛出一个错误。
+### 初始化
 
-```js
-console.log(foo); // undefined
+`var` 和 `let` 变量可以在没有值的情况下初始化，但 `const` 声明必须初始化。
 
-var foo = 'foo';
+```js live
+var foo; // Ok
+let bar; // Ok
+const baz; // SyntaxError: Missing initializer in const declaration
+```
 
-console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization
+### 重新声明
 
-let baz = 'baz';
+使用 `var` 重新声明变量不会抛出错误，但 `let` 和 `const` 会。
 
-console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization
+```js live
+var foo = 1;
+var foo = 2; // Ok
+console.log(foo); // Should print 2, but SyntaxError from baz prevents the code executing.
 
-const bar = 'bar';
+let baz = 3;
+let baz = 4; // Uncaught SyntaxError: Identifier 'baz' has already been declared
 ```
 
-用 `var` 重新声明变量不会产生错误，而 `let` 和 `const` 会。
+### 重新赋值
 
-```js
-var foo = 'foo';
-var foo = 'bar';
-console.log(foo); // "bar"
+`let` 和 `const` 的区别在于，`var` 和 `let` 允许重新分配变量的值，而 `const` 不允许。
 
-let baz = 'baz';
-let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared
+```js live
+var foo = 1;
+foo = 2; // This is fine.
+
+let bar = 3;
+bar = 4; // This is fine.
+
+const baz = 5;
+baz = 6; // Uncaught TypeError: Assignment to constant variable.
 ```
 
-`let` 和 `const` 不同于`let` 允许重新分配变量的值，而`const` 不允许。
+### 声明前访问
+
+`var`、`let` 和 `const` 声明的变量都会被提升。`var` 声明的变量会自动初始化为 `undefined` 值。但是，`let` 和 `const` 变量不会被初始化，在声明之前访问它们将导致 `ReferenceError` 异常，因为它们处于从块的开始到声明被处理的“暂时性死区”。
+
+```js live
+console.log(foo); // undefined
+var foo = 'foo';
 
-```js
-// This is fine.
-let foo = 'foo';
-foo = 'bar';
+console.log(baz); // ReferenceError: Cannot access 'baz' before initialization
+let baz = 'baz';
 
-// This causes an exception.
-const baz = 'baz';
-baz = 'qux';
+console.log(bar); // ReferenceError: Cannot access 'baz' before initialization
+const bar = 'bar';
 ```
 
-## 备注
+## 笔记
+
+* 在现代 JavaScript 中，通常建议默认对不需要重新赋值的变量使用 `const`。这可以提高不变性并防止意外更改。
+* 当您需要在其范围内重新分配变量时，请使用 `let`。
+* 避免使用 `var`，因为它可能存在作用域问题和提升行为。
+* 如果您需要针对旧版浏览器，请使用 `let`/`const` 编写代码，并使用 Babel 等转译器将您的代码编译为旧语法。
+
+## 延伸阅读
 
-- 由于大多数浏览器在现如今都支持 `let` 和 `const` ，因此不再推荐使用 `var` 。 如果您需要针对较旧的浏览器，请使用 `let` 写代码，并使用像 Babel 这样的转译器将您的代码编译成旧的语法。
+* [Javascript 中 "var" vs "let" vs "const" 的区别](https://medium.com/swlh/the-difference-of-var-vs-let-vs-const-in-javascript-abe37e214d66)
diff --git a/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.langnostic.json b/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.langnostic.json
new file mode 100644
index 0000000..4ffe8f8
--- /dev/null
+++ b/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.langnostic.json
@@ -0,0 +1,126 @@
+{
+  "frontmatter": {
+    "title": "f2214786"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "3468354c",
+        "b804e1ae",
+        "24037d00",
+        "2a7816d0",
+        "2a4890b9",
+        "de7c4d81",
+        "5551839d",
+        "efe43a6b",
+        "5fe2025b",
+        "44666a07",
+        "d7e06034",
+        "f3d7c7d3",
+        "aefe3894",
+        "3e4c87f8",
+        "a6468de",
+        "1fbdaeb4",
+        "75a348",
+        "eb40f10c",
+        "5fec58ac",
+        "61e9c62e",
+        "24117866",
+        "95281ddc",
+        "7519ded0",
+        "d3e92efc",
+        "4cda4bac",
+        "3a119008",
+        "9f174f08",
+        "91fe7a77",
+        "4b099bfb",
+        "4b74ca9c",
+        "6421a62f",
+        "bcf46695",
+        "663d2369",
+        "128e8b9c",
+        "d0150874",
+        "dd887f26",
+        "307c3ed6",
+        "4351c2c2",
+        "2232a4c1",
+        "ec31fcc2",
+        "17840616",
+        "81595954",
+        "171b8f2e",
+        "649f79da",
+        "839de168",
+        "4a61620f",
+        "5c76b4eb",
+        "2f2aecf8",
+        "bd7adb9",
+        "81f2d0",
+        "d265256c",
+        "fa307855",
+        "1f4770e5",
+        "3754c7e9"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "3468354c",
+        "b804e1ae",
+        "24037d00",
+        "2a7816d0",
+        "2a4890b9",
+        "de7c4d81",
+        "5551839d",
+        "efe43a6b",
+        "5fe2025b",
+        "44666a07",
+        "d7e06034",
+        "f3d7c7d3",
+        "aefe3894",
+        "3e4c87f8",
+        "a6468de",
+        "1fbdaeb4",
+        "75a348",
+        "eb40f10c",
+        "5fec58ac",
+        "61e9c62e",
+        "24117866",
+        "95281ddc",
+        "7519ded0",
+        "d3e92efc",
+        "4cda4bac",
+        "3a119008",
+        "9f174f08",
+        "91fe7a77",
+        "4b099bfb",
+        "4b74ca9c",
+        "6421a62f",
+        "bcf46695",
+        "663d2369",
+        "128e8b9c",
+        "d0150874",
+        "dd887f26",
+        "307c3ed6",
+        "4351c2c2",
+        "2232a4c1",
+        "ec31fcc2",
+        "17840616",
+        "81595954",
+        "171b8f2e",
+        "649f79da",
+        "839de168",
+        "4a61620f",
+        "5c76b4eb",
+        "2f2aecf8",
+        "bd7adb9",
+        "81f2d0",
+        "d265256c",
+        "fa307855",
+        "1f4770e5",
+        "3754c7e9"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/zh-CN.mdx b/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/zh-CN.mdx
new file mode 100644
index 0000000..75f021f
--- /dev/null
+++ b/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/zh-CN.mdx
@@ -0,0 +1,241 @@
+---
+title: JavaScript 和浏览器中 `XMLHttpRequest` 和 `fetch()` 之间有什么区别？
+---
+
+## TL;DR
+
+`XMLHttpRequest` (XHR) 和 `fetch()` API 都用于 JavaScript (AJAX) 中的异步 HTTP 请求。与 XHR 相比，`fetch()` 提供了更简洁的语法、基于 Promise 的方法和更现代的功能集。但是，存在一些差异：
+
+* `XMLHttpRequest` 事件回调，而 `fetch()` 使用 promise 链。
+* `fetch()` 在标头和请求体方面提供了更大的灵活性。
+* `fetch()` 通过 `catch()` 支持更简洁的错误处理。
+* 使用 `XMLHttpRequest` 处理缓存很困难，但 `fetch()` 默认在 `options.cache` 对象（第二个参数的 `cache` 值）中支持缓存到 `fetch()` 或 `Request()`。
+* `fetch()` 需要 `AbortController` 来取消，而对于 `XMLHttpRequest`，它提供了 `abort()` 属性。
+* `XMLHttpRequest` 对进度跟踪有很好的支持，而 `fetch()` 缺乏。
+* `XMLHttpRequest` 仅在浏览器中可用，并且在 Node.js 环境中不受原生支持。另一方面，`fetch()` 是 JavaScript 语言的一部分，并且在所有现代 JavaScript 运行时中都受支持。
+
+如今，由于其更简洁的语法和现代功能，更倾向于使用 `fetch()`。
+
+***
+
+## `XMLHttpRequest` vs `fetch()`
+
+`XMLHttpRequest` (XHR) 和 `fetch()` 都是在 JavaScript 中进行异步 HTTP 请求的方式。但是，它们在语法、promise 处理和功能集方面存在显着差异。
+
+## 语法和用法
+
+`XMLHttpRequest` 是事件驱动的，需要附加事件侦听器来处理响应/错误状态。创建 `XMLHttpRequest` 对象和发送请求的基本语法如下：
+
+```js live
+const xhr = new XMLHttpRequest();
+xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
+xhr.responseType = 'json';
+xhr.onload = function () {
+  if (xhr.status === 200) {
+    console.log(xhr.response);
+  }
+};
+xhr.send();
+```
+
+`xhr` 是 `XMLHttpRequest` 类的实例。`open` 方法用于指定请求方法、URL 以及请求是否应为异步。`onload` 事件用于处理响应，`send` 方法用于发送请求。
+
+`fetch()` 提供了一种更直接、更直观的方式来发出 HTTP 请求。它是基于 `Promise` 的，并返回一个 promise，该 promise 使用响应进行解析或使用错误进行拒绝。使用 `fetch()` 发出 GET 请求的基本语法如下：
+
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
+  .then((response) => response.text())
+  .then((data) => console.log(data));
+```
+
+## 请求标头
+
+`XMLHttpRequest` 和 `fetch()` 都支持设置请求标头。但是，`fetch()` 在设置标头方面提供了更大的灵活性，因为它支持自定义标头并允许更复杂的标头配置。
+
+`XMLHttpRequest` 支持使用 `setRequestHeader` 方法设置请求标头：
+
+```js
+xhr.setRequestHeader('Content-Type', 'application/json');
+xhr.setRequestHeader('Authorization', 'Bearer YOUR_TOKEN');
+```
+
+对于 `fetch()`，标头作为对象传递给 `fetch()` 的第二个参数：
+
+```js
+fetch('https://jsonplaceholder.typicode.com/todos/1', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+    Authorization: 'Bearer YOUR_TOKEN',
+  },
+  body: JSON.stringify({
+    name: 'John Doe',
+    age: 30,
+  }),
+});
+```
+
+## 请求体
+
+`XMLHttpRequest` 和 `fetch()` 都支持发送请求体。但是，`fetch()` 在发送请求体方面提供了更大的灵活性，因为它支持发送 JSON 数据、表单数据等。
+
+`XMLHttpRequest` 支持使用 `send` 方法发送请求体：
+
+```js
+const xhr = new XMLHttpRequest();
+xhr.open('POST', 'https://jsonplaceholder.typicode.com/todos/1', true);
+xhr.send(
+  JSON.stringify({
+    name: 'John Doe',
+    age: 30,
+  }),
+);
+```
+
+`fetch()` 支持使用 `fetch()` 的第二个参数中的 `body` 属性发送请求体：
+
+```js
+fetch('https://jsonplaceholder.typicode.com/todos/1', {
+  method: 'POST',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  body: JSON.stringify({
+    name: 'John Doe',
+    age: 30,
+  }),
+});
+```
+
+## 响应处理
+
+`XMLHttpRequest` 提供了一个 `responseType` 属性来设置我们期望的响应格式。`responseType` 默认为 `'text'`，但它支持 `'text'`、`'arraybuffer'`、`'blob'`、`'document'` 和 `'json'` 等类型。
+
+```js live
+const xhr = new XMLHttpRequest();
+xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
+xhr.responseType = 'json'; // or 'text', 'blob', 'arraybuffer'
+xhr.onload = function () {
+  if (xhr.status === 200) {
+    console.log(xhr.response);
+  }
+};
+xhr.send();
+```
+
+另一方面，`fetch()` 提供了一个统一的 `Response` 对象，它具有用于访问数据的 `then` 方法。
+
+```js live
+// JSON data
+fetch('https://jsonplaceholder.typicode.com/todos/1')
+  .then((response) => response.json())
+  .then((data) => console.log(data));
+
+// Text data
+fetch('https://jsonplaceholder.typicode.com/todos/1')
+  .then((response) => response.text())
+  .then((data) => console.log(data));
+```
+
+## 错误处理
+
+两者都支持错误处理，但 `fetch()` 在错误处理方面提供了更大的灵活性，因为它支持使用 `.catch()` 方法处理错误。
+
+`XMLHttpRequest` 支持使用 `onerror` 事件进行错误处理：
+
+```js live
+const xhr = new XMLHttpRequest();
+xhr.open('GET', 'https://jsonplaceholder.typicod.com/todos/1', true); // Typo in URL
+xhr.responseType = 'json';
+xhr.onload = function () {
+  if (xhr.status === 200) {
+    console.log(xhr.response);
+  }
+};
+xhr.onerror = function () {
+  console.error('Error occurred');
+};
+xhr.send();
+```
+
+`fetch()` 支持使用返回的 `Promise` 上的 `catch()` 方法进行错误处理：
+
+```js live
+fetch('https://jsonplaceholder.typicod.com/todos/1') // Typo in URL
+  .then((response) => response.json())
+  .then((data) => console.log(data))
+  .catch((error) => console.error('Error occurred: ' + error));
+```
+
+## 缓存控制
+
+使用 `XMLHttpRequest` 处理缓存很困难，您可能需要向查询字符串添加一个随机值才能绕过浏览器缓存。 默认情况下，`fetch()` 在 `options` 对象的第二个参数中支持缓存：
+
+```js
+const res = await fetch('https://jsonplaceholder.typicode.com/todos/1', {
+  method: 'GET',
+  cache: 'default',
+});
+```
+
+[`cache` option](https://developer.mozilla.org/en-US/docs/Web/API/Request/cache) 的其他值包括 `default`、`no-store`、`reload`、`no-cache`、`force-cache` 和 `only-if-cached`。
+
+## 取消
+
+正在进行的 `XMLHttpRequest` 可以通过运行 `XMLHttpRequest` 的 `abort()` 方法来取消。如果需要，可以通过将 `.onabort` 属性赋值来附加一个 `abort` 处理程序：
+
+```js live
+const xhr = new XMLHttpRequest();
+xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
+xhr.send();
+// ...
+xhr.onabort = () => console.log('aborted');
+xhr.abort();
+```
+
+中止 `fetch()` 需要创建一个 [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController) 对象，并在调用 `fetch()` 时将其作为 `options` 对象的 `signal` 属性传递。
+
+```js live
+const controller = new AbortController();
+const signal = controller.signal;
+
+fetch('https://jsonplaceholder.typicode.com/todos/1', { signal })
+  .then((response) => response.json())
+  .then((data) => console.log(data))
+  .catch((error) => console.error('Error occurred: ' + error));
+
+// Abort request.
+controller.abort();
+```
+
+## 进度支持
+
+`XMLHttpRequest` 通过将处理程序附加到 `XMLHttpRequest` 对象的进度事件来支持跟踪请求的进度。 这在上传大文件（例如视频）以跟踪上传进度时特别有用。
+
+```js
+const xhr = new XMLHttpRequest();
+
+// The callback is passed a `ProgressEvent`.
+xhr.upload.onprogress = (event) => {
+  console.log(Math.round((event.loaded / event.total) * 100) + '%');
+};
+```
+
+分配给 `onprogress` 的回调函数会传递一个 [`ProgressEvent`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/progress_event):
+
+* `ProgressEvent` 上的 `loaded` 字段是一个 64 位整数，指示底层进程已执行的工作量（已上传/下载的字节数）。
+* `ProgressEvent` 上的 `total` 字段是一个 64 位整数，表示底层进程正在执行的总工作量。 下载资源时，这是 HTTP 请求的 `Content-Length` 值。
+
+另一方面，`fetch()` API 并没有提供任何方便的方法来跟踪上传进度。 它可以实现为监视 `Response` 对象的 `body` 作为 `Content-Length` 标头的分数，但这非常复杂。
+
+## 在 `XMLHttpRequest` 和 `fetch()` 之间进行选择
+
+在现代开发场景中，由于其更简洁的语法、基于 promise 的方法以及改进的错误处理、标头和 CORS 等功能处理，`fetch()` 是首选。
+
+## 延伸阅读
+
+* [Fetch API | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
+* [XMLHttpRequest | MDN](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
+* [Request: cache property | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Request/cache)
+* [XMLHttpRequest | Javascript.info](https://javascript.info/xmlhttprequest)
+* [This API is so Fetching! - Mozilla Hacks](https://hacks.mozilla.org/2015/03/this-api-is-so-fetching/)
diff --git a/questions/what-are-the-different-methods-for-iterating-over-an-array/en-US.langnostic.json b/questions/what-are-the-different-methods-for-iterating-over-an-array/en-US.langnostic.json
new file mode 100644
index 0000000..2d20630
--- /dev/null
+++ b/questions/what-are-the-different-methods-for-iterating-over-an-array/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "1bcf4c3d"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "653b0f86",
+        "2a7816d0",
+        "3a044d63",
+        "c38781d3",
+        "2c3f9856",
+        "e0ce78b6",
+        "649b64c9",
+        "98e8da5b",
+        "37afb482",
+        "6a15397c",
+        "95a96c5a",
+        "2cf9914a",
+        "51acbeb5",
+        "fdaeaab4",
+        "c0f9fadd",
+        "71f321cc",
+        "4a045853",
+        "ef2cf30b",
+        "b672b5b9",
+        "c2dd4f2b",
+        "806077ef",
+        "1f4770e5",
+        "d18538e5"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "653b0f86",
+        "2a7816d0",
+        "3a044d63",
+        "c38781d3",
+        "2c3f9856",
+        "e0ce78b6",
+        "649b64c9",
+        "98e8da5b",
+        "37afb482",
+        "6a15397c",
+        "95a96c5a",
+        "2cf9914a",
+        "51acbeb5",
+        "fdaeaab4",
+        "c0f9fadd",
+        "71f321cc",
+        "4a045853",
+        "ef2cf30b",
+        "b672b5b9",
+        "c2dd4f2b",
+        "806077ef",
+        "1f4770e5",
+        "d18538e5"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-different-methods-for-iterating-over-an-array/zh-CN.mdx b/questions/what-are-the-different-methods-for-iterating-over-an-array/zh-CN.mdx
new file mode 100644
index 0000000..1b2e26b
--- /dev/null
+++ b/questions/what-are-the-different-methods-for-iterating-over-an-array/zh-CN.mdx
@@ -0,0 +1,81 @@
+---
+title: 有哪些不同的遍历数组的方法？
+---
+
+## TL;DR
+
+在 JavaScript 中，有几种遍历数组的方法。最常见的方法包括 `for` 循环、`forEach`、`map`、`filter`、`reduce` 和 `for...of`。每种方法都有其自身的用例。例如，`for` 循环用途广泛，可用于任何类型的迭代，而 `forEach` 专门用于对每个数组元素执行一个函数。`map` 用于转换数组，`filter` 用于过滤元素，`reduce` 用于累加值，而 `for...of` 用于遍历可迭代对象。
+
+***
+
+## 遍历数组的不同方法
+
+### For 循环
+
+`for` 循环是遍历数组的最基本和最通用的方法之一。它允许你完全控制迭代过程。
+
+```js live
+const array = [1, 2, 3, 4, 5];
+for (let i = 0; i < array.length; i++) {
+  console.log(array[i]);
+}
+```
+
+### For...of 循环
+
+`for...of` 循环是一种更现代、更易读的遍历数组和其他可迭代对象的方法。
+
+```js live
+const array = [1, 2, 3, 4, 5];
+for (const element of array) {
+  console.log(element);
+}
+```
+
+### forEach 方法
+
+`forEach` 方法为每个数组元素执行提供的函数一次。
+
+```js live
+const array = [1, 2, 3, 4, 5];
+array.forEach((element) => {
+  console.log(element);
+});
+```
+
+### Map 方法
+
+`map` 方法创建一个新数组，其中填充了在调用数组中的每个元素上调用提供的函数的结果。
+
+```js live
+const array = [1, 2, 3, 4, 5];
+const newArray = array.map((element) => element * 2);
+console.log(newArray); // [2, 4, 6, 8, 10]
+```
+
+### Filter 方法
+
+`filter` 方法创建一个新数组，其中包含通过提供的函数实现的测试的所有元素。
+
+```js live
+const array = [1, 2, 3, 4, 5];
+const filteredArray = array.filter((element) => element > 2);
+console.log(filteredArray); // [3, 4, 5]
+```
+
+### Reduce 方法
+
+`reduce` 方法对数组的每个元素执行一个 reducer 函数，最终得到一个单一的输出值。
+
+```js live
+const array = [1, 2, 3, 4, 5];
+const sum = array.reduce(
+  (accumulator, currentValue) => accumulator + currentValue,
+  0,
+);
+console.log(sum); // 15
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
diff --git a/questions/what-are-the-different-types-of-errors-in-javascript/en-US.langnostic.json b/questions/what-are-the-different-types-of-errors-in-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..c152f9c
--- /dev/null
+++ b/questions/what-are-the-different-types-of-errors-in-javascript/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "ecc5300e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "da558578",
+        "2a7816d0",
+        "ead217b1",
+        "e48cd3cd",
+        "3b2a5368",
+        "748ffe75",
+        "f0e5c7b3",
+        "60c218f1",
+        "1664b20a",
+        "748ffe75",
+        "9a16a150",
+        "1882c98e",
+        "c1661bc3",
+        "748ffe75",
+        "817d76ba",
+        "1f4770e5",
+        "a0d8e7b0"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "da558578",
+        "2a7816d0",
+        "ead217b1",
+        "e48cd3cd",
+        "3b2a5368",
+        "748ffe75",
+        "f0e5c7b3",
+        "60c218f1",
+        "1664b20a",
+        "748ffe75",
+        "9a16a150",
+        "1882c98e",
+        "c1661bc3",
+        "748ffe75",
+        "817d76ba",
+        "1f4770e5",
+        "a0d8e7b0"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-different-types-of-errors-in-javascript/zh-CN.mdx b/questions/what-are-the-different-types-of-errors-in-javascript/zh-CN.mdx
new file mode 100644
index 0000000..4488958
--- /dev/null
+++ b/questions/what-are-the-different-types-of-errors-in-javascript/zh-CN.mdx
@@ -0,0 +1,55 @@
+---
+title: JavaScript 中有哪些不同类型的错误？
+---
+
+## TL;DR
+
+在 JavaScript 中，主要有三种类型的错误：语法错误、运行时错误和逻辑错误。当代码违反语言的语法规则时，例如缺少括号，就会发生语法错误。运行时错误发生在代码执行期间，例如尝试访问 `undefined` 的属性。逻辑错误是代码逻辑中的错误，导致结果不正确，但不会抛出错误。
+
+***
+
+## JavaScript 中不同类型的错误
+
+### 语法错误
+
+当代码不遵循 JavaScript 语言的规则时，就会发生语法错误。这些错误由 JavaScript 引擎在代码执行之前的解析阶段检测到。
+
+#### 示例
+
+```js live
+console.log("Hello, world!; // Missing closing quote and parenthesis
+```
+
+### 运行时错误
+
+运行时错误，也称为异常，发生在代码执行期间。当代码在语法上正确但遇到阻止其完成任务的问题时，就会发生这些错误。
+
+#### 示例
+
+```js live
+let obj = null;
+console.log(obj.property); // TypeError: Cannot read properties of null (reading 'property')
+```
+
+### 逻辑错误
+
+逻辑错误是代码逻辑中的错误，导致结果不正确。这些错误不会抛出异常，而且通常是最难调试的，因为代码在没有任何问题的情况下运行，但会产生错误的输出。
+
+#### 示例
+
+```js live
+let isAdmin = false;
+
+if ((isAdmin = true)) {
+  // Wrong: Assignment instead of comparison
+  console.log('Access granted'); // Access granted even though isAdmin was falsy
+} else {
+  console.log('Access denied');
+}
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Errors](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error)
+* [JavaScript.info: Error handling](https://javascript.info/error-handling)
+* [W3Schools: JavaScript Errors](https://www.w3schools.com/js/js_errors.asp)
diff --git a/questions/what-are-the-different-types-of-testing-in-software-development/en-US.langnostic.json b/questions/what-are-the-different-types-of-testing-in-software-development/en-US.langnostic.json
new file mode 100644
index 0000000..9533785
--- /dev/null
+++ b/questions/what-are-the-different-types-of-testing-in-software-development/en-US.langnostic.json
@@ -0,0 +1,48 @@
+{
+  "frontmatter": {
+    "title": "96013da7"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "425c17a0",
+        "2a7816d0",
+        "120357d1",
+        "7c737123",
+        "9c8c89ac",
+        "5a670f69",
+        "ca7a8d03",
+        "6b219c29",
+        "278eecd1",
+        "67a428c7",
+        "58be317a",
+        "a3404d5c",
+        "a629f7e5",
+        "1f4770e5",
+        "13cbf083"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "425c17a0",
+        "2a7816d0",
+        "120357d1",
+        "7c737123",
+        "9c8c89ac",
+        "5a670f69",
+        "ca7a8d03",
+        "6b219c29",
+        "278eecd1",
+        "67a428c7",
+        "58be317a",
+        "a3404d5c",
+        "a629f7e5",
+        "1f4770e5",
+        "13cbf083"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-different-types-of-testing-in-software-development/zh-CN.mdx b/questions/what-are-the-different-types-of-testing-in-software-development/zh-CN.mdx
new file mode 100644
index 0000000..4dd6422
--- /dev/null
+++ b/questions/what-are-the-different-types-of-testing-in-software-development/zh-CN.mdx
@@ -0,0 +1,61 @@
+---
+title: 软件开发中不同类型的测试是什么？
+---
+
+## TL;DR
+
+在软件开发中，有几种类型的测试可以确保应用程序的质量和功能。这些包括单元测试、集成测试、系统测试和验收测试。单元测试侧重于单个组件，集成测试检查组件之间的交互，系统测试评估整个系统，验收测试确保软件满足用户需求。
+
+***
+
+## 软件开发中不同类型的测试
+
+### 单元测试
+
+单元测试涉及测试软件的单个组件或功能，以确保它们按预期工作。这种类型的测试通常是自动化的，由开发人员编写。
+
+```js
+// Example of a unit test using Jest
+function add(a, b) {
+  return a + b;
+}
+
+test('adds 1 + 2 to equal 3', () => {
+  expect(add(1, 2)).toBe(3);
+});
+```
+
+### 集成测试
+
+集成测试侧重于软件的不同组件或模块之间的交互。它确保应用程序的组合部分按预期一起工作。
+
+```js
+// Example of an integration test using Jest and Supertest
+const request = require('supertest');
+const app = require('./app'); // Your Express app
+
+test('GET /users returns a list of users', async () => {
+  const response = await request(app).get('/users');
+  expect(response.status).toBe(200);
+  expect(response.body).toEqual(
+    expect.arrayContaining([
+      expect.objectContaining({ id: expect.any(Number) }),
+    ]),
+  );
+});
+```
+
+### 系统测试
+
+系统测试评估完整且集成的软件系统，以验证它是否满足指定的需求。这种类型的测试通常由质量保证团队执行。
+
+### 验收测试
+
+验收测试，也称为用户验收测试 (UAT)，用于确定软件是否已准备好发布。它确保软件满足业务需求并被最终用户接受。
+
+## 延伸阅读
+
+* [单元测试 - 维基百科](https://en.wikipedia.org/wiki/Unit_testing)
+* [集成测试 - 维基百科](https://en.wikipedia.org/wiki/Integration_testing)
+* [系统测试 - 维基百科](https://en.wikipedia.org/wiki/System_testing)
+* [验收测试 - 维基百科](https://en.wikipedia.org/wiki/Acceptance_testing)
diff --git a/questions/what-are-the-different-ways-to-copy-an-object-or-an-array/en-US.langnostic.json b/questions/what-are-the-different-ways-to-copy-an-object-or-an-array/en-US.langnostic.json
new file mode 100644
index 0000000..5175ee1
--- /dev/null
+++ b/questions/what-are-the-different-ways-to-copy-an-object-or-an-array/en-US.langnostic.json
@@ -0,0 +1,66 @@
+{
+  "frontmatter": {
+    "title": "7ffe2ceb"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "b764f942",
+        "b36751e4",
+        "2a7816d0",
+        "d7b3a8fa",
+        "7cbd2fa0",
+        "bddef431",
+        "56a145ef",
+        "7ed9237a",
+        "84a68ef4",
+        "b5d2df91",
+        "2fbc8059",
+        "4ee204dd",
+        "76489c99",
+        "2e3bff19",
+        "e4b0a65c",
+        "fc6ec995",
+        "7acc1178",
+        "ac5214a2",
+        "2155f1fd",
+        "e3abd0f4",
+        "b76d3176",
+        "c3d6d14f",
+        "1f4770e5",
+        "aba85142"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "b764f942",
+        "b36751e4",
+        "2a7816d0",
+        "d7b3a8fa",
+        "7cbd2fa0",
+        "bddef431",
+        "56a145ef",
+        "7ed9237a",
+        "84a68ef4",
+        "b5d2df91",
+        "2fbc8059",
+        "4ee204dd",
+        "76489c99",
+        "2e3bff19",
+        "e4b0a65c",
+        "fc6ec995",
+        "7acc1178",
+        "ac5214a2",
+        "2155f1fd",
+        "e3abd0f4",
+        "b76d3176",
+        "c3d6d14f",
+        "1f4770e5",
+        "aba85142"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-different-ways-to-copy-an-object-or-an-array/zh-CN.mdx b/questions/what-are-the-different-ways-to-copy-an-object-or-an-array/zh-CN.mdx
new file mode 100644
index 0000000..61f1044
--- /dev/null
+++ b/questions/what-are-the-different-ways-to-copy-an-object-or-an-array/zh-CN.mdx
@@ -0,0 +1,115 @@
+---
+title: 复制对象或数组的不同方法是什么？
+---
+
+## TL;DR
+
+在 JavaScript 中复制对象或数组，可以使用多种方法。对于浅拷贝，可以使用扩展运算符（`...`）或 `Object.assign()`。对于深拷贝，可以使用 `JSON.parse(JSON.stringify())` 或像 Lodash 的 `_.cloneDeep()` 这样的库。
+
+```js live
+// Shallow copy of an array
+const originalArray = [1, 2, 3];
+const shallowCopyArray = [...originalArray];
+console.log(shallowCopyArray); // [1, 2, 3]
+
+// Shallow copy of an object
+const originalObject = { a: 1, b: 2 };
+const shallowCopyObject = { ...originalObject };
+console.log(shallowCopyObject); // { a: 1, b: 2 };
+
+// Deep copy using JSON methods
+const deepCopyObject = JSON.parse(JSON.stringify(originalObject));
+console.log(deepCopyObject); // { a: 1, b: 2 };
+```
+
+***
+
+## 复制对象或数组的不同方法
+
+### 浅拷贝
+
+#### 使用扩展运算符
+
+扩展运算符（`...`）是一种创建数组或对象浅拷贝的简洁方法。
+
+```js live
+// Shallow copy of an array
+const originalArray = [1, 2, 3];
+const shallowCopyArray = [...originalArray];
+console.log(shallowCopyArray); // [1, 2, 3]
+
+// Shallow copy of an object
+const originalObject = { a: 1, b: 2 };
+const shallowCopyObject = { ...originalObject };
+console.log(shallowCopyObject); // { a: 1, b: 2 };
+```
+
+#### 使用 `Object.assign()`
+
+`Object.assign()` 也可以用来创建对象的浅拷贝。
+
+```js live
+const originalObject = { a: 1, b: 2 };
+const shallowCopyObject = Object.assign({}, originalObject);
+console.log(shallowCopyObject); // { a: 1, b: 2 };
+```
+
+### 深拷贝
+
+#### 使用 `JSON.parse(JSON.stringify())`
+
+这种方法是一种创建对象或数组深拷贝的简单方法。但是，它也有局限性，例如无法处理函数、`undefined` 或循环引用。
+
+```js live
+const originalObject = { a: 1, b: { c: 2 } };
+const deepCopyObject = JSON.parse(JSON.stringify(originalObject));
+console.log(deepCopyObject); // { a: 1, b: { c: 2 } }
+```
+
+#### 使用 Lodash 的 `_.cloneDeep()`
+
+Lodash 是一个流行的实用程序库，它提供了一个 `_.cloneDeep()` 方法，用于深拷贝对象和数组。
+
+```js
+const _ = require('lodash');
+const originalObject = { a: 1, b: { c: 2 } };
+const deepCopyObject = _.cloneDeep(originalObject); // { a: 1, b: { c: 2 } }
+```
+
+### 其他方法
+
+#### 使用递归
+
+对于自定义深拷贝逻辑，您可以实现一个递归函数。
+
+```js live
+function deepCopy(obj) {
+  if (obj === null || typeof obj !== 'object') {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => deepCopy(item));
+  }
+
+  const copy = {};
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      copy[key] = deepCopy(obj[key]);
+    }
+  }
+  return copy;
+}
+
+const originalObject = { a: 1, b: { c: 2 } };
+const deepCopyObject = deepCopy(originalObject);
+console.log(deepCopyObject); // { a: 1, b: { c: 2 } }
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
+* [MDN Web Docs: Object.assign()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
+* [Lodash documentation: \_.cloneDeep](https://lodash.com/docs/4.17.15#cloneDeep)
+* [MDN Web Docs: JSON.parse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)
+* [MDN Web Docs: JSON.stringify()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)
diff --git a/questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/en-US.langnostic.json b/questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..3b98d5f
--- /dev/null
+++ b/questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "a05c5632"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "77bbf8c8",
+        "2a7816d0",
+        "56b6caef",
+        "da1990b",
+        "3765a30e",
+        "f6bb3f87",
+        "118a82b",
+        "41664e6e",
+        "5d1cfa00",
+        "b77c82f6",
+        "2ec369ec",
+        "8c7251c6",
+        "a0112883",
+        "27e0b7c",
+        "fd692c3a",
+        "1f4770e5",
+        "92d6280c"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "77bbf8c8",
+        "2a7816d0",
+        "56b6caef",
+        "da1990b",
+        "3765a30e",
+        "f6bb3f87",
+        "118a82b",
+        "41664e6e",
+        "5d1cfa00",
+        "b77c82f6",
+        "2ec369ec",
+        "8c7251c6",
+        "a0112883",
+        "27e0b7c",
+        "fd692c3a",
+        "1f4770e5",
+        "92d6280c"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/zh-CN.mdx b/questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/zh-CN.mdx
new file mode 100644
index 0000000..131bcaa
--- /dev/null
+++ b/questions/what-are-the-different-ways-to-make-an-api-call-in-javascript/zh-CN.mdx
@@ -0,0 +1,81 @@
+---
+title: JavaScript 中调用 API 的不同方法是什么？
+---
+
+## TL;DR
+
+在 JavaScript 中，您可以使用多种方法调用 API。最常见的方法是 `XMLHttpRequest`、`fetch` 和第三方库，如 `Axios`。`XMLHttpRequest` 是传统方法，但更冗长。`fetch` 是现代方法，返回 promise，使其更易于使用。`Axios` 是一个流行的第三方库，它简化了 API 调用并提供了附加功能。
+
+***
+
+## JavaScript 中调用 API 的不同方法
+
+### XMLHttpRequest
+
+`XMLHttpRequest` 是在 JavaScript 中调用 API 的传统方法。与现代方法相比，它更冗长，需要更多代码。
+
+```js live
+const xhr = new XMLHttpRequest();
+xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
+xhr.onreadystatechange = function () {
+  if (xhr.readyState === 4 && xhr.status === 200) {
+    console.log(JSON.parse(xhr.responseText));
+  }
+};
+xhr.send();
+```
+
+### Fetch API
+
+`fetch` 是一种现代且更方便的调用 API 的方法。它返回一个 promise，使处理异步操作更容易。
+
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+    return response.json();
+  })
+  .then((data) => console.log(data))
+  .catch((error) =>
+    console.error('There was a problem with the fetch operation:', error),
+  );
+```
+
+### Axios
+
+`Axios` 是一个流行的第三方库，它简化了 API 调用。它提供了额外的功能，如拦截器、自动 JSON 转换等。
+
+```js
+axios
+  .get('https://api.example.com/data')
+  .then((response) => console.log(response.data))
+  .catch((error) =>
+    console.error('There was a problem with the Axios request:', error),
+  );
+```
+
+### jQuery AJAX
+
+`jQuery` 还提供了一个 `ajax` 方法来调用 API。这种方法在现代开发中不太常见，但在一些遗留项目中仍然使用。
+
+```js
+$.ajax({
+  url: 'https://api.example.com/data',
+  method: 'GET',
+  success: function (data) {
+    console.log(data);
+  },
+  error: function (error) {
+    console.error('There was a problem with the jQuery AJAX request:', error);
+  },
+});
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)
+* [MDN Web Docs: Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+* [Axios GitHub Repository](https://github.com/axios/axios)
+* [jQuery AJAX Documentation](https://api.jquery.com/jquery.ajax/)
diff --git a/questions/what-are-the-metadata-fields-of-a-module/en-US.langnostic.json b/questions/what-are-the-metadata-fields-of-a-module/en-US.langnostic.json
new file mode 100644
index 0000000..9d7c649
--- /dev/null
+++ b/questions/what-are-the-metadata-fields-of-a-module/en-US.langnostic.json
@@ -0,0 +1,102 @@
+{
+  "frontmatter": {
+    "title": "9150f443"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "eae06dbd",
+        "bf98a805",
+        "2a7816d0",
+        "f2aaa36a",
+        "6fba9db2",
+        "41885298",
+        "eb8b3f1f",
+        "a39b56a6",
+        "b964b7a2",
+        "1d8132b1",
+        "b35a5ee2",
+        "1d3a7ba9",
+        "994caf2b",
+        "2757be5",
+        "91c7b9c",
+        "dd3a8fda",
+        "bb46c920",
+        "584c6c35",
+        "7fc3a535",
+        "297eeaa9",
+        "4e7e8b9d",
+        "e9c9a201",
+        "81aff852",
+        "da0bbdf9",
+        "721352e",
+        "caffbaf1",
+        "1a25257c",
+        "7c108e1d",
+        "975f7ded",
+        "6efb263b",
+        "8222ceab",
+        "4f35942e",
+        "92e4c278",
+        "bf410d7d",
+        "361556d3",
+        "3e5d0c86",
+        "fbf8b106",
+        "8c82c5a1",
+        "24172596",
+        "1b6fa4f7",
+        "1f4770e5",
+        "5bf1555e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "eae06dbd",
+        "bf98a805",
+        "2a7816d0",
+        "f2aaa36a",
+        "6fba9db2",
+        "41885298",
+        "eb8b3f1f",
+        "a39b56a6",
+        "b964b7a2",
+        "1d8132b1",
+        "b35a5ee2",
+        "1d3a7ba9",
+        "994caf2b",
+        "2757be5",
+        "91c7b9c",
+        "dd3a8fda",
+        "bb46c920",
+        "584c6c35",
+        "7fc3a535",
+        "297eeaa9",
+        "4e7e8b9d",
+        "e9c9a201",
+        "81aff852",
+        "da0bbdf9",
+        "721352e",
+        "caffbaf1",
+        "1a25257c",
+        "7c108e1d",
+        "975f7ded",
+        "6efb263b",
+        "8222ceab",
+        "4f35942e",
+        "92e4c278",
+        "bf410d7d",
+        "361556d3",
+        "3e5d0c86",
+        "fbf8b106",
+        "8c82c5a1",
+        "24172596",
+        "1b6fa4f7",
+        "1f4770e5",
+        "5bf1555e"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-metadata-fields-of-a-module/zh-CN.mdx b/questions/what-are-the-metadata-fields-of-a-module/zh-CN.mdx
new file mode 100644
index 0000000..3fbe0b7
--- /dev/null
+++ b/questions/what-are-the-metadata-fields-of-a-module/zh-CN.mdx
@@ -0,0 +1,162 @@
+---
+title: 模块的元数据字段是什么？
+---
+
+## TL;DR
+
+模块的元数据字段通常包括模块的名称、版本、描述、作者、许可证和依赖项等信息。这些字段通常在 JavaScript 项目的 `package.json` 文件中找到。例如：
+
+```json
+{
+  "name": "my-module",
+  "version": "1.0.0",
+  "description": "A sample module",
+  "author": "John Doe",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.17.1"
+  }
+}
+```
+
+***
+
+## 模块的元数据字段
+
+### 名称
+
+``name`` 字段指定模块的名称。它用于在包注册表中标识模块，以及将其作为依赖项安装时。
+
+```json
+{
+  "name": "my-module"
+}
+```
+
+### 版本
+
+``version`` 字段指示模块的当前版本。它遵循语义版本控制 (semver) 指导方针。
+
+```json
+{
+  "version": "1.0.0"
+}
+```
+
+### 描述
+
+``description`` 字段简要概述了模块的功能。这对于浏览包注册表的用户很有用。
+
+```json
+{
+  "description": "A sample module"
+}
+```
+
+### 作者
+
+``author`` 字段指定模块作者的姓名和联系信息。
+
+```json
+{
+  "author": "John Doe"
+}
+```
+
+### 许可证
+
+`license` 字段指示可以使用该模块的许可条款。 常见的许可证包括 MIT、Apache-2.0 和 GPL-3.0。
+
+```json
+{
+  "license": "MIT"
+}
+```
+
+### 依赖项
+
+`dependencies` 字段列出了当前模块正常工作所依赖的其他模块。 每个依赖项都使用其名称和版本范围指定。
+
+```json
+{
+  "dependencies": {
+    "express": "^4.17.1"
+  }
+}
+```
+
+### DevDependencies
+
+`devDependencies` 字段列出了仅用于开发和测试的模块，而不是用于生产环境。
+
+```json
+{
+  "devDependencies": {
+    "jest": "^26.6.3"
+  }
+}
+```
+
+### 脚本
+
+`scripts` 字段允许您定义可以使用 `npm run <script-name>` 运行的脚本命令。
+
+```json
+{
+  "scripts": {
+    "start": "node index.js",
+    "test": "jest"
+  }
+}
+```
+
+### 关键词
+
+`keywords` 字段是一个字符串数组，可帮助用户在包注册表中搜索时找到该模块。
+
+```json
+{
+  "keywords": ["sample", "module", "example"]
+}
+```
+
+### 存储库
+
+`repository` 字段提供有关模块源代码存储库的信息。
+
+```json
+{
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/username/my-module.git"
+  }
+}
+```
+
+### Bugs
+
+`bugs` 字段提供有关在哪里报告模块问题的相关信息。
+
+```json
+{
+  "bugs": {
+    "url": "https://github.com/username/my-module/issues"
+  }
+}
+```
+
+### 主页
+
+``homepage`` 字段指定模块主页的 URL。
+
+```json
+{
+  "homepage": "https://github.com/username/my-module#readme"
+}
+```
+
+## 延伸阅读
+
+* [npm package.json documentation](https://docs.npmjs.com/cli/v7/configuring-npm/package-json)
+* [Semantic Versioning](https://semver.org/)
+* [CommonJS Modules](https://nodejs.org/docs/latest/api/modules.html)
diff --git a/questions/what-are-the-potential-issues-caused-by-hoisting/en-US.langnostic.json b/questions/what-are-the-potential-issues-caused-by-hoisting/en-US.langnostic.json
new file mode 100644
index 0000000..8176f7e
--- /dev/null
+++ b/questions/what-are-the-potential-issues-caused-by-hoisting/en-US.langnostic.json
@@ -0,0 +1,54 @@
+{
+  "frontmatter": {
+    "title": "6eba2a9b"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "31974a8d",
+        "4a7ee626",
+        "2a7816d0",
+        "ea5986",
+        "a68d98f3",
+        "c0348e7d",
+        "76160559",
+        "99ce9069",
+        "73ce0b88",
+        "3fbbfd7",
+        "88f06e97",
+        "57c7cb7d",
+        "8b4c4ae9",
+        "9ade64f2",
+        "ff201ac3",
+        "3b467292",
+        "1f4770e5",
+        "4a6a1cdc"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "31974a8d",
+        "4a7ee626",
+        "2a7816d0",
+        "ea5986",
+        "a68d98f3",
+        "c0348e7d",
+        "76160559",
+        "99ce9069",
+        "73ce0b88",
+        "3fbbfd7",
+        "88f06e97",
+        "57c7cb7d",
+        "8b4c4ae9",
+        "9ade64f2",
+        "ff201ac3",
+        "3b467292",
+        "1f4770e5",
+        "4a6a1cdc"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-potential-issues-caused-by-hoisting/zh-CN.mdx b/questions/what-are-the-potential-issues-caused-by-hoisting/zh-CN.mdx
new file mode 100644
index 0000000..be43e48
--- /dev/null
+++ b/questions/what-are-the-potential-issues-caused-by-hoisting/zh-CN.mdx
@@ -0,0 +1,71 @@
+---
+title: Hoisting 带来的潜在问题是什么？
+---
+
+## TL;DR
+
+Hoisting 可能会导致 JavaScript 中出现意外行为，因为变量和函数声明在编译阶段被移至其包含范围的顶部。如果变量在其声明之前被使用，这可能导致变量值为 `undefined`，并且可能导致函数声明和表达式的混淆。例如：
+
+```js live
+console.log(a); // undefined
+var a = 5;
+
+console.log(b); // ReferenceError: Cannot access 'b' before initialization
+let b = 10;
+```
+
+***
+
+## Hoisting 带来的潜在问题
+
+### 变量为 `undefined`
+
+使用 `var` 时，变量会被提升到其作用域的顶部，但未被初始化。这意味着您可以在变量声明之前引用该变量，但在赋值执行之前，它将是 `undefined`。
+
+```js live
+console.log(a); // undefined
+var a = 5;
+```
+
+### `let` 和 `const` 的暂时性死区
+
+使用 `let` 和 `const` 声明的变量也会被提升，但它们没有被初始化。在声明之前访问它们会导致 `ReferenceError`，这是由于暂时性死区造成的。
+
+```js live
+console.log(b); // ReferenceError: Cannot access 'b' before initialization
+let b = 10;
+```
+
+### 函数声明 vs. 函数表达式
+
+函数声明被完全提升，这意味着您可以在函数声明之前调用该函数。但是，函数表达式不会以相同的方式被提升，如果在定义之前调用它们，则会导致潜在的 `TypeError`。
+
+```js live
+foo(); // Works fine
+function foo() {
+  console.log('Hello');
+}
+
+bar(); // TypeError: bar is not a function
+var bar = function () {
+  console.log('Hello');
+};
+```
+
+### `var` 的重新声明问题
+
+使用 `var` 可能会导致意外的重新声明，这可能会导致难以追踪的错误。
+
+```js live
+var x = 1;
+if (true) {
+  var x = 2; // Same variable as above
+}
+console.log(x); // 2
+```
+
+## 延伸阅读
+
+* [MDN Web Docs on Hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
+* [JavaScript.info on Hoisting](https://javascript.info/var)
+* [Understanding the Temporal Dead Zone](https://medium.com/@rajeshnaroth/understanding-temporal-dead-zone-in-javascript-let-and-const-5c3d2f8e0e68)
diff --git a/questions/what-are-the-potential-pitfalls-of-using-closures/en-US.langnostic.json b/questions/what-are-the-potential-pitfalls-of-using-closures/en-US.langnostic.json
new file mode 100644
index 0000000..2240054
--- /dev/null
+++ b/questions/what-are-the-potential-pitfalls-of-using-closures/en-US.langnostic.json
@@ -0,0 +1,56 @@
+{
+  "frontmatter": {
+    "title": "faddceb"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "1827d0a8",
+        "2a7816d0",
+        "45e5f525",
+        "ad0dfb4f",
+        "2b4a7ad2",
+        "eb6c5021",
+        "622ca716",
+        "b8dedcfd",
+        "43a37ead",
+        "cd5858c6",
+        "6dce026f",
+        "3fa1cf80",
+        "79dd11db",
+        "637ec0f5",
+        "8a9872d4",
+        "84ab4ec7",
+        "405a3f3b",
+        "1f4770e5",
+        "ae07300f"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "1827d0a8",
+        "2a7816d0",
+        "45e5f525",
+        "ad0dfb4f",
+        "2b4a7ad2",
+        "eb6c5021",
+        "622ca716",
+        "b8dedcfd",
+        "43a37ead",
+        "cd5858c6",
+        "6dce026f",
+        "3fa1cf80",
+        "79dd11db",
+        "637ec0f5",
+        "8a9872d4",
+        "84ab4ec7",
+        "405a3f3b",
+        "1f4770e5",
+        "ae07300f"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-potential-pitfalls-of-using-closures/zh-CN.mdx b/questions/what-are-the-potential-pitfalls-of-using-closures/zh-CN.mdx
new file mode 100644
index 0000000..47f071e
--- /dev/null
+++ b/questions/what-are-the-potential-pitfalls-of-using-closures/zh-CN.mdx
@@ -0,0 +1,119 @@
+---
+title: 使用闭包的潜在陷阱是什么？
+---
+
+## TL;DR
+
+如果管理不当，闭包可能导致内存泄漏，尤其是在捕获不再需要的变量时。由于作用域链的复杂性，它们也可能使调试更加困难。此外，如果过度使用或不当使用闭包，它们可能会导致性能问题，因为它们保留对其作用域中变量的引用，这可能会阻止垃圾回收。
+
+***
+
+## 使用闭包的潜在陷阱
+
+### 内存泄漏
+
+如果闭包捕获不再需要的变量，则可能导致内存泄漏。发生这种情况是因为闭包保留对其作用域中变量的引用，从而阻止垃圾回收器释放内存。
+
+```js live
+function createClosure() {
+  let largeArray = new Array(1000000).fill('some data');
+  return function () {
+    console.log(largeArray[0]);
+  };
+}
+
+let closure = createClosure();
+// The largeArray is still in memory because the closure keeps a reference to it
+closure(); // Output: 'some data'
+```
+
+### 调试复杂性
+
+由于作用域链的复杂性，闭包会使调试更加困难。当发生错误时，通过多层嵌套函数和作用域来追踪问题的根源可能具有挑战性。
+
+```js live
+function outerFunction() {
+  let outerVar = 'I am outside!';
+
+  function innerFunction() {
+    console.log(outerVar); // What if outerVar is not what you expect?
+  }
+
+  return innerFunction;
+}
+
+let myFunction = outerFunction();
+myFunction(); // Output: 'I am outside!'
+```
+
+### 性能问题
+
+过度使用或不当使用闭包可能导致性能问题。由于闭包保留对其作用域中变量的引用，它们可能会阻止垃圾回收，从而导致内存使用量增加和潜在的减速。
+
+```js live
+function createManyClosures() {
+  let counter = 0;
+
+  for (let i = 0; i < 1000000; i++) {
+    (function () {
+      counter++;
+    })();
+    // The closure is executed immediately, but it still holds onto the reference to the `counter` variable
+    // This prevents the counter from being garbage collected
+  }
+
+  console.log(counter); // This can be inefficient
+}
+
+createManyClosures();
+```
+
+### 意外的变量共享
+
+闭包可能导致意外的变量共享，尤其是在循环中。当所有闭包共享对变量的相同引用时，就会发生这种情况，从而导致意外行为。
+
+```js live
+function createFunctions() {
+  let functions = [];
+
+  for (var i = 0; i < 3; i++) {
+    functions.push(function () {
+      console.log(i); // All functions will log the same value of i
+    });
+  }
+
+  return functions;
+}
+
+let funcs = createFunctions();
+funcs[0](); // 3
+funcs[1](); // 3
+funcs[2](); // 3
+```
+
+为了避免这种情况，请使用 `let` 而不是 `var` 来为每次迭代创建一个新的绑定：
+
+```js live
+function createFunctions() {
+  let functions = [];
+
+  for (let i = 0; i < 3; i++) {
+    functions.push(function () {
+      console.log(i); // Each function will log its own value of i
+    });
+  }
+
+  return functions;
+}
+
+let funcs = createFunctions();
+funcs[0](); // 0
+funcs[1](); // 1
+funcs[2](); // 2
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)
+* [JavaScript.info: Closures](https://javascript.info/closure)
+* [Understanding JavaScript Closures with Ease](https://medium.com/dailyjs/i-never-understood-javascript-closures-9663703368e8)
diff --git a/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.langnostic.json b/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.langnostic.json
new file mode 100644
index 0000000..bf1b9f3
--- /dev/null
+++ b/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.langnostic.json
@@ -0,0 +1,60 @@
+{
+  "frontmatter": {
+    "title": "c412ba2d"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "7fa026bc",
+        "2a7816d0",
+        "512a28be",
+        "d764361a",
+        "d9b093d7",
+        "4ebb1ee2",
+        "b5b10340",
+        "63feabd",
+        "3592fac",
+        "8e710086",
+        "67266c1d",
+        "d9474d27",
+        "3aca751b",
+        "4aac36ab",
+        "5fe5bc4d",
+        "13797f10",
+        "9fbbe7b8",
+        "45da4e57",
+        "1f4ed4b1",
+        "1f4770e5",
+        "2f7d9128"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "7fa026bc",
+        "2a7816d0",
+        "512a28be",
+        "d764361a",
+        "d9b093d7",
+        "4ebb1ee2",
+        "b5b10340",
+        "63feabd",
+        "3592fac",
+        "8e710086",
+        "67266c1d",
+        "d9474d27",
+        "3aca751b",
+        "4aac36ab",
+        "5fe5bc4d",
+        "13797f10",
+        "9fbbe7b8",
+        "45da4e57",
+        "1f4ed4b1",
+        "1f4770e5",
+        "2f7d9128"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.mdx b/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.mdx
index 4af881e..9e0ef8b 100644
--- a/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.mdx
+++ b/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.mdx
@@ -1,20 +1,144 @@
 ---
-title: 使用Promise而不是回调的利弊是什么？
+title: 在 JavaScript 中使用 Promise 而不是回调有什么优缺点？
 ---
 
+## TL;DR
+
+Promise 提供了一种比回调更简洁的替代方案，有助于避免回调地狱，并使异步代码更具可读性。它们有助于轻松编写顺序和并行的异步操作。但是，使用 Promise 可能会引入稍微复杂的代码。
+
+***
+
 ## 优点
 
-- 避免可读性糟糕的回调地狱
-- 使得用`.then()`编写可读的顺序异步代码变得容易。
-- 使用 `Promise.all()` 编写并行异步代码是容易的。
-- 有了 Promise，这些只存在于回调编码中的情况就不会发生：
-  - 调用回调太早了
-  - 调用回调太晚(或从不调用)
-  - 调用回调太少或太多次了
-  - 无法传递任何必要的环境/参数
-  - 吞没可能发生的任何错误/异常
+### 避免难以阅读的回调地狱。
+
+回调地狱，也称为“厄运金字塔”，是指在代码中具有多个嵌套回调时发生的现象。这可能导致代码难以阅读、维护和调试。以下是回调地狱的示例：
+
+```js live
+function getFirstData(callback) {
+  setTimeout(() => {
+    callback({ id: 1, title: 'First Data' });
+  }, 1000);
+}
+
+function getSecondData(data, callback) {
+  setTimeout(() => {
+    callback({ id: data.id, title: data.title + ' Second Data' });
+  }, 1000);
+}
+
+function getThirdData(data, callback) {
+  setTimeout(() => {
+    callback({ id: data.id, title: data.title + ' Third Data' });
+  }, 1000);
+}
+
+// Callback hell
+getFirstData((data) => {
+  getSecondData(data, (data) => {
+    getThirdData(data, (result) => {
+      console.log(result); // Output: {id: 1, title: "First Data Second Data Third Data"}
+    });
+  });
+});
+```
+
+Promise 通过为代码提供更线性和可读的结构来解决回调地狱的问题。
+
+```js live
+// Example of sequential asynchronous code using setTimeout and Promises
+function getFirstData() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve({ id: 1, title: 'First Data' });
+    }, 1000);
+  });
+}
+
+function getSecondData(data) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve({ id: data.id, title: data.title + ' Second Data' });
+    }, 1000);
+  });
+}
+
+function getThirdData(data) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve({ id: data.id, title: data.title + ' Third Data' });
+    }, 1000);
+  });
+}
+
+getFirstData()
+  .then(getSecondData)
+  .then(getThirdData)
+  .then((data) => {
+    console.log(data); // Output: {id: 1, title: "First Data Second Data Third Data"}
+  })
+  .catch((error) => console.error('Error:', error));
+```
+
+### 使用 `.then()` 轻松编写可读的顺序异步代码。
+
+在上面的代码示例中，我们使用 `.then()` 方法将这些 Promise 链接在一起，从而允许代码按顺序执行。它提供了一种更简洁、更易于管理的方式来处理 JavaScript 中的异步操作。
+
+### 使用 `Promise.all()` 轻松编写并行异步代码。
+
+`Promise.all()` 和回调都可以用于编写并行异步代码。但是，`Promise.all()` 提供了一种更简洁、更易读的方式来处理多个 Promise，尤其是在处理复杂的异步工作流程时。
+
+```js live
+function getData1() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve({ id: 1, title: 'Data 1' });
+    }, 1000);
+  });
+}
+
+function getData2() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve({ id: 2, title: 'Data 2' });
+    }, 1000);
+  });
+}
+
+function getData3() {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve({ id: 3, title: 'Data 3' });
+    }, 1000);
+  });
+}
+
+Promise.all([getData1(), getData2(), getData3()])
+  .then((results) => {
+    console.log(results); // Output: [[{ id: 1, title: 'Data 1' }, { id: 2, title: 'Data 2' }, { id: 3, title: 'Data 3' }]
+  })
+  .catch((error) => {
+    console.error('Error:', error);
+  });
+```
+
+### 使用 Promise，以下情况不会发生，这些情况存在于仅使用回调的编码中：
+
+* 过早调用回调
+* 过晚调用回调（或从不调用）
+* 调用回调的次数太少或太多
+* 未能传递任何必要的环境/参数
+* 吞噬可能发生的任何错误/异常
 
 ## 缺点
 
-- 略微更复杂的代码(可辩论)。
-- 在不支持 ES2015 的较旧浏览器中，您需要加载 polyfill 才能使用。
+* 稍微复杂的代码（有争议）。
+
+## 实践
+
+* Try implementing your own [`Promise.resolve()` method](/questions/javascript/promise-resolve), [`Promise.reject()` method](/questions/javascript/promise-reject) and [`Promise.all()` method](/questions/javascript/promise-all) on GreatFrontEnd.
+
+## Further reading
+
+* [Promise | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+* [Callback function | MDN](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
diff --git a/questions/what-are-the-various-data-types-in-javascript/en-US.langnostic.json b/questions/what-are-the-various-data-types-in-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..d08186f
--- /dev/null
+++ b/questions/what-are-the-various-data-types-in-javascript/en-US.langnostic.json
@@ -0,0 +1,116 @@
+{
+  "frontmatter": {
+    "title": "69a1004f"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "758ace7d",
+        "e70495e3",
+        "a5f03467",
+        "bbf412df",
+        "a5f5e547",
+        "e140c3e8",
+        "2a7816d0",
+        "268965e8",
+        "b33d0fda",
+        "ba032629",
+        "854f9f64",
+        "d3241996",
+        "3d2bc114",
+        "453c017",
+        "97319ec5",
+        "529949c",
+        "f5c01970",
+        "9f5075b0",
+        "2709db0e",
+        "74ffd317",
+        "8dfabe67",
+        "625c6417",
+        "98671648",
+        "5cef628e",
+        "b441fc9f",
+        "1921026e",
+        "566d4ffd",
+        "b2223d82",
+        "934a38b7",
+        "f9521072",
+        "f1fb5869",
+        "ffcb336a",
+        "2fa0f8bf",
+        "31ce0ec7",
+        "582b9f16",
+        "730b1163",
+        "b8f5c3a7",
+        "6f74530b",
+        "77e5de80",
+        "4eae99ec",
+        "3fa6dad",
+        "473422af",
+        "68b07c90",
+        "54bcf9ba",
+        "105b8b35",
+        "85009c0b",
+        "15145dc2",
+        "1f4770e5",
+        "9ddd0981"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "758ace7d",
+        "e70495e3",
+        "a5f03467",
+        "bbf412df",
+        "a5f5e547",
+        "e140c3e8",
+        "2a7816d0",
+        "268965e8",
+        "b33d0fda",
+        "ba032629",
+        "854f9f64",
+        "d3241996",
+        "3d2bc114",
+        "453c017",
+        "97319ec5",
+        "529949c",
+        "f5c01970",
+        "9f5075b0",
+        "2709db0e",
+        "74ffd317",
+        "8dfabe67",
+        "625c6417",
+        "98671648",
+        "5cef628e",
+        "b441fc9f",
+        "1921026e",
+        "566d4ffd",
+        "b2223d82",
+        "934a38b7",
+        "f9521072",
+        "f1fb5869",
+        "ffcb336a",
+        "2fa0f8bf",
+        "31ce0ec7",
+        "582b9f16",
+        "730b1163",
+        "b8f5c3a7",
+        "6f74530b",
+        "77e5de80",
+        "4eae99ec",
+        "3fa6dad",
+        "473422af",
+        "68b07c90",
+        "54bcf9ba",
+        "105b8b35",
+        "85009c0b",
+        "15145dc2",
+        "1f4770e5",
+        "9ddd0981"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-various-data-types-in-javascript/zh-CN.mdx b/questions/what-are-the-various-data-types-in-javascript/zh-CN.mdx
new file mode 100644
index 0000000..26da411
--- /dev/null
+++ b/questions/what-are-the-various-data-types-in-javascript/zh-CN.mdx
@@ -0,0 +1,204 @@
+---
+title: JavaScript 中的各种数据类型是什么？
+---
+
+## TL;DR
+
+在 JavaScript 中，数据类型可以分为 `原始` 和 `非原始` 类型：
+
+**原始数据类型**
+
+* **Number**：表示整数和浮点数。
+* **String**：表示字符序列。
+* **Boolean**：表示 `true` 或 `false` 值。
+* **Undefined**：已声明但未赋值的变量。
+* **Null**：表示有意缺失任何对象值。
+* **Symbol**：用作对象属性键的唯一且不可变的值。在我们的 [关于 `Symbol` 的深入探讨](/questions/quiz/what-are-symbols-used-for) 中阅读更多内容
+* **BigInt**：表示任意精度的整数。
+
+**非原始（引用）数据类型**
+
+* **Object**：用于存储数据集合。
+* **Array**：数据的有序集合。
+* **Function**：可调用对象。
+* **Date**：表示日期和时间。
+* **RegExp**：表示正则表达式。
+* **Map**：键控数据项的集合。
+* **Set**：唯一值的集合。
+
+原始类型存储单个值，而非原始类型可以存储数据集合或复杂实体。
+
+***
+
+## JavaScript 中的数据类型
+
+与许多编程语言一样，JavaScript 具有多种数据类型来表示不同种类的数据。 JavaScript 中的主要数据类型可以分为两类：原始类型和非原始（引用）类型。
+
+### 原始数据类型
+
+1. **Number**：表示整数和浮点数。 JavaScript 只有一种数字类型。
+
+```js live
+let age = 25;
+let price = 99.99;
+console.log(price); // 99.99
+```
+
+2. **String**：表示字符序列。 `Strings` 可以用单引号、双引号或反引号（用于模板字面量）括起来。
+
+```js live
+let myName = 'John Doe';
+let greeting = 'Hello, world!';
+let message = `Welcome, ${myName}!`;
+console.log(message); // "Welcome, John Doe!"
+```
+
+3. **Boolean**：表示逻辑实体，可以有两个值：`true` 或 `false`。
+
+```js live
+let isActive = true;
+let isOver18 = false;
+console.log(isOver18); // false
+```
+
+4. **Undefined**：已声明但未赋值的变量的类型为 `undefined`。
+
+```js live
+let user;
+console.log(user); // undefined
+```
+
+5. **Null**: 表示任何对象值有意缺失。它是一个原始值，被视为假值。
+
+```js live
+let user = null;
+console.log(user); // null
+if (!user) {
+  console.log('user is a falsy value');
+}
+```
+
+6. **Symbol**: 一种独特且不可变的`原始`值，通常用作对象属性的键。
+
+```js
+let sym1 = Symbol();
+let sym2 = Symbol('description');
+console.log(sym1); // Symbol()
+console.log(sym2); // Symbol(description)
+```
+
+7. **BigInt**：用于表示任意精度的整数，对于处理非常大的数字很有用。
+
+```js
+let bigNumber = BigInt(9007199254740991);
+let anotherBigNumber = 1234567890123456789012345678901234567890n;
+console.log(bigNumber); // 9007199254740991n
+console.log(anotherBigNumber); // 1234567890123456789012345678901234567890n
+```
+
+### 非原始（引用）数据类型
+
+1. **Object**: 用于存储数据集合和更复杂的实体。`Objects` 使用大括号 `{}` 创建。
+
+```js live
+let person = {
+  name: 'Alice',
+  age: 30,
+};
+console.log(person); // {name: "Alice", age: 30}
+```
+
+2. **Array**: 一种特殊类型的对象，用于存储有序的数据集合。`Arrays` 使用方括号 `[]` 创建。
+
+```js live
+let numbers = [1, 2, 3, 4, 5];
+console.log(numbers);
+```
+
+3. **Function**: JavaScript 中的`函数`是`对象`。它们可以使用函数声明或表达式来定义。
+
+```js live
+function greet() {
+  console.log('Hello!');
+}
+
+let add = function (a, b) {
+  return a + b;
+};
+
+greet(); // "Hello!"
+console.log(add(2, 3)); // 5
+```
+
+4. **Date**: 表示日期和时间。`Date` 对象用于处理日期。
+
+```js live
+let today = new Date().toLocaleTimeString();
+console.log(today);
+```
+
+5. **RegExp**: 表示正则表达式，正则表达式是用于匹配字符串中字符组合的模式。
+
+```js live
+let pattern = /abc/;
+let str = '123abc456';
+
+console.log(pattern.test(str)); // true
+```
+
+6. **Map**: 键控数据项的集合，类似于`对象`，但允许任何类型的键。
+
+```js live
+let map = new Map();
+map.set('key1', 'value1');
+console.log(map);
+```
+
+7. **Set**: 唯一值的集合。
+
+```js
+let set = new Set();
+set.add(1);
+set.add(2);
+console.log(set); // { 1, 2 }
+```
+
+## 确定数据类型
+
+JavaScript 是一种动态类型语言，这意味着变量可以随时间推移保存不同数据类型的值。`typeof` 运算符可用于确定值或变量的数据类型。
+
+```js live
+console.log(typeof 42); // "number"
+console.log(typeof 'hello'); // "string"
+console.log(typeof true); // "boolean"
+console.log(typeof undefined); // "undefined"
+console.log(typeof null); // "object" (this is a historical bug in JavaScript)
+console.log(typeof Symbol()); // "symbol"
+console.log(typeof BigInt(123)); // "bigint"
+console.log(typeof {}); // "object"
+console.log(typeof []); // "object"
+console.log(typeof function () {}); // "function"
+```
+
+## 陷阱
+
+### 类型强制转换
+
+JavaScript 经常执行类型强制转换，将值从一种类型转换为另一种类型，这可能导致意外结果。
+
+```js live
+let result = '5' + 2;
+console.log(result, typeof result); // "52 string" (string concatenation)
+
+let difference = '5' - 2;
+console.log(difference, typeof difference); // 3 "number" (numeric subtraction)
+```
+
+在第一个例子中，由于字符串可以使用 `+` 运算符进行连接，因此该数字被转换为字符串，并且两个字符串连接在一起。在第二个例子中，字符串不能与减号运算符 (`-`) 一起使用，但两个数字可以相减，因此字符串首先被转换为数字，结果是差值。
+
+## 延伸阅读
+
+* [JavaScript data types and data structures - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)
+* [JavaScript guide: Data types](https://www.linkedin.com/pulse/javascript-guide-data-types-mila-mirovi%C4%87-jykmf)
+* [Data types - javascript.info](https://javascript.info/types)
+* [JavaScript data types](https://www.programiz.com/javascript/data-types)
diff --git a/questions/what-are-the-various-ways-to-create-objects-in-javascript/en-US.langnostic.json b/questions/what-are-the-various-ways-to-create-objects-in-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..c622d63
--- /dev/null
+++ b/questions/what-are-the-various-ways-to-create-objects-in-javascript/en-US.langnostic.json
@@ -0,0 +1,66 @@
+{
+  "frontmatter": {
+    "title": "e13fca9e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "62eb59fc",
+        "4ff6031a",
+        "2a7816d0",
+        "55903540",
+        "3a12ed18",
+        "ed382f86",
+        "8feb25c0",
+        "bcdac678",
+        "79c96400",
+        "ebfb3652",
+        "bd974763",
+        "481034e6",
+        "23c56234",
+        "d3f604f5",
+        "af717038",
+        "c04d7101",
+        "ab8ab5a0",
+        "7cba1dea",
+        "c17d1a8d",
+        "ecb9dad1",
+        "629f355f",
+        "ea24d7eb",
+        "1f4770e5",
+        "e18343d2"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "62eb59fc",
+        "4ff6031a",
+        "2a7816d0",
+        "55903540",
+        "3a12ed18",
+        "ed382f86",
+        "8feb25c0",
+        "bcdac678",
+        "79c96400",
+        "ebfb3652",
+        "bd974763",
+        "481034e6",
+        "23c56234",
+        "d3f604f5",
+        "af717038",
+        "c04d7101",
+        "ab8ab5a0",
+        "7cba1dea",
+        "c17d1a8d",
+        "ecb9dad1",
+        "629f355f",
+        "ea24d7eb",
+        "1f4770e5",
+        "e18343d2"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-the-various-ways-to-create-objects-in-javascript/zh-CN.mdx b/questions/what-are-the-various-ways-to-create-objects-in-javascript/zh-CN.mdx
new file mode 100644
index 0000000..c6781e3
--- /dev/null
+++ b/questions/what-are-the-various-ways-to-create-objects-in-javascript/zh-CN.mdx
@@ -0,0 +1,124 @@
+---
+title: JavaScript 中创建对象的各种方法是什么？
+---
+
+## TL;DR
+
+在 JavaScript 中创建对象提供了几种方法：
+
+* **对象字面量 (`{}`)**：最简单、最流行的方法。在花括号内定义键值对。
+* **`Object()` 构造函数**：使用 `new Object()` 和点表示法添加属性。
+* **`Object.create()`**：使用现有对象作为原型创建新对象，继承属性和方法。
+* **构造函数**：使用函数定义对象的蓝图，使用 `new` 创建实例。
+* **ES2015 类**：类似于其他语言的结构化语法，使用 `class` 和 `constructor` 关键字。
+
+***
+
+## JavaScript 中的对象
+
+在 JavaScript 中创建对象涉及几种方法。以下是在 JavaScript 中创建对象的各种方法：
+
+## 对象字面量 (`{}`)
+
+这是在 JavaScript 中创建对象的最简单、最流行的方法。它涉及在花括号 (`{}`) 中定义键值对的集合。当您需要创建一个具有固定属性集的单个对象时，可以使用它。
+
+```js live
+const person = {
+  firstName: 'John',
+  lastName: 'Doe',
+  age: 50,
+  eyeColor: 'blue',
+};
+
+console.log(person); // {firstName: "John", lastName: "Doe", age: 50, eyeColor: "blue"}
+```
+
+## `Object()` 构造函数
+
+此方法涉及将 `new` 关键字与内置的 `Object` 构造函数一起使用以创建对象。然后，您可以使用点表示法将属性添加到对象。当您需要从原始值创建对象或创建空对象时，可以使用它。
+
+```js live
+const person = new Object();
+person.firstName = 'John';
+person.lastName = 'Doe';
+
+console.log(person); // {firstName: "John", lastName: "Doe"}
+```
+
+## `Object.create()` 方法
+
+此方法允许您使用现有对象作为原型来创建新对象。新对象从原型对象继承属性和方法。当您需要创建一个具有特定原型的新对象时，可以使用它。
+
+```js live
+// Object.create() 方法
+const personPrototype = {
+  greet() {
+    console.log(
+      `Hello, my name is ${this.name} and I'm ${this.age} years old.`,
+    );
+  },
+};
+
+const person = Object.create(personPrototype);
+person.name = 'John';
+person.age = 30;
+
+person.greet(); // Output: Hello, my name is John and I'm 30 years old.
+```
+
+可以通过执行 `Object.create(null)` 来创建没有原型的对象。
+
+## ES2015 类
+
+类为创建对象提供了更结构化和熟悉的语法（类似于其他编程语言）。它们定义了一个蓝图，并使用方法与对象的属性进行交互。当您需要创建具有继承和封装的复杂对象时，可以使用它。
+
+```js live
+class Person {
+  constructor(name, age) {
+    this.name = name;
+    this.age = age;
+  }
+  greet = function () {
+    console.log(
+      `Hello, my name is ${this.name} and I'm ${this.age} years old.`,
+    );
+  };
+}
+
+const person1 = new Person('John', 30);
+const person2 = new Person('Alice', 25);
+
+person1.greet(); // Output: Hello, my name is John and I'm 30 years old.
+person2.greet(); // Output: Hello, my name is Alice and I'm 25 years old.
+```
+
+## 构造函数
+
+构造函数用于创建可重用的对象蓝图。它们定义了该类型的所有对象共享的属性和行为。您使用 `new` 关键字创建对象的实例。当您需要创建具有相似属性和方法的多个对象时，可以使用它。
+
+然而，现在 ES2015 类在现代浏览器中得到了广泛支持，因此使用构造函数创建对象的原因已经不多了。
+
+```js live
+// Constructor function
+function Person(name, age) {
+  this.name = name;
+  this.age = age;
+  this.greet = function () {
+    console.log(
+      `Hello, my name is ${this.name} and I'm ${this.age} years old.`,
+    );
+  };
+}
+
+const person1 = new Person('John', 30);
+const person2 = new Person('Alice', 25);
+
+person1.greet(); // Output: Hello, my name is John and I'm 30 years old.
+person2.greet(); // Output: Hello, my name is Alice and I'm 25 years old.
+```
+
+## 延伸阅读
+
+* [`Object()` constructor | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/Object)
+* [`new` keyword | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new)
+* [`Object.create()` | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create)
diff --git a/questions/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/en-US.langnostic.json b/questions/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/en-US.langnostic.json
new file mode 100644
index 0000000..b077cc2
--- /dev/null
+++ b/questions/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/en-US.langnostic.json
@@ -0,0 +1,70 @@
+{
+  "frontmatter": {
+    "title": "f22f848f"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "3ba8c62",
+        "f46a95bc",
+        "2a7816d0",
+        "edd9aed9",
+        "45d45274",
+        "bfd3ca9f",
+        "46be4a72",
+        "f7d34aad",
+        "6d62c52d",
+        "d6a5d89f",
+        "451b240f",
+        "45cdadb6",
+        "194a29a3",
+        "a8313ca5",
+        "bba81cf0",
+        "76e3fbd3",
+        "a044ef31",
+        "e900c113",
+        "fabae248",
+        "75a10f2a",
+        "54b6c21c",
+        "c673dc3d",
+        "63c3193d",
+        "ef947b5",
+        "1f4770e5",
+        "d5e8780e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "3ba8c62",
+        "f46a95bc",
+        "2a7816d0",
+        "edd9aed9",
+        "45d45274",
+        "bfd3ca9f",
+        "46be4a72",
+        "f7d34aad",
+        "6d62c52d",
+        "d6a5d89f",
+        "451b240f",
+        "45cdadb6",
+        "194a29a3",
+        "a8313ca5",
+        "bba81cf0",
+        "76e3fbd3",
+        "a044ef31",
+        "e900c113",
+        "fabae248",
+        "75a10f2a",
+        "54b6c21c",
+        "c673dc3d",
+        "63c3193d",
+        "ef947b5",
+        "1f4770e5",
+        "d5e8780e"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/zh-CN.mdx b/questions/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/zh-CN.mdx
new file mode 100644
index 0000000..8eeeffb
--- /dev/null
+++ b/questions/what-are-web-workers-and-how-can-they-be-used-to-improve-performance/zh-CN.mdx
@@ -0,0 +1,117 @@
+---
+title: 什么是 Web Worker 以及如何使用它们来提高性能？
+---
+
+## TL;DR
+
+Web Worker 是一种在后台运行 JavaScript 的方法，与 Web 应用程序的主执行线程分开。这有助于执行繁重的计算，而不会阻塞用户界面。您可以使用 `Worker` 构造函数创建 Web Worker，并使用 `postMessage` 和 `onmessage` 方法与其通信。
+
+```js
+// main.js
+const worker = new Worker('worker.js');
+worker.postMessage('Hello, worker!');
+
+worker.onmessage = function (event) {
+  console.log('Message from worker:', event.data);
+};
+
+// worker.js
+onmessage = function (event) {
+  console.log('Message from main script:', event.data);
+  postMessage('Hello, main script!');
+};
+```
+
+***
+
+## 什么是 Web Worker 以及如何使用它们来提高性能？
+
+### Web Worker 简介
+
+Web Worker 提供了一种在后台运行 JavaScript 的方法，与主执行线程分开。这允许执行繁重的任务，如繁重的计算或 I/O 操作，而不会阻塞用户界面，从而带来更流畅的用户体验。
+
+### 创建 Web Worker
+
+要创建 Web Worker，您可以使用 `Worker` 构造函数并传递包含 worker 代码的 JavaScript 文件的 URL。
+
+```js
+const worker = new Worker('worker.js');
+```
+
+### 主脚本和 Web Worker 之间的通信
+
+主脚本和 Web Worker 之间的通信使用 `postMessage` 方法和 `onmessage` 事件处理程序完成。
+
+#### 主脚本
+
+```js
+// main.js
+const worker = new Worker('worker.js');
+
+// Send a message to the worker
+worker.postMessage('Hello, worker!');
+
+// Receive messages from the worker
+worker.onmessage = function (event) {
+  console.log('Message from worker:', event.data);
+};
+```
+
+#### Worker 脚本
+
+```js
+// worker.js
+onmessage = function (event) {
+  console.log('Message from main script:', event.data);
+  // Send a message back to the main script
+  postMessage('Hello, main script!');
+};
+```
+
+### Web Worker 的用例
+
+#### 繁重的计算
+
+Web Worker 可用于执行繁重的计算，而不会阻塞主线程。例如，计算大型数据集或执行复杂的数学运算。
+
+```js
+// worker.js
+onmessage = function (event) {
+  const result = heavyComputation(event.data);
+  postMessage(result);
+};
+
+function heavyComputation(data) {
+  // Perform heavy computation here
+  return data * 2; // Example computation
+}
+```
+
+#### 数据处理
+
+Web Workers 可用于处理大量数据，例如解析大型 JSON 文件或处理图像。
+
+```js
+// worker.js
+onmessage = function (event) {
+  const processedData = processData(event.data);
+  postMessage(processedData);
+};
+
+function processData(data) {
+  // Process data here
+  return data.map((item) => item * 2); // Example processing
+}
+```
+
+### Web Workers 的局限性
+
+* Web Workers 无法访问 DOM，因此它们无法直接操作用户界面。
+* 它们与主脚本具有单独的作用域，因此您需要使用 `postMessage` 来回传递数据。
+* 创建和管理 Web Workers 可能会增加代码库的复杂性。
+
+## 延伸阅读
+
+* [MDN Web 文档：使用 Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
+* [HTML5 Rocks：Web Workers](https://www.html5rocks.com/en/tutorials/workers/basics/)
+* [MDN Web 文档：Worker](https://developer.mozilla.org/en-US/docs/Web/API/Worker)
diff --git a/questions/what-are-workers-in-javascript-used-for/en-US.langnostic.json b/questions/what-are-workers-in-javascript-used-for/en-US.langnostic.json
new file mode 100644
index 0000000..0729214
--- /dev/null
+++ b/questions/what-are-workers-in-javascript-used-for/en-US.langnostic.json
@@ -0,0 +1,100 @@
+{
+  "frontmatter": {
+    "title": "82174ead"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "81b305fd",
+        "492d66f6",
+        "8bc8629e",
+        "dc65c225",
+        "2a7816d0",
+        "dcdc9685",
+        "63cd0c43",
+        "f585af79",
+        "31a7fb80",
+        "7605e333",
+        "a38e1c24",
+        "fe3ffc59",
+        "91fab7f4",
+        "48ab8881",
+        "17797f57",
+        "5acd4d9",
+        "1f38fab",
+        "670df17e",
+        "10549b9d",
+        "c30c06aa",
+        "eef673d7",
+        "deb3c04d",
+        "ca31f74f",
+        "60eec3fb",
+        "48ab8881",
+        "42977d71",
+        "9bc4900",
+        "775f7c43",
+        "670df17e",
+        "142af101",
+        "988fcf0f",
+        "5145f0e3",
+        "60890b68",
+        "3735cf9d",
+        "82c22e11",
+        "97d2c0ae",
+        "c216a3c0",
+        "942ead1e",
+        "5d37b19f",
+        "1f4770e5",
+        "ab664eb9"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "81b305fd",
+        "492d66f6",
+        "8bc8629e",
+        "dc65c225",
+        "2a7816d0",
+        "dcdc9685",
+        "63cd0c43",
+        "f585af79",
+        "31a7fb80",
+        "7605e333",
+        "a38e1c24",
+        "fe3ffc59",
+        "91fab7f4",
+        "48ab8881",
+        "17797f57",
+        "5acd4d9",
+        "1f38fab",
+        "670df17e",
+        "10549b9d",
+        "c30c06aa",
+        "eef673d7",
+        "deb3c04d",
+        "ca31f74f",
+        "60eec3fb",
+        "48ab8881",
+        "42977d71",
+        "9bc4900",
+        "775f7c43",
+        "670df17e",
+        "142af101",
+        "988fcf0f",
+        "5145f0e3",
+        "60890b68",
+        "3735cf9d",
+        "82c22e11",
+        "97d2c0ae",
+        "c216a3c0",
+        "942ead1e",
+        "5d37b19f",
+        "1f4770e5",
+        "ab664eb9"
+      ]
+    }
+  }
+}
diff --git a/questions/what-are-workers-in-javascript-used-for/zh-CN.mdx b/questions/what-are-workers-in-javascript-used-for/zh-CN.mdx
new file mode 100644
index 0000000..ce5edd4
--- /dev/null
+++ b/questions/what-are-workers-in-javascript-used-for/zh-CN.mdx
@@ -0,0 +1,185 @@
+---
+title: JavaScript 中的 Worker 有什么作用？
+---
+
+## TL;DR
+
+JavaScript 中的 Worker 是后台线程，允许您与主执行线程并行运行脚本，而不会阻塞或干扰用户界面。 它们的主要特点包括：
+
+* **并行处理**：Worker 在与主线程不同的线程中运行，允许您的网页在 worker 执行其任务时保持对用户交互的响应。 这对于将 CPU 密集型工作从主线程中移出并摆脱 JavaScript 单线程的特性非常有用。
+* **通信**：使用 `postMessage()` 和 `onmessage`/ `'message'` 事件进行消息传递。
+* **访问 Web API**：Worker 可以访问各种 Web API，包括 `fetch()`、IndexedDB 和 Web Storage，允许它们独立执行数据获取和持久化数据等任务。
+* **无法访问 DOM**：Worker 无法直接操作 DOM，因此无法与 UI 交互，确保它们不会意外干扰主线程的操作。
+
+JavaScript 中有三种主要的 worker 类型：
+
+* **Web worker / 专用 worker**
+  * 在后台线程中运行脚本，与主 UI 线程分开。
+  * 适用于 CPU 密集型任务，如数据处理、计算等。
+  * 无法直接访问或操作 DOM。
+* **Service worker**
+  * 充当网络代理，处理应用程序和网络之间的请求。
+  * 启用离线功能、缓存和推送通知。
+  * 独立于网页运行，即使网页已关闭。
+* **共享 worker**
+  * 只要它们在同一域中，就可以由在不同窗口或框架中运行的多个脚本共享。
+  * 脚本通过发送和接收消息与共享 worker 通信。
+  * 适用于协调网页不同部分的任务。
+
+***
+
+## JavaScript 中的 Worker
+
+JavaScript 中的 Worker 是一种在后台线程中运行脚本的方式，与网页的主执行线程分开。 这允许将长时间运行或计算密集型任务从主线程中卸载，防止用户界面变得无响应或卡顿。
+
+## Web worker / 专用 worker
+
+* 在与主 UI 线程分开的后台线程中运行脚本。
+* 专为 CPU 密集型任务而设计，如数据处理、数学计算等。 通常是非异步工作。
+* 出于安全原因，无法直接访问 DOM 或其他主线程资源。
+* 通过异步消息传递进行与主线程的通信 – `postMessage()` 和 `onmessage`/ `'message'`。
+* 当主脚本被卸载或显式终止时终止。
+
+Web worker 可用于：
+
+* 图像/视频处理
+* 数据压缩
+* 复杂数学
+
+### 创建一个 web worker
+
+要创建一个 web worker，您需要一个单独的 JavaScript 文件，其中包含 worker 的代码。 这是一个例子：
+
+**`main.js` (主脚本)**
+
+```js
+// 检查浏览器是否支持 worker
+if (window.Worker) {
+  // 创建一个新的 Worker
+  const myWorker = new Worker('worker.js');
+
+  // 向 worker 发送消息
+  myWorker.postMessage('Hello, Worker!');
+
+  // 监听来自 worker 的消息
+  myWorker.onmessage = function (event) {
+    console.log('来自 Worker 的消息：', event.data);
+  };
+
+  // 错误处理
+  myWorker.onerror = function (error) {
+    console.error('来自 Worker 的错误：', error);
+  };
+}
+```
+
+**`worker.js` (worker 脚本)**
+
+```js
+// 监听来自主脚本的消息
+onmessage = function (event) {
+  console.log('来自主脚本的消息：', event.data);
+
+  // 执行一个任务（例如，一些计算）
+  const result = event.data + ' - 由 Worker 处理';
+
+  // 将结果发回给主脚本
+  postMessage(result);
+};
+```
+
+在这个例子中：
+
+* `main.js` 使用 `Worker` 构造函数创建一个 worker，并指定 `worker.js` 作为在 worker 线程中运行的脚本。
+* 它使用 `postMessage()` 向 worker 发送消息。
+* worker 脚本 (`worker.js`) 使用 `onmessage` 监听来自主脚本的消息。
+* 处理完消息后，worker 使用 `postMessage()` 将消息发回给主脚本。
+* 主脚本在 `Worker` 实例上使用 `onmessage` 监听来自 worker 的消息。
+
+### Service workers
+
+* 充当 Web 应用程序、浏览器和网络之间的网络代理。
+* 可以拦截和处理网络请求，缓存资源。
+* 启用离线功能和推送通知。
+* 具有由浏览器管理的生命周期（安装、激活、更新）。
+* 出于安全考虑，无法访问 DOM 和主线程资源。
+
+Service workers 可以用于：
+
+* 缓存
+* 离线支持
+* 请求处理
+* 后台同步
+
+#### 创建 service worker
+
+**`main.js` (主脚本)**
+
+```js
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker
+    .register('/service-worker.js')
+    .then(function (registration) {
+      console.log('Service Worker registered:', registration);
+    })
+    .catch(function (err) {
+      console.log('Service Worker registration failed:', err);
+    });
+}
+```
+
+**`service-worker.js` (service worker 脚本)**
+
+```js
+self.addEventListener('fetch', function (event) {
+  event.respondWith(
+    caches.match(event.request).then(function (response) {
+      // return cached response if available
+      if (response) {
+        return response;
+      }
+
+      // Otherwise, fetch from network
+      return fetch(event.request);
+    }),
+  );
+});
+```
+
+在这个例子中：
+
+* 主脚本在 `/service-worker.js` 注册一个 service worker
+* service worker 监听 `fetch()` 事件，该事件在浏览器发出网络请求时触发
+* service worker 首先使用 `caches.match(event.request)` 检查请求的资源是否已缓存
+* 如果已缓存，则返回缓存的响应。 否则，它使用 `fetch(event.request)` 从网络获取资源
+
+### 奖励：共享 worker
+
+* **范围**：可以从不同窗口/标签页/iframe 中的多个脚本访问
+* **数据共享**：允许通过消息传递接口在浏览器上下文之间共享数据
+* **浏览器支持**：支持有限，尤其[在 Android 浏览器上不可用](https://issues.chromium.org/issues/40290702)
+
+#### 共享 worker 的用例：
+
+* 跨多个窗口共享状态。
+
+### 奖励：Worklets
+
+`Worklet` 接口是 Web Workers 的轻量级版本，它使开发人员可以访问渲染管道的低级部分。 使用 Worklets，您可以运行 JavaScript 和 WebAssembly 代码来执行图形渲染或音频处理，其中需要高性能。
+
+您不需要了解 worklets，因此不会详细介绍。 在 [MDN 上阅读有关 worklets 的更多信息](https://developer.mozilla.org/en-US/docs/Web/API/Worklet)。
+
+## 考虑事项和限制
+
+* **同源策略**：Workers 必须遵守同源策略，这意味着创建 worker 的脚本和 worker 脚本本身必须来自同一源
+* **无 DOM 访问**：Workers 无法直接访问 DOM。 它们可以通过消息与主线程通信
+* **性能**：创建和管理 workers 会产生开销。 它们应该谨慎用于真正受益于并行执行的任务
+* **错误处理**：应建立适当的错误处理机制来处理 worker 脚本中的任何问题
+
+## 延伸阅读
+
+* [Worker - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Worker)
+* [Using Web Workers - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)
+* [Service Worker API - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
+* [Understanding web workers in JavaScript with real world example](https://javascript.plainenglish.io/understanding-web-workers-in-js-with-real-world-example-1629a283aeec?gi=89cf0dd4c3f4)
+* [Web worker, Service worker, and Worklets: A comprehensive guide](https://dev.to/bharat5604/web-worker-service-worker-and-worklets-a-comprehensive-guide-1f64)
diff --git a/questions/what-do-you-think-of-amd-vs-commonjs/en-US.langnostic.json b/questions/what-do-you-think-of-amd-vs-commonjs/en-US.langnostic.json
new file mode 100644
index 0000000..2d6c3a9
--- /dev/null
+++ b/questions/what-do-you-think-of-amd-vs-commonjs/en-US.langnostic.json
@@ -0,0 +1,76 @@
+{
+  "frontmatter": {
+    "title": "7985428"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "7fda4468",
+        "2a7816d0",
+        "179b0868",
+        "7e5d8c12",
+        "d21ac3ca",
+        "69eb87d6",
+        "6bf6ed5b",
+        "509a645f",
+        "748ffe75",
+        "40bc45c6",
+        "96b698d",
+        "6bf6ed5b",
+        "ef879098",
+        "748ffe75",
+        "b58e02f3",
+        "67423e0a",
+        "a82a90cc",
+        "e81864d2",
+        "d7ae6d3f",
+        "40bf324b",
+        "f4801713",
+        "afdf8108",
+        "6dd3b324",
+        "dc0bf89e",
+        "66582988",
+        "937e3338",
+        "7a5f8faf",
+        "1f4770e5",
+        "3822c011"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "7fda4468",
+        "2a7816d0",
+        "179b0868",
+        "7e5d8c12",
+        "d21ac3ca",
+        "69eb87d6",
+        "6bf6ed5b",
+        "509a645f",
+        "748ffe75",
+        "40bc45c6",
+        "96b698d",
+        "6bf6ed5b",
+        "ef879098",
+        "748ffe75",
+        "b58e02f3",
+        "67423e0a",
+        "a82a90cc",
+        "e81864d2",
+        "d7ae6d3f",
+        "40bf324b",
+        "f4801713",
+        "afdf8108",
+        "6dd3b324",
+        "dc0bf89e",
+        "66582988",
+        "937e3338",
+        "7a5f8faf",
+        "1f4770e5",
+        "3822c011"
+      ]
+    }
+  }
+}
diff --git a/questions/what-do-you-think-of-amd-vs-commonjs/zh-CN.mdx b/questions/what-do-you-think-of-amd-vs-commonjs/zh-CN.mdx
index e00298b..eed2fea 100644
--- a/questions/what-do-you-think-of-amd-vs-commonjs/zh-CN.mdx
+++ b/questions/what-do-you-think-of-amd-vs-commonjs/zh-CN.mdx
@@ -1,9 +1,100 @@
 ---
-title: 您对AMD与 CommonJS的看法如何？
+title: 你如何看待 AMD 与 CommonJS？
 ---
 
-这两种方法都是实现模块系统的方法，而在实现 ES2015 年之前，模块系统没有在 JavaScript 中实现。 CommonJS 是同步的，而 AMD (异步模块定义) 显然是异步的。 CommonJS 设计时考虑到服务器端的开发，而 AMD 支持异步加载模块，更适合于浏览器。
+## TL;DR
 
-AMD 语法可以非常详细，CommonJS 更接近您用其他语言写导入语句的样式。 大多数时间, AMD 是不必要的, 因为如果你将你所有的 JavaScript 打包到同一个文件, 您无法从异步加载属性中获益。 另外，CommonJS 语法更接近于 Node.js 写入/导入模块的风格，在客户端和服务器端 JavaScript 开发之间的切换过程中的间接成本较少。
+AMD（异步模块定义）和 CommonJS 是两种 JavaScript 模块系统。AMD 专为异步加载模块而设计，使其适用于浏览器。CommonJS 专为同步加载而设计，使其更适合服务器端环境，如 Node.js。AMD 使用 `define` 和 `require` 来定义和加载模块，而 CommonJS 使用 `module.exports` 和 `require`。
 
-未来的标准、ES 模块支持同步和异步加载，并得到浏览器和服务器端运行时间的支持。 我们终于可以只坚持一种方法了（除非升级遗留的应用程序）。
+***
+
+## AMD vs CommonJS
+
+### 概述
+
+AMD 和 CommonJS 都是 JavaScript 中用于管理依赖关系和组织代码的模块系统。它们服务于不同的目的，并适用于不同的环境。
+
+### AMD (异步模块定义)
+
+#### 特点
+
+* 专为异步加载模块而设计
+* 主要用于浏览器环境
+* 使用 `define` 和 `require` 来定义和加载模块
+
+#### 示例
+
+```javascript
+// 在 AMD 中定义一个模块
+define(['dependency1', 'dependency2'], function (dep1, dep2) {
+  return {
+    // 模块代码在这里
+  };
+});
+
+// 在 AMD 中加载一个模块
+require(['module1', 'module2'], function (mod1, mod2) {
+  // 使用 mod1 和 mod2 的代码
+});
+```
+
+### CommonJS
+
+#### 特点
+
+* 专为同步加载模块而设计
+* 主要用于服务器端环境，如 Node.js
+* 使用 `module.exports` 和 `require` 来定义和加载模块
+
+#### 示例
+
+```javascript
+// 在 CommonJS 中定义一个模块
+const dep1 = require('dependency1');
+const dep2 = require('dependency2');
+
+module.exports = {
+  // 模块代码在这里
+};
+
+// 在 CommonJS 中加载一个模块
+const mod1 = require('module1');
+const mod2 = require('module2');
+
+// 使用 mod1 和 mod2 的代码
+```
+
+### 主要区别
+
+#### 加载机制
+
+* **AMD**：异步，适用于浏览器，其中非阻塞操作至关重要。
+* **CommonJS**：同步，适用于服务器端环境，其中模块在执行前加载。
+
+#### 环境适用性
+
+* **AMD**: 适用于客户端应用程序。
+* **CommonJS**: 适用于服务器端应用程序。
+
+#### 语法
+
+* **AMD**: 使用 `define` 和 `require`。
+* **CommonJS**: 使用 `module.exports` 和 `require`。
+
+### 用例
+
+#### AMD
+
+* 适用于需要在 Web 应用程序中异步加载模块以避免阻塞 UI 的情况。
+* 经常与 RequireJS 等模块加载器一起使用。
+
+#### CommonJS
+
+* 适用于模块在开始时加载一次的服务器端应用程序。
+* Node.js 的标准模块系统。
+
+## 延伸阅读
+
+* [RequireJS documentation](https://requirejs.org/docs/api.html)
+* [Node.js modules documentation](https://nodejs.org/api/modules.html)
+* [MDN Web Docs on JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
diff --git a/questions/what-is-a-closure-and-how-why-would-you-use-one/en-US.langnostic.json b/questions/what-is-a-closure-and-how-why-would-you-use-one/en-US.langnostic.json
new file mode 100644
index 0000000..a44f710
--- /dev/null
+++ b/questions/what-is-a-closure-and-how-why-would-you-use-one/en-US.langnostic.json
@@ -0,0 +1,62 @@
+{
+  "frontmatter": {
+    "title": "86e9e9c7"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "e9ebe1da",
+        "c1c219dd",
+        "630e9d15",
+        "773802b",
+        "6cec583",
+        "ac1fd332",
+        "2a7816d0",
+        "564ad39f",
+        "531ffdc",
+        "7c3c0cfd",
+        "eb7c4eaf",
+        "8345ca93",
+        "22608380",
+        "816f4b7e",
+        "f07ed3c2",
+        "72df5f77",
+        "3f3755cd",
+        "947d4f14",
+        "bfc3c199",
+        "49adb6a1",
+        "1f4770e5",
+        "d37a144c"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "e9ebe1da",
+        "c1c219dd",
+        "630e9d15",
+        "773802b",
+        "6cec583",
+        "ac1fd332",
+        "2a7816d0",
+        "564ad39f",
+        "531ffdc",
+        "7c3c0cfd",
+        "eb7c4eaf",
+        "8345ca93",
+        "22608380",
+        "816f4b7e",
+        "f07ed3c2",
+        "72df5f77",
+        "3f3755cd",
+        "947d4f14",
+        "bfc3c199",
+        "49adb6a1",
+        "1f4770e5",
+        "d37a144c"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-a-closure-and-how-why-would-you-use-one/zh-CN.mdx b/questions/what-is-a-closure-and-how-why-would-you-use-one/zh-CN.mdx
index be264ea..92cb60c 100644
--- a/questions/what-is-a-closure-and-how-why-would-you-use-one/zh-CN.mdx
+++ b/questions/what-is-a-closure-and-how-why-would-you-use-one/zh-CN.mdx
@@ -1,22 +1,55 @@
 ---
-title: 什么是闭包？ 你如何/为何使用？
+title: JavaScript 中的闭包是什么？你将如何/为什么要使用它？
 ---
 
+## TL;DR
+
+在 Kyle Simpson 撰写的 ["You Don't Know JS"](https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures) (YDKJS) 一书中，闭包定义如下：
+
+> 闭包是指一个函数能够记住并访问其词法作用域，即使该函数在其词法作用域之外执行
+
+简单来说，函数可以访问它们在创建时在其作用域中的变量。 这就是我们所说的函数的词法作用域。 闭包是一个函数，即使外部函数执行完毕后，它仍然保留对这些变量的访问权限。 这就像函数记住了它最初的环境。
+
+```js live
+function outerFunction() {
+  const outerVar = '我位于 innerFunction 之外';
+
+  function innerFunction() {
+    console.log(outerVar); // `innerFunction` 仍然可以访问 `outerVar`。
+  }
+
+  return innerFunction;
+}
+
+const inner = outerFunction(); // `inner` 现在持有对 `innerFunction` 的引用。
+
+inner(); // "我位于 innerFunction 之外"
+// 即使 `outerFunction` 已经执行完毕，`inner` 仍然可以访问在 `outerFunction` 内部定义的变量。
+```
+
+要记住的关键点：
+
+* 当内部函数可以访问其外部（词法）作用域中的变量时，就会发生闭包，即使外部函数已经执行完毕。
+* 闭包允许一个函数**记住**它被创建的环境，即使该环境不再存在。
+* 闭包在 JavaScript 中被广泛使用，例如在回调、事件处理程序和异步函数中。
+
+***
+
 ## 了解 JavaScript 闭包
 
-在 JavaScript 中，闭包是一个捕获了它被声明的词法作用域的函数，允许它在外部作用域关闭后仍然访问和操作变量。
+在 JavaScript 中，闭包是一个捕获其声明的词法作用域的函数，允许它访问和操作来自外部作用域的变量，即使该作用域已关闭。
 
 以下是闭包的工作原理：
 
-1. **词法作用域**：JavaScript 使用词法作用域，这意味着函数对变量的访问是由它在源代码中的物理位置决定的。
-1. **函数创建**：当一个函数被创建时，它会保持对它的词法作用域的引用。这个作用域包含在闭包被创建时处于范围内的所有局部变量。
-1. **保持状态**：闭包通常用于以安全的方式维护状态，因为闭包捕获的变量在函数外部是不可访问的。
+1. **词法作用域**：JavaScript 使用词法作用域，这意味着函数对变量的访问由其在源代码中的实际位置决定。
+2. **函数创建**：当创建一个函数时，它会保留对其词法作用域的引用。 此作用域包含在创建闭包时在其作用域中的所有局部变量。
+3. **维护状态**：闭包通常用于以安全的方式维护状态，因为闭包捕获的变量在函数外部不可访问。
 
 ## ES6 语法和闭包
 
-在 ES6 中，可以使用箭头函数来创建闭包，这提供了更简洁的语法并在词法上绑定了`this` 值。以下是一个例子：
+使用 ES6，可以使用箭头函数创建闭包，这提供了更简洁的语法并以词法方式绑定 `this` 值。 这是一个例子：
 
-```js
+```js live
 const createCounter = () => {
   let count = 0;
   return () => {
@@ -26,13 +59,59 @@ const createCounter = () => {
 };
 
 const counter = createCounter();
-console.log(counter()); // 输出: 1
-console.log(counter()); // 输出: 2
+console.log(counter()); // 输出：1
+console.log(counter()); // 输出：2
 ```
 
-为什么使用闭包？
+## React 中的闭包
+
+闭包无处不在。 下面的代码显示了一个在单击按钮时增加计数器的简单示例。 在此代码中，`handleClick` 形成一个闭包。 它可以访问其外部作用域变量 `count` 和 `setCount`
+
+```jsx
+import React, { useState } from 'react';
+
+function Counter() {
+  // 使用 useState 钩子定义一个状态变量
+  const [count, setCount] = useState(0);
+
+  // 此 handleClick 函数是一个闭包
+  function handleClick() {
+    // 它可以访问 'count' 状态变量
+    setCount(count + 1);
+  }
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={handleClick}>Increment</button>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <div>
+      <h1>Counter App</h1>
+      <Counter />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## 为什么使用闭包？
+
+使用闭包提供以下好处：
+
+1. **数据封装**：闭包提供了一种创建私有变量和函数的方法，这些变量和函数无法从闭包外部访问。这对于隐藏实现细节并以封装的方式维护状态非常有用。
+2. **函数式编程**：闭包是函数式编程范例的基础，它们用于创建可以传递和稍后调用的函数，保留对创建它们的范围的访问权限，例如 [部分应用或柯里化](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x)。
+3. **事件处理程序和回调**：在 JavaScript 中，闭包通常用于事件处理程序和回调，以维护状态或访问在定义处理程序或回调时作用域中的变量。
+4. **模块模式**：闭包在 JavaScript 中启用 [模块模式](https://www.patterns.dev/vanilla/module-pattern)，允许创建具有私有和公共部分的模块。
+
+## 延伸阅读
 
-1. **数据封装**：闭包提供了一种创建私有变量和函数的方式，外部无法访问。这对于隐藏实现细节和以封装的方式维护状态非常有用。
-1. **函数式编程**：闭包在函数式编程范式中具有基础作用，它们用于创建可以传递和稍后调用的函数，保留了它们被创建的作用域的访问权限，例如[部分应用或柯里化](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x)。
-1. **事件处理程序和回调函数**：在 JavaScript 中，闭包经常用于事件处理程序和回调函数中，以维护状态或访问在处理程序或回调函数定义时处于范围内的变量。
-1. **模块模式**：闭包在 JavaScript 中启用了[模块模式](https://www.patterns.dev/vanilla/module-pattern)，允许创建具有私有和公共部分的模块。
+* [闭包 - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)
+* [闭包 - Javascript.info](https://javascript.info/closure)
+* [闭包 - Eloquent Javascript](https://eloquentjavascript.net/03_functions.html)
+* [你还不了解 JS：作用域和闭包](https://github.com/getify/You-Dont-Know-JS/tree/2nd-ed/scope-closures)
diff --git a/questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.langnostic.json b/questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.langnostic.json
new file mode 100644
index 0000000..4933930
--- /dev/null
+++ b/questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "ebd9ecc9"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "41e5b333",
+        "27f732be",
+        "2a7816d0",
+        "b46a6d8c",
+        "5fddcf9c",
+        "ed0c0a4d",
+        "d42e4283",
+        "e7d91d8d",
+        "295f1e70",
+        "849553db",
+        "3ce58a7e",
+        "27f732be",
+        "8c7b0ca",
+        "c2b2f508",
+        "879dbb14",
+        "e8e49a6a",
+        "91118d44",
+        "27f732be",
+        "c019b9d8",
+        "8a2ab78c",
+        "e5cb6842",
+        "1f4770e5",
+        "19b59749"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "41e5b333",
+        "27f732be",
+        "2a7816d0",
+        "b46a6d8c",
+        "5fddcf9c",
+        "ed0c0a4d",
+        "d42e4283",
+        "e7d91d8d",
+        "295f1e70",
+        "849553db",
+        "3ce58a7e",
+        "27f732be",
+        "8c7b0ca",
+        "c2b2f508",
+        "879dbb14",
+        "e8e49a6a",
+        "91118d44",
+        "27f732be",
+        "c019b9d8",
+        "8a2ab78c",
+        "e5cb6842",
+        "1f4770e5",
+        "19b59749"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/zh-CN.mdx b/questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/zh-CN.mdx
new file mode 100644
index 0000000..f9ad40c
--- /dev/null
+++ b/questions/what-is-asyncawait-and-how-does-it-simplify-asynchronous-code/zh-CN.mdx
@@ -0,0 +1,118 @@
+---
+title: 什么是 async/await 以及它如何简化异步代码？
+---
+
+## TL;DR
+
+`async/await` 是 JavaScript 中一种现代语法，它简化了处理 Promise 的过程。通过在函数前使用 `async` 关键字，你可以在该函数中使用 `await` 关键字来暂停执行，直到 Promise 被解析。这使得异步代码看起来更像同步代码，并且行为也更像同步代码，从而更容易阅读和维护。
+
+```js live
+async function fetchData() {
+  try {
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/posts/1',
+    );
+    const data = await response.json();
+    console.log(data);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}
+fetchData();
+```
+
+***
+
+## 什么是 async/await 以及它如何简化异步代码？
+
+### async/await 简介
+
+`async/await` 是 ECMAScript 2017 (ES8) 中引入的一个特性，它允许你以更像同步的方式编写异步代码。它建立在 Promise 的基础上，并提供了一种更清晰、更易读的方式来处理异步操作。
+
+### 使用 `async` 关键字
+
+`async` 关键字用于声明一个异步函数。当一个函数被声明为 `async` 时，它会自动返回一个 Promise。这意味着你可以在其中使用 `await` 关键字来暂停函数的执行，直到 Promise 被解析。
+
+```js live
+async function exampleFunction() {
+  return 'Hello, World!';
+}
+
+exampleFunction().then(console.log); // Output: Hello, World!
+```
+
+### 使用 `await` 关键字
+
+`await` 关键字只能在 `async` 函数中使用。它会暂停函数的执行，直到 Promise 被解析，然后返回解析后的值。如果 Promise 被拒绝，它会抛出一个错误，可以使用 `try...catch` 块捕获该错误。
+
+```js live
+async function fetchData() {
+  try {
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/posts/1',
+    );
+    const data = await response.json();
+    console.log(data);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}
+fetchData();
+```
+
+### 简化异步代码
+
+在 `async/await` 之前，处理异步操作通常涉及链接多个 `.then()` 调用，这可能导致“回调地狱”或“金字塔式厄运”。`async/await` 扁平化了这种结构，使代码更易读，更易于维护。
+
+#### 使用 Promise 的示例
+
+```js live
+fetch('https://jsonplaceholder.typicode.com/posts/1')
+  .then((response) => response.json())
+  .then((data) => {
+    console.log(data);
+  })
+  .catch((error) => {
+    console.error('Error fetching data:', error);
+  });
+```
+
+#### 使用 async/await 的示例
+
+```js live
+async function fetchData() {
+  try {
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/posts/1',
+    );
+    const data = await response.json();
+    console.log(data);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}
+fetchData();
+```
+
+### 错误处理
+
+与 Promise 相比，使用 `async/await` 进行错误处理更直接。你可以使用 `try...catch` 块来处理错误，使代码更清晰、更直观。
+
+```js live
+async function fetchData() {
+  try {
+    const response = await fetch('https://jsonplaceholder.typicod.com/posts/1'); // Typo in URL
+    const data = await response.json();
+    console.log(data);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}
+fetchData();
+```
+
+## 延伸阅读
+
+* [MDN Web 文档：async function](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function)
+* [MDN Web 文档：await](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await)
+* [JavaScript.info：Async/await](https://zh.javascript.info/async-await)
diff --git a/questions/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/en-US.langnostic.json b/questions/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/en-US.langnostic.json
new file mode 100644
index 0000000..af88519
--- /dev/null
+++ b/questions/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/en-US.langnostic.json
@@ -0,0 +1,68 @@
+{
+  "frontmatter": {
+    "title": "66b77b6c"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "cac99c70",
+        "2a7816d0",
+        "bcad4891",
+        "42351ede",
+        "caa5f823",
+        "5c64601a",
+        "638202f1",
+        "a4539dd5",
+        "f6920b05",
+        "22f3d69f",
+        "f7e4a1e4",
+        "3c9d9bf0",
+        "d556bcf7",
+        "cb379252",
+        "34e2ef73",
+        "28157379",
+        "3498d072",
+        "7916bd14",
+        "25511d3a",
+        "8630d54",
+        "16a53600",
+        "76a97e5e",
+        "f5ec4fbc",
+        "1f4770e5",
+        "ed3bb2ee"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "cac99c70",
+        "2a7816d0",
+        "bcad4891",
+        "42351ede",
+        "caa5f823",
+        "5c64601a",
+        "638202f1",
+        "a4539dd5",
+        "f6920b05",
+        "22f3d69f",
+        "f7e4a1e4",
+        "3c9d9bf0",
+        "d556bcf7",
+        "cb379252",
+        "34e2ef73",
+        "28157379",
+        "3498d072",
+        "7916bd14",
+        "25511d3a",
+        "8630d54",
+        "16a53600",
+        "76a97e5e",
+        "f5ec4fbc",
+        "1f4770e5",
+        "ed3bb2ee"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/zh-CN.mdx b/questions/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/zh-CN.mdx
new file mode 100644
index 0000000..06b33a8
--- /dev/null
+++ b/questions/what-is-cross-site-scripting-xss-and-how-can-you-prevent-it/zh-CN.mdx
@@ -0,0 +1,79 @@
+---
+title: 什么是跨站脚本 (XSS) 以及如何防止它？
+---
+
+## TL;DR
+
+跨站脚本 (XSS) 是一种安全漏洞，它允许攻击者将恶意脚本注入到其他用户查看的网页中。这可能导致数据盗窃、会话劫持和其他恶意活动。为了防止 XSS，您应该验证和清理用户输入，使用内容安全策略 (CSP)，并在浏览器中渲染数据之前转义它。
+
+***
+
+## 什么是跨站脚本 (XSS) 以及如何防止它？
+
+### 什么是跨站脚本 (XSS)？
+
+跨站脚本 (XSS) 是一种通常在 Web 应用程序中发现的安全漏洞。它允许攻击者将恶意脚本注入到来自其他可信网站的内容中。然后，这些脚本可以在用户浏览器的上下文中执行，从而导致各种恶意活动，例如：
+
+* 窃取 cookie 和会话令牌
+* 篡改网站
+* 将用户重定向到恶意网站
+* 记录击键
+
+XSS 攻击主要有三种类型：
+
+1. **存储型 XSS**：恶意脚本永久存储在目标服务器上，例如数据库、评论字段或论坛帖子中。
+2. **反射型 XSS**：恶意脚本从 Web 服务器反射出来，例如在错误消息、搜索结果或任何其他包含发送到服务器的部分或全部输入的响应中。
+3. **基于 DOM 的 XSS**：漏洞存在于客户端代码中，而不是服务器端代码中。恶意脚本由于修改受害者浏览器中的 DOM 环境而执行。
+
+### 如何防止 XSS？
+
+#### 验证和清理用户输入
+
+始终验证和清理用户输入，以确保它们不包含恶意代码。使用提供用于输入验证和清理的内置功能的库和框架。
+
+```js
+const sanitizeHtml = require('sanitize-html');
+
+const cleanInput = sanitizeHtml(userInput);
+```
+
+#### 使用内容安全策略 (CSP)
+
+内容安全策略 (CSP) 是一项安全功能，它通过指定允许加载哪些动态资源来帮助防止 XSS 攻击。这可以通过设置 HTTP 标头来完成。
+
+```http
+Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com;
+```
+
+#### 渲染前转义数据
+
+在浏览器中渲染数据之前，请务必转义数据，以防止恶意脚本的执行。使用框架或库提供的函数来转义 HTML、JavaScript 和其他内容。
+
+```js
+const escapeHtml = (str) => {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+};
+
+const safeOutput = escapeHtml(userInput);
+```
+
+#### 使用 HTTP-only Cookie
+
+将 Cookie 设置为 HTTP-only，以防止客户端脚本访问它们。这有助于降低会话劫持的风险。
+
+```http
+Set-Cookie: sessionId=abc123; HttpOnly;
+```
+
+#### 定期更新依赖项
+
+保持您的库和框架为最新状态，以确保您拥有最新的安全补丁和功能。
+
+## 延伸阅读
+
+* [Google Web 基础知识：防止 XSS](https://developers.google.com/web/fundamentals/security/csp)
diff --git a/questions/what-is-currying-and-how-does-it-work/en-US.langnostic.json b/questions/what-is-currying-and-how-does-it-work/en-US.langnostic.json
new file mode 100644
index 0000000..c0e872b
--- /dev/null
+++ b/questions/what-is-currying-and-how-does-it-work/en-US.langnostic.json
@@ -0,0 +1,60 @@
+{
+  "frontmatter": {
+    "title": "2b23906f"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "22f638",
+        "5bb10ab8",
+        "2a7816d0",
+        "7308c54e",
+        "25841bc3",
+        "b10bb752",
+        "4e8ede6c",
+        "50bb31e2",
+        "8bd49e92",
+        "d7958ab6",
+        "5c367c22",
+        "5ae28d01",
+        "e9625e0d",
+        "5e8a7e51",
+        "60551088",
+        "63278240",
+        "84cdaeec",
+        "3c9d8ac8",
+        "1150d83c",
+        "1f4770e5",
+        "1c7dad81"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "22f638",
+        "5bb10ab8",
+        "2a7816d0",
+        "7308c54e",
+        "25841bc3",
+        "b10bb752",
+        "4e8ede6c",
+        "50bb31e2",
+        "8bd49e92",
+        "d7958ab6",
+        "5c367c22",
+        "5ae28d01",
+        "e9625e0d",
+        "5e8a7e51",
+        "60551088",
+        "63278240",
+        "84cdaeec",
+        "3c9d8ac8",
+        "1150d83c",
+        "1f4770e5",
+        "1c7dad81"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-currying-and-how-does-it-work/zh-CN.mdx b/questions/what-is-currying-and-how-does-it-work/zh-CN.mdx
new file mode 100644
index 0000000..5cb52b5
--- /dev/null
+++ b/questions/what-is-currying-and-how-does-it-work/zh-CN.mdx
@@ -0,0 +1,119 @@
+---
+title: 什么是柯里化以及它如何工作？
+---
+
+## TL;DR
+
+柯里化是函数式编程中的一种技术，它将接受多个参数的函数转换为一系列只接受单个参数的函数。这允许函数的局部应用。例如，函数 `f(a, b, c)` 可以柯里化为 `f(a)(b)(c)`。以下是 JavaScript 中的一个简单示例：
+
+```js live
+function add(a) {
+  return function (b) {
+    return function (c) {
+      return a + b + c;
+    };
+  };
+}
+
+const addOne = add(1);
+console.log(addOne); // function object
+
+const addOneAndTwo = addOne(2);
+console.log(addOneAndTwo); // function object
+
+const result = addOneAndTwo(3);
+console.log(result); // Output: 6
+```
+
+***
+
+## 什么是柯里化以及它如何工作？
+
+### 定义
+
+柯里化是一种函数式编程技术，其中具有多个参数的函数被分解为一系列函数，每个函数接受一个参数。这允许函数的局部应用，从而实现更灵活和可重用的代码。
+
+### 工作原理
+
+1. **转换**：接受多个参数的函数被转换为一系列嵌套函数，每个函数接受一个参数。
+2. **局部应用**：你可以使用比预期更少的参数来调用柯里化函数，它将返回一个接受剩余参数的新函数。
+
+### JavaScript 示例
+
+这是一个简单的例子，说明了 JavaScript 中的柯里化：
+
+```js live
+// Non-curried function
+function add(a, b, c) {
+  return a + b + c;
+}
+
+// Curried version of the same function
+function curriedAdd(a) {
+  return function (b) {
+    return function (c) {
+      return a + b + c;
+    };
+  };
+}
+
+// Using the curried function
+const addOne = curriedAdd(1);
+console.log(addOne); // function object
+
+const addOneAndTwo = addOne(2);
+console.log(addOneAndTwo); // function object
+
+const result = addOneAndTwo(3);
+console.log(result); // Output: 6
+```
+
+### 柯里化的好处
+
+1. **可重用性**：柯里化函数可以与不同的参数集一起重用。
+2. **局部应用**：你可以通过修复原始函数的某些参数来创建新函数。
+3. **函数组合**：柯里化使组合函数更容易，从而使代码更具可读性和可维护性。
+
+### 实际例子
+
+考虑一个计算长方体体积的函数：
+
+```js live
+function volume(length, width, height) {
+  return length * width * height;
+}
+
+// Curried version
+function curriedVolume(length) {
+  return function (width) {
+    return function (height) {
+      return length * width * height;
+    };
+  };
+}
+
+// Using the curried function
+const volumeWithLength5 = curriedVolume(5);
+const volumeWithLength5AndWidth4 = volumeWithLength5(4);
+const result = volumeWithLength5AndWidth4(3);
+console.log(result); // Output: 60
+```
+
+### 使用箭头函数的柯里化
+
+你也可以使用箭头函数使语法更简洁：
+
+```js live
+const curriedAdd = (a) => (b) => (c) => a + b + c;
+
+const addOne = curriedAdd(1);
+const addOneAndTwo = addOne(2);
+const result = addOneAndTwo(3);
+console.log(result); // Output: 6
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Function currying](https://developer.mozilla.org/en-US/docs/Glossary/Currying)
+* [JavaScript.info: Currying](https://javascript.info/currying)
+* [Functional Programming in JavaScript: Currying](https://www.sitepoint.com/currying-in-functional-javascript/)
diff --git a/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.langnostic.json b/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.langnostic.json
new file mode 100644
index 0000000..01fdcd0
--- /dev/null
+++ b/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.langnostic.json
@@ -0,0 +1,73 @@
+{
+  "frontmatter": {
+    "title": "6e248f9d",
+    "subtitle": "f876ddcf"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "db24c9d8",
+        "def8dd56",
+        "2b3223fd",
+        "9f33f88c",
+        "910dc689",
+        "2a7816d0",
+        "ffd9a88",
+        "64f1c549",
+        "c2d9aba1",
+        "15825e2b",
+        "899e50f3",
+        "a105fc91",
+        "45224a96",
+        "99faad6d",
+        "db9d9907",
+        "6947fcaa",
+        "a9aad61d",
+        "64d5eaa4",
+        "45d5f59e",
+        "2291669d",
+        "9b5019f0",
+        "6d42a6f4",
+        "62c85188",
+        "1cab2f63",
+        "a83e4e49",
+        "1a302627",
+        "2a5e83d7"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "db24c9d8",
+        "def8dd56",
+        "2b3223fd",
+        "9f33f88c",
+        "910dc689",
+        "2a7816d0",
+        "ffd9a88",
+        "64f1c549",
+        "c2d9aba1",
+        "15825e2b",
+        "899e50f3",
+        "a105fc91",
+        "45224a96",
+        "99faad6d",
+        "db9d9907",
+        "6947fcaa",
+        "a9aad61d",
+        "64d5eaa4",
+        "45d5f59e",
+        "2291669d",
+        "9b5019f0",
+        "6d42a6f4",
+        "62c85188",
+        "1cab2f63",
+        "a83e4e49",
+        "1a302627",
+        "2a5e83d7"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/zh-CN.mdx b/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/zh-CN.mdx
index 6b85b49..50aff6d 100644
--- a/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/zh-CN.mdx
+++ b/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/zh-CN.mdx
@@ -1,8 +1,109 @@
 ---
-title: 什么是事件循环？
-subtitle: 调用栈和任务队列之间的区别是什么？
+title: JavaScript 运行时中的事件循环是什么？
+subtitle: call stack 和 task queue 之间有什么区别？
 ---
 
-事件循环是一个单线程的循环，它监视调用栈，并检查任务队列中是否有工作要做。 如果调用栈是空的，而任务队列中有回调函数，则一个函数被取消队列并推到调用栈上执行。
+## TL;DR
 
-如果你还没有查看菲利普-罗伯特的[关于事件循环的演讲](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html)，你应该看看。 它是在 JavaScript 上浏览最多的视频之一。
+事件循环是 JavaScript 运行时环境内关于异步操作如何在 JavaScript 引擎中执行的概念。它的工作原理如下：
+
+1. JavaScript 引擎开始执行脚本，将同步操作放在调用堆栈上。
+2. 当遇到异步操作（例如，`setTimeout()`、HTTP 请求）时，它会被卸载到相应的 Web API 或 Node.js API，以在后台处理该操作。
+3. 一旦异步操作完成，其回调函数将被放置在相应的队列中——任务队列（也称为宏任务队列/回调队列）或微任务队列。从这里开始，我们将“任务队列”称为“宏任务队列”，以便更好地与微任务队列区分开来。
+4. 事件循环持续监视调用堆栈并执行调用堆栈上的项目。如果/当调用堆栈为空时：
+   1. 处理微任务队列。微任务包括 promise 回调（`then`、`catch`、`finally`）、`MutationObserver` 回调和对 `queueMicrotask()` 的调用。事件循环从微任务队列中获取第一个回调并将其推送到调用堆栈以供执行。重复此操作，直到微任务队列为空。
+   2. 处理宏任务队列。宏任务包括 Web API，如 `setTimeout()`、HTTP 请求、用户界面事件处理程序，如点击、滚动等。事件循环从宏任务队列中出列第一个回调并将其推送到调用堆栈以供执行。但是，在处理完宏任务队列回调后，事件循环不会继续处理下一个宏任务！事件循环首先检查微任务队列。检查微任务队列是必要的，因为微任务的优先级高于宏任务队列回调。刚刚执行的宏任务队列回调可能添加了更多微任务！
+      1. 如果微任务队列非空，则按上一步处理它们。
+      2. 如果微任务队列为空，则处理下一个宏任务队列回调。重复此操作，直到宏任务队列为空。
+5. 此过程无限期地持续进行，允许 JavaScript 引擎高效地处理同步和异步操作，而不会阻塞调用堆栈。
+
+不幸的是，仅使用文本很难很好地解释事件循环。我们建议查看以下优秀的视频之一，解释事件循环：
+
+* [JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue](https://www.youtube.com/watch?v=eiC58R16hb8) (2024): Lydia Hallie 是 JavaScript 方面的热门教育家，这是解释事件循环的最新最佳视频。对于那些喜欢详细的基于文本的解释的人，还有一个[配套博客文章](https://www.lydiahallie.com/blog/event-loop)。
+* [In the Loop](https://www.youtube.com/watch?v=cCOL7MC4Pl0) (2018): 来自 Chrome 团队的 Jake Archibald 在 JSConf 2018 期间提供了事件循环的视觉演示，解释了不同类型的任务。
+* [What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ) (2014): Philip Robert 在 JSConf 2014 上发表了这次史诗般的演讲，这是 YouTube 上观看次数最多的 JavaScript 视频之一。
+
+我们建议观看 [Lydia 的视频](https://www.youtube.com/watch?v=eiC58R16hb8)，因为它是最现代和简洁的解释，时长仅为 13 分钟，而其他视频至少需要 30 分钟。她的视频足以满足面试的目的。
+
+***
+
+## JavaScript 中的事件循环
+
+事件循环是 JavaScript 异步操作的核心。它是一种处理代码执行的机制，允许异步操作并确保 JavaScript 引擎的单线程性质不会阻塞程序的执行。
+
+### 事件循环的组成部分
+
+为了更好地理解它，我们需要了解系统的所有组成部分。这些组件是事件循环的一部分：
+
+#### 调用堆栈
+
+调用堆栈跟踪程序中正在执行的函数。当调用一个函数时，它被添加到调用堆栈的顶部。当函数完成时，它将从调用堆栈中删除。这允许程序跟踪它在函数执行中的位置，并在函数完成时返回到正确的位置。顾名思义，它是一个遵循后进先出的堆栈数据结构。
+
+#### Web API/Node.js API
+
+异步操作，如 `setTimeout()`、HTTP 请求、文件 I/O 等，由 Web API（在浏览器中）或 C++ API（在 Node.js 中）处理。这些 API 不是 JavaScript 引擎的一部分，并且在单独的线程上运行，允许它们并发执行而不会阻塞调用堆栈。
+
+#### 任务队列 / 宏任务队列 / 回调队列
+
+任务队列，也称为宏任务队列/回调队列/事件队列，是一个保存需要执行的任务的队列。这些任务通常是异步操作，例如传递给 Web API 的回调（`setTimeout()`、`setInterval()`、HTTP 请求等）以及用户界面事件处理程序，如点击、滚动等。
+
+#### 微任务队列
+
+Microtasks 是比 macrotasks 具有更高优先级的任务，它们在当前执行的脚本完成之后、下一个 macrotask 执行之前立即执行。Microtasks 通常用于更即时、轻量级的操作，这些操作应在当前操作完成后尽快执行。有一个专门用于 microtasks 的 microtask 队列。Microtasks 包括 promise 回调（`then()`、`catch()` 和 `finally()`）、`await` 语句、`queueMicrotask()` 和 `MutationObserver` 回调。
+
+### 事件循环顺序
+
+1. JavaScript 引擎开始执行脚本，将同步操作放在调用堆栈上。
+2. 当遇到异步操作（例如，`setTimeout()`、HTTP 请求）时，它会被卸载到相应的 Web API 或 Node.js API，以在后台处理该操作。
+3. 一旦异步操作完成，其回调函数将被放置在相应的队列中——任务队列（也称为 macrotask 队列/回调队列）或 microtask 队列。从这里开始，我们将“任务队列”称为“macrotask 队列”，以便更好地与 microtask 队列区分开来。
+4. 事件循环持续监视调用堆栈并执行调用堆栈上的项目。如果/当调用堆栈为空时：
+   1. microtask 队列被处理。事件循环从 microtask 队列中获取第一个回调，并将其推送到调用堆栈以供执行。这将重复进行，直到 microtask 队列为空。
+   2. macrotask 队列被处理。事件循环从 macrotask 队列中取出第一个回调，并将其推送到调用堆栈上以供执行。但是，在处理完 macrotask 队列回调之后，事件循环不会继续处理下一个 macrotask！事件循环首先检查 microtask 队列。检查 microtask 队列是必要的，因为 microtasks 的优先级高于 macrotask 队列回调。刚刚执行的 macrotask 队列回调可能添加了更多 microtasks！
+      1. 如果 microtask 队列非空，则按上一步处理它们。
+      2. 如果 microtask 队列为空，则处理下一个 macrotask 队列回调。这将重复进行，直到 macrotask 队列为空。
+5. 此过程无限期地持续进行，允许 JavaScript 引擎高效地处理同步和异步操作，而不会阻塞调用堆栈。
+
+### 示例
+
+以下代码使用正常执行、macrotasks 和 microtasks 的组合来记录一些语句。
+
+```js live
+console.log('Start');
+
+setTimeout(() => {
+  console.log('Timeout 1');
+}, 0);
+
+Promise.resolve().then(() => {
+  console.log('Promise 1');
+});
+
+setTimeout(() => {
+  console.log('Timeout 2');
+}, 0);
+
+console.log('End');
+
+// Console output:
+// Start
+// End
+// Promise 1
+// Timeout 1
+// Timeout 2
+```
+
+输出说明：
+
+1. `Start` 和 `End` 首先被记录，因为它们是初始脚本的一部分。
+2. `Promise 1` 接下来被记录，因为 promises 是 microtasks，并且 microtasks 在调用堆栈上的项目之后立即执行。
+3. `Timeout 1` 和 `Timeout 2` 最后被记录，因为它们是 macrotasks，并且在 microtasks 之后被处理。
+
+## 延伸阅读和资源
+
+* [事件循环 - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Event_loop)
+* [Node.js 事件循环](https://nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick)
+* [事件循环：microtasks 和 macrotasks](https://javascript.info/event-loop)
+* [JavaScript 可视化：Lydia Hallie 的事件循环](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif)
+* [Lydia Hallie 的“JavaScript 可视化 - 事件循环、Web API、（Micro）任务队列”](https://www.lydiahallie.com/blog/event-loop)
+* [Philip Robert 的“到底什么是事件循环？”](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html)
+* [Jake Archibald 的“In The Loop”](https://www.youtube.com/watch?v=cCOL7MC4Pl0)
diff --git a/questions/what-is-objectfreeze-for/en-US.langnostic.json b/questions/what-is-objectfreeze-for/en-US.langnostic.json
new file mode 100644
index 0000000..d6901f0
--- /dev/null
+++ b/questions/what-is-objectfreeze-for/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "387067ab"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "6fc051ad",
+        "89292305",
+        "2a7816d0",
+        "d0fe993e",
+        "8782f836",
+        "ce03d00f",
+        "76b63abf",
+        "c455986b",
+        "ff2f44b9",
+        "48645dc2",
+        "fdf8df7d",
+        "5c47d964",
+        "5fedbc8e",
+        "d0b0f464",
+        "31c4eae4",
+        "1f4770e5",
+        "bb864a58"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "6fc051ad",
+        "89292305",
+        "2a7816d0",
+        "d0fe993e",
+        "8782f836",
+        "ce03d00f",
+        "76b63abf",
+        "c455986b",
+        "ff2f44b9",
+        "48645dc2",
+        "fdf8df7d",
+        "5c47d964",
+        "5fedbc8e",
+        "d0b0f464",
+        "31c4eae4",
+        "1f4770e5",
+        "bb864a58"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-objectfreeze-for/zh-CN.mdx b/questions/what-is-objectfreeze-for/zh-CN.mdx
new file mode 100644
index 0000000..9f6a06e
--- /dev/null
+++ b/questions/what-is-objectfreeze-for/zh-CN.mdx
@@ -0,0 +1,87 @@
+---
+title: 什么是 `Object.freeze()`？
+---
+
+## TL;DR
+
+`Object.freeze()` 用于使对象不可变。一旦对象被冻结，您就不能添加、删除或修改其属性。这对于创建常量或确保对象在整个程序中保持不变非常有用。
+
+```js live
+const obj = { name: 'John' };
+Object.freeze(obj);
+obj.name = 'Doe'; // This will not change the name property
+
+console.log(obj); // { name: 'John' }
+```
+
+***
+
+## 什么是 `Object.freeze()`？
+
+`Object.freeze()` 是 JavaScript 中的一种方法，它阻止修改现有属性值以及向对象添加或删除属性。此方法对于创建不可变对象非常有用，这有助于维护数据的完整性并避免意外的副作用。
+
+### 如何使用 `Object.freeze()`
+
+要使用 `Object.freeze()`，只需将要冻结的对象作为参数传递给该方法。这是一个基本示例：
+
+```js live
+const obj = {
+  name: 'John',
+  age: 30,
+};
+
+Object.freeze(obj);
+
+obj.name = 'Doe'; // This will not change the name property
+obj.gender = 'male'; // This will not add a new property
+delete obj.age; // This will not delete the age property
+
+console.log(obj); // Output: { name: "John", age: 30 }
+```
+
+### 冻结对象的特征
+
+1. **不可变性**：一旦对象被冻结，其属性就不能被更改、添加或删除。
+2. **不可扩展性**：冻结对象也是不可扩展的，这意味着您不能向其添加新属性。
+3. **不可配置性**：冻结对象的属性变为不可配置，这意味着您不能更改属性描述符。
+
+### `Object.freeze()` 的用例
+
+1. **常量**：当您想要创建一个不应被修改的常量对象时。
+2. **数据完整性**：确保对象在应用程序的整个生命周期中保持不变。
+3. **安全性**：防止对关键对象的意外或恶意更改。
+
+### 局限性
+
+* `Object.freeze()` 仅使对象本身不可变。如果对象包含嵌套对象，则这些嵌套对象不会被冻结，并且仍然可以被修改。
+* 要深度冻结一个对象，您需要递归地将 `Object.freeze()` 应用于所有嵌套对象。
+
+```js live
+const deepFreeze = (obj) => {
+  Object.keys(obj).forEach((key) => {
+    if (typeof obj[key] === 'object' && obj[key] !== null) {
+      deepFreeze(obj[key]);
+    }
+  });
+  return Object.freeze(obj);
+};
+
+const nestedObj = {
+  name: 'John',
+  details: {
+    age: 30,
+    address: '123 Street',
+  },
+};
+
+deepFreeze(nestedObj);
+
+nestedObj.details.age = 31; // This will not change the age property
+console.log(nestedObj); // Output: { name: "John", details: { age: 30, address: "123 Street" } }
+```
+
+## 延伸阅读
+
+* [MDN Web Docs on Object.freeze()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze)
+* [JavaScript.info on property flags and descriptors](https://javascript.info/property-descriptors)
+* [Deep freezing objects in JavaScript](https://medium.com/@saranshkataria/deep-freezing-objects-in-javascript-637f3d4d7d7)
diff --git a/questions/what-is-objectpreventextensions-for/en-US.langnostic.json b/questions/what-is-objectpreventextensions-for/en-US.langnostic.json
new file mode 100644
index 0000000..1778471
--- /dev/null
+++ b/questions/what-is-objectpreventextensions-for/en-US.langnostic.json
@@ -0,0 +1,56 @@
+{
+  "frontmatter": {
+    "title": "cb95f296"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "3ab63977",
+        "f1d4bfb5",
+        "2a7816d0",
+        "63511b89",
+        "84f5ef47",
+        "eea083fa",
+        "9fc52d61",
+        "8e3d9efb",
+        "7cd5becb",
+        "12fde400",
+        "9b5019f0",
+        "20ba114f",
+        "6c218584",
+        "c0fd2f59",
+        "5b03ae9a",
+        "6dd3b324",
+        "b938c573",
+        "1f4770e5",
+        "f80b8521"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "3ab63977",
+        "f1d4bfb5",
+        "2a7816d0",
+        "63511b89",
+        "84f5ef47",
+        "eea083fa",
+        "9fc52d61",
+        "8e3d9efb",
+        "7cd5becb",
+        "12fde400",
+        "9b5019f0",
+        "20ba114f",
+        "6c218584",
+        "c0fd2f59",
+        "5b03ae9a",
+        "6dd3b324",
+        "b938c573",
+        "1f4770e5",
+        "f80b8521"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-objectpreventextensions-for/zh-CN.mdx b/questions/what-is-objectpreventextensions-for/zh-CN.mdx
new file mode 100644
index 0000000..32dd12d
--- /dev/null
+++ b/questions/what-is-objectpreventextensions-for/zh-CN.mdx
@@ -0,0 +1,74 @@
+---
+title: 什么是 `Object.preventExtensions()`？
+---
+
+## TL;DR
+
+`Object.preventExtensions()` 是 JavaScript 中的一个方法，用于阻止向对象添加新属性。但是，它不会影响现有属性的删除或修改。当您希望确保对象保持特定形状并且不能向其添加其他属性时，此方法非常有用。
+
+```js live
+const obj = { name: 'John' };
+Object.preventExtensions(obj);
+
+obj.age = 30; // 这将不起作用，因为该对象不可扩展
+console.log(obj.age); // undefined
+```
+
+***
+
+## 什么是 `Object.preventExtensions()`？
+
+`Object.preventExtensions()` 是 JavaScript 中用于阻止向对象添加新属性的方法。此方法是 ECMAScript 5 规范的一部分，通过确保其结构不能通过添加新属性来更改，从而有助于维护对象的完整性。
+
+### 语法
+
+```js
+Object.preventExtensions(obj);
+```
+
+* `obj`：应该设置为不可扩展的对象。
+
+### 行为
+
+* 一旦对象设置为不可扩展，您就无法向其添加新属性。
+* 现有属性仍然可以被修改或删除。
+* 该方法返回传递给它的对象。
+
+### 示例
+
+```js live
+const obj = { name: 'John' };
+Object.preventExtensions(obj);
+
+obj.age = 30; // 这将不起作用，因为该对象不可扩展
+console.log(obj.age); // undefined
+
+obj.name = 'Jane'; // 这将起作用，因为现有属性可以被修改
+console.log(obj.name); // 'Jane'
+
+delete obj.name; // 这将起作用，因为现有属性可以被删除
+console.log(obj.name); // undefined
+```
+
+### 检查对象是否可扩展
+
+您可以使用 `Object.isExtensible()` 方法检查对象是否可扩展。
+
+```js live
+const obj = { name: 'John' };
+console.log(Object.isExtensible(obj)); // true
+
+Object.preventExtensions(obj);
+console.log(Object.isExtensible(obj)); // false
+```
+
+### 用例
+
+* **不可变对象结构**：当您希望确保对象的结构保持不变时，可以使用 `Object.preventExtensions()`。
+* **安全性**：在您希望避免意外或恶意向对象添加属性的情况下，阻止扩展可能很有用。
+
+## 延伸阅读
+
+* [MDN Web 文档：Object.preventExtensions()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions)
+* [MDN Web 文档：Object.isExtensible()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible)
+* [ECMAScript 5 规范](https://www.ecma-international.org/ecma-262/5.1/#sec-15.2.3.10)
diff --git a/questions/what-is-objectseal-for/en-US.langnostic.json b/questions/what-is-objectseal-for/en-US.langnostic.json
new file mode 100644
index 0000000..3abc10f
--- /dev/null
+++ b/questions/what-is-objectseal-for/en-US.langnostic.json
@@ -0,0 +1,56 @@
+{
+  "frontmatter": {
+    "title": "68a2c348"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "d8480c8e",
+        "c24c2894",
+        "2a7816d0",
+        "e396005b",
+        "57b87a82",
+        "eea083fa",
+        "a930a435",
+        "d78264ca",
+        "7cd5becb",
+        "77dc1f43",
+        "9b5019f0",
+        "6e070efe",
+        "6dd3b324",
+        "3709738",
+        "66d14e8c",
+        "2d01636c",
+        "3c810770",
+        "1f4770e5",
+        "db716abf"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "d8480c8e",
+        "c24c2894",
+        "2a7816d0",
+        "e396005b",
+        "57b87a82",
+        "eea083fa",
+        "a930a435",
+        "d78264ca",
+        "7cd5becb",
+        "77dc1f43",
+        "9b5019f0",
+        "6e070efe",
+        "6dd3b324",
+        "3709738",
+        "66d14e8c",
+        "2d01636c",
+        "3c810770",
+        "1f4770e5",
+        "db716abf"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-objectseal-for/zh-CN.mdx b/questions/what-is-objectseal-for/zh-CN.mdx
new file mode 100644
index 0000000..3857f10
--- /dev/null
+++ b/questions/what-is-objectseal-for/zh-CN.mdx
@@ -0,0 +1,83 @@
+---
+title: 什么是 `Object.seal()`？
+---
+
+## 总结
+
+`Object.seal()` 用于防止向对象添加新属性，并将所有现有属性标记为不可配置。这意味着您仍然可以修改现有属性的值，但不能删除它们或添加新属性。这样做会在严格模式下抛出错误，但在非严格模式下会静默失败。在以下示例中，您可以取消注释 'use strict' 注释以查看此情况。
+
+```js live
+// 'use strict'
+
+const obj = { name: 'John' };
+Object.seal(obj);
+
+obj.name = 'Jane'; // 允许
+obj.age = 30; // 不允许，在严格模式下抛出错误
+delete obj.name; // 不允许，在严格模式下抛出错误
+
+console.log(obj); // { name: 'Jane } (未更改)
+```
+
+***
+
+## 什么是 `Object.seal()`？
+
+`Object.seal()` 是 JavaScript 中的一个方法，用于密封一个对象，防止向其添加新属性，并将所有现有属性标记为不可配置。这意味着虽然您仍然可以修改现有属性的值，但您不能删除它们或添加新属性。
+
+### 语法
+
+```js
+Object.seal(obj);
+```
+
+* `obj`：要密封的对象。
+
+### 行为
+
+1. **防止新属性**：一旦对象被密封，您就不能向其添加新属性。
+2. **不可配置的属性**：所有现有属性都变为不可配置，这意味着您不能删除它们或更改它们的属性描述符（例如，使它们不可写）。
+3. **可修改的值**：只要现有属性是可写的，您仍然可以更改它们的值。
+
+### 示例
+
+```js live
+// 'use strict'
+
+const person = {
+  name: 'Alice',
+  age: 25,
+};
+
+Object.seal(person);
+
+person.name = 'Bob'; // 允许
+person.age = 30; // 允许
+
+person.gender = 'female'; // 不允许，在严格模式下抛出错误
+delete person.name; // 不允许，在严格模式下抛出错误
+
+console.log(person); // { name: 'Bob', age: 30 } (未更改)
+```
+
+### 用例
+
+* **数据完整性**：确保对象结构保持不变，这在对象表示固定模式的情况下非常有用。
+* **安全性**：防止对对象的意外或恶意修改，尤其是在共享或全局上下文中。
+
+### 检查对象是否被密封
+
+您可以使用 `Object.isSealed()` 方法检查对象是否被密封。
+
+```js live
+const obj = { name: 'John' };
+Object.seal(obj);
+
+console.log(Object.isSealed(obj)); // true
+```
+
+## 延伸阅读
+
+* [MDN Web Docs on Object.seal()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/seal)
+* [MDN Web Docs on Object.isSealed()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed)
+* [JavaScript.info on property flags and descriptors](https://zh.javascript.info/property-descriptors)
diff --git a/questions/what-is-recursion-and-how-is-it-used-in-javascript/en-US.langnostic.json b/questions/what-is-recursion-and-how-is-it-used-in-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..8953472
--- /dev/null
+++ b/questions/what-is-recursion-and-how-is-it-used-in-javascript/en-US.langnostic.json
@@ -0,0 +1,66 @@
+{
+  "frontmatter": {
+    "title": "3415acfd"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "f8a354e7",
+        "dd6bfbb1",
+        "2a7816d0",
+        "f71bd92b",
+        "577bd600",
+        "b6f1cf0a",
+        "f2830112",
+        "d0921512",
+        "25e35290",
+        "2486e3d8",
+        "f7047d85",
+        "9ec2712c",
+        "d7d7f5a4",
+        "d6f9cc4f",
+        "8cb0f0b3",
+        "f7047d85",
+        "bb5db012",
+        "2426fa10",
+        "294c83f9",
+        "7e555b3a",
+        "8dc0d887",
+        "7010e576",
+        "1f4770e5",
+        "931c8614"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "f8a354e7",
+        "dd6bfbb1",
+        "2a7816d0",
+        "f71bd92b",
+        "577bd600",
+        "b6f1cf0a",
+        "f2830112",
+        "d0921512",
+        "25e35290",
+        "2486e3d8",
+        "f7047d85",
+        "9ec2712c",
+        "d7d7f5a4",
+        "d6f9cc4f",
+        "8cb0f0b3",
+        "f7047d85",
+        "bb5db012",
+        "2426fa10",
+        "294c83f9",
+        "7e555b3a",
+        "8dc0d887",
+        "7010e576",
+        "1f4770e5",
+        "931c8614"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-recursion-and-how-is-it-used-in-javascript/zh-CN.mdx b/questions/what-is-recursion-and-how-is-it-used-in-javascript/zh-CN.mdx
new file mode 100644
index 0000000..d2ba0ff
--- /dev/null
+++ b/questions/what-is-recursion-and-how-is-it-used-in-javascript/zh-CN.mdx
@@ -0,0 +1,103 @@
+---
+title: 什么是递归以及它在 JavaScript 中如何使用？
+---
+
+## TL;DR
+
+递归是一种编程技术，其中一个函数调用自身来解决问题。在 JavaScript 中，递归用于解决可以分解为更小、相似的子问题的问题。基本情况对于停止递归调用和防止无限循环至关重要。例如，可以使用递归计算一个数的阶乘：
+
+```js live
+function factorial(n) {
+  if (n === 0) {
+    return 1;
+  }
+  return n * factorial(n - 1);
+}
+
+console.log(factorial(4)); // Output: 24
+```
+
+***
+
+## 什么是递归以及它在 JavaScript 中如何使用？
+
+### 递归的定义
+
+递归是一种编程技术，其中一个函数调用自身来解决问题。这种方法对于可以分解为更小、相似的子问题的问题特别有用。递归函数的主要组成部分是：
+
+* **基本情况**：函数停止调用自身的条件，防止无限循环。
+* **递归情况**：函数调用自身并使用修改后的参数的部分，向基本情况移动。
+
+### 示例：计算阶乘
+
+一个数 `n` 的阶乘（表示为 `n!`）是所有小于或等于 `n` 的正整数的乘积。它可以递归定义为：
+
+* `0! = 1`（基本情况）
+* `n! = n * (n - 1)!` 对于 `n > 0`（递归情况）
+
+以下是如何在 JavaScript 中实现此功能：
+
+```js live
+function factorial(n) {
+  if (n === 0) {
+    // base case
+    return 1;
+  }
+  return n * factorial(n - 1); // recursive case
+}
+
+console.log(factorial(4)); // Output: 24
+```
+
+### 示例：斐波那契数列
+
+斐波那契数列是递归的另一个经典例子。该数列中的每个数字都是前两个数字的和，通常从 0 和 1 开始。该数列可以递归定义为：
+
+* `fib(0) = 0`（基本情况）
+* `fib(1) = 1`（基本情况）
+* `fib(n) = fib(n - 1) + fib(n - 2)` 对于 `n > 1`（递归情况）
+
+以下是如何在 JavaScript 中实现此功能：
+
+```js live
+function fibonacci(n) {
+  if (n === 0) {
+    // base case
+    return 0;
+  }
+  if (n === 1) {
+    // base case
+    return 1;
+  }
+  return fibonacci(n - 1) + fibonacci(n - 2); // recursive case
+}
+
+console.log(fibonacci(6)); // Output: 8
+```
+
+### 尾递归
+
+尾递归是一种特殊形式的递归，其中递归调用是函数中的最后一个操作。这可以被一些 JavaScript 引擎优化，以提高性能并防止堆栈溢出。这是一个尾递归阶乘函数的示例：
+
+```js live
+function factorial(n, acc = 1) {
+  if (n === 0) {
+    return acc;
+  }
+  return factorial(n - 1, n * acc);
+}
+
+console.log(factorial(4)); // Output: 24
+```
+
+### 递归的用例
+
+* **树遍历**：递归常用于遍历树结构，例如 DOM 或二叉树。
+* **分治算法**：诸如快速排序和归并排序之类的算法使用递归将问题分解为更小的子问题。
+* **动态规划**：诸如背包问题和某些图算法之类的问题可以使用递归来解决。
+
+## 延伸阅读
+
+* [MDN Web Docs: 递归](https://developer.mozilla.org/zh-CN/docs/Glossary/Recursion)
+* [JavaScript.info: 递归和栈](https://zh.javascript.info/recursion)
+* [Eloquent JavaScript: 递归](https://eloquentjavascript.net/03_functions.html#h_recursion)
diff --git a/questions/what-is-the-command-pattern-and-how-is-it-used/en-US.langnostic.json b/questions/what-is-the-command-pattern-and-how-is-it-used/en-US.langnostic.json
new file mode 100644
index 0000000..4c2657d
--- /dev/null
+++ b/questions/what-is-the-command-pattern-and-how-is-it-used/en-US.langnostic.json
@@ -0,0 +1,46 @@
+{
+  "frontmatter": {
+    "title": "773666df"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "aeec3705",
+        "2c945c94",
+        "2a7816d0",
+        "b0fbedf5",
+        "25841bc3",
+        "e6b0392c",
+        "eb32a928",
+        "4a4ea3d5",
+        "30fcf78",
+        "5205b570",
+        "6dd3b324",
+        "bf9b4501",
+        "1f4770e5",
+        "4537eebb"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "aeec3705",
+        "2c945c94",
+        "2a7816d0",
+        "b0fbedf5",
+        "25841bc3",
+        "e6b0392c",
+        "eb32a928",
+        "4a4ea3d5",
+        "30fcf78",
+        "5205b570",
+        "6dd3b324",
+        "bf9b4501",
+        "1f4770e5",
+        "4537eebb"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-command-pattern-and-how-is-it-used/zh-CN.mdx b/questions/what-is-the-command-pattern-and-how-is-it-used/zh-CN.mdx
new file mode 100644
index 0000000..f48d044
--- /dev/null
+++ b/questions/what-is-the-command-pattern-and-how-is-it-used/zh-CN.mdx
@@ -0,0 +1,149 @@
+---
+title: 什么是命令模式以及如何使用它？
+---
+
+## TL;DR
+
+命令模式是一种行为型设计模式，它将请求转化为一个独立的包含关于请求所有信息的对象。这种转换允许使用不同的请求对方法进行参数化、请求排队和请求日志记录。它还支持可撤销操作。在 JavaScript 中，可以通过创建具有 `execute` 和 `undo` 方法的命令对象来实现。
+
+```js live
+class Command {
+  execute() {}
+  undo() {}
+}
+
+class LightOnCommand extends Command {
+  constructor(light) {
+    super();
+    this.light = light;
+  }
+  execute() {
+    this.light.on();
+  }
+  undo() {
+    this.light.off();
+  }
+}
+
+class Light {
+  on() {
+    console.log('Light is on');
+  }
+  off() {
+    console.log('Light is off');
+  }
+}
+
+const light = new Light();
+const lightOnCommand = new LightOnCommand(light);
+lightOnCommand.execute(); // Light is on
+lightOnCommand.undo(); // Light is off
+```
+
+***
+
+## 什么是命令模式以及如何使用它？
+
+### 定义
+
+命令模式是一种行为型设计模式，它将请求封装成一个对象，从而允许使用队列、请求和操作对客户端进行参数化。它还支持可撤销操作。
+
+### 组件
+
+1. **Command**：声明用于执行操作的接口。
+2. **ConcreteCommand**：通过在 `Receiver` 上调用相应的操作来实现 `execute` 方法。
+3. **Receiver**：知道如何执行与执行请求相关的操作。
+4. **Invoker**：要求命令执行请求。
+5. **Client**：创建一个 `ConcreteCommand` 对象并设置其接收者。
+
+### 在 JavaScript 中的实现
+
+```js live
+// Step 1: Define the Command interface
+
+class Command {
+  execute() {}
+  undo() {}
+}
+
+// Step 2: Create ConcreteCommand classes
+
+class LightOnCommand extends Command {
+  constructor(light) {
+    super();
+    this.light = light;
+  }
+  execute() {
+    this.light.on();
+  }
+  undo() {
+    this.light.off();
+  }
+}
+
+class LightOffCommand extends Command {
+  constructor(light) {
+    super();
+    this.light = light;
+  }
+  execute() {
+    this.light.off();
+  }
+  undo() {
+    this.light.on();
+  }
+}
+
+// Step 3: Define the Receiver
+
+class Light {
+  on() {
+    console.log('Light is on');
+  }
+  off() {
+    console.log('Light is off');
+  }
+}
+
+// Step 4: Create the Invoker
+
+class RemoteControl {
+  setCommand(command) {
+    this.command = command;
+  }
+  pressButton() {
+    this.command.execute();
+  }
+  pressUndo() {
+    this.command.undo();
+  }
+}
+
+// Step 5: Client code
+
+const light = new Light();
+const lightOnCommand = new LightOnCommand(light);
+const lightOffCommand = new LightOffCommand(light);
+
+const remote = new RemoteControl();
+remote.setCommand(lightOnCommand);
+remote.pressButton(); // Light is on
+remote.pressUndo(); // Light is off
+
+remote.setCommand(lightOffCommand);
+remote.pressButton(); // Light is off
+remote.pressUndo(); // Light is on
+```
+
+### 用例
+
+* **撤销/重做功能**：命令模式是实现撤销和重做操作的理想选择。
+* **宏命令**：它可用于实现一系列命令。
+* **记录更改**：它有助于记录更改并稍后进行审计。
+* **GUI 按钮和菜单项**：它对于实现由 GUI 元素触发的操作很有用。
+
+## 延伸阅读
+
+* [Refactoring Guru: Command Pattern](https://refactoring.guru/design-patterns/command)
+* [JavaScript Design Patterns: Command](https://www.dofactory.com/javascript/design-patterns/command)
+* [MDN Web Docs: Command Pattern](https://developer.mozilla.org/en-US/docs/Glossary/Command_pattern)
diff --git a/questions/what-is-the-decorator-pattern-and-how-is-it-used/en-US.langnostic.json b/questions/what-is-the-decorator-pattern-and-how-is-it-used/en-US.langnostic.json
new file mode 100644
index 0000000..012e884
--- /dev/null
+++ b/questions/what-is-the-decorator-pattern-and-how-is-it-used/en-US.langnostic.json
@@ -0,0 +1,62 @@
+{
+  "frontmatter": {
+    "title": "306f38eb"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "39f41f1e",
+        "775fc2cc",
+        "a43ec72e",
+        "2a7816d0",
+        "eb40dd52",
+        "25841bc3",
+        "24adf477",
+        "6dd3b324",
+        "adff366c",
+        "30fcf78",
+        "5448b0df",
+        "d8ee2797",
+        "8984aa69",
+        "3bc60c64",
+        "697c9777",
+        "4d76b730",
+        "852195c",
+        "af89cf01",
+        "82c3077",
+        "9f3eeda4",
+        "1f4770e5",
+        "84539399"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "39f41f1e",
+        "775fc2cc",
+        "a43ec72e",
+        "2a7816d0",
+        "eb40dd52",
+        "25841bc3",
+        "24adf477",
+        "6dd3b324",
+        "adff366c",
+        "30fcf78",
+        "5448b0df",
+        "d8ee2797",
+        "8984aa69",
+        "3bc60c64",
+        "697c9777",
+        "4d76b730",
+        "852195c",
+        "af89cf01",
+        "82c3077",
+        "9f3eeda4",
+        "1f4770e5",
+        "84539399"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-decorator-pattern-and-how-is-it-used/zh-CN.mdx b/questions/what-is-the-decorator-pattern-and-how-is-it-used/zh-CN.mdx
new file mode 100644
index 0000000..f1d224a
--- /dev/null
+++ b/questions/what-is-the-decorator-pattern-and-how-is-it-used/zh-CN.mdx
@@ -0,0 +1,140 @@
+---
+title: 什么是装饰器模式以及如何使用它？
+---
+
+## TL;DR
+
+装饰器模式是一种结构型设计模式，它允许将行为动态地添加到单个对象中，而不会影响来自同一类的其他对象的行为。它用于通过用附加行为包装对象来扩展对象的功能。在 JavaScript 中，这可以使用高阶函数或类来实现。
+
+例如，如果您有一个 `Car` 类，并且您想添加 `GPS` 或 `Sunroof` 等功能，而无需修改 `Car` 类本身，您可以为这些功能创建装饰器。
+
+```js live
+class Car {
+  drive() {
+    return 'Driving';
+  }
+}
+
+class CarDecorator {
+  constructor(car) {
+    this.car = car;
+  }
+
+  drive() {
+    return this.car.drive();
+  }
+}
+
+class GPSDecorator extends CarDecorator {
+  drive() {
+    return `${super.drive()} with GPS`;
+  }
+}
+
+const myCar = new Car();
+const myCarWithGPS = new GPSDecorator(myCar);
+console.log(myCarWithGPS.drive()); // "Driving with GPS"
+```
+
+***
+
+## 什么是装饰器模式以及如何使用它？
+
+### 定义
+
+装饰器模式是一种结构型设计模式，它允许您动态地向对象添加行为和责任，而无需修改其代码。此模式创建一组用于包装具体组件的装饰器类。
+
+### 用例
+
+* **添加功能**: 当您需要向对象添加功能而不更改其结构时。
+* **灵活且可重用的代码**: 当您希望通过组合行为来创建灵活且可重用的代码时。
+* **单一责任原则**: 当您希望通过将功能划分为不同的类来遵守单一责任原则时。
+
+### 在 JavaScript 中的实现
+
+#### 使用类
+
+在 JavaScript 中，可以使用类来实现装饰器模式。 这是一个例子：
+
+```js live
+class Car {
+  drive() {
+    return 'Driving';
+  }
+}
+
+class CarDecorator {
+  constructor(car) {
+    this.car = car;
+  }
+
+  drive() {
+    return this.car.drive();
+  }
+}
+
+class GPSDecorator extends CarDecorator {
+  drive() {
+    return `${super.drive()} with GPS`;
+  }
+}
+
+class SunroofDecorator extends CarDecorator {
+  drive() {
+    return `${super.drive()} with Sunroof`;
+  }
+}
+
+const myCar = new Car();
+const myCarWithGPS = new GPSDecorator(myCar);
+const myCarWithGPSAndSunroof = new SunroofDecorator(myCarWithGPS);
+
+console.log(myCarWithGPSAndSunroof.drive()); // "Driving with GPS with Sunroof"
+```
+
+#### 使用高阶函数
+
+在 JavaScript 中实现装饰器模式的另一种方法是使用高阶函数：
+
+```js live
+function car() {
+  return {
+    drive: () => 'Driving',
+  };
+}
+
+function gpsDecorator(car) {
+  return {
+    drive: () => `${car.drive()} with GPS`,
+  };
+}
+
+function sunroofDecorator(car) {
+  return {
+    drive: () => `${car.drive()} with Sunroof`,
+  };
+}
+
+let myCar = car();
+myCar = gpsDecorator(myCar);
+myCar = sunroofDecorator(myCar);
+
+console.log(myCar.drive()); // "Driving with GPS with Sunroof"
+```
+
+### 优点
+
+* **开闭原则**：类对扩展开放，对修改关闭。
+* **灵活**：允许动态组合行为。
+* **可重用**：装饰器可以在不同的对象之间重用。
+
+### 缺点
+
+* **复杂性**：可能导致大量的小类或函数。
+* **调试**：由于增加了抽象层，可能更难调试。
+
+## 延伸阅读
+
+* [维基百科上的装饰器模式](https://en.wikipedia.org/wiki/Decorator_pattern)
+* [MDN Web Docs：装饰器](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#class_decorators)
+* [Refactoring Guru：装饰器模式](https://refactoring.guru/design-patterns/decorator)
diff --git a/questions/what-is-the-definition-of-a-higher-order-function/en-US.langnostic.json b/questions/what-is-the-definition-of-a-higher-order-function/en-US.langnostic.json
new file mode 100644
index 0000000..4ecea0e
--- /dev/null
+++ b/questions/what-is-the-definition-of-a-higher-order-function/en-US.langnostic.json
@@ -0,0 +1,74 @@
+{
+  "frontmatter": {
+    "title": "538c201d"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "e2f1480c",
+        "252cf2d4",
+        "91b30ab8",
+        "3d9ba8e",
+        "9285ca78",
+        "dc4af68b",
+        "2a7816d0",
+        "e5905283",
+        "1c8275d1",
+        "d5c9d2f",
+        "1fea7ba6",
+        "2d5f215d",
+        "8d920541",
+        "349ff728",
+        "6699d554",
+        "e0446ef0",
+        "779d3f45",
+        "d2d23896",
+        "7698af58",
+        "d23713ca",
+        "f6aaa6a2",
+        "5f7469d0",
+        "527eef15",
+        "1604dd98",
+        "17095e66",
+        "6eab352a",
+        "1f4770e5",
+        "fa5c2d6a"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "e2f1480c",
+        "252cf2d4",
+        "91b30ab8",
+        "3d9ba8e",
+        "9285ca78",
+        "dc4af68b",
+        "2a7816d0",
+        "e5905283",
+        "1c8275d1",
+        "d5c9d2f",
+        "1fea7ba6",
+        "2d5f215d",
+        "8d920541",
+        "349ff728",
+        "6699d554",
+        "e0446ef0",
+        "779d3f45",
+        "d2d23896",
+        "7698af58",
+        "d23713ca",
+        "f6aaa6a2",
+        "5f7469d0",
+        "527eef15",
+        "1604dd98",
+        "17095e66",
+        "6eab352a",
+        "1f4770e5",
+        "fa5c2d6a"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-definition-of-a-higher-order-function/zh-CN.mdx b/questions/what-is-the-definition-of-a-higher-order-function/zh-CN.mdx
index a6791fd..f0c1057 100644
--- a/questions/what-is-the-definition-of-a-higher-order-function/zh-CN.mdx
+++ b/questions/what-is-the-definition-of-a-higher-order-function/zh-CN.mdx
@@ -1,35 +1,159 @@
 ---
-title: 高阶函数的定义是什么？
+title: JavaScript 中高阶函数的定义是什么？
 ---
 
-一个函数在两种情况下可以是高阶函数：一种是将一个或多个函数作为输入参数，用这些参数来操作数据；另一种是直接返回一个函数作为结果。 高阶函数是为了抽象出一些重复执行的操作。 典型的例子是 `map`，它以数组和函数作为参数。 `map`然后使用这个函数来转换数组中的每一项，返回一个带有转换后数据的新数组。 JavaScript 中的其他流行的例子是`forEach`、`filter`和`reduce`。 一个高阶函数并不只是需要操作数组，因为从另一个函数返回一个函数有很多方案。 `Function.prototype.bind`是 JavaScript 中的一个例子。
+## TL;DR
 
-## Map
+高阶函数是指将一个或多个函数作为参数的函数，它使用这些函数对某些数据进行操作，和/或返回一个函数作为结果。
 
-假设我们有一个包涵名字的数组，我们需要将每个字符串转换为大写字母。
+高阶函数旨在抽象一些重复执行的操作。 典型的例子是 `Array.prototype.map()`，它接受一个数组和一个函数作为参数。 然后，`Array.prototype.map()` 使用此函数转换数组中的每个项目，返回一个包含转换后的数据的新数组。 JavaScript 中其他常见的例子是 `Array.prototype.forEach()`、`Array.prototype.filter()` 和 `Array.prototype.reduce()`。 高阶函数不仅仅需要操作数组，因为从另一个函数返回一个函数有很多用例。 `Function.prototype.bind()` 就是一个返回另一个函数的例子。
 
-```js
-const names = ['irish', 'daisy', 'anna'];
-```
+想象一下，我们有一个需要转换为大写的名称数组。 命令式方法如下：
 
-当务之急是这样做：
+```js live
+const names = ['irish', 'daisy', 'anna'];
 
-```js
-const transformNamesToUppercase = function (names) {
+function transformNamesToUppercase(names) {
   const results = [];
   for (let i = 0; i < names.length; i++) {
     results.push(names[i].toUpperCase());
   }
   return results;
-};
-transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
+}
+
+console.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']
 ```
 
-使用 `.map(transformerFn)` 让代码更短，更多地声明代码。
+使用 `Array.prototype.map(transformerFn)` 使代码更短、更具声明性。
 
-```js
-const transformNamesToUppercase = function (names) {
+```js live
+const names = ['irish', 'daisy', 'anna'];
+
+function transformNamesToUppercase(names) {
   return names.map((name) => name.toUpperCase());
-};
-transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
+}
+
+console.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']
+```
+
+***
+
+## 高阶函数
+
+高阶函数是一个将另一个函数作为参数或返回一个函数作为其结果的函数。
+
+### 函数作为参数
+
+高阶函数可以将另一个函数作为参数并执行它。
+
+```js live
+function greet(name) {
+  return `Hello, ${name}!`;
+}
+
+function greetName(greeter, name) {
+  console.log(greeter(name));
+}
+
+greetName(greet, 'Alice'); // Output: Hello, Alice!
+```
+
+在此示例中，`greetName` 函数将另一个函数 `greet` 作为参数，并使用名称 `Alice` 执行它。 `greet` 函数是一个高阶函数，因为它作为参数传递给另一个函数。
+
+### 函数作为返回值
+
+高阶函数可以返回另一个函数。
+
+```js live
+function multiplier(factor) {
+  return function (num) {
+    return num * factor;
+  };
+}
+
+const double = multiplier(2);
+const triple = multiplier(3);
+
+console.log(double(5)); // Output: 10
+console.log(triple(5)); // Output: 15
 ```
+
+在此示例中，`multiplier` 函数返回一个新函数，该函数将任何数字乘以指定的因子。 返回的函数是一个闭包，它记住外部函数中的 `factor` 值。 `multiplier` 函数是一个高阶函数，因为它返回另一个函数。
+
+### 实际例子
+
+1. **日志装饰器**：一个高阶函数，它向另一个函数添加日志记录功能：
+
+```js live
+function withLogging(fn) {
+  return function (...args) {
+    console.log(`Calling ${fn.name} with arguments`, args);
+    return fn.apply(this, args);
+  };
+}
+
+function add(a, b) {
+  return a + b;
+}
+
+const loggedAdd = withLogging(add);
+console.log(loggedAdd(2, 3));
+// Output:
+// Calling add with arguments [2, 3]
+// 5
+```
+
+`withLogging` 函数是一个高阶函数，它接受一个函数 fn 作为参数，并返回一个新函数，该函数在执行原始函数之前记录函数调用
+
+2. **记忆化**：一个高阶函数，它缓存函数的计算结果以避免冗余计算：
+
+```js live
+function memoize(fn) {
+  const cache = new Map();
+  return function (...args) {
+    const key = JSON.stringify(args);
+    if (cache.has(key)) {
+      return cache.get(key);
+    }
+    const result = fn.apply(this, args);
+    cache.set(key, result);
+    return result;
+  };
+}
+
+function fibonacci(n) {
+  if (n <= 1) return n;
+  return fibonacci(n - 1) + fibonacci(n - 2);
+}
+
+const memoizedFibonacci = memoize(fibonacci);
+console.log(memoizedFibonacci(10)); // Output: 55
+```
+
+`memoize` 函数是一个高阶函数，它接受一个函数 `fn` 作为参数，并返回一个新函数，该函数根据原始函数的参数缓存其结果。
+
+1. **Lodash**：Lodash 是一个实用程序库，它提供了广泛的函数，用于处理数组、对象、字符串等，其中大多数是高阶函数。
+
+```js
+import _ from 'lodash';
+
+const numbers = [1, 2, 3, 4, 5];
+
+// Filter array
+const evenNumbers = _.filter(numbers, (n) => n % 2 === 0); // [2, 4]
+
+// Map array
+const doubledNumbers = _.map(numbers, (n) => n * 2); // [2, 4, 6, 8, 10]
+
+// Find the maximum value
+const maxValue = _.max(numbers); // 5
+
+// Sum all values
+const sum = _.sum(numbers); // 15
+```
+
+## 延伸阅读
+
+* [高阶函数](https://eloquentjavascript.net/05_higher_order.html)
+* [理解 JavaScript 中的高阶函数](https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad)
+* [高阶函数：如何使用 Filter、Map 和 Reduce 来获得更易于维护的代码](https://www.freecodecamp.org/news/higher-order-functions-in-javascript-d9101f9cf528/)
diff --git a/questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.langnostic.json b/questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.langnostic.json
new file mode 100644
index 0000000..841b140
--- /dev/null
+++ b/questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.langnostic.json
@@ -0,0 +1,66 @@
+{
+  "frontmatter": {
+    "title": "18c1cb80"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "fbb7b48d",
+        "3383d41f",
+        "2a7816d0",
+        "f5e5b7e3",
+        "989ab262",
+        "c249d17a",
+        "a89e0135",
+        "9f785c25",
+        "4c08665",
+        "dc494df1",
+        "6698593c",
+        "657a3b69",
+        "8fea578c",
+        "54d39bdf",
+        "4f31d776",
+        "170fb4bf",
+        "9d306db",
+        "4eb2474e",
+        "691e343b",
+        "968fb34d",
+        "add698fb",
+        "2b09d32e",
+        "1f4770e5",
+        "36ed4d00"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "fbb7b48d",
+        "3383d41f",
+        "2a7816d0",
+        "f5e5b7e3",
+        "989ab262",
+        "c249d17a",
+        "a89e0135",
+        "9f785c25",
+        "4c08665",
+        "dc494df1",
+        "6698593c",
+        "657a3b69",
+        "8fea578c",
+        "54d39bdf",
+        "4f31d776",
+        "170fb4bf",
+        "9d306db",
+        "4eb2474e",
+        "691e343b",
+        "968fb34d",
+        "add698fb",
+        "2b09d32e",
+        "1f4770e5",
+        "36ed4d00"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/zh-CN.mdx b/questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/zh-CN.mdx
new file mode 100644
index 0000000..7445b59
--- /dev/null
+++ b/questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/zh-CN.mdx
@@ -0,0 +1,82 @@
+---
+title: JavaScript 中 `Map` 对象和普通对象有什么区别？
+---
+
+## TL;DR
+
+JavaScript 中的 `Map` 对象和普通对象都可以存储键值对，但它们有几个关键的区别：
+
+| 特性 | `Map` | 普通对象 |
+| --- | --- | --- |
+| 键类型 | 任何数据类型 | 字符串（或 Symbol） |
+| 键顺序 | 保持 | 不保证 |
+| 大小属性 | 是 (`size`) | 无 |
+| 迭代 | `forEach`、`keys()`、`values()`、`entries()` | `for...in`、`Object.keys()` 等 |
+| 继承 | 否 | 是 |
+| 性能 | 通常更适合大型数据集和频繁的添加/删除 | 适用于小型数据集和简单操作 |
+| 可序列化 | 否 | 是 |
+
+***
+
+## `Map` vs 普通 JavaScript 对象
+
+在 JavaScript 中，`Map` 对象和普通对象（也称为“POJO”或“普通旧 JavaScript 对象”）都用于存储键值对，但它们具有不同的特性、用例和行为。
+
+### 普通 JavaScript 对象 (POJO)
+
+普通对象是使用 `{}` 语法创建的基本 JavaScript 对象。它是一个键值对的集合，其中每个键都是一个字符串（或现代 JavaScript 中的符号），每个值可以是任何类型的值，包括字符串、数字、布尔值、数组、对象等。
+
+```js live
+const person = { name: 'John', age: 30, occupation: 'Developer' };
+console.log(person);
+```
+
+### `Map` 对象
+
+在 ECMAScript 2015 (ES6) 中引入的 `Map` 对象是一种更高级的数据结构，它允许您存储具有附加功能的键值对。`Map` 是可迭代的，这意味着您可以在 `for...of` 循环中使用它，并且它提供了用于常见操作（如 `get`、`set`、`has` 和 `delete`）的方法。
+
+```js live
+const person = new Map([
+  ['name', 'John'],
+  ['age', 30],
+  ['occupation', 'Developer'],
+]);
+console.log(person);
+```
+
+## 关键区别
+
+以下是 `Map` 对象和普通对象之间的主要区别：
+
+1. **键类型**：在普通对象中，键始终是字符串（或符号）。在 `Map` 中，键可以是任何类型的值，包括对象、数组，甚至其他 `Map`。
+2. **键顺序**：在普通对象中，键的顺序不保证。在 `Map` 中，键的顺序被保留，您可以按照它们插入的顺序进行迭代。
+3. **迭代**：`Map` 是可迭代的，这意味着您可以使用 `for...of` 循环来迭代其键值对。默认情况下，普通对象不可迭代，但您可以使用 `Object.keys()` 或 `Object.entries()` 来迭代其属性。
+4. **性能**：`Map` 对象通常比普通对象更快、更高效，尤其是在处理大型数据集时。
+5. **方法**：`Map` 对象提供了其他方法，例如 `get`、`set`、`has` 和 `delete`，这使得处理键值对更容易。
+6. **序列化**：将 `Map` 对象序列化为 JSON 时，它将被转换为一个对象，但现有的 `Map` 属性可能会在转换过程中丢失。另一方面，普通对象被序列化为具有相同结构的 JSON 对象。
+
+## 何时使用哪个
+
+当您需要时使用普通对象 (POJO)：
+
+* 您需要一个具有字符串键的简单、轻量级对象。
+* 您正在处理小型数据集。
+* 您需要将对象序列化为 JSON（例如，通过网络发送）。
+
+当您需要时使用 `Map` 对象：
+
+* 您需要使用非字符串键（例如对象、数组）存储键值对。
+* 您需要保留键值对的顺序。
+* 您需要按特定顺序迭代键值对。
+* 您正在处理大型数据集，需要更好的性能。
+
+总而言之，虽然普通对象和 `Map` 对象都可以用来存储键值对，但 `Map` 对象提供了更高级的功能、更好的性能和额外的方法，使其成为更复杂用例的更好选择。
+
+## 注意事项
+
+`Map` 对象无法被序列化以在 HTTP 请求中发送，但像 [superjson](https://github.com/blitz-js/superjson) 这样的库允许它们被序列化和反序列化。
+
+## 延伸阅读
+
+* [Map - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
+* [Object - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
diff --git a/questions/what-is-the-difference-between-a-parameter-and-an-argument/en-US.langnostic.json b/questions/what-is-the-difference-between-a-parameter-and-an-argument/en-US.langnostic.json
new file mode 100644
index 0000000..fc167ce
--- /dev/null
+++ b/questions/what-is-the-difference-between-a-parameter-and-an-argument/en-US.langnostic.json
@@ -0,0 +1,56 @@
+{
+  "frontmatter": {
+    "title": "e2609fb"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "297cddc8",
+        "2a7816d0",
+        "2e21371",
+        "7004ebec",
+        "9d4fabcb",
+        "e76b9a8",
+        "c47cc2d0",
+        "f65e2ec9",
+        "663d45fa",
+        "f0c40a6a",
+        "e76b9a8",
+        "19d3ff59",
+        "d5926284",
+        "67423e0a",
+        "a997c350",
+        "b05beef9",
+        "7c6bff94",
+        "1f4770e5",
+        "3706ac88"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "297cddc8",
+        "2a7816d0",
+        "2e21371",
+        "7004ebec",
+        "9d4fabcb",
+        "e76b9a8",
+        "c47cc2d0",
+        "f65e2ec9",
+        "663d45fa",
+        "f0c40a6a",
+        "e76b9a8",
+        "19d3ff59",
+        "d5926284",
+        "67423e0a",
+        "a997c350",
+        "b05beef9",
+        "7c6bff94",
+        "1f4770e5",
+        "3706ac88"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-difference-between-a-parameter-and-an-argument/zh-CN.mdx b/questions/what-is-the-difference-between-a-parameter-and-an-argument/zh-CN.mdx
new file mode 100644
index 0000000..3e5b9d9
--- /dev/null
+++ b/questions/what-is-the-difference-between-a-parameter-and-an-argument/zh-CN.mdx
@@ -0,0 +1,63 @@
+---
+title: 参数和参数的区别是什么？
+---
+
+## TL;DR
+
+参数是函数声明中的变量，而参数是调用函数时传递给函数的实际值。例如，在函数 `function add(a, b) { return a + b; }` 中，`a` 和 `b` 是参数。当您调用 `add(2, 3)` 时，`2` 和 `3` 是参数。
+
+***
+
+## 参数和参数的区别
+
+### 参数
+
+参数是作为函数定义的一部分列出的变量。它们充当在调用函数时将传递给函数的值的占位符。
+
+示例：
+
+```js
+function greet(name) {
+  console.log('Hello, ' + name);
+}
+```
+
+在此示例中，`name` 是一个参数。
+
+### 参数
+
+参数是调用函数时传递给函数的实际值。这些值被分配给函数定义中相应的参数。
+
+示例：
+
+```js live
+function greet(name) {
+  console.log('Hello, ' + name);
+}
+greet('Alice'); // Output: "Hello, Alice"
+```
+
+在此示例中，`"Alice"` 是一个参数。
+
+### 主要区别
+
+* 参数是函数签名的一部分，而参数是提供给函数的实际值。
+* 参数用于定义函数，而参数用于调用函数。
+
+### 结合两者的例子
+
+```js live
+function add(a, b) {
+  // a and b are parameters
+  return a + b;
+}
+
+const result = add(2, 3); // 2 and 3 are arguments
+console.log(result); // Output: 5
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions)
+* [JavaScript.info: Function basics](https://javascript.info/function-basics)
+* [W3Schools: JavaScript Function Parameters](https://www.w3schools.com/js/js_function_parameters.asp)
diff --git a/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.langnostic.json b/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.langnostic.json
new file mode 100644
index 0000000..6d145b2
--- /dev/null
+++ b/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.langnostic.json
@@ -0,0 +1,66 @@
+{
+  "frontmatter": {
+    "title": "fabb8486"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "92e96c24",
+        "d6b48599",
+        "2a7816d0",
+        "28b218c7",
+        "a4cd1620",
+        "3789e3d9",
+        "8208c153",
+        "a95d9bcb",
+        "ec404585",
+        "8f2c02f1",
+        "e22c0b95",
+        "c61f0bed",
+        "bf740616",
+        "b3ecb149",
+        "eea0fdee",
+        "adead66c",
+        "a90cc1eb",
+        "26f7b6ac",
+        "e1468f22",
+        "ec4a5a01",
+        "40808d83",
+        "6f62bec8",
+        "79360ef1",
+        "1dac807a"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "92e96c24",
+        "d6b48599",
+        "2a7816d0",
+        "28b218c7",
+        "a4cd1620",
+        "3789e3d9",
+        "8208c153",
+        "a95d9bcb",
+        "ec404585",
+        "8f2c02f1",
+        "e22c0b95",
+        "c61f0bed",
+        "bf740616",
+        "b3ecb149",
+        "eea0fdee",
+        "adead66c",
+        "a90cc1eb",
+        "26f7b6ac",
+        "e1468f22",
+        "ec4a5a01",
+        "40808d83",
+        "6f62bec8",
+        "79360ef1",
+        "1dac807a"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.mdx b/questions/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.mdx
index 3069e3e..37f62d6 100644
--- a/questions/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.mdx
+++ b/questions/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.mdx
@@ -1,22 +1,91 @@
 ---
-title: '`==` 和 `===`之间有什么区别？'
+title: JavaScript 中 `==` 和 `===` 的区别是什么？
 ---
 
-`==`是抽象的平等运算符，而`===`是严格的平等运算符。 `==`运算符会在做完任何必要的类型转换后进行平等性比较。 `===`运算符不会输入转换，所以如果两个值不是同一类型， `===`则只会返回 `false`。 当使用 `==`时，有趣的事情可能会发生，例如：
+## TL;DR
 
-```js
-1 == '1'; // true
-1 == [1]; // true
-1 == true; // true
-0 == ''; // true
-0 == '0'; // true
-0 == false; // true
+`==` 是抽象相等运算符，而 `===` 是严格相等运算符。`==` 运算符会在进行任何必要的类型转换后比较是否相等。`===` 运算符不会进行类型转换，因此如果两个值不是同一类型，`===` 将直接返回 `false`。
+
+| 运算符 | `==` | `===` |
+| --- | --- | --- |
+| 名称 | （宽松）相等运算符 | 严格相等运算符 |
+| 类型转换 | 是 | 否 |
+| 比较值和类型 | 否 | 是 |
+
+***
+
+### 相等运算符 (`==`)
+
+`==` 运算符检查两个值是否相等，但如果这些值的类型不同，则会执行类型转换。这意味着 JavaScript 将尝试在进行比较之前将这些值转换为通用类型。
+
+```js live
+console.log(42 == '42'); // true
+console.log(0 == false); // true
+console.log(null == undefined); // true
+console.log([] == false); // true
+console.log('' == false); // true
 ```
 
-作为一般的经验法则，永远不要使用`==`运算符，除了在与`空'或`未定义'比较时方便使用，如果`a`是`null`或`undefined`，`a == null`将返回\`true'。
+在这些示例中，JavaScript 在进行比较之前将操作数转换为相同的类型。例如，`42 == '42'` 为 true，因为字符串 `'42'` 在比较之前被转换为数字 `42`。
+
+但是，当使用 `==` 时，可能会发生不直观的结果：
 
-```js
+```js live
+console.log(1 == [1]); // true
+console.log(0 == ''); // true
+console.log(0 == '0'); // true
+console.log('' == '0'); // false
+```
+
+作为一般经验法则，永远不要使用 `==` 运算符，除非为了方便与 `null` 或 `undefined` 进行比较，其中 `a == null` 将在 `a` 为 `null` 或 `undefined` 时返回 `true`。
+
+```js live
 var a = null;
 console.log(a == null); // true
 console.log(a == undefined); // true
 ```
+
+### 严格相等运算符 (`===`)
+
+`===` 运算符，也称为严格相等运算符，检查两个值是否相等，而不执行类型转换。这意味着，只有当值和类型都相同时，比较才会返回 true。
+
+```js live
+console.log(42 === '42'); // false
+console.log(0 === false); // false
+console.log(null === undefined); // false
+console.log([] === false); // false
+console.log('' === false); // false
+```
+
+对于这些比较，不执行类型转换，因此如果类型不同，该语句将返回 `false`。例如，`42 === '42'` 为 `false`，因为类型（数字和字符串）不同。
+
+```js live
+// 带有类型转换的比较 (==)
+console.log(42 == '42'); // true
+console.log(0 == false); // true
+console.log(null == undefined); // true
+
+// 不带类型转换的严格比较 (===)
+console.log(42 === '42'); // false
+console.log(0 === false); // false
+console.log(null === undefined); // false
+```
+
+### 额外内容：`Object.is()`
+
+JavaScript 中最后一个值比较操作是 [`Object.is()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 静态方法。`Object.is()` 和 `===` 之间唯一的区别在于它们如何处理带符号的零和 `NaN` 值。`===` 运算符（和 `==` 运算符）将数字值 `-0` 和 `+0` 视为相等，但将 `NaN` 视为彼此不相等。
+
+## 结论
+
+* 当您希望使用类型强制转换比较值时使用 `==`（并了解其含义）。实际上，等号运算符的唯一有效用例是针对 `null` 和 `undefined` 以方便使用。
+* 当您希望确保值和类型都相同时使用 `===`，这在大多数情况下是更安全、更可预测的选择。
+
+### 笔记
+
+* 建议使用 `===`（严格相等）以避免类型强制转换的缺陷，这可能导致代码中出现意外行为和错误。它使您的比较意图更清晰，并确保您同时比较值和类型。
+* ESLint 的 [`eqeqeq`](https://eslint.org/docs/latest/rules/eqeqeq) 规则强制使用严格相等运算符 `===` 和 `!==`，甚至提供了一个选项，始终强制使用严格相等，除非与 `null` 字面量进行比较。
+
+### 延伸阅读
+
+* [Equality (==) | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Equality)
+* [Strict equality (===) | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Strict_equality)
diff --git a/questions/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/en-US.langnostic.json b/questions/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/en-US.langnostic.json
new file mode 100644
index 0000000..10f3ffd
--- /dev/null
+++ b/questions/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/en-US.langnostic.json
@@ -0,0 +1,48 @@
+{
+  "frontmatter": {
+    "title": "8e3a1486"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "3a1cd423",
+        "2a7816d0",
+        "95bc1126",
+        "e8f9c722",
+        "d76b64b6",
+        "e9ed9cff",
+        "a3b47899",
+        "911913c9",
+        "f083b215",
+        "67423e0a",
+        "9f15ca73",
+        "6dd3b324",
+        "82b755f9",
+        "1f4770e5",
+        "84b5d54e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "3a1cd423",
+        "2a7816d0",
+        "95bc1126",
+        "e8f9c722",
+        "d76b64b6",
+        "e9ed9cff",
+        "a3b47899",
+        "911913c9",
+        "f083b215",
+        "67423e0a",
+        "9f15ca73",
+        "6dd3b324",
+        "82b755f9",
+        "1f4770e5",
+        "84b5d54e"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/zh-CN.mdx b/questions/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/zh-CN.mdx
new file mode 100644
index 0000000..15075ab
--- /dev/null
+++ b/questions/what-is-the-difference-between-eventpreventdefault-and-eventstoppropagation/zh-CN.mdx
@@ -0,0 +1,49 @@
+---
+title: event.preventDefault() 和 event.stopPropagation() 有什么区别？
+---
+
+## TL;DR
+
+<code>event.preventDefault()</code> 用于阻止属于该事件的默认操作，例如阻止表单提交。<code>event.stopPropagation()</code> 用于阻止事件冒泡到父元素，从而阻止任何父事件处理程序被执行。
+
+***
+
+## event.preventDefault() 和 event.stopPropagation() 有什么区别？
+
+### event.preventDefault()
+
+<code>event.preventDefault()</code> 是一种方法，如果事件是可取消的，则取消该事件，这意味着属于该事件的默认操作将不会发生。例如，这可以用于阻止表单提交：
+
+```js
+document.querySelector('form').addEventListener('submit', function (event) {
+  event.preventDefault();
+  // Form submission is prevented
+});
+```
+
+### event.stopPropagation()
+
+<code>event.stopPropagation()</code> 是一种方法，可防止事件在 DOM 树中冒泡，从而阻止任何父处理程序收到该事件的通知。当您希望在特定级别处理事件并且不希望它触发父元素上的处理程序时，这很有用：
+
+```js
+document.querySelector('.child').addEventListener('click', function (event) {
+  event.stopPropagation();
+  // Click event will not propagate to parent elements
+});
+```
+
+### 关键区别
+
+* <code>event.preventDefault()</code> 停止与事件关联的默认操作。
+* <code>event.stopPropagation()</code> 阻止事件传播（冒泡）到父元素。
+
+### 用例
+
+* 当您想阻止元素的默认行为时，请使用 <code>event.preventDefault()</code>，例如阻止链接导航或表单提交。
+* 当您想阻止事件到达父元素时，请使用 <code>event.stopPropagation()</code>，这在多个元素具有事件侦听器的复杂 UI 中很有用。
+
+## 延伸阅读
+
+* [MDN Web 文档：event.preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
+* [MDN Web 文档：event.stopPropagation()](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation)
+* [JavaScript 事件传播](https://javascript.info/bubbling-and-capturing)
diff --git a/questions/what-is-the-difference-between-innerhtml-and-textcontent/en-US.langnostic.json b/questions/what-is-the-difference-between-innerhtml-and-textcontent/en-US.langnostic.json
new file mode 100644
index 0000000..b9c6af8
--- /dev/null
+++ b/questions/what-is-the-difference-between-innerhtml-and-textcontent/en-US.langnostic.json
@@ -0,0 +1,62 @@
+{
+  "frontmatter": {
+    "title": "cf1cdef8"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "497ccde1",
+        "f5ad7c8a",
+        "2a7816d0",
+        "2d138cd",
+        "2390c653",
+        "e463af2c",
+        "748ffe75",
+        "aa1dd641",
+        "f47a7738",
+        "f15ab52",
+        "ea670d32",
+        "e43b4de0",
+        "e0393ea",
+        "95cea882",
+        "748ffe75",
+        "5d45bc88",
+        "f47a7738",
+        "caa2416f",
+        "962c70b5",
+        "71c2cd48",
+        "1f4770e5",
+        "b9a087d"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "497ccde1",
+        "f5ad7c8a",
+        "2a7816d0",
+        "2d138cd",
+        "2390c653",
+        "e463af2c",
+        "748ffe75",
+        "aa1dd641",
+        "f47a7738",
+        "f15ab52",
+        "ea670d32",
+        "e43b4de0",
+        "e0393ea",
+        "95cea882",
+        "748ffe75",
+        "5d45bc88",
+        "f47a7738",
+        "caa2416f",
+        "962c70b5",
+        "71c2cd48",
+        "1f4770e5",
+        "b9a087d"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-difference-between-innerhtml-and-textcontent/zh-CN.mdx b/questions/what-is-the-difference-between-innerhtml-and-textcontent/zh-CN.mdx
new file mode 100644
index 0000000..7233e7e
--- /dev/null
+++ b/questions/what-is-the-difference-between-innerhtml-and-textcontent/zh-CN.mdx
@@ -0,0 +1,65 @@
+---
+title: innerHTML 和 textContent 有什么区别？
+---
+
+## TL;DR
+
+ `innerHTML` 和 `textContent` 都是用于获取或设置 HTML 元素内容的属性，但它们的作用不同。 `innerHTML` 返回或设置元素中包含的 HTML 标记，这意味着它可以解析和呈现 HTML 标签。 另一方面，`textContent` 返回或设置元素的文本内容，忽略任何 HTML 标签并将它们呈现为纯文本。
+
+```js
+// Example of innerHTML
+element.innerHTML = '<strong>Bold Text</strong>'; // Renders as bold text
+
+// Example of textContent
+element.textContent = '<strong>Bold Text</strong>'; // Renders as plain text: <strong>Bold Text</strong>
+```
+
+***
+
+## `innerHTML` 和 `textContent` 的区别
+
+### `innerHTML`
+
+`innerHTML` 是一种属性，允许您获取或设置元素中包含的 HTML 标记。 它可以解析和呈现 HTML 标签，使其可用于动态更新网页的结构。
+
+#### 示例
+
+```js
+const element = document.getElementById('example');
+element.innerHTML = '<strong>Bold Text</strong>'; // This will render as bold text
+```
+
+#### 用例
+
+* 动态添加或更新 HTML 内容
+* 渲染 HTML 标签和元素
+
+#### 安全注意事项
+
+如果插入不受信任的内容，使用 `innerHTML` 可能会使您的应用程序暴露于跨站点脚本 (XSS) 攻击。 在将任何用户输入设置为 `innerHTML` 之前，请务必对其进行清理。
+
+### `textContent`
+
+`textContent` 是一种属性，允许您获取或设置元素的文本内容。 它会忽略任何 HTML 标签并将它们呈现为纯文本，这使得它更安全地插入用户生成的内容。
+
+#### 示例
+
+```js
+const element = document.getElementById('example');
+element.textContent = '<strong>Bold Text</strong>'; // This will render as plain text: <strong>Bold Text</strong>
+```
+
+#### 用例
+
+* 安全地插入用户生成的内容
+* 从字符串中删除 HTML 标签
+
+#### 性能注意事项
+
+`textContent` 通常比 `innerHTML` 快，因为它不会解析和呈现 HTML 标签。 它只是更新元素的文本内容。
+
+## 延伸阅读
+
+* [MDN Web 文档：innerHTML](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML)
+* [MDN Web 文档：textContent](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent)
+* [跨站脚本 (XSS)](https://owasp.org/www-community/attacks/xss/)
diff --git a/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.langnostic.json b/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.langnostic.json
new file mode 100644
index 0000000..4339bfb
--- /dev/null
+++ b/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.langnostic.json
@@ -0,0 +1,54 @@
+{
+  "frontmatter": {
+    "title": "79b293f8"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "2de3e97b",
+        "b5333c4d",
+        "2e253553",
+        "e77b99ec",
+        "2a7816d0",
+        "270f1eda",
+        "15becfee",
+        "33e977c9",
+        "633a235d",
+        "dc50850b",
+        "fa1cfeab",
+        "9b5019f0",
+        "a544941c",
+        "305c5970",
+        "54360c44",
+        "636857ef",
+        "1f4770e5",
+        "1930cce0"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "2de3e97b",
+        "b5333c4d",
+        "2e253553",
+        "e77b99ec",
+        "2a7816d0",
+        "270f1eda",
+        "15becfee",
+        "33e977c9",
+        "633a235d",
+        "dc50850b",
+        "fa1cfeab",
+        "9b5019f0",
+        "a544941c",
+        "305c5970",
+        "54360c44",
+        "636857ef",
+        "1f4770e5",
+        "1930cce0"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/zh-CN.mdx b/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/zh-CN.mdx
new file mode 100644
index 0000000..1738ff2
--- /dev/null
+++ b/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/zh-CN.mdx
@@ -0,0 +1,107 @@
+---
+title: JavaScript 和浏览器中 `mouseenter` 和 `mouseover` 事件有什么区别？
+---
+
+## TL;DR
+
+主要区别在于 `mouseenter` 和 `mouseover` 事件的冒泡行为。`mouseenter` 不冒泡，而 `mouseover` 冒泡。
+
+`mouseenter` 事件不冒泡。`mouseenter` 事件仅在鼠标指针进入元素本身时触发，而不是其后代元素。如果父元素有子元素，并且鼠标指针进入子元素，则不会再次在父元素上触发 `mouseenter` 事件，它仅在进入父元素时触发一次，而不考虑其内容。如果父元素和子元素都附加了 `mouseenter` 侦听器，并且鼠标指针从父元素移动到子元素，则 `mouseenter` 将仅为子元素触发。
+
+`mouseover` 事件会冒泡到 DOM 树。当鼠标指针进入元素或其后代元素之一时，将触发 `mouseover` 事件。如果父元素有子元素，并且鼠标指针进入子元素，则也会再次在父元素上触发 `mouseover` 事件。如果父元素有多个子元素，这可能导致多次触发事件回调。如果存在子元素，并且鼠标指针从父元素移动到子元素，则 `mouseover` 将同时为父元素和子元素触发。
+
+| 属性 | `mouseenter` | `mouseover` |
+| --- | --- | --- |
+| 冒泡 | 否 | 是 |
+| 触发 | 仅在进入自身时 | 进入自身和进入后代时 |
+
+***
+
+### `mouseenter` 事件：
+
+* **不冒泡**：`mouseenter` 事件不冒泡。它仅在鼠标指针进入附加了事件侦听器的元素时触发，而不是进入任何子元素时触发。
+* **触发一次**：当鼠标指针进入元素时，`mouseenter` 事件仅触发一次，这使得它在某些情况下更可预测且更易于管理。
+
+`mouseenter` 的一个用例是，当您希望检测鼠标进入元素而无需担心子元素多次触发事件时。
+
+### `mouseover` 事件：
+
+* **在 DOM 中冒泡**：`mouseover` 事件通过 DOM 冒泡。这意味着，如果您在父元素上有一个事件侦听器，当鼠标指针移动到任何子元素上时，它也会触发。
+* **多次触发**：每次鼠标指针移动到元素或其任何子元素上时，都会触发 `mouseover` 事件。如果您有嵌套元素，这可能导致多次触发。
+
+`mouseover` 的一个用例是，当您希望检测鼠标进入元素或其任何子元素，并且可以接受事件多次触发时。
+
+### 示例
+
+这是一个演示 `mouseover` 和 `mouseenter` 事件之间区别的示例：
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Mouse Events Example</title>
+    <style>
+      .parent {
+        width: 200px;
+        height: 200px;
+        background-color: lightblue;
+        padding: 20px;
+      }
+      .child {
+        width: 100px;
+        height: 100px;
+        background-color: lightcoral;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="parent">
+      Parent Element
+      <div class="child">Child Element</div>
+    </div>
+
+    <script>
+      const parent = document.querySelector('.parent');
+      const child = document.querySelector('.child');
+
+      // Mouseover event on parent.
+      parent.addEventListener('mouseover', () => {
+        console.log('Mouseover on parent');
+      });
+
+      // Mouseenter event on parent.
+      parent.addEventListener('mouseenter', () => {
+        console.log('Mouseenter on parent');
+      });
+
+      // Mouseover event on child.
+      child.addEventListener('mouseover', () => {
+        console.log('Mouseover on child');
+      });
+
+      // Mouseenter event on child.
+      child.addEventListener('mouseenter', () => {
+        console.log('Mouseenter on child');
+      });
+    </script>
+  </body>
+</html>
+```
+
+**预期行为**
+
+* 当鼠标进入父元素时：
+  * 父元素上的 `mouseover` 事件将触发。
+  * 父元素上的 `mouseenter` 事件将触发。
+* 当鼠标进入子元素时：
+  * 父元素上的 `mouseover` 事件将再次触发，因为 `mouseover` 从子元素冒泡。
+  * 子元素上的 `mouseover` 事件将触发。
+  * 子元素上的 `mouseenter` 事件将触发。
+  * 父元素上的 `mouseenter` 事件将**不会**再次触发，因为 `mouseenter` 不冒泡。
+
+## 延伸阅读
+
+* [Element: mouseenter event - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event)
+* [Element: mouseover event - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event)
diff --git a/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.langnostic.json b/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.langnostic.json
new file mode 100644
index 0000000..0db224e
--- /dev/null
+++ b/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/en-US.langnostic.json
@@ -0,0 +1,62 @@
+{
+  "frontmatter": {
+    "title": "df127c7c"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "277d9f70",
+        "66c413e4",
+        "f51eaf48",
+        "2a7816d0",
+        "786a2222",
+        "48bcd9c",
+        "62ec2530",
+        "25a433ea",
+        "1a1c3da8",
+        "13435741",
+        "c15c4d27",
+        "9bc26348",
+        "93392d1a",
+        "519d95a7",
+        "b0fcbe8f",
+        "de4f9547",
+        "66c413e4",
+        "e1716c84",
+        "b2b5e879",
+        "58a1990d",
+        "1f4770e5",
+        "db801614"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "277d9f70",
+        "66c413e4",
+        "f51eaf48",
+        "2a7816d0",
+        "786a2222",
+        "48bcd9c",
+        "62ec2530",
+        "25a433ea",
+        "1a1c3da8",
+        "13435741",
+        "c15c4d27",
+        "9bc26348",
+        "93392d1a",
+        "519d95a7",
+        "b0fcbe8f",
+        "de4f9547",
+        "66c413e4",
+        "e1716c84",
+        "b2b5e879",
+        "58a1990d",
+        "1f4770e5",
+        "db801614"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/zh-CN.mdx b/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/zh-CN.mdx
new file mode 100644
index 0000000..9b1e507
--- /dev/null
+++ b/questions/what-is-the-difference-between-settimeout-setimmediate-and-processnexttick/zh-CN.mdx
@@ -0,0 +1,76 @@
+---
+title: setTimeout()、setImmediate() 和 process.nextTick() 之间有什么区别？
+---
+
+## TL;DR
+
+`setTimeout()` 安排在最短延迟后运行回调。`setImmediate()` 安排在当前事件循环完成后运行回调。`process.nextTick()` 安排在下一个事件循环迭代开始之前运行回调。
+
+```js
+setTimeout(() => console.log('setTimeout'), 0);
+setImmediate(() => console.log('setImmediate'));
+process.nextTick(() => console.log('nextTick'));
+```
+
+在此示例中，`process.nextTick()` 将首先执行，然后是 `setTimeout()` 或 `setImmediate()`，具体取决于环境。
+
+***
+
+## `setTimeout()`、`setImmediate()` 和 `process.nextTick()` 之间的区别
+
+### `setTimeout()`
+
+`setTimeout()` 是一个函数，它安排在指定的延迟（以毫秒为单位）后执行回调。在现代浏览器和 Node.js 中，最短延迟大约为 4 毫秒。
+
+```js live
+setTimeout(() => {
+  console.log('Executed after at least 1000 milliseconds');
+}, 1000);
+```
+
+### `setImmediate()`
+
+`setImmediate()` 是 Node.js 中可用的一个函数，它安排在当前事件循环阶段完成后立即执行回调。它类似于延迟为 0 的 `setTimeout()`，但对于立即执行，它更有效。
+
+```js
+setImmediate(() => {
+  console.log('Executed after the current event loop phase');
+});
+```
+
+### `process.nextTick()`
+
+`process.nextTick()` 是 Node.js 中可用的一个函数，它安排在下一个事件循环迭代开始之前执行回调。它用于将函数的执行推迟到当前操作完成。
+
+```js
+process.nextTick(() => {
+  console.log('Executed before the next event loop iteration');
+});
+```
+
+### 执行顺序
+
+以下示例演示了这些函数的执行顺序：
+
+```js
+setTimeout(() => console.log('setTimeout'), 0);
+setImmediate(() => console.log('setImmediate'));
+process.nextTick(() => console.log('nextTick'));
+```
+
+在此示例中，输出将是：
+
+```
+nextTick
+setTimeout or setImmediate (order may vary)
+setImmediate or setTimeout (order may vary)
+```
+
+`process.nextTick()` 将始终首先执行，然后是 `setTimeout()` 或 `setImmediate()`，具体取决于环境。
+
+## 延伸阅读
+
+* [Node.js 事件循环](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/)
+* [MDN Web 文档：setTimeout()](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout)
+* [Node.js 文档：setImmediate()](https://nodejs.org/api/timers.html#timers_setimmediate_callback_args)
+* [Node.js 文档：process.nextTick()](https://nodejs.org/api/process.html#process_process_nexttick_callback_args)
diff --git a/questions/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.langnostic.json b/questions/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.langnostic.json
new file mode 100644
index 0000000..d000f22
--- /dev/null
+++ b/questions/what-is-the-difference-between-the-window-object-and-the-document-object/en-US.langnostic.json
@@ -0,0 +1,52 @@
+{
+  "frontmatter": {
+    "title": "5a9941fb"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "97b56856",
+        "2a7816d0",
+        "44496016",
+        "73ffffa8",
+        "895ab4e1",
+        "cc66c4ee",
+        "e76b9a8",
+        "e52cdd02",
+        "e8978390",
+        "a75bdefc",
+        "269d4ef6",
+        "e76b9a8",
+        "78d9b000",
+        "67423e0a",
+        "aa7e5699",
+        "1f4770e5",
+        "c892f25c"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "97b56856",
+        "2a7816d0",
+        "44496016",
+        "73ffffa8",
+        "895ab4e1",
+        "cc66c4ee",
+        "e76b9a8",
+        "e52cdd02",
+        "e8978390",
+        "a75bdefc",
+        "269d4ef6",
+        "e76b9a8",
+        "78d9b000",
+        "67423e0a",
+        "aa7e5699",
+        "1f4770e5",
+        "c892f25c"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-difference-between-the-window-object-and-the-document-object/zh-CN.mdx b/questions/what-is-the-difference-between-the-window-object-and-the-document-object/zh-CN.mdx
new file mode 100644
index 0000000..5fc616c
--- /dev/null
+++ b/questions/what-is-the-difference-between-the-window-object-and-the-document-object/zh-CN.mdx
@@ -0,0 +1,68 @@
+---
+title: Window 对象和 Document 对象有什么区别？
+---
+
+## 总结
+
+ `Window` 对象表示浏览器窗口，并提供控制它的方法，例如打开新窗口或访问浏览器历史记录。 `Document` 对象表示加载在窗口中的网页内容，并提供操作 DOM 的方法，例如选择元素或修改其内容。
+
+***
+
+## Window 对象和 Document 对象的区别
+
+### Window 对象
+
+ `Window` 对象是 Web 浏览器环境中的全局对象。它表示包含 DOM 文档的浏览器窗口或框架。以下是关于 `Window` 对象的一些要点：
+
+*  它提供了控制浏览器窗口的方法，例如 `window.open()`、`window.close()` 和 `window.alert()`。
+*  它通过 `window.history` 访问浏览器的历史记录。
+*  它允许通过 `window.location` 与浏览器的位置（URL）进行交互。
+*  它可用于使用 `window.setTimeout()` 和 `window.setInterval()` 设置和清除计时器。
+*  它是全局执行上下文，这意味着所有全局变量和函数都是 `Window` 对象的属性。
+
+示例：
+
+```js
+// 打开一个新窗口
+window.open('https://www.example.com');
+
+// 显示一个警告
+window.alert('Hello, world!');
+```
+
+### Document 对象
+
+ `Document` 对象表示加载在浏览器窗口中的 HTML 或 XML 文档。它是 `Window` 对象的属性 (`window.document`)。以下是关于 `Document` 对象的一些要点：
+
+*  它提供了选择元素的方法，例如 `document.getElementById()`、`document.querySelector()` 和 `document.getElementsByClassName()`。
+*  它允许操作 DOM，包括创建、删除和修改元素。
+*  它提供了访问文档元数据的属性，例如 `document.title` 和 `document.URL`。
+*  它可用于侦听和处理文档中的事件。
+
+示例：
+
+```js live
+// 创建一个新元素并将其附加到文档主体
+const newElement = document.createElement('div');
+newElement.id = 'myDiv';
+newElement.textContent = 'Hello world';
+document.body.appendChild(newElement);
+
+// 通过其 ID 选择该元素
+const element = document.getElementById('myDiv');
+
+console.log(element);
+console.log(document.body);
+```
+
+### 主要区别
+
+*  `Window` 对象表示浏览器窗口，而 `Document` 对象表示网页的内容。
+*  `Window` 对象提供了控制浏览器窗口和与浏览器环境交互的方法，而 `Document` 对象提供了操作 DOM 和与网页内容交互的方法。
+*  `Window` 对象是全局执行上下文，这意味着所有全局变量和函数都是 `Window` 对象的属性。 `Document` 对象是 `Window` 对象的属性。
+
+## 延伸阅读
+
+*  [MDN Web 文档：Window](https://developer.mozilla.org/en-US/docs/Web/API/Window)
+*  [MDN Web 文档：Document](https://developer.mozilla.org/en-US/docs/Web/API/Document)
+*  [JavaScript.info：浏览器环境，规范](https://javascript.info/browser-environment)
diff --git a/questions/what-is-the-dom-and-how-is-it-structured/en-US.langnostic.json b/questions/what-is-the-dom-and-how-is-it-structured/en-US.langnostic.json
new file mode 100644
index 0000000..e034eb6
--- /dev/null
+++ b/questions/what-is-the-dom-and-how-is-it-structured/en-US.langnostic.json
@@ -0,0 +1,58 @@
+{
+  "frontmatter": {
+    "title": "a87e3e6c"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "a5a970b5",
+        "2a7816d0",
+        "c7ee0fc0",
+        "25841bc3",
+        "3f2a837d",
+        "9ec90fad",
+        "2db160c0",
+        "a9e18b7",
+        "9b5019f0",
+        "f52382bc",
+        "99d1d243",
+        "be4fd612",
+        "e6e67161",
+        "d31bc3c5",
+        "a7304f0f",
+        "5f2908ac",
+        "e76b9a8",
+        "b12b4d33",
+        "1f4770e5",
+        "ec95ba1b"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "a5a970b5",
+        "2a7816d0",
+        "c7ee0fc0",
+        "25841bc3",
+        "3f2a837d",
+        "9ec90fad",
+        "2db160c0",
+        "a9e18b7",
+        "9b5019f0",
+        "f52382bc",
+        "99d1d243",
+        "be4fd612",
+        "e6e67161",
+        "d31bc3c5",
+        "a7304f0f",
+        "5f2908ac",
+        "e76b9a8",
+        "b12b4d33",
+        "1f4770e5",
+        "ec95ba1b"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-dom-and-how-is-it-structured/zh-CN.mdx b/questions/what-is-the-dom-and-how-is-it-structured/zh-CN.mdx
new file mode 100644
index 0000000..41117aa
--- /dev/null
+++ b/questions/what-is-the-dom-and-how-is-it-structured/zh-CN.mdx
@@ -0,0 +1,85 @@
+---
+title: 什么是 DOM 以及它的结构？
+---
+
+## TL;DR
+
+DOM（文档对象模型）是用于 Web 文档的编程接口。它表示页面，以便程序可以更改文档结构、样式和内容。DOM 结构为对象树，其中每个节点代表文档的一部分，例如元素、属性和文本。
+
+***
+
+## 什么是 DOM 以及它的结构？
+
+### 定义
+
+文档对象模型 (DOM) 是一个跨平台且与语言无关的接口，它将 HTML、XHTML 或 XML 文档视为树结构。此树中的每个节点代表文档的一部分。
+
+### 结构
+
+DOM 结构为节点的分层树。以下是主要类型的节点：
+
+1. **文档节点**：文档树的根。它代表整个文档。
+2. **元素节点**：这些代表 HTML 元素，并构成文档树的大部分。
+3. **属性节点**：这些与元素节点相关联，代表这些元素的属性。
+4. **文本节点**：这些表示元素中的文本内容。
+5. **注释节点**：这些表示 HTML 中的注释。
+
+### 示例
+
+考虑以下 HTML：
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <title>Document</title>
+  </head>
+  <body>
+    <h1>Hello, World!</h1>
+    <p>This is a paragraph.</p>
+  </body>
+</html>
+```
+
+此文档的 DOM 树将如下所示：
+
+```
+Document
+  └── html
+      ├── head
+      │   └── title
+      │       └── "Document"
+      └── body
+          ├── h1
+          │   └── "Hello, World!"
+          └── p
+              └── "This is a paragraph."
+```
+
+### 访问和操作 DOM
+
+JavaScript 可用于访问和操作 DOM。以下是一些常用方法：
+
+* `document.getElementById(id)`：通过其 ID 选择一个元素。
+* `document.querySelector(selector)`：选择与 CSS 选择器匹配的第一个元素。
+* `element.appendChild(node)`：将新的子节点添加到元素。
+* `element.removeChild(node)`：从元素中删除子节点。
+
+示例：
+
+```js live
+// Create an <h1> element and add it to the DOM
+const newElement = document.createElement('h1');
+document.body.appendChild(newElement);
+
+// Get the h1 element using querySelector
+const heading = document.querySelector('h1');
+heading.textContent = 'Hello, DOM!';
+console.log(heading); // <h1>Hello, DOM!</h1>
+```
+
+## 延伸阅读
+
+* [MDN Web 文档：DOM 简介](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)
+* [W3C DOM 规范](https://www.w3.org/TR/DOM-Level-2-Core/introduction.html)
+* [JavaScript.info：DOM](https://javascript.info/dom-nodes)
diff --git a/questions/what-is-the-factory-pattern-and-how-is-it-used/en-US.langnostic.json b/questions/what-is-the-factory-pattern-and-how-is-it-used/en-US.langnostic.json
new file mode 100644
index 0000000..a969adc
--- /dev/null
+++ b/questions/what-is-the-factory-pattern-and-how-is-it-used/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "86982361"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "7dc2d21f",
+        "4d639730",
+        "ec0a89b3",
+        "2a7816d0",
+        "d3adba86",
+        "25841bc3",
+        "66e149e0",
+        "6dd3b324",
+        "815be641",
+        "30fcf78",
+        "d51518e5",
+        "53a12fa7",
+        "722fd728",
+        "4ef36bd7",
+        "f94e3976",
+        "3875b2b2",
+        "e5578aef",
+        "2819c383",
+        "658e051e",
+        "c4e00cf2",
+        "a564a20a",
+        "1f4770e5",
+        "1361313b"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "7dc2d21f",
+        "4d639730",
+        "ec0a89b3",
+        "2a7816d0",
+        "d3adba86",
+        "25841bc3",
+        "66e149e0",
+        "6dd3b324",
+        "815be641",
+        "30fcf78",
+        "d51518e5",
+        "53a12fa7",
+        "722fd728",
+        "4ef36bd7",
+        "f94e3976",
+        "3875b2b2",
+        "e5578aef",
+        "2819c383",
+        "658e051e",
+        "c4e00cf2",
+        "a564a20a",
+        "1f4770e5",
+        "1361313b"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-factory-pattern-and-how-is-it-used/zh-CN.mdx b/questions/what-is-the-factory-pattern-and-how-is-it-used/zh-CN.mdx
new file mode 100644
index 0000000..9281d75
--- /dev/null
+++ b/questions/what-is-the-factory-pattern-and-how-is-it-used/zh-CN.mdx
@@ -0,0 +1,120 @@
+---
+title: 什么是工厂模式以及如何使用它？
+---
+
+## TL;DR
+
+工厂模式是一种设计模式，用于创建对象，而无需指定将要创建的对象的确切类。它提供了一种封装实例化逻辑的方法，当创建过程很复杂或当要创建的对象的类型在运行时确定时，它特别有用。
+
+例如，在 JavaScript 中，您可以使用工厂函数来创建不同类型的对象：
+
+```js live
+function createAnimal(type) {
+  if (type === 'dog') {
+    return { sound: 'woof' };
+  } else if (type === 'cat') {
+    return { sound: 'meow' };
+  }
+}
+
+const dog = createAnimal('dog');
+const cat = createAnimal('cat');
+```
+
+***
+
+## 什么是工厂模式以及如何使用它？
+
+### 定义
+
+工厂模式是一种创建型设计模式，它提供了一个用于在超类中创建对象的接口，但允许子类更改将要创建的对象的类型。它封装了对象创建过程，使代码更模块化，更易于管理。
+
+### 用例
+
+1. **复杂对象创建**：当创建对象的过程很复杂或涉及多个步骤时。
+2. **运行时对象确定**：当要创建的对象的类型在运行时确定时。
+3. **解耦**：将客户端代码与需要实例化的特定类解耦。
+
+### JavaScript 中的实现
+
+在 JavaScript 中，可以使用工厂函数或类来实现工厂模式。以下是这两种方法的示例。
+
+#### 工厂函数
+
+工厂函数是一个返回对象的简单函数。它可以包含决定要创建哪种类型对象的逻辑。
+
+```js live
+function createAnimal(type) {
+  if (type === 'dog') {
+    return { sound: 'woof' };
+  } else if (type === 'cat') {
+    return { sound: 'meow' };
+  } else {
+    return { sound: 'unknown' };
+  }
+}
+
+const dog = createAnimal('dog');
+const cat = createAnimal('cat');
+console.log(dog.sound); // Output: woof
+console.log(cat.sound); // Output: meow
+```
+
+#### 工厂类
+
+工厂类可用于将创建逻辑封装在类结构中。
+
+```js live
+class AnimalFactory {
+  createAnimal(type) {
+    if (type === 'dog') {
+      return new Dog();
+    } else if (type === 'cat') {
+      return new Cat();
+    } else {
+      return new Animal();
+    }
+  }
+}
+
+class Dog {
+  constructor() {
+    this.sound = 'woof';
+  }
+}
+
+class Cat {
+  constructor() {
+    this.sound = 'meow';
+  }
+}
+
+class Animal {
+  constructor() {
+    this.sound = 'unknown';
+  }
+}
+
+const factory = new AnimalFactory();
+const dog = factory.createAnimal('dog');
+const cat = factory.createAnimal('cat');
+console.log(dog.sound); // Output: woof
+console.log(cat.sound); // Output: meow
+```
+
+### 优点
+
+1. **封装**：创建逻辑封装在一个地方。
+2. **灵活性**：无需更改客户端代码即可轻松添加新类型的对象。
+3. **解耦**：减少客户端代码对特定类的依赖。
+
+### 缺点
+
+1. **复杂性**：如果对象创建逻辑很简单，则会增加不必要的复杂性。
+2. **开销**：如果使用不当，可能会引入额外的开销。
+
+## 延伸阅读
+
+* [维基百科上的工厂方法模式](https://en.wikipedia.org/wiki/Factory_method_pattern)
+* [JavaScript 中的工厂模式](https://www.dofactory.com/javascript/design-patterns/factory)
+* [MDN Web 文档：面向对象的 JavaScript 初学者](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS)
diff --git a/questions/what-is-the-intl-namespace-object-for/en-US.langnostic.json b/questions/what-is-the-intl-namespace-object-for/en-US.langnostic.json
new file mode 100644
index 0000000..ae8670f
--- /dev/null
+++ b/questions/what-is-the-intl-namespace-object-for/en-US.langnostic.json
@@ -0,0 +1,56 @@
+{
+  "frontmatter": {
+    "title": "955efbe3"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "2eee7190",
+        "cbf465f7",
+        "2a7816d0",
+        "7bcec0a9",
+        "f7acc004",
+        "e4c36186",
+        "3b1cbe06",
+        "7841e5ad",
+        "eb7c0ebd",
+        "82778e85",
+        "c07218a6",
+        "959a22a9",
+        "1dbadb3a",
+        "4e1a068d",
+        "581093f7",
+        "4c8764bb",
+        "a4c7d018",
+        "1f4770e5",
+        "592a88fd"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "2eee7190",
+        "cbf465f7",
+        "2a7816d0",
+        "7bcec0a9",
+        "f7acc004",
+        "e4c36186",
+        "3b1cbe06",
+        "7841e5ad",
+        "eb7c0ebd",
+        "82778e85",
+        "c07218a6",
+        "959a22a9",
+        "1dbadb3a",
+        "4e1a068d",
+        "581093f7",
+        "4c8764bb",
+        "a4c7d018",
+        "1f4770e5",
+        "592a88fd"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-intl-namespace-object-for/zh-CN.mdx b/questions/what-is-the-intl-namespace-object-for/zh-CN.mdx
new file mode 100644
index 0000000..5763785
--- /dev/null
+++ b/questions/what-is-the-intl-namespace-object-for/zh-CN.mdx
@@ -0,0 +1,70 @@
+---
+title: '`Intl` 命名空间对象是做什么的？'
+---
+
+## TL;DR
+
+JavaScript 中的 `Intl` 命名空间对象用于国际化目的。它提供了语言敏感的字符串比较、数字格式化以及日期和时间格式化。例如，您可以使用 `Intl.DateTimeFormat` 根据特定区域设置格式化日期：
+
+```js live
+const date = new Date();
+const formatter = new Intl.DateTimeFormat('en-US');
+console.log(formatter.format(date)); // Outputs date in 'MM/DD/YYYY' format
+```
+
+***
+
+## `Intl` 命名空间对象是做什么的？
+
+JavaScript 中的 `Intl` 命名空间对象是 ECMAScript 国际化 API 的一部分，它提供语言敏感的字符串比较、数字格式化以及日期和时间格式化。这对于需要支持多种语言和地区的应用程序特别有用。
+
+### 语言敏感的字符串比较
+
+`Intl.Collator` 对象用于以区域设置感知的方式比较字符串。这对于以符合特定语言的约定的方式对字符串进行排序非常有用。
+
+```js live
+const collator = new Intl.Collator('de-DE');
+console.log(collator.compare('ä', 'z')); // Outputs a negative number because 'ä' comes before 'z' in German
+```
+
+### 数字格式化
+
+`Intl.NumberFormat` 对象用于根据特定区域设置的约定格式化数字。这包括货币、百分比和纯数字的格式化。
+
+```js live
+const number = 1234567.89;
+const formatter = new Intl.NumberFormat('de-DE', {
+  style: 'currency',
+  currency: 'EUR',
+});
+console.log(formatter.format(number)); // Outputs '1.234.567,89 €'
+```
+
+### 日期和时间格式化
+
+`Intl.DateTimeFormat` 对象用于根据特定区域设置的约定格式化日期和时间。
+
+```js live
+const date = new Date();
+const formatter = new Intl.DateTimeFormat('en-GB', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+});
+console.log(formatter.format(date)); // Outputs date in 'DD Month YYYY' format
+```
+
+### 复数规则
+
+`Intl.PluralRules` 对象用于获取特定区域设置中数字的复数形式。这对于正确地将不同语言中的单词复数化非常有用。
+
+```js live
+const pluralRules = new Intl.PluralRules('en-US');
+console.log(pluralRules.select(1)); // Outputs 'one'
+console.log(pluralRules.select(2)); // Outputs 'other'
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: Intl](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)
+* [ECMAScript Internationalization API Specification](https://tc39.es/ecma402/)
diff --git a/questions/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/en-US.langnostic.json b/questions/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/en-US.langnostic.json
new file mode 100644
index 0000000..322e6c2
--- /dev/null
+++ b/questions/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/en-US.langnostic.json
@@ -0,0 +1,66 @@
+{
+  "frontmatter": {
+    "title": "92c0dcdd"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "1073ce41",
+        "d244ccf4",
+        "2a7816d0",
+        "22086287",
+        "134cb0de",
+        "1aa567e7",
+        "428d15ab",
+        "db86390c",
+        "cb6e0a30",
+        "2a17c1a8",
+        "e006cc97",
+        "670df17e",
+        "1b6c5df2",
+        "3d002fe4",
+        "753eb59d",
+        "931eed51",
+        "86f854df",
+        "c4ba94cf",
+        "7b4594d0",
+        "b0c486f8",
+        "516563ba",
+        "31d3c5b8",
+        "1f4770e5",
+        "f051dfb4"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "1073ce41",
+        "d244ccf4",
+        "2a7816d0",
+        "22086287",
+        "134cb0de",
+        "1aa567e7",
+        "428d15ab",
+        "db86390c",
+        "cb6e0a30",
+        "2a17c1a8",
+        "e006cc97",
+        "670df17e",
+        "1b6c5df2",
+        "3d002fe4",
+        "753eb59d",
+        "931eed51",
+        "86f854df",
+        "c4ba94cf",
+        "7b4594d0",
+        "b0c486f8",
+        "516563ba",
+        "31d3c5b8",
+        "1f4770e5",
+        "f051dfb4"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/zh-CN.mdx b/questions/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/zh-CN.mdx
new file mode 100644
index 0000000..ec4c9bc
--- /dev/null
+++ b/questions/what-is-the-module-pattern-and-how-does-it-help-with-encapsulation/zh-CN.mdx
@@ -0,0 +1,88 @@
+---
+title: 什么是模块模式？它如何帮助封装？
+---
+
+## TL;DR
+
+JavaScript 中的模块模式是一种设计模式，用于创建自包含的代码模块。它通过允许您在模块内定义私有和公共成员来帮助封装。私有成员无法从模块外部访问，而公共成员通过返回的对象公开。这种模式有助于组织代码、避免全局命名空间污染以及保持关注点的清晰分离。
+
+```js live
+var myModule = (function () {
+  var privateVar = 'I am private';
+
+  function privateMethod() {
+    console.log(privateVar);
+  }
+
+  return {
+    publicMethod: function () {
+      privateMethod();
+    },
+  };
+})();
+
+myModule.publicMethod(); // Logs: I am private
+```
+
+***
+
+## 什么是模块模式？它如何帮助封装？
+
+### 模块模式简介
+
+模块模式是一种在 JavaScript 中用于创建自包含代码模块的设计模式。它利用闭包来创建私有和公共成员，从而更好地组织和封装代码。
+
+### 模块模式的工作原理
+
+模块模式通常涉及一个立即调用的函数表达式 (IIFE)，该表达式返回一个对象。此对象包含作为模块公共 API 公开的方法和属性。在 IIFE 内部，您可以定义无法从模块外部访问的私有变量和函数。
+
+### 模块模式示例
+
+这是一个模块模式的简单示例：
+
+```js live
+var myModule = (function () {
+  // Private members
+  var privateVar = 'I am private';
+
+  function privateMethod() {
+    console.log(privateVar);
+  }
+
+  // Public members
+  return {
+    publicMethod: function () {
+      privateMethod();
+    },
+  };
+})();
+
+myModule.publicMethod(); // Logs: I am private
+```
+
+在此示例中：
+
+* `privateVar` 和 `privateMethod` 是私有成员，不能直接从模块外部访问。
+* `publicMethod` 是一个公共成员，可以从模块外部访问。它可以与私有成员交互。
+
+### 使用模块模式的好处
+
+#### 封装
+
+模块模式通过隐藏内部实现细节并仅公开必要的部分来帮助封装代码。这使得代码更模块化，更易于维护。
+
+#### 避免全局命名空间污染
+
+通过使用模块模式，您可以避免使用变量和函数污染全局命名空间。这降低了命名冲突的风险，并使代码更健壮。
+
+#### 关注点分离
+
+模块模式通过允许您将相关功能组合在一起，从而促进了关注点的清晰分离。这使得代码更有条理，更容易理解。
+
+### 结论
+
+模块模式是 JavaScript 中用于创建自包含代码模块的强大工具。它通过允许您定义私有和公共成员来帮助封装，使代码更具模块化、可维护性和组织性。
+
+## 延伸阅读
+
+* [Addy Osmani 的 JavaScript 设计模式学习](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript)
diff --git a/questions/what-is-the-prototype-chain-and-how-does-it-work/en-US.langnostic.json b/questions/what-is-the-prototype-chain-and-how-does-it-work/en-US.langnostic.json
new file mode 100644
index 0000000..51cd421
--- /dev/null
+++ b/questions/what-is-the-prototype-chain-and-how-does-it-work/en-US.langnostic.json
@@ -0,0 +1,68 @@
+{
+  "frontmatter": {
+    "title": "6b9cdbbd"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "a9423b88",
+        "b442cc54",
+        "2dc18572",
+        "2a7816d0",
+        "e00af8fa",
+        "bb1744fe",
+        "18f611a7",
+        "1bcdde57",
+        "44d708b7",
+        "74e16eb8",
+        "9b5019f0",
+        "b442cc54",
+        "670df17e",
+        "71b00c34",
+        "18853ce5",
+        "c000bb96",
+        "5ac2cf91",
+        "670df17e",
+        "dc04009a",
+        "64d911eb",
+        "3d8820fd",
+        "fa1e3a8d",
+        "9b0804d",
+        "1f4770e5",
+        "84d01847"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "a9423b88",
+        "b442cc54",
+        "2dc18572",
+        "2a7816d0",
+        "e00af8fa",
+        "bb1744fe",
+        "18f611a7",
+        "1bcdde57",
+        "44d708b7",
+        "74e16eb8",
+        "9b5019f0",
+        "b442cc54",
+        "670df17e",
+        "71b00c34",
+        "18853ce5",
+        "c000bb96",
+        "5ac2cf91",
+        "670df17e",
+        "dc04009a",
+        "64d911eb",
+        "3d8820fd",
+        "fa1e3a8d",
+        "9b0804d",
+        "1f4770e5",
+        "84d01847"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-prototype-chain-and-how-does-it-work/zh-CN.mdx b/questions/what-is-the-prototype-chain-and-how-does-it-work/zh-CN.mdx
new file mode 100644
index 0000000..5675b98
--- /dev/null
+++ b/questions/what-is-the-prototype-chain-and-how-does-it-work/zh-CN.mdx
@@ -0,0 +1,103 @@
+---
+title: 什么是原型链以及它如何工作？
+---
+
+## TL;DR
+
+原型链是 JavaScript 中允许对象从其他对象继承属性和方法的一种机制。当您尝试访问对象上的属性时，JavaScript 将首先在对象本身上查找该属性。如果找不到，它将查看对象的原型，然后是原型的原型，依此类推，直到找到该属性或到达链的末尾，即 `null`。
+
+```js live
+function Person(name) {
+  this.name = name;
+}
+
+Person.prototype.greet = function () {
+  console.log(`Hello, my name is ${this.name}`);
+};
+
+const alice = new Person('Alice');
+alice.greet(); // "Hello, my name is Alice"
+```
+
+在这个例子中，`alice` 从 `Person.prototype` 继承了 `greet` 方法。
+
+***
+
+## 什么是原型链以及它如何工作？
+
+### 理解原型
+
+在 JavaScript 中，每个对象都有一个原型。原型也是一个对象，它可以有自己的原型，从而形成一个链。这个链被称为原型链。
+
+### 原型链的工作原理
+
+当您尝试访问对象上的属性或方法时，JavaScript 将会：
+
+1. 在对象本身上查找属性或方法。
+2. 如果找不到，它将查看对象的原型。
+3. 如果仍然找不到，它将查看原型的原型。
+4. 此过程将一直持续到找到属性或方法，或者到达链的末尾，即 `null`。
+
+### 例子
+
+```js live
+function Person(name) {
+  this.name = name;
+}
+
+Person.prototype.greet = function () {
+  console.log(`Hello, my name is ${this.name}`);
+};
+
+const alice = new Person('Alice');
+alice.greet(); // "Hello, my name is Alice"
+```
+
+在这个例子中：
+
+1. `alice` 是 `Person` 的一个实例。
+2. `alice` 并没有直接在其上拥有 `greet` 方法。
+3. JavaScript 查看 `alice` 的原型，即 `Person.prototype`。
+4. `Person.prototype` 有一个 `greet` 方法，所以 JavaScript 调用它。
+
+### 内置对象中的原型链
+
+JavaScript 的内置对象也使用原型链。例如，数组继承自 `Array.prototype`，而 `Array.prototype` 又继承自 `Object.prototype`。
+
+```js live
+const arr = [1, 2, 3];
+console.log(arr.toString()); // "1,2,3"
+```
+
+在这个例子中：
+
+1. `arr` 是 `Array` 的一个实例。
+2. `arr` 并没有直接在其上拥有 `toString` 方法。
+3. JavaScript 查看 `arr` 的原型，即 `Array.prototype`。
+4. `Array.prototype` 有一个 `toString` 方法，所以 JavaScript 调用它。
+
+### 修改原型
+
+您可以向对象的原型添加属性和方法，该对象的所有实例都可以访问这些属性和方法。
+
+```js live
+function Person(name) {
+  this.name = name;
+}
+
+const alice = new Person('Alice');
+
+Person.prototype.sayGoodbye = function () {
+  console.log(`Goodbye from ${this.name}`);
+};
+
+alice.sayGoodbye(); // "Goodbye from Alice"
+```
+
+在此示例中，我们向 `Person.prototype` 添加了一个 `sayGoodbye` 方法，现在 `alice` 可以使用它。
+
+## 延伸阅读
+
+* [MDN Web Docs: Inheritance and the prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
+* [JavaScript.info: Prototypes](https://javascript.info/prototype-inheritance)
+* [Eloquent JavaScript: Prototypes](https://eloquentjavascript.net/06_object.html#h_jl8p9u9e2d)
diff --git a/questions/what-is-the-purpose-of-the-break-and-continue-statements/en-US.langnostic.json b/questions/what-is-the-purpose-of-the-break-and-continue-statements/en-US.langnostic.json
new file mode 100644
index 0000000..0c1f809
--- /dev/null
+++ b/questions/what-is-the-purpose-of-the-break-and-continue-statements/en-US.langnostic.json
@@ -0,0 +1,54 @@
+{
+  "frontmatter": {
+    "title": "17c9dbca"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "a7d6a386",
+        "6424556b",
+        "2a7816d0",
+        "fa30f38a",
+        "7fc72d5f",
+        "e3ccf0b",
+        "74ffc159",
+        "84b11f6a",
+        "43cab552",
+        "90ccbffa",
+        "b187595a",
+        "223870d9",
+        "74ffc159",
+        "f35971df",
+        "38193419",
+        "9a5615dd",
+        "1f4770e5",
+        "ec544a3e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "a7d6a386",
+        "6424556b",
+        "2a7816d0",
+        "fa30f38a",
+        "7fc72d5f",
+        "e3ccf0b",
+        "74ffc159",
+        "84b11f6a",
+        "43cab552",
+        "90ccbffa",
+        "b187595a",
+        "223870d9",
+        "74ffc159",
+        "f35971df",
+        "38193419",
+        "9a5615dd",
+        "1f4770e5",
+        "ec544a3e"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-purpose-of-the-break-and-continue-statements/zh-CN.mdx b/questions/what-is-the-purpose-of-the-break-and-continue-statements/zh-CN.mdx
new file mode 100644
index 0000000..267cc0c
--- /dev/null
+++ b/questions/what-is-the-purpose-of-the-break-and-continue-statements/zh-CN.mdx
@@ -0,0 +1,82 @@
+---
+title: break 和 continue 语句的用途是什么？
+---
+
+## TL;DR
+
+`break` 语句用于过早地退出循环或 switch 语句，而 `continue` 语句跳过循环的当前迭代并继续到下一个迭代。例如，在 `for` 循环中，`break` 将完全停止循环，而 `continue` 将跳到下一个迭代。
+
+```js live
+for (let i = 0; i < 10; i++) {
+  if (i === 5) break; // 当 i 为 5 时退出循环
+  console.log(i);
+}
+
+for (let i = 0; i < 10; i++) {
+  if (i === 5) continue; // 当 i 为 5 时跳过迭代
+  console.log(i);
+}
+```
+
+***
+
+## `break` 和 `continue` 语句的用途
+
+### `break` 语句
+
+`break` 语句用于在循环或 switch 语句完成所有迭代或 case 之前退出。当您希望根据特定条件停止循环或 switch 的执行时，这很有用。
+
+#### 循环中的示例
+
+```js live
+for (let i = 0; i < 10; i++) {
+  if (i === 5) break; // 当 i 为 5 时退出循环
+  console.log(i);
+}
+// 输出：0 1 2 3 4
+```
+
+#### switch 语句中的示例
+
+```js live
+function printDayOfWeek(day) {
+  switch (day) {
+    case 1:
+      console.log('Monday');
+      break;
+    case 2:
+      console.log('Tuesday');
+      break;
+    // 其他情况
+    default:
+      console.log('Invalid day');
+  }
+}
+printDayOfWeek(2); // 星期二
+printDayOfWeek('myDay'); // 无效的日期
+```
+
+### `continue` 语句
+
+`continue` 语句用于跳过循环的当前迭代并继续到下一个迭代。当您希望根据某个条件跳过某些迭代而不完全退出循环时，这很有用。
+
+#### 循环中的示例
+
+```js live
+for (let i = 0; i < 10; i++) {
+  if (i === 5) continue; // 当 i 为 5 时跳过迭代
+  console.log(i);
+}
+// 输出：0 1 2 3 4 6 7 8 9
+```
+
+### `break` 和 `continue` 的区别
+
+* `break` 语句完全退出循环或 switch 语句。
+* `continue` 语句跳过当前迭代并移至循环的下一个迭代。
+
+## 延伸阅读
+
+* [MDN Web 文档：break](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break)
+* [MDN Web 文档：continue](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue)
+* [JavaScript 循环](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
diff --git a/questions/what-is-the-purpose-of-the-finally-block/en-US.langnostic.json b/questions/what-is-the-purpose-of-the-finally-block/en-US.langnostic.json
new file mode 100644
index 0000000..add6856
--- /dev/null
+++ b/questions/what-is-the-purpose-of-the-finally-block/en-US.langnostic.json
@@ -0,0 +1,48 @@
+{
+  "frontmatter": {
+    "title": "c346fc05"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "6d2a5fef",
+        "41379cd8",
+        "2a7816d0",
+        "4437a7d1",
+        "8982136e",
+        "5a5af94f",
+        "3e3034bc",
+        "43c50729",
+        "628e78aa",
+        "e559e321",
+        "fb163764",
+        "ddc4f34d",
+        "8f9f4391",
+        "1f4770e5",
+        "ba040869"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "6d2a5fef",
+        "41379cd8",
+        "2a7816d0",
+        "4437a7d1",
+        "8982136e",
+        "5a5af94f",
+        "3e3034bc",
+        "43c50729",
+        "628e78aa",
+        "e559e321",
+        "fb163764",
+        "ddc4f34d",
+        "8f9f4391",
+        "1f4770e5",
+        "ba040869"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-purpose-of-the-finally-block/zh-CN.mdx b/questions/what-is-the-purpose-of-the-finally-block/zh-CN.mdx
new file mode 100644
index 0000000..0bc96a0
--- /dev/null
+++ b/questions/what-is-the-purpose-of-the-finally-block/zh-CN.mdx
@@ -0,0 +1,83 @@
+---
+title: finally 块的目的是什么？
+---
+
+## TL;DR
+
+JavaScript 中的 `finally` 块用于在 `try` 和 `catch` 块之后执行代码，无论是否抛出或捕获了错误。它确保某些清理或最终确定代码无论如何都会运行。例如：
+
+```js
+try {
+  // Code that may throw an error
+} catch (error) {
+  // Code to handle the error
+} finally {
+  // Code that will always run
+}
+```
+
+***
+
+## `finally` 块的目的
+
+### 确保清理
+
+`finally` 块通常用于确保某些清理代码运行，无论是否发生错误。这对于关闭文件、释放资源或重置状态等任务很有用。
+
+```js live
+async function fetchData() {
+  try {
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/posts/1',
+    );
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    console.log('Fetched data:', data);
+  } catch (error) {
+    console.error('An error occurred:', error);
+  } finally {
+    console.log('Cleanup code runs here');
+  }
+}
+
+fetchData();
+// Try creating a typo in the URL to see error handling.
+```
+
+### 保证执行
+
+`finally` 块保证其中的代码将在 `try` 和 `catch` 块完成后执行。即使在 `try` 或 `catch` 块中遇到 `return` 语句，也是如此。
+
+```js live
+function exampleFunction() {
+  try {
+    return 'Try block';
+  } catch (error) {
+    return 'Catch block';
+  } finally {
+    console.log('Finally block');
+  }
+}
+
+console.log(exampleFunction()); // Output: 'Finally block' followed by 'Try block'
+```
+
+### 处理异步代码
+
+处理异步代码时，`finally` 块可用于确保在 Promise 解决后采取某些操作，无论其结果如何。
+
+```js live
+fetch('https://jsonplaceholder.typicode.com/todos/1')
+  .then((response) => response.json())
+  .then((res) => console.log(res))
+  .catch((error) => console.error('Fetch error:', error))
+  .finally(() => console.log('Fetch attempt finished'));
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: try...catch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch)
+* [JavaScript.info: try...catch](https://javascript.info/try-catch)
+* [MDN Web Docs: Promise.prototype.finally()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally)
diff --git a/questions/what-is-the-purpose-of-the-new-keyword/en-US.langnostic.json b/questions/what-is-the-purpose-of-the-new-keyword/en-US.langnostic.json
new file mode 100644
index 0000000..128793c
--- /dev/null
+++ b/questions/what-is-the-purpose-of-the-new-keyword/en-US.langnostic.json
@@ -0,0 +1,54 @@
+{
+  "frontmatter": {
+    "title": "d7bc711b"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "b6748fea",
+        "b18cd56a",
+        "2a7816d0",
+        "ed348c69",
+        "503ac9c3",
+        "7204d89a",
+        "6813475a",
+        "6b31663c",
+        "dbf60fb4",
+        "6dcbf91",
+        "b3463dff",
+        "a855ac62",
+        "b9ba5b3b",
+        "75fe6fee",
+        "b8c2b9df",
+        "35a95f4e",
+        "1f4770e5",
+        "318c056e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "b6748fea",
+        "b18cd56a",
+        "2a7816d0",
+        "ed348c69",
+        "503ac9c3",
+        "7204d89a",
+        "6813475a",
+        "6b31663c",
+        "dbf60fb4",
+        "6dcbf91",
+        "b3463dff",
+        "a855ac62",
+        "b9ba5b3b",
+        "75fe6fee",
+        "b8c2b9df",
+        "35a95f4e",
+        "1f4770e5",
+        "318c056e"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-purpose-of-the-new-keyword/zh-CN.mdx b/questions/what-is-the-purpose-of-the-new-keyword/zh-CN.mdx
new file mode 100644
index 0000000..2ba5227
--- /dev/null
+++ b/questions/what-is-the-purpose-of-the-new-keyword/zh-CN.mdx
@@ -0,0 +1,84 @@
+---
+title: new 关键字的用途是什么？
+---
+
+## TL;DR
+
+JavaScript 中的 `new` 关键字用于创建用户定义的对象类型或具有构造函数的内置对象类型的实例。 当你使用 `new` 时，它会做四件事：它创建一个新对象，设置原型，将 `this` 绑定到新对象，并返回新对象。
+
+```js live
+function Person(name) {
+  this.name = name;
+}
+
+const person1 = new Person('Alice');
+console.log(person1.name); // Alice
+```
+
+***
+
+## `new` 关键字的用途
+
+### 创建一个新对象
+
+`new` 关键字用于创建对象的新实例。 当你使用 `new` 调用构造函数时，它会创建一个新对象。
+
+```js live
+function Car(model) {
+  this.model = model;
+}
+
+const myCar = new Car('Toyota');
+console.log(myCar.model); // Toyota
+```
+
+### 设置原型
+
+新对象的内部 `[[Prototype]]` 属性被设置为构造函数的 `prototype` 属性。 这允许新对象从构造函数的原型继承属性和方法。
+
+```js live
+function Animal(type) {
+  this.type = type;
+}
+
+Animal.prototype.speak = function () {
+  console.log(`${this.type} makes a sound`);
+};
+
+const dog = new Animal('Dog');
+dog.speak(); // Dog makes a sound
+```
+
+### 将 `this` 绑定到新对象
+
+在构造函数内部，`this` 指的是正在创建的新对象。 这允许你将属性和方法添加到新对象。
+
+```js live
+function Book(title) {
+  this.title = title;
+}
+
+const myBook = new Book('JavaScript Essentials');
+console.log(myBook.title); // JavaScript Essentials
+```
+
+### 返回新对象
+
+`new` 关键字隐式地返回由构造函数创建的新对象。 如果构造函数显式地返回一个对象，则将返回该对象。
+
+```js live
+function Gadget(name) {
+  this.name = name;
+  return { type: 'Electronic' };
+}
+
+const myGadget = new Gadget('Smartphone');
+console.log(myGadget.type); // Electronic
+console.log(myGadget.name); // undefined
+```
+
+## 延伸阅读
+
+* [MDN Web Docs: new operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new)
+* [JavaScript.info: Constructor, operator "new"](https://javascript.info/constructor-new)
+* [Eloquent JavaScript: Constructors](https://eloquentjavascript.net/06_object.html#h_XTmO7z7MPq)
diff --git a/questions/what-is-the-purpose-of-the-switch-statement/en-US.langnostic.json b/questions/what-is-the-purpose-of-the-switch-statement/en-US.langnostic.json
new file mode 100644
index 0000000..34d2001
--- /dev/null
+++ b/questions/what-is-the-purpose-of-the-switch-statement/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "7e3c718d"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "d673e085",
+        "ef339182",
+        "2a7816d0",
+        "e194cec3",
+        "b63af4db",
+        "caf6404e",
+        "1ce4c309",
+        "51b65241",
+        "5f593b6e",
+        "4e8ede6c",
+        "1105b4b1",
+        "9b5019f0",
+        "f2d69d2f",
+        "f404fd5f",
+        "e6ceecd7",
+        "b361b976",
+        "dbed4949",
+        "c11edc8",
+        "e1716c84",
+        "3524328a",
+        "31860e51",
+        "1f4770e5",
+        "84a60e2f"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "d673e085",
+        "ef339182",
+        "2a7816d0",
+        "e194cec3",
+        "b63af4db",
+        "caf6404e",
+        "1ce4c309",
+        "51b65241",
+        "5f593b6e",
+        "4e8ede6c",
+        "1105b4b1",
+        "9b5019f0",
+        "f2d69d2f",
+        "f404fd5f",
+        "e6ceecd7",
+        "b361b976",
+        "dbed4949",
+        "c11edc8",
+        "e1716c84",
+        "3524328a",
+        "31860e51",
+        "1f4770e5",
+        "84a60e2f"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-purpose-of-the-switch-statement/zh-CN.mdx b/questions/what-is-the-purpose-of-the-switch-statement/zh-CN.mdx
new file mode 100644
index 0000000..15ae988
--- /dev/null
+++ b/questions/what-is-the-purpose-of-the-switch-statement/zh-CN.mdx
@@ -0,0 +1,112 @@
+---
+title: switch 语句的用途是什么？
+---
+
+## TL;DR
+
+switch 语句用于根据表达式的值执行多个代码块中的一个。它是使用多个 `if...else if` 语句的替代方案。switch 语句计算一个表达式，将表达式的值与 `case` 标签匹配，并执行相关的代码块。如果没有 `case` 匹配，则执行 `default` 块。
+
+```js
+switch (expression) {
+  case value1:
+    // code to be executed if expression === value1
+    break;
+  case value2:
+    // code to be executed if expression === value2
+    break;
+  default:
+  // code to be executed if no case matches
+}
+```
+
+***
+
+## `switch` 语句的用途
+
+### 简化多个条件检查
+
+与使用多个 `if...else if` 语句相比，`switch` 语句提供了一种更清晰、更易读的方式来处理多个条件检查。当您需要将同一表达式与不同的值进行比较时，它特别有用。
+
+### 语法和结构
+
+以下是 `switch` 语句的基本语法：
+
+```js
+switch (expression) {
+  case value1:
+    // code to be executed if expression === value1
+    break;
+  case value2:
+    // code to be executed if expression === value2
+    break;
+  // more cases...
+  default:
+  // code to be executed if no case matches
+}
+```
+
+### 工作原理
+
+1. **表达式求值**：`switch` 语句计算一次表达式。
+2. **案例匹配**：它将表达式的结果与每个 `case` 标签的值进行比较。
+3. **代码执行**：如果找到匹配项，则执行与该 `case` 关联的代码。
+4. **Break 语句**：`break` 语句用于退出 `switch` 块。如果省略，将执行下一个 `case`（fall-through 行为）。
+5. **Default 案例**：`default` 案例是可选的，如果未找到匹配的 `case`，则执行。
+
+### 示例
+
+这是一个 `switch` 语句的示例：
+
+```js live
+let fruit = 'apple';
+
+switch (fruit) {
+  case 'banana':
+    console.log('香蕉是黄色的。');
+    break;
+  case 'apple':
+    console.log('苹果是红色的。');
+    break;
+  case 'grape':
+    console.log('葡萄是紫色的。');
+    break;
+  default:
+    console.log('未知水果。');
+}
+```
+
+在此示例中，输出将是 `Apple is red.`，因为 `fruit` 的值与 `case 'apple'` 匹配。
+
+### Fall-through 行为
+
+如果省略 `break` 语句，`switch` 语句将继续执行后续的 `case` 块，直到遇到 `break` 或 `switch` 块的末尾。这被称为 fall-through 行为。
+
+```js live
+let day = 2;
+
+switch (day) {
+  case 1:
+    console.log('星期一');
+  case 2:
+    console.log('星期二');
+  case 3:
+    console.log('星期三');
+  default:
+    console.log('未知日期');
+}
+```
+
+在这个例子中，输出将是：
+
+```
+Tuesday
+Wednesday
+Unknown day
+```
+
+发生这种情况是因为在 `case 2` 块之后没有 `break` 语句来停止执行。
+
+## 延伸阅读
+
+* [MDN Web Docs: switch statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch)
+* [JavaScript.info: switch statement](https://javascript.info/switch)
diff --git a/questions/what-is-the-spread-operator-and-how-is-it-used/en-US.langnostic.json b/questions/what-is-the-spread-operator-and-how-is-it-used/en-US.langnostic.json
new file mode 100644
index 0000000..123707e
--- /dev/null
+++ b/questions/what-is-the-spread-operator-and-how-is-it-used/en-US.langnostic.json
@@ -0,0 +1,66 @@
+{
+  "frontmatter": {
+    "title": "f32e43"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "4830c945",
+        "6ca0e90b",
+        "2a7816d0",
+        "94a7b9ce",
+        "8e41ac23",
+        "7de1b33",
+        "5c877420",
+        "ee6c7c6d",
+        "6eac6b38",
+        "b118e365",
+        "4dded10a",
+        "288c27ee",
+        "6a0c41cb",
+        "679ab33b",
+        "9bbb63c1",
+        "8ea29ca0",
+        "c0fb02fb",
+        "a2682ef8",
+        "973e67c0",
+        "ed290858",
+        "6726d5c6",
+        "477961a2",
+        "1f4770e5",
+        "a03426e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "4830c945",
+        "6ca0e90b",
+        "2a7816d0",
+        "94a7b9ce",
+        "8e41ac23",
+        "7de1b33",
+        "5c877420",
+        "ee6c7c6d",
+        "6eac6b38",
+        "b118e365",
+        "4dded10a",
+        "288c27ee",
+        "6a0c41cb",
+        "679ab33b",
+        "9bbb63c1",
+        "8ea29ca0",
+        "c0fb02fb",
+        "a2682ef8",
+        "973e67c0",
+        "ed290858",
+        "6726d5c6",
+        "477961a2",
+        "1f4770e5",
+        "a03426e"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-spread-operator-and-how-is-it-used/zh-CN.mdx b/questions/what-is-the-spread-operator-and-how-is-it-used/zh-CN.mdx
new file mode 100644
index 0000000..94c3e04
--- /dev/null
+++ b/questions/what-is-the-spread-operator-and-how-is-it-used/zh-CN.mdx
@@ -0,0 +1,92 @@
+---
+title: 什么是展开运算符以及如何使用它？
+---
+
+## TL;DR
+
+展开运算符，用三个点 (`...`) 表示，在 JavaScript 中用于将可迭代对象（如数组或字符串）展开为单个元素。它也可以用于展开对象属性。例如，您可以使用它来组合数组、复制数组或将数组元素作为参数传递给函数。
+
+```js live
+const arr1 = [1, 2, 3];
+const arr2 = [4, 5, 6];
+const combined = [...arr1, ...arr2];
+console.log(combined); // [1, 2, 3, 4, 5, 6]
+
+const obj1 = { a: 1, b: 2 };
+const obj2 = { c: 3, d: 4 };
+const combinedObj = { ...obj1, ...obj2 };
+console.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }
+```
+
+***
+
+## 什么是展开运算符以及如何使用它？
+
+### 展开数组
+
+展开运算符可用于将数组的元素展开为单个元素。这对于组合数组或复制数组很有用。
+
+```js live
+const arr1 = [1, 2, 3];
+const arr2 = [4, 5, 6];
+const combined = [...arr1, ...arr2];
+console.log(combined); // [1, 2, 3, 4, 5, 6]
+```
+
+### 复制数组
+
+您可以使用展开运算符创建数组的浅拷贝。
+
+```js live
+const original = [1, 2, 3];
+const copy = [...original];
+console.log(copy); // [1, 2, 3]
+```
+
+### 将数组元素作为函数参数传递
+
+展开运算符可用于将数组的元素作为参数传递给函数。
+
+```js live
+function sum(a, b, c) {
+  return a + b + c;
+}
+
+const numbers = [1, 2, 3];
+console.log(sum(...numbers)); // 6
+```
+
+### 展开对象
+
+展开运算符也可用于展开对象的属性。这对于组合对象或复制对象很有用。
+
+```js live
+const obj1 = { a: 1, b: 2 };
+const obj2 = { c: 3, d: 4 };
+const combinedObj = { ...obj1, ...obj2 };
+console.log(combinedObj); // { a: 1, b: 2, c: 3, d: 4 }
+```
+
+### 复制对象
+
+您可以使用展开运算符创建对象的浅拷贝。
+
+```js live
+const originalObj = { a: 1, b: 2 };
+const copyObj = { ...originalObj };
+console.log(copyObj); // { a: 1, b: 2 }
+```
+
+### 使用字符串
+
+扩展运算符也可以用来将字符串扩展成单个字符。
+
+```js live
+const str = 'hello';
+const chars = [...str];
+console.log(chars); // ['h', 'e', 'l', 'l', 'o']
+```
+
+## 延伸阅读
+
+* [FreeCodeCamp: The spread operator in JavaScript](https://www.freecodecamp.org/news/the-spread-operator-in-javascript/)
diff --git a/questions/what-is-the-ternary-operator-and-how-is-it-used/en-US.langnostic.json b/questions/what-is-the-ternary-operator-and-how-is-it-used/en-US.langnostic.json
new file mode 100644
index 0000000..753563e
--- /dev/null
+++ b/questions/what-is-the-ternary-operator-and-how-is-it-used/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "f2569823"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "d22b4a74",
+        "2a7816d0",
+        "f9aba8af",
+        "83283a80",
+        "4af0e29",
+        "eea083fa",
+        "7fcc5ad4",
+        "4ab8f7e4",
+        "efd00327",
+        "19c254ba",
+        "49bd19b5",
+        "eb034731",
+        "9a6d1ea4",
+        "cc6fa7e8",
+        "5bb2a61b",
+        "31b305a7",
+        "2b9ea689",
+        "6dd3b324",
+        "d0b89c50",
+        "3b882e5b",
+        "f64f0206",
+        "1f4770e5",
+        "56dac479"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "d22b4a74",
+        "2a7816d0",
+        "f9aba8af",
+        "83283a80",
+        "4af0e29",
+        "eea083fa",
+        "7fcc5ad4",
+        "4ab8f7e4",
+        "efd00327",
+        "19c254ba",
+        "49bd19b5",
+        "eb034731",
+        "9a6d1ea4",
+        "cc6fa7e8",
+        "5bb2a61b",
+        "31b305a7",
+        "2b9ea689",
+        "6dd3b324",
+        "d0b89c50",
+        "3b882e5b",
+        "f64f0206",
+        "1f4770e5",
+        "56dac479"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-ternary-operator-and-how-is-it-used/zh-CN.mdx b/questions/what-is-the-ternary-operator-and-how-is-it-used/zh-CN.mdx
new file mode 100644
index 0000000..3ff4aa7
--- /dev/null
+++ b/questions/what-is-the-ternary-operator-and-how-is-it-used/zh-CN.mdx
@@ -0,0 +1,76 @@
+---
+title: 什么是三元运算符？它如何使用？
+---
+
+## 总结
+
+三元运算符是 JavaScript 中 `if-else` 语句的简写形式。它需要三个操作数：一个条件、一个真值结果和一个假值结果。语法是 `condition ? expr1 : expr2`。例如，`let result = (a > b) ? 'a is greater' : 'b is greater';` 如果 `a` 大于 `b`，则将 `'a is greater'` 赋值给 `result`，否则将 `'b is greater'` 赋值给 `result`。
+
+***
+
+## 什么是三元运算符？它如何使用？
+
+### 简介
+
+三元运算符，也称为条件运算符，是在 JavaScript 中执行条件评估的简便方法。它是 JavaScript 中唯一需要三个操作符的运算符。
+
+### 语法
+
+三元运算符的语法是：
+
+```js
+condition ? expr1 : expr2;
+```
+
+* `condition`：一个计算结果为 `true` 或 `false` 的表达式
+* `expr1`：如果条件为 `true`，则执行的表达式
+* `expr2`：如果条件为 `false`，则执行的表达式
+
+### 使用示例
+
+这是一个三元运算符的基本示例：
+
+```js live
+let age = 18;
+let canVote = age >= 18 ? 'Yes' : 'No';
+console.log(canVote); // Output: Yes
+```
+
+在此示例中，将评估条件 `age >= 18`。如果为 `true`，则将字符串 `'Yes'` 赋值给 `canVote`。如果为 `false`，则将字符串 `'No'` 赋值给 `canVote`。
+
+### 嵌套三元运算符
+
+您也可以嵌套三元运算符，尽管这会使代码更难阅读：
+
+```js live
+let score = 85;
+let grade =
+  score >= 90
+    ? 'A'
+    : score >= 80
+      ? 'B'
+      : score >= 70
+        ? 'C'
+        : score >= 60
+          ? 'D'
+          : 'F';
+console.log(grade); // Output: B
+```
+
+在此示例中，三元运算符用于根据 `score` 的值分配等级。
+
+### 用例
+
+* **简单的条件赋值**：当您需要根据条件分配值时。
+* **内联条件渲染**：在 JSX 中用于在 React 中进行条件渲染时很有用。
+
+### 最佳实践
+
+* **可读性**：虽然三元运算符可以使代码更简洁，但过度使用或嵌套过深会使代码难以阅读。请谨慎使用。
+* **复杂条件**：对于复杂条件，请考虑使用 `if-else` 语句以获得更好的可读性。
+
+## 延伸阅读
+
+* [MDN Web Docs: Conditional (ternary) operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)
+* [JavaScript.info: Conditional operators](https://javascript.info/ifelse#conditional-operator)
+* [W3Schools: JavaScript ternary operator](https://www.w3schools.com/jsref/jsref_operators.asp)
diff --git a/questions/what-is-the-use-of-promiseall/en-US.langnostic.json b/questions/what-is-the-use-of-promiseall/en-US.langnostic.json
new file mode 100644
index 0000000..1df2002
--- /dev/null
+++ b/questions/what-is-the-use-of-promiseall/en-US.langnostic.json
@@ -0,0 +1,66 @@
+{
+  "frontmatter": {
+    "title": "961514a0"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "4c82ca14",
+        "9eb9d290",
+        "2a7816d0",
+        "7699a9b5",
+        "7e5d8c12",
+        "53d0fd95",
+        "eea083fa",
+        "8e365f7f",
+        "876aebf3",
+        "4e8ede6c",
+        "ae5bce3d",
+        "4e891c05",
+        "9b5019f0",
+        "5165cd50",
+        "faec4b31",
+        "890b0975",
+        "c019b9d8",
+        "8c78e8e1",
+        "c2d6786c",
+        "f5f05a32",
+        "6dd3b324",
+        "ba53abf9",
+        "1f4770e5",
+        "da2048a0"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "4c82ca14",
+        "9eb9d290",
+        "2a7816d0",
+        "7699a9b5",
+        "7e5d8c12",
+        "53d0fd95",
+        "eea083fa",
+        "8e365f7f",
+        "876aebf3",
+        "4e8ede6c",
+        "ae5bce3d",
+        "4e891c05",
+        "9b5019f0",
+        "5165cd50",
+        "faec4b31",
+        "890b0975",
+        "c019b9d8",
+        "8c78e8e1",
+        "c2d6786c",
+        "f5f05a32",
+        "6dd3b324",
+        "ba53abf9",
+        "1f4770e5",
+        "da2048a0"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-the-use-of-promiseall/zh-CN.mdx b/questions/what-is-the-use-of-promiseall/zh-CN.mdx
new file mode 100644
index 0000000..6da332e
--- /dev/null
+++ b/questions/what-is-the-use-of-promiseall/zh-CN.mdx
@@ -0,0 +1,102 @@
+---
+title: Promise.all() 的用途是什么
+---
+
+## TL;DR
+
+`Promise.all()` 是 JavaScript 中的一种方法，它接受一个 promise 数组并返回一个单独的 promise。当所有输入 promise 都已解决时，此返回的 promise 将被解析，或者如果任何输入 promise 被拒绝，则会被拒绝。它用于并行运行多个异步操作并等待它们全部完成。
+
+```js live
+const promise1 = Promise.resolve(3);
+const promise2 = 42;
+const promise3 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 100, 'foo');
+});
+
+Promise.all([promise1, promise2, promise3]).then((values) => {
+  console.log(values); // [3, 42, 'foo']
+});
+```
+
+***
+
+## Promise.all() 的用途是什么
+
+### 概述
+
+`Promise.all()` 是 `Promise` 对象的静态方法，用于同时处理多个 promise。它接受一个可迭代对象（通常是数组）的 promise，并返回一个单独的 promise，当可迭代对象中的所有 promise 都已解决时，该 promise 将被解析，或者如果任何 promise 被拒绝，则该 promise 将被拒绝。
+
+### 语法
+
+```js
+Promise.all(iterable);
+```
+
+* `iterable`：一个可迭代对象，例如包含 promise 的数组。
+
+### 工作原理
+
+当您将一个 promise 数组传递给 `Promise.all()` 时，它将返回一个新的 promise。这个新的 promise：
+
+* 当数组中的所有 promise 都已解决时，将解析。解析后的值是输入 promise 的解析值的数组，顺序与输入 promise 相同。
+* 一旦任何输入 promise 被拒绝，就会被拒绝。拒绝原因是被拒绝的第一个 promise 的原因。
+
+### 示例
+
+这是一个示例，用于说明 `Promise.all()` 的工作原理：
+
+```js live
+const promise1 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 100, 'one');
+});
+
+const promise2 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 200, 'two');
+});
+
+Promise.all([promise1, promise2])
+  .then((values) => {
+    console.log(values); // ['one', 'two']
+  })
+  .catch((error) => {
+    console.error(error);
+  });
+```
+
+在此示例中，`Promise.all()` 等待 `promise1` 和 `promise2` 都被解析。一旦两个 promise 都被解析，它将记录解析值的数组。
+
+### 错误处理
+
+如果传递给 `Promise.all()` 的任何 promise 被拒绝，则返回的 promise 将立即被拒绝，并带有第一个被拒绝的 promise 的原因。
+
+```js live
+const promise1 = new Promise((resolve, reject) => {
+  setTimeout(resolve, 100, 'one');
+});
+
+const promise2 = new Promise((resolve, reject) => {
+  setTimeout(reject, 200, 'two');
+});
+
+Promise.all([promise1, promise2])
+  .then((values) => {
+    console.log(values);
+  })
+  .catch((error) => {
+    console.error(error); // 'two'
+  });
+```
+
+在这个例子中，`promise2` 在 200 毫秒后被拒绝，导致 `Promise.all()` promise 立即以原因 `'two'` 拒绝。
+
+### 用例
+
+* **并行 API 请求**：当您需要发出多个 API 请求并等待所有请求完成才能继续时。
+* **批量处理**：当您有多个可以并行执行的异步任务，并且需要等待所有任务完成时。
+* **数据聚合**：当您需要从多个来源收集数据并合并结果时。
+
+## 延伸阅读
+
+* [MDN Web Docs 上的 `Promise.all()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)
+* [JavaScript Promises：简介](https://developers.google.com/web/fundamentals/primers/promises)
+* [理解 JavaScript Promises](https://www.digitalocean.com/community/tutorials/understanding-javascript-promises)
diff --git a/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.langnostic.json b/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.langnostic.json
new file mode 100644
index 0000000..fe599f1
--- /dev/null
+++ b/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.langnostic.json
@@ -0,0 +1,67 @@
+{
+  "frontmatter": {
+    "title": "a48f539",
+    "subtitle": "fe0da86c"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "735518d",
+        "87deb665",
+        "a511962f",
+        "d37b5b85",
+        "e230eff7",
+        "9f0c4dc6",
+        "2a7816d0",
+        "31d334db",
+        "ee3a3042",
+        "8c6102dc",
+        "e42c6a99",
+        "b5e18e85",
+        "4771f3b4",
+        "735f0c5",
+        "70e92007",
+        "6cc87eda",
+        "483222a",
+        "c9bebce4",
+        "5b8e46fd",
+        "4f551e73",
+        "40808d83",
+        "444b3f4e",
+        "1f4770e5",
+        "57e46ad6"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "735518d",
+        "87deb665",
+        "a511962f",
+        "d37b5b85",
+        "e230eff7",
+        "9f0c4dc6",
+        "2a7816d0",
+        "31d334db",
+        "ee3a3042",
+        "8c6102dc",
+        "e42c6a99",
+        "b5e18e85",
+        "4771f3b4",
+        "735f0c5",
+        "70e92007",
+        "6cc87eda",
+        "483222a",
+        "c9bebce4",
+        "5b8e46fd",
+        "4f551e73",
+        "40808d83",
+        "444b3f4e",
+        "1f4770e5",
+        "57e46ad6"
+      ]
+    }
+  }
+}
diff --git a/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/zh-CN.mdx b/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/zh-CN.mdx
index e269859..7d87c13 100644
--- a/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/zh-CN.mdx
+++ b/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/zh-CN.mdx
@@ -1,24 +1,140 @@
 ---
-title: 什么是`严格模式`？
-subtitle: 使用它有哪些利弊？
+title: JavaScript 中的 `'use strict';` 是什么？
+subtitle: 使用它有什么优点和缺点？
 ---
 
-`'use strict'`是一个用于对整个脚本或个别函数启用严格模式的语句。 严格模式是一种选择进入限制性的 JavaScript 变量的方式。
+## TL;DR
 
-## 优点
+`'use strict'` 是一条语句，用于对整个脚本或单个函数启用严格模式。严格模式是一种选择加入 JavaScript 限制变体的方式。
 
-- 不可能意外地创建全局变量。
-- 使得本来会默默失败的赋值抛出一个异常。
-- 试图删除不可删除的属性会抛出一个异常（在以前，这种尝试根本没有效果）。
-- 需要函数参数名称唯一。
-- `this`在全局上下文内是`undefined`。
-- 它能捕捉到一些常见的编码错误，抛出异常。
-- 它禁用了那些令人困惑或考虑不周的功能。
+**优点**
 
-## 缺点
+* 无法意外创建全局变量。
+* 使原本会静默失败的赋值抛出异常。
+* 使尝试删除不可删除的属性抛出异常（而之前尝试只会无效）。
+* 要求函数参数名称是唯一的。
+* `this` 在全局上下文中为 `undefined`。
+* 它可以捕获一些常见的编码错误，抛出异常。
+* 它禁用了令人困惑或考虑不周的功能。
 
-- 缺失许多一些开发者所习惯的功能。
-- 无法访问`function.caller` 和 `function.arguments`
-- 以不同的严格模式编写的脚本的串联可能会导致问题。
+**缺点**
 
-总的来说，好处大于弊端，实际上没有必要依赖严格模式所禁止的特点。 我们都应该默认使用严格模式。
+* 许多开发人员可能习惯的缺失功能。
+* 无法再访问 `function.caller` 和 `function.arguments`。
+* 用不同严格模式编写的脚本的串联可能会导致问题。
+
+总的来说，优点大于缺点，而且实际上没有必要依赖严格模式禁止的功能。我们都应该默认使用严格模式。
+
+***
+
+## JavaScript 中的 `"use strict"` 是什么？
+
+本质上，`"use strict"` 是 ECMAScript 5 (ES5) 中引入的一个指令，它向 JavaScript 引擎发出信号，表明它所包围的代码应该在“严格模式”下执行。严格模式施加了更严格的解析和错误处理规则，从本质上使您的代码更安全，更不容易出错。
+
+当您使用“use strict”时，它有助于您编写更简洁的代码，例如阻止您使用未声明的变量。它还可以使您的代码更安全，因为它禁止某些潜在的不安全操作。
+
+## 如何使用严格模式
+
+1. **全局范围**：要在全局启用严格模式，请在 JavaScript 文件的开头添加指令：
+
+   ```js live
+   'use strict';
+   // 此文件中的任何代码都将在严格模式下运行
+   function add(a, b) {
+     return a + b;
+   }
+   ```
+
+2. **局部范围**：要在函数内启用严格模式，请在函数的开头添加指令：
+
+   ```js live
+   function myFunction() {
+     'use strict';
+     // 这将告诉 JavaScript 引擎仅对 `myFunction` 使用严格模式
+     // 任何超出此函数范围的内容都将被视为非严格模式，除非指定使用严格模式
+   }
+   ```
+
+## 严格模式的主要特点
+
+1. **错误预防**：严格模式可防止常见错误，例如：
+   * 使用未声明的变量。
+   * 将值分配给不可写属性。
+   * 使用不存在的属性或变量。
+   * 删除不可删除的属性。
+   * 将保留关键字用作标识符。
+   * 在函数中复制参数名称。
+2. **提高安全性**：严格模式通过以下方式帮助编写更安全的代码：
+   * 阻止使用已弃用的功能，如 arguments.caller 和 arguments.callee。
+   * 限制使用 eval() 以防止在调用范围内声明变量。
+3. **兼容性**：严格模式通过阻止将保留关键字用作标识符来确保与未来版本的 JavaScript 的兼容性。
+
+### 示例
+
+1. 防止意外创建全局变量：
+
+   ```js live
+   // 没有严格模式
+
+   function defineNumber() {
+     count = 123;
+   }
+   defineNumber();
+   console.log(count); // 日志：123
+   ```
+
+   ```js live
+   'use strict'; // 使用严格模式
+
+   function strictFunc() {
+     'use strict';
+     strictVar = 123; // ReferenceError: strictVar is not defined
+   }
+   strictFunc();
+   console.log(strictVar); // ReferenceError: strictVar is not defined
+   ```
+
+2. 使原本会静默失败的赋值抛出异常：
+
+   ```js live
+   // 没有严格模式
+   NaN = 'foo'; // 这会静默失败
+   console.log(NaN); // 日志：NaN
+   ```
+
+   ```js live
+   'use strict'; // 使用严格模式
+   NaN = 'foo'; // Uncaught TypeError: Cannot assign to read only property 'NaN' of object '#<Window>'
+   ```
+
+3. 使尝试删除不可删除的属性在严格模式下抛出错误：
+
+   ```js live
+   // 没有严格模式
+   delete Object.prototype; // 这会静默失败
+   ```
+
+   ```js live
+   'use strict'; // 使用严格模式
+   delete Object.prototype; // TypeError: Cannot delete property 'prototype' of function Object() { [native code] }
+   ```
+
+## 真的有必要吗？
+
+在 JavaScript 中添加 `'use strict'` 仍然是有益的，并且是推荐的，但在所有情况下不再严格需要：
+
+1. **模块**：JavaScript 模块的全部内容会自动进入严格模式，无需 `'use strict'` 语句。这适用于 ES6 模块以及 Node.js CommonJS 模块。
+2. **类**：类定义中的代码也会自动进入严格模式，即使没有 `'use strict'`。
+
+虽然由于模块和类中的自动严格模式强制执行，`'use strict'` 不再在所有上下文中是强制性的，但它仍然被广泛推荐作为最佳实践，尤其是在核心 JavaScript 文件、库以及使用较旧的浏览器环境或旧代码时。
+
+### 注意事项
+
+1. **放置**：`'use strict'` 指令必须放置在文件或函数的开头。将其放置在其他任何地方都不会有任何效果。
+2. **兼容性**：除了 Internet Explorer 9 及更低版本外，所有现代浏览器都支持严格模式。
+3. **不可逆**：设置 `'use strict'` 后，无法取消它。
+
+## 延伸阅读
+
+* [严格模式 - MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)
+* [现代模式，"use strict"](https://javascript.info/strict-mode)
diff --git a/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.langnostic.json b/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.langnostic.json
new file mode 100644
index 0000000..0914d6b
--- /dev/null
+++ b/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.langnostic.json
@@ -0,0 +1,120 @@
+{
+  "frontmatter": {
+    "title": "6974cfc5"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "54a52842",
+        "46a782c8",
+        "1808bf91",
+        "61782055",
+        "eaa3a244",
+        "9635527a",
+        "5581e95a",
+        "15c31f38",
+        "9e8e09c6",
+        "8c44c71",
+        "591dd6a",
+        "f0aba9df",
+        "149c3df7",
+        "ca5833ce",
+        "4f775901",
+        "7a95c522",
+        "8023e346",
+        "2a7816d0",
+        "10cbc85f",
+        "e3924c2e",
+        "2aa37a6",
+        "7e71d639",
+        "273d5f60",
+        "98dc827f",
+        "424503ca",
+        "5d48d3e7",
+        "483d351d",
+        "9b3a39e8",
+        "b16b67a8",
+        "3d8d5e3c",
+        "dec59727",
+        "651727d0",
+        "a9f51aeb",
+        "ddb0f727",
+        "5f38e7de",
+        "f55a485",
+        "d554a30f",
+        "67f15da1",
+        "3f40b693",
+        "7f0da9d8",
+        "af58902a",
+        "f6fc9f53",
+        "64fc870",
+        "e9d547db",
+        "5fb6b66b",
+        "1bc04577",
+        "d3c7063b",
+        "2c6f377c",
+        "ccb6db0b",
+        "1f4770e5",
+        "705d5f5b"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "54a52842",
+        "46a782c8",
+        "1808bf91",
+        "61782055",
+        "eaa3a244",
+        "9635527a",
+        "5581e95a",
+        "15c31f38",
+        "9e8e09c6",
+        "8c44c71",
+        "591dd6a",
+        "f0aba9df",
+        "149c3df7",
+        "ca5833ce",
+        "4f775901",
+        "7a95c522",
+        "8023e346",
+        "2a7816d0",
+        "10cbc85f",
+        "e3924c2e",
+        "2aa37a6",
+        "7e71d639",
+        "273d5f60",
+        "98dc827f",
+        "424503ca",
+        "5d48d3e7",
+        "483d351d",
+        "9b3a39e8",
+        "b16b67a8",
+        "3d8d5e3c",
+        "dec59727",
+        "651727d0",
+        "a9f51aeb",
+        "ddb0f727",
+        "5f38e7de",
+        "f55a485",
+        "d554a30f",
+        "67f15da1",
+        "3f40b693",
+        "7f0da9d8",
+        "af58902a",
+        "f6fc9f53",
+        "64fc870",
+        "e9d547db",
+        "5fb6b66b",
+        "1bc04577",
+        "d3c7063b",
+        "2c6f377c",
+        "ccb6db0b",
+        "1f4770e5",
+        "705d5f5b"
+      ]
+    }
+  }
+}
diff --git a/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/zh-CN.mdx b/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/zh-CN.mdx
index 0a05152..6a62fc7 100644
--- a/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/zh-CN.mdx
+++ b/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/zh-CN.mdx
@@ -1,20 +1,113 @@
 ---
-title: 你用什么语言结构来迭代对象的属性和数组项目？
+title: JavaScript 中使用什么语言结构来迭代对象属性和数组项？
 ---
 
-## 对象
+## TL;DR
+
+在 JavaScript 中，有多种方法可以迭代对象属性和数组：
+
+**`for...in` 循环**
+
+`for...in` 循环遍历对象的所有可枚举属性，包括继承的可枚举属性。因此，如果您只想遍历对象的自有属性，进行检查非常重要
+
+```js live
+const obj = {
+  a: 1,
+  b: 2,
+  c: 3,
+};
+
+for (const key in obj) {
+  // To avoid iterating over inherited properties
+  if (Object.hasOwn(obj, key)) {
+    console.log(`${key}: ${obj[key]}`);
+  }
+}
+```
+
+**`Object.keys()`**
+
+`Object.keys()` 返回一个由对象自身的可枚举属性名称组成的数组。然后，您可以使用 for...of 循环或 forEach 遍历此数组。
+
+```js live
+const obj = {
+  a: 1,
+  b: 2,
+  c: 3,
+};
+
+Object.keys(obj).forEach((key) => {
+  console.log(`${key}: ${obj[key]}`);
+});
+```
+
+迭代数组最常见的方法是使用 `for` 循环和 `Array.prototype.forEach` 方法。
+
+**使用 `for` 循环**
+
+```js live
+let array = [1, 2, 3, 4, 5, 6];
+for (let index = 0; index < array.length; index++) {
+  console.log(array[index]);
+}
+```
+
+**使用 `Array.prototype.forEach` 方法**
+
+```js live
+let array = [1, 2, 3, 4, 5, 6];
+array.forEach((number, index) => {
+  console.log(`${number} at index ${index}`);
+});
+```
+
+**使用 `for...of`**
+
+此方法是迭代数组的最新和最方便的方法。它会自动迭代每个元素，而无需您管理索引。
+
+```js live
+const numbers = [1, 2, 3, 4, 5];
+
+for (const number of numbers) {
+  console.log(number);
+}
+```
+
+还有其他可用的内置方法，适用于特定场景，例如：
+
+* `Array.prototype.filter`：您可以使用 `filter` 方法创建一个新数组，其中仅包含满足特定条件的元素。
+* `Array.prototype.map`：您可以使用 `map` 方法基于现有数组创建一个新数组，并使用提供的函数转换每个元素。
+* `Array.prototype.reduce`：您可以使用 `reduce` 方法通过重复调用一个接受两个参数的函数（累积值和当前元素）将所有元素组合成一个值。
+
+***
+
+## 遍历对象
+
+在 JavaScript 中，遍历对象属性和数组非常常见，我们有多种方法可以实现这一点。以下是实现此目的的一些方法：
 
 ### `for...in` 语句
 
-```js
+此循环遍历对象的所有**可枚举**属性，包括从其原型链继承的属性。
+
+```js live
+const obj = {
+  status: 'working',
+  hoursWorked: 3,
+};
+
 for (const property in obj) {
   console.log(property);
 }
 ```
 
-`for...in`语句重复了对象的所有**可枚举**属性(包括继承的可枚举属性)。 因此，在使用对象前，您应该通过`Object.hasOwn(object, property)`检查该属性是否直接在对象上存在。
+由于 `for...in` 语句遍历对象的所有**可枚举**属性（包括继承的可枚举属性）。因此，大多数情况下，在使用属性之前，您应该通过 `Object.hasOwn(object, property)` 检查该属性是否存在于对象上。
+
+```js live
+const obj = {
+  status: 'working',
+  hoursWorked: 3,
+};
 
-```js
 for (const property in obj) {
   if (Object.hasOwn(obj, property)) {
     console.log(property);
@@ -22,45 +115,60 @@ for (const property in obj) {
 }
 ```
 
-请注意，`obj.hasOwnProperty()` 不推荐，因为它不适用于使用 `Object.create(null)` 创建的对象。 建议在较新的浏览器中使用[`Object.hasOwn()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn) 或者使用好的旧的 `Object.prototype.hasOwnProperty.call(object, key)`。
+请注意，不推荐使用 `obj.hasOwnProperty()`，因为它不适用于使用 `Object.create(null)` 创建的对象。建议在较新的浏览器中使用 [`Object.hasOwn()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn)，或者使用旧的 `Object.prototype.hasOwnProperty.call(object, key)`。
 
 ### `Object.keys()`
 
-```js
+`Object.keys()` 是一种静态方法，它将返回您传递给它的对象的所有可枚举属性名称的数组。由于 `Object.keys()` 返回一个数组，您也可以使用下面列出的数组迭代方法来遍历它。
+
+```js live
+const obj = {
+  status: 'working',
+  hoursWorked: 3,
+};
+
 Object.keys(obj).forEach((property) => {
   console.log(property);
 });
 ```
 
-`Object.keys()`是一个静态方法，它将返回你传递给它的对象的所有可枚举属性名称的数组。 既然`Object.keys()` 返回数组，你也可以使用下面列出的数组迭代方法进行迭代。
+### `Object.entries()`:
 
-_参考资料: [Object.keys() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)_
+此方法返回一个对象的可枚举属性的数组，以 `[key, value]` 对的形式。
+
+```js live
+const obj = { a: 1, b: 2, c: 3 };
+Object.entries(obj).forEach(([key, value]) => {
+  console.log(`${key}: ${value}`);
+});
+```
 
 ### `Object.getOwnPropertyNames()`
 
-```js
+```js live
+const obj = { a: 1, b: 2, c: 3 };
 Object.getOwnPropertyNames(obj).forEach((property) => {
   console.log(property);
 });
 ```
 
-`Object.getOwnPropertyNames()` 是一种静态方法，它将列出您通过的对象的所有可枚举和不可枚举的属性。 既然`Object.getOwnPropertyNames()` 返回数组，你也可以使用下面列出的数组迭代方法进行迭代。
-
-_参考资料: [Object.getOwnPropertyNames() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames)_
+`Object.getOwnPropertyNames()` 是一种静态方法，它将列出您传递给它的对象的所有可枚举和不可枚举属性。由于 `Object.getOwnPropertyNames()` 返回一个数组，您也可以使用下面列出的数组迭代方法来遍历它。
 
 ## 数组
 
-### "for" 循环
+### `for` 循环
 
-```js
+```js live
+const arr = [1, 2, 3, 4, 5];
 for (var i = 0; i < arr.length; i++) {
   console.log(arr[i]);
 }
 ```
 
-一个常见的陷阱是，`var`是在函数范围内，而不是在块范围内，大多数情况下，你想要块范围的迭代器变量。 ES2015 引入了`let`，它具有块的范围，建议使用`let`而不是`var`。
+这里一个常见的陷阱是 `var` 在函数作用域中，而不是块作用域中，并且大多数情况下您希望使用块作用域迭代器变量。 ES2015 引入了具有块作用域的 `let`，建议使用 `let` 而不是 `var`。
 
-```js
+```js live
+const arr = [1, 2, 3, 4, 5];
 for (let i = 0; i < arr.length; i++) {
   console.log(arr[i]);
 }
@@ -68,36 +176,41 @@ for (let i = 0; i < arr.length; i++) {
 
 ### `Array.prototype.forEach()`
 
-```js
+```js live
+const arr = [1, 2, 3, 4, 5];
 arr.forEach((element, index) => {
-  console.log(element, index);
+  console.log(`${element} at index ${index}`);
 });
 ```
 
-如果你不需要使用 "索引"，只需要单个数组元素，那么`Array.prototype.forEach()`方法有时会更方便。 然而，缺点是你不能中途停止迭代，提供的函数将在元素上执行一次。 如果你需要更精确地控制迭代，一个 `for` 循环或 `for...of` 语句就更具有相关性。
-
-_参考资料: [Array.prototype.forEach() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)_
+`Array.prototype.forEach()` 方法有时会更方便，如果您不需要使用 `index`，而您只需要单个数组元素。 但是，缺点是您无法中途停止迭代，并且提供的函数将在元素上执行一次。 如果您需要更好地控制迭代，`for` 循环或 `for...of` 语句会更相关。
 
 ### `for...of` 语句
 
-```js
+```js live
+const arr = [1, 2, 3, 4, 5];
 for (let element of arr) {
   console.log(element);
 }
 ```
 
-ES2015 引入了一种新的迭代方式，即`for-of`循环，它允许你在符合[可迭代协议](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol)的对象上循环，如`String`、`Array`、`Map`、`Set`等。 它将`for` 循环和 `forEach()` 方法的优点结合起来。 “for”循环的优点是你可以从中断开，而 "forEach() "的优点是它比 "for "循环更简明，因为你不需要一个计数器变量。 使用 "for...of "语句，你可以获得从循环中打断的能力和更简洁的语法。
+ES2015 引入了一种新的迭代方式，即 `for-of` 循环，它允许您循环访问符合 [iterable protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol) 的对象，例如 `String`、`Array`、`Map`、`Set` 等。 它结合了 `for` 循环和 `forEach()` 方法的优点。 `for` 循环的优点是您可以从中跳出，而 `forEach()` 的优点是它比 `for` 循环更简洁，因为您不需要计数器变量。 使用 `for...of` 语句，您可以同时获得跳出循环的能力和更简洁的语法。
 
-大多数时候，更推荐使用`.forEach`方法，但这真的取决于你想做什么。 在 ES2015 之前，当我们需要使用 `break` 提前终止循环时，我们使用了 `for` 循环。 但现在有了 ES2015，我们可以通过 `for...of` 语句来做到这一点。 当您需要更多的灵活性时，使用 "for" 循环，例如每个循环多次递增迭代器。
+大多数情况下，更喜欢 `.forEach` 方法，但这确实取决于您要执行的操作。 在 ES2015 之前，当我们需要使用 `break` 提前终止循环时，我们使用 `for` 循环。 但现在有了 ES2015，我们可以使用 `for...of` 语句来做到这一点。 当您需要更大的灵活性时，例如每次循环递增迭代器一次以上时，请使用 `for` 循环。
 
-另外，在使用`for...of`语句时，如果你需要同时访问每个数组元素的索引和值，你可以用 ES2015 的`Array.prototype. entries()`方法来实现：
+此外，在使用 `for...of` 语句时，如果您需要访问每个数组元素的索引和值，您可以使用 ES2015 `Array.prototype.entries()` 方法来实现：
 
-```js
+```js live
 const arr = ['a', 'b', 'c'];
 
 for (let [index, elem] of arr.entries()) {
-  console.log(index, ': ', elem);
+  console.log(index, elem);
 }
 ```
 
-_参考资料: [for...of - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)_
+## 延伸阅读
+
+* [Object.getOwnPropertyNames() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames)
+* [Object.keys() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)
+* [for...of - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
+* [Array.prototype.forEach() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
diff --git a/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.langnostic.json b/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.langnostic.json
new file mode 100644
index 0000000..5985f65
--- /dev/null
+++ b/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.langnostic.json
@@ -0,0 +1,48 @@
+{
+  "frontmatter": {
+    "title": "d9917568"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "d12ec8da",
+        "a498436f",
+        "2a7816d0",
+        "56d71ab6",
+        "eec4d8ed",
+        "6b616982",
+        "b6c09aeb",
+        "1c71c8cb",
+        "df8bf3dd",
+        "3dec99f0",
+        "7d3c403a",
+        "f647b995",
+        "fc53cfa0",
+        "72d375b6",
+        "95972e9"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "d12ec8da",
+        "a498436f",
+        "2a7816d0",
+        "56d71ab6",
+        "eec4d8ed",
+        "6b616982",
+        "b6c09aeb",
+        "1c71c8cb",
+        "df8bf3dd",
+        "3dec99f0",
+        "7d3c403a",
+        "f647b995",
+        "fc53cfa0",
+        "72d375b6",
+        "95972e9"
+      ]
+    }
+  }
+}
diff --git a/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/zh-CN.mdx b/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/zh-CN.mdx
index c33f6e0..1b25e4d 100644
--- a/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/zh-CN.mdx
+++ b/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/zh-CN.mdx
@@ -2,12 +2,57 @@
 title: 你使用什么工具和技术来调试 JavaScript 代码？
 ---
 
-- JavaScript
-  - [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)
-  - `debugger` 语句
-  - 传统的 `console.log()` 调试
-- React 和 Redux
-  - [React Devtools](https://github.com/facebook/react-devtools)
-  - [Redux Devtools](https://github.com/gaearon/redux-devtools)
-- Vue
-  - [Vue Devtools](https://github.com/vuejs/vue-devtools)
+## TL;DR
+
+一些最常用的调试 JavaScript 的工具和技术：
+
+* JavaScript 语言
+  * `console` 方法（例如 `console.log()`、`console.error()`、`console.warn()`、`console.table()`）
+  * `debugger` 语句
+* 断点（浏览器或 IDE）
+* JavaScript 框架
+  * [React Devtools](https://github.com/facebook/react-devtools)
+  * [Redux Devtools](https://github.com/gaearon/redux-devtools)
+  * [Vue Devtools](https://github.com/vuejs/vue-devtools)
+* 浏览器开发者工具
+  * **Chrome DevTools**：用于调试 JavaScript 的最广泛使用的工具。它提供了一套丰富的功能，包括设置断点、检查变量、查看调用堆栈等。
+  * **Firefox Developer Tools**：类似于 Chrome DevTools，具有自己的一套调试功能。
+  * **Safari Web Inspector**：提供用于在 Safari 上调试的工具。
+  * **Edge Developer Tools**：类似于 Chrome DevTools，因为 Edge 现在基于 Chromium。
+* 网络请求
+  * **Postman**：用于调试 API 调用的工具。
+  * **Fiddler**：帮助捕获和检查 HTTP/HTTPS 流量。
+  * **Charles Proxy**：另一个用于拦截和调试网络调用的工具。
+
+***
+
+## 调试 JavaScript
+
+以下是开发人员经常用于调试 JavaScript 代码的常用工具和技术。
+
+### `console` 方法
+
+* `console.log()`：在代码的各个点检查值、变量和数据结构的最基本方法。
+* `console.error()`：将错误输出到控制台，通常带有更详细的堆栈跟踪。
+* `console.warn()`：显示警告。
+* `console.table()`：以可读的表格格式显示数据（尤其是对象数组）。
+* `console.time()` 和 `console.timeEnd()`：测量代码块的执行时间。
+
+### `debugger` 语句
+
+* 在放置 `debugger;` 的行处暂停代码执行。
+* 允许您逐行单步执行代码、检查变量并了解执行流程。
+
+### 断点
+
+* 直接在浏览器开发者工具或 IDE（例如 VS Code）的“Sources”面板中设置断点，以在特定代码行处暂停执行，而无需修改源代码。
+
+### 网络选项卡
+
+* 监视 JavaScript 代码发出的网络请求（例如，AJAX 调用、获取数据）。
+* 检查请求标头、响应、计时并识别潜在问题。
+
+### 性能选项卡
+
+* 分析 JavaScript 代码以识别性能瓶颈。
+* 分析 CPU 使用率、内存分配和渲染时间。
diff --git a/questions/whats-a-typical-use-case-for-anonymous-functions/en-US.langnostic.json b/questions/whats-a-typical-use-case-for-anonymous-functions/en-US.langnostic.json
new file mode 100644
index 0000000..9eae9d8
--- /dev/null
+++ b/questions/whats-a-typical-use-case-for-anonymous-functions/en-US.langnostic.json
@@ -0,0 +1,62 @@
+{
+  "frontmatter": {
+    "title": "d748b60f"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "fcc123f4",
+        "f90dc81c",
+        "bf26a694",
+        "c1e1429e",
+        "2a7816d0",
+        "d6943a58",
+        "7e85fba5",
+        "dc42f778",
+        "6ac67ae2",
+        "379d9005",
+        "f63b97b0",
+        "7ff2671",
+        "6bc9b91e",
+        "4c7d0a8e",
+        "7ecc9a9d",
+        "823f400e",
+        "b3d2d2d8",
+        "51cfcd8f",
+        "f21e775b",
+        "7d2e4e7",
+        "ebd53803",
+        "f3f051bb"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "fcc123f4",
+        "f90dc81c",
+        "bf26a694",
+        "c1e1429e",
+        "2a7816d0",
+        "d6943a58",
+        "7e85fba5",
+        "dc42f778",
+        "6ac67ae2",
+        "379d9005",
+        "f63b97b0",
+        "7ff2671",
+        "6bc9b91e",
+        "4c7d0a8e",
+        "7ecc9a9d",
+        "823f400e",
+        "b3d2d2d8",
+        "51cfcd8f",
+        "f21e775b",
+        "7d2e4e7",
+        "ebd53803",
+        "f3f051bb"
+      ]
+    }
+  }
+}
diff --git a/questions/whats-a-typical-use-case-for-anonymous-functions/zh-CN.mdx b/questions/whats-a-typical-use-case-for-anonymous-functions/zh-CN.mdx
index b861e6f..a86a393 100644
--- a/questions/whats-a-typical-use-case-for-anonymous-functions/zh-CN.mdx
+++ b/questions/whats-a-typical-use-case-for-anonymous-functions/zh-CN.mdx
@@ -1,29 +1,94 @@
 ---
-title: 匿名函数的典型使用案例是什么？
+title: JavaScript 中匿名函数的典型用例是什么？
 ---
 
-它们可以用来封装局部范围内的某些代码，从而使声明的变量不致泄漏到全局范围。
+## TL;DR
 
-```js
+Javascript 中的匿名函数是指没有关联名称的函数。它们通常用作其他函数的参数或分配给变量。
+
+```js live
+const arr = [-1, 0, 5, 6];
+
+// The filter method is passed an anonymous function.
+arr.filter((x) => x > 1); // [5, 6]
+```
+
+它们通常用作其他函数的参数，这些函数被称为高阶函数，可以接受函数作为输入并返回函数作为输出。匿名函数可以访问来自外部作用域的变量，这个概念被称为闭包，允许它们“封闭”并记住创建它们的环境。
+
+```js live
+// Encapsulating Code
 (function () {
   // Some code here.
 })();
+
+// Callbacks
+setTimeout(function () {
+  console.log('Hello world!');
+}, 1000);
+
+// Functional programming constructs
+const arr = [1, 2, 3];
+const double = arr.map(function (el) {
+  return el * 2;
+});
+console.log(double); // [2, 4, 6]
 ```
 
-作为一个回调，只使用一次，不需要在其他地方使用。 当处理程序被定义在调用它们的代码中时，代码将显得更加自成一体和可读，而不是要在其他地方寻找函数体。
+***
 
-```js
-setTimeout(function () {
+## 匿名函数
+
+匿名函数提供了一种更简洁的定义函数的方式，尤其适用于简单操作或回调。除此之外，它们还可以用于以下场景
+
+### 立即执行
+
+匿名函数通常用于立即调用函数表达式 (IIFE)，以将代码封装在局部作用域内。这可以防止在函数内声明的变量泄漏到全局作用域并污染全局命名空间。
+
+```js live
+// This is an IIFE
+(function () {
+  var x = 10;
+  console.log(x); // 10
+})();
+
+// x is not accessible here
+console.log(typeof x); // undefined
+```
+
+在上面的例子中，IIFE 为变量 `x` 创建了一个局部作用域。因此，`x` 无法在 IIFE 之外访问，从而防止其泄漏到全局作用域。
+
+### 回调
+
+匿名函数可以用作仅使用一次且不需要在其他任何地方使用的回调。当处理程序在调用它们的代码内部定义时，代码看起来会更自包含且更具可读性，而不是必须在其他地方搜索以找到函数体。
+
+```js live
+setTimeout(() => {
   console.log('Hello world!');
 }, 1000);
 ```
 
-函数式编程结构或 Lodash 的参数（类似于回调）。
+### 高阶函数
+
+它用作函数式编程构造（如高阶函数或 Lodash（类似于回调））的参数。高阶函数将其他函数作为参数或将它们作为结果返回。匿名函数通常与高阶函数（如 `map()`、`filter()` 和 `reduce()`）一起使用。
 
-```js
+```js live
 const arr = [1, 2, 3];
-const double = arr.map(function (el) {
+const double = arr.map((el) => {
   return el * 2;
 });
 console.log(double); // [2, 4, 6]
 ```
+
+### 事件处理
+
+在 React 中，匿名函数被广泛用于定义内联回调函数，用于处理事件和将回调作为 props 传递。
+
+```jsx
+function App() {
+  return <button onClick={() => console.log('Clicked!')}>Click Me</button>;
+}
+```
+
+## 后续问题
+
+* 你能解释一下箭头函数和匿名函数的区别吗？
diff --git a/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.langnostic.json b/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.langnostic.json
new file mode 100644
index 0000000..0f49b6a
--- /dev/null
+++ b/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.langnostic.json
@@ -0,0 +1,57 @@
+{
+  "frontmatter": {
+    "title": "10679d6",
+    "subtitle": "192121c2"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "8c35b927",
+        "2a7816d0",
+        "c6cae930",
+        "f06bfc79",
+        "b5f04e40",
+        "39c5da5a",
+        "4bff8a9f",
+        "778e52ef",
+        "3e0be9f0",
+        "c8cfa87c",
+        "21dc7444",
+        "524e9e1c",
+        "139d4408",
+        "add698fb",
+        "b8a4ccbb",
+        "45da4e57",
+        "7cb058d1",
+        "ee9c1eea",
+        "66c731e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "8c35b927",
+        "2a7816d0",
+        "c6cae930",
+        "f06bfc79",
+        "b5f04e40",
+        "39c5da5a",
+        "4bff8a9f",
+        "778e52ef",
+        "3e0be9f0",
+        "c8cfa87c",
+        "21dc7444",
+        "524e9e1c",
+        "139d4408",
+        "add698fb",
+        "b8a4ccbb",
+        "45da4e57",
+        "7cb058d1",
+        "ee9c1eea",
+        "66c731e"
+      ]
+    }
+  }
+}
diff --git a/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/zh-CN.mdx b/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/zh-CN.mdx
index 9bd4819..6228f01 100644
--- a/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/zh-CN.mdx
+++ b/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/zh-CN.mdx
@@ -1,42 +1,78 @@
 ---
-title: '`null`, `undefined` 和未声明变量的区别是什么？'
-subtitle: 您将如何检查这些状态？”
+title: JavaScript 变量 `null`、`undefined` 和未声明的区别是什么？
+subtitle: 如何检查这些状态？
 ---
 
-**未声明** 当您将一个值分配给以前没有使用 `var`、`let` 或 `const`创建的标识符时，将创建变量。 未声明的变量将在目前范围之外在全球范围内加以界定。 在严格模式下，当你试图赋值到一个未声明的变量时，将会抛出一个 `ReferenceError` 。 未声明的变量是不好的，就像全局变量是不好的一样。 不惜一切代价避免他们！ 若要检查它们，将其用法放在一个`try`/`catch`块中。
+## TL;DR
 
-```js
+| 特性 | `null` | `undefined` | 未声明 |
+| --- | --- | --- | --- |
+| 含义 | 由开发人员显式设置，表示变量没有值 | 变量已声明但未赋值 | 变量根本未声明 |
+| 类型（通过 `typeof` 运算符） | `'object'` | `'undefined'` | `'undefined'` |
+| 等式比较 | `null == undefined` 为 `true` | `undefined == null` 为 `true` | 抛出 `ReferenceError` |
+
+***
+
+## 未声明
+
+**未声明** 变量是在您将值分配给先前未使用 `var`、`let` 或 `const` 创建的标识符时创建的。未声明的变量将在全局范围内定义，在当前范围之外。在严格模式下，当您尝试分配给未声明的变量时，将抛出 `ReferenceError`。未声明的变量和全局变量一样糟糕。不惜一切代价避免它们！要检查它们，请将其用法包装在 `try`/`catch` 块中。
+
+```js live
 function foo() {
-  x = 1; // Throws a ReferenceError in strict mode
+  x = 1; // 在严格模式下抛出 ReferenceError
 }
 
 foo();
-console.log(x); // 1
+console.log(x); // 1 (如果不在严格模式下)
+```
+
+对未声明的变量使用 `typeof` 运算符将给出 `'undefined'`。
+
+```js live
+console.log(typeof y === 'undefined'); // true
 ```
 
-一个 `undefined` 变量是一个已经声明的变量，但没有赋值。 它是`undefined`类型。 如果一个函数不返回任何值，作为执行它的结果赋值给一个变量，该变量的值也是`undefined`。 若要检查它，请使用严格平等(`===`) 运算符或 `typeof`其结果是`'undefined'` 字符串。 注意，你不应该使用抽象的平等运算符来检查，因为如果值是 `null`，它也会返回 `true`。
+## `undefined`
 
-```js
-var foo;
+一个 `undefined` 的变量是一个已声明但未赋值的变量。它的类型是 `undefined`。如果一个函数在执行后没有返回任何值，则该值也被分配给一个变量，该变量的值也为 `undefined`。要检查它，请使用严格相等运算符 (`===`) 或 `typeof` 进行比较，这将给出 `'undefined'` 字符串。请注意，您不应该使用松散相等运算符 (`==`) 进行检查，因为它在值为 `null` 时也会返回 `true`。
+
+```js live
+let foo;
 console.log(foo); // undefined
 console.log(foo === undefined); // true
 console.log(typeof foo === 'undefined'); // true
 
-console.log(foo == null); // true. 错了，不要用这个来检查!
+console.log(foo == null); // true. 错误，不要使用它来检查一个值是否为 undefined!
 
-function bar() {}
-var baz = bar();
+function bar() {} // 如果没有任何返回，则返回 undefined。
+let baz = bar();
 console.log(baz); // undefined
 ```
 
-一个 `null` 变量将被明确赋值给 `null` 的值。 它不代表任何价值，与 `undefined` 不同的是，它已被明确赋值。 要检查 `null` 只需使用严格的平等运算符进行比较。 注意，和上面一样，你不应该使用抽象的平等运算符（`==`）来检查，因为如果值是`undefined`，它也会返回`true`。
+## `null`
+
+一个 `null` 的变量将被显式地赋值为 `null` 值。它表示没有值，并且与 `undefined` 的不同之处在于它已被显式赋值。要检查 `null`，只需使用严格相等运算符进行比较。请注意，与上述类似，您不应该使用松散相等运算符 (`==`) 进行检查，因为它在值为 `undefined` 时也会返回 `true`。
 
-```js
-var foo = null;
+```js live
+const foo = null;
 console.log(foo === null); // true
 console.log(typeof foo === 'object'); // true
 
-console.log(foo == undefined); // true. Wrong, don't use this to check!
+console.log(foo == undefined); // true. 错误，不要使用它来检查一个值是否为 null!
 ```
 
-作为一个良好的习惯，永远不要让你的变量未被声明或未被赋值。 如果你还不打算使用它们，在声明后明确地将`null`赋值给它们。 如果你在工作流程中使用一些静态分析工具（如 ESLint、TypeScript 编译器），它通常也能检查你是否引用了未声明的变量。
+## 注意事项
+
+* 养成一个好习惯，永远不要让你的变量未声明或未赋值。如果您不打算使用它们，在声明后显式地将 `null` 赋值给它们。
+* 始终在变量使用前显式声明它们以防止错误。
+* 在您的工作流程中使用一些静态分析工具（例如 [ESLint](https://eslint.org/)、TypeScript 编译器），将启用您未引用未声明变量的检查。
+
+## 实践
+
+在 GreatFrontEnd 上练习实现 [检查 `null` 和 `undefined` 的类型实用程序](https://www.greatfrontend.com/questions/javascript/type-utilities?fpr=yangshun)。
+
+## 延伸阅读
+
+* [MDN Web 文档：null](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/null)
+* [MDN Web 文档：undefined](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined)
+* [MDN Web 文档：ReferenceError](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError)
diff --git a/questions/whats-the-difference-between-an-attribute-and-a-property/en-US.langnostic.json b/questions/whats-the-difference-between-an-attribute-and-a-property/en-US.langnostic.json
new file mode 100644
index 0000000..66e8ed2
--- /dev/null
+++ b/questions/whats-the-difference-between-an-attribute-and-a-property/en-US.langnostic.json
@@ -0,0 +1,60 @@
+{
+  "frontmatter": {
+    "title": "d07c950f"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "6eb4cf3b",
+        "2a7816d0",
+        "62039457",
+        "e290a7f5",
+        "406bf1ac",
+        "748ffe75",
+        "d537b631",
+        "e232568f",
+        "cdb066d8",
+        "c507b595",
+        "748ffe75",
+        "39e0d5ed",
+        "584d5660",
+        "67423e0a",
+        "a5795553",
+        "748ffe75",
+        "719fed3a",
+        "3dd8e583",
+        "ff3acc5",
+        "1f4770e5",
+        "3f468a42"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "6eb4cf3b",
+        "2a7816d0",
+        "62039457",
+        "e290a7f5",
+        "406bf1ac",
+        "748ffe75",
+        "d537b631",
+        "e232568f",
+        "cdb066d8",
+        "c507b595",
+        "748ffe75",
+        "39e0d5ed",
+        "584d5660",
+        "67423e0a",
+        "a5795553",
+        "748ffe75",
+        "719fed3a",
+        "3dd8e583",
+        "ff3acc5",
+        "1f4770e5",
+        "3f468a42"
+      ]
+    }
+  }
+}
diff --git a/questions/whats-the-difference-between-an-attribute-and-a-property/zh-CN.mdx b/questions/whats-the-difference-between-an-attribute-and-a-property/zh-CN.mdx
index df1a5de..51095a1 100644
--- a/questions/whats-the-difference-between-an-attribute-and-a-property/zh-CN.mdx
+++ b/questions/whats-the-difference-between-an-attribute-and-a-property/zh-CN.mdx
@@ -1,18 +1,72 @@
 ---
-title: '"attribute" 和 "property" 之间有什么区别？'
+title: DOM 中“attribute”和“property”有什么区别？
 ---
 
-"attribute"定义在 HTML 标记上，但"property"定义在 DOM 上。 为了说明不同之处，请想象我们在 HTML 中有这个 Input：`<input type="text" value="Hello">`.
+## TL;DR
 
-```js
-const input = document.querySelector('input');
-console.log(input.getAttribute('value')); // Hello
-console.log(input.value); // Hello
+Attributes 在 HTML 中定义，为属性提供初始值。属性是 DOM 的一部分，表示元素的当前状态。例如，`<input>` 元素的 `value` 属性设置其初始值，而 `value` 属性反映用户与之交互时的当前值。
+
+***
+
+## DOM 中“attribute”和“property”有什么区别
+
+### Attributes
+
+Attributes 在 HTML 标记中定义，为元素提供初始值。它们是静态的，一旦页面加载后就不会改变，除非使用 JavaScript 显式修改。
+
+#### 示例
+
+```html
+<input type="text" value="initial value" />
 ```
 
-但在你通过添加 "World!" 来改变文本字段的值后，这就变成了：
+在此示例中，`value="initial value"` 是一个 attribute。
 
-```js
-console.log(input.getAttribute('value')); // Hello
-console.log(input.value); // Hello World!
+### Properties
+
+Properties 是 DOM 的一部分，表示元素的当前状态。它们是动态的，可以随着用户与页面交互或通过 JavaScript 而改变。
+
+#### 示例
+
+```javascript
+const inputElement = document.querySelector('input');
+console.log(inputElement.value); // 记录输入元素的当前值
+inputElement.value = 'new value'; // 更改输入元素的当前值
 ```
+
+在此示例中，`value` 是 `inputElement` 对象的属性。
+
+### 关键区别
+
+* **初始化**：Attributes 初始化 DOM 属性。
+* **状态**：Attributes 是静态的，而属性是动态的。
+* **访问**：可以使用 `getAttribute` 和 `setAttribute` 方法访问 Attributes，而可以直接在 DOM 对象上访问属性。
+
+#### 示例
+
+```html
+<input id="myInput" type="text" value="initial value" />
+```
+
+```javascript
+const inputElement = document.getElementById('myInput');
+
+// 访问 attribute
+console.log(inputElement.getAttribute('value')); // "initial value"
+
+// 访问 property
+console.log(inputElement.value); // "initial value"
+
+// 更改 property
+inputElement.value = 'new value';
+console.log(inputElement.value); // "new value"
+console.log(inputElement.getAttribute('value')); // "initial value"
+```
+
+在此示例中，更改 `value` 属性不会影响 `value` attribute。
+
+## 延伸阅读
+
+* [MDN Web 文档：Element.getAttribute()](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getAttribute)
+* [MDN Web 文档：Element.setAttribute()](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/setAttribute)
+* [MDN Web 文档：HTML 属性与 DOM 属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes#html_attributes_vs_dom_properties)
diff --git a/questions/whats-the-difference-between-call-and-apply/en-US.langnostic.json b/questions/whats-the-difference-between-call-and-apply/en-US.langnostic.json
new file mode 100644
index 0000000..2921954
--- /dev/null
+++ b/questions/whats-the-difference-between-call-and-apply/en-US.langnostic.json
@@ -0,0 +1,78 @@
+{
+  "frontmatter": {
+    "title": "bcea1662"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "dea192c",
+        "7dd15469",
+        "8f205c71",
+        "4e7671c3",
+        "2a7816d0",
+        "3c2f5705",
+        "a4d8526c",
+        "fbc30aaa",
+        "4e7671c3",
+        "60a757ae",
+        "4616869d",
+        "c81ac723",
+        "10c2d5c6",
+        "407e6940",
+        "5ca3e2c3",
+        "a668cef3",
+        "33ae0ea0",
+        "c3c7b446",
+        "37d72bcb",
+        "c46e5768",
+        "6e51c84c",
+        "97cae6df",
+        "4dd0a15b",
+        "883bd926",
+        "ebd53803",
+        "e8a456cd",
+        "45da4e57",
+        "df14f9a5",
+        "ee9c1eea",
+        "692eb18f"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "dea192c",
+        "7dd15469",
+        "8f205c71",
+        "4e7671c3",
+        "2a7816d0",
+        "3c2f5705",
+        "a4d8526c",
+        "fbc30aaa",
+        "4e7671c3",
+        "60a757ae",
+        "4616869d",
+        "c81ac723",
+        "10c2d5c6",
+        "407e6940",
+        "5ca3e2c3",
+        "a668cef3",
+        "33ae0ea0",
+        "c3c7b446",
+        "37d72bcb",
+        "c46e5768",
+        "6e51c84c",
+        "97cae6df",
+        "4dd0a15b",
+        "883bd926",
+        "ebd53803",
+        "e8a456cd",
+        "45da4e57",
+        "df14f9a5",
+        "ee9c1eea",
+        "692eb18f"
+      ]
+    }
+  }
+}
diff --git a/questions/whats-the-difference-between-call-and-apply/zh-CN.mdx b/questions/whats-the-difference-between-call-and-apply/zh-CN.mdx
index b9e498d..a54eb49 100644
--- a/questions/whats-the-difference-between-call-and-apply/zh-CN.mdx
+++ b/questions/whats-the-difference-between-call-and-apply/zh-CN.mdx
@@ -1,10 +1,34 @@
 ---
-title: '`.call`和`.apply`之间有什么区别？'
+title: JavaScript 中`.call` 和 `.apply` 有什么区别？
 ---
 
-`.call`和`.apply`都用于调用函数，而第一个参数将用作函数中`this`的值。 然而，`.call`以逗号分隔的参数作为下一个参数，而`.apply`则以一系列参数作为下一个参数。 记住这一点的一个简单方法是 C for `call` and comma-separated and A for `appy` and an array of arguments。
+## TL;DR
 
-```js
+`.call` 和 `.apply` 都用于使用特定的 `this` 上下文和参数来调用函数。主要区别在于它们接受参数的方式：
+
+* `.call(thisArg, arg1, arg2, ...)`：单独获取参数。
+* `.apply(thisArg, [argsArray])`：将参数作为数组获取。
+
+假设我们有一个函数 `add`，可以使用以下方式使用 `.call` 和 `.apply` 调用该函数：
+
+```js live
+function add(a, b) {
+  return a + b;
+}
+
+console.log(add.call(null, 1, 2)); // 3
+console.log(add.apply(null, [1, 2])); // 3
+```
+
+***
+
+## Call vs Apply
+
+`.call` 和 `.apply` 都用于调用函数，第一个参数将用作函数中 `this` 的值。但是，`.call` 将逗号分隔的参数作为下一个参数，而 `.apply` 将参数数组作为下一个参数。
+
+记住这一点的一个简单方法是 C 代表 `call` 和逗号分隔，A 代表 `apply` 和参数数组。
+
+```js live
 function add(a, b) {
   return a + b;
 }
@@ -12,3 +36,83 @@ function add(a, b) {
 console.log(add.call(null, 1, 2)); // 3
 console.log(add.apply(null, [1, 2])); // 3
 ```
+
+使用 ES6 语法，我们可以使用数组以及用于参数的扩展运算符来调用 `call`。
+
+```js live
+function add(a, b) {
+  return a + b;
+}
+
+console.log(add.call(null, ...[1, 2])); // 3
+```
+
+## 用例
+
+### 上下文管理
+
+`.call` 和 `.apply` 可以在调用不同对象上的方法时显式设置 `this` 上下文。
+
+```js live
+const person = {
+  name: 'John',
+  greet() {
+    console.log(`Hello, my name is ${this.name}`);
+  },
+};
+
+const anotherPerson = { name: 'Alice' };
+
+person.greet.call(anotherPerson); // Hello, my name is Alice
+person.greet.apply(anotherPerson); // Hello, my name is Alice
+```
+
+### 函数借用
+
+`.call` 和 `.apply` 都允许从一个对象借用方法并在另一个对象的上下文中使它们。当将函数作为参数（回调）传递并且原始 `this` 上下文丢失时，这很有用。`.call` 和 `.apply` 允许使用预期的 `this` 值调用该函数。
+
+```js live
+function greet() {
+  console.log(`Hello, my name is ${this.name}`);
+}
+
+const person1 = { name: 'John' };
+const person2 = { name: 'Alice' };
+
+greet.call(person1); // Hello, my name is John
+greet.call(person2); // Hello, my name is Alice
+```
+
+### 调用对象方法的替代语法
+
+`.apply` 可以通过将对象作为第一个参数传递，然后传递通常的参数来与对象方法一起使用。
+
+```js live
+const arr1 = [1, 2, 3];
+const arr2 = [4, 5, 6];
+
+Array.prototype.push.apply(arr1, arr2); // Same as arr1.push(4, 5, 6)
+
+console.log(arr1); // [1, 2, 3, 4, 5, 6]
+```
+
+分解上述内容：
+
+1. 第一个对象 `arr1` 将用作 `this` 值。
+2. 在 `arr1` 上调用 `.push()`，使用 `arr2` 作为参数数组，因为它使用 `.apply()`。
+3. `Array.prototype.push.apply(arr1, arr2)` 等同于 `arr1.push(...arr2)`。
+
+可能并不明显，但 `Array.prototype.push.apply(arr1, arr2)` 会导致修改 `arr1`。如果可能，使用面向 OOP 的方式调用方法会更清晰。
+
+## 后续问题
+
+* `.call` 和 `.apply` 与 `Function.prototype.bind` 有什么不同？
+
+## 实践
+
+在 GreatFrontEnd 上实践实现你自己的 [`Function.prototype.call` 方法](/questions/javascript/function-call) 和 [`Function.prototype.apply` 方法](/questions/javascript/function-apply)。
+
+## 延伸阅读
+
+* [Function.prototype.call | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call)
+* [Function.prototype.apply | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)
diff --git a/questions/when-would-you-use-document-write/en-US.langnostic.json b/questions/when-would-you-use-document-write/en-US.langnostic.json
new file mode 100644
index 0000000..67c2a44
--- /dev/null
+++ b/questions/when-would-you-use-document-write/en-US.langnostic.json
@@ -0,0 +1,54 @@
+{
+  "frontmatter": {
+    "title": "203bd99f"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "313058cf",
+        "2a7816d0",
+        "23571c3b",
+        "b4a97c71",
+        "9dade4a6",
+        "ad56e8e9",
+        "d994ea66",
+        "38bcc14d",
+        "f227c95f",
+        "2a7b55d3",
+        "75a13951",
+        "614d066a",
+        "26261459",
+        "879c06d9",
+        "105817f6",
+        "99fd8806",
+        "1f4770e5",
+        "fd2e97ad"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "313058cf",
+        "2a7816d0",
+        "23571c3b",
+        "b4a97c71",
+        "9dade4a6",
+        "ad56e8e9",
+        "d994ea66",
+        "38bcc14d",
+        "f227c95f",
+        "2a7b55d3",
+        "75a13951",
+        "614d066a",
+        "26261459",
+        "879c06d9",
+        "105817f6",
+        "99fd8806",
+        "1f4770e5",
+        "fd2e97ad"
+      ]
+    }
+  }
+}
diff --git a/questions/when-would-you-use-document-write/zh-CN.mdx b/questions/when-would-you-use-document-write/zh-CN.mdx
index 3a57665..62c3b1d 100644
--- a/questions/when-would-you-use-document-write/zh-CN.mdx
+++ b/questions/when-would-you-use-document-write/zh-CN.mdx
@@ -1,7 +1,67 @@
 ---
-title: 您什么时候使用 `document.write()`？
+title: 你会在什么时候使用 `document.write()`？
 ---
 
-`document.write()`将一串文本写入由`document.open()`打开的文档流。 当`document.write()`在页面加载后被执行时，它将调用`document.open`来清除整个文档（`<head>`和`<body>`被移除！）。 并用给定的参数值替换内容。 因此，它通常被认为是危险的，容易被滥用。
+## TL;DR
 
-网上有一些答案，解释说`document.write()`被用于分析代码或[当你想包括只有在启用 JavaScript 的情况下才应该工作的样式](https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html)。 它甚至被用于 HTML5 模板中，以[并行加载脚本并保留执行顺序](https://github.com/paulirish/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag)! 然而，这些原因可能已经过时，在这个时代，可以在没有使用“document.write()”的情况下实现。
+`document.write()` 在现代 Web 开发中很少使用，因为它在页面加载后调用时会覆盖整个文档。它主要用于在初始页面加载期间编写内容等简单任务，例如用于教育目的或快速调试。但是，通常建议使用其他方法，如 `innerHTML`、`appendChild()` 或现代框架来操作 DOM。
+
+***
+
+## 你会在什么时候使用 `document.write()`？
+
+### 初始页面加载
+
+`document.write()` 可用于在初始页面加载期间将内容直接写入文档。这是它可能适用的少数情况之一，因为它对于非常基本的任务可能更简单、更快。
+
+```html
+<!doctype html>
+<html>
+  <head>
+    <title>Document Write Example</title>
+  </head>
+  <body>
+    <script>
+      document.write('<h1>Hello, World!</h1>');
+    </script>
+  </body>
+</html>
+```
+
+### 教育目的
+
+`document.write()` 有时用于教育环境中，以演示基本的 JavaScript 概念。它提供了一种直接的方式来展示 JavaScript 如何操作 DOM。
+
+### 快速调试
+
+对于快速而粗略的调试，`document.write()` 可用于将变量或消息直接输出到文档。但是，不建议在生产代码中使用此方法。
+
+```javascript
+var debugMessage = 'Debugging message';
+document.write(debugMessage);
+```
+
+### 遗留代码
+
+在一些较旧的代码库中，你可能会遇到 `document.write()`。虽然不建议在新项目中使用它，但了解它对于维护或重构旧代码可能很有用。
+
+### 为什么不使用 `document.write()`？
+
+* **覆盖文档**：如果在页面加载后调用，`document.write()` 将覆盖整个文档，这可能导致内容丢失和糟糕的用户体验。
+* **更好的替代方案**：像 `innerHTML`、`appendChild()` 和 React 或 Vue 等框架的现代方法提供了更多控制，并且使用起来更安全。
+
+```javascript
+// 使用 innerHTML
+document.getElementById('content').innerHTML = '<h1>Hello, World!</h1>';
+
+// 使用 appendChild
+var newElement = document.createElement('h1');
+newElement.textContent = 'Hello, World!';
+document.getElementById('content').appendChild(newElement);
+```
+
+## 延伸阅读
+
+* [MDN Web Docs on document.write()](https://developer.mozilla.org/en-US/docs/Web/API/Document/write)
+* [Why is document.write() considered harmful?](https://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice)
+* [Modern DOM manipulation methods](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction#modifying_the_document)
diff --git a/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.langnostic.json b/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.langnostic.json
new file mode 100644
index 0000000..a08487d
--- /dev/null
+++ b/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.langnostic.json
@@ -0,0 +1,56 @@
+{
+  "frontmatter": {
+    "title": "a19f7675"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "6d141d1d",
+        "46a1b24c",
+        "2a7816d0",
+        "586cafbb",
+        "969c6da4",
+        "a63e85b",
+        "a11dd609",
+        "b1773384",
+        "e42d2d0",
+        "ad795303",
+        "b7cb65a1",
+        "5346abd9",
+        "286c84ee",
+        "a679f64a",
+        "9f4d3f30",
+        "a7812e83",
+        "bc867a5b",
+        "1f4770e5",
+        "44815e13"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "6d141d1d",
+        "46a1b24c",
+        "2a7816d0",
+        "586cafbb",
+        "969c6da4",
+        "a63e85b",
+        "a11dd609",
+        "b1773384",
+        "e42d2d0",
+        "ad795303",
+        "b7cb65a1",
+        "5346abd9",
+        "286c84ee",
+        "a679f64a",
+        "9f4d3f30",
+        "a7812e83",
+        "bc867a5b",
+        "1f4770e5",
+        "44815e13"
+      ]
+    }
+  }
+}
diff --git a/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/zh-CN.mdx b/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/zh-CN.mdx
index cc7716d..d84ec0a 100644
--- a/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/zh-CN.mdx
+++ b/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/zh-CN.mdx
@@ -1,7 +1,69 @@
 ---
-title: 为什么扩展内置的 JavaScript 对象不是一个好主意？
+title: 为什么扩展内置 JavaScript 对象不是一个好主意？
 ---
 
-扩展内置/原生 JavaScript 对象意味着将属性/函数添加到其“原型”中。 虽然起初这似乎是一个好主意，但在实践中却是危险的。 想象一下，你的代码使用了几个库，通过添加相同的 `contains` 方法它们都扩展了 `Array.prototype` ， 实现将互相覆盖，如果这两种方法的行为不一致，你的代码将会被破坏。
+## TL;DR
 
-你可能想要扩展一个本地对象的唯一情况是，你想要创建一个 polyfill，本质上是为一个方法提供你自己的实现，这个方法是 JavaScript 规范的一部分，但由于用户的浏览器是一个旧的浏览器，所以可能不存在。
+扩展内置/原生 JavaScript 对象意味着向其 `prototype` 添加属性/函数。虽然这乍一看可能是一个好主意，但实际上很危险。想象一下，您的代码使用了几个库，它们都通过添加相同的 `contains` 方法来扩展 `Array.prototype`，这些实现将相互覆盖，如果这两种方法的工作方式不同，您的代码将具有不可预测的行为。
+
+只有当您想创建一个 polyfill 时，才可能需要扩展原生对象，本质上是为您自己的方法提供实现，该方法是 JavaScript 规范的一部分，但由于它是一个较旧的浏览器，可能不存在于用户的浏览器中。
+
+***
+
+## 扩展 JavaScript
+
+在 JavaScript 中，扩展内置/原生对象非常容易。您只需通过向其 `prototype` 添加属性和函数来扩展内置对象。
+
+```js live
+String.prototype.reverseString = function () {
+  return this.split('').reverse().join('');
+};
+
+console.log('hello world'.reverseString()); // Outputs 'dlrow olleh'
+
+// Instead of extending the built-in object, write a pure utility function to do it.
+
+function reverseString(str) {
+  return str.split('').reverse().join('');
+}
+
+console.log(reverseString('hello world')); // Outputs 'dlrow olleh'
+```
+
+## 缺点
+
+扩展内置 JavaScript 对象本质上是在修改全局范围，这不是一个好主意，因为：
+
+1. **面向未来**：如果浏览器决定实现自己的方法版本，您的自定义扩展可能会被静默覆盖，从而导致意外行为或冲突。
+2. **冲突**：向内置对象添加自定义方法可能会导致与未来的浏览器实现或其他库发生冲突，从而导致意外行为或错误。
+3. **维护和调试**：扩展内置对象时，其他开发人员可能难以理解所做的更改，从而使维护和调试更具挑战性。
+4. **性能**：扩展内置对象可能会影响性能，特别是如果扩展未针对特定用例进行优化。
+5. **安全性**：在某些情况下，如果未正确执行，扩展内置对象可能会引入安全漏洞，例如添加可被恶意代码利用的可枚举属性。
+6. **兼容性**：对内置对象的自定义扩展可能与并非所有浏览器或环境兼容，从而导致跨浏览器兼容性问题。
+7. **命名空间冲突**：如果多个库或脚本以不同的方式扩展同一对象，扩展内置对象可能会导致命名空间冲突，从而导致冲突和意外行为。
+
+我们深入探讨了[为什么修改全局范围不是一个好主意](/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it)。
+
+由于这些潜在问题，不建议扩展内置对象，而是建议使用组合或创建自定义类和实用程序函数来实现所需的功能。
+
+## 扩展内置对象的替代方案
+
+不要扩展内置对象，而是执行以下操作：
+
+1. **创建自定义实用程序函数**：对于简单的任务，创建特定于您需求的小型实用程序函数可以成为更清晰、更易于维护的解决方案。
+2. **使用库和框架**：许多库和框架都提供自己的辅助方法和扩展，从而无需直接修改内置对象。
+
+## 作为有效原因的 Polyfilling
+
+扩展内置对象的一个有效原因是为最新的 ECMAScript 标准和提案实现 polyfill。[`core-js`](https://github.com/zloirock/core-js) 是一个流行的库，存在于大多数流行的网站上。它不仅会 polyfill 缺失的功能，还会修复各种浏览器和运行时中 JavaScript 功能的不正确或不兼容的实现。
+
+```js
+import 'core-js/actual/array/flat-map'; // With this, Array.prototype.flatMap is available to be used.
+
+[1, 2].flatMap((it) => [it, it]); // => [1, 1, 2, 2]
+```
+
+## 延伸阅读
+
+* [JS: don't extend JS objects](https://lucybain.com/blog/2014/js-extending-built-in-objects/)
+* [Extending built-in classes](https://javascript.info/extend-natives)
diff --git a/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.langnostic.json b/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.langnostic.json
new file mode 100644
index 0000000..55ad7b6
--- /dev/null
+++ b/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.langnostic.json
@@ -0,0 +1,66 @@
+{
+  "frontmatter": {
+    "title": "6c212798"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "a205d777",
+        "cde7b226",
+        "4b652bee",
+        "28747c51",
+        "2a7816d0",
+        "2c31338e",
+        "2af285c6",
+        "a2cf7bc1",
+        "ce7c2459",
+        "988d0dfa",
+        "3b347d52",
+        "2bc8952c",
+        "1c2ab82d",
+        "3de51dde",
+        "b7d3be0",
+        "da0047e6",
+        "4592edd0",
+        "76018cb7",
+        "3328656",
+        "2ededf7a",
+        "c9a2ab27",
+        "2a7816d0",
+        "1f4770e5",
+        "d1dc74c3"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "a205d777",
+        "cde7b226",
+        "4b652bee",
+        "28747c51",
+        "2a7816d0",
+        "2c31338e",
+        "2af285c6",
+        "a2cf7bc1",
+        "ce7c2459",
+        "988d0dfa",
+        "3b347d52",
+        "2bc8952c",
+        "1c2ab82d",
+        "3de51dde",
+        "b7d3be0",
+        "da0047e6",
+        "4592edd0",
+        "76018cb7",
+        "3328656",
+        "2ededf7a",
+        "c9a2ab27",
+        "2a7816d0",
+        "1f4770e5",
+        "d1dc74c3"
+      ]
+    }
+  }
+}
diff --git a/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/zh-CN.mdx b/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/zh-CN.mdx
index d75e1e0..a1cd964 100644
--- a/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/zh-CN.mdx
+++ b/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/zh-CN.mdx
@@ -1,5 +1,115 @@
 ---
-title: 为什么通常最好保留网站的全局作用域不做任何修改?
+title: 为什么一般来说，最好保持网站的全局 JavaScript 作用域不变，并且永远不要触及它？
 ---
 
-在浏览器中执行的 JavaScript 可以访问全局范围，如果每个人都使用全局命名空间来定义他们的变量，很可能会发生碰撞。 使用模块模式(IIFEs) 在本地命名空间中封装你的变量。
+## 总结
+
+在浏览器中执行的 JavaScript 可以访问全局作用域（`window` 对象）。一般来说，不污染全局命名空间是一个很好的软件工程实践，除非你正在处理一个真正需要全局的特性——整个页面都需要它。避免触及全局作用域的几个原因：
+
+* **命名冲突**：在脚本之间共享全局作用域可能导致冲突和错误，当引入新的全局变量或进行更改时。
+* **全局命名空间混乱**：保持全局命名空间最小化可以避免使代码库难以管理和维护。
+* **作用域泄漏**：在闭包或事件处理程序中无意中引用全局变量可能导致内存泄漏和性能问题。
+* **模块化和封装**：良好的设计促进将变量和函数保持在其特定作用域内，从而增强组织性、可重用性和可维护性。
+* **安全问题**：全局变量可被所有脚本访问，包括潜在的恶意脚本，这会带来安全风险，特别是如果敏感数据存储在其中。
+* **兼容性和可移植性**：过度依赖全局变量会降低代码的可移植性，并降低与其他库或框架的集成难度。
+
+遵循这些最佳实践以避免全局作用域污染：
+
+* **使用局部变量**：使用 `var`、`let` 或 `const` 在函数或代码块内声明变量以限制其作用域。
+* **将变量作为函数参数传递**：通过将变量作为参数传递而不是全局访问它们来保持封装。
+* **使用立即调用函数表达式（IIFE）**：使用 IIFE 创建新作用域以防止将变量添加到全局作用域。
+* **使用模块**：使用模块系统封装代码以保持独立的作用域和可管理性。
+
+***
+
+## 什么是全局作用域？
+
+在浏览器中，全局作用域是顶级上下文，变量、函数和对象可以从代码中的任何位置访问。全局作用域由 `window` 对象表示。在任何函数或代码块（即不在任何模块内）之外声明的任何变量或函数都会添加到 `window` 对象中，并且可以在全局范围内访问。
+
+例如：
+
+```js
+// 假设这在全局作用域中运行，而不是在模块中。
+var globalVariable = '我是全局变量';
+function globalFunction() {
+  console.log('我是一个全局函数');
+}
+
+console.log(window.globalVariable); // '我是全局变量'
+window.globalFunction(); // '我是一个全局函数'
+```
+
+在此示例中，`globalVariable` 和 `globalFunction` 被添加到 `window` 对象中，并且可以从全局上下文中的任何位置访问。
+
+## 全局作用域的陷阱
+
+一般来说，不污染全局命名空间是一个很好的软件工程实践，除非你正在处理一个真正需要全局的特性——整个页面都需要它。有很多原因可以避免触及全局作用域：
+
+* **命名冲突**：全局作用域在网页上的所有脚本之间共享。如果你引入新的全局变量或修改现有的全局变量，你可能会导致与在同一页面上使用的其他脚本或库发生命名冲突。这可能导致意外行为和难以调试的问题。
+* **全局命名空间混乱**：全局命名空间应保持尽可能干净和最小。添加不必要的全局变量或函数会使命名空间混乱，并使代码库随着时间的推移更难于管理和维护。
+* **作用域泄漏**：在使用闭包或事件处理程序时，很容易意外地创建对全局变量的无意引用，从而导致内存泄漏和性能问题。通过完全避免全局变量，你可以防止这些类型的作用域泄漏。
+* **模块化和封装**：良好软件设计原则之一是模块化和封装。通过将变量和函数保留在其各自的作用域内（例如，模块、函数或块作用域），你可以促进更好的代码组织、可重用性和可维护性。
+* **安全问题**：全局变量可以被页面上运行的任何脚本访问和修改，包括潜在的恶意脚本。网站加载第三方脚本是很常见的，如果有人网络被入侵，这可能会带来安全风险，特别是如果敏感数据存储在全局变量中。但是，首先你不应该在客户端上暴露任何敏感数据。
+* **兼容性和可移植性**：通过严重依赖全局变量，你的代码变得不太可移植，并且更依赖于编写它的特定环境。这可能会使它更难以与其他库或框架集成，或者在不同的环境中运行代码（例如，服务器端与浏览器）。
+
+这是一个使用全局作用域的例子。
+
+```js live
+// 假设这在全局作用域中运行，而不是在模块中。
+let count = 0;
+
+function incrementCount() {
+  count++;
+  console.log(count);
+}
+
+function decrementCount() {
+  count--;
+  console.log(count);
+}
+
+incrementCount(); // 输出：1
+decrementCount(); // 输出：0
+```
+
+在此示例中，`count`、`incrementCount` 和 `decrementCount` 在全局作用域中定义。页面上的任何脚本都可以访问和修改 `count`，以及 `window` 上的所有变量。
+
+## 避免全局作用域污染
+
+到目前为止，我们希望您相信在全局范围内定义变量不是一个好主意。为了避免污染全局范围，建议遵循最佳实践，例如：
+
+* **使用局部变量**：在函数或代码块内声明变量，以限制其作用域，防止它们被全局访问。使用 `var`、`let` 或 `const` 在特定作用域内声明变量，确保它们不会被意外地设置为全局变量。
+* **将变量作为函数参数传递**：不要直接从外部作用域访问变量，而是将它们作为参数传递给函数，以保持封装并避免全局作用域污染。
+* **使用模块**：利用模块系统来封装你的代码，防止全局作用域污染。每个模块都有自己的作用域，这使得管理和维护你的代码更容易。
+* **使用立即调用函数表达式（IIFE）**：如果模块不可用，将你的代码包装在 IIFE 中以创建一个新的作用域，防止变量被添加到全局作用域，除非你明确地暴露它们。
+
+```js live
+// Assuming this is run in the global scope, not within a module.
+(function () {
+  let count = 0;
+
+  window.incrementCount = function () {
+    count++;
+    console.log(count);
+  };
+
+  window.decrementCount = function () {
+    count--;
+    console.log(count);
+  };
+})();
+
+incrementCount(); // Output: 1
+decrementCount(); // Output: 0
+```
+
+在这个例子中，`count`在全局范围内是不可访问的。它只能通过`incrementCount`和`decrementCount`函数访问和修改。这些函数通过将它们附加到`window`对象来暴露给全局范围，但它们仍然可以访问其父范围中的`count`变量。这提供了一种封装底层数据并仅公开必要操作的方法——不允许直接操作该值。
+
+***
+
+## 延伸阅读
+
+* [JavaScript modules - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
+* [Modules, introduction](https://javascript.info/modules-intro)
+* [JS: don't touch the global scope](https://lucybain.com/blog/2014/js-dont-touch-global-scope/)
+* [Variables: Scopes, Environments, and Closures](https://exploringjs.com/es5/ch16.html)
diff --git a/questions/why-you-might-want-to-create-static-class-members/en-US.langnostic.json b/questions/why-you-might-want-to-create-static-class-members/en-US.langnostic.json
new file mode 100644
index 0000000..2395a1f
--- /dev/null
+++ b/questions/why-you-might-want-to-create-static-class-members/en-US.langnostic.json
@@ -0,0 +1,72 @@
+{
+  "frontmatter": {
+    "title": "c9900080"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "77da26a5",
+        "df92fe62",
+        "e9156f8f",
+        "322b6d7f",
+        "c6fe14bf",
+        "2a7816d0",
+        "2a63ac6a",
+        "d58b7d1b",
+        "fef037e4",
+        "1633fb67",
+        "d86bfb50",
+        "db704af8",
+        "cb590ff2",
+        "83f9358a",
+        "275883aa",
+        "323dc4fc",
+        "a39e4253",
+        "72ddc219",
+        "f28e393f",
+        "8a48dd18",
+        "3b883daf",
+        "50b6197c",
+        "12555ca9",
+        "cd2b9098",
+        "9846f084",
+        "4f530b3e",
+        "ee9c1eea",
+        "8c069632"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "77da26a5",
+        "df92fe62",
+        "e9156f8f",
+        "322b6d7f",
+        "c6fe14bf",
+        "2a7816d0",
+        "2a63ac6a",
+        "d58b7d1b",
+        "fef037e4",
+        "1633fb67",
+        "d86bfb50",
+        "db704af8",
+        "cb590ff2",
+        "83f9358a",
+        "275883aa",
+        "323dc4fc",
+        "a39e4253",
+        "72ddc219",
+        "f28e393f",
+        "8a48dd18",
+        "3b883daf",
+        "50b6197c",
+        "12555ca9",
+        "cd2b9098",
+        "9846f084",
+        "4f530b3e",
+        "ee9c1eea",
+        "8c069632"
+      ]
+    }
+  }
+}
diff --git a/questions/why-you-might-want-to-create-static-class-members/zh-CN.mdx b/questions/why-you-might-want-to-create-static-class-members/zh-CN.mdx
index 05703c0..2e5c803 100644
--- a/questions/why-you-might-want-to-create-static-class-members/zh-CN.mdx
+++ b/questions/why-you-might-want-to-create-static-class-members/zh-CN.mdx
@@ -1,5 +1,132 @@
 ---
-title: 为什么你想要创建静态类成员？
+title: 为什么你可能想要在 JavaScript 中创建静态类成员？
 ---
 
-静态类成员 (属性/方法) 不与某类的具体实例绑定，并且具有相同的值，不管是指哪个实例。 静态属性通常是配置变量，而静态方法通常是纯粹的实用函数，不取决于实例的状态。
+## TL;DR
+
+静态类成员（属性/方法）有一个前置的 `static` 关键字。此类成员不能直接在类的实例上访问。相反，它们在类本身上被访问。
+
+```js live
+class Car {
+  static noOfWheels = 4;
+  static compare() {
+    return 'Static method has been called.';
+  }
+}
+
+console.log(Car.noOfWheels); // 4
+```
+
+静态成员在以下情况下很有用：
+
+* **命名空间组织**：静态属性可用于定义特定于类的常量或配置值。这有助于在类命名空间内组织相关数据，并防止与其他变量发生命名冲突。示例包括 `Math.PI`、`Math.SQRT2`。
+* **辅助函数**：静态方法可用作对类本身或其实例进行操作的辅助函数。这可以通过将实用程序逻辑与类的核心功能分开来提高代码的可读性和可维护性。常用静态方法的示例包括 `Object.assign()`、`Math.max()`。
+* **单例模式**：在极少数情况下，静态属性和方法可用于实现单例模式，其中只存在一个类的实例。但是，这种模式可能难以管理，通常不鼓励使用，而倾向于使用更现代的依赖注入技术。
+
+***
+
+## 静态类成员
+
+静态类成员（属性/方法）不与类的特定实例相关联，并且无论哪个实例引用它，都具有相同的值。静态属性通常是配置变量，静态方法通常是纯实用程序函数，不依赖于实例的状态。此类属性有一个前置的 `static` 关键字。
+
+```js live
+class Car {
+  static noOfWheels = 4;
+  static compare() {
+    return 'static method has been called.';
+  }
+}
+
+console.log(Car.noOfWheels); // Output: 4
+console.log(Car.compare()); // Output: static method has been called.
+```
+
+静态成员不能被类的特定实例访问。
+
+```js live
+class Car {
+  static noOfWheels = 4;
+  static compare() {
+    return 'static method has been called.';
+  }
+}
+
+const car = new Car();
+console.log(car.noOfWheels); // Output: undefined
+console.log(car.compare()); // Error: TypeError: car.compare is not a function
+```
+
+JavaScript 中的 `Math` 类是使用静态成员的常见库的一个很好的例子。JavaScript 中的 `Math` 类是一个内置对象，它提供了一组数学常量和函数。它是一个静态类，这意味着它的所有属性和方法都是静态的。以下是 `Math` 类如何使用静态成员的示例：
+
+```js live
+console.log(Math.PI); // Output: 3.141592653589793
+console.log(Math.abs(-5)); // Output: 5
+console.log(Math.max(1, 2, 3)); // Output: 3
+```
+
+在此示例中，`Math.PI`、`Math.abs()` 和 `Math.max()` 都是 `Math` 类的静态成员。它们可以直接在 `Math` 对象上访问，而无需创建类的实例。
+
+## 使用静态类成员的原因
+
+### 实用函数
+
+静态类成员可用于定义不需要任何特定于实例（不使用 `this`）数据或行为的实用函数。例如，您可能有一个 `Arithmetic` 类，其中包含用于常见数学运算的静态方法。
+
+```js live
+class Arithmetic {
+  static add(a, b) {
+    return a + b;
+  }
+  static subtract(a, b) {
+    return a - b;
+  }
+}
+
+console.log(Arithmetic.add(2, 3)); // Output: 5
+console.log(Arithmetic.subtract(5, 2)); // Output: 3
+```
+
+### 单例
+
+静态类成员可用于实现单例模式，在单例模式中，您希望确保应用程序中只存在一个类的实例。
+
+```js live
+class Singleton {
+  static instance;
+
+  static getInstance() {
+    if (!this.instance) {
+      this.instance = new Singleton();
+    }
+    return this.instance;
+  }
+}
+
+const singleton1 = Singleton.getInstance();
+const singleton2 = Singleton.getInstance();
+
+console.log(singleton1 === singleton2); // Output: true
+```
+
+### 配置
+
+静态类成员可用于存储在类的所有实例之间共享的配置或设置。这对于 API 密钥、功能标志或其他全局设置非常有用。
+
+```js live
+class Config {
+  static API_KEY = 'your-api-key';
+  static FEATURE_FLAG = true;
+}
+
+console.log(Config.API_KEY); // Output: 'your-api-key'
+console.log(Config.FEATURE_FLAG); // Output: true
+```
+
+### 性能
+
+在某些情况下，使用静态类成员可以通过减少应用程序使用的内存量来提高性能。这是因为静态类成员在类的所有实例之间共享，而不是为每个实例复制。
+
+## 延伸阅读
+
+* [静态方法和属性 | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static)
+* [静态属性和方法 | Javascript.info](https://javascript.info/static-properties-methods)

From cefc4b062f5764a07353a33c4c686b7585ae8952 Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Fri, 4 Apr 2025 17:48:58 +0800
Subject: [PATCH 13/26] i18n: langnostic@0.0.5

---
 langnostic.config.ts |  12 +--
 package.json         |   2 +-
 pnpm-lock.yaml       | 200 +++++++++++--------------------------------
 3 files changed, 57 insertions(+), 157 deletions(-)

diff --git a/langnostic.config.ts b/langnostic.config.ts
index 5eb5b87..b87accd 100644
--- a/langnostic.config.ts
+++ b/langnostic.config.ts
@@ -1,6 +1,6 @@
 import { ConfigType } from 'langnostic';
 
-const config: ConfigType = {
+export default {
   ai: {
     provider: 'google',
   },
@@ -14,14 +14,10 @@ const config: ConfigType = {
       plugin: 'mdx',
       paths: [
         {
-          source:
-            './questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/en-US.mdx',
-          target:
-            './questions/can-you-offer-a-use-case-for-the-new-arrow-function-syntax-how-does-this-new-syntax-differ-from-other-functions/{locale}.mdx',
+          source: './questions/*/en-US.mdx',
+          target: './questions/*/{locale}.mdx',
         },
       ],
     },
   ],
-};
-
-export default config;
+} satisfies ConfigType;
diff --git a/package.json b/package.json
index c6e48cc..5ecfb9e 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "github-slugger": "^2.0.0",
     "globby": "^14.0.1",
     "gray-matter": "^4.0.3",
-    "langnostic": "^0.0.3",
+    "langnostic": "^0.0.5",
     "lodash-es": "^4.17.21",
     "tsx": "^4.15.1"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be1f664..e40a66a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,8 +18,8 @@ dependencies:
     specifier: ^4.0.3
     version: 4.0.3
   langnostic:
-    specifier: ^0.0.3
-    version: 0.0.3(react@19.1.0)(typescript@5.8.2)
+    specifier: ^0.0.5
+    version: 0.0.5(react@19.1.0)(typescript@5.8.2)
   lodash-es:
     specifier: ^4.17.21
     version: 4.17.21
@@ -364,18 +364,6 @@ packages:
     dev: false
     optional: true
 
-  /@isaacs/cliui@8.0.2:
-    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
-    engines: {node: '>=12'}
-    dependencies:
-      string-width: 5.1.2
-      string-width-cjs: /string-width@4.2.3
-      strip-ansi: 7.1.0
-      strip-ansi-cjs: /strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: /wrap-ansi@7.0.0
-    dev: false
-
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -534,16 +522,6 @@ packages:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
     dev: false
 
-  /balanced-match@1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: false
-
-  /brace-expansion@2.0.1:
-    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
-    dependencies:
-      balanced-match: 1.0.2
-    dev: false
-
   /braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
@@ -588,6 +566,15 @@ packages:
       restore-cursor: 5.1.0
     dev: false
 
+  /cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+    dev: false
+
   /color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -615,15 +602,6 @@ packages:
       typescript: 5.8.2
     dev: false
 
-  /cross-spawn@7.0.6:
-    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
-    engines: {node: '>= 8'}
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-    dev: false
-
   /debug@4.4.0:
     resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
     engines: {node: '>=6.0'}
@@ -669,10 +647,6 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
-  /eastasianwidth@0.2.0:
-    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-    dev: false
-
   /emoji-regex@10.4.0:
     resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
     dev: false
@@ -681,10 +655,6 @@ packages:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: false
 
-  /emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-    dev: false
-
   /env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -732,6 +702,11 @@ packages:
       '@esbuild/win32-x64': 0.21.5
     dev: false
 
+  /escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+    dev: false
+
   /esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
@@ -784,14 +759,6 @@ packages:
       to-regex-range: 5.0.1
     dev: false
 
-  /foreground-child@3.3.1:
-    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
-    engines: {node: '>=14'}
-    dependencies:
-      cross-spawn: 7.0.6
-      signal-exit: 4.1.0
-    dev: false
-
   /fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -800,6 +767,11 @@ packages:
     dev: false
     optional: true
 
+  /get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+    dev: false
+
   /get-east-asian-width@1.3.0:
     resolution: {integrity: sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==}
     engines: {node: '>=18'}
@@ -822,19 +794,6 @@ packages:
       is-glob: 4.0.3
     dev: false
 
-  /glob@11.0.1:
-    resolution: {integrity: sha512-zrQDm8XPnYEKawJScsnM0QzobJxlT/kHOOlRTio8IH/GrmxRE5fjllkzdaHclIuNjUQTJYH2xHNIGfdpJkDJUw==}
-    engines: {node: 20 || >=22}
-    hasBin: true
-    dependencies:
-      foreground-child: 3.3.1
-      jackspeak: 4.1.0
-      minimatch: 10.0.1
-      minipass: 7.1.2
-      package-json-from-dist: 1.0.1
-      path-scurry: 2.0.0
-    dev: false
-
   /globby@13.2.2:
     resolution: {integrity: sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -943,17 +902,6 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
-  /isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-    dev: false
-
-  /jackspeak@4.1.0:
-    resolution: {integrity: sha512-9DDdhb5j6cpeitCbvLO7n7J4IxnbM6hoF6O1g4HQ5TfhvvKN8ywDM7668ZhMHRqVmxqhps/F6syWK2KcPxYlkw==}
-    engines: {node: 20 || >=22}
-    dependencies:
-      '@isaacs/cliui': 8.0.2
-    dev: false
-
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: false
@@ -1002,8 +950,8 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /langnostic@0.0.3(react@19.1.0)(typescript@5.8.2):
-    resolution: {integrity: sha512-19EjuWWPDRIDg0LCQlm4y/hWPNWUlgVEGXTW7Q+3CPS4a0SMB+dIJ0jq6LKsytNAtITvvtMDJHk8Qtt4xwSslA==}
+  /langnostic@0.0.5(react@19.1.0)(typescript@5.8.2):
+    resolution: {integrity: sha512-i+rC3sAV042yacwq8igzmJ2yAz3AAy1QWL61v8TE5v9pNxKNewpYUAxv1I8tHf8T48UaOBdmxo57Yqx39Uv9zA==}
     engines: {node: 18.18.2, pnpm: 8.15.8}
     hasBin: true
     dependencies:
@@ -1015,7 +963,6 @@ packages:
       chalk: 5.4.1
       cosmiconfig: 9.0.0(typescript@5.8.2)
       dotenv: 16.4.7
-      glob: 11.0.1
       globby: 13.2.2
       gray-matter: 4.0.3
       json5: 2.2.3
@@ -1026,6 +973,7 @@ packages:
       remark-parse: 11.0.0
       remark-stringify: 11.0.0
       unified: 11.0.5
+      yargs: 17.7.2
       zod: 3.24.2
     transitivePeerDependencies:
       - react
@@ -1056,11 +1004,6 @@ packages:
     resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
     dev: false
 
-  /lru-cache@11.1.0:
-    resolution: {integrity: sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==}
-    engines: {node: 20 || >=22}
-    dev: false
-
   /mdast-util-from-markdown@2.0.2:
     resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
     dependencies:
@@ -1444,18 +1387,6 @@ packages:
     engines: {node: '>=18'}
     dev: false
 
-  /minimatch@10.0.1:
-    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
-    engines: {node: 20 || >=22}
-    dependencies:
-      brace-expansion: 2.0.1
-    dev: false
-
-  /minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    dev: false
-
   /ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
     dev: false
@@ -1477,10 +1408,6 @@ packages:
       mimic-function: 5.0.1
     dev: false
 
-  /package-json-from-dist@1.0.1:
-    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
-    dev: false
-
   /parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -1510,19 +1437,6 @@ packages:
       lines-and-columns: 1.2.4
     dev: false
 
-  /path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
-    dev: false
-
-  /path-scurry@2.0.0:
-    resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
-    engines: {node: 20 || >=22}
-    dependencies:
-      lru-cache: 11.1.0
-      minipass: 7.1.2
-    dev: false
-
   /path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -1579,6 +1493,11 @@ packages:
       unified: 11.0.5
     dev: false
 
+  /require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -1619,18 +1538,6 @@ packages:
     resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
     dev: false
 
-  /shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
-    dependencies:
-      shebang-regex: 3.0.0
-    dev: false
-
-  /shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
-    dev: false
-
   /signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -1671,15 +1578,6 @@ packages:
       strip-ansi: 6.0.1
     dev: false
 
-  /string-width@5.1.2:
-    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
-    engines: {node: '>=12'}
-    dependencies:
-      eastasianwidth: 0.2.0
-      emoji-regex: 9.2.2
-      strip-ansi: 7.1.0
-    dev: false
-
   /string-width@7.2.0:
     resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
     engines: {node: '>=18'}
@@ -1833,14 +1731,6 @@ packages:
       vfile-message: 4.0.2
     dev: false
 
-  /which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
-    dependencies:
-      isexe: 2.0.0
-    dev: false
-
   /wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
@@ -1850,15 +1740,6 @@ packages:
       strip-ansi: 6.0.1
     dev: false
 
-  /wrap-ansi@8.1.0:
-    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      ansi-styles: 6.2.1
-      string-width: 5.1.2
-      strip-ansi: 7.1.0
-    dev: false
-
   /wrap-ansi@9.0.0:
     resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
     engines: {node: '>=18'}
@@ -1868,6 +1749,29 @@ packages:
       strip-ansi: 7.1.0
     dev: false
 
+  /y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+    dev: false
+
   /zod-to-json-schema@3.24.5(zod@3.24.2):
     resolution: {integrity: sha512-/AuWwMP+YqiPbsJx5D6TfgRTc4kTLjsh5SOcd4bLsfUg2RcEXrFMJl1DGgdHy2aCfsIA/cr/1JM0xcB2GZji8g==}
     peerDependencies:

From e44028a1d56e2874efa2a90eeef0678bb6256a29 Mon Sep 17 00:00:00 2001
From: tahachm <97478750+tahachm@users.noreply.github.com>
Date: Sat, 19 Apr 2025 04:27:08 +0500
Subject: [PATCH 14/26] qns: address user feedback (#29)

Co-authored-by: GitHub Actions <github-actions[bot]@users.noreply.github.com>
---
 README.md                                     |  4 +-
 questions/describe-event-bubbling/en-US.mdx   |  2 +-
 questions/explain-event-delegation/en-US.mdx  |  2 +-
 questions/explain-hoisting/en-US.mdx          |  2 +-
 .../en-US.mdx                                 |  2 +-
 .../en-US.mdx                                 |  2 +-
 .../en-US.mdx                                 | 37 ++++++++++--------
 .../en-US.mdx                                 |  2 +-
 .../en-US.mdx                                 |  2 +-
 .../en-US.mdx                                 | 22 +++++++----
 .../en-US.mdx                                 |  2 +-
 .../en-US.mdx                                 | 38 ++++++++++++++++++-
 .../en-US.mdx                                 |  2 +-
 .../en-US.mdx                                 |  2 +-
 .../en-US.mdx                                 |  2 +-
 .../en-US.mdx                                 |  2 +-
 .../en-US.mdx                                 |  2 +-
 17 files changed, 87 insertions(+), 40 deletions(-)

diff --git a/README.md b/README.md
index 24de009..c2b9155 100644
--- a/README.md
+++ b/README.md
@@ -1064,7 +1064,7 @@ The main difference lies in the bubbling behavior of `mouseenter` and `mouseover
 
 `mouseenter` events do not bubble. The `mouseenter` event is triggered only when the mouse pointer enters the element itself, not its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the `mouseenter` event will not be triggered on the parent element again, it's only triggered once upon entry of parent element without regard for its contents. If both parent and child have `mouseenter` listeners attached and the mouse pointer moves from the parent element to the child element, `mouseenter` will only fire for the child.
 
-`mouseover` events bubble up the DOM tree. The `mouseover` event is triggered when the mouse pointer enters the element or one of its descendants. If have a parent element has child elements, and the mouse pointer enters child elements, the `mouseover` event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, `mouseover` will fire for both the parent and the child.
+`mouseover` events bubble up the DOM tree. The `mouseover` event is triggered when the mouse pointer enters the element or one of its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the `mouseover` event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, `mouseover` will fire for both the parent and the child.
 
 | Property | `mouseenter` | `mouseover` |
 | --- | --- | --- |
@@ -4921,7 +4921,7 @@ The main difference lies in the bubbling behavior of `mouseenter` and `mouseover
 
 `mouseenter` events do not bubble. The `mouseenter` event is triggered only when the mouse pointer enters the element itself, not its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the `mouseenter` event will not be triggered on the parent element again, it's only triggered once upon entry of parent element without regard for its contents. If both parent and child have `mouseenter` listeners attached and the mouse pointer moves from the parent element to the child element, `mouseenter` will only fire for the child.
 
-`mouseover` events bubble up the DOM tree. The `mouseover` event is triggered when the mouse pointer enters the element or one of its descendants. If have a parent element has child elements, and the mouse pointer enters child elements, the `mouseover` event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, `mouseover` will fire for both the parent and the child.
+`mouseover` events bubble up the DOM tree. The `mouseover` event is triggered when the mouse pointer enters the element or one of its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the `mouseover` event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, `mouseover` will fire for both the parent and the child.
 
 | Property | `mouseenter` | `mouseover` |
 | --- | --- | --- |
diff --git a/questions/describe-event-bubbling/en-US.mdx b/questions/describe-event-bubbling/en-US.mdx
index 71d1d0f..3ca9bb1 100644
--- a/questions/describe-event-bubbling/en-US.mdx
+++ b/questions/describe-event-bubbling/en-US.mdx
@@ -85,7 +85,7 @@ child.click();
 
 ## Event delegation
 
-Event bubbling is the basis for a technique called [event delegation](/questions/quiz/describe-event-delegation), where you attach a single event handler to a common ancestor of multiple elements and use event delegation to handle events for those elements efficiently. This is particularly useful when you have a large number of similar elements, like a list of items, and you want to avoid attaching individual event handlers to each item.
+Event bubbling is the basis for a technique called [event delegation](/questions/quiz/explain-event-delegation), where you attach a single event handler to a common ancestor of multiple elements and use event delegation to handle events for those elements efficiently. This is particularly useful when you have a large number of similar elements, like a list of items, and you want to avoid attaching individual event handlers to each item.
 
 ```js
 parent.addEventListener('click', (event) => {
diff --git a/questions/explain-event-delegation/en-US.mdx b/questions/explain-event-delegation/en-US.mdx
index 0a0e0fb..29666bb 100644
--- a/questions/explain-event-delegation/en-US.mdx
+++ b/questions/explain-event-delegation/en-US.mdx
@@ -108,7 +108,7 @@ userForm.addEventListener('input', (event) => {
 });
 ```
 
-In this example, a single input event listener is attached to the form element. It can respond to input changes for all child input elements, simplifying the code by an event listeners per `<input>` element.
+In this example, a single input event listener is attached to the form element. It can respond to input changes for all child input elements, simplifying the code by eliminating the need for individual listeners on each `<input>` element.
 
 ## Pitfalls
 
diff --git a/questions/explain-hoisting/en-US.mdx b/questions/explain-hoisting/en-US.mdx
index 6a317c6..2f1cef3 100644
--- a/questions/explain-hoisting/en-US.mdx
+++ b/questions/explain-hoisting/en-US.mdx
@@ -140,4 +140,4 @@ ESLint is a static code analyzer that can find violations of such cases with the
 ## Further reading
 
 - [Hoisting | MDN](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
-- [JavaScript Visualized: Hoisting](https://dev.to/lydiahallie/javascript-visualized-hoisting-478h)
+- [What is Hoisting in JavaScript?](https://www.freecodecamp.org/news/what-is-hoisting-in-javascript)
diff --git a/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx b/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx
index 296499e..2263a67 100644
--- a/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx
+++ b/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.mdx
@@ -96,4 +96,4 @@ fetchData((error, data) => {
 
 - [MDN Web Docs: Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
 - [JavaScript.info: Callbacks](https://javascript.info/callbacks)
-- [Node.js: Asynchronous programming and callbacks](https://nodejs.org/en/knowledge/getting-started/control-flow/what-are-callbacks/)
+- [Node.js: Asynchronous programming and callbacks](https://nodejs.org/en/learn/asynchronous-work/javascript-asynchronous-programming-and-callbacks)
diff --git a/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx b/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx
index f7c7338..2986dd6 100644
--- a/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx
+++ b/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx
@@ -153,7 +153,7 @@ In situations where the user has navigated away from the page, aborting the requ
 ## Notes
 
 - `AbortController`s is not `fetch()`-specific, it can be used to abort other asynchronous tasks as well.
-- A singular `AbortContoller` instance can be reused or multiple async tasks and cancel all of them at once.
+- A singular `AbortContoller` instance can be reused on multiple async tasks and cancel all of them at once.
 - Calling `abort()` on `AbortController`s does not send any notification or signal to the server. The server is unaware of the cancelation and will continue processing the request until it completes or times out.
 
 ## Further reading
diff --git a/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx b/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx
index 730eda1..d9c271f 100644
--- a/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx
+++ b/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.mdx
@@ -58,28 +58,33 @@ fetchData(); // Error fetching data: ....
 If you have multiple asynchronous operations, you can nest `try...catch` blocks to handle errors at different levels.
 
 ```js live
-async function fetchData() {
-  try {
-    // Invalid URl
-    const response = await fetch('https://api.example.com/data');
-    const data = await response.json();
-    console.log(data);
-  } catch (error) {
-    console.error('Error fetching data:', error);
-  }
+async function fetchUser() {
+  // Simulate a successful async operation
+  return { id: 1, name: 'Alice' };
 }
 
-async function processData() {
+async function fetchUserPosts() {
+  // Simulate a failed async operation
+  throw new Error('Failed to fetch posts');
+}
+
+async function loadUserData() {
   try {
-    await fetchData();
-    // Additional processing
-    console.log(arr); // Trying to reference an undefined variable will throw an error
-  } catch (error) {
-    console.error('Error processing data:', error);
+    const user = await fetchUser();
+    console.log('User:', user);
+
+    try {
+      const posts = await fetchUserPosts();
+      console.log('Posts:', posts);
+    } catch (postsError) {
+      console.error('Error fetching posts:', postsError.message);
+    }
+  } catch (userError) {
+    console.error('Error fetching user:', userError.message);
   }
 }
 
-processData();
+loadUserData();
 ```
 
 ## Using `.catch()` with Promises
diff --git a/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.mdx b/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.mdx
index a9666f6..6330ac7 100644
--- a/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.mdx
+++ b/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.mdx
@@ -115,4 +115,4 @@ In this example, the form will not submit if the `username` input is empty, and
 
 - [MDN Web Docs: Constraint Validation](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation)
 - [MDN Web Docs: HTMLFormElement.checkValidity()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/checkValidity)
-- [MDN Web Docs: HTMLFormElement.setCustomValidity()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/setCustomValidity)
+- [MDN Web Docs: HTMLObjectElement.setCustomValidity()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity)
diff --git a/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx b/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx
index 835bb5e..ff36c9a 100644
--- a/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx
+++ b/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx
@@ -179,7 +179,7 @@ In JavaScript, several built-in objects implement the iterator protocol, meaning
 
 Generators are a special kind of function that can pause and resume their execution, allowing them to generate a sequence of values on-the-fly. They are commonly used to create iterators but have other applications as well. The key use cases of generators include:
 
-- Creating iterators is a more concise and readable way compared to manually implementing the iterator protocol.
+- Creating iterators in a more concise and readable way compared to manually implementing the iterator protocol.
 - Implementing lazy evaluation, where values are generated only when needed, saving memory and computation time.
 - Simplifying asynchronous programming by allowing code to be written in a synchronous-looking style using `yield` and `await`.
 
diff --git a/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.mdx b/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.mdx
index fa9eb21..98ba78b 100644
--- a/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.mdx
+++ b/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.mdx
@@ -38,16 +38,22 @@ Layout thrashing occurs when you read and write to the DOM repeatedly, causing m
 
 ```js
 // Inefficient
-for (let i = 0; i < 1000; i++) {
-  const height = element.clientHeight;
-  element.style.height = `${height + 10}px`;
-}
+boxes.forEach((box) => {
+  const height = box.offsetHeight; // Read
+  box.style.height = `${height + 10}px`; // Write
+});
 
 // Efficient
-const height = element.clientHeight;
-for (let i = 0; i < 1000; i++) {
-  element.style.height = `${height + 10}px`;
-}
+// Batch read
+const heights = [];
+boxes.forEach((box) => {
+  heights.push(box.offsetHeight);
+});
+
+// Batch write
+boxes.forEach((box, i) => {
+  box.style.height = `${heights[i] + 10}px`;
+});
 ```
 
 ## Excessive use of global variables
diff --git a/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx b/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx
index 68b2e8e..312db6f 100644
--- a/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx
+++ b/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx
@@ -224,7 +224,7 @@ xhr.upload.onprogress = (event) => {
 The callback assigned to `onprogress` is passed a [`ProgressEvent`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/progress_event):
 
 - The `loaded` field on the `ProgressEvent` is a 64-bit integer indicating the amount of work already performed (bytes uploaded/downloaded) by the underlying process.
-- The `total` field on the `ProgressEvent` is a 64-bit integer representing the total amount of work that the underlying process is in the progress of performing. When downloading resources, this is the `Content-Length` value of the HTTP request.
+- The `total` field on the `ProgressEvent` is a 64-bit integer representing the total amount of work that the underlying process is in the progress of performing. When downloading resources, this is the `Content-Length` value of the HTTP response.
 
 On the other hand, the `fetch()` API does not offer any convenient way to track upload progress. It can be implemented by monitoring the `body` of the `Response` object as a fraction of the `Content-Length` header, but it's quite complicated.
 
diff --git a/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx b/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx
index 15a2a50..5d2514e 100644
--- a/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx
+++ b/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx
@@ -115,13 +115,49 @@ function getData3() {
 
 Promise.all([getData1(), getData2(), getData3()])
   .then((results) => {
-    console.log(results); // Output: [[{ id: 1, title: 'Data 1' }, { id: 2, title: 'Data 2' }, { id: 3, title: 'Data 3' }]
+    console.log(results); // Output: [{ id: 1, title: 'Data 1' }, { id: 2, title: 'Data 2' }, { id: 3, title: 'Data 3' }]
   })
   .catch((error) => {
     console.error('Error:', error);
   });
 ```
 
+### Easier error handling with `.catch()` and guaranteed cleanup with `.finally()`
+
+Promises make error handling more straightforward by allowing you to catch errors at the end of a chain using `.catch()`, instead of manually checking for errors in every callback. This leads to cleaner and more maintainable code.
+
+Additionally, `.finally()` lets you run code after the Promise settles, whether it was successful or failed, which is great for cleanup tasks like hiding spinners or resetting UI states.
+
+```js live
+function getFirstData() {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({ id: 1, title: 'First Data' });
+    }, 1000);
+  });
+}
+
+function getSecondData(data) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({ id: data.id, title: data.title + ' -> Second Data' });
+    }, 1000);
+  });
+}
+
+getFirstData()
+  .then(getSecondData)
+  .then((data) => {
+    console.log('Success:', data);
+  })
+  .catch((error) => {
+    console.error('Error:', error);
+  })
+  .finally(() => {
+    console.log('This runs no matter what');
+  });
+```
+
 ### With promises, these scenarios which are present in callbacks-only coding, will not happen:
 
 - Call the callback too early
diff --git a/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx b/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx
index 7c6dcdd..bc1fe05 100644
--- a/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx
+++ b/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx
@@ -58,7 +58,7 @@ function greetName(greeter, name) {
 greetName(greet, 'Alice'); // Output: Hello, Alice!
 ```
 
-In this example, the `greetName` function takes another function `greet` as an argument and executes it with the name `Alice`. The `greet` function is a higher-order function because it is passed as an argument to another function.
+In this example, the `greetName` function is higher-order function because it takes another function (`greet`) as an argument and uses it to generate a greeting for the given name.
 
 ### Functions as return values
 
diff --git a/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx b/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx
index 098fc79..5942d15 100644
--- a/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx
+++ b/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx
@@ -77,7 +77,7 @@ There's one final value-comparison operation within JavaScript, that is the [`Ob
 
 ## Conclusion
 
-- Use `==` when you want to compare values with type coercion (and understand the implications of it). Practically, the only valid use case for the equality operator is when against `null` and `undefined` for convenience.
+- Use `==` when you want to compare values with type coercion (and understand the implications of it). In practice, the only reasonable use case for the equality operator is to check for both `null` and `undefined` in a single comparison for convenience.
 - Use `===` when you want to ensure both the value and the type are the same, which is the safer and more predictable choice in most cases.
 
 ### Notes
diff --git a/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx b/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx
index cab8bdc..acb8dfd 100644
--- a/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx
+++ b/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx
@@ -8,7 +8,7 @@ The main difference lies in the bubbling behavior of `mouseenter` and `mouseover
 
 `mouseenter` events do not bubble. The `mouseenter` event is triggered only when the mouse pointer enters the element itself, not its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the `mouseenter` event will not be triggered on the parent element again, it's only triggered once upon entry of parent element without regard for its contents. If both parent and child have `mouseenter` listeners attached and the mouse pointer moves from the parent element to the child element, `mouseenter` will only fire for the child.
 
-`mouseover` events bubble up the DOM tree. The `mouseover` event is triggered when the mouse pointer enters the element or one of its descendants. If have a parent element has child elements, and the mouse pointer enters child elements, the `mouseover` event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, `mouseover` will fire for both the parent and the child.
+`mouseover` events bubble up the DOM tree. The `mouseover` event is triggered when the mouse pointer enters the element or one of its descendants. If a parent element has child elements, and the mouse pointer enters child elements, the `mouseover` event will be triggered on the parent element again as well. If the parent element has multiple child elements, this can result in multiple event callbacks fired. If there are child elements, and the mouse pointer moves from the parent element to the child element, `mouseover` will fire for both the parent and the child.
 
 | Property | `mouseenter` | `mouseover` |
 | --- | --- | --- |
diff --git a/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx b/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx
index d3837ba..fa13442 100644
--- a/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx
+++ b/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx
@@ -34,7 +34,7 @@ console.log(typeof y === 'undefined'); // true
 
 ## `undefined`
 
-A variable that is `undefined` is a variable that has been declared, but not assigned a value. It is of type `undefined`. If a function does not return any value as the result of executing it is assigned to a variable, the variable also has the value of `undefined`. To check for it, compare using the strict equality (`===`) operator or `typeof` which will give the `'undefined'` string. Note that you should not be using the loose equality operator (`==`) to check, as it will also return `true` if the value is `null`.
+A variable that is `undefined` is a variable that has been declared, but not assigned a value. It is of type `undefined`. If a function does not return a value, and its result is assigned to a variable, that variable will also have the value `undefined`. To check for it, compare using the strict equality (`===`) operator or `typeof` which will give the `'undefined'` string. Note that you should not be using the loose equality operator (`==`) to check, as it will also return `true` if the value is `null`.
 
 ```js live
 let foo;
diff --git a/questions/whats-the-difference-between-call-and-apply/en-US.mdx b/questions/whats-the-difference-between-call-and-apply/en-US.mdx
index 8b08c46..196d704 100644
--- a/questions/whats-the-difference-between-call-and-apply/en-US.mdx
+++ b/questions/whats-the-difference-between-call-and-apply/en-US.mdx
@@ -80,7 +80,7 @@ const person1 = { name: 'John' };
 const person2 = { name: 'Alice' };
 
 greet.call(person1); // Hello, my name is John
-greet.call(person2); // Hello, my name is Alice
+greet.apply(person2); // Hello, my name is Alice
 ```
 
 ### Alternative syntax to call methods on objects

From 8c7804abaf812c25988735108847f5d2d4e2e47d Mon Sep 17 00:00:00 2001
From: Zhou Yuhang <54398705+xquisite0@users.noreply.github.com>
Date: Tue, 29 Apr 2025 12:50:46 +0800
Subject: [PATCH 15/26] misc: update reactjs.org URLs to react.dev (#30)

---
 questions/explain-event-delegation/en-US.mdx                    | 1 -
 questions/explain-event-delegation/zh-CN.mdx                    | 1 -
 .../en-US.mdx                                                   | 2 +-
 .../en-US.mdx                                                   | 1 -
 .../zh-CN.mdx                                                   | 1 -
 5 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/questions/explain-event-delegation/en-US.mdx b/questions/explain-event-delegation/en-US.mdx
index 29666bb..cb8fa73 100644
--- a/questions/explain-event-delegation/en-US.mdx
+++ b/questions/explain-event-delegation/en-US.mdx
@@ -130,4 +130,3 @@ By using event delegation, React avoids attaching individual event handlers to e
 
 - [MDN Web Docs on Event Delegation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation)
 - [JavaScript.info - Event Delegation](https://javascript.info/event-delegation)
-- [React v17.0 Release Candidate: No New Features](https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html#changes-to-event-delegation)
diff --git a/questions/explain-event-delegation/zh-CN.mdx b/questions/explain-event-delegation/zh-CN.mdx
index e70ed03..e4effad 100644
--- a/questions/explain-event-delegation/zh-CN.mdx
+++ b/questions/explain-event-delegation/zh-CN.mdx
@@ -130,4 +130,3 @@ userForm.addEventListener('input', (event) => {
 
 * [MDN Web Docs on Event Delegation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_delegation)
 * [JavaScript.info - Event Delegation](https://javascript.info/event-delegation)
-* [React v17.0 Release Candidate: No New Features](https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.html#changes-to-event-delegation)
diff --git a/questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.mdx b/questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.mdx
index 51fb33b..e384b9b 100644
--- a/questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.mdx
+++ b/questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.mdx
@@ -108,5 +108,5 @@ element.style.height = `${height + 10}px`; // Write
 
 - [MDN Web Docs: DOM manipulation](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Manipulating_the_DOM)
 - [Google Developers: Avoid large, complex layouts and layout thrashing](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing)
-- [React documentation](https://reactjs.org/docs/getting-started.html)
+- [React documentation](https://react.dev/learn)
 - [MDN Web Docs: Using requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
diff --git a/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.mdx b/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.mdx
index a463e2d..983abfd 100644
--- a/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.mdx
+++ b/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.mdx
@@ -69,7 +69,6 @@ I adhere to coding standards and best practices to ensure code quality:
 
 ## Further reading
 
-- [React Folder Structure](https://reactjs.org/docs/faq-structure.html)
 - [JavaScript Coding Standards](https://github.com/airbnb/javascript)
 - [Writing Clean Code](https://www.freecodecamp.org/news/writing-clean-code-6a8e2889b9f8/)
 - [Effective JavaScript Documentation](https://jsdoc.app/)
diff --git a/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx b/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx
index 0459da4..f14a8ca 100644
--- a/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx
+++ b/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx
@@ -69,7 +69,6 @@ src/
 
 ## 延伸阅读
 
-* [React 文件夹结构](https://reactjs.org/docs/faq-structure.html)
 * [JavaScript 编码标准](https://github.com/airbnb/javascript)
 * [编写干净的代码](https://www.freecodecamp.org/news/writing-clean-code-6a8e2889b9f8/)
 * [有效的 JavaScript 文档](https://jsdoc.app/)

From 1c9e044b67be761c3dacfaad5323c08d44573028 Mon Sep 17 00:00:00 2001
From: tahachm <97478750+tahachm@users.noreply.github.com>
Date: Thu, 1 May 2025 13:21:10 +0500
Subject: [PATCH 16/26] qns: address user feedback (#31)

Co-authored-by: GitHub Actions <github-actions[bot]@users.noreply.github.com>
---
 README.md                                     |  8 +-
 .../en-US.mdx                                 |  6 +-
 .../en-US.mdx                                 | 98 +++++++++++--------
 3 files changed, 62 insertions(+), 50 deletions(-)

diff --git a/README.md b/README.md
index c2b9155..e13ac99 100644
--- a/README.md
+++ b/README.md
@@ -218,7 +218,7 @@ This list contains a longer list of important JavaScript questions. Not all of t
 | 127 | [What are the benefits of using a module bundler?](#what-are-the-benefits-of-using-a-module-bundler) | Intermediate |
 | 128 | [Explain the concept of tree shaking in module bundling](#explain-the-concept-of-tree-shaking-in-module-bundling) | Intermediate |
 | 129 | [What are the metadata fields of a module?](#what-are-the-metadata-fields-of-a-module) | Intermediate |
-| 130 | [What do you think of AMD vs CommonJS?](#what-do-you-think-of-amd-vs-commonjs) | Basic |
+| 130 | [What do you think of CommonJS vs ESM?](#what-do-you-think-of-commonjs-vs-esm) | Basic |
 | 131 | [What are the different types of errors in JavaScript?](#what-are-the-different-types-of-errors-in-javascript) | Intermediate |
 | 132 | [How do you handle errors using `try...catch` blocks?](#how-do-you-handle-errors-using-trycatch-blocks) | Basic |
 | 133 | [What is the purpose of the `finally` block?](#what-is-the-purpose-of-the-finally-block) | Basic |
@@ -5776,11 +5776,11 @@ Metadata fields of a module typically include information such as the module's n
 
 <br>
 
-### What do you think of AMD vs CommonJS?
+### What do you think of CommonJS vs ESM?
 
 <!-- Update here: /questions/what-do-you-think-of-amd-vs-commonjs/en-US.mdx -->
 
-AMD (Asynchronous Module Definition) and CommonJS are two JavaScript module systems. AMD is designed for asynchronous loading of modules, making it suitable for browsers. CommonJS is designed for synchronous loading, making it more suitable for server-side environments like Node.js. AMD uses `define` and `require` for defining and loading modules, while CommonJS uses `module.exports` and `require`.
+JavaScript has evolved its module systems. ESM (ECMAScript Modules) using `import` / `export` is the official standard, natively supported in modern browsers and Node.js, designed for both synchronous and asynchronous use cases. CommonJS (CJS) using `require` / `module.exports` was the original standard for Node.js, primarily synchronous, and remains prevalent in the Node ecosystem. AMD (Asynchronous Module Definition) using `define` / `require` was an early system designed for asynchronous loading in browsers but is now largely obsolete, replaced by ESM.
 
 <!-- Update here: /questions/what-do-you-think-of-amd-vs-commonjs/en-US.mdx -->
 
@@ -7290,7 +7290,7 @@ JavaScript interview questions categorized by difficulty.
 87. [What are the different methods for iterating over an array?](#what-are-the-different-methods-for-iterating-over-an-array)
 88. [What are the different ways to copy an object or an array?](#what-are-the-different-ways-to-copy-an-object-or-an-array)
 89. [What are the different ways to make an API call in JavaScript?](#what-are-the-different-ways-to-make-an-api-call-in-javascript)
-90. [What do you think of AMD vs CommonJS?](#what-do-you-think-of-amd-vs-commonjs)
+90. [What do you think of CommonJS vs ESM?](#what-do-you-think-of-commonjs-vs-esm)
 91. [What is recursion and how is it used in JavaScript?](#what-is-recursion-and-how-is-it-used-in-javascript)
 92. [What is the difference between a parameter and an argument?](#what-is-the-difference-between-a-parameter-and-an-argument)
 93. [What is the DOM and how is it structured?](#what-is-the-dom-and-how-is-it-structured)
diff --git a/questions/explain-how-prototypal-inheritance-works/en-US.mdx b/questions/explain-how-prototypal-inheritance-works/en-US.mdx
index 6383c26..286f1ae 100644
--- a/questions/explain-how-prototypal-inheritance-works/en-US.mdx
+++ b/questions/explain-how-prototypal-inheritance-works/en-US.mdx
@@ -121,8 +121,8 @@ function Dog(name, breed) {
   this.breed = breed;
 }
 
-// Set the prototype of Dog to be a new instance of Animal
-Dog.prototype = Object.create(Animal.prototype);
+// Set the prototype of Dog to inherit from Animal's prototype
+Object.setPrototypeOf(Dog.prototype, Animal.prototype);
 
 // Add a method to the Dog prototype
 Dog.prototype.bark = function () {
@@ -140,7 +140,7 @@ fido.sayName(); // "My name is Fido"
 console.log(fido.fly); // undefined
 ```
 
-4. **`Object.create()`**: This method creates a new object with the specified prototype object and properties. It's a straightforward way to set up prototypical inheritance. If you create a object via `Object.create(null)` it will not inherit any properties from `Object.prototype`. This means the object will not have any built-in properties or methods like `toString()`, `hasOwnProperty()`,
+4. **`Object.create()`**: This method creates a new object whose internal `[[Prototype]]` is directly linked to the specified prototype object. It's the most direct way to create an object that inherits from another specific object, without involving constructor functions. If you create a object via `Object.create(null)` it will not inherit any properties from `Object.prototype`. This means the object will not have any built-in properties or methods like `toString()`, `hasOwnProperty()`,
 
 ```js live
 // Define a prototype object
diff --git a/questions/what-do-you-think-of-amd-vs-commonjs/en-US.mdx b/questions/what-do-you-think-of-amd-vs-commonjs/en-US.mdx
index 352ba03..a84a14d 100644
--- a/questions/what-do-you-think-of-amd-vs-commonjs/en-US.mdx
+++ b/questions/what-do-you-think-of-amd-vs-commonjs/en-US.mdx
@@ -1,42 +1,16 @@
 ---
-title: What do you think of AMD vs CommonJS?
+title: What do you think of CommonJS vs ESM?
 ---
 
 ## TL;DR
 
-AMD (Asynchronous Module Definition) and CommonJS are two JavaScript module systems. AMD is designed for asynchronous loading of modules, making it suitable for browsers. CommonJS is designed for synchronous loading, making it more suitable for server-side environments like Node.js. AMD uses `define` and `require` for defining and loading modules, while CommonJS uses `module.exports` and `require`.
+JavaScript has evolved its module systems. ESM (ECMAScript Modules) using `import` / `export` is the official standard, natively supported in modern browsers and Node.js, designed for both synchronous and asynchronous use cases. CommonJS (CJS) using `require` / `module.exports` was the original standard for Node.js, primarily synchronous, and remains prevalent in the Node ecosystem. AMD (Asynchronous Module Definition) using `define` / `require` was an early system designed for asynchronous loading in browsers but is now largely obsolete, replaced by ESM.
 
 ---
 
-## AMD vs CommonJS
-
 ### Overview
 
-Both AMD and CommonJS are module systems used in JavaScript to manage dependencies and organize code. They serve different purposes and are suited to different environments.
-
-### AMD (Asynchronous Module Definition)
-
-#### Characteristics
-
-- Designed for asynchronous loading of modules
-- Primarily used in browser environments
-- Uses `define` and `require` for defining and loading modules
-
-#### Example
-
-```javascript
-// Defining a module in AMD
-define(['dependency1', 'dependency2'], function (dep1, dep2) {
-  return {
-    // Module code here
-  };
-});
-
-// Loading a module in AMD
-require(['module1', 'module2'], function (mod1, mod2) {
-  // Code that uses mod1 and mod2
-});
-```
+Module systems help manage this complexity by allowing code to be split into reusable pieces (modules) with clear dependencies. Over time, different module systems emerged before an official standard was adopted.
 
 ### CommonJS
 
@@ -64,37 +38,75 @@ const mod2 = require('module2');
 // Code that uses mod1 and mod2
 ```
 
+### ESM (ECMAScript Modules)
+
+#### Characteristics
+
+- Official JavaScript standard module system
+- Supported natively in modern browsers and Node.js
+- Designed for both asynchronous and synchronous scenarios
+- Uses `export` and `import` for defining and loading modules
+
+#### Example
+
+```javascript
+import dep1 from 'dependency1'; // if dependency1 had a default export
+import { dep2 } from 'dependency2'; // named import to import something specific from dependency2
+
+// Module code using dep1, dep2...
+
+export function someFunction() {
+  // ... function logic ...
+}
+export const someValue = 'hello';
+
+// Or export multiple things at once
+// export { someFunction, someValue };
+
+// Or export a default value
+// export default class MyClass {
+// ...
+// }
+```
+
 ### Key differences
 
 #### Loading mechanism
 
-- **AMD**: Asynchronous, suitable for browsers where non-blocking operations are crucial.
-- **CommonJS**: Synchronous, suitable for server-side environments where modules are loaded before execution.
+- **CommonJS**: Synchronous (blocks until loaded).
+- **ESM**: Asynchronous-friendly (non-blocking in browsers).
 
 #### Environment suitability
 
-- **AMD**: Better for client-side applications.
-- **CommonJS**: Better for server-side applications.
+- **CommonJS**: Node.js legacy standard.
+- **ESM**: Official standard (Browser & Node.js).
 
 #### Syntax
 
-- **AMD**: Uses `define` and `require`.
-- **CommonJS**: Uses `module.exports` and `require`.
+- **CommonJS**: `require()` / `module.exports`.
+- **ESM**: `import` / `export`.
 
-### Use cases
+#### Analysis
 
-#### AMD
+- **CommonJS**: Dynamic (runtime analysis).
+- **ESM**: Static (compile-time analysis, enables tree-shaking).
 
-- Suitable for web applications where you need to load modules asynchronously to avoid blocking the UI.
-- Often used with module loaders like RequireJS.
+### Use cases
 
 #### CommonJS
 
-- Suitable for server-side applications where modules are loaded once at the start.
-- The standard module system for Node.js.
+- Older Node.js projects or where sync loading is needed.
+- Default in Node.js unless configured for ESM.
+
+#### ESM
+
+- Modern web development (native browser support).
+- New Node.js projects, especially those needing async features or optimizations.
+- Code intended for both browser and server.
 
 ## Further reading
 
-- [RequireJS documentation](https://requirejs.org/docs/api.html)
-- [Node.js modules documentation](https://nodejs.org/api/modules.html)
 - [MDN Web Docs on JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
+- [Node.js: CommonJS modules](https://nodejs.org/api/modules.html)
+- [Node.js: ESM](https://nodejs.org/api/esm.html)
+- [RequireJS (AMD Loader - Historical)](https://requirejs.org/docs/api.html)

From 51b58232827a8cb3b191f78017cae4ef07a7d164 Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Wed, 7 May 2025 11:39:39 +0800
Subject: [PATCH 17/26] i18n: langnostic@0.0.7

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 5ecfb9e..2c4d54c 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "gen": "tsx scripts/gen.ts",
     "rank": "tsx scripts/rank.ts",
-    "translate": "langnostic translate"
+    "i18n": "langnostic translate"
   },
   "keywords": [
     "javascript",
@@ -20,7 +20,7 @@
     "github-slugger": "^2.0.0",
     "globby": "^14.0.1",
     "gray-matter": "^4.0.3",
-    "langnostic": "^0.0.5",
+    "langnostic": "^0.0.7",
     "lodash-es": "^4.17.21",
     "tsx": "^4.15.1"
   },

From 52975b962331f8c95224ec09ed16a19e2aae391a Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Wed, 7 May 2025 11:43:39 +0800
Subject: [PATCH 18/26] i18n

---
 .../en-US.langnostic.json                     |  4 +-
 questions/describe-event-bubbling/zh-CN.mdx   | 22 ++---
 .../en-US.langnostic.json                     |  8 +-
 questions/explain-event-delegation/zh-CN.mdx  |  2 +-
 .../explain-hoisting/en-US.langnostic.json    |  4 +-
 questions/explain-hoisting/zh-CN.mdx          |  4 +-
 .../en-US.langnostic.json                     |  8 +-
 .../zh-CN.mdx                                 | 32 +++---
 .../en-US.langnostic.json                     |  4 +-
 .../zh-CN.mdx                                 |  2 +-
 .../en-US.langnostic.json                     |  4 +-
 .../zh-CN.mdx                                 |  3 +
 .../en-US.langnostic.json                     |  4 +-
 .../zh-CN.mdx                                 |  4 +-
 .../en-US.langnostic.json                     |  4 +-
 .../zh-CN.mdx                                 | 37 ++++---
 .../en-US.langnostic.json                     |  4 +-
 .../zh-CN.mdx                                 |  2 +-
 .../en-US.langnostic.json                     |  4 +-
 .../zh-CN.mdx                                 |  4 +-
 .../en-US.langnostic.json                     |  4 +-
 .../zh-CN.mdx                                 |  4 +-
 .../en-US.langnostic.json                     |  4 +-
 .../zh-CN.mdx                                 | 22 +++--
 .../en-US.langnostic.json                     |  4 +-
 .../zh-CN.mdx                                 |  4 +-
 .../en-US.langnostic.json                     | 12 ++-
 .../zh-CN.mdx                                 | 38 ++++++-
 .../en-US.langnostic.json                     | 64 ++++++------
 .../zh-CN.mdx                                 | 98 +++++++++++--------
 .../en-US.langnostic.json                     |  4 +-
 .../zh-CN.mdx                                 |  2 +-
 .../en-US.langnostic.json                     |  4 +-
 .../zh-CN.mdx                                 |  4 +-
 .../en-US.langnostic.json                     |  4 +-
 .../zh-CN.mdx                                 |  2 +-
 .../en-US.langnostic.json                     |  4 +-
 .../zh-CN.mdx                                 |  2 +-
 .../en-US.langnostic.json                     |  4 +-
 .../zh-CN.mdx                                 |  2 +-
 40 files changed, 260 insertions(+), 186 deletions(-)

diff --git a/questions/describe-event-bubbling/en-US.langnostic.json b/questions/describe-event-bubbling/en-US.langnostic.json
index c1c657a..ba1eea0 100644
--- a/questions/describe-event-bubbling/en-US.langnostic.json
+++ b/questions/describe-event-bubbling/en-US.langnostic.json
@@ -22,7 +22,7 @@
         "a517a702",
         "9e538dcd",
         "3818abba",
-        "47a90b06",
+        "cd29d4cf",
         "10d6cb7a",
         "1f177e65",
         "d7a0aa2",
@@ -66,7 +66,7 @@
         "a517a702",
         "9e538dcd",
         "3818abba",
-        "47a90b06",
+        "cd29d4cf",
         "10d6cb7a",
         "1f177e65",
         "d7a0aa2",
diff --git a/questions/describe-event-bubbling/zh-CN.mdx b/questions/describe-event-bubbling/zh-CN.mdx
index af3b4bc..cb10caa 100644
--- a/questions/describe-event-bubbling/zh-CN.mdx
+++ b/questions/describe-event-bubbling/zh-CN.mdx
@@ -8,7 +8,7 @@ title: 描述 JavaScript 和浏览器的事件冒泡
 
 事件冒泡对于事件委托至关重要，其中单个事件处理程序管理多个子元素的事件，从而提高性能和代码简洁性。虽然方便，但未能正确管理事件传播可能导致意外行为，例如多个处理程序为单个事件触发。
 
----
+***
 
 ## 什么是事件冒泡？
 
@@ -85,7 +85,7 @@ child.click();
 
 ## 事件委托
 
-事件冒泡是称为 [事件委托](/questions/quiz/describe-event-delegation) 的技术的基础，您将单个事件处理程序附加到多个元素的公共祖先，并使用事件委托来有效地处理这些元素的事件。当您有大量相似的元素（如项目列表）并且希望避免将单独的事件处理程序附加到每个项目时，这特别有用。
+事件冒泡是[事件委托](/questions/quiz/explain-event-delegation)技术的基础，您可以在多个元素的公共祖先上附加单个事件处理程序，并使用事件委托来有效地处理这些元素的事件。当您有大量相似的元素（如项目列表）并且希望避免将单独的事件处理程序附加到每个项目时，这特别有用。
 
 ```js
 parent.addEventListener('click', (event) => {
@@ -97,15 +97,15 @@ parent.addEventListener('click', (event) => {
 
 ## 优点
 
-- **更简洁的代码：** 减少事件监听器的数量，提高代码可读性和可维护性。
-- **高效的事件处理：** 通过附加更少的监听器，最大限度地减少性能开销。
-- **灵活性：** 允许处理子元素上发生的事件，而无需直接将监听器附加到它们。
+* **更简洁的代码：** 减少事件监听器的数量，提高代码可读性和可维护性。
+* **高效的事件处理：** 通过附加更少的监听器，最大限度地减少性能开销。
+* **灵活性：** 允许处理子元素上发生的事件，而无需直接将监听器附加到它们。
 
 ## 陷阱
 
-- **意外的事件处理：** 请注意，父元素可能会无意中捕获子元素发生的事件。使用 `event.target` 来识别触发事件的特定元素。
-- **事件顺序：** 事件以特定顺序冒泡。如果多个父元素有事件监听器，它们的执行顺序取决于 DOM 层次结构。
-- **过度委托：** 虽然将事件委托给公共祖先是有效的，但在 DOM 树中附加一个过高的监听器可能会捕获意外的事件。
+* **意外的事件处理：** 请注意，父元素可能会无意中捕获子元素发生的事件。使用 `event.target` 来识别触发事件的特定元素。
+* **事件顺序：** 事件以特定顺序冒泡。如果多个父元素有事件监听器，它们的执行顺序取决于 DOM 层次结构。
+* **过度委托：** 虽然将事件委托给公共祖先是有效的，但在 DOM 树中附加一个过高的监听器可能会捕获意外的事件。
 
 ## 用例
 
@@ -217,6 +217,6 @@ function handleAccordionClick(event) {
 
 ## 延伸阅读
 
-- [MDN Web Docs on Event Bubbling](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling)
-- [JavaScript.info - Bubbling and Capturing](https://javascript.info/bubbling-and-capturing)
-- [W3C DOM Level 3 Events Specification](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)
+* [MDN Web Docs on Event Bubbling](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling)
+* [JavaScript.info - Bubbling and Capturing](https://javascript.info/bubbling-and-capturing)
+* [W3C DOM Level 3 Events Specification](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)
diff --git a/questions/explain-event-delegation/en-US.langnostic.json b/questions/explain-event-delegation/en-US.langnostic.json
index 825258f..1e26976 100644
--- a/questions/explain-event-delegation/en-US.langnostic.json
+++ b/questions/explain-event-delegation/en-US.langnostic.json
@@ -30,7 +30,7 @@
         "d97425a1",
         "b5905a85",
         "4688282c",
-        "1c737627",
+        "5afea3bd",
         "68b07c90",
         "cd5dd65b",
         "b8ab38ac",
@@ -39,7 +39,7 @@
         "2670c799",
         "c7a88171",
         "1f4770e5",
-        "fb9ea696"
+        "b4e3453b"
       ]
     },
     "targets": {
@@ -68,7 +68,7 @@
         "d97425a1",
         "b5905a85",
         "4688282c",
-        "1c737627",
+        "5afea3bd",
         "68b07c90",
         "cd5dd65b",
         "b8ab38ac",
@@ -77,7 +77,7 @@
         "2670c799",
         "c7a88171",
         "1f4770e5",
-        "fb9ea696"
+        "b4e3453b"
       ]
     }
   }
diff --git a/questions/explain-event-delegation/zh-CN.mdx b/questions/explain-event-delegation/zh-CN.mdx
index e4effad..845e526 100644
--- a/questions/explain-event-delegation/zh-CN.mdx
+++ b/questions/explain-event-delegation/zh-CN.mdx
@@ -108,7 +108,7 @@ userForm.addEventListener('input', (event) => {
 });
 ```
 
-在此示例中，单个 input 事件侦听器附加到表单元素。 它可以响应所有子输入元素的输入更改，从而简化代码，每个 `<input>` 元素使用一个事件侦听器。
+在这个例子中，单个输入事件监听器附加到表单元素。它可以响应所有子输入元素的输入更改，通过消除对每个`<input>`元素上单独监听器的需求来简化代码。
 
 ## 陷阱
 
diff --git a/questions/explain-hoisting/en-US.langnostic.json b/questions/explain-hoisting/en-US.langnostic.json
index cdb82dd..0f29b09 100644
--- a/questions/explain-hoisting/en-US.langnostic.json
+++ b/questions/explain-hoisting/en-US.langnostic.json
@@ -48,7 +48,7 @@
         "b9a03b4e",
         "c314f8b",
         "1f4770e5",
-        "276e19b3"
+        "8d801c81"
       ]
     },
     "targets": {
@@ -95,7 +95,7 @@
         "b9a03b4e",
         "c314f8b",
         "1f4770e5",
-        "276e19b3"
+        "8d801c81"
       ]
     }
   }
diff --git a/questions/explain-hoisting/zh-CN.mdx b/questions/explain-hoisting/zh-CN.mdx
index 912234b..eb7a99e 100644
--- a/questions/explain-hoisting/zh-CN.mdx
+++ b/questions/explain-hoisting/zh-CN.mdx
@@ -139,5 +139,5 @@ ESLint 是一个静态代码分析器，可以发现违反此类情况，使用
 
 ## 延伸阅读
 
-* [Hoisting | MDN](https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting)
-* [JavaScript Visualized: Hoisting](https://dev.to/lydiahallie/javascript-visualized-hoisting-478h)
+* [Hoisting | MDN](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting)
+* [What is Hoisting in JavaScript?](https://www.freecodecamp.org/news/what-is-hoisting-in-javascript)
diff --git a/questions/explain-how-prototypal-inheritance-works/en-US.langnostic.json b/questions/explain-how-prototypal-inheritance-works/en-US.langnostic.json
index 0f9d25b..6bea6f8 100644
--- a/questions/explain-how-prototypal-inheritance-works/en-US.langnostic.json
+++ b/questions/explain-how-prototypal-inheritance-works/en-US.langnostic.json
@@ -21,8 +21,8 @@
         "be2d34c4",
         "b52ddf94",
         "1dc60677",
-        "11a400e1",
-        "3d40f5c3",
+        "6b3b6f34",
+        "92a0271d",
         "3b5a819f",
         "dae7e089",
         "2b6d6fd1"
@@ -45,8 +45,8 @@
         "be2d34c4",
         "b52ddf94",
         "1dc60677",
-        "11a400e1",
-        "3d40f5c3",
+        "6b3b6f34",
+        "92a0271d",
         "3b5a819f",
         "dae7e089",
         "2b6d6fd1"
diff --git a/questions/explain-how-prototypal-inheritance-works/zh-CN.mdx b/questions/explain-how-prototypal-inheritance-works/zh-CN.mdx
index 10fdf29..a0c8d29 100644
--- a/questions/explain-how-prototypal-inheritance-works/zh-CN.mdx
+++ b/questions/explain-how-prototypal-inheritance-works/zh-CN.mdx
@@ -47,8 +47,8 @@ bolt.bark(); // "Woof!"
 
 需要注意的是：
 
-*  `.makeSound` 未在 `Dog` 上定义，因此 JavaScript 引擎会向上查找原型链，并在继承的 `Animal` 上找到 `.makeSound`。
-*  不再推荐使用 `Object.create()` 来构建继承链。请改用 `Object.setPrototypeOf()`。
+* `.makeSound` 未在 `Dog` 上定义，因此 JavaScript 引擎会向上查找原型链，并在继承的 `Animal` 上找到 `.makeSound`。
+* 不再推荐使用 `Object.create()` 来构建继承链。请改用 `Object.setPrototypeOf()`。
 
 ***
 
@@ -105,42 +105,42 @@ console.log(john.sayHello); // undefined
 3. **构造函数**：JavaScript 提供了构造函数来创建对象。当一个函数与 new 关键字一起用作构造函数时，新对象的原型 (`[[Prototype]]`) 将设置为构造函数 的原型属性。
 
 ```js live
-// Define a constructor function
+// 定义一个构造函数
 function Animal(name) {
   this.name = name;
 }
 
-// Add a method to the prototype
+// 将一个方法添加到原型上
 Animal.prototype.sayName = function () {
-  console.log(`My name is ${this.name}`);
+  console.log(`我的名字是 ${this.name}`);
 };
 
-// Define a new constructor function
+// 定义一个新的构造函数
 function Dog(name, breed) {
   Animal.call(this, name);
   this.breed = breed;
 }
 
-// Set the prototype of Dog to be a new instance of Animal
-Dog.prototype = Object.create(Animal.prototype);
+// 设置 Dog 的原型以继承自 Animal 的原型
+Object.setPrototypeOf(Dog.prototype, Animal.prototype);
 
-// Add a method to the Dog prototype
+// 将一个方法添加到 Dog 的原型上
 Dog.prototype.bark = function () {
-  console.log('Woof!');
+  console.log('汪！');
 };
 
-// Create a new object using the Dog constructor function
+// 使用 Dog 构造函数创建一个新对象
 let fido = new Dog('Fido', 'Labrador');
 
-// The new object has access to the methods defined on its own prototype and the Animal prototype
-fido.bark(); // "Woof!"
-fido.sayName(); // "My name is Fido"
+// 新对象可以访问在其自身原型和 Animal 原型上定义的方法
+fido.bark(); // "汪！"
+fido.sayName(); // "我的名字是 Fido"
 
-// If we try to access a method that doesn't exist on the Dog prototype or the Animal prototype, JavaScript will return undefined
+// 如果我们尝试访问 Dog 原型或 Animal 原型上不存在的方法，JavaScript 将返回 undefined
 console.log(fido.fly); // undefined
 ```
 
-4. **`Object.create()`**：此方法使用指定原型对象和属性创建一个新对象。这是设置原型继承的一种直接方法。如果您通过 `Object.create(null)` 创建一个对象，它将不会从 `Object.prototype` 继承任何属性。这意味着该对象将没有任何内置属性或方法，例如 `toString()`、`hasOwnProperty()`
+4. **`Object.create()`**: 此方法创建一个新对象，其内部 `[[Prototype]]` 直接链接到指定的原型对象。这是创建从另一个特定对象继承的对象的最直接方法，无需涉及构造函数。如果通过 `Object.create(null)` 创建一个对象，它将不会从 `Object.prototype` 继承任何属性。这意味着该对象将没有任何内置属性或方法，如 `toString()`、`hasOwnProperty()`,
 
 ```js live
 // Define a prototype object
diff --git a/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.langnostic.json b/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.langnostic.json
index b3df7ac..0fc61f2 100644
--- a/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.langnostic.json
+++ b/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/en-US.langnostic.json
@@ -24,7 +24,7 @@
         "5de61f04",
         "cac9a1fb",
         "1f4770e5",
-        "c2276b55"
+        "8e223077"
       ]
     },
     "targets": {
@@ -47,7 +47,7 @@
         "5de61f04",
         "cac9a1fb",
         "1f4770e5",
-        "c2276b55"
+        "8e223077"
       ]
     }
   }
diff --git a/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/zh-CN.mdx b/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/zh-CN.mdx
index fb32c20..5b4698c 100644
--- a/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/zh-CN.mdx
+++ b/questions/explain-the-concept-of-a-callback-function-in-asynchronous-operations/zh-CN.mdx
@@ -96,4 +96,4 @@ fetchData((error, data) => {
 
 * [MDN Web Docs: Callback function](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
 * [JavaScript.info: Callbacks](https://javascript.info/callbacks)
-* [Node.js: Asynchronous programming and callbacks](https://nodejs.org/en/knowledge/getting-started/control-flow/what-are-callbacks/)
+* [Node.js: Asynchronous programming and callbacks](https://nodejs.org/en/learn/asynchronous-work/javascript-asynchronous-programming-and-callbacks)
diff --git a/questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.langnostic.json b/questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.langnostic.json
index d1317d3..581e546 100644
--- a/questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.langnostic.json
+++ b/questions/how-can-you-optimize-dom-manipulation-for-better-performance/en-US.langnostic.json
@@ -29,7 +29,7 @@
         "5248ed8e",
         "46ef02ea",
         "1f4770e5",
-        "c070c801"
+        "b60420e0"
       ]
     },
     "targets": {
@@ -57,7 +57,7 @@
         "5248ed8e",
         "46ef02ea",
         "1f4770e5",
-        "c070c801"
+        "b60420e0"
       ]
     }
   }
diff --git a/questions/how-can-you-optimize-dom-manipulation-for-better-performance/zh-CN.mdx b/questions/how-can-you-optimize-dom-manipulation-for-better-performance/zh-CN.mdx
index 0ca20bc..8057f22 100644
--- a/questions/how-can-you-optimize-dom-manipulation-for-better-performance/zh-CN.mdx
+++ b/questions/how-can-you-optimize-dom-manipulation-for-better-performance/zh-CN.mdx
@@ -106,4 +106,7 @@ element.style.height = `${height + 10}px`; // Write
 
 ## 延伸阅读
 
+* [MDN Web Docs: DOM manipulation](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Manipulating_the_DOM)
+* [Google Developers: Avoid large, complex layouts and layout thrashing](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing)
+* [React documentation](https://react.dev/learn)
 * [MDN Web Docs: Using requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
diff --git a/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.langnostic.json b/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.langnostic.json
index a512b05..ebb8e28 100644
--- a/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.langnostic.json
+++ b/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.langnostic.json
@@ -31,7 +31,7 @@
         "d9c2bda4",
         "b35115b8",
         "add698fb",
-        "31ad0416",
+        "962a7cae",
         "1f4770e5",
         "7787358c"
       ]
@@ -63,7 +63,7 @@
         "d9c2bda4",
         "b35115b8",
         "add698fb",
-        "31ad0416",
+        "962a7cae",
         "1f4770e5",
         "7787358c"
       ]
diff --git a/questions/how-do-you-abort-a-web-request-using-abortcontrollers/zh-CN.mdx b/questions/how-do-you-abort-a-web-request-using-abortcontrollers/zh-CN.mdx
index bfd581f..23c3323 100644
--- a/questions/how-do-you-abort-a-web-request-using-abortcontrollers/zh-CN.mdx
+++ b/questions/how-do-you-abort-a-web-request-using-abortcontrollers/zh-CN.mdx
@@ -152,8 +152,8 @@ setTimeout(() => {
 
 ## 笔记
 
-* `AbortController` 并非 `fetch()` 专有，它也可以用于中止其他异步任务。
-* 一个单独的 `AbortContoller` 实例可以被重用或用于多个异步任务，并一次性取消所有任务。
+* `AbortController` 不仅限于 `fetch()`，它也可以用于中止其他异步任务。
+* 一个单独的 `AbortContoller` 实例可以在多个异步任务上重复使用，并一次取消所有任务。
 * 在 `AbortController` 上调用 `abort()` 不会向服务器发送任何通知或信号。服务器不知道取消操作，并将继续处理请求，直到它完成或超时。
 
 ## 延伸阅读
diff --git a/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.langnostic.json b/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.langnostic.json
index cacf4f7..1ca476e 100644
--- a/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.langnostic.json
+++ b/questions/how-do-you-handle-errors-in-asynchronous-operations/en-US.langnostic.json
@@ -18,7 +18,7 @@
         "6f1c138c",
         "772c3745",
         "393b7aae",
-        "6bffb974",
+        "c238d5a7",
         "a65a6657",
         "f3ba35be",
         "fda8e360",
@@ -44,7 +44,7 @@
         "6f1c138c",
         "772c3745",
         "393b7aae",
-        "6bffb974",
+        "c238d5a7",
         "a65a6657",
         "f3ba35be",
         "fda8e360",
diff --git a/questions/how-do-you-handle-errors-in-asynchronous-operations/zh-CN.mdx b/questions/how-do-you-handle-errors-in-asynchronous-operations/zh-CN.mdx
index 1eed18d..cfb87e1 100644
--- a/questions/how-do-you-handle-errors-in-asynchronous-operations/zh-CN.mdx
+++ b/questions/how-do-you-handle-errors-in-asynchronous-operations/zh-CN.mdx
@@ -58,28 +58,33 @@ fetchData(); // Error fetching data: ....
 如果您有多个异步操作，则可以嵌套 `try...catch` 块以处理不同级别的错误。
 
 ```js live
-async function fetchData() {
-  try {
-    // Invalid URl
-    const response = await fetch('https://api.example.com/data');
-    const data = await response.json();
-    console.log(data);
-  } catch (error) {
-    console.error('Error fetching data:', error);
-  }
+async function fetchUser() {
+  // Simulate a successful async operation
+  return { id: 1, name: 'Alice' };
 }
 
-async function processData() {
+async function fetchUserPosts() {
+  // Simulate a failed async operation
+  throw new Error('Failed to fetch posts');
+}
+
+async function loadUserData() {
   try {
-    await fetchData();
-    // Additional processing
-    console.log(arr); // Trying to reference an undefined variable will throw an error
-  } catch (error) {
-    console.error('Error processing data:', error);
+    const user = await fetchUser();
+    console.log('User:', user);
+
+    try {
+      const posts = await fetchUserPosts();
+      console.log('Posts:', posts);
+    } catch (postsError) {
+      console.error('Error fetching posts:', postsError.message);
+    }
+  } catch (userError) {
+    console.error('Error fetching user:', userError.message);
   }
 }
 
-processData();
+loadUserData();
 ```
 
 ## 使用 `.catch()` 和 Promises
diff --git a/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.langnostic.json b/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.langnostic.json
index d3212a6..ccbf5b5 100644
--- a/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.langnostic.json
+++ b/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/en-US.langnostic.json
@@ -29,7 +29,7 @@
         "e22beaf8",
         "750510df",
         "1f4770e5",
-        "d3c9fd72"
+        "b11b22d6"
       ]
     },
     "targets": {
@@ -56,7 +56,7 @@
         "e22beaf8",
         "750510df",
         "1f4770e5",
-        "d3c9fd72"
+        "b11b22d6"
       ]
     }
   }
diff --git a/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx b/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx
index f14a8ca..1e6ed46 100644
--- a/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx
+++ b/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx
@@ -69,6 +69,6 @@ src/
 
 ## 延伸阅读
 
-* [JavaScript 编码标准](https://github.com/airbnb/javascript)
+* [JavaScript 编码规范](https://github.com/airbnb/javascript)
 * [编写干净的代码](https://www.freecodecamp.org/news/writing-clean-code-6a8e2889b9f8/)
 * [有效的 JavaScript 文档](https://jsdoc.app/)
diff --git a/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.langnostic.json b/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.langnostic.json
index ee3a6f8..eed4d9a 100644
--- a/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.langnostic.json
+++ b/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/en-US.langnostic.json
@@ -34,7 +34,7 @@
         "fb469bef",
         "1bf2c887",
         "1f4770e5",
-        "616d6c3d"
+        "2de0d5ff"
       ]
     },
     "targets": {
@@ -67,7 +67,7 @@
         "fb469bef",
         "1bf2c887",
         "1f4770e5",
-        "616d6c3d"
+        "2de0d5ff"
       ]
     }
   }
diff --git a/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/zh-CN.mdx b/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/zh-CN.mdx
index 6edb9f9..1e77ed5 100644
--- a/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/zh-CN.mdx
+++ b/questions/how-do-you-validate-form-elements-using-the-constraint-validation-api/zh-CN.mdx
@@ -113,4 +113,6 @@ if (!input.checkValidity()) {
 
 ## 延伸阅读
 
-* [MDN Web Docs: HTMLFormElement.setCustomValidity()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/setCustomValidity)
+* [MDN Web Docs: Constraint Validation](https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Constraint_validation)
+* [MDN Web Docs: HTMLFormElement.checkValidity()](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement/checkValidity)
+* [MDN Web Docs: HTMLObjectElement.setCustomValidity()](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLObjectElement/setCustomValidity)
diff --git a/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.langnostic.json b/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.langnostic.json
index ffd0805..ce25ccd 100644
--- a/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.langnostic.json
+++ b/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.langnostic.json
@@ -29,7 +29,7 @@
         "a66dddf1",
         "c873062e",
         "8ee35790",
-        "ec42a2f7",
+        "35453aab",
         "e8a375ac",
         "85abbd38",
         "dec95974",
@@ -75,7 +75,7 @@
         "a66dddf1",
         "c873062e",
         "8ee35790",
-        "ec42a2f7",
+        "35453aab",
         "e8a375ac",
         "85abbd38",
         "dec95974",
diff --git a/questions/what-are-iterators-and-generators-and-what-are-they-used-for/zh-CN.mdx b/questions/what-are-iterators-and-generators-and-what-are-they-used-for/zh-CN.mdx
index c0daef3..bc8bbeb 100644
--- a/questions/what-are-iterators-and-generators-and-what-are-they-used-for/zh-CN.mdx
+++ b/questions/what-are-iterators-and-generators-and-what-are-they-used-for/zh-CN.mdx
@@ -179,9 +179,9 @@ for (const number of range) {
 
 生成器是一种特殊的函数，可以暂停和恢复其执行，允许它们动态生成一系列值。它们通常用于创建迭代器，但也有其他应用。生成器的主要用例包括：
 
-* 创建迭代器比手动实现迭代器协议更简洁易读。
+* 与手动实现迭代器协议相比，以更简洁易读的方式创建迭代器。
 * 实现惰性求值，仅在需要时生成值，从而节省内存和计算时间。
-* 通过使用 `yield` 和 `await` 允许以同步风格编写代码，从而简化异步编程。
+* 通过使用 `yield` 和 `await` 以同步风格编写代码，简化异步编程。
 
 生成器提供了一些好处：
 
diff --git a/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.langnostic.json b/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.langnostic.json
index 866cba4..c0fa9ae 100644
--- a/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.langnostic.json
+++ b/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/en-US.langnostic.json
@@ -15,7 +15,7 @@
         "e1b03eaa",
         "b356f884",
         "8985808d",
-        "1762d061",
+        "2f749967",
         "18674338",
         "fcbf17fa",
         "567451fb",
@@ -54,7 +54,7 @@
         "e1b03eaa",
         "b356f884",
         "8985808d",
-        "1762d061",
+        "2f749967",
         "18674338",
         "fcbf17fa",
         "567451fb",
diff --git a/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/zh-CN.mdx b/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/zh-CN.mdx
index 2746829..30023c3 100644
--- a/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/zh-CN.mdx
+++ b/questions/what-are-some-common-performance-bottlenecks-in-javascript-applications/zh-CN.mdx
@@ -38,16 +38,22 @@ document.body.appendChild(fragment);
 
 ```js
 // Inefficient
-for (let i = 0; i < 1000; i++) {
-  const height = element.clientHeight;
-  element.style.height = `${height + 10}px`;
-}
+boxes.forEach((box) => {
+  const height = box.offsetHeight; // Read
+  box.style.height = `${height + 10}px`; // Write
+});
 
 // Efficient
-const height = element.clientHeight;
-for (let i = 0; i < 1000; i++) {
-  element.style.height = `${height + 10}px`;
-}
+// Batch read
+const heights = [];
+boxes.forEach((box) => {
+  heights.push(box.offsetHeight);
+});
+
+// Batch write
+boxes.forEach((box, i) => {
+  box.style.height = `${heights[i] + 10}px`;
+});
 ```
 
 ## 过度使用全局变量
diff --git a/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.langnostic.json b/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.langnostic.json
index 4ffe8f8..cef360b 100644
--- a/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.langnostic.json
+++ b/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.langnostic.json
@@ -55,7 +55,7 @@
         "4a61620f",
         "5c76b4eb",
         "2f2aecf8",
-        "bd7adb9",
+        "b9e94c15",
         "81f2d0",
         "d265256c",
         "fa307855",
@@ -114,7 +114,7 @@
         "4a61620f",
         "5c76b4eb",
         "2f2aecf8",
-        "bd7adb9",
+        "b9e94c15",
         "81f2d0",
         "d265256c",
         "fa307855",
diff --git a/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/zh-CN.mdx b/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/zh-CN.mdx
index 75f021f..d81af9f 100644
--- a/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/zh-CN.mdx
+++ b/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/zh-CN.mdx
@@ -223,8 +223,8 @@ xhr.upload.onprogress = (event) => {
 
 分配给 `onprogress` 的回调函数会传递一个 [`ProgressEvent`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/progress_event):
 
-* `ProgressEvent` 上的 `loaded` 字段是一个 64 位整数，指示底层进程已执行的工作量（已上传/下载的字节数）。
-* `ProgressEvent` 上的 `total` 字段是一个 64 位整数，表示底层进程正在执行的总工作量。 下载资源时，这是 HTTP 请求的 `Content-Length` 值。
+* `ProgressEvent`上的`loaded`字段是一个64位整数，表示底层进程已经完成的工作量（已上传/下载的字节数）。
+* `ProgressEvent`上的`total`字段是一个64位整数，表示底层进程正在执行的总工作量。下载资源时，这是HTTP响应的`Content-Length`值。
 
 另一方面，`fetch()` API 并没有提供任何方便的方法来跟踪上传进度。 它可以实现为监视 `Response` 对象的 `body` 作为 `Content-Length` 标头的分数，但这非常复杂。
 
diff --git a/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.langnostic.json b/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.langnostic.json
index bf1b9f3..daedba5 100644
--- a/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.langnostic.json
+++ b/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.langnostic.json
@@ -19,7 +19,11 @@
         "8e710086",
         "67266c1d",
         "d9474d27",
-        "3aca751b",
+        "8ce1b750",
+        "f41597bd",
+        "7e9ebd41",
+        "610c4a30",
+        "a5cdccec",
         "4aac36ab",
         "5fe5bc4d",
         "13797f10",
@@ -45,7 +49,11 @@
         "8e710086",
         "67266c1d",
         "d9474d27",
-        "3aca751b",
+        "8ce1b750",
+        "f41597bd",
+        "7e9ebd41",
+        "610c4a30",
+        "a5cdccec",
         "4aac36ab",
         "5fe5bc4d",
         "13797f10",
diff --git a/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.mdx b/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.mdx
index 9e0ef8b..8873ca2 100644
--- a/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.mdx
+++ b/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.mdx
@@ -115,13 +115,49 @@ function getData3() {
 
 Promise.all([getData1(), getData2(), getData3()])
   .then((results) => {
-    console.log(results); // Output: [[{ id: 1, title: 'Data 1' }, { id: 2, title: 'Data 2' }, { id: 3, title: 'Data 3' }]
+    console.log(results); // Output: [{ id: 1, title: 'Data 1' }, { id: 2, title: 'Data 2' }, { id: 3, title: 'Data 3' }]
   })
   .catch((error) => {
     console.error('Error:', error);
   });
 ```
 
+### 使用`.catch()`更容易处理错误，使用`.finally()`保证清理
+
+Promise 通过允许您在链的末尾使用`.catch()`捕获错误，而不是在每个回调中手动检查错误，从而使错误处理更加简单。这使得代码更简洁、更易于维护。
+
+此外，`.finally()` 允许您在 Promise 确定后运行代码，无论它是否成功，这对于清理任务（如隐藏微调器或重置 UI 状态）非常有用。
+
+```js live
+function getFirstData() {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({ id: 1, title: 'First Data' });
+    }, 1000);
+  });
+}
+
+function getSecondData(data) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({ id: data.id, title: data.title + ' -> Second Data' });
+    }, 1000);
+  });
+}
+
+getFirstData()
+  .then(getSecondData)
+  .then((data) => {
+    console.log('Success:', data);
+  })
+  .catch((error) => {
+    console.error('Error:', error);
+  })
+  .finally(() => {
+    console.log('This runs no matter what');
+  });
+```
+
 ### 使用 Promise，以下情况不会发生，这些情况存在于仅使用回调的编码中：
 
 * 过早调用回调
diff --git a/questions/what-do-you-think-of-amd-vs-commonjs/en-US.langnostic.json b/questions/what-do-you-think-of-amd-vs-commonjs/en-US.langnostic.json
index 2d6c3a9..7ce383f 100644
--- a/questions/what-do-you-think-of-amd-vs-commonjs/en-US.langnostic.json
+++ b/questions/what-do-you-think-of-amd-vs-commonjs/en-US.langnostic.json
@@ -1,75 +1,77 @@
 {
   "frontmatter": {
-    "title": "7985428"
+    "title": "d4ad4303"
   },
   "content": {
     "source": {
       "locale": "en-US",
       "hashes": [
         "77da26a5",
-        "7fda4468",
+        "ac7f1dcb",
         "2a7816d0",
-        "179b0868",
         "7e5d8c12",
-        "d21ac3ca",
-        "69eb87d6",
-        "6bf6ed5b",
-        "509a645f",
-        "748ffe75",
-        "40bc45c6",
+        "7cc5a809",
         "96b698d",
         "6bf6ed5b",
         "ef879098",
         "748ffe75",
         "b58e02f3",
+        "bf6d8053",
+        "6bf6ed5b",
+        "7b1a935b",
+        "748ffe75",
+        "fe92c745",
         "67423e0a",
         "a82a90cc",
-        "e81864d2",
+        "72cbbd54",
         "d7ae6d3f",
-        "40bf324b",
+        "2e3b1e66",
         "f4801713",
-        "afdf8108",
+        "b0600791",
+        "8ce3d8ef",
+        "c735cbf9",
         "6dd3b324",
-        "dc0bf89e",
-        "66582988",
         "937e3338",
-        "7a5f8faf",
+        "9ff078",
+        "34105638",
+        "d9138816",
         "1f4770e5",
-        "3822c011"
+        "19ad870f"
       ]
     },
     "targets": {
       "zh-CN": [
         "77da26a5",
-        "7fda4468",
+        "ac7f1dcb",
         "2a7816d0",
-        "179b0868",
         "7e5d8c12",
-        "d21ac3ca",
-        "69eb87d6",
-        "6bf6ed5b",
-        "509a645f",
-        "748ffe75",
-        "40bc45c6",
+        "7cc5a809",
         "96b698d",
         "6bf6ed5b",
         "ef879098",
         "748ffe75",
         "b58e02f3",
+        "bf6d8053",
+        "6bf6ed5b",
+        "7b1a935b",
+        "748ffe75",
+        "fe92c745",
         "67423e0a",
         "a82a90cc",
-        "e81864d2",
+        "72cbbd54",
         "d7ae6d3f",
-        "40bf324b",
+        "2e3b1e66",
         "f4801713",
-        "afdf8108",
+        "b0600791",
+        "8ce3d8ef",
+        "c735cbf9",
         "6dd3b324",
-        "dc0bf89e",
-        "66582988",
         "937e3338",
-        "7a5f8faf",
+        "9ff078",
+        "34105638",
+        "d9138816",
         "1f4770e5",
-        "3822c011"
+        "19ad870f"
       ]
     }
   }
diff --git a/questions/what-do-you-think-of-amd-vs-commonjs/zh-CN.mdx b/questions/what-do-you-think-of-amd-vs-commonjs/zh-CN.mdx
index eed2fea..c803ab1 100644
--- a/questions/what-do-you-think-of-amd-vs-commonjs/zh-CN.mdx
+++ b/questions/what-do-you-think-of-amd-vs-commonjs/zh-CN.mdx
@@ -1,42 +1,16 @@
 ---
-title: 你如何看待 AMD 与 CommonJS？
+title: 你如何看待 CommonJS 与 ESM？
 ---
 
 ## TL;DR
 
-AMD（异步模块定义）和 CommonJS 是两种 JavaScript 模块系统。AMD 专为异步加载模块而设计，使其适用于浏览器。CommonJS 专为同步加载而设计，使其更适合服务器端环境，如 Node.js。AMD 使用 `define` 和 `require` 来定义和加载模块，而 CommonJS 使用 `module.exports` 和 `require`。
+JavaScript 已经演进其模块系统。ESM (ECMAScript Modules) 使用 `import` / `export` 是官方标准，在现代浏览器和 Node.js 中原生支持，专为同步和异步用例设计。CommonJS (CJS) 使用 `require` / `module.exports` 是 Node.js 的原始标准，主要用于同步，并且仍然在 Node 生态系统中占主导地位。AMD (Asynchronous Module Definition) 使用 `define` / `require` 是早期为浏览器中的异步加载而设计的系统，但现在已经基本过时，被 ESM 取代。
 
 ***
 
-## AMD vs CommonJS
-
 ### 概述
 
-AMD 和 CommonJS 都是 JavaScript 中用于管理依赖关系和组织代码的模块系统。它们服务于不同的目的，并适用于不同的环境。
-
-### AMD (异步模块定义)
-
-#### 特点
-
-* 专为异步加载模块而设计
-* 主要用于浏览器环境
-* 使用 `define` 和 `require` 来定义和加载模块
-
-#### 示例
-
-```javascript
-// 在 AMD 中定义一个模块
-define(['dependency1', 'dependency2'], function (dep1, dep2) {
-  return {
-    // 模块代码在这里
-  };
-});
-
-// 在 AMD 中加载一个模块
-require(['module1', 'module2'], function (mod1, mod2) {
-  // 使用 mod1 和 mod2 的代码
-});
-```
+模块系统通过允许代码被拆分成具有清晰依赖关系的可重用部分（模块）来帮助管理这种复杂性。随着时间的推移，在官方标准被采用之前，出现了不同的模块系统。
 
 ### CommonJS
 
@@ -64,37 +38,75 @@ const mod2 = require('module2');
 // 使用 mod1 和 mod2 的代码
 ```
 
+### ESM (ECMAScript Modules)
+
+#### 特点
+
+* 官方 JavaScript 标准模块系统
+* 在现代浏览器和 Node.js 中原生支持
+* 专为异步和同步场景设计
+* 使用 `export` 和 `import` 定义和加载模块
+
+#### 示例
+
+```javascript
+import dep1 from 'dependency1'; // if dependency1 had a default export
+import { dep2 } from 'dependency2'; // named import to import something specific from dependency2
+
+// Module code using dep1, dep2...
+
+export function someFunction() {
+  // ... function logic ...
+}
+export const someValue = 'hello';
+
+// Or export multiple things at once
+// export { someFunction, someValue };
+
+// Or export a default value
+// export default class MyClass {
+// ...
+// }
+```
+
 ### 主要区别
 
 #### 加载机制
 
-* **AMD**：异步，适用于浏览器，其中非阻塞操作至关重要。
-* **CommonJS**：同步，适用于服务器端环境，其中模块在执行前加载。
+* **CommonJS**: 同步（加载完成前阻塞）。
+* **ESM**: 异步友好（在浏览器中非阻塞）。
 
 #### 环境适用性
 
-* **AMD**: 适用于客户端应用程序。
-* **CommonJS**: 适用于服务器端应用程序。
+* **CommonJS**: Node.js 遗留标准。
+* **ESM**: 官方标准（浏览器和 Node.js）。
 
 #### 语法
 
-* **AMD**: 使用 `define` 和 `require`。
-* **CommonJS**: 使用 `module.exports` 和 `require`。
+* **CommonJS**: `require()` / `module.exports`。
+* **ESM**: `import` / `export`。
 
-### 用例
+#### 分析
 
-#### AMD
+* **CommonJS**: 动态（运行时分析）。
+* **ESM**: 静态（编译时分析，启用 tree-shaking）。
 
-* 适用于需要在 Web 应用程序中异步加载模块以避免阻塞 UI 的情况。
-* 经常与 RequireJS 等模块加载器一起使用。
+### 用例
 
 #### CommonJS
 
-* 适用于模块在开始时加载一次的服务器端应用程序。
-* Node.js 的标准模块系统。
+* 旧的 Node.js 项目或需要同步加载的地方。
+* Node.js 中的默认设置，除非配置为 ESM。
+
+#### ESM
+
+* 现代 Web 开发（原生浏览器支持）。
+* 新的 Node.js 项目，特别是那些需要异步特性或优化的项目。
+* 既用于浏览器又用于服务器的代码。
 
 ## 延伸阅读
 
-* [RequireJS documentation](https://requirejs.org/docs/api.html)
-* [Node.js modules documentation](https://nodejs.org/api/modules.html)
 * [MDN Web Docs on JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
+* [Node.js: CommonJS modules](https://nodejs.org/api/modules.html)
+* [Node.js: ESM](https://nodejs.org/api/esm.html)
+* [RequireJS (AMD Loader - Historical)](https://requirejs.org/docs/api.html)
diff --git a/questions/what-is-the-definition-of-a-higher-order-function/en-US.langnostic.json b/questions/what-is-the-definition-of-a-higher-order-function/en-US.langnostic.json
index 4ecea0e..4a8f2e8 100644
--- a/questions/what-is-the-definition-of-a-higher-order-function/en-US.langnostic.json
+++ b/questions/what-is-the-definition-of-a-higher-order-function/en-US.langnostic.json
@@ -19,7 +19,7 @@
         "d5c9d2f",
         "1fea7ba6",
         "2d5f215d",
-        "8d920541",
+        "a842f05d",
         "349ff728",
         "6699d554",
         "e0446ef0",
@@ -52,7 +52,7 @@
         "d5c9d2f",
         "1fea7ba6",
         "2d5f215d",
-        "8d920541",
+        "a842f05d",
         "349ff728",
         "6699d554",
         "e0446ef0",
diff --git a/questions/what-is-the-definition-of-a-higher-order-function/zh-CN.mdx b/questions/what-is-the-definition-of-a-higher-order-function/zh-CN.mdx
index f0c1057..2b5b09d 100644
--- a/questions/what-is-the-definition-of-a-higher-order-function/zh-CN.mdx
+++ b/questions/what-is-the-definition-of-a-higher-order-function/zh-CN.mdx
@@ -58,7 +58,7 @@ function greetName(greeter, name) {
 greetName(greet, 'Alice'); // Output: Hello, Alice!
 ```
 
-在此示例中，`greetName` 函数将另一个函数 `greet` 作为参数，并使用名称 `Alice` 执行它。 `greet` 函数是一个高阶函数，因为它作为参数传递给另一个函数。
+在这个例子中，`greetName`函数是高阶函数，因为它将另一个函数(`greet`)作为参数，并使用它为给定的名称生成问候语。
 
 ### 函数作为返回值
 
diff --git a/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.langnostic.json b/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.langnostic.json
index 6d145b2..3ce3609 100644
--- a/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.langnostic.json
+++ b/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.langnostic.json
@@ -26,7 +26,7 @@
         "a90cc1eb",
         "26f7b6ac",
         "e1468f22",
-        "ec4a5a01",
+        "32e4700e",
         "40808d83",
         "6f62bec8",
         "79360ef1",
@@ -55,7 +55,7 @@
         "a90cc1eb",
         "26f7b6ac",
         "e1468f22",
-        "ec4a5a01",
+        "32e4700e",
         "40808d83",
         "6f62bec8",
         "79360ef1",
diff --git a/questions/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.mdx b/questions/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.mdx
index 37f62d6..3bb2af8 100644
--- a/questions/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.mdx
+++ b/questions/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.mdx
@@ -77,8 +77,8 @@ JavaScript 中最后一个值比较操作是 [`Object.is()`](https://developer.m
 
 ## 结论
 
-* 当您希望使用类型强制转换比较值时使用 `==`（并了解其含义）。实际上，等号运算符的唯一有效用例是针对 `null` 和 `undefined` 以方便使用。
-* 当您希望确保值和类型都相同时使用 `===`，这在大多数情况下是更安全、更可预测的选择。
+* 当您希望通过类型转换比较值（并了解其含义）时，请使用`==`。 实际上，相等运算符的唯一合理用例是在单个比较中同时检查`null`和`undefined`以方便使用。
+* 当您希望确保值和类型都相同时，请使用`===`，这在大多数情况下是更安全、更可预测的选择。
 
 ### 笔记
 
diff --git a/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.langnostic.json b/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.langnostic.json
index 4339bfb..d020109 100644
--- a/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.langnostic.json
+++ b/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.langnostic.json
@@ -9,7 +9,7 @@
         "77da26a5",
         "2de3e97b",
         "b5333c4d",
-        "2e253553",
+        "791e2d5f",
         "e77b99ec",
         "2a7816d0",
         "270f1eda",
@@ -32,7 +32,7 @@
         "77da26a5",
         "2de3e97b",
         "b5333c4d",
-        "2e253553",
+        "791e2d5f",
         "e77b99ec",
         "2a7816d0",
         "270f1eda",
diff --git a/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/zh-CN.mdx b/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/zh-CN.mdx
index 1738ff2..fbd2838 100644
--- a/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/zh-CN.mdx
+++ b/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/zh-CN.mdx
@@ -8,7 +8,7 @@ title: JavaScript 和浏览器中 `mouseenter` 和 `mouseover` 事件有什么
 
 `mouseenter` 事件不冒泡。`mouseenter` 事件仅在鼠标指针进入元素本身时触发，而不是其后代元素。如果父元素有子元素，并且鼠标指针进入子元素，则不会再次在父元素上触发 `mouseenter` 事件，它仅在进入父元素时触发一次，而不考虑其内容。如果父元素和子元素都附加了 `mouseenter` 侦听器，并且鼠标指针从父元素移动到子元素，则 `mouseenter` 将仅为子元素触发。
 
-`mouseover` 事件会冒泡到 DOM 树。当鼠标指针进入元素或其后代元素之一时，将触发 `mouseover` 事件。如果父元素有子元素，并且鼠标指针进入子元素，则也会再次在父元素上触发 `mouseover` 事件。如果父元素有多个子元素，这可能导致多次触发事件回调。如果存在子元素，并且鼠标指针从父元素移动到子元素，则 `mouseover` 将同时为父元素和子元素触发。
+`mouseover` 事件会在 DOM 树中冒泡。当鼠标指针进入元素或其后代时，会触发 `mouseover` 事件。如果父元素有子元素，并且鼠标指针进入子元素，则父元素也会再次触发 `mouseover` 事件。如果父元素有多个子元素，这可能导致多次触发事件回调。如果有子元素，并且鼠标指针从父元素移动到子元素，则 `mouseover` 将同时为父元素和子元素触发。
 
 | 属性 | `mouseenter` | `mouseover` |
 | --- | --- | --- |
diff --git a/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.langnostic.json b/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.langnostic.json
index 0f49b6a..514254d 100644
--- a/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.langnostic.json
+++ b/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.langnostic.json
@@ -16,7 +16,7 @@
         "39c5da5a",
         "4bff8a9f",
         "778e52ef",
-        "3e0be9f0",
+        "6ea7c6b9",
         "c8cfa87c",
         "21dc7444",
         "524e9e1c",
@@ -40,7 +40,7 @@
         "39c5da5a",
         "4bff8a9f",
         "778e52ef",
-        "3e0be9f0",
+        "6ea7c6b9",
         "c8cfa87c",
         "21dc7444",
         "524e9e1c",
diff --git a/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/zh-CN.mdx b/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/zh-CN.mdx
index 6228f01..c7f48d0 100644
--- a/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/zh-CN.mdx
+++ b/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/zh-CN.mdx
@@ -34,7 +34,7 @@ console.log(typeof y === 'undefined'); // true
 
 ## `undefined`
 
-一个 `undefined` 的变量是一个已声明但未赋值的变量。它的类型是 `undefined`。如果一个函数在执行后没有返回任何值，则该值也被分配给一个变量，该变量的值也为 `undefined`。要检查它，请使用严格相等运算符 (`===`) 或 `typeof` 进行比较，这将给出 `'undefined'` 字符串。请注意，您不应该使用松散相等运算符 (`==`) 进行检查，因为它在值为 `null` 时也会返回 `true`。
+一个`undefined`的变量是已声明但未赋值的变量。它的类型是`undefined`。如果一个函数没有返回值，并且它的结果被分配给一个变量，那么该变量也将具有`undefined`值。要检查它，请使用严格相等运算符（`===`）或`typeof`进行比较，这将给出`'undefined'`字符串。请注意，您不应该使用宽松相等运算符（`==`）进行检查，因为它在值为`null`时也会返回`true`。
 
 ```js live
 let foo;
diff --git a/questions/whats-the-difference-between-call-and-apply/en-US.langnostic.json b/questions/whats-the-difference-between-call-and-apply/en-US.langnostic.json
index 2921954..4a302fc 100644
--- a/questions/whats-the-difference-between-call-and-apply/en-US.langnostic.json
+++ b/questions/whats-the-difference-between-call-and-apply/en-US.langnostic.json
@@ -24,7 +24,7 @@
         "5ca3e2c3",
         "a668cef3",
         "33ae0ea0",
-        "c3c7b446",
+        "e82cfe4",
         "37d72bcb",
         "c46e5768",
         "6e51c84c",
@@ -59,7 +59,7 @@
         "5ca3e2c3",
         "a668cef3",
         "33ae0ea0",
-        "c3c7b446",
+        "e82cfe4",
         "37d72bcb",
         "c46e5768",
         "6e51c84c",
diff --git a/questions/whats-the-difference-between-call-and-apply/zh-CN.mdx b/questions/whats-the-difference-between-call-and-apply/zh-CN.mdx
index a54eb49..5ff369e 100644
--- a/questions/whats-the-difference-between-call-and-apply/zh-CN.mdx
+++ b/questions/whats-the-difference-between-call-and-apply/zh-CN.mdx
@@ -80,7 +80,7 @@ const person1 = { name: 'John' };
 const person2 = { name: 'Alice' };
 
 greet.call(person1); // Hello, my name is John
-greet.call(person2); // Hello, my name is Alice
+greet.apply(person2); // Hello, my name is Alice
 ```
 
 ### 调用对象方法的替代语法

From 9531a2bd35f811730db39e9781330cb237ae8545 Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Wed, 7 May 2025 13:36:18 +0800
Subject: [PATCH 19/26] i18n: langnostic@0.0.8

---
 package.json   |  2 +-
 pnpm-lock.yaml | 82 +++++++++++++++++++++++++-------------------------
 2 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/package.json b/package.json
index 2c4d54c..9ff37ff 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "github-slugger": "^2.0.0",
     "globby": "^14.0.1",
     "gray-matter": "^4.0.3",
-    "langnostic": "^0.0.7",
+    "langnostic": "^0.0.8",
     "lodash-es": "^4.17.21",
     "tsx": "^4.15.1"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e40a66a..b7cad55 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,8 +18,8 @@ dependencies:
     specifier: ^4.0.3
     version: 4.0.3
   langnostic:
-    specifier: ^0.0.5
-    version: 0.0.5(react@19.1.0)(typescript@5.8.2)
+    specifier: ^0.0.8
+    version: 0.0.8(react@19.1.0)(typescript@5.8.2)
   lodash-es:
     specifier: ^4.17.21
     version: 4.17.21
@@ -34,52 +34,52 @@ devDependencies:
 
 packages:
 
-  /@ai-sdk/deepseek@0.2.4(zod@3.24.2):
+  /@ai-sdk/deepseek@0.2.4(zod@3.24.4):
     resolution: {integrity: sha512-D98J+qgZbr3qYoQCIfkd1E6SzmGPi7SelskvxT2329eCC7sPBlbHNbRT/fayShQT3qkqd7u/y24beI2rmMAuMg==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.0.0
     dependencies:
-      '@ai-sdk/openai-compatible': 0.2.4(zod@3.24.2)
+      '@ai-sdk/openai-compatible': 0.2.4(zod@3.24.4)
       '@ai-sdk/provider': 1.1.0
-      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.2)
-      zod: 3.24.2
+      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.4)
+      zod: 3.24.4
     dev: false
 
-  /@ai-sdk/google@1.2.5(zod@3.24.2):
+  /@ai-sdk/google@1.2.5(zod@3.24.4):
     resolution: {integrity: sha512-ykSPjYDmaDg7Qblo6Ea6n6O01NpyehZJE0j3+HCYBtUXKXP2RZWesr7XlceIfFBKHd0sumovRtX4ozHrb+1+sw==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.0.0
     dependencies:
       '@ai-sdk/provider': 1.1.0
-      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.2)
-      zod: 3.24.2
+      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.4)
+      zod: 3.24.4
     dev: false
 
-  /@ai-sdk/openai-compatible@0.2.4(zod@3.24.2):
+  /@ai-sdk/openai-compatible@0.2.4(zod@3.24.4):
     resolution: {integrity: sha512-hLQnBn5e69rUXvXW+9SOkiL+S4yQX62hjtlX3zKXBI/3VnfOTcGKMamK51GoQB7uQCN1h7l9orvWqWpuQXxzRg==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.0.0
     dependencies:
       '@ai-sdk/provider': 1.1.0
-      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.2)
-      zod: 3.24.2
+      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.4)
+      zod: 3.24.4
     dev: false
 
-  /@ai-sdk/openai@1.3.6(zod@3.24.2):
+  /@ai-sdk/openai@1.3.6(zod@3.24.4):
     resolution: {integrity: sha512-Lyp6W6dg+ERMJru3DI8/pWAjXLB0GbMMlXh4jxA3mVny8CJHlCAjlEJRuAdLg1/CFz4J1UDN2/4qBnIWtLFIqw==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.0.0
     dependencies:
       '@ai-sdk/provider': 1.1.0
-      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.2)
-      zod: 3.24.2
+      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.4)
+      zod: 3.24.4
     dev: false
 
-  /@ai-sdk/provider-utils@2.2.3(zod@3.24.2):
+  /@ai-sdk/provider-utils@2.2.3(zod@3.24.4):
     resolution: {integrity: sha512-o3fWTzkxzI5Af7U7y794MZkYNEsxbjLam2nxyoUZSScqkacb7vZ3EYHLh21+xCcSSzEC161C7pZAGHtC0hTUMw==}
     engines: {node: '>=18'}
     peerDependencies:
@@ -88,7 +88,7 @@ packages:
       '@ai-sdk/provider': 1.1.0
       nanoid: 3.3.11
       secure-json-parse: 2.7.0
-      zod: 3.24.2
+      zod: 3.24.4
     dev: false
 
   /@ai-sdk/provider@1.1.0:
@@ -98,7 +98,7 @@ packages:
       json-schema: 0.4.0
     dev: false
 
-  /@ai-sdk/react@1.2.5(react@19.1.0)(zod@3.24.2):
+  /@ai-sdk/react@1.2.5(react@19.1.0)(zod@3.24.4):
     resolution: {integrity: sha512-0jOop3S2WkDOdO4X5I+5fTGqZlNX8/h1T1eYokpkR9xh8Vmrxqw8SsovqGvrddTsZykH8uXRsvI+G4FTyy894A==}
     engines: {node: '>=18'}
     peerDependencies:
@@ -108,24 +108,24 @@ packages:
       zod:
         optional: true
     dependencies:
-      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.2)
-      '@ai-sdk/ui-utils': 1.2.4(zod@3.24.2)
+      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.4)
+      '@ai-sdk/ui-utils': 1.2.4(zod@3.24.4)
       react: 19.1.0
       swr: 2.3.3(react@19.1.0)
       throttleit: 2.1.0
-      zod: 3.24.2
+      zod: 3.24.4
     dev: false
 
-  /@ai-sdk/ui-utils@1.2.4(zod@3.24.2):
+  /@ai-sdk/ui-utils@1.2.4(zod@3.24.4):
     resolution: {integrity: sha512-wLTxEZrKZRyBmlVZv8nGXgLBg5tASlqXwbuhoDu0MhZa467ZFREEnosH/OC/novyEHTQXko2zC606xoVbMrUcA==}
     engines: {node: '>=18'}
     peerDependencies:
       zod: ^3.23.8
     dependencies:
       '@ai-sdk/provider': 1.1.0
-      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.2)
-      zod: 3.24.2
-      zod-to-json-schema: 3.24.5(zod@3.24.2)
+      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.4)
+      zod: 3.24.4
+      zod-to-json-schema: 3.24.5(zod@3.24.4)
     dev: false
 
   /@babel/code-frame@7.26.2:
@@ -459,7 +459,7 @@ packages:
     hasBin: true
     dev: false
 
-  /ai@4.2.10(react@19.1.0)(zod@3.24.2):
+  /ai@4.2.10(react@19.1.0)(zod@3.24.4):
     resolution: {integrity: sha512-rOfKbNRWlzwxbFll6W9oAdnC0R5VVbAJoof+p92CatHzA3reqQZmYn33IBnj+CgqeXYUsH9KX9Wnj7g2wCHc9Q==}
     engines: {node: '>=18'}
     peerDependencies:
@@ -470,13 +470,13 @@ packages:
         optional: true
     dependencies:
       '@ai-sdk/provider': 1.1.0
-      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.2)
-      '@ai-sdk/react': 1.2.5(react@19.1.0)(zod@3.24.2)
-      '@ai-sdk/ui-utils': 1.2.4(zod@3.24.2)
+      '@ai-sdk/provider-utils': 2.2.3(zod@3.24.4)
+      '@ai-sdk/react': 1.2.5(react@19.1.0)(zod@3.24.4)
+      '@ai-sdk/ui-utils': 1.2.4(zod@3.24.4)
       '@opentelemetry/api': 1.9.0
       jsondiffpatch: 0.6.0
       react: 19.1.0
-      zod: 3.24.2
+      zod: 3.24.4
     dev: false
 
   /ansi-escapes@7.0.0:
@@ -950,16 +950,16 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
-  /langnostic@0.0.5(react@19.1.0)(typescript@5.8.2):
-    resolution: {integrity: sha512-i+rC3sAV042yacwq8igzmJ2yAz3AAy1QWL61v8TE5v9pNxKNewpYUAxv1I8tHf8T48UaOBdmxo57Yqx39Uv9zA==}
+  /langnostic@0.0.8(react@19.1.0)(typescript@5.8.2):
+    resolution: {integrity: sha512-9NoH9izsMWP6ok4CxFSJcgFm8rIi5vA6f3CZgH6v/L1iHz0oFNYfkQ8SOJpYUq6cyg7dGXieD2/alHIKh0k3Fg==}
     engines: {node: 18.18.2, pnpm: 8.15.8}
     hasBin: true
     dependencies:
-      '@ai-sdk/deepseek': 0.2.4(zod@3.24.2)
-      '@ai-sdk/google': 1.2.5(zod@3.24.2)
-      '@ai-sdk/openai': 1.3.6(zod@3.24.2)
+      '@ai-sdk/deepseek': 0.2.4(zod@3.24.4)
+      '@ai-sdk/google': 1.2.5(zod@3.24.4)
+      '@ai-sdk/openai': 1.3.6(zod@3.24.4)
       '@clack/prompts': 0.9.1
-      ai: 4.2.10(react@19.1.0)(zod@3.24.2)
+      ai: 4.2.10(react@19.1.0)(zod@3.24.4)
       chalk: 5.4.1
       cosmiconfig: 9.0.0(typescript@5.8.2)
       dotenv: 16.4.7
@@ -974,7 +974,7 @@ packages:
       remark-stringify: 11.0.0
       unified: 11.0.5
       yargs: 17.7.2
-      zod: 3.24.2
+      zod: 3.24.4
     transitivePeerDependencies:
       - react
       - supports-color
@@ -1772,16 +1772,16 @@ packages:
       yargs-parser: 21.1.1
     dev: false
 
-  /zod-to-json-schema@3.24.5(zod@3.24.2):
+  /zod-to-json-schema@3.24.5(zod@3.24.4):
     resolution: {integrity: sha512-/AuWwMP+YqiPbsJx5D6TfgRTc4kTLjsh5SOcd4bLsfUg2RcEXrFMJl1DGgdHy2aCfsIA/cr/1JM0xcB2GZji8g==}
     peerDependencies:
       zod: ^3.24.1
     dependencies:
-      zod: 3.24.2
+      zod: 3.24.4
     dev: false
 
-  /zod@3.24.2:
-    resolution: {integrity: sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==}
+  /zod@3.24.4:
+    resolution: {integrity: sha512-OdqJE9UDRPwWsrHjLN2F8bPxvwJBK22EHLWtanu0LSYr5YqzsaaW3RMgmjwr8Rypg5k+meEJdSPXJZXE/yqOMg==}
     dev: false
 
   /zwitch@2.0.4:

From f459939eaffd29dc4770f423164526fb4c4f0be1 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sat, 5 Jul 2025 09:59:21 +0800
Subject: [PATCH 20/26] Add www. to greatfrontend.com URLs

---
 scripts/gen.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/gen.ts b/scripts/gen.ts
index 106fac1..6e21c2c 100644
--- a/scripts/gen.ts
+++ b/scripts/gen.ts
@@ -66,7 +66,7 @@ async function processQuestion(
     titleSlug: slug(title),
     content: tlDrPart
       // Replace relative links with absolute links.
-      .replace('](/', '](https://greatfrontend.com/')
+      .replace('](/', '](https://www.greatfrontend.com/')
       .trim(),
   };
 }
@@ -143,7 +143,7 @@ ${qn.content
     ${
       onGFE
         ? `
-> Read the [detailed answer](${qn.href}) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](${qn.href}) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 `
         : ''
     }

From be199fa50da1723c52c32ac7765aa80a45342a95 Mon Sep 17 00:00:00 2001
From: GitHub Actions <github-actions[bot]@users.noreply.github.com>
Date: Sat, 5 Jul 2025 01:59:34 +0000
Subject: [PATCH 21/26] [auto] regenerate table of contents

---
 README.md | 108 +++++++++++++++++++++++++++---------------------------
 1 file changed, 54 insertions(+), 54 deletions(-)

diff --git a/README.md b/README.md
index e13ac99..a237bcf 100644
--- a/README.md
+++ b/README.md
@@ -318,7 +318,7 @@ The following behavior summarizes the result of accessing the variables before t
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-hoisting?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-hoisting?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-hoisting/en-US.mdx)
 
@@ -342,7 +342,7 @@ In JavaScript, `let`, `var`, and `const` are all keywords used to declare variab
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/en-US.mdx)
 
@@ -364,7 +364,7 @@ In JavaScript, `let`, `var`, and `const` are all keywords used to declare variab
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-the-difference-between-double-equal-and-triple-equal?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-the-difference-between-double-equal-and-triple-equal?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-difference-between-double-equal-and-triple-equal/en-US.mdx)
 
@@ -398,7 +398,7 @@ We recommend watching [Lydia's video](https://www.youtube.com/watch?v=eiC58R16hb
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx)
 
@@ -425,7 +425,7 @@ However, do note that:
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-event-delegation?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-event-delegation?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-event-delegation/en-US.mdx)
 
@@ -453,7 +453,7 @@ For an in-depth explanation, do check out [Arnav Aggrawal's article on Medium](h
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-how-this-works-in-javascript?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-how-this-works-in-javascript?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-how-this-works-in-javascript/en-US.mdx)
 
@@ -485,7 +485,7 @@ Here's a table summarizing the 3 client storage mechanisms.
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx)
 
@@ -513,7 +513,7 @@ Here's a table summarizing the 3 ways of loading `<script>`s in a HTML document.
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/describe-the-difference-between-script-async-and-script-defer?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/describe-the-difference-between-script-async-and-script-defer?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/describe-the-difference-between-script-async-and-script-defer/en-US.mdx)
 
@@ -533,7 +533,7 @@ Here's a table summarizing the 3 ways of loading `<script>`s in a HTML document.
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/en-US.mdx)
 
@@ -563,7 +563,7 @@ console.log(add.apply(null, [1, 2])); // 3
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/whats-the-difference-between-call-and-apply?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/whats-the-difference-between-call-and-apply?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/whats-the-difference-between-call-and-apply/en-US.mdx)
 
@@ -585,7 +585,7 @@ The `bind` method is particularly useful in scenarios where you need to ensure t
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-function-prototype-bind?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-function-prototype-bind?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-function-prototype-bind/en-US.mdx)
 
@@ -639,7 +639,7 @@ The main takeaway here is that `this` can be changed for a normal function, but
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/en-US.mdx)
 
@@ -699,7 +699,7 @@ Things to note are:
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-how-prototypal-inheritance-works?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-how-prototypal-inheritance-works?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-how-prototypal-inheritance-works/en-US.mdx)
 
@@ -724,7 +724,7 @@ Things to note are:
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/difference-between-function-person-var-person-person-and-var-person-new-person?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/difference-between-function-person-var-person-person-and-var-person-new-person?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/difference-between-function-person-var-person-person-and-var-person-new-person/en-US.mdx)
 
@@ -773,7 +773,7 @@ console.log(namedFunc); // ReferenceError: namedFunc is not defined
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-differences-on-the-usage-of-foo-between-function-foo-and-var-foo-function/en-US.mdx)
 
@@ -817,7 +817,7 @@ console.log(double); // [2, 4, 6]
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/whats-a-typical-use-case-for-anonymous-functions?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/whats-a-typical-use-case-for-anonymous-functions?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/whats-a-typical-use-case-for-anonymous-functions/en-US.mdx)
 
@@ -839,7 +839,7 @@ Creating objects in JavaScript offers several methods:
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-various-ways-to-create-objects-in-javascript?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-various-ways-to-create-objects-in-javascript?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-various-ways-to-create-objects-in-javascript/en-US.mdx)
 
@@ -882,7 +882,7 @@ Key points to remember:
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-a-closure-and-how-why-would-you-use-one/en-US.mdx)
 
@@ -928,7 +928,7 @@ console.log(transformNamesToUppercase(names)); // ['IRISH', 'DAISY', 'ANNA']
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-the-definition-of-a-higher-order-function?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-the-definition-of-a-higher-order-function?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-definition-of-a-higher-order-function/en-US.mdx)
 
@@ -1014,7 +1014,7 @@ It's much more verbose to use inheritance in ES5 and the ES2015 version is easie
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-es6-class-and-es5-function-constructors?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/en-US.mdx)
 
@@ -1032,7 +1032,7 @@ Event bubbling is essential for event delegation, where a single event handler m
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/describe-event-bubbling?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/describe-event-bubbling?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/describe-event-bubbling/en-US.mdx)
 
@@ -1042,7 +1042,7 @@ Event bubbling is essential for event delegation, where a single event handler m
 
 <!-- Update here: /questions/describe-event-capturing/en-US.mdx -->
 
-Event capturing is a lesser-used counterpart to [event bubbling](https://greatfrontend.com/questions/quiz/describe-event-bubbling) in the DOM event propagation mechanism. It follows the opposite order, where an event triggers first on the ancestor element and then travels down to the target element.
+Event capturing is a lesser-used counterpart to [event bubbling](https://www.greatfrontend.com/questions/quiz/describe-event-bubbling) in the DOM event propagation mechanism. It follows the opposite order, where an event triggers first on the ancestor element and then travels down to the target element.
 
 Event capturing is rarely used as compared to event bubbling, but it can be used in specific scenarios where you need to intercept events at a higher level before they reach the target element. It is disabled by default but can be enabled through an option on `addEventListener()`.
 
@@ -1050,7 +1050,7 @@ Event capturing is rarely used as compared to event bubbling, but it can be used
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/describe-event-capturing?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/describe-event-capturing?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/describe-event-capturing/en-US.mdx)
 
@@ -1075,7 +1075,7 @@ The main difference lies in the bubbling behavior of `mouseenter` and `mouseover
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-the-difference-between-mouseenter-and-mouseover-event?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-the-difference-between-mouseenter-and-mouseover-event?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-difference-between-mouseenter-and-mouseover-event/en-US.mdx)
 
@@ -1109,7 +1109,7 @@ Overall, the benefits outweigh the disadvantages and there is not really a need
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/en-US.mdx)
 
@@ -1154,7 +1154,7 @@ console.log('Call made to fetch data'); // This will print before the data is fe
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-the-difference-between-synchronous-and-asynchronous-functions?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-difference-between-synchronous-and-asynchronous-functions/en-US.mdx)
 
@@ -1170,7 +1170,7 @@ Promises offer a cleaner alternative to callbacks, helping to avoid callback hel
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/en-US.mdx)
 
@@ -1217,7 +1217,7 @@ fetch('https://jsonplaceholder.typicode.com/todos/1')
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-ajax-in-as-much-detail-as-possible?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-ajax-in-as-much-detail-as-possible?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-ajax-in-as-much-detail-as-possible/en-US.mdx)
 
@@ -1246,7 +1246,7 @@ AJAX (Asynchronous JavaScript and XML) is a technique in JavaScript that allows
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/en-US.mdx)
 
@@ -1272,7 +1272,7 @@ These days `fetch()` is preferred for its cleaner syntax and modern features.
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-xmlhttprequest-and-fetch?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-xmlhttprequest-and-fetch?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-differences-between-xmlhttprequest-and-fetch/en-US.mdx)
 
@@ -1314,7 +1314,7 @@ Aborting web requests is useful for:
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/how-do-you-abort-a-web-request-using-abortcontrollers?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/how-do-you-abort-a-web-request-using-abortcontrollers?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-do-you-abort-a-web-request-using-abortcontrollers/en-US.mdx)
 
@@ -1353,7 +1353,7 @@ Libraries and services for polyfills:
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-javascript-polyfills-for?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-javascript-polyfills-for?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-javascript-polyfills-for/en-US.mdx)
 
@@ -1371,7 +1371,7 @@ The only time you may want to extend a native object is when you want to create
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/why-is-extending-built-in-javascript-objects-not-a-good-idea?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/en-US.mdx)
 
@@ -1401,7 +1401,7 @@ Follow these best practices to avoid global scope pollution:
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/en-US.mdx)
 
@@ -1453,7 +1453,7 @@ console.log(value); // 42
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-the-differences-between-commonjs-modules-and-es-modules?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-the-differences-between-commonjs-modules-and-es-modules?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.mdx)
 
@@ -1472,7 +1472,7 @@ In JavaScript, data types can be categorized into `primitive` and `non-primitive
 - **Boolean**: Represents `true` or `false` values.
 - **Undefined**: A variable that has been declared but not assigned a value.
 - **Null**: Represents the intentional absence of any object value.
-- **Symbol**: A unique and immutable value used as object property keys. Read more in our [deep dive on `Symbol`s](https://greatfrontend.com/questions/quiz/what-are-symbols-used-for)
+- **Symbol**: A unique and immutable value used as object property keys. Read more in our [deep dive on `Symbol`s](https://www.greatfrontend.com/questions/quiz/what-are-symbols-used-for)
 - **BigInt**: Represents integers with arbitrary precision.
 
 **Non-primitive (Reference) data types**
@@ -1491,7 +1491,7 @@ The primitive types store a single value, while non-primitive types can store co
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-various-data-types-in-javascript?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-various-data-types-in-javascript?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-various-data-types-in-javascript/en-US.mdx)
 
@@ -1580,7 +1580,7 @@ There are also other inbuilt methods available which are suitable for specific s
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/en-US.mdx)
 
@@ -1614,7 +1614,7 @@ console.log(sum(1, 2, 3)); // Output: 6
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx)
 
@@ -1685,7 +1685,7 @@ Generators are powerful for creating iterators on-demand, especially for infinit
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-iterators-and-generators-and-what-are-they-used-for?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-iterators-and-generators-and-what-are-they-used-for?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-iterators-and-generators-and-what-are-they-used-for/en-US.mdx)
 
@@ -1731,7 +1731,7 @@ The key difference between mutable and immutable objects is modifiability. Immut
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-the-difference-between-mutable-and-immutable-objects?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/explain-the-difference-between-mutable-and-immutable-objects?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/explain-the-difference-between-mutable-and-immutable-objects/en-US.mdx)
 
@@ -1757,7 +1757,7 @@ Both `Map` objects and plain objects in JavaScript can store key-value pairs, bu
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-is-the-difference-between-a-map-object-and-a-plain-object-in-javascript/en-US.mdx)
 
@@ -1804,7 +1804,7 @@ On the other hand, `WeakSet` only allows objects as elements, and these object e
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-map-set-and-weakmap-weakset?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-map-set-and-weakmap-weakset?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-the-differences-between-map-set-and-weakmap-weakset/en-US.mdx)
 
@@ -1837,7 +1837,7 @@ Static members are useful under the following scenarios:
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/why-you-might-want-to-create-static-class-members?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/why-you-might-want-to-create-static-class-members?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/why-you-might-want-to-create-static-class-members/en-US.mdx)
 
@@ -1869,7 +1869,7 @@ console.log(obj[sym]); // "value"
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-symbols-used-for?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-symbols-used-for?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-symbols-used-for/en-US.mdx)
 
@@ -1946,7 +1946,7 @@ In this example, the server sends a "Hello from server" message initially, and t
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-server-sent-events?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-server-sent-events?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-server-sent-events/en-US.mdx)
 
@@ -1981,7 +1981,7 @@ The use cases of property descriptors are as follows:
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-javascript-object-property-flags-and-descriptors?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-javascript-object-property-flags-and-descriptors?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-javascript-object-property-flags-and-descriptors/en-US.mdx)
 
@@ -2030,7 +2030,7 @@ console.log(person.name); // Output: 'Jane Smith'
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-javascript-object-getters-and-setters-for?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-javascript-object-getters-and-setters-for?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-javascript-object-getters-and-setters-for/en-US.mdx)
 
@@ -2083,7 +2083,7 @@ Use cases include:
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-proxies-in-javascript-used-for?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-proxies-in-javascript-used-for?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-proxies-in-javascript-used-for/en-US.mdx)
 
@@ -2117,7 +2117,7 @@ Some of the most commonly used tools and techniques for debugging JavaScript:
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-tools-and-techniques-do-you-use-for-debugging-javascript-code?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/en-US.mdx)
 
@@ -2153,7 +2153,7 @@ There are three main types of workers in JavaScript:
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-workers-in-javascript-used-for?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/what-are-workers-in-javascript-used-for?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/what-are-workers-in-javascript-used-for/en-US.mdx)
 
@@ -2184,7 +2184,7 @@ Different JavaScript engines (differs according to browsers) implement different
 
 <br>
     
-> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/how-does-javascript-garbage-collection-work?language=js&tab=quiz) on [GreatFrontEnd](https://greatfrontend.com/) which allows progress tracking, contains more code samples, and useful resources.
+> Read the [detailed answer](https://www.greatfrontend.com/questions/quiz/how-does-javascript-garbage-collection-work?language=js&tab=quiz) on [GreatFrontEnd](https://www.greatfrontend.com?gnrs=github) which allows progress tracking, contains more code samples, and useful resources.
 
 [Back to top ↑](#table-of-contents-top-questions) &nbsp;&nbsp;/&nbsp;&nbsp; [✏️ Edit answer](https://github.com/yangshun/top-javascript-interview-questions/edit/main/questions/how-does-javascript-garbage-collection-work/en-US.mdx)
 
@@ -2210,7 +2210,7 @@ In JavaScript, data types can be categorized into `primitive` and `non-primitive
 - **Boolean**: Represents `true` or `false` values.
 - **Undefined**: A variable that has been declared but not assigned a value.
 - **Null**: Represents the intentional absence of any object value.
-- **Symbol**: A unique and immutable value used as object property keys. Read more in our [deep dive on `Symbol`s](https://greatfrontend.com/questions/quiz/what-are-symbols-used-for)
+- **Symbol**: A unique and immutable value used as object property keys. Read more in our [deep dive on `Symbol`s](https://www.greatfrontend.com/questions/quiz/what-are-symbols-used-for)
 - **BigInt**: Represents integers with arbitrary precision.
 
 **Non-primitive (Reference) data types**
@@ -4840,7 +4840,7 @@ Event bubbling is essential for event delegation, where a single event handler m
 
 <!-- Update here: /questions/describe-event-capturing/en-US.mdx -->
 
-Event capturing is a lesser-used counterpart to [event bubbling](https://greatfrontend.com/questions/quiz/describe-event-bubbling) in the DOM event propagation mechanism. It follows the opposite order, where an event triggers first on the ancestor element and then travels down to the target element.
+Event capturing is a lesser-used counterpart to [event bubbling](https://www.greatfrontend.com/questions/quiz/describe-event-bubbling) in the DOM event propagation mechanism. It follows the opposite order, where an event triggers first on the ancestor element and then travels down to the target element.
 
 Event capturing is rarely used as compared to event bubbling, but it can be used in specific scenarios where you need to intercept events at a higher level before they reach the target element. It is disabled by default but can be enabled through an option on `addEventListener()`.
 

From cf7645a976b1f7c97187649c5a2493d87141edd8 Mon Sep 17 00:00:00 2001
From: Cody Coljee-Gray <cody.cg@gmail.com>
Date: Fri, 8 Aug 2025 01:52:06 -0700
Subject: [PATCH 22/26] fix: grammar call stack vs event queue (#32)

---
 .../en-US.mdx                                                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx b/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx
index 20bfdb8..36ff350 100644
--- a/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx
+++ b/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx
@@ -5,7 +5,7 @@ subtitle: What is the difference between call stack and task queue?
 
 ## TL;DR
 
-The event loop is concept within the JavaScript runtime environment regarding how asynchronous operations are executed within JavaScript engines. It works as such:
+The event loop is a concept within the JavaScript runtime environment regarding how asynchronous operations are executed within JavaScript engines. It works as such:
 
 1. The JavaScript engine starts executing scripts, placing synchronous operations on the call stack.
 2. When an asynchronous operation is encountered (e.g., `setTimeout()`, HTTP request), it is offloaded to the respective Web API or Node.js API to handle the operation in the background.
@@ -19,7 +19,7 @@ The event loop is concept within the JavaScript runtime environment regarding ho
 
 The unfortunate truth is that it is extremely hard to explain the event loop well using only text. We recommend checking out one of the following excellent videos explaining the event loop:
 
-- [JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue](https://www.youtube.com/watch?v=eiC58R16hb8) (2024): Lydia Hallie is a popular educator on JavaScript and this is the best recent videos explaining the event loop. There's also an [accompanying blog post](https://www.lydiahallie.com/blog/event-loop) for those who prefer detailed text-based explanations.
+- [JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue](https://www.youtube.com/watch?v=eiC58R16hb8) (2024): Lydia Hallie is a popular educator on JavaScript and this is the best recent video explaining the event loop. There's also an [accompanying blog post](https://www.lydiahallie.com/blog/event-loop) for those who prefer detailed text-based explanations.
 - [In the Loop](https://www.youtube.com/watch?v=cCOL7MC4Pl0) (2018): Jake Archibald previously from the Chrome team provides a visual demonstration of the event loop during JSConf 2018, accounting for different types of tasks.
 - [What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ) (2014): Philip Robert's gave this epic talk at JSConf 2014 and it is one of the most viewed JavaScript videos on YouTube.
 

From 4739ce95c0f29d1138fd76b8f708978a227771c7 Mon Sep 17 00:00:00 2001
From: GitHub Actions <github-actions[bot]@users.noreply.github.com>
Date: Fri, 8 Aug 2025 08:52:18 +0000
Subject: [PATCH 23/26] [auto] regenerate table of contents

---
 README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index a237bcf..d1379ba 100644
--- a/README.md
+++ b/README.md
@@ -374,7 +374,7 @@ In JavaScript, `let`, `var`, and `const` are all keywords used to declare variab
 
 <!-- Update here: /questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx -->
 
-The event loop is concept within the JavaScript runtime environment regarding how asynchronous operations are executed within JavaScript engines. It works as such:
+The event loop is a concept within the JavaScript runtime environment regarding how asynchronous operations are executed within JavaScript engines. It works as such:
 
 1. The JavaScript engine starts executing scripts, placing synchronous operations on the call stack.
 2. When an asynchronous operation is encountered (e.g., `setTimeout()`, HTTP request), it is offloaded to the respective Web API or Node.js API to handle the operation in the background.
@@ -388,7 +388,7 @@ The event loop is concept within the JavaScript runtime environment regarding ho
 
 The unfortunate truth is that it is extremely hard to explain the event loop well using only text. We recommend checking out one of the following excellent videos explaining the event loop:
 
-- [JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue](https://www.youtube.com/watch?v=eiC58R16hb8) (2024): Lydia Hallie is a popular educator on JavaScript and this is the best recent videos explaining the event loop. There's also an [accompanying blog post](https://www.lydiahallie.com/blog/event-loop) for those who prefer detailed text-based explanations.
+- [JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue](https://www.youtube.com/watch?v=eiC58R16hb8) (2024): Lydia Hallie is a popular educator on JavaScript and this is the best recent video explaining the event loop. There's also an [accompanying blog post](https://www.lydiahallie.com/blog/event-loop) for those who prefer detailed text-based explanations.
 - [In the Loop](https://www.youtube.com/watch?v=cCOL7MC4Pl0) (2018): Jake Archibald previously from the Chrome team provides a visual demonstration of the event loop during JSConf 2018, accounting for different types of tasks.
 - [What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ) (2014): Philip Robert's gave this epic talk at JSConf 2014 and it is one of the most viewed JavaScript videos on YouTube.
 
@@ -3748,7 +3748,7 @@ console.log(isEmpty(obj)); // true
 
 <!-- Update here: /questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.mdx -->
 
-The event loop is concept within the JavaScript runtime environment regarding how asynchronous operations are executed within JavaScript engines. It works as such:
+The event loop is a concept within the JavaScript runtime environment regarding how asynchronous operations are executed within JavaScript engines. It works as such:
 
 1. The JavaScript engine starts executing scripts, placing synchronous operations on the call stack.
 2. When an asynchronous operation is encountered (e.g., `setTimeout()`, HTTP request), it is offloaded to the respective Web API or Node.js API to handle the operation in the background.
@@ -3762,7 +3762,7 @@ The event loop is concept within the JavaScript runtime environment regarding ho
 
 The unfortunate truth is that it is extremely hard to explain the event loop well using only text. We recommend checking out one of the following excellent videos explaining the event loop:
 
-- [JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue](https://www.youtube.com/watch?v=eiC58R16hb8) (2024): Lydia Hallie is a popular educator on JavaScript and this is the best recent videos explaining the event loop. There's also an [accompanying blog post](https://www.lydiahallie.com/blog/event-loop) for those who prefer detailed text-based explanations.
+- [JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue](https://www.youtube.com/watch?v=eiC58R16hb8) (2024): Lydia Hallie is a popular educator on JavaScript and this is the best recent video explaining the event loop. There's also an [accompanying blog post](https://www.lydiahallie.com/blog/event-loop) for those who prefer detailed text-based explanations.
 - [In the Loop](https://www.youtube.com/watch?v=cCOL7MC4Pl0) (2018): Jake Archibald previously from the Chrome team provides a visual demonstration of the event loop during JSConf 2018, accounting for different types of tasks.
 - [What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ) (2014): Philip Robert's gave this epic talk at JSConf 2014 and it is one of the most viewed JavaScript videos on YouTube.
 

From 49becd167da6c0dec9b24bd74cb50c3b6b1513ec Mon Sep 17 00:00:00 2001
From: Cody Coljee-Gray <cody.cg@gmail.com>
Date: Fri, 8 Aug 2025 01:52:39 -0700
Subject: [PATCH 24/26] fix: improve describe-event-bubbling (#33)

---
 questions/describe-event-bubbling/en-US.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/questions/describe-event-bubbling/en-US.mdx b/questions/describe-event-bubbling/en-US.mdx
index 3ca9bb1..0bb9e2c 100644
--- a/questions/describe-event-bubbling/en-US.mdx
+++ b/questions/describe-event-bubbling/en-US.mdx
@@ -151,7 +151,7 @@ productList.addEventListener('click', handleBuyClick);
 function handleBuyClick(event) {
   // Check if the clicked element is a button within the list
   if (event.target.tagName.toLowerCase() === 'button') {
-    console.log('Buy button clicked for item:', event.target.textContent);
+    console.log('Buy button clicked for item:', event.target.id);
   }
 }
 ```

From 1504f1bedb6359ee2e4b7784fa67ae55ede5a397 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Fri, 8 Aug 2025 16:54:25 +0800
Subject: [PATCH 25/26] fix: remove outdated link in differences between esm
 and cjs

Fixes #34
---
 .../en-US.mdx                                                    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.mdx b/questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.mdx
index b004ada..17cbfe8 100644
--- a/questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.mdx
+++ b/questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.mdx
@@ -94,7 +94,6 @@ While CommonJS was the default module system in Node.js initially, ES modules ar
 ## Further reading
 
 - [JavaScript modules - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
-- [CommonJS vs ES Modules: the shift from require to import](https://nikolasbarwicki.com/articles/commonjs-vs-es-modules-the-shift-from-require-to-import/)
 - [Modules, introduction - javascript.info](https://javascript.info/modules-intro)
 - [Modules - Eloquent Javascript](https://eloquentjavascript.net/10_modules.html)
 - [CommonJS vs. ES modules in Node.js](https://blog.logrocket.com/commonjs-vs-es-modules-node-js/)

From 40e51eca288c29cbff54bc62c27b0ef790d9eef7 Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Fri, 8 Aug 2025 17:08:37 +0800
Subject: [PATCH 26/26] i18n

---
 .../describe-event-bubbling/en-US.langnostic.json     |  4 ++--
 questions/describe-event-bubbling/zh-CN.mdx           |  8 ++++----
 .../en-US.langnostic.json                             |  4 ++--
 .../zh-CN.mdx                                         | 11 +++++------
 .../en-US.langnostic.json                             |  8 ++++----
 .../zh-CN.mdx                                         |  4 ++--
 6 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/questions/describe-event-bubbling/en-US.langnostic.json b/questions/describe-event-bubbling/en-US.langnostic.json
index ba1eea0..9be0694 100644
--- a/questions/describe-event-bubbling/en-US.langnostic.json
+++ b/questions/describe-event-bubbling/en-US.langnostic.json
@@ -34,7 +34,7 @@
         "a8ff50ea",
         "3625d327",
         "ac7b2126",
-        "92f262c4",
+        "853c279d",
         "b37f85fb",
         "3c0717ad",
         "26112098",
@@ -78,7 +78,7 @@
         "a8ff50ea",
         "3625d327",
         "ac7b2126",
-        "92f262c4",
+        "853c279d",
         "b37f85fb",
         "3c0717ad",
         "26112098",
diff --git a/questions/describe-event-bubbling/zh-CN.mdx b/questions/describe-event-bubbling/zh-CN.mdx
index cb10caa..4064d42 100644
--- a/questions/describe-event-bubbling/zh-CN.mdx
+++ b/questions/describe-event-bubbling/zh-CN.mdx
@@ -140,8 +140,8 @@ function handleBuyClick(event) {
 ```js
 // HTML:
 // <ul id="product-list">
-//   <li><button id="item1-buy">立即购买</button></li>
-//   <li><button id="item2-buy">立即购买</button></li>
+//   <li><button id="item1-buy">Buy Now</button></li>
+//   <li><button id="item2-buy">Buy Now</button></li>
 // </ul>
 
 const productList = document.getElementById('product-list');
@@ -149,9 +149,9 @@ const productList = document.getElementById('product-list');
 productList.addEventListener('click', handleBuyClick);
 
 function handleBuyClick(event) {
-  // 检查点击的元素是否是列表中的一个按钮
+  // Check if the clicked element is a button within the list
   if (event.target.tagName.toLowerCase() === 'button') {
-    console.log('点击了项目的购买按钮：', event.target.textContent);
+    console.log('Buy button clicked for item:', event.target.id);
   }
 }
 ```
diff --git a/questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.langnostic.json b/questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.langnostic.json
index 7e7847f..58cb862 100644
--- a/questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.langnostic.json
+++ b/questions/explain-the-differences-between-commonjs-modules-and-es-modules/en-US.langnostic.json
@@ -28,7 +28,7 @@
         "67a1d4f3",
         "ae22a9f0",
         "1f4770e5",
-        "66926432"
+        "2f1b469c"
       ]
     },
     "targets": {
@@ -55,7 +55,7 @@
         "67a1d4f3",
         "ae22a9f0",
         "1f4770e5",
-        "66926432"
+        "2f1b469c"
       ]
     }
   }
diff --git a/questions/explain-the-differences-between-commonjs-modules-and-es-modules/zh-CN.mdx b/questions/explain-the-differences-between-commonjs-modules-and-es-modules/zh-CN.mdx
index e75f3b0..e65c435 100644
--- a/questions/explain-the-differences-between-commonjs-modules-and-es-modules/zh-CN.mdx
+++ b/questions/explain-the-differences-between-commonjs-modules-and-es-modules/zh-CN.mdx
@@ -93,9 +93,8 @@ console.log(value); // 42
 
 ## 延伸阅读
 
-* [JavaScript 模块 - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
-* [CommonJS vs ES Modules: 从 require 到 import 的转变](https://nikolasbarwicki.com/articles/commonjs-vs-es-modules-the-shift-from-require-to-import/)
-* [模块，简介 - javascript.info](https://javascript.info/modules-intro)
-* [模块 - Eloquent Javascript](https://eloquentjavascript.net/10_modules.html)
-* [Node.js 中的 CommonJS vs. ES 模块](https://blog.logrocket.com/commonjs-vs-es-modules-node-js/)
-* [理解 JavaScript 中的 CommonJS vs. ES 模块](https://www.syncfusion.com/blogs/post/js-commonjs-vs-es-modules)
+* [JavaScript modules - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
+* [Modules, introduction - javascript.info](https://javascript.info/modules-intro)
+* [Modules - Eloquent Javascript](https://eloquentjavascript.net/10_modules.html)
+* [CommonJS vs. ES modules in Node.js](https://blog.logrocket.com/commonjs-vs-es-modules-node-js/)
+* [Understanding CommonJS vs. ES Modules in JavaScript](https://www.syncfusion.com/blogs/post/js-commonjs-vs-es-modules)
diff --git a/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.langnostic.json b/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.langnostic.json
index 01fdcd0..d683674 100644
--- a/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.langnostic.json
+++ b/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/en-US.langnostic.json
@@ -8,10 +8,10 @@
       "locale": "en-US",
       "hashes": [
         "77da26a5",
-        "db24c9d8",
+        "4c4ebaf7",
         "def8dd56",
         "2b3223fd",
-        "9f33f88c",
+        "5060e7da",
         "910dc689",
         "2a7816d0",
         "ffd9a88",
@@ -40,10 +40,10 @@
     "targets": {
       "zh-CN": [
         "77da26a5",
-        "db24c9d8",
+        "4c4ebaf7",
         "def8dd56",
         "2b3223fd",
-        "9f33f88c",
+        "5060e7da",
         "910dc689",
         "2a7816d0",
         "ffd9a88",
diff --git a/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/zh-CN.mdx b/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/zh-CN.mdx
index 50aff6d..b82cd43 100644
--- a/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/zh-CN.mdx
+++ b/questions/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue/zh-CN.mdx
@@ -5,7 +5,7 @@ subtitle: call stack 和 task queue 之间有什么区别？
 
 ## TL;DR
 
-事件循环是 JavaScript 运行时环境内关于异步操作如何在 JavaScript 引擎中执行的概念。它的工作原理如下：
+事件循环是JavaScript运行时环境中的一个概念，涉及异步操作如何在JavaScript引擎中执行。它的工作原理如下：
 
 1. JavaScript 引擎开始执行脚本，将同步操作放在调用堆栈上。
 2. 当遇到异步操作（例如，`setTimeout()`、HTTP 请求）时，它会被卸载到相应的 Web API 或 Node.js API，以在后台处理该操作。
@@ -19,7 +19,7 @@ subtitle: call stack 和 task queue 之间有什么区别？
 
 不幸的是，仅使用文本很难很好地解释事件循环。我们建议查看以下优秀的视频之一，解释事件循环：
 
-* [JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue](https://www.youtube.com/watch?v=eiC58R16hb8) (2024): Lydia Hallie 是 JavaScript 方面的热门教育家，这是解释事件循环的最新最佳视频。对于那些喜欢详细的基于文本的解释的人，还有一个[配套博客文章](https://www.lydiahallie.com/blog/event-loop)。
+* [JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue](https://www.youtube.com/watch?v=eiC58R16hb8) (2024): Lydia Hallie 是一个受欢迎的 JavaScript 教育者，这是最近解释事件循环的最佳视频。对于那些喜欢详细的基于文本的解释的人，还有一个[随附的博客文章](https://www.lydiahallie.com/blog/event-loop)。
 * [In the Loop](https://www.youtube.com/watch?v=cCOL7MC4Pl0) (2018): 来自 Chrome 团队的 Jake Archibald 在 JSConf 2018 期间提供了事件循环的视觉演示，解释了不同类型的任务。
 * [What the heck is the event loop anyway?](https://www.youtube.com/watch?v=8aGhZQkoFbQ) (2014): Philip Robert 在 JSConf 2014 上发表了这次史诗般的演讲，这是 YouTube 上观看次数最多的 JavaScript 视频之一。
 
