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.
 
@@ -12,15 +11,15 @@ If you are a total beginner to CSS, Codecademy's [HTML & CSS course](https://www
 ## Glossary
 
 - [**Box Model**](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) - The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area (e.g. text, an image, etc.) and optional surrounding padding, border, and margin areas.
-- [**Specificity**](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) - Specificity is how browsers decide which CSS property values are the most relevant to an element and, will therefore be applied. It is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. 
+- [**Specificity**](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) - Specificity is how browsers decide which CSS property values are the most relevant to an element and, will therefore be applied. It is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.
   - When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. It only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.
   - Typically used in type selectors/pseduo elements (`h1`, `div`, `:before`), class/attribute selectors (`.btn`, `[type="radio"]`), pseudo-classes (`:hover`) and ID selectors (`#someElement`).
   - Inline styles added to an element always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
-  - When an important rule (`!important`) is used on a style declaration, this declaration overrides any other declarations. Try to avoid using `!important`, as it breaks  the natural cascading in the stylesheets. Always look for a way to use specificity before even considering `!important`, and only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap).
+  - When an important rule (`!important`) is used on a style declaration, this declaration overrides any other declarations. Try to avoid using `!important`, as it breaks the natural cascading in the stylesheets. Always look for a way to use specificity before even considering `!important`, and only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap).
 - [**Positioning**](https://developer.mozilla.org/en-US/docs/Web/CSS/position) - The position CSS property determines how an element will be positioned in a document. The `top`, `right`, `bottom`, and `left` properties would later determine the final location of said positioned element.
   - Initial value: `static`
   - Values that are frequently used: `relative`, `absolute`, `fixed`, `sticky`
-- [**Floats**](https://developer.mozilla.org/en-US/docs/Web/CSS/float) - The `float` CSS property determines where an element should be placed - along the left or right side of its container. This allows text and inline elements to wrap around it. Also note, the element would be removed from the normal *flow* of the web page, though still remaining a part of the flow (in contrast to `position: absolute`). For an element to be `float`, it's value must not be `none`.
+- [**Floats**](https://developer.mozilla.org/en-US/docs/Web/CSS/float) - The `float` CSS property determines where an element should be placed - along the left or right side of its container. This allows text and inline elements to wrap around it. Also note, the element would be removed from the normal _flow_ of the web page, though still remaining a part of the flow (in contrast to `position: absolute`). For an element to be `float`, it's value must not be `none`.
   - Initial value: `none`
   - Values that are frequently used: `left`, `right`, `inline-start`, `inline-end`.
   - Additional Notes: Usually, there would be cases that you may want to move an item below any floated elements. E.g, you may want some elements like your paragraphs to remain adjacent to floats, but force headings and footers to be on their own line. See [`clear` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/clear) for more examples

.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.
 
@@ -9,7 +8,7 @@ HTML (Hypertext Markup Language) is the structure that all websites are built on
 
 ## Deprecated Tags
 
-There are a number of tags from past versions of HTML that have become deprecated over time. This means that while they are no longer considered valid elements, most browsers should still be able to read and render them. 
+There are a number of tags from past versions of HTML that have become deprecated over time. This means that while they are no longer considered valid elements, most browsers should still be able to read and render them.
 
 ## Script Loading
 

.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=)
@@ -49,4 +48,4 @@ If you want more structured algorithms practice which are targeted at JavaScript
 
 Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com) has front end interview [study plans](https://www.greatfrontend.com/get-started) and a [huge question bank of coding questions](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms). Start practicing today!
 
-:::
+:::

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/pt-BR.mdx

@@ -20,12 +20,12 @@ Neste guia, você aprenderá como abordá-las:
 
 Ao avaliar candidatos nesta categoria, os entrevistadores geralmente estão observando os seguintes critérios:
 
--   Lidar com desacordos
--   Trabalhando em equipe
--   Trabalhando com personalidades e habilidades diversas
--   Comunicando ideias complexas de forma simples
--   Fornecendo feedback construtivo
--   Escuta ativa
+- Lidar com desacordos
+- Trabalhando em equipe
+- Trabalhando com personalidades e habilidades diversas
+- Comunicando ideias complexas de forma simples
+- Fornecendo feedback construtivo
+- Escuta ativa
 
 ## "Abstraindo Perguntas sobre Colaboração."
 
@@ -37,36 +37,36 @@ A colaboração é um tema que pode agrupar sub-requisitos como comunicação, t
 
 #### Exemplo de Questões
 
--   Você pode descrever um momento em que teve que comunicar efetivamente informações técnicas para uma audiência não técnica e como abordou essa situação?
--   Você pode descrever um momento em que teve que adaptar seu estilo de comunicação para se comunicar eficazmente com alguém que tinha uma formação ou perspectiva diferente?
--   Você pode dar um exemplo de um momento em que teve que comunicar informações importantes sob pressão de tempo ou em uma situação de alto estresse?
--   Como você garante que sua mensagem seja compreendida e bem recebida pelo seu público?
+- Você pode descrever um momento em que teve que comunicar efetivamente informações técnicas para uma audiência não técnica e como abordou essa situação?
+- Você pode descrever um momento em que teve que adaptar seu estilo de comunicação para se comunicar eficazmente com alguém que tinha uma formação ou perspectiva diferente?
+- Você pode dar um exemplo de um momento em que teve que comunicar informações importantes sob pressão de tempo ou em uma situação de alto estresse?
+- Como você garante que sua mensagem seja compreendida e bem recebida pelo seu público?
 
 #### Traços pelos Quais os Entrevistadores Procuram
 
--   Transmitir ideias complexas de forma simples
--   Escuta ativa
+- Transmitir ideias complexas de forma simples
+- Escuta ativa
 
 ### Trabalho em Equipe
 
 #### Exemplo de Questões
 
--   Você pode descrever um projeto anterior em que teve que trabalhar com um stakeholder ou colega difícil e como lidou com essa situação?
--   Você pode me contar sobre uma vez em que teve que dar um feedback construtivo a um membro da equipe ou colega?
--   Como você aborda a colaboração com colegas de equipe que não estão cumprindo prazos ou responsabilidades?
--   Você pode fornecer um exemplo de quando teve que trabalhar com uma equipe em que havia desacordos entre os membros?
--   Como você lida com a colaboração em uma equipe composta por pessoas com conjuntos de habilidades e personalidades diferentes?
--   Você pode dar um exemplo de uma vez em que teve que se adaptar ao estilo de trabalho de um membro da equipe para concluir um projeto com sucesso?
--   Como você garante que todos os membros da equipe sejam ouvidos e que suas ideias sejam consideradas em discussões em grupo?
--   Você pode dar um exemplo de uma vez em que teve que trabalhar em um projeto de equipe e teve que fazer concessões com os outros para chegar a uma solução?
--   Você pode descrever um momento em que teve que colaborar com pessoas de diferentes departamentos ou organizações para concluir um projeto?
+- Você pode descrever um projeto anterior em que teve que trabalhar com um stakeholder ou colega difícil e como lidou com essa situação?
+- Você pode me contar sobre uma vez em que teve que dar um feedback construtivo a um membro da equipe ou colega?
+- Como você aborda a colaboração com colegas de equipe que não estão cumprindo prazos ou responsabilidades?
+- Você pode fornecer um exemplo de quando teve que trabalhar com uma equipe em que havia desacordos entre os membros?
+- Como você lida com a colaboração em uma equipe composta por pessoas com conjuntos de habilidades e personalidades diferentes?
+- Você pode dar um exemplo de uma vez em que teve que se adaptar ao estilo de trabalho de um membro da equipe para concluir um projeto com sucesso?
+- Como você garante que todos os membros da equipe sejam ouvidos e que suas ideias sejam consideradas em discussões em grupo?
+- Você pode dar um exemplo de uma vez em que teve que trabalhar em um projeto de equipe e teve que fazer concessões com os outros para chegar a uma solução?
+- Você pode descrever um momento em que teve que colaborar com pessoas de diferentes departamentos ou organizações para concluir um projeto?
 
 #### Traços pelos Quais os Entrevistadores Procuram
 
--   Trabalhando em equipe
--   Trabalhar com diversos estilos de trabalho, competências e personalidades
--   Lidar com desacordos (de outras pessoas e si mesmo)
--   Fornecendo feedback construtivo
+- Trabalhando em equipe
+- Trabalhar com diversos estilos de trabalho, competências e personalidades
+- Lidar com desacordos (de outras pessoas e si mesmo)
+- Fornecendo feedback construtivo
 
 ## Estrutura de Resposta Sugerida
 
@@ -135,58 +135,58 @@ Observação: Para a comunicação, traços como transmitir ideias complexas de
 
 Embora pareça haver um grande número de características necessárias, você pode abordar 90% delas com uma situação muito comum que ocorre em equipes de engenharia:
 
--   Você teve que trabalhar em uma equipe interfuncional (por exemplo, com partes interessadas de negócios, gerentes de produtos ou designers) em uma situação de alta pressão, onde as prioridades e os requisitos estavam mudando rapidamente.
--   Há um conflito de interesses entre as áreas de negócios/design e engenharia, como a pressão (exigência) por prazos mais apertados vindos do lado de negócios/design, enquanto do ponto de vista da engenharia, cumprir esses prazos resultará em uma grande dívida técnica.
--   Você teve que fornecer um feedback construtivo para as equipes de negócios/design sobre o problema.
--   Ao fazer isso, você precisou transmitir conceitos técnicos para uma audiência não técnica.
--   Além disso, você solicitou feedback deles para entender como a engenharia poderia colaborar melhor para evitar esse problema novamente. Ao fazer isso, você regularmente revisou a lista de demandas ou requisitos com eles para verificar se algum deles poderia ser eliminado para acelerar a entrega da engenharia. Além disso, você atendeu às necessidades deles em relação à responsabilidade pelo prazo, fornecendo atualizações regulares.
+- Você teve que trabalhar em uma equipe interfuncional (por exemplo, com partes interessadas de negócios, gerentes de produtos ou designers) em uma situação de alta pressão, onde as prioridades e os requisitos estavam mudando rapidamente.
+- Há um conflito de interesses entre as áreas de negócios/design e engenharia, como a pressão (exigência) por prazos mais apertados vindos do lado de negócios/design, enquanto do ponto de vista da engenharia, cumprir esses prazos resultará em uma grande dívida técnica.
+- Você teve que fornecer um feedback construtivo para as equipes de negócios/design sobre o problema.
+- Ao fazer isso, você precisou transmitir conceitos técnicos para uma audiência não técnica.
+- Além disso, você solicitou feedback deles para entender como a engenharia poderia colaborar melhor para evitar esse problema novamente. Ao fazer isso, você regularmente revisou a lista de demandas ou requisitos com eles para verificar se algum deles poderia ser eliminado para acelerar a entrega da engenharia. Além disso, você atendeu às necessidades deles em relação à responsabilidade pelo prazo, fornecendo atualizações regulares.
 
 Adicione detalhes específicos de acordo com a sua situação.
 
 #### Situação
 
--   No meu emprego atual como engenheiro de front-end em uma startup, eu tive que liderar o desenvolvimento em um projeto de marketing altamente urgente, trabalhando de forma interdisciplinar com a equipe de marketing e design.
--   Em determinado momento, o departamento de marketing esperava que a funcionalidade fosse lançada na semana seguinte, mas houve um obstáculo significativo por parte da equipe de engenharia devido a dependências com a equipe de API de um parceiro, cujas entregas foram atrasadas devido à saída recente de dois membros seniores.
--   A situação ficou tensa, pois o departamento de marketing não compreendia os obstáculos que a equipe de engenharia estava enfrentando.
+- No meu emprego atual como engenheiro de front-end em uma startup, eu tive que liderar o desenvolvimento em um projeto de marketing altamente urgente, trabalhando de forma interdisciplinar com a equipe de marketing e design.
+- Em determinado momento, o departamento de marketing esperava que a funcionalidade fosse lançada na semana seguinte, mas houve um obstáculo significativo por parte da equipe de engenharia devido a dependências com a equipe de API de um parceiro, cujas entregas foram atrasadas devido à saída recente de dois membros seniores.
+- A situação ficou tensa, pois o departamento de marketing não compreendia os obstáculos que a equipe de engenharia estava enfrentando.
 
 #### Tarefa
 
--   Eu tive que resolver o mal-entendido para garantir um relacionamento de trabalho tranquilo entre as duas equipes.
+- Eu tive que resolver o mal-entendido para garantir um relacionamento de trabalho tranquilo entre as duas equipes.
 
 #### Ação
 
--   Para fazer isso, falei com a equipe de marketing em particular e dei a eles tempo para explicar claramente a urgência e as preocupações ou concepções errôneas que o marketing poderia ter em relação à engenharia.
--   Em seguida, expliquei o papel das equipes parceiras, concentrando-me especificamente no impacto delas na funcionalidade, em vez de informações técnicas complexas.
--   Ao fazer isso, conseguimos realizar uma tempestade de ideias sobre diferentes maneiras de lançar a funcionalidade mesmo sem as dependências externas.
--   Ao mesmo tempo, também conversei com o gerente da equipe parceira sobre a importância do projeto para a empresa e a possibilidade de repriorizar o trabalho deles para nos ajudar a desbloquear.
--   Além disso, também solicitei feedback sobre como a equipe de engenharia poderia colaborar melhor com o marketing para evitar tais mal-entendidos no futuro.
+- Para fazer isso, falei com a equipe de marketing em particular e dei a eles tempo para explicar claramente a urgência e as preocupações ou concepções errôneas que o marketing poderia ter em relação à engenharia.
+- Em seguida, expliquei o papel das equipes parceiras, concentrando-me especificamente no impacto delas na funcionalidade, em vez de informações técnicas complexas.
+- Ao fazer isso, conseguimos realizar uma tempestade de ideias sobre diferentes maneiras de lançar a funcionalidade mesmo sem as dependências externas.
+- Ao mesmo tempo, também conversei com o gerente da equipe parceira sobre a importância do projeto para a empresa e a possibilidade de repriorizar o trabalho deles para nos ajudar a desbloquear.
+- Além disso, também solicitei feedback sobre como a equipe de engenharia poderia colaborar melhor com o marketing para evitar tais mal-entendidos no futuro.
 
 #### Resultado
 
--   Devido à colaboração estreita entre engenharia e marketing, conseguimos lançar a funcionalidade dentro do prazo estipulado.
--   À medida que o marketing priorizou os prazos e a responsabilidade, começamos a fornecer atualizações regulares e discutimos alternativas para cada possível obstáculo.
--   Com isso, todas as funcionalidades foram entregues com sucesso e sem problemas a partir desse ponto.
+- Devido à colaboração estreita entre engenharia e marketing, conseguimos lançar a funcionalidade dentro do prazo estipulado.
+- À medida que o marketing priorizou os prazos e a responsabilidade, começamos a fornecer atualizações regulares e discutimos alternativas para cada possível obstáculo.
+- Com isso, todas as funcionalidades foram entregues com sucesso e sem problemas a partir desse ponto.
 
 ## Possíveis Naturezas de Perguntas de Acompanhamento
 
 Conforme mencionado em nossa [visão geral de preparação para entrevistas comportamentais](/guia-entrevista-comportamental), os entrevistadores são incentivados a depender mais de perguntas de acompanhamento para realmente compreender o processo de pensamento e as motivações do candidato, que normalmente se enquadram nestas categorias:
 
--   Por que você acha que tomou a ação de (inserir ação)?
--   Por que você não fez (inserir ação)?
--   Como você faria as coisas de forma diferente com o benefício da retrospectiva?
+- Por que você acha que tomou a ação de (inserir ação)?
+- Por que você não fez (inserir ação)?
+- Como você faria as coisas de forma diferente com o benefício da retrospectiva?
 
 Para perguntas sobre colaboração, os entrevistadores provavelmente farão perguntas para ajudá-los a entender um pouco mais sobre:
 
--   **Entender se e por que determinadas partes interessadas estavam envolvidas ou não estavam envolvidas**
-    -   Quais partes interessadas estavam envolvidas na discussão e por quê?
-    -   Por que certas partes interessadas, como (inserir parte interessada), foram excluídas do grupo?
--   **Compreender a dinâmica de grupo e como ela afetou a estratégia para lidar com o grupo**
-    -   Quais personalidades estavam presentes no grupo e como isso afetou a dinâmica? Essa compreensão afetou sua estratégia para conduzir as discussões em grupo?
--   **Compreendendo a mentalidade do candidato em relação a conflitos**
-    -   Como você acha que conflitos como esse afetam o ambiente de trabalho? Você preferiria evitá-los?
--   **Compreender como a resolução foi obtida; o candidato apenas cedeu aos outros em vez de depender de fatos e dados?**
-    -   Houve algum dado ou informação que foi utilizado na tomada de decisão?
-    -   Sim, houve dados e informações que foram utilizados na tomada de decisão?
+- **Entender se e por que determinadas partes interessadas estavam envolvidas ou não estavam envolvidas**
+  - Quais partes interessadas estavam envolvidas na discussão e por quê?
+  - Por que certas partes interessadas, como (inserir parte interessada), foram excluídas do grupo?
+- **Compreender a dinâmica de grupo e como ela afetou a estratégia para lidar com o grupo**
+  - Quais personalidades estavam presentes no grupo e como isso afetou a dinâmica? Essa compreensão afetou sua estratégia para conduzir as discussões em grupo?
+- **Compreendendo a mentalidade do candidato em relação a conflitos**
+  - Como você acha que conflitos como esse afetam o ambiente de trabalho? Você preferiria evitá-los?
+- **Compreender como a resolução foi obtida; o candidato apenas cedeu aos outros em vez de depender de fatos e dados?**
+  - Houve algum dado ou informação que foi utilizado na tomada de decisão?
+  - Sim, houve dados e informações que foram utilizados na tomada de decisão?
 
 ## Exemplos de Perguntas e Respostas sobre Colaboração
 

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

@@ -3,7 +3,7 @@ title: 回答 "告诉我什么时候...... "的协作技能
 description: 学习如何回答针对前端/网络开发人员/软件工程师的协作行为问题，包括沟通和团队工作。 参考样本答案。
 ---
 
-正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，**合作**是需要准备的8大类问题中的一类。
+正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，**合作**是需要准备的 8 大类问题中的一类。
 
 合作问题可能是前端行为面试中最常见的行为问题，因为它们包含了大量相关的特征，为了便于故事/项目的准备，可以将其分组。
 
@@ -20,16 +20,16 @@ description: 学习如何回答针对前端/网络开发人员/软件工程师
 
 在对这一类别的候选人进行评级时，面试者常常考虑以下标准：
 
--   处理分歧
--   团队合作
--   与具有不同性格和技能的人合作
--   简单地传达复杂的概念
--   提出有建设性的反馈意见。
--   积极倾听
+- 处理分歧
+- 团队合作
+- 与具有不同性格和技能的人合作
+- 简单地传达复杂的概念
+- 提出有建设性的反馈意见。
+- 积极倾听
 
 ## 抽象合作问题
 
-正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，为那里的每一个行为问题准备具体的答案是不切实际的。 然而，通过将具体问题批量化为**类似的主题**，并准备涵盖大量问题要求的故事，我们可以将准备的故事数量减少到3-5个左右。
+正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，为那里的每一个行为问题准备具体的答案是不切实际的。 然而，通过将具体问题批量化为**类似的主题**，并准备涵盖大量问题要求的故事，我们可以将准备的故事数量减少到 3-5 个左右。
 
 合作是这样一个主题，它可以将沟通、团队工作、适应性和指导性等子要求组合起来。 对于每个子要求，我们总结了常见的问题，也抽象出了**面试官在这些问题中所关注的特征**：
 
@@ -37,40 +37,40 @@ description: 学习如何回答针对前端/网络开发人员/软件工程师
 
 #### 问题示例
 
--   你能描述一下你不得不向非技术性听众有效传达技术信息的时候，以及你是如何处理的吗？
--   您能否描述一下你不得不调整您的通信风格以便与具有不同背景或观点的人进行有效地沟通的时候？
--   你能举出一个例子，说明你曾在时间紧迫或高度紧张的情况下，不得不沟通重要信息？
--   你如何确保你的信息被受众理解并得到很好的接受？
+- 你能描述一下你不得不向非技术性听众有效传达技术信息的时候，以及你是如何处理的吗？
+- 您能否描述一下你不得不调整您的通信风格以便与具有不同背景或观点的人进行有效地沟通的时候？
+- 你能举出一个例子，说明你曾在时间紧迫或高度紧张的情况下，不得不沟通重要信息？
+- 你如何确保你的信息被受众理解并得到很好的接受？
 
 #### 面试官看重的特质
 
--   简单地传达复杂的概念
--   积极倾听
+- 简单地传达复杂的概念
+- 积极倾听
 
 ### 团队合作
 
 #### 示例问题
 
--   您能否描述过去的一个项目，在这个项目中，您必须与困难的利益攸关方或团队合作，以及如何处理它？
--   你能告诉我，你有什么时候需要向团队成员或同事提供建设性的反馈吗？
--   你如何处理与那些没有在最后期限或职责范围内完成工作的队友合作？
--   你能提供一个例子，当你不得不与一个团队一起工作时，成员之间存在分歧？
--   您如何处理与具有不同技能组合和个性的团队合作？
--   你能举一个例子，说明你为了成功完成一个项目而不得不适应团队成员的工作风格吗？
--   您如何确保在小组讨论中听取所有团队成员的意见，并考虑他们的想法？
--   你能否举一个例子说明你必须在一个团队项目上工作不得不与他人妥协以达成解决方案？
--   你能描述一下你不得不与来自不同部门或组织的人合作完成一个项目的时候吗？
+- 您能否描述过去的一个项目，在这个项目中，您必须与困难的利益攸关方或团队合作，以及如何处理它？
+- 你能告诉我，你有什么时候需要向团队成员或同事提供建设性的反馈吗？
+- 你如何处理与那些没有在最后期限或职责范围内完成工作的队友合作？
+- 你能提供一个例子，当你不得不与一个团队一起工作时，成员之间存在分歧？
+- 您如何处理与具有不同技能组合和个性的团队合作？
+- 你能举一个例子，说明你为了成功完成一个项目而不得不适应团队成员的工作风格吗？
+- 您如何确保在小组讨论中听取所有团队成员的意见，并考虑他们的想法？
+- 你能否举一个例子说明你必须在一个团队项目上工作不得不与他人妥协以达成解决方案？
+- 你能描述一下你不得不与来自不同部门或组织的人合作完成一个项目的时候吗？
 
 #### 面试官看重的特质
 
--   作为一个团队工作
--   与不同的工作风格、技能和个性工作
--   处理分歧(他人的和自己的)
--   提出有建设性的反馈意见。
+- 作为一个团队工作
+- 与不同的工作风格、技能和个性工作
+- 处理分歧(他人的和自己的)
+- 提出有建设性的反馈意见。
 
 ## 建议的答案框架
 
-一如既往，[STAR格式](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 是我们推荐的最简单、最有效的框架，用于构造你的故事。
+一如既往，[STAR 格式](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 是我们推荐的最简单、最有效的框架，用于构造你的故事。
 
 根据上述抽象，我们可以看到，面试官正在为每一项子要求寻找具体特点。 我们为了展示这些理想特征的建议方法已经创建了一个快速的小册子。
 
@@ -133,70 +133,70 @@ description: 学习如何回答针对前端/网络开发人员/软件工程师
 
 ### 示例故事
 
-虽然看起来有大量的所需特征，但你可以用工程团队中非常常见的情况来覆盖其中的90%：
+虽然看起来有大量的所需特征，但你可以用工程团队中非常常见的情况来覆盖其中的 90%：
 
--   你必须在一个跨职能的团队中工作（例如与商业利益相关者或产品经理或设计师），在一个高压的情况下，优先事项和要求迅速变化。
--   商业/设计和工程之间存在利益冲突，例如商业/设计推动（要求）更严格的最后期限，而从工程的角度来看，急于追求这些最后期限将导致大量的技术债务。
--   你必须就这个问题向商业/设计提供建设性的反馈。
--   在这样做时，你需要将技术概念传达给非技术受众。
--   此外，你还征求了他们的反馈意见，以了解工程如何能够更好地合作，避免再次出现这个问题。 这样做， 你定期与他们一起讨论需求或要求的清单，以查看是否可以放弃任何需求以加快工程交付。 此外，你通过提供定期更新，满足了他们对时间轴问责制的需求。
+- 你必须在一个跨职能的团队中工作（例如与商业利益相关者或产品经理或设计师），在一个高压的情况下，优先事项和要求迅速变化。
+- 商业/设计和工程之间存在利益冲突，例如商业/设计推动（要求）更严格的最后期限，而从工程的角度来看，急于追求这些最后期限将导致大量的技术债务。
+- 你必须就这个问题向商业/设计提供建设性的反馈。
+- 在这样做时，你需要将技术概念传达给非技术受众。
+- 此外，你还征求了他们的反馈意见，以了解工程如何能够更好地合作，避免再次出现这个问题。 这样做， 你定期与他们一起讨论需求或要求的清单，以查看是否可以放弃任何需求以加快工程交付。 此外，你通过提供定期更新，满足了他们对时间轴问责制的需求。
 
 根据您的情况在具体细节中添加。
 
 #### 情况
 
--   在我目前作为开办阶段的前端工程师的工作中，我不得不领导一个非常紧迫的营销项目的发展。 在功能上与营销和设计相交叉。
--   在某种程度上，市场部曾预计该功能将在下周内发货，但由于对合作伙伴的API团队的依赖，工程部出现了重大障碍，该团队的交付成果由于最近两名高级成员的离职而被推迟。
--   这种情况变得更加激烈，因为市场部不理解工程部所面临的障碍。
+- 在我目前作为开办阶段的前端工程师的工作中，我不得不领导一个非常紧迫的营销项目的发展。 在功能上与营销和设计相交叉。
+- 在某种程度上，市场部曾预计该功能将在下周内发货，但由于对合作伙伴的 API 团队的依赖，工程部出现了重大障碍，该团队的交付成果由于最近两名高级成员的离职而被推迟。
+- 这种情况变得更加激烈，因为市场部不理解工程部所面临的障碍。
 
 #### 任务
 
--   我必须解决这个误解，以确保两个团队之间的工作关系顺利。
+- 我必须解决这个误解，以确保两个团队之间的工作关系顺利。
 
 #### 行动
 
--   为了这样做，我私下和市场部谈过，让他们有时间清楚地解释紧迫性以及市场部对工程部可能存在的担忧或误解。
--   然后，我解释了合作伙伴团队的作用，特别关注他们对该功能的影响，而不是复杂的技术信息。
--   在这样做的过程中，我们能够集思广益，想出不同的方法，即使没有外部的依赖性，我们也可以交付这个功能。
--   同时， 我还与伙伴小组的经理谈到该项目对公司的重要性以及重新安排其工作的优先次序以帮助我们解除障碍的可能性。
--   除此之外，我还征求了关于工程部如何能够更好地与市场部合作的反馈意见，以避免今后发生这种误解。
+- 为了这样做，我私下和市场部谈过，让他们有时间清楚地解释紧迫性以及市场部对工程部可能存在的担忧或误解。
+- 然后，我解释了合作伙伴团队的作用，特别关注他们对该功能的影响，而不是复杂的技术信息。
+- 在这样做的过程中，我们能够集思广益，想出不同的方法，即使没有外部的依赖性，我们也可以交付这个功能。
+- 同时， 我还与伙伴小组的经理谈到该项目对公司的重要性以及重新安排其工作的优先次序以帮助我们解除障碍的可能性。
+- 除此之外，我还征求了关于工程部如何能够更好地与市场部合作的反馈意见，以避免今后发生这种误解。
 
 #### 结果
 
--   由于工程部和市场部之间的紧密合作，我们能够及时地交付该功能。
--   随着市场营销对时间表和问责制的优先考虑，我们开始定期提供更新，并讨论了每一个潜在的阻碍因素的替代方案。
--   有了这一点，每项功能都在之后成功地顺利交付。
+- 由于工程部和市场部之间的紧密合作，我们能够及时地交付该功能。
+- 随着市场营销对时间表和问责制的优先考虑，我们开始定期提供更新，并讨论了每一个潜在的阻碍因素的替代方案。
+- 有了这一点，每项功能都在之后成功地顺利交付。
 
 ## 后续问题的可能性质
 
 正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中所提到的，鼓励面试官更多地依靠后续问题来真正了解候选人的思维过程和动机，这些问题通常属于这些类别：
 
--   你为什么认为你做了(行为)？
--   你为什么不做(行为)？
--   事后看，你会如何以不同的方式做事？
+- 你为什么认为你做了(行为)？
+- 你为什么不做(行为)？
+- 事后看，你会如何以不同的方式做事？
 
 对于有关合作的问题，面试官很可能会探询一些问题，以帮助他们了解更多的情况：
 
--   **了解某些利益攸关方是否以及为何参与或不参与**
-    -   哪些利益攸关方参与了讨论，以及为什么？
-    -   为什么某些利益攸关方如(某某) 被排除在群组之外？
--   **了解群组动态以及它如何影响处理群组的策略**
-    -   小组中存在哪些个性，它是如何影响动态的？ 这种理解是否影响了你驾驭小组讨论的策略？
--   **理解候选人对冲突的心态**
-    -   你认为这样的冲突如何影响到工作环境？ 你想要避免他们吗？
--   **了解决议是如何产生的；候选人是否只是服从他人，而不是依赖事实和数据？**
-    -   在做决定时，是否有任何数据和信息被利用？
-    -   是否对每一种解决办法的利弊进行过分析？
+- **了解某些利益攸关方是否以及为何参与或不参与**
+  - 哪些利益攸关方参与了讨论，以及为什么？
+  - 为什么某些利益攸关方如(某某) 被排除在群组之外？
+- **了解群组动态以及它如何影响处理群组的策略**
+  - 小组中存在哪些个性，它是如何影响动态的？ 这种理解是否影响了你驾驭小组讨论的策略？
+- **理解候选人对冲突的心态**
+  - 你认为这样的冲突如何影响到工作环境？ 你想要避免他们吗？
+- **了解决议是如何产生的；候选人是否只是服从他人，而不是依赖事实和数据？**
+  - 在做决定时，是否有任何数据和信息被利用？
+  - 是否对每一种解决办法的利弊进行过分析？
 
 ## 合作问题和答案示例
 
-上面的故事样本已经回答了上面的大部分（12个）例子问题。 需要稍加修改的问题将在下文阐述。 如果你还没有，请查看我们的[面试处置技巧](/behavioral-interview-guidebook)，以增加你给人留下好印象的机会。
+上面的故事样本已经回答了上面的大部分（12 个）例子问题。 需要稍加修改的问题将在下文阐述。 如果你还没有，请查看我们的[面试处置技巧](/behavioral-interview-guidebook)，以增加你给人留下好印象的机会。
 
 ### 你如何确保你的信息被受众理解并得到很好的接受？
 
 你可以在回答这个问题时对样本故事稍作修改，重点放在技术信息的解释上：
 
-> 为了确保我的信息被充分理解，在解释之后，我会提供一些例子来说明我的观点，同时也会向听众提出一些问题，以确认他们的理解。 在我几个月前做的一个项目中，我不得不向业务团队解释为什么一个紧急功能被外部团队的API延迟了，以及如何延迟的。 为了做到这一点，我把重点放在企业需要的关键收获上--也就是该功能是如何被这种延迟所影响的，并利用视觉辅助工具以及使用简单清晰的语言。 我还举了一些例子，同时提出问题以确定他们对我的解释的理解。 这使得业务团队能够很好地理解依赖性，从而集思广益，即使没有外部依赖，也能够交付功能。
+> 为了确保我的信息被充分理解，在解释之后，我会提供一些例子来说明我的观点，同时也会向听众提出一些问题，以确认他们的理解。 在我几个月前做的一个项目中，我不得不向业务团队解释为什么一个紧急功能被外部团队的 API 延迟了，以及如何延迟的。 为了做到这一点，我把重点放在企业需要的关键收获上--也就是该功能是如何被这种延迟所影响的，并利用视觉辅助工具以及使用简单清晰的语言。 我还举了一些例子，同时提出问题以确定他们对我的解释的理解。 这使得业务团队能够很好地理解依赖性，从而集思广益，即使没有外部依赖，也能够交付功能。
 
 ### 你如何处理与那些没有在最后期限或职责范围内完成工作的队友合作？
 

packages/behavioral-interview-guidebook/contents/growth-mindset/pt-BR.mdx

@@ -16,26 +16,26 @@ Neste guia, você aprenderá como abordá-las:
 
 Ao avaliar candidatos nesta categoria, os entrevistadores geralmente estão observando os seguintes critérios:
 
--   Ter autoconsciência de pontos fortes e áreas de desenvolvimento.
--   Solicitando ativamente feedback de outras pessoas e criando ciclos de feedback.
--   Aceitando bem o feedback e contratempos, vendo-os como oportunidades.
--   Assume responsabilidade pessoal por falhas.
--   Refletir, modelar melhores práticas e aplicar lições a novas situações.
--   Motivado(a) por estabelecer e trabalhar em direção a metas desafiadoras.
--   Aprendendo proativamente novas habilidades e aplicando-as ao trabalho.
+- Ter autoconsciência de pontos fortes e áreas de desenvolvimento.
+- Solicitando ativamente feedback de outras pessoas e criando ciclos de feedback.
+- Aceitando bem o feedback e contratempos, vendo-os como oportunidades.
+- Assume responsabilidade pessoal por falhas.
+- Refletir, modelar melhores práticas e aplicar lições a novas situações.
+- Motivado(a) por estabelecer e trabalhar em direção a metas desafiadoras.
+- Aprendendo proativamente novas habilidades e aplicando-as ao trabalho.
 
 ## Perguntas relacionadas a uma mentalidade de crescimento abstrata
 
 ### Perguntas comuns
 
--   Qual você acha ser a sua maior área de melhoria?
--   Você pode me contar sobre uma vez em que melhorou seu trabalho após receber críticas ou feedback?
--   Me conte sobre uma vez em que você estabeleceu uma meta difícil para si mesmo e a alcançou.
--   Me conte sobre uma vez em que você aprendeu uma nova habilidade fora do trabalho e a aplicou no seu trabalho.
--   Me conte sobre uma vez em que você aprendeu um novo conjunto de habilidades depois de observar outras pessoas tirando grande proveito delas.
--   Como você se mantém atualizado(a) nas mais recentes tecnologias e técnicas de front-end?
--   Você pode fornecer um exemplo de uma vez em que teve que se adaptar a um novo ambiente ou framework técnico?
--   Imagine que você precisa implementar um novo sistema com o qual você não tem muita experiência. Quais passos você segue para reunir informações e garantir uma execução bem-sucedida?
+- Qual você acha ser a sua maior área de melhoria?
+- Você pode me contar sobre uma vez em que melhorou seu trabalho após receber críticas ou feedback?
+- Me conte sobre uma vez em que você estabeleceu uma meta difícil para si mesmo e a alcançou.
+- Me conte sobre uma vez em que você aprendeu uma nova habilidade fora do trabalho e a aplicou no seu trabalho.
+- Me conte sobre uma vez em que você aprendeu um novo conjunto de habilidades depois de observar outras pessoas tirando grande proveito delas.
+- Como você se mantém atualizado(a) nas mais recentes tecnologias e técnicas de front-end?
+- Você pode fornecer um exemplo de uma vez em que teve que se adaptar a um novo ambiente ou framework técnico?
+- Imagine que você precisa implementar um novo sistema com o qual você não tem muita experiência. Quais passos você segue para reunir informações e garantir uma execução bem-sucedida?
 
 ### Temas Identificados
 
@@ -43,9 +43,9 @@ As mentioned in our [behavioral interview preparation overview](/behavioral-inte
 
 Esses são os temas que parecem se repetir:
 
--   Recebendo e gerenciando feedback.
--   Mentalidade em relação a desafios e metas desafiadoras.
--   Continue aprendendo.
+- Recebendo e gerenciando feedback.
+- Mentalidade em relação a desafios e metas desafiadoras.
+- Continue aprendendo.
 
 ## Estrutura de Resposta Sugerida
 
@@ -105,12 +105,12 @@ Os pontos abaixo são ideias-chave em torno das quais você pode estruturar sua
 
 Esta resposta utiliza a técnica STAR de forma sutil e demonstra muitas qualidades que os entrevistadores gostariam de ver nos candidatos:
 
--   **Paixão**: Ansioso para aprender mais sobre o domínio do desenvolvimento front-end.
--   **Crescimento**: Identificou que a falta de crescimento seria um problema.
--   **Iniciativa**: Agiu diante do problema da falta de crescimento.
--   **Resolução de Problemas**: Pensou em maneiras de solucionar a falta de crescimento e colocou em prática.
--   **Construção de Camaradagem**: Reunindo pessoas com interesses semelhantes para uma causa comum.
--   **Ajuda a Melhorar os Outros**: Criou canais no Slack para compartilhar conhecimento e apoiar os outros.
+- **Paixão**: Ansioso para aprender mais sobre o domínio do desenvolvimento front-end.
+- **Crescimento**: Identificou que a falta de crescimento seria um problema.
+- **Iniciativa**: Agiu diante do problema da falta de crescimento.
+- **Resolução de Problemas**: Pensou em maneiras de solucionar a falta de crescimento e colocou em prática.
+- **Construção de Camaradagem**: Reunindo pessoas com interesses semelhantes para uma causa comum.
+- **Ajuda a Melhorar os Outros**: Criou canais no Slack para compartilhar conhecimento e apoiar os outros.
 
 ### Você pode fornecer um exemplo de uma vez em que teve que se adaptar a um novo ambiente técnico ou framework?
 
@@ -122,8 +122,8 @@ Esta resposta utiliza a técnica STAR de forma sutil e demonstra muitas qualidad
 
 Análise da resposta:
 
--   **Suscetível a Orientação**: Segue orientações e sugestões do mentor.
--   **Resolução de Problemas**: Encontrou algumas maneiras de se ajudar a se integrar mais rapidamente.
--   **Iniciativa**: Iniciativa de começar a wiki.
--   **Empatia**: Reconheceu que outras pessoas poderiam enfrentar os mesmos problemas e começou a wiki.
--   **Ajuda a Melhorar os Outros**: Novos colaboradores se beneficiam da wiki.
+- **Suscetível a Orientação**: Segue orientações e sugestões do mentor.
+- **Resolução de Problemas**: Encontrou algumas maneiras de se ajudar a se integrar mais rapidamente.
+- **Iniciativa**: Iniciativa de começar a wiki.
+- **Empatia**: Reconheceu que outras pessoas poderiam enfrentar os mesmos problemas e começou a wiki.
+- **Ajuda a Melhorar os Outros**: Novos colaboradores se beneficiam da wiki.

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

@@ -3,7 +3,7 @@ title: 回答 "告诉我什么时候...... "的成长心态
 description: 学习如何回答关于成长心态的行为问题，针对前端/网络开发者/软件工程师。 参考样本答案。
 ---
 
-正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，**成长心态**是需要准备的8大类问题中的一类。
+正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，**成长心态**是需要准备的 8 大类问题中的一类。
 
 在本指南中，您将学习如何处理这些问题：
 
@@ -16,40 +16,40 @@ description: 学习如何回答关于成长心态的行为问题，针对前端/
 
 在对这一类别的候选人进行评级时，面试者常常考虑以下标准：
 
--   对优势和发展领域有自我意识。
--   积极征求他人的反馈意见，并创建反馈循环。
--   很好地利用反馈和挫折，把它们看作是机会。
--   对失败承担个人责任。
--   反思、示范最佳做法并将经验教训应用于新的情况。
--   通过设定和努力实现具有挑战性的目标而感到兴奋。
--   积极学习新技能并应用于工作。
+- 对优势和发展领域有自我意识。
+- 积极征求他人的反馈意见，并创建反馈循环。
+- 很好地利用反馈和挫折，把它们看作是机会。
+- 对失败承担个人责任。
+- 反思、示范最佳做法并将经验教训应用于新的情况。
+- 通过设定和努力实现具有挑战性的目标而感到兴奋。
+- 积极学习新技能并应用于工作。
 
 ## 抽象成长心态问题
 
 ### 常见问题
 
--   你认为最大的改进领域是什么？
--   你能告诉我一个你在收到批评或反馈后改进工作的例子吗?
--   告诉我一个你为自己设定一个困难目标并实现了它的例子。
--   告诉我一个你在工作之外学习了新技能并将其应用到你的工作中的例子。
--   告诉我你在观察其他人利用它取得巨大成功后学习了一项新技能的情况。
--   您如何不断更新最新的前端技术和技巧？
--   你能提供一个例子说明你不得不适应一个新的技术环境或框架？
--   想象一下你需要实现一个你没有太多经验的新系统。 你会采取哪些措施来收集资料并确保成功执行？
+- 你认为最大的改进领域是什么？
+- 你能告诉我一个你在收到批评或反馈后改进工作的例子吗?
+- 告诉我一个你为自己设定一个困难目标并实现了它的例子。
+- 告诉我一个你在工作之外学习了新技能并将其应用到你的工作中的例子。
+- 告诉我你在观察其他人利用它取得巨大成功后学习了一项新技能的情况。
+- 您如何不断更新最新的前端技术和技巧？
+- 你能提供一个例子说明你不得不适应一个新的技术环境或框架？
+- 想象一下你需要实现一个你没有太多经验的新系统。 你会采取哪些措施来收集资料并确保成功执行？
 
 ### 确定的主题
 
-正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，为那里的每一个行为问题准备具体的答案是不切实际的。 然而，通过将具体问题批量化为类似的主题，并准备涵盖大量问题要求的故事，我们可以将准备的故事数量减少到3-5个左右。
+正如我们的[行为面试准备概述](/behavioral-interview-guidebook)中提到的，为那里的每一个行为问题准备具体的答案是不切实际的。 然而，通过将具体问题批量化为类似的主题，并准备涵盖大量问题要求的故事，我们可以将准备的故事数量减少到 3-5 个左右。
 
 这些是似乎反复出现的主题：
 
--   接收和管理反馈信息。
--   对挑战和扩展目标的心态。
--   持续学习
+- 接收和管理反馈信息。
+- 对挑战和扩展目标的心态。
+- 持续学习
 
 ## 建议的答案框架
 
-一如既往，[STAR法则](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 是我们推荐的最简单、最有效的框架，用于构造你的故事。
+一如既往，[STAR 法则](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 是我们推荐的最简单、最有效的框架，用于构造你的故事。
 
 以下是我们为每个已确定的主题推荐的方法，你可以用这些方法构建你的故事：
 
@@ -69,15 +69,15 @@ description: 学习如何回答关于成长心态的行为问题，针对前端/
 
 ### 持续学习
 
-一个好的答案是结合一致的时间表和对学习的努力，以及如何积极主动地将学习应用于工作。 例如：“我了解了X，因为我在做Y。 这影响了我在工作中处理Z问题的方式，因为这使我意识到W和V”。
+一个好的答案是结合一致的时间表和对学习的努力，以及如何积极主动地将学习应用于工作。 例如：“我了解了 X，因为我在做 Y。 这影响了我在工作中处理 Z 问题的方式，因为这使我意识到 W 和 V”。
 
 以下几点是你可以围绕技术学习构建答案的关键想法；但是，你仍然应该加入你实际参与过的活动、通讯或社区的具体例子，以展示你紧跟潮流的意愿。
 
 1.  关注涵盖前端技术和技技巧最新发展的相关博客、新闻通讯和播客。 给出一些例子（你确实关注了的）以及他们提供的内容或技术。
     1.  推特影响者
-        1.  [Dan Abramov](https://twitter.com/dan_abramov) — Redux的共同创造者，React核心团队。
-        2.  [Evan You](https://twitter.com/youyuxi) — Vue.js和Vite的创建者。
-        3.  [Rich Harris](https://twitter.com/Rich_Harris) — Svelte和Rollup的创作者。
+        1.  [Dan Abramov](https://twitter.com/dan_abramov) — Redux 的共同创造者，React 核心团队。
+        2.  [Evan You](https://twitter.com/youyuxi) — Vue.js 和 Vite 的创建者。
+        3.  [Rich Harris](https://twitter.com/Rich_Harris) — Svelte 和 Rollup 的创作者。
         4.  [Kent C. Dodds](https://twitter.com/kentcdodds) — Popular React 生态系统课程创建者。
         5.  [Josh W. Comeau](https://twitter.com/JoshWComeau) — 流行前端课程创建者。
     2.  博客和杂志
@@ -91,7 +91,7 @@ description: 学习如何回答关于成长心态的行为问题，针对前端/
         3.  [The Changelog](https://changelog.com/podcast)
 2.  参加技术会议和聚会，学习新的发展，建立网络，并获得最新工具和技术的实践经验。
 3.  使用最新技术和技巧实验和构建项目。 这可能需要自行构建小型项目或帮助开源项目。
-4.  通过参与在线论坛，关注相关的Twitter账户和标签，以及加入当地的用户组或聚会，与更广泛的前端开发社区保持联系。
+4.  通过参与在线论坛，关注相关的 Twitter 账户和标签，以及加入当地的用户组或聚会，与更广泛的前端开发社区保持联系。
 
 ## 问题和答案
 
@@ -99,31 +99,31 @@ description: 学习如何回答关于成长心态的行为问题，针对前端/
 
 > 过去两年来我一直在一家大型科技公司工作，该公司将外部和内部技术混合用于我们的前端堆栈。 因为我们有一个巨大的代码库和既定的做事方法，所以我们往往不会经常升级库和改变我们的技术选择。 工作一年后，我才意识到，我在自己的岗位上太舒服了，因为我已经完全夯实了代码基础，在过去一年里没有学到任何新东西。 就在那时，我决定我必须积极主动地学习，以保持我的技能的敏锐性和相关性。
 >
-> 前端生态系统发展得非常快，有一个笑话说每天都有新的JavaScript库出现。 值得庆幸的是，与2015/2016年新一波前端工具首次出现时相比，现在的生态系统更加稳定。 为了让自己保持更新而不受JavaScript疲劳之苦， 我每个月都会花一个周末浏览前端新闻通讯，如“React中的这个星期”和“JavaScript周刊”，并阅读工程博客。 如果我看到有趣的东西或与我的工作有关，我会通过尝试小的例子和在我公司的代码库中建立小的原型来深入研究它们。 例如，我最近发现了React Query，它是React的一个数据获取库，使用声明式范式来获取数据，并试图将其纳入我的工作中。 我最近还发现了tRPC，一个在客户端和服务器边界之间执行类型安全的库，这是一个给我们带来一些错误的问题。
+> 前端生态系统发展得非常快，有一个笑话说每天都有新的 JavaScript 库出现。 值得庆幸的是，与 2015/2016 年新一波前端工具首次出现时相比，现在的生态系统更加稳定。 为了让自己保持更新而不受 JavaScript 疲劳之苦， 我每个月都会花一个周末浏览前端新闻通讯，如“React 中的这个星期”和“JavaScript 周刊”，并阅读工程博客。 如果我看到有趣的东西或与我的工作有关，我会通过尝试小的例子和在我公司的代码库中建立小的原型来深入研究它们。 例如，我最近发现了 React Query，它是 React 的一个数据获取库，使用声明式范式来获取数据，并试图将其纳入我的工作中。 我最近还发现了 tRPC，一个在客户端和服务器边界之间执行类型安全的库，这是一个给我们带来一些错误的问题。
 >
-> 为了使学习过程更加有趣和协作，我在公司内创建了一个前端社交俱乐部，创建了一个新的 Slack 频道，并邀请了一些志同道合的同事加入。 任何人都可以在那里分享他们认为有趣的前端新闻并讨论前端技术。 它的反响相当好，目前有30多人在这个频道，几乎每天都有活动。 这项举措的一个副作用是，人们也开始就他们在工作中面临的前端问题提出问题。 我们创建了另一个Slack渠道，让人们在前端问题上获得帮助。 反馈迄今确实是正面的！
+> 为了使学习过程更加有趣和协作，我在公司内创建了一个前端社交俱乐部，创建了一个新的 Slack 频道，并邀请了一些志同道合的同事加入。 任何人都可以在那里分享他们认为有趣的前端新闻并讨论前端技术。 它的反响相当好，目前有 30 多人在这个频道，几乎每天都有活动。 这项举措的一个副作用是，人们也开始就他们在工作中面临的前端问题提出问题。 我们创建了另一个 Slack 渠道，让人们在前端问题上获得帮助。 反馈迄今确实是正面的！
 
 这个答案以一种微妙的方式使用了 STAR 技术，并展示了面试官希望在候选人身上看到的许多品质：
 
--   **激情**：热衷于学习更多关于前端领域的知识。
--   **成长**：确定了缺乏成长将是一个问题。
--   **倡议**：对缺乏增长的问题采取了行动。
--   **问题解决**：想出解决缺乏成长的方法，并付诸行动。
--   **建立友情**：为了一个共同的目标，召集志同道合的人。
--   **帮助提升他人**：创建Slack频道，分享知识和支持他人。
+- **激情**：热衷于学习更多关于前端领域的知识。
+- **成长**：确定了缺乏成长将是一个问题。
+- **倡议**：对缺乏增长的问题采取了行动。
+- **问题解决**：想出解决缺乏成长的方法，并付诸行动。
+- **建立友情**：为了一个共同的目标，召集志同道合的人。
+- **帮助提升他人**：创建 Slack 频道，分享知识和支持他人。
 
 ### 你能提供一个例子说明你不得不适应一个新的技术环境或框架？
 
-> 当我在2019年加入现在的公司时，我刚从大学毕业，对公司使用的前端堆栈没有经验，他们的前端堆栈使用React、Apollo、Styled Components、TypeScript，后端使用Django + GraphQL。 在大学时，我主要使用Vue.js进行前端开发，因为它是web开发课上教授的JavaScript框架的首选，之前没有使用过GraphQL。
+> 当我在 2019 年加入现在的公司时，我刚从大学毕业，对公司使用的前端堆栈没有经验，他们的前端堆栈使用 React、Apollo、Styled Components、TypeScript，后端使用 Django + GraphQL。 在大学时，我主要使用 Vue.js 进行前端开发，因为它是 web 开发课上教授的 JavaScript 框架的首选，之前没有使用过 GraphQL。
 >
-> 一开始，这对我来说绝对是一个巨大的学习曲线，我真的害怕由于对技术栈的不熟悉而表现不佳。 值得庆幸的是，我有一个导师，他在技术堆栈方面给了我很多指导，并提出了一些入职任务，这些任务逐渐变得越来越难。 我第一次花了几天时间阅读技术的文档网站，并试用他们网站上的例子。 我特意去了解这些库所解决的问题，以及它们是如何比现有技术更好的，因为我认为了解这些对充分欣赏库和使用正确的工具进行正确的工作是很重要的。 我还寻找了一些将Vue.js与React相比较的资源，因为它们非常类似，但有一些差异。 这有助于我更快地了解React(虽然完全掌握React钩子还是花了我一些时间)。 当我在晚上或周末有时间时，我会探索使用这些新技术建立小项目，也会使用Gatsby重建我的个人博客（因为它同时使用React和GraphQL）。
+> 一开始，这对我来说绝对是一个巨大的学习曲线，我真的害怕由于对技术栈的不熟悉而表现不佳。 值得庆幸的是，我有一个导师，他在技术堆栈方面给了我很多指导，并提出了一些入职任务，这些任务逐渐变得越来越难。 我第一次花了几天时间阅读技术的文档网站，并试用他们网站上的例子。 我特意去了解这些库所解决的问题，以及它们是如何比现有技术更好的，因为我认为了解这些对充分欣赏库和使用正确的工具进行正确的工作是很重要的。 我还寻找了一些将 Vue.js 与 React 相比较的资源，因为它们非常类似，但有一些差异。 这有助于我更快地了解 React(虽然完全掌握 React 钩子还是花了我一些时间)。 当我在晚上或周末有时间时，我会探索使用这些新技术建立小项目，也会使用 Gatsby 重建我的个人博客（因为它同时使用 React 和 GraphQL）。
 >
 > 在两个月内，我觉得自己学到了很多东西，对大部分的代码库都很熟悉。 我可以在没有导师指导的情况下建立端到端的功能。 为了帮助未来可能面临同样入职挑战的新员工，我在我们的内部维基中记下了我的学习成果，以及学习该主题的最佳资源链接。 我的经理对这一举措感到惊讶，并为此表扬了我。 今天，它是我们官方工程入职资源的一部分，我每隔一段时间就会更新它。 一些新加入者还感谢我我在维基上分享的知识，并使他们的入职过程更加顺利。
 
 对答案的分析：
 
--   **可辅导的**：遵从导师的指导/建议。
--   **问题解决**：想出了一些方法来帮助他们更快地上岗。
--   **主动性**：主动启动维基。
--   **同理心**：看到其他人可能面临同样的问题并启动了 wiki。
--   **帮助提升他人**：新加入者从维基中受益。
+- **可辅导的**：遵从导师的指导/建议。
+- **问题解决**：想出了一些方法来帮助他们更快地上岗。
+- **主动性**：主动启动维基。
+- **同理心**：看到其他人可能面临同样的问题并启动了 wiki。
+- **帮助提升他人**：新加入者从维基中受益。

packages/behavioral-interview-guidebook/contents/overview/pt-BR.mdx

@@ -37,8 +37,8 @@ As classificações devem ser feitas levando em consideração a complexidade da
 
 No final da entrevista, eles conciliam todas as classificações e feedback qualitativo para decidir:
 
--   Se devem aprovar ou reprovar o candidato
--   Se aprovado, qual nível o candidato deve receber
+- Se devem aprovar ou reprovar o candidato
+- Se aprovado, qual nível o candidato deve receber
 
 A implicação disso é que normalmente podemos esperar que as entrevistas comportamentais em grandes empresas de tecnologia tenham alguma estrutura, já que os entrevistadores tentarão fazer pelo menos uma pergunta de cada categoria para avaliar os candidatos.
 
@@ -56,43 +56,43 @@ Portanto, os candidatos também devem se preparar com um entendimento sólido da
 
 Aqui estão as categorias comuns de avaliação e critérios com base em nossa experiência na realização de entrevistas comportamentais para engenheiros de software em grandes empresas de tecnologia:
 
-#### 1.  Colaboração
+#### 1. Colaboração
 
--   Lidando com desacordos
--   Trabalhando em equipe
--   Trabalhando com personalidades e habilidades diversas
--   Transmitindo ideias complexas de forma simples
--   Dando feedback construtivo
--   Escuta ativa
+- Lidando com desacordos
+- Trabalhando em equipe
+- Trabalhando com personalidades e habilidades diversas
+- Transmitindo ideias complexas de forma simples
+- Dando feedback construtivo
+- Escuta ativa
 
-#### 2.  Alcançando Resultados e Resolução de Problemas
+#### 2. Alcançando Resultados e Resolução de Problemas
 
--   Mentalidade orientada para impacto
-    -   Proatividade para avançar apesar de obstáculos ou bloqueios
-    -   Influenciando os outros a cumprir os objetivos
-    -   Equilibrando análise com ação decisiva
--   Identificando as melhores soluções e executando-as
-    -   Identificando os problemas corretos
-    -   Identificando os objetivos mais críticos
-    -   Recursos e mentalidade orientada por dados
-    -   Criatividade e inovação
-    -   Identificando compensações (trade-offs) e soluções sustentáveis
-    -   Medindo resultados, iterando e seguindo adiante
+- Mentalidade orientada para impacto
+  - Proatividade para avançar apesar de obstáculos ou bloqueios
+  - Influenciando os outros a cumprir os objetivos
+  - Equilibrando análise com ação decisiva
+- Identificando as melhores soluções e executando-as
+  - Identificando os problemas corretos
+  - Identificando os objetivos mais críticos
+  - Recursos e mentalidade orientada por dados
+  - Criatividade e inovação
+  - Identificando compensações (trade-offs) e soluções sustentáveis
+  - Medindo resultados, iterando e seguindo adiante
 
-#### 3.  Mentalidade de Crescimento
+#### 3. Mentalidade de Crescimento
 
--   Ter autoconsciência de pontos fortes e áreas de desenvolvimento
--   Solicitando ativamente feedback de outras pessoas e criando ciclos de feedback
--   Aceitando bem o feedback e contratempos, vendo-os como oportunidades
--   Assume responsabilidade pessoal por falhas
--   Refletindo, modelando melhores práticas e aplicando lições a novas situações
--   Motivado(a) ao definir e trabalhar em direção a metas desafiadoras
+- Ter autoconsciência de pontos fortes e áreas de desenvolvimento
+- Solicitando ativamente feedback de outras pessoas e criando ciclos de feedback
+- Aceitando bem o feedback e contratempos, vendo-os como oportunidades
+- Assume responsabilidade pessoal por falhas
+- Refletindo, modelando melhores práticas e aplicando lições a novas situações
+- Motivado(a) ao definir e trabalhar em direção a metas desafiadoras
 
-#### 4.  Adaptabilidade e flexibilidade
+#### 4. Adaptabilidade e flexibilidade
 
 -
--   Mantendo a calma e o foco, servindo como uma presença estável para os outros
--   Flexível e rápido para se adaptar a situações inesperadas
+- Mantendo a calma e o foco, servindo como uma presença estável para os outros
+- Flexível e rápido para se adaptar a situações inesperadas
 
 ### Expectativas Típicas de Nivelamento em Entrevistas Comportamentais
 
@@ -102,41 +102,41 @@ Compreenda os comportamentos esperados para os níveis de engenharia comumente d
 
 #### Engenheiro de Software Júnior (L3)
 
--   Takes direction from managers and/or senior members of the team.
--   Executa tarefas bem definidas sem precisar de muita orientação.
--   Principalmente aprimora suas próprias habilidades e conhecimentos.
+- Takes direction from managers and/or senior members of the team.
+- Executa tarefas bem definidas sem precisar de muita orientação.
+- Principalmente aprimora suas próprias habilidades e conhecimentos.
 
 #### Engenheiro de Software (L4)
 
--   Compreende o propósito do projeto e ajuda a alcançar os objetivos da equipe.
--   Divide projetos maiores (geralmente trabalhos de recursos) que lhes são atribuídos em tarefas menores para execução oportuna.
--   Equilibra adequadamente entre delegar tarefas e executar tarefas por conta própria.
--   Aprimora suas próprias habilidades enquanto possivelmente orienta membros mais juniores, estagiários ou novas contratações.
--   Colabora de forma interfuncional com orientação de membros mais sênior da equipe.
+- Compreende o propósito do projeto e ajuda a alcançar os objetivos da equipe.
+- Divide projetos maiores (geralmente trabalhos de recursos) que lhes são atribuídos em tarefas menores para execução oportuna.
+- Equilibra adequadamente entre delegar tarefas e executar tarefas por conta própria.
+- Aprimora suas próprias habilidades enquanto possivelmente orienta membros mais juniores, estagiários ou novas contratações.
+- Colabora de forma interfuncional com orientação de membros mais sênior da equipe.
 
 #### Engenheiro de Software Sênior (L5)
 
--   Lidera o desenvolvimento em tarefas e projetos complexos dentro da equipe.
-    -   Identifica soluções bem planejadas para projetos ambíguos de grande escopo
-    -   Divide a solução em projetos menores e delega alguns deles aos membros da equipe.
--   Procura de forma proativa novas ideias e direções para construir o produto de maneira mais eficaz.
--   Orienta vários membros juniores da equipe e os ajuda a melhorar, sendo um modelo a seguir.
--   Trabalha de forma independente de maneira interfuncional e conduz discussões complexas e ambíguas.
+- Lidera o desenvolvimento em tarefas e projetos complexos dentro da equipe.
+  - Identifica soluções bem planejadas para projetos ambíguos de grande escopo
+  - Divide a solução em projetos menores e delega alguns deles aos membros da equipe.
+- Procura de forma proativa novas ideias e direções para construir o produto de maneira mais eficaz.
+- Orienta vários membros juniores da equipe e os ajuda a melhorar, sendo um modelo a seguir.
+- Trabalha de forma independente de maneira interfuncional e conduz discussões complexas e ambíguas.
 
 #### Engenheiro de Software Sênior (Nível 6)
 
--   Compreende os objetivos de negócios e aconselha gestores e líderes da organização para alcançar esses objetivos.
--   Lidera ou exerce grande influência na direção de uma equipe de engenheiros.
--   Demonstra expertise no domínio e é admirado por outros engenheiros.
--   Realiza um planejamento claro e de longo prazo entre equipes/dentro da organização e busca consenso.
--   Orienta líderes de tecnologia e membros juniores da equipe.
--   Trabalha em projetos que exigem interações com engenheiros e parceiros multifuncionais em várias equipes.
+- Compreende os objetivos de negócios e aconselha gestores e líderes da organização para alcançar esses objetivos.
+- Lidera ou exerce grande influência na direção de uma equipe de engenheiros.
+- Demonstra expertise no domínio e é admirado por outros engenheiros.
+- Realiza um planejamento claro e de longo prazo entre equipes/dentro da organização e busca consenso.
+- Orienta líderes de tecnologia e membros juniores da equipe.
+- Trabalha em projetos que exigem interações com engenheiros e parceiros multifuncionais em várias equipes.
 
 #### Engenheiro de Software Sênior de Nível 7 (L7) e além
 
--   Define metas de negócios/engenharia em toda a organização/empresa e as alcança.
--   Influencia ou lidera os roteiros de produtos e engenharia dentro da organização/empresa.
--   Lidera o desenvolvimento e entrega de soluções para áreas altamente complexas e ambíguas.
+- Define metas de negócios/engenharia em toda a organização/empresa e as alcança.
+- Influencia ou lidera os roteiros de produtos e engenharia dentro da organização/empresa.
+- Lidera o desenvolvimento e entrega de soluções para áreas altamente complexas e ambíguas.
 
 ## Estratégia de Preparação Recomendada
 
@@ -151,10 +151,10 @@ Há bastante variação em relação às perguntas que podem ser feitas. Embora
 3.  ["Por que fazer parte desta equipe ou empresa?"](/behavioral-interview-guidebook/why-work-here)
 4.  ["Você tem alguma pergunta para mim?"](/behavioral-interview-guidebook/questions-to-ask)
 5.  "Me conte sobre uma situação em que..." (categorizado abaixo dos temas)
-    -   [Roteamento de resultados e resolução de problemas](/behavioral-interview-guidebook/problem-solving)
-    -   [Collaboration](/behavioral-interview-guidebook/colaboração)
-    -   [mentalidade de crescimento](/behavioral-interview-guidebook/growth-mindset)
-    -   Adaptabilidade e flexibilidade
+    - [Roteamento de resultados e resolução de problemas](/behavioral-interview-guidebook/problem-solving)
+    - [Collaboration](/behavioral-interview-guidebook/colaboração)
+    - [mentalidade de crescimento](/behavioral-interview-guidebook/growth-mindset)
+    - Adaptabilidade e flexibilidade
 
 ### Prepare algumas boas histórias gerais com base em temas comuns
 
@@ -162,26 +162,26 @@ A estratégia geral para lidar com a grande variedade de perguntas "Me conte sob
 
 Aqui estão algumas dicas para selecionar e preparar boas experiências de projetos como histórias:
 
--   Verifique em relação aos critérios de avaliação acima e tente escolher experiências amplas que possam ser usadas para abordar diversos critérios. Em seguida, liste brevemente os pontos-chave de como você demonstrou comportamentos que atenderam aos traços necessários.
--   Escolha experiências que demonstrem suas expectativas de nível. Por exemplo, se você está se candidatando a uma posição de Engenheiro de Software Sênior, certifique-se de que suas experiências demonstrem sua influência na direção de equipes inteiras.
--   Evite reutilizar as mesmas histórias com muita frequência durante a mesma rodada de entrevistas. Os entrevistadores costumam discutir o desempenho do candidato juntos, portanto, o uso excessivo da mesma história pode parecer repetitivo e indicar uma falta de variedade em sua experiência.
--   Como mencionado anteriormente, os entrevistadores tendem a priorizar perguntas de acompanhamento para compreender a verdadeira psicologia, motivações e entendimento do candidato. Para cada história, prepare um entendimento sólido das vantagens e desvantagens de cada modo alternativo de ação, e reflita sobre suas motivações intrínsecas.
+- Verifique em relação aos critérios de avaliação acima e tente escolher experiências amplas que possam ser usadas para abordar diversos critérios. Em seguida, liste brevemente os pontos-chave de como você demonstrou comportamentos que atenderam aos traços necessários.
+- Escolha experiências que demonstrem suas expectativas de nível. Por exemplo, se você está se candidatando a uma posição de Engenheiro de Software Sênior, certifique-se de que suas experiências demonstrem sua influência na direção de equipes inteiras.
+- Evite reutilizar as mesmas histórias com muita frequência durante a mesma rodada de entrevistas. Os entrevistadores costumam discutir o desempenho do candidato juntos, portanto, o uso excessivo da mesma história pode parecer repetitivo e indicar uma falta de variedade em sua experiência.
+- Como mencionado anteriormente, os entrevistadores tendem a priorizar perguntas de acompanhamento para compreender a verdadeira psicologia, motivações e entendimento do candidato. Para cada história, prepare um entendimento sólido das vantagens e desvantagens de cada modo alternativo de ação, e reflita sobre suas motivações intrínsecas.
 
 ### Estruture suas respostas iniciais com o framework STAR
 
 Após ter preparado uma história que você possa usar, é importante estruturá-la adequadamente ao responder a perguntas específicas. Um requisito pelo qual os entrevistadores são sempre orientados a observar é a capacidade real do candidato de se comunicar durante a entrevista (em oposição ao que eles afirmam), que é avaliada da seguinte forma:
 
--   Processo de pensamento bem organizado e fácil de seguir
--   Boa intuição sobre quais detalhes devem ser elaborados e quais devem ser mantidos simples
--   Deixa os outros claros sobre o propósito e ações
--   Demonstra escuta ativa
+- Processo de pensamento bem organizado e fácil de seguir
+- Boa intuição sobre quais detalhes devem ser elaborados e quais devem ser mantidos simples
+- Deixa os outros claros sobre o propósito e ações
+- Demonstra escuta ativa
 
 Para alcançar o que foi mencionado acima, é necessário estruturar bem suas respostas para garantir que sejam concisas e diretas, com duração inferior a 3 minutos. Uma diretriz aproximada que você pode usar é um framework como STAR (Situação, Tarefa, Ação, Resultado):
 
--   **Situação**: Apresente detalhes básicos do cenário, apenas o suficiente para compreender o desafio em que você estava. (Não gaste muito tempo nisso)
--   **Tarefa**: O que você precisava alcançar ou fazer no cenário? (Não gaste muito tempo nisso)
--   **Ação**: O que você fez? É aqui que você demonstra os traços necessários com base na abordagem que adotou para resolver o desafio ou a situação.
--   **Resultados**: Qual foi o resultado de suas ações?
+- **Situação**: Apresente detalhes básicos do cenário, apenas o suficiente para compreender o desafio em que você estava. (Não gaste muito tempo nisso)
+- **Tarefa**: O que você precisava alcançar ou fazer no cenário? (Não gaste muito tempo nisso)
+- **Ação**: O que você fez? É aqui que você demonstra os traços necessários com base na abordagem que adotou para resolver o desafio ou a situação.
+- **Resultados**: Qual foi o resultado de suas ações?
 
 Aqui está um exemplo de aplicação do STAR para responder a uma pergunta de entrevista comportamental: "Me conte sobre uma vez em que você teve que gerenciar múltiplas prioridades conflitantes e como você lidou com isso":
 
@@ -195,11 +195,11 @@ Conforme reconheci que não era possível realizar todas elas com boa qualidade
 
 #### Ação
 
--   O que fiz foi organizar uma reunião rápida com todos os principais interessados em produtos e engenharia para co-priorizar e atribuir os recursos adequados para apoiar esse projeto.
--   Listei as funcionalidades solicitadas por cada equipe e trabalhei com todos os interessados relevantes para identificar a contribuição de cada funcionalidade para os objetivos de negócios, ao mesmo tempo em que fiz uma estimativa aproximada do esforço de engenharia necessário para cada uma.
--   Isso nos ajudou a despriorizar as funcionalidades que demandavam um esforço de engenharia muito alto, mas contribuíam pouco para os objetivos.
--   Para projetos que não eram realisticamente possíveis de serem concluídos dentro dos prazos, conseguimos negociar por mais recursos de engenharia para delegar o trabalho dessas funcionalidades.
--   Após isso, para garantir que meus próprios prazos fossem cumpridos, dividi as funcionalidades em tarefas menores e as planejei em marcos diários e semanais, revisando meu progresso regularmente com a equipe.
+- O que fiz foi organizar uma reunião rápida com todos os principais interessados em produtos e engenharia para co-priorizar e atribuir os recursos adequados para apoiar esse projeto.
+- Listei as funcionalidades solicitadas por cada equipe e trabalhei com todos os interessados relevantes para identificar a contribuição de cada funcionalidade para os objetivos de negócios, ao mesmo tempo em que fiz uma estimativa aproximada do esforço de engenharia necessário para cada uma.
+- Isso nos ajudou a despriorizar as funcionalidades que demandavam um esforço de engenharia muito alto, mas contribuíam pouco para os objetivos.
+- Para projetos que não eram realisticamente possíveis de serem concluídos dentro dos prazos, conseguimos negociar por mais recursos de engenharia para delegar o trabalho dessas funcionalidades.
+- Após isso, para garantir que meus próprios prazos fossem cumpridos, dividi as funcionalidades em tarefas menores e as planejei em marcos diários e semanais, revisando meu progresso regularmente com a equipe.
 
 #### Resultado
 
@@ -223,9 +223,9 @@ Uma entrevista comportamental geralmente acontece após. Candidatos que passaram
 
 Compreensivelmente, como entrevistador, você geralmente tentaria separar:
 
--   Esse candidato será um **baixo desempenho**? por exemplo, frequentemente perde prazos, não é responsável, não tem motivação, entra em conflitos frequentes com os outros, comunica-se mal e não aceita bem o feedback. Eles estão mentindo ou exagerando em seu currículo?
--   O candidato será um **superastro, colega motivado**? por exemplo, comunica-se bem, é engenhoso e independente na resolução de problemas, sabe gerenciar partes interessadas, é proativo e trabalha arduamente para implementar novas iniciativas que impulsionem a equipe.
--   O candidato será **fácil de gerenciar**? por exemplo, aceita bem o feedback, é simpático, sociável e não causa problemas.
+- Esse candidato será um **baixo desempenho**? por exemplo, frequentemente perde prazos, não é responsável, não tem motivação, entra em conflitos frequentes com os outros, comunica-se mal e não aceita bem o feedback. Eles estão mentindo ou exagerando em seu currículo?
+- O candidato será um **superastro, colega motivado**? por exemplo, comunica-se bem, é engenhoso e independente na resolução de problemas, sabe gerenciar partes interessadas, é proativo e trabalha arduamente para implementar novas iniciativas que impulsionem a equipe.
+- O candidato será **fácil de gerenciar**? por exemplo, aceita bem o feedback, é simpático, sociável e não causa problemas.
 
 Se um candidato simplesmente recitasse respostas ou parecesse impassível e desinteressado, você o contrataria para sua equipe? Provavelmente não. Para os entrevistadores, é tão importante ver você como sua verdadeira e natural personalidade quanto é saber se seu processo de pensamento está alinhado com os objetivos deles.
 

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

@@ -7,10 +7,8 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 然而，准备行为面试时面临的一些常见挑战有：
 
-1.  如何准备面试的各种问题？
-    由于面试官可以问任何他们想要问的问题，因此准备任何行为问题都是不可能的。 但是，我们可以将常见的问题分类为几个主题，并采用方法论来解决它们。
-2.  如何展现自己的"适应性"？
-    许多候选人在面试时都难以让自己显得可爱，并与面试官取得联系。 我们将根据我们的经验提供一些应对策略。
+1.  如何准备面试的各种问题？由于面试官可以问任何他们想要问的问题，因此准备任何行为问题都是不可能的。 但是，我们可以将常见的问题分类为几个主题，并采用方法论来解决它们。
+2.  如何展现自己的"适应性"？许多候选人在面试时都难以让自己显得可爱，并与面试官取得联系。 我们将根据我们的经验提供一些应对策略。
 
 本文将介绍：
 
@@ -31,7 +29,7 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 ### 面试官的角度
 
-行为面试官通常需要对几个广泛的类别，如合作、积极性等进行评分。 对于每个评估类别，他们会提供有关好评或差评的标准。 评级通常采用5分评级尺度，例如非常好/好/达标/差/非常差之一。
+行为面试官通常需要对几个广泛的类别，如合作、积极性等进行评分。 对于每个评估类别，他们会提供有关好评或差评的标准。 评级通常采用 5 分评级尺度，例如非常好/好/达标/差/非常差之一。
 
 除此之外，面试官还可以标记是否没有足够的信息来做出判断，或者是否没有时间问及特定的信号。
 
@@ -39,8 +37,8 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 在面试结束后，面试官需要协调所有评分和定性反馈，以决定：
 
--   是否通过或不通过候选人
--   如果通过，候选人应该获得什么级别
+- 是否通过或不通过候选人
+- 如果通过，候选人应该获得什么级别
 
 以上的影响是我们通常可以期望大型科技公司的行为面试有一定的结构性，因为面试官会尝试询问至少一个类别的问题来评估候选人。
 
@@ -58,87 +56,87 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 以下是我们在大型科技公司为软件工程师开展行为面试时的常见评估类别和标准：
 
-#### 1.  合作
+#### 1. 合作
 
--   处理分歧
--   团队合作
--   处理各种个性和技能的人
--   以简单的方式传达复杂的思想
--   给予建设性反馈
--   积极倾听
+- 处理分歧
+- 团队合作
+- 处理各种个性和技能的人
+- 以简单的方式传达复杂的思想
+- 给予建设性反馈
+- 积极倾听
 
-#### 2.  实现结果和解决问题
+#### 2. 实现结果和解决问题
 
--   影响力导向的心态
-    -   在遇到障碍或路障时积极推进进展
-    -   影响他人实现目标
-    -   在分析和果断行动之间平衡
--   辨别最佳解决方案并付诸实施
-    -   辨别正确的问题
-    -   辨别最关键的目标
-    -   具备资源节约的思维和数据驱动的心态
-    -   创意和创新
-    -   辨别权衡和可持续的解决方案
-    -   量化结果，迭代并跟进
+- 影响力导向的心态
+  - 在遇到障碍或路障时积极推进进展
+  - 影响他人实现目标
+  - 在分析和果断行动之间平衡
+- 辨别最佳解决方案并付诸实施
+  - 辨别正确的问题
+  - 辨别最关键的目标
+  - 具备资源节约的思维和数据驱动的心态
+  - 创意和创新
+  - 辨别权衡和可持续的解决方案
+  - 量化结果，迭代并跟进
 
-#### 3.  成长心态
+#### 3. 成长心态
 
--   自我意识和发展领域
--   积极征求来自他人的反馈并建立反馈循环
--   良好地接受反馈和挫折，将其视为机会
--   对失败承担个人责任
--   反思，模拟最佳实践并将经验应用于新情境
--   通过设置和努力追求具有挑战性的目标而充满活力
+- 自我意识和发展领域
+- 积极征求来自他人的反馈并建立反馈循环
+- 良好地接受反馈和挫折，将其视为机会
+- 对失败承担个人责任
+- 反思，模拟最佳实践并将经验应用于新情境
+- 通过设置和努力追求具有挑战性的目标而充满活力
 
-#### 4.  适应能力和灵活性
+#### 4. 适应能力和灵活性
 
--   在不确定性中表现出色
--   保持冷静和专注，为他人提供稳定的存在
--   灵活并迅速适应意外情况
+- 在不确定性中表现出色
+- 保持冷静和专注，为他人提供稳定的存在
+- 灵活并迅速适应意外情况
 
 ### 典型的行为面试职级期望
 
-行为面试是一种面试格式，面试官可以根据求职者讲述的故事、其回答和制定的决策来评估其成熟度，从初级软件工程师到极其高级的职位不等。 工作经验的年限并不一定等同于特定的职级，因为有些人比其他人成熟得更快。 通常，职级的指导意见是考虑到工作经验的年限和职级期望而制定的。 下面提到的职级是基于谷歌和Facebook的职级，其中L3相当于初级软件工程师/应届毕业生。
+行为面试是一种面试格式，面试官可以根据求职者讲述的故事、其回答和制定的决策来评估其成熟度，从初级软件工程师到极其高级的职位不等。 工作经验的年限并不一定等同于特定的职级，因为有些人比其他人成熟得更快。 通常，职级的指导意见是考虑到工作经验的年限和职级期望而制定的。 下面提到的职级是基于谷歌和 Facebook 的职级，其中 L3 相当于初级软件工程师/应届毕业生。
 
 了解通常定义的工程师职级的预期行为，并精心设计您的回答，确保它们与您当前的职级或您所针对的职级相匹配。
 
 #### 初级软件工程师（L3）
 
--   从经理和/或团队高级成员那里接受指导。
--   在没有太多指导的情况下执行明确定义的任务。
--   主要改进自己的技能和技艺。
+- 从经理和/或团队高级成员那里接受指导。
+- 在没有太多指导的情况下执行明确定义的任务。
+- 主要改进自己的技能和技艺。
 
 #### 软件工程师（L4）
 
--   理解项目目的并帮助实现团队的目标。
--   将分配给他们的较大项目（通常是特性工作）拆分成较小的任务以便及时执行。
--   适当平衡委派任务和自己执行任务。
--   在可能指导更初级的成员、实习生或新员工时提升他们自己的技能。
--   在高级团队成员的指导下开展跨职能合作。
+- 理解项目目的并帮助实现团队的目标。
+- 将分配给他们的较大项目（通常是特性工作）拆分成较小的任务以便及时执行。
+- 适当平衡委派任务和自己执行任务。
+- 在可能指导更初级的成员、实习生或新员工时提升他们自己的技能。
+- 在高级团队成员的指导下开展跨职能合作。
 
 #### 高级软件工程师（L5）
 
--   在团队内领导复杂任务和项目的开发。
-    -   辨别经过深思熟虑的对于范围较大的模糊项目的解决方案
-    -   将解决方案拆分成较小的项目并将其中的一些委派给团队成员。
--   积极寻求新的想法和方向，以更好地构建产品。
--   指导多个团队成员并作为榜样帮助他们提高。
--   独立开展跨职能合作并推动复杂、模糊的讨论。
+- 在团队内领导复杂任务和项目的开发。
+  - 辨别经过深思熟虑的对于范围较大的模糊项目的解决方案
+  - 将解决方案拆分成较小的项目并将其中的一些委派给团队成员。
+- 积极寻求新的想法和方向，以更好地构建产品。
+- 指导多个团队成员并作为榜样帮助他们提高。
+- 独立开展跨职能合作并推动复杂、模糊的讨论。
 
 #### 高级职员软件工程师（L6）
 
--   理解业务目标并建议经理和组织领导实现目标。
--   领导一队工程师的方向。
--   展示领域专业知识，受到其他工程师的钦佩。
--   在团队/组织内开展清晰的长期规划并推动一致。
--   指导技术组长和团队的初级成员。
--   开展需要与多个团队的工程师和跨职能合作伙伴互动的项目。
+- 理解业务目标并建议经理和组织领导实现目标。
+- 领导一队工程师的方向。
+- 展示领域专业知识，受到其他工程师的钦佩。
+- 在团队/组织内开展清晰的长期规划并推动一致。
+- 指导技术组长和团队的初级成员。
+- 开展需要与多个团队的工程师和跨职能合作伙伴互动的项目。
 
 #### 高级职员软件工程师（L7）及以上
 
--   拥有组织/全公司业务/工程目标并实现这些目标。
--   在组织/公司内影响或领导产品和工程路线图。
--   在高度复杂和模糊的领域领导解决方案开发和交付。
+- 拥有组织/全公司业务/工程目标并实现这些目标。
+- 在组织/公司内影响或领导产品和工程路线图。
+- 在高度复杂和模糊的领域领导解决方案开发和交付。
 
 ## 推荐的准备策略
 
@@ -146,46 +144,46 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 除了这些问题，我们还可以期望一般但常见的问题，例如“介绍一下自己”或“为什么加入这个公司”。
 
-问题的问法非常多样化。 虽然为所有问题做准备很耗时间，但我们可以将最常见的80％问题分类主题，并按照以下指南系统地解决这些问题：
+问题的问法非常多样化。 虽然为所有问题做准备很耗时间，但我们可以将最常见的 80％问题分类主题，并按照以下指南系统地解决这些问题：
 
 1.  [“介绍一下你自己…”] \(/behavioral-interview-guidebook/self-introduction)
 2.  “让我来看一下你的简历…”
 3.  [“为什么加入这个团队或公司？”] \(/behavioral-interview-guidebook/why-work-here)
 4.  [“你有什么问题要问我的吗？”] \(/behavioral-interview-guidebook/questions-to-ask)
 5.  "当你...... 的时候告诉我" （分类为以下主题）
-    -   [实现目标和解决问题](/behavioral-interview-guidebook/problem-solving)
-    -   [合作](/behavioral-interview-guidebook/collaboration)
-    -   [成长心态](/behavioral-interview-guidebook/growth-mindset)
-    -   应变能力和灵活性
+    - [实现目标和解决问题](/behavioral-interview-guidebook/problem-solving)
+    - [合作](/behavioral-interview-guidebook/collaboration)
+    - [成长心态](/behavioral-interview-guidebook/growth-mindset)
+    - 应变能力和灵活性
 
 ### 根据常见主题准备几个好故事
 
-面对不同的“当你...... 的时候告诉我”类型的问题，解决问题的一般策略是准备3-5个通用的，经过深思熟虑的故事，可以用来解答多个需要的特征。 例如，与他人广泛合作的经验可以展示您的沟通，团队合作，领导能力，冲突管理等特点。 每当面试官问你一个问题时，你可以运用已准备好的故事并根据特定问题进行适当的调整。
+面对不同的“当你...... 的时候告诉我”类型的问题，解决问题的一般策略是准备 3-5 个通用的，经过深思熟虑的故事，可以用来解答多个需要的特征。 例如，与他人广泛合作的经验可以展示您的沟通，团队合作，领导能力，冲突管理等特点。 每当面试官问你一个问题时，你可以运用已准备好的故事并根据特定问题进行适当的调整。
 
 以下是一些选择和准备好项目经验作为故事的技巧：
 
--   根据上面的评估标准检查并尝试选择广泛经验，可以用来解决多个标准。 然后，写下简短的要点，说明您展示了满足所需特质的行为。
--   选择展示您期望水平的经验。 例如，如果您正在申请高级软件工程师职位，则确保您的经验展示了您对整个团队方向的影响力。
--   不要在同一轮面试中重复使用相同的故事。 面试官往往会讨论候选人的表现，因此过度使用相同的故事可能会被视为重复和经验不足。
--   如上所述，面试官往往优先考虑后续问题以了解候选人真正的心理，动机和理解。 对于每个故事，请准备对每种替代操作的优缺点有一个扎实的理解，并反思您的内在动机。
+- 根据上面的评估标准检查并尝试选择广泛经验，可以用来解决多个标准。 然后，写下简短的要点，说明您展示了满足所需特质的行为。
+- 选择展示您期望水平的经验。 例如，如果您正在申请高级软件工程师职位，则确保您的经验展示了您对整个团队方向的影响力。
+- 不要在同一轮面试中重复使用相同的故事。 面试官往往会讨论候选人的表现，因此过度使用相同的故事可能会被视为重复和经验不足。
+- 如上所述，面试官往往优先考虑后续问题以了解候选人真正的心理，动机和理解。 对于每个故事，请准备对每种替代操作的优缺点有一个扎实的理解，并反思您的内在动机。
 
-### 用STAR框架结构初始答案
+### 用 STAR 框架结构初始答案
 
 准备一个您可以使用的故事后，在回答具体问题时需要将其结构化。 面试官总是被要求关注候选人在面试期间实际的沟通能力（而不是他们声称的能力），评估方式如下：
 
--   有条理，易于理解的思维过程
--   对哪些细节应该详细说明以及哪些细节应该保持简单有良好的直觉
--   使他人对目的和行动清晰
--   展示积极倾听
+- 有条理，易于理解的思维过程
+- 对哪些细节应该详细说明以及哪些细节应该保持简单有良好的直觉
+- 使他人对目的和行动清晰
+- 展示积极倾听
 
-为了实现以上目标，您需要在回答问题时将答案结构化，确保它简洁明了，时间不超过3分钟。 您可以使用例如STAR的框架作为大致指导：
+为了实现以上目标，您需要在回答问题时将答案结构化，确保它简洁明了，时间不超过 3 分钟。 您可以使用例如 STAR 的框架作为大致指导：
 
--   **情境**：介绍场景的基本细节，足够了解您所面临的挑战。 （不要花太多时间）
--   **任务**：您在情况下需要实现或完成什么？ （不要花太多时间）
--   **行动**：您采取了什么行动？ 这是您根据解决挑战或情况所采取的方法展示所需特质的地方。
--   **结果**：您的行动的结果是什么？
+- **情境**：介绍场景的基本细节，足够了解您所面临的挑战。 （不要花太多时间）
+- **任务**：您在情况下需要实现或完成什么？ （不要花太多时间）
+- **行动**：您采取了什么行动？ 这是您根据解决挑战或情况所采取的方法展示所需特质的地方。
+- **结果**：您的行动的结果是什么？
 
-以下是将STAR应用于回答行为面试问题“告诉我一个您曾经不得不管理多个相互冲突的优先事项以及您如何处理它”的示例：
+以下是将 STAR 应用于回答行为面试问题“告诉我一个您曾经不得不管理多个相互冲突的优先事项以及您如何处理它”的示例：
 
 #### 情境
 
@@ -197,11 +195,11 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 #### 行动
 
--   我所做的是与所有相关的产品和工程相关人员安排快速会议，共同确定优先顺序并分配适当的资源以支持此项目。
--   我列出了每个团队提出的特点，并与所有相关人员一起工作，以确定每个特点对业务目标的贡献，同时对每个特点的工程工作量进行大致估计。
--   这帮助我们将工程工作量很高但对目标贡献很小的特征降低优先级。
--   对于在时限内无法实现的项目，我们能够协商获得更多的工程资源并将这些特征工作委托给其他特定人员。
--   之后，为确保自己的时间表得以实现，我将我的特点分解为较小的任务，并计划每天和每周的里程碑，与团队定期审查我的进展。
+- 我所做的是与所有相关的产品和工程相关人员安排快速会议，共同确定优先顺序并分配适当的资源以支持此项目。
+- 我列出了每个团队提出的特点，并与所有相关人员一起工作，以确定每个特点对业务目标的贡献，同时对每个特点的工程工作量进行大致估计。
+- 这帮助我们将工程工作量很高但对目标贡献很小的特征降低优先级。
+- 对于在时限内无法实现的项目，我们能够协商获得更多的工程资源并将这些特征工作委托给其他特定人员。
+- 之后，为确保自己的时间表得以实现，我将我的特点分解为较小的任务，并计划每天和每周的里程碑，与团队定期审查我的进展。
 
 #### 结果
 
@@ -213,7 +211,7 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 ### 熟能生巧
 
-在准备好您的故事并大致了解STAR之后，请使用准备好的故事和STAR格式回答我们列出的50个常见行为面试问题。 与其记忆答案，最好每次都练习口头回答。 这样可以使您巩固故事并熟悉STAR。
+在准备好您的故事并大致了解 STAR 之后，请使用准备好的故事和 STAR 格式回答我们列出的 50 个常见行为面试问题。 与其记忆答案，最好每次都练习口头回答。 这样可以使您巩固故事并熟悉 STAR。
 
 ## 行为面试中如何表现最佳
 
@@ -225,9 +223,9 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
 
 可以理解的是，作为面试官，您应该尝试筛选出：
 
--   此候选人是否会成为**较差的表现者**？ 例如经常错过截止日期，不负责任，缺乏动力，经常与他人发生冲突，沟通不良，不能很好地接受反馈。 他们是否在简历中撒谎或夸大其词？
--   候选人是否会成为**超级明星，有动力的队友**？ 例如善于沟通，有解决问题的资源和独立性，能够管理利益相关者，积极并努力实施新举措以推动团队前进。
--   候选人是否会**容易管理**？ 例如，他很好地接受反馈，受人欢迎，善于社交，不会给您带来问题。
+- 此候选人是否会成为**较差的表现者**？ 例如经常错过截止日期，不负责任，缺乏动力，经常与他人发生冲突，沟通不良，不能很好地接受反馈。 他们是否在简历中撒谎或夸大其词？
+- 候选人是否会成为**超级明星，有动力的队友**？ 例如善于沟通，有解决问题的资源和独立性，能够管理利益相关者，积极并努力实施新举措以推动团队前进。
+- 候选人是否会**容易管理**？ 例如，他很好地接受反馈，受人欢迎，善于社交，不会给您带来问题。
 
 如果一个候选人将答案背诵回去或看起来冷漠而无动于衷，您会雇用他们加入您的团队吗？ 可能不会。 对于面试官来说，与您的真正原始自我见面，能够了解到您的思维过程是否与他们的目标相一致同等重要。
 

packages/behavioral-interview-guidebook/contents/problem-solving/pt-BR.mdx

@@ -19,17 +19,17 @@ A resolução de problemas e o foco em resultados são agrupados em uma única c
 
 Ao avaliar candidatos nesta categoria, os entrevistadores geralmente consideram os seguintes critérios:
 
--   Identificar as melhores soluções e executá-las
-    -   Identificando os problemas corretos
-    -   Identificando os objetivos mais críticos
-    -   Recursos e mentalidade orientada por dados
-    -   Criatividade e inovação
-    -   Identificando compensações (trade-offs) e soluções sustentáveis
-    -   Medindo resultados, iterando e seguindo adiante
--   Mentalidade orientada para impacto
-    -   Proatividade para avançar apesar de obstáculos ou bloqueios
-    -   Influenciando os outros a cumprir os objetivos
-    -   Equilibrando análise com ação decisiva
+- Identificar as melhores soluções e executá-las
+  - Identificando os problemas corretos
+  - Identificando os objetivos mais críticos
+  - Recursos e mentalidade orientada por dados
+  - Criatividade e inovação
+  - Identificando compensações (trade-offs) e soluções sustentáveis
+  - Medindo resultados, iterando e seguindo adiante
+- Mentalidade orientada para impacto
+  - Proatividade para avançar apesar de obstáculos ou bloqueios
+  - Influenciando os outros a cumprir os objetivos
+  - Equilibrando análise com ação decisiva
 
 ## Abstraindo possíveis perguntas em temas comuns
 
@@ -37,10 +37,10 @@ As mentioned in our [behavioral interview preparation overview](/behavioral-inte
 
 Há simplesmente muitos tipos de perguntas comportamentais sobre resolução de problemas e foco em resultados que podem ser feitas, como:
 
--   Você pode me contar sobre uma vez em que precisou usar dados para orientar decisões de engenharia\*\*?
--   Você pode fornecer um exemplo de uma vez em que teve que **solucionar problemas e corrigir um problema complexo** em um projeto?
--   Você pode descrever um momento em que **solucionou criativamente** um problema de engenharia ou alcançou uma melhoria significativa em métricas?
--   Você pode descrever um momento em que teve que tomar uma decisão importante de engenharia e como decidiu **entre as compensações**?
+- Você pode me contar sobre uma vez em que precisou usar dados para orientar decisões de engenharia\*\*?
+- Você pode fornecer um exemplo de uma vez em que teve que **solucionar problemas e corrigir um problema complexo** em um projeto?
+- Você pode descrever um momento em que **solucionou criativamente** um problema de engenharia ou alcançou uma melhoria significativa em métricas?
+- Você pode descrever um momento em que teve que tomar uma decisão importante de engenharia e como decidiu **entre as compensações**?
 
 No entanto, quando olhamos para 80% das perguntas desta categoria, geralmente pedem como um problema foi resolvido ou um traço específico necessário para a resolução eficaz de problemas, como criatividade, uso de dados ou avaliação de compensações. A origem do problema ou objetivo, bem como se o candidato foi resiliente diante de obstáculos, também pode ser inferida nas respostas a essas perguntas.
 
@@ -63,121 +63,121 @@ Portanto, você só precisa garantir que pelo menos 1 dos seus [relatos ou proje
 
 Recomendamos que você escolha histórias de resolução de problemas que também possam servir para obter sinais sobre o seguinte
 
--   **Proatividade/iniciativa**: você tomou a iniciativa de investigar o problema, reunir informações e resolvê-lo.
--   **Liderança**: você liderou o processo de resolução de problemas
--   **Trabalho em equipe**: você teve que trabalhar como parte de uma equipe para resolver o problema
+- **Proatividade/iniciativa**: você tomou a iniciativa de investigar o problema, reunir informações e resolvê-lo.
+- **Liderança**: você liderou o processo de resolução de problemas
+- **Trabalho em equipe**: você teve que trabalhar como parte de uma equipe para resolver o problema
 
 ### Exemplo de história
 
 #### Situação
 
--   Eu era o líder técnico de um site de comércio eletrônico que vendia produtos de luxo. O site foi construído como uma aplicação de página única usando Angular 1.5.
--   Nos últimos anos, o produto estava mostrando sinais de obsolescência - a experiência dos desenvolvedores não era ótima e o desempenho do site estava ruim. A velocidade de carregamento inicial era superior a 3 segundos e a taxa de conversão estava em torno de 0,8%.
+- Eu era o líder técnico de um site de comércio eletrônico que vendia produtos de luxo. O site foi construído como uma aplicação de página única usando Angular 1.5.
+- Nos últimos anos, o produto estava mostrando sinais de obsolescência - a experiência dos desenvolvedores não era ótima e o desempenho do site estava ruim. A velocidade de carregamento inicial era superior a 3 segundos e a taxa de conversão estava em torno de 0,8%.
 
 #### Tarefa
 
--   Fui encarregado de melhorar o desempenho e a conversão do site.
+- Fui encarregado de melhorar o desempenho e a conversão do site.
 
 #### Ação
 
 \*\*1. Identificação de problemas
 
--   A conversão está relacionada ao desempenho e à experiência do usuário (UX).
--   O desempenho do site tem apresentado um declínio gradual nos últimos anos.
--   A experiência do usuário (UX) não foi revisada há um tempo. Aprimorar a redação
+- A conversão está relacionada ao desempenho e à experiência do usuário (UX).
+- O desempenho do site tem apresentado um declínio gradual nos últimos anos.
+- A experiência do usuário (UX) não foi revisada há um tempo. Aprimorar a redação
 
 \*\*2. Coleta de informações
 
--   Analisamos a natureza dos erros no último ano, categorizamos de acordo com suas causas raiz para identificar pontos críticos e áreas problemáticas principais.
--   Coletamos feedback da equipe sobre áreas de melhoria.
--   Sessão de brainstorming com a equipe para pensar em maneiras de melhorar.
--   Para melhorar, em primeiro lugar, precisamos saber como estamos indo.
-    -   Verificamos novamente se nosso rastreamento de desempenho e conversão estava funcionando corretamente.
-    -   Começamos a rastrear novas métricas do Lighthouse e Core Web Vitals.
--   Trabalhamos com cientistas de dados para criar painéis de controle para desempenho e conversão e obtivemos algumas informações:
-    -   Identificamos que alguns países tinham taxas de conversão mais baixas.
-    -   Os usuários de dispositivos móveis tinham taxas de conversão mais baixas em comparação com os usuários de desktop.
--   Trabalhamos com designers de UX e pesquisadores de UX para identificar problemas na experiência de compra de ponta a ponta no site.
-    -   Os elementos de interface do usuário estavam muito espaçados e exigiam muito rolamento, o que afetou a taxa de rejeição, pois alguns usuários não se preocuparam em rolar.
+- Analisamos a natureza dos erros no último ano, categorizamos de acordo com suas causas raiz para identificar pontos críticos e áreas problemáticas principais.
+- Coletamos feedback da equipe sobre áreas de melhoria.
+- Sessão de brainstorming com a equipe para pensar em maneiras de melhorar.
+- Para melhorar, em primeiro lugar, precisamos saber como estamos indo.
+  - Verificamos novamente se nosso rastreamento de desempenho e conversão estava funcionando corretamente.
+  - Começamos a rastrear novas métricas do Lighthouse e Core Web Vitals.
+- Trabalhamos com cientistas de dados para criar painéis de controle para desempenho e conversão e obtivemos algumas informações:
+  - Identificamos que alguns países tinham taxas de conversão mais baixas.
+  - Os usuários de dispositivos móveis tinham taxas de conversão mais baixas em comparação com os usuários de desktop.
+- Trabalhamos com designers de UX e pesquisadores de UX para identificar problemas na experiência de compra de ponta a ponta no site.
+  - Os elementos de interface do usuário estavam muito espaçados e exigiam muito rolamento, o que afetou a taxa de rejeição, pois alguns usuários não se preocuparam em rolar.
 
 \*\*3. Brainstorming de soluções
 
--   Interface do Usuário\*\*: O processamento no lado do servidor é crucial para o desempenho e os benefícios de SEO. Fizemos escolhas visando um bom desempenho.
-    -   **Visão**: Migrar do Angular.js 1.6 para o Angular 13 foi um empreendimento enorme, e não houve economia significativa de tempo ao permanecer no Angular.
-    -   **Next.js**: Alguns de nossos desenvolvedores têm experiência com React e o Next.js como um metaframework para construir aplicativos SSR estava rapidamente ganhando popularidade. Nós realmente desejávamos a carga inicial rápida e o comportamento semelhante a um aplicativo que o Next.js proporcionava.
-    -   **Svelte**: O modelo reativo era atraente e o modelo de programação era mais fácil de entender em comparação com o React, no entanto, o ecossistema é pequeno e não existem tantas bibliotecas disponíveis.
--   **Estilização**: A folha de estilos estava ficando muito inchada devido a muitas classes sendo adicionadas ao longo dos anos e sendo difíceis de remover.
-    -   **Tailwind CSS**: O Tailwind CSS estava entre as metodologias CSS mais populares, e sua abordagem de CSS atômico se adapta bem a bases de código em crescimento.
-    -   **Styled Components**: O CSS-in-JS era algo que também estávamos considerando, mas o Styled Components estava vinculado ao React e a injeção de estilo em tempo de execução prejudicava o desempenho.
--   **Mentalidade centrada no desempenho**. **Leitura de muitos estudos de caso de desempenho em web.dev e blogs de engenharia de outras empresas de comércio eletrônico, reunindo uma lista de técnicas e processos importantes de desempenho:**:
-    -   \*\*Estabelecer um orçamento de desempenho para cada página (abaixo de 300 Kb).
-    -   Executar testes de desempenho antes de mesclar os Pull Requests.
-    -   Carregamento sob demanda de componentes não críticos. Carregar conteúdos abaixo da dobra sob demanda.
-    -   Dividir o JavaScript no nível da página em vez de um único pacote (gerenciado pelo Next.js).
-    -   Utilizar o formato WebP para imagens.
-    -   Hospedar imagens em uma CDN. Carregamento adaptativo de imagens para que dispositivos móveis carreguem uma imagem menor. Consolidar bibliotecas JavaScript duplicadas (data-fns e moment.js), mudar para lodash-es e remover todos os usos do jQuery. Analisar os dados para identificar recursos menos usados e removê-los do código, reduzindo o tamanho do JavaScript nas páginas de detalhes do produto em mais de 200 KB.
--   Otimização de Mecanismos de Busca (SEO)
-    -   Utilizei ferramentas de SEO como o Ahrefs para monitorar continuamente o SEO.
-    -   Trabalhei com a equipe de marketing para garantir que o texto de marketing incluísse palavras-chave importantes, conforme mostrado pelo Ahrefs.
-    -   Ajustei os URLs das páginas para incluir palavras-chave de SEO
--   Melhorias de Experiência do Usuário
-    -   Experiência de checkout em uma única página, em vez de um checkout de duas páginas, para reduzir a necessidade de cliques.
-    -   Reduzi a altura de muitos elementos da interface do usuário.
-    -   Corrigi o botão de checkout para que não fosse despercebido.
--   Melhorias no pagamento
-    -   Analisei o checkout da Stripe e implementei campos de endereço específicos para cada país.
-    -   Inicialmente, tínhamos apenas um método de pagamento disponível: cartão de crédito. Contei com a ajuda de cientistas de dados para avaliar a popularidade de novos métodos de pagamento e se valia a pena adicioná-los. Posteriormente, adicionamos os métodos de pagamento PayPal, Google Pay e Apple Pay também.
+- Interface do Usuário\*\*: O processamento no lado do servidor é crucial para o desempenho e os benefícios de SEO. Fizemos escolhas visando um bom desempenho.
+  - **Visão**: Migrar do Angular.js 1.6 para o Angular 13 foi um empreendimento enorme, e não houve economia significativa de tempo ao permanecer no Angular.
+  - **Next.js**: Alguns de nossos desenvolvedores têm experiência com React e o Next.js como um metaframework para construir aplicativos SSR estava rapidamente ganhando popularidade. Nós realmente desejávamos a carga inicial rápida e o comportamento semelhante a um aplicativo que o Next.js proporcionava.
+  - **Svelte**: O modelo reativo era atraente e o modelo de programação era mais fácil de entender em comparação com o React, no entanto, o ecossistema é pequeno e não existem tantas bibliotecas disponíveis.
+- **Estilização**: A folha de estilos estava ficando muito inchada devido a muitas classes sendo adicionadas ao longo dos anos e sendo difíceis de remover.
+  - **Tailwind CSS**: O Tailwind CSS estava entre as metodologias CSS mais populares, e sua abordagem de CSS atômico se adapta bem a bases de código em crescimento.
+  - **Styled Components**: O CSS-in-JS era algo que também estávamos considerando, mas o Styled Components estava vinculado ao React e a injeção de estilo em tempo de execução prejudicava o desempenho.
+- **Mentalidade centrada no desempenho**. **Leitura de muitos estudos de caso de desempenho em web.dev e blogs de engenharia de outras empresas de comércio eletrônico, reunindo uma lista de técnicas e processos importantes de desempenho:**:
+  - \*\*Estabelecer um orçamento de desempenho para cada página (abaixo de 300 Kb).
+  - Executar testes de desempenho antes de mesclar os Pull Requests.
+  - Carregamento sob demanda de componentes não críticos. Carregar conteúdos abaixo da dobra sob demanda.
+  - Dividir o JavaScript no nível da página em vez de um único pacote (gerenciado pelo Next.js).
+  - Utilizar o formato WebP para imagens.
+  - Hospedar imagens em uma CDN. Carregamento adaptativo de imagens para que dispositivos móveis carreguem uma imagem menor. Consolidar bibliotecas JavaScript duplicadas (data-fns e moment.js), mudar para lodash-es e remover todos os usos do jQuery. Analisar os dados para identificar recursos menos usados e removê-los do código, reduzindo o tamanho do JavaScript nas páginas de detalhes do produto em mais de 200 KB.
+- Otimização de Mecanismos de Busca (SEO)
+  - Utilizei ferramentas de SEO como o Ahrefs para monitorar continuamente o SEO.
+  - Trabalhei com a equipe de marketing para garantir que o texto de marketing incluísse palavras-chave importantes, conforme mostrado pelo Ahrefs.
+  - Ajustei os URLs das páginas para incluir palavras-chave de SEO
+- Melhorias de Experiência do Usuário
+  - Experiência de checkout em uma única página, em vez de um checkout de duas páginas, para reduzir a necessidade de cliques.
+  - Reduzi a altura de muitos elementos da interface do usuário.
+  - Corrigi o botão de checkout para que não fosse despercebido.
+- Melhorias no pagamento
+  - Analisei o checkout da Stripe e implementei campos de endereço específicos para cada país.
+  - Inicialmente, tínhamos apenas um método de pagamento disponível: cartão de crédito. Contei com a ajuda de cientistas de dados para avaliar a popularidade de novos métodos de pagamento e se valia a pena adicioná-los. Posteriormente, adicionamos os métodos de pagamento PayPal, Google Pay e Apple Pay também.
 
 **4. Avaliação da solução**
 
--   **Visualização e Renderização**: Escolhemos o Next.js porque ele é apoiado pela Vercel e tem a maior comunidade de todas. O React também é a biblioteca de UI mais popular e a mais fácil de encontrar empregos para contratação.
--   **Styling**: Tailwind porque é uma opção bastante confiável e preparada para o futuro.
+- **Visualização e Renderização**: Escolhemos o Next.js porque ele é apoiado pela Vercel e tem a maior comunidade de todas. O React também é a biblioteca de UI mais popular e a mais fácil de encontrar empregos para contratação.
+- **Styling**: Tailwind porque é uma opção bastante confiável e preparada para o futuro.
 
 **5. Monitoramento e ajustes**
 
--   Lançamos o novo site por meio de um teste A/B, monitorando o desempenho e as taxas de conversão ao longo de um período de 2 meses.
--   Países que antes tinham taxas de conversão mais baixas tiveram melhorias de quase 50% nas taxas de conversão.
+- Lançamos o novo site por meio de um teste A/B, monitorando o desempenho e as taxas de conversão ao longo de um período de 2 meses.
+- Países que antes tinham taxas de conversão mais baixas tiveram melhorias de quase 50% nas taxas de conversão.
 
 #### Resultado
 
--   A pontuação do Lighthouse melhorou para 92.
--   A velocidade de carregamento melhorou para 1.5 segundos
--   A conversão melhorou para 2.5%
--   A velocidade dos desenvolvedores melhorou na pesquisa recente e agora é mais fácil contratar pessoas para a equipe porque mais pessoas conhecem o React em relação a outros frameworks.
+- A pontuação do Lighthouse melhorou para 92.
+- A velocidade de carregamento melhorou para 1.5 segundos
+- A conversão melhorou para 2.5%
+- A velocidade dos desenvolvedores melhorou na pesquisa recente e agora é mais fácil contratar pessoas para a equipe porque mais pessoas conhecem o React em relação a outros frameworks.
 
 ## Possíveis Naturezas de Perguntas de Acompanhamento
 
 Conforme mencionado em nossa [visão geral de preparação para entrevistas comportamentais](/behavioral-interview-guidebook), os entrevistadores são incentivados a depender mais de perguntas de acompanhamento para realmente compreender o processo de pensamento e motivações do candidato, que geralmente se enquadram nestas categorias:
 
--   Por que você acha que tomou a ação de (inserir ação)?
--   Por que você não fez (inserir ação)?
--   Como você faria as coisas de forma diferente com o benefício da retrospectiva?
+- Por que você acha que tomou a ação de (inserir ação)?
+- Por que você não fez (inserir ação)?
+- Como você faria as coisas de forma diferente com o benefício da retrospectiva?
 
 Para perguntas sobre colaboração, os entrevistadores provavelmente farão perguntas para ajudá-los a entender um pouco mais sobre:
 
--   **A fonte da tarefa/problema/objetivo** (Nível de compreensão da proatividade e iniciativa):
-    -   O projeto ou a tarefa foi iniciada por você? E em que medida?
-    -   A ideia subjacente foi sua, ou apenas o plano de executá-la?
-    -   Como você obteve o apoio dos interessados para sequer trabalhar nisso?
--   **Função e Contribuição Real pelo Candidato**:
-    -   Havia uma equipe envolvida na resolução do problema ou na consecução do objetivo?
-    -   Quais ações foram iniciadas por iniciativa própria ou contribuídas unicamente por você, e o que os outros fizeram?
--   **Priorização do Problema ou Objetivo a Ser Alcançado**:
-    -   Havia uma razão pela qual este problema ou objetivo específico foi priorizado em relação a outros?
-    -   Havia outro problema ou objetivo raiz que deveria ter sido mais importante?
-    -   Esse problema não foi resolvido por outra equipe na empresa? Por que razão a solução teve de ser reinventada?
--   **Seleção de Métricas/Objetivos Adequados, e se Foram Medidos Após o Lançamento**:
-    -   Foi estabelecida alguma meta quantitativa ou qualitativa, e como elas foram decididas?
-    -   Como eles foram medidos após o lançamento e qual foi o resultado?
-    -   Se um problema foi resolvido, que medidas foram tomadas para garantir que o mesmo problema não ocorresse novamente?
--   **Utilizando Informações Suficientes para Tomar Decisões**:
-    -   Que tipos de pesquisa ou dados você utilizou para tomar decisões ou escolher um problema para resolver?
-    -   Quanto tempo você dedicou à pesquisa e coleta de informações?
-    -   Como você equilibrou entre a coleta de informações e o planejamento e a execução do plano?
--   **Escolhendo a solução certa**:
-    -   Que outras soluções foram consideradas e quais eram os prós e contras de cada uma?
-    -   Por que razão foi escolhida a solução final?
-    -   Quem apresentou a ideia original das soluções? Como foram derivadas?
+- **A fonte da tarefa/problema/objetivo** (Nível de compreensão da proatividade e iniciativa):
+  - O projeto ou a tarefa foi iniciada por você? E em que medida?
+  - A ideia subjacente foi sua, ou apenas o plano de executá-la?
+  - Como você obteve o apoio dos interessados para sequer trabalhar nisso?
+- **Função e Contribuição Real pelo Candidato**:
+  - Havia uma equipe envolvida na resolução do problema ou na consecução do objetivo?
+  - Quais ações foram iniciadas por iniciativa própria ou contribuídas unicamente por você, e o que os outros fizeram?
+- **Priorização do Problema ou Objetivo a Ser Alcançado**:
+  - Havia uma razão pela qual este problema ou objetivo específico foi priorizado em relação a outros?
+  - Havia outro problema ou objetivo raiz que deveria ter sido mais importante?
+  - Esse problema não foi resolvido por outra equipe na empresa? Por que razão a solução teve de ser reinventada?
+- **Seleção de Métricas/Objetivos Adequados, e se Foram Medidos Após o Lançamento**:
+  - Foi estabelecida alguma meta quantitativa ou qualitativa, e como elas foram decididas?
+  - Como eles foram medidos após o lançamento e qual foi o resultado?
+  - Se um problema foi resolvido, que medidas foram tomadas para garantir que o mesmo problema não ocorresse novamente?
+- **Utilizando Informações Suficientes para Tomar Decisões**:
+  - Que tipos de pesquisa ou dados você utilizou para tomar decisões ou escolher um problema para resolver?
+  - Quanto tempo você dedicou à pesquisa e coleta de informações?
+  - Como você equilibrou entre a coleta de informações e o planejamento e a execução do plano?
+- **Escolhendo a solução certa**:
+  - Que outras soluções foram consideradas e quais eram os prós e contras de cada uma?
+  - Por que razão foi escolhida a solução final?
+  - Quem apresentou a ideia original das soluções? Como foram derivadas?
 
 ## Exemplos de Perguntas e Respostas sobre Colaboração
 
@@ -185,7 +185,7 @@ Ajustando a história amostral acima para responder a perguntas específicas.
 
 {/* TODO: Gina */}
 
--   Você pode me contar sobre uma vez em que precisou usar dados para orientar decisões de engenharia?
--   Você pode fornecer um exemplo de uma vez em que teve que solucionar e corrigir um problema complexo em um projeto?
--   Você pode descrever um momento em que resolveu um problema de engenharia ou alcançou uma melhoria significativa nas métricas?
--   Você pode descrever uma vez em que teve que tomar uma decisão importante de engenharia e como decidiu entre as compensações (trade-offs)?
+- Você pode me contar sobre uma vez em que precisou usar dados para orientar decisões de engenharia?
+- Você pode fornecer um exemplo de uma vez em que teve que solucionar e corrigir um problema complexo em um projeto?
+- Você pode descrever um momento em que resolveu um problema de engenharia ou alcançou uma melhoria significativa nas métricas?
+- Você pode descrever uma vez em que teve que tomar uma decisão importante de engenharia e como decidiu entre as compensações (trade-offs)?

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

@@ -3,7 +3,7 @@ title: 标题：回答“告诉我一个时间...”对于解决问题的技能
 description: 描述：学习如何回答有关前端/网络开发人员/软件工程师的解决问题技能和实现结果的行为问题。 参考示例答案。
 ---
 
-正如我们在[行为面试准备概述]中提到的，**解决问题和实现结果的驱动力**是8个主要问题类型之一。
+正如我们在[行为面试准备概述]中提到的，**解决问题和实现结果的驱动力**是 8 个主要问题类型之一。
 
 在本指南中，您将学习如何处理它们：
 
@@ -19,34 +19,34 @@ description: 描述：学习如何回答有关前端/网络开发人员/软件
 
 在这个类别下评估候选人时，面试官通常会关注以下标准：
 
--   确定最佳解决方案并执行它们
-    -   确定正确的问题
-    -   确定最关键的目标
-    -   资源能力和数据驱动思维方式
-    -   创造力和创新性
-    -   确定折衷和可持续的解决方案
-    -   测量结果，迭代和跟进
--   以结果为导向的思维方式
-    -   在面对障碍或路障时积极取得进展
-    -   影响他人实现目标
-    -   在决策行动中找到分析与果断平衡点
+- 确定最佳解决方案并执行它们
+  - 确定正确的问题
+  - 确定最关键的目标
+  - 资源能力和数据驱动思维方式
+  - 创造力和创新性
+  - 确定折衷和可持续的解决方案
+  - 测量结果，迭代和跟进
+- 以结果为导向的思维方式
+  - 在面对障碍或路障时积极取得进展
+  - 影响他人实现目标
+  - 在决策行动中找到分析与果断平衡点
 
 ## 将可能的问题抽象为常见主题
 
-正如我们在[行为面试准备概述]中提到的，为每个行为问题制定答案是不切实际的。 然而，通过将特定问题分批次到相似的主题中，并准备涵盖大量问题要求的故事，我们可以将要准备的故事数量减少到约3-5个故事。
+正如我们在[行为面试准备概述]中提到的，为每个行为问题制定答案是不切实际的。 然而，通过将特定问题分批次到相似的主题中，并准备涵盖大量问题要求的故事，我们可以将要准备的故事数量减少到约 3-5 个故事。
 
 在这个类别下有太多类型的解决问题和实现结果的行为问题，例如：
 
--   你能告诉我一次你必须使用数据来驱动工程决策的经历吗？
--   你可以提供一次你在项目中必须解决和修复复杂问题的例子吗？
--   你能描述一次你创造性地解决了工程问题或实现了有意义的指标改进的经验吗？
--   你能描述一次你必须做出重要的工程决策，以及你是如何在两者之间做出选择的吗？
+- 你能告诉我一次你必须使用数据来驱动工程决策的经历吗？
+- 你可以提供一次你在项目中必须解决和修复复杂问题的例子吗？
+- 你能描述一次你创造性地解决了工程问题或实现了有意义的指标改进的经验吗？
+- 你能描述一次你必须做出重要的工程决策，以及你是如何在两者之间做出选择的吗？
 
-然而，当我们查看此类别下80％的问题时，通常会要求解决问题的过程或有效解决问题所需的特定特征，例如创意性、使用数据或者权衡评估。 从这些问题的答案中也可以推断问题或目标的来源，以及候选人是否能够在面对障碍时保持弹性。
+然而，当我们查看此类别下 80％的问题时，通常会要求解决问题的过程或有效解决问题所需的特定特征，例如创意性、使用数据或者权衡评估。 从这些问题的答案中也可以推断问题或目标的来源，以及候选人是否能够在面对障碍时保持弹性。
 
 ## 建议的答案框架
 
-像往常一样，我们推荐使用STAR格式来构建故事，它是最简单和最有效的框架。
+像往常一样，我们推荐使用 STAR 格式来构建故事，它是最简单和最有效的框架。
 
 尽管问题可能很多，但我们可以通过考虑一个强大的解决问题过程来抽象出所有解决问题行为问题的要求：
 
@@ -63,121 +63,121 @@ description: 描述：学习如何回答有关前端/网络开发人员/软件
 
 我们还建议您选择可以通过以下方式获取信号的问题解决故事。
 
--   **积极性/主动性**：您已经采取主动措施解决问题，收集信息并解决问题。
--   **领导能力**：您带领了解决问题的过程。
--   **团队协作**：您必须作为团队的一员来解决问题。
+- **积极性/主动性**：您已经采取主动措施解决问题，收集信息并解决问题。
+- **领导能力**：您带领了解决问题的过程。
+- **团队协作**：您必须作为团队的一员来解决问题。
 
 ### 实例故事
 
 #### 情境
 
--   我是一家销售奢侈品的电商网站的技术主管。 该网站是一个Angular 1.5的单页面应用程序。
--   近年来，该产品显得有点老了——开发体验不佳，网站性能不佳。 初始加载速度超过3秒，转化率约为0.8％。
+- 我是一家销售奢侈品的电商网站的技术主管。 该网站是一个 Angular 1.5 的单页面应用程序。
+- 近年来，该产品显得有点老了——开发体验不佳，网站性能不佳。 初始加载速度超过 3 秒，转化率约为 0.8％。
 
 #### 任务
 
--   我的任务是改进网站的性能和转化率。
+- 我的任务是改进网站的性能和转化率。
 
 #### 行动
 
 **1. 问题识别**
 
--   转化率与性能和用户体验相关。
--   过去几年，网站性能逐渐下降。
--   用户体验值得检查。 [改进措辞]
+- 转化率与性能和用户体验相关。
+- 过去几年，网站性能逐渐下降。
+- 用户体验值得检查。 [改进措辞]
 
 **2. 信息收集**
 
--   查看过去一年中的错误性质，根据它们的根本原因对它们进行分类，以确定故障热点和主要问题区域。
--   收集来自团队的反馈，并确定改进的范围和重点。
--   与团队进行头脑风暴会议，以想出改进的方法。
--   为了改进，首先需要知道我们的表现如何。
-    -   确认我们的性能和转化跟踪是否正常工作。
-    -   开始从Lighthouse和Core Web Vitals跟踪新指标。
--   与数据科学家合作创建性能和转化的仪表板，并获得一些见解：
-    -   确定某些国家的转化率较低。
-    -   移动用户与桌面用户相比具有较低的转化率。
--   与UX设计师和UX研究人员合作，识别网站上的 end-to-end购物体验问题。
-    -   UI元素之间间隔太大，需要大量滚动，影响了跳出率，因为一些用户不愿滚动。
+- 查看过去一年中的错误性质，根据它们的根本原因对它们进行分类，以确定故障热点和主要问题区域。
+- 收集来自团队的反馈，并确定改进的范围和重点。
+- 与团队进行头脑风暴会议，以想出改进的方法。
+- 为了改进，首先需要知道我们的表现如何。
+  - 确认我们的性能和转化跟踪是否正常工作。
+  - 开始从 Lighthouse 和 Core Web Vitals 跟踪新指标。
+- 与数据科学家合作创建性能和转化的仪表板，并获得一些见解：
+  - 确定某些国家的转化率较低。
+  - 移动用户与桌面用户相比具有较低的转化率。
+- 与 UX 设计师和 UX 研究人员合作，识别网站上的 end-to-end 购物体验问题。
+  - UI 元素之间间隔太大，需要大量滚动，影响了跳出率，因为一些用户不愿滚动。
 
 **3. 解决方案头脑风暴**
 
--   **用户界面**：服务器端呈现对于其性能和SEO的好处至关重要。 做出良好选择。
-    -   **View**：从Angular.js 1.6迁移到Angular 13是一个巨大的任务，而停留在Angular上没有太大的时间节省效益。
-    -   **Next.js**：我们的一些开发人员具有使用React和Next.js作为用于构建SSR应用程序的元框架的经验，这种SSR应用程序的快速初始载入和应用程序行为非常有吸引力。 我们真的渴望Next.js提供的快速初始加载和类似应用程序的行为。
-    -   **Svelte**：响应模型很吸引人，并且相对于React的编程模型更容易理解。
--   **样式**：由于多年来添加了许多类并且难以删除，因此样式表变得非常臃肿。
-    -   **Tailwind CSS**：Tailwind CSS是最热门的CSS方法之一，其原子CSS方法可扩展适用于不断增长的代码库。
-    -   **Styled Components**：CSS in JS是我们也在考虑的东西，但Styled Components与React有关，并且运行时样式注入对性能不利。
--   **以性能为中心的思维方式**。 阅读了许多关于web.dev和其他电子商务公司的工程博客的性能案例研究，收集了一个重要的性能技术和流程列表：
-    -   设置每个页面的性能预算（低于300 kb）。
-    -   在合并拉取请求之前运行性能基准测试。
-    -   惰性加载非关键组件，惰性加载屏幕下方内容。
-    -   在页面级别上拆分JavaScript，而不是单独的包（由Next.js处理）。
-    -   对图片使用WebP格式。
-    -   将图片托管在CDN上，Adaptive加载图片，因此移动设备加载较小的图片，合并重复的JavaScript库（data-fns和moment.js），切换到lodash-es，删除了所有jQuery的用法-查看数据以识别不常用的功能并将其从产品详细信息页的代码中删除，JS大小减少了200个+ kb。
--   **搜索引擎优化（SEO）**
-    -   使用SEO工具（例如Ahrefs）持续监测SEO。
-    -   与营销团队合作，确保营销内容包含Ahrefs显示的重要关键字。
-    -   调整页面URL以包括SEO关键字
--   用户体验的改进
-    -   只需单击一个页面即可付款，而不是使用两个页面付款，从而减少了点击次数。
-    -   减小了许多UI元素的高度。
-    -   固定检查按钮，这样就不会错过。
--   付款方式改进
-    -   分析了Stripe结账，并实施了特定国家的地址栏。
-    -   最初只有一种可用的付款方式：信用卡。 得到了数据科学家的帮助，以评估新的支付方式是否受欢迎，以及它们是否值得添加。 我们后来还增加了PayPal、谷歌支付和苹果支付等支付方式。
+- **用户界面**：服务器端呈现对于其性能和 SEO 的好处至关重要。 做出良好选择。
+  - **View**：从 Angular.js 1.6 迁移到 Angular 13 是一个巨大的任务，而停留在 Angular 上没有太大的时间节省效益。
+  - **Next.js**：我们的一些开发人员具有使用 React 和 Next.js 作为用于构建 SSR 应用程序的元框架的经验，这种 SSR 应用程序的快速初始载入和应用程序行为非常有吸引力。 我们真的渴望 Next.js 提供的快速初始加载和类似应用程序的行为。
+  - **Svelte**：响应模型很吸引人，并且相对于 React 的编程模型更容易理解。
+- **样式**：由于多年来添加了许多类并且难以删除，因此样式表变得非常臃肿。
+  - **Tailwind CSS**：Tailwind CSS 是最热门的 CSS 方法之一，其原子 CSS 方法可扩展适用于不断增长的代码库。
+  - **Styled Components**：CSS in JS 是我们也在考虑的东西，但 Styled Components 与 React 有关，并且运行时样式注入对性能不利。
+- **以性能为中心的思维方式**。 阅读了许多关于 web.dev 和其他电子商务公司的工程博客的性能案例研究，收集了一个重要的性能技术和流程列表：
+  - 设置每个页面的性能预算（低于 300 kb）。
+  - 在合并拉取请求之前运行性能基准测试。
+  - 惰性加载非关键组件，惰性加载屏幕下方内容。
+  - 在页面级别上拆分 JavaScript，而不是单独的包（由 Next.js 处理）。
+  - 对图片使用 WebP 格式。
+  - 将图片托管在 CDN 上，Adaptive 加载图片，因此移动设备加载较小的图片，合并重复的 JavaScript 库（data-fns 和 moment.js），切换到 lodash-es，删除了所有 jQuery 的用法-查看数据以识别不常用的功能并将其从产品详细信息页的代码中删除，JS 大小减少了 200 个+ kb。
+- **搜索引擎优化（SEO）**
+  - 使用 SEO 工具（例如 Ahrefs）持续监测 SEO。
+  - 与营销团队合作，确保营销内容包含 Ahrefs 显示的重要关键字。
+  - 调整页面 URL 以包括 SEO 关键字
+- 用户体验的改进
+  - 只需单击一个页面即可付款，而不是使用两个页面付款，从而减少了点击次数。
+  - 减小了许多 UI 元素的高度。
+  - 固定检查按钮，这样就不会错过。
+- 付款方式改进
+  - 分析了 Stripe 结账，并实施了特定国家的地址栏。
+  - 最初只有一种可用的付款方式：信用卡。 得到了数据科学家的帮助，以评估新的支付方式是否受欢迎，以及它们是否值得添加。 我们后来还增加了 PayPal、谷歌支付和苹果支付等支付方式。
 
 **4. 解决方案评估**
 
--   **View和渲染**：选择Next.js，因为它由Vercel支持，拥有最大的社区。 React也是最流行的UI库，最容易为之招聘。
--   **样式**：Tailwind，因为它是相当可靠和未来可靠的选择。
+- **View 和渲染**：选择 Next.js，因为它由 Vercel 支持，拥有最大的社区。 React 也是最流行的 UI 库，最容易为之招聘。
+- **样式**：Tailwind，因为它是相当可靠和未来可靠的选择。
 
 **5. 监控和调整**
 
--   在2个月的时间内监控性能和转化率，并在A/B测试中推出新网站。
--   以前转换率较低的国家，其转换率提高了近50%。
+- 在 2 个月的时间内监控性能和转化率，并在 A/B 测试中推出新网站。
+- 以前转换率较低的国家，其转换率提高了近 50%。
 
 #### 结果
 
--   Lighthouse分数已提高到92。
--   加载速度提高至1.5秒
--   转化率提高至2.5％
--   在最近的调查中，开发人员的速度已经提高，现在更容易将更多人招聘到团队中，因为更多人了解React而不是其他框架。
+- Lighthouse 分数已提高到 92。
+- 加载速度提高至 1.5 秒
+- 转化率提高至 2.5％
+- 在最近的调查中，开发人员的速度已经提高，现在更容易将更多人招聘到团队中，因为更多人了解 React 而不是其他框架。
 
 ## 可能的后续问题的本质
 
 正如我们在[行为面试准备概述]中所提到的，面试官鼓励依靠后续问题更多地了解候选人的思考过程和动机，这些后续问题通常属于以下类别：
 
--   您认为您为什么会这样做？
--   你为什么不那样做？
--   如果换成后见之明，你会如何做事情？
+- 您认为您为什么会这样做？
+- 你为什么不那样做？
+- 如果换成后见之明，你会如何做事情？
 
 在解决问题或实现结果的问题上，面试官最有可能探究这样的问题，以帮助他们更好地了解候选人：
 
--   **任务/问题/目标的来源**（理解主动性和积极性的水平）：
-    -   项目或任务是否由您发起的？ 以及在什么程度上？
-    -   潜在的想法是来自你，还是只是执行的计划？
-    -   你是如何得到利益相关者的支持，甚至在这方面的工作？
--   **候选人的角色和实际贡献**：
-    -   是否涉及问题解决的团队？
-    -   哪些措施是由自己主动采取或仅由自己做出贡献的？
--   **优先考虑解决的问题或目标**：
-    -   是否有理由将特定的问题或目标视为优先解决或有限时间内必须解决，而其他问题或根本目标存在更重要？
-    -   这个问题或根本目标是否已被公司中的其他团队解决了？
-    -   这个问题不是已经由公司的另一个团队解决了吗？ 为什么要重新制定解决办法？
--   **选择适当的度量标准或目标，以及是否在发布后进行了测量**：
-    -   是否设置了定量或定性的目标，以及如何决定的？
-    -   它们是如何在发布后被测量的，结果如何？
-    -   如果问题已解决，那么将采取什么措施确保不再发生同样的问题？
--   **使用足够的信息驱动决策**：
-    -   您依赖哪些研究或数据来进行决策/选择要解决的问题？
-    -   您花费多少时间研究和收集信息？
-    -   您如何在收集信息/规划和执行计划之间保持平衡？
--   **选择正确的解决方案**：
-    -   考虑了哪些其他解决方案，各自的利弊如何？
-    -   为什么选择了最终的解决方案？
-    -   谁提出了解决方案的原始想法？ 他们是如何得出的？
+- **任务/问题/目标的来源**（理解主动性和积极性的水平）：
+  - 项目或任务是否由您发起的？ 以及在什么程度上？
+  - 潜在的想法是来自你，还是只是执行的计划？
+  - 你是如何得到利益相关者的支持，甚至在这方面的工作？
+- **候选人的角色和实际贡献**：
+  - 是否涉及问题解决的团队？
+  - 哪些措施是由自己主动采取或仅由自己做出贡献的？
+- **优先考虑解决的问题或目标**：
+  - 是否有理由将特定的问题或目标视为优先解决或有限时间内必须解决，而其他问题或根本目标存在更重要？
+  - 这个问题或根本目标是否已被公司中的其他团队解决了？
+  - 这个问题不是已经由公司的另一个团队解决了吗？ 为什么要重新制定解决办法？
+- **选择适当的度量标准或目标，以及是否在发布后进行了测量**：
+  - 是否设置了定量或定性的目标，以及如何决定的？
+  - 它们是如何在发布后被测量的，结果如何？
+  - 如果问题已解决，那么将采取什么措施确保不再发生同样的问题？
+- **使用足够的信息驱动决策**：
+  - 您依赖哪些研究或数据来进行决策/选择要解决的问题？
+  - 您花费多少时间研究和收集信息？
+  - 您如何在收集信息/规划和执行计划之间保持平衡？
+- **选择正确的解决方案**：
+  - 考虑了哪些其他解决方案，各自的利弊如何？
+  - 为什么选择了最终的解决方案？
+  - 谁提出了解决方案的原始想法？ 他们是如何得出的？
 
 ## 样例解决问题的问题和答案
 
@@ -185,7 +185,7 @@ description: 描述：学习如何回答有关前端/网络开发人员/软件
 
 {/* TODO: Gina */}
 
--   你能告诉我一次你必须使用数据来驱动工程决策的经历吗？
--   你可以提供一个你必须解决和修复复杂问题的项目的例子吗？
--   你能描述一下你是如何创意地解决工程问题或实现有意义的指标改进的吗？
--   你能描述一次你必须做出重要的工程决策，以及你是如何在两者之间做出选择的吗？
+- 你能告诉我一次你必须使用数据来驱动工程决策的经历吗？
+- 你可以提供一个你必须解决和修复复杂问题的项目的例子吗？
+- 你能描述一下你是如何创意地解决工程问题或实现有意义的指标改进的吗？
+- 你能描述一次你必须做出重要的工程决策，以及你是如何在两者之间做出选择的吗？

packages/behavioral-interview-guidebook/contents/questions-to-ask/pt-BR.mdx

@@ -5,9 +5,9 @@ description: Aprenda as melhores perguntas a fazer no final de suas entrevistas
 
 Na ansiedade de garantir um emprego, alguns de nós podem esquecer que se juntar a uma equipe ruim pode ser pior do que esperar por uma boa oportunidade. Uma entrevista é, de fato, uma oportunidade inestimável para o candidato conversar com alguém que realmente trabalha na empresa e descobrir mais sobre as práticas lá. Alguns aspectos-chave que você deve avaliar sobre um emprego antes de aceitá-lo:
 
--   O trabalho será interessante para você?
--   Há espaço para o crescimento de carreira?
--   Os colegas de equipe/seu gerente são colaborativos e fáceis de trabalhar junto?
+- O trabalho será interessante para você?
+- Há espaço para o crescimento de carreira?
+- Os colegas de equipe/seu gerente são colaborativos e fáceis de trabalhar junto?
 
 Boas perguntas feitas no final da entrevista ajudam o candidato a alcançar dois objetivos - deixar uma boa impressão e ajudar o candidato a avaliar se a empresa é realmente adequada para ele.
 
@@ -117,26 +117,26 @@ Essa pergunta indiretamente esclarece a cultura da equipe em relação ao equil
 
 Nessas rodadas, é útil aproveitar a oportunidade para descobrir o estilo de gestão do seu gerente, o processo/critérios de avaliação de desempenho, bem como as expectativas dele/dela em relação à função (o que pode lhe dar uma ideia de como você pode se sair no trabalho)
 
--   Você pode me falar sobre o tipo de supervisão que você oferece?
--   Pensando nas pessoas que você viu fazendo este trabalho anteriormente, o que diferenciou aqueles que eram bons daqueles que eram realmente excelentes nisso?
--   O que você espera que esta pessoa realize nos primeiros seis meses e no primeiro ano de trabalho?
--   Quais foram as principais realizações da organização no último ano?
+- Você pode me falar sobre o tipo de supervisão que você oferece?
+- Pensando nas pessoas que você viu fazendo este trabalho anteriormente, o que diferenciou aqueles que eram bons daqueles que eram realmente excelentes nisso?
+- O que você espera que esta pessoa realize nos primeiros seis meses e no primeiro ano de trabalho?
+- Quais foram as principais realizações da organização no último ano?
 
 ## Rodadas com funções fora da equipe (que podem não ter conhecimento específico sobre as operações da equipe)
 
 ### Perguntas a serem feitas ao fundador
 
--   Quais são os objetivos atuais em que a empresa está focada e como esta equipe trabalha para apoiar o alcance desses objetivos?
--   Qual direção você vê esta empresa seguindo nos próximos anos?
--   Qual direção você vê esta empresa seguindo nos próximos anos?
+- Quais são os objetivos atuais em que a empresa está focada e como esta equipe trabalha para apoiar o alcance desses objetivos?
+- Qual direção você vê esta empresa seguindo nos próximos anos?
+- Qual direção você vê esta empresa seguindo nos próximos anos?
 
 ### Perguntas para fazer aos colaboradores da equipe
 
 É comum entrevistar com alguém com quem você pode não trabalhar diretamente. Nesses casos, é melhor lançar uma rede mais ampla e fazer perguntas sobre a política ou cultura geral da empresa. Você ainda pode perguntar a eles sobre sua equipe se eles forem colaboradores próximos.
 
--   Qual é um desafio que você ocasionalmente ou regularmente enfrenta em seu trabalho?
--   Você pode me falar sobre a equipe com a qual eu vou trabalhar?
--   Quais são as oportunidades de aprendizado e desenvolvimento profissional disponíveis na empresa?
+- Qual é um desafio que você ocasionalmente ou regularmente enfrenta em seu trabalho?
+- Você pode me falar sobre a equipe com a qual eu vou trabalhar?
+- Quais são as oportunidades de aprendizado e desenvolvimento profissional disponíveis na empresa?
 
 ## Perguntas para evitar
 
@@ -146,16 +146,16 @@ Aqui estão alguns exemplos do que não perguntar no final de uma entrevista:
 
 Comece a discutir salário apenas quando a equipe já estiver interessada em contratá-lo (ou seja, no final do processo), a menos que eles perguntem sobre suas expectativas salariais.
 
--   Qual é o salário inicial?
--   Você pode me falar sobre o plano de saúde da empresa?
--   Quais são as políticas de licença remunerada da empresa?
--   Se eu conseguir o emprego, quando posso tirar férias?
--   Com que frequência vocês concedem aumentos salariais?
--   Com que frequência vocês distribuem bônus?
--   Que tipo de vantagens e benefícios posso esperar?
+- Qual é o salário inicial?
+- Você pode me falar sobre o plano de saúde da empresa?
+- Quais são as políticas de licença remunerada da empresa?
+- Se eu conseguir o emprego, quando posso tirar férias?
+- Com que frequência vocês concedem aumentos salariais?
+- Com que frequência vocês distribuem bônus?
+- Que tipo de vantagens e benefícios posso esperar?
 
 ### Evite fazer perguntas que deveriam ser informações públicas
 
--   O que a empresa faz?
--   Onde estão localizados os escritórios da empresa?
--   Quem é o CEO da empresa?
+- O que a empresa faz?
+- Onde estão localizados os escritórios da empresa?
+- Quem é o CEO da empresa?

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

@@ -5,9 +5,9 @@ description: 了解在前端开发/网站开发/软件工程面试中最好问
 
 在焦急地寻找工作时，我们中的一些人可能会忘记与一个糟糕的团队合作可能比等待好机会更糟糕。 实际上，面试是候选人与实际在公司工作的人交谈并了解更多关于那里的实践的宝贵机会。 在加入工作之前，您应该评估有关工作的几个关键方面：
 
--   工作对您是否有趣？
--   是否有职业发展的空间？
--   同事/您的经理是否合作并易于共同工作？
+- 工作对您是否有趣？
+- 是否有职业发展的空间？
+- 同事/您的经理是否合作并易于共同工作？
 
 面试结束时问好问题可以帮助候选人实现两个目标：
 
@@ -117,26 +117,26 @@ description: 了解在前端开发/网站开发/软件工程面试中最好问
 
 在这些轮次中，利用机会了解您的经理的管理风格，绩效审查过程/标准以及他/她对角色的期望（这可能让您对自己在工作中的表现有所了解）
 
--   “能告诉我您所提供的监督类型吗？”
--   “回想一下您之前看到的人，他们在这项工作中表现良好和不好之间有什么区别？”
--   “在他们的前六个月和第一年内，您希望这个人会取得什么成就？”
--   “过去一年，组织最大的成就是什么？”
+- “能告诉我您所提供的监督类型吗？”
+- “回想一下您之前看到的人，他们在这项工作中表现良好和不好之间有什么区别？”
+- “在他们的前六个月和第一年内，您希望这个人会取得什么成就？”
+- “过去一年，组织最大的成就是什么？”
 
 ## 与团队之外的角色轮次（可能不知道具体的团队运营）
 
 ### 向创始人提问
 
--   “公司当前专注于什么目标，团队如何支持实现这些目标？”
--   “您认为未来几年公司的走向是什么？”
--   “公司整体当前的关注重点是什么？”
+- “公司当前专注于什么目标，团队如何支持实现这些目标？”
+- “您认为未来几年公司的走向是什么？”
+- “公司整体当前的关注重点是什么？”
 
 ### 向团队的协作者提问
 
 通常情况下会与您没有直接工作的人进行面试。 在这些情况下，最好扩大范围，并询问有关一般公司政策或文化的问题。 如果他们是紧密合作伙伴，您仍然可以向他们询问有关您的团队的问题。
 
--   “您在工作中偶尔或经常面临的挑战是什么？”
--   “您能告诉我要和我一起工作的团队吗？”
--   “公司中有哪些学习和专业发展机会？”
+- “您在工作中偶尔或经常面临的挑战是什么？”
+- “您能告诉我要和我一起工作的团队吗？”
+- “公司中有哪些学习和专业发展机会？”
 
 ## 应该避免的问题
 
@@ -146,16 +146,16 @@ description: 了解在前端开发/网站开发/软件工程面试中最好问
 
 只有在团队已经希望雇用您时（即在流程的最后），才开始讨论薪水，除非他们询问您的薪水要求。
 
--   “初始薪水是多少？”
--   “您能告诉我有关您的医疗保健保险的情况吗？”
--   “您的带薪休假政策是什么？”
--   “如果我得到这份工作，我什么时候可以请假？”
--   你们多长时间发放一次加薪？
--   你们多长时间发放一次奖金？
--   “我可以期望哪些福利和优惠？”
+- “初始薪水是多少？”
+- “您能告诉我有关您的医疗保健保险的情况吗？”
+- “您的带薪休假政策是什么？”
+- “如果我得到这份工作，我什么时候可以请假？”
+- 你们多长时间发放一次加薪？
+- 你们多长时间发放一次奖金？
+- “我可以期望哪些福利和优惠？”
 
 ### 避免询问应该公开的问题
 
--   “这家公司是做什么的？”
--   “公司的办公室位于何处？”
--   “公司的首席执行官是谁？”
+- “这家公司是做什么的？”
+- “公司的办公室位于何处？”
+- “公司的首席执行官是谁？”

packages/behavioral-interview-guidebook/contents/questions/pt-BR.mdx

@@ -45,12 +45,12 @@ Como mencionado na [visão geral da preparação para entrevistas comportamentai
 
 Nós agrupamos as perguntas comportamentais mais comuns em 8 temas principais. Confira perguntas adicionais para praticar enquanto as estuda:
 
--   ["Conte-me sobre você..."](/guia-de-entrevista-comportamental/auto-apresentação)
--   "Descreva o seu currículo..."
--   ["Por que ingressar nesta equipe ou empresa?"](/behavioral-entreview-guidebook/why-work-here)
--   ["Você tem alguma pergunta para mim?"](/guia-de-entrevistas-comportamentais/perguntas-para-fazer)
--   "Conte-me sobre uma vez em que..." (categorizadas nos seguintes temas)
-    -   [Obtendo resultados e resolvendo problemas](/guia-de-entrevistas-comportamentais/resolucao-de-problemas)
-    -   [Colaboração](/guia-de-entrevistas-comportamentais/colaboracao)
-    -   [mentalidade de crescimento](/behavioral-interview-guidebook/growth-mindset)
-    -   Adaptabilidade e flexibilidade
+- ["Conte-me sobre você..."](/guia-de-entrevista-comportamental/auto-apresentação)
+- "Descreva o seu currículo..."
+- ["Por que ingressar nesta equipe ou empresa?"](/behavioral-entreview-guidebook/why-work-here)
+- ["Você tem alguma pergunta para mim?"](/guia-de-entrevistas-comportamentais/perguntas-para-fazer)
+- "Conte-me sobre uma vez em que..." (categorizadas nos seguintes temas)
+  - [Obtendo resultados e resolvendo problemas](/guia-de-entrevistas-comportamentais/resolucao-de-problemas)
+  - [Colaboração](/guia-de-entrevistas-comportamentais/colaboracao)
+  - [mentalidade de crescimento](/behavioral-interview-guidebook/growth-mindset)
+  - Adaptabilidade e flexibilidade

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

@@ -7,7 +7,7 @@ description: 前端开发人员/网络开发人员/软件工程师应该练习
 
 正如[行为面谈准备概览](/behavioral-interview-guidebook/)中所提到的那样，大多数行为面谈问题可分为八个主题，以进行有效的准备工作。 我们建议候选人利用这一战略，然后请参阅下面的名单以供实践。
 
-## 最常见的16个问题
+## 最常见的 16 个问题
 
 1.  向我介绍你自己。
 2.  请告诉我你的简历经历。
@@ -43,14 +43,14 @@ description: 前端开发人员/网络开发人员/软件工程师应该练习
 
 ## 练习的附加问题
 
-我们将最常见的行为问题归纳为8大主题。 在学习时查看更多的练习题：
+我们将最常见的行为问题归纳为 8 大主题。 在学习时查看更多的练习题：
 
--   [“介绍一下你自己…”] \(/behavioral-interview-guidebook/self-introduction)
--   “让我来看一下你的简历…”
--   [“为什么加入这个团队或公司？”] \(/behavioral-interview-guidebook/why-work-here)
--   [“你有什么问题要问我的吗？”] \(/behavioral-interview-guidebook/questions-to-ask)
--   "当你...... 的时候告诉我" （分类为以下主题）
-    -   [实现目标和解决问题](/behavioral-interview-guidebook/problem-solving)
-    -   [合作](/behavioral-interview-guidebook/collaboration)
-    -   [成长心态](/behavioral-interview-guidebook/growth-mindset)
-    -   适应能力和灵活性
+- [“介绍一下你自己…”] \(/behavioral-interview-guidebook/self-introduction)
+- “让我来看一下你的简历…”
+- [“为什么加入这个团队或公司？”] \(/behavioral-interview-guidebook/why-work-here)
+- [“你有什么问题要问我的吗？”] \(/behavioral-interview-guidebook/questions-to-ask)
+- "当你...... 的时候告诉我" （分类为以下主题）
+  - [实现目标和解决问题](/behavioral-interview-guidebook/problem-solving)
+  - [合作](/behavioral-interview-guidebook/collaboration)
+  - [成长心态](/behavioral-interview-guidebook/growth-mindset)
+  - 适应能力和灵活性

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

@@ -79,12 +79,12 @@ Em essência, para os gerentes de contratação, a autointrodução serve para r
 
 Além dos requisitos específicos do cargo, como frameworks e tecnologias específicas da equipe, os gerentes de contratação para desenvolvedores front-end geralmente se concentram nos seguintes **4 critérios**:
 
-| Critérios                                                                                                 | Exemplo                                                                                                                                                                                                                                                                                                                                               |
-| --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Compreensão dos fundamentos do front-end: HTML, CSS, JavaScript e áreas relacionadas                      | "Tenho construído aplicações de front-end há alguns anos e também contribuído para projetos populares de código aberto, como Lodash e jQuery." <br/><br/>"Fui assistente de ensino para o curso de desenvolvimento web da minha faculdade e orientei estudantes que trabalharam em projetos que envolviam a construção de aplicações web full stack." |
-| A amplitude e profundidade das tecnologias front-end que o candidato conhece                              | "Utilizei React, Tailwind, Next.js, Prisma e MySQL para construir um clone do Twitter como parte do projeto da minha equipe de engenharia de software."                                                                                                                                                                                               |
-| Iniciativa para acompanhar as tecnologias modernas de front-end                                           | "Eu aprendi Astro e reconstruí meu blog pessoal usando ele, pois o Astro é ótimo para construir sites orientados a conteúdo."                                                                                                                                                                                                                         |
-| Projetos relevantes de front-end nos quais o candidato trabalhou, bem como a complexidade desses projetos | "No meu tempo livre, desenvolvi um aplicativo de rastreamento de preços de criptomoedas em React para aprender como construir aplicativos clientes com visualização de dados intensiva e também para resolver uma necessidade pessoal de acompanhar meu portfólio."                                                                                   |
+| Critérios | Exemplo |
+| --- | --- |
+| Compreensão dos fundamentos do front-end: HTML, CSS, JavaScript e áreas relacionadas | "Tenho construído aplicações de front-end há alguns anos e também contribuído para projetos populares de código aberto, como Lodash e jQuery." <br/><br/>"Fui assistente de ensino para o curso de desenvolvimento web da minha faculdade e orientei estudantes que trabalharam em projetos que envolviam a construção de aplicações web full stack." |
+| A amplitude e profundidade das tecnologias front-end que o candidato conhece | "Utilizei React, Tailwind, Next.js, Prisma e MySQL para construir um clone do Twitter como parte do projeto da minha equipe de engenharia de software." |
+| Iniciativa para acompanhar as tecnologias modernas de front-end | "Eu aprendi Astro e reconstruí meu blog pessoal usando ele, pois o Astro é ótimo para construir sites orientados a conteúdo." |
+| Projetos relevantes de front-end nos quais o candidato trabalhou, bem como a complexidade desses projetos | "No meu tempo livre, desenvolvi um aplicativo de rastreamento de preços de criptomoedas em React para aprender como construir aplicativos clientes com visualização de dados intensiva e também para resolver uma necessidade pessoal de acompanhar meu portfólio." |
 
 Consulte abaixo exemplos de boas apresentações pessoais.
 
@@ -94,9 +94,9 @@ Se você deseja expandir para uma apresentação de seu portfólio, é important
 
 A descrição para cada projeto deve abranger:
 
--   Propósito do projeto: O que ele faz para os usuários
--   Frameworks/tecnologias usadas
--   Complexidade técnica envolvida
+- Propósito do projeto: O que ele faz para os usuários
+- Frameworks/tecnologias usadas
+- Complexidade técnica envolvida
 
 Consulte este artigo para obter uma compreensão mais detalhada de como conduzir uma apresentação de portfólio (em breve).
 

packages/behavioral-interview-guidebook/contents/self-introduction/zh-CN.mdx

@@ -8,18 +8,18 @@ description: 如何在不同的面试背景下有效地构建你的面试自我
 在这篇文章中，你会发现：
 
 1.  建议为不同的面试环境做准备
-2.  1分钟推销（自己）的话术方案
+2.  1 分钟推销（自己）的话术方案
 3.  作品集或案例研究展示
 4.  好的自我介绍的例子
 5.  来自招聘经理的提示和故事
 
 ## 建议的准备工作
 
-从本质上讲，你应该始终准备一个自我介绍，几乎在所有情况下都要在**1分钟之内**。
+从本质上讲，你应该始终准备一个自我介绍，几乎在所有情况下都要在**1 分钟之内**。
 
 在面试之前，最好从招聘人员或招聘经理那里了解更多关于该轮面试的评估标准--特别是你是否会被评估为行为/适合方面，或者纯粹是技术标准。 在大型科技公司，编码回合可能完全不包括行为相关的标准，因此你的自我介绍很可能只是作为主要面试的 "热身"。
 
-然而，在行为面试或技术面试中，在创业公司或优先考虑实践经验而不是LeetCode式的面试的公司，你可能想把你的自我介绍扩展为**快速的投资组合展示**，或暗示你有一个项目组合，他们可以在面试后查看，或在面试结束时分配5分钟左右的时间来进行介绍。
+然而，在行为面试或技术面试中，在创业公司或优先考虑实践经验而不是 LeetCode 式的面试的公司，你可能想把你的自我介绍扩展为**快速的投资组合展示**，或暗示你有一个项目组合，他们可以在面试后查看，或在面试结束时分配 5 分钟左右的时间来进行介绍。
 
 然而，请注意，无论在哪种情况下，如果你在这一轮做固定格式的编码面试，你应该保持自我介绍的简短，以确保你在实际的编码测试中有**多的时间**。 你花在自我介绍上的任何额外时间都会从你回答技术问题的时间中被剥夺。
 
@@ -51,17 +51,17 @@ description: 如何在不同的面试背景下有效地构建你的面试自我
   </tbody>
 </table>
 
-为了应对所有可能的情况，你应该准备一个1分钟的演讲和一个项目组合（建议但可选）。
+为了应对所有可能的情况，你应该准备一个 1 分钟的演讲和一个项目组合（建议但可选）。
 
 ## 一分钟的推销话术
 
 ### 大局观
 
-大多数情况下，话术将涵盖这4项内容：
+大多数情况下，话术将涵盖这 4 项内容：
 
 1.  工作经验的广度和深度
 2.  最高成就
-3.  如果工作经验不足5年，教育背景
+3.  如果工作经验不足 5 年，教育背景
 4.  申请职位的动机
 
 在制定你的推销方案时，要牢记目标--你要给人留下**好的第一印象**，成为这个职位的潜在理想人选。 要做到这一点，你应该在展示角色的关键要求的基础上，表现出自信、可亲。 想一想，如果你要雇用这个角色的候选人，你会注意些什么？
@@ -77,14 +77,14 @@ description: 如何在不同的面试背景下有效地构建你的面试自我
 
 ### 前端/网络开发人员的话术要点示例
 
-在特定角色的要求之上，如团队特定的框架和技术，前端招聘经理通常关注以下**4个标准**：
+在特定角色的要求之上，如团队特定的框架和技术，前端招聘经理通常关注以下**4 个标准**：
 
-| 标准                                 | 例子                                                                                                    |
-| ---------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| 了解前端的基本原理：HTML、CSS、JavaScript和相关领域 | "我建立前端应用程序已经有几年了，也为Lodash和jQuery等流行的开源项目做出了贡献。" <br/><br/>"我是我的大学的网络开发课程的教学助理，指导学生从事涉及建立全栈Web 应用的项目。" |
-| 候选人了解的前端技术的广度和深度                   | "我使用React、Tailwind、Next.js、Prisma和MySQL建立一个Twitter克隆，作为我的软件工程团队项目的一部分。"                               |
-| 主动跟上现代前端技术的步伐                      | "我学习了Astro，并使用它重建了我的个人博客，因为Astro对于建立内容驱动的网站非常好。"                                                      |
-| 候选人从事过的相关前端项目，这些项目的复杂性             | "在业余时间，我在React中建立了一个加密货币价格跟踪应用程序，以学习如何建立数据可视化重的客户应用程序，也解决了跟踪我的投资组合的个人痛点。"                             |
+| 标准 | 例子 |
+| --- | --- |
+| 了解前端的基本原理：HTML、CSS、JavaScript 和相关领域 | "我建立前端应用程序已经有几年了，也为 Lodash 和 jQuery 等流行的开源项目做出了贡献。" <br/><br/>"我是我的大学的网络开发课程的教学助理，指导学生从事涉及建立全栈 Web 应用的项目。" |
+| 候选人了解的前端技术的广度和深度 | "我使用 React、Tailwind、Next.js、Prisma 和 MySQL 建立一个 Twitter 克隆，作为我的软件工程团队项目的一部分。" |
+| 主动跟上现代前端技术的步伐 | "我学习了 Astro，并使用它重建了我的个人博客，因为 Astro 对于建立内容驱动的网站非常好。" |
+| 候选人从事过的相关前端项目，这些项目的复杂性 | "在业余时间，我在 React 中建立了一个加密货币价格跟踪应用程序，以学习如何建立数据可视化重的客户应用程序，也解决了跟踪我的投资组合的个人痛点。" |
 
 请参考下面好的自我介绍的例子。
 
@@ -94,9 +94,9 @@ description: 如何在不同的面试背景下有效地构建你的面试自我
 
 每个项目的描述应包括：
 
--   项目的目的：它为用户做什么
--   使用的框架/技术
--   涉及的技术复杂性
+- 项目的目的：它为用户做什么
+- 使用的框架/技术
+- 涉及的技术复杂性
 
 请参考这篇文章，以更详细地了解如何进行作品集展示（即将推出）。
 
@@ -104,15 +104,15 @@ description: 如何在不同的面试背景下有效地构建你的面试自我
 
 ### 对于经验丰富的工程师
 
-> 我在Airbnb工作了6年，担任前端工程师，是重新设计Airbnb预订体验项目的首席开发者。 作为工作的一部分，我为Airbnb的主要设计系统做出了贡献，建立了几个UI组件，如旋转木马，评级小工具，并重构了现有的组件。 我也有为Airbnb的开源前端项目（如Enzyme和react-dates）作出贡献的经验。
+> 我在 Airbnb 工作了 6 年，担任前端工程师，是重新设计 Airbnb 预订体验项目的首席开发者。 作为工作的一部分，我为 Airbnb 的主要设计系统做出了贡献，建立了几个 UI 组件，如旋转木马，评级小工具，并重构了现有的组件。 我也有为 Airbnb 的开源前端项目（如 Enzyme 和 react-dates）作出贡献的经验。
 >
-> 在业余时间，我喜欢学习新的前端技术，追赶不断发展的前端生态系统。 最近，我一直在探索新的JavaScript框架，如Astro和SolidJS，让自己接触到构建用户界面的新方法，提高我作为前端工程师的技能。
+> 在业余时间，我喜欢学习新的前端技术，追赶不断发展的前端生态系统。 最近，我一直在探索新的 JavaScript 框架，如 Astro 和 SolidJS，让自己接触到构建用户界面的新方法，提高我作为前端工程师的技能。
 
 ### 针对应届毕业生/大学生
 
-> 我于2020年毕业于东北大学，获得计算机科学学位。 我的兴趣是前端开发，我喜欢在网络上建立令人愉快的产品，因为可以自由地开发任何想到的东西，并且有快速的反馈回路。
+> 我于 2020 年毕业于东北大学，获得计算机科学学位。 我的兴趣是前端开发，我喜欢在网络上建立令人愉快的产品，因为可以自由地开发任何想到的东西，并且有快速的反馈回路。
 >
-> 我在学校时参加了一个网络开发课程，这让我学到了全栈开发的基础知识。 凭借这些技能，我成功地在Uber和Palantir等公司获得了软件工程实习机会。 在Uber，我使用React、Redux和GraphQL建立了一个内部工具，帮助开发者管理他们的测试骑手和司机账户。
+> 我在学校时参加了一个网络开发课程，这让我学到了全栈开发的基础知识。 凭借这些技能，我成功地在 Uber 和 Palantir 等公司获得了软件工程实习机会。 在 Uber，我使用 React、Redux 和 GraphQL 建立了一个内部工具，帮助开发者管理他们的测试骑手和司机账户。
 >
 > 我对谷歌的前端工程师职位感兴趣，因为我每天都在使用谷歌的产品，并且对他们精心设计的产品体验印象深刻。 能在这种影响数十亿人生活的产品上工作，那将是一个梦想成真。
 
@@ -120,16 +120,16 @@ description: 如何在不同的面试背景下有效地构建你的面试自我
 
 > 通常情况下，我把自我介绍作为一个简单的热身活动来启动面试。 不需要技术技能，但它测试了沟通和以清晰简洁的方式描述事物的能力。
 
--   工程经理，LinkedIn。
+- 工程经理，LinkedIn。
 
 > 候选人在介绍自己的时候不应该说得太深，因为这绝不是为了深入了解，只是快速概述一下。
 
--   人才招聘，Coinbase。
+- 人才招聘，Coinbase。
 
 > 结束前列出你所用过的技术栈或项目，以及你希望将来从事的工作/想要发展的职业方向，可能是一个好的建议。
 
--   工程经理，确实如此。
+- 工程经理，确实如此。
 
 > 你的面试官也是一个人。 面试官心目中最重要的事情是他们是否希望这个人加入他们的团队--这不仅仅是技能的问题。 我们想知道你是谁，然后你有什么能力。 当然，加入与工作相关的个人风格是最好的。
 
--   高级工程师，Dropbox。
+- 高级工程师，Dropbox。

packages/behavioral-interview-guidebook/contents/why-work-here/pt-BR.mdx

@@ -17,11 +17,11 @@ A maioria dos entrevistadores faz essa pergunta com um único objetivo em mente:
 
 Para ter sucesso, existem 3 passos básicos para construir sua resposta:
 
-### 1.  Deve levar entre 60 a 90 segundos
+### 1. Deve levar entre 60 a 90 segundos
 
 Nunca deve levar mais do que 60 a 90 segundos. Qualquer duração maior pode constituir um monólogo. Para referência, 1 minuto equivale a cerca de 15 declarações.
 
-### 2.  Recolher informações profundas sobre a empresa/equipe/cargo obtidas a partir de funcionários atuais ou antigos da empresa
+### 2. Recolher informações profundas sobre a empresa/equipe/cargo obtidas a partir de funcionários atuais ou antigos da empresa
 
 Se você já foi entrevistador antes, saberá que a maioria dos candidatos não impressiona na pergunta "por que você quer trabalhar nesta empresa / equipe", porque tendem a respondê-la com base nas informações públicas da empresa, o que pode não necessariamente representar a cultura ou situação específica da equipe ou departamento. Por exemplo, imagine que você está avaliando 2 candidatos para uma equipe de desenvolvimento de jogos:
 
@@ -45,7 +45,7 @@ Para se destacar como alguém verdadeiramente interessado na função, você dev
 4.  Essa equipe trabalha em estreita colaboração com outras equipes? Quais equipes e de que forma essa colaboração acontece?
 5.  Você pode me explicar o processo de um projeto típico?
 
-### 3.  Explique brevemente por que se juntar a esta empresa/cargo/equipe é um passo estratégico e lógico para sua carreira
+### 3. Explique brevemente por que se juntar a esta empresa/cargo/equipe é um passo estratégico e lógico para sua carreira
 
 Fazendo isso, você também pode aproveitar a oportunidade para reforçar a impressão do entrevistador sobre sua paixão pelo campo ou os esforços que você fez para construir sua expertise.
 

packages/behavioral-interview-guidebook/contents/why-work-here/zh-CN.mdx

@@ -3,7 +3,7 @@ title: 如何在行为面试中回答“为什么想在这里工作”
 description: 学习如何简洁有效地回答有关公司动机的问题，适用于前端/网络开发人员/软件工程师。 由大型科技公司的前面试官撰写。
 ---
 
-作为招聘经理，“为什么想在这里工作”是一个极其常见的问题，可能在超过70％的面试中被问到。 然而，大多数候选人未能回答正确。 在本文中，您将从前面试官那里学习如何有效而简洁地回答此问题，适用于前端工程师/软件工程师：
+作为招聘经理，“为什么想在这里工作”是一个极其常见的问题，可能在超过 70％的面试中被问到。 然而，大多数候选人未能回答正确。 在本文中，您将从前面试官那里学习如何有效而简洁地回答此问题，适用于前端工程师/软件工程师：
 
 1.  面试官的意图
 2.  建议的答案框架
@@ -15,27 +15,27 @@ description: 学习如何简洁有效地回答有关公司动机的问题，适
 
 ## 建议的答案框架
 
-要成功，建立答案有3个基本步骤：
+要成功，建立答案有 3 个基本步骤：
 
-### 1.  答案应在60至90秒之间
+### 1. 答案应在 60 至 90 秒之间
 
-不要超过60至90秒。 任何超过这个时间可能都构成了一个独白。 供参考，1分钟约15句话。
+不要超过 60 至 90 秒。 任何超过这个时间可能都构成了一个独白。 供参考，1 分钟约 15 句话。
 
-### 2.  从公司的现任/前任员工那里收集有关公司/团队/职位的深入了解
+### 2. 从公司的现任/前任员工那里收集有关公司/团队/职位的深入了解
 
 如果您以前是面试官，您会知道，大多数候选人在“为什么想在这个公司/团队工作”这个问题上表现不佳，因为他们倾向于基于公司的公共信息回答该问题，这可能不一定代表个人团队或部门的文化或情况。 例如，想象一下，您正在评估两名游戏开发团队的候选人：
 
-1.  候选人A：“A公司非常环保，我希望成为地球拯救行动的一部分”（作为团队经理，您知道您的团队成员从未谈论过地球拯救，因为您的工作与此完全无关）
-2.  候选人B：“A团队正在基于B技术开发游戏，这是我恰好非常感兴趣的。”
+1.  候选人 A：“A 公司非常环保，我希望成为地球拯救行动的一部分”（作为团队经理，您知道您的团队成员从未谈论过地球拯救，因为您的工作与此完全无关）
+2.  候选人 B：“A 团队正在基于 B 技术开发游戏，这是我恰好非常感兴趣的。”
 
 为了成为真正对该角色感兴趣的人，请努力寻找与您要加入的团队相关的见解，并利用它来证明您的兴趣（因此也适合）。
 
 #### 这里是获取团队特定见解的一些常见途径：
 
 1.  从职位描述中获取有关团队堆栈或实践的更多见解（在某些情况下，可能存在许多您可以利用的细节）
-2.  在LinkedIn上搜索团队，了解他们的个人工作范围、过去的项目、背景和兴趣爱好
+2.  在 LinkedIn 上搜索团队，了解他们的个人工作范围、过去的项目、背景和兴趣爱好
 3.  在做了基本在线研究后，尝试得分信息性访谈、咖啡聊天或短视频通话与团队成员交流
-4.  在Blind上甚至Reddit上搜索团队（尽可能具体地查询）
+4.  在 Blind 上甚至 Reddit 上搜索团队（尽可能具体地查询）
 
 #### 这里是一些有用的问题：
 
@@ -45,18 +45,18 @@ description: 学习如何简洁有效地回答有关公司动机的问题，适
 4.  该团队是否与其他团队密切合作？ 是哪些团队以及如何合作？
 5.  你能带我走过一个典型项目的流程吗？
 
-### 3.  简要解释为什么加入这家公司/职位/团队是您职业生涯的战略和逻辑步骤
+### 3. 简要解释为什么加入这家公司/职位/团队是您职业生涯的战略和逻辑步骤
 
 这样做，您还可以借此机会巩固面试官对您的热情或您为建立专业知识所做的努力的印象。
 
 ## 示例问题和答案
 
-### “为什么想在TikTok Shop团队工作？”
+### “为什么想在 TikTok Shop 团队工作？”
 
-> 我在学校期间做过近4年的自由职业网络开发人员。 作为个人贡献者，我已经积累了丰富的经验，接下来的步骤是作为更大团队的一部分进行更大、更复杂的项目，以将我的开发技能提升到更高的水平。
+> 我在学校期间做过近 4 年的自由职业网络开发人员。 作为个人贡献者，我已经积累了丰富的经验，接下来的步骤是作为更大团队的一部分进行更大、更复杂的项目，以将我的开发技能提升到更高的水平。
 >
-> TikTok商城对我来说最重要的三件事是：
+> TikTok 商城对我来说最重要的三件事是：
 >
-> 1.  我喜欢知道我的开发努力可以具体地推动影响。 在当前阶段，TikTok商城仍处于产品生命周期的相对初级阶段，在这个阶段这是可能的。
-> 2.  TikTok商城服务于广大群众，必须处理与可访问性、本地化和相对新的电子商务等相关的挑战，这使我能够在该领域发展我的技能。
-> 3.  字节跳动（TikTok的母公司）内部开发了许多尖端技术，并使用开源技术。 我很兴奋向公司经验丰富的工程师学习如何将这些技术扩展到世界范围内。
+> 1.  我喜欢知道我的开发努力可以具体地推动影响。 在当前阶段，TikTok 商城仍处于产品生命周期的相对初级阶段，在这个阶段这是可能的。
+> 2.  TikTok 商城服务于广大群众，必须处理与可访问性、本地化和相对新的电子商务等相关的挑战，这使我能够在该领域发展我的技能。
+> 3.  字节跳动（TikTok 的母公司）内部开发了许多尖端技术，并使用开源技术。 我很兴奋向公司经验丰富的工程师学习如何将这些技术扩展到世界范围内。

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

@@ -1,13 +1,13 @@
 ---
-title: "Entrevistas para Desenvolvedor Front-End - Perguntas de Codificação Algorítmica: Como se Preparar"
+title: 'Entrevistas para Desenvolvedor Front-End - Perguntas de Codificação Algorítmica: Como se Preparar'
 description: Guia para se Preparar para Perguntas de Codificação Algorítmica em Entrevistas para Desenvolvedor Front-End / Web - Conceitos para Saber, Critérios de Entrevista e Questões de Prática Importantes.
 ---
 
 Perguntas de codificação algorítmica são exatamente as questões que você pode encontrar no LeetCode. Perguntas algorítmicas geralmente possuem as seguintes características:
 
--   Elas não são específicas para o domínio de front-end; podem ser resolvidas na maioria das linguagens de programação populares.
--   Normalmente são acompanhadas por cenários pouco práticos. Você não teria encontrado um problema desse tipo durante o desenvolvimento do mundo real. Quem já precisou inverter uma árvore binária ou contar o número de substrings palindrômicas em uma string?
--   A eficiência do código (complexidade de tempo e espaço) é importante, e produzir a solução mais eficiente requer um conhecimento sólido de estruturas de dados e algoritmos.
+- Elas não são específicas para o domínio de front-end; podem ser resolvidas na maioria das linguagens de programação populares.
+- Normalmente são acompanhadas por cenários pouco práticos. Você não teria encontrado um problema desse tipo durante o desenvolvimento do mundo real. Quem já precisou inverter uma árvore binária ou contar o número de substrings palindrômicas em uma string?
+- A eficiência do código (complexidade de tempo e espaço) é importante, e produzir a solução mais eficiente requer um conhecimento sólido de estruturas de dados e algoritmos.
 
 Embora as perguntas de codificação algorítmica não sejam específicas para o front-end, as habilidades necessárias para se destacar nessas questões - pensamento analítico sólido, comunicação eficaz, compreensão sólida das estruturas de dados e algoritmos comuns, boas práticas de codificação - ainda são habilidades cruciais que bons Engenheiros Front-End devem possuir. Bons Engenheiros Front-End também são bons Engenheiros de Software, e bons Engenheiros de Software devem ter domínio sobre estruturas de dados e algoritmos básicos. Portanto, não é surpresa que muitas empresas ainda façam perguntas de codificação algorítmica durante o processo de entrevista. Familiaridade com estruturas de dados e algoritmos também é útil para resolver perguntas de codificação em JavaScript e perguntas de codificação de Interface do Usuário.
 
@@ -15,9 +15,9 @@ Existem muitos recursos disponíveis que abordam entrevistas de codificação al
 
 ## Exemplos
 
--   Inverter uma lista ligada.
--   Determinar se uma string contém colchetes balanceados.
--   Determinar quantas substrings em uma string são palíndromos.
+- Inverter uma lista ligada.
+- Determinar se uma string contém colchetes balanceados.
+- Determinar quantas substrings em uma string são palíndromos.
 
 ## Como se Preparar
 
@@ -34,10 +34,10 @@ Embora você ainda possa ser questionado sobre qualquer tópico algorítmico, as
 
 Como o DOM é uma árvore, priorize aprender sobre árvores e os diversos algoritmos de travessia de árvores.
 
-| Categoria           | Tópicos Importantes                                                                    |
-| ------------------- | -------------------------------------------------------------------------------------- |
-| Estruturas de Dados | Arrays, Mapas, Pilhas, Árvores, Gráficos, Matriz (Arrays 2D), Conjuntos                |
-| Algoritmos          | Busca Binária, Busca em Largura, Busca em Profundidade, Ordenação Topológica, Recursão |
+| Categoria | Tópicos Importantes |
+| --- | --- |
+| Estruturas de Dados | Arrays, Mapas, Pilhas, Árvores, Gráficos, Matriz (Arrays 2D), Conjuntos |
+| Algoritmos | Busca Binária, Busca em Largura, Busca em Profundidade, Ordenação Topológica, Recursão |
 
 ## Operações Comuns em JavaScript
 
@@ -66,32 +66,32 @@ a serem adicionados.
 
 ### `Map`
 
-| Operação                  | Complexidade de Tempo                                                           |
-| ------------------------- | ------------------------------------------------------------------------------- |
-| `Map.prototype.clear()`   | O(n)                                                                            |
-| `Map.prototype.delete()`  | O(1)                                                                            |
+| Operação | Complexidade de Tempo |
+| --- | --- |
+| `Map.prototype.clear()` | O(n) |
+| `Map.prototype.delete()` | O(1) |
 | `Map.prototype.entries()` | O(1) because it returns an iterator. Obter todas as entradas levará tempo O(n). |
-| `Map.prototype.forEach()` | O(n)                                                                            |
-| `Map.prototype.get()`     | O(1)                                                                            |
-| `Map.prototype.has()`     | O(1)                                                                            |
-| `Map.prototype.keys()`    | O(1) porque retorna um iterador. Obter todas as chaves levará tempo O(n).       |
-| `Map.prototype.set()`     | O(1)                                                                            |
-| `Map.prototype.values()`  | O(1) porque retorna um iterador. Obter todos os valores levará tempo O(n).      |
+| `Map.prototype.forEach()` | O(n) |
+| `Map.prototype.get()` | O(1) |
+| `Map.prototype.has()` | O(1) |
+| `Map.prototype.keys()` | O(1) porque retorna um iterador. Obter todas as chaves levará tempo O(n). |
+| `Map.prototype.set()` | O(1) |
+| `Map.prototype.values()` | O(1) porque retorna um iterador. Obter todos os valores levará tempo O(n). |
 
 <sup>*</sup> `n` é o número de chaves no mapa.
 
 ### `Set`
 
-| Operação                  | Complexidade de Tempo                                                       |
-| ------------------------- | --------------------------------------------------------------------------- |
-| `Set.prototype.add()`     | O(1)                                                                        |
-| `Set.prototype.clear()`   | O(n)                                                                        |
-| `Set.prototype.delete()`  | O(1)                                                                        |
+| Operação | Complexidade de Tempo |
+| --- | --- |
+| `Set.prototype.add()` | O(1) |
+| `Set.prototype.clear()` | O(n) |
+| `Set.prototype.delete()` | O(1) |
 | `Set.prototype.entries()` | O(1) porque retorna um iterador. Obter todas as entradas levará tempo O(n). |
-| `Set.prototype.forEach()` | O(n)                                                                        |
-| `Set.prototype.has()`     | O(1)                                                                        |
-| `Set.prototype.keys()`    | O(1) porque retorna um iterador. Obter todas as chaves levará tempo O(n).   |
-| `Set.prototype.values()`  | O(1) porque retorna um iterador. Obter todos os valores levará tempo O(n).  |
+| `Set.prototype.forEach()` | O(n) |
+| `Set.prototype.has()` | O(1) |
+| `Set.prototype.keys()` | O(1) porque retorna um iterador. Obter todas as chaves levará tempo O(n). |
+| `Set.prototype.values()` | O(1) porque retorna um iterador. Obter todos os valores levará tempo O(n). |
 
 <sup>*</sup> `n` é o número de chaves no conjunto (set).
 
@@ -99,19 +99,19 @@ a serem adicionados.
 
 Durante entrevistas de codificação algorítmica, os entrevistadores estão avaliando os candidatos com base nas seguintes habilidades:
 
--   **Solução de problemas**: use uma abordagem sistemática e lógica para a compreensão e resolução de um problema. Dividir o problema em problemas menores e independentes. Avaliar abordagens diferentes e suas compensações.
--   **Competência Técnica**: Habilidade de traduzir soluções em código funcional e demonstrar um forte entendimento da linguagem sendo utilizada.
--   **Comunicação**: Fazer perguntas para esclarecer detalhes e explicar claramente a abordagem e as considerações.
--   **Verificação**: Identificar vários cenários para testar o código, incluindo casos extremos. Ser capaz de diagnosticar e resolver quaisquer problemas que surjam.
+- **Solução de problemas**: use uma abordagem sistemática e lógica para a compreensão e resolução de um problema. Dividir o problema em problemas menores e independentes. Avaliar abordagens diferentes e suas compensações.
+- **Competência Técnica**: Habilidade de traduzir soluções em código funcional e demonstrar um forte entendimento da linguagem sendo utilizada.
+- **Comunicação**: Fazer perguntas para esclarecer detalhes e explicar claramente a abordagem e as considerações.
+- **Verificação**: Identificar vários cenários para testar o código, incluindo casos extremos. Ser capaz de diagnosticar e resolver quaisquer problemas que surjam.
 
 ## Useful Tips
 
--   **Pensamento Positivo**. A biblioteca padrão do JavaScript não possui algumas estruturas de dados e algoritmos úteis, como fila, heap e busca binária, que podem facilitar sua vida durante entrevistas de codificação em JavaScript. No entanto, você pode perguntar ao entrevistador se pode fazer de conta que tal estrutura de dados/algoritmo existe e usá-la diretamente em sua solução sem implementá-la.
--   **Funções Puras**. Tente escrever funções puras, que têm a vantagem de serem reutilizáveis e modulares, ou seja, funções que não dependem de estados externos à função e não causam efeitos colaterais.
--   **Escolha com sabedoria estruturas de dados.** Preste atenção à sua escolha de estruturas de dados e esteja ciente das complexidades do tempo do código. Esteja familiarizado com as complexidades de tempo/espaço das operações básicas de Array, Object, Set e Map do JavaScript, caso queira utilizá-las em sua solução. Algumas dessas complexidades de tempo/espaço podem ser diferentes em diferentes linguagens. Não escreva código que seja executado em O(n<sup>2</sup>) se ele puder ser executado em O(n) com o uso de hash mapas.
--   **Casos Extremos de Recursão**.
-    -   Se você identificou que resolver a pergunta requer recursão, pergunte sobre o tamanho da entrada e como lidar com o caso de estouro da pilha de recursão. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
-    -   Estruturas de dados profundamente aninhadas podem ter referências recursivas a si mesmas, o que torna certas operações, como a serialização, muito mais complicadas. Pergunte ao entrevistador se você precisa lidar com tais casos. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
+- **Pensamento Positivo**. A biblioteca padrão do JavaScript não possui algumas estruturas de dados e algoritmos úteis, como fila, heap e busca binária, que podem facilitar sua vida durante entrevistas de codificação em JavaScript. No entanto, você pode perguntar ao entrevistador se pode fazer de conta que tal estrutura de dados/algoritmo existe e usá-la diretamente em sua solução sem implementá-la.
+- **Funções Puras**. Tente escrever funções puras, que têm a vantagem de serem reutilizáveis e modulares, ou seja, funções que não dependem de estados externos à função e não causam efeitos colaterais.
+- **Escolha com sabedoria estruturas de dados.** Preste atenção à sua escolha de estruturas de dados e esteja ciente das complexidades do tempo do código. Esteja familiarizado com as complexidades de tempo/espaço das operações básicas de Array, Object, Set e Map do JavaScript, caso queira utilizá-las em sua solução. Algumas dessas complexidades de tempo/espaço podem ser diferentes em diferentes linguagens. Não escreva código que seja executado em O(n<sup>2</sup>) se ele puder ser executado em O(n) com o uso de hash mapas.
+- **Casos Extremos de Recursão**.
+  - Se você identificou que resolver a pergunta requer recursão, pergunte sobre o tamanho da entrada e como lidar com o caso de estouro da pilha de recursão. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
+  - Estruturas de dados profundamente aninhadas podem ter referências recursivas a si mesmas, o que torna certas operações, como a serialização, muito mais complicadas. Pergunte ao entrevistador se você precisa lidar com tais casos. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
 
 ## Questões de Prática
 

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

@@ -3,94 +3,94 @@ title: 前端面试算法编码问题——如何准备
 description: 这是前端/网站开发者面试中准备算法编码问题的指南，包括需要了解的概念、面试评分标准和重要的实践问题。
 ---
 
-算法编码问题就是可以在LeetCode上找到的问题。 算法问题通常具有以下特征：
+算法编码问题就是可以在 LeetCode 上找到的问题。 算法问题通常具有以下特征：
 
--   它们不特定于前端领域；可以通过大多数主流编程语言求解。
--   通常附带不切实际的情景。 你在实际开发中不会遇到这样的问题。 有谁曾经不得不反转二叉树或计算字符串中回文子串的数量呢？
--   代码效率（时间和空间复杂度）很重要，要想得到最有效的解决方案需要扎实掌握数据结构和算法知识。
+- 它们不特定于前端领域；可以通过大多数主流编程语言求解。
+- 通常附带不切实际的情景。 你在实际开发中不会遇到这样的问题。 有谁曾经不得不反转二叉树或计算字符串中回文子串的数量呢？
+- 代码效率（时间和空间复杂度）很重要，要想得到最有效的解决方案需要扎实掌握数据结构和算法知识。
 
-虽然算法编码问题不是前端特有的，但在这些问题中表现出色所需的技能——强大的分析思考能力、有效的沟通能力、熟练掌握常见的数据结构和算法、良好的代码卫生习惯，仍是优秀的前端工程师必须具备的关键技能。 优秀的前端工程师也是优秀的软件工程师，而优秀的软件工程师应该掌握基本的数据结构和算法。 因此，在面试过程中，很多公司仍然会问有关算法编码的问题。 熟悉数据结构和算法对于解决JavaScript编码问题和用户界面编码问题也有帮助。
+虽然算法编码问题不是前端特有的，但在这些问题中表现出色所需的技能——强大的分析思考能力、有效的沟通能力、熟练掌握常见的数据结构和算法、良好的代码卫生习惯，仍是优秀的前端工程师必须具备的关键技能。 优秀的前端工程师也是优秀的软件工程师，而优秀的软件工程师应该掌握基本的数据结构和算法。 因此，在面试过程中，很多公司仍然会问有关算法编码的问题。 熟悉数据结构和算法对于解决 JavaScript 编码问题和用户界面编码问题也有帮助。
 
 关于算法编码面试的资源有很多，因为它们不特定于前端，所以我们不会在这里详细介绍。 如果您想了解有关算法编码面试的更多信息，我们建议参考[Tech Interview Handbook](https://www.techinterviewhandbook.org)。
 
 ## 示例
 
--   反转链表。
--   判断字符串是否包含平衡的括号。
--   计算字符串中有多少个子串是回文的。
+- 反转链表。
+- 判断字符串是否包含平衡的括号。
+- 计算字符串中有多少个子串是回文的。
 
 ## 如何准备
 
-1.  选择一种好的编程语言。 如果你想节省准备时间，你可能应该坚持使用JavaScript来解决算法问题，尽管需要注意的是JavaScript语言不包含某些常见有用的数据结构和算法，而其他语言，如Python、Java和C++则包含。 个人建议使用Python来解决算法面试问题。
+1.  选择一种好的编程语言。 如果你想节省准备时间，你可能应该坚持使用 JavaScript 来解决算法问题，尽管需要注意的是 JavaScript 语言不包含某些常见有用的数据结构和算法，而其他语言，如 Python、Java 和 C++则包含。 个人建议使用 Python 来解决算法面试问题。
 2.  规划时间并按优先级处理主题和问题。
 3.  将学习和练习结合在一起。
 4.  通过编码面试备忘清单来加深印象。
 
-请参考[Tech Interview Handbook的逐步指南](https://www.techinterviewhandbook.org/coding-interview-prep/)，了解如何准备算法编码面试。
+请参考[Tech Interview Handbook 的逐步指南](https://www.techinterviewhandbook.org/coding-interview-prep/)，了解如何准备算法编码面试。
 
 ## 重要概念
 
 尽管你仍然可能被问到任何算法问题，但公司倾向于对前端工程师候选人采取温和的态度，并且可能不会问与动态规划或复杂图形算法等困难的话题有关的问题。
 
-由于DOM是一棵树，优先学习有关树和各种树遍历算法的知识。
+由于 DOM 是一棵树，优先学习有关树和各种树遍历算法的知识。
 
-| 类别   | 重要话题                       |
-| ---- | -------------------------- |
-| 数据结构 | 数组、映射、堆栈、树、图、矩阵（2D数组）、集合   |
-| 算法   | 二分查找、广度优先搜索、深度优先搜索、拓扑排序、递归 |
+| 类别     | 重要话题                                             |
+| -------- | ---------------------------------------------------- |
+| 数据结构 | 数组、映射、堆栈、树、图、矩阵（2D 数组）、集合      |
+| 算法     | 二分查找、广度优先搜索、深度优先搜索、拓扑排序、递归 |
 
-## 常见JavaScript操作
+## 常见 JavaScript 操作
 
 ### `Array`
 
-| 操作                          | 时间复杂度           |
-| --------------------------- | --------------- |
-| `Array.prototype.concat()`  | O(m + n)        |
-| `Array.prototype.every()`   | O(n)            |
-| `Array.prototype.fill()`    | O(n)            |
-| `Array.prototype.filter()`  | O(n)            |
-| `Array.prototype.find()`    | O(n)            |
-| `Array.prototype.pop()`     | O(1)            |
-| `Array.prototype.push()`    | O(1)            |
-| `Array.prototype.reduce()`  | O(n)            |
-| `Array.prototype.reverse()` | O(n)            |
-| `Array.prototype.shift()`   | O(n)            |
-| `Array.prototype.slice()`   | O(n)            |
-| `Array.prototype.some()`    | O(n)            |
-| `Array.prototype.sort()`    | O(nlgn)         |
-| `Array.prototype.splice()`  | O(n)            |
-| `Array.prototype.unshift()` | O(m + n)        |
+| 操作                        | 时间复杂度 |
+| --------------------------- | ---------- |
+| `Array.prototype.concat()`  | O(m + n)   |
+| `Array.prototype.every()`   | O(n)       |
+| `Array.prototype.fill()`    | O(n)       |
+| `Array.prototype.filter()`  | O(n)       |
+| `Array.prototype.find()`    | O(n)       |
+| `Array.prototype.pop()`     | O(1)       |
+| `Array.prototype.push()`    | O(1)       |
+| `Array.prototype.reduce()`  | O(n)       |
+| `Array.prototype.reverse()` | O(n)       |
+| `Array.prototype.shift()`   | O(n)       |
+| `Array.prototype.slice()`   | O(n)       |
+| `Array.prototype.some()`    | O(n)       |
+| `Array.prototype.sort()`    | O(nlgn)    |
+| `Array.prototype.splice()`  | O(n)       |
+| `Array.prototype.unshift()` | O(m + n)   |
 
 <sup>*</sup> `n`是数组中元素的数量，`m`是要添加的元素的数量。
 
 ### `Map`
 
-| 操作                        | 时间复杂度                                  |
-| ------------------------- | -------------------------------------- |
-| `Map.prototype.clear()`   | O(n)                                   |
-| `Map.prototype.delete()`  | O(1)                                   |
-| `Map.prototype.entries()` | O(1)，因为它返回一个迭代器。 获取所有条目将花费O(n)时间。      |
-| `Map.prototype.forEach()` | O(n)                                   |
-| `Map.prototype.get()`     | O(1)                                   |
-| `Map.prototype.has()`     | O(1)                                   |
-| `Map.prototype.keys()`    | O(1)，因为它返回一个迭代器。 获取所有的 key 将需要O(n)时间。  |
-| `Map.prototype.set()`     | O(1)                                   |
-| `Map.prototype.values()`  | O(1)，因为它返回一个迭代器。 获取所有 value 将花费O(n)时间。 |
+| 操作 | 时间复杂度 |
+| --- | --- |
+| `Map.prototype.clear()` | O(n) |
+| `Map.prototype.delete()` | O(1) |
+| `Map.prototype.entries()` | O(1)，因为它返回一个迭代器。 获取所有条目将花费 O(n)时间。 |
+| `Map.prototype.forEach()` | O(n) |
+| `Map.prototype.get()` | O(1) |
+| `Map.prototype.has()` | O(1) |
+| `Map.prototype.keys()` | O(1)，因为它返回一个迭代器。 获取所有的 key 将需要 O(n)时间。 |
+| `Map.prototype.set()` | O(1) |
+| `Map.prototype.values()` | O(1)，因为它返回一个迭代器。 获取所有 value 将花费 O(n)时间。 |
 
 <sup>*</sup> `n`是映射中键的数量。
 
 ### `Set`
 
-| 操作                        | 时间复杂度                                  |
-| ------------------------- | -------------------------------------- |
-| `Set.prototype.add()`     | O(1)                                   |
-| `Set.prototype.clear()`   | O(n)                                   |
-| `Set.prototype.delete()`  | O(1)                                   |
-| `Set.prototype.entries()` | O(1)，因为它返回一个迭代器。 获取所有条目将花费O(n)时间。      |
-| `Set.prototype.forEach()` | O(n)                                   |
-| `Set.prototype.has()`     | O(1)                                   |
-| `Set.prototype.keys()`    | O(1)，因为它返回一个迭代器。 获取所有的 key 将需要O(n)时间。  |
-| `Set.prototype.values()`  | O(1)，因为它返回一个迭代器。 获取所有 value 将花费O(n)时间。 |
+| 操作 | 时间复杂度 |
+| --- | --- |
+| `Set.prototype.add()` | O(1) |
+| `Set.prototype.clear()` | O(n) |
+| `Set.prototype.delete()` | O(1) |
+| `Set.prototype.entries()` | O(1)，因为它返回一个迭代器。 获取所有条目将花费 O(n)时间。 |
+| `Set.prototype.forEach()` | O(n) |
+| `Set.prototype.has()` | O(1) |
+| `Set.prototype.keys()` | O(1)，因为它返回一个迭代器。 获取所有的 key 将需要 O(n)时间。 |
+| `Set.prototype.values()` | O(1)，因为它返回一个迭代器。 获取所有 value 将花费 O(n)时间。 |
 
 <sup>*</sup> `n`是集合中元素的数量。
 
@@ -98,20 +98,20 @@ description: 这是前端/网站开发者面试中准备算法编码问题的指
 
 在算法编码面试中，面试官评估候选人的技能，包括：
 
--   **问题解决**: 采用系统和逻辑的方法来理解和解决问题。 将问题分解为更小的独立问题。 评估不同方法及其权衡。
--   **技术能力**: 能够将解决方案转化为工作代码，并表现出对所使用语言的深刻理解。
--   **沟通**: 询问问题以澄清细节，并清楚地解释自己的方法和思考。
--   **验证**: 确定要针对代码进行测试的各种情况，包括边缘情况。 能够诊断和解决出现的任何问题。
+- **问题解决**: 采用系统和逻辑的方法来理解和解决问题。 将问题分解为更小的独立问题。 评估不同方法及其权衡。
+- **技术能力**: 能够将解决方案转化为工作代码，并表现出对所使用语言的深刻理解。
+- **沟通**: 询问问题以澄清细节，并清楚地解释自己的方法和思考。
+- **验证**: 确定要针对代码进行测试的各种情况，包括边缘情况。 能够诊断和解决出现的任何问题。
 
 ## 有用的提示
 
--   **虚构的想法**。 JavaScript的标准库不包含队列，堆，二分查找等一些有用的数据结构和算法，这可能会使您在JavaScript编码面试中感到困难。 但是，你可以问面试官是否可以假装这样的数据结构/算法存在，并直接在你的解决方案中使用它而不实现它。
--   **纯函数**。 编写纯函数，这样可以使函数具有可重复使用性和模块化性，也就是说，函数不依赖于函数外的状态，并且不会产生副作用。
--   **明智地选择数据结构**。注意选择数据结构并了解代码的时间复杂度。 熟悉JavaScript数组、对象、集合、映射的时间/空间复杂度，如有必要，可以在解决方案中使用它们。 其中一些时间/空间的复杂度在不同的语言中有所不同。 如果可以使用哈希映射在O(n)的运行时内完成任务，就不要编写O(n<sup>2</sup>)的代码。
--   **递归边界**。
-    -   如果您已经确定解决问题需要递归，请询问输入大小和如何处理递归栈溢出的情况。 通常情况下，你不必处理它，但是提出这个问题是一个好的信号。
-    -   深嵌套的数据结构可以具有递归引用它本身的特征，这使得某些操作如序列化变得更加棘手。 问问面试官你是否要处理这样的情况。 通常情况下，你不必处理它，但是提出这个问题是一个好的信号。
+- **虚构的想法**。 JavaScript 的标准库不包含队列，堆，二分查找等一些有用的数据结构和算法，这可能会使您在 JavaScript 编码面试中感到困难。 但是，你可以问面试官是否可以假装这样的数据结构/算法存在，并直接在你的解决方案中使用它而不实现它。
+- **纯函数**。 编写纯函数，这样可以使函数具有可重复使用性和模块化性，也就是说，函数不依赖于函数外的状态，并且不会产生副作用。
+- **明智地选择数据结构**。注意选择数据结构并了解代码的时间复杂度。 熟悉 JavaScript 数组、对象、集合、映射的时间/空间复杂度，如有必要，可以在解决方案中使用它们。 其中一些时间/空间的复杂度在不同的语言中有所不同。 如果可以使用哈希映射在 O(n)的运行时内完成任务，就不要编写 O(n<sup>2</sup>)的代码。
+- **递归边界**。
+  - 如果您已经确定解决问题需要递归，请询问输入大小和如何处理递归栈溢出的情况。 通常情况下，你不必处理它，但是提出这个问题是一个好的信号。
+  - 深嵌套的数据结构可以具有递归引用它本身的特征，这使得某些操作如序列化变得更加棘手。 问问面试官你是否要处理这样的情况。 通常情况下，你不必处理它，但是提出这个问题是一个好的信号。
 
 ## 实践问题
 
-目前，最好的练习算法问题的平台无疑是LeetCode。 但是，GreatFrontEnd提供一些[数据结构和算法的练习问题](/questions/js/coding/data-structures-algorithms)，在其中，您可以练习实现常见的数据结构（[堆栈](/questions/javascript/stack)、[队列](/questions/javascript/queue)）和算法（[二分查找](/questions/javascript/binary-search)、[归并排序](/questions/javascript/merge-sort)）等在JavaScript中的操作。
+目前，最好的练习算法问题的平台无疑是 LeetCode。 但是，GreatFrontEnd 提供一些[数据结构和算法的练习问题](/questions/js/coding/data-structures-algorithms)，在其中，您可以练习实现常见的数据结构（[堆栈](/questions/javascript/stack)、[队列](/questions/javascript/queue)）和算法（[二分查找](/questions/javascript/binary-search)、[归并排序](/questions/javascript/merge-sort)）等在 JavaScript 中的操作。

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

@@ -5,9 +5,9 @@ description: Guia para Preparação de Perguntas de Codificação em Entrevistas
 
 Entrevistas de codificação são a principal forma pela qual Engenheiros Front End são avaliados e podem abranger várias rodadas e estágios das entrevistas, portanto, é extremamente importante praticar para entrevistas de codificação. Para recapitular, aqui estão os três tipos de perguntas de codificação que você pode ser questionado:
 
--   **Codificação Algorítmica**: Resolva questões algorítmicas complexas que avaliam sua compreensão de estruturas de dados, algoritmos e complexidade temporal.
--   **Codificação em JavaScript**: Implemente funções ou estruturas de dados em JavaScript relacionadas ao domínio de front-end e comumente usadas durante o desenvolvimento de front-end.
--   **Codificação de Interface de Usuário**: Construa interfaces de usuário (componentes, widgets, aplicativos) usando HTML, CSS e JavaScript, às vezes até mesmo usando frameworks de JavaScript.
+- **Codificação Algorítmica**: Resolva questões algorítmicas complexas que avaliam sua compreensão de estruturas de dados, algoritmos e complexidade temporal.
+- **Codificação em JavaScript**: Implemente funções ou estruturas de dados em JavaScript relacionadas ao domínio de front-end e comumente usadas durante o desenvolvimento de front-end.
+- **Codificação de Interface de Usuário**: Construa interfaces de usuário (componentes, widgets, aplicativos) usando HTML, CSS e JavaScript, às vezes até mesmo usando frameworks de JavaScript.
 
 ## Ambiente de Codificação
 
@@ -21,10 +21,10 @@ Você receberá uma URL de um editor de código no navegador. O editor pode ter
 
 A diferença entre um editor de código básico e um IDE é que os IDEs permitem alternar entre vários arquivos. Eles podem ser tanto no navegador quanto aplicativos nativos em seu laptop. Normalmente, você será solicitado a usar IDEs quando precisar construir interfaces de usuário e utilizar vários arquivos ou escrever em mais de uma linguagem. Este é o melhor ambiente disponível, pois se assemelha de perto à forma como a maioria dos engenheiros desenvolve. Sujeito à aprovação do entrevistador, você deve ser capaz de:
 
--   Visualizar a interface do usuário em andamento e ver as atualizações ao vivo.
--   Usar o console do navegador para depuração.
--   Usar recursos de IDE como realce de sintaxe, atalhos de teclado, autocompletar, intellisense e extensões para aumentar sua produtividade.
--   Adicionar quaisquer dependências de terceiros necessárias.
+- Visualizar a interface do usuário em andamento e ver as atualizações ao vivo.
+- Usar o console do navegador para depuração.
+- Usar recursos de IDE como realce de sintaxe, atalhos de teclado, autocompletar, intellisense e extensões para aumentar sua produtividade.
+- Adicionar quaisquer dependências de terceiros necessárias.
 
 Sempre escolha usar um IDE se for dada a opção.
 
@@ -34,34 +34,34 @@ Exemplos de IDEs online incluem [JSFiddle](https://jsfiddle.net/), [CodePen](htt
 
 Em certas empresas, você pode ser solicitado a escrever todo o código necessário no quadro branco. Imagine escrever HTML e CSS no quadro sem poder visualizá-lo! Isso pode ser um pesadelo para os candidatos, e grandes empresas de tecnologia como o Google e o Meta/Facebook são conhecidas por fazer isso durante entrevistas presenciais. A maioria das outras empresas geralmente pede que você traga seu próprio laptop e codifique em seu IDE local ou em um editor de código/IDE online em um navegador da web.
 
-* * *
+---
 
 Aqui está um resumo dos diversos ambientes de codificação e o que você pode fazer em cada um deles:
 
-| Ambiente                                                    | Visualizar | Executar Código | Adicionar Dependências de Terceiros |
-| ----------------------------------------------------------- | ---------- | --------------- | ----------------------------------- |
-| Editor de código online                                     | Não        | Situacional     | Normalmente, não                    |
-| IDEs (Ambientes de Desenvolvimento Integrado)               | Sim        | Sim             | Sim                                 |
-| Quadro Branco                                               | Não        | Não             | Não                                 |
+| Ambiente | Visualizar | Executar Código | Adicionar Dependências de Terceiros |
+| --- | --- | --- | --- |
+| Editor de código online | Não | Situacional | Normalmente, não |
+| IDEs (Ambientes de Desenvolvimento Integrado) | Sim | Sim | Sim |
+| Quadro Branco | Não | Não | Não |
 
 ## Dicas Gerais de Codificação
 
--   Esteja familiarizado com os atalhos de teclado úteis do editor, pois o tempo é essencial durante entrevistas e cada tecla pressionada conta. Saiba como:
-    -   Ir para o início/fim da linha.
-    -   Mover linhas para cima/baixo.
-    -   Duplicar uma linha.
-    -   Renomear um símbolo facilmente.
--   Descubra antecipadamente se você estará codificando em seu próprio laptop, em um laptop fornecido a você ou no quadro branco.
-    -   Se você estiver codificando em seu próprio laptop e puder usar seu próprio IDE, certifique-se de que o IDE esteja funcionando corretamente, que o Node.js e o npm estejam instalados corretamente e que você possa executar servidores web locais em `localhost` e acessá-los no seu navegador.
--   Não dependa demais da pré-visualização e execução do código. Isso sugere ao seu entrevistador que você não tem certeza do que digitou e desenvolve por tentativa e erro, o que não é um sinal positivo.
+- Esteja familiarizado com os atalhos de teclado úteis do editor, pois o tempo é essencial durante entrevistas e cada tecla pressionada conta. Saiba como:
+  - Ir para o início/fim da linha.
+  - Mover linhas para cima/baixo.
+  - Duplicar uma linha.
+  - Renomear um símbolo facilmente.
+- Descubra antecipadamente se você estará codificando em seu próprio laptop, em um laptop fornecido a você ou no quadro branco.
+  - Se você estiver codificando em seu próprio laptop e puder usar seu próprio IDE, certifique-se de que o IDE esteja funcionando corretamente, que o Node.js e o npm estejam instalados corretamente e que você possa executar servidores web locais em `localhost` e acessá-los no seu navegador.
+- Não dependa demais da pré-visualização e execução do código. Isso sugere ao seu entrevistador que você não tem certeza do que digitou e desenvolve por tentativa e erro, o que não é um sinal positivo.
 
 ## Dicas Específicas por Tipo
 
 Continue lendo para obter dicas para cada tipo de entrevista de codificação:
 
--   [Codificação Algoritmica](/front-end-interview-guidebook/algoritms)
--   [Codificação JavaScript](/front-end-interview-guidebook/javascript)
--   [Codificação de Interface do Usuário](/front-end-interview-guidebook/user-interface)
+- [Codificação Algoritmica](/front-end-interview-guidebook/algoritms)
+- [Codificação JavaScript](/front-end-interview-guidebook/javascript)
+- [Codificação de Interface do Usuário](/front-end-interview-guidebook/user-interface)
 
 ## Perguntas de Prática
 

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

@@ -5,9 +5,9 @@ description: 准备前端/ Web开发人员面试中的编码问题——了解
 
 编码面试是评估前端工程师的主要方式，可以跨越多轮和多个面试阶段，因此练习编码面试非常重要。 回顾一下，以下是您可能会被问到的三种编码问题类型：
 
--   **算法编码**：解决棘手的算法问题，评估您对数据结构、算法和时间复杂性的理解。
--   **JavaScript编码**：在前端领域中实现与前端开发常用的函数或数据结构相关的JavaScript。
--   **用户界面编码**：使用HTML、CSS和JavaScript构建用户界面（组件、小部件、应用程序），有时甚至使用JavaScript框架。
+- **算法编码**：解决棘手的算法问题，评估您对数据结构、算法和时间复杂性的理解。
+- **JavaScript 编码**：在前端领域中实现与前端开发常用的函数或数据结构相关的 JavaScript。
+- **用户界面编码**：使用 HTML、CSS 和 JavaScript 构建用户界面（组件、小部件、应用程序），有时甚至使用 JavaScript 框架。
 
 ## 编码环境
 
@@ -15,57 +15,57 @@ description: 准备前端/ Web开发人员面试中的编码问题——了解
 
 ### 在线基本代码编辑器
 
-您将得到一个基于浏览器的代码编辑器的URL。 该编辑器具有实时协作功能，或者您将被要求共享屏幕。 这些基本代码编辑器通常只有一个窗格，因为问题不需要使用多种语言来完成，例如算法/JavaScript编码问题。 您可能被允许或不被允许执行代码。 在线基本代码编辑器的示例是[CoderPad](https://coderpad.io/)。
+您将得到一个基于浏览器的代码编辑器的 URL。 该编辑器具有实时协作功能，或者您将被要求共享屏幕。 这些基本代码编辑器通常只有一个窗格，因为问题不需要使用多种语言来完成，例如算法/JavaScript 编码问题。 您可能被允许或不被允许执行代码。 在线基本代码编辑器的示例是[CoderPad](https://coderpad.io/)。
 
 ### 集成开发环境（IDE）
 
-基本代码编辑器和IDE之间的区别在于IDE允许在多个文件之间切换。 它们可以是您笔记本电脑上的原生应用程序，也可以在浏览器中运行。 通常情况下，您会被要求使用IDE来构建用户界面，并且需要使用多个文件或键入不止一种语言。 这是可用的最佳环境，因为它与大多数工程师开发的方式非常相似。 在面试官的批准下，您应该能够：
+基本代码编辑器和 IDE 之间的区别在于 IDE 允许在多个文件之间切换。 它们可以是您笔记本电脑上的原生应用程序，也可以在浏览器中运行。 通常情况下，您会被要求使用 IDE 来构建用户界面，并且需要使用多个文件或键入不止一种语言。 这是可用的最佳环境，因为它与大多数工程师开发的方式非常相似。 在面试官的批准下，您应该能够：
 
--   预览正在进行的用户界面并实时查看更新。
--   使用浏览器控制台进行调试。
--   使用IDE功能（如语法突出显示、键盘快捷方式、自动完成、智能感知、扩展）提高生产力。
--   添加任何必要的第三方依赖项。
+- 预览正在进行的用户界面并实时查看更新。
+- 使用浏览器控制台进行调试。
+- 使用 IDE 功能（如语法突出显示、键盘快捷方式、自动完成、智能感知、扩展）提高生产力。
+- 添加任何必要的第三方依赖项。
 
-始终选择使用IDE如果您被赋予权利选择。
+始终选择使用 IDE 如果您被赋予权利选择。
 
-在线IDE的示例包括[JSFiddle](https://jsfiddle.net/)、[CodePen](https://codepen.io/)、[CodeSandbox](https://codesandbox.io/)和[StackBlitz](https://stackblitz.com/)。
+在线 IDE 的示例包括[JSFiddle](https://jsfiddle.net/)、[CodePen](https://codepen.io/)、[CodeSandbox](https://codesandbox.io/)和[StackBlitz](https://stackblitz.com/)。
 
 ### 白板
 
-在某些公司，您可能会被要求在白板上编写所有必需的代码。 想象一下没有办法预览在白板上编写的HTML和CSS！ 这是候选人的噩梦，像谷歌和Meta / Facebook这样的大型科技公司在面试时已知会这样做。 大多数其他公司要么让您带自己的笔记本电脑，您可以在本地IDE或Web浏览器中的在线代码编辑器/ IDE中编码。
+在某些公司，您可能会被要求在白板上编写所有必需的代码。 想象一下没有办法预览在白板上编写的 HTML 和 CSS！ 这是候选人的噩梦，像谷歌和 Meta / Facebook 这样的大型科技公司在面试时已知会这样做。 大多数其他公司要么让您带自己的笔记本电脑，您可以在本地 IDE 或 Web 浏览器中的在线代码编辑器/ IDE 中编码。
 
-* * *
+---
 
 下面是各种编码环境的摘要和您可以采取的措施：
 
-| 环境                | 预览     | 执行代码        | 添加第三方依赖                   |
-| ----------------- | ------ | ----------- | ------------------------- |
-| 在线代码编辑器           | 否      | 有时          | 通常否                       |
-| IDE               | 是      | 是           | 是                         |
-| 白板                | 否      | 否           | 否                         |
+| 环境           | 预览 | 执行代码 | 添加第三方依赖 |
+| -------------- | ---- | -------- | -------------- |
+| 在线代码编辑器 | 否   | 有时     | 通常否         |
+| IDE            | 是   | 是       | 是             |
+| 白板           | 否   | 否       | 否             |
 
 ## 通用编码提示
 
--   熟悉有用的编辑器键盘快捷键，因为在面试期间时间非常重要，每个按键都很重要。 知道如何：
-    -   跳到行首/行尾。
-    -   上下移动行。
-    -   复制行。
-    -   更改符号（变量）名称。
--   提前了解您将在自己的笔记本电脑、给予您的笔记本电脑还是白板上编码。
-    -   如果您将在自己的笔记本电脑上进行编码，并且可以使用自己的IDE，请确保IDE正常运行，正确安装了Node.js和npm，并且可以在localhost上运行本地Web服务器并在您的浏览器中访问它们。
--   不要过分依赖代码的预览和执行。 这向您的面试官表明，您不确定自己输入了什么，并进行尝试和错误开发，这不是积极的信号。
+- 熟悉有用的编辑器键盘快捷键，因为在面试期间时间非常重要，每个按键都很重要。 知道如何：
+  - 跳到行首/行尾。
+  - 上下移动行。
+  - 复制行。
+  - 更改符号（变量）名称。
+- 提前了解您将在自己的笔记本电脑、给予您的笔记本电脑还是白板上编码。
+  - 如果您将在自己的笔记本电脑上进行编码，并且可以使用自己的 IDE，请确保 IDE 正常运行，正确安装了 Node.js 和 npm，并且可以在 localhost 上运行本地 Web 服务器并在您的浏览器中访问它们。
+- 不要过分依赖代码的预览和执行。 这向您的面试官表明，您不确定自己输入了什么，并进行尝试和错误开发，这不是积极的信号。
 
 ## 特定类型的提示
 
 请继续阅读每种编码面试类型的提示：
 
--   [算法编码](/front-end-interview-guidebook/algorithms)
--   [JavaScript编码](/front-end-interview-guidebook/javascript)
--   [用户界面编码](/front-end-interview-guidebook/user-interface)
+- [算法编码](/front-end-interview-guidebook/algorithms)
+- [JavaScript 编码](/front-end-interview-guidebook/javascript)
+- [用户界面编码](/front-end-interview-guidebook/user-interface)
 
 ## 练习问题
 
-GreatFrontEnd有一个长列表的[编码问题](/prepare/coding)，您可以练习并花时间检查它们。
+GreatFrontEnd 有一个长列表的[编码问题](/prepare/coding)，您可以练习并花时间检查它们。
 
 请注意，我们在某些问题中特意保持模糊，并没有提出完整的要求。 这是为了训练您提前思考并考虑在解决方案时可能需要注意哪些可能的事项。
 

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

@@ -16,9 +16,9 @@ Exato, você provavelmente precisará utilizar Apis específicas do navegador/Ja
 
 Pode parecer redundante implementar classes/métodos padrão quando eles já fazem parte da linguagem. No entanto, inconsistências entre navegadores costumavam ser um problema comum, e algumas APIs da linguagem não eram encontradas em navegadores mais antigos. Portanto, os desenvolvedores tiveram que recorrer ao polyfilling, que é o ato de fornecer funcionalidade moderna em navegadores mais antigos que não a suportam nativamente, implementando essas APIs em JavaScript baixado. Ser capaz de implementar essas funções nativas também demonstra um bom entendimento dos fundamentos do desenvolvimento front-end.
 
--   Métodos `Array`: [`Array.prototype.map`](/questions/javascript/array-map), [`Array.prototype.reduce`](/questions/javascript/array-reduce), [`Array.prototype.filter`](/questions/javascript/array-filter).
--   `Promise` e outras funções `Promise`: [`Promise.all`](/questions/javascript/promise-all), [`Promise.any`](/questions/javascript/promise-any).
--   Métodos DOM: [`document.getElementsByTagName`](/questions/javascript/get-elements-by-tag-name), [`document.getElementsByClassName`](/questions/javascript/get-elements-by-class-name).
+- Métodos `Array`: [`Array.prototype.map`](/questions/javascript/array-map), [`Array.prototype.reduce`](/questions/javascript/array-reduce), [`Array.prototype.filter`](/questions/javascript/array-filter).
+- `Promise` e outras funções `Promise`: [`Promise.all`](/questions/javascript/promise-all), [`Promise.any`](/questions/javascript/promise-any).
+- Métodos DOM: [`document.getElementsByTagName`](/questions/javascript/get-elements-by-tag-name), [`document.getElementsByClassName`](/questions/javascript/get-elements-by-class-name).
 
 Há mais nessas funções do que aparenta à primeira vista. Vamos pegar o inocente `Array.prototype.map`, por exemplo. Você está ciente de que:
 
@@ -32,14 +32,14 @@ Sua implementação não precisa lidar com todos esses casos, especialmente o da
 
 Essas funções/classes são comumente necessárias ao construir software com JavaScript, mas não fazem parte da linguagem padrão (por enquanto).
 
--   Funções Lodash/Underscore: [`debounce`](/questions/javascript/debounce), [`throttle`](/questions/javascript/throttle), [`flatten`](/questions/javascript/flatten), [`curry`](/questions/javascript/curry), [`cloneDeep`](/questions/javascript/deep-clone).
--   Métodos jQuery: [`jQuery.css`](/questions/javascript/jquery-css), [`jQuery.toggleClass`](/questions/javascript/jquery-class-manipulation).
--   Bibliotecas populares:
-    -   [`classnames`](/questions/javascript/classnames)
-    -   `test`/`expect` funções de testes de frameworks como [Jest](https://jestjs.io/)/[Mocha](https://mochajs.org/)
-    -   [`Emitter`](/questions/javascript/event-emitter) (que existe como parte do Node.js e muitas bibliotecas de terceiros)
-    -   [Immutable.js](https://immutable-js.com/)
-    -   [Backbone.js](https://backbonejs.org/)
+- Funções Lodash/Underscore: [`debounce`](/questions/javascript/debounce), [`throttle`](/questions/javascript/throttle), [`flatten`](/questions/javascript/flatten), [`curry`](/questions/javascript/curry), [`cloneDeep`](/questions/javascript/deep-clone).
+- Métodos jQuery: [`jQuery.css`](/questions/javascript/jquery-css), [`jQuery.toggleClass`](/questions/javascript/jquery-class-manipulation).
+- Bibliotecas populares:
+  - [`classnames`](/questions/javascript/classnames)
+  - `test`/`expect` funções de testes de frameworks como [Jest](https://jestjs.io/)/[Mocha](https://mochajs.org/)
+  - [`Emitter`](/questions/javascript/event-emitter) (que existe como parte do Node.js e muitas bibliotecas de terceiros)
+  - [Immutable.js](https://immutable-js.com/)
+  - [Backbone.js](https://backbonejs.org/)
 
 Se você der uma olhada no código-fonte dessas bibliotecas, poderá encontrar algumas das implementações bastante complexas. Isso ocorre porque existem muitos casos de uso do mundo real obscuros que a biblioteca precisa suportar. Semelhante às funções padrão, você não é esperado para lidar com todos esses casos extremos durante uma entrevista, mas ganha pontos por reconhecê-los.
 
@@ -48,14 +48,14 @@ Se você der uma olhada no código-fonte dessas bibliotecas, poderá encontrar a
 Entrevistas de codificação em JavaScript compartilham muitas semelhanças com entrevistas de codificação algorítmica. Em geral, você deve:
 
 1.  Descubra em qual plataforma você está codificando e familiarize-se com o ambiente de codificação:
-    -   Os atalhos de editor suportados.
-    -   Se você pode executar código.
-    -   Se você pode instalar dependências de terceiros.
+    - Os atalhos de editor suportados.
+    - Se você pode executar código.
+    - Se você pode instalar dependências de terceiros.
 2.  Faça sua apresentação pessoal em menos de um minuto. A menos que seja solicitado, não leve mais tempo do que isso, caso contrário, você pode não ter tempo suficiente para programar.
 3.  Faça perguntas de esclarecimento ao receber a pergunta. Esclareça o seguinte:
-    -   Você pode usar a sintaxe mais recente do JavaScript (ES2016 e posteriores)?
-    -   Se o código se destina a ser executado no navegador ou no servidor (por exemplo, Node.js).
-    -   O suporte do navegador é importante, pois isso afetará as APIs do navegador que você pode utilizar.
+    - Você pode usar a sintaxe mais recente do JavaScript (ES2016 e posteriores)?
+    - Se o código se destina a ser executado no navegador ou no servidor (por exemplo, Node.js).
+    - O suporte do navegador é importante, pois isso afetará as APIs do navegador que você pode utilizar.
 4.  Proponha uma solução ao seu entrevistador. Ao contrário de entrevistas de programação convencionais, o foco das entrevistas de codificação em JavaScript geralmente não está em estruturas de dados complexas e algoritmos. É possível e provavelmente você pode ir direto para a solução ideal com a melhor escolha de estruturas de dados e algoritmos.
 5.  Codifique sua solução e explique o código ao seu entrevistador enquanto você está programando.
 6.  Após codificar, leia seu código uma vez e tente identificar erros básicos, como erros de digitação, uso de variáveis antes de inicializá-las, uso incorreto de APIs, etc.
@@ -71,48 +71,48 @@ Entrevistas de codificação em JavaScript compartilham muitas semelhanças com
 
 ## Conceitos Importantes
 
-| Categoria                 | Tópicos Importantes                                                                                                                                                                                                                                                                                                                                                            |
-| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Estruturas de Dados       | Arrays, Maps, Stacks, Trees, Sets                                                                                                                                                                                                                                                                                                                                              |
-| Algoritmos                | Busca Binária, Busca em Largura (Breadth-first Search), Busca em Profundidade (Depth-first Search), Recursão                                                                                                                                                                                                                                                                   |
-| Linguagem JavaScript      | Tipos de dados (verificação de tipos, coerção de tipos), Escopo, Closures, Callbacks, Funcionamento da palavra-chave `this`, Programação Orientada a Objetos em JavaScript (protótipos, classes, métodos), Funções de seta vs. funções normais, Invocando funções via `Function.prototype.apply()`/`Function.prototype.call()`, Promises, Manipulação de argumentos variádicos |
-| DOM                       | Navegação no DOM, Criação no DOM, Manipulação no DOM, Acesso a propriedades de elementos/nós, Delegação de Eventos                                                                                                                                                                                                                                                             |
-| APIs em Tempo de Execução | Temporizador (`setTimeout`, `setInterval`)                                                                                                                                                                                                                                                                                                                                     |
+| Categoria | Tópicos Importantes |
+| --- | --- |
+| Estruturas de Dados | Arrays, Maps, Stacks, Trees, Sets |
+| Algoritmos | Busca Binária, Busca em Largura (Breadth-first Search), Busca em Profundidade (Depth-first Search), Recursão |
+| Linguagem JavaScript | Tipos de dados (verificação de tipos, coerção de tipos), Escopo, Closures, Callbacks, Funcionamento da palavra-chave `this`, Programação Orientada a Objetos em JavaScript (protótipos, classes, métodos), Funções de seta vs. funções normais, Invocando funções via `Function.prototype.apply()`/`Function.prototype.call()`, Promises, Manipulação de argumentos variádicos |
+| DOM | Navegação no DOM, Criação no DOM, Manipulação no DOM, Acesso a propriedades de elementos/nós, Delegação de Eventos |
+| APIs em Tempo de Execução | Temporizador (`setTimeout`, `setInterval`) |
 
 ## Critérios de Avaliação para Entrevistas de Codificação em JavaScript
 
 As entrevistas de codificação em JavaScript são semelhantes às entrevistas de codificação algorítmica, e a abordagem para essas entrevistas deve ser semelhante. Naturalmente, haverá alguma sobreposição com entrevistas de codificação algorítmica no que diz respeito à avaliação dos candidatos durante entrevistas de codificação em JavaScript.
 
--   **Resolução de Problemas**: Utilize uma abordagem sistemática e lógica para compreender e resolver um problema. Divida o problema em problemas menores e independentes. Avalie diferentes abordagens e suas compensações (tradeoffs).
--   **Fundamentos de Engenharia de Software**: Familiaridade com estruturas de dados, algoritmos, análise de complexidade de tempo de execução, uso de padrões de design e elaboração de soluções com abstrações limpas.
--   **Expertise no Domínio**: Compreensão do domínio de front-end e das linguagens relevantes: Navegador (DOM e APIs DOM), HTML, CSS, JavaScript, Desempenho.
--   **Comunicação**: Fazer perguntas para esclarecer detalhes e explicar claramente a abordagem e as considerações.
--   **Verificação**: Identificar vários cenários para testar o código, incluindo casos extremos. Seja capaz de diagnosticar e corrigir quaisquer problemas que surjam.
+- **Resolução de Problemas**: Utilize uma abordagem sistemática e lógica para compreender e resolver um problema. Divida o problema em problemas menores e independentes. Avalie diferentes abordagens e suas compensações (tradeoffs).
+- **Fundamentos de Engenharia de Software**: Familiaridade com estruturas de dados, algoritmos, análise de complexidade de tempo de execução, uso de padrões de design e elaboração de soluções com abstrações limpas.
+- **Expertise no Domínio**: Compreensão do domínio de front-end e das linguagens relevantes: Navegador (DOM e APIs DOM), HTML, CSS, JavaScript, Desempenho.
+- **Comunicação**: Fazer perguntas para esclarecer detalhes e explicar claramente a abordagem e as considerações.
+- **Verificação**: Identificar vários cenários para testar o código, incluindo casos extremos. Seja capaz de diagnosticar e corrigir quaisquer problemas que surjam.
 
 ## Dicas Úteis
 
--   **Pensamento Positivo**. A biblioteca padrão do JavaScript não possui algumas estruturas de dados e algoritmos úteis, como fila, heap, pesquisa binária, que podem facilitar sua vida durante entrevistas de codificação em JavaScript. No entanto, você pode perguntar ao entrevistador se pode considerar que uma determinada estrutura de dados/algoritmo existe e usá-la diretamente em sua solução sem implementá-la.
--   **Funções Puras**. Aim to write pure functions which have the benefit of reusability and modularity, aka functions which don't rely on state outside of the function and doesn't cause side effects.
--   **Escolha as estruturas de dados sabiamente.** Preste atenção à escolha das estruturas de dados e esteja ciente das complexidades temporais do código. Esteja familiarizado com as complexidades de tempo/espaço das operações básicas de Array, Object, Set e Map em JavaScript, caso deseje usá-las em sua solução. Alguns desses tempos/complexidades de espaço podem variar entre diferentes linguagens de programação. É importante estar ciente das particularidades da linguagem que você está usando para garantir que suas escolhas sejam apropriadas para o contexto específico. Não escreva código que seja executado em O(n<sup>2</sup>) se ele puder ser executado em O(n) com o uso de hash mapas.
--   **`this` importa**. Se uma função aceita uma função de retorno de chamada como parâmetro, considere como a variável `this` deve se comportar. Para muitas funções internas, `this` é fornecido como um dos argumentos com os quais a função de retorno de chamada é invocada.
--   **Mutação dentro de funções de retorno de chamada.** Cuidado com as funções de retorno de chamada que realizam mutações na estrutura de dados na qual estão operando. Provavelmente, você não precisa lidar com esse caso durante entrevistas, mas deve mencionar explicitamente esses casos se forem relevantes.
--   **Casos limites de recursão**.
-    -   Se você identificou que resolver a pergunta requer recursão, pergunte sobre o tamanho da entrada e como lidar com o caso de estouro de pilha de recursão. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
-    -   Estruturas de dados profundamente aninhadas podem ter referências recursivas a si mesmas, o que torna certas operações, como serialização, muito mais complexas. Pergunte ao entrevistador se você precisa lidar com tais casos. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
+- **Pensamento Positivo**. A biblioteca padrão do JavaScript não possui algumas estruturas de dados e algoritmos úteis, como fila, heap, pesquisa binária, que podem facilitar sua vida durante entrevistas de codificação em JavaScript. No entanto, você pode perguntar ao entrevistador se pode considerar que uma determinada estrutura de dados/algoritmo existe e usá-la diretamente em sua solução sem implementá-la.
+- **Funções Puras**. Aim to write pure functions which have the benefit of reusability and modularity, aka functions which don't rely on state outside of the function and doesn't cause side effects.
+- **Escolha as estruturas de dados sabiamente.** Preste atenção à escolha das estruturas de dados e esteja ciente das complexidades temporais do código. Esteja familiarizado com as complexidades de tempo/espaço das operações básicas de Array, Object, Set e Map em JavaScript, caso deseje usá-las em sua solução. Alguns desses tempos/complexidades de espaço podem variar entre diferentes linguagens de programação. É importante estar ciente das particularidades da linguagem que você está usando para garantir que suas escolhas sejam apropriadas para o contexto específico. Não escreva código que seja executado em O(n<sup>2</sup>) se ele puder ser executado em O(n) com o uso de hash mapas.
+- **`this` importa**. Se uma função aceita uma função de retorno de chamada como parâmetro, considere como a variável `this` deve se comportar. Para muitas funções internas, `this` é fornecido como um dos argumentos com os quais a função de retorno de chamada é invocada.
+- **Mutação dentro de funções de retorno de chamada.** Cuidado com as funções de retorno de chamada que realizam mutações na estrutura de dados na qual estão operando. Provavelmente, você não precisa lidar com esse caso durante entrevistas, mas deve mencionar explicitamente esses casos se forem relevantes.
+- **Casos limites de recursão**.
+  - Se você identificou que resolver a pergunta requer recursão, pergunte sobre o tamanho da entrada e como lidar com o caso de estouro de pilha de recursão. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
+  - Estruturas de dados profundamente aninhadas podem ter referências recursivas a si mesmas, o que torna certas operações, como serialização, muito mais complexas. Pergunte ao entrevistador se você precisa lidar com tais casos. Normalmente, você não precisará lidar com isso, mas levantar essa questão é um bom sinal.
 
 ## **Perguntas sobre Melhores Práticas**
 
 Pela minha experiência, as melhores perguntas de entrevista de codificação em JavaScript para praticar, conforme determinado pela frequência e pelos conceitos importantes abordados são:
 
--   [Debounce](/questions/javascript/debounce)
--   [Throttle](/questions/javascript/debounce)
--   [Array.prototype.filter](/questions/javascript/array-filter)
--   [Promise.all](/questions/javascript/promise-all)
--   [Curry](/questions/javascript/curry)
--   [Flatten](/questions/javascript/flatten)
--   [getElementsByTagName](/questions/javascript/get-elements-by-class-name)
--   [Deep Clone](/questions/javascript/deep-clone)
--   [Seleção de Dados](/questions/javascript/data-seletion)
+- [Debounce](/questions/javascript/debounce)
+- [Throttle](/questions/javascript/debounce)
+- [Array.prototype.filter](/questions/javascript/array-filter)
+- [Promise.all](/questions/javascript/promise-all)
+- [Curry](/questions/javascript/curry)
+- [Flatten](/questions/javascript/flatten)
+- [getElementsByTagName](/questions/javascript/get-elements-by-class-name)
+- [Deep Clone](/questions/javascript/deep-clone)
+- [Seleção de Dados](/questions/javascript/data-seletion)
 
 A GreatFrontEnd possui uma [lista abrangente de perguntas de codificação JavaScript](/questions/js/coding/utilities) que você pode praticar. Também existem casos de testes automatizados que você pode executar em seu código para verificar a correção e soluções escritas por ex-engenheiros sênior da FAANG.
 

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

@@ -3,117 +3,117 @@ title: 前端面试JavaScript问题——如何准备
 description: 为前端/网站开发人员面试准备JavaScript问题的指南——了解的概念、面试规则和70多个重要的练习问题。
 ---
 
-编写JavaScript编码问题与编写算法编码问题的不同之处在于前者通常特定于前端领域，完成它们最有意义的是使用JavaScript（或[TypeScript](https://www.typescriptlang.org/)）。 您还可能需要使用浏览器/JavaScript特定的API，或利用HTML/CSS/JavaScript知识。 您还可能需要使用浏览器/JavaScript特定的API，或利用HTML/CSS/JavaScript知识。
+编写 JavaScript 编码问题与编写算法编码问题的不同之处在于前者通常特定于前端领域，完成它们最有意义的是使用 JavaScript（或[TypeScript](https://www.typescriptlang.org/)）。 您还可能需要使用浏览器/JavaScript 特定的 API，或利用 HTML/CSS/JavaScript 知识。 您还可能需要使用浏览器/JavaScript 特定的 API，或利用 HTML/CSS/JavaScript 知识。
 
-这些JavaScript编码问题往往具有实用价值，并且可以属于以下一类或多类：
+这些 JavaScript 编码问题往往具有实用价值，并且可以属于以下一类或多类：
 
-1.  在JavaScript语言中实现标准内置类或方法。
+1.  在 JavaScript 语言中实现标准内置类或方法。
 2.  实现在流行的库中常见的实用函数/类。
 
 ## 示例
 
-### JavaScript标准内置类/方法
+### JavaScript 标准内置类/方法
 
-当他们已经成为语言的一部分时，实现标准类/方法可能看起来有些多余。 然而，浏览器不一致曾经是一个普遍的问题，并且一些语言API在旧浏览器中找不到。 当他们已经成为语言的一部分时，实现标准类/方法可能看起来有些多余。 然而，浏览器不一致曾经是一个普遍的问题，并且一些语言API在旧浏览器中找不到。 因此，开发人员不得不通过在下载的JavaScript中实现这些API来进行填充。 能够实现这些本地函数还显示了对前端基础知识的良好理解。 能够实现这些本地函数还显示了对前端基础知识的良好理解。
+当他们已经成为语言的一部分时，实现标准类/方法可能看起来有些多余。 然而，浏览器不一致曾经是一个普遍的问题，并且一些语言 API 在旧浏览器中找不到。 当他们已经成为语言的一部分时，实现标准类/方法可能看起来有些多余。 然而，浏览器不一致曾经是一个普遍的问题，并且一些语言 API 在旧浏览器中找不到。 因此，开发人员不得不通过在下载的 JavaScript 中实现这些 API 来进行填充。 能够实现这些本地函数还显示了对前端基础知识的良好理解。 能够实现这些本地函数还显示了对前端基础知识的良好理解。
 
--   `Array` 方法：[`Array.prototype.map`](/questions/javascript/array-map)，[`Array.prototype.reduce`](/questions/javascript/array-reduce)，[`Array.prototype.filter`](/questions/javascript/array-filter)。
--   `Promise` 和其他`Promise`相关函数：[`Promise.all`](/questions/javascript/promise-all)，[`Promise.any`](/questions/javascript/promise-any)。
--   DOM方法：[`document.getElementsByTagName`](/questions/javascript/get-elements-by-tag-name)，[`document.getElementsByClassName`](/questions/javascript/get-elements-by-class-name)。
+- `Array` 方法：[`Array.prototype.map`](/questions/javascript/array-map)，[`Array.prototype.reduce`](/questions/javascript/array-reduce)，[`Array.prototype.filter`](/questions/javascript/array-filter)。
+- `Promise` 和其他`Promise`相关函数：[`Promise.all`](/questions/javascript/promise-all)，[`Promise.any`](/questions/javascript/promise-any)。
+- DOM 方法：[`document.getElementsByTagName`](/questions/javascript/get-elements-by-tag-name)，[`document.getElementsByClassName`](/questions/javascript/get-elements-by-class-name)。
 
 这些函数远非显而易见的那么简单。 这些函数远非显而易见的那么简单。 让我们以无辜的`Array.prototype.map`为例。 您是否知道： 您是否知道：
 
-1.  它传递4个参数给回调函数，包括 `index` 和 `this` ？
+1.  它传递 4 个参数给回调函数，包括 `index` 和 `this` ？
 2.  它保留稀疏数组中的“空”，即 `[1, 2, , 4].map(val => val * val) === [1, 4, , 16]`。
-3.  `map`处理的元素范围在第一个调用_callbackfn_之前设置。 在调用map之后附加到数组中的元素将不会被_callbackfn_访问。 如果更改数组的现有元素，则将它们的值作为传递给_callbackfn_的值在`map`访问它们时。 来源：[Array.prototype.map ECMAScript说明]（https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.map）
+3.  `map`处理的元素范围在第一个调用*callbackfn*之前设置。 在调用 map 之后附加到数组中的元素将不会被*callbackfn*访问。 如果更改数组的现有元素，则将它们的值作为传递给*callbackfn*的值在`map`访问它们时。 来源：[Array.prototype.map ECMAScript 说明]（https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.map）
 
 您的实施不必处理所有这些情况，特别是数组突变的情况。 但是，如果您提到了这些情况，那么这是一个积极的信号。 您的实现越接近规范，您就会显得更加资深/有经验。
 
 ### 来自流行库的实用函数/类
 
-这些函数/类在使用JavaScript构建软件时通常需要，但不在标准语言中（目前）。
+这些函数/类在使用 JavaScript 构建软件时通常需要，但不在标准语言中（目前）。
 
--   Lodash/Underscore函数：[`debounce`](/questions/javascript/debounce)，[`throttle`](/questions/javascript/throttle)，[`flatten`](/questions/javascript/flatten)，[`curry`](/questions/javascript/curry)，[`cloneDeep`](/questions/javascript/deep-clone)。
--   jQuery方法：[`jQuery.css`](/questions/javascript/jquery-css)，[`jQuery.toggleClass`](/questions/javascript/jquery-class-manipulation)。
--   流行的库：
-    -   [`classnames`](/questions/javascript/classnames)
-    -   测试框架（如[Jest](https://jestjs.io/) / [Mocha](https://mochajs.org/)）中的“test”/“expect”函数。
-    -   [`Emitter`](/questions/javascript/event-emitter)（它存在于Node.js和许多第三方库中）
-    -   [Immutable.js](https://immutable-js.com/)
-    -   [Backbone.js](https://backbonejs.org/)
+- Lodash/Underscore 函数：[`debounce`](/questions/javascript/debounce)，[`throttle`](/questions/javascript/throttle)，[`flatten`](/questions/javascript/flatten)，[`curry`](/questions/javascript/curry)，[`cloneDeep`](/questions/javascript/deep-clone)。
+- jQuery 方法：[`jQuery.css`](/questions/javascript/jquery-css)，[`jQuery.toggleClass`](/questions/javascript/jquery-class-manipulation)。
+- 流行的库：
+  - [`classnames`](/questions/javascript/classnames)
+  - 测试框架（如[Jest](https://jestjs.io/) / [Mocha](https://mochajs.org/)）中的“test”/“expect”函数。
+  - [`Emitter`](/questions/javascript/event-emitter)（它存在于 Node.js 和许多第三方库中）
+  - [Immutable.js](https://immutable-js.com/)
+  - [Backbone.js](https://backbonejs.org/)
 
 如果您查看这些库的源代码，您可能会发现其中一些实现非常复杂。 这是因为该库必须支持许多晦涩的真实世界用例。 与标准函数类似，您不需要在面试设置中处理所有这些边缘情况，但是您获得了调用它们的点。
 
-## JavaScript编码面试期间要做的事情
+## JavaScript 编码面试期间要做的事情
 
-JavaScript编码面试与算法编码面试有许多相似之处。 一般来说，你应该：
+JavaScript 编码面试与算法编码面试有许多相似之处。 一般来说，你应该：
 
 1.  查找您正在编码的平台，并熟悉编码环境：
-    -   支持的编辑器快捷键。
-    -   您是否可以执行代码。
-    -   您是否可以安装第三方依赖项。
-2.  1分钟内进行自我介绍。 除非要求，否则不要花费更长的时间，否则您可能没有足够的时间编码。
+    - 支持的编辑器快捷键。
+    - 您是否可以执行代码。
+    - 您是否可以安装第三方依赖项。
+2.  1 分钟内进行自我介绍。 除非要求，否则不要花费更长的时间，否则您可能没有足够的时间编码。
 3.  在收到问题后询问澄清性问题。 澄清以下内容： 澄清以下内容：
-    -   您可以使用更新的JavaScript语法（ES2016及更高版本）吗？
-    -   代码是要运行在浏览器上还是服务器上（例如Node.js）。
-    -   浏览器支持，因为这将影响您可以使用的浏览器API。
-4.  向面试官提出解决方案。 与编码面试不同，JavaScript编码面试的重点通常不在复杂的数据结构和算法上。 通过最佳的数据结构和算法选择，可能可以直接跳转到最佳解决方案。
+    - 您可以使用更新的 JavaScript 语法（ES2016 及更高版本）吗？
+    - 代码是要运行在浏览器上还是服务器上（例如 Node.js）。
+    - 浏览器支持，因为这将影响您可以使用的浏览器 API。
+4.  向面试官提出解决方案。 与编码面试不同，JavaScript 编码面试的重点通常不在复杂的数据结构和算法上。 通过最佳的数据结构和算法选择，可能可以直接跳转到最佳解决方案。
 5.  编写解决方案并在编码时向面试官解释您的代码。
-6.  编码后，一次阅读您的代码，尝试检测基本错误，例如拼写错误，在初始化变量之前使用变量，不正确使用API等。
+6.  编码后，一次阅读您的代码，尝试检测基本错误，例如拼写错误，在初始化变量之前使用变量，不正确使用 API 等。
 7.  概述一些基本测试用例和一些边缘情况。 使用这些情况测试您的代码，并确定您的代码是否通过了它们。 如果失败，请调试问题并修复它们。
 8.  可选：如果涉及算法优化和智能数据结构选择，则解释时间/空间复杂度。
 9.  解释您所做出的任何权衡、您明确未处理的案例以及如果您有更多时间可以改进代码的方法。
 10. 面试可能不会在这里结束，面试官可能会有对此问题的跟进问题或给您提供另一个问题。 要为它们做好准备。
 
-## JavaScript编码面试规则
+## JavaScript 编码面试规则
 
-1.  通过参考下面的“重要概念”熟悉HTML、CSS、JavaScript和DOM概念。 [测验部分](/front-end-interview-guidebook/quiz) 也可以是一个好的开始，因为您可能会以测验问题的形式被问到这些概念。
-2.  选择[学习计划](/get-started)并练习所选学习计划推荐的[JavaScript编码问题](/questions/js/coding/utilities)。 在做问题的同时，也可以学习某个主题。
+1.  通过参考下面的“重要概念”熟悉 HTML、CSS、JavaScript 和 DOM 概念。 [测验部分](/front-end-interview-guidebook/quiz) 也可以是一个好的开始，因为您可能会以测验问题的形式被问到这些概念。
+2.  选择[学习计划](/get-started)并练习所选学习计划推荐的[JavaScript 编码问题](/questions/js/coding/utilities)。 在做问题的同时，也可以学习某个主题。
 
 ## 重要概念
 
-| 类别           | 重要主题                                                                                                                                            |
-| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| 数据结构         | 数组、地图、堆栈、树、套装                                                                                                                                   |
-| 算法           | 二进制搜索、广度优先搜索、深度优先搜索、递归                                                                                                                          |
-| JavaScript语言 | 数据类型（检查类型、类型强制转换）、范围、闭合、回调、如何使用此处关键字、面向对象编程（原型、类、方法），箭头函数与普通函数、通过`Function.prototype.apply()` / `Function.prototype.call()`调用函数，`Promise`，处理多参数 |
-| DOM          | DOM遍历、DOM创建、DOM操作、访问元素/节点属性、事件委托                                                                                                                |
-| 运行时API       | 计时器（`setTimeout`、`setInterval`）                                                                                                                 |
+| 类别 | 重要主题 |
+| --- | --- |
+| 数据结构 | 数组、地图、堆栈、树、套装 |
+| 算法 | 二进制搜索、广度优先搜索、深度优先搜索、递归 |
+| JavaScript 语言 | 数据类型（检查类型、类型强制转换）、范围、闭合、回调、如何使用此处关键字、面向对象编程（原型、类、方法），箭头函数与普通函数、通过`Function.prototype.apply()` / `Function.prototype.call()`调用函数，`Promise`，处理多参数 |
+| DOM | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托 |
+| 运行时 API | 计时器（`setTimeout`、`setInterval`） |
 
-## 如何准备JavaScript编码面试
+## 如何准备 JavaScript 编码面试
 
-JavaScript编码面试类似于算法编码面试，应该采用相似的方法。 自然地，JavaScript编码面试与评估候选人的方式在某些方面与算法编码面试重叠。
+JavaScript 编码面试类似于算法编码面试，应该采用相似的方法。 自然地，JavaScript 编码面试与评估候选人的方式在某些方面与算法编码面试重叠。
 
--   **问题解决**: 有系统和逻辑的方法来理解和解决问题。 将问题分解为较小的独立问题。 评估不同的方法及其权衡。
--   **软件工程基础**: 熟悉数据结构、算法、运行时复杂度分析、使用设计模式、使用干净的抽象设计解决方案。
--   **领域专业知识**: 理解前端领域和相关语言：浏览器（DOM和DOM API）、HTML、CSS、JavaScript和性能。
--   **沟通**: 询问澄清细节并清楚地解释自己的方法和考虑因素。
--   **验证**: 识别各种要测试代码的方案，包括边缘情况。 能够诊断并修复出现的任何问题。
+- **问题解决**: 有系统和逻辑的方法来理解和解决问题。 将问题分解为较小的独立问题。 评估不同的方法及其权衡。
+- **软件工程基础**: 熟悉数据结构、算法、运行时复杂度分析、使用设计模式、使用干净的抽象设计解决方案。
+- **领域专业知识**: 理解前端领域和相关语言：浏览器（DOM 和 DOM API）、HTML、CSS、JavaScript 和性能。
+- **沟通**: 询问澄清细节并清楚地解释自己的方法和考虑因素。
+- **验证**: 识别各种要测试代码的方案，包括边缘情况。 能够诊断并修复出现的任何问题。
 
 ## 有用的提示
 
--   **虚构的想法**。 JavaScript的标准库没有一些有用的数据结构和算法，例如队列、堆、二分搜索，这可以使您在JavaScript编码面试期间更轻松。 然而，您可以询问面试官是否可以假装这样的数据结构/算法存在，并直接在解决方案中使用它，而无需实现它。
--   **纯函数**。 编写纯函数，这些函数具有可重用和可插入性的好处，即函数不依赖于函数外的状态，并且不会产生副作用。
--   **明智地选择数据结构**。注意您选择数据结构的选择，并了解代码的时间复杂度。 如果要在解决方案中使用基本JavaScript数组、对象、集合、映射操作，应熟悉这些时间/空间复杂度。 这些时间/空间复杂度在不同的语言中可能有所不同。 不要编写运行时间为O(n<sup>2</sup>)的代码，如果可以使用哈希图来在O(n)运行时间内完成操作，则可以避免此类情况。
--   **`this`很重要**。 如果一个函数接受回调函数作为参数，请考虑`this`变量应该如何行动。 对于许多内置函数，`this`是回调函数调用时提供的参数之一。
--   **回调函数内的突变**。注意回调函数突变正在处理的数据结构。 您可能不需要在面试期间处理此情况，但应在相关情况下明确提出此类情况。
--   **递归边缘案例**。
-    -   如果您已经确定解决问题需要递归，请问输入大小以及如何处理递归堆栈溢出的情况。 通常情况下，您不必处理它，但是引起此问题是一个很好的信号。
-    -   嵌套深层次数据结构可能具有对它本身的递归引用，这使得某些操作（例如序列化）变得更加棘手。 问问面试官你是否要处理这样的情况。 通常情况下，您不必处理它，但是引起此问题是一个很好的信号。
+- **虚构的想法**。 JavaScript 的标准库没有一些有用的数据结构和算法，例如队列、堆、二分搜索，这可以使您在 JavaScript 编码面试期间更轻松。 然而，您可以询问面试官是否可以假装这样的数据结构/算法存在，并直接在解决方案中使用它，而无需实现它。
+- **纯函数**。 编写纯函数，这些函数具有可重用和可插入性的好处，即函数不依赖于函数外的状态，并且不会产生副作用。
+- **明智地选择数据结构**。注意您选择数据结构的选择，并了解代码的时间复杂度。 如果要在解决方案中使用基本 JavaScript 数组、对象、集合、映射操作，应熟悉这些时间/空间复杂度。 这些时间/空间复杂度在不同的语言中可能有所不同。 不要编写运行时间为 O(n<sup>2</sup>)的代码，如果可以使用哈希图来在 O(n)运行时间内完成操作，则可以避免此类情况。
+- **`this`很重要**。 如果一个函数接受回调函数作为参数，请考虑`this`变量应该如何行动。 对于许多内置函数，`this`是回调函数调用时提供的参数之一。
+- **回调函数内的突变**。注意回调函数突变正在处理的数据结构。 您可能不需要在面试期间处理此情况，但应在相关情况下明确提出此类情况。
+- **递归边缘案例**。
+  - 如果您已经确定解决问题需要递归，请问输入大小以及如何处理递归堆栈溢出的情况。 通常情况下，您不必处理它，但是引起此问题是一个很好的信号。
+  - 嵌套深层次数据结构可能具有对它本身的递归引用，这使得某些操作（例如序列化）变得更加棘手。 问问面试官你是否要处理这样的情况。 通常情况下，您不必处理它，但是引起此问题是一个很好的信号。
 
 ## 最佳实践问题
 
-从经验上看，在频率和涵盖的重要概念方面，最佳的JavaScript编码面试问题是：
+从经验上看，在频率和涵盖的重要概念方面，最佳的 JavaScript 编码面试问题是：
 
--   [Debounce](/questions/javascript/debounce)
--   [Throttle](/questions/javascript/throttle)
--   [Array.prototype.filter](/questions/javascript/array-filter)
--   [Promise.all](/questions/javascript/promise-all)
--   [Curry](/questions/javascript/curry)
--   [Flatten](/questions/javascript/flatten)
--   [getElementsByTagName](/questions/javascript/get-elements-by-class-name)
--   [Deep Clone](/questions/javascript/deep-clone)
--   [Data Selection](/questions/javascript/data-selection)
+- [Debounce](/questions/javascript/debounce)
+- [Throttle](/questions/javascript/throttle)
+- [Array.prototype.filter](/questions/javascript/array-filter)
+- [Promise.all](/questions/javascript/promise-all)
+- [Curry](/questions/javascript/curry)
+- [Flatten](/questions/javascript/flatten)
+- [getElementsByTagName](/questions/javascript/get-elements-by-class-name)
+- [Deep Clone](/questions/javascript/deep-clone)
+- [Data Selection](/questions/javascript/data-selection)
 
-GreatFrontEnd有[全面的JavaScript编码问题列表](/questions/js/coding/utilities)，您可以练习。 还有可以运行您的代码以验证正确性的自动化测试用例，以及由前FAANG资深工程师编写的解决方案。
+GreatFrontEnd 有[全面的 JavaScript 编码问题列表](/questions/js/coding/utilities)，您可以练习。 还有可以运行您的代码以验证正确性的自动化测试用例，以及由前 FAANG 资深工程师编写的解决方案。
 
 请注意，我们在某些问题中故意含糊不清，并没有在问题说明中全面介绍要求。 但是，我们将在解决方案中涵盖尽可能多的方面。 在阅读解决方案时，如果您发现错过了一些内容，可能会感到沮丧，但是这可以锻炼您的提前思考，并考虑在解决方案工作时需要注意哪些可能区域。 最好在练习期间找出，而不是在实际面试中发现。

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

@@ -76,14 +76,14 @@ Entrevistas comportamentais são um tópico amplo por si só, e nós [escrevemos
 A maioria das empresas terá um processo semelhante a:
 
 1.  **Triagem Inicial**
-    -   Ligação do Recrutador (Perguntas de Quiz podem ser feitas)
-    -   Avaliações online autogradadas ou projetos para serem feitos em casa
+    - Ligação do Recrutador (Perguntas de Quiz podem ser feitas)
+    - Avaliações online autogradadas ou projetos para serem feitos em casa
 2.  **Entrevista por Telefone**
-    -   Codificação (Implementação de algoritmos, funções em JavaScript ou construção de interfaces de usuário)
+    - Codificação (Implementação de algoritmos, funções em JavaScript ou construção de interfaces de usuário)
 3.  **Entrevista Completa**
-    -   Rodada de Codificação (Implementação de algoritmos, funções em JavaScript ou construção de interfaces de usuário)
-    -   Rodada de Design de Sistema
-    -   Rodada Comportamental
+    - Rodada de Codificação (Implementação de algoritmos, funções em JavaScript ou construção de interfaces de usuário)
+    - Rodada de Design de Sistema
+    - Rodada Comportamental
 
 A maneira mais segura de saber o que esperar é perguntar ao recrutador da empresa sobre o processo de entrevista para a função. Boas empresas até mesmo preparam um documento detalhado para explicar cada etapa do processo de entrevista, juntamente com recursos para orientar os candidatos a se prepararem para as entrevistas. Para grandes empresas que recebem um grande volume de candidatos, há uma boa chance de que alguns candidatos que tenham entrevistado com elas compartilhem suas experiências em plataformas como [Glassdoor](https://www.glassdoor.com/), [Blind](https://www.teamblind.com/) e [Reddit](https://www.reddit.com/). Isso pode fornecer informações valiosas sobre o processo de entrevista e o que esperar.
 
@@ -93,51 +93,51 @@ A maneira mais segura de saber o que esperar é perguntar ao recrutador da empre
 
 A matriz a seguir mostra a relevância/probabilidade de cada tipo de pergunta durante cada rodada de entrevista. É possível que uma rodada de entrevista inclua perguntas de diferentes tipos.
 
-| Rodada                     | Quiz     | Algoritmos   | UI (Interface de Usuário)   | JavaScript   | System Design   |
-| -------------------------- | -------- | ------------ | --------------------------- | ------------ | --------------- |
-| Avaliação Online           | Médio    | Alto         | Alto                        | Alto         | Nada            |
-| Chamada de Recrutador      | Médio    | Nenhum       | Nenhum                      | Nenhum       | Nenhum          |
-| Projeto para Fazer em Casa | Nenhum   | Nenhum       | Alto                        | Médio        | Médio           |
-| Codificação                | Baixo    | Alto         | Alto                        | Alto         | Baixo           |
-| Comportamental             | Baixo    | Nenhum       | Nenhum                      | Nenhum       | Nenhum          |
-| Design de Sistema          | Baixo    | Nenhum       | Baixo                       | Nenhum       | Alto            |
-| Gerente de Contratações    | Baixo    | Nenhum       | Nenhum                      | Nenhum       | Baixo           |
+| Rodada | Quiz | Algoritmos | UI (Interface de Usuário) | JavaScript | System Design |
+| --- | --- | --- | --- | --- | --- |
+| Avaliação Online | Médio | Alto | Alto | Alto | Nada |
+| Chamada de Recrutador | Médio | Nenhum | Nenhum | Nenhum | Nenhum |
+| Projeto para Fazer em Casa | Nenhum | Nenhum | Alto | Médio | Médio |
+| Codificação | Baixo | Alto | Alto | Alto | Baixo |
+| Comportamental | Baixo | Nenhum | Nenhum | Nenhum | Nenhum |
+| Design de Sistema | Baixo | Nenhum | Baixo | Nenhum | Alto |
+| Gerente de Contratações | Baixo | Nenhum | Nenhum | Nenhum | Baixo |
 
 ### Tipos de Perguntas Feitas por Empresas
 
 Aqui está um resumo dos tipos de perguntas feitas pelas principais empresas dos Estados Unidos.
 
-| Empresa       | Questionário |  Algoritmos  | JavaScript | UI (Interface de Usuário) | Design de Sistema | Comportamental |
-| :------------ | :----------: | :----------: | :--------: | :-----------------------: | :---------------: | :------------: |
-| Airbnb        |      Não     |      Sim     |     Sim    |            Sim            |        Não        |       Sim      |
-| Amazon        |      Sim     |      Sim     |     Sim    |            Sim            |        Sim        |       Sim      |
-| Apple         |      Sim     |      Sim     |     Sim    |            Sim            |    Desconhecido   |       Sim      |
-| ByteDance     |      Sim     |      Sim     |     Sim    |            Sim            |        Não        |       Sim      |
-| Dropbox       |      Não     |      Sim     |     Sim    |            Sim            |        Sim        |       Sim      |
-| Facebook/Meta |      Sim     |      Não     |     Sim    |            Não            |        Sim        |       Sim      |
-| Google        |      Sim     |      Sim     |     Sim    |            Sim            |        Sim        |       Sim      |
-| LinkedIn      |      Sim     |      Sim     |     Sim    |            Sim            |    Desconhecido   |       Sim      |
-| Lyft          |      Não     |      Não     |     Sim    |            Sim            |        Sim        |       Sim      |
-| Microsoft     |      Sim     |      Sim     |     Sim    |            Sim            |        Sim        |       Sim      |
-| Twitter       |      Sim     |      Sim     |     Sim    |            Sim            |        Sim        |       Sim      |
-| Uber          | Desconhecido | Desconhecido |     Sim    |            Sim            |    Desconhecido   |       Sim      |
+| Empresa | Questionário | Algoritmos | JavaScript | UI (Interface de Usuário) | Design de Sistema | Comportamental |
+| :-- | :-: | :-: | :-: | :-: | :-: | :-: |
+| Airbnb | Não | Sim | Sim | Sim | Não | Sim |
+| Amazon | Sim | Sim | Sim | Sim | Sim | Sim |
+| Apple | Sim | Sim | Sim | Sim | Desconhecido | Sim |
+| ByteDance | Sim | Sim | Sim | Sim | Não | Sim |
+| Dropbox | Não | Sim | Sim | Sim | Sim | Sim |
+| Facebook/Meta | Sim | Não | Sim | Não | Sim | Sim |
+| Google | Sim | Sim | Sim | Sim | Sim | Sim |
+| LinkedIn | Sim | Sim | Sim | Sim | Desconhecido | Sim |
+| Lyft | Não | Não | Sim | Sim | Sim | Sim |
+| Microsoft | Sim | Sim | Sim | Sim | Sim | Sim |
+| Twitter | Sim | Sim | Sim | Sim | Sim | Sim |
+| Uber | Desconhecido | Desconhecido | Sim | Sim | Desconhecido | Sim |
 
 **Legenda dos Tipos de Perguntas**
 
--   **Quiz**: Pergunta de estilo de quiz ou trivia com respostas limitadas.
--   **Algoritmos**: Implemente uma função que resolva um problema algorítmico. Normalmente, não é específico do domínio de front-end.
--   **JavaScript**: Implemente uma função/classe em JavaScript relacionada ao domínio de front-end.
--   **UI**: Crie uma interface de usuário usando HTML/CSS/JavaScript. Algumas empresas permitem que você use um framework de sua escolha, enquanto outras permitem apenas JavaScript puro (Vanilla JS) ou certos frameworks específicos.
--   **Design de Sistema**: Projete um sistema e discuta a arquitetura e seus componentes.
--   **Comportamental**: Discuta sua experiência específica trabalhando com outras pessoas e como você lidou com cenários difíceis.
+- **Quiz**: Pergunta de estilo de quiz ou trivia com respostas limitadas.
+- **Algoritmos**: Implemente uma função que resolva um problema algorítmico. Normalmente, não é específico do domínio de front-end.
+- **JavaScript**: Implemente uma função/classe em JavaScript relacionada ao domínio de front-end.
+- **UI**: Crie uma interface de usuário usando HTML/CSS/JavaScript. Algumas empresas permitem que você use um framework de sua escolha, enquanto outras permitem apenas JavaScript puro (Vanilla JS) ou certos frameworks específicos.
+- **Design de Sistema**: Projete um sistema e discuta a arquitetura e seus componentes.
+- **Comportamental**: Discuta sua experiência específica trabalhando com outras pessoas e como você lidou com cenários difíceis.
 
 ## Estudar e praticar
 
 Leia para descobrir como se preparar para os seguintes formatos de entrevista e tipos de perguntas relacionadas ao front-end:
 
--   [Questões de codificação](/front-end-interview-guidebook/coding)
-    -   [Codificação Algoritmica](/front-end-interview-guidebook/algoritms)
-    -   [Questões de JavaScript](/front-end-interview-guidebook/javascript)
-    -   [Codificação de Interface do Usuário](/front-end-interview-guidebook/user-interface)
--   [Perguntas de Design do Sistema](/front-end-interview-guidebook/system-design)
--   [Perguntas do Quiz](/front-end-interview-guidebook/quiz)
+- [Questões de codificação](/front-end-interview-guidebook/coding)
+  - [Codificação Algoritmica](/front-end-interview-guidebook/algoritms)
+  - [Questões de JavaScript](/front-end-interview-guidebook/javascript)
+  - [Codificação de Interface do Usuário](/front-end-interview-guidebook/user-interface)
+- [Perguntas de Design do Sistema](/front-end-interview-guidebook/system-design)
+- [Perguntas do Quiz](/front-end-interview-guidebook/quiz)

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

@@ -3,18 +3,18 @@ title: 前端面试——权威概述和准备指南
 description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指南。 了解所有内容：什么可以期望，不同的面试问题类型，以及如何准备。
 ---
 
-前端面试通常很难准备。 可能存在许多不同的面试形式，而不同公司的前端工程师评估标准也没有行业的规范结构。 有些公司针对前端工程师和通用软件工程师使用相同的面试流程，而有些公司（例如Google和Amazon）则在通用软件工程师环节和前端领域特定环节之间均有面试流程。
+前端面试通常很难准备。 可能存在许多不同的面试形式，而不同公司的前端工程师评估标准也没有行业的规范结构。 有些公司针对前端工程师和通用软件工程师使用相同的面试流程，而有些公司（例如 Google 和 Amazon）则在通用软件工程师环节和前端领域特定环节之间均有面试流程。
 
-近年来，业界逐渐转向不再要求前端面试候选人解决数据结构和算法（DSA）问题。 相反，候选人将需要实现常见的前端库函数和/或构建实用的UI组件/应用程序，以测试他们对实际和相关的前端概念的理解。 这是一个令人鼓舞的趋势，因为与大多数DSA问题不同，前端面试问题与前端工程师的日常职责高度相关，是更准确的评估。
+近年来，业界逐渐转向不再要求前端面试候选人解决数据结构和算法（DSA）问题。 相反，候选人将需要实现常见的前端库函数和/或构建实用的 UI 组件/应用程序，以测试他们对实际和相关的前端概念的理解。 这是一个令人鼓舞的趋势，因为与大多数 DSA 问题不同，前端面试问题与前端工程师的日常职责高度相关，是更准确的评估。
 
 但是，许多现有的软件工程面试资源都针对通用软件工程角色而不是一种更小众的和小众的前端工程师领域;你几乎找不到有关前端系统设计的任何资源。 这些因素加上可能的领域主题的广度使得准备前端面试是一个漫长，乏味且困难的过程。
 
-请不要担心！ GreatFrontEnd旨在成为前端工程师通过一站式平台获得必要知识并进行前端面试的最佳资源。 在GreatFrontEnd上，读者可以：
+请不要担心！ GreatFrontEnd 旨在成为前端工程师通过一站式平台获得必要知识并进行前端面试的最佳资源。 在 GreatFrontEnd 上，读者可以：
 
 1.  学习如何创建一个专门针对前端工程职位的[**精彩简历**](/front-end-interview-guidebook/resume)。
 2.  学习适用于所有问题类型的**重要的前端概念和技术**。
 3.  准备最常见的**前端面试问题类型**（编码，系统设计，测验，行为）。
-4.  [**练习问题**](/questions)，涵盖最常见的前端面试格式和由前FAANG高级工程师编写的**高质量解决方案**。
+4.  [**练习问题**](/questions)，涵盖最常见的前端面试格式和由前 FAANG 高级工程师编写的**高质量解决方案**。
 5.  浏览建议的[**学习计划**](/get-started)，并采用**结构化准备方法**。
 
 ## 准备精彩简历
@@ -23,7 +23,7 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
 
 如果您在申请工作时遇到了困难，即使拥有必要的资格，也可能是因为您的简历。 即使高素质的候选人可能也不知道如何有效地展示他们的成就在简历中，因此可能无法获得短名单。 需要记住的是，低资格并不总是不被选中的原因；有时只是因为呈现不良和未包含重要内容。 一旦您通过简历筛选流程，过去的成就就变得次要了，您的技术能力成为首要考虑因素，这可以通过学习和改进来实现。 因此，通过提交代表您的高水平的优秀简历，进入门槛是极其重要的。
 
-虽然已有一些有关制作良好的软件工程简历的资源，例如[Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/)和[FAANG Tech Leads的简历手册](https://www.faangtechleads.com/resume/handbook)，但它们都是通用的，不是针对前端工程师的。 我们写了一些[如何为前端工程职位定制简历的技巧](/front-end-interview-guidebook/resume)。
+虽然已有一些有关制作良好的软件工程简历的资源，例如[Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/)和[FAANG Tech Leads 的简历手册](https://www.faangtechleads.com/resume/handbook)，但它们都是通用的，不是针对前端工程师的。 我们写了一些[如何为前端工程职位定制简历的技巧](/front-end-interview-guidebook/resume)。
 
 ## 按问题类型准备
 
@@ -36,18 +36,18 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
 编码问题将涉及编写代码（搞定！）。 但您需要编写的代码以及您将编写代码的平台可能截然不同。 您可能会问到：
 
 1.  **算法编码**：解决棘手的算法问题，评估您对数据结构，算法和时间复杂度的理解。 [阅读算法编码面试](/front-end-interview-guidebook/algorithms)的相关内容。
-2.  **JavaScript编码**：在JavaScript中实现与前端领域相关且在前端开发过程中常用的函数或数据结构。 [阅读JavaScript编码面试的相关内容](/front-end-interview-guidebook/javascript)。
-3.  **用户界面编码**：使用HTML，CSS和JavaScript构建用户界面（组件，小部件，应用程序），有时甚至包括使用JavaScript框架。 [阅读有关用户界面编码面试的相关内容](/front-end-interview-guidebook/user-interface)。
+2.  **JavaScript 编码**：在 JavaScript 中实现与前端领域相关且在前端开发过程中常用的函数或数据结构。 [阅读 JavaScript 编码面试的相关内容](/front-end-interview-guidebook/javascript)。
+3.  **用户界面编码**：使用 HTML，CSS 和 JavaScript 构建用户界面（组件，小部件，应用程序），有时甚至包括使用 JavaScript 框架。 [阅读有关用户界面编码面试的相关内容](/front-end-interview-guidebook/user-interface)。
 
 公司愈趋趋向使用领域特定的编程问题，而不是测试关于算法和数据结构的知识，因为前者对于评估前端工程工作所需的核心技能更为相关。
 
 ### 系统设计问题
 
-系统设计面试是高度无定形的面试，涉及设计软件系统来解决模糊的问题或情景。 候选人将需要将系统分解为较小的组件，绘制架构图，设计API，在系统的某些部分进行深入交流，并讨论权衡取舍才能成功。
+系统设计面试是高度无定形的面试，涉及设计软件系统来解决模糊的问题或情景。 候选人将需要将系统分解为较小的组件，绘制架构图，设计 API，在系统的某些部分进行深入交流，并讨论权衡取舍才能成功。
 
 系统设计面试通常仅提供给高级别的候选人，并且所需的系统可以是以下类型和示例之一：
 
-1.  **分布式系统**：Twitter后端，URL缩短器
+1.  **分布式系统**：Twitter 后端，URL 缩短器
 2.  **客户端应用程序**：新闻推送，照片共享应用程序
 3.  **复杂的用户界面组件**：自动完成，下拉菜单，模态
 
@@ -76,14 +76,14 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
 大多数公司将有类似以下的招聘流程：
 
 1.  **初步筛选**
-    -   招聘人员通话（可能会问有关测验问题）
-    -   自动分级的在线评估或接回家的项目
+    - 招聘人员通话（可能会问有关测验问题）
+    - 自动分级的在线评估或接回家的项目
 2.  **电话筛选**
-    -   编程（实现算法，JavaScript函数或构建用户界面）
+    - 编程（实现算法，JavaScript 函数或构建用户界面）
 3.  **完整循环**
-    -   编程环节（实现算法，JavaScript函数或构建用户界面）
-    -   系统设计环节
-    -   行为环节
+    - 编程环节（实现算法，JavaScript 函数或构建用户界面）
+    - 系统设计环节
+    - 行为环节
 
 最可靠的方法是询问招聘公司有关该角色的面试流程。 良好的公司甚至会准备详细的文件来解释每个面试阶段以及有关资源，指导候选人准备面试。 对于看到大量申请人的大公司来说，有人会通过[Glassdoor](https://www.glassdoor.com/), [Blind](https://www.teamblind.com/)和[Reddit](https://www.reddit.com/)等平台分享他们的面试经验。
 
@@ -93,51 +93,51 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
 
 以下矩阵显示了每个面试轮次中每种问题类型的相关程度/可能性。 面试轮可能包括来自不同问题类型的问题。
 
-| 环节             | 测验   | 算法      | UI   | JavaScript | 系统设计        |
-| -------------- | ---- | ------- | ---- | ---------- | ----------- |
-| 在线评估           | 中等   | 高       | 高    | 高          | 无           |
-| 招聘人员通话         | 中等   | 无       | 无    | 无          | 无           |
-| 接回家的项目         | 无    | 无       | 高    | 中等         | 中等          |
-| 编程             | 低    | 高       | 高    | 高          | 低           |
-| 行为问题           | 低    | 无       | 无    | 无          | 无           |
-| 系统设计           | 低    | 无       | 低    | 无          | 高           |
-| 招聘经理           | 低    | 无       | 无    | 无          | 低           |
+| 环节         | 测验 | 算法 | UI  | JavaScript | 系统设计 |
+| ------------ | ---- | ---- | --- | ---------- | -------- |
+| 在线评估     | 中等 | 高   | 高  | 高         | 无       |
+| 招聘人员通话 | 中等 | 无   | 无  | 无         | 无       |
+| 接回家的项目 | 无   | 无   | 高  | 中等       | 中等     |
+| 编程         | 低   | 高   | 高  | 高         | 低       |
+| 行为问题     | 低   | 无   | 无  | 无         | 无       |
+| 系统设计     | 低   | 无   | 低  | 无         | 高       |
+| 招聘经理     | 低   | 无   | 无  | 无         | 低       |
 
 ### 公司问的问题类型
 
 以下是美国顶尖公司问的问题类型摘要。
 
-| 公司            |  测验 |  算法 | JavaScript |  UI | 系统设计 | 行为面试 |
-| :------------ | :-: | :-: | :--------: | :-: | :--: | :--: |
-| 爱彼迎           |  否  |  是  |      是     |  是  |   否  |   是  |
-| 亚马逊           |  是  |  是  |      是     |  是  |   是  |   是  |
-| 苹果            |  是  |  是  |      是     |  是  |  未知  |   是  |
-| 字节跳动          |  是  |  是  |      是     |  是  |   否  |   是  |
-| Dropbox       |  否  |  是  |      是     |  是  |   是  |   是  |
-| Facebook/Meta |  是  |  否  |      是     |  否  |   是  |   是  |
-| 谷歌            |  是  |  是  |      是     |  是  |   是  |   是  |
-| 领英            |  是  |  是  |      是     |  是  |  未知  |   是  |
-| Lyft          |  否  |  否  |      是     |  是  |   是  |   是  |
-| 微软            |  是  |  是  |      是     |  是  |   是  |   是  |
-| 推特            |  是  |  是  |      是     |  是  |   是  |   是  |
-| Uber          |  未知 |  未知 |      是     |  是  |  未知  |   是  |
+| 公司          | 测验 | 算法 | JavaScript | UI  | 系统设计 | 行为面试 |
+| :------------ | :--: | :--: | :--------: | :-: | :------: | :------: |
+| 爱彼迎        |  否  |  是  |     是     | 是  |    否    |    是    |
+| 亚马逊        |  是  |  是  |     是     | 是  |    是    |    是    |
+| 苹果          |  是  |  是  |     是     | 是  |   未知   |    是    |
+| 字节跳动      |  是  |  是  |     是     | 是  |    否    |    是    |
+| Dropbox       |  否  |  是  |     是     | 是  |    是    |    是    |
+| Facebook/Meta |  是  |  否  |     是     | 否  |    是    |    是    |
+| 谷歌          |  是  |  是  |     是     | 是  |    是    |    是    |
+| 领英          |  是  |  是  |     是     | 是  |   未知   |    是    |
+| Lyft          |  否  |  否  |     是     | 是  |    是    |    是    |
+| 微软          |  是  |  是  |     是     | 是  |    是    |    是    |
+| 推特          |  是  |  是  |     是     | 是  |    是    |    是    |
+| Uber          | 未知 | 未知 |     是     | 是  |   未知   |    是    |
 
 **问题类型传奇**
 
--   **测验**：封闭的测验/问答样式问题。
--   **算法**：实现解决算法问题的功能。 通常不特定于前端领域。
--   **JavaScript**：在JavaScript中实现与前端领域相关的功能/类。
--   **用户界面**：使用HTML/CSS/JavaScript构建用户界面。 一些公司允许您使用自己选择的框架，而有些公司只允许使用Vanilla JS/某些框架。
--   **系统设计**：设计系统并讨论体系结构及其组成部分。
--   **行为问题**：讨论与他人合作的具体经验以及您如何处理困难情况。
+- **测验**：封闭的测验/问答样式问题。
+- **算法**：实现解决算法问题的功能。 通常不特定于前端领域。
+- **JavaScript**：在 JavaScript 中实现与前端领域相关的功能/类。
+- **用户界面**：使用 HTML/CSS/JavaScript 构建用户界面。 一些公司允许您使用自己选择的框架，而有些公司只允许使用 Vanilla JS/某些框架。
+- **系统设计**：设计系统并讨论体系结构及其组成部分。
+- **行为问题**：讨论与他人合作的具体经验以及您如何处理困难情况。
 
 ## 学习和实践
 
 继续阅读，了解如何准备以下前端面试格式/问题类型：
 
--   [编程问题](/front-end-interview-guidebook/coding)
-    -   [算法问题](/front-end-interview-guidebook/algorithms)
-    -   [JavaScript问题](/front-end-interview-guidebook/javascript)
-    -   [用户界面问题](/front-end-interview-guidebook/user-interface)
--   [系统设计问题](/front-end-interview-guidebook/system-design)
--   [测验问题](/front-end-interview-guidebook/quiz)
+- [编程问题](/front-end-interview-guidebook/coding)
+  - [算法问题](/front-end-interview-guidebook/algorithms)
+  - [JavaScript 问题](/front-end-interview-guidebook/javascript)
+  - [用户界面问题](/front-end-interview-guidebook/user-interface)
+- [系统设计问题](/front-end-interview-guidebook/system-design)
+- [测验问题](/front-end-interview-guidebook/quiz)

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

@@ -7,39 +7,39 @@ Perguntas de quiz, também conhecidas como perguntas de trivia, são perguntas c
 
 ## Exemplos
 
--   [Explique qual é o modelo da caixa CSS.]\(/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different box-models)
--   [O que é a especificidade do seletor CSS?](/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work)
--   [Quais são as diferenças entre variáveis criadas usando `let`, `var` ou `const`?](/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const)
--   [Explique como `this` funciona em JavaScript.](/questions/quiz/explain-how-this-works-in-javascript)
+- [Explique qual é o modelo da caixa CSS.]\(/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different box-models)
+- [O que é a especificidade do seletor CSS?](/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work)
+- [Quais são as diferenças entre variáveis criadas usando `let`, `var` ou `const`?](/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const)
+- [Explique como `this` funciona em JavaScript.](/questions/quiz/explain-how-this-works-in-javascript)
 
 Além de ser questionado sobre os fundamentos de front-end (HTML, CSS, JavaScript), você também pode ser questionado sobre perguntas específicas de frameworks se alegar conhecimento deles (seja verbalmente durante as entrevistas ou quando os entrevistadores examinam seu currículo):
 
--   Quais problemas a tecnologia X resolve?
--   Quais são as vantagens e desvantagens da tecnologia X?
--   Como funciona a tecnologia X por dentro?
--   Com o que a tecnologia X se compara em relação à tecnologia Y?
+- Quais problemas a tecnologia X resolve?
+- Quais são as vantagens e desvantagens da tecnologia X?
+- Como funciona a tecnologia X por dentro?
+- Com o que a tecnologia X se compara em relação à tecnologia Y?
 
 ## Rodadas Relevantes
 
 Normalmente, não haveria rodadas de entrevista apenas fazendo perguntas de quiz para você. No entanto, os entrevistadores podem surpreendê-lo com perguntas no meio de entrevistas focadas em outros formatos, como codificação e design de sistemas.
 
--   **Chamada de Recrutador**: Devido à natureza fechada das perguntas de quiz, elas podem até ser feitas por pessoal não técnico, como recrutadores. Felizmente, os não engenheiros provavelmente não são capazes de avaliar a precisão e provavelmente estão apenas combinando as palavras-chave em suas respostas com as soluções fornecidas a eles. Nos piores cenários, você provavelmente ainda pode passar respondendo algo que pareça sensato e inclua as palavras-chave corretas.
--   **Avaliação Online**: Embora incomum, é possível que você receba perguntas de múltipla escolha e tenha que escolher uma resposta correta entre elas.
--   **Rodada de Codificação**: Os entrevistadores podem fazer algumas perguntas de quiz antes que qualquer codificação comece para aquecer você. Ou enquanto você está codificando e explicando seu código, o entrevistador pode querer aprofundar algo que você acabou de mencionar. Portanto, é melhor ter um bom entendimento de tudo o que você diz/faz.
--   **Rodada de Design de Sistema**: Assim como na rodada de codificação, o entrevistador pode fazer mais perguntas sobre as coisas que você menciona.
--   **Rodada com o Gerente de Contratações**: As rodadas com o gerente de contratações geralmente não são destinadas a serem técnicas, mas eles podem revisar seu currículo e fazer perguntas de quiz relacionadas às tecnologias/projetos mencionados em seu currículo.
+- **Chamada de Recrutador**: Devido à natureza fechada das perguntas de quiz, elas podem até ser feitas por pessoal não técnico, como recrutadores. Felizmente, os não engenheiros provavelmente não são capazes de avaliar a precisão e provavelmente estão apenas combinando as palavras-chave em suas respostas com as soluções fornecidas a eles. Nos piores cenários, você provavelmente ainda pode passar respondendo algo que pareça sensato e inclua as palavras-chave corretas.
+- **Avaliação Online**: Embora incomum, é possível que você receba perguntas de múltipla escolha e tenha que escolher uma resposta correta entre elas.
+- **Rodada de Codificação**: Os entrevistadores podem fazer algumas perguntas de quiz antes que qualquer codificação comece para aquecer você. Ou enquanto você está codificando e explicando seu código, o entrevistador pode querer aprofundar algo que você acabou de mencionar. Portanto, é melhor ter um bom entendimento de tudo o que você diz/faz.
+- **Rodada de Design de Sistema**: Assim como na rodada de codificação, o entrevistador pode fazer mais perguntas sobre as coisas que você menciona.
+- **Rodada com o Gerente de Contratações**: As rodadas com o gerente de contratações geralmente não são destinadas a serem técnicas, mas eles podem revisar seu currículo e fazer perguntas de quiz relacionadas às tecnologias/projetos mencionados em seu currículo.
 
 Como você pode ver, pode-se esperar que façam perguntas de quiz em quase todas as rodadas possíveis. Esteja preparado o tempo todo.
 
 ## Conceitos Importantes
 
-| Area                      | Tópicos                                                                                                                                                           |
-| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| HTML                      | HTML Semântico, Elementos de Bloco vs. Elementos Inline, `<head>`, `<script>`, `<style>`, `<link>`, `<form>`, `<input>`, Validação e Envio de Formulário          |
-| CSS                       | Modelo de Caixa, Seletores, Especificidade, Posicionamento, Unidades, Flexbox, Grid, Consultas de Mídia                                                           |
-| JavaScript                | Tipos de Dados, Escopo, Closures, `this`, Declaração de Variáveis (`var`, `let`, `const`), Métodos de Arrays, Métodos de Objetos, Promessas, Classes, Async/Await |
-| DOM                       | Criação/Manipulação/Travessia do DOM, Propagação/Captura de Eventos, Delegação de Eventos                                                                         |
-| APIs em Tempo de Execução | `fetch`, Armazenamento (`localStorage`, `sessionStorage`), Temporizadores (`setTimeout`, `setInterval`)                                                           |
+| Area | Tópicos |
+| --- | --- |
+| HTML | HTML Semântico, Elementos de Bloco vs. Elementos Inline, `<head>`, `<script>`, `<style>`, `<link>`, `<form>`, `<input>`, Validação e Envio de Formulário |
+| CSS | Modelo de Caixa, Seletores, Especificidade, Posicionamento, Unidades, Flexbox, Grid, Consultas de Mídia |
+| JavaScript | Tipos de Dados, Escopo, Closures, `this`, Declaração de Variáveis (`var`, `let`, `const`), Métodos de Arrays, Métodos de Objetos, Promessas, Classes, Async/Await |
+| DOM | Criação/Manipulação/Travessia do DOM, Propagação/Captura de Eventos, Delegação de Eventos |
+| APIs em Tempo de Execução | `fetch`, Armazenamento (`localStorage`, `sessionStorage`), Temporizadores (`setTimeout`, `setInterval`) |
 
 ## Dicas
 
@@ -51,6 +51,6 @@ Não recomendamos memorizar respostas para perguntas de quiz. É melhor realment
 
 GreatFrontEnd contém uma lista de mais de 100 perguntas de quiz com soluções detalhadas escritas para cada uma delas.
 
--   [Perguntas de Quiz de JavaScript](/questions/js/quiz)
--   [Perguntas de Quiz de JavaScript](/questions/js/quiz)
--   [Perguntas de Quiz de JavaScript](/questions/js/quiz)
+- [Perguntas de Quiz de JavaScript](/questions/js/quiz)
+- [Perguntas de Quiz de JavaScript](/questions/js/quiz)
+- [Perguntas de Quiz de JavaScript](/questions/js/quiz)

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

@@ -7,39 +7,39 @@ description: 准备测验式前端面试问题的指南——预期情况，需
 
 ## 示例
 
--   [解释CSS盒模型是什么。](/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
--   [什么是CSS选择器优先级？](/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work)
--   [`let`、`var`或`const`创建的变量有什么区别？](/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const)
--   [解释JavaScript中的`this`如何工作。](/questions/quiz/explain-how-this-works-in-javascript)
+- [解释 CSS 盒模型是什么。](/questions/quiz/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
+- [什么是 CSS 选择器优先级？](/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work)
+- [`let`、`var`或`const`创建的变量有什么区别？](/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const)
+- [解释 JavaScript 中的`this`如何工作。](/questions/quiz/explain-how-this-works-in-javascript)
 
 除了要求您了解前端基础知识（HTML、CSS、JavaScript），如果您声称了解某些具体框架，面试官也可能就相关问题向您询问（无论是面试时口头提问还是确认您的简历时）：
 
--   X技术解决了哪些问题？
--   X技术的优点和缺点是什么？
--   X技术的底层是如何工作的？
--   X技术与Y技术有何区别？
+- X 技术解决了哪些问题？
+- X 技术的优点和缺点是什么？
+- X 技术的底层是如何工作的？
+- X 技术与 Y 技术有何区别？
 
 ## 相关环节
 
 通常不会有面试只问测验式问题的环节。 但是，在专注于其他格式（如编码和系统设计）的面试中，面试官可能会向您提问测验式问题。
 
--   **招聘专员电话**: 由于测验式问题的封闭性质，甚至非技术人员（如招聘专员）也可以提出测验式问题。 值得庆幸的是，非工程师可能无法评估准确性，并且可能只是将您的答案中的关键字与解决方案进行匹配。 在最糟糕的情况下，只要回复听起来合理并包含正确关键字的内容，您可能仍然能够通过。
--   **在线评估**: 虽然不常见，但有可能您会被要求回答多选题并从中选择正确答案。
--   **编码环节**: 面试官可能会在开始任何编码之前向您询问一些测验式问题以热身。 或者当您编写和解释代码时，面试官可能想进一步了解您刚才提到的某些内容。 因此，最好对您说/做的一切有良好的理解。
--   **系统设计环节**: 就像在编码环节一样，面试官可以就您所说的东西进一步提问。
--   **招聘经理环节**: 招聘经理环节通常不涉及技术，但他们可能会查看您的简历，并就其中提到的技术/项目向您提出相关的测验式问题。
+- **招聘专员电话**: 由于测验式问题的封闭性质，甚至非技术人员（如招聘专员）也可以提出测验式问题。 值得庆幸的是，非工程师可能无法评估准确性，并且可能只是将您的答案中的关键字与解决方案进行匹配。 在最糟糕的情况下，只要回复听起来合理并包含正确关键字的内容，您可能仍然能够通过。
+- **在线评估**: 虽然不常见，但有可能您会被要求回答多选题并从中选择正确答案。
+- **编码环节**: 面试官可能会在开始任何编码之前向您询问一些测验式问题以热身。 或者当您编写和解释代码时，面试官可能想进一步了解您刚才提到的某些内容。 因此，最好对您说/做的一切有良好的理解。
+- **系统设计环节**: 就像在编码环节一样，面试官可以就您所说的东西进一步提问。
+- **招聘经理环节**: 招聘经理环节通常不涉及技术，但他们可能会查看您的简历，并就其中提到的技术/项目向您提出相关的测验式问题。
 
 正如您所看到的，您几乎可以在任何可能的环节中都会被问及测验式问题。 随时做好准备。
 
 ## 重要概念
 
-| 领域         | 主题                                                                                  |
-| ---------- | ----------------------------------------------------------------------------------- |
-| HTML       | 语义化HTML，块级元素和行内元素，`<head>`、`<script>`、`<style>`、`<link>`、`<form>`、`<input>`，表单验证/提交 |
-| CSS        | 盒模型，选择器，优先级，定位，单位，Flexbox，Grid，媒体查询                                                 |
-| JavaScript | 数据类型，作用域，闭包，`this`，变量声明（`var`、`let`、`const`），数组方法，对象方法，Promise，类，异步/等待              |
-| DOM        | DOM创建/操作/遍历，事件冒泡/捕获，事件委托                                                            |
-| 运行时API     | `fetch`，存储（`localStorage`、`sessionStorage`），定时器（`setTimeout`、`setInterval`）         |
+| 领域 | 主题 |
+| --- | --- |
+| HTML | 语义化 HTML，块级元素和行内元素，`<head>`、`<script>`、`<style>`、`<link>`、`<form>`、`<input>`，表单验证/提交 |
+| CSS | 盒模型，选择器，优先级，定位，单位，Flexbox，Grid，媒体查询 |
+| JavaScript | 数据类型，作用域，闭包，`this`，变量声明（`var`、`let`、`const`），数组方法，对象方法，Promise，类，异步/等待 |
+| DOM | DOM 创建/操作/遍历，事件冒泡/捕获，事件委托 |
+| 运行时 API | `fetch`，存储（`localStorage`、`sessionStorage`），定时器（`setTimeout`、`setInterval`） |
 
 ## 提示
 
@@ -49,8 +49,8 @@ description: 准备测验式前端面试问题的指南——预期情况，需
 
 ## 练习题
 
-GreatFrontEnd的列表中包含100多个常见测验式问题，每个问题都有详细的解决方案。
+GreatFrontEnd 的列表中包含 100 多个常见测验式问题，每个问题都有详细的解决方案。
 
--   [JavaScript测验式问题](/questions/js/quiz)
--   [HTML测验式问题](/questions/html/quiz)
--   [CSS测验式问题](/questions/css/quiz)
+- [JavaScript 测验式问题](/questions/js/quiz)
+- [HTML 测验式问题](/questions/html/quiz)
+- [CSS 测验式问题](/questions/css/quiz)

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

@@ -9,18 +9,18 @@ Nesta página, oferecemos algumas dicas específicas para Front End Engineers a
 
 ## Requisitos Básicos
 
--   Preferencialmente mantido em uma página se você tiver menos de 5 anos de experiência, não excedendo duas páginas.
--   Construa usando o Microsoft Word, Google Docs, Pages ou LaTeX para que o Sistema de Rastreamento de Candidatos (ATS) possa analisar os currículos. Evite usar software de design.
--   Envie no formato PDF.
+- Preferencialmente mantido em uma página se você tiver menos de 5 anos de experiência, não excedendo duas páginas.
+- Construa usando o Microsoft Word, Google Docs, Pages ou LaTeX para que o Sistema de Rastreamento de Candidatos (ATS) possa analisar os currículos. Evite usar software de design.
+- Envie no formato PDF.
 
 ## Formatação e Estética
 
 Engenheiros de Front-End lidam frequentemente com interfaces de usuário e são esperados ter um aguçado senso de design. Isso refletirá muito mal em você como um Engenheiro de Front-End se o seu currículo não for esteticamente agradável.
 
--   Utilize um formato de coluna única.
--   Utilize fontes comuns que estejam disponíveis na maioria dos sistemas operacionais, como Arial, Calibri ou Garamond. Evite fontes extravagantes.
--   Mantenha-se a uma única fonte ou, no máximo, duas fontes (uma para os cabeçalhos e outra para o corpo do texto).
--   Tamanho de fonte mínimo de 11px.
+- Utilize um formato de coluna única.
+- Utilize fontes comuns que estejam disponíveis na maioria dos sistemas operacionais, como Arial, Calibri ou Garamond. Evite fontes extravagantes.
+- Mantenha-se a uma única fonte ou, no máximo, duas fontes (uma para os cabeçalhos e outra para o corpo do texto).
+- Tamanho de fonte mínimo de 11px.
 
 Seu currículo não precisa ser extremamente bonito e extravagante, apenas precisa parecer organizado e visualmente agradável. Se você tem recursos disponíveis, a maneira mais rápida de criar um currículo esteticamente agradável e compatível com ATS é adquirir modelos de currículo do [FAANG Tech Leads](https://www.faangtechleads.com/).
 
@@ -32,17 +32,17 @@ Para melhorar a classificação do seu currículo pelo ATS, inclua "Front End" e
 
 É comum as pessoas cometerem o erro de não fornecer detalhes suficientes sobre suas experiências e conquistas. Para se destacar, é importante fornecer informações suficientes sobre a **magnitude, complexidade e impacto** das suas experiências e conquistas.
 
--   **Ruim 👎**: "Construí um site com HTML, CSS e JavaScript".
--   **Melhor 👍**: "Construí um site de comércio eletrônico eficiente que permitia aos usuários navegar por centenas de itens, adicionar ao carrinho e finalizar a compra com PayPal". O site possui 20 mil usuários ativos por mês, carrega em menos de 2 segundos e tem uma pontuação de 98 no Lighthouse. Tecnologias utilizadas: Next.js, React, GraphQL, módulos de CSS
+- **Ruim 👎**: "Construí um site com HTML, CSS e JavaScript".
+- **Melhor 👍**: "Construí um site de comércio eletrônico eficiente que permitia aos usuários navegar por centenas de itens, adicionar ao carrinho e finalizar a compra com PayPal". O site possui 20 mil usuários ativos por mês, carrega em menos de 2 segundos e tem uma pontuação de 98 no Lighthouse. Tecnologias utilizadas: Next.js, React, GraphQL, módulos de CSS
 
 Aqui está uma lista não exaustiva de conquistas técnicas relacionadas ao front-end que são adequadas para serem mencionadas:
 
--   Trabalho no produto: Detalhe as funcionalidades desenvolvidas dentro de um produto.
--   **Performance**: Melhorias de desempenho realizadas e os ganhos resultantes em porcentagem. E.g. tamanho de carregamento da página, tempo de carregamento da página, melhorias na pontuação do Lighthouse, etc.
--   **Testes**: Número de testes escritos, quantos fluxos críticos eles abrangem, aumento percentual na cobertura de testes.
--   % ou redução numérica em erros/avisos de SEO. Essa métrica é fácil de obter se a empresa utilizar ferramentas de SEO como Ahrefs e Semrush.
--   **Acessibilidade (a11y)**: Número de erros a11y corrigidos, número de fluxos que foram melhorados para atender à conformidade do nível WCAG AA/AAA, número de componentes onde a11y melhorou.
--   **Ferramentas**: Modernização das tecnologias utilizadas em uma base de código, por exemplo, migrando uma base de código jQuery para React, melhorando a segurança de tipos ao introduzir o TypeScript. Você pode descrever o produto ou mencionar o número aproximado de linhas de código (LOCs) ou engenheiros trabalhando no código para dar uma ideia melhor da escala e complexidade.
+- Trabalho no produto: Detalhe as funcionalidades desenvolvidas dentro de um produto.
+- **Performance**: Melhorias de desempenho realizadas e os ganhos resultantes em porcentagem. E.g. tamanho de carregamento da página, tempo de carregamento da página, melhorias na pontuação do Lighthouse, etc.
+- **Testes**: Número de testes escritos, quantos fluxos críticos eles abrangem, aumento percentual na cobertura de testes.
+- % ou redução numérica em erros/avisos de SEO. Essa métrica é fácil de obter se a empresa utilizar ferramentas de SEO como Ahrefs e Semrush.
+- **Acessibilidade (a11y)**: Número de erros a11y corrigidos, número de fluxos que foram melhorados para atender à conformidade do nível WCAG AA/AAA, número de componentes onde a11y melhorou.
+- **Ferramentas**: Modernização das tecnologias utilizadas em uma base de código, por exemplo, migrando uma base de código jQuery para React, melhorando a segurança de tipos ao introduzir o TypeScript. Você pode descrever o produto ou mencionar o número aproximado de linhas de código (LOCs) ou engenheiros trabalhando no código para dar uma ideia melhor da escala e complexidade.
 
 ## Seção de Habilidades
 
@@ -50,42 +50,42 @@ A seção "Habilidades" é uma lista de idiomas e tecnologias que você possui e
 
 Devido à grande quantidade de diferentes tecnologias necessárias para construir aplicações de front-end, você pode descobrir que possui muitas tecnologias para adicionar à seção de habilidades do seu currículo. No entanto, não adicione todas as tecnologias! Isso dilui a importância das habilidades que realmente importam. Priorize os idiomas/tecnologias que:
 
-### 1.  Aparecem na descrição da vaga
+### 1. Aparecem na descrição da vaga
 
 Se uma habilidade aparece na descrição da vaga e você possui experiência com ela, definitivamente deve adicioná-la.
 
-### 2.  Liste apenas as tecnologias-chave que influenciam a arquitetura
+### 2. Liste apenas as tecnologias-chave que influenciam a arquitetura
 
 Bibliotecas como o React influenciam fortemente as outras escolhas de tecnologia associadas, enquanto bibliotecas como o Underscore/Lodash são agnósticas em relação à arquitetura e podem ser facilmente substituídas. Priorize as primeiras e omita bibliotecas pequenas/utilitárias que podem ser facilmente substituídas.
 
-### 3.  Amplamente conhecidas ou estão ganhando rapidamente popularidade
+### 3. Amplamente conhecidas ou estão ganhando rapidamente popularidade
 
 Isso demonstra que você está acompanhando o ecossistema moderno de front-end. A empresa também pode estar considerando adotar essa tecnologia, e se você tiver experiência nela, é uma vantagem.
 
-### 4.  Demonstre sua amplitude
+### 4. Demonstre sua amplitude
 
 Listar React, Angular e Vue (todos frameworks de visualização de front-end) é excessivo, mesmo que você realmente esteja familiarizado com todos eles. Poucas descrições de vagas listarão mais de uma tecnologia que serve ao mesmo propósito (e é um sinal de alerta se o fizerem). Adicionar muitas tecnologias (especialmente da mesma categoria) dificulta para o leitor ter uma noção das suas habilidades.
 
 Tente listar **pelo menos uma e no máximo duas** tecnologias que pertençam às seguintes categorias. Nem todas as categorias se aplicarão a você, então inclua apenas as relevantes. Exemplos populares são mostrados abaixo.
 
--   **Visualizar**: [React](https://reactjs.org/), [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/)
--   **Renderização Frameworks**: [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [Nuxt](https://nuxtjs.org/), [SvelteKit](https://kit.svelte.dev/)
--   **Gerenciamento de Estado**: [Redux](https://redux.js.org/), [Flux](https://facebook.github.io/flux/), [Jotai](https://jotai.org/), [Zustand](https://github.com/pmndrs/zustand), [Relay](https://relay.dev/)
--   **CSS**: [CSS Modules](https://github.com/css-modules/css-modules), [Styled Components](https://styled-components.com/), [Tailwind CSS](https://tailwindcss.com/), [Sass](https://sass-lang.com/), [Less](https://lesscss.org/)
--   **CSS Frameworks**: [Bootstrap](https://getbootstrap.com/), [Material UI](https://mui.com/), [Chakra UI](https://chakra-ui.com/), [Bulma](https://bulma.io/)
--   **Testes Unitários**: [Jest](https://jestjs.io/), [Vitest](https://vitest.dev/), [Storybook](https://storybook.js.org/), [Mocha](https://mochajs.org/), [Jasmine](https://jasmine.github.io/), [Karma](httpsformat@@7format@@8arma-runner.github.io/latest/index.html)
--   **Data Fetching**: [GraphQL](https://graphql.org/), [tRPC](https://trpc.io/), [TanStack Query](https://tanstack.com/query/v3/), [swr](https://swr.vercel.app/)
--   **Teste de Integração**: [Cypress](https://www.cypress.io/), [Selenium](https://www.selenium.dev/), [Puppeteer](https://pptr.dev/), [WebdriverIO](https://webdriver.io/), [Playwright](https://playwright.dev/)
--   **Ferramentas de Idioma**: [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [Flow](https://flow.org/), [ESLint](https://eslint.org/)
--   **Ferramentas de compilação (opcional)**: [webpack](https://webpack.js.org/), [Vite](https://vitejs.dev/), [Parcel](https://parceljs.org/), [Gulp](https://gulpjs.com/), [Rollup](https://rollupjs.org/), [Browserify](https://browserify.org/)
--   **Gerenciamento de Pacotes (opcional)**: [npm](https://www.npmjs.com/), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/)
+- **Visualizar**: [React](https://reactjs.org/), [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/)
+- **Renderização Frameworks**: [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [Nuxt](https://nuxtjs.org/), [SvelteKit](https://kit.svelte.dev/)
+- **Gerenciamento de Estado**: [Redux](https://redux.js.org/), [Flux](https://facebook.github.io/flux/), [Jotai](https://jotai.org/), [Zustand](https://github.com/pmndrs/zustand), [Relay](https://relay.dev/)
+- **CSS**: [CSS Modules](https://github.com/css-modules/css-modules), [Styled Components](https://styled-components.com/), [Tailwind CSS](https://tailwindcss.com/), [Sass](https://sass-lang.com/), [Less](https://lesscss.org/)
+- **CSS Frameworks**: [Bootstrap](https://getbootstrap.com/), [Material UI](https://mui.com/), [Chakra UI](https://chakra-ui.com/), [Bulma](https://bulma.io/)
+- **Testes Unitários**: [Jest](https://jestjs.io/), [Vitest](https://vitest.dev/), [Storybook](https://storybook.js.org/), [Mocha](https://mochajs.org/), [Jasmine](https://jasmine.github.io/), [Karma](httpsformat@@7format@@8arma-runner.github.io/latest/index.html)
+- **Data Fetching**: [GraphQL](https://graphql.org/), [tRPC](https://trpc.io/), [TanStack Query](https://tanstack.com/query/v3/), [swr](https://swr.vercel.app/)
+- **Teste de Integração**: [Cypress](https://www.cypress.io/), [Selenium](https://www.selenium.dev/), [Puppeteer](https://pptr.dev/), [WebdriverIO](https://webdriver.io/), [Playwright](https://playwright.dev/)
+- **Ferramentas de Idioma**: [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [Flow](https://flow.org/), [ESLint](https://eslint.org/)
+- **Ferramentas de compilação (opcional)**: [webpack](https://webpack.js.org/), [Vite](https://vitejs.dev/), [Parcel](https://parceljs.org/), [Gulp](https://gulpjs.com/), [Rollup](https://rollupjs.org/), [Browserify](https://browserify.org/)
+- **Gerenciamento de Pacotes (opcional)**: [npm](https://www.npmjs.com/), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/)
 
 ### Exemplo
 
 Isso é como a seção "Habilidades" no nosso currículo ficaria:
 
--   **Linguagens**: HTML, CSS, JavaScript, TypeScript
--   **Tecnologias**: React, Next.js, Tailwind CSS, Jest, Storybook, Cypress, React Query, Yarn, webpack
+- **Linguagens**: HTML, CSS, JavaScript, TypeScript
+- **Tecnologias**: React, Next.js, Tailwind CSS, Jest, Storybook, Cypress, React Query, Yarn, webpack
 
 Esta é exatamente a pilha de tecnologia utilizada para construir o GreatFrontEnd. Certamente você deve incluir HTML, CSS e JavaScript na seção de "Idiomas", caso contrário, algo está bastante errado.
 

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

@@ -9,89 +9,89 @@ description: 提高你的前端开发者/网页开发者的简历，以获得面
 
 ## 基本要求
 
--   如果您有不到5年的经验，则最好不要超过一页，最多不要超过两页。
--   使用Microsoft Word、Google Docs、Pages或LaTeX构建，以便应聘者跟踪系统（ATS）可以解析简历。 避免使用设计软件。
--   提交PDF格式。
+- 如果您有不到 5 年的经验，则最好不要超过一页，最多不要超过两页。
+- 使用 Microsoft Word、Google Docs、Pages 或 LaTeX 构建，以便应聘者跟踪系统（ATS）可以解析简历。 避免使用设计软件。
+- 提交 PDF 格式。
 
 ## 格式和美观度
 
 前端工程师经常处理用户界面，并且期望他们有敏锐的设计感。 如果您的简历外观不美观，那么这将给你身为前端工程师的形象带来很不好的影响。
 
--   使用单列格式。
--   使用大多数操作系统上可用的常见字体，例如Arial、Calibri或Garamond。 避免花俏的字体。
--   只使用一个或最多两个字体（一个用于标题，另一个用于正文）。
--   最小字体大小为11px。
+- 使用单列格式。
+- 使用大多数操作系统上可用的常见字体，例如 Arial、Calibri 或 Garamond。 避免花俏的字体。
+- 只使用一个或最多两个字体（一个用于标题，另一个用于正文）。
+- 最小字体大小为 11px。
 
-你的简历不需要过分漂亮和花哨，它只需要看起来整洁和视觉上令人愉悦即可。 如果你有多余的现金，最快创建美观且适合ATS的简历的方法是从[FAANG Tech Leads](https://www.faangtechleads.com/)购买简历模板。
+你的简历不需要过分漂亮和花哨，它只需要看起来整洁和视觉上令人愉悦即可。 如果你有多余的现金，最快创建美观且适合 ATS 的简历的方法是从[FAANG Tech Leads](https://www.faangtechleads.com/)购买简历模板。
 
 ## 工作经验部分
 
 简历的工作经验部分是最重要的，应占据简历的大部分空间。 此部分应着重强调您对过去或目前雇主的业务目标的贡献，
 
-为了提高简历的ATS排名，应在可能的情况下在简历中散布“Front End”。 如果您的正式头衔是“软件工程师”，但您已作为工作的一部分进行了大量的前端开发，请考虑将您的头衔更改为“前端工程师”/“前端软件工程师”/“软件工程师（前端）”等，以提高相关性。
+为了提高简历的 ATS 排名，应在可能的情况下在简历中散布“Front End”。 如果您的正式头衔是“软件工程师”，但您已作为工作的一部分进行了大量的前端开发，请考虑将您的头衔更改为“前端工程师”/“前端软件工程师”/“软件工程师（前端）”等，以提高相关性。
 
 人们常犯的一个错误是没有提供关于他们的经验和成就的足够细节。 为了脱颖而出，重要的是要提供有关您的经验和成果的规模、复杂性和影响的足够信息。
 
--   **差 👎**：“使用HTML、CSS和JavaScript构建了一个网站”。
--   **更好 👍**：“构建了一个高性能的电子商务网站，允许用户浏览数百种商品，将商品添加到购物车并使用PayPal结账。 该网站每月有20k的活跃用戶，加载速度低于2秒，Lighthouse得分为98。 使用的技术：Next.js、React、GraphQL、CSS模块”。
+- **差 👎**：“使用 HTML、CSS 和 JavaScript 构建了一个网站”。
+- **更好 👍**：“构建了一个高性能的电子商务网站，允许用户浏览数百种商品，将商品添加到购物车并使用 PayPal 结账。 该网站每月有 20k 的活跃用戶，加载速度低于 2 秒，Lighthouse 得分为 98。 使用的技术：Next.js、React、GraphQL、CSS 模块”。
 
 以下是一个前端相关的技术成就列表，适合提到：
 
--   **产品工作**：详细说明产品内部构建的功能。
--   **性能**：提供的性能改进，以及它们所带来的百分比收益。 例如， 页面加载大小、页面加载时间、Lighthouse得分改进等。
--   **测试**：编写测试的数量，它们覆盖了多少重要流程，测试覆盖率的百分比增加。
--   **SEO**：SEO错误/警告的降低占百分比或是具体数字。 如果公司使用SEO工具如Ahrefs和Semrush，则可以轻松获得此度量标准。
--   **可访问性(a11y)**：修复的a11y错误数量，改进了符合WCAG AA/AAA级标准的流程数目，以及增加的a11y组件数目。
--   **工具**：现代化技术在代码库中的现代化，例如将jQuery代码库迁移到React、通过引入TypeScript提高类型安全性等。 要么描述产品，要么提到代码行数/工程师数量，以更好地理解规模和复杂性。
+- **产品工作**：详细说明产品内部构建的功能。
+- **性能**：提供的性能改进，以及它们所带来的百分比收益。 例如， 页面加载大小、页面加载时间、Lighthouse 得分改进等。
+- **测试**：编写测试的数量，它们覆盖了多少重要流程，测试覆盖率的百分比增加。
+- **SEO**：SEO 错误/警告的降低占百分比或是具体数字。 如果公司使用 SEO 工具如 Ahrefs 和 Semrush，则可以轻松获得此度量标准。
+- **可访问性(a11y)**：修复的 a11y 错误数量，改进了符合 WCAG AA/AAA 级标准的流程数目，以及增加的 a11y 组件数目。
+- **工具**：现代化技术在代码库中的现代化，例如将 jQuery 代码库迁移到 React、通过引入 TypeScript 提高类型安全性等。 要么描述产品，要么提到代码行数/工程师数量，以更好地理解规模和复杂性。
 
 ## 技能部分
 
-“技能”部分是你拥有的语言和技术的列表，可作为当ATS/招聘人员/招聘经理阅读此部分时的快速清单/摘要。 至少，应该为“语言”和“技术”类别有两个列表项：
+“技能”部分是你拥有的语言和技术的列表，可作为当 ATS/招聘人员/招聘经理阅读此部分时的快速清单/摘要。 至少，应该为“语言”和“技术”类别有两个列表项：
 
 由于构建前端应用程序需要多种不同的技术，您可能会发现您有许多要添加到简历技能部分中的技术。 但不要添加每个技术！ 这会削弱实际重要技能的权重。 优先考虑以下语言/技术：
 
-### 1.  在工作列表中出现
+### 1. 在工作列表中出现
 
 如果某项技能出现在工作列表中并且你有使用它的经验，一定要将其添加进去。
 
-### 2.  仅列出影响架构的关键技术
+### 2. 仅列出影响架构的关键技术
 
-像React这样的库对其他相关技术选择产生了很大影响，而像Underscore/Lodash这样的库与架构无关，可以轻易地被替换掉。 优先考虑前者，省略小型/实用库，这些库易于替换。
+像 React 这样的库对其他相关技术选择产生了很大影响，而像 Underscore/Lodash 这样的库与架构无关，可以轻易地被替换掉。 优先考虑前者，省略小型/实用库，这些库易于替换。
 
-### 3.  广为人知或迅速走红
+### 3. 广为人知或迅速走红
 
 这表明你跟上了现代前端生态系统的发展。 公司也可能正在考虑迁移到该技术，如果您在该技术方面有经验，这是一个加分项。
 
-### 4.  展示您的广度
+### 4. 展示您的广度
 
-列出所有的React、Angular和Vue（所有前端视图框架）是过度的，即使您确实熟悉它们中的所有内容。 很少有工作列表会列出多个用于同一目的的技术（如果他们这样做，这是一个红旗信号）。 添加过多的技术（特别是同一类别的技术）会使读者更难以了解您的技能。
+列出所有的 React、Angular 和 Vue（所有前端视图框架）是过度的，即使您确实熟悉它们中的所有内容。 很少有工作列表会列出多个用于同一目的的技术（如果他们这样做，这是一个红旗信号）。 添加过多的技术（特别是同一类别的技术）会使读者更难以了解您的技能。
 
 尝试列出至少一个，最多两个属于以下类别的技术。 不能全部都适用于您，因此只包含相关的内容。 下面是一些热门的例子。
 
--   **View**：[React](https://reactjs.org/)、[Angular](https://angular.io/)、[Vue](https://vuejs.org/)、[Svelte](https://svelte.dev/)
--   **Rendering Frameworks**：[Next.js](https://nextjs.org/)、[Gatsby](https://www.gatsbyjs.com/)、[Nuxt](https://nuxtjs.org/)、[SvelteKit](https://kit.svelte.dev/)
--   **State Management**：[Redux](https://redux.js.org/)、[Flux](https://facebook.github.io/flux/)、[Jotai](https://jotai.org/)、[Zustand](https://github.com/pmndrs/zustand)、[Relay](https://relay.dev/)
--   **CSS**：[CSS Modules](https://github.com/css-modules/css-modules)、[Styled Components](https://styled-components.com/)、[Tailwind CSS](https://tailwindcss.com/)、[Sass](https://sass-lang.com/)、[Less](https://lesscss.org/)
--   **CSS框架**：[Bootstrap](https://getbootstrap.com/)、[Material UI](https://mui.com/)、[Chakra UI](https://chakra-ui.com/)、[Bulma](https://bulma.io/)
--   **单元测试**：[Jest](https://jestjs.io/)、[Vitest](https://vitest.dev/)、[Storybook](https://storybook.js.org/)、[Mocha](https://mochajs.org/)、[Jasmine](https://jasmine.github.io/)、[Karma](https://karma-runner.github.io/latest/index.html)
--   **数据获取**：[GraphQL](https://graphql.org/)、[tRPC](https://trpc.io/)、[TanStack Query](https://tanstack.com/query/v3/)、[swr](https://swr.vercel.app/)
--   **集成测试**：[Cypress](https://www.cypress.io/)、[Selenium](https://www.selenium.dev/)、[Puppeteer](https://pptr.dev/)、[WebdriverIO](https://webdriver.io/)、[Playwright](https://playwright.dev/)
--   **语言工具**：[Babel](https://babeljs.io/)、[TypeScript](https://www.typescriptlang.org/)、[Flow](https://flow.org/)、[ESLint](https://eslint.org/)
--   **编译工具（可选）**：[webpack](https://webpack.js.org/)、[Vite](https://vitejs.dev/)、[Parcel](https://parceljs.org/)、[Gulp](https://gulpjs.com/)、[Rollup](https://rollupjs.org/)、[Browserify](https://browserify.org/)
--   **软件包管理（可选）**：[npm](https://www.npmjs.com/)、[Yarn](https://yarnpkg.com/)、[pnpm](https://pnpm.io/)
+- **View**：[React](https://reactjs.org/)、[Angular](https://angular.io/)、[Vue](https://vuejs.org/)、[Svelte](https://svelte.dev/)
+- **Rendering Frameworks**：[Next.js](https://nextjs.org/)、[Gatsby](https://www.gatsbyjs.com/)、[Nuxt](https://nuxtjs.org/)、[SvelteKit](https://kit.svelte.dev/)
+- **State Management**：[Redux](https://redux.js.org/)、[Flux](https://facebook.github.io/flux/)、[Jotai](https://jotai.org/)、[Zustand](https://github.com/pmndrs/zustand)、[Relay](https://relay.dev/)
+- **CSS**：[CSS Modules](https://github.com/css-modules/css-modules)、[Styled Components](https://styled-components.com/)、[Tailwind CSS](https://tailwindcss.com/)、[Sass](https://sass-lang.com/)、[Less](https://lesscss.org/)
+- **CSS 框架**：[Bootstrap](https://getbootstrap.com/)、[Material UI](https://mui.com/)、[Chakra UI](https://chakra-ui.com/)、[Bulma](https://bulma.io/)
+- **单元测试**：[Jest](https://jestjs.io/)、[Vitest](https://vitest.dev/)、[Storybook](https://storybook.js.org/)、[Mocha](https://mochajs.org/)、[Jasmine](https://jasmine.github.io/)、[Karma](https://karma-runner.github.io/latest/index.html)
+- **数据获取**：[GraphQL](https://graphql.org/)、[tRPC](https://trpc.io/)、[TanStack Query](https://tanstack.com/query/v3/)、[swr](https://swr.vercel.app/)
+- **集成测试**：[Cypress](https://www.cypress.io/)、[Selenium](https://www.selenium.dev/)、[Puppeteer](https://pptr.dev/)、[WebdriverIO](https://webdriver.io/)、[Playwright](https://playwright.dev/)
+- **语言工具**：[Babel](https://babeljs.io/)、[TypeScript](https://www.typescriptlang.org/)、[Flow](https://flow.org/)、[ESLint](https://eslint.org/)
+- **编译工具（可选）**：[webpack](https://webpack.js.org/)、[Vite](https://vitejs.dev/)、[Parcel](https://parceljs.org/)、[Gulp](https://gulpjs.com/)、[Rollup](https://rollupjs.org/)、[Browserify](https://browserify.org/)
+- **软件包管理（可选）**：[npm](https://www.npmjs.com/)、[Yarn](https://yarnpkg.com/)、[pnpm](https://pnpm.io/)
 
 ### 示例
 
 这是我们的简历的“技能”部分的示例：
 
--   **语言**：HTML、CSS、JavaScript、TypeScript
--   **技术**：React、Next.js、Tailwind CSS、Jest、Storybook、Cypress、React Query、Yarn、webpack
+- **语言**：HTML、CSS、JavaScript、TypeScript
+- **技术**：React、Next.js、Tailwind CSS、Jest、Storybook、Cypress、React Query、Yarn、webpack
 
-这恰好是用于构建GreatFrontEnd的技术堆栈。 您的“语言”项目下应该有HTML、CSS、JavaScript，否则可能存在大问题。
+这恰好是用于构建 GreatFrontEnd 的技术堆栈。 您的“语言”项目下应该有 HTML、CSS、JavaScript，否则可能存在大问题。
 
 ## 项目部分
 
-前端领域随着新的JavaScript框架和CSS方法的不断出现而不断发展。 在简历中列出项目表明您热爱这个领域，为了跟上最新的前端技术而付出了额外的努力，尤其是如果它们没有在你的工作中使用，这是一个巨大的正面信号。 列出每个项目所使用的技术，特别是如果它们是公司使用的现代技术。 这有助于提高简历的ATS排名并留下更深的印象。 在可能的情况下，将代码放在GitHub上，并梳理README以包括产品的截图。 将项目代码和现场网站的链接添加到简历中。
+前端领域随着新的 JavaScript 框架和 CSS 方法的不断出现而不断发展。 在简历中列出项目表明您热爱这个领域，为了跟上最新的前端技术而付出了额外的努力，尤其是如果它们没有在你的工作中使用，这是一个巨大的正面信号。 列出每个项目所使用的技术，特别是如果它们是公司使用的现代技术。 这有助于提高简历的 ATS 排名并留下更深的印象。 在可能的情况下，将代码放在 GitHub 上，并梳理 README 以包括产品的截图。 将项目代码和现场网站的链接添加到简历中。
 
 开源贡献，尤其是对复杂代码库的非微小更改，被视为技术能力的标志。 如果您已经创建或是开源项目的维护者，则更好。
 

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

@@ -15,7 +15,7 @@ Ao enfrentar uma entrevista de design de sistemas, independentemente se você es
 
 O GreatFrontEnd inclui muitos estudos de caso de design de sistemas de front-end e exemplos do mundo real, incluindo e muito mais:
 
--   [Feed de Notícias (por exemplo, Facebook)](/questions/system-design/news-feed-facebook)
--   [Componente de Autocomplete](/questions/system-design/autocomplete)
--   [Site de e-commerce (ex: Amazon)](/questions/system-design/e-commerce-amazon)
--   [Carrossel de imagem](/questions/system-design/image-carousel)
+- [Feed de Notícias (por exemplo, Facebook)](/questions/system-design/news-feed-facebook)
+- [Componente de Autocomplete](/questions/system-design/autocomplete)
+- [Site de e-commerce (ex: Amazon)](/questions/system-design/e-commerce-amazon)
+- [Carrossel de imagem](/questions/system-design/image-carousel)

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

@@ -3,19 +3,19 @@ title: 前端系统设计问题——如何准备
 description: 准备前端/网络开发人员面试中的系统设计问题——最佳实践和重要的练习问题。
 ---
 
-系统设计面试可以采用多种形式，涵盖整个开发堆栈。 GreatFrontEnd专注于**前端系统设计**，即客户端应用程序和UI组件的系统设计和架构，而不是后端分布式系统。
+系统设计面试可以采用多种形式，涵盖整个开发堆栈。 GreatFrontEnd 专注于**前端系统设计**，即客户端应用程序和 UI 组件的系统设计和架构，而不是后端分布式系统。
 
 我们编写了一个全面的[前端系统设计指南](/system-design)，您绝对应该查看。
 
 ## 遵循最佳实践设计您的系统
 
-无论您被要求设计应用程序、游戏还是UI组件，面试中进行系统设计时，都需要特别注意一些事项。 结合我们的[用户界面问题备忘单](/front-end-interview-guidebook/user-interface-questions-cheatsheet)中的提示，提升您的前端面试游戏。
+无论您被要求设计应用程序、游戏还是 UI 组件，面试中进行系统设计时，都需要特别注意一些事项。 结合我们的[用户界面问题备忘单](/front-end-interview-guidebook/user-interface-questions-cheatsheet)中的提示，提升您的前端面试游戏。
 
 ## 练习问题
 
-GreatFrontEnd包括许多前端系统设计案例研究和真实世界的例子，包括：
+GreatFrontEnd 包括许多前端系统设计案例研究和真实世界的例子，包括：
 
--   [新闻动态（例如Facebook）](/questions/system-design/news-feed-facebook)
--   [自动完成组件](/questions/system-design/autocomplete)
--   [电子商务网站（例如亚马逊）](/questions/system-design/e-commerce-amazon)
--   [图片轮播](/questions/system-design/image-carousel)
+- [新闻动态（例如 Facebook）](/questions/system-design/news-feed-facebook)
+- [自动完成组件](/questions/system-design/autocomplete)
+- [电子商务网站（例如亚马逊）](/questions/system-design/e-commerce-amazon)
+- [图片轮播](/questions/system-design/image-carousel)

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

@@ -7,21 +7,21 @@ Aqui estão algumas dicas que você pode usar para melhorar as interfaces de usu
 
 ## Geral
 
--   **Divida o problema**: Divida o problema em etapas/marcos que se constroem progressivamente e escreva seu código de forma progressiva.
--   **Teste frequentemente**: Teste a interface de usuário no navegador após concluir cada recurso para que você possa identificar bugs precocemente. Bugs detectados mais cedo são mais fáceis de corrigir. Certifique-se de que o recurso atual está funcionando antes de passar para o próximo recurso.
--   **Use frameworks JavaScript, se possível**: Sua vida será muito mais fácil se você optar por construir interfaces de usuário complexas usando JavaScript puro (Vanilla JavaScript), já que o código pode ficar muito longo e confuso rapidamente. Recomendamos construir aplicativos e jogos usando um framework, se possível.
--   **Pense antecipadamente e planeje adequadamente**: Pense em quais recursos seu entrevistador pode pedir para adicionar a seguir. Projete seu código de forma que seja fácil adicionar novos recursos.
+- **Divida o problema**: Divida o problema em etapas/marcos que se constroem progressivamente e escreva seu código de forma progressiva.
+- **Teste frequentemente**: Teste a interface de usuário no navegador após concluir cada recurso para que você possa identificar bugs precocemente. Bugs detectados mais cedo são mais fáceis de corrigir. Certifique-se de que o recurso atual está funcionando antes de passar para o próximo recurso.
+- **Use frameworks JavaScript, se possível**: Sua vida será muito mais fácil se você optar por construir interfaces de usuário complexas usando JavaScript puro (Vanilla JavaScript), já que o código pode ficar muito longo e confuso rapidamente. Recomendamos construir aplicativos e jogos usando um framework, se possível.
+- **Pense antecipadamente e planeje adequadamente**: Pense em quais recursos seu entrevistador pode pedir para adicionar a seguir. Projete seu código de forma que seja fácil adicionar novos recursos.
 
 ## Organização de Componentes
 
 Como você estrutura seu código?
 
--   **Adote o [Padrão Contêiner/Apresentação](https://www.patterns.dev/posts/presentational-container-pattern/)**: Para alcançar um bom desacoplamento, o código de renderização deve ser independente da origem dos dados. Separe os componentes em um externo que fornece os dados e um interno sem estado que renderiza a visualização com base nos dados. Isso facilita a transição da visualização do estado local do componente/aplicativo para os dados carregados da rede e vice-versa. Você só precisa alterar o componente externo, e o componente interno pode ser usado como está.
--   **Divida o aplicativo em subcomponentes**: Se a interface do usuário tiver várias partes, divida-a em componentes menores e identifique as props/estado necessários para cada componente.
--   **Área de superfície da API mínima**: Não passe dados em excesso para componentes internos que não os necessitam.
--   **Instanciação de Componentes**: Ao criar componentes de interface do usuário, defina APIs (geralmente funções) que permitam a criação de várias instâncias independentes dos componentes, juntamente com opções configuráveis e valores padrão. Evite escrever código (por exemplo, dependendo de variáveis globais) que impeça a criação de instâncias separadas de componentes de interface do usuário.
-    -   **JavaScript Puro (Vanilla JavaScript)**: Crie uma função que receba um elemento DOM (o elemento de contêiner) e um objeto de opções. Dentro da função, você pode criar dinamicamente elementos DOM e anexá-los ao elemento de contêiner. Outra fonte de inspiração para uma API de componente é o [jQuery UI](https://jqueryui.com), mas ele tem uma dependência do jQuery.
-    -   **Outros Frameworks de UI em JavaScript**: A maioria dos modernos frameworks de UI em JavaScript, como o React, o obriga a pensar em termos de componentes por padrão.
+- **Adote o [Padrão Contêiner/Apresentação](https://www.patterns.dev/posts/presentational-container-pattern/)**: Para alcançar um bom desacoplamento, o código de renderização deve ser independente da origem dos dados. Separe os componentes em um externo que fornece os dados e um interno sem estado que renderiza a visualização com base nos dados. Isso facilita a transição da visualização do estado local do componente/aplicativo para os dados carregados da rede e vice-versa. Você só precisa alterar o componente externo, e o componente interno pode ser usado como está.
+- **Divida o aplicativo em subcomponentes**: Se a interface do usuário tiver várias partes, divida-a em componentes menores e identifique as props/estado necessários para cada componente.
+- **Área de superfície da API mínima**: Não passe dados em excesso para componentes internos que não os necessitam.
+- **Instanciação de Componentes**: Ao criar componentes de interface do usuário, defina APIs (geralmente funções) que permitam a criação de várias instâncias independentes dos componentes, juntamente com opções configuráveis e valores padrão. Evite escrever código (por exemplo, dependendo de variáveis globais) que impeça a criação de instâncias separadas de componentes de interface do usuário.
+  - **JavaScript Puro (Vanilla JavaScript)**: Crie uma função que receba um elemento DOM (o elemento de contêiner) e um objeto de opções. Dentro da função, você pode criar dinamicamente elementos DOM e anexá-los ao elemento de contêiner. Outra fonte de inspiração para uma API de componente é o [jQuery UI](https://jqueryui.com), mas ele tem uma dependência do jQuery.
+  - **Outros Frameworks de UI em JavaScript**: A maioria dos modernos frameworks de UI em JavaScript, como o React, o obriga a pensar em termos de componentes por padrão.
 
 ## Design de Estado
 
@@ -29,10 +29,10 @@ Estado é a informação que muda ao longo do tempo em sua interface do usuário
 
 A maioria das perguntas de entrevistas relacionadas à interface do usuário exigirá o uso de estado, e projetar o estado de forma adequada é de extrema importância.
 
--   **Determine o estado mínimo necessário em sua interface do usuário**: Quanto menor o estado, mais fácil é ler e entender o código -> menor probabilidade de erros.
-    -   Identificar o estado essencial versus o estado derivado. Estado derivado é um estado que pode ser calculado a partir do estado essencial.
--   **Separe o código de renderização do código de gerenciamento de dados**: Torne a interface do usuário uma função de seus dados e separe seu código em dois grupos (código de renderização e código de gerenciamento de dados) para uma melhor legibilidade. Se você estiver usando frameworks JavaScript como o React, mais ou menos será obrigado a fazer isso.
--   **Utilize o padrão de redutor de estado para interações de estado complexas**: Se a pergunta exigir muitos campos de estado e certas ações requererem a alteração de vários campos ao mesmo tempo, utilize um [redutor para consolidar a lógica de atualização de estado](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer). Primeiramente popularizado pelo Redux, o padrão de redutor de estado o incentiva a determinar o estado da sua interface de usuário, as ações que podem ser realizadas e como combinar ações com o estado para derivar o próximo estado. Se você estiver usando o React, é possível alcançar esse padrão por meio do gancho (hook) [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer) do React. Geralmente, o Redux é excessivo para entrevistas, e `useReducer` deve ser suficiente.
+- **Determine o estado mínimo necessário em sua interface do usuário**: Quanto menor o estado, mais fácil é ler e entender o código -> menor probabilidade de erros.
+  - Identificar o estado essencial versus o estado derivado. Estado derivado é um estado que pode ser calculado a partir do estado essencial.
+- **Separe o código de renderização do código de gerenciamento de dados**: Torne a interface do usuário uma função de seus dados e separe seu código em dois grupos (código de renderização e código de gerenciamento de dados) para uma melhor legibilidade. Se você estiver usando frameworks JavaScript como o React, mais ou menos será obrigado a fazer isso.
+- **Utilize o padrão de redutor de estado para interações de estado complexas**: Se a pergunta exigir muitos campos de estado e certas ações requererem a alteração de vários campos ao mesmo tempo, utilize um [redutor para consolidar a lógica de atualização de estado](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer). Primeiramente popularizado pelo Redux, o padrão de redutor de estado o incentiva a determinar o estado da sua interface de usuário, as ações que podem ser realizadas e como combinar ações com o estado para derivar o próximo estado. Se você estiver usando o React, é possível alcançar esse padrão por meio do gancho (hook) [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer) do React. Geralmente, o Redux é excessivo para entrevistas, e `useReducer` deve ser suficiente.
 
 A documentação do [React](https://beta.reactjs.org) sobre ["Gerenciamento de Estado"](https://beta.reactjs.org/learn/managing-state) é um excelente recurso sobre como projetar e usar o estado de componentes corretamente. Algumas das ideias mencionadas não são específicas do React e podem ser aplicadas a qualquer estrutura de interface do usuário (UI).
 
@@ -40,88 +40,88 @@ A documentação do [React](https://beta.reactjs.org) sobre ["Gerenciamento de E
 
 O seu JavaScript utiliza uma sintaxe moderna da linguagem e boas práticas, evitando práticas ruins?
 
--   **Utilize um guia de estilo**: Utilize um guia de estilo de JavaScript como o [Guia de Estilo JavaScript da Airbnb](https://github.com/airbnb/javascript). Durante o desenvolvimento, ferramentas de análise estática como o [ESLint](https://eslint.org) podem ajudar a aplicar algumas dessas boas práticas. No entanto, essas ferramentas podem não estar disponíveis durante entrevistas. Tente se acostumar a escrever código com um bom estilo de codificação sem depender de uma ferramenta.
--   **Não altere o ambiente global**: Isso se aplica a cenários de JavaScript puro (Vanilla JavaScript). Evite poluir o escopo global ao declarar variáveis e funções globais. Escreva uma Expressão de Função Imediatamente Invocada (IIFE) e coloque todo o código personalizado dentro dela.
+- **Utilize um guia de estilo**: Utilize um guia de estilo de JavaScript como o [Guia de Estilo JavaScript da Airbnb](https://github.com/airbnb/javascript). Durante o desenvolvimento, ferramentas de análise estática como o [ESLint](https://eslint.org) podem ajudar a aplicar algumas dessas boas práticas. No entanto, essas ferramentas podem não estar disponíveis durante entrevistas. Tente se acostumar a escrever código com um bom estilo de codificação sem depender de uma ferramenta.
+- **Não altere o ambiente global**: Isso se aplica a cenários de JavaScript puro (Vanilla JavaScript). Evite poluir o escopo global ao declarar variáveis e funções globais. Escreva uma Expressão de Função Imediatamente Invocada (IIFE) e coloque todo o código personalizado dentro dela.
 
 ## HTML
 
 Você está escrevendo HTML semântico com os atributos corretos?
 
--   **Tags semânticas**: Use tags de cabeçalho para títulos, tags de botão para elementos interativos, tags de lista para elementos sequenciais, e assim por diante. Não utilize `<div>` para tudo!
--   **Hierarquia de títulos**: Garanta que as tags de cabeçalho tenham uma hierarquia e que não haja mais de um `<h1>` no DOM.
--   **Elementos interativos**: Utilize `<button>` para elementos que requerem interação. Evite adicionar manipuladores de clique (click handlers) a elementos `<div>` e `<span>`.
+- **Tags semânticas**: Use tags de cabeçalho para títulos, tags de botão para elementos interativos, tags de lista para elementos sequenciais, e assim por diante. Não utilize `<div>` para tudo!
+- **Hierarquia de títulos**: Garanta que as tags de cabeçalho tenham uma hierarquia e que não haja mais de um `<h1>` no DOM.
+- **Elementos interativos**: Utilize `<button>` para elementos que requerem interação. Evite adicionar manipuladores de clique (click handlers) a elementos `<div>` e `<span>`.
 
 ### Formulários
 
 Os formulários são complexos por si só e merecem sua própria seção.
 
--   **Vincular rótulos e entradas**: Os elementos `<input>` devem ser vinculados aos elementos `<label>` usando os atributos `id` e `for`.
--   **Agrupe entradas em um formulário**: Os elementos `<input>` devem ser envolvidos em um elemento `<form>` para que ao clicar nos botões e pressionar Enter o formulário seja enviado. Lembre-se de adicionar `event.preventDefault()` se a solicitação de rede deve ser feita usando Ajax.
--   **Os campos de entrada devem ter tipos apropriados**: Os elementos `<input>` devem ter o atributo `type` apropriado, como `email`, `password`, `number`, etc.
--   **Aproveite a validação nativa de formulários HTML**: Sempre que possível, utilize o atributo `required` combinado com outros atributos como `pattern`, `min`, `max`, etc.
+- **Vincular rótulos e entradas**: Os elementos `<input>` devem ser vinculados aos elementos `<label>` usando os atributos `id` e `for`.
+- **Agrupe entradas em um formulário**: Os elementos `<input>` devem ser envolvidos em um elemento `<form>` para que ao clicar nos botões e pressionar Enter o formulário seja enviado. Lembre-se de adicionar `event.preventDefault()` se a solicitação de rede deve ser feita usando Ajax.
+- **Os campos de entrada devem ter tipos apropriados**: Os elementos `<input>` devem ter o atributo `type` apropriado, como `email`, `password`, `number`, etc.
+- **Aproveite a validação nativa de formulários HTML**: Sempre que possível, utilize o atributo `required` combinado com outros atributos como `pattern`, `min`, `max`, etc.
 
 ## CSS/Styling
 
 Seu CSS está escrito de forma escalável e fácil de entender?
 
--   **Escreva CSS puro**: Aprenda a escrever CSS sem depender de pré-processadores como [Sass](https://sass-lang.com/) e [Less](https://lesscss.org/). Nem todos os ambientes permitirão o uso de processadores, e as perguntas de entrevista provavelmente são pequenas e não se beneficiam realmente dos recursos que os pré-processadores CSS trazem. A funcionalidade mais útil dos processadores CSS é o uso de variáveis, que está disponível nativamente por meio das propriedades personalizadas CSS (variáveis).
--   **Adote uma convenção de nomenclatura CSS**: Considere adotar uma metodologia de nomenclatura CSS como o [Block Element Modifier (BEM)](https://getbem.com) ao escrever suas classes.
--   **Evite seletores `#id` em componentes**: Ao construir componentes de interface do usuário destinados a serem reutilizados (por exemplo, botões, abas, menus, modais etc.), evite usar seletores `#id` no HTML, pois os `id` devem ser globalmente exclusivos, mas você pode ter várias instâncias do componente.
--   **Organize seu CSS**: Leia sobre como [organizar seu CSS em projetos grandes](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing) e como ter uma [Arquitetura Escalável e Modular para CSS](http://smacss.com/).
+- **Escreva CSS puro**: Aprenda a escrever CSS sem depender de pré-processadores como [Sass](https://sass-lang.com/) e [Less](https://lesscss.org/). Nem todos os ambientes permitirão o uso de processadores, e as perguntas de entrevista provavelmente são pequenas e não se beneficiam realmente dos recursos que os pré-processadores CSS trazem. A funcionalidade mais útil dos processadores CSS é o uso de variáveis, que está disponível nativamente por meio das propriedades personalizadas CSS (variáveis).
+- **Adote uma convenção de nomenclatura CSS**: Considere adotar uma metodologia de nomenclatura CSS como o [Block Element Modifier (BEM)](https://getbem.com) ao escrever suas classes.
+- **Evite seletores `#id` em componentes**: Ao construir componentes de interface do usuário destinados a serem reutilizados (por exemplo, botões, abas, menus, modais etc.), evite usar seletores `#id` no HTML, pois os `id` devem ser globalmente exclusivos, mas você pode ter várias instâncias do componente.
+- **Organize seu CSS**: Leia sobre como [organizar seu CSS em projetos grandes](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing) e como ter uma [Arquitetura Escalável e Modular para CSS](http://smacss.com/).
 
 ## Experiência do Usuário
 
 Sua interface de usuário proporciona uma ótima experiência para o usuário?
 
--   **Amigável para dispositivos móveis**: Verifique se você precisa fazer com que sua interface de usuário funcione bem em dispositivos móveis.
-    -   As consultas de mídia CSS podem ser usadas para renderizar um layout diferente em dispositivos móveis.
-    -   Faça elementos interativos, como botões, grandes o suficiente para serem pressionados (recomendamos pelo menos 44 x 44 px) e com espaço suficiente entre eles.
--   **Estados de erro**: Reflita os erros prontamente e de forma clara - erros de validação de formulário, erros de solicitação de rede.
--   **Lidar com a renderização de imagens de diferentes dimensões**: Faça sua interface de usuário funcionar para renderizar imagens de todas as dimensões, preservando ao mesmo tempo as proporções originais.
-    -   Use `background-image` do CSS em conjunto com `background-position: contain` para que a imagem se ajuste dentro da área definida. Se for aceitável que a imagem seja cortada (por exemplo, para fundos degradê), use `background-position: cover`.
-    -   As tags `<img>` têm uma propriedade semelhante chamada `object-fit` com valores `contain` e `cover`.
--   **Atualizações otimistas**: Técnica avançada em que o estado de sucesso é refletido mesmo que a solicitação de rede ainda esteja pendente. Se a solicitação falhar, reverta as alterações na interface do usuário e exiba uma mensagem de erro.
+- **Amigável para dispositivos móveis**: Verifique se você precisa fazer com que sua interface de usuário funcione bem em dispositivos móveis.
+  - As consultas de mídia CSS podem ser usadas para renderizar um layout diferente em dispositivos móveis.
+  - Faça elementos interativos, como botões, grandes o suficiente para serem pressionados (recomendamos pelo menos 44 x 44 px) e com espaço suficiente entre eles.
+- **Estados de erro**: Reflita os erros prontamente e de forma clara - erros de validação de formulário, erros de solicitação de rede.
+- **Lidar com a renderização de imagens de diferentes dimensões**: Faça sua interface de usuário funcionar para renderizar imagens de todas as dimensões, preservando ao mesmo tempo as proporções originais.
+  - Use `background-image` do CSS em conjunto com `background-position: contain` para que a imagem se ajuste dentro da área definida. Se for aceitável que a imagem seja cortada (por exemplo, para fundos degradê), use `background-position: cover`.
+  - As tags `<img>` têm uma propriedade semelhante chamada `object-fit` com valores `contain` e `cover`.
+- **Atualizações otimistas**: Técnica avançada em que o estado de sucesso é refletido mesmo que a solicitação de rede ainda esteja pendente. Se a solicitação falhar, reverta as alterações na interface do usuário e exiba uma mensagem de erro.
 
 ## Rede
 
 Sua interface do usuário lida com a natureza imprevisível das solicitações e condições de rede?
 
--   **Reflita os estados da solicitação de rede**: Se a interface do usuário envolver a realização de solicitações de rede, mostre claramente o estado pendente/sucesso/falha das solicitações
-    -   **Pendente**: Desativar campos/botões, mostrar um spinner.
-    -   **Erro**: Mostrar uma mensagem de erro.
-    -   **Sucesso**: Atualizar a interface do usuário e/ou mostrar uma mensagem de sucesso.
--   **Condições de corrida**: Uma razão comum é devido a solicitações de rede paralelas, onde a ordem de resposta não é garantida. Uma solicitação feita posteriormente poderia receber uma resposta mais cedo. Se a sua interface de usuário for suscetível a isso, você pode acompanhar as solicitações mais recentes e ignorar os resultados das mais antigas. Alternativamente, faça com que sua interface de usuário não possa enviar várias solicitações de rede ao mesmo tempo, por exemplo, desabilitando elementos que acionam solicitações de rede após serem clicados.
--   **Evitar solicitações duplicadas**: Os botões devem ser desabilitados após o envio para evitar a realização de solicitações de rede duplicadas.
--   **Consolidando solicitações**: Se a interface de usuário estiver fazendo um grande número de solicitações de rede, você pode:
-    -   **Debounce/throttle**: Limite a taxa de solicitações de rede disparadas.
-    -   **Solicitações em lote**: Agrupe solicitações juntas e faça apenas uma única solicitação. Isso requer que o lado do servidor suporte esse formato.
--   **Caching**: Se uma solicitação com os mesmos parâmetros foi feita recentemente, você pode reutilizar a resposta anterior e economizar uma ida e volta na rede?
--   **Tempo limite da solicitação**: Você pode querer artificialmente mostrar que a solicitação falhou (expirou) se a solicitação não receber uma resposta após uma duração estipulada.
--   **Atualizações otimistas**: Técnica avançada na qual o estado de sucesso é refletido mesmo quando a solicitação de rede ainda está pendente. Se a solicitação falhar, reverta as alterações na interface de usuário e exiba uma mensagem de erro.
+- **Reflita os estados da solicitação de rede**: Se a interface do usuário envolver a realização de solicitações de rede, mostre claramente o estado pendente/sucesso/falha das solicitações
+  - **Pendente**: Desativar campos/botões, mostrar um spinner.
+  - **Erro**: Mostrar uma mensagem de erro.
+  - **Sucesso**: Atualizar a interface do usuário e/ou mostrar uma mensagem de sucesso.
+- **Condições de corrida**: Uma razão comum é devido a solicitações de rede paralelas, onde a ordem de resposta não é garantida. Uma solicitação feita posteriormente poderia receber uma resposta mais cedo. Se a sua interface de usuário for suscetível a isso, você pode acompanhar as solicitações mais recentes e ignorar os resultados das mais antigas. Alternativamente, faça com que sua interface de usuário não possa enviar várias solicitações de rede ao mesmo tempo, por exemplo, desabilitando elementos que acionam solicitações de rede após serem clicados.
+- **Evitar solicitações duplicadas**: Os botões devem ser desabilitados após o envio para evitar a realização de solicitações de rede duplicadas.
+- **Consolidando solicitações**: Se a interface de usuário estiver fazendo um grande número de solicitações de rede, você pode:
+  - **Debounce/throttle**: Limite a taxa de solicitações de rede disparadas.
+  - **Solicitações em lote**: Agrupe solicitações juntas e faça apenas uma única solicitação. Isso requer que o lado do servidor suporte esse formato.
+- **Caching**: Se uma solicitação com os mesmos parâmetros foi feita recentemente, você pode reutilizar a resposta anterior e economizar uma ida e volta na rede?
+- **Tempo limite da solicitação**: Você pode querer artificialmente mostrar que a solicitação falhou (expirou) se a solicitação não receber uma resposta após uma duração estipulada.
+- **Atualizações otimistas**: Técnica avançada na qual o estado de sucesso é refletido mesmo quando a solicitação de rede ainda está pendente. Se a solicitação falhar, reverta as alterações na interface de usuário e exiba uma mensagem de erro.
 
 ## Acessibilidade (a11y)
 
 Lidar com acessibilidade na interface de usuário é uma grande vantagem e, em alguns casos, um requisito para engenheiros sênior.
 
--   Você consegue usar a interface de usuário apenas com o teclado?
--   Você consegue usar o componente da sua interface com um leitor de tela?
--   Seu componente de interface pode funcionar sem cores?
--   Seu componente de interface pode funcionar sem som?
+- Você consegue usar a interface de usuário apenas com o teclado?
+- Você consegue usar o componente da sua interface com um leitor de tela?
+- Seu componente de interface pode funcionar sem cores?
+- Seu componente de interface pode funcionar sem som?
 
 Fonte: [Componentes de UI Acessíveis para o web](https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67)
 
--   **Leitores de tela, papéis, estados e propriedades ARIA**:
-    -   Adicione os `aria-role`s corretos para elementos personalizados construídos sem o uso de tags HTML personalizadas.
-    -   Use `aria-label`s para descrever elementos onde o texto não é exibido (por exemplo, botões apenas com ícones).
-    -   Vincule elementos de mensagens de erro aos elementos responsáveis por eles por meio de `aria-describedby` ou `aria-errormessage`.
-    -   **Texto `alt` de imagens**: Adicione o atributo `alt` aos elementos `<img>` para que leitores de tela possam descrever a imagem.
--   **Interações por teclado**
-    -   Adicione o atributo `tabindex` aos elementos que você deseja que sejam focáveis através da navegação por teclado.
-    -   Elementos podem ser acionados via teclado.
-    -   Verifique se a ordem de foco faz sentido.
--   **Problemas visuais**
-    -   **Contraste de cores**: Contraste de cores suficiente entre texto/imagens e o plano de fundo.
-    -   **Tamanho dos elementos**: o tamanho da fonte e dos elementos interativos deve ser grande o suficiente para o meio pretendido.
+- **Leitores de tela, papéis, estados e propriedades ARIA**:
+  - Adicione os `aria-role`s corretos para elementos personalizados construídos sem o uso de tags HTML personalizadas.
+  - Use `aria-label`s para descrever elementos onde o texto não é exibido (por exemplo, botões apenas com ícones).
+  - Vincule elementos de mensagens de erro aos elementos responsáveis por eles por meio de `aria-describedby` ou `aria-errormessage`.
+  - **Texto `alt` de imagens**: Adicione o atributo `alt` aos elementos `<img>` para que leitores de tela possam descrever a imagem.
+- **Interações por teclado**
+  - Adicione o atributo `tabindex` aos elementos que você deseja que sejam focáveis através da navegação por teclado.
+  - Elementos podem ser acionados via teclado.
+  - Verifique se a ordem de foco faz sentido.
+- **Problemas visuais**
+  - **Contraste de cores**: Contraste de cores suficiente entre texto/imagens e o plano de fundo.
+  - **Tamanho dos elementos**: o tamanho da fonte e dos elementos interativos deve ser grande o suficiente para o meio pretendido.
 
 o web.dev, do Google, oferece um [curso abrangente e gratuito sobre acessibilidade](https://web.dev/learn/accessibility/), o qual recomendamos fortemente.
 
@@ -129,32 +129,32 @@ o web.dev, do Google, oferece um [curso abrangente e gratuito sobre acessibilida
 
 Provavelmente não há tempo suficiente para lidar com todos os cenários de casos extremos no seu código durante a entrevista, mas é bom mencioná-los ao entrevistador para ganhar pontos extras.
 
--   **Lidar com strings longas**: Strings na interface de usuário (por exemplo, títulos/rótulos de botões) podem fazer com que a interface de usuário se comporte de maneira estranha, como o overflow de texto, afetando a posição de elementos circundantes. Strings longas podem ser resultado de entradas do usuário ou de traduções.
--   **Estados vazios**: Mostrar uma mensagem/indicador de estado vazio para indicar a ausência de conteúdo, por exemplo, quando a lista está vazia. Mostrar nada pode fazer com que o usuário pense que há uma solicitação de rede pendente e que os dados ainda estão sendo buscados.
--   **Muitos itens em uma lista**: Mostrar muitos itens em uma única página pode resultar em uma má experiência do usuário (o usuário precisa rolar muito) e baixo desempenho em termos de responsividade e consumo de memória.
-    -   **Paginação**: Divida uma longa lista de itens em várias páginas.
-    -   [**Listas virtuais**](https://www.patterns.dev/posts/virtual-lists): Renderização apenas das linhas visíveis de conteúdo em uma lista dinâmica em vez da lista inteira.
-    -   Truncar o conteúdo excedente e mostrar uma elipse. A propriedade CSS `word-break` será útil.
-    -   Limite o conteúdo às primeiras X caracteres/palavras e oculte o conteúdo excedente atrás de um botão "Mostrar Mais".
+- **Lidar com strings longas**: Strings na interface de usuário (por exemplo, títulos/rótulos de botões) podem fazer com que a interface de usuário se comporte de maneira estranha, como o overflow de texto, afetando a posição de elementos circundantes. Strings longas podem ser resultado de entradas do usuário ou de traduções.
+- **Estados vazios**: Mostrar uma mensagem/indicador de estado vazio para indicar a ausência de conteúdo, por exemplo, quando a lista está vazia. Mostrar nada pode fazer com que o usuário pense que há uma solicitação de rede pendente e que os dados ainda estão sendo buscados.
+- **Muitos itens em uma lista**: Mostrar muitos itens em uma única página pode resultar em uma má experiência do usuário (o usuário precisa rolar muito) e baixo desempenho em termos de responsividade e consumo de memória.
+  - **Paginação**: Divida uma longa lista de itens em várias páginas.
+  - [**Listas virtuais**](https://www.patterns.dev/posts/virtual-lists): Renderização apenas das linhas visíveis de conteúdo em uma lista dinâmica em vez da lista inteira.
+  - Truncar o conteúdo excedente e mostrar uma elipse. A propriedade CSS `word-break` será útil.
+  - Limite o conteúdo às primeiras X caracteres/palavras e oculte o conteúdo excedente atrás de um botão "Mostrar Mais".
 
 ## Performance
 
--   **Throttle/debounce**: Throttle e debounce são técnicas de limitação de taxa para evitar operações desnecessárias. Essa técnica pode ser usada para operações que não são extremamente sensíveis ao tempo, como solicitações de rede e callbacks de eventos de rolagem/redimensionamento.
--   **Cache**: Os resultados de cálculos duplicados ou solicitações de rede podem ser armazenados em memória/armazenamento do navegador e não repetidos.
--   **Carregamento sob demanda**: Carregue os dados/código do componente apenas quando forem necessários, em vez de carregar tudo no início.
--   **Pré-carregamento de dados**: Reduza a latência de rede pré-carregando dados imediatamente antes de serem necessários, para que as atualizações apareçam instantaneamente.
--   **Muitos itens em uma lista**: Consulte o ponto sob "Casos Especiais" acima.
+- **Throttle/debounce**: Throttle e debounce são técnicas de limitação de taxa para evitar operações desnecessárias. Essa técnica pode ser usada para operações que não são extremamente sensíveis ao tempo, como solicitações de rede e callbacks de eventos de rolagem/redimensionamento.
+- **Cache**: Os resultados de cálculos duplicados ou solicitações de rede podem ser armazenados em memória/armazenamento do navegador e não repetidos.
+- **Carregamento sob demanda**: Carregue os dados/código do componente apenas quando forem necessários, em vez de carregar tudo no início.
+- **Pré-carregamento de dados**: Reduza a latência de rede pré-carregando dados imediatamente antes de serem necessários, para que as atualizações apareçam instantaneamente.
+- **Muitos itens em uma lista**: Consulte o ponto sob "Casos Especiais" acima.
 
 ## Segurança
 
--   **Scripting Cross-site (XSS)**: Evitar atribuir a [`Element.innerHTML`]\(https://developer.mozilla. rg/en-US/docs/Web/API/Element/innerHTML) ou `dangerouslySetInnerHTML` do React ao renderizar conteúdo no DOM se ele vier de usuários para impedir script entre sites, atribuir ao [`Node. extContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) ou use o método experimental[`Element.setHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML) em vez disso. Consulte o [Folha de Dicas de Prevenção de XSS do OWASP](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
--   **Codificação de saída para "Contextos de URL"**: Se a entrada fornecida pelo usuário puder ser usada em parâmetros de consulta de URL, use `encodeURIComponent` para evitar que valores indesejados façam parte da URL (por exemplo, parâmetros de consulta extras).
--   **Cross Site Request Forgery (CSRF)**: Consulte a [OWASP's XSS Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) para obter informações sobre prevenção de CSRF e outras vulnerabilidades de segurança.
+- **Scripting Cross-site (XSS)**: Evitar atribuir a [`Element.innerHTML`]\(https://developer.mozilla. rg/en-US/docs/Web/API/Element/innerHTML) ou `dangerouslySetInnerHTML` do React ao renderizar conteúdo no DOM se ele vier de usuários para impedir script entre sites, atribuir ao [`Node. extContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) ou use o método experimental[`Element.setHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML) em vez disso. Consulte o [Folha de Dicas de Prevenção de XSS do OWASP](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
+- **Codificação de saída para "Contextos de URL"**: Se a entrada fornecida pelo usuário puder ser usada em parâmetros de consulta de URL, use `encodeURIComponent` para evitar que valores indesejados façam parte da URL (por exemplo, parâmetros de consulta extras).
+- **Cross Site Request Forgery (CSRF)**: Consulte a [OWASP's XSS Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) para obter informações sobre prevenção de CSRF e outras vulnerabilidades de segurança.
 
 ## Internacionalização (i18n)
 
 Sua interface de usuário funciona para múltiplos idiomas? Quão fácil é adicionar suporte para mais idiomas?
 
--   **Evite a codificação rígida de rótulos em um determinado idioma**: Alguns componentes de interface do usuário têm strings de rótulo incorporadas (por exemplo, um carrossel de imagens tem rótulos para os botões anterior/próximo). Seria bom permitir a personalização dessas strings de rótulo tornando-as parte das props/opções do componente.
--   **A UI pode renderizar strings longas**: Consulte a seção acima sobre a renderização de strings longas.
--   **Idiomas da direita para a esquerda**: Alguns idiomas (por exemplo, árabe, hebraico) são lidos da direita para a esquerda, e a interface do usuário precisa ser virada horizontalmente. Use [propriedades lógicas CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) para fazer seu layout funcionar para diferentes [modos de escrita](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes).
+- **Evite a codificação rígida de rótulos em um determinado idioma**: Alguns componentes de interface do usuário têm strings de rótulo incorporadas (por exemplo, um carrossel de imagens tem rótulos para os botões anterior/próximo). Seria bom permitir a personalização dessas strings de rótulo tornando-as parte das props/opções do componente.
+- **A UI pode renderizar strings longas**: Consulte a seção acima sobre a renderização de strings longas.
+- **Idiomas da direita para a esquerda**: Alguns idiomas (por exemplo, árabe, hebraico) são lidos da direita para a esquerda, e a interface do usuário precisa ser virada horizontalmente. Use [propriedades lógicas CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) para fazer seu layout funcionar para diferentes [modos de escrita](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes).

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

@@ -3,158 +3,158 @@ title: 前端用户界面问题备忘单
 description: 在前端/网络开发人员面试时，改善你必须建立的用户界面的顶级技巧 - 代码结构、管理状态、可访问性等。
 ---
 
-以下是一些提示，可帮助您在前端/ Web开发人员面试期间改善您必须构建/设计的用户界面。 这些提示可应用于[用户界面编码面试](/front-end-interview-guidebook/user-interface)和[前端系统设计面试](/system-design/types-of-questions)。
+以下是一些提示，可帮助您在前端/ Web 开发人员面试期间改善您必须构建/设计的用户界面。 这些提示可应用于[用户界面编码面试](/front-end-interview-guidebook/user-interface)和[前端系统设计面试](/system-design/types-of-questions)。
 
 ## 概览
 
--   **分解问题**:将问题分解为可以逐步构建的阶段/里程碑，并逐步编写您的代码。
--   **经常测试**:完成每个功能后在浏览器中测试UI，以便您可以尽早捕获漏洞。 较早捕获的错误更容易修复。 确保当前功能正常工作，然后再进行下一个功能。
--   **使用JavaScript框架（如果可能）**: 如果您选择使用纯JavaScript构建复杂的UI，您的生活将非常艰难，因为代码可能会很快变得非常长而杂乱。 我们建议使用框架构建应用程序和游戏。
--   **未雨绸缪，计划周全**:考虑一下您的面试官可能要求您添加下一个功能。 设计代码的方式，使新功能可以轻松添加。
+- **分解问题**:将问题分解为可以逐步构建的阶段/里程碑，并逐步编写您的代码。
+- **经常测试**:完成每个功能后在浏览器中测试 UI，以便您可以尽早捕获漏洞。 较早捕获的错误更容易修复。 确保当前功能正常工作，然后再进行下一个功能。
+- **使用 JavaScript 框架（如果可能）**: 如果您选择使用纯 JavaScript 构建复杂的 UI，您的生活将非常艰难，因为代码可能会很快变得非常长而杂乱。 我们建议使用框架构建应用程序和游戏。
+- **未雨绸缪，计划周全**:考虑一下您的面试官可能要求您添加下一个功能。 设计代码的方式，使新功能可以轻松添加。
 
 ## 组件组织
 
 您如何构建代码？
 
--   **采用容器/表示模式**:为了实现良好的解耦合，渲染代码应该与数据源无关。 将组件分成提供数据的外部组件和根据数据呈现视图的内部无状态组件。 这使视图可以从本地组件/应用状态切换到从网络加载的数据等情况，反之亦然，只要更改外部组件，内部组件就可以按原样使用。
--   **将应用程序分解为子组件**: 如果UI具有多个部分，请将UI分解为较小的组件，并确定每个组件需要的属性/状态。
--   **最小API面积**: 不要将不需要的额外数据传递给内部组件。
--   **组件实例化**: 在要求构建UI组件时，定义API（通常是函数）以允许创建多个独立的组件实例，其中包括可配置的选项和默认值。 避免编写代码（例如依赖全局变量）以防止创建单独的UI组件实例。
-    -   **纯JavaScript**:创建一个接受DOM元素（容器元素）和选项对象的函数。 在函数内部，您可以动态创建DOM元素并将其附加到容器元素。 组件API的另一个灵感来源是[jQuery UI](https://jqueryui.com)，但它依赖于jQuery。
-    -   **其他JavaScript UI框架**：大多数现代JavaScript UI框架（如React）默认强制您按组件进行思考。
+- **采用容器/表示模式**:为了实现良好的解耦合，渲染代码应该与数据源无关。 将组件分成提供数据的外部组件和根据数据呈现视图的内部无状态组件。 这使视图可以从本地组件/应用状态切换到从网络加载的数据等情况，反之亦然，只要更改外部组件，内部组件就可以按原样使用。
+- **将应用程序分解为子组件**: 如果 UI 具有多个部分，请将 UI 分解为较小的组件，并确定每个组件需要的属性/状态。
+- **最小 API 面积**: 不要将不需要的额外数据传递给内部组件。
+- **组件实例化**: 在要求构建 UI 组件时，定义 API（通常是函数）以允许创建多个独立的组件实例，其中包括可配置的选项和默认值。 避免编写代码（例如依赖全局变量）以防止创建单独的 UI 组件实例。
+  - **纯 JavaScript**:创建一个接受 DOM 元素（容器元素）和选项对象的函数。 在函数内部，您可以动态创建 DOM 元素并将其附加到容器元素。 组件 API 的另一个灵感来源是[jQuery UI](https://jqueryui.com)，但它依赖于 jQuery。
+  - **其他 JavaScript UI 框架**：大多数现代 JavaScript UI 框架（如 React）默认强制您按组件进行思考。
 
 ## 状态设计
 
-状态是您的UI中随时间而变化的数据，通常是由用户交互或后台事件（网络请求响应、时间流逝、WebSocket事件）导致的。
+状态是您的 UI 中随时间而变化的数据，通常是由用户交互或后台事件（网络请求响应、时间流逝、WebSocket 事件）导致的。
 
-面试中的大多数UI问题都需要状态，因此设计状态非常重要。
+面试中的大多数 UI 问题都需要状态，因此设计状态非常重要。
 
--   **确定UI中所需的最小状态**: 状态越小，代码的可读性和理解能力就越强 -> 减少错误的可能性。
-    -   识别必要状态和派生状态。 派生状态是可以从必要状态计算出的状态。
--   **将呈现代码与数据管理代码分开**: 将UI作为数据的功能并将代码分为两组（呈现代码和数据管理代码），以获得更好的可读性。 如果使用诸如React之类的JavaScript框架，则一般强制执行此操作。
--   **对于复杂的状态交互，请使用状态-减少器模式**: 如果问题需要许多状态字段，并且某些操作需要同时更改多个字段，请使用[减少器来汇总状态更新逻辑](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer)。 由Redux首先推广，状态-减少器模式鼓励您确定UI的状态、可执行的操作以及如何将操作与状态结合以导出下一个状态。 如果您使用React，则可以通过[`useReducer` React hook](https://reactjs.org/docs/hooks-reference.html#usereducer)实现此模式。 Redux通常过于适用于面试，而`useReducer`应该足够。
+- **确定 UI 中所需的最小状态**: 状态越小，代码的可读性和理解能力就越强 -> 减少错误的可能性。
+  - 识别必要状态和派生状态。 派生状态是可以从必要状态计算出的状态。
+- **将呈现代码与数据管理代码分开**: 将 UI 作为数据的功能并将代码分为两组（呈现代码和数据管理代码），以获得更好的可读性。 如果使用诸如 React 之类的 JavaScript 框架，则一般强制执行此操作。
+- **对于复杂的状态交互，请使用状态-减少器模式**: 如果问题需要许多状态字段，并且某些操作需要同时更改多个字段，请使用[减少器来汇总状态更新逻辑](https://beta.reactjs.org/learn/extracting-state-logic-into-a-reducer)。 由 Redux 首先推广，状态-减少器模式鼓励您确定 UI 的状态、可执行的操作以及如何将操作与状态结合以导出下一个状态。 如果您使用 React，则可以通过[`useReducer` React hook](https://reactjs.org/docs/hooks-reference.html#usereducer)实现此模式。 Redux 通常过于适用于面试，而`useReducer`应该足够。
 
-React的文档["管理状态"](https://beta.reactjs.org/learn/managing-state)是有关如何正确设计和使用组件状态的杰出资源。 提到的一些想法与React无关，可以适用于任何UI框架。
+React 的文档["管理状态"](https://beta.reactjs.org/learn/managing-state)是有关如何正确设计和使用组件状态的杰出资源。 提到的一些想法与 React 无关，可以适用于任何 UI 框架。
 
 ## JavaScript
 
-您的JavaScript是否使用现代语言语法和优秀实践，同时避免不良实践？
+您的 JavaScript 是否使用现代语言语法和优秀实践，同时避免不良实践？
 
--   **使用样式指南**:使用JavaScript样式指南，如[Airbnb的JavaScript样式指南](https://github.com/airbnb/javascript)。 在开发过程中，静态分析工具如[ESLint](https://eslint.org)可以帮助您执行其中一些良好实践。 但是，在面试期间可能没有这些工具可用。 尝试适应使用良好编码风格编写代码，而不需要工具的帮助。
--   **不要触碰全局环境**:这适用于Vanilla JavaScript场景。 避免声明全局变量和全局函数以污染全局范围。 编写立即调用的函数表达式（IIFE）并将所有自定义代码放在其中。
+- **使用样式指南**:使用 JavaScript 样式指南，如[Airbnb 的 JavaScript 样式指南](https://github.com/airbnb/javascript)。 在开发过程中，静态分析工具如[ESLint](https://eslint.org)可以帮助您执行其中一些良好实践。 但是，在面试期间可能没有这些工具可用。 尝试适应使用良好编码风格编写代码，而不需要工具的帮助。
+- **不要触碰全局环境**:这适用于 Vanilla JavaScript 场景。 避免声明全局变量和全局函数以污染全局范围。 编写立即调用的函数表达式（IIFE）并将所有自定义代码放在其中。
 
 ## HTML
 
-您是否使用正确的属性编写语义化的HTML？
+您是否使用正确的属性编写语义化的 HTML？
 
--   **语义标签**: 为标题使用标题标签，为交互元素使用按钮标签，为连续元素使用列表标签等。 不要为所有内容使用`<div>`！
--   **标题层次**: 确保标题标签具有层次结构，并且DOM中没有多个`<h1>`。
--   **交互元素**: 使用`<button>`将要求交互的元素包含其中。 不要将单击处理程序添加到`<div>`和`<span>`中。
+- **语义标签**: 为标题使用标题标签，为交互元素使用按钮标签，为连续元素使用列表标签等。 不要为所有内容使用`<div>`！
+- **标题层次**: 确保标题标签具有层次结构，并且 DOM 中没有多个`<h1>`。
+- **交互元素**: 使用`<button>`将要求交互的元素包含其中。 不要将单击处理程序添加到`<div>`和`<span>`中。
 
 ### 表单
 
 表单本身很复杂，值得有自己的部分。
 
--   **链接标签和输入**: 使用`id`和`for`链接`<label>`中的`<input>`以防止用户意外点击文本。
--   **在表单中包装输入**: 将`<input>`包装在`<form>`中，以便单击按钮和按Enter将提交表单。 如果使用Ajax进行网络请求，则记得添加`event.preventDefault()`。
--   **输入应具有适当的类型**: `<input>`应具有适当的类型，例如电子邮件、密码、数字等。
--   **利用本机HTML表单验证**: 在可能的情况下，结合使用`required`属性和其他属性，如`pattern`、`min`、`max`等，以使用本机HTML表单验证。
+- **链接标签和输入**: 使用`id`和`for`链接`<label>`中的`<input>`以防止用户意外点击文本。
+- **在表单中包装输入**: 将`<input>`包装在`<form>`中，以便单击按钮和按 Enter 将提交表单。 如果使用 Ajax 进行网络请求，则记得添加`event.preventDefault()`。
+- **输入应具有适当的类型**: `<input>`应具有适当的类型，例如电子邮件、密码、数字等。
+- **利用本机 HTML 表单验证**: 在可能的情况下，结合使用`required`属性和其他属性，如`pattern`、`min`、`max`等，以使用本机 HTML 表单验证。
 
 ## CSS/样式
 
-您的CSS是以可扩展且易于理解的方式编写的吗？
+您的 CSS 是以可扩展且易于理解的方式编写的吗？
 
--   **编写Vanilla CSS**: 学会在没有processor的情况下编写CSS，如[Sass](https://sass-lang.com/)和[Less](https://lesscss.org/)。 并不是所有环境都允许使用处理器，而且面试问题可能很小，不会真正受益于CSS预处理器提供的功能。 CSS处理器最有用的功能是使用变量，这可以通过CSS自定义属性（变量）本机提供。
--   **采用CSS命名约定**: 在编写类时考虑采用CSS命名方法论，例如[块元素修饰符](https://getbem.com)。
--   **在组件中避免使用`#id`选择器**: 当构建可重用的UI组件（例如按钮、选项卡、菜单、模态框等）时，请避免在HTML中使用`#id`选择器，因为`id`是全局唯一的，但是您可以多个组件实例。
--   **组织您的CSS**: 阅读有关[在大型项目中组织CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing)和如何具有[可扩展和模块化的CSS架构](http://smacss.com/)的文章。
+- **编写 Vanilla CSS**: 学会在没有 processor 的情况下编写 CSS，如[Sass](https://sass-lang.com/)和[Less](https://lesscss.org/)。 并不是所有环境都允许使用处理器，而且面试问题可能很小，不会真正受益于 CSS 预处理器提供的功能。 CSS 处理器最有用的功能是使用变量，这可以通过 CSS 自定义属性（变量）本机提供。
+- **采用 CSS 命名约定**: 在编写类时考虑采用 CSS 命名方法论，例如[块元素修饰符](https://getbem.com)。
+- **在组件中避免使用`#id`选择器**: 当构建可重用的 UI 组件（例如按钮、选项卡、菜单、模态框等）时，请避免在 HTML 中使用`#id`选择器，因为`id`是全局唯一的，但是您可以多个组件实例。
+- **组织您的 CSS**: 阅读有关[在大型项目中组织 CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing)和如何具有[可扩展和模块化的 CSS 架构](http://smacss.com/)的文章。
 
 ## 用户体验
 
-您的UI提供了出色的用户体验吗？
+您的 UI 提供了出色的用户体验吗？
 
--   **适用于移动设备**: 检查您是否需要使UI在移动设备上正常工作。
-    -   CSS媒体查询可用于在移动设备上显示不同的布局。
-    -   使交互元素（如按钮）足够大，以便按下（建议至少为44 x 44 px），并且间距足够宽。
--   **错误状态**: 及时清晰地反映错误-表单验证错误、网络请求错误等。
--   **处理不同尺寸的图片**: 使您的UI适用于呈现所有大小/维度的图片并保留原始纵横比的情况。
-    -   使用CSS`background-image`和`background-position: contain`，以使图片适合在您定义的区域内。 如果可以将图片剪切（例如渐变背景），请使用`background-position: cover`。
-    -   `<img>`标记具有类似的`object-fit`属性和`contain`和`cover`值。
--   **乐观更新**: 高级技术，即使在网络请求仍在进行时也能反映出成功状态。 如果请求失败，请恢复UI更改并显示错误消息。
+- **适用于移动设备**: 检查您是否需要使 UI 在移动设备上正常工作。
+  - CSS 媒体查询可用于在移动设备上显示不同的布局。
+  - 使交互元素（如按钮）足够大，以便按下（建议至少为 44 x 44 px），并且间距足够宽。
+- **错误状态**: 及时清晰地反映错误-表单验证错误、网络请求错误等。
+- **处理不同尺寸的图片**: 使您的 UI 适用于呈现所有大小/维度的图片并保留原始纵横比的情况。
+  - 使用 CSS`background-image`和`background-position: contain`，以使图片适合在您定义的区域内。 如果可以将图片剪切（例如渐变背景），请使用`background-position: cover`。
+  - `<img>`标记具有类似的`object-fit`属性和`contain`和`cover`值。
+- **乐观更新**: 高级技术，即使在网络请求仍在进行时也能反映出成功状态。 如果请求失败，请恢复 UI 更改并显示错误消息。
 
 ## 网络
 
-您的UI处理网络请求和条件的不可预测性情况吗？
+您的 UI 处理网络请求和条件的不可预测性情况吗？
 
--   **反映网络请求状态**: 如果UI涉及进行网络请求，请清楚地显示请求的挂起/成功/失败状态。
-    -   **正在挂起**: 禁用字段/按钮，显示旋转器。
-    -   **错误**: 显示错误消息。
-    -   **成功**: 更新UI和/或显示成功消息。
--   **竞争条件**: 常见的原因是由于并行网络请求，响应顺序不能保证。 稍后发出的请求可能会更早地收到响应。 如果您的UI容易受到此类问题的影响，则可以跟踪最新的请求并忽略早期结果。 或者，使您的UI不能同时触发多个网络请求，例如通过在单击后禁用触发网络请求的元素等。
--   **避免重复请求**: 提交后应禁用按钮以避免进行重复的网络请求。
--   **合并请求**: 如果UI正在进行太多的网络请求，则可以：
-    -   节流/去抖动: 限制发出的网络请求数。
-    -   批量请求: 将请求组合在一起并仅进行一次请求。 这需要服务器端支持这种格式。
--   **缓存**: 如果最近已经使用相同的参数进行了请求，则您可以重用之前的响应并省略网络往返。
--   **请求超时**: 如果请求在规定的持续时间内没有接收到响应，您可能希望人为地显示请求失败（超时）。
--   **乐观更新**: 高级技术，即使在网络请求仍在进行时也能反映出成功状态。 如果请求失败，请恢复UI更改并显示错误消息。
+- **反映网络请求状态**: 如果 UI 涉及进行网络请求，请清楚地显示请求的挂起/成功/失败状态。
+  - **正在挂起**: 禁用字段/按钮，显示旋转器。
+  - **错误**: 显示错误消息。
+  - **成功**: 更新 UI 和/或显示成功消息。
+- **竞争条件**: 常见的原因是由于并行网络请求，响应顺序不能保证。 稍后发出的请求可能会更早地收到响应。 如果您的 UI 容易受到此类问题的影响，则可以跟踪最新的请求并忽略早期结果。 或者，使您的 UI 不能同时触发多个网络请求，例如通过在单击后禁用触发网络请求的元素等。
+- **避免重复请求**: 提交后应禁用按钮以避免进行重复的网络请求。
+- **合并请求**: 如果 UI 正在进行太多的网络请求，则可以：
+  - 节流/去抖动: 限制发出的网络请求数。
+  - 批量请求: 将请求组合在一起并仅进行一次请求。 这需要服务器端支持这种格式。
+- **缓存**: 如果最近已经使用相同的参数进行了请求，则您可以重用之前的响应并省略网络往返。
+- **请求超时**: 如果请求在规定的持续时间内没有接收到响应，您可能希望人为地显示请求失败（超时）。
+- **乐观更新**: 高级技术，即使在网络请求仍在进行时也能反映出成功状态。 如果请求失败，请恢复 UI 更改并显示错误消息。
 
 ## 可访问性（a11y）
 
-在UI中处理可访问性是一个很大的优势，在某些情况下，老年工程师们需要处理可访问性。
+在 UI 中处理可访问性是一个很大的优势，在某些情况下，老年工程师们需要处理可访问性。
 
--   您能否仅使用键盘使用UI？
--   您是否可以使用屏幕阅读器使用您的UI组件？
--   您的UI组件可以在没有颜色的情况下工作吗？
--   您的UI组件可以在没有声音的情况下工作吗？
+- 您能否仅使用键盘使用 UI？
+- 您是否可以使用屏幕阅读器使用您的 UI 组件？
+- 您的 UI 组件可以在没有颜色的情况下工作吗？
+- 您的 UI 组件可以在没有声音的情况下工作吗？
 
-来源：[网页的可访问UI组件](https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67)
+来源：[网页的可访问 UI 组件](https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67)
 
--   **屏幕阅读器、ARIA角色、状态和属性**:
-    -   为不使用自定义HTML标记构建的元素添加正确的`aria-role`。
-    -   使用`aria-label`来描述其中没有文本显示的元素（例如仅图标的按钮）。
-    -   通过`aria-describedby`/`aria-errormessage`将错误消息元素链接到负责它们的元素。
-    -   **图片“alt”文本**:为`<img>`元素添加`alt`属性，以便屏幕阅读器可以描述图片。
--   **键盘交互**
-    -   将`tabindex`属性添加到要通过键盘制表符聚焦的元素。
-    -   元素可以通过键盘触发。
-    -   检查焦点顺序是否合理。
--   **视觉问题**
-    -   **颜色对比度**: 文本/图片与背景之间的足够颜色对比度。
-    -   **元素大小**: 字体大小，交互元素大小应足够大，适合其预期的媒介。
+- **屏幕阅读器、ARIA 角色、状态和属性**:
+  - 为不使用自定义 HTML 标记构建的元素添加正确的`aria-role`。
+  - 使用`aria-label`来描述其中没有文本显示的元素（例如仅图标的按钮）。
+  - 通过`aria-describedby`/`aria-errormessage`将错误消息元素链接到负责它们的元素。
+  - **图片“alt”文本**:为`<img>`元素添加`alt`属性，以便屏幕阅读器可以描述图片。
+- **键盘交互**
+  - 将`tabindex`属性添加到要通过键盘制表符聚焦的元素。
+  - 元素可以通过键盘触发。
+  - 检查焦点顺序是否合理。
+- **视觉问题**
+  - **颜色对比度**: 文本/图片与背景之间的足够颜色对比度。
+  - **元素大小**: 字体大小，交互元素大小应足够大，适合其预期的媒介。
 
-Google的[web.dev]有一个[免费的深入课程](https://web.dev/learn/accessibility/)，其中详细介绍了可访问性的内容，我们强烈推荐。
+Google 的[web.dev]有一个[免费的深入课程](https://web.dev/learn/accessibility/)，其中详细介绍了可访问性的内容，我们强烈推荐。
 
 ## 边缘情况
 
 在面试期间，可能没有足够的时间处理代码中的所有边缘情况，但是最好向面试官提及它们，以获得额外的答案。
 
--   **处理长字符串**: UI中的字符串（例如标题/按钮标签）可能会导致UI表现出奇怪的行为，例如溢出并影响周围元素的位置。 长字符串可能是用户输入或翻译的结果。
--   **空状态**: 显示一个空状态消息/占位符以指示内容的缺失，例如列表为空时。 什么也不显示可能会使用户认为仍在等待网络请求并且正在获取数据。
--   **列表中的太多项**: 在单个页面上显示太多项目可能会导致糟糕的UX（用户必须滚动很多）和反应灵敏度和内存消耗的糟糕性能。
-    -   **分页**: 将长列表分成多个页面。
-    -   [**虚拟列表**](https://www.patterns.dev/posts/virtual-lists):在动态列表中仅呈现可见行的内容，而不是整个列表。
-    -   截断多余的内容，并显示一个省略号。 `word-break` CSS属性非常有用。
-    -   将内容限制在前X个字符/单词，并在“显示更多”按钮后面隐藏多余的内容。
+- **处理长字符串**: UI 中的字符串（例如标题/按钮标签）可能会导致 UI 表现出奇怪的行为，例如溢出并影响周围元素的位置。 长字符串可能是用户输入或翻译的结果。
+- **空状态**: 显示一个空状态消息/占位符以指示内容的缺失，例如列表为空时。 什么也不显示可能会使用户认为仍在等待网络请求并且正在获取数据。
+- **列表中的太多项**: 在单个页面上显示太多项目可能会导致糟糕的 UX（用户必须滚动很多）和反应灵敏度和内存消耗的糟糕性能。
+  - **分页**: 将长列表分成多个页面。
+  - [**虚拟列表**](https://www.patterns.dev/posts/virtual-lists):在动态列表中仅呈现可见行的内容，而不是整个列表。
+  - 截断多余的内容，并显示一个省略号。 `word-break` CSS 属性非常有用。
+  - 将内容限制在前 X 个字符/单词，并在“显示更多”按钮后面隐藏多余的内容。
 
 ## 性能
 
--   **节流/去抖动**: 节流和去抖动是限制频率的技术，可防止不必要的操作。 此技术可用于不是非常时间敏感的操作，例如网络请求和滚动/调整事件回调。
--   **缓存**: 可以将计算/网络请求的结果缓存在浏览器内存/存储器中，以避免重复操作。
--   **按需加载**: 仅在需要时延迟加载数据/组件代码，而不是一次性加载全部。
--   **预取/预加载数据**: 在需要数据之前立即预取/预加载数据，以使更新立即显示，从而减少网络延迟。
--   **列表中的太多项**: 参见上面的“边缘情况”下的内容。
+- **节流/去抖动**: 节流和去抖动是限制频率的技术，可防止不必要的操作。 此技术可用于不是非常时间敏感的操作，例如网络请求和滚动/调整事件回调。
+- **缓存**: 可以将计算/网络请求的结果缓存在浏览器内存/存储器中，以避免重复操作。
+- **按需加载**: 仅在需要时延迟加载数据/组件代码，而不是一次性加载全部。
+- **预取/预加载数据**: 在需要数据之前立即预取/预加载数据，以使更新立即显示，从而减少网络延迟。
+- **列表中的太多项**: 参见上面的“边缘情况”下的内容。
 
 ## 安全
 
--   **跨站点脚本（XSS）**: 在渲染内容时，请避免分配给[`Element.innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)或React的`dangerouslySetInnerHTML`，因为它来自用户会导致跨站点脚本，应将其分配给[`Node.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 或使用实验性的[`Element.setHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML) 方法代替。 请参考[OWASP的XSS预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
--   **“URL上下文”的输出编码**: 如果用户提供的输入可能用于URL查询参数，请使用`encodeURIComponent`来防止意外的值成为URL的一部分（例如额外的查询参数）。
--   **跨站点请求伪造**: 请参见[OWASP的XSS预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)。
+- **跨站点脚本（XSS）**: 在渲染内容时，请避免分配给[`Element.innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)或 React 的`dangerouslySetInnerHTML`，因为它来自用户会导致跨站点脚本，应将其分配给[`Node.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 或使用实验性的[`Element.setHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML) 方法代替。 请参考[OWASP 的 XSS 预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
+- **“URL 上下文”的输出编码**: 如果用户提供的输入可能用于 URL 查询参数，请使用`encodeURIComponent`来防止意外的值成为 URL 的一部分（例如额外的查询参数）。
+- **跨站点请求伪造**: 请参见[OWASP 的 XSS 预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)。
 
 ## 国际化（i18n）
 
-您的UI能够处理多种语言吗？ 添加支持更多语言有多容易？
+您的 UI 能够处理多种语言吗？ 添加支持更多语言有多容易？
 
--   **避免硬编码特定语言的标签**: 一些UI组件中具有标签字符串（例如，图片轮播具有上一个/下一个按钮的标签）。 允许使用这些标签字符串进行自定义，使它们成为组件的props/options的一部分，这很好。
--   **UI可以呈现长字符串**: 参见上面有关呈现长字符串的部分。
--   **从右到左的语言**: 某些语言（例如，阿拉伯语、希伯来语） 使用[CSS逻辑属性](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)来使你的布局适用于不同的[书写模式](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes)。
+- **避免硬编码特定语言的标签**: 一些 UI 组件中具有标签字符串（例如，图片轮播具有上一个/下一个按钮的标签）。 允许使用这些标签字符串进行自定义，使它们成为组件的 props/options 的一部分，这很好。
+- **UI 可以呈现长字符串**: 参见上面有关呈现长字符串的部分。
+- **从右到左的语言**: 某些语言（例如，阿拉伯语、希伯来语） 使用[CSS 逻辑属性](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)来使你的布局适用于不同的[书写模式](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes)。

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

@@ -11,16 +11,16 @@ As interfaces de usuário que os candidatos são solicitados a codificar podem v
 
 ### User Interface Components/Widgets/Layouts
 
--   Componentes: [Accordion]\(/questions/interface de usuário/acorda), [Tabs](/questions/interface/tabelas), [Widget de Classificação por Estrela](/questions/user-interface/star-rating), [Tweet](/questions/user-interface/tweet), Image Carousel.
--   Widgets: [Relógio Digital](/questions/user-interface/digital-clock), [Relógio Analógico](/questions/user-interface/analog-clock).
--   Seções de Página: [Formulário de inscrição]\(/questions/interface do usuário-assinante-forma), [Grau Sagrado]\(/questions/interface do usuário-holy-grail)
+- Componentes: [Accordion]\(/questions/interface de usuário/acorda), [Tabs](/questions/interface/tabelas), [Widget de Classificação por Estrela](/questions/user-interface/star-rating), [Tweet](/questions/user-interface/tweet), Image Carousel.
+- Widgets: [Relógio Digital](/questions/user-interface/digital-clock), [Relógio Analógico](/questions/user-interface/analog-clock).
+- Seções de Página: [Formulário de inscrição]\(/questions/interface do usuário-assinante-forma), [Grau Sagrado]\(/questions/interface do usuário-holy-grail)
 
 ### Apps/Jogos
 
 O tempo permitido para perguntas sobre aplicativos/jogos geralmente é maior do que para componentes/widgets. Dependendo da complexidade da pergunta, você pode gastar até meia hora ou até mesmo uma hora para completar a pergunta, especialmente se for solicitado a construir jogos.
 
--   Apps: [Todo List](/questions/user-interface/todo-list), [Stopwatch](/questions/user-interface/stopwatch), [Temperature Converter](/questions/user-interface/temperature-converter).
--   Jogos: [Tic-tac-toe](/questions/user-interface/tic-tac-toe), [Whack-a-mole](/questions/user-interface/whack-a-mole), Serpente, Tetris, Minesweeper, Conectar 4.
+- Apps: [Todo List](/questions/user-interface/todo-list), [Stopwatch](/questions/user-interface/stopwatch), [Temperature Converter](/questions/user-interface/temperature-converter).
+- Jogos: [Tic-tac-toe](/questions/user-interface/tic-tac-toe), [Whack-a-mole](/questions/user-interface/whack-a-mole), Serpente, Tetris, Minesweeper, Conectar 4.
 
 Observe que a maioria dos jogos será baseada em uma grade 2D. Certifique-se de saber como criar layouts de grade em HTML e CSS!
 
@@ -29,20 +29,20 @@ Observe que a maioria dos jogos será baseada em uma grade 2D. Certifique-se de
 Entrevistas de codificação de interface de usuário compartilham algumas semelhanças com entrevistas de codificação não relacionadas à interface de usuário. Em geral, você deve:
 
 1.  Descobrir em qual plataforma você está codificando e se familiarizar com o ambiente de codificação:
-    -   Se você estará usando um ambiente de desenvolvimento integrado (IDE) local ou online. Se a IDE for local, você usará seu próprio laptop?
-    -   Atalhos do editor suportados.
-    -   "Se você pode usar bibliotecas/frameworks JavaScript ou precisa usar JavaScript puro.".
-    -   Se você pode executar código e visualizar a UI.
-    -   Quais são as sintaxes e recursos de linguagem JavaScript mais recentemente suportados?
-    -   Se você pode instalar dependências antecipadamente.
+    - Se você estará usando um ambiente de desenvolvimento integrado (IDE) local ou online. Se a IDE for local, você usará seu próprio laptop?
+    - Atalhos do editor suportados.
+    - "Se você pode usar bibliotecas/frameworks JavaScript ou precisa usar JavaScript puro.".
+    - Se você pode executar código e visualizar a UI.
+    - Quais são as sintaxes e recursos de linguagem JavaScript mais recentemente suportados?
+    - Se você pode instalar dependências antecipadamente.
 2.  Faça sua própria apresentação em menos de um minuto. A menos que seja solicitado, não leve mais tempo do que isso, caso contrário, você pode não ter tempo suficiente para programar.
 3.  Fazer perguntas de esclarecimento ao receber a pergunta. Esclareça o seguinte:
-    -   Você pode usar a sintaxe mais recente do JavaScript?
-    -   Suporte do navegador, pois isso afetará as APIs do navegador que você pode usar.
+    - Você pode usar a sintaxe mais recente do JavaScript?
+    - Suporte do navegador, pois isso afetará as APIs do navegador que você pode usar.
 4.  Divida o problema em etapas/marcos que se construam uma sobre a outra. Comunique essa divisão ao seu entrevistador. Ao contrário das entrevistas de codificação tradicionais, o foco das entrevistas de codificação de Interface do Usuário geralmente está nos estados dos componentes e nas APIs, em vez de estruturas de dados complexas e algoritmos.
 5.  Crie sua solução em código e explique seu código ao seu entrevistador enquanto estiver codificando.
-    -   Sempre que possível, teste seu código no navegador após cada marco ou recurso adicionado, em vez de fazer isso apenas no final.
-    -   Consulte a [Folha de Dicas de Perguntas de Interface do Usuário](/front-end-interview-guidebook/user-interface-questions-cheatsheet) para uma lista de coisas a serem observadas durante entrevistas de codificação de Interface do Usuário.
+    - Sempre que possível, teste seu código no navegador após cada marco ou recurso adicionado, em vez de fazer isso apenas no final.
+    - Consulte a [Folha de Dicas de Perguntas de Interface do Usuário](/front-end-interview-guidebook/user-interface-questions-cheatsheet) para uma lista de coisas a serem observadas durante entrevistas de codificação de Interface do Usuário.
 6.  Após codificar, leia seu código uma vez e tente identificar erros básicos, como erros de digitação, uso de variáveis antes de inicializá-las, uso incorreto de APIs, etc.
 7.  Faça um esboço de alguns casos de teste básicos e alguns casos limite. Teste seu código com esses casos e determine se seu código os aprova. Se ele falhar, depure o(s) problema(s) e corrija-os.
 8.  Explique qualquer compromisso que você tenha feito, casos que você explicitamente não tratou e como você melhoraria o código se tivesse mais tempo.
@@ -52,57 +52,57 @@ Entrevistas de codificação de interface de usuário compartilham algumas semel
 
 1.  Esteja familiarizado com os tópicos listados em "Conceitos Importantes" abaixo. A seção de [Quiz](/front-end-interview-guidebook/quiz) também pode ser um bom começo, já que você pode ser questionado sobre esses conceitos na forma de perguntas de quiz durante a codificação.
 2.  É melhor aprender a construir interfaces de usuário tanto em JavaScript puro quanto em um framework de UI de sua escolha. A maioria das empresas permitirá o uso de frameworks de UI JavaScript, mas algumas empresas (por exemplo, o Google) podem exigir que você use apenas JavaScript puro.
-    -   **JavaScript Puro**: Aprenda as APIs de manipulação do DOM. No mínimo, você deve saber como criar novos elementos no DOM, adicionar classes/atributos a eles e adicionar elementos filhos. Se você tem experiência com [jQuery](https://jquery.com/), dê uma olhada em [You might not need jQuery](https://youmightnotneedjquery.com), um site que mostra como realizar operações comuns do jQuery em JavaScript puro. Você ficará agradavelmente surpreso ao descobrir que, com as APIs de navegadores modernos, realmente não há mais tanta necessidade do jQuery.
-    -   **Framework de Interface do Usuário em JavaScript**: Esteja familiarizado com um framework de UI de sua escolha. Mantenha-se com o framework com o qual você está mais familiarizado. Não há necessidade e provavelmente não há tempo suficiente para aprender um novo framework. Se você é novo em frameworks de UI em JavaScript, [React](https://reactjs.org/) será nossa recomendação, pois é a biblioteca/framework mais popular para construir interfaces de usuário atualmente, e é a linguagem mais procurada pelas empresas ao contratar engenheiros front-end.
+    - **JavaScript Puro**: Aprenda as APIs de manipulação do DOM. No mínimo, você deve saber como criar novos elementos no DOM, adicionar classes/atributos a eles e adicionar elementos filhos. Se você tem experiência com [jQuery](https://jquery.com/), dê uma olhada em [You might not need jQuery](https://youmightnotneedjquery.com), um site que mostra como realizar operações comuns do jQuery em JavaScript puro. Você ficará agradavelmente surpreso ao descobrir que, com as APIs de navegadores modernos, realmente não há mais tanta necessidade do jQuery.
+    - **Framework de Interface do Usuário em JavaScript**: Esteja familiarizado com um framework de UI de sua escolha. Mantenha-se com o framework com o qual você está mais familiarizado. Não há necessidade e provavelmente não há tempo suficiente para aprender um novo framework. Se você é novo em frameworks de UI em JavaScript, [React](https://reactjs.org/) será nossa recomendação, pois é a biblioteca/framework mais popular para construir interfaces de usuário atualmente, e é a linguagem mais procurada pelas empresas ao contratar engenheiros front-end.
 3.  Esteja familiarizado com a escrita de CSS em condições de entrevista (pequenas perguntas que não exigirão escrever muito CSS):
-    -   **Escreva Vanilla CSS**: aprenda a escrever CSS sem depender de pré-processadores como Sass/Less. Nem todos os ambientes de codificação permitirão o uso de processadores, e as perguntas de entrevista provavelmente serão pequenas e não se beneficiarão muito dos recursos que os pré-processadores de CSS oferecem. A característica mais útil dos processadores de CSS é o uso de variáveis, que está disponível nativamente por meio das propriedades personalizadas de CSS (variáveis CSS).
-    -   **Adote uma convenção de nomenclatura CSS**: Considere adotar uma metodologia de nomenclatura CSS como [Block Element Modifier](https://getbem.com) ao escrever suas classes.
+    - **Escreva Vanilla CSS**: aprenda a escrever CSS sem depender de pré-processadores como Sass/Less. Nem todos os ambientes de codificação permitirão o uso de processadores, e as perguntas de entrevista provavelmente serão pequenas e não se beneficiarão muito dos recursos que os pré-processadores de CSS oferecem. A característica mais útil dos processadores de CSS é o uso de variáveis, que está disponível nativamente por meio das propriedades personalizadas de CSS (variáveis CSS).
+    - **Adote uma convenção de nomenclatura CSS**: Considere adotar uma metodologia de nomenclatura CSS como [Block Element Modifier](https://getbem.com) ao escrever suas classes.
 4.  Leia nossos guias detalhados de codificação de Interface do Usuário:
-    -   [Folha de perguntas de Interface do Usuário](/front-end-interview-guidebook/user-interface-questions-cheatsheet)
-    -   [Princípios de API Design de Componentes de Interface do Usuário](/front-end-interview-guidebook/user-interface-components-api-design-principles)
+    - [Folha de perguntas de Interface do Usuário](/front-end-interview-guidebook/user-interface-questions-cheatsheet)
+    - [Princípios de API Design de Componentes de Interface do Usuário](/front-end-interview-guidebook/user-interface-components-api-design-principles)
 5.  Escolha um [plano de estudo](/get-started) e pratique as [perguntas de codificação de Interface do Usuário](/prepare/coding) recomendadas para o plano de estudo selecionado.
-    -   Dedique aproximadamente a mesma quantidade de tempo praticando a construção de componentes de interface do usuário e a construção de aplicativos/jogos. Ambos são igualmente importantes.
+    - Dedique aproximadamente a mesma quantidade de tempo praticando a construção de componentes de interface do usuário e a construção de aplicativos/jogos. Ambos são igualmente importantes.
 
 ## Conceitos Importantes
 
-| Categoria              | Tópicos Importantes                                                                                                              |
-| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
-| Estruturas de Dados    | Vetores, Mapas, Pilhas, Árvores, Conjuntos                                                                                       |
-| Engenharia de Software | Princípios de SOLID, Padrões de Design, Model-View-Controller                                                                    |
-| HTML                   | HTML Semântico, Validação de Formulário, Envio de Formulário                                                                     |
-| CSS                    | Modelo de caixa, Seletores, Especificidade, Posicionamento, Unidades, Flexbox, Grid, Propriedades personalizadas CSS (variáveis) |
-| JavaScript             | Closures, Callbacks, `Promise`, `async`/`await`, manipulando argumentos variádicos                                               |
-| DOM                    | Travessia do DOM, Criação do DOM, Manipulação do DOM, Acesso às propriedades de elementos/nós, Delegação de eventos              |
-| APIs de runtime        | Temporizador (`setTimeout`, `setInterval`), Rede (Ajax, `fetch`)                                                                 |
-| Acessibilidade         | Papéis, estados e propriedades ARIA, Interações de Teclado                                                                       |
+| Categoria | Tópicos Importantes |
+| --- | --- |
+| Estruturas de Dados | Vetores, Mapas, Pilhas, Árvores, Conjuntos |
+| Engenharia de Software | Princípios de SOLID, Padrões de Design, Model-View-Controller |
+| HTML | HTML Semântico, Validação de Formulário, Envio de Formulário |
+| CSS | Modelo de caixa, Seletores, Especificidade, Posicionamento, Unidades, Flexbox, Grid, Propriedades personalizadas CSS (variáveis) |
+| JavaScript | Closures, Callbacks, `Promise`, `async`/`await`, manipulando argumentos variádicos |
+| DOM | Travessia do DOM, Criação do DOM, Manipulação do DOM, Acesso às propriedades de elementos/nós, Delegação de eventos |
+| APIs de runtime | Temporizador (`setTimeout`, `setInterval`), Rede (Ajax, `fetch`) |
+| Acessibilidade | Papéis, estados e propriedades ARIA, Interações de Teclado |
 
 ## Rubricas para Entrevistas de Codificação de Interface do Usuário
 
 As entrevistas de codificação de interface do usuário têm rubricas semelhantes às entrevistas de codificação em JavaScript, pois ambas envolvem codificação no domínio de front-end. No entanto, as perguntas de codificação de interface do usuário terão ainda mais ênfase na expertise no domínio e nos vários tópicos de front-end.
 
--   **Resolução de Problemas**: Use uma abordagem sistemática e lógica para compreender e abordar um problema. Divida o problema em problemas menores e independentes. Avalie diferentes abordagens e suas compensações (trade-offs).
--   **Fundamentos de Engenharia de Software**: Familiaridade com estruturas de dados, algoritmos, análise de complexidade em tempo de execução, uso de padrões de design, projetar soluções com abstrações limpas.
--   **Expertise no Domínio**: Compreensão do domínio de front-end e das linguagens relevantes: Navegador (DOM e APIs do DOM), HTML, CSS, JavaScript, Experiência do Usuário, Acessibilidade, i18n (internacionalização), Redes, Desempenho.
--   **Comunicação**: Fazer perguntas para esclarecer detalhes e explicar claramente sua abordagem e considerações.
--   **Verificação**: Identificar vários cenários para testar o código, incluindo casos de borda. Ser capaz de diagnosticar e corrigir quaisquer problemas que surjam.
+- **Resolução de Problemas**: Use uma abordagem sistemática e lógica para compreender e abordar um problema. Divida o problema em problemas menores e independentes. Avalie diferentes abordagens e suas compensações (trade-offs).
+- **Fundamentos de Engenharia de Software**: Familiaridade com estruturas de dados, algoritmos, análise de complexidade em tempo de execução, uso de padrões de design, projetar soluções com abstrações limpas.
+- **Expertise no Domínio**: Compreensão do domínio de front-end e das linguagens relevantes: Navegador (DOM e APIs do DOM), HTML, CSS, JavaScript, Experiência do Usuário, Acessibilidade, i18n (internacionalização), Redes, Desempenho.
+- **Comunicação**: Fazer perguntas para esclarecer detalhes e explicar claramente sua abordagem e considerações.
+- **Verificação**: Identificar vários cenários para testar o código, incluindo casos de borda. Ser capaz de diagnosticar e corrigir quaisquer problemas que surjam.
 
 ## Perguntas de Melhores Práticas
 
 Com base na experiência, as melhores perguntas de entrevista de interface do usuário para praticar, determinadas pela frequência e pelos conceitos importantes abordados são:
 
--   [Lista de tarefas](/questions/interface/todo-list)
--   [Formulário de Inscrição](/questions/user-interface/signup-form)
--   [Conversor de Temperatura](/questions/user-interface/temperature-converter)
--   [Barra de Progresso](/questions/user-interface/progress-bar)
--   [Relógio Analógico](/questions/interface/analog-clock)
--   [Quadro de Empregos](/questions/user-interface/job-board)
--   [Whack-a-mole](/questions/interface/whack-a-mole)
--   [Jogo da Velha](/questions/interface/whack-a-mole)
--   [Abas](/questions/user-interface/tabs)
--   Carrossel de Imagens
--   Autocompletar
--   Menu dropdown
--   Modal
+- [Lista de tarefas](/questions/interface/todo-list)
+- [Formulário de Inscrição](/questions/user-interface/signup-form)
+- [Conversor de Temperatura](/questions/user-interface/temperature-converter)
+- [Barra de Progresso](/questions/user-interface/progress-bar)
+- [Relógio Analógico](/questions/interface/analog-clock)
+- [Quadro de Empregos](/questions/user-interface/job-board)
+- [Whack-a-mole](/questions/interface/whack-a-mole)
+- [Jogo da Velha](/questions/interface/whack-a-mole)
+- [Abas](/questions/user-interface/tabs)
+- Carrossel de Imagens
+- Autocompletar
+- Menu dropdown
+- Modal
 
 "GreatFrontEnd possui uma [lista abrangente de perguntas de codificação de Interface de Usuário](/prepare/coding) que você pode praticar na sua estrutura de escolha (atualmente suporta JavaScript Puro e [React](https://reactjs.org/)).". Também fornecemos casos de teste manuais que você pode usar para testar seu código e verificar a correção, além de soluções escritas em várias estruturas de interface de usuário JavaScript por engenheiros sênior ex-FAANG. Testes automatizados não são fornecidos para perguntas de IU (Interface de Usuário) porque geralmente estão acoplados à implementação e são difíceis de serem testados com precisão por meio de testes automatizados. Além disso, durante entrevistas, provavelmente você terá que testar sua IU por si mesmo.
 

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

@@ -11,16 +11,16 @@ description: 准备前端/网络开发人员面试中的用户界面问题的指
 
 ### 用户界面组件/小部件/布局
 
--   用户界面组件/小部件/布局组件：[手风琴](/questions/user-interface/accordion)、[选项卡](/questions/user-interface/tabs)、[星级评分小部件](/questions/user-interface/star-rating)、[推特](/questions/user-interface/tweet)、图片轮播。
--   小部件：[数字时钟](/questions/user-interface/digital-clock)、[模拟时钟](/questions/user-interface/analog-clock)。
--   页面部分：[注册表单](/questions/user-interface/signup-form)、[圣杯](/questions/user-interface/holy-grail)
+- 用户界面组件/小部件/布局组件：[手风琴](/questions/user-interface/accordion)、[选项卡](/questions/user-interface/tabs)、[星级评分小部件](/questions/user-interface/star-rating)、[推特](/questions/user-interface/tweet)、图片轮播。
+- 小部件：[数字时钟](/questions/user-interface/digital-clock)、[模拟时钟](/questions/user-interface/analog-clock)。
+- 页面部分：[注册表单](/questions/user-interface/signup-form)、[圣杯](/questions/user-interface/holy-grail)
 
 ### 应用程序/游戏
 
 针对应用程序/游戏问题的时间通常比组件/小部件更长。 根据问题的复杂程度，您可能需要花上半个小时甚至一个小时来完成问题，特别是如果您被要求构建游戏。
 
--   应用程序：[待办事项列表](/questions/user-interface/todo-list)、[秒表](/questions/user-interface/stopwatch)、[温度转换器](/questions/user-interface/temperature-converter)。
--   游戏：[井字游戏](/questions/user-interface/tic-tac-toe)、[捉地鼠游戏](/questions/user-interface/whack-a-mole)、贪吃蛇、俄罗斯方块、扫雷、四连棋。
+- 应用程序：[待办事项列表](/questions/user-interface/todo-list)、[秒表](/questions/user-interface/stopwatch)、[温度转换器](/questions/user-interface/temperature-converter)。
+- 游戏：[井字游戏](/questions/user-interface/tic-tac-toe)、[捉地鼠游戏](/questions/user-interface/whack-a-mole)、贪吃蛇、俄罗斯方块、扫雷、四连棋。
 
 请注意，大多数游戏将是基于 2D 网格的游戏。 请确保您知道如何在 HTML 和 CSS 中创建网格布局！
 
@@ -29,20 +29,20 @@ description: 准备前端/网络开发人员面试中的用户界面问题的指
 用户界面编码面试与非前端编码面试有许多共性。 一般来说，你应该：
 
 1.  了解您所编码的平台并熟悉编码环境：
-    -   是否使用本地 IDE 或在线 IDE。 如果使用本地 IDE，是否使用自己的笔记本电脑？
-    -   支持的编辑器快捷键。
-    -   是否可以使用 JavaScript 库/框架或必须使用原生 JavaScript。
-    -   是否可以执行代码并预览用户界面。
-    -   最新支持的 JavaScript 语法和语言特性是什么？
-    -   是否可以预先安装依赖项。
+    - 是否使用本地 IDE 或在线 IDE。 如果使用本地 IDE，是否使用自己的笔记本电脑？
+    - 支持的编辑器快捷键。
+    - 是否可以使用 JavaScript 库/框架或必须使用原生 JavaScript。
+    - 是否可以执行代码并预览用户界面。
+    - 最新支持的 JavaScript 语法和语言特性是什么？
+    - 是否可以预先安装依赖项。
 2.  在一分钟内进行自我介绍。 除非受到要求，否则不要花费更长时间，否则您可能没有足够的时间来编码。
 3.  在收到问题时询问澄清问题。 澄清以下内容：
-    -   是否可以使用最新的 JavaScript 语法？
-    -   浏览器支持，因为这将影响您可以使用的浏览器 API。
+    - 是否可以使用最新的 JavaScript 语法？
+    - 浏览器支持，因为这将影响您可以使用的浏览器 API。
 4.  将问题分解为不同的阶段/里程碑。 将此分解通知面试官。 与编码面试不同，用户界面编码面试的重点通常在于组件状态和 API 上，而不是复杂的数据结构和算法。
 5.  使用这些用例测试您的代码，并确定您的代码是否通过这些用例。
-    -   在添加每个里程碑/功能后，尽可能在浏览器中测试您的代码，而不是仅在最后进行测试。
-    -   请参阅[用户界面问题备忘单](/front-end-interview-guidebook/user-interface-questions-cheatsheet)，了解需要注意哪些方面在用户界面编码面试期间。
+    - 在添加每个里程碑/功能后，尽可能在浏览器中测试您的代码，而不是仅在最后进行测试。
+    - 请参阅[用户界面问题备忘单](/front-end-interview-guidebook/user-interface-questions-cheatsheet)，了解需要注意哪些方面在用户界面编码面试期间。
 6.  在编码后，阅读您的代码一次，尝试找出基本错误，例如拼写错误、在初始化变量之前使用变量、错误使用 API 等。
 7.  概述一些基本的测试用例和一些边缘情况。 使用这些用例测试您的代码，并确定您的代码是否通过这些用例。 如果失败，请调试问题并修复问题。
 8.  解释您所做的折衷、您明确未处理的情况以及如何在有更多时间的情况下改进代码。
@@ -52,57 +52,57 @@ description: 准备前端/网络开发人员面试中的用户界面问题的指
 
 1.  熟悉“重要概念”下的主题。 [测验部分](/front-end-interview-guidebook/quiz)也可能是一个好的开始，因为您可能会在形式上的测验问题中被问及这些概念。
 2.  最好学习如何在原生 JavaScript 和首选的 UI 框架中构建 UI。 大多数公司将允许使用 JavaScript UI 框架，但某些公司（例如 Google）强制要求仅使用原生 JavaScript。
-    -   **原生 JavaScript**：学习 DOM 操作 API。 您至少应该知道如何创建新的 DOM 元素，在其中添加类/属性，并添加子元素。 如果您来自 [jQuery](https://jquery.com/) 背景，请查看 [You might not need jQuery](https://youmightnotneedjquery.com)，这是一个网站，显示您如何在原生 JavaScript 中实现常见的 jQuery 操作。 你会惊喜地发现，使用现代浏览器 API，实际上并不需要 jQuery。
-    -   **JavaScript UI 框架**：熟悉首选的 UI 框架。 坚持您最熟悉的框架即可。 没有必要也可能没有足够的时间学习新的框架。 如果您是 JavaScript UI 框架的新手，我们将推荐 [React](https://reactjs.org/)，因为它是目前构建 UI 的最流行的库/框架，是大多数公司在招聘前端工程师时寻找的最受欢迎的语言。
+    - **原生 JavaScript**：学习 DOM 操作 API。 您至少应该知道如何创建新的 DOM 元素，在其中添加类/属性，并添加子元素。 如果您来自 [jQuery](https://jquery.com/) 背景，请查看 [You might not need jQuery](https://youmightnotneedjquery.com)，这是一个网站，显示您如何在原生 JavaScript 中实现常见的 jQuery 操作。 你会惊喜地发现，使用现代浏览器 API，实际上并不需要 jQuery。
+    - **JavaScript UI 框架**：熟悉首选的 UI 框架。 坚持您最熟悉的框架即可。 没有必要也可能没有足够的时间学习新的框架。 如果您是 JavaScript UI 框架的新手，我们将推荐 [React](https://reactjs.org/)，因为它是目前构建 UI 的最流行的库/框架，是大多数公司在招聘前端工程师时寻找的最受欢迎的语言。
 3.  熟悉在面试条件下编写 CSS（不需要编写太多的 CSS 的小问题）：
-    -   **编写原生 CSS**：学习如何在没有预处理器（例如 Sass/Less）的情况下编写 CSS。 不是所有的编码环境都将允许使用处理器，并且面试问题可能很小，不会真正受益于 CSS 预处理器带来的功能。 CSS 处理器最有用的功能是使用变量，可通过 CSS 自定义属性（CSS 变量）本地提供。
-    -   **采用 CSS 命名约定**：在编写类时，请考虑采用 CSS 命名方法论，例如 [块元素修饰符](https://getbem.com)。
+    - **编写原生 CSS**：学习如何在没有预处理器（例如 Sass/Less）的情况下编写 CSS。 不是所有的编码环境都将允许使用处理器，并且面试问题可能很小，不会真正受益于 CSS 预处理器带来的功能。 CSS 处理器最有用的功能是使用变量，可通过 CSS 自定义属性（CSS 变量）本地提供。
+    - **采用 CSS 命名约定**：在编写类时，请考虑采用 CSS 命名方法论，例如 [块元素修饰符](https://getbem.com)。
 4.  阅读我们的用户界面编码深入指南：
-    -   [用户界面问题备忘单](/front-end-interview-guidebook/user-interface-questions-cheatsheet)
-    -   [用户界面组件 API 设计原则](/front-end-interview-guidebook/user-interface-components-api-design-principles)
+    - [用户界面问题备忘单](/front-end-interview-guidebook/user-interface-questions-cheatsheet)
+    - [用户界面组件 API 设计原则](/front-end-interview-guidebook/user-interface-components-api-design-principles)
 5.  选择一个[学习计划](/get-started)，并练习推荐的[用户界面编码问题](/prepare/coding)。
-    -   在构建 UI 组件和构建应用程序/游戏方面，花费大致相等的时间。 两者同样重要。
+    - 在构建 UI 组件和构建应用程序/游戏方面，花费大致相等的时间。 两者同样重要。
 
 ## 重要概念
 
-| 类别         | 重要主题                                             |
-| ---------- | ------------------------------------------------ |
-| 数据结构       | 数组、映射、栈、树、集合                                     |
-| 软件工程       | SOLID 原则、设计模式、模型 - 视图 - 控制器                      |
-| HTML       | 语义 HTML、表单验证、表单提交                                |
-| CSS        | 盒模型、选择器、特异性、定位、单位、Flexbox、Grid、CSS 自定义属性（变量）     |
-| JavaScript | 闭包、回调、`Promise`、`async`/`await`、变长参数处理           |
-| DOM        | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托              |
-| 运行时 API    | 计时器（`setTimeout`、`setInterval`）、网络（Ajax、`fetch`） |
-| 可访问性       | ARIA 角色、状态和属性、键盘交互                               |
+| 类别 | 重要主题 |
+| --- | --- |
+| 数据结构 | 数组、映射、栈、树、集合 |
+| 软件工程 | SOLID 原则、设计模式、模型 - 视图 - 控制器 |
+| HTML | 语义 HTML、表单验证、表单提交 |
+| CSS | 盒模型、选择器、特异性、定位、单位、Flexbox、Grid、CSS 自定义属性（变量） |
+| JavaScript | 闭包、回调、`Promise`、`async`/`await`、变长参数处理 |
+| DOM | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托 |
+| 运行时 API | 计时器（`setTimeout`、`setInterval`）、网络（Ajax、`fetch`） |
+| 可访问性 | ARIA 角色、状态和属性、键盘交互 |
 
 ## 用户界面编码面试评分标准
 
 用户界面编码面试与 JavaScript 编码面试具有类似的评分标准，因为两者都涉及前端领域的编码。 然而，用户界面编码问题将更加强调领域专业知识和各种前端主题。
 
--   **问题解决能力**：使用系统性和逻辑性的方法来理解和解决问题。 将问题分解为更小的独立问题。 评估不同方法及其权衡。
--   **软件工程基础**：熟悉数据结构、算法、运行时复杂度分析、使用设计模式、使用干净的抽象设计解决方案。
--   **领域专业知识**：了解前端领域及相关语言：浏览器（DOM 和 DOM API）、HTML、CSS、JavaScript、用户体验、可访问性、i18n、网络、性能。
--   **交流**：询问澄清细节并清楚地解释自己的方法和考虑因素。
--   **验证**：确定各种测试代码的场景，包括边缘情况。 能够诊断和修复出现的任何问题。
+- **问题解决能力**：使用系统性和逻辑性的方法来理解和解决问题。 将问题分解为更小的独立问题。 评估不同方法及其权衡。
+- **软件工程基础**：熟悉数据结构、算法、运行时复杂度分析、使用设计模式、使用干净的抽象设计解决方案。
+- **领域专业知识**：了解前端领域及相关语言：浏览器（DOM 和 DOM API）、HTML、CSS、JavaScript、用户体验、可访问性、i18n、网络、性能。
+- **交流**：询问澄清细节并清楚地解释自己的方法和考虑因素。
+- **验证**：确定各种测试代码的场景，包括边缘情况。 能够诊断和修复出现的任何问题。
 
 ## 最佳实践问题
 
 从经验而言，最佳用户界面面试问题将根据频率和涉及重要概念来确定：
 
--   [待办事项列表](/questions/user-interface/todo-list)
--   [注册表单](/questions/user-interface/signup-form)
--   [温度转换器](/questions/user-interface/temperature-converter)
--   [进度条](/questions/user-interface/progress-bar)
--   [模拟时钟](/questions/user-interface/analog-clock)
--   [求职信息板](/questions/user-interface/job-board)
--   [捉地鼠游戏](/questions/user-interface/whack-a-mole)
--   [井字游戏](/questions/user-interface/tic-tac-toe)
--   [选项卡](/questions/user-interface/tabs)
--   图片轮播
--   自动完成
--   下拉菜单
--   模态框
+- [待办事项列表](/questions/user-interface/todo-list)
+- [注册表单](/questions/user-interface/signup-form)
+- [温度转换器](/questions/user-interface/temperature-converter)
+- [进度条](/questions/user-interface/progress-bar)
+- [模拟时钟](/questions/user-interface/analog-clock)
+- [求职信息板](/questions/user-interface/job-board)
+- [捉地鼠游戏](/questions/user-interface/whack-a-mole)
+- [井字游戏](/questions/user-interface/tic-tac-toe)
+- [选项卡](/questions/user-interface/tabs)
+- 图片轮播
+- 自动完成
+- 下拉菜单
+- 模态框
 
 GreatFrontEnd 提供[广泛的用户界面编码问题列表](/prepare/coding)，您可以在首选的框架中进行练习（目前支持原生 JavaScript 和 [React](https://reactjs.org/)）。 我们还提供了您可以使用各种 JavaScript UI 框架编写解决方案的测试用例，由前 FAANG 高级工程师编写。 UI 问题不提供自动化测试用例，因为它们往往与实现耦合，并且自动化测试很难准确测试它们。 此外，在面试中，您可能需要自己测试您的 UI。
 

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-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other/pt-BR.mdx

@@ -7,9 +7,9 @@ Para entender as diferenças entre os dois, vamos ver o que cada função faz.
 
 ## `forEach`
 
--   Itera através dos elementos em uma matriz.
--   Executa um callback para cada elemento.
--   Não retorna um valor.
+- Itera através dos elementos em uma matriz.
+- Executa um callback para cada elemento.
+- Não retorna um valor.
 
 ```js
 const a = [1, 2, 3];
@@ -22,8 +22,8 @@ const doubled = a.forEach((num, index) => {
 
 ## `map`
 
--   Itera através dos elementos em uma matriz.
--   "Mapeia" cada elemento para um novo elemento chamando a função em cada elemento, criando um novo array como resultado.
+- Itera através dos elementos em uma matriz.
+- "Mapeia" cada elemento para um novo elemento chamando a função em cada elemento, criando um novo array como resultado.
 
 ```js
 const a = [1, 2, 3];

packages/quiz/questions/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other/zh-CN.mdx

@@ -7,9 +7,9 @@ subtitle: 这两者你会如何选择？
 
 ## `forEach`
 
--   通过数组中的元素进行迭代。
--   对每个元素执行回调。
--   不返回值。
+- 通过数组中的元素进行迭代。
+- 对每个元素执行回调。
+- 不返回值。
 
 ```js
 const a = [1, 2, 3];
@@ -22,8 +22,8 @@ const doubled = a.forEach((num, index) => {
 
 ## `map`
 
--   通过数组中的元素进行迭代。
--   通过在每个元素上调用函数，将每个元素 "映射 "到一个新的元素上，并作为结果创建一个新的数组。
+- 通过数组中的元素进行迭代。
+- 通过在每个元素上调用函数，将每个元素 "映射 "到一个新的元素上，并作为结果创建一个新的数组。
 
 ```js
 const a = [1, 2, 3];

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-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/pt-BR.mdx

@@ -33,5 +33,5 @@ Uma estratégia mobile-first também é responsiva, no entanto, ela define todos
 
 Uma estratégia mobile-first tem as seguintes principais vantagens:
 
--   É mais performático em dispositivos móveis, já que todas as regras aplicadas para eles não precisam ser validadas em relação a nenhuma media query.
--   Designs mobile-first são mais propensos a ser utilizáveis em dispositivos maiores (apenas aparecerão mais esticados, mas ainda utilizáveis). No entanto, o inverso não é verdadeiro.
+- É mais performático em dispositivos móveis, já que todas as regras aplicadas para eles não precisam ser validadas em relação a nenhuma media query.
+- Designs mobile-first são mais propensos a ser utilizáveis em dispositivos maiores (apenas aparecerão mais esticados, mas ainda utilizáveis). No entanto, o inverso não é verdadeiro.

packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/zh-CN.mdx

@@ -34,5 +34,5 @@ title: 你能解释一下将网站编码为响应式与使用移动优先策略
 
 移动优先策略具有以下主要优点：
 
--   它在移动设备上的性能更强，因为适用于它们的所有规则都不必与任何媒体查询进行验证。
--   移动优先的设计更有可能在更大的设备上使用（只是会显得更拉长，但仍然可以使用）。 当然，反过来就不适用了。
+- 它在移动设备上的性能更强，因为适用于它们的所有规则都不必与任何媒体查询进行验证。
+- 移动优先的设计更有可能在更大的设备上使用（只是会显得更拉长，但仍然可以使用）。 当然，反过来就不适用了。

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/can-you-give-an-example-of-an-media-property-other-than-screen/pt-BR.mdx

@@ -4,10 +4,10 @@ title: Você pode dar um exemplo de uma propriedade `@media` diferente de `tela`
 
 Existem quatro tipos de propriedades `@media` (incluindo `screen`):
 
--   `all`: para todos os dispositivos de tipo de mídia
--   `print`: para impressoras
--   `speech`: para leitores de tela que "lêem" a página em voz alta
--   `screen`: para telas de computadores, tablets, smartphones, etc.
+- `all`: para todos os dispositivos de tipo de mídia
+- `print`: para impressoras
+- `speech`: para leitores de tela que "lêem" a página em voz alta
+- `screen`: para telas de computadores, tablets, smartphones, etc.
 
 Aqui está um exemplo de uso do tipo de mídia `print`:
 

packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/zh-CN.mdx

@@ -4,10 +4,10 @@ title: 你能举例说明除 "screen "以外的媒体查询属性吗？
 
 有四种类型的媒体查询属性(包括`screen`)：
 
--   `all`：适用于所有媒体类型设备
--   `print`: 适用于打印机
--   `speech`：用于屏幕阅读器，大声 "读 "出页面。
--   `screen`：用于电脑屏幕、平板电脑、智能手机等。
+- `all`：适用于所有媒体类型设备
+- `print`: 适用于打印机
+- `speech`：用于屏幕阅读器，大声 "读 "出页面。
+- `screen`：用于电脑屏幕、平板电脑、智能手机等。
 
 下面是 `print` 媒体类型的用法示例：
 

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,11 +5,8 @@
   "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/pt-BR.mdx

@@ -8,10 +8,10 @@ Saber estabelecer um contexto de formatação de blocos é importante, porque se
 
 Um BFC é uma caixa HTML que atende pelo menos uma das seguintes condições:
 
--   O valor de `float` não é `none`.
--   O valor de `posição` não é `static` nem `relative`.
--   O valor de `display` é `table-cell`, `table-caption`, `inline-block`, `flex`, or `inline-flex`, `grid`, or `inline-grid`.
--   O valor de `float` não é `none`.
+- O valor de `float` não é `none`.
+- O valor de `posição` não é `static` nem `relative`.
+- O valor de `display` é `table-cell`, `table-caption`, `inline-block`, `flex`, or `inline-flex`, `grid`, or `inline-grid`.
+- O valor de `float` não é `none`.
 
 Em um BFC, a borda externa esquerda de cada caixa toca a borda esquerda do bloco contêiner (para formatação da direita para a esquerda, as bordas direitas se tocam).
 

packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.mdx

@@ -6,13 +6,13 @@ title: 描述块级格式化上下文(BFC)及其工作方式。
 
 了解如何建立一个块格式化的上下文是很重要的，因为如果不这样做，容器盒子就不会[包含浮动的子元素](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height)。 这类似于外边距重叠，但更阴险，因为你会发现整个盒子以奇特的方式重叠。
 
-想要创建一个BFC，至少满足下列条件之一：
+想要创建一个 BFC，至少满足下列条件之一：
 
--   `float` 的值不是 `none` 。
--   `position` 的值既不是`static` 也不是`relative` 。
--   `display` 的值是 `table-cell`, `table-caption`, `inline-block`, `flex`, 或 `inline-flex`, `gid`, 或 `inline-grid`。
--   `overflow`的值不是\`visible'。
+- `float` 的值不是 `none` 。
+- `position` 的值既不是`static` 也不是`relative` 。
+- `display` 的值是 `table-cell`, `table-caption`, `inline-block`, `flex`, 或 `inline-flex`, `gid`, 或 `inline-grid`。
+- `overflow`的值不是\`visible'。
 
-在BFC中，每个盒子的左外边缘都会接触到包含块的左边缘（对于从右到左的格式化，右边缘会接触）。
+在 BFC 中，每个盒子的左外边缘都会接触到包含块的左边缘（对于从右到左的格式化，右边缘会接触）。
 
 BFC 中相邻区块级盒子之间的垂直外间距会被折叠。 在[外边距重叠](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_mark_mark_bolsing)上阅读更多内容。

packages/quiz/questions/describe-floats-and-how-they-work/pt-BR.mdx

@@ -30,4 +30,4 @@ Nos bons dias antigos, o CSS frameworks como o Bootstrap 2 usou a propriedade `f
 
 ## Referências
 
--   [Clearfix: Uma Lição em Desenvolvimento Web Evolução](https://css-tricks.com/clearfix-a-lesson-web-development-evolution/)
+- [Clearfix: Uma Lição em Desenvolvimento Web Evolução](https://css-tricks.com/clearfix-a-lesson-web-development-evolution/)

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

@@ -26,8 +26,8 @@ CSS `clear` 属性可以放置在 `left`/`right`/`both` 浮动元素之下。
 
 ## 琐事
 
-在过去的好日子里，Bootstrap 2等CSS框架使用`float`属性来实现其网格系统。 然而，随着这些日子的 CSS Flexbox 和 Grid，已不再需要使用 `float` 属性。
+在过去的好日子里，Bootstrap 2 等 CSS 框架使用`float`属性来实现其网格系统。 然而，随着这些日子的 CSS Flexbox 和 Grid，已不再需要使用 `float` 属性。
 
 ## 参考资料
 
--   [清浮动: 网页开发的演变课程](https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/)
+- [清浮动: 网页开发的演变课程](https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/)

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

@@ -4,15 +4,15 @@ title: Descreva pseudo-elementos e discuta para que eles são usados.
 
 Um CSS [pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) é uma palavra-chave adicionada a um seletor que permite estilizar uma parte específica do(s) elemento(s) selecionado(s). Eles podem ser usados para decoração (`::first-line`, `::first-letter`) ou adicionando elementos à marcação (combinado com `content: ...`) sem ter que modificar a marcação (`:before`, `:after`).
 
--   `::first-line` e `::first-letter` podem ser usados para decorar o texto.
--   Usado no truque `.clearfix` conforme mostrado acima, para adicionar um elemento de espaço zero com `clear: both`.
--   As setas triangulares em tooltips utilizam `::before` e `::after`. Incentiva a separação de responsabilidades porque o triângulo é considerado parte do estilo e não realmente do DOM.
+- `::first-line` e `::first-letter` podem ser usados para decorar o texto.
+- Usado no truque `.clearfix` conforme mostrado acima, para adicionar um elemento de espaço zero com `clear: both`.
+- As setas triangulares em tooltips utilizam `::before` e `::after`. Incentiva a separação de responsabilidades porque o triângulo é considerado parte do estilo e não realmente do DOM.
 
 ## Notas
 
--   Pseudo-elementos são diferentes de [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), que são usados para estilizar um elemento baseado em seu _state_ (como `:hover`, `:focus`, etc).
--   Dois-pontos devem ser usados em vez de dois-pontos para distinguir pseudo-classes de pseudo-elementos. A maioria dos navegadores suporta ambas as sintaxes, pois essa distinção não estava clara nas especificações antigas do W3C.
+- Pseudo-elementos são diferentes de [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), que são usados para estilizar um elemento baseado em seu _state_ (como `:hover`, `:focus`, etc).
+- Dois-pontos devem ser usados em vez de dois-pontos para distinguir pseudo-classes de pseudo-elementos. A maioria dos navegadores suporta ambas as sintaxes, pois essa distinção não estava clara nas especificações antigas do W3C.
 
 ## Referências
 
--   [Pseudo-elements - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
+- [Pseudo-elements - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)

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

@@ -4,15 +4,15 @@ title: 描述伪元素并讨论其用途。
 
 CSS [伪元素](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-elements) 是一个添加到选择器中的关键词，使您能够修改所选元素的特定部分的样式。 它们可以用于装饰 (`::first-line`, `::first-letter`) 或添加标签元素(结合`content: ...`) 无需修改标签(`:before`, `:after `)
 
--   `::firstline` 和 `::firstletter` 可以用于装饰文本。
--   用于 `.clearfix` 技巧，如上图所示，添加一个带有`clear: both`的零空间元素。
--   Tooltips 中的三角箭头使用 `::before` 和 `::after ` 。 鼓励关注点分离，因为三角形被视为样式的一部分，而不是真正的DOM。
+- `::firstline` 和 `::firstletter` 可以用于装饰文本。
+- 用于 `.clearfix` 技巧，如上图所示，添加一个带有`clear: both`的零空间元素。
+- Tooltips 中的三角箭头使用 `::before` 和 `::after ` 。 鼓励关注点分离，因为三角形被视为样式的一部分，而不是真正的 DOM。
 
 ## 备注
 
--   伪元素不同于 [伪类](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-classes)，后者用于根据状态(例如`:hover`, `:focus`, 等等) 修改样式。
--   应使用双冒号而不是单冒号来区分伪类和伪元素。 大多数浏览器都支持这两种语法，因为旧的 W3C 视图中没有区分这点。
+- 伪元素不同于 [伪类](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-classes)，后者用于根据状态(例如`:hover`, `:focus`, 等等) 修改样式。
+- 应使用双冒号而不是单冒号来区分伪类和伪元素。 大多数浏览器都支持这两种语法，因为旧的 W3C 视图中没有区分这点。
 
 ## 参考资料
 
--   [伪元素-CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-elements)
+- [伪元素-CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CS/Pseudo-elements)

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

@@ -2,9 +2,9 @@
 title: Describe the difference between a cookie, `sessionStorage` and `localStorage`.
 ---
 
-Local storage is useful for storing data that the user will need to access later, such as offline data, because it stores the data in the browser and the system. This data will persist even if the user closes and reopens the browser. 
+Local storage is useful for storing data that the user will need to access later, such as offline data, because it stores the data in the browser and the system. This data will persist even if the user closes and reopens the browser.
 
-Session storage is a great way to improve the performance of your web applications. It stores data locally on the browser but is specific to (and only accessible by) the respective site/browser tab and is only available while the user is on the site/tab. This is a more secure storage method due to the restrictive access and promotes better site performance due to reduced data transfer between server and client. 
+Session storage is a great way to improve the performance of your web applications. It stores data locally on the browser but is specific to (and only accessible by) the respective site/browser tab and is only available while the user is on the site/tab. This is a more secure storage method due to the restrictive access and promotes better site performance due to reduced data transfer between server and client.
 
 Cookies are a good choice for storing data that should not be persisted for a long time, such as session IDs. Cookies allow you to set an expiry time at which point it would be deleted. Cookies can only be smaller sized data compared to the other two storage methods.
 

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

@@ -2,9 +2,9 @@
 title: Descreva a diferença entre cookie, `sessionStorage` e `localStorage`.
 ---
 
-Local storage is useful for storing data that the user will need to access later, such as offline data, because it stores the data in the browser and the system. This data will persist even if the user closes and reopens the browser and is accessible by other sites. 
+Local storage is useful for storing data that the user will need to access later, such as offline data, because it stores the data in the browser and the system. This data will persist even if the user closes and reopens the browser and is accessible by other sites.
 
-Session storage is a great way to improve the performance of your web applications. It stores data locally on the browser but is specific to (and only accessible by) the respective site/browser tab and is only available while the user is on the site/tab. This is a more secure storage method due to the restrictive access and promotes better site performance due to reduced data transfer between server and client. 
+Session storage is a great way to improve the performance of your web applications. It stores data locally on the browser but is specific to (and only accessible by) the respective site/browser tab and is only available while the user is on the site/tab. This is a more secure storage method due to the restrictive access and promotes better site performance due to reduced data transfer between server and client.
 
 Cookies are a good choice for storing data that should not be persisted for a long time, such as session IDs. Cookies allow you to set an expiry time at which point it would be deleted. Cookies can only be smaller sized data compared to the other two storage methods.
 
@@ -12,19 +12,19 @@ Cookies are a good choice for storing data that should not be persisted for a lo
 
 Cookies, `localStorage`, and `sessionStorage`, são todos:
 
--   Mecanismos de armazenamento no lado do cliente. Isso significa que os clientes podem ler e modificar os valores.
--   Armazenamento baseado em chave-valor.
--   Eles só são capazes de armazenar valores como strings. Objetos terão que ser serializados em uma string (`JSON.stringify()`) a fim de serem armazenados.
+- Mecanismos de armazenamento no lado do cliente. Isso significa que os clientes podem ler e modificar os valores.
+- Armazenamento baseado em chave-valor.
+- Eles só são capazes de armazenar valores como strings. Objetos terão que ser serializados em uma string (`JSON.stringify()`) a fim de serem armazenados.
 
 ## Diferenças
 
-| Propriedade                                       | Cookie                                                             | `localStorage`  | `sessionStorage` |
-| ------------------------------------------------- | ------------------------------------------------------------------ | --------------- | ---------------- |
-| Iniciador                                         | Cliente ou servidor. O servidor pode usar o cabeçalho `Set-Cookie` | Cliente         | Cliente          |
-| Vencimento                                        | Definir manualmente                                                | Para sempre     | Ao fechar a aba  |
-| Persistente através de sessões do navegador       | Depende se a expiração está definida                               | Sim             | Não              |
-| Enviado para o servidor com cada solicitação HTTP | Os cookies são automaticamente enviados via cabeçalho `Cookie`     | Não             | Não              |
-| Capacidade (por domínio)                          | 4kb                                                                | 5MB             | 5MB              |
-| Acesso                                            | Quqlquer Janela                                                    | Quqlquer Janela | Mesma Guia       |
+| Propriedade | Cookie | `localStorage` | `sessionStorage` |
+| --- | --- | --- | --- |
+| Iniciador | Cliente ou servidor. O servidor pode usar o cabeçalho `Set-Cookie` | Cliente | Cliente |
+| Vencimento | Definir manualmente | Para sempre | Ao fechar a aba |
+| Persistente através de sessões do navegador | Depende se a expiração está definida | Sim | Não |
+| Enviado para o servidor com cada solicitação HTTP | Os cookies são automaticamente enviados via cabeçalho `Cookie` | Não | Não |
+| Capacidade (por domínio) | 4kb | 5MB | 5MB |
+| Acesso | Quqlquer Janela | Quqlquer Janela | Mesma Guia |
 
 Também existem outros mecanismos de armazenamento do lado do cliente, como [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) que é mais poderoso do que as tecnologias acima mencionadas, mas mais complicado de usar.

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

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

packages/quiz/questions/describe-the-difference-between-script-async-and-script-defer/pt-BR.mdx

@@ -20,11 +20,11 @@ Se um script depende de um DOM totalmente analisado, o atributo `defer` será ú
 
 ## Notas
 
--   Geralmente, o atributo `async` deve ser usado para scripts que não são críticos para a renderização inicial da página e não dependem um do outro. enquanto o atributo `defer` deve ser usado para scripts que dependem de / é dependente de outro script.
--   Os atributos `async` e `defer` são ignorados para scripts que não têm o atributo `src`.
--   `<script>`s com `defer` ou `async` que contêm `document.write()` serão ignorados com uma mensagem como "Uma chamada para o documento.write() de um script externo carregado de forma assíncrona foi ignorada".
+- Geralmente, o atributo `async` deve ser usado para scripts que não são críticos para a renderização inicial da página e não dependem um do outro. enquanto o atributo `defer` deve ser usado para scripts que dependem de / é dependente de outro script.
+- Os atributos `async` e `defer` são ignorados para scripts que não têm o atributo `src`.
+- `<script>`s com `defer` ou `async` que contêm `document.write()` serão ignorados com uma mensagem como "Uma chamada para o documento.write() de um script externo carregado de forma assíncrona foi ignorada".
 
 ## Referências
 
--   [`<script>`: O elemento Script | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)
--   [async vs defer attributes](https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)
+- [`<script>`: O elemento Script | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)
+- [async vs defer attributes](https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)

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

@@ -6,25 +6,25 @@ title: 描述`<script>`、`<script async>`和`<script defer> `之间的差异
 
 ## 普通`<script>`
 
-对于普通的 `<script>` 标签，在遇到它们时没有任何`async` 或 `defer`。 HTML解析被阻止，脚本会被下载并立即执行。 脚本执行后HTML解析恢复。
+对于普通的 `<script>` 标签，在遇到它们时没有任何`async` 或 `defer`。 HTML 解析被阻止，脚本会被下载并立即执行。 脚本执行后 HTML 解析恢复。
 
 ## `<script async>`
 
-在`<script async>`中，脚本将与HTML解析并行获取，并在其可用时立即执行（可能在HTML解析完成之前），而且不一定按照HTML文档中的顺序执行。 当脚本独立于页面上的任何其他脚本时使用 `async` ，比如分析。
+在`<script async>`中，脚本将与 HTML 解析并行获取，并在其可用时立即执行（可能在 HTML 解析完成之前），而且不一定按照 HTML 文档中的顺序执行。 当脚本独立于页面上的任何其他脚本时使用 `async` ，比如分析。
 
 ## `<script defer>`
 
-在`<script defer>`, 脚本将在文档已完全解析并执行时并行获取到 HTML 解析和执行， 但在 `DOMContentLoaded` 事件之前。 如果其中有多个，每个defer脚本都是按照它们在 HTML 文档中出现的顺序执行的。
+在`<script defer>`, 脚本将在文档已完全解析并执行时并行获取到 HTML 解析和执行， 但在 `DOMContentLoaded` 事件之前。 如果其中有多个，每个 defer 脚本都是按照它们在 HTML 文档中出现的顺序执行的。
 
-如果脚本依赖于完全解析的DOM，则`defer` 属性将有助于确保在执行前完全解析HTML。
+如果脚本依赖于完全解析的 DOM，则`defer` 属性将有助于确保在执行前完全解析 HTML。
 
 ## 备注
 
--   一般说来， `async` 属性应该用于对页面初始化不重要且不依赖于对方的脚本。 `defer` 属性应该用于依赖于/被依赖于其他脚本的脚本。
--   没有`src`属性的脚本， `async` 和 `deleger` 属性会被忽略。
--   包含`defer'或`async'的`<script>`将被忽略，并显示 "来自异步加载的外部脚本对document.write()的调用被忽略 "的信息。
+- 一般说来， `async` 属性应该用于对页面初始化不重要且不依赖于对方的脚本。 `defer` 属性应该用于依赖于/被依赖于其他脚本的脚本。
+- 没有`src`属性的脚本， `async` 和 `deleger` 属性会被忽略。
+- 包含`defer'或`async'的`<script>`将被忽略，并显示 "来自异步加载的外部脚本对 document.write()的调用被忽略 "的信息。
 
 ## 参考资料
 
--   [`<script>`: 脚本元素 | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)
--   [async vs defer 属性](https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)
+- [`<script>`: 脚本元素 | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)
+- [async vs defer 属性](https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)

packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/pt-BR.mdx

@@ -4,10 +4,10 @@ title: Descreva o que você gosta e não gosta sobre os pré-processadores CSS q
 
 ## Gostei
 
--   A maioria das vantagens mencionadas em ["Quais são as vantagens/desvantagens de usar pré-processadores CSS?"](/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors).
--   Less é escrito em JavaScript, o que o torna compatível com o Node.
+- A maioria das vantagens mencionadas em ["Quais são as vantagens/desvantagens de usar pré-processadores CSS?"](/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors).
+- Less é escrito em JavaScript, o que o torna compatível com o Node.
 
 ## Não gostei
 
--   Sass depende de `node-sass`, que é um vínculo para o LibSass escrito em C++. A biblioteca tem que ser recalculada com frequência quando estiver mudando entre as versões do Node.js.
--   No Less, os nomes de variáveis são prefixados com `@`, o que pode ser confundido com palavras-chave nativas do CSS, como a regra `@media`, `@import` e `@font-face`.
+- Sass depende de `node-sass`, que é um vínculo para o LibSass escrito em C++. A biblioteca tem que ser recalculada com frequência quando estiver mudando entre as versões do Node.js.
+- No Less, os nomes de variáveis são prefixados com `@`, o que pode ser confundido com palavras-chave nativas do CSS, como a regra `@media`, `@import` e `@font-face`.

packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/zh-CN.mdx

@@ -4,10 +4,10 @@ title: 描述您喜欢和不喜欢使用的 CSS 预处理器。
 
 ## 喜欢
 
--   主要是[“使用CSS preprocessors的优点/缺点?”]\(/questions/quiz/what-are-the-favourges-adversus of using-css-preprocesss) 中提到的优势。
--   Less 是用 JavaScript 写的，它在 Nodejs 中很好用。
+- 主要是[“使用 CSS preprocessors 的优点/缺点?”]\(/questions/quiz/what-are-the-favourges-adversus of using-css-preprocesss) 中提到的优势。
+- Less 是用 JavaScript 写的，它在 Nodejs 中很好用。
 
 ## 不喜欢
 
--   Sass 依赖 `node-sass`，它是一个 C++ 写的 LibSass的绑定。 当在 Node.js 版本间切换时，必须经常重新编译库。
--   在Less中，变量名前缀是`@`, 它可能与原生的 CSS 关键字混淆, 例如`@media`, `@import` 和 `@font-face` 规则。
+- Sass 依赖 `node-sass`，它是一个 C++ 写的 LibSass 的绑定。 当在 Node.js 版本间切换时，必须经常重新编译库。
+- 在 Less 中，变量名前缀是`@`, 它可能与原生的 CSS 关键字混淆, 例如`@media`, `@import` 和 `@font-face` 规则。

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/pt-BR.mdx

@@ -6,9 +6,9 @@ Projetar e desenvolver para sites multilíngues faz parte da internacionalizaç
 
 ## Otimização de Busca (Seo)
 
--   Use o atributo `lang` na tag `<html>`.
--   Incluir a localidade na URL (por exemplo, en_US, zh_CN, etc).
--   Páginas web devem usar `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` para dizer aos motores de pesquisa que há outra página no `href` especificado com o mesmo conteúdo, mas para outro idioma/locale.
+- Use o atributo `lang` na tag `<html>`.
+- Incluir a localidade na URL (por exemplo, en_US, zh_CN, etc).
+- Páginas web devem usar `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` para dizer aos motores de pesquisa que há outra página no `href` especificado com o mesmo conteúdo, mas para outro idioma/locale.
 
 ## Entendendo a diferença entre localidade e idioma
 
@@ -18,8 +18,8 @@ As configurações regionais controlam como números, datas e horários são exi
 
 Certos idiomas, especialmente os mais falados, têm diferentes "sabores" em diferentes países (regras de gramática, ortografia, caracteres). É importante diferenciar idiomas para o país de destino e não assumir/forçar a versão de um país de um idioma para todos os países que falam o idioma. Exemplos:
 
--   `en`: `en-US` (Inglês Americano), `en-GB` (Inglês Britânico)
--   `zh`: `zh-CN` (Chinês (Simplificado)), `zh-TW` (Chinês (Tradicional))
+- `en`: `en-US` (Inglês Americano), `en-GB` (Inglês Britânico)
+- `zh`: `zh-CN` (Chinês (Simplificado)), `zh-TW` (Chinês (Tradicional))
 
 ## Prever localidade, mas sem restrições
 
@@ -51,4 +51,4 @@ As cores são percebidas de maneira diferente em diferentes idiomas e culturas.
 
 ## Referências
 
--   [As diferenças entre localidades e idiomas](https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages)
+- [As diferenças entre localidades e idiomas](https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages)

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

@@ -6,9 +6,9 @@ title: 在设计或开发多语言站点时你必须注意什么事？
 
 ## 搜索引擎优化
 
--   使用 `<html>` 标签上的 `lang` 属性。
--   在 URL 中包含区域设置(例如 en_US, zh_CN等)。
--   网页应该使用 `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` 来告诉搜索引擎，在指定的 `href` 中有另一个页面具有相同的内容，但是对于另一种语言/本地化。
+- 使用 `<html>` 标签上的 `lang` 属性。
+- 在 URL 中包含区域设置(例如 en_US, zh_CN 等)。
+- 网页应该使用 `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` 来告诉搜索引擎，在指定的 `href` 中有另一个页面具有相同的内容，但是对于另一种语言/本地化。
 
 ## 了解地域与语言之间的区别
 
@@ -18,12 +18,12 @@ title: 在设计或开发多语言站点时你必须注意什么事？
 
 某些语言，尤其是广为流传的语言在不同国家有不同的“喜好”（语法规则、拼写、字符）。 重要的是要区分目标国家的语言，而不要假定/强制一个国家的语言版本适用于所有讲该语言的国家。 示例：
 
--   `en`: `en-USA` (美国英文), `en-GB` (英国英文)
--   `zh`: `zh-CN`(简体中文), `zh-TW`(繁体中文)
+- `en`: `en-USA` (美国英文), `en-GB` (英国英文)
+- `zh`: `zh-CN`(简体中文), `zh-TW`(繁体中文)
 
 ## 预测地域，但不限制
 
-服务器可以通过HTTP头部`Accept-Language`和IP组合来决定访客的地域/语言。 通过这些，可以为访客自动选择最佳地域设置。 然而，预测并不是万无一失的(特别是如果访客使用VPN)，仍然应当允许访客不受干扰地改变自己的国家/语言。
+服务器可以通过 HTTP 头部`Accept-Language`和 IP 组合来决定访客的地域/语言。 通过这些，可以为访客自动选择最佳地域设置。 然而，预测并不是万无一失的(特别是如果访客使用 VPN)，仍然应当允许访客不受干扰地改变自己的国家/语言。
 
 ## 考虑不同语言文本长度的差异
 
@@ -43,7 +43,7 @@ title: 在设计或开发多语言站点时你必须注意什么事？
 
 ## 不在图片中放置文本
 
-将文本放在位图中（如png、gif、jpg等）并不是一种可扩展的方法。 在图片中放置文字仍然是一种常用的方式，可以在任何计算机上显示优雅、非系统字体。 不过，为了支持图片文本翻译成其他语言，需要为每种语言创建单独的图片，这不是设计人员的灵活工作流程。
+将文本放在位图中（如 png、gif、jpg 等）并不是一种可扩展的方法。 在图片中放置文字仍然是一种常用的方式，可以在任何计算机上显示优雅、非系统字体。 不过，为了支持图片文本翻译成其他语言，需要为每种语言创建单独的图片，这不是设计人员的灵活工作流程。
 
 ## 要注意色彩的感知方式
 
@@ -51,4 +51,4 @@ title: 在设计或开发多语言站点时你必须注意什么事？
 
 ## 参考资料
 
--   [地域和语言之间的区别]\(https://devblogs.microsoft.com/setup/the-diffes-between en-locales-and-langues)
+- [地域和语言之间的区别]\(https://devblogs.microsoft.com/setup/the-diffes-between en-locales-and-langues)

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/pt-BR.mdx

@@ -8,8 +8,8 @@ Essa técnica costumava ser comumente usada para ícones (por exemplo, o Gmail u
 
 ## Vantagens
 
--   Reduz o número de solicitações HTTP para várias imagens (apenas um único pedido é necessário por spritesheet). Mas com HTTP2, carregar várias imagens já não é muito problema.
--   Download avançado de ativos que não serão baixados até ser necessário, como imagens que aparecem apenas nos pseudo-estados `:hover`. O piscar não seria visto.
+- Reduz o número de solicitações HTTP para várias imagens (apenas um único pedido é necessário por spritesheet). Mas com HTTP2, carregar várias imagens já não é muito problema.
+- Download avançado de ativos que não serão baixados até ser necessário, como imagens que aparecem apenas nos pseudo-estados `:hover`. O piscar não seria visto.
 
 ## Como implementar
 
@@ -45,4 +45,4 @@ E pode ser usado no HTML como tal:
 
 ## Referências
 
--   [Implementando sprites de imagem em CSS - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
+- [Implementando sprites de imagem em CSS - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)

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

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

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
 ```
@@ -39,4 +39,4 @@ Tente [implementar seu próprio método `Function.prototype.bind()`](/questions/
 
 ## Referências
 
--   [Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)
+- [Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)

packages/quiz/questions/explain-function-prototype-bind/zh-CN.mdx

@@ -6,7 +6,7 @@ title: 解释 `Function.prototype.bind`
 
 _资料来源：[Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)_
 
-`bind()` 对于在要传递给其他函数的类的方法中绑定 `this` 的值非常有用。 这通常是在React类组件方法中做的，而这些方法没有使用箭头函数来定义。
+`bind()` 对于在要传递给其他函数的类的方法中绑定 `this` 的值非常有用。 这通常是在 React 类组件方法中做的，而这些方法没有使用箭头函数来定义。
 
 ```js
 const john = {
@@ -24,7 +24,7 @@ console.log(unboundGetAge()); // undefined
 const boundGetAge = john.getAge.bind(john);
 console.log(boundGetAge()); // 42
 
-const mary = {age: 21};
+const mary = { age: 21 };
 const boundGetAgeMary = john.getAge.bind(mary);
 console.log(boundGetAgeMary()); // 21
 ```
@@ -35,8 +35,8 @@ console.log(boundGetAgeMary()); // 21
 
 ## 练习
 
-在GreatFrontEnd尝试[实现你自己的 `Function.prototype.bind()` 方法](/questions/javascript/function-bind)。
+在 GreatFrontEnd 尝试[实现你自己的 `Function.prototype.bind()` 方法](/questions/javascript/function-bind)。
 
 ## 参考资料
 
--   [Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)
+- [Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)

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.