misc: prettify files

.prettierrc

@@ -1,6 +1,5 @@
 {
   "bracketSameLine": true,
-  "bracketSpacing": false,
   "printWidth": 80,
   "proseWrap": "never",
   "singleQuote": true,

.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.

.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

.wip/topics/caching.md

@@ -1,5 +1,4 @@
-Caching
-==
+# Caching
 
 WIP.
 

.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.
 
@@ -20,7 +19,7 @@ If you are a total beginner to CSS, Codecademy's [HTML & CSS course](https://www
 - [**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

.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)

.wip/topics/dom.md

@@ -1,5 +1,4 @@
-DOM
-==
+# DOM
 
 ## Glossary
 

.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.
 

.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
 

.wip/topics/networking.md

@@ -1,5 +1,4 @@
-Networking
-==
+# Networking
 
 WIP.
 

.wip/topics/performance.md

@@ -1,5 +1,4 @@
-Performance
-==
+# Performance
 
 WIP.
 

.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

.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.
 

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).
-

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=)

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)

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!

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,

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`

packages/behavioral-interview-guidebook/contents/collaboration/zh-CN.mdx

@@ -3,7 +3,7 @@ title: 回答 "告诉我什么时候...... "的协作技能
 description: 学习如何回答针对前端/网络开发人员/软件工程师的协作行为问题，包括沟通和团队工作。 参考样本答案。
 ---
 
-正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，**合作**是需要准备的8大类问题中的一类。
+正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，**合作**是需要准备的 8 大类问题中的一类。
 
 合作问题可能是前端行为面试中最常见的行为问题，因为它们包含了大量相关的特征，为了便于故事/项目的准备，可以将其分组。
 
@@ -29,7 +29,7 @@ description: 学习如何回答针对前端/网络开发人员/软件工程师
 
 ## 抽象合作问题
 
-正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，为那里的每一个行为问题准备具体的答案是不切实际的。 然而，通过将具体问题批量化为**类似的主题**，并准备涵盖大量问题要求的故事，我们可以将准备的故事数量减少到3-5个左右。
+正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，为那里的每一个行为问题准备具体的答案是不切实际的。 然而，通过将具体问题批量化为**类似的主题**，并准备涵盖大量问题要求的故事，我们可以将准备的故事数量减少到 3-5 个左右。
 
 合作是这样一个主题，它可以将沟通、团队工作、适应性和指导性等子要求组合起来。 对于每个子要求，我们总结了常见的问题，也抽象出了**面试官在这些问题中所关注的特征**：
 
@@ -70,7 +70,7 @@ 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,7 +133,7 @@ description: 学习如何回答针对前端/网络开发人员/软件工程师
 
 ### 示例故事
 
-虽然看起来有大量的所需特征，但你可以用工程团队中非常常见的情况来覆盖其中的90%：
+虽然看起来有大量的所需特征，但你可以用工程团队中非常常见的情况来覆盖其中的 90%：
 
 - 你必须在一个跨职能的团队中工作（例如与商业利益相关者或产品经理或设计师），在一个高压的情况下，优先事项和要求迅速变化。
 - 商业/设计和工程之间存在利益冲突，例如商业/设计推动（要求）更严格的最后期限，而从工程的角度来看，急于追求这些最后期限将导致大量的技术债务。
@@ -146,7 +146,7 @@ description: 学习如何回答针对前端/网络开发人员/软件工程师
 #### 情况
 
 - 在我目前作为开办阶段的前端工程师的工作中，我不得不领导一个非常紧迫的营销项目的发展。 在功能上与营销和设计相交叉。
--   在某种程度上，市场部曾预计该功能将在下周内发货，但由于对合作伙伴的API团队的依赖，工程部出现了重大障碍，该团队的交付成果由于最近两名高级成员的离职而被推迟。
+- 在某种程度上，市场部曾预计该功能将在下周内发货，但由于对合作伙伴的 API 团队的依赖，工程部出现了重大障碍，该团队的交付成果由于最近两名高级成员的离职而被推迟。
 - 这种情况变得更加激烈，因为市场部不理解工程部所面临的障碍。
 
 #### 任务
@@ -190,13 +190,13 @@ description: 学习如何回答针对前端/网络开发人员/软件工程师
 
 ## 合作问题和答案示例
 
-上面的故事样本已经回答了上面的大部分（12个）例子问题。 需要稍加修改的问题将在下文阐述。 如果你还没有，请查看我们的[面试处置技巧](/behavioral-interview-guidebook)，以增加你给人留下好印象的机会。
+上面的故事样本已经回答了上面的大部分（12 个）例子问题。 需要稍加修改的问题将在下文阐述。 如果你还没有，请查看我们的[面试处置技巧](/behavioral-interview-guidebook)，以增加你给人留下好印象的机会。
 
 ### 你如何确保你的信息被受众理解并得到很好的接受？
 
 你可以在回答这个问题时对样本故事稍作修改，重点放在技术信息的解释上：
 
-> 为了确保我的信息被充分理解，在解释之后，我会提供一些例子来说明我的观点，同时也会向听众提出一些问题，以确认他们的理解。 在我几个月前做的一个项目中，我不得不向业务团队解释为什么一个紧急功能被外部团队的API延迟了，以及如何延迟的。 为了做到这一点，我把重点放在企业需要的关键收获上--也就是该功能是如何被这种延迟所影响的，并利用视觉辅助工具以及使用简单清晰的语言。 我还举了一些例子，同时提出问题以确定他们对我的解释的理解。 这使得业务团队能够很好地理解依赖性，从而集思广益，即使没有外部依赖，也能够交付功能。
+> 为了确保我的信息被充分理解，在解释之后，我会提供一些例子来说明我的观点，同时也会向听众提出一些问题，以确认他们的理解。 在我几个月前做的一个项目中，我不得不向业务团队解释为什么一个紧急功能被外部团队的 API 延迟了，以及如何延迟的。 为了做到这一点，我把重点放在企业需要的关键收获上--也就是该功能是如何被这种延迟所影响的，并利用视觉辅助工具以及使用简单清晰的语言。 我还举了一些例子，同时提出问题以确定他们对我的解释的理解。 这使得业务团队能够很好地理解依赖性，从而集思广益，即使没有外部依赖，也能够交付功能。
 
 ### 你如何处理与那些没有在最后期限或职责范围内完成工作的队友合作？
 

packages/behavioral-interview-guidebook/contents/growth-mindset/zh-CN.mdx

@@ -3,7 +3,7 @@ title: 回答 "告诉我什么时候...... "的成长心态
 description: 学习如何回答关于成长心态的行为问题，针对前端/网络开发者/软件工程师。 参考样本答案。
 ---
 
-正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，**成长心态**是需要准备的8大类问题中的一类。
+正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，**成长心态**是需要准备的 8 大类问题中的一类。
 
 在本指南中，您将学习如何处理这些问题：
 
@@ -39,7 +39,7 @@ description: 学习如何回答关于成长心态的行为问题，针对前端/
 
 ### 确定的主题
 
-正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，为那里的每一个行为问题准备具体的答案是不切实际的。 然而，通过将具体问题批量化为类似的主题，并准备涵盖大量问题要求的故事，我们可以将准备的故事数量减少到3-5个左右。
+正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，为那里的每一个行为问题准备具体的答案是不切实际的。 然而，通过将具体问题批量化为类似的主题，并准备涵盖大量问题要求的故事，我们可以将准备的故事数量减少到 3-5 个左右。
 
 这些是似乎反复出现的主题：
 
@@ -49,7 +49,7 @@ 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) 是我们推荐的最简单、最有效的框架，用于构造你的故事。
 
 以下是我们为每个已确定的主题推荐的方法，你可以用这些方法构建你的故事：
 
@@ -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,9 +99,9 @@ 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 技术，并展示了面试官希望在候选人身上看到的许多品质：
 
@@ -110,13 +110,13 @@ description: 学习如何回答关于成长心态的行为问题，针对前端/
 - **倡议**：对缺乏增长的问题采取了行动。
 - **问题解决**：想出解决缺乏成长的方法，并付诸行动。
 - **建立友情**：为了一个共同的目标，召集志同道合的人。
--   **帮助提升他人**：创建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）。
 >
 > 在两个月内，我觉得自己学到了很多东西，对大部分的代码库都很熟悉。 我可以在没有导师指导的情况下建立端到端的功能。 为了帮助未来可能面临同样入职挑战的新员工，我在我们的内部维基中记下了我的学习成果，以及学习该主题的最佳资源链接。 我的经理对这一举措感到惊讶，并为此表扬了我。 今天，它是我们官方工程入职资源的一部分，我每隔一段时间就会更新它。 一些新加入者还感谢我我在维基上分享的知识，并使他们的入职过程更加顺利。
 

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 分评级尺度，例如非常好/好/达标/差/非常差之一。
 
 除此之外，面试官还可以标记是否没有足够的信息来做出判断，或者是否没有时间问及特定的信号。
 
@@ -98,7 +96,7 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 ### 典型的行为面试职级期望
 
-行为面试是一种面试格式，面试官可以根据求职者讲述的故事、其回答和制定的决策来评估其成熟度，从初级软件工程师到极其高级的职位不等。 工作经验的年限并不一定等同于特定的职级，因为有些人比其他人成熟得更快。 通常，职级的指导意见是考虑到工作经验的年限和职级期望而制定的。 下面提到的职级是基于谷歌和Facebook的职级，其中L3相当于初级软件工程师/应届毕业生。
+行为面试是一种面试格式，面试官可以根据求职者讲述的故事、其回答和制定的决策来评估其成熟度，从初级软件工程师到极其高级的职位不等。 工作经验的年限并不一定等同于特定的职级，因为有些人比其他人成熟得更快。 通常，职级的指导意见是考虑到工作经验的年限和职级期望而制定的。 下面提到的职级是基于谷歌和 Facebook 的职级，其中 L3 相当于初级软件工程师/应届毕业生。
 
 了解通常定义的工程师职级的预期行为，并精心设计您的回答，确保它们与您当前的职级或您所针对的职级相匹配。
 
@@ -146,7 +144,7 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 除了这些问题，我们还可以期望一般但常见的问题，例如“介绍一下自己”或“为什么加入这个公司”。
 
-问题的问法非常多样化。 虽然为所有问题做准备很耗时间，但我们可以将最常见的80％问题分类主题，并按照以下指南系统地解决这些问题：
+问题的问法非常多样化。 虽然为所有问题做准备很耗时间，但我们可以将最常见的 80％问题分类主题，并按照以下指南系统地解决这些问题：
 
 1.  [“介绍一下你自己…”] \(/behavioral-interview-guidebook/self-introduction)
 2.  “让我来看一下你的简历…”
@@ -160,7 +158,7 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 ### 根据常见主题准备几个好故事
 
-面对不同的“当你...... 的时候告诉我”类型的问题，解决问题的一般策略是准备3-5个通用的，经过深思熟虑的故事，可以用来解答多个需要的特征。 例如，与他人广泛合作的经验可以展示您的沟通，团队合作，领导能力，冲突管理等特点。 每当面试官问你一个问题时，你可以运用已准备好的故事并根据特定问题进行适当的调整。
+面对不同的“当你...... 的时候告诉我”类型的问题，解决问题的一般策略是准备 3-5 个通用的，经过深思熟虑的故事，可以用来解答多个需要的特征。 例如，与他人广泛合作的经验可以展示您的沟通，团队合作，领导能力，冲突管理等特点。 每当面试官问你一个问题时，你可以运用已准备好的故事并根据特定问题进行适当的调整。
 
 以下是一些选择和准备好项目经验作为故事的技巧：
 
@@ -169,7 +167,7 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 - 不要在同一轮面试中重复使用相同的故事。 面试官往往会讨论候选人的表现，因此过度使用相同的故事可能会被视为重复和经验不足。
 - 如上所述，面试官往往优先考虑后续问题以了解候选人真正的心理，动机和理解。 对于每个故事，请准备对每种替代操作的优缺点有一个扎实的理解，并反思您的内在动机。
 
-### 用STAR框架结构初始答案
+### 用 STAR 框架结构初始答案
 
 准备一个您可以使用的故事后，在回答具体问题时需要将其结构化。 面试官总是被要求关注候选人在面试期间实际的沟通能力（而不是他们声称的能力），评估方式如下：
 
@@ -178,14 +176,14 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 - 使他人对目的和行动清晰
 - 展示积极倾听
 
-为了实现以上目标，您需要在回答问题时将答案结构化，确保它简洁明了，时间不超过3分钟。 您可以使用例如STAR的框架作为大致指导：
+为了实现以上目标，您需要在回答问题时将答案结构化，确保它简洁明了，时间不超过 3 分钟。 您可以使用例如 STAR 的框架作为大致指导：
 
 - **情境**：介绍场景的基本细节，足够了解您所面临的挑战。 （不要花太多时间）
 - **任务**：您在情况下需要实现或完成什么？ （不要花太多时间）
 - **行动**：您采取了什么行动？ 这是您根据解决挑战或情况所采取的方法展示所需特质的地方。
 - **结果**：您的行动的结果是什么？
 
-以下是将STAR应用于回答行为面试问题“告诉我一个您曾经不得不管理多个相互冲突的优先事项以及您如何处理它”的示例：
+以下是将 STAR 应用于回答行为面试问题“告诉我一个您曾经不得不管理多个相互冲突的优先事项以及您如何处理它”的示例：
 
 #### 情境
 
@@ -213,7 +211,7 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 ### 熟能生巧
 
-在准备好您的故事并大致了解STAR之后，请使用准备好的故事和STAR格式回答我们列出的50个常见行为面试问题。 与其记忆答案，最好每次都练习口头回答。 这样可以使您巩固故事并熟悉STAR。
+在准备好您的故事并大致了解 STAR 之后，请使用准备好的故事和 STAR 格式回答我们列出的 50 个常见行为面试问题。 与其记忆答案，最好每次都练习口头回答。 这样可以使您巩固故事并熟悉 STAR。
 
 ## 行为面试中如何表现最佳
 

packages/behavioral-interview-guidebook/contents/problem-solving/zh-CN.mdx

@@ -3,7 +3,7 @@ title: 标题：回答“告诉我一个时间...”对于解决问题的技能
 description: 描述：学习如何回答有关前端/网络开发人员/软件工程师的解决问题技能和实现结果的行为问题。 参考示例答案。
 ---
 
-正如我们在[行为面试准备概述]中提到的，**解决问题和实现结果的驱动力**是8个主要问题类型之一。
+正如我们在[行为面试准备概述]中提到的，**解决问题和实现结果的驱动力**是 8 个主要问题类型之一。
 
 在本指南中，您将学习如何处理它们：
 
@@ -33,7 +33,7 @@ description: 描述：学习如何回答有关前端/网络开发人员/软件
 
 ## 将可能的问题抽象为常见主题
 
-正如我们在[行为面试准备概述]中提到的，为每个行为问题制定答案是不切实际的。 然而，通过将特定问题分批次到相似的主题中，并准备涵盖大量问题要求的故事，我们可以将要准备的故事数量减少到约3-5个故事。
+正如我们在[行为面试准备概述]中提到的，为每个行为问题制定答案是不切实际的。 然而，通过将特定问题分批次到相似的主题中，并准备涵盖大量问题要求的故事，我们可以将要准备的故事数量减少到约 3-5 个故事。
 
 在这个类别下有太多类型的解决问题和实现结果的行为问题，例如：
 
@@ -42,11 +42,11 @@ description: 描述：学习如何回答有关前端/网络开发人员/软件
 - 你能描述一次你创造性地解决了工程问题或实现了有意义的指标改进的经验吗？
 - 你能描述一次你必须做出重要的工程决策，以及你是如何在两者之间做出选择的吗？
 
-然而，当我们查看此类别下80％的问题时，通常会要求解决问题的过程或有效解决问题所需的特定特征，例如创意性、使用数据或者权衡评估。 从这些问题的答案中也可以推断问题或目标的来源，以及候选人是否能够在面对障碍时保持弹性。
+然而，当我们查看此类别下 80％的问题时，通常会要求解决问题的过程或有效解决问题所需的特定特征，例如创意性、使用数据或者权衡评估。 从这些问题的答案中也可以推断问题或目标的来源，以及候选人是否能够在面对障碍时保持弹性。
 
 ## 建议的答案框架
 
-像往常一样，我们推荐使用STAR格式来构建故事，它是最简单和最有效的框架。
+像往常一样，我们推荐使用 STAR 格式来构建故事，它是最简单和最有效的框架。
 
 尽管问题可能很多，但我们可以通过考虑一个强大的解决问题过程来抽象出所有解决问题行为问题的要求：
 
@@ -71,8 +71,8 @@ description: 描述：学习如何回答有关前端/网络开发人员/软件
 
 #### 情境
 
--   我是一家销售奢侈品的电商网站的技术主管。 该网站是一个Angular 1.5的单页面应用程序。
--   近年来，该产品显得有点老了——开发体验不佳，网站性能不佳。 初始加载速度超过3秒，转化率约为0.8％。
+- 我是一家销售奢侈品的电商网站的技术主管。 该网站是一个 Angular 1.5 的单页面应用程序。
+- 近年来，该产品显得有点老了——开发体验不佳，网站性能不佳。 初始加载速度超过 3 秒，转化率约为 0.8％。
 
 #### 任务
 
@@ -93,57 +93,57 @@ description: 描述：学习如何回答有关前端/网络开发人员/软件
 - 与团队进行头脑风暴会议，以想出改进的方法。
 - 为了改进，首先需要知道我们的表现如何。
   - 确认我们的性能和转化跟踪是否正常工作。
-    -   开始从Lighthouse和Core Web Vitals跟踪新指标。
+  - 开始从 Lighthouse 和 Core Web Vitals 跟踪新指标。
 - 与数据科学家合作创建性能和转化的仪表板，并获得一些见解：
   - 确定某些国家的转化率较低。
   - 移动用户与桌面用户相比具有较低的转化率。
--   与UX设计师和UX研究人员合作，识别网站上的 end-to-end购物体验问题。
-    -   UI元素之间间隔太大，需要大量滚动，影响了跳出率，因为一些用户不愿滚动。
+- 与 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的编程模型更容易理解。
+- **用户界面**：服务器端呈现对于其性能和 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）。
+  - **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。
+  - 在页面级别上拆分 JavaScript，而不是单独的包（由 Next.js 处理）。
+  - 对图片使用 WebP 格式。
+  - 将图片托管在 CDN 上，Adaptive 加载图片，因此移动设备加载较小的图片，合并重复的 JavaScript 库（data-fns 和 moment.js），切换到 lodash-es，删除了所有 jQuery 的用法-查看数据以识别不常用的功能并将其从产品详细信息页的代码中删除，JS 大小减少了 200 个+ kb。
 - **搜索引擎优化（SEO）**
-    -   使用SEO工具（例如Ahrefs）持续监测SEO。
-    -   与营销团队合作，确保营销内容包含Ahrefs显示的重要关键字。
-    -   调整页面URL以包括SEO关键字
+  - 使用 SEO 工具（例如 Ahrefs）持续监测 SEO。
+  - 与营销团队合作，确保营销内容包含 Ahrefs 显示的重要关键字。
+  - 调整页面 URL 以包括 SEO 关键字
 - 用户体验的改进
   - 只需单击一个页面即可付款，而不是使用两个页面付款，从而减少了点击次数。
-    -   减小了许多UI元素的高度。
+  - 减小了许多 UI 元素的高度。
   - 固定检查按钮，这样就不会错过。
 - 付款方式改进
-    -   分析了Stripe结账，并实施了特定国家的地址栏。
-    -   最初只有一种可用的付款方式：信用卡。 得到了数据科学家的帮助，以评估新的支付方式是否受欢迎，以及它们是否值得添加。 我们后来还增加了PayPal、谷歌支付和苹果支付等支付方式。
+  - 分析了 Stripe 结账，并实施了特定国家的地址栏。
+  - 最初只有一种可用的付款方式：信用卡。 得到了数据科学家的帮助，以评估新的支付方式是否受欢迎，以及它们是否值得添加。 我们后来还增加了 PayPal、谷歌支付和苹果支付等支付方式。
 
 **4. 解决方案评估**
 
--   **View和渲染**：选择Next.js，因为它由Vercel支持，拥有最大的社区。 React也是最流行的UI库，最容易为之招聘。
+- **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 而不是其他框架。
 
 ## 可能的后续问题的本质
 

packages/behavioral-interview-guidebook/contents/questions/zh-CN.mdx

@@ -7,7 +7,7 @@ description: 前端开发人员/网络开发人员/软件工程师应该练习
 
 正如[行为面谈准备概览](/behavioral-interview-guidebook/)中所提到的那样，大多数行为面谈问题可分为八个主题，以进行有效的准备工作。 我们建议候选人利用这一战略，然后请参阅下面的名单以供实践。
 
-## 最常见的16个问题
+## 最常见的 16 个问题
 
 1.  向我介绍你自己。
 2.  请告诉我你的简历经历。
@@ -43,7 +43,7 @@ description: 前端开发人员/网络开发人员/软件工程师应该练习
 
 ## 练习的附加问题
 
-我们将最常见的行为问题归纳为8大主题。 在学习时查看更多的练习题：
+我们将最常见的行为问题归纳为 8 大主题。 在学习时查看更多的练习题：
 
 - [“介绍一下你自己…”] \(/behavioral-interview-guidebook/self-introduction)
 - “让我来看一下你的简历…”

packages/behavioral-interview-guidebook/contents/self-introduction/pt-BR.mdx

@@ -80,7 +80,7 @@ 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." |

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 中建立了一个加密货币价格跟踪应用程序，以学习如何建立数据可视化重的客户应用程序，也解决了跟踪我的投资组合的个人痛点。" |
 
 请参考下面好的自我介绍的例子。
 
@@ -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 建立了一个内部工具，帮助开发者管理他们的测试骑手和司机账户。
 >
 > 我对谷歌的前端工程师职位感兴趣，因为我每天都在使用谷歌的产品，并且对他们精心设计的产品体验印象深刻。 能在这种影响数十亿人生活的产品上工作，那将是一个梦想成真。
 

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. 从公司的现任/前任员工那里收集有关公司/团队/职位的深入了解
 
 如果您以前是面试官，您会知道，大多数候选人在“为什么想在这个公司/团队工作”这个问题上表现不佳，因为他们倾向于基于公司的公共信息回答该问题，这可能不一定代表个人团队或部门的文化或情况。 例如，想象一下，您正在评估两名游戏开发团队的候选人：
 
-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 上搜索团队（尽可能具体地查询）
 
 #### 这里是一些有用的问题：
 
@@ -51,12 +51,12 @@ description: 学习如何简洁有效地回答有关公司动机的问题，适
 
 ## 示例问题和答案
 
-### “为什么想在TikTok Shop团队工作？”
+### “为什么想在 TikTok Shop 团队工作？”
 
-> 我在学校期间做过近4年的自由职业网络开发人员。 作为个人贡献者，我已经积累了丰富的经验，接下来的步骤是作为更大团队的一部分进行更大、更复杂的项目，以将我的开发技能提升到更高的水平。
+> 我在学校期间做过近 4 年的自由职业网络开发人员。 作为个人贡献者，我已经积累了丰富的经验，接下来的步骤是作为更大团队的一部分进行更大、更复杂的项目，以将我的开发技能提升到更高的水平。
 >
-> TikTok商城对我来说最重要的三件事是：
+> TikTok 商城对我来说最重要的三件事是：
 >
-> 1.  我喜欢知道我的开发努力可以具体地推动影响。 在当前阶段，TikTok商城仍处于产品生命周期的相对初级阶段，在这个阶段这是可能的。
-> 2.  TikTok商城服务于广大群众，必须处理与可访问性、本地化和相对新的电子商务等相关的挑战，这使我能够在该领域发展我的技能。
-> 3.  字节跳动（TikTok的母公司）内部开发了许多尖端技术，并使用开源技术。 我很兴奋向公司经验丰富的工程师学习如何将这些技术扩展到世界范围内。
+> 1.  我喜欢知道我的开发努力可以具体地推动影响。 在当前阶段，TikTok 商城仍处于产品生命周期的相对初级阶段，在这个阶段这是可能的。
+> 2.  TikTok 商城服务于广大群众，必须处理与可访问性、本地化和相对新的电子商务等相关的挑战，这使我能够在该领域发展我的技能。
+> 3.  字节跳动（TikTok 的母公司）内部开发了许多尖端技术，并使用开源技术。 我很兴奋向公司经验丰富的工程师学习如何将这些技术扩展到世界范围内。

packages/front-end-interview-guidebook/contents/algorithms/pt-BR.mdx

@@ -1,5 +1,5 @@
 ---
-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.
 ---
 
@@ -35,7 +35,7 @@ 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 |
 
@@ -67,7 +67,7 @@ a serem adicionados.
 ### `Map`
 
 | 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). |
@@ -83,7 +83,7 @@ a serem adicionados.
 ### `Set`
 
 | Operação | Complexidade de Tempo |
-| ------------------------- | --------------------------------------------------------------------------- |
+| --- | --- |
 | `Set.prototype.add()` | O(1) |
 | `Set.prototype.clear()` | O(n) |
 | `Set.prototype.delete()` | O(1) |

packages/front-end-interview-guidebook/contents/algorithms/zh-CN.mdx

@@ -3,13 +3,13 @@ title: 前端面试算法编码问题——如何准备
 description: 这是前端/网站开发者面试中准备算法编码问题的指南，包括需要了解的概念、面试评分标准和重要的实践问题。
 ---
 
-算法编码问题就是可以在LeetCode上找到的问题。 算法问题通常具有以下特征：
+算法编码问题就是可以在 LeetCode 上找到的问题。 算法问题通常具有以下特征：
 
 - 它们不特定于前端领域；可以通过大多数主流编程语言求解。
 - 通常附带不切实际的情景。 你在实际开发中不会遇到这样的问题。 有谁曾经不得不反转二叉树或计算字符串中回文子串的数量呢？
 - 代码效率（时间和空间复杂度）很重要，要想得到最有效的解决方案需要扎实掌握数据结构和算法知识。
 
-虽然算法编码问题不是前端特有的，但在这些问题中表现出色所需的技能——强大的分析思考能力、有效的沟通能力、熟练掌握常见的数据结构和算法、良好的代码卫生习惯，仍是优秀的前端工程师必须具备的关键技能。 优秀的前端工程师也是优秀的软件工程师，而优秀的软件工程师应该掌握基本的数据结构和算法。 因此，在面试过程中，很多公司仍然会问有关算法编码的问题。 熟悉数据结构和算法对于解决JavaScript编码问题和用户界面编码问题也有帮助。
+虽然算法编码问题不是前端特有的，但在这些问题中表现出色所需的技能——强大的分析思考能力、有效的沟通能力、熟练掌握常见的数据结构和算法、良好的代码卫生习惯，仍是优秀的前端工程师必须具备的关键技能。 优秀的前端工程师也是优秀的软件工程师，而优秀的软件工程师应该掌握基本的数据结构和算法。 因此，在面试过程中，很多公司仍然会问有关算法编码的问题。 熟悉数据结构和算法对于解决 JavaScript 编码问题和用户界面编码问题也有帮助。
 
 关于算法编码面试的资源有很多，因为它们不特定于前端，所以我们不会在这里详细介绍。 如果您想了解有关算法编码面试的更多信息，我们建议参考[Tech Interview Handbook](https://www.techinterviewhandbook.org)。
 
@@ -21,30 +21,30 @@ description: 这是前端/网站开发者面试中准备算法编码问题的指
 
 ## 如何准备
 
-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)       |
@@ -66,31 +66,31 @@ description: 这是前端/网站开发者面试中准备算法编码问题的指
 ### `Map`
 
 | 操作 | 时间复杂度 |
-| ------------------------- | -------------------------------------- |
+| --- | --- |
 | `Map.prototype.clear()` | O(n) |
 | `Map.prototype.delete()` | O(1) |
-| `Map.prototype.entries()` | O(1)，因为它返回一个迭代器。 获取所有条目将花费O(n)时间。      |
+| `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.keys()` | O(1)，因为它返回一个迭代器。 获取所有的 key 将需要 O(n)时间。 |
 | `Map.prototype.set()` | O(1) |
-| `Map.prototype.values()`  | O(1)，因为它返回一个迭代器。 获取所有 value 将花费O(n)时间。 |
+| `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.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.keys()` | O(1)，因为它返回一个迭代器。 获取所有的 key 将需要 O(n)时间。 |
+| `Set.prototype.values()` | O(1)，因为它返回一个迭代器。 获取所有 value 将花费 O(n)时间。 |
 
 <sup>*</sup> `n`是集合中元素的数量。
 
@@ -105,13 +105,13 @@ description: 这是前端/网站开发者面试中准备算法编码问题的指
 
 ## 有用的提示
 
--   **虚构的想法**。 JavaScript的标准库不包含队列，堆，二分查找等一些有用的数据结构和算法，这可能会使您在JavaScript编码面试中感到困难。 但是，你可以问面试官是否可以假装这样的数据结构/算法存在，并直接在你的解决方案中使用它而不实现它。
+- **虚构的想法**。 JavaScript 的标准库不包含队列，堆，二分查找等一些有用的数据结构和算法，这可能会使您在 JavaScript 编码面试中感到困难。 但是，你可以问面试官是否可以假装这样的数据结构/算法存在，并直接在你的解决方案中使用它而不实现它。
 - **纯函数**。 编写纯函数，这样可以使函数具有可重复使用性和模块化性，也就是说，函数不依赖于函数外的状态，并且不会产生副作用。
--   **明智地选择数据结构**。注意选择数据结构并了解代码的时间复杂度。 熟悉JavaScript数组、对象、集合、映射的时间/空间复杂度，如有必要，可以在解决方案中使用它们。 其中一些时间/空间的复杂度在不同的语言中有所不同。 如果可以使用哈希映射在O(n)的运行时内完成任务，就不要编写O(n<sup>2</sup>)的代码。
+- **明智地选择数据结构**。注意选择数据结构并了解代码的时间复杂度。 熟悉 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 中的操作。

packages/front-end-interview-guidebook/contents/coding/pt-BR.mdx

@@ -34,12 +34,12 @@ 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 |

packages/front-end-interview-guidebook/contents/coding/zh-CN.mdx

@@ -6,8 +6,8 @@ description: 准备前端/ Web开发人员面试中的编码问题——了解
 编码面试是评估前端工程师的主要方式，可以跨越多轮和多个面试阶段，因此练习编码面试非常重要。 回顾一下，以下是您可能会被问到的三种编码问题类型：
 
 - **算法编码**：解决棘手的算法问题，评估您对数据结构、算法和时间复杂性的理解。
--   **JavaScript编码**：在前端领域中实现与前端开发常用的函数或数据结构相关的JavaScript。
--   **用户界面编码**：使用HTML、CSS和JavaScript构建用户界面（组件、小部件、应用程序），有时甚至使用JavaScript框架。
+- **JavaScript 编码**：在前端领域中实现与前端开发常用的函数或数据结构相关的 JavaScript。
+- **用户界面编码**：使用 HTML、CSS 和 JavaScript 构建用户界面（组件、小部件、应用程序），有时甚至使用 JavaScript 框架。
 
 ## 编码环境
 
@@ -15,31 +15,31 @@ 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            | 是   | 是       | 是             |
 | 白板           | 否   | 否       | 否             |
@@ -52,7 +52,7 @@ description: 准备前端/ Web开发人员面试中的编码问题——了解
   - 复制行。
   - 更改符号（变量）名称。
 - 提前了解您将在自己的笔记本电脑、给予您的笔记本电脑还是白板上编码。
-    -   如果您将在自己的笔记本电脑上进行编码，并且可以使用自己的IDE，请确保IDE正常运行，正确安装了Node.js和npm，并且可以在localhost上运行本地Web服务器并在您的浏览器中访问它们。
+  - 如果您将在自己的笔记本电脑上进行编码，并且可以使用自己的 IDE，请确保 IDE 正常运行，正确安装了 Node.js 和 npm，并且可以在 localhost 上运行本地 Web 服务器并在您的浏览器中访问它们。
 - 不要过分依赖代码的预览和执行。 这向您的面试官表明，您不确定自己输入了什么，并进行尝试和错误开发，这不是积极的信号。
 
 ## 特定类型的提示
@@ -60,12 +60,12 @@ description: 准备前端/ Web开发人员面试中的编码问题——了解
 请继续阅读每种编码面试类型的提示：
 
 - [算法编码](/front-end-interview-guidebook/algorithms)
--   [JavaScript编码](/front-end-interview-guidebook/javascript)
+- [JavaScript 编码](/front-end-interview-guidebook/javascript)
 - [用户界面编码](/front-end-interview-guidebook/user-interface)
 
 ## 练习问题
 
-GreatFrontEnd有一个长列表的[编码问题](/prepare/coding)，您可以练习并花时间检查它们。
+GreatFrontEnd 有一个长列表的[编码问题](/prepare/coding)，您可以练习并花时间检查它们。
 
 请注意，我们在某些问题中特意保持模糊，并没有提出完整的要求。 这是为了训练您提前思考并考虑在解决方案时可能需要注意哪些可能的事项。
 

packages/front-end-interview-guidebook/contents/javascript/pt-BR.mdx

@@ -72,7 +72,7 @@ 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 |

packages/front-end-interview-guidebook/contents/javascript/zh-CN.mdx

@@ -3,97 +3,97 @@ 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)。
+- 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)。
+- 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和许多第三方库中）
+  - [`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 的标准库没有一些有用的数据结构和算法，例如队列、堆、二分搜索，这可以使您在 JavaScript 编码面试期间更轻松。 然而，您可以询问面试官是否可以假装这样的数据结构/算法存在，并直接在解决方案中使用它，而无需实现它。
 - **纯函数**。 编写纯函数，这些函数具有可重用和可插入性的好处，即函数不依赖于函数外的状态，并且不会产生副作用。
--   **明智地选择数据结构**。注意您选择数据结构的选择，并了解代码的时间复杂度。 如果要在解决方案中使用基本JavaScript数组、对象、集合、映射操作，应熟悉这些时间/空间复杂度。 这些时间/空间复杂度在不同的语言中可能有所不同。 不要编写运行时间为O(n<sup>2</sup>)的代码，如果可以使用哈希图来在O(n)运行时间内完成操作，则可以避免此类情况。
+- **明智地选择数据结构**。注意您选择数据结构的选择，并了解代码的时间复杂度。 如果要在解决方案中使用基本 JavaScript 数组、对象、集合、映射操作，应熟悉这些时间/空间复杂度。 这些时间/空间复杂度在不同的语言中可能有所不同。 不要编写运行时间为 O(n<sup>2</sup>)的代码，如果可以使用哈希图来在 O(n)运行时间内完成操作，则可以避免此类情况。
 - **`this`很重要**。 如果一个函数接受回调函数作为参数，请考虑`this`变量应该如何行动。 对于许多内置函数，`this`是回调函数调用时提供的参数之一。
 - **回调函数内的突变**。注意回调函数突变正在处理的数据结构。 您可能不需要在面试期间处理此情况，但应在相关情况下明确提出此类情况。
 - **递归边缘案例**。
@@ -102,7 +102,7 @@ JavaScript编码面试类似于算法编码面试，应该采用相似的方法
 
 ## 最佳实践问题
 
-从经验上看，在频率和涵盖的重要概念方面，最佳的JavaScript编码面试问题是：
+从经验上看，在频率和涵盖的重要概念方面，最佳的 JavaScript 编码面试问题是：
 
 - [Debounce](/questions/javascript/debounce)
 - [Throttle](/questions/javascript/throttle)
@@ -114,6 +114,6 @@ JavaScript编码面试类似于算法编码面试，应该采用相似的方法
 - [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 资深工程师编写的解决方案。
 
 请注意，我们在某些问题中故意含糊不清，并没有在问题说明中全面介绍要求。 但是，我们将在解决方案中涵盖尽可能多的方面。 在阅读解决方案时，如果您发现错过了一些内容，可能会感到沮丧，但是这可以锻炼您的提前思考，并考虑在解决方案工作时需要注意哪些可能区域。 最好在练习期间找出，而不是在实际面试中发现。

packages/front-end-interview-guidebook/contents/overview/pt-BR.mdx

@@ -94,7 +94,7 @@ 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 |
@@ -108,7 +108,7 @@ A matriz a seguir mostra a relevância/probabilidade de cada tipo de pergunta du
 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 |

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.  **复杂的用户界面组件**：自动完成，下拉菜单，模态
 
@@ -79,9 +79,9 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
     - 招聘人员通话（可能会问有关测验问题）
     - 自动分级的在线评估或接回家的项目
 2.  **电话筛选**
-    -   编程（实现算法，JavaScript函数或构建用户界面）
+    - 编程（实现算法，JavaScript 函数或构建用户界面）
 3.  **完整循环**
-    -   编程环节（实现算法，JavaScript函数或构建用户界面）
+    - 编程环节（实现算法，JavaScript 函数或构建用户界面）
     - 系统设计环节
     - 行为环节
 
@@ -94,7 +94,7 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
 以下矩阵显示了每个面试轮次中每种问题类型的相关程度/可能性。 面试轮可能包括来自不同问题类型的问题。
 
 | 环节         | 测验 | 算法 | UI  | JavaScript | 系统设计 |
-| -------------- | ---- | ------- | ---- | ---------- | ----------- |
+| ------------ | ---- | ---- | --- | ---------- | -------- |
 | 在线评估     | 中等 | 高   | 高  | 高         | 无       |
 | 招聘人员通话 | 中等 | 无   | 无  | 无         | 无       |
 | 接回家的项目 | 无   | 无   | 高  | 中等       | 中等     |
@@ -108,7 +108,7 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
 以下是美国顶尖公司问的问题类型摘要。
 
 | 公司          | 测验 | 算法 | JavaScript | UI  | 系统设计 | 行为面试 |
-| :------------ | :-: | :-: | :--------: | :-: | :--: | :--: |
+| :------------ | :--: | :--: | :--------: | :-: | :------: | :------: |
 | 爱彼迎        |  否  |  是  |     是     | 是  |    否    |    是    |
 | 亚马逊        |  是  |  是  |     是     | 是  |    是    |    是    |
 | 苹果          |  是  |  是  |     是     | 是  |   未知   |    是    |
@@ -126,8 +126,8 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
 
 - **测验**：封闭的测验/问答样式问题。
 - **算法**：实现解决算法问题的功能。 通常不特定于前端领域。
--   **JavaScript**：在JavaScript中实现与前端领域相关的功能/类。
--   **用户界面**：使用HTML/CSS/JavaScript构建用户界面。 一些公司允许您使用自己选择的框架，而有些公司只允许使用Vanilla JS/某些框架。
+- **JavaScript**：在 JavaScript 中实现与前端领域相关的功能/类。
+- **用户界面**：使用 HTML/CSS/JavaScript 构建用户界面。 一些公司允许您使用自己选择的框架，而有些公司只允许使用 Vanilla JS/某些框架。
 - **系统设计**：设计系统并讨论体系结构及其组成部分。
 - **行为问题**：讨论与他人合作的具体经验以及您如何处理困难情况。
 
@@ -137,7 +137,7 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
 
 - [编程问题](/front-end-interview-guidebook/coding)
   - [算法问题](/front-end-interview-guidebook/algorithms)
-    -   [JavaScript问题](/front-end-interview-guidebook/javascript)
+  - [JavaScript 问题](/front-end-interview-guidebook/javascript)
   - [用户界面问题](/front-end-interview-guidebook/user-interface)
 - [系统设计问题](/front-end-interview-guidebook/system-design)
 - [测验问题](/front-end-interview-guidebook/quiz)

packages/front-end-interview-guidebook/contents/quiz/pt-BR.mdx

@@ -34,7 +34,7 @@ Como você pode ver, pode-se esperar que façam perguntas de quiz em quase todas
 ## 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 |

packages/front-end-interview-guidebook/contents/quiz/zh-CN.mdx

@@ -7,17 +7,17 @@ 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)
+- [解释 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)
+- [解释 JavaScript 中的`this`如何工作。](/questions/quiz/explain-how-this-works-in-javascript)
 
 除了要求您了解前端基础知识（HTML、CSS、JavaScript），如果您声称了解某些具体框架，面试官也可能就相关问题向您询问（无论是面试时口头提问还是确认您的简历时）：
 
--   X技术解决了哪些问题？
--   X技术的优点和缺点是什么？
--   X技术的底层是如何工作的？
--   X技术与Y技术有何区别？
+- X 技术解决了哪些问题？
+- X 技术的优点和缺点是什么？
+- X 技术的底层是如何工作的？
+- X 技术与 Y 技术有何区别？
 
 ## 相关环节
 
@@ -34,12 +34,12 @@ description: 准备测验式前端面试问题的指南——预期情况，需
 ## 重要概念
 
 | 领域 | 主题 |
-| ---------- | ----------------------------------------------------------------------------------- |
-| HTML       | 语义化HTML，块级元素和行内元素，`<head>`、`<script>`、`<style>`、`<link>`、`<form>`、`<input>`，表单验证/提交 |
+| --- | --- |
+| 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`）         |
+| 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)

packages/front-end-interview-guidebook/contents/resume/zh-CN.mdx

@@ -9,44 +9,44 @@ description: 提高你的前端开发者/网页开发者的简历，以获得面
 
 ## 基本要求
 
--   如果您有不到5年的经验，则最好不要超过一页，最多不要超过两页。
--   使用Microsoft Word、Google Docs、Pages或LaTeX构建，以便应聘者跟踪系统（ATS）可以解析简历。 避免使用设计软件。
--   提交PDF格式。
+- 如果您有不到 5 年的经验，则最好不要超过一页，最多不要超过两页。
+- 使用 Microsoft Word、Google Docs、Pages 或 LaTeX 构建，以便应聘者跟踪系统（ATS）可以解析简历。 避免使用设计软件。
+- 提交 PDF 格式。
 
 ## 格式和美观度
 
 前端工程师经常处理用户界面，并且期望他们有敏锐的设计感。 如果您的简历外观不美观，那么这将给你身为前端工程师的形象带来很不好的影响。
 
 - 使用单列格式。
--   使用大多数操作系统上可用的常见字体，例如Arial、Calibri或Garamond。 避免花俏的字体。
+- 使用大多数操作系统上可用的常见字体，例如 Arial、Calibri 或 Garamond。 避免花俏的字体。
 - 只使用一个或最多两个字体（一个用于标题，另一个用于正文）。
--   最小字体大小为11px。
+- 最小字体大小为 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得分改进等。
+- **性能**：提供的性能改进，以及它们所带来的百分比收益。 例如， 页面加载大小、页面加载时间、Lighthouse 得分改进等。
 - **测试**：编写测试的数量，它们覆盖了多少重要流程，测试覆盖率的百分比增加。
--   **SEO**：SEO错误/警告的降低占百分比或是具体数字。 如果公司使用SEO工具如Ahrefs和Semrush，则可以轻松获得此度量标准。
--   **可访问性(a11y)**：修复的a11y错误数量，改进了符合WCAG AA/AAA级标准的流程数目，以及增加的a11y组件数目。
--   **工具**：现代化技术在代码库中的现代化，例如将jQuery代码库迁移到React、通过引入TypeScript提高类型安全性等。 要么描述产品，要么提到代码行数/工程师数量，以更好地理解规模和复杂性。
+- **SEO**：SEO 错误/警告的降低占百分比或是具体数字。 如果公司使用 SEO 工具如 Ahrefs 和 Semrush，则可以轻松获得此度量标准。
+- **可访问性(a11y)**：修复的 a11y 错误数量，改进了符合 WCAG AA/AAA 级标准的流程数目，以及增加的 a11y 组件数目。
+- **工具**：现代化技术在代码库中的现代化，例如将 jQuery 代码库迁移到 React、通过引入 TypeScript 提高类型安全性等。 要么描述产品，要么提到代码行数/工程师数量，以更好地理解规模和复杂性。
 
 ## 技能部分
 
-“技能”部分是你拥有的语言和技术的列表，可作为当ATS/招聘人员/招聘经理阅读此部分时的快速清单/摘要。 至少，应该为“语言”和“技术”类别有两个列表项：
+“技能”部分是你拥有的语言和技术的列表，可作为当 ATS/招聘人员/招聘经理阅读此部分时的快速清单/摘要。 至少，应该为“语言”和“技术”类别有两个列表项：
 
 由于构建前端应用程序需要多种不同的技术，您可能会发现您有许多要添加到简历技能部分中的技术。 但不要添加每个技术！ 这会削弱实际重要技能的权重。 优先考虑以下语言/技术：
 
@@ -56,7 +56,7 @@ description: 提高你的前端开发者/网页开发者的简历，以获得面
 
 ### 2. 仅列出影响架构的关键技术
 
-像React这样的库对其他相关技术选择产生了很大影响，而像Underscore/Lodash这样的库与架构无关，可以轻易地被替换掉。 优先考虑前者，省略小型/实用库，这些库易于替换。
+像 React 这样的库对其他相关技术选择产生了很大影响，而像 Underscore/Lodash 这样的库与架构无关，可以轻易地被替换掉。 优先考虑前者，省略小型/实用库，这些库易于替换。
 
 ### 3. 广为人知或迅速走红
 
@@ -64,7 +64,7 @@ description: 提高你的前端开发者/网页开发者的简历，以获得面
 
 ### 4. 展示您的广度
 
-列出所有的React、Angular和Vue（所有前端视图框架）是过度的，即使您确实熟悉它们中的所有内容。 很少有工作列表会列出多个用于同一目的的技术（如果他们这样做，这是一个红旗信号）。 添加过多的技术（特别是同一类别的技术）会使读者更难以了解您的技能。
+列出所有的 React、Angular 和 Vue（所有前端视图框架）是过度的，即使您确实熟悉它们中的所有内容。 很少有工作列表会列出多个用于同一目的的技术（如果他们这样做，这是一个红旗信号）。 添加过多的技术（特别是同一类别的技术）会使读者更难以了解您的技能。
 
 尝试列出至少一个，最多两个属于以下类别的技术。 不能全部都适用于您，因此只包含相关的内容。 下面是一些热门的例子。
 
@@ -72,7 +72,7 @@ description: 提高你的前端开发者/网页开发者的简历，以获得面
 - **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/)
+- **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/)
@@ -87,11 +87,11 @@ description: 提高你的前端开发者/网页开发者的简历，以获得面
 - **语言**：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 以包括产品的截图。 将项目代码和现场网站的链接添加到简历中。
 
 开源贡献，尤其是对复杂代码库的非微小更改，被视为技术能力的标志。 如果您已经创建或是开源项目的维护者，则更好。
 

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)
+- [新闻动态（例如 Facebook）](/questions/system-design/news-feed-facebook)
 - [自动完成组件](/questions/system-design/autocomplete)
 - [电子商务网站（例如亚马逊）](/questions/system-design/e-commerce-amazon)
 - [图片轮播](/questions/system-design/image-carousel)

packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/zh-CN.mdx

@@ -3,13 +3,13 @@ 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，您的生活将非常艰难，因为代码可能会很快变得非常长而杂乱。 我们建议使用框架构建应用程序和游戏。
 - **未雨绸缪，计划周全**:考虑一下您的面试官可能要求您添加下一个功能。 设计代码的方式，使新功能可以轻松添加。
 
 ## 组件组织
@@ -17,38 +17,38 @@ description: 在前端/网络开发人员面试时，改善你必须建立的用
 您如何构建代码？
 
 - **采用容器/表示模式**:为了实现良好的解耦合，渲染代码应该与数据源无关。 将组件分成提供数据的外部组件和根据数据呈现视图的内部无状态组件。 这使视图可以从本地组件/应用状态切换到从网络加载的数据等情况，反之亦然，只要更改外部组件，内部组件就可以按原样使用。
--   **将应用程序分解为子组件**: 如果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 中所需的最小状态**: 状态越小，代码的可读性和理解能力就越强 -> 减少错误的可能性。
   - 识别必要状态和派生状态。 派生状态是可以从必要状态计算出的状态。
--   **将呈现代码与数据管理代码分开**: 将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 作为数据的功能并将代码分为两组（呈现代码和数据管理代码），以获得更好的可读性。 如果使用诸如 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>`。
+- **标题层次**: 确保标题标签具有层次结构，并且 DOM 中没有多个`<h1>`。
 - **交互元素**: 使用`<button>`将要求交互的元素包含其中。 不要将单击处理程序添加到`<div>`和`<span>`中。
 
 ### 表单
@@ -56,62 +56,62 @@ React的文档["管理状态"](https://beta.reactjs.org/learn/managing-state)是
 表单本身很复杂，值得有自己的部分。
 
 - **链接标签和输入**: 使用`id`和`for`链接`<label>`中的`<input>`以防止用户意外点击文本。
--   **在表单中包装输入**: 将`<input>`包装在`<form>`中，以便单击按钮和按Enter将提交表单。 如果使用Ajax进行网络请求，则记得添加`event.preventDefault()`。
+- **在表单中包装输入**: 将`<input>`包装在`<form>`中，以便单击按钮和按 Enter 将提交表单。 如果使用 Ajax 进行网络请求，则记得添加`event.preventDefault()`。
 - **输入应具有适当的类型**: `<input>`应具有适当的类型，例如电子邮件、密码、数字等。
--   **利用本机HTML表单验证**: 在可能的情况下，结合使用`required`属性和其他属性，如`pattern`、`min`、`max`等，以使用本机HTML表单验证。
+- **利用本机 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 媒体查询可用于在移动设备上显示不同的布局。
+  - 使交互元素（如按钮）足够大，以便按下（建议至少为 44 x 44 px），并且间距足够宽。
 - **错误状态**: 及时清晰地反映错误-表单验证错误、网络请求错误等。
--   **处理不同尺寸的图片**: 使您的UI适用于呈现所有大小/维度的图片并保留原始纵横比的情况。
-    -   使用CSS`background-image`和`background-position: contain`，以使图片适合在您定义的区域内。 如果可以将图片剪切（例如渐变背景），请使用`background-position: cover`。
+- **处理不同尺寸的图片**: 使您的 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更改并显示错误消息。
+- **乐观更新**: 高级技术，即使在网络请求仍在进行时也能反映出成功状态。 如果请求失败，请恢复 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 角色、状态和属性**:
+  - 为不使用自定义 HTML 标记构建的元素添加正确的`aria-role`。
   - 使用`aria-label`来描述其中没有文本显示的元素（例如仅图标的按钮）。
   - 通过`aria-describedby`/`aria-errormessage`将错误消息元素链接到负责它们的元素。
   - **图片“alt”文本**:为`<img>`元素添加`alt`属性，以便屏幕阅读器可以描述图片。
@@ -123,19 +123,19 @@ React的文档["管理状态"](https://beta.reactjs.org/learn/managing-state)是
   - **颜色对比度**: 文本/图片与背景之间的足够颜色对比度。
   - **元素大小**: 字体大小，交互元素大小应足够大，适合其预期的媒介。
 
-Google的[web.dev]有一个[免费的深入课程](https://web.dev/learn/accessibility/)，其中详细介绍了可访问性的内容，我们强烈推荐。
+Google 的[web.dev]有一个[免费的深入课程](https://web.dev/learn/accessibility/)，其中详细介绍了可访问性的内容，我们强烈推荐。
 
 ## 边缘情况
 
 在面试期间，可能没有足够的时间处理代码中的所有边缘情况，但是最好向面试官提及它们，以获得额外的答案。
 
--   **处理长字符串**: UI中的字符串（例如标题/按钮标签）可能会导致UI表现出奇怪的行为，例如溢出并影响周围元素的位置。 长字符串可能是用户输入或翻译的结果。
+- **处理长字符串**: UI 中的字符串（例如标题/按钮标签）可能会导致 UI 表现出奇怪的行为，例如溢出并影响周围元素的位置。 长字符串可能是用户输入或翻译的结果。
 - **空状态**: 显示一个空状态消息/占位符以指示内容的缺失，例如列表为空时。 什么也不显示可能会使用户认为仍在等待网络请求并且正在获取数据。
--   **列表中的太多项**: 在单个页面上显示太多项目可能会导致糟糕的UX（用户必须滚动很多）和反应灵敏度和内存消耗的糟糕性能。
+- **列表中的太多项**: 在单个页面上显示太多项目可能会导致糟糕的 UX（用户必须滚动很多）和反应灵敏度和内存消耗的糟糕性能。
   - **分页**: 将长列表分成多个页面。
   - [**虚拟列表**](https://www.patterns.dev/posts/virtual-lists):在动态列表中仅呈现可见行的内容，而不是整个列表。
-    -   截断多余的内容，并显示一个省略号。 `word-break` CSS属性非常有用。
-    -   将内容限制在前X个字符/单词，并在“显示更多”按钮后面隐藏多余的内容。
+  - 截断多余的内容，并显示一个省略号。 `word-break` CSS 属性非常有用。
+  - 将内容限制在前 X 个字符/单词，并在“显示更多”按钮后面隐藏多余的内容。
 
 ## 性能
 
@@ -147,14 +147,14 @@ Google的[web.dev]有一个[免费的深入课程](https://web.dev/learn/accessi
 
 ## 安全
 
--   **跨站点脚本（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)。

packages/front-end-interview-guidebook/contents/user-interface/pt-BR.mdx

@@ -66,7 +66,7 @@ Entrevistas de codificação de interface de usuário compartilham algumas semel
 ## 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 |

packages/front-end-interview-guidebook/contents/user-interface/zh-CN.mdx

@@ -66,7 +66,7 @@ description: 准备前端/网络开发人员面试中的用户界面问题的指
 ## 重要概念
 
 | 类别 | 重要主题 |
-| ---------- | ------------------------------------------------ |
+| --- | --- |
 | 数据结构 | 数组、映射、栈、树、集合 |
 | 软件工程 | SOLID 原则、设计模式、模型 - 视图 - 控制器 |
 | HTML | 语义 HTML、表单验证、表单提交 |

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; }`的事情，它将覆盖已定义的紫色填充。

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"
 }

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

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

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

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"
 }

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"
 }

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 版本，请查看下面的参考链接。

packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/metadata.json

@@ -5,10 +5,7 @@
   "premium": false,
   "duration": 5,
   "published": true,
-  "topics": [
-    "html",
-    "performance"
-  ],
+  "topics": ["html", "performance"],
   "importance": "high",
   "difficulty": "medium",
   "featured": true

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>`都是可选的。 谷歌的样式指南甚至建议删除它们以便保存字节。 然而，仍然存在着这样一种现象： 这种做法仍然没有得到广泛采用，性能收益很可能很小，对大多数网站来说不太可能起作用。

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'。
 
-在BFC中，每个盒子的左外边缘都会接触到包含块的左边缘（对于从右到左的格式化，右边缘会接触）。
+在 BFC 中，每个盒子的左外边缘都会接触到包含块的左边缘（对于从右到左的格式化，右边缘会接触）。
 
 BFC 中相邻区块级盒子之间的垂直外间距会被折叠。 在[外边距重叠](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_mark_mark_bolsing)上阅读更多内容。

packages/quiz/questions/describe-floats-and-how-they-work/zh-CN.mdx

@@ -26,7 +26,7 @@ CSS `clear` 属性可以放置在 `left`/`right`/`both` 浮动元素之下。
 
 ## 琐事
 
-在过去的好日子里，Bootstrap 2等CSS框架使用`float`属性来实现其网格系统。 然而，随着这些日子的 CSS Flexbox 和 Grid，已不再需要使用 `float` 属性。
+在过去的好日子里，Bootstrap 2 等 CSS 框架使用`float`属性来实现其网格系统。 然而，随着这些日子的 CSS Flexbox 和 Grid，已不再需要使用 `float` 属性。
 
 ## 参考资料
 

packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/zh-CN.mdx

@@ -6,7 +6,7 @@ CSS [伪元素](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-elements)
 
 - `::firstline` 和 `::firstletter` 可以用于装饰文本。
 - 用于 `.clearfix` 技巧，如上图所示，添加一个带有`clear: both`的零空间元素。
--   Tooltips 中的三角箭头使用 `::before` 和 `::after ` 。 鼓励关注点分离，因为三角形被视为样式的一部分，而不是真正的DOM。
+- Tooltips 中的三角箭头使用 `::before` 和 `::after ` 。 鼓励关注点分离，因为三角形被视为样式的一部分，而不是真正的 DOM。
 
 ## 备注
 

packages/quiz/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/pt-BR.mdx

@@ -19,7 +19,7 @@ Cookies, `localStorage`, and `sessionStorage`, são todos:
 ## 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 |

packages/quiz/questions/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage/zh-CN.mdx

@@ -4,9 +4,9 @@ title: 描述cookie、 `sessionStorage` 和 `localStorage` 之间的差异。
 
 LocalStorage 对于存储用户以后需要访问的数据很有用，例如离线数据，因为它把数据存储在浏览器和系统中。 即使用户关闭和重新打开浏览器，这些数据也将持续存在，并可被其他网站访问。
 
-SessionStorage 是提高你的Web 应用程序性能的一个好方法。 它在浏览器上本地存储数据，但特定于（并且只能由）各自的网站/浏览器标签访问，并且只有当用户在网站/标签上时才能使用。 由于限制性的访问，这是一个更安全的存储方法，并且由于减少了服务器和客户端之间的数据传输，促进了更好的网站性能。 
+SessionStorage 是提高你的 Web 应用程序性能的一个好方法。 它在浏览器上本地存储数据，但特定于（并且只能由）各自的网站/浏览器标签访问，并且只有当用户在网站/标签上时才能使用。 由于限制性的访问，这是一个更安全的存储方法，并且由于减少了服务器和客户端之间的数据传输，促进了更好的网站性能。
 
-对于存储不应长期保存的数据，如会话ID，Cookies是一个不错的选择。 Cookies允许你设置一个过期时间，届时它将被删除。 与其他两种存储方法相比，Cookies只能是较小尺寸的数据。
+对于存储不应长期保存的数据，如会话 ID，Cookies 是一个不错的选择。 Cookies 允许你设置一个过期时间，届时它将被删除。 与其他两种存储方法相比，Cookies 只能是较小尺寸的数据。
 
 ## 相似性
 
@@ -19,11 +19,11 @@ Cookies、`localStorage`和`sessionStorage`都是:
 ## 差异
 
 | 属性 | Cookie | `localStorage` | `sessionStorage` |
-| --------------- | ------------------------------- | -------------- | ---------------- |
+| --- | --- | --- | --- |
 | 发起方 | 客户端或服务器。 服务器可以使用 `Set-Cookie` 头 | 客户端 | 客户端 |
 | 有效期 | 手动设置 | 永久 | 标签关闭时 |
 | 跨浏览器会话的持久性 | 取决于是否设置过期时间 | 是 | 否 |
-| 每次HTTP请求都发送到服务器 | Cookie 会自动通过 `Cookie` 头发送       | 否              | 否                |
+| 每次 HTTP 请求都发送到服务器 | Cookie 会自动通过 `Cookie` 头发送 | 否 | 否 |
 | 容量(每个域) | 4kb | 5MB | 5MB |
 | 访问权限 | 任何窗口 | 任何窗口 | 部分标签页 |
 

packages/quiz/questions/describe-the-difference-between-script-async-and-script-defer/zh-CN.mdx

@@ -6,23 +6,23 @@ 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()的调用被忽略 "的信息。
+- 包含`defer'或`async'的`<script>`将被忽略，并显示 "来自异步加载的外部脚本对 document.write()的调用被忽略 "的信息。
 
 ## 参考资料
 

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) 中提到的优势。
+- 主要是[“使用 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` 规则。

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)中列出。_

packages/quiz/questions/designing-or-developing-for-multilingual-sites/zh-CN.mdx

@@ -7,7 +7,7 @@ title: 在设计或开发多语言站点时你必须注意什么事？
 ## 搜索引擎优化
 
 - 使用 `<html>` 标签上的 `lang` 属性。
--   在 URL 中包含区域设置(例如 en_US, zh_CN等)。
+- 在 URL 中包含区域设置(例如 en_US, zh_CN 等)。
 - 网页应该使用 `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` 来告诉搜索引擎，在指定的 `href` 中有另一个页面具有相同的内容，但是对于另一种语言/本地化。
 
 ## 了解地域与语言之间的区别
@@ -23,7 +23,7 @@ title: 在设计或开发多语言站点时你必须注意什么事？
 
 ## 预测地域，但不限制
 
-服务器可以通过HTTP头部`Accept-Language`和IP组合来决定访客的地域/语言。 通过这些，可以为访客自动选择最佳地域设置。 然而，预测并不是万无一失的(特别是如果访客使用VPN)，仍然应当允许访客不受干扰地改变自己的国家/语言。
+服务器可以通过 HTTP 头部`Accept-Language`和 IP 组合来决定访客的地域/语言。 通过这些，可以为访客自动选择最佳地域设置。 然而，预测并不是万无一失的(特别是如果访客使用 VPN)，仍然应当允许访客不受干扰地改变自己的国家/语言。
 
 ## 考虑不同语言文本长度的差异
 
@@ -43,7 +43,7 @@ title: 在设计或开发多语言站点时你必须注意什么事？
 
 ## 不在图片中放置文本
 
-将文本放在位图中（如png、gif、jpg等）并不是一种可扩展的方法。 在图片中放置文字仍然是一种常用的方式，可以在任何计算机上显示优雅、非系统字体。 不过，为了支持图片文本翻译成其他语言，需要为每种语言创建单独的图片，这不是设计人员的灵活工作流程。
+将文本放在位图中（如 png、gif、jpg 等）并不是一种可扩展的方法。 在图片中放置文字仍然是一种常用的方式，可以在任何计算机上显示优雅、非系统字体。 不过，为了支持图片文本翻译成其他语言，需要为每种语言创建单独的图片，这不是设计人员的灵活工作流程。
 
 ## 要注意色彩的感知方式
 

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.

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` ，它会被分配给指定为实例的变量。
 

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>

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>

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 的影响。 如果数据来自一个用户，请在显示数据之前将其净化！**

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 经常用于异步通信。

packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/zh-CN.mdx

@@ -4,11 +4,11 @@ title: 解释CSS 图片精灵（雪碧图），以及您如何在页面或网站
 
 CSS 图片精灵将多个图片合并为一个更大的图片文件，并使用 CSS `background-image`, `background-position` 和 `background-size` 来选择更大图片的特定部分作为所需图片。
 
-它曾经是用于图标的一种常用技术(例如，Gmail使用图片精灵作为其所有图片)。
+它曾经是用于图标的一种常用技术(例如，Gmail 使用图片精灵作为其所有图片)。
 
 ## 优点
 
--   减少多个图片的 HTTP 请求数量 (每张spritesheet 只需要一个请求)。 但是使用 HTTP2 加载多个图片已不再是一个问题。
+- 减少多个图片的 HTTP 请求数量 (每张 spritesheet 只需要一个请求)。 但是使用 HTTP2 加载多个图片已不再是一个问题。
 - 预先下载在需要之前不会下载的资产，如只会出现在 `:hover` 伪状态上的图片。 闪烁不会被看到。
 
 ## 实现方式

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
 ```

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
 ```

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,7 +35,7 @@ console.log(boundGetAgeMary()); // 21
 
 ## 练习
 
-在GreatFrontEnd尝试[实现你自己的 `Function.prototype.bind()` 方法](/questions/javascript/function-bind)。
+在 GreatFrontEnd 尝试[实现你自己的 `Function.prototype.bind()` 方法](/questions/javascript/function-bind)。
 
 ## 参考资料
 

packages/quiz/questions/explain-hoisting/zh-CN.mdx

@@ -4,7 +4,7 @@ title: 解释“（变量）提升”
 
 提升是用于解释你代码中变量声明行为的一个术语。 使用`var`关键字声明或初始化的变量将会将其声明“移动”到其模块/函数级别范围的顶端。 我们把它成为变量提升。 然而，只有声明被提升，赋值（如果有的话）将留在原地。
 
-请注意，声明实际上并没有被移动--JavaScript引擎在编译过程中解析了声明，并意识到了声明及其作用域。 通过视觉将声明置于其作用域之首，更容易理解这种行为。 让我们用几个例子来解释。
+请注意，声明实际上并没有被移动--JavaScript 引擎在编译过程中解析了声明，并意识到了声明及其作用域。 通过视觉将声明置于其作用域之首，更容易理解这种行为。 让我们用几个例子来解释。
 
 ```js
 console.log(foo); // undefined

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>`符合选择器，并可以停止遍历它的父元素。

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.

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.

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（破解）。

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`。 因此，在重构大型遗留应用程序时必须牢记这一点。

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 对象上添加/模拟不可变性。
 
 ### 对象常量属性
 

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 协议、主机名和端口号的组合。 这项政策防止一个页面上的恶意脚本通过该页面的文档对象模型访问另一个网页上的敏感数据。

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，并将其返回给爬虫"。

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 )`.

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 函数返回任何东西，你就不能使用它。 举个例子：
 

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

@@ -28,7 +28,7 @@ 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: 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) 了解更多信息。
 
 ## 参考资料
 

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 则是一个一维的系统。

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，因为无论分辨率如何，它们都会呈现得非常清晰。

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 的巨大需求。

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 环境中得到支持。

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)。

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 页面。
+- **服务器端渲染：** HTML 标记将包含字符串占位符，特定语言的内容将从代码或翻译服务的配置中获取。 服务器然后动态生成带有特定语言内容的 HTML 页面。
 - **客户端渲染：** 将获取相应的地域字符串，并与 JavaScript 合并视图。

packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/zh-CN.mdx

@@ -11,4 +11,4 @@ title: 响应设计与自适应设计有何不同？
 这两种方法都有一些需要加以权衡的问题：
 
 - 响应式设计可能是相当具有挑战性的，因为你基本上是在使用一个尽管是响应式的布局来适应所有情况。 如何设置媒体查询断点就是这样一个挑战。 您是否使用标准化断点值？ 或者，您是否使用对您的特定布局有意义的断点？ 如果这种布局改变怎么办？
--   自适应设计通常需要用户代理嗅探，或DPI检测等，所有这些都被证明是不可靠的。
+- 自适应设计通常需要用户代理嗅探，或 DPI 检测等，所有这些都被证明是不可靠的。

packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/zh-CN.mdx

@@ -3,7 +3,7 @@ title: 您将如何解决特定浏览器特有的样式问题？
 ---
 
 - 在确定问题和出问题的浏览器后，使用一个单独的样式表，只在使用该特定浏览器时加载。 这种技术需要服务器端渲染。
--   使用像Bootstrap这样的库，已经为您处理这些样式问题。
+- 使用像 Bootstrap 这样的库，已经为您处理这些样式问题。
 - 使用 `autoprefixer` 将供应商前缀自动添加到您的代码中。
 - 使用 Reset CSS 或 Normalize.css.
--   如果您正在使用 PostCSS (或类似的 CSS 转换库)， 可能有一些插件允许您选择使用现代的 CSS 语法(甚至是W3C 提议)，这些插件将把您代码中的这些部分转换成对应的与后向兼容的代码，这将适用于您使用的目标。
+- 如果您正在使用 PostCSS (或类似的 CSS 转换库)， 可能有一些插件允许您选择使用现代的 CSS 语法(甚至是 W3C 提议)，这些插件将把您代码中的这些部分转换成对应的与后向兼容的代码，这将适用于您使用的目标。

packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/zh-CN.mdx

@@ -2,8 +2,8 @@
 title: 将 HTML5 视为一个开放的网络平台。 HTML5 由哪些东西构成？
 ---
 
--   **语义**：HTML标签描述内容。
--   **样式**：自定义HTML标签外观
+- **语义**：HTML 标签描述内容。
+- **样式**：自定义 HTML 标签外观
 - **连接**：以新的和创新的方式与服务器通信。
 - **离线和存储**：允许网页在客户端本地存储数据并更有效地离线操作。
 - **多媒体**：使视频和音频成为开放网络中的一等公民。

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()`是更有效的，并将导致更短的绘制时间，以实现更平滑的动画。

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)

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"`这样的东西是一种有效的方式，而不至于扭曲语义标记。

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,17 +2,17 @@
 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。
+- 需要一个构建/编译过程，因为浏览器只运行 JavaScript，你的代码在提供给浏览器之前需要被编译成 JavaScript。
 - 如果你的源码图没有很好地映射到你的预编译源码上，调试就会很麻烦。
 - 大多数开发者不熟悉这些语言，需要学习它。 如果你在你的项目中使用它，对你的团队来说会有一个增加成本。
 - 较小的社区(依赖于语言)，这意味着资源、教程、库和工具将更难找到。
@@ -20,4 +20,4 @@ title: 用编译成 JavaScript 的语言编写JavaScript 代码的一些优点/
 - 这些语言将永远落后于最新的 JavaScript 标准。
 - 开发人员应该认识到他们的代码被编译成什么样子--因为那是实际运行的东西，而那是最终重要的东西。
 
-实际上，ES2015极大地改善了JavaScript，使其更易于编写。 现在实际上没有必要使用 CoffeeScript 相反，TypeScript是首选，因为它带来了额外的类型安全和改进的开发者体验。
+实际上，ES2015 极大地改善了 JavaScript，使其更易于编写。 现在实际上没有必要使用 CoffeeScript 相反，TypeScript 是首选，因为它带来了额外的类型安全和改进的开发者体验。

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/)回流、重绘和合成。 尽可能避免写入改变布局的样式(触发回流)。

packages/quiz/questions/what-are-the-advantages-and-disadvantages-of-using-ajax/zh-CN.mdx

@@ -7,12 +7,12 @@ title: 使用Ajax的利弊是什么？
 - 更好的交互性。 来自服务器的新内容可以动态地改变，而不需要重新加载整个页面。
 - 减少与服务器的连接，因为脚本和样式表只能请求一次。
 - 状态可以在页面上维持。 JavaScript 变量和 DOM 状态将持续，因为主容器页面没有被重新加载。
--   基本上是SPA的大部分优点。
+- 基本上是 SPA 的大部分优点。
 
 ## 缺点
 
 - 动态网页不好存书签。
 - 如果浏览器中禁用 JavaScript 则无法工作。
--   有些网页爬虫不执行 JavaScript ，不会看到JavaScript 加载的内容。
--   使用 Ajax 获取数据的网页可能需要将已获取的远程数据与客户端模板合并以更新 DOM。 要做到这一点，JavaScript就必须在浏览器中解析和执行，而低端移动设备可能会为此而挣扎。
--   基本上是SPA的大部分缺点。
+- 有些网页爬虫不执行 JavaScript ，不会看到 JavaScript 加载的内容。
+- 使用 Ajax 获取数据的网页可能需要将已获取的远程数据与客户端模板合并以更新 DOM。 要做到这一点，JavaScript 就必须在浏览器中解析和执行，而低端移动设备可能会为此而挣扎。
+- 基本上是 SPA 的大部分缺点。

packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/zh-CN.mdx

@@ -6,12 +6,12 @@ title: 使用CSS 预处理器的优点/缺点是什么？
 
 - CSS 更易维护。
 - 更容易写入嵌套选择器。
--   具有一致性主题的变量。 可以在不同项目之间共享主题文件。 这不一定适用于 CSS 自定义属性(通常称为CSS 变量)。
+- 具有一致性主题的变量。 可以在不同项目之间共享主题文件。 这不一定适用于 CSS 自定义属性(通常称为 CSS 变量)。
 - 用于生成重复的 CSS 的 Mixins
--   Sass 和Less的功能，如循环、List和Map可以使配置变得更加容易和更加详细。
--   在开发过程中将你的代码分割成多个文件。 CSS 文件也可以拆分，但这样做将需要一个 HTTP 请求下载每个CSS 文件。
+- 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 变量。 因此，你正在学习新的语法，如果/当它们成为标准化的时候，可能会得到回报。

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,