From badc0e884272bef596f5b05ebc1286b1db90fdbc Mon Sep 17 00:00:00 2001
From: Yangshun <tay.yang.shun@gmail.com>
Date: Wed, 6 Dec 2023 10:14:28 +0800
Subject: [PATCH] misc: prettify files

---
 .prettierrc                                   |   1 -
 .wip/topics/accessibility.md                  |  32 +--
 .wip/topics/browser.md                        |  37 ++--
 .wip/topics/caching.md                        |   3 +-
 .wip/topics/css.md                            |   9 +-
 .wip/topics/design.md                         |   4 +-
 .wip/topics/dom.md                            |   3 +-
 .wip/topics/html.md                           |   5 +-
 .wip/topics/javascript.md                     |   5 +-
 .wip/topics/networking.md                     |   3 +-
 .wip/topics/performance.md                    |   3 +-
 .wip/topics/security.md                       |   6 +-
 .wip/topics/widgets.md                        |   3 +-
 README.md                                     |   1 -
 contents/algorithms.md                        |   3 +-
 .../front-end-system-design-applications.md   |   1 -
 .../front-end-system-design-ui-components.md  |   1 -
 contents/javascript-questions.md              |  22 +-
 contents/javascript-utility-function.md       |   1 -
 .../contents/collaboration/pt-BR.mdx          | 110 +++++-----
 .../contents/collaboration/zh-CN.mdx          | 122 +++++------
 .../contents/growth-mindset/pt-BR.mdx         |  58 ++---
 .../contents/growth-mindset/zh-CN.mdx         |  82 +++----
 .../contents/overview/pt-BR.mdx               | 156 +++++++-------
 .../contents/overview/zh-CN.mdx               | 180 ++++++++--------
 .../contents/problem-solving/pt-BR.mdx        | 196 ++++++++---------
 .../contents/problem-solving/zh-CN.mdx        | 204 +++++++++---------
 .../contents/questions-to-ask/pt-BR.mdx       |  46 ++--
 .../contents/questions-to-ask/zh-CN.mdx       |  46 ++--
 .../contents/questions/pt-BR.mdx              |  18 +-
 .../contents/questions/zh-CN.mdx              |  22 +-
 .../contents/self-introduction/pt-BR.mdx      |  18 +-
 .../contents/self-introduction/zh-CN.mdx      |  48 ++---
 .../contents/why-work-here/pt-BR.mdx          |   6 +-
 .../contents/why-work-here/zh-CN.mdx          |  32 +--
 .../contents/algorithms/pt-BR.mdx             |  80 +++----
 .../contents/algorithms/zh-CN.mdx             | 130 +++++------
 .../contents/coding/pt-BR.mdx                 |  48 ++---
 .../contents/coding/zh-CN.mdx                 |  60 +++---
 .../contents/javascript/pt-BR.mdx             |  92 ++++----
 .../contents/javascript/zh-CN.mdx             | 132 ++++++------
 .../contents/overview/pt-BR.mdx               |  82 +++----
 .../contents/overview/zh-CN.mdx               | 100 ++++-----
 .../contents/quiz/pt-BR.mdx                   |  46 ++--
 .../contents/quiz/zh-CN.mdx                   |  48 ++---
 .../contents/resume/pt-BR.mdx                 |  64 +++---
 .../contents/resume/zh-CN.mdx                 |  78 +++----
 .../contents/system-design/pt-BR.mdx          |   8 +-
 .../contents/system-design/zh-CN.mdx          |  14 +-
 .../pt-BR.mdx                                 | 162 +++++++-------
 .../zh-CN.mdx                                 | 188 ++++++++--------
 .../contents/user-interface/pt-BR.mdx         | 100 ++++-----
 .../contents/user-interface/zh-CN.mdx         | 100 ++++-----
 .../zh-CN.mdx                                 |   6 +-
 .../pt-BR.mdx                                 |  10 +-
 .../zh-CN.mdx                                 |  10 +-
 .../metadata.json                             |   6 +-
 .../pt-BR.mdx                                 |   4 +-
 .../zh-CN.mdx                                 |   4 +-
 .../en-US.mdx                                 |   4 +-
 .../pt-BR.mdx                                 |   4 +-
 .../zh-CN.mdx                                 |   4 +-
 .../metadata.json                             |   6 +-
 .../metadata.json                             |   6 +-
 .../pt-BR.mdx                                 |   8 +-
 .../zh-CN.mdx                                 |   8 +-
 .../zh-CN.mdx                                 |   2 +-
 .../metadata.json                             |   7 +-
 .../zh-CN.mdx                                 |  10 +-
 .../pt-BR.mdx                                 |   8 +-
 .../zh-CN.mdx                                 |  12 +-
 .../pt-BR.mdx                                 |   2 +-
 .../zh-CN.mdx                                 |   4 +-
 .../pt-BR.mdx                                 |  12 +-
 .../zh-CN.mdx                                 |  12 +-
 .../en-US.mdx                                 |   4 +-
 .../pt-BR.mdx                                 |  26 +--
 .../zh-CN.mdx                                 |  28 +--
 .../pt-BR.mdx                                 |  10 +-
 .../zh-CN.mdx                                 |  18 +-
 .../pt-BR.mdx                                 |   8 +-
 .../zh-CN.mdx                                 |   8 +-
 .../zh-CN.mdx                                 |   8 +-
 .../pt-BR.mdx                                 |  12 +-
 .../zh-CN.mdx                                 |  16 +-
 .../pt-BR.mdx                                 |   2 +-
 .../zh-CN.mdx                                 |   4 +-
 .../en-US.mdx                                 |   6 +-
 .../pt-BR.mdx                                 |  12 +-
 .../zh-CN.mdx                                 |  12 +-
 .../zh-CN.mdx                                 |   4 +-
 .../pt-BR.mdx                                 |   6 +-
 .../zh-CN.mdx                                 |   8 +-
 .../explain-function-prototype-bind/en-US.mdx |   2 +-
 .../explain-function-prototype-bind/pt-BR.mdx |   4 +-
 .../explain-function-prototype-bind/zh-CN.mdx |   8 +-
 .../quiz/questions/explain-hoisting/zh-CN.mdx |   2 +-
 .../zh-CN.mdx                                 |   2 +-
 .../en-US.mdx                                 |   2 +-
 .../pt-BR.mdx                                 |   2 +-
 .../zh-CN.mdx                                 |   4 +-
 .../zh-CN.mdx                                 |   4 +-
 .../pt-BR.mdx                                 |  18 +-
 .../zh-CN.mdx                                 |  22 +-
 .../zh-CN.mdx                                 |   2 +-
 .../pt-BR.mdx                                 |  12 +-
 .../zh-CN.mdx                                 |  16 +-
 .../pt-BR.mdx                                 |   2 +-
 .../zh-CN.mdx                                 |   6 +-
 .../pt-BR.mdx                                 |  28 +--
 .../zh-CN.mdx                                 |  28 +--
 .../zh-CN.mdx                                 |   4 +-
 .../zh-CN.mdx                                 |  10 +-
 .../zh-CN.mdx                                 |   6 +-
 .../zh-CN.mdx                                 |   6 +-
 .../zh-CN.mdx                                 |   4 +-
 .../pt-BR.mdx                                 |   4 +-
 .../zh-CN.mdx                                 |   6 +-
 .../pt-BR.mdx                                 |  12 +-
 .../zh-CN.mdx                                 |  12 +-
 .../pt-BR.mdx                                 |   4 +-
 .../zh-CN.mdx                                 |   4 +-
 .../pt-BR.mdx                                 |  10 +-
 .../zh-CN.mdx                                 |  10 +-
 .../pt-BR.mdx                                 |  16 +-
 .../zh-CN.mdx                                 |  16 +-
 .../zh-CN.mdx                                 |   2 +-
 .../zh-CN.mdx                                 |   2 +-
 .../zh-CN.mdx                                 |  10 +-
 .../pt-BR.mdx                                 |  20 +-
 .../zh-CN.mdx                                 |  24 +--
 .../zh-CN.mdx                                 |   4 +-
 .../pt-BR.mdx                                 |  18 +-
 .../zh-CN.mdx                                 |  18 +-
 .../pt-BR.mdx                                 |  16 +-
 .../zh-CN.mdx                                 |  16 +-
 .../en-US.mdx                                 |   4 +-
 .../pt-BR.mdx                                 |   4 +-
 .../zh-CN.mdx                                 |   8 +-
 .../pt-BR.mdx                                 |   2 +-
 .../zh-CN.mdx                                 |   2 +-
 .../pt-BR.mdx                                 |   2 +-
 .../zh-CN.mdx                                 |   2 +-
 .../metadata.json                             |   7 +-
 .../pt-BR.mdx                                 |   8 +-
 .../zh-CN.mdx                                 |  14 +-
 .../pt-BR.mdx                                 |  22 +-
 .../zh-CN.mdx                                 |  22 +-
 .../metadata.json                             |   6 +-
 .../pt-BR.mdx                                 |   6 +-
 .../zh-CN.mdx                                 |   6 +-
 .../metadata.json                             |   6 +-
 .../zh-CN.mdx                                 |   6 +-
 .../what-does-a-doctype-do/zh-CN.mdx          |   8 +-
 .../pt-BR.mdx                                 |  16 +-
 .../zh-CN.mdx                                 |  18 +-
 .../pt-BR.mdx                                 |   6 +-
 .../zh-CN.mdx                                 |   6 +-
 .../zh-CN.mdx                                 |   8 +-
 .../what-is-progressive-rendering/pt-BR.mdx   |  10 +-
 .../what-is-progressive-rendering/zh-CN.mdx   |  16 +-
 .../pt-BR.mdx                                 |  26 +--
 .../zh-CN.mdx                                 |  26 +--
 .../zh-CN.mdx                                 |   2 +-
 .../zh-CN.mdx                                 |   2 +-
 .../zh-CN.mdx                                 |   4 +-
 .../pt-BR.mdx                                 |  20 +-
 .../zh-CN.mdx                                 |  22 +-
 .../zh-CN.mdx                                 |   8 +-
 .../pt-BR.mdx                                 |  18 +-
 .../zh-CN.mdx                                 |  18 +-
 .../metadata.json                             |   6 +-
 .../pt-BR.mdx                                 |   2 +-
 .../zh-CN.mdx                                 |   2 +-
 .../pt-BR.mdx                                 |  10 +-
 .../zh-CN.mdx                                 |  12 +-
 .../pt-BR.mdx                                 |   2 +-
 .../zh-CN.mdx                                 |   4 +-
 .../zh-CN.mdx                                 |   2 +-
 .../zh-CN.mdx                                 |   2 +-
 .../zh-CN.mdx                                 |   4 +-
 .../zh-CN.mdx                                 |   4 +-
 .../pt-BR.mdx                                 |  16 +-
 .../zh-CN.mdx                                 |  18 +-
 .../pt-BR.mdx                                 |   8 +-
 .../zh-CN.mdx                                 |  10 +-
 .../zh-CN.mdx                                 |   2 +-
 .../zh-CN.mdx                                 |   4 +-
 .../zh-CN.mdx                                 |   2 +-
 .../metadata.json                             |   6 +-
 .../zh-CN.mdx                                 |   2 +-
 .../zh-CN.mdx                                 |   2 +-
 .../metadata.json                             |   6 +-
 .../metadata.json                             |   6 +-
 .../pt-BR.mdx                                 |   6 +-
 .../zh-CN.mdx                                 |  12 +-
 .../contents/cheatsheet/pt-BR.mdx             |  12 +-
 .../contents/cheatsheet/zh-CN.mdx             |  12 +-
 .../contents/common-mistakes/zh-CN.mdx        |   6 +-
 .../contents/evaluation-axes/pt-BR.mdx        |  76 +++----
 .../contents/evaluation-axes/zh-CN.mdx        |  72 +++----
 .../contents/framework/pt-BR.mdx              | 117 +++++-----
 .../contents/framework/zh-CN.mdx              | 154 ++++++-------
 .../contents/introduction/pt-BR.mdx           |  32 +--
 .../contents/introduction/zh-CN.mdx           |  40 ++--
 .../contents/types-of-questions/pt-BR.mdx     |  50 ++---
 .../contents/types-of-questions/zh-CN.mdx     |  62 +++---
 .../2022-06-18-javascript-object-vs-map.md    |   6 +-
 website/docusaurus.config.js                  |   4 +-
 .../current/javascript-questions.md           |  16 +-
 .../current/javascript-questions.md           |  16 +-
 .../current/javascript-questions.md           |  22 +-
 .../current/javascript-questions.md           |  16 +-
 .../current/javascript-questions.md           |  10 +-
 .../current/javascript-questions.md           |  10 +-
 website/src/components/SidebarAd/index.js     |  11 +-
 website/src/pages/index.js                    |  21 +-
 website/src/theme/DocItem/Content/index.js    |   8 +-
 website/src/theme/DocItem/Layout/index.js     |   8 +-
 .../src/theme/DocSidebar/Mobile/index.d.ts    |   2 +-
 website/src/theme/DocSidebar/Mobile/index.js  |   4 +-
 website/src/theme/TOC/index.js                |   2 +-
 222 files changed, 2527 insertions(+), 2551 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index 49ca3de23..1fcfb4fe8 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,6 +1,5 @@
 {
   "bracketSameLine": true,
-  "bracketSpacing": false,
   "printWidth": 80,
   "proseWrap": "never",
   "singleQuote": true,
diff --git a/.wip/topics/accessibility.md b/.wip/topics/accessibility.md
index e6f61451b..92e3178c1 100644
--- a/.wip/topics/accessibility.md
+++ b/.wip/topics/accessibility.md
@@ -1,5 +1,4 @@
-Accessibility
-==
+# Accessibility
 
 ## Glossary
 
@@ -77,17 +76,20 @@ The following is a checklist that contains recommendations for implementing HTML
 - `aria-role` attributes tell assistive technologies that the element should follow that role's accessibility patterns. There are well-defined roles in the HTML spec. Do not define them on your own.
   - `tabindex="0"` is usually added to it elements that have `role` added so that it can be focused.
 - Assistive labelling
+
   - `aria-label` is useful for labelling buttons where the content is empty or contains only icons.
   - `aria-labelledby` is similar to `<label>` elements, and can be used on any elements.
+
     ```html
     /* Normal label example */
-    <input type="radio" id="coffee-label">
+    <input type="radio" id="coffee-label" />
     <label for="coffee-label">Coffee</label>
 
     /* aria-labelledby example */
     <div role="radio" aria-labelledby="coffee-label"></div>
     <span id="coffee-label">Coffee</span>
     ```
+
 - ARIA Relationships
   - ARIA relationship attributes create semantic relationships between elements on the page. The `aria-labelledby` attribute in the previous example indicates that the `<div>` is labelled by the element with that `id`.
   - Possible relationship attributes include `aria-activedescendent`, `aria-describedby`, `aria-labelledby`, `aria-owns`, `aria-posinset` and `aria-setsize`.
@@ -137,23 +139,23 @@ The following is a checklist that contains recommendations for implementing HTML
 Consider using ARIA attributes in your CSS selectors to reduce some noise in your CSS. For custom toggle buttons, instead of doing this,
 
 ```html
-<div class="toggle pressed" role="button" tabindex="0" aria-pressed="true"></div> /* On */
-<div class="toggle" role="button" tabindex="0" aria-pressed="false"></div> /* Off */
-
-.toggle.pressed {
-  ...
-}
+<div
+  class="toggle pressed"
+  role="button"
+  tabindex="0"
+  aria-pressed="true"></div>
+/* On */
+<div class="toggle" role="button" tabindex="0" aria-pressed="false"></div>
+/* Off */ .toggle.pressed { ... }
 ```
 
 you can do this instead:
 
 ```html
-<div class="toggle" role="button" tabindex="0" aria-pressed="true"></div> /* On */
-<div class="toggle" role="button" tabindex="0" aria-pressed="false"></div> /* Off */
-
-.toggle[aria-pressed="true"] {
-  ...
-}
+<div class="toggle" role="button" tabindex="0" aria-pressed="true"></div>
+/* On */
+<div class="toggle" role="button" tabindex="0" aria-pressed="false"></div>
+/* Off */ .toggle[aria-pressed="true"] { ... }
 ```
 
 which removes the need for toggling the `press` class on the element.
diff --git a/.wip/topics/browser.md b/.wip/topics/browser.md
index 8ace1b82c..7c1210e6f 100644
--- a/.wip/topics/browser.md
+++ b/.wip/topics/browser.md
@@ -1,5 +1,4 @@
-Browser
-==
+# Browser
 
 ## Glossary
 
@@ -15,22 +14,31 @@ Browser
 High level flow of how browsers render a webpage:
 
 1. DOM
-  - The DOM (Document Object Model) is formed from the HTML that is received from a server.
-  - Characters -> Tokens -> Nodes -> DOM.
-  - DOM construction is incremental.
-  - CSS and JS are requested as the respective `<link>` and `<script>` tags are encountered.
+
+- The DOM (Document Object Model) is formed from the HTML that is received from a server.
+- Characters -> Tokens -> Nodes -> DOM.
+- DOM construction is incremental.
+- CSS and JS are requested as the respective `<link>` and `<script>` tags are encountered.
+
 1. CSSOM
-  - Styles are loaded and parsed, forming the CSSOM (CSS Object Model).
-  - Characters -> Tokens -> Nodes -> CSSOM.
-  - CSSOM construction is not incremental.
-  - Browser blocks page rendering until it receives and processes all the CSS.
-  - CSS is render blocking.
+
+- Styles are loaded and parsed, forming the CSSOM (CSS Object Model).
+- Characters -> Tokens -> Nodes -> CSSOM.
+- CSSOM construction is not incremental.
+- Browser blocks page rendering until it receives and processes all the CSS.
+- CSS is render blocking.
+
 1. Render Tree
-  - On top of DOM and CSSOM, a render tree is created, which is a set of objects to be rendered. Render tree reflects the DOM structure except for invisible elements (like the <head> tag or elements that have `display: none`; set). Each text string is represented in the rendering tree as a separate renderer. Each of the rendering objects contains its corresponding DOM object (or a text block) plus the calculated styles. In other words, the render tree describes the visual representation of a DOM.
+
+- On top of DOM and CSSOM, a render tree is created, which is a set of objects to be rendered. Render tree reflects the DOM structure except for invisible elements (like the <head> tag or elements that have `display: none`; set). Each text string is represented in the rendering tree as a separate renderer. Each of the rendering objects contains its corresponding DOM object (or a text block) plus the calculated styles. In other words, the render tree describes the visual representation of a DOM.
+
 1. Layout
-  - For each render tree element, its coordinates are calculated, which is called "layout". Browsers use a flow method which only required one pass to layout all the elements (tables require more than one pass).
+
+- For each render tree element, its coordinates are calculated, which is called "layout". Browsers use a flow method which only required one pass to layout all the elements (tables require more than one pass).
+
 1. Painting
-  - Finally, this gets actually displayed in a browser window, a process called "painting".
+
+- Finally, this gets actually displayed in a browser window, a process called "painting".
 
 ###### References
 
@@ -44,6 +52,7 @@ When changing element styles which don't affect the element's position on a page
 ## Reflow
 
 When the changes affect document contents or structure, or element position, a reflow (or relayout) happens. These changes are usually triggered by:
+
 - DOM manipulation (element addition, deletion, altering, or changing element order)
 - Contents changes, including text changes in form fields
 - Calculation or altering of CSS properties
diff --git a/.wip/topics/caching.md b/.wip/topics/caching.md
index cea2dbd98..e09cd9cb6 100644
--- a/.wip/topics/caching.md
+++ b/.wip/topics/caching.md
@@ -1,5 +1,4 @@
-Caching
-==
+# Caching
 
 WIP.
 
diff --git a/.wip/topics/css.md b/.wip/topics/css.md
index d2a034a3a..228cace31 100644
--- a/.wip/topics/css.md
+++ b/.wip/topics/css.md
@@ -1,5 +1,4 @@
-CSS
-==
+# CSS
 
 CSS (Cascading Style Sheets) are rules to describe how your HTML elements look. Writing good CSS is hard. It usually takes many years of experience and frustration of shooting yourself in the foot before one is able to write maintainable and scalable CSS. CSS, having a global namespace, is fundamentally designed for web documents, and not really for web apps that favor a components architecture. Hence, experienced front end developers have designed methodologies to guide people on how to write organized CSS for complex projects, such as using [SMACSS](https://smacss.com/), [BEM](http://getbem.com/), [SUIT CSS](http://suitcss.github.io/), etc.
 
@@ -12,15 +11,15 @@ If you are a total beginner to CSS, Codecademy's [HTML & CSS course](https://www
 ## Glossary
 
 - [**Box Model**](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) - The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area (e.g. text, an image, etc.) and optional surrounding padding, border, and margin areas.
-- [**Specificity**](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) - Specificity is how browsers decide which CSS property values are the most relevant to an element and, will therefore be applied. It is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. 
+- [**Specificity**](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) - Specificity is how browsers decide which CSS property values are the most relevant to an element and, will therefore be applied. It is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.
   - When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. It only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.
   - Typically used in type selectors/pseduo elements (`h1`, `div`, `:before`), class/attribute selectors (`.btn`, `[type="radio"]`), pseudo-classes (`:hover`) and ID selectors (`#someElement`).
   - Inline styles added to an element always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
-  - When an important rule (`!important`) is used on a style declaration, this declaration overrides any other declarations. Try to avoid using `!important`, as it breaks  the natural cascading in the stylesheets. Always look for a way to use specificity before even considering `!important`, and only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap).
+  - When an important rule (`!important`) is used on a style declaration, this declaration overrides any other declarations. Try to avoid using `!important`, as it breaks the natural cascading in the stylesheets. Always look for a way to use specificity before even considering `!important`, and only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap).
 - [**Positioning**](https://developer.mozilla.org/en-US/docs/Web/CSS/position) - The position CSS property determines how an element will be positioned in a document. The `top`, `right`, `bottom`, and `left` properties would later determine the final location of said positioned element.
   - Initial value: `static`
   - Values that are frequently used: `relative`, `absolute`, `fixed`, `sticky`
-- [**Floats**](https://developer.mozilla.org/en-US/docs/Web/CSS/float) - The `float` CSS property determines where an element should be placed - along the left or right side of its container. This allows text and inline elements to wrap around it. Also note, the element would be removed from the normal *flow* of the web page, though still remaining a part of the flow (in contrast to `position: absolute`). For an element to be `float`, it's value must not be `none`.
+- [**Floats**](https://developer.mozilla.org/en-US/docs/Web/CSS/float) - The `float` CSS property determines where an element should be placed - along the left or right side of its container. This allows text and inline elements to wrap around it. Also note, the element would be removed from the normal _flow_ of the web page, though still remaining a part of the flow (in contrast to `position: absolute`). For an element to be `float`, it's value must not be `none`.
   - Initial value: `none`
   - Values that are frequently used: `left`, `right`, `inline-start`, `inline-end`.
   - Additional Notes: Usually, there would be cases that you may want to move an item below any floated elements. E.g, you may want some elements like your paragraphs to remain adjacent to floats, but force headings and footers to be on their own line. See [`clear` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/clear) for more examples
diff --git a/.wip/topics/design.md b/.wip/topics/design.md
index cef9c9728..c6b6f6609 100644
--- a/.wip/topics/design.md
+++ b/.wip/topics/design.md
@@ -1,9 +1,9 @@
-Design Questions
-==
+# Design Questions
 
 ## Autocomplete Widget
 
 Talk me through a full stack implementation of an autocomplete widget. A user can type text into it, and get back results from a server.
+
 - How would you design a frontend to support the following features:
   - Fetch data from a backend API
   - Render results as a tree (items can have parents/children - it's not just a flat list)
diff --git a/.wip/topics/dom.md b/.wip/topics/dom.md
index e66719399..fd56ba479 100644
--- a/.wip/topics/dom.md
+++ b/.wip/topics/dom.md
@@ -1,5 +1,4 @@
-DOM
-==
+# DOM
 
 ## Glossary
 
diff --git a/.wip/topics/html.md b/.wip/topics/html.md
index 97034e163..11a06e844 100644
--- a/.wip/topics/html.md
+++ b/.wip/topics/html.md
@@ -1,5 +1,4 @@
-HTML
-==
+# HTML
 
 HTML (Hypertext Markup Language) is the structure that all websites are built on. Anyone working on websites and webapps should have a basic understanding of HTML at the very least. A helpful analogy for understanding the importance of HTML is the house scenario. When building a new house, the process can be split into a few key areas; structure (HTML), aesthetics (CSS) and furniture (Content). The HTML is your basic page structure, without the structure, you cannot change how it looks using CSS, or what content is on the page.
 
@@ -9,7 +8,7 @@ HTML (Hypertext Markup Language) is the structure that all websites are built on
 
 ## Deprecated Tags
 
-There are a number of tags from past versions of HTML that have become deprecated over time. This means that while they are no longer considered valid elements, most browsers should still be able to read and render them. 
+There are a number of tags from past versions of HTML that have become deprecated over time. This means that while they are no longer considered valid elements, most browsers should still be able to read and render them.
 
 ## Script Loading
 
diff --git a/.wip/topics/javascript.md b/.wip/topics/javascript.md
index 6278f652b..0985ed62d 100644
--- a/.wip/topics/javascript.md
+++ b/.wip/topics/javascript.md
@@ -1,5 +1,4 @@
-JavaScript
-==
+# JavaScript
 
 WIP.
 
@@ -18,7 +17,7 @@ WIP.
 - **Promise** - "The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value." - [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
   - Promises can contain an immediate value.
 - **Prototype** - TBD
-- **This** - The `this` keyword does not refer to the function in which `this` is used or that function's scope. Javascript uses [4 rules](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch2.md#determining-this) to determine if `this` will reference an arbitrary object, *undefined* or the *global* object inside a particular function call.
+- **This** - The `this` keyword does not refer to the function in which `this` is used or that function's scope. Javascript uses [4 rules](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch2.md#determining-this) to determine if `this` will reference an arbitrary object, _undefined_ or the _global_ object inside a particular function call.
 
 ## Core Language
 
diff --git a/.wip/topics/networking.md b/.wip/topics/networking.md
index f013f4f4c..b3bbb497e 100644
--- a/.wip/topics/networking.md
+++ b/.wip/topics/networking.md
@@ -1,5 +1,4 @@
-Networking
-==
+# Networking
 
 WIP.
 
diff --git a/.wip/topics/performance.md b/.wip/topics/performance.md
index 5e5fe5306..1ad250120 100644
--- a/.wip/topics/performance.md
+++ b/.wip/topics/performance.md
@@ -1,5 +1,4 @@
-Performance
-==
+# Performance
 
 WIP.
 
diff --git a/.wip/topics/security.md b/.wip/topics/security.md
index 59ac38b26..f5a465214 100644
--- a/.wip/topics/security.md
+++ b/.wip/topics/security.md
@@ -1,5 +1,4 @@
-Security
-==
+# Security
 
 ## Glossary
 
@@ -52,7 +51,7 @@ XSS vulnerabilities allow attackers to bypass essentially all CSRF preventions.
 
 ###### References
 
-- [OWASP CSRF](https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF))
+- [OWASP CSRF](<https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)>)
 
 ## HTTPS
 
@@ -100,7 +99,6 @@ http://shebang.brandonmintern.com/foolproof-html-escaping-in-javascript/
 - https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
 - https://www.nczonline.net/blog/2009/05/12/cookies-and-security/
 
-
 ## Framebusting
 
 https://seclab.stanford.edu/websec/framebusting/framebust.pdf
diff --git a/.wip/topics/widgets.md b/.wip/topics/widgets.md
index 6c456fc9d..b2d70f737 100644
--- a/.wip/topics/widgets.md
+++ b/.wip/topics/widgets.md
@@ -1,5 +1,4 @@
-Widgets
-==
+# Widgets
 
 Here are some commonly seen widgets/components and the considerations we should take into account when designing them.
 
diff --git a/README.md b/README.md
index 7df474481..3fa9beb36 100644
--- a/README.md
+++ b/README.md
@@ -87,4 +87,3 @@ Many hours of hard work have gone into this project. Your support will be very a
 ## License
 
 All projects and packages in this repository are [MIT licensed](/LICENSE).
-
diff --git a/contents/algorithms.md b/contents/algorithms.md
index 30bea2ef9..49a572718 100644
--- a/contents/algorithms.md
+++ b/contents/algorithms.md
@@ -24,7 +24,6 @@ The [Tech Interview Handbook](https://www.techinterviewhandbook.org/algorithms/s
 
 [GreatFrontEnd](https://www.greatfrontend.com) provides [**free** questions for you to practice implementing Data Structures and Algorithms in JavaScript](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms). You can practice implementing common data structures (e.g. [Stacks](https://www.greatfrontend.com/questions/javascript/stack), [Queues](https://www.greatfrontend.com/questions/javascript/queue)) and algorithms (e.g. [Binary Search](https://www.greatfrontend.com/questions/javascript/binary-search), [Merge Sort](https://www.greatfrontend.com/questions/javascript/merge-sort)).
 
-
 ## Algorithm courses
 
 ### [AlgoMonster](https://shareasale.com/r.cfm?b=1873647&u=3114753&m=114505&urllink=&afftrack=)
@@ -49,4 +48,4 @@ If you want more structured algorithms practice which are targeted at JavaScript
 
 Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com) has front end interview [study plans](https://www.greatfrontend.com/get-started) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms). Start practicing today!
 
-:::
\ No newline at end of file
+:::
diff --git a/contents/front-end-system-design-applications.md b/contents/front-end-system-design-applications.md
index 57dc20da1..a2f949304 100644
--- a/contents/front-end-system-design-applications.md
+++ b/contents/front-end-system-design-applications.md
@@ -10,7 +10,6 @@ Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfro
 
 :::
 
-
 ## Examples
 
 - News feed (e.g. Facebook): [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/news-feed-facebook)
diff --git a/contents/front-end-system-design-ui-components.md b/contents/front-end-system-design-ui-components.md
index 4d9631dc6..5988cfda7 100644
--- a/contents/front-end-system-design-ui-components.md
+++ b/contents/front-end-system-design-ui-components.md
@@ -35,7 +35,6 @@ In system design interviews, candidates are supposed to lead the conversation. H
 1. **<u>I</u>nterface definition (API)**: Define the interface (API) between components in the product, functionality of each API, their parameters and responses.
 1. **<u>O</u>ptimizations and deep dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product.
 
-
 ### Requirements exploration
 
 Every system design interview (even for non-front end as well) should start with requirements gathering/clarifying requirements about the question, which is usually left underspecified on purpose. You are recommended to spend at least a few minutes clarifying the requirements. Do not start drawing the architecture before you are clear about the requirements!
diff --git a/contents/javascript-questions.md b/contents/javascript-questions.md
index f2d1c458b..bbfc0529a 100644
--- a/contents/javascript-questions.md
+++ b/contents/javascript-questions.md
@@ -431,7 +431,7 @@ JSONP works by making a request to a cross-origin domain via a `<script>` tag an
 
 ```js
 // File loaded from https://example.com?callback=printData
-printData({name: 'Yang Shun'});
+printData({ name: 'Yang Shun' });
 ```
 
 The client has to have the `printData` function in its global scope and the function will be executed by the client when the response from the cross-origin domain is received.
@@ -903,9 +903,9 @@ const arr = [1, 2, 3];
 const newArr = [...arr, 4]; // [1, 2, 3, 4]
 
 // Object Example
-const human = Object.freeze({race: 'human'});
-const john = {...human, name: 'John'}; // {race: "human", name: "John"}
-const alienJohn = {...john, race: 'alien'}; // {race: "alien", name: "John"}
+const human = Object.freeze({ race: 'human' });
+const john = { ...human, name: 'John' }; // {race: "human", name: "John"}
+const alienJohn = { ...john, race: 'alien' }; // {race: "alien", name: "John"}
 ```
 
 ###### References
@@ -1208,8 +1208,8 @@ console.log(b); // 1
 
 ```js
 // Variable assignment.
-const o = {p: 42, q: true};
-const {p, q} = o;
+const o = { p: 42, q: true };
+const { p, q } = o;
 
 console.log(p); // 42
 console.log(q); // true
@@ -1225,7 +1225,7 @@ console.log(q); // true
 Template literals help make it simple to do string interpolation, or to include variables in a string. Before ES2015, it was common to do something like this:
 
 ```js
-var person = {name: 'Tyler', age: 28};
+var person = { name: 'Tyler', age: 28 };
 console.log(
   'Hi, my name is ' + person.name + ' and I am ' + person.age + ' years old!',
 );
@@ -1235,7 +1235,7 @@ console.log(
 With template literals, you can now create that same output like this instead:
 
 ```js
-const person = {name: 'Tyler', age: 28};
+const person = { name: 'Tyler', age: 28 };
 console.log(`Hi, my name is ${person.name} and I am ${person.age} years old!`);
 // 'Hi, my name is Tyler and I am 28 years old!'
 ```
@@ -1270,7 +1270,7 @@ This is line two.`);
 Another use case of template literals would be to use as a substitute for templating libraries for simple variable interpolations:
 
 ```js
-const person = {name: 'Tyler', age: 28};
+const person = { name: 'Tyler', age: 28 };
 document.body.innerHTML = `
   <div>
     <p>Name: ${person.name}</p>
@@ -1337,7 +1337,7 @@ const person = {
   age: 29,
 };
 
-const copyOfTodd = {...person};
+const copyOfTodd = { ...person };
 ```
 
 ES6's rest syntax offers a shorthand for including an arbitrary number of arguments to be passed to a function. It is like an inverse of the spread syntax, taking data and stuffing it into an array rather than unpacking an array of data, and it works in function arguments, as well as in array and object destructuring assignments.
@@ -1351,7 +1351,7 @@ const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12
 
 const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
 
-const {e, f, ...others} = {
+const { e, f, ...others } = {
   e: 1,
   f: 2,
   g: 3,
diff --git a/contents/javascript-utility-function.md b/contents/javascript-utility-function.md
index f26bde42b..4e451ad8e 100644
--- a/contents/javascript-utility-function.md
+++ b/contents/javascript-utility-function.md
@@ -20,7 +20,6 @@ Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com) has front
 
 :::
 
-
 ## Basic examples
 
 - Implement `Array.prototype` functions: `map`, `reduce`, `filter`, `sort`
diff --git a/packages/behavioral-interview-guidebook/contents/collaboration/pt-BR.mdx b/packages/behavioral-interview-guidebook/contents/collaboration/pt-BR.mdx
index ea8e2bd2b..7bf5eb4bb 100644
--- a/packages/behavioral-interview-guidebook/contents/collaboration/pt-BR.mdx
+++ b/packages/behavioral-interview-guidebook/contents/collaboration/pt-BR.mdx
@@ -20,12 +20,12 @@ Neste guia, você aprenderá como abordá-las:
 
 Ao avaliar candidatos nesta categoria, os entrevistadores geralmente estão observando os seguintes critérios:
 
--   Lidar com desacordos
--   Trabalhando em equipe
--   Trabalhando com personalidades e habilidades diversas
--   Comunicando ideias complexas de forma simples
--   Fornecendo feedback construtivo
--   Escuta ativa
+- Lidar com desacordos
+- Trabalhando em equipe
+- Trabalhando com personalidades e habilidades diversas
+- Comunicando ideias complexas de forma simples
+- Fornecendo feedback construtivo
+- Escuta ativa
 
 ## "Abstraindo Perguntas sobre Colaboração."
 
@@ -37,36 +37,36 @@ A colaboração é um tema que pode agrupar sub-requisitos como comunicação, t
 
 #### Exemplo de Questões
 
--   Você pode descrever um momento em que teve que comunicar efetivamente informações técnicas para uma audiência não técnica e como abordou essa situação?
--   Você pode descrever um momento em que teve que adaptar seu estilo de comunicação para se comunicar eficazmente com alguém que tinha uma formação ou perspectiva diferente?
--   Você pode dar um exemplo de um momento em que teve que comunicar informações importantes sob pressão de tempo ou em uma situação de alto estresse?
--   Como você garante que sua mensagem seja compreendida e bem recebida pelo seu público?
+- Você pode descrever um momento em que teve que comunicar efetivamente informações técnicas para uma audiência não técnica e como abordou essa situação?
+- Você pode descrever um momento em que teve que adaptar seu estilo de comunicação para se comunicar eficazmente com alguém que tinha uma formação ou perspectiva diferente?
+- Você pode dar um exemplo de um momento em que teve que comunicar informações importantes sob pressão de tempo ou em uma situação de alto estresse?
+- Como você garante que sua mensagem seja compreendida e bem recebida pelo seu público?
 
 #### Traços pelos Quais os Entrevistadores Procuram
 
--   Transmitir ideias complexas de forma simples
--   Escuta ativa
+- Transmitir ideias complexas de forma simples
+- Escuta ativa
 
 ### Trabalho em Equipe
 
 #### Exemplo de Questões
 
--   Você pode descrever um projeto anterior em que teve que trabalhar com um stakeholder ou colega difícil e como lidou com essa situação?
--   Você pode me contar sobre uma vez em que teve que dar um feedback construtivo a um membro da equipe ou colega?
--   Como você aborda a colaboração com colegas de equipe que não estão cumprindo prazos ou responsabilidades?
--   Você pode fornecer um exemplo de quando teve que trabalhar com uma equipe em que havia desacordos entre os membros?
--   Como você lida com a colaboração em uma equipe composta por pessoas com conjuntos de habilidades e personalidades diferentes?
--   Você pode dar um exemplo de uma vez em que teve que se adaptar ao estilo de trabalho de um membro da equipe para concluir um projeto com sucesso?
--   Como você garante que todos os membros da equipe sejam ouvidos e que suas ideias sejam consideradas em discussões em grupo?
--   Você pode dar um exemplo de uma vez em que teve que trabalhar em um projeto de equipe e teve que fazer concessões com os outros para chegar a uma solução?
--   Você pode descrever um momento em que teve que colaborar com pessoas de diferentes departamentos ou organizações para concluir um projeto?
+- Você pode descrever um projeto anterior em que teve que trabalhar com um stakeholder ou colega difícil e como lidou com essa situação?
+- Você pode me contar sobre uma vez em que teve que dar um feedback construtivo a um membro da equipe ou colega?
+- Como você aborda a colaboração com colegas de equipe que não estão cumprindo prazos ou responsabilidades?
+- Você pode fornecer um exemplo de quando teve que trabalhar com uma equipe em que havia desacordos entre os membros?
+- Como você lida com a colaboração em uma equipe composta por pessoas com conjuntos de habilidades e personalidades diferentes?
+- Você pode dar um exemplo de uma vez em que teve que se adaptar ao estilo de trabalho de um membro da equipe para concluir um projeto com sucesso?
+- Como você garante que todos os membros da equipe sejam ouvidos e que suas ideias sejam consideradas em discussões em grupo?
+- Você pode dar um exemplo de uma vez em que teve que trabalhar em um projeto de equipe e teve que fazer concessões com os outros para chegar a uma solução?
+- Você pode descrever um momento em que teve que colaborar com pessoas de diferentes departamentos ou organizações para concluir um projeto?
 
 #### Traços pelos Quais os Entrevistadores Procuram
 
--   Trabalhando em equipe
--   Trabalhar com diversos estilos de trabalho, competências e personalidades
--   Lidar com desacordos (de outras pessoas e si mesmo)
--   Fornecendo feedback construtivo
+- Trabalhando em equipe
+- Trabalhar com diversos estilos de trabalho, competências e personalidades
+- Lidar com desacordos (de outras pessoas e si mesmo)
+- Fornecendo feedback construtivo
 
 ## Estrutura de Resposta Sugerida
 
@@ -135,58 +135,58 @@ Observação: Para a comunicação, traços como transmitir ideias complexas de
 
 Embora pareça haver um grande número de características necessárias, você pode abordar 90% delas com uma situação muito comum que ocorre em equipes de engenharia:
 
--   Você teve que trabalhar em uma equipe interfuncional (por exemplo, com partes interessadas de negócios, gerentes de produtos ou designers) em uma situação de alta pressão, onde as prioridades e os requisitos estavam mudando rapidamente.
--   Há um conflito de interesses entre as áreas de negócios/design e engenharia, como a pressão (exigência) por prazos mais apertados vindos do lado de negócios/design, enquanto do ponto de vista da engenharia, cumprir esses prazos resultará em uma grande dívida técnica.
--   Você teve que fornecer um feedback construtivo para as equipes de negócios/design sobre o problema.
--   Ao fazer isso, você precisou transmitir conceitos técnicos para uma audiência não técnica.
--   Além disso, você solicitou feedback deles para entender como a engenharia poderia colaborar melhor para evitar esse problema novamente. Ao fazer isso, você regularmente revisou a lista de demandas ou requisitos com eles para verificar se algum deles poderia ser eliminado para acelerar a entrega da engenharia. Além disso, você atendeu às necessidades deles em relação à responsabilidade pelo prazo, fornecendo atualizações regulares.
+- Você teve que trabalhar em uma equipe interfuncional (por exemplo, com partes interessadas de negócios, gerentes de produtos ou designers) em uma situação de alta pressão, onde as prioridades e os requisitos estavam mudando rapidamente.
+- Há um conflito de interesses entre as áreas de negócios/design e engenharia, como a pressão (exigência) por prazos mais apertados vindos do lado de negócios/design, enquanto do ponto de vista da engenharia, cumprir esses prazos resultará em uma grande dívida técnica.
+- Você teve que fornecer um feedback construtivo para as equipes de negócios/design sobre o problema.
+- Ao fazer isso, você precisou transmitir conceitos técnicos para uma audiência não técnica.
+- Além disso, você solicitou feedback deles para entender como a engenharia poderia colaborar melhor para evitar esse problema novamente. Ao fazer isso, você regularmente revisou a lista de demandas ou requisitos com eles para verificar se algum deles poderia ser eliminado para acelerar a entrega da engenharia. Além disso, você atendeu às necessidades deles em relação à responsabilidade pelo prazo, fornecendo atualizações regulares.
 
 Adicione detalhes específicos de acordo com a sua situação.
 
 #### Situação
 
--   No meu emprego atual como engenheiro de front-end em uma startup, eu tive que liderar o desenvolvimento em um projeto de marketing altamente urgente, trabalhando de forma interdisciplinar com a equipe de marketing e design.
--   Em determinado momento, o departamento de marketing esperava que a funcionalidade fosse lançada na semana seguinte, mas houve um obstáculo significativo por parte da equipe de engenharia devido a dependências com a equipe de API de um parceiro, cujas entregas foram atrasadas devido à saída recente de dois membros seniores.
--   A situação ficou tensa, pois o departamento de marketing não compreendia os obstáculos que a equipe de engenharia estava enfrentando.
+- No meu emprego atual como engenheiro de front-end em uma startup, eu tive que liderar o desenvolvimento em um projeto de marketing altamente urgente, trabalhando de forma interdisciplinar com a equipe de marketing e design.
+- Em determinado momento, o departamento de marketing esperava que a funcionalidade fosse lançada na semana seguinte, mas houve um obstáculo significativo por parte da equipe de engenharia devido a dependências com a equipe de API de um parceiro, cujas entregas foram atrasadas devido à saída recente de dois membros seniores.
+- A situação ficou tensa, pois o departamento de marketing não compreendia os obstáculos que a equipe de engenharia estava enfrentando.
 
 #### Tarefa
 
--   Eu tive que resolver o mal-entendido para garantir um relacionamento de trabalho tranquilo entre as duas equipes.
+- Eu tive que resolver o mal-entendido para garantir um relacionamento de trabalho tranquilo entre as duas equipes.
 
 #### Ação
 
--   Para fazer isso, falei com a equipe de marketing em particular e dei a eles tempo para explicar claramente a urgência e as preocupações ou concepções errôneas que o marketing poderia ter em relação à engenharia.
--   Em seguida, expliquei o papel das equipes parceiras, concentrando-me especificamente no impacto delas na funcionalidade, em vez de informações técnicas complexas.
--   Ao fazer isso, conseguimos realizar uma tempestade de ideias sobre diferentes maneiras de lançar a funcionalidade mesmo sem as dependências externas.
--   Ao mesmo tempo, também conversei com o gerente da equipe parceira sobre a importância do projeto para a empresa e a possibilidade de repriorizar o trabalho deles para nos ajudar a desbloquear.
--   Além disso, também solicitei feedback sobre como a equipe de engenharia poderia colaborar melhor com o marketing para evitar tais mal-entendidos no futuro.
+- Para fazer isso, falei com a equipe de marketing em particular e dei a eles tempo para explicar claramente a urgência e as preocupações ou concepções errôneas que o marketing poderia ter em relação à engenharia.
+- Em seguida, expliquei o papel das equipes parceiras, concentrando-me especificamente no impacto delas na funcionalidade, em vez de informações técnicas complexas.
+- Ao fazer isso, conseguimos realizar uma tempestade de ideias sobre diferentes maneiras de lançar a funcionalidade mesmo sem as dependências externas.
+- Ao mesmo tempo, também conversei com o gerente da equipe parceira sobre a importância do projeto para a empresa e a possibilidade de repriorizar o trabalho deles para nos ajudar a desbloquear.
+- Além disso, também solicitei feedback sobre como a equipe de engenharia poderia colaborar melhor com o marketing para evitar tais mal-entendidos no futuro.
 
 #### Resultado
 
--   Devido à colaboração estreita entre engenharia e marketing, conseguimos lançar a funcionalidade dentro do prazo estipulado.
--   À medida que o marketing priorizou os prazos e a responsabilidade, começamos a fornecer atualizações regulares e discutimos alternativas para cada possível obstáculo.
--   Com isso, todas as funcionalidades foram entregues com sucesso e sem problemas a partir desse ponto.
+- Devido à colaboração estreita entre engenharia e marketing, conseguimos lançar a funcionalidade dentro do prazo estipulado.
+- À medida que o marketing priorizou os prazos e a responsabilidade, começamos a fornecer atualizações regulares e discutimos alternativas para cada possível obstáculo.
+- Com isso, todas as funcionalidades foram entregues com sucesso e sem problemas a partir desse ponto.
 
 ## Possíveis Naturezas de Perguntas de Acompanhamento
 
 Conforme mencionado em nossa [visão geral de preparação para entrevistas comportamentais](/guia-entrevista-comportamental), os entrevistadores são incentivados a depender mais de perguntas de acompanhamento para realmente compreender o processo de pensamento e as motivações do candidato, que normalmente se enquadram nestas categorias:
 
--   Por que você acha que tomou a ação de (inserir ação)?
--   Por que você não fez (inserir ação)?
--   Como você faria as coisas de forma diferente com o benefício da retrospectiva?
+- Por que você acha que tomou a ação de (inserir ação)?
+- Por que você não fez (inserir ação)?
+- Como você faria as coisas de forma diferente com o benefício da retrospectiva?
 
 Para perguntas sobre colaboração, os entrevistadores provavelmente farão perguntas para ajudá-los a entender um pouco mais sobre:
 
--   **Entender se e por que determinadas partes interessadas estavam envolvidas ou não estavam envolvidas**
-    -   Quais partes interessadas estavam envolvidas na discussão e por quê?
-    -   Por que certas partes interessadas, como (inserir parte interessada), foram excluídas do grupo?
--   **Compreender a dinâmica de grupo e como ela afetou a estratégia para lidar com o grupo**
-    -   Quais personalidades estavam presentes no grupo e como isso afetou a dinâmica? Essa compreensão afetou sua estratégia para conduzir as discussões em grupo?
--   **Compreendendo a mentalidade do candidato em relação a conflitos**
-    -   Como você acha que conflitos como esse afetam o ambiente de trabalho? Você preferiria evitá-los?
--   **Compreender como a resolução foi obtida; o candidato apenas cedeu aos outros em vez de depender de fatos e dados?**
-    -   Houve algum dado ou informação que foi utilizado na tomada de decisão?
-    -   Sim, houve dados e informações que foram utilizados na tomada de decisão?
+- **Entender se e por que determinadas partes interessadas estavam envolvidas ou não estavam envolvidas**
+  - Quais partes interessadas estavam envolvidas na discussão e por quê?
+  - Por que certas partes interessadas, como (inserir parte interessada), foram excluídas do grupo?
+- **Compreender a dinâmica de grupo e como ela afetou a estratégia para lidar com o grupo**
+  - Quais personalidades estavam presentes no grupo e como isso afetou a dinâmica? Essa compreensão afetou sua estratégia para conduzir as discussões em grupo?
+- **Compreendendo a mentalidade do candidato em relação a conflitos**
+  - Como você acha que conflitos como esse afetam o ambiente de trabalho? Você preferiria evitá-los?
+- **Compreender como a resolução foi obtida; o candidato apenas cedeu aos outros em vez de depender de fatos e dados?**
+  - Houve algum dado ou informação que foi utilizado na tomada de decisão?
+  - Sim, houve dados e informações que foram utilizados na tomada de decisão?
 
 ## Exemplos de Perguntas e Respostas sobre Colaboração
 
diff --git a/packages/behavioral-interview-guidebook/contents/collaboration/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/collaboration/zh-CN.mdx
index f65207e85..e20310ac5 100644
--- a/packages/behavioral-interview-guidebook/contents/collaboration/zh-CN.mdx
+++ b/packages/behavioral-interview-guidebook/contents/collaboration/zh-CN.mdx
@@ -3,7 +3,7 @@ title: 回答 "告诉我什么时候...... "的协作技能
 description: 学习如何回答针对前端/网络开发人员/软件工程师的协作行为问题，包括沟通和团队工作。 参考样本答案。
 ---
 
-正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，**合作**是需要准备的8大类问题中的一类。
+正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，**合作**是需要准备的 8 大类问题中的一类。
 
 合作问题可能是前端行为面试中最常见的行为问题，因为它们包含了大量相关的特征，为了便于故事/项目的准备，可以将其分组。
 
@@ -20,16 +20,16 @@ description: 学习如何回答针对前端/网络开发人员/软件工程师
 
 在对这一类别的候选人进行评级时，面试者常常考虑以下标准：
 
--   处理分歧
--   团队合作
--   与具有不同性格和技能的人合作
--   简单地传达复杂的概念
--   提出有建设性的反馈意见。
--   积极倾听
+- 处理分歧
+- 团队合作
+- 与具有不同性格和技能的人合作
+- 简单地传达复杂的概念
+- 提出有建设性的反馈意见。
+- 积极倾听
 
 ## 抽象合作问题
 
-正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，为那里的每一个行为问题准备具体的答案是不切实际的。 然而，通过将具体问题批量化为**类似的主题**，并准备涵盖大量问题要求的故事，我们可以将准备的故事数量减少到3-5个左右。
+正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，为那里的每一个行为问题准备具体的答案是不切实际的。 然而，通过将具体问题批量化为**类似的主题**，并准备涵盖大量问题要求的故事，我们可以将准备的故事数量减少到 3-5 个左右。
 
 合作是这样一个主题，它可以将沟通、团队工作、适应性和指导性等子要求组合起来。 对于每个子要求，我们总结了常见的问题，也抽象出了**面试官在这些问题中所关注的特征**：
 
@@ -37,40 +37,40 @@ description: 学习如何回答针对前端/网络开发人员/软件工程师
 
 #### 问题示例
 
--   你能描述一下你不得不向非技术性听众有效传达技术信息的时候，以及你是如何处理的吗？
--   您能否描述一下你不得不调整您的通信风格以便与具有不同背景或观点的人进行有效地沟通的时候？
--   你能举出一个例子，说明你曾在时间紧迫或高度紧张的情况下，不得不沟通重要信息？
--   你如何确保你的信息被受众理解并得到很好的接受？
+- 你能描述一下你不得不向非技术性听众有效传达技术信息的时候，以及你是如何处理的吗？
+- 您能否描述一下你不得不调整您的通信风格以便与具有不同背景或观点的人进行有效地沟通的时候？
+- 你能举出一个例子，说明你曾在时间紧迫或高度紧张的情况下，不得不沟通重要信息？
+- 你如何确保你的信息被受众理解并得到很好的接受？
 
 #### 面试官看重的特质
 
--   简单地传达复杂的概念
--   积极倾听
+- 简单地传达复杂的概念
+- 积极倾听
 
 ### 团队合作
 
 #### 示例问题
 
--   您能否描述过去的一个项目，在这个项目中，您必须与困难的利益攸关方或团队合作，以及如何处理它？
--   你能告诉我，你有什么时候需要向团队成员或同事提供建设性的反馈吗？
--   你如何处理与那些没有在最后期限或职责范围内完成工作的队友合作？
--   你能提供一个例子，当你不得不与一个团队一起工作时，成员之间存在分歧？
--   您如何处理与具有不同技能组合和个性的团队合作？
--   你能举一个例子，说明你为了成功完成一个项目而不得不适应团队成员的工作风格吗？
--   您如何确保在小组讨论中听取所有团队成员的意见，并考虑他们的想法？
--   你能否举一个例子说明你必须在一个团队项目上工作不得不与他人妥协以达成解决方案？
--   你能描述一下你不得不与来自不同部门或组织的人合作完成一个项目的时候吗？
+- 您能否描述过去的一个项目，在这个项目中，您必须与困难的利益攸关方或团队合作，以及如何处理它？
+- 你能告诉我，你有什么时候需要向团队成员或同事提供建设性的反馈吗？
+- 你如何处理与那些没有在最后期限或职责范围内完成工作的队友合作？
+- 你能提供一个例子，当你不得不与一个团队一起工作时，成员之间存在分歧？
+- 您如何处理与具有不同技能组合和个性的团队合作？
+- 你能举一个例子，说明你为了成功完成一个项目而不得不适应团队成员的工作风格吗？
+- 您如何确保在小组讨论中听取所有团队成员的意见，并考虑他们的想法？
+- 你能否举一个例子说明你必须在一个团队项目上工作不得不与他人妥协以达成解决方案？
+- 你能描述一下你不得不与来自不同部门或组织的人合作完成一个项目的时候吗？
 
 #### 面试官看重的特质
 
--   作为一个团队工作
--   与不同的工作风格、技能和个性工作
--   处理分歧(他人的和自己的)
--   提出有建设性的反馈意见。
+- 作为一个团队工作
+- 与不同的工作风格、技能和个性工作
+- 处理分歧(他人的和自己的)
+- 提出有建设性的反馈意见。
 
 ## 建议的答案框架
 
-一如既往，[STAR格式](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 是我们推荐的最简单、最有效的框架，用于构造你的故事。
+一如既往，[STAR 格式](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 是我们推荐的最简单、最有效的框架，用于构造你的故事。
 
 根据上述抽象，我们可以看到，面试官正在为每一项子要求寻找具体特点。 我们为了展示这些理想特征的建议方法已经创建了一个快速的小册子。
 
@@ -133,70 +133,70 @@ description: 学习如何回答针对前端/网络开发人员/软件工程师
 
 ### 示例故事
 
-虽然看起来有大量的所需特征，但你可以用工程团队中非常常见的情况来覆盖其中的90%：
+虽然看起来有大量的所需特征，但你可以用工程团队中非常常见的情况来覆盖其中的 90%：
 
--   你必须在一个跨职能的团队中工作（例如与商业利益相关者或产品经理或设计师），在一个高压的情况下，优先事项和要求迅速变化。
--   商业/设计和工程之间存在利益冲突，例如商业/设计推动（要求）更严格的最后期限，而从工程的角度来看，急于追求这些最后期限将导致大量的技术债务。
--   你必须就这个问题向商业/设计提供建设性的反馈。
--   在这样做时，你需要将技术概念传达给非技术受众。
--   此外，你还征求了他们的反馈意见，以了解工程如何能够更好地合作，避免再次出现这个问题。 这样做， 你定期与他们一起讨论需求或要求的清单，以查看是否可以放弃任何需求以加快工程交付。 此外，你通过提供定期更新，满足了他们对时间轴问责制的需求。
+- 你必须在一个跨职能的团队中工作（例如与商业利益相关者或产品经理或设计师），在一个高压的情况下，优先事项和要求迅速变化。
+- 商业/设计和工程之间存在利益冲突，例如商业/设计推动（要求）更严格的最后期限，而从工程的角度来看，急于追求这些最后期限将导致大量的技术债务。
+- 你必须就这个问题向商业/设计提供建设性的反馈。
+- 在这样做时，你需要将技术概念传达给非技术受众。
+- 此外，你还征求了他们的反馈意见，以了解工程如何能够更好地合作，避免再次出现这个问题。 这样做， 你定期与他们一起讨论需求或要求的清单，以查看是否可以放弃任何需求以加快工程交付。 此外，你通过提供定期更新，满足了他们对时间轴问责制的需求。
 
 根据您的情况在具体细节中添加。
 
 #### 情况
 
--   在我目前作为开办阶段的前端工程师的工作中，我不得不领导一个非常紧迫的营销项目的发展。 在功能上与营销和设计相交叉。
--   在某种程度上，市场部曾预计该功能将在下周内发货，但由于对合作伙伴的API团队的依赖，工程部出现了重大障碍，该团队的交付成果由于最近两名高级成员的离职而被推迟。
--   这种情况变得更加激烈，因为市场部不理解工程部所面临的障碍。
+- 在我目前作为开办阶段的前端工程师的工作中，我不得不领导一个非常紧迫的营销项目的发展。 在功能上与营销和设计相交叉。
+- 在某种程度上，市场部曾预计该功能将在下周内发货，但由于对合作伙伴的 API 团队的依赖，工程部出现了重大障碍，该团队的交付成果由于最近两名高级成员的离职而被推迟。
+- 这种情况变得更加激烈，因为市场部不理解工程部所面临的障碍。
 
 #### 任务
 
--   我必须解决这个误解，以确保两个团队之间的工作关系顺利。
+- 我必须解决这个误解，以确保两个团队之间的工作关系顺利。
 
 #### 行动
 
--   为了这样做，我私下和市场部谈过，让他们有时间清楚地解释紧迫性以及市场部对工程部可能存在的担忧或误解。
--   然后，我解释了合作伙伴团队的作用，特别关注他们对该功能的影响，而不是复杂的技术信息。
--   在这样做的过程中，我们能够集思广益，想出不同的方法，即使没有外部的依赖性，我们也可以交付这个功能。
--   同时， 我还与伙伴小组的经理谈到该项目对公司的重要性以及重新安排其工作的优先次序以帮助我们解除障碍的可能性。
--   除此之外，我还征求了关于工程部如何能够更好地与市场部合作的反馈意见，以避免今后发生这种误解。
+- 为了这样做，我私下和市场部谈过，让他们有时间清楚地解释紧迫性以及市场部对工程部可能存在的担忧或误解。
+- 然后，我解释了合作伙伴团队的作用，特别关注他们对该功能的影响，而不是复杂的技术信息。
+- 在这样做的过程中，我们能够集思广益，想出不同的方法，即使没有外部的依赖性，我们也可以交付这个功能。
+- 同时， 我还与伙伴小组的经理谈到该项目对公司的重要性以及重新安排其工作的优先次序以帮助我们解除障碍的可能性。
+- 除此之外，我还征求了关于工程部如何能够更好地与市场部合作的反馈意见，以避免今后发生这种误解。
 
 #### 结果
 
--   由于工程部和市场部之间的紧密合作，我们能够及时地交付该功能。
--   随着市场营销对时间表和问责制的优先考虑，我们开始定期提供更新，并讨论了每一个潜在的阻碍因素的替代方案。
--   有了这一点，每项功能都在之后成功地顺利交付。
+- 由于工程部和市场部之间的紧密合作，我们能够及时地交付该功能。
+- 随着市场营销对时间表和问责制的优先考虑，我们开始定期提供更新，并讨论了每一个潜在的阻碍因素的替代方案。
+- 有了这一点，每项功能都在之后成功地顺利交付。
 
 ## 后续问题的可能性质
 
 正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中所提到的，鼓励面试官更多地依靠后续问题来真正了解候选人的思维过程和动机，这些问题通常属于这些类别：
 
--   你为什么认为你做了(行为)？
--   你为什么不做(行为)？
--   事后看，你会如何以不同的方式做事？
+- 你为什么认为你做了(行为)？
+- 你为什么不做(行为)？
+- 事后看，你会如何以不同的方式做事？
 
 对于有关合作的问题，面试官很可能会探询一些问题，以帮助他们了解更多的情况：
 
--   **了解某些利益攸关方是否以及为何参与或不参与**
-    -   哪些利益攸关方参与了讨论，以及为什么？
-    -   为什么某些利益攸关方如(某某) 被排除在群组之外？
--   **了解群组动态以及它如何影响处理群组的策略**
-    -   小组中存在哪些个性，它是如何影响动态的？ 这种理解是否影响了你驾驭小组讨论的策略？
--   **理解候选人对冲突的心态**
-    -   你认为这样的冲突如何影响到工作环境？ 你想要避免他们吗？
--   **了解决议是如何产生的；候选人是否只是服从他人，而不是依赖事实和数据？**
-    -   在做决定时，是否有任何数据和信息被利用？
-    -   是否对每一种解决办法的利弊进行过分析？
+- **了解某些利益攸关方是否以及为何参与或不参与**
+  - 哪些利益攸关方参与了讨论，以及为什么？
+  - 为什么某些利益攸关方如(某某) 被排除在群组之外？
+- **了解群组动态以及它如何影响处理群组的策略**
+  - 小组中存在哪些个性，它是如何影响动态的？ 这种理解是否影响了你驾驭小组讨论的策略？
+- **理解候选人对冲突的心态**
+  - 你认为这样的冲突如何影响到工作环境？ 你想要避免他们吗？
+- **了解决议是如何产生的；候选人是否只是服从他人，而不是依赖事实和数据？**
+  - 在做决定时，是否有任何数据和信息被利用？
+  - 是否对每一种解决办法的利弊进行过分析？
 
 ## 合作问题和答案示例
 
-上面的故事样本已经回答了上面的大部分（12个）例子问题。 需要稍加修改的问题将在下文阐述。 如果你还没有，请查看我们的[面试处置技巧](/behavioral-interview-guidebook)，以增加你给人留下好印象的机会。
+上面的故事样本已经回答了上面的大部分（12 个）例子问题。 需要稍加修改的问题将在下文阐述。 如果你还没有，请查看我们的[面试处置技巧](/behavioral-interview-guidebook)，以增加你给人留下好印象的机会。
 
 ### 你如何确保你的信息被受众理解并得到很好的接受？
 
 你可以在回答这个问题时对样本故事稍作修改，重点放在技术信息的解释上：
 
-> 为了确保我的信息被充分理解，在解释之后，我会提供一些例子来说明我的观点，同时也会向听众提出一些问题，以确认他们的理解。 在我几个月前做的一个项目中，我不得不向业务团队解释为什么一个紧急功能被外部团队的API延迟了，以及如何延迟的。 为了做到这一点，我把重点放在企业需要的关键收获上--也就是该功能是如何被这种延迟所影响的，并利用视觉辅助工具以及使用简单清晰的语言。 我还举了一些例子，同时提出问题以确定他们对我的解释的理解。 这使得业务团队能够很好地理解依赖性，从而集思广益，即使没有外部依赖，也能够交付功能。
+> 为了确保我的信息被充分理解，在解释之后，我会提供一些例子来说明我的观点，同时也会向听众提出一些问题，以确认他们的理解。 在我几个月前做的一个项目中，我不得不向业务团队解释为什么一个紧急功能被外部团队的 API 延迟了，以及如何延迟的。 为了做到这一点，我把重点放在企业需要的关键收获上--也就是该功能是如何被这种延迟所影响的，并利用视觉辅助工具以及使用简单清晰的语言。 我还举了一些例子，同时提出问题以确定他们对我的解释的理解。 这使得业务团队能够很好地理解依赖性，从而集思广益，即使没有外部依赖，也能够交付功能。
 
 ### 你如何处理与那些没有在最后期限或职责范围内完成工作的队友合作？
 
diff --git a/packages/behavioral-interview-guidebook/contents/growth-mindset/pt-BR.mdx b/packages/behavioral-interview-guidebook/contents/growth-mindset/pt-BR.mdx
index 7443a5e80..7185258fc 100644
--- a/packages/behavioral-interview-guidebook/contents/growth-mindset/pt-BR.mdx
+++ b/packages/behavioral-interview-guidebook/contents/growth-mindset/pt-BR.mdx
@@ -16,26 +16,26 @@ Neste guia, você aprenderá como abordá-las:
 
 Ao avaliar candidatos nesta categoria, os entrevistadores geralmente estão observando os seguintes critérios:
 
--   Ter autoconsciência de pontos fortes e áreas de desenvolvimento.
--   Solicitando ativamente feedback de outras pessoas e criando ciclos de feedback.
--   Aceitando bem o feedback e contratempos, vendo-os como oportunidades.
--   Assume responsabilidade pessoal por falhas.
--   Refletir, modelar melhores práticas e aplicar lições a novas situações.
--   Motivado(a) por estabelecer e trabalhar em direção a metas desafiadoras.
--   Aprendendo proativamente novas habilidades e aplicando-as ao trabalho.
+- Ter autoconsciência de pontos fortes e áreas de desenvolvimento.
+- Solicitando ativamente feedback de outras pessoas e criando ciclos de feedback.
+- Aceitando bem o feedback e contratempos, vendo-os como oportunidades.
+- Assume responsabilidade pessoal por falhas.
+- Refletir, modelar melhores práticas e aplicar lições a novas situações.
+- Motivado(a) por estabelecer e trabalhar em direção a metas desafiadoras.
+- Aprendendo proativamente novas habilidades e aplicando-as ao trabalho.
 
 ## Perguntas relacionadas a uma mentalidade de crescimento abstrata
 
 ### Perguntas comuns
 
--   Qual você acha ser a sua maior área de melhoria?
--   Você pode me contar sobre uma vez em que melhorou seu trabalho após receber críticas ou feedback?
--   Me conte sobre uma vez em que você estabeleceu uma meta difícil para si mesmo e a alcançou.
--   Me conte sobre uma vez em que você aprendeu uma nova habilidade fora do trabalho e a aplicou no seu trabalho.
--   Me conte sobre uma vez em que você aprendeu um novo conjunto de habilidades depois de observar outras pessoas tirando grande proveito delas.
--   Como você se mantém atualizado(a) nas mais recentes tecnologias e técnicas de front-end?
--   Você pode fornecer um exemplo de uma vez em que teve que se adaptar a um novo ambiente ou framework técnico?
--   Imagine que você precisa implementar um novo sistema com o qual você não tem muita experiência. Quais passos você segue para reunir informações e garantir uma execução bem-sucedida?
+- Qual você acha ser a sua maior área de melhoria?
+- Você pode me contar sobre uma vez em que melhorou seu trabalho após receber críticas ou feedback?
+- Me conte sobre uma vez em que você estabeleceu uma meta difícil para si mesmo e a alcançou.
+- Me conte sobre uma vez em que você aprendeu uma nova habilidade fora do trabalho e a aplicou no seu trabalho.
+- Me conte sobre uma vez em que você aprendeu um novo conjunto de habilidades depois de observar outras pessoas tirando grande proveito delas.
+- Como você se mantém atualizado(a) nas mais recentes tecnologias e técnicas de front-end?
+- Você pode fornecer um exemplo de uma vez em que teve que se adaptar a um novo ambiente ou framework técnico?
+- Imagine que você precisa implementar um novo sistema com o qual você não tem muita experiência. Quais passos você segue para reunir informações e garantir uma execução bem-sucedida?
 
 ### Temas Identificados
 
@@ -43,9 +43,9 @@ As mentioned in our [behavioral interview preparation overview](/behavioral-inte
 
 Esses são os temas que parecem se repetir:
 
--   Recebendo e gerenciando feedback.
--   Mentalidade em relação a desafios e metas desafiadoras.
--   Continue aprendendo.
+- Recebendo e gerenciando feedback.
+- Mentalidade em relação a desafios e metas desafiadoras.
+- Continue aprendendo.
 
 ## Estrutura de Resposta Sugerida
 
@@ -105,12 +105,12 @@ Os pontos abaixo são ideias-chave em torno das quais você pode estruturar sua
 
 Esta resposta utiliza a técnica STAR de forma sutil e demonstra muitas qualidades que os entrevistadores gostariam de ver nos candidatos:
 
--   **Paixão**: Ansioso para aprender mais sobre o domínio do desenvolvimento front-end.
--   **Crescimento**: Identificou que a falta de crescimento seria um problema.
--   **Iniciativa**: Agiu diante do problema da falta de crescimento.
--   **Resolução de Problemas**: Pensou em maneiras de solucionar a falta de crescimento e colocou em prática.
--   **Construção de Camaradagem**: Reunindo pessoas com interesses semelhantes para uma causa comum.
--   **Ajuda a Melhorar os Outros**: Criou canais no Slack para compartilhar conhecimento e apoiar os outros.
+- **Paixão**: Ansioso para aprender mais sobre o domínio do desenvolvimento front-end.
+- **Crescimento**: Identificou que a falta de crescimento seria um problema.
+- **Iniciativa**: Agiu diante do problema da falta de crescimento.
+- **Resolução de Problemas**: Pensou em maneiras de solucionar a falta de crescimento e colocou em prática.
+- **Construção de Camaradagem**: Reunindo pessoas com interesses semelhantes para uma causa comum.
+- **Ajuda a Melhorar os Outros**: Criou canais no Slack para compartilhar conhecimento e apoiar os outros.
 
 ### Você pode fornecer um exemplo de uma vez em que teve que se adaptar a um novo ambiente técnico ou framework?
 
@@ -122,8 +122,8 @@ Esta resposta utiliza a técnica STAR de forma sutil e demonstra muitas qualidad
 
 Análise da resposta:
 
--   **Suscetível a Orientação**: Segue orientações e sugestões do mentor.
--   **Resolução de Problemas**: Encontrou algumas maneiras de se ajudar a se integrar mais rapidamente.
--   **Iniciativa**: Iniciativa de começar a wiki.
--   **Empatia**: Reconheceu que outras pessoas poderiam enfrentar os mesmos problemas e começou a wiki.
--   **Ajuda a Melhorar os Outros**: Novos colaboradores se beneficiam da wiki.
+- **Suscetível a Orientação**: Segue orientações e sugestões do mentor.
+- **Resolução de Problemas**: Encontrou algumas maneiras de se ajudar a se integrar mais rapidamente.
+- **Iniciativa**: Iniciativa de começar a wiki.
+- **Empatia**: Reconheceu que outras pessoas poderiam enfrentar os mesmos problemas e começou a wiki.
+- **Ajuda a Melhorar os Outros**: Novos colaboradores se beneficiam da wiki.
diff --git a/packages/behavioral-interview-guidebook/contents/growth-mindset/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/growth-mindset/zh-CN.mdx
index b81420f0a..93f7290ca 100644
--- a/packages/behavioral-interview-guidebook/contents/growth-mindset/zh-CN.mdx
+++ b/packages/behavioral-interview-guidebook/contents/growth-mindset/zh-CN.mdx
@@ -3,7 +3,7 @@ title: 回答 "告诉我什么时候...... "的成长心态
 description: 学习如何回答关于成长心态的行为问题，针对前端/网络开发者/软件工程师。 参考样本答案。
 ---
 
-正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，**成长心态**是需要准备的8大类问题中的一类。
+正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，**成长心态**是需要准备的 8 大类问题中的一类。
 
 在本指南中，您将学习如何处理这些问题：
 
@@ -16,40 +16,40 @@ description: 学习如何回答关于成长心态的行为问题，针对前端/
 
 在对这一类别的候选人进行评级时，面试者常常考虑以下标准：
 
--   对优势和发展领域有自我意识。
--   积极征求他人的反馈意见，并创建反馈循环。
--   很好地利用反馈和挫折，把它们看作是机会。
--   对失败承担个人责任。
--   反思、示范最佳做法并将经验教训应用于新的情况。
--   通过设定和努力实现具有挑战性的目标而感到兴奋。
--   积极学习新技能并应用于工作。
+- 对优势和发展领域有自我意识。
+- 积极征求他人的反馈意见，并创建反馈循环。
+- 很好地利用反馈和挫折，把它们看作是机会。
+- 对失败承担个人责任。
+- 反思、示范最佳做法并将经验教训应用于新的情况。
+- 通过设定和努力实现具有挑战性的目标而感到兴奋。
+- 积极学习新技能并应用于工作。
 
 ## 抽象成长心态问题
 
 ### 常见问题
 
--   你认为最大的改进领域是什么？
--   你能告诉我一个你在收到批评或反馈后改进工作的例子吗?
--   告诉我一个你为自己设定一个困难目标并实现了它的例子。
--   告诉我一个你在工作之外学习了新技能并将其应用到你的工作中的例子。
--   告诉我你在观察其他人利用它取得巨大成功后学习了一项新技能的情况。
--   您如何不断更新最新的前端技术和技巧？
--   你能提供一个例子说明你不得不适应一个新的技术环境或框架？
--   想象一下你需要实现一个你没有太多经验的新系统。 你会采取哪些措施来收集资料并确保成功执行？
+- 你认为最大的改进领域是什么？
+- 你能告诉我一个你在收到批评或反馈后改进工作的例子吗?
+- 告诉我一个你为自己设定一个困难目标并实现了它的例子。
+- 告诉我一个你在工作之外学习了新技能并将其应用到你的工作中的例子。
+- 告诉我你在观察其他人利用它取得巨大成功后学习了一项新技能的情况。
+- 您如何不断更新最新的前端技术和技巧？
+- 你能提供一个例子说明你不得不适应一个新的技术环境或框架？
+- 想象一下你需要实现一个你没有太多经验的新系统。 你会采取哪些措施来收集资料并确保成功执行？
 
 ### 确定的主题
 
-正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，为那里的每一个行为问题准备具体的答案是不切实际的。 然而，通过将具体问题批量化为类似的主题，并准备涵盖大量问题要求的故事，我们可以将准备的故事数量减少到3-5个左右。
+正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，为那里的每一个行为问题准备具体的答案是不切实际的。 然而，通过将具体问题批量化为类似的主题，并准备涵盖大量问题要求的故事，我们可以将准备的故事数量减少到 3-5 个左右。
 
 这些是似乎反复出现的主题：
 
--   接收和管理反馈信息。
--   对挑战和扩展目标的心态。
--   持续学习
+- 接收和管理反馈信息。
+- 对挑战和扩展目标的心态。
+- 持续学习
 
 ## 建议的答案框架
 
-一如既往，[STAR法则](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 是我们推荐的最简单、最有效的框架，用于构造你的故事。
+一如既往，[STAR 法则](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 是我们推荐的最简单、最有效的框架，用于构造你的故事。
 
 以下是我们为每个已确定的主题推荐的方法，你可以用这些方法构建你的故事：
 
@@ -69,15 +69,15 @@ description: 学习如何回答关于成长心态的行为问题，针对前端/
 
 ### 持续学习
 
-一个好的答案是结合一致的时间表和对学习的努力，以及如何积极主动地将学习应用于工作。 例如：“我了解了X，因为我在做Y。 这影响了我在工作中处理Z问题的方式，因为这使我意识到W和V”。
+一个好的答案是结合一致的时间表和对学习的努力，以及如何积极主动地将学习应用于工作。 例如：“我了解了 X，因为我在做 Y。 这影响了我在工作中处理 Z 问题的方式，因为这使我意识到 W 和 V”。
 
 以下几点是你可以围绕技术学习构建答案的关键想法；但是，你仍然应该加入你实际参与过的活动、通讯或社区的具体例子，以展示你紧跟潮流的意愿。
 
 1.  关注涵盖前端技术和技技巧最新发展的相关博客、新闻通讯和播客。 给出一些例子（你确实关注了的）以及他们提供的内容或技术。
     1.  推特影响者
-        1.  [Dan Abramov](https://twitter.com/dan_abramov) — Redux的共同创造者，React核心团队。
-        2.  [Evan You](https://twitter.com/youyuxi) — Vue.js和Vite的创建者。
-        3.  [Rich Harris](https://twitter.com/Rich_Harris) — Svelte和Rollup的创作者。
+        1.  [Dan Abramov](https://twitter.com/dan_abramov) — Redux 的共同创造者，React 核心团队。
+        2.  [Evan You](https://twitter.com/youyuxi) — Vue.js 和 Vite 的创建者。
+        3.  [Rich Harris](https://twitter.com/Rich_Harris) — Svelte 和 Rollup 的创作者。
         4.  [Kent C. Dodds](https://twitter.com/kentcdodds) — Popular React 生态系统课程创建者。
         5.  [Josh W. Comeau](https://twitter.com/JoshWComeau) — 流行前端课程创建者。
     2.  博客和杂志
@@ -91,7 +91,7 @@ description: 学习如何回答关于成长心态的行为问题，针对前端/
         3.  [The Changelog](https://changelog.com/podcast)
 2.  参加技术会议和聚会，学习新的发展，建立网络，并获得最新工具和技术的实践经验。
 3.  使用最新技术和技巧实验和构建项目。 这可能需要自行构建小型项目或帮助开源项目。
-4.  通过参与在线论坛，关注相关的Twitter账户和标签，以及加入当地的用户组或聚会，与更广泛的前端开发社区保持联系。
+4.  通过参与在线论坛，关注相关的 Twitter 账户和标签，以及加入当地的用户组或聚会，与更广泛的前端开发社区保持联系。
 
 ## 问题和答案
 
@@ -99,31 +99,31 @@ description: 学习如何回答关于成长心态的行为问题，针对前端/
 
 > 过去两年来我一直在一家大型科技公司工作，该公司将外部和内部技术混合用于我们的前端堆栈。 因为我们有一个巨大的代码库和既定的做事方法，所以我们往往不会经常升级库和改变我们的技术选择。 工作一年后，我才意识到，我在自己的岗位上太舒服了，因为我已经完全夯实了代码基础，在过去一年里没有学到任何新东西。 就在那时，我决定我必须积极主动地学习，以保持我的技能的敏锐性和相关性。
 >
-> 前端生态系统发展得非常快，有一个笑话说每天都有新的JavaScript库出现。 值得庆幸的是，与2015/2016年新一波前端工具首次出现时相比，现在的生态系统更加稳定。 为了让自己保持更新而不受JavaScript疲劳之苦， 我每个月都会花一个周末浏览前端新闻通讯，如“React中的这个星期”和“JavaScript周刊”，并阅读工程博客。 如果我看到有趣的东西或与我的工作有关，我会通过尝试小的例子和在我公司的代码库中建立小的原型来深入研究它们。 例如，我最近发现了React Query，它是React的一个数据获取库，使用声明式范式来获取数据，并试图将其纳入我的工作中。 我最近还发现了tRPC，一个在客户端和服务器边界之间执行类型安全的库，这是一个给我们带来一些错误的问题。
+> 前端生态系统发展得非常快，有一个笑话说每天都有新的 JavaScript 库出现。 值得庆幸的是，与 2015/2016 年新一波前端工具首次出现时相比，现在的生态系统更加稳定。 为了让自己保持更新而不受 JavaScript 疲劳之苦， 我每个月都会花一个周末浏览前端新闻通讯，如“React 中的这个星期”和“JavaScript 周刊”，并阅读工程博客。 如果我看到有趣的东西或与我的工作有关，我会通过尝试小的例子和在我公司的代码库中建立小的原型来深入研究它们。 例如，我最近发现了 React Query，它是 React 的一个数据获取库，使用声明式范式来获取数据，并试图将其纳入我的工作中。 我最近还发现了 tRPC，一个在客户端和服务器边界之间执行类型安全的库，这是一个给我们带来一些错误的问题。
 >
-> 为了使学习过程更加有趣和协作，我在公司内创建了一个前端社交俱乐部，创建了一个新的 Slack 频道，并邀请了一些志同道合的同事加入。 任何人都可以在那里分享他们认为有趣的前端新闻并讨论前端技术。 它的反响相当好，目前有30多人在这个频道，几乎每天都有活动。 这项举措的一个副作用是，人们也开始就他们在工作中面临的前端问题提出问题。 我们创建了另一个Slack渠道，让人们在前端问题上获得帮助。 反馈迄今确实是正面的！
+> 为了使学习过程更加有趣和协作，我在公司内创建了一个前端社交俱乐部，创建了一个新的 Slack 频道，并邀请了一些志同道合的同事加入。 任何人都可以在那里分享他们认为有趣的前端新闻并讨论前端技术。 它的反响相当好，目前有 30 多人在这个频道，几乎每天都有活动。 这项举措的一个副作用是，人们也开始就他们在工作中面临的前端问题提出问题。 我们创建了另一个 Slack 渠道，让人们在前端问题上获得帮助。 反馈迄今确实是正面的！
 
 这个答案以一种微妙的方式使用了 STAR 技术，并展示了面试官希望在候选人身上看到的许多品质：
 
--   **激情**：热衷于学习更多关于前端领域的知识。
--   **成长**：确定了缺乏成长将是一个问题。
--   **倡议**：对缺乏增长的问题采取了行动。
--   **问题解决**：想出解决缺乏成长的方法，并付诸行动。
--   **建立友情**：为了一个共同的目标，召集志同道合的人。
--   **帮助提升他人**：创建Slack频道，分享知识和支持他人。
+- **激情**：热衷于学习更多关于前端领域的知识。
+- **成长**：确定了缺乏成长将是一个问题。
+- **倡议**：对缺乏增长的问题采取了行动。
+- **问题解决**：想出解决缺乏成长的方法，并付诸行动。
+- **建立友情**：为了一个共同的目标，召集志同道合的人。
+- **帮助提升他人**：创建 Slack 频道，分享知识和支持他人。
 
 ### 你能提供一个例子说明你不得不适应一个新的技术环境或框架？
 
-> 当我在2019年加入现在的公司时，我刚从大学毕业，对公司使用的前端堆栈没有经验，他们的前端堆栈使用React、Apollo、Styled Components、TypeScript，后端使用Django + GraphQL。 在大学时，我主要使用Vue.js进行前端开发，因为它是web开发课上教授的JavaScript框架的首选，之前没有使用过GraphQL。
+> 当我在 2019 年加入现在的公司时，我刚从大学毕业，对公司使用的前端堆栈没有经验，他们的前端堆栈使用 React、Apollo、Styled Components、TypeScript，后端使用 Django + GraphQL。 在大学时，我主要使用 Vue.js 进行前端开发，因为它是 web 开发课上教授的 JavaScript 框架的首选，之前没有使用过 GraphQL。
 >
-> 一开始，这对我来说绝对是一个巨大的学习曲线，我真的害怕由于对技术栈的不熟悉而表现不佳。 值得庆幸的是，我有一个导师，他在技术堆栈方面给了我很多指导，并提出了一些入职任务，这些任务逐渐变得越来越难。 我第一次花了几天时间阅读技术的文档网站，并试用他们网站上的例子。 我特意去了解这些库所解决的问题，以及它们是如何比现有技术更好的，因为我认为了解这些对充分欣赏库和使用正确的工具进行正确的工作是很重要的。 我还寻找了一些将Vue.js与React相比较的资源，因为它们非常类似，但有一些差异。 这有助于我更快地了解React(虽然完全掌握React钩子还是花了我一些时间)。 当我在晚上或周末有时间时，我会探索使用这些新技术建立小项目，也会使用Gatsby重建我的个人博客（因为它同时使用React和GraphQL）。
+> 一开始，这对我来说绝对是一个巨大的学习曲线，我真的害怕由于对技术栈的不熟悉而表现不佳。 值得庆幸的是，我有一个导师，他在技术堆栈方面给了我很多指导，并提出了一些入职任务，这些任务逐渐变得越来越难。 我第一次花了几天时间阅读技术的文档网站，并试用他们网站上的例子。 我特意去了解这些库所解决的问题，以及它们是如何比现有技术更好的，因为我认为了解这些对充分欣赏库和使用正确的工具进行正确的工作是很重要的。 我还寻找了一些将 Vue.js 与 React 相比较的资源，因为它们非常类似，但有一些差异。 这有助于我更快地了解 React(虽然完全掌握 React 钩子还是花了我一些时间)。 当我在晚上或周末有时间时，我会探索使用这些新技术建立小项目，也会使用 Gatsby 重建我的个人博客（因为它同时使用 React 和 GraphQL）。
 >
 > 在两个月内，我觉得自己学到了很多东西，对大部分的代码库都很熟悉。 我可以在没有导师指导的情况下建立端到端的功能。 为了帮助未来可能面临同样入职挑战的新员工，我在我们的内部维基中记下了我的学习成果，以及学习该主题的最佳资源链接。 我的经理对这一举措感到惊讶，并为此表扬了我。 今天，它是我们官方工程入职资源的一部分，我每隔一段时间就会更新它。 一些新加入者还感谢我我在维基上分享的知识，并使他们的入职过程更加顺利。
 
 对答案的分析：
 
--   **可辅导的**：遵从导师的指导/建议。
--   **问题解决**：想出了一些方法来帮助他们更快地上岗。
--   **主动性**：主动启动维基。
--   **同理心**：看到其他人可能面临同样的问题并启动了 wiki。
--   **帮助提升他人**：新加入者从维基中受益。
+- **可辅导的**：遵从导师的指导/建议。
+- **问题解决**：想出了一些方法来帮助他们更快地上岗。
+- **主动性**：主动启动维基。
+- **同理心**：看到其他人可能面临同样的问题并启动了 wiki。
+- **帮助提升他人**：新加入者从维基中受益。
diff --git a/packages/behavioral-interview-guidebook/contents/overview/pt-BR.mdx b/packages/behavioral-interview-guidebook/contents/overview/pt-BR.mdx
index 307713f40..fde647b09 100644
--- a/packages/behavioral-interview-guidebook/contents/overview/pt-BR.mdx
+++ b/packages/behavioral-interview-guidebook/contents/overview/pt-BR.mdx
@@ -37,8 +37,8 @@ As classificações devem ser feitas levando em consideração a complexidade da
 
 No final da entrevista, eles conciliam todas as classificações e feedback qualitativo para decidir:
 
--   Se devem aprovar ou reprovar o candidato
--   Se aprovado, qual nível o candidato deve receber
+- Se devem aprovar ou reprovar o candidato
+- Se aprovado, qual nível o candidato deve receber
 
 A implicação disso é que normalmente podemos esperar que as entrevistas comportamentais em grandes empresas de tecnologia tenham alguma estrutura, já que os entrevistadores tentarão fazer pelo menos uma pergunta de cada categoria para avaliar os candidatos.
 
@@ -56,43 +56,43 @@ Portanto, os candidatos também devem se preparar com um entendimento sólido da
 
 Aqui estão as categorias comuns de avaliação e critérios com base em nossa experiência na realização de entrevistas comportamentais para engenheiros de software em grandes empresas de tecnologia:
 
-#### 1.  Colaboração
+#### 1. Colaboração
 
--   Lidando com desacordos
--   Trabalhando em equipe
--   Trabalhando com personalidades e habilidades diversas
--   Transmitindo ideias complexas de forma simples
--   Dando feedback construtivo
--   Escuta ativa
+- Lidando com desacordos
+- Trabalhando em equipe
+- Trabalhando com personalidades e habilidades diversas
+- Transmitindo ideias complexas de forma simples
+- Dando feedback construtivo
+- Escuta ativa
 
-#### 2.  Alcançando Resultados e Resolução de Problemas
+#### 2. Alcançando Resultados e Resolução de Problemas
 
--   Mentalidade orientada para impacto
-    -   Proatividade para avançar apesar de obstáculos ou bloqueios
-    -   Influenciando os outros a cumprir os objetivos
-    -   Equilibrando análise com ação decisiva
--   Identificando as melhores soluções e executando-as
-    -   Identificando os problemas corretos
-    -   Identificando os objetivos mais críticos
-    -   Recursos e mentalidade orientada por dados
-    -   Criatividade e inovação
-    -   Identificando compensações (trade-offs) e soluções sustentáveis
-    -   Medindo resultados, iterando e seguindo adiante
+- Mentalidade orientada para impacto
+  - Proatividade para avançar apesar de obstáculos ou bloqueios
+  - Influenciando os outros a cumprir os objetivos
+  - Equilibrando análise com ação decisiva
+- Identificando as melhores soluções e executando-as
+  - Identificando os problemas corretos
+  - Identificando os objetivos mais críticos
+  - Recursos e mentalidade orientada por dados
+  - Criatividade e inovação
+  - Identificando compensações (trade-offs) e soluções sustentáveis
+  - Medindo resultados, iterando e seguindo adiante
 
-#### 3.  Mentalidade de Crescimento
+#### 3. Mentalidade de Crescimento
 
--   Ter autoconsciência de pontos fortes e áreas de desenvolvimento
--   Solicitando ativamente feedback de outras pessoas e criando ciclos de feedback
--   Aceitando bem o feedback e contratempos, vendo-os como oportunidades
--   Assume responsabilidade pessoal por falhas
--   Refletindo, modelando melhores práticas e aplicando lições a novas situações
--   Motivado(a) ao definir e trabalhar em direção a metas desafiadoras
+- Ter autoconsciência de pontos fortes e áreas de desenvolvimento
+- Solicitando ativamente feedback de outras pessoas e criando ciclos de feedback
+- Aceitando bem o feedback e contratempos, vendo-os como oportunidades
+- Assume responsabilidade pessoal por falhas
+- Refletindo, modelando melhores práticas e aplicando lições a novas situações
+- Motivado(a) ao definir e trabalhar em direção a metas desafiadoras
 
-#### 4.  Adaptabilidade e flexibilidade
+#### 4. Adaptabilidade e flexibilidade
 
 -
--   Mantendo a calma e o foco, servindo como uma presença estável para os outros
--   Flexível e rápido para se adaptar a situações inesperadas
+- Mantendo a calma e o foco, servindo como uma presença estável para os outros
+- Flexível e rápido para se adaptar a situações inesperadas
 
 ### Expectativas Típicas de Nivelamento em Entrevistas Comportamentais
 
@@ -102,41 +102,41 @@ Compreenda os comportamentos esperados para os níveis de engenharia comumente d
 
 #### Engenheiro de Software Júnior (L3)
 
--   Takes direction from managers and/or senior members of the team.
--   Executa tarefas bem definidas sem precisar de muita orientação.
--   Principalmente aprimora suas próprias habilidades e conhecimentos.
+- Takes direction from managers and/or senior members of the team.
+- Executa tarefas bem definidas sem precisar de muita orientação.
+- Principalmente aprimora suas próprias habilidades e conhecimentos.
 
 #### Engenheiro de Software (L4)
 
--   Compreende o propósito do projeto e ajuda a alcançar os objetivos da equipe.
--   Divide projetos maiores (geralmente trabalhos de recursos) que lhes são atribuídos em tarefas menores para execução oportuna.
--   Equilibra adequadamente entre delegar tarefas e executar tarefas por conta própria.
--   Aprimora suas próprias habilidades enquanto possivelmente orienta membros mais juniores, estagiários ou novas contratações.
--   Colabora de forma interfuncional com orientação de membros mais sênior da equipe.
+- Compreende o propósito do projeto e ajuda a alcançar os objetivos da equipe.
+- Divide projetos maiores (geralmente trabalhos de recursos) que lhes são atribuídos em tarefas menores para execução oportuna.
+- Equilibra adequadamente entre delegar tarefas e executar tarefas por conta própria.
+- Aprimora suas próprias habilidades enquanto possivelmente orienta membros mais juniores, estagiários ou novas contratações.
+- Colabora de forma interfuncional com orientação de membros mais sênior da equipe.
 
 #### Engenheiro de Software Sênior (L5)
 
--   Lidera o desenvolvimento em tarefas e projetos complexos dentro da equipe.
-    -   Identifica soluções bem planejadas para projetos ambíguos de grande escopo
-    -   Divide a solução em projetos menores e delega alguns deles aos membros da equipe.
--   Procura de forma proativa novas ideias e direções para construir o produto de maneira mais eficaz.
--   Orienta vários membros juniores da equipe e os ajuda a melhorar, sendo um modelo a seguir.
--   Trabalha de forma independente de maneira interfuncional e conduz discussões complexas e ambíguas.
+- Lidera o desenvolvimento em tarefas e projetos complexos dentro da equipe.
+  - Identifica soluções bem planejadas para projetos ambíguos de grande escopo
+  - Divide a solução em projetos menores e delega alguns deles aos membros da equipe.
+- Procura de forma proativa novas ideias e direções para construir o produto de maneira mais eficaz.
+- Orienta vários membros juniores da equipe e os ajuda a melhorar, sendo um modelo a seguir.
+- Trabalha de forma independente de maneira interfuncional e conduz discussões complexas e ambíguas.
 
 #### Engenheiro de Software Sênior (Nível 6)
 
--   Compreende os objetivos de negócios e aconselha gestores e líderes da organização para alcançar esses objetivos.
--   Lidera ou exerce grande influência na direção de uma equipe de engenheiros.
--   Demonstra expertise no domínio e é admirado por outros engenheiros.
--   Realiza um planejamento claro e de longo prazo entre equipes/dentro da organização e busca consenso.
--   Orienta líderes de tecnologia e membros juniores da equipe.
--   Trabalha em projetos que exigem interações com engenheiros e parceiros multifuncionais em várias equipes.
+- Compreende os objetivos de negócios e aconselha gestores e líderes da organização para alcançar esses objetivos.
+- Lidera ou exerce grande influência na direção de uma equipe de engenheiros.
+- Demonstra expertise no domínio e é admirado por outros engenheiros.
+- Realiza um planejamento claro e de longo prazo entre equipes/dentro da organização e busca consenso.
+- Orienta líderes de tecnologia e membros juniores da equipe.
+- Trabalha em projetos que exigem interações com engenheiros e parceiros multifuncionais em várias equipes.
 
 #### Engenheiro de Software Sênior de Nível 7 (L7) e além
 
--   Define metas de negócios/engenharia em toda a organização/empresa e as alcança.
--   Influencia ou lidera os roteiros de produtos e engenharia dentro da organização/empresa.
--   Lidera o desenvolvimento e entrega de soluções para áreas altamente complexas e ambíguas.
+- Define metas de negócios/engenharia em toda a organização/empresa e as alcança.
+- Influencia ou lidera os roteiros de produtos e engenharia dentro da organização/empresa.
+- Lidera o desenvolvimento e entrega de soluções para áreas altamente complexas e ambíguas.
 
 ## Estratégia de Preparação Recomendada
 
@@ -151,10 +151,10 @@ Há bastante variação em relação às perguntas que podem ser feitas. Embora
 3.  ["Por que fazer parte desta equipe ou empresa?"](/behavioral-interview-guidebook/why-work-here)
 4.  ["Você tem alguma pergunta para mim?"](/behavioral-interview-guidebook/questions-to-ask)
 5.  "Me conte sobre uma situação em que..." (categorizado abaixo dos temas)
-    -   [Roteamento de resultados e resolução de problemas](/behavioral-interview-guidebook/problem-solving)
-    -   [Collaboration](/behavioral-interview-guidebook/colaboração)
-    -   [mentalidade de crescimento](/behavioral-interview-guidebook/growth-mindset)
-    -   Adaptabilidade e flexibilidade
+    - [Roteamento de resultados e resolução de problemas](/behavioral-interview-guidebook/problem-solving)
+    - [Collaboration](/behavioral-interview-guidebook/colaboração)
+    - [mentalidade de crescimento](/behavioral-interview-guidebook/growth-mindset)
+    - Adaptabilidade e flexibilidade
 
 ### Prepare algumas boas histórias gerais com base em temas comuns
 
@@ -162,26 +162,26 @@ A estratégia geral para lidar com a grande variedade de perguntas "Me conte sob
 
 Aqui estão algumas dicas para selecionar e preparar boas experiências de projetos como histórias:
 
--   Verifique em relação aos critérios de avaliação acima e tente escolher experiências amplas que possam ser usadas para abordar diversos critérios. Em seguida, liste brevemente os pontos-chave de como você demonstrou comportamentos que atenderam aos traços necessários.
--   Escolha experiências que demonstrem suas expectativas de nível. Por exemplo, se você está se candidatando a uma posição de Engenheiro de Software Sênior, certifique-se de que suas experiências demonstrem sua influência na direção de equipes inteiras.
--   Evite reutilizar as mesmas histórias com muita frequência durante a mesma rodada de entrevistas. Os entrevistadores costumam discutir o desempenho do candidato juntos, portanto, o uso excessivo da mesma história pode parecer repetitivo e indicar uma falta de variedade em sua experiência.
--   Como mencionado anteriormente, os entrevistadores tendem a priorizar perguntas de acompanhamento para compreender a verdadeira psicologia, motivações e entendimento do candidato. Para cada história, prepare um entendimento sólido das vantagens e desvantagens de cada modo alternativo de ação, e reflita sobre suas motivações intrínsecas.
+- Verifique em relação aos critérios de avaliação acima e tente escolher experiências amplas que possam ser usadas para abordar diversos critérios. Em seguida, liste brevemente os pontos-chave de como você demonstrou comportamentos que atenderam aos traços necessários.
+- Escolha experiências que demonstrem suas expectativas de nível. Por exemplo, se você está se candidatando a uma posição de Engenheiro de Software Sênior, certifique-se de que suas experiências demonstrem sua influência na direção de equipes inteiras.
+- Evite reutilizar as mesmas histórias com muita frequência durante a mesma rodada de entrevistas. Os entrevistadores costumam discutir o desempenho do candidato juntos, portanto, o uso excessivo da mesma história pode parecer repetitivo e indicar uma falta de variedade em sua experiência.
+- Como mencionado anteriormente, os entrevistadores tendem a priorizar perguntas de acompanhamento para compreender a verdadeira psicologia, motivações e entendimento do candidato. Para cada história, prepare um entendimento sólido das vantagens e desvantagens de cada modo alternativo de ação, e reflita sobre suas motivações intrínsecas.
 
 ### Estruture suas respostas iniciais com o framework STAR
 
 Após ter preparado uma história que você possa usar, é importante estruturá-la adequadamente ao responder a perguntas específicas. Um requisito pelo qual os entrevistadores são sempre orientados a observar é a capacidade real do candidato de se comunicar durante a entrevista (em oposição ao que eles afirmam), que é avaliada da seguinte forma:
 
--   Processo de pensamento bem organizado e fácil de seguir
--   Boa intuição sobre quais detalhes devem ser elaborados e quais devem ser mantidos simples
--   Deixa os outros claros sobre o propósito e ações
--   Demonstra escuta ativa
+- Processo de pensamento bem organizado e fácil de seguir
+- Boa intuição sobre quais detalhes devem ser elaborados e quais devem ser mantidos simples
+- Deixa os outros claros sobre o propósito e ações
+- Demonstra escuta ativa
 
 Para alcançar o que foi mencionado acima, é necessário estruturar bem suas respostas para garantir que sejam concisas e diretas, com duração inferior a 3 minutos. Uma diretriz aproximada que você pode usar é um framework como STAR (Situação, Tarefa, Ação, Resultado):
 
--   **Situação**: Apresente detalhes básicos do cenário, apenas o suficiente para compreender o desafio em que você estava. (Não gaste muito tempo nisso)
--   **Tarefa**: O que você precisava alcançar ou fazer no cenário? (Não gaste muito tempo nisso)
--   **Ação**: O que você fez? É aqui que você demonstra os traços necessários com base na abordagem que adotou para resolver o desafio ou a situação.
--   **Resultados**: Qual foi o resultado de suas ações?
+- **Situação**: Apresente detalhes básicos do cenário, apenas o suficiente para compreender o desafio em que você estava. (Não gaste muito tempo nisso)
+- **Tarefa**: O que você precisava alcançar ou fazer no cenário? (Não gaste muito tempo nisso)
+- **Ação**: O que você fez? É aqui que você demonstra os traços necessários com base na abordagem que adotou para resolver o desafio ou a situação.
+- **Resultados**: Qual foi o resultado de suas ações?
 
 Aqui está um exemplo de aplicação do STAR para responder a uma pergunta de entrevista comportamental: "Me conte sobre uma vez em que você teve que gerenciar múltiplas prioridades conflitantes e como você lidou com isso":
 
@@ -195,11 +195,11 @@ Conforme reconheci que não era possível realizar todas elas com boa qualidade
 
 #### Ação
 
--   O que fiz foi organizar uma reunião rápida com todos os principais interessados em produtos e engenharia para co-priorizar e atribuir os recursos adequados para apoiar esse projeto.
--   Listei as funcionalidades solicitadas por cada equipe e trabalhei com todos os interessados relevantes para identificar a contribuição de cada funcionalidade para os objetivos de negócios, ao mesmo tempo em que fiz uma estimativa aproximada do esforço de engenharia necessário para cada uma.
--   Isso nos ajudou a despriorizar as funcionalidades que demandavam um esforço de engenharia muito alto, mas contribuíam pouco para os objetivos.
--   Para projetos que não eram realisticamente possíveis de serem concluídos dentro dos prazos, conseguimos negociar por mais recursos de engenharia para delegar o trabalho dessas funcionalidades.
--   Após isso, para garantir que meus próprios prazos fossem cumpridos, dividi as funcionalidades em tarefas menores e as planejei em marcos diários e semanais, revisando meu progresso regularmente com a equipe.
+- O que fiz foi organizar uma reunião rápida com todos os principais interessados em produtos e engenharia para co-priorizar e atribuir os recursos adequados para apoiar esse projeto.
+- Listei as funcionalidades solicitadas por cada equipe e trabalhei com todos os interessados relevantes para identificar a contribuição de cada funcionalidade para os objetivos de negócios, ao mesmo tempo em que fiz uma estimativa aproximada do esforço de engenharia necessário para cada uma.
+- Isso nos ajudou a despriorizar as funcionalidades que demandavam um esforço de engenharia muito alto, mas contribuíam pouco para os objetivos.
+- Para projetos que não eram realisticamente possíveis de serem concluídos dentro dos prazos, conseguimos negociar por mais recursos de engenharia para delegar o trabalho dessas funcionalidades.
+- Após isso, para garantir que meus próprios prazos fossem cumpridos, dividi as funcionalidades em tarefas menores e as planejei em marcos diários e semanais, revisando meu progresso regularmente com a equipe.
 
 #### Resultado
 
@@ -223,9 +223,9 @@ Uma entrevista comportamental geralmente acontece após. Candidatos que passaram
 
 Compreensivelmente, como entrevistador, você geralmente tentaria separar:
 
--   Esse candidato será um **baixo desempenho**? por exemplo, frequentemente perde prazos, não é responsável, não tem motivação, entra em conflitos frequentes com os outros, comunica-se mal e não aceita bem o feedback. Eles estão mentindo ou exagerando em seu currículo?
--   O candidato será um **superastro, colega motivado**? por exemplo, comunica-se bem, é engenhoso e independente na resolução de problemas, sabe gerenciar partes interessadas, é proativo e trabalha arduamente para implementar novas iniciativas que impulsionem a equipe.
--   O candidato será **fácil de gerenciar**? por exemplo, aceita bem o feedback, é simpático, sociável e não causa problemas.
+- Esse candidato será um **baixo desempenho**? por exemplo, frequentemente perde prazos, não é responsável, não tem motivação, entra em conflitos frequentes com os outros, comunica-se mal e não aceita bem o feedback. Eles estão mentindo ou exagerando em seu currículo?
+- O candidato será um **superastro, colega motivado**? por exemplo, comunica-se bem, é engenhoso e independente na resolução de problemas, sabe gerenciar partes interessadas, é proativo e trabalha arduamente para implementar novas iniciativas que impulsionem a equipe.
+- O candidato será **fácil de gerenciar**? por exemplo, aceita bem o feedback, é simpático, sociável e não causa problemas.
 
 Se um candidato simplesmente recitasse respostas ou parecesse impassível e desinteressado, você o contrataria para sua equipe? Provavelmente não. Para os entrevistadores, é tão importante ver você como sua verdadeira e natural personalidade quanto é saber se seu processo de pensamento está alinhado com os objetivos deles.
 
diff --git a/packages/behavioral-interview-guidebook/contents/overview/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/overview/zh-CN.mdx
index 0686a235e..089adfad9 100644
--- a/packages/behavioral-interview-guidebook/contents/overview/zh-CN.mdx
+++ b/packages/behavioral-interview-guidebook/contents/overview/zh-CN.mdx
@@ -7,10 +7,8 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 然而，准备行为面试时面临的一些常见挑战有：
 
-1.  如何准备面试的各种问题？
-    由于面试官可以问任何他们想要问的问题，因此准备任何行为问题都是不可能的。 但是，我们可以将常见的问题分类为几个主题，并采用方法论来解决它们。
-2.  如何展现自己的"适应性"？
-    许多候选人在面试时都难以让自己显得可爱，并与面试官取得联系。 我们将根据我们的经验提供一些应对策略。
+1.  如何准备面试的各种问题？由于面试官可以问任何他们想要问的问题，因此准备任何行为问题都是不可能的。 但是，我们可以将常见的问题分类为几个主题，并采用方法论来解决它们。
+2.  如何展现自己的"适应性"？许多候选人在面试时都难以让自己显得可爱，并与面试官取得联系。 我们将根据我们的经验提供一些应对策略。
 
 本文将介绍：
 
@@ -31,7 +29,7 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 ### 面试官的角度
 
-行为面试官通常需要对几个广泛的类别，如合作、积极性等进行评分。 对于每个评估类别，他们会提供有关好评或差评的标准。 评级通常采用5分评级尺度，例如非常好/好/达标/差/非常差之一。
+行为面试官通常需要对几个广泛的类别，如合作、积极性等进行评分。 对于每个评估类别，他们会提供有关好评或差评的标准。 评级通常采用 5 分评级尺度，例如非常好/好/达标/差/非常差之一。
 
 除此之外，面试官还可以标记是否没有足够的信息来做出判断，或者是否没有时间问及特定的信号。
 
@@ -39,8 +37,8 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 在面试结束后，面试官需要协调所有评分和定性反馈，以决定：
 
--   是否通过或不通过候选人
--   如果通过，候选人应该获得什么级别
+- 是否通过或不通过候选人
+- 如果通过，候选人应该获得什么级别
 
 以上的影响是我们通常可以期望大型科技公司的行为面试有一定的结构性，因为面试官会尝试询问至少一个类别的问题来评估候选人。
 
@@ -58,87 +56,87 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 以下是我们在大型科技公司为软件工程师开展行为面试时的常见评估类别和标准：
 
-#### 1.  合作
+#### 1. 合作
 
--   处理分歧
--   团队合作
--   处理各种个性和技能的人
--   以简单的方式传达复杂的思想
--   给予建设性反馈
--   积极倾听
+- 处理分歧
+- 团队合作
+- 处理各种个性和技能的人
+- 以简单的方式传达复杂的思想
+- 给予建设性反馈
+- 积极倾听
 
-#### 2.  实现结果和解决问题
+#### 2. 实现结果和解决问题
 
--   影响力导向的心态
-    -   在遇到障碍或路障时积极推进进展
-    -   影响他人实现目标
-    -   在分析和果断行动之间平衡
--   辨别最佳解决方案并付诸实施
-    -   辨别正确的问题
-    -   辨别最关键的目标
-    -   具备资源节约的思维和数据驱动的心态
-    -   创意和创新
-    -   辨别权衡和可持续的解决方案
-    -   量化结果，迭代并跟进
+- 影响力导向的心态
+  - 在遇到障碍或路障时积极推进进展
+  - 影响他人实现目标
+  - 在分析和果断行动之间平衡
+- 辨别最佳解决方案并付诸实施
+  - 辨别正确的问题
+  - 辨别最关键的目标
+  - 具备资源节约的思维和数据驱动的心态
+  - 创意和创新
+  - 辨别权衡和可持续的解决方案
+  - 量化结果，迭代并跟进
 
-#### 3.  成长心态
+#### 3. 成长心态
 
--   自我意识和发展领域
--   积极征求来自他人的反馈并建立反馈循环
--   良好地接受反馈和挫折，将其视为机会
--   对失败承担个人责任
--   反思，模拟最佳实践并将经验应用于新情境
--   通过设置和努力追求具有挑战性的目标而充满活力
+- 自我意识和发展领域
+- 积极征求来自他人的反馈并建立反馈循环
+- 良好地接受反馈和挫折，将其视为机会
+- 对失败承担个人责任
+- 反思，模拟最佳实践并将经验应用于新情境
+- 通过设置和努力追求具有挑战性的目标而充满活力
 
-#### 4.  适应能力和灵活性
+#### 4. 适应能力和灵活性
 
--   在不确定性中表现出色
--   保持冷静和专注，为他人提供稳定的存在
--   灵活并迅速适应意外情况
+- 在不确定性中表现出色
+- 保持冷静和专注，为他人提供稳定的存在
+- 灵活并迅速适应意外情况
 
 ### 典型的行为面试职级期望
 
-行为面试是一种面试格式，面试官可以根据求职者讲述的故事、其回答和制定的决策来评估其成熟度，从初级软件工程师到极其高级的职位不等。 工作经验的年限并不一定等同于特定的职级，因为有些人比其他人成熟得更快。 通常，职级的指导意见是考虑到工作经验的年限和职级期望而制定的。 下面提到的职级是基于谷歌和Facebook的职级，其中L3相当于初级软件工程师/应届毕业生。
+行为面试是一种面试格式，面试官可以根据求职者讲述的故事、其回答和制定的决策来评估其成熟度，从初级软件工程师到极其高级的职位不等。 工作经验的年限并不一定等同于特定的职级，因为有些人比其他人成熟得更快。 通常，职级的指导意见是考虑到工作经验的年限和职级期望而制定的。 下面提到的职级是基于谷歌和 Facebook 的职级，其中 L3 相当于初级软件工程师/应届毕业生。
 
 了解通常定义的工程师职级的预期行为，并精心设计您的回答，确保它们与您当前的职级或您所针对的职级相匹配。
 
 #### 初级软件工程师（L3）
 
--   从经理和/或团队高级成员那里接受指导。
--   在没有太多指导的情况下执行明确定义的任务。
--   主要改进自己的技能和技艺。
+- 从经理和/或团队高级成员那里接受指导。
+- 在没有太多指导的情况下执行明确定义的任务。
+- 主要改进自己的技能和技艺。
 
 #### 软件工程师（L4）
 
--   理解项目目的并帮助实现团队的目标。
--   将分配给他们的较大项目（通常是特性工作）拆分成较小的任务以便及时执行。
--   适当平衡委派任务和自己执行任务。
--   在可能指导更初级的成员、实习生或新员工时提升他们自己的技能。
--   在高级团队成员的指导下开展跨职能合作。
+- 理解项目目的并帮助实现团队的目标。
+- 将分配给他们的较大项目（通常是特性工作）拆分成较小的任务以便及时执行。
+- 适当平衡委派任务和自己执行任务。
+- 在可能指导更初级的成员、实习生或新员工时提升他们自己的技能。
+- 在高级团队成员的指导下开展跨职能合作。
 
 #### 高级软件工程师（L5）
 
--   在团队内领导复杂任务和项目的开发。
-    -   辨别经过深思熟虑的对于范围较大的模糊项目的解决方案
-    -   将解决方案拆分成较小的项目并将其中的一些委派给团队成员。
--   积极寻求新的想法和方向，以更好地构建产品。
--   指导多个团队成员并作为榜样帮助他们提高。
--   独立开展跨职能合作并推动复杂、模糊的讨论。
+- 在团队内领导复杂任务和项目的开发。
+  - 辨别经过深思熟虑的对于范围较大的模糊项目的解决方案
+  - 将解决方案拆分成较小的项目并将其中的一些委派给团队成员。
+- 积极寻求新的想法和方向，以更好地构建产品。
+- 指导多个团队成员并作为榜样帮助他们提高。
+- 独立开展跨职能合作并推动复杂、模糊的讨论。
 
 #### 高级职员软件工程师（L6）
 
--   理解业务目标并建议经理和组织领导实现目标。
--   领导一队工程师的方向。
--   展示领域专业知识，受到其他工程师的钦佩。
--   在团队/组织内开展清晰的长期规划并推动一致。
--   指导技术组长和团队的初级成员。
--   开展需要与多个团队的工程师和跨职能合作伙伴互动的项目。
+- 理解业务目标并建议经理和组织领导实现目标。
+- 领导一队工程师的方向。
+- 展示领域专业知识，受到其他工程师的钦佩。
+- 在团队/组织内开展清晰的长期规划并推动一致。
+- 指导技术组长和团队的初级成员。
+- 开展需要与多个团队的工程师和跨职能合作伙伴互动的项目。
 
 #### 高级职员软件工程师（L7）及以上
 
--   拥有组织/全公司业务/工程目标并实现这些目标。
--   在组织/公司内影响或领导产品和工程路线图。
--   在高度复杂和模糊的领域领导解决方案开发和交付。
+- 拥有组织/全公司业务/工程目标并实现这些目标。
+- 在组织/公司内影响或领导产品和工程路线图。
+- 在高度复杂和模糊的领域领导解决方案开发和交付。
 
 ## 推荐的准备策略
 
@@ -146,46 +144,46 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 除了这些问题，我们还可以期望一般但常见的问题，例如“介绍一下自己”或“为什么加入这个公司”。
 
-问题的问法非常多样化。 虽然为所有问题做准备很耗时间，但我们可以将最常见的80％问题分类主题，并按照以下指南系统地解决这些问题：
+问题的问法非常多样化。 虽然为所有问题做准备很耗时间，但我们可以将最常见的 80％问题分类主题，并按照以下指南系统地解决这些问题：
 
 1.  [“介绍一下你自己…”] \(/behavioral-interview-guidebook/self-introduction)
 2.  “让我来看一下你的简历…”
 3.  [“为什么加入这个团队或公司？”] \(/behavioral-interview-guidebook/why-work-here)
 4.  [“你有什么问题要问我的吗？”] \(/behavioral-interview-guidebook/questions-to-ask)
 5.  "当你...... 的时候告诉我" （分类为以下主题）
-    -   [实现目标和解决问题](/behavioral-interview-guidebook/problem-solving)
-    -   [合作](/behavioral-interview-guidebook/collaboration)
-    -   [成长心态](/behavioral-interview-guidebook/growth-mindset)
-    -   应变能力和灵活性
+    - [实现目标和解决问题](/behavioral-interview-guidebook/problem-solving)
+    - [合作](/behavioral-interview-guidebook/collaboration)
+    - [成长心态](/behavioral-interview-guidebook/growth-mindset)
+    - 应变能力和灵活性
 
 ### 根据常见主题准备几个好故事
 
-面对不同的“当你...... 的时候告诉我”类型的问题，解决问题的一般策略是准备3-5个通用的，经过深思熟虑的故事，可以用来解答多个需要的特征。 例如，与他人广泛合作的经验可以展示您的沟通，团队合作，领导能力，冲突管理等特点。 每当面试官问你一个问题时，你可以运用已准备好的故事并根据特定问题进行适当的调整。
+面对不同的“当你...... 的时候告诉我”类型的问题，解决问题的一般策略是准备 3-5 个通用的，经过深思熟虑的故事，可以用来解答多个需要的特征。 例如，与他人广泛合作的经验可以展示您的沟通，团队合作，领导能力，冲突管理等特点。 每当面试官问你一个问题时，你可以运用已准备好的故事并根据特定问题进行适当的调整。
 
 以下是一些选择和准备好项目经验作为故事的技巧：
 
--   根据上面的评估标准检查并尝试选择广泛经验，可以用来解决多个标准。 然后，写下简短的要点，说明您展示了满足所需特质的行为。
--   选择展示您期望水平的经验。 例如，如果您正在申请高级软件工程师职位，则确保您的经验展示了您对整个团队方向的影响力。
--   不要在同一轮面试中重复使用相同的故事。 面试官往往会讨论候选人的表现，因此过度使用相同的故事可能会被视为重复和经验不足。
--   如上所述，面试官往往优先考虑后续问题以了解候选人真正的心理，动机和理解。 对于每个故事，请准备对每种替代操作的优缺点有一个扎实的理解，并反思您的内在动机。
+- 根据上面的评估标准检查并尝试选择广泛经验，可以用来解决多个标准。 然后，写下简短的要点，说明您展示了满足所需特质的行为。
+- 选择展示您期望水平的经验。 例如，如果您正在申请高级软件工程师职位，则确保您的经验展示了您对整个团队方向的影响力。
+- 不要在同一轮面试中重复使用相同的故事。 面试官往往会讨论候选人的表现，因此过度使用相同的故事可能会被视为重复和经验不足。
+- 如上所述，面试官往往优先考虑后续问题以了解候选人真正的心理，动机和理解。 对于每个故事，请准备对每种替代操作的优缺点有一个扎实的理解，并反思您的内在动机。
 
-### 用STAR框架结构初始答案
+### 用 STAR 框架结构初始答案
 
 准备一个您可以使用的故事后，在回答具体问题时需要将其结构化。 面试官总是被要求关注候选人在面试期间实际的沟通能力（而不是他们声称的能力），评估方式如下：
 
--   有条理，易于理解的思维过程
--   对哪些细节应该详细说明以及哪些细节应该保持简单有良好的直觉
--   使他人对目的和行动清晰
--   展示积极倾听
+- 有条理，易于理解的思维过程
+- 对哪些细节应该详细说明以及哪些细节应该保持简单有良好的直觉
+- 使他人对目的和行动清晰
+- 展示积极倾听
 
-为了实现以上目标，您需要在回答问题时将答案结构化，确保它简洁明了，时间不超过3分钟。 您可以使用例如STAR的框架作为大致指导：
+为了实现以上目标，您需要在回答问题时将答案结构化，确保它简洁明了，时间不超过 3 分钟。 您可以使用例如 STAR 的框架作为大致指导：
 
--   **情境**：介绍场景的基本细节，足够了解您所面临的挑战。 （不要花太多时间）
--   **任务**：您在情况下需要实现或完成什么？ （不要花太多时间）
--   **行动**：您采取了什么行动？ 这是您根据解决挑战或情况所采取的方法展示所需特质的地方。
--   **结果**：您的行动的结果是什么？
+- **情境**：介绍场景的基本细节，足够了解您所面临的挑战。 （不要花太多时间）
+- **任务**：您在情况下需要实现或完成什么？ （不要花太多时间）
+- **行动**：您采取了什么行动？ 这是您根据解决挑战或情况所采取的方法展示所需特质的地方。
+- **结果**：您的行动的结果是什么？
 
-以下是将STAR应用于回答行为面试问题“告诉我一个您曾经不得不管理多个相互冲突的优先事项以及您如何处理它”的示例：
+以下是将 STAR 应用于回答行为面试问题“告诉我一个您曾经不得不管理多个相互冲突的优先事项以及您如何处理它”的示例：
 
 #### 情境
 
@@ -197,11 +195,11 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 #### 行动
 
--   我所做的是与所有相关的产品和工程相关人员安排快速会议，共同确定优先顺序并分配适当的资源以支持此项目。
--   我列出了每个团队提出的特点，并与所有相关人员一起工作，以确定每个特点对业务目标的贡献，同时对每个特点的工程工作量进行大致估计。
--   这帮助我们将工程工作量很高但对目标贡献很小的特征降低优先级。
--   对于在时限内无法实现的项目，我们能够协商获得更多的工程资源并将这些特征工作委托给其他特定人员。
--   之后，为确保自己的时间表得以实现，我将我的特点分解为较小的任务，并计划每天和每周的里程碑，与团队定期审查我的进展。
+- 我所做的是与所有相关的产品和工程相关人员安排快速会议，共同确定优先顺序并分配适当的资源以支持此项目。
+- 我列出了每个团队提出的特点，并与所有相关人员一起工作，以确定每个特点对业务目标的贡献，同时对每个特点的工程工作量进行大致估计。
+- 这帮助我们将工程工作量很高但对目标贡献很小的特征降低优先级。
+- 对于在时限内无法实现的项目，我们能够协商获得更多的工程资源并将这些特征工作委托给其他特定人员。
+- 之后，为确保自己的时间表得以实现，我将我的特点分解为较小的任务，并计划每天和每周的里程碑，与团队定期审查我的进展。
 
 #### 结果
 
@@ -213,7 +211,7 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 ### 熟能生巧
 
-在准备好您的故事并大致了解STAR之后，请使用准备好的故事和STAR格式回答我们列出的50个常见行为面试问题。 与其记忆答案，最好每次都练习口头回答。 这样可以使您巩固故事并熟悉STAR。
+在准备好您的故事并大致了解 STAR 之后，请使用准备好的故事和 STAR 格式回答我们列出的 50 个常见行为面试问题。 与其记忆答案，最好每次都练习口头回答。 这样可以使您巩固故事并熟悉 STAR。
 
 ## 行为面试中如何表现最佳
 
@@ -225,9 +223,9 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 可以理解的是，作为面试官，您应该尝试筛选出：
 
--   此候选人是否会成为**较差的表现者**？ 例如经常错过截止日期，不负责任，缺乏动力，经常与他人发生冲突，沟通不良，不能很好地接受反馈。 他们是否在简历中撒谎或夸大其词？
--   候选人是否会成为**超级明星，有动力的队友**？ 例如善于沟通，有解决问题的资源和独立性，能够管理利益相关者，积极并努力实施新举措以推动团队前进。
--   候选人是否会**容易管理**？ 例如，他很好地接受反馈，受人欢迎，善于社交，不会给您带来问题。
+- 此候选人是否会成为**较差的表现者**？ 例如经常错过截止日期，不负责任，缺乏动力，经常与他人发生冲突，沟通不良，不能很好地接受反馈。 他们是否在简历中撒谎或夸大其词？
+- 候选人是否会成为**超级明星，有动力的队友**？ 例如善于沟通，有解决问题的资源和独立性，能够管理利益相关者，积极并努力实施新举措以推动团队前进。
+- 候选人是否会**容易管理**？ 例如，他很好地接受反馈，受人欢迎，善于社交，不会给您带来问题。
 
 如果一个候选人将答案背诵回去或看起来冷漠而无动于衷，您会雇用他们加入您的团队吗？ 可能不会。 对于面试官来说，与您的真正原始自我见面，能够了解到您的思维过程是否与他们的目标相一致同等重要。
 
diff --git a/packages/behavioral-interview-guidebook/contents/problem-solving/pt-BR.mdx b/packages/behavioral-interview-guidebook/contents/problem-solving/pt-BR.mdx
index ca9ba5c0e..c831b9abe 100644
--- a/packages/behavioral-interview-guidebook/contents/problem-solving/pt-BR.mdx
+++ b/packages/behavioral-interview-guidebook/contents/problem-solving/pt-BR.mdx
@@ -19,17 +19,17 @@ A resolução de problemas e o foco em resultados são agrupados em uma única c
 
 Ao avaliar candidatos nesta categoria, os entrevistadores geralmente consideram os seguintes critérios:
 
--   Identificar as melhores soluções e executá-las
-    -   Identificando os problemas corretos
-    -   Identificando os objetivos mais críticos
-    -   Recursos e mentalidade orientada por dados
-    -   Criatividade e inovação
-    -   Identificando compensações (trade-offs) e soluções sustentáveis
-    -   Medindo resultados, iterando e seguindo adiante
--   Mentalidade orientada para impacto
-    -   Proatividade para avançar apesar de obstáculos ou bloqueios
-    -   Influenciando os outros a cumprir os objetivos
-    -   Equilibrando análise com ação decisiva
+- Identificar as melhores soluções e executá-las
+  - Identificando os problemas corretos
+  - Identificando os objetivos mais críticos
+  - Recursos e mentalidade orientada por dados
+  - Criatividade e inovação
+  - Identificando compensações (trade-offs) e soluções sustentáveis
+  - Medindo resultados, iterando e seguindo adiante
+- Mentalidade orientada para impacto
+  - Proatividade para avançar apesar de obstáculos ou bloqueios
+  - Influenciando os outros a cumprir os objetivos
+  - Equilibrando análise com ação decisiva
 
 ## Abstraindo possíveis perguntas em temas comuns
 
@@ -37,10 +37,10 @@ As mentioned in our [behavioral interview preparation overview](/behavioral-inte
 
 Há simplesmente muitos tipos de perguntas comportamentais sobre resolução de problemas e foco em resultados que podem ser feitas, como:
 
--   Você pode me contar sobre uma vez em que precisou usar dados para orientar decisões de engenharia\*\*?
--   Você pode fornecer um exemplo de uma vez em que teve que **solucionar problemas e corrigir um problema complexo** em um projeto?
--   Você pode descrever um momento em que **solucionou criativamente** um problema de engenharia ou alcançou uma melhoria significativa em métricas?
--   Você pode descrever um momento em que teve que tomar uma decisão importante de engenharia e como decidiu **entre as compensações**?
+- Você pode me contar sobre uma vez em que precisou usar dados para orientar decisões de engenharia\*\*?
+- Você pode fornecer um exemplo de uma vez em que teve que **solucionar problemas e corrigir um problema complexo** em um projeto?
+- Você pode descrever um momento em que **solucionou criativamente** um problema de engenharia ou alcançou uma melhoria significativa em métricas?
+- Você pode descrever um momento em que teve que tomar uma decisão importante de engenharia e como decidiu **entre as compensações**?
 
 No entanto, quando olhamos para 80% das perguntas desta categoria, geralmente pedem como um problema foi resolvido ou um traço específico necessário para a resolução eficaz de problemas, como criatividade, uso de dados ou avaliação de compensações. A origem do problema ou objetivo, bem como se o candidato foi resiliente diante de obstáculos, também pode ser inferida nas respostas a essas perguntas.
 
@@ -63,121 +63,121 @@ Portanto, você só precisa garantir que pelo menos 1 dos seus [relatos ou proje
 
 Recomendamos que você escolha histórias de resolução de problemas que também possam servir para obter sinais sobre o seguinte
 
--   **Proatividade/iniciativa**: você tomou a iniciativa de investigar o problema, reunir informações e resolvê-lo.
--   **Liderança**: você liderou o processo de resolução de problemas
--   **Trabalho em equipe**: você teve que trabalhar como parte de uma equipe para resolver o problema
+- **Proatividade/iniciativa**: você tomou a iniciativa de investigar o problema, reunir informações e resolvê-lo.
+- **Liderança**: você liderou o processo de resolução de problemas
+- **Trabalho em equipe**: você teve que trabalhar como parte de uma equipe para resolver o problema
 
 ### Exemplo de história
 
 #### Situação
 
--   Eu era o líder técnico de um site de comércio eletrônico que vendia produtos de luxo. O site foi construído como uma aplicação de página única usando Angular 1.5.
--   Nos últimos anos, o produto estava mostrando sinais de obsolescência - a experiência dos desenvolvedores não era ótima e o desempenho do site estava ruim. A velocidade de carregamento inicial era superior a 3 segundos e a taxa de conversão estava em torno de 0,8%.
+- Eu era o líder técnico de um site de comércio eletrônico que vendia produtos de luxo. O site foi construído como uma aplicação de página única usando Angular 1.5.
+- Nos últimos anos, o produto estava mostrando sinais de obsolescência - a experiência dos desenvolvedores não era ótima e o desempenho do site estava ruim. A velocidade de carregamento inicial era superior a 3 segundos e a taxa de conversão estava em torno de 0,8%.
 
 #### Tarefa
 
--   Fui encarregado de melhorar o desempenho e a conversão do site.
+- Fui encarregado de melhorar o desempenho e a conversão do site.
 
 #### Ação
 
 \*\*1. Identificação de problemas
 
--   A conversão está relacionada ao desempenho e à experiência do usuário (UX).
--   O desempenho do site tem apresentado um declínio gradual nos últimos anos.
--   A experiência do usuário (UX) não foi revisada há um tempo. Aprimorar a redação
+- A conversão está relacionada ao desempenho e à experiência do usuário (UX).
+- O desempenho do site tem apresentado um declínio gradual nos últimos anos.
+- A experiência do usuário (UX) não foi revisada há um tempo. Aprimorar a redação
 
 \*\*2. Coleta de informações
 
--   Analisamos a natureza dos erros no último ano, categorizamos de acordo com suas causas raiz para identificar pontos críticos e áreas problemáticas principais.
--   Coletamos feedback da equipe sobre áreas de melhoria.
--   Sessão de brainstorming com a equipe para pensar em maneiras de melhorar.
--   Para melhorar, em primeiro lugar, precisamos saber como estamos indo.
-    -   Verificamos novamente se nosso rastreamento de desempenho e conversão estava funcionando corretamente.
-    -   Começamos a rastrear novas métricas do Lighthouse e Core Web Vitals.
--   Trabalhamos com cientistas de dados para criar painéis de controle para desempenho e conversão e obtivemos algumas informações:
-    -   Identificamos que alguns países tinham taxas de conversão mais baixas.
-    -   Os usuários de dispositivos móveis tinham taxas de conversão mais baixas em comparação com os usuários de desktop.
--   Trabalhamos com designers de UX e pesquisadores de UX para identificar problemas na experiência de compra de ponta a ponta no site.
-    -   Os elementos de interface do usuário estavam muito espaçados e exigiam muito rolamento, o que afetou a taxa de rejeição, pois alguns usuários não se preocuparam em rolar.
+- Analisamos a natureza dos erros no último ano, categorizamos de acordo com suas causas raiz para identificar pontos críticos e áreas problemáticas principais.
+- Coletamos feedback da equipe sobre áreas de melhoria.
+- Sessão de brainstorming com a equipe para pensar em maneiras de melhorar.
+- Para melhorar, em primeiro lugar, precisamos saber como estamos indo.
+  - Verificamos novamente se nosso rastreamento de desempenho e conversão estava funcionando corretamente.
+  - Começamos a rastrear novas métricas do Lighthouse e Core Web Vitals.
+- Trabalhamos com cientistas de dados para criar painéis de controle para desempenho e conversão e obtivemos algumas informações:
+  - Identificamos que alguns países tinham taxas de conversão mais baixas.
+  - Os usuários de dispositivos móveis tinham taxas de conversão mais baixas em comparação com os usuários de desktop.
+- Trabalhamos com designers de UX e pesquisadores de UX para identificar problemas na experiência de compra de ponta a ponta no site.
+  - Os elementos de interface do usuário estavam muito espaçados e exigiam muito rolamento, o que afetou a taxa de rejeição, pois alguns usuários não se preocuparam em rolar.
 
 \*\*3. Brainstorming de soluções
 
--   Interface do Usuário\*\*: O processamento no lado do servidor é crucial para o desempenho e os benefícios de SEO. Fizemos escolhas visando um bom desempenho.
-    -   **Visão**: Migrar do Angular.js 1.6 para o Angular 13 foi um empreendimento enorme, e não houve economia significativa de tempo ao permanecer no Angular.
-    -   **Next.js**: Alguns de nossos desenvolvedores têm experiência com React e o Next.js como um metaframework para construir aplicativos SSR estava rapidamente ganhando popularidade. Nós realmente desejávamos a carga inicial rápida e o comportamento semelhante a um aplicativo que o Next.js proporcionava.
-    -   **Svelte**: O modelo reativo era atraente e o modelo de programação era mais fácil de entender em comparação com o React, no entanto, o ecossistema é pequeno e não existem tantas bibliotecas disponíveis.
--   **Estilização**: A folha de estilos estava ficando muito inchada devido a muitas classes sendo adicionadas ao longo dos anos e sendo difíceis de remover.
-    -   **Tailwind CSS**: O Tailwind CSS estava entre as metodologias CSS mais populares, e sua abordagem de CSS atômico se adapta bem a bases de código em crescimento.
-    -   **Styled Components**: O CSS-in-JS era algo que também estávamos considerando, mas o Styled Components estava vinculado ao React e a injeção de estilo em tempo de execução prejudicava o desempenho.
--   **Mentalidade centrada no desempenho**. **Leitura de muitos estudos de caso de desempenho em web.dev e blogs de engenharia de outras empresas de comércio eletrônico, reunindo uma lista de técnicas e processos importantes de desempenho:**:
-    -   \*\*Estabelecer um orçamento de desempenho para cada página (abaixo de 300 Kb).
-    -   Executar testes de desempenho antes de mesclar os Pull Requests.
-    -   Carregamento sob demanda de componentes não críticos. Carregar conteúdos abaixo da dobra sob demanda.
-    -   Dividir o JavaScript no nível da página em vez de um único pacote (gerenciado pelo Next.js).
-    -   Utilizar o formato WebP para imagens.
-    -   Hospedar imagens em uma CDN. Carregamento adaptativo de imagens para que dispositivos móveis carreguem uma imagem menor. Consolidar bibliotecas JavaScript duplicadas (data-fns e moment.js), mudar para lodash-es e remover todos os usos do jQuery. Analisar os dados para identificar recursos menos usados e removê-los do código, reduzindo o tamanho do JavaScript nas páginas de detalhes do produto em mais de 200 KB.
--   Otimização de Mecanismos de Busca (SEO)
-    -   Utilizei ferramentas de SEO como o Ahrefs para monitorar continuamente o SEO.
-    -   Trabalhei com a equipe de marketing para garantir que o texto de marketing incluísse palavras-chave importantes, conforme mostrado pelo Ahrefs.
-    -   Ajustei os URLs das páginas para incluir palavras-chave de SEO
--   Melhorias de Experiência do Usuário
-    -   Experiência de checkout em uma única página, em vez de um checkout de duas páginas, para reduzir a necessidade de cliques.
-    -   Reduzi a altura de muitos elementos da interface do usuário.
-    -   Corrigi o botão de checkout para que não fosse despercebido.
--   Melhorias no pagamento
-    -   Analisei o checkout da Stripe e implementei campos de endereço específicos para cada país.
-    -   Inicialmente, tínhamos apenas um método de pagamento disponível: cartão de crédito. Contei com a ajuda de cientistas de dados para avaliar a popularidade de novos métodos de pagamento e se valia a pena adicioná-los. Posteriormente, adicionamos os métodos de pagamento PayPal, Google Pay e Apple Pay também.
+- Interface do Usuário\*\*: O processamento no lado do servidor é crucial para o desempenho e os benefícios de SEO. Fizemos escolhas visando um bom desempenho.
+  - **Visão**: Migrar do Angular.js 1.6 para o Angular 13 foi um empreendimento enorme, e não houve economia significativa de tempo ao permanecer no Angular.
+  - **Next.js**: Alguns de nossos desenvolvedores têm experiência com React e o Next.js como um metaframework para construir aplicativos SSR estava rapidamente ganhando popularidade. Nós realmente desejávamos a carga inicial rápida e o comportamento semelhante a um aplicativo que o Next.js proporcionava.
+  - **Svelte**: O modelo reativo era atraente e o modelo de programação era mais fácil de entender em comparação com o React, no entanto, o ecossistema é pequeno e não existem tantas bibliotecas disponíveis.
+- **Estilização**: A folha de estilos estava ficando muito inchada devido a muitas classes sendo adicionadas ao longo dos anos e sendo difíceis de remover.
+  - **Tailwind CSS**: O Tailwind CSS estava entre as metodologias CSS mais populares, e sua abordagem de CSS atômico se adapta bem a bases de código em crescimento.
+  - **Styled Components**: O CSS-in-JS era algo que também estávamos considerando, mas o Styled Components estava vinculado ao React e a injeção de estilo em tempo de execução prejudicava o desempenho.
+- **Mentalidade centrada no desempenho**. **Leitura de muitos estudos de caso de desempenho em web.dev e blogs de engenharia de outras empresas de comércio eletrônico, reunindo uma lista de técnicas e processos importantes de desempenho:**:
+  - \*\*Estabelecer um orçamento de desempenho para cada página (abaixo de 300 Kb).
+  - Executar testes de desempenho antes de mesclar os Pull Requests.
+  - Carregamento sob demanda de componentes não críticos. Carregar conteúdos abaixo da dobra sob demanda.
+  - Dividir o JavaScript no nível da página em vez de um único pacote (gerenciado pelo Next.js).
+  - Utilizar o formato WebP para imagens.
+  - Hospedar imagens em uma CDN. Carregamento adaptativo de imagens para que dispositivos móveis carreguem uma imagem menor. Consolidar bibliotecas JavaScript duplicadas (data-fns e moment.js), mudar para lodash-es e remover todos os usos do jQuery. Analisar os dados para identificar recursos menos usados e removê-los do código, reduzindo o tamanho do JavaScript nas páginas de detalhes do produto em mais de 200 KB.
+- Otimização de Mecanismos de Busca (SEO)
+  - Utilizei ferramentas de SEO como o Ahrefs para monitorar continuamente o SEO.
+  - Trabalhei com a equipe de marketing para garantir que o texto de marketing incluísse palavras-chave importantes, conforme mostrado pelo Ahrefs.
+  - Ajustei os URLs das páginas para incluir palavras-chave de SEO
+- Melhorias de Experiência do Usuário
+  - Experiência de checkout em uma única página, em vez de um checkout de duas páginas, para reduzir a necessidade de cliques.
+  - Reduzi a altura de muitos elementos da interface do usuário.
+  - Corrigi o botão de checkout para que não fosse despercebido.
+- Melhorias no pagamento
+  - Analisei o checkout da Stripe e implementei campos de endereço específicos para cada país.
+  - Inicialmente, tínhamos apenas um método de pagamento disponível: cartão de crédito. Contei com a ajuda de cientistas de dados para avaliar a popularidade de novos métodos de pagamento e se valia a pena adicioná-los. Posteriormente, adicionamos os métodos de pagamento PayPal, Google Pay e Apple Pay também.
 
 **4. Avaliação da solução**
 
--   **Visualização e Renderização**: Escolhemos o Next.js porque ele é apoiado pela Vercel e tem a maior comunidade de todas. O React também é a biblioteca de UI mais popular e a mais fácil de encontrar empregos para contratação.
--   **Styling**: Tailwind porque é uma opção bastante confiável e preparada para o futuro.
+- **Visualização e Renderização**: Escolhemos o Next.js porque ele é apoiado pela Vercel e tem a maior comunidade de todas. O React também é a biblioteca de UI mais popular e a mais fácil de encontrar empregos para contratação.
+- **Styling**: Tailwind porque é uma opção bastante confiável e preparada para o futuro.
 
 **5. Monitoramento e ajustes**
 
--   Lançamos o novo site por meio de um teste A/B, monitorando o desempenho e as taxas de conversão ao longo de um período de 2 meses.
--   Países que antes tinham taxas de conversão mais baixas tiveram melhorias de quase 50% nas taxas de conversão.
+- Lançamos o novo site por meio de um teste A/B, monitorando o desempenho e as taxas de conversão ao longo de um período de 2 meses.
+- Países que antes tinham taxas de conversão mais baixas tiveram melhorias de quase 50% nas taxas de conversão.
 
 #### Resultado
 
--   A pontuação do Lighthouse melhorou para 92.
--   A velocidade de carregamento melhorou para 1.5 segundos
--   A conversão melhorou para 2.5%
--   A velocidade dos desenvolvedores melhorou na pesquisa recente e agora é mais fácil contratar pessoas para a equipe porque mais pessoas conhecem o React em relação a outros frameworks.
+- A pontuação do Lighthouse melhorou para 92.
+- A velocidade de carregamento melhorou para 1.5 segundos
+- A conversão melhorou para 2.5%
+- A velocidade dos desenvolvedores melhorou na pesquisa recente e agora é mais fácil contratar pessoas para a equipe porque mais pessoas conhecem o React em relação a outros frameworks.
 
 ## Possíveis Naturezas de Perguntas de Acompanhamento
 
 Conforme mencionado em nossa [visão geral de preparação para entrevistas comportamentais](/behavioral-interview-guidebook), os entrevistadores são incentivados a depender mais de perguntas de acompanhamento para realmente compreender o processo de pensamento e motivações do candidato, que geralmente se enquadram nestas categorias:
 
--   Por que você acha que tomou a ação de (inserir ação)?
--   Por que você não fez (inserir ação)?
--   Como você faria as coisas de forma diferente com o benefício da retrospectiva?
+- Por que você acha que tomou a ação de (inserir ação)?
+- Por que você não fez (inserir ação)?
+- Como você faria as coisas de forma diferente com o benefício da retrospectiva?
 
 Para perguntas sobre colaboração, os entrevistadores provavelmente farão perguntas para ajudá-los a entender um pouco mais sobre:
 
--   **A fonte da tarefa/problema/objetivo** (Nível de compreensão da proatividade e iniciativa):
-    -   O projeto ou a tarefa foi iniciada por você? E em que medida?
-    -   A ideia subjacente foi sua, ou apenas o plano de executá-la?
-    -   Como você obteve o apoio dos interessados para sequer trabalhar nisso?
--   **Função e Contribuição Real pelo Candidato**:
-    -   Havia uma equipe envolvida na resolução do problema ou na consecução do objetivo?
-    -   Quais ações foram iniciadas por iniciativa própria ou contribuídas unicamente por você, e o que os outros fizeram?
--   **Priorização do Problema ou Objetivo a Ser Alcançado**:
-    -   Havia uma razão pela qual este problema ou objetivo específico foi priorizado em relação a outros?
-    -   Havia outro problema ou objetivo raiz que deveria ter sido mais importante?
-    -   Esse problema não foi resolvido por outra equipe na empresa? Por que razão a solução teve de ser reinventada?
--   **Seleção de Métricas/Objetivos Adequados, e se Foram Medidos Após o Lançamento**:
-    -   Foi estabelecida alguma meta quantitativa ou qualitativa, e como elas foram decididas?
-    -   Como eles foram medidos após o lançamento e qual foi o resultado?
-    -   Se um problema foi resolvido, que medidas foram tomadas para garantir que o mesmo problema não ocorresse novamente?
--   **Utilizando Informações Suficientes para Tomar Decisões**:
-    -   Que tipos de pesquisa ou dados você utilizou para tomar decisões ou escolher um problema para resolver?
-    -   Quanto tempo você dedicou à pesquisa e coleta de informações?
-    -   Como você equilibrou entre a coleta de informações e o planejamento e a execução do plano?
--   **Escolhendo a solução certa**:
-    -   Que outras soluções foram consideradas e quais eram os prós e contras de cada uma?
-    -   Por que razão foi escolhida a solução final?
-    -   Quem apresentou a ideia original das soluções? Como foram derivadas?
+- **A fonte da tarefa/problema/objetivo** (Nível de compreensão da proatividade e iniciativa):
+  - O projeto ou a tarefa foi iniciada por você? E em que medida?
+  - A ideia subjacente foi sua, ou apenas o plano de executá-la?
+  - Como você obteve o apoio dos interessados para sequer trabalhar nisso?
+- **Função e Contribuição Real pelo Candidato**:
+  - Havia uma equipe envolvida na resolução do problema ou na consecução do objetivo?
+  - Quais ações foram iniciadas por iniciativa própria ou contribuídas unicamente por você, e o que os outros fizeram?
+- **Priorização do Problema ou Objetivo a Ser Alcançado**:
+  - Havia uma razão pela qual este problema ou objetivo específico foi priorizado em relação a outros?
+  - Havia outro problema ou objetivo raiz que deveria ter sido mais importante?
+  - Esse problema não foi resolvido por outra equipe na empresa? Por que razão a solução teve de ser reinventada?
+- **Seleção de Métricas/Objetivos Adequados, e se Foram Medidos Após o Lançamento**:
+  - Foi estabelecida alguma meta quantitativa ou qualitativa, e como elas foram decididas?
+  - Como eles foram medidos após o lançamento e qual foi o resultado?
+  - Se um problema foi resolvido, que medidas foram tomadas para garantir que o mesmo problema não ocorresse novamente?
+- **Utilizando Informações Suficientes para Tomar Decisões**:
+  - Que tipos de pesquisa ou dados você utilizou para tomar decisões ou escolher um problema para resolver?
+  - Quanto tempo você dedicou à pesquisa e coleta de informações?
+  - Como você equilibrou entre a coleta de informações e o planejamento e a execução do plano?
+- **Escolhendo a solução certa**:
+  - Que outras soluções foram consideradas e quais eram os prós e contras de cada uma?
+  - Por que razão foi escolhida a solução final?
+  - Quem apresentou a ideia original das soluções? Como foram derivadas?
 
 ## Exemplos de Perguntas e Respostas sobre Colaboração
 
@@ -185,7 +185,7 @@ Ajustando a história amostral acima para responder a perguntas específicas.
 
 {/* TODO: Gina */}
 
--   Você pode me contar sobre uma vez em que precisou usar dados para orientar decisões de engenharia?
--   Você pode fornecer um exemplo de uma vez em que teve que solucionar e corrigir um problema complexo em um projeto?
--   Você pode descrever um momento em que resolveu um problema de engenharia ou alcançou uma melhoria significativa nas métricas?
--   Você pode descrever uma vez em que teve que tomar uma decisão importante de engenharia e como decidiu entre as compensações (trade-offs)?
+- Você pode me contar sobre uma vez em que precisou usar dados para orientar decisões de engenharia?
+- Você pode fornecer um exemplo de uma vez em que teve que solucionar e corrigir um problema complexo em um projeto?
+- Você pode descrever um momento em que resolveu um problema de engenharia ou alcançou uma melhoria significativa nas métricas?
+- Você pode descrever uma vez em que teve que tomar uma decisão importante de engenharia e como decidiu entre as compensações (trade-offs)?
diff --git a/packages/behavioral-interview-guidebook/contents/problem-solving/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/problem-solving/zh-CN.mdx
index ece675b96..36d5ec080 100644
--- a/packages/behavioral-interview-guidebook/contents/problem-solving/zh-CN.mdx
+++ b/packages/behavioral-interview-guidebook/contents/problem-solving/zh-CN.mdx
@@ -3,7 +3,7 @@ title: 标题：回答“告诉我一个时间...”对于解决问题的技能
 description: 描述：学习如何回答有关前端/网络开发人员/软件工程师的解决问题技能和实现结果的行为问题。 参考示例答案。
 ---
 
-正如我们在[行为面试准备概述]中提到的，**解决问题和实现结果的驱动力**是8个主要问题类型之一。
+正如我们在[行为面试准备概述]中提到的，**解决问题和实现结果的驱动力**是 8 个主要问题类型之一。
 
 在本指南中，您将学习如何处理它们：
 
@@ -19,34 +19,34 @@ description: 描述：学习如何回答有关前端/网络开发人员/软件
 
 在这个类别下评估候选人时，面试官通常会关注以下标准：
 
--   确定最佳解决方案并执行它们
-    -   确定正确的问题
-    -   确定最关键的目标
-    -   资源能力和数据驱动思维方式
-    -   创造力和创新性
-    -   确定折衷和可持续的解决方案
-    -   测量结果，迭代和跟进
--   以结果为导向的思维方式
-    -   在面对障碍或路障时积极取得进展
-    -   影响他人实现目标
-    -   在决策行动中找到分析与果断平衡点
+- 确定最佳解决方案并执行它们
+  - 确定正确的问题
+  - 确定最关键的目标
+  - 资源能力和数据驱动思维方式
+  - 创造力和创新性
+  - 确定折衷和可持续的解决方案
+  - 测量结果，迭代和跟进
+- 以结果为导向的思维方式
+  - 在面对障碍或路障时积极取得进展
+  - 影响他人实现目标
+  - 在决策行动中找到分析与果断平衡点
 
 ## 将可能的问题抽象为常见主题
 
-正如我们在[行为面试准备概述]中提到的，为每个行为问题制定答案是不切实际的。 然而，通过将特定问题分批次到相似的主题中，并准备涵盖大量问题要求的故事，我们可以将要准备的故事数量减少到约3-5个故事。
+正如我们在[行为面试准备概述]中提到的，为每个行为问题制定答案是不切实际的。 然而，通过将特定问题分批次到相似的主题中，并准备涵盖大量问题要求的故事，我们可以将要准备的故事数量减少到约 3-5 个故事。
 
 在这个类别下有太多类型的解决问题和实现结果的行为问题，例如：
 
--   你能告诉我一次你必须使用数据来驱动工程决策的经历吗？
--   你可以提供一次你在项目中必须解决和修复复杂问题的例子吗？
--   你能描述一次你创造性地解决了工程问题或实现了有意义的指标改进的经验吗？
--   你能描述一次你必须做出重要的工程决策，以及你是如何在两者之间做出选择的吗？
+- 你能告诉我一次你必须使用数据来驱动工程决策的经历吗？
+- 你可以提供一次你在项目中必须解决和修复复杂问题的例子吗？
+- 你能描述一次你创造性地解决了工程问题或实现了有意义的指标改进的经验吗？
+- 你能描述一次你必须做出重要的工程决策，以及你是如何在两者之间做出选择的吗？
 
-然而，当我们查看此类别下80％的问题时，通常会要求解决问题的过程或有效解决问题所需的特定特征，例如创意性、使用数据或者权衡评估。 从这些问题的答案中也可以推断问题或目标的来源，以及候选人是否能够在面对障碍时保持弹性。
+然而，当我们查看此类别下 80％的问题时，通常会要求解决问题的过程或有效解决问题所需的特定特征，例如创意性、使用数据或者权衡评估。 从这些问题的答案中也可以推断问题或目标的来源，以及候选人是否能够在面对障碍时保持弹性。
 
 ## 建议的答案框架
 
-像往常一样，我们推荐使用STAR格式来构建故事，它是最简单和最有效的框架。
+像往常一样，我们推荐使用 STAR 格式来构建故事，它是最简单和最有效的框架。
 
 尽管问题可能很多，但我们可以通过考虑一个强大的解决问题过程来抽象出所有解决问题行为问题的要求：
 
@@ -63,121 +63,121 @@ description: 描述：学习如何回答有关前端/网络开发人员/软件
 
 我们还建议您选择可以通过以下方式获取信号的问题解决故事。
 
--   **积极性/主动性**：您已经采取主动措施解决问题，收集信息并解决问题。
--   **领导能力**：您带领了解决问题的过程。
--   **团队协作**：您必须作为团队的一员来解决问题。
+- **积极性/主动性**：您已经采取主动措施解决问题，收集信息并解决问题。
+- **领导能力**：您带领了解决问题的过程。
+- **团队协作**：您必须作为团队的一员来解决问题。
 
 ### 实例故事
 
 #### 情境
 
--   我是一家销售奢侈品的电商网站的技术主管。 该网站是一个Angular 1.5的单页面应用程序。
--   近年来，该产品显得有点老了——开发体验不佳，网站性能不佳。 初始加载速度超过3秒，转化率约为0.8％。
+- 我是一家销售奢侈品的电商网站的技术主管。 该网站是一个 Angular 1.5 的单页面应用程序。
+- 近年来，该产品显得有点老了——开发体验不佳，网站性能不佳。 初始加载速度超过 3 秒，转化率约为 0.8％。
 
 #### 任务
 
--   我的任务是改进网站的性能和转化率。
+- 我的任务是改进网站的性能和转化率。
 
 #### 行动
 
 **1. 问题识别**
 
--   转化率与性能和用户体验相关。
--   过去几年，网站性能逐渐下降。
--   用户体验值得检查。 [改进措辞]
+- 转化率与性能和用户体验相关。
+- 过去几年，网站性能逐渐下降。
+- 用户体验值得检查。 [改进措辞]
 
 **2. 信息收集**
 
--   查看过去一年中的错误性质，根据它们的根本原因对它们进行分类，以确定故障热点和主要问题区域。
--   收集来自团队的反馈，并确定改进的范围和重点。
--   与团队进行头脑风暴会议，以想出改进的方法。
--   为了改进，首先需要知道我们的表现如何。
-    -   确认我们的性能和转化跟踪是否正常工作。
-    -   开始从Lighthouse和Core Web Vitals跟踪新指标。
--   与数据科学家合作创建性能和转化的仪表板，并获得一些见解：
-    -   确定某些国家的转化率较低。
-    -   移动用户与桌面用户相比具有较低的转化率。
--   与UX设计师和UX研究人员合作，识别网站上的 end-to-end购物体验问题。
-    -   UI元素之间间隔太大，需要大量滚动，影响了跳出率，因为一些用户不愿滚动。
+- 查看过去一年中的错误性质，根据它们的根本原因对它们进行分类，以确定故障热点和主要问题区域。
+- 收集来自团队的反馈，并确定改进的范围和重点。
+- 与团队进行头脑风暴会议，以想出改进的方法。
+- 为了改进，首先需要知道我们的表现如何。
+  - 确认我们的性能和转化跟踪是否正常工作。
+  - 开始从 Lighthouse 和 Core Web Vitals 跟踪新指标。
+- 与数据科学家合作创建性能和转化的仪表板，并获得一些见解：
+  - 确定某些国家的转化率较低。
+  - 移动用户与桌面用户相比具有较低的转化率。
+- 与 UX 设计师和 UX 研究人员合作，识别网站上的 end-to-end 购物体验问题。
+  - UI 元素之间间隔太大，需要大量滚动，影响了跳出率，因为一些用户不愿滚动。
 
 **3. 解决方案头脑风暴**
 
--   **用户界面**：服务器端呈现对于其性能和SEO的好处至关重要。 做出良好选择。
-    -   **View**：从Angular.js 1.6迁移到Angular 13是一个巨大的任务，而停留在Angular上没有太大的时间节省效益。
-    -   **Next.js**：我们的一些开发人员具有使用React和Next.js作为用于构建SSR应用程序的元框架的经验，这种SSR应用程序的快速初始载入和应用程序行为非常有吸引力。 我们真的渴望Next.js提供的快速初始加载和类似应用程序的行为。
-    -   **Svelte**：响应模型很吸引人，并且相对于React的编程模型更容易理解。
--   **样式**：由于多年来添加了许多类并且难以删除，因此样式表变得非常臃肿。
-    -   **Tailwind CSS**：Tailwind CSS是最热门的CSS方法之一，其原子CSS方法可扩展适用于不断增长的代码库。
-    -   **Styled Components**：CSS in JS是我们也在考虑的东西，但Styled Components与React有关，并且运行时样式注入对性能不利。
--   **以性能为中心的思维方式**。 阅读了许多关于web.dev和其他电子商务公司的工程博客的性能案例研究，收集了一个重要的性能技术和流程列表：
-    -   设置每个页面的性能预算（低于300 kb）。
-    -   在合并拉取请求之前运行性能基准测试。
-    -   惰性加载非关键组件，惰性加载屏幕下方内容。
-    -   在页面级别上拆分JavaScript，而不是单独的包（由Next.js处理）。
-    -   对图片使用WebP格式。
-    -   将图片托管在CDN上，Adaptive加载图片，因此移动设备加载较小的图片，合并重复的JavaScript库（data-fns和moment.js），切换到lodash-es，删除了所有jQuery的用法-查看数据以识别不常用的功能并将其从产品详细信息页的代码中删除，JS大小减少了200个+ kb。
--   **搜索引擎优化（SEO）**
-    -   使用SEO工具（例如Ahrefs）持续监测SEO。
-    -   与营销团队合作，确保营销内容包含Ahrefs显示的重要关键字。
-    -   调整页面URL以包括SEO关键字
--   用户体验的改进
-    -   只需单击一个页面即可付款，而不是使用两个页面付款，从而减少了点击次数。
-    -   减小了许多UI元素的高度。
-    -   固定检查按钮，这样就不会错过。
--   付款方式改进
-    -   分析了Stripe结账，并实施了特定国家的地址栏。
-    -   最初只有一种可用的付款方式：信用卡。 得到了数据科学家的帮助，以评估新的支付方式是否受欢迎，以及它们是否值得添加。 我们后来还增加了PayPal、谷歌支付和苹果支付等支付方式。
+- **用户界面**：服务器端呈现对于其性能和 SEO 的好处至关重要。 做出良好选择。
+  - **View**：从 Angular.js 1.6 迁移到 Angular 13 是一个巨大的任务，而停留在 Angular 上没有太大的时间节省效益。
+  - **Next.js**：我们的一些开发人员具有使用 React 和 Next.js 作为用于构建 SSR 应用程序的元框架的经验，这种 SSR 应用程序的快速初始载入和应用程序行为非常有吸引力。 我们真的渴望 Next.js 提供的快速初始加载和类似应用程序的行为。
+  - **Svelte**：响应模型很吸引人，并且相对于 React 的编程模型更容易理解。
+- **样式**：由于多年来添加了许多类并且难以删除，因此样式表变得非常臃肿。
+  - **Tailwind CSS**：Tailwind CSS 是最热门的 CSS 方法之一，其原子 CSS 方法可扩展适用于不断增长的代码库。
+  - **Styled Components**：CSS in JS 是我们也在考虑的东西，但 Styled Components 与 React 有关，并且运行时样式注入对性能不利。
+- **以性能为中心的思维方式**。 阅读了许多关于 web.dev 和其他电子商务公司的工程博客的性能案例研究，收集了一个重要的性能技术和流程列表：
+  - 设置每个页面的性能预算（低于 300 kb）。
+  - 在合并拉取请求之前运行性能基准测试。
+  - 惰性加载非关键组件，惰性加载屏幕下方内容。
+  - 在页面级别上拆分 JavaScript，而不是单独的包（由 Next.js 处理）。
+  - 对图片使用 WebP 格式。
+  - 将图片托管在 CDN 上，Adaptive 加载图片，因此移动设备加载较小的图片，合并重复的 JavaScript 库（data-fns 和 moment.js），切换到 lodash-es，删除了所有 jQuery 的用法-查看数据以识别不常用的功能并将其从产品详细信息页的代码中删除，JS 大小减少了 200 个+ kb。
+- **搜索引擎优化（SEO）**
+  - 使用 SEO 工具（例如 Ahrefs）持续监测 SEO。
+  - 与营销团队合作，确保营销内容包含 Ahrefs 显示的重要关键字。
+  - 调整页面 URL 以包括 SEO 关键字
+- 用户体验的改进
+  - 只需单击一个页面即可付款，而不是使用两个页面付款，从而减少了点击次数。
+  - 减小了许多 UI 元素的高度。
+  - 固定检查按钮，这样就不会错过。
+- 付款方式改进
+  - 分析了 Stripe 结账，并实施了特定国家的地址栏。
+  - 最初只有一种可用的付款方式：信用卡。 得到了数据科学家的帮助，以评估新的支付方式是否受欢迎，以及它们是否值得添加。 我们后来还增加了 PayPal、谷歌支付和苹果支付等支付方式。
 
 **4. 解决方案评估**
 
--   **View和渲染**：选择Next.js，因为它由Vercel支持，拥有最大的社区。 React也是最流行的UI库，最容易为之招聘。
--   **样式**：Tailwind，因为它是相当可靠和未来可靠的选择。
+- **View 和渲染**：选择 Next.js，因为它由 Vercel 支持，拥有最大的社区。 React 也是最流行的 UI 库，最容易为之招聘。
+- **样式**：Tailwind，因为它是相当可靠和未来可靠的选择。
 
 **5. 监控和调整**
 
--   在2个月的时间内监控性能和转化率，并在A/B测试中推出新网站。
--   以前转换率较低的国家，其转换率提高了近50%。
+- 在 2 个月的时间内监控性能和转化率，并在 A/B 测试中推出新网站。
+- 以前转换率较低的国家，其转换率提高了近 50%。
 
 #### 结果
 
--   Lighthouse分数已提高到92。
--   加载速度提高至1.5秒
--   转化率提高至2.5％
--   在最近的调查中，开发人员的速度已经提高，现在更容易将更多人招聘到团队中，因为更多人了解React而不是其他框架。
+- Lighthouse 分数已提高到 92。
+- 加载速度提高至 1.5 秒
+- 转化率提高至 2.5％
+- 在最近的调查中，开发人员的速度已经提高，现在更容易将更多人招聘到团队中，因为更多人了解 React 而不是其他框架。
 
 ## 可能的后续问题的本质
 
 正如我们在[行为面试准备概述]中所提到的，面试官鼓励依靠后续问题更多地了解候选人的思考过程和动机，这些后续问题通常属于以下类别：
 
--   您认为您为什么会这样做？
--   你为什么不那样做？
--   如果换成后见之明，你会如何做事情？
+- 您认为您为什么会这样做？
+- 你为什么不那样做？
+- 如果换成后见之明，你会如何做事情？
 
 在解决问题或实现结果的问题上，面试官最有可能探究这样的问题，以帮助他们更好地了解候选人：
 
--   **任务/问题/目标的来源**（理解主动性和积极性的水平）：
-    -   项目或任务是否由您发起的？ 以及在什么程度上？
-    -   潜在的想法是来自你，还是只是执行的计划？
-    -   你是如何得到利益相关者的支持，甚至在这方面的工作？
--   **候选人的角色和实际贡献**：
-    -   是否涉及问题解决的团队？
-    -   哪些措施是由自己主动采取或仅由自己做出贡献的？
--   **优先考虑解决的问题或目标**：
-    -   是否有理由将特定的问题或目标视为优先解决或有限时间内必须解决，而其他问题或根本目标存在更重要？
-    -   这个问题或根本目标是否已被公司中的其他团队解决了？
-    -   这个问题不是已经由公司的另一个团队解决了吗？ 为什么要重新制定解决办法？
--   **选择适当的度量标准或目标，以及是否在发布后进行了测量**：
-    -   是否设置了定量或定性的目标，以及如何决定的？
-    -   它们是如何在发布后被测量的，结果如何？
-    -   如果问题已解决，那么将采取什么措施确保不再发生同样的问题？
--   **使用足够的信息驱动决策**：
-    -   您依赖哪些研究或数据来进行决策/选择要解决的问题？
-    -   您花费多少时间研究和收集信息？
-    -   您如何在收集信息/规划和执行计划之间保持平衡？
--   **选择正确的解决方案**：
-    -   考虑了哪些其他解决方案，各自的利弊如何？
-    -   为什么选择了最终的解决方案？
-    -   谁提出了解决方案的原始想法？ 他们是如何得出的？
+- **任务/问题/目标的来源**（理解主动性和积极性的水平）：
+  - 项目或任务是否由您发起的？ 以及在什么程度上？
+  - 潜在的想法是来自你，还是只是执行的计划？
+  - 你是如何得到利益相关者的支持，甚至在这方面的工作？
+- **候选人的角色和实际贡献**：
+  - 是否涉及问题解决的团队？
+  - 哪些措施是由自己主动采取或仅由自己做出贡献的？
+- **优先考虑解决的问题或目标**：
+  - 是否有理由将特定的问题或目标视为优先解决或有限时间内必须解决，而其他问题或根本目标存在更重要？
+  - 这个问题或根本目标是否已被公司中的其他团队解决了？
+  - 这个问题不是已经由公司的另一个团队解决了吗？ 为什么要重新制定解决办法？
+- **选择适当的度量标准或目标，以及是否在发布后进行了测量**：
+  - 是否设置了定量或定性的目标，以及如何决定的？
+  - 它们是如何在发布后被测量的，结果如何？
+  - 如果问题已解决，那么将采取什么措施确保不再发生同样的问题？
+- **使用足够的信息驱动决策**：
+  - 您依赖哪些研究或数据来进行决策/选择要解决的问题？
+  - 您花费多少时间研究和收集信息？
+  - 您如何在收集信息/规划和执行计划之间保持平衡？
+- **选择正确的解决方案**：
+  - 考虑了哪些其他解决方案，各自的利弊如何？
+  - 为什么选择了最终的解决方案？
+  - 谁提出了解决方案的原始想法？ 他们是如何得出的？
 
 ## 样例解决问题的问题和答案
 
@@ -185,7 +185,7 @@ description: 描述：学习如何回答有关前端/网络开发人员/软件
 
 {/* TODO: Gina */}
 
--   你能告诉我一次你必须使用数据来驱动工程决策的经历吗？
--   你可以提供一个你必须解决和修复复杂问题的项目的例子吗？
--   你能描述一下你是如何创意地解决工程问题或实现有意义的指标改进的吗？
--   你能描述一次你必须做出重要的工程决策，以及你是如何在两者之间做出选择的吗？
+- 你能告诉我一次你必须使用数据来驱动工程决策的经历吗？
+- 你可以提供一个你必须解决和修复复杂问题的项目的例子吗？
+- 你能描述一下你是如何创意地解决工程问题或实现有意义的指标改进的吗？
+- 你能描述一次你必须做出重要的工程决策，以及你是如何在两者之间做出选择的吗？
diff --git a/packages/behavioral-interview-guidebook/contents/questions-to-ask/pt-BR.mdx b/packages/behavioral-interview-guidebook/contents/questions-to-ask/pt-BR.mdx
index 453e76274..3a933c6a9 100644
--- a/packages/behavioral-interview-guidebook/contents/questions-to-ask/pt-BR.mdx
+++ b/packages/behavioral-interview-guidebook/contents/questions-to-ask/pt-BR.mdx
@@ -5,9 +5,9 @@ description: Aprenda as melhores perguntas a fazer no final de suas entrevistas
 
 Na ansiedade de garantir um emprego, alguns de nós podem esquecer que se juntar a uma equipe ruim pode ser pior do que esperar por uma boa oportunidade. Uma entrevista é, de fato, uma oportunidade inestimável para o candidato conversar com alguém que realmente trabalha na empresa e descobrir mais sobre as práticas lá. Alguns aspectos-chave que você deve avaliar sobre um emprego antes de aceitá-lo:
 
--   O trabalho será interessante para você?
--   Há espaço para o crescimento de carreira?
--   Os colegas de equipe/seu gerente são colaborativos e fáceis de trabalhar junto?
+- O trabalho será interessante para você?
+- Há espaço para o crescimento de carreira?
+- Os colegas de equipe/seu gerente são colaborativos e fáceis de trabalhar junto?
 
 Boas perguntas feitas no final da entrevista ajudam o candidato a alcançar dois objetivos - deixar uma boa impressão e ajudar o candidato a avaliar se a empresa é realmente adequada para ele.
 
@@ -117,26 +117,26 @@ Essa pergunta indiretamente esclarece a cultura da equipe em relação ao equil
 
 Nessas rodadas, é útil aproveitar a oportunidade para descobrir o estilo de gestão do seu gerente, o processo/critérios de avaliação de desempenho, bem como as expectativas dele/dela em relação à função (o que pode lhe dar uma ideia de como você pode se sair no trabalho)
 
--   Você pode me falar sobre o tipo de supervisão que você oferece?
--   Pensando nas pessoas que você viu fazendo este trabalho anteriormente, o que diferenciou aqueles que eram bons daqueles que eram realmente excelentes nisso?
--   O que você espera que esta pessoa realize nos primeiros seis meses e no primeiro ano de trabalho?
--   Quais foram as principais realizações da organização no último ano?
+- Você pode me falar sobre o tipo de supervisão que você oferece?
+- Pensando nas pessoas que você viu fazendo este trabalho anteriormente, o que diferenciou aqueles que eram bons daqueles que eram realmente excelentes nisso?
+- O que você espera que esta pessoa realize nos primeiros seis meses e no primeiro ano de trabalho?
+- Quais foram as principais realizações da organização no último ano?
 
 ## Rodadas com funções fora da equipe (que podem não ter conhecimento específico sobre as operações da equipe)
 
 ### Perguntas a serem feitas ao fundador
 
--   Quais são os objetivos atuais em que a empresa está focada e como esta equipe trabalha para apoiar o alcance desses objetivos?
--   Qual direção você vê esta empresa seguindo nos próximos anos?
--   Qual direção você vê esta empresa seguindo nos próximos anos?
+- Quais são os objetivos atuais em que a empresa está focada e como esta equipe trabalha para apoiar o alcance desses objetivos?
+- Qual direção você vê esta empresa seguindo nos próximos anos?
+- Qual direção você vê esta empresa seguindo nos próximos anos?
 
 ### Perguntas para fazer aos colaboradores da equipe
 
 É comum entrevistar com alguém com quem você pode não trabalhar diretamente. Nesses casos, é melhor lançar uma rede mais ampla e fazer perguntas sobre a política ou cultura geral da empresa. Você ainda pode perguntar a eles sobre sua equipe se eles forem colaboradores próximos.
 
--   Qual é um desafio que você ocasionalmente ou regularmente enfrenta em seu trabalho?
--   Você pode me falar sobre a equipe com a qual eu vou trabalhar?
--   Quais são as oportunidades de aprendizado e desenvolvimento profissional disponíveis na empresa?
+- Qual é um desafio que você ocasionalmente ou regularmente enfrenta em seu trabalho?
+- Você pode me falar sobre a equipe com a qual eu vou trabalhar?
+- Quais são as oportunidades de aprendizado e desenvolvimento profissional disponíveis na empresa?
 
 ## Perguntas para evitar
 
@@ -146,16 +146,16 @@ Aqui estão alguns exemplos do que não perguntar no final de uma entrevista:
 
 Comece a discutir salário apenas quando a equipe já estiver interessada em contratá-lo (ou seja, no final do processo), a menos que eles perguntem sobre suas expectativas salariais.
 
--   Qual é o salário inicial?
--   Você pode me falar sobre o plano de saúde da empresa?
--   Quais são as políticas de licença remunerada da empresa?
--   Se eu conseguir o emprego, quando posso tirar férias?
--   Com que frequência vocês concedem aumentos salariais?
--   Com que frequência vocês distribuem bônus?
--   Que tipo de vantagens e benefícios posso esperar?
+- Qual é o salário inicial?
+- Você pode me falar sobre o plano de saúde da empresa?
+- Quais são as políticas de licença remunerada da empresa?
+- Se eu conseguir o emprego, quando posso tirar férias?
+- Com que frequência vocês concedem aumentos salariais?
+- Com que frequência vocês distribuem bônus?
+- Que tipo de vantagens e benefícios posso esperar?
 
 ### Evite fazer perguntas que deveriam ser informações públicas
 
--   O que a empresa faz?
--   Onde estão localizados os escritórios da empresa?
--   Quem é o CEO da empresa?
+- O que a empresa faz?
+- Onde estão localizados os escritórios da empresa?
+- Quem é o CEO da empresa?
diff --git a/packages/behavioral-interview-guidebook/contents/questions-to-ask/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/questions-to-ask/zh-CN.mdx
index 38f3cefde..0df5c4171 100644
--- a/packages/behavioral-interview-guidebook/contents/questions-to-ask/zh-CN.mdx
+++ b/packages/behavioral-interview-guidebook/contents/questions-to-ask/zh-CN.mdx
@@ -5,9 +5,9 @@ description: 了解在前端开发/网站开发/软件工程面试中最好问
 
 在焦急地寻找工作时，我们中的一些人可能会忘记与一个糟糕的团队合作可能比等待好机会更糟糕。 实际上，面试是候选人与实际在公司工作的人交谈并了解更多关于那里的实践的宝贵机会。 在加入工作之前，您应该评估有关工作的几个关键方面：
 
--   工作对您是否有趣？
--   是否有职业发展的空间？
--   同事/您的经理是否合作并易于共同工作？
+- 工作对您是否有趣？
+- 是否有职业发展的空间？
+- 同事/您的经理是否合作并易于共同工作？
 
 面试结束时问好问题可以帮助候选人实现两个目标：
 
@@ -117,26 +117,26 @@ description: 了解在前端开发/网站开发/软件工程面试中最好问
 
 在这些轮次中，利用机会了解您的经理的管理风格，绩效审查过程/标准以及他/她对角色的期望（这可能让您对自己在工作中的表现有所了解）
 
--   “能告诉我您所提供的监督类型吗？”
--   “回想一下您之前看到的人，他们在这项工作中表现良好和不好之间有什么区别？”
--   “在他们的前六个月和第一年内，您希望这个人会取得什么成就？”
--   “过去一年，组织最大的成就是什么？”
+- “能告诉我您所提供的监督类型吗？”
+- “回想一下您之前看到的人，他们在这项工作中表现良好和不好之间有什么区别？”
+- “在他们的前六个月和第一年内，您希望这个人会取得什么成就？”
+- “过去一年，组织最大的成就是什么？”
 
 ## 与团队之外的角色轮次（可能不知道具体的团队运营）
 
 ### 向创始人提问
 
--   “公司当前专注于什么目标，团队如何支持实现这些目标？”
--   “您认为未来几年公司的走向是什么？”
--   “公司整体当前的关注重点是什么？”
+- “公司当前专注于什么目标，团队如何支持实现这些目标？”
+- “您认为未来几年公司的走向是什么？”
+- “公司整体当前的关注重点是什么？”
 
 ### 向团队的协作者提问
 
 通常情况下会与您没有直接工作的人进行面试。 在这些情况下，最好扩大范围，并询问有关一般公司政策或文化的问题。 如果他们是紧密合作伙伴，您仍然可以向他们询问有关您的团队的问题。
 
--   “您在工作中偶尔或经常面临的挑战是什么？”
--   “您能告诉我要和我一起工作的团队吗？”
--   “公司中有哪些学习和专业发展机会？”
+- “您在工作中偶尔或经常面临的挑战是什么？”
+- “您能告诉我要和我一起工作的团队吗？”
+- “公司中有哪些学习和专业发展机会？”
 
 ## 应该避免的问题
 
@@ -146,16 +146,16 @@ description: 了解在前端开发/网站开发/软件工程面试中最好问
 
 只有在团队已经希望雇用您时（即在流程的最后），才开始讨论薪水，除非他们询问您的薪水要求。
 
--   “初始薪水是多少？”
--   “您能告诉我有关您的医疗保健保险的情况吗？”
--   “您的带薪休假政策是什么？”
--   “如果我得到这份工作，我什么时候可以请假？”
--   你们多长时间发放一次加薪？
--   你们多长时间发放一次奖金？
--   “我可以期望哪些福利和优惠？”
+- “初始薪水是多少？”
+- “您能告诉我有关您的医疗保健保险的情况吗？”
+- “您的带薪休假政策是什么？”
+- “如果我得到这份工作，我什么时候可以请假？”
+- 你们多长时间发放一次加薪？
+- 你们多长时间发放一次奖金？
+- “我可以期望哪些福利和优惠？”
 
 ### 避免询问应该公开的问题
 
--   “这家公司是做什么的？”
--   “公司的办公室位于何处？”
--   “公司的首席执行官是谁？”
+- “这家公司是做什么的？”
+- “公司的办公室位于何处？”
+- “公司的首席执行官是谁？”
diff --git a/packages/behavioral-interview-guidebook/contents/questions/pt-BR.mdx b/packages/behavioral-interview-guidebook/contents/questions/pt-BR.mdx
index 282d65dba..07d00565e 100644
--- a/packages/behavioral-interview-guidebook/contents/questions/pt-BR.mdx
+++ b/packages/behavioral-interview-guidebook/contents/questions/pt-BR.mdx
@@ -45,12 +45,12 @@ Como mencionado na [visão geral da preparação para entrevistas comportamentai
 
 Nós agrupamos as perguntas comportamentais mais comuns em 8 temas principais. Confira perguntas adicionais para praticar enquanto as estuda:
 
--   ["Conte-me sobre você..."](/guia-de-entrevista-comportamental/auto-apresentação)
--   "Descreva o seu currículo..."
--   ["Por que ingressar nesta equipe ou empresa?"](/behavioral-entreview-guidebook/why-work-here)
--   ["Você tem alguma pergunta para mim?"](/guia-de-entrevistas-comportamentais/perguntas-para-fazer)
--   "Conte-me sobre uma vez em que..." (categorizadas nos seguintes temas)
-    -   [Obtendo resultados e resolvendo problemas](/guia-de-entrevistas-comportamentais/resolucao-de-problemas)
-    -   [Colaboração](/guia-de-entrevistas-comportamentais/colaboracao)
-    -   [mentalidade de crescimento](/behavioral-interview-guidebook/growth-mindset)
-    -   Adaptabilidade e flexibilidade
+- ["Conte-me sobre você..."](/guia-de-entrevista-comportamental/auto-apresentação)
+- "Descreva o seu currículo..."
+- ["Por que ingressar nesta equipe ou empresa?"](/behavioral-entreview-guidebook/why-work-here)
+- ["Você tem alguma pergunta para mim?"](/guia-de-entrevistas-comportamentais/perguntas-para-fazer)
+- "Conte-me sobre uma vez em que..." (categorizadas nos seguintes temas)
+  - [Obtendo resultados e resolvendo problemas](/guia-de-entrevistas-comportamentais/resolucao-de-problemas)
+  - [Colaboração](/guia-de-entrevistas-comportamentais/colaboracao)
+  - [mentalidade de crescimento](/behavioral-interview-guidebook/growth-mindset)
+  - Adaptabilidade e flexibilidade
diff --git a/packages/behavioral-interview-guidebook/contents/questions/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/questions/zh-CN.mdx
index 7669893a1..7f3bebb16 100644
--- a/packages/behavioral-interview-guidebook/contents/questions/zh-CN.mdx
+++ b/packages/behavioral-interview-guidebook/contents/questions/zh-CN.mdx
@@ -7,7 +7,7 @@ description: 前端开发人员/网络开发人员/软件工程师应该练习
 
 正如[行为面谈准备概览](/behavioral-interview-guidebook/)中所提到的那样，大多数行为面谈问题可分为八个主题，以进行有效的准备工作。 我们建议候选人利用这一战略，然后请参阅下面的名单以供实践。
 
-## 最常见的16个问题
+## 最常见的 16 个问题
 
 1.  向我介绍你自己。
 2.  请告诉我你的简历经历。
@@ -43,14 +43,14 @@ description: 前端开发人员/网络开发人员/软件工程师应该练习
 
 ## 练习的附加问题
 
-我们将最常见的行为问题归纳为8大主题。 在学习时查看更多的练习题：
+我们将最常见的行为问题归纳为 8 大主题。 在学习时查看更多的练习题：
 
--   [“介绍一下你自己…”] \(/behavioral-interview-guidebook/self-introduction)
--   “让我来看一下你的简历…”
--   [“为什么加入这个团队或公司？”] \(/behavioral-interview-guidebook/why-work-here)
--   [“你有什么问题要问我的吗？”] \(/behavioral-interview-guidebook/questions-to-ask)
--   "当你...... 的时候告诉我" （分类为以下主题）
-    -   [实现目标和解决问题](/behavioral-interview-guidebook/problem-solving)
-    -   [合作](/behavioral-interview-guidebook/collaboration)
-    -   [成长心态](/behavioral-interview-guidebook/growth-mindset)
-    -   适应能力和灵活性
+- [“介绍一下你自己…”] \(/behavioral-interview-guidebook/self-introduction)
+- “让我来看一下你的简历…”
+- [“为什么加入这个团队或公司？”] \(/behavioral-interview-guidebook/why-work-here)
+- [“你有什么问题要问我的吗？”] \(/behavioral-interview-guidebook/questions-to-ask)
+- "当你...... 的时候告诉我" （分类为以下主题）
+  - [实现目标和解决问题](/behavioral-interview-guidebook/problem-solving)
+  - [合作](/behavioral-interview-guidebook/collaboration)
+  - [成长心态](/behavioral-interview-guidebook/growth-mindset)
+  - 适应能力和灵活性
diff --git a/packages/behavioral-interview-guidebook/contents/self-introduction/pt-BR.mdx b/packages/behavioral-interview-guidebook/contents/self-introduction/pt-BR.mdx
index 2ea14b8ce..1fcee8d25 100644
--- a/packages/behavioral-interview-guidebook/contents/self-introduction/pt-BR.mdx
+++ b/packages/behavioral-interview-guidebook/contents/self-introduction/pt-BR.mdx
@@ -79,12 +79,12 @@ Em essência, para os gerentes de contratação, a autointrodução serve para r
 
 Além dos requisitos específicos do cargo, como frameworks e tecnologias específicas da equipe, os gerentes de contratação para desenvolvedores front-end geralmente se concentram nos seguintes **4 critérios**:
 
-| Critérios                                                                                                 | Exemplo                                                                                                                                                                                                                                                                                                                                               |
-| --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Compreensão dos fundamentos do front-end: HTML, CSS, JavaScript e áreas relacionadas                      | "Tenho construído aplicações de front-end há alguns anos e também contribuído para projetos populares de código aberto, como Lodash e jQuery." <br/><br/>"Fui assistente de ensino para o curso de desenvolvimento web da minha faculdade e orientei estudantes que trabalharam em projetos que envolviam a construção de aplicações web full stack." |
-| A amplitude e profundidade das tecnologias front-end que o candidato conhece                              | "Utilizei React, Tailwind, Next.js, Prisma e MySQL para construir um clone do Twitter como parte do projeto da minha equipe de engenharia de software."                                                                                                                                                                                               |
-| Iniciativa para acompanhar as tecnologias modernas de front-end                                           | "Eu aprendi Astro e reconstruí meu blog pessoal usando ele, pois o Astro é ótimo para construir sites orientados a conteúdo."                                                                                                                                                                                                                         |
-| Projetos relevantes de front-end nos quais o candidato trabalhou, bem como a complexidade desses projetos | "No meu tempo livre, desenvolvi um aplicativo de rastreamento de preços de criptomoedas em React para aprender como construir aplicativos clientes com visualização de dados intensiva e também para resolver uma necessidade pessoal de acompanhar meu portfólio."                                                                                   |
+| Critérios | Exemplo |
+| --- | --- |
+| Compreensão dos fundamentos do front-end: HTML, CSS, JavaScript e áreas relacionadas | "Tenho construído aplicações de front-end há alguns anos e também contribuído para projetos populares de código aberto, como Lodash e jQuery." <br/><br/>"Fui assistente de ensino para o curso de desenvolvimento web da minha faculdade e orientei estudantes que trabalharam em projetos que envolviam a construção de aplicações web full stack." |
+| A amplitude e profundidade das tecnologias front-end que o candidato conhece | "Utilizei React, Tailwind, Next.js, Prisma e MySQL para construir um clone do Twitter como parte do projeto da minha equipe de engenharia de software." |
+| Iniciativa para acompanhar as tecnologias modernas de front-end | "Eu aprendi Astro e reconstruí meu blog pessoal usando ele, pois o Astro é ótimo para construir sites orientados a conteúdo." |
+| Projetos relevantes de front-end nos quais o candidato trabalhou, bem como a complexidade desses projetos | "No meu tempo livre, desenvolvi um aplicativo de rastreamento de preços de criptomoedas em React para aprender como construir aplicativos clientes com visualização de dados intensiva e também para resolver uma necessidade pessoal de acompanhar meu portfólio." |
 
 Consulte abaixo exemplos de boas apresentações pessoais.
 
@@ -94,9 +94,9 @@ Se você deseja expandir para uma apresentação de seu portfólio, é important
 
 A descrição para cada projeto deve abranger:
 
--   Propósito do projeto: O que ele faz para os usuários
--   Frameworks/tecnologias usadas
--   Complexidade técnica envolvida
+- Propósito do projeto: O que ele faz para os usuários
+- Frameworks/tecnologias usadas
+- Complexidade técnica envolvida
 
 Consulte este artigo para obter uma compreensão mais detalhada de como conduzir uma apresentação de portfólio (em breve).
 
diff --git a/packages/behavioral-interview-guidebook/contents/self-introduction/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/self-introduction/zh-CN.mdx
index ea5a91776..566484d4c 100644
--- a/packages/behavioral-interview-guidebook/contents/self-introduction/zh-CN.mdx
+++ b/packages/behavioral-interview-guidebook/contents/self-introduction/zh-CN.mdx
@@ -8,18 +8,18 @@ description: 如何在不同的面试背景下有效地构建你的面试自我
 在这篇文章中，你会发现：
 
 1.  建议为不同的面试环境做准备
-2.  1分钟推销（自己）的话术方案
+2.  1 分钟推销（自己）的话术方案
 3.  作品集或案例研究展示
 4.  好的自我介绍的例子
 5.  来自招聘经理的提示和故事
 
 ## 建议的准备工作
 
-从本质上讲，你应该始终准备一个自我介绍，几乎在所有情况下都要在**1分钟之内**。
+从本质上讲，你应该始终准备一个自我介绍，几乎在所有情况下都要在**1 分钟之内**。
 
 在面试之前，最好从招聘人员或招聘经理那里了解更多关于该轮面试的评估标准--特别是你是否会被评估为行为/适合方面，或者纯粹是技术标准。 在大型科技公司，编码回合可能完全不包括行为相关的标准，因此你的自我介绍很可能只是作为主要面试的 "热身"。
 
-然而，在行为面试或技术面试中，在创业公司或优先考虑实践经验而不是LeetCode式的面试的公司，你可能想把你的自我介绍扩展为**快速的投资组合展示**，或暗示你有一个项目组合，他们可以在面试后查看，或在面试结束时分配5分钟左右的时间来进行介绍。
+然而，在行为面试或技术面试中，在创业公司或优先考虑实践经验而不是 LeetCode 式的面试的公司，你可能想把你的自我介绍扩展为**快速的投资组合展示**，或暗示你有一个项目组合，他们可以在面试后查看，或在面试结束时分配 5 分钟左右的时间来进行介绍。
 
 然而，请注意，无论在哪种情况下，如果你在这一轮做固定格式的编码面试，你应该保持自我介绍的简短，以确保你在实际的编码测试中有**多的时间**。 你花在自我介绍上的任何额外时间都会从你回答技术问题的时间中被剥夺。
 
@@ -51,17 +51,17 @@ description: 如何在不同的面试背景下有效地构建你的面试自我
   </tbody>
 </table>
 
-为了应对所有可能的情况，你应该准备一个1分钟的演讲和一个项目组合（建议但可选）。
+为了应对所有可能的情况，你应该准备一个 1 分钟的演讲和一个项目组合（建议但可选）。
 
 ## 一分钟的推销话术
 
 ### 大局观
 
-大多数情况下，话术将涵盖这4项内容：
+大多数情况下，话术将涵盖这 4 项内容：
 
 1.  工作经验的广度和深度
 2.  最高成就
-3.  如果工作经验不足5年，教育背景
+3.  如果工作经验不足 5 年，教育背景
 4.  申请职位的动机
 
 在制定你的推销方案时，要牢记目标--你要给人留下**好的第一印象**，成为这个职位的潜在理想人选。 要做到这一点，你应该在展示角色的关键要求的基础上，表现出自信、可亲。 想一想，如果你要雇用这个角色的候选人，你会注意些什么？
@@ -77,14 +77,14 @@ description: 如何在不同的面试背景下有效地构建你的面试自我
 
 ### 前端/网络开发人员的话术要点示例
 
-在特定角色的要求之上，如团队特定的框架和技术，前端招聘经理通常关注以下**4个标准**：
+在特定角色的要求之上，如团队特定的框架和技术，前端招聘经理通常关注以下**4 个标准**：
 
-| 标准                                 | 例子                                                                                                    |
-| ---------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| 了解前端的基本原理：HTML、CSS、JavaScript和相关领域 | "我建立前端应用程序已经有几年了，也为Lodash和jQuery等流行的开源项目做出了贡献。" <br/><br/>"我是我的大学的网络开发课程的教学助理，指导学生从事涉及建立全栈Web 应用的项目。" |
-| 候选人了解的前端技术的广度和深度                   | "我使用React、Tailwind、Next.js、Prisma和MySQL建立一个Twitter克隆，作为我的软件工程团队项目的一部分。"                               |
-| 主动跟上现代前端技术的步伐                      | "我学习了Astro，并使用它重建了我的个人博客，因为Astro对于建立内容驱动的网站非常好。"                                                      |
-| 候选人从事过的相关前端项目，这些项目的复杂性             | "在业余时间，我在React中建立了一个加密货币价格跟踪应用程序，以学习如何建立数据可视化重的客户应用程序，也解决了跟踪我的投资组合的个人痛点。"                             |
+| 标准 | 例子 |
+| --- | --- |
+| 了解前端的基本原理：HTML、CSS、JavaScript 和相关领域 | "我建立前端应用程序已经有几年了，也为 Lodash 和 jQuery 等流行的开源项目做出了贡献。" <br/><br/>"我是我的大学的网络开发课程的教学助理，指导学生从事涉及建立全栈 Web 应用的项目。" |
+| 候选人了解的前端技术的广度和深度 | "我使用 React、Tailwind、Next.js、Prisma 和 MySQL 建立一个 Twitter 克隆，作为我的软件工程团队项目的一部分。" |
+| 主动跟上现代前端技术的步伐 | "我学习了 Astro，并使用它重建了我的个人博客，因为 Astro 对于建立内容驱动的网站非常好。" |
+| 候选人从事过的相关前端项目，这些项目的复杂性 | "在业余时间，我在 React 中建立了一个加密货币价格跟踪应用程序，以学习如何建立数据可视化重的客户应用程序，也解决了跟踪我的投资组合的个人痛点。" |
 
 请参考下面好的自我介绍的例子。
 
@@ -94,9 +94,9 @@ description: 如何在不同的面试背景下有效地构建你的面试自我
 
 每个项目的描述应包括：
 
--   项目的目的：它为用户做什么
--   使用的框架/技术
--   涉及的技术复杂性
+- 项目的目的：它为用户做什么
+- 使用的框架/技术
+- 涉及的技术复杂性
 
 请参考这篇文章，以更详细地了解如何进行作品集展示（即将推出）。
 
@@ -104,15 +104,15 @@ description: 如何在不同的面试背景下有效地构建你的面试自我
 
 ### 对于经验丰富的工程师
 
-> 我在Airbnb工作了6年，担任前端工程师，是重新设计Airbnb预订体验项目的首席开发者。 作为工作的一部分，我为Airbnb的主要设计系统做出了贡献，建立了几个UI组件，如旋转木马，评级小工具，并重构了现有的组件。 我也有为Airbnb的开源前端项目（如Enzyme和react-dates）作出贡献的经验。
+> 我在 Airbnb 工作了 6 年，担任前端工程师，是重新设计 Airbnb 预订体验项目的首席开发者。 作为工作的一部分，我为 Airbnb 的主要设计系统做出了贡献，建立了几个 UI 组件，如旋转木马，评级小工具，并重构了现有的组件。 我也有为 Airbnb 的开源前端项目（如 Enzyme 和 react-dates）作出贡献的经验。
 >
-> 在业余时间，我喜欢学习新的前端技术，追赶不断发展的前端生态系统。 最近，我一直在探索新的JavaScript框架，如Astro和SolidJS，让自己接触到构建用户界面的新方法，提高我作为前端工程师的技能。
+> 在业余时间，我喜欢学习新的前端技术，追赶不断发展的前端生态系统。 最近，我一直在探索新的 JavaScript 框架，如 Astro 和 SolidJS，让自己接触到构建用户界面的新方法，提高我作为前端工程师的技能。
 
 ### 针对应届毕业生/大学生
 
-> 我于2020年毕业于东北大学，获得计算机科学学位。 我的兴趣是前端开发，我喜欢在网络上建立令人愉快的产品，因为可以自由地开发任何想到的东西，并且有快速的反馈回路。
+> 我于 2020 年毕业于东北大学，获得计算机科学学位。 我的兴趣是前端开发，我喜欢在网络上建立令人愉快的产品，因为可以自由地开发任何想到的东西，并且有快速的反馈回路。
 >
-> 我在学校时参加了一个网络开发课程，这让我学到了全栈开发的基础知识。 凭借这些技能，我成功地在Uber和Palantir等公司获得了软件工程实习机会。 在Uber，我使用React、Redux和GraphQL建立了一个内部工具，帮助开发者管理他们的测试骑手和司机账户。
+> 我在学校时参加了一个网络开发课程，这让我学到了全栈开发的基础知识。 凭借这些技能，我成功地在 Uber 和 Palantir 等公司获得了软件工程实习机会。 在 Uber，我使用 React、Redux 和 GraphQL 建立了一个内部工具，帮助开发者管理他们的测试骑手和司机账户。
 >
 > 我对谷歌的前端工程师职位感兴趣，因为我每天都在使用谷歌的产品，并且对他们精心设计的产品体验印象深刻。 能在这种影响数十亿人生活的产品上工作，那将是一个梦想成真。
 
@@ -120,16 +120,16 @@ description: 如何在不同的面试背景下有效地构建你的面试自我
 
 > 通常情况下，我把自我介绍作为一个简单的热身活动来启动面试。 不需要技术技能，但它测试了沟通和以清晰简洁的方式描述事物的能力。
 
--   工程经理，LinkedIn。
+- 工程经理，LinkedIn。
 
 > 候选人在介绍自己的时候不应该说得太深，因为这绝不是为了深入了解，只是快速概述一下。
 
--   人才招聘，Coinbase。
+- 人才招聘，Coinbase。
 
 > 结束前列出你所用过的技术栈或项目，以及你希望将来从事的工作/想要发展的职业方向，可能是一个好的建议。
 
--   工程经理，确实如此。
+- 工程经理，确实如此。
 
 > 你的面试官也是一个人。 面试官心目中最重要的事情是他们是否希望这个人加入他们的团队--这不仅仅是技能的问题。 我们想知道你是谁，然后你有什么能力。 当然，加入与工作相关的个人风格是最好的。
 
--   高级工程师，Dropbox。
+- 高级工程师，Dropbox。
diff --git a/packages/behavioral-interview-guidebook/contents/why-work-here/pt-BR.mdx b/packages/behavioral-interview-guidebook/contents/why-work-here/pt-BR.mdx
index f92a91ac0..723a7a464 100644
--- a/packages/behavioral-interview-guidebook/contents/why-work-here/pt-BR.mdx
+++ b/packages/behavioral-interview-guidebook/contents/why-work-here/pt-BR.mdx
@@ -17,11 +17,11 @@ A maioria dos entrevistadores faz essa pergunta com um único objetivo em mente:
 
 Para ter sucesso, existem 3 passos básicos para construir sua resposta:
 
-### 1.  Deve levar entre 60 a 90 segundos
+### 1. Deve levar entre 60 a 90 segundos
 
 Nunca deve levar mais do que 60 a 90 segundos. Qualquer duração maior pode constituir um monólogo. Para referência, 1 minuto equivale a cerca de 15 declarações.
 
-### 2.  Recolher informações profundas sobre a empresa/equipe/cargo obtidas a partir de funcionários atuais ou antigos da empresa
+### 2. Recolher informações profundas sobre a empresa/equipe/cargo obtidas a partir de funcionários atuais ou antigos da empresa
 
 Se você já foi entrevistador antes, saberá que a maioria dos candidatos não impressiona na pergunta "por que você quer trabalhar nesta empresa / equipe", porque tendem a respondê-la com base nas informações públicas da empresa, o que pode não necessariamente representar a cultura ou situação específica da equipe ou departamento. Por exemplo, imagine que você está avaliando 2 candidatos para uma equipe de desenvolvimento de jogos:
 
@@ -45,7 +45,7 @@ Para se destacar como alguém verdadeiramente interessado na função, você dev
 4.  Essa equipe trabalha em estreita colaboração com outras equipes? Quais equipes e de que forma essa colaboração acontece?
 5.  Você pode me explicar o processo de um projeto típico?
 
-### 3.  Explique brevemente por que se juntar a esta empresa/cargo/equipe é um passo estratégico e lógico para sua carreira
+### 3. Explique brevemente por que se juntar a esta empresa/cargo/equipe é um passo estratégico e lógico para sua carreira
 
 Fazendo isso, você também pode aproveitar a oportunidade para reforçar a impressão do entrevistador sobre sua paixão pelo campo ou os esforços que você fez para construir sua expertise.
 
diff --git a/packages/behavioral-interview-guidebook/contents/why-work-here/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/why-work-here/zh-CN.mdx
index 246f7eeb2..7d5cff5df 100644
--- a/packages/behavioral-interview-guidebook/contents/why-work-here/zh-CN.mdx
+++ b/packages/behavioral-interview-guidebook/contents/why-work-here/zh-CN.mdx
@@ -3,7 +3,7 @@ title: 如何在行为面试中回答“为什么想在这里工作”
 description: 学习如何简洁有效地回答有关公司动机的问题，适用于前端/网络开发人员/软件工程师。 由大型科技公司的前面试官撰写。
 ---
 
-作为招聘经理，“为什么想在这里工作”是一个极其常见的问题，可能在超过70％的面试中被问到。 然而，大多数候选人未能回答正确。 在本文中，您将从前面试官那里学习如何有效而简洁地回答此问题，适用于前端工程师/软件工程师：
+作为招聘经理，“为什么想在这里工作”是一个极其常见的问题，可能在超过 70％的面试中被问到。 然而，大多数候选人未能回答正确。 在本文中，您将从前面试官那里学习如何有效而简洁地回答此问题，适用于前端工程师/软件工程师：
 
 1.  面试官的意图
 2.  建议的答案框架
@@ -15,27 +15,27 @@ description: 学习如何简洁有效地回答有关公司动机的问题，适
 
 ## 建议的答案框架
 
-要成功，建立答案有3个基本步骤：
+要成功，建立答案有 3 个基本步骤：
 
-### 1.  答案应在60至90秒之间
+### 1. 答案应在 60 至 90 秒之间
 
-不要超过60至90秒。 任何超过这个时间可能都构成了一个独白。 供参考，1分钟约15句话。
+不要超过 60 至 90 秒。 任何超过这个时间可能都构成了一个独白。 供参考，1 分钟约 15 句话。
 
-### 2.  从公司的现任/前任员工那里收集有关公司/团队/职位的深入了解
+### 2. 从公司的现任/前任员工那里收集有关公司/团队/职位的深入了解
 
 如果您以前是面试官，您会知道，大多数候选人在“为什么想在这个公司/团队工作”这个问题上表现不佳，因为他们倾向于基于公司的公共信息回答该问题，这可能不一定代表个人团队或部门的文化或情况。 例如，想象一下，您正在评估两名游戏开发团队的候选人：
 
-1.  候选人A：“A公司非常环保，我希望成为地球拯救行动的一部分”（作为团队经理，您知道您的团队成员从未谈论过地球拯救，因为您的工作与此完全无关）
-2.  候选人B：“A团队正在基于B技术开发游戏，这是我恰好非常感兴趣的。”
+1.  候选人 A：“A 公司非常环保，我希望成为地球拯救行动的一部分”（作为团队经理，您知道您的团队成员从未谈论过地球拯救，因为您的工作与此完全无关）
+2.  候选人 B：“A 团队正在基于 B 技术开发游戏，这是我恰好非常感兴趣的。”
 
 为了成为真正对该角色感兴趣的人，请努力寻找与您要加入的团队相关的见解，并利用它来证明您的兴趣（因此也适合）。
 
 #### 这里是获取团队特定见解的一些常见途径：
 
 1.  从职位描述中获取有关团队堆栈或实践的更多见解（在某些情况下，可能存在许多您可以利用的细节）
-2.  在LinkedIn上搜索团队，了解他们的个人工作范围、过去的项目、背景和兴趣爱好
+2.  在 LinkedIn 上搜索团队，了解他们的个人工作范围、过去的项目、背景和兴趣爱好
 3.  在做了基本在线研究后，尝试得分信息性访谈、咖啡聊天或短视频通话与团队成员交流
-4.  在Blind上甚至Reddit上搜索团队（尽可能具体地查询）
+4.  在 Blind 上甚至 Reddit 上搜索团队（尽可能具体地查询）
 
 #### 这里是一些有用的问题：
 
@@ -45,18 +45,18 @@ description: 学习如何简洁有效地回答有关公司动机的问题，适
 4.  该团队是否与其他团队密切合作？ 是哪些团队以及如何合作？
 5.  你能带我走过一个典型项目的流程吗？
 
-### 3.  简要解释为什么加入这家公司/职位/团队是您职业生涯的战略和逻辑步骤
+### 3. 简要解释为什么加入这家公司/职位/团队是您职业生涯的战略和逻辑步骤
 
 这样做，您还可以借此机会巩固面试官对您的热情或您为建立专业知识所做的努力的印象。
 
 ## 示例问题和答案
 
-### “为什么想在TikTok Shop团队工作？”
+### “为什么想在 TikTok Shop 团队工作？”
 
-> 我在学校期间做过近4年的自由职业网络开发人员。 作为个人贡献者，我已经积累了丰富的经验，接下来的步骤是作为更大团队的一部分进行更大、更复杂的项目，以将我的开发技能提升到更高的水平。
+> 我在学校期间做过近 4 年的自由职业网络开发人员。 作为个人贡献者，我已经积累了丰富的经验，接下来的步骤是作为更大团队的一部分进行更大、更复杂的项目，以将我的开发技能提升到更高的水平。
 >
-> TikTok商城对我来说最重要的三件事是：
+> TikTok 商城对我来说最重要的三件事是：
 >
-> 1.  我喜欢知道我的开发努力可以具体地推动影响。 在当前阶段，TikTok商城仍处于产品生命周期的相对初级阶段，在这个阶段这是可能的。
-> 2.  TikTok商城服务于广大群众，必须处理与可访问性、本地化和相对新的电子商务等相关的挑战，这使我能够在该领域发展我的技能。
-> 3.  字节跳动（TikTok的母公司）内部开发了许多尖端技术，并使用开源技术。 我很兴奋向公司经验丰富的工程师学习如何将这些技术扩展到世界范围内。
+> 1.  我喜欢知道我的开发努力可以具体地推动影响。 在当前阶段，TikTok 商城仍处于产品生命周期的相对初级阶段，在这个阶段这是可能的。
+> 2.  TikTok 商城服务于广大群众，必须处理与可访问性、本地化和相对新的电子商务等相关的挑战，这使我能够在该领域发展我的技能。
+> 3.  字节跳动（TikTok 的母公司）内部开发了许多尖端技术，并使用开源技术。 我很兴奋向公司经验丰富的工程师学习如何将这些技术扩展到世界范围内。
diff --git a/packages/front-end-interview-guidebook/contents/algorithms/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/algorithms/pt-BR.mdx
index dc922a1d2..16e69f50b 100644
--- a/packages/front-end-interview-guidebook/contents/algorithms/pt-BR.mdx
+++ b/packages/front-end-interview-guidebook/contents/algorithms/pt-BR.mdx
@@ -1,13 +1,13 @@
 ---
-title: "Entrevistas para Desenvolvedor Front-End - Perguntas de Codificação Algorítmica: Como se Preparar"
+title: 'Entrevistas para Desenvolvedor Front-End - Perguntas de Codificação Algorítmica: Como se Preparar'
 description: Guia para se Preparar para Perguntas de Codificação Algorítmica em Entrevistas para Desenvolvedor Front-End / Web - Conceitos para Saber, Critérios de Entrevista e Questões de Prática Importantes.
 ---
 
 Perguntas de codificação algorítmica são exatamente as questões que você pode encontrar no LeetCode. Perguntas algorítmicas geralmente possuem as seguintes características:
 
--   Elas não são específicas para o domínio de front-end; podem ser resolvidas na maioria das linguagens de programação populares.
--   Normalmente são acompanhadas por cenários pouco práticos. Você não teria encontrado um problema desse tipo durante o desenvolvimento do mundo real. Quem já precisou inverter uma árvore binária ou contar o número de substrings palindrômicas em uma string?
--   A eficiência do código (complexidade de tempo e espaço) é importante, e produzir a solução mais eficiente requer um conhecimento sólido de estruturas de dados e algoritmos.
+- Elas não são específicas para o domínio de front-end; podem ser resolvidas na maioria das linguagens de programação populares.
+- Normalmente são acompanhadas por cenários pouco práticos. Você não teria encontrado um problema desse tipo durante o desenvolvimento do mundo real. Quem já precisou inverter uma árvore binária ou contar o número de substrings palindrômicas em uma string?
+- A eficiência do código (complexidade de tempo e espaço) é importante, e produzir a solução mais eficiente requer um conhecimento sólido de estruturas de dados e algoritmos.
 
 Embora as perguntas de codificação algorítmica não sejam específicas para o front-end, as habilidades necessárias para se destacar nessas questões - pensamento analítico sólido, comunicação eficaz, compreensão sólida das estruturas de dados e algoritmos comuns, boas práticas de codificação - ainda são habilidades cruciais que bons Engenheiros Front-End devem possuir. Bons Engenheiros Front-End também são bons Engenheiros de Software, e bons Engenheiros de Software devem ter domínio sobre estruturas de dados e algoritmos básicos. Portanto, não é surpresa que muitas empresas ainda façam perguntas de codificação algorítmica durante o processo de entrevista. Familiaridade com estruturas de dados e algoritmos também é útil para resolver perguntas de codificação em JavaScript e perguntas de codificação de Interface do Usuário.
 
@@ -15,9 +15,9 @@ Existem muitos recursos disponíveis que abordam entrevistas de codificação al
 
 ## Exemplos
 
--   Inverter uma lista ligada.
--   Determinar se uma string contém colchetes balanceados.
--   Determinar quantas substrings em uma string são palíndromos.
+- Inverter uma lista ligada.
+- Determinar se uma string contém colchetes balanceados.
+- Determinar quantas substrings em uma string são palíndromos.
 
 ## Como se Preparar
 
@@ -34,10 +34,10 @@ Embora você ainda possa ser questionado sobre qualquer tópico algorítmico, as
 
 Como o DOM é uma árvore, priorize aprender sobre árvores e os diversos algoritmos de travessia de árvores.
 
-| Categoria           | Tópicos Importantes                                                                    |
-| ------------------- | -------------------------------------------------------------------------------------- |
-| Estruturas de Dados | Arrays, Mapas, Pilhas, Árvores, Gráficos, Matriz (Arrays 2D), Conjuntos                |
-| Algoritmos          | Busca Binária, Busca em Largura, Busca em Profundidade, Ordenação Topológica, Recursão |
+| Categoria | Tópicos Importantes |
+| --- | --- |
+| Estruturas de Dados | Arrays, Mapas, Pilhas, Árvores, Gráficos, Matriz (Arrays 2D), Conjuntos |
+| Algoritmos | Busca Binária, Busca em Largura, Busca em Profundidade, Ordenação Topológica, Recursão |
 
 ## Operações Comuns em JavaScript
 
@@ -66,32 +66,32 @@ a serem adicionados.
 
 ### `Map`
 
-| Operação                  | Complexidade de Tempo                                                           |
-| ------------------------- | ------------------------------------------------------------------------------- |
-| `Map.prototype.clear()`   | O(n)                                                                            |
-| `Map.prototype.delete()`  | O(1)                                                                            |
+| Operação | Complexidade de Tempo |
+| --- | --- |
+| `Map.prototype.clear()` | O(n) |
+| `Map.prototype.delete()` | O(1) |
 | `Map.prototype.entries()` | O(1) because it returns an iterator. Obter todas as entradas levará tempo O(n). |
-| `Map.prototype.forEach()` | O(n)                                                                            |
-| `Map.prototype.get()`     | O(1)                                                                            |
-| `Map.prototype.has()`     | O(1)                                                                            |
-| `Map.prototype.keys()`    | O(1) porque retorna um iterador. Obter todas as chaves levará tempo O(n).       |
-| `Map.prototype.set()`     | O(1)                                                                            |
-| `Map.prototype.values()`  | O(1) porque retorna um iterador. Obter todos os valores levará tempo O(n).      |
+| `Map.prototype.forEach()` | O(n) |
+| `Map.prototype.get()` | O(1) |
+| `Map.prototype.has()` | O(1) |
+| `Map.prototype.keys()` | O(1) porque retorna um iterador. Obter todas as chaves levará tempo O(n). |
+| `Map.prototype.set()` | O(1) |
+| `Map.prototype.values()` | O(1) porque retorna um iterador. Obter todos os valores levará tempo O(n). |
 
 <sup>*</sup> `n` é o número de chaves no mapa.
 
 ### `Set`
 
-| Operação                  | Complexidade de Tempo                                                       |
-| ------------------------- | --------------------------------------------------------------------------- |
-| `Set.prototype.add()`     | O(1)                                                                        |
-| `Set.prototype.clear()`   | O(n)                                                                        |
-| `Set.prototype.delete()`  | O(1)                                                                        |
+| Operação | Complexidade de Tempo |
+| --- | --- |
+| `Set.prototype.add()` | O(1) |
+| `Set.prototype.clear()` | O(n) |
+| `Set.prototype.delete()` | O(1) |
 | `Set.prototype.entries()` | O(1) porque retorna um iterador. Obter todas as entradas levará tempo O(n). |
-| `Set.prototype.forEach()` | O(n)                                                                        |
-| `Set.prototype.has()`     | O(1)                                                                        |
-| `Set.prototype.keys()`    | O(1) porque retorna um iterador. Obter todas as chaves levará tempo O(n).   |
-| `Set.prototype.values()`  | O(1) porque retorna um iterador. Obter todos os valores levará tempo O(n).  |
+| `Set.prototype.forEach()` | O(n) |
+| `Set.prototype.has()` | O(1) |
+| `Set.prototype.keys()` | O(1) porque retorna um iterador. Obter todas as chaves levará tempo O(n). |
+| `Set.prototype.values()` | O(1) porque retorna um iterador. Obter todos os valores levará tempo O(n). |
 
 <sup>*</sup> `n` é o número de chaves no conjunto (set).
 
@@ -99,19 +99,19 @@ a serem adicionados.
 
 Durante entrevistas de codificação algorítmica, os entrevistadores estão avaliando os candidatos com base nas seguintes habilidades:
 
--   **Solução de problemas**: use uma abordagem sistemática e lógica para a compreensão e resolução de um problema. Dividir o problema em problemas menores e independentes. Avaliar abordagens diferentes e suas compensações.
--   **Competência Técnica**: Habilidade de traduzir soluções em código funcional e demonstrar um forte entendimento da linguagem sendo utilizada.
--   **Comunicação**: Fazer perguntas para esclarecer detalhes e explicar claramente a abordagem e as considerações.
--   **Verificação**: Identificar vários cenários para testar o código, incluindo casos extremos. Ser capaz de diagnosticar e resolver quaisquer problemas que surjam.
+- **Solução de problemas**: use uma abordagem sistemática e lógica para a compreensão e resolução de um problema. Dividir o problema em problemas menores e independentes. Avaliar abordagens diferentes e suas compensações.
+- **Competência Técnica**: Habilidade de traduzir soluções em código funcional e demonstrar um forte entendimento da linguagem sendo utilizada.
+- **Comunicação**: Fazer perguntas para esclarecer detalhes e explicar claramente a abordagem e as considerações.
+- **Verificação**: Identificar vários cenários para testar o código, incluindo casos extremos. Ser capaz de diagnosticar e resolver quaisquer problemas que surjam.
 
 ## Useful Tips
 
--   **Pensamento Positivo**. A biblioteca padrão do JavaScript não possui algumas estruturas de dados e algoritmos úteis, como fila, heap e busca binária, que podem facilitar sua vida durante entrevistas de codificação em JavaScript. No entanto, você pode perguntar ao entrevistador se pode fazer de conta que tal estrutura de dados/algoritmo existe e usá-la diretamente em sua solução sem implementá-la.
--   **Funções Puras**. Tente escrever funções puras, que têm a vantagem de serem reutilizáveis e modulares, ou seja, funções que não dependem de estados externos à função e não causam efeitos colaterais.
--   **Escolha com sabedoria estruturas de dados.** Preste atenção à sua escolha de estruturas de dados e esteja ciente das complexidades do tempo do código. Esteja familiarizado com as complexidades de tempo/espaço das operações básicas de Array, Object, Set e Map do JavaScript, caso queira utilizá-las em sua solução. Algumas dessas complexidades de tempo/espaço podem ser diferentes em diferentes linguagens. Não escreva código que seja executado em O(n<sup>2</sup>) se ele puder ser executado em O(n) com o uso de hash mapas.
--   **Casos Extremos de Recursão**.
-    -   Se você identificou que resolver a pergunta requer recursão, pergunte sobre o tamanho da entrada e como lidar com o caso de estouro da pilha de recursão. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
-    -   Estruturas de dados profundamente aninhadas podem ter referências recursivas a si mesmas, o que torna certas operações, como a serialização, muito mais complicadas. Pergunte ao entrevistador se você precisa lidar com tais casos. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
+- **Pensamento Positivo**. A biblioteca padrão do JavaScript não possui algumas estruturas de dados e algoritmos úteis, como fila, heap e busca binária, que podem facilitar sua vida durante entrevistas de codificação em JavaScript. No entanto, você pode perguntar ao entrevistador se pode fazer de conta que tal estrutura de dados/algoritmo existe e usá-la diretamente em sua solução sem implementá-la.
+- **Funções Puras**. Tente escrever funções puras, que têm a vantagem de serem reutilizáveis e modulares, ou seja, funções que não dependem de estados externos à função e não causam efeitos colaterais.
+- **Escolha com sabedoria estruturas de dados.** Preste atenção à sua escolha de estruturas de dados e esteja ciente das complexidades do tempo do código. Esteja familiarizado com as complexidades de tempo/espaço das operações básicas de Array, Object, Set e Map do JavaScript, caso queira utilizá-las em sua solução. Algumas dessas complexidades de tempo/espaço podem ser diferentes em diferentes linguagens. Não escreva código que seja executado em O(n<sup>2</sup>) se ele puder ser executado em O(n) com o uso de hash mapas.
+- **Casos Extremos de Recursão**.
+  - Se você identificou que resolver a pergunta requer recursão, pergunte sobre o tamanho da entrada e como lidar com o caso de estouro da pilha de recursão. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
+  - Estruturas de dados profundamente aninhadas podem ter referências recursivas a si mesmas, o que torna certas operações, como a serialização, muito mais complicadas. Pergunte ao entrevistador se você precisa lidar com tais casos. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
 
 ## Questões de Prática
 
diff --git a/packages/front-end-interview-guidebook/contents/algorithms/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/algorithms/zh-CN.mdx
index fa25029bc..72292d6c0 100644
--- a/packages/front-end-interview-guidebook/contents/algorithms/zh-CN.mdx
+++ b/packages/front-end-interview-guidebook/contents/algorithms/zh-CN.mdx
@@ -3,94 +3,94 @@ title: 前端面试算法编码问题——如何准备
 description: 这是前端/网站开发者面试中准备算法编码问题的指南，包括需要了解的概念、面试评分标准和重要的实践问题。
 ---
 
-算法编码问题就是可以在LeetCode上找到的问题。 算法问题通常具有以下特征：
+算法编码问题就是可以在 LeetCode 上找到的问题。 算法问题通常具有以下特征：
 
--   它们不特定于前端领域；可以通过大多数主流编程语言求解。
--   通常附带不切实际的情景。 你在实际开发中不会遇到这样的问题。 有谁曾经不得不反转二叉树或计算字符串中回文子串的数量呢？
--   代码效率（时间和空间复杂度）很重要，要想得到最有效的解决方案需要扎实掌握数据结构和算法知识。
+- 它们不特定于前端领域；可以通过大多数主流编程语言求解。
+- 通常附带不切实际的情景。 你在实际开发中不会遇到这样的问题。 有谁曾经不得不反转二叉树或计算字符串中回文子串的数量呢？
+- 代码效率（时间和空间复杂度）很重要，要想得到最有效的解决方案需要扎实掌握数据结构和算法知识。
 
-虽然算法编码问题不是前端特有的，但在这些问题中表现出色所需的技能——强大的分析思考能力、有效的沟通能力、熟练掌握常见的数据结构和算法、良好的代码卫生习惯，仍是优秀的前端工程师必须具备的关键技能。 优秀的前端工程师也是优秀的软件工程师，而优秀的软件工程师应该掌握基本的数据结构和算法。 因此，在面试过程中，很多公司仍然会问有关算法编码的问题。 熟悉数据结构和算法对于解决JavaScript编码问题和用户界面编码问题也有帮助。
+虽然算法编码问题不是前端特有的，但在这些问题中表现出色所需的技能——强大的分析思考能力、有效的沟通能力、熟练掌握常见的数据结构和算法、良好的代码卫生习惯，仍是优秀的前端工程师必须具备的关键技能。 优秀的前端工程师也是优秀的软件工程师，而优秀的软件工程师应该掌握基本的数据结构和算法。 因此，在面试过程中，很多公司仍然会问有关算法编码的问题。 熟悉数据结构和算法对于解决 JavaScript 编码问题和用户界面编码问题也有帮助。
 
 关于算法编码面试的资源有很多，因为它们不特定于前端，所以我们不会在这里详细介绍。 如果您想了解有关算法编码面试的更多信息，我们建议参考[Tech Interview Handbook](https://www.techinterviewhandbook.org)。
 
 ## 示例
 
--   反转链表。
--   判断字符串是否包含平衡的括号。
--   计算字符串中有多少个子串是回文的。
+- 反转链表。
+- 判断字符串是否包含平衡的括号。
+- 计算字符串中有多少个子串是回文的。
 
 ## 如何准备
 
-1.  选择一种好的编程语言。 如果你想节省准备时间，你可能应该坚持使用JavaScript来解决算法问题，尽管需要注意的是JavaScript语言不包含某些常见有用的数据结构和算法，而其他语言，如Python、Java和C++则包含。 个人建议使用Python来解决算法面试问题。
+1.  选择一种好的编程语言。 如果你想节省准备时间，你可能应该坚持使用 JavaScript 来解决算法问题，尽管需要注意的是 JavaScript 语言不包含某些常见有用的数据结构和算法，而其他语言，如 Python、Java 和 C++则包含。 个人建议使用 Python 来解决算法面试问题。
 2.  规划时间并按优先级处理主题和问题。
 3.  将学习和练习结合在一起。
 4.  通过编码面试备忘清单来加深印象。
 
-请参考[Tech Interview Handbook的逐步指南](https://www.techinterviewhandbook.org/coding-interview-prep/)，了解如何准备算法编码面试。
+请参考[Tech Interview Handbook 的逐步指南](https://www.techinterviewhandbook.org/coding-interview-prep/)，了解如何准备算法编码面试。
 
 ## 重要概念
 
 尽管你仍然可能被问到任何算法问题，但公司倾向于对前端工程师候选人采取温和的态度，并且可能不会问与动态规划或复杂图形算法等困难的话题有关的问题。
 
-由于DOM是一棵树，优先学习有关树和各种树遍历算法的知识。
+由于 DOM 是一棵树，优先学习有关树和各种树遍历算法的知识。
 
-| 类别   | 重要话题                       |
-| ---- | -------------------------- |
-| 数据结构 | 数组、映射、堆栈、树、图、矩阵（2D数组）、集合   |
-| 算法   | 二分查找、广度优先搜索、深度优先搜索、拓扑排序、递归 |
+| 类别     | 重要话题                                             |
+| -------- | ---------------------------------------------------- |
+| 数据结构 | 数组、映射、堆栈、树、图、矩阵（2D 数组）、集合      |
+| 算法     | 二分查找、广度优先搜索、深度优先搜索、拓扑排序、递归 |
 
-## 常见JavaScript操作
+## 常见 JavaScript 操作
 
 ### `Array`
 
-| 操作                          | 时间复杂度           |
-| --------------------------- | --------------- |
-| `Array.prototype.concat()`  | O(m + n)        |
-| `Array.prototype.every()`   | O(n)            |
-| `Array.prototype.fill()`    | O(n)            |
-| `Array.prototype.filter()`  | O(n)            |
-| `Array.prototype.find()`    | O(n)            |
-| `Array.prototype.pop()`     | O(1)            |
-| `Array.prototype.push()`    | O(1)            |
-| `Array.prototype.reduce()`  | O(n)            |
-| `Array.prototype.reverse()` | O(n)            |
-| `Array.prototype.shift()`   | O(n)            |
-| `Array.prototype.slice()`   | O(n)            |
-| `Array.prototype.some()`    | O(n)            |
-| `Array.prototype.sort()`    | O(nlgn)         |
-| `Array.prototype.splice()`  | O(n)            |
-| `Array.prototype.unshift()` | O(m + n)        |
+| 操作                        | 时间复杂度 |
+| --------------------------- | ---------- |
+| `Array.prototype.concat()`  | O(m + n)   |
+| `Array.prototype.every()`   | O(n)       |
+| `Array.prototype.fill()`    | O(n)       |
+| `Array.prototype.filter()`  | O(n)       |
+| `Array.prototype.find()`    | O(n)       |
+| `Array.prototype.pop()`     | O(1)       |
+| `Array.prototype.push()`    | O(1)       |
+| `Array.prototype.reduce()`  | O(n)       |
+| `Array.prototype.reverse()` | O(n)       |
+| `Array.prototype.shift()`   | O(n)       |
+| `Array.prototype.slice()`   | O(n)       |
+| `Array.prototype.some()`    | O(n)       |
+| `Array.prototype.sort()`    | O(nlgn)    |
+| `Array.prototype.splice()`  | O(n)       |
+| `Array.prototype.unshift()` | O(m + n)   |
 
 <sup>*</sup> `n`是数组中元素的数量，`m`是要添加的元素的数量。
 
 ### `Map`
 
-| 操作                        | 时间复杂度                                  |
-| ------------------------- | -------------------------------------- |
-| `Map.prototype.clear()`   | O(n)                                   |
-| `Map.prototype.delete()`  | O(1)                                   |
-| `Map.prototype.entries()` | O(1)，因为它返回一个迭代器。 获取所有条目将花费O(n)时间。      |
-| `Map.prototype.forEach()` | O(n)                                   |
-| `Map.prototype.get()`     | O(1)                                   |
-| `Map.prototype.has()`     | O(1)                                   |
-| `Map.prototype.keys()`    | O(1)，因为它返回一个迭代器。 获取所有的 key 将需要O(n)时间。  |
-| `Map.prototype.set()`     | O(1)                                   |
-| `Map.prototype.values()`  | O(1)，因为它返回一个迭代器。 获取所有 value 将花费O(n)时间。 |
+| 操作 | 时间复杂度 |
+| --- | --- |
+| `Map.prototype.clear()` | O(n) |
+| `Map.prototype.delete()` | O(1) |
+| `Map.prototype.entries()` | O(1)，因为它返回一个迭代器。 获取所有条目将花费 O(n)时间。 |
+| `Map.prototype.forEach()` | O(n) |
+| `Map.prototype.get()` | O(1) |
+| `Map.prototype.has()` | O(1) |
+| `Map.prototype.keys()` | O(1)，因为它返回一个迭代器。 获取所有的 key 将需要 O(n)时间。 |
+| `Map.prototype.set()` | O(1) |
+| `Map.prototype.values()` | O(1)，因为它返回一个迭代器。 获取所有 value 将花费 O(n)时间。 |
 
 <sup>*</sup> `n`是映射中键的数量。
 
 ### `Set`
 
-| 操作                        | 时间复杂度                                  |
-| ------------------------- | -------------------------------------- |
-| `Set.prototype.add()`     | O(1)                                   |
-| `Set.prototype.clear()`   | O(n)                                   |
-| `Set.prototype.delete()`  | O(1)                                   |
-| `Set.prototype.entries()` | O(1)，因为它返回一个迭代器。 获取所有条目将花费O(n)时间。      |
-| `Set.prototype.forEach()` | O(n)                                   |
-| `Set.prototype.has()`     | O(1)                                   |
-| `Set.prototype.keys()`    | O(1)，因为它返回一个迭代器。 获取所有的 key 将需要O(n)时间。  |
-| `Set.prototype.values()`  | O(1)，因为它返回一个迭代器。 获取所有 value 将花费O(n)时间。 |
+| 操作 | 时间复杂度 |
+| --- | --- |
+| `Set.prototype.add()` | O(1) |
+| `Set.prototype.clear()` | O(n) |
+| `Set.prototype.delete()` | O(1) |
+| `Set.prototype.entries()` | O(1)，因为它返回一个迭代器。 获取所有条目将花费 O(n)时间。 |
+| `Set.prototype.forEach()` | O(n) |
+| `Set.prototype.has()` | O(1) |
+| `Set.prototype.keys()` | O(1)，因为它返回一个迭代器。 获取所有的 key 将需要 O(n)时间。 |
+| `Set.prototype.values()` | O(1)，因为它返回一个迭代器。 获取所有 value 将花费 O(n)时间。 |
 
 <sup>*</sup> `n`是集合中元素的数量。
 
@@ -98,20 +98,20 @@ description: 这是前端/网站开发者面试中准备算法编码问题的指
 
 在算法编码面试中，面试官评估候选人的技能，包括：
 
--   **问题解决**: 采用系统和逻辑的方法来理解和解决问题。 将问题分解为更小的独立问题。 评估不同方法及其权衡。
--   **技术能力**: 能够将解决方案转化为工作代码，并表现出对所使用语言的深刻理解。
--   **沟通**: 询问问题以澄清细节，并清楚地解释自己的方法和思考。
--   **验证**: 确定要针对代码进行测试的各种情况，包括边缘情况。 能够诊断和解决出现的任何问题。
+- **问题解决**: 采用系统和逻辑的方法来理解和解决问题。 将问题分解为更小的独立问题。 评估不同方法及其权衡。
+- **技术能力**: 能够将解决方案转化为工作代码，并表现出对所使用语言的深刻理解。
+- **沟通**: 询问问题以澄清细节，并清楚地解释自己的方法和思考。
+- **验证**: 确定要针对代码进行测试的各种情况，包括边缘情况。 能够诊断和解决出现的任何问题。
 
 ## 有用的提示
 
--   **虚构的想法**。 JavaScript的标准库不包含队列，堆，二分查找等一些有用的数据结构和算法，这可能会使您在JavaScript编码面试中感到困难。 但是，你可以问面试官是否可以假装这样的数据结构/算法存在，并直接在你的解决方案中使用它而不实现它。
--   **纯函数**。 编写纯函数，这样可以使函数具有可重复使用性和模块化性，也就是说，函数不依赖于函数外的状态，并且不会产生副作用。
--   **明智地选择数据结构**。注意选择数据结构并了解代码的时间复杂度。 熟悉JavaScript数组、对象、集合、映射的时间/空间复杂度，如有必要，可以在解决方案中使用它们。 其中一些时间/空间的复杂度在不同的语言中有所不同。 如果可以使用哈希映射在O(n)的运行时内完成任务，就不要编写O(n<sup>2</sup>)的代码。
--   **递归边界**。
-    -   如果您已经确定解决问题需要递归，请询问输入大小和如何处理递归栈溢出的情况。 通常情况下，你不必处理它，但是提出这个问题是一个好的信号。
-    -   深嵌套的数据结构可以具有递归引用它本身的特征，这使得某些操作如序列化变得更加棘手。 问问面试官你是否要处理这样的情况。 通常情况下，你不必处理它，但是提出这个问题是一个好的信号。
+- **虚构的想法**。 JavaScript 的标准库不包含队列，堆，二分查找等一些有用的数据结构和算法，这可能会使您在 JavaScript 编码面试中感到困难。 但是，你可以问面试官是否可以假装这样的数据结构/算法存在，并直接在你的解决方案中使用它而不实现它。
+- **纯函数**。 编写纯函数，这样可以使函数具有可重复使用性和模块化性，也就是说，函数不依赖于函数外的状态，并且不会产生副作用。
+- **明智地选择数据结构**。注意选择数据结构并了解代码的时间复杂度。 熟悉 JavaScript 数组、对象、集合、映射的时间/空间复杂度，如有必要，可以在解决方案中使用它们。 其中一些时间/空间的复杂度在不同的语言中有所不同。 如果可以使用哈希映射在 O(n)的运行时内完成任务，就不要编写 O(n<sup>2</sup>)的代码。
+- **递归边界**。
+  - 如果您已经确定解决问题需要递归，请询问输入大小和如何处理递归栈溢出的情况。 通常情况下，你不必处理它，但是提出这个问题是一个好的信号。
+  - 深嵌套的数据结构可以具有递归引用它本身的特征，这使得某些操作如序列化变得更加棘手。 问问面试官你是否要处理这样的情况。 通常情况下，你不必处理它，但是提出这个问题是一个好的信号。
 
 ## 实践问题
 
-目前，最好的练习算法问题的平台无疑是LeetCode。 但是，GreatFrontEnd提供一些[数据结构和算法的练习问题](/questions/js/coding/data-structures-algorithms)，在其中，您可以练习实现常见的数据结构（[堆栈](/questions/javascript/stack)、[队列](/questions/javascript/queue)）和算法（[二分查找](/questions/javascript/binary-search)、[归并排序](/questions/javascript/merge-sort)）等在JavaScript中的操作。
+目前，最好的练习算法问题的平台无疑是 LeetCode。 但是，GreatFrontEnd 提供一些[数据结构和算法的练习问题](/questions/js/coding/data-structures-algorithms)，在其中，您可以练习实现常见的数据结构（[堆栈](/questions/javascript/stack)、[队列](/questions/javascript/queue)）和算法（[二分查找](/questions/javascript/binary-search)、[归并排序](/questions/javascript/merge-sort)）等在 JavaScript 中的操作。
diff --git a/packages/front-end-interview-guidebook/contents/coding/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/coding/pt-BR.mdx
index 57d968cbb..5c683b438 100644
--- a/packages/front-end-interview-guidebook/contents/coding/pt-BR.mdx
+++ b/packages/front-end-interview-guidebook/contents/coding/pt-BR.mdx
@@ -5,9 +5,9 @@ description: Guia para Preparação de Perguntas de Codificação em Entrevistas
 
 Entrevistas de codificação são a principal forma pela qual Engenheiros Front End são avaliados e podem abranger várias rodadas e estágios das entrevistas, portanto, é extremamente importante praticar para entrevistas de codificação. Para recapitular, aqui estão os três tipos de perguntas de codificação que você pode ser questionado:
 
--   **Codificação Algorítmica**: Resolva questões algorítmicas complexas que avaliam sua compreensão de estruturas de dados, algoritmos e complexidade temporal.
--   **Codificação em JavaScript**: Implemente funções ou estruturas de dados em JavaScript relacionadas ao domínio de front-end e comumente usadas durante o desenvolvimento de front-end.
--   **Codificação de Interface de Usuário**: Construa interfaces de usuário (componentes, widgets, aplicativos) usando HTML, CSS e JavaScript, às vezes até mesmo usando frameworks de JavaScript.
+- **Codificação Algorítmica**: Resolva questões algorítmicas complexas que avaliam sua compreensão de estruturas de dados, algoritmos e complexidade temporal.
+- **Codificação em JavaScript**: Implemente funções ou estruturas de dados em JavaScript relacionadas ao domínio de front-end e comumente usadas durante o desenvolvimento de front-end.
+- **Codificação de Interface de Usuário**: Construa interfaces de usuário (componentes, widgets, aplicativos) usando HTML, CSS e JavaScript, às vezes até mesmo usando frameworks de JavaScript.
 
 ## Ambiente de Codificação
 
@@ -21,10 +21,10 @@ Você receberá uma URL de um editor de código no navegador. O editor pode ter
 
 A diferença entre um editor de código básico e um IDE é que os IDEs permitem alternar entre vários arquivos. Eles podem ser tanto no navegador quanto aplicativos nativos em seu laptop. Normalmente, você será solicitado a usar IDEs quando precisar construir interfaces de usuário e utilizar vários arquivos ou escrever em mais de uma linguagem. Este é o melhor ambiente disponível, pois se assemelha de perto à forma como a maioria dos engenheiros desenvolve. Sujeito à aprovação do entrevistador, você deve ser capaz de:
 
--   Visualizar a interface do usuário em andamento e ver as atualizações ao vivo.
--   Usar o console do navegador para depuração.
--   Usar recursos de IDE como realce de sintaxe, atalhos de teclado, autocompletar, intellisense e extensões para aumentar sua produtividade.
--   Adicionar quaisquer dependências de terceiros necessárias.
+- Visualizar a interface do usuário em andamento e ver as atualizações ao vivo.
+- Usar o console do navegador para depuração.
+- Usar recursos de IDE como realce de sintaxe, atalhos de teclado, autocompletar, intellisense e extensões para aumentar sua produtividade.
+- Adicionar quaisquer dependências de terceiros necessárias.
 
 Sempre escolha usar um IDE se for dada a opção.
 
@@ -34,34 +34,34 @@ Exemplos de IDEs online incluem [JSFiddle](https://jsfiddle.net/), [CodePen](htt
 
 Em certas empresas, você pode ser solicitado a escrever todo o código necessário no quadro branco. Imagine escrever HTML e CSS no quadro sem poder visualizá-lo! Isso pode ser um pesadelo para os candidatos, e grandes empresas de tecnologia como o Google e o Meta/Facebook são conhecidas por fazer isso durante entrevistas presenciais. A maioria das outras empresas geralmente pede que você traga seu próprio laptop e codifique em seu IDE local ou em um editor de código/IDE online em um navegador da web.
 
-* * *
+---
 
 Aqui está um resumo dos diversos ambientes de codificação e o que você pode fazer em cada um deles:
 
-| Ambiente                                                    | Visualizar | Executar Código | Adicionar Dependências de Terceiros |
-| ----------------------------------------------------------- | ---------- | --------------- | ----------------------------------- |
-| Editor de código online                                     | Não        | Situacional     | Normalmente, não                    |
-| IDEs (Ambientes de Desenvolvimento Integrado)               | Sim        | Sim             | Sim                                 |
-| Quadro Branco                                               | Não        | Não             | Não                                 |
+| Ambiente | Visualizar | Executar Código | Adicionar Dependências de Terceiros |
+| --- | --- | --- | --- |
+| Editor de código online | Não | Situacional | Normalmente, não |
+| IDEs (Ambientes de Desenvolvimento Integrado) | Sim | Sim | Sim |
+| Quadro Branco | Não | Não | Não |
 
 ## Dicas Gerais de Codificação
 
--   Esteja familiarizado com os atalhos de teclado úteis do editor, pois o tempo é essencial durante entrevistas e cada tecla pressionada conta. Saiba como:
-    -   Ir para o início/fim da linha.
-    -   Mover linhas para cima/baixo.
-    -   Duplicar uma linha.
-    -   Renomear um símbolo facilmente.
--   Descubra antecipadamente se você estará codificando em seu próprio laptop, em um laptop fornecido a você ou no quadro branco.
-    -   Se você estiver codificando em seu próprio laptop e puder usar seu próprio IDE, certifique-se de que o IDE esteja funcionando corretamente, que o Node.js e o npm estejam instalados corretamente e que você possa executar servidores web locais em `localhost` e acessá-los no seu navegador.
--   Não dependa demais da pré-visualização e execução do código. Isso sugere ao seu entrevistador que você não tem certeza do que digitou e desenvolve por tentativa e erro, o que não é um sinal positivo.
+- Esteja familiarizado com os atalhos de teclado úteis do editor, pois o tempo é essencial durante entrevistas e cada tecla pressionada conta. Saiba como:
+  - Ir para o início/fim da linha.
+  - Mover linhas para cima/baixo.
+  - Duplicar uma linha.
+  - Renomear um símbolo facilmente.
+- Descubra antecipadamente se você estará codificando em seu próprio laptop, em um laptop fornecido a você ou no quadro branco.
+  - Se você estiver codificando em seu próprio laptop e puder usar seu próprio IDE, certifique-se de que o IDE esteja funcionando corretamente, que o Node.js e o npm estejam instalados corretamente e que você possa executar servidores web locais em `localhost` e acessá-los no seu navegador.
+- Não dependa demais da pré-visualização e execução do código. Isso sugere ao seu entrevistador que você não tem certeza do que digitou e desenvolve por tentativa e erro, o que não é um sinal positivo.
 
 ## Dicas Específicas por Tipo
 
 Continue lendo para obter dicas para cada tipo de entrevista de codificação:
 
--   [Codificação Algoritmica](/front-end-interview-guidebook/algoritms)
--   [Codificação JavaScript](/front-end-interview-guidebook/javascript)
--   [Codificação de Interface do Usuário](/front-end-interview-guidebook/user-interface)
+- [Codificação Algoritmica](/front-end-interview-guidebook/algoritms)
+- [Codificação JavaScript](/front-end-interview-guidebook/javascript)
+- [Codificação de Interface do Usuário](/front-end-interview-guidebook/user-interface)
 
 ## Perguntas de Prática
 
diff --git a/packages/front-end-interview-guidebook/contents/coding/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/coding/zh-CN.mdx
index 5938b06a3..501bbc5c5 100644
--- a/packages/front-end-interview-guidebook/contents/coding/zh-CN.mdx
+++ b/packages/front-end-interview-guidebook/contents/coding/zh-CN.mdx
@@ -5,9 +5,9 @@ description: 准备前端/ Web开发人员面试中的编码问题——了解
 
 编码面试是评估前端工程师的主要方式，可以跨越多轮和多个面试阶段，因此练习编码面试非常重要。 回顾一下，以下是您可能会被问到的三种编码问题类型：
 
--   **算法编码**：解决棘手的算法问题，评估您对数据结构、算法和时间复杂性的理解。
--   **JavaScript编码**：在前端领域中实现与前端开发常用的函数或数据结构相关的JavaScript。
--   **用户界面编码**：使用HTML、CSS和JavaScript构建用户界面（组件、小部件、应用程序），有时甚至使用JavaScript框架。
+- **算法编码**：解决棘手的算法问题，评估您对数据结构、算法和时间复杂性的理解。
+- **JavaScript 编码**：在前端领域中实现与前端开发常用的函数或数据结构相关的 JavaScript。
+- **用户界面编码**：使用 HTML、CSS 和 JavaScript 构建用户界面（组件、小部件、应用程序），有时甚至使用 JavaScript 框架。
 
 ## 编码环境
 
@@ -15,57 +15,57 @@ description: 准备前端/ Web开发人员面试中的编码问题——了解
 
 ### 在线基本代码编辑器
 
-您将得到一个基于浏览器的代码编辑器的URL。 该编辑器具有实时协作功能，或者您将被要求共享屏幕。 这些基本代码编辑器通常只有一个窗格，因为问题不需要使用多种语言来完成，例如算法/JavaScript编码问题。 您可能被允许或不被允许执行代码。 在线基本代码编辑器的示例是[CoderPad](https://coderpad.io/)。
+您将得到一个基于浏览器的代码编辑器的 URL。 该编辑器具有实时协作功能，或者您将被要求共享屏幕。 这些基本代码编辑器通常只有一个窗格，因为问题不需要使用多种语言来完成，例如算法/JavaScript 编码问题。 您可能被允许或不被允许执行代码。 在线基本代码编辑器的示例是[CoderPad](https://coderpad.io/)。
 
 ### 集成开发环境（IDE）
 
-基本代码编辑器和IDE之间的区别在于IDE允许在多个文件之间切换。 它们可以是您笔记本电脑上的原生应用程序，也可以在浏览器中运行。 通常情况下，您会被要求使用IDE来构建用户界面，并且需要使用多个文件或键入不止一种语言。 这是可用的最佳环境，因为它与大多数工程师开发的方式非常相似。 在面试官的批准下，您应该能够：
+基本代码编辑器和 IDE 之间的区别在于 IDE 允许在多个文件之间切换。 它们可以是您笔记本电脑上的原生应用程序，也可以在浏览器中运行。 通常情况下，您会被要求使用 IDE 来构建用户界面，并且需要使用多个文件或键入不止一种语言。 这是可用的最佳环境，因为它与大多数工程师开发的方式非常相似。 在面试官的批准下，您应该能够：
 
--   预览正在进行的用户界面并实时查看更新。
--   使用浏览器控制台进行调试。
--   使用IDE功能（如语法突出显示、键盘快捷方式、自动完成、智能感知、扩展）提高生产力。
--   添加任何必要的第三方依赖项。
+- 预览正在进行的用户界面并实时查看更新。
+- 使用浏览器控制台进行调试。
+- 使用 IDE 功能（如语法突出显示、键盘快捷方式、自动完成、智能感知、扩展）提高生产力。
+- 添加任何必要的第三方依赖项。
 
-始终选择使用IDE如果您被赋予权利选择。
+始终选择使用 IDE 如果您被赋予权利选择。
 
-在线IDE的示例包括[JSFiddle](https://jsfiddle.net/)、[CodePen](https://codepen.io/)、[CodeSandbox](https://codesandbox.io/)和[StackBlitz](https://stackblitz.com/)。
+在线 IDE 的示例包括[JSFiddle](https://jsfiddle.net/)、[CodePen](https://codepen.io/)、[CodeSandbox](https://codesandbox.io/)和[StackBlitz](https://stackblitz.com/)。
 
 ### 白板
 
-在某些公司，您可能会被要求在白板上编写所有必需的代码。 想象一下没有办法预览在白板上编写的HTML和CSS！ 这是候选人的噩梦，像谷歌和Meta / Facebook这样的大型科技公司在面试时已知会这样做。 大多数其他公司要么让您带自己的笔记本电脑，您可以在本地IDE或Web浏览器中的在线代码编辑器/ IDE中编码。
+在某些公司，您可能会被要求在白板上编写所有必需的代码。 想象一下没有办法预览在白板上编写的 HTML 和 CSS！ 这是候选人的噩梦，像谷歌和 Meta / Facebook 这样的大型科技公司在面试时已知会这样做。 大多数其他公司要么让您带自己的笔记本电脑，您可以在本地 IDE 或 Web 浏览器中的在线代码编辑器/ IDE 中编码。
 
-* * *
+---
 
 下面是各种编码环境的摘要和您可以采取的措施：
 
-| 环境                | 预览     | 执行代码        | 添加第三方依赖                   |
-| ----------------- | ------ | ----------- | ------------------------- |
-| 在线代码编辑器           | 否      | 有时          | 通常否                       |
-| IDE               | 是      | 是           | 是                         |
-| 白板                | 否      | 否           | 否                         |
+| 环境           | 预览 | 执行代码 | 添加第三方依赖 |
+| -------------- | ---- | -------- | -------------- |
+| 在线代码编辑器 | 否   | 有时     | 通常否         |
+| IDE            | 是   | 是       | 是             |
+| 白板           | 否   | 否       | 否             |
 
 ## 通用编码提示
 
--   熟悉有用的编辑器键盘快捷键，因为在面试期间时间非常重要，每个按键都很重要。 知道如何：
-    -   跳到行首/行尾。
-    -   上下移动行。
-    -   复制行。
-    -   更改符号（变量）名称。
--   提前了解您将在自己的笔记本电脑、给予您的笔记本电脑还是白板上编码。
-    -   如果您将在自己的笔记本电脑上进行编码，并且可以使用自己的IDE，请确保IDE正常运行，正确安装了Node.js和npm，并且可以在localhost上运行本地Web服务器并在您的浏览器中访问它们。
--   不要过分依赖代码的预览和执行。 这向您的面试官表明，您不确定自己输入了什么，并进行尝试和错误开发，这不是积极的信号。
+- 熟悉有用的编辑器键盘快捷键，因为在面试期间时间非常重要，每个按键都很重要。 知道如何：
+  - 跳到行首/行尾。
+  - 上下移动行。
+  - 复制行。
+  - 更改符号（变量）名称。
+- 提前了解您将在自己的笔记本电脑、给予您的笔记本电脑还是白板上编码。
+  - 如果您将在自己的笔记本电脑上进行编码，并且可以使用自己的 IDE，请确保 IDE 正常运行，正确安装了 Node.js 和 npm，并且可以在 localhost 上运行本地 Web 服务器并在您的浏览器中访问它们。
+- 不要过分依赖代码的预览和执行。 这向您的面试官表明，您不确定自己输入了什么，并进行尝试和错误开发，这不是积极的信号。
 
 ## 特定类型的提示
 
 请继续阅读每种编码面试类型的提示：
 
--   [算法编码](/front-end-interview-guidebook/algorithms)
--   [JavaScript编码](/front-end-interview-guidebook/javascript)
--   [用户界面编码](/front-end-interview-guidebook/user-interface)
+- [算法编码](/front-end-interview-guidebook/algorithms)
+- [JavaScript 编码](/front-end-interview-guidebook/javascript)
+- [用户界面编码](/front-end-interview-guidebook/user-interface)
 
 ## 练习问题
 
-GreatFrontEnd有一个长列表的[编码问题](/prepare/coding)，您可以练习并花时间检查它们。
+GreatFrontEnd 有一个长列表的[编码问题](/prepare/coding)，您可以练习并花时间检查它们。
 
 请注意，我们在某些问题中特意保持模糊，并没有提出完整的要求。 这是为了训练您提前思考并考虑在解决方案时可能需要注意哪些可能的事项。
 
diff --git a/packages/front-end-interview-guidebook/contents/javascript/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/javascript/pt-BR.mdx
index 924751285..176cb4bcf 100644
--- a/packages/front-end-interview-guidebook/contents/javascript/pt-BR.mdx
+++ b/packages/front-end-interview-guidebook/contents/javascript/pt-BR.mdx
@@ -16,9 +16,9 @@ Exato, você provavelmente precisará utilizar Apis específicas do navegador/Ja
 
 Pode parecer redundante implementar classes/métodos padrão quando eles já fazem parte da linguagem. No entanto, inconsistências entre navegadores costumavam ser um problema comum, e algumas APIs da linguagem não eram encontradas em navegadores mais antigos. Portanto, os desenvolvedores tiveram que recorrer ao polyfilling, que é o ato de fornecer funcionalidade moderna em navegadores mais antigos que não a suportam nativamente, implementando essas APIs em JavaScript baixado. Ser capaz de implementar essas funções nativas também demonstra um bom entendimento dos fundamentos do desenvolvimento front-end.
 
--   Métodos `Array`: [`Array.prototype.map`](/questions/javascript/array-map), [`Array.prototype.reduce`](/questions/javascript/array-reduce), [`Array.prototype.filter`](/questions/javascript/array-filter).
--   `Promise` e outras funções `Promise`: [`Promise.all`](/questions/javascript/promise-all), [`Promise.any`](/questions/javascript/promise-any).
--   Métodos DOM: [`document.getElementsByTagName`](/questions/javascript/get-elements-by-tag-name), [`document.getElementsByClassName`](/questions/javascript/get-elements-by-class-name).
+- Métodos `Array`: [`Array.prototype.map`](/questions/javascript/array-map), [`Array.prototype.reduce`](/questions/javascript/array-reduce), [`Array.prototype.filter`](/questions/javascript/array-filter).
+- `Promise` e outras funções `Promise`: [`Promise.all`](/questions/javascript/promise-all), [`Promise.any`](/questions/javascript/promise-any).
+- Métodos DOM: [`document.getElementsByTagName`](/questions/javascript/get-elements-by-tag-name), [`document.getElementsByClassName`](/questions/javascript/get-elements-by-class-name).
 
 Há mais nessas funções do que aparenta à primeira vista. Vamos pegar o inocente `Array.prototype.map`, por exemplo. Você está ciente de que:
 
@@ -32,14 +32,14 @@ Sua implementação não precisa lidar com todos esses casos, especialmente o da
 
 Essas funções/classes são comumente necessárias ao construir software com JavaScript, mas não fazem parte da linguagem padrão (por enquanto).
 
--   Funções Lodash/Underscore: [`debounce`](/questions/javascript/debounce), [`throttle`](/questions/javascript/throttle), [`flatten`](/questions/javascript/flatten), [`curry`](/questions/javascript/curry), [`cloneDeep`](/questions/javascript/deep-clone).
--   Métodos jQuery: [`jQuery.css`](/questions/javascript/jquery-css), [`jQuery.toggleClass`](/questions/javascript/jquery-class-manipulation).
--   Bibliotecas populares:
-    -   [`classnames`](/questions/javascript/classnames)
-    -   `test`/`expect` funções de testes de frameworks como [Jest](https://jestjs.io/)/[Mocha](https://mochajs.org/)
-    -   [`Emitter`](/questions/javascript/event-emitter) (que existe como parte do Node.js e muitas bibliotecas de terceiros)
-    -   [Immutable.js](https://immutable-js.com/)
-    -   [Backbone.js](https://backbonejs.org/)
+- Funções Lodash/Underscore: [`debounce`](/questions/javascript/debounce), [`throttle`](/questions/javascript/throttle), [`flatten`](/questions/javascript/flatten), [`curry`](/questions/javascript/curry), [`cloneDeep`](/questions/javascript/deep-clone).
+- Métodos jQuery: [`jQuery.css`](/questions/javascript/jquery-css), [`jQuery.toggleClass`](/questions/javascript/jquery-class-manipulation).
+- Bibliotecas populares:
+  - [`classnames`](/questions/javascript/classnames)
+  - `test`/`expect` funções de testes de frameworks como [Jest](https://jestjs.io/)/[Mocha](https://mochajs.org/)
+  - [`Emitter`](/questions/javascript/event-emitter) (que existe como parte do Node.js e muitas bibliotecas de terceiros)
+  - [Immutable.js](https://immutable-js.com/)
+  - [Backbone.js](https://backbonejs.org/)
 
 Se você der uma olhada no código-fonte dessas bibliotecas, poderá encontrar algumas das implementações bastante complexas. Isso ocorre porque existem muitos casos de uso do mundo real obscuros que a biblioteca precisa suportar. Semelhante às funções padrão, você não é esperado para lidar com todos esses casos extremos durante uma entrevista, mas ganha pontos por reconhecê-los.
 
@@ -48,14 +48,14 @@ Se você der uma olhada no código-fonte dessas bibliotecas, poderá encontrar a
 Entrevistas de codificação em JavaScript compartilham muitas semelhanças com entrevistas de codificação algorítmica. Em geral, você deve:
 
 1.  Descubra em qual plataforma você está codificando e familiarize-se com o ambiente de codificação:
-    -   Os atalhos de editor suportados.
-    -   Se você pode executar código.
-    -   Se você pode instalar dependências de terceiros.
+    - Os atalhos de editor suportados.
+    - Se você pode executar código.
+    - Se você pode instalar dependências de terceiros.
 2.  Faça sua apresentação pessoal em menos de um minuto. A menos que seja solicitado, não leve mais tempo do que isso, caso contrário, você pode não ter tempo suficiente para programar.
 3.  Faça perguntas de esclarecimento ao receber a pergunta. Esclareça o seguinte:
-    -   Você pode usar a sintaxe mais recente do JavaScript (ES2016 e posteriores)?
-    -   Se o código se destina a ser executado no navegador ou no servidor (por exemplo, Node.js).
-    -   O suporte do navegador é importante, pois isso afetará as APIs do navegador que você pode utilizar.
+    - Você pode usar a sintaxe mais recente do JavaScript (ES2016 e posteriores)?
+    - Se o código se destina a ser executado no navegador ou no servidor (por exemplo, Node.js).
+    - O suporte do navegador é importante, pois isso afetará as APIs do navegador que você pode utilizar.
 4.  Proponha uma solução ao seu entrevistador. Ao contrário de entrevistas de programação convencionais, o foco das entrevistas de codificação em JavaScript geralmente não está em estruturas de dados complexas e algoritmos. É possível e provavelmente você pode ir direto para a solução ideal com a melhor escolha de estruturas de dados e algoritmos.
 5.  Codifique sua solução e explique o código ao seu entrevistador enquanto você está programando.
 6.  Após codificar, leia seu código uma vez e tente identificar erros básicos, como erros de digitação, uso de variáveis antes de inicializá-las, uso incorreto de APIs, etc.
@@ -71,48 +71,48 @@ Entrevistas de codificação em JavaScript compartilham muitas semelhanças com
 
 ## Conceitos Importantes
 
-| Categoria                 | Tópicos Importantes                                                                                                                                                                                                                                                                                                                                                            |
-| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Estruturas de Dados       | Arrays, Maps, Stacks, Trees, Sets                                                                                                                                                                                                                                                                                                                                              |
-| Algoritmos                | Busca Binária, Busca em Largura (Breadth-first Search), Busca em Profundidade (Depth-first Search), Recursão                                                                                                                                                                                                                                                                   |
-| Linguagem JavaScript      | Tipos de dados (verificação de tipos, coerção de tipos), Escopo, Closures, Callbacks, Funcionamento da palavra-chave `this`, Programação Orientada a Objetos em JavaScript (protótipos, classes, métodos), Funções de seta vs. funções normais, Invocando funções via `Function.prototype.apply()`/`Function.prototype.call()`, Promises, Manipulação de argumentos variádicos |
-| DOM                       | Navegação no DOM, Criação no DOM, Manipulação no DOM, Acesso a propriedades de elementos/nós, Delegação de Eventos                                                                                                                                                                                                                                                             |
-| APIs em Tempo de Execução | Temporizador (`setTimeout`, `setInterval`)                                                                                                                                                                                                                                                                                                                                     |
+| Categoria | Tópicos Importantes |
+| --- | --- |
+| Estruturas de Dados | Arrays, Maps, Stacks, Trees, Sets |
+| Algoritmos | Busca Binária, Busca em Largura (Breadth-first Search), Busca em Profundidade (Depth-first Search), Recursão |
+| Linguagem JavaScript | Tipos de dados (verificação de tipos, coerção de tipos), Escopo, Closures, Callbacks, Funcionamento da palavra-chave `this`, Programação Orientada a Objetos em JavaScript (protótipos, classes, métodos), Funções de seta vs. funções normais, Invocando funções via `Function.prototype.apply()`/`Function.prototype.call()`, Promises, Manipulação de argumentos variádicos |
+| DOM | Navegação no DOM, Criação no DOM, Manipulação no DOM, Acesso a propriedades de elementos/nós, Delegação de Eventos |
+| APIs em Tempo de Execução | Temporizador (`setTimeout`, `setInterval`) |
 
 ## Critérios de Avaliação para Entrevistas de Codificação em JavaScript
 
 As entrevistas de codificação em JavaScript são semelhantes às entrevistas de codificação algorítmica, e a abordagem para essas entrevistas deve ser semelhante. Naturalmente, haverá alguma sobreposição com entrevistas de codificação algorítmica no que diz respeito à avaliação dos candidatos durante entrevistas de codificação em JavaScript.
 
--   **Resolução de Problemas**: Utilize uma abordagem sistemática e lógica para compreender e resolver um problema. Divida o problema em problemas menores e independentes. Avalie diferentes abordagens e suas compensações (tradeoffs).
--   **Fundamentos de Engenharia de Software**: Familiaridade com estruturas de dados, algoritmos, análise de complexidade de tempo de execução, uso de padrões de design e elaboração de soluções com abstrações limpas.
--   **Expertise no Domínio**: Compreensão do domínio de front-end e das linguagens relevantes: Navegador (DOM e APIs DOM), HTML, CSS, JavaScript, Desempenho.
--   **Comunicação**: Fazer perguntas para esclarecer detalhes e explicar claramente a abordagem e as considerações.
--   **Verificação**: Identificar vários cenários para testar o código, incluindo casos extremos. Seja capaz de diagnosticar e corrigir quaisquer problemas que surjam.
+- **Resolução de Problemas**: Utilize uma abordagem sistemática e lógica para compreender e resolver um problema. Divida o problema em problemas menores e independentes. Avalie diferentes abordagens e suas compensações (tradeoffs).
+- **Fundamentos de Engenharia de Software**: Familiaridade com estruturas de dados, algoritmos, análise de complexidade de tempo de execução, uso de padrões de design e elaboração de soluções com abstrações limpas.
+- **Expertise no Domínio**: Compreensão do domínio de front-end e das linguagens relevantes: Navegador (DOM e APIs DOM), HTML, CSS, JavaScript, Desempenho.
+- **Comunicação**: Fazer perguntas para esclarecer detalhes e explicar claramente a abordagem e as considerações.
+- **Verificação**: Identificar vários cenários para testar o código, incluindo casos extremos. Seja capaz de diagnosticar e corrigir quaisquer problemas que surjam.
 
 ## Dicas Úteis
 
--   **Pensamento Positivo**. A biblioteca padrão do JavaScript não possui algumas estruturas de dados e algoritmos úteis, como fila, heap, pesquisa binária, que podem facilitar sua vida durante entrevistas de codificação em JavaScript. No entanto, você pode perguntar ao entrevistador se pode considerar que uma determinada estrutura de dados/algoritmo existe e usá-la diretamente em sua solução sem implementá-la.
--   **Funções Puras**. Aim to write pure functions which have the benefit of reusability and modularity, aka functions which don't rely on state outside of the function and doesn't cause side effects.
--   **Escolha as estruturas de dados sabiamente.** Preste atenção à escolha das estruturas de dados e esteja ciente das complexidades temporais do código. Esteja familiarizado com as complexidades de tempo/espaço das operações básicas de Array, Object, Set e Map em JavaScript, caso deseje usá-las em sua solução. Alguns desses tempos/complexidades de espaço podem variar entre diferentes linguagens de programação. É importante estar ciente das particularidades da linguagem que você está usando para garantir que suas escolhas sejam apropriadas para o contexto específico. Não escreva código que seja executado em O(n<sup>2</sup>) se ele puder ser executado em O(n) com o uso de hash mapas.
--   **`this` importa**. Se uma função aceita uma função de retorno de chamada como parâmetro, considere como a variável `this` deve se comportar. Para muitas funções internas, `this` é fornecido como um dos argumentos com os quais a função de retorno de chamada é invocada.
--   **Mutação dentro de funções de retorno de chamada.** Cuidado com as funções de retorno de chamada que realizam mutações na estrutura de dados na qual estão operando. Provavelmente, você não precisa lidar com esse caso durante entrevistas, mas deve mencionar explicitamente esses casos se forem relevantes.
--   **Casos limites de recursão**.
-    -   Se você identificou que resolver a pergunta requer recursão, pergunte sobre o tamanho da entrada e como lidar com o caso de estouro de pilha de recursão. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
-    -   Estruturas de dados profundamente aninhadas podem ter referências recursivas a si mesmas, o que torna certas operações, como serialização, muito mais complexas. Pergunte ao entrevistador se você precisa lidar com tais casos. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
+- **Pensamento Positivo**. A biblioteca padrão do JavaScript não possui algumas estruturas de dados e algoritmos úteis, como fila, heap, pesquisa binária, que podem facilitar sua vida durante entrevistas de codificação em JavaScript. No entanto, você pode perguntar ao entrevistador se pode considerar que uma determinada estrutura de dados/algoritmo existe e usá-la diretamente em sua solução sem implementá-la.
+- **Funções Puras**. Aim to write pure functions which have the benefit of reusability and modularity, aka functions which don't rely on state outside of the function and doesn't cause side effects.
+- **Escolha as estruturas de dados sabiamente.** Preste atenção à escolha das estruturas de dados e esteja ciente das complexidades temporais do código. Esteja familiarizado com as complexidades de tempo/espaço das operações básicas de Array, Object, Set e Map em JavaScript, caso deseje usá-las em sua solução. Alguns desses tempos/complexidades de espaço podem variar entre diferentes linguagens de programação. É importante estar ciente das particularidades da linguagem que você está usando para garantir que suas escolhas sejam apropriadas para o contexto específico. Não escreva código que seja executado em O(n<sup>2</sup>) se ele puder ser executado em O(n) com o uso de hash mapas.
+- **`this` importa**. Se uma função aceita uma função de retorno de chamada como parâmetro, considere como a variável `this` deve se comportar. Para muitas funções internas, `this` é fornecido como um dos argumentos com os quais a função de retorno de chamada é invocada.
+- **Mutação dentro de funções de retorno de chamada.** Cuidado com as funções de retorno de chamada que realizam mutações na estrutura de dados na qual estão operando. Provavelmente, você não precisa lidar com esse caso durante entrevistas, mas deve mencionar explicitamente esses casos se forem relevantes.
+- **Casos limites de recursão**.
+  - Se você identificou que resolver a pergunta requer recursão, pergunte sobre o tamanho da entrada e como lidar com o caso de estouro de pilha de recursão. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
+  - Estruturas de dados profundamente aninhadas podem ter referências recursivas a si mesmas, o que torna certas operações, como serialização, muito mais complexas. Pergunte ao entrevistador se você precisa lidar com tais casos. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
 
 ## **Perguntas sobre Melhores Práticas**
 
 Pela minha experiência, as melhores perguntas de entrevista de codificação em JavaScript para praticar, conforme determinado pela frequência e pelos conceitos importantes abordados são:
 
--   [Debounce](/questions/javascript/debounce)
--   [Throttle](/questions/javascript/debounce)
--   [Array.prototype.filter](/questions/javascript/array-filter)
--   [Promise.all](/questions/javascript/promise-all)
--   [Curry](/questions/javascript/curry)
--   [Flatten](/questions/javascript/flatten)
--   [getElementsByTagName](/questions/javascript/get-elements-by-class-name)
--   [Deep Clone](/questions/javascript/deep-clone)
--   [Seleção de Dados](/questions/javascript/data-seletion)
+- [Debounce](/questions/javascript/debounce)
+- [Throttle](/questions/javascript/debounce)
+- [Array.prototype.filter](/questions/javascript/array-filter)
+- [Promise.all](/questions/javascript/promise-all)
+- [Curry](/questions/javascript/curry)
+- [Flatten](/questions/javascript/flatten)
+- [getElementsByTagName](/questions/javascript/get-elements-by-class-name)
+- [Deep Clone](/questions/javascript/deep-clone)
+- [Seleção de Dados](/questions/javascript/data-seletion)
 
 A GreatFrontEnd possui uma [lista abrangente de perguntas de codificação JavaScript](/questions/js/coding/utilities) que você pode praticar. Também existem casos de testes automatizados que você pode executar em seu código para verificar a correção e soluções escritas por ex-engenheiros sênior da FAANG.
 
diff --git a/packages/front-end-interview-guidebook/contents/javascript/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/javascript/zh-CN.mdx
index 1f00faf46..a1f25d95a 100644
--- a/packages/front-end-interview-guidebook/contents/javascript/zh-CN.mdx
+++ b/packages/front-end-interview-guidebook/contents/javascript/zh-CN.mdx
@@ -3,117 +3,117 @@ title: 前端面试JavaScript问题——如何准备
 description: 为前端/网站开发人员面试准备JavaScript问题的指南——了解的概念、面试规则和70多个重要的练习问题。
 ---
 
-编写JavaScript编码问题与编写算法编码问题的不同之处在于前者通常特定于前端领域，完成它们最有意义的是使用JavaScript（或[TypeScript](https://www.typescriptlang.org/)）。 您还可能需要使用浏览器/JavaScript特定的API，或利用HTML/CSS/JavaScript知识。 您还可能需要使用浏览器/JavaScript特定的API，或利用HTML/CSS/JavaScript知识。
+编写 JavaScript 编码问题与编写算法编码问题的不同之处在于前者通常特定于前端领域，完成它们最有意义的是使用 JavaScript（或[TypeScript](https://www.typescriptlang.org/)）。 您还可能需要使用浏览器/JavaScript 特定的 API，或利用 HTML/CSS/JavaScript 知识。 您还可能需要使用浏览器/JavaScript 特定的 API，或利用 HTML/CSS/JavaScript 知识。
 
-这些JavaScript编码问题往往具有实用价值，并且可以属于以下一类或多类：
+这些 JavaScript 编码问题往往具有实用价值，并且可以属于以下一类或多类：
 
-1.  在JavaScript语言中实现标准内置类或方法。
+1.  在 JavaScript 语言中实现标准内置类或方法。
 2.  实现在流行的库中常见的实用函数/类。
 
 ## 示例
 
-### JavaScript标准内置类/方法
+### JavaScript 标准内置类/方法
 
-当他们已经成为语言的一部分时，实现标准类/方法可能看起来有些多余。 然而，浏览器不一致曾经是一个普遍的问题，并且一些语言API在旧浏览器中找不到。 当他们已经成为语言的一部分时，实现标准类/方法可能看起来有些多余。 然而，浏览器不一致曾经是一个普遍的问题，并且一些语言API在旧浏览器中找不到。 因此，开发人员不得不通过在下载的JavaScript中实现这些API来进行填充。 能够实现这些本地函数还显示了对前端基础知识的良好理解。 能够实现这些本地函数还显示了对前端基础知识的良好理解。
+当他们已经成为语言的一部分时，实现标准类/方法可能看起来有些多余。 然而，浏览器不一致曾经是一个普遍的问题，并且一些语言 API 在旧浏览器中找不到。 当他们已经成为语言的一部分时，实现标准类/方法可能看起来有些多余。 然而，浏览器不一致曾经是一个普遍的问题，并且一些语言 API 在旧浏览器中找不到。 因此，开发人员不得不通过在下载的 JavaScript 中实现这些 API 来进行填充。 能够实现这些本地函数还显示了对前端基础知识的良好理解。 能够实现这些本地函数还显示了对前端基础知识的良好理解。
 
--   `Array` 方法：[`Array.prototype.map`](/questions/javascript/array-map)，[`Array.prototype.reduce`](/questions/javascript/array-reduce)，[`Array.prototype.filter`](/questions/javascript/array-filter)。
--   `Promise` 和其他`Promise`相关函数：[`Promise.all`](/questions/javascript/promise-all)，[`Promise.any`](/questions/javascript/promise-any)。
--   DOM方法：[`document.getElementsByTagName`](/questions/javascript/get-elements-by-tag-name)，[`document.getElementsByClassName`](/questions/javascript/get-elements-by-class-name)。
+- `Array` 方法：[`Array.prototype.map`](/questions/javascript/array-map)，[`Array.prototype.reduce`](/questions/javascript/array-reduce)，[`Array.prototype.filter`](/questions/javascript/array-filter)。
+- `Promise` 和其他`Promise`相关函数：[`Promise.all`](/questions/javascript/promise-all)，[`Promise.any`](/questions/javascript/promise-any)。
+- DOM 方法：[`document.getElementsByTagName`](/questions/javascript/get-elements-by-tag-name)，[`document.getElementsByClassName`](/questions/javascript/get-elements-by-class-name)。
 
 这些函数远非显而易见的那么简单。 这些函数远非显而易见的那么简单。 让我们以无辜的`Array.prototype.map`为例。 您是否知道： 您是否知道：
 
-1.  它传递4个参数给回调函数，包括 `index` 和 `this` ？
+1.  它传递 4 个参数给回调函数，包括 `index` 和 `this` ？
 2.  它保留稀疏数组中的“空”，即 `[1, 2, , 4].map(val => val * val) === [1, 4, , 16]`。
-3.  `map`处理的元素范围在第一个调用_callbackfn_之前设置。 在调用map之后附加到数组中的元素将不会被_callbackfn_访问。 如果更改数组的现有元素，则将它们的值作为传递给_callbackfn_的值在`map`访问它们时。 来源：[Array.prototype.map ECMAScript说明]（https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.map）
+3.  `map`处理的元素范围在第一个调用*callbackfn*之前设置。 在调用 map 之后附加到数组中的元素将不会被*callbackfn*访问。 如果更改数组的现有元素，则将它们的值作为传递给*callbackfn*的值在`map`访问它们时。 来源：[Array.prototype.map ECMAScript 说明]（https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.map）
 
 您的实施不必处理所有这些情况，特别是数组突变的情况。 但是，如果您提到了这些情况，那么这是一个积极的信号。 您的实现越接近规范，您就会显得更加资深/有经验。
 
 ### 来自流行库的实用函数/类
 
-这些函数/类在使用JavaScript构建软件时通常需要，但不在标准语言中（目前）。
+这些函数/类在使用 JavaScript 构建软件时通常需要，但不在标准语言中（目前）。
 
--   Lodash/Underscore函数：[`debounce`](/questions/javascript/debounce)，[`throttle`](/questions/javascript/throttle)，[`flatten`](/questions/javascript/flatten)，[`curry`](/questions/javascript/curry)，[`cloneDeep`](/questions/javascript/deep-clone)。
--   jQuery方法：[`jQuery.css`](/questions/javascript/jquery-css)，[`jQuery.toggleClass`](/questions/javascript/jquery-class-manipulation)。
--   流行的库：
-    -   [`classnames`](/questions/javascript/classnames)
-    -   测试框架（如[Jest](https://jestjs.io/) / [Mocha](https://mochajs.org/)）中的“test”/“expect”函数。
-    -   [`Emitter`](/questions/javascript/event-emitter)（它存在于Node.js和许多第三方库中）
-    -   [Immutable.js](https://immutable-js.com/)
-    -   [Backbone.js](https://backbonejs.org/)
+- Lodash/Underscore 函数：[`debounce`](/questions/javascript/debounce)，[`throttle`](/questions/javascript/throttle)，[`flatten`](/questions/javascript/flatten)，[`curry`](/questions/javascript/curry)，[`cloneDeep`](/questions/javascript/deep-clone)。
+- jQuery 方法：[`jQuery.css`](/questions/javascript/jquery-css)，[`jQuery.toggleClass`](/questions/javascript/jquery-class-manipulation)。
+- 流行的库：
+  - [`classnames`](/questions/javascript/classnames)
+  - 测试框架（如[Jest](https://jestjs.io/) / [Mocha](https://mochajs.org/)）中的“test”/“expect”函数。
+  - [`Emitter`](/questions/javascript/event-emitter)（它存在于 Node.js 和许多第三方库中）
+  - [Immutable.js](https://immutable-js.com/)
+  - [Backbone.js](https://backbonejs.org/)
 
 如果您查看这些库的源代码，您可能会发现其中一些实现非常复杂。 这是因为该库必须支持许多晦涩的真实世界用例。 与标准函数类似，您不需要在面试设置中处理所有这些边缘情况，但是您获得了调用它们的点。
 
-## JavaScript编码面试期间要做的事情
+## JavaScript 编码面试期间要做的事情
 
-JavaScript编码面试与算法编码面试有许多相似之处。 一般来说，你应该：
+JavaScript 编码面试与算法编码面试有许多相似之处。 一般来说，你应该：
 
 1.  查找您正在编码的平台，并熟悉编码环境：
-    -   支持的编辑器快捷键。
-    -   您是否可以执行代码。
-    -   您是否可以安装第三方依赖项。
-2.  1分钟内进行自我介绍。 除非要求，否则不要花费更长的时间，否则您可能没有足够的时间编码。
+    - 支持的编辑器快捷键。
+    - 您是否可以执行代码。
+    - 您是否可以安装第三方依赖项。
+2.  1 分钟内进行自我介绍。 除非要求，否则不要花费更长的时间，否则您可能没有足够的时间编码。
 3.  在收到问题后询问澄清性问题。 澄清以下内容： 澄清以下内容：
-    -   您可以使用更新的JavaScript语法（ES2016及更高版本）吗？
-    -   代码是要运行在浏览器上还是服务器上（例如Node.js）。
-    -   浏览器支持，因为这将影响您可以使用的浏览器API。
-4.  向面试官提出解决方案。 与编码面试不同，JavaScript编码面试的重点通常不在复杂的数据结构和算法上。 通过最佳的数据结构和算法选择，可能可以直接跳转到最佳解决方案。
+    - 您可以使用更新的 JavaScript 语法（ES2016 及更高版本）吗？
+    - 代码是要运行在浏览器上还是服务器上（例如 Node.js）。
+    - 浏览器支持，因为这将影响您可以使用的浏览器 API。
+4.  向面试官提出解决方案。 与编码面试不同，JavaScript 编码面试的重点通常不在复杂的数据结构和算法上。 通过最佳的数据结构和算法选择，可能可以直接跳转到最佳解决方案。
 5.  编写解决方案并在编码时向面试官解释您的代码。
-6.  编码后，一次阅读您的代码，尝试检测基本错误，例如拼写错误，在初始化变量之前使用变量，不正确使用API等。
+6.  编码后，一次阅读您的代码，尝试检测基本错误，例如拼写错误，在初始化变量之前使用变量，不正确使用 API 等。
 7.  概述一些基本测试用例和一些边缘情况。 使用这些情况测试您的代码，并确定您的代码是否通过了它们。 如果失败，请调试问题并修复它们。
 8.  可选：如果涉及算法优化和智能数据结构选择，则解释时间/空间复杂度。
 9.  解释您所做出的任何权衡、您明确未处理的案例以及如果您有更多时间可以改进代码的方法。
 10. 面试可能不会在这里结束，面试官可能会有对此问题的跟进问题或给您提供另一个问题。 要为它们做好准备。
 
-## JavaScript编码面试规则
+## JavaScript 编码面试规则
 
-1.  通过参考下面的“重要概念”熟悉HTML、CSS、JavaScript和DOM概念。 [测验部分](/front-end-interview-guidebook/quiz) 也可以是一个好的开始，因为您可能会以测验问题的形式被问到这些概念。
-2.  选择[学习计划](/get-started)并练习所选学习计划推荐的[JavaScript编码问题](/questions/js/coding/utilities)。 在做问题的同时，也可以学习某个主题。
+1.  通过参考下面的“重要概念”熟悉 HTML、CSS、JavaScript 和 DOM 概念。 [测验部分](/front-end-interview-guidebook/quiz) 也可以是一个好的开始，因为您可能会以测验问题的形式被问到这些概念。
+2.  选择[学习计划](/get-started)并练习所选学习计划推荐的[JavaScript 编码问题](/questions/js/coding/utilities)。 在做问题的同时，也可以学习某个主题。
 
 ## 重要概念
 
-| 类别           | 重要主题                                                                                                                                            |
-| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| 数据结构         | 数组、地图、堆栈、树、套装                                                                                                                                   |
-| 算法           | 二进制搜索、广度优先搜索、深度优先搜索、递归                                                                                                                          |
-| JavaScript语言 | 数据类型（检查类型、类型强制转换）、范围、闭合、回调、如何使用此处关键字、面向对象编程（原型、类、方法），箭头函数与普通函数、通过`Function.prototype.apply()` / `Function.prototype.call()`调用函数，`Promise`，处理多参数 |
-| DOM          | DOM遍历、DOM创建、DOM操作、访问元素/节点属性、事件委托                                                                                                                |
-| 运行时API       | 计时器（`setTimeout`、`setInterval`）                                                                                                                 |
+| 类别 | 重要主题 |
+| --- | --- |
+| 数据结构 | 数组、地图、堆栈、树、套装 |
+| 算法 | 二进制搜索、广度优先搜索、深度优先搜索、递归 |
+| JavaScript 语言 | 数据类型（检查类型、类型强制转换）、范围、闭合、回调、如何使用此处关键字、面向对象编程（原型、类、方法），箭头函数与普通函数、通过`Function.prototype.apply()` / `Function.prototype.call()`调用函数，`Promise`，处理多参数 |
+| DOM | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托 |
+| 运行时 API | 计时器（`setTimeout`、`setInterval`） |
 
-## 如何准备JavaScript编码面试
+## 如何准备 JavaScript 编码面试
 
-JavaScript编码面试类似于算法编码面试，应该采用相似的方法。 自然地，JavaScript编码面试与评估候选人的方式在某些方面与算法编码面试重叠。
+JavaScript 编码面试类似于算法编码面试，应该采用相似的方法。 自然地，JavaScript 编码面试与评估候选人的方式在某些方面与算法编码面试重叠。
 
--   **问题解决**: 有系统和逻辑的方法来理解和解决问题。 将问题分解为较小的独立问题。 评估不同的方法及其权衡。
--   **软件工程基础**: 熟悉数据结构、算法、运行时复杂度分析、使用设计模式、使用干净的抽象设计解决方案。
--   **领域专业知识**: 理解前端领域和相关语言：浏览器（DOM和DOM API）、HTML、CSS、JavaScript和性能。
--   **沟通**: 询问澄清细节并清楚地解释自己的方法和考虑因素。
--   **验证**: 识别各种要测试代码的方案，包括边缘情况。 能够诊断并修复出现的任何问题。
+- **问题解决**: 有系统和逻辑的方法来理解和解决问题。 将问题分解为较小的独立问题。 评估不同的方法及其权衡。
+- **软件工程基础**: 熟悉数据结构、算法、运行时复杂度分析、使用设计模式、使用干净的抽象设计解决方案。
+- **领域专业知识**: 理解前端领域和相关语言：浏览器（DOM 和 DOM API）、HTML、CSS、JavaScript 和性能。
+- **沟通**: 询问澄清细节并清楚地解释自己的方法和考虑因素。
+- **验证**: 识别各种要测试代码的方案，包括边缘情况。 能够诊断并修复出现的任何问题。
 
 ## 有用的提示
 
--   **虚构的想法**。 JavaScript的标准库没有一些有用的数据结构和算法，例如队列、堆、二分搜索，这可以使您在JavaScript编码面试期间更轻松。 然而，您可以询问面试官是否可以假装这样的数据结构/算法存在，并直接在解决方案中使用它，而无需实现它。
--   **纯函数**。 编写纯函数，这些函数具有可重用和可插入性的好处，即函数不依赖于函数外的状态，并且不会产生副作用。
--   **明智地选择数据结构**。注意您选择数据结构的选择，并了解代码的时间复杂度。 如果要在解决方案中使用基本JavaScript数组、对象、集合、映射操作，应熟悉这些时间/空间复杂度。 这些时间/空间复杂度在不同的语言中可能有所不同。 不要编写运行时间为O(n<sup>2</sup>)的代码，如果可以使用哈希图来在O(n)运行时间内完成操作，则可以避免此类情况。
--   **`this`很重要**。 如果一个函数接受回调函数作为参数，请考虑`this`变量应该如何行动。 对于许多内置函数，`this`是回调函数调用时提供的参数之一。
--   **回调函数内的突变**。注意回调函数突变正在处理的数据结构。 您可能不需要在面试期间处理此情况，但应在相关情况下明确提出此类情况。
--   **递归边缘案例**。
-    -   如果您已经确定解决问题需要递归，请问输入大小以及如何处理递归堆栈溢出的情况。 通常情况下，您不必处理它，但是引起此问题是一个很好的信号。
-    -   嵌套深层次数据结构可能具有对它本身的递归引用，这使得某些操作（例如序列化）变得更加棘手。 问问面试官你是否要处理这样的情况。 通常情况下，您不必处理它，但是引起此问题是一个很好的信号。
+- **虚构的想法**。 JavaScript 的标准库没有一些有用的数据结构和算法，例如队列、堆、二分搜索，这可以使您在 JavaScript 编码面试期间更轻松。 然而，您可以询问面试官是否可以假装这样的数据结构/算法存在，并直接在解决方案中使用它，而无需实现它。
+- **纯函数**。 编写纯函数，这些函数具有可重用和可插入性的好处，即函数不依赖于函数外的状态，并且不会产生副作用。
+- **明智地选择数据结构**。注意您选择数据结构的选择，并了解代码的时间复杂度。 如果要在解决方案中使用基本 JavaScript 数组、对象、集合、映射操作，应熟悉这些时间/空间复杂度。 这些时间/空间复杂度在不同的语言中可能有所不同。 不要编写运行时间为 O(n<sup>2</sup>)的代码，如果可以使用哈希图来在 O(n)运行时间内完成操作，则可以避免此类情况。
+- **`this`很重要**。 如果一个函数接受回调函数作为参数，请考虑`this`变量应该如何行动。 对于许多内置函数，`this`是回调函数调用时提供的参数之一。
+- **回调函数内的突变**。注意回调函数突变正在处理的数据结构。 您可能不需要在面试期间处理此情况，但应在相关情况下明确提出此类情况。
+- **递归边缘案例**。
+  - 如果您已经确定解决问题需要递归，请问输入大小以及如何处理递归堆栈溢出的情况。 通常情况下，您不必处理它，但是引起此问题是一个很好的信号。
+  - 嵌套深层次数据结构可能具有对它本身的递归引用，这使得某些操作（例如序列化）变得更加棘手。 问问面试官你是否要处理这样的情况。 通常情况下，您不必处理它，但是引起此问题是一个很好的信号。
 
 ## 最佳实践问题
 
-从经验上看，在频率和涵盖的重要概念方面，最佳的JavaScript编码面试问题是：
+从经验上看，在频率和涵盖的重要概念方面，最佳的 JavaScript 编码面试问题是：
 
--   [Debounce](/questions/javascript/debounce)
--   [Throttle](/questions/javascript/throttle)
--   [Array.prototype.filter](/questions/javascript/array-filter)
--   [Promise.all](/questions/javascript/promise-all)
--   [Curry](/questions/javascript/curry)
--   [Flatten](/questions/javascript/flatten)
--   [getElementsByTagName](/questions/javascript/get-elements-by-class-name)
--   [Deep Clone](/questions/javascript/deep-clone)
--   [Data Selection](/questions/javascript/data-selection)
+- [Debounce](/questions/javascript/debounce)
+- [Throttle](/questions/javascript/throttle)
+- [Array.prototype.filter](/questions/javascript/array-filter)
+- [Promise.all](/questions/javascript/promise-all)
+- [Curry](/questions/javascript/curry)
+- [Flatten](/questions/javascript/flatten)
+- [getElementsByTagName](/questions/javascript/get-elements-by-class-name)
+- [Deep Clone](/questions/javascript/deep-clone)
+- [Data Selection](/questions/javascript/data-selection)
 
-GreatFrontEnd有[全面的JavaScript编码问题列表](/questions/js/coding/utilities)，您可以练习。 还有可以运行您的代码以验证正确性的自动化测试用例，以及由前FAANG资深工程师编写的解决方案。
+GreatFrontEnd 有[全面的 JavaScript 编码问题列表](/questions/js/coding/utilities)，您可以练习。 还有可以运行您的代码以验证正确性的自动化测试用例，以及由前 FAANG 资深工程师编写的解决方案。
 
 请注意，我们在某些问题中故意含糊不清，并没有在问题说明中全面介绍要求。 但是，我们将在解决方案中涵盖尽可能多的方面。 在阅读解决方案时，如果您发现错过了一些内容，可能会感到沮丧，但是这可以锻炼您的提前思考，并考虑在解决方案工作时需要注意哪些可能区域。 最好在练习期间找出，而不是在实际面试中发现。
diff --git a/packages/front-end-interview-guidebook/contents/overview/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/overview/pt-BR.mdx
index d4ace85a4..6c7541cfd 100644
--- a/packages/front-end-interview-guidebook/contents/overview/pt-BR.mdx
+++ b/packages/front-end-interview-guidebook/contents/overview/pt-BR.mdx
@@ -76,14 +76,14 @@ Entrevistas comportamentais são um tópico amplo por si só, e nós [escrevemos
 A maioria das empresas terá um processo semelhante a:
 
 1.  **Triagem Inicial**
-    -   Ligação do Recrutador (Perguntas de Quiz podem ser feitas)
-    -   Avaliações online autogradadas ou projetos para serem feitos em casa
+    - Ligação do Recrutador (Perguntas de Quiz podem ser feitas)
+    - Avaliações online autogradadas ou projetos para serem feitos em casa
 2.  **Entrevista por Telefone**
-    -   Codificação (Implementação de algoritmos, funções em JavaScript ou construção de interfaces de usuário)
+    - Codificação (Implementação de algoritmos, funções em JavaScript ou construção de interfaces de usuário)
 3.  **Entrevista Completa**
-    -   Rodada de Codificação (Implementação de algoritmos, funções em JavaScript ou construção de interfaces de usuário)
-    -   Rodada de Design de Sistema
-    -   Rodada Comportamental
+    - Rodada de Codificação (Implementação de algoritmos, funções em JavaScript ou construção de interfaces de usuário)
+    - Rodada de Design de Sistema
+    - Rodada Comportamental
 
 A maneira mais segura de saber o que esperar é perguntar ao recrutador da empresa sobre o processo de entrevista para a função. Boas empresas até mesmo preparam um documento detalhado para explicar cada etapa do processo de entrevista, juntamente com recursos para orientar os candidatos a se prepararem para as entrevistas. Para grandes empresas que recebem um grande volume de candidatos, há uma boa chance de que alguns candidatos que tenham entrevistado com elas compartilhem suas experiências em plataformas como [Glassdoor](https://www.glassdoor.com/), [Blind](https://www.teamblind.com/) e [Reddit](https://www.reddit.com/). Isso pode fornecer informações valiosas sobre o processo de entrevista e o que esperar.
 
@@ -93,51 +93,51 @@ A maneira mais segura de saber o que esperar é perguntar ao recrutador da empre
 
 A matriz a seguir mostra a relevância/probabilidade de cada tipo de pergunta durante cada rodada de entrevista. É possível que uma rodada de entrevista inclua perguntas de diferentes tipos.
 
-| Rodada                     | Quiz     | Algoritmos   | UI (Interface de Usuário)   | JavaScript   | System Design   |
-| -------------------------- | -------- | ------------ | --------------------------- | ------------ | --------------- |
-| Avaliação Online           | Médio    | Alto         | Alto                        | Alto         | Nada            |
-| Chamada de Recrutador      | Médio    | Nenhum       | Nenhum                      | Nenhum       | Nenhum          |
-| Projeto para Fazer em Casa | Nenhum   | Nenhum       | Alto                        | Médio        | Médio           |
-| Codificação                | Baixo    | Alto         | Alto                        | Alto         | Baixo           |
-| Comportamental             | Baixo    | Nenhum       | Nenhum                      | Nenhum       | Nenhum          |
-| Design de Sistema          | Baixo    | Nenhum       | Baixo                       | Nenhum       | Alto            |
-| Gerente de Contratações    | Baixo    | Nenhum       | Nenhum                      | Nenhum       | Baixo           |
+| Rodada | Quiz | Algoritmos | UI (Interface de Usuário) | JavaScript | System Design |
+| --- | --- | --- | --- | --- | --- |
+| Avaliação Online | Médio | Alto | Alto | Alto | Nada |
+| Chamada de Recrutador | Médio | Nenhum | Nenhum | Nenhum | Nenhum |
+| Projeto para Fazer em Casa | Nenhum | Nenhum | Alto | Médio | Médio |
+| Codificação | Baixo | Alto | Alto | Alto | Baixo |
+| Comportamental | Baixo | Nenhum | Nenhum | Nenhum | Nenhum |
+| Design de Sistema | Baixo | Nenhum | Baixo | Nenhum | Alto |
+| Gerente de Contratações | Baixo | Nenhum | Nenhum | Nenhum | Baixo |
 
 ### Tipos de Perguntas Feitas por Empresas
 
 Aqui está um resumo dos tipos de perguntas feitas pelas principais empresas dos Estados Unidos.
 
-| Empresa       | Questionário |  Algoritmos  | JavaScript | UI (Interface de Usuário) | Design de Sistema | Comportamental |
-| :------------ | :----------: | :----------: | :--------: | :-----------------------: | :---------------: | :------------: |
-| Airbnb        |      Não     |      Sim     |     Sim    |            Sim            |        Não        |       Sim      |
-| Amazon        |      Sim     |      Sim     |     Sim    |            Sim            |        Sim        |       Sim      |
-| Apple         |      Sim     |      Sim     |     Sim    |            Sim            |    Desconhecido   |       Sim      |
-| ByteDance     |      Sim     |      Sim     |     Sim    |            Sim            |        Não        |       Sim      |
-| Dropbox       |      Não     |      Sim     |     Sim    |            Sim            |        Sim        |       Sim      |
-| Facebook/Meta |      Sim     |      Não     |     Sim    |            Não            |        Sim        |       Sim      |
-| Google        |      Sim     |      Sim     |     Sim    |            Sim            |        Sim        |       Sim      |
-| LinkedIn      |      Sim     |      Sim     |     Sim    |            Sim            |    Desconhecido   |       Sim      |
-| Lyft          |      Não     |      Não     |     Sim    |            Sim            |        Sim        |       Sim      |
-| Microsoft     |      Sim     |      Sim     |     Sim    |            Sim            |        Sim        |       Sim      |
-| Twitter       |      Sim     |      Sim     |     Sim    |            Sim            |        Sim        |       Sim      |
-| Uber          | Desconhecido | Desconhecido |     Sim    |            Sim            |    Desconhecido   |       Sim      |
+| Empresa | Questionário | Algoritmos | JavaScript | UI (Interface de Usuário) | Design de Sistema | Comportamental |
+| :-- | :-: | :-: | :-: | :-: | :-: | :-: |
+| Airbnb | Não | Sim | Sim | Sim | Não | Sim |
+| Amazon | Sim | Sim | Sim | Sim | Sim | Sim |
+| Apple | Sim | Sim | Sim | Sim | Desconhecido | Sim |
+| ByteDance | Sim | Sim | Sim | Sim | Não | Sim |
+| Dropbox | Não | Sim | Sim | Sim | Sim | Sim |
+| Facebook/Meta | Sim | Não | Sim | Não | Sim | Sim |
+| Google | Sim | Sim | Sim | Sim | Sim | Sim |
+| LinkedIn | Sim | Sim | Sim | Sim | Desconhecido | Sim |
+| Lyft | Não | Não | Sim | Sim | Sim | Sim |
+| Microsoft | Sim | Sim | Sim | Sim | Sim | Sim |
+| Twitter | Sim | Sim | Sim | Sim | Sim | Sim |
+| Uber | Desconhecido | Desconhecido | Sim | Sim | Desconhecido | Sim |
 
 **Legenda dos Tipos de Perguntas**
 
--   **Quiz**: Pergunta de estilo de quiz ou trivia com respostas limitadas.
--   **Algoritmos**: Implemente uma função que resolva um problema algorítmico. Normalmente, não é específico do domínio de front-end.
--   **JavaScript**: Implemente uma função/classe em JavaScript relacionada ao domínio de front-end.
--   **UI**: Crie uma interface de usuário usando HTML/CSS/JavaScript. Algumas empresas permitem que você use um framework de sua escolha, enquanto outras permitem apenas JavaScript puro (Vanilla JS) ou certos frameworks específicos.
--   **Design de Sistema**: Projete um sistema e discuta a arquitetura e seus componentes.
--   **Comportamental**: Discuta sua experiência específica trabalhando com outras pessoas e como você lidou com cenários difíceis.
+- **Quiz**: Pergunta de estilo de quiz ou trivia com respostas limitadas.
+- **Algoritmos**: Implemente uma função que resolva um problema algorítmico. Normalmente, não é específico do domínio de front-end.
+- **JavaScript**: Implemente uma função/classe em JavaScript relacionada ao domínio de front-end.
+- **UI**: Crie uma interface de usuário usando HTML/CSS/JavaScript. Algumas empresas permitem que você use um framework de sua escolha, enquanto outras permitem apenas JavaScript puro (Vanilla JS) ou certos frameworks específicos.
+- **Design de Sistema**: Projete um sistema e discuta a arquitetura e seus componentes.
+- **Comportamental**: Discuta sua experiência específica trabalhando com outras pessoas e como você lidou com cenários difíceis.
 
 ## Estudar e praticar
 
 Leia para descobrir como se preparar para os seguintes formatos de entrevista e tipos de perguntas relacionadas ao front-end:
 
--   [Questões de codificação](/front-end-interview-guidebook/coding)
-    -   [Codificação Algoritmica](/front-end-interview-guidebook/algoritms)
-    -   [Questões de JavaScript](/front-end-interview-guidebook/javascript)
-    -   [Codificação de Interface do Usuário](/front-end-interview-guidebook/user-interface)
--   [Perguntas de Design do Sistema](/front-end-interview-guidebook/system-design)
--   [Perguntas do Quiz](/front-end-interview-guidebook/quiz)
+- [Questões de codificação](/front-end-interview-guidebook/coding)
+  - [Codificação Algoritmica](/front-end-interview-guidebook/algoritms)
+  - [Questões de JavaScript](/front-end-interview-guidebook/javascript)
+  - [Codificação de Interface do Usuário](/front-end-interview-guidebook/user-interface)
+- [Perguntas de Design do Sistema](/front-end-interview-guidebook/system-design)
+- [Perguntas do Quiz](/front-end-interview-guidebook/quiz)
diff --git a/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx
index 41c5bc470..737a257f3 100644
--- a/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx
+++ b/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx
@@ -3,18 +3,18 @@ title: 前端面试——权威概述和准备指南
 description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指南。 了解所有内容：什么可以期望，不同的面试问题类型，以及如何准备。
 ---
 
-前端面试通常很难准备。 可能存在许多不同的面试形式，而不同公司的前端工程师评估标准也没有行业的规范结构。 有些公司针对前端工程师和通用软件工程师使用相同的面试流程，而有些公司（例如Google和Amazon）则在通用软件工程师环节和前端领域特定环节之间均有面试流程。
+前端面试通常很难准备。 可能存在许多不同的面试形式，而不同公司的前端工程师评估标准也没有行业的规范结构。 有些公司针对前端工程师和通用软件工程师使用相同的面试流程，而有些公司（例如 Google 和 Amazon）则在通用软件工程师环节和前端领域特定环节之间均有面试流程。
 
-近年来，业界逐渐转向不再要求前端面试候选人解决数据结构和算法（DSA）问题。 相反，候选人将需要实现常见的前端库函数和/或构建实用的UI组件/应用程序，以测试他们对实际和相关的前端概念的理解。 这是一个令人鼓舞的趋势，因为与大多数DSA问题不同，前端面试问题与前端工程师的日常职责高度相关，是更准确的评估。
+近年来，业界逐渐转向不再要求前端面试候选人解决数据结构和算法（DSA）问题。 相反，候选人将需要实现常见的前端库函数和/或构建实用的 UI 组件/应用程序，以测试他们对实际和相关的前端概念的理解。 这是一个令人鼓舞的趋势，因为与大多数 DSA 问题不同，前端面试问题与前端工程师的日常职责高度相关，是更准确的评估。
 
 但是，许多现有的软件工程面试资源都针对通用软件工程角色而不是一种更小众的和小众的前端工程师领域;你几乎找不到有关前端系统设计的任何资源。 这些因素加上可能的领域主题的广度使得准备前端面试是一个漫长，乏味且困难的过程。
 
-请不要担心！ GreatFrontEnd旨在成为前端工程师通过一站式平台获得必要知识并进行前端面试的最佳资源。 在GreatFrontEnd上，读者可以：
+请不要担心！ GreatFrontEnd 旨在成为前端工程师通过一站式平台获得必要知识并进行前端面试的最佳资源。 在 GreatFrontEnd 上，读者可以：
 
 1.  学习如何创建一个专门针对前端工程职位的[**精彩简历**](/front-end-interview-guidebook/resume)。
 2.  学习适用于所有问题类型的**重要的前端概念和技术**。
 3.  准备最常见的**前端面试问题类型**（编码，系统设计，测验，行为）。
-4.  [**练习问题**](/questions)，涵盖最常见的前端面试格式和由前FAANG高级工程师编写的**高质量解决方案**。
+4.  [**练习问题**](/questions)，涵盖最常见的前端面试格式和由前 FAANG 高级工程师编写的**高质量解决方案**。
 5.  浏览建议的[**学习计划**](/get-started)，并采用**结构化准备方法**。
 
 ## 准备精彩简历
@@ -23,7 +23,7 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
 
 如果您在申请工作时遇到了困难，即使拥有必要的资格，也可能是因为您的简历。 即使高素质的候选人可能也不知道如何有效地展示他们的成就在简历中，因此可能无法获得短名单。 需要记住的是，低资格并不总是不被选中的原因；有时只是因为呈现不良和未包含重要内容。 一旦您通过简历筛选流程，过去的成就就变得次要了，您的技术能力成为首要考虑因素，这可以通过学习和改进来实现。 因此，通过提交代表您的高水平的优秀简历，进入门槛是极其重要的。
 
-虽然已有一些有关制作良好的软件工程简历的资源，例如[Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/)和[FAANG Tech Leads的简历手册](https://www.faangtechleads.com/resume/handbook)，但它们都是通用的，不是针对前端工程师的。 我们写了一些[如何为前端工程职位定制简历的技巧](/front-end-interview-guidebook/resume)。
+虽然已有一些有关制作良好的软件工程简历的资源，例如[Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/)和[FAANG Tech Leads 的简历手册](https://www.faangtechleads.com/resume/handbook)，但它们都是通用的，不是针对前端工程师的。 我们写了一些[如何为前端工程职位定制简历的技巧](/front-end-interview-guidebook/resume)。
 
 ## 按问题类型准备
 
@@ -36,18 +36,18 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
 编码问题将涉及编写代码（搞定！）。 但您需要编写的代码以及您将编写代码的平台可能截然不同。 您可能会问到：
 
 1.  **算法编码**：解决棘手的算法问题，评估您对数据结构，算法和时间复杂度的理解。 [阅读算法编码面试](/front-end-interview-guidebook/algorithms)的相关内容。
-2.  **JavaScript编码**：在JavaScript中实现与前端领域相关且在前端开发过程中常用的函数或数据结构。 [阅读JavaScript编码面试的相关内容](/front-end-interview-guidebook/javascript)。
-3.  **用户界面编码**：使用HTML，CSS和JavaScript构建用户界面（组件，小部件，应用程序），有时甚至包括使用JavaScript框架。 [阅读有关用户界面编码面试的相关内容](/front-end-interview-guidebook/user-interface)。
+2.  **JavaScript 编码**：在 JavaScript 中实现与前端领域相关且在前端开发过程中常用的函数或数据结构。 [阅读 JavaScript 编码面试的相关内容](/front-end-interview-guidebook/javascript)。
+3.  **用户界面编码**：使用 HTML，CSS 和 JavaScript 构建用户界面（组件，小部件，应用程序），有时甚至包括使用 JavaScript 框架。 [阅读有关用户界面编码面试的相关内容](/front-end-interview-guidebook/user-interface)。
 
 公司愈趋趋向使用领域特定的编程问题，而不是测试关于算法和数据结构的知识，因为前者对于评估前端工程工作所需的核心技能更为相关。
 
 ### 系统设计问题
 
-系统设计面试是高度无定形的面试，涉及设计软件系统来解决模糊的问题或情景。 候选人将需要将系统分解为较小的组件，绘制架构图，设计API，在系统的某些部分进行深入交流，并讨论权衡取舍才能成功。
+系统设计面试是高度无定形的面试，涉及设计软件系统来解决模糊的问题或情景。 候选人将需要将系统分解为较小的组件，绘制架构图，设计 API，在系统的某些部分进行深入交流，并讨论权衡取舍才能成功。
 
 系统设计面试通常仅提供给高级别的候选人，并且所需的系统可以是以下类型和示例之一：
 
-1.  **分布式系统**：Twitter后端，URL缩短器
+1.  **分布式系统**：Twitter 后端，URL 缩短器
 2.  **客户端应用程序**：新闻推送，照片共享应用程序
 3.  **复杂的用户界面组件**：自动完成，下拉菜单，模态
 
@@ -76,14 +76,14 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
 大多数公司将有类似以下的招聘流程：
 
 1.  **初步筛选**
-    -   招聘人员通话（可能会问有关测验问题）
-    -   自动分级的在线评估或接回家的项目
+    - 招聘人员通话（可能会问有关测验问题）
+    - 自动分级的在线评估或接回家的项目
 2.  **电话筛选**
-    -   编程（实现算法，JavaScript函数或构建用户界面）
+    - 编程（实现算法，JavaScript 函数或构建用户界面）
 3.  **完整循环**
-    -   编程环节（实现算法，JavaScript函数或构建用户界面）
-    -   系统设计环节
-    -   行为环节
+    - 编程环节（实现算法，JavaScript 函数或构建用户界面）
+    - 系统设计环节
+    - 行为环节
 
 最可靠的方法是询问招聘公司有关该角色的面试流程。 良好的公司甚至会准备详细的文件来解释每个面试阶段以及有关资源，指导候选人准备面试。 对于看到大量申请人的大公司来说，有人会通过[Glassdoor](https://www.glassdoor.com/), [Blind](https://www.teamblind.com/)和[Reddit](https://www.reddit.com/)等平台分享他们的面试经验。
 
@@ -93,51 +93,51 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
 
 以下矩阵显示了每个面试轮次中每种问题类型的相关程度/可能性。 面试轮可能包括来自不同问题类型的问题。
 
-| 环节             | 测验   | 算法      | UI   | JavaScript | 系统设计        |
-| -------------- | ---- | ------- | ---- | ---------- | ----------- |
-| 在线评估           | 中等   | 高       | 高    | 高          | 无           |
-| 招聘人员通话         | 中等   | 无       | 无    | 无          | 无           |
-| 接回家的项目         | 无    | 无       | 高    | 中等         | 中等          |
-| 编程             | 低    | 高       | 高    | 高          | 低           |
-| 行为问题           | 低    | 无       | 无    | 无          | 无           |
-| 系统设计           | 低    | 无       | 低    | 无          | 高           |
-| 招聘经理           | 低    | 无       | 无    | 无          | 低           |
+| 环节         | 测验 | 算法 | UI  | JavaScript | 系统设计 |
+| ------------ | ---- | ---- | --- | ---------- | -------- |
+| 在线评估     | 中等 | 高   | 高  | 高         | 无       |
+| 招聘人员通话 | 中等 | 无   | 无  | 无         | 无       |
+| 接回家的项目 | 无   | 无   | 高  | 中等       | 中等     |
+| 编程         | 低   | 高   | 高  | 高         | 低       |
+| 行为问题     | 低   | 无   | 无  | 无         | 无       |
+| 系统设计     | 低   | 无   | 低  | 无         | 高       |
+| 招聘经理     | 低   | 无   | 无  | 无         | 低       |
 
 ### 公司问的问题类型
 
 以下是美国顶尖公司问的问题类型摘要。
 
-| 公司            |  测验 |  算法 | JavaScript |  UI | 系统设计 | 行为面试 |
-| :------------ | :-: | :-: | :--------: | :-: | :--: | :--: |
-| 爱彼迎           |  否  |  是  |      是     |  是  |   否  |   是  |
-| 亚马逊           |  是  |  是  |      是     |  是  |   是  |   是  |
-| 苹果            |  是  |  是  |      是     |  是  |  未知  |   是  |
-| 字节跳动          |  是  |  是  |      是     |  是  |   否  |   是  |
-| Dropbox       |  否  |  是  |      是     |  是  |   是  |   是  |
-| Facebook/Meta |  是  |  否  |      是     |  否  |   是  |   是  |
-| 谷歌            |  是  |  是  |      是     |  是  |   是  |   是  |
-| 领英            |  是  |  是  |      是     |  是  |  未知  |   是  |
-| Lyft          |  否  |  否  |      是     |  是  |   是  |   是  |
-| 微软            |  是  |  是  |      是     |  是  |   是  |   是  |
-| 推特            |  是  |  是  |      是     |  是  |   是  |   是  |
-| Uber          |  未知 |  未知 |      是     |  是  |  未知  |   是  |
+| 公司          | 测验 | 算法 | JavaScript | UI  | 系统设计 | 行为面试 |
+| :------------ | :--: | :--: | :--------: | :-: | :------: | :------: |
+| 爱彼迎        |  否  |  是  |     是     | 是  |    否    |    是    |
+| 亚马逊        |  是  |  是  |     是     | 是  |    是    |    是    |
+| 苹果          |  是  |  是  |     是     | 是  |   未知   |    是    |
+| 字节跳动      |  是  |  是  |     是     | 是  |    否    |    是    |
+| Dropbox       |  否  |  是  |     是     | 是  |    是    |    是    |
+| Facebook/Meta |  是  |  否  |     是     | 否  |    是    |    是    |
+| 谷歌          |  是  |  是  |     是     | 是  |    是    |    是    |
+| 领英          |  是  |  是  |     是     | 是  |   未知   |    是    |
+| Lyft          |  否  |  否  |     是     | 是  |    是    |    是    |
+| 微软          |  是  |  是  |     是     | 是  |    是    |    是    |
+| 推特          |  是  |  是  |     是     | 是  |    是    |    是    |
+| Uber          | 未知 | 未知 |     是     | 是  |   未知   |    是    |
 
 **问题类型传奇**
 
--   **测验**：封闭的测验/问答样式问题。
--   **算法**：实现解决算法问题的功能。 通常不特定于前端领域。
--   **JavaScript**：在JavaScript中实现与前端领域相关的功能/类。
--   **用户界面**：使用HTML/CSS/JavaScript构建用户界面。 一些公司允许您使用自己选择的框架，而有些公司只允许使用Vanilla JS/某些框架。
--   **系统设计**：设计系统并讨论体系结构及其组成部分。
--   **行为问题**：讨论与他人合作的具体经验以及您如何处理困难情况。
+- **测验**：封闭的测验/问答样式问题。
+- **算法**：实现解决算法问题的功能。 通常不特定于前端领域。
+- **JavaScript**：在 JavaScript 中实现与前端领域相关的功能/类。
+- **用户界面**：使用 HTML/CSS/JavaScript 构建用户界面。 一些公司允许您使用自己选择的框架，而有些公司只允许使用 Vanilla JS/某些框架。
+- **系统设计**：设计系统并讨论体系结构及其组成部分。
+- **行为问题**：讨论与他人合作的具体经验以及您如何处理困难情况。
 
 ## 学习和实践
 
 继续阅读，了解如何准备以下前端面试格式/问题类型：
 
--   [编程问题](/front-end-interview-guidebook/coding)
-    -   [算法问题](/front-end-interview-guidebook/algorithms)
-    -   [JavaScript问题](/front-end-interview-guidebook/javascript)
-    -   [用户界面问题](/front-end-interview-guidebook/user-interface)
--   [系统设计问题](/front-end-interview-guidebook/system-design)
--   [测验问题](/front-end-interview-guidebook/quiz)
+- [编程问题](/front-end-interview-guidebook/coding)
+  - [算法问题](/front-end-interview-guidebook/algorithms)
+  - [JavaScript 问题](/front-end-interview-guidebook/javascript)
+  - [用户界面问题](/front-end-interview-guidebook/user-interface)
+- [系统设计问题](/front-end-interview-guidebook/system-design)
+- [测验问题](/front-end-interview-guidebook/quiz)
diff --git a/packages/front-end-interview-guidebook/contents/quiz/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/quiz/pt-BR.mdx
index 3058aac26..974b1136e 100644
--- a/packages/front-end-interview-guidebook/contents/quiz/pt-BR.mdx
+++ b/packages/front-end-interview-guidebook/contents/quiz/pt-BR.mdx
@@ -7,39 +7,39 @@ Perguntas de quiz, também conhecidas como perguntas de trivia, são perguntas c
 
 ## Exemplos
 
--   [Explique qual é o modelo da caixa CSS.]\(/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different box-models)
--   [O que é a especificidade do seletor CSS?](/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work)
--   [Quais são as diferenças entre variáveis criadas usando `let`, `var` ou `const`?](/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const)
--   [Explique como `this` funciona em JavaScript.](/questions/quiz/explain-how-this-works-in-javascript)
+- [Explique qual é o modelo da caixa CSS.]\(/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different box-models)
+- [O que é a especificidade do seletor CSS?](/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work)
+- [Quais são as diferenças entre variáveis criadas usando `let`, `var` ou `const`?](/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const)
+- [Explique como `this` funciona em JavaScript.](/questions/quiz/explain-how-this-works-in-javascript)
 
 Além de ser questionado sobre os fundamentos de front-end (HTML, CSS, JavaScript), você também pode ser questionado sobre perguntas específicas de frameworks se alegar conhecimento deles (seja verbalmente durante as entrevistas ou quando os entrevistadores examinam seu currículo):
 
--   Quais problemas a tecnologia X resolve?
--   Quais são as vantagens e desvantagens da tecnologia X?
--   Como funciona a tecnologia X por dentro?
--   Com o que a tecnologia X se compara em relação à tecnologia Y?
+- Quais problemas a tecnologia X resolve?
+- Quais são as vantagens e desvantagens da tecnologia X?
+- Como funciona a tecnologia X por dentro?
+- Com o que a tecnologia X se compara em relação à tecnologia Y?
 
 ## Rodadas Relevantes
 
 Normalmente, não haveria rodadas de entrevista apenas fazendo perguntas de quiz para você. No entanto, os entrevistadores podem surpreendê-lo com perguntas no meio de entrevistas focadas em outros formatos, como codificação e design de sistemas.
 
--   **Chamada de Recrutador**: Devido à natureza fechada das perguntas de quiz, elas podem até ser feitas por pessoal não técnico, como recrutadores. Felizmente, os não engenheiros provavelmente não são capazes de avaliar a precisão e provavelmente estão apenas combinando as palavras-chave em suas respostas com as soluções fornecidas a eles. Nos piores cenários, você provavelmente ainda pode passar respondendo algo que pareça sensato e inclua as palavras-chave corretas.
--   **Avaliação Online**: Embora incomum, é possível que você receba perguntas de múltipla escolha e tenha que escolher uma resposta correta entre elas.
--   **Rodada de Codificação**: Os entrevistadores podem fazer algumas perguntas de quiz antes que qualquer codificação comece para aquecer você. Ou enquanto você está codificando e explicando seu código, o entrevistador pode querer aprofundar algo que você acabou de mencionar. Portanto, é melhor ter um bom entendimento de tudo o que você diz/faz.
--   **Rodada de Design de Sistema**: Assim como na rodada de codificação, o entrevistador pode fazer mais perguntas sobre as coisas que você menciona.
--   **Rodada com o Gerente de Contratações**: As rodadas com o gerente de contratações geralmente não são destinadas a serem técnicas, mas eles podem revisar seu currículo e fazer perguntas de quiz relacionadas às tecnologias/projetos mencionados em seu currículo.
+- **Chamada de Recrutador**: Devido à natureza fechada das perguntas de quiz, elas podem até ser feitas por pessoal não técnico, como recrutadores. Felizmente, os não engenheiros provavelmente não são capazes de avaliar a precisão e provavelmente estão apenas combinando as palavras-chave em suas respostas com as soluções fornecidas a eles. Nos piores cenários, você provavelmente ainda pode passar respondendo algo que pareça sensato e inclua as palavras-chave corretas.
+- **Avaliação Online**: Embora incomum, é possível que você receba perguntas de múltipla escolha e tenha que escolher uma resposta correta entre elas.
+- **Rodada de Codificação**: Os entrevistadores podem fazer algumas perguntas de quiz antes que qualquer codificação comece para aquecer você. Ou enquanto você está codificando e explicando seu código, o entrevistador pode querer aprofundar algo que você acabou de mencionar. Portanto, é melhor ter um bom entendimento de tudo o que você diz/faz.
+- **Rodada de Design de Sistema**: Assim como na rodada de codificação, o entrevistador pode fazer mais perguntas sobre as coisas que você menciona.
+- **Rodada com o Gerente de Contratações**: As rodadas com o gerente de contratações geralmente não são destinadas a serem técnicas, mas eles podem revisar seu currículo e fazer perguntas de quiz relacionadas às tecnologias/projetos mencionados em seu currículo.
 
 Como você pode ver, pode-se esperar que façam perguntas de quiz em quase todas as rodadas possíveis. Esteja preparado o tempo todo.
 
 ## Conceitos Importantes
 
-| Area                      | Tópicos                                                                                                                                                           |
-| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| HTML                      | HTML Semântico, Elementos de Bloco vs. Elementos Inline, `<head>`, `<script>`, `<style>`, `<link>`, `<form>`, `<input>`, Validação e Envio de Formulário          |
-| CSS                       | Modelo de Caixa, Seletores, Especificidade, Posicionamento, Unidades, Flexbox, Grid, Consultas de Mídia                                                           |
-| JavaScript                | Tipos de Dados, Escopo, Closures, `this`, Declaração de Variáveis (`var`, `let`, `const`), Métodos de Arrays, Métodos de Objetos, Promessas, Classes, Async/Await |
-| DOM                       | Criação/Manipulação/Travessia do DOM, Propagação/Captura de Eventos, Delegação de Eventos                                                                         |
-| APIs em Tempo de Execução | `fetch`, Armazenamento (`localStorage`, `sessionStorage`), Temporizadores (`setTimeout`, `setInterval`)                                                           |
+| Area | Tópicos |
+| --- | --- |
+| HTML | HTML Semântico, Elementos de Bloco vs. Elementos Inline, `<head>`, `<script>`, `<style>`, `<link>`, `<form>`, `<input>`, Validação e Envio de Formulário |
+| CSS | Modelo de Caixa, Seletores, Especificidade, Posicionamento, Unidades, Flexbox, Grid, Consultas de Mídia |
+| JavaScript | Tipos de Dados, Escopo, Closures, `this`, Declaração de Variáveis (`var`, `let`, `const`), Métodos de Arrays, Métodos de Objetos, Promessas, Classes, Async/Await |
+| DOM | Criação/Manipulação/Travessia do DOM, Propagação/Captura de Eventos, Delegação de Eventos |
+| APIs em Tempo de Execução | `fetch`, Armazenamento (`localStorage`, `sessionStorage`), Temporizadores (`setTimeout`, `setInterval`) |
 
 ## Dicas
 
@@ -51,6 +51,6 @@ Não recomendamos memorizar respostas para perguntas de quiz. É melhor realment
 
 GreatFrontEnd contém uma lista de mais de 100 perguntas de quiz com soluções detalhadas escritas para cada uma delas.
 
--   [Perguntas de Quiz de JavaScript](/questions/js/quiz)
--   [Perguntas de Quiz de JavaScript](/questions/js/quiz)
--   [Perguntas de Quiz de JavaScript](/questions/js/quiz)
+- [Perguntas de Quiz de JavaScript](/questions/js/quiz)
+- [Perguntas de Quiz de JavaScript](/questions/js/quiz)
+- [Perguntas de Quiz de JavaScript](/questions/js/quiz)
diff --git a/packages/front-end-interview-guidebook/contents/quiz/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/quiz/zh-CN.mdx
index c20c93d19..2e16f9d19 100644
--- a/packages/front-end-interview-guidebook/contents/quiz/zh-CN.mdx
+++ b/packages/front-end-interview-guidebook/contents/quiz/zh-CN.mdx
@@ -7,39 +7,39 @@ description: 准备测验式前端面试问题的指南——预期情况，需
 
 ## 示例
 
--   [解释CSS盒模型是什么。](/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
--   [什么是CSS选择器优先级？](/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work)
--   [`let`、`var`或`const`创建的变量有什么区别？](/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const)
--   [解释JavaScript中的`this`如何工作。](/questions/quiz/explain-how-this-works-in-javascript)
+- [解释 CSS 盒模型是什么。](/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
+- [什么是 CSS 选择器优先级？](/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work)
+- [`let`、`var`或`const`创建的变量有什么区别？](/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const)
+- [解释 JavaScript 中的`this`如何工作。](/questions/quiz/explain-how-this-works-in-javascript)
 
 除了要求您了解前端基础知识（HTML、CSS、JavaScript），如果您声称了解某些具体框架，面试官也可能就相关问题向您询问（无论是面试时口头提问还是确认您的简历时）：
 
--   X技术解决了哪些问题？
--   X技术的优点和缺点是什么？
--   X技术的底层是如何工作的？
--   X技术与Y技术有何区别？
+- X 技术解决了哪些问题？
+- X 技术的优点和缺点是什么？
+- X 技术的底层是如何工作的？
+- X 技术与 Y 技术有何区别？
 
 ## 相关环节
 
 通常不会有面试只问测验式问题的环节。 但是，在专注于其他格式（如编码和系统设计）的面试中，面试官可能会向您提问测验式问题。
 
--   **招聘专员电话**: 由于测验式问题的封闭性质，甚至非技术人员（如招聘专员）也可以提出测验式问题。 值得庆幸的是，非工程师可能无法评估准确性，并且可能只是将您的答案中的关键字与解决方案进行匹配。 在最糟糕的情况下，只要回复听起来合理并包含正确关键字的内容，您可能仍然能够通过。
--   **在线评估**: 虽然不常见，但有可能您会被要求回答多选题并从中选择正确答案。
--   **编码环节**: 面试官可能会在开始任何编码之前向您询问一些测验式问题以热身。 或者当您编写和解释代码时，面试官可能想进一步了解您刚才提到的某些内容。 因此，最好对您说/做的一切有良好的理解。
--   **系统设计环节**: 就像在编码环节一样，面试官可以就您所说的东西进一步提问。
--   **招聘经理环节**: 招聘经理环节通常不涉及技术，但他们可能会查看您的简历，并就其中提到的技术/项目向您提出相关的测验式问题。
+- **招聘专员电话**: 由于测验式问题的封闭性质，甚至非技术人员（如招聘专员）也可以提出测验式问题。 值得庆幸的是，非工程师可能无法评估准确性，并且可能只是将您的答案中的关键字与解决方案进行匹配。 在最糟糕的情况下，只要回复听起来合理并包含正确关键字的内容，您可能仍然能够通过。
+- **在线评估**: 虽然不常见，但有可能您会被要求回答多选题并从中选择正确答案。
+- **编码环节**: 面试官可能会在开始任何编码之前向您询问一些测验式问题以热身。 或者当您编写和解释代码时，面试官可能想进一步了解您刚才提到的某些内容。 因此，最好对您说/做的一切有良好的理解。
+- **系统设计环节**: 就像在编码环节一样，面试官可以就您所说的东西进一步提问。
+- **招聘经理环节**: 招聘经理环节通常不涉及技术，但他们可能会查看您的简历，并就其中提到的技术/项目向您提出相关的测验式问题。
 
 正如您所看到的，您几乎可以在任何可能的环节中都会被问及测验式问题。 随时做好准备。
 
 ## 重要概念
 
-| 领域         | 主题                                                                                  |
-| ---------- | ----------------------------------------------------------------------------------- |
-| HTML       | 语义化HTML，块级元素和行内元素，`<head>`、`<script>`、`<style>`、`<link>`、`<form>`、`<input>`，表单验证/提交 |
-| CSS        | 盒模型，选择器，优先级，定位，单位，Flexbox，Grid，媒体查询                                                 |
-| JavaScript | 数据类型，作用域，闭包，`this`，变量声明（`var`、`let`、`const`），数组方法，对象方法，Promise，类，异步/等待              |
-| DOM        | DOM创建/操作/遍历，事件冒泡/捕获，事件委托                                                            |
-| 运行时API     | `fetch`，存储（`localStorage`、`sessionStorage`），定时器（`setTimeout`、`setInterval`）         |
+| 领域 | 主题 |
+| --- | --- |
+| HTML | 语义化 HTML，块级元素和行内元素，`<head>`、`<script>`、`<style>`、`<link>`、`<form>`、`<input>`，表单验证/提交 |
+| CSS | 盒模型，选择器，优先级，定位，单位，Flexbox，Grid，媒体查询 |
+| JavaScript | 数据类型，作用域，闭包，`this`，变量声明（`var`、`let`、`const`），数组方法，对象方法，Promise，类，异步/等待 |
+| DOM | DOM 创建/操作/遍历，事件冒泡/捕获，事件委托 |
+| 运行时 API | `fetch`，存储（`localStorage`、`sessionStorage`），定时器（`setTimeout`、`setInterval`） |
 
 ## 提示
 
@@ -49,8 +49,8 @@ description: 准备测验式前端面试问题的指南——预期情况，需
 
 ## 练习题
 
-GreatFrontEnd的列表中包含100多个常见测验式问题，每个问题都有详细的解决方案。
+GreatFrontEnd 的列表中包含 100 多个常见测验式问题，每个问题都有详细的解决方案。
 
--   [JavaScript测验式问题](/questions/js/quiz)
--   [HTML测验式问题](/questions/html/quiz)
--   [CSS测验式问题](/questions/css/quiz)
+- [JavaScript 测验式问题](/questions/js/quiz)
+- [HTML 测验式问题](/questions/html/quiz)
+- [CSS 测验式问题](/questions/css/quiz)
diff --git a/packages/front-end-interview-guidebook/contents/resume/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/resume/pt-BR.mdx
index 953c242e5..f6fc059a5 100644
--- a/packages/front-end-interview-guidebook/contents/resume/pt-BR.mdx
+++ b/packages/front-end-interview-guidebook/contents/resume/pt-BR.mdx
@@ -9,18 +9,18 @@ Nesta página, oferecemos algumas dicas específicas para Front End Engineers a
 
 ## Requisitos Básicos
 
--   Preferencialmente mantido em uma página se você tiver menos de 5 anos de experiência, não excedendo duas páginas.
--   Construa usando o Microsoft Word, Google Docs, Pages ou LaTeX para que o Sistema de Rastreamento de Candidatos (ATS) possa analisar os currículos. Evite usar software de design.
--   Envie no formato PDF.
+- Preferencialmente mantido em uma página se você tiver menos de 5 anos de experiência, não excedendo duas páginas.
+- Construa usando o Microsoft Word, Google Docs, Pages ou LaTeX para que o Sistema de Rastreamento de Candidatos (ATS) possa analisar os currículos. Evite usar software de design.
+- Envie no formato PDF.
 
 ## Formatação e Estética
 
 Engenheiros de Front-End lidam frequentemente com interfaces de usuário e são esperados ter um aguçado senso de design. Isso refletirá muito mal em você como um Engenheiro de Front-End se o seu currículo não for esteticamente agradável.
 
--   Utilize um formato de coluna única.
--   Utilize fontes comuns que estejam disponíveis na maioria dos sistemas operacionais, como Arial, Calibri ou Garamond. Evite fontes extravagantes.
--   Mantenha-se a uma única fonte ou, no máximo, duas fontes (uma para os cabeçalhos e outra para o corpo do texto).
--   Tamanho de fonte mínimo de 11px.
+- Utilize um formato de coluna única.
+- Utilize fontes comuns que estejam disponíveis na maioria dos sistemas operacionais, como Arial, Calibri ou Garamond. Evite fontes extravagantes.
+- Mantenha-se a uma única fonte ou, no máximo, duas fontes (uma para os cabeçalhos e outra para o corpo do texto).
+- Tamanho de fonte mínimo de 11px.
 
 Seu currículo não precisa ser extremamente bonito e extravagante, apenas precisa parecer organizado e visualmente agradável. Se você tem recursos disponíveis, a maneira mais rápida de criar um currículo esteticamente agradável e compatível com ATS é adquirir modelos de currículo do [FAANG Tech Leads](https://www.faangtechleads.com/).
 
@@ -32,17 +32,17 @@ Para melhorar a classificação do seu currículo pelo ATS, inclua "Front End" e
 
 É comum as pessoas cometerem o erro de não fornecer detalhes suficientes sobre suas experiências e conquistas. Para se destacar, é importante fornecer informações suficientes sobre a **magnitude, complexidade e impacto** das suas experiências e conquistas.
 
--   **Ruim 👎**: "Construí um site com HTML, CSS e JavaScript".
--   **Melhor 👍**: "Construí um site de comércio eletrônico eficiente que permitia aos usuários navegar por centenas de itens, adicionar ao carrinho e finalizar a compra com PayPal". O site possui 20 mil usuários ativos por mês, carrega em menos de 2 segundos e tem uma pontuação de 98 no Lighthouse. Tecnologias utilizadas: Next.js, React, GraphQL, módulos de CSS
+- **Ruim 👎**: "Construí um site com HTML, CSS e JavaScript".
+- **Melhor 👍**: "Construí um site de comércio eletrônico eficiente que permitia aos usuários navegar por centenas de itens, adicionar ao carrinho e finalizar a compra com PayPal". O site possui 20 mil usuários ativos por mês, carrega em menos de 2 segundos e tem uma pontuação de 98 no Lighthouse. Tecnologias utilizadas: Next.js, React, GraphQL, módulos de CSS
 
 Aqui está uma lista não exaustiva de conquistas técnicas relacionadas ao front-end que são adequadas para serem mencionadas:
 
--   Trabalho no produto: Detalhe as funcionalidades desenvolvidas dentro de um produto.
--   **Performance**: Melhorias de desempenho realizadas e os ganhos resultantes em porcentagem. E.g. tamanho de carregamento da página, tempo de carregamento da página, melhorias na pontuação do Lighthouse, etc.
--   **Testes**: Número de testes escritos, quantos fluxos críticos eles abrangem, aumento percentual na cobertura de testes.
--   % ou redução numérica em erros/avisos de SEO. Essa métrica é fácil de obter se a empresa utilizar ferramentas de SEO como Ahrefs e Semrush.
--   **Acessibilidade (a11y)**: Número de erros a11y corrigidos, número de fluxos que foram melhorados para atender à conformidade do nível WCAG AA/AAA, número de componentes onde a11y melhorou.
--   **Ferramentas**: Modernização das tecnologias utilizadas em uma base de código, por exemplo, migrando uma base de código jQuery para React, melhorando a segurança de tipos ao introduzir o TypeScript. Você pode descrever o produto ou mencionar o número aproximado de linhas de código (LOCs) ou engenheiros trabalhando no código para dar uma ideia melhor da escala e complexidade.
+- Trabalho no produto: Detalhe as funcionalidades desenvolvidas dentro de um produto.
+- **Performance**: Melhorias de desempenho realizadas e os ganhos resultantes em porcentagem. E.g. tamanho de carregamento da página, tempo de carregamento da página, melhorias na pontuação do Lighthouse, etc.
+- **Testes**: Número de testes escritos, quantos fluxos críticos eles abrangem, aumento percentual na cobertura de testes.
+- % ou redução numérica em erros/avisos de SEO. Essa métrica é fácil de obter se a empresa utilizar ferramentas de SEO como Ahrefs e Semrush.
+- **Acessibilidade (a11y)**: Número de erros a11y corrigidos, número de fluxos que foram melhorados para atender à conformidade do nível WCAG AA/AAA, número de componentes onde a11y melhorou.
+- **Ferramentas**: Modernização das tecnologias utilizadas em uma base de código, por exemplo, migrando uma base de código jQuery para React, melhorando a segurança de tipos ao introduzir o TypeScript. Você pode descrever o produto ou mencionar o número aproximado de linhas de código (LOCs) ou engenheiros trabalhando no código para dar uma ideia melhor da escala e complexidade.
 
 ## Seção de Habilidades
 
@@ -50,42 +50,42 @@ A seção "Habilidades" é uma lista de idiomas e tecnologias que você possui e
 
 Devido à grande quantidade de diferentes tecnologias necessárias para construir aplicações de front-end, você pode descobrir que possui muitas tecnologias para adicionar à seção de habilidades do seu currículo. No entanto, não adicione todas as tecnologias! Isso dilui a importância das habilidades que realmente importam. Priorize os idiomas/tecnologias que:
 
-### 1.  Aparecem na descrição da vaga
+### 1. Aparecem na descrição da vaga
 
 Se uma habilidade aparece na descrição da vaga e você possui experiência com ela, definitivamente deve adicioná-la.
 
-### 2.  Liste apenas as tecnologias-chave que influenciam a arquitetura
+### 2. Liste apenas as tecnologias-chave que influenciam a arquitetura
 
 Bibliotecas como o React influenciam fortemente as outras escolhas de tecnologia associadas, enquanto bibliotecas como o Underscore/Lodash são agnósticas em relação à arquitetura e podem ser facilmente substituídas. Priorize as primeiras e omita bibliotecas pequenas/utilitárias que podem ser facilmente substituídas.
 
-### 3.  Amplamente conhecidas ou estão ganhando rapidamente popularidade
+### 3. Amplamente conhecidas ou estão ganhando rapidamente popularidade
 
 Isso demonstra que você está acompanhando o ecossistema moderno de front-end. A empresa também pode estar considerando adotar essa tecnologia, e se você tiver experiência nela, é uma vantagem.
 
-### 4.  Demonstre sua amplitude
+### 4. Demonstre sua amplitude
 
 Listar React, Angular e Vue (todos frameworks de visualização de front-end) é excessivo, mesmo que você realmente esteja familiarizado com todos eles. Poucas descrições de vagas listarão mais de uma tecnologia que serve ao mesmo propósito (e é um sinal de alerta se o fizerem). Adicionar muitas tecnologias (especialmente da mesma categoria) dificulta para o leitor ter uma noção das suas habilidades.
 
 Tente listar **pelo menos uma e no máximo duas** tecnologias que pertençam às seguintes categorias. Nem todas as categorias se aplicarão a você, então inclua apenas as relevantes. Exemplos populares são mostrados abaixo.
 
--   **Visualizar**: [React](https://reactjs.org/), [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/)
--   **Renderização Frameworks**: [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [Nuxt](https://nuxtjs.org/), [SvelteKit](https://kit.svelte.dev/)
--   **Gerenciamento de Estado**: [Redux](https://redux.js.org/), [Flux](https://facebook.github.io/flux/), [Jotai](https://jotai.org/), [Zustand](https://github.com/pmndrs/zustand), [Relay](https://relay.dev/)
--   **CSS**: [CSS Modules](https://github.com/css-modules/css-modules), [Styled Components](https://styled-components.com/), [Tailwind CSS](https://tailwindcss.com/), [Sass](https://sass-lang.com/), [Less](https://lesscss.org/)
--   **CSS Frameworks**: [Bootstrap](https://getbootstrap.com/), [Material UI](https://mui.com/), [Chakra UI](https://chakra-ui.com/), [Bulma](https://bulma.io/)
--   **Testes Unitários**: [Jest](https://jestjs.io/), [Vitest](https://vitest.dev/), [Storybook](https://storybook.js.org/), [Mocha](https://mochajs.org/), [Jasmine](https://jasmine.github.io/), [Karma](httpsformat@@7format@@8arma-runner.github.io/latest/index.html)
--   **Data Fetching**: [GraphQL](https://graphql.org/), [tRPC](https://trpc.io/), [TanStack Query](https://tanstack.com/query/v3/), [swr](https://swr.vercel.app/)
--   **Teste de Integração**: [Cypress](https://www.cypress.io/), [Selenium](https://www.selenium.dev/), [Puppeteer](https://pptr.dev/), [WebdriverIO](https://webdriver.io/), [Playwright](https://playwright.dev/)
--   **Ferramentas de Idioma**: [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [Flow](https://flow.org/), [ESLint](https://eslint.org/)
--   **Ferramentas de compilação (opcional)**: [webpack](https://webpack.js.org/), [Vite](https://vitejs.dev/), [Parcel](https://parceljs.org/), [Gulp](https://gulpjs.com/), [Rollup](https://rollupjs.org/), [Browserify](https://browserify.org/)
--   **Gerenciamento de Pacotes (opcional)**: [npm](https://www.npmjs.com/), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/)
+- **Visualizar**: [React](https://reactjs.org/), [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/)
+- **Renderização Frameworks**: [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [Nuxt](https://nuxtjs.org/), [SvelteKit](https://kit.svelte.dev/)
+- **Gerenciamento de Estado**: [Redux](https://redux.js.org/), [Flux](https://facebook.github.io/flux/), [Jotai](https://jotai.org/), [Zustand](https://github.com/pmndrs/zustand), [Relay](https://relay.dev/)
+- **CSS**: [CSS Modules](https://github.com/css-modules/css-modules), [Styled Components](https://styled-components.com/), [Tailwind CSS](https://tailwindcss.com/), [Sass](https://sass-lang.com/), [Less](https://lesscss.org/)
+- **CSS Frameworks**: [Bootstrap](https://getbootstrap.com/), [Material UI](https://mui.com/), [Chakra UI](https://chakra-ui.com/), [Bulma](https://bulma.io/)
+- **Testes Unitários**: [Jest](https://jestjs.io/), [Vitest](https://vitest.dev/), [Storybook](https://storybook.js.org/), [Mocha](https://mochajs.org/), [Jasmine](https://jasmine.github.io/), [Karma](httpsformat@@7format@@8arma-runner.github.io/latest/index.html)
+- **Data Fetching**: [GraphQL](https://graphql.org/), [tRPC](https://trpc.io/), [TanStack Query](https://tanstack.com/query/v3/), [swr](https://swr.vercel.app/)
+- **Teste de Integração**: [Cypress](https://www.cypress.io/), [Selenium](https://www.selenium.dev/), [Puppeteer](https://pptr.dev/), [WebdriverIO](https://webdriver.io/), [Playwright](https://playwright.dev/)
+- **Ferramentas de Idioma**: [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [Flow](https://flow.org/), [ESLint](https://eslint.org/)
+- **Ferramentas de compilação (opcional)**: [webpack](https://webpack.js.org/), [Vite](https://vitejs.dev/), [Parcel](https://parceljs.org/), [Gulp](https://gulpjs.com/), [Rollup](https://rollupjs.org/), [Browserify](https://browserify.org/)
+- **Gerenciamento de Pacotes (opcional)**: [npm](https://www.npmjs.com/), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/)
 
 ### Exemplo
 
 Isso é como a seção "Habilidades" no nosso currículo ficaria:
 
--   **Linguagens**: HTML, CSS, JavaScript, TypeScript
--   **Tecnologias**: React, Next.js, Tailwind CSS, Jest, Storybook, Cypress, React Query, Yarn, webpack
+- **Linguagens**: HTML, CSS, JavaScript, TypeScript
+- **Tecnologias**: React, Next.js, Tailwind CSS, Jest, Storybook, Cypress, React Query, Yarn, webpack
 
 Esta é exatamente a pilha de tecnologia utilizada para construir o GreatFrontEnd. Certamente você deve incluir HTML, CSS e JavaScript na seção de "Idiomas", caso contrário, algo está bastante errado.
 
diff --git a/packages/front-end-interview-guidebook/contents/resume/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/resume/zh-CN.mdx
index 4a5ecb133..1109f8002 100644
--- a/packages/front-end-interview-guidebook/contents/resume/zh-CN.mdx
+++ b/packages/front-end-interview-guidebook/contents/resume/zh-CN.mdx
@@ -9,89 +9,89 @@ description: 提高你的前端开发者/网页开发者的简历，以获得面
 
 ## 基本要求
 
--   如果您有不到5年的经验，则最好不要超过一页，最多不要超过两页。
--   使用Microsoft Word、Google Docs、Pages或LaTeX构建，以便应聘者跟踪系统（ATS）可以解析简历。 避免使用设计软件。
--   提交PDF格式。
+- 如果您有不到 5 年的经验，则最好不要超过一页，最多不要超过两页。
+- 使用 Microsoft Word、Google Docs、Pages 或 LaTeX 构建，以便应聘者跟踪系统（ATS）可以解析简历。 避免使用设计软件。
+- 提交 PDF 格式。
 
 ## 格式和美观度
 
 前端工程师经常处理用户界面，并且期望他们有敏锐的设计感。 如果您的简历外观不美观，那么这将给你身为前端工程师的形象带来很不好的影响。
 
--   使用单列格式。
--   使用大多数操作系统上可用的常见字体，例如Arial、Calibri或Garamond。 避免花俏的字体。
--   只使用一个或最多两个字体（一个用于标题，另一个用于正文）。
--   最小字体大小为11px。
+- 使用单列格式。
+- 使用大多数操作系统上可用的常见字体，例如 Arial、Calibri 或 Garamond。 避免花俏的字体。
+- 只使用一个或最多两个字体（一个用于标题，另一个用于正文）。
+- 最小字体大小为 11px。
 
-你的简历不需要过分漂亮和花哨，它只需要看起来整洁和视觉上令人愉悦即可。 如果你有多余的现金，最快创建美观且适合ATS的简历的方法是从[FAANG Tech Leads](https://www.faangtechleads.com/)购买简历模板。
+你的简历不需要过分漂亮和花哨，它只需要看起来整洁和视觉上令人愉悦即可。 如果你有多余的现金，最快创建美观且适合 ATS 的简历的方法是从[FAANG Tech Leads](https://www.faangtechleads.com/)购买简历模板。
 
 ## 工作经验部分
 
 简历的工作经验部分是最重要的，应占据简历的大部分空间。 此部分应着重强调您对过去或目前雇主的业务目标的贡献，
 
-为了提高简历的ATS排名，应在可能的情况下在简历中散布“Front End”。 如果您的正式头衔是“软件工程师”，但您已作为工作的一部分进行了大量的前端开发，请考虑将您的头衔更改为“前端工程师”/“前端软件工程师”/“软件工程师（前端）”等，以提高相关性。
+为了提高简历的 ATS 排名，应在可能的情况下在简历中散布“Front End”。 如果您的正式头衔是“软件工程师”，但您已作为工作的一部分进行了大量的前端开发，请考虑将您的头衔更改为“前端工程师”/“前端软件工程师”/“软件工程师（前端）”等，以提高相关性。
 
 人们常犯的一个错误是没有提供关于他们的经验和成就的足够细节。 为了脱颖而出，重要的是要提供有关您的经验和成果的规模、复杂性和影响的足够信息。
 
--   **差 👎**：“使用HTML、CSS和JavaScript构建了一个网站”。
--   **更好 👍**：“构建了一个高性能的电子商务网站，允许用户浏览数百种商品，将商品添加到购物车并使用PayPal结账。 该网站每月有20k的活跃用戶，加载速度低于2秒，Lighthouse得分为98。 使用的技术：Next.js、React、GraphQL、CSS模块”。
+- **差 👎**：“使用 HTML、CSS 和 JavaScript 构建了一个网站”。
+- **更好 👍**：“构建了一个高性能的电子商务网站，允许用户浏览数百种商品，将商品添加到购物车并使用 PayPal 结账。 该网站每月有 20k 的活跃用戶，加载速度低于 2 秒，Lighthouse 得分为 98。 使用的技术：Next.js、React、GraphQL、CSS 模块”。
 
 以下是一个前端相关的技术成就列表，适合提到：
 
--   **产品工作**：详细说明产品内部构建的功能。
--   **性能**：提供的性能改进，以及它们所带来的百分比收益。 例如， 页面加载大小、页面加载时间、Lighthouse得分改进等。
--   **测试**：编写测试的数量，它们覆盖了多少重要流程，测试覆盖率的百分比增加。
--   **SEO**：SEO错误/警告的降低占百分比或是具体数字。 如果公司使用SEO工具如Ahrefs和Semrush，则可以轻松获得此度量标准。
--   **可访问性(a11y)**：修复的a11y错误数量，改进了符合WCAG AA/AAA级标准的流程数目，以及增加的a11y组件数目。
--   **工具**：现代化技术在代码库中的现代化，例如将jQuery代码库迁移到React、通过引入TypeScript提高类型安全性等。 要么描述产品，要么提到代码行数/工程师数量，以更好地理解规模和复杂性。
+- **产品工作**：详细说明产品内部构建的功能。
+- **性能**：提供的性能改进，以及它们所带来的百分比收益。 例如， 页面加载大小、页面加载时间、Lighthouse 得分改进等。
+- **测试**：编写测试的数量，它们覆盖了多少重要流程，测试覆盖率的百分比增加。
+- **SEO**：SEO 错误/警告的降低占百分比或是具体数字。 如果公司使用 SEO 工具如 Ahrefs 和 Semrush，则可以轻松获得此度量标准。
+- **可访问性(a11y)**：修复的 a11y 错误数量，改进了符合 WCAG AA/AAA 级标准的流程数目，以及增加的 a11y 组件数目。
+- **工具**：现代化技术在代码库中的现代化，例如将 jQuery 代码库迁移到 React、通过引入 TypeScript 提高类型安全性等。 要么描述产品，要么提到代码行数/工程师数量，以更好地理解规模和复杂性。
 
 ## 技能部分
 
-“技能”部分是你拥有的语言和技术的列表，可作为当ATS/招聘人员/招聘经理阅读此部分时的快速清单/摘要。 至少，应该为“语言”和“技术”类别有两个列表项：
+“技能”部分是你拥有的语言和技术的列表，可作为当 ATS/招聘人员/招聘经理阅读此部分时的快速清单/摘要。 至少，应该为“语言”和“技术”类别有两个列表项：
 
 由于构建前端应用程序需要多种不同的技术，您可能会发现您有许多要添加到简历技能部分中的技术。 但不要添加每个技术！ 这会削弱实际重要技能的权重。 优先考虑以下语言/技术：
 
-### 1.  在工作列表中出现
+### 1. 在工作列表中出现
 
 如果某项技能出现在工作列表中并且你有使用它的经验，一定要将其添加进去。
 
-### 2.  仅列出影响架构的关键技术
+### 2. 仅列出影响架构的关键技术
 
-像React这样的库对其他相关技术选择产生了很大影响，而像Underscore/Lodash这样的库与架构无关，可以轻易地被替换掉。 优先考虑前者，省略小型/实用库，这些库易于替换。
+像 React 这样的库对其他相关技术选择产生了很大影响，而像 Underscore/Lodash 这样的库与架构无关，可以轻易地被替换掉。 优先考虑前者，省略小型/实用库，这些库易于替换。
 
-### 3.  广为人知或迅速走红
+### 3. 广为人知或迅速走红
 
 这表明你跟上了现代前端生态系统的发展。 公司也可能正在考虑迁移到该技术，如果您在该技术方面有经验，这是一个加分项。
 
-### 4.  展示您的广度
+### 4. 展示您的广度
 
-列出所有的React、Angular和Vue（所有前端视图框架）是过度的，即使您确实熟悉它们中的所有内容。 很少有工作列表会列出多个用于同一目的的技术（如果他们这样做，这是一个红旗信号）。 添加过多的技术（特别是同一类别的技术）会使读者更难以了解您的技能。
+列出所有的 React、Angular 和 Vue（所有前端视图框架）是过度的，即使您确实熟悉它们中的所有内容。 很少有工作列表会列出多个用于同一目的的技术（如果他们这样做，这是一个红旗信号）。 添加过多的技术（特别是同一类别的技术）会使读者更难以了解您的技能。
 
 尝试列出至少一个，最多两个属于以下类别的技术。 不能全部都适用于您，因此只包含相关的内容。 下面是一些热门的例子。
 
--   **View**：[React](https://reactjs.org/)、[Angular](https://angular.io/)、[Vue](https://vuejs.org/)、[Svelte](https://svelte.dev/)
--   **Rendering Frameworks**：[Next.js](https://nextjs.org/)、[Gatsby](https://www.gatsbyjs.com/)、[Nuxt](https://nuxtjs.org/)、[SvelteKit](https://kit.svelte.dev/)
--   **State Management**：[Redux](https://redux.js.org/)、[Flux](https://facebook.github.io/flux/)、[Jotai](https://jotai.org/)、[Zustand](https://github.com/pmndrs/zustand)、[Relay](https://relay.dev/)
--   **CSS**：[CSS Modules](https://github.com/css-modules/css-modules)、[Styled Components](https://styled-components.com/)、[Tailwind CSS](https://tailwindcss.com/)、[Sass](https://sass-lang.com/)、[Less](https://lesscss.org/)
--   **CSS框架**：[Bootstrap](https://getbootstrap.com/)、[Material UI](https://mui.com/)、[Chakra UI](https://chakra-ui.com/)、[Bulma](https://bulma.io/)
--   **单元测试**：[Jest](https://jestjs.io/)、[Vitest](https://vitest.dev/)、[Storybook](https://storybook.js.org/)、[Mocha](https://mochajs.org/)、[Jasmine](https://jasmine.github.io/)、[Karma](https://karma-runner.github.io/latest/index.html)
--   **数据获取**：[GraphQL](https://graphql.org/)、[tRPC](https://trpc.io/)、[TanStack Query](https://tanstack.com/query/v3/)、[swr](https://swr.vercel.app/)
--   **集成测试**：[Cypress](https://www.cypress.io/)、[Selenium](https://www.selenium.dev/)、[Puppeteer](https://pptr.dev/)、[WebdriverIO](https://webdriver.io/)、[Playwright](https://playwright.dev/)
--   **语言工具**：[Babel](https://babeljs.io/)、[TypeScript](https://www.typescriptlang.org/)、[Flow](https://flow.org/)、[ESLint](https://eslint.org/)
--   **编译工具（可选）**：[webpack](https://webpack.js.org/)、[Vite](https://vitejs.dev/)、[Parcel](https://parceljs.org/)、[Gulp](https://gulpjs.com/)、[Rollup](https://rollupjs.org/)、[Browserify](https://browserify.org/)
--   **软件包管理（可选）**：[npm](https://www.npmjs.com/)、[Yarn](https://yarnpkg.com/)、[pnpm](https://pnpm.io/)
+- **View**：[React](https://reactjs.org/)、[Angular](https://angular.io/)、[Vue](https://vuejs.org/)、[Svelte](https://svelte.dev/)
+- **Rendering Frameworks**：[Next.js](https://nextjs.org/)、[Gatsby](https://www.gatsbyjs.com/)、[Nuxt](https://nuxtjs.org/)、[SvelteKit](https://kit.svelte.dev/)
+- **State Management**：[Redux](https://redux.js.org/)、[Flux](https://facebook.github.io/flux/)、[Jotai](https://jotai.org/)、[Zustand](https://github.com/pmndrs/zustand)、[Relay](https://relay.dev/)
+- **CSS**：[CSS Modules](https://github.com/css-modules/css-modules)、[Styled Components](https://styled-components.com/)、[Tailwind CSS](https://tailwindcss.com/)、[Sass](https://sass-lang.com/)、[Less](https://lesscss.org/)
+- **CSS 框架**：[Bootstrap](https://getbootstrap.com/)、[Material UI](https://mui.com/)、[Chakra UI](https://chakra-ui.com/)、[Bulma](https://bulma.io/)
+- **单元测试**：[Jest](https://jestjs.io/)、[Vitest](https://vitest.dev/)、[Storybook](https://storybook.js.org/)、[Mocha](https://mochajs.org/)、[Jasmine](https://jasmine.github.io/)、[Karma](https://karma-runner.github.io/latest/index.html)
+- **数据获取**：[GraphQL](https://graphql.org/)、[tRPC](https://trpc.io/)、[TanStack Query](https://tanstack.com/query/v3/)、[swr](https://swr.vercel.app/)
+- **集成测试**：[Cypress](https://www.cypress.io/)、[Selenium](https://www.selenium.dev/)、[Puppeteer](https://pptr.dev/)、[WebdriverIO](https://webdriver.io/)、[Playwright](https://playwright.dev/)
+- **语言工具**：[Babel](https://babeljs.io/)、[TypeScript](https://www.typescriptlang.org/)、[Flow](https://flow.org/)、[ESLint](https://eslint.org/)
+- **编译工具（可选）**：[webpack](https://webpack.js.org/)、[Vite](https://vitejs.dev/)、[Parcel](https://parceljs.org/)、[Gulp](https://gulpjs.com/)、[Rollup](https://rollupjs.org/)、[Browserify](https://browserify.org/)
+- **软件包管理（可选）**：[npm](https://www.npmjs.com/)、[Yarn](https://yarnpkg.com/)、[pnpm](https://pnpm.io/)
 
 ### 示例
 
 这是我们的简历的“技能”部分的示例：
 
--   **语言**：HTML、CSS、JavaScript、TypeScript
--   **技术**：React、Next.js、Tailwind CSS、Jest、Storybook、Cypress、React Query、Yarn、webpack
+- **语言**：HTML、CSS、JavaScript、TypeScript
+- **技术**：React、Next.js、Tailwind CSS、Jest、Storybook、Cypress、React Query、Yarn、webpack
 
-这恰好是用于构建GreatFrontEnd的技术堆栈。 您的“语言”项目下应该有HTML、CSS、JavaScript，否则可能存在大问题。
+这恰好是用于构建 GreatFrontEnd 的技术堆栈。 您的“语言”项目下应该有 HTML、CSS、JavaScript，否则可能存在大问题。
 
 ## 项目部分
 
-前端领域随着新的JavaScript框架和CSS方法的不断出现而不断发展。 在简历中列出项目表明您热爱这个领域，为了跟上最新的前端技术而付出了额外的努力，尤其是如果它们没有在你的工作中使用，这是一个巨大的正面信号。 列出每个项目所使用的技术，特别是如果它们是公司使用的现代技术。 这有助于提高简历的ATS排名并留下更深的印象。 在可能的情况下，将代码放在GitHub上，并梳理README以包括产品的截图。 将项目代码和现场网站的链接添加到简历中。
+前端领域随着新的 JavaScript 框架和 CSS 方法的不断出现而不断发展。 在简历中列出项目表明您热爱这个领域，为了跟上最新的前端技术而付出了额外的努力，尤其是如果它们没有在你的工作中使用，这是一个巨大的正面信号。 列出每个项目所使用的技术，特别是如果它们是公司使用的现代技术。 这有助于提高简历的 ATS 排名并留下更深的印象。 在可能的情况下，将代码放在 GitHub 上，并梳理 README 以包括产品的截图。 将项目代码和现场网站的链接添加到简历中。
 
 开源贡献，尤其是对复杂代码库的非微小更改，被视为技术能力的标志。 如果您已经创建或是开源项目的维护者，则更好。
 
diff --git a/packages/front-end-interview-guidebook/contents/system-design/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/system-design/pt-BR.mdx
index 9af7640ad..a98e4f1d9 100644
--- a/packages/front-end-interview-guidebook/contents/system-design/pt-BR.mdx
+++ b/packages/front-end-interview-guidebook/contents/system-design/pt-BR.mdx
@@ -15,7 +15,7 @@ Ao enfrentar uma entrevista de design de sistemas, independentemente se você es
 
 O GreatFrontEnd inclui muitos estudos de caso de design de sistemas de front-end e exemplos do mundo real, incluindo e muito mais:
 
--   [Feed de Notícias (por exemplo, Facebook)](/questions/system-design/news-feed-facebook)
--   [Componente de Autocomplete](/questions/system-design/autocomplete)
--   [Site de e-commerce (ex: Amazon)](/questions/system-design/e-commerce-amazon)
--   [Carrossel de imagem](/questions/system-design/image-carousel)
+- [Feed de Notícias (por exemplo, Facebook)](/questions/system-design/news-feed-facebook)
+- [Componente de Autocomplete](/questions/system-design/autocomplete)
+- [Site de e-commerce (ex: Amazon)](/questions/system-design/e-commerce-amazon)
+- [Carrossel de imagem](/questions/system-design/image-carousel)
diff --git a/packages/front-end-interview-guidebook/contents/system-design/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/system-design/zh-CN.mdx
index 9889bcd1f..7f9eb5c7e 100644
--- a/packages/front-end-interview-guidebook/contents/system-design/zh-CN.mdx
+++ b/packages/front-end-interview-guidebook/contents/system-design/zh-CN.mdx
@@ -3,19 +3,19 @@ title: 前端系统设计问题——如何准备
 description: 准备前端/网络开发人员面试中的系统设计问题——最佳实践和重要的练习问题。
 ---
 
-系统设计面试可以采用多种形式，涵盖整个开发堆栈。 GreatFrontEnd专注于**前端系统设计**，即客户端应用程序和UI组件的系统设计和架构，而不是后端分布式系统。
+系统设计面试可以采用多种形式，涵盖整个开发堆栈。 GreatFrontEnd 专注于**前端系统设计**，即客户端应用程序和 UI 组件的系统设计和架构，而不是后端分布式系统。
 
 我们编写了一个全面的[前端系统设计指南](/system-design)，您绝对应该查看。
 
 ## 遵循最佳实践设计您的系统
 
-无论您被要求设计应用程序、游戏还是UI组件，面试中进行系统设计时，都需要特别注意一些事项。 结合我们的[用户界面问题备忘单](/front-end-interview-guidebook/user-interface-questions-cheatsheet)中的提示，提升您的前端面试游戏。
+无论您被要求设计应用程序、游戏还是 UI 组件，面试中进行系统设计时，都需要特别注意一些事项。 结合我们的[用户界面问题备忘单](/front-end-interview-guidebook/user-interface-questions-cheatsheet)中的提示，提升您的前端面试游戏。
 
 ## 练习问题
 
-GreatFrontEnd包括许多前端系统设计案例研究和真实世界的例子，包括：
+GreatFrontEnd 包括许多前端系统设计案例研究和真实世界的例子，包括：
 
--   [新闻动态（例如Facebook）](/questions/system-design/news-feed-facebook)
--   [自动完成组件](/questions/system-design/autocomplete)
--   [电子商务网站（例如亚马逊）](/questions/system-design/e-commerce-amazon)
--   [图片轮播](/questions/system-design/image-carousel)
+- [新闻动态（例如 Facebook）](/questions/system-design/news-feed-facebook)
+- [自动完成组件](/questions/system-design/autocomplete)
+- [电子商务网站（例如亚马逊）](/questions/system-design/e-commerce-amazon)
+- [图片轮播](/questions/system-design/image-carousel)
diff --git a/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/pt-BR.mdx
index 69f9ee1b8..2c2aadcfc 100644
--- a/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/pt-BR.mdx
+++ b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/pt-BR.mdx
@@ -7,21 +7,21 @@ Aqui estão algumas dicas que você pode usar para melhorar as interfaces de usu
 
 ## Geral
 
--   **Divida o problema**: Divida o problema em etapas/marcos que se constroem progressivamente e escreva seu código de forma progressiva.
--   **Teste frequentemente**: Teste a interface de usuário no navegador após concluir cada recurso para que você possa identificar bugs precocemente. Bugs detectados mais cedo são mais fáceis de corrigir. Certifique-se de que o recurso atual está funcionando antes de passar para o próximo recurso.
--   **Use frameworks JavaScript, se possível**: Sua vida será muito mais fácil se você optar por construir interfaces de usuário complexas usando JavaScript puro (Vanilla JavaScript), já que o código pode ficar muito longo e confuso rapidamente. Recomendamos construir aplicativos e jogos usando um framework, se possível.
--   **Pense antecipadamente e planeje adequadamente**: Pense em quais recursos seu entrevistador pode pedir para adicionar a seguir. Projete seu código de forma que seja fácil adicionar novos recursos.
+- **Divida o problema**: Divida o problema em etapas/marcos que se constroem progressivamente e escreva seu código de forma progressiva.
+- **Teste frequentemente**: Teste a interface de usuário no navegador após concluir cada recurso para que você possa identificar bugs precocemente. Bugs detectados mais cedo são mais fáceis de corrigir. Certifique-se de que o recurso atual está funcionando antes de passar para o próximo recurso.
+- **Use frameworks JavaScript, se possível**: Sua vida será muito mais fácil se você optar por construir interfaces de usuário complexas usando JavaScript puro (Vanilla JavaScript), já que o código pode ficar muito longo e confuso rapidamente. Recomendamos construir aplicativos e jogos usando um framework, se possível.
+- **Pense antecipadamente e planeje adequadamente**: Pense em quais recursos seu entrevistador pode pedir para adicionar a seguir. Projete seu código de forma que seja fácil adicionar novos recursos.
 
 ## Organização de Componentes
 
 Como você estrutura seu código?
 
--   **Adote o [Padrão Contêiner/Apresentação](https://www.patterns.dev/posts/presentational-container-pattern/)**: Para alcançar um bom desacoplamento, o código de renderização deve ser independente da origem dos dados. Separe os componentes em um externo que fornece os dados e um interno sem estado que renderiza a visualização com base nos dados. Isso facilita a transição da visualização do estado local do componente/aplicativo para os dados carregados da rede e vice-versa. Você só precisa alterar o componente externo, e o componente interno pode ser usado como está.
--   **Divida o aplicativo em subcomponentes**: Se a interface do usuário tiver várias partes, divida-a em componentes menores e identifique as props/estado necessários para cada componente.
--   **Área de superfície da API mínima**: Não passe dados em excesso para componentes internos que não os necessitam.
--   **Instanciação de Componentes**: Ao criar componentes de interface do usuário, defina APIs (geralmente funções) que permitam a criação de várias instâncias independentes dos componentes, juntamente com opções configuráveis e valores padrão. Evite escrever código (por exemplo, dependendo de variáveis globais) que impeça a criação de instâncias separadas de componentes de interface do usuário.
-    -   **JavaScript Puro (Vanilla JavaScript)**: Crie uma função que receba um elemento DOM (o elemento de contêiner) e um objeto de opções. Dentro da função, você pode criar dinamicamente elementos DOM e anexá-los ao elemento de contêiner. Outra fonte de inspiração para uma API de componente é o [jQuery UI](https://jqueryui.com), mas ele tem uma dependência do jQuery.
-    -   **Outros Frameworks de UI em JavaScript**: A maioria dos modernos frameworks de UI em JavaScript, como o React, o obriga a pensar em termos de componentes por padrão.
+- **Adote o [Padrão Contêiner/Apresentação](https://www.patterns.dev/posts/presentational-container-pattern/)**: Para alcançar um bom desacoplamento, o código de renderização deve ser independente da origem dos dados. Separe os componentes em um externo que fornece os dados e um interno sem estado que renderiza a visualização com base nos dados. Isso facilita a transição da visualização do estado local do componente/aplicativo para os dados carregados da rede e vice-versa. Você só precisa alterar o componente externo, e o componente interno pode ser usado como está.
+- **Divida o aplicativo em subcomponentes**: Se a interface do usuário tiver várias partes, divida-a em componentes menores e identifique as props/estado necessários para cada componente.
+- **Área de superfície da API mínima**: Não passe dados em excesso para componentes internos que não os necessitam.
+- **Instanciação de Componentes**: Ao criar componentes de interface do usuário, defina APIs (geralmente funções) que permitam a criação de várias instâncias independentes dos componentes, juntamente com opções configuráveis e valores padrão. Evite escrever código (por exemplo, dependendo de variáveis globais) que impeça a criação de instâncias separadas de componentes de interface do usuário.
+  - **JavaScript Puro (Vanilla JavaScript)**: Crie uma função que receba um elemento DOM (o elemento de contêiner) e um objeto de opções. Dentro da função, você pode criar dinamicamente elementos DOM e anexá-los ao elemento de contêiner. Outra fonte de inspiração para uma API de componente é o [jQuery UI](https://jqueryui.com), mas ele tem uma dependência do jQuery.
+  - **Outros Frameworks de UI em JavaScript**: A maioria dos modernos frameworks de UI em JavaScript, como o React, o obriga a pensar em termos de componentes por padrão.
 
 ## Design de Estado
 
@@ -29,10 +29,10 @@ Estado é a informação que muda ao longo do tempo em sua interface do usuário
 
 A maioria das perguntas de entrevistas relacionadas à interface do usuário exigirá o uso de estado, e projetar o estado de forma adequada é de extrema importância.
 
--   **Determine o estado mínimo necessário em sua interface do usuário**: Quanto menor o estado, mais fácil é ler e entender o código -> menor probabilidade de erros.
-    -   Identificar o estado essencial versus o estado derivado. Estado derivado é um estado que pode ser calculado a partir do estado essencial.
--   **Separe o código de renderização do código de gerenciamento de dados**: Torne a interface do usuário uma função de seus dados e separe seu código em dois grupos (código de renderização e código de gerenciamento de dados) para uma melhor legibilidade. Se você estiver usando frameworks JavaScript como o React, mais ou menos será obrigado a fazer isso.
--   **Utilize o padrão de redutor de estado para interações de estado complexas**: Se a pergunta exigir muitos campos de estado e certas ações requererem a alteração de vários campos ao mesmo tempo, utilize um [redutor para consolidar a lógica de atualização de estado](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer). Primeiramente popularizado pelo Redux, o padrão de redutor de estado o incentiva a determinar o estado da sua interface de usuário, as ações que podem ser realizadas e como combinar ações com o estado para derivar o próximo estado. Se você estiver usando o React, é possível alcançar esse padrão por meio do gancho (hook) [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer) do React. Geralmente, o Redux é excessivo para entrevistas, e `useReducer` deve ser suficiente.
+- **Determine o estado mínimo necessário em sua interface do usuário**: Quanto menor o estado, mais fácil é ler e entender o código -> menor probabilidade de erros.
+  - Identificar o estado essencial versus o estado derivado. Estado derivado é um estado que pode ser calculado a partir do estado essencial.
+- **Separe o código de renderização do código de gerenciamento de dados**: Torne a interface do usuário uma função de seus dados e separe seu código em dois grupos (código de renderização e código de gerenciamento de dados) para uma melhor legibilidade. Se você estiver usando frameworks JavaScript como o React, mais ou menos será obrigado a fazer isso.
+- **Utilize o padrão de redutor de estado para interações de estado complexas**: Se a pergunta exigir muitos campos de estado e certas ações requererem a alteração de vários campos ao mesmo tempo, utilize um [redutor para consolidar a lógica de atualização de estado](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer). Primeiramente popularizado pelo Redux, o padrão de redutor de estado o incentiva a determinar o estado da sua interface de usuário, as ações que podem ser realizadas e como combinar ações com o estado para derivar o próximo estado. Se você estiver usando o React, é possível alcançar esse padrão por meio do gancho (hook) [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer) do React. Geralmente, o Redux é excessivo para entrevistas, e `useReducer` deve ser suficiente.
 
 A documentação do [React](https://beta.reactjs.org) sobre ["Gerenciamento de Estado"](https://beta.reactjs.org/learn/managing-state) é um excelente recurso sobre como projetar e usar o estado de componentes corretamente. Algumas das ideias mencionadas não são específicas do React e podem ser aplicadas a qualquer estrutura de interface do usuário (UI).
 
@@ -40,88 +40,88 @@ A documentação do [React](https://beta.reactjs.org) sobre ["Gerenciamento de E
 
 O seu JavaScript utiliza uma sintaxe moderna da linguagem e boas práticas, evitando práticas ruins?
 
--   **Utilize um guia de estilo**: Utilize um guia de estilo de JavaScript como o [Guia de Estilo JavaScript da Airbnb](https://github.com/airbnb/javascript). Durante o desenvolvimento, ferramentas de análise estática como o [ESLint](https://eslint.org) podem ajudar a aplicar algumas dessas boas práticas. No entanto, essas ferramentas podem não estar disponíveis durante entrevistas. Tente se acostumar a escrever código com um bom estilo de codificação sem depender de uma ferramenta.
--   **Não altere o ambiente global**: Isso se aplica a cenários de JavaScript puro (Vanilla JavaScript). Evite poluir o escopo global ao declarar variáveis e funções globais. Escreva uma Expressão de Função Imediatamente Invocada (IIFE) e coloque todo o código personalizado dentro dela.
+- **Utilize um guia de estilo**: Utilize um guia de estilo de JavaScript como o [Guia de Estilo JavaScript da Airbnb](https://github.com/airbnb/javascript). Durante o desenvolvimento, ferramentas de análise estática como o [ESLint](https://eslint.org) podem ajudar a aplicar algumas dessas boas práticas. No entanto, essas ferramentas podem não estar disponíveis durante entrevistas. Tente se acostumar a escrever código com um bom estilo de codificação sem depender de uma ferramenta.
+- **Não altere o ambiente global**: Isso se aplica a cenários de JavaScript puro (Vanilla JavaScript). Evite poluir o escopo global ao declarar variáveis e funções globais. Escreva uma Expressão de Função Imediatamente Invocada (IIFE) e coloque todo o código personalizado dentro dela.
 
 ## HTML
 
 Você está escrevendo HTML semântico com os atributos corretos?
 
--   **Tags semânticas**: Use tags de cabeçalho para títulos, tags de botão para elementos interativos, tags de lista para elementos sequenciais, e assim por diante. Não utilize `<div>` para tudo!
--   **Hierarquia de títulos**: Garanta que as tags de cabeçalho tenham uma hierarquia e que não haja mais de um `<h1>` no DOM.
--   **Elementos interativos**: Utilize `<button>` para elementos que requerem interação. Evite adicionar manipuladores de clique (click handlers) a elementos `<div>` e `<span>`.
+- **Tags semânticas**: Use tags de cabeçalho para títulos, tags de botão para elementos interativos, tags de lista para elementos sequenciais, e assim por diante. Não utilize `<div>` para tudo!
+- **Hierarquia de títulos**: Garanta que as tags de cabeçalho tenham uma hierarquia e que não haja mais de um `<h1>` no DOM.
+- **Elementos interativos**: Utilize `<button>` para elementos que requerem interação. Evite adicionar manipuladores de clique (click handlers) a elementos `<div>` e `<span>`.
 
 ### Formulários
 
 Os formulários são complexos por si só e merecem sua própria seção.
 
--   **Vincular rótulos e entradas**: Os elementos `<input>` devem ser vinculados aos elementos `<label>` usando os atributos `id` e `for`.
--   **Agrupe entradas em um formulário**: Os elementos `<input>` devem ser envolvidos em um elemento `<form>` para que ao clicar nos botões e pressionar Enter o formulário seja enviado. Lembre-se de adicionar `event.preventDefault()` se a solicitação de rede deve ser feita usando Ajax.
--   **Os campos de entrada devem ter tipos apropriados**: Os elementos `<input>` devem ter o atributo `type` apropriado, como `email`, `password`, `number`, etc.
--   **Aproveite a validação nativa de formulários HTML**: Sempre que possível, utilize o atributo `required` combinado com outros atributos como `pattern`, `min`, `max`, etc.
+- **Vincular rótulos e entradas**: Os elementos `<input>` devem ser vinculados aos elementos `<label>` usando os atributos `id` e `for`.
+- **Agrupe entradas em um formulário**: Os elementos `<input>` devem ser envolvidos em um elemento `<form>` para que ao clicar nos botões e pressionar Enter o formulário seja enviado. Lembre-se de adicionar `event.preventDefault()` se a solicitação de rede deve ser feita usando Ajax.
+- **Os campos de entrada devem ter tipos apropriados**: Os elementos `<input>` devem ter o atributo `type` apropriado, como `email`, `password`, `number`, etc.
+- **Aproveite a validação nativa de formulários HTML**: Sempre que possível, utilize o atributo `required` combinado com outros atributos como `pattern`, `min`, `max`, etc.
 
 ## CSS/Styling
 
 Seu CSS está escrito de forma escalável e fácil de entender?
 
--   **Escreva CSS puro**: Aprenda a escrever CSS sem depender de pré-processadores como [Sass](https://sass-lang.com/) e [Less](https://lesscss.org/). Nem todos os ambientes permitirão o uso de processadores, e as perguntas de entrevista provavelmente são pequenas e não se beneficiam realmente dos recursos que os pré-processadores CSS trazem. A funcionalidade mais útil dos processadores CSS é o uso de variáveis, que está disponível nativamente por meio das propriedades personalizadas CSS (variáveis).
--   **Adote uma convenção de nomenclatura CSS**: Considere adotar uma metodologia de nomenclatura CSS como o [Block Element Modifier (BEM)](https://getbem.com) ao escrever suas classes.
--   **Evite seletores `#id` em componentes**: Ao construir componentes de interface do usuário destinados a serem reutilizados (por exemplo, botões, abas, menus, modais etc.), evite usar seletores `#id` no HTML, pois os `id` devem ser globalmente exclusivos, mas você pode ter várias instâncias do componente.
--   **Organize seu CSS**: Leia sobre como [organizar seu CSS em projetos grandes](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing) e como ter uma [Arquitetura Escalável e Modular para CSS](http://smacss.com/).
+- **Escreva CSS puro**: Aprenda a escrever CSS sem depender de pré-processadores como [Sass](https://sass-lang.com/) e [Less](https://lesscss.org/). Nem todos os ambientes permitirão o uso de processadores, e as perguntas de entrevista provavelmente são pequenas e não se beneficiam realmente dos recursos que os pré-processadores CSS trazem. A funcionalidade mais útil dos processadores CSS é o uso de variáveis, que está disponível nativamente por meio das propriedades personalizadas CSS (variáveis).
+- **Adote uma convenção de nomenclatura CSS**: Considere adotar uma metodologia de nomenclatura CSS como o [Block Element Modifier (BEM)](https://getbem.com) ao escrever suas classes.
+- **Evite seletores `#id` em componentes**: Ao construir componentes de interface do usuário destinados a serem reutilizados (por exemplo, botões, abas, menus, modais etc.), evite usar seletores `#id` no HTML, pois os `id` devem ser globalmente exclusivos, mas você pode ter várias instâncias do componente.
+- **Organize seu CSS**: Leia sobre como [organizar seu CSS em projetos grandes](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing) e como ter uma [Arquitetura Escalável e Modular para CSS](http://smacss.com/).
 
 ## Experiência do Usuário
 
 Sua interface de usuário proporciona uma ótima experiência para o usuário?
 
--   **Amigável para dispositivos móveis**: Verifique se você precisa fazer com que sua interface de usuário funcione bem em dispositivos móveis.
-    -   As consultas de mídia CSS podem ser usadas para renderizar um layout diferente em dispositivos móveis.
-    -   Faça elementos interativos, como botões, grandes o suficiente para serem pressionados (recomendamos pelo menos 44 x 44 px) e com espaço suficiente entre eles.
--   **Estados de erro**: Reflita os erros prontamente e de forma clara - erros de validação de formulário, erros de solicitação de rede.
--   **Lidar com a renderização de imagens de diferentes dimensões**: Faça sua interface de usuário funcionar para renderizar imagens de todas as dimensões, preservando ao mesmo tempo as proporções originais.
-    -   Use `background-image` do CSS em conjunto com `background-position: contain` para que a imagem se ajuste dentro da área definida. Se for aceitável que a imagem seja cortada (por exemplo, para fundos degradê), use `background-position: cover`.
-    -   As tags `<img>` têm uma propriedade semelhante chamada `object-fit` com valores `contain` e `cover`.
--   **Atualizações otimistas**: Técnica avançada em que o estado de sucesso é refletido mesmo que a solicitação de rede ainda esteja pendente. Se a solicitação falhar, reverta as alterações na interface do usuário e exiba uma mensagem de erro.
+- **Amigável para dispositivos móveis**: Verifique se você precisa fazer com que sua interface de usuário funcione bem em dispositivos móveis.
+  - As consultas de mídia CSS podem ser usadas para renderizar um layout diferente em dispositivos móveis.
+  - Faça elementos interativos, como botões, grandes o suficiente para serem pressionados (recomendamos pelo menos 44 x 44 px) e com espaço suficiente entre eles.
+- **Estados de erro**: Reflita os erros prontamente e de forma clara - erros de validação de formulário, erros de solicitação de rede.
+- **Lidar com a renderização de imagens de diferentes dimensões**: Faça sua interface de usuário funcionar para renderizar imagens de todas as dimensões, preservando ao mesmo tempo as proporções originais.
+  - Use `background-image` do CSS em conjunto com `background-position: contain` para que a imagem se ajuste dentro da área definida. Se for aceitável que a imagem seja cortada (por exemplo, para fundos degradê), use `background-position: cover`.
+  - As tags `<img>` têm uma propriedade semelhante chamada `object-fit` com valores `contain` e `cover`.
+- **Atualizações otimistas**: Técnica avançada em que o estado de sucesso é refletido mesmo que a solicitação de rede ainda esteja pendente. Se a solicitação falhar, reverta as alterações na interface do usuário e exiba uma mensagem de erro.
 
 ## Rede
 
 Sua interface do usuário lida com a natureza imprevisível das solicitações e condições de rede?
 
--   **Reflita os estados da solicitação de rede**: Se a interface do usuário envolver a realização de solicitações de rede, mostre claramente o estado pendente/sucesso/falha das solicitações
-    -   **Pendente**: Desativar campos/botões, mostrar um spinner.
-    -   **Erro**: Mostrar uma mensagem de erro.
-    -   **Sucesso**: Atualizar a interface do usuário e/ou mostrar uma mensagem de sucesso.
--   **Condições de corrida**: Uma razão comum é devido a solicitações de rede paralelas, onde a ordem de resposta não é garantida. Uma solicitação feita posteriormente poderia receber uma resposta mais cedo. Se a sua interface de usuário for suscetível a isso, você pode acompanhar as solicitações mais recentes e ignorar os resultados das mais antigas. Alternativamente, faça com que sua interface de usuário não possa enviar várias solicitações de rede ao mesmo tempo, por exemplo, desabilitando elementos que acionam solicitações de rede após serem clicados.
--   **Evitar solicitações duplicadas**: Os botões devem ser desabilitados após o envio para evitar a realização de solicitações de rede duplicadas.
--   **Consolidando solicitações**: Se a interface de usuário estiver fazendo um grande número de solicitações de rede, você pode:
-    -   **Debounce/throttle**: Limite a taxa de solicitações de rede disparadas.
-    -   **Solicitações em lote**: Agrupe solicitações juntas e faça apenas uma única solicitação. Isso requer que o lado do servidor suporte esse formato.
--   **Caching**: Se uma solicitação com os mesmos parâmetros foi feita recentemente, você pode reutilizar a resposta anterior e economizar uma ida e volta na rede?
--   **Tempo limite da solicitação**: Você pode querer artificialmente mostrar que a solicitação falhou (expirou) se a solicitação não receber uma resposta após uma duração estipulada.
--   **Atualizações otimistas**: Técnica avançada na qual o estado de sucesso é refletido mesmo quando a solicitação de rede ainda está pendente. Se a solicitação falhar, reverta as alterações na interface de usuário e exiba uma mensagem de erro.
+- **Reflita os estados da solicitação de rede**: Se a interface do usuário envolver a realização de solicitações de rede, mostre claramente o estado pendente/sucesso/falha das solicitações
+  - **Pendente**: Desativar campos/botões, mostrar um spinner.
+  - **Erro**: Mostrar uma mensagem de erro.
+  - **Sucesso**: Atualizar a interface do usuário e/ou mostrar uma mensagem de sucesso.
+- **Condições de corrida**: Uma razão comum é devido a solicitações de rede paralelas, onde a ordem de resposta não é garantida. Uma solicitação feita posteriormente poderia receber uma resposta mais cedo. Se a sua interface de usuário for suscetível a isso, você pode acompanhar as solicitações mais recentes e ignorar os resultados das mais antigas. Alternativamente, faça com que sua interface de usuário não possa enviar várias solicitações de rede ao mesmo tempo, por exemplo, desabilitando elementos que acionam solicitações de rede após serem clicados.
+- **Evitar solicitações duplicadas**: Os botões devem ser desabilitados após o envio para evitar a realização de solicitações de rede duplicadas.
+- **Consolidando solicitações**: Se a interface de usuário estiver fazendo um grande número de solicitações de rede, você pode:
+  - **Debounce/throttle**: Limite a taxa de solicitações de rede disparadas.
+  - **Solicitações em lote**: Agrupe solicitações juntas e faça apenas uma única solicitação. Isso requer que o lado do servidor suporte esse formato.
+- **Caching**: Se uma solicitação com os mesmos parâmetros foi feita recentemente, você pode reutilizar a resposta anterior e economizar uma ida e volta na rede?
+- **Tempo limite da solicitação**: Você pode querer artificialmente mostrar que a solicitação falhou (expirou) se a solicitação não receber uma resposta após uma duração estipulada.
+- **Atualizações otimistas**: Técnica avançada na qual o estado de sucesso é refletido mesmo quando a solicitação de rede ainda está pendente. Se a solicitação falhar, reverta as alterações na interface de usuário e exiba uma mensagem de erro.
 
 ## Acessibilidade (a11y)
 
 Lidar com acessibilidade na interface de usuário é uma grande vantagem e, em alguns casos, um requisito para engenheiros sênior.
 
--   Você consegue usar a interface de usuário apenas com o teclado?
--   Você consegue usar o componente da sua interface com um leitor de tela?
--   Seu componente de interface pode funcionar sem cores?
--   Seu componente de interface pode funcionar sem som?
+- Você consegue usar a interface de usuário apenas com o teclado?
+- Você consegue usar o componente da sua interface com um leitor de tela?
+- Seu componente de interface pode funcionar sem cores?
+- Seu componente de interface pode funcionar sem som?
 
 Fonte: [Componentes de UI Acessíveis para o web](https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67)
 
--   **Leitores de tela, papéis, estados e propriedades ARIA**:
-    -   Adicione os `aria-role`s corretos para elementos personalizados construídos sem o uso de tags HTML personalizadas.
-    -   Use `aria-label`s para descrever elementos onde o texto não é exibido (por exemplo, botões apenas com ícones).
-    -   Vincule elementos de mensagens de erro aos elementos responsáveis por eles por meio de `aria-describedby` ou `aria-errormessage`.
-    -   **Texto `alt` de imagens**: Adicione o atributo `alt` aos elementos `<img>` para que leitores de tela possam descrever a imagem.
--   **Interações por teclado**
-    -   Adicione o atributo `tabindex` aos elementos que você deseja que sejam focáveis através da navegação por teclado.
-    -   Elementos podem ser acionados via teclado.
-    -   Verifique se a ordem de foco faz sentido.
--   **Problemas visuais**
-    -   **Contraste de cores**: Contraste de cores suficiente entre texto/imagens e o plano de fundo.
-    -   **Tamanho dos elementos**: o tamanho da fonte e dos elementos interativos deve ser grande o suficiente para o meio pretendido.
+- **Leitores de tela, papéis, estados e propriedades ARIA**:
+  - Adicione os `aria-role`s corretos para elementos personalizados construídos sem o uso de tags HTML personalizadas.
+  - Use `aria-label`s para descrever elementos onde o texto não é exibido (por exemplo, botões apenas com ícones).
+  - Vincule elementos de mensagens de erro aos elementos responsáveis por eles por meio de `aria-describedby` ou `aria-errormessage`.
+  - **Texto `alt` de imagens**: Adicione o atributo `alt` aos elementos `<img>` para que leitores de tela possam descrever a imagem.
+- **Interações por teclado**
+  - Adicione o atributo `tabindex` aos elementos que você deseja que sejam focáveis através da navegação por teclado.
+  - Elementos podem ser acionados via teclado.
+  - Verifique se a ordem de foco faz sentido.
+- **Problemas visuais**
+  - **Contraste de cores**: Contraste de cores suficiente entre texto/imagens e o plano de fundo.
+  - **Tamanho dos elementos**: o tamanho da fonte e dos elementos interativos deve ser grande o suficiente para o meio pretendido.
 
 o web.dev, do Google, oferece um [curso abrangente e gratuito sobre acessibilidade](https://web.dev/learn/accessibility/), o qual recomendamos fortemente.
 
@@ -129,32 +129,32 @@ o web.dev, do Google, oferece um [curso abrangente e gratuito sobre acessibilida
 
 Provavelmente não há tempo suficiente para lidar com todos os cenários de casos extremos no seu código durante a entrevista, mas é bom mencioná-los ao entrevistador para ganhar pontos extras.
 
--   **Lidar com strings longas**: Strings na interface de usuário (por exemplo, títulos/rótulos de botões) podem fazer com que a interface de usuário se comporte de maneira estranha, como o overflow de texto, afetando a posição de elementos circundantes. Strings longas podem ser resultado de entradas do usuário ou de traduções.
--   **Estados vazios**: Mostrar uma mensagem/indicador de estado vazio para indicar a ausência de conteúdo, por exemplo, quando a lista está vazia. Mostrar nada pode fazer com que o usuário pense que há uma solicitação de rede pendente e que os dados ainda estão sendo buscados.
--   **Muitos itens em uma lista**: Mostrar muitos itens em uma única página pode resultar em uma má experiência do usuário (o usuário precisa rolar muito) e baixo desempenho em termos de responsividade e consumo de memória.
-    -   **Paginação**: Divida uma longa lista de itens em várias páginas.
-    -   [**Listas virtuais**](https://www.patterns.dev/posts/virtual-lists): Renderização apenas das linhas visíveis de conteúdo em uma lista dinâmica em vez da lista inteira.
-    -   Truncar o conteúdo excedente e mostrar uma elipse. A propriedade CSS `word-break` será útil.
-    -   Limite o conteúdo às primeiras X caracteres/palavras e oculte o conteúdo excedente atrás de um botão "Mostrar Mais".
+- **Lidar com strings longas**: Strings na interface de usuário (por exemplo, títulos/rótulos de botões) podem fazer com que a interface de usuário se comporte de maneira estranha, como o overflow de texto, afetando a posição de elementos circundantes. Strings longas podem ser resultado de entradas do usuário ou de traduções.
+- **Estados vazios**: Mostrar uma mensagem/indicador de estado vazio para indicar a ausência de conteúdo, por exemplo, quando a lista está vazia. Mostrar nada pode fazer com que o usuário pense que há uma solicitação de rede pendente e que os dados ainda estão sendo buscados.
+- **Muitos itens em uma lista**: Mostrar muitos itens em uma única página pode resultar em uma má experiência do usuário (o usuário precisa rolar muito) e baixo desempenho em termos de responsividade e consumo de memória.
+  - **Paginação**: Divida uma longa lista de itens em várias páginas.
+  - [**Listas virtuais**](https://www.patterns.dev/posts/virtual-lists): Renderização apenas das linhas visíveis de conteúdo em uma lista dinâmica em vez da lista inteira.
+  - Truncar o conteúdo excedente e mostrar uma elipse. A propriedade CSS `word-break` será útil.
+  - Limite o conteúdo às primeiras X caracteres/palavras e oculte o conteúdo excedente atrás de um botão "Mostrar Mais".
 
 ## Performance
 
--   **Throttle/debounce**: Throttle e debounce são técnicas de limitação de taxa para evitar operações desnecessárias. Essa técnica pode ser usada para operações que não são extremamente sensíveis ao tempo, como solicitações de rede e callbacks de eventos de rolagem/redimensionamento.
--   **Cache**: Os resultados de cálculos duplicados ou solicitações de rede podem ser armazenados em memória/armazenamento do navegador e não repetidos.
--   **Carregamento sob demanda**: Carregue os dados/código do componente apenas quando forem necessários, em vez de carregar tudo no início.
--   **Pré-carregamento de dados**: Reduza a latência de rede pré-carregando dados imediatamente antes de serem necessários, para que as atualizações apareçam instantaneamente.
--   **Muitos itens em uma lista**: Consulte o ponto sob "Casos Especiais" acima.
+- **Throttle/debounce**: Throttle e debounce são técnicas de limitação de taxa para evitar operações desnecessárias. Essa técnica pode ser usada para operações que não são extremamente sensíveis ao tempo, como solicitações de rede e callbacks de eventos de rolagem/redimensionamento.
+- **Cache**: Os resultados de cálculos duplicados ou solicitações de rede podem ser armazenados em memória/armazenamento do navegador e não repetidos.
+- **Carregamento sob demanda**: Carregue os dados/código do componente apenas quando forem necessários, em vez de carregar tudo no início.
+- **Pré-carregamento de dados**: Reduza a latência de rede pré-carregando dados imediatamente antes de serem necessários, para que as atualizações apareçam instantaneamente.
+- **Muitos itens em uma lista**: Consulte o ponto sob "Casos Especiais" acima.
 
 ## Segurança
 
--   **Scripting Cross-site (XSS)**: Evitar atribuir a [`Element.innerHTML`]\(https://developer.mozilla. rg/en-US/docs/Web/API/Element/innerHTML) ou `dangerouslySetInnerHTML` do React ao renderizar conteúdo no DOM se ele vier de usuários para impedir script entre sites, atribuir ao [`Node. extContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) ou use o método experimental[`Element.setHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML) em vez disso. Consulte o [Folha de Dicas de Prevenção de XSS do OWASP](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
--   **Codificação de saída para "Contextos de URL"**: Se a entrada fornecida pelo usuário puder ser usada em parâmetros de consulta de URL, use `encodeURIComponent` para evitar que valores indesejados façam parte da URL (por exemplo, parâmetros de consulta extras).
--   **Cross Site Request Forgery (CSRF)**: Consulte a [OWASP's XSS Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) para obter informações sobre prevenção de CSRF e outras vulnerabilidades de segurança.
+- **Scripting Cross-site (XSS)**: Evitar atribuir a [`Element.innerHTML`]\(https://developer.mozilla. rg/en-US/docs/Web/API/Element/innerHTML) ou `dangerouslySetInnerHTML` do React ao renderizar conteúdo no DOM se ele vier de usuários para impedir script entre sites, atribuir ao [`Node. extContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) ou use o método experimental[`Element.setHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML) em vez disso. Consulte o [Folha de Dicas de Prevenção de XSS do OWASP](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
+- **Codificação de saída para "Contextos de URL"**: Se a entrada fornecida pelo usuário puder ser usada em parâmetros de consulta de URL, use `encodeURIComponent` para evitar que valores indesejados façam parte da URL (por exemplo, parâmetros de consulta extras).
+- **Cross Site Request Forgery (CSRF)**: Consulte a [OWASP's XSS Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) para obter informações sobre prevenção de CSRF e outras vulnerabilidades de segurança.
 
 ## Internacionalização (i18n)
 
 Sua interface de usuário funciona para múltiplos idiomas? Quão fácil é adicionar suporte para mais idiomas?
 
--   **Evite a codificação rígida de rótulos em um determinado idioma**: Alguns componentes de interface do usuário têm strings de rótulo incorporadas (por exemplo, um carrossel de imagens tem rótulos para os botões anterior/próximo). Seria bom permitir a personalização dessas strings de rótulo tornando-as parte das props/opções do componente.
--   **A UI pode renderizar strings longas**: Consulte a seção acima sobre a renderização de strings longas.
--   **Idiomas da direita para a esquerda**: Alguns idiomas (por exemplo, árabe, hebraico) são lidos da direita para a esquerda, e a interface do usuário precisa ser virada horizontalmente. Use [propriedades lógicas CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) para fazer seu layout funcionar para diferentes [modos de escrita](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes).
+- **Evite a codificação rígida de rótulos em um determinado idioma**: Alguns componentes de interface do usuário têm strings de rótulo incorporadas (por exemplo, um carrossel de imagens tem rótulos para os botões anterior/próximo). Seria bom permitir a personalização dessas strings de rótulo tornando-as parte das props/opções do componente.
+- **A UI pode renderizar strings longas**: Consulte a seção acima sobre a renderização de strings longas.
+- **Idiomas da direita para a esquerda**: Alguns idiomas (por exemplo, árabe, hebraico) são lidos da direita para a esquerda, e a interface do usuário precisa ser virada horizontalmente. Use [propriedades lógicas CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) para fazer seu layout funcionar para diferentes [modos de escrita](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes).
diff --git a/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/zh-CN.mdx
index 5fed1d8ef..754202d29 100644
--- a/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/zh-CN.mdx
+++ b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/zh-CN.mdx
@@ -3,158 +3,158 @@ title: 前端用户界面问题备忘单
 description: 在前端/网络开发人员面试时，改善你必须建立的用户界面的顶级技巧 - 代码结构、管理状态、可访问性等。
 ---
 
-以下是一些提示，可帮助您在前端/ Web开发人员面试期间改善您必须构建/设计的用户界面。 这些提示可应用于[用户界面编码面试](/front-end-interview-guidebook/user-interface)和[前端系统设计面试](/system-design/types-of-questions)。
+以下是一些提示，可帮助您在前端/ Web 开发人员面试期间改善您必须构建/设计的用户界面。 这些提示可应用于[用户界面编码面试](/front-end-interview-guidebook/user-interface)和[前端系统设计面试](/system-design/types-of-questions)。
 
 ## 概览
 
--   **分解问题**:将问题分解为可以逐步构建的阶段/里程碑，并逐步编写您的代码。
--   **经常测试**:完成每个功能后在浏览器中测试UI，以便您可以尽早捕获漏洞。 较早捕获的错误更容易修复。 确保当前功能正常工作，然后再进行下一个功能。
--   **使用JavaScript框架（如果可能）**: 如果您选择使用纯JavaScript构建复杂的UI，您的生活将非常艰难，因为代码可能会很快变得非常长而杂乱。 我们建议使用框架构建应用程序和游戏。
--   **未雨绸缪，计划周全**:考虑一下您的面试官可能要求您添加下一个功能。 设计代码的方式，使新功能可以轻松添加。
+- **分解问题**:将问题分解为可以逐步构建的阶段/里程碑，并逐步编写您的代码。
+- **经常测试**:完成每个功能后在浏览器中测试 UI，以便您可以尽早捕获漏洞。 较早捕获的错误更容易修复。 确保当前功能正常工作，然后再进行下一个功能。
+- **使用 JavaScript 框架（如果可能）**: 如果您选择使用纯 JavaScript 构建复杂的 UI，您的生活将非常艰难，因为代码可能会很快变得非常长而杂乱。 我们建议使用框架构建应用程序和游戏。
+- **未雨绸缪，计划周全**:考虑一下您的面试官可能要求您添加下一个功能。 设计代码的方式，使新功能可以轻松添加。
 
 ## 组件组织
 
 您如何构建代码？
 
--   **采用容器/表示模式**:为了实现良好的解耦合，渲染代码应该与数据源无关。 将组件分成提供数据的外部组件和根据数据呈现视图的内部无状态组件。 这使视图可以从本地组件/应用状态切换到从网络加载的数据等情况，反之亦然，只要更改外部组件，内部组件就可以按原样使用。
--   **将应用程序分解为子组件**: 如果UI具有多个部分，请将UI分解为较小的组件，并确定每个组件需要的属性/状态。
--   **最小API面积**: 不要将不需要的额外数据传递给内部组件。
--   **组件实例化**: 在要求构建UI组件时，定义API（通常是函数）以允许创建多个独立的组件实例，其中包括可配置的选项和默认值。 避免编写代码（例如依赖全局变量）以防止创建单独的UI组件实例。
-    -   **纯JavaScript**:创建一个接受DOM元素（容器元素）和选项对象的函数。 在函数内部，您可以动态创建DOM元素并将其附加到容器元素。 组件API的另一个灵感来源是[jQuery UI](https://jqueryui.com)，但它依赖于jQuery。
-    -   **其他JavaScript UI框架**：大多数现代JavaScript UI框架（如React）默认强制您按组件进行思考。
+- **采用容器/表示模式**:为了实现良好的解耦合，渲染代码应该与数据源无关。 将组件分成提供数据的外部组件和根据数据呈现视图的内部无状态组件。 这使视图可以从本地组件/应用状态切换到从网络加载的数据等情况，反之亦然，只要更改外部组件，内部组件就可以按原样使用。
+- **将应用程序分解为子组件**: 如果 UI 具有多个部分，请将 UI 分解为较小的组件，并确定每个组件需要的属性/状态。
+- **最小 API 面积**: 不要将不需要的额外数据传递给内部组件。
+- **组件实例化**: 在要求构建 UI 组件时，定义 API（通常是函数）以允许创建多个独立的组件实例，其中包括可配置的选项和默认值。 避免编写代码（例如依赖全局变量）以防止创建单独的 UI 组件实例。
+  - **纯 JavaScript**:创建一个接受 DOM 元素（容器元素）和选项对象的函数。 在函数内部，您可以动态创建 DOM 元素并将其附加到容器元素。 组件 API 的另一个灵感来源是[jQuery UI](https://jqueryui.com)，但它依赖于 jQuery。
+  - **其他 JavaScript UI 框架**：大多数现代 JavaScript UI 框架（如 React）默认强制您按组件进行思考。
 
 ## 状态设计
 
-状态是您的UI中随时间而变化的数据，通常是由用户交互或后台事件（网络请求响应、时间流逝、WebSocket事件）导致的。
+状态是您的 UI 中随时间而变化的数据，通常是由用户交互或后台事件（网络请求响应、时间流逝、WebSocket 事件）导致的。
 
-面试中的大多数UI问题都需要状态，因此设计状态非常重要。
+面试中的大多数 UI 问题都需要状态，因此设计状态非常重要。
 
--   **确定UI中所需的最小状态**: 状态越小，代码的可读性和理解能力就越强 -> 减少错误的可能性。
-    -   识别必要状态和派生状态。 派生状态是可以从必要状态计算出的状态。
--   **将呈现代码与数据管理代码分开**: 将UI作为数据的功能并将代码分为两组（呈现代码和数据管理代码），以获得更好的可读性。 如果使用诸如React之类的JavaScript框架，则一般强制执行此操作。
--   **对于复杂的状态交互，请使用状态-减少器模式**: 如果问题需要许多状态字段，并且某些操作需要同时更改多个字段，请使用[减少器来汇总状态更新逻辑](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer)。 由Redux首先推广，状态-减少器模式鼓励您确定UI的状态、可执行的操作以及如何将操作与状态结合以导出下一个状态。 如果您使用React，则可以通过[`useReducer` React hook](https://reactjs.org/docs/hooks-reference.html#usereducer)实现此模式。 Redux通常过于适用于面试，而`useReducer`应该足够。
+- **确定 UI 中所需的最小状态**: 状态越小，代码的可读性和理解能力就越强 -> 减少错误的可能性。
+  - 识别必要状态和派生状态。 派生状态是可以从必要状态计算出的状态。
+- **将呈现代码与数据管理代码分开**: 将 UI 作为数据的功能并将代码分为两组（呈现代码和数据管理代码），以获得更好的可读性。 如果使用诸如 React 之类的 JavaScript 框架，则一般强制执行此操作。
+- **对于复杂的状态交互，请使用状态-减少器模式**: 如果问题需要许多状态字段，并且某些操作需要同时更改多个字段，请使用[减少器来汇总状态更新逻辑](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer)。 由 Redux 首先推广，状态-减少器模式鼓励您确定 UI 的状态、可执行的操作以及如何将操作与状态结合以导出下一个状态。 如果您使用 React，则可以通过[`useReducer` React hook](https://reactjs.org/docs/hooks-reference.html#usereducer)实现此模式。 Redux 通常过于适用于面试，而`useReducer`应该足够。
 
-React的文档["管理状态"](https://beta.reactjs.org/learn/managing-state)是有关如何正确设计和使用组件状态的杰出资源。 提到的一些想法与React无关，可以适用于任何UI框架。
+React 的文档["管理状态"](https://beta.reactjs.org/learn/managing-state)是有关如何正确设计和使用组件状态的杰出资源。 提到的一些想法与 React 无关，可以适用于任何 UI 框架。
 
 ## JavaScript
 
-您的JavaScript是否使用现代语言语法和优秀实践，同时避免不良实践？
+您的 JavaScript 是否使用现代语言语法和优秀实践，同时避免不良实践？
 
--   **使用样式指南**:使用JavaScript样式指南，如[Airbnb的JavaScript样式指南](https://github.com/airbnb/javascript)。 在开发过程中，静态分析工具如[ESLint](https://eslint.org)可以帮助您执行其中一些良好实践。 但是，在面试期间可能没有这些工具可用。 尝试适应使用良好编码风格编写代码，而不需要工具的帮助。
--   **不要触碰全局环境**:这适用于Vanilla JavaScript场景。 避免声明全局变量和全局函数以污染全局范围。 编写立即调用的函数表达式（IIFE）并将所有自定义代码放在其中。
+- **使用样式指南**:使用 JavaScript 样式指南，如[Airbnb 的 JavaScript 样式指南](https://github.com/airbnb/javascript)。 在开发过程中，静态分析工具如[ESLint](https://eslint.org)可以帮助您执行其中一些良好实践。 但是，在面试期间可能没有这些工具可用。 尝试适应使用良好编码风格编写代码，而不需要工具的帮助。
+- **不要触碰全局环境**:这适用于 Vanilla JavaScript 场景。 避免声明全局变量和全局函数以污染全局范围。 编写立即调用的函数表达式（IIFE）并将所有自定义代码放在其中。
 
 ## HTML
 
-您是否使用正确的属性编写语义化的HTML？
+您是否使用正确的属性编写语义化的 HTML？
 
--   **语义标签**: 为标题使用标题标签，为交互元素使用按钮标签，为连续元素使用列表标签等。 不要为所有内容使用`<div>`！
--   **标题层次**: 确保标题标签具有层次结构，并且DOM中没有多个`<h1>`。
--   **交互元素**: 使用`<button>`将要求交互的元素包含其中。 不要将单击处理程序添加到`<div>`和`<span>`中。
+- **语义标签**: 为标题使用标题标签，为交互元素使用按钮标签，为连续元素使用列表标签等。 不要为所有内容使用`<div>`！
+- **标题层次**: 确保标题标签具有层次结构，并且 DOM 中没有多个`<h1>`。
+- **交互元素**: 使用`<button>`将要求交互的元素包含其中。 不要将单击处理程序添加到`<div>`和`<span>`中。
 
 ### 表单
 
 表单本身很复杂，值得有自己的部分。
 
--   **链接标签和输入**: 使用`id`和`for`链接`<label>`中的`<input>`以防止用户意外点击文本。
--   **在表单中包装输入**: 将`<input>`包装在`<form>`中，以便单击按钮和按Enter将提交表单。 如果使用Ajax进行网络请求，则记得添加`event.preventDefault()`。
--   **输入应具有适当的类型**: `<input>`应具有适当的类型，例如电子邮件、密码、数字等。
--   **利用本机HTML表单验证**: 在可能的情况下，结合使用`required`属性和其他属性，如`pattern`、`min`、`max`等，以使用本机HTML表单验证。
+- **链接标签和输入**: 使用`id`和`for`链接`<label>`中的`<input>`以防止用户意外点击文本。
+- **在表单中包装输入**: 将`<input>`包装在`<form>`中，以便单击按钮和按 Enter 将提交表单。 如果使用 Ajax 进行网络请求，则记得添加`event.preventDefault()`。
+- **输入应具有适当的类型**: `<input>`应具有适当的类型，例如电子邮件、密码、数字等。
+- **利用本机 HTML 表单验证**: 在可能的情况下，结合使用`required`属性和其他属性，如`pattern`、`min`、`max`等，以使用本机 HTML 表单验证。
 
 ## CSS/样式
 
-您的CSS是以可扩展且易于理解的方式编写的吗？
+您的 CSS 是以可扩展且易于理解的方式编写的吗？
 
--   **编写Vanilla CSS**: 学会在没有processor的情况下编写CSS，如[Sass](https://sass-lang.com/)和[Less](https://lesscss.org/)。 并不是所有环境都允许使用处理器，而且面试问题可能很小，不会真正受益于CSS预处理器提供的功能。 CSS处理器最有用的功能是使用变量，这可以通过CSS自定义属性（变量）本机提供。
--   **采用CSS命名约定**: 在编写类时考虑采用CSS命名方法论，例如[块元素修饰符](https://getbem.com)。
--   **在组件中避免使用`#id`选择器**: 当构建可重用的UI组件（例如按钮、选项卡、菜单、模态框等）时，请避免在HTML中使用`#id`选择器，因为`id`是全局唯一的，但是您可以多个组件实例。
--   **组织您的CSS**: 阅读有关[在大型项目中组织CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing)和如何具有[可扩展和模块化的CSS架构](http://smacss.com/)的文章。
+- **编写 Vanilla CSS**: 学会在没有 processor 的情况下编写 CSS，如[Sass](https://sass-lang.com/)和[Less](https://lesscss.org/)。 并不是所有环境都允许使用处理器，而且面试问题可能很小，不会真正受益于 CSS 预处理器提供的功能。 CSS 处理器最有用的功能是使用变量，这可以通过 CSS 自定义属性（变量）本机提供。
+- **采用 CSS 命名约定**: 在编写类时考虑采用 CSS 命名方法论，例如[块元素修饰符](https://getbem.com)。
+- **在组件中避免使用`#id`选择器**: 当构建可重用的 UI 组件（例如按钮、选项卡、菜单、模态框等）时，请避免在 HTML 中使用`#id`选择器，因为`id`是全局唯一的，但是您可以多个组件实例。
+- **组织您的 CSS**: 阅读有关[在大型项目中组织 CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing)和如何具有[可扩展和模块化的 CSS 架构](http://smacss.com/)的文章。
 
 ## 用户体验
 
-您的UI提供了出色的用户体验吗？
+您的 UI 提供了出色的用户体验吗？
 
--   **适用于移动设备**: 检查您是否需要使UI在移动设备上正常工作。
-    -   CSS媒体查询可用于在移动设备上显示不同的布局。
-    -   使交互元素（如按钮）足够大，以便按下（建议至少为44 x 44 px），并且间距足够宽。
--   **错误状态**: 及时清晰地反映错误-表单验证错误、网络请求错误等。
--   **处理不同尺寸的图片**: 使您的UI适用于呈现所有大小/维度的图片并保留原始纵横比的情况。
-    -   使用CSS`background-image`和`background-position: contain`，以使图片适合在您定义的区域内。 如果可以将图片剪切（例如渐变背景），请使用`background-position: cover`。
-    -   `<img>`标记具有类似的`object-fit`属性和`contain`和`cover`值。
--   **乐观更新**: 高级技术，即使在网络请求仍在进行时也能反映出成功状态。 如果请求失败，请恢复UI更改并显示错误消息。
+- **适用于移动设备**: 检查您是否需要使 UI 在移动设备上正常工作。
+  - CSS 媒体查询可用于在移动设备上显示不同的布局。
+  - 使交互元素（如按钮）足够大，以便按下（建议至少为 44 x 44 px），并且间距足够宽。
+- **错误状态**: 及时清晰地反映错误-表单验证错误、网络请求错误等。
+- **处理不同尺寸的图片**: 使您的 UI 适用于呈现所有大小/维度的图片并保留原始纵横比的情况。
+  - 使用 CSS`background-image`和`background-position: contain`，以使图片适合在您定义的区域内。 如果可以将图片剪切（例如渐变背景），请使用`background-position: cover`。
+  - `<img>`标记具有类似的`object-fit`属性和`contain`和`cover`值。
+- **乐观更新**: 高级技术，即使在网络请求仍在进行时也能反映出成功状态。 如果请求失败，请恢复 UI 更改并显示错误消息。
 
 ## 网络
 
-您的UI处理网络请求和条件的不可预测性情况吗？
+您的 UI 处理网络请求和条件的不可预测性情况吗？
 
--   **反映网络请求状态**: 如果UI涉及进行网络请求，请清楚地显示请求的挂起/成功/失败状态。
-    -   **正在挂起**: 禁用字段/按钮，显示旋转器。
-    -   **错误**: 显示错误消息。
-    -   **成功**: 更新UI和/或显示成功消息。
--   **竞争条件**: 常见的原因是由于并行网络请求，响应顺序不能保证。 稍后发出的请求可能会更早地收到响应。 如果您的UI容易受到此类问题的影响，则可以跟踪最新的请求并忽略早期结果。 或者，使您的UI不能同时触发多个网络请求，例如通过在单击后禁用触发网络请求的元素等。
--   **避免重复请求**: 提交后应禁用按钮以避免进行重复的网络请求。
--   **合并请求**: 如果UI正在进行太多的网络请求，则可以：
-    -   节流/去抖动: 限制发出的网络请求数。
-    -   批量请求: 将请求组合在一起并仅进行一次请求。 这需要服务器端支持这种格式。
--   **缓存**: 如果最近已经使用相同的参数进行了请求，则您可以重用之前的响应并省略网络往返。
--   **请求超时**: 如果请求在规定的持续时间内没有接收到响应，您可能希望人为地显示请求失败（超时）。
--   **乐观更新**: 高级技术，即使在网络请求仍在进行时也能反映出成功状态。 如果请求失败，请恢复UI更改并显示错误消息。
+- **反映网络请求状态**: 如果 UI 涉及进行网络请求，请清楚地显示请求的挂起/成功/失败状态。
+  - **正在挂起**: 禁用字段/按钮，显示旋转器。
+  - **错误**: 显示错误消息。
+  - **成功**: 更新 UI 和/或显示成功消息。
+- **竞争条件**: 常见的原因是由于并行网络请求，响应顺序不能保证。 稍后发出的请求可能会更早地收到响应。 如果您的 UI 容易受到此类问题的影响，则可以跟踪最新的请求并忽略早期结果。 或者，使您的 UI 不能同时触发多个网络请求，例如通过在单击后禁用触发网络请求的元素等。
+- **避免重复请求**: 提交后应禁用按钮以避免进行重复的网络请求。
+- **合并请求**: 如果 UI 正在进行太多的网络请求，则可以：
+  - 节流/去抖动: 限制发出的网络请求数。
+  - 批量请求: 将请求组合在一起并仅进行一次请求。 这需要服务器端支持这种格式。
+- **缓存**: 如果最近已经使用相同的参数进行了请求，则您可以重用之前的响应并省略网络往返。
+- **请求超时**: 如果请求在规定的持续时间内没有接收到响应，您可能希望人为地显示请求失败（超时）。
+- **乐观更新**: 高级技术，即使在网络请求仍在进行时也能反映出成功状态。 如果请求失败，请恢复 UI 更改并显示错误消息。
 
 ## 可访问性（a11y）
 
-在UI中处理可访问性是一个很大的优势，在某些情况下，老年工程师们需要处理可访问性。
+在 UI 中处理可访问性是一个很大的优势，在某些情况下，老年工程师们需要处理可访问性。
 
--   您能否仅使用键盘使用UI？
--   您是否可以使用屏幕阅读器使用您的UI组件？
--   您的UI组件可以在没有颜色的情况下工作吗？
--   您的UI组件可以在没有声音的情况下工作吗？
+- 您能否仅使用键盘使用 UI？
+- 您是否可以使用屏幕阅读器使用您的 UI 组件？
+- 您的 UI 组件可以在没有颜色的情况下工作吗？
+- 您的 UI 组件可以在没有声音的情况下工作吗？
 
-来源：[网页的可访问UI组件](https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67)
+来源：[网页的可访问 UI 组件](https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67)
 
--   **屏幕阅读器、ARIA角色、状态和属性**:
-    -   为不使用自定义HTML标记构建的元素添加正确的`aria-role`。
-    -   使用`aria-label`来描述其中没有文本显示的元素（例如仅图标的按钮）。
-    -   通过`aria-describedby`/`aria-errormessage`将错误消息元素链接到负责它们的元素。
-    -   **图片“alt”文本**:为`<img>`元素添加`alt`属性，以便屏幕阅读器可以描述图片。
--   **键盘交互**
-    -   将`tabindex`属性添加到要通过键盘制表符聚焦的元素。
-    -   元素可以通过键盘触发。
-    -   检查焦点顺序是否合理。
--   **视觉问题**
-    -   **颜色对比度**: 文本/图片与背景之间的足够颜色对比度。
-    -   **元素大小**: 字体大小，交互元素大小应足够大，适合其预期的媒介。
+- **屏幕阅读器、ARIA 角色、状态和属性**:
+  - 为不使用自定义 HTML 标记构建的元素添加正确的`aria-role`。
+  - 使用`aria-label`来描述其中没有文本显示的元素（例如仅图标的按钮）。
+  - 通过`aria-describedby`/`aria-errormessage`将错误消息元素链接到负责它们的元素。
+  - **图片“alt”文本**:为`<img>`元素添加`alt`属性，以便屏幕阅读器可以描述图片。
+- **键盘交互**
+  - 将`tabindex`属性添加到要通过键盘制表符聚焦的元素。
+  - 元素可以通过键盘触发。
+  - 检查焦点顺序是否合理。
+- **视觉问题**
+  - **颜色对比度**: 文本/图片与背景之间的足够颜色对比度。
+  - **元素大小**: 字体大小，交互元素大小应足够大，适合其预期的媒介。
 
-Google的[web.dev]有一个[免费的深入课程](https://web.dev/learn/accessibility/)，其中详细介绍了可访问性的内容，我们强烈推荐。
+Google 的[web.dev]有一个[免费的深入课程](https://web.dev/learn/accessibility/)，其中详细介绍了可访问性的内容，我们强烈推荐。
 
 ## 边缘情况
 
 在面试期间，可能没有足够的时间处理代码中的所有边缘情况，但是最好向面试官提及它们，以获得额外的答案。
 
--   **处理长字符串**: UI中的字符串（例如标题/按钮标签）可能会导致UI表现出奇怪的行为，例如溢出并影响周围元素的位置。 长字符串可能是用户输入或翻译的结果。
--   **空状态**: 显示一个空状态消息/占位符以指示内容的缺失，例如列表为空时。 什么也不显示可能会使用户认为仍在等待网络请求并且正在获取数据。
--   **列表中的太多项**: 在单个页面上显示太多项目可能会导致糟糕的UX（用户必须滚动很多）和反应灵敏度和内存消耗的糟糕性能。
-    -   **分页**: 将长列表分成多个页面。
-    -   [**虚拟列表**](https://www.patterns.dev/posts/virtual-lists):在动态列表中仅呈现可见行的内容，而不是整个列表。
-    -   截断多余的内容，并显示一个省略号。 `word-break` CSS属性非常有用。
-    -   将内容限制在前X个字符/单词，并在“显示更多”按钮后面隐藏多余的内容。
+- **处理长字符串**: UI 中的字符串（例如标题/按钮标签）可能会导致 UI 表现出奇怪的行为，例如溢出并影响周围元素的位置。 长字符串可能是用户输入或翻译的结果。
+- **空状态**: 显示一个空状态消息/占位符以指示内容的缺失，例如列表为空时。 什么也不显示可能会使用户认为仍在等待网络请求并且正在获取数据。
+- **列表中的太多项**: 在单个页面上显示太多项目可能会导致糟糕的 UX（用户必须滚动很多）和反应灵敏度和内存消耗的糟糕性能。
+  - **分页**: 将长列表分成多个页面。
+  - [**虚拟列表**](https://www.patterns.dev/posts/virtual-lists):在动态列表中仅呈现可见行的内容，而不是整个列表。
+  - 截断多余的内容，并显示一个省略号。 `word-break` CSS 属性非常有用。
+  - 将内容限制在前 X 个字符/单词，并在“显示更多”按钮后面隐藏多余的内容。
 
 ## 性能
 
--   **节流/去抖动**: 节流和去抖动是限制频率的技术，可防止不必要的操作。 此技术可用于不是非常时间敏感的操作，例如网络请求和滚动/调整事件回调。
--   **缓存**: 可以将计算/网络请求的结果缓存在浏览器内存/存储器中，以避免重复操作。
--   **按需加载**: 仅在需要时延迟加载数据/组件代码，而不是一次性加载全部。
--   **预取/预加载数据**: 在需要数据之前立即预取/预加载数据，以使更新立即显示，从而减少网络延迟。
--   **列表中的太多项**: 参见上面的“边缘情况”下的内容。
+- **节流/去抖动**: 节流和去抖动是限制频率的技术，可防止不必要的操作。 此技术可用于不是非常时间敏感的操作，例如网络请求和滚动/调整事件回调。
+- **缓存**: 可以将计算/网络请求的结果缓存在浏览器内存/存储器中，以避免重复操作。
+- **按需加载**: 仅在需要时延迟加载数据/组件代码，而不是一次性加载全部。
+- **预取/预加载数据**: 在需要数据之前立即预取/预加载数据，以使更新立即显示，从而减少网络延迟。
+- **列表中的太多项**: 参见上面的“边缘情况”下的内容。
 
 ## 安全
 
--   **跨站点脚本（XSS）**: 在渲染内容时，请避免分配给[`Element.innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)或React的`dangerouslySetInnerHTML`，因为它来自用户会导致跨站点脚本，应将其分配给[`Node.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 或使用实验性的[`Element.setHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML) 方法代替。 请参考[OWASP的XSS预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
--   **“URL上下文”的输出编码**: 如果用户提供的输入可能用于URL查询参数，请使用`encodeURIComponent`来防止意外的值成为URL的一部分（例如额外的查询参数）。
--   **跨站点请求伪造**: 请参见[OWASP的XSS预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)。
+- **跨站点脚本（XSS）**: 在渲染内容时，请避免分配给[`Element.innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)或 React 的`dangerouslySetInnerHTML`，因为它来自用户会导致跨站点脚本，应将其分配给[`Node.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 或使用实验性的[`Element.setHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML) 方法代替。 请参考[OWASP 的 XSS 预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
+- **“URL 上下文”的输出编码**: 如果用户提供的输入可能用于 URL 查询参数，请使用`encodeURIComponent`来防止意外的值成为 URL 的一部分（例如额外的查询参数）。
+- **跨站点请求伪造**: 请参见[OWASP 的 XSS 预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)。
 
 ## 国际化（i18n）
 
-您的UI能够处理多种语言吗？ 添加支持更多语言有多容易？
+您的 UI 能够处理多种语言吗？ 添加支持更多语言有多容易？
 
--   **避免硬编码特定语言的标签**: 一些UI组件中具有标签字符串（例如，图片轮播具有上一个/下一个按钮的标签）。 允许使用这些标签字符串进行自定义，使它们成为组件的props/options的一部分，这很好。
--   **UI可以呈现长字符串**: 参见上面有关呈现长字符串的部分。
--   **从右到左的语言**: 某些语言（例如，阿拉伯语、希伯来语） 使用[CSS逻辑属性](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)来使你的布局适用于不同的[书写模式](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes)。
+- **避免硬编码特定语言的标签**: 一些 UI 组件中具有标签字符串（例如，图片轮播具有上一个/下一个按钮的标签）。 允许使用这些标签字符串进行自定义，使它们成为组件的 props/options 的一部分，这很好。
+- **UI 可以呈现长字符串**: 参见上面有关呈现长字符串的部分。
+- **从右到左的语言**: 某些语言（例如，阿拉伯语、希伯来语） 使用[CSS 逻辑属性](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)来使你的布局适用于不同的[书写模式](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes)。
diff --git a/packages/front-end-interview-guidebook/contents/user-interface/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/user-interface/pt-BR.mdx
index 878d344ec..57d6b30e8 100644
--- a/packages/front-end-interview-guidebook/contents/user-interface/pt-BR.mdx
+++ b/packages/front-end-interview-guidebook/contents/user-interface/pt-BR.mdx
@@ -11,16 +11,16 @@ As interfaces de usuário que os candidatos são solicitados a codificar podem v
 
 ### User Interface Components/Widgets/Layouts
 
--   Componentes: [Accordion]\(/questions/interface de usuário/acorda), [Tabs](/questions/interface/tabelas), [Widget de Classificação por Estrela](/questions/user-interface/star-rating), [Tweet](/questions/user-interface/tweet), Image Carousel.
--   Widgets: [Relógio Digital](/questions/user-interface/digital-clock), [Relógio Analógico](/questions/user-interface/analog-clock).
--   Seções de Página: [Formulário de inscrição]\(/questions/interface do usuário-assinante-forma), [Grau Sagrado]\(/questions/interface do usuário-holy-grail)
+- Componentes: [Accordion]\(/questions/interface de usuário/acorda), [Tabs](/questions/interface/tabelas), [Widget de Classificação por Estrela](/questions/user-interface/star-rating), [Tweet](/questions/user-interface/tweet), Image Carousel.
+- Widgets: [Relógio Digital](/questions/user-interface/digital-clock), [Relógio Analógico](/questions/user-interface/analog-clock).
+- Seções de Página: [Formulário de inscrição]\(/questions/interface do usuário-assinante-forma), [Grau Sagrado]\(/questions/interface do usuário-holy-grail)
 
 ### Apps/Jogos
 
 O tempo permitido para perguntas sobre aplicativos/jogos geralmente é maior do que para componentes/widgets. Dependendo da complexidade da pergunta, você pode gastar até meia hora ou até mesmo uma hora para completar a pergunta, especialmente se for solicitado a construir jogos.
 
--   Apps: [Todo List](/questions/user-interface/todo-list), [Stopwatch](/questions/user-interface/stopwatch), [Temperature Converter](/questions/user-interface/temperature-converter).
--   Jogos: [Tic-tac-toe](/questions/user-interface/tic-tac-toe), [Whack-a-mole](/questions/user-interface/whack-a-mole), Serpente, Tetris, Minesweeper, Conectar 4.
+- Apps: [Todo List](/questions/user-interface/todo-list), [Stopwatch](/questions/user-interface/stopwatch), [Temperature Converter](/questions/user-interface/temperature-converter).
+- Jogos: [Tic-tac-toe](/questions/user-interface/tic-tac-toe), [Whack-a-mole](/questions/user-interface/whack-a-mole), Serpente, Tetris, Minesweeper, Conectar 4.
 
 Observe que a maioria dos jogos será baseada em uma grade 2D. Certifique-se de saber como criar layouts de grade em HTML e CSS!
 
@@ -29,20 +29,20 @@ Observe que a maioria dos jogos será baseada em uma grade 2D. Certifique-se de
 Entrevistas de codificação de interface de usuário compartilham algumas semelhanças com entrevistas de codificação não relacionadas à interface de usuário. Em geral, você deve:
 
 1.  Descobrir em qual plataforma você está codificando e se familiarizar com o ambiente de codificação:
-    -   Se você estará usando um ambiente de desenvolvimento integrado (IDE) local ou online. Se a IDE for local, você usará seu próprio laptop?
-    -   Atalhos do editor suportados.
-    -   "Se você pode usar bibliotecas/frameworks JavaScript ou precisa usar JavaScript puro.".
-    -   Se você pode executar código e visualizar a UI.
-    -   Quais são as sintaxes e recursos de linguagem JavaScript mais recentemente suportados?
-    -   Se você pode instalar dependências antecipadamente.
+    - Se você estará usando um ambiente de desenvolvimento integrado (IDE) local ou online. Se a IDE for local, você usará seu próprio laptop?
+    - Atalhos do editor suportados.
+    - "Se você pode usar bibliotecas/frameworks JavaScript ou precisa usar JavaScript puro.".
+    - Se você pode executar código e visualizar a UI.
+    - Quais são as sintaxes e recursos de linguagem JavaScript mais recentemente suportados?
+    - Se você pode instalar dependências antecipadamente.
 2.  Faça sua própria apresentação em menos de um minuto. A menos que seja solicitado, não leve mais tempo do que isso, caso contrário, você pode não ter tempo suficiente para programar.
 3.  Fazer perguntas de esclarecimento ao receber a pergunta. Esclareça o seguinte:
-    -   Você pode usar a sintaxe mais recente do JavaScript?
-    -   Suporte do navegador, pois isso afetará as APIs do navegador que você pode usar.
+    - Você pode usar a sintaxe mais recente do JavaScript?
+    - Suporte do navegador, pois isso afetará as APIs do navegador que você pode usar.
 4.  Divida o problema em etapas/marcos que se construam uma sobre a outra. Comunique essa divisão ao seu entrevistador. Ao contrário das entrevistas de codificação tradicionais, o foco das entrevistas de codificação de Interface do Usuário geralmente está nos estados dos componentes e nas APIs, em vez de estruturas de dados complexas e algoritmos.
 5.  Crie sua solução em código e explique seu código ao seu entrevistador enquanto estiver codificando.
-    -   Sempre que possível, teste seu código no navegador após cada marco ou recurso adicionado, em vez de fazer isso apenas no final.
-    -   Consulte a [Folha de Dicas de Perguntas de Interface do Usuário](/front-end-interview-guidebook/user-interface-questions-cheatsheet) para uma lista de coisas a serem observadas durante entrevistas de codificação de Interface do Usuário.
+    - Sempre que possível, teste seu código no navegador após cada marco ou recurso adicionado, em vez de fazer isso apenas no final.
+    - Consulte a [Folha de Dicas de Perguntas de Interface do Usuário](/front-end-interview-guidebook/user-interface-questions-cheatsheet) para uma lista de coisas a serem observadas durante entrevistas de codificação de Interface do Usuário.
 6.  Após codificar, leia seu código uma vez e tente identificar erros básicos, como erros de digitação, uso de variáveis antes de inicializá-las, uso incorreto de APIs, etc.
 7.  Faça um esboço de alguns casos de teste básicos e alguns casos limite. Teste seu código com esses casos e determine se seu código os aprova. Se ele falhar, depure o(s) problema(s) e corrija-os.
 8.  Explique qualquer compromisso que você tenha feito, casos que você explicitamente não tratou e como você melhoraria o código se tivesse mais tempo.
@@ -52,57 +52,57 @@ Entrevistas de codificação de interface de usuário compartilham algumas semel
 
 1.  Esteja familiarizado com os tópicos listados em "Conceitos Importantes" abaixo. A seção de [Quiz](/front-end-interview-guidebook/quiz) também pode ser um bom começo, já que você pode ser questionado sobre esses conceitos na forma de perguntas de quiz durante a codificação.
 2.  É melhor aprender a construir interfaces de usuário tanto em JavaScript puro quanto em um framework de UI de sua escolha. A maioria das empresas permitirá o uso de frameworks de UI JavaScript, mas algumas empresas (por exemplo, o Google) podem exigir que você use apenas JavaScript puro.
-    -   **JavaScript Puro**: Aprenda as APIs de manipulação do DOM. No mínimo, você deve saber como criar novos elementos no DOM, adicionar classes/atributos a eles e adicionar elementos filhos. Se você tem experiência com [jQuery](https://jquery.com/), dê uma olhada em [You might not need jQuery](https://youmightnotneedjquery.com), um site que mostra como realizar operações comuns do jQuery em JavaScript puro. Você ficará agradavelmente surpreso ao descobrir que, com as APIs de navegadores modernos, realmente não há mais tanta necessidade do jQuery.
-    -   **Framework de Interface do Usuário em JavaScript**: Esteja familiarizado com um framework de UI de sua escolha. Mantenha-se com o framework com o qual você está mais familiarizado. Não há necessidade e provavelmente não há tempo suficiente para aprender um novo framework. Se você é novo em frameworks de UI em JavaScript, [React](https://reactjs.org/) será nossa recomendação, pois é a biblioteca/framework mais popular para construir interfaces de usuário atualmente, e é a linguagem mais procurada pelas empresas ao contratar engenheiros front-end.
+    - **JavaScript Puro**: Aprenda as APIs de manipulação do DOM. No mínimo, você deve saber como criar novos elementos no DOM, adicionar classes/atributos a eles e adicionar elementos filhos. Se você tem experiência com [jQuery](https://jquery.com/), dê uma olhada em [You might not need jQuery](https://youmightnotneedjquery.com), um site que mostra como realizar operações comuns do jQuery em JavaScript puro. Você ficará agradavelmente surpreso ao descobrir que, com as APIs de navegadores modernos, realmente não há mais tanta necessidade do jQuery.
+    - **Framework de Interface do Usuário em JavaScript**: Esteja familiarizado com um framework de UI de sua escolha. Mantenha-se com o framework com o qual você está mais familiarizado. Não há necessidade e provavelmente não há tempo suficiente para aprender um novo framework. Se você é novo em frameworks de UI em JavaScript, [React](https://reactjs.org/) será nossa recomendação, pois é a biblioteca/framework mais popular para construir interfaces de usuário atualmente, e é a linguagem mais procurada pelas empresas ao contratar engenheiros front-end.
 3.  Esteja familiarizado com a escrita de CSS em condições de entrevista (pequenas perguntas que não exigirão escrever muito CSS):
-    -   **Escreva Vanilla CSS**: aprenda a escrever CSS sem depender de pré-processadores como Sass/Less. Nem todos os ambientes de codificação permitirão o uso de processadores, e as perguntas de entrevista provavelmente serão pequenas e não se beneficiarão muito dos recursos que os pré-processadores de CSS oferecem. A característica mais útil dos processadores de CSS é o uso de variáveis, que está disponível nativamente por meio das propriedades personalizadas de CSS (variáveis CSS).
-    -   **Adote uma convenção de nomenclatura CSS**: Considere adotar uma metodologia de nomenclatura CSS como [Block Element Modifier](https://getbem.com) ao escrever suas classes.
+    - **Escreva Vanilla CSS**: aprenda a escrever CSS sem depender de pré-processadores como Sass/Less. Nem todos os ambientes de codificação permitirão o uso de processadores, e as perguntas de entrevista provavelmente serão pequenas e não se beneficiarão muito dos recursos que os pré-processadores de CSS oferecem. A característica mais útil dos processadores de CSS é o uso de variáveis, que está disponível nativamente por meio das propriedades personalizadas de CSS (variáveis CSS).
+    - **Adote uma convenção de nomenclatura CSS**: Considere adotar uma metodologia de nomenclatura CSS como [Block Element Modifier](https://getbem.com) ao escrever suas classes.
 4.  Leia nossos guias detalhados de codificação de Interface do Usuário:
-    -   [Folha de perguntas de Interface do Usuário](/front-end-interview-guidebook/user-interface-questions-cheatsheet)
-    -   [Princípios de API Design de Componentes de Interface do Usuário](/front-end-interview-guidebook/user-interface-components-api-design-principles)
+    - [Folha de perguntas de Interface do Usuário](/front-end-interview-guidebook/user-interface-questions-cheatsheet)
+    - [Princípios de API Design de Componentes de Interface do Usuário](/front-end-interview-guidebook/user-interface-components-api-design-principles)
 5.  Escolha um [plano de estudo](/get-started) e pratique as [perguntas de codificação de Interface do Usuário](/prepare/coding) recomendadas para o plano de estudo selecionado.
-    -   Dedique aproximadamente a mesma quantidade de tempo praticando a construção de componentes de interface do usuário e a construção de aplicativos/jogos. Ambos são igualmente importantes.
+    - Dedique aproximadamente a mesma quantidade de tempo praticando a construção de componentes de interface do usuário e a construção de aplicativos/jogos. Ambos são igualmente importantes.
 
 ## Conceitos Importantes
 
-| Categoria              | Tópicos Importantes                                                                                                              |
-| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| Estruturas de Dados    | Vetores, Mapas, Pilhas, Árvores, Conjuntos                                                                                       |
-| Engenharia de Software | Princípios de SOLID, Padrões de Design, Model-View-Controller                                                                    |
-| HTML                   | HTML Semântico, Validação de Formulário, Envio de Formulário                                                                     |
-| CSS                    | Modelo de caixa, Seletores, Especificidade, Posicionamento, Unidades, Flexbox, Grid, Propriedades personalizadas CSS (variáveis) |
-| JavaScript             | Closures, Callbacks, `Promise`, `async`/`await`, manipulando argumentos variádicos                                               |
-| DOM                    | Travessia do DOM, Criação do DOM, Manipulação do DOM, Acesso às propriedades de elementos/nós, Delegação de eventos              |
-| APIs de runtime        | Temporizador (`setTimeout`, `setInterval`), Rede (Ajax, `fetch`)                                                                 |
-| Acessibilidade         | Papéis, estados e propriedades ARIA, Interações de Teclado                                                                       |
+| Categoria | Tópicos Importantes |
+| --- | --- |
+| Estruturas de Dados | Vetores, Mapas, Pilhas, Árvores, Conjuntos |
+| Engenharia de Software | Princípios de SOLID, Padrões de Design, Model-View-Controller |
+| HTML | HTML Semântico, Validação de Formulário, Envio de Formulário |
+| CSS | Modelo de caixa, Seletores, Especificidade, Posicionamento, Unidades, Flexbox, Grid, Propriedades personalizadas CSS (variáveis) |
+| JavaScript | Closures, Callbacks, `Promise`, `async`/`await`, manipulando argumentos variádicos |
+| DOM | Travessia do DOM, Criação do DOM, Manipulação do DOM, Acesso às propriedades de elementos/nós, Delegação de eventos |
+| APIs de runtime | Temporizador (`setTimeout`, `setInterval`), Rede (Ajax, `fetch`) |
+| Acessibilidade | Papéis, estados e propriedades ARIA, Interações de Teclado |
 
 ## Rubricas para Entrevistas de Codificação de Interface do Usuário
 
 As entrevistas de codificação de interface do usuário têm rubricas semelhantes às entrevistas de codificação em JavaScript, pois ambas envolvem codificação no domínio de front-end. No entanto, as perguntas de codificação de interface do usuário terão ainda mais ênfase na expertise no domínio e nos vários tópicos de front-end.
 
--   **Resolução de Problemas**: Use uma abordagem sistemática e lógica para compreender e abordar um problema. Divida o problema em problemas menores e independentes. Avalie diferentes abordagens e suas compensações (trade-offs).
--   **Fundamentos de Engenharia de Software**: Familiaridade com estruturas de dados, algoritmos, análise de complexidade em tempo de execução, uso de padrões de design, projetar soluções com abstrações limpas.
--   **Expertise no Domínio**: Compreensão do domínio de front-end e das linguagens relevantes: Navegador (DOM e APIs do DOM), HTML, CSS, JavaScript, Experiência do Usuário, Acessibilidade, i18n (internacionalização), Redes, Desempenho.
--   **Comunicação**: Fazer perguntas para esclarecer detalhes e explicar claramente sua abordagem e considerações.
--   **Verificação**: Identificar vários cenários para testar o código, incluindo casos de borda. Ser capaz de diagnosticar e corrigir quaisquer problemas que surjam.
+- **Resolução de Problemas**: Use uma abordagem sistemática e lógica para compreender e abordar um problema. Divida o problema em problemas menores e independentes. Avalie diferentes abordagens e suas compensações (trade-offs).
+- **Fundamentos de Engenharia de Software**: Familiaridade com estruturas de dados, algoritmos, análise de complexidade em tempo de execução, uso de padrões de design, projetar soluções com abstrações limpas.
+- **Expertise no Domínio**: Compreensão do domínio de front-end e das linguagens relevantes: Navegador (DOM e APIs do DOM), HTML, CSS, JavaScript, Experiência do Usuário, Acessibilidade, i18n (internacionalização), Redes, Desempenho.
+- **Comunicação**: Fazer perguntas para esclarecer detalhes e explicar claramente sua abordagem e considerações.
+- **Verificação**: Identificar vários cenários para testar o código, incluindo casos de borda. Ser capaz de diagnosticar e corrigir quaisquer problemas que surjam.
 
 ## Perguntas de Melhores Práticas
 
 Com base na experiência, as melhores perguntas de entrevista de interface do usuário para praticar, determinadas pela frequência e pelos conceitos importantes abordados são:
 
--   [Lista de tarefas](/questions/interface/todo-list)
--   [Formulário de Inscrição](/questions/user-interface/signup-form)
--   [Conversor de Temperatura](/questions/user-interface/temperature-converter)
--   [Barra de Progresso](/questions/user-interface/progress-bar)
--   [Relógio Analógico](/questions/interface/analog-clock)
--   [Quadro de Empregos](/questions/user-interface/job-board)
--   [Whack-a-mole](/questions/interface/whack-a-mole)
--   [Jogo da Velha](/questions/interface/whack-a-mole)
--   [Abas](/questions/user-interface/tabs)
--   Carrossel de Imagens
--   Autocompletar
--   Menu dropdown
--   Modal
+- [Lista de tarefas](/questions/interface/todo-list)
+- [Formulário de Inscrição](/questions/user-interface/signup-form)
+- [Conversor de Temperatura](/questions/user-interface/temperature-converter)
+- [Barra de Progresso](/questions/user-interface/progress-bar)
+- [Relógio Analógico](/questions/interface/analog-clock)
+- [Quadro de Empregos](/questions/user-interface/job-board)
+- [Whack-a-mole](/questions/interface/whack-a-mole)
+- [Jogo da Velha](/questions/interface/whack-a-mole)
+- [Abas](/questions/user-interface/tabs)
+- Carrossel de Imagens
+- Autocompletar
+- Menu dropdown
+- Modal
 
 "GreatFrontEnd possui uma [lista abrangente de perguntas de codificação de Interface de Usuário](/prepare/coding) que você pode praticar na sua estrutura de escolha (atualmente suporta JavaScript Puro e [React](https://reactjs.org/)).". Também fornecemos casos de teste manuais que você pode usar para testar seu código e verificar a correção, além de soluções escritas em várias estruturas de interface de usuário JavaScript por engenheiros sênior ex-FAANG. Testes automatizados não são fornecidos para perguntas de IU (Interface de Usuário) porque geralmente estão acoplados à implementação e são difíceis de serem testados com precisão por meio de testes automatizados. Além disso, durante entrevistas, provavelmente você terá que testar sua IU por si mesmo.
 
diff --git a/packages/front-end-interview-guidebook/contents/user-interface/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/user-interface/zh-CN.mdx
index cc7c8ad99..1c494e062 100644
--- a/packages/front-end-interview-guidebook/contents/user-interface/zh-CN.mdx
+++ b/packages/front-end-interview-guidebook/contents/user-interface/zh-CN.mdx
@@ -11,16 +11,16 @@ description: 准备前端/网络开发人员面试中的用户界面问题的指
 
 ### 用户界面组件/小部件/布局
 
--   用户界面组件/小部件/布局组件：[手风琴](/questions/user-interface/accordion)、[选项卡](/questions/user-interface/tabs)、[星级评分小部件](/questions/user-interface/star-rating)、[推特](/questions/user-interface/tweet)、图片轮播。
--   小部件：[数字时钟](/questions/user-interface/digital-clock)、[模拟时钟](/questions/user-interface/analog-clock)。
--   页面部分：[注册表单](/questions/user-interface/signup-form)、[圣杯](/questions/user-interface/holy-grail)
+- 用户界面组件/小部件/布局组件：[手风琴](/questions/user-interface/accordion)、[选项卡](/questions/user-interface/tabs)、[星级评分小部件](/questions/user-interface/star-rating)、[推特](/questions/user-interface/tweet)、图片轮播。
+- 小部件：[数字时钟](/questions/user-interface/digital-clock)、[模拟时钟](/questions/user-interface/analog-clock)。
+- 页面部分：[注册表单](/questions/user-interface/signup-form)、[圣杯](/questions/user-interface/holy-grail)
 
 ### 应用程序/游戏
 
 针对应用程序/游戏问题的时间通常比组件/小部件更长。 根据问题的复杂程度，您可能需要花上半个小时甚至一个小时来完成问题，特别是如果您被要求构建游戏。
 
--   应用程序：[待办事项列表](/questions/user-interface/todo-list)、[秒表](/questions/user-interface/stopwatch)、[温度转换器](/questions/user-interface/temperature-converter)。
--   游戏：[井字游戏](/questions/user-interface/tic-tac-toe)、[捉地鼠游戏](/questions/user-interface/whack-a-mole)、贪吃蛇、俄罗斯方块、扫雷、四连棋。
+- 应用程序：[待办事项列表](/questions/user-interface/todo-list)、[秒表](/questions/user-interface/stopwatch)、[温度转换器](/questions/user-interface/temperature-converter)。
+- 游戏：[井字游戏](/questions/user-interface/tic-tac-toe)、[捉地鼠游戏](/questions/user-interface/whack-a-mole)、贪吃蛇、俄罗斯方块、扫雷、四连棋。
 
 请注意，大多数游戏将是基于 2D 网格的游戏。 请确保您知道如何在 HTML 和 CSS 中创建网格布局！
 
@@ -29,20 +29,20 @@ description: 准备前端/网络开发人员面试中的用户界面问题的指
 用户界面编码面试与非前端编码面试有许多共性。 一般来说，你应该：
 
 1.  了解您所编码的平台并熟悉编码环境：
-    -   是否使用本地 IDE 或在线 IDE。 如果使用本地 IDE，是否使用自己的笔记本电脑？
-    -   支持的编辑器快捷键。
-    -   是否可以使用 JavaScript 库/框架或必须使用原生 JavaScript。
-    -   是否可以执行代码并预览用户界面。
-    -   最新支持的 JavaScript 语法和语言特性是什么？
-    -   是否可以预先安装依赖项。
+    - 是否使用本地 IDE 或在线 IDE。 如果使用本地 IDE，是否使用自己的笔记本电脑？
+    - 支持的编辑器快捷键。
+    - 是否可以使用 JavaScript 库/框架或必须使用原生 JavaScript。
+    - 是否可以执行代码并预览用户界面。
+    - 最新支持的 JavaScript 语法和语言特性是什么？
+    - 是否可以预先安装依赖项。
 2.  在一分钟内进行自我介绍。 除非受到要求，否则不要花费更长时间，否则您可能没有足够的时间来编码。
 3.  在收到问题时询问澄清问题。 澄清以下内容：
-    -   是否可以使用最新的 JavaScript 语法？
-    -   浏览器支持，因为这将影响您可以使用的浏览器 API。
+    - 是否可以使用最新的 JavaScript 语法？
+    - 浏览器支持，因为这将影响您可以使用的浏览器 API。
 4.  将问题分解为不同的阶段/里程碑。 将此分解通知面试官。 与编码面试不同，用户界面编码面试的重点通常在于组件状态和 API 上，而不是复杂的数据结构和算法。
 5.  使用这些用例测试您的代码，并确定您的代码是否通过这些用例。
-    -   在添加每个里程碑/功能后，尽可能在浏览器中测试您的代码，而不是仅在最后进行测试。
-    -   请参阅[用户界面问题备忘单](/front-end-interview-guidebook/user-interface-questions-cheatsheet)，了解需要注意哪些方面在用户界面编码面试期间。
+    - 在添加每个里程碑/功能后，尽可能在浏览器中测试您的代码，而不是仅在最后进行测试。
+    - 请参阅[用户界面问题备忘单](/front-end-interview-guidebook/user-interface-questions-cheatsheet)，了解需要注意哪些方面在用户界面编码面试期间。
 6.  在编码后，阅读您的代码一次，尝试找出基本错误，例如拼写错误、在初始化变量之前使用变量、错误使用 API 等。
 7.  概述一些基本的测试用例和一些边缘情况。 使用这些用例测试您的代码，并确定您的代码是否通过这些用例。 如果失败，请调试问题并修复问题。
 8.  解释您所做的折衷、您明确未处理的情况以及如何在有更多时间的情况下改进代码。
@@ -52,57 +52,57 @@ description: 准备前端/网络开发人员面试中的用户界面问题的指
 
 1.  熟悉“重要概念”下的主题。 [测验部分](/front-end-interview-guidebook/quiz)也可能是一个好的开始，因为您可能会在形式上的测验问题中被问及这些概念。
 2.  最好学习如何在原生 JavaScript 和首选的 UI 框架中构建 UI。 大多数公司将允许使用 JavaScript UI 框架，但某些公司（例如 Google）强制要求仅使用原生 JavaScript。
-    -   **原生 JavaScript**：学习 DOM 操作 API。 您至少应该知道如何创建新的 DOM 元素，在其中添加类/属性，并添加子元素。 如果您来自 [jQuery](https://jquery.com/) 背景，请查看 [You might not need jQuery](https://youmightnotneedjquery.com)，这是一个网站，显示您如何在原生 JavaScript 中实现常见的 jQuery 操作。 你会惊喜地发现，使用现代浏览器 API，实际上并不需要 jQuery。
-    -   **JavaScript UI 框架**：熟悉首选的 UI 框架。 坚持您最熟悉的框架即可。 没有必要也可能没有足够的时间学习新的框架。 如果您是 JavaScript UI 框架的新手，我们将推荐 [React](https://reactjs.org/)，因为它是目前构建 UI 的最流行的库/框架，是大多数公司在招聘前端工程师时寻找的最受欢迎的语言。
+    - **原生 JavaScript**：学习 DOM 操作 API。 您至少应该知道如何创建新的 DOM 元素，在其中添加类/属性，并添加子元素。 如果您来自 [jQuery](https://jquery.com/) 背景，请查看 [You might not need jQuery](https://youmightnotneedjquery.com)，这是一个网站，显示您如何在原生 JavaScript 中实现常见的 jQuery 操作。 你会惊喜地发现，使用现代浏览器 API，实际上并不需要 jQuery。
+    - **JavaScript UI 框架**：熟悉首选的 UI 框架。 坚持您最熟悉的框架即可。 没有必要也可能没有足够的时间学习新的框架。 如果您是 JavaScript UI 框架的新手，我们将推荐 [React](https://reactjs.org/)，因为它是目前构建 UI 的最流行的库/框架，是大多数公司在招聘前端工程师时寻找的最受欢迎的语言。
 3.  熟悉在面试条件下编写 CSS（不需要编写太多的 CSS 的小问题）：
-    -   **编写原生 CSS**：学习如何在没有预处理器（例如 Sass/Less）的情况下编写 CSS。 不是所有的编码环境都将允许使用处理器，并且面试问题可能很小，不会真正受益于 CSS 预处理器带来的功能。 CSS 处理器最有用的功能是使用变量，可通过 CSS 自定义属性（CSS 变量）本地提供。
-    -   **采用 CSS 命名约定**：在编写类时，请考虑采用 CSS 命名方法论，例如 [块元素修饰符](https://getbem.com)。
+    - **编写原生 CSS**：学习如何在没有预处理器（例如 Sass/Less）的情况下编写 CSS。 不是所有的编码环境都将允许使用处理器，并且面试问题可能很小，不会真正受益于 CSS 预处理器带来的功能。 CSS 处理器最有用的功能是使用变量，可通过 CSS 自定义属性（CSS 变量）本地提供。
+    - **采用 CSS 命名约定**：在编写类时，请考虑采用 CSS 命名方法论，例如 [块元素修饰符](https://getbem.com)。
 4.  阅读我们的用户界面编码深入指南：
-    -   [用户界面问题备忘单](/front-end-interview-guidebook/user-interface-questions-cheatsheet)
-    -   [用户界面组件 API 设计原则](/front-end-interview-guidebook/user-interface-components-api-design-principles)
+    - [用户界面问题备忘单](/front-end-interview-guidebook/user-interface-questions-cheatsheet)
+    - [用户界面组件 API 设计原则](/front-end-interview-guidebook/user-interface-components-api-design-principles)
 5.  选择一个[学习计划](/get-started)，并练习推荐的[用户界面编码问题](/prepare/coding)。
-    -   在构建 UI 组件和构建应用程序/游戏方面，花费大致相等的时间。 两者同样重要。
+    - 在构建 UI 组件和构建应用程序/游戏方面，花费大致相等的时间。 两者同样重要。
 
 ## 重要概念
 
-| 类别         | 重要主题                                             |
-| ---------- | ------------------------------------------------ |
-| 数据结构       | 数组、映射、栈、树、集合                                     |
-| 软件工程       | SOLID 原则、设计模式、模型 - 视图 - 控制器                      |
-| HTML       | 语义 HTML、表单验证、表单提交                                |
-| CSS        | 盒模型、选择器、特异性、定位、单位、Flexbox、Grid、CSS 自定义属性（变量）     |
-| JavaScript | 闭包、回调、`Promise`、`async`/`await`、变长参数处理           |
-| DOM        | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托              |
-| 运行时 API    | 计时器（`setTimeout`、`setInterval`）、网络（Ajax、`fetch`） |
-| 可访问性       | ARIA 角色、状态和属性、键盘交互                               |
+| 类别 | 重要主题 |
+| --- | --- |
+| 数据结构 | 数组、映射、栈、树、集合 |
+| 软件工程 | SOLID 原则、设计模式、模型 - 视图 - 控制器 |
+| HTML | 语义 HTML、表单验证、表单提交 |
+| CSS | 盒模型、选择器、特异性、定位、单位、Flexbox、Grid、CSS 自定义属性（变量） |
+| JavaScript | 闭包、回调、`Promise`、`async`/`await`、变长参数处理 |
+| DOM | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托 |
+| 运行时 API | 计时器（`setTimeout`、`setInterval`）、网络（Ajax、`fetch`） |
+| 可访问性 | ARIA 角色、状态和属性、键盘交互 |
 
 ## 用户界面编码面试评分标准
 
 用户界面编码面试与 JavaScript 编码面试具有类似的评分标准，因为两者都涉及前端领域的编码。 然而，用户界面编码问题将更加强调领域专业知识和各种前端主题。
 
--   **问题解决能力**：使用系统性和逻辑性的方法来理解和解决问题。 将问题分解为更小的独立问题。 评估不同方法及其权衡。
--   **软件工程基础**：熟悉数据结构、算法、运行时复杂度分析、使用设计模式、使用干净的抽象设计解决方案。
--   **领域专业知识**：了解前端领域及相关语言：浏览器（DOM 和 DOM API）、HTML、CSS、JavaScript、用户体验、可访问性、i18n、网络、性能。
--   **交流**：询问澄清细节并清楚地解释自己的方法和考虑因素。
--   **验证**：确定各种测试代码的场景，包括边缘情况。 能够诊断和修复出现的任何问题。
+- **问题解决能力**：使用系统性和逻辑性的方法来理解和解决问题。 将问题分解为更小的独立问题。 评估不同方法及其权衡。
+- **软件工程基础**：熟悉数据结构、算法、运行时复杂度分析、使用设计模式、使用干净的抽象设计解决方案。
+- **领域专业知识**：了解前端领域及相关语言：浏览器（DOM 和 DOM API）、HTML、CSS、JavaScript、用户体验、可访问性、i18n、网络、性能。
+- **交流**：询问澄清细节并清楚地解释自己的方法和考虑因素。
+- **验证**：确定各种测试代码的场景，包括边缘情况。 能够诊断和修复出现的任何问题。
 
 ## 最佳实践问题
 
 从经验而言，最佳用户界面面试问题将根据频率和涉及重要概念来确定：
 
--   [待办事项列表](/questions/user-interface/todo-list)
--   [注册表单](/questions/user-interface/signup-form)
--   [温度转换器](/questions/user-interface/temperature-converter)
--   [进度条](/questions/user-interface/progress-bar)
--   [模拟时钟](/questions/user-interface/analog-clock)
--   [求职信息板](/questions/user-interface/job-board)
--   [捉地鼠游戏](/questions/user-interface/whack-a-mole)
--   [井字游戏](/questions/user-interface/tic-tac-toe)
--   [选项卡](/questions/user-interface/tabs)
--   图片轮播
--   自动完成
--   下拉菜单
--   模态框
+- [待办事项列表](/questions/user-interface/todo-list)
+- [注册表单](/questions/user-interface/signup-form)
+- [温度转换器](/questions/user-interface/temperature-converter)
+- [进度条](/questions/user-interface/progress-bar)
+- [模拟时钟](/questions/user-interface/analog-clock)
+- [求职信息板](/questions/user-interface/job-board)
+- [捉地鼠游戏](/questions/user-interface/whack-a-mole)
+- [井字游戏](/questions/user-interface/tic-tac-toe)
+- [选项卡](/questions/user-interface/tabs)
+- 图片轮播
+- 自动完成
+- 下拉菜单
+- 模态框
 
 GreatFrontEnd 提供[广泛的用户界面编码问题列表](/prepare/coding)，您可以在首选的框架中进行练习（目前支持原生 JavaScript 和 [React](https://reactjs.org/)）。 我们还提供了您可以使用各种 JavaScript UI 框架编写解决方案的测试用例，由前 FAANG 高级工程师编写。 UI 问题不提供自动化测试用例，因为它们往往与实现耦合，并且自动化测试很难准确测试它们。 此外，在面试中，您可能需要自己测试您的 UI。
 
diff --git a/packages/quiz/questions/are-you-familiar-with-styling-svg/zh-CN.mdx b/packages/quiz/questions/are-you-familiar-with-styling-svg/zh-CN.mdx
index 84468c467..38eb08b78 100644
--- a/packages/quiz/questions/are-you-familiar-with-styling-svg/zh-CN.mdx
+++ b/packages/quiz/questions/are-you-familiar-with-styling-svg/zh-CN.mdx
@@ -2,9 +2,9 @@
 title: 您是否熟悉SVG样式？
 ---
 
-有这么几种方法可以为形状（Shapes）着色（包括在对象上指定属性），使用内联的CSS、嵌入的CSS部分或外部CSS文件。 您在网页上找到的大多数SVG都使用内联CSS，但是每种类型都有优劣之处。
+有这么几种方法可以为形状（Shapes）着色（包括在对象上指定属性），使用内联的 CSS、嵌入的 CSS 部分或外部 CSS 文件。 您在网页上找到的大多数 SVG 都使用内联 CSS，但是每种类型都有优劣之处。
 
-可以通过在节点上设置两个属性来做基本着色：`fill` 和 `stroke` 。 `fill`设置对象内的颜色，`stroke`设置对象周围绘制的线的颜色。 你可以使用在 HTML 中的 CSS 颜色命名方案定义它们的颜色，比如说颜色名（像red这种）、rgb 值（像 rgb(255,0,0) 这种）、十六进制值、rgba 值，等等。
+可以通过在节点上设置两个属性来做基本着色：`fill` 和 `stroke` 。 `fill`设置对象内的颜色，`stroke`设置对象周围绘制的线的颜色。 你可以使用在 HTML 中的 CSS 颜色命名方案定义它们的颜色，比如说颜色名（像 red 这种）、rgb 值（像 rgb(255,0,0) 这种）、十六进制值、rgba 值，等等。
 
 ```html
 <rect
@@ -18,4 +18,4 @@ title: 您是否熟悉SVG样式？
   stroke-opacity="0.8" />
 ```
 
-上述`fill="purple"`是一个 _呈现属性_ 的示例。 有趣的是，与内部样式不同的是，像`style="fill: purple"` (它恰巧也是一个属性)，呈现属性可以被[样式表中定义的CSS样式](https://css-tricks.com/presentation-attributes-vs-inline-styles/)所覆盖。 因此，如果你做了类似于`svg { fill: blue; }`的事情，它将覆盖已定义的紫色填充。
+上述`fill="purple"`是一个 _呈现属性_ 的示例。 有趣的是，与内部样式不同的是，像`style="fill: purple"` (它恰巧也是一个属性)，呈现属性可以被[样式表中定义的 CSS 样式](https://css-tricks.com/presentation-attributes-vs-inline-styles/)所覆盖。 因此，如果你做了类似于`svg { fill: blue; }`的事情，它将覆盖已定义的紫色填充。
diff --git a/packages/quiz/questions/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other/pt-BR.mdx b/packages/quiz/questions/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other/pt-BR.mdx
index 31b5a900f..79fd8c93b 100644
--- a/packages/quiz/questions/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other/pt-BR.mdx
+++ b/packages/quiz/questions/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other/pt-BR.mdx
@@ -7,9 +7,9 @@ Para entender as diferenças entre os dois, vamos ver o que cada função faz.
 
 ## `forEach`
 
--   Itera através dos elementos em uma matriz.
--   Executa um callback para cada elemento.
--   Não retorna um valor.
+- Itera através dos elementos em uma matriz.
+- Executa um callback para cada elemento.
+- Não retorna um valor.
 
 ```js
 const a = [1, 2, 3];
@@ -22,8 +22,8 @@ const doubled = a.forEach((num, index) => {
 
 ## `map`
 
--   Itera através dos elementos em uma matriz.
--   "Mapeia" cada elemento para um novo elemento chamando a função em cada elemento, criando um novo array como resultado.
+- Itera através dos elementos em uma matriz.
+- "Mapeia" cada elemento para um novo elemento chamando a função em cada elemento, criando um novo array como resultado.
 
 ```js
 const a = [1, 2, 3];
diff --git a/packages/quiz/questions/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other/zh-CN.mdx b/packages/quiz/questions/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other/zh-CN.mdx
index 02d283a29..c2fae6e13 100644
--- a/packages/quiz/questions/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other/zh-CN.mdx
+++ b/packages/quiz/questions/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other/zh-CN.mdx
@@ -7,9 +7,9 @@ subtitle: 这两者你会如何选择？
 
 ## `forEach`
 
--   通过数组中的元素进行迭代。
--   对每个元素执行回调。
--   不返回值。
+- 通过数组中的元素进行迭代。
+- 对每个元素执行回调。
+- 不返回值。
 
 ```js
 const a = [1, 2, 3];
@@ -22,8 +22,8 @@ const doubled = a.forEach((num, index) => {
 
 ## `map`
 
--   通过数组中的元素进行迭代。
--   通过在每个元素上调用函数，将每个元素 "映射 "到一个新的元素上，并作为结果创建一个新的数组。
+- 通过数组中的元素进行迭代。
+- 通过在每个元素上调用函数，将每个元素 "映射 "到一个新的元素上，并作为结果创建一个新的数组。
 
 ```js
 const a = [1, 2, 3];
diff --git a/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/metadata.json b/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/metadata.json
index 280cbf1c7..2340d8f17 100644
--- a/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/metadata.json
+++ b/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/metadata.json
@@ -5,9 +5,7 @@
   "premium": false,
   "duration": 5,
   "published": true,
-  "topics": [
-    "css"
-  ],
+  "topics": ["css"],
   "importance": "low",
   "difficulty": "medium"
-}
\ No newline at end of file
+}
diff --git a/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/pt-BR.mdx b/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/pt-BR.mdx
index 593b3776b..5f7bc2d5b 100644
--- a/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/pt-BR.mdx
+++ b/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/pt-BR.mdx
@@ -33,5 +33,5 @@ Uma estratégia mobile-first também é responsiva, no entanto, ela define todos
 
 Uma estratégia mobile-first tem as seguintes principais vantagens:
 
--   É mais performático em dispositivos móveis, já que todas as regras aplicadas para eles não precisam ser validadas em relação a nenhuma media query.
--   Designs mobile-first são mais propensos a ser utilizáveis em dispositivos maiores (apenas aparecerão mais esticados, mas ainda utilizáveis). No entanto, o inverso não é verdadeiro.
+- É mais performático em dispositivos móveis, já que todas as regras aplicadas para eles não precisam ser validadas em relação a nenhuma media query.
+- Designs mobile-first são mais propensos a ser utilizáveis em dispositivos maiores (apenas aparecerão mais esticados, mas ainda utilizáveis). No entanto, o inverso não é verdadeiro.
diff --git a/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/zh-CN.mdx b/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/zh-CN.mdx
index 34fd36b52..f860cef9c 100644
--- a/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/zh-CN.mdx
+++ b/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/zh-CN.mdx
@@ -34,5 +34,5 @@ title: 你能解释一下将网站编码为响应式与使用移动优先策略
 
 移动优先策略具有以下主要优点：
 
--   它在移动设备上的性能更强，因为适用于它们的所有规则都不必与任何媒体查询进行验证。
--   移动优先的设计更有可能在更大的设备上使用（只是会显得更拉长，但仍然可以使用）。 当然，反过来就不适用了。
+- 它在移动设备上的性能更强，因为适用于它们的所有规则都不必与任何媒体查询进行验证。
+- 移动优先的设计更有可能在更大的设备上使用（只是会显得更拉长，但仍然可以使用）。 当然，反过来就不适用了。
diff --git a/packages/quiz/questions/can-you-give-an-example-for-destructuring-an-object-or-an-array/en-US.mdx b/packages/quiz/questions/can-you-give-an-example-for-destructuring-an-object-or-an-array/en-US.mdx
index 15b9947e0..60ce77c33 100644
--- a/packages/quiz/questions/can-you-give-an-example-for-destructuring-an-object-or-an-array/en-US.mdx
+++ b/packages/quiz/questions/can-you-give-an-example-for-destructuring-an-object-or-an-array/en-US.mdx
@@ -30,8 +30,8 @@ console.log(b); // 1
 
 ```js
 // Variable assignment.
-const o = {p: 42, q: true};
-const {p, q} = o;
+const o = { p: 42, q: true };
+const { p, q } = o;
 
 console.log(p); // 42
 console.log(q); // true
diff --git a/packages/quiz/questions/can-you-give-an-example-for-destructuring-an-object-or-an-array/pt-BR.mdx b/packages/quiz/questions/can-you-give-an-example-for-destructuring-an-object-or-an-array/pt-BR.mdx
index 7515db556..78937be1b 100644
--- a/packages/quiz/questions/can-you-give-an-example-for-destructuring-an-object-or-an-array/pt-BR.mdx
+++ b/packages/quiz/questions/can-you-give-an-example-for-destructuring-an-object-or-an-array/pt-BR.mdx
@@ -30,8 +30,8 @@ console.log(b); // 1
 
 ```js
 // Atribuição de variáveis.
-const o = {p: 42, q: true};
-const {p, q} = o;
+const o = { p: 42, q: true };
+const { p, q } = o;
 
 console.log(p); // 42
 console.log(q); // true
diff --git a/packages/quiz/questions/can-you-give-an-example-for-destructuring-an-object-or-an-array/zh-CN.mdx b/packages/quiz/questions/can-you-give-an-example-for-destructuring-an-object-or-an-array/zh-CN.mdx
index a4413250a..2719b4d54 100644
--- a/packages/quiz/questions/can-you-give-an-example-for-destructuring-an-object-or-an-array/zh-CN.mdx
+++ b/packages/quiz/questions/can-you-give-an-example-for-destructuring-an-object-or-an-array/zh-CN.mdx
@@ -30,8 +30,8 @@ console.log(b); // 1
 
 ```js
 // 变量赋值
-const o = {p: 42, q: true};
-const {p, q} = o;
+const o = { p: 42, q: true };
+const { p, q } = o;
 
 console.log(p); // 42
 console.log(q); // true
diff --git a/packages/quiz/questions/can-you-give-an-example-of-a-curry-function-and-why-this-syntax-offers-an-advantage/metadata.json b/packages/quiz/questions/can-you-give-an-example-of-a-curry-function-and-why-this-syntax-offers-an-advantage/metadata.json
index c5047a7e8..926fcef27 100644
--- a/packages/quiz/questions/can-you-give-an-example-of-a-curry-function-and-why-this-syntax-offers-an-advantage/metadata.json
+++ b/packages/quiz/questions/can-you-give-an-example-of-a-curry-function-and-why-this-syntax-offers-an-advantage/metadata.json
@@ -5,9 +5,7 @@
   "premium": false,
   "duration": 5,
   "published": true,
-  "topics": [
-    "javascript"
-  ],
+  "topics": ["javascript"],
   "importance": "low",
   "difficulty": "medium"
-}
\ No newline at end of file
+}
diff --git a/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/metadata.json b/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/metadata.json
index 5bcfd2a05..1f573faf9 100644
--- a/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/metadata.json
+++ b/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/metadata.json
@@ -5,9 +5,7 @@
   "premium": false,
   "duration": 5,
   "published": true,
-  "topics": [
-    "css"
-  ],
+  "topics": ["css"],
   "importance": "low",
   "difficulty": "medium"
-}
\ No newline at end of file
+}
diff --git a/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/pt-BR.mdx b/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/pt-BR.mdx
index 5d43d5cf9..2f9139b99 100644
--- a/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/pt-BR.mdx
+++ b/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/pt-BR.mdx
@@ -4,10 +4,10 @@ title: Você pode dar um exemplo de uma propriedade `@media` diferente de `tela`
 
 Existem quatro tipos de propriedades `@media` (incluindo `screen`):
 
--   `all`: para todos os dispositivos de tipo de mídia
--   `print`: para impressoras
--   `speech`: para leitores de tela que "lêem" a página em voz alta
--   `screen`: para telas de computadores, tablets, smartphones, etc.
+- `all`: para todos os dispositivos de tipo de mídia
+- `print`: para impressoras
+- `speech`: para leitores de tela que "lêem" a página em voz alta
+- `screen`: para telas de computadores, tablets, smartphones, etc.
 
 Aqui está um exemplo de uso do tipo de mídia `print`:
 
diff --git a/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/zh-CN.mdx b/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/zh-CN.mdx
index 6177273c7..e38c9e38b 100644
--- a/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/zh-CN.mdx
+++ b/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/zh-CN.mdx
@@ -4,10 +4,10 @@ title: 你能举例说明除 "screen "以外的媒体查询属性吗？
 
 有四种类型的媒体查询属性(包括`screen`)：
 
--   `all`：适用于所有媒体类型设备
--   `print`: 适用于打印机
--   `speech`：用于屏幕阅读器，大声 "读 "出页面。
--   `screen`：用于电脑屏幕、平板电脑、智能手机等。
+- `all`：适用于所有媒体类型设备
+- `print`: 适用于打印机
+- `speech`：用于屏幕阅读器，大声 "读 "出页面。
+- `screen`：用于电脑屏幕、平板电脑、智能手机等。
 
 下面是 `print` 媒体类型的用法示例：
 
diff --git a/packages/quiz/questions/create-a-for-loop-that-iterates-up-to-100-while-outputting-fizz-at-multiples-of-3-buzz-at-multiples-of-5-and-fizzbuzz-at-multiples-of-3-and-5/zh-CN.mdx b/packages/quiz/questions/create-a-for-loop-that-iterates-up-to-100-while-outputting-fizz-at-multiples-of-3-buzz-at-multiples-of-5-and-fizzbuzz-at-multiples-of-3-and-5/zh-CN.mdx
index 365db1c51..eab6f04ad 100644
--- a/packages/quiz/questions/create-a-for-loop-that-iterates-up-to-100-while-outputting-fizz-at-multiples-of-3-buzz-at-multiples-of-5-and-fizzbuzz-at-multiples-of-3-and-5/zh-CN.mdx
+++ b/packages/quiz/questions/create-a-for-loop-that-iterates-up-to-100-while-outputting-fizz-at-multiples-of-3-buzz-at-multiples-of-5-and-fizzbuzz-at-multiples-of-3-and-5/zh-CN.mdx
@@ -12,4 +12,4 @@ for (let i = 1; i <= 100; i++) {
 }
 ```
 
-不过，上述内容不宜在面试时写。 只要坚持长期而明确的做法。 关于更多古怪的FizzBuzz版本，请查看下面的参考链接。
+不过，上述内容不宜在面试时写。 只要坚持长期而明确的做法。 关于更多古怪的 FizzBuzz 版本，请查看下面的参考链接。
diff --git a/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/metadata.json b/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/metadata.json
index 476244a14..727b4d1bf 100644
--- a/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/metadata.json
+++ b/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/metadata.json
@@ -5,11 +5,8 @@
   "premium": false,
   "duration": 5,
   "published": true,
-  "topics": [
-    "html",
-    "performance"
-  ],
+  "topics": ["html", "performance"],
   "importance": "high",
   "difficulty": "medium",
   "featured": true
-}
\ No newline at end of file
+}
diff --git a/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/zh-CN.mdx b/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/zh-CN.mdx
index 769854d30..78e2cfedb 100644
--- a/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/zh-CN.mdx
+++ b/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/zh-CN.mdx
@@ -3,22 +3,22 @@ title: 为什么一般来说，将CSS`<link>`放在`<head></head>`之间，将JS
 subtitle: 您是否知道任何例外情况？
 ---
 
-简而言之， 这种CSS `<link>` 和 JavaScript `<script>` 的放置可以更快地呈现页面和更好的整体性能。
+简而言之， 这种 CSS `<link>` 和 JavaScript `<script>` 的放置可以更快地呈现页面和更好的整体性能。
 
 ## 将`<link>` 放置在`<head> ` 中
 
-将`<link>` 放入`<head>`是建立一个优化网站的正确规范的一部分。 当页面首次加载时，HTML和CSS同时解析； HTML 创建DOM (文档对象模型) ， CSS 创建CSSOM (CSS 对象模型)。 两者都需要在网站中创建视觉效果，以优化 "首次有意义的绘制 "时机。 将 CSS `<link>` 放入`<head>`中确保了样式表已加载并准备在浏览器开始渲染页面时使用。
+将`<link>` 放入`<head>`是建立一个优化网站的正确规范的一部分。 当页面首次加载时，HTML 和 CSS 同时解析； HTML 创建 DOM (文档对象模型) ， CSS 创建 CSSOM (CSS 对象模型)。 两者都需要在网站中创建视觉效果，以优化 "首次有意义的绘制 "时机。 将 CSS `<link>` 放入`<head>`中确保了样式表已加载并准备在浏览器开始渲染页面时使用。
 
 这种渐进式渲染是网站在其性能评分中衡量的一个指标。 将样式表放在文档的底部是禁止在许多浏览器中进行渐进式渲染的原因。 某些浏览器阻止渲染以避免在其样式改变时需要重新刷新页面元素。 然后，用户会被卡住，面对一个空白页面。 其它时候可能会有无样式内容的闪烁(FOUC)，它会显示一个没有应用样式的网页。
 
 ## 在`</body>`之前放置`<script>`。
 
-`<script>`标签在下载和执行时阻止了HTML解析，这可能会拖慢你的页面显示。 将`<script>`放在底部将允许HTML首先被解析并显示给用户。
+`<script>`标签在下载和执行时阻止了 HTML 解析，这可能会拖慢你的页面显示。 将`<script>`放在底部将允许 HTML 首先被解析并显示给用户。
 
-当你的脚本包含`document.write()`时，`<script>`在底部的定位是一个例外，但现在使用`document.write()`并不是一个好的做法。 另外，将 `<script>`放在底部意味着，在解析整个文档之前，浏览器无法开始下载脚本。 这将确保您需要操纵DOM元素的代码不会导致错误从而停止整个脚本。 如果你需要把`<script>`放在`<head>`中，请使用`defer`属性，这将达到同样的效果，即在HTML被解析后才运行脚本，但浏览器可以提前启动网络请求以下载脚本。
+当你的脚本包含`document.write()`时，`<script>`在底部的定位是一个例外，但现在使用`document.write()`并不是一个好的做法。 另外，将 `<script>`放在底部意味着，在解析整个文档之前，浏览器无法开始下载脚本。 这将确保您需要操纵 DOM 元素的代码不会导致错误从而停止整个脚本。 如果你需要把`<script>`放在`<head>`中，请使用`defer`属性，这将达到同样的效果，即在 HTML 被解析后才运行脚本，但浏览器可以提前启动网络请求以下载脚本。
 
 请记住，把脚本放在结尾的`</body>`标签之前，会造成页面在空的缓存中加载更快的错觉（因为脚本不会阻止下载文档的其他部分）。 但是，如果你想要在页面加载时运行一些代码，它只会在整个页面加载后才开始执行。 如果你将那些脚本放入`<head>`标签， 他们会在预设的缓存中开始执行, 所以页面实际上会加载更快。
 
 ## `<head>` 和 `<body>`标签现在是可选的
 
-按照HTML5的规格，某些HTML标签，如`<head>`和`<body>`都是可选的。 谷歌的样式指南甚至建议删除它们以便保存字节。 然而，仍然存在着这样一种现象： 这种做法仍然没有得到广泛采用，性能收益很可能很小，对大多数网站来说不太可能起作用。
+按照 HTML5 的规格，某些 HTML 标签，如`<head>`和`<body>`都是可选的。 谷歌的样式指南甚至建议删除它们以便保存字节。 然而，仍然存在着这样一种现象： 这种做法仍然没有得到广泛采用，性能收益很可能很小，对大多数网站来说不太可能起作用。
diff --git a/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/pt-BR.mdx b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/pt-BR.mdx
index 73af2f343..2842b010f 100644
--- a/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/pt-BR.mdx
+++ b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/pt-BR.mdx
@@ -8,10 +8,10 @@ Saber estabelecer um contexto de formatação de blocos é importante, porque se
 
 Um BFC é uma caixa HTML que atende pelo menos uma das seguintes condições:
 
--   O valor de `float` não é `none`.
--   O valor de `posição` não é `static` nem `relative`.
--   O valor de `display` é `table-cell`, `table-caption`, `inline-block`, `flex`, or `inline-flex`, `grid`, or `inline-grid`.
--   O valor de `float` não é `none`.
+- O valor de `float` não é `none`.
+- O valor de `posição` não é `static` nem `relative`.
+- O valor de `display` é `table-cell`, `table-caption`, `inline-block`, `flex`, or `inline-flex`, `grid`, or `inline-grid`.
+- O valor de `float` não é `none`.
 
 Em um BFC, a borda externa esquerda de cada caixa toca a borda esquerda do bloco contêiner (para formatação da direita para a esquerda, as bordas direitas se tocam).
 
diff --git a/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.mdx b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.mdx
index d68a29460..dead3b451 100644
--- a/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.mdx
+++ b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.mdx
@@ -6,13 +6,13 @@ title: 描述块级格式化上下文(BFC)及其工作方式。
 
 了解如何建立一个块格式化的上下文是很重要的，因为如果不这样做，容器盒子就不会[包含浮动的子元素](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height)。 这类似于外边距重叠，但更阴险，因为你会发现整个盒子以奇特的方式重叠。
 
-想要创建一个BFC，至少满足下列条件之一：
+想要创建一个 BFC，至少满足下列条件之一：
 
--   `float` 的值不是 `none` 。
--   `position` 的值既不是`static` 也不是`relative` 。
--   `display` 的值是 `table-cell`, `table-caption`, `inline-block`, `flex`, 或 `inline-flex`, `gid`, 或 `inline-grid`。
--   `overflow`的值不是\`visible'。
+- `float` 的值不是 `none` 。
+- `position` 的值既不是`static` 也不是`relative` 。
+- `display` 的值是 `table-cell`, `table-caption`, `inline-block`, `flex`, 或 `inline-flex`, `gid`, 或 `inline-grid`。
+- `overflow`的值不是\`visible'。
 
-在BFC中，每个盒子的左外边缘都会接触到包含块的左边缘（对于从右到左的格式化，右边缘会接触）。
+在 BFC 中，每个盒子的左外边缘都会接触到包含块的左边缘（对于从右到左的格式化，右边缘会接触）。
 
 BFC 中相邻区块级盒子之间的垂直外间距会被折叠。 在[外边距重叠](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_mark_mark_bolsing)上阅读更多内容。
diff --git a/packages/quiz/questions/describe-floats-and-how-they-work/pt-BR.mdx b/packages/quiz/questions/describe-floats-and-how-they-work/pt-BR.mdx
index 99f48fe41..9eb041f0f 100644
--- a/packages/quiz/questions/describe-floats-and-how-they-work/pt-BR.mdx
+++ b/packages/quiz/questions/describe-floats-and-how-they-work/pt-BR.mdx
@@ -30,4 +30,4 @@ Nos bons dias antigos, o CSS frameworks como o Bootstrap 2 usou a propriedade `f
 
 ## Referências
 
--   [Clearfix: Uma Lição em Desenvolvimento Web Evolução](https://css-tricks.com/clearfix-a-lesson-web-development-evolution/)
+- [Clearfix: Uma Lição em Desenvolvimento Web Evolução](https://css-tricks.com/clearfix-a-lesson-web-development-evolution/)
diff --git a/packages/quiz/questions/describe-floats-and-how-they-work/zh-CN.mdx b/packages/quiz/questions/describe-floats-and-how-they-work/zh-CN.mdx
index 7737022d9..f2a875b88 100644
--- a/packages/quiz/questions/describe-floats-and-how-they-work/zh-CN.mdx
+++ b/packages/quiz/questions/describe-floats-and-how-they-work/zh-CN.mdx
@@ -26,8 +26,8 @@ CSS `clear` 属性可以放置在 `left`/`right`/`both` 浮动元素之下。
 
 ## 琐事
 
-在过去的好日子里，Bootstrap 2等CSS框架使用`float`属性来实现其网格系统。 然而，随着这些日子的 CSS Flexbox 和 Grid，已不再需要使用 `float` 属性。
+在过去的好日子里，Bootstrap 2 等 CSS 框架使用`float`属性来实现其网格系统。 然而，随着这些日子的 CSS Flexbox 和 Grid，已不再需要使用 `float` 属性。
 
 ## 参考资料
 
--   [清浮动: 网页开发的演变课程](https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/)
+- [清浮动: 网页开发的演变课程](https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/)
diff --git a/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/pt-BR.mdx b/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/pt-BR.mdx
index 1a724a953..f918fb200 100644
--- a/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/pt-BR.mdx
+++ b/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/pt-BR.mdx
@@ -4,15 +4,15 @@ title: Descreva pseudo-elementos e discuta para que eles são usados.
 
 Um CSS [pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) é uma palavra-chave adicionada a um seletor que permite estilizar uma parte específica do(s) elemento(s) selecionado(s). Eles podem ser usados para decoração (`::first-line`, `::first-letter`) ou adicionando elementos à marcação (combinado com `content: ...`) sem ter que modificar a marcação (`:before`, `:after`).
 
--   `::first-line` e `::first-letter` podem ser usados para decorar o texto.
--   Usado no truque `.clearfix` conforme mostrado acima, para adicionar um elemento de espaço zero com `clear: both`.
--   As setas triangulares em tooltips utilizam `::before` e `::after`. Incentiva a separação de responsabilidades porque o triângulo é considerado parte do estilo e não realmente do DOM.
+- `::first-line` e `::first-letter` podem ser usados para decorar o texto.
+- Usado no truque `.clearfix` conforme mostrado acima, para adicionar um elemento de espaço zero com `clear: both`.
+- As setas triangulares em tooltips utilizam `::before` e `::after`. Incentiva a separação de responsabilidades porque o triângulo é considerado parte do estilo e não realmente do DOM.
 
 ## Notas
 
--   Pseudo-elementos são diferentes de [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), que são usados para estilizar um elemento baseado em seu _state_ (como `:hover`, `:focus`, etc).
--   Dois-pontos devem ser usados em vez de dois-pontos para distinguir pseudo-classes de pseudo-elementos. A maioria dos navegadores suporta ambas as sintaxes, pois essa distinção não estava clara nas especificações antigas do W3C.
+- Pseudo-elementos são diferentes de [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), que são usados para estilizar um elemento baseado em seu _state_ (como `:hover`, `:focus`, etc).
+- Dois-pontos devem ser usados em vez de dois-pontos para distinguir pseudo-classes de pseudo-elementos. A maioria dos navegadores suporta ambas as sintaxes, pois essa distinção não estava clara nas especificações antigas do W3C.
 
 ## Referências
 
--   [Pseudo-elements - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
+- [Pseudo-elements - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
diff --git a/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/zh-CN.mdx b/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/zh-CN.mdx
index a2e638307..a0450ba0a 100644
--- a/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/zh-CN.mdx
+++ b/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/zh-CN.mdx
@@ -4,15 +4,15 @@ title: 描述伪元素并讨论其用途。
 
 CSS [伪元素](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-elements) 是一个添加到选择器中的关键词，使您能够修改所选元素的特定部分的样式。 它们可以用于装饰 (`::first-line`, `::first-letter`) 或添加标签元素(结合`content: ...`) 无需修改标签(`:before`, `:after `)
 
--   `::firstline` 和 `::firstletter` 可以用于装饰文本。
--   用于 `.clearfix` 技巧，如上图所示，添加一个带有`clear: both`的零空间元素。
--   Tooltips 中的三角箭头使用 `::before` 和 `::after ` 。 鼓励关注点分离，因为三角形被视为样式的一部分，而不是真正的DOM。
+- `::firstline` 和 `::firstletter` 可以用于装饰文本。
+- 用于 `.clearfix` 技巧，如上图所示，添加一个带有`clear: both`的零空间元素。
+- Tooltips 中的三角箭头使用 `::before` 和 `::after ` 。 鼓励关注点分离，因为三角形被视为样式的一部分，而不是真正的 DOM。
 
 ## 备注
 
--   伪元素不同于 [伪类](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-classes)，后者用于根据状态(例如`:hover`, `:focus`, 等等) 修改样式。
--   应使用双冒号而不是单冒号来区分伪类和伪元素。 大多数浏览器都支持这两种语法，因为旧的 W3C 视图中没有区分这点。
+- 伪元素不同于 [伪类](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-classes)，后者用于根据状态(例如`:hover`, `:focus`, 等等) 修改样式。
+- 应使用双冒号而不是单冒号来区分伪类和伪元素。 大多数浏览器都支持这两种语法，因为旧的 W3C 视图中没有区分这点。
 
 ## 参考资料
 
--   [伪元素-CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-elements)
+- [伪元素-CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-elements)
diff --git a/packages/quiz/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx b/packages/quiz/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx
index 949ae6efb..f025b1eec 100644
--- a/packages/quiz/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx
+++ b/packages/quiz/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/en-US.mdx
@@ -2,9 +2,9 @@
 title: Describe the difference between a cookie, `sessionStorage` and `localStorage`.
 ---
 
-Local storage is useful for storing data that the user will need to access later, such as offline data, because it stores the data in the browser and the system. This data will persist even if the user closes and reopens the browser. 
+Local storage is useful for storing data that the user will need to access later, such as offline data, because it stores the data in the browser and the system. This data will persist even if the user closes and reopens the browser.
 
-Session storage is a great way to improve the performance of your web applications. It stores data locally on the browser but is specific to (and only accessible by) the respective site/browser tab and is only available while the user is on the site/tab. This is a more secure storage method due to the restrictive access and promotes better site performance due to reduced data transfer between server and client. 
+Session storage is a great way to improve the performance of your web applications. It stores data locally on the browser but is specific to (and only accessible by) the respective site/browser tab and is only available while the user is on the site/tab. This is a more secure storage method due to the restrictive access and promotes better site performance due to reduced data transfer between server and client.
 
 Cookies are a good choice for storing data that should not be persisted for a long time, such as session IDs. Cookies allow you to set an expiry time at which point it would be deleted. Cookies can only be smaller sized data compared to the other two storage methods.
 
diff --git a/packages/quiz/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/pt-BR.mdx b/packages/quiz/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/pt-BR.mdx
index 0c245b3c0..0444fdd7d 100644
--- a/packages/quiz/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/pt-BR.mdx
+++ b/packages/quiz/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/pt-BR.mdx
@@ -2,9 +2,9 @@
 title: Descreva a diferença entre cookie, `sessionStorage` e `localStorage`.
 ---
 
-Local storage is useful for storing data that the user will need to access later, such as offline data, because it stores the data in the browser and the system. This data will persist even if the user closes and reopens the browser and is accessible by other sites. 
+Local storage is useful for storing data that the user will need to access later, such as offline data, because it stores the data in the browser and the system. This data will persist even if the user closes and reopens the browser and is accessible by other sites.
 
-Session storage is a great way to improve the performance of your web applications. It stores data locally on the browser but is specific to (and only accessible by) the respective site/browser tab and is only available while the user is on the site/tab. This is a more secure storage method due to the restrictive access and promotes better site performance due to reduced data transfer between server and client. 
+Session storage is a great way to improve the performance of your web applications. It stores data locally on the browser but is specific to (and only accessible by) the respective site/browser tab and is only available while the user is on the site/tab. This is a more secure storage method due to the restrictive access and promotes better site performance due to reduced data transfer between server and client.
 
 Cookies are a good choice for storing data that should not be persisted for a long time, such as session IDs. Cookies allow you to set an expiry time at which point it would be deleted. Cookies can only be smaller sized data compared to the other two storage methods.
 
@@ -12,19 +12,19 @@ Cookies are a good choice for storing data that should not be persisted for a lo
 
 Cookies, `localStorage`, and `sessionStorage`, são todos:
 
--   Mecanismos de armazenamento no lado do cliente. Isso significa que os clientes podem ler e modificar os valores.
--   Armazenamento baseado em chave-valor.
--   Eles só são capazes de armazenar valores como strings. Objetos terão que ser serializados em uma string (`JSON.stringify()`) a fim de serem armazenados.
+- Mecanismos de armazenamento no lado do cliente. Isso significa que os clientes podem ler e modificar os valores.
+- Armazenamento baseado em chave-valor.
+- Eles só são capazes de armazenar valores como strings. Objetos terão que ser serializados em uma string (`JSON.stringify()`) a fim de serem armazenados.
 
 ## Diferenças
 
-| Propriedade                                       | Cookie                                                             | `localStorage`  | `sessionStorage` |
-| ------------------------------------------------- | ------------------------------------------------------------------ | --------------- | ---------------- |
-| Iniciador                                         | Cliente ou servidor. O servidor pode usar o cabeçalho `Set-Cookie` | Cliente         | Cliente          |
-| Vencimento                                        | Definir manualmente                                                | Para sempre     | Ao fechar a aba  |
-| Persistente através de sessões do navegador       | Depende se a expiração está definida                               | Sim             | Não              |
-| Enviado para o servidor com cada solicitação HTTP | Os cookies são automaticamente enviados via cabeçalho `Cookie`     | Não             | Não              |
-| Capacidade (por domínio)                          | 4kb                                                                | 5MB             | 5MB              |
-| Acesso                                            | Quqlquer Janela                                                    | Quqlquer Janela | Mesma Guia       |
+| Propriedade | Cookie | `localStorage` | `sessionStorage` |
+| --- | --- | --- | --- |
+| Iniciador | Cliente ou servidor. O servidor pode usar o cabeçalho `Set-Cookie` | Cliente | Cliente |
+| Vencimento | Definir manualmente | Para sempre | Ao fechar a aba |
+| Persistente através de sessões do navegador | Depende se a expiração está definida | Sim | Não |
+| Enviado para o servidor com cada solicitação HTTP | Os cookies são automaticamente enviados via cabeçalho `Cookie` | Não | Não |
+| Capacidade (por domínio) | 4kb | 5MB | 5MB |
+| Acesso | Quqlquer Janela | Quqlquer Janela | Mesma Guia |
 
 Também existem outros mecanismos de armazenamento do lado do cliente, como [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) que é mais poderoso do que as tecnologias acima mencionadas, mas mais complicado de usar.
diff --git a/packages/quiz/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.mdx b/packages/quiz/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.mdx
index 911d6b7a2..94b5c5a23 100644
--- a/packages/quiz/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.mdx
+++ b/packages/quiz/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.mdx
@@ -2,29 +2,29 @@
 title: 描述cookie、 `sessionStorage` 和 `localStorage` 之间的差异。
 ---
 
-LocalStorage 对于存储用户以后需要访问的数据很有用，例如离线数据，因为它把数据存储在浏览器和系统中。 即使用户关闭和重新打开浏览器，这些数据也将持续存在，并可被其他网站访问。 
+LocalStorage 对于存储用户以后需要访问的数据很有用，例如离线数据，因为它把数据存储在浏览器和系统中。 即使用户关闭和重新打开浏览器，这些数据也将持续存在，并可被其他网站访问。
 
-SessionStorage 是提高你的Web 应用程序性能的一个好方法。 它在浏览器上本地存储数据，但特定于（并且只能由）各自的网站/浏览器标签访问，并且只有当用户在网站/标签上时才能使用。 由于限制性的访问，这是一个更安全的存储方法，并且由于减少了服务器和客户端之间的数据传输，促进了更好的网站性能。 
+SessionStorage 是提高你的 Web 应用程序性能的一个好方法。 它在浏览器上本地存储数据，但特定于（并且只能由）各自的网站/浏览器标签访问，并且只有当用户在网站/标签上时才能使用。 由于限制性的访问，这是一个更安全的存储方法，并且由于减少了服务器和客户端之间的数据传输，促进了更好的网站性能。
 
-对于存储不应长期保存的数据，如会话ID，Cookies是一个不错的选择。 Cookies允许你设置一个过期时间，届时它将被删除。 与其他两种存储方法相比，Cookies只能是较小尺寸的数据。
+对于存储不应长期保存的数据，如会话 ID，Cookies 是一个不错的选择。 Cookies 允许你设置一个过期时间，届时它将被删除。 与其他两种存储方法相比，Cookies 只能是较小尺寸的数据。
 
 ## 相似性
 
 Cookies、`localStorage`和`sessionStorage`都是:
 
--   客户端的存储机制。 这意味着客户端可以阅读和修改这些值。
--   基于键值的存储。
--   他们只能存储作为字符串的值。 对象必须序列化为字符串 (`JSON.stringify()`) 才能存储。
+- 客户端的存储机制。 这意味着客户端可以阅读和修改这些值。
+- 基于键值的存储。
+- 他们只能存储作为字符串的值。 对象必须序列化为字符串 (`JSON.stringify()`) 才能存储。
 
 ## 差异
 
-| 属性              | Cookie                          | `localStorage` | `sessionStorage` |
-| --------------- | ------------------------------- | -------------- | ---------------- |
-| 发起方             | 客户端或服务器。 服务器可以使用 `Set-Cookie` 头 | 客户端            | 客户端              |
-| 有效期             | 手动设置                            | 永久             | 标签关闭时            |
-| 跨浏览器会话的持久性      | 取决于是否设置过期时间                     | 是              | 否                |
-| 每次HTTP请求都发送到服务器 | Cookie 会自动通过 `Cookie` 头发送       | 否              | 否                |
-| 容量(每个域)         | 4kb                             | 5MB            | 5MB              |
-| 访问权限            | 任何窗口                            | 任何窗口           | 部分标签页            |
+| 属性 | Cookie | `localStorage` | `sessionStorage` |
+| --- | --- | --- | --- |
+| 发起方 | 客户端或服务器。 服务器可以使用 `Set-Cookie` 头 | 客户端 | 客户端 |
+| 有效期 | 手动设置 | 永久 | 标签关闭时 |
+| 跨浏览器会话的持久性 | 取决于是否设置过期时间 | 是 | 否 |
+| 每次 HTTP 请求都发送到服务器 | Cookie 会自动通过 `Cookie` 头发送 | 否 | 否 |
+| 容量(每个域) | 4kb | 5MB | 5MB |
+| 访问权限 | 任何窗口 | 任何窗口 | 部分标签页 |
 
 还有其他客户端存储机制，如 [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/ADI/IndexedDB_API)，比上述技术更强大，但使用起来更复杂。
diff --git a/packages/quiz/questions/describe-the-difference-between-script-async-and-script-defer/pt-BR.mdx b/packages/quiz/questions/describe-the-difference-between-script-async-and-script-defer/pt-BR.mdx
index 7862cd2a3..5ed97ff98 100644
--- a/packages/quiz/questions/describe-the-difference-between-script-async-and-script-defer/pt-BR.mdx
+++ b/packages/quiz/questions/describe-the-difference-between-script-async-and-script-defer/pt-BR.mdx
@@ -20,11 +20,11 @@ Se um script depende de um DOM totalmente analisado, o atributo `defer` será ú
 
 ## Notas
 
--   Geralmente, o atributo `async` deve ser usado para scripts que não são críticos para a renderização inicial da página e não dependem um do outro. enquanto o atributo `defer` deve ser usado para scripts que dependem de / é dependente de outro script.
--   Os atributos `async` e `defer` são ignorados para scripts que não têm o atributo `src`.
--   `<script>`s com `defer` ou `async` que contêm `document.write()` serão ignorados com uma mensagem como "Uma chamada para o documento.write() de um script externo carregado de forma assíncrona foi ignorada".
+- Geralmente, o atributo `async` deve ser usado para scripts que não são críticos para a renderização inicial da página e não dependem um do outro. enquanto o atributo `defer` deve ser usado para scripts que dependem de / é dependente de outro script.
+- Os atributos `async` e `defer` são ignorados para scripts que não têm o atributo `src`.
+- `<script>`s com `defer` ou `async` que contêm `document.write()` serão ignorados com uma mensagem como "Uma chamada para o documento.write() de um script externo carregado de forma assíncrona foi ignorada".
 
 ## Referências
 
--   [`<script>`: O elemento Script | 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)
+- [`<script>`: O elemento Script | 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/packages/quiz/questions/describe-the-difference-between-script-async-and-script-defer/zh-CN.mdx b/packages/quiz/questions/describe-the-difference-between-script-async-and-script-defer/zh-CN.mdx
index e40adbdc9..244e32969 100644
--- a/packages/quiz/questions/describe-the-difference-between-script-async-and-script-defer/zh-CN.mdx
+++ b/packages/quiz/questions/describe-the-difference-between-script-async-and-script-defer/zh-CN.mdx
@@ -6,25 +6,25 @@ title: 描述`<script>`、`<script async>`和`<script defer> `之间的差异
 
 ## 普通`<script>`
 
-对于普通的 `<script>` 标签，在遇到它们时没有任何`async` 或 `defer`。 HTML解析被阻止，脚本会被下载并立即执行。 脚本执行后HTML解析恢复。
+对于普通的 `<script>` 标签，在遇到它们时没有任何`async` 或 `defer`。 HTML 解析被阻止，脚本会被下载并立即执行。 脚本执行后 HTML 解析恢复。
 
 ## `<script async>`
 
-在`<script async>`中，脚本将与HTML解析并行获取，并在其可用时立即执行（可能在HTML解析完成之前），而且不一定按照HTML文档中的顺序执行。 当脚本独立于页面上的任何其他脚本时使用 `async` ，比如分析。
+在`<script async>`中，脚本将与 HTML 解析并行获取，并在其可用时立即执行（可能在 HTML 解析完成之前），而且不一定按照 HTML 文档中的顺序执行。 当脚本独立于页面上的任何其他脚本时使用 `async` ，比如分析。
 
 ## `<script defer>`
 
-在`<script defer>`, 脚本将在文档已完全解析并执行时并行获取到 HTML 解析和执行， 但在 `DOMContentLoaded` 事件之前。 如果其中有多个，每个defer脚本都是按照它们在 HTML 文档中出现的顺序执行的。
+在`<script defer>`, 脚本将在文档已完全解析并执行时并行获取到 HTML 解析和执行， 但在 `DOMContentLoaded` 事件之前。 如果其中有多个，每个 defer 脚本都是按照它们在 HTML 文档中出现的顺序执行的。
 
-如果脚本依赖于完全解析的DOM，则`defer` 属性将有助于确保在执行前完全解析HTML。
+如果脚本依赖于完全解析的 DOM，则`defer` 属性将有助于确保在执行前完全解析 HTML。
 
 ## 备注
 
--   一般说来， `async` 属性应该用于对页面初始化不重要且不依赖于对方的脚本。 `defer` 属性应该用于依赖于/被依赖于其他脚本的脚本。
--   没有`src`属性的脚本， `async` 和 `deleger` 属性会被忽略。
--   包含`defer'或`async'的`<script>`将被忽略，并显示 "来自异步加载的外部脚本对document.write()的调用被忽略 "的信息。
+- 一般说来， `async` 属性应该用于对页面初始化不重要且不依赖于对方的脚本。 `defer` 属性应该用于依赖于/被依赖于其他脚本的脚本。
+- 没有`src`属性的脚本， `async` 和 `deleger` 属性会被忽略。
+- 包含`defer'或`async'的`<script>`将被忽略，并显示 "来自异步加载的外部脚本对 document.write()的调用被忽略 "的信息。
 
 ## 参考资料
 
--   [`<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>`: 脚本元素 | 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)
diff --git a/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/pt-BR.mdx b/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/pt-BR.mdx
index dfb79a6f8..f7263c18c 100644
--- a/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/pt-BR.mdx
+++ b/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/pt-BR.mdx
@@ -4,10 +4,10 @@ title: Descreva o que você gosta e não gosta sobre os pré-processadores CSS q
 
 ## Gostei
 
--   A maioria das vantagens mencionadas em ["Quais são as vantagens/desvantagens de usar pré-processadores CSS?"](/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors).
--   Less é escrito em JavaScript, o que o torna compatível com o Node.
+- A maioria das vantagens mencionadas em ["Quais são as vantagens/desvantagens de usar pré-processadores CSS?"](/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors).
+- Less é escrito em JavaScript, o que o torna compatível com o Node.
 
 ## Não gostei
 
--   Sass depende de `node-sass`, que é um vínculo para o LibSass escrito em C++. A biblioteca tem que ser recalculada com frequência quando estiver mudando entre as versões do Node.js.
--   No Less, os nomes de variáveis são prefixados com `@`, o que pode ser confundido com palavras-chave nativas do CSS, como a regra `@media`, `@import` e `@font-face`.
+- Sass depende de `node-sass`, que é um vínculo para o LibSass escrito em C++. A biblioteca tem que ser recalculada com frequência quando estiver mudando entre as versões do Node.js.
+- No Less, os nomes de variáveis são prefixados com `@`, o que pode ser confundido com palavras-chave nativas do CSS, como a regra `@media`, `@import` e `@font-face`.
diff --git a/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/zh-CN.mdx b/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/zh-CN.mdx
index 872ea6c27..b8b2e862d 100644
--- a/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/zh-CN.mdx
+++ b/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/zh-CN.mdx
@@ -4,10 +4,10 @@ title: 描述您喜欢和不喜欢使用的 CSS 预处理器。
 
 ## 喜欢
 
--   主要是[“使用CSS preprocessors的优点/缺点?”]\(/questions/quiz/what-are-the-favourges-adversus of using-css-preprocesss) 中提到的优势。
--   Less 是用 JavaScript 写的，它在 Nodejs 中很好用。
+- 主要是[“使用 CSS preprocessors 的优点/缺点?”]\(/questions/quiz/what-are-the-favourges-adversus of using-css-preprocesss) 中提到的优势。
+- Less 是用 JavaScript 写的，它在 Nodejs 中很好用。
 
 ## 不喜欢
 
--   Sass 依赖 `node-sass`，它是一个 C++ 写的 LibSass的绑定。 当在 Node.js 版本间切换时，必须经常重新编译库。
--   在Less中，变量名前缀是`@`, 它可能与原生的 CSS 关键字混淆, 例如`@media`, `@import` 和 `@font-face` 规则。
+- Sass 依赖 `node-sass`，它是一个 C++ 写的 LibSass 的绑定。 当在 Node.js 版本间切换时，必须经常重新编译库。
+- 在 Less 中，变量名前缀是`@`, 它可能与原生的 CSS 关键字混淆, 例如`@media`, `@import` 和 `@font-face` 规则。
diff --git a/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/zh-CN.mdx b/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/zh-CN.mdx
index 1d8e73ae6..1283df6c8 100644
--- a/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/zh-CN.mdx
+++ b/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/zh-CN.mdx
@@ -2,12 +2,12 @@
 title: 描述 `z-index` 和堆叠上下文是如何形成的。
 ---
 
-CSS中的`z-index`属性可以控制重叠元素的垂直堆叠顺序。 `z-index`只影响定位元素(`position`值不是`static`的元素) 及其后代或 flex item。
+CSS 中的`z-index`属性可以控制重叠元素的垂直堆叠顺序。 `z-index`只影响定位元素(`position`值不是`static`的元素) 及其后代或 flex item。
 
-在没有任何`z-index`值的情况下，元素按照它们在DOM中出现的顺序堆叠（同一层次中最低的一个出现在上面）。 具有非`static`定位(及其子位置) 的元素总是会出现在默认`static`位置的元素之上，不论HTML层次结构如何。
+在没有任何`z-index`值的情况下，元素按照它们在 DOM 中出现的顺序堆叠（同一层次中最低的一个出现在上面）。 具有非`static`定位(及其子位置) 的元素总是会出现在默认`static`位置的元素之上，不论 HTML 层次结构如何。
 
-堆叠上下文是一个包含一组图层的元素。 在一个局部堆叠环境中，其子元素的`z-index`值是相对于该元素而不是根document设置的。 该上下文之外的层--即局部堆叠上下文的同级元素--不能位于它的层之间。 如果一个元素B位于元素A的上面，元素A的一个子元素C永远不会高于元素B，即使元素C的`z-index`比元素B高。
+堆叠上下文是一个包含一组图层的元素。 在一个局部堆叠环境中，其子元素的`z-index`值是相对于该元素而不是根 document 设置的。 该上下文之外的层--即局部堆叠上下文的同级元素--不能位于它的层之间。 如果一个元素 B 位于元素 A 的上面，元素 A 的一个子元素 C 永远不会高于元素 B，即使元素 C 的`z-index`比元素 B 高。
 
-每个堆叠上下文都是自成一体的--在元素的内容被堆叠后，整个元素被认为是按照父堆叠上下文的堆叠顺序。 少数CSS 属性会触发一个新的堆叠上下文，如小于1的 `opacity` 、`filter` 不是 `none` 和 `transform` 不是 `none` 。
+每个堆叠上下文都是自成一体的--在元素的内容被堆叠后，整个元素被认为是按照父堆叠上下文的堆叠顺序。 少数 CSS 属性会触发一个新的堆叠上下文，如小于 1 的 `opacity` 、`filter` 不是 `none` 和 `transform` 不是 `none` 。
 
 _**注意**：究竟是什么让一个元素有资格创建一个堆叠上下文，在这一长串[规则](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context)中列出。_
diff --git a/packages/quiz/questions/designing-or-developing-for-multilingual-sites/pt-BR.mdx b/packages/quiz/questions/designing-or-developing-for-multilingual-sites/pt-BR.mdx
index 2cf281206..f37a38c99 100644
--- a/packages/quiz/questions/designing-or-developing-for-multilingual-sites/pt-BR.mdx
+++ b/packages/quiz/questions/designing-or-developing-for-multilingual-sites/pt-BR.mdx
@@ -6,9 +6,9 @@ Projetar e desenvolver para sites multilíngues faz parte da internacionalizaç
 
 ## Otimização de Busca (Seo)
 
--   Use o atributo `lang` na tag `<html>`.
--   Incluir a localidade na URL (por exemplo, en_US, zh_CN, etc).
--   Páginas web devem usar `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` para dizer aos motores de pesquisa que há outra página no `href` especificado com o mesmo conteúdo, mas para outro idioma/locale.
+- Use o atributo `lang` na tag `<html>`.
+- Incluir a localidade na URL (por exemplo, en_US, zh_CN, etc).
+- Páginas web devem usar `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` para dizer aos motores de pesquisa que há outra página no `href` especificado com o mesmo conteúdo, mas para outro idioma/locale.
 
 ## Entendendo a diferença entre localidade e idioma
 
@@ -18,8 +18,8 @@ As configurações regionais controlam como números, datas e horários são exi
 
 Certos idiomas, especialmente os mais falados, têm diferentes "sabores" em diferentes países (regras de gramática, ortografia, caracteres). É importante diferenciar idiomas para o país de destino e não assumir/forçar a versão de um país de um idioma para todos os países que falam o idioma. Exemplos:
 
--   `en`: `en-US` (Inglês Americano), `en-GB` (Inglês Britânico)
--   `zh`: `zh-CN` (Chinês (Simplificado)), `zh-TW` (Chinês (Tradicional))
+- `en`: `en-US` (Inglês Americano), `en-GB` (Inglês Britânico)
+- `zh`: `zh-CN` (Chinês (Simplificado)), `zh-TW` (Chinês (Tradicional))
 
 ## Prever localidade, mas sem restrições
 
@@ -51,4 +51,4 @@ As cores são percebidas de maneira diferente em diferentes idiomas e culturas.
 
 ## Referências
 
--   [As diferenças entre localidades e idiomas](https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages)
+- [As diferenças entre localidades e idiomas](https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages)
diff --git a/packages/quiz/questions/designing-or-developing-for-multilingual-sites/zh-CN.mdx b/packages/quiz/questions/designing-or-developing-for-multilingual-sites/zh-CN.mdx
index 47fd709d5..d2c4eda18 100644
--- a/packages/quiz/questions/designing-or-developing-for-multilingual-sites/zh-CN.mdx
+++ b/packages/quiz/questions/designing-or-developing-for-multilingual-sites/zh-CN.mdx
@@ -6,9 +6,9 @@ title: 在设计或开发多语言站点时你必须注意什么事？
 
 ## 搜索引擎优化
 
--   使用 `<html>` 标签上的 `lang` 属性。
--   在 URL 中包含区域设置(例如 en_US, zh_CN等)。
--   网页应该使用 `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` 来告诉搜索引擎，在指定的 `href` 中有另一个页面具有相同的内容，但是对于另一种语言/本地化。
+- 使用 `<html>` 标签上的 `lang` 属性。
+- 在 URL 中包含区域设置(例如 en_US, zh_CN 等)。
+- 网页应该使用 `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` 来告诉搜索引擎，在指定的 `href` 中有另一个页面具有相同的内容，但是对于另一种语言/本地化。
 
 ## 了解地域与语言之间的区别
 
@@ -18,12 +18,12 @@ title: 在设计或开发多语言站点时你必须注意什么事？
 
 某些语言，尤其是广为流传的语言在不同国家有不同的“喜好”（语法规则、拼写、字符）。 重要的是要区分目标国家的语言，而不要假定/强制一个国家的语言版本适用于所有讲该语言的国家。 示例：
 
--   `en`: `en-USA` (美国英文), `en-GB` (英国英文)
--   `zh`: `zh-CN`(简体中文), `zh-TW`(繁体中文)
+- `en`: `en-USA` (美国英文), `en-GB` (英国英文)
+- `zh`: `zh-CN`(简体中文), `zh-TW`(繁体中文)
 
 ## 预测地域，但不限制
 
-服务器可以通过HTTP头部`Accept-Language`和IP组合来决定访客的地域/语言。 通过这些，可以为访客自动选择最佳地域设置。 然而，预测并不是万无一失的(特别是如果访客使用VPN)，仍然应当允许访客不受干扰地改变自己的国家/语言。
+服务器可以通过 HTTP 头部`Accept-Language`和 IP 组合来决定访客的地域/语言。 通过这些，可以为访客自动选择最佳地域设置。 然而，预测并不是万无一失的(特别是如果访客使用 VPN)，仍然应当允许访客不受干扰地改变自己的国家/语言。
 
 ## 考虑不同语言文本长度的差异
 
@@ -43,7 +43,7 @@ title: 在设计或开发多语言站点时你必须注意什么事？
 
 ## 不在图片中放置文本
 
-将文本放在位图中（如png、gif、jpg等）并不是一种可扩展的方法。 在图片中放置文字仍然是一种常用的方式，可以在任何计算机上显示优雅、非系统字体。 不过，为了支持图片文本翻译成其他语言，需要为每种语言创建单独的图片，这不是设计人员的灵活工作流程。
+将文本放在位图中（如 png、gif、jpg 等）并不是一种可扩展的方法。 在图片中放置文字仍然是一种常用的方式，可以在任何计算机上显示优雅、非系统字体。 不过，为了支持图片文本翻译成其他语言，需要为每种语言创建单独的图片，这不是设计人员的灵活工作流程。
 
 ## 要注意色彩的感知方式
 
@@ -51,4 +51,4 @@ title: 在设计或开发多语言站点时你必须注意什么事？
 
 ## 参考资料
 
--   [地域和语言之间的区别]\(https://devblogs.microsoft.com/setup/the-diffes-between en-locales-and-langues)
+- [地域和语言之间的区别]\(https://devblogs.microsoft.com/setup/the-diffes-between en-locales-and-langues)
diff --git a/packages/quiz/questions/difference-between-function-person-var-person-person-and-var-person-new-person/pt-BR.mdx b/packages/quiz/questions/difference-between-function-person-var-person-person-and-var-person-new-person/pt-BR.mdx
index fe234349c..199b412ca 100644
--- a/packages/quiz/questions/difference-between-function-person-var-person-person-and-var-person-new-person/pt-BR.mdx
+++ b/packages/quiz/questions/difference-between-function-person-var-person-person-and-var-person-new-person/pt-BR.mdx
@@ -1,5 +1,5 @@
 ---
-title: "Diferença entre: `function Person(){}`, `var person = Person()`, e `var person = new Person()`?"
+title: 'Diferença entre: `function Person(){}`, `var person = Person()`, e `var person = new Person()`?'
 ---
 
 Esta pergunta é muito vaga. Nossa melhor suposição sobre a intenção dessa pergunta é que ela está perguntando sobre construtores em JavaScript. Tecnicamente falando, `function Person(){}` é apenas uma declaração de função normal. A convenção é usar PascalCase para funções que se destinam a ser usadas como construtores.
diff --git a/packages/quiz/questions/difference-between-function-person-var-person-person-and-var-person-new-person/zh-CN.mdx b/packages/quiz/questions/difference-between-function-person-var-person-person-and-var-person-new-person/zh-CN.mdx
index be40d491c..567fcc3b8 100644
--- a/packages/quiz/questions/difference-between-function-person-var-person-person-and-var-person-new-person/zh-CN.mdx
+++ b/packages/quiz/questions/difference-between-function-person-var-person-person-and-var-person-new-person/zh-CN.mdx
@@ -1,8 +1,8 @@
 ---
-title: "比较差异: `function Person(){}`, `var person = Person()`, 和 `var person = new Person()`?"
+title: '比较差异: `function Person(){}`, `var person = Person()`, 和 `var person = new Person()`?'
 ---
 
-这个问题相当含糊。 我们对其意图的最好猜测是，它在询问JavaScript中的构造函数。 从技术上讲，`function Person(){}` 只是一个正常函数声明。 惯例是对打算作为构造函数使用的函数使用PascalCase。
+这个问题相当含糊。 我们对其意图的最好猜测是，它在询问 JavaScript 中的构造函数。 从技术上讲，`function Person(){}` 只是一个正常函数声明。 惯例是对打算作为构造函数使用的函数使用 PascalCase。
 
 `var persons = Person()` 将`Person` 作为函数，而不是作为构造函数。 如果要将函数用作构造函数，这样的动作是常见的错误。 构造函数通常不会返回任何东西。 因此，调用构造函数像一个正常函数会返回 `undefined` ，它会被分配给指定为实例的变量。
 
diff --git a/packages/quiz/questions/es6-template-literals-offer-a-lot-of-flexibility-in-generating-strings-can-you-give-an-example/en-US.mdx b/packages/quiz/questions/es6-template-literals-offer-a-lot-of-flexibility-in-generating-strings-can-you-give-an-example/en-US.mdx
index b3a811d67..a6f4a1f98 100644
--- a/packages/quiz/questions/es6-template-literals-offer-a-lot-of-flexibility-in-generating-strings-can-you-give-an-example/en-US.mdx
+++ b/packages/quiz/questions/es6-template-literals-offer-a-lot-of-flexibility-in-generating-strings-can-you-give-an-example/en-US.mdx
@@ -5,7 +5,7 @@ title: ES2015 Template Literals offer a lot of flexibility in generating strings
 Template literals help make it simple to do string interpolation, or to include variables in a string. Before ES2015, it was common to do something like this:
 
 ```js
-var person = {name: 'Tyler', age: 28};
+var person = { name: 'Tyler', age: 28 };
 console.log(
   'Hi, my name is ' + person.name + ' and I am ' + person.age + ' years old!',
 );
@@ -15,7 +15,7 @@ console.log(
 With template literals, you can now create that same output like this instead:
 
 ```js
-const person = {name: 'Tyler', age: 28};
+const person = { name: 'Tyler', age: 28 };
 console.log(`Hi, my name is ${person.name} and I am ${person.age} years old!`);
 // 'Hi, my name is Tyler and I am 28 years old!'
 ```
@@ -50,7 +50,7 @@ This is line two.`);
 Another use case of template literals would be to use as a substitute for templating libraries for simple variable interpolations:
 
 ```js
-const person = {name: 'Tyler', age: 28};
+const person = { name: 'Tyler', age: 28 };
 document.body.innerHTML = `
   <div>
     <p>Name: ${person.name}</p>
diff --git a/packages/quiz/questions/es6-template-literals-offer-a-lot-of-flexibility-in-generating-strings-can-you-give-an-example/pt-BR.mdx b/packages/quiz/questions/es6-template-literals-offer-a-lot-of-flexibility-in-generating-strings-can-you-give-an-example/pt-BR.mdx
index dd8d99d95..e53b9d27e 100644
--- a/packages/quiz/questions/es6-template-literals-offer-a-lot-of-flexibility-in-generating-strings-can-you-give-an-example/pt-BR.mdx
+++ b/packages/quiz/questions/es6-template-literals-offer-a-lot-of-flexibility-in-generating-strings-can-you-give-an-example/pt-BR.mdx
@@ -5,9 +5,13 @@ title: Template Literals do ES2015 oferecem muita flexibilidade na geração de
 Os literais de template ajudam a simplificar a interpolação de strings ou a incluir variáveis em uma string. Antes do ES2015, era comum fazer algo assim:
 
 ```js
-var person = {name: 'Tyler', age: 28};
+var person = { name: 'Tyler', age: 28 };
 console.log(
-  'Oi, meu nome é ' + person.name + ' e eu sou ' + pessoa.age + ' anos de idade!',
+  'Oi, meu nome é ' +
+    person.name +
+    ' e eu sou ' +
+    pessoa.age +
+    ' anos de idade!',
 );
 // 'Oi, meu nome é Tyler e eu tenho 28 anos!'
 ```
@@ -15,7 +19,7 @@ console.log(
 Com os template literals, agora você pode criar a mesma saída assim:
 
 ```js
-const person = {name: 'Tyler', age: 28};
+const person = { name: 'Tyler', age: 28 };
 console.log(`Oi, meu nome é ${person.name} e tenho ${person.age} anos!`);
 // 'Oi, meu nome é Tyler e eu tenho 28 anos!'
 ```
@@ -50,7 +54,7 @@ Esta é a linha dois.`);
 Um outro caso de uso de template literals seria usar como substituto para as bibliotecas de templates para interpolações variáveis simples:
 
 ```js
-const person = {name: 'Tyler', age: 28};
+const person = { name: 'Tyler', age: 28 };
 document.body.innerHTML = `
   <div>
     <p>Nome: ${person.name}</p>
diff --git a/packages/quiz/questions/es6-template-literals-offer-a-lot-of-flexibility-in-generating-strings-can-you-give-an-example/zh-CN.mdx b/packages/quiz/questions/es6-template-literals-offer-a-lot-of-flexibility-in-generating-strings-can-you-give-an-example/zh-CN.mdx
index 8dc4ec7b0..eed65769e 100644
--- a/packages/quiz/questions/es6-template-literals-offer-a-lot-of-flexibility-in-generating-strings-can-you-give-an-example/zh-CN.mdx
+++ b/packages/quiz/questions/es6-template-literals-offer-a-lot-of-flexibility-in-generating-strings-can-you-give-an-example/zh-CN.mdx
@@ -2,10 +2,10 @@
 title: ES2015 模板字面量在生成字符串时具有很大的灵活性，您能给出一个例子吗？
 ---
 
-模板字面量有助于简单地进行字符串插值，或在字符串中包含变量。 在 ES2015之前，常见的做法是做这样的：
+模板字面量有助于简单地进行字符串插值，或在字符串中包含变量。 在 ES2015 之前，常见的做法是做这样的：
 
 ```js
-var person = {name: 'Tyler', age: 28};
+var person = { name: 'Tyler', age: 28 };
 console.log(
   'Hi, my name is ' + person.name + ' and I am ' + person.age + ' years old!',
 );
@@ -15,14 +15,14 @@ console.log(
 使用模板字面量，您现在可以创建相同的结果像这样：
 
 ```js
-const person = {name: 'Tyler', age: 28};
+const person = { name: 'Tyler', age: 28 };
 console.log(`Hi, my name is ${person.name} and I am ${person.age} years old!`);
 // 'Hi, my name is Tyler and I am 28 years old!'
 ```
 
 请注意您使用反引号而不是引号， 指示您使用的是一个字段，您可以在 `${}` 占位符中插入表达式。
 
-第二个有用的案例是创建多行字符串。 在 ES2015之前，您可以创建一个多行字符串像这样：
+第二个有用的案例是创建多行字符串。 在 ES2015 之前，您可以创建一个多行字符串像这样：
 
 ```js
 console.log('This is line one.\nThis is line two.');
@@ -50,7 +50,7 @@ This is line two.`);
 模板字面量的另一个使用情况是作为简单变量插值的模板库的替代物：
 
 ```js
-const person = {name: 'Tyler', age: 28};
+const person = { name: 'Tyler', age: 28 };
 document.body.innerHTML = `
   <div>
     <p>Name: ${person.name}</p>
@@ -59,4 +59,4 @@ document.body.innerHTML = `
 `;
 ```
 
-**注意你的代码可能会因为使用`.innerHTML`而受到XSS的影响。 如果数据来自一个用户，请在显示数据之前将其净化！**
+**注意你的代码可能会因为使用`.innerHTML`而受到 XSS 的影响。 如果数据来自一个用户，请在显示数据之前将其净化！**
diff --git a/packages/quiz/questions/explain-ajax-in-as-much-detail-as-possible/zh-CN.mdx b/packages/quiz/questions/explain-ajax-in-as-much-detail-as-possible/zh-CN.mdx
index 38e43f0e0..7f82bf4f6 100644
--- a/packages/quiz/questions/explain-ajax-in-as-much-detail-as-possible/zh-CN.mdx
+++ b/packages/quiz/questions/explain-ajax-in-as-much-detail-as-possible/zh-CN.mdx
@@ -2,6 +2,6 @@
 title: 尽可能详细地解释Ajax
 ---
 
-Ajax (异步 JavaScript 和 XML) 是一套网络开发技术，在客户端使用许多网络技术创建异步Web 应用程序。 使用 Ajax， Web 应用程序可以将数据异步地发送到服务器（后端）并从服务器上检索，而不干扰现有页面的显示和行为。 通过将数据交换层与表现层解耦，Ajax允许网页，以及扩展的Web 应用程序，动态地改变内容，而不需要重新加载整个页面。 实际上，现代实现通常使用JSON而不是XML，因为JSON是JavaScript的原生优势。
+Ajax (异步 JavaScript 和 XML) 是一套网络开发技术，在客户端使用许多网络技术创建异步 Web 应用程序。 使用 Ajax， Web 应用程序可以将数据异步地发送到服务器（后端）并从服务器上检索，而不干扰现有页面的显示和行为。 通过将数据交换层与表现层解耦，Ajax 允许网页，以及扩展的 Web 应用程序，动态地改变内容，而不需要重新加载整个页面。 实际上，现代实现通常使用 JSON 而不是 XML，因为 JSON 是 JavaScript 的原生优势。
 
-`XMLHttpRequest` API或如今的 `fetch` API经常用于异步通信。
+`XMLHttpRequest` API 或如今的 `fetch` API 经常用于异步通信。
diff --git a/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/pt-BR.mdx b/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/pt-BR.mdx
index 42e997939..306456084 100644
--- a/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/pt-BR.mdx
+++ b/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/pt-BR.mdx
@@ -8,8 +8,8 @@ Essa técnica costumava ser comumente usada para ícones (por exemplo, o Gmail u
 
 ## Vantagens
 
--   Reduz o número de solicitações HTTP para várias imagens (apenas um único pedido é necessário por spritesheet). Mas com HTTP2, carregar várias imagens já não é muito problema.
--   Download avançado de ativos que não serão baixados até ser necessário, como imagens que aparecem apenas nos pseudo-estados `:hover`. O piscar não seria visto.
+- Reduz o número de solicitações HTTP para várias imagens (apenas um único pedido é necessário por spritesheet). Mas com HTTP2, carregar várias imagens já não é muito problema.
+- Download avançado de ativos que não serão baixados até ser necessário, como imagens que aparecem apenas nos pseudo-estados `:hover`. O piscar não seria visto.
 
 ## Como implementar
 
@@ -45,4 +45,4 @@ E pode ser usado no HTML como tal:
 
 ## Referências
 
--   [Implementando sprites de imagem em CSS - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
+- [Implementando sprites de imagem em CSS - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
diff --git a/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/zh-CN.mdx b/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/zh-CN.mdx
index ad66c2d4d..957bbcc6f 100644
--- a/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/zh-CN.mdx
+++ b/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/zh-CN.mdx
@@ -4,12 +4,12 @@ title: 解释CSS 图片精灵（雪碧图），以及您如何在页面或网站
 
 CSS 图片精灵将多个图片合并为一个更大的图片文件，并使用 CSS `background-image`, `background-position` 和 `background-size` 来选择更大图片的特定部分作为所需图片。
 
-它曾经是用于图标的一种常用技术(例如，Gmail使用图片精灵作为其所有图片)。
+它曾经是用于图标的一种常用技术(例如，Gmail 使用图片精灵作为其所有图片)。
 
 ## 优点
 
--   减少多个图片的 HTTP 请求数量 (每张spritesheet 只需要一个请求)。 但是使用 HTTP2 加载多个图片已不再是一个问题。
--   预先下载在需要之前不会下载的资产，如只会出现在 `:hover` 伪状态上的图片。 闪烁不会被看到。
+- 减少多个图片的 HTTP 请求数量 (每张 spritesheet 只需要一个请求)。 但是使用 HTTP2 加载多个图片已不再是一个问题。
+- 预先下载在需要之前不会下载的资产，如只会出现在 `:hover` 伪状态上的图片。 闪烁不会被看到。
 
 ## 实现方式
 
@@ -45,4 +45,4 @@ CSS 图片精灵将多个图片合并为一个更大的图片文件，并使用
 
 ## 参考资料
 
--   [在 CSS 中实现图片精灵 - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
+- [在 CSS 中实现图片精灵 - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
diff --git a/packages/quiz/questions/explain-function-prototype-bind/en-US.mdx b/packages/quiz/questions/explain-function-prototype-bind/en-US.mdx
index d0ad17db5..ffa41d94b 100644
--- a/packages/quiz/questions/explain-function-prototype-bind/en-US.mdx
+++ b/packages/quiz/questions/explain-function-prototype-bind/en-US.mdx
@@ -24,7 +24,7 @@ console.log(unboundGetAge()); // undefined
 const boundGetAge = john.getAge.bind(john);
 console.log(boundGetAge()); // 42
 
-const mary = {age: 21};
+const mary = { age: 21 };
 const boundGetAgeMary = john.getAge.bind(mary);
 console.log(boundGetAgeMary()); // 21
 ```
diff --git a/packages/quiz/questions/explain-function-prototype-bind/pt-BR.mdx b/packages/quiz/questions/explain-function-prototype-bind/pt-BR.mdx
index 22eac7547..6c4384239 100644
--- a/packages/quiz/questions/explain-function-prototype-bind/pt-BR.mdx
+++ b/packages/quiz/questions/explain-function-prototype-bind/pt-BR.mdx
@@ -24,7 +24,7 @@ console.log(unboundGetAge()); // undefined
 const boundGetAge = john.getAge.bind(john);
 console.log(boundGetAge()); // 42
 
-const mary = {age: 21};
+const mary = { age: 21 };
 const boundGetAgeMary = john.getAge.bind(mary);
 console.log(boundGetAgeMary()); // 21
 ```
@@ -39,4 +39,4 @@ Tente [implementar seu próprio método `Function.prototype.bind()`](/questions/
 
 ## Referências
 
--   [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)
diff --git a/packages/quiz/questions/explain-function-prototype-bind/zh-CN.mdx b/packages/quiz/questions/explain-function-prototype-bind/zh-CN.mdx
index 905991515..735063c61 100644
--- a/packages/quiz/questions/explain-function-prototype-bind/zh-CN.mdx
+++ b/packages/quiz/questions/explain-function-prototype-bind/zh-CN.mdx
@@ -6,7 +6,7 @@ title: 解释 `Function.prototype.bind`
 
 _资料来源：[Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)_
 
-`bind()` 对于在要传递给其他函数的类的方法中绑定 `this` 的值非常有用。 这通常是在React类组件方法中做的，而这些方法没有使用箭头函数来定义。
+`bind()` 对于在要传递给其他函数的类的方法中绑定 `this` 的值非常有用。 这通常是在 React 类组件方法中做的，而这些方法没有使用箭头函数来定义。
 
 ```js
 const john = {
@@ -24,7 +24,7 @@ console.log(unboundGetAge()); // undefined
 const boundGetAge = john.getAge.bind(john);
 console.log(boundGetAge()); // 42
 
-const mary = {age: 21};
+const mary = { age: 21 };
 const boundGetAgeMary = john.getAge.bind(mary);
 console.log(boundGetAgeMary()); // 21
 ```
@@ -35,8 +35,8 @@ console.log(boundGetAgeMary()); // 21
 
 ## 练习
 
-在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)
diff --git a/packages/quiz/questions/explain-hoisting/zh-CN.mdx b/packages/quiz/questions/explain-hoisting/zh-CN.mdx
index cd21fae8b..60fcbf34a 100644
--- a/packages/quiz/questions/explain-hoisting/zh-CN.mdx
+++ b/packages/quiz/questions/explain-hoisting/zh-CN.mdx
@@ -4,7 +4,7 @@ title: 解释“（变量）提升”
 
 提升是用于解释你代码中变量声明行为的一个术语。 使用`var`关键字声明或初始化的变量将会将其声明“移动”到其模块/函数级别范围的顶端。 我们把它成为变量提升。 然而，只有声明被提升，赋值（如果有的话）将留在原地。
 
-请注意，声明实际上并没有被移动--JavaScript引擎在编译过程中解析了声明，并意识到了声明及其作用域。 通过视觉将声明置于其作用域之首，更容易理解这种行为。 让我们用几个例子来解释。
+请注意，声明实际上并没有被移动--JavaScript 引擎在编译过程中解析了声明，并意识到了声明及其作用域。 通过视觉将声明置于其作用域之首，更容易理解这种行为。 让我们用几个例子来解释。
 
 ```js
 console.log(foo); // undefined
diff --git a/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/zh-CN.mdx b/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/zh-CN.mdx
index 349c3c524..c0c6a1605 100644
--- a/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/zh-CN.mdx
+++ b/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/zh-CN.mdx
@@ -2,6 +2,6 @@
 title: 解释浏览器如何决定什么元素与 CSS 选择器匹配。
 ---
 
-这个问题与[编写高效的CSS](/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css) 的问题有关。 浏览器从最右边（关键选择器）到左边匹配选择器。 浏览器根据关键选择器过滤出DOM中的元素，并向上遍历其父元素以确定匹配。 选择器链长度越短，浏览器就能越快确定该元素是否与选择器匹配。
+这个问题与[编写高效的 CSS](/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css) 的问题有关。 浏览器从最右边（关键选择器）到左边匹配选择器。 浏览器根据关键选择器过滤出 DOM 中的元素，并向上遍历其父元素以确定匹配。 选择器链长度越短，浏览器就能越快确定该元素是否与选择器匹配。
 
 例如，使用选择器`p span`， 浏览器先找到所有 `<span>` 元素，然后沿其父元素遍历到根节点以找到`<p>` 元素。 对于一个特定的`<span>`，只要它找到一个`<p>`，它就知道这个`<span>`符合选择器，并可以停止遍历它的父元素。
diff --git a/packages/quiz/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.mdx b/packages/quiz/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.mdx
index 6739b7124..f7a090ef4 100644
--- a/packages/quiz/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.mdx
+++ b/packages/quiz/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/en-US.mdx
@@ -19,7 +19,7 @@ JSONP works by making a request to a cross-origin domain via a `<script>` tag an
 
 ```js
 // File loaded from https://example.com?callback=printData
-printData({name: 'John Doe'});
+printData({ name: 'John Doe' });
 ```
 
 The client has to have the `printData` function in its global scope and the function will be executed by the client when the response from the cross-origin domain is received.
diff --git a/packages/quiz/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/pt-BR.mdx b/packages/quiz/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/pt-BR.mdx
index 7e0202b9f..73906e47c 100644
--- a/packages/quiz/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/pt-BR.mdx
+++ b/packages/quiz/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/pt-BR.mdx
@@ -19,7 +19,7 @@ O JSONP funciona fazendo uma solicitação a um domínio cross-origin através d
 
 ```js
 // Arquivo carregado de https://example.com?callback=printData
-printData({name: 'John Doe'});
+printData({ name: 'John Doe' });
 ```
 
 O cliente deve ter a função `printData` no seu escopo global e a função será executada pelo cliente quando a resposta do domínio de origem cruzada for recebida.
diff --git a/packages/quiz/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/zh-CN.mdx b/packages/quiz/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/zh-CN.mdx
index 93ba329c5..ec325804b 100644
--- a/packages/quiz/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/zh-CN.mdx
+++ b/packages/quiz/questions/explain-how-jsonp-works-and-how-its-not-really-ajax/zh-CN.mdx
@@ -19,11 +19,11 @@ JSONP 工作方式是通过一个 `<script>` 标签向一个跨源域提出请
 
 ```js
 // 从 https://example.com?callback=printData 加载的文件
-printData({name: 'John Doe'});
+printData({ name: 'John Doe' });
 ```
 
 客户端必须将`printData`函数设在其全局范围内，当收到跨源域的响应时，该函数将由客户端执行。
 
-JSONP 可能是不安全的，并涉及一些安全问题。 因为JSONP 真的是JavaScript，它可以做所有其它JavaScript可以做的事情，所以你需要信任JSONP 数据的提供者。
+JSONP 可能是不安全的，并涉及一些安全问题。 因为 JSONP 真的是 JavaScript，它可以做所有其它 JavaScript 可以做的事情，所以你需要信任 JSONP 数据的提供者。
 
 这几天， [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) 是推荐的方法，JSONP 被视为一种 hack（破解）。
diff --git a/packages/quiz/questions/explain-how-this-works-in-javascript/zh-CN.mdx b/packages/quiz/questions/explain-how-this-works-in-javascript/zh-CN.mdx
index a8b657198..8d6032c55 100644
--- a/packages/quiz/questions/explain-how-this-works-in-javascript/zh-CN.mdx
+++ b/packages/quiz/questions/explain-how-this-works-in-javascript/zh-CN.mdx
@@ -2,7 +2,7 @@
 title: 解释 JavaScript `this` 如何工作
 ---
 
-`this`没有简单的解释；它是JavaScript中最令人困惑的概念之一。 一个简短的解释是，`this`的值取决于函数如何调用。 在线阅读了很多关于`this`的解释，[Arnav Aggrawal](https://med.com/@arnav_aggarwal)的解释很清楚。 适用下列规则：
+`this`没有简单的解释；它是 JavaScript 中最令人困惑的概念之一。 一个简短的解释是，`this`的值取决于函数如何调用。 在线阅读了很多关于`this`的解释，[Arnav Aggrawal](https://med.com/@arnav_aggarwal)的解释很清楚。 适用下列规则：
 
 1.  如果调用函数时使用 `new` 关键字，那么函数中的`this` 是一个全新的对象。
 2.  如果`apply`, `call`, 或 `bind` 用于调用/创建函数, 那么函数中的`this` 是作为参数传递的对象。
@@ -13,6 +13,6 @@ title: 解释 JavaScript `this` 如何工作
 
 若要深入解释，请查阅他的[Medium 上面的文章]\(https://codeburst.io/the-simple-rules-this in javascript-35d97f31bde3)。
 
-#### 你能否举例说明在ES2015年处理这一问题的方式已经发生变化？
+#### 你能否举例说明在 ES2015 年处理这一问题的方式已经发生变化？
 
 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`。 因此，在重构大型遗留应用程序时必须牢记这一点。
diff --git a/packages/quiz/questions/explain-the-difference-between-mutable-and-immutable-objects/pt-BR.mdx b/packages/quiz/questions/explain-the-difference-between-mutable-and-immutable-objects/pt-BR.mdx
index 6b3faf504..d9bd612b7 100644
--- a/packages/quiz/questions/explain-the-difference-between-mutable-and-immutable-objects/pt-BR.mdx
+++ b/packages/quiz/questions/explain-the-difference-between-mutable-and-immutable-objects/pt-BR.mdx
@@ -67,15 +67,15 @@ Congelar um objeto não permite que novas propriedades sejam adicionadas a um ob
 
 ### Prós
 
--   Detecção de mudanças mais fácil: A igualdade de objetos pode ser determinada de maneira eficiente e fácil por meio da igualdade referencial. Isso é útil para comparar diferenças de objetos no React e Redux.
--   Menos complicado: Programas com objetos imutáveis são menos complicados de se pensar, já que você não precisa se preocupar sobre como um objeto pode evoluir ao longo do tempo.
--   Compartilhamento fácil por referências: Uma cópia de um objeto é tão boa quanto outra, então você pode armazenar objetos em cache ou reutilizar o mesmo objeto várias vezes.
--   Seguro para threads: Objetos imutáveis podem ser usados com segurança entre threads em um ambiente multi-threaded, já que não há risco de serem modificados em outras threads que estão sendo executadas simultaneamente.
--   Menos necessidade de memória: Usando bibliotecas como [Immer](https://immerjs.github.io/immer/) e [Immutable.js](https://immutable-js.com/), objetos são modificados usando compartilhamento estrutural e menos memória é necessária para ter vários objetos com estruturas semelhantes.
--   Não há necessidade de cópias defensivas: cópias defensivas não são mais necessárias quando objetos imutáveis são retornados ou passados para funções, uma vez que não há possibilidade de um objeto imutável ser modificado por ela.
+- Detecção de mudanças mais fácil: A igualdade de objetos pode ser determinada de maneira eficiente e fácil por meio da igualdade referencial. Isso é útil para comparar diferenças de objetos no React e Redux.
+- Menos complicado: Programas com objetos imutáveis são menos complicados de se pensar, já que você não precisa se preocupar sobre como um objeto pode evoluir ao longo do tempo.
+- Compartilhamento fácil por referências: Uma cópia de um objeto é tão boa quanto outra, então você pode armazenar objetos em cache ou reutilizar o mesmo objeto várias vezes.
+- Seguro para threads: Objetos imutáveis podem ser usados com segurança entre threads em um ambiente multi-threaded, já que não há risco de serem modificados em outras threads que estão sendo executadas simultaneamente.
+- Menos necessidade de memória: Usando bibliotecas como [Immer](https://immerjs.github.io/immer/) e [Immutable.js](https://immutable-js.com/), objetos são modificados usando compartilhamento estrutural e menos memória é necessária para ter vários objetos com estruturas semelhantes.
+- Não há necessidade de cópias defensivas: cópias defensivas não são mais necessárias quando objetos imutáveis são retornados ou passados para funções, uma vez que não há possibilidade de um objeto imutável ser modificado por ela.
 
 ### Contras
 
--   Complexo para criar por si mesmo: Implementações ingênuas de estruturas de dados imutáveis e suas operações podem resultar em desempenho extremamente pobre porque novos objetos são criados cada vez. É recomendado o uso de bibliotecas para estruturas de dados imutáveis e operações eficientes que utilizam compartilhamento estrutural.
--   Potencial impacto negativo na performance: Alocação (e desalocação) de muitos objetos pequenos ao invés de modificar objetos existentes pode causar um impacto na performance. A complexidade do alocador ou do coletor de lixo geralmente depende do número de objetos no heap.
--   Complexidade para estruturas de dados cíclicas: estruturas de dados cíclicas como grafos são difíceis de construir. Se você tiver dois objetos que não podem ser modificados após a inicialização, como você pode fazer com que eles apontem um para o outro?
+- Complexo para criar por si mesmo: Implementações ingênuas de estruturas de dados imutáveis e suas operações podem resultar em desempenho extremamente pobre porque novos objetos são criados cada vez. É recomendado o uso de bibliotecas para estruturas de dados imutáveis e operações eficientes que utilizam compartilhamento estrutural.
+- Potencial impacto negativo na performance: Alocação (e desalocação) de muitos objetos pequenos ao invés de modificar objetos existentes pode causar um impacto na performance. A complexidade do alocador ou do coletor de lixo geralmente depende do número de objetos no heap.
+- Complexidade para estruturas de dados cíclicas: estruturas de dados cíclicas como grafos são difíceis de construir. Se você tiver dois objetos que não podem ser modificados após a inicialização, como você pode fazer com que eles apontem um para o outro?
diff --git a/packages/quiz/questions/explain-the-difference-between-mutable-and-immutable-objects/zh-CN.mdx b/packages/quiz/questions/explain-the-difference-between-mutable-and-immutable-objects/zh-CN.mdx
index 8ee94e1f7..a06de957a 100644
--- a/packages/quiz/questions/explain-the-difference-between-mutable-and-immutable-objects/zh-CN.mdx
+++ b/packages/quiz/questions/explain-the-difference-between-mutable-and-immutable-objects/zh-CN.mdx
@@ -4,13 +4,13 @@ title: 解释可变和不可变对象之间的差异
 
 不可变性是函数式编程的一个核心原则，对面向对象的程序也有很多好处。 可变对象是一个可以在创建后修改状态的对象。 不可变对象是一个在创建后无法修改状态的对象。
 
-## JavaScript中有什么是不可变对象的例子？
+## JavaScript 中有什么是不可变对象的例子？
 
 在 JavaScript 中，一些内置类型 (数字，字符串) 是不可变的，但自定义对象通常是可变的。
 
 一些内置不可变的 JavaScript 对象是 `Math`, `Date`。
 
-这里有几种方法在普通JavaScript对象上添加/模拟不可变性。
+这里有几种方法在普通 JavaScript 对象上添加/模拟不可变性。
 
 ### 对象常量属性
 
@@ -67,15 +67,15 @@ let immutableObject = Object.freeze({});
 
 ### 优点
 
--   更容易的变化检测：对象的平等性可以通过一种高效和简单的方式即引用的平等性来确定。 这有助于 React 和 Redux 中比较对象的差异。
--   复杂程度较低：具有不可变对象的方案不那么复杂而难以思考， 因为你不需要担心一个对象可能会随着时间而演变。
--   通过引用轻松共享：一个对象的一个副本和另一个一样好，所以你可以缓存对象或多次重复使用同一个对象。
--   线程安全：在多线程环境中，可以安全地在线程之间使用不可变的对象，因为在其他同时运行的线程中不存在修改这些对象的风险。
--   需要更少的内存：使用库，例如 [Immer](https://immerjs.github.io/immer/) 和 [Immutable.js](https://immutable-js), 对象是使用结构共享进行修改, 具有相似结构的多个对象需要较少内存。
--   不需要防御性拷贝：当不可变的对象从函数中返回或传递给函数时，不再需要防御性拷贝，因为不可变的对象不可能被它所修改。
+- 更容易的变化检测：对象的平等性可以通过一种高效和简单的方式即引用的平等性来确定。 这有助于 React 和 Redux 中比较对象的差异。
+- 复杂程度较低：具有不可变对象的方案不那么复杂而难以思考， 因为你不需要担心一个对象可能会随着时间而演变。
+- 通过引用轻松共享：一个对象的一个副本和另一个一样好，所以你可以缓存对象或多次重复使用同一个对象。
+- 线程安全：在多线程环境中，可以安全地在线程之间使用不可变的对象，因为在其他同时运行的线程中不存在修改这些对象的风险。
+- 需要更少的内存：使用库，例如 [Immer](https://immerjs.github.io/immer/) 和 [Immutable.js](https://immutable-js), 对象是使用结构共享进行修改, 具有相似结构的多个对象需要较少内存。
+- 不需要防御性拷贝：当不可变的对象从函数中返回或传递给函数时，不再需要防御性拷贝，因为不可变的对象不可能被它所修改。
 
 ### 缺点
 
--   复杂，要自己创建：对不可变的数据结构及其操作的天真实现会导致性能极差，因为每次都要创建新的对象。 建议利用库来建立高效的不可改变的数据结构和运作，从而对结构共享产生影响。
--   潜在的负面性能：分配（和减少分配）许多小对象，而不是修改现有对象，可能会对性能产生影响。 内存分配器或垃圾收集器的复杂性通常取决于堆上对象的数量。
--   循环数据结构的复杂性：像图表这样的循环数据结构难以构建。 如果您有两个在初始化后无法修改的对象，如何让它们指向对方？
+- 复杂，要自己创建：对不可变的数据结构及其操作的天真实现会导致性能极差，因为每次都要创建新的对象。 建议利用库来建立高效的不可改变的数据结构和运作，从而对结构共享产生影响。
+- 潜在的负面性能：分配（和减少分配）许多小对象，而不是修改现有对象，可能会对性能产生影响。 内存分配器或垃圾收集器的复杂性通常取决于堆上对象的数量。
+- 循环数据结构的复杂性：像图表这样的循环数据结构难以构建。 如果您有两个在初始化后无法修改的对象，如何让它们指向对方？
diff --git a/packages/quiz/questions/explain-the-same-origin-policy-with-regards-to-javascript/zh-CN.mdx b/packages/quiz/questions/explain-the-same-origin-policy-with-regards-to-javascript/zh-CN.mdx
index 6fe097f41..1e3b41067 100644
--- a/packages/quiz/questions/explain-the-same-origin-policy-with-regards-to-javascript/zh-CN.mdx
+++ b/packages/quiz/questions/explain-the-same-origin-policy-with-regards-to-javascript/zh-CN.mdx
@@ -2,4 +2,4 @@
 title: 解释与JavaScript有关的同源策略。
 ---
 
-同源策略阻止JavaScript跨域发出请求。 一个源被定义为URI 协议、主机名和端口号的组合。 这项政策防止一个页面上的恶意脚本通过该页面的文档对象模型访问另一个网页上的敏感数据。
+同源策略阻止 JavaScript 跨域发出请求。 一个源被定义为 URI 协议、主机名和端口号的组合。 这项政策防止一个页面上的恶意脚本通过该页面的文档对象模型访问另一个网页上的敏感数据。
diff --git a/packages/quiz/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/pt-BR.mdx b/packages/quiz/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/pt-BR.mdx
index 19449686f..d04de4da5 100644
--- a/packages/quiz/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/pt-BR.mdx
+++ b/packages/quiz/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/pt-BR.mdx
@@ -8,12 +8,12 @@ No entanto, em SPAs modernas, é usado o rendering no lado do cliente (client-si
 
 ## Prós
 
--   O aplicativo parece mais responsivo e os usuários não veem o flash entre as navegações de página devido às atualizações completas da página.
--   São feitas menos solicitações HTTP ao servidor, pois os mesmos recursos não precisam ser baixados novamente a cada carga de página.
--   Há uma clara separação das responsabilidades entre o cliente e o servidor, permitindo a fácil construção de novos clientes para diferentes plataformas (por exemplo, dispositivos móveis, chatbots, relógios inteligentes) sem precisar modificar o código do servidor. Você também pode modificar a pilha de tecnologia no cliente e no servidor independentemente, desde que o contrato da API não seja quebrado.
+- O aplicativo parece mais responsivo e os usuários não veem o flash entre as navegações de página devido às atualizações completas da página.
+- São feitas menos solicitações HTTP ao servidor, pois os mesmos recursos não precisam ser baixados novamente a cada carga de página.
+- Há uma clara separação das responsabilidades entre o cliente e o servidor, permitindo a fácil construção de novos clientes para diferentes plataformas (por exemplo, dispositivos móveis, chatbots, relógios inteligentes) sem precisar modificar o código do servidor. Você também pode modificar a pilha de tecnologia no cliente e no servidor independentemente, desde que o contrato da API não seja quebrado.
 
 ## Contras
 
--   Há uma carga inicial de página mais pesada devido ao carregamento do framework, código do aplicativo e recursos necessários para várias páginas.
--   Há uma etapa adicional a ser feita no seu servidor, que é configurá-lo para rotear todas as solicitações para um único ponto de entrada e permitir que o roteamento do lado do cliente assuma a partir daí.
--   As SPAs dependem do JavaScript para renderizar conteúdo, mas nem todos os mecanismos de pesquisa executam JavaScript durante a rastreamento e podem ver conteúdo vazio em sua página. Isso prejudica inadvertidamente a otimização de mecanismos de pesquisa (SEO) do seu aplicativo. No entanto, na maioria das vezes, ao construir aplicativos, o SEO não é o fator mais importante, pois nem todo o conteúdo precisa ser indexável pelos mecanismos de pesquisa. Para contornar esse problema, você pode renderizar seu aplicativo no servidor ou usar serviços como [Prerender](https://prerender.io/) para "renderizar seu JavaScript em um navegador, salvar o HTML estático e retorná-lo aos crawlers".
+- Há uma carga inicial de página mais pesada devido ao carregamento do framework, código do aplicativo e recursos necessários para várias páginas.
+- Há uma etapa adicional a ser feita no seu servidor, que é configurá-lo para rotear todas as solicitações para um único ponto de entrada e permitir que o roteamento do lado do cliente assuma a partir daí.
+- As SPAs dependem do JavaScript para renderizar conteúdo, mas nem todos os mecanismos de pesquisa executam JavaScript durante a rastreamento e podem ver conteúdo vazio em sua página. Isso prejudica inadvertidamente a otimização de mecanismos de pesquisa (SEO) do seu aplicativo. No entanto, na maioria das vezes, ao construir aplicativos, o SEO não é o fator mais importante, pois nem todo o conteúdo precisa ser indexável pelos mecanismos de pesquisa. Para contornar esse problema, você pode renderizar seu aplicativo no servidor ou usar serviços como [Prerender](https://prerender.io/) para "renderizar seu JavaScript em um navegador, salvar o HTML estático e retorná-lo aos crawlers".
diff --git a/packages/quiz/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/zh-CN.mdx b/packages/quiz/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/zh-CN.mdx
index f60e42151..9c30f953f 100644
--- a/packages/quiz/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/zh-CN.mdx
+++ b/packages/quiz/questions/explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly/zh-CN.mdx
@@ -2,18 +2,18 @@
 title: 解释一个单页应用程序是什么以及如何优化SEO
 ---
 
-当代的网络开发者指出他们构建的产品是Web 应用，而不是网站。 虽然这两个词之间没有严格区别，但Web 应用往往具有高度的互动性和动态， 允许用户执行操作并收到对其操作的响应。 通常情况下，浏览器从服务器接收HTML并渲染它。 当用户导航到另一个URL时，需要全页刷新，服务器将新的 HTML 发送到新页面。 这被称为服务器端渲染。
+当代的网络开发者指出他们构建的产品是 Web 应用，而不是网站。 虽然这两个词之间没有严格区别，但 Web 应用往往具有高度的互动性和动态， 允许用户执行操作并收到对其操作的响应。 通常情况下，浏览器从服务器接收 HTML 并渲染它。 当用户导航到另一个 URL 时，需要全页刷新，服务器将新的 HTML 发送到新页面。 这被称为服务器端渲染。
 
-然而，在现代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 中，则使用客户端渲染。 浏览器从服务器加载初始页面，以及整个应用程序所需的脚本(框架、库、应用代码) 和样式表。 当用户导航到其他页面时，不会触发页面刷新。 页面的 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 动态地更新页面数据，它已经在初始页面加载中下载好了。 此模型类似于本地移动应用的工作方式。
 
 ## 优点
 
--   由于全页刷新，应用感觉更加敏捷，用户没有看到页面导航之间的闪烁。
--   服务器收到的HTTP请求较少，因为同一个资源不必在每个页面加载时再次下载。
--   客户端和服务器之间的关注点明确分离；你可以很容易地为不同的平台（如手机、聊天机器人、智能手表）建立新的客户端，而不必修改服务器代码。 只要API约定未被损坏，您也可以独立修改客户端和服务器上的技术堆栈。
+- 由于全页刷新，应用感觉更加敏捷，用户没有看到页面导航之间的闪烁。
+- 服务器收到的 HTTP 请求较少，因为同一个资源不必在每个页面加载时再次下载。
+- 客户端和服务器之间的关注点明确分离；你可以很容易地为不同的平台（如手机、聊天机器人、智能手表）建立新的客户端，而不必修改服务器代码。 只要 API 约定未被损坏，您也可以独立修改客户端和服务器上的技术堆栈。
 
 ## 缺点
 
--   由于加载框架、应用程序代码和多个页面所需的资产，初始页面负载较重。
--   在您的服务器上还有一个步骤要做，即配置它来将所有请求路由到一个单一的入口点，并允许客户端路由从那里接管。
--   SPA依赖JavaScript来呈现内容，但并非所有的搜索引擎在抓取过程中都会执行JavaScript，它们可能会在你的页面上看到空的内容。 这无意中伤害了您的应用程序的SEO（搜索引擎优化）。 然而，在大多数情况下，当你正在建造应用软件时，SEO并不是最重要的因素， 因为并非所有内容都需要通过搜索引擎索引。 为了克服这个问题，你可以在服务器端渲染你的应用程序，或者使用[Plerender](https://prerender.io/)等服务来 "在浏览器中渲染你的JavaScript，保存静态HTML，并将其返回给爬虫"。
+- 由于加载框架、应用程序代码和多个页面所需的资产，初始页面负载较重。
+- 在您的服务器上还有一个步骤要做，即配置它来将所有请求路由到一个单一的入口点，并允许客户端路由从那里接管。
+- SPA 依赖 JavaScript 来呈现内容，但并非所有的搜索引擎在抓取过程中都会执行 JavaScript，它们可能会在你的页面上看到空的内容。 这无意中伤害了您的应用程序的 SEO（搜索引擎优化）。 然而，在大多数情况下，当你正在建造应用软件时，SEO 并不是最重要的因素， 因为并非所有内容都需要通过搜索引擎索引。 为了克服这个问题，你可以在服务器端渲染你的应用程序，或者使用[Plerender](https://prerender.io/)等服务来 "在浏览器中渲染你的 JavaScript，保存静态 HTML，并将其返回给爬虫"。
diff --git a/packages/quiz/questions/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/pt-BR.mdx b/packages/quiz/questions/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/pt-BR.mdx
index ede31b4f8..fc5047fc6 100644
--- a/packages/quiz/questions/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/pt-BR.mdx
+++ b/packages/quiz/questions/explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife/pt-BR.mdx
@@ -1,5 +1,5 @@
 ---
-title: "Explique porque o seguinte não funciona como um IIFE: `function foo(){ }();`. O que precisa ser alterado para torná-lo corretamente um IIFE?"
+title: 'Explique porque o seguinte não funciona como um IIFE: `function foo(){ }();`. O que precisa ser alterado para torná-lo corretamente um IIFE?'
 ---
 
 IIFE significa expressões de função imediatamente invocadas. O interpretador JavaScript lê `function foo(){ }();` como `function foo(){ }` e `();`, onde o primeiro é uma declaração de função e o último (um par de parênteses) é uma tentativa de chamar uma função, mas não há nome especificado, portanto, ele retorna `Uncaught SyntaxError: Unexpected token )`.
diff --git a/packages/quiz/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/packages/quiz/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 eb70d3dbb..ea7a46a8a 100644
--- a/packages/quiz/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/packages/quiz/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,10 +1,10 @@
 ---
-title: "解释这为什么不能以IIFE工作: `function foo(){ }();`. 为了使它成为一个IIFE，需要作出哪些改变？"
+title: '解释这为什么不能以IIFE工作: `function foo(){ }();`. 为了使它成为一个IIFE，需要作出哪些改变？'
 ---
 
-IIFE是Immediately Invoked Function Expressions的缩写，即立即调用函数表达式。 JavaScript 解析器读取`function foo(){ }();` 作为 `function foo(){ }` 和 `(); `, 如果前者是一个 _函数声明_, 而后者是一对括号, 则试图调用函数, 但没有指定名称, 因此，它抛出`Uncaught SyntaxError: Unexpected token )`。
+IIFE 是 Immediately Invoked Function Expressions 的缩写，即立即调用函数表达式。 JavaScript 解析器读取`function foo(){ }();` 作为 `function foo(){ }` 和 `(); `, 如果前者是一个 _函数声明_, 而后者是一对括号, 则试图调用函数, 但没有指定名称, 因此，它抛出`Uncaught SyntaxError: Unexpected token )`。
 
-这里有两种方法修复它，涉及添加更多括号：`(function foo(){ })()` 和 `(function foo(){ }())` 以 `function` 开头的语句被认为是_函数声明_；通过将这个函数包裹在"() "中，它成为一个_函数表达式_，然后可以用后面的`()`执行。 这些函数不会在全局范围内暴露，如果你不需要在代码里提及，你甚至可以省略它的名称。
+这里有两种方法修复它，涉及添加更多括号：`(function foo(){ })()` 和 `(function foo(){ }())` 以 `function` 开头的语句被认为是*函数声明*；通过将这个函数包裹在"() "中，它成为一个*函数表达式*，然后可以用后面的`()`执行。 这些函数不会在全局范围内暴露，如果你不需要在代码里提及，你甚至可以省略它的名称。
 
 您也可以使用 `void` 操作符：`void function foo(){ }();`. 不幸的是，这种做法有一个问题。 对给定表达式的执行结果总是\`undefined'，所以如果你的 IIFE 函数返回任何东西，你就不能使用它。 举个例子：
 
diff --git a/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/pt-BR.mdx b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/pt-BR.mdx
index b815a3960..15943525e 100644
--- a/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/pt-BR.mdx
+++ b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/pt-BR.mdx
@@ -6,20 +6,20 @@ O modelo de caixa CSS descreve as caixas retangulares que são geradas para os e
 
 O modelo da caixa CSS é responsável por calcular:
 
--   O espaço que um elemento de bloco ocupa.
--   Se as bordas e/ou margens se sobrepõem ou se colapsam.
--   Dimensões de uma caixa.
+- O espaço que um elemento de bloco ocupa.
+- Se as bordas e/ou margens se sobrepõem ou se colapsam.
+- Dimensões de uma caixa.
 
 ## Regras do Modelo da Caixa
 
--   As dimensões de um elemento de bloco são calculadas por meio de `width`, `height`, `padding`s e `border`s.
--   Se nenhum `height` for especificado, um elemento do bloco será tão alto quanto o conteúdo que ele contém, mais `padding` (a menos que existam floats, veja [descreva flutuantes e como funcionam](/questions/quiz/describe-floats-and-how-they-work)).
--   Se nenhum `width` for especificado, um elemento não-`float` do bloco será expandido para caber a largura do seu pai menos o `padding`, a não ser que tenha uma propriedade definida para 'max-width', neste caso não será maior do que a largura máxima especificada.
-    -   Alguns elementos de nível de bloco (por exemplo, `table`, `figure` e `input`) têm valores de largura inerentes ou padrão, e podem não expandir para preencher a largura total do seu recipiente pai.
-    -   Nota: `span` é um elemento em nível inline e não tem largura padrão, então ele não se expandirá para se ajustar.
--   O `height` de um elemento é calculado pela `height` do conteúdo.
--   A `width` de um elemento é calculada pela `width` do conteúdo.
--   Por padrão (`box-sizing: content-box`), `padding`s e `border`s não fazem parte da `width` e `height` de um elemento.
+- As dimensões de um elemento de bloco são calculadas por meio de `width`, `height`, `padding`s e `border`s.
+- Se nenhum `height` for especificado, um elemento do bloco será tão alto quanto o conteúdo que ele contém, mais `padding` (a menos que existam floats, veja [descreva flutuantes e como funcionam](/questions/quiz/describe-floats-and-how-they-work)).
+- Se nenhum `width` for especificado, um elemento não-`float` do bloco será expandido para caber a largura do seu pai menos o `padding`, a não ser que tenha uma propriedade definida para 'max-width', neste caso não será maior do que a largura máxima especificada.
+  - Alguns elementos de nível de bloco (por exemplo, `table`, `figure` e `input`) têm valores de largura inerentes ou padrão, e podem não expandir para preencher a largura total do seu recipiente pai.
+  - Nota: `span` é um elemento em nível inline e não tem largura padrão, então ele não se expandirá para se ajustar.
+- O `height` de um elemento é calculado pela `height` do conteúdo.
+- A `width` de um elemento é calculada pela `width` do conteúdo.
+- Por padrão (`box-sizing: content-box`), `padding`s e `border`s não fazem parte da `width` e `height` de um elemento.
 
 Note que `margin`s não são contados para o tamanho real da caixa. Isso afeta o espaço total que a caixa ocupará na página, mas apenas o espaço fora da caixa. A área da caixa para no `border` — ela não se estende até a `margin`.
 
@@ -27,9 +27,9 @@ Note que `margin`s não são contados para o tamanho real da caixa. Isso afeta o
 
 A propriedade box-sizing, que define como as dimensões totais largura e altura de um elemento são calculadas.
 
--   `box-sizing: content-box`: Este é o valor padrão de `box-sizing` e segue as regras mencionadas acima.
--   `box-sizing: border-box`: A `width` e a `height` incluirão o conteúdo, padding e borda, mas não incluirão a margin. Esta é uma maneira muito mais intuitiva de pensar em caixas e, portanto, muitos frameworks CSS (por exemplo, Bootstrap, Tailwind, Bulma) definem `* { box-sizing: border-box; }` globalmente, para que todos os elementos usem esse modelo de caixa por padrão. Veja a [pergunta sobre o 'box-sizing: border-box'](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages) para mais informações.
+- `box-sizing: content-box`: Este é o valor padrão de `box-sizing` e segue as regras mencionadas acima.
+- `box-sizing: border-box`: A `width` e a `height` incluirão o conteúdo, padding e borda, mas não incluirão a margin. Esta é uma maneira muito mais intuitiva de pensar em caixas e, portanto, muitos frameworks CSS (por exemplo, Bootstrap, Tailwind, Bulma) definem `* { box-sizing: border-box; }` globalmente, para que todos os elementos usem esse modelo de caixa por padrão. Veja a [pergunta sobre o 'box-sizing: border-box'](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages) para mais informações.
 
 ## Referências
 
--   [O modelo de caixa | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model)
+- [O modelo de caixa | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model)
diff --git a/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.mdx b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.mdx
index 3f0071fcf..7a17c8951 100644
--- a/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.mdx
+++ b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.mdx
@@ -6,20 +6,20 @@ CSS 盒模型描述了为文档树中的元素生成的矩形方形盒，并根
 
 CSS 盒模型负责计算：
 
--   一个块级元素占用多少空间。
--   边框和/或外边距是否重叠，或折叠。
--   盒子的尺寸
+- 一个块级元素占用多少空间。
+- 边框和/或外边距是否重叠，或折叠。
+- 盒子的尺寸
 
 ## 盒模型规则
 
--   块级元素的尺寸用`width`、`height `、`padding`和`border`来计算。
--   如果没有指定 `height` ，块元素将会像它所包含的内容那么高，加上`padding` (除非有浮点，见[描述浮点及其工作方式]\(/questions/quiz/design-floats-and-how -they-work))。
--   如果没有指定`width`，则非`float` 块级元素将展开以适应其父元素缩减`padding`的宽度， 除非它有一个 `max-width` 属性设置，在这种情况下，它不会大于指定的最大宽度。
-    -   某些块级元素 (例如“table”、“figure”和“input”)具有内在或默认的宽限值，不能扩展到填充其母容器的全宽。
-    -   注意：`span` 是一个内联元素，没有默认宽度，所以它不会扩展到合适的宽度。
--   元素的`height `是由内容的`height `计算的。
--   元素的 `width` 是由内容的 `width` 计算的。
--   默认情况(`box-sizing: content-box`), `padding` 和 `border` 都不是元素`width`和`height`的一部分。
+- 块级元素的尺寸用`width`、`height `、`padding`和`border`来计算。
+- 如果没有指定 `height` ，块元素将会像它所包含的内容那么高，加上`padding` (除非有浮点，见[描述浮点及其工作方式]\(/questions/quiz/design-floats-and-how -they-work))。
+- 如果没有指定`width`，则非`float` 块级元素将展开以适应其父元素缩减`padding`的宽度， 除非它有一个 `max-width` 属性设置，在这种情况下，它不会大于指定的最大宽度。
+  - 某些块级元素 (例如“table”、“figure”和“input”)具有内在或默认的宽限值，不能扩展到填充其母容器的全宽。
+  - 注意：`span` 是一个内联元素，没有默认宽度，所以它不会扩展到合适的宽度。
+- 元素的`height `是由内容的`height `计算的。
+- 元素的 `width` 是由内容的 `width` 计算的。
+- 默认情况(`box-sizing: content-box`), `padding` 和 `border` 都不是元素`width`和`height`的一部分。
 
 请注意，`margin`不算在盒子的实际尺寸中。 它影响盒子在页面上所占的总空间，但只影响盒子外的空间。 盒子的区域止于 `border`，它不延伸到`margin`。
 
@@ -27,9 +27,9 @@ CSS 盒模型负责计算：
 
 查找`box-sizing`属性，它会影响元素的总高度和宽度。
 
--   `box-sizing: content-box`：这是`box-sizing`的默认值，并遵守上面的规则。
--   `box-sizing: border-box`: `width` 和 `height` 将包括内容、内边距和边框，但不包括外边距。 这是一种更直观的思考盒子的方式，因此许多CSS框架（例如Bootstrap、Tailwind、Bulma）在全局范围内设置`* { box-sizing: border-box; }`，以便所有元素默认使用这种盒子模型。 请参阅[关于`box-sizing: border-box`的问题](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages) 了解更多信息。
+- `box-sizing: content-box`：这是`box-sizing`的默认值，并遵守上面的规则。
+- `box-sizing: border-box`: `width` 和 `height` 将包括内容、内边距和边框，但不包括外边距。 这是一种更直观的思考盒子的方式，因此许多 CSS 框架（例如 Bootstrap、Tailwind、Bulma）在全局范围内设置`* { box-sizing: border-box; }`，以便所有元素默认使用这种盒子模型。 请参阅[关于`box-sizing: border-box`的问题](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages) 了解更多信息。
 
 ## 参考资料
 
--   [盒模型 | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model)
+- [盒模型 | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model)
diff --git a/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/zh-CN.mdx b/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/zh-CN.mdx
index 24273695e..d6d1f9de0 100644
--- a/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/zh-CN.mdx
+++ b/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/zh-CN.mdx
@@ -2,8 +2,8 @@
 title: 您是否曾经使用过网格系统，如果使用的话，您喜欢什么？
 ---
 
-在Flex开始流行之前（大约在2014年），基于`float`的网格系统是最可靠的，因为在现有的替代系统（flex、grid）中，它仍然拥有最多的浏览器支持。 Bootstrap 一直在使用`float`方法，直到Bootstrap 4转而采用`flex`方法。
+在 Flex 开始流行之前（大约在 2014 年），基于`float`的网格系统是最可靠的，因为在现有的替代系统（flex、grid）中，它仍然拥有最多的浏览器支持。 Bootstrap 一直在使用`float`方法，直到 Bootstrap 4 转而采用`flex`方法。
 
 今天，`flex` 是建立网格系统的推荐方法，它有[体面的浏览器支持 (99.64%)](https://caniuse.com/#search=flex)。
 
-对于喜欢冒险的人来说，他们可以看看[CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/)，它使用闪亮的新`grid`属性。 Grid是一个二维网格布局系统，而Flexbox则是一个一维的系统。
+对于喜欢冒险的人来说，他们可以看看[CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/)，它使用闪亮的新`grid`属性。 Grid 是一个二维网格布局系统，而 Flexbox 则是一个一维的系统。
diff --git a/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/zh-CN.mdx b/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/zh-CN.mdx
index 364a259f3..d3051c47d 100644
--- a/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/zh-CN.mdx
+++ b/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/zh-CN.mdx
@@ -3,13 +3,13 @@ title: 您是否曾使用视网膜屏幕工作过？
 subtitle: 如果是这样，你是在什么时候使用的，使用了什么技术？
 ---
 
-视网膜 （_Retina_） 只是一个营销术语，指的是高分辨率屏幕，像素比大于1。 需要了解的关键是使用像素比值表示这些屏幕正在模拟低分辨率屏幕以显示大小相同的元素。 如今，我们认为所有的移动设备都是事实上的视网膜屏幕。
+视网膜 （_Retina_） 只是一个营销术语，指的是高分辨率屏幕，像素比大于 1。 需要了解的关键是使用像素比值表示这些屏幕正在模拟低分辨率屏幕以显示大小相同的元素。 如今，我们认为所有的移动设备都是事实上的视网膜屏幕。
 
-浏览器默认根据设备分辨率渲染DOM元素，但图片除外。
+浏览器默认根据设备分辨率渲染 DOM 元素，但图片除外。
 
 为了有最佳视网膜显示的精彩图形，我们需要尽可能使用高分辨率图片。 然而，使用最高分辨率图片将会对性能产生影响，因为更多的字节需要在网络上发送。
 
-为了克服这个问题，我们可以使用HTML5中指定的响应式图片。 它需要在浏览器中提供同一图片的不同分辨率文件，并让它决定哪个图片是最佳的图片， 使用 html 属性 `srcset` 和可选的 `sizes` ，比如：
+为了克服这个问题，我们可以使用 HTML5 中指定的响应式图片。 它需要在浏览器中提供同一图片的不同分辨率文件，并让它决定哪个图片是最佳的图片， 使用 html 属性 `srcset` 和可选的 `sizes` ，比如：
 
 ```html
 <div responsive-background-image>
@@ -27,6 +27,6 @@ subtitle: 如果是这样，你是在什么时候使用的，使用了什么技
 </div>
 ```
 
-必须注意，不支持 HTML5 的 `srcset` (即IE11) 的浏览器会忽略它，而使用 `src` 。 如果我们真的需要支持 IE11 并且我们想要为性能原因提供此功能，我们可以使用 JavaScript polyfill。 例如：Picturefill(引用中的链接)。
+必须注意，不支持 HTML5 的 `srcset` (即 IE11) 的浏览器会忽略它，而使用 `src` 。 如果我们真的需要支持 IE11 并且我们想要为性能原因提供此功能，我们可以使用 JavaScript polyfill。 例如：Picturefill(引用中的链接)。
 
-对于图标，尽可能使用SVG，因为无论分辨率如何，它们都会呈现得非常清晰。
+对于图标，尽可能使用 SVG，因为无论分辨率如何，它们都会呈现得非常清晰。
diff --git a/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.mdx b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.mdx
index fda16e4cd..aab656d7e 100644
--- a/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.mdx
+++ b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.mdx
@@ -2,8 +2,8 @@
 title: 你玩过新的CSS Flexbox或Grid规范吗？
 ---
 
-Flexbox 主要用于1维布局，而网格则用于2维布局。
+Flexbox 主要用于 1 维布局，而网格则用于 2 维布局。
 
-Flexbox 解决了CSS 中的许多常见问题，例如在容器内的元素垂直切入、粘滞脚等。 著名的 CSS 框架，例如Bootstrap和Bulma 是基于 Flexbox，而 Flexbox 仍然是创建布局的经过测试和验证的方式。
+Flexbox 解决了 CSS 中的许多常见问题，例如在容器内的元素垂直切入、粘滞脚等。 著名的 CSS 框架，例如 Bootstrap 和 Bulma 是基于 Flexbox，而 Flexbox 仍然是创建布局的经过测试和验证的方式。
 
-Grid 是创建网格布局的最直观的方法，但浏览器支持目前并不广泛。 许多布局问题已经可以通过 Flexbox 解决，因此并没有对Grid的巨大需求。
+Grid 是创建网格布局的最直观的方法，但浏览器支持目前并不广泛。 许多布局问题已经可以通过 Flexbox 解决，因此并没有对 Grid 的巨大需求。
diff --git a/packages/quiz/questions/how-can-you-share-code-between-files/zh-CN.mdx b/packages/quiz/questions/how-can-you-share-code-between-files/zh-CN.mdx
index a038b793d..709a6ff5d 100644
--- a/packages/quiz/questions/how-can-you-share-code-between-files/zh-CN.mdx
+++ b/packages/quiz/questions/how-can-you-share-code-between-files/zh-CN.mdx
@@ -2,10 +2,10 @@
 title: 如何在文件之间共享代码？
 ---
 
-这取决于JavaScript环境。
+这取决于 JavaScript 环境。
 
-在客户端上(浏览器环境)，只要变量/函数在全局范围(`window`) 内声明，所有脚本都可以引用它们。 另一种办法是通过RequireJS采用异步模块定义（AMD）以获取更多模块化方法。
+在客户端上(浏览器环境)，只要变量/函数在全局范围(`window`) 内声明，所有脚本都可以引用它们。 另一种办法是通过 RequireJS 采用异步模块定义（AMD）以获取更多模块化方法。
 
 在服务器 (Node.js) 上，通用的方法是使用 CommonJS。 每个文件被当作模块处理，它可以将变量和函数导出到`module.exports`对象。
 
-ES2015 定义了一个模块语法，旨在替换AMD和CommonJS。 这最终将在浏览器和Nodejs环境中得到支持。
+ES2015 定义了一个模块语法，旨在替换 AMD 和 CommonJS。 这最终将在浏览器和 Nodejs 环境中得到支持。
diff --git a/packages/quiz/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx b/packages/quiz/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx
index 28af6417c..a30848816 100644
--- a/packages/quiz/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx
+++ b/packages/quiz/questions/how-do-you-organize-your-code-module-pattern-classical-inheritance/zh-CN.mdx
@@ -3,8 +3,8 @@ title: 您如何组织您的代码？
 subtitle: 你是否使用模块模式，经典的继承，还是其他什么？
 ---
 
-在过去，开发人员使用Backbone来做OOP（面向对象编程），这鼓励了更多的OOP方法，创建Backbone模型并为其附加方法。
+在过去，开发人员使用 Backbone 来做 OOP（面向对象编程），这鼓励了更多的 OOP 方法，创建 Backbone 模型并为其附加方法。
 
-模块模式仍然很好，但现在，开发者更喜欢使用React/Redux，它利用基于Flux架构的单方向数据流。 现在通常使用普通对象来表示一个应用的数据模型，并编写纯函数来操作这些对象。 像其他Redux应用程序一样，使用actions和reducers对状态进行操作。
+模块模式仍然很好，但现在，开发者更喜欢使用 React/Redux，它利用基于 Flux 架构的单方向数据流。 现在通常使用普通对象来表示一个应用的数据模型，并编写纯函数来操作这些对象。 像其他 Redux 应用程序一样，使用 actions 和 reducers 对状态进行操作。
 
 尽可能避免使用传统继承。 如果您确实如此，请坚持[这些规则](https://med.com/@dan_abramov/howto-use-classes-and-sleep-at-9af8de78ccb4)。
diff --git a/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/pt-BR.mdx b/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/pt-BR.mdx
index 7248edfa2..96913c987 100644
--- a/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/pt-BR.mdx
+++ b/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/pt-BR.mdx
@@ -12,5 +12,5 @@ Para permitir que um mecanismo de busca saiba que o mesmo conteúdo está dispon
 
 ## Renderização
 
--   **Renderização no servidor:** O HTML conterá espaços reservados para strings e o conteúdo para o idioma específico será obtido a partir de configurações no código ou de um serviço de tradução. O servidor então gera dinamicamente a página HTML com o conteúdo nesse idioma específico.
--   **Renderização do lado cliente:** As strings de localização apropriadas serão obtidas e combinadas com as visualizações baseadas em JavaScript.
+- **Renderização no servidor:** O HTML conterá espaços reservados para strings e o conteúdo para o idioma específico será obtido a partir de configurações no código ou de um serviço de tradução. O servidor então gera dinamicamente a página HTML com o conteúdo nesse idioma específico.
+- **Renderização do lado cliente:** As strings de localização apropriadas serão obtidas e combinadas com as visualizações baseadas em JavaScript.
diff --git a/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/zh-CN.mdx b/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/zh-CN.mdx
index 13ca3e56c..068117650 100644
--- a/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/zh-CN.mdx
+++ b/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/zh-CN.mdx
@@ -6,11 +6,11 @@ title: 你如何提供一个有多国语言内容的页面？
 
 以不同语言提供页面是国际化（i18n）的一个方面。
 
-当向服务器发出HTTP请求时，请求的用户代理（浏览器等）通常发送有关语言首选项的信息，例如在 `Accept-Language ` 标题中。 然后，服务器可以使用这些信息来返回一个适当语言版本的文件，如果有这样的替代品的话。 返回的HTML文档还应该声明`<html>`标签中的`lang`属性，例如`<html lang="en">...</html>`。
+当向服务器发出 HTTP 请求时，请求的用户代理（浏览器等）通常发送有关语言首选项的信息，例如在 `Accept-Language ` 标题中。 然后，服务器可以使用这些信息来返回一个适当语言版本的文件，如果有这样的替代品的话。 返回的 HTML 文档还应该声明`<html>`标签中的`lang`属性，例如`<html lang="en">...</html>`。
 
 若要让搜索引擎知道不同语言的内容相同，应该使用带有`rel="alternate"` and `hreflang="..."` 属性的的 `<link>` 标签 。 例如， `<link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />`.
 
 ## 渲染
 
--   **服务器端渲染：** HTML标记将包含字符串占位符，特定语言的内容将从代码或翻译服务的配置中获取。 服务器然后动态生成带有特定语言内容的 HTML 页面。
--   **客户端渲染：** 将获取相应的地域字符串，并与 JavaScript 合并视图。
+- **服务器端渲染：** HTML 标记将包含字符串占位符，特定语言的内容将从代码或翻译服务的配置中获取。 服务器然后动态生成带有特定语言内容的 HTML 页面。
+- **客户端渲染：** 将获取相应的地域字符串，并与 JavaScript 合并视图。
diff --git a/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/pt-BR.mdx b/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/pt-BR.mdx
index b1e72274c..df76a1a5f 100644
--- a/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/pt-BR.mdx
+++ b/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/pt-BR.mdx
@@ -5,9 +5,9 @@ subtitle: Quais técnicas/processos você usa?
 
 ## Técnicas
 
--   Degradação graciosa: A prática de construir uma aplicação para navegadores modernos, garantindo que ela permaneça funcional em navegadores mais antigos.
--   Aprimoramento progressivo: A prática de construir uma aplicação para um nível base de experiência do usuário, mas adicionar aprimoramentos funcionais quando um navegador a suporta.
--   Use [caniuse.com](https://caniuse.com/) para verificar o suporte de recursos.
--   Autoprefixer para inserção automática de prefixo do fornecedor (vendor).
--   Detecção de recursos usando [Modernizr](https://modernizr.com/).
--   Use as consultas CSS de recursos via [\`@support\`\`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
+- Degradação graciosa: A prática de construir uma aplicação para navegadores modernos, garantindo que ela permaneça funcional em navegadores mais antigos.
+- Aprimoramento progressivo: A prática de construir uma aplicação para um nível base de experiência do usuário, mas adicionar aprimoramentos funcionais quando um navegador a suporta.
+- Use [caniuse.com](https://caniuse.com/) para verificar o suporte de recursos.
+- Autoprefixer para inserção automática de prefixo do fornecedor (vendor).
+- Detecção de recursos usando [Modernizr](https://modernizr.com/).
+- Use as consultas CSS de recursos via [\`@support\`\`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
diff --git a/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/zh-CN.mdx b/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/zh-CN.mdx
index 7b418e18f..4c5b4ce5e 100644
--- a/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/zh-CN.mdx
+++ b/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/zh-CN.mdx
@@ -5,9 +5,9 @@ subtitle: 您使用了什么技术/程序？
 
 ## 技术
 
--   优雅降级：为现代浏览器建立一个应用程序，同时确保它在旧的浏览器中保持功能的做法。
--   渐进增强：构建一个基本用户体验应用程序的做法，但在浏览器支持时添加功能增强。
--   使用 [caniuse.com](https://caniuse.com/) 来检查功能支持情况。
--   自动填充供应商前缀的自动修复程序。
--   使用 [Modernizr](https://moderationr.com/)来检测功能。
--   使用 CSS 特性查询 [`@support`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
+- 优雅降级：为现代浏览器建立一个应用程序，同时确保它在旧的浏览器中保持功能的做法。
+- 渐进增强：构建一个基本用户体验应用程序的做法，但在浏览器支持时添加功能增强。
+- 使用 [caniuse.com](https://caniuse.com/) 来检查功能支持情况。
+- 自动填充供应商前缀的自动修复程序。
+- 使用 [Modernizr](https://moderationr.com/)来检测功能。
+- 使用 CSS 特性查询 [`@support`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
diff --git a/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/pt-BR.mdx b/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/pt-BR.mdx
index 66b815d59..6923b2b9e 100644
--- a/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/pt-BR.mdx
+++ b/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/pt-BR.mdx
@@ -10,5 +10,5 @@ O design adaptável é mais parecido com a definição moderna de aprimoramento
 
 Ambos esses métodos têm alguns problemas que precisam ser avaliados:
 
--   O design responsivo pode ser bastante desafiador, pois você está essencialmente usando um único layout, embora responsivo, para se adequar a todas as situações. Definir os pontos de interrupção de consulta de mídia é um desses desafios. Você usa valores padronizados de ponto de quebra? Ou, você utiliza pontos de interrupção que fazem sentido para o layout específico do seu site? E se o layout mudar?
--   O design adaptável geralmente requer a detecção de agente do usuário ou detecção de DPI, etc., todos os quais podem se mostrar pouco confiáveis.
+- O design responsivo pode ser bastante desafiador, pois você está essencialmente usando um único layout, embora responsivo, para se adequar a todas as situações. Definir os pontos de interrupção de consulta de mídia é um desses desafios. Você usa valores padronizados de ponto de quebra? Ou, você utiliza pontos de interrupção que fazem sentido para o layout específico do seu site? E se o layout mudar?
+- O design adaptável geralmente requer a detecção de agente do usuário ou detecção de DPI, etc., todos os quais podem se mostrar pouco confiáveis.
diff --git a/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/zh-CN.mdx b/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/zh-CN.mdx
index 823be5069..94951e015 100644
--- a/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/zh-CN.mdx
+++ b/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/zh-CN.mdx
@@ -10,5 +10,5 @@ title: 响应设计与自适应设计有何不同？
 
 这两种方法都有一些需要加以权衡的问题：
 
--   响应式设计可能是相当具有挑战性的，因为你基本上是在使用一个尽管是响应式的布局来适应所有情况。 如何设置媒体查询断点就是这样一个挑战。 您是否使用标准化断点值？ 或者，您是否使用对您的特定布局有意义的断点？ 如果这种布局改变怎么办？
--   自适应设计通常需要用户代理嗅探，或DPI检测等，所有这些都被证明是不可靠的。
+- 响应式设计可能是相当具有挑战性的，因为你基本上是在使用一个尽管是响应式的布局来适应所有情况。 如何设置媒体查询断点就是这样一个挑战。 您是否使用标准化断点值？ 或者，您是否使用对您的特定布局有意义的断点？ 如果这种布局改变怎么办？
+- 自适应设计通常需要用户代理嗅探，或 DPI 检测等，所有这些都被证明是不可靠的。
diff --git a/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/pt-BR.mdx b/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/pt-BR.mdx
index 2a2bbcaaa..5b7ab3d65 100644
--- a/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/pt-BR.mdx
+++ b/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/pt-BR.mdx
@@ -2,8 +2,8 @@
 title: Como você abordaria a correção de problemas de estilo específicos de navegador?
 ---
 
--   Depois de identificar o problema e o navegador problemático, use uma folha de estilo separada que só é carregada quando aquele navegador específico está sendo usado. Essa técnica requer renderização do lado do servidor.
--   Use bibliotecas como Bootstrap que já lidam com esses problemas de estilo para você.
--   Use o `autoprefixer` para adicionar automaticamente prefixos de vendors ao seu código.
--   Use Reset CSS or Normalize.css.
--   Se você estiver usando o PostCSS (ou uma biblioteca semelhante de transpilação CSS), pode haver plugins que permitam que você opte por usar a sintaxe CSS moderna (e até mesmo as propostas W3C) que transformará aquelas seções do seu código em código compatível com versões anteriores que funcionarão nos destinos que você definiu.
+- Depois de identificar o problema e o navegador problemático, use uma folha de estilo separada que só é carregada quando aquele navegador específico está sendo usado. Essa técnica requer renderização do lado do servidor.
+- Use bibliotecas como Bootstrap que já lidam com esses problemas de estilo para você.
+- Use o `autoprefixer` para adicionar automaticamente prefixos de vendors ao seu código.
+- Use Reset CSS or Normalize.css.
+- Se você estiver usando o PostCSS (ou uma biblioteca semelhante de transpilação CSS), pode haver plugins que permitam que você opte por usar a sintaxe CSS moderna (e até mesmo as propostas W3C) que transformará aquelas seções do seu código em código compatível com versões anteriores que funcionarão nos destinos que você definiu.
diff --git a/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/zh-CN.mdx b/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/zh-CN.mdx
index 15627b114..5bd917fd1 100644
--- a/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/zh-CN.mdx
+++ b/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/zh-CN.mdx
@@ -2,8 +2,8 @@
 title: 您将如何解决特定浏览器特有的样式问题？
 ---
 
--   在确定问题和出问题的浏览器后，使用一个单独的样式表，只在使用该特定浏览器时加载。 这种技术需要服务器端渲染。
--   使用像Bootstrap这样的库，已经为您处理这些样式问题。
--   使用 `autoprefixer` 将供应商前缀自动添加到您的代码中。
--   使用 Reset CSS 或 Normalize.css.
--   如果您正在使用 PostCSS (或类似的 CSS 转换库)， 可能有一些插件允许您选择使用现代的 CSS 语法(甚至是W3C 提议)，这些插件将把您代码中的这些部分转换成对应的与后向兼容的代码，这将适用于您使用的目标。
+- 在确定问题和出问题的浏览器后，使用一个单独的样式表，只在使用该特定浏览器时加载。 这种技术需要服务器端渲染。
+- 使用像 Bootstrap 这样的库，已经为您处理这些样式问题。
+- 使用 `autoprefixer` 将供应商前缀自动添加到您的代码中。
+- 使用 Reset CSS 或 Normalize.css.
+- 如果您正在使用 PostCSS (或类似的 CSS 转换库)， 可能有一些插件允许您选择使用现代的 CSS 语法(甚至是 W3C 提议)，这些插件将把您代码中的这些部分转换成对应的与后向兼容的代码，这将适用于您使用的目标。
diff --git a/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/pt-BR.mdx b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/pt-BR.mdx
index 9db79b912..3aab72660 100644
--- a/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/pt-BR.mdx
+++ b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/pt-BR.mdx
@@ -2,11 +2,11 @@
 title: Considere HTML5 como uma plataforma web aberta. Quais são os blocos de construção do HTML5?
 ---
 
--   **Semantics**: As tags HTML descrevem o conteúdo.
--   **Estilização**: Personalizando a aparência das tags HTML
--   **Conectividade**: Comunique-se com o servidor de maneiras novas e inovadoras.
--   **Offline e armazenamento**: Permite que as páginas da web armazenem dados localmente no lado do cliente e funcionem offline de maneira mais eficiente.
--   **Multimídia**: Torna o vídeo e o áudio cidadãos de primeira classe na Web Aberta.
--   **Gráficos e efeitos 2D/3D**: Permite uma gama muito mais diversa de opções de apresentação.
--   **Desempenho** e integração: Fornece uma otimização de velocidade maior e melhor uso do hardware do computador.
--   **Acesso a dispositivos**: Permite o uso de vários dispositivos de entrada e saída.
+- **Semantics**: As tags HTML descrevem o conteúdo.
+- **Estilização**: Personalizando a aparência das tags HTML
+- **Conectividade**: Comunique-se com o servidor de maneiras novas e inovadoras.
+- **Offline e armazenamento**: Permite que as páginas da web armazenem dados localmente no lado do cliente e funcionem offline de maneira mais eficiente.
+- **Multimídia**: Torna o vídeo e o áudio cidadãos de primeira classe na Web Aberta.
+- **Gráficos e efeitos 2D/3D**: Permite uma gama muito mais diversa de opções de apresentação.
+- **Desempenho** e integração: Fornece uma otimização de velocidade maior e melhor uso do hardware do computador.
+- **Acesso a dispositivos**: Permite o uso de vários dispositivos de entrada e saída.
diff --git a/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/zh-CN.mdx b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/zh-CN.mdx
index 20bea9863..e713e0b76 100644
--- a/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/zh-CN.mdx
+++ b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/zh-CN.mdx
@@ -2,11 +2,11 @@
 title: 将 HTML5 视为一个开放的网络平台。 HTML5 由哪些东西构成？
 ---
 
--   **语义**：HTML标签描述内容。
--   **样式**：自定义HTML标签外观
--   **连接**：以新的和创新的方式与服务器通信。
--   **离线和存储**：允许网页在客户端本地存储数据并更有效地离线操作。
--   **多媒体**：使视频和音频成为开放网络中的一等公民。
--   **2D/3D 图形和特效**: 允许更多不同范围的演示选项。
--   **性能** 和集成：提供更高的速度优化和更好地使用计算机硬件。
--   **设备访问**：允许使用各种输入和输出设备。
+- **语义**：HTML 标签描述内容。
+- **样式**：自定义 HTML 标签外观
+- **连接**：以新的和创新的方式与服务器通信。
+- **离线和存储**：允许网页在客户端本地存储数据并更有效地离线操作。
+- **多媒体**：使视频和音频成为开放网络中的一等公民。
+- **2D/3D 图形和特效**: 允许更多不同范围的演示选项。
+- **性能** 和集成：提供更高的速度优化和更好地使用计算机硬件。
+- **设备访问**：允许使用各种输入和输出设备。
diff --git a/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/zh-CN.mdx b/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/zh-CN.mdx
index 6a350b03d..3c2945e4b 100644
--- a/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/zh-CN.mdx
+++ b/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/zh-CN.mdx
@@ -2,6 +2,6 @@
 title: 您是否有任何理由想使用 `translate()` 而不是 `absolute` 定位，或反之亦然？ 为什么？
 ---
 
-`translate()` 是CSS `transform`属性的一个可能值。 当使用 `translate()`时，该元素仍占用其原有空间(类似\`position: relative')。 但是当改变元素的绝对定位时，这些元素会从页面的流程中被移除，周围元素的定位也会受到影响。 因此必须重新计算页面布局。
+`translate()` 是 CSS `transform`属性的一个可能值。 当使用 `translate()`时，该元素仍占用其原有空间(类似\`position: relative')。 但是当改变元素的绝对定位时，这些元素会从页面的流程中被移除，周围元素的定位也会受到影响。 因此必须重新计算页面布局。
 
 更改 `transform` 或 `opacity` 并不会触发浏览器的回流或重绘，而是会触发组合。 另一方面，改变绝对定位触发器`reflow`。 `transform` 导致浏览器为元素创建一个 GPU 层，但改变绝对定位属性使用 CPU 。 因此，`translate()`是更有效的，并将导致更短的绘制时间，以实现更平滑的动画。
diff --git a/packages/quiz/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/zh-CN.mdx b/packages/quiz/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/zh-CN.mdx
index cad139cf5..858ca733d 100644
--- a/packages/quiz/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/zh-CN.mdx
+++ b/packages/quiz/questions/what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor/zh-CN.mdx
@@ -40,4 +40,4 @@ sayNameFromWindow2(); // John
 
 这里的主要启示是，对于普通函数\`this'可以改变，但对于箭头函数，上下文始终保持不变。 所以，即使你将箭头函数传递到应用程序的不同部分，你也不必担心上下文会发生变化。
 
-这对React类组件特别有用。 如果你定义了一个类方法，例如使用普通函数的点击处理程序，然后你把这个点击处理程序作为一个道具传递给子组件，你将需要在父组件的构造函数中绑定`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)
diff --git a/packages/quiz/questions/what-are-data-attributes-good-for/zh-CN.mdx b/packages/quiz/questions/what-are-data-attributes-good-for/zh-CN.mdx
index 5e8b20c22..e69f2b1ca 100644
--- a/packages/quiz/questions/what-are-data-attributes-good-for/zh-CN.mdx
+++ b/packages/quiz/questions/what-are-data-attributes-good-for/zh-CN.mdx
@@ -1,10 +1,10 @@
 ---
-title: "`data-`属性有什么用？"
+title: '`data-`属性有什么用？'
 ---
 
-在JavaScript框架流行之前，开发者使用`data-`属性在DOM本身中存储额外的数据，没有其他的黑客，如非标准属性，DOM上的额外属性。 它是为了在没有更合适的属性或元素时将自定义数据私密存储到页面或应用中。
+在 JavaScript 框架流行之前，开发者使用`data-`属性在 DOM 本身中存储额外的数据，没有其他的黑客，如非标准属性，DOM 上的额外属性。 它是为了在没有更合适的属性或元素时将自定义数据私密存储到页面或应用中。
 
-“data-”属性的另一个常用例子是存储第三方库或框架使用的信息。 例如，Bootstrap库使用数据属性使`<button>`s在页面的其他地方触发modal的动作（[example](https://getbootstrap.com/docs/5.2/components/modal/#via-data-attributes)）。
+“data-”属性的另一个常用例子是存储第三方库或框架使用的信息。 例如，Bootstrap 库使用数据属性使`<button>`s 在页面的其他地方触发 modal 的动作（[example](https://getbootstrap.com/docs/5.2/components/modal/#via-data-attributes)）。
 
 ```html
 <button type="button" data-bs-toggle="modal" data-bs-target="#myModal">
@@ -14,6 +14,6 @@ title: "`data-`属性有什么用？"
 <div class="modal fade" id="myModal">弹窗内容</div>
 ```
 
-如今，一般不鼓励使用`data-`属性。 一个原因是用户可以轻松地通过在浏览器中使用“检查元素”来修改数据属性。 数据模型最好存储在JavaScript环境中，并通过虚拟DOM调和或双向数据绑定（可能通过一个库或一个框架）让它们与DOM保持同步。
+如今，一般不鼓励使用`data-`属性。 一个原因是用户可以轻松地通过在浏览器中使用“检查元素”来修改数据属性。 数据模型最好存储在 JavaScript 环境中，并通过虚拟 DOM 调和或双向数据绑定（可能通过一个库或一个框架）让它们与 DOM 保持同步。
 
-然而，数据属性的一个完全有效的用途，是为**端到端**的测试框架（如Playwright、Puppeteer、Selenium）添加一个标识符，而不是为主要用于其他目的的测试添加类或ID属性。 该元素需要一种被选择的方式，而像`data-test-id="my-element"`这样的东西是一种有效的方式，而不至于扭曲语义标记。
+然而，数据属性的一个完全有效的用途，是为**端到端**的测试框架（如 Playwright、Puppeteer、Selenium）添加一个标识符，而不是为主要用于其他目的的测试添加类或 ID 属性。 该元素需要一种被选择的方式，而像`data-test-id="my-element"`这样的东西是一种有效的方式，而不至于扭曲语义标记。
diff --git a/packages/quiz/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/pt-BR.mdx b/packages/quiz/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/pt-BR.mdx
index eaf76e8e3..246dd5729 100644
--- a/packages/quiz/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/pt-BR.mdx
+++ b/packages/quiz/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/pt-BR.mdx
@@ -6,18 +6,18 @@ Alguns exemplos de linguagens que compilam para JavaScript incluem CoffeeScript,
 
 ## Vantagens
 
--   Corrige alguns dos problemas de longa data em JavaScript e desencoraja anti-padrões do JavaScript.
--   Permite que você escreva um código mais curto, fornecendo açúcar sintático em cima do JavaScript, o que o ES5 não possui, mas o ES2015 é excelente.
--   Tipos estáticos são incríveis (no caso do TypeScript) para projetos grandes que precisam ser mantidos ao longo do tempo.
+- Corrige alguns dos problemas de longa data em JavaScript e desencoraja anti-padrões do JavaScript.
+- Permite que você escreva um código mais curto, fornecendo açúcar sintático em cima do JavaScript, o que o ES5 não possui, mas o ES2015 é excelente.
+- Tipos estáticos são incríveis (no caso do TypeScript) para projetos grandes que precisam ser mantidos ao longo do tempo.
 
 ## Desvantagens
 
--   É preciso ter um processo de construção/compilação, já que os navegadores apenas executam JavaScript e seu código precisará ser compilado em JavaScript antes de ser enviado aos navegadores.
--   Depuração pode ser difícil se seus mapas de origem não mapearem corretamente para sua origem pré-compilada.
--   A maioria dos desenvolvedores não está familiarizada com essas linguagens e precisará aprendê-las. Há um custo de aprendizado envolvido para sua equipe se você usá-lo em seus projetos.
--   Comunidade menor (dependendo da linguagem), o que significa que recursos, tutoriais, bibliotecas e ferramentas serão mais difíceis de encontrar.
--   O suporte de IDE/editor pode ser limitado.
--   Essas linguagens sempre estarão atrasadas em relação ao padrão mais recente do JavaScript.
--   Os desenvolvedores devem estar cientes do que seu código está sendo compilado, pois é isso que realmente será executado e é isso que importa no final.
+- É preciso ter um processo de construção/compilação, já que os navegadores apenas executam JavaScript e seu código precisará ser compilado em JavaScript antes de ser enviado aos navegadores.
+- Depuração pode ser difícil se seus mapas de origem não mapearem corretamente para sua origem pré-compilada.
+- A maioria dos desenvolvedores não está familiarizada com essas linguagens e precisará aprendê-las. Há um custo de aprendizado envolvido para sua equipe se você usá-lo em seus projetos.
+- Comunidade menor (dependendo da linguagem), o que significa que recursos, tutoriais, bibliotecas e ferramentas serão mais difíceis de encontrar.
+- O suporte de IDE/editor pode ser limitado.
+- Essas linguagens sempre estarão atrasadas em relação ao padrão mais recente do JavaScript.
+- Os desenvolvedores devem estar cientes do que seu código está sendo compilado, pois é isso que realmente será executado e é isso que importa no final.
 
 Na prática, o ES2015 melhorou significativamente o JavaScript e tornou muito mais agradável escrevê-lo. Não há mais uma grande necessidade de usar o CoffeeScript nos dias de hoje. Em vez disso, o TypeScript é a escolha preferida devido à segurança de tipo adicionada e à experiência de desenvolvedor melhorada que ele proporciona.
diff --git a/packages/quiz/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/zh-CN.mdx b/packages/quiz/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/zh-CN.mdx
index 67de6a272..eaf996017 100644
--- a/packages/quiz/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/zh-CN.mdx
+++ b/packages/quiz/questions/what-are-some-of-the-advantages-disadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript/zh-CN.mdx
@@ -2,22 +2,22 @@
 title: 用编译成 JavaScript 的语言编写JavaScript 代码的一些优点/缺点是什么？
 ---
 
-编译为 JavaScript 的一些语言的例子包括CoffeeScript、Elm、ClojureScript、PureScript和TypeScript。
+编译为 JavaScript 的一些语言的例子包括 CoffeeScript、Elm、ClojureScript、PureScript 和 TypeScript。
 
 ## 优点
 
--   修复JavaScript中一些长期存在的问题，并阻止JavaScript的反模式。
--   通过在JavaScript之上提供一些语法糖，使你能够写出更短的代码，ES5缺乏这种能力，但ES2015却很棒。
--   静态类型对于需要长期维护的大型项目来说是很棒的（就TypeScript而言）。
+- 修复 JavaScript 中一些长期存在的问题，并阻止 JavaScript 的反模式。
+- 通过在 JavaScript 之上提供一些语法糖，使你能够写出更短的代码，ES5 缺乏这种能力，但 ES2015 却很棒。
+- 静态类型对于需要长期维护的大型项目来说是很棒的（就 TypeScript 而言）。
 
 ## 缺点
 
--   需要一个构建/编译过程，因为浏览器只运行JavaScript，你的代码在提供给浏览器之前需要被编译成JavaScript。
--   如果你的源码图没有很好地映射到你的预编译源码上，调试就会很麻烦。
--   大多数开发者不熟悉这些语言，需要学习它。 如果你在你的项目中使用它，对你的团队来说会有一个增加成本。
--   较小的社区(依赖于语言)，这意味着资源、教程、库和工具将更难找到。
--   IDE/编辑器的支持可能缺乏。
--   这些语言将永远落后于最新的 JavaScript 标准。
--   开发人员应该认识到他们的代码被编译成什么样子--因为那是实际运行的东西，而那是最终重要的东西。
+- 需要一个构建/编译过程，因为浏览器只运行 JavaScript，你的代码在提供给浏览器之前需要被编译成 JavaScript。
+- 如果你的源码图没有很好地映射到你的预编译源码上，调试就会很麻烦。
+- 大多数开发者不熟悉这些语言，需要学习它。 如果你在你的项目中使用它，对你的团队来说会有一个增加成本。
+- 较小的社区(依赖于语言)，这意味着资源、教程、库和工具将更难找到。
+- IDE/编辑器的支持可能缺乏。
+- 这些语言将永远落后于最新的 JavaScript 标准。
+- 开发人员应该认识到他们的代码被编译成什么样子--因为那是实际运行的东西，而那是最终重要的东西。
 
-实际上，ES2015极大地改善了JavaScript，使其更易于编写。 现在实际上没有必要使用 CoffeeScript 相反，TypeScript是首选，因为它带来了额外的类型安全和改进的开发者体验。
+实际上，ES2015 极大地改善了 JavaScript，使其更易于编写。 现在实际上没有必要使用 CoffeeScript 相反，TypeScript 是首选，因为它带来了额外的类型安全和改进的开发者体验。
diff --git a/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/zh-CN.mdx b/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/zh-CN.mdx
index a51e2e32f..fd6f8209f 100644
--- a/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/zh-CN.mdx
+++ b/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/zh-CN.mdx
@@ -2,8 +2,8 @@
 title: 编写高效的CSS有哪些 "麻烦"？
 ---
 
-首先，要明白浏览器是从最右边（关键选择器）到左边匹配选择器的。 浏览器根据关键选择器过滤出DOM中的元素，并向上遍历其父元素以确定匹配。 选择器链长度越短，浏览器就能越快确定该元素是否与选择器匹配。 因此避免具有标签和通用选择器的关键选择器。 它们与大量的元素相匹配，浏览器将不得不做更多的工作来确定父代是否匹配。
+首先，要明白浏览器是从最右边（关键选择器）到左边匹配选择器的。 浏览器根据关键选择器过滤出 DOM 中的元素，并向上遍历其父元素以确定匹配。 选择器链长度越短，浏览器就能越快确定该元素是否与选择器匹配。 因此避免具有标签和通用选择器的关键选择器。 它们与大量的元素相匹配，浏览器将不得不做更多的工作来确定父代是否匹配。
 
 [BEM（块状元素修饰符）](https://bem.info/)方法论建议所有的东西都有一个单一的类，而且，在你需要层次的地方，也会被烘托到类的名称中，这自然使得选择器高效且易于覆盖。
 
-要注意哪些CSS属性[触发](https://csstriggers.com/)回流、重绘和合成。 尽可能避免写入改变布局的样式(触发回流)。
+要注意哪些 CSS 属性[触发](https://csstriggers.com/)回流、重绘和合成。 尽可能避免写入改变布局的样式(触发回流)。
diff --git a/packages/quiz/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/pt-BR.mdx b/packages/quiz/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/pt-BR.mdx
index 72bd39ddd..1064f0894 100644
--- a/packages/quiz/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/pt-BR.mdx
+++ b/packages/quiz/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/pt-BR.mdx
@@ -4,15 +4,15 @@ title: Quais são as vantagens e desvantagens de usar o Ajax?
 
 ## Vantagens
 
--   Melhor interatividade. O novo conteúdo do servidor pode ser alterado dinamicamente sem a necessidade de recarregar a página inteira.
--   Reduzir conexões para o servidor, pois scripts e folhas de estilo só precisam ser solicitados uma vez.
--   O State pode ser mantido em uma página. As variáveis do JavaScript e o estado do DOM persistirão porque a página principal do contêiner não foi recarregada.
--   Basicamente, a maioria das vantagens de um SPA.
+- Melhor interatividade. O novo conteúdo do servidor pode ser alterado dinamicamente sem a necessidade de recarregar a página inteira.
+- Reduzir conexões para o servidor, pois scripts e folhas de estilo só precisam ser solicitados uma vez.
+- O State pode ser mantido em uma página. As variáveis do JavaScript e o estado do DOM persistirão porque a página principal do contêiner não foi recarregada.
+- Basicamente, a maioria das vantagens de um SPA.
 
 ## Desvantagens
 
--   Páginas dinâmicas da web são mais difíceis de favoritar.
--   Não funciona se o JavaScript foi desativado no navegador.
--   Alguns rastreadores web não executam JavaScript e não veem o conteúdo que foi carregado pelo JavaScript.
--   Páginas web que usam Ajax para buscar dados provavelmente terão que combinar os dados remotos com modelos do lado cliente para atualizar o DOM. Para que isso aconteça, o JavaScript terá que ser analisado e executado no navegador, e dispositivos móveis de baixo custo podem ter problemas com isso.
--   Basicamente, a maioria das vantagens de um SPA.
+- Páginas dinâmicas da web são mais difíceis de favoritar.
+- Não funciona se o JavaScript foi desativado no navegador.
+- Alguns rastreadores web não executam JavaScript e não veem o conteúdo que foi carregado pelo JavaScript.
+- Páginas web que usam Ajax para buscar dados provavelmente terão que combinar os dados remotos com modelos do lado cliente para atualizar o DOM. Para que isso aconteça, o JavaScript terá que ser analisado e executado no navegador, e dispositivos móveis de baixo custo podem ter problemas com isso.
+- Basicamente, a maioria das vantagens de um SPA.
diff --git a/packages/quiz/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/zh-CN.mdx b/packages/quiz/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/zh-CN.mdx
index 2dbd3019e..562b3e8b8 100644
--- a/packages/quiz/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/zh-CN.mdx
+++ b/packages/quiz/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/zh-CN.mdx
@@ -4,15 +4,15 @@ title: 使用Ajax的利弊是什么？
 
 ## 优点
 
--   更好的交互性。 来自服务器的新内容可以动态地改变，而不需要重新加载整个页面。
--   减少与服务器的连接，因为脚本和样式表只能请求一次。
--   状态可以在页面上维持。 JavaScript 变量和 DOM 状态将持续，因为主容器页面没有被重新加载。
--   基本上是SPA的大部分优点。
+- 更好的交互性。 来自服务器的新内容可以动态地改变，而不需要重新加载整个页面。
+- 减少与服务器的连接，因为脚本和样式表只能请求一次。
+- 状态可以在页面上维持。 JavaScript 变量和 DOM 状态将持续，因为主容器页面没有被重新加载。
+- 基本上是 SPA 的大部分优点。
 
 ## 缺点
 
--   动态网页不好存书签。
--   如果浏览器中禁用 JavaScript 则无法工作。
--   有些网页爬虫不执行 JavaScript ，不会看到JavaScript 加载的内容。
--   使用 Ajax 获取数据的网页可能需要将已获取的远程数据与客户端模板合并以更新 DOM。 要做到这一点，JavaScript就必须在浏览器中解析和执行，而低端移动设备可能会为此而挣扎。
--   基本上是SPA的大部分缺点。
+- 动态网页不好存书签。
+- 如果浏览器中禁用 JavaScript 则无法工作。
+- 有些网页爬虫不执行 JavaScript ，不会看到 JavaScript 加载的内容。
+- 使用 Ajax 获取数据的网页可能需要将已获取的远程数据与客户端模板合并以更新 DOM。 要做到这一点，JavaScript 就必须在浏览器中解析和执行，而低端移动设备可能会为此而挣扎。
+- 基本上是 SPA 的大部分缺点。
diff --git a/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/pt-BR.mdx b/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/pt-BR.mdx
index d7f683d96..2d3f559a8 100644
--- a/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/pt-BR.mdx
+++ b/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/pt-BR.mdx
@@ -4,14 +4,14 @@ title: Quais são as vantagens / desvantagens de usar pré-processadores CSS?
 
 ## Vantagens
 
--   O CSS é fica mais fácil de ser mantido.
--   Mais fácil escrever seletores aninhados.
--   Variáveis para temas consistentes. Pode-se compartilhar arquivos de tema entre diferentes projetos. Isso não é necessariamente útil com propriedades personalizadas CSS (frequentemente chamadas de variáveis CSS).
--   Mixins para gerar CSS repetido.
--   Sass e Less possuem recursos como loops, listas e mapas que podem tornar a configuração mais fácil e menos verbosa.
--   Dividindo o seu código em vários arquivos durante o desenvolvimento. Os arquivos CSS também podem ser divididos, mas isso exigirá uma solicitação HTTP para baixar cada arquivo CSS.
+- O CSS é fica mais fácil de ser mantido.
+- Mais fácil escrever seletores aninhados.
+- Variáveis para temas consistentes. Pode-se compartilhar arquivos de tema entre diferentes projetos. Isso não é necessariamente útil com propriedades personalizadas CSS (frequentemente chamadas de variáveis CSS).
+- Mixins para gerar CSS repetido.
+- Sass e Less possuem recursos como loops, listas e mapas que podem tornar a configuração mais fácil e menos verbosa.
+- Dividindo o seu código em vários arquivos durante o desenvolvimento. Os arquivos CSS também podem ser divididos, mas isso exigirá uma solicitação HTTP para baixar cada arquivo CSS.
 
 ## Desvantagens
 
--   Requer ferramentas para pré-processamento. Tempo de recompilação pode ser lento.
--   Não escrever CSS atual e potencialmente utilizável. Por exemplo, usando algo como [postcss-loader](https://github.com/postcss/postcss-loader) com o [webpack](https://webpack.js.org/), você pode escrever CSS potencialmente compatível com o futuro, permitindo que você use coisas como variáveis CSS em vez de variáveis Sass. Assim, você está aprendendo uma nova sintaxe que pode pagar se/quando eles se tornarem padronizados.
+- Requer ferramentas para pré-processamento. Tempo de recompilação pode ser lento.
+- Não escrever CSS atual e potencialmente utilizável. Por exemplo, usando algo como [postcss-loader](https://github.com/postcss/postcss-loader) com o [webpack](https://webpack.js.org/), você pode escrever CSS potencialmente compatível com o futuro, permitindo que você use coisas como variáveis CSS em vez de variáveis Sass. Assim, você está aprendendo uma nova sintaxe que pode pagar se/quando eles se tornarem padronizados.
diff --git a/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/zh-CN.mdx b/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/zh-CN.mdx
index d8b954f5f..a9be7e4c5 100644
--- a/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/zh-CN.mdx
+++ b/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/zh-CN.mdx
@@ -4,14 +4,14 @@ title: 使用CSS 预处理器的优点/缺点是什么？
 
 ## 优点
 
--   CSS 更易维护。
--   更容易写入嵌套选择器。
--   具有一致性主题的变量。 可以在不同项目之间共享主题文件。 这不一定适用于 CSS 自定义属性(通常称为CSS 变量)。
--   用于生成重复的 CSS 的 Mixins
--   Sass 和Less的功能，如循环、List和Map可以使配置变得更加容易和更加详细。
--   在开发过程中将你的代码分割成多个文件。 CSS 文件也可以拆分，但这样做将需要一个 HTTP 请求下载每个CSS 文件。
+- CSS 更易维护。
+- 更容易写入嵌套选择器。
+- 具有一致性主题的变量。 可以在不同项目之间共享主题文件。 这不一定适用于 CSS 自定义属性(通常称为 CSS 变量)。
+- 用于生成重复的 CSS 的 Mixins
+- Sass 和 Less 的功能，如循环、List 和 Map 可以使配置变得更加容易和更加详细。
+- 在开发过程中将你的代码分割成多个文件。 CSS 文件也可以拆分，但这样做将需要一个 HTTP 请求下载每个 CSS 文件。
 
 ## 缺点
 
--   需要预处理工具。 重新编译时间可能较慢。
--   无法写入当前可用的 CSS 例如，通过使用 [postcss-loader](https://github.com/postcss/postcss-loader) 与 [webpack](https://github.com/postcss/postcss-loader) 你可以写入潜在的未来兼容的 CSS, 允许你使用诸如CSS 变量而不是Sass变量。 因此，你正在学习新的语法，如果/当它们成为标准化的时候，可能会得到回报。
+- 需要预处理工具。 重新编译时间可能较慢。
+- 无法写入当前可用的 CSS 例如，通过使用 [postcss-loader](https://github.com/postcss/postcss-loader) 与 [webpack](https://github.com/postcss/postcss-loader) 你可以写入潜在的未来兼容的 CSS, 允许你使用诸如 CSS 变量而不是 Sass 变量。 因此，你正在学习新的语法，如果/当它们成为标准化的时候，可能会得到回报。
diff --git a/packages/quiz/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx b/packages/quiz/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx
index fafc783c3..45a86baf4 100644
--- a/packages/quiz/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx
+++ b/packages/quiz/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/en-US.mdx
@@ -16,7 +16,7 @@ const person = {
   age: 29,
 };
 
-const copyOfTodd = {...person};
+const copyOfTodd = { ...person };
 ```
 
 ES2015's rest syntax offers a shorthand for including an arbitrary number of arguments to be passed to a function. It is like an inverse of the spread syntax, taking data and stuffing it into an array rather than unpacking an array of data, and it works in function arguments, as well as in array and object destructuring assignments.
@@ -30,7 +30,7 @@ const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12
 
 const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
 
-const {e, f, ...others} = {
+const { e, f, ...others } = {
   e: 1,
   f: 2,
   g: 3,
diff --git a/packages/quiz/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/pt-BR.mdx b/packages/quiz/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/pt-BR.mdx
index b35d316c8..322e5ca9a 100644
--- a/packages/quiz/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/pt-BR.mdx
+++ b/packages/quiz/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/pt-BR.mdx
@@ -16,7 +16,7 @@ const person = {
   age: 29,
 };
 
-const copyOfTodd = {...person};
+const copyOfTodd = { ...person };
 ```
 
 A sintaxe rest do ES2015 oferece uma maneira mais fácil de incluir um número arbitrário de argumentos para serem passados para uma função. É como uma inversão da sintaxe spread, pegando dados e colocando-os em um array em vez de desempacotar um array de dados, e funciona em argumentos de função, bem como em atribuições de desconstrução de arrays e objetos.
@@ -30,7 +30,7 @@ const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12
 
 const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
 
-const {e, f, ...others} = {
+const { e, f, ...others } = {
   e: 1,
   f: 2,
   g: 3,
diff --git a/packages/quiz/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/zh-CN.mdx b/packages/quiz/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/zh-CN.mdx
index 22eec058c..00a429d5a 100644
--- a/packages/quiz/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/zh-CN.mdx
+++ b/packages/quiz/questions/what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax/zh-CN.mdx
@@ -2,7 +2,7 @@
 title: 使用展开语法 (Spread syntax) 的好处是什么？ 它与剩余语法 (Rest syntax) 有何不同？
 ---
 
-ES2015的展开语法在函数式范式的编码中非常有用，因为我们可以很容易地创建数组或对象的副本，而不需要借助于`Object.create`、`slice`或库函数。 此语言功能经常用于Redux和RxJS项目。
+ES2015 的展开语法在函数式范式的编码中非常有用，因为我们可以很容易地创建数组或对象的副本，而不需要借助于`Object.create`、`slice`或库函数。 此语言功能经常用于 Redux 和 RxJS 项目。
 
 ```js
 function putDookieInAnyArray(arr) {
@@ -16,10 +16,10 @@ const person = {
   age: 29,
 };
 
-const copyOfTodd = {...person};
+const copyOfTodd = { ...person };
 ```
 
-ES2015的剩余语法提供了一个短语，用于包含任意数量的参数传递给函数。 它就像展开语法的倒数，把数据塞进一个数组，而不是把一个数组的数据拆开，它在函数参数中起作用，也在数组和对象的去结构化赋值中起作用。
+ES2015 的剩余语法提供了一个短语，用于包含任意数量的参数传递给函数。 它就像展开语法的倒数，把数据塞进一个数组，而不是把一个数组的数据拆开，它在函数参数中起作用，也在数组和对象的去结构化赋值中起作用。
 
 ```js
 function addFiveToABunchOfNumbers(...numbers) {
@@ -30,7 +30,7 @@ const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12
 
 const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
 
-const {e, f, ...others} = {
+const { e, f, ...others } = {
   e: 1,
   f: 2,
   g: 3,
diff --git a/packages/quiz/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/pt-BR.mdx b/packages/quiz/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/pt-BR.mdx
index 80bba089d..cf5ece79c 100644
--- a/packages/quiz/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/pt-BR.mdx
+++ b/packages/quiz/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/pt-BR.mdx
@@ -13,7 +13,7 @@ function Person(name) {
 // ES2015 Class
 class Person {
   constructor(name) {
-    this.name= name;
+    this.name = name;
   }
 }
 ```
diff --git a/packages/quiz/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/zh-CN.mdx b/packages/quiz/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/zh-CN.mdx
index ed982843f..0778ffee1 100644
--- a/packages/quiz/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/zh-CN.mdx
+++ b/packages/quiz/questions/what-are-the-differences-between-es6-class-and-es5-function-constructors/zh-CN.mdx
@@ -44,4 +44,4 @@ class Student extends Person {
 }
 ```
 
-在ES5中使用继承要啰嗦得多，ES2015版本更容易理解和记忆。
+在 ES5 中使用继承要啰嗦得多，ES2015 版本更容易理解和记忆。
diff --git a/packages/quiz/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/pt-BR.mdx b/packages/quiz/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/pt-BR.mdx
index dd29852ed..3511bc5a0 100644
--- a/packages/quiz/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/pt-BR.mdx
+++ b/packages/quiz/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/pt-BR.mdx
@@ -76,4 +76,4 @@ baz = 'qux';
 
 ## Notas
 
--   Como a maioria dos navegadores suportam `let` e `const` atualmente, usar `var` não é mais recomendado. Se você precisa dar suporte a navegadores mais antigos, escreva seu código usando `let` e use um transpiler como o Babel para compilar seu código para uma sintaxe mais antiga.
+- Como a maioria dos navegadores suportam `let` e `const` atualmente, usar `var` não é mais recomendado. Se você precisa dar suporte a navegadores mais antigos, escreva seu código usando `let` e use um transpiler como o Babel para compilar seu código para uma sintaxe mais antiga.
diff --git a/packages/quiz/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/zh-CN.mdx b/packages/quiz/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/zh-CN.mdx
index 5d860f407..845984604 100644
--- a/packages/quiz/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/zh-CN.mdx
+++ b/packages/quiz/questions/what-are-the-differences-between-variables-created-using-let-var-or-const/zh-CN.mdx
@@ -76,4 +76,4 @@ baz = 'qux';
 
 ## 备注
 
--   由于大多数浏览器在现如今都支持 `let` 和 `const` ，因此不再推荐使用 `var` 。 如果您需要针对较旧的浏览器，请使用 `let` 写代码，并使用像Babel 这样的转译器将您的代码编译成旧的语法。
+- 由于大多数浏览器在现如今都支持 `let` 和 `const` ，因此不再推荐使用 `var` 。 如果您需要针对较旧的浏览器，请使用 `let` 写代码，并使用像 Babel 这样的转译器将您的代码编译成旧的语法。
diff --git a/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/metadata.json b/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/metadata.json
index 878f2df8e..267c017ea 100644
--- a/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/metadata.json
+++ b/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/metadata.json
@@ -5,10 +5,7 @@
   "premium": false,
   "duration": 5,
   "published": true,
-  "topics": [
-    "css",
-    "a11y"
-  ],
+  "topics": ["css", "a11y"],
   "importance": "mid",
   "difficulty": "medium"
-}
\ No newline at end of file
+}
diff --git a/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/pt-BR.mdx b/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/pt-BR.mdx
index 9375091c5..3d438409f 100644
--- a/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/pt-BR.mdx
+++ b/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/pt-BR.mdx
@@ -26,9 +26,9 @@ Use isso apenas quando seus conteúdos contiverem apenas texto.
 
 As seguintes maneiras estão incorretas porque escondem o conteúdo do usuário E dos leitores de tela, o que é incorreto se o objetivo é expor apenas aos leitores de tela.
 
--   `display: none`
--   `visibility: hidden`
--   `hidden` attribute
+- `display: none`
+- `visibility: hidden`
+- `hidden` attribute
 
 ## Técnicas no mundo real
 
@@ -71,4 +71,4 @@ Em vez de implementar sua própria maneira de remover um elemento da árvore de
 
 ## Referências
 
--   [CSS em Ação - Conteúdo invisível apenas para usuários do Leitor de tela](https://webaim.org/techniques/css/invisiblecontent/)
+- [CSS em Ação - Conteúdo invisível apenas para usuários do Leitor de tela](https://webaim.org/techniques/css/invisiblecontent/)
diff --git a/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/zh-CN.mdx b/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/zh-CN.mdx
index 9fa1ca0ca..61834febf 100644
--- a/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/zh-CN.mdx
+++ b/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/zh-CN.mdx
@@ -6,13 +6,13 @@ title: 有哪些不同的方法可以在视觉上隐藏内容（并使其仅对
 
 ## 小/零尺寸
 
-`width: 1px; height: 1px`和使用CSS clip 的组合，使该元素在屏幕上根本不占（几乎不占）空间。
+`width: 1px; height: 1px`和使用 CSS clip 的组合，使该元素在屏幕上根本不占（几乎不占）空间。
 
 不建议使用 "width: 0; height; 0"，因为搜索引擎可能会认为它有恶意的意图，比如关键词的填充，而对其进行惩罚。
 
 ## 绝对定位
 
-`position: absolute; left: -99999px` 会将元素放置在屏幕之外。 但是，根据[WebAIM的文章](https://webaim.org/techniques/css/invisiblecontent/)：
+`position: absolute; left: -99999px` 会将元素放置在屏幕之外。 但是，根据[WebAIM 的文章](https://webaim.org/techniques/css/invisiblecontent/)：
 
 > 导航元素，例如链接和表单控制，不应隐藏在屏幕外。 视力正常的键盘用户仍然可以浏览它们，但对他们来说是不可见的，除非它们被设计成在收到键盘焦点时变得可见。
 
@@ -26,15 +26,15 @@ title: 有哪些不同的方法可以在视觉上隐藏内容（并使其仅对
 
 以下方式是不正确的，因为它们隐藏了用户**和**屏幕阅读器中的内容， 如果目的是只向屏幕阅读器曝光，则是不正确的。
 
--   `display: none`
--   `visibility: hidden`
--   `hidden`属性
+- `display: none`
+- `visibility: hidden`
+- `hidden`属性
 
 ## 野路子技术
 
 理想的情况是，建议将上述办法结合起来，以确保它在所有浏览器中正常运作。
 
-与其自己实现从渲染树和a11y树中删除一个元素的方法，我们建议你使用以下成熟的CSS框架中的一种方法，这些方法已经在许多网站上经过了实战检验。
+与其自己实现从渲染树和 a11y 树中删除一个元素的方法，我们建议你使用以下成熟的 CSS 框架中的一种方法，这些方法已经在许多网站上经过了实战检验。
 
 ### Tailwind CSS
 
@@ -71,4 +71,4 @@ title: 有哪些不同的方法可以在视觉上隐藏内容（并使其仅对
 
 ## 参考资料
 
--   [CSS in Action - 屏幕阅读器用户的隐身内容](https://webaim.org/techniques/css/invisiblecontent/)
+- [CSS in Action - 屏幕阅读器用户的隐身内容](https://webaim.org/techniques/css/invisiblecontent/)
diff --git a/packages/quiz/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/pt-BR.mdx b/packages/quiz/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/pt-BR.mdx
index c070b57df..944d4fbc4 100644
--- a/packages/quiz/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/pt-BR.mdx
+++ b/packages/quiz/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/pt-BR.mdx
@@ -4,17 +4,17 @@ title: Quais são os prós e contras de usar Promises em vez de callbacks?
 
 ## Prós
 
--   Evite o "callback hell", que pode ser ilegível.
--   Facilita a escrita de código assíncrono sequencial que é legívell com `.then()`.
--   Facilita a escrita paralela de código assíncrono com `Promise.all()`.
--   Com promessas, esses cenários que estão presentes em código somente com retorno de chamada não ocorrerão:
-    -   Chamar a função de retorno de chamada muito cedo
-    -   Chamar a função de retorno de chamada tarde demais (ou nunca)
-    -   Chamar a função de retorno de chamada poucas ou muitas vezes
-    -   Falhar em passar qualquer ambiente/parâmetros necessários para a função de retorno de chamada
-    -   Ignorar quaisquer erros/exceções que possam ocorrer
+- Evite o "callback hell", que pode ser ilegível.
+- Facilita a escrita de código assíncrono sequencial que é legívell com `.then()`.
+- Facilita a escrita paralela de código assíncrono com `Promise.all()`.
+- Com promessas, esses cenários que estão presentes em código somente com retorno de chamada não ocorrerão:
+  - Chamar a função de retorno de chamada muito cedo
+  - Chamar a função de retorno de chamada tarde demais (ou nunca)
+  - Chamar a função de retorno de chamada poucas ou muitas vezes
+  - Falhar em passar qualquer ambiente/parâmetros necessários para a função de retorno de chamada
+  - Ignorar quaisquer erros/exceções que possam ocorrer
 
 ## Contras
 
--   O código pode se tornar ligeiramente mais complexo (isso pode ser discutível).
--   Em navegadores mais antigos onde ES2015 não é suportado, é necessário carregar um polyfill para poder usá-lo.
+- O código pode se tornar ligeiramente mais complexo (isso pode ser discutível).
+- Em navegadores mais antigos onde ES2015 não é suportado, é necessário carregar um polyfill para poder usá-lo.
diff --git a/packages/quiz/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.mdx b/packages/quiz/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.mdx
index 7c208ebfc..4af881e2c 100644
--- a/packages/quiz/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.mdx
+++ b/packages/quiz/questions/what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks/zh-CN.mdx
@@ -4,17 +4,17 @@ title: 使用Promise而不是回调的利弊是什么？
 
 ## 优点
 
--   避免可读性糟糕的回调地狱
--   使得用`.then()`编写可读的顺序异步代码变得容易。
--   使用 `Promise.all()` 编写并行异步代码是容易的。
--   有了Promise，这些只存在于回调编码中的情况就不会发生：
-    -   调用回调太早了
-    -   调用回调太晚(或从不调用)
-    -   调用回调太少或太多次了
-    -   无法传递任何必要的环境/参数
-    -   吞没可能发生的任何错误/异常
+- 避免可读性糟糕的回调地狱
+- 使得用`.then()`编写可读的顺序异步代码变得容易。
+- 使用 `Promise.all()` 编写并行异步代码是容易的。
+- 有了 Promise，这些只存在于回调编码中的情况就不会发生：
+  - 调用回调太早了
+  - 调用回调太晚(或从不调用)
+  - 调用回调太少或太多次了
+  - 无法传递任何必要的环境/参数
+  - 吞没可能发生的任何错误/异常
 
 ## 缺点
 
--   略微更复杂的代码(可辩论)。
--   在不支持ES2015的较旧浏览器中，您需要加载 polyfill 才能使用。
+- 略微更复杂的代码(可辩论)。
+- 在不支持 ES2015 的较旧浏览器中，您需要加载 polyfill 才能使用。
diff --git a/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/metadata.json b/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/metadata.json
index c5215e0c9..a11792e58 100644
--- a/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/metadata.json
+++ b/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/metadata.json
@@ -5,9 +5,7 @@
   "premium": false,
   "duration": 5,
   "published": true,
-  "topics": [
-    "css"
-  ],
+  "topics": ["css"],
   "importance": "low",
   "difficulty": "medium"
-}
\ No newline at end of file
+}
diff --git a/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/pt-BR.mdx b/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/pt-BR.mdx
index 3ec6858da..448dcb599 100644
--- a/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/pt-BR.mdx
+++ b/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/pt-BR.mdx
@@ -2,8 +2,8 @@
 title: Quais são as várias técnicas de limpeza e qual é apropriada para qual contexto?
 ---
 
--   Método do `div` vazio: `<div style="clear:both;"></div>`.
--   Método de Clearfix: Consulte a classe `.clearfix` mencionada anteriormente.
--   Método `overflow: auto` ou `overflow: hidden`: O pai estabelecerá um novo contexto de formatação em bloco e se expandirá para conter seus filhos flutuantes.
+- Método do `div` vazio: `<div style="clear:both;"></div>`.
+- Método de Clearfix: Consulte a classe `.clearfix` mencionada anteriormente.
+- Método `overflow: auto` ou `overflow: hidden`: O pai estabelecerá um novo contexto de formatação em bloco e se expandirá para conter seus filhos flutuantes.
 
 Em projetos grandes, ter uma classe utilitária `.clearfix` será muito útil. `overflow: hidden` pode cortar os filhos se eles forem mais altos que o pai, e isso não é muito ideal.
diff --git a/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/zh-CN.mdx b/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/zh-CN.mdx
index 5506a6814..a422a5a9e 100644
--- a/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/zh-CN.mdx
+++ b/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/zh-CN.mdx
@@ -2,8 +2,8 @@
 title: 有哪些不同的清浮动技术，哪些适合什么情况？
 ---
 
--   空 `div` 法: `<div style="clear:both;"></div>`.
--   Clearfix 法：参考上面的`.clearfix` 类。
--   `overflow: auto` 或 `overflow: hidden` 方法: 父级将创建一个新的块格式化上下文并扩展到包含其浮动子项。
+- 空 `div` 法: `<div style="clear:both;"></div>`.
+- Clearfix 法：参考上面的`.clearfix` 类。
+- `overflow: auto` 或 `overflow: hidden` 方法: 父级将创建一个新的块格式化上下文并扩展到包含其浮动子项。
 
 在大型项目中，具有实用的`.clearfix`类将非常有用。 如果子元素比父元素的更高，`overflow: hidden` 可能会剪切子元素，不是很理想。
diff --git a/packages/quiz/questions/what-do-you-think-of-amd-vs-commonjs/metadata.json b/packages/quiz/questions/what-do-you-think-of-amd-vs-commonjs/metadata.json
index 6d7c4f00f..09c5ff2ca 100644
--- a/packages/quiz/questions/what-do-you-think-of-amd-vs-commonjs/metadata.json
+++ b/packages/quiz/questions/what-do-you-think-of-amd-vs-commonjs/metadata.json
@@ -5,9 +5,7 @@
   "premium": false,
   "duration": 5,
   "published": true,
-  "topics": [
-    "javascript"
-  ],
+  "topics": ["javascript"],
   "importance": "low",
   "difficulty": "medium"
-}
\ No newline at end of file
+}
diff --git a/packages/quiz/questions/what-do-you-think-of-amd-vs-commonjs/zh-CN.mdx b/packages/quiz/questions/what-do-you-think-of-amd-vs-commonjs/zh-CN.mdx
index 81b86f9b9..e00298b01 100644
--- a/packages/quiz/questions/what-do-you-think-of-amd-vs-commonjs/zh-CN.mdx
+++ b/packages/quiz/questions/what-do-you-think-of-amd-vs-commonjs/zh-CN.mdx
@@ -2,8 +2,8 @@
 title: 您对AMD与 CommonJS的看法如何？
 ---
 
-这两种方法都是实现模块系统的方法，而在实现ES2015年之前，模块系统没有在 JavaScript 中实现。 CommonJS 是同步的，而AMD (异步模块定义) 显然是异步的。 CommonJS设计时考虑到服务器端的开发，而AMD支持异步加载模块，更适合于浏览器。
+这两种方法都是实现模块系统的方法，而在实现 ES2015 年之前，模块系统没有在 JavaScript 中实现。 CommonJS 是同步的，而 AMD (异步模块定义) 显然是异步的。 CommonJS 设计时考虑到服务器端的开发，而 AMD 支持异步加载模块，更适合于浏览器。
 
-AMD 语法可以非常详细，CommonJS 更接近您用其他语言写导入语句的样式。 大多数时间, AMD 是不必要的, 因为如果你将你所有的 JavaScript 打包到同一个文件, 您无法从异步加载属性中获益。 另外，CommonJS语法更接近于Node.js写入/导入模块的风格，在客户端和服务器端JavaScript开发之间的切换过程中的间接成本较少。
+AMD 语法可以非常详细，CommonJS 更接近您用其他语言写导入语句的样式。 大多数时间, AMD 是不必要的, 因为如果你将你所有的 JavaScript 打包到同一个文件, 您无法从异步加载属性中获益。 另外，CommonJS 语法更接近于 Node.js 写入/导入模块的风格，在客户端和服务器端 JavaScript 开发之间的切换过程中的间接成本较少。
 
-未来的标准、ES模块支持同步和异步加载，并得到浏览器和服务器端运行时间的支持。 我们终于可以只坚持一种方法了（除非升级遗留的应用程序）。
+未来的标准、ES 模块支持同步和异步加载，并得到浏览器和服务器端运行时间的支持。 我们终于可以只坚持一种方法了（除非升级遗留的应用程序）。
diff --git a/packages/quiz/questions/what-does-a-doctype-do/zh-CN.mdx b/packages/quiz/questions/what-does-a-doctype-do/zh-CN.mdx
index 956a9ff93..e359a34d5 100644
--- a/packages/quiz/questions/what-does-a-doctype-do/zh-CN.mdx
+++ b/packages/quiz/questions/what-does-a-doctype-do/zh-CN.mdx
@@ -1,11 +1,11 @@
 ---
-title: "`DOCTYPE` 是做什么的？"
+title: '`DOCTYPE` 是做什么的？'
 ---
 
 **DOCTYPE** 是**文档类型**的缩写。 DOCTYPE 始终与**DTD**——**文档类型定义**相关。
 
-DTD定义了某种类型的文档应该如何结构化(例如，“button”可以包含“span”，但不能包含“div”)，而DOCTYPE声明了文档应该遵循的DTD(例如，该文档遵循HTML DTD)。
+DTD 定义了某种类型的文档应该如何结构化(例如，“button”可以包含“span”，但不能包含“div”)，而 DOCTYPE 声明了文档应该遵循的 DTD(例如，该文档遵循 HTML DTD)。
 
-对于网页，需要DOCTYPE声明。 它用于告诉用户代理人您的文档遵循的 HTML 规格的版本。 一旦用户代理识别了一个正确的DOCTYPE，它将触发与此DOCTYPE相匹配的**无询问模式**来读取文档。 如果用户代理无法识别正确的DOCTYPE，它将触发**查询模式**。
+对于网页，需要 DOCTYPE 声明。 它用于告诉用户代理人您的文档遵循的 HTML 规格的版本。 一旦用户代理识别了一个正确的 DOCTYPE，它将触发与此 DOCTYPE 相匹配的**无询问模式**来读取文档。 如果用户代理无法识别正确的 DOCTYPE，它将触发**查询模式**。
 
-HTML5标准的DOCTYPE声明是 `<!DOCTYPE html>` 。
+HTML5 标准的 DOCTYPE 声明是 `<!DOCTYPE html>` 。
diff --git a/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/pt-BR.mdx b/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/pt-BR.mdx
index 64dcf2a1f..c62921efa 100644
--- a/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/pt-BR.mdx
+++ b/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/pt-BR.mdx
@@ -1,5 +1,5 @@
 ---
-title: "O que faz `* { box-sizing: border-box; }`?"
+title: 'O que faz `* { box-sizing: border-box; }`?'
 subtitle: Quais as vantagens?
 ---
 
@@ -11,12 +11,12 @@ Por padrão, os elementos têm `box-sizing: content-box` aplicado, e apenas o ta
 
 A tabela a seguir indica se a propriedade é incluída ou não no cálculo da altura e largura do elemento quando ele tem o respectivo `box-sizing`:
 
-| Propriedade  | `box-sizing: content-box` (padrão)   | `box-sizing: border-box`  |
-| ------------ | ------------------------------------ | ------------------------- |
-| conteúdo     | Sim                                  | Sim                       |
-| `padding`    | Não                                  | Sim                       |
-| `border`     | Não                                  | Sim                       |
-| `margin`     | Não                                  | Não                       |
+| Propriedade | `box-sizing: content-box` (padrão) | `box-sizing: border-box` |
+| ----------- | ---------------------------------- | ------------------------ |
+| conteúdo    | Sim                                | Sim                      |
+| `padding`   | Não                                | Sim                      |
+| `border`    | Não                                | Sim                      |
+| `margin`    | Não                                | Não                      |
 
 ## Vantagens
 
@@ -24,4 +24,4 @@ Levar em consideração `paddings` e `border`s como parte do modelo de caixa é
 
 ## Referências
 
--   [Box Sizing CSS-Tricks](https://css-tricks.com/box-sizing/)
+- [Box Sizing CSS-Tricks](https://css-tricks.com/box-sizing/)
diff --git a/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/zh-CN.mdx b/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/zh-CN.mdx
index f7cfccd67..da8725d1b 100644
--- a/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/zh-CN.mdx
+++ b/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/zh-CN.mdx
@@ -1,5 +1,5 @@
 ---
-title: "`* { box-sizing: border-box; }` 是干什么的？"
+title: '`* { box-sizing: border-box; }` 是干什么的？'
 subtitle: 它有什么好处？
 ---
 
@@ -11,17 +11,17 @@ subtitle: 它有什么好处？
 
 下表显示当属性具有相应的 `box-sizing`时，是否计算包含在元素的高度和宽度：
 
-| 属性        | `box-sizing: content-box` (默认)     | `box-sizing: border-box` |
-| --------- | ---------------------------------- | ------------------------ |
-| 内容        | 是                                  | 是                        |
-| `padding` | 否                                  | 是                        |
-| `border`  | 否                                  | 是                        |
-| `margin`  | 否                                  | 否                        |
+| 属性      | `box-sizing: content-box` (默认) | `box-sizing: border-box` |
+| --------- | -------------------------------- | ------------------------ |
+| 内容      | 是                               | 是                       |
+| `padding` | 否                               | 是                       |
+| `border`  | 否                               | 是                       |
+| `margin`  | 否                               | 否                       |
 
 ## 优点
 
-将 `padding` 和 `margin` 作为盒子模型的一部分来考虑，更符合设计师对网格中内容的实际想象。 这是一种更直观的思考盒子的方式，因此许多CSS框架（例如Bootstrap、Tailwind、Bulma）在全局范围内设置`* { box-sizing: border-box; }`，以便所有元素默认使用这种盒子模型。
+将 `padding` 和 `margin` 作为盒子模型的一部分来考虑，更符合设计师对网格中内容的实际想象。 这是一种更直观的思考盒子的方式，因此许多 CSS 框架（例如 Bootstrap、Tailwind、Bulma）在全局范围内设置`* { box-sizing: border-box; }`，以便所有元素默认使用这种盒子模型。
 
 ## 参考资料
 
--   [Box Sizing | CSS-Tricks](https://css-tricks.com/box-sizing/)
+- [Box Sizing | CSS-Tricks](https://css-tricks.com/box-sizing/)
diff --git a/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/pt-BR.mdx b/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/pt-BR.mdx
index 273b67b20..482280c77 100644
--- a/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/pt-BR.mdx
+++ b/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/pt-BR.mdx
@@ -3,6 +3,6 @@ title: Quais frameworks CSS existentes você usou localmente ou em produção?
 subtitle: Como você mudaria/melhoraria eles?
 ---
 
--   **Bootstrap**: Ciclo de lançamento lento. Bootstrap 4 está em alfa há quase 2 anos. As versões futuras do Bootstrap deveriam incluir um componente de botão spinner, já que ele é amplamente utilizado.
--   **Semantic UI**:: A estrutura do Código Fonte torna a personalização do tema extremamente difícil de entender. Seu sistema de theming não convencional é difícil de personalizar. Caminho de configuração hardcoded dentro da biblioteca do fornecedor (vendor). Não é bem projetado para substituir variáveis, ao contrário do Bootstrap.
--   **Bulma**: Muitas classes e marcações não semânticas e supérfluas são necessárias. Não é compatível com versões anteriores. Atualizar as versões do Bulma pode quebrar o aplicativo de maneiras sutis.
+- **Bootstrap**: Ciclo de lançamento lento. Bootstrap 4 está em alfa há quase 2 anos. As versões futuras do Bootstrap deveriam incluir um componente de botão spinner, já que ele é amplamente utilizado.
+- **Semantic UI**:: A estrutura do Código Fonte torna a personalização do tema extremamente difícil de entender. Seu sistema de theming não convencional é difícil de personalizar. Caminho de configuração hardcoded dentro da biblioteca do fornecedor (vendor). Não é bem projetado para substituir variáveis, ao contrário do Bootstrap.
+- **Bulma**: Muitas classes e marcações não semânticas e supérfluas são necessárias. Não é compatível com versões anteriores. Atualizar as versões do Bulma pode quebrar o aplicativo de maneiras sutis.
diff --git a/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/zh-CN.mdx b/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/zh-CN.mdx
index 180c60fec..e779c7b5c 100644
--- a/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/zh-CN.mdx
+++ b/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/zh-CN.mdx
@@ -3,6 +3,6 @@ title: 您在本地或在生产中使用了哪些现有的 CSS 框架？
 subtitle: 你将如何改变/改进它们？
 ---
 
--   **Bootstrap**：缓慢的发布周期。 Bootstrap 4 已经在 alpha 上停留近两年。 未来版本的 Bootstrap 应该包含一个 loading 按钮组件，因为它被广泛使用。
--   ** Semantic UI**：源代码结构使得主题定制极难理解。 它的非常规主题系统是一种需要定制的痛苦。 在第三方库中硬编码的配置路径。 不像Bootstrap那样为覆盖变量而精心设计。
--   **Bulma**: 需要许多非语义和多余的类和标记。 非后向兼容。 升级版本会以隐蔽的方式破坏应用程序。
+- **Bootstrap**：缓慢的发布周期。 Bootstrap 4 已经在 alpha 上停留近两年。 未来版本的 Bootstrap 应该包含一个 loading 按钮组件，因为它被广泛使用。
+- ** Semantic UI**：源代码结构使得主题定制极难理解。 它的非常规主题系统是一种需要定制的痛苦。 在第三方库中硬编码的配置路径。 不像 Bootstrap 那样为覆盖变量而精心设计。
+- **Bulma**: 需要许多非语义和多余的类和标记。 非后向兼容。 升级版本会以隐蔽的方式破坏应用程序。
diff --git a/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/zh-CN.mdx b/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/zh-CN.mdx
index b5693d76e..d73824814 100644
--- a/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/zh-CN.mdx
+++ b/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/zh-CN.mdx
@@ -2,10 +2,10 @@
 title: CSS 选择器的优先级以及它是如何工作的？
 ---
 
-浏览器根据CSS 规则的优先级决定在元素上显示哪种样式。 我们假定浏览器已经确定了匹配某个元素的规则。 在匹配的规则中，每条规则的具体性、四个逗号分开的数值 `a, b, c, d` 是根据以下因素计算出来的：
+浏览器根据 CSS 规则的优先级决定在元素上显示哪种样式。 我们假定浏览器已经确定了匹配某个元素的规则。 在匹配的规则中，每条规则的具体性、四个逗号分开的数值 `a, b, c, d` 是根据以下因素计算出来的：
 
-1.  `a`是指是否正在使用内联样式。 如果属性声明是元素上的内联样式，`a`是1，否则是0。
-2.  `b` 是ID选择器的数量。
+1.  `a`是指是否正在使用内联样式。 如果属性声明是元素上的内联样式，`a`是 1，否则是 0。
+2.  `b` 是 ID 选择器的数量。
 3.  `c` 是类、属性和伪类选择器的数量。
 4.  `d`是标签和伪元素选择器的数量。
 
@@ -13,4 +13,4 @@ title: CSS 选择器的优先级以及它是如何工作的？
 
 在同等优先级的情况下：最新的规则是重要的。 如果你在你的样式表中写了两次相同的规则（不管是内部的还是外部的），那么你的样式表中较低的规则更接近于要作用的元素，它被认为是更优先的，因此将被应用。
 
-比较好的做法是书写优先级低的CSS规则，这样在必要时可以很容易地被覆盖。 在编写CSS UI组件库代码时，重要的是它们要有较低的优先级，这样库的使用者就可以覆盖它们，而不必仅仅为了提高优先级而使用太复杂的CSS规则，或`!important`。
+比较好的做法是书写优先级低的 CSS 规则，这样在必要时可以很容易地被覆盖。 在编写 CSS UI 组件库代码时，重要的是它们要有较低的优先级，这样库的使用者就可以覆盖它们，而不必仅仅为了提高优先级而使用太复杂的 CSS 规则，或`!important`。
diff --git a/packages/quiz/questions/what-is-progressive-rendering/pt-BR.mdx b/packages/quiz/questions/what-is-progressive-rendering/pt-BR.mdx
index 5d25af4a6..b0c098bdb 100644
--- a/packages/quiz/questions/what-is-progressive-rendering/pt-BR.mdx
+++ b/packages/quiz/questions/what-is-progressive-rendering/pt-BR.mdx
@@ -10,8 +10,8 @@ Essa prática costumava ser muito mais comum nos dias anteriores à internet ban
 
 As imagens na página não são carregadas todas de uma vez. A imagem só é carregada quando o usuário rola para perto/na parte da página que exibe a imagem.
 
--   `<img loading="lazy">` é uma maneira moderna de ensinar o navegador a adiar o carregamento de imagens que estão fora da tela até que o usuário rola perto delas.
--   Use JavaScript para ver a posição da rolagem e carregar a imagem quando a imagem estiver prestes a vir na tela (comparando as coordenadas da imagem com a posição da rolagem).
+- `<img loading="lazy">` é uma maneira moderna de ensinar o navegador a adiar o carregamento de imagens que estão fora da tela até que o usuário rola perto delas.
+- Use JavaScript para ver a posição da rolagem e carregar a imagem quando a imagem estiver prestes a vir na tela (comparando as coordenadas da imagem com a posição da rolagem).
 
 ## Priorizar conteúdo visível (ou renderização acima)
 
@@ -23,6 +23,6 @@ Liberando partes do HTML para o navegador, à medida que a página é construíd
 
 ## Outras técnicas modernas
 
--   [Progressive hydration](https://www.patterns.dev/posts/progressive-hydration/)
--   [Streaming server-side rendering](https://www.patterns.dev/posts/server-side-rendering/)
--   [Hydratação seletiva](https://www.patterns.dev/posts/react-selective-hydration/)
+- [Progressive hydration](https://www.patterns.dev/posts/progressive-hydration/)
+- [Streaming server-side rendering](https://www.patterns.dev/posts/server-side-rendering/)
+- [Hydratação seletiva](https://www.patterns.dev/posts/react-selective-hydration/)
diff --git a/packages/quiz/questions/what-is-progressive-rendering/zh-CN.mdx b/packages/quiz/questions/what-is-progressive-rendering/zh-CN.mdx
index e13b18450..b2d1137e4 100644
--- a/packages/quiz/questions/what-is-progressive-rendering/zh-CN.mdx
+++ b/packages/quiz/questions/what-is-progressive-rendering/zh-CN.mdx
@@ -10,19 +10,19 @@ title: 什么是渐进式渲染？
 
 页面上的图片没有一次性全部加载。 只有当用户滚动到/靠近显示图片的页面部分时才加载图片。
 
--   `<img loading="lazy">`是指示浏览器推迟加载屏幕外图像直到用户滚动附近的现代方法。
--   使用 JavaScript 监听滚动位置，并在图片即将进入屏幕时加载图片(通过将图片坐标与滚动位置进行比较)。
+- `<img loading="lazy">`是指示浏览器推迟加载屏幕外图像直到用户滚动附近的现代方法。
+- 使用 JavaScript 监听滚动位置，并在图片即将进入屏幕时加载图片(通过将图片坐标与滚动位置进行比较)。
 
 ## 优先考虑可见内容（或正面渲染）。
 
-只包括必要的最小的CSS/内容/脚本，以便在用户浏览器中首先呈现尽可能快的页面量，然后你可以使用延迟脚本或监听`DOMContentLoaded`/`load`事件来加载其他资源和内容。
+只包括必要的最小的 CSS/内容/脚本，以便在用户浏览器中首先呈现尽可能快的页面量，然后你可以使用延迟脚本或监听`DOMContentLoaded`/`load`事件来加载其他资源和内容。
 
-## 异步HTML 片段
+## 异步 HTML 片段
 
-在后端构建页面时，将HTML的部分内容刷新到浏览器。 关于这一技术的更多详情可查阅 [这里](http://www.ebaytechblog.com/2014/12/08/async-fragments-reinding-progressive-html-rendering-with-marko/)。
+在后端构建页面时，将 HTML 的部分内容刷新到浏览器。 关于这一技术的更多详情可查阅 [这里](http://www.ebaytechblog.com/2014/12/08/async-fragments-reinding-progressive-html-rendering-with-marko/)。
 
 ## 其他现代技术
 
--   [渐进式水合](https://www.patterns.dev/posts/progressive-hydration/)
--   [流式SSR](https://www.patterns.dev/posts/server-side-rendering/)
--   [选择性水合](https://www.patterns.dev/posts/react-selective-hydration/)
+- [渐进式水合](https://www.patterns.dev/posts/progressive-hydration/)
+- [流式 SSR](https://www.patterns.dev/posts/server-side-rendering/)
+- [选择性水合](https://www.patterns.dev/posts/react-selective-hydration/)
diff --git a/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/pt-BR.mdx b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/pt-BR.mdx
index bfe717c90..af16ccf51 100644
--- a/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/pt-BR.mdx
+++ b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/pt-BR.mdx
@@ -4,21 +4,21 @@ title: Qual é a propriedade CSS `display` e você pode dar alguns exemplos de s
 
 Os valores comuns para a propriedade `display`: `none`, `block`, `inline`, `inline-block`, `flex`, `grid`, `tabela`, `table-row`, `table-cell`, `table-cell`, `list-item`.
 
-| Valor `display` | Descrição                                                                                                                                                                                                           |
-| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `none`          | Não exibe um elemento (o elemento não afeta mais o layout do documento). Todos os elementos filhos também não são mais exibidos. O documento é renderizado como se o elemento não existisse na árvore do documento. |
-| `block`         | O elemento consome toda a linha na direção do bloco (que geralmente é horizontal).                                                                                                                                  |
-| `inline`        | Elementos podem ser dispostos lado a lado.                                                                                                                                                                          |
-| `inline-block`  | Semelhante ao `inline`, mas permite algumas propriedades `block` como configuração de `width` e `height`.                                                                                                           |
-| `flex`          | Comporta-se como um contêiner `flex` de nível de bloco, que pode ser manipulado usando o modelo de flexbox.                                                                                                         |
-| `grid`          | Comporta-se como um contêiner `grid` de nível de bloco usando o layout de grade.                                                                                                                                    |
-| `table`         | Comporta-se como o elemento `<table>`.                                                                                                                                                                              |
-| `table-row`     | Comporta-se como o elemento `<tr>`.                                                                                                                                                                                 |
-| `table-cell`    | Comporta-se como o elemento `<td>`.                                                                                                                                                                                 |
-| `list-item`     | Comporta-se como um elemento `<li>` que lhe permite definir `list-style-type` e `list-style-position`.                                                                                                              |
+| Valor `display` | Descrição |
+| :-- | :-- |
+| `none` | Não exibe um elemento (o elemento não afeta mais o layout do documento). Todos os elementos filhos também não são mais exibidos. O documento é renderizado como se o elemento não existisse na árvore do documento. |
+| `block` | O elemento consome toda a linha na direção do bloco (que geralmente é horizontal). |
+| `inline` | Elementos podem ser dispostos lado a lado. |
+| `inline-block` | Semelhante ao `inline`, mas permite algumas propriedades `block` como configuração de `width` e `height`. |
+| `flex` | Comporta-se como um contêiner `flex` de nível de bloco, que pode ser manipulado usando o modelo de flexbox. |
+| `grid` | Comporta-se como um contêiner `grid` de nível de bloco usando o layout de grade. |
+| `table` | Comporta-se como o elemento `<table>`. |
+| `table-row` | Comporta-se como o elemento `<tr>`. |
+| `table-cell` | Comporta-se como o elemento `<td>`. |
+| `list-item` | Comporta-se como um elemento `<li>` que lhe permite definir `list-style-type` e `list-style-position`. |
 
 Para uma lista completa de valores para a propriedade `display`, consulte [CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display).
 
 ## Referências
 
--   [CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+- [CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
diff --git a/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/zh-CN.mdx b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/zh-CN.mdx
index 770a13b0d..e9b6d4728 100644
--- a/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/zh-CN.mdx
+++ b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/zh-CN.mdx
@@ -4,21 +4,21 @@ title: CSS `display` 属性是什么，你可以举几个例子说明它的使
 
 `display` 属性的常用值：`none`、`block`、`inline`、`inline-block`、`flex`、`grid`、`table`、`table-row`、`table-cell`、`list-item`。
 
-| `display` 值    | 描述                                                                 |
-| :------------- | :----------------------------------------------------------------- |
-| `none`         | 不显示元素(元素不再影响文档的布局)。 所有子元素也不再显示。 文档被呈现为文档树中不存在的元素。                  |
-| `block`        | 该元素在区块方向（通常是水平方向）占用一整行。                                            |
-| `inline`       | 元素可以彼此相邻地布置在一起。                                                    |
-| `inline-block` | 类似于`inline`，但允许一些`block`属性，如设置`width`和`height`。                    |
-| `flex`         | 作为块级的 `flex` 容器，可以使用弹性盒模型进行操作。                                     |
-| `grid`         | 表现为一个使用网格布局的块级`grid`容器。                                            |
-| `table`        | 它像`<table>`元素一样.                                                   |
-| `table-row`    | 它像`<tr>`元素一样.                                                      |
-| `table-cell`   | 它像`<td>`元素一样.                                                      |
-| `list-item`    | 像一个 `<li>` 元素一样，它允许它定义 `list-style-type` 和 `list-style-position` 。 |
+| `display` 值 | 描述 |
+| :-- | :-- |
+| `none` | 不显示元素(元素不再影响文档的布局)。 所有子元素也不再显示。 文档被呈现为文档树中不存在的元素。 |
+| `block` | 该元素在区块方向（通常是水平方向）占用一整行。 |
+| `inline` | 元素可以彼此相邻地布置在一起。 |
+| `inline-block` | 类似于`inline`，但允许一些`block`属性，如设置`width`和`height`。 |
+| `flex` | 作为块级的 `flex` 容器，可以使用弹性盒模型进行操作。 |
+| `grid` | 表现为一个使用网格布局的块级`grid`容器。 |
+| `table` | 它像`<table>`元素一样. |
+| `table-row` | 它像`<tr>`元素一样. |
+| `table-cell` | 它像`<td>`元素一样. |
+| `list-item` | 像一个 `<li>` 元素一样，它允许它定义 `list-style-type` 和 `list-style-position` 。 |
 
 `display` 属性的完整值列表，请参阅[CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CS/display)。
 
 ## 参考资料
 
--   [CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
+- [CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
diff --git a/packages/quiz/questions/what-is-the-definition-of-a-higher-order-function/zh-CN.mdx b/packages/quiz/questions/what-is-the-definition-of-a-higher-order-function/zh-CN.mdx
index 131b711a8..8f45cc3e1 100644
--- a/packages/quiz/questions/what-is-the-definition-of-a-higher-order-function/zh-CN.mdx
+++ b/packages/quiz/questions/what-is-the-definition-of-a-higher-order-function/zh-CN.mdx
@@ -2,7 +2,7 @@
 title: 高阶函数的定义是什么？
 ---
 
-高阶函数是任何以一个或多个函数为参数的函数，它用这些参数来操作一些数据，和/或返回一个函数作为结果。 高阶函数是为了抽象出一些重复执行的操作。 典型的例子是 `map`，它以数组和函数作为参数。 `map`然后使用这个函数来转换数组中的每一项，返回一个带有转换后数据的新数组。 JavaScript中的其他流行的例子是`forEach`、`filter`和`reduce`。 一个高阶函数并不只是需要操作数组，因为从另一个函数返回一个函数有很多方案。 `Function.prototype.bind`是JavaScript中的一个例子。
+高阶函数是任何以一个或多个函数为参数的函数，它用这些参数来操作一些数据，和/或返回一个函数作为结果。 高阶函数是为了抽象出一些重复执行的操作。 典型的例子是 `map`，它以数组和函数作为参数。 `map`然后使用这个函数来转换数组中的每一项，返回一个带有转换后数据的新数组。 JavaScript 中的其他流行的例子是`forEach`、`filter`和`reduce`。 一个高阶函数并不只是需要操作数组，因为从另一个函数返回一个函数有很多方案。 `Function.prototype.bind`是 JavaScript 中的一个例子。
 
 ## Map
 
diff --git a/packages/quiz/questions/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.mdx b/packages/quiz/questions/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.mdx
index 07db012fb..3069e3ec2 100644
--- a/packages/quiz/questions/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.mdx
+++ b/packages/quiz/questions/what-is-the-difference-between-double-equal-and-triple-equal/zh-CN.mdx
@@ -1,5 +1,5 @@
 ---
-title: "`==` 和 `===`之间有什么区别？"
+title: '`==` 和 `===`之间有什么区别？'
 ---
 
 `==`是抽象的平等运算符，而`===`是严格的平等运算符。 `==`运算符会在做完任何必要的类型转换后进行平等性比较。 `===`运算符不会输入转换，所以如果两个值不是同一类型， `===`则只会返回 `false`。 当使用 `==`时，有趣的事情可能会发生，例如：
diff --git a/packages/quiz/questions/what-is-the-extent-of-your-experience-with-promises-andor-their-polyfills/zh-CN.mdx b/packages/quiz/questions/what-is-the-extent-of-your-experience-with-promises-andor-their-polyfills/zh-CN.mdx
index 7aa2432cc..8eda20f7e 100644
--- a/packages/quiz/questions/what-is-the-extent-of-your-experience-with-promises-andor-their-polyfills/zh-CN.mdx
+++ b/packages/quiz/questions/what-is-the-extent-of-your-experience-with-promises-andor-their-polyfills/zh-CN.mdx
@@ -2,6 +2,6 @@
 title: 你对Promise和/或其polyfills的经验有多少？
 ---
 
-对此了解多少。 一个Promise是一个对象，它可能在未来的某个时候产生一个单一的值：要么是一个已解决的值，要么是一个未解决的原因（例如，发生了一个网络错误）。 一个Promise可能属于三种情况之一：fulfilled, rejected 或 pending。 Promise用户可以附加回调，以处理满足的值或拒绝的原因。
+对此了解多少。 一个 Promise 是一个对象，它可能在未来的某个时候产生一个单一的值：要么是一个已解决的值，要么是一个未解决的原因（例如，发生了一个网络错误）。 一个 Promise 可能属于三种情况之一：fulfilled, rejected 或 pending。 Promise 用户可以附加回调，以处理满足的值或拒绝的原因。
 
-一些常见的polyfills是`$.deferred`，Q和Bluebird，但不是所有的都符合规范。 ES2015支持开箱即用的Promise，现在一般不需要polyfills了。
+一些常见的 polyfills 是`$.deferred`，Q 和 Bluebird，但不是所有的都符合规范。 ES2015 支持开箱即用的 Promise，现在一般不需要 polyfills 了。
diff --git a/packages/quiz/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/pt-BR.mdx b/packages/quiz/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/pt-BR.mdx
index 16d06bafc..f8c18ccbc 100644
--- a/packages/quiz/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/pt-BR.mdx
+++ b/packages/quiz/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/pt-BR.mdx
@@ -7,18 +7,18 @@ subtitle: Quais são as vantagens e desvantagens de usa-lo?
 
 ## Vantagens
 
--   Faz com que seja impossível criar variáveis globais acidentalmente.
--   Faz com que as atribuições que falhariam silenciosamente disparem uma exceção.
--   Faz tentativas de excluir propriedades não deletáveis lançam uma exceção (onde antes da tentativa simplesmente não teria efeito).
--   Exige que os nomes dos parâmetros de função sejam exclusivos.
--   `this` é `undefined` no contexto global.
--   Ele captura alguns erros comuns de programação, lançando exceções.
--   Ele desabilita recursos que são confusos ou mal concebidos.
+- Faz com que seja impossível criar variáveis globais acidentalmente.
+- Faz com que as atribuições que falhariam silenciosamente disparem uma exceção.
+- Faz tentativas de excluir propriedades não deletáveis lançam uma exceção (onde antes da tentativa simplesmente não teria efeito).
+- Exige que os nomes dos parâmetros de função sejam exclusivos.
+- `this` é `undefined` no contexto global.
+- Ele captura alguns erros comuns de programação, lançando exceções.
+- Ele desabilita recursos que são confusos ou mal concebidos.
 
 ## Desvantagens
 
--   Muitos recursos faltantes que alguns desenvolvedores podem estar acostumados.
--   Não há mais acesso a `function.caller` e `function.arguments`.
--   Concatenação de scripts escritos em diferentes modos estritos pode causar problemas.
+- Muitos recursos faltantes que alguns desenvolvedores podem estar acostumados.
+- Não há mais acesso a `function.caller` e `function.arguments`.
+- Concatenação de scripts escritos em diferentes modos estritos pode causar problemas.
 
 No geral, os benefícios superam as desvantagens e não há realmente a necessidade de depender dos recursos que o modo estrito proíbe. Todos nós deveríamos estar usando o modo estrito por padrão.
diff --git a/packages/quiz/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/zh-CN.mdx b/packages/quiz/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/zh-CN.mdx
index 4b0b40942..e269859cf 100644
--- a/packages/quiz/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/zh-CN.mdx
+++ b/packages/quiz/questions/what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it/zh-CN.mdx
@@ -3,22 +3,22 @@ title: 什么是`严格模式`？
 subtitle: 使用它有哪些利弊？
 ---
 
-`'use strict'`是一个用于对整个脚本或个别函数启用严格模式的语句。 严格模式是一种选择进入限制性的JavaScript变量的方式。
+`'use strict'`是一个用于对整个脚本或个别函数启用严格模式的语句。 严格模式是一种选择进入限制性的 JavaScript 变量的方式。
 
 ## 优点
 
--   不可能意外地创建全局变量。
--   使得本来会默默失败的赋值抛出一个异常。
--   试图删除不可删除的属性会抛出一个异常（在以前，这种尝试根本没有效果）。
--   需要函数参数名称唯一。
--   `this`在全局上下文内是`undefined`。
--   它能捕捉到一些常见的编码错误，抛出异常。
--   它禁用了那些令人困惑或考虑不周的功能。
+- 不可能意外地创建全局变量。
+- 使得本来会默默失败的赋值抛出一个异常。
+- 试图删除不可删除的属性会抛出一个异常（在以前，这种尝试根本没有效果）。
+- 需要函数参数名称唯一。
+- `this`在全局上下文内是`undefined`。
+- 它能捕捉到一些常见的编码错误，抛出异常。
+- 它禁用了那些令人困惑或考虑不周的功能。
 
 ## 缺点
 
--   缺失许多一些开发者所习惯的功能。
--   无法访问`function.caller` 和 `function.arguments`
--   以不同的严格模式编写的脚本的串联可能会导致问题。
+- 缺失许多一些开发者所习惯的功能。
+- 无法访问`function.caller` 和 `function.arguments`
+- 以不同的严格模式编写的脚本的串联可能会导致问题。
 
 总的来说，好处大于弊端，实际上没有必要依赖严格模式所禁止的特点。 我们都应该默认使用严格模式。
diff --git a/packages/quiz/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/zh-CN.mdx b/packages/quiz/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/zh-CN.mdx
index ae0d9dbe4..0a05152a4 100644
--- a/packages/quiz/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/zh-CN.mdx
+++ b/packages/quiz/questions/what-language-constructs-do-you-use-for-iterating-over-object-properties-and-array-items/zh-CN.mdx
@@ -58,7 +58,7 @@ for (var i = 0; i < arr.length; i++) {
 }
 ```
 
-一个常见的陷阱是，`var`是在函数范围内，而不是在块范围内，大多数情况下，你想要块范围的迭代器变量。 ES2015引入了`let`，它具有块的范围，建议使用`let`而不是`var`。
+一个常见的陷阱是，`var`是在函数范围内，而不是在块范围内，大多数情况下，你想要块范围的迭代器变量。 ES2015 引入了`let`，它具有块的范围，建议使用`let`而不是`var`。
 
 ```js
 for (let i = 0; i < arr.length; i++) {
@@ -86,11 +86,11 @@ for (let element of arr) {
 }
 ```
 
-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`循环，它允许你在符合[可迭代协议](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
 const arr = ['a', 'b', 'c'];
diff --git a/packages/quiz/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/pt-BR.mdx b/packages/quiz/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/pt-BR.mdx
index f0113faaf..f659b36c1 100644
--- a/packages/quiz/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/pt-BR.mdx
+++ b/packages/quiz/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/pt-BR.mdx
@@ -2,12 +2,12 @@
 title: Quais ferramentas e técnicas você usa para depurar o código JavaScript?
 ---
 
--   JavaScript
-    -   [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)
-    -   declaração `debugger`
-    -   Depuração tradicional com `console.log()`
--   React e 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)
+- JavaScript
+  - [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)
+  - declaração `debugger`
+  - Depuração tradicional com `console.log()`
+- React e 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)
diff --git a/packages/quiz/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/zh-CN.mdx b/packages/quiz/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/zh-CN.mdx
index 1f9cab43e..c33f6e076 100644
--- a/packages/quiz/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/zh-CN.mdx
+++ b/packages/quiz/questions/what-tools-and-techniques-do-you-use-for-debugging-javascript-code/zh-CN.mdx
@@ -2,12 +2,12 @@
 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)
+- 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)
diff --git a/packages/quiz/questions/whats-a-typical-use-case-for-anonymous-functions/metadata.json b/packages/quiz/questions/whats-a-typical-use-case-for-anonymous-functions/metadata.json
index b13ea3b48..f92f1ae30 100644
--- a/packages/quiz/questions/whats-a-typical-use-case-for-anonymous-functions/metadata.json
+++ b/packages/quiz/questions/whats-a-typical-use-case-for-anonymous-functions/metadata.json
@@ -5,9 +5,7 @@
   "premium": false,
   "duration": 5,
   "published": true,
-  "topics": [
-    "javascript"
-  ],
+  "topics": ["javascript"],
   "importance": "high",
   "difficulty": "medium"
-}
\ No newline at end of file
+}
diff --git a/packages/quiz/questions/whats-a-typical-use-case-for-anonymous-functions/pt-BR.mdx b/packages/quiz/questions/whats-a-typical-use-case-for-anonymous-functions/pt-BR.mdx
index 361460fff..4806969b3 100644
--- a/packages/quiz/questions/whats-a-typical-use-case-for-anonymous-functions/pt-BR.mdx
+++ b/packages/quiz/questions/whats-a-typical-use-case-for-anonymous-functions/pt-BR.mdx
@@ -22,7 +22,7 @@ Argumentos para construtos de programação funcional ou Lodash (semelhantes a f
 
 ```js
 const arr = [1, 2, 3];
-const double = arr. ap(function (el) {
+const double = arr.ap(function (el) {
   return el * 2;
 });
 console.log(double); // [2, 4, 6]
diff --git a/packages/quiz/questions/whats-a-typical-use-case-for-anonymous-functions/zh-CN.mdx b/packages/quiz/questions/whats-a-typical-use-case-for-anonymous-functions/zh-CN.mdx
index e7fb69dd9..b861e6f54 100644
--- a/packages/quiz/questions/whats-a-typical-use-case-for-anonymous-functions/zh-CN.mdx
+++ b/packages/quiz/questions/whats-a-typical-use-case-for-anonymous-functions/zh-CN.mdx
@@ -18,7 +18,7 @@ setTimeout(function () {
 }, 1000);
 ```
 
-函数式编程结构或Lodash的参数（类似于回调）。
+函数式编程结构或 Lodash 的参数（类似于回调）。
 
 ```js
 const arr = [1, 2, 3];
diff --git a/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/pt-BR.mdx b/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/pt-BR.mdx
index f97da0b39..06ba5b014 100644
--- a/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/pt-BR.mdx
+++ b/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/pt-BR.mdx
@@ -4,8 +4,8 @@ title: Qual é a diferença entre um elemento com posicionamento `relative`, `fi
 
 Um elemento posicionado é um elemento cuja propriedade `position` calculada é `relative`, `absolute`, `fixed` ou `sticky` calculada.
 
--   `static`: A posição padrão; o elemento irá fluir na página como normalmente faria. As propriedades `top`, `right`, `bottom`, `left` e`z-index` não se aplicam.
--   `relative`: A posição do elemento é ajustada em relação a si mesma, sem mudar de layout (deixando assim uma lacuna para o elemento onde ele teria sido se não tivesse sido posicionado).
--   `absolute`: O elemento é removido do fluxo da página e posicionado em uma posição específica em relação ao ancestral posicionado mais próximo se houver, ou em relação ao bloco inicial de contêiner. Caixas posicionadas absolutamente podem ter margens e não se sobrepõem com outras margens. Esses elementos não afetam a posição de outros elementos.
--   `fixed`: O elemento é removido do fluxo da página e posicionado em uma posição específica em relação à janela de visualização e não se move quando a página é rolada.
--   `sticky`: O posicionamento "sticky" é um híbrido de posicionamento relativo e fixo. O elemento é tratado como posicionado `relative` até atravessar um limite específico, momento em que é tratado como posicionado `fixed`.
+- `static`: A posição padrão; o elemento irá fluir na página como normalmente faria. As propriedades `top`, `right`, `bottom`, `left` e`z-index` não se aplicam.
+- `relative`: A posição do elemento é ajustada em relação a si mesma, sem mudar de layout (deixando assim uma lacuna para o elemento onde ele teria sido se não tivesse sido posicionado).
+- `absolute`: O elemento é removido do fluxo da página e posicionado em uma posição específica em relação ao ancestral posicionado mais próximo se houver, ou em relação ao bloco inicial de contêiner. Caixas posicionadas absolutamente podem ter margens e não se sobrepõem com outras margens. Esses elementos não afetam a posição de outros elementos.
+- `fixed`: O elemento é removido do fluxo da página e posicionado em uma posição específica em relação à janela de visualização e não se move quando a página é rolada.
+- `sticky`: O posicionamento "sticky" é um híbrido de posicionamento relativo e fixo. O elemento é tratado como posicionado `relative` até atravessar um limite específico, momento em que é tratado como posicionado `fixed`.
diff --git a/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/zh-CN.mdx b/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/zh-CN.mdx
index 146e816ee..847d66091 100644
--- a/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/zh-CN.mdx
+++ b/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/zh-CN.mdx
@@ -1,11 +1,11 @@
 ---
-title: "`relative`, `absolute`, `fixed` 和 `sticky` 定位的元素之间有什么区别？"
+title: '`relative`, `absolute`, `fixed` 和 `sticky` 定位的元素之间有什么区别？'
 ---
 
 定位元素是一个元素，其计算的 `position` 属性是 `relative`, `absolute`, `fixed` 或 `sticky`。
 
--   `static`: 默认位置; 元素将会像通常那样流入页面。 `top`, `right`, `bow`, `left` 和 `z-index` 属性不生效。
--   `relative`：元素的位置相对于它自己进行调整，而不改变布局（从而在元素没有被定位的情况下为它留下一个缺口）。
--   `absolute`：该元素从页面流中移除，并相对于其最近的祖先（如果有的话）或相对于初始包含块的指定位置定位。 绝对位置的方框可以有边距，而且它们不会与任何其他外边距一起折叠。 这些元素不影响其他元素的位置。
--   `fixed`：该元素被从页面流中移除，并被定位在相对于视口的指定位置，滚动时不会移动。
--   `sticky`：粘性定位是相对定位和固定定位的一种混合。 该元素被视为 `relative` 定位，直到它越过一个指定的阈值，超过这一阈值它将被视为 `fixed` 定位。
+- `static`: 默认位置; 元素将会像通常那样流入页面。 `top`, `right`, `bow`, `left` 和 `z-index` 属性不生效。
+- `relative`：元素的位置相对于它自己进行调整，而不改变布局（从而在元素没有被定位的情况下为它留下一个缺口）。
+- `absolute`：该元素从页面流中移除，并相对于其最近的祖先（如果有的话）或相对于初始包含块的指定位置定位。 绝对位置的方框可以有边距，而且它们不会与任何其他外边距一起折叠。 这些元素不影响其他元素的位置。
+- `fixed`：该元素被从页面流中移除，并被定位在相对于视口的指定位置，滚动时不会移动。
+- `sticky`：粘性定位是相对定位和固定定位的一种混合。 该元素被视为 `relative` 定位，直到它越过一个指定的阈值，超过这一阈值它将被视为 `fixed` 定位。
diff --git a/packages/quiz/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/pt-BR.mdx b/packages/quiz/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/pt-BR.mdx
index f3edb2454..c8f4111cd 100644
--- a/packages/quiz/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/pt-BR.mdx
+++ b/packages/quiz/questions/whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states/pt-BR.mdx
@@ -1,5 +1,5 @@
 ---
-title: "Qual é a diferença entre uma variável que é: `null`, `undefined` ou não declarada?"
+title: 'Qual é a diferença entre uma variável que é: `null`, `undefined` ou não declarada?'
 subtitle: Como você checaria cada um destes estados?"
 ---
 
diff --git a/packages/quiz/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/packages/quiz/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 4902468ea..9bd4819b2 100644
--- a/packages/quiz/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/packages/quiz/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,5 +1,5 @@
 ---
-title: "`null`, `undefined` 和未声明变量的区别是什么？"
+title: '`null`, `undefined` 和未声明变量的区别是什么？'
 subtitle: 您将如何检查这些状态？”
 ---
 
@@ -39,4 +39,4 @@ console.log(typeof foo === 'object'); // true
 console.log(foo == undefined); // true. Wrong, don't use this to check!
 ```
 
-作为一个良好的习惯，永远不要让你的变量未被声明或未被赋值。 如果你还不打算使用它们，在声明后明确地将`null`赋值给它们。 如果你在工作流程中使用一些静态分析工具（如ESLint、TypeScript编译器），它通常也能检查你是否引用了未声明的变量。
+作为一个良好的习惯，永远不要让你的变量未被声明或未被赋值。 如果你还不打算使用它们，在声明后明确地将`null`赋值给它们。 如果你在工作流程中使用一些静态分析工具（如 ESLint、TypeScript 编译器），它通常也能检查你是否引用了未声明的变量。
diff --git a/packages/quiz/questions/whats-the-difference-between-an-attribute-and-a-property/zh-CN.mdx b/packages/quiz/questions/whats-the-difference-between-an-attribute-and-a-property/zh-CN.mdx
index 0103fd421..df1a5de9b 100644
--- a/packages/quiz/questions/whats-the-difference-between-an-attribute-and-a-property/zh-CN.mdx
+++ b/packages/quiz/questions/whats-the-difference-between-an-attribute-and-a-property/zh-CN.mdx
@@ -2,7 +2,7 @@
 title: '"attribute" 和 "property" 之间有什么区别？'
 ---
 
-"attribute"定义在 HTML 标记上，但"property"定义在 DOM 上。 为了说明不同之处，请想象我们在HTML中有这个Input：`<input type="text" value="Hello">`.
+"attribute"定义在 HTML 标记上，但"property"定义在 DOM 上。 为了说明不同之处，请想象我们在 HTML 中有这个 Input：`<input type="text" value="Hello">`.
 
 ```js
 const input = document.querySelector('input');
diff --git a/packages/quiz/questions/whats-the-difference-between-call-and-apply/zh-CN.mdx b/packages/quiz/questions/whats-the-difference-between-call-and-apply/zh-CN.mdx
index 0560d6ed7..b9e498d0d 100644
--- a/packages/quiz/questions/whats-the-difference-between-call-and-apply/zh-CN.mdx
+++ b/packages/quiz/questions/whats-the-difference-between-call-and-apply/zh-CN.mdx
@@ -1,5 +1,5 @@
 ---
-title: "`.call`和`.apply`之间有什么区别？"
+title: '`.call`和`.apply`之间有什么区别？'
 ---
 
 `.call`和`.apply`都用于调用函数，而第一个参数将用作函数中`this`的值。 然而，`.call`以逗号分隔的参数作为下一个参数，而`.apply`则以一系列参数作为下一个参数。 记住这一点的一个简单方法是 C for `call` and comma-separated and A for `appy` and an array of arguments。
diff --git a/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/zh-CN.mdx b/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/zh-CN.mdx
index 1e4e1865c..ab1658893 100644
--- a/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/zh-CN.mdx
+++ b/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/zh-CN.mdx
@@ -28,6 +28,6 @@ if (document.getElementsByTagName) {
 
 真不推荐这样做。 功能检测才是万无一失的。
 
-## UA字符串
+## UA 字符串
 
-这是一个浏览器报告的字符串，允许网络协议对等者识别请求软件用户代理的应用程序类型、操作系统、软件供应商或软件版本。 它可以通过 `navigator.userAgent` 访问。 然而，该字符串解析起来很棘手，可以被欺骗。 例如，Chrome同时报告为Chrome和Safari。 所以要检测Safari，你必须检查Safari字符串和Chrome字符串的缺失。 避免使用此方法。
+这是一个浏览器报告的字符串，允许网络协议对等者识别请求软件用户代理的应用程序类型、操作系统、软件供应商或软件版本。 它可以通过 `navigator.userAgent` 访问。 然而，该字符串解析起来很棘手，可以被欺骗。 例如，Chrome 同时报告为 Chrome 和 Safari。 所以要检测 Safari，你必须检查 Safari 字符串和 Chrome 字符串的缺失。 避免使用此方法。
diff --git a/packages/quiz/questions/whats-the-difference-between-host-objects-and-native-objects/zh-CN.mdx b/packages/quiz/questions/whats-the-difference-between-host-objects-and-native-objects/zh-CN.mdx
index d4aab8d78..2bf0a665e 100644
--- a/packages/quiz/questions/whats-the-difference-between-host-objects-and-native-objects/zh-CN.mdx
+++ b/packages/quiz/questions/whats-the-difference-between-host-objects-and-native-objects/zh-CN.mdx
@@ -2,6 +2,6 @@
 title: 宿主对象和本地对象之间有什么区别？
 ---
 
-本地对象是由ECMAScript规范定义的JavaScript语言的一部分，如`String`、`Math`、`RegExp`、`Object`、`Function`等。
+本地对象是由 ECMAScript 规范定义的 JavaScript 语言的一部分，如`String`、`Math`、`RegExp`、`Object`、`Function`等。
 
-宿主对象由运行环境（浏览器或Node）提供，如`window`、`XMLHTTPRequest`等。
+宿主对象由运行环境（浏览器或 Node）提供，如`window`、`XMLHTTPRequest`等。
diff --git a/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/pt-BR.mdx b/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/pt-BR.mdx
index 4a29c168c..0af2e20bf 100644
--- a/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/pt-BR.mdx
+++ b/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/pt-BR.mdx
@@ -4,11 +4,11 @@ title: Qual é a diferença entre `inline` e `inline-block`?
 
 Vamos também comparar com `display: block` para completar.
 
-| Propriedade                            | `block`                                                                                                  | `inline-block`                                                                          | `inline`                                                                                                                                                                                                                              |
-| -------------------------------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Tamanho                                | Preenche a largura do contêiner pai.                                                                     | Depende do conteúdo.                                                                    | Depende do conteúdo.                                                                                                                                                                                                                  |
-| Posicionamento                         | Comece em uma nova linha e não tolera nenhum elemento HTML ao lado (exceto quando você adiciona `float`) | Flui juntamente com outros conteúdos e permite que outros elementos fiquem ao seu lado. | Flui juntamente com outros conteúdos e permite que outros elementos fiquem ao seu lado.                                                                                                                                               |
-| Pode especificar 'largura' e 'altura'  | Sim                                                                                                      | Sim                                                                                     | Não. Ignorará se já estiver definido.                                                                                                                                                                                                 |
-| Pode ser alinhado com `vertical-align` | Não                                                                                                      | Sim                                                                                     | Sim                                                                                                                                                                                                                                   |
-| Margem e Alinhamento                   | Todos os lados são respeitados.                                                                          | Todos os lados são respeitados.                                                         | Apenas os lados horizontais respeitados. Os lados verticais, se especificados, não afetam o layout. O espaço vertical que ocupa depende do `line-height`, mesmo que o `border` e `padding` apareçam visualmente em torno do conteúdo. |
-| Float                                  | -                                                                                                        | -                                                                                       | Torna-se como um elemento `block` onde você pode definir margens e preenchimentos verticais.                                                                                                                                          |
+| Propriedade | `block` | `inline-block` | `inline` |
+| --- | --- | --- | --- |
+| Tamanho | Preenche a largura do contêiner pai. | Depende do conteúdo. | Depende do conteúdo. |
+| Posicionamento | Comece em uma nova linha e não tolera nenhum elemento HTML ao lado (exceto quando você adiciona `float`) | Flui juntamente com outros conteúdos e permite que outros elementos fiquem ao seu lado. | Flui juntamente com outros conteúdos e permite que outros elementos fiquem ao seu lado. |
+| Pode especificar 'largura' e 'altura' | Sim | Sim | Não. Ignorará se já estiver definido. |
+| Pode ser alinhado com `vertical-align` | Não | Sim | Sim |
+| Margem e Alinhamento | Todos os lados são respeitados. | Todos os lados são respeitados. | Apenas os lados horizontais respeitados. Os lados verticais, se especificados, não afetam o layout. O espaço vertical que ocupa depende do `line-height`, mesmo que o `border` e `padding` apareçam visualmente em torno do conteúdo. |
+| Float | - | - | Torna-se como um elemento `block` onde você pode definir margens e preenchimentos verticais. |
diff --git a/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/zh-CN.mdx b/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/zh-CN.mdx
index 7fa0d4668..b7560ef89 100644
--- a/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/zh-CN.mdx
+++ b/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/zh-CN.mdx
@@ -1,14 +1,14 @@
 ---
-title: "`inline` 和 `inline-block`之间有什么区别？"
+title: '`inline` 和 `inline-block`之间有什么区别？'
 ---
 
 为了完整起见，让我们也与`display: block`进行比较。
 
-| 属性                      | `block`                                   | `inline-block`        | `inline`                                                                                       |
-| ----------------------- | ----------------------------------------- | --------------------- | ---------------------------------------------------------------------------------------------- |
-| 尺寸                      | 填充其父容器的宽度。                                | 取决于内容。                | 取决于内容。                                                                                         |
-| 位置                      | 在新的一行开始，并且不允许旁边有任何HTML元素（除了当你添加`float`时）。 | 与其他内容一起排列，并允许旁边有其他元素。 | 与其他内容一起排列，允许其他元素在旁边。                                                                           |
-| 可以指定 `width` 和 `height` | 是                                         | 是                     | 否. 如果设置，将忽略。                                                                                   |
-| 可以用 `vertical-align` 对齐 | 否                                         | 是                     | 是                                                                                              |
-| 外边距和内边距                 | 各方面都会被遵循。                                 | 各方面都会被遵循。             | 只有水平方向受到遵循。 垂直方向（如果指定的话）不影响布局。 它所占用的垂直空间取决于 `line-height`，即使 `border` 和 `padding` 在视觉上出现在内容周围。 |
-| 浮动                      | -                                         | -                     | 成为一个`block`元素，你可以在这里设置垂直外边距和内边距。                                                               |
+| 属性 | `block` | `inline-block` | `inline` |
+| --- | --- | --- | --- |
+| 尺寸 | 填充其父容器的宽度。 | 取决于内容。 | 取决于内容。 |
+| 位置 | 在新的一行开始，并且不允许旁边有任何 HTML 元素（除了当你添加`float`时）。 | 与其他内容一起排列，并允许旁边有其他元素。 | 与其他内容一起排列，允许其他元素在旁边。 |
+| 可以指定 `width` 和 `height` | 是 | 是 | 否. 如果设置，将忽略。 |
+| 可以用 `vertical-align` 对齐 | 否 | 是 | 是 |
+| 外边距和内边距 | 各方面都会被遵循。 | 各方面都会被遵循。 | 只有水平方向受到遵循。 垂直方向（如果指定的话）不影响布局。 它所占用的垂直空间取决于 `line-height`，即使 `border` 和 `padding` 在视觉上出现在内容周围。 |
+| 浮动 | - | - | 成为一个`block`元素，你可以在这里设置垂直外边距和内边距。 |
diff --git a/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/pt-BR.mdx b/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/pt-BR.mdx
index 6e83def74..9fafa6191 100644
--- a/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/pt-BR.mdx
+++ b/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/pt-BR.mdx
@@ -3,10 +3,10 @@ title: Qual é a diferença entre "resetting" e "normalizing" CSS?
 subtitle: Qual você escolheria e por quê?
 ---
 
-| Termo            | Definição                                                                                                                                                                                                                                                                   |
-| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Resetando**    | Redefinir tem o objetivo de remover toda a formatação padrão do navegador nos elementos. Por exemplo, as `margin`s, `padding`s, `font-size`s de todos os elementos são redefinidos para serem iguais. Você terá que redeclarar o estilo para elementos tipográficos comuns. |
-| **Normalizando** | Normalizar preserva estilos padrão úteis ao invés de tirar o estilo de tudo. Ele também corrige bugs de dependências comuns do navegador.                                                                                                                                   |
+| Termo | Definição |
+| --- | --- |
+| **Resetando** | Redefinir tem o objetivo de remover toda a formatação padrão do navegador nos elementos. Por exemplo, as `margin`s, `padding`s, `font-size`s de todos os elementos são redefinidos para serem iguais. Você terá que redeclarar o estilo para elementos tipográficos comuns. |
+| **Normalizando** | Normalizar preserva estilos padrão úteis ao invés de tirar o estilo de tudo. Ele também corrige bugs de dependências comuns do navegador. |
 
 ## Qual escolher e por quê?
 
diff --git a/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/zh-CN.mdx b/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/zh-CN.mdx
index 2ecd2d68c..af1300510 100644
--- a/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/zh-CN.mdx
+++ b/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/zh-CN.mdx
@@ -3,11 +3,11 @@ title: “ resetting”和“normalizing”CSS 之间有什么区别？
 subtitle: 你会选择哪一个，为什么？
 ---
 
-| 术语              | 定义                                                                                            |
-| --------------- | --------------------------------------------------------------------------------------------- |
-| **Resetting**   | Resetting是为了删除所有元素上默认的浏览器样式。 例如，`margin`, `padding`, `font-size`均重置为相同的。 你将不得不为常见的排版元素重新声明样式。 |
-| **Normalizing** | 正常化保留了有用的默认样式，而不是 "取消 "所有的样式。 它还纠正了常见浏览器依赖性的错误。                                               |
+| 术语 | 定义 |
+| --- | --- |
+| **Resetting** | Resetting 是为了删除所有元素上默认的浏览器样式。 例如，`margin`, `padding`, `font-size`均重置为相同的。 你将不得不为常见的排版元素重新声明样式。 |
+| **Normalizing** | 正常化保留了有用的默认样式，而不是 "取消 "所有的样式。 它还纠正了常见浏览器依赖性的错误。 |
 
 ## 选择哪一个，为什么？
 
-当你需要有一个非常定制的或非常规的网站设计，比如你需要做很多我自己的造型，不需要保留任何默认的造型时，可以选择Resetting。
+当你需要有一个非常定制的或非常规的网站设计，比如你需要做很多我自己的造型，不需要保留任何默认的造型时，可以选择 Resetting。
diff --git a/packages/quiz/questions/when-would-you-use-document-write/zh-CN.mdx b/packages/quiz/questions/when-would-you-use-document-write/zh-CN.mdx
index d77dccf6e..3a5766554 100644
--- a/packages/quiz/questions/when-would-you-use-document-write/zh-CN.mdx
+++ b/packages/quiz/questions/when-would-you-use-document-write/zh-CN.mdx
@@ -4,4 +4,4 @@ title: 您什么时候使用 `document.write()`？
 
 `document.write()`将一串文本写入由`document.open()`打开的文档流。 当`document.write()`在页面加载后被执行时，它将调用`document.open`来清除整个文档（`<head>`和`<body>`被移除！）。 并用给定的参数值替换内容。 因此，它通常被认为是危险的，容易被滥用。
 
-网上有一些答案，解释说`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()`被用于分析代码或[当你想包括只有在启用 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()”的情况下实现。
diff --git a/packages/quiz/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/zh-CN.mdx b/packages/quiz/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/zh-CN.mdx
index 0c8fabfb5..cc7716d2f 100644
--- a/packages/quiz/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/zh-CN.mdx
+++ b/packages/quiz/questions/why-is-extending-built-in-javascript-objects-not-a-good-idea/zh-CN.mdx
@@ -2,6 +2,6 @@
 title: 为什么扩展内置的 JavaScript 对象不是一个好主意？
 ---
 
-扩展内置/原生JavaScript对象意味着将属性/函数添加到其“原型”中。 虽然起初这似乎是一个好主意，但在实践中却是危险的。 想象一下，你的代码使用了几个库，通过添加相同的 `contains` 方法它们都扩展了 `Array.prototype` ， 实现将互相覆盖，如果这两种方法的行为不一致，你的代码将会被破坏。
+扩展内置/原生 JavaScript 对象意味着将属性/函数添加到其“原型”中。 虽然起初这似乎是一个好主意，但在实践中却是危险的。 想象一下，你的代码使用了几个库，通过添加相同的 `contains` 方法它们都扩展了 `Array.prototype` ， 实现将互相覆盖，如果这两种方法的行为不一致，你的代码将会被破坏。
 
-你可能想要扩展一个本地对象的唯一情况是，你想要创建一个polyfill，本质上是为一个方法提供你自己的实现，这个方法是JavaScript规范的一部分，但由于用户的浏览器是一个旧的浏览器，所以可能不存在。
+你可能想要扩展一个本地对象的唯一情况是，你想要创建一个 polyfill，本质上是为一个方法提供你自己的实现，这个方法是 JavaScript 规范的一部分，但由于用户的浏览器是一个旧的浏览器，所以可能不存在。
diff --git a/packages/quiz/questions/why-is-it-called-a-ternary-expression-what-does-the-word-ternary-indicate/zh-CN.mdx b/packages/quiz/questions/why-is-it-called-a-ternary-expression-what-does-the-word-ternary-indicate/zh-CN.mdx
index bd4f816cc..b53a180bc 100644
--- a/packages/quiz/questions/why-is-it-called-a-ternary-expression-what-does-the-word-ternary-indicate/zh-CN.mdx
+++ b/packages/quiz/questions/why-is-it-called-a-ternary-expression-what-does-the-word-ternary-indicate/zh-CN.mdx
@@ -2,4 +2,4 @@
 title: 为什么它被称为三元表达？"三元 "一词表示什么？
 ---
 
-"三元 "表示三，三元表达式接受三个操作数，即测试条件、"then" 表达式和 "else" 表达式。 三元表达式不是JavaScript特有的，我不知道为什么它甚至在这个列表中。
+"三元 "表示三，三元表达式接受三个操作数，即测试条件、"then" 表达式和 "else" 表达式。 三元表达式不是 JavaScript 特有的，我不知道为什么它甚至在这个列表中。
diff --git a/packages/quiz/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/metadata.json b/packages/quiz/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/metadata.json
index 0868c8e23..3132c858f 100644
--- a/packages/quiz/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/metadata.json
+++ b/packages/quiz/questions/why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it/metadata.json
@@ -5,9 +5,7 @@
   "premium": false,
   "duration": 5,
   "published": true,
-  "topics": [
-    "javascript"
-  ],
+  "topics": ["javascript"],
   "importance": "mid",
   "difficulty": "medium"
-}
\ No newline at end of file
+}
diff --git a/packages/quiz/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/packages/quiz/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 e99132397..2d2da6412 100644
--- a/packages/quiz/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/packages/quiz/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
@@ -2,4 +2,4 @@
 title: 为什么一般来说，让一个网站的全局范围保持原样，永远不可触及是个好主意？
 ---
 
-在浏览器中执行的JavaScript可以访问全局范围，如果每个人都使用全局命名空间来定义他们的变量，很可能会发生碰撞。 使用模块模式(IIFEs) 在本地命名空间中封装你的变量。
+在浏览器中执行的 JavaScript 可以访问全局范围，如果每个人都使用全局命名空间来定义他们的变量，很可能会发生碰撞。 使用模块模式(IIFEs) 在本地命名空间中封装你的变量。
diff --git a/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/zh-CN.mdx b/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/zh-CN.mdx
index 1b5fb6397..2f06734df 100644
--- a/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/zh-CN.mdx
+++ b/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/zh-CN.mdx
@@ -3,6 +3,6 @@ title: 你为什么要使用 `load` 事件？
 subtitle: 此事件是否有缺点？ 您是否知道任何替代方法，以及为什么要使用这些方法？
 ---
 
-`load`事件在文件加载过程结束时触发。 此刻，文档中的所有对象都在 DOM中，所有图片、脚本、链接和子框架都已完成加载。
+`load`事件在文件加载过程结束时触发。 此刻，文档中的所有对象都在 DOM 中，所有图片、脚本、链接和子框架都已完成加载。
 
 DOM 事件 `DOMContentLoaded` 将在 DOM 构建页面后触发，但不要等待其他资源完成加载。 在某些情况下，当你不需要在初始化前加载整个页面时，这是首选。
diff --git a/packages/quiz/questions/why-you-might-want-to-create-static-class-members/metadata.json b/packages/quiz/questions/why-you-might-want-to-create-static-class-members/metadata.json
index d75711e10..fd850259c 100644
--- a/packages/quiz/questions/why-you-might-want-to-create-static-class-members/metadata.json
+++ b/packages/quiz/questions/why-you-might-want-to-create-static-class-members/metadata.json
@@ -5,9 +5,7 @@
   "premium": false,
   "duration": 5,
   "published": true,
-  "topics": [
-    "javascript"
-  ],
+  "topics": ["javascript"],
   "importance": "low",
   "difficulty": "medium"
-}
\ No newline at end of file
+}
diff --git a/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/metadata.json b/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/metadata.json
index ba3ab5a9e..a0f6aca87 100644
--- a/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/metadata.json
+++ b/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/metadata.json
@@ -5,9 +5,7 @@
   "premium": false,
   "duration": 5,
   "published": true,
-  "topics": [
-    "html"
-  ],
+  "topics": ["html"],
   "importance": "mid",
   "difficulty": "medium"
-}
\ No newline at end of file
+}
diff --git a/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/pt-BR.mdx b/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/pt-BR.mdx
index 3f133a7e6..60c6fcc52 100644
--- a/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/pt-BR.mdx
+++ b/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/pt-BR.mdx
@@ -5,9 +5,9 @@ subtitle: Explique o processo que o navegador usa ao avaliar o conteúdo deste a
 
 Você usaria o atributo `srcset` quando desejar fornecer imagens diferentes aos usuários, dependendo da largura da tela de seus dispositivos - fornecer imagens de alta qualidade para dispositivos com tela Retina melhora a experiência do usuário, enquanto fornecer imagens de resolução mais baixa para dispositivos de baixo desempenho aumenta o desempenho e diminui o desperdício de dados (pois fornecer uma imagem maior não terá nenhuma diferença visível). Por exemplo: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` diz ao navegador para exibir o gráfico pequeno, médio ou grande `.jpg` dependendo da resolução do cliente. O primeiro valor é o nome da imagem e o segundo é a largura da imagem em pixels. Para uma largura de dispositivo de 320px, são feitos os seguintes cálculos:
 
--   500 / 320 = 1.5625
--   1000 / 320 = 3.125
--   2000 / 320 = 6.25
+- 500 / 320 = 1.5625
+- 1000 / 320 = 3.125
+- 2000 / 320 = 6.25
 
 Se a resolução do cliente for 1x, a 1.5625 é a mais próxima e a opção `500w` correspondente a `small.jpg` será selecionada pelo navegador.
 
diff --git a/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/zh-CN.mdx b/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/zh-CN.mdx
index 77bc05554..7a30b638b 100644
--- a/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/zh-CN.mdx
+++ b/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/zh-CN.mdx
@@ -3,14 +3,14 @@ title: 为什么你会在图片标签中使用 `srcset` 属性？
 subtitle: 解释一下浏览器在评估这个属性的内容时的过程。
 ---
 
-当你想根据用户的设备显示宽度向他们提供不同的图片时，你会使用`srcset`属性--向有视网膜显示的设备提供更高质量的图片，增强用户体验，而向低端设备提供低分辨率的图片，提高性能，减少数据浪费（因为提供更大的图片不会有任何可见的差别）。 例如：`<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` 指示浏览器根据客户端的分辨率显示大小、中等或大的 `.jpg` 图片。 第一个值是图片名称，第二个值是图片宽度像素。 对于宽度为320px的设备，计算如下：
+当你想根据用户的设备显示宽度向他们提供不同的图片时，你会使用`srcset`属性--向有视网膜显示的设备提供更高质量的图片，增强用户体验，而向低端设备提供低分辨率的图片，提高性能，减少数据浪费（因为提供更大的图片不会有任何可见的差别）。 例如：`<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` 指示浏览器根据客户端的分辨率显示大小、中等或大的 `.jpg` 图片。 第一个值是图片名称，第二个值是图片宽度像素。 对于宽度为 320px 的设备，计算如下：
 
--   500 / 320 = 1.5625
--   1000 / 320 = 3.125
--   2000 / 320 = 6.25
+- 500 / 320 = 1.5625
+- 1000 / 320 = 3.125
+- 2000 / 320 = 6.25
 
-如果客户端的分辨率是1x，1.5625是最接近的，`500w`对应的`small.jpg`将被浏览器选中。
+如果客户端的分辨率是 1x，1.5625 是最接近的，`500w`对应的`small.jpg`将被浏览器选中。
 
-如果分辨率是视网膜（2x），浏览器将使用高于最小分辨率的最接近的分辨率。 它不会选择500w(1.5625)，因为它大于1，图片看起来可能很差。 然后，浏览器将选择结果比率接近2的图片，即1000w（3.125）。
+如果分辨率是视网膜（2x），浏览器将使用高于最小分辨率的最接近的分辨率。 它不会选择 500w(1.5625)，因为它大于 1，图片看起来可能很差。 然后，浏览器将选择结果比率接近 2 的图片，即 1000w（3.125）。
 
 `srcset`解决的问题是，你想为窄屏幕设备提供较小的图片文件，因为它们不像桌面显示器那样需要巨大的图片--也可以选择你想为高分辨率/低分辨率屏幕提供不同分辨率的图片。
diff --git a/packages/system-design/contents/cheatsheet/pt-BR.mdx b/packages/system-design/contents/cheatsheet/pt-BR.mdx
index cbfbca2c0..c6351772a 100644
--- a/packages/system-design/contents/cheatsheet/pt-BR.mdx
+++ b/packages/system-design/contents/cheatsheet/pt-BR.mdx
@@ -23,9 +23,9 @@ seo_title: Guia rápido para entrevistas de design de sistema front-end
 
 ## Erros Comuns
 
--   Responder imediatamente à pergunta sem primeiro fazer perguntas e obter requisitos.
--   Abordar a pergunta de maneira desestruturada, indo em várias direções e deixando de abordar áreas importantes.
--   Insistir em apenas uma solução ou na melhor solução sem perceber que cada solução tem compensações.
--   Permanecer em silêncio o tempo todo e apenas pensar em suas próprias ideias.
--   Entrar em uma toca de coelho e gastar muito tempo em áreas não importantes.
--   Utilizar buzzwords sem conseguir explicá-los.
+- Responder imediatamente à pergunta sem primeiro fazer perguntas e obter requisitos.
+- Abordar a pergunta de maneira desestruturada, indo em várias direções e deixando de abordar áreas importantes.
+- Insistir em apenas uma solução ou na melhor solução sem perceber que cada solução tem compensações.
+- Permanecer em silêncio o tempo todo e apenas pensar em suas próprias ideias.
+- Entrar em uma toca de coelho e gastar muito tempo em áreas não importantes.
+- Utilizar buzzwords sem conseguir explicá-los.
diff --git a/packages/system-design/contents/cheatsheet/zh-CN.mdx b/packages/system-design/contents/cheatsheet/zh-CN.mdx
index 437dba8d7..ba3de600c 100644
--- a/packages/system-design/contents/cheatsheet/zh-CN.mdx
+++ b/packages/system-design/contents/cheatsheet/zh-CN.mdx
@@ -23,9 +23,9 @@ seo_title: 前端系统设计面试备忘单
 
 ## 常见错误
 
--   不先提问和收集需求，就直接回答问题。
--   以无结构的方式来解决问题，走了很多弯路，错过了重要领域。
--   坚持只提供一个解决方案或最佳解决方案，而忽略了每种解决方案的权衡。
--   默默无语的，只在头脑中思考。
--   沉迷于无关紧要的领域，花费太多时间。
--   使用行业黑话却无法解释。
+- 不先提问和收集需求，就直接回答问题。
+- 以无结构的方式来解决问题，走了很多弯路，错过了重要领域。
+- 坚持只提供一个解决方案或最佳解决方案，而忽略了每种解决方案的权衡。
+- 默默无语的，只在头脑中思考。
+- 沉迷于无关紧要的领域，花费太多时间。
+- 使用行业黑话却无法解释。
diff --git a/packages/system-design/contents/common-mistakes/zh-CN.mdx b/packages/system-design/contents/common-mistakes/zh-CN.mdx
index 0afbea4af..b4bb4cf47 100644
--- a/packages/system-design/contents/common-mistakes/zh-CN.mdx
+++ b/packages/system-design/contents/common-mistakes/zh-CN.mdx
@@ -15,9 +15,9 @@ seo_description: 避免这些候选人在回答系统设计面试问题时经常
 
 ## 非结构化地处理问题
 
-由于系统设计面试非常开放，没有明确定义的完成里程碑（与编码面试不同，你必须生成可工作的代码），因此一些候选人可能只是随意谈论他们想到的任何东西，而答案最终可能会出现在面试官印象中很混乱。 使用RADIO框架来帮助你。
+由于系统设计面试非常开放，没有明确定义的完成里程碑（与编码面试不同，你必须生成可工作的代码），因此一些候选人可能只是随意谈论他们想到的任何东西，而答案最终可能会出现在面试官印象中很混乱。 使用 RADIO 框架来帮助你。
 
-在面试开始时，将RADIO框架的每个步骤写在白板上，并确保在面试结束时你已经充分涵盖了每个部分。 请注意，你不必按顺序完成每个部分，如果你错过了某些部分，可以随时重新访问以前的部分。
+在面试开始时，将 RADIO 框架的每个步骤写在白板上，并确保在面试结束时你已经充分涵盖了每个部分。 请注意，你不必按顺序完成每个部分，如果你错过了某些部分，可以随时重新访问以前的部分。
 
 ## 坚持只有一种或最佳的解决方案
 
@@ -37,6 +37,6 @@ seo_description: 避免这些候选人在回答系统设计面试问题时经常
 
 ## 使用无法解释的流行语
 
-不要使用无法解释的流行语或术语。 可能会有一些很酷的术语，如“虚拟DOM”，“DOM协调”，“部分水化”，“流模式服务器端渲染”，如果它们与当前主题相关，则可以使用！
+不要使用无法解释的流行语或术语。 可能会有一些很酷的术语，如“虚拟 DOM”，“DOM 协调”，“部分水化”，“流模式服务器端渲染”，如果它们与当前主题相关，则可以使用！
 
 但是，如果你这样做，请确保你能够解释你刚刚使用的术语，因为面试官可能会进一步探索以测试你的知识。 如果你无法解释你刚刚使用的术语，这是一个红色的信号。
diff --git a/packages/system-design/contents/evaluation-axes/pt-BR.mdx b/packages/system-design/contents/evaluation-axes/pt-BR.mdx
index eac628cde..ba0aef3e0 100644
--- a/packages/system-design/contents/evaluation-axes/pt-BR.mdx
+++ b/packages/system-design/contents/evaluation-axes/pt-BR.mdx
@@ -11,11 +11,11 @@ Esta seção lista alguns dos comportamentos que os candidatos devem demonstrar.
 
 ## Exploração de Problemas
 
--   Demonstrou um entendimento completo do problema.
--   Explorou suficientemente os requisitos fazendo perguntas pertinentes de esclarecimento para minimizar ambiguidades.
--   Reuniu os requisitos funcionais e não funcionais do problema.
--   Definiu o escopo do problema.
--   Identificou os aspectos importantes do problema para focar e abordar.
+- Demonstrou um entendimento completo do problema.
+- Explorou suficientemente os requisitos fazendo perguntas pertinentes de esclarecimento para minimizar ambiguidades.
+- Reuniu os requisitos funcionais e não funcionais do problema.
+- Definiu o escopo do problema.
+- Identificou os aspectos importantes do problema para focar e abordar.
 
 <div className="mt-6 space-x-1 space-y-1 text-xs">
   <strong className="font-medium">Seções relevantes do framework:</strong>
@@ -24,12 +24,12 @@ Esta seção lista alguns dos comportamentos que os candidatos devem demonstrar.
 
 ## Arquitetura
 
--   Desenvolveu uma arquitetura que resolveu o problema como um todo de forma suficiente.
--   Dividiu o problema em partes menores e independentes, com uma granularidade adequada.
--   Identificou os componentes do sistema e definiu suas responsabilidades de forma clara.
--   Articulou como esses componentes irão funcionar juntos e definiu/descreveu a API entre esses componentes.
--   Desenvolveu uma arquitetura que pode ser colocada em prática.
--   Desenvolveu uma arquitetura com escalabilidade e reutilização em mente, uma que possa ser estendida para suportar requisitos futuros.
+- Desenvolveu uma arquitetura que resolveu o problema como um todo de forma suficiente.
+- Dividiu o problema em partes menores e independentes, com uma granularidade adequada.
+- Identificou os componentes do sistema e definiu suas responsabilidades de forma clara.
+- Articulou como esses componentes irão funcionar juntos e definiu/descreveu a API entre esses componentes.
+- Desenvolveu uma arquitetura que pode ser colocada em prática.
+- Desenvolveu uma arquitetura com escalabilidade e reutilização em mente, uma que possa ser estendida para suportar requisitos futuros.
 
 <div className="mt-6 space-x-1 space-y-1 text-xs">
   <strong className="font-medium">Seções relevantes do framework:</strong>
@@ -38,9 +38,9 @@ Esta seção lista alguns dos comportamentos que os candidatos devem demonstrar.
 
 ## Proficiência técnica
 
--   Demonstrou conhecimento técnico e proficiência nas fundamentos de front-end, tecnologias comuns e APIs.
--   Capaz de aprofundar-se em áreas específicas do front-end quando relevantes para o problema.
--   Identificou áreas que precisam de atenção especial e abordou-as propondo soluções e analisando os compromissos envolvidos.
+- Demonstrou conhecimento técnico e proficiência nas fundamentos de front-end, tecnologias comuns e APIs.
+- Capaz de aprofundar-se em áreas específicas do front-end quando relevantes para o problema.
+- Identificou áreas que precisam de atenção especial e abordou-as propondo soluções e analisando os compromissos envolvidos.
 
 As áreas específicas do domínio de front-end incluem Performance, Networking, HTML/CSS, Acessibilidade, Internacionalização, Segurança, Escalabilidade, etc
 
@@ -51,25 +51,26 @@ As áreas específicas do domínio de front-end incluem Performance, Networking,
 
 ## Exploração e Comprometimentos
 
--   Ofereceu várias soluções possíveis para os problemas em questão e explicou os prós e contras de cada solução.
-    -   O "problema" aqui não se refere necessariamente à questão de design do sistema.
-    -   Ao resolver a pergunta dada, haverá problemas menores para resolver e perguntas para responder, e cada problema/pergunta menor pode ter várias soluções e escolhas a serem feitas.
--   Explicou a adequação das soluções considerando o contexto e os requisitos, e forneceu recomendações para o contexto da pergunta.
-    -   Não insista que só existe uma solução possível. Boas perguntas geralmente têm algumas soluções possíveis, onde a adequação de cada uma depende do contexto.
-    -   Mesmo que as outras soluções sejam claramente e obviamente ruins, ainda mencione-as e explique brevemente por que são inadequadas.
+- Ofereceu várias soluções possíveis para os problemas em questão e explicou os prós e contras de cada solução.
+  - O "problema" aqui não se refere necessariamente à questão de design do sistema.
+  - Ao resolver a pergunta dada, haverá problemas menores para resolver e perguntas para responder, e cada problema/pergunta menor pode ter várias soluções e escolhas a serem feitas.
+- Explicou a adequação das soluções considerando o contexto e os requisitos, e forneceu recomendações para o contexto da pergunta.
+  - Não insista que só existe uma solução possível. Boas perguntas geralmente têm algumas soluções possíveis, onde a adequação de cada uma depende do contexto.
+  - Mesmo que as outras soluções sejam claramente e obviamente ruins, ainda mencione-as e explique brevemente por que são inadequadas.
 
 <div className="mt-6 space-x-1 space-y-1 text-xs">
   <strong className="font-medium">Seções relevantes do framework:</strong>
- Exploração de Requisitos, Modelo de Dados, Definição de Interface, Otimizações e Análise Detalhada
+  Exploração de Requisitos, Modelo de Dados, Definição de Interface, Otimizações
+  e Análise Detalhada
 </div>
 
 ## Sentido de Produto e Experiência do Usuário (UX)
 
 Seções relevantes do framework: **Otimizações e Aprofundamento**
 
--   Propôs uma solução robusta que estabelece as bases de um bom produto.
--   Considerou a experiência do usuário ao responder, incluindo estados de carregamento, desempenho (percebido ou real), compatibilidade com dispositivos móveis, facilidade de uso do teclado, entre outros aspectos.
--   Considerou casos de erro e sugeriu formas de lidar com eles.
+- Propôs uma solução robusta que estabelece as bases de um bom produto.
+- Considerou a experiência do usuário ao responder, incluindo estados de carregamento, desempenho (percebido ou real), compatibilidade com dispositivos móveis, facilidade de uso do teclado, entre outros aspectos.
+- Considerou casos de erro e sugeriu formas de lidar com eles.
 
 <div className="mt-6 space-x-1 space-y-1 text-xs">
   <strong className="font-medium">Seções relevantes do framework:</strong>
@@ -78,25 +79,26 @@ Seções relevantes do framework: **Otimizações e Aprofundamento**
 
 ## Comunicação e Colaboração
 
--   Transmitiu seus pensamentos e ideias de forma clara e concisa.
--   Explicou conceitos complexos com facilidade.
--   Envolvido o entrevistador durante a sessão, fez boas perguntas e buscou opiniões quando relevante.
--   Aberto a feedback do entrevistador e incorpora o feedback para aprimorar suas soluções.
+- Transmitiu seus pensamentos e ideias de forma clara e concisa.
+- Explicou conceitos complexos com facilidade.
+- Envolvido o entrevistador durante a sessão, fez boas perguntas e buscou opiniões quando relevante.
+- Aberto a feedback do entrevistador e incorpora o feedback para aprimorar suas soluções.
 
 <div className="mt-6 space-x-1 space-y-1 text-xs">
   <strong className="font-medium">Seções relevantes do framework:</strong>
-  Arquitetura/Design de alto nível, Modelo de dados, Definição de interface, Otimizações e Aprofundamento
+  Arquitetura/Design de alto nível, Modelo de dados, Definição de interface, Otimizações
+  e Aprofundamento
 </div>
 
 ## Resumo
 
 Aqui está uma tabela resumindo como os eixos de avaliação podem ser mapeados para as várias seções do **RADIO framework**: Exploração de Requisitos, Arquitetura/Design de Alto Nível, Modelo de Dados, Definição de Interface, Otimizações e Aprofundamento.
 
-| Eixo                                |  R  |  A  |  D  |  I  |  O  |
-| ----------------------------------- | :-: | :-: | :-: | :-: | :-: |
-| Exploração de Problemas             |  ✅  |  -  |  -  |  -  |  -  |
-| Arquitetura                         |  -  |  ✅  |  ✅  |  ✅  |  -  |
-| Proficiência Técnica                |  -  |  ✅  |  -  |  -  |  ✅  |
-| Exploração e Compromissos           |  -  |  ✅  |  ✅  |  ✅  |  ✅  |
-| Sentido de produto e UX             |  -  |  -  |  -  |  -  |  ✅  |
-| Comunicação e Colaboração           |  ✅  |  ✅  |  ✅  |  ✅  |  ✅  |
+| Eixo                      |  R  |  A  |  D  |  I  |  O  |
+| ------------------------- | :-: | :-: | :-: | :-: | :-: |
+| Exploração de Problemas   | ✅  |  -  |  -  |  -  |  -  |
+| Arquitetura               |  -  | ✅  | ✅  | ✅  |  -  |
+| Proficiência Técnica      |  -  | ✅  |  -  |  -  | ✅  |
+| Exploração e Compromissos |  -  | ✅  | ✅  | ✅  | ✅  |
+| Sentido de produto e UX   |  -  |  -  |  -  |  -  | ✅  |
+| Comunicação e Colaboração | ✅  | ✅  | ✅  | ✅  | ✅  |
diff --git a/packages/system-design/contents/evaluation-axes/zh-CN.mdx b/packages/system-design/contents/evaluation-axes/zh-CN.mdx
index 79e6c9d85..862ca2641 100644
--- a/packages/system-design/contents/evaluation-axes/zh-CN.mdx
+++ b/packages/system-design/contents/evaluation-axes/zh-CN.mdx
@@ -11,11 +11,11 @@ seo_description: 了解谷歌、亚马逊、Meta、微软和其他科技公司
 
 ## 问题探讨
 
--   显示出对问题的透彻理解。
--   通过提出相关的澄清性问题，对需求进行充分的探讨，以最大限度地减少歧义。
--   收集问题的功能性和非功能性需求。
--   确定问题的范围。
--   确定需要关注和解决的问题的重要方面。
+- 显示出对问题的透彻理解。
+- 通过提出相关的澄清性问题，对需求进行充分的探讨，以最大限度地减少歧义。
+- 收集问题的功能性和非功能性需求。
+- 确定问题的范围。
+- 确定需要关注和解决的问题的重要方面。
 
 <div className="mt-6 space-x-1 space-y-1 text-xs">
   <strong className="font-medium">相关框架部分:</strong>
@@ -24,12 +24,12 @@ seo_description: 了解谷歌、亚马逊、Meta、微软和其他科技公司
 
 ## 架构
 
--   开发出一种能够充分解决整个问题的架构。
--   将问题分解成适当粒度的独立小部分。
--   确定系统的组成部分并明确其职责。
--   阐明这些组件将如何协同工作，并定义/描述这些组件之间的API。
--   开发可付诸实施的架构。
--   开发的架构具有可扩展性和可重用性，可扩展以支持未来需求。
+- 开发出一种能够充分解决整个问题的架构。
+- 将问题分解成适当粒度的独立小部分。
+- 确定系统的组成部分并明确其职责。
+- 阐明这些组件将如何协同工作，并定义/描述这些组件之间的 API。
+- 开发可付诸实施的架构。
+- 开发的架构具有可扩展性和可重用性，可扩展以支持未来需求。
 
 <div className="mt-6 space-x-1 space-y-1 text-xs">
   <strong className="font-medium">相关框架部分:</strong>
@@ -38,9 +38,9 @@ seo_description: 了解谷歌、亚马逊、Meta、微软和其他科技公司
 
 ## 技术能力
 
--   熟练掌握前端基础知识、常用技术和API。
--   能够深入到与问题相关的特定前端领域。
--   确定需要特别关注的领域，并通过提出解决方案和分析其利弊得失来解决这些问题。
+- 熟练掌握前端基础知识、常用技术和 API。
+- 能够深入到与问题相关的特定前端领域。
+- 确定需要特别关注的领域，并通过提出解决方案和分析其利弊得失来解决这些问题。
 
 前端领域包括性能、网络、HTML/CSS、可访问性、国际化、安全性、可扩展性等。
 
@@ -51,12 +51,12 @@ seo_description: 了解谷歌、亚马逊、Meta、微软和其他科技公司
 
 ## 探索与权衡
 
--   针对当前问题提出各种可能的解决方案，并解释每种解决方案的利弊。
-    -   这里的 "问题" 并不一定是指给定的系统设计问题。
-    -   在解决给定的问题时，会有更小的问题需要解决/回答，每个小问题都有不同的解决方案和选择。
--   根据背景和要求解释了解决方案的适用性，并针对问题背景提出了建议。
-    -   不要坚持只有一种可能的解决方案。 好的问题通常有几种可能的解决方案，每种解决方案是否合适取决于具体情况。
-    -   即使其他解决方案明显不好，也要提及并简要解释为什么不好。
+- 针对当前问题提出各种可能的解决方案，并解释每种解决方案的利弊。
+  - 这里的 "问题" 并不一定是指给定的系统设计问题。
+  - 在解决给定的问题时，会有更小的问题需要解决/回答，每个小问题都有不同的解决方案和选择。
+- 根据背景和要求解释了解决方案的适用性，并针对问题背景提出了建议。
+  - 不要坚持只有一种可能的解决方案。 好的问题通常有几种可能的解决方案，每种解决方案是否合适取决于具体情况。
+  - 即使其他解决方案明显不好，也要提及并简要解释为什么不好。
 
 <div className="mt-6 space-x-1 space-y-1 text-xs">
   <strong className="font-medium">相关框架部分:</strong>
@@ -67,9 +67,9 @@ seo_description: 了解谷歌、亚马逊、Meta、微软和其他科技公司
 
 相关框架章节：**优化和深入研究**
 
--   提出了一个强大的解决方案，为良好的产品奠定了基础。
--   回答时考虑用户体验：加载状态、性能（感知或实际）、移动友好性、键盘友好性等。
--   考虑错误案例并建议处理方法。
+- 提出了一个强大的解决方案，为良好的产品奠定了基础。
+- 回答时考虑用户体验：加载状态、性能（感知或实际）、移动友好性、键盘友好性等。
+- 考虑错误案例并建议处理方法。
 
 <div className="mt-6 space-x-1 space-y-1 text-xs">
   <strong className="font-medium">相关框架部分:</strong>
@@ -78,10 +78,10 @@ seo_description: 了解谷歌、亚马逊、Meta、微软和其他科技公司
 
 ## 沟通与合作
 
--   简明扼要地表达自己的想法和观点。
--   轻松解释复杂概念。
--   在会议期间与面试官互动，提出好的问题并在相关情况下征求意见。
--   乐于接受面试官的反馈意见，并根据反馈意见完善自己的解决方案。
+- 简明扼要地表达自己的想法和观点。
+- 轻松解释复杂概念。
+- 在会议期间与面试官互动，提出好的问题并在相关情况下征求意见。
+- 乐于接受面试官的反馈意见，并根据反馈意见完善自己的解决方案。
 
 <div className="mt-6 space-x-1 space-y-1 text-xs">
   <strong className="font-medium">相关框架部分:</strong>
@@ -90,13 +90,13 @@ seo_description: 了解谷歌、亚马逊、Meta、微软和其他科技公司
 
 ## 总结
 
-下面的表格总结了如何将评估轴映射到**RADIO框架**的各个部分：需求探索（Requirements Exploration）、架构/高层设计（Architecture/High-level Design）、数据模型（Data Model）、接口定义（Interface Definition）、优化和深度挖掘（Optimizations and Deep Dive）。
+下面的表格总结了如何将评估轴映射到**RADIO 框架**的各个部分：需求探索（Requirements Exploration）、架构/高层设计（Architecture/High-level Design）、数据模型（Data Model）、接口定义（Interface Definition）、优化和深度挖掘（Optimizations and Deep Dive）。
 
-| 轴                            |  R  |  A  |  D  |  I  |  O  |
-| ---------------------------- | :-: | :-: | :-: | :-: | :-: |
-| 问题探讨                         |  ✅  |  -  |  -  |  -  |  -  |
-| 架构                           |  -  |  ✅  |  ✅  |  ✅  |  -  |
-| 技术能力                         |  -  |  ✅  |  -  |  -  |  ✅  |
-| 探索与权衡                        |  -  |  ✅  |  ✅  |  ✅  |  ✅  |
-| 产品和用户体验意识                    |  -  |  -  |  -  |  -  |  ✅  |
-| 沟通与合作                        |  ✅  |  ✅  |  ✅  |  ✅  |  ✅  |
+| 轴                 |  R  |  A  |  D  |  I  |  O  |
+| ------------------ | :-: | :-: | :-: | :-: | :-: |
+| 问题探讨           | ✅  |  -  |  -  |  -  |  -  |
+| 架构               |  -  | ✅  | ✅  | ✅  |  -  |
+| 技术能力           |  -  | ✅  |  -  |  -  | ✅  |
+| 探索与权衡         |  -  | ✅  | ✅  | ✅  | ✅  |
+| 产品和用户体验意识 |  -  |  -  |  -  |  -  | ✅  |
+| 沟通与合作         | ✅  | ✅  | ✅  | ✅  | ✅  |
diff --git a/packages/system-design/contents/framework/pt-BR.mdx b/packages/system-design/contents/framework/pt-BR.mdx
index b6d1c5294..d8c6d7af2 100644
--- a/packages/system-design/contents/framework/pt-BR.mdx
+++ b/packages/system-design/contents/framework/pt-BR.mdx
@@ -41,8 +41,8 @@ Vamos supor que você não tenha esclarecido em quais partes do produto focar, a
 
 Em primeiro lugar, o que são requisitos funcionais e não funcionais?
 
--   **Requisitos funcionais**: Requisitos básicos do produto de forma que o produto não possa funcionar sem eles. Isso geralmente se refere à capacidade do usuário de concluir corretamente as principais etapas do fluxo.
--   **Requisitos não funcionais**: São requisitos que são considerados melhorias para o produto, mas não são estritamente necessários para que o produto seja utilizável. Ou seja, o produto ainda pode ser utilizado sem esses requisitos. Isso inclui desempenho (quão rápido a página carrega, quão rápido a interação ocorre), escalabilidade (quantos itens podem estar presentes na página), boa experiência do usuário, entre outros.
+- **Requisitos funcionais**: Requisitos básicos do produto de forma que o produto não possa funcionar sem eles. Isso geralmente se refere à capacidade do usuário de concluir corretamente as principais etapas do fluxo.
+- **Requisitos não funcionais**: São requisitos que são considerados melhorias para o produto, mas não são estritamente necessários para que o produto seja utilizável. Ou seja, o produto ainda pode ser utilizado sem esses requisitos. Isso inclui desempenho (quão rápido a página carrega, quão rápido a interação ocorre), escalabilidade (quantos itens podem estar presentes na página), boa experiência do usuário, entre outros.
 
 Existem duas maneiras pelas quais você pode obter a resposta para essa pergunta:
 
@@ -59,16 +59,16 @@ Você deve esclarecer os recursos principais antecipadamente e projetar para ele
 
 ### Outras questões:
 
--   Quais dispositivos/plataformas (desktop, tablet, mobile) precisam ser suportados?
--   O suporte offline é necessário?
--   Quem são os principais usuários do produto?
--   Quais são os requisitos de desempenho, se houver? (Requisitos de desempenho geralmente se enquadram nos requisitos não funcionais.)
+- Quais dispositivos/plataformas (desktop, tablet, mobile) precisam ser suportados?
+- O suporte offline é necessário?
+- Quem são os principais usuários do produto?
+- Quais são os requisitos de desempenho, se houver? (Requisitos de desempenho geralmente se enquadram nos requisitos não funcionais.)
 
 A lista acima deve fornecer uma boa lista inicial de perguntas, mas não é uma lista exaustiva! Problemas diferentes exigirão que você faça perguntas específicas do domínio, o que abordaremos nos estudos de caso.
 
 Recomenda-se que você registre os requisitos acordados em algum lugar para poder consultá-los durante toda a entrevista e garantir que tenha abordado todos eles.
 
-* * *
+---
 
 ## Arquitetura/Design de Alto Nível
 
@@ -82,15 +82,15 @@ Diagramas são seus amigos nesse caso. Cada componente pode ser representado usa
 
 Aqui estão alguns exemplos de componentes/módulos comumente encontrados em um design de front-end de alto nível:
 
--   **Servidor**: Em entrevistas de design de sistemas front-end, podemos tratar o servidor como uma caixa preta e assumir que ele expõe algumas APIs que você pode chamar por meio de HTTP/WebSockets.
--   **View**: Isso representa o que o usuário vê e geralmente contém subvisualizações menores dentro dele. Pode conter estados exclusivos do lado do cliente.
--   **Controlador**: O módulo que responde às interações do usuário e processa os dados do armazenamento/modelo em um formato esperado pela visualização. Esse módulo nem sempre é necessário se a aplicação for pequena e não houver muita troca de dados entre os módulos.
--   **Store do Modelo/Cliente**: Onde os dados estão. Os armazenamentos contêm os dados que serão apresentados ao usuário por meio das visualizações e, em um contexto de entrevista, os armazenamentos tendem a abranger toda a aplicação. Na realidade, é possível ter vários armazenamentos dentro de uma aplicação, e os armazenamentos podem conter outros armazenamentos.
+- **Servidor**: Em entrevistas de design de sistemas front-end, podemos tratar o servidor como uma caixa preta e assumir que ele expõe algumas APIs que você pode chamar por meio de HTTP/WebSockets.
+- **View**: Isso representa o que o usuário vê e geralmente contém subvisualizações menores dentro dele. Pode conter estados exclusivos do lado do cliente.
+- **Controlador**: O módulo que responde às interações do usuário e processa os dados do armazenamento/modelo em um formato esperado pela visualização. Esse módulo nem sempre é necessário se a aplicação for pequena e não houver muita troca de dados entre os módulos.
+- **Store do Modelo/Cliente**: Onde os dados estão. Os armazenamentos contêm os dados que serão apresentados ao usuário por meio das visualizações e, em um contexto de entrevista, os armazenamentos tendem a abranger toda a aplicação. Na realidade, é possível ter vários armazenamentos dentro de uma aplicação, e os armazenamentos podem conter outros armazenamentos.
 
 Outros aspectos a serem considerados ao definir as responsabilidades dos componentes:
 
--   **Separação de Responsabilidades**: Os componentes devem ser modulares e servir para encapsular um conjunto de funcionalidades e dados. Considere o propósito/funcionalidade de cada componente, quais dados ele deve conter e como ele pode servir ao restante do sistema (o que ele pode fazer pelos outros componentes).
--   Onde a computação deve ocorrer: Se for necessária alguma quantidade de computação (por exemplo, filtrar resultados com base em um termo de pesquisa, calcular o valor total de um carrinho), o trabalho deve ser feito no servidor ou no cliente? Existem compensações para cada abordagem, e a decisão depende tanto da pergunta específica quanto do contexto em que ela é aplicada.
+- **Separação de Responsabilidades**: Os componentes devem ser modulares e servir para encapsular um conjunto de funcionalidades e dados. Considere o propósito/funcionalidade de cada componente, quais dados ele deve conter e como ele pode servir ao restante do sistema (o que ele pode fazer pelos outros componentes).
+- Onde a computação deve ocorrer: Se for necessária alguma quantidade de computação (por exemplo, filtrar resultados com base em um termo de pesquisa, calcular o valor total de um carrinho), o trabalho deve ser feito no servidor ou no cliente? Existem compensações para cada abordagem, e a decisão depende tanto da pergunta específica quanto do contexto em que ela é aplicada.
 
 É importante perceber que nem todos os componentes comuns mencionados acima serão relevantes e necessários para todas as perguntas, isso depende do produto em questão.
 
@@ -104,17 +104,16 @@ Aqui está um exemplo de diagrama de arquitetura para a pergunta do News Feed, d
 
 #### Responsabilidades do Componente
 
--   **Servidor**: Fornece os dados do feed e disponibiliza uma API HTTP para a criação de novas postagens no feed.
--   **Controlador**: Controla o fluxo de dados dentro da aplicação e faz solicitações de rede para o servidor.
--   **Armazenamento do Cliente**: Armazena dados necessários em toda a aplicação. No contexto de um feed de notícias, a maioria dos dados armazenados será originada do servidor e necessária para a interface do feed.
--   **Interface do Feed**: Contém uma lista de postagens do feed e a interface para compor novas postagens.
-    -   **Feed Post**: Mostra os dados de uma publicação e contém botões para interagir com a publicação (como /react/share/comment).
-    -   **Compositor de Postagens**: Interface do usuário para os usuários criarem novas postagens no feed.
+- **Servidor**: Fornece os dados do feed e disponibiliza uma API HTTP para a criação de novas postagens no feed.
+- **Controlador**: Controla o fluxo de dados dentro da aplicação e faz solicitações de rede para o servidor.
+- **Armazenamento do Cliente**: Armazena dados necessários em toda a aplicação. No contexto de um feed de notícias, a maioria dos dados armazenados será originada do servidor e necessária para a interface do feed.
+- **Interface do Feed**: Contém uma lista de postagens do feed e a interface para compor novas postagens.
+  - **Feed Post**: Mostra os dados de uma publicação e contém botões para interagir com a publicação (como /react/share/comment).
+  - **Compositor de Postagens**: Interface do usuário para os usuários criarem novas postagens no feed.
 
-Algumas ferramentas de desenho gratuitas comuns que você pode ser solicitado a usar incluem
- [diagrams.net](https://app.diagrams.net/) e [Excalidraw](https://excalidraw.com/). Seria uma boa ideia se familiarizar com essas ferramentas antecipadamente.
+Algumas ferramentas de desenho gratuitas comuns que você pode ser solicitado a usar incluem [diagrams.net](https://app.diagrams.net/) e [Excalidraw](https://excalidraw.com/). Seria uma boa ideia se familiarizar com essas ferramentas antecipadamente.
 
-* * *
+---
 
 ## Modelo de Dados
 
@@ -132,8 +131,8 @@ Dados que se originam no servidor, geralmente de um banco de dados, e são desti
 
 Dados exclusivos do cliente, também comumente conhecidos como estado, são dados que apenas precisam estar no cliente e não precisam ser enviados para o servidor para serem gravados no banco de dados. Os dados do cliente podem ser subdivididos em dois:
 
--   **Dados a serem persistidos**: Normalmente, entrada do usuário, como dados inseridos em campos de formulário. Esses dados geralmente precisam ser enviados para o servidor e salvos em um banco de dados para que sejam úteis.
--   Dados efêmeros: Estado temporário que dura por um curto período de tempo. Exemplos comuns incluem o estado de validação de um formulário, a aba atual, se uma seção está expandida, etc. Normalmente, é aceitável perder esses dados quando a guia do navegador é fechada.
+- **Dados a serem persistidos**: Normalmente, entrada do usuário, como dados inseridos em campos de formulário. Esses dados geralmente precisam ser enviados para o servidor e salvos em um banco de dados para que sejam úteis.
+- Dados efêmeros: Estado temporário que dura por um curto período de tempo. Exemplos comuns incluem o estado de validação de um formulário, a aba atual, se uma seção está expandida, etc. Normalmente, é aceitável perder esses dados quando a guia do navegador é fechada.
 
 Ao listar os campos de dados, seria útil identificar que tipo de dados esse campo é, se é um dado originado pelo servidor ou apenas pelo cliente.
 
@@ -141,18 +140,18 @@ Ao listar os campos de dados, seria útil identificar que tipo de dados esse cam
 
 Aqui está um exemplo básico de modelo de dados para as várias entidades usando a pergunta [Feed de notícias](/questions/system-design/news-feed-facebook).
 
-| Fonte                        | Entidade  | Pertence a                                 | Campos                                                                   |
-| ---------------------------- | --------- | ------------------------------------------ | ------------------------------------------------------------------------ |
-| Servidor                     | `Post`    | Postagem do Feed                           | `id`, `created_time`, `content`, `image`, `author` (`User`), `reactions` |
-| Servidor                     | `Feed`    | Interface do Feed                          | `posts` (lista de `Posts`s), `pagination` (metadados de paginação)       |
-| Servidor                     | `User`    | Store do cliente                           | `id`, `nome`, `profile_photo_url`                                        |
-| Entrada do usuário (cliente) | `NewPost` | Interface do Usuário (UI) do Feed Composer | `message`, `image`                                                       |
+| Fonte | Entidade | Pertence a | Campos |
+| --- | --- | --- | --- |
+| Servidor | `Post` | Postagem do Feed | `id`, `created_time`, `content`, `image`, `author` (`User`), `reactions` |
+| Servidor | `Feed` | Interface do Feed | `posts` (lista de `Posts`s), `pagination` (metadados de paginação) |
+| Servidor | `User` | Store do cliente | `id`, `nome`, `profile_photo_url` |
+| Entrada do usuário (cliente) | `NewPost` | Interface do Usuário (UI) do Feed Composer | `message`, `image` |
 
 Dependendo de quão longe você avança na pergunta e de como os requisitos evoluíram e cresceram durante a entrevista, você pode precisar adicionar mais campos. É um processo dinâmico e iterativo.
 
 Você pode querer escrever esses campos próximos aos componentes que os possuem no seu diagrama de arquitetura.
 
-* * *
+---
 
 ## Definição de Interface (API)
 
@@ -162,21 +161,21 @@ Você pode querer escrever esses campos próximos aos componentes que os possuem
 
 Com os componentes e dados dentro de cada componente, podemos prosseguir para discutir a interface (APIs) entre os componentes. API é um termo sobrecarregado e geralmente se refere ao protocolo pelo qual os componentes de software se comunicam e solicitam/enviam dados entre si. Client and server communicate via network layer APIs (HTTP/WebSockets). Componentes do cliente geralmente se comunicam por meio de funções no tempo de execução do navegador. Todas as APIs têm três coisas em comum, quer estejam entre o servidor e o cliente ou entre componentes do cliente:
 
-| Partes de uma API     | Servidor-Cliente                          | Client-Client              |
-| --------------------- | ----------------------------------------- | -------------------------- |
-| Nome e funcionalidade | Caminho HTTP                              | Função JavaScript          |
-| Parâmetros            | Parâmetros HTTP GET e POST                | Parâmetros da função       |
-| Valor de retorno      | Resposta HTTP, geralmente no formato JSON | Valor de retorno da função |
+| Partes de uma API | Servidor-Cliente | Client-Client |
+| --- | --- | --- |
+| Nome e funcionalidade | Caminho HTTP | Função JavaScript |
+| Parâmetros | Parâmetros HTTP GET e POST | Parâmetros da função |
+| Valor de retorno | Resposta HTTP, geralmente no formato JSON | Valor de retorno da função |
 
 ### Exemplo de API de Servidor-Cliente
 
 Usando o exemplo [News Feed](/questions/system-design/news-feed-facebook) mais uma vez, nós temos uma API de servidor que permite que o cliente busque os últimos posts de feeds.
 
-| Campo          | Valor                                           |
-| -------------- | ----------------------------------------------- |
-| Método HTTP    | `GET`                                           |
-| Caminho        | `/feed`                                         |
-| Descrição      | Recupera os resultados do feed para um usuário. |
+| Campo       | Valor                                           |
+| ----------- | ----------------------------------------------- |
+| Método HTTP | `GET`                                           |
+| Caminho     | `/feed`                                         |
+| Descrição   | Recupera os resultados do feed para um usuário. |
 
 #### Parâmetros
 
@@ -225,7 +224,7 @@ A API cliente-cliente pode ser escrita de maneira semelhante à API servidor-cli
 
 Se você foi solicitado a projetar um componente de interface do usuário, na seção "Interface", discuta sobre as opções de personalização para o componente, semelhantes às props para componentes React.
 
-* * *
+---
 
 ## Otimizações e Análise Detalhada
 
@@ -235,31 +234,31 @@ Se você foi solicitado a projetar um componente de interface do usuário, na se
 
 Não há uma maneira fixa de abordar a seção de otimização e aprofundamento, e você está livre para se concentrar em diferentes áreas do produto. Não haverá tempo suficiente para abordar todas as áreas, portanto, selecione como deseja gastar seu tempo cuidadosamente de acordo com essas diretrizes:
 
--   **Foque nas áreas importantes do produto**. Para sites de comércio eletrônico, o desempenho é crucial e você gostaria de dedicar a maior parte do seu tempo a mergulhar nas várias otimizações de desempenho que podem ser feitas. Para editores colaborativos, a complexidade está em como lidar com condições de corrida e modificações concorrentes, portanto, você gostaria de se concentrar em explicar isso.
--   **Concentre-se nos seus pontos fortes.** Demonstre seu conhecimento no domínio. Se você está familiarizado com acessibilidade, fale sobre as várias armadilhas de acessibilidade que podem ocorrer no produto e como abordá-las. Impressionar o entrevistador com seu conhecimento. Se você é um especialista em desempenho, explique as várias oportunidades de otimização de desempenho que podem proporcionar uma experiência do usuário extremamente fluida.
+- **Foque nas áreas importantes do produto**. Para sites de comércio eletrônico, o desempenho é crucial e você gostaria de dedicar a maior parte do seu tempo a mergulhar nas várias otimizações de desempenho que podem ser feitas. Para editores colaborativos, a complexidade está em como lidar com condições de corrida e modificações concorrentes, portanto, você gostaria de se concentrar em explicar isso.
+- **Concentre-se nos seus pontos fortes.** Demonstre seu conhecimento no domínio. Se você está familiarizado com acessibilidade, fale sobre as várias armadilhas de acessibilidade que podem ocorrer no produto e como abordá-las. Impressionar o entrevistador com seu conhecimento. Se você é um especialista em desempenho, explique as várias oportunidades de otimização de desempenho que podem proporcionar uma experiência do usuário extremamente fluida.
 
 ### Áreas gerais de otimização/aprofundamento
 
 Aqui está uma lista de tópicos sobre os quais você pode falar para esta seção. Tenha em mente que a importância de um tópico depende da pergunta e alguns tópicos são completamente irrelevantes para certas perguntas (possível, mas improvável).
 
--   Desempenho
--   Experiência de Usuário
--   Rede
--   Acessibilidade (a11y)
--   Suporte Multilíngue
--   Multi-device Support
--   Segurança
+- Desempenho
+- Experiência de Usuário
+- Rede
+- Acessibilidade (a11y)
+- Suporte Multilíngue
+- Multi-device Support
+- Segurança
 
 Consulte nosso [Guia de Melhores Práticas para Construção de Interfaces de Usuário](/front-end-interview-guidebook/user-interface-questions-cheatsheet) para obter detalhes sobre cada tópico.
 
-* * *
+---
 
 ## Resumo
 
-| Etapa                            | Objetivo                                                                                                             | Duração Recomendada |
-| -------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------- |
-| Exploração de requisitos         | Entenda o problema completamente e determine o escopo fazendo uma série de perguntas de esclarecimento.              | \<15%               |
-| Arquitetura/Design de Alto Nível | Identifique os principais componentes do produto e como eles estão relacionados entre si.                            | ~20%                |
-| Modelo de Dados                  | Descreva as várias entidades de dados, os campos que elas contêm e a(s) qual(is) componente(s) elas pertencem.       | ~10%                |
-| Definição de Interface           | Defina a interface (API) entre os componentes do produto, a funcionalidade de cada API, seus parâmetros e respostas. | ~15%                |
-| Otimizações e Análise Detalhada  | Discutir sobre possíveis oportunidades de otimização e áreas específicas de interesse ao construir o produto.        | ~40%                |
+| Etapa | Objetivo | Duração Recomendada |
+| --- | --- | --- |
+| Exploração de requisitos | Entenda o problema completamente e determine o escopo fazendo uma série de perguntas de esclarecimento. | \<15% |
+| Arquitetura/Design de Alto Nível | Identifique os principais componentes do produto e como eles estão relacionados entre si. | ~20% |
+| Modelo de Dados | Descreva as várias entidades de dados, os campos que elas contêm e a(s) qual(is) componente(s) elas pertencem. | ~10% |
+| Definição de Interface | Defina a interface (API) entre os componentes do produto, a funcionalidade de cada API, seus parâmetros e respostas. | ~15% |
+| Otimizações e Análise Detalhada | Discutir sobre possíveis oportunidades de otimização e áreas específicas de interesse ao construir o produto. | ~40% |
diff --git a/packages/system-design/contents/framework/zh-CN.mdx b/packages/system-design/contents/framework/zh-CN.mdx
index 195aba5f3..596cb3c28 100644
--- a/packages/system-design/contents/framework/zh-CN.mdx
+++ b/packages/system-design/contents/framework/zh-CN.mdx
@@ -5,23 +5,23 @@ seo_title: 系统设计的RADIO框架｜适用于任何前端系统设计面试
 seo_description: 在前端系统设计面试中应用RADIO框架，以结构化的方式指导自己。 良好的结构是成功的一半。
 ---
 
-良好的开端是成功的一半。 通过使用**RADIO框架**回答前端系统设计问题，您已经离面试成功更近了一步。
+良好的开端是成功的一半。 通过使用**RADIO 框架**回答前端系统设计问题，您已经离面试成功更近了一步。
 
 在前端系统设计面试中，您被要求设计的系统往往是产品，因此我们从这里开始将系统称为 "产品"。 首先了解**R**equirements（需求），定义高层**A**rchitecture（架构）和**D**ata Model（数据模型）。 然后定义产品组件之间的**I**nterfaces（接口），并讨论任何**O**ptimizations or dive deep（优化或深入）到需要特别关注的特定领域。
 
-## RADIO是什么？
+## RADIO 是什么？
 
 1.  **Requirements Exploration 需求探索**：全面了解问题，通过提出一些明确的问题来确定问题的范围。
 2.  **Architecture/High-level Design 架构/高级设计**：确定产品的关键组件以及它们之间的关系。
 3.  **Data Model 数据模型**：描述各种数据实体、它们包含的字段以及它们属于哪个组件。
-4.  **Interface Definition (API) 接口定义**：定义产品组件之间的接口（API）、每个API的功能、参数和响应。
+4.  **Interface Definition (API) 接口定义**：定义产品组件之间的接口（API）、每个 API 的功能、参数和响应。
 5.  **Optimizations and Deep Dive 优化和深入**：讨论在构建产品时可能的优化机会和感兴趣的特定领域。
 
 ## 需求探索
 
 **目标**：全面了解问题，并通过提出一些明确的问题来确定问题的范围。
 
-**建议持续时间**：不超过会议时间的15%。
+**建议持续时间**：不超过会议时间的 15%。
 
 系统设计面试问题的性质是开放式的，通常是模糊的，没有明确的目的。 **您需要深入挖掘问题，并通过提出有用的问题来澄清问题中的模糊之处。**将您的面试官视为与您合作开展新项目的产品经理，提出足够多的问题，以便您了解您要解决的问题以及您需要构建的内容。 实际上，有些问题根本不需要任何工程技术就可以解决！
 
@@ -31,9 +31,9 @@ seo_description: 在前端系统设计面试中应用RADIO框架，以结构化
 
 ### 我们应该关注哪些主要用例？
 
-想象一下，您被要求 "设计Facebook"。 Facebook是一个庞大的平台，有信息流、个人资料、好友、群组、故事等。 您应该关注Facebook的哪些部分？ 面试官心中已经有了答案，但希望您通过提问来找出答案。 通常情况下，您应将重点放在产品最独特的方面，即产品的特征上。 对于Facebook而言，这将是信息流、信息流分页和创建新帖子。 对于YouTube来说，这将是视频观看体验。 其他类型产品的重要区域请参见[问题类型](/system-design/types-of-questions)。
+想象一下，您被要求 "设计 Facebook"。 Facebook 是一个庞大的平台，有信息流、个人资料、好友、群组、故事等。 您应该关注 Facebook 的哪些部分？ 面试官心中已经有了答案，但希望您通过提问来找出答案。 通常情况下，您应将重点放在产品最独特的方面，即产品的特征上。 对于 Facebook 而言，这将是信息流、信息流分页和创建新帖子。 对于 YouTube 来说，这将是视频观看体验。 其他类型产品的重要区域请参见[问题类型](/system-design/types-of-questions)。
 
-在本页的其余部分，我们将使用 "设计Facebook "作为问题，并将框架应用于该问题。
+在本页的其余部分，我们将使用 "设计 Facebook "作为问题，并将框架应用于该问题。
 
 假设您没有明确产品的重点，就认为应该谈论结交流程，并开始谈论它。 在最好的情况下，优秀的面试官会引导您回到问题本来的方向，但他们会在心里记下您没有澄清问题。 在最坏的情况下，没有经验的面试官会让您继续说下去，并礼貌地试图找机会纠正您，但您已经浪费了宝贵的几分钟来讨论一个不重要的话题。
 
@@ -41,8 +41,8 @@ seo_description: 在前端系统设计面试中应用RADIO框架，以结构化
 
 首先，什么是功能性需求和非功能性需求？
 
--   **功能要求**：产品的基本要求，没有这些要求产品就无法运行。 这通常是指用户能否正确完成核心流程。
--   **非功能性需求**：被视为产品改进的需求，但不是产品可用性的严格要求，即没有这些需求产品仍然可以使用。 其中包括性能（页面加载速度、交互速度）、可扩展性（页面上可显示多少项目）、良好的用户体验等。
+- **功能要求**：产品的基本要求，没有这些要求产品就无法运行。 这通常是指用户能否正确完成核心流程。
+- **非功能性需求**：被视为产品改进的需求，但不是产品可用性的严格要求，即没有这些需求产品仍然可以使用。 其中包括性能（页面加载速度、交互速度）、可扩展性（页面上可显示多少项目）、良好的用户体验等。
 
 您可以通过两种方式获得这个问题的答案：
 
@@ -53,28 +53,28 @@ seo_description: 在前端系统设计面试中应用RADIO框架，以结构化
 
 ### 哪些是需要关注的核心功能？
 
-即使您知道了功能需求，仍可能有大量的小功能组成了大功能。 例如，在创建新的Facebook帖子时，应支持何种帖子格式？ 除了常见的基于文本的帖子外，用户是否还可以上传照片、上传视频、创建投票、到某个地点签到等。
+即使您知道了功能需求，仍可能有大量的小功能组成了大功能。 例如，在创建新的 Facebook 帖子时，应支持何种帖子格式？ 除了常见的基于文本的帖子外，用户是否还可以上传照片、上传视频、创建投票、到某个地点签到等。
 
 您应事先明确核心功能并进行设计，然后再进行额外功能的设计。
 
 ### 其他问题
 
--   需要支持哪些设备/平台（桌面/平板/移动）？
--   是否需要离线支持？
--   产品的主要用户是谁？
--   如果有，性能要求是什么？ (性能需求通常属于非功能性需求）。
+- 需要支持哪些设备/平台（桌面/平板/移动）？
+- 是否需要离线支持？
+- 产品的主要用户是谁？
+- 如果有，性能要求是什么？ (性能需求通常属于非功能性需求）。
 
 上述问题清单应能为您提供一个很好的问题起点，但并非详尽无遗！ 不同的问题将要求您提出特定领域的问题，我们将在案例研究中讨论这些问题。
 
 建议您将商定的要求写在某个地方，以便在整个面试过程中参考，并确保您已经涵盖了这些要求。
 
-* * *
+---
 
 ## 架构/高级设计
 
 **目标**：识别产品的关键部件以及它们之间的关系。
 
-**建议持续时间**：约占会议的20%。
+**建议持续时间**：约占会议的 20%。
 
 有了这些需求，我们就可以进行架构设计了。 您的下一项任务是通过确定产品的关键组件、这些组件之间的相互作用以及它们之间的关系，提出产品/系统架构。 切记要关注**客户端架构**，而不是后端。
 
@@ -82,15 +82,15 @@ seo_description: 在前端系统设计面试中应用RADIO框架，以结构化
 
 高级前端设计中常见的组件/模块示例：
 
--   **服务器**：在前端系统设计面试中，我们可以把服务器当作一个黑盒子，假设它暴露了一些API，您可以通过HTTP/WebSockets调用。
--   **视图**：表示用户看到的内容，通常包含更小的子视图。 可以只包含客户端状态。
--   **控制器**：响应用户交互的模块，以视图期望的格式处理来自存储/模型的数据。 如果应用程序较小，且模块间数据传递不多，则不一定需要该模块。
--   **模型/客户存储**：数据存放的地方。 存储包含的数据将通过视图呈现给用户，存储往往是整个应用程序的采访背景。 实际上，您可以在应用程序中拥有多个存储空间，并且存储空间可以包含其他存储空间。
+- **服务器**：在前端系统设计面试中，我们可以把服务器当作一个黑盒子，假设它暴露了一些 API，您可以通过 HTTP/WebSockets 调用。
+- **视图**：表示用户看到的内容，通常包含更小的子视图。 可以只包含客户端状态。
+- **控制器**：响应用户交互的模块，以视图期望的格式处理来自存储/模型的数据。 如果应用程序较小，且模块间数据传递不多，则不一定需要该模块。
+- **模型/客户存储**：数据存放的地方。 存储包含的数据将通过视图呈现给用户，存储往往是整个应用程序的采访背景。 实际上，您可以在应用程序中拥有多个存储空间，并且存储空间可以包含其他存储空间。
 
 定义组件责任时需要考虑的其他事项：
 
--   **关注点分离**：组件是模块化的，用于封装一系列功能和数据。 考虑每个组件的目的/功能，它应包含哪些数据，以及它如何为系统的其他部分提供服务（它能为其他组件做什么）。
--   **计算应在何处进行**：如果需要进行一定量的计算（例如过滤搜索结果，计算购物车的总金额），这些工作应该在服务器还是客户端完成？ 每种方法都有其优缺点，决策既取决于问题，也取决于环境。
+- **关注点分离**：组件是模块化的，用于封装一系列功能和数据。 考虑每个组件的目的/功能，它应包含哪些数据，以及它如何为系统的其他部分提供服务（它能为其他组件做什么）。
+- **计算应在何处进行**：如果需要进行一定量的计算（例如过滤搜索结果，计算购物车的总金额），这些工作应该在服务器还是客户端完成？ 每种方法都有其优缺点，决策既取决于问题，也取决于环境。
 
 重要的是要认识到，并非上述每个常见组件都与每个问题相关，也并非每个问题都需要，这取决于产品。
 
@@ -98,28 +98,28 @@ seo_description: 在前端系统设计面试中应用RADIO框架，以结构化
 
 ### 架构示例
 
-下面是使用Excalidraw绘制的[信息流](/questions/system-design/news-feed-facebook)问题的架构图示例。
+下面是使用 Excalidraw 绘制的[信息流](/questions/system-design/news-feed-facebook)问题的架构图示例。
 
 ![架构示例图](/img/questions/news-feed-facebook/news-feed-architecture.png)
 
 #### 组件责任
 
--   **服务器**：为Feed数据提供服务，并为创建新的Feed帖子提供HTTP API。
--   **控制器**：控制应用程序中的数据流，并向服务器发出网络请求。
--   **客户存储**：存储整个应用程序所需的数据。 在新闻提要中，存储中的大部分数据都是新闻提要用户界面所需的服务器端数据。
--   **信息流用户界面**：包含信息流帖子列表和撰写新帖子的用户界面。
-    -   **信息流帖子**：提供信息流帖子的数据，包含与帖子互动的按钮（喜欢/反应/分享/评论）。
-    -   **发布器**: 提供给用户创建新的动态的用户界面。
+- **服务器**：为 Feed 数据提供服务，并为创建新的 Feed 帖子提供 HTTP API。
+- **控制器**：控制应用程序中的数据流，并向服务器发出网络请求。
+- **客户存储**：存储整个应用程序所需的数据。 在新闻提要中，存储中的大部分数据都是新闻提要用户界面所需的服务器端数据。
+- **信息流用户界面**：包含信息流帖子列表和撰写新帖子的用户界面。
+  - **信息流帖子**：提供信息流帖子的数据，包含与帖子互动的按钮（喜欢/反应/分享/评论）。
+  - **发布器**: 提供给用户创建新的动态的用户界面。
 
 常见的免费绘图工具包括[diagrams.net](https://app.diagrams.net/)和[Excalidraw](https://excalidraw.com/)。 最好事先熟悉一下这些工具。
 
-* * *
+---
 
 ## 数据模型
 
 **目标**：描述各种数据实体、它们包含的字段以及它们属于哪个组件。
 
-**建议持续时间**：约占会议时间的10%。
+**建议持续时间**：约占会议时间的 10%。
 
 现在，我们必须考虑客户端中存在哪些数据字段。 客户端应用程序有两种数据：
 
@@ -131,8 +131,8 @@ seo_description: 在前端系统设计面试中应用RADIO框架，以结构化
 
 客户端专用数据，通常也称为状态，是只需保存在客户端而无需发送到服务器写入数据库的数据。 客户数据可进一步细分为两种：
 
--   **需要持久化的数据**：通常是用户输入，如输入到表单域中的数据。 这些数据通常必须发送到服务器并保存到数据库中才有用。
--   **短暂数据**：持续时间很短的临时状态。 常见的例子包括表单验证状态、当前选项卡、部分是否展开等。 关闭浏览器标签页时丢失这些数据通常是可以接受的。
+- **需要持久化的数据**：通常是用户输入，如输入到表单域中的数据。 这些数据通常必须发送到服务器并保存到数据库中才有用。
+- **短暂数据**：持续时间很短的临时状态。 常见的例子包括表单验证状态、当前选项卡、部分是否展开等。 关闭浏览器标签页时丢失这些数据通常是可以接受的。
 
 在列出数据字段时，最好能确定该字段是哪种数据，是服务器端数据还是客户端数据。
 
@@ -140,46 +140,46 @@ seo_description: 在前端系统设计面试中应用RADIO框架，以结构化
 
 这是一个使用[信息流](/questions/system-design/news-feed-facebook)问题的各个实体数据模型的基本例子。
 
-| 来源        | 实体        | 属于      | 字段                                                                         |
-| --------- | --------- | ------- | -------------------------------------------------------------------------- |
-| 服务端       | `Post`    | 信息流帖子   | `id`, `created_time`, `content`, `image`, `author` (a `User`), `reactions` |
-| 服务端       | `Feed`    | 信息流UI   | `posts`（`Post` 列表），`pagination `（分页元数据）                                    |
-| 服务端       | `User`    | 客户端存储   | `id`, `name`, `profile_photo_url`                                          |
-| 用户输入（客户端） | `NewPost` | 帖子编辑器UI | `message`, `image`                                                         |
+| 来源 | 实体 | 属于 | 字段 |
+| --- | --- | --- | --- |
+| 服务端 | `Post` | 信息流帖子 | `id`, `created_time`, `content`, `image`, `author` (a `User`), `reactions` |
+| 服务端 | `Feed` | 信息流 UI | `posts`（`Post` 列表），`pagination `（分页元数据） |
+| 服务端 | `User` | 客户端存储 | `id`, `name`, `profile_photo_url` |
+| 用户输入（客户端） | `NewPost` | 帖子编辑器 UI | `message`, `image` |
 
 根据你在问题中的进展以及要求在面试过程中的演变和增长，你可能需要添加更多字段。 这是一个动态和迭代的过程。
 
 你可能想把这些字段写在你的架构图中拥有它们的组件附近。
 
-* * *
+---
 
 ## 接口定义 (API)
 
-**目标**：定义产品组件之间的接口、各种API的功能、参数和响应。
+**目标**：定义产品组件之间的接口、各种 API 的功能、参数和响应。
 
-**建议持续时间**：约占会议时间的15%。
+**建议持续时间**：约占会议时间的 15%。
 
-有了组件和每个组件内的数据，我们就可以继续讨论组件之间的接口（API）了。 API是一个重载的术语，通常指软件组件之间通信和请求/发送数据的协议。 客户端和服务器通过网络层API（HTTP/WebSockets）进行通信。 客户端组件通常通过浏览器运行时的函数进行通信。 无论是在服务器和客户端之间，还是在客户端组件之间，所有的API都有三个共同点：
+有了组件和每个组件内的数据，我们就可以继续讨论组件之间的接口（API）了。 API 是一个重载的术语，通常指软件组件之间通信和请求/发送数据的协议。 客户端和服务器通过网络层 API（HTTP/WebSockets）进行通信。 客户端组件通常通过浏览器运行时的函数进行通信。 无论是在服务器和客户端之间，还是在客户端组件之间，所有的 API 都有三个共同点：
 
-| API的组成部分 | 服务器-客户端              | 客户端-客户端       |
-| -------- | -------------------- | ------------- |
-| 名称和功能    | HTTP 路径              | JavaScript 函数 |
-| 参数       | HTTP GET 查询和 POST 参数 | 函数参数          |
-| 返回值      | HTTP 响应，一般为 JSON 格式  | 函数返回值         |
+| API 的组成部分 | 服务器-客户端               | 客户端-客户端   |
+| -------------- | --------------------------- | --------------- |
+| 名称和功能     | HTTP 路径                   | JavaScript 函数 |
+| 参数           | HTTP GET 查询和 POST 参数   | 函数参数        |
+| 返回值         | HTTP 响应，一般为 JSON 格式 | 函数返回值      |
 
-### 服务器-客户端API示例
+### 服务器-客户端 API 示例
 
 再次以[信息流](/questions/system-design/news-feed-facebook)为例，我们有一个服务器 API，允许客户机获取最新的动态帖子。
 
-| 字段        | 值                                    |
-| --------- | ------------------------------------ |
-| HTTP 方法   | `GET`                                |
-| 路径        | `/feed`                              |
-| 描述        | 为用户获取信息流结果。                          |
+| 字段      | 值                     |
+| --------- | ---------------------- |
+| HTTP 方法 | `GET`                  |
+| 路径      | `/feed`                |
+| 描述      | 为用户获取信息流结果。 |
 
 #### 参数
 
-一个信息流响应是一个带有分页的列表，因此API预期分页参数。
+一个信息流响应是一个带有分页的列表，因此 API 预期分页参数。
 
 ```json
 {
@@ -216,49 +216,49 @@ seo_description: 在前端系统设计面试中应用RADIO框架，以结构化
 }
 ```
 
-### 客户端-客户端API示例
+### 客户端-客户端 API 示例
 
-客户端-客户端API的编写方式与服务器-客户端API类似，主要区别在于它们是JavaScript函数，或者是被监听的事件。 需要描述的最重要部分是API的功能、参数和返回/响应值。
+客户端-客户端 API 的编写方式与服务器-客户端 API 类似，主要区别在于它们是 JavaScript 函数，或者是被监听的事件。 需要描述的最重要部分是 API 的功能、参数和返回/响应值。
 
-### 用于UI组件系统设计的API
+### 用于 UI 组件系统设计的 API
 
-如果你被要求设计一个UI组件，在 "界面 "部分，讨论组件的自定义选项，类似于React组件的道具。
+如果你被要求设计一个 UI 组件，在 "界面 "部分，讨论组件的自定义选项，类似于 React 组件的道具。
 
-* * *
+---
 
 ## 优化和深入研究
 
 **目标**：讨论在构建产品时可能的优化机会和感兴趣的具体领域。
 
-**建议持续时间**：约占会议的40%。
+**建议持续时间**：约占会议的 40%。
 
 优化和深入研究部分没有固定的方法，您可以自由地关注产品的不同领域。 我们不会有足够的时间来涵盖每一个领域，因此请根据这些指导原则谨慎选择您希望花费的时间：
 
--   **关注产品的重要领域** 对于电子商务网站，性能至关重要，您应该花大量时间深入了解可以进行的各种性能优化。 对于协作编辑器，复杂性在于如何处理竞赛条件和并发修改，因此您需要重点解释这一点。
--   **专注于您的优势**展示您的领域知识。 如果您精通无障碍性，请谈谈产品中可能出现的各种无障碍性隐患以及如何解决这些问题。 用您的知识打动面试官。 如果您是性能专家，请解释各种性能优化机会，以提供流畅的用户体验。
+- **关注产品的重要领域** 对于电子商务网站，性能至关重要，您应该花大量时间深入了解可以进行的各种性能优化。 对于协作编辑器，复杂性在于如何处理竞赛条件和并发修改，因此您需要重点解释这一点。
+- **专注于您的优势**展示您的领域知识。 如果您精通无障碍性，请谈谈产品中可能出现的各种无障碍性隐患以及如何解决这些问题。 用您的知识打动面试官。 如果您是性能专家，请解释各种性能优化机会，以提供流畅的用户体验。
 
 ### 一般优化/深潜领域
 
 以下是您在本节中可以谈论的话题列表。 请注意，题目的重要性取决于问题，有些题目与某些问题完全无关（有可能，但可能性不大）。
 
--   性能
--   用户体验
--   网络
--   可访问性（a11y）
--   多语言支持
--   多设备支持
--   安全
+- 性能
+- 用户体验
+- 网络
+- 可访问性（a11y）
+- 多语言支持
+- 多设备支持
+- 安全
 
 有关每个主题的详细信息，请参阅我们的[构建用户界面的最佳实践指南](/front-end-interview-guidebook/user-interface-questions-cheatsheet)。
 
-* * *
+---
 
 ## 总结
 
-| 步骤      | 目标                                   | 推荐时长  |
-| ------- | ------------------------------------ | ----- |
-| 需求探索    | 通过提出一些明确的问题来全面了解问题并确定其范围。            | \<15% |
-| 架构/高级设计 | 识别产品的关键部件以及它们之间的关系。                  | ~20%  |
-| 数据模型    | 描述各种数据实体、它们包含的字段以及它们属于哪个组件。          | ~10%  |
-| 接口定义    | 定义产品的组件之间的接口 (API)，每个 API 的功能、参数和响应。 | ~15%  |
-| 优化和深入研究 | 讨论在构建产品时可能的优化机会和感兴趣的具体领域。            | ~40%  |
+| 步骤 | 目标 | 推荐时长 |
+| --- | --- | --- |
+| 需求探索 | 通过提出一些明确的问题来全面了解问题并确定其范围。 | \<15% |
+| 架构/高级设计 | 识别产品的关键部件以及它们之间的关系。 | ~20% |
+| 数据模型 | 描述各种数据实体、它们包含的字段以及它们属于哪个组件。 | ~10% |
+| 接口定义 | 定义产品的组件之间的接口 (API)，每个 API 的功能、参数和响应。 | ~15% |
+| 优化和深入研究 | 讨论在构建产品时可能的优化机会和感兴趣的具体领域。 | ~40% |
diff --git a/packages/system-design/contents/introduction/pt-BR.mdx b/packages/system-design/contents/introduction/pt-BR.mdx
index d5af7c9ae..3ef54ba76 100644
--- a/packages/system-design/contents/introduction/pt-BR.mdx
+++ b/packages/system-design/contents/introduction/pt-BR.mdx
@@ -16,23 +16,23 @@ Os recursos de design de sistemas da GreatFrontEnd são talvez os mais abrangent
 
 Nas entrevistas tradicionais de design de sistemas para Engenheiros de Software, os candidatos serão solicitados a descrever a arquitetura de um sistema distribuído, geralmente envolvendo servidores web, balanceadores de carga, caches, bancos de dados, microsserviços, filas de tarefas, etc. Para Engenheiros Front-End, as entrevistas de design de sistemas são um pouco diferentes, com mais ênfase no que acontece no cliente e no design da API entre o cliente e o servidor, em vez do que acontece no back-end.
 
-| Proporção                                                | Back End                                                                                                                                                 | Front End                                                               |
-| -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| Coletar requisitos                                       | Obrigatório                                                                                                                                              | Obrigatório                                                             |
-| Arquitetura/design de alto nível                         | Serviços em nuvem distribuídos                                                                                                                           | Aplicação/Componente                                                    |
-| Estimativa rápida                                        | Obrigatório                                                                                                                                              | Não obrigatório                                                         |
-| Componentes do sistema                                   | Serviços em nuvem (por exemplo, balanceador de carga, servidor de aplicação, banco de dados, armazenamento de arquivos, caches, filas de mensagens, CDN) | Módulos de aplicação (Modelo, Visualização, Controlador)                |
-| Modelo de dados                                          | Esquema SQL                                                                                                                                              | Estado da aplicação                                                     |
-| Tipo de APIs entre os componentes                        | Rede (qualquer protocolo)                                                                                                                                | Rede (HTTP, WebSocket), funções JavaScript                              |
-| Áreas de foco                                            | Escalabilidade, Confiabilidade, Disponibilidade                                                                                                          | Desempenho, Experiência do Usuário, Acessibilidade, Internacionalização |
-| Menos importante (pode ser tratado como uma caixa-preta) | Cliente                                                                                                                                                  | Servidor                                                                |
+| Proporção | Back End | Front End |
+| --- | --- | --- |
+| Coletar requisitos | Obrigatório | Obrigatório |
+| Arquitetura/design de alto nível | Serviços em nuvem distribuídos | Aplicação/Componente |
+| Estimativa rápida | Obrigatório | Não obrigatório |
+| Componentes do sistema | Serviços em nuvem (por exemplo, balanceador de carga, servidor de aplicação, banco de dados, armazenamento de arquivos, caches, filas de mensagens, CDN) | Módulos de aplicação (Modelo, Visualização, Controlador) |
+| Modelo de dados | Esquema SQL | Estado da aplicação |
+| Tipo de APIs entre os componentes | Rede (qualquer protocolo) | Rede (HTTP, WebSocket), funções JavaScript |
+| Áreas de foco | Escalabilidade, Confiabilidade, Disponibilidade | Desempenho, Experiência do Usuário, Acessibilidade, Internacionalização |
+| Menos importante (pode ser tratado como uma caixa-preta) | Cliente | Servidor |
 
 Leia mais sobre as diferenças entre as entrevistas de Design de Sistema de Front End e Back End no blog de Zhenghao em (https://www.zhenghao.io/posts/system-design-interviews)
 
 Por exemplo, uma pergunta clássica é pedir para projetar uma interface de feed do Twitter, que pode ser feita tanto em entrevistas de sistemas de back end quanto de front end.
 
--   Back end: Estimativa de capacidade, projeto dos esquemas do banco de dados, como garantir que os serviços possam escalar com o tráfego, como gerar o feed do Twitter de um usuário?
--   Front end: Como você implementa as interações com um tweet, como implementar paginação no feed e como os usuários podem criar novos tweets?
+- Back end: Estimativa de capacidade, projeto dos esquemas do banco de dados, como garantir que os serviços possam escalar com o tráfego, como gerar o feed do Twitter de um usuário?
+- Front end: Como você implementa as interações com um tweet, como implementar paginação no feed e como os usuários podem criar novos tweets?
 
 Como você pode ver, o foco das entrevistas de design de sistemas de front end pode ser muito diferente das de back end, e respondê-las bem requer uma abordagem diferente.
 
@@ -40,7 +40,7 @@ Como você pode ver, o foco das entrevistas de design de sistemas de front end p
 
 Nosso guia de Design de Sistema de Front End está estruturado em duas partes. Primeiro, você obterá uma compreensão mais profunda do que se trata uma entrevista de design de sistema e, em seguida, mergulhará em alguns estudos de caso de design de sistema de front end usando o framework RADIO.
 
--   [Tipos de questões e exemplos do Front End System Design](/system-design/types-of-questions)
--   [Framework para responder perguntas sobre o Design do Sistema Front-end](/system-design/framework)
--   [Como você está sendo avaliado e o que os entrevistadores estão procurando](/system-design/evaluation-axes)
--   [Erros comuns para evitar](/system-design/common-mistakes)
+- [Tipos de questões e exemplos do Front End System Design](/system-design/types-of-questions)
+- [Framework para responder perguntas sobre o Design do Sistema Front-end](/system-design/framework)
+- [Como você está sendo avaliado e o que os entrevistadores estão procurando](/system-design/evaluation-axes)
+- [Erros comuns para evitar](/system-design/common-mistakes)
diff --git a/packages/system-design/contents/introduction/zh-CN.mdx b/packages/system-design/contents/introduction/zh-CN.mdx
index 03242a0fa..6410a4fef 100644
--- a/packages/system-design/contents/introduction/zh-CN.mdx
+++ b/packages/system-design/contents/introduction/zh-CN.mdx
@@ -4,43 +4,43 @@ description: 学习有用的技巧以及如何处理前端系统设计的首要
 seo_title: 前端系统设计指南｜概念、技术和问题
 ---
 
-与编码和问答题不同，系统设计面试是开放式面试，没有正确答案。 面试官会给您一个模糊的问题或场景，您需要与面试官合作，在白板上（如果是虚拟面试，则使用一些协作绘图应用程序）设计出合适的软件来回答问题。 这类似于某些公司的流程，即工程师撰写技术设计文件，概述他们正在进行的项目的可能方法，解释技术决策，并与同事讨论取舍，但您必须在30-60分钟内完成。
+与编码和问答题不同，系统设计面试是开放式面试，没有正确答案。 面试官会给您一个模糊的问题或场景，您需要与面试官合作，在白板上（如果是虚拟面试，则使用一些协作绘图应用程序）设计出合适的软件来回答问题。 这类似于某些公司的流程，即工程师撰写技术设计文件，概述他们正在进行的项目的可能方法，解释技术决策，并与同事讨论取舍，但您必须在 30-60 分钟内完成。
 
 系统设计面试通常是给有一定年限工作经验的应聘者（又称非应届毕业生），您在系统设计面试中的表现对您将获得的职位级别有重要影响。 在大多数情况下，系统设计面试失败将导致整体被拒。 通过系统设计面试非常重要！
 
 然而，鉴于系统设计面试的开放性，与编码面试相比，系统设计面试的练习难度要大得多。 许多应聘者也没有构建各种系统的实际经验，因此在回答系统设计面试问题时很难从经验中吸取教训。 此外，用于前端系统设计的资源非常少。 大多数现有的系统设计资源都是针对普通软件工程师的，因此侧重于分布式系统。
 
-GreatFrontEnd的系统设计资源也许是您能找到的最全面的资源，将帮助您轻松应对前端系统设计面试！
+GreatFrontEnd 的系统设计资源也许是您能找到的最全面的资源，将帮助您轻松应对前端系统设计面试！
 
 ## 前端与后端系统设计
 
-在传统的软件工程师系统设计面试中，应聘者会被要求描述分布式系统的架构，通常涉及Web服务器、负载均衡器、缓存、数据库、微服务、任务队列等。 对于前端工程师来说，系统设计面试略有不同，与后端相比，面试更注重客户端以及客户端与服务器之间的API设计。
+在传统的软件工程师系统设计面试中，应聘者会被要求描述分布式系统的架构，通常涉及 Web 服务器、负载均衡器、缓存、数据库、微服务、任务队列等。 对于前端工程师来说，系统设计面试略有不同，与后端相比，面试更注重客户端以及客户端与服务器之间的 API 设计。
 
-| 方面            | 后端                                      | 前端                              |
-| ------------- | --------------------------------------- | ------------------------------- |
-| 收集需求          | 需要                                      | 需要                              |
-| 架构/高级设计       | 分布式云服务                                  | 应用/组件                           |
-| 事后估算          | 需要                                      | 不需要                             |
-| 系统组成          | 云服务（例如负载平衡器、应用服务器、数据库、文件存储、缓存、消息队列、CDN） | 应用模块（模型、视图、控制器）                 |
-| 数据模型          | SQL Schema                              | 应用状态                            |
-| 组件之间的API类型    | 网络（任何协议）                                | 网络（HTTP、WebSocket）、JavaScript函数 |
-| 关注领域          | 可扩展性、可靠性和可用性                            | 性能、用户体验、可访问性、国际化                |
-| 不太重要（可作为黑盒处理） | 客户端                                     | 服务端                             |
+| 方面 | 后端 | 前端 |
+| --- | --- | --- |
+| 收集需求 | 需要 | 需要 |
+| 架构/高级设计 | 分布式云服务 | 应用/组件 |
+| 事后估算 | 需要 | 不需要 |
+| 系统组成 | 云服务（例如负载平衡器、应用服务器、数据库、文件存储、缓存、消息队列、CDN） | 应用模块（模型、视图、控制器） |
+| 数据模型 | SQL Schema | 应用状态 |
+| 组件之间的 API 类型 | 网络（任何协议） | 网络（HTTP、WebSocket）、JavaScript 函数 |
+| 关注领域 | 可扩展性、可靠性和可用性 | 性能、用户体验、可访问性、国际化 |
+| 不太重要（可作为黑盒处理） | 客户端 | 服务端 |
 
 在郑浩的博客上阅读有关前端和后端系统设计面试之间的区别的更多内容。
 
 例如，在后端和前端系统面试中都可能被问到的一个典型问题是关于设计 Twitter 动态 UI 的问题。
 
--   **后端**：容量估算，设计数据库模式，如何确保服务能够随着流量扩展，如何生成用户的Twitter信息流？
--   **前端**：你如何实现与推文的交互，如何在动态中实现分页，以及用户如何创建新推文？
+- **后端**：容量估算，设计数据库模式，如何确保服务能够随着流量扩展，如何生成用户的 Twitter 信息流？
+- **前端**：你如何实现与推文的交互，如何在动态中实现分页，以及用户如何创建新推文？
 
 正如您所看到的，前端系统设计面试的重点可能与后端截然不同，要回答好这些问题需要采用不同的方法。
 
 ## 您将在本指南中学到什么
 
-我们的前端系统设计指南分为两部分，首先您将深入了解系统设计面试的内容，然后使用RADIO框架深入研究一些前端系统设计案例。
+我们的前端系统设计指南分为两部分，首先您将深入了解系统设计面试的内容，然后使用 RADIO 框架深入研究一些前端系统设计案例。
 
--   [前端系统设计问题类型和示例](/system-design/types-of-questions)
--   [回答前端系统设计问题的框架](/system-design/framework)
--   [如何对您进行评估以及面试官会注意什么](/system-design/evaluation-axes)
--   [应避免的常见错误](/system-design/common-mistakes)
+- [前端系统设计问题类型和示例](/system-design/types-of-questions)
+- [回答前端系统设计问题的框架](/system-design/framework)
+- [如何对您进行评估以及面试官会注意什么](/system-design/evaluation-axes)
+- [应避免的常见错误](/system-design/common-mistakes)
diff --git a/packages/system-design/contents/types-of-questions/pt-BR.mdx b/packages/system-design/contents/types-of-questions/pt-BR.mdx
index c57079dea..44a87b34b 100644
--- a/packages/system-design/contents/types-of-questions/pt-BR.mdx
+++ b/packages/system-design/contents/types-of-questions/pt-BR.mdx
@@ -19,23 +19,23 @@ Diferentes aplicativos têm seus próprios aspectos únicos e pontos de discuss
 
 Aqui está uma lista de perguntas comumente feitas durante entrevistas de design de sistema de front end e as áreas nas quais você deve se concentrar:
 
-| Aplicação                                                                         | Exemplos                                          | Áreas importantes                                                                         |
-| --------------------------------------------------------------------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------- |
-| [Fonte de Notícias](/questions/system-design/news-feed-facebook)                  | Facebook, Twitter                                 | Interações de feed, abordagens de paginação de feed, compositor de mensagens/postagens    |
-| [Mensagem/Chat](/questions/system-design/chat-application-messenger)              | Messenger, Slack, Discord                         | Sincronização de mensagens, chat em tempo real, lista de mensagens, lista de chat         |
-| [Marketplaces de comércio eletrônico](/questions/system-design/e-commerce-amazon) | Amazon, eBay                                      | Páginas de listagem de produtos, páginas de detalhes do produto, carrinho, checkout       |
-| [Compartilhamento de Fotos](/questions/system-design/photo-sharing-instagram)     | Instagram, Flickr, Google Fotos                   | Navegação de fotos, Edição de fotos, Envio de fotos                                       |
-| [Reserva de Viagem](/questions/system-design/travel-booking-airbnb)               | Airbnb, Skyscanner                                | Interface de busca, Resultados da busca, Interface de reserva                             |
-| [Cliente de Email](/questions/system-design/email-client-outlook)                 | Outlook, Apple Mail, Gmail                        | Sincronização de caixa de entrada, Interface de caixa de entrada, Compositor de e-mail,   |
-| Streaming de Vídeo                                                                | YouTube, Netflix, TikTok                          | Reprodutor de vídeo, Streaming de vídeo, Página de detalhes do vídeo, Vídeos recomendados |
-| Aplicativos Colaborativos                                                         | Google Docs, Google Sheets, Google Slides, Notion | Colaboração em tempo real, Sincronização de Estado                                        |
-| Desenho                                                                           | Figma, Lucidchart                                 | Abordagem de renderização, Modelo de estado/dados do cliente                              |
-| Mapas                                                                             | Google/Apple Maps, Foursquare City Guide          | Renderização do mapa, Exibindo Localizações                                               |
-| Armazenamento de Arquivos                                                         | Google Drive, Dropbox                             | Envio de arquivos, Download de arquivos, Explorador de arquivos                           |
-| Videoconferência                                                                  | Zoom, Google Meet                                 | Streaming de vídeo, Modos de visualização variados                                        |
-| Caronas                                                                           | Uber, Lyft                                        | Reserva de percurso, local do motorista                                                   |
-| Streaming de Música                                                               | Spotify, Apple Music                              | Interface do reprodutor de música, Interface de listas de reprodução                      |
-| Jogos                                                                             | Tetris, Snake                                     | Estado do jogo, Loop do jogo, Lógica do jogo                                              |
+| Aplicação | Exemplos | Áreas importantes |
+| --- | --- | --- |
+| [Fonte de Notícias](/questions/system-design/news-feed-facebook) | Facebook, Twitter | Interações de feed, abordagens de paginação de feed, compositor de mensagens/postagens |
+| [Mensagem/Chat](/questions/system-design/chat-application-messenger) | Messenger, Slack, Discord | Sincronização de mensagens, chat em tempo real, lista de mensagens, lista de chat |
+| [Marketplaces de comércio eletrônico](/questions/system-design/e-commerce-amazon) | Amazon, eBay | Páginas de listagem de produtos, páginas de detalhes do produto, carrinho, checkout |
+| [Compartilhamento de Fotos](/questions/system-design/photo-sharing-instagram) | Instagram, Flickr, Google Fotos | Navegação de fotos, Edição de fotos, Envio de fotos |
+| [Reserva de Viagem](/questions/system-design/travel-booking-airbnb) | Airbnb, Skyscanner | Interface de busca, Resultados da busca, Interface de reserva |
+| [Cliente de Email](/questions/system-design/email-client-outlook) | Outlook, Apple Mail, Gmail | Sincronização de caixa de entrada, Interface de caixa de entrada, Compositor de e-mail, |
+| Streaming de Vídeo | YouTube, Netflix, TikTok | Reprodutor de vídeo, Streaming de vídeo, Página de detalhes do vídeo, Vídeos recomendados |
+| Aplicativos Colaborativos | Google Docs, Google Sheets, Google Slides, Notion | Colaboração em tempo real, Sincronização de Estado |
+| Desenho | Figma, Lucidchart | Abordagem de renderização, Modelo de estado/dados do cliente |
+| Mapas | Google/Apple Maps, Foursquare City Guide | Renderização do mapa, Exibindo Localizações |
+| Armazenamento de Arquivos | Google Drive, Dropbox | Envio de arquivos, Download de arquivos, Explorador de arquivos |
+| Videoconferência | Zoom, Google Meet | Streaming de vídeo, Modos de visualização variados |
+| Caronas | Uber, Lyft | Reserva de percurso, local do motorista |
+| Streaming de Música | Spotify, Apple Music | Interface do reprodutor de música, Interface de listas de reprodução |
+| Jogos | Tetris, Snake | Estado do jogo, Loop do jogo, Lógica do jogo |
 
 ## Componente de UI
 
@@ -70,14 +70,14 @@ Certamente será esperado que você projete uma forma para os usuários do compo
 
 Exemplos de componentes de interface do usuário frequentemente solicitados durante entrevistas de design de sistemas front-end:
 
--   Projete um [componente de preenchimento automático](/questions/system-design/autocomplete)
--   Projete um [componente menu suspenso](/questions/system-design/dropdown-menu)
--   Projete um [widget de enquetes incorporável](/questions/system-design/poll-widget)
--   Projete um [carrossel de imagens](/questions/system-design/image-carousel)
--   Projete um [componente modal](/questions/system-design/modal-dialog)
--   Projete uma tabela de dados com classificação e paginação
--   Crie um datepicker
--   Projete um componente multiselect
+- Projete um [componente de preenchimento automático](/questions/system-design/autocomplete)
+- Projete um [componente menu suspenso](/questions/system-design/dropdown-menu)
+- Projete um [widget de enquetes incorporável](/questions/system-design/poll-widget)
+- Projete um [carrossel de imagens](/questions/system-design/image-carousel)
+- Projete um [componente modal](/questions/system-design/modal-dialog)
+- Projete uma tabela de dados com classificação e paginação
+- Crie um datepicker
+- Projete um componente multiselect
 
 ## O que fazer durante as entrevistas?
 
diff --git a/packages/system-design/contents/types-of-questions/zh-CN.mdx b/packages/system-design/contents/types-of-questions/zh-CN.mdx
index bc4a200c5..7525ea209 100644
--- a/packages/system-design/contents/types-of-questions/zh-CN.mdx
+++ b/packages/system-design/contents/types-of-questions/zh-CN.mdx
@@ -11,39 +11,39 @@ seo_description: 了解两种类型的前端系统设计问题，以及如何以
 
 如上所述，为前端系统设计面试设计应用软件与一般的软件工程系统设计面试感觉类似，事实上，问题也高度相似。 然而，与其谈论分布式系统，不如关注客户端，讨论应用架构和客户端实现细节。
 
-在当今时代，许多网站都是交互式的丰富应用程序，几乎可以实现许多桌面应用程序所能实现的功能。 如果您在网页上使用 Gmail、Facebook、YouTube、Google Calender，您已经使用了Web 应用程序。 Web 应用往往是动态的，Web 应用中的导航通常不需要刷新整个页面，而是使用JavaScript获取下一页的远程数据，并动态更改内容和URL。 由于Web 应用是涉及多个模块的复杂软件，我们在软件工程课程中学到的常见应用架构，如模型-视图-控制器（MVC）、模型-视图-视图模型（MVVM），在构建Web 应用时也同样适用。 React是Facebook最流行的JavaScript库之一，用于构建交互式Web应用程序，许多React Web应用程序采用基于Flux/Redux的单向架构。
+在当今时代，许多网站都是交互式的丰富应用程序，几乎可以实现许多桌面应用程序所能实现的功能。 如果您在网页上使用 Gmail、Facebook、YouTube、Google Calender，您已经使用了 Web 应用程序。 Web 应用往往是动态的，Web 应用中的导航通常不需要刷新整个页面，而是使用 JavaScript 获取下一页的远程数据，并动态更改内容和 URL。 由于 Web 应用是涉及多个模块的复杂软件，我们在软件工程课程中学到的常见应用架构，如模型-视图-控制器（MVC）、模型-视图-视图模型（MVVM），在构建 Web 应用时也同样适用。 React 是 Facebook 最流行的 JavaScript 库之一，用于构建交互式 Web 应用程序，许多 React Web 应用程序采用基于 Flux/Redux 的单向架构。
 
-不同的应用有其独特的方面和谈话要点。 您必须将重点放在申请材料的独特之处，而不要花太多时间谈论适用于所有问题的一般性内容。 首先，设计高层架构，确定系统中的组件以及组件之间的API。 然后深入研究与问题相关的几个方面，以及如何实施或优化这些方面。
+不同的应用有其独特的方面和谈话要点。 您必须将重点放在申请材料的独特之处，而不要花太多时间谈论适用于所有问题的一般性内容。 首先，设计高层架构，确定系统中的组件以及组件之间的 API。 然后深入研究与问题相关的几个方面，以及如何实施或优化这些方面。
 
 ### 实例
 
 以下是前端系统设计面试中常见的应用问题列表，以及您应重点关注的领域：
 
-| 应用                                                           | 示例                               | 重要领域                     |
-| ------------------------------------------------------------ | -------------------------------- | ------------------------ |
-| [信息流](/questions/system-design/news-feed-facebook)           | Facebook, Twitter                | 按钮交互， 动态内容分页方法， 消息/帖子编辑器 |
-| [消息/聊天](/questions/system-design/chat-application-messenger) | Messenger, Slack, Discord        | 消息同步、实时聊天、消息列表、聊天列表      |
-| [电子商务市场](/questions/system-design/e-commerce-amazon)         | Amazon, eBay                     | 产品列表页, 产品详情页, 购物车, 结账    |
-| [照片共享](/questions/system-design/photo-sharing-instagram)     | Instagram, Flickr, Google Photos | 照片浏览，照片编辑，照片上传           |
-| [旅行预订](/questions/system-design/travel-booking-airbnb)       | Airbnb, Skyscanner               | 搜索用户界面, 搜索结果, 预订用户界面     |
-| [电子邮件客户端](/questions/system-design/email-client-outlook)     | Outlook, Apple Mail, Gmail       | 邮箱同步、邮箱UI、邮件编辑器、         |
-| 视频流媒体                                                        | YouTube, Netflix, TikTok         | 视频播放器, 视频流, 视频详情页, 推荐视频  |
-| 协作应用                                                         | 谷歌文档，谷歌表单，谷歌幻灯片，Notion           | 实时协作，状态同步                |
-| 作图                                                           | Figma, Lucidchart                | 渲染方法，客户端状态/数据模型          |
-| 地图                                                           | 谷歌/苹果地图，Foursquare City Guide    | 地图渲染，显示位置                |
-| 文件存储                                                         | Google Drive, Dropbox            | 文件上传，文件下载，文件浏览器          |
-| 视频会议                                                         | Zoom, Google Meet                | 视频流，多种观看模式               |
-| 拼车服务                                                         | Uber, Lyft                       | 行程预订, 司机位置               |
-| 音乐流媒体                                                        | Spotify, Apple Music             | 音乐播放器用户界面，播放列表用户界面       |
-| 游戏                                                           | Tetris, Snake                    | 游戏状态, 游戏循环, 游戏逻辑         |
+| 应用 | 示例 | 重要领域 |
+| --- | --- | --- |
+| [信息流](/questions/system-design/news-feed-facebook) | Facebook, Twitter | 按钮交互， 动态内容分页方法， 消息/帖子编辑器 |
+| [消息/聊天](/questions/system-design/chat-application-messenger) | Messenger, Slack, Discord | 消息同步、实时聊天、消息列表、聊天列表 |
+| [电子商务市场](/questions/system-design/e-commerce-amazon) | Amazon, eBay | 产品列表页, 产品详情页, 购物车, 结账 |
+| [照片共享](/questions/system-design/photo-sharing-instagram) | Instagram, Flickr, Google Photos | 照片浏览，照片编辑，照片上传 |
+| [旅行预订](/questions/system-design/travel-booking-airbnb) | Airbnb, Skyscanner | 搜索用户界面, 搜索结果, 预订用户界面 |
+| [电子邮件客户端](/questions/system-design/email-client-outlook) | Outlook, Apple Mail, Gmail | 邮箱同步、邮箱 UI、邮件编辑器、 |
+| 视频流媒体 | YouTube, Netflix, TikTok | 视频播放器, 视频流, 视频详情页, 推荐视频 |
+| 协作应用 | 谷歌文档，谷歌表单，谷歌幻灯片，Notion | 实时协作，状态同步 |
+| 作图 | Figma, Lucidchart | 渲染方法，客户端状态/数据模型 |
+| 地图 | 谷歌/苹果地图，Foursquare City Guide | 地图渲染，显示位置 |
+| 文件存储 | Google Drive, Dropbox | 文件上传，文件下载，文件浏览器 |
+| 视频会议 | Zoom, Google Meet | 视频流，多种观看模式 |
+| 拼车服务 | Uber, Lyft | 行程预订, 司机位置 |
+| 音乐流媒体 | Spotify, Apple Music | 音乐播放器用户界面，播放列表用户界面 |
+| 游戏 | Tetris, Snake | 游戏状态, 游戏循环, 游戏逻辑 |
 
 ## 用户界面组件
 
-在现代前端开发中，通常使用组件库来构建应用程序。 一些流行的组件库您可能已经使用过，包括jQuery UI（多么老派！）、Bootstrap、Material UI、Chakra UI等。
+在现代前端开发中，通常使用组件库来构建应用程序。 一些流行的组件库您可能已经使用过，包括 jQuery UI（多么老派！）、Bootstrap、Material UI、Chakra UI 等。
 
 前端工程师需要能够构建应用程序所需的各种用户界面组件。 有些用户界面组件很容易构建（例如文本、按钮、徽章等），而其他组件则可能要复杂得多（自动完成、下拉、模态等）。 大多数情况下，如果您被要求设计一个用户界面组件，它将属于后一类。
 
-首先确定组件的子组件（例如，对于一个图片传送带，有图片、分页按钮、缩略图），定义组件的对外API（组件应该接受哪些选项/道具），描述组件的内部状态、子组件之间的API（如果相关），然后深入到性能、可访问性、用户体验、安全性等相关的优化和考虑。
+首先确定组件的子组件（例如，对于一个图片传送带，有图片、分页按钮、缩略图），定义组件的对外 API（组件应该接受哪些选项/道具），描述组件的内部状态、子组件之间的 API（如果相关），然后深入到性能、可访问性、用户体验、安全性等相关的优化和考虑。
 
 您可能需要为以下一个或多个目的编写少量代码：
 
@@ -64,21 +64,21 @@ seo_description: 了解两种类型的前端系统设计问题，以及如何以
 
 ### 自定义主题
 
-您肯定需要为组件的用户（开发人员）设计一种自定义组件外观的方法。 请参阅[前端面试指导手册的用户界面组件API设计原则部分](/front-end-interview-guidebook/user-interface-components-api-design-principles)，了解不同方法的概述和比较。
+您肯定需要为组件的用户（开发人员）设计一种自定义组件外观的方法。 请参阅[前端面试指导手册的用户界面组件 API 设计原则部分](/front-end-interview-guidebook/user-interface-components-api-design-principles)，了解不同方法的概述和比较。
 
 ### 示例
 
 在前端系统设计访谈中提出的用户界面组件示例：
 
--   设计一个[自动完成组件](/questions/system-design/autocomplete)
--   设计一个[下拉菜单组件](/questions/system-design/dropdown-menu)
--   设计一个[可嵌入的投票小部件](/questions/system-design/poll-widget)
--   设计一个[图片轮播](/questions/system-design/image-carousel)
--   设计一个[模态组件](/questions/system-design/modal-dialog)
--   设计一个带排序和分页功能的数据表
--   设计一个日期选择器
--   设计一个多选组件
+- 设计一个[自动完成组件](/questions/system-design/autocomplete)
+- 设计一个[下拉菜单组件](/questions/system-design/dropdown-menu)
+- 设计一个[可嵌入的投票小部件](/questions/system-design/poll-widget)
+- 设计一个[图片轮播](/questions/system-design/image-carousel)
+- 设计一个[模态组件](/questions/system-design/modal-dialog)
+- 设计一个带排序和分页功能的数据表
+- 设计一个日期选择器
+- 设计一个多选组件
 
 ## 面试时该做什么？
 
-既然您已经了解了前端系统设计面试中可能会问到的问题类型，那么该如何回答这些问题呢？ 我们提出了[RADIO框架](/system-design/framework)，这是一种易于记忆的结构化方法，您可以用它来应对系统设计面试问题。
+既然您已经了解了前端系统设计面试中可能会问到的问题类型，那么该如何回答这些问题呢？ 我们提出了[RADIO 框架](/system-design/framework)，这是一种易于记忆的结构化方法，您可以用它来应对系统设计面试问题。
diff --git a/website/blog/2022-06-18-javascript-object-vs-map.md b/website/blog/2022-06-18-javascript-object-vs-map.md
index 92cb62087..93248c734 100644
--- a/website/blog/2022-06-18-javascript-object-vs-map.md
+++ b/website/blog/2022-06-18-javascript-object-vs-map.md
@@ -36,7 +36,7 @@ Probably the most obvious downside of using objects for hash maps is that object
 ```jsx
 const foo = [];
 const bar = {};
-const obj = {[foo]: 'foo', [bar]: 'bar'};
+const obj = { [foo]: 'foo', [bar]: 'bar' };
 
 console.log(obj); // {"": 'foo', [object Object]: 'bar'}
 ```
@@ -115,7 +115,7 @@ We can use the good old `for ... in` loop. But it reveals inherited enumerable p
 ```jsx
 Object.prototype.foo = 'bar';
 
-const obj = {id: 1};
+const obj = { id: 1 };
 
 for (const key in obj) {
   console.log(key); // 'id', 'foo'
@@ -147,7 +147,7 @@ There is no easy way to remove all properties from an object, you have to delete
 Finally, we can't rely on the dot/bracket notation to check for existence of an property because the value itself could be set as `undefined`. Instead we have to use `Object.prototype.hasOwnProperty` or `Object.hasOwn`.
 
 ```jsx
-const obj = {a: undefined};
+const obj = { a: undefined };
 
 Object.hasOwn(obj, 'a'); // true
 ```
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index ccb54b998..589987ddb 100755
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -26,7 +26,7 @@ module.exports = {
         src: 'img/logo.svg',
       },
       items: [
-        {to: 'introduction', label: 'Start reading', position: 'left'},
+        { to: 'introduction', label: 'Start reading', position: 'left' },
         {
           type: 'dropdown',
           position: 'left',
@@ -51,7 +51,7 @@ module.exports = {
           label: 'System design',
           position: 'left',
         },
-        {to: 'blog', label: 'Blog', position: 'left'},
+        { to: 'blog', label: 'Blog', position: 'left' },
         {
           type: 'localeDropdown',
           position: 'right',
diff --git a/website/i18n/jp/docusaurus-plugin-content-docs/current/javascript-questions.md b/website/i18n/jp/docusaurus-plugin-content-docs/current/javascript-questions.md
index 30798ba44..e46775e8c 100644
--- a/website/i18n/jp/docusaurus-plugin-content-docs/current/javascript-questions.md
+++ b/website/i18n/jp/docusaurus-plugin-content-docs/current/javascript-questions.md
@@ -370,7 +370,7 @@ JSONP は、`<script>` タグを介してクロスオリジンドメインにリ
 
 ```js
 // File loaded from https://example.com?callback=printData
-printData({name: 'Yang Shun'});
+printData({ name: 'Yang Shun' });
 ```
 
 クライアントは、そのグローバルスコープ内に `printData` 関数を持たなければならず、関数はクロスオリジンドメインからの応答を受け取ったときにクライアントによって実行されます。
@@ -1014,8 +1014,8 @@ console.log(b); // 1
 
 ```js
 // Variable assignment.
-const o = {p: 42, q: true};
-const {p, q} = o;
+const o = { p: 42, q: true };
+const { p, q } = o;
 
 console.log(p); // 42
 console.log(q); // true
@@ -1032,7 +1032,7 @@ console.log(q); // true
 テンプレートリテラルは、文字列の補間や、文字列に変数を含めることを簡単にするのに役立ちます。ES2015 以前は、このようなことをするのが一般的でした。
 
 ```js
-var person = {name: 'Tyler', age: 28};
+var person = { name: 'Tyler', age: 28 };
 console.log(
   'Hi, my name is ' + person.name + ' and I am ' + person.age + ' years old!',
 );
@@ -1042,7 +1042,7 @@ console.log(
 テンプレートリテラルを使用すると、このような出力で作成できます。
 
 ```js
-const person = {name: 'Tyler', age: 28};
+const person = { name: 'Tyler', age: 28 };
 console.log(`Hi, my name is ${person.name} and I am ${person.age} years old!`);
 // 'Hi, my name is Tyler and I am 28 years old!'
 ```
@@ -1077,7 +1077,7 @@ This is line two.`);
 テンプレートリテラルのもう 1 つの使用例は、単純な変数補間のためのテンプレートライブラリの代用として使用することです。
 
 ```js
-const person = {name: 'Tyler', age: 28};
+const person = { name: 'Tyler', age: 28 };
 document.body.innerHTML = `
   <div>
     <p>Name: ${person.name}</p>
@@ -1145,7 +1145,7 @@ const person = {
   age: 29,
 };
 
-const copyOfTodd = {...person};
+const copyOfTodd = { ...person };
 ```
 
 ES6 の rest 構文は、任意の数の引数を関数に渡すための省略表現です。これは、データの配列をアンパックするのではなく、データを取り込んで配列に埋め込み、配列やオブジェクトの構造の割り当てと同様に、関数の引数でも機能する、普及した構文の逆です。
@@ -1159,7 +1159,7 @@ const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12
 
 const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
 
-const {e, f, ...others} = {
+const { e, f, ...others } = {
   e: 1,
   f: 2,
   g: 3,
diff --git a/website/i18n/kr/docusaurus-plugin-content-docs/current/javascript-questions.md b/website/i18n/kr/docusaurus-plugin-content-docs/current/javascript-questions.md
index 83feadd44..d0b2b6829 100644
--- a/website/i18n/kr/docusaurus-plugin-content-docs/current/javascript-questions.md
+++ b/website/i18n/kr/docusaurus-plugin-content-docs/current/javascript-questions.md
@@ -376,7 +376,7 @@ JSONP는 `<script>`태그를 통해 cross-origin 도메인에 요청하고 보
 
 ```js
 // https://example.com?callback=printData 에서 로드된 파일
-printData({name: 'Yang Shun'});
+printData({ name: 'Yang Shun' });
 ```
 
 클라이언트는 전역 범위에 있는 `printData` 함수를 가져야만 하고, cross-origin domain으로부터의 응답이 수신될 때 함수가 클라이언트에 의해 실행됩니다.
@@ -1046,8 +1046,8 @@ console.log(b); // 1
 
 ```js
 // 변수 할당.
-const o = {p: 42, q: true};
-const {p, q} = o;
+const o = { p: 42, q: true };
+const { p, q } = o;
 
 console.log(p); // 42
 console.log(q); // true
@@ -1063,7 +1063,7 @@ console.log(q); // true
 템플릿 리터럴을 사용하면 문자열 보간을 하거나 문자열에 변수를 포함하는 작업을 간단하게 수행할 수 있습니다. ES2015 이전에는 아래와 같이하는 것이 일반적이었습니다.
 
 ```js
-var person = {name: 'Tyler', age: 28};
+var person = { name: 'Tyler', age: 28 };
 console.log(
   'Hi, my name is ' + person.name + ' and I am ' + person.age + ' years old!',
 );
@@ -1073,7 +1073,7 @@ console.log(
 템플릿 리터럴을 사용하면, 대신 이렇게해도 같은 출력을 만들 수 있습니다.
 
 ```js
-const person = {name: 'Tyler', age: 28};
+const person = { name: 'Tyler', age: 28 };
 console.log(`Hi, my name is ${person.name} and I am ${person.age} years old!`);
 // 'Hi, my name is Tyler and I am 28 years old!'
 ```
@@ -1108,7 +1108,7 @@ This is line two.`);
 템플릿 리터럴의 또 다른 사용사례는 간단한 변수 보간을 위한 템플릿 라이브러리의 대체품으로 사용하는 것입니다.
 
 ```js
-const person = {name: 'Tyler', age: 28};
+const person = { name: 'Tyler', age: 28 };
 document.body.innerHTML = `
   <div>
     <p>Name: ${person.name}</p>
@@ -1175,7 +1175,7 @@ var person = {
   age: 29,
 };
 
-var copyOfTodd = {...person};
+var copyOfTodd = { ...person };
 ```
 
 ES6의 rest 구문은 함수에 전달할 임의의 수의 인수를 포함하는 약식을 제공합니다. 이는 데이터의 배열을 채우기보다는 데이터를 가져와서 배열로 채우는 spread 구문의 반대와 비슷하며, 배열이나 객체 디스트럭쳐링 할당뿐만 아니라 함수 인수에서도 작동합니다.
@@ -1189,7 +1189,7 @@ const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12
 
 const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
 
-const {e, f, ...others} = {
+const { e, f, ...others } = {
   e: 1,
   f: 2,
   g: 3,
diff --git a/website/i18n/pl/docusaurus-plugin-content-docs/current/javascript-questions.md b/website/i18n/pl/docusaurus-plugin-content-docs/current/javascript-questions.md
index 46736478e..bac5fcd5e 100644
--- a/website/i18n/pl/docusaurus-plugin-content-docs/current/javascript-questions.md
+++ b/website/i18n/pl/docusaurus-plugin-content-docs/current/javascript-questions.md
@@ -459,7 +459,7 @@ JSONP działa poprzez wysłanie żądania do domeny cross-origin za pomocą znac
 
 ```js
 // File loaded from https://example.com?callback=printData
-printData({name: 'Yang Shun'});
+printData({ name: 'Yang Shun' });
 ```
 
 Klient musi mieć funkcję `printData` w swoim globalnym zasięgu, a funkcja zostanie wykonana przez klienta po otrzymaniu odpowiedzi z domeny cross-origin.
@@ -931,9 +931,9 @@ const arr = [1, 2, 3];
 const newArr = [...arr, 4]; // [1, 2, 3, 4]
 
 // Object Example
-const human = Object.freeze({race: 'human'});
-const john = {...human, name: 'John'}; // {race: "human", name: "John"}
-const alienJohn = {...john, race: 'alien'}; // {race: "alien", name: "John"}
+const human = Object.freeze({ race: 'human' });
+const john = { ...human, name: 'John' }; // {race: "human", name: "John"}
+const alienJohn = { ...john, race: 'alien' }; // {race: "alien", name: "John"}
 ```
 
 ###### Bibliografia
@@ -1237,8 +1237,8 @@ console.log(b); // 1
 
 ```js
 // Variable assignment.
-const o = {p: 42, q: true};
-const {p, q} = o;
+const o = { p: 42, q: true };
+const { p, q } = o;
 
 console.log(p); // 42
 console.log(q); // true
@@ -1254,7 +1254,7 @@ console.log(q); // true
 Literały szablonów ułatwiają interpolację stringów lub uwzględnianie zmiennych w stringach. Przed ES2015 było coś takiego:
 
 ```js
-var person = {name: 'Tyler', age: 28};
+var person = { name: 'Tyler', age: 28 };
 console.log(
   'Hi, my name is ' + person.name + ' and I am ' + person.age + ' years old!',
 );
@@ -1264,7 +1264,7 @@ console.log(
 With template literals, you can now create that same output like this instead:
 
 ```js
-const person = {name: 'Tyler', age: 28};
+const person = { name: 'Tyler', age: 28 };
 console.log(`Hi, my name is ${person.name} and I am ${person.age} years old!`);
 // 'Hi, my name is Tyler and I am 28 years old!'
 ```
@@ -1299,7 +1299,7 @@ This is line two.`);
 Innym przykładem użycia literałów szablonów byłoby użycie jako zamiennika bibliotek szablonów dla prostych interpolacji zmiennych:
 
 ```js
-const person = {name: 'Tyler', age: 28};
+const person = { name: 'Tyler', age: 28 };
 document.body.innerHTML = `
   <div>
     <p>Name: ${person.name}</p>
@@ -1366,7 +1366,7 @@ const person = {
   age: 29,
 };
 
-const copyOfTodd = {...person};
+const copyOfTodd = { ...person };
 ```
 
 Rest syntax z ES6 oferuje skrót do włączenia dowolnej liczby argumentów, które należy przekazać do funkcji. To jest jak odwrotność spread syntax, biorąc dane i upychając je do tablicy, zamiast rozpakowywać tablicę danych, i działa w argumentach funkcyjnych, a także w przypisaniach destrukturyzacji tablicy i obiektów.
@@ -1380,7 +1380,7 @@ const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12
 
 const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
 
-const {e, f, ...others} = {
+const { e, f, ...others } = {
   e: 1,
   f: 2,
   g: 3,
diff --git a/website/i18n/ru/docusaurus-plugin-content-docs/current/javascript-questions.md b/website/i18n/ru/docusaurus-plugin-content-docs/current/javascript-questions.md
index bcfeacac0..a6aca9113 100644
--- a/website/i18n/ru/docusaurus-plugin-content-docs/current/javascript-questions.md
+++ b/website/i18n/ru/docusaurus-plugin-content-docs/current/javascript-questions.md
@@ -376,7 +376,7 @@ JSONP работает, отправляя запрос к серверу в д
 
 ```js
 // Файл загружен с https://example.com?callback=printData
-printData({name: 'Yang Shun'});
+printData({ name: 'Yang Shun' });
 ```
 
 У клиента должна быть функция `printData` в своей глобальной области видимости, и эта функция будет выполнена клиентом, когда будет получен ответ с сервера из другого домена.
@@ -1032,8 +1032,8 @@ console.log(b); // 1
 
 ```js
 // Присваивание переменной
-const o = {p: 42, q: true};
-const {p, q} = o;
+const o = { p: 42, q: true };
+const { p, q } = o;
 
 console.log(p); // 42
 console.log(q); // true
@@ -1049,7 +1049,7 @@ console.log(q); // true
 Шаблонные строки помогают упростить построение строк или включение переменных в строку. До ES2015 писали так:
 
 ```js
-var person = {name: 'Tyler', age: 28};
+var person = { name: 'Tyler', age: 28 };
 console.log(
   'Hi, my name is ' + person.name + ' and I am ' + person.age + ' years old!',
 );
@@ -1059,7 +1059,7 @@ console.log(
 С приходом шаблонных строк в ES6 стало намного проще:
 
 ```js
-const person = {name: 'Tyler', age: 28};
+const person = { name: 'Tyler', age: 28 };
 console.log(`Hi, my name is ${person.name} and I am ${person.age} years old!`);
 // 'Hi, my name is Tyler and I am 28 years old!'
 ```
@@ -1094,7 +1094,7 @@ This is line two.`);
 Еще одним вариантом использования шаблонных строк будет использование в качестве замены библиотек шаблонизации для интерполяции переменных:
 
 ```js
-const person = {name: 'Tyler', age: 28};
+const person = { name: 'Tyler', age: 28 };
 document.body.innerHTML = `
   <div>
     <p>Name: ${person.name}</p>
@@ -1161,7 +1161,7 @@ const person = {
   age: 29,
 };
 
-const copyOfTodd = {...person};
+const copyOfTodd = { ...person };
 ```
 
 В свою очередь, rest оператор синтаксиса ES6 позволяет в сокращенном виде указывать неопределенное количество аргументов, передаваемых в функцию. Можно сказать, что он противоположен spread оператору: собирает данные и добавляет их в массив, вместо разделения массива данных. Он используется в аргументах функций, а также при деструктуризации массивов и объектов.
@@ -1175,7 +1175,7 @@ const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12
 
 const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
 
-const {e, f, ...others} = {
+const { e, f, ...others } = {
   e: 1,
   f: 2,
   g: 3,
diff --git a/website/i18n/tl/docusaurus-plugin-content-docs/current/javascript-questions.md b/website/i18n/tl/docusaurus-plugin-content-docs/current/javascript-questions.md
index 49f1a3465..aed056b32 100644
--- a/website/i18n/tl/docusaurus-plugin-content-docs/current/javascript-questions.md
+++ b/website/i18n/tl/docusaurus-plugin-content-docs/current/javascript-questions.md
@@ -363,7 +363,7 @@ Gumagana ang JSONP sa pamamagitan ng paggawa ng isang kahilingan sa isang cross-
 
 ```js
 // Ang file ay naload galing sa https://example.com?callback=printData
-printData({name: 'Yang Shun'});
+printData({ name: 'Yang Shun' });
 ```
 
 Ang kliyente ay dapat magkaroon ng punksyon na `printData` sa pandaigdigang saklaw nito at ang punksyon ay isasagawa ng kliyente kapag ang tugon mula sa cross-origin na domain ay natanggap na.
@@ -903,8 +903,8 @@ console.log(b); // 1
 
 ```js
 // Variable assignment.
-const o = {p: 42, q: true};
-const {p, q} = o;
+const o = { p: 42, q: true };
+const { p, q } = o;
 
 console.log(p); // 42
 console.log(q); // true
@@ -971,7 +971,7 @@ const person = {
   age: 29,
 };
 
-const copyOfTodd = {...person};
+const copyOfTodd = { ...person };
 ```
 
 ES6's rest syntax offers a shorthand for including an arbitrary number of arguments to be passed to a function. It is like an inverse of the spread syntax, taking data and stuffing it into an array rather than unpacking an array of data, and it works in function arguments, as well as in array and object destructuring assignments.
@@ -985,7 +985,7 @@ const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12
 
 const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
 
-const {e, f, ...others} = {
+const { e, f, ...others } = {
   e: 1,
   f: 2,
   g: 3,
diff --git a/website/i18n/zh/docusaurus-plugin-content-docs/current/javascript-questions.md b/website/i18n/zh/docusaurus-plugin-content-docs/current/javascript-questions.md
index 8f0b8feb4..065805fc9 100644
--- a/website/i18n/zh/docusaurus-plugin-content-docs/current/javascript-questions.md
+++ b/website/i18n/zh/docusaurus-plugin-content-docs/current/javascript-questions.md
@@ -375,7 +375,7 @@ JSONP 通过`<script>`标签发送跨域请求，通常使用`callback`查询参
 
 ```js
 // 文件加载自 https://example.com?callback=printData
-printData({name: 'Yang Shun'});
+printData({ name: 'Yang Shun' });
 ```
 
 客户端必须在其全局范围内具有`printData`函数，并且在收到来自跨域的响应时，该函数将由客户端执行。
@@ -1039,8 +1039,8 @@ console.log(b); // 1
 
 ```js
 // 变量赋值
-const o = {p: 42, q: true};
-const {p, q} = o;
+const o = { p: 42, q: true };
+const { p, q } = o;
 
 console.log(p); // 42
 console.log(q); // true
@@ -1159,7 +1159,7 @@ const person = {
   age: 29,
 };
 
-const copyOfTodd = {...person};
+const copyOfTodd = { ...person };
 ```
 
 ES6 的剩余参数语句提供了一个简写，允许我们将不定数量的参数表示为一个数组。它就像是扩展运算符语法的反面，将数据收集到数组中，而不是解构数组。剩余参数语句在函数参数、数组和对象的解构赋值中有很大作用。
@@ -1173,7 +1173,7 @@ const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12
 
 const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
 
-const {e, f, ...others} = {
+const { e, f, ...others } = {
   e: 1,
   f: 2,
   g: 3,
diff --git a/website/src/components/SidebarAd/index.js b/website/src/components/SidebarAd/index.js
index eaa2750fa..999c7b0aa 100644
--- a/website/src/components/SidebarAd/index.js
+++ b/website/src/components/SidebarAd/index.js
@@ -7,7 +7,7 @@ import styles from './styles.module.css';
 
 const BACKGROUNDS = [styles.backgroundOrange, styles.backgroundRed];
 
-function FAANGTechLeads({className, position}) {
+function FAANGTechLeads({ className, position }) {
   return (
     <a
       className={clsx(styles.container, className)}
@@ -30,7 +30,7 @@ function FAANGTechLeads({className, position}) {
   );
 }
 
-function GreatFrontEnd({position}) {
+function GreatFrontEnd({ position }) {
   return (
     <a
       className={clsx(styles.container, styles.backgroundPurple)}
@@ -44,15 +44,14 @@ function GreatFrontEnd({position}) {
         <strong className={styles.title}>
           LeetCode for Front End Interviews
         </strong>
-        Get 20% off <u>GreatFrontEnd</u>'s premium high quality
-        practice questions, answers and guides by{' '}
-        <u>ex-FAANG Senior Engineers</u>
+        Get 20% off <u>GreatFrontEnd</u>'s premium high quality practice
+        questions, answers and guides by <u>ex-FAANG Senior Engineers</u>
       </p>
     </a>
   );
 }
 
-export default React.memo(function SidebarAd({position}) {
+export default React.memo(function SidebarAd({ position }) {
   const backgroundClass =
     BACKGROUNDS[Math.floor(Math.random() * BACKGROUNDS.length)];
   // Because the SSR and client output can differ and hydration doesn't patch attribute differences,
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 4441f9a7b..511b677af 100755
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -10,7 +10,7 @@ import styles from './styles.module.css';
 import successStories from '@site/src/data/successStories';
 
 export default function Home() {
-  const {siteConfig = {}} = useDocusaurusContext();
+  const { siteConfig = {} } = useDocusaurusContext();
 
   return (
     <Layout
@@ -30,7 +30,7 @@ export default function Home() {
 }
 
 function HeroSection() {
-  const {siteConfig = {}} = useDocusaurusContext();
+  const { siteConfig = {} } = useDocusaurusContext();
 
   return (
     <header className={clsx('hero', styles.heroBanner)}>
@@ -78,7 +78,7 @@ function GreatFrontEndSection() {
   return (
     <div
       className={clsx('padding-vert--lg')}
-      style={{backgroundColor: 'rgb(79, 70, 229)'}}>
+      style={{ backgroundColor: 'rgb(79, 70, 229)' }}>
       <div className="container">
         <div className="row">
           <div className="col col--10 col--offset-1">
@@ -86,15 +86,18 @@ function GreatFrontEndSection() {
               <div>
                 <h2
                   className={styles.sectionSponsorTitle}
-                  style={{fontSize: 'var(--ifm-h2-font-size)'}}>
+                  style={{ fontSize: 'var(--ifm-h2-font-size)' }}>
                   <strong>
-                    Want to practice front end questions and reference answers from experienced ex-FAANG senior engineers? Top front end interview practice platform{' '}
+                    Want to practice front end questions and reference answers
+                    from experienced ex-FAANG senior engineers? Top front end
+                    interview practice platform{' '}
                     <a
                       href="https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=homepage&fpr=frontendinterviewhandbook"
-                      style={{color: '#fff', textDecoration: 'underline'}}>
+                      style={{ color: '#fff', textDecoration: 'underline' }}>
                       GreatFrontEnd
                     </a>{' '}
-                    is now offering 25% off their lifetime plan! Try out their free questions today:
+                    is now offering 25% off their lifetime plan! Try out their
+                    free questions today:
                   </strong>
                 </h2>
                 <div className="margin-vert--lg">
@@ -139,7 +142,7 @@ function FAANGTechLeadsSection() {
   return (
     <div
       className={clsx('padding-vert--lg')}
-      style={{backgroundColor: 'rgb(244, 63, 94)'}}>
+      style={{ backgroundColor: 'rgb(244, 63, 94)' }}>
       <div className="container">
         <div className="row">
           <div className="col col--8 col--offset-2">
@@ -249,7 +252,7 @@ function FeaturesSection() {
   );
 }
 
-function Tweet({url, handle, name, content, avatar, date}) {
+function Tweet({ url, handle, name, content, avatar, date }) {
   return (
     <div className={clsx('card', styles.tweet)}>
       <div className="card__header">
diff --git a/website/src/theme/DocItem/Content/index.js b/website/src/theme/DocItem/Content/index.js
index 5763f7c15..afc2e82c3 100644
--- a/website/src/theme/DocItem/Content/index.js
+++ b/website/src/theme/DocItem/Content/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
-import {ThemeClassNames} from '@docusaurus/theme-common';
-import {useDoc} from '@docusaurus/theme-common/internal';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/theme-common/internal';
 import Heading from '@theme/Heading';
 import MDXContent from '@theme/MDXContent';
 /**
@@ -15,7 +15,7 @@ import MDXContent from '@theme/MDXContent';
  - the markdown content does not already contain a top-level h1 heading
 */
 function useSyntheticTitle() {
-  const {metadata, frontMatter, contentTitle} = useDoc();
+  const { metadata, frontMatter, contentTitle } = useDoc();
   const shouldRender =
     !frontMatter.hide_title && typeof contentTitle === 'undefined';
   if (!shouldRender) {
@@ -23,7 +23,7 @@ function useSyntheticTitle() {
   }
   return metadata.title;
 }
-export default function DocItemContent({children}) {
+export default function DocItemContent({ children }) {
   const syntheticTitle = useSyntheticTitle();
   return (
     <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
diff --git a/website/src/theme/DocItem/Layout/index.js b/website/src/theme/DocItem/Layout/index.js
index da5ca920d..2aa6bd73b 100644
--- a/website/src/theme/DocItem/Layout/index.js
+++ b/website/src/theme/DocItem/Layout/index.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
-import {useWindowSize} from '@docusaurus/theme-common';
-import {useDoc} from '@docusaurus/theme-common/internal';
+import { useWindowSize } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/theme-common/internal';
 import DocItemPaginator from '@theme/DocItem/Paginator';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
@@ -17,7 +17,7 @@ import SidebarAd from '../../../components/SidebarAd';
  * Decide if the toc should be rendered, on mobile or desktop viewports
  */
 function useDocTOC() {
-  const {frontMatter, toc} = useDoc();
+  const { frontMatter, toc } = useDoc();
   const windowSize = useWindowSize();
   const hidden = frontMatter.hide_table_of_contents;
   const canRender = !hidden && toc.length > 0;
@@ -32,7 +32,7 @@ function useDocTOC() {
     desktop,
   };
 }
-export default function DocItemLayout({children}) {
+export default function DocItemLayout({ children }) {
   const docTOC = useDocTOC();
   return (
     <div className="row">
diff --git a/website/src/theme/DocSidebar/Mobile/index.d.ts b/website/src/theme/DocSidebar/Mobile/index.d.ts
index f4e51370c..0ba788e58 100644
--- a/website/src/theme/DocSidebar/Mobile/index.d.ts
+++ b/website/src/theme/DocSidebar/Mobile/index.d.ts
@@ -1,5 +1,5 @@
 import React from 'react';
-import type {Props} from '@theme/DocSidebar/Mobile';
+import type { Props } from '@theme/DocSidebar/Mobile';
 declare function DocSidebarMobile(props: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof DocSidebarMobile>;
 export default _default;
diff --git a/website/src/theme/DocSidebar/Mobile/index.js b/website/src/theme/DocSidebar/Mobile/index.js
index f98a6072c..db3dfbd99 100644
--- a/website/src/theme/DocSidebar/Mobile/index.js
+++ b/website/src/theme/DocSidebar/Mobile/index.js
@@ -4,11 +4,11 @@ import {
   NavbarSecondaryMenuFiller,
   ThemeClassNames,
 } from '@docusaurus/theme-common';
-import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
 import DocSidebarItems from '@theme/DocSidebarItems';
 import SidebarAd from '../../../components/SidebarAd';
 // eslint-disable-next-line react/function-component-definition
-const DocSidebarMobileSecondaryMenu = ({sidebar, path}) => {
+const DocSidebarMobileSecondaryMenu = ({ sidebar, path }) => {
   const mobileSidebar = useNavbarMobileSidebar();
   return (
     <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
diff --git a/website/src/theme/TOC/index.js b/website/src/theme/TOC/index.js
index 41e42a538..8757047e3 100644
--- a/website/src/theme/TOC/index.js
+++ b/website/src/theme/TOC/index.js
@@ -8,7 +8,7 @@ import SidebarAd from '../../components/SidebarAd';
 const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
 const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
 
-function TOC({className, ...props}) {
+function TOC({ className, ...props }) {
   return (
     <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
       <div className="margin--md">