feat: update technical accuracies

Author: yangshun

README.md

@@ -9,6 +9,7 @@
   ],
   "license": "ISC",
   "author": "yangshun",
+  "type": "module",
   "main": "index.js",
   "scripts": {
     "gen": "tsx scripts/gen.ts",

package.json

@@ -4,7 +4,7 @@ title: Describe event bubbling in JavaScript and browsers
 
 ## TL;DR
 
-Event bubbling is a DOM event propagation mechanism where an event (e.g. a click), starts at the target element and bubbles up to the root of the document. This allows ancestor elements to also respond to the event.
+Event bubbling is a DOM event propagation mechanism where an event (e.g. a click) starts at the target element and bubbles up to the root of the document. This allows ancestor elements to also respond to the event.
 
 Event bubbling is essential for event delegation, where a single event handler manages events for multiple child elements, enhancing performance and code simplicity. While convenient, failing to manage event propagation properly can lead to unintended behavior, such as multiple handlers firing for a single event.
 
@@ -14,7 +14,7 @@ Event bubbling is essential for event delegation, where a single event handler m
 
 Event bubbling is a propagation mechanism in the DOM (Document Object Model) where an event, such as a click or a keyboard event, is first triggered on the target element that initiated the event and then propagates upward (bubbles) through the DOM tree to the root of the document.
 
-**Note**: even before the event bubbling phase happens is the [event capturing](/questions/quiz/describe-event-capturing) phase which is the opposite of bubbling where the event goes down from the document root to the target element.
+**Note**: before the event bubbling phase, there is the [event capturing](/questions/quiz/describe-event-capturing) phase, which is the opposite of bubbling, where the event travels down from the document root to the target element.
 
 ## Bubbling phase
 
@@ -49,7 +49,7 @@ child.addEventListener('click', () => {
 child.click();
 ```
 
-When you click the "Click me!" button, both the child and parent event handlers will be triggered due to the event bubbling.
+When you click the "Click me!" button, both the child and parent event handlers will be triggered due to event bubbling.
 
 ## Stopping the bubbling
 
@@ -85,7 +85,7 @@ child.click();
 
 ## Event delegation
 
-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.
+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 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) => {
@@ -156,7 +156,7 @@ function handleBuyClick(event) {
 }
 ```
 
-By attaching the listener to the parent (`productList`) and checking the clicked element (`event.target`) within the handler, you achieve the same functionality with less code. This approach scales well when the items are dynamic as no new event handlers have to be added or removed when the list of items change.
+By attaching the listener to the parent (`productList`) and checking the clicked element (`event.target`) within the handler, you achieve the same functionality with less code. This approach scales well when the items are dynamic, as no new event handlers have to be added or removed when the list of items changes.
 
 ### Dropdown menus
 

questions/describe-event-bubbling/en-US.mdx

@@ -20,11 +20,11 @@ Capturing has a higher priority than bubbling, meaning that capturing event hand
 - **Target phase**: The event reaches the target element
 - **Bubbling phase**: The event bubbles up from the target element
 
-Note that event capturing is disabled by default. To enable it you have to pass the capture option into `addEventListener()`.
+Note that event capturing is disabled by default. To enable it, you have to pass the capture option into `addEventListener()`.
 
 ## Capturing phase
 
-During the capturing phase, the event starts at the document root and propagates down to the target element. Any event listeners on ancestor elements in this path will be triggered before the target element's handler. But note that event capturing can't happen until the third argument of `addEventListener()` is set to `true` as shown below (default value is `false`).
+During the capturing phase, the event starts at the document root and propagates down to the target element. Any event listeners on ancestor elements in this path will be triggered before the target element's handler. Note that event capturing will not happen unless the third argument of `addEventListener()` is set to `true` as shown below (the default value is `false`).
 
 Here's an example using modern ES2015 syntax to demonstrate event capturing:
 
@@ -79,15 +79,15 @@ child.addEventListener('click', () => {
 });
 ```
 
-As a result of stopping event propagation, just the `parent` event listener will now be called when you click the "Click Me!" button, and the `child` event listener will never be called because the event propagation has stopped at the `parent` element.
+As a result of stopping event propagation, only the `parent` event listener will be called when you click the "Click me!" button, and the `child` event listener will never be called because event propagation has stopped at the `parent` element.
 
 ## Uses of event capturing
 
 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.
 
 - **Stopping event bubbling:** Imagine you have a nested element (like a button) inside a container element. Clicking the button might also trigger a click event on the container. By enabling event capturing on the container's event listener, you can capture the click event there and prevent it from traveling down to the button, potentially causing unintended behavior.
-- **Custom dropdown menus:**: When building custom dropdown menus, you might want to capture clicks outside the menu element to close the menu. Using `capture: true` on the `document` object allows you to listen for clicks anywhere on the page and close the menu if the click happens outside its boundaries.
-- **Efficiency in certain scenarios:**: In some situations, event capturing can be slightly more efficient than relying on bubbling. This is because the event doesn't need to propagate through all child elements before reaching the handler. However, the performance difference is usually negligible for most web applications.
+- **Custom dropdown menus:** When building custom dropdown menus, you might want to capture clicks outside the menu element to close the menu. Using `capture: true` on the `document` object allows you to listen for clicks anywhere on the page and close the menu if the click happens outside its boundaries.
+- **Efficiency in certain scenarios:** In some situations, event capturing can be slightly more efficient than relying on bubbling. This is because the event doesn't need to propagate through all child elements before reaching the handler. However, the performance difference is usually negligible for most web applications.
 
 ## Further reading
 

questions/describe-event-capturing/en-US.mdx

@@ -38,9 +38,9 @@ These client-side storage mechanisms have the following common properties:
 
 Since cookies have a relatively low maximum size, it is not advisable to store all your client-side data within cookies. The distinguishing properties about cookies are that cookies are sent to the server on every HTTP request so the low maximum size is a feature that prevents your HTTP requests from being too large due to cookies. Automatic expiry of cookies is a useful feature as well.
 
-With that in mind, the best kind of data to store within cookies is small pieces of data that needs to be transmitted to the server, such as auth tokens, session IDs, analytics tracking IDs, GDPR cookie consent, language preferences that are important for authentication, authorization, and rendering on the server. These values are sometimes sensitive and can benefit from the `HttpOnly`, `Secure`, and `Expires`/`Max-Age` capabilities that cookies provide.
+With that in mind, the best kind of data to store within cookies is small pieces of data that need to be transmitted to the server, such as auth tokens, session IDs, analytics tracking IDs, GDPR cookie consent, language preferences that are important for authentication, authorization, and rendering on the server. These values are sometimes sensitive and can benefit from the `HttpOnly`, `Secure`, and `Expires`/`Max-Age` capabilities that cookies provide.
 
-`localStorage` and `sessionStorage` both implement the [Web Storage API interface](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API). Web Storages have a generous total capacity of 5MB, so storage size is usually not a concern. The key difference is that values stored in Web Storage are not automatically sent along HTTP requests.
+`localStorage` and `sessionStorage` both implement the [Web Storage API interface](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API). Web Storage has a generous total capacity of 5MB, so storage size is usually not a concern. The key difference is that values stored in Web Storage are not automatically sent along with HTTP requests.
 
 While you can manually include values from Web Storage when making AJAX/`fetch()` requests, the browser does not include them in the initial request / first load of the page. Hence Web Storage should not be used to store data that is relied on by the server for the initial rendering of the page if server-side rendering is being used (typically authentication/authorization-related information). `localStorage` is most suitable for user preferences data that do not expire, like themes and layouts (if it is not important for the server to render the final layout). `sessionStorage` is most suitable for temporary data that only needs to be accessible within the current browsing session, such as form data (useful to preserve data during accidental reloads).
 
@@ -98,7 +98,7 @@ The CookieStore API is relatively new and may not be supported in all browsers (
 - **Storage capacity**: Typically around 5MB per origin (varies by browser).
 - **Lifespan**: Data in `localStorage` persists until explicitly deleted by the user or the application.
 - **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`.
+- **Security**: All JavaScript on the page has access to values within `localStorage`.
 
 ```js
 // Set a value in localStorage.
@@ -121,7 +121,7 @@ localStorage.clear();
 - **Storage Capacity**: Typically around 5MB per origin (varies by browser).
 - **Lifespan**: Data in `sessionStorage` is cleared when the page session ends (i.e., when the browser or tab is closed). Reloading the page does not destroy data within `sessionStorage`.
 - **Access**: Data is accessible only within the current tab (or browsing context). Different tabs share different `sessionStorage` objects even if they belong to the same browser window. In this context, window refers to a browser window that can contain multiple tabs.
-- **Security**: All JavaScript on the same page have access to values within `sessionStorage` for that page.
+- **Security**: All JavaScript on the same page has access to values within `sessionStorage` for that page.
 
 ```js
 // Set a value in sessionStorage.

questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx

@@ -7,10 +7,10 @@ title: Describe the difference between `<script>`, `<script async>` and `<script
 All of these ways (`<script>`, `<script async>`, and `<script defer>`) are used to load and execute JavaScript files in an HTML document, but they differ in how the browser handles loading and execution of the script:
 
 - `<script>` is the default way of including JavaScript. The browser blocks HTML parsing while the script is being downloaded and executed. The browser will not continue rendering the page until the script has finished executing.
-- `<script async>` downloads the script asynchronously, in parallel with parsing the HTML. Executes the script as soon as it is available, potentially interrupting the HTML parsing. `<script async>` do not wait for each other and execute in no particular order.
+- `<script async>` downloads the script asynchronously, in parallel with parsing the HTML. Executes the script as soon as it is available, potentially interrupting the HTML parsing. Multiple `<script async>` tags do not wait for each other and execute in no particular order.
 - `<script defer>` downloads the script asynchronously, in parallel with parsing the HTML. However, the execution of the script is deferred until HTML parsing is complete, in the order they appear in the HTML.
 
-Here's a table summarizing the 3 ways of loading `<script>`s in a HTML document.
+Here's a table summarizing the 3 ways of loading `<script>`s in an HTML document.
 
 | Feature | `<script>` | `<script async>` | `<script defer>` |
 | --- | --- | --- | --- |
@@ -82,7 +82,7 @@ Use `<script async>` when the script is independent of any other scripts on the
 
 ## `<script defer>`
 
-Similar to `<script async>`, `<script defer>` also downloads the script in parallel to HTML parsing but the script is only executed when the document has been fully parsed and before firing `DOMContentLoaded`. If there are multiple of them, each deferred script is executed in the order they appeared in the HTML document.
+Similar to `<script async>`, `<script defer>` also downloads the script in parallel to HTML parsing, but the script is only executed when the document has been fully parsed and before firing `DOMContentLoaded`. If there are multiple of them, each deferred script is executed in the order they appear in the HTML document.
 
 If a script relies on a fully-parsed DOM, the `defer` attribute will be useful in ensuring that the HTML is fully parsed before executing.
 
@@ -108,7 +108,7 @@ If a script relies on a fully-parsed DOM, the `defer` attribute will be useful i
 
 ## Notes
 
-- The `async` attribute should be used for scripts that are not critical to the initial rendering of the page and do not depend on each other, while the `defer` attribute should be used for scripts that depend on / is depended on by another script.
+- The `async` attribute should be used for scripts that are not critical to the initial rendering of the page and do not depend on each other, while the `defer` attribute should be used for scripts that depend on or are depended on by another script.
 - The `async` and `defer` attributes are ignored for scripts that have no `src` attribute.
 - `<script>`s with `defer` or `async` that contain `document.write()` will be ignored with a message like "A call to `document.write()` from an asynchronously-loaded external script was ignored".
 - Even though `async` and `defer` help to make script downloading asynchronous, the scripts are still eventually executed on the main thread. If these scripts are computationally intensive, it can result in laggy/frozen UI. [Partytown](https://partytown.qwik.dev/) is a library that helps relocate script executions into a [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) and off the [main thread](https://developer.mozilla.org/en-US/docs/Glossary/Main_thread), which is great for third-party scripts where you do not have control over the code.

questions/describe-the-difference-between-script-async-and-script-defer/en-US.mdx

@@ -31,7 +31,7 @@ This code defines a function named `Person` that takes a parameter `name` and as
 
 ## Function call
 
-`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.
+`const person = Person()` simply invokes 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 it this way is a common mistake if the function is intended to be used as a constructor.
 
 ```js live
 function Person(name) {
@@ -47,7 +47,7 @@ In this case, `Person('John')` does not create a new object. The `person` variab
 
 ## Constructor call
 
-`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.
+`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)` to create the object and `Person.call(person, 'John')` to initialize it.
 
 ```js live
 function Person(name) {
@@ -65,7 +65,7 @@ console.log(person1); // Person { name: 'John' }
 console.log(person1.name); // 'John'
 ```
 
-In this case, `new Person('John')` creates a new object, and `this` within `Person` refers to this new object. The `name` property is correctly set on the new object. The `person` variable is assigned the new instance of `Person` with the name property set to `'John'`. And for the alternative object creation, `Object.create(Person.prototype)` creates a new object with `Person.prototype` as its prototype. `Person.call(person, 'John')` initializes the object, setting the `name` property.
+In this case, `new Person('John')` creates a new object, and `this` within `Person` refers to this new object. The `name` property is correctly set on the new object. The `person` variable is assigned the new instance of `Person` with the `name` property set to `'John'`. For the alternative object creation, `Object.create(Person.prototype)` creates a new object with `Person.prototype` as its prototype, and `Person.call(person, 'John')` initializes the object, setting the `name` property.
 
 ## Follow-Up Questions