diff --git a/.editorconfig b/.editorconfig
index be3654ef59..8412c1193b 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -8,4 +8,4 @@ trim_trailing_whitespace = true
 [*.{js,py}]
 charset = utf-8
 indent_style = space
-indent_size = 4
+indent_size = 2
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000000..c8b8428000
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,3 @@
+github: [yangshun]
+open_collective: yangshun
+custom: https://www.buymeacoffee.com/yangshun
diff --git a/.gitignore b/.gitignore
index 94f1119ef0..f757af5f03 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,53 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+.yarn
+
+# testing
+coverage
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js
+.next/
+out/
+build
+
+# misc
 .DS_Store
-.vscode
+*.pem
+tmp
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+# build
+dist
+
+# i18n
+crowdin.yml
+
+# angular
+.angular
+
+# env
+.env
+
+# langnostic
+.langnostic
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000..1fcfb4fe86
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "bracketSameLine": true,
+  "printWidth": 80,
+  "proseWrap": "never",
+  "singleQuote": true,
+  "trailingComma": "all"
+}
diff --git a/.topics_WIP_PLEASE_IGNORE/accessibility.md b/.wip/topics/accessibility.md
similarity index 97%
rename from .topics_WIP_PLEASE_IGNORE/accessibility.md
rename to .wip/topics/accessibility.md
index e6f61451b4..92afaa4fac 100644
--- a/.topics_WIP_PLEASE_IGNORE/accessibility.md
+++ b/.wip/topics/accessibility.md
@@ -1,5 +1,4 @@
-Accessibility
-==
+# Accessibility
 
 ## Glossary
 
@@ -77,17 +76,20 @@ The following is a checklist that contains recommendations for implementing HTML
 - `aria-role` attributes tell assistive technologies that the element should follow that role's accessibility patterns. There are well-defined roles in the HTML spec. Do not define them on your own.
   - `tabindex="0"` is usually added to it elements that have `role` added so that it can be focused.
 - Assistive labelling
+
   - `aria-label` is useful for labelling buttons where the content is empty or contains only icons.
   - `aria-labelledby` is similar to `<label>` elements, and can be used on any elements.
+
     ```html
     /* Normal label example */
-    <input type="radio" id="coffee-label">
+    <input type="radio" id="coffee-label" />
     <label for="coffee-label">Coffee</label>
 
     /* aria-labelledby example */
     <div role="radio" aria-labelledby="coffee-label"></div>
     <span id="coffee-label">Coffee</span>
     ```
+
 - ARIA Relationships
   - ARIA relationship attributes create semantic relationships between elements on the page. The `aria-labelledby` attribute in the previous example indicates that the `<div>` is labelled by the element with that `id`.
   - Possible relationship attributes include `aria-activedescendent`, `aria-describedby`, `aria-labelledby`, `aria-owns`, `aria-posinset` and `aria-setsize`.
@@ -137,23 +139,23 @@ The following is a checklist that contains recommendations for implementing HTML
 Consider using ARIA attributes in your CSS selectors to reduce some noise in your CSS. For custom toggle buttons, instead of doing this,
 
 ```html
-<div class="toggle pressed" role="button" tabindex="0" aria-pressed="true"></div> /* On */
-<div class="toggle" role="button" tabindex="0" aria-pressed="false"></div> /* Off */
-
-.toggle.pressed {
-  ...
-}
+<div
+  class="toggle pressed"
+  role="button"
+  tabindex="0"
+  aria-pressed="true"></div>
+/* On */
+<div class="toggle" role="button" tabindex="0" aria-pressed="false"></div>
+/* Off */ .toggle.pressed { ... }
 ```
 
 you can do this instead:
 
 ```html
-<div class="toggle" role="button" tabindex="0" aria-pressed="true"></div> /* On */
-<div class="toggle" role="button" tabindex="0" aria-pressed="false"></div> /* Off */
-
-.toggle[aria-pressed="true"] {
-  ...
-}
+<div class="toggle" role="button" tabindex="0" aria-pressed="true"></div>
+/* On */
+<div class="toggle" role="button" tabindex="0" aria-pressed="false"></div>
+/* Off */ .toggle[aria-pressed="true"] { ... }
 ```
 
 which removes the need for toggling the `press` class on the element.
@@ -196,6 +198,6 @@ Fixing accessibility issues is like fixing bugs; it is best looked at through th
 - How badly does this accessibility issue affect your users?
 - How expensive is it going to cost to fix?
 
-###### References
+#### References
 
 - https://www.udacity.com/course/web-accessibility--ud891
diff --git a/.topics_WIP_PLEASE_IGNORE/browser.md b/.wip/topics/browser.md
similarity index 63%
rename from .topics_WIP_PLEASE_IGNORE/browser.md
rename to .wip/topics/browser.md
index 8ace1b82c5..422660ae85 100644
--- a/.topics_WIP_PLEASE_IGNORE/browser.md
+++ b/.wip/topics/browser.md
@@ -1,5 +1,4 @@
-Browser
-==
+# Browser
 
 ## Glossary
 
@@ -15,24 +14,33 @@ 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".
 
-###### References
+- Finally, this gets actually displayed in a browser window, a process called "painting".
+
+#### References
 
 - http://taligarsiel.com/Projects/howbrowserswork1.htm
 - https://medium.freecodecamp.org/its-not-dark-magic-pulling-back-the-curtains-from-your-stylesheets-c8d677fa21b2
@@ -44,6 +52,7 @@ When changing element styles which don't affect the element's position on a page
 ## Reflow
 
 When the changes affect document contents or structure, or element position, a reflow (or relayout) happens. These changes are usually triggered by:
+
 - DOM manipulation (element addition, deletion, altering, or changing element order)
 - Contents changes, including text changes in form fields
 - Calculation or altering of CSS properties
diff --git a/.topics_WIP_PLEASE_IGNORE/caching.md b/.wip/topics/caching.md
similarity index 97%
rename from .topics_WIP_PLEASE_IGNORE/caching.md
rename to .wip/topics/caching.md
index cea2dbd989..e09cd9cb65 100644
--- a/.topics_WIP_PLEASE_IGNORE/caching.md
+++ b/.wip/topics/caching.md
@@ -1,5 +1,4 @@
-Caching
-==
+# Caching
 
 WIP.
 
diff --git a/.topics_WIP_PLEASE_IGNORE/css.md b/.wip/topics/css.md
similarity index 93%
rename from .topics_WIP_PLEASE_IGNORE/css.md
rename to .wip/topics/css.md
index d2a034a3aa..50b211affe 100644
--- a/.topics_WIP_PLEASE_IGNORE/css.md
+++ b/.wip/topics/css.md
@@ -1,5 +1,4 @@
-CSS
-==
+# CSS
 
 CSS (Cascading Style Sheets) are rules to describe how your HTML elements look. Writing good CSS is hard. It usually takes many years of experience and frustration of shooting yourself in the foot before one is able to write maintainable and scalable CSS. CSS, having a global namespace, is fundamentally designed for web documents, and not really for web apps that favor a components architecture. Hence, experienced front end developers have designed methodologies to guide people on how to write organized CSS for complex projects, such as using [SMACSS](https://smacss.com/), [BEM](http://getbem.com/), [SUIT CSS](http://suitcss.github.io/), etc.
 
@@ -12,15 +11,15 @@ If you are a total beginner to CSS, Codecademy's [HTML & CSS course](https://www
 ## Glossary
 
 - [**Box Model**](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) - The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area (e.g. text, an image, etc.) and optional surrounding padding, border, and margin areas.
-- [**Specificity**](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) - Specificity is how browsers decide which CSS property values are the most relevant to an element and, will therefore be applied. It is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. 
+- [**Specificity**](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) - Specificity is how browsers decide which CSS property values are the most relevant to an element and, will therefore be applied. It is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.
   - When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. It only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.
   - Typically used in type selectors/pseduo elements (`h1`, `div`, `:before`), class/attribute selectors (`.btn`, `[type="radio"]`), pseudo-classes (`:hover`) and ID selectors (`#someElement`).
   - Inline styles added to an element always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
-  - When an important rule (`!important`) is used on a style declaration, this declaration overrides any other declarations. Try to avoid using `!important`, as it breaks  the natural cascading in the stylesheets. Always look for a way to use specificity before even considering `!important`, and only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap).
+  - When an important rule (`!important`) is used on a style declaration, this declaration overrides any other declarations. Try to avoid using `!important`, as it breaks the natural cascading in the stylesheets. Always look for a way to use specificity before even considering `!important`, and only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap).
 - [**Positioning**](https://developer.mozilla.org/en-US/docs/Web/CSS/position) - The position CSS property determines how an element will be positioned in a document. The `top`, `right`, `bottom`, and `left` properties would later determine the final location of said positioned element.
   - Initial value: `static`
   - Values that are frequently used: `relative`, `absolute`, `fixed`, `sticky`
-- [**Floats**](https://developer.mozilla.org/en-US/docs/Web/CSS/float) - The `float` CSS property determines where an element should be placed - along the left or right side of its container. This allows text and inline elements to wrap around it. Also note, the element would be removed from the normal *flow* of the web page, though still remaining a part of the flow (in contrast to `position: absolute`). For an element to be `float`, it's value must not be `none`.
+- [**Floats**](https://developer.mozilla.org/en-US/docs/Web/CSS/float) - The `float` CSS property determines where an element should be placed - along the left or right side of its container. This allows text and inline elements to wrap around it. Also note, the element would be removed from the normal _flow_ of the web page, though still remaining a part of the flow (in contrast to `position: absolute`). For an element to be `float`, it's value must not be `none`.
   - Initial value: `none`
   - Values that are frequently used: `left`, `right`, `inline-start`, `inline-end`.
   - Additional Notes: Usually, there would be cases that you may want to move an item below any floated elements. E.g, you may want some elements like your paragraphs to remain adjacent to floats, but force headings and footers to be on their own line. See [`clear` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/clear) for more examples
@@ -29,6 +28,6 @@ If you are a total beginner to CSS, Codecademy's [HTML & CSS course](https://www
 
 TODO
 
-###### References
+#### References
 
 - https://philipwalton.com/articles/side-effects-in-css/
diff --git a/.topics_WIP_PLEASE_IGNORE/design.md b/.wip/topics/design.md
similarity index 97%
rename from .topics_WIP_PLEASE_IGNORE/design.md
rename to .wip/topics/design.md
index cef9c97284..c6b6f6609b 100644
--- a/.topics_WIP_PLEASE_IGNORE/design.md
+++ b/.wip/topics/design.md
@@ -1,9 +1,9 @@
-Design Questions
-==
+# Design Questions
 
 ## Autocomplete Widget
 
 Talk me through a full stack implementation of an autocomplete widget. A user can type text into it, and get back results from a server.
+
 - How would you design a frontend to support the following features:
   - Fetch data from a backend API
   - Render results as a tree (items can have parents/children - it's not just a flat list)
diff --git a/.topics_WIP_PLEASE_IGNORE/dom.md b/.wip/topics/dom.md
similarity index 99%
rename from .topics_WIP_PLEASE_IGNORE/dom.md
rename to .wip/topics/dom.md
index e667193991..fd56ba4797 100644
--- a/.topics_WIP_PLEASE_IGNORE/dom.md
+++ b/.wip/topics/dom.md
@@ -1,5 +1,4 @@
-DOM
-==
+# DOM
 
 ## Glossary
 
diff --git a/.topics_WIP_PLEASE_IGNORE/html.md b/.wip/topics/html.md
similarity index 97%
rename from .topics_WIP_PLEASE_IGNORE/html.md
rename to .wip/topics/html.md
index 97034e163c..11a06e844b 100644
--- a/.topics_WIP_PLEASE_IGNORE/html.md
+++ b/.wip/topics/html.md
@@ -1,5 +1,4 @@
-HTML
-==
+# HTML
 
 HTML (Hypertext Markup Language) is the structure that all websites are built on. Anyone working on websites and webapps should have a basic understanding of HTML at the very least. A helpful analogy for understanding the importance of HTML is the house scenario. When building a new house, the process can be split into a few key areas; structure (HTML), aesthetics (CSS) and furniture (Content). The HTML is your basic page structure, without the structure, you cannot change how it looks using CSS, or what content is on the page.
 
@@ -9,7 +8,7 @@ HTML (Hypertext Markup Language) is the structure that all websites are built on
 
 ## Deprecated Tags
 
-There are a number of tags from past versions of HTML that have become deprecated over time. This means that while they are no longer considered valid elements, most browsers should still be able to read and render them. 
+There are a number of tags from past versions of HTML that have become deprecated over time. This means that while they are no longer considered valid elements, most browsers should still be able to read and render them.
 
 ## Script Loading
 
diff --git a/.topics_WIP_PLEASE_IGNORE/javascript.md b/.wip/topics/javascript.md
similarity index 96%
rename from .topics_WIP_PLEASE_IGNORE/javascript.md
rename to .wip/topics/javascript.md
index 6278f652b2..f8184203e6 100644
--- a/.topics_WIP_PLEASE_IGNORE/javascript.md
+++ b/.wip/topics/javascript.md
@@ -1,5 +1,4 @@
-JavaScript
-==
+# JavaScript
 
 WIP.
 
@@ -18,7 +17,7 @@ WIP.
 - **Promise** - "The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value." - [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
   - Promises can contain an immediate value.
 - **Prototype** - TBD
-- **This** - The `this` keyword does not refer to the function in which `this` is used or that function's scope. Javascript uses [4 rules](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch2.md#determining-this) to determine if `this` will reference an arbitrary object, *undefined* or the *global* object inside a particular function call.
+- **This** - The `this` keyword does not refer to the function in which `this` is used or that function's scope. Javascript uses [4 rules](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch2.md#determining-this) to determine if `this` will reference an arbitrary object, _undefined_ or the _global_ object inside a particular function call.
 
 ## Core Language
 
@@ -44,7 +43,7 @@ WIP.
 - Prototype chain
 - `this` keyword
   - https://rainsoft.io/gentle-explanation-of-this-in-javascript/
-  - https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
+  - https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3?gi=86e207b492c4
 - Classes
   - Methods
     - Use non-arrow functions for methods that will be called using the `object.method()` syntax because you need the value of `this` to point to the instance itself.
@@ -52,7 +51,7 @@ WIP.
 ### Async
 
 - Reference: [Async and Peformance](https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&%20performance/README.md#you-dont-know-js-async--performance)
-- `setTimeout`, `setInterval` and event loop
+- `setTimeout()`, `setInterval()` and event loop
   - [setImmediate() vs nextTick() vs setTimeout(fn,0)](http://voidcanvas.com/setimmediate-vs-nexttick-vs-settimeout/)
 - Event Loop
 - Debounce and Throttle
diff --git a/.topics_WIP_PLEASE_IGNORE/networking.md b/.wip/topics/networking.md
similarity index 82%
rename from .topics_WIP_PLEASE_IGNORE/networking.md
rename to .wip/topics/networking.md
index f013f4f4c5..b3bbb497e4 100644
--- a/.topics_WIP_PLEASE_IGNORE/networking.md
+++ b/.wip/topics/networking.md
@@ -1,5 +1,4 @@
-Networking
-==
+# Networking
 
 WIP.
 
diff --git a/.topics_WIP_PLEASE_IGNORE/performance.md b/.wip/topics/performance.md
similarity index 98%
rename from .topics_WIP_PLEASE_IGNORE/performance.md
rename to .wip/topics/performance.md
index 5e5fe53062..3672fad349 100644
--- a/.topics_WIP_PLEASE_IGNORE/performance.md
+++ b/.wip/topics/performance.md
@@ -1,5 +1,4 @@
-Performance
-==
+# Performance
 
 WIP.
 
@@ -38,7 +37,7 @@ WIP.
   - Use web workers for long running operations to move into a web worker thread.
   - Use `requestAnimationFrame`
 
-###### References
+#### References
 
 - https://bitsofco.de/understanding-the-critical-rendering-path/
 
diff --git a/.topics_WIP_PLEASE_IGNORE/security.md b/.wip/topics/security.md
similarity index 97%
rename from .topics_WIP_PLEASE_IGNORE/security.md
rename to .wip/topics/security.md
index 59ac38b261..f26b3f0024 100644
--- a/.topics_WIP_PLEASE_IGNORE/security.md
+++ b/.wip/topics/security.md
@@ -1,5 +1,4 @@
-Security
-==
+# Security
 
 ## Glossary
 
@@ -50,9 +49,9 @@ XSS vulnerabilities allow attackers to bypass essentially all CSRF preventions.
 - Require user interaction
   - Require a re-authentication, using a one-time token, or requiring users to complete a captcha.
 
-###### References
+#### 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
 
@@ -78,7 +77,7 @@ HTTPS is HTTP over SSL/TLS. Servers and clients still speak exactly the same HTT
 - TLS handshake computational and latency overhead.
 - Encryption and decryption requires more computation power and bandwidth.
 
-###### References
+#### References
 
 - https://blog.hartleybrody.com/https-certificates/
 - https://github.com/alex/what-happens-when#tls-handshake
@@ -97,10 +96,9 @@ http://shebang.brandonmintern.com/foolproof-html-escaping-in-javascript/
 
 ## Session hijacking
 
-- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies
 - https://www.nczonline.net/blog/2009/05/12/cookies-and-security/
 
-
 ## Framebusting
 
 https://seclab.stanford.edu/websec/framebusting/framebust.pdf
diff --git a/.topics_WIP_PLEASE_IGNORE/widgets.md b/.wip/topics/widgets.md
similarity index 98%
rename from .topics_WIP_PLEASE_IGNORE/widgets.md
rename to .wip/topics/widgets.md
index 6c456fc9dc..0d9961bbce 100644
--- a/.topics_WIP_PLEASE_IGNORE/widgets.md
+++ b/.wip/topics/widgets.md
@@ -1,5 +1,4 @@
-Widgets
-==
+# Widgets
 
 Here are some commonly seen widgets/components and the considerations we should take into account when designing them.
 
@@ -21,7 +20,7 @@ Also known as typeahead box.
 - Use windowing/virtual lists when the search results is too long.
 - Debounce user input and only search when user stops typing for some time (usually 300ms).
 
-###### References
+#### References
 
 - https://baymard.com/blog/autocomplete-design
 
@@ -46,7 +45,7 @@ Also known as typeahead box.
 
 - Modals can usually be dismissed by clicking on the backdrop. If the user interacts with the modal content by clicking on it, the backdrop might also receive the click event and be dismissed as a result.
 
-###### References
+#### References
 
 - https://css-tricks.com/dangers-stopping-event-propagation/
 
diff --git a/README.md b/README.md
index acb7270131..c4c14f5f30 100644
--- a/README.md
+++ b/README.md
@@ -1,54 +1,110 @@
-<h1 align="center">Front End Interview Handbook</h1>
+<div align="center">
+  <h1>Front End Interview Handbook</h1>
+  <p>By <a href="https://www.greatfrontend.com/?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook">GreatFrontEnd</a></p>
+</div>
 
 <div align="center">
   <a href="https://dribbble.com/shots/4263961-Front-End-Interview-Scroll">
-    <img src="https://cdn.rawgit.com/yangshun/front-end-interview-handbook/23d89c8/assets/scroll.svg" alt="Front End Interview Handbook" width="400"/>
+    <img src="assets/scroll.svg" alt="Front End Interview Handbook" width="400"/>
     </a>
-  <br>
+  <br />
+  <h3>
+    <a href="https://www.frontendinterviewhandbook.com">Read on the website</a>
+  </h3>
   <p>
-    <em>Credits: <a href="https://dribbble.com/shots/4263961-Front-End-Interview-Scroll">Illustration</a> by <a href="https://dribbble.com/yangheng">@yangheng</a>
-    </em>
+    Join/follow us on <a href="https://linkedin.com/company/greatfrontend" target="_blank">LinkedIn</a> | <a href="https://discord.com/invite/NDFx8f6P6B" target="_blank">Discord</a> | <a href="https://x.com/greatfrontend" target="_blank">𝕏 (Twitter)</a> | <a href="https://facebook.com/greatfrontend" target="_blank">Facebook</a>
   </p>
 </div>
 
+---
+
+<a href="https://www.frontendinterviewhandbook.com/introduction/" target="_blank">
+  <img src="assets/start-reading-button.jpg" alt="Start Reading Front End Interview Handbook" />
+</a>
+
+<p dir="auto"></p>
+
+<a href="https://www.greatfrontend.com/prepare/?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook" target="_blank">
+  <img src="assets/start-practicing-button.jpg" alt="Start Practicing Front End Questions on GreatFrontEnd" />
+</a>
+
 ## What is this?
 
-Unlike typical software engineer job interviews, front-end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain — HTML, CSS, JavaScript, just to name a few areas.
+Unlike typical software engineer job interviews, front end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain — HTML, CSS, JavaScript, just to name a few areas. This repository covers all you need to know for front end interviews:
 
-While there are some existing resources to help front end developers in preparing for interviews, they aren't as abundant as materials for a software engineer interview. Among the existing resources, probably the most helpful question bank would be [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions). Unfortunately, I couldn't find many complete and satisfactory answers to these questions online, hence here is my attempt at answering them. Being an open source repository, the project can live on with the support of the community as the state of web evolves.
+- [Various formats of Front end interviews](https://www.frontendinterviewhandbook.com/introduction/) including formats by different companies
+- [Front end system design interviews](https://www.frontendinterviewhandbook.com/front-end-system-design/)
+- [Front end trivia questions](https://www.frontendinterviewhandbook.com/trivia/) - answers to the h5bp Front-end Developer Interview Questions
+- [Front end questions](https://www.frontendinterviewhandbook.com/coding/javascript-utility-function/) - JavaScript, DOM, algorithms, and more
+- [Front end interview questions by companies](https://www.frontendinterviewhandbook.com/company-interview-questions/)
 
-## Looking for Generic Interview Preparation?
+## Where to get hands on practice?
 
-You might be interested in the [Tech Interview Handbook](https://github.com/yangshun/tech-interview-handbook) which has helpful content on general coding interviews such as algorithms, behavioral questions and an [interview cheatsheet](https://github.com/yangshun/tech-interview-handbook/blob/master/preparing/cheatsheet.md)!
+<div align="center">
+  <a href="https://www.greatfrontend.com?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook">
+    <img src="assets/mark-brand-light.png" alt="GreatFrontEnd" width="400"/>
+  </a>
+</div>
+
+After getting a good understanding about front end interview preparation, try out [GreatFrontEnd](https://www.greatfrontend.com?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook), a platform built by me! Not only are there 200+ practice questions, each with multiple solutions from Senior Front End Engineers, there are also automated test case suites to help you identify what's wrong with your code. Thus, check out the following resources:
+
+- [Study plans](https://www.greatfrontend.com/study-plans?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook) help you prepare for your upcoming technical interviews, whether it is in a week or 3 months later.
+- [Focus areas](https://www.greatfrontend.com/focus-areas?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook) allow you to focus on your weak areas and also further improve your strengths depending on your preferences.
+- [Preparation by stage](https://www.greatfrontend.com/prepare?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook) prepares you for each phase of your interview process, from quiz to coding interviews.
+- [Individual framework questions](https://www.greatfrontend.com/questions?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook) offer training based on specific frameworks that may be tested during your technical interviews.
 
-## Table of Contents
+---
+
+<div align="center">
+  <h3>Need to practice front end interview questions? <a href="https://www.greatfrontend.com?utm_source=github&utm_medium=referral&gnrs=frontendinterviewhandbook">GreatFrontEnd</a> is holding a limited time promotion for 20% off their lifetime plan of high quality practice questions and reference solutions written by ex-FAANG interviewers 🚀</h3>
+</div>
 
-1. [HTML Questions](/questions/html-questions.md)
-1. [CSS Questions](/questions/css-questions.md)
-1. [JavaScript Questions](/questions/javascript-questions.md)
+---
+
+## Looking for Generic Interview Preparation?
+
+You might be interested in the [Tech Interview Handbook](https://www.techinterviewhandbook.org) which has helpful content on general coding interviews such as algorithms, behavioral questions and an [interview cheatsheet](https://www.techinterviewhandbook.org/coding-interview-cheatsheet/)!
+
+<div align="center">
+  <a href="https://www.techinterviewhandbook.org">
+    <img src="assets/coding.svg" alt="Web Technologies illustration" width="400"/>
+  </a>
+  <br/>
+  <p>
+    <em>Credits: Illustration by <a href="https://undraw.co/">unDraw</a></em>
+  </p>
+  <h3>
+    <a href="https://www.techinterviewhandbook.org/">Read on the website</a>
+  </h3>
+</div>
 
 ## Translations
 
-* [English](/README.md)
-* [Simplified Chinese (简体中文)](/Translations/Chinese/README.md)
-* [Tagalog](/Translations/Tagalog/README.md)
-* [Japanese (日本語)](/Translations/Japanese/README.md)
-* [Korean](/Translations/Korean/README.md)
+- [English](https://www.frontendinterviewhandbook.com)
+- [Chinese (Simplified) (简体中文)](https://www.frontendinterviewhandbook.com/zh/javascript-questions/)
+- [Japanese (日本語)](https://www.frontendinterviewhandbook.com/jp/javascript-questions/)
+- [Korean (한국어)](https://www.frontendinterviewhandbook.com/kr/javascript-questions/)
+- [Polish (Polski)](https://www.frontendinterviewhandbook.com/pl/javascript-questions/)
+- [Portuguese (Português)](https://www.frontendinterviewhandbook.com/pr/javascript-questions/)
+- [Russian (Русский)](https://www.frontendinterviewhandbook.com/ru/javascript-questions/)
+- [Tagalog](https://www.frontendinterviewhandbook.com/tl/javascript-questions/)
 
 ## Related
 
-If you are interested in how data structures are implemented, check out [Lago](https://github.com/yangshun/lago), a Data Structures and Algorithms library for JavaScript. It is pretty much still WIP but I intend to make it into a library that is able to be used in production and also a reference resource for revising Data Structures and Algorithms.
+If you are interested in how data structures are implemented, check out [Lago](https://github.com/yangshun/lago), a Data Structures and Algorithms library for JavaScript. It's meant for reference and studying purposes, not for production use.
 
 ## Contributing
 
-### Code of Conduct
-
-We have adopted the same Code of Conduct as Facebook that we expect project participants to adhere to. Please read [the full text](https://code.facebook.com/codeofconduct) so that you can understand what actions will and will not be tolerated.
-
 ### Contributing Guide
 
 Read our [contributing guide](/CONTRIBUTING.md) to learn about how you can contribute, how to propose improvements or if you are interested in translating the content.
 
+### Supporting
+
+Many hours of hard work have gone into this project. Your support will be very appreciated!
+
+<a href="https://www.buymeacoffee.com/yangshun" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
+
 ## License
 
 All projects and packages in this repository are [MIT licensed](/LICENSE).
diff --git a/Translations/Chinese/README.md b/Translations/Chinese/README.md
deleted file mode 100644
index 1648f9b123..0000000000
--- a/Translations/Chinese/README.md
+++ /dev/null
@@ -1,57 +0,0 @@
-<h1 align="center">前端面试手册</h1>
-
-<div align="center">
-  <a href="https://dribbble.com/shots/4263961-Front-End-Interview-Scroll">
-    <img src="https://cdn.rawgit.com/yangshun/front-end-interview-handbook/23d89c8/assets/scroll.svg" alt="Front End Interview Handbook" width="400"/>
-    </a>
-  <br>
-  <p>
-    <em>鸣谢： <a href="https://dribbble.com/shots/4263961-Front-End-Interview-Scroll">插图</a>出自<a href="https://dribbble.com/yangheng">@yangheng</a>
-    </em>
-  </p>
-</div>
-
-## 这是什么？
-
-与典型的软件工程师面试不同，前端面试对算法的重视比较低。面试会更多考查错综复杂的前端知识，像 HTML、CSS、JavaScript 等等。
-
-虽然现在有一些资料，可以帮助前端开发者准备面试，但是远不如软件工程师那么丰富。目前为止，最有用的前端面试资料是[前端开发者面试问题集](https://github.com/h5bp/Front-end-Developer-Interview-Questions)。但是，有相当一部分问题，我在网上找不到完整满意的答案。因此，我在这里试着回答这些问题。这是一个开源项目，希望随着社区广泛参与，得到更多的支持。
-
-## 在找常规的面试材料?
-
-那你可能对[技术面试手册](https://github.com/yangshun/tech-interview-handbook)感兴趣，它对常规面试很有帮助，包含算法、性格行为等一系列问题。另外，里面还有一份[面试锦囊](https://github.com/yangshun/tech-interview-handbook/blob/master/preparing/cheatsheet.md)！
-
-## 目录
-
-1. [HTML 问题](questions/html-questions.md)
-1. [CSS 问题](questions/css-questions.md)
-1. [JavaScript 问题](questions/javascript-questions.md)
-
-## 翻译
-
-* [English](/README.md)
-* [Simplified Chinese (简体中文)](/Translations/Chinese/README.md)
-* [Tagalog](/Translations/Tagalog/README.md)
-* [Japanese (日本語)](/Translations/Japanese/README.md)
-
-**进行中**
-
-* [Korean (한국어)](/Translations/Korean/README.md)
-
-## 相关
-
-如果你对数据结构如何实现感兴趣的话，可以看看[Lago](https://github.com/yangshun/lago)，这是一个数据结构和算法由 JavaScript 实现的函数库。这个项目仍然在开发中，我计划把它打造成可用于实际生产的函数库，同时，也可以作为了解数据结构和算法的参考资料。
-
-## 参与共建
-
-### 行为准则
-
-我们采用 Facebook 的行为准则，希望项目参与者能够共同遵守。请阅读[全文](https://code.facebook.com/codeofconduct)，以便了解哪些行为是允许的，哪些是不可容忍的。
-
-### 贡献指南
-
-请阅读我们的[贡献指南](../../CONTRIBUTING.md)，了解可以如何贡献，如何提出改进建议，或者你对翻译感兴趣。
-
-## 许可协议
-
-本项目全部内容遵守 [MIT 许可协议](../../LICENSE).
diff --git a/Translations/Japanese/README.md b/Translations/Japanese/README.md
deleted file mode 100644
index 6a9baffc5e..0000000000
--- a/Translations/Japanese/README.md
+++ /dev/null
@@ -1,57 +0,0 @@
-<h1 align="center">フロントエンド面接対策ハンドブック</h1>
-
-<div align="center">
-  <a href="https://dribbble.com/shots/4263961-Front-End-Interview-Scroll">
-    <img src="https://cdn.rawgit.com/yangshun/front-end-interview-handbook/23d89c8/assets/scroll.svg" alt="Front End Interview Handbook" width="400"/>
-    </a>
-  <br>
-  <p>
-    <em>クレジット: <a href="https://dribbble.com/shots/4263961-Front-End-Interview-Scroll">イラスト</a> by <a href="https://dribbble.com/yangheng">@yangheng</a>
-    </em>
-  </p>
-</div>
-
-## これは何のリポジトリですか？
-
-フロントエンドの求人面接では典型的なソフトウェアエンジニアの面接とは異なりアルゴリズムの重要性が低く、特定の領域（HTML、CSS、JavaScript など）の入り組んだ知識や専門的な技術についてより多くの質問がなされます。
-
-フロントエンドエンジニアの面接の準備に役立つリソースは既にいくつかありますが、ソフトウェアエンジニアの面接のリソースほど豊富ではありません。既存のリソースの中で最も有益な質問集はおそらく [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) ですが、残念ながら私はこれらの問題の多くに対して完全かつ満足のいく回答をネット上に見つけることができませんでした。そう、このプロジェクトはそれらの質問に回答する試みなのです。また、このプロジェクトはオープンソースなので、Web の状況が進歩するのにあわせてコミュニティのサポートを受けながら生き続けることができます。
-
-## より一般的なエンジニア面接の準備がしたいですか？
-
-その場合には [Tech Interview Handbook](https://github.com/yangshun/tech-interview-handbook) が良いかもしれません。こちらのリポジトリはより一般的なエンジニア面接に役立つ内容になっています。含まれるものには、アルゴリズム関連の問題や、行動面接（behavioral interview）対策、[面接対策チートシート](https://github.com/yangshun/tech-interview-handbook/blob/master/preparing/cheatsheet.md)などがあります！
-
-## 目次
-
-1. [HTML に関する質問](questions/html-questions.md)
-1. [CSS に関する質問](questions/css-questions.md)
-1. [JavaScript に関する質問](questions/javascript-questions.md)
-
-## 各国語版
-
-* [English](/README.md)
-* [Simplified Chinese (简体中文)](/Translations/Chinese/README.md)
-* [Tagalog](/Translations/Tagalog/README.md)
-* [Japanese (日本語)](/Translations/Japanese/README.md)
-
-**製作中**
-
-* [Korean (한국어)](/Translations/Korean/README.md)
-
-## 関連情報
-
-データ構造の実装方法に興味がある場合は、私が制作している JavaScript のデータ構造とアルゴリズムライブラリである [Lago](https://github.com/yangshun/lago) をチェックしてみてください。Lago はまだかなり制作途中のものですが、プロダクトに使用できるライブラリにし、データ構造とアルゴリズムの復習をする際の参照リソースにもできるようにするつもりです。
-
-## コントリビューション
-
-### 行動規範
-
-私たちはプロジェクト参加者が遵守すべき行動規範として、Facebook と同じものを採択しました。プロジェクトに参加する場合、[こちらの全文](https://code.facebook.com/codeofconduct)を読んでどのような行為が容認されるかをご確認ください。
-
-### コントリビューションガイド
-
-コントリビューションの方法、改善の提案方法、コンテンツの翻訳方法に興味がある方は、[コントリビューションガイド](/CONTRIBUTING.md)を参照してください。
-
-## ライセンス
-
-このリポジトリ内のプロジェクトとパッケージはすべて [MIT ライセンス](/LICENSE)です。
diff --git a/Translations/Korean/README.md b/Translations/Korean/README.md
deleted file mode 100644
index 961b2bcb8d..0000000000
--- a/Translations/Korean/README.md
+++ /dev/null
@@ -1,58 +0,0 @@
-<h1 align="center">프론트엔드 인터뷰 핸드북</h1>
-
-<div align="center">
-  <a href="https://dribbble.com/shots/4263961-Front-End-Interview-Scroll">
-    <img src="https://cdn.rawgit.com/yangshun/front-end-interview-handbook/23d89c8/assets/scroll.svg" alt="Front End Interview Handbook" width="400"/>
-    </a>
-  <br>
-  <p>
-    <em>Credits: <a href="https://dribbble.com/shots/4263961-Front-End-Interview-Scroll">Illustration</a> by <a href="https://dribbble.com/yangheng">@yangheng</a>
-    </em>
-  </p>
-  <p>
-    <em>번역: <a href="https://github.com/ysm0622">@양성민</a>, <a href="https://github.com/devjang">@장현석</a>, <a href="https://github.com/tuhbm">@김태균</a>, <a href="https://github.com/octave08">@황규정</a>
-    </em>
-  </p>
-</div>
-
-## 서론
-
-일반적인 소프트웨어 엔지니어 면접과 달리 프론트엔드 취업 면접은 알고리즘에 대한 강조가 적으며 프론트엔드 도메인에 대한 복잡한 지식과 전문 지식 (HTML, CSS, JavaScript)에 대해 더 많은 질문을 받습니다.
-
-프론트엔드 개발자가 인터뷰를 준비하는 데 도움이 되는 기존 리소스가 있지만 소프트웨어 엔지니어 인터뷰 자료만큼 풍부하지는 않습니다. 기존 리소스 중에서 가장 유용한 질문은 [프론트엔드 개발자 인터뷰 질문](https://github.com/h5bp/Front-end-Developer-Interview-Questions) 일 것입니다. 안타깝게도, 저는 온라인에서 이 질문에 대한 완전하고 만족스러운 대답을 찾을 수 없었습니다. 그래서 여기에 이 질문에 대답하고자 합니다. 오픈 소스 저장소이기 때문에 이 프로젝트는 커뮤니티의 지원을 받아 커질 수 있을 것입니다.
-
-## 일반적인 면접 준비
-
-[면접 치트시트](https://github.com/yangshun/tech-interview-handbook/blob/master/preparing/cheatsheet.md)나 알고리즘과 같은 일반적인 코딩 면접에 대한 내용은 [기술 면접 핸드북](https://github.com/yangshun/tech-interview-handbook)이 도움이 될 것입니다.
-
-## 목차
-
-1. [HTML 질문](questions/html-questions.md)
-1. [CSS 질문](questions/css-questions.md)
-1. [JavaScript 질문](questions/javascript-questions.md)
-
-## 번역
-
-* [English](/README.md)
-* [Simplified Chinese (简体中文)](/Translations/Chinese/README.md)
-* [Tagalog](/Translations/Tagalog/README.md)
-* [Japanese (日本語)](/Translations/Japanese/README.md)
-* [Korean (한국어)](/Translations/Korean/README.md)
-
-## 관련 정보
-
-데이터 구조의 구현 방법에 관심이 있다면, 제가 제작하는 JavaScript 데이터 구조 및 알고리즘 라이브러리 인 [Lago](https://github.com/yangshun/lago) 를 체크해주세요. Lago 은 아직 제작 중 이지만, 프로덕션에서 사용할 수있는 라이브러리와 데이터 구조 및 알고리즘을 수정하기위한 참조 리소스로 만들 계획입니다.
-
-## 기여
-
-### 행동강령
-
-우리는 프로젝트 참가자가 준수해야 할 행동 규범으로 Facebook 과 같은 것을 채택했습니다. 프로젝트에 참여하는 경우 여기에 [전문](https://code.facebook.com/codeofconduct) 을 읽고 어떤 행위가 허용되는지를 확인하시기 바랍니다.
-
-### 기여가이드
-
-기여 방법 개선 제안 방법 및 콘텐츠 번역 방법에 관심이있는 분은 [기여가이드](/CONTRIBUTING.md)를 참조하십시오.
-
-## 라이센스
-
-이 저장소에서 프로젝트 및 패키지는 모든 [MIT licensed](/LICENSE) 입니다.
diff --git a/Translations/Korean/questions/css-questions.md b/Translations/Korean/questions/css-questions.md
deleted file mode 100644
index 8c1e281c97..0000000000
--- a/Translations/Korean/questions/css-questions.md
+++ /dev/null
@@ -1,460 +0,0 @@
-# CSS 질문
-
-* [CSS 선택자 특이성은 무엇이며 어떻게 작동합니까?](#css-선택자-특이성은-무엇이며-어떻게-작동합니까)
-* ["Resetting"과 "Normalizing" CSS 의 차이점은 무엇입니까? 당신은 무엇을 선택할 것이며, 그 이유는 무엇입니까?](#resetting과-normalizing-css-의-차이점은-무엇입니까-당신은-무엇을-선택할-것이며-그-이유는-무엇입니까)
-* [`float`이 어떻게 작동하는지 설명하세요.](#float이-어떻게-작동하는지-설명하세요)
-* [`z-index`와 쌓임 맥락(stacking context)이 어떻게 형성되는지 설명하세요.](#z-index와-쌓임-맥락stacking-context이-어떻게-형성되는지-설명하세요)
-* [블록 서식 문맥(BFC)과 작동 방식을 설명하세요.](#블록-서식-문맥bfc과-작동-방식을-설명하세요)
-* [clear 하는 방법에는 어떤 것이 있으며, 각각 어떤상황에 적합합니까?](#clear-하는-방법에는-어떤-것이-있으며-각각-어떤상황에-적합합니까)
-* [CSS 스프라이트는 무엇입니까? 그리고 당신이 페이지 나 사이트에 구현하는 방법도 설명해주세요.](#css-스프라이트는-무엇입니까-그리고-당신이-페이지-나-사이트에-구현하는-방법도-설명해주세요)
-* [브라우저 별 스타일링 문제를 해결하는 방법에 대해 어떻게 생각하십니까?](#브라우저-별-스타일링-문제를-해결하는-방법에-대해-어떻게-생각하십니까)
-* [기능이 제한된 브라우저의 페이지는 어떻게 처리합니까? 어떤 기술/프로세스를 사용하십니까?](#기능이-제한된-브라우저의-페이지는-어떻게-처리합니까-어떤-기술프로세스를-사용하십니까)
-* [콘텐츠를 시각적으로 숨기고(화면 판독기에서만 사용할 수 있게 만드는)다양한 방법은 무엇입니까?](#콘텐츠를-시각적으로-숨기고화면-판독기에서만-사용할-수-있게-만드는다양한-방법은-무엇입니까)
-* [혹시 그리드 시스템을 사용하나요? 만약 그렇다면, 당신은 어떤것을 선호합니까?](#혹시-그리드-시스템을-사용하나요-만약-그렇다면-당신은-어떤것을-선호합니까)
-* [미디어 쿼리 또는 모바일 관련 layouts/CSS 를 사용하거나 구현해 보았습니까?](#미디어-쿼리-또는-모바일-관련-layoutscss-를-사용하거나-구현해-보았습니까)
-* [SVG-스타일링에-익숙하십니까?](#svg-스타일링에-익숙하십니까)
-* [screen 이 아닌 @media 속성의 예를 들려 줄 수 있습니까?](#screen-이-아닌-media-속성의-예를-들려-줄-수-있습니까)
-* [효율적인 CSS 를 작성하는데 있어 "어려움"은 무엇입니까?](#효율적인-css-를-작성하는데-있어-어려움은-무엇입니까)
-* [CSS 전처리기를 사용하면 어떤 장단점이 있습니까?](#css-전처리기를-사용하면-어떤-장단점이-있습니까)
-* [사용했던 CSS 전처리기에 대해 좋아하는 것과 싫어하는 것을 설명하십시오.](#사용했던-css-전처리기에-대해-좋아하는-것과-싫어하는-것을-설명하십시오)
-* [비표준 글꼴을 사용하는 웹 디자인 디자인을 구현하는 방법은 무엇입니까?](#비표준-글꼴을-사용하는-웹-디자인-디자인을-구현하는-방법은-무엇입니까)
-* [CSS 셀렉터에 일치하는 요소가 어떤 것인지 브라우저가 어떻게 결정되는지를 설명하시오.](#css-셀렉터에-일치하는-요소가-어떤-것인지-브라우저가-어떻게-결정되는지를-설명하시오)
-* [Pseudo-elements 에 대해 설명하고 그 요소가 무엇을 위해 사용되는지 설명하시오.](#pseudo-elements-에-대해-설명하고-그-요소가-무엇을-위해-사용되는지-설명하시오)
-* [박스 모델에 대한 이해와 CSS 에서 브라우저에 다른 박스 모델로 레이아웃을 렌더링하는 방법을 설명하십시오.](#박스-모델에-대한-이해와-css-에서-브라우저에-다른-박스-모델로-레이아웃을-렌더링하는-방법을-설명하십시오)
-* [`* { box-sizing: border-box; }` 는 무엇을 하나요? 장점은 무엇입니까?](#--box-sizing-border-box--는-무엇을-하나요-장점은-무엇입니까)
-* [CSS 의 `display` 속성은 무엇이며 사용법에 대한 몇 가지 예를 들 수 있습니까?](#css-의-display-속성은-무엇이며-사용법에-대한-몇-가지-예를-들-수-있습니까)
-* [`inline` 과 `inline-block` 의 차이점은 무엇입니까?](#inline-과-inline-block-의-차이점은-무엇입니까)
-* [`relative`, `fixed`, `absolute` 와 `static` 요소의 차이점은 무엇입니까?](#relative-fixed-absolute-와-static-요소의-차이점은-무엇입니까)
-* [로컬 또는 프로덕션 환경에서 사용했던 기존 CSS 프레임워크는 무엇입니까? 어떻게 그들을 바꾸거나 개선할 수 있을까요?](#로컬-또는-프로덕션-환경에서-사용했던-기존-css-프레임워크는-무엇입니까-어떻게-그들을-바꾸거나-개선할-수-있을까요)
-* [새로운 CSS Flexbox 또는 그리드 스펙을 사용해본 적이 있나요?](#새로운-css-flexbox-또는-그리드-스펙을-사용해본-적이-있나요)
-* [반응형 웹사이트를 코딩하는 것과 모바일 우선 전략을 사용하는 것 사이의 차이점을 설명하시오.](#반응형-웹사이트를-코딩하는-것과-모바일-우선-전략을-사용하는-것-사이의-차이점을-설명하시오)
-* [반응형 디자인은 적응형 디자인과 어떻게 다른가요?](#반응형-디자인은-적응형-디자인과-어떻게-다른가요)
-* [레티나 그래픽으로 작업 해본 적이 있습니까? 그렇다면, 언제 그리고 어떤 기술을 사용하였습니까?](#레티나-그래픽으로-작업-해본-적이-있습니까-그렇다면-언제-그리고-어떤-기술을-사용하였습니까)
-* [`absolute` 포지셔닝 대신 `translate()`를 사용하는 이유가 무엇입니까? 또는 그 반대의 경우에 대해서는 어떻게 생각하십니까?, 그 이유는 무엇입니까?](#absolute-포지셔닝-대신-translate를-사용하는-이유가-무엇입니까-또는-그-반대의-경우에-대해서는-어떻게-생각하십니까-그-이유는-무엇입니까)
-
-## CSS 질문
-
-[프론트엔드 면접 질문 - CSS 질문](https://github.com/h5bp/Front-end-Developer-Interview-Questions#css-questions)에 대한 해설입니다.
-Pull Request 를 통한 제안 및 수정 요청을 환영합니다.
-
-### CSS 선택자 특이성은 무엇이며 어떻게 작동합니까?
-
-브라우저는 CSS 규칙의 특수성에 따라 요소에 표시할 스타일을 결정합니다. 브라우저는 이미 특정 요소와 일치하는 규칙을 결정했다고 가정합니다. 일치하는 규칙들 가운데, 다음에 기초하여 각 규칙에 대해 특수성, 네개의 쉼표로 구분된 값,`a, b, c, d`가 계산됩니다.
-
-1.  `a`는 인라인 스타일이 사용되고 있는지 여부입니다. 속성 선언이 요소에서 인라인 스타일이면 'a'는 1 이고, 그렇지 않으면 0 입니다.
-2.  `b`는 ID 셀렉터의 수입니다.
-3.  `c`는 클래스, 속성 및 가상 클래스 선택자의 수입니다.
-4.  `d`는 태그 및 유사 요소 선택자의 수입니다.
-
-결과적인 특정성은 점수가 아니라, 컬럼마다 비교할 수 있는 가치들의 행렬입니다. 선택자를 비교하여 가장 높은 특이성을 갖는 항목을 결정할 때 왼쪽에서 오른쪽으로 보고 각 열의 가장 높은 값을 비교하세요. 따라서 `b`열의 값은 `c`와 `d`열에 있는 값을 무시합니다. 따라서 `0,1,0,0`의 특이성은 `0,0,10,10`중 하나보다 큽니다.
-
-동등한 특이성의 경우: 최신 규칙은 중요한 규칙입니다. 스타일 시트에 동일한 규칙을 두 번 작성한 경우(내부나 외부에 관계 없이) 스타일 시트의 하위 규칙이 스타일 될 요소에 더 가까우므로 더 구체적으로 적용됩니다.
-
-필자는 필요하다면 쉽게 재정의할 수 있도록 낮은 특정성 규칙들을 작성할 것입니다. CSS UI 컴포넌트 라이브러리 코드를 작성할 때 특이성을 높이거나 `!important`를 사용하기 위해 라이브러리 사용자가 지나치게 복잡한 CSS 규칙을 사용하지 않고도 이를 무시할 수 있도록 특이성이 낮은 것이 중요합니다.
-
-###### 참고자료
-
-* <https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/>
-* <https://www.sitepoint.com/web-foundations/specificity/>
-
-### "Resetting"과 "Normalizing" CSS 의 차이점은 무엇입니까? 당신은 무엇을 선택할 것이며, 그 이유는 무엇입니까?
-
-* **Resetting** - Resetting 은 요소의 모든 기본 브라우저 스타일을 제거하기 위한 것입니다. 예 : `margin`, `padding`,`font-size`는 같은 값으로 재설정됩니다. 일반적인 타이포그래피 요소에 대한 스타일을 재 선언해야합니다.
-
-* **Normalizing** - Normalizing 는 모든 것을 "정리"하는 것이 아니라 유용한 기본 스타일을 보존합니다. 또한 일반적인 브라우저 종속성에 대한 버그를 수정합니다.
-
-필자는 나만의 스타일링을 많이 해야 하고 보존할 기본 스타일링이 필요하지 않도록 매우 맞춤화되었거나 자유로운 사이트 디자인을 가지고 있을 때 리셋을 선택합니다.
-
-###### 참고자료
-
-* <https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css>
-
-### `float`이 어떻게 작동하는지 설명하세요.
-
-Float 은 CSS 위치 지정 속성입니다. Float 된 요소는 페이지의 흐름의 일부로 남아 있으며 페이지의 흐름에서 제거되는 'position : absolute'요소와 달리 다른 요소 (예 : 플로팅 요소 주위로 텍스트가 흐르게 됨)의 위치 지정에 영향을 줍니다.
-
-CSS `clear` 속성은`left`/`right`/`both` float 엘리먼트 아래에 위치하도록 사용될 수 있습니다.
-
-부모 요소에 float 된 요소만 있으면 그 높이는 무효가 됩니다. 컨테이너의 플로팅된 요소 다음에 있지만 컨테이너가 닫히기 전에 float 를 clear 하면 해결할 수 있습니다.
-
-`.clearfix` 핵은 영리한 CSS 의사 선택자 (`: after`)를 사용하여 실수를 제거합니다. 상위 클래스에 overflow 를 설정하는 대신 추가 클래스 `clearfix`를 적용합니다. 그런 다음이 CSS 를 적용하십시오:
-
-```css
-.clearfix:after {
-  content: ' ';
-  visibility: hidden;
-  display: block;
-  height: 0;
-  clear: both;
-}
-```
-
-양자택일로, 부모 요소에 `overflow : auto` 또는 `overflow : hidden` 속성을 주면 자식 요소 내부에 새로운 블록 포맷 컨텍스트을 설정하고 자식을 포함하도록 확장합니다.
-
-###### 참고자료
-
-* <https://css-tricks.com/all-about-floats/>
-
-### `z-index`와 쌓임 맥락(stacking context)이 어떻게 형성되는지 설명하세요.
-
-CSS 의 `z-index`속성은 요소의 겹치는 요소의 순서를 제어합니다. `z-index`는 `static`이 아닌 `position` 값을 갖는 요소에만 영향을 줍니다.
-
-`z-index` 값이 없으면 DOM에 나타나는 순서대로 요소가 쌓이게 됩니다 (동일한 레이어에서 가장 낮은 레이어의 맨 위에 나타납니다). 정적이지 않은(non-static) 위치 지정 요소 (및 해당 하위 요소)는 HTML 레이어 구조와 상관없이 기본 정적 위치 지정을 사용하여 항상 요소 위에 나타납니다.
-
-쌓임 맥락(stacking context)은 레이어 집합을 포함하는 요소입니다. 쌓임 맥락(stacking context) 지역 내에서 자식의 `z-index` 값은 문서 루트가 아닌 해당 요소를 기준으로 설정됩니다. 해당 컨텍스트 외부의 레이어 — 즉 로컬 쌓임 맥락의 형제 요소 — 그 사이의 레이어에 어울릴 수 없습니다. 요소 B 가 요소 A 의 상단에 위치하는 경우, 요소 A 의 하위 요소 C 는 요소 C 가 요소 B 보다 `z-index`가 더 높은 경우에도 요소 B 보다 높을 수 없습니다.
-
-각각의 쌓임 맥락은 자체적으로 포함되어 있습니다 - 요소의 내용이 쌓인 후에는 전체 요소를 쌓임 맥락의 쌓인 순서로 고려합니다. 소수의 CSS 속성이 `opacity`가 1 보다 작고 `filter`가 `none`이 아니며 `transform`이 `none`이 아닌 새롭게 쌓임 맥락(stacking context)을 트리거합니다.
-
-###### 참고 자료
-
-* <https://css-tricks.com/almanac/properties/z/z-index/>
-* <https://philipwalton.com/articles/what-no-one-told-you-about-z-index/>
-* <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context>
-
-### 블록 서식 문맥(BFC)과 작동 방식을 설명하세요.
-
-BFC(블록 서식 문맥)는 블록 박스가 배치된 웹 페이지의 시각적 CSS 렌더링의 일부입니다. Floats, absolutely로 배치된 요소,`inline-blocks`, `table-cells`, `table-caption` 그리고 `visible`(그 값이 viewport 에 전파되었을 때는 제외) 이외의 `overflow`가 있는 요소들이 새로운 블록 포맷 컨텍스트를 만듭니다.
-
-BFC는 다음 조건 중 하나 이상을 충족시키는 HTML 박스입니다:
-
-* `float`의 값은 `none`이 아닙니다.
-* `position`의 값은 `static`도 아니고 `relative`도 아닙니다.
-* `display`의 값은 `table-cell`, `table-caption`, `inline-block`, `flex` 또는 `inline-flex`입니다.
-* `overflow`의 값은 `visible`이 아닙니다.
-
-BFC 에서 각 박스의 왼쪽 바깥 가장자리는 포함하는 블록의 왼쪽 가장자리에 닿습니다 (오른쪽에서 왼쪽으로 포맷팅, 오른쪽 가장자리에서 터치).
-
-BFC 상쇄(collapse)시 인접한 블록 레벨 박스 사이의 Vertical 마진. [마진 collapsing](https://www.sitepoint.com/web-foundations/collapsing-margins/)에 대해 자세히 읽어보세요.
-
-###### 참고 자료
-
-* <https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context>
-* <https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/>
-
-### clear 하는 방법에는 어떤 것이 있으며, 각각 어떤상황에 적합합니까?
-
-* 비어있는 `div` 방법 - `<div style="clear:both;"></div>`
-* Clearfix 방법 - 이와 같은 `.clearfix` 클래스를 참조하세요.
-* `overflow: auto` 또는 `overflow: hidden` 방법 - 부모는 새로운 블록 서식 지정 컨텍스트를 설정하고, 확장 된 자식을 포함하도록합니다.
-
-대규모의 프로젝트에서는 유용하게 `.clearfix` 클래스를 만들어 필요한 곳에서 사용합니다. 자식이 부모보다 크기가 경우 `overflow: hidden`은 자식의 모두 보여줄 수 없습니다.
-
-### CSS 스프라이트는 무엇입니까? 그리고 당신이 페이지 나 사이트에 구현하는 방법도 설명해주세요.
-
-CSS 스프라이트는 여러 이미지를 하나의 큰 이미지로 결합합니다. 일반적으로 아이콘에 사용되는 기술(Gmail 에서 사용)입니다. 구현방법:
-
-1.  스프라이트 생성기를 사용하여 여러 이미지를 하나로 묶어 적절한 CSS 를 생성합니다.
-2.  각 이미지는 `background-image`,`background-position` 및`background-size` 속성이 정의 된 해당 CSS 클래스를 갖습니다.
-3.  해당 이미지를 사용하려면 요소에 해당 클래스를 추가하십시오.
-
-**장점:**
-
-* 여러 이미지에 대한 HTTP 요청 수 줄이기(스프라이트 시트 당 하나의 단일 요청 만 필요합니다.) 그러나 HTTP2 를 사용하면 여러 이미지를로드하는 것이 더 이상 중요하지 않습니다.
-* `: hover`의 상태에서만 나타나는 이미지가 필요할 때 다운로드되지 않는 이미지를 미리 다운로드하여 깜박임이 보이지 않습니다.
-
-###### 참고 자료
-
-* <https://css-tricks.com/css-sprites/>
-
-### 브라우저 별 스타일링 문제를 해결하는 방법에 대해 어떻게 생각하십니까?
-
-* 문제 및 문제를 일으키는 브라우저를 식별한 후에는 해당 브라우저가 사용 중일 때만 로드되는 별도의 스타일 시트를 사용하십시오. 하지만 이 기술을 사용하려면 서버 측 렌더링이 필요합니다.
-* 이미 이러한 스타일링 문제를 처리하고 있는 Bootstrap 과 같은 라이브러리를 사용하십시오.
-* `autoprefixer`를 사용하여 벤더 프리픽스를 코드에 자동으로 추가하십시오.
-* Reset CSS 또는 Normalize.css 를 사용합니다.
-
-### 기능이 제한된 브라우저의 페이지는 어떻게 처리합니까? 어떤 기술/프로세스를 사용하십니까?
-
-* 우아한 퇴화 - 최신 브라우저를 위한 응용 프로그램을 구축하는 동시에 그것이 구형 브라우저에서도 계속 작동하도록 하는 구축방법.
-* 점진적 향상 - 기본 수준의 사용자 환경에 대한 응용 프로그램을 구축하지만 브라우저가 이를 지원할 경우 기능을 강화하는 방법이 있습니다.
-* [caniuse.com](https://caniuse.com/)을 사용하여 기능 지원을 확인하십시오.
-* 자동 공급 프리픽스인 Autoprefixer 삽입.
-* [Modernizr](https://modernizr.com/)를 사용하여 미래 간파.
-
-### 콘텐츠를 시각적으로 숨기고(화면 판독기에서만 사용할 수 있게 만드는)다양한 방법은 무엇입니까?
-
-이러한 기술은 접근성 (a11y)에 관련이 있습니다.
-
-* `visibility: hidden`. 그러나 요소는 아직 페이지의 흐름에 여전히 공간을 차지하고 있습니다.
-* `width: 0; height: 0`. 요소가 화면의 어떤 공간도 차지하지 않도록하십시오. 결과적으로 보이지 않습니다.
-* `position: absolute; left: -99999px`. 화면 외부에 배치합니다.
-* `text-indent: -9999px`. 이것은 `block`인 엘리먼트 내의 텍스트에서만 작동합니다.
-* 메타 데이터. 예를 들어, Schema.org, RDF 및 JSON-LD 를 사용합니다.
-* WAI-ARIA. 웹 페이지의 액세스 가능성을 높이는 방법을 지정하는 W3C 기술 사양입니다.
-
-WAI-ARIA 가 이상적인 해결책이라 하더라도 저는 `absolute` 접근법을 택할 것입니다. 대부분의 요소에서 작동하며 간단한 기술입니다.
-
-###### 참고자료
-
-* <https://www.w3.org/TR/wai-aria-1.1/>
-* <https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA>
-* <http://a11yproject.com/>
-
-### 혹시 그리드 시스템을 사용하나요? 만약 그렇다면, 당신은 어떤것을 선호합니까?
-
-나는 `float` 기반 그리드 시스템을 좋아한다. 왜냐하면 여전히 기존의 다른 시스템들(flex, grid) 중에서도 가장 많은 브라우저를 지원하기 때문입니다. 이것은 부트 스트랩에서 수년 동안 사용되었으며, 효과가 있다는 것이 입증되었습니다.
-
-### 미디어 쿼리 또는 모바일 관련 layouts/CSS 를 사용하거나 구현해 보았습니까?
-
-네. 한가지 예를 들면 여러 줄 형식의 네비게이션을 중간시점이 지나면 텝의 형태로 변환하였습니다.
-
-### SVG 스타일링에 익숙하십니까?
-
-슬프게도 아니요...
-
-### screen 이 아닌 @media 속성의 예를 들려 줄 수 있습니까?
-
-예, @ media 속성을 screen 포함하여 4 가지 종류가 있습니다 :
-
-* all - 모든 미디어 기기 장치
-* print - 프린터
-* speech - 화면을 크게 읽는 스크린리더
-* screen - 컴퓨터 스크린, 태블릿, 스마트 폰 등
-
-`print` 미디어의 사용 예제 :
-
-```css
-@media print {
-  body {
-    color: black;
-  }
-}
-```
-
-### 효율적인 CSS 를 작성하는데 있어 "어려움"은 무엇입니까?
-
-먼저 브라우저는 오른쪽선택자에서 왼쪽으로 선택자가 일치하는지 확인합니다. 브라우저는 선택자에 따라 DOM 의 요소를 필터링하고 해당 부모요소가 일치하는지 식별합니다. 선택자 체인의 길이가 짧을수록 브라우저는 해당 요소가 선택자와 일치하는지 여부를 빠르게 판별할 수 있습니다. 따라서 태그선택자와 보편적인 선택자자를 사용하지마세요. 그것들은 다수의 요소가 브라우저와 매치되기 때문에 부모가 일치하는지 여부를 판단하기 위해 많은 작업을 해야합니다.
-
-[BEM (Block Element Modifier)](https://bem.info/)의 방법론에서는 모두 단일 클래스를 갖고, 계층구조가 필요한 곳에서는 클래스의 이름이 확장되기를 권장합니다. 따라서 선택자를 쉽고 효율적으로 재정의 할 수 있습니다.
-
-어떠한 CSS 속성이 리플로우, 리페인트 그리고 합성을 트리거 하는지 알아 두십시오. 가능하면 레이아웃(트리거 리플로우)를 변경하는 스타일은 작성하지 마십시오.
-
-###### 참고 자료
-
-* <https://developers.google.com/web/fundamentals/performance/rendering/>
-* <https://csstriggers.com/>
-
-### CSS 전처리기를 사용하면 어떤 장단점이 있습니까?
-
-**장점:**
-
-* CSS 의 유지보수성 향상됩니다.
-* 중첩된 선택자를 작성하기 쉽습니다.
-* 일관된 스타일링 설정을 위한 변수사용. 여러 프로젝트에 걸쳐 테마 파일을 공유할 수 있습니다.
-* 반복되는 CSS 를 위한 Mixins 생성.
-* 코드를 여러 파일로 나눕니다. CSS 파일도 나눌 수 있지만, 그렇게 하기 위해서는 각 CSS 파일을 다운로드하기 위한 HTTP 요청이 필요합니다.
-
-**단점:**
-
-* 전처리기를 위한 도구가 필요합니다. 다시 컴파일하는 시간이 느릴 수 있습니다.
-
-### 사용했던 CSS 전처리기에 대해 좋아하는 것과 싫어하는 것을 설명하십시오.
-
-**좋은 것:**
-
-* 대부분 위에서 언급한 장점이 있습니다.
-* Less 는 자바 스크립트로 작성되었으며 Node 와 잘 작동합니다.
-
-**싫은 것:**
-
-* 저는 C++로 작성된 LibSass 를 바인딩인 'node-sass'를 통해 Sass 를 사용합니다. 노드 버전이 바뀔 때 자주 다시 컴파일해야합니다.
-* Less 에서는 변수 이름의 접두어가 `@`로 되어 있으며 `@media`, `@import` 및 `@font-face` 규칙과 같은 고유 CSS 키워드와 혼동될 수 있습니다.
-
-### 비표준 글꼴을 사용하는 웹 디자인 디자인을 구현하는 방법은 무엇입니까?
-
-`font-face`를 사용하고 `font-weight`가 다른 경우 `font-family`를 정의합니다.
-
-### CSS 셀렉터에 일치하는 요소가 어떤 것인지 브라우저가 어떻게 결정되는지를 설명하시오.
-
-이 부분은 위의 효율적인 CSS 작성에 대한 것입니다. 브라우저는 셀렉터를 오른쪽(선택자)에서 왼쪽으로 일치시킵니다. 브라우저는 선택자에 따라 DOM 의 요소를 필터링하고 부모 요소를 검사하여 일치를 판정합니다. 선택자 체인의 길이가 짧을수록, 브라우저가 해당 요소가 선택기에 일치하는지 여부를 판단할 수 있습니다.
-
-예를 들어, 이 셀렉터 `p span`는 브라우저는 먼저 모든 `<span>`요소를 찾아 그 부모의 루트까지 모두 통과하여 `<p>`요소를 찾습니다. 특정한 `<span>`의 경우 `<p>`를 찾는 즉시 `<span>`이 일치하는 것을 알고 있으며, 그에 따라 매칭 중지합니다.
-
-###### 참고자료
-
-* <https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left>
-
-### Pseudo-elements 에 대해 설명하고 그 요소가 무엇을 위해 사용되는지 설명하시오.
-
-CSS Pseudo-element 는 Selector 에 추가된 키워드로, 선택한 요소의 특정한 부분을 스타일링 할 수 있습니다. 마크업을 수정하지 않고 (`:before`, `:after`) 텍스트 데코레이션을 위해 사용하거나 (`:first-line`, `:first-letter`) 또는 마크 업에 요소를 추가할 수 있습니다. (`content: ...` 와 결합)
-
-* `:first-line` 과 `:first-letter` 는 텍스트를 데코레이션하는데 사용될 수 있습니다.
-* 위와 같이 `.clearfix` 에 사용되어 `clear: both` 로 영역을 차지하지 않는 요소를 추가합니다.
-* 툴팁의 삼각형 화살표는 `:before` 와 `:after` 를 사용합니다. 삼각형이 실제로 DOM 이 아닌 스타일의 일부로 간주되기 때문에 분리하는 것이 좋습니다. 추가적인 HTML 요소를 사용하지 않고 CSS 스타일만으로 삼각형을 그릴 수는 없습니다.
-
-###### 참고자료
-
-* <https://css-tricks.com/almanac/selectors/a/after-and-before/>
-
-### 박스 모델에 대한 이해와 CSS 에서 브라우저에 다른 박스 모델로 레이아웃을 렌더링하는 방법을 설명하십시오.
-
-CSS 박스 모델은 문서 트리의 요소에 대해 생성되고 시각적 서식 모델에 따라 배치된 사각형 상자를 나타냅니다. 각 박스에는 content 영역 (예: 텍스트, 이미지 등) 및 선택적 주변의 'padding', 'border' 및 'margin' 영역이 있습니다.
-
-CSS 박스 모델은 다음을 계산합니다.
-
-* 블록 요소가 차지하는 공간.
-* 테두리 또는 여백이 겹치거나 붕괴되는지 여부.
-* 박스의 크기.
-
-박스 모델에는 다음과 같은 규칙이 있습니다.
-
-* 블록 요소의 크기는 `width`, `height`, `padding`, `border`, `margin`에 의해 계산됩니다.
-* `height` 가 지정되어 있지 않은 경우, 블럭 요소는 포함하고있는 내용만큼의 높이를 가질 것이고, `padding` 을 덧붙일 것입니다(아래에 float 가 없다면).
-* `width` 가 지정되지 않으면, float 가 아닌 블록 요소는 (부모의 너비 - `padding`) 에 맞게 확장됩니다.
-* 요소의 `height`는 내용의 `height`에 의해 계산됩니다.
-* 요소의 `width`는 내용의 `width`에 의해 계산됩니다.
-* 기본적으로 `padding`과 `border`는 요소의 `width`와 `height`의 일부가 아닙니다.
-
-###### 참고자료
-
-* <https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model>
-
-### `* { box-sizing: border-box; }` 는 무엇을 하나요? 장점은 무엇입니까?
-
-* 기본적으로, 요소들은 `box-sizing: content-box`가 적용되고, 내용의 크기 만 고려됩니다.
-* `box-sizing: border-box` 는 요소의 `width` 와 `height` 가 어떻게 계산되는지를 변경하여 `border` 와 `padding` 도 계산에 포함됩니다.
-* 요소의 `height` 는 내용의 `height` + 수직 `padding` + 수직 `border` 폭에 의해 계산됩니다.
-* 요소의 `width` 는 내용의 `width` + 수평 `padding` + 수평 `border` 폭에 의해 계산됩니다.
-
-### CSS 의 `display` 속성은 무엇이며 사용법에 대한 몇 가지 예를 들 수 있습니까?
-
-* `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`.
-
-TODO
-
-### `inline` 과 `inline-block` 의 차이점은 무엇입니까?
-
-좋은 비교를 위해 `block` 과도 비교해 볼 것입니다.
-
-|                                  | `block`                                                                                     | `inline-block`                                                   | `inline`                                                                                                                                                                          |
-| -------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 크기                             | 부모 컨테이너의 너비를 채 웁니다.                                                           | 내용에 따라 달라집니다.                                          | 내용에 따라 달라집니다.                                                                                                                                                           |
-| 위치                             | 새 줄에서 시작하고 그 옆에 HTML 요소를 허용하지 않습니다 (`float`을 추가 할 때를 제외하고). | 다른 콘텐츠와 함께 흐르고 다른 요소는 옆에 있는 것을 허용합니다. | F 다른 콘텐츠와 함께 흐르고 다른 요소는 옆에 있는 것을 허용합니다.                                                                                                                |
-| `width`, `height` 지정 가능 여부 | 가능                                                                                        | 가능                                                             | 불가능. 설정되면 무시됩니다.                                                                                                                                                      |
-| `vertical-align` 정렬 가능 여부  | 불가능                                                                                      | 불가능                                                           | 불가능                                                                                                                                                                            |
-| margin 및 padding                | 모든 방향에서 가능.                                                                          | 모든 방향에서 가능.                                               | 수평방향만 가능. 세로방향을 지정하면 레이아웃에 영향을 주지 않습니다. `border` 와 `padding` 이 콘텐츠 주위에 시각적으로 나타나는 경우에도 수직영역은 `line-height` 에 의존합니다. | 
-| Float | - | - | 수직 margin 과 padding 을 설정할 수 있는 `block` 엘리먼트와 같습니다. |
-
-### `relative`, `fixed`, `absolute` 와 `static` 요소의 차이점은 무엇입니까?
-
-위치가 정해진 요소는 계산된 `position` 속성이 `relative`, `absolute`, `fixed` 또는 `sticky`인 요소입니다.
-
-* `static` - 기본 위치. 요소는 평소와 같이 페이지에 위치합니다. `top`, `right`, `bottom`, `left` 및 `z-index` 속성은 적용되지 않습니다.
-* `relative` - 요소의 위치는 레이아웃을 변경하지 않고 자체에 상대적으로 조정됩니다. (따라서 배치되지 않은 요소의 간격을 남겨 둡니다.)
-* `absolute` - 요소는 페이지의 평소 위치에서 제거되고 가장 가까운 위치에 `relative` 부모 블록이 있는 경우 지정된 위치에 배치됩니다. 그렇지 않으면 최상위 블록과 관련됩니다. absolute 로 배치된 박스는 여백을 가질 수 있으며 다른 여백과 충돌하지 않습니다. 이 요소는 다른 요소의 위치에 영향을 주지 않습니다.
-* `fixed` - 요소는 페이지의 평소 위치에서 제거되고 뷰포트를 기준으로 지정된 위치에 배치되며 스크롤 할 때 이동하지 않습니다.
-* `sticky` - 스티키 포지셔닝은 `relative` 와 `fixed` 의 하이브리드입니다. 요소는 지정된 임계 값을 넘을 때까지 `상대적` 위치로 처리되며, 특정 지점에서 `고정된` 위치로 처리됩니다.
-
-###### 참고자료
-
-* <https://developer.mozilla.org/en/docs/Web/CSS/position>
-
-### 로컬 또는 프로덕션 환경에서 사용했던 기존 CSS 프레임워크는 무엇입니까? 어떻게 그들을 바꾸거나 개선할 수 있을까요?
-
-* **Bootstrap** - 느린 릴리스 주기. 부트스트랩 4 는 거의 2년 동안 알파 상태였습니다. 널리 사용되는 것처럼 Spinner 버튼 컴포넌트를 추가하세요.
-* **Semantic UI** - 소스 코드 구조는 테마 사용자 정의를 이해하기 어렵게 만듭니다. 틀에 얽매이지 않는 테마 시스템으로 사용자 정의하기가 어렵습니다. 공급 업체 라이브러리내의 하드 코딩된 구성 경로. 부트스트랩과 달리 변수 오버라이드에 대해 잘 설계되지 않았습니다.
-* **Bulma** - 많은 의미없고 불필요한 클래스와 마크업을 필요로 합니다. 이전 버전과 호환되지 않습니다. 버전을 업그레이드하면 미묘한 방식으로 앱이 손상됩니다.
-
-[[↑] 맨 위로](#css-questions)
-
-### 새로운 CSS Flexbox 또는 그리드 스펙을 사용해본 적이 있나요?
-
-예. Flexbox는 주로 1차원 레이아웃을 대상으로 하며 Grid는 2차원 레이아웃을 대상으로 합니다.
-
-Flexbox는 CSS에서 컨테이너 안에 있는 요소의 수직 중심, sticky footer 등과 같은 많은 일반적인 문제들을 해결합니다. Bootstrap과 Bulma는 Flexbox를 기반으로 하고, 이것은 아마도 요즘 배치도를 만드는 데 권장되는 방법일 것입니다. 이전에 Flexbox를 사용해 보았지만 `flex-grow`를 사용할 때 일부 브라우저에서 비호환성 문제(Safari)가 발생했습니다. 그래서 백분율로 나타낸 폭을 계산하기 위해 `inline-blocks`과 수학을 사용한 코드로 다시 써야했는데, 이것은 좋은 경험이 아니었습니다.
-
-Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 가장 직관적인 접근법이지만(더 좋을 것입니다!), 현재 브라우저 지원은 광범위 하지 않습니다.
-
-[[↑] 맨 위로](#css-questions)
-
-###### 참고자료
-
-* <https://philipwalton.github.io/solved-by-flexbox/>
-
-### 반응형 웹사이트를 코딩하는 것과 모바일 우선 전략을 사용하는 것 사이의 차이점을 설명하시오.
-
-이 두가지 접근법은 배타적이지 않습니다.
-
-반응형 웹사이트를 만드는 것은 일부 요소가 미디어 쿼리를 통해 장치의 화면 크기(일반 적으로 뷰포트 너비)에 따라 크기나 기타 기능을 조정하도록 반응함을 의미합니다. (예: 작은 장치에서 글꼴 크기를 줄임)
-
-```css
-@media (min-width: 601px) { 
-  .my-class { 
-    font-size: 24px;
-  }
-}
-@media (max-width: 600px) {
-  .my-class { 
-    font-size: 12px;
-  }
-}
-```
-
-모바일 우선 전략 또한 반응적이지만, 모바일 장치에 대한 모든 스타일을 정의해야하며 나중에 다른 장치에 대한 특정 규칙을 추가해야합니다. 이전 예를 따르면 다음과 같습니다.
-
-```css
-.my-class { 
-  font-size: 12px;
-}
-
-@media (min-width: 600px) {
-  .my-class { 
-    font-size: 24px;
-  }
-}
-```
-
-모바일 우선 전략은 2가지 주요 장점을 가지고 있습니다.
-
-* 모바일 장치에서 적용되는 모든 규칙이 미디어 쿼리에 대해 유효성 검사를 받을 필요가 없으므로 모바일 장치에서 더 뛰어난 성능을 발휘합니다.
-* 반응형 CSS 규칙과 관련하여 보다 명확한 코드를 작성해야합니다.
-
-[[↑] 맨 위로](#css-questions)
-
-### 반응형 디자인은 적응형 디자인과 어떻게 다른가요?
-
-반응형 및 적응형 디자인은 서로 다른 뷰포트 사이즈, 해상도, 사용 컨텍스트 그리고 제어 메커니즘 등을 조정하여 다양한 장치에서 사용자 경험을 최적화하려고 시도합니다.
-
-반응형 디자인은 유연성 원칙에 따라 작동합니다. 즉, 어떤 장치에서나 보기 좋은 단일 변하기 쉬운 웹 사이트입니다. 반응형 웹 사이트는 미디어 쿼리, 유연한 그리드 및 반응 형 이미지를 사용하여 다양한 요인에 따라 유연하고 변화하는 사용자 경험을 제공합니다. 마치 하나의 공이 여러개의 서로 다른 링을 통과하기 위해 커지거나 줄어드는 것과 유사합니다.
-
-적응형 디자인는 점진적 향상의 현대적 정의에 더 가깝습니다. 하나의 유연한 디자인 대신에, 적응형 설계는 장치 및 기타 기능을 감지 한 다음 사전 정의 된 뷰포트 크기 및 기타 특성 세트를 기반으로 적절한 기능 및 레이아웃을 제공합니다. 하나의 공이 여러개의 서로 다른 링을 통과하는 대신, 후프의 크기에 따라 여러개의 공을 사용할 수 있습니다. 
-
-[[↑] 맨 위로](#css-questions)
-
-###### 참고자료
-
-* <https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design>
-* <http://mediumwell.com/responsive-adaptive-mobile/>
-* <https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/>
-
-### 레티나 그래픽으로 작업 해본 적이 있습니까? 그렇다면, 언제 그리고 어떤 기술을 사용하였습니까?
-
-저는 레티나 디스플레이를 다루기 위해 고해상도 그래픽을 사용하는 경향이 있습니다. 가장 좋은 방법은 `@media only screen and (min-device-pixel-ratio : 2) {...}`와 같은 미디어 쿼리를 사용하고 `background-image`를 변경하는 것입니다.
-
-아이콘의 경우 해상도에 관계없이 매우 선명하게 렌더링하므로 가능하면 svg 및 아이콘 글꼴을 사용하도록 선택합니다.
-
-또 다른 방법으로는 `windows.deviceFixeLaatio`값을 확인한 후에 `img` `src`특성을 더 높은 해상도 버전으로 대체하는 JavaScript를 사용하는 것이 있다.
-
-[[↑] 맨 위로](#css-questions)
-
-###### 참고자료
-
-* <https://www.sitepoint.com/css-techniques-for-retina-displays/>
-
-### `absolute` 포지셔닝 대신 `translate()`를 사용하는 이유가 무엇입니까? 또는 그 반대의 경우에 대해서는 어떻게 생각하십니까?, 그 이유는 무엇입니까?
-
-`translate()`은 CSS `transform`의 값입니다. `transform`이나 `opacity`를 변경해도 브라우저의 리플로우나 리페인트가 다시 시작되지 않고 컴포지션만 실행되는 반면 절대 위치를 변경하면 '리플로우'가 발생합니다. `transform`을 사용하면 브라우저에서 이 요소에 위한 GPU 레이어를 생성되지만 절대 위치 속성을 변경하는 것은 CPU를 사용합니다. 그러므로 `translate()`가 더 효율적이며 매끄러운 애니메이션을위한 페인트 시간이 짧아집니다.
-
-`translate()`을 사용할 때는 절대 위치를 변경할 때와 달리 원래 위치(일종의 `position: relative`)를 그대로 사용합니다.
-
-[[↑] 맨 위로](#css-questions)
-
-###### 참고자료
-
-* <https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/>
-
-### 다른 답변들
-
-* <https://neal.codes/blog/front-end-interview-css-questions>
-* <https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/>
-* <http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/>
diff --git a/Translations/Korean/questions/html-questions.md b/Translations/Korean/questions/html-questions.md
deleted file mode 100644
index dfe01c0427..0000000000
--- a/Translations/Korean/questions/html-questions.md
+++ /dev/null
@@ -1,174 +0,0 @@
-# HTML 질문
-
-* [`DOCTYPE`은 무엇을 합니까?](#doctype은-무엇을-합니까)
-* [여러 언어로 되어 있는 콘텐츠의 페이지를 어떻게 제공하나요?](#여러-언어로-되어-있는-콘텐츠의-페이지를-어떻게-제공하나요)
-* [다국어 사이트를 디자인하거나 개발할 때 주의해야 할 사항은 무엇입니까?](#다국어-사이트를-디자인하거나-개발할-때-주의해야-할-사항은-무엇입니까)
-* [`data-`속성은 무엇에 좋은가요?](#data--속성은-무엇에-좋은가요)
-* [HTML5 를 개방형 웹 플랫폼으로 간주합니다. HTML5 의 구성 요소는 무엇입니까?](#html5-를-개방형-웹-플랫폼으로-간주합니다-html5-의-구성-요소는-무엇입니까)
-* [`cookie`, `sessionStorage`, `localStorage` 사이의 차이점을 설명하세요.](#cookie-sessionstorage-localstorage-사이의-차이점을-설명하세요)
-* [`<script>`, `<script async>`, `<script defer>` 사이의 차이점을 설명하세요.](#script-script-async-script-defer-사이의-차이점을-설명하세요)
-* [왜 일반적으로 CSS `<link>` 태그를 `<head></head>` 태그 사이에 위치시키고, JS `<script>` 태그를 `</body>` 직전에 위치시키는 것이 좋은 방법입니까? 다른 예외적인 상황을 알고있습니까?](#왜-일반적으로-css-link-태그를-headhead-태그-사이에-위치시키고-js-script-태그를-body-직전에-위치시키는-것이-좋은-방법입니까-다른-예외적인-상황을-알고있습니까)
-* [프로그레시브 렌더링이 무엇입니까?](#프로그레시브-렌더링이-무엇입니까)
-* [이미지 태그에 `srcset` 속성을 사용하는 이유는 무엇입니까? 이 속성의 컨텐츠를 평가할 때 브라우저가 사용하는 프로세스를 설명하세요.](#이미지-태그에-srcset-속성을-사용하는-이유는-무엇입니까-이-속성의-컨텐츠를-평가할-때-브라우저가-사용하는-프로세스를-설명하세요)
-* [다른 HTML 템플릿 언어를 사용해본 적이 있습니까?](#다른-html-템플릿-언어를-사용해본-적이-있습니까)
-
----
-
-## HTML 질문
-
-[프론트엔드 면접 질문 - HTML 질문](https://github.com/h5bp/Front-end-Developer-Interview-Questions#html-questions)에 대한 해설입니다.
-Pull Request 를 통한 제안 및 수정 요청을 환영합니다.
-
-### `DOCTYPE`은 무엇을 합니까?
-
-`DOCTYPE`은 “document type”의 약어입니다. 이것은 HTML 에서 표준모드와 [쿼크모드](https://quirks.spec.whatwg.org/#history)를 구별하기 위해 선언합니다. 이것이 존재함으로써 웹페이지에서 표준모드로 렌더링하도록 브라우저에 지시합니다.
-
-이야기의 교훈 - 당신의 페이지를 시작 부분에 `<!DOCTYPE html>` 추가하세요.
-
-###### 참고자료
-
-* <https://stackoverflow.com/questions/7695044/what-does-doctype-html-do>
-* <https://www.w3.org/QA/Tips/Doctype>
-* <https://quirks.spec.whatwg.org/#history>
-
-### 여러 언어로 되어 있는 콘텐츠의 페이지를 어떻게 제공하나요?
-
-이 질문은 다소 모호합니다. 여러 언어로 제공된 콘텐츠로 페이지를 게재하는 방법이 가장 일반적인 경우이지만 페이지의 콘텐츠는 하나의 일관된 언어로만 표시해야 한다고 가정합니다.
-
-HTTP 를 서버에 요청하면 대개 요청하는 사용자 에이전트가 `Accept-Language` 헤더와 같은 언어 기본 설정에 대한 정보를 보냅니다. 그런 다음 서버는 이 정보를 사용하여 해당 언어가 사용 가능한 경우 해당 언어로 된 문서 버전을 반환할 수 있습니다. 반환된 HTML 문서는 `<html lang = "en"> ... </ html>`과 같이`<html>` 태그에 `lang` 속성을 선언해야 합니다.
-
-백엔드에서 HTML 마크업에는 XML 또는 JSON 형식으로 저장된 특정 언어에 대한 `i18n` placeholder(빠져 있는 다른 것을 대신하는 기호나 텍스트의 일부) 및 내용이 포함됩니다. 그런 다음 서버는 일반적으로 백엔드 프레임워크의 도움을 받아 특정 언어로 된 콘텐츠로 HTML 페이지를 동적으로 생성합니다.
-
-###### 참고자료
-
-* <https://www.w3.org/International/getting-started/language>
-
-### 다국어 사이트를 디자인하거나 개발할 때 주의해야 할 사항은 무엇입니까?
-
-* HTML 에서 `lang` 속성을 사용하세요.
-* 사용자를 모국어로 안내합니다 - 사용자가 번거롭지 않게 국가 / 언어를 쉽게 변경할 수 있도록 합니다.
-* 텍스트를 포함한 이미지를 사용하는 것은 확장가능한 접근이 아닙니다 - 이미지에 텍스트를 배치하는 것은 여전히 컴퓨터에서 보기 좋은 폰트(시스템 이외의)를 표시하는 인기 있는 방법입니다. 그러나 이미지 텍스트를 번역하려면 각 텍스트 문자열에 각 언어에 대해 만들어진 별도의 이미지가 있어야 합니다. 이와 같은 대체 방식이 늘어나면 재빠르게 제어할 수 없습니다
-* 제한적 단어 / 문장 길이 - 일부 언어는 다른 언어로 작성될 때 더 길어질 수도 있습니다. 디자인에 레이아웃이나 오버 플로우 문제 발생에 주의하세요. 디자인에 필요한 텍스트의 양을 정하거나 디자인을 깰 수 있는 디자인은 하지 않도록 하는 것이 가장 좋습니다. 문자 수는 헤드라인, 레이블 및 버튼과 같은 항목에서 사용됩니다. 그것들은 본문의 텍스트나 코멘트와 같이 자유롭게 흐르는 텍스트에 대한 문제가 적습니다.
-* 색상을 이해하는 방법에 유의하세요 - 색상은 언어와 문화에 따라 다르게 인식됩니다. 적절한 색상을 사용하여 디자인해야 합니다.
-* 날짜 및 통화 서식 - 날짜는 때때로 다른 방식으로 제시됩니다. 예) 미국의 "May 31, 2012" vs 유럽의 "31 May 2012".
-* 번역된 문자열을 연결하지 않습니다 - `"오늘의 날짜는 " + date + "입니다"` 와 같은 작업은 하지 마세요. 단어의 순서가 다른 언어로 인해 깨지게 됩니다. 대신 템플릿 매개 변수를 사용하세요.
-* 언어를 읽는 방향 - 영어는 왼쪽에서 오른쪽으로 그리고 위에서 아래로 읽지만 일본어는 오른쪽에서 왼쪽으로 읽습니다.
-
-###### 참고자료
-
-* <https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites>
-
-### `data-` 속성은 무엇에 좋은가요?
-
-JavaScript 프레임워크가 인기를 끌기 전에 전에 프런트엔드 개발자는 비표준 속성, DOM 의 추가 프로퍼티 등의 조작없이 DOM 자체 내에 추가 데이터를 저장하기 위해 `data-`속성을 사용했습니다. 이는 더 이상 적절한 속성이나 요소가 없는 페이지나 애플리케이션에 사용자 정의 데이터를 비공개로 저장하기 위한 것입니다.
-
-요즘에는 `data-`속성을 사용하는 것을 권장하지 않습니다. 그 이유 중 하나는 사용자가 브라우저의 검사 요소를 사용하여 데이터 속성을 쉽게 수정할 수 있다는 것입니다. 데이터 모델은 JavaScript 자체에 더 잘 저장되며 라이브러리 또는 프레임워크의 데이터 바인딩을 통한 DOM 으로 업데이트된 상태를 유지합니다.
-
-###### 참고자료
-
-* <http://html5doctor.com/html5-custom-data-attributes/>
-* <https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes>
-
-### HTML5 를 개방형 웹 플랫폼으로 간주합니다 HTML5 의 구성 요소는 무엇입니까?
-
-* 의미론 - 콘텐츠를 보다 더 정확하게 설명할 수 있습니다.
-* 연결 - 새롭고 혁신적인 방법으로 서버와 통신할 수 있습니다.
-* 오프라인과 저장소(storage) - 웹 페이지가 데이터를 클라이언트 측에 로컬로 저장하여 오프라인에서보다 효율적으로 작동하도록 허용합니다.
-* 멀티미디어 - 개방형 웹에서 비디오와 오디오 분야를 최고급으로 만들기
-* 2D/3D 그래픽 및 효과 - 훨씬 다양한 프레젠테이션 옵션을 허용합니다.
-* 성능 및 통합 - 속도 최적화 및 컴퓨터 하드웨어 개선으로 더 나은 사용을 제공합니다.
-* 장치 접근 - 다양한 입출력 장치의 사용을 허용합니다.
-* 스타일링 - 더 정교한 테마를 사용하게 합니다.
-
-###### 참고자료
-
-* <https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5>
-
-### `cookie`, `sessionStorage`, `localStorage` 사이의 차이점을 설명하세요.
-
-세 가지 기술은 모두 클라이언트 측에서 중요한 값을 저장하는 매커니즘입니다. 모두 문자열로만 값을 저장할 수 있습니다.
-
-|                                   | `cookie`                                                         | `localStorage` | `sessionStorage` |
-| --------------------------------- | ---------------------------------------------------------------- | -------------- | ---------------- |
-| 생성자                            | 클라이언트나 서버. 서버는 `Set-Cookie` 헤더를 사용할 수 있습니다 | 클라이언트     | 클라이언트       |
-| 만료                              | 수동으로 설정                                                    | 영구적         | 탭을 닫을 때     |
-| 브라우저 세션 전체에서 지속       | 만료 설정 여부에 따라 다름                                       | O              | X                |
-| 모든 HTTP 요청과 함께 서버로 보냄 | 쿠키는 `Cookie` 헤더를 통해 자동 전송됨                          | X              | X                |
-| 용량 (도메인당)                   | 4kb                                                              | 5MB            | 5MB              |
-| 접근성                            | 모든 윈도우                                                      | 모든 윈도우    | 같은 탭          |
-
-###### 참고자료
-
-* <https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies>
-* <http://tutorial.techaltum.com/local-and-session-storage.html>
-
-### `<script>`, `<script async>`, `<script defer>` 사이의 차이점을 설명하세요.
-
-* `<script>` - HTML 파싱이 중단되고 스크립트가 즉시 실행되며 스크립트 실행 후 HTML 파싱이 다시 시작됩니다.
-* `<script async>` - 이 스크립트는 HTML 파싱과 병행되어 사용 가능한 즉시 (HTML 파싱이 완료되기 전에) 실행됩니다. 스크립트가 페이지의 다른 스크립트(예: 분석)와 독립적인 경우 `async`를 사용하세요.
-* `<script defer>` - 이 스크립트는 HTML 파싱과 병행되지만 페이지 파싱이 끝나면 실행됩니다. 이 것이 여러개 있는 경우 각 스크립트는 페이지에 등장한 순서대로 실행됩니다. 스크립트가 완전히 파싱된 DOM 에 의존하는 경우 `defer` 속성은 실행하기 전에 HTML 전부 파싱되도록 하는데 유용합니다. `<body>`의 끝부분에 평범한 `<script>`를 두는 것과 별 차이가 없습니다. `defer` 스크립트는 `document.write`를 포함하면 안됩니다.
-
-주의: `src` 속성이 없는 스크립트에서는 `async` 와 `defer` 속성이 무시됩니다.
-
-###### 참고자료
-
-* <http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html>
-* <https://stackoverflow.com/questions/10808109/script-tag-async-defer>
-* <https://bitsofco.de/async-vs-defer/>
-
-### 왜 일반적으로 CSS `<link>` 태그를 `<head></head>` 태그 사이에 위치시키고, JS `<script>` 태그를 `</body>` 직전에 위치시키는 것이 좋은 방법입니까? 다른 예외적인 상황을 알고있습니까?
-
-**`<head>` 안에 `<link>`를 넣는 이유**
-
-`<link>`를 `<head>` 안에 넣는 것은 명세의 일부입니다. 그 외에도 상단에 배치하면 페이지가 점진적으로 렌더링되기 때문에 UX 가 향상됩니다. 문서 맨 아래에 CSS 를 두는 것은 Internet Explorer 를 비롯한 많은 브라우저에서 점진적 렌더링을 금지시키는 것입니다. 몇몇 브라우저는 스타일이 변경되면 페이지의 요소를 다시 그리지 않아도 되도록 렌더링을 차단합니다. 사용자는 빈 하얀 페이지에서 멈추게 됩니다. 또한 스타일이 없는 내용이 잠깐 보이는 것을 방지합니다.
-
-**`</body>` 직전에 `<script>`를 넣는 이유**
-
-`<script>`는 다운로드되고 실행되는 동안 HTML 파싱을 차단합니다. 스크립트를 맨 아래에서 다운로드하면 HTML 을 먼저 파싱하여 사용자에게 표시할 수 있습니다.
-
-스크립트가 `document.write()` 를 포함할 때에는 `<script>` 를 아래쪽에 두는 것이 예외적일 수 있습니다만, 요즘은 `document.write()` 를 사용하지 않는 것이 좋습니다. 또한, `<script>`를 맨 아래에 두면 브라우저가 전체 문서가 파싱될 때까지 스크립트 다운로드를 시작할 수 없다는 것을 의미합니다. 유일한 해결책은 `<head>` 에 `<script>`를 넣고 `defer` 속성을 사용하는 것입니다.
-
-###### 참고자료
-
-* <https://developer.yahoo.com/performance/rules.html#css_top>
-
-### 프로그레시브 렌더링이 무엇입니까?
-
-프로그레시브 렌더링이란 콘텐츠를 가능한 한 빨리 표시하기 위해 웹 페이지의 성능을 향상시키는 데 사용되는 기술입니다. (특히 인식되는 로딩 시간을 향상시킵니다)
-
-예전에는 광대역 인터넷을 사용하기도 했지만 불안정한 모바일 데이터 연결이 점점 인기를 끌면서 최근 개발에 있어서도 여전히 유용합니다.
-
-관련 기술 예:
-
-* 이미지 레이지 로딩 - 페이지의 이미지를 한꺼번에 로딩하지 않습니다. JavaScript 를 사용하면 사용자가 이미지를 표시하는 페이지 부분으로 스크롤 할 때 이미지를 로드 할 수 있습니다.
-* 보이는 콘텐츠의 우선순위 설정 (또는 스크롤 없이 볼 수 있는 렌더링) - 가능한 한 빨리 표시하기 위해 사용자 브라우저에서 렌더링 될 페이지의 양에 필요한 최소한의 CSS / 콘텐츠 / 스크립트 만 포함하면 `deferred` 스크립트를 사용하거나 `DOMContentLoaded` / `load` 이벤트를 수신하여 다른 리소스와 내용을 로드 할 수 있습니다.
-* 비동기 HTML 프래그먼트 - 페이지의 백엔드에서 HTML 페이지의 일부를 브라우저로 가져옵니다. 이 기술에 대한 자세한 내용은 [여기](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)에서 찾을 수 있습니다.
-
-### 이미지 태그에 `srcset` 속성을 사용하는 이유는 무엇입니까? 이 속성의 컨텐츠를 평가할 때 브라우저가 사용하는 프로세스를 설명하세요.
-
-기기의 디스플레이 너비에 따라 다른 이미지를 사용자에게 제공하려는 경우 `srcset` 속성을 사용합니다 - 레티나 디스플레이를 통해 장치에 고품질 이미지를 제공하여 사용자 경험을 향상시키고 저해상도 이미지를 저사양 기기에 제공하여 성능을 높이고 데이터 낭비를 줄입니다. (왜냐하면 더 큰 이미지를 제공하는 것은 눈에 보일 정도의 차이가 없기 때문). 예를 들면: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` 클라이언트의 해상도에 따라 브라우저에 small, medium 또는 large `.jpg` 그래픽을 표시하도록 지시합니다. 첫 번째 값은 이미지 이름이고 두 번째 값은 픽셀 단위의 이미지 너비입니다. 320px의 장치 너비의 경우 다음 계산이 수행됩니다:
-
-* 500 / 320 = 1.5625
-* 1000 / 320 = 3.125
-* 2000 / 320 = 6.25
-
-클라이언트의 해상도가 1x 일 경우, 1.5625가 가장 가깝고 `small.jpg`에 해당하는 `500w`가 브라우저에 의해 선택됩니다.
-
-해상도가 레티나 (2x)인 경우 브라우저는 최소 이상의 해상도를 사용합니다. 
-500w (1.5625)는 1보다 크고 이미지가 좋지 않을 수 있기 때문에 선택하지 않는다는 것을 의미합니다. 그러면 브라우저는 결과 비율이 2에 가까울 때 1000w (3.125)인 이미지를 선택합니다.
-
-`srcset`는 데스크탑 디스플레이처럼 큰 이미지가 필요하지 않기 때문에 작은 이미지 파일을 좁은 화면 장치에 제공하려는 문제를 해결합니다 — 또한 선택적으로 고해상도/저밀도 화면에 다른 해상도 이미지를 제공할 수도 있습니다.
-
-###### 참고자료
-
-* <https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images>
-* <https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset>
-
-### 다른 HTML 템플릿 언어를 사용해본 적이 있습니까?
-
-네, Pug (formerly Jade), ERB, Slim, Handlebars, Jinja, Liquid 등이 있습니다. 필자의 견해로 그것들은 어느 정도 동일하고, 보여 줄 데이터를 조작하는 데 유용한 필터와 컨텐츠를 유출하는 유사한 기능을 제공한다. 대부분의 템플릿 엔진을 사용하면 표시 전에 맞춤 처리가 필요한 이벤트에 자신의 필터를 삽입 할 수도 있습니다.
-
-### 기타 답변
-
-* <https://neal.codes/blog/front-end-interview-questions-html/>
-* <http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/>
diff --git a/Translations/Korean/questions/javascript-questions.md b/Translations/Korean/questions/javascript-questions.md
deleted file mode 100644
index fbbc7c6ac9..0000000000
--- a/Translations/Korean/questions/javascript-questions.md
+++ /dev/null
@@ -1,1181 +0,0 @@
-# JS 질문
-
-* [이벤트 위임에 대해 설명하세요.](#이벤트-위임에-대해-설명하세요)
-* [`this`가 JavaScript에서 어떻게 작동하는지 설명하세요.](#this가-javascript에서-어떻게-작동하는지-설명하세요)
-* [프로토타입 상속이 어떻게 작동하는지 설명하세요.](#프로토타입-상속이-어떻게-작동하는지-설명하세요)
-* [AMD 대 CommonJS에 대해 어떻게 생각하십니까?](#amd-대-commonjs에-대해-어떻게-생각하십니까)
-* [다음 내용이 IIFE로 작동하지 않는 이유를 설명하세요: `function foo(){ }();`를 IIFE로 만들기 위해서는 무엇이 바뀌어야 할까요?](#다음-내용이-iife로-작동하지-않는-이유를-설명하세요-function-foo-를-iife로-만들기-위해서는-무엇이-바뀌어야-할까요)
-* [`null`, `undefined`, `선언되지 않은 변수` 의 차이점은 무엇입니까? 당신은 어떻게 이 상태들에 대한 점검을 할 것입니까?](#null-undefined-선언되지-않은-변수-의-차이점은-무엇입니까-당신은-어떻게-이-상태들에-대한-점검을-할-것입니까)
-* [클로저는 무엇이며, 어떻게/왜 사용합니까?](#클로저는-무엇이며-어떻게왜-사용합니까)
-* [`.forEach` 루프와 `.map()` 루프 사이의 주요 차이점을 설명할 수 있습니까? 왜 둘 중 하나를 선택하겠습니까?](#foreach-루프와-map-루프-사이의-주요-차이점을-설명할-수-있습니까-왜-둘-중-하나를-선택하겠습니까)
-* [익명 함수의 일반적인 사용 사례는 무엇입니까?](#익명-함수의-일반적인-사용-사례는-무엇입니까)
-* [코드를 어떻게 구성합니까? (모듈 패턴, 고전적인 상속?)](#코드를-어떻게-구성합니까-모듈-패턴-고전적인-상속)
-* [호스트 객체와 내장 객체의 차이점은 무엇입니까?](#호스트-객체와-내장-객체의-차이점은-무엇입니까)
-* [`Person(){}`, `var person = Person()`, `var person = new Person()` 의 차이점은 무엇입니까?](#person-var-person--person-var-person--new-person-의-차이점은-무엇입니까)
-* [`.call`과 `.apply`의 차이점은 무엇입니까?](#call과-apply의-차이점은-무엇입니까)
-* [`Function.prototype.bind`에 대해 설명하세요.](#functionprototypebind에-대해-설명하세요)
-* [언제 `document.write()`를 사용합니까?](#언제-documentwrite를-사용합니까)
-* [Feature detection, Feature inference, UA String 의 차이점은 무엇입니까?](#feature-detection-feature-inference-ua-string-의-차이점은-무엇입니까)
-* [Ajax에 대해 가능한 한 자세히 설명하십시오.](#ajax에-대해-가능한-한-자세히-설명하십시오)
-* [Ajax를 사용하는 것의 장단점은 무엇입니까?](#ajax를-사용하는-것의-장단점은-무엇입니까)
-* [JSONP의 작동 방식(Ajax가 아닌 방법)을 설명하십시오.](#jsonp의-작동-방식ajax가-아닌-방법을-설명하십시오)
-* [JavaScript 템플릿을 사용한 적이 있습니까? 사용해봤다면, 어떤 라이브러리를 사용했습니까?](#JavaScript-템플릿을-사용한-적이-있습니까-사용해봤다면-어떤-라이브러리를-사용했습니까)
-* [`호이스팅`에 대해 설명하세요.](#호이스팅에-대해-설명하세요)
-* [event bubbling에 대해 설명하세요.](#event-bubbling에-대해-설명하세요)
-* ["attribute"와 "property"의 차이점은 무엇입니까?](#attribute와-property의-차이점은-무엇입니까)
-* [내장 JavaScript 객체를 확장하는 것이 좋은 생각이 아닌 이유는 무엇입니까?](#내장-javascript-객체를-확장하는-것이-좋은-생각이-아닌-이유는-무엇입니까)
-* [document `load` 이벤트와 document `DOMContentLoaded` 이벤트의 차이점은 무엇입니까?](#document-load-이벤트와-document-domcontentloaded-이벤트의-차이점은-무엇입니까)
-* [`==`와 `===`의 차이점은 무엇입니까?](#와-의-차이점은-무엇입니까)
-* [JavaScript와 관련하여 same-origin 정책을 설명하십시오.](#javascript와-관련하여-same-origin-정책을-설명하십시오)
-* [이것이 작동하게 만들어보세요: `duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]`](#이것이-작동하게-만들어보세요)
-* [왜 Ternary 표현이라고 부르고, "Ternary"라는 단어는 무엇을 나타냅니까?](#왜-ternary-표현이라고-부르고-ternary라는-단어는-무엇을-나타냅니까)
-* [`"use strict";` 이 무엇입니까? 사용시 장단점이 무엇인가요?](#use-strict-이-무엇입니까-사용시-장단점이-무엇인가요)
-* [100까지 증가하면서 `3`의 배수에는 `fizz`를 출력하고, `5`의 배수에는 `buzz`를 출력하고, `3`과 `5`의 배수에는 `fizzbuzz`를 출력하는 for loop를 만드세요.](#100까지-증가하면서-3의-배수에는-fizz를-출력하고-5의-배수에는-buzz를-출력하고-3과-5의-배수에는-fizzbuzz를-출력하는-for-loop를-만드세요)
-* [일반적으로 웹 사이트의 전역 스코프를 그대로 두고 건드리지 않는 것이 좋은 이유는 무엇입니까?](#일반적으로-웹-사이트의-전역-스코프를-그대로-두고-건드리지-않는-것이-좋은-이유는-무엇입니까)
-* [왜 `load` 이벤트와 같은 것을 사용하나요? 이 이벤트에는 단점이 있나요? 다른 대안을 알고 있나요? 알고 있다면 왜 그것을 사용할 건가요?](#왜-load-이벤트와-같은-것을-사용하나요-이-이벤트에는-단점이-있나요-다른-대안을-알고-있나요-알고-있다면-왜-그것을-사용할-건가요)
-* [single page app이 무엇인지 설명하고 SEO-friendly한 앱을 만드는 방법을 설명하십시오.](#single-page-app이-무엇인지-설명하고-seo-friendly한-앱을-만드는-방법을-설명하십시오)
-* [Promises 와/또는 Polyfill에 대한 당신의 경험은 어느 정도입니까?](#promises-와-또는-polyfill에-대한-당신의-경험은-어느-정도입니까)
-* [Callback 대신에 Promise를 사용할 때의 장점과 단점은 무엇입니까?](#callback-대신에-promise를-사용할-때의-장점과-단점은-무엇입니까)
-* [JavaScript로 컴파일되는 언어로 JavaScript 코드를 작성하는 경우의 장단점은 무엇입니까?](#javascript로-컴파일되는-언어로-javascript-코드를-작성하는-경우의-장단점은-무엇입니까)
-* [JavaScript 코드를 디버깅하기 위해 어떤 도구와 기술을 사용하십니까?](#javascript-코드를-디버깅하기-위해-어떤-도구와-기술을-사용하십니까)
-* [오브젝트 속성 및 배열 항목을 반복할 때 사용하는 언어 구조는 무엇입니까?](#오브젝트-속성-및-배열-항목을-반복할-때-사용하는-언어-구조는-무엇입니까)
-* [변경 가능 객체와 변경 불가능 객체 간의 차이점을 설명하십시오.](#변경-가능-객체와-변경-불가능-객체-간의-차이점을-설명하십시오)
-* [동기 및 비동기 함수의 차이점을 설명하십시오.](#동기-및-비동기-함수의-차이점을-설명하십시오)
-* [이벤트 루프란 무엇입니까? 콜 스택과 테스크 큐의 차이점은 무엇입니까?](#이벤트-루프란-무엇입니까-콜-스택과-태스크-큐의-차이점은-무엇입니까)
-* [`function foo() {}`와 `var foo = function() {}` 사이에서 `foo` 사용법의 차이에 대해 설명하시오.](#function-foo-와-var-foo--function--사이에서-foo-사용법의-차이에-대해-설명하시오)
-* [`let`, `var` 또는 `const`를 사용하여 생성된 변수들의 차이점은 무엇인가요?](#let-var-또는-const를-사용하여-생성된-변수들의-차이점은-무엇인가요)
-* [ES6 클래스와 ES5 함수 생성자의 차이점은 무엇입니까?](#es6-클래스와-es5-함수-생성자의-차이점은-무엇입니까)
-* [새 화살표 => 함수 구문에 대한 사용 예시를 들 수 있습니까? 이 새로운 구문은 다른 함수와 어떻게 다릅니까?](#새-화살표--함수-구문에-대한-사용-예시를-들-수-있습니까-이-새로운-구문은-다른-함수와-어떻게-다릅니까)
-* [생성자의 메서드에 화살표 구문을 사용하면 어떤 이점이 있습니까?](#생성자의-메서드에-화살표-구문을-사용하면-어떤-이점이-있습니까)
-* [고차 함수의 정의는 무엇입니까?](#고차-함수의-정의는-무엇입니까)
-* [객체나 배열에 대한 디스트럭쳐링 예시를 들 수 있습니까?](#객체나-배열에-대한-디스트럭쳐링-예시를-들-수-있습니까)
-* [ES6 템플릿 리터럴은 문자열을 생성하는 데 많은 유연성을 제공합니다. 이에 대한 예를 들 수 있습니까?](#es6-템플릿-리터럴은-문자열을-생성하는-데-많은-유연성을-제공합니다-이에-대한-예를-들-수-있습니까)
-* [curry 함수의 예를 들어 줄 수 있습니까? 이 구문은 어떤 이점을 가지고 있나요?](#curry-함수의-예를-들어-줄-수-있습니까-이-구문은-어떤-이점을-가지고-있나요)
-* [스프레드 구문을 사용할 때의 이점은 무엇이며 나머지 구문과 다른 점은 무엇입니까?](#스프레드-구문을-사용할-때의-이점은-무엇이며-rest-구문과-다른-점은-무엇입니까)
-* [파일 간에 코드를 공유하려면 어떻게 해야 합니까?](#파일-간에-코드를-공유하려면-어떻게-해야-합니까)
-* [정적인 클래스 멤버를 만드는 것이 좋은 이유는 무엇입니까?](#정적인-클래스-멤버를-만드는-것이-좋은-이유는-무엇입니까)
-
----
-
-## JS 질문
-
-[프론트엔드 면접 질문 - JS 질문](https://github.com/h5bp/Front-end-Developer-Interview-Questions#html-questions)에 대한 해설입니다.
-Pull Request 를 통한 제안 및 수정 요청을 환영합니다.
-
-### 이벤트 위임에 대해 설명하세요.
-
-이벤트 위임은 이벤트 리스너를 하위 요소에 추가하는 대신 상위 요소에 추가하는 기법입니다. 리스너는 DOM의 bubbling된 이벤트로 인해 하위 요소에서 이벤트가 발생될 때마다 실행됩니다. 이 기술의 이점은 다음과 같습니다.
-
-* 각 하위 항목에 이벤트 핸들러를 연결하지 않고 상위 요소에 하나의 단일 핸들러만 필요하기 때문에 메모리 사용 공간이 줄어듭니다.
-* 제거된 요소에서 핸들러를 해제하고 새 요소에 대해 이벤트를 바인딩할 필요가 없습니다.
-
-###### 참고자료
-
-* <https://davidwalsh.name/event-delegate>
-* <https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation>
-
-### `this`가 JavaScript 에서 어떻게 작동하는지 설명하세요.
-
-`this`는 간단하게 설명하기 어렵습니다. JavaScript 에서 가장 혼란스러운 개념 중 하나입니다. 대략 설명하면 `this`의 값은 함수가 호출되는 방식에 따라 달라집니다.
-온라인에 많은 설명이 있는데 [Arnav Aggrawal](https://medium.com/@arnav_aggarwal)의 설명이 가장 명확했습니다.
-다음 규칙과 같습니다.
-
-1.  함수를 호출할 때 `new` 키워드를 사용하는 경우 함수 내부에 있는 `this`는 완전히 새로운 객체입니다.
-2.  `apply`, `call`, `bind`가 함수의 호출 / 작성에 사용되는 경우 함수 내의 `this`는 인수로 전달된 객체입니다.
-3.  `obj.method()`와 같이 함수를 메서드로 호출하는 경우 `this`는 함수가 프로퍼티인 객체입니다.
-4.  함수가 자유함수로 호출되는 경우 즉 위의 조건 없이 호출되는 경우 `this`는 전역 객체입니다. 브라우저에서는 `window` 객체입니다. 엄격 모드(`'use strict'`) 일 경우 `this`는 전역 객체 대신 `undefined`가 됩니다.
-5.  위의 규칙 중 다수가 적용되면 더 높은 규칙이 승리하고 `this`값을 설정합니다.
-6.  함수가 ES2015 화살표 함수인 경우 위의 모든 규칙을 무시하고 생성된 시점에서 주변 스코프의 `this`값을 받습니다.
-
-상세한 설명은 [Medium 의 글](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3)를 참조하세요.
-
-###### 참고자료
-
-* <https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3>
-* <https://stackoverflow.com/a/3127440/1751946>
-
-### 프로토타입 상속이 어떻게 작동하는지 설명하세요.
-
-이것은 매우 일반적인 JavaScript 인터뷰 질문입니다. 모든 JavaScript 객체는 다른 객체에 대한 참조인 `prototype` 프로퍼티를 가지고 있습니다. 객체의 프로퍼티에 접근할 때 해당 객체에 해당 프로퍼티가 없으면 JavaScript 엔진은 객체의 `prototype`과 `prototype`의 `prototype`등을 보고 프로퍼티가 정의될 때까지 찾고 만약 객체의 프로퍼티에 접근할 때 해당 객체에 해당 프로퍼티가 없으면 프로토타입 체인 중 하나에 있거나 프로토타입 체인의 끝에 도달할 때까지 찾습니다. 이 동작은 고전적인 상속을 흉내 내지만 실제로 [상속보다 위임](https://davidwalsh.name/javascript-objects)에 더 가깝습니다.
-
-###### 참고자료
-
-* <https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson>
-* <https://davidwalsh.name/javascript-objects>
-
-### AMD 대 CommonJS 에 대해 어떻게 생각하십니까?
-
-두 가지 모두 ES2015 가 등장할 때까지 JavaScript 에 기본적으로 존재하지 않는 모듈 시스템을 구현하는 방법입니다. CommonJS 는 동기식인 반면 AMD (Asynchronous Module Definition - 비동기식 모듈 정의)는 분명히 비동기식입니다. CommonJS 는 서버-사이드 개발을 염두에 두고 설계되었으며 AMD 는 모듈의 비동기 로딩을 지원하므로 브라우저용으로 더 많이 사용됩니다.
-
-AMD 은 구문이 매우 장황하고 CommonJS 은 다른 언어로 된 import 문을 작성하는 스타일에 더 가깝습니다. 대부분의 경우 AMD 를 필요로 하지 않습니다. 모든 JavaScript 를 연결된 하나의 번들 파일로 제공하면 비동기 로딩 속성의 이점을 누릴 수 없기 때문입니다. 또한 CommonJS 구문은 모듈 작성의 노드 스타일에 가깝고 클라이언트-사이드와 서버-사이드 JavaScript 개발 사이를 전환할 때 문맥 전환 오버 헤드가 적습니다.
-
-ES2015 모듈이 동기식 및 비동기식 로딩을 모두 지원하는 것이 반가운 것은 마침내 하나의 접근 방식만 고수할 수 있다는 점입니다. 브라우저와 노드에서 완전히 작동되지는 않았지만 언제나 트랜스파일러를 사용하여 코드를 변환할 수 있습니다.
-
-###### 참고자료
-
-* <https://auth0.com/blog/javascript-module-systems-showdown/>
-* <https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs>
-
-### 다음 내용이 IIFE 로 작동하지 않는 이유를 설명하세요: `function foo(){ }();`를 IIFE 로 만들기 위해서는 무엇이 바뀌어야 할까요?
-
-IIFE 는 즉시 함수 호출 표현식을 의미합니다. JavaScript 파서는 `function foo(){ }();`을 `function foo(){ }`와 `();` 같이 읽습니다. 전자는 함수 선언이며 후자 ( 한 쌍의 괄호 )는 함수를 호출하려고 시도했지만 이름이 지정되지 않았기 때문에 `Uncaught SyntaxError : Unexpected token`)을 던집니다.
-
-추가로 괄호를 추가하는 두 가지 방법이 있습니다: `(function foo(){ })()` 그리고 `(function foo(){ }())`.
-
-JavaScript 파서는 `function foo () {} ();`를`function foo () {}`와 `();`로 읽습니다. 이러한 함수는 전역 스코프에서 노출되지 않으며 본문 내에서 자체를 참조할 필요가 없는 경우 해당 함수의 이름을 생략할 수도 있습니다.
-
-###### 참고자료
-
-* <http://lucybain.com/blog/2014/immediately-invoked-function-expression/>
-
-### `null`, `undefined`, `선언되지 않은 변수` 의 차이점은 무엇입니까? 당신은 어떻게 이 상태들에 대한 점검을 할 것입니까?
-
-**선언되지 않은 변수** 변수는 이전에 `var`, `let`, `const` 를 사용하여 생성되지 않은 식별자에 값을 할당할 때 생성됩니다. `선언되지 않은 변수` 는 현재 범위 외부에서 전역으로 정의됩니다. strict 모드에서는 `선언되지 않은 변수` 에 할당하려고 할 때 `ReferenceError` 가 throw 됩니다. `선언되지 않은 변수` 는 전역 변수처럼 좋지 않은 것입니다. 그것들은 모두 피하세요! 이들을 검사하기 위해 사용할 때 `try` / `catch` 블록에 감싸십시오.
-
-```js
-function foo() {
-  x = 1; // strict 모드에서 ReferenceError를 발생시킵니다.
-}
-
-foo();
-console.log(x); // 1
-```
-
-`undefined` 변수는 선언되었지만 값이 할당되지 않은 변수입니다. 이것은 `undefined` 타입입니다. 함수가 실행 결과에 따라 값을 반환하지 않으면 변수에 할당되며, 변수가 `undefined` 값을 갖습니다. 이것을 검사하기 위해, 엄격한 (`===`) 연산자 또는 `typeof` 에 `undefined` 문자열을 사용하여 비교하십시오. 확인을 위해 추상 평등 연산자(`==`)를 사용해서는 안되며, 이는 값이 `null` 이면 `true` 를 반환합니다.
-
-```js
-var foo;
-console.log(foo); // undefined
-console.log(foo === undefined); // true
-console.log(typeof foo === 'undefined'); // true
-
-console.log(foo == null); // true. 옳지않습니다. 확인하는 데 사용하지 마세요.
-
-function bar() {}
-var baz = bar();
-console.log(baz); // undefined
-```
-
-`null` 인 변수는 `null` 값에 명시적으로 할당될 것입니다. 그것은 값을 나타내지 않으며 명시적으로 할당된다는 점에서 `undefined`와 다릅니다. `null`을 체크하기 위해서 단순히 완전 항등 연산자(`===`)를 사용하여 비교하면 됩니다. 위와 같이, 추상 평등 연산자 (`==`)를 사용해서는 안되며, 값이 `undefined`이면 `true`를 반환합니다.
-
-```js
-var foo = null;
-console.log(foo === null); // true
-
-console.log(foo == undefined); // true. 옳지않습니다. 확인하는 데 사용하지 마세요.
-```
-
-개인적 습관으로, 저는 변수를 선언하지 않거나 할당하지 않은 상태로 두지 않습니다. 아직 사용하지 않으려는 경우, 선언한 후에 명시적으로 `null` 을 할당할 것입니다.
-
-###### 참고자료
-
-* <https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables>
-* <https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined>
-
-### 클로저는 무엇이며, 어떻게/왜 사용합니까?
-
-클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. "렉시컬"은 렉시컬 범위 지정이 변수가 사용 가능한 위치를 결정하기 위해 소스 코드 내에서 변수가 선언된 위치를 사용한다는 사실을 나타냅니다. 클로저는 외부 함수가 반환된 후에도 외부 함수의 변수 범위 체인에 접근할 수 있는 함수입니다.
-
-**왜 클로저를 사용합니까?**
-
-* 데이터 프라이버시 / 클로저로 private method 를 모방. 일반적으로 [모듈 패턴](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript)에 사용됩니다.
-* [부분적인 응용 프로그램 또는 currying](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x).
-
-###### 참고자료
-
-* <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures>
-* <https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36>
-
-### `.forEach` 루프와 `.map()` 루프 사이의 주요 차이점을 설명할 수 있습니까? 왜 둘 중 하나를 선택하겠습니까?
-
-이 두 함수의 차이점을 이해하기 위해 각 함수가 무엇을 하는지 살펴보겠습니다.
-
-**`forEach`**
-
-* 배열의 요소를 반복합니다.
-* 각 요소에 대한 콜백을 실행합니다.
-* 값을 반환하지 않습니다.
-
-```js
-const a = [1, 2, 3];
-const doubled = a.forEach((num, index) => {
-  // num 및 / 또는 index로 무엇이든 해보세요.
-});
-
-// doubled = undefined
-```
-
-**`map`**
-
-* 배열의 요소를 반복합니다.
-* 각 요소에서 함수를 호출하여 결과로 새 배열을 작성하여 각 요소를 새 요소에 매핑합니다.
-
-```js
-const a = [1, 2, 3];
-const doubled = a.map(num => {
-  return num * 2;
-});
-
-// doubled = [2, 4, 6]
-```
-
-`.forEach` 와 `.map()` 의 주된 차이점은 `.map()` 이 새로운 배열을 반환한다는 것입니다. 결과가 필요하지만 원본 배열을 변경하고 싶지 않으면 `.map()` 이 확실한 선택입니다. 단순히 배열을 반복할 필요가 있다면, forEach 가 좋은 선택입니다.
-
-###### 참고자료
-
-* <https://codeburst.io/javascript-map-vs-foreach-f38111822c0f>
-
-### 익명 함수의 일반적인 사용 사례는 무엇입니까?
-
-익명함수는 IIFE 로 사용되어 지역 범위 내에서 일부 코드를 캡슐화하므로 선언된 변수가 전역 범위로 누출되지 않습니다.
-
-```js
-(function() {
-  // 몇몇 코드
-})();
-```
-
-한 번 사용되며 다른 곳에서는 사용할 필요가 없는 콜백으로 사용됩니다. 함수 본체를 찾기 위해 다른 곳을 찾아볼 필요 없이 코드를 호출하는 코드 바로 안에 핸들러가 정의되어 있으면 코드가 보다 독립적이고 읽기 쉽게 보일 것입니다.
-
-```js
-setTimeout(function() {
-  console.log('Hello world!');
-}, 1000);
-```
-
-함수형 프로그래밍 또는 Lodash 에 대한 인수(콜백과 유사).
-
-```js
-const arr = [1, 2, 3];
-const double = arr.map(function(el) {
-  return el * 2;
-});
-console.log(double); // [2, 4, 6]
-```
-
-###### 참고자료
-
-* <https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions>
-* <https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo>
-
-### 코드를 어떻게 구성합니까? (모듈 패턴, 고전적인 상속?)
-
-과거에는 Backbone 모델을 만들고 그 모델에 메소드를 연결하는 등 OOP 접근 방식을 장려하는 모델에 Backbone 을 사용했습니다.
-
-모듈 패턴은 여전히​​ 훌륭하지만, 요즘에는 React/Redux 기반의 Flux 아키텍처를 사용합니다. 이 아키텍처는 단방향 프로그래밍 방식을 권장합니다. 저는 평범한 객체를 사용하여 응용 프로그램의 모델을 표현하고 이러한 객체를 조작하는 유틸리티 순수 함수를 작성합니다. 상태는 다른 Redux 응용 프로그램에서와 마찬가지로 action 및 reducer 를 사용하여 조작됩니다.
-
-가능한 경우 고전적인 상속을 사용하지 않습니다. 저는 [이 규칙들](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4)을 유지합니다.
-
-### 호스트 객체와 내장 객체의 차이점은 무엇입니까?
-
-내장 객체는 ECMAScript 사양에 정의된 JavaScript 언어의 일부인 객체입니다. (예: `String`, `Math`, `RegExp`, `Object`, `Function` 등)
-
-호스트 객체는 `window`, `XMLHTTPRequest` 등과 같이 런타임 환경 (브라우저 또는 노드)에 의해 제공됩니다.
-
-###### 참고자료
-
-* <https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects>
-
-### `Person(){}`, `var person = Person()`, `var person = new Person()` 의 차이점은 무엇입니까?
-
-이 질문은 굉장해 애매합니다. 질문의 의도에 대한 저의 최선의 추측은 JavaScript의 생성자에 대해 묻는 것입니다. 엄밀히 말하면, `function Person(){}`은 정상적인 함수 선언일 뿐입니다. 이 컨벤션은 생성자로 사용하기 위해 함수에 PascalCase 를 사용합니다.
-
-`var person = Person()`은 생성자가 아니며 `Person`을 함수로 호출합니다. 함수를 생성자로 사용하려는 경우에 이렇게 호출하는 것이 일반적인 실수입니다. 일반적으로 생성자는 아무것도 반환하지 않으므로 일반 함수처럼 생성자를 호출하면 `undefined`가 반환되고 지정된 변수에 할당됩니다.
-
-`var person = new Person()`은 `Person.prototype`을 상속받은 `new` 연산자를 사용하여 `Person` 객체의 인스턴스를 생성합니다. 또 다른 방법은 `Object.create`를 사용하는 것입니다: `Object.create(Person.prototype)`.
-
-```js
-function Person(name) {
-  this.name = name;
-}
-
-var person = Person('John');
-console.log(person); // undefined
-console.log(person.name); // Uncaught TypeError: 정의되지 않은 'name' 프로퍼티를 읽을 수 없습니다
-
-var person = new Person('John');
-console.log(person); // Person { name: "John" }
-console.log(person.name); // "john"
-```
-
-###### 참고자료
-
-* <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new>
-
-### `.call`과 `.apply`의 차이점은 무엇입니까?
-
-`.call`과 `.apply`는 모두 함수를 호출하는데 사용되며 첫 번째 매개 변수는 함수 내에서 `this`의 값으로 사용됩니다. 그러나 `.call`은 쉼표로 구분된 인수를 두 번째 인수로 취하고 `.apply`는 인수의 배열을 두 번째 인수로 취합니다. `call`은 `C`: `Comma` 로 구분되며 `apply`는 인수 배열인 `A`: `arguments` 라고 기억하면 쉽습니다.
-
-```js
-function add(a, b) {
-  return a + b;
-}
-
-console.log(add.call(null, 1, 2)); // 3
-console.log(add.apply(null, [1, 2])); // 3
-```
-
-### `Function.prototype.bind`에 대해 설명하세요.
-
-[MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)에서 인용.
-
-> `bind()` 메소드는 호출될 때 this 키워드가 제공된 값으로 설정되고 새로운 함수가 호출될 때 주어진 인자 앞에 주어진 시퀀스가​​ 선행되는 새로운 함수를 생성합니다.
-
-저의 경험상, 다른 함수로 전달하고자 하는 클래스의 메소드에서 `this`의 값을 바인딩할 때 가장 유용합니다. 이것은 종종 React 컴포넌트에서 사용됩니다.
-
-###### 참고자료
-
-* <https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind>
-
-### 언제 `document.write()`를 사용합니까?
-
-`document.write()`는 `document.open()`에 의해 열린 문서 스트림에 텍스트 문자열을 씁니다. 페이지가 로드된 후에 `document.write()`가 실행되면 `document.open`을 호출하여 문서 전체를 지우고 (`<head>`와 `<body>`를 지웁니다!). 문자열로 주어진 매개 변수 값으로 대체합니다. 그러므로 일반적으로 위험하고 오용되기 쉽습니다.
-
-`document.write()`가 코드분석이나 [JavaScript 가 활성화된 경우에만 작동하는 스타일을 포함하고 싶을 때](https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html) 사용되는 경우를 설명하는 온라인 답변이 몇 가지 있습니다. 심지어 HTML5 보일러 플레이트에서 [스크립트를 병렬로 로드하고 실행 순서를 보존](https://github.com/paulirish/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag)할 때도 사용됩니다! 그러나, 저는 그 이유가 시대에 뒤떨어진 것으로 생각하고 있으며, 현재는 `document.write()`를 사용하지 않고도 할 수 있습니다. 이것이 틀렸다면 고쳐주세요.
-
-###### 참고자료
-
-* <https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html>
-* <https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag>
-
-### Feature detection, Feature inference, UA String 의 차이점은 무엇입니까?
-
-**Feature Detection**
-
-Feature Detection은 브라우저가 특정 코드 블록을 지원하는지에 따라 다른 코드를 실행하도록 하여, 일부 브라우저에서 항상 오류가 발생하도록 합니다. 예:
-
-```js
-if ('geolocation' in navigator) {
-  // navigator.geolocation를 사용할 수 있습니다
-} else {
-  // 부족한 기능 핸들링
-}
-```
-
-[Modernizr](https://modernizr.com/)는 Feature detection을 처리 ​​할 수 있는 훌륭한 라이브러리입니다.
-
-**Feature Inference**
-
-Feature inference는 Feature detection과 마찬가지로 기능을 확인하지만 다른 함수도 존재한다고 가정하고 사용합니다. 예:
-
-```js
-if (document.getElementsByTagName) {
-  element = document.getElementById(id);
-}
-```
-
-이것은 권장하지 않습니다. Feature detection이 더 확실합니다.
-
-**UA String**
-
-네트워크 프로토콜 피어가 요청하는 소프트웨어 사용자 에이전트의 응용 프로그램 유형, 운영 체제, 소프트웨어 공급 업체 또는 소프트웨어 버전을 식별할 수 있도록 해주는 browser-reported String입니다. `navigator.userAgent` 를 통해 접근 할 수 있습니다. 하지만 문자열은 구문 분석하기 까다로우며 스푸핑 될 수 있습니다. 예를 들어 Chrome은 Chrome과 Safari로 모두 보고됩니다. Safari를 감지하기 위해서는 Safari 문자열이 있는지와 Chrome 문자열이 없는지 확인해야 합니다. 이 방법은 사용하지 마십시오.
-
-###### 참고자료
-
-* <https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection>
-* <https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th>
-* <https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent>
-
-### Ajax에 대해 가능한 한 자세히 설명하십시오.
-
-Ajax (asynchronous JavaScript and XML)는 비동기 웹 응용 프로그램을 만들기 위해 클라이언트 측에서 여러 웹 기술을 사용하는 웹 개발 기술의 집합입니다. Ajax를 사용하면 웹 애플리케이션은 기존 페이지의 화면 및 동작을 방해하지 않으면서 백그라운드에서 비동기적으로 서버로 데이터를 보내고 서버에서 데이터를 받아올 수 있습니다. Ajax는 프리젠테이션 레이어에서 데이터 교환 레이어를 분리함으로써 웹 페이지 및 확장 웹 애플리케이션이 전체 페이지를 다시 로드 할 필요 없이 동적으로 컨텐츠를 변경할 수 있도록 합니다. 실제로 최근에는 일반적으로 네이티브 JavaScript의 장점 때문에 XML 대신 JSON을 사용합니다.
-
-`XMLHttpRequest` API는 비동기 통신 또는 최근 `fetch` API에 자주 사용됩니다.
-
-###### 참고자료
-
-* <https://en.wikipedia.org/wiki/Ajax_(programming>)
-* <https://developer.mozilla.org/en-US/docs/AJAX>
-
-### Ajax를 사용하는 것의 장단점은 무엇입니까?
-
-**장점**
-
-* 상호작용성이 좋아집니다. 서버의 새로운 컨텐츠를 전체 페이지를 다시로드 할 필요 없이 동적으로 변경할 수 있습니다.
-* 스크립트 및 스타일 시트는 한 번만 요청하면 되므로 서버에 대한 연결을 줄여줍니다.
-* 상태를 페이지에서 관리 할 수 ​​있습니다. 메인 컨테이너 페이지가 다시 로드되지 않기 때문에 JavaScript의 변수와 DOM의 상태가 유지됩니다.
-* 기본적으로 SPA의 장점 대부분입니다.
-
-**단점**
-
-* 동적 웹 페이지는 북마크 하기 어렵습니다.
-* 브라우저에서 JavaScript가 비활성화된 경우 작동하지 않습니다.
-* 일부 웹 크롤러는 JavaScript를 실행하지 않으며 JavaScript에 의해 로드된 콘텐츠를 볼 수 없습니다.
-* SPA의 대부분의 단점이 대부분입니다.
-
-### JSONP의 작동 방식(Ajax가 아닌 방법)을 설명하십시오.
-
-JSONP (JSON with Padding)은 현재 페이지에서 cross-origin 도메인으로의 Ajax 요청이 허용되지 않기 때문에 웹 브라우저에서 cross-domain 정책을 우회하는 데 일반적으로 사용되는 방법입니다.
-
-JSONP는 `<script>`태그를 통해 cross-origin 도메인에 요청하고 보통 `callback`쿼리 매개 변수(예: `https://example.com?callback=printData`)로 요청합니다. 그러면 서버는 `printData`라는 함수 안에 데이터를 래핑하여 클라이언트로 반환합니다.
-
-```html
-<!-- https://mydomain.com -->
-<script>
-function printData(data) {
-  console.log(`My name is ${data.name}!`);
-}
-</script>
-
-<script src="https://example.com?callback=printData"></script>
-```
-
-```js
-// https://example.com?callback=printData 에서 로드된 파일
-printData({ name: 'Yang Shun' });
-```
-
-클라이언트는 전역 범위에 있는 `printData` 함수를 가져야만 하고 cross-origin domain으로부터의 응답이 수신될 때 함수가 클라이언트에 의해 실행됩니다.
-
-JSONP는 안전하지 않을 수 있으며 보안과 관련이 있습니다. JSONP은 실제로 JavaScript고, JavaScript가 할 수 있는 모든 작업을 수행할 수 있으므로 JSONP 데이터 공급자를 신뢰해야만 합니다.
-
-요즘에는 [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing)가 권장되는 접근 방식이며 JSONP는 해킹으로 간주됩니다.
-
-###### 참고자료
-
-* <https://stackoverflow.com/a/2067584/1751946>
-
-### JavaScript 템플릿을 사용한 적이 있습니까? 사용해봤다면, 어떤 라이브러리를 사용했습니까?
-
-네. Handlebars, Underscore, Lodash, AngularJS 및 JSX. 저는 AngularJS에서 템플릿을 싫어했습니다. 지시자에서 문자열을 많이 사용하게 되며 오타가 발견되지 않기 때문입니다. JSX는 JavaScript에 가깝고 배워야 하는 새로운 구문이 거의 없기 때문에 흥미롭습니다. 요즘 Third-party 코드에 의존하지 않고 템플릿을 만드는 빠른 방법으로 ES2015 템플릿 문자열 리터럴을 사용할 수도 있습니다.
-
-```js
-const template = `<div>My name is: ${name}</div>`;
-```
-
-그러나 템플릿 라이브러리와 달리 컨텐츠가 이스케이프되지 않으므로 위의 접근 방식에서 잠재적 XSS를 알고 있어야 합니다.
-
-### `호이스팅`에 대해 설명하세요.
-
-호이스팅은 코드에서 변수 선언의 동작을 설명하는데 사용되는 용어입니다. `var` 키워드로 선언 혹은 초기화된 변수는 현재 스코프의 최상위까지 `호이스팅`됩니다. 그러나 선언문만 `호이스팅`되며 할당(있는 경우)은 그대로입니다. 몇 가지 예를 들어 설명해 보겠습니다.
-
-```js
-// var 선언이 호이스팅됩니다
-console.log(foo); // undefined
-var foo = 1;
-console.log(foo); // 1
-
-// let / const 선언은 호이스팅되지 않습니다.
-console.log(bar); // ReferenceError: bar는 정의되지 않았습니다
-let bar = 2;
-console.log(bar); // 2
-```
-
-함수 선언은 바디를 호이스팅되는 반면 변수 선언 형태로 작성된 함수 표현식은 변수 선언만 호이스팅됩니다.
-
-```js
-// 함수 선언
-console.log(foo); // [Function: foo]
-foo(); // 'FOOOOO'
-function foo() {
-  console.log('FOOOOO');
-}
-console.log(foo); // [Function: foo]
-
-// 함수 표현식
-console.log(bar); // undefined
-bar(); // Uncaught TypeError: bar는 함수가 아닙니다
-var bar = function() {
-  console.log('BARRRR');
-};
-console.log(bar); // [Function: bar]
-```
-
-### event bubbling에 대해 설명하세요.
-
-DOM 요소에서 이벤트가 트리거되면 리스너가 연결되어 있는 경우 이벤트 처리를 시도한 다음 해당 이벤트가 부모에게 bubbling되고 같은 이벤트가 발생합니다. 이 bubbling은 요소의 조상 `document` 까지 계속적으로 발생시킵니다. 이벤트 bubbling은 이벤트 위임의 메커니즘입니다.
-
-### "attribute"와 "property"의 차이점은 무엇입니까?
-
-속성은 HTML 마크업에 정의되지만 속성은 DOM에 정의됩니다. 차이점을 설명하기 위해 HTML에 이 텍스트 필드가 있다고 세요. `<input type="text" value="Hello">`.
-
-```js
-const input = document.querySelector('input');
-console.log(input.getAttribute('value')); // Hello
-console.log(input.value); // Hello
-```
-
-그러나 텍스트 필드에 "World!"를 추가하면 이렇게 될것입니다.
-
-```js
-console.log(input.getAttribute('value')); // Hello
-console.log(input.value); // Hello World!
-```
-
-###### 참고자료
-
-* <https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html>
-
-### 내장 JavaScript 객체를 확장하는 것이 좋은 생각이 아닌 이유는 무엇입니까?
-
-빌트인/네이티브 JavaScript 객체를 확장한다는 것은 prototype에 속성/함수를 추가한다는 것을 의미합니다. 이것은 처음에는 좋은 생각처럼 보일 수 있지만 실제로는 위험합니다. 여러분의 코드가 동일한 `contains` 메소드를 추가함으로써 `Array.prototype`을 확장하는 여러가지 라이브러리를 사용한다고 상상해보십시오. 이러한 구현은 메소드를 서로 덮어쓰게 되며 이 두 메소드의 동작이 동일하지 않으면 코드가 망가질 것입니다.
-
-네이티브 객체를 확장할 수 있는 유일한 경우는 polyfill을 만들려고 할 때입니다. JavaScript 사양의 일부이지만 오래된 브라우저이기 때문에 사용자 브라우저에 없을 수도 있는 메서드에 대한 고유한 구현을 제공해야 할 경우입니다.
-
-###### 참고자료
-
-* <http://lucybain.com/blog/2014/js-extending-built-in-objects/>
-
-### document `load` 이벤트와 document `DOMContentLoaded` 이벤트의 차이점은 무엇입니까?
-
-`DOMContentLoaded` 이벤트는 스타일시트, 이미지, 서브프레임이 로딩을 기다리지 않고 초기 HTML 문서가 완전히 로드되고 파싱될 때 발생합니다.
-
-`window`의 `load`이벤트는 DOM과 모든 종속 리소스와 에셋들이 로드된 후에 만 ​​발생합니다.
-
-###### 참고자료
-
-* <https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded>
-* <https://developer.mozilla.org/en-US/docs/Web/Events/load>
-
-### `==`와 `===`의 차이점은 무엇입니까?
-
-`==`는 추상 동등 연산자이고 `===`는 완전 동등 연산자입니다. `==`연산자는 타입 변환이 필요한 경우 타입 변환을 한 후에 동등한지 비교할 것입니다. `===`연산자는 타입 변환을 하지 않으므로 두 값이 같은 타입이 아닌 경우 `===`는 단순히 `false`를 반환합니다. `==`를 사용하면 다음과 같은 무서운 일이 발생할 수 있습니다.
-
-```js
-1 == '1'; // true
-1 == [1]; // true
-1 == true; // true
-0 == ''; // true
-0 == '0'; // true
-0 == false; // true
-```
-
-저의 조언은 편의상 `null`과 `undefined`를 비교할 때를 제외하고, `==`연산자를 절대 사용하지 않는 것입니다. `a == null`은 `a`가 `null` 또는 `undefined`이면 `true`를 반환합니다.
-
-```js
-var a = null;
-console.log(a == null); // true
-console.log(a == undefined); // true
-```
-
-###### 참고자료
-
-* <https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons>
-
-### JavaScript와 관련하여 same-origin 정책을 설명하십시오.
-
-same-origin 정책은 JavaScript가 도메인 경계를 넘어서 요청하는 것을 방지합니다. origin은 URI 체계, 호스트 이름 및 포트 번호의 조합으로 정의됩니다. 이 정책은 한 페이지의 악의적인 스크립트가 해당 페이지의 문서 객체 모델을 통해 다른 웹 페이지의 중요한 데이터에 접근하는 것을 방지합니다.
-
-###### 참고자료
-
-* <https://en.wikipedia.org/wiki/Same-origin_policy>
-
-### 이것이 작동하게 만들어보세요.
-
-```js
-duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
-```
-
-```js
-function duplicate(arr) {
-  return arr.concat(arr);
-}
-
-duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
-```
-
-### 왜 Ternary 표현이라고 부르고, "Ternary"라는 단어는 무엇을 나타냅니까?
-
-"Ternary"는 삼항을 나타내고 삼항 표현식은 세가지 피연산자, 테스트 조건문, "then"표현식, "else"표현식을 받습니다. 삼항 표현식은 JavaScript에만 해당되는 것이 아니며 왜 이 목록에 있는지 잘 모르겠습니다.
-
-###### 참고자료
-
-* <https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator>
-
-### `"use strict";` 이 무엇입니까? 사용시 장단점이 무엇인가요?
-
-'use strict'는 전체 스크립트나 개별 함수에 엄격 모드를 사용하는데 사용되는 명령문입니다. Strict 모드는 JavaScript 제한된 변형에서 선택하는 방법입니다.
-
-장점:
-
-* 실수로 전역변수를 만드는 것이 불가능합니다.
-* 암묵적으로 실패한 예외를 throw하지 못하는 할당을 만듭니다.
-* 삭제할 수 없는 속성을 삭제하려고 시도합니다. (시도 효과가 없을 때까지)
-* 함수의 매개변수 이름은 고유해야합니다.
-* `this`는 전역 컨텍스트에서 undefined입니다.
-* 예외를 발생시키는 몇 가지 일반적인 코딩을 잡아냅니다.
-* 헷갈리거나 잘 모르는 기능을 사용할 수 없게 합니다.
-
-단점 :
-
-* 일부 개발자는 익숙하지 않은 기능이 많습니다.
-* `function.caller`와 `function.arguments`에 더 이상 접근할 수 없습니다.
-* 서로 다른 엄격한 모드로 작성된 스크립트를 병합하면 문제가 발생할 수 있습니다.
-
-전반적으로 장점이 단점보다 중요하다고 생각합니다. 엄격 모드가 차단하는 기능에 의존하지 않아도 됩니다. 엄격한 모드를 사용하는 것을 추천합니다.
-
-###### 참고자료
-
-* <http://2ality.com/2011/10/strict-mode-hatred.html>
-* <http://lucybain.com/blog/2014/js-use-strict/>
-
-### 100까지 증가하면서 `3`의 배수에는 `fizz`를 출력하고, `5`의 배수에는 `buzz`를 출력하고, `3`과 `5`의 배수에는 `fizzbuzz`를 출력하는 for loop를 만드세요.
-
-[Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724)의 이 FizzBuzz를 확인해보세요.
-
-```js
-for (let i = 1; i <= 100; i++) {
-  let f = i % 3 == 0,
-    b = i % 5 == 0;
-  console.log(f ? (b ? 'FizzBuzz' : 'Fizz') : b ? 'Buzz' : i);
-}
-```
-
-저는 인터뷰 중에 위와 같이 쓰라고 조언하지는 않습니다. 길지만 분명한 접근 방식을 고수하십시오. FizzBuzz의 더 다양한 버전을 보려면 아래의 참조 링크를 확인하십시오.
-
-###### 참고자료
-
-* <https://gist.github.com/jaysonrowe/1592432>
-
-### 일반적으로 웹 사이트의 전역 스코프를 그대로 두고 건드리지 않는 것이 좋은 이유는 무엇입니까?
-
-모든 스크립트는 전역 스코프에 접근할 수 있으며 모든 사람이 전역 네임스페이스를 사용하여 변수를 정의하면 충돌이 발생할 수 있습니다. 모듈 패턴 (IIFEs)을 사용하여 변수를 로컬 네임스페이스 내에 캡슐화하십시오.
-
-### 왜 `load` 이벤트와 같은 것을 사용하나요? 이 이벤트에는 단점이 있나요? 다른 대안을 알고 있나요? 알고 있다면 왜 그것을 사용할 건가요?
-
-`load` 이벤트는 문서로딩 프로세스가 끝날 때 발생됩니다. 이 시점에서 문서의 모든 객체가 DOM에 있고, 모든 이미지, 스크립트, 링크 및 하위 프레임로딩이 완료됩니다.
-
-DOM 이벤트 `DOMContentLoaded`는 페이지의 DOM이 생성된 후에 발생하지만 다른 리소스가 로딩되기를 기다리지 않습니다. 이것은 초기화되기 전에 전체 페이지가 로드될 필요가 없는 경우에 선호됩니다.
-
-TODO.
-
-###### 참고자료
-
-* <https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload>
-
-### single page app이 무엇인지 설명하고 SEO-friendly한 앱을 만드는 방법을 설명하십시오.
-
-아래는 [Grab Front End Guide](https://github.com/grab/front-end-guide)에서 가져온 것이며, 우연히도 저를 위해 쓰였습니다!
-
-웹 개발자는 요즘 웹 사이트가 아닌 웹 앱으로 제작한 제품을 언급합니다. 두 가지 용어 사이에는 엄격한 차이는 없지만 웹 앱은 대화형 및 동적인 경향이 있어 사용자가 작업을 수행하고 작업에 대한 응답을 받을 수 있습니다. 전통적으로, 브라우저는 서버에서 HTML을 받아 렌더링합니다. 사용자가 다른 URL로 이동하면 전체페이지 새로고침이 필요하며 서버는 새페이지에 대해 새 HTML을 보냅니다. 이를 server-side rendering이라고합니다.
-
-그러나 현대 SPA에서는 대신 클라이언트 측 렌더링이 사용됩니다. 브라우저는 전체 애플리케이션에 필요한 스크립트(프레임워크, 라이브러리, 앱 코드) 및 스타일시트와 함께 서버의 초기 페이지를 로드합니다. 사용자가 다른 페이지로 이동하면 페이지 새로고침이 발생하지 않습니다. 페이지의 URL은 [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)를 통해 업데이트됩니다. 일반적으로 JSON 형식의 새 페이지에 필요한 새 데이터는 브라우저에서 [AJAX](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started) 요청을 통해 서버로 전송됩니다. SPA는 초기 페이지 로딩에서 미리 다운로드된 JavaScript를 통해 페이지를 동적으로 업데이트합니다. 이 모델은 네이티브 모바일 앱의 작동 방식과 유사합니다.
-
-장점들:
-
-* 전체 페이지 새로고침으로 인해 페이지 탐색 사이에 하얀 화면이 보이지 않아 앱이 더 반응적으로 느껴지게 됩니다.
-
-* 동일한 애셋을 페이지 로드마다 다시 다운로드할 필요가 없으므로 서버에 대한 HTTP 요청이 줄어듭니다.
-
-* 클라이언트와 서버 사이의 고려해야 할 부분을 명확하게 구분합니다. 서버 코드를 수정하지 않고도 다양한 플랫폼(예: 모바일, 채팅 봇, 스마트워치)에 맞는 새로운 클라이언트를 쉽게 구축할 수 있습니다. 또한 API 계약이 깨지지 않는 한 내에서 클라이언트와 서버에서 기술 스택을 독립적으로 수정할 수 있습니다.
-
-단점들:
-
-* 여러 페이지에 필요한 프레임워크, 앱 코드, 애셋로드로 인해 초기 페이지로드가 무거워집니다.
-
-* 모든 요청을 단일 진입점으로 라우트하고 클라이언트 측 라우팅이 그 한곳에서 인계받을 수 있도록 서버를 구성하는 추가 단계가 수행되어야합니다.
-
-* SPA는 콘텐츠를 렌더링하기 위해 JavaScript에 의존하지만 모든 검색 엔진이 크롤링 중에 JavaScript를 실행하지는 않으며 페이지에 빈 콘텐츠가 표시될 수 있습니다. 이로 인해 의도치 않게 앱의 검색 엔진 최적화 (SEO)가 어려워집니다.
-
-그러나 대부분의 경우 앱을 제작할 때 검색 엔진에서 모든 콘텐츠 색인할 필요는 없으므로 SEO가 가장 중요한 요소는 아닙니다. 이를 극복하기 위해, 앱을 서버 측 렌더링하거나 [Prerender](https://prerender.io/)와 같은 서비스를 사용하여 "브라우저에서 JavaScript를 렌더링하고, 정적 HTML을 저장한 다음, 크롤러에게 반환합니다".
-
-###### 참고자료
-
-* <https://github.com/grab/front-end-guide#single-page-apps-spas>
-* <http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages>
-* <http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/>
-* <https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52>
-
-### Promises 와/또는 Polyfill에 대한 당신의 경험은 어느 정도입니까?
-
-Promise는 어느 시점에 resolve된 값 또는 resolve되지 않은 이유(예: 네트워크 오류가 발생) 중 하나의 값을 생성할 수 있는 객체입니다. promise는 fulfilled, rejected, pending 3가지 상태 중 하나일 수 있습니다. promise 사용자는 콜백을 붙여서 fulfill된 값이나 reject된 이유를 처리할 수 ​​있습니다.
-
-일반적인 polyfill은 `$.deferred`, Q 와 Bluebird 입니다만, 모두가 스펙을 따르는 것은 아닙니다. ES2015는 즉시 사용할 수 있는 Promise를 지원하며 일반적으로 요즘 polyfill은 필요하지 않습니다.
-
-###### 참고자료
-
-* <https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261>
-
-### Callback 대신에 Promise를 사용할 때의 장점과 단점은 무엇입니까?
-
-**장점**
-
-* 이해하기 어려운 콜백 지옥을 피할 수 있습니다.
-* 읽기 쉬운 `.then()`을 이용하여 연속적인 비동기 코드를 쉽게 작성할 수 있습니다.
-* `Promise.all()`을 사용하여 병렬 비동기 코드를 쉽게 작성할 수 있습니다.
-
-**단점**
-
-* 약간 더 복잡한 소스코드(논쟁의 여지가 있음)
-* ES2015를 지원하지 않는 이전 브라우저에서 이를 사용하기 위해서는 polyfill을 로드해야 합니다.
-
-### JavaScript로 컴파일되는 언어로 JavaScript 코드를 작성하는 경우의 장단점은 무엇입니까?
-
-JavaScript로 컴파일되는 언어의 예로 CoffeeScript, Elm, ClojureScript, PureScript 및 TypeScript가 있습니다.
-
-장점:
-
-* JavaScript의 오랜 문제점들을 수정하고 JavaScript 안티-패턴을 방지합니다.
-* JavaScript 위에 syntatic sugar를 제공함으로써 더 짧은 소스코드를 작성할 수 있도록 해줍니다. 제 생각에는 ES5는 부족하지만 ES2015는 굉장합니다.
-* 정적 타입은 시간 경과에 따라 유지 관리해야 하는 대규모 프로젝트에 대해 훌륭합니다(TypeScript의 경우).
-
-단점:
-
-* 브라우저는 오직 JavaScript만 실행하기 때문에 빌드/컴파일 프로세스가 필요하며 브라우저에 제공되기 전에 JavaScript로 코드를 컴파일해야 합니다.
-* 소스 맵이 미리 컴파일된 소스에 잘 매핑되지 않으면 디버깅이 어려울 수 있습니다.
-* 대부분의 개발자들은 이러한 언어에 익숙하지 않으므로 이를 배워야합니다. 프로젝트에 사용할 경우 팀의 비용이 증가합니다.
-* 소규모 커뮤니티 (언어에 따라 다름)는 리소스, 자습서, 라이브러리 및 툴링을 찾기가 어려울 수 있음을 의미합니다.
-* IDE / 편집기 지원이 부족할 수 있습니다.
-* 이러한 언어는 항상 최신 JavaScript 표준보다 뒤처집니다.
-* 개발자들은 자신들의 코드를 무엇으로 컴파일하고 있는지 알고 있어야 합니다. 왜냐하면 그것이 실제로 실행될 것이고 결국에는 중요한 것이기 때문입니다.
-
-실질적으로 ES2015는 JavaScript를 크게 개선하여 작성하기가 훨씬 쉬워졌습니다. 요즘은 CoffeeScript가 필요하지 않습니다.
-
-###### 참고자료
-
-* <https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript>
-
-### JavaScript 코드를 디버깅하기 위해 어떤 도구와 기술을 사용하십니까?
-
-* React and Redux
-  * [React Devtools](https://github.com/facebook/react-devtools)
-  * [Redux Devtools](https://github.com/gaearon/redux-devtools)
-* JavaScript
-  * [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)
-  * `debugger` statement
-  * Good old `console.log` debugging
-
-###### 참고자료
-
-* <https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d>
-* <https://raygun.com/blog/javascript-debugging/>
-
-### 오브젝트 속성 및 배열 항목을 반복할 때 사용하는 언어 구조는 무엇입니까?
-
-오브젝트의 경우:
-
-* `for` 반복문 - `for (var property in obj) { console.log(property); }`. 그러나 이것은 상속된 속성도 반복되며, 사용하기 전에 `obj.hasOwnProperty(property)` 체크를 추가해야 합니다.
-* `Object.keys()` - `Object.keys(obj).forEach(function (property) { ... })`. 
-`Object.keys ()`는 전달하는 객체의 열거 가능한 모든 속성을 나열하는 정적 메서드입니다.
-* `Object.getOwnPropertyNames()` - `Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`. `Object.getOwnPropertyNames()`는 전달하는 객체의 열거 가능한 속성과 열거되지 않는 모든 속성을 나열하는 정적 메서드입니다.
-
-배열의 경우:
-
-* `for` 반복문 - `for (var i = 0; i < arr.length; i++)`. 여기에 있는 일반적인 함정은 'var'이 함수 범위에 있고 블록 범위가 아니며 대부분 블록 범위의 반복자 변수를 원할 것이라는 점입니다. ES2015에는 블록 범위가 있는 `let`을 도입하고 대신 사용할 것을 권장합니다. 그래서 다음과 같이 됩니다. `for (let i = 0; i < arr.length; i++)`.
-* `forEach` - `arr.forEach(function (el, index) { ... })`. 필요한 모든 것이 배열 요소라면 `index`를 사용할 필요가 없기 때문에 이 구조가 더 편리 할 수 ​​있습니다. 또한 `every`과 `some` 메서드를 이용하여 반복을 일찍 끝낼 수 있습니다.
-
-대부분의 경우, `.forEach` 메서드를 선호하지만 무엇을 하느냐에 따라서 각 상황에 맞게 사용하는 것이 좋습니다. `for`루프는 `break`를 사용하여 루프를 조기에 종료하거나 루프 당 두 번 이상 반복자를 증가시키는 것과 같이 더 많은 유연성을 허용합니다.
-
-### 변경 가능 객체와 변경 불가능 객체 간의 차이점을 설명하십시오.
-
-* JavaScript에서 불변 객체의 예는 무엇입니까?
-* 불변성의 장점과 단점은 무엇입니까?
-* 자신의 코드에서 어떻게 불변성을 얻을 수 있습니까?
-
-TODO
-
-### 동기 및 비동기 함수의 차이점을 설명하십시오.
-
-동기 함수는 차단되는 반면 비동기 함수는 차단되지 않습니다. 동기 함수에서는 다음 명령문이 실행되기 전에 명령문이 완료됩니다. 이 경우 프로그램은 명령문의 순서대로 정확하게 평가되고 명령문 중 하나가 매우 오랜 시간이 걸리면 프로그램 실행이 일시 중지됩니다.
-
-비동기 함수는 일반적으로 파라미터를 통해서 콜백을 받아들이고 비동기 기능은 일반적으로 매개 변수로 콜백을 허용하며 비동기 기능이 호출된 후 즉시 다음 줄에서 실행이 계속됩니다. 콜백은 비동기 작업이 완료되고 호출 스택이 비어 있을 때만 호출됩니다. 웹 서버에서 데이터를 로드하거나 데이터베이스를 쿼리 하는 등의 엄격한 작업을 비동기식으로 수행하여 주 스레드가 긴 작업을 완료할 때까지 차단하지 않고 다른 작업을 계속해야 합니다(브라우저의 경우 UI가 중지됨).
-
-### 이벤트 루프란 무엇입니까? 콜 스택과 태스크 큐의 차이점은 무엇입니까?
-
-이벤트 루프는 콜 스택을 모니터하고 태스크 큐에서 수행할 작업이 있는지 확인하는 단일 스레드 루프입니다. 콜 스택이 비어 있고 태스크 큐에 콜백 함수가 있는 경우, 함수는 큐에서 제외되고 실행될 콜 스택으로 푸시됩니다.
-
-Philip Robert의 [talk on the Event Loop](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html)를 아직 확인하지 않은 경우 확인하십시오. JavaScript에서 가장 많이 본 동영상 중 하나입니다.
-
-###### 참고자료
-
-* <https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html>
-* <http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/>
-
-### `function foo() {}`와 `var foo = function() {}` 사이에서 `foo` 사용법의 차이에 대해 설명하시오.
-
-전자는 함수 선언인 반면 후자는 함수 표현입니다. 주요한 차이점은 함수 선언은 몸체가 호이스트되지만 함수 표현의 몸체는 호이스트되지 않습니다.(변수와 동일한 호이스팅 동작을 가짐) 호이스팅에 대한 자세한 설명은 위의 호이 스팅 질문을 참조하십시오. 함수 표현식을 정의하기 전에 호출하려고 하면 `Uncaught TypeError : XXX is not function` 오류가 발생합니다.
-
-**함수 선언**
-
-```js
-foo(); // 'FOOOOO'
-function foo() {
-  console.log('FOOOOO');
-}
-```
-
-**함수 표현**
-
-```js
-foo(); // Uncaught TypeError: foo는 함수가 아닙니다
-var foo = function() {
-  console.log('FOOOOO');
-};
-```
-
-###### 참고자료
-
-* <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function>
-
-### `let`, `var` 또는 `const`를 사용하여 생성된 변수들의 차이점은 무엇인가요?
-
-`var` 키워드를 사용하여 선언된 변수는 함수가 생성된 함수나 함수 밖에서 생성 된 함수에 전역 오브젝트로 적용됩니다. `let`과 `const` 블록 범위입니다. 즉, 가장 가까운 중괄호(function, if-else 블록 또는 for-loop) 내에서만 접근할 수 있습니다.
-
-```js
-function foo() {
-  // 함수 내에서 모든 변수에 접근할 수 있습니다.
-  var bar = 'bar';
-  let baz = 'baz';
-  const qux = 'qux';
-
-  console.log(bar); // "bar"
-  console.log(baz); // "baz"
-  console.log(qux); // "qux"
-}
-
-console.log(bar); // ReferenceError: bar가 정의되지 않았습니다
-console.log(baz); // ReferenceError: baz가 정의되지 않았습니다
-console.log(qux); // ReferenceError: qux가 정의되지 않았습니다
-```
-
-```js
-if (true) {
-  var bar = 'bar';
-  let baz = 'baz';
-  const qux = 'qux';
-}
-
-// var로 선언된 변수는 함수 스코프의 어디에서나 접근할 수 있습니다.
-console.log(bar); // "bar"
-// let과 const로 정의된 변수는 정의된 블록 외부에서 접근할 수 없습니다.
-console.log(baz); // ReferenceError: baz가 정의되지 않았습니다
-console.log(qux); // ReferenceError: qux가 정의되지 않았습니다
-```
-
-`var`는 변수가 올라가도록 허용합니다. 즉, 변수가 선언되기 전에 코드에서 참조 될 수 있습니다. `let`과 `const`는 이것을 허락하지 않고 대신 에러를 던집니다.
-
-```js
-console.log(foo); // undefined
-
-var foo = 'foo';
-
-console.log(baz); // ReferenceError: 초기화 전에 렉시컬 선언 `baz`에 접근할 수 없습니다.
-
-let baz = 'baz';
-
-console.log(bar); // ReferenceError: 초기화 전에 렉시컬 선언 `bar`에 접근할 수 없습니다.
-
-const bar = 'bar';
-```
-
-`var`을 사용하여 변수를 다시 선언해도 오류는 발생하지 않지만 'let'과 'const'는 오류를 발생시킵니다.
-
-```js
-var foo = 'foo';
-var foo = 'bar';
-console.log(foo); // "bar"
-
-let baz = 'baz';
-let baz = 'qux'; // SyntaxError: let baz의 재선언
-```
-
-`let`은 변수의 값을 재할당 할 수 있지만 `const`는 재할당 할 수 없다는 점이 다릅니다.
-
-```js
-// 괜찮습니다
-let foo = 'foo';
-foo = 'bar';
-
-// 예외가 발생합니다
-const baz = 'baz';
-baz = 'qux';
-```
-
-###### 참고자료
-
-* <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let>
-* <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var>
-* <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const>
-
-### ES6 클래스와 ES5 함수 생성자의 차이점은 무엇입니까?
-
-먼저 각각의 예를 살펴 보겠습니다.
-
-```js
-// ES5 함수 생성자
-function Person(name) {
-  this.name = name;
-}
-
-// ES6 클래스
-class Person {
-  constructor(name) {
-    this.name = name;
-  }
-}
-```
-
-간단한 생성자의 경우에는 매우 유사합니다.
-
-생성자의 주요 차이점은 상속을 사용할 때 발생합니다. `Person`의 하위 클래스이면서 `studentId` 필드를 추가로 가지고 있는 `Student` 클래스를 만들고자 한다면, 이것이 우리가 위에 추가해서 해야 할 일입니다.
-
-```js
-// ES5 함수 생성자
-function Student(name, studentId) {
-  // 수퍼 클래스의 생성자를 호출하여 수퍼 클래스에서 상속된 멤버를 초기화합니다.
-  Person.call(this, name);
-
-  // 서브 클래스의 멤버를 초기화합니다.
-  this.studentId = studentId;
-}
-
-Student.prototype = Object.create(Person.prototype);
-Student.prototype.constructor = Student;
-
-// ES6 클래스
-class Student extends Person {
-  constructor(name, studentId) {
-    super(name);
-    this.studentId = studentId;
-  }
-}
-```
-
-ES5에서 상속을 사용하는 것이 훨씬 더 상세하며 ES6 버전은 이해하고 기억하기가 더 쉽습니다.
-
-###### 참고자료
-
-* https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
-* https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5
-
-### 새 화살표 => 함수 구문에 대한 사용 예시를 들 수 있습니까? 이 새로운 구문은 다른 함수와 어떻게 다릅니까?
-
-TODO
-
-### 생성자의 메서드에 화살표 구문을 사용하면 어떤 이점이 있습니까?
-
-TODO
-
-### 고차 함수의 정의는 무엇입니까?
-
-고차 함수는 다른 함수를 매개 변수로 사용하여 일부 데이터에서 작동하거나 결과로 함수를 반환하는 함수입니다. 고차 함수는 반복적으로 수행되는 일부 연산을 추상화하기 위한 것입니다. 전형적인 예는 배열과 함수를 인수로 취하는 `map`입니다. `map`은 고차 함수를 사용하여 배열의 각 항목을 변환하고 변환 된 데이터로 새로운 배열을 반환합니다. JavaScript에서 흔히 볼 수 있는 다른 예로 `forEach`, `filter`, `reduce`가 있습니다. 다른 함수에서 함수를 반환하는 많은 사용 사례가 있기 때문에 고차 함수는 배열을 조작할 필요가 없습니다. `Array.prototype.bind`는 JavaScript에서 그러한 예시 중 하나입니다.
-
-##### Map
-
-각 요소를 대문자 문자열로 변환해야하는 이름 배열이 있다고 가정해 보겠습니다.
-
-`const names = ['irish', 'daisy', 'anna']`;
-
-즉흥적인 방법은 다음과 같습니다.
-
-```js
-const transformNamesToUppercase = names => {
-  const results = [];
-  for (let i = 0; i < names.length; i++) {
-    results.push(names[i].toUpperCase());
-  }
-  return results;
-};
-transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
-```
-
-`.map(transformerFn)`을 사용하면 더 간단해지고 추론하기 쉽고 읽기 쉬워집니다.
-
-```js
-const transformNamesToUppercase = names =>
-  names.map(name => name.toUpperCase());
-transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
-```
-
-##### Filter
-
-초기 문자가 **i**로 시작하는 모든 이름을 필터링하려고 합니다.
-
-즉흥적인 방법은 다음과 같습니다.
-
-```js
-const filterNames = names => {
-  const results = [];
-  for (let i = 0; i < names.length; i++) {
-    const name = names[i];
-    if (name.startsWith('i')) {
-      results.push(name);
-    }
-  }
-  return results;
-};
-filterNames(names); // ['IRISH']
-```
-
-`for loop`를 사용하는 것 대신에 `.filter(predicateFn)`를 사용하는 것이 더 읽기 쉬워집니다.
-
-```js
-const filterNames = names => names.filter(name => name.startsWith('i'));
-filterNames(names); // ['IRISH']
-```
-
-##### Reduce
-
-배열의 모든 값을 더합니다.
-
-`const numbers = [1,2,3,4,5];`
-
-즉흥적인 방법:
-
-```js
-const sumOfNumbers = numbers => {
-  let sum = 0;
-  for (let i = 0; i < numbers.length; i++) {
-    sum += numbers[i];
-  }
-  return sum;
-};
-sumOfNumbers(numbers); // 15
-```
-
-`.reduce(reducerFn)`을 사용하는 것이 더 선언적:
-
-```js
-const sumOfNumbers = numbers =>
-  numbers.reduce((total, number) => (total += number), 0);
-sumOfNumbers(numbers); // 15
-```
-
-**고차 함수**를 사용하여 코드를 쉽게 추론하고 코드 품질을 향상시킬 수 있습니다. 이것은 당신의 코드가 즉흥적이기 보다 더 읽기 쉽도록 만들어줍니다. 
-
-###### 참고자료
-
-* <https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99>
-* <https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a>
-* <https://eloquentjavascript.net/05_higher_order.html>
-
-### 객체나 배열에 대한 디스트럭쳐링 예시를 들 수 있습니까?
-
-디스트럭쳐링은 ES6에서 사용할 수 있는 표현식으로 개체 또는 배열의 값을 추출하여 다른 변수에 배치하는 간결하고 편리한 방법을 제공합니다.
-
-**배열 디스트럭쳐링**
-
-```js
-// 변수 할당.
-const foo = ['one', 'two', 'three'];
-
-const [one, two, three] = foo;
-console.log(one); // "one"
-console.log(two); // "two"
-console.log(three); // "three"
-```
-
-```js
-// 변수 교환
-let a = 1;
-let b = 3;
-
-[a, b] = [b, a];
-console.log(a); // 3
-console.log(b); // 1
-```
-
-**객체 디스트럭쳐링**
-
-```js
-// 변수 할당.
-const o = { p: 42, q: true };
-const { p, q } = o;
-
-console.log(p); // 42
-console.log(q); // true
-```
-
-###### 참고자료
-
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
-* https://ponyfoo.com/articles/es6-destructuring-in-depth
-
-
-### ES6 템플릿 리터럴은 문자열을 생성하는 데 많은 유연성을 제공합니다. 이에 대한 예를 들 수 있습니까?
-
-TODO
-
-### curry 함수의 예를 들어 줄 수 있습니까? 이 구문은 어떤 이점을 가지고 있나요? 
-
-currying은 둘 이상의 매개 변수가 있는 함수가 여러 함수로 분리된 패턴으로, 직렬로 호출하면 필요한 모든 매개 변수가 한 번에 하나씩 누적됩니다. 이 기술은 기능 스타일로 작성된 코드를 읽고 작성하기가 더 쉬워진 경우 유용할 수 있습니다. 함수를 currying하려면 하나의 함수로 시작한 다음 하나의 매개 변수를 취하는 일련의 함수로 분리해야 합니다.
-
-```js
-function curry(fn) {
-  if (fn.length === 0) {
-    return fn;
-  }
-
-  function _curried(depth, args) {
-    return function(newArgument) {
-      if (depth - 1 === 0) {
-        return fn(...args, newArgument);
-      }
-      return _curried(depth - 1, [...args, newArgument]);
-    };
-  }
-
-  return _curried(fn.length, []);
-}
-
-function add(a, b) {
-  return a + b;
-}
-
-var curriedAdd = curry(add);
-var addFive = curriedAdd(5);
-
-var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
-```
-
-###### 참고자료
-
-* <https://hackernoon.com/currying-in-js-d9ddc64f162e>
-
-### 스프레드 구문을 사용할 때의 이점은 무엇이며 rest 구문과 다른 점은 무엇입니까?
-
-ES6의 스프레드 구문은 함수적인 패러다임에서 코딩할 때 매우 유용합니다. 왜냐하면 `Object.create`, `slice` 또는 라이브러리 함수를 사용하지 않고도 배열이나 객체의 복사본을 쉽게 만들 수 있기 때문입니다. 이 언어 기능은 Redux 또는 RX.js를 사용하는 프로젝트에서 많이 사용됩니다. 
-
-```js
-function putDookieInAnyArray(arr) {
-  return [...arr, 'dookie'];
-}
-
-var result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"]
-
-var person = {
-  name: 'Todd',
-  age: 29
-};
-
-var copyOfTodd = { ...person };
-```
-
-ES6의 rest 구문은 함수에 전달할 임의의 수의 인수를 포함하는 약식을 제공합니다. 이는 데이터의 배열을 채우기보다는 데이터를 가져와서 배열로 채우는 스프레드 구문의 역순과 같으며 배열 및 객체 디스트럭쳐링 할당뿐만 아니라 함수 인수에서도 작동합니다.
-
-```js
-function addFiveToABunchOfNumbers(...numbers) {
-  return numbers.map(x => x + 5);
-}
-
-var result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]
-```
-
-###### 참고자료
-
-* <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax>
-* <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters>
-
-### 파일 간에 코드를 공유하려면 어떻게 해야 합니까?
-
-이것은 Javascript 환경에 따라 다릅니다. 
-
-클라이언트(브라우저 환경)에서는 변수/함수가 전역 범위 (`window`)에 선언되어있는 한 모든 스크립트가 이를 참조할 수 있습니다. 또는, 보다 모듈형 접근 방식을 위해 Require2S를 통해 비동기 모듈 정의(AMD)를 이용합니다. 
-
-서버(Node.js)에서 일반적인 방법은 CommanJS를 사용하는 것입니다. 각 파일은 모듈로 취급되며 변수와 함수를`module.exports` 객체에 첨부하여 내보낼 수 있습니다. 
- 
-ES2015에서는 AMD 및 commonJS를 모두 대체하기 위한 모듈 구문을 정의합니다. 이 기능은 브라우저 및 노드 환경 모두에서 지원됩니다 
-
-###### 참고자료
-
-* http://requirejs.org/docs/whyamd.html
-* https://nodejs.org/docs/latest/api/modules.html
-* http://2ality.com/2014/09/es6-modules-final.html
-
-### 정적인 클래스 멤버를 만드는 것이 좋은 이유는 무엇입니까?
-
-정적 클래스 멤버(속성/메서드)는 클래스의 특정 인스턴스에 연결되지 않으며 어떤 인스턴스가 이를 참조하는지에 관계없이 동일한 값을 가집니다. 정적 속성은 일반적으로 구성 변수이며 정적 메서드는 일반적으로 인스턴스의 상태에 의존하지 않는 순수 유틸리티 함수입니다. 
-
-### 다른 답변들
-
-* <http://flowerszhong.github.io/2013/11/20/javascript-questions.html>
diff --git a/Translations/Portuguese/README.md b/Translations/Portuguese/README.md
deleted file mode 100644
index b4af81429c..0000000000
--- a/Translations/Portuguese/README.md
+++ /dev/null
@@ -1,57 +0,0 @@
-<h1 align="center">Front End Interview Handbook</h1>
-
-<div align="center">
-  <a href="https://dribbble.com/shots/4263961-Front-End-Interview-Scroll">
-    <img src="https://cdn.rawgit.com/yangshun/front-end-interview-handbook/23d89c8/assets/scroll.svg" alt="Front End Interview Handbook" width="400"/>
-    </a>
-  <br>
-  <p>
-    <em>Creditos: <a href="https://dribbble.com/shots/4263961-Front-End-Interview-Scroll">Ilustração</a> por <a href="https://dribbble.com/yangheng">@yangheng</a>
-    </em>
-  </p>
-</div>
-
-## O que é isto?
-
-Ao contrário das típicas entrevistas de trabalho de um engenheiro de software, as entrevistas de trabalho front-end têm menos ênfase nos algoritmos e têm mais perguntas sobre conhecimentos intrincados e conhecimento sobre o domínio — HTML, CSS, JavaScript, apenas para citar algumas das áreas.
-
-Embora existam alguns recursos existentes para ajudar os desenvolvedores do front end na preparação para as entrevistas, eles não são tão abundantes como os materiais para uma entrevista de um engenheiro de software. Entre os recursos existentes, provavelmente a lista de perguntas mais útil seria [Perguntas de Entrevista do Desenvolvedor de Front-end](https://github.com/h5bp/Front-end-Developer-Interview-Questions). Infelizmente, não consegui encontrar muitas respostas completas e satisfatórias para estas questões on-line, portanto, aqui está a minha tentativa de respondê-las. Sendo um repositório de open source, o projeto pode continuar com o apoio da comunidade à medida que o estado da web evolui.
-
-## À Procura da Preparação Genérica de Entrevistas?
-
-Podes estar interessado no [Tech Interview Handbook](https://github.com/yangshun/tech-interview-handbook) que contem conteúdo útil para entrevistas de codificação geral, como algoritmos, perguntas comportamentais e [dicas de entrevista](https://github.com/yangshun/tech-interview-handbook/blob/master/preparing/cheatsheet.md)!
-
-## Índice
-
-1. [Perguntas HTML](questions/html-questions.md)
-1. [CSS Questions](questions/css-questions.md)
-1. [Perguntas de JavaScript](questions/javascript-questions.md)
-
-## Traduções
-
-* [English](/README.md)
-* [Simplified Chinese (简体中文)](/Translations/Chinese/README.md)
-* [Tagalog](/Translations/Tagalog/README.md)
-* [Japanese (日本語)](/Translations/Japanese/README.md)
-
-**Em Progresso**
-
-* [Korean (한국어)](/Translations/Korean/README.md)
-
-## Relacionados
-
-Se estás interessado em saber como as estruturas de dados são implementadas, consulta [Lago](https://github.com/yangshun/lago), uma biblioteca de Estruturas de Dados e Algoritmos para JavaScript. É ainda muito WIP, mas eu pretendo entrar numa biblioteca que poderá ser usada na produção e também um recurso de referência para conferir Estruturas de dados e Algoritmos.
-
-## Contribuindo
-
-### Código de conduta
-
-Adotamos o mesmo Código de Conduta como o Facebook esperamos que os participantes do projeto adiram. Leia [o texto completo](https://code.facebook.com/codeofconduct) para que possas perceber quais as ações que serão e não serão toleradas.
-
-### Guia de contribuição
-
-Leia o nosso [guia de contribuição](CONTRIBUTING.md) para saber como podes contribuir, como propor melhorias ou se estiveres interessado na tradução do conteúdo.
-
-## Licença
-
-Todos os projetos e pacotes neste repositório são [licenciados MIT](LICENÇA).
diff --git a/Translations/Portuguese/questions/html-questions.md b/Translations/Portuguese/questions/html-questions.md
deleted file mode 100644
index 659c9b6a59..0000000000
--- a/Translations/Portuguese/questions/html-questions.md
+++ /dev/null
@@ -1,199 +0,0 @@
-# Perguntas HTML
-
-Respostas a [Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/html-questions.md). Os pedidos de sugestões e correções são bem-vindos!
-
-* [O que faz um doctype?](#what-does-a-doctype-do)
-* [Como é que tu serves uma página com conteúdo em vários idiomas?](#how-do-you-serve-a-page-with-content-in-multiple-languages)
-* [Que tipo de coisas tu deves desconfiar ao projetar ou desenvolver sites multilíngues?](#what-kind-of-things-must-you-be-wary-of-when-designing-or-developing-for-multilingual-sites)
-* [Quais são os atributos `data-` bons para?](#what-are-data--attributes-good-for)
-* [Considera HTML5 como uma plataforma aberta. Quais são os blocos de construção do HTML5?](#consider-html5-as-an-open-web-platform-what-are-the-building-blocks-of-html5)
-* [Descreve a diferença entre uma `cookie`, `sessionStorage` e `localStorage`.](#describe-the-difference-between-a-cookie-sessionstorage-and-localstorage)
-* [Descreva a diferença entre `<script>`, `<script async>` e `<script defer>`.](#describe-the-difference-between-script-script-async-and-script-defer)
-* [Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`? Do you know any exceptions?](#why-is-it-generally-a-good-idea-to-position-css-links-between-headhead-and-js-scripts-just-before-body-do-you-know-any-exceptions)
-* [O que é a renderização progressiva?](#what-is-progressive-rendering)
-* [Por que usarias um atributo `srcset` numa etiqueta de imagem? Explica o processo que o navegador usa ao avaliar o conteúdo deste atributo](#why-you-would-use-a-srcset-attribute-in-an-image-tag-explain-the-process-the-browser-uses-when-evaluating-the-content-of-this-attribute)
-* [Tu já usaste diferentes linguagens de modelos de HTML antes?](#have-you-used-different-html-templating-languages-before)
-
-### O que faz um `DOCTYPE`?
-
-`DOCTYPE` é uma abreviatura para “tipo de documento”. É uma declaração usada em HTML para distinguir entre o modo de padrões e [modo peculiar](https://quirks.spec.whatwg.org/#history). A sua presença diz ao navegador para renderizar a página da web no modo padrão.
-
-Moral da história - apenas adiciona `<!DOCTYPE html>` no início da sua página.
-
-###### Referências
-
-* https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
-* https://www.w3.org/QA/Tips/Doctype
-* https://quirks.spec.whatwg.org/#history
-
-[[↑] De volta ao topo](#html-questions)
-
-### Como é que tu serves uma página com conteúdo em vários idiomas?
-
-A questão é um pouco vaga, eu vou assumir que está a perguntar sobre o caso mais comum, que é como servir uma página com conteúdo disponível em vários idiomas, mas o conteúdo dentro da página deve ser exibido somente num idioma consistente.
-
-Quando uma solicitação HTTP é feita para um servidor, o agente de utilizador pedido geralmente envia informações sobre as preferências de idioma, como no cabeçalho `Aceitar-Idioma'. O servidor pode então usar estas informações para retornar uma versão do documento no idioma apropriado, caso tal alternativa esteja disponível. O documento HTML retornado também deve declarar o atributo`lang`na marca`<html> `, como`<html lang="en">...</html>`.
-
-Na parte de trás, a marcação HTML irá conter espaços reservados `i18n` e conteúdo para o idioma específico armazenado nos formatos YML ou JSON. O servidor, em seguida, gera dinamicamente a página HTML com conteúdo nesse idioma específico, geralmente com a ajuda de uma estrutura de back-end.
-
-###### Referências
-
-* https://www.w3.org/International/getting-started/language
-
-[[↑] De volta ao topo](#html-questions)
-
-### Que tipo de coisas tuvocê deves desconfiar ao projetar ou desenvolver sites multilíngues?
-
-* Usa atributos `lang` a tua HTML.
-* Direccionando os de utilizadores para o teu idioma nativo - Permite que um utilizador mude facilmente o seu país/idioma sem problemas.
-* O texto em imagens não é uma abordagem escalável - Colocar texto numa imagem ainda é uma maneira popular de obter fontes bonitas e sem sistema para serem exibidas em qualquer computador. No entanto, para traduzir o texto da imagem, cada sequência de texto precisará de ter uma imagem separada criada para cada idioma. Qualquer coisa mais do que um punhado de substituições como esta podem rapidamente sair do controle.
-* Palavras restritas/comprimento da frase - Alguns conteúdos podem ser mais longos quando escritos num outro idioma. Desconfie de problemas de layout ou transbordamento no design. É melhor evitar projetar onde a quantidade de texto faria ou partisse um projeto. As contagens de personagens entram no jogo com coisas como manchetes, rótulos e botões. Eles são um menor problema com o texto livre, como texto corporativo ou comentários.
-* Lembra-te de como as cores são percebidas - As cores são percebidas de maneira diferente em línguas e culturas. O design deve usar a cor adequadamente.
-* Formatar datas e moedas - As datas do calendário são por vezes apresentadas de diferentes maneiras. Por exemplo. "31 de maio de 2012" nos EUA versus "31 de maio de 2012" em partes da Europa.
-* Não concatene as cordas traduzidas - Não faças nada como `"A data hoje é" + data`. Ele vai partir em idiomas com diferentes ordens de palavras. Usa uma string de modelo com substituição de parâmetros para cada idioma. Por exemplo, vê as duas frases seguintes em inglês e chinês, respectivamente: `I will travel on {% date %}` e `{% date %} 我会出发`. Observa que a posição da variável é diferente devido às regras da gramática do idioma.
-* Direção da leitura de idioma - Em inglês, lemos da esquerda para a direita, de cima para baixo, em japonês tradicional, o texto é lido de cima para baixo, da direita para a esquerda.
-
-###### Referências
-
-* https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
-
-[[↑] De volta ao topo](#html-questions)
-
-### Para que são bons os atributos `data-`?
-
-Antes que os frameworks JavaScript se tornassem populares, os desenvolvedores front-end usavam atributos `data-` para armazenar dados extras dentro do próprio DOM, sem outros hacks, como atributos não-padrão, propriedades extras no DOM. É destinado a armazenar dados personalizados privados para a página ou aplicativo, para os quais não há mais atributos ou elementos apropriados.
-
-Atualmente, o uso dos atributos `data-` não é encorajado. Uma das razões é que os utilizadores podem modificar o atributo de dados facilmente usando o elemento de inspeção no navegador. O modelo de dados é melhor armazenado dentro do próprio JavaScript e permaneça atualizado com o DOM via ligação de dados possivelmente através de uma biblioteca ou uma estrutura.
-
-###### Referências
-
-* http://html5doctor.com/html5-custom-data-attributes/
-* https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
-
-[[↑] De volta ao topo](#html-questions)
-
-### Considera HTML5 como uma plataforma aberta. Quais são os blocos de construção do HTML5?
-
-* Semântica - Permite que tu descrevas mais precisamente o que é o teu conteúdo.
-* Conectividade - Permite que tu comuniques com o servidor de formas novas e inovadoras.
-* Offline e armazenamento - Permite que as páginas da Web armazenem dados no lado do cliente localmente e funcionem offline de forma mais eficiente.
-* Multimédia - Criar vídeo e áudio de primeira classe cidadãos na Open Web.
-* Gráficos e efeitos 2D/3D - Permitir uma gama muito mais diversificada de opções de apresentação.
-* Desempenho e integração - Fornecer maior optimização da velocidade e melhor uso do hardware do computador.
-* Acesso ao dispositivo - Permitir o uso de vários dispositivos de entrada e saída.
-* Styling - Permitir que os autores escrevam temas mais sofisticados.
-
-###### Referências
-
-* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
-
-[[↑] De volta ao topo](#html-questions)
-
-### Descreve a diferença entre uma `cookie`,`sessionStorage` e `localStorage`.
-
-Todas as tecnologias acima mencionadas são mecanismos de armazenamento de valor-chave do lado do cliente. Eles só conseguem armazenar valores como strings.
-
-|                                                 | `cookie`                                                              | `localStorage`  | `sessionStorage` |
-| ----------------------------------------------- | --------------------------------------------------------------------- | --------------- | ---------------- |
-| Iniciador                                       | Cliente ou servidor. Pode usar cabeçalho `Set-Cookie`                 | Cliente         | Cliente          |
-| Expira                                          | Definir manualmente                                                   | Para sempre     | Na aba fechar    |
-| Persiste em todas sessões do navegador          | Depende de se o tempo de validade está configurado                    | Sim             | Não              |
-| Tem um domínio associado                        | Sim                                                                   | Não             | Não              |
-| Enviado para servidor com cada solicitação HTTP | Os cookies são automaticamente enviados através do cabeçalho `Cookie` | Não             | Não              |
-| Capacidade (por domínio)                        | 4kb                                                                   | 5MB             | 5MB              |
-| Acessibilidade                                  | Qualquer janela                                                       | Qualquer janela | A mesma aba      |
-
-###### Referências
-
-* https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
-* http://tutorial.techaltum.com/local-and-session-storage.html
-
-[[↑] De volta ao topo](#html-questions)
-
-### Descreve a diferença entre `<script>`, `<script async>` e `<script defer>`.
-
-* `<script>` - A análise HTML é bloqueada, o script é executado e executado imediatamente, a análise HTML é retomada após o script ser executado.
-* `<script async>` - O script será procurado em paralelo com a análise HTML e executado assim que estiver disponível (potencialmente antes da análise HTML). Usa `async` quando o script for independente de qualquer outro script na página, por exemplo, analítica.
-
-- `<script defer>` - O script será procurado em paralelo com a análise de HTML e executado quando a página terminar de analisar. Se houver vários deles, cada script diferido é executado na ordem em que foram encontrados no documento. Se um script depende de um DOM totalmente analisado, o atributo ` defer`` será útil para garantir que o HTML seja totalmente analisado antes de o executar. Não há muita diferença em colocar um `<script>`normal no final de`<body>`. Um script diferido não deve conter`document.write`.
-
-Nota: Os atributos `async` e` defer`` são ignorados para scripts que não possuem atributo `src`.
-
-###### Referências
-
-* http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
-* https://stackoverflow.com/questions/10808109/script-tag-async-defer
-* https://bitsofco.de/async-vs-defer/
-
-[[↑] De volta ao topo](#html-questions)
-
-### Por que é geralmente uma boa ideia posicionar o CSS `<link>`s entre `<head></head>` e JS `<script>`s antes de `</body>`? Tu conheces alguma exceção?
-
-**Colocar `<link>`s no `<head>`**
-
-Colocar `<link>`s na cabeça faz parte da especificação. Além disso, colocar na parte superior permite que a página seja processada progressivamente, o que melhora a experiência do utilizador. O problema com a colocação de folhas de estilo perto da parte inferior do documento é que ele proíbe a renderização progressiva em muitos navegadores, incluindo o Internet Explorer. Alguns navegadores bloqueiam a renderização para evitar ter que pintar elementos da página se os seus estilos mudarem. O utilizador está preso a ver uma página branca em branco. Evita o flash de conteúdo não esmagado.
-
-**Colocar `<script>`s pouco antes de `</body>`**
-
-`<script>`s bloqueia a análise HTML enquanto eles estão a ser descarregados e executados. Fazer o download dos scripts na parte inferior permitirá que o HTML seja analisado e mostrado em primeiro ao utilizador.
-
-Uma exceção para o posicionamento de `<script>`s na parte inferior é quando o teu script contém `document.write ()`, mas nos dias de hoje não é uma boa prática usar `document.write ()`. Além disso, colocar `<script>`s na parte inferior significa que o navegador não pode começar a descarregar os scripts até que o documento inteiro seja analisado. Uma solução possível é colocar `<script>` no `<head>` e usar o atributo `defer``
-
-###### Referências
-
-* https://developer.yahoo.com/performance/rules.html#css_top
-
-[[↑] De volta ao topo](#html-questions)
-
-### O que é a renderização progressiva?
-
-A renderização progressiva é o nome dado às técnicas utilizadas para melhorar o desempenho de uma página web (em particular, melhorar o tempo de carregamento percebido) para renderizar o conteúdo para a sua exibição o mais rápido possível.
-
-Ele costumava ser muito mais prevalecente nos dias que antecedem a internet de banda larga, mas ainda é útil no desenvolvimento moderno, pois as conexões de dados móveis estão a tornar-se cada vez mais populares (e não confiáveis)!
-
-Exemplos de tais técnicas:
-
-* O carregamento preguiçoso de imagens - As imagens na página não são carregadas de uma só vez. O JavaScript será usado para carregar uma imagem quando o utilizador rolar para a parte da página que mostra a imagem.
-* Priorizando o conteúdo visível (ou a renderização acima da dobra) - Inclua apenas o CSS/conteúdo/scripts mínimos necessários para a quantidade de página que será processada no navegador de primeiros utilizadores para exibir o mais rápido possível, tu podes usar o diferido scripts ou ouve o evento `DOMContentLoaded`/`load` para carregar os outros recursos e conteúdo.
-* Fragmentos HTML Async - Peças de lavagem do HTML para o navegador à medida que a página é construída na parte traseira. Mais detalhes sobre a técnica podem ser encontrados [aqui](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
-
-###### Referências
-
-* https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
-* http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
-
-[[↑] De volta ao topo](#html-questions)
-
-### Por que usarias um atributo `srcset` numa tag de imagem? Explica o processo que o navegador usa ao avaliar o conteúdo deste atributo.
-
-Tu usarias o atributo `srcset` quando quiseres exibir imagens diferentes para os utilizadores, dependendo da largura do ecrã do dispositivo - mostrar imagens de qualidade superior para dispositivos com display de retina aumenta a experiência do utilizador enquanto fornece imagens de baixa resolução para dispositivos de baixo custo aumentam o desempenho e diminuem o desperdício de dados (porque servir uma imagem maior não terá nenhuma diferença visível). Por exemplo: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` diz ao navegador para mostrar o pequeno, médio ou grande `.jpg` gráfico dependendo da resolução do cliente. O primeiro valor é o nome da imagem e o segundo é a largura da imagem em pixels. Para uma largura de dispositivo de 320px, os seguintes cálculos são feitos:
-
-* 500 / 320 = 1.5625
-* 1000 / 320 = 3.125
-* 2000 / 320 = 6.25
-
-Se a resolução do cliente for 1x, 1.5625 é o mais próximo, e `500w` corresponde a `small.jpg` será selecionado pelo navegador.
-
-Se a resolução for retina (2x), o navegador usará a resolução mais próxima acima do mínimo. O que significa que não escolherá o 500w (1.5625) porque é maior que 1 e a imagem pode parecer de má qualidade. O navegador escolheria então a imagem com uma razão resultante mais próxima de 2 que é 1000w (3.125).
-
-`srcset`s resolve o problema pelo qual tu queres servir arquivos de imagem menores para estreitar dispositivos de ecrã, pois eles não precisam de imagens enormes, como monitores de desktop - e também opcionalmente que tu queres servir imagens de resolução diferentes para ecrãs de alta densidade/baixa densidade.
-
-###### Referências
-
-* https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
-* https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
-
-[[↑] De volta ao topo](#html-questions)
-
-### Tu já usaste antes diferentes linguagens de modelos de HTML?
-
-Sim, Pug (anteriormente Jade), ERB, Slim, Handlebars, Jinja, Liquid, apenas para citar alguns. Na minha opinião, eles são mais ou menos o mesmo e oferecem funcionalidades semelhantes de conteúdo de escape e filtros úteis para manipular os dados a serem exibidos. A maioria dos modelos de modelos também permitirá que injetes teus próprios filtros no caso de precisares de processamento personalizado antes da exibição.
-
-[[↑] De volta ao topo](#html-questions)
-
-### Outras respostas
-
-* https://neal.codes/blog/front-end-interview-questions-html/
-* http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
-
----
diff --git a/Translations/Tagalog/CODE_OF_CONDUCT.md b/Translations/Tagalog/CODE_OF_CONDUCT.md
deleted file mode 100644
index 13483ded2c..0000000000
--- a/Translations/Tagalog/CODE_OF_CONDUCT.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Code of Conduct
-
-We have adopted the same Code of Conduct as Facebook that we expect project participants to adhere to. Please read [the full text](https://code.facebook.com/codeofconduct) so that you can understand what actions will and will not be tolerated.
diff --git a/Translations/Tagalog/CONTRIBUTING.MD b/Translations/Tagalog/CONTRIBUTING.MD
deleted file mode 100644
index 70cb443bdd..0000000000
--- a/Translations/Tagalog/CONTRIBUTING.MD
+++ /dev/null
@@ -1,7 +0,0 @@
-## Sa Pag-aambag
-
-Sa pag-aambag sa imbakang ito, kung ito ay isang di-maliit na pagbabago, pakiusap ay talakayin muna ang pagbabago na nais mong gawin Sa pamamagitan ng paggawa ng isyu sa imbakang ito.
-
-Hangga't maari, subukan na sundin ang umiiral na format ng markdown at code. Ang JavaScript na code ay dapat pagtibayan ng [Standard style](https://standardjs.com/).
-
-Paalala lang na meron tayong Code of Conduct, mangyaring sundin ito sa lahat ng iyong mga pakikipag-ugnayan sa proyekto.
diff --git a/Translations/Tagalog/README.md b/Translations/Tagalog/README.md
deleted file mode 100644
index 001b854281..0000000000
--- a/Translations/Tagalog/README.md
+++ /dev/null
@@ -1,47 +0,0 @@
-<h1 align="center">Manwal para sa pakikipanayam na pang front-end</h1>
-
-<div align="center">
-  <a href="https://dribbble.com/shots/4263961-Front-End-Interview-Scroll">
-    <img src="https://cdn.rawgit.com/yangshun/front-end-interview-handbook/23d89c8/assets/scroll.svg" alt="Front End Interview Handbook" width="400"/>
-    </a>
-  <br>
-  <p>
-    <em>Kredito: <a href="https://dribbble.com/shots/4263961-Front-End-Interview-Scroll">Ilustrasyon</a> ni <a href="https://dribbble.com/yangheng">@yangheng</a>
-    </em>
-  </p>
-</div>
-
-## Ano ito?
-
-Di kagaya sa mga tipikal na pakikipanayam na pantrabaho para sa mga inhinyerong pangsoftware, Ang mga pakikipanayam na pangfront-ent ay may mababang diin sa mga algoritmo at may maraming katanungan sa komplikadong kaalaman at kadalubhasaan tungkol sa domain — HTML, CSS, JavaScript, ilan lamang ito sa ibang mga lugar.
-
-Habang may mga ilang umiiral na mapagkukunan na makatutulong sa mga front-end na developer sa paghahanda para sa mga pakikipanayam, sila ay di sagana sa materyales kagaya ng pakikipagpanayam ng isang inhinyerong pangsoftware. Kabilang sa mga umiiral na mapagkukunan, marahil ang pinaka-kapakipakinabang na imbakan ng mga tanong ay ang [Mga Katanungan para sa Pakikipagpanayam ng Developer na Pangfront-end](https://github.com/h5bp/Front-end-Developer-Interview-Questions). Sa kasamaang palad, di ako makahanap ng kumpleto at kasiya-siyang mga kasagutan para sa mga katanungan dito online, kaya ito ang aking pagtatangka para sagutan ang mga ito. Bilang isang open source na imbakan, ang proyektong ito ay patuloy na mabubuhay sa tulong ng suporta ng komyunidad kasabay sa nagbabagong estado ng web
-
-## Ikaw ba ay naghahanap para sa paghahanda sa isang pangkalahatang pakikipanayam?
-
-Baka ikaw ay interesado sa [Manwal para sa Pakikipanayam na Pang-tech](https://github.com/yangshun/tech-interview-handbook) na may kapaki-pakinabang na nilalaman sa mga pangkalahatang panayam sa coding tulad ng mga algoritmo, Mga katanungan sa pag-uugali at isang [cheatsheet sa pakikipanayam](https://github.com/yangshun/tech-interview-handbook/blob/master/preparing/cheatsheet.md)!
-
-## Talaan ng mga Nilalaman
-
-1. [Mga Katanungang sa HTML](questions/html-questions.md)
-1. [Mga Katanungang sa CSS](questions/css-questions.md)
-1. [Mga Katanungan sa javascript](questions/javascript-questions.md)
-
-## Translations
-
-* [English](/README.md)
-* [Simplified Chinese (简体中文)](/Translations/Chinese/README.md)
-* [Tagalog](/Translations/Tagalog/README.md)
-* [Japanese (日本語)](/Translations/Japanese/README.md)
-
-**In Progress**
-
-* [Korean (한국어)](/Translations/Korean/README.md)
-
-## May Kaugnayan
-
-Kung ikaw ay interesado kung papaano pinpapatupad ang mga istraktura ng data, Maaari mong tingnan ang [Lago](https://github.com/yangshun/lago), isang librerya ng mga istraktura ng data at mga at algoritmo para sa JavaScript. Ito ay WIP parin pero balak kong gawing isang librerya na maaaring magamit sa produksyon at isang mapagkukunang sanggunian para sa mga pagbabago sa mga Istrakturang pang data at mga algoritmo.
-
-## Para sa pag-aambag
-
-Ikaw ay malayang gumawa ng mga pull request at itama ang mga mali sa mga kasagutan o magbigay ng suhestyon sa mga bagong katanungan.
diff --git a/assets/book.svg b/assets/book.svg
deleted file mode 100644
index fe07b462ea..0000000000
--- a/assets/book.svg
+++ /dev/null
@@ -1,43 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 582.39 458.49">
-  <defs>
-    <style>
-      .cls-1{fill:#eef2f5;}.cls-2{fill:#0ea511;}.cls-3{fill:#2cdd2f;}.cls-4{fill:#fff;}.cls-5{fill:#ffcb2c;}.cls-6{opacity:0.2;}.cls-7{fill:#363636;}.cls-8{opacity:0.1;}.cls-9{fill:#ffe400;}.cls-10{fill:#f16529;}.cls-11{fill:#33a9dc;}
-    </style>
-  </defs>
-  <g id="Layer_2" data-name="Layer 2">
-    <g id="Layer_1-2" data-name="Layer 1">
-      <ellipse class="cls-1" cx="291.19" cy="428.46" rx="291.19" ry="30.03"/>
-      <rect class="cls-2" x="197.89" y="168.35" width="346.05" height="180.28" rx="30" ry="30" transform="rotate(-90 370.92 258.49)"/>
-      <rect class="cls-3" x="189.19" y="168.35" width="346.05" height="180.28" rx="30" ry="30" transform="rotate(-90 362.22 258.49)"/>
-      <path class="cls-4" d="M257.71 419.94V97.04h152.1a28.18 28.18 0 0 1 28.18 28.18v266.54a28.18 28.18 0 0 1-28.18 28.18h-152.1z"/>
-      <path class="cls-2" d="M206.96 431.51v-346h151.11a29.17 29.17 0 0 1 29.17 29.08v287.75a29.17 29.17 0 0 1-29.17 29.17H206.96z"/>
-      <rect class="cls-3" x="80.86" y="136.46" width="346.05" height="244.06" rx="33.94" ry="33.94" transform="rotate(-90 253.89 258.49)"/>
-      <path class="cls-5" d="M131.87 397.57V119.41a33.94 33.94 0 0 1 33.94-33.94h5.06v346h-5.07a33.94 33.94 0 0 1-33.93-33.9z"/>
-      <g class="cls-6">
-        <circle cx="148.62" cy="375.73" r="11.84"/>
-        <circle cx="148.62" cy="329.54" r="11.84"/>
-        <circle cx="148.62" cy="283.35" r="11.84"/>
-        <circle cx="148.62" cy="237.16" r="11.84"/>
-        <circle cx="148.62" cy="190.96" r="11.84"/>
-        <circle cx="148.62" cy="144.77" r="11.84"/>
-      </g>
-      <rect class="cls-7" x="129.79" y="362.01" width="11.93" height="27.44" rx="4.5" ry="4.5" transform="rotate(-90 135.755 375.735)"/>
-      <rect class="cls-7" x="129.79" y="315.82" width="11.93" height="27.44" rx="4.5" ry="4.5" transform="rotate(-90 135.75 329.54)"/>
-      <rect class="cls-7" x="129.79" y="269.63" width="11.93" height="27.44" rx="4.5" ry="4.5" transform="rotate(-90 135.75 283.35)"/>
-      <rect class="cls-7" x="129.79" y="223.44" width="11.93" height="27.44" rx="4.5" ry="4.5" transform="rotate(-90 135.75 237.16)"/>
-      <rect class="cls-7" x="129.79" y="177.24" width="11.93" height="27.44" rx="4.5" ry="4.5" transform="rotate(-90 135.755 190.965)"/>
-      <rect class="cls-7" x="129.79" y="131.05" width="11.93" height="27.44" rx="4.5" ry="4.5" transform="rotate(-90 135.75 144.77)"/>
-      <path class="cls-8" d="M396.07 97.04h2.47v189.3h-2.47zM396.07 330.16h2.47v90.57h-2.47zM411.51 222.19h2.47v197.75h-2.47zM427.57 232.87h-2.47V101.54l2.47 1.79v129.54zM425.1 291.58h2.47v45.59h-2.47zM411.51 128.58h2.47v45.59h-2.47z"/>
-      <path class="cls-4" d="M237.95 271a5 5 0 0 1-3.54-1.46L211.9 247a5 5 0 0 1 0-7.07l22.51-22.51a5 5 0 0 1 7.07 7.07l-19 19 19 19a5 5 0 0 1-3.54 8.54zM302.77 271a5 5 0 0 1-3.54-8.54l19-19-19-19a5 5 0 0 1 7.07-7.07l22.51 22.51a5 5 0 0 1 0 7.07l-22.51 22.51a5 5 0 0 1-3.53 1.52zM261.19 285.87a5 5 0 0 1-4.84-6.27l19.72-74.85a5 5 0 1 1 9.67 2.55L266 282.14a5 5 0 0 1-4.81 3.73z"/>
-      <path class="cls-9" d="M92.72 186.5l5 13.1A2.32 2.32 0 0 0 99 201l13.1 5a2.32 2.32 0 0 1 0 4.34l-13.1 5a2.32 2.32 0 0 0-1.35 1.35l-5 13.1a2.32 2.32 0 0 1-4.34 0l-5-13.1a2.32 2.32 0 0 0-1.35-1.35l-13.1-5a2.32 2.32 0 0 1 0-4.34l13.1-5a2.32 2.32 0 0 0 1.35-1.35l5-13.1a2.32 2.32 0 0 1 4.41-.05zM479.08 265.89l5.38 14.22a2.52 2.52 0 0 0 1.47 1.47l14.22 5.42a2.52 2.52 0 0 1 0 4.72l-14.22 5.38a2.52 2.52 0 0 0-1.47 1.47l-5.38 14.22a2.52 2.52 0 0 1-4.72 0L469 298.52a2.52 2.52 0 0 0-1.47-1.47l-14.22-5.38a2.52 2.52 0 0 1 0-4.72l14.22-5.38a2.52 2.52 0 0 0 1.47-1.47l5.38-14.22a2.52 2.52 0 0 1 4.7.01zM258.14 18l5.67 15a2.66 2.66 0 0 0 1.55 1.55l15 5.67a2.66 2.66 0 0 1 0 5l-15 5.67a2.66 2.66 0 0 0-1.55 1.55l-5.67 15a2.66 2.66 0 0 1-5 0l-5.67-15a2.66 2.66 0 0 0-1.55-1.55l-15-5.67a2.66 2.66 0 0 1 0-5l15-5.67a2.66 2.66 0 0 0 1.55-1.55l5.67-15a2.66 2.66 0 0 1 5 0zM208.45 362.87l5.67 15a2.66 2.66 0 0 0 1.55 1.55l15 5.67a2.66 2.66 0 0 1 0 5l-15 5.67a2.66 2.66 0 0 0-1.55 1.55l-5.67 15a2.66 2.66 0 0 1-5 0l-5.67-15a2.66 2.66 0 0 0-1.55-1.55l-15-5.67a2.66 2.66 0 0 1 0-5l15-5.67a2.66 2.66 0 0 0 1.55-1.55l5.67-15a2.66 2.66 0 0 1 5 0z"/>
-      <rect class="cls-10" x="480.14" y="173.05" width="90.16" height="59.5" rx="11.44" ry="11.44" transform="rotate(30.42 525.27 202.83)"/>
-      <path class="cls-10" d="M505.53 242.61a4.27 4.27 0 0 1-5.83-3.43l-1.49-11.87-1.1-8.77a4.27 4.27 0 0 1 6.4-4.21l10.94 6.42 10.94 6.42a4.27 4.27 0 0 1-.56 7.64l-8.19 3.31z"/>
-      <circle class="cls-4" cx="507.01" cy="194.63" r="5.78" transform="rotate(-59.76 507.024 194.63)"/>
-      <circle class="cls-4" cx="524.1" cy="204.6" r="5.78" transform="rotate(-59.76 524.112 204.598)"/>
-      <circle class="cls-4" cx="541.31" cy="214.63" r="5.78" transform="rotate(-59.76 541.326 214.627)"/>
-      <rect class="cls-11" x="69.02" y="11.6" width="86.2" height="56.89" rx="10.94" ry="10.94" transform="rotate(-24.07 112.12 40.037)"/>
-      <path class="cls-11" d="M132.16 77.47a4.08 4.08 0 0 1-5.9 2.64l-10.06-5.43-7.43-4a4.08 4.08 0 0 1 .27-7.32l11.07-4.95 11.07-4.95a4.08 4.08 0 0 1 5.63 4.68l-2 8.21z"/>
-      <path class="cls-4" d="M115.94 53.34l-17.08-5.28 2.41-7.83 9.67 2.99 7.81-21.18 7.68 2.84-10.49 28.46z"/>
-    </g>
-  </g>
-</svg>
diff --git a/assets/coding.svg b/assets/coding.svg
new file mode 100644
index 0000000000..71d08a96f0
--- /dev/null
+++ b/assets/coding.svg
@@ -0,0 +1 @@
+<svg id="e189b3b9-b88e-4ad6-86fc-a3cf637fca9f" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1082.43901" height="449.88124" viewBox="0 0 1082.43901 449.88124"><title>code_thinking</title><polygon points="77.591 390.495 52.772 388.84 61.045 426.069 89.173 414.487 77.591 390.495" fill="#ffb9b9"/><polygon points="305.1 321.001 247.189 264.744 214.096 290.391 148.739 368.985 156.185 380.567 235.606 326.792 289.381 397.113 340.674 371.467 305.1 321.001" fill="#2f2e41"/><polygon points="305.1 321.001 247.189 264.744 214.096 290.391 148.739 368.985 156.185 380.567 235.606 326.792 289.381 397.113 340.674 371.467 305.1 321.001" opacity="0.1"/><path d="M368.84451,583.28933l-7.44576,5.79115-60.39337-20.68267-14.06421-5.79114-28.12842,5.79114s0-23.16458,26.47381-22.33727l27.30111,6.61845,32.265,2.48192Z" transform="translate(-58.78049 -225.05938)" fill="#ffb9b9"/><polygon points="363.839 419.451 345.638 431.033 324.128 431.033 224.024 393.804 77.591 420.278 73.454 388.84 207.478 330.102 324.956 368.985 363.839 419.451" fill="#2f2e41"/><path d="M305.14191,497.24946l-12.4096,2.48191-2.70423-3.15494a16.71669,16.71669,0,0,1-2.25961-18.355h0l34.74687-45.50186s9.92768-22.33728,25.6465-13.23691-13.2369,23.99189-13.2369,23.99189l-17.37344,27.30112,1.65461,14.06421Z" transform="translate(-58.78049 -225.05938)" fill="#ffb9b9"/><circle cx="324.95554" cy="186.1502" r="32.26495" fill="#ffb9b9"/><path d="M369.25817,434.78781,384.14968,470.362l35.57418-14.89151s-11.58229-28.12842-11.58229-28.95573S369.25817,434.78781,369.25817,434.78781Z" transform="translate(-58.78049 -225.05938)" fill="#ffb9b9"/><path d="M467.21951,540.02944a185.3827,185.3827,0,0,1-9.09209,57.34061l-2.41572,7.42925-11.5823,52.94762-12.40959,3.30922-9.10037-11.58229L404.41869,636.237l-13.2369-21.51-11.35062-18.91222-3.5409-5.907-12.4096-62.048L316.7242,501.386l-15.71882-2.48192,3.30923-9.10037,14.06421-19.02805L332.443,469.121l4.13653-3.30922,3.30923,1.65461,13.2369-7.44576,4.13653,1.65462,24.19044,2.25025,14.693-3.07756L417.275,449.50558l8.65364,1.41471,29.783,24.8192A185.22006,185.22006,0,0,1,467.21951,540.02944Z" transform="translate(-58.78049 -225.05938)" fill="#575a89"/><path d="M119.17072,628.36472s7.40995-12.55867,4.28015-14.02487-16.42157-7.31125-16.42157-7.31125l-19.49215-6.45971s-28.126-41.801-28.74337-5.45025,20.47916,45.08869,20.47916,45.08869S98.0885,680.7,108.74669,674.243,130.07,645.86717,130.07,645.86717,110.85,635.53508,119.17072,628.36472Z" transform="translate(-58.78049 -225.05938)" fill="#2f2e41"/><polygon points="399.413 307.764 367.975 328.447 321.051 370.755 317.51 364.848 307.582 315.21 310.064 315.21 335.711 268.054 399.413 307.764" opacity="0.1"/><polygon points="335.711 263.09 310.064 310.246 300.964 310.246 295.173 326.792 281.936 330.102 317.51 368.985 367.975 323.483 399.413 302.8 335.711 263.09" fill="#575a89"/><path d="M358.64047,387.21919l-3.49581,1.345a4.88017,4.88017,0,0,1-1.24759-6.86l-6.4602-.30231a48.78211,48.78211,0,0,1,72.82519-5.86988c.29412-1.013,3.50037.95787,4.80938,2.95626.43984-1.64837,3.4461,6.31994,4.5094,11.95247.49227-1.8754,2.385,1.15218.72681,4.05727,1.05066-.15351,1.52525,2.53462.71189,4.0322,1.1494-.54.95568,2.66884-.29057,4.81326,1.64017-.14573-12.93544,22.47575-18.83687,35.696-1.71358-7.87343-3.64027-16.1643-9.16573-22.02916-.93919-.99689-1.96768-1.90488-2.9945-2.81126l-5.55369-4.90228c-6.4579-5.70042-12.33246-12.7359-20.93549-14.8664-5.91224-1.46413-9.65052-1.7947-6.42852-8.45681-2.911,1.21478-5.6294,3.02129-8.5665,4.14957C358.28712,389.19225,358.69761,388.15058,358.64047,387.21919Z" transform="translate(-58.78049 -225.05938)" fill="#2f2e41"/><circle cx="341.08801" cy="189.87308" r="5.79115" fill="#ffb9b9"/><rect x="178.43901" y="59.71015" width="28" height="28" fill="#ffb322"/><path d="M282.21951,296.76953h-34v-34h34Zm-32.52174-1.47826h31.04348V264.24779H249.69777Z" transform="translate(-58.78049 -225.05938)" fill="#3f3d56"/><rect x="108.80838" y="374.61657" width="28" height="28" transform="translate(403.98758 -61.23638) rotate(74.06317)" fill="#ffb322"/><path d="M133.24341,417.87594l-9.33563-32.69321,32.69321-9.33564,9.33563,32.69321Zm-7.50829-31.67767,8.52384,29.85032,29.85032-8.52383-8.52384-29.85033Z" transform="translate(-58.78049 -225.05938)" fill="#3f3d56"/><rect x="118.48664" y="239.04858" width="28" height="28" transform="translate(349.04671 103.9752) rotate(133.06281)" fill="#ffb322"/><path d="M112.78106,277.063l23.21519-24.8406,24.84059,23.21519-23.21518,24.84059Zm23.28586-22.75121-21.19647,22.68054L137.551,298.18876l21.19647-22.68054Z" transform="translate(-58.78049 -225.05938)" fill="#3f3d56"/><path d="M1085.0123,230.4217H824.8427v-5.36232h-117.971v5.36232H445.62961a17.5985,17.5985,0,0,0-17.59851,17.59851V604.2724A17.59855,17.59855,0,0,0,445.62961,621.871H1085.0123a17.59855,17.59855,0,0,0,17.59851-17.59857V248.02021A17.5985,17.5985,0,0,0,1085.0123,230.4217Z" transform="translate(-58.78049 -225.05938)" fill="#3f3d56"/><rect x="392.84481" y="36.46377" width="627.3913" height="353.91304" fill="#ffb322"/><circle cx="706.00423" cy="20.37681" r="6.43478" fill="#ffb322"/><polygon points="840.813 390.377 392.845 390.377 392.845 36.464 840.813 390.377" opacity="0.1"/><circle cx="491.01276" cy="303.58656" r="60.3068" fill="#f2f2f2"/><path d="M563.21822,573.97237A75.01578,75.01578,0,1,1,638.234,498.9566,75.10088,75.10088,0,0,1,563.21822,573.97237Zm0-149.05095A74.03518,74.03518,0,1,0,637.2534,498.9566,74.119,74.119,0,0,0,563.21822,424.92142Z" transform="translate(-58.78049 -225.05938)" fill="#3f3d56"/><rect x="852.39173" y="227.33189" width="58.6052" height="12.24586" fill="#3f3d56"/><rect x="781.54067" y="131.9891" width="200.30733" height="5.24823" fill="#3f3d56"/><rect x="781.54067" y="148.60849" width="200.30733" height="5.24823" fill="#3f3d56"/><rect x="781.54067" y="165.22788" width="200.30733" height="5.24823" fill="#3f3d56"/><rect x="781.54067" y="181.84726" width="200.30733" height="5.24823" fill="#3f3d56"/><rect x="781.54067" y="198.46665" width="200.30733" height="5.24823" fill="#3f3d56"/><rect x="957.35627" y="43.64395" width="24.49173" height="24.49173" fill="#f2f2f2"/><path d="M1051.99965,304.56621h-29.74v-29.74h29.74Zm-28.44691-1.293h27.15387V276.1193h-27.15387Z" transform="translate(-58.78049 -225.05938)" fill="#3f3d56"/><path d="M1120.2266,609.00139h-61.22932v-4.41153a.87467.87467,0,0,0-.8747-.87471h-20.99291a.87468.87468,0,0,0-.8747.87471v4.41153H1023.1344v-4.41153a.87468.87468,0,0,0-.8747-.87471h-20.99291a.87468.87468,0,0,0-.87471.87471v4.41153H987.27152v-4.41153a.87468.87468,0,0,0-.87471-.87471H965.4039a.87468.87468,0,0,0-.8747.87471v4.41153H951.40863v-4.41153a.87468.87468,0,0,0-.8747-.87471H929.541a.87467.87467,0,0,0-.8747.87471v4.41153H915.54575v-4.41153a.87468.87468,0,0,0-.87471-.87471h-20.9929a.87468.87468,0,0,0-.87471.87471v4.41153H879.68286v-4.41153a.87468.87468,0,0,0-.8747-.87471H857.81525a.87468.87468,0,0,0-.8747.87471v4.41153H843.82v-4.41153a.87468.87468,0,0,0-.8747-.87471H678.50083a.87468.87468,0,0,0-.8747.87471v4.41153H664.50556v-4.41153a.87468.87468,0,0,0-.87471-.87471H642.638a.87468.87468,0,0,0-.87471.87471v4.41153H628.64267v-4.41153a.87467.87467,0,0,0-.8747-.87471H606.77506a.87468.87468,0,0,0-.8747.87471v4.41153H592.77979v-4.41153a.87468.87468,0,0,0-.8747-.87471H570.91218a.87468.87468,0,0,0-.87471.87471v4.41153H556.91691v-4.41153a.87468.87468,0,0,0-.87471-.87471H535.04929a.87468.87468,0,0,0-.8747.87471v4.41153H521.054v-4.41153a.87468.87468,0,0,0-.8747-.87471H499.18641a.87467.87467,0,0,0-.8747.87471v4.41153H485.19114v-4.41153a.87468.87468,0,0,0-.87471-.87471h-20.9929a.87468.87468,0,0,0-.87471.87471v4.41153H422.21241a20.99292,20.99292,0,0,0-20.9929,20.99291v9.4925a20.99291,20.99291,0,0,0,20.9929,20.99285H1120.2266a20.99292,20.99292,0,0,0,20.99291-20.99285v-9.4925A20.99293,20.99293,0,0,0,1120.2266,609.00139Z" transform="translate(-58.78049 -225.05938)" fill="#3f3d56"/></svg>
diff --git a/assets/mark-brand-light.png b/assets/mark-brand-light.png
new file mode 100644
index 0000000000..89f3d4afcf
Binary files /dev/null and b/assets/mark-brand-light.png differ
diff --git a/assets/start-practicing-button.jpg b/assets/start-practicing-button.jpg
new file mode 100644
index 0000000000..011214c61b
Binary files /dev/null and b/assets/start-practicing-button.jpg differ
diff --git a/assets/start-reading-button.jpg b/assets/start-reading-button.jpg
new file mode 100644
index 0000000000..caa2be3516
Binary files /dev/null and b/assets/start-reading-button.jpg differ
diff --git a/contents/algorithms.md b/contents/algorithms.md
new file mode 100644
index 0000000000..fa671cd4fe
--- /dev/null
+++ b/contents/algorithms.md
@@ -0,0 +1,54 @@
+---
+title: Algorithms Interview Questions (Machine Coding) in Front End Interviews
+slug: coding/algorithms
+sidebar_label: Algorithms coding
+description: Master algorithms for front end developers. Practice data structures, tree traversals & JavaScript coding problems with free resources and expert guidance.
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Front End Interview Playbook](https://www.greatfrontend.com/front-end-interview-playbook/algorithms?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+Front End Engineers are also Software Engineers after all, and it's expected that Front End Engineers have basic competency in algorithms and data structures. It is reasonable and possible that you will be asked to solve algorithmic questions during your front end interviews.
+
+That said, companies tend to go easy on Front End Engineer candidates when it comes to algorithms questions; you most likely won't get very tough or obscure algorithm problems.
+
+Other than the common data structures like arrays, sets, and maps, trees are a commonly-encountered data structure in front end development because the DOM is a tree, so if you have to prioritize, definitely focus on being good at tree data structures and common traversal algorithms for trees, such as breadth-first search, depth-first search, and level-first traversal.
+
+The [Tech Interview Handbook](https://www.techinterviewhandbook.org/algorithms/study-cheatsheet/) goes into great detail about preparing for Algorithms questions.
+
+<a className="button button--primary" href="https://www.techinterviewhandbook.org/algorithms/study-cheatsheet/">Go to Tech Interview Handbook &nbsp;→</a>
+
+## Free practice questions
+
+### GreatFrontEnd
+
+[GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) provides **free** questions for you to practice implementing [Data Structures and Algorithms](https://www.greatfrontend.com/questions/formats/algo-coding?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) in JavaScript/TypeScript. You can practice implementing common data structures (e.g. [Stacks](https://www.greatfrontend.com/questions/algo/stack?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), [Queues](https://www.greatfrontend.com/questions/algo/queue?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)) and algorithms (e.g. [Binary Search](https://www.greatfrontend.com/questions/algo/binary-search?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), [Merge Sort](https://www.greatfrontend.com/questions/algo/merge-sort?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)).
+
+[**Check out GreatFrontEnd**](https://www.greatfrontend.com/questions/javascript-dsa-interview-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
+
+## Algorithm courses
+
+### [AlgoMonster](https://shareasale.com/r.cfm?b=1873647&u=3114753&m=114505&urllink=&afftrack=)
+
+AlgoMonster aims to help you ace the technical interview **in the shortest time possible**. By Google engineers, AlgoMonster uses a data-driven approach to teach you the most useful key question patterns and has contents to help you quickly revise basic data structures and algorithms. Best of all, AlgoMonster is not subscription-based - pay a one-time fee and get **lifetime access**.
+
+[**Check out AlgoMonster**](https://shareasale.com/r.cfm?b=1873647&u=3114753&m=114505&urllink=&afftrack=)
+
+### [Grokking the Coding Interview: Patterns for Coding Questions](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-coding-interview)
+
+This course by Design Gurus expands upon the questions on the recommended practice questions but approaches the practicing from a questions pattern perspective, which is an approach I also agree with for learning and have personally used to get better at coding interviews. The course allows you to practice selected questions in Java, Python, C++, JavaScript and also provides sample solutions in those languages. **Learn and understand patterns, not memorize answers!**
+
+[**Check out Grokking the Coding Interview**](https://designgurus.org/link/kJSIoU?url=https%3A%2F%2Fdesigngurus.org%2Fcourse%3Fcourseid%3Dgrokking-the-coding-interview)
+
+## JavaScript courses
+
+If you want more structured algorithms practice which are targeted at JavaScript, check out the following courses.
+
+| Course | Platform | Reviews | Duration | Price | Contents |
+| :-- | --- | --- | --- | --- | --- |
+| [Ace the JavaScript Coding Interview](https://www.educative.io/path/ace-javascript-coding-interview?aff=x23W) | Educative | - | 87h | $ | Basic data structures and algorithms, system design, object-oriented design |
+| [Master the Coding Interview: Data Structures + Algorithms](https://www.udemy.com/course/master-the-coding-interview-data-structures-algorithms) | Udemy | 4.6/5 | 19.5h | $$ | Basic data structures and algorithms, job application, behavioral interview, negotiation |
+| [JavaScript Data Structures and Algorithms Masterclass](https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass) | Udemy | 4.5/5 | 45h | $ | Basic and advanced data structures and algorithms |
diff --git a/contents/behavioral.md b/contents/behavioral.md
new file mode 100644
index 0000000000..c4d713da45
--- /dev/null
+++ b/contents/behavioral.md
@@ -0,0 +1,34 @@
+---
+title: Behavorial Interviews
+sidebar_label: Behavorial interviews
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Behavioral Interview Playbook for Front End Engineers](https://www.greatfrontend.com/behavioral-interview-playbook/introduction?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+Behavioral interview rounds focus on a candidate's soft skills - how they work with others, how they handled situations in the past where they have demonstrated collaboration, communication, conflict resolution, and mentoring skills.
+
+Behavioral interviews are often overlooked and underestimated but I've seen candidates get rejected for failing the behavioral round even though they did very well on the coding and system design interviews. Clearing the behavioral interviews is especially important for candidates targeting senior level and above.
+
+For comprehensive behavioral interview content, [Tech Interview Handbook](https://www.techinterviewhandbook.org/behavioral-interview/) covers that along with common behavioral interview questions from the top companies.
+
+<a className="button button--primary" href="https://www.techinterviewhandbook.org/behavioral-interview/">Go to Tech Interview Handbook &nbsp;→</a>
+
+## What Meta looks for in behavioral interviews
+
+- Discuss anything that's on your resume, including current projects and details
+- Provide specific examples about what you did and the resulting impact
+- Critique yourself and share what you learned from a past situation
+- Talk about what you like about your current role and/or being a developer
+- Discuss why you'd like to make a change
+
+_Source: [Preparing for your Onsite Interview at Facebook](https://www.facebook.com/careers/swe-prep-onsite)_
+
+Check out [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) for its free [Behavioral Interview Playbook](https://www.greatfrontend.com/behavioral-interview-playbook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) to learn how to approach behavioral interviews as a front end engineer. Find out about evaluation criteria at big tech, efficient strategies to prepare, and top behavioral interview questions.
+
+## Courses
+
+I really don't think one needs to attend a course on behavioral interviews, but your mileage may vary. If you want to take a course on behavioral interviews, you can check out Educative's [Grokking the Behavioral Interview](https://www.educative.io/courses/grokking-the-behavioral-interview?aff=x23W) course.
diff --git a/contents/build-front-end-user-interfaces.md b/contents/build-front-end-user-interfaces.md
new file mode 100644
index 0000000000..3c4d8fb98a
--- /dev/null
+++ b/contents/build-front-end-user-interfaces.md
@@ -0,0 +1,119 @@
+---
+title: User Interface Interview Questions (Machine Coding) in Front End Interviews
+slug: coding/build-front-end-user-interfaces
+sidebar_label: User interface coding
+description: Master coded UI interview questions with 200+ practice problems. Learn components, widgets, apps & games with React, Vue, Angular solutions on GreatFrontEnd
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Front End Interview Playbook](https://www.greatfrontend.com/front-end-interview-playbook/user-interface?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+Many Front End Engineers spend a lot of time building UI, and building a UI component is a good way to assess someone's familiarity in the three biggest aspects of front end — HTML, JavaScript, CSS.
+
+Companies that ask such questions usually ask candidates to code in one of these three ways:
+
+- **Online editor with preview**: You get to write HTML, CSS, JavaScript within the browser and see an instant preview of the page. Common platforms used include [CodePen](https://codepen.io) and [CodeSandbox](https://codesandbox.io/dashboard).
+- **Online editor without preview**: Similar to the above, but you don't get to see any visual output of the page. A common platform for this is [CoderPad](https://coderpad.io/). In the past, Google used Google Docs 😱.
+- **BYOE (Bring Your Own Environment)**: Candidates bring their own development environment/laptop and free to choose whether they want to do local development using their own editors or use online environments like CodePen or CodeSandbox. This is the most ideal scenario that benefits candidates, but is usually only done during on-sites. You can usually use a JavaScript framework/library and in that case you are recommended to use tools that help you scaffold a fresh app where you can start coding immediately (e.g. `create-react-app`, `vue-cli`). You don't want to be spending time during the interview doing unnecessary plumbing that doesn't give your interviewers additional useful signals.
+- **Whiteboard**: Candidates have to write all the required HTML, JS, CSS on the whiteboard. There's no preview, no autocomplete, no online documentation to help you; you're totally on your own. So far Facebook and Google are the only companies that are known to make candidates write code on a physical whiteboard during onsite front end interviews.
+
+## Where to practice
+
+<div class="video-container">
+    <video class='gfe-webm' autoPlay muted loop>
+        <source src="/gfe-features.webm" type="video/webm" />
+    </video>
+</div>
+
+These questions and many others are available on [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook). Apart from a [huge question bank of coding questions](https://www.greatfrontend.com/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) that you can filter by frameworks, languages, and topics, each question also comes with detailed test cases and an official solution authored by ex-FAANG senior engineers.
+
+Here are some questions you can start with:
+
+- Components
+  - [Tabs](https://www.greatfrontend.com/questions/user-interface/tabs?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+  - [Modal Dialog](https://www.greatfrontend.com/questions/user-interface/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+  - [Image Carousel](https://www.greatfrontend.com/questions/user-interface/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+  - [Accordion](https://www.greatfrontend.com/questions/user-interface/accordion?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+  - [Star Rating](https://www.greatfrontend.com/questions/user-interface/star-rating?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+  - [Progress Bars](https://www.greatfrontend.com/questions/user-interface/progress-bars?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+  - Refer to [Bootstrap's list](https://getbootstrap.com/docs/5.3/components/) for other possible components
+- Widgets
+  - [Traffic Light](https://www.greatfrontend.com/questions/user-interface/traffic-light?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+  - [Digital Clock](https://www.greatfrontend.com/questions/user-interface/digital-clock?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+  - [Stopwatch](https://www.greatfrontend.com/questions/user-interface/stopwatch?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+  - [Transfer List](https://www.greatfrontend.com/questions/user-interface/transfer-list?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- Apps
+  - [Todo list](https://www.greatfrontend.com/questions/user-interface/todo-list?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+  - [Data Table (with extensions for sorting and filtering)](https://www.greatfrontend.com/questions/user-interface/data-table?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+  - [File Explorer](https://www.greatfrontend.com/questions/user-interface/file-explorer?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+  - Kanban Board
+- Games
+  - [Tic-tac-toe](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
+  - [Whack-a-mole](https://www.greatfrontend.com/questions/user-interface/whack-a-mole?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
+  - [Wordle](https://www.greatfrontend.com/questions/user-interface/wordle?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
+  - Tetris (advanced)
+  - Snake (advanced)
+
+## Where to practice
+
+Each of these questions and over 200+ more can be found on [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
+  - Each question comes with official solutions in popular frameworks such as React, Angular, Svelte and Vue
+  - With live previews, you can practice online directly, simulating a real interview environment with no set-up required
+
+[Start practicing immediately](https://www.greatfrontend.com/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
+
+## Considerations
+
+After you complete (or even before you start on) the question, think about these potential issues (where relevant). You may or may not have to handle them, so you can always clarify with the interviewer before starting on it so that you don't write too much/little code.
+
+### Front end best practices
+
+- Avoid writing global variables. Wrap your code within an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) and don't pollute the global scope.
+- What if you need to have multiple instances of this components on the page?
+  - Does your code enable you to do this?
+  - Did you use any global variables that will make it hard for you to do so?
+  - Will having multiple components on the same page affect each other? They should be independent!
+- Do you have a convenient API to instantiate independent components with configurable options? Old school jQuery UI components are good examples of doing this in a pre-React era.
+
+### Performance and scalability
+
+Does your component scale (latency, performance, UI, UX, etc)?
+
+- What if the network takes too long to return something? How do you test slow network speed? Hint: Chrome Devtools Network tab.
+- What if a string is too long? Hint: CSS `word-break` property.
+- What if an image is too large?
+- Can the component contain any amount of child items? Example: Support flexible amount of thumbnails in a photo gallery component or items in a tab navigation component.
+- Will the layout be messed up if you have too few or too many of these items?
+  - What if there are too many items? Hint: set max height or paginate.
+  - What if there are no items, what do you show? Hint: show an empty state to indicate absence of contents. Do not show nothing.
+- How will performance be affected if you have too many elements on the page? How do you solve it? Hint: [Virtual list](https://medium.com/outsystems-engineering/virtualizing-the-virtual-dom-pushing-react-further-d76a16e5f209)
+- Did you hard code any values that will make it hard to extend to changing requirements in future? Did you design for extensibility?
+
+### Network requests
+
+- Does the component deal with race conditions in network/async requests? E.g. a new network request is fired before the response for the previous request is returned.
+- What if the request timeout or errored out? How can you recover from it gracefully?
+- How can you improve the performance of the component? Can you make use of caching, lazy loading, prefetching/preloading?
+- What if you need to load a lot of data/images? Can you lazily load them? Can you fetch the data in batches to reduce spamming the API endpoint?
+
+### User experience
+
+- Is the component mobile-friendly? Can the component fit on different screen widths? How do you make it mobile-friendly?
+- Is the component easily i18n-able? How can you change the design to cater for i18n? Does your component support RTL languages?
+- Are there any potential UX/accessibility (a11y) issues with your components?
+- What are some common accessibility techniques and gotchas?
+  - https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67
+- What tools can you use to check for accessibility?
+- If you are unfamiliar with a11y, there's probably isn't much time for you to be an expert in a11y. The very least you can do is to acknowledge a knowledge gap in a11y and try to factor a11y into your answers. You should be at least aware of basic a11y practices like text size, color contrast, focusable elements, tab focus order, `aria-label`s. Knowledge of a11y is one of the differentiating factors between junior vs senior engineers.
+
+### Security
+
+- XSS vulnerability. Interviewers are especially looking out for this whenever you need to render user input. You almost never need to use `.innerHTML` or jQuery's `$.html()`. There's `.textContent` and `$.text()`. If you do have to render raw HTML, make sure you escape the contents first.
+- User input that is being displayed in the URL has to be encoded first as well, or else there's also a potential for mischief where users can add additional query parameters.
+
+### Closing
+
+Lastly, mention how you would do things differently if you had more time and were writing production code that you need to maintain. Perhaps use Sass instead of CSS, use React instead of jQuery for better maintainability, use Babel to compile your code for older browsers, make the component mobile-friendly and test on different screen widths, add keyboard shortcuts, etc.
diff --git a/contents/companies/adobe-front-end-interview-questions.md b/contents/companies/adobe-front-end-interview-questions.md
new file mode 100644
index 0000000000..36efdc324f
--- /dev/null
+++ b/contents/companies/adobe-front-end-interview-questions.md
@@ -0,0 +1,35 @@
+---
+title: Adobe Front End Interview Questions
+sidebar_label: Adobe interview questions
+description: Adobe Front End Interview Questions guide with real interview experiences, coding challenges, and insider tips for 2025.
+---
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Adobe.
+
+**19th Jun 2025**:
+
+> Attended Adobe system design, it was non frontend system design. I was asked to design LRU cache and design the classes and interfaces for a chess game. Also had the hiring manager round, was asked to implement the flood fill algorithm. i.e. there is a m\*n grid which has outlines of some shapes. If clicked inside any shape, then the shape should be flood filled. If clicked outside the shape, then the whole grid should be flood filled except the shapes.
+>
+> Had to implement the pseudo code only though.
+
+**16th Jun 2025**:
+
+> Attended Adobe interview. In the language and web fundamentals round, a question similar to https://www.geeksforgeeks.org/problems/leaders-in-an-array-1587115620/1 was asked.
+>
+> Another question that was asked was the following: You are given an API getAllLinks(url) which returns all the links on the page. You have to write a function to return all the descendant links (i.e. child urls of child urls and so on) of the url. Edge cases were built on top of this: what if there are circular dependencies between pages? What if getAllLinks returns a promise? How can the async code be more efficient? Time complexity?
+>
+> One thing to note was that I had to handrun the code as the test cases were not setup and the interviewer actually typed out the test cases instead of copy pasting.
+
+**26th Oct 2023**:
+
+> I had my Adobe onsite last week for FE mid-level role. It was following a HackerRank + quick QnA with HM
+>
+> It was five rounds each consisting of 30min tech and 10min behavior 5min QnA These were some technical questions asked
+>
+> LC medium - find total number of islands in a nested arr of 0 and 1 LC easy - covert Oct 1 23 to 10-01-23 UI - build an accordion using JS or react create polyfill of .reduce
+>
+> It was on the easier side but only for one headcount so I didn't get an offer
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/airbnb-front-end-interview-questions.md b/contents/companies/airbnb-front-end-interview-questions.md
new file mode 100644
index 0000000000..77b167e97d
--- /dev/null
+++ b/contents/companies/airbnb-front-end-interview-questions.md
@@ -0,0 +1,63 @@
+---
+title: Airbnb Front End Interview Questions
+sidebar_label: Airbnb interview questions
+description: Airbnb frontend interview questions covering JavaScript coding, UI development, system design, and LeetCode problems with real candidate experiences.
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Airbnb Front End Interview Guide](https://www.greatfrontend.com/interviews/company/airbnb/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+## JavaScript coding questions
+
+- Write a simple promise.
+- Implement a `StoreData` class that add key/value pairs and listen to value changes for keys. [Source](https://leetcode.com/discuss/post/348436/airbnb-phone-screen-implement-storedata-p3ypb/)
+
+## User interface coding questions
+
+- Given an input and an endpoint which returns a JSON list, as a result, extend it to autocomplete on change, handle key navigation through the results.
+  - [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- Given a star widget embedded in a form write the code to select the stars and submit the correct value through a normal form action. Make reusable for multiple star widgets.
+  - [Practice question](https://www.greatfrontend.com/questions/user-interface/star-rating?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+
+_Source: [Glassdoor Airbnb Front End Engineer Interview Questions](https://www.glassdoor.sg/Interview/Airbnb-Front-End-Engineer-Interview-Questions-EI_IE391850.0,6_KO7,25.htm)_
+
+## Algorithm
+
+Airbnb does have rounds evaluating your Computer Science fundamentals by asking LeetCode-style questions. Do be prepared for them.
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Airbnb.
+
+**21st Mar 2025**:
+
+> "Our frontend technical screens tend to be more practical than algorithmic".... proceeds to drop a LC hard question during the screen FML
+>
+> Not my first rejection but actually wanted to work at Airbnb for a long time now so this one just hurts a bit more. I actually learned a good amount using GreatFrontEnd to prepare so I definitely did improve.
+
+**12th Jul 2024**:
+
+> Just got done, it was okay. They asked Backbone.js, but the 2nd part was slightly different from GreatFrontEnd. Threw me off quite a bit. Got the right output, but took up the whole time. Let's see! Not feeling super confident based of the interviewer's demeanor
+>
+> It was add on listener, but the event names are change:foo, change:bar, (which is fine).
+>
+> There was additional on change which should be a global change listener that fires when any change is made
+>
+> And the kicker was that when you call unset, you need to keep the listeners (soft delete the data), so that when you set the attribute again, all the global listeners and the attribute listeners before unset are fired
+
+**19th Apr 2024**:
+
+> I had the airbnb onsite and thought I had done great on the FE architecture round just to hear from the recruiter the feedback was negative. I'm usually good at predicting the outcome of interviews but honestly this one puzzles me. Question was to design a chat, nothing fancy. Interviewer never showed signs of disagreement or even contested my design decisions. Recruiter won't share more details....
+
+**16th Apr 2024**:
+
+> Had my first technical round with Airbnb, did all Airbnb tagged problems on GreatFrontEnd except the Backbone Model one. Guess which one they gave me lol all good though, I managed to solve the problem with time to spare, I’m pretty sure I did enough to make it to the next round but it’s hard to tell in these times.
+
+**13th Mar 2024**:
+
+> Just got rejected from Airbnb. I do want to thank this forum / GreatFrontEnd for system design cause I got a strong yes from that on my system design. So the method works great. Unfortunately I didn’t do well on my experience interview out of all things lol. I laid out full technical details process, results, issues, but that’s not enough. Oh well. It was nice to try.
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/amazon-front-end-interview-questions.md b/contents/companies/amazon-front-end-interview-questions.md
new file mode 100644
index 0000000000..3f1d908602
--- /dev/null
+++ b/contents/companies/amazon-front-end-interview-questions.md
@@ -0,0 +1,311 @@
+---
+title: Amazon Front End Interview Questions
+sidebar_label: Amazon interview questions
+description: Complete Amazon front end developer interview guide with coding questions, system design, Leadership Principles, and insider tips from candidates.
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Amazon Front End Interview Guide](https://www.greatfrontend.com/interviews/company/amazon/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+Amazon's Front End interviews are known for their focus on technical depth and alignment with the company's Leadership Principles.
+
+## Understanding the Amazon Front End Interview Process
+
+The interview process typically involves several stages
+
+1.  **Online assessment (OA):** This is a timed assessment that typically includes:
+    - **Technical questions:** Often coding challenges (e.g., LeetCode-style problems, UI component building). **You are likely required to use Vanilla JavaScript**.
+    - **Systems design scenarios:** Questions about design considerations, potentially multiple-choice or short written answers.
+    - **Work style survey:** Questions related to Amazon's Leadership Principles.
+    - Common questions: [Accordion](https://www.greatfrontend.com/questions/user-interface/accordion?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), [Signup Form](https://www.greatfrontend.com/questions/user-interface/signup-form?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), [Data Table](https://www.greatfrontend.com/questions/user-interface/data-table?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), [Todo List](https://www.greatfrontend.com/questions/user-interface/todo-list?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
+2.  **Technical phone screen:** A 45-60 minute interview, usually with a hiring manager or a senior engineer. It's often split between:
+    - **Behavioral questions:** Based on Amazon's Leadership Principles.
+    - **Front end coding problems:** Whiteboard-style coding focusing on JavaScript, HTML, CSS, and DOM manipulation.
+3.  **Onsite interview (Loop):** This is the main interview day, consisting of 4-5 rounds, each lasting about 55-60 minutes. The interview loop typically assesses both technical and non-technical competencies based on Amazon's Leadership Principles. Rounds often cover:
+    - **Coding rounds:** More complex Data Structures & Algorithms (DSA) problems (medium to hard difficulty), often with a front end focus.
+    - **Front end fundamentals round:** Deep dive into JavaScript, HTML, CSS, DOM, browser APIs, event loop, accessibility, and performance. You might be asked to build a small UI component or debug code.
+    - **System design round (Front End Focused):** Designing scalable and performant front end systems (e.g., a photo gallery, a type-ahead search). This is crucial for mid-to-senior level roles.
+    - **Behavioral rounds / Leadership Principles:** Several rounds dedicated to assessing your past experiences against Amazon's 16 Leadership Principles. One interviewer will likely be a "Bar Raiser."
+
+## Key areas to focus on
+
+### Front end fundamentals
+
+Strong front end engineering fundamentals are essential. Be prepared for:
+
+- **HTML:** Semantic HTML, accessibility (ARIA attributes), HTML5 features.
+- **CSS:** Layout (Flexbox, Grid), Box Model, specificity, inheritance, responsive design, animations, performance optimization.
+- **JavaScript:**
+  - **Core concepts:** `this`, closures, prototypes, event loop, hoisting, `var`, `let`, `const`, scope.
+  - **ES6+ features:** Promises, async/await, arrow functions, destructuring, spread/rest operators, Maps, Sets.
+  - **DOM manipulation:** Efficiently interacting with the DOM, event handling, event delegation.
+  - **Browser APIs:** Local Storage, Session Storage, Web Workers, Geolocation, etc.
+  - **Performance:** Debouncing, throttling, virtual DOM (if discussing frameworks), critical rendering path.
+  - **Data structures & algorithms:** Be comfortable with common data structures (arrays, strings, linked lists, trees, graphs) and algorithms (sorting, searching) and be able to implement them efficiently in JavaScript.
+- **Web performance:** How to optimize page load times, rendering, and responsiveness.
+- **Accessibility (a11y):** Understanding WAI-ARIA, semantic HTML, keyboard navigation, and how to build inclusive web experiences.
+- **Security:** XSS, CSRF, CORS, secure coding practices for the front end.
+- **Front end frameworks (e.g., React, Angular, Vue.js):** While the focus is often on vanilla JavaScript for coding, be prepared to discuss component lifecycle, state management, and performance optimizations within your chosen framework.
+
+### System design
+
+This round assesses your ability to design scalable and performant front end applications. Be prepared to discuss:
+
+- **Scalability**: How your design handles increasing user load, data, and features.
+- **Modularity**: Breaking down a large application into smaller, manageable components.
+- **Performance**: Optimizing initial load, subsequent interactions, and data fetching.
+- **Reliability/Resilience**: Handling errors, network issues, and ensuring a stable user experience.
+- **Maintainability**: Writing clean, testable, and understandable code.
+- **Accessibility**: Integrating accessibility best practices into the design.
+- **Trade-offs**: Justifying your design choices and understanding the implications of different approaches (e.g., client-side vs. server-side rendering, specific data structures, caching strategies).
+
+### Behavioral Questions & Leadership Principles (LPs)
+
+Amazon heavily emphasizes its [16 Leadership Principles](https://www.amazon.jobs/content/en/our-workplace/leadership-principles). A significant portion of the interview will focus on how you've demonstrated these principles in past roles, as "past behavior is the best predictor of future success."
+
+**The STAR Method is crucial.** For every behavioral question, structure your answer using the STAR method:
+
+- **Situation**: Describe the context of the situation.
+- **Task**: Explain the task or challenge you faced.
+- **Action**: Detail the specific actions _you_ took to address the task.
+- **Result**: Describe the positive outcome of your actions, ideally with quantifiable metrics.
+
+**Key Leadership Principles to focus on (and have 2-3 strong STAR examples for each):**
+
+- Customer Obsession
+- Ownership
+- Invent and Simplify
+- Are Right, A Lot
+- Learn and Be Curious
+- Hire and Develop the Best
+- Insist on the Highest Standards
+- Think Big
+- Bias for Action
+- Frugality
+- Earn Trust
+- Dive Deep
+- Have Backbone; Disagree and Commit
+- Deliver Results
+- Strive to be Earth's Best Employer
+- Success and Scale Bring Broad Responsibility
+
+## Official guides
+
+For more detailed information directly from Amazon, refer to Amazon's official interview preparation guides for:
+
+- [Front End Engineers](/guides/amazon-front-end-guide.pdf)
+- [Front End Engineer Interview Prep](https://amazon.jobs/content/en/how-we-hire/fee-interview-prep)
+- [SDE Interview Prep](https://amazon.jobs/content/en/how-we-hire/sde-ii-interview-prep)
+
+_Source: [Glassdoor Amazon Front End Engineer Interview Questions](https://www.glassdoor.sg/Interview/Amazon-Front-End-Engineer-Interview-Questions-EI_IE6036.0,6_KO7,25.htm)_
+
+## Questions
+
+Questions sourced from the web and the [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) community.
+
+### Quiz questions
+
+- What is the CSS box model?
+  - [Read answer](https://www.greatfrontend.com/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?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- What is a JavaScript closure?
+  - [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- What happens when you type URL into a browser and hit enter?
+
+### JavaScript coding questions
+
+- Implement `Array.prototype` functions like `map`, `reduce`, `filter`, `sort`.
+  - [Practice questions](https://www.greatfrontend.com/questions/js/coding/utilities?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
+- Given an object and a filter function, write a function that recursively filters the object, returning only values which return `true` when called with the filter function (like `Array.prototype.filter` but for objects).
+- Implement a function `getElementsByStyle(property, value)` that returns all elements in the DOM that match that style.
+  - E.g. `getElementsByStyle("color", "#fff")` will return all elements in the DOM with white text.
+  - [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- Promisify a function.
+
+### User interface coding questions
+
+- Implement a data table from an array of objects using HTML/CSS and JavaScript with searching and sorting
+  - [Practice question](https://www.greatfrontend.com/questions/javascript/data-selection?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- Implement Material UI Chips with auto-suggest. When sending an e-mail, auto-suggest people and convert them into a chip with their avatar on the right
+- Implement a Like button ([Source](https://leetcode.com/discuss/post/1719943/amazon-phone-screen-fee-l5-like-button-b-0z2l/))
+  - [Practice question](https://www.greatfrontend.com/questions/user-interface/like-button?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- Given a JSON object generate a file directory UI
+  - [Practice question](https://www.greatfrontend.com/questions/user-interface/file-explorer?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- Code a paginated widget of addresses. Imagine you are a seller with a list of address you ship to an need to view them 5 address per page, with the possibility to go previous and next. [Source](<https://leetcode.com/discuss/post/1984996/amazon-virtual-onsite-april-2022-fronten-qiku/>)
+- Implement a search bar using HTML, CSS and JavaScript
+  - [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- Implement a star rating widget
+  - [Practice question](https://www.greatfrontend.com/questions/user-interface/star-rating?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- Implement tic-tac-toe
+  - [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- Recreate an adaptive layout with flexbox. Ensure accessibility
+- Implement a chess board with movable pieces
+- How do you render text on a banner image?
+- Render a directory tree given a nested JSON object
+
+### System design questions
+
+- Design a restaurant listing application where user can make orders and customize their orders by adding additional stuffs like toppings, salads etc. [Source](<https://leetcode.com/discuss/post/1984996/amazon-virtual-onsite-april-2022-fronten-qiku/>)
+- Design an accordion component.
+  - [Practice question](https://www.greatfrontend.com/questions/user-interface/accordion?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Amazon.
+
+**20th May 2025**:
+
+> The code editor for Amazon is like a plain editor (developed internally), where you just write your code (can’t execute code) and explain your completed code solution with some test cases. They will paste a single line of comment or if your interviewer is generous enough they will give more context to the problem. Mostly for FEE interviews they expect you to (that means they want you to) write Vanilla JS because internally Amazon uses multiple frameworks/libraries so to test the basics they mandate candidates to write in Vanilla JS and also, yes it cannot be executed. So you just write it as your interviewer likes it. Focus on the most common FEE Amazon questions from GreatFrontEnd, that list is enough, understand the problem, practice and then try to write it on a plain editor since there is no autocomplete or syntax highlighting. Also, once you’re confident in your practice, sit in front of your camera and explain the problem as if you’re in front of an interviewer.
+
+**5th May 2025**:
+
+> I wrapped up my 2 tech rounds with amazon for FE-2.
+>
+> Tech 1: Implement Infinite scroll with lots of followups. Like pagination, different device , network slowness. Error handling.
+>
+> Before implementing i discussed few things but not edge cases. In between there were many follow ups. I think i did okay okay in this rounds. Since I didn’t discussed much on edge cases. Then 1 simple array based DSA question.
+>
+> Tech 2: LLD
+>
+> Implement a component similar to autocomplete. This was easy as i just showed it using diagram and wrote code for the same.
+
+**30th May 2025**:
+
+> Amazon FEE II Interview
+>
+> OA: Vanilla,js
+>
+> - #1: Accordion by default allows one section to be open at a time. Theres a checkbox to switch behavior enabling multiple sections to expanded
+> - #2: Address book form validation (name, email, phone number) that appends valid entries to table below. Along with an input field that filters the table based on phone number.
+
+**13th Apr 2025**:
+
+> Well I bombed the front end code challenge with amazon and what makes it worse, it wasn't even hard. I got nervous and forgot how to write a json object, something I've done a million times in the last 15 years. It was simple, write a json object and parse through it recursively, having it mirror a file system. I think there's a file system traversal program in GreatFrontEnd which I've already solved.
+
+**17th Mar 2025**:
+
+> Went through 4 rounds excluding Screening. got ghosted after the 4th round.
+>
+> Screening:
+>
+> - `getElementsByStyle`
+> - Create a Chess Grid component of n x n cells, highlight a cell on click ( Unhighlight previously selected cells), focus on reusability, extensibility, optimisations
+>
+> Onsite:
+>
+> - R1 UI Coding: An image carousel component in vanilla js
+> - R2 DSA: Given a two caption strings and a similar words dict, find if the captions are same or not
+> - R3 HLD FE: Design a News website like Times of India, more focus on schema & api design and BE interation, Video rendering, showing Ads
+> - R4 HM: mostly LP questions
+
+**15th Mar 2025**:
+
+> hey all, I recently did an interview loop for Amazon (AWS) FEE L5! didn't get the job but sharing my experience here:
+>
+> 1. asteroid collision (leetcode)
+> 2. bike sharing system design (like citibike in nyc)
+> 3. find most common 3-page user sequence from traffic logs
+> 4. bar raiser
+> 5. tabs component (GreatFrontEnd)
+>
+> Each technical round had 2BQ in the beginning, and then the bar raiser round had like 8BQ?
+>
+> One thing to note was that recruiter explicitly told me I could code in react, but then during the interview they restricted it to only html/css/vanilla js... not a huge issue but did differ from what my recruiter told me 😵
+
+**5th Mar 2025**:
+
+> Hello everyone, I’m grateful for all the help from this group! I recently received an offer for a Frontend Engineer-1 position at Amazon and wanted to share my experience. I completed my MS in Dec 2024 and had been applying for general SDE and frontend roles without much success. I applied for a Frontend position in Amazon’s Early Grad Program on Jan 31, and here’s how it went:
+>
+> - Feb 3 – Received an online assessment with two JavaScript questions (an accordion and another DOM-based component) and a work-style test.
+> - Feb 7 – Completed the OA and was invited to schedule my phone screen.
+> - Feb 14 (Phone Screen) – First 30 mins: Behavioral questions (no follow-ups; use the STAR method with explicit metrics). Next 30 mins: Implement an image carousel (explain logic, write basic code, no need to run it). Passed and moved to the loop.
+> - Feb 21 (Loop Rounds) – I was lucky in a way because only two rounds were scheduled with a 1-hour gap in between, as they couldn't find an interviewer for the middle slo.
+>   - Round 1: Rotting Oranges DSA question + extensive behavioral follow-ups. My behavioral round didn’t go well, and I was a bit nervous afterward.
+>   - Round 2: Three behavioral questions + build a To-Do app with two easy follow-ups.
+> - Feb 26 (Final Round) – The interviewer was pretty chill and asked four behavioral questions. Since I had time between my initial two interviews and this one, I was able to prepare my behavioral responses well. For the technical part, I was given a verbose array-based DSA question, where I provided both the brute force and optimized solutions.
+> - Feb 28 – Received my offer! Hope this helps, and good luck to everyone interviewing.
+
+**17th Feb 2025**:
+
+> My experience for L5 FEE onsite:
+>
+> 1. Implement autocomplete component
+> 2. System design - mobile designing for playlist page
+> 3. Implement json.stringify (more weight on OOP angle here)
+> 4. Implement method to sanitize input data from nested Form UI.
+>
+> All questions were on plain text editor, no need to compile and run
+>
+> Behavior questions before every round to cover 2 LP, and a 5th interview just for LPs
+
+**25th Jan 2025**:
+
+> okay so i just did my phone screen with amazon: 1 LP about anticipating customer needs. Some JS trivia questions, looking at css to determine specificity. that was the first 30 min. coding was just a blank text editor: to implement an infinite scroller on addresses but i didnt really recognize it was a system design question until i was already in it.
+
+**2nd Nov 2024**:
+
+> Amazon FEE II Phone interview:
+>
+> LP: There were five questions, though I don’t remember all of them precisely. The questions is like ... going above and beyond for a customer, managing tight timelines, handling conflicts with a manager, and describing a project I’m most proud of.
+>
+> The interviewer mentioned that they asked several questions because I hadn’t initially provided enough detail in my responses 😦 .
+>
+> Coding Challenge: implementing a table similar to the Data Table in GreatFrontEnd, with three follow-ups:
+>
+> - Enable sorting functionality to activate when clicking on a column header.
+> - Add a search bar to filter by name.
+
+**30th Oct 2024**:
+
+> Completed my Amazon FEE-I loop a while ago. Waiting for a decision but here's how it went.
+>
+> LP questions - difficult customer, time when you were not satisfied with result. Didn't repeat any story but had very few of them because I'm a new grad. Make sure you have good amount of stories, try not to repeat.
+>
+> Technical questions - 2 implementations questions and 1 general/JS question, very similar to what others went through actually.
+>
+> My phone interview had an array question which was pretty simple but it took me sometime to get it.
+>
+> Like Button, File Explorer and print this object of objects in the form of a HTML tree. They all started with the most basic part, very barebones implementation required. If time remains, they ask you to add more stuff to it. If you go through GreatFrontEnd's questions you should be more than ready for it imo.
+
+**21st Sep 2024**:
+
+> Finished my Amazon FEE I/new grad/entry level interviews. Waiting to hear back right now, but this is what I experienced:
+>
+> (Caveat: my interview was for a specific team, unlike a lot of general SDE/SWE new grad interviews I've asked about where it wasn't team-specific. I'm not too sure if this equally extends to FEE normally, but that's just what ended up happening.)
+>
+> **Behavioral**: Topics mostly concentrated around the LPs of Customer Obsession, Learn and Be Curious, Ownership, and Earn Trust.
+>
+> - Got a repeat question in one of my rounds, so I repeated one of the stories I used earlier because I don't have enough experience to have another story for that specific question 🥲.
+>
+> **Technical**: Received 2 implementation questions: Like Button and File Explorer, and 1 general-ish JS question (given a form, create a function that has parses the values in the form inputs and returns the form data as an object with nested properties). The implementation questions were basically the same/easier than GreatFrontEnd's version. The JS question is a tad reminiscent of GreatFrontEnd's "get" question + knowing how to get form values. IMO I flubbed this from getting caught off-guard from how it was described, followed by my brain suddenly forgetting how to program because of the embarrassment/panic 🫠 Still, it was a very simple question overall that is probably fairly easy to solve.
+>
+> Additional Notes:
+>
+> - Coding was in plain text editor/coderpad-style
+> - Allowed to choose any framework for the implementation q'ns
+> - Roughly 20-25min for behavioral, 30min for coding
+> - No bar raiser round. Amazon just recently announced in early August that they re-implemented this for entry-level/new grad after removing it sometime in 2022/2023, but apparently this change didn't get reflected in my specific process
+>
+> Result: Received the offer! 🥳
+
+**20th Sep 2024**:
+
+> hey everyone, I wanted to share my Amazon FE II onsite interviewing experience, thank you to everyone on this server and the GreatFrontEnd team
+>
+> Amazon FE II onsite:
+>
+> - Behavioural: im sorry, i cant remember the questions i kinda went into autopilot during the interview but im going to go through my notes and update this if i do remember System Design: given a mock up (it was a check in app for a clinic) walk through how to create this but interviewer focused on endpoints needed to integrate frontend and backend, pagination, load balancing
+> - Coding: React frontend component 1: relative time widget, given a date create a component that displays just now, less than a minute ago, n days, n weeks, n months, n years
+> - Coding: React frontend component 2: FAQ page accordion -> additional requirements: 1000 questions, show likes of a question, what API endpoints needed, pagination
+> - Coding: React frontend component 3: Tic tac toe game, algorithm for finding winner
+>
+> Additional Notes:
+>
+> - All coding rounds were done on a plain text editor
+> - I was able to choose which language/framework to use
+> - It was 30 mins behavioural, 30 mins for coding/system design
+> - Dont just wing behavioural questions, they are a big deal and factor
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/apple-front-end-interview-questions.md b/contents/companies/apple-front-end-interview-questions.md
new file mode 100644
index 0000000000..4682755be4
--- /dev/null
+++ b/contents/companies/apple-front-end-interview-questions.md
@@ -0,0 +1,68 @@
+---
+title: Apple Front End Interview Questions
+sidebar_label: Apple interview questions
+description: Apple frontend interview questions & answers including JavaScript coding, UI challenges, and insider tips to help you land your dream Apple job.
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Apple Front End Interview Guide](https://www.greatfrontend.com/interviews/company/apple/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+Not much is known about Apple's front end interview process.
+
+## JavaScript coding questions
+
+- Implement `Array.prototype` methods (`flat`, `map`, `reduce`, `concat`) by yourself using JavaScript.
+  - [Practice questions](https://www.greatfrontend.com/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
+- How can you execute an array of promise in sequence?
+
+## User interface coding questions
+
+- Implement a simple photo ordering tool with vanilla JS and no libraries.
+
+## Quiz questions
+
+- How do you build an npm package?
+- What is a compositing layer in CSS?
+
+## Algorithm
+
+- Given an array, return an array where the each value is the product of the next two items: E.g. `[3, 4, 5]` -> `[20, 15, 12]`
+
+_Source: [Glassdoor Apple Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/Apple-Front-End-Developer-Interview-Questions-EI_IE1138.0,5_KO6,25.htm)_
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Apple.
+
+**21st May 2025**:
+
+> in final rounds with apple, this is what recruiter explained
+>
+> There will be 4 x 45 min interviews conducted virtually so can be on 1 day or split over 2. See below for focus areas.
+>
+> JavaScript: Coding (similar to tech screen) Bug Hunt: Coding (working on existing code base) Web Performance (Domain knowledge questions focused on Web Performance) Product Thinking (Behavioral round focused on collaboration, balancing technical VS business needs and understanding user impact)
+>
+> if anyone has tips for how to practice / prepare for "bug hunt" and "product thinking" feel free to comment. i believe "web performance" will be deep JS trivia likely covering a range of concepts that are usually surfaced in FE system design interviews
+
+**2nd Dec 2024**:
+
+> they have a big question bank, usually team by team case yes they ask sys design, its a faang company so the bar is really high also one of the lowest paying of the faangs lol
+
+**14th Apr 2024**:
+
+> Think it was 6 total rounds All fundamentals Vanilla js 5 yoe
+>
+> (In response to what do you think helped you prep for: big tech, specifically apple is asking a lot of vanilla js questions, dom related questions?) GreatFrontEnd UI questions all with vanilla js implementation
+
+**3rd Apr 2024**:
+
+> I finished up my Apple Phone Screen. They don’t like to ask LC questions but rather asked my background and experience with 10 mins left for a super easy js question. I guess the process really depends on the team you are about to interview for. They care more about if you are a good fit for the position rather than if you are someone who can ace a LC question. Hope I can make it to the onsite.
+
+**12th Mar 2024**:
+
+> I haven’t interviewed but I applied and was preparing for it a while back. Similar to other companies Apple has started prioritising system design apart from the leetcode. For leetcoding they ask trees and sorting based questions. It depends a lot on team and level of position too.
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/atlassian-front-end-interview-questions.md b/contents/companies/atlassian-front-end-interview-questions.md
new file mode 100644
index 0000000000..a4b9e9cc5a
--- /dev/null
+++ b/contents/companies/atlassian-front-end-interview-questions.md
@@ -0,0 +1,60 @@
+---
+title: Atlassian Front End Interview Questions
+sidebar_label: Atlassian interview questions
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Atlassian Front End Interview Guide](https://www.greatfrontend.com/interviews/company/atlassian/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Atlassian.
+
+**16th Jun 2025**:
+
+> I haven’t done Atlassian yet. These are my notes based on recruiter chat: The technical interview is a 60-minute video interview with two main parts:
+>
+> First 10 minutes: Rapid-fire questions about modern JavaScript practices. Simple questions to test your basic understanding of JavaScript.
+>
+> Remaining 45 minutes: Front-end coding portion with 1-2 coding scenarios. Key details: No React involved Focus on vanilla JavaScript, HTML, and CSS Solve the first question before moving to the second Goal is to assess your coding skills
+>
+> Option to do a redo interview within 24 hours if needed, and Atlassian will take the best result (best to just do it since it will do good than harm).
+
+**13th Jun 2025**:
+
+> Atlassian Karat Screen (unclear if these always ask the same questions): -Analyze arrays (know push, pop, unshift from memory - no resources allowed) Know Promise.any from memory (no resources allowed) -Know Async Generators, await, yield, async for await loop, Promise.resolve (know from memory, no resources allowed) (^ for those, you just have to be able to talk about them from memory, you don't have to write code with them from memory)
+>
+> Resources allowed: -Build a custom search widget - only HTML and CSS. You can use resources here, brushing up on css, flexbox, etc is helpful here. This wasn't written but the requirements state you can't hardcode height or width so use EM or % -JS/HTML - fetch todos from an API. Render 20 todos at a time. the dummy API call takes params to control how many you get. Brush up on fetch with no helper libraries, and like, creating/appending/removing dom elements. Again, pretty easy if you have time, but you don't have a lot of time, and if you (like me) haven't been writing vanilla JS and HTML like this much for years it's definitely helps speed things up to brush up on this
+
+**22nd May 2025**:
+
+> Ex-atlassian here. The questions for Principal Engineer role are not known to anyone except the ones working in that position probably (at least till I was there). But what I can suggest you is to be really thorough with what DS you'd use w.r.t performance while writing the code. The interviewers are usually quite helpful in guiding you. There will be a lot of cross questioning so be prepared for it. Also, don't just go with the questions that have been asked before. The interview question bank is now much bigger and interviewers are much aware of what questions are leaked on the internet. All the best!
+
+**27th Apr 2025**:
+
+> As far as I know for all levels, Atlassian has a very strong emphasis on Vanilla JavaScript and Front End System Design. In your case you will probably be not given a lot of details because rarely we see Front End Engineers at Principal level. (You are one of the 5 I am hearing/seeing about)
+
+**16th Mar 2025**:
+
+> Based out of BLR, got an offer from Atlassian for a front-end principal role (P60).
+>
+> GreatFrontEnd has helped me a lot in practicing and getting over interview anxiety. Especially the RADIO framework for system design rounds (the more senior you get, more system design rounds start to matter).
+>
+> Atlassian has a well documented interview process, that can be easily found with some basic searching on the internet. Your recruiter will help you a lot in setting expectations for the upcoming round.
+>
+> I had 5 rounds:
+>
+> Round 1: code up a widget in React (browser coding round) Round 2: code up a utility in JS Round 3: system design round Round 4: leadership craft round Round 5: values and principles round
+>
+> Atlassian relies more on follow-up / scale up questions. Instead of focusing on specific solution to a specific problem, you have to expect interviewer to keep changing the requirements and keep making the problem more and more complex.
+>
+> You would be able to solve the first problem in a round easily. But if your initial solution requires a major overhaul when the follow-up question tweaks the requirement, that 's a red flag for the interview feedback.
+>
+> Practicing GreatFrontEnd helped me solidify ton of concepts, and helped me feel comfortable in my skin during interviews.
+>
+> Almost no company interviews candidates in an in-browser coding interview environment like GreatFrontEnd. So I used to practice setting up the problem with test cases locally in VSCode. Used Bun and Vite heavily, to avoid spending time configuring test runner, bundlers etc.
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/bytedance-tiktok-front-end-interview-questions.md b/contents/companies/bytedance-tiktok-front-end-interview-questions.md
new file mode 100644
index 0000000000..bba5c3b584
--- /dev/null
+++ b/contents/companies/bytedance-tiktok-front-end-interview-questions.md
@@ -0,0 +1,78 @@
+---
+title: ByteDance/TikTok Front End Interview Questions
+sidebar_label: ByteDance/TikTok interview questions
+description: Master TikTok frontend engineer interviews with real coding questions, UI components, algorithms & insider tips from successful candidates.
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's ByteDance Front End Interview Guide](https://www.greatfrontend.com/interviews/company/bytedance/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+ByteDance/TikTok's front end interview is quite balanced in terms of interview format.
+
+## JavaScript coding questions
+
+- Implement `Promise.all`.
+  - [Practice question](https://www.greatfrontend.com/questions/javascript/promise-all?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- Implement a function which extends `Array.prototype`.
+  - [Practice questions](https://www.greatfrontend.com/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
+
+## User interface coding questions
+
+- Implement a dropdown component.
+  - [Read answer](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+
+## Quiz questions
+
+- Difference between `localStorage` and cookies.
+  - [Read answer](https://www.greatfrontend.com/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+
+## Algorithm
+
+- Merge two sorted integer arrays, remove duplicates.
+- You have an image on a page, write css and js so that when mouse is over the image, it rotates 180 deg with 1 sec animation.
+- Given a list of points, find out if any four of them form a square. Return 'true' if possible, else 'false'.
+  - Examples: `[[0, 0], [2, 0], [1, 1], [0, -1], [-1, -1], [0, 2], [0, 1], [1,0]]` -> `true`
+- Check for balanced brackets in a string.
+- Given two nodes, return the section of the tree between these two nodes.
+- Find the islands in a grid of land and sea.
+
+_Source: [Glassdoor ByteDance Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/ByteDance-Front-End-Developer-Interview-Questions-EI_IE1624196.0,9_KO10,29.htm)_
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with ByteDance/TikTok.
+
+**17th Nov 2024**:
+
+> cant say too much because of NDA but this is how it went for TikTok entry level FE
+>
+> 1. leetcodes, javascript fundamentals (covered in GFE 1 month study plan)
+> 2. UI component + follow up
+> 3. system design based on past project + javascript coding and now awaiting 4th round w recruiter
+>
+> feedback for each round was fairly quick, received update the next morning
+
+**12th Nov 2024**:
+
+> i do bytedance/tiktok round 2 recently, unfortunately get rejected. the coding questions is quite overwhelming for me. after experience & quiz questions, the interviewer directly give me 3 questions (all for ~30 mins), and i can choose the order.
+>
+> 1. similar to Map Async Limit but has to be solution 4
+> 2. some compose middleware question (can't find anything similar)
+> 3. implement bind, but i can't handle the new keyword
+
+**21st Oct 2024**:
+
+> just finish my third rounds interview with with TikTok. it's a design round with 50 mins deep dive on my pervious project and potential improvement. have to draw a flowchart to demo the workflow. overall it's really conversation heavy. and also asked why you want to join TikTok. don't think I am going to pass this round but Good Luck to whoever interview later! 🙏
+
+**8th Aug 2024**:
+
+> Had my first round tiktok frontend engineer interview. Not sure on the level but I told them I have 3 YOE so maybe 2-1? Strange interview tbh. There was a huge language barrier and it was difficult to build rapport with the interviewer (my interview was at night so I had someone overseas). Very difficult to read. First 20 minutes was talking about past projects/experiences/challenges, then a React coding question, then a JS quiz question, and then an untagged tiktok LC med... I asked some good questions about the company imo but the interviewer could barely answer it. I tried my best but it was not a collaborative interview at all and more of a test so it was challenging for me. I think it was a lot for an hour and we ended up going over time
+
+**18th Jun 2024**:
+
+> Had a second round interview with TikTok, thought I did good but didn't go through. I was asked transfer list, implemented it quick, but they interview on Lark which doesn't support React and you code in nodejs env, so no way to test anything that you write. Second question was react like VDom but instead of creating a DOM you just create a HTML string output given an input object with type and attributes. Maybe it was transfer list implementation. which I didn't compose using different components.
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/canva-front-end-interview-questions.md b/contents/companies/canva-front-end-interview-questions.md
new file mode 100644
index 0000000000..3150f2f1ee
--- /dev/null
+++ b/contents/companies/canva-front-end-interview-questions.md
@@ -0,0 +1,24 @@
+---
+title: Canva Front End Interview Questions
+sidebar_label: Canva interview questions
+---
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Canva.
+
+**17th June 2025**:
+
+> The problem presented for the AI-assisted coding interviews was one of the problems I practiced: "Create a production-grade Figma clone". I got lost discussing requirements, couldn't figure out what the interviewer wanted, they kept asking what I thought the scope should be. Built a canvas with drag-drop rectangles.
+
+**8th June 2025**:
+
+> Had a weird interview experience with Canva for Senior Frontend Role, for system design they sent me a list of example questions (build Netflix, uber, google docs etc) and heaps of study links, then when it came down to the system design interview it was like a weird pop quiz about what client side tech to use when scaling an SPA, also questions like what is SPA what are the alternatives, the the questions were all straight forward and I felt I have good answers but I was so tilted by this weird format after spending weeks practicing system design white boarding
+>
+> Then similar thing happened with the language proficiency round, was given a list of topics to prepare; dom mutations, event handling, async & core JavaScript fundamentals, they even sent me a starter pack html/css/js files, so I practiced building little apps in vanilla js very confident, then when it came to the interview.. ok let’s build an in memory comment service in TypeScript.. I got completely tilted, didn’t have a typescript env configured, decided to do it in pure js but failed as I got hung up on the data structure the interviewer was suggesting
+
+**24th Oct 2024**:
+
+> I did one two years ago but now the recruiter says they're doing leetcode/hackerank style for the first round, this is for staff level.
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/dropbox-front-end-interview-questions.md b/contents/companies/dropbox-front-end-interview-questions.md
new file mode 100644
index 0000000000..a8dbbe53f8
--- /dev/null
+++ b/contents/companies/dropbox-front-end-interview-questions.md
@@ -0,0 +1,51 @@
+---
+title: Dropbox Front End Interview Questions
+sidebar_label: Dropbox interview questions
+description: "Complete Dropbox front end interview guide: coding questions, UI challenges & system design. Real JavaScript, HTML/CSS examples plus insider tips."
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Dropbox Front End Interview Guide](https://www.greatfrontend.com/interviews/company/dropbox/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+Dropbox focuses on practical questions for their Front End Engineering interview loop rather than on raw algorithmic coding.
+
+> Our web developer interviews focus on practical application of HTML/CSS/JS for building web UI. The questions are based on real-world examples rather than raw coding exercises. You will be given a design spec and asked to build the best solution you can that demonstrates your experience and grasp of web development technologies.
+
+Refer to the [full official Dropbox Web Developer Interview Preparation Guide](/guides/dropbox-web-developer-guide.pdf).
+
+## JavaScript coding questions
+
+- Implement [`getByClassName()` and `getByClassnameHierarchy()`](https://leetcode.com/discuss/post/427896/dropbox-phone-screen-implement-getbyclas-fxpl/)
+  - [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- OOP-based class management system.
+
+## User interface coding questions
+
+- Build an image gallery using JavaScript, HTML, CSS.
+  - [Read answer](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- Forming words from mobile keypad.
+- Build a UI that fetches data from a weather API that is matching a design spec.
+- Build a UI that matches a design spec of one of the pages on the Dropbox homepage.
+
+## System design questions
+
+- Design Google calendar.
+
+## Algorithm
+
+- You want to log the number of hits to a site. Implement two functions, `log_hit()` which gets called when a hit is registered, and `get_hits_in_last_five_minutes()` which returns the total number of hits in the last five minutes.
+
+_Source: [Glassdoor Dropbox Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/Dropbox-Front-End-Developer-Interview-Questions-EI_IE415350.0,7_KO8,27.htm), [Glassdoor Dropbox Web Developer Interview Questions](https://www.glassdoor.sg/Interview/Dropbox-Web-Developer-Interview-Questions-EI_IE415350.0,7_KO8,21.htm?filter.jobTitleFTS=Web+Developer)_
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Dropbox.
+
+**11th Feb 2024**:
+
+> I did Dropbox two years ago. They loved testing Vanilla JS, no react i had to build carousel with vanilla js and there's debugging round purely made of vanilla JS
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/google-front-end-interview-questions.md b/contents/companies/google-front-end-interview-questions.md
new file mode 100644
index 0000000000..fb54e12ae4
--- /dev/null
+++ b/contents/companies/google-front-end-interview-questions.md
@@ -0,0 +1,110 @@
+---
+title: Google Front End Interview Questions
+sidebar_label: Google interview questions
+description: "Complete Google front end interview guide: JavaScript coding, UI components, system design & DSA. Practice questions for L4-L6 roles."
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Google Front End Interview Guide](https://www.greatfrontend.com/interviews/company/google/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+Since it's Google, candidates can expect to be tested on fundamental Computer Science concepts as well as their front end knowledge/skills.
+
+> Web Front End: ​You should be ready to cover topics like front end latency and implementation of standard CS algorithms using idiomatic JavaScript. You should be able to articulate Javascript strengths and shortcomings and ready to cover any of the following: Web security issues (XSS, XSRF), Prototypal inheritance, DOM API & manipulation, CSS manipulation, Browser / DOM events & event handling, XHR requests & HTTP headers, JavaScript closures
+
+Refer to Google's official interview preparation guides for:
+
+- [Official Interview Prep](https://techdevguide.withgoogle.com/paths/interview/)
+- [Front End or Mobile Software Engineers](/guides/google-front-end-guide.pdf)
+- [Front End/Mobile Software Engineers (Old)](/guides/google-front-end-guide-old.pdf)
+- [Non-technical interviews](/guides/google-non-technical-guide.pdf)
+
+## JavaScript coding questions
+
+- How do you make a function that takes a callback function `fn` and returns a function that calls `fn` on a timeout?
+  - [Practice question](https://www.greatfrontend.com/questions/javascript/debounce?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- Implement the outline view for a Google doc.
+  - [Practice question](https://www.greatfrontend.com/questions/javascript/table-of-contents?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- DFS on HTML nodes.
+  - [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-tag-name?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- Implement `throttle`.
+  - [Practice question](https://www.greatfrontend.com/questions/javascript/throttle?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- How do you make a function that only calls input function f every 50 milliseconds?
+  - [Practice question](https://www.greatfrontend.com/questions/javascript/throttle?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- Given a timeline write the JavaScript to select all nodes within selection of timeline.
+
+## User interface coding questions
+
+- Design a slider component.
+- Design a Tic-Tac-Toe game/design an algorithm for Tic-Tac-Toe game.
+  - [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- Implement nested checkboxes (when the parent is checked, children are checked and vice versa. Use `<input type="checkbox">`). Similar to [Indeterminate checkboxes](https://css-tricks.com/indeterminate-checkboxes/).
+- Design a webpage which can auto load new posts when you reach the bottom of the page by using JavaScript. You may use AJAX and JavaScript event listeners.
+- Write a UI using HTML, CSS, JavaScript that allows uses to enter the number of rows and columns in text input fields within a form and renders a table.
+  - [Practice question](https://www.greatfrontend.com/questions/user-interface/generate-table?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+  - Example: Number of rows: 4, Number of columns: 5, "Submit" button. Clicking on the "Submit" button will show the following table (ignore the styling):
+
+| 1   | 8   | 9   | 16  | 17  |
+| --- | --- | --- | --- | --- |
+| 2   | 7   | 10  | 15  | 18  |
+| 3   | 6   | 11  | 14  | 19  |
+| 4   | 5   | 12  | 13  | 20  |
+
+## Quiz questions
+
+- Explain the CSS Box Model.
+  - [Read answer](https://www.greatfrontend.com/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?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- What happens when you type a URL into the browser and hits enter?
+- Given some text on a web page, how many ways can you make the text disappear?
+- How do you send data from a web page to a server without a page refresh?
+  - [Read answer](https://www.greatfrontend.com/questions/quiz/what-are-the-advantages-and-disadvantages-of-using-ajax?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+
+## System design questions
+
+- Design emoji autocomplete.
+  - [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- Design JS Bin.
+- How would you create a Google Analytics SDK used by webpages?
+
+## Algorithm
+
+- Minesweeper problem. Write a function `reveal()` that outputs the number of tiles shown when a user clicks on a tile. Each tile shows the number of bombs as its neighbor. If the user click on a tile that is a bomb, the game is over. If that tile is 0, reveal all its neighbors.
+- You are given four numbers (type int), and have four basic math operators at your disposal (+, -, x, /). Given arbitrary ways to group the numbers and using any of the operators, determine if you can make the number 24 from the four numbers. The numbers must be processed in the order they appear.
+- Find k-nearest points.
+
+_Source: [Glassdoor Google Front End Software Engineer Interview Questions](https://www.glassdoor.sg/Interview/Google-Front-End-Software-Engineer-Interview-Questions-EI_IE9079.0,6_KO7,34.htm), [Google | Front End engineer](https://leetcode.com/discuss/post/271736/google-front-end-engineer-by-sithis-kvr1/)_
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Google.
+
+**5th Apr 2025**:
+
+> Interview experience at Google L4 frontend role - Offer Accepted
+>
+> 1. Round 1 DSA: question of finding all subsets in a deck of cards that pass a valid condition
+> 2. Round 2 Frontend: Implement a color swatch. Also with a slider
+> 3. Round 3 Googlyness: Behavior and resume
+> 4. Round 4: DSA - File system API and streaming API with generators
+>
+> Team match round, then HC review, Offer
+
+**9th Mar 2025**:
+
+> I have a google senior frontend engineer loop coming up. The recruiter shared material suggests 2 dsa + 1 frontend + 1 system design (guideline suggests it can be anything frontend or backend) + 1 behavioural.
+
+**20th Dec 2024**:
+
+> Hello, folks! Previously, I had an interview with Google for a Front-End role. The problem I got was DSA-style, just like you guys mentioned, thanks to this channel, so I did prep for DSA.
+
+**20th Dec 2024**:
+
+> DSA is fair game throughout the entire google experience easy, medium, hard, all fair game
+
+**10th Nov 2024**:
+
+> I interviewed a few years ago. At that time it was mostly DSA and 1 round involved frontend design with some coding HTML, CSS, JS. But I echo what others have said. Google's FE is DSA heavy.
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/linkedin-front-end-interview-questions.md b/contents/companies/linkedin-front-end-interview-questions.md
new file mode 100644
index 0000000000..9890e19c7d
--- /dev/null
+++ b/contents/companies/linkedin-front-end-interview-questions.md
@@ -0,0 +1,75 @@
+---
+title: LinkedIn Front End Interview Questions
+sidebar_label: LinkedIn interview questions
+description: "LinkedIn front end interview questions: JavaScript coding, UI components, algorithms & quiz questions. Real candidate experiences & insider tips."
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's LinkedIn Front End Interview Guide](https://www.greatfrontend.com/interviews/company/linkedin/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+## JavaScript coding questions
+
+- Write a `getElementsByClassName` function.
+  - [Practice question](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+
+## User interface coding questions
+
+- Create a tooltip component.
+- Create a cross browser Linkedin top navigation bar.
+
+## Quiz questions
+
+- Difference between CSS `padding` and `margin`.
+  - [Read answer](https://www.greatfrontend.com/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?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- Difference between promise and callback?
+- Difference between event bubbling and capturing?
+- Difference between callback and closure in JavaScript?
+- What are the advantages of using preprocessors? e.g. Sass, Stylus, Less.
+  - [Read answer](https://www.greatfrontend.com/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- What is event delegation?
+  - [Read answer](https://www.greatfrontend.com/questions/quiz/explain-event-delegation?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+
+## Algorithm
+
+- Reverse a doubly-linked list.
+
+_Source: [Glassdoor Linked Front End Software Engineer Interview Questions](https://www.glassdoor.sg/Interview/LinkedIn-Front-End-Software-Engineer-Interview-Questions-EI_IE34865.0,8_KO9,36.htm)_
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with LinkedIn.
+
+**13th May 2025**:
+
+> Linkedin technical screen experience for Senior FE role - 1 hr interview, lots of parts to this one:
+>
+> FE quiz questions - event delegation, closures, etc Memoize I+II Implement infinite scroll with data fetching/pagination - implementation is in plain JS, can optimize with throttle
+>
+> General thoughts - They're primarily testing for JS fundamentals, you gotta know your stuff real well to pass. I'm guessing they conduct interviews this way bc their FE codebase is written in Ember which not many ppl have experience with
+
+> (How did you implement infinite scrolling? Did you use IntersectionObserver?)
+>
+> I just used scroll events since they provided some boilerplate code for it, but IntersectionObserver would've been better to use had I been more familiar with the api. But I think the idea is generally the same where you check for a boundary being crossed, fetch more data and then take each item and append it to the parent container.
+>
+> Honestly I fumbled on this one tho, I haven't spent as much time on vanilla JS implementations vs react so I was a lot less confident in general. Also I'm surprised they even wanted to interview me for a senior role consider I'm only at ~3 yoe lol.
+
+**28th Jan 2025**:
+
+> LinkedIn US asked JS/web/html trivia questions and a Leetcode easy question for the phone screen round. Not sure about the onsite
+
+**5th Jan 2025**:
+
+> LinkedIn US asked JS/web/html trivia questions and a Leetcode easy question for the phone screen round. Not sure about the onsite
+>
+> Their systems design question was also not one I had seen before, and was difficult to understand. However in retro, asking more questions about "how it should work if the user does x, y, z" would have got me to design a better answer.
+>
+> I went back to try and solve it correctly. I was not really satisfied with any solution until reading white paper on the subject asked.
+
+**5th Jan 2025**:
+
+> Is it frontend or fullstack? They ask leetcode for fullstack. Merge intervals is one question Study for tic tac toe and autocomplete questions
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/lyft-front-end-interview-questions.md b/contents/companies/lyft-front-end-interview-questions.md
new file mode 100644
index 0000000000..9c344d0ef1
--- /dev/null
+++ b/contents/companies/lyft-front-end-interview-questions.md
@@ -0,0 +1,42 @@
+---
+title: Lyft Front End Interview Questions
+sidebar_label: Lyft interview questions
+description: Lyft front end interview questions with JavaScript coding challenges, UI problems, and insider tips from successful candidates. 
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Lyft Front End Interview Guide](https://www.greatfrontend.com/interviews/company/lyft/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+## JavaScript coding questions
+
+- Implement `Promise.all`.
+  - [Practice question](https://www.greatfrontend.com/questions/javascript/promise-all?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- Write the logic for minesweeper using vanilla JS.
+
+## User interface coding questions
+
+- Implement an autocomplete.
+  - [Read answer](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+
+_Source: [Glassdoor Lyft Frontend Engineer Interview Questions](https://www.glassdoor.sg/Interview/Lyft-Frontend-Engineer-Interview-Questions-EI_IE700614.0,4_KO5,22.htm)_
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Lyft.
+
+**6th Feb 2025**:
+
+> Got an offer from Lyft, thanks GreatFrontEnd! The practical interviews were pretty much all questions from GreatFrontEnd, the FE systems was harder than expected, asked me to design a file management system like GitHub repo files view.
+
+**18th Oct 2023**:
+
+> I once had the [Digital Clock](https://www.greatfrontend.com/questions/user-interface/digital-clock?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) question for Lyft interview 😦 but I had an onsite to be scheduled but they didn't have my level so it seemed futile It was a technical phone interview, they were on the phone and I was live coding on something like a codepad I think it was about an hour, 10 minutes of intro and 10 minutes of questions 🫠
+
+**4th Mar 2023**:
+
+> Lyft gives a fair bit of UI coding and JS utility fn questions. Many GreatFrontEnd questions should be helpful
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/meta-front-end-interview-questions.md b/contents/companies/meta-front-end-interview-questions.md
new file mode 100644
index 0000000000..0114fb86c6
--- /dev/null
+++ b/contents/companies/meta-front-end-interview-questions.md
@@ -0,0 +1,39 @@
+---
+title: Meta Front End Interview Questions
+sidebar_label: Meta interview questions
+description: Master Meta front end interviews with real insider tips, coding challenges, and proven strategies from successful candidates. Free expert guide.
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find more company guides on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Meta.
+
+**22nd May 2025**:
+
+> 17.5 mins to solve per question. and there are 2 questions in a 40 mins round. Meta asks variants. 😢
+
+**31st Jan 2025**:
+
+> I did meta last year. It was 2 leetcodes for frontend positions.
+
+**7th Jan 2025**:
+
+> No, every company has preselected questions in a question bank. Google will delete leaked questions, Meta does not.
+>
+> If you do the top 100/250 of Meta leetcode questions, you have a really good chance at getting one of the questions during the interview.
+
+**11th May 2024**:
+
+> Appreciate the response! I interviewed with Meta and was caught off guard with Emitter Pattern & Classnames fn when I expected DSA 😦
+
+**23rd Apr 2024**:
+
+> Hi, if you are in the front end pipeline, the questions will be focused on front end. For me, I am interviewing for IC 4/5. I have gone through a phone screen and the onsite was 4 rounds: 2 coding, 1 BQ and 1 system design. The coding is similar to the type of js questions on GreatFrontEnd and for system design, I used the RADIO framework to approach it. If you are interviewing for IC6 and above, I think you will need to go through one more design round but one less coding The next step is team matching. It could take a while, so it depends
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/microsoft-front-end-interview-questions.md b/contents/companies/microsoft-front-end-interview-questions.md
new file mode 100644
index 0000000000..1a8f8758c3
--- /dev/null
+++ b/contents/companies/microsoft-front-end-interview-questions.md
@@ -0,0 +1,90 @@
+---
+title: Microsoft Front End Interview Questions
+sidebar_label: Microsoft interview questions
+description: Microsoft coding round questions & system design interview prep. JavaScript, React, DOM concepts + real candidate experiences and insider tips.
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Microsoft Front End Interview Guide](https://www.greatfrontend.com/interviews/company/microsoft/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+## JavaScript coding questions
+
+- Tic-tac-toe implementation using vanilla JavaScript, HTML and CSS.
+  - [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- Create a chat interface like Microsoft teams.
+- Use OOP to implement a Chess game.
+
+## User interface coding questions
+
+- Create a notification interface like Microsoft teams
+- Image slider implementation.
+
+## Quiz questions
+
+- What is a prototype?
+  - [Read answer](https://www.greatfrontend.com/questions/quiz/explain-how-prototypal-inheritance-works?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- What is a closure?
+  - [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- What is the difference between `let`, `const`, and `var`?
+  - [Read answer](https://www.greatfrontend.com/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- What is DOM?
+
+## System design questions
+
+- Design an email client like Microsoft Outlook.
+  - [Read answer](https://www.greatfrontend.com/questions/system-design/email-client-outlook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+
+_Source: [Glassdoor Microsoft Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/Microsoft-Front-End-Developer-Interview-Questions-EI_IE1651.0,9_KO10,29.htm)_
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Microsoft.
+
+**20th May 2025**:
+
+> Honestly my interviews at Microsoft were much more chill than Amazon tbh. I do not mind the LP’s but the amount of dry runs they made me do was shocking. I even wrote assert statements before hand but turns out no execution allowed for Amazon.
+>
+> MSFT however, everything was smooth.
+
+**8th May 2025**:
+
+> I passed the Senior fe loop for a similar team to Microsoft (Copilot) last year. A team which was working on embedding copilot inside m365 Just a standard interview, system design was just catered to modularizing copilot so it can plug into any app
+
+**25th Apr 2025**:
+
+> I did a senior one in 2024 which is roughly the same loop as Microsoft's SDE II but more emphasis on system design
+
+**31st Jan 2025**:
+
+> Hi! Just wanted to give a huge shoutout to GreatFrontEnd and say thanks for all the amazing work the team is doing! After leaving AWS a couple of months back, I was pretty nervous about the job market and didn’t know what to expect. But with GreatFrontEnd as my best friend (and, honestly, confidant lol) throughout the interview process, I was able to land interviews and offers at multiple companies for senior frontend/full stack roles.
+>
+> Thanks to you, I either got an offer or made it to the onsite stage at the following companies. In each one, I found some element of my prep from GreatFrontEnd extremely valuable: Vanta, Remitly, Coinbase, Microsoft, Lululemon, TikTok, Google
+>
+> One thing I did find a bit frustrating in system design rounds, though, was how most companies (Even Microsoft) focused on API design but skipped over more advanced frontend deep dives. I love the depth and deep-dives in the prep material—they really made me a better engineer—even if I didn’t always get to showcase it in interviews.
+>
+> So grateful for all the support and resources! 🙌 Following up on my earlier thread, I was responding to someone about my experience with Microsoft and thought I’d share it here for the community as well.
+>
+> I had two separate Microsoft onsites—both for Microsoft Teams and Senior Frontend positions—but they were very different.
+>
+> First onsite (I received an offer for this): React-based interview – Very easy. It included a 30-minute behavioral round followed by a technical session. The question was more like an implementation of a basic to-do app (Add/Remove/Edit todos). Algorithm round – LeetCode Easy/Medium. Another 30-minute behavioral session followed by coding. Hiring manager round – Behavioral + System Design. This was more full-stack focused, but the interviewer gave me the option to deep dive into either frontend or backend, depending on my preference. However, the initial design needed to be full-stack. The task was to implement a part of Microsoft Teams itself. I really loved the discussion—it was very open-ended and adaptive. JavaScript coding – I was asked to design an SDK in JavaScript, implementing features like throttling, retry strategies, etc. The focus was on defining contracts that others would need to adhere to. It felt more like a mix of system design and coding.
+>
+> Second onsite (No offer for this): LeetCode Medium – A variation of the 3Sum problem. LeetCode Hard - Still have PTSD from this 😄 LeetCode Medium – More of an implementation-focused merge sort problem. System design + Hiring manager – Focused more on API design; the interviewer didn’t care about frontend deep dives at all.
+>
+> It’s very difficult to predict Microsoft interviews—they have no set format whatsoever. Really didn’t enjoy the second loop, but they didn’t seem to like me either—so I guess it’s even! 😅
+
+**23rd Nov 2024**:
+
+> Alright guys/gals I just had a frontend interview for a contract role at Microsoft. Overall it was challenging, but not overbearingly difficult.
+>
+> The interview consisted of two 45 minute rounds. Interview One was a coding round in React with a senior dev. Second Interview was just a technical discussion with a principal engineer. More details about interview one:
+>
+> Implement the number/character pad using buttons (kind of like the old school flip phones) where 2 == abc, 3 == def, etc, and display the string that is being pressed. Example: press 2 --> "a" press 2 again --> "b" press 2 after a 1 second delay --> "ba" press 6 --> "bam"
+>
+> As I said it was challenging. Honestly I don't think I'll get the contract position. I get nervous easily and trying to control my jitters was an issue in the beginning. Because of this I made a lot of silly mistakes that really slowed me down. Also, admittedly some of react skills are rusty in some parts. I'm not giving though. I think the silver lining of all this was once I got into my rhythm I was able to convey my thoughts more clearly and able to break down the problem further. Also I learned I'm not completely incompetent in react which helps 😄
+>
+> But yeah just wanted to share my experience. Hope it helps and if anyone can help me with the solution that be great!
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/oracle-front-end-interview-questions.md b/contents/companies/oracle-front-end-interview-questions.md
new file mode 100644
index 0000000000..9486f97ba7
--- /dev/null
+++ b/contents/companies/oracle-front-end-interview-questions.md
@@ -0,0 +1,30 @@
+---
+title: Oracle Front End Interview Questions
+sidebar_label: Oracle interview questions
+description: Oracle front end interview questions with real SDE-3 experience. DSA, JavaScript, React, system design & behavioral rounds. Insider tips included.
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find more company guides on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Oracle.
+
+**11th Jun 2025**:
+
+> Interview experience for Oracle OCI India SDE-3 role
+>
+> 1. Round 1 (DSA): Given a string "1+3-2", print the output "2". Handle all edge cases. No need to follow BODMAS rule
+> 1. Round 2 (JavaScript): Squash Object question on the GreatFrontend (https://www.greatfrontend.com/questions/javascript/squash-object?practice=practice&tab=coding)
+> 1. Round 3 (DSA): a. Similar elements between two array. arr1 = [1, 2, 2, 4, 5] arr2 = [3, 2, 4, 2] . The output should be [2, 2, 4]. b. Follow up on the same question by giving matrix instead of the two array.
+> 1. Round 4 (System Design): Design the frontend of Jira Board
+> 1. Round 5 (System Design): Design a backend system to block a bot request
+> 1. Round 6 (Coding + System Design): (a) Debug a react app. (Functionality is missing from the App. Fix and make the functionality of the App work), (b) High level frontend architecture of the app that you are currently working, (c) Design a backend system for URL shortener
+>
+> And at least one behavioural question in each round.
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/palantir-front-end-interview-questions.md b/contents/companies/palantir-front-end-interview-questions.md
new file mode 100644
index 0000000000..69baf88b11
--- /dev/null
+++ b/contents/companies/palantir-front-end-interview-questions.md
@@ -0,0 +1,36 @@
+---
+title: Palantir Front End Interview Questions
+sidebar_label: Palantir interview questions
+description: Palantir frontend interview guide with real candidate experiences. Master leetcode problems, algorithms & system design for tech interviews.
+---
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Palantir.
+
+**21st Aug 2024**:
+
+> I had a tree / graph traversal type problem for Palantir phone screen. More leetcode-y and less FE-specific. Uber was building a small app in the UI. React GreatFrontEnd problems were super helpful with clearing that round
+
+**1st Jun 2024**:
+
+> Search the server for Palantir. You’ll get a lot of tips here! Otherwise, I think this all depends on how prepared you already feel for leetcode and GreatFrontEnd questions. One week isn’t a lot of time, so I’d focus on your weakest topics and topics most likely to be asked I mentioned leetcode because other people here who interviewed with Palantir said they had leetcode questions. Using the interview as just a practice is good too, if you really don’t wanna study leetcode, even just the questions posted on here.
+
+**29th Mar 2024**:
+
+> Hi for Palantir, it was a leetcode style question. I had to validate a graph and there were some additional questions about time and space complexity afterwards. Hope this is not too late. The interviewer determined if it passed or not. There were no automatic tests.
+
+**26th Mar 2024**:
+
+> Just finished up a tech screen with Palantir. Pretty leetcode-y. Was asked to take a text and a query of two words, an integer k, and return the indicies of where the distance between the two words is `<= k`. Got a semi-optimal solution, but wasn't the most optimal (we went through the most optimal after). Was essentially just a text document (i.e. no test cases, I wrote the function signature, no ability to run the code). We'll see what happens 🤷‍♂️
+
+**25th Mar 2025**:
+
+> I have one tomorrow with them for a full-stack role leaning frontend. Here's what the recruiter told me to expect for the interview process: - Technical Interview — Leetcode, DSA
+>
+> - 2 Interviews
+>   - Web Dev
+>   - Decomposition Interview (System Design)
+> - Hiring Manager Interview
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/pinterest-front-end-interview-questions.md b/contents/companies/pinterest-front-end-interview-questions.md
new file mode 100644
index 0000000000..7ebc3e3021
--- /dev/null
+++ b/contents/companies/pinterest-front-end-interview-questions.md
@@ -0,0 +1,39 @@
+---
+title: Pinterest Front End Interview Questions
+sidebar_label: Pinterest interview questions
+description: Get insider Pinterest front end interview tips from real candidates. Covers React coding, system design, algorithms & behavioral rounds.
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find more company guides on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Pinterest.
+
+**3rd Apr 2024**:
+
+> I tríed few months ago. I did the first round only for a release engineer position. The problem is called Can you win. And it is similar to that in Leetcode jump and jump II. They are medium level problems. At least you can solve 2 in 20-30 mins. They recommend that.
+
+**4th Feb 2024**:
+
+> Last time I interviewed for a FE engineer role at Pinterest in 2019, it was 3 LC rounds. one required a trie data structure to solve a string DSA. "Given a stream of comments, detect inappropriate language". I would be interested to know if they do have a true FE track. Just re-read this question. I thought you were asking about onsite. The question I got for phone screen was:
+>
+> Given an array of integers like [1,2,0,4,3] and a starting index, return true if you are able to get to a "0" value. Return false if you can't. Each value in the array is how many steps to the left or right you can move. You have to take that many steps exactly. If you are at the start or end of the array and you have movements left, you can wrap around to the opposite side.
+>
+> ex: same array, but startingIdx = 3. It returns true because you can go 1 step to the right, then 3 steps to the right starting at 0.
+>
+> So this is backtracking plus keeping track of which indexes you've finished evaluating. I've never seen this on LC. I think I spent 15 mins trying to voice out the solution. 15 minutes coding. Finished. 15 minutes of talking back and forth about Pinterest. Ended the interview 15 minutes early. hilariously, i got the same question on the onsite and then there was a follow up question to this which was: you've used recursion to solve htis, but can you solve this without it? So instead of a (call) stack of nodes to process, use a queue, Pinterest was the worst interview experience I've gone through for frontend. Position asked for React experience, didn't write a single line of JavaScript. Only Python for DSA. So it would be a breath of fresh air if they did create an FE track since 2019 Yup, passed the phone screen, went to onsite. Didn't get offer because I wasn't very good with string DSA at the time
+
+**4th Feb 2024**:
+
+> yes, afaik they have a FE track and a full stack track for interviews. thats what the recruiter alluded to because im teetering between FE and full stack and she mentioned that the interview might be different if i wanted to focus on full stack
+
+**12th Sep 2023**:
+
+> So, the recruiter just explained to me, that there will be 1 Algos, 1 Frontend Coding with React, 1 Frontend System Design and 1 Behavioral for Pinterest's onsite
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/reddit-front-end-interview-questions.md b/contents/companies/reddit-front-end-interview-questions.md
new file mode 100644
index 0000000000..5c4ddafd3e
--- /dev/null
+++ b/contents/companies/reddit-front-end-interview-questions.md
@@ -0,0 +1,35 @@
+---
+title: Reddit Front End Interview Questions
+sidebar_label: Reddit interview questions
+description: Reddit front end interview guide with real candidate experiences. JavaScript fundamentals, HTML forms, array problems, and system design tips
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find more company guides on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Reddit.
+
+**14th May 2025**:
+
+> You should prepare JavaScript fundamental and building UI problems with html, and JavaScript
+
+**20th Feb 2025**:
+
+> Reddit tech screen: question involving HTML forms and using the form data to construct a JSON object
+
+**27th Oct 2024**:
+
+> I just had Reddit interview.
+>
+> - Phone screen - ask some generic questions like GET & POST, XSS, implement feed (just talk about it). 20 mins simple coding with arrays and filters.
+> - Onsite coding: manipulating arrays system design: design quiz like game app UI frontend coding: form related
+> - Hiring manager round
+>
+> Reddit focus on communication and collaboration. No reactjs, just prep for JavaScript and html.
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/salesforce-front-end-interview-questions.md b/contents/companies/salesforce-front-end-interview-questions.md
new file mode 100644
index 0000000000..ed90a6c061
--- /dev/null
+++ b/contents/companies/salesforce-front-end-interview-questions.md
@@ -0,0 +1,49 @@
+---
+title: Salesforce Front End Interview Questions
+sidebar_label: Salesforce interview questions
+description: "Salesforce front end developer interview questions: coding challenges, JavaScript quiz on event loop, closures, CSS positioning. Real experiences & tips."
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find more company guides on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+Not much is known about Salesforce's front end interview process.
+
+## Coding
+
+- Flatten a nested array.
+  - [Practice question](https://www.greatfrontend.com/questions/javascript/flatten?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+
+## Quiz questions
+
+- What is the event loop?
+  - [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- What is a closure?
+  - [Read answer](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- Positioning in CSS.
+  - [Read answer](https://www.greatfrontend.com/questions/quiz/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+
+_Source: [Glassdoor Salesforce UI Developer Interview Questions](https://www.glassdoor.sg/Interview/Salesforce-UI-Developer-Interview-Questions-EI_IE11159.0,10_KO11,23.htm)_
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Salesforce.
+
+**25th Apr 2025**:
+
+> They rescheduled my interview. Finally got the opportunity to talk to them yesterday. 
+> 
+> Was asked 2 easy LC( !! ) 
+> I was specifically asked if I would be comfortable coding in React, and after confirmation and 2 weeks of continuous React study, I was given 2 leetcode questions in the CoderPad 🤷🏼‍♀️ 
+> A version of the high five problem was asked and one was about calculating the distance a robot has moved.
+
+**18th Oct 2024**:
+
+> Yes, I had a OA which had 2 medium/hard dynamic programming question 1 hour. It was pretty hard 🤕
+> Ah, I had some grouping of CPU tasks which was 2D dp.
+> Currently I'm on the final round, so I assume this round would be either system design or a class design round. I'm not sure which one though
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/shopify-front-end-interview-questions.md b/contents/companies/shopify-front-end-interview-questions.md
new file mode 100644
index 0000000000..06036f7563
--- /dev/null
+++ b/contents/companies/shopify-front-end-interview-questions.md
@@ -0,0 +1,35 @@
+---
+title: Shopify Front End Interview Questions
+sidebar_label: Shopify interview questions
+description: Ace your Shopify front end interview with real questions, insider tips from successful candidates, and coding challenges. Latest prep strategies.
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find more company guides on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Shopify.
+
+**3rd Mar 2025**:
+
+> Any current or ex-Shopify employees here? I just got offered a Senior Software Engineer position (thanks GreatFrontEnd for the system design help!)
+
+**3rd Feb 2025**:
+
+> I was asked the Roomba problem for Shopify's pair programming interview. Pretty common, you should be able to find it in a thread here
+
+**25th Jul 2024**:
+
+> i had to create a roomba app where it would move on a 10x10 grid. the roomba icon could respond onClick to movements as well as turn when it hit the end of the arrays (using css transform). refs and responsive design were also tested here
+
+**13th Feb 2024**:
+
+> Just wanted to say, I used your site for 1 month to prep for my interviews at Shopify, and I got the job! Staff level engineer.
+>
+> Just saying thank you and honestly, no complaints. Loved the site, loved the system design questions. Everything was very, very useful.
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/twitter-front-end-interview-questions.md b/contents/companies/twitter-front-end-interview-questions.md
new file mode 100644
index 0000000000..af5bf693be
--- /dev/null
+++ b/contents/companies/twitter-front-end-interview-questions.md
@@ -0,0 +1,38 @@
+---
+title: X/Twitter Front End Interview Questions
+sidebar_label: Twitter interview questions
+description: "Get X (Twitter) front end interview questions & coding challenges. Practice typeahead, tic-tac-toe problems & JavaScript concepts plus insider tips."
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find more company guides on [GreatFrontEnd](https://www.greatfrontend.com/interviews/company?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+## User interface coding questions
+
+- Implement a typeahead. [Source](https://leetcode.com/discuss/post/1220887/twitter-frontend-phone-screen-by-anonymo-k2xo/)
+- Add features to a tic-tac-toe game.
+  - [Practice question](https://www.greatfrontend.com/questions/user-interface/tic-tac-toe?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+
+## Quiz questions
+
+- What is the difference between `Array.prototype.map` and `Array.prototype.forEach`?
+  - [Read answer](https://www.greatfrontend.com/questions/quiz/can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+
+_Source: [Glassdoor Twitter Front End Developer Interview Questions](https://www.glassdoor.sg/Interview/Twitter-Front-End-Developer-Interview-Questions-EI_IE100569.0,7_KO8,27.htm)_
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Twitter.
+
+**5th Jan 2025**:
+
+> Study for tic tac toe and autocomplete questions
+
+**6th Nov 2024**:
+
+> I had one last month for their product web engineer role. They don't have recruiters at xai. It's the engineers in the team that filter resumes, call candidates.The first round was a short 15 mnts google meets call, the engineer went over what they are building - they are basically upgrading a legacy app built by twitter engineers years ago into react and looking for someone who has both react as well as react native skills. Received a rejection after the initial chat.
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/companies/uber-front-end-interview-questions.md b/contents/companies/uber-front-end-interview-questions.md
new file mode 100644
index 0000000000..621b45048c
--- /dev/null
+++ b/contents/companies/uber-front-end-interview-questions.md
@@ -0,0 +1,55 @@
+---
+title: Uber Front End Interview Questions
+sidebar_label: Uber interview questions
+description: "Complete Uber front end interview guide: JavaScript coding, UI challenges, rate limiters, progress bars & insider tips. Latest 2025 experiences included."
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Uber Front End Interview Guide](https://www.greatfrontend.com/interviews/company/uber/questions-guides?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+Not much is known about Uber's front end interview process.
+
+## JavaScript coding questions
+
+- Implement a rate limiter attribute/decoration/annotation on top of an API endpoint. Caps to N requests per minute with a rolling window. [Source A](https://leetcode.com/discuss/post/2409192/uber-phone-screen-senior-front-end-engin-xp4p/) and [Source B](https://leetcode.com/discuss/post/124880/rate-limiter-by-bhosdike-0euv/)
+
+## User interface coding questions
+
+- Create a button that when clicked, adds a progress bar onto the page. The progress bar would then fill up in a given amount of time (think 3 to 5 seconds). If you get past the first part, you will be asked to do throttling how many progress bars can be running at once. For example, if the limit is 3 progress bars, and the user clicks on the button 4 times, the fourth progress bar only starts after the very first one finishes. [Source](https://leetcode.com/discuss/post/1064199/uber-front-end-phone-screen-reject-by-an-16nz/)
+  - [Practice question](https://www.greatfrontend.com/questions/user-interface/progress-bars?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- Overlapping circles app. [Source](https://leetcode.com/discuss/post/1784074/uber-phone-overlapping-circles-app-rejec-ql4p/)
+
+## Insider tips from the GreatFrontEnd community
+
+These tips were shared by [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) users who have completed interviews with Uber.
+
+**3rd Jun 2025**:
+
+> I was asked a reactjs based question although I majorly prepared for dsa and JS type questions based on the questions asked previously. What I've learned and observed about Uber's FE process is that they can ask pretty random questions. I guess recruiters are not in sync with the interviewers. Or it feels like it is more up to the interviewers on what they ask. I watched some YT videos of people on their uber interview experience and literally to each one of them dsa was asked.
+
+**7th May 2025**:
+
+> Just gave BPS round of Uber and gotta say, Uber has quality problems! I thought it would be DSA as the recruiter had mentioned. But I guess you can’t trust recruiters nowadays. Question was “create a utility in JS to send data in batches with a timeout. So, as soon as a batch size is reached, send the data right away and start the timeout. If timeout happens before batch is filled, send the batch as it is and start the timer again.” Also, I asked the interviewer for what to prepare for DSA round and he said array, trees, graphs, traversals, but he also mentioned that Uber is trying to get away from DSA for frontend roles and keep it frontend focused and slowly they are doing it.
+
+**5th May 2025**:
+
+> Ik someone who gave Uber's SDE II web interview, in short prepare everything, there were 5 rounds -
+>
+> 1. DSA - leetcode styled and js based
+> 2. Web Fundamentals - HTML, CSS, JS, APIs, Internet
+> 3. Frontend System Design
+> 4. Culture Fit
+> 5. Hiring Manager
+
+**19th Jan 2025**:
+
+> For Uber FE SDE2 check mapAsyncLimit question. Since you're interviewing for their Bengaluru office, prepare behavioral well and do google calender system design
+
+**6th Dec 2024**:
+
+> I've my uber onsite coming up. First 2 rounds are leetcode styled coding and System design. abt me: 7 YOE
+
+For more insider tips, visit [GreatFrontEnd](https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)!
diff --git a/contents/css-questions.md b/contents/css-questions.md
new file mode 100644
index 0000000000..9b2d062b0c
--- /dev/null
+++ b/contents/css-questions.md
@@ -0,0 +1,502 @@
+---
+title: CSS Interview Questions (Quiz) for Front End Interviews
+sidebar_label: CSS quiz
+description: Master CSS interview questions with comprehensive answers on specificity, box model, flexbox, grid, positioning & more. Perfect prep for frontend roles.
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's CSS Quiz Interview Questions](https://www.greatfrontend.com/questions/css-interview-questions/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+Answers to [Front-end Job Interview Questions - CSS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/css-questions.md). Pull requests for suggestions and corrections are welcome!
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+### What is CSS selector specificity and how does it work?
+
+The browser determines what styles to show on an element depending on the specificity of CSS rules. We assume that the browser has already determined the rules that match a particular element. Among the matching rules, the specificity, four comma-separate values, `a, b, c, d` are calculated for each rule based on the following:
+
+1. `a` is whether inline styles are being used. If the property declaration is an inline style on the element, `a` is 1, else 0.
+2. `b` is the number of ID selectors.
+3. `c` is the number of classes, attributes and pseudo-classes selectors.
+4. `d` is the number of tags and pseudo-elements selectors.
+
+The resulting specificity is not a score, but a matrix of values that can be compared column by column. When comparing selectors to determine which has the highest specificity, look from left to right, and compare the highest value in each column. So a value in column `b` will override values in columns `c` and `d`, no matter what they might be. As such, specificity of `0,1,0,0` would be greater than one of `0,0,10,10`.
+
+In the cases of equal specificity: the latest rule is the one that counts. If you have written the same rule into your stylesheet (regardless of internal or external) twice, then the lower rule in your style sheet is closer to the element to be styled, it is deemed to be more specific and therefore will be applied.
+
+I would write CSS rules with low specificity so that they can be easily overridden if necessary. When writing CSS UI component library code, it is important that they have low specificities so that users of the library can override them without using too complicated CSS rules just for the sake of increasing specificity or resorting to `!important`.
+
+#### References
+
+- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
+- https://www.sitepoint.com/css-selectors-specificity/
+
+### What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
+
+- **Resetting** - Resetting is meant to strip all default browser styling on elements. For e.g. `margin`s, `padding`s, `font-size`s of all elements are reset to be the same. You will have to redeclare styling for common typographic elements.
+- **Normalizing** - Normalizing preserves useful default styles rather than "unstyling" everything. It also corrects bugs for common browser dependencies.
+
+I would choose resetting when I have a very customized or unconventional site design such that I need to do a lot of my own styling and do not need any default styling to be preserved.
+
+#### References
+
+- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
+
+### Describe `float`s and how they work.
+
+Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike `position: absolute` elements, which are removed from the flow of the page.
+
+The CSS `clear` property can be used to be positioned below `left`/`right`/`both` floated elements.
+
+If a parent element contains nothing but floated elements, its height will be collapsed to nothing. It can be fixed by clearing the float after the floated elements in the container but before the close of the container.
+
+The `.clearfix` hack uses a clever CSS [pseudo selector](#describe-pseudo-elements-and-discuss-what-they-are-used-for) (`::after`) to clear floats. Rather than setting the overflow on the parent, you apply an additional class `clearfix` to it. Then apply this CSS:
+
+```css
+.clearfix::after {
+  content: ' ';
+  visibility: hidden;
+  display: block;
+  height: 0;
+  clear: both;
+}
+```
+
+Alternatively, give `overflow: auto` or `overflow: hidden` property to the parent element which will establish a new block formatting context inside the children and it will expand to contain its children.
+
+#### References
+
+- https://css-tricks.com/all-about-floats/
+
+### Describe `z-index` and how stacking context is formed.
+
+The `z-index` property in CSS controls the vertical stacking order of elements that overlap. `z-index` only affects elements that have a `position` value which is not `static`.
+
+Without any `z-index` value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning (and their children) will always appear on top of elements with default static positioning, regardless of HTML hierarchy.
+
+A stacking context is an element that contains a set of layers. Within a local stacking context, the `z-index` values of its children are set relative to that element rather than to the document root. Layers outside of that context — i.e. sibling elements of a local stacking context — can't sit between layers within it. If an element B sits on top of element A, a child element of element A, element C, can never be higher than element B even if element C has a higher `z-index` than element B.
+
+Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as `opacity` less than 1, `filter` that is not `none`, and `transform` that is not`none`.
+
+_Note: What exactly qualifies an element to create a stacking context is listed in this long set of [rules](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context#The_stacking_context)._
+
+#### References
+
+- https://css-tricks.com/almanac/properties/z/z-index/
+- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
+- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context
+
+### Describe Block Formatting Context (BFC) and how it works.
+
+A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, `inline-blocks`, `table-cells`, `table-caption`s, and elements with `overflow` other than `visible` (except when that value has been propagated to the viewport) establish new block formatting contexts.
+
+Knowing how to establish a block formatting context is important, because without doing so, the containing box will not [contain floated children](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height). This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways.
+
+A BFC is an HTML box that satisfies at least one of the following conditions:
+
+- The value of `float` is not `none`.
+- The value of `position` is neither `static` nor `relative`.
+- The value of `display` is `table-cell`, `table-caption`, `inline-block`, `flex`, or `inline-flex`, `grid`, or `inline-grid`.
+- The value of `overflow` is not `visible`.
+
+In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).
+
+Vertical margins between adjacent block-level boxes in a BFC collapse. Read more on [collapsing margins](https://www.sitepoint.com/collapsing-margins/).
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_context
+- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
+
+### What are the various clearing techniques and which is appropriate for what context?
+
+- Empty `div` method - `<div style="clear:both;"></div>`.
+- Clearfix method - Refer to the `.clearfix` class above.
+- `overflow: auto` or `overflow: hidden` method - Parent will establish a new block formatting context and expand to contains its floated children.
+
+In large projects, I would write a utility `.clearfix` class and use them in places where I need it. `overflow: hidden` might clip children if the children is taller than the parent and is not very ideal.
+
+### Explain CSS sprites, and how you would implement them on a page or site.
+
+CSS sprites combine multiple images into one single larger image. It is a commonly-used technique for icons (Gmail uses it). How to implement it:
+
+1. Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.
+1. Each image would have a corresponding CSS class with `background-image`, `background-position` and `background-size` properties defined.
+1. To use that image, add the corresponding class to your element.
+
+**Advantages:**
+
+- Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.
+- Advance downloading of assets that won't be downloaded until needed, such as images that only appear upon `:hover` pseudo-states. Blinking wouldn't be seen.
+
+#### References
+
+- https://css-tricks.com/css-sprites/
+
+### How would you approach fixing browser-specific styling issues?
+
+- After identifying the issue and the offending browser, use a separate style sheet that only loads when that specific browser is being used. This technique requires server-side rendering though.
+- Use libraries like Bootstrap that already handles these styling issues for you.
+- Use `autoprefixer` to automatically add vendor prefixes to your code.
+- Use Reset CSS or Normalize.css.
+- If you're using Postcss (or a similar transpiling library), there may be plugins which allow you to opt in for using modern CSS syntax (and even W3C proposals) that will transform those sections of your code into corresponding safe code that will work in the targets you've used.
+
+### How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?
+
+- Graceful degradation - The practice of building an application for modern browsers while ensuring it remains functional in older browsers.
+- Progressive enhancement - The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
+- Use [caniuse.com](https://caniuse.com/) to check for feature support.
+- Autoprefixer for automatic vendor prefix insertion.
+- Feature detection using [Modernizr](https://modernizr.com/).
+- Use CSS Feature queries [@support](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
+
+### What are the different ways to visually hide content (and make it available only for screen readers)?
+
+These techniques are related to accessibility (a11y).
+
+- `width: 0; height: 0`. Make the element not take up any space on the screen at all, resulting in not showing it.
+- `position: absolute; left: -99999px`. Position it outside of the screen.
+- `text-indent: -9999px`. This only works on text within the `block` elements. This is a widely used and famous trick, but it comes with [some downsides](https://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/) like causing performance issues, so you might want to consider using `text-indent: 100%` instead.
+- Meta tags. For example by using Schema.org, RDF, and JSON-LD.
+- WAI-ARIA. A W3C technical specification that specifies how to increase the accessibility of web pages.
+
+Even if WAI-ARIA is the ideal solution, I would go with the `absolute` positioning approach, as it has the least caveats, works for most elements and it's an easy technique.
+
+#### References
+
+- https://www.w3.org/TR/wai-aria-1.1/
+- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
+- https://www.a11yproject.com/
+- https://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
+
+### Have you ever used a grid system, and if so, what do you prefer?
+
+Before Flex became popular (around 2014), the `float`-based grid system was the most reliable because it still has the most browser support among the alternative existing systems (flex, grid). Bootstrap was using the `float` approach until Bootstrap 4 which switched to the `flex`-based approach. As of writing (2020), `flex` is the recommended approach for building grid systems and has [decent browser support](https://caniuse.com/#search=flex).
+
+For the adventurous, they can look into [CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/), which uses the shiny new `grid` property; it is even better than `flex` for building grid layouts and will be the de facto way to do so in the future.
+
+### Have you used or implemented media queries or mobile-specific layouts/CSS?
+
+Yes. An example would be transforming a stacked pill navigation into a fixed-bottom tab navigation beyond a certain breakpoint.
+
+### Are you familiar with styling SVG?
+
+Yes, there are several ways to color shapes (including specifying attributes on the object) using inline CSS, an embedded CSS section, or an external CSS file. Most SVG you'll find around the web use inline CSS, but there are advantages and disadvantages associated with each type.
+
+Basic coloring can be done by setting two attributes on the node: `fill` and `stroke`. `fill` sets the color inside the object and `stroke` sets the color of the line drawn around the object. You can use the same CSS color naming schemes that you use in HTML, whether that's color names (that is `red`), RGB values (that is `rgb(255,0,0)`), Hex values, RGBA values, etc.
+
+```html
+<rect
+  x="10"
+  y="10"
+  width="100"
+  height="100"
+  stroke="blue"
+  fill="purple"
+  fill-opacity="0.5"
+  stroke-opacity="0.8" />
+```
+
+The above `fill="purple"` is an example of a _presentational attribute_. Interestingly, and unlike inline styles like `style="fill: purple"` which also happens to be an attribute, presentational attributes can be [overriden by CSS](https://css-tricks.com/presentation-attributes-vs-inline-styles/) styles defined in a stylesheet. So, if you did something like `svg { fill: blue; }` it would override the purple fill we've defined.
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Fills_and_strokes
+
+### Can you give an example of an @media property other than screen?
+
+Yes, there are four types of @media properties (including _screen_):
+
+- `all` - for all media type devices
+- `print` - for printers
+- `speech` - for screenreaders that "reads" the page out loud
+- `screen` - for computer screens, tablets, smart-phones etc.
+
+Here is an example of `print` media type's usage:
+
+```css
+@media print {
+  body {
+    color: black;
+  }
+}
+```
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
+
+### What are some of the "gotchas" for writing efficient CSS?
+
+Firstly, understand that browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. Hence avoid key selectors that are tag and universal selectors. They match a large number of elements and browsers will have to do more work in determining if the parents do match.
+
+[BEM (Block Element Modifier)](https://en.bem.info/) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.
+
+Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, repaint, and compositing. Avoid writing styles that change the layout (trigger reflow) where possible.
+
+#### References
+
+- https://developers.google.com/web/fundamentals/performance/rendering/
+- https://csstriggers.com/
+
+### What are the advantages/disadvantages of using CSS preprocessors?
+
+**Advantages:**
+
+- CSS is made more maintainable.
+- Easy to write nested selectors.
+- Variables for consistent theming. Can share theme files across different projects.
+- Mixins to generate repeated CSS.
+- Sass features like loops, lists, and maps can make configuration easier and less verbose.
+- Splitting your code into multiple files. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.
+
+**Disadvantages:**
+
+- Requires tools for preprocessing. Re-compilation time can be slow.
+- Not writing currently and potentially usable CSS. For example, by using something like [postcss-loader](https://github.com/webpack-contrib/postcss-loader) with [webpack](https://webpack.js.org/), you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new skills that could pay off if/when they become standardized.
+
+### Describe what you like and dislike about the CSS preprocessors you have used.
+
+**Likes:**
+
+- Mostly the advantages mentioned above.
+- Less is written in JavaScript, which plays well with Node.
+
+**Dislikes:**
+
+- I use Sass via `node-sass`, which is a binding for LibSass written in C++. I have to frequently recompile it when switching between node versions.
+- In Less, variable names are prefixed with `@`, which can be confused with native CSS keywords like `@media`, `@import` and `@font-face` rule.
+
+### How would you implement a web design comp that uses non-standard fonts?
+
+Use `@font-face` and define `font-family` for different `font-weight`s.
+
+### Explain how a browser determines what elements match a CSS selector.
+
+This part is related to the above about [writing efficient CSS](#what-are-some-of-the-gotchas-for-writing-efficient-css). Browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.
+
+For example with this selector `p span`, browsers firstly find all the `<span>` elements and traverse up its parent all the way up to the root to find the `<p>` element. For a particular `<span>`, as soon as it finds a `<p>`, it knows that the `<span>` matches and can stop its matching.
+
+#### References
+
+- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
+
+### Describe pseudo-elements and discuss what they are used for.
+
+A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (`:first-line`, `:first-letter`) or adding elements to the markup (combined with `content: ...`) without having to modify the markup (`:before`, `:after`).
+
+- `:first-line` and `:first-letter` can be used to decorate text.
+- Used in the `.clearfix` hack as shown above to add a zero-space element with `clear: both`.
+- Triangular arrows in tooltips use `:before` and `:after`. Encourages separation of concerns because the triangle is considered part of styling and not really the DOM.
+
+#### References
+
+- https://css-tricks.com/almanac/pseudo-selectors/b/after-and-before/
+
+### Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
+
+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.
+
+The CSS box model is responsible for calculating:
+
+- How much space a block element takes up.
+- Whether or not borders and/or margins overlap, or collapse.
+- A box's dimensions.
+
+The box model has the following rules:
+
+- The dimensions of a block element are calculated by `width`, `height`, `padding`, `border`s, and `margin`s.
+- If no `height` is specified, a block element will be as high as the content it contains, plus `padding` (unless there are floats, for which see below).
+- If no `width` is specified, a non-floated block element will expand to fit the width of its parent minus `padding`.
+- The `height` of an element is calculated by the content's `height`.
+- The `width` of an element is calculated by the content's `width`.
+- By default, `padding`s and `border`s are not part of the `width` and `height` of an element.
+
+#### References
+
+- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
+
+### What does `* { box-sizing: border-box; }` do? What are its advantages?
+
+- By default, elements have `box-sizing: content-box` applied, and only the content size is being accounted for.
+- `box-sizing: border-box` changes how the `width` and `height` of elements are being calculated, `border` and `padding` are also being included in the calculation.
+- The `height` of an element is now calculated by the content's `height` + vertical `padding` + vertical `border` width.
+- The `width` of an element is now calculated by the content's `width` + horizontal `padding` + horizontal `border` width.
+- Taking into account `padding`s and `border`s as part of our box model resonates better with how designers actually imagine content in grids.
+
+#### References
+
+- https://www.paulirish.com/2012/box-sizing-border-box-ftw/
+
+### What is the CSS `display` property and can you give a few examples of its use?
+
+- `none`, `block`, `inline`, `inline-block`, `flex`, `grid`, `table`, `table-row`, `table-cell`, `list-item`.
+
+| `display` | Description |
+| :-- | :-- |
+| `none` | Does not display an element (the element no longer affects the layout of the document). All child element are also no longer displayed. The document is rendered as if the element did not exist in the document tree |
+| `block` | The element consumes the whole line in the block direction (which is usually horizontal) |
+| `inline` | Elements can be laid out beside each other |
+| `inline-block` | Similar to `inline`, but allows some `block` properties like setting `width` and `height` |
+| `table` | Behaves like the `<table>` element |
+| `table-row` | Behaves like the `<tr>` element |
+| `table-cell` | Behaves like the `<td>` element |
+| `list-item` | Behaves like a `<li>` element which allows it to define `list-style-type` and `list-style-position` |
+
+### What's the difference between `inline` and `inline-block`?
+
+I shall throw in a comparison with `block` for good measure.
+
+|  | `block` | `inline-block` | `inline` |
+| --- | --- | --- | --- |
+| Size | Fills up the width of its parent container. | Depends on content. | Depends on content. |
+| Positioning | Start on a new line and tolerates no HTML elements next to it (except when you add `float`) | Flows along with other content and allows other elements beside it. | Flows along with other content and allows other elements beside it. |
+| Can specify `width` and `height` | Yes | Yes | No. Will ignore if being set. |
+| Can be aligned with `vertical-align` | No | Yes | Yes |
+| Margins and paddings | All sides respected. | All sides respected. | Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on `line-height`, even though the `border` and `padding` appear visually around the content. |
+| Float | - | - | Becomes like a `block` element where you can set vertical margins and paddings. |
+
+### What's the difference between a `relative`, `fixed`, `absolute` and `static`ally positioned element?
+
+A positioned element is an element whose computed `position` property is either `relative`, `absolute`, `fixed` or `sticky`.
+
+- `static` - The default position; the element will flow into the page as it normally would. The `top`, `right`, `bottom`, `left` and `z-index` properties do not apply.
+- `relative` - The element's position is adjusted relative to itself, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).
+- `absolute` - The element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins. These elements do not affect the position of other elements.
+- `fixed` - The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn't move when scrolled.
+- `sticky` - Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as `relative` positioned until it crosses a specified threshold, at which point it is treated as `fixed` positioned.
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/CSS/position
+
+### What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
+
+- **Bootstrap** - Slow release cycle. Bootstrap 4 has been in alpha for almost 2 years. Add a spinner button component, as it is widely used.
+- **Semantic UI** - Source code structure makes theme customization extremely hard to understand. Its unconventional theming system is a pain to customize. Hardcoded config path within the vendor library. Not well-designed for overriding variables unlike in Bootstrap.
+- **Bulma** - A lot of non-semantic and superfluous classes and markup required. Not backward compatible. Upgrading versions breaks the app in subtle manners.
+
+### Have you played around with the new CSS Flexbox or Grid specs?
+
+Yes. Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.
+
+Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. Bootstrap and Bulma are based on Flexbox, and it is probably the recommended way to create layouts these days. Have tried Flexbox before but ran into some browser incompatibility issues (Safari) in using `flex-grow`, and I had to rewrite my code using `inline-blocks` and math to calculate the widths in percentages, it wasn't a nice experience.
+
+Grid is by far the most intuitive approach for creating grid-based layouts (it better be!) but browser support is not wide at the moment.
+
+#### References
+
+- https://philipwalton.github.io/solved-by-flexbox/
+
+### Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?
+
+Note that these two 2 approaches are not exclusive.
+
+Making a website responsive means that some elements will respond by adapting its size or other functionality according to the device's screen size, typically the viewport width, through CSS media queries, for example, making the font size smaller on smaller devices.
+
+```css
+@media (min-width: 601px) {
+  .my-class {
+    font-size: 24px;
+  }
+}
+
+@media (max-width: 600px) {
+  .my-class {
+    font-size: 12px;
+  }
+}
+```
+
+A mobile-first strategy is also responsive, however it agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to other devices later. Following the previous example:
+
+```css
+.my-class {
+  font-size: 12px;
+}
+
+@media (min-width: 600px) {
+  .my-class {
+    font-size: 24px;
+  }
+}
+```
+
+A mobile-first strategy has 2 main advantages:
+
+- It's more performant on mobile devices, since all the rules applied for them don't have to be validated against any media queries.
+- It forces to write cleaner code in respect to responsive CSS rules.
+
+### How is responsive design different from adaptive design?
+
+Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on.
+
+Responsive design works on the principle of flexibility - a single fluid website that can look good on any device. Responsive websites use media queries, flexible grids, and responsive images to create a user experience that flexes and changes based on a multitude of factors. Like a single ball growing or shrinking to fit through several different hoops.
+
+Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. The site detects the type of device used and delivers the pre-set layout for that device. Instead of a single ball going through several different-sized hoops, you'd have several different balls to use depending on the hoop size.
+
+Both have these methods have some issues that need to be weighed:
+
+- Responsive design can be quite challenging, as you're essentially using a single albeit responsive layout to fit all situations. How to set the media query breakpoints is one such challenge. Do you use standardized breakpoint values? Or, do you use breakpoints that make sense to your particular layout? What if that layout changes?
+- Adaptive design generally requires user agent sniffing, or DPI detection, etc., all of which can prove unreliable.
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
+- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
+
+### Have you ever worked with retina graphics? If so, when and what techniques did you use?
+
+_Retina_ is just a marketing term to refer to high resolution screens with a pixel ratio bigger than 1. The key thing to know is that using a pixel ratio means these displays are emulating a lower resolution screen in order to show elements with the same size. Nowadays we consider all mobile devices _retina_ defacto displays.
+
+Browsers by default render DOM elements according to the device resolution, except for images.
+
+In order to have crisp, good-looking graphics that make the best of retina displays we need to use high resolution images whenever possible. However using always the highest resolution images will have an impact on performance as more bytes will need to be sent over the wire.
+
+To overcome this problem, we can use responsive images, as specified in HTML5. It requires making available different resolution files of the same image to the browser and let it decide which image is best, using the html attribute `srcset` and optionally `sizes`, for instance:
+
+```html
+<div responsive-background-image>
+  <img
+    src="/images/test-1600.jpg"
+    sizes="
+      (min-width: 768px) 50vw,
+      (min-width: 1024px) 66vw,
+      100vw"
+    srcset="
+      /images/test-400.jpg   400w,
+      /images/test-800.jpg   800w,
+      /images/test-1200.jpg 1200w
+    " />
+</div>
+```
+
+It is important to note that browsers which don't support HTML5's `srcset` (i.e. IE11) will ignore it and use `src` instead. If we really need to support IE11 and we want to provide this feature for performance reasons, we can use a JavaScript polyfill, e.g. Picturefill (link in the references).
+
+For icons, I would also opt to use SVGs and icon fonts where possible, as they render very crisply regardless of resolution.
+
+#### References
+
+- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
+- http://scottjehl.github.io/picturefill/
+
+### Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?
+
+`translate()` is a value of CSS `transform`. Changing `transform` or `opacity` does not trigger browser reflow or repaint but does trigger compositions; whereas changing the absolute positioning triggers `reflow`. `transform` causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence `translate()` is more efficient and will result in shorter paint times for smoother animations.
+
+When using `translate()`, the element still occupies its original space (sort of like `position: relative`), unlike in changing the absolute positioning.
+
+#### References
+
+- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
+
+### Other Answers
+
+- https://neal.codes/blog/front-end-interview-css-questions/
+- https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/
+- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
diff --git a/contents/front-end-system-design-applications.md b/contents/front-end-system-design-applications.md
new file mode 100644
index 0000000000..ed59f30506
--- /dev/null
+++ b/contents/front-end-system-design-applications.md
@@ -0,0 +1,91 @@
+---
+title: Front End System Design Interview - Applications
+slug: front-end-system-design/applications
+sidebar_label: Applications
+description: Master frontend system design interviews with the RADIO framework. Real examples from Facebook, Instagram, Netflix with senior engineer insights.
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Front End System Design Questions](https://www.greatfrontend.com/front-end-system-design-playbook/types-of-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+## Examples
+
+- [News feed (e.g. Facebook)](https://www.greatfrontend.com/questions/system-design/news-feed-facebook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- [E-commerce marketplace (e.g. Amazon)](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- [Chat application (e.g. Messenger)](https://www.greatfrontend.com/questions/system-design/chat-application-messenger?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- [Photo sharing application (e.g. Instagram)](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- [Pinterest](https://www.greatfrontend.com/questions/system-design/pinterest?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- [Collaborative editor (e.g. Google docs)](https://www.greatfrontend.com/questions/system-design/collaborative-editor-google-docs?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- [Travel booking website (e.g. Airbnb)](https://www.greatfrontend.com/questions/system-design/travel-booking-airbnb?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- [Video streaming (e.g. Netflix)](https://www.greatfrontend.com/questions/system-design/video-streaming-netflix?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- [Email client (e.g. Microsoft Outlook)](https://www.greatfrontend.com/questions/system-design/email-client-outlook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+
+## Framework
+
+In system design interviews, candidates are supposed to lead the conversation. Here's a framework you can use to give an outline to the interviewer as to what you are going to cover (not necessarily in that order). The framework is called **RADIO** and it is made up of the first character of each aspect.
+
+- Requirements exploration
+- Architecture
+- Data model
+- Interface definition (API)
+- Optimizations and deep dive
+   - User experience (UX)
+   - Performance
+   - Accessibility (a11y)
+   - Internationalization (i18n)
+   - Multi-device support
+   - Security
+
+### Requirements exploration
+
+Every system design interview should start with clarifying requirements about the question, which is usually left vague intentionally. Some considerations:
+
+- What devices should the system support? Desktop web, mobile web, etc
+- What's the primary device that users will access the system on?
+- Which browsers should we support?
+- Do we need to support internationalization?
+- Does the app need to work offline?
+
+### Architecture / High-level design
+
+Architecture for front end interviews are typically focused on the client-side architecture, and not on large scale distributed systems where databases, load balancers and servers are involved.
+
+For applications, common architectures include Model-View-Controller, Model-View-ViewModel, Flux, N-tier (where data tier is on the client) etc.
+
+### Data model
+
+Client app state, which is a combination of server state (database) and true client state (non-persisted to the server).
+
+### Interface definition (API)
+
+API design for applications will refer to the HTTP/network API parameters and the shape of the responses.
+
+### Optimization and deep dives
+
+With the architectural basics of the application covered, we can dive into specific areas which the application might need special attention to. Note that there almost definitely won't be enough time to cover every area, and not every area will be very relevant to the component at hand.
+
+Showing knowledge about these areas and being able to dive deep into them are traits of senior developers.
+
+- User experience (UX)
+- Performance
+- Accessibility (a11y)
+- Internationalization (i18n)
+- Multi-device support
+- Security
+
+## Helpful articles
+
+Many companies blog about their technical challenges in the front end domain and these are great content to learn more about designing front end systems.
+
+- [Building the Google Photos Web UI](https://medium.com/google-design/google-photos-45b714dfbed1)
+- [Twitter Lite and High Performance React Progressive Web Apps at Scale](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3)
+- [A Netflix Web Performance Case Study](https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9)
+- [A Tinder Progressive Web App Performance Case Study](https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0)
+- [A Pinterest Progressive Web App Performance Case Study](https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154)
+- [A React And Preact Progressive Web App Performance Case Study: Treebo](https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299)
+- [Rebuilding our tech stack for the new Facebook.com](https://engineering.fb.com/2020/05/08/web/facebook-redesign/)
+
+[GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) shows you how to approach front end system design interviews with their [Front End System Design Playbook](https://www.greatfrontend.com/front-end-system-design-playbook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) and case studies. You can also do hands-on practice through their [huge question bank of 500+ questions](https://www.greatfrontend.com/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), each with solutions written by ex-FAANG senior engineers to learn more about system design.
diff --git a/contents/front-end-system-design-ui-components.md b/contents/front-end-system-design-ui-components.md
new file mode 100644
index 0000000000..a70e5c4b57
--- /dev/null
+++ b/contents/front-end-system-design-ui-components.md
@@ -0,0 +1,169 @@
+---
+title: Front End System Design Interview - User Interface Components
+slug: front-end-system-design/ui-components
+sidebar_label: User interface components
+description: Complete guide to frontend system design interviews for UI components. Learn the RADIO framework with real examples and optimization techniques.
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Front End System Design Questions](https://www.greatfrontend.com/front-end-system-design-playbook/types-of-questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+## Examples
+
+- [Autocomplete](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- [Image carousel](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- [Dropdown menu](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- [Modal dialog](https://www.greatfrontend.com/questions/system-design/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- [Rich text editor](https://www.greatfrontend.com/questions/system-design/rich-text-editor?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- [Poll widget](https://www.greatfrontend.com/questions/system-design/poll-widget?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- Tooltip
+
+To find out more, check out [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), which shows you how to approach front end system design interviews with their [Front End System Design Playbook](https://www.greatfrontend.com/front-end-system-design-playbook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) and case studies. There are also [blog posts](https://www.greatfrontend.com/blog?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) that will cover some of the following topics in more detail.
+
+## Framework
+
+In system design interviews, candidates are supposed to lead the conversation. Here's a framework you can use to give an outline to the interviewer as to what you are going to cover (not necessarily in that order). The framework is called **RADIO** and it is made up of the first character of each aspect.
+
+- **<u>R</u>equirements exploration**: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions.
+- **<u>A</u>rchitecture / High-level design**: Identify the key components of the product and how they are related to each other.
+- **<u>D</u>ata model**: Describe the various data entities, the fields they contain and which component(s) they belong to.
+- **<u>I</u>nterface definition (API)**: Define the interface (API) between components in the product, functionality of each API, their parameters and responses.
+- **<u>O</u>ptimizations and deep dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product.
+
+You can write this structure down on the whiteboard/online editor so that you don't forget.
+
+### 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!
+
+Thankfully, components have well-defined scope and not try to do too many things. You likely have used such a component yourself and possibly know what you need from such a component.
+
+Some considerations:
+
+- What devices should the system support? Desktop web, mobile web, etc
+- What's the primary device that users will access the system on?
+- Which browsers should we support?
+- Do we need to support internationalization?
+- How much styling customization do we want to allow?
+
+### Architecture / High-level design
+
+Architecture for front end interviews are typically focused on the client-side architecture, and not on large scale distributed systems where databases, load balancers and servers are involved.
+
+For components, list down the various subcomponents that will exist within it and what data is being passed among each component.
+
+Let's take an image carousel example. Subcomponents within an image carousel would be:
+
+- **Main image**: An image that displays the photo in focus
+- **Thumbnail**: Smaller images below the (Will there be thumbnails? You will only know if you clarified requirements earlier)
+- **Image store**: A client side cache of the list of photos to display
+
+If you have a whiteboard/online drawing tool, it would also be helpful to draw diagrams to illustrate the entities and their relationships. Which subcomponent communicates with which when a user interaction occurs.
+
+### Data model
+
+Data model for components will refer to the component state. The concept of state should be familiar to most front end developers who have used front end UI libraries/frameworks such as React, Angular, Vue, Svelte, etc. In every of these libraries/frameworks, state is a common concept.
+
+Deciding what data to put in state is essential to doing well for this portion. Few factors to consider when deciding what goes into component state:
+
+- State is allowed to change over time during the lifecycle of the component, typically as a result of user interactions.
+- Each component should maintain its own independent state which allows **multiple instances** of the component to coexist on a single page. The state of a component instance should not affect the state of another instance.
+- Components are easier to reason about (read/understand) the fewer the fields there are in the state. We should strive to reduce the amount of state needed. If a component uses a value which can be derived from another piece of state, then that value should most likely not be part of the state. For example if your component is rendering a list of items and you want to display a message when there are no items to render, there shouldn't be an additional `isEmpty` state because it can be derived from the length of the `items`.
+- If a component has multiple subcomponents, it'll be best if it's possible to consolidate the state within the top level and the rest of the components are pure and stateless.
+
+### Interface definition (API)
+
+The key idea behind components is for them to be reused and abstract complexities. Good components are designed in a way that they can be reused in multiple scenarios, and users do not have to know how they work internally before using them. In the case of components, API refers to configuration options that the component developer would expose to other developers for specification.
+
+- What are the configuration options you would allow for the component? (`props` in React). What would be reasonable defaults?
+- Follow the [Open-closed principle](https://en.wikipedia.org/wiki/Open%E2%80%93closed_principle) - the component should be open for extension but closed for modification.
+- If your component is meant to be part of a UI library that doesn't bother about the appearance and leaves the styling to the user, extra care has to go into the design of the props and to allow users to customize the look and feel of the components. There are a few ways to go about this in React:
+  - [Composition](https://tkdodo.eu/blog/component-composition-is-great-btw) - Props which accept React components which also promotes code reuse.
+  - [Render props](https://www.patterns.dev/react/render-props-pattern/) are function props that a component uses to know what to render. It also helps in reusing behavior without bothering about the appearance.
+  - `className` or `style` props - Allows users to inject class names and/or styling attributes to inner DOM elements. This could have negative consequences but is still a common way of allowing user to customize component appearance.
+- Possible configuration options:
+  - Lifecycle/event hooks - `onClick`, `onChange`, `onBlur`, `onFocus`, etc.
+
+### Optimization and deep dives
+
+With the basics of the component covered, we can now delve into specific areas that may require special attention. It is important to note that due to time constraints, it may not be possible to cover every area, and not all areas may be highly relevant to the specific component at hand.
+
+Showing knowledge about these areas and being able to dive deep into them are traits of senior front end engineers.
+
+#### User experience (UX)
+
+UX might not fall squarely under engineering but good front end engineers have good understanding of UX and building UI with great UX. There are too many UX practices to be aware of, but the most common ones/low hanging fruits are:
+
+- Reflect state of the component to the user - If there's a pending background request, show a spinner. If there's an error, make sure to display it instead of silently failing.
+- Display an empty state if there are no items in a list, instead of not rendering anything.
+- Destructive actions should have a confirmation step, especially irreversible ones.
+- Disable interactive elements if they trigger an async request! Prevents double firing of events in the case of accidental double clicking (possible for people with motor disabilities).
+- If there are search inputs involved, each keystroke should not fire a network request.
+- Handle extreme cases
+  - Strings can be really long/short and your UI should not look weird in either case. For long strings, they can have their contents truncated and hidden behind a "View more" button.
+  - If there are many items to display within a component, they shouldn't all be displayed on the screen at once and making the page extremely long/wide. Paginate the items or contain them within a container with a maximum width/height.
+- Keyboard friendliness - This involves making sure the component is keyboard-friendly
+  - Add shortcuts to make the component more usable by keyboard-only users
+  - Ensure that elements can be focused and tab order within the component is correct
+- Accessibility is part of UX but will be covered in a later section
+
+#### Performance
+
+In front end, performance typically refers to a few things - loading speed, how fast the UI responds to user interactions, memory space (heap) required by the component.
+
+- **Loading speed**: The less JavaScript the component contains, the less JavaScript the browser has to download to load the component and the lower the network request time. It's also important to modularize components and allow users to download only the necessary JavaScript modules needed for their use case.
+- **Responsiveness to user interactions**
+  - If a user interaction results in displaying of data that has to be loaded over the network, there will be a delay between the user interaction and updating of the UI. Minimizing that delay or removing it entirely is the key to improving responsiveness.
+  - JavaScript in a browser is single-threaded. The browser can only do execute one line of code at any one time. The less work (JavaScript executed, DOM updates) the component has to do when a user does something on the page, the faster the component can update the UI to respond to the changes.
+- **Memory space**: The more memory your component takes up on the page, the slower the browser performs and the experience will feel sluggish/janky. If your component has to render hundreds/thousands of items (e.g. number of images in a carousel, number of items in a selector), memory space might become significant.
+
+**Optimization tips**
+
+- **Render only what is displayed on the screen**: For example, in a selector, only a few items are displayed to the user even if the list can contain hundreds of elements. Rendering all of them into the browser would be a waste of processing power and memory space. We can leverage a technique called windowing/virtualization to emulate a list with many elements while only rendering a few as possible to make the final result look as if there was no optimization done (especially preserving scroll height). Read more about virtualization [here](https://web.dev/articles/virtualize-long-lists-react-window).
+- **Lazy loading/load only necessary data**: For example, in a photo gallery component, a user can have hundreds and thousands of photos, but it won't be feasible to load all of them eagerly. Most likely the user won't be browsing all of them in that session too. An optimization could be to load only the ones that the user is likely to view, or those that are within the viewport (which we call "above the fold"). The rest of the photos can be loaded on demand, which introduces responsiveness delay, but the next tip will help you to handle that.
+- **Preloading/prefetching data ahead of time**: For example, in an image carousel where there are too many images to load beforehand, an optimization could be to load the next image ahead of time while the user is still on the current image, such that when the user clicks the "Next" button, there's no network delay needed because the next image has already been loaded. This technique can also be modified to load the next N images to handle the case where users click "Next" in rapid succession.
+
+#### Accessibility (a11y)
+
+Accessibility (a11y) is the practice of making your websites usable by as many people as possible.
+
+- Color contrasts (e.g. color blindness)
+- Keyboard friendliness (e.g. people with limited fine motor control)
+- Visual Impairment (e.g. blind)
+- Transcripts for audio (e.g. deaf)
+
+Not everyone surfs the web the same way; some people use screenreaders and keyboards exclusively (no mouse)! Here are some basic tips for achieving a11y in UI components:
+
+- Foreground colors should have sufficient contrast from the background colors
+- Use the right HTML tags for semanticness, or the right `aria-role` attributes
+- Clickable items should have `tabindex` attribute (so that they are focusable) and also "cursor: pointer" styling to indicate that they can be clicked on
+- Images should have `alt` text, which will be read out by screen readers and act as a fallback description if the image fails to load
+- `aria-label`s help to provide context to elements which are non-obvious to non-visual users. E.g. an icon button without any text label within it should have an `aria-label` attribute so that the intention is clear for users who can't see the icon
+
+a11y is one of the most commonly neglected areas as most of the time they're invisible to the developer. Showing knowledge of a11y and possessing the skills to create accessible components will definitely reflect well on you. More reading on [Web Accessibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/).
+
+#### Internationalization (i18n)
+
+Internationalization (i18n) is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language. Typically components shouldn't have to worry about i18n unless under few specific circumstances:
+
+- **Component uses strings**: Strings used in the component shouldn't be hardcoded to a specific language (e.g. "Prev"/"Next" in the controls of a photo gallery component). The strings can be specified as a prop with the English version as default
+- **Order of content matters**: Does your component support RTL (right to left) languages like Arabic and Hebrew?
+
+#### Multi-device support
+
+Is the component expected to be used on mobile web? Mobile devices have unique constraints - they have less powerful hardware and viewport size is smaller. Hence things could be done differently to allow the component to work better on mobile devices - making a conscious effort to:
+
+- Not use too much memory - using too much memory makes the device perform slower
+- Increasing the hit box of interactive elements - fingers have an easier time tapping on the right element
+
+#### Security
+
+Most of the time, components aren't exposed to security vulnerabilities, but it can still happen. Here are the more common security vulnerabilities you should be aware of:
+
+- XSS - Is your component vulnerable to cross-site scripting (XSS)? E.g. Do you render user input via `.innerHTML` or `dangerouslySetInnerHTML` (React-specific)?
+- CSRF (Cross-Site Request Forgery)
+- Clickjacking
+- [`rel=noopener`](https://mathiasbynens.github.io/rel-noopener/)
diff --git a/contents/front-end-system-design.md b/contents/front-end-system-design.md
new file mode 100644
index 0000000000..a48ad71c60
--- /dev/null
+++ b/contents/front-end-system-design.md
@@ -0,0 +1,70 @@
+---
+title: Front End System Design Interview Overview
+sidebar_label: Overview
+description: Master front end system design interviews with our comprehensive guide. UI components, applications, RADIO framework + free examples included.
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Front End System Design Playbook](https://www.greatfrontend.com/front-end-system-design-playbook/introduction?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+Front end system design resources are harder to come by and we are one of the pioneers of this topic.
+
+"System" here typically refers to front end systems, which is quite different from the typical distributed system design questions for Software Engineering interviews. The questions asked can be quite similar to the possible questions in ["Build user interfaces" format](./build-front-end-user-interfaces.md) but with more focus on architecture and design. There's a significant amount of overlap between them - you will likely need to do some design (data model, API) when you build UI, and also do some coding here to illustrate your ideas/app state format.
+
+The difference between this section and the ["Build user interfaces" format](./build-front-end-user-interfaces.md) is that the problems are usually of a larger scope. If the interview session does not exceed an hour, candidates are expected to talk about the design tradeoffs, possible implementations, instead of coding it out. Because system design questions usually involve multiple components and knowledge across the web stack, candidates usually do not have to go very deep into the lower-level details of each component and can keep the discussion at a higher level, focusing on API design between the client and server, the various front end components and their APIs/props.
+
+Many of the topics mentioned in the ["Build user interfaces" format](./build-front-end-user-interfaces.md) are also relevant for front end system design - API design, scalability, performance, user experience, i18n, accessibility, security, etc. Candidates should take the initiative and bring these topics up and lead the discussion with the interviewer. The more advanced topics such as performance, accessibility and i18n are what differentiates senior candidates from junior candidates.
+
+The two main kinds of front end system design interviews are **UI components** and **applications**.
+
+## Front end system design examples
+
+- User interface components
+  - [Autocomplete](https://www.greatfrontend.com/questions/system-design/autocomplete?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+  - [Image carousel](https://www.greatfrontend.com/questions/system-design/image-carousel?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+  - [Dropdown menu](https://www.greatfrontend.com/questions/system-design/dropdown-menu?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+  - [Modal dialog](https://www.greatfrontend.com/questions/system-design/modal-dialog?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+  - [Rich text editor](https://www.greatfrontend.com/questions/system-design/rich-text-editor?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+- Applications
+  - [News feed (e.g. Facebook)](https://www.greatfrontend.com/questions/system-design/news-feed-facebook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+  - [E-commerce marketplace (e.g. Amazon)](https://www.greatfrontend.com/questions/system-design/e-commerce-amazon?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+  - [Chat application (e.g. Messenger)](https://www.greatfrontend.com/questions/system-design/chat-application-messenger?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+  - [Photo sharing application (e.g. Instagram)](https://www.greatfrontend.com/questions/system-design/photo-sharing-instagram?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+  - [Pinterest](https://www.greatfrontend.com/questions/system-design/pinterest?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+  - [Collaborative editors (e.g. Google Docs)](https://www.greatfrontend.com/questions/system-design/collaborative-editor-google-docs?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+  - [Travel booking website (e.g. Airbnb)](https://www.greatfrontend.com/questions/system-design/travel-booking-airbnb?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+  - [Video streaming (e.g. Netflix)](https://www.greatfrontend.com/questions/system-design/video-streaming-netflix?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Paid)
+
+If you are interested to find out more, [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) shows you how to approach front end system design interviews with their [Front End System Design Playbook](https://www.greatfrontend.com/front-end-system-design-playbook?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) and case studies.
+
+## RADIO Framework
+
+System design interview questions tend to be open ended and vague, leaving you with lots of room to explore. If the interviewer tells you which specific areas to focus on, that's great!
+
+We have invented a simple-to-remember framework – the **RADIO framework**, that you can use to give an outline to the interviewer as to what you are going to cover.
+
+This framework is called **RADIO** because it is made up of the first character of each area. You can write this structure down on the whiteboard/online editor to remind yourself to cover each aspect (not necessarily in that order):
+
+- **<u>R</u>equirements exploration**: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions
+- **<u>A</u>rchitecture / High-level design**: Identify the key components of the product and how they are related to each other
+- **<u>D</u>ata model**: Describe the various data entities, the fields they contain and which component(s) they belong to
+- **<u>I</u>nterface definition (API)**: Define the interface (API) between components in the product, functionality of each API, their parameters and responses
+- **<u>O</u>ptimizations and deep dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product
+
+The RADIO framework is also helpful when working on new front end projects at work, especially when writing technical design documents. It's not limited to front end; the framework can also be applied to back end systems.
+
+How to approach system design questions for applications and UI components can differ significantly, and we'll go through them in more detail in subsequent sections.
+
+## Things you would not have to do (probably)
+
+Because front end system design interviews focus on front end, you probably do not have to:
+
+- Design a database schema
+- Discuss which kind of database to use (SQL vs NoSQL)
+- Discuss about scaling your servers and database (sharding, vertical/horizontal scaling)
+- Discuss about availability, fault tolerance, latency, etc
+
+Read more about the differences between [Front End vs Back End System Design interviews](/blog/front-end-vs-back-end-system-design-interviews/#differences).
diff --git a/contents/html-questions.md b/contents/html-questions.md
new file mode 100644
index 0000000000..17b8bc6df8
--- /dev/null
+++ b/contents/html-questions.md
@@ -0,0 +1,212 @@
+---
+title: HTML Interview Questions (Quiz) for Front End Interviews
+sidebar_label: HTML quiz
+description: Complete HTML interview questions guide with detailed answers on DOCTYPE, storage types, templating, and multilingual sites for frontend developers
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's HTML Quiz Interview Questions](https://www.greatfrontend.com/questions/html-interview-questions/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+Answers to [Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/html-questions.md). Pull requests for suggestions and corrections are welcome!
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+### What does a DOCTYPE do?
+
+**DOCTYPE** is an abbreviation for **Document Type**. A DOCTYPE is always associated to a **DTD** - for **Document Type Definition**.
+
+A DTD defines how documents of a certain type should be structured (i.e. a `button` can contain a `span` but not a `div`), whereas a DOCTYPE declares what DTD a document _supposedly_ respects (i.e. this document respects the HTML DTD).
+
+For webpages, the DOCTYPE declaration is required. It is used to tell user agents what version of the HTML specifications your document respects. Once a user agent has recognized a correct DOCTYPE, it will trigger the **no-quirks mode** matching this DOCTYPE for reading the document. If a user agent doesn't recognize a correct DOCTYPE, it will trigger the **quirks mode**.
+
+The DOCTYPE declaration for the HTML5 standards is `<!DOCTYPE html>`.
+
+#### References
+
+- https://html.spec.whatwg.org/multipage/syntax.html#the-doctype
+- https://html.spec.whatwg.org/multipage/xhtml.html
+- https://quirks.spec.whatwg.org/
+
+### How do you serve a page with content in multiple languages?
+
+I will assume that it is asking about the most common case, which is how to serve a page with content available in multiple languages, but the content within the page should be displayed only in one consistent language.
+
+When an HTTP request is made to a server, the requesting user agent usually sends information about language preferences, such as in the `Accept-Language` header. The server can then use this information to return a version of the document in the appropriate language if such an alternative is available. The returned HTML document should also declare the `lang` attribute in the `<html>` tag, such as `<html lang="en">...</html>`.
+
+Of course this is useless for letting a search engine know that the same content is available in different languages, and so you must also make use of the `hreflang` attribute in the `<head>`. Eg. `<link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />`
+
+In the back end, the HTML markup will contain `i18n` placeholders and content for the specific language stored in YML or JSON formats. The server then dynamically generates the HTML page with content in that particular language, usually with the help of a back end framework.
+
+#### References
+
+- https://www.w3.org/International/getting-started/language
+- https://support.google.com/webmasters/answer/189077
+
+### What kind of things must you be wary of when designing or developing for multilingual sites?
+
+- Use `lang` attribute in your HTML.
+- Directing users to their native language - Allow a user to change his country/language easily without hassle.
+- Text in raster-based images (e.g. png, gif, jpg, etc.), is not a scalable approach - Placing text in an image is still a popular way to get good-looking, non-system fonts to display on any computer. However, to translate image text, each string of text will need to have a separate image created for each language. Anything more than a handful of replacements like this can quickly get out of control.
+- Restrictive words/sentence length - Some content can be longer when written in another language. Be wary of layout or overflow issues in the design. It's best to avoid designing where the amount of text would make or break a design. Character counts come into play with things like headlines, labels, and buttons. They are less of an issue with free-flowing text such as body text or comments.
+- Be mindful of how colors are perceived - Colors are perceived differently across languages and cultures. The design should use color appropriately.
+- Formatting dates and currencies - Calendar dates are sometimes presented in different ways. Eg. "May 31, 2012" in the U.S. vs. "31 May 2012" in parts of Europe.
+- Do not concatenate translated strings - Do not do anything like `"The date today is " + date`. It will break in languages with different word order. Use a template string with parameters substitution for each language instead. For example, look at the following two sentences in English and Chinese respectively: `I will travel on {% date %}` and `{% date %} 我会出发`. Note that the position of the variable is different due to grammar rules of the language.
+- Language reading direction - In English, we read from left-to-right, top-to-bottom, in traditional Japanese, text is read up-to-down, right-to-left.
+- Useful-to-have - include the locale in the path (e.g en_US, zh_CN, etc).
+
+#### References
+
+- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
+
+### What are `data-` attributes good for?
+
+Before JavaScript frameworks became popular, front end developers used `data-` attributes to store extra data within the DOM itself, without other hacks such as non-standard attributes, extra properties on the DOM. It is intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
+
+These days, using `data-` attributes is generally not encouraged. One reason is that users can modify the data attribute easily by using inspect element in the browser. The data model is better stored within JavaScript itself and stay updated with the DOM via data binding possibly through a library or a framework.
+
+However, one perfectly valid use of data attributes, is to add a hook for _end to end_ testing frameworks such as Selenium and Capybara without having to create a meaningless classes or ID attributes. The element needs a way to be found by a particular Selenium spec and something like `data-selector='the-thing'` is a valid way to do so without convoluting the semantic markup otherwise.
+
+#### References
+
+- http://html5doctor.com/html5-custom-data-attributes/
+- https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
+
+### Consider HTML5 as an open web platform. What are the building blocks of HTML5?
+
+- Semantics - Allowing you to describe more precisely what your content is.
+- Connectivity - Allowing you to communicate with the server in new and innovative ways.
+- Offline and storage - Allowing webpages to store data on the client-side locally and operate offline more efficiently.
+- Multimedia - Making video and audio first-class citizens in the Open Web.
+- 2D/3D graphics and effects - Allowing a much more diverse range of presentation options.
+- Performance and integration - Providing greater speed optimization and better usage of computer hardware.
+- Device access - Allowing for the usage of various input and output devices.
+- Styling - Letting authors write more sophisticated themes.
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Glossary/HTML5
+
+### Describe the difference between a `cookie`, `sessionStorage` and `localStorage`.
+
+All the above-mentioned technologies are key-value storage mechanisms on the client side. They are only able to store values as strings.
+
+|  | `cookie` | `localStorage` | `sessionStorage` |
+| --- | --- | --- | --- |
+| Initiator | Client or server. Server can use `Set-Cookie` header | Client | Client |
+| Expiry | Manually set | Forever | On tab close |
+| Persistent across browser sessions | Depends on whether expiration is set | Yes | No |
+| Sent to server with every HTTP request | Cookies are automatically being sent via `Cookie` header | No | No |
+| Capacity (per domain) | 4kb | 5MB | 5MB |
+| Accessibility | Any window | Any window | Same tab |
+
+_Note: If the user decides to clear browsing data via whatever mechanism provided by the browser, this will clear out any `cookie`, `localStorage`, or `sessionStorage` stored. It's important to keep this in mind when designing for local persistance, especially when comparing to alternatives such as server side storing in a database or similar (which of course will persist despite user actions)._
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies
+- http://tutorial.techaltum.com/local-and-session-storage.html
+
+### Describe the difference between `<script>`, `<script async>` and `<script defer>`.
+
+- `<script>` - HTML parsing is blocked, the script is fetched and executed immediately, HTML parsing resumes after the script is executed.
+- `<script async>` - The script will be fetched in parallel to HTML parsing and executed as soon as it is available (potentially before HTML parsing completes). Use `async` when the script is independent of any other scripts on the page, for example, analytics.
+- `<script defer>` - The script will be fetched in parallel to HTML parsing and executed when the page has finished parsing. If there are multiple of them, each deferred script is executed in the order they were encountered in the document. If a script relies on a fully-parsed DOM, the `defer` attribute will be useful in ensuring that the HTML is fully parsed before executing. A deferred script must not contain `document.write`.
+
+Note: The `async` and `defer` attributes are ignored for scripts that have no `src` attribute.
+
+#### References
+
+- https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
+- https://stackoverflow.com/questions/10808109/script-tag-async-defer
+- https://bitsofco.de/async-vs-defer/
+
+### Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`? Do you know any exceptions?
+
+**Placing `<link>`s in the `<head>`**
+
+Putting `<link>`s in the `<head>` is part of proper specification in building an optimized website. When a page first loads, HTML and CSS are being parsed simultaneously; HTML creates the DOM (Document Object Model) and CSS creates the CSSOM (CSS Object Model). Both are needed to create the visuals in a website, allowing for a quick "first meaningful paint" timing. This progressive rendering is a category optimization sites are measured in their performance scores. Putting stylesheets near the bottom of the document is what prohibits progressive rendering in many browsers. Some browsers block rendering to avoid having to repaint elements of the page if their styles change. The user is then stuck viewing a blank white page. Other times there can be flashes of unstyled content (FOUC), which show a webpage with no styling applied.
+
+**Placing `<script>`s just before `</body>`**
+
+`<script>` tags block HTML parsing while they are being downloaded and executed which can slow down your page. Placing the scripts at the bottom will allow the HTML to be parsed and displayed to the user first.
+
+An exception for positioning of `<script>`s at the bottom is when your script contains `document.write()`, but these days it's not a good practice to use `document.write()`. Also, placing `<script>`s at the bottom means that the browser cannot start downloading the scripts until the entire document is parsed. This ensures your code that needs to manipulate DOM elements will not throw an error and halt the entire script. If you need to put `<script>`s in the `<head>`, use the `defer` attribute, which will achieve the same effect of running the script only after the HTML is parsed but the browser can download the script earlier.
+
+Keep in mind that putting scripts just before the closing `</body>` tag will create the illusion that the page loads faster on an empty cache (since the scripts won't block downloading the rest of the document). However, if you have some code you want to run during page load, it will only start executing after the entire page has loaded. If you put those scripts in the `<head>` tag, they would start executing before - so on a primed cache the page would actually appear to load faster.
+
+**`<head>` and `<body>` tags are now optional**
+
+As per the HTML5 specification, certain HTML tags like `<head>` and `<body>` are optional. Google's style guide even recommends removing them to save bytes. However, this practice is still not widely adopted and the performance gain is likely to be minimal and for most sites it's not likely going to matter.
+
+#### References
+
+- https://developer.yahoo.com/performance/rules.html#css_top
+- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
+- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
+
+### What is progressive rendering?
+
+Progressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.
+
+It used to be much more prevalent in the days before broadband internet but it is still used in modern development as mobile data connections are becoming increasingly popular (and unreliable)!
+
+Examples of such techniques:
+
+- Lazy loading of images - Images on the page are not loaded all at once. JavaScript will be used to load an image when the user scrolls into the part of the page that displays the image.
+- Prioritizing visible content (or above-the-fold rendering) - Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the `DOMContentLoaded`/`load` event to load in other resources and content.
+- Async HTML fragments - Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found [here](https://innovation.ebayinc.com/stories/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
+
+#### References
+
+- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
+- https://innovation.ebayinc.com/stories/async-fragments-rediscovering-progressive-html-rendering-with-marko/
+
+### Why you would use a `srcset` attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
+
+You would use the `srcset` attribute when you want to serve different images to users depending on their device display width - serve higher quality images to devices with retina display enhances the user experience while serving lower resolution images to low-end devices increase performance and decrease data wastage (because serving a larger image will not have any visible difference). For example: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` tells the browser to display the small, medium or large `.jpg` graphic depending on the client's resolution. The first value is the image name and the second is the width of the image in pixels. For a device width of 320px, the following calculations are made:
+
+- 500 / 320 = 1.5625
+- 1000 / 320 = 3.125
+- 2000 / 320 = 6.25
+
+If the client's resolution is 1x, 1.5625 is the closest, and `500w` corresponding to `small.jpg` will be selected by the browser.
+
+If the resolution is retina (2x), the browser will use the closest resolution above the minimum. Meaning it will not choose the 500w (1.5625) because it is greater than 1 and the image might look bad. The browser would then choose the image with a resulting ratio closer to 2 which is 1000w (3.125).
+
+`srcset`s solve the problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low-density screens.
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images
+- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
+
+### Have you used different HTML templating languages before?
+
+Yes, Pug (formerly Jade), ERB, Slim, Handlebars, Jinja, Liquid, and EJS just to name a few. In my opinion, they are more or less the same and provide similar functionality of escaping content and helpful filters for manipulating the data to be displayed. Most templating engines will also allow you to inject your own filters in the event you need custom processing before display.
+
+### Other Answers
+
+- https://neal.codes/blog/front-end-interview-questions-html/
+- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
+
+### What is the difference between canvas and SVG?
+
+Canvas is raster-based, working with pixels, while SVG is vector-based, employing mathematical descriptions of shapes. Canvas employs imperative drawing, where each step is specified with JavaScript, ideal for dynamic and interactive graphics like animations and games.
+
+Conversely, SVG uses declarative drawing, with shapes and paths defined directly in HTML, making it more accessible and SEO-friendly. Canvas is optimal for complex scenes due to its lower overhead, but scaling may lead to image quality loss. SVG, being resolution-independent, adapts to various screen sizes without sacrificing quality.
+
+Ultimately, canvas suits dynamic, performance-intensive graphics, while SVG excels in scalable, resolution-independent graphics, with inherent accessibility and SEO advantages.
+
+### What are empty elements in HTML?
+
+Empty elements in HTML are elements that do not contain any content between their opening and closing tags. Instead, they are self-closing tags, meaning they have a forward slash (`/`) before the closing angle bracket (`>`). Some common examples of empty elements include:
+
+- `<img>`: Used to embed images into the document.
+- `<input>`: Used to accept user input.
+- `<br>`: Used to insert line breaks or forced line breaks.
+- `<hr>`: Used to create horizontal rules or separators.
diff --git a/contents/introduction.md b/contents/introduction.md
new file mode 100644
index 0000000000..841c56e04d
--- /dev/null
+++ b/contents/introduction.md
@@ -0,0 +1,133 @@
+---
+title: Introduction
+description: "Complete frontend developer interview guide: JavaScript coding questions, UI components, system design, quiz prep & expert tips from ex FAANG engineers."
+
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Front End Interview Playbook](https://www.greatfrontend.com/front-end-interview-playbook/introduction?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+## What is this?
+
+Unlike typical software engineer job interviews, front end interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the front end domain — HTML, CSS, JavaScript, just to name a few.
+
+Many front end interviews are highly-focused on domain knowledge and applying them to real-world scenarios. You might find that grinding LeetCode is not all you need when it comes to interviewing for a front end position, but that's a good thing! Front end interviews tend to test concepts that are more practical and relevant to real world front end development. But that doesn't mean that you don't have to be familiar with basic data structures and algorithmic concepts - there's just less emphasis on them and you are probably going to get easier algorithmic questions.
+
+While there are some existing resources to help front end developers in preparing for interviews, they aren't as abundant as materials for a general software engineer interview. Among the existing resources, the most helpful question bank would probably be [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions). Unfortunately, there aren't many complete and satisfactory answers to these questions readily available online. This handbook answers these trivia-style questions along with information and guidance for other front end interview formats.
+
+To solve this problem, [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), an interview preparation platform for Front End interviews, was created. It contains Front End interview questions and answers written by ex-FAANG Senior Engineers (such as myself!) and have both questions and answers for various formats: JavaScript, TypeScript, User Interface Component questions, quiz-style front end questions.
+
+## General tips for front end interviews
+
+Regardless of which type of format you are given, one thing stays true - you need to be extremely strong in your front end fundamentals and constantly display mastery of them to your interviewer.
+
+Be _extremely_ familiar with the following concepts:
+
+- **CSS**: Specificity, Box model, Layout, Positioning
+- **JavaScript**: `this` keyword, Prototypes, closures, Async-style code, Promises, Timers (`setTimeout()`, `setInterval()`)
+- **JavaScript design patterns**: Observer pattern, Module pattern
+- **HTML**: Event delegation (it was useful in almost every interview), DOM traversal, DOM manipulation, Form validation and submission
+- **DOM manipulation**: DOM manipulation in Vanilla JS, or jQuery at the very least. Not all interviews allow you to use React as they want to see mastery of the fundamentals
+
+Look out for interview questions by companies on Glassdoor. Front end questions are not as abundant but some still can be found. Many companies use similar questions.
+
+## Front end interview formats
+
+Unlike Software Engineering interviews, the formats for front end interviews are less known and not standardized across the industry. We painstakingly searched the Internet for front end interview questions asked by popular tech companies and collated the questions which appear very often. 
+
+In general, you should be familiar with the following questions and formats:
+
+### JavaScript coding
+
+This is the front end version of LeetCode-style algorithm questions. Implement a function in JavaScript, which can be a utility function found in Lodash/Underscore (e.g. `throttle`), or a polyfill for the JavaScript language/DOM APIs (e.g. `Array.prototype.filter()`, `Promise.all()`, `document.getElementsByClassName()`).
+
+- Implement `Array.prototype` functions: `map`, `reduce`, `filter`, `sort`.
+- Implement DOM APIs: `document.getElementsByClassName`, `document.getElementsByTagName`.
+- `debounce`/`throttle`.
+- Implement Promise/Promise-related APIs: `Promise`, `Promise.all`, `Promise.any`.
+
+[**Read more about JavaScript coding questions →**](./javascript-utility-function.md)
+
+[**Practice JavaScript coding questions on GreatFrontEnd**](https://www.greatfrontend.com/questions/formats/javascript-functions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
+
+### User interface coding
+
+Build user interfaces (can be a UI component, an app, or a game) using HTML, CSS, and JavaScript.
+
+- Components
+  - Autocomplete (**very popular**)
+  - Photo gallery
+  - Image carousel
+  - Tooltip component
+  - Star rating widget
+- Apps
+  - Build tic-tac-toe
+  - Build a chess board with movable pieces
+
+[**Read more about user interface coding questions →**](./build-front-end-user-interfaces.md)
+
+[**Practice user interface coding questions on GreatFrontEnd**](https://www.greatfrontend.com/questions/formats/ui-coding?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
+
+### Algorithmic coding
+
+LeetCode-style algorithmic coding questions which evaluate your core data structures and algorithms skills. You can be asked any question on LeetCode and might be asked to complete them using JavaScript.
+
+[**Read more about algorithm coding questions →**](./algorithms.md)
+
+[**Practice algorithm questions on GreatFrontEnd**](https://www.greatfrontend.com/questions/formats/algo-coding?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
+
+### Quiz/trivia questions
+
+Short questions which test your knowledge and have clear non-subjective answers. These are usually asked within coding / system design rounds and even by recruiters because the accuracy of the answers can be somewhat verified by non-technical people. Here are some examples:
+
+- JavaScript
+  - What is a closure?
+  - What is the difference between a promise and a callback?
+  - Explain the `this` keyword in JavaScript.
+- CSS
+  - What is the CSS box model?
+  - Various CSS `position` properties and its differences.
+
+[**Read more about front end quiz questions →**](./trivia.md)
+
+[**Practice front end quiz questions on GreatFrontEnd**](https://www.greatfrontend.com/questions/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
+
+### System design
+
+Describe and discuss how you would build a UI component/app/game and its architecture. This is the front end version of system design questions. E.g. Describe how you would build the Emoji autocomplete feature in a chat app, what APIs it would have, what components there are to the feature, how to ensure it has good performance, UX, etc.
+
+- Design an image carousel component.
+- Design an email client application.
+
+[**Read more about front end system design →**](./front-end-system-design.md)
+
+[**Practice front end system design questions on GreatFrontEnd**](https://www.greatfrontend.com/questions/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
+
+You can also try out the above mentioned question types at [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook). It has [over 500+ practice questions](https://www.greatfrontend.com/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) and all of them are provided with comprehensive answers written by ex-FAANG senior engineers.
+
+## Company interview formats
+
+Through extensive research, here are the different type of formats companies ask during the technical rounds of front end interviews. If you're interviewing for front end engineering roles at certain companies, prepare accordingly!
+
+_Legend: ✅: Asked, ❌: Not asked, ⚠️: No data_
+
+| Company | Quiz | Algorithms | JavaScript coding | UI coding | System design |
+| :-- | :-: | :-: | :-: | :-: | :-: |
+| [**Airbnb**](./companies/airbnb-front-end-interview-questions.md) | ❌ | ✅ | ✅ | ✅ | ✅ |
+| [**Amazon**](./companies/amazon-front-end-interview-questions.md) | ✅ | ✅ | ✅ | ✅ | ✅ |
+| [**Apple**](./companies/apple-front-end-interview-questions.md) | ✅ | ⚠️ | ✅ | ✅ | ⚠️ |
+| [**Atlassian**](./companies/atlassian-front-end-interview-questions.md) | ❌ | ❌ | ✅ | ✅ | ✅ |
+| [**ByteDance/TikTok**](./companies/bytedance-tiktok-front-end-interview-questions.md) | ✅ | ✅ | ✅ | ✅ | ❌ |
+| [**Dropbox**](./companies/dropbox-front-end-interview-questions.md) | ❌ | ⚠️ | ✅ | ✅ | ✅ |
+| [**Facebook/Meta**](./companies/meta-front-end-interview-questions.md) | ✅ | ❌ | ✅ | ❌ | ✅ |
+| **Flipkart** | ⚠️ | ✅ | ⚠️ | ⚠️ | ⚠️ |
+| [**Google**](./companies/google-front-end-interview-questions.md) | ✅ | ✅ | ✅ | ✅ | ✅ |
+| [**LinkedIn**](./companies/linkedin-front-end-interview-questions.md) | ✅ | ⚠️ | ✅ | ✅ | ⚠️ |
+| [**Lyft**](./companies/lyft-front-end-interview-questions.md) | ❌ | ❌ | ✅ | ✅ | ✅ |
+| [**Microsoft**](./companies/microsoft-front-end-interview-questions.md) | ✅ | ✅ | ✅ | ✅ | ✅ |
+| [**Salesforce**](./companies/salesforce-front-end-interview-questions.md) | ✅ | ⚠️ | ⚠️ | ⚠️ | ⚠️ |
+| [**Twitter**](./companies/twitter-front-end-interview-questions.md) | ✅ | ⚠️ | ✅ | ✅ | ⚠️ |
+| [**Uber**](./companies/uber-front-end-interview-questions.md) | ⚠️ | ⚠️ | ✅ | ✅ | ⚠️ |
diff --git a/contents/javascript-questions.md b/contents/javascript-questions.md
new file mode 100644
index 0000000000..3765567ea1
--- /dev/null
+++ b/contents/javascript-questions.md
@@ -0,0 +1,1393 @@
+---
+title: JavaScript Interview Questions (Quiz) for Front End Interviews
+sidebar_label: JavaScript quiz
+description: Master JavaScript interview prep with 50+ essential coding questions, quiz topics, and detailed answers for front end developers. Practice now
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's JavaScript Quiz Interview Questions](https://www.greatfrontend.com/questions/javascript-interview-questions/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+Answers to [Front-end Job Interview Questions - JS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/main/src/questions/javascript-questions.md). Pull requests for suggestions and corrections are welcome!
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+### Explain event delegation
+
+Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM. The benefits of this technique are:
+
+- Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.
+- There is no need to unbind the handler from elements that are removed and to bind the event for new elements.
+
+#### References
+
+- https://davidwalsh.name/event-delegate
+- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
+
+### Explain how `this` works in JavaScript
+
+There's no simple explanation for `this`; it is one of the most confusing concepts in JavaScript. A hand-wavey explanation is that the value of `this` depends on how the function is called. I have read many explanations on `this` online, and I found [Arnav Aggrawal](https://medium.com/@arnav_aggarwal)'s explanation to be the clearest. The following rules are applied:
+
+1. If the `new` keyword is used when calling the function, `this` inside the function is a brand new object.
+2. If `apply`, `call`, or `bind` are used to call/create a function, `this` inside the function is the object that is passed in as the argument.
+3. If a function is called as a method, such as `obj.method()` — `this` is the object that the function is a property of.
+4. If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, `this` is the global object. In a browser, it is the `window` object. If in strict mode (`'use strict'`), `this` will be `undefined` instead of the global object.
+5. If multiple of the above rules apply, the rule that is higher wins and will set the `this` value.
+6. If the function is an ES2015 arrow function, it ignores all the rules above and receives the `this` value of its surrounding scope at the time it is created.
+
+For an in-depth explanation, do check out his [article on Medium](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3?gi=86e207b492c4).
+
+#### Can you give an example of one of the ways that working with this has changed in ES6?
+
+ES6 allows you to use [arrow functions](https://2ality.com/2017/12/alternate-this.html#arrow-functions) which uses the [enclosing lexical scope](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this). This is usually convenient, but does prevent the caller from controlling context via `.call` or `.apply`—the consequences being that a library such as `jQuery` will not properly bind `this` in your event handler functions. Thus, it's important to keep this in mind when refactoring large legacy applications.
+
+#### References
+
+- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3?gi=86e207b492c4
+- https://stackoverflow.com/a/3127440/1751946
+
+### Explain how prototypal inheritance works
+
+All JavaScript objects have a `__proto__` property with the exception of objects created with `Object.create(null)`, that is a reference to another object, which is called the object's "prototype". When a property is accessed on an object and if the property is not found on that object, the JavaScript engine looks at the object's `__proto__`, and the `__proto__`'s `__proto__` and so on, until it finds the property defined on one of the `__proto__`s or until it reaches the end of the prototype chain. This behavior simulates classical inheritance, but it is really more of [delegation than inheritance](https://davidwalsh.name/javascript-objects).
+
+#### Example of Prototypal Inheritance
+
+```js
+// Parent object constructor.
+function Animal(name) {
+  this.name = name;
+}
+
+// Add a method to the parent object's prototype.
+Animal.prototype.makeSound = function () {
+  console.log('The ' + this.constructor.name + ' makes a sound.');
+};
+
+// Child object constructor.
+function Dog(name) {
+  Animal.call(this, name); // Call the parent constructor.
+}
+
+// Set the child object's prototype to be the parent's prototype.
+Object.setPrototypeOf(Dog.prototype, Animal.prototype);
+
+// Add a method to the child object's prototype.
+Dog.prototype.bark = function () {
+  console.log('Woof!');
+};
+
+// Create a new instance of Dog.
+const bolt = new Dog('Bolt');
+
+// Call methods on the child object.
+console.log(bolt.name); // "Bolt"
+bolt.makeSound(); // "The Dog makes a sound."
+bolt.bark(); // "Woof!"
+```
+
+Things to note are:
+
+- `.makeSound` is not defined on `Dog`, so the engine goes up the prototype chain and finds `.makeSound` off the inherited `Animal`.
+- Using `Object.create` to build the inheritance chain is no longer recommended. Use `Object.setPrototypeOf` instead.
+
+#### References
+
+- http://dmitrysoshnikov.com/ecmascript/javascript-the-core/
+- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
+- https://davidwalsh.name/javascript-objects
+- https://crockford.com/javascript/prototypal.html
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
+
+### What do you think of AMD vs CommonJS?
+
+Both are ways to implement a module system, which was not natively present in JavaScript until ES2015 came along. CommonJS is synchronous while AMD (Asynchronous Module Definition) is obviously asynchronous. CommonJS is designed with server-side development in mind while AMD, with its support for asynchronous loading of modules, is more intended for browsers.
+
+I find AMD syntax to be quite verbose and CommonJS is closer to the style you would write import statements in other languages. Most of the time, I find AMD unnecessary, because if you served all your JavaScript into one concatenated bundle file, you wouldn't benefit from the async loading properties. Also, CommonJS syntax is closer to Node style of writing modules and there is less context-switching overhead when switching between client side and server side JavaScript development.
+
+I'm glad that with ES2015 modules, that has support for both synchronous and asynchronous loading, we can finally just stick to one approach. Although it hasn't been fully rolled out in browsers and in Node, we can always use transpilers to convert our code.
+
+#### References
+
+- https://auth0.com/blog/javascript-module-systems-showdown/
+- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
+
+### Explain why the following doesn't work as an IIFE: `function foo(){ }();`. What needs to be changed to properly make it an IIFE?
+
+IIFE stands for Immediately Invoked Function Expressions. The JavaScript parser reads `function foo(){ }();` as `function foo(){ }` and `();`, where the former is a _function declaration_ and the latter (a pair of parentheses) is an attempt at calling a function but there is no name specified, hence it throws `Uncaught SyntaxError: Unexpected token )`.
+
+Here are two ways to fix it that involves adding more parentheses: `(function foo(){ })()` and `(function foo(){ }())`. Statements that begin with `function` are considered to be _function declarations_; by wrapping this function within `()`, it becomes a _function expression_ which can then be executed with the subsequent `()`. These functions are not exposed in the global scope and you can even omit its name if you do not need to reference itself within the body.
+
+You might also use `void` operator: `void function foo(){ }();`. Unfortunately, there is one issue with such approach. The evaluation of given expression is always `undefined`, so if your IIFE function returns anything, you can't use it. An example:
+
+```js
+const foo = void (function bar() {
+  return 'foo';
+})();
+
+console.log(foo); // undefined
+```
+
+#### References
+
+- https://lucybain.com/blog/2014/immediately-invoked-function-expression/
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
+
+### What's the difference between a variable that is: `null`, `undefined` or undeclared? How would you go about checking for any of these states?
+
+**Undeclared** variables are created when you assign a value to an identifier that is not previously created using `var`, `let` or `const`. Undeclared variables will be defined globally, outside of the current scope. In strict mode, a `ReferenceError` will be thrown when you try to assign to an undeclared variable. Undeclared variables are bad just like how global variables are bad. Avoid them at all cost! To check for them, wrap its usage in a `try`/`catch` block.
+
+```js
+function foo() {
+  x = 1; // Throws a ReferenceError in strict mode
+}
+
+foo();
+console.log(x); // 1
+```
+
+A variable that is `undefined` is a variable that has been declared, but not assigned a value. It is of type `undefined`. If a function does not return any value as the result of executing it is assigned to a variable, the variable also has the value of `undefined`. To check for it, compare using the strict equality (`===`) operator or `typeof` which will give the `'undefined'` string. Note that you should not be using the abstract equality operator to check, as it will also return `true` if the value is `null`.
+
+```js
+var foo;
+console.log(foo); // undefined
+console.log(foo === undefined); // true
+console.log(typeof foo === 'undefined'); // true
+
+console.log(foo == null); // true. Wrong, don't use this to check!
+
+function bar() {}
+var baz = bar();
+console.log(baz); // undefined
+```
+
+A variable that is `null` will have been explicitly assigned to the `null` value. It represents no value and is different from `undefined` in the sense that it has been explicitly assigned. To check for `null,` simply compare using the strict equality operator. Note that like the above, you should not be using the abstract equality operator (`==`) to check, as it will also return `true` if the value is `undefined`.
+
+```js
+var foo = null;
+console.log(foo === null); // true
+console.log(typeof foo === 'object'); // true
+
+console.log(foo == undefined); // true. Wrong, don't use this to check!
+```
+
+As a personal habit, I never leave my variables undeclared or unassigned. I will explicitly assign `null` to them after declaring if I don't intend to use it yet. If you use a linter in your workflow, it will usually also be able to check that you are not referencing undeclared variables.
+
+#### References
+
+- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined
+
+### What is a closure, and how/why would you use one?
+
+A closure is the combination of a function and the lexical environment within which that function was declared. The word "lexical" refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Closures are functions that have access to the outer (enclosing) function's variables—scope chain even after the outer function has returned.
+
+**Why would you use one?**
+
+- Data privacy / emulating private methods with closures. Commonly used in the [module pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript).
+- [Partial applications or currying](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x).
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures
+- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
+
+### Can you describe the main difference between a `.forEach` loop and a `.map()` loop and why you would pick one versus the other?
+
+To understand the differences between the two, let's look at what each function does.
+
+**`forEach`**
+
+- Iterates through the elements in an array.
+- Executes a callback for each element.
+- Does not return a value.
+
+```js
+const a = [1, 2, 3];
+const doubled = a.forEach((num, index) => {
+  // Do something with num and/or index.
+});
+
+// doubled = undefined
+```
+
+**`map`**
+
+- Iterates through the elements in an array.
+- "Maps" each element to a new element by calling the function on each element, creating a new array as a result.
+
+```js
+const a = [1, 2, 3];
+const doubled = a.map((num) => {
+  return num * 2;
+});
+
+// doubled = [2, 4, 6]
+```
+
+The main difference between `.forEach` and `.map()` is that `.map()` returns a new array. If you need the result, but do not wish to mutate the original array, `.map()` is the clear choice. If you simply need to iterate over an array, `forEach` is a fine choice.
+
+#### References
+
+- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f?gi=c9bc30cbec28
+
+### What's a typical use case for anonymous functions?
+
+They can be used in IIFEs to encapsulate some code within a local scope so that variables declared in it do not leak to the global scope.
+
+```js
+(function () {
+  // Some code here.
+})();
+```
+
+As a callback that is used once and does not need to be used anywhere else. The code will seem more self-contained and readable when handlers are defined right inside the code calling them, rather than having to search elsewhere to find the function body.
+
+```js
+setTimeout(function () {
+  console.log('Hello world!');
+}, 1000);
+```
+
+Arguments to functional programming constructs or Lodash (similar to callbacks).
+
+```js
+const arr = [1, 2, 3];
+const double = arr.map(function (el) {
+  return el * 2;
+});
+console.log(double); // [2, 4, 6]
+```
+
+#### References
+
+- https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
+- https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
+
+### How do you organize your code? (module pattern, classical inheritance?)
+
+In the past, I've used Backbone for my models which encourages a more OOP approach, creating Backbone models and attaching methods to them.
+
+The module pattern is still great, but these days, I use React/Redux which utilize a single-directional data flow based on Flux architecture. I would represent my app's models using plain objects and write utility pure functions to manipulate these objects. State is manipulated using actions and reducers like in any other Redux application.
+
+I avoid using classical inheritance where possible. When and if I do, I stick to [these rules](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4).
+
+### What's the difference between host objects and native objects?
+
+Native objects are objects that are part of the JavaScript language defined by the ECMAScript specification, such as `String`, `Math`, `RegExp`, `Object`, `Function`, etc.
+
+Host objects are provided by the runtime environment (browser or Node), such as `window`, `XMLHTTPRequest`, etc.
+
+#### References
+
+- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
+
+### Difference between: `function Person(){}`, `var person = Person()`, and `var person = new Person()`?
+
+This question is pretty vague. My best guess at its intention is that it is asking about constructors in JavaScript. Technically speaking, `function Person(){}` is just a normal function declaration. The convention is to use PascalCase for functions that are intended to be used as constructors.
+
+`var person = Person()` invokes the `Person` as a function, and not as a constructor. Invoking as such is a common mistake if the function is intended to be used as a constructor. Typically, the constructor does not return anything, hence invoking the constructor like a normal function will return `undefined` and that gets assigned to the variable intended as the instance.
+
+`var person = new Person()` creates an instance of the `Person` object using the `new` operator, which inherits from `Person.prototype`. An alternative would be to use `Object.create`, such as: `Object.create(Person.prototype)`.
+
+```js
+function Person(name) {
+  this.name = name;
+}
+
+var person = Person('John');
+console.log(person); // undefined
+console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined
+
+var person = new Person('John');
+console.log(person); // Person { name: "John" }
+console.log(person.name); // "john"
+```
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
+
+### What's the difference between `.call` and `.apply`?
+
+Both `.call` and `.apply` are used to invoke functions and the first parameter will be used as the value of `this` within the function. However, `.call` takes in comma-separated arguments as the next arguments while `.apply` takes in an array of arguments as the next argument. An easy way to remember this is C for `call` and comma-separated and A for `apply` and an array of arguments.
+
+```js
+function add(a, b) {
+  return a + b;
+}
+
+console.log(add.call(null, 1, 2)); // 3
+console.log(add.apply(null, [1, 2])); // 3
+```
+
+### Explain `Function.prototype.bind`.
+
+Taken word-for-word from [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind):
+
+> The `bind()` method creates a new function that, when called, has its `this` keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
+
+In my experience, it is most useful for binding the value of `this` in methods of classes that you want to pass into other functions. This is frequently done in React components.
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
+
+### When would you use `document.write()`?
+
+`document.write()` writes a string of text to a document stream opened by `document.open()`. When `document.write()` is executed after the page has loaded, it will call `document.open` which clears the whole document (`<head>` and `<body>` removed!) and replaces the contents with the given parameter value. Hence it is usually considered dangerous and prone to misuse.
+
+There are some answers online that explain `document.write()` is being used in analytics code or [when you want to include styles that should only work if JavaScript is enabled](https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html). It is even being used in HTML5 boilerplate to [load scripts in parallel and preserve execution order](https://github.com/paulirish/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag)! However, I suspect those reasons might be outdated and in the modern day, they can be achieved without using `document.write()`. Please do correct me if I'm wrong about this.
+
+#### References
+
+- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
+- https://github.com/h5bp/html5-boilerplate/wiki/#documentwrite-script-tag
+
+### What's the difference between feature detection, feature inference, and using the UA string?
+
+**Feature Detection**
+
+Feature detection involves working out whether a browser supports a certain block of code, and running different code depending on whether it does (or doesn't), so that the browser can always provide a working experience rather crashing/erroring in some browsers. For example:
+
+```js
+if ('geolocation' in navigator) {
+  // Can use navigator.geolocation
+} else {
+  // Handle lack of feature
+}
+```
+
+[Modernizr](https://modernizr.com/) is a great library to handle feature detection.
+
+**Feature Inference**
+
+Feature inference checks for a feature just like feature detection, but uses another function because it assumes it will also exist, e.g.:
+
+```js
+if (document.getElementsByTagName) {
+  element = document.getElementById(id);
+}
+```
+
+This is not really recommended. Feature detection is more foolproof.
+
+**UA String**
+
+This is a browser-reported string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. It can be accessed via `navigator.userAgent`. However, the string is tricky to parse and can be spoofed. For example, Chrome reports both as Chrome and Safari. So to detect Safari you have to check for the Safari string and the absence of the Chrome string. Avoid this method.
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Testing/Feature_detection
+- https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Browser_detection_using_the_user_agent
+
+### Explain Ajax in as much detail as possible.
+
+Ajax (asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly use JSON instead of XML, due to the advantages of JSON being native to JavaScript.
+
+The `XMLHttpRequest` API is frequently used for the asynchronous communication or these days, the `fetch()` API.
+
+#### References
+
+- https://en.wikipedia.org/wiki/Ajax_(programming)
+- https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Network_requests
+
+### What are the advantages and disadvantages of using Ajax?
+
+**Advantages**
+
+- Better interactivity. New content from the server can be changed dynamically without the need to reload the entire page.
+- Reduce connections to the server since scripts and stylesheets only have to be requested once.
+- State can be maintained on a page. JavaScript variables and DOM state will persist because the main container page was not reloaded.
+- Basically most of the advantages of an SPA.
+
+**Disadvantages**
+
+- Dynamic webpages are harder to bookmark.
+- Does not work if JavaScript has been disabled in the browser.
+- Some webcrawlers do not execute JavaScript and would not see content that has been loaded by JavaScript.
+- Webpages using Ajax to fetch data will likely have to combine the fetched remote data with client-side templates to update the DOM. For this to happen, JavaScript will have to be parsed and executed on the browser, and low-end mobile devices might struggle with this.
+- Basically most of the disadvantages of an SPA.
+
+### Explain how JSONP works (and how it's not really Ajax).
+
+JSONP (JSON with Padding) is a method commonly used to bypass the cross-domain policies in web browsers because Ajax requests from the current page to a cross-origin domain is not allowed.
+
+JSONP works by making a request to a cross-origin domain via a `<script>` tag and usually with a `callback` query parameter, for example: `https://example.com?callback=printData`. The server will then wrap the data within a function called `printData` and return it to the client.
+
+```html
+<!-- https://mydomain.com -->
+<script>
+  function printData(data) {
+    console.log(`My name is ${data.name}!`);
+  }
+</script>
+
+<script src="https://example.com?callback=printData"></script>
+```
+
+```js
+// File loaded from https://example.com?callback=printData
+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.
+
+JSONP can be unsafe and has some security implications. As JSONP is really JavaScript, it can do everything else JavaScript can do, so you need to trust the provider of the JSONP data.
+
+These days, [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) is the recommended approach and JSONP is seen as a hack.
+
+#### References
+
+- https://stackoverflow.com/a/2067584/1751946
+
+### Have you ever used JavaScript templating? If so, what libraries have you used?
+
+Yes. Handlebars, Underscore, Lodash, AngularJS, and JSX. I disliked templating in AngularJS because it made heavy use of strings in the directives and typos would go uncaught. JSX is my new favorite as it is closer to JavaScript and there is barely any syntax to learn. Nowadays, you can even use ES2015 template string literals as a quick way for creating templates without relying on third-party code.
+
+```js
+const template = `<div>My name is: ${name}</div>`;
+```
+
+However, do be aware of a potential XSS in the above approach as the contents are not escaped for you, unlike in templating libraries.
+
+### Explain "hoisting".
+
+Hoisting is a term used to explain the behavior of variable declarations in your code. Variables declared or initialized with the `var` keyword will have their declaration "moved" up to the top of their module/function-level scope, which we refer to as hoisting. However, only the declaration is hoisted, the assignment (if there is one), will stay where it is.
+
+Note that the declaration is not actually moved - the JavaScript engine parses the declarations during compilation and becomes aware of declarations and their scopes. It is just easier to understand this behavior by visualizing the declarations as being hoisted to the top of their scope. Let's explain with a few examples.
+
+```js
+console.log(foo); // undefined
+var foo = 1;
+console.log(foo); // 1
+```
+
+Function declarations have the body hoisted while the function expressions (written in the form of variable declarations) only has the variable declaration hoisted.
+
+```js
+// Function Declaration
+console.log(foo); // [Function: foo]
+foo(); // 'FOOOOO'
+function foo() {
+  console.log('FOOOOO');
+}
+console.log(foo); // [Function: foo]
+
+// Function Expression
+console.log(bar); // undefined
+bar(); // Uncaught TypeError: bar is not a function
+var bar = function () {
+  console.log('BARRRR');
+};
+console.log(bar); // [Function: bar]
+```
+
+Variables declared via `let` and `const` are hoisted as well. However, unlike `var` and `function`, they are not initialized and accessing them before the declaration will result in a `ReferenceError` exception. The variable is in a "temporal dead zone" from the start of the block until the declaration is processed.
+
+```js
+x; // undefined
+y; // Reference error: y is not defined
+
+var x = 'local';
+let y = 'local';
+```
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting
+- https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-not-hoisted-in-es6/31222689#31222689
+
+### Describe event bubbling.
+
+When an event triggers on a DOM element, it will attempt to handle the event if there is a listener attached, then the event is bubbled up to its parent and the same thing happens. This bubbling occurs up the element's ancestors all the way to the `document`. Event bubbling is the mechanism behind event delegation.
+
+### What's the difference between an "attribute" and a "property"?
+
+Attributes are defined on the HTML markup but properties are defined on the DOM. To illustrate the difference, imagine we have this text field in our HTML: `<input type="text" value="Hello">`.
+
+```js
+const input = document.querySelector('input');
+console.log(input.getAttribute('value')); // Hello
+console.log(input.value); // Hello
+```
+
+But after you change the value of the text field by adding "World!" to it, this becomes:
+
+```js
+console.log(input.getAttribute('value')); // Hello
+console.log(input.value); // Hello World!
+```
+
+#### References
+
+- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
+
+### Why is extending built-in JavaScript objects not a good idea?
+
+Extending a built-in/native JavaScript object means adding properties/functions to its `prototype`. While this may seem like a good idea at first, it is dangerous in practice. Imagine your code uses a few libraries that both extend the `Array.prototype` by adding the same `contains` method, the implementations will overwrite each other and your code will break if the behavior of these two methods is not the same.
+
+The only time you may want to extend a native object is when you want to create a polyfill, essentially providing your own implementation for a method that is part of the JavaScript specification but might not exist in the user's browser due to it being an older browser.
+
+#### References
+
+- https://lucybain.com/blog/2014/js-extending-built-in-objects/
+
+### Difference between document `load` event and document `DOMContentLoaded` event?
+
+The `DOMContentLoaded` event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
+
+`window`'s `load` event is only fired after the DOM and all dependent resources and assets have loaded.
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event
+- https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
+
+### What is the difference between `==` and `===`?
+
+`==` is the abstract equality operator while `===` is the strict equality operator. The `==` operator will compare for equality after doing any necessary type conversions. The `===` operator will not do type conversion, so if two values are not the same type `===` will simply return `false`. When using `==`, funky things can happen, such as:
+
+```js
+1 == '1'; // true
+1 == [1]; // true
+1 == true; // true
+0 == ''; // true
+0 == '0'; // true
+0 == false; // true
+```
+
+My advice is never to use the `==` operator, except for convenience when comparing against `null` or `undefined`, where `a == null` will return `true` if `a` is `null` or `undefined`.
+
+```js
+var a = null;
+console.log(a == null); // true
+console.log(a == undefined); // true
+```
+
+#### References
+
+- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
+
+### Explain the same-origin policy with regards to JavaScript.
+
+The same-origin policy prevents JavaScript from making requests across domain boundaries. An origin is defined as a combination of URI scheme, hostname, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model.
+
+#### References
+
+- https://en.wikipedia.org/wiki/Same-origin_policy
+
+### Make this work:
+
+```js
+duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
+```
+
+```js
+function duplicate(arr) {
+  return arr.concat(arr);
+}
+
+duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
+```
+
+Or with ES6:
+
+```js
+const duplicate = (arr) => [...arr, ...arr];
+
+duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
+```
+
+### Why is it called a Ternary expression, what does the word "Ternary" indicate?
+
+"Ternary" indicates three, and a ternary expression accepts three operands, the test condition, the "then" expression and the "else" expression. Ternary expressions are not specific to JavaScript and I'm not sure why it is even in this list.
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator
+
+### What is `"use strict";`? What are the advantages and disadvantages to using it?
+
+'use strict' is a statement used to enable strict mode to entire scripts or individual functions. Strict mode is a way to opt into a restricted variant of JavaScript.
+
+Advantages:
+
+- Makes it impossible to accidentally create global variables.
+- Makes assignments which would otherwise silently fail to throw an exception.
+- Makes attempts to delete undeletable properties throw an exception (where before the attempt would simply have no effect).
+- Requires that function parameter names be unique.
+- `this` is undefined in the global context.
+- It catches some common coding bloopers, throwing exceptions.
+- It disables features that are confusing or poorly thought out.
+
+Disadvantages:
+
+- Many missing features that some developers might be used to.
+- No more access to `function.caller` and `function.arguments`.
+- Concatenation of scripts written in different strict modes might cause issues.
+
+Overall, I think the benefits outweigh the disadvantages, and I never had to rely on the features that strict mode blocks. I would recommend using strict mode.
+
+#### References
+
+- https://2ality.com/2011/10/strict-mode-hatred.html
+- https://lucybain.com/blog/2014/js-use-strict/
+
+### 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`.
+
+Check out this version of FizzBuzz by [Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724).
+
+```js
+for (let i = 1; i <= 100; i++) {
+  let f = i % 3 == 0,
+    b = i % 5 == 0;
+  console.log(f ? (b ? 'FizzBuzz' : 'Fizz') : b ? 'Buzz' : i);
+}
+```
+
+I would not advise you to write the above during interviews though. Just stick with the long but clear approach. For more wacky versions of FizzBuzz, check out the reference link below.
+
+#### References
+
+- https://gist.github.com/jaysonrowe/1592432
+
+### Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?
+
+Every script has access to the global scope, and if everyone uses the global namespace to define their variables, collisions will likely occur. Use the module pattern (IIFEs) to encapsulate your variables within a local namespace.
+
+### Why would you use something like the `load` event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?
+
+The `load` event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
+
+The DOM event `DOMContentLoaded` will fire after the DOM for the page has been constructed, but do not wait for other resources to finish loading. This is preferred in certain cases when you do not need the full page to be loaded before initializing.
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
+
+### Explain what a single page app is and how to make one SEO-friendly.
+
+The below is taken from the awesome [Grab Front End Guide](https://github.com/grab/front-end-guide), which coincidentally, is written by me!
+
+Web developers these days refer to the products they build as web apps, rather than websites. While there is no strict difference between the two terms, web apps tend to be highly interactive and dynamic, allowing the user to perform actions and receive a response to their action. Traditionally, the browser receives HTML from the server and renders it. When the user navigates to another URL, a full-page refresh is required and the server sends fresh new HTML to the new page. This is called server-side rendering.
+
+However, in modern SPAs, client-side rendering is used instead. The browser loads the initial page from the server, along with the scripts (frameworks, libraries, app code) and stylesheets required for the whole app. When the user navigates to other pages, a page refresh is not triggered. The URL of the page is updated via the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). New data required for the new page, usually in JSON format, is retrieved by the browser via [AJAX](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Network_requests) requests to the server. The SPA then dynamically updates the page with the data via JavaScript, which it has already downloaded in the initial page load. This model is similar to how native mobile apps work.
+
+The benefits:
+
+- The app feels more responsive and users do not see the flash between page navigations due to full-page refreshes.
+- Fewer HTTP requests are made to the server, as the same assets do not have to be downloaded again for each page load.
+- Clear separation of the concerns between the client and the server; you can easily build new clients for different platforms (e.g. mobile, chatbots, smart watches) without having to modify the server code. You can also modify the technology stack on the client and server independently, as long as the API contract is not broken.
+
+The downsides:
+
+- Heavier initial page load due to the loading of framework, app code, and assets required for multiple pages.
+- There's an additional step to be done on your server which is to configure it to route all requests to a single entry point and allow client-side routing to take over from there.
+- SPAs are reliant on JavaScript to render content, but not all search engines execute JavaScript during crawling, and they may see empty content on your page. This inadvertently hurts the Search Engine Optimization (SEO) of your app. However, most of the time, when you are building apps, SEO is not the most important factor, as not all the content needs to be indexable by search engines. To overcome this, you can either server-side render your app or use services such as [Prerender](https://prerender.io/) to "render your javascript in a browser, save the static HTML, and return that to the crawlers".
+
+#### References
+
+- https://github.com/grab/front-end-guide#single-page-apps-spas
+- https://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
+- https://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
+- https://www.freecodecamp.org/news/heres-why-client-side-rendering-won-46a349fadb52
+
+### What is the extent of your experience with Promises and/or their polyfills?
+
+Possess working knowledge of it. A promise is an object that may produce a single value sometime in the future: either a resolved value or a reason that it's not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.
+
+Some common polyfills are `$.deferred`, Q and Bluebird but not all of them comply with the specification. ES2015 supports Promises out of the box and polyfills are typically not needed these days.
+
+#### References
+
+- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
+
+### What are the pros and cons of using Promises instead of callbacks?
+
+**Pros**
+
+- Avoid callback hell which can be unreadable.
+- Makes it easy to write sequential asynchronous code that is readable with `.then()`.
+- Makes it easy to write parallel asynchronous code with `Promise.all()`.
+- With promises, these scenarios which are present in callbacks-only coding, will not happen:
+  - Call the callback too early
+  - Call the callback too late (or never)
+  - Call the callback too few or too many times
+  - Fail to pass along any necessary environment/parameters
+  - Swallow any errors/exceptions that may happen
+
+**Cons**
+
+- Slightly more complex code (debatable).
+- In older browsers where ES2015 is not supported, you need to load a polyfill in order to use it.
+
+#### References
+
+- https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch3.md
+
+### What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
+
+Some examples of languages that compile to JavaScript include CoffeeScript, Elm, ClojureScript, PureScript, and TypeScript.
+
+Advantages:
+
+- Fixes some of the longstanding problems in JavaScript and discourages JavaScript anti-patterns.
+- Enables you to write shorter code, by providing some syntactic sugar on top of JavaScript, which I think ES5 lacks, but ES2015 is awesome.
+- Static types are awesome (in the case of TypeScript) for large projects that need to be maintained over time.
+
+Disadvantages:
+
+- Require a build/compile process as browsers only run JavaScript and your code will need to be compiled into JavaScript before being served to browsers.
+- Debugging can be a pain if your source maps do not map nicely to your pre-compiled source.
+- Most developers are not familiar with these languages and will need to learn it. There's a ramp up cost involved for your team if you use it for your projects.
+- Smaller community (depends on the language), which means resources, tutorials, libraries, and tooling would be harder to find.
+- IDE/editor support might be lacking.
+- These languages will always be behind the latest JavaScript standard.
+- Developers should be cognizant of what their code is being compiled to — because that is what would actually be running, and that is what matters in the end.
+
+Practically, ES2015 has vastly improved JavaScript and made it much nicer to write. I don't really see the need for CoffeeScript these days.
+
+#### References
+
+- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
+
+### What tools and techniques do you use for debugging JavaScript code?
+
+- React and Redux
+  - [React Devtools](https://github.com/facebook/react-devtools)
+  - [Redux Devtools](https://github.com/reduxjs/redux-devtools)
+- Vue
+  - [Vue Devtools](https://github.com/vuejs/devtools-v6)
+- JavaScript
+  - Chrome Devtools
+  - `debugger` statement
+  - Good old `console.log` debugging
+
+#### References
+
+- https://raygun.com/learn/javascript-debugging-tips
+
+### What language constructions do you use for iterating over object properties and array items?
+
+For objects:
+
+- `for-in` loops - `for (var property in obj) { console.log(property); }`. However, this will also iterate through its inherited properties, and you will add an `obj.hasOwnProperty(property)` check before using it.
+- `Object.keys()` - `Object.keys(obj).forEach(function (property) { ... })`. `Object.keys()` is a static method that will lists all enumerable properties of the object that you pass it.
+- `Object.getOwnPropertyNames()` - `Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`. `Object.getOwnPropertyNames()` is a static method that will lists all enumerable and non-enumerable properties of the object that you pass it.
+
+For arrays:
+
+- `for` loops - `for (var i = 0; i < arr.length; i++)`. The common pitfall here is that `var` is in the function scope and not the block scope and most of the time you would want block scoped iterator variable. ES2015 introduces `let` which has block scope and it is recommended to use that instead. So this becomes: `for (let i = 0; i < arr.length; i++)`.
+- `forEach` - `arr.forEach(function (el, index) { ... })`. This construct can be more convenient at times because you do not have to use the `index` if all you need is the array elements. There are also the `every` and `some` methods which will allow you to terminate the iteration early.
+- `for-of` loops - `for (let elem of arr) { ... }`. ES6 introduces a new loop, the `for-of` loop, that allows you to loop over objects that conform to the [iterable protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol) such as `String`, `Array`, `Map`, `Set`, etc. It combines the advantages of the `for` loop and the `forEach()` method. The advantage of the `for` loop is that you can break from it, and the advantage of `forEach()` is that it is more concise than the `for` loop because you don't need a counter variable. With the `for-of` loop, you get both the ability to break from a loop and a more concise syntax.
+
+Most of the time, I would prefer the `.forEach` method, but it really depends on what you are trying to do. Before ES6, we used `for` loops when we needed to prematurely terminate the loop using `break`. But now with ES6, we can do that with `for-of` loops. I would use `for` loops when I need even more flexibility, such as incrementing the iterator more than once per loop.
+
+Also, when using the `for-of` loop, if you need to access both the index and value of each array element, you can do so with the ES6 Array `entries()` method and destructuring:
+
+```js
+const arr = ['a', 'b', 'c'];
+
+for (let [index, elem] of arr.entries()) {
+  console.log(index, ': ', elem);
+}
+```
+
+#### References
+
+- https://2ality.com/2015/08/getting-started-es6.html#from-for-to-foreach-to-for-of
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries
+
+### Explain the difference between mutable and immutable objects.
+
+Immutability is a core principle in functional programming, and has lots to offer to object-oriented programs as well. A mutable object is an object whose state can be modified after it is created. An immutable object is an object whose state cannot be modified after it is created.
+
+#### What is an example of an immutable object in JavaScript?
+
+In JavaScript, some built-in types (numbers, strings) are immutable, but custom objects are generally mutable.
+
+Some built-in immutable JavaScript objects are `Math`, `Date`.
+
+Here are a few ways to add/simulate immutability on plain JavaScript objects.
+
+**Object Constant Properties**
+
+By combining `writable: false` and `configurable: false`, you can essentially create a constant (cannot be changed, redefined or deleted) as an object property, like:
+
+```js
+let myObject = {};
+Object.defineProperty(myObject, 'number', {
+  value: 42,
+  writable: false,
+  configurable: false,
+});
+console.log(myObject.number); // 42
+myObject.number = 43;
+console.log(myObject.number); // 42
+```
+
+**Prevent Extensions**
+
+If you want to prevent an object from having new properties added to it, but otherwise leave the rest of the object's properties alone, call `Object.preventExtensions(...)`:
+
+```js
+var myObject = {
+  a: 2,
+};
+
+Object.preventExtensions(myObject);
+
+myObject.b = 3;
+myObject.b; // undefined
+```
+
+In non-strict mode, the creation of `b` fails silently. In strict mode, it throws a `TypeError`.
+
+**Seal**
+
+`Object.seal()` creates a "sealed" object, which means it takes an existing object and essentially calls `Object.preventExtensions()` on it, but also marks all its existing properties as `configurable: false`.
+
+So, not only can you not add any more properties, but you also cannot reconfigure or delete any existing properties (though you can still modify their values).
+
+**Freeze**
+
+`Object.freeze()` creates a frozen object, which means it takes an existing object and essentially calls `Object.seal()` on it, but it also marks all "data accessor" properties as writable:false, so that their values cannot be changed.
+
+This approach is the highest level of immutability that you can attain for an object itself, as it prevents any changes to the object or to any of its direct properties (though, as mentioned above, the contents of any referenced other objects are unaffected).
+
+```js
+var immutable = Object.freeze({});
+```
+
+Freezing an object does not allow new properties to be added to an object and prevents from removing or altering the existing properties. `Object.freeze()` preserves the enumerability, configurability, writability and the prototype of the object. It returns the passed object and does not create a frozen copy.
+
+#### What are the pros and cons of immutability?
+
+**Pros**
+
+- Easier change detection - Object equality can be determined in a performant and easy manner through referential equality. This is useful for comparing object differences in React and Redux.
+- Programs with immutable objects are less complicated to think about, since you don't need to worry about how an object may evolve over time.
+- Defensive copies are no longer necessary when immutable objects are returning from or passed to functions, since there is no possibility an immutable object will be modified by it.
+- Easy sharing via references - One copy of an object is just as good as another, so you can cache objects or reuse the same object multiple times.
+- Thread-safe - Immutable objects can be safely used between threads in a multi-threaded environment since there is no risk of them being modified in other concurrently running threads.
+- Using libraries like ImmutableJS, objects are modified using structural sharing and less memory is needed for having multiple objects with similar structures.
+
+**Cons**
+
+- Naive implementations of immutable data structures and its operations can result in extremely poor performance because new objects are created each time. It is recommended to use libraries for efficient immutable data structures and operations that leverage on structural sharing.
+- Allocation (and deallocation) of many small objects rather than modifying existing ones can cause a performance impact. The complexity of either the allocator or the garbage collector usually depends on the number of objects on the heap.
+- Cyclic data structures such as graphs are difficult to build. If you have two objects which can't be modified after initialization, how can you get them to point to each other?
+
+#### References
+
+- https://stackoverflow.com/questions/1863515/pros-cons-of-immutability-vs-mutability
+
+#### How can you achieve immutability in your own code?
+
+One way to achieve immutability is to use libraries like [immutable.js](https://immutable-js.com/), [mori](https://github.com/swannodette/mori) or [immer](https://github.com/immerjs/immer).
+
+The alternative is to use `const` declarations combined with the techniques mentioned above for creation. For "mutating" objects, use the spread operator, `Object.assign`, `Array.concat()`, etc., to create new objects instead of mutate the original object.
+
+Examples:
+
+```js
+// Array Example
+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"}
+```
+
+#### References
+
+- https://stackoverflow.com/questions/1863515/pros-cons-of-immutability-vs-mutability
+- https://www.sitepoint.com/immutability-javascript/
+- https://wecodetheweb.com/2016/02/12/immutable-javascript-using-es6-and-beyond/
+
+### Explain the difference between synchronous and asynchronous functions.
+
+Synchronous functions are blocking while asynchronous functions are not. In synchronous functions, statements complete before the next statement is run. In this case, the program is evaluated exactly in order of the statements and execution of the program is paused if one of the statements take a very long time.
+
+Asynchronous functions usually accept a callback as a parameter and execution continue on the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).
+
+### What is event loop? What is the difference between call stack and task queue?
+
+The event loop is a single-threaded loop that monitors the call stack and checks if there is any work to be done in the task queue. If the call stack is empty and there are callback functions in the task queue, a function is dequeued and pushed onto the call stack to be executed.
+
+If you haven't already checked out Philip Robert's [talk on the Event Loop](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html), you should. It is one of the most viewed videos on JavaScript.
+
+#### References
+
+- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
+
+### Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}`
+
+The former is a function declaration while the latter is a function expression. The key difference is that function declarations have its body hoisted but the bodies of function expressions are not (they have the same hoisting behavior as variables). For more explanation on hoisting, refer to the question above [on hoisting](#explain-hoisting). If you try to invoke a function expression before it is defined, you will get an `Uncaught TypeError: XXX is not a function` error.
+
+**Function Declaration**
+
+```js
+foo(); // 'FOOOOO'
+function foo() {
+  console.log('FOOOOO');
+}
+```
+
+**Function Expression**
+
+```js
+foo(); // Uncaught TypeError: foo is not a function
+var foo = function () {
+  console.log('FOOOOO');
+};
+```
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
+
+### What are the differences between variables created using `let`, `var` or `const`?
+
+Variables declared using the `var` keyword are scoped to the function in which they are created, or if created outside of any function, to the global object. `let` and `const` are _block scoped_, meaning they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop).
+
+```js
+function foo() {
+  // All variables are accessible within functions.
+  var bar = 'bar';
+  let baz = 'baz';
+  const qux = 'qux';
+
+  console.log(bar); // bar
+  console.log(baz); // baz
+  console.log(qux); // qux
+}
+
+console.log(bar); // ReferenceError: bar is not defined
+console.log(baz); // ReferenceError: baz is not defined
+console.log(qux); // ReferenceError: qux is not defined
+```
+
+```js
+if (true) {
+  var bar = 'bar';
+  let baz = 'baz';
+  const qux = 'qux';
+}
+
+// var declared variables are accessible anywhere in the function scope.
+console.log(bar); // bar
+// let and const defined variables are not accessible outside of the block they were defined in.
+console.log(baz); // ReferenceError: baz is not defined
+console.log(qux); // ReferenceError: qux is not defined
+```
+
+`var` allows variables to be hoisted, meaning they can be referenced in code before they are declared. `let` and `const` will not allow this, instead throwing an error.
+
+```js
+console.log(foo); // undefined
+
+var foo = 'foo';
+
+console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization
+
+let baz = 'baz';
+
+console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization
+
+const bar = 'bar';
+```
+
+Redeclaring a variable with `var` will not throw an error, but `let` and `const` will.
+
+```js
+var foo = 'foo';
+var foo = 'bar';
+console.log(foo); // "bar"
+
+let baz = 'baz';
+let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared
+```
+
+`let` and `const` differ in that `let` allows reassigning the variable's value while `const` does not.
+
+```js
+// This is fine.
+let foo = 'foo';
+foo = 'bar';
+
+// This causes an exception.
+const baz = 'baz';
+baz = 'qux';
+```
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
+
+### What are the differences between ES6 class and ES5 function constructors?
+
+Let's first look at example of each:
+
+```js
+// ES5 Function Constructor
+function Person(name) {
+  this.name = name;
+}
+
+// ES6 Class
+class Person {
+  constructor(name) {
+    this.name = name;
+  }
+}
+```
+
+For simple constructors, they look pretty similar.
+
+The main difference in the constructor comes when using inheritance. If we want to create a `Student` class that subclasses `Person` and add a `studentId` field, this is what we have to do in addition to the above.
+
+```js
+// ES5 Function Constructor
+function Student(name, studentId) {
+  // Call constructor of superclass to initialize superclass-derived members.
+  Person.call(this, name);
+
+  // Initialize subclass's own members.
+  this.studentId = studentId;
+}
+
+Student.prototype = Object.create(Person.prototype);
+Student.prototype.constructor = Student;
+
+// ES6 Class
+class Student extends Person {
+  constructor(name, studentId) {
+    super(name);
+    this.studentId = studentId;
+  }
+}
+```
+
+It's much more verbose to use inheritance in ES5 and the ES6 version is easier to understand and remember.
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript
+- https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5
+
+### Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?
+
+One obvious benefit of arrow functions is to simplify the syntax needed to create functions, without a need for the `function` keyword. The `this` within arrow functions is also bound to the enclosing scope which is different compared to regular functions where the `this` is determined by the object calling it. Lexically-scoped `this` is useful when invoking callbacks especially in React components.
+
+### What advantage is there for using the arrow syntax for a method in a constructor?
+
+The main advantage of using an arrow function as a method inside a constructor is that the value of `this` gets set at the time of the function creation and can't change after that. So, when the constructor is used to create a new object, `this` will always refer to that object. For example, let's say we have a `Person` constructor that takes a first name as an argument has two methods to `console.log` that name, one as a regular function and one as an arrow function:
+
+```js
+const Person = function (firstName) {
+  this.firstName = firstName;
+  this.sayName1 = function () {
+    console.log(this.firstName);
+  };
+  this.sayName2 = () => {
+    console.log(this.firstName);
+  };
+};
+
+const john = new Person('John');
+const dave = new Person('Dave');
+
+john.sayName1(); // John
+john.sayName2(); // John
+
+// The regular function can have its 'this' value changed, but the arrow function cannot
+john.sayName1.call(dave); // Dave (because "this" is now the dave object)
+john.sayName2.call(dave); // John
+
+john.sayName1.apply(dave); // Dave (because 'this' is now the dave object)
+john.sayName2.apply(dave); // John
+
+john.sayName1.bind(dave)(); // Dave (because 'this' is now the dave object)
+john.sayName2.bind(dave)(); // John
+
+var sayNameFromWindow1 = john.sayName1;
+sayNameFromWindow1(); // undefined (because 'this' is now the window object)
+
+var sayNameFromWindow2 = john.sayName2;
+sayNameFromWindow2(); // John
+```
+
+The main takeaway here is that `this` can be changed for a normal function, but the context always stays the same for an arrow function. So even if you are passing around your arrow function to different parts of your application, you wouldn't have to worry about the context changing.
+
+This can be particularly helpful in React class components. If you define a class method for something such as a click handler using a normal function, and then you pass that click handler down into a child component as a prop, you will need to also bind `this` in the constructor of the parent component. If you instead use an arrow function, there is no need to also bind "this", as the method will automatically get its "this" value from its enclosing lexical context. (See this article for an excellent demonstration and sample code: https://machnicki.medium.com/handle-events-in-react-with-arrow-functions-ede88184bbb)
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
+- https://machnicki.medium.com/handle-events-in-react-with-arrow-functions-ede88184bbb
+
+### What is the definition of a higher-order function?
+
+A higher-order function is any function that takes one or more functions as arguments, which it uses to operate on some data, and/or returns a function as a result. Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is `map`, which takes an array and a function as arguments. `map` then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are `forEach`, `filter`, and `reduce`. A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. `Function.prototype.bind` is one such example in JavaScript.
+
+**Map**
+
+Let say we have an array of names which we need to transform each string to uppercase.
+
+```js
+const names = ['irish', 'daisy', 'anna'];
+```
+
+The imperative way will be as such:
+
+```js
+const transformNamesToUppercase = function (names) {
+  const results = [];
+  for (let i = 0; i < names.length; i++) {
+    results.push(names[i].toUpperCase());
+  }
+  return results;
+};
+transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
+```
+
+Use `.map(transformerFn)` makes the code shorter and more declarative.
+
+```js
+const transformNamesToUppercase = function (names) {
+  return names.map((name) => name.toUpperCase());
+};
+transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
+```
+
+#### References
+
+- https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
+- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
+- https://eloquentjavascript.net/05_higher_order.html
+
+### Can you give an example for destructuring an object or an array?
+
+Destructuring is an expression available in ES6 which enables a succinct and convenient way to extract values of Objects or Arrays and place them into distinct variables.
+
+**Array destructuring**
+
+```js
+// Variable assignment.
+const foo = ['one', 'two', 'three'];
+
+const [one, two, three] = foo;
+console.log(one); // "one"
+console.log(two); // "two"
+console.log(three); // "three"
+```
+
+```js
+// Swapping variables
+let a = 1;
+let b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+```
+
+**Object destructuring**
+
+```js
+// Variable assignment.
+const o = { p: 42, q: true };
+const { p, q } = o;
+
+console.log(p); // 42
+console.log(q); // true
+```
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring
+- https://ponyfoo.com/articles/es6-destructuring-in-depth
+
+### ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example?
+
+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 };
+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!'
+```
+
+With template literals, you can now create that same output like this instead:
+
+```js
+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!'
+```
+
+Note that you use backticks, not quotes, to indicate that you are using a template literal and that you can insert expressions inside the `${}` placeholders.
+
+A second helpful use case is in creating multi-line strings. Before ES2015, you could create a multi-line string like this:
+
+```js
+console.log('This is line one.\nThis is line two.');
+// This is line one.
+// This is line two.
+```
+
+Or if you wanted to break it up into multiple lines in your code so you didn't have to scroll to the right in your text editor to read a long string, you could also write it like this:
+
+```js
+console.log('This is line one.\n' + 'This is line two.');
+// This is line one.
+// This is line two.
+```
+
+Template literals, however, preserve whatever spacing you add to them. For example, to create that same multi-line output that we created above, you can simply do:
+
+```js
+console.log(`This is line one.
+This is line two.`);
+// This is line one.
+// 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 };
+document.body.innerHTML = `
+  <div>
+    <p>Name: ${person.name}</p>
+    <p>Age: ${person.age}</p>
+  </div>
+`;
+```
+
+**Note that your code may be susceptible to XSS by using `.innerHTML`. Sanitize your data before displaying it if it came from a user!**
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
+
+### Can you give an example of a curry function and why this syntax offers an advantage?
+
+Currying is a pattern where a function with more than one parameter is broken into multiple functions that, when called in series, will accumulate all of the required parameters one at a time. This technique can be useful for making code written in a functional style easier to read and compose. It's important to note that for a function to be curried, it needs to start out as one function, then broken out into a sequence of functions that each accepts one parameter.
+
+```js
+function curry(fn) {
+  if (fn.length === 0) {
+    return fn;
+  }
+
+  function _curried(depth, args) {
+    return function (newArgument) {
+      if (depth - 1 === 0) {
+        return fn(...args, newArgument);
+      }
+      return _curried(depth - 1, [...args, newArgument]);
+    };
+  }
+
+  return _curried(fn.length, []);
+}
+
+function add(a, b) {
+  return a + b;
+}
+
+var curriedAdd = curry(add);
+var addFive = curriedAdd(5);
+
+var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
+```
+
+#### References
+
+- https://hackernoon.com/currying-in-js-d9ddc64f162e
+
+### What are the benefits of using spread syntax and how is it different from rest syntax?
+
+ES6's spread syntax is very useful when coding in a functional paradigm as we can easily create copies of arrays or objects without resorting to `Object.create`, `slice`, or a library function. This language feature is used often in Redux and RxJS projects.
+
+```js
+function putDookieInAnyArray(arr) {
+  return [...arr, 'dookie'];
+}
+
+const result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"]
+
+const person = {
+  name: 'Todd',
+  age: 29,
+};
+
+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.
+
+```js
+function addFiveToABunchOfNumbers(...numbers) {
+  return numbers.map((x) => x + 5);
+}
+
+const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]
+
+const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
+
+const { e, f, ...others } = {
+  e: 1,
+  f: 2,
+  g: 3,
+  h: 4,
+}; // e: 1, f: 2, others: { g: 3, h: 4 }
+```
+
+#### References
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring
+
+### How can you share code between files?
+
+This depends on the JavaScript environment.
+
+On the client (browser environment), as long as the variables/functions are declared in the global scope (`window`), all scripts can refer to them. Alternatively, adopt the Asynchronous Module Definition (AMD) via RequireJS for a more modular approach.
+
+On the server (Node.js), the common way has been to use CommonJS. Each file is treated as a module and it can export variables and functions by attaching them to the `module.exports` object.
+
+ES2015 defines a module syntax which aims to replace both AMD and CommonJS. This will eventually be supported in both browser and Node environments.
+
+#### References
+
+- https://requirejs.org/docs/whyamd.html
+- https://nodejs.org/docs/latest/api/modules.html
+- https://2ality.com/2014/09/es6-modules-final.html
+
+### Why might you want to create static class members?
+
+Static class members (properties/methods) are not tied to a specific instance of a class and have the same value regardless of which instance is referring to it. Static properties are typically configuration variables and static methods are usually pure utility functions which do not depend on the state of the instance.
+
+#### References
+
+- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
+
+### Other Answers
+
+- https://github.com/sudheerj/javascript-interview-questions
+- http://flowerszhong.github.io/2013/11/20/javascript-questions.html
diff --git a/contents/javascript-utility-function.md b/contents/javascript-utility-function.md
new file mode 100644
index 0000000000..a08b573487
--- /dev/null
+++ b/contents/javascript-utility-function.md
@@ -0,0 +1,68 @@
+---
+title: JavaScript Interview Questions (Machine Coding) for Front End Interviews
+slug: coding/javascript-utility-function
+sidebar_label: JavaScript coding
+description: Master JavaScript machine coding for front end interviews. Practice debounce, throttle, Promise.all & essential utilities with real examples.
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Front End Interview Playbook](https://www.greatfrontend.com/front-end-interview-playbook/javascript?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+These are the front-end version of LeetCode questions, but with less emphasis on complicated algorithms and more focus on practical use cases. However, they can also be questions simply being the same LeetCode problem but you are required to answer in JavaScript.
+
+Almost all existing utility functions you will be asked exist within the JavaScript language or famous third-party libraries like Lodash/Underscore, with the most famous being `debounce` and `throttle`. However, Lodash's implementation is extremely over-engineered — reusing a lot of abstract functions and supporting weird and obscure use cases for older browsers; you're not expected to handle such edge cases within an interview setting.
+
+## Basic examples
+
+- Implement `Array.prototype` functions: `map`, `reduce`, `filter`, `sort`
+- Implement Promise/Promise-related APIs: `Promise`, `Promise.all`, `Promise.any`
+- Implement Lodash functions: `debounce()`, `throttle()`, `cloneDeep()`, `groupBy()`
+- Lodash's `chunk()`/`map()` with follow up of `mapAsync`(`Promise.all`) then `mapWithChunksAsync`
+- Convert all keys within an object into snake_case/camelCase
+- DOM APIs: `document.getElementByClassName()`, `document.getElementByTagName()`
+- [Observer pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript)
+
+The best way to prepare for JavaScript coding questions is to get your hands dirty by implementing them yourself and writing test cases for them.
+
+Although the focus of such questions is not on algorithms, do pay attention to choice of data structures and the time complexity as well. Don't write a function that runs in O(n<sup>2</sup>) if it can pretty easily have an O(n) runtime with the use of hash maps.
+
+Candidates are expected to take just around 10-15 minutes for a basic question. If you can tell that you received a basic question, try to finish within the suggested duration and do not intentionally take the entire interview to do one question. In most cases, you are expected to answer another coding question.
+
+## Advanced examples
+
+Advanced questions are usually given to more senior candidates and expect around 25-30 minutes to complete or arrive at a minimally working solution.
+
+- Write a templating engine that does variables substitution and simple conditionals.
+- Implement `JSON.stringify()`.
+- Generate table of contents/outline from a HTML page (similar to Google Docs autogenerated outline).
+
+## Where to practice
+
+<div class="video-container">
+    <video class='gfe-webm' autoPlay muted loop>
+        <source src="/gfe-features.webm" type="video/webm" />
+    </video>
+</div>
+
+These questions and many others are available on [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook). Apart from a [huge question bank of coding questions](https://www.greatfrontend.com/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) that you can filter by frameworks, languages, and topics, each question also comes with automated test cases and an official solution authored by ex-FAANG senior engineers.
+
+Here are some questions you can start with:
+
+- [Debounce](https://www.greatfrontend.com/questions/javascript/debounce?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- [Promise.all](https://www.greatfrontend.com/questions/javascript/promise-all?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- [Flatten](https://www.greatfrontend.com/questions/javascript/flatten?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- [Classnames](https://www.greatfrontend.com/questions/javascript/classnames?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- [Deep Clone](https://www.greatfrontend.com/questions/javascript/deep-clone?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- [Event Emitter](https://www.greatfrontend.com/questions/javascript/event-emitter?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- [List Format](https://www.greatfrontend.com/questions/javascript/list-format?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- [getElementsByClassName](https://www.greatfrontend.com/questions/javascript/get-elements-by-class-name?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook) (Free)
+- [Array.prototype.filter()](https://www.greatfrontend.com/questions/javascript/array-filter?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook)
+
+## Tips
+
+- Always strive to write pure functions, aka functions which don't rely on state outside of the function and doesn't cause side effects.
+- If you're writing a recursive function, ask whether there's a maximum stack depth limit.
+- Some nested data structures can have recursive references to itself. Do clarify that there are no self-references/cycles within the object/ask if you need to handle them (usually the answer is "No").
diff --git a/contents/resume.md b/contents/resume.md
new file mode 100644
index 0000000000..5b52692e4b
--- /dev/null
+++ b/contents/resume.md
@@ -0,0 +1,42 @@
+---
+title: Resume preparation
+description: "Frontend engineer resume guide: Expert templates, ATS tips, and FAANG hiring manager strategies to land your dream tech job"
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Front End Interview Playbook](https://www.greatfrontend.com/front-end-interview-playbook/resume?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+Resumes are often overlooked in the job application process, but extremely important as they can make or break your application. The [Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/) contains more details on how to write a killer resume which will also benefit Front End engineer candidates.
+
+<div>
+  <a className="button button--primary" href="https://www.techinterviewhandbook.org/resume/">Go to Tech Interview Handbook &nbsp;→</a>
+</div>
+
+## Recommended resume tools
+
+### 1. Use resume templates
+
+Why waste time creating your own resume from scratch when you can use a template?! There are many free resume templates you can find online, or you can just purchase quality ones. [FAANG Tech Leads](https://www.faangtechleads.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=ats_template&aff=1e80c401fe7e2) is currently offering resume templates and references at **70% off**.
+
+Their templates:
+
+- Are created by ex-FAANG hiring managers based on top resumes received from hundreds of candidate applications
+- Guarantee readability by FAANG ATS
+- Cater to various experience levels
+
+They also offer resume examples/references from candidates who have received multiple offers from FAANG companies - which helps you craft content that meets the same bar. [Check out FAANG Tech Leads](https://www.faangtechleads.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=ats_template&aff=1e80c401fe7e2)!
+
+### 2. Test readability with industry-standard ATS
+
+Test the readability and formatting of your resume using [OpenResume, a free resume parser](https://www.open-resume.com/resume-parser) or [NodeFlair's free resume ATS checker](https://nodeflair.com/resume-checker). Most big companies use similar resume scanners.
+
+### 3. The plain text file test
+
+Simply copy the content from your resume and paste it into a plain text document. Make edits if:
+
+- There are points missing from your original resume
+- Characters are displaying incorrectly in plain text
+- Sections are disorganized
diff --git a/contents/trivia.md b/contents/trivia.md
new file mode 100644
index 0000000000..6cdb248bc8
--- /dev/null
+++ b/contents/trivia.md
@@ -0,0 +1,43 @@
+---
+title: Quiz/trivia questions in front end interviews
+sidebar_label: Overview
+description: Master coding trivia for front end interviews. Practice JavaScript, CSS & React questions on closures, promises, box model + more with expert solutions.
+---
+
+:::info Latest version on GreatFrontEnd
+
+Find the latest version of this page on [GreatFrontEnd's Front End Interview Playbook](https://www.greatfrontend.com/front-end-interview-playbook/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook).
+
+:::
+
+Trivia-style questions are usually found in the first few stages of an interview as the answers are usually short and can possibly be administered by a minimally-technical recruiter.
+
+Trivia questions are meant to test how well candidates understand the theory behind the domain. They can be aced by either having real solid understanding of the concepts or by pure memorization of answers. While there can be infinitely many possible quiz questions, the most common questions can be found within the next few pages.
+
+## Basic examples
+
+- JavaScript
+  - What is a closure?
+  - Explain what promises are and what they're useful for.
+  - What is the difference between a promise and a callback?
+  - Explain `this` in JavaScript.
+- CSS
+  - Explain the CSS box model.
+  - Explain the various CSS `position` properties and its differences.
+
+## Advanced examples
+
+For more senior candidates, expect to explain more advanced stuff with no absolute answers.
+
+- How does React work? What is virtual DOM and what problems does it solve?
+- Why did you use library X over library Y?
+
+The best and correct way to prepare for such questions is to really understand the concepts and get some hands-on experience in applying them in a project. Memorizing the answers is not recommended but is acceptable if you are running out of time.
+
+## Where to practice
+
+If you're looking for free questions to practice, try [GreatFrontEnd](https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook), which has a [huge bank of free questions](https://www.greatfrontend.com/questions/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&gnrs=frontendinterviewhandbook). Each question also comes with a solution authored by me.
+
+## Common questions
+
+The next few pages go through common trivia questions tested for HTML/CSS/JavaScript and provides high quality answers to them.
diff --git a/langnostic.config.ts b/langnostic.config.ts
new file mode 100644
index 0000000000..d6f90f8711
--- /dev/null
+++ b/langnostic.config.ts
@@ -0,0 +1,47 @@
+import { ConfigType } from 'langnostic';
+
+const config: ConfigType = {
+  ai: {
+    provider: 'google',
+  },
+  localeConfig: {
+    source: 'en-US',
+    target: ['zh-CN'],
+  },
+  groups: [
+    {
+      name: 'quiz',
+      plugin: 'mdx',
+      paths: [
+        {
+          source: './packages/quiz/**/en-US.mdx',
+          target: './packages/quiz/**/{locale}.mdx',
+        },
+      ],
+    },
+    {
+      name: 'guidebooks',
+      plugin: 'mdx',
+      paths: [
+        {
+          source: './packages/behavioral-interview-guidebook/**/en-US.mdx',
+          target: './packages/behavioral-interview-guidebook/**/{locale}.mdx',
+        },
+        {
+          source: './packages/front-end-interview-guidebook/**/en-US.mdx',
+          target: './packages/front-end-interview-guidebook/**/{locale}.mdx',
+        },
+        {
+          source: './packages/react-interview-playbook/**/en-US.mdx',
+          target: './packages/react-interview-playbook/**/{locale}.mdx',
+        },
+        {
+          source: './packages/system-design/**/en-US.mdx',
+          target: './packages/system-design/**/{locale}.mdx',
+        },
+      ],
+    },
+  ],
+};
+
+export default config;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000000..dd9be810d9
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,2536 @@
+{
+  "name": "front-end-interview-handbook",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "langnostic": "^0.0.7"
+      },
+      "devDependencies": {
+        "prettier": "^3.5.3",
+        "typescript": "^5.8.2"
+      }
+    },
+    "node_modules/@ai-sdk/deepseek": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/deepseek/-/deepseek-0.2.5.tgz",
+      "integrity": "sha512-iYB3CSX6kT2Ow9Zc2zHOC4jFPy3isliEyh2CLlZWPBcGIWVikp2Q7zACPOZrZYN58IFTWGC1l++s1kWXxPtuiw==",
+      "dependencies": {
+        "@ai-sdk/openai-compatible": "0.2.5",
+        "@ai-sdk/provider": "1.1.0",
+        "@ai-sdk/provider-utils": "2.2.3"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      }
+    },
+    "node_modules/@ai-sdk/google": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/google/-/google-1.2.5.tgz",
+      "integrity": "sha512-ykSPjYDmaDg7Qblo6Ea6n6O01NpyehZJE0j3+HCYBtUXKXP2RZWesr7XlceIfFBKHd0sumovRtX4ozHrb+1+sw==",
+      "dependencies": {
+        "@ai-sdk/provider": "1.1.0",
+        "@ai-sdk/provider-utils": "2.2.3"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      }
+    },
+    "node_modules/@ai-sdk/openai": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/openai/-/openai-1.3.6.tgz",
+      "integrity": "sha512-Lyp6W6dg+ERMJru3DI8/pWAjXLB0GbMMlXh4jxA3mVny8CJHlCAjlEJRuAdLg1/CFz4J1UDN2/4qBnIWtLFIqw==",
+      "dependencies": {
+        "@ai-sdk/provider": "1.1.0",
+        "@ai-sdk/provider-utils": "2.2.3"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      }
+    },
+    "node_modules/@ai-sdk/openai-compatible": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/openai-compatible/-/openai-compatible-0.2.5.tgz",
+      "integrity": "sha512-Mi83WLIbrmcrQ5b4LQSl8DSs/QHLGTtRu+5+Kb+4lzxCHAGiqzgEGrFww3S6bl+GVfhGtyTCONqU1Nok2r+k5Q==",
+      "dependencies": {
+        "@ai-sdk/provider": "1.1.0",
+        "@ai-sdk/provider-utils": "2.2.3"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.0.0"
+      }
+    },
+    "node_modules/@ai-sdk/provider": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-1.1.0.tgz",
+      "integrity": "sha512-0M+qjp+clUD0R1E5eWQFhxEvWLNaOtGQRUaBn8CUABnSKredagq92hUS9VjOzGsTm37xLfpaxl97AVtbeOsHew==",
+      "dependencies": {
+        "json-schema": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@ai-sdk/provider-utils": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-2.2.3.tgz",
+      "integrity": "sha512-o3fWTzkxzI5Af7U7y794MZkYNEsxbjLam2nxyoUZSScqkacb7vZ3EYHLh21+xCcSSzEC161C7pZAGHtC0hTUMw==",
+      "dependencies": {
+        "@ai-sdk/provider": "1.1.0",
+        "nanoid": "^3.3.8",
+        "secure-json-parse": "^2.7.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.23.8"
+      }
+    },
+    "node_modules/@ai-sdk/react": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-1.2.5.tgz",
+      "integrity": "sha512-0jOop3S2WkDOdO4X5I+5fTGqZlNX8/h1T1eYokpkR9xh8Vmrxqw8SsovqGvrddTsZykH8uXRsvI+G4FTyy894A==",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "2.2.3",
+        "@ai-sdk/ui-utils": "1.2.4",
+        "swr": "^2.2.5",
+        "throttleit": "2.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "zod": "^3.23.8"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@ai-sdk/ui-utils": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/ui-utils/-/ui-utils-1.2.4.tgz",
+      "integrity": "sha512-wLTxEZrKZRyBmlVZv8nGXgLBg5tASlqXwbuhoDu0MhZa467ZFREEnosH/OC/novyEHTQXko2zC606xoVbMrUcA==",
+      "dependencies": {
+        "@ai-sdk/provider": "1.1.0",
+        "@ai-sdk/provider-utils": "2.2.3",
+        "zod-to-json-schema": "^3.24.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.23.8"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@clack/core": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.4.1.tgz",
+      "integrity": "sha512-Pxhij4UXg8KSr7rPek6Zowm+5M22rbd2g1nfojHJkxp5YkFqiZ2+YLEM/XGVIzvGOcM0nqjIFxrpDwWRZYWYjA==",
+      "dependencies": {
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "node_modules/@clack/prompts": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.9.1.tgz",
+      "integrity": "sha512-JIpyaboYZeWYlyP0H+OoPPxd6nqueG/CmN6ixBiNFsIDHREevjIf0n0Ohh5gr5C8pEDknzgvz+pIJ8dMhzWIeg==",
+      "dependencies": {
+        "@clack/core": "0.4.1",
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@opentelemetry/api": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
+      "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@types/debug": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
+    "node_modules/@types/diff-match-patch": {
+      "version": "1.0.36",
+      "resolved": "https://registry.npmjs.org/@types/diff-match-patch/-/diff-match-patch-1.0.36.tgz",
+      "integrity": "sha512-xFdR6tkm0MWvBfO8xXCSsinYxHcqkQUlcHeSpMC2ukzOb6lwQAfDmW+Qt0AvlGd8HpsS28qKsB+oPeJn9I39jg=="
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
+      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="
+    },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA=="
+    },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
+    },
+    "node_modules/acorn": {
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
+      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ai": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/ai/-/ai-4.2.11.tgz",
+      "integrity": "sha512-XvYFz+I2MNpkNeso/cEvm2q22cuU7B3EdUxGyhpa94gHbb3HEk73d42+UPJqweSBmoXA52mZ9qvb6jt3P4TITQ==",
+      "dependencies": {
+        "@ai-sdk/provider": "1.1.0",
+        "@ai-sdk/provider-utils": "2.2.3",
+        "@ai-sdk/react": "1.2.5",
+        "@ai-sdk/ui-utils": "1.2.4",
+        "@opentelemetry/api": "1.9.0",
+        "jsondiffpatch": "0.6.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "zod": "^3.23.8"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ansi-escapes": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.0.0.tgz",
+      "integrity": "sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==",
+      "dependencies": {
+        "environment": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.4.1.tgz",
+      "integrity": "sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/cli-cursor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+      "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
+      "dependencies": {
+        "restore-cursor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/cliui/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/cliui/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/cosmiconfig": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
+      "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+      "dependencies": {
+        "env-paths": "^2.2.1",
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.1.0.tgz",
+      "integrity": "sha512-Wy+JTSbFThEOXQIR2L6mxJvEs+veIzpmqD7ynWxMXGpnk3smkHQOp6forLdHsKpAMW9iJpaBBIxz285t1n1C3w==",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/diff-match-patch": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
+      "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw=="
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "16.4.7",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
+      "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
+      "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw=="
+    },
+    "node_modules/env-paths": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/environment": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
+      "integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-visit": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-2.0.0.tgz",
+      "integrity": "sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-east-asian-width": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.3.0.tgz",
+      "integrity": "sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/globby": {
+      "version": "13.2.2",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz",
+      "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==",
+      "dependencies": {
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.3.0",
+        "ignore": "^5.2.4",
+        "merge2": "^1.4.1",
+        "slash": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/gray-matter": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
+      "dependencies": {
+        "js-yaml": "^3.13.1",
+        "kind-of": "^6.0.2",
+        "section-matter": "^1.0.0",
+        "strip-bom-string": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/gray-matter/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/gray-matter/node_modules/js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.0.0.tgz",
+      "integrity": "sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==",
+      "dependencies": {
+        "get-east-asian-width": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsondiffpatch": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/jsondiffpatch/-/jsondiffpatch-0.6.0.tgz",
+      "integrity": "sha512-3QItJOXp2AP1uv7waBkao5nCvhEv+QmJAd38Ybq7wNI74Q+BBmnLn4EDKz6yI9xGAIQoUF87qHt+kc1IVxB4zQ==",
+      "dependencies": {
+        "@types/diff-match-patch": "^1.0.36",
+        "chalk": "^5.3.0",
+        "diff-match-patch": "^1.0.5"
+      },
+      "bin": {
+        "jsondiffpatch": "bin/jsondiffpatch.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/langnostic": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/langnostic/-/langnostic-0.0.7.tgz",
+      "integrity": "sha512-DkLmpMPvSO7Q6l9tfDzb09LXQ61n4Hinb1RPi5oftG/W+Okg3HP0Y2rMSjhjl21QffVJUZVH0a6jzKsSM9nCsg==",
+      "dependencies": {
+        "@ai-sdk/deepseek": "^0.2.1",
+        "@ai-sdk/google": "^1.2.3",
+        "@ai-sdk/openai": "^1.3.2",
+        "@clack/prompts": "^0.9.1",
+        "ai": "^4.2.5",
+        "chalk": "^5.2.0",
+        "cosmiconfig": "^9.0.0",
+        "dotenv": "^16.3.1",
+        "globby": "^13.2.2",
+        "gray-matter": "^4.0.3",
+        "json5": "^2.2.3",
+        "lodash-es": "^4.17.21",
+        "log-update": "^6.1.0",
+        "murmurhash": "^2.0.1",
+        "remark-mdx": "^3.1.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.5",
+        "yargs": "^17.7.2",
+        "zod": "^3.24.3"
+      },
+      "bin": {
+        "langnostic": "dist/cli.js"
+      },
+      "engines": {
+        "node": "18.18.2",
+        "pnpm": "8.15.8"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "node_modules/log-update": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
+      "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
+      "dependencies": {
+        "ansi-escapes": "^7.0.0",
+        "cli-cursor": "^5.0.0",
+        "slice-ansi": "^7.1.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz",
+      "integrity": "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx/-/mdast-util-mdx-3.0.0.tgz",
+      "integrity": "sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+      "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+      "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromark": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
+      "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
+      "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-mdx-expression": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-3.0.1.tgz",
+      "integrity": "sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-mdx-expression": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-mdx-jsx": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-3.0.2.tgz",
+      "integrity": "sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "micromark-factory-mdx-expression": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdx-md": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-md/-/micromark-extension-mdx-md-2.0.0.tgz",
+      "integrity": "sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdxjs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-3.0.0.tgz",
+      "integrity": "sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==",
+      "dependencies": {
+        "acorn": "^8.0.0",
+        "acorn-jsx": "^5.0.0",
+        "micromark-extension-mdx-expression": "^3.0.0",
+        "micromark-extension-mdx-jsx": "^3.0.0",
+        "micromark-extension-mdx-md": "^2.0.0",
+        "micromark-extension-mdxjs-esm": "^3.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdxjs-esm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-3.0.0.tgz",
+      "integrity": "sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-position-from-estree": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
+      "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
+      "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-mdx-expression": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-2.0.3.tgz",
+      "integrity": "sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-position-from-estree": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
+      "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
+      "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
+      "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
+      "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
+      "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
+      "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
+      "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
+      "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-events-to-acorn": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-2.0.3.tgz",
+      "integrity": "sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-visit": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      }
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
+      "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
+      "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
+      "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
+      "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mimic-function": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/murmurhash": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/murmurhash/-/murmurhash-2.0.1.tgz",
+      "integrity": "sha512-5vQEh3y+DG/lMPM0mCGPDnyV8chYg/g7rl6v3Gd8WMF9S429ox3Xk8qrk174kWhG767KQMqqxLD1WnGd77hiew=="
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+      "dependencies": {
+        "mimic-function": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/react": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
+      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/remark-mdx": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.1.0.tgz",
+      "integrity": "sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==",
+      "dependencies": {
+        "mdast-util-mdx": "^3.0.0",
+        "micromark-extension-mdxjs": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/restore-cursor": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+      "dependencies": {
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/section-matter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
+      "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/secure-json-parse": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-2.7.0.tgz",
+      "integrity": "sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw=="
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
+    },
+    "node_modules/slash": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/slice-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.0.tgz",
+      "integrity": "sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+    },
+    "node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-bom-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
+      "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/swr": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.3.tgz",
+      "integrity": "sha512-dshNvs3ExOqtZ6kJBaAsabhPdHyeY4P2cKwRCniDVifBMoG/SVI7tfLWqPXriVspf2Rg4tPzXJTnwaihIeFw2A==",
+      "dependencies": {
+        "dequal": "^2.0.3",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/throttleit": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-2.1.0.tgz",
+      "integrity": "sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
+      "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
+      "devOptional": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position-from-estree": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position-from-estree/-/unist-util-position-from-estree-2.0.0.tgz",
+      "integrity": "sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+      "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
+      "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/yargs/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/zod": {
+      "version": "3.24.3",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.3.tgz",
+      "integrity": "sha512-HhY1oqzWCQWuUqvBFnsyrtZRhyPeR7SUGv+C4+MsisMuVfSPx8HpwWqH8tRahSlt6M3PiFAcoeFhZAqIXTxoSg==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-to-json-schema": {
+      "version": "3.24.5",
+      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.5.tgz",
+      "integrity": "sha512-/AuWwMP+YqiPbsJx5D6TfgRTc4kTLjsh5SOcd4bLsfUg2RcEXrFMJl1DGgdHy2aCfsIA/cr/1JM0xcB2GZji8g==",
+      "peerDependencies": {
+        "zod": "^3.24.1"
+      }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000..dfa78bd360
--- /dev/null
+++ b/package.json
@@ -0,0 +1,13 @@
+{
+  "scripts": {
+    "format-mdx": "prettier --write \"packages/**/en-US.{md,mdx}\"",
+    "i18n": "langnostic translate"
+  },
+  "dependencies": {
+    "langnostic": "^0.0.7"
+  },
+  "devDependencies": {
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.2"
+  }
+}
diff --git a/packages/behavioral-interview-guidebook/contents/collaboration/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/collaboration/en-US.langnostic.json
new file mode 100644
index 0000000000..ea43f5ce57
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/collaboration/en-US.langnostic.json
@@ -0,0 +1,142 @@
+{
+  "frontmatter": {
+    "title": "b30d86a3",
+    "description": "1006d4c4",
+    "seo_title": "407dfda6",
+    "seo_description": "996df42a",
+    "social_title": "bd82dd8e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "aff16a59",
+        "593c6899",
+        "e3e74d45",
+        "63d3ac26",
+        "36411aef",
+        "cf56d450",
+        "1180e08",
+        "b129d17e",
+        "75a984c3",
+        "8f2809c3",
+        "35fe945d",
+        "f8077157",
+        "d57689f8",
+        "8e3a44f0",
+        "5da12a67",
+        "19793788",
+        "f8077157",
+        "51ea6a6b",
+        "8e3a44f0",
+        "fc22cf33",
+        "18164c5f",
+        "f6bafdb3",
+        "317f3605",
+        "11324be4",
+        "1aaf1896",
+        "52e4fb3c",
+        "43d2035e",
+        "ae36fa6f",
+        "dc9256b7",
+        "3f70e18",
+        "d10d3ca",
+        "eab0ec5",
+        "e796a21e",
+        "1b30ef69",
+        "905c88be",
+        "80d9413c",
+        "823fde94",
+        "f1217e62",
+        "d94180ed",
+        "8e2e4103",
+        "a17b9197",
+        "d3a2868f",
+        "3621de0d",
+        "b8f86e36",
+        "eb46eb00",
+        "94c09253",
+        "5309730",
+        "23f808e8",
+        "d49fc017",
+        "f73cb702",
+        "519dc1c3",
+        "fcfd2fed",
+        "3ab47db1",
+        "d3f12e28",
+        "fcaff43",
+        "cb6d686c",
+        "c6983f94",
+        "cf831a72",
+        "99d32457",
+        "80e8e855",
+        "6c44e86f"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "aff16a59",
+        "593c6899",
+        "e3e74d45",
+        "63d3ac26",
+        "36411aef",
+        "cf56d450",
+        "1180e08",
+        "b129d17e",
+        "75a984c3",
+        "8f2809c3",
+        "35fe945d",
+        "f8077157",
+        "d57689f8",
+        "8e3a44f0",
+        "5da12a67",
+        "19793788",
+        "f8077157",
+        "51ea6a6b",
+        "8e3a44f0",
+        "fc22cf33",
+        "18164c5f",
+        "f6bafdb3",
+        "317f3605",
+        "11324be4",
+        "1aaf1896",
+        "52e4fb3c",
+        "43d2035e",
+        "ae36fa6f",
+        "dc9256b7",
+        "3f70e18",
+        "d10d3ca",
+        "eab0ec5",
+        "e796a21e",
+        "1b30ef69",
+        "905c88be",
+        "80d9413c",
+        "823fde94",
+        "f1217e62",
+        "d94180ed",
+        "8e2e4103",
+        "a17b9197",
+        "d3a2868f",
+        "3621de0d",
+        "b8f86e36",
+        "eb46eb00",
+        "94c09253",
+        "5309730",
+        "23f808e8",
+        "d49fc017",
+        "f73cb702",
+        "519dc1c3",
+        "fcfd2fed",
+        "3ab47db1",
+        "d3f12e28",
+        "fcaff43",
+        "cb6d686c",
+        "c6983f94",
+        "cf831a72",
+        "99d32457",
+        "80e8e855",
+        "6c44e86f"
+      ]
+    }
+  }
+}
diff --git a/packages/behavioral-interview-guidebook/contents/collaboration/en-US.mdx b/packages/behavioral-interview-guidebook/contents/collaboration/en-US.mdx
new file mode 100644
index 0000000000..cc42cb7786
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/collaboration/en-US.mdx
@@ -0,0 +1,206 @@
+---
+title: Answering Collaboration Behavioral Questions
+description: Learn how to answer "Tell me about a time..." styled questions for evaluating your collaboration skills.
+seo_title: Collaboration Questions | Behavioral Interview Playbook
+seo_description: Learn how to answer collaboration behavioral interview questions, for front end engineers. Refer to sample answers.
+social_title: Collaboration Behavioral Questions | GreatFrontEnd
+---
+
+As mentioned in our [behavioral interview preparation overview](/behavioral-interview-playbook/introduction), **collaboration** is one of the 8 main categories of questions to prepare for.
+
+Collaboration questions are probably the most common behavioral questions asked in front end behavioral interviews, as they encompass a large number of related traits which can be grouped for ease of story/project preparation.
+
+In this guide, you will learn how to tackle them:
+
+1. Evaluation criteria in detail
+1. Abstracting possible questions into common themes
+1. Suggested answer framework
+1. An example of a good sample story
+1. Possible nature of follow-up questions
+1. Sample questions and answers
+
+## Evaluation criteria in detail
+
+When rating candidates under this category, interviewers are often looking at the following criteria:
+
+- Handling disagreements
+- Working as a team
+- Working with diverse personalities and skills
+- Conveying complex ideas simply
+- Giving constructive feedback
+- Active listening
+
+## Abstracting collaboration questions
+
+As mentioned in our [behavioral interview preparation overview](/behavioral-interview-playbook/introduction), it is impractical to prepare answers specifically for every behavioral question out there. However, by batching specific questions into **similar themes** and preparing stories that cover a large number of question requirements, we can reduce the number of stories to prepare to around 3-5 stories.
+
+Collaboration is such a theme which can group sub-requirements like communication, team work, adaptability and coachability. For each sub-requirement, we have summarized the common questions and also abstracted out the **traits that interviewers are looking out for across these questions**:
+
+### Communication
+
+#### Example questions
+
+- Can you describe a time when you had to effectively communicate technical information to a non-technical audience and how you approached it?
+- Can you describe a time when you had to adapt your communication style to effectively communicate with someone who had a different background or perspective?
+- Can you give an example of a time when you had to communicate important information under time pressure or in a high-stress situation?
+- How do you ensure that your message is understood and well-received by your audience?
+
+#### Traits interviewers look out for
+
+- Convey complex ideas simply
+- Active listening
+
+### Teamwork
+
+#### Example questions
+
+- Can you describe a past project where you had to work with a difficult stakeholder or teammate and how you dealt with it?
+- Can you tell me about a time when you had to give constructive feedback to a team member or coworker?
+- How do you approach working with teammates who are not meeting their deadlines or responsibilities?
+- Can you provide an example when you had to work with a team where there were disagreements between members?
+- How do you handle working on a team with people who have different skill sets and personalities?
+- Can you give an example of a time when you had to adapt to a team member's working style in order to complete a project successfully?
+- How do you ensure that all team members are heard and their ideas are considered in group discussions?
+- Can you give an example of a time when you had to work on a team project and had to compromise with others to reach a solution?
+- Can you describe a time when you had to collaborate with people from different departments or organizations to complete a project?
+
+#### Traits interviewers look out for
+
+- Working as a team
+- Working with diverse working styles, skills and personalities
+- Handling disagreements (others and own)
+- Giving constructive feedback
+
+## Suggested answer framework
+
+As always, the [STAR format](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) is the simplest and most effective framework that we recommend to structure your story.
+
+Based on the abstraction above, we can see that interviewers are looking for specific traits for every sub-requirement. We have created a quick cheatsheet for suggested approaches to exhibit these desired traits.
+
+Ideally, you should select stories that can cover as much of the below traits as possible, so that you don't have to remember too many stories.
+
+### Convey complex ideas simply
+
+1. First understand your audience's level of knowledge. Put yourself in their shoes, explain in their language
+1. Understand what they need to know (and want to know) and prioritize the key takeaways
+1. Only dive deeper where appropriate for important details
+1. Break down the idea into component parts
+1. Use visual aids, such as diagrams or charts
+1. Give examples
+
+**Note**: For communication, traits like conveying complex ideas simply and active listening may be evaluated through your actual interview performance instead - e.g. do you interrupt the interviewer, do you listen and understand their question correctly, do you communicate your thought process in an easy to digest manner.
+
+### Active listening
+
+1. Focus on understanding rather than replying
+1. Withhold judgment until the person is done talking
+1. Use non-verbal cues to show that you are engaged
+1. Summarize and repeat back in your own words
+1. Ask clarifying questions
+1. Never interrupt
+
+### Working as a team
+
+1. Set clear goals and ensure that everyone understands them. Proactively seek alignment and perspectives
+1. Assign and communicate roles and responsibilities. Collaborate and delegate
+1. Set up regular progress check-ins and address blockers. Always include the appropriate stakeholders and share timely information with them
+1. Measure impact and recognize achievements
+
+### Working with diverse working styles, skills, and personalities
+
+1. Openly recognize unique perspectives and skills that each team member can bring to the table
+1. Encourage open and honest communication, and active listening
+1. Create a welcoming and supportive environment even to differences in opinions. Use them as opportunities to grow
+1. Proactively include a range of perspectives and voices in decision-making
+1. Provide equal opportunities to every team member, including access to channels, resources and support
+
+### Handling disagreements
+
+1. Facilitate open and productive communication between relevant parties
+1. Frame conflict as a way to enhance teamwork and improve current solutions
+1. Clarify the source of conflict (and whether there actually is conflict)
+1. Give each party equal time to air out their views and concerns without judgment (assume positive intent). Set ground rules if needed to cultivate active listening and understanding. Pivot conversation away from emotions and towards solutions. Tactfully address unproductive dialogue
+1. Summarize and validate the standpoint from each party, reflecting back at them
+1. Identifying underlying sources of conflict between the standpoints
+1. Brainstorm and run through the options available to best meet common goals. (Show skill and logic in finding common ground). Use data and facts to drive resolution with others, weighing pros and cons, instead of just relying on opinions
+1. Agree on the best solution and determine each party's responsibilities. Bring in relevant parties to support resolutions
+
+### Giving constructive feedback
+
+1. Give the feedback in private
+1. Remind them of what you already appreciate of them
+1. Describe specific behaviors that were directly observed (not inferred) and can be changed, e.g. "did not study the documentation" versus "not prepared"
+1. Describe the impact of said behaviors
+1. Point it out as an opportunity for growth rather than a fault
+1. Offer actionable suggestions
+
+Although there seem to be a large number of required traits, you can cover 90% of them with a very common situation that occurs in engineering teams:
+
+- You had to work within a cross-functional team (e.g. with business stakeholders or product managers or designers) on a high pressure situation, where priorities and requirements were changing rapidly
+- There's a conflict of interest between business/design and engineering, such as business/design pushing (demanding) for tighter deadlines, while from engineering perspective rushing for those deadlines will result in large tech debt
+- You had to provide constructive feedback to business/design on the problem
+- In so doing, you needed to convey technical concepts to the non-technical audience
+- Further, you solicited feedback from them to understand how engineering could collaborate better to avoid this problem again. In so doing, you regularly ran through the list of demands or requirements with them to see if any could be dropped for faster engineering delivery. Additionally, you catered for their need on timeline accountability by providing regular updates
+
+Add in specific details according to your situation.
+
+## Sample story
+
+Here's a sample story using the STAR format.
+
+**Situation**
+
+- In my current job as front end engineer in a startup, I had to lead development on a highly urgent marketing project, working cross functionally with marketing and design
+- At some point, marketing had expected the feature to ship within the next week, but there was a significant roadblock from engineering due to dependencies on a partner API team whose deliverables were delayed due to recent departures of two senior members
+- The situation had become heated as marketing did not understand the roadblocks engineering had faced
+
+**Task**: I had to resolve the misunderstanding to ensure smooth working relationship between both teams
+
+**Actions**
+
+- In order to do so, I spoke to marketing privately and gave them time to clearly explain the urgency and concerns or misconceptions marketing might have towards engineering
+- I then explained the role of the partner teams, focusing specifically on their impact on the feature as opposed to complex technical information
+- In doing so, we were able to brainstorm different ways we could ship the feature even without the external dependencies
+- In parallel, I also spoke to the partner team's manager on the importance of the project to the company and the possibility of reprioritizing their work to help unblock us
+- Apart from that, I also solicited feedback on how engineering could better collaborate with marketing to avoid such misunderstandings in future
+
+**Results**
+
+- Due to the tight collaboration between engineering and marketing, we were able to ship the feature in a timely manner
+- As marketing prioritized timelines and accountability, we started providing regular updates and discussed alternatives for every potential blocker
+- With this, every feature was successfully and smoothly delivered there after
+
+## Possible nature of follow-up questions
+
+As mentioned in our [behavioral interview preparation overview](/behavioral-interview-playbook/introduction), interviewers are encouraged to rely more on follow-up questions to really understand the candidate's thought process and motivations, which typically fall under these categories:
+
+- Why do you think you did (insert action)?
+- Why did you not do (insert action)?
+- How would you do things differently in hindsight?
+
+For questions on collaboration, interviewers will most likely probe for questions to help them understand a bit more about:
+
+- **Understanding if and why certain stakeholders were involved or not involved**
+  - Which stakeholders were involved in the discussion, and why?
+  - Why were certain stakeholders like (insert stakeholder) excluded from the group?
+- **Understanding group dynamics and how it affected the strategy to handle the group**
+  - Which personalities were present in the group and how did it affect dynamics? Did this understanding affect your strategy to navigate group discussions?
+- **Understanding the candidate's mindset to conflict**
+  - How do you think conflicts like this affect the working environment? Would you prefer to avoid them?
+- **Understanding how the resolution was derived; did the candidate merely defer to others as opposed to relying on facts and data?**
+  - Were there any data and information which were leveraged in making the decision?
+  - Was there an analysis of each solution's pros and cons?
+
+## Sample collaboration questions and answers
+
+The sample story above already answers most (12) of the example questions above. Questions which require slight modifications are covered below. If you haven't already, do review our [tips on your interview disposition](/behavioral-interview-playbook/introduction) to increase your chances of setting a good impression.
+
+### How do you ensure that your message is understood and well-received by your audience?
+
+You could answer the question with a slight modification of the sample story, focused on the explanation of the technical information:
+
+> To ensure that my message is well understood, after explaining, I will provide a few examples to illustrate my points and also ask my audience a few questions to confirm their understanding. In a project I did a few months ago, I had to explain to the business team why and how an urgent feature had been delayed by external team API delays. To do so, I focused on the key takeaways that business needed — which was how the feature was impacted by such a delay, and utilized visual aids as well as used simple and clear language. I also gave examples while asking questions to ascertain their understanding of my explanation. This allowed the business team to understand the dependency well enough to brainstorm ways to deliver the feature even without the dependencies.
+
+### How do you approach working with teammates who are not meeting their deadlines or responsibilities?
+
+> Once it is clear that their behaviors may constitute a concerning pattern, I would let them know in a timely manner. For instance, I had a teammate on a project who had missed on bug fix timelines regularly, and once it happened a number of times, I scheduled a private meeting with him to talk to them about it. I focused on framing the conversation as a growth opportunity for him on top of what is already appreciated about them, which was his knowledge and mentorship as a senior developer. Instead of describing a general behavior such as "being late", I mentioned the specific tickets that were missed and the impact that had occurred from missing them, as well as its effect on the morale of the team. I then offered a few solutions, such as enacting a new reminder bot within the channel for tickets that were due soon. He was able to understand where I was coming from and our team was able to meet our deadlines much better after that.
diff --git a/packages/behavioral-interview-guidebook/contents/collaboration/pt-BR.mdx b/packages/behavioral-interview-guidebook/contents/collaboration/pt-BR.mdx
new file mode 100644
index 0000000000..a4a3ae6bba
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/collaboration/pt-BR.mdx
@@ -0,0 +1,203 @@
+---
+title: Respondendo a "Me conte sobre uma situação em que..." para Habilidades de Colaboração
+description: Aprenda a responder perguntas comportamentais sobre colaboração, incluindo comunicação e trabalho em equipe, para desenvolvedores front-end, desenvolvedores web e engenheiros de software. Consulte respostas de exemplo.
+---
+
+Conforme mencionado em nossa [visão geral de preparação para entrevistas comportamentais](/guia-entrevista-comportamental), **colaboração** é uma das 8 principais categorias de perguntas para se preparar.
+
+Perguntas sobre colaboração são provavelmente as mais comuns em entrevistas comportamentais para desenvolvedores front-end, já que englobam um grande número de características relacionadas que podem ser agrupadas para facilitar a preparação de histórias ou projetos.
+
+Neste guia, você aprenderá como abordá-las:
+
+1.  Critérios de avaliação em detalhes
+2.  Abstraindo possíveis perguntas em temas comuns
+3.  Estrutura de resposta sugerida
+4.  Um exemplo de uma boa história de amostra
+5.  Possível natureza de perguntas de acompanhamento
+6.  Perguntas e respostas de exemplo
+
+## Critérios de Avaliação em Detalhes
+
+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
+
+## "Abstraindo Perguntas sobre Colaboração."
+
+Conforme mencionado em nossa [visão geral de preparação para entrevistas comportamentais](/guia-entrevista-comportamental), é impraticável preparar respostas especificamente para cada pergunta comportamental disponível. No entanto, agrupando perguntas específicas em **temas similares** e preparando histórias que abrangem um grande número de requisitos de perguntas, podemos reduzir o número de histórias a serem preparadas para cerca de 3 a 5 histórias.
+
+A colaboração é um tema que pode agrupar sub-requisitos como comunicação, trabalho em equipe, adaptabilidade e capacidade de aprendizado. Para cada sub-requisito, resumimos as perguntas comuns e também destacamos os **traços pelos quais os entrevistadores estão procurando em todas essas perguntas**:
+
+### Comunicação
+
+#### 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?
+
+#### Traços pelos Quais os Entrevistadores Procuram
+
+- 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?
+
+#### 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
+
+## Estrutura de Resposta Sugerida
+
+Como sempre, o [formato STAR](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) é a estrutura mais simples e eficaz que recomendamos para estruturar sua história.
+
+Com base na abstração acima, podemos ver que os entrevistadores estão procurando traços específicos para cada sub-requisito. Nós criamos uma rápida folha de dicas com abordagens sugeridas para demonstrar esses traços desejados.
+
+Idealmente, você deve selecionar histórias que possam abranger o máximo possível dos traços abaixo, para que você não precise lembrar de muitas histórias.
+
+### Transmitir ideias complexas de forma simples
+
+1.  Primeiro, compreenda o nível de conhecimento da sua audiência. Coloque-se no lugar deles e explique na linguagem deles.
+2.  Compreenda o que eles precisam saber (e querem saber) e priorize os pontos principais.
+3.  Aprofunde-se apenas quando for apropriado para detalhes importantes.
+4.  Divida a ideia em partes componentes.
+5.  Use ajuda visual, como diagramas ou gráficos.
+6.  Dê exemplos.
+
+Observação: Para a comunicação, traços como transmitir ideias complexas de forma simples e escuta ativa podem ser avaliados com base no seu desempenho real na entrevista - por exemplo, se você interrompe o entrevistador, se ouve e compreende corretamente a pergunta, se comunica seu processo de pensamento de maneira fácil de compreender.
+
+### Escuta Ativa
+
+1.  Foco em compreender em vez de responder.
+2.  Compreender sem julgar até que a pessoa termine de falar.
+3.  Usar pistas não verbais para demonstrar que você está envolvido.
+4.  Resumir e repetir com suas próprias palavras.
+5.  Fazer perguntas esclarecedoras.
+6.  Nunca interromper.
+
+### Trabalhando em Equipe
+
+1.  Definir metas claras e garantir que todos as compreendam. Buscar proativamente alinhamento e perspectivas.
+2.  Atribuir e comunicar funções e responsabilidades. Colaborar e delegar.
+3.  Estabelecer reuniões regulares de acompanhamento de progresso e lidar com bloqueios. Sempre incluir os interessados apropriados e compartilhar informações pontuais com eles.
+4.  Mensurar o impacto e reconhecer conquistas.
+
+### Trabalhando com Diferentes Estilos de Trabalho, Habilidades e Personalidades
+
+1.  Reconhecer abertamente as perspectivas e habilidades únicas que cada membro da equipe pode trazer para a equipe.
+2.  Incentivar a comunicação aberta e honesta, bem como a escuta ativa.
+3.  Criar um ambiente acolhedor e de apoio, mesmo em relação a diferenças de opiniões. Usá-las como oportunidades para crescer.
+4.  Incluir proativamente uma variedade de perspectivas e vozes na tomada de decisões.
+5.  Oferecer igualdade de oportunidades a todos os membros da equipe, incluindo acesso a canais, recursos e apoio.
+
+### Lidando com Desacordos
+
+1.  Facilitar a comunicação aberta e produtiva entre as partes relevantes.
+2.  Apresentar o conflito como uma maneira de aprimorar o trabalho em equipe e melhorar as soluções atuais.
+3.  Esclarecer a origem do conflito (e se realmente existe conflito)
+4.  Dê a cada parte igual tempo para expressar suas opiniões e preocupações sem julgamento (assumindo uma intenção positiva). Estabeleça regras básicas, se necessário, para promover a escuta ativa e a compreensão mútua. Mudar a conversa para longe das emoções e em direção às soluções. Abordar de forma habilidosa diálogos improdutivos.
+5.  Resuma e valide o ponto de vista de cada parte, refletindo-o de volta para elas.
+6.  Identificar as fontes subjacentes de conflito entre os pontos de vista.
+7.  Realize uma sessão de brainstorming e analise as opções disponíveis para alcançar da melhor forma os objetivos comuns. (Demonstre habilidade e lógica na busca de um terreno comum). Utilize dados e fatos para orientar a resolução com os outros, avaliando os prós e contras, em vez de depender apenas de opiniões.
+8.  Concordem com a melhor solução e determinem as responsabilidades de cada parte. Traga as partes relevantes para apoiar as resoluções.
+
+### Dar Feedback Construtivo
+
+1.  Dar o feedback em particular.
+2.  Lembrar-lhes do que você já aprecia neles.
+3.  Descreva comportamentos específicos que foram diretamente observados (não inferidos) e podem ser alterados, por exemplo, "não estudou a documentação" em vez de "não estava preparado".
+4.  Descreva o impacto desses comportamentos.
+5.  Destaque isso como uma oportunidade de crescimento em vez de uma falha.
+6.  Ofereça soluções.
+
+### Exemplo de história
+
+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.
+
+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.
+
+#### Tarefa
+
+- 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.
+
+#### 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.
+
+## 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?
+
+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?
+
+## Exemplos de Perguntas e Respostas sobre Colaboração
+
+A história de exemplo acima já responde à maioria (12) das perguntas de exemplo acima. Perguntas que requerem pequenas modificações estão cobertas abaixo. Se você ainda não o fez, revise nossas [dicas sobre sua disposição para a entrevista](/behavioral-interview-playbook/introduction) para aumentar suas chances de causar uma boa impressão.
+
+### Como você garante que sua mensagem seja compreendida e bem recebida pelo seu público?
+
+Você poderia responder à pergunta com uma ligeira modificação da história de exemplo, concentrando-se na explicação das informações técnicas:
+
+> Para garantir que minha mensagem seja bem compreendida, após explicar, vou fornecer alguns exemplos para ilustrar meus pontos e também fazer algumas perguntas ao meu público para confirmar sua compreensão. Em um projeto que realizei há alguns meses, tive que explicar à equipe de negócios por que e como uma funcionalidade urgente foi atrasada devido a atrasos na API de uma equipe externa. Para fazer isso, concentrei-me nas principais informações que a equipe de negócios precisava — que era como a funcionalidade foi afetada por esse atraso — e utilizei recursos visuais, além de empregar uma linguagem simples e clara. Também forneci exemplos enquanto fazia perguntas para verificar o entendimento da minha explicação. Isso permitiu que a equipe de negócios entendesse a dependência o suficiente para brainstorm maneiras de entregar a funcionalidade mesmo sem as dependências.
+
+### Como você aborda o trabalho com colegas de equipe que não estão cumprindo seus prazos ou responsabilidades?
+
+> Assim que ficar claro que seus comportamentos podem constituir um padrão preocupante, eu os informaria de maneira oportuna. Por exemplo, tive um colega de equipe em um projeto que regularmente não cumpria os prazos para correção de erros, e depois de isso ter acontecido várias vezes, agendei uma reunião privada com ele para discutir o assunto. Concentre-me em apresentar a conversa como uma oportunidade de crescimento para ele, além do que já é valorizado nele, que é seu conhecimento e orientação como um desenvolvedor sênior. Em vez de descrever um comportamento geral, como "estar atrasado", mencionei os tickets específicos que foram perdidos e o impacto que ocorreu devido a essas falhas, bem como seu efeito na moral da equipe. Em seguida, ofereci algumas soluções, como a implementação de um novo bot de lembrete dentro do canal para os tickets que estavam prestes a vencer. Ele conseguiu entender de onde eu vinha, e nossa equipe conseguiu cumprir muito melhor nossos prazos depois disso.
diff --git a/packages/behavioral-interview-guidebook/contents/collaboration/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/collaboration/zh-CN.mdx
new file mode 100644
index 0000000000..c7036346a9
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/collaboration/zh-CN.mdx
@@ -0,0 +1,206 @@
+---
+title: 回答协作行为问题
+description: 了解如何回答用于评估您的协作技能的“告诉我一个时间……”风格的问题。
+seo_title: 协作问题 | 行为面试手册
+seo_description: 了解如何回答协作行为面试问题，适用于前端工程师。参考示例答案。
+social_title: 协作行为问题 | GreatFrontEnd
+---
+
+正如我们在[行为面试准备概述](/behavioral-interview-playbook/introduction)中提到的，**协作**是准备的 8 个主要问题类别之一。
+
+协作问题可能是前端行为面试中最常见的行为问题，因为它们包含大量相关的特质，这些特质可以分组以便于故事/项目准备。
+
+在本指南中，您将学习如何解决这些问题：
+
+1. 详细的评估标准
+2. 将可能的问题抽象成常见主题
+3. 建议的答案框架
+4. 一个好的示例故事
+5. 追问的可能性质
+6. 示例问题和答案
+
+## 详细的评估标准
+
+在对该类别下的候选人进行评分时，面试官通常会关注以下标准：
+
+* 处理分歧
+* 团队合作
+* 与不同个性和技能的人合作
+* 简单地传达复杂的想法
+* 给予建设性的反馈
+* 积极倾听
+
+## 抽象协作问题
+
+正如我们在[行为面试准备概述](/behavioral-interview-playbook/introduction)中提到的，为每一个现有的行为问题具体准备答案是不切实际的。然而，通过将特定问题归入**相似的主题**，并准备涵盖大量问题要求的案例，我们可以将需要准备的案例数量减少到大约 3-5 个。
+
+协作是这样一个主题，它可以将沟通、团队合作、适应性和可教练性等子要求组合在一起。对于每个子要求，我们总结了常见问题，并抽象出了**面试官在这些问题中寻找的特质**：
+
+### 沟通
+
+#### 示例问题
+
+* 您能否描述一下您必须有效地向非技术受众传达技术信息以及您如何处理这种情况？
+* 您能否描述一下您必须调整您的沟通方式才能有效地与具有不同背景或观点的人进行沟通的情况？
+* 您能否举例说明您必须在时间压力或高压情况下传达重要信息的情况？
+* 您如何确保您的信息被受众理解和接受？
+
+#### 面试官寻找的特质
+
+* 简单地传达复杂的想法
+* 积极倾听
+
+### 团队合作
+
+#### 示例问题
+
+* 你能描述一个你必须与难以相处的利益相关者或队友合作的过去的项目，以及你是如何处理的吗？
+* 你能告诉我你必须给团队成员或同事建设性反馈的经历吗？
+* 你如何与没有按时完成任务或没有履行职责的队友一起工作？
+* 你能提供一个例子，说明你必须与团队合作，而团队成员之间存在分歧吗？
+* 你如何处理与具有不同技能和个性的团队成员一起工作？
+* 你能举一个例子说明你必须适应团队成员的工作方式才能成功完成项目吗？
+* 你如何确保所有团队成员都能被听到，他们的想法在小组讨论中得到考虑？
+* 你能举一个例子说明你必须参与一个团队项目，并且必须与他人妥协才能达成解决方案吗？
+* 你能描述一下你必须与来自不同部门或组织的人合作完成一个项目吗？
+
+#### 面试官寻找的特质
+
+* 团队合作
+* 与不同的工作方式、技能和个性合作
+* 处理分歧（他人和自己）
+* 提供建设性反馈
+
+## 建议的回答框架
+
+与往常一样，我们推荐 [STAR 格式](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 作为构建您故事的最简单、最有效的框架。
+
+基于上述抽象，我们可以看到，面试官正在寻找每个子要求的特定特征。我们创建了一个快速备忘单，用于建议展示这些期望特征的方法。
+
+理想情况下，您应该选择能够涵盖尽可能多的以下特征的故事，这样您就不必记住太多的故事。
+
+### 简单地传达复杂的想法
+
+1. 首先了解听众的知识水平。设身处地为他们着想，用他们的语言解释
+2. 了解他们需要知道（并且想知道）什么，并确定关键要点的优先级
+3. 仅在适当的时候深入了解重要细节
+4. 将想法分解成组成部分
+5. 使用视觉辅助工具，例如图表或图形
+6. 举例说明
+
+**注意**：对于沟通，像简单地传达复杂想法和积极倾听这样的特质可能会通过你实际的面试表现来评估——例如，你是否打断面试官，你是否倾听并正确理解他们的问题，你是否以一种易于理解的方式传达你的思维过程。
+
+### 积极倾听
+
+1. 专注于理解而不是回复
+2. 在对方说完之前不要评判
+3. 使用非语言提示来表明你参与其中
+4. 用你自己的话总结并重复
+5. 提出澄清问题
+6. 永远不要打断
+
+### 团队合作
+
+1. 设定明确的目标，并确保每个人都理解它们。主动寻求一致性和观点
+2. 分配和沟通角色和责任。协作和委派
+3. 定期进行进度检查并解决障碍。始终包括适当的利益相关者，并及时与他们分享信息
+4. 衡量影响并认可成就
+
+### 与不同的工作方式、技能和个性合作
+
+1. 公开承认每个团队成员可以带来的独特观点和技能
+2. 鼓励公开和诚实的沟通，以及积极的倾听
+3. 创造一个欢迎和支持的环境，即使存在意见分歧。将它们用作成长的机会
+4. 主动在决策中纳入各种观点和声音
+5. 为每个团队成员提供平等的机会，包括访问渠道、资源和支持
+
+### 处理分歧
+
+1. 促进相关各方之间开放和富有成效的沟通
+2. 将冲突作为增强团队合作和改进当前解决方案的一种方式
+3. 澄清冲突的根源（以及是否真的存在冲突）
+4. 给每一方同等的时间来表达他们的观点和担忧，而不加评判（假设积极的意图）。如果需要，设置基本规则以培养积极的倾听和理解。将谈话从情绪转移到解决方案。巧妙地处理无效的对话
+5. 总结并验证每一方的立场，向他们反映
+6. 找出立场之间的潜在冲突根源
+7. 集思广益并运行可用于最好地实现共同目标的选项。（展示在寻找共同点方面的技能和逻辑）。使用数据和事实来推动与他人的解决方案，权衡利弊，而不仅仅是依赖意见
+8. 同意最佳解决方案并确定各方的责任。引入相关方以支持解决方案
+
+### 给予建设性的反馈
+
+1. 在私下给予反馈
+2. 提醒他们你已经欣赏他们的哪些方面
+3. 描述直接观察到的（而不是推断的）并且可以改变的具体行为，例如“没有学习文档”而不是“没有准备好”
+4. 描述上述行为的影响
+5. 将其指出为成长的机会而不是错误
+6. 提供可行的建议
+
+尽管似乎有大量所需的特质，但您可以通过工程团队中非常常见的情况来涵盖其中的 90%：
+
+* 你不得不在一个跨职能团队中工作（例如，与业务相关者或产品经理或设计师）在高压情况下，优先事项和要求变化迅速
+* 业务/设计和工程之间存在利益冲突，例如业务/设计推动（要求）更紧的截止日期，而从工程角度来看，赶工这些截止日期将导致大量的技术债务
+* 你必须向业务/设计提供关于该问题的建设性反馈
+* 在这样做时，你需要向非技术受众传达技术概念
+* 此外，你向他们征求反馈意见，以了解工程部门如何更好地协作以避免再次出现此问题。 在这样做时，你定期与他们一起检查需求或要求的清单，看看是否可以删除任何需求以加快工程交付。 此外，你满足了他们对时间线问责制的需求，提供了定期更新
+
+根据您的情况添加具体细节。
+
+## 案例故事
+
+这是一个使用 STAR 格式的案例故事。
+
+**情境**
+
+* 在我目前作为一家初创公司的前端工程师的工作中，我不得不领导一个高度紧急的营销项目的开发，与营销和设计进行跨职能合作
+* 在某个时候，营销部门希望该功能在下周内发布，但由于依赖于合作伙伴 API 团队，工程部门遇到了重大障碍，由于最近两名高级成员的离职，该团队的交付被推迟
+* 这种情况变得激烈，因为营销部门不理解工程部门面临的障碍
+
+**任务**：我必须解决误解，以确保两个团队之间的顺利合作关系
+
+**行动**
+
+* 为了做到这一点，我私下与市场营销部门进行了沟通，并给他们时间来清楚地解释市场营销部门可能对工程部门的紧迫性、担忧或误解
+* 然后，我解释了合作伙伴团队的作用，重点介绍了他们对该功能的影响，而不是复杂的的技术信息
+* 通过这样做，我们能够集思广益，即使没有外部依赖关系，我们也可以用不同的方式发布该功能
+* 与此同时，我还与合作伙伴团队的经理沟通了该项目对公司的重要性，以及重新调整他们的工作优先级以帮助我们解除障碍的可能性
+* 除此之外，我还征求了关于工程部门如何更好地与市场营销部门合作以避免将来出现此类误解的反馈意见
+
+**结果**
+
+* 由于工程和营销之间的紧密合作，我们能够及时发布该功能
+* 由于营销部门优先考虑时间表和问责制，我们开始提供定期更新，并讨论了每个潜在障碍的替代方案
+* 这样，此后每个功能都成功顺利地交付
+
+## 后续问题的可能性质
+
+正如我们在 [行为面试准备概述](/behavioral-interview-playbook/introduction) 中提到的，鼓励面试官更多地依赖后续问题来真正了解候选人的思维过程和动机，这些问题通常属于以下几类：
+
+* 你认为你为什么做了（插入动作）？
+* 你为什么没有做（插入动作）？
+* 事后看来，你会如何做不同的事情？
+
+对于关于协作的问题，面试官很可能会探究问题，以帮助他们更多地了解：
+
+* **了解某些利益相关者是否参与以及原因**
+  * 哪些利益相关者参与了讨论，为什么？
+  * 为什么某些利益相关者（如（插入利益相关者））被排除在小组之外？
+* **了解群体动态及其如何影响处理该群体的策略**
+  * 小组中存在哪些个性，它如何影响动态？ 这种理解是否影响了您驾驭小组讨论的策略？
+* **了解候选人对冲突的心态**
+  * 您认为这样的冲突如何影响工作环境？ 您是否更愿意避免它们？
+* **了解解决方案是如何产生的； 候选人是仅仅听从他人，而不是依赖事实和数据？**
+  * 在做出决定时，是否利用了任何数据和信息？
+  * 是否对每个解决方案的优缺点进行了分析？
+
+## 协作问题的示例和答案
+
+上面的案例故事已经回答了上面大多数（12 个）示例问题。 需要稍作修改的问题将在下面介绍。 如果你还没有，请查看我们的 [关于面试倾向的提示](/behavioral-interview-playbook/introduction)，以增加你留下良好印象的机会。
+
+### 您如何确保您的信息被受众理解和接受？
+
+你可以稍微修改一下示例故事来回答这个问题，重点解释技术信息：
+
+> 为了确保我的信息被很好地理解，在解释之后，我将提供一些例子来说明我的观点，并向听众提出一些问题来确认他们的理解。 在几个月前的一个项目中，我不得不向业务团队解释为什么以及如何由于外部团队的 API 延迟而导致紧急功能被延迟。 为此，我重点关注了业务团队需要了解的关键内容——即该功能如何受到这种延迟的影响，并利用视觉辅助工具以及简单明了的语言。 我还举例说明，同时提出问题以确定他们对我的解释的理解程度。 这使得业务团队能够很好地理解依赖关系，从而即使没有依赖关系，也能集思广益地交付该功能。
+
+### 你如何与未按时完成任务或未履行职责的队友合作？
+
+> 一旦明确他们的行为可能构成令人担忧的模式，我就会及时让他们知道。 例如，我有一个项目团队成员经常错过修复错误的期限，一旦发生多次，我就会安排与他进行私人会议，与他们谈论此事。 我侧重于将谈话框定为他在他已经受到赞赏的方面（即他作为高级开发人员的知识和指导）之上的一个成长机会。 我没有描述诸如“迟到”之类的普遍行为，而是提到了错过的具体票证以及错过它们所产生的影响，以及它对团队士气的影响。 然后，我提供了一些解决方案，例如在渠道内制定一个新的提醒机器人，用于即将到期的票证。 他能够理解我的出发点，并且在那之后，我们的团队能够更好地按时完成任务。
diff --git a/packages/behavioral-interview-guidebook/contents/growth-mindset/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/growth-mindset/en-US.langnostic.json
new file mode 100644
index 0000000000..c65e94bf27
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/growth-mindset/en-US.langnostic.json
@@ -0,0 +1,86 @@
+{
+  "frontmatter": {
+    "title": "4be5734f",
+    "description": "a0cbee39",
+    "seo_title": "59bc08de",
+    "seo_description": "37a2958a",
+    "social_title": "ebca470b"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "740df33d",
+        "e3e74d45",
+        "1da50bd5",
+        "36411aef",
+        "966b14d0",
+        "67567737",
+        "c5bb8736",
+        "da1e01cf",
+        "c3efc59f",
+        "1b7566c1",
+        "a871dc08",
+        "c2710b5",
+        "8cccd0a6",
+        "18164c5f",
+        "f6bafdb3",
+        "f7c2150b",
+        "5c14dd25",
+        "b0734b6a",
+        "d15840df",
+        "22e4d72b",
+        "5fe08706",
+        "fc118514",
+        "3806bdb5",
+        "d8088d4d",
+        "1be93c86",
+        "31276d96",
+        "9f1726c5",
+        "10099f1e",
+        "89a17680",
+        "27d3bc20",
+        "db3b7ea4",
+        "7ceacd8c",
+        "ae504c2c"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "740df33d",
+        "e3e74d45",
+        "1da50bd5",
+        "36411aef",
+        "966b14d0",
+        "67567737",
+        "c5bb8736",
+        "da1e01cf",
+        "c3efc59f",
+        "1b7566c1",
+        "a871dc08",
+        "c2710b5",
+        "8cccd0a6",
+        "18164c5f",
+        "f6bafdb3",
+        "f7c2150b",
+        "5c14dd25",
+        "b0734b6a",
+        "d15840df",
+        "22e4d72b",
+        "5fe08706",
+        "fc118514",
+        "3806bdb5",
+        "d8088d4d",
+        "1be93c86",
+        "31276d96",
+        "9f1726c5",
+        "10099f1e",
+        "89a17680",
+        "27d3bc20",
+        "db3b7ea4",
+        "7ceacd8c",
+        "ae504c2c"
+      ]
+    }
+  }
+}
diff --git a/packages/behavioral-interview-guidebook/contents/growth-mindset/en-US.mdx b/packages/behavioral-interview-guidebook/contents/growth-mindset/en-US.mdx
new file mode 100644
index 0000000000..f2d4a9e728
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/growth-mindset/en-US.mdx
@@ -0,0 +1,132 @@
+---
+title: Answering Growth Mindset Behavioral Questions
+description: Learn how to answer "Tell me about a time..." styled questions for evaluating if you have a strong growth mindset.
+seo_title: Growth Mindset Questions | Behavioral Interview Playbook
+seo_description: Learn how to answer growth mindset behavioral interview questions, for front end engineers. Refer to sample answers.
+social_title: Growth Mindset Behavioral Questions | GreatFrontEnd
+---
+
+As mentioned in our [behavioral interview preparation overview](/behavioral-interview-playbook/introduction), **growth mindset** is one of the 8 main categories of questions to prepare for.
+
+In this guide, you will learn how to tackle them:
+
+1. Evaluation criteria in detail
+1. Abstracting possible questions into common themes
+1. Suggested answer framework
+1. Sample questions and answers
+
+## Evaluation criteria in detail
+
+When evaluating candidates under this category, interviewers are often looking at the following criteria:
+
+- Having self awareness of strengths and development areas
+- Actively soliciting feedback from others and creating feedback loops
+- Taking feedback and setbacks well, viewing them as opportunities
+- Takes personal accountability for failures
+- Reflecting, modeling best practices and applying lessons to new situations
+- Energized by setting and working towards challenging goals
+- Proactively learning new skills and applying to work
+
+## Abstracting growth mindset questions
+
+### Common questions
+
+- What do you think is your greatest area for improvement?
+- Can you tell me about a time you improved upon your work upon receiving criticism or feedback?
+- Tell me about a time you set a difficult goal for yourself and achieved it
+- Tell me about a time you learnt a new skill outside of work and applied it to your work
+- Tell me about a time you learnt a new skill set after observing others leveraging it to great success
+- How do you stay up to date on the latest front end technologies and techniques?
+- Can you provide an example of a time when you had to adapt to a new technical environment or framework?
+- Imagine you need to implement a new system that you do not have much experience with. What steps do you take to gather information and ensure successful execution?
+
+### Themes identified
+
+As mentioned in our [behavioral interview preparation overview](/behavioral-interview-playbook/introduction), it is impractical to prepare answers specifically for every behavioral question out there. However, by batching specific questions into similar themes and preparing stories that cover a large number of question requirements, we can reduce the number of stories to prepare to around 3-5 stories.
+
+These are the themes which seem to recur:
+
+- Receiving and managing feedback
+- Mindset towards challenges and stretch goals
+- Continued learning
+
+## Suggested answer framework
+
+As always, the [STAR format](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) is the simplest and most effective framework that we recommend to structure your story.
+
+Here are our recommended approaches for each identified theme, with which you can structure your story around:
+
+### Receiving and managing feedback/setbacks
+
+1. Actively solicit feedback from others where possible e.g. after every large project
+1. Take personal accountability for mistakes and produce an action plan to address them
+1. Have a healthy mindset towards feedback / setbacks
+   1. View them as opportunities to improve yourself
+   1. Focus on being constructive and solutions-focused than emotions-driven
+1. Take steps to reflect upon past experiences in order to model best practices and put them into action in the next relevant situation
+
+### Mindset towards challenges / stretch goals
+
+1. Derive energy from setting and working towards stretch goals, seeing them as opportunities for growth
+1. Display consistency and discipline in following through with detailed plan
+
+### Continued learning
+
+A good answer combines a consistent schedule and effort placed into learning, as well as how the learning was proactively applied to work. e.g. "I learned about X because I was doing Y. This impacted the way that I was tackling Z at work because it made me realize W and V".
+
+The points below are key ideas you can structure your answer around technical learning; however, you should still add on concrete examples of events, newsletters or communities you have actually participated in, to showcase your willingness to keep up with trends.
+
+1. Follow relevant blogs, newsletters, podcasts that cover the latest developments in front end technologies and techniques. Give some examples (which you do actually follow) and the content or tech they provide.
+   1. Front End Influencers
+      1. [Dan Abramov](https://twitter.com/dan_abramov) — Co-creator of Redux, React core team
+      1. [Evan You](https://twitter.com/youyuxi) — Creator of Vue.js and Vite
+      1. [Rich Harris](https://twitter.com/Rich_Harris) — Creator of Svelte and Rollup
+      1. [Kent C. Dodds](https://twitter.com/kentcdodds) — Popular React ecosystem course creator
+      1. [Josh W. Comeau](https://twitter.com/JoshWComeau) — Popular front end course creator
+   1. Blogs & Magazines
+      1. [CSS-Tricks](https://css-tricks.com/)
+      1. [ui.dev](https://ui.dev/)
+      1. [JavaScript Weekly](https://javascriptweekly.com/)
+      1. [Best of JavaScript](https://bestofjs.org/)
+   1. Podcasts
+      1. [Syntax](https://syntax.fm/)
+      1. [JS Party](https://changelog.com/jsparty)
+      1. [The Changelog](https://changelog.com/podcast)
+1. Attend tech conferences and meetups to learn new developments, network and get hands-on experience with the latest tools and technologies.
+1. Experiment and build projects using the latest technologies and techniques. This could involve building small projects on your own or contributing to open source projects.
+1. Stay engaged with the broader front end development community by participating in online forums, following relevant Twitter accounts and hashtags, and joining local user groups or meetups.
+
+## Sample questions and answers
+
+### How do you stay up to date on the latest front end technologies and techniques?
+
+> I have been working at a big tech company for the past two years now and the company uses a mix of external and internal technologies for our front end stack. Because we have a huge code base and established practice of doing things, we tend to not upgrade libraries that often and change our technology choices. It was only after a year into the job that I realized that I have been too comfortable in my role since I have fully ramped up on the code base and haven't learnt anything new for the past year. It was then that I decided that I have to be proactive in my learning in order to keep my skills sharp and relevant.
+>
+> The Front End ecosystem moves really fast and there's a joke that there's a new JavaScript library emerging every day. Thankfully the ecosystem is more stable compared to 2015/2016 when a new wave of front end tooling first emerged. To keep myself updated without suffering from JavaScript fatigue, I spend a weekend every month going through front end newsletters like "This Week in React" and "JavaScript Weekly" and reading engineering blogs. If I see something interesting or is relevant to my job, I will dive deeper into them by trying out small examples and building small prototypes in my company's code base. For example, I recently discovered React Query, which is a data fetching library for React that uses a declarative paradigm for fetching data and am trying to incorporate it into my work. I also recently discovered tRPC, a library that enforces type safety between client and server boundaries, which is an issue that has caused some bugs for us.
+>
+> To make this learning process more fun and collaborative, I started a front end social club within my company by creating a new Slack channel and inviting a few like-minded coworkers to join. Anyone can share front end news they find interesting there and discuss front end technologies. It has been pretty well-received, with over 30 people currently in the channel and activity nearly everyday. A side effect of this initiative is that people also start asking questions about front end issues they are facing at work, and we created another Slack channel for people to get help on front end issues. Feedback has been really positive so far!
+
+This answer uses the STAR technique in a subtle fashion and demonstrates many qualities interviewers would like to see in candidates:
+
+- **Passion**: Keen to learn more about front end domain
+- **Growth**: Identified that the lack of growth would be a problem
+- **Initiative**: Acted on the problem of lack of growth
+- **Problem solving**: Thought of ways to solve the lack of growth, and executed on it
+- **Building camaraderie**: Rallying like minded folks for a common cause
+- **Helps improves others**: Created Slack channels for sharing knowledge and supporting others
+
+### Can you provide an example of a time when you had to adapt to a new technical environment or framework?
+
+> When I joined my current company back in 2019, I was fresh out of college and had no experience with the front end stack that the company was using, which used React, Apollo, Styled Components, TypeScript for their front end stack and a Django + GraphQL back end. Back in college, I was mainly using Vue.js for front end development as it was the JavaScript framework of choice taught in the web development class and haven't used GraphQL before.
+>
+> It was definitely a huge learning curve for me at the start and I was really afraid of underperforming due to my unfamiliarity with the tech stack. Thankfully I had a mentor who gave me a lot of guidance on the tech stack and came up with a number of onboarding tasks which were progressively harder. I first spent a few days reading the documentation websites of the technologies and trying out the examples on their websites. I made it a point to understand the problems that these libraries were solving and how they were better than prior art because I think knowing that is important for fully appreciating the library and using the right tool for the right job. I also looked up some resources that compared Vue.js to React, as they were quite similar yet had some differences. That helped me to learn React faster (fully grasping React hooks still took me some time though). When I had time at nights or on weekends, I'd explore building small projects using these new technologies and also rebuild my personal blog using Gatsby because it used both React and GraphQL.
+>
+> Within two months, I felt like I had learnt so much and was comfortable with most of the code base. I could build full stack features without much guidance from my mentor. To help future new employees who might face the same onboarding challenge, I jotted down my learnings in our internal wiki along with links to the best resources for learning the topic. My manager appreciated the initiative and commended me for that. Today, it is part of our official engineering onboarding resource and I update it every once in a while. A few new joiners have also thanked me for sharing my knowledge in the wiki and making their onboarding process smoother.
+
+Analysis of the answer:
+
+- **Coachable**: Follows guidance/suggestions by the mentor
+- **Problem solving**: Came up with a few ways to help themselves onboard faster
+- **Initiative**: Initiative to start the wiki
+- **Empathy**: See that others might face the same issues and started the wiki
+- **Helps improves others**: New joiners benefit from the wiki
diff --git a/packages/behavioral-interview-guidebook/contents/growth-mindset/pt-BR.mdx b/packages/behavioral-interview-guidebook/contents/growth-mindset/pt-BR.mdx
new file mode 100644
index 0000000000..eb64c7c444
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/growth-mindset/pt-BR.mdx
@@ -0,0 +1,129 @@
+---
+title: Respondendo "Conte-me sobre uma época em que..." para Growth Mindset
+description: Aprenda como responder perguntas comportamentais sobre mentalidade construtiva, para desenvolvedores front-end/web/engenheiros de software. Faça referência a respostas de exemplo.
+---
+
+Conforme mencionado em nossa [visão geral de preparação para entrevistas comportamentais](/guia-de-entrevistas-comportamentais), **mentalidade de crescimento** é uma das 8 principais categorias de perguntas para se preparar.
+
+Neste guia, você aprenderá como abordá-las:
+
+1.  Critérios de avaliação em detalhes
+2.  Abstraindo possíveis perguntas em temas comuns
+3.  Estrutura de Resposta Sugerida
+4.  Perguntas e respostas de exemplo
+
+## Critérios de Avaliação em Detalhes
+
+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.
+
+## 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?
+
+### Temas Identificados
+
+As mentioned in our [behavioral interview preparation overview](/behavioral-interview-playbook/introduction), it is impractical to prepare answers specifically for every behavioral question out there. No entanto, ao agrupar perguntas específicas em temas semelhantes e preparar histórias que cubram um grande número de requisitos de perguntas, podemos reduzir o número de histórias a serem preparadas para cerca de 3-5 histórias.
+
+Esses são os temas que parecem se repetir:
+
+- Recebendo e gerenciando feedback.
+- Mentalidade em relação a desafios e metas desafiadoras.
+- Continue aprendendo.
+
+## Estrutura de Resposta Sugerida
+
+Como sempre, o [formato STAR](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) é a estrutura mais simples e eficaz que recomendamos para estruturar sua história.
+
+Aqui estão nossas abordagens recomendadas para cada tema identificado, com as quais você pode estruturar sua história:
+
+### Recebendo e Gerenciando Feedback/Contratempos
+
+1.  Solicitar ativamente feedback de outras pessoas sempre que possível, por exemplo, após cada projeto grande.
+2.  Assumir responsabilidade pessoal por erros e elaborar um plano de ação para resolvê-los.
+3.  Tenha uma mentalidade saudável em relação ao feedback / contratempos
+    1.  Veja-os como oportunidades para melhorar a si mesmo
+    2.  Concentre-se em ser construtivo e orientado para soluções em vez de ser guiado pelas emoções.
+4.  Dê passos para refletir sobre experiências passadas a fim de modelar as melhores práticas e colocá-las em ação na próxima situação relevante.
+
+### Mentalidade em relação a desafios / metas ambiciosas
+
+1.  Obtenha energia ao definir e trabalhar em direção a metas desafiadoras, vendo-as como oportunidades de crescimento.
+2.  Demonstre consistência e disciplina ao seguir um plano detalhado.
+
+### Aprendizagem contínua
+
+Uma boa resposta combina uma programação consistente e esforço dedicado à aprendizagem, bem como como essa aprendizagem foi proativamente aplicada ao trabalho. por exemplo: "Eu aprendi sobre X porque eu estava fazendo Y. Isso impactou a maneira que eu estava enfrentando Z no trabalho porque me fez realizar W e V".
+
+Os pontos abaixo são ideias-chave em torno das quais você pode estruturar sua resposta sobre aprendizado técnico; no entanto, você deve ainda adicionar exemplos concretos de eventos, boletins informativos ou comunidades dos quais você realmente participou, para demonstrar sua disposição em acompanhar as tendências.
+
+1.  Acompanhe blogs, boletins informativos e podcasts relevantes que abordem as últimas novidades em tecnologias e técnicas de front-end. Dê alguns exemplos (que você realmente segue) e o conteúdo ou tecnologia que eles fornecem.
+    1.  Influenciadores do Twitter
+        1.  [Dan Abramov](https://twitter.com/dan_abramov) — Co-criador da equipe core do Redux, React.
+        2.  [Evan You](https://twitter.com/youyuxi) — Criador do Vue.js e Vite.
+        3.  [Rich Harris](https://twitter.com/Rich_Harris) — Criador do Svelte e Rollup.
+        4.  [Kent C. Dodds](https://twitter.com/kentcdodds) — Famoso criador de cursos no ecossistema do React.
+        5.  [Josh W. Comeau](https://twitter.com/JoshWComeau) — Famoso criador de cursos de front-end.
+    2.  Blogs e Revistas
+        1.  [CSS-Tricks](https://css-tricks.com/)
+        2.  [ui.dev](https://ui.dev/)
+        3.  [JavaScript Semanal](https://javascriptweekly.com/)
+        4.  [O melhor do JavaScript](https://bestofjs.org/)
+    3.  Podcasts
+        1.  [Syntax](https://syntax.fm/)
+        2.  [Festa JS](https://changelog.com/jsparty)
+        3.  [Log de alterações](https://changelog.com/podcast)
+2.  Participar de conferências de tecnologia e encontros para aprender sobre novos desenvolvimentos, fazer contatos e obter experiência prática com as últimas ferramentas e tecnologias.
+3.  Experimente e desenvolva projetos utilizando as tecnologias e técnicas mais recentes. Isso pode envolver a criação de pequenos projetos por conta própria ou contribuir para projetos de código aberto.
+4.  Mantenha-se envolvido com a comunidade mais ampla de desenvolvimento front-end participando de fóruns online, seguindo contas e hashtags relevantes no Twitter e juntando-se a grupos de usuários locais ou encontros.
+
+## "Exemplos de Perguntas e Respostas"
+
+### Como você se mantém atualizado nas mais recentes tecnologias e técnicas de front-end?
+
+> Tenho trabalhado em uma grande empresa de tecnologia nos últimos dois anos, e a empresa utiliza uma combinação de tecnologias externas e internas para nossa pilha de front-end. Devido ao nosso grande código base e à prática estabelecida de fazer as coisas, tendemos a não atualizar bibliotecas com frequência e a mudar nossas escolhas de tecnologia. Foi apenas após um ano no cargo que percebi que estava muito confortável em minha função, uma vez que já estava totalmente familiarizado com o código base e não havia aprendido nada de novo no último ano. Foi então que decidi ser proativo em minha aprendizagem, a fim de manter minhas habilidades afiadas e relevantes.
+>
+> O ecossistema de Front-End evolui muito rapidamente, e há uma piada de que surge uma nova biblioteca JavaScript a cada dia. Felizmente, o ecossistema está mais estável em comparação com 2015/2016, quando uma nova onda de ferramentas de front-end surgiu pela primeira vez. Para me manter atualizado sem sofrer com o excesso de informações no mundo do JavaScript, dedico um final de semana por mês para ler newsletters de desenvolvimento front-end, como "This Week in React" e "JavaScript Weekly", e também para ler blogs de engenharia. Se eu encontrar algo interessante ou relevante para o meu trabalho, eu vou aprofundar meu conhecimento, experimentando pequenos exemplos e construindo pequenos protótipos no código da minha empresa. Por exemplo, recentemente descobri o React Query, que é uma biblioteca de busca de dados para o React que utiliza um paradigma declarativo para buscar dados, e estou tentando incorporá-lo ao meu trabalho. Também descobri recentemente o tRPC, uma biblioteca que impõe segurança de tipos entre os limites do cliente e do servidor, o que é um problema que tem causado alguns bugs para nós.
+>
+> Para tornar esse processo de aprendizado mais divertido e colaborativo, criei um clube social de desenvolvimento front-end dentro da minha empresa, criando um novo canal no Slack e convidando alguns colegas com interesses semelhantes para participar. Qualquer pessoa pode compartilhar notícias sobre desenvolvimento front-end que acharem interessantes lá e discutir tecnologias front-end. Tem sido muito bem recebido, com mais de 30 pessoas atualmente no canal e atividade quase todos os dias. Um efeito colateral dessa iniciativa é que as pessoas também começaram a fazer perguntas sobre problemas de desenvolvimento front-end que estão enfrentando no trabalho, e criamos outro canal no Slack para que as pessoas possam obter ajuda com essas questões. Até agora, o feedback tem sido realmente positivo!
+
+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.
+
+### Você pode fornecer um exemplo de uma vez em que teve que se adaptar a um novo ambiente técnico ou framework?
+
+> Quando me juntei à minha empresa atual em 2019, eu estava recém-saído da faculdade e não tinha experiência com o conjunto de tecnologias front-end que a empresa estava usando, que incluía React, Apollo, Styled Components e TypeScript, além de um back-end com Django e GraphQL. Na faculdade, eu estava principalmente usando Vue.js para o desenvolvimento front-end, já que era o framework JavaScript ensinado na aula de desenvolvimento web, e eu não tinha experiência prévia com GraphQL.
+>
+> Certamente foi uma curva de aprendizado íngreme para mim no início, e eu estava realmente com medo de não me sair bem devido à minha falta de familiaridade com o conjunto de tecnologias. Felizmente, tive um mentor que me deu muita orientação sobre o conjunto de tecnologias e elaborou uma série de tarefas de integração que foram ficando progressivamente mais difíceis. Primeiro, passei alguns dias lendo os sites de documentação das tecnologias e experimentando os exemplos em seus sites. Eu me esforcei para compreender os problemas que essas bibliotecas estavam resolvendo e como eram melhores do que as soluções anteriores, porque acredito que saber isso é importante para realmente apreciar a biblioteca e usar a ferramenta certa para o trabalho certo. Também pesquisei recursos que comparavam o Vue.js ao React, já que eram bastante semelhantes, mas tinham algumas diferenças. Isso me ajudou a aprender o React mais rapidamente (embora eu tenha levado algum tempo para compreender completamente os React hooks). Quando tinha tempo à noite ou nos fins de semana, explorava a construção de pequenos projetos usando essas novas tecnologias e também reconstruía meu blog pessoal usando o Gatsby (porque ele usava tanto o React quanto o GraphQL).
+>
+> Em dois meses, senti que tinha aprendido muito e estava confortável com a maior parte do código. Eu conseguia desenvolver recursos de ponta a ponta sem muita orientação do meu mentor. Para ajudar futuros novos funcionários que possam enfrentar o mesmo desafio de integração, anotei minhas aprendizagens em nossa wiki interna, juntamente com links para os melhores recursos para aprender sobre o assunto. Meu gerente ficou surpreso com a iniciativa e me elogiou por isso. Hoje, faz parte dos nossos recursos oficiais de integração para engenheiros, e eu o atualizo de tempos em tempos. Alguns novos colaboradores também me agradeceram por compartilhar meu conhecimento na wiki e tornar o processo de integração mais fácil para eles.
+
+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.
diff --git a/packages/behavioral-interview-guidebook/contents/growth-mindset/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/growth-mindset/zh-CN.mdx
new file mode 100644
index 0000000000..7f8950bae1
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/growth-mindset/zh-CN.mdx
@@ -0,0 +1,132 @@
+---
+title: 回答成长型思维行为问题
+description: 了解如何回答“告诉我一个时间……”风格的问题，以评估您是否具有强大的成长型思维。
+seo_title: 成长型思维问题 | 行为面试手册
+seo_description: 了解如何回答成长型思维行为面试问题，适用于前端工程师。参考示例答案。
+social_title: 成长型思维行为问题 | GreatFrontEnd
+---
+
+正如我们在[行为面试准备概述](/behavioral-interview-playbook/introduction)中提到的，**成长心态**是准备的 8 个主要问题类别之一。
+
+在本指南中，您将学习如何解决它们：
+
+1. 详细的评估标准
+2. 将可能的问题抽象成共同主题
+3. 建议的答案框架
+4. 示例问题和答案
+
+## 详细评估标准
+
+在评估该类别的候选人时，面试官通常会关注以下标准：
+
+* 了解自身的优势和发展领域
+* 积极征求他人的反馈并建立反馈循环
+* 很好地接受反馈和挫折，将其视为机会
+* 对失败承担个人责任
+* 反思、建模最佳实践并将经验应用于新情况
+* 通过设定和努力实现具有挑战性的目标来获得能量
+* 主动学习新技能并将其应用于工作
+
+## 抽象成长心态问题
+
+### 常见问题
+
+* 你认为你最大的改进领域是什么？
+* 你能告诉我你收到批评或反馈后改进工作的经历吗？
+* 告诉我你为自己设定了一个困难的目标并实现了它的经历
+* 告诉我你学习了工作之外的新技能并将其应用于工作的经历
+* 告诉我你观察到其他人利用新技能取得巨大成功后学习新技能的经历
+* 你如何及时了解最新的前端技术和技术？
+* 你能否提供一个你必须适应新的技术环境或框架的例子？
+* 假设你需要实施一个你没有太多经验的新系统。你采取哪些步骤来收集信息并确保成功执行？
+
+### 确定的主题
+
+正如我们在[行为面试准备概述](/behavioral-interview-playbook/introduction)中提到的，为每个现有的行为问题专门准备答案是不切实际的。但是，通过将特定问题归入类似的主题并准备涵盖大量问题要求的故事情节，我们可以将要准备的故事数量减少到大约 3-5 个故事。
+
+这些是似乎反复出现的主题：
+
+* 接收和管理反馈
+* 对待挑战和拓展目标的心态
+* 持续学习
+
+## 建议的答案框架
+
+与往常一样，[STAR 格式](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique)是我们推荐用于构建故事的最简单、最有效的框架。
+
+以下是我们为每个已确定的主题推荐的方法，您可以使用这些方法来构建您的故事：
+
+### 接收和管理反馈/挫折
+
+1. 尽可能积极地征求他人的反馈，例如在每个大型项目之后
+2. 对错误承担个人责任并制定行动计划来解决它们
+3. 对反馈/挫折保持健康的心态
+   1. 将它们视为提高自己的机会
+   2. 专注于建设性和以解决方案为导向，而不是情绪驱动
+4. 采取措施反思过去的经验，以便为最佳实践建模，并在下一个相关情况下将它们付诸行动
+
+### 对待挑战/拓展目标的心态
+
+1. 从设定和努力实现拓展目标中获得能量，将它们视为成长的机会
+2. 在执行详细计划时表现出一致性和纪律性
+
+### 持续学习
+
+一个好的答案结合了持续的时间表和投入到学习中的努力，以及如何主动将学习应用于工作。例如：“我学习了 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 的创建者
+      4. [Kent C. Dodds](https://twitter.com/kentcdodds) — 热门 React 生态系统课程创建者
+      5. [Josh W. Comeau](https://twitter.com/JoshWComeau) — 热门前端课程创建者
+   2. 博客和杂志
+      1. [CSS-Tricks](https://css-tricks.com/)
+      2. [ui.dev](https://ui.dev/)
+      3. [JavaScript Weekly](https://javascriptweekly.com/)
+      4. [Best of JavaScript](https://bestofjs.org/)
+   3. 播客
+      1. [Syntax](https://syntax.fm/)
+      2. [JS Party](https://changelog.com/jsparty)
+      3. [The Changelog](https://changelog.com/podcast)
+2. 参加技术会议和聚会，学习新的发展，建立人脉，并获得最新工具和技术的实践经验。
+3. 使用最新的技术和技术进行实验和构建项目。这可能涉及自己构建小型项目或为开源项目做出贡献。
+4. 通过参与在线论坛、关注相关的 Twitter 帐户和主题标签以及加入当地用户组或聚会，与更广泛的前端开发社区保持互动。
+
+## 示例问题和答案
+
+### 您如何及时了解最新的前端技术和技术？
+
+> 在过去的两年里，我一直在一家大型科技公司工作，该公司使用外部和内部技术的混合来构建我们的前端堆栈。由于我们拥有庞大的代码库和既定的做事方式，我们倾向于不经常升级库和更改我们的技术选择。直到工作一年后，我才意识到我一直对自己的角色感到太舒服了，因为我已经完全掌握了代码库，并且在过去的一年里没有学到任何新东西。正是在那时，我决定必须积极主动地学习，以保持我的技能敏锐和相关。
+>
+> 前端生态系统发展非常快，有一个笑话是每天都会出现一个新的 JavaScript 库。值得庆幸的是，与 2015/2016 年首次出现新一波前端工具时相比，生态系统更加稳定。为了让自己保持更新，而不会遭受 JavaScript 疲劳，我每个月都会花一个周末浏览前端新闻通讯，例如“本周 React”和“JavaScript Weekly”，并阅读工程博客。如果我看到一些有趣或与我的工作相关的内容，我将通过尝试小例子并在我公司的代码库中构建小型原型来更深入地研究它们。例如，我最近发现了 React Query，这是一个用于 React 的数据获取库，它使用声明式范例来获取数据，并且正在尝试将其整合到我的工作中。我还最近发现了 tRPC，这是一个在客户端和服务器边界之间强制类型安全的库，这个问题给我们带来了一些错误。
+>
+> 为了让这个学习过程更有趣和协作性，我通过创建一个新的 Slack 频道并邀请一些志同道合的同事加入，在我公司内部创建了一个前端社交俱乐部。任何人都可以分享他们认为有趣的前端新闻并在那里讨论前端技术。它受到了很好的欢迎，目前频道中有 30 多人，几乎每天都有活动。这项计划的一个副作用是，人们也开始询问他们工作中遇到的前端问题，我们创建了另一个 Slack 频道，供人们获得有关前端问题的帮助。到目前为止，反馈一直非常积极！
+
+这个答案以一种微妙的方式使用了 STAR 技术，并展示了面试官希望在候选人身上看到许多品质：
+
+* **热情**：渴望了解更多关于前端领域的信息
+* **成长**：确定缺乏成长会成为一个问题
+* **主动性**：针对缺乏成长的问题采取行动
+* **解决问题**：思考解决缺乏成长的方法，并执行
+* **建立友情**：召集志同道合的人为共同的事业而奋斗
+* **帮助改善他人**：创建 Slack 频道以分享知识和支持他人
+
+### 您能否提供一个您必须适应新的技术环境或框架的例子？
+
+> 2019 年我加入现在的公司时，我刚从大学毕业，对公司正在使用的前端技术栈一无所知，该公司使用 React、Apollo、Styled Components、TypeScript 作为前端技术栈，并使用 Django + GraphQL 作为后端。在大学时，我主要使用 Vue.js 进行前端开发，因为它是网络开发课程中选择的 JavaScript 框架，而且以前从未使用过 GraphQL。
+>
+> 对我来说，一开始绝对是一个巨大的学习曲线，由于我不熟悉技术栈，我真的很害怕表现不佳。 幸运的是，我有一位导师，他在技术栈方面给了我很多指导，并提出了一些逐渐变得更难的入职任务。 我首先花几天时间阅读这些技术的文档网站，并尝试了它们网站上的示例。 我明确指出要了解这些库正在解决的问题以及它们如何优于现有技术，因为我认为了解这一点对于充分欣赏该库并为正确的工作使用正确的工具非常重要。 我还查阅了一些将 Vue.js 与 React 进行比较的资源，因为它们非常相似，但也有一些差异。 这帮助我更快地学习 React（尽管完全掌握 React 钩子仍然花了我一些时间）。 当我在晚上或周末有时间时，我会探索使用这些新技术构建小型项目，并使用 Gatsby 重建我的个人博客，因为它同时使用了 React 和 GraphQL。
+>
+> 在两个月内，我觉得我学到了很多东西，并且对大部分代码库都很熟悉。 我可以在没有导师太多指导的情况下构建全栈功能。 为了帮助将来可能面临相同入职挑战的新员工，我将我的学习内容记录在我们的内部 wiki 中，并附上了学习该主题的最佳资源的链接。 我的经理很欣赏这项主动性，并为此表扬了我。 如今，它已成为我们官方的工程入职资源的一部分，我时不时地更新它。 一些新加入者也感谢我在 wiki 中分享我的知识并使他们的入职过程更顺畅。
+
+答案分析：
+
+* **Coachable**: 接受指导/建议
+* **Problem solving**: 想出了一些方法来帮助自己更快地融入
+* **Initiative**: 主动开始编写wiki
+* **Empathy**: 看到其他人可能面临同样的问题并开始编写wiki
+* **Helps improves others**: 新加入者受益于wiki
diff --git a/packages/behavioral-interview-guidebook/contents/overview/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/overview/en-US.langnostic.json
new file mode 100644
index 0000000000..a0e659e37f
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/overview/en-US.langnostic.json
@@ -0,0 +1,186 @@
+{
+  "frontmatter": {
+    "title": "4617f06d",
+    "description": "7943bb42",
+    "seo_title": "d05dcc71",
+    "social_title": "d80461ec",
+    "seo_description": "1d73abcf"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "d69bf5a",
+        "2589d6c0",
+        "8ff69314",
+        "dbff582d",
+        "b24e4939",
+        "e5bbc425",
+        "d65dfdbf",
+        "51c65a99",
+        "f2b57489",
+        "ff91322c",
+        "a2e47f4f",
+        "bd006acd",
+        "4872f499",
+        "154000a3",
+        "a8000e78",
+        "c84a600e",
+        "ee02e149",
+        "80a251c",
+        "c37bb57c",
+        "c11cee6e",
+        "913a8b08",
+        "4871bc48",
+        "89542105",
+        "1c13e511",
+        "1180e08",
+        "7f5b82a2",
+        "c558e06f",
+        "191d1ae9",
+        "b0f73bf4",
+        "df108c8b",
+        "fb529cb",
+        "1180e073",
+        "ddfa57f3",
+        "437907cc",
+        "df1e8198",
+        "8060798f",
+        "b378b240",
+        "d6e6a4b5",
+        "15372437",
+        "b5b6df43",
+        "f98af47f",
+        "ed10d92e",
+        "1a998640",
+        "9b4550c7",
+        "997eb2bc",
+        "b84c79db",
+        "5da98e7c",
+        "2e0d6b84",
+        "cb942162",
+        "82dc38df",
+        "833146e3",
+        "176a21b7",
+        "37f87e9f",
+        "e5a70566",
+        "6be0af14",
+        "fafb0b1e",
+        "405448ca",
+        "845f7b54",
+        "d37f7719",
+        "bdaf5e0",
+        "78b74f1",
+        "1fff8c49",
+        "7857b1bb",
+        "5a595fe5",
+        "b942362b",
+        "c36bdde0",
+        "5b9dd803",
+        "7694c6b7",
+        "f02e9e24",
+        "d8a415f5",
+        "f68f4ae7",
+        "da4055f4",
+        "bb7c4a7d",
+        "5eb07228",
+        "c8095f5e",
+        "6aa75a6f",
+        "4dfe624a",
+        "34a2cb41",
+        "19ece7e1",
+        "9af4343b",
+        "e201f1d2",
+        "3ac7ebb1",
+        "8ec4aae8"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "d69bf5a",
+        "2589d6c0",
+        "8ff69314",
+        "dbff582d",
+        "b24e4939",
+        "e5bbc425",
+        "d65dfdbf",
+        "51c65a99",
+        "f2b57489",
+        "ff91322c",
+        "a2e47f4f",
+        "bd006acd",
+        "4872f499",
+        "154000a3",
+        "a8000e78",
+        "c84a600e",
+        "ee02e149",
+        "80a251c",
+        "c37bb57c",
+        "c11cee6e",
+        "913a8b08",
+        "4871bc48",
+        "89542105",
+        "1c13e511",
+        "1180e08",
+        "7f5b82a2",
+        "c558e06f",
+        "191d1ae9",
+        "b0f73bf4",
+        "df108c8b",
+        "fb529cb",
+        "1180e073",
+        "ddfa57f3",
+        "437907cc",
+        "df1e8198",
+        "8060798f",
+        "b378b240",
+        "d6e6a4b5",
+        "15372437",
+        "b5b6df43",
+        "f98af47f",
+        "ed10d92e",
+        "1a998640",
+        "9b4550c7",
+        "997eb2bc",
+        "b84c79db",
+        "5da98e7c",
+        "2e0d6b84",
+        "cb942162",
+        "82dc38df",
+        "833146e3",
+        "176a21b7",
+        "37f87e9f",
+        "e5a70566",
+        "6be0af14",
+        "fafb0b1e",
+        "405448ca",
+        "845f7b54",
+        "d37f7719",
+        "bdaf5e0",
+        "78b74f1",
+        "1fff8c49",
+        "7857b1bb",
+        "5a595fe5",
+        "b942362b",
+        "c36bdde0",
+        "5b9dd803",
+        "7694c6b7",
+        "f02e9e24",
+        "d8a415f5",
+        "f68f4ae7",
+        "da4055f4",
+        "bb7c4a7d",
+        "5eb07228",
+        "c8095f5e",
+        "6aa75a6f",
+        "4dfe624a",
+        "34a2cb41",
+        "19ece7e1",
+        "9af4343b",
+        "e201f1d2",
+        "3ac7ebb1",
+        "8ec4aae8"
+      ]
+    }
+  }
+}
diff --git a/packages/behavioral-interview-guidebook/contents/overview/en-US.mdx b/packages/behavioral-interview-guidebook/contents/overview/en-US.mdx
new file mode 100644
index 0000000000..24f770d597
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/overview/en-US.mdx
@@ -0,0 +1,245 @@
+---
+title: Behavioral Interview Playbook for Front End Engineers
+description: Find out about evaluation criteria at big tech, efficient strategies to prepare, and top behavioral interview questions.
+seo_title: Behavioral Interview Playbook | For Front End Engineers
+social_title: Behavioral Interview Playbook for Front End Engineers | GreatFrontEnd
+seo_description: The definitive guide to behavioral interviews for front end engineers. Written by Ex-FAANG interviewers. Find out what to expect and how to prepare.
+---
+
+Behavioral interviews are one of the most overlooked interview rounds, especially for software engineer interviews. Whilst technical interviews are complex and require a lot of time to prepare for, the importance of behavioral interviews cannot be overstated.
+
+There are however a few common challenges faced when preparing for them:
+
+1. **How to prepare when there are so many different types of questions that could come out?** Indeed, it's impossible to fully prepare for any behavioral question that could come out, since interviewers can ask anything they want. However, we can categorize the most common questions into a few main themes and tackle them methodologically.
+1. **What is the best way to conduct yourself to showcase "fit"?** Many candidates struggle to appear likable in an interview setting and to connect with the interviewer. We will cover some tips to tackle this based on our experience.
+
+In this article, we will cover:
+
+1. Behavioral interview signals and evaluation criteria
+1. Recommended preparation strategy
+1. Best way to conduct oneself on the actual interview
+
+## Behavioral interview signals and evaluation criteria
+
+In big tech companies where structured behavioral interviews are conducted, interviewers are often trained to conduct behavioral interviews in a specific manner.
+
+They are provided specific guidelines, which commonly include:
+
+1. **Evaluation criteria**: Typically split into certain major categories such as Communication, Proactivity, etc., which they need to evaluate candidates on. Each category will typically also include specific guidance as to how to grade a candidate as good, poor, average, etc.
+2. **Level expectations**: Interviewers are typically asked to provide an expected level after interviewing the candidate. To ensure consistency between interviewers, a leveling guide is also provided.
+
+Below, we present the typical behavioral interview evaluation criteria as well as the typical level expectations for most companies. The recommended preparation strategy provides suggestions on how you might prepare based on these criteria.
+
+### The interviewer's perspective
+
+Behavioral interviewers are typically required to give a rating on a few broad categories, such as Collaboration, Proactivity, etc. For each evaluation category, they are provided with criteria as to what should constitute a good or bad rating. Ratings are commonly done on a 5-point rating scale, such as one of Very good / Good / Sufficient / Poor / Very Poor.
+
+In addition to these, interviewers can also mark if there wasn't sufficient information to make a judgment, or if they didn't manage to ask a question that touches on a specific signal as they ran out of time.
+
+Ratings have to be done with regard to the situation's complexity. A more difficult or complex situation handled well will typically receive a higher rating and leveling recommendation.
+
+At the end of the interview they reconcile all the ratings and qualitative feedback to decide:
+
+- Whether to pass or fail the candidate
+- If passed, what level the candidate should receive
+
+The implication of the above is that we can typically expect behavioral interviews in big tech to have some structure, as interviewers will try to ask at least 1 question from each category to evaluate candidates.
+
+Additionally, it is important for candidates to avoid rambling on for long periods of time on one question as interviewers may run out of time. Poor communication or missing the point of the question could also constitute insufficient signals.
+
+Apart from that, interviewers are typically encouraged to utilize follow-up questions to dig deeper into the candidate's actual motivations and understanding behind their surface-level actions.:
+
+1. Why do you think you did (insert action)?
+1. Why did you not do (insert action)?
+1. How would you do things differently in hindsight?
+
+Hence, candidates should also prepare a solid understanding of each alternative mode of action's advantages, disadvantages, and reflect on their intrinsic motivations.
+
+### Typical behavioral interview evaluation criteria
+
+Here are the common evaluation categories and criteria from our experience conducting behavioral interviews for software engineers in big tech companies:
+
+#### 1. Collaboration
+
+- Handling disagreements
+- Working as a team
+- Working with diverse personalities and skills
+- Conveying complex ideas simply
+- Giving constructive feedback
+- Active listening
+
+#### 2. Driving results and problem solving
+
+- Impact-driven mindset
+  - Proactivity to make progress despite obstacles or roadblocks
+  - Influencing others to deliver against objectives
+  - Balancing analysis with decisive action
+- Identifying best solutions and executing on them
+  - Identifying the right problems
+  - Identifying the most critical objectives
+  - Resourcefulness and data-driven mindset
+  - Creativity and innovation
+  - Identifying tradeoffs and sustainable solutions
+  - Measuring results, iterating and following through
+
+#### 3. Growth mindset
+
+- Having self awareness of strengths and development areas
+- Actively soliciting feedback from others and creating feedback loops
+- Taking feedback and setbacks well, viewing them as opportunities
+- Takes personal accountability for failures
+- Reflecting, modeling best practices and applying lessons to new situations
+- Energized by setting and working towards challenging goals
+
+#### 4. Adaptability and flexibility
+
+- Performing well in uncertainty
+- Remaining calm and focused, serving as stable presence for others
+- Flexible and quick to adapt to unexpected situations
+
+### Typical behavioral interview leveling expectations
+
+Behavioral interviews is one of the interview formats where it is possible for interviewers to assess the candidate's maturity — from Junior Software Engineer all the way to extremely senior positions depending on the stories they tell, their responses and decisions made. Raw number of years of working experience doesn't necessarily equate to specific levels as some people mature faster than others. Leveling guidance is usually made with a consideration of raw years of experience and leveling expectations. The levels mentioned below are based on Google and Facebook's levels where L3 is the equivalent of Junior Software Engineers / fresh graduates.
+
+Understand the expected behaviors for the commonly-defined engineering levels and craft your responses ensuring they match your current level or the level you are targeting.
+
+#### Junior Software Engineer (L3)
+
+- Takes direction from managers and/or senior members of the team.
+- Executes on well-defined tasks without too much guidance.
+- Primarily improves their own skills and craft.
+
+#### Software Engineer (L4)
+
+- Understands project purpose and helps to achieve the team's objectives.
+- Splits larger projects (typically feature work) given to them into smaller tasks for timely execution.
+- Suitably balance between delegating tasks and performing tasks themselves.
+- Improves their own skills while possibly mentoring more junior members, interns, or new hires.
+- Collaborates cross-functionally with guidance from senior members of the team.
+
+#### Senior Software Engineer (L5)
+
+- Leads development on complex tasks and projects within the team.
+  - Identifies well thought out solutions to ambiguous projects of large scope
+  - Breaks solution down into smaller projects and delegating some of them to team members.
+- Proactively seeks new ideas and directions to build the product better.
+- Mentors multiple junior members of the team and help them to improve by being a role model.
+- Works cross-functionally independently and drives complex, ambiguous discussions.
+
+#### Staff Software Engineer (L6)
+
+- Understands business goals and advises managers and organization leaders to achieve the goals.
+- Leads or greatly influences direction of a team of engineers.
+- Demonstrates domain expertise and is looked up to by other engineers.
+- Conducts clear, long-term planning across teams/within the organization and drives consensus.
+- Mentors tech leads and junior members of the team.
+- Works on projects requiring interactions with engineers and cross-functional partners across multiple teams.
+
+#### Senior Staff Software Engineer (L7) and beyond
+
+- Owns organization/company-wide business/engineering goals and delivers on them.
+- Influences or leads product and engineering roadmaps within the organization/company.
+- Leads solution development and delivery for highly complex and ambiguous areas.
+
+## Recommended preparation strategy
+
+As mentioned above, based on the evaluation criteria we can typically expect behavioral interviews in big tech to have some structure, as interviewers will try to ask **at least 1 question from each category** to evaluate candidates.
+
+Apart from these questions, we can also expect general but common questions such as "Tell me about yourself" or "Why join this company".
+
+There is quite a lot of variance in terms of the questions that could be asked. While it is too time consuming to prepare for all of them, we can categorize the 80% most common questions into themes and tackle them methodically, per our following guides:
+
+1. ["Tell me about yourself..."](/behavioral-interview-guidebook/self-introduction)
+1. "Walk me through your resume..."
+1. ["Why join this team or company?"](/behavioral-interview-guidebook/why-work-here)
+1. "Tell me about a time when..." (categorized into the following themes)
+   - [Driving results and problem solving](/behavioral-interview-guidebook/problem-solving)
+   - [Collaboration](/behavioral-interview-guidebook/collaboration)
+   - [Growth mindset](/behavioral-interview-guidebook/growth-mindset)
+   - Adaptability and flexibility
+1. ["Do you have any questions for me?"](/behavioral-interview-guidebook/questions-to-ask)
+
+### Prepare a few good, general stories based on common themes
+
+The general strategy to tackle the large variance of "Tell me about a time when..." questions to be asked is to prepare 3-5 general and well-thought out stories that could be used to address multiple required traits. For instance, an experience collaborating extensively with others could display your traits in communication, team work, leadership, conflict management, etc. Whenever an interviewer asks you a question, you could run through the stories you have prepared and adapt them to answer the specific question.
+
+Here are some tips to select and prepare good project experiences as stories:
+
+- Check against the evaluation criteria above and try to pick broad experiences which can be used to address multiple criteria. Then, write down short bullet points of how you exhibited behavior that fulfilled required traits.
+- Choose experiences that showcase your level expectations. For instance, if you are applying for a Staff Software Engineer position, ensure that your experiences exhibit your influence on the direction of entire teams.
+- Do not reuse the same stories too much in the same interview loop. Interviewers tend to discuss candidate performance together, hence overusing the same story could come off as repetitive and insufficient breadth of experience.
+- As mentioned above, interviewers tend to prioritize follow-up questions to understand the candidate's true psyche, motivations and understanding. For each story, prepare a solid understanding of each alternative mode of action's advantages, disadvantages, and reflect on your intrinsic motivations.
+
+### Structure initial answers with the STAR framework
+
+Having prepared a story you could use, you need to structure them well when answering specific questions. One requirement interviewers are always asked to look out for is the candidates actual ability to communicate during the interview (as opposed to what they claim), which is evaluated as follows:
+
+- Well-organized and easy to follow thought process
+- Good intuition on which details should be elaborated and which to keep simple
+- Leaves others clear on purpose and actions
+- Demonstrates active listening
+
+To achieve the above, you need to structure your answers well to ensure that it is concise and gets to the point below 3 minutes. One rough guideline you could use is a framework like STAR:
+
+- **Situation**: Present basic details of the scenario, just enough to understand the challenge you were in. (Do not spend too much time on this)
+- **Task**: What did you need to achieve or do in the scenario? (Do not spend too much time on this)
+- **Action**: What did you do? This is where you exhibit required traits based on the approach you took to solve the challenge or situation.
+- **Results**: What was the outcome of your actions?
+
+Here is an example of applying STAR to answering a behavioral interview question "Tell me about a time you had to manage multiple conflicting priorities and how you handled it":
+
+#### Situation
+
+In my current job as Front End Engineer in a startup, I was once in a situation where I had to deliver several important features for an e-commerce campaign at very short notice, since different teams were making feature requests at the time.
+
+#### Task
+
+As I recognized that it was not possible for me to achieve all of them with good quality and also in a timely manner. I had to find a way to deconflict their priorities.
+
+#### Action
+
+- What I did was to arrange a quick meeting with all relevant product and engineering stakeholders to co-prioritize and assign the appropriate resources to support this project.
+- I listed the features requested from every team and worked with all the relevant stakeholders to identify each feature's contribution to business objectives, while also roughly estimating the engineering effort for each one.
+- This helped us to deprioritize features that had very high engineering effort but little contribution to the objectives.
+- For projects that were not realistically possible to achieve within the timelines, we were able to negotiate for more engineering resources to delegate these feature work to.
+- After that, to ensure my own timelines were met, I broke down my features into smaller tasks and planned them into daily and weekly milestones, reviewing my progress regularly with the team.
+
+#### Result
+
+With this co-prioritization and planning effort, I was able to achieve all the required features by the stipulated timeline.
+
+### Important warning about your answers
+
+A final note — in order for the interviewer to follow your thought process or understand how brilliant your solutions were, it is VERY important for them to understand the context, purpose and situation. The problem or situation should be described very clearly and it should assume NO prior understanding. Many candidates fall into the trap of assuming the interviewer can follow their stories without giving enough context, especially when problems are domain-specific like fintech or blockchain. In such situations, interviewers might end up marking you as having bad communication, or rate the category as having insufficient signals.
+
+### Practice makes perfect
+
+After preparing your stories and having a rough sense of STAR, practice using your prepared stories and the STAR format to answer our list of 50 common behavioral interview questions. Instead of memorizing the answers, practice just answering them verbally each time. This allows you to cement your stories and familiarize with STAR.
+
+## How best to conduct yourself in a behavioral interview
+
+### Understanding the interviewer's intention
+
+Some candidates think of behavioral interviews as a test or an exam, where you have to study or memorize to get the right points or answer. That is not what the interviewer is looking out for. To understand how interviewers themselves feel, try to picture yourself interviewing someone to join a project you are actually currently working on. That is, put yourself in the hiring manager's position.
+
+A behavioral interview usually happens after the technical rounds are completed. Candidates that have passed the technical rounds are considered technically competent. However, as a manager, you hardly really know this stranger (the candidate). Interviews are a conversation for you to get to know this stranger as a person. It's just like a typical chat in a social setting, somewhat like a speed date, except the interviewer needs to get to know you enough to decide if you can work well.
+
+Understandably, as an interviewer, you would generally try to sieve out:
+
+- Is this candidate going to be a **poor performer**? e.g. Often miss on deadlines, not accountable, not driven, gets into regular conflict with others, communicates poorly, does not take feedback well. Are they lying or exaggerating on their CV?
+- Is the candidate going to be a **superstar, driven teammate**? e.g. communicates well, resourceful and independent in solving problems, able to manage stakeholders, proactive and works hard in enacting new initiatives to drive the team forward.
+- Is the candidate going to be **easy to manage**? e.g. takes feedback well, likable, sociable and does not give you problems.
+
+If a candidate were to recite answers back to you or appear stoic and unexcited, would you hire them into your team? Probably not. For interviewers, it's as much about seeing you as your true, natural self as it is to know if your thinking process is aligned with their goals.
+
+### One size fits most
+
+Interviewers always mention team "fit" as a criteria for evaluating you. But there are so many different teams out there — how would you know how to conduct yourself to display fit?
+
+One way to do so is to ask the recruiter or other interviewers in prior rounds to the behavioral round. Commonly, prior to starting the resume screening / interview process, the hiring managers would have aligned internally on the key criteria they are looking out for in the new candidate. For example, they could be looking for someone who is primarily more proactive as they want more independent drivers in the team. As such, interviewers will tend to look out for those specific traits and ask questions to sieve out those traits.
+
+However, some fail-safe, general tips to conduct yourself
+
+1. **Friendly and positive**: Friendly and positive people tend to fit well in any team.
+1. **Proactive and driven**: Go-getters are correlated with higher performance.
+1. **Enthusiastic**: Demonstrate clear interest about the role, team, and the company.
diff --git a/packages/behavioral-interview-guidebook/contents/overview/pt-BR.mdx b/packages/behavioral-interview-guidebook/contents/overview/pt-BR.mdx
new file mode 100644
index 0000000000..fde647b093
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/overview/pt-BR.mdx
@@ -0,0 +1,242 @@
+---
+title: Entrevistas Comportamentais - Visão Geral Definitiva e Guia de Preparação
+description: Guia para Entrevistas Comportamentais para Desenvolvedores Front-End, Desenvolvedores Web e Engenheiros de Software, escrito por ex-entrevistadores em empresas de tecnologia de grande porte (FAANG). Descubra sobre os critérios de avaliação em grandes empresas de tecnologia, estratégias eficientes de preparação e as principais perguntas de entrevista comportamental.
+---
+
+Entrevistas comportamentais são uma das etapas mais subestimadas, especialmente nas entrevistas para engenheiros de software. Embora as entrevistas técnicas sejam complexas e exijam muito tempo de preparação, a importância das entrevistas comportamentais não pode ser subestimada.
+
+No entanto, existem alguns desafios comuns ao se preparar para essas entrevistas:
+
+1.  **Como se preparar quando existem tantos tipos diferentes de perguntas que podem ser feitas?** De fato, é impossível se preparar completamente para qualquer pergunta comportamental que possa ser feita, já que os entrevistadores podem perguntar o que desejarem. No entanto, podemos categorizar as perguntas mais comuns em algumas temáticas principais e abordá-las metodicamente.
+2.  **Qual é a melhor maneira de se comportar para demonstrar "adequação"?** Muitos candidatos têm dificuldade em parecer simpáticos em uma entrevista e em estabelecer uma conexão com o entrevistador. Vamos abordar algumas dicas para lidar com isso com base em nossa experiência.
+
+Neste artigo, nós iremos cobrir:
+
+1.  Sinais de entrevista comportamental e critérios de avaliação.
+2.  Estratégia de preparação recomendada.
+3.  Melhor maneira de se comportar durante a entrevista real.
+
+## Sinais de Entrevista Comportamental e Critérios de Avaliação
+
+Nas grandes empresas de tecnologia onde são realizadas entrevistas comportamentais estruturadas, os entrevistadores frequentemente são treinados para conduzir as entrevistas comportamentais de maneira específica.
+
+Eles recebem diretrizes específicas, que comumente incluem:
+
+1.  **Critérios de Avaliação**: Geralmente são divididos em certas categorias principais, como Comunicação, Proatividade, etc., nas quais precisam avaliar os candidatos. Cada categoria geralmente incluirá orientações específicas sobre como avaliar um candidato como bom, fraco, médio, etc.
+2.  **Expectativas de Nível**: Geralmente, os entrevistadores são solicitados a fornecer um nível esperado após a entrevista com o candidato. Para garantir consistência entre os entrevistadores, também é fornecido um guia de nivelamento.
+
+Abaixo, apresentamos os critérios típicos de avaliação de entrevistas comportamentais, bem como as expectativas de nível típicas para a maioria das empresas. A estratégia de preparação recomendada oferece sugestões sobre como você pode se preparar com base nesses critérios.
+
+### A Perspectiva do Entrevistador
+
+Os entrevistadores comportamentais geralmente são obrigados a atribuir uma classificação em algumas categorias amplas, como Colaboração, Proatividade, etc. Para cada categoria de avaliação, eles recebem critérios sobre o que deve ser considerado uma classificação boa ou ruim. As classificações são comumente feitas em uma escala de 5 pontos, como Muito bom / Bom / Suficiente / Ruim / Muito Ruim.
+
+Além disso, os entrevistadores também podem assinalar se não houve informações suficientes para emitir um julgamento ou se não conseguiram fazer uma pergunta que abordasse um sinal específico devido à falta de tempo.
+
+As classificações devem ser feitas levando em consideração a complexidade da situação. Uma situação mais difícil ou complexa que foi bem gerenciada geralmente receberá uma classificação mais alta e uma recomendação de nivelamento superior.
+
+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
+
+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.
+
+Além disso, é importante para os candidatos evitar divagar por longos períodos de tempo em uma única pergunta, pois os entrevistadores podem ficar sem tempo. Uma comunicação inadequada ou não compreender o ponto da pergunta também pode constituir sinais insuficientes.
+
+Além disso, os entrevistadores geralmente são encorajados a utilizar perguntas de acompanhamento para aprofundar a compreensão das motivações reais e do entendimento do candidato por trás de suas ações superficiais.:
+
+1.  Por que você acha que realizou (inserir ação)?
+2.  Por que você não realizou (inserir ação)?
+3.  Como você faria as coisas de forma diferente com o benefício da retrospectiva?
+
+Portanto, os candidatos também devem se preparar com um entendimento sólido das vantagens e desvantagens de cada modo alternativo de ação e refletir sobre suas motivações intrínsecas.
+
+### Critérios Típicos de Avaliação em Entrevistas Comportamentais
+
+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
+
+- 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
+
+- 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
+
+- 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
+
+-
+- 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
+
+Entrevistas comportamentais são um dos formatos de entrevista em que os entrevistadores podem avaliar a maturidade do candidato - desde Engenheiro de Software Júnior até posições extremamente sênior, dependendo das histórias que contam, de suas respostas e decisões tomadas. O número bruto de anos de experiência de trabalho não necessariamente equivale a níveis específicos, uma vez que algumas pessoas amadurecem mais rapidamente do que outras. As orientações de nivelamento geralmente são feitas levando em consideração o número bruto de anos de experiência e as expectativas de nivelamento. The levels mentioned below are based on Google and Facebook's levels where L3 is the equivalent of Junior Software Engineers / fresh graduates.
+
+Compreenda os comportamentos esperados para os níveis de engenharia comumente definidos e elabore suas respostas garantindo que correspondam ao seu nível atual ou ao nível que você está almejando.
+
+#### 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.
+
+#### 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.
+
+#### 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.
+
+#### 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.
+
+#### 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.
+
+## Estratégia de Preparação Recomendada
+
+Como mencionado acima, com base nos critérios de avaliação, podemos geralmente esperar que as entrevistas comportamentais em grandes empresas de tecnologia tenham alguma estrutura, já que os entrevistadores tentarão fazer **pelo menos 1 pergunta de cada categoria** para avaliar os candidatos.
+
+Além dessas perguntas, também podemos esperar perguntas gerais, mas comuns, como "Fale sobre você" ou "Por que você quer trabalhar nesta empresa".
+
+Há bastante variação em relação às perguntas que podem ser feitas. Embora seja muito demorado se preparar para todas elas, podemos categorizar as perguntas mais comuns, que representam 80% delas, em temas e abordá-las de forma metódica, conforme nossos guias a seguir:
+
+1.  ["Conte-me sobre você..."](/behavioral-interview-guidebook/autointroduction)
+2.  "Me conte sobre sua trajetória profissional..."
+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
+
+### Prepare algumas boas histórias gerais com base em temas comuns
+
+A estratégia geral para lidar com a grande variedade de perguntas "Me conte sobre uma situação em que..." que podem ser feitas é preparar de 3 a 5 histórias gerais e bem pensadas que possam ser usadas para abordar várias características necessárias. Por exemplo, uma experiência de colaboração extensiva com outras pessoas pode demonstrar suas características em comunicação, trabalho em equipe, liderança, gerenciamento de conflitos, etc. Sempre que um entrevistador fizer uma pergunta, você pode repassar as histórias que preparou e adaptá-las para responder à pergunta específica.
+
+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.
+
+### 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
+
+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?
+
+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":
+
+#### Situação
+
+No meu cargo atual como Engenheiro de Front-End em uma startup, houve uma situação em que precisei entregar várias funcionalidades importantes para uma campanha de comércio eletrônico em um prazo muito curto, pois diferentes equipes estavam fazendo solicitações de recursos ao mesmo tempo.
+
+#### Tarefa
+
+Conforme reconheci que não era possível realizar todas elas com boa qualidade e também dentro do prazo estipulado. Tive que encontrar uma maneira de resolver os conflitos de prioridades.
+
+#### 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.
+
+#### Resultado
+
+Com esse esforço de co-priorização e planejamento, consegui entregar todas as funcionalidades necessárias dentro do prazo estipulado.
+
+### "Aviso importante sobre suas respostas."
+
+Uma observação final — para que o entrevistador possa acompanhar o seu processo de pensamento ou entender quão brilhantes foram suas soluções, é MUITO importante que eles compreendam o contexto, propósito e situação. O problema ou situação deve ser descrito de forma muito clara e não deve assumir NENHUM entendimento prévio. Muitos candidatos caem na armadilha de presumir que o entrevistador pode acompanhar suas histórias sem fornecer contexto suficiente, especialmente quando os problemas são específicos de um domínio, como fintech ou blockchain. Nessas situações, os entrevistadores podem acabar classificando você como tendo má comunicação ou avaliar a categoria como tendo sinais insuficientes.
+
+### A prática leva à perfeição
+
+Depois de preparar suas histórias e ter uma ideia geral do formato STAR, pratique usando suas histórias preparadas e o formato STAR para responder à nossa lista de 50 perguntas comuns de entrevista comportamental. Em vez de memorizar as respostas, pratique apenas respondendo verbalmente a cada pergunta. Isso permite que você solidifique suas histórias e se familiarize com o formato STAR.
+
+## Como se comportar da melhor forma em uma entrevista comportamental
+
+### Compreender a intenção do entrevistador
+
+Alguns candidatos encaram as entrevistas comportamentais como um teste ou um exame, onde é preciso estudar ou memorizar para obter as respostas certas ou pontuações corretas. Isso não é o que o entrevistador está procurando. Para entender como os entrevistadores se sentem, tente imaginar-se entrevistando alguém para se juntar a um projeto no qual você realmente está trabalhando no momento. Isso mesmo, coloque-se na posição do gerente de contratações.
+
+Uma entrevista comportamental geralmente acontece após. Candidatos que passaram nas rodadas técnicas são considerados competentes tecnicamente. No entanto, como gerente, você geralmente não conhece realmente esse estranho (o candidato). Entrevistas são uma conversa para você conhecer esse estranho como pessoa. É como uma conversa típica em um ambiente social, algo parecido com um encontro rápido, exceto que o entrevistador precisa conhecê-lo o suficiente para decidir se você pode trabalhar bem na equipe.
+
+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.
+
+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.
+
+### Um tamanho serve para a maioria
+
+Os entrevistadores sempre mencionam o "encaixe" na equipe como critério para avaliá-lo. Mas existem tantas equipes diferentes por aí - como você saberia como se comportar para demonstrar o encaixe?
+
+Uma maneira de fazer isso é perguntar ao recrutador ou a outros entrevistadores nas rodadas anteriores à entrevista comportamental. Comumente, antes de iniciar o processo de triagem de currículos/entrevistas, os gerentes de contratação costumam ter alinhado internamente os principais critérios que estão buscando no novo candidato. Por exemplo, eles podem estar procurando alguém que seja principalmente mais proativo, pois desejam mais colaboradores independentes na equipe. Assim, os entrevistadores tendem a observar essas características específicas e fazem perguntas para identificar essas qualidades.
+
+No entanto, aqui estão algumas dicas gerais à prova de falhas para se comportar
+
+1.  **Amigável e positivo**: Pessoas amigáveis e positivas geralmente se encaixam bem em qualquer equipe.
+2.  **Proativo e motivado**: Pessoas proativas e motivadas têm correlação com um desempenho mais elevado.
+3.  **Entusiasmado**: Demonstre interesse claro pela função, equipe e pela empresa.
diff --git a/packages/behavioral-interview-guidebook/contents/overview/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/overview/zh-CN.mdx
new file mode 100644
index 0000000000..feb9584700
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/overview/zh-CN.mdx
@@ -0,0 +1,245 @@
+---
+title: 前端工程师行为面试指南
+description: 了解大科技公司的评估标准、高效的准备策略以及顶级的行为面试问题。
+seo_title: 行为面试指南 | 针对前端工程师
+social_title: 前端工程师行为面试指南 | GreatFrontEnd
+seo_description: 前端工程师行为面试的权威指南。由前 FAANG 面试官撰写。了解期望和准备方法。
+---
+
+行为面试是最容易被忽视的面试环节之一，尤其是在软件工程师面试中。虽然技术面试很复杂，需要花费大量时间准备，但行为面试的重要性怎么强调都不为过。
+
+然而，在准备行为面试时，会遇到一些常见的挑战：
+
+1. **当可能出现如此多不同类型的问题时，如何准备？** 确实，不可能完全准备好可能出现的任何行为问题，因为面试官可以问任何他们想问的问题。但是，我们可以将最常见的问题归类为几个主要主题，并以系统的方式解决它们。
+2. **展示“契合度”的最佳方式是什么？** 许多候选人在面试环境中难以表现得令人喜欢，也难以与面试官建立联系。我们将根据我们的经验，介绍一些解决此问题的技巧。
+
+在本文中，我们将介绍：
+
+1. 行为面试信号和评估标准
+2. 推荐的准备策略
+3. 在实际面试中如何表现
+
+## 行为面试信号和评估标准
+
+在进行结构化行为面试的大型科技公司中，面试官通常会接受特定方式的培训以进行行为面试。
+
+他们会获得具体的指导方针，通常包括：
+
+1. **评估标准**：通常分为几个主要类别，例如沟通、主动性等，他们需要在这些方面对候选人进行评估。每个类别通常还包括关于如何将候选人评为好、差、一般等的具体指导。
+2. **级别期望**：面试官通常被要求在面试完候选人后提供一个期望的级别。为了确保面试官之间的一致性，还会提供一个级别指南。
+
+下面，我们介绍了典型的行为面试评估标准以及大多数公司的典型级别期望。推荐的准备策略提供了关于您如何根据这些标准进行准备的建议。
+
+### 面试官的视角
+
+行为面试官通常需要对几个广泛的类别进行评分，例如协作、主动性等。对于每个评估类别，他们都会获得标准，以确定什么构成良好或不良的评分。评分通常采用 5 分制，例如非常好/好/足够/差/非常差。
+
+除此之外，如果面试官没有足够的信息来做出判断，或者由于时间用完而未能提出涉及特定信号的问题，他们也可以标记。
+
+评分必须根据情况的复杂性进行。处理得当的更困难或复杂的情况通常会获得更高的评分和级别推荐。
+
+在面试结束时，他们会核对所有评分和定性反馈，以决定：
+
+* 是否通过或未通过候选人
+* 如果通过，候选人应该获得什么级别
+
+上述内容意味着我们通常可以期望大型科技公司的行为面试具有一定的结构，因为面试官会尝试从每个类别中提问至少一个问题来评估候选人。
+
+此外，对于候选人来说，避免长时间喋喋不休地回答一个问题也很重要，因为面试官可能会耗尽时间。沟通不畅或没有抓住问题的重点也可能构成信号不足。
+
+除此之外，通常鼓励面试官利用后续问题来更深入地挖掘候选人对其表面行为背后的实际动机和理解。:
+
+1. 你认为你为什么做了（插入动作）？
+2. 你为什么没有做（插入动作）？
+3. 事后看来，你会如何做不同的事情？
+
+因此，候选人还应为每种替代行动模式的优势、劣势做好充分的准备，并反思其内在动机。
+
+### 典型的行为面试评估标准
+
+以下是我们根据在大型科技公司为软件工程师进行行为面试的经验总结出的常见评估类别和标准：
+
+#### 1. 协作
+
+* 处理分歧
+* 团队合作
+* 与不同个性和技能的人合作
+* 简单地传达复杂的想法
+* 给予建设性的反馈
+* 积极倾听
+
+#### 2. 推动结果和解决问题
+
+* 结果导向的心态
+  * 尽管存在障碍或障碍，仍积极主动地取得进展
+  * 影响他人实现目标
+  * 平衡分析与果断行动
+* 确定最佳解决方案并执行
+  * 确定正确的问题
+  * 确定最关键的目标
+  * 足智多谋和数据驱动的心态
+  * 创造力和创新
+  * 确定权衡和可持续的解决方案
+  * 衡量结果、迭代和跟进
+
+#### 3. 成长心态
+
+* 了解自身优势和发展领域
+* 积极征求他人的反馈并创建反馈循环
+* 很好地接受反馈和挫折，将它们视为机会
+* 对失败承担个人责任
+* 反思、模拟最佳实践并将经验教训应用于新情况
+* 通过设定和努力实现具有挑战性的目标来获得能量
+
+#### 4. 适应性和灵活性
+
+* 在不确定性中表现良好
+* 保持冷静和专注，为他人提供稳定的存在
+* 灵活且快速适应意外情况
+
+### 典型的行为面试分级期望
+
+行为面试是面试形式之一，面试官可以通过这种形式评估候选人的成熟度——从初级软件工程师到非常高级的职位，这取决于他们讲述的故事、他们的回应和所做的决定。 实际工作年限不一定等同于特定级别，因为有些人比其他人更成熟。 级别指导通常是在考虑实际经验年限和级别期望的情况下制定的。 下面提到的级别基于 Google 和 Facebook 的级别，其中 L3 等同于初级软件工程师/应届毕业生。
+
+了解为常用工程级别定义的预期行为，并根据您的回答确保它们与您当前的级别或您所针对的级别相符。
+
+#### 初级软件工程师 (L3)
+
+* 听从经理和/或团队高级成员的指示。
+* 在没有太多指导的情况下执行定义明确的任务。
+* 主要提高自己的技能和工艺。
+
+#### 软件工程师 (L4)
+
+* 了解项目目的并帮助实现团队的目标。
+* 将分配给他们的大型项目（通常是功能工作）分解为较小的任务，以便及时执行。
+* 适当地平衡委派任务和自己执行任务。
+* 提高自己的技能，同时可能指导更初级的成员、实习生或新员工。
+* 在团队高级成员的指导下进行跨职能协作。
+
+#### 高级软件工程师 (L5)
+
+* 领导团队内复杂任务和项目的开发。
+  * 确定针对范围广泛的模糊项目的深思熟虑的解决方案
+  * 将解决方案分解为较小的项目，并将其中一些项目委派给团队成员。
+* 积极寻求新想法和方向，以更好地构建产品。
+* 指导团队中的多名初级成员，并通过成为榜样来帮助他们进步。
+* 独立地进行跨职能工作，并推动复杂、模糊的讨论。
+
+#### 资深软件工程师 (L6)
+
+* 了解业务目标，并建议经理和组织领导者实现这些目标。
+* 领导或极大地影响工程师团队的方向。
+* 展现领域专业知识，并受到其他工程师的敬仰。
+* 在团队/组织内进行清晰、长期的规划，并推动共识。
+* 指导技术负责人和团队初级成员。
+* 从事需要与多个团队的工程师和跨职能合作伙伴互动的项目。
+
+#### 资深资深软件工程师 (L7) 及以上
+
+* 拥有组织/公司范围内的业务/工程目标并交付成果。
+* 影响或领导组织/公司内的产品和工程路线图。
+* 领导高度复杂和模糊领域的解决方案开发和交付。
+
+## 推荐的准备策略
+
+如上所述，根据评估标准，我们可以预期大型科技公司的行为面试会具有一定的结构，因为面试官会尝试**从每个类别中至少提问 1 个问题**来评估候选人。
+
+除了这些问题之外，我们还可以期待一些常见但常见的问题，例如“介绍一下你自己”或“为什么加入这家公司”。
+
+可以提出的问题有很多变化。虽然为所有问题做准备太耗时，但我们可以将 80% 最常见的问题归类为主题，并按照我们的以下指南有条不紊地解决它们：
+
+1. ["介绍一下你自己..."](/behavioral-interview-guidebook/self-introduction)
+2. "请你过一遍你的简历..."
+3. ["你为什么加入这个团队或公司？"](/behavioral-interview-guidebook/why-work-here)
+4. "请你讲一件你曾经..." (分为以下几个主题)
+   * [推动结果和解决问题](/behavioral-interview-guidebook/problem-solving)
+   * [协作](/behavioral-interview-guidebook/collaboration)
+   * [成长心态](/behavioral-interview-guidebook/growth-mindset)
+   * 适应性和灵活性
+5. ["你有什么问题要问我吗？"](/behavioral-interview-guidebook/questions-to-ask)
+
+### 根据常见主题准备一些好的、通用的故事
+
+解决“告诉我你什么时候……”问题的总体策略是准备 3-5 个通用的、经过深思熟虑的故事，这些故事可用于解决多个所需特征。例如，与他人广泛合作的经验可以展示您在沟通、团队合作、领导力、冲突管理等方面的特质。每当面试官问你一个问题时，你都可以浏览你准备的故事，并根据具体问题进行调整。
+
+以下是选择和准备好的项目经验作为故事的一些技巧：
+
+* 检查上述评估标准，并尝试选择可用于解决多个标准的广泛经验。然后，写下简短的要点，说明您如何表现出满足所需特征的行为。
+* 选择展示您的期望水平的经验。例如，如果您申请的是资深软件工程师职位，请确保您的经验展示了您对整个团队方向的影响。
+* 不要在一个面试循环中过多地重复使用相同的故事。面试官倾向于一起讨论候选人的表现，因此过度使用相同的故事可能会显得重复且经验不足。
+* 如上所述，面试官倾向于优先考虑后续问题，以了解候选人的真实心理、动机和理解。对于每个故事，准备好对每种替代行动模式的优缺点有扎实的了解，并反思您的内在动机。
+
+### 使用 STAR 框架构建初步答案
+
+准备好一个你可以使用的故事后，你需要很好地构建它们，以便回答具体问题。面试官总是被要求注意的一个要求是候选人在面试期间实际的沟通能力（而不是他们声称的），评估如下：
+
+* 组织良好，易于理解的思维过程
+* 善于判断哪些细节应该详细阐述，哪些应该简单化
+* 让其他人清楚目标和行动
+* 展现积极的倾听
+
+为了达到上述目标，你需要很好地组织你的答案，以确保它简洁明了，并在 3 分钟内切中要点。你可以使用一个像 STAR 这样的粗略指南：
+
+* **情境**：呈现场景的基本细节，足以理解你所处的挑战。（不要花太多时间在这上面）
+* **任务**：你需要在场景中实现或做什么？（不要花太多时间在这上面）
+* **行动**：你做了什么？这是你根据你为解决挑战或情境所采取的方法展示所需特质的地方。
+* **结果**：你的行动的结果是什么？
+
+以下是将 STAR 应用于回答行为面试问题的一个例子：“请告诉我你曾经不得不管理多个相互冲突的优先级以及你如何处理它的情况”：
+
+#### 情境
+
+在我目前作为一家初创公司的前端工程师的工作中，我曾经遇到过一种情况，我必须在很短的时间内交付几个重要的电子商务活动功能，因为当时不同的团队都在提出功能请求。
+
+#### 任务
+
+因为我意识到我不可能以高质量且及时的方式实现所有目标。我必须找到一种方法来解决他们的优先级冲突。
+
+#### 行动
+
+* 我所做的是与所有相关的产品和工程利益相关者安排了一次快速会议，共同确定优先级，并分配适当的资源来支持这个项目。
+* 我列出了每个团队请求的功能，并与所有相关的利益相关者一起确定每个功能对业务目标的贡献，同时也大致估算了每个功能的工程工作量。
+* 这帮助我们降低了那些工程工作量很大但对目标贡献很小的功能的优先级。
+* 对于那些无法在时间范围内实现的项目，我们能够协商更多的工程资源，将这些功能工作委托出去。
+* 之后，为了确保我自己的时间表得到满足，我将我的功能分解成更小的任务，并将它们规划到每日和每周的里程碑中，定期与团队一起审查我的进度。
+
+#### 结果
+
+通过这种共同确定优先级和规划的努力，我能够在规定的时间表内实现所有所需的功能。
+
+### 关于你的答案的重要警告
+
+最后说明——为了让面试官能够理解你的思维过程或理解你的解决方案有多么出色，让他们理解背景、目的和情境是非常重要的。应该非常清楚地描述问题或情境，并且不应该假设任何先前的理解。许多候选人陷入了假设面试官可以在没有提供足够背景的情况下理解他们的故事的陷阱，尤其是在问题是特定于领域的，例如金融科技或区块链。在这种情况下，面试官最终可能会认为你沟通不畅，或者将该类别评为信号不足。
+
+### 熟能生巧
+
+在准备好你的故事并对 STAR 有一个大致的了解后，使用你准备好的故事和 STAR 格式来回答我们列出的 50 个常见的行为面试问题。不要死记硬背答案，每次都练习口头回答。这可以让你巩固你的故事并熟悉 STAR。
+
+## 如何在行为面试中表现得最好
+
+### 了解面试官的意图
+
+一些候选人将行为面试视为一种测试或考试，你必须学习或记忆才能获得正确的要点或答案。这并不是面试官所寻找的。为了了解面试官自己的感受，试着想象一下你正在面试某人加入你目前实际参与的项目。也就是说，把自己放在招聘经理的位置上。
+
+行为面试通常在技术环节完成后进行。通过技术环节的候选人被认为在技术上是有能力的。但是，作为一名经理，你几乎不认识这个陌生人（候选人）。面试是你了解这个陌生人作为个人的对话。这就像社交场合中的典型聊天，有点像快速约会，只是面试官需要足够了解你，才能决定你是否能很好地工作。
+
+可以理解的是，作为面试官，你通常会试图筛选出：
+
+* 这个候选人会成为一个**表现不佳者**吗？例如，经常错过截止日期，不负责任，缺乏动力，经常与他人发生冲突，沟通不畅，不善于接受反馈。他们是否在简历上撒谎或夸大其词？
+* 候选人会成为一个**超级明星，有动力的队友**吗？例如，沟通良好，善于解决问题，能够管理利益相关者，积极主动，努力工作以推动团队前进。
+* 候选人会**容易管理**吗？例如，善于接受反馈，讨人喜欢，善于交际，不会给你带来麻烦。
+
+如果一个候选人背诵答案或表现得冷漠和无动于衷，你会聘用他们进入你的团队吗？可能不会。对于面试官来说，了解你的真实、自然的自我，就像了解你的思维过程是否与他们的目标一致一样重要。
+
+### 一种适合大多数人的方法
+
+面试官总是提到团队“契合度”作为评估你的一个标准。但是，外面有这么多不同的团队——你如何知道如何表现自己来展示契合度呢？
+
+一种方法是向招聘人员或其他面试官询问行为轮之前的轮次。通常，在开始简历筛选/面试过程之前，招聘经理会在内部就他们在新候选人中寻找的关键标准达成一致。例如，他们可能正在寻找一个更积极主动的人，因为他们希望团队中有更多独立的驱动者。因此，面试官会倾向于寻找这些特定的特质，并提出问题以筛选出这些特质。
+
+然而，一些万无一失的、通用的行为技巧
+
+1. **友好和积极**：友好和积极的人往往能很好地融入任何团队。
+2. **积极主动和有动力**：进取者与更高的绩效相关。
+3. **热情**：表现出对角色、团队和公司的明确兴趣。
diff --git a/packages/behavioral-interview-guidebook/contents/problem-solving/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/problem-solving/en-US.langnostic.json
new file mode 100644
index 0000000000..8b25d2cb11
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/problem-solving/en-US.langnostic.json
@@ -0,0 +1,108 @@
+{
+  "frontmatter": {
+    "title": "bd54da7c",
+    "description": "d9ced7a2",
+    "seo_title": "750ad3fa",
+    "seo_description": "ea22a3f7",
+    "social_title": "350895b"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "13c904ea",
+        "e3e74d45",
+        "7600c370",
+        "36411aef",
+        "7490f979",
+        "cf56d450",
+        "9eceb0d4",
+        "b2e363a2",
+        "a871dc08",
+        "5b389685",
+        "2d6550b8",
+        "282a375",
+        "18164c5f",
+        "f6bafdb3",
+        "ecda695e",
+        "b31ac6d2",
+        "f3b9a6b6",
+        "5c29402e",
+        "fbadccba",
+        "1aebf809",
+        "a17b9197",
+        "d3a2868f",
+        "489a30d8",
+        "42598097",
+        "94c09253",
+        "bcf2a9a7",
+        "23f808e8",
+        "93787e83",
+        "93f3deb4",
+        "f73cb702",
+        "519dc1c3",
+        "fcfd2fed",
+        "be70e0d2",
+        "2cebc392",
+        "b5d0c2b3",
+        "564eea4a",
+        "5afd18c6",
+        "dec67b08",
+        "14de742",
+        "eab02701",
+        "7d7fe377",
+        "99131080",
+        "1760df54",
+        "fe860269"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "13c904ea",
+        "e3e74d45",
+        "7600c370",
+        "36411aef",
+        "7490f979",
+        "cf56d450",
+        "9eceb0d4",
+        "b2e363a2",
+        "a871dc08",
+        "5b389685",
+        "2d6550b8",
+        "282a375",
+        "18164c5f",
+        "f6bafdb3",
+        "ecda695e",
+        "b31ac6d2",
+        "f3b9a6b6",
+        "5c29402e",
+        "fbadccba",
+        "1aebf809",
+        "a17b9197",
+        "d3a2868f",
+        "489a30d8",
+        "42598097",
+        "94c09253",
+        "bcf2a9a7",
+        "23f808e8",
+        "93787e83",
+        "93f3deb4",
+        "f73cb702",
+        "519dc1c3",
+        "fcfd2fed",
+        "be70e0d2",
+        "2cebc392",
+        "b5d0c2b3",
+        "564eea4a",
+        "5afd18c6",
+        "dec67b08",
+        "14de742",
+        "eab02701",
+        "7d7fe377",
+        "99131080",
+        "1760df54",
+        "fe860269"
+      ]
+    }
+  }
+}
diff --git a/packages/behavioral-interview-guidebook/contents/problem-solving/en-US.mdx b/packages/behavioral-interview-guidebook/contents/problem-solving/en-US.mdx
new file mode 100644
index 0000000000..8d7b2ccc90
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/problem-solving/en-US.mdx
@@ -0,0 +1,198 @@
+---
+title: Answering Problem Solving Behavioral Questions
+description: Learn how to answer "Tell me about a time..." styled questions for evaluating your problem solving skills.
+seo_title: Problem-solving Questions | Behavioral Interview Playbook
+seo_description: Learn how to answer problem-solving behavioral interview questions, for front end engineers. Refer to sample answers.
+social_title: Problem Solving Behavioral Questions | GreatFrontEnd
+---
+
+As mentioned in our [behavioral interview preparation overview](/behavioral-interview-playbook/introduction), **problem solving and drive for results** is one of the 8 main categories of questions to prepare for.
+
+In this guide, you will learn how to tackle them:
+
+1. Evaluation criteria in detail
+1. Abstracting possible questions into common themes
+1. Suggested answer framework
+1. Possible nature of follow-up questions
+1. Sample questions and answers
+
+## Evaluation criteria in detail
+
+Problem solving and drive for results are grouped together into 1 category as they are highly related in nature. When describing one's experience in solving problems or to achieve certain results / objectives, their mindset or drive to do so can also be inferred.
+
+When rating candidates under this category, interviewers are often looking at the following criteria:
+
+- Identifying best solutions and executing on them
+  - Identifying the right problems
+  - Identifying the most critical objectives
+  - Resourcefulness and data-driven mindset
+  - Creativity and innovation
+  - Identifying tradeoffs and sustainable solutions
+  - Measuring results, iterating and following through
+- Impact-driven mindset
+  - Proactivity to make progress despite obstacles or roadblocks
+  - Influencing others to deliver against objectives
+  - Balancing analysis with decisive action
+
+## Abstracting possible questions into common themes
+
+As mentioned in our [behavioral interview preparation overview](/behavioral-interview-playbook/introduction), it is impractical to prepare answers specifically for every behavioral question out there. However, by batching specific questions into similar themes and preparing stories that cover a large number of question requirements, we can reduce the number of stories to prepare to around 3-5 stories.
+
+There's simply too many types of problem solving and drive for results behavioral questions that could be asked, such as:
+
+- Can you tell me about a time when you had to **use data to drive engineering decisions**?
+- Can you provide an example of a time when you had to **troubleshoot and fix a complex issue** in a project?
+- Can you describe a time you **creatively solved** an engineering problem or achieved meaningful metric improvement?
+- Can you describe a time when you had to make an important engineering decision and how you decided **between tradeoffs**?
+
+However, when we look at 80% of questions under this category, questions typically ask for how a problem was solved or a specific trait required for effective problem solving, such as creativity, using data or trade-off evaluation. The source of the problem or objective, as well as whether the candidate was resilient in the face of obstacles can be inferred from answers to these questions as well.
+
+## Suggested answer framework
+
+As always, the [STAR format](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) is the simplest and most effective framework that we recommend to structure your story.
+
+Despite the large number of question possibilities, we can abstract all the requirements for problem solving behavioral questions by thinking about a robust problem solving process:
+
+1. **Problem identification**: Identifying the correct root cause or root problem to focus on from surface level symptoms
+1. **Metrics/target setting**: Identify key metrics that would signify success in solving the problem (if any)
+1. **Information gathering**: Resourcefulness in gathering information from different sources and a data-driven mindset (using data to drive decisions)
+1. **Solution brainstorming**: Creatively generate solutions that solve the root cause
+1. **Solution evaluation**: Evaluate trade-offs of each solution and select the most optimal one
+1. **Monitoring and adjustment**: Monitor effectiveness of the solution by measuring key metrics. Adjust strategy if needed
+
+Hence, you just have to ensure that at least 1 of your [prepared stories or projects](/behavioral-interview-playbook/introduction) covers all of the above steps. In doing so, the story could be reused for all affiliated traits under problem solving, such as data-driven mindset, resourcefulness, creativity, and working with feedback from users.
+
+Of course, you might need to tailor the details of your story to focus on the specific aspect asked in the specific question.
+
+We recommend you to also pick problem solving stories that can doubly serve to get signals on the following:
+
+- **Proactivity/initiative-taking**: You had taken the initiative to look into the problem, gather information and solve it
+- **Leadership**: You had led the problem solving process
+- **Teamwork**: You had to work as part of a team to solve the problem
+
+## Sample story
+
+Here's a sample story using the STAR format.
+
+**Situation**: I was the tech lead for an e-commerce website selling luxury goods. The website was built as an Angular 1.5 single-page application. In recent years, the product was showing its age – developer experience was not great and the website performance was poor. Initial loading speed was over 3 seconds and the conversion rate was around 0.8%.
+
+**Task**: I was tasked with improving the performance and conversion of the website.
+
+**Actions**
+
+1. **Problem identification**
+   - Conversion is tied to website performance and UX
+   - Website performance has been on a gradual decline over the past few years as there wasn't a person to oversee the overall architecture of the website and track performance metrics
+   - UX hasn't been looked at in a while
+2. **Information gathering**
+   - Looked at nature of bugs in the past year, categorized them according to their root causes to identify hotspots and major problematic areas.
+   - Gathered feedback from team regarding areas of improvements.
+   - Together with the product manager, ran a brainstorming session with the team to think of ways to improve.
+   - In order to improve, firstly we need to know how we are doing:
+     - Double checked that our performance and conversion tracking was working correctly.
+     - Started tracking new metrics from Lighthouse and Core Web Vitals.
+   - Worked with Data Scientists to come up with dashboards for performance and conversion and gained some insights:
+     - Identified that some countries had lower conversion rates.
+     - Mobile users had lower conversion rates as compared to desktop.
+   - Worked with UX Designers and UX Researchers to identify problems in the end-to-end shopping experience on the website.
+     - UI elements were too spaced apart and required a lot of scrolling which affected bounce rate because some users didn't bother scrolling.
+3. **Solution brainstorming**
+   - **User interface**: Server side rendering is crucial for its performance and SEO benefits. Made choices around good performance.
+     - **JavaScript framework**: Migrating from Angular.js 1.6 to Angular 17 was a huge undertaking and there was no significant time savings by staying on Angular since Angular 17 is a completely different framework.
+     - **Next.js**: A few of our developers have experience with React and Next.js as a metaframework for building SSR (server-side rendering) applications was rapidly rising in popularity. We really desired the fast initial load and app-like navigation behavior that Next.js provided.
+     - **Svelte**: Reactive model was appealing and the programming model easier to understand as compared to React's, however the ecosystem is smaller than React and there aren't as many examples of successful e-commerce websites built in Svelte.
+   - **Styling**: The stylesheet was getting very bloated due to many classes being added over the years and being hard to remove.
+     - **Tailwind CSS**: Tailwind CSS was among the hottest CSS methodologies and its atomic CSS approach scales well for growing code bases.
+     - **Styled Components**: CSS-in-JS was something we were also looking at, but Styled Components was tied to React and runtime style injection was bad for performance.
+   - **Performance-centric mindset**: Read many performance case studies on [web.dev](https://web.dev/) and engineering blogs of other e-commerce companies, gathered a list of important performance techniques and processes:
+     - Set performance budget for each page (under 300kb)
+     - Run performance benchmarks as part of CI – before merging Pull Requests and continuously
+     - Lazy loading of non-critical components
+     - Lazy load below-the-fold contents
+     - Split JavaScript on page level instead of a single bundle (handled by Next.js)
+     - Use WebP format for images
+     - Host images on a CDN instead
+     - Adaptive loading of images so that mobile devices load a smaller image
+     - Consolidated duplicate JavaScript libraries (data-fns and moment.js), switched to `lodash-es`, removed all usages of jQuery
+     - Looked at data to identify lesser-used features and removed them from the code, reducing JS size on the product details pages by 200+kb
+   - **Search Engine Optimization (SEO)**
+     - Used SEO tools like Ahrefs to continuously monitor SEO
+     - Worked with the marketing team to ensure marketing copy included important keywords as shown by Ahrefs
+     - Adjusted page URLs to include SEO keywords
+   - **User experience improvements**
+     - Single page checkout experience as opposed to two-page checkout to reduce clicking
+     - Reduced height of many UI elements
+     - Fixed checkout button that wouldn't be missed
+   - **Payment improvements**
+     - Analyzed Stripe checkout data and implemented country-specific address fields
+     - Initially only had one available payment method – credit card. Enlisted the help of data scientists to evaluate the popularity of new payment methods and whether they were worth adding. We later added PayPal, Google Pay, and Apple Pay payment methods as well
+4. **Solution evaluation**
+   - **Metaframework**: Chose Next.js because it is backed by a company, there were many available resources, and has the largest community of all. React is also the most popular JavaScript library out there and also easiest to hire for
+   - **Styling**: Tailwind because it's a reliable and futureproof option (compatible with the direction React was heading)
+5. **Monitoring and adjustment**
+   - Rolled out the new website behind an A/B test while monitoring the performance and conversion rates over a period of 2 months.
+   - Countries which previously saw lower conversion rates experienced nearly 50% improvements in conversion rates.
+
+**Results**
+
+- Lighthouse score improved to 92
+- Loading speed improved to 1.5 seconds
+- Conversion improved to 2.5%
+- Developer velocity has improved in the recent survey and it is now easier to hire people into the team because more people know React over other frameworks
+
+Obviously the entire story is too detailed as a response for a single question; you definitely shouldn't be listing all the specific performance improvements you made, like a laundry list! Aim to achieve both breadth and depth by briefly covering each phase within the "Action" section and going deep into the parts that showcase the signals required for that specific scenario.
+
+## Possible nature of follow-up questions
+
+As mentioned in our [behavioral interview preparation overview](/behavioral-interview-playbook/introduction), interviewers are encouraged to rely more on follow-up questions to really understand the candidate's thought process and motivations, which typically fall under these categories:
+
+- Why do you think you did (insert action)?
+- Why did you not do (insert action)?
+- How would you do things differently in hindsight?
+
+For questions on problem solving or drive for results, interviewers will most likely probe for questions to help them understand a bit more about:
+
+- **The source of the task/problem/objective** (Understanding level of proactivity and initiative):
+  - Was the project or task initiated by you? And to what extent?
+  - Was the underlying idea from you, or just the plan to execute?
+  - How did you get buy-in from stakeholders to even work on it?
+- **Role and actual contribution by candidate**:
+  - Was there a team involved with solving the problem or achieving the objective?
+  - Which actions were initiated on your own accord or contributed solely by you, and what did others do?
+  - How did you help the other members involved to achieve the goal?
+- **Prioritizing the problem or objective to achieve**:
+  - Was there a reason why this particular problem or objective was prioritized to be addressed or done against others?
+  - Was there another problem or root objective that should have been more important?
+  - Was this problem not already resolved by another team in the company? Why did the solution have to be reinvented?
+- **Selection of appropriate metrics/objectives, and if they were measured post-launch**:
+  - Was there any quantitative or qualitative target set, and how were they decided?
+  - How were they measured post-launch, and what was the result?
+  - If an issue was resolved, what measures were put in place to ensure the same problem didn't happen again?
+- **Using sufficient information to drive decisions**:
+  - What types of research or data did you rely on to make decisions / choose a problem to resolve?
+  - How much time did you spend on research and gathering information?
+  - How did you balance between gathering information / planning and actually executing on the plan?
+- **Choosing the right solution**:
+  - What other solutions were considered, and what were the pros and cons of each?
+  - Why was the final solution chosen?
+  - Who came up with the original idea of the solutions? How were they derived?
+
+## Sample problem solving questions and answers
+
+The sample story above can also be tailored to answer specific questions by extracting relevant portions:
+
+> Can you tell me about a time when you had to use data to drive engineering decisions?
+
+Elaborate on the section about conversion performance.
+
+> Can you provide an example of a time when you had to troubleshoot and fix a complex issue in a project?
+
+Elaborate on the section about investigating the reason for poor conversion.
+
+> Can you describe a time you solved an engineering problem or achieved meaningful metric improvement?
+
+Elaborate on the section about moving to server-side rendering and applying modern performance techniques.
+
+> Can you describe a time when you had to make an important engineering decision and how you decided between tradeoffs?
+
+Elaborate on the section about choosing which frameworks to migrate to and the reasons behind the decisions.
diff --git a/packages/behavioral-interview-guidebook/contents/problem-solving/pt-BR.mdx b/packages/behavioral-interview-guidebook/contents/problem-solving/pt-BR.mdx
new file mode 100644
index 0000000000..f526831d70
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/problem-solving/pt-BR.mdx
@@ -0,0 +1,191 @@
+---
+title: Responder a perguntas do tipo "Conte-me sobre um momento em que..." para habilidades de resolução de problemas e foco em resultados
+description: Aprenda como responder a perguntas comportamentais sobre habilidades de resolução de problemas e foco em resultados, para desenvolvedores Front-End, desenvolvedores web e engenheiros de software. Consulte exemplos de respostas.
+---
+
+Conforme mencionado em nossa [visão geral de preparação para entrevistas comportamentais](/guia-de-entrevistas-comportamentais), **mentalidade de crescimento** é uma das 8 principais categorias de perguntas para se preparar.
+
+Neste guia, você aprenderá como abordá-las:
+
+1.  Critérios de avaliação em detalhes
+2.  Abstraindo possíveis perguntas em temas comuns
+3.  Estrutura de Resposta Sugerida
+4.  Possível natureza de perguntas de acompanhamento
+5.  Perguntas e respostas de exemplo
+
+## Critérios de Avaliação em Detalhes
+
+A resolução de problemas e o foco em resultados são agrupados em uma única categoria, pois estão altamente relacionados em sua natureza. Ao descrever a experiência de resolver problemas ou alcançar resultados / objetivos, também é possível inferir a mentalidade ou motivação para fazê-lo.
+
+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
+
+## Abstraindo possíveis perguntas em temas comuns
+
+As mentioned in our [behavioral interview preparation overview](/behavioral-interview-playbook/introduction), it is impractical to prepare answers specifically for every behavioral question out there. No entanto, ao agrupar perguntas específicas em temas semelhantes e preparar histórias que cubram um grande número de requisitos de perguntas, podemos reduzir o número de histórias a serem preparadas para cerca de 3-5 histórias.
+
+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**?
+
+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.
+
+## Estrutura de Resposta Sugerida
+
+Como sempre, o [formato STAR](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) é a estrutura mais simples e eficaz que recomendamos para estruturar sua história.
+
+Apesar do grande número de possibilidades de perguntas, podemos abstrair todos os requisitos para perguntas comportamentais de resolução de problemas ao pensar em um processo sólido de resolução de problemas:
+
+1.  **Identificação do problema**: Identificar a causa raiz correta ou o problema principal para se concentrar, a partir dos sintomas de nível superficial.
+2.  **Métricas/definição de metas**: Identificar métricas-chave que indicariam o sucesso na resolução do problema (se houver).
+3.  **Coleta de informações**: Habilidade em reunir informações de diferentes fontes e uma mentalidade orientada por dados (usando dados para embasar decisões).
+4.  **Geração de ideias de solução**: Gerar criativamente soluções que resolvam a causa raiz
+5.  **Avaliação de solução**: Avaliar as compensações de cada solução e selecionar a mais ótima
+6.  **Monitoramento e ajuste**: Acompanhar a eficácia da solução por meio da medição de métricas-chave. Ajustar a estratégia, se necessário.
+
+Portanto, você só precisa garantir que pelo menos 1 dos seus [relatos ou projetos preparados](/behavioral-interview-playbook/introduction) cubra todos os passos mencionados acima. Ao fazer isso, a história pode ser reutilizada para todos os traços associados à resolução de problemas, como mentalidade orientada por dados, criatividade e trabalho com feedback dos usuários.
+
+É claro, você pode precisar adaptar os detalhes da sua história para focar no aspecto específico solicitado na pergunta específica.
+
+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
+
+### 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%.
+
+#### Tarefa
+
+- 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
+
+\*\*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.
+
+\*\*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.
+
+**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.
+
+**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.
+
+#### 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.
+
+## Possíveis Naturezas de Perguntas de Acompanhamento
+
+Conforme mencionado em nossa [visão geral de preparação para entrevistas comportamentais](/behavioral-interview-playbook/introduction), 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?
+
+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?
+
+## Exemplos de Perguntas e Respostas sobre Colaboração
+
+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)?
diff --git a/packages/behavioral-interview-guidebook/contents/problem-solving/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/problem-solving/zh-CN.mdx
new file mode 100644
index 0000000000..2ee4a30acf
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/problem-solving/zh-CN.mdx
@@ -0,0 +1,198 @@
+---
+title: 解答解决问题行为面试问题
+description: 了解如何回答“告诉我一个时间……”风格的问题，以评估您的解决问题的能力。
+seo_title: 解决问题 | 行为面试手册
+seo_description: 了解如何回答解决问题的行为面试问题，适用于前端工程师。参考示例答案。
+social_title: 解决问题行为问题 | GreatFrontEnd
+---
+
+正如我们在[行为面试准备概述](/behavioral-interview-playbook/introduction)中提到的，**解决问题和追求结果**是准备的8个主要问题类别之一。
+
+在本指南中，您将学习如何解决它们：
+
+1. 详细的评估标准
+2. 将可能的问题抽象成常见主题
+3. 建议的答案框架
+4. 后续问题的可能性质
+5. 示例问题和答案
+
+## 详细的评估标准
+
+解决问题和追求结果被归为一类，因为它们本质上高度相关。在描述解决问题或实现某些结果/目标方面的经验时，也可以推断出他们的心态或这样做的动力。
+
+在对该类别下的候选人进行评分时，面试官通常会关注以下标准：
+
+* 确定最佳解决方案并执行
+  * 确定正确的问题
+  * 确定最关键的目标
+  * 足智多谋和数据驱动的思维方式
+  * 创造力和创新
+  * 确定权衡和可持续的解决方案
+  * 衡量结果、迭代和跟进
+* 结果导向的心态
+  * 尽管存在障碍或障碍，仍积极主动地取得进展
+  * 影响他人实现目标
+  * 平衡分析与果断行动
+
+## 将可能的问题抽象成常见主题
+
+正如我们在[行为面试准备概述](/behavioral-interview-playbook/introduction)中提到的，为每个现有的行为问题专门准备答案是不切实际的。但是，通过将特定问题归入相似的主题，并准备涵盖大量问题要求的案例，我们可以将需要准备的案例数量减少到大约3-5个。
+
+可以提出的解决问题和追求结果的行为问题类型实在太多了，例如：
+
+* 您能否告诉我您曾经**使用数据来驱动工程决策**的经历？
+* 您能否提供一个您必须在项目中**排除故障并修复复杂问题**的例子？
+* 您能否描述一下您曾经**创造性地解决了**一个工程问题或实现了有意义的指标改进的经历？
+* 您能否描述一下您曾经必须做出重要的工程决策以及您如何在**权衡之间**做出决定的经历？
+
+但是，当我们查看该类别下的 80% 的问题时，问题通常会询问如何解决问题或有效解决问题所需的特定特质，例如创造力、使用数据或权衡评估。问题的根源或目标，以及候选人在面对障碍时是否具有韧性，也可以从对这些问题的回答中推断出来。
+
+## 建议的回答框架
+
+和往常一样，我们推荐使用 [STAR 格式](https://www.indeed.com/career-advice/interviewing/how-to-use-the-star-interview-response-technique) 作为最简单、最有效的框架来构建你的故事。
+
+尽管问题可能性很多，但我们可以通过思考一个稳健的解决问题的过程来抽象出所有解决问题行为问题的要求：
+
+1. **问题识别**：从表面症状中识别出要关注的正确根本原因或根本问题
+2. **指标/目标设定**：确定解决问题（如果有）时将标志成功的关键指标
+3. **信息收集**：从不同来源收集信息的资源能力和数据驱动的思维模式（使用数据来驱动决策）
+4. **解决方案头脑风暴**：创造性地生成解决根本原因的解决方案
+5. **解决方案评估**：评估每个解决方案的权衡，并选择最佳方案
+6. **监控和调整**：通过衡量关键指标来监控解决方案的有效性。如果需要，调整策略
+
+因此，您只需要确保您的[准备好的故事或项目](/behavioral-interview-playbook/introduction)至少涵盖了上述所有步骤。通过这样做，该故事可以重复用于解决问题下的所有相关特征，例如数据驱动的思维模式、资源能力、创造力和与用户反馈合作。
+
+当然，你可能需要根据故事的细节来侧重于特定问题中提出的具体方面。
+
+我们建议您也选择可以同时用于获取以下信号的解决问题的故事：
+
+* **主动性/积极性**：您主动调查问题、收集信息并解决问题
+* **领导力**：您主导了解决问题的过程
+* **团队合作**：您必须作为团队的一员来解决问题
+
+## 案例故事
+
+这是一个使用STAR格式的案例故事。
+
+**情境**：我是一家销售奢侈品的电子商务网站的技术负责人。该网站是作为Angular 1.5单页应用程序构建的。近年来，该产品已经显现出它的老化——开发人员的体验并不好，而且网站的性能很差。初始加载速度超过3秒，转化率约为0.8%。
+
+**任务**：我的任务是提高网站的性能和转化率。
+
+**行动**
+
+1. **问题识别**
+   * 转化与网站性能和用户体验相关
+   * 过去几年，由于没有专人监督网站的整体架构和跟踪性能指标，网站性能一直在逐渐下降
+   * 用户体验有一段时间没有被关注了
+2. **信息收集**
+   * 查看了过去一年中错误的性质，根据其根本原因进行分类，以确定热点和主要问题区域。
+   * 收集了团队关于改进领域方面的反馈。
+   * 与产品经理一起，与团队进行了一次头脑风暴会议，以思考改进方法。
+   * 为了改进，首先我们需要知道我们做得如何：
+     * 再次检查我们的性能和转化跟踪是否正常工作。
+     * 开始跟踪来自Lighthouse和Core Web Vitals的新指标。
+   * 与数据科学家合作，提出了性能和转化的仪表板，并获得了一些见解：
+     * 确定了一些国家的转化率较低。
+     * 与桌面用户相比，移动用户的转化率较低。
+   * 与用户体验设计师和用户体验研究人员合作，以确定网站上端到端购物体验中的问题。
+     * 用户界面元素之间的间距太大，需要大量滚动，这影响了跳出率，因为一些用户懒得滚动。
+3. **解决方案头脑风暴**
+   * **用户界面**：服务器端渲染对其性能和SEO有益至关重要。围绕良好的性能做出选择。
+     * **JavaScript框架**：从Angular.js 1.6迁移到Angular 17是一项巨大的工程，而且由于Angular 17是一个完全不同的框架，因此停留在Angular上并没有节省多少时间。
+     * **Next.js**：我们的一些开发人员具有使用React和Next.js的经验，作为构建SSR（服务器端渲染）应用程序的元框架正在迅速普及。我们确实希望Next.js提供的快速初始加载和类似应用程序的导航行为。
+     * **Svelte**：响应式模型很有吸引力，并且与React相比，编程模型更容易理解，但是生态系统比React小，并且没有那么多用Svelte构建的成功的电子商务网站的例子。
+   * **样式**：由于多年来添加了许多类并且难以删除，样式表变得非常臃肿。
+     * **Tailwind CSS**：Tailwind CSS是最热门的CSS方法之一，其原子CSS方法可以很好地扩展到不断增长的代码库。
+     * **Styled Components**：CSS-in-JS也是我们正在关注的，但是Styled Components与React相关，并且运行时样式注入对性能不利。
+   * **以性能为中心的思维模式**：阅读了许多关于[web.dev](https://web.dev/)和其他电子商务公司工程博客的性能案例研究，收集了一份重要的性能技术和流程清单：
+     * 为每个页面设置性能预算（低于300kb）
+     * 将性能基准测试作为CI的一部分运行——在合并Pull Requests之前和持续进行
+     * 延迟加载非关键组件
+     * 延迟加载低于折叠的内容
+     * 在页面级别而不是单个捆绑包上拆分JavaScript（由Next.js处理）
+     * 对图像使用WebP格式
+     * 在CDN上托管图像
+     * 图像的自适应加载，以便移动设备加载较小的图像
+     * 合并重复的JavaScript库（data-fns和moment.js），切换到`lodash-es`，删除了所有jQuery的用法
+     * 查看数据以识别较少使用的功能并将其从代码中删除，从而将产品详细信息页面上的JS大小减少了200+kb
+   * **搜索引擎优化（SEO）**
+     * 使用Ahrefs等SEO工具持续监控SEO
+     * 与营销团队合作，确保营销文案包含Ahrefs显示的重要关键词
+     * 调整页面URL以包含SEO关键词
+   * **用户体验改进**
+     * 单页结账体验，而不是两页结账，以减少点击次数
+     * 减少许多用户界面元素的高度
+     * 修复不会被错过的结账按钮
+   * **付款改进**
+     * 分析了Stripe结账数据并实施了特定于国家/地区的地址字段
+     * 最初只有一个可用的付款方式——信用卡。 寻求数据科学家的帮助，以评估新付款方式的受欢迎程度以及它们是否值得添加。 后来我们还添加了PayPal、Google Pay和Apple Pay付款方式
+4. **解决方案评估**
+   * **元框架**：选择Next.js，因为它由一家公司支持，有许多可用资源，并且拥有最大的社区。 React也是最受欢迎的JavaScript库，也最容易招聘
+   * **样式**：Tailwind，因为它是一个可靠且面向未来的选择（与React的发展方向兼容）
+5. **监控和调整**
+   * 在为期2个月的时间内，在A/B测试的背后推出了新网站，同时监控性能和转化率。
+   * 以前转化率较低的国家/地区，转化率提高了近50%。
+
+**结果**
+
+* Lighthouse分数提高到92
+* 加载速度提高到1.5秒
+* 转化率提高到2.5%
+* 最近的调查显示，开发人员的速度有所提高，现在更容易将人员招聘到团队中，因为更多的人比其他框架更了解React
+
+显然，整个故事作为对单个问题的回答过于详细；您绝对不应该像列清单一样列出您所做的所有具体性能改进！ 旨在通过简要介绍“行动”部分中的每个阶段，并深入研究展示该特定场景所需信号的部分，从而实现广度和深度。
+
+## 可能的后续问题性质
+
+正如我们在[行为面试准备概述](/behavioral-interview-playbook/introduction)中提到的，鼓励面试官更多地依赖后续问题来真正了解候选人的思维过程和动机，这些通常属于以下类别：
+
+* 你认为你为什么做了（插入操作）？
+* 你为什么不做（插入操作）？
+* 事后看来，你将如何做不同的事情？
+
+对于解决问题或追求结果的问题，面试官很可能会探究问题，以帮助他们更多地了解：
+
+* **任务/问题/目标的来源**（主动性和主动性的理解程度）：
+  * 项目或任务是你发起的吗？ 程度如何？
+  * 潜在的想法来自你，还是仅仅是执行计划？
+  * 你是如何获得利益相关者的支持，甚至开始着手这项工作的？
+* **候选人的角色和实际贡献**：
+  * 是否有一个团队参与解决问题或实现目标？
+  * 哪些行动是你自己主动发起的或完全由你贡献的，其他人做了什么？
+  * 你是如何帮助其他参与者实现目标的？
+* **确定要解决的问题或目标**：
+  * 是否有原因导致优先解决或完成这个特定的问题或目标，而不是其他问题或目标？
+  * 是否有另一个问题或根本目标应该更重要？
+  * 这个问题是否已经被公司内的另一个团队解决了？ 为什么必须重新发明解决方案？
+* **选择适当的指标/目标，以及它们是否在发布后进行了衡量**：
+  * 是否设定了任何定量或定性目标，以及如何决定的？
+  * 它们是如何在发布后衡量的，结果是什么？
+  * 如果一个问题得到解决，采取了哪些措施来确保同样的问题不会再次发生？
+* **使用足够的信息来驱动决策**：
+  * 你依赖什么类型的研究或数据来做出决策/选择要解决的问题？
+  * 你花了多少时间进行研究和收集信息？
+  * 你是如何平衡收集信息/计划和实际执行计划的？
+* **选择正确的解决方案**：
+  * 考虑了哪些其他解决方案，以及每个解决方案的优缺点是什么？
+  * 为什么选择了最终的解决方案？
+  * 谁提出了解决方案的最初想法？ 它们是如何产生的？
+
+## 示例问题解决问题和答案
+
+上面的示例故事也可以通过提取相关部分来定制，以回答具体问题：
+
+> 你能告诉我你曾经使用数据来驱动工程决策的经历吗？
+
+详细说明关于转化表现的部分。
+
+> 你能提供一个例子，说明你曾经不得不排除故障并修复项目中复杂问题的经历吗？
+
+详细说明关于调查转化率低下的原因的部分。
+
+> 你能描述一下你解决工程问题或实现有意义的指标改进的经历吗？
+
+详细阐述关于迁移到服务器端渲染和应用现代性能技术的部分。
+
+> 你能描述一下你曾经不得不做出重要的工程决策以及你如何在权衡取舍之间做出决定的经历吗？
+
+详细说明关于选择要迁移到哪些框架以及做出这些决定的原因的部分。
diff --git a/packages/behavioral-interview-guidebook/contents/questions-to-ask/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/questions-to-ask/en-US.langnostic.json
new file mode 100644
index 0000000000..8303b9f51c
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/questions-to-ask/en-US.langnostic.json
@@ -0,0 +1,160 @@
+{
+  "frontmatter": {
+    "title": "2446dee0",
+    "description": "3717148a",
+    "seo_title": "5b8f16f7",
+    "seo_description": "dbb07feb",
+    "social_title": "6e02ca93"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "ede2bd47",
+        "55f978b2",
+        "24784ed2",
+        "1b5c32e",
+        "bac07c80",
+        "8ae8f8dd",
+        "f5caf9ea",
+        "c40c20bd",
+        "c22426e6",
+        "c30eb869",
+        "a810dc72",
+        "f4c24d6b",
+        "f7a126b9",
+        "9f0aaf7c",
+        "861d8bcb",
+        "49f06657",
+        "3dbd00d7",
+        "8818cfeb",
+        "40200ead",
+        "6366bfde",
+        "d68ddeb",
+        "87ba9aa9",
+        "61e6f05d",
+        "ecf73b96",
+        "d5aace2a",
+        "a180e4db",
+        "8e2b7468",
+        "667b27af",
+        "b14c4a73",
+        "24c8a4f5",
+        "eeb58dae",
+        "150a73d0",
+        "5a43b873",
+        "c8e84db8",
+        "6d6a0098",
+        "16f26f58",
+        "79bea09f",
+        "d905b6a8",
+        "f5b0ace8",
+        "4af8b5f6",
+        "f3602576",
+        "78fd55",
+        "97faea64",
+        "dc09fcf8",
+        "1a718cd5",
+        "95d454dd",
+        "61df4c1b",
+        "77f37db6",
+        "17861f37",
+        "defc0b3b",
+        "b9fd1401",
+        "15ecd443",
+        "f12ce49a",
+        "a9a99bb2",
+        "e09f04fb",
+        "4e1f5173",
+        "eba740a8",
+        "d0f6daf5",
+        "3a5732d2",
+        "e7721211",
+        "1736d727",
+        "ec3bfcee",
+        "77408461",
+        "8af5a8e9",
+        "ae8160b2",
+        "2a493cf4",
+        "e71bdbca",
+        "d9d7d69a",
+        "573ad095",
+        "1f5b00f1"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "ede2bd47",
+        "55f978b2",
+        "24784ed2",
+        "1b5c32e",
+        "bac07c80",
+        "8ae8f8dd",
+        "f5caf9ea",
+        "c40c20bd",
+        "c22426e6",
+        "c30eb869",
+        "a810dc72",
+        "f4c24d6b",
+        "f7a126b9",
+        "9f0aaf7c",
+        "861d8bcb",
+        "49f06657",
+        "3dbd00d7",
+        "8818cfeb",
+        "40200ead",
+        "6366bfde",
+        "d68ddeb",
+        "87ba9aa9",
+        "61e6f05d",
+        "ecf73b96",
+        "d5aace2a",
+        "a180e4db",
+        "8e2b7468",
+        "667b27af",
+        "b14c4a73",
+        "24c8a4f5",
+        "eeb58dae",
+        "150a73d0",
+        "5a43b873",
+        "c8e84db8",
+        "6d6a0098",
+        "16f26f58",
+        "79bea09f",
+        "d905b6a8",
+        "f5b0ace8",
+        "4af8b5f6",
+        "f3602576",
+        "78fd55",
+        "97faea64",
+        "dc09fcf8",
+        "1a718cd5",
+        "95d454dd",
+        "61df4c1b",
+        "77f37db6",
+        "17861f37",
+        "defc0b3b",
+        "b9fd1401",
+        "15ecd443",
+        "f12ce49a",
+        "a9a99bb2",
+        "e09f04fb",
+        "4e1f5173",
+        "eba740a8",
+        "d0f6daf5",
+        "3a5732d2",
+        "e7721211",
+        "1736d727",
+        "ec3bfcee",
+        "77408461",
+        "8af5a8e9",
+        "ae8160b2",
+        "2a493cf4",
+        "e71bdbca",
+        "d9d7d69a",
+        "573ad095",
+        "1f5b00f1"
+      ]
+    }
+  }
+}
diff --git a/packages/behavioral-interview-guidebook/contents/questions-to-ask/en-US.mdx b/packages/behavioral-interview-guidebook/contents/questions-to-ask/en-US.mdx
new file mode 100644
index 0000000000..2179ab0465
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/questions-to-ask/en-US.mdx
@@ -0,0 +1,164 @@
+---
+title: Questions to Ask at End of Interview
+description: Learn the best questions to ask at the end of your front end interviews.
+seo_title: Useful Questions to Ask at the End of your Front End Interview
+seo_description: Learn the best questions to ask at the end of your front end interviews. Written by ex-interviewers at Big Tech.
+social_title: Questions to Ask at End of Interview | GreatFrontEnd
+---
+
+In our anxiety to secure a job, some of us might forget that joining a bad team might be worse than waiting it out for a good opportunity. An interview is in fact an invaluable opportunity for the candidate to speak to someone who actually works in the company and find out more about the practices there. Few key aspects you should evaluate about a job before joining:
+
+- Will the work be interesting to you?
+- Is there room for career growth?
+- Are the teammates/your manager collaborative and easy to work with?
+
+Good questions asked at the end of the interview help a candidate achieve 2 objectives – leave a good impression and help the candidate assess if the company is truly suitable for them.
+
+In this article, we have provided a large list of useful questions you might ask to achieve this. Questions are organized by interviewer/interview round as well as objective.
+
+## Screening rounds with HR/recruiters
+
+The recruiter is usually not working directly in the team who is hiring you. Hence, it could be less insightful to ask questions about the team's day-to-day or on-the-ground situation. However, you could still find out information that recruiters would know, such as the candidate evaluation criteria or general company policies.
+
+### Get to know the criteria the hiring team is looking out for
+
+These questions are very useful to understand what the hiring team is prioritizing, which they would probably have communicated with HR/recruiters beforehand so that they could help screen candidates accordingly.
+
+#### "What are the skills, characteristics or experiences that the team is looking for in an ideal candidate?"
+
+These are invaluable as you would be able to pinpoint the key criteria the team is prioritizing in hiring, which allows you to specifically showcase those required skills, characteristics or experiences in the next rounds with the hiring team.
+
+This question is extremely useful as it's often hard to guess what the interviewer is really looking out for. Hiring is often a hit or miss and hiring managers are usually especially excited to find candidates who seem to be a perfect fit to their internal hiring criteria.
+
+#### "When is the anticipated starting date for this position?"
+
+More often than not, starting dates could be a key criteria when a position has to be filled urgently. You could check this with the recruiter early if you have a delayed start date, to avoid wasting their time and yours.
+
+### Get to know more about the hiring team
+
+#### "Will I have the opportunity to meet my potential manager or colleagues during the interview process?"
+
+If you were to meet the hiring team within the process, it would be good to know which rounds it would be, and if possible, who's who. This will help you prepare relevant questions or conduct background checks beforehand.
+
+#### "Can you tell me about the team I'll be working with directly, including who I will report to and the team's structure?"
+
+This question may or may not be useful depending on how familiar the recruiter is with the hiring team (sometimes not at all). However, you might still be able to get good insights on the structure or dynamics of the team.
+
+### Get to know more from the company's perspective
+
+#### "What are the current goals that the company is focused on, and how does this team work to support hitting those goals?"
+
+This question gives you insights on the importance and position of the team within the company, including how the team contributes to the company's key goals. This could provide critical insights on the team's key deliverables and priorities, and correspondingly how you could best serve the team. In bad times, lower priority teams could also be laid off.
+
+#### "Can you give me some examples of the most and least desirable aspects of the company's culture?"
+
+While HR/recruiting might not be familiar with the team's day-to-day, they would most likely know about the company's policies and culture. This could give you some useful insights which could also carry over to the next interview.
+
+#### "How frequently do employees make themselves available outside of working hours"
+
+In a similar vein, we want to know if there is a general company culture for or against overtime work (without being too obvious). This could be a deal-breaker for some people, and should be cleared up asap.
+
+## Rounds with the hiring team/team you will join
+
+As a front end developer / web developer, rounds with the engineering team usually means rounds with the hiring team itself.
+
+Questions to ask in these rounds are highly critical in elucidating the experience you would likely get when you actually join the team (Note: This section is focused on questions to ask your potential team mates except manager. Questions to ask your potential manager are in the next section).
+
+### Check if the day-to-day realities of the job aligns with your goals
+
+#### "Can you show me examples of projects I'd be working on and the technologies I will use? Will I be maintaining projects or building from scratch?"
+
+This question is useful to elucidate the exact kind of work you would be doing, as well as some of the technologies used. In general, having the opportunity to build products from ground up could be a better learning opportunity than doing small, incremental features.
+
+The types of technologies used could also be a criteria, as learning to use modern stacks (and having mentors proficient in that area) will likely be more beneficial to your career growth.
+
+#### "Can you describe a typical day or week for a developer in your team?" / "Can you walk me through the process of a typical project"
+
+This question helps to clarify quite a lot of things - the kinds of tasks that a developer might be expected to do, stakeholders that you will work with, as well as the project management process and lifecycle.
+
+#### "What are some of the challenges you expect the person in this position to face?"
+
+This question is useful in uncovering some potential issues in the codebase or workflows which could be a dealbreaker for certain people. It might also uncover dysfunctional teams or processes.
+
+#### "What does it look like during the busiest and toughest times for this role?"
+
+Asking this question could help uncover unreasonably high expectations or pressure for the role, elucidating more about work life balance without explicitly asking about it.
+
+#### "Will there be opportunities for stretch assignments where I can learn and use new skills?"
+
+If you're someone who seeks to grow your skills or portfolio in the role, be sure to ask this question to know if you will have reasonable autonomy to work on more complex projects on request.
+
+### Check if your potential manager's managerial style is appropriate for your growth
+
+#### What type of information is shared with employees? Is revenue, profits, expenses, salary ranges, etc. shared?
+
+This question differentiates companies by their levels of transparency. Some candidates might find this important, as it could be frustrating to have little information and hence little control over your compensation and promotion schedule.
+
+#### Who I will I report to? Can you tell me more about their style of supervision?
+
+This question elucidates if your potential manager is someone who is hands-off or tends to look into the details of your work. This could have a large impact on your experience on the job.
+
+### Understand more about the team dynamics and culture
+
+#### "What is the team structure and how does this role fit into the team?"
+
+This question is useful as it helps you to paint a picture of the role in context to the overall team structure, how big the team is and roughly what each part of the team does.
+
+#### "How would you describe the work environment here—is the work typically more collaborative or more independent?"
+
+This question indirectly elucidates the likely culture of the team - do people work in silos or do they communicate frequently with one another.
+
+#### "Can you give me some examples of the most and least desirable aspects of the team's culture?"
+
+Another open-ended, useful question which allows you to gain more insights which may not surface from a more general ask.
+
+#### "How frequently do team members make themselves available outside of business hours?"
+
+This question indirectly elucidates the culture of the team with respect to work life balance.
+
+## Rounds with your potential manager
+
+In these rounds, it is useful to take the chance to find out your manager's managerial style, the performance review process/criteria, as well as his/her expectations of the role (which could give you an idea of how well you might perform on the job)
+
+- Can you tell me about the kind of supervision you provide?
+- Thinking back to people you've seen do this work previously, what differentiated the ones who were good from the ones who were really great at it?
+- What are you hoping this person will accomplish in their first six months and in their first year?
+- What has been the top accomplishments of the organization over the past year?
+
+## Rounds with roles outside the team (who might not know specifically about team's operations)
+
+### Questions to ask the founder
+
+- What are the current goals that the company is focused on, and how does this team work to support hitting those goals?
+- What direction do you see this company heading in over the next few years?
+- What are the current focus areas for the company as a whole?
+
+### Questions to ask the team's collaborators
+
+It is common to interview with someone you may not work directly with. In these cases, its best to cast a wider net and ask questions about the general company policy or culture. You could still ask them about your team if they are close collaborators.
+
+- What's one challenge you occasionally or regularly face in your job?
+- Can you tell me about the team I'll be working with?
+- What learning and professional development opportunities are available in the company?
+
+## Questions to avoid
+
+Here are a few examples of what not to ask at the end of your interview:
+
+### Avoid asking about salary and benefits early on
+
+Only start discussing salary when the team is already keen on hiring you (i.e. at the end of the process), unless they ask you about your salary requirements.
+
+- What's the starting salary?
+- Can you tell me about your health insurance?
+- What are your paid leave policies?
+- If I get the job, when can I take time off for vacation?
+- How often do you give out raises?
+- How often do you hand out bonuses?
+- What kind of perks and benefits can I expect?
+
+### Avoid asking questions that should be public information
+
+- What does the company do?
+- Where are the offices of the company located?
+- Who is the CEO of the company?
diff --git a/packages/behavioral-interview-guidebook/contents/questions-to-ask/pt-BR.mdx b/packages/behavioral-interview-guidebook/contents/questions-to-ask/pt-BR.mdx
new file mode 100644
index 0000000000..3a933c6a92
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/questions-to-ask/pt-BR.mdx
@@ -0,0 +1,161 @@
+---
+title: Perguntas úteis para fazer ao entrevistador no final de uma entrevista de Engenharia de Software
+description: Aprenda as melhores perguntas a fazer no final de suas entrevistas para desenvolvedor de front-end, desenvolvedor web ou engenheiro de software. Escrito por ex-entrevistadores de grandes empresas de tecnologia.
+---
+
+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?
+
+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.
+
+Neste artigo, fornecemos uma extensa lista de perguntas úteis que você pode fazer para alcançar isso. As perguntas estão organizadas por entrevistador/rodada de entrevista, bem como por objetivo.
+
+## Rodadas de triagem com RH/recrutadores
+
+O recrutador geralmente não está trabalhando diretamente na equipe que está contratando você. Portanto, pode ser menos esclarecedor fazer perguntas sobre o dia-a-dia da equipe ou a situação prática. No entanto, você ainda pode obter informações que os recrutadores saberiam, como os critérios de avaliação dos candidatos ou políticas gerais da empresa.
+
+### Descubra os critérios que a equipe de contratação está buscando
+
+Essas perguntas são muito úteis para entender o que a equipe de contratação está priorizando, algo que provavelmente eles já comunicaram antecipadamente ao RH/recrutadores para que eles possam ajudar a triar os candidatos de acordo.
+
+#### "Quais são as habilidades, características ou experiências que a equipe procura em um candidato ideal?"
+
+Essas perguntas são inestimáveis, pois permitem que você identifique os critérios-chave que a equipe está priorizando na contratação, o que lhe permite destacar especificamente essas habilidades, características ou experiências necessárias nas próximas rodadas com a equipe de contratação.
+
+Esta pergunta é extremamente útil, pois muitas vezes é difícil adivinhar o que o entrevistador está realmente buscando. A contratação frequentemente é uma questão de acerto ou erro, e os gerentes de contratação geralmente ficam especialmente empolgados ao encontrar candidatos que parecem ser um encaixe perfeito para seus critérios internos de contratação.
+
+#### "Qual é a data prevista para o início deste cargo?"
+
+Muitas vezes, as datas de início podem ser um critério-chave quando uma posição precisa ser preenchida com urgência. Você pode verificar isso com o recrutador com antecedência se tiver uma data de início atrasada, para evitar desperdiçar o tempo deles e o seu.
+
+### Saiba mais sobre a equipe de contratação
+
+#### "Eu terei a oportunidade de conhecer meu possível gerente ou colegas durante o processo de entrevista?"
+
+Se você fosse se encontrar com a equipe de contratação durante o processo, seria bom saber em quais rodadas isso aconteceria e, se possível, quem é quem. Isso ajudará você a preparar perguntas relevantes ou realizar verificações de antecedentes antecipadamente.
+
+#### "Você pode me falar sobre a equipe com a qual vou trabalhar diretamente, incluindo para quem eu vou reportar e a estrutura da equipe?"
+
+Essa pergunta pode ser útil ou não, dependendo do quão familiarizado o recrutador está com a equipe de contratação (às vezes, não está familiarizado de forma alguma). No entanto, você ainda pode obter informações valiosas sobre a estrutura ou dinâmica da equipe.
+
+### Conheça mais a perspectiva da empresa
+
+#### "Quais são os objetivos atuais em que a empresa está focada e como esta equipe trabalha para apoiar o alcance desses objetivos?"
+
+Esta pergunta fornece informações sobre a importância e posição da equipe dentro da empresa, incluindo como a equipe contribui para os principais objetivos da empresa. Isso pode fornecer insights críticos sobre os principais entregáveis e prioridades da equipe e, correspondendo, como você pode melhor servir à equipe. Em tempos difíceis, equipes de menor prioridade também podem ser dispensadas.
+
+#### "Você pode me dar alguns exemplos dos aspectos mais e menos desejáveis da cultura da equipe?"
+
+Embora o RH/recrutamento possa não estar familiarizado com o dia-a-dia da equipe, é provável que eles conheçam as políticas e a cultura da empresa. Isso pode fornecer algumas informações úteis que também podem ser relevantes para a próxima entrevista.
+
+#### "Com que frequência os membros da equipe se colocam à disposição fora do horário comercial"
+
+De forma semelhante, queremos saber se existe uma cultura geral da empresa a favor ou contra o trabalho em horas extraordinárias (sem ser muito óbvio). Isso pode ser um ponto de ruptura para algumas pessoas e deve ser esclarecido o mais rápido possível.
+
+## Rodadas com a equipe de contratação/equipe à qual você se juntará
+
+Como desenvolvedor front-end ou desenvolvedor web, as rodadas com a equipe de engenharia geralmente significam rodadas com a própria equipe de contratação.
+
+As perguntas a fazer nessas rodadas são extremamente críticas para esclarecer a experiência que você provavelmente terá ao ingressar na equipe. (Observação: Esta seção se concentra em perguntas a fazer aos seus futuros colegas de equipe, exceto ao gerente. As perguntas a fazer ao seu possível gerente estão na próxima seção.
+
+### Verifique se as realidades do dia a dia do trabalho estão alinhadas com seus objetivos.
+
+#### "Você pode me mostrar exemplos de projetos nos quais eu estaria trabalhando e as tecnologias que eu usaria?"? Eu estarei mantendo projetos existentes ou construindo do zero
+
+Esta pergunta é útil para esclarecer o tipo exato de trabalho que você estaria realizando, bem como algumas das tecnologias utilizadas. Em geral, ter a oportunidade de construir produtos desde o início pode ser uma oportunidade de aprendizado melhor do que fazer pequenas funcionalidades incrementais.
+
+Os tipos de tecnologias usadas também podem ser um critério, já que aprender a usar pilhas tecnológicas modernas (e ter mentores proficientes nessa área) provavelmente será mais benéfico para o crescimento de sua carreira.
+
+#### Você pode descrever um dia ou semana típica para um desenvolvedor em sua equipe /"Você pode me explicar o processo de um projeto típico?"
+
+Essa pergunta ajuda a esclarecer muitas coisas - os tipos de tarefas que um desenvolvedor pode ser esperado para realizar, as partes interessadas com as quais você vai trabalhar, bem como o processo de gerenciamento de projeto e o ciclo de vida do projeto.
+
+#### "Quais são alguns dos desafios que você espera que a pessoa nesta posição enfrente?"
+
+Essa pergunta é útil para descobrir potenciais problemas no código ou nos fluxos de trabalho que poderiam ser um impedimento para certas pessoas. Também pode revelar equipes ou processos disfuncionais.
+
+#### "Como é durante os momentos mais agitados e desafiadores para esta função?"
+
+Fazer essa pergunta pode ajudar a descobrir expectativas ou pressões excessivamente altas para a função, fornecendo informações adicionais sobre o equilíbrio entre trabalho e vida pessoal sem abordar explicitamente esse tema.
+
+#### "Haverá oportunidades para projetos desafiadores em que eu possa aprender e utilizar novas habilidades?"
+
+Se você é alguém que busca expandir suas habilidades ou portfólio na função, certifique-se de fazer essa pergunta para saber se terá autonomia razoável para trabalhar em projetos mais complexos sob solicitação.
+
+### Verifique se o estilo de gestão do seu potencial gerente é apropriado para o seu crescimento
+
+#### Que tipo de informações são compartilhadas com os funcionários? São compartilhadas informações sobre receita, lucros, despesas, faixas salariais, etc?
+
+Essa pergunta diferencia as empresas pelos seus níveis de transparência. Alguns candidatos podem achar isso importante, já que pode ser frustrante ter pouca informação e, portanto, pouco controle sobre sua remuneração e cronograma de promoção.
+
+#### A quem eu reportarei? Você pode me contar mais sobre o estilo de supervisão deles?
+
+Essa pergunta esclarece se o seu potencial gerente é alguém que é mais "delegador" ou tem o hábito de se envolver nos detalhes do seu trabalho. Isso poderia ter um grande impacto na sua experiência no trabalho.
+
+### Compreender melhor a dinâmica da equipe e a cultura
+
+#### "Qual é a estrutura da equipe e como essa função se encaixa nela?"
+
+Essa pergunta é útil, pois ajuda a criar uma imagem da função em contexto com a estrutura geral da equipe, o tamanho da equipe e, em linhas gerais, o que cada parte da equipe faz.
+
+#### "Como você descreveria o ambiente de trabalho aqui? O trabalho é geralmente mais colaborativo ou mais independente?"
+
+Essa pergunta indiretamente esclarece a cultura provável da equipe - as pessoas trabalham de forma isolada ou se comunicam frequentemente umas com as outras.
+
+#### "Você pode me dar alguns exemplos dos aspectos mais e menos desejáveis da cultura da equipe?"
+
+Outra pergunta aberta e útil que permite obter mais informações que podem não surgir em uma pergunta mais geral.
+
+#### "Com que frequência os membros da equipe se colocam à disposição fora do horário comercial?"
+
+Essa pergunta indiretamente esclarece a cultura da equipe em relação ao equilíbrio entre vida profissional e pessoal.
+
+## Rodadas com seu potencial gerente
+
+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?
+
+## 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?
+
+### 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?
+
+## Perguntas para evitar
+
+Aqui estão alguns exemplos do que não perguntar no final de uma entrevista:
+
+### Evite perguntar sobre salário e benefícios logo no início
+
+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?
+
+### 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?
diff --git a/packages/behavioral-interview-guidebook/contents/questions-to-ask/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/questions-to-ask/zh-CN.mdx
new file mode 100644
index 0000000000..de772ea83b
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/questions-to-ask/zh-CN.mdx
@@ -0,0 +1,164 @@
+---
+title: 面试结束时要问的问题
+description: 了解在前端面试结束时要问的最佳问题。
+seo_title: 在前端面试结束时要问的有用问题
+seo_description: 了解在前端面试结束时要问的最佳问题。由来自 Big Tech 的前面试官撰写。
+social_title: 面试结束时要问的问题 | GreatFrontEnd
+---
+
+为了获得一份工作，我们中的一些人可能会忘记，加入一个糟糕的团队可能比等待一个好机会更糟糕。面试实际上是候选人与实际在该公司工作的人交谈并了解更多关于那里实践的宝贵机会。在加入之前，您应该评估关于一份工作的几个关键方面：
+
+* 这项工作对您来说会很有趣吗？
+* 有职业发展的空间吗？
+* 您的队友/您的经理是否乐于合作并且容易共事？
+
+在面试结束时提出的好问题可以帮助候选人实现两个目标——留下好印象，并帮助候选人评估公司是否真的适合他们。
+
+在本文中，我们提供了一份您可能提出的有用问题的长列表，以实现此目的。问题按面试官/面试轮次以及目标进行组织。
+
+## 与人力资源/招聘人员的筛选轮次
+
+招聘人员通常不会直接在招聘您的团队中工作。因此，询问有关团队的日常或实际情况的问题可能不太有见地。但是，您仍然可以找到招聘人员会知道的信息，例如候选人评估标准或一般公司政策。
+
+### 了解招聘团队正在寻找的标准
+
+这些问题对于了解招聘团队正在优先考虑什么非常有用，他们可能已经事先与人力资源/招聘人员沟通，以便他们可以相应地帮助筛选候选人。
+
+#### “团队在理想的候选人中寻找哪些技能、特征或经验？”
+
+这些非常有用，因为您将能够查明团队在招聘中优先考虑的关键标准，这使您能够在下一轮与招聘团队一起具体展示所需的技能、特征或经验。
+
+这个问题非常有用，因为通常很难猜测面试官真正寻找的是什么。招聘通常是命中或错过，招聘经理通常特别兴奋地找到似乎完全符合其内部招聘标准的候选人。
+
+#### “该职位的预计开始日期是什么时候？”
+
+通常情况下，开始日期可能是在必须紧急填补职位时的关键标准。如果您有延迟的开始日期，您可以尽早与招聘人员核对，以避免浪费他们和您的时间。
+
+### 了解更多关于招聘团队的信息
+
+#### "在面试过程中，我是否有机会见到我的潜在经理或同事？"
+
+如果你要在面试过程中见到招聘团队，最好知道是哪几轮，如果可能的话，知道都有谁。这将帮助你准备相关问题或事先进行背景调查。
+
+#### "你能告诉我关于我将直接合作的团队的情况吗，包括我将向谁汇报以及团队的结构？"
+
+这个问题可能有用也可能没用，这取决于招聘人员对招聘团队的熟悉程度（有时根本不熟悉）。但是，你仍然可以对团队的结构或动态获得很好的见解。
+
+### 从公司的角度了解更多
+
+#### "公司目前关注的目标是什么，这个团队如何支持实现这些目标？"
+
+这个问题让你了解团队在公司中的重要性和地位，包括团队如何为公司的关键目标做出贡献。这可以让你对团队的关键交付成果和优先事项有关键的见解，并相应地了解你如何才能最好地为团队服务。在不景气的时候，较低优先级的团队也可能被解雇。
+
+#### "你能给我举例说明公司文化中最理想和最不理想的方面吗？"
+
+虽然人力资源/招聘可能不熟悉团队的日常工作，但他们很可能了解公司的政策和文化。这可以给你一些有用的见解，这些见解也可以延续到下一次面试。
+
+#### "员工们多久在工作时间之外的时间里出现"
+
+同样，我们想知道是否存在支持或反对加班的一般公司文化（不要太明显）。这对于某些人来说可能是一个决定性因素，应该尽快澄清。
+
+## 与招聘团队/你将加入的团队的轮次
+
+作为前端开发人员/Web开发人员，与工程团队的轮次通常意味着与招聘团队本身的轮次。
+
+在这些轮次中要问的问题对于阐明你实际加入团队时可能获得的体验至关重要（注意：本节侧重于向你潜在的团队成员（经理除外）提出的问题。向你潜在的经理提出的问题在下一节中）。
+
+### 检查工作的日常现实是否与你的目标一致
+
+#### "你能给我展示一下我将要参与的项目示例以及我将使用的技术吗？我将维护项目还是从头开始构建？"
+
+这个问题有助于阐明你将要做的确切工作类型，以及使用的一些技术。一般来说，有机会从头开始构建产品可能比做小的、增量功能提供更好的学习机会。
+
+使用的技术类型也可能是一个标准，因为学习使用现代技术栈（并拥有精通该领域的导师）可能对你的职业发展更有利。
+
+#### "你能描述一下你们团队中开发人员的典型一天或一周吗？" / "你能带我了解一个典型项目的过程吗"
+
+这个问题有助于澄清很多事情——开发人员可能需要执行的任务类型、你将与之合作的利益相关者，以及项目管理流程和生命周期。
+
+#### “你希望担任该职位的人面临哪些挑战？”
+
+这个问题有助于揭示代码库或工作流程中的一些潜在问题，这些问题可能对某些人来说是决定性的。它也可能揭示功能失调的团队或流程。
+
+#### “这个职位最忙和最艰难的时候是什么样子的？”
+
+问这个问题可以帮助揭示对该职位不合理的高期望或压力，从而阐明更多关于工作与生活的平衡，而无需明确询问。
+
+#### “我是否有机会进行拓展性任务，在那里我可以学习和使用新技能？”
+
+如果您是希望在该职位上提升技能或作品集的人，请务必提出这个问题，以了解您是否有合理的自主权来根据要求处理更复杂的项目。
+
+### 检查您潜在经理的管理风格是否适合您的成长
+
+#### 与员工共享什么类型的信息？是否共享收入、利润、支出、工资范围等？
+
+这个问题通过公司的透明度水平来区分公司。一些候选人可能会觉得这很重要，因为信息很少，因此对您的薪酬和晋升计划的控制也很少，这可能会令人沮丧。
+
+#### 我将向谁汇报？您能告诉我更多关于他们的监督方式吗？
+
+这个问题阐明了您潜在的经理是那种袖手旁观的人，还是倾向于深入研究您的工作细节。这可能会对您在工作中的体验产生很大影响。
+
+### 更多地了解团队动态和文化
+
+#### “团队结构是什么，这个角色如何融入团队？”
+
+这个问题很有用，因为它有助于您将角色与整体团队结构、团队规模以及团队每个部分大致做什么联系起来。
+
+#### “您如何描述这里的工作环境——工作通常是更协作还是更独立？”
+
+这个问题间接阐明了团队可能的文化——人们是孤军奋战还是经常相互交流。
+
+#### “您能给我举一些团队文化中最理想和最不理想方面的例子吗？”
+
+另一个开放式、有用的问题，可以让你获得更多可能不会从更一般的提问中浮现出来的见解。
+
+#### “团队成员在工作时间之外多久会让自己有空？”
+
+这个问题间接阐明了团队在工作与生活平衡方面的文化。
+
+## 与潜在经理的会面
+
+在这些环节中，最好借此机会了解你的经理的管理风格、绩效考核流程/标准，以及他/她对该职位的期望（这可以让你了解你在这份工作中的表现）。
+
+* 你能告诉我你提供的监督类型吗？
+* 回顾一下你以前见过做这项工作的人，哪些人做得好，哪些人做得非常好？
+* 你希望这个人能在最初的六个月和第一年完成什么？
+* 过去一年中，该组织的主要成就是什么？
+
+## 与团队之外的角色（可能不了解团队的具体运作）的会面
+
+### 要问创始人的问题
+
+* 公司目前关注的目标是什么，这个团队如何支持实现这些目标？
+* 你认为这家公司在未来几年会走向何方？
+* 整个公司目前的重点领域是什么？
+
+### 询问团队合作者的问题
+
+与你可能不会直接共事的人进行面试是很常见的。在这些情况下，最好撒下一张更大的网，询问有关一般公司政策或文化的问题。如果他们是密切的合作者，你仍然可以问他们关于你的团队的问题。
+
+* 您在工作中偶尔或经常会面临哪些挑战？
+* 您能告诉我您将要与之共事的团队吗？
+* 公司有哪些学习和职业发展机会？
+
+## 避免提出的问题
+
+以下是一些在面试结束时不要问的问题的例子：
+
+### 避免过早询问薪资和福利
+
+只有当团队已经热衷于聘用你时（即在流程结束时），才开始讨论薪资，除非他们询问你的薪资要求。
+
+* 起薪是多少？
+* 你能告诉我你的健康保险吗？
+* 你们的带薪休假政策是什么？
+* 如果我得到这份工作，我什么时候可以休假？
+* 你多久加一次薪？
+* 你多久发一次奖金？
+* 我能期待什么样的福利？
+
+### 避免询问应公开的信息
+
+* 这家公司是做什么的？
+* 公司的办公室在哪里？
+* 公司的首席执行官是谁？
diff --git a/packages/behavioral-interview-guidebook/contents/questions/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/questions/en-US.langnostic.json
new file mode 100644
index 0000000000..f39058a340
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/questions/en-US.langnostic.json
@@ -0,0 +1,44 @@
+{
+  "frontmatter": {
+    "title": "9b50d4e6",
+    "description": "12a0ec43",
+    "seo_title": "9b50d4e6",
+    "social_title": "9bd5fe4d",
+    "seo_description": "12a0ec43"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "ed63c694",
+        "d0eb453",
+        "24aa233a",
+        "a80ffc1",
+        "13725e6a",
+        "ee22f1f9",
+        "46b091bd",
+        "eed8d339",
+        "5827200e",
+        "c575c035",
+        "95356240",
+        "3d9fac2e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "ed63c694",
+        "d0eb453",
+        "24aa233a",
+        "a80ffc1",
+        "13725e6a",
+        "ee22f1f9",
+        "46b091bd",
+        "eed8d339",
+        "5827200e",
+        "c575c035",
+        "95356240",
+        "3d9fac2e"
+      ]
+    }
+  }
+}
diff --git a/packages/behavioral-interview-guidebook/contents/questions/en-US.mdx b/packages/behavioral-interview-guidebook/contents/questions/en-US.mdx
new file mode 100644
index 0000000000..c515c52000
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/questions/en-US.mdx
@@ -0,0 +1,59 @@
+---
+title: Important Behavioral Interview Questions to Prepare for
+description: Efficiently prepare for your behavioral interviews by tackling the most commonly asked questions first
+seo_title: Important Behavioral Interview Questions to Prepare for
+social_title: Important Behavioral Interview Questions | GreatFrontEnd
+seo_description: Efficiently prepare for your behavioral interviews by tackling the most commonly asked questions first
+---
+
+In this article, we will cover the top questions (ordered from highest frequency) that candidates should practice with before their interviews.
+
+As mentioned in the [behavioral interview preparation overview](/behavioral-interview-guidebook/introduction), most behavioral interview questions can be categorized into 8 main themes for efficient preparation. We recommend candidates to prepare using this strategy and then refer to the list below for practice.
+
+## Top 16 most common questions
+
+1. Tell me about yourself.
+1. Walk me through your resume.
+1. Why have you applied for this role and team?
+1. Do you have any questions for me? (end of interview)
+1. Can you tell me about a time you improved upon your work upon receiving criticism or feedback?
+1. Can you describe a past project where you had to work with a difficult stakeholder or teammate and how you dealt with it?
+1. Can you describe a time you creatively solved an engineering problem or achieved meaningful metric improvement?
+1. Can you describe a time when you had to make an important engineering decision and how you decided between tradeoffs?
+1. Can you give an example of a time when you had to work on a team project and had to compromise with others to reach a solution?
+1. What do you think is your greatest area for improvement?
+1. Describe a time you failed and had to alter course and adopt a new approach. How did you know change was necessary?
+1. Can you describe a time when you had to work with a tight timeline but was not given a clear direction on how to proceed?
+1. Can you describe a time when you had to adapt to changing priorities or requirements?
+1. Tell me about a time you learnt a new skill outside of work and applied it to your work.
+1. Tell me about a time you learnt a new skill set after observing others leveraging it to great success
+1. Can you describe a time when you had to effectively communicate technical information to a non-technical audience and how you approached it?
+
+## Additional questions for leaders (Tech leads or Engineering Managers)
+
+### Team management and leadership
+
+17. How do you approach the process of setting and achieving goals for your team?
+1. Can you tell me about a time when you had to work with a tight budget or limited resources to achieve an objective?
+1. How do you approach collaboration and communication with your team and stakeholders?
+1. Describe a time when you had to handle an underperforming team member.
+1. Can you describe a time when you had to adjust your management style to fit the needs of your team?
+
+### Cross functional collaboration
+
+22. How do you approach the process of gathering and incorporating user or client feedback into your work?
+1. Can you give an example of a time when you had to balance business needs with engineering complexity?
+
+## Additional questions for practice
+
+We've grouped the most common behavioral questions into 8 major themes. Check out additional practice questions while studying them:
+
+- ["Tell me about yourself..."](/behavioral-interview-guidebook/self-introduction)
+- "Walk me through your resume..."
+- ["Why join this team or company?"](/behavioral-interview-guidebook/why-work-here)
+- "Tell me about a time when..." (categorized into below themes)
+  - [Driving results and problem solving](/behavioral-interview-guidebook/problem-solving)
+  - [Collaboration](/behavioral-interview-guidebook/collaboration)
+  - [Growth mindset](/behavioral-interview-guidebook/growth-mindset)
+  - Adaptability and flexibility
+- ["Do you have any questions for me?"](/behavioral-interview-guidebook/questions-to-ask)
diff --git a/packages/behavioral-interview-guidebook/contents/questions/pt-BR.mdx b/packages/behavioral-interview-guidebook/contents/questions/pt-BR.mdx
new file mode 100644
index 0000000000..07d00565e5
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/questions/pt-BR.mdx
@@ -0,0 +1,56 @@
+---
+title: As Perguntas de Entrevista Comportamental Mais Importantes para se Preparar
+description: '"Principais perguntas de entrevista comportamental para praticar para desenvolvedores front-end, desenvolvedores web e engenheiros de software.". Includes additional questions for experienced level engineers.'
+---
+
+Neste artigo, abordaremos as principais perguntas (ordenadas por frequência) que os candidatos devem praticar antes de suas entrevistas.
+
+Como mencionado na [visão geral da preparação para entrevistas comportamentais](/guia-entrevistas-comportamentais/), a maioria das perguntas de entrevistas comportamentais pode ser categorizada em 8 temas principais para uma preparação eficiente. Recomendamos que os candidatos se preparem usando esta estratégia e, em seguida, consultem a lista abaixo para praticar.
+
+## As 16 perguntas mais comuns
+
+1.  Me fale sobre você.
+2.  Me conte sobre sua trajetória profissional.
+3.  Por que você se candidatou a esta vaga e equipe?
+4.  Você tem alguma pergunta para mim? (Fim da entrevista)
+5.  Você pode me contar sobre uma vez em que você melhorou seu trabalho após receber críticas ou feedback?
+6.  Você pode descrever um projeto anterior em que você teve que trabalhar com um stakeholder ou colega difícil e como lidou com isso?
+7.  Você pode descrever uma vez em que você resolveu criativamente um problema de engenharia ou alcançou uma melhoria significativa em métricas?
+8.  Você pode descrever uma ocasião em que você teve que tomar uma decisão importante de engenharia e como você decidiu entre as compensações (tradeoffs)?
+9.  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?
+10. Qual você acredita ser a sua maior área para melhoria?
+11. Descreva uma vez em que você falhou e teve que alterar o curso e adotar uma nova abordagem. Como você soube que a mudança era necessária?
+12. Você pode descrever um momento em que teve que trabalhar com um prazo apertado, mas não recebeu uma direção clara sobre como proceder?
+13. Você pode descrever um momento em que teve que se adaptar a prioridades ou requisitos em constante mudança?
+14. Conte-me sobre um momento em que você aprendeu uma nova habilidade fora do trabalho e a aplicou em seu trabalho.
+15. Fale-me de uma vez em que você aprendeu um novo conjunto de habilidades depois de observar outras pessoas usá-lo com grande sucesso
+16. Você pode descrever uma vez em que teve que comunicar eficazmente informações técnicas para um público não técnico e como abordou essa situação?
+
+## Perguntas adicionais para Líderes (Líderes de Tecnologia ou Gerentes de Engenharia)
+
+### Gestão de Equipe e Liderança
+
+17. Como você aborda o processo de estabelecimento e consecução de metas para sua equipe?
+18. Você pode me contar sobre uma vez em que teve que trabalhar com um orçamento apertado ou recursos limitados para alcançar um objetivo?
+19. Como você aborda a colaboração e a comunicação com sua equipe e partes interessadas?
+20. Descreva um momento em que você teve que lidar com um membro da equipe que estava com desempenho abaixo do esperado.
+21. Você pode descrever um momento em que teve que ajustar seu estilo de gestão para atender às necessidades de sua equipe?
+
+### Colaboração entre Equipes de Diferentes Áreas
+
+22. Como você aborda o processo de coletar e incorporar o feedback de usuários ou clientes em seu trabalho?
+23. Você pode dar um exemplo de uma vez em que teve que equilibrar as necessidades do negócio com a complexidade da engenharia?
+
+## Perguntas adicionais para prática
+
+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
diff --git a/packages/behavioral-interview-guidebook/contents/questions/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/questions/zh-CN.mdx
new file mode 100644
index 0000000000..3984a18c51
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/questions/zh-CN.mdx
@@ -0,0 +1,59 @@
+---
+title: 准备面试的重要行为面试问题
+description: 通过先解决最常问的问题，为你的行为面试做好充分准备
+seo_title: 准备面试的重要行为面试问题
+social_title: 重要的行为面试问题 | GreatFrontEnd
+seo_description: 通过先解决最常问的问题，为你的行为面试做好充分准备
+---
+
+在本文中，我们将介绍候选人在面试前应该练习的常见问题（按出现频率排序）。
+
+正如在[行为面试准备概述](/behavioral-interview-guidebook/introduction)中提到的，大多数行为面试问题可以分为8个主要主题，以便有效准备。我们建议候选人使用此策略进行准备，然后参考下面的列表进行练习。
+
+## 前 16 个最常见的问题
+
+1. 介绍一下你自己。
+2. 浏览一下你的简历。
+3. 你为什么申请这个职位和团队？
+4. 你有什么问题要问我吗？（面试结束）
+5. 你能告诉我你收到批评或反馈后改进工作的一次经历吗？
+6. 你能描述一个你必须与难相处的利益相关者或队友合作的过去的项目，以及你是如何处理的吗？
+7. 你能描述一个你创造性地解决了工程问题或实现了有意义的指标改进的经历吗？
+8. 你能描述一个你必须做出重要的工程决策以及你如何在权衡利弊之间做出决定的经历吗？
+9. 你能举一个你必须在团队项目中工作并且必须与他人妥协以达成解决方案的例子吗？
+10. 你认为你最大的改进领域是什么？
+11. 描述一个你失败并不得不改变方向并采用新方法的时间。你如何知道改变是必要的？
+12. 你能描述一个你必须在紧张的时间表内工作但没有得到明确的如何进行指示的经历吗？
+13. 你能描述一个你必须适应不断变化的优先级或要求的经历吗？
+14. 告诉我你学习了工作之外的新技能并将其应用于你的工作的一次经历。
+15. 告诉我你观察到其他人利用它取得巨大成功后学习了一套新技能的一次经历
+16. 你能描述一个你必须有效地向非技术受众传达技术信息以及你如何处理它的经历吗？
+
+## 针对领导者的附加问题（技术负责人或工程经理）
+
+### 团队管理和领导力
+
+17. 你如何处理为你的团队设定和实现目标的过程？
+18. 你能告诉我你必须在紧张的预算或有限的资源下实现目标的一次经历吗？
+19. 你如何处理与你的团队和利益相关者的协作和沟通？
+20. 描述一个你必须处理表现不佳的团队成员的经历。
+21. 你能描述一个你必须调整你的管理风格以适应你的团队需求的经历吗？
+
+### 跨职能协作
+
+22. 你如何处理收集用户或客户反馈并将其纳入你的工作流程？
+23. 你能举一个你必须平衡业务需求和工程复杂性的一次经历吗？
+
+## 额外的练习问题
+
+我们将最常见的行为问题归纳为 8 个主要主题。在学习它们的同时，查看其他练习题：
+
+* ["介绍一下你自己..."](/behavioral-interview-guidebook/self-introduction)
+* "请介绍一下你的简历..."
+* ["为什么加入这个团队或公司？"](/behavioral-interview-guidebook/why-work-here)
+* "告诉我一个关于...的经历"（分为以下主题）
+  * [推动结果和解决问题](/behavioral-interview-guidebook/problem-solving)
+  * [协作](/behavioral-interview-guidebook/collaboration)
+  * [成长心态](/behavioral-interview-guidebook/growth-mindset)
+  * 适应性和灵活性
+* ["你有什么要问我的吗？"](/behavioral-interview-guidebook/questions-to-ask)
diff --git a/packages/behavioral-interview-guidebook/contents/self-introduction/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/self-introduction/en-US.langnostic.json
new file mode 100644
index 0000000000..2fafb00295
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/self-introduction/en-US.langnostic.json
@@ -0,0 +1,104 @@
+{
+  "frontmatter": {
+    "title": "115c2b1d",
+    "description": "762b980b",
+    "seo_title": "8e5a4529",
+    "seo_description": "cc792019",
+    "social_title": "abfb9715"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "aac46f7a",
+        "a50d1fd4",
+        "82c95b25",
+        "f7f88325",
+        "592260e0",
+        "b300ca",
+        "55a681ab",
+        "4c8d2b2f",
+        "d9f9c801",
+        "b0f6b469",
+        "518f16ac",
+        "61a96bc0",
+        "5f7d613c",
+        "c5f1bc22",
+        "1f0e09d4",
+        "cb9aeb4d",
+        "7c5ec3df",
+        "7534ac72",
+        "ebc3664d",
+        "86f5f880",
+        "c93680ca",
+        "5292a1",
+        "376afac1",
+        "c2a4a55d",
+        "e39a5f55",
+        "e6276c98",
+        "7edb39e3",
+        "4056d06",
+        "4e8bca16",
+        "1a05705e",
+        "58dcf3e8",
+        "bd43d29b",
+        "1b9a4527",
+        "e8acaab5",
+        "d8563046",
+        "53f86e8f",
+        "a6d801f3",
+        "8b6c02d6",
+        "1a8f1cd",
+        "5ffa7908",
+        "12828ca",
+        "6e936a03"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "aac46f7a",
+        "a50d1fd4",
+        "82c95b25",
+        "f7f88325",
+        "592260e0",
+        "b300ca",
+        "55a681ab",
+        "4c8d2b2f",
+        "d9f9c801",
+        "b0f6b469",
+        "518f16ac",
+        "61a96bc0",
+        "5f7d613c",
+        "c5f1bc22",
+        "1f0e09d4",
+        "cb9aeb4d",
+        "7c5ec3df",
+        "7534ac72",
+        "ebc3664d",
+        "86f5f880",
+        "c93680ca",
+        "5292a1",
+        "376afac1",
+        "c2a4a55d",
+        "e39a5f55",
+        "e6276c98",
+        "7edb39e3",
+        "4056d06",
+        "4e8bca16",
+        "1a05705e",
+        "58dcf3e8",
+        "bd43d29b",
+        "1b9a4527",
+        "e8acaab5",
+        "d8563046",
+        "53f86e8f",
+        "a6d801f3",
+        "8b6c02d6",
+        "1a8f1cd",
+        "5ffa7908",
+        "12828ca",
+        "6e936a03"
+      ]
+    }
+  }
+}
diff --git a/packages/behavioral-interview-guidebook/contents/self-introduction/en-US.mdx b/packages/behavioral-interview-guidebook/contents/self-introduction/en-US.mdx
new file mode 100644
index 0000000000..92224779b6
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/self-introduction/en-US.mdx
@@ -0,0 +1,119 @@
+---
+title: Answering "Tell Me About Yourself"
+description: A guide to answering self introduction questions effectively in different interview contexts, for front end engineers.
+seo_title: How to Answer "Tell Me About Yourself" | Behavioral Interviews
+seo_description: A guide to answering self introduction questions effectively in different interview contexts, for front end engineers. Written by ex-interviewers at Big Tech.
+social_title: Answering "Tell me about yourself" | GreatFrontEnd
+---
+
+The self introduction is one of the things you can always expect to encounter in an interview, regardless of interview format. Hence the return on investment of preparing for it is rather high. Most of the time, your self introduction should be short and sweet, delivering a good impression in the fewest amount of words.
+
+In this article you will find:
+
+1. Recommended preparation for different interview settings
+1. The 1-min pitch formula
+1. Portfolio or case study showcase
+1. Examples of good self introductions
+1. Tips and stories from hiring managers
+
+## Recommended Preparation
+
+In essence, you should always prepare a self introduction that is **under 1 min in almost all cases**.
+
+Prior to the interview, it is best to understand more about the evaluation criteria for the round from a recruiter or hiring manager — specifically if you will be evaluated on behavioral/fit aspects or purely on technical criteria. In big tech companies, coding rounds may totally exclude behavioral related criteria, hence your self introduction will most likely just serve as a "warm-up" to the main interview.
+
+However, in behavioral interviews or technical interviews in a startup or a company which prioritizes practical experience over LeetCode-style interviews, you may want to extend your self introduction to a **quick portfolio showcase**, or allude to the fact that you have a portfolio of your projects that they could view after the interview or allocate around 5 min at the end of the interview to run through.
+
+However, do note that in whichever case, if you are doing coding interviews with fixed format in the round, you should keep your self introduction short to ensure that you have **more time on the actual coding test**. Any extra time you take on your self introduction will be taken away from the time you have to answer technical questions.
+
+| Interview format | Company type | Duration | Content |
+| --- | --- | --- | --- |
+| Coding or technical interviews | Big tech with fixed evaluation criteria | < 1 min | 1 min pitch |
+| Coding or technical interviews | Others which may emphasize less on standard LeetCode-style coding tests | ~1 min | 1 min pitch + allude to portfolio showcase |
+| Behavioral or culture fit interviews | Any | ~1 min | 1 min pitch + allude to portfolio showcase |
+
+To tackle all the possible cases, you should prepare a 1-min pitch and a project portfolio (optional but recommended).
+
+## The 1-min pitch
+
+What to cover within the minute you spend introducing yourself.
+
+### The big picture
+
+Most of the time, pitches will cover these 4 items:
+
+1. Breadth and depth of job experience
+1. Top achievements
+1. If less than 5 years of working experience, educational background
+1. Motivation for applying for role
+
+When developing your pitch, keep the objective in mind — you want to leave a **good first impression** as a potential ideal candidate for the role. To do this, you should come off as confident and likable, on top of demonstrating key requirements of the role. Think about what you would look out for if you were to hire a candidate for this role.
+
+Do not attempt to go too deep — focus on covering the main points and enunciating them confidently and smoothly. As software engineers, we prove our mettle through projects and code. Talking too much too early may come off as over-eager and words alone don't hold much value.
+
+In essence, to hiring managers, the self introduction serves to answer these questions about the candidate for them:
+
+1. Is this candidate passionate about front end / software engineering?
+1. Can they describe things in a clear and concise way?
+1. What kind of person are they? Confident or arrogant?
+1. Would I want to work with this person? Do they seem coachable?
+
+### Example pitch points for front end / web developers
+
+On top of role-specific requirements such as team-specific frameworks and technologies, front end hiring managers typically focus on the following **4 criteria**:
+
+| Criteria | Example |
+| --- | --- |
+| Understanding of front end fundamentals: HTML, CSS, JavaScript and related areas | "I have been building front end applications for a few years now and also contributed to popular open source projects like Lodash and jQuery." <br/><br/>"I was a Teaching Assistant for my college's web development course and mentored students working on projects which involved building full stack web applications." |
+| Breadth and depth of front end technologies the candidate knows | "I used React, Tailwind, Next.js, Prisma and MySQL to build a Twitter clone as part of my software engineering team project." |
+| Initiative to keep up with modern front end technologies | "I learnt Astro and rebuilt my personal blog using it because Astro is great for building content-driven websites." |
+| Relevant front end projects that the candidate has worked on, complexity of those projects | "In my spare time I built a crypto price tracking app in React to learn how to build data visualization-heavy client apps and also solve a personal pain point of tracking my portfolio." |
+
+Refer below for examples of good self introductions.
+
+## Portfolio showcase
+
+If you were to extend into a showcase of your portfolio, you would want to ensure that your portfolio is minimal and easy to run through during the interview.
+
+The description for each project should encompass:
+
+- Purpose of project – What it does for users
+- Frameworks/technologies used
+- Technical complexity involved
+- Results, impact (optional)
+
+## Examples of good self introductions
+
+### Experienced engineers
+
+> I worked at Airbnb as a Front End Engineer for 6 years and was the lead developer on the project to redesign Airbnb's booking experience. As part of my work, I contributed to Airbnb's primary design system and was the person who build several UI components like the image carousel, ratings widget, and improving on existing components. I also had experience contributing to Airbnb's open source front end projects like Enzyme and react-dates.
+>
+> In my spare time, I enjoy learning new front end technologies and catching up with the ever-evolving front end ecosystem. Most recently I've been exploring new JavaScript frameworks like Astro and SolidJS to expose myself to new ways of building user interfaces and improve my skills as a Front End Engineer.
+
+### Fresh graduates / College students
+
+> I graduated from Northeastern University in 2020 with a degree in Computer Science. My interests are in Front End development and I enjoy building delightful products on the web because of the freedom to develop whatever comes to mind and the fast feedback loop.
+>
+> I took a web development course while in school which taught me the fundamentals of full stack development. With these skills, I managed to secure software engineering internships at companies like Uber and Palantir. At Uber, I built an internal tool to help developers manage their test rider and driver accounts using React, Redux, and GraphQL.
+>
+> I'm interested in the Front End Engineer role at Google because I use Google products on a daily basis and am very impressed by their well thought out product experience. It'd be a dream come true to work on such products that impact the lives of billions.
+
+## Hear it from the hiring managers
+
+Here are some anecdotes from interviewers wnd recruiters who participate in the hiring process for their tech companies.
+
+> Typically I use the self introduction as an easy warm up to kick start the interview. No technical skills required, but it tests communication and ability to describe things in a clear and concise way.
+
+— Engineering Manager, LinkedIn
+
+> Candidates shouldn't ramble on too deeply when introducing themselves as it was never meant to be a deep-dive, just a quick overview.
+
+— Talent Acquisition, Coinbase
+
+> Could be a good idea to finish with what tech stacks or projects you've worked with, and what you hope to work on in the future/where you want to take your career.
+
+— Engineering Manager, Indeed
+
+> Your interviewer is also a person. The foremost thing on an interviewer's mind is whether they want this person to join their team — it's not just about the skills. We want to know who you are, then what you are capable of. Of course, adding personal flavor with relevance to the job is best.
+
+— Senior Engineer, Dropbox.
diff --git a/packages/behavioral-interview-guidebook/contents/self-introduction/pt-BR.mdx b/packages/behavioral-interview-guidebook/contents/self-introduction/pt-BR.mdx
new file mode 100644
index 0000000000..1fcee8d253
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/self-introduction/pt-BR.mdx
@@ -0,0 +1,135 @@
+---
+title: Dicas para causar uma boa primeira impressão em sua apresentação
+description: Como estruturar eficazmente sua autoapresentação em entrevistas em diferentes contextos, para desenvolvedores front-end, desenvolvedores web ou engenheiros de software. Faça referência a exemplos de boas autoapresentações.
+---
+
+A autoapresentação é uma das coisas que você sempre pode esperar encontrar em uma entrevista, independentemente do formato da entrevista. Portanto, o retorno sobre o investimento ao se preparar para isso é bastante alto. Na maioria das vezes, sua autoapresentação deve ser curta e objetiva, deixando uma boa impressão com o menor número de palavras possível.
+
+Neste artigo, você encontrará:
+
+1.  Preparação recomendada para diferentes configurações de entrevista
+2.  A fórmula do discurso de 1 minuto
+3.  Apresentação de portfólio ou estudos de caso
+4.  Exemplos de boas apresentações pessoais
+5.  Dicas e histórias de gerentes de contratação
+
+## Preparação Recomendada
+
+Em essência, você sempre deve preparar uma autoapresentação que dure **menos de 1 minuto na maioria dos casos**.
+
+Antes da entrevista, é melhor entender mais sobre os critérios de avaliação da rodada com um recrutador ou gerente de contratação - especificamente se você será avaliado com base em aspectos comportamentais/adequação ou puramente em critérios técnicos. Nas grandes empresas de tecnologia, as rodadas de codificação podem excluir totalmente critérios relacionados ao comportamento, portanto, sua autoapresentação provavelmente servirá apenas como um "aquecimento" para a entrevista principal.
+
+No entanto, em entrevistas comportamentais ou técnicas em uma startup ou em uma empresa que prioriza a experiência prática em vez de entrevistas no estilo LeetCode, você pode querer estender sua autoapresentação para uma **apresentação rápida do seu portfólio**, ou mencionar que você tem um portfólio de seus projetos que eles poderiam ver após a entrevista ou alocar cerca de 5 minutos no final da entrevista para revisar.
+
+No entanto, observe que em qualquer caso, se você estiver fazendo entrevistas de codificação com um formato fixo na rodada, deve manter sua autoapresentação curta para garantir que tenha **mais tempo no teste de codificação real**. Qualquer tempo extra que você gastar em sua apresentação pessoal será retirado do tempo que você tem para responder a perguntas técnicas.
+
+<table>
+  <tbody>
+    <tr>
+      <th>Formato de Entrevista</th>
+      <th>Tipo de Empresa</th>
+      <th>Duração</th>
+      <th>Conteúdo</th>
+    </tr>
+    <tr>
+      <td rowSpan={2}>Entrevistas de Codificação ou Técnicas</td>
+      <td>Grandes empresas de tecnologia com critérios de avaliação fixos</td>
+      <td>< 1 min</td>
+      <td>Discurso de 1 minuto</td>
+    </tr>
+    <tr>
+      <td className="px-2">Outras que podem enfatizar menos nos testes de codificação no estilo LeetCode</td>
+      <td>~1 min</td>
+      <td>Discurso de 1 minuto + alusão à apresentação do portfólio</td>
+    </tr>
+    <tr>
+      <td>Entrevistas Comportamentais ou de Adequação Cultural</td>
+      <td>Qualquer tipo de empresa</td>
+      <td>~1 min</td>
+      <td>Discurso de 1 minuto + alusão à apresentação do portfólio</td>
+    </tr>
+  </tbody>
+</table>
+
+To tackle all the possible cases, you should prepare a 1-min pitch and a project portfolio (recommended but optional).
+
+## O Discurso de 1 Minuto
+
+### A Visão Geral
+
+Na maioria das vezes, os pitches cobrirão esses 4 itens:
+
+1.  Amplitude e profundidade da experiência de trabalho
+2.  Principais conquistas
+3.  Se tiver menos de 5 anos de experiência de trabalho, antecedentes educacionais
+4.  Motivação para candidatar-se ao cargo
+
+Ao desenvolver sua apresentação, mantenha o objetivo em mente - você deseja deixar uma **boa primeira impressão** como um potencial candidato ideal para o cargo. Para fazer isso, você deve parecer confiante, agradável e também demonstrar as principais exigências do cargo. Pense no que você procuraria se estivesse contratando um candidato para este cargo?
+
+Não tente aprofundar muito - concentre-se em cobrir os pontos principais e enunciá-los com confiança e fluidez. Como engenheiros de software, demonstramos nossa competência por meio de projetos e código. Falar demais muito cedo pode parecer excessivamente ansioso, e apenas palavras não têm muito valor.
+
+Em essência, para os gerentes de contratação, a autointrodução serve para responder a estas perguntas sobre o candidato para eles:
+
+1.  Este candidato é apaixonado por front-end / engenharia de software?
+2.  Eles conseguem descrever as coisas de forma clara e concisa?
+3.  Que tipo de pessoa eles são? Confiante ou arrogante?
+4.  Eu gostaria de trabalhar com essa pessoa? Parecem receptivos a orientações?
+
+### Exemplos de pontos para apresentação de desenvolvedores front-end/web
+
+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." |
+
+Consulte abaixo exemplos de boas apresentações pessoais.
+
+## Exibição de portfólio
+
+Se você deseja expandir para uma apresentação de seu portfólio, é importante garantir que ele seja minimalista e fácil de percorrer durante a entrevista
+
+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
+
+Consulte este artigo para obter uma compreensão mais detalhada de como conduzir uma apresentação de portfólio (em breve).
+
+## Exemplos de Boas Apresentações Pessoais
+
+### Para Engenheiros Experientes
+
+> Trabalhei na Airbnb como Engenheiro Front-End por 6 anos e fui o desenvolvedor líder no projeto de redesenhar a experiência de reserva da Airbnb. Como parte do meu trabalho, contribuí para o principal sistema de design da Airbnb, construindo vários componentes de interface do usuário, como o carrossel, widget de avaliações e refatorando componentes existentes. Também tive experiência contribuindo para projetos de código aberto da Airbnb no front-end, como o Enzyme e o react-dates.
+>
+> No meu tempo livre, gosto de aprender novas tecnologias de front-end e acompanhar o ecossistema em constante evolução do front-end. Recentemente, tenho explorado novos frameworks JavaScript, como o Astro e o SolidJS, para me expor a novas maneiras de construir interfaces de usuário e aprimorar minhas habilidades como Engenheiro Front-End.
+
+### Para recém-formados / estudantes universitários
+
+> Me formei na Universidade Northeastern em 2020 com um diploma em Ciência da Computação. Meus interesses estão na área de desenvolvimento Front-End, e eu gosto de criar produtos agradáveis na web devido à liberdade de desenvolver o que vier à mente e ao rápido ciclo de feedback.
+>
+> Eu fiz um curso de desenvolvimento web enquanto estava na faculdade, o qual me ensinou os fundamentos do desenvolvimento full stack. Com essas habilidades, consegui estágios em engenharia de software em empresas como Uber e Palantir. No Uber, desenvolvi uma ferramenta interna para ajudar os desenvolvedores a gerenciar suas contas de teste de passageiro e motorista usando React, Redux e GraphQL.
+>
+> Estou interessado na função de Engenheiro Front-End no Google porque uso os produtos do Google diariamente e fico muito impressionado com a experiência do usuário bem pensada deles. Seria um sonho realizado trabalhar em produtos que impactam a vida de bilhões de pessoas.
+
+## Ouça dos Gerentes de Contratação
+
+> Normalmente, uso a autoapresentação como um aquecimento fácil para iniciar a entrevista. Não são necessárias habilidades técnicas, mas testa a comunicação e a capacidade de descrever as coisas de forma clara e concisa.
+
+— Gerente de Engenharia, Linkedin.
+
+> Os candidatos não devem se aprofundar demais ao se apresentarem, pois a autoapresentação nunca foi destinada a ser uma análise detalhada, apenas uma visão geral rápida.
+
+— Aquisição de talento, Coinbase.
+
+> Pode ser uma boa ideia terminar mencionando as pilhas de tecnologia ou projetos com os quais você trabalhou e o que espera trabalhar no futuro/qual direção deseja seguir em sua carreira.
+
+— Gestor de Engenharia, Indeed.
+
+> Seu entrevistador também é uma pessoa. A coisa mais importante na mente do entrevistador é se eles querem que essa pessoa faça parte de sua equipe — não se resume apenas às habilidades. Queremos saber quem você é e, em seguida, o que você é capaz de fazer. Claro, adicionar um toque pessoal com relevância para o trabalho é o melhor.
+
+— Engenheiro Sênior, Dropbox.
diff --git a/packages/behavioral-interview-guidebook/contents/self-introduction/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/self-introduction/zh-CN.mdx
new file mode 100644
index 0000000000..a2ed1211e4
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/self-introduction/zh-CN.mdx
@@ -0,0 +1,119 @@
+---
+title: 回答“介绍一下你自己”
+description: 一份关于如何在不同面试环境中有效回答自我介绍问题的指南，面向前端工程师。
+seo_title: 如何回答“介绍一下你自己” | 行为面试
+seo_description: 一份关于如何在不同面试环境中有效回答自我介绍问题的指南，面向前端工程师。由来自 Big Tech 的前面试官撰写。
+social_title: 回答“介绍一下你自己” | GreatFrontEnd
+---
+
+无论面试形式如何，自我介绍都是你总能遇到的事情之一。因此，为此做准备的投资回报率相当高。大多数时候，你的自我介绍应该简短扼要，用最少的字数传递良好的印象。
+
+在本文中，你将找到：
+
+1. 针对不同面试场景的推荐准备
+2. 1 分钟推介公式
+3. 投资组合或案例研究展示
+4. 好的自我介绍示例
+5. 来自招聘经理的提示和故事
+
+## 推荐准备
+
+本质上，你应始终准备一个**在几乎所有情况下都不到 1 分钟**的自我介绍。
+
+在面试之前，最好从招聘人员或招聘经理那里了解更多关于该轮的评估标准——特别是你是否会根据行为/适合度方面或纯粹的技术标准进行评估。在大型科技公司中，编码轮次可能完全排除与行为相关的标准，因此你的自我介绍很可能只是作为主要面试的“热身”。
+
+但是，在行为面试或初创公司或更看重实践经验而非 LeetCode 风格面试的公司的技术面试中，你可能希望将你的自我介绍扩展到**快速展示你的作品集**，或者暗示你有一个项目组合，他们可以在面试后查看，或者在面试结束时分配大约 5 分钟的时间来浏览。
+
+但是，请注意，在任何情况下，如果你在该轮次中进行固定格式的编码面试，你应该保持你的自我介绍简短，以确保你有**更多时间进行实际的编码测试**。你在自我介绍上花费的任何额外时间都将从你回答技术问题的时间中扣除。
+
+| 面试形式 | 公司类型 | 持续时间 | 内容 |
+| --- | --- | --- | --- |
+| 编码或技术面试 | 具有固定评估标准的大型科技公司 | \< 1 分钟 | 1 分钟演讲 |
+| 编码或技术面试 | 其他可能不太强调标准 LeetCode 风格的编码测试 | ~1 分钟 | 1 分钟演讲 + 暗示作品集展示 |
+| 行为或文化适应性面试 | 任何 | ~1 分钟 | 1 分钟演讲 + 暗示作品集展示 |
+
+为了应对所有可能的情况，你应该准备一份 1 分钟的演讲和一个项目组合（可选，但推荐）。
+
+## 1 分钟演讲
+
+在一分钟内介绍自己的内容。
+
+### 整体情况
+
+大多数时候，推介将涵盖这 4 个项目：
+
+1. 工作经验的广度和深度
+2. 顶级成就
+3. 如果工作经验少于 5 年，则为教育背景
+4. 申请该职位的动机
+
+在准备你的演讲时，请记住目标——你想给潜在的理想角色留下**良好的第一印象**。为此，你应该表现得自信和讨人喜欢，同时展示该角色的关键要求。想想如果你要为这个角色招聘候选人，你会关注什么。
+
+不要试图深入探讨——专注于涵盖要点，并自信流畅地阐述它们。作为软件工程师，我们通过项目和代码来证明我们的实力。过早地谈论过多可能会显得过于急切，而仅仅是言语本身并没有多大价值。
+
+从本质上讲，对于招聘经理来说，自我介绍是为了回答他们关于候选人的这些问题：
+
+1. 这个候选人对前端/软件工程充满热情吗？
+2. 他们能以清晰简洁的方式描述事物吗？
+3. 他们是什么样的人？自信还是自负？
+4. 我想和这个人一起工作吗？他们看起来容易被指导吗？
+
+### 前端/Web开发人员的示例推介要点
+
+除了特定于角色的要求（例如特定于团队的框架和技术）之外，前端招聘经理通常关注以下 **4 个标准**：
+
+| 标准 | 示例 |
+| --- | --- |
+| 对前端基础知识的理解：HTML、CSS、JavaScript 和相关领域 | “我已经构建前端应用程序几年了，并且还为流行的开源项目（如 Lodash 和 jQuery）做出了贡献。” <br /><br />“我曾担任我大学的网络开发课程的助教，并指导学生进行涉及构建全栈 Web 应用程序的项目。” |
+| 候选人掌握的前端技术的广度和深度 | “我使用 React、Tailwind、Next.js、Prisma 和 MySQL 构建了一个 Twitter 克隆，作为我的软件工程团队项目的一部分。” |
+| 积极跟进现代前端技术 | “我学习了 Astro 并使用它重建了我的个人博客，因为 Astro 非常适合构建以内容为导向的网站。” |
+| 候选人参与的与前端相关的项目、这些项目的复杂性 | “在我的空闲时间，我用 React 构建了一个加密货币价格跟踪应用程序，以学习如何构建数据可视化密集型客户端应用程序，并解决跟踪我的投资组合的个人痛点。” |
+
+请参考以下示例，了解良好的自我介绍。
+
+## 作品集展示
+
+如果你要扩展到展示你的作品集，你希望确保你的作品集是最小的，并且在面试期间易于浏览。
+
+每个项目的描述应包括：
+
+* 项目目的 – 它为用户做什么
+* 使用的框架/技术
+* 涉及的技术复杂性
+* 结果、影响（可选）
+
+## 良好的自我介绍示例
+
+### 经验丰富的工程师
+
+> 我在 Airbnb 担任前端工程师 6 年，并且是重新设计 Airbnb 预订体验项目的首席开发人员。作为我工作的一部分，我为 Airbnb 的主要设计系统做出了贡献，并且是构建了多个 UI 组件（如图像轮播、评级小部件）并改进现有组件的人。我也有为 Airbnb 的开源前端项目（如 Enzyme 和 react-dates）做出贡献的经验。
+>
+> 在我的空闲时间，我喜欢学习新的前端技术，并赶上不断发展的前端生态系统。最近，我一直在探索新的 JavaScript 框架，如 Astro 和 SolidJS，以让自己接触到构建用户界面的新方法，并提高我作为前端工程师的技能。
+
+### 应届毕业生/大学生
+
+> 我于 2020 年毕业于东北大学，获得计算机科学学位。我对前端开发很感兴趣，并且喜欢在 Web 上构建令人愉悦的产品，因为可以自由地开发任何想到的东西，并且反馈循环很快。
+>
+> 我在学校上了一门 Web 开发课程，这门课程教我全栈开发的基础知识。凭借这些技能，我设法获得了 Uber 和 Palantir 等公司的软件工程实习机会。在 Uber，我构建了一个内部工具，使用 React、Redux 和 GraphQL 帮助开发人员管理他们的测试骑手和司机帐户。
+>
+> 我对 Google 的前端工程师职位很感兴趣，因为我每天都使用 Google 产品，并且对他们深思熟虑的产品体验印象深刻。能够从事影响数十亿人生活的产品，将是一个梦想成真。
+
+## 听取招聘经理的意见
+
+以下是一些参与其科技公司招聘流程的面试官和招聘人员的轶事。
+
+> 通常，我使用自我介绍作为轻松的热身，以启动面试。不需要任何技术技能，但它测试了沟通能力和以清晰简洁的方式描述事物的能力。
+
+— 工程经理，领英
+
+> 候选人在介绍自己的时候不应该过于冗长，因为它从来都不是一个深入的探讨，而只是一个快速的概述。
+
+— 人才招聘，Coinbase
+
+> 最好以你使用过的技术栈或项目，以及你希望在未来从事的工作/你希望你的职业生涯走向何方来结束。
+
+— 工程经理，Indeed
+
+> 你的面试官也是一个人。面试官最关心的是他们是否希望这个人加入他们的团队——这不仅仅是关于技能。我们想知道你是谁，然后你有什么能力。当然，加入与工作相关的个人风格是最好的。
+
+— 高级工程师，Dropbox。
diff --git a/packages/behavioral-interview-guidebook/contents/why-work-here/en-US.langnostic.json b/packages/behavioral-interview-guidebook/contents/why-work-here/en-US.langnostic.json
new file mode 100644
index 0000000000..ef49a73f27
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/why-work-here/en-US.langnostic.json
@@ -0,0 +1,68 @@
+{
+  "frontmatter": {
+    "title": "1c33781b",
+    "description": "1df505af",
+    "seo_title": "cb96ed99",
+    "seo_description": "ab47f969",
+    "social_title": "25c5cbb4"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "cd79c89f",
+        "72609533",
+        "3dc34ff9",
+        "64cffea3",
+        "3f20fd1b",
+        "799b6229",
+        "b2f3619d",
+        "e96c88dc",
+        "dadcb4ad",
+        "6307ab52",
+        "3dee87bf",
+        "95a9d5ac",
+        "8a1f2a28",
+        "c6682cba",
+        "f53c805",
+        "d8fc10c7",
+        "22597e29",
+        "4784c77e",
+        "f66e2fc7",
+        "b278486c",
+        "5549a769",
+        "59163994",
+        "a0f00b8",
+        "24f39dae"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "cd79c89f",
+        "72609533",
+        "3dc34ff9",
+        "64cffea3",
+        "3f20fd1b",
+        "799b6229",
+        "b2f3619d",
+        "e96c88dc",
+        "dadcb4ad",
+        "6307ab52",
+        "3dee87bf",
+        "95a9d5ac",
+        "8a1f2a28",
+        "c6682cba",
+        "f53c805",
+        "d8fc10c7",
+        "22597e29",
+        "4784c77e",
+        "f66e2fc7",
+        "b278486c",
+        "5549a769",
+        "59163994",
+        "a0f00b8",
+        "24f39dae"
+      ]
+    }
+  }
+}
diff --git a/packages/behavioral-interview-guidebook/contents/why-work-here/en-US.mdx b/packages/behavioral-interview-guidebook/contents/why-work-here/en-US.mdx
new file mode 100644
index 0000000000..fd0da9ae90
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/why-work-here/en-US.mdx
@@ -0,0 +1,73 @@
+---
+title: Answering "Why Work Here"
+description: Learn the best way to answer questions about company motivation concisely and effectively, for front end engineers.
+seo_title: How to Answer "Why Work Here" | Behavioral Interview Playbook
+seo_description: Learn the best way to answer behavioral interview questions about company motivation concisely and effectively, for front end engineers.
+social_title: Answering "Why work here" | GreatFrontEnd
+---
+
+As a hiring manager, "Why do you want to work here" is an extremely common question that is probably asked in over 70% of interviews. Yet, most candidates fail to answer this well. In this article, you will learn from ex-interviewers how to answer this question in an effective and concise manner Front End Engineers/Software Engineers:
+
+1. The interviewer's intention
+1. Suggested answer framework
+1. Example questions and answers
+
+## The interviewer's intention
+
+Most interviewers ask this question with a single objective in mind — to understand more about you through your motivations to join the company. They want to know whether you were interested enough to do your research, or if there was a special reason that constituted a strong motivation from you.
+
+Most candidates mention about how the company/job/product interests them and then stop there. However, a job is a mutually beneficial agreement. To leave a deeper impression, also mention why your skills will be useful to the company and how you can contribute.
+
+## Suggested answer structure
+
+To succeed, there are 3 basic steps to build your answer:
+
+### 1. It should take between 60 to 90 seconds
+
+Never take more than 60 to 90 seconds. Any longer might constitute a monologue. For reference, 1 min is around 15 statements.
+
+### 2. Gather deep insights about the company/team/position gained from current/previous employees of the company
+
+If you've been an interviewer before, you'd know that most candidates do not impress in the "why do you want to work in this company / team" question because they tend to answer it based the company's public information, which may not necessarily be representative of the individual team or department's culture or situation. For instance, imagine you are evaluating 2 candidates for a game development team:
+
+1. **Candidate A**: "Company A is very environmentally friendly and I want to be a part of the earth-saving efforts" (as the team's manager, you know none of your team members ever talk about earth-saving as your work is completely unrelated to it)
+1. **Candidate B**: "Team A is working on games based on Technology X and this is something I happen to be very interested in."
+
+To stand out as someone who is truly interested in the role, you should optimally strive to find insights specific to the team you are joining, and use that to justify your interest (and therefore fit).
+
+#### Common avenues to get team-specific insights:
+
+1. Gain more insights about the team's stack or practices from the job description. In some cases, there could be many details you could tap on
+2. Search up team members on LinkedIn and understand more about their individual work scope, past projects, backgrounds and interests
+3. Search up team members on Blind or even Reddit (go as specific in your query as possible)
+4. Ask the recruiters / hiring managers. Some companies will have you chat with the hiring managers to assess suitability even before any technical rounds are conducted. This is the best chance to ask questions about the team and role
+
+#### Useful questions you could ask:
+
+1. What are some of the unique challenges or learning opportunities that developers get on your team versus other companies?
+1. What are the kinds of projects I could expect to work on if I were to join your team?
+1. How does the way this team operates differ from other teams in the company?
+1. Does this team work closely with other teams? Which ones and how so?
+1. Can you walk me through the process of a typical project?
+
+### 3. Briefly explain why joining this company/role/team is a strategic and logical step for your career
+
+In so doing, you could also take the chance to cement the interviewer's impression of your passion for the field or the efforts you have made to build your expertise.
+
+### 4. Explain what you bring to the table
+
+Explain how you can contribute to the company through your skills and experience, aim to be unique and memorable if possible.
+
+## Example questions and answers
+
+### "Why do you want to work in the TikTok Shop team?"
+
+> I've worked as a web developer while in my previous company on an e-commerce platform for almost 4 years. Having gained significant experience as an individual contributor, the next step for me is to work on larger, more complex projects within a bigger team to take my development skills to the next level.
+>
+> The top 3 things about TikTok Shop for me are:
+>
+> 1. I like to know that my development efforts are able to tangibly drive impact. At the current stage, TikTok Shop is still at a relatively nascent stage of the product lifecycle where that is possible.
+> 1. TikTok Shop serves the wide masses and has to deal with associated challenges such as accessibility, localization, and e-commerce in a non-traditional format, which allows me to develop my skills in that area.
+> 1. ByteDance (TikTok's parent company) internally develops many cutting edge technologies and also uses open source technologies. I'm excited to learn from the company's experienced engineers on how to scale these technologies to a worldwide audience.
+>
+> Lastly, my prior experience with e-commerce platforms would help me get up to speed fast and I'm eager to contribute to evolving TikTok's e-commerce platform to tackle future challenges.
diff --git a/packages/behavioral-interview-guidebook/contents/why-work-here/pt-BR.mdx b/packages/behavioral-interview-guidebook/contents/why-work-here/pt-BR.mdx
new file mode 100644
index 0000000000..723a7a464f
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/why-work-here/pt-BR.mdx
@@ -0,0 +1,62 @@
+---
+title: Como responder "Por que você quer trabalhar Aqui" em Entrevistas comportamentais
+description: Aprenda a melhor forma de responder de maneira concisa e eficaz às perguntas sobre a motivação da empresa, para desenvolvedores front-end, desenvolvedores web ou engenheiros de software. Escrito por ex-entrevistadores de grandes empresas de tecnologia.
+---
+
+Como gerente de contratação, "Por que você quer trabalhar aqui" é uma pergunta extremamente comum que provavelmente é feita em mais de 70% das entrevistas. No entanto, a maioria dos candidatos não responde bem a esta pergunta. Neste artigo, você aprenderá com ex-entrevistadores como responder a esta pergunta de maneira eficaz e concisa para Engenheiros Front End/Engenheiros de Software:
+
+1.  A intenção do entrevistador
+2.  Estrutura de resposta sugerida
+3.  Exemplos de perguntas e respostas
+
+## A Perspectiva do Entrevistador
+
+A maioria dos entrevistadores faz essa pergunta com um único objetivo em mente: entender mais sobre você por meio das suas motivações para se juntar à empresa. Eles querem saber se você estava interessado o suficiente para fazer sua pesquisa ou se havia uma razão especial que constituiu uma forte motivação de sua parte.
+
+## Estrutura de Resposta Sugerida
+
+Para ter sucesso, existem 3 passos básicos para construir sua resposta:
+
+### 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
+
+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:
+
+1.  Candidato A: "A Empresa A é muito amiga do ambiente e quero fazer parte dos esforços para salvar a Terra" (como gestor da equipe, você sabe que nenhum dos membros da sua equipe jamais fala sobre salvar a Terra, já que o trabalho deles não tem nenhuma relação com isso)
+2.  Candidato B: "A Equipe A está trabalhando em jogos baseados na Tecnologia B, e isso é algo que coincidentemente me interessa muito."
+
+Para se destacar como alguém verdadeiramente interessado na função, você deve idealmente se esforçar para encontrar informações específicas sobre a equipe à qual está se juntando e usar essas informações para justificar seu interesse (e, portanto, sua adequação).
+
+#### Aqui estão algumas vias comuns para obter informações específicas sobre a equipe:
+
+1.  Obter mais informações sobre a pilha de tecnologias ou práticas da equipe a partir da descrição do cargo (em alguns casos, pode haver muitos detalhes que você pode explorar)
+2.  Pesquise a equipe no LinkedIn e compreenda mais sobre o escopo individual de trabalho, projetos anteriores, formação e interesses de seus membros
+3.  Tente agendar uma entrevista informativa, uma conversa informal ou uma breve chamada de vídeo com os membros da equipe (após fazer uma pesquisa básica online)
+4.  Pesquise a equipe no Blind ou até mesmo no Reddit (seja o mais específico possível em sua consulta)
+
+#### Aqui estão algumas perguntas úteis que você poderia fazer:
+
+1.  Quais são alguns dos desafios únicos ou oportunidades de aprendizado que os desenvolvedores têm em sua equipe em comparação com outras empresas?
+2.  Quais são os tipos de projetos que eu poderia esperar trabalhar se me juntasse à sua equipe?
+3.  Como a forma de operação desta equipe difere das outras equipes na empresa?
+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
+
+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.
+
+## Exemplos de perguntas e respostas
+
+### "Por que você deseja trabalhar na equipe do TikTok Shop?"
+
+> "Trabalhei como desenvolvedor web freelancer enquanto estava na escola por quase 4 anos.". "Tendo adquirido uma experiência significativa como colaborador individual, o próximo passo para mim é trabalhar em projetos maiores e mais complexos como parte de uma equipe maior, para levar minhas habilidades de desenvolvimento para o próximo nível.".
+>
+> "As três principais coisas sobre o comércio no TikTok para mim são:":
+>
+> 1.  "Gosto de saber que meus esforços de desenvolvimento são capazes de gerar impacto tangível.". "Na fase atual, a TikTok Shop ainda está em uma etapa relativamente inicial do ciclo de vida do produto, onde isso é possível.".
+> 2.  A TikTok Shop atende às amplas massas e precisa lidar com desafios associados, como acessibilidade, localização e comércio eletrônico em um formato relativamente novo, o que me permite desenvolver minhas habilidades nessa área.
+> 3.  A ByteDance (empresa mãe do TikTok) desenvolve internamente muitas tecnologias de ponta e também utiliza tecnologias de código aberto. Estou empolgado(a) para aprender com os engenheiros experientes da empresa como escalar essas tecnologias para uma audiência global.
diff --git a/packages/behavioral-interview-guidebook/contents/why-work-here/zh-CN.mdx b/packages/behavioral-interview-guidebook/contents/why-work-here/zh-CN.mdx
new file mode 100644
index 0000000000..b5a8548956
--- /dev/null
+++ b/packages/behavioral-interview-guidebook/contents/why-work-here/zh-CN.mdx
@@ -0,0 +1,73 @@
+---
+title: 回答“为什么在这里工作”
+description: 了解为前端工程师简洁有效地回答有关公司动机的问题的最佳方法。
+seo_title: 如何回答“为什么在这里工作”| 行为面试手册
+seo_description: 了解为前端工程师简洁有效地回答有关公司动机的行为面试问题的最佳方法。
+social_title: 回答“为什么在这里工作”| GreatFrontEnd
+---
+
+作为招聘经理，“你为什么想在这里工作”是一个非常常见的问题，可能在 70% 以上的面试中都会被问到。然而，大多数候选人未能很好地回答这个问题。在本文中，您将从前面试官那里学习如何以有效和简洁的方式回答这个问题，适用于前端工程师/软件工程师：
+
+1. 面试官的意图
+2. 建议的答案框架
+3. 示例问题和答案
+
+## 面试官的意图
+
+大多数面试官问这个问题只有一个目的——通过你加入公司的动机来更多地了解你。他们想知道你是否足够感兴趣去做你的研究，或者是否有特殊原因构成了你强大的动力。
+
+大多数候选人会提到公司/工作/产品如何吸引他们，然后就此打住。然而，一份工作是一项互惠互利的协议。为了留下更深刻的印象，还要提到你的技能对公司有何用处，以及你如何做出贡献。
+
+## 建议的回答结构
+
+要取得成功，构建你的答案有 3 个基本步骤：
+
+### 1. 它应该需要 60 到 90 秒
+
+永远不要超过 60 到 90 秒。任何更长的时间都可能构成独白。作为参考，1 分钟大约是 15 个陈述。
+
+### 2. 从公司/团队/职位现任/前任员工那里收集关于公司/团队/职位的深刻见解
+
+如果你以前当过面试官，你就会知道大多数候选人在“你为什么想在这家公司/团队工作”这个问题上没有给人留下深刻印象，因为他们倾向于根据公司的公开信息来回答，而这些信息可能不一定能代表个人团队或部门的文化或情况。例如，假设你正在评估 2 位游戏开发团队的候选人：
+
+1. **候选人 A**：“A 公司非常环保，我想为拯救地球的努力出一份力”（作为团队经理，你知道你的团队成员从未谈论过拯救地球，因为你的工作与此完全无关）
+2. **候选人 B**：“A 团队正在开发基于技术 X 的游戏，而这正是我非常感兴趣的。”
+
+为了脱颖而出，成为一个真正对这个角色感兴趣的人，你应该尽可能努力寻找特定于你所加入的团队的见解，并以此来证明你的兴趣（以及由此产生的适合度）。
+
+#### 获取团队特定见解的常见途径：
+
+1. 从职位描述中获取更多关于团队的技术栈或实践的见解。在某些情况下，你可以利用很多细节
+2. 在 LinkedIn 上搜索团队成员，了解更多关于他们个人的工作范围、过去的项目、背景和兴趣
+3. 在 Blind 甚至 Reddit 上搜索团队成员（在你的查询中尽可能具体）
+4. 询问招聘人员/招聘经理。一些公司会让你在进行任何技术环节之前与招聘经理聊天以评估是否合适。这是询问关于团队和角色的问题的最佳机会
+
+#### 你可以问的有用问题：
+
+1. 开发者在您的团队中与在其他公司相比，会遇到哪些独特的挑战或学习机会？
+2. 如果我加入您的团队，我可能会参与哪些类型的项目？
+3. 这个团队的运作方式与公司内的其他团队有何不同？
+4. 这个团队是否与其他团队紧密合作？与哪些团队合作，如何合作？
+5. 您能带我了解一个典型项目的流程吗？
+
+### 3. 简要解释为什么加入这家公司/职位/团队对您的职业生涯来说是一个战略性和合乎逻辑的步骤
+
+通过这样做，您还可以借此机会巩固面试官对您对该领域的热情或您为建立专业知识所做努力的印象。
+
+### 4. 解释你能为公司带来什么
+
+解释你如何通过你的技能和经验为公司做出贡献，如果可能的话，力求独特和令人难忘。
+
+## 示例问题和答案
+
+### “你为什么想在 TikTok Shop 团队工作？”
+
+> 我在之前的公司担任了近 4 年的 Web 开发人员，负责一个电子商务平台。作为一名个人贡献者，我获得了丰富的经验，下一步是与更大的团队一起在更大、更复杂的项目中工作，以将我的开发技能提升到新的水平。
+>
+> 对我来说，TikTok Shop 的前 3 件事是：
+>
+> 1. 我希望知道我的开发工作能够切实地推动影响。在目前阶段，TikTok Shop 仍处于产品生命周期的相对早期阶段，这是有可能的。
+> 2. TikTok Shop 服务于广大群众，并且必须应对相关的挑战，例如可访问性、本地化以及非传统形式的电子商务，这使我能够在该领域发展我的技能。
+> 3. 字节跳动（TikTok 的母公司）内部开发了许多尖端技术，并且也使用开源技术。我很高兴向公司经验丰富的工程师学习如何将这些技术扩展到全球受众。
+>
+> 最后，我之前在电子商务平台上的经验将帮助我快速上手，并且我渴望为不断发展的 TikTok 电子商务平台做出贡献，以应对未来的挑战。
diff --git a/packages/front-end-interview-guidebook/contents/algorithms/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/algorithms/en-US.langnostic.json
new file mode 100644
index 0000000000..33a660b26b
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/algorithms/en-US.langnostic.json
@@ -0,0 +1,90 @@
+{
+  "frontmatter": {
+    "title": "66d3c445",
+    "description": "afeed345",
+    "seo_title": "d46d01d5",
+    "seo_description": "a31753e4",
+    "social_title": "afcadb6e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "e23ac2c5",
+        "781315d",
+        "b6465b86",
+        "13cff95f",
+        "493e8bd0",
+        "cafc8a5",
+        "c97eaa3d",
+        "d48a7b71",
+        "421ceb04",
+        "7e75ddb2",
+        "fe80380a",
+        "f0bcd2ed",
+        "7d9cb0ec",
+        "4ca7a565",
+        "b6dbe2f3",
+        "bf28427a",
+        "18266525",
+        "eb62450d",
+        "2b74a214",
+        "e1befcaf",
+        "91a15981",
+        "20071352",
+        "e2bac672",
+        "71a2a58",
+        "d3f51453",
+        "a3c5b92",
+        "206a5a5b",
+        "9a27365c",
+        "686cd762",
+        "eeb9a3b2",
+        "51300c2d",
+        "101a24ed",
+        "3276416d",
+        "9b54825a",
+        "db9fea03"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "e23ac2c5",
+        "781315d",
+        "b6465b86",
+        "13cff95f",
+        "493e8bd0",
+        "cafc8a5",
+        "c97eaa3d",
+        "d48a7b71",
+        "421ceb04",
+        "7e75ddb2",
+        "fe80380a",
+        "f0bcd2ed",
+        "7d9cb0ec",
+        "4ca7a565",
+        "b6dbe2f3",
+        "bf28427a",
+        "18266525",
+        "eb62450d",
+        "2b74a214",
+        "e1befcaf",
+        "91a15981",
+        "20071352",
+        "e2bac672",
+        "71a2a58",
+        "d3f51453",
+        "a3c5b92",
+        "206a5a5b",
+        "9a27365c",
+        "686cd762",
+        "eeb9a3b2",
+        "51300c2d",
+        "101a24ed",
+        "3276416d",
+        "9b54825a",
+        "db9fea03"
+      ]
+    }
+  }
+}
diff --git a/packages/front-end-interview-guidebook/contents/algorithms/en-US.mdx b/packages/front-end-interview-guidebook/contents/algorithms/en-US.mdx
new file mode 100644
index 0000000000..8766357d66
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/algorithms/en-US.mdx
@@ -0,0 +1,125 @@
+---
+title: Data Structures and Algorithms Interviews
+description: Front end engineer's guide to DSA - important concepts to know, top practice questions to do and other tips
+seo_title: Data Structures and Algorithms for Front End Interviews
+seo_description: Guide to prepare for Data Structures and Algorithms Questions tailored for front end interviews - important concepts to know, common questions asked and useful tips
+social_title: Cracking Data Structures and Algorithms | Front End Interview Playbook
+---
+
+Algorithmic coding questions are exactly the questions you can find on LeetCode. Algorithmic questions usually have the following traits:
+
+- They aren't specific to the front end domain; they can be solved in most mainstream programming languages.
+- Usually accompanied with impractical scenarios. You would not have encountered such a problem during real world development. Who ever had to flip a binary tree or count the number of palindromic substrings in a string?
+- Efficiency of the code (time and space complexity) is important and producing the most efficient solution requires solid knowledge of data structures and algorithms.
+
+Although algorithmic coding questions aren't specific to front end, the skills needed to excel in these questions — strong analytical thinking, effective communication, a solid grasp of the common data structures and algorithms, good code hygiene, are still crucial skills good Front End Engineers should possess. Good Front End Engineers are also good Software Engineers and good Software Engineers should have mastery over basic DSA. Hence it's no surprise that many companies still ask algorithmic coding questions during the interview process. Familiarity with data structures and algorithms is also helpful for solving JavaScript coding questions and User Interface coding questions.
+
+There are a ton of resources out there that cover algorithmic coding interviews and since they are not specific to front end, we won't go into too much detail on this page. We recommend referring to [Tech Interview Handbook](https://www.techinterviewhandbook.org) as a free resource if you would like to learn more about algorithmic coding interviews.
+
+## Examples
+
+- Reverse a linked list
+- Determine if a string contains balanced brackets
+- Determine how many substrings in a string are palindromes
+
+## How to prepare
+
+1. Pick a good programming language to use. If you want to save preparation time you should probably stick with JavaScript for algorithmic questions, although note that the JavaScript language doesn't contain certain common useful data structures and algorithms whereas other languages like Python, Java, and C++ do. We recommend using Python for solving algorithmic interview questions
+1. Plan your time and tackle topics and questions in order of importance
+1. Combine studying and practicing for a single topic
+1. Accompany practice with coding interview cheat sheets to internalize the must-dos and must-remembers
+
+Refer to [Tech Interview Handbook's step-by-step guide on how to prepare for algorithmic coding interviews](https://www.techinterviewhandbook.org/coding-interview-prep/).
+
+## Important concepts
+
+Although you can still be asked any algorithmic question, companies tend to go easier on Front End Engineer candidates and probably will not ask questions involving hard topics like dynamic programming or complex graph algorithms.
+
+Since the DOM is a tree, prioritize learning about trees and the various tree traversal algorithms.
+
+| Category | Important topics |
+| --- | --- |
+| Data structures | Arrays, Maps, Stacks, Trees, Graphs, Matrix (2D Arrays), Sets |
+| Algorithms | Binary Search, Breadth-first Search, Depth-first Search, Topological Sorting, Recursion |
+
+## Common JavaScript operations
+
+Be aware of the common JavaScript operations and their time complexities.
+
+### `Array`
+
+Array operations and their time complexity:
+
+- `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` is the number of elements in the array and `m` is the number of
+elements to be added.
+
+### `Map`
+
+Map operations and their time complexity:
+
+- `Map.prototype.clear()`: O(n)
+- `Map.prototype.delete()`: O(1)
+- `Map.prototype.entries()`: O(1) because it returns an iterator. Getting all the entries will take O(n) time
+- `Map.prototype.forEach()`: O(n)
+- `Map.prototype.get()`: O(1)
+- `Map.prototype.has()`: O(1)
+- `Map.prototype.keys()`: O(1) because it returns an iterator. Getting all the keys will take O(n) time
+- `Map.prototype.set()`: O(1)
+- `Map.prototype.values()`: O(1) because it returns an iterator. Getting all the values will take O(n) time
+
+<sup>*</sup> `n` is the number of keys in the map.
+
+### `Set`
+
+Set operations and their time complexity:
+
+- `Set.prototype.add()`: O(1)
+- `Set.prototype.clear()`: O(n)
+- `Set.prototype.delete()`: O(1)
+- `Set.prototype.entries()`: O(1) because it returns an iterator. Getting all the entries will take O(n) time
+- `Set.prototype.forEach()`: O(n)
+- `Set.prototype.has()`: O(1)
+- `Set.prototype.keys()`: O(1) because it returns an iterator. Getting all the keys will take O(n) time
+- `Set.prototype.values()`: O(1) because it returns an iterator. Getting all the values will take O(n) time
+
+<sup>*</sup> `n` is the number of elements in the set.
+
+## Evaluation axes
+
+During algorithmic coding interviews, interviewers are evaluating candidates on the following skills:
+
+- **Problem solving**: Use a systematic and logical approach to understanding and addressing a problem. Break down the problem into smaller independent problems. Evaluate different approaches and their tradeoffs
+- **Technical competence**: Ability to translate solutions into working code and demonstrating a strong understanding of the language being used
+- **Communication**: Ask questions to clarify details and clearly explain one's approach and considerations
+- **Verification**: Identify various scenarios to test the code against, including edge cases. Be able to diagnose and fix any issues that arise
+
+## Useful tips
+
+- **Wishful thinking**: JavaScript's standard library doesn't have some useful data structures and algorithms like queue, heap, binary search, which can make your life easier during JavaScript coding interviews. However, you can ask the interviewer if you can pretend such a data structure/algorithm exists and use it directly in your solution without implementing it.
+- **Pure functions**: 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.
+- **Choose data structures wisely**: Pay attention to your choice of data structures and be aware of the time complexities of the code. Be familiar with the time/space complexities of the basic JavaScript Array, Object, Set, Map operations should you want to use them in your solution. Some of these time/space complexities differ across languages. Don't write code that runs in O(n<sup>2</sup>) if it can accomplished in O(n) runtime with the use of hash maps.
+- **Recursion edge cases**:
+  - **Clarifying input size**: If you have identified that solving the question requires recursion, ask about the input size and how to handle the case of recursion stack overflow. Usually you won't have to handle it but raising this issue demonstrates thoughtfulness.
+  - **Cyclic structures**: Nested deep data structures can have recursive references to itself, which makes certain operations like serialization and traversal more tricky. Ask the interviewer if you have to handle such cases. Usually you won't have to handle it but raising this issue demonstrates thoughtfulness.
+
+## Practice questions
+
+Blind 75 is a famous and concise list of algorithm questions curated by [Yangshun Tay](https://www.linkedin.com/in/yangshun/). You can practice the [Blind 75 question list on GreatFrontEnd](/interviews/blind75).
+
+GreatFrontEnd also provides some [general practice questions for Data Structures and Algorithms](/questions/formats/algo-coding) where you can practice implementing common data structures ([Stack](/questions/algo/stack), [Queue](/questions/algo/queue)) and algorithms ([Binary Search](/questions/algo/binary-search), [Merge Sort](/questions/algo/merge-sort)), etc in JavaScript.
diff --git a/packages/front-end-interview-guidebook/contents/algorithms/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/algorithms/pt-BR.mdx
new file mode 100644
index 0000000000..6fcb635371
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/algorithms/pt-BR.mdx
@@ -0,0 +1,118 @@
+---
+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.
+
+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.
+
+Existem muitos recursos disponíveis que abordam entrevistas de codificação algorítmica, e como elas não são específicas para o front end, não entraremos em muitos detalhes nesta página. Recomendamos consultar o [Manual de Entrevistas Técnicas](https://www.techinterviewhandbook.org) como um recurso gratuito se você deseja aprender mais sobre entrevistas de codificação algorítmica.
+
+## Exemplos
+
+- 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
+
+1.  Escolha uma linguagem de programação adequada para utilizar. Se você deseja economizar tempo de preparação, provavelmente deve optar pelo JavaScript para perguntas algorítmicas, embora seja importante observar que a linguagem JavaScript não contém certas estruturas de dados e algoritmos comuns e úteis presentes em outras linguagens como Python, Java e C++. Pessoalmente, eu uso Python para resolver perguntas de entrevistas algorítmicas.
+2.  Planeje o seu tempo e aborde tópicos e questões em ordem de importância.
+3.  Combine o estudo e a prática para um único tópico.
+4.  Acompanhe a prática com folhas de consulta de entrevista de codificação para internalizar as ações essenciais e os pontos importantes para lembrar.
+
+Consulte o guia passo a passo do [Manual de Entrevistas Técnicas sobre como se preparar para entrevistas de codificação algorítmica.](https://www.techinterviewhandbook.org/coding-interview-prep/)
+
+## Conceitos Importantes
+
+Embora você ainda possa ser questionado sobre qualquer tópico algorítmico, as empresas tendem a ser mais brandas com os candidatos a Engenheiro Front-End e provavelmente não farão perguntas envolvendo tópicos difíceis como programação dinâmica ou algoritmos de grafos complexos.
+
+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 |
+
+## Operações Comuns em JavaScript
+
+### `Array`
+
+| Operação                    | Complexidade de Tempo |
+| --------------------------- | --------------------- |
+| `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` é o número de elementos do array e `m` é o número de elementos a
+serem adicionados.
+
+### `Map`
+
+| Operação | Complexidade de Tempo |
+| --- | --- |
+| `Map.prototype.clear()` | O(n) |
+| `Map.prototype.delete()` | O(1) |
+| `Map.prototype.entries()` | O(1) because it returns an iterator. Obter todas as entradas levará tempo O(n). |
+| `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) |
+| `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). |
+
+<sup>*</sup> `n` é o número de chaves no conjunto (set).
+
+## Critérios de Avaliação para Entrevistas de Codificação Algorítmica
+
+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.
+
+## 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.
+
+## Questões de Prática
+
+Atualmente, a melhor plataforma para praticar perguntas algorítmicas é indiscutivelmente o LeetCode. No entanto, o GreatFrontEnd fornece algumas [perguntas práticas para Estruturas de Dados e Algoritmos](/questions/formats/algo-coding) onde você pode praticar a implementação de estruturas de dados comuns ([Stack](/questions/algo/stack), [Queue](/questions/algo/queue)) e algoritmos ([Binary Search](/questions/algo/binary-search), [Merge Sort](/questions/algo/merge-sort)), etc em JavaScript.
diff --git a/packages/front-end-interview-guidebook/contents/algorithms/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/algorithms/zh-CN.mdx
new file mode 100644
index 0000000000..d3deb9fc33
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/algorithms/zh-CN.mdx
@@ -0,0 +1,124 @@
+---
+title: 数据结构与算法面试
+description: 前端工程师的 DSA 指南 - 需要了解的重要概念、要做的顶级练习题和其他技巧
+seo_title: 前端面试的数据结构与算法
+seo_description: 为前端面试量身定制的数据结构与算法问题准备指南 - 需要了解的重要概念、常见的面试问题和有用的技巧
+social_title: 破解数据结构与算法 | 前端面试手册
+---
+
+算法编码问题正是您可以在 LeetCode 上找到的问题。 算法问题通常具有以下特征：
+
+* 它们并非特定于前端领域； 它们可以在大多数主流编程语言中解决。
+* 通常伴随着不切实际的场景。 您在现实世界的开发中不会遇到这样的问题。 谁曾经翻转过二叉树或计算过字符串中回文子串的数量？
+* 代码的效率（时间和空间复杂度）很重要，并且产生最有效的解决方案需要扎实的数据结构和算法知识。
+
+尽管算法编码问题并非特定于前端，但要擅长这些问题所需的技能——强大的分析思维、有效的沟通、对常见数据结构和算法的扎实掌握、良好的代码卫生，仍然是优秀前端工程师应该具备的关键技能。 优秀的前端工程师也是优秀的软件工程师，而优秀的软件工程师应该掌握基本的 DSA。 因此，许多公司在面试过程中仍然会问算法编码问题也就不足为奇了。 熟悉数据结构和算法也有助于解决 JavaScript 编码问题和用户界面编码问题。
+
+那里有大量涵盖算法编码面试的资源，由于它们并非特定于前端，因此我们不会在此页面上详细介绍。 如果您想了解有关算法编码面试的更多信息，我们建议您参考 [Tech Interview Handbook](https://www.techinterviewhandbook.org) 作为免费资源。
+
+## 示例
+
+* 反转链表
+* 确定一个字符串是否包含平衡括号
+* 确定一个字符串中有多少个子字符串是回文
+
+## 如何准备
+
+1. 选择一种好的编程语言来使用。 如果您想节省准备时间，您可能应该坚持使用 JavaScript 来解决算法问题，尽管请注意，JavaScript 语言不包含某些常见的有用数据结构和算法，而 Python、Java 和 C++ 等其他语言则包含。 我们建议使用 Python 来解决算法面试问题
+2. 规划您的时间并按重要性顺序处理主题和问题
+3. 将学习和练习结合起来解决一个主题
+4. 伴随练习使用编码面试备忘单来内化必须做的事情和必须记住的事情
+
+请参阅 [Tech Interview Handbook 关于如何准备算法编码面试的分步指南](https://www.techinterviewhandbook.org/coding-interview-prep/)。
+
+## 重要概念
+
+尽管您仍然可能被问到任何算法问题，但公司倾向于对前端工程师候选人放轻松，并且可能不会问到涉及诸如动态规划或复杂图算法之类的难题。
+
+由于 DOM 是一棵树，因此优先学习树和各种树遍历算法。
+
+| 类别 | 重要主题 |
+| --- | --- |
+| 数据结构 | 数组、映射、堆栈、树、图、矩阵（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)
+
+<sup>\*</sup> `n` 是数组中的元素数量，`m` 是要添加的元素数量。
+
+### `Map`
+
+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) 因为它返回一个迭代器。获取所有键将花费 O(n) 时间
+* `Map.prototype.set()`: O(1)
+* `Map.prototype.values()`: O(1) 因为它返回一个迭代器。获取所有值将花费 O(n) 时间
+
+<sup>\*</sup> `n` 是 map 中的键的数量。
+
+### `Set`
+
+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) 因为它返回一个迭代器。获取所有键将花费 O(n) 时间
+* `Set.prototype.values()`: O(1) 因为它返回一个迭代器。获取所有值将花费 O(n) 时间
+
+<sup>\*</sup> `n` 是集合中的元素数量。
+
+## 评估标准
+
+在算法编码面试中，面试官会根据以下技能评估候选人：
+
+* **解决问题**：使用系统和逻辑方法来理解和解决问题。将问题分解为更小的独立问题。评估不同的方法及其权衡
+* **技术能力**：将解决方案转化为可运行的代码，并展示对所用语言的深刻理解
+* **沟通**：提问以澄清细节，并清楚地解释自己的方法和考虑因素
+* **验证**：确定各种场景来测试代码，包括边缘情况。能够诊断和修复出现的任何问题
+
+## 有用的提示
+
+* **一厢情愿**：JavaScript 的标准库没有一些有用的数据结构和算法，如队列、堆、二分查找，这可以在 JavaScript 编码面试中让你的生活更轻松。但是，你可以询问面试官是否可以假装存在这样的数据结构/算法，并在你的解决方案中直接使用它，而无需实现它。
+* **纯函数**：旨在编写纯函数，这些函数具有可重用性和模块化的好处，也就是不依赖于函数之外的状态且不会引起副作用的函数。
+* **明智地选择数据结构**：注意你对数据结构的选择，并了解代码的时间复杂度。熟悉基本的 JavaScript Array、Object、Set、Map 操作的时间/空间复杂度，以备你希望在你的解决方案中使用它们。其中一些时间/空间复杂度因语言而异。如果使用哈希映射可以在 O(n) 运行时完成，请不要编写以 O(n<sup>2</sup>) 运行的代码。
+* **递归边缘情况**：
+  * **澄清输入大小**：如果你已经确定解决问题需要递归，请询问输入大小以及如何处理递归堆栈溢出的情况。通常你不需要处理它，但提出这个问题表明你很周到。
+  * **循环结构**：嵌套的深层数据结构可以对自身进行递归引用，这使得某些操作（如序列化和遍历）更加棘手。询问面试官你是否必须处理此类情况。通常你不需要处理它，但提出这个问题表明你很周到。
+
+## 练习题
+
+Blind 75 是由 [Yangshun Tay](https://www.linkedin.com/in/yangshun/) 策划的著名且简洁的算法问题列表。你可以在 [GreatFrontEnd](/interviews/blind75) 上练习 [Blind 75 问题列表]。
+
+GreatFrontEnd 还提供了一些 [数据结构和算法的通用练习题](/questions/formats/algo-coding)，你可以在其中练习用 JavaScript 实现常见的数据结构（[Stack](/questions/algo/stack)、[Queue](/questions/algo/queue)）和算法（[二分查找](/questions/algo/binary-search)、[归并排序](/questions/algo/merge-sort)）等。
diff --git a/packages/front-end-interview-guidebook/contents/coding/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/coding/en-US.langnostic.json
new file mode 100644
index 0000000000..81eabf8740
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/coding/en-US.langnostic.json
@@ -0,0 +1,72 @@
+{
+  "frontmatter": {
+    "title": "5b978b7d",
+    "description": "bd4c77b5",
+    "seo_title": "8f53137e",
+    "seo_description": "eb3fda14",
+    "social_title": "d537d635"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "df39301b",
+        "f43009db",
+        "82cf3a13",
+        "b799ac87",
+        "f3a6fb60",
+        "86fbba68",
+        "f2b13208",
+        "4767e65e",
+        "24094bd8",
+        "4a61c6af",
+        "1c35d4db",
+        "67dc567f",
+        "904f055b",
+        "60315899",
+        "2a7816d0",
+        "86ae5ea",
+        "aba7aeae",
+        "aa4e97ec",
+        "691686a9",
+        "c25cc2cf",
+        "ef51026e",
+        "2cb0463c",
+        "3276416d",
+        "a92ddc10",
+        "55a3f186",
+        "eb1412a7"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "df39301b",
+        "f43009db",
+        "82cf3a13",
+        "b799ac87",
+        "f3a6fb60",
+        "86fbba68",
+        "f2b13208",
+        "4767e65e",
+        "24094bd8",
+        "4a61c6af",
+        "1c35d4db",
+        "67dc567f",
+        "904f055b",
+        "60315899",
+        "2a7816d0",
+        "86ae5ea",
+        "aba7aeae",
+        "aa4e97ec",
+        "691686a9",
+        "c25cc2cf",
+        "ef51026e",
+        "2cb0463c",
+        "3276416d",
+        "a92ddc10",
+        "55a3f186",
+        "eb1412a7"
+      ]
+    }
+  }
+}
diff --git a/packages/front-end-interview-guidebook/contents/coding/en-US.mdx b/packages/front-end-interview-guidebook/contents/coding/en-US.mdx
new file mode 100644
index 0000000000..a761ed0659
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/coding/en-US.mdx
@@ -0,0 +1,77 @@
+---
+title: Front End Coding Interviews
+description: Question types to expect, handy coding tips and the best resources to use
+seo_title: Front End Coding Interview Questions | How to prepare
+seo_description: Everything you need to know to prepare well for Front End Coding Interviews - including the types of questions to prepare for, coding tips and resources to use
+social_title: Cracking Coding Interviews | Front End Interview Playbook
+---
+
+Coding interviews is the primary way in which Front End Engineers are being evaluated and can span across multiple rounds and stages of the interviews, hence it is super important to practice for coding interviews.
+
+To recap, here are the three types of coding questions you can be asked:
+
+- **Algorithmic coding**: Solve tricky algorithmic questions that evaluates your understanding of data structures, algorithms and time complexity
+- **JavaScript coding**: Implement functions or data structures in JavaScript that are related to front end domain and commonly used during front end development
+- **User interface coding**: Build user interfaces (components, widgets, apps) using HTML, CSS, and JavaScript, sometimes even using JavaScript frameworks
+
+## Coding environment
+
+You could be asked to complete a question by coding using one or more of the following environments:
+
+### Online basic code editor
+
+You will be given a URL of an in-browser code editor. The editor either has real-time collaboration capabilities or you will be asked to share your screen. These basic code editors usually only have one pane because the question doesn't need using more than one language to complete, e.g. algorithmic/JavaScript coding questions. You may or may not be allowed to execute your code. An example of online basic code editors is [CoderPad](https://coderpad.io/).
+
+### Integrated development environments (IDE)
+
+The difference between basic code editor and IDEs is that IDEs allow toggling between multiple files. They can either be in-browser or native apps on your laptop. You will usually be asked to use IDEs when you have to build user interfaces and have to use multiple files or type in more than just a single language. This is the best environment available as it closely resembles how most engineers develop. Subject to interviewer approval, you should be able to:
+
+- Preview the in-progress UI and see updates live
+- Use the browser console for debugging
+- Use IDE features like syntax highlighting, keyboard shortcuts, autocomplete, intellisense, extensions to boost your productivity
+- Add any necessary 3rd party dependencies
+
+Always choose to use an IDE if you are given a choice.
+
+Examples of online IDEs include [JSFiddle](https://jsfiddle.net/), [CodePen](https://codepen.io/), [CodeSandbox](https://codesandbox.io/), and [StackBlitz](https://stackblitz.com/).
+
+### Whiteboard
+
+At certain companies, you could be asked to write all required code on the whiteboard. Imagine writing HTML and CSS on the board without being able to preview it! This is a candidate's nightmare and big tech companies like Google and Meta/Facebook are known to do this during onsite interviews. Most other companies either get you to bring your own laptop and you code on your local IDE or an online code editor/IDE within a web browser.
+
+---
+
+Here's a summary of the various coding environments and what you can do:
+
+| Environment        | Preview | Execute code | Add 3rd-party dependencies |
+| ------------------ | ------- | ------------ | -------------------------- |
+| Online code editor | No      | Situational  | Usually no                 |
+| IDEs               | Yes     | Yes          | Yes                        |
+| Whiteboard         | No      | No           | No                         |
+
+## General coding tips
+
+- Be familiar with the useful editor keyboard shortcuts because time is of essence during interviews and every keystroke counts. Know how to:
+  - Jump to start/end of line
+  - Shift lines up/down
+  - Duplicate a line
+  - Rename a symbol easily
+- Find out beforehand if you will be coding on your own laptop, a laptop given to you, or the whiteboard.
+  - If you will be coding on your own laptop and can use your own IDE, ensure that the IDE is functioning properly, Node.js and npm are installed correctly, and that you can run local web servers on `localhost` and access them within your browser.
+- Do not be too reliant on preview and execution of code. This suggests to your interviewer that you aren't sure of what you typed and develop via trial-and-error, which is not a positive signal.
+
+## Type-specific tips
+
+Read on for tips for each coding interview type:
+
+- [Algorithmic coding](/front-end-interview-playbook/algorithms)
+- [JavaScript coding](/front-end-interview-playbook/javascript)
+- [User interface coding](/front-end-interview-playbook/user-interface)
+
+## Practice questions
+
+GreatFrontEnd has a long list of [coding questions](/questions) you can practice and you should definitely take the time to check them out.
+
+Note that we are intentionally vague in some of the questions and don't present the full requirements in the question. This is to train you to think ahead and consider what possible things you have to take note of when working on the solution.
+
+However, we'll cover as much ground as possible in the solution. It may be frustrating while reading the solutions to realize that you've missed out some stuff, but it's a learning experience with the ultimate goal of helping you improve. Better to learn during preparation than during actual interviews.
diff --git a/packages/front-end-interview-guidebook/contents/coding/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/coding/pt-BR.mdx
new file mode 100644
index 0000000000..b62add3715
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/coding/pt-BR.mdx
@@ -0,0 +1,72 @@
+---
+title: Perguntas de Codificação para Entrevistas de Front End — Como se Preparar
+description: Guia para Preparação de Perguntas de Codificação em Entrevistas para Desenvolvedores Front End/Web — O que esperar, dicas de codificação e mais de 100 perguntas de prática importantes.
+---
+
+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.
+
+## Ambiente de Codificação
+
+Você pode ser solicitado a completar uma pergunta codificando usando um ou mais dos seguintes ambientes:
+
+### Editor de Código Básico Online
+
+Você receberá uma URL de um editor de código no navegador. O editor pode ter recursos de colaboração em tempo real ou você pode ser solicitado a compartilhar sua tela. Esses editores de código básicos geralmente têm apenas um painel, porque a pergunta não requer o uso de mais de uma linguagem para ser concluída, por exemplo, perguntas de codificação algorítmica ou em JavaScript. Você pode ou não ter permissão para executar seu código. Um exemplo de editor de código básico online é o [CoderPad](https://coderpad.io/).
+
+### Ambientes de Desenvolvimento Integrado (IDE)
+
+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.
+
+Sempre escolha usar um IDE se for dada a opção.
+
+Exemplos de IDEs online incluem [JSFiddle](https://jsfiddle.net/), [CodePen](https://codepen.io/), [CodeSandbox](https://codesandbox.io/), e [StackBlitz](https://stackblitz.com/).
+
+### Quadro Branco
+
+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 |
+
+## 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.
+
+## Dicas Específicas por Tipo
+
+Continue lendo para obter dicas para cada tipo de entrevista de codificação:
+
+- [Codificação Algoritmica](/front-end-interview-playbook/algorithms)
+- [Codificação JavaScript](/front-end-interview-playbook/javascript)
+- [Codificação de Interface do Usuário](/front-end-interview-playbook/user-interface)
+
+## Perguntas de Prática
+
+GreatFrontEnd possui uma longa lista de [perguntas de codificação](/questions) que você pode praticar, e definitivamente deve reservar um tempo para conferi-las.
+
+Observe que, de propósito, deixamos algumas das perguntas vagas e não apresentamos todos os requisitos completos na pergunta. Isso é para treiná-lo a pensar adiante e considerar quais possíveis coisas você deve observar ao trabalhar na solução.
+
+No entanto, vamos cobrir o máximo possível na solução. Pode ser frustrante perceber ao ler as soluções que você deixou passar algumas coisas, mas é uma experiência de aprendizado com o objetivo final de ajudá-lo a melhorar. É melhor aprender durante a preparação do que durante as entrevistas reais.
diff --git a/packages/front-end-interview-guidebook/contents/coding/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/coding/zh-CN.mdx
new file mode 100644
index 0000000000..34290750df
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/coding/zh-CN.mdx
@@ -0,0 +1,77 @@
+---
+title: 前端编码面试
+description: 期望的问题类型、实用的编码技巧以及最佳资源的使用
+seo_title: 前端编码面试问题 | 如何准备
+seo_description: 您需要了解的为前端编码面试做好充分准备的一切 - 包括要准备的问题类型、编码技巧和要使用的资源
+social_title: 破解编码面试 | 前端面试手册
+---
+
+编码面试是评估前端工程师的主要方式，并且可能跨越多轮和面试阶段，因此为编码面试进行练习非常重要。
+
+总而言之，您可以被问到以下三种类型的编码问题：
+
+* **算法编码**: 解决棘手的算法问题，评估您对数据结构、算法和时间复杂度的理解
+* **JavaScript 编码**: 用 JavaScript 实现与前端领域相关并在前端开发中常用的函数或数据结构
+* **用户界面编码**: 使用 HTML、CSS 和 JavaScript 构建用户界面（组件、小部件、应用程序），有时甚至使用 JavaScript 框架
+
+## 编码环境
+
+您可能需要使用以下一个或多个环境完成问题编码：
+
+### 在线基本代码编辑器
+
+您将获得一个浏览器内代码编辑器的 URL。 该编辑器具有实时协作功能，或者您将被要求共享您的屏幕。 这些基本代码编辑器通常只有一个窗格，因为问题不需要使用多种语言来完成，例如算法/JavaScript 编码问题。 您可能被允许也可能不被允许执行您的代码。 在线基本代码编辑器的示例是 [CoderPad](https://coderpad.io/)。
+
+### 集成开发环境 (IDE)
+
+基本代码编辑器和 IDE 之间的区别在于，IDE 允许在多个文件之间切换。 它们可以是在浏览器中，也可以是您笔记本电脑上的原生应用程序。 当您必须构建用户界面并且必须使用多个文件或键入不仅仅是一种语言时，通常会要求您使用 IDE。 这是可用的最佳环境，因为它与大多数工程师的开发方式非常相似。 在面试官的批准下，您应该能够：
+
+* 预览正在进行的用户界面并实时查看更新
+* 使用浏览器控制台进行调试
+* 使用 IDE 功能，如语法高亮显示、键盘快捷键、自动完成、智能感知、扩展程序来提高您的工作效率
+* 添加任何必要的第三方依赖项
+
+如果可以选择，请始终选择使用 IDE。
+
+在线 IDE 的示例包括 [JSFiddle](https://jsfiddle.net/)、[CodePen](https://codepen.io/)、[CodeSandbox](https://codesandbox.io/) 和 [StackBlitz](https://stackblitz.com/)。
+
+### 白板
+
+在某些公司，您可能需要直接在白板上编写所有必需的代码。 想象一下在白板上编写 HTML 和 CSS，而无法预览它！ 这对候选人来说是一场噩梦，像谷歌和 Meta/Facebook 这样的大型科技公司都知道在现场面试中这样做。 大多数其他公司要么让您自带笔记本电脑，然后在本地 IDE 或 Web 浏览器中的在线代码编辑器/IDE 上进行编码。
+
+***
+
+以下是各种编码环境的摘要以及您可以执行的操作：
+
+| 环境 | 预览 | 执行代码 | 添加第三方依赖项 |
+| ------------------ | ------- | ------------ | -------------------------- |
+| 在线代码编辑器 | 否 | 视情况而定 | 通常没有 |
+| IDE | 是 | 是 | 是 |
+| 白板 | 否 | 否 | 否 |
+
+## 一般编码技巧
+
+* 熟悉有用的编辑器键盘快捷键，因为在面试中时间至关重要，并且每次击键都很重要。 知道如何：
+  * 跳转到行首/行尾
+  * 将行上移/下移
+  * 复制一行
+  * 轻松重命名符号
+* 提前了解您是否将在自己的笔记本电脑、给您的笔记本电脑或白板上进行编码。
+  * 如果您将在自己的笔记本电脑上进行编码并且可以使用自己的 IDE，请确保 IDE 正常运行，已正确安装 Node.js 和 npm，并且您可以在 `localhost` 上运行本地 Web 服务器并在浏览器中访问它们。
+* 不要太依赖代码的预览和执行。 这向您的面试官表明您不确定自己输入的内容，并通过反复试验进行开发，这不是一个积极的信号。
+
+## 特定于类型的提示
+
+请继续阅读有关每种编码面试类型的提示：
+
+* [算法编码](/front-end-interview-playbook/algorithms)
+* [JavaScript 编码](/front-end-interview-playbook/javascript)
+* [用户界面编码](/front-end-interview-playbook/user-interface)
+
+## 练习题
+
+GreatFrontEnd 有一个很长的[编码问题列表](/questions)，您可以练习，您绝对应该花时间查看它们。
+
+请注意，我们在某些问题中故意含糊不清，并且没有在问题中呈现完整的需求。 这是为了训练您提前思考并考虑在处理解决方案时可能需要注意的事项。
+
+但是，我们将在解决方案中尽可能多地涵盖。 在阅读解决方案时意识到您遗漏了一些东西可能会令人沮丧，但这是一个学习体验，最终目标是帮助您改进。 最好在准备期间学习，而不是在实际面试期间学习。
diff --git a/packages/front-end-interview-guidebook/contents/javascript/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/javascript/en-US.langnostic.json
new file mode 100644
index 0000000000..17edb08249
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/javascript/en-US.langnostic.json
@@ -0,0 +1,82 @@
+{
+  "frontmatter": {
+    "title": "b87926c4",
+    "description": "f2bc0b45",
+    "seo_title": "7f6ef26b",
+    "seo_description": "9ac3df1b",
+    "social_title": "35078a6"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "35c53c11",
+        "2bf0e959",
+        "c5e29d2e",
+        "493e8bd0",
+        "3a6772ae",
+        "88b10912",
+        "2f99e919",
+        "84cfe32f",
+        "7e7ffd8b",
+        "b6d503a8",
+        "2edbb909",
+        "f4eb7140",
+        "a810155f",
+        "2c871597",
+        "ddef7dac",
+        "9579c455",
+        "ad3693f7",
+        "c0c09aea",
+        "a166c3ae",
+        "7e75ddb2",
+        "f0c57ca9",
+        "9a27365c",
+        "dcdaeeb9",
+        "f44a274f",
+        "51300c2d",
+        "bad7a16f",
+        "55890346",
+        "4466a204",
+        "87e4a903",
+        "a6cc79fd",
+        "efbc5f44"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "35c53c11",
+        "2bf0e959",
+        "c5e29d2e",
+        "493e8bd0",
+        "3a6772ae",
+        "88b10912",
+        "2f99e919",
+        "84cfe32f",
+        "7e7ffd8b",
+        "b6d503a8",
+        "2edbb909",
+        "f4eb7140",
+        "a810155f",
+        "2c871597",
+        "ddef7dac",
+        "9579c455",
+        "ad3693f7",
+        "c0c09aea",
+        "a166c3ae",
+        "7e75ddb2",
+        "f0c57ca9",
+        "9a27365c",
+        "dcdaeeb9",
+        "f44a274f",
+        "51300c2d",
+        "bad7a16f",
+        "55890346",
+        "4466a204",
+        "87e4a903",
+        "a6cc79fd",
+        "efbc5f44"
+      ]
+    }
+  }
+}
diff --git a/packages/front-end-interview-guidebook/contents/javascript/en-US.mdx b/packages/front-end-interview-guidebook/contents/javascript/en-US.mdx
new file mode 100644
index 0000000000..63dc719a22
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/javascript/en-US.mdx
@@ -0,0 +1,122 @@
+---
+title: JavaScript Coding Interviews
+description: Question types to expect, important concepts to know and top practice questions to do
+seo_title: JavaScript Coding Interview Questions | How to prepare
+seo_description: Ultimate guide to prepare for JavaScript Coding Interview Questions - including question types, interview best practices, important concepts and practice questions
+social_title: Cracking JavaScript Coding Interviews | Front End Interview Playbook
+---
+
+The difference between coding JavaScript coding questions vs algorithmic coding questions is that the former is usually specific to the front end domain and it makes the most sense to use JavaScript (or [TypeScript](https://www.typescriptlang.org/)) to complete them. You will also probably need to make use of browser/JavaScript-specific APIs and/or utilize HTML/CSS/JavaScript knowledge.
+
+These JavaScript coding questions tend to be practical in nature and can come in one or more of the following categories:
+
+1. Implement standard built-in classes or methods in the JavaScript language
+1. Implement a utility function/class commonly found in popular libraries
+
+## Examples
+
+### JavaScript standard built-in classes/methods
+
+It may seem redundant to implement standard classes/methods when they are already part of the language. However, browsers inconsistencies used to be a rampant problem and some language APIs are not found in older browsers. Hence developers had to resort to polyfilling, the act of providing modern functionality on older browsers that do not natively support it by implementing these APIs in downloaded JavaScript. Being able to implement these native functions also shows good understanding of front end fundamentals.
+
+- **`Array` methods**: [`Array.prototype.map`](/questions/javascript/array-map), [`Array.prototype.reduce`](/questions/javascript/array-reduce), [`Array.prototype.filter`](/questions/javascript/array-filter)
+- **`Promise` and other `Promise`-related functions**: [`Promise.all`](/questions/javascript/promise-all), [`Promise.any`](/questions/javascript/promise-any)
+- **DOM methods**: [`document.getElementsByTagName`](/questions/javascript/get-elements-by-tag-name), [`document.getElementsByClassName`](/questions/javascript/get-elements-by-class-name)
+
+There's more to these functions than meets the eye. Let's take the innocent `Array.prototype.map` for example. Are you aware that:
+
+1. It passes 4 arguments to the callback, including the `index` and `this`?
+1. It keeps the "holes" in sparse arrays, aka `[1, 2, , 4].map(val => val * val) === [1, 4, , 16]`
+1. The range of elements processed by `map` is set before the first call to _callbackfn_. Elements which are appended to the array after the call to `map` begins will not be visited by _callbackfn_. If existing elements of the array are changed, their value as passed to _callbackfn_ will be the value at the time `map` visits them; elements that are deleted after the call to `map` begins and before being visited are not visited. Source: [`Array.prototype.map` ECMAScript specification](https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.map)
+
+Your implementation doesn't have to handle all of these cases, especially the array mutation one. However, it's a positive signal if you mentioned these cases. The closer your implementation is to the specification, the more senior/experienced you will appear to be.
+
+### Utility function/class from popular libraries
+
+These functions/classes are commonly needed when building software with JavaScript but aren't in the standard language (for now).
+
+- **Lodash/Underscore functions**: [`debounce`](/questions/javascript/debounce), [`throttle`](/questions/javascript/throttle), [`flatten`](/questions/javascript/flatten), [`curry`](/questions/javascript/curry), [`cloneDeep`](/questions/javascript/deep-clone)
+- **jQuery methods**: [`jQuery.css`](/questions/javascript/jquery-css), [`jQuery.toggleClass`](/questions/javascript/jquery-class-manipulation)
+- **Popular libraries**:
+  - [`classnames`](/questions/javascript/classnames)
+  - `test`/`expect` functions from testing frameworks like [Jest](https://jestjs.io/)/[Mocha](https://mochajs.org/)/[Vitest](https://vitest.dev/)
+  - [`Emitter`](/questions/javascript/event-emitter) (which exists as part of Node.js and many third party libraries)
+  - [Immutable.js](https://immutable-js.com/)
+  - [Backbone.js](https://backbonejs.org/)
+
+If you take a look at the source code of these libraries, you might find some of the implementation to be quite complex. This is because there are lots of obscure real world use cases that the library has to support. Similar to the standard functions, you're not expected to handle all of these edge cases within an interview setting but you get points for calling them out.
+
+## What to do during JavaScript coding interviews
+
+JavaScript coding interviews share a lot of similarities with algorithmic coding interviews. In general, you should:
+
+1. Find out what platform you are coding on and familiarize yourself with the coding environment:
+   - The supported editor shortcuts
+   - Whether you can execute code
+   - Whether you can install 3rd party dependencies
+1. Make your self introduction under a minute. Unless requested, do not take longer than this otherwise you might not have enough time to code.
+1. Ask clarifying questions upon receiving the question. Clarify the following:
+   - Can you use newer JavaScript syntax (ES2016 and beyond)?
+   - Whether the code is meant to run in the browser or on the server (e.g. Node.js)
+   - Browser support, as this will affect the browser APIs you can use
+1. Propose a solution to your interviewer. Unlike coding interviews, the focus of JavaScript coding interviews is usually not on complex data structures and algorithms. It's possible and likely you can jump straight to the optimal solution with the best choice of data structures and algorithms.
+1. Code out your solution and explain your code to your interviewer while you are coding.
+1. After coding, read through your code once and try to spot basic errors like typos, using variables before initializing them, using APIs incorrectly, etc.
+1. Outline some basic test cases and some edge cases. Test your code with these cases and determine if your code passes them. If it fails, debug the issue(s) and fix them.
+1. Optional: Explain the time/space complexity if the code involved algorithmic optimizations and smart choice of data structures.
+1. Explain any tradeoffs you made, cases you explicitly didn't handle, and how you would improve the code if you had more time.
+1. The interview might not end here, the interviewer might have follow-up questions for you on this question or give you another question. Be prepared for them.
+
+## How to prepare for JavaScript coding interviews
+
+1. Be familiar with HTML, CSS, JavaScript, and DOM concepts by referring to the "Important Concepts" below. The [Quiz section](/front-end-interview-playbook/quiz) can also be a good start since you might be asked on these concepts in the form of quiz questions during coding.
+1. Pick a [study plan](/interviews/get-started) and practice the [JavaScript coding questions](/questions/formats/javascript-functions) recommended for the selected study plan. It's also alright to study for a certain topic as you are doing the questions.
+
+## Important concepts
+
+| Category | Important topics |
+| --- | --- |
+| Data structures | Arrays, Maps, Stacks, Trees, Sets |
+| Algorithms | Binary search, Breadth-first search, Depth-first search, Recursion |
+| JavaScript language | Data types (checking for types, type coercion), Scope, Closures, Callbacks, How `this` keyword works, Object-oriented programming in JavaScript (prototypes, classes, methods), Arrow functions vs normal functions, Invoking functions via `Function.prototype.apply()`/`Function.prototype.call()`, `Promise`, Handling variadic arguments |
+| DOM | DOM traversal, DOM creation, DOM manipulation, Accessing element/node properties, Event delegation |
+| Runtime APIs | Timer (`setTimeout()`, `setInterval()`) |
+
+## Evaluation axes
+
+JavaScript coding interviews are similar to algorithmic coding interviews and the way to go about the interviews should be similar. Naturally, there will be some overlaps with algorithmic coding interviews regarding how candidates are evaluated during JavaScript coding interviews.
+
+- **Problem solving**: Use a systematic and logical approach to understanding and addressing a problem. Break down the problem into smaller independent problems. Evaluate different approaches and their tradeoffs
+- **Software engineering foundation**: Familiarity with data structures, algorithms, runtime complexity analysis, use of design patterns, design solution with clean abstractions
+- **Domain expertise**: Understanding of the front end domain and the relevant languages: Browser (DOM and DOM APIs), HTML, CSS, JavaScript, Performance
+- **Communication**: Ask questions to clarify details and clearly explaining one's approach and considerations
+- **Verification**: Identify various scenarios to test the code against, including edge cases. Be able to diagnose and fix any issues that arise
+
+## Useful tips
+
+- **Wishful thinking**: JavaScript's standard library doesn't have some useful data structures and algorithms like queue, heap, binary search, which can make your life easier during JavaScript coding interviews. However, you can ask the interviewer if you can pretend such a data structure/algorithm exists and use it directly in your solution without implementing it.
+- **Pure functions**: 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.
+- **Choose data structures wisely.** Pay attention to your choice of data structures and be aware of the time complexities of the code. Be familiar with the time/space complexities of the basic JavaScript Array, Object, Set, Map operations should you want to use them in your solution. Some of these time/space complexities differ across languages. Don't write code that runs in O(n<sup>2</sup>) if it can accomplished in O(n) runtime with the use of hash maps.
+- **`this` matters**: If a function accepts a callback function as a parameter, consider how the `this` variable should behave. For many built-in functions, `this` is provided as one of the arguments the callback function is invoked with.
+- **Mutations within callback functions.** Beware of callback functions mutating the data structure it is operating on. You probably do not need to handle this case during interviews but you should explicitly mention such cases if it's relevant.
+- **Recursion edge cases**:
+  - **Clarifying input size**: If you have identified that solving the question requires recursion, ask about the input size and how to handle the case of recursion stack overflow. Usually you won't have to handle it but raising this issue demonstrates thoughtfulness.
+  - **Cyclic structures**: Nested deep data structures can have recursive references to itself, which makes certain operations like serialization and traversal more tricky. Ask the interviewer if you have to handle such cases. Usually you won't have to handle it but raising this issue demonstrates thoughtfulness.
+
+## Best practice questions
+
+From experience, the best JavaScript coding interview questions to practice, as determined by frequency and important concepts covered are:
+
+- [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 has a [comprehensive list of JavaScript coding questions](/questions/formats/javascript-functions) that you can practice. There are also automated tests cases you can run your code against to verify the correctness and solutions written by ex-FAANG Senior Engineers.
+
+Note that we are intentionally vague in some of the questions and don't present the full requirements upfront in the question description. However, we'll cover as much ground as possible in the solution. It may be frustrating while reading the solutions to see that you've missed out some things, but this trains you to think ahead and consider what are the possible areas you have to take note of when working on the solution. Better to find out during practice than during actual interviews.
diff --git a/packages/front-end-interview-guidebook/contents/javascript/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/javascript/pt-BR.mdx
new file mode 100644
index 0000000000..59387c611b
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/javascript/pt-BR.mdx
@@ -0,0 +1,119 @@
+---
+title: Perguntas de entrevista de Front-End JavaScript — Como se preparar
+description: Guia para se preparar para perguntas de JavaScript em entrevistas para desenvolvedores front-end / web — Conceitos a saber, rubricas de entrevista e mais de 70 perguntas de prática importantes.
+---
+
+Guia para se preparar para perguntas de JavaScript em entrevistas para desenvolvedores front-end / web — Conceitos a saber, rubricas de entrevista e mais de 70 perguntas de prática importantes. Você provavelmente também precisará usar APIs específicas de navegador/JavaScript e/ou utilizar conhecimentos de HTML/CSS/JavaScript.
+
+Exato, você provavelmente precisará utilizar Apis específicas do navegador/JavaScript e/ou aplicar conhecimentos em Html/Css/JavaScript:
+
+1.  Implemente classes ou métodos padrão incorporados na linguagem JavaScript.
+2.  Implemente uma função/utilitário/classe comumente encontrada em bibliotecas populares.
+
+## Exemplos
+
+### Classes/Métodos Padrão Incorporados em JavaScript
+
+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).
+
+Há mais nessas funções do que aparenta à primeira vista. Vamos pegar o inocente `Array.prototype.map`, por exemplo. Você está ciente de que:
+
+1.  Ele passa 4 argumentos para o retorno de chamada, incluindo o `índice` e o `this`?
+2.  Ele mantém os "buracos" em matrizes esparsas, como `[1, 2, , 4].map(val => val * val) === [1, 4, , 16]`.
+3.  A faixa de elementos processados pelo `map` é definida antes da primeira chamada a `_callbackfn_`. Elementos que são adicionados ao array após o início da chamada para `map` não serão visitados por `_callbackfn_`. Se os elementos existentes do array forem alterados, o valor passado para `_callbackfn_` será o valor no momento em que `map` os visitar; elementos que forem excluídos após o início da chamada para `map` e antes de serem visitados não serão visitados. Fonte: [`Array.prototype.map` Especificação do ECMAScript](https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.map)
+
+Sua implementação não precisa lidar com todos esses casos, especialmente o da mutação do array. No entanto, é um sinal positivo se você mencionar esses casos durante a implementação. Quanto mais próxima for a sua implementação da especificação, mais sênior/experiente você parecerá ser.
+
+### Função/Classe utilitária de bibliotecas populares
+
+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/)
+
+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.
+
+## O que fazer durante entrevistas de codificação em JavaScript
+
+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.
+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.
+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.
+7.  Elabore alguns casos de teste básicos e alguns casos limite (edge cases). Teste seu código com esses casos e determine se o código os passa com sucesso. Se falhar, depure o(s) problema(s) e corrija-os.
+8.  Opcional: Explique a complexidade de tempo/espaço se o código envolver otimizações algorítmicas e uma escolha inteligente de estruturas de dados.
+9.  Explique qualquer trade-off que você tenha feito, casos que você não tratou explicitamente e como você melhoraria o código se tivesse mais tempo.
+10. A entrevista pode não terminar aqui; o entrevistador pode ter perguntas de acompanhamento sobre esta questão ou apresentar outra pergunta. Esteja preparado para elas.
+
+## Como se preparar para entrevistas de codificação em JavaScript
+
+1.  Esteja familiarizado com os conceitos de HTML, CSS, JavaScript e DOM, consultando os "Conceitos Importantes" abaixo. A seção de [Quiz](/front-end-interview-playbook/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.  Escolha um [plano de estudos](/interviews/get-started) e pratique as [perguntas de codificação JavaScript](/questions/formats/javascript-functions) recomendadas para o plano de estudos selecionado. Também está tudo bem estudar um tópico específico enquanto você está fazendo as perguntas.
+
+## 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()`) |
+
+## 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.
+
+## 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.
+
+## **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)
+
+A GreatFrontEnd possui uma [lista abrangente de perguntas de codificação JavaScript](/questions/javascript-interview-questions/javascript-functions) 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.
+
+Note que, de propósito, somos vagos em algumas das perguntas e não apresentamos os requisitos completos de imediato na descrição da pergunta. No entanto, abordaremos o máximo possível na solução. Pode ser frustrante ao ler as soluções perceber que você deixou passar algumas coisas, mas isso o treina a pensar adiante e considerar quais são as áreas possíveis que você deve observar ao trabalhar na solução. É mais proveitoso descobrir durante a preparação do que durante entrevistas de verdade.
diff --git a/packages/front-end-interview-guidebook/contents/javascript/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/javascript/zh-CN.mdx
new file mode 100644
index 0000000000..625042379e
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/javascript/zh-CN.mdx
@@ -0,0 +1,122 @@
+---
+title: JavaScript 编码面试
+description: 期望的问题类型、需要了解的重要概念以及要做的顶级练习题
+seo_title: JavaScript 编码面试问题 | 如何准备
+seo_description: 准备 JavaScript 编码面试问题的终极指南 - 包括问题类型、面试最佳实践、重要概念和练习题
+social_title: 破解 JavaScript 编码面试 | 前端面试手册
+---
+
+编写 JavaScript 编码问题与算法编码问题的区别在于，前者通常特定于前端领域，使用 JavaScript（或 [TypeScript](https://www.typescriptlang.org/)）来完成它们是最有意义的。 您可能还需要使用特定于浏览器/JavaScript 的 API 和/或利用 HTML/CSS/JavaScript 知识。
+
+这些 JavaScript 编码问题往往具有实践性，可以分为以下一个或多个类别：
+
+1. 在 JavaScript 语言中实现标准的内置类或方法
+2. 实现常用库中常见的实用函数/类
+
+## 示例
+
+### JavaScript 标准内置类/方法
+
+实现标准类/方法似乎是多余的，因为它们已经是语言的一部分。 然而，浏览器不一致曾经是一个猖獗的问题，并且在旧的浏览器中找不到一些语言 API。 因此，开发人员不得不求助于 polyfilling，即通过在下载的 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.prototype.map` 为例。 你知道吗：
+
+1. 它向回调函数传递 4 个参数，包括 `index` 和 `this`?
+2. 它保留稀疏数组中的“空洞”，即 `[1, 2, , 4].map(val => val * val) === [1, 4, , 16]`
+3. `map` 处理的元素范围在首次调用 *callbackfn* 之前设置。在调用 `map` 开始后添加到数组中的元素将不会被 *callbackfn* 访问。如果更改了数组的现有元素，则它们作为 *callbackfn* 传递的值将是 `map` 访问它们时的值；在调用 `map` 开始后但在访问之前删除的元素不会被访问。 来源：[`Array.prototype.map` ECMAScript 规范](https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.map)
+
+您的实现不必处理所有这些情况，尤其是数组变异情况。 但是，如果您提到了这些情况，这是一个积极的信号。 您的实现越接近规范，您看起来就越资深/经验丰富。
+
+### 来自流行库的实用函数/类
+
+这些函数/类在用 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/)/[Vitest](https://vitest.dev/)）的 `test`/`expect` 函数
+  * [`Emitter`](/questions/javascript/event-emitter)（作为 Node.js 和许多第三方库的一部分存在）
+  * [Immutable.js](https://immutable-js.com/)
+  * [Backbone.js](https://backbonejs.org/)
+
+如果您查看这些库的源代码，您可能会发现某些实现非常复杂。 这是因为该库必须支持许多模糊的实际用例。 与标准函数类似，您不希望在面试环境中处理所有这些极端情况，但您可以因将它们指出来获得积分。
+
+## JavaScript 编码面试期间该做什么
+
+JavaScript 编码面试与算法编码面试有很多相似之处。总的来说，你应该：
+
+1. 找出您正在使用的平台，并熟悉编码环境：
+   * 支持的编辑器快捷方式
+   * 您是否可以执行代码
+   * 您是否可以安装第三方依赖项
+2. 在一分钟内进行自我介绍。 除非有要求，否则不要超过此时间，否则您可能没有足够的时间来编写代码。
+3. 收到问题后，提出澄清问题。 澄清以下内容：
+   * 您可以使用较新的 JavaScript 语法（ES2016 及更高版本）吗？
+   * 代码是打算在浏览器中运行还是在服务器上运行（例如 Node.js）
+   * 浏览器支持，因为这会影响您可以使用的浏览器 API
+4. 向面试官提出解决方案。 与编码面试不同，JavaScript 编码面试的重点通常不在于复杂的数据结构和算法。 您可以并且很可能可以直接跳到具有最佳数据结构和算法选择的最佳解决方案。
+5. 编写您的解决方案，并在您编写代码时向面试官解释您的代码。
+6. 编码后，通读您的代码一次，并尝试发现基本错误，例如拼写错误、在使用变量之前初始化它们、不正确地使用 API 等。
+7. 概述一些基本测试用例和一些边缘情况。 使用这些用例测试您的代码，并确定您的代码是否通过了它们。 如果失败，请调试问题并修复它们。
+8. 可选：如果代码涉及算法优化和智能数据结构选择，请解释时间和空间复杂度。
+9. 解释您所做的任何权衡、您明确未处理的案例以及如果您有更多时间将如何改进代码。
+10. 面试可能不会在这里结束，面试官可能会就此问题向您提出后续问题或给您另一个问题。 为他们做好准备。
+
+## 如何准备 JavaScript 编码面试
+
+1. 通过参考下面的“重要概念”，熟悉 HTML、CSS、JavaScript 和 DOM 概念。 [测验部分](/front-end-interview-playbook/quiz) 也可以是一个好的开始，因为你可能会在编码期间以测验问题的形式被问到这些概念。
+2. 选择一个 [学习计划](/interviews/get-started) 并练习为所选学习计划推荐的 [JavaScript 编码问题](/questions/formats/javascript-functions)。 在做题的同时学习某个主题也是可以的。
+
+## 重要概念
+
+| 类别 | 重要主题 |
+| --- | --- |
+| 数据结构 | 数组、映射、堆栈、树、集合 |
+| 算法 | 二分查找、广度优先搜索、深度优先搜索、递归 |
+| JavaScript 语言 | 数据类型（检查类型、类型强制转换）、作用域、闭包、回调、`this` 关键字的工作方式、JavaScript 中的面向对象编程（原型、类、方法）、箭头函数与普通函数、通过 `Function.prototype.apply()`/`Function.prototype.call()` 调用函数、`Promise`、处理可变参数 |
+| DOM | DOM 遍历、DOM 创建、DOM 操作、访问元素/节点属性、事件委托 |
+| 运行时 API | 计时器 (`setTimeout()`、`setInterval()`) |
+
+## 评估轴
+
+JavaScript 编码面试类似于算法编码面试，进行面试的方式也应该类似。当然，在候选人在 JavaScript 编码面试中如何被评估方面，将与算法编码面试有一些重叠。
+
+* **解决问题**：使用系统和逻辑方法来理解和解决问题。 将问题分解为较小的独立问题。 评估不同的方法及其权衡
+* **软件工程基础**：熟悉数据结构、算法、运行时复杂度分析、设计模式的使用、使用干净的抽象设计解决方案
+* **领域专业知识**：了解前端领域和相关语言：浏览器（DOM 和 DOM API）、HTML、CSS、JavaScript、性能
+* **沟通**：提问以澄清细节，并清楚地解释自己的方法和考虑因素
+* **验证**：确定各种场景以测试代码，包括边缘情况。 能够诊断和修复出现的任何问题
+
+## 有用的提示
+
+* **一厢情愿**：JavaScript 的标准库没有一些有用的数据结构和算法，如队列、堆、二分查找，这可以在 JavaScript 编码面试期间让您的生活更轻松。 但是，您可以询问面试官是否可以假装存在这样的数据结构/算法，并在您的解决方案中直接使用它，而无需实现它。
+* **纯函数**：旨在编写纯函数，这些函数具有可重用性和模块化的好处，又名不依赖于函数外部状态且不会引起副作用的函数。
+* **明智地选择数据结构。** 注意您选择的数据结构，并注意代码的时间复杂度。 熟悉基本 JavaScript 数组、对象、集合、映射操作的时间/空间复杂度，如果您想在您的解决方案中使用它们。 其中一些时间/空间复杂度因语言而异。 如果可以使用哈希映射在 O(n) 运行时完成，请不要编写以 O(n<sup>2</sup>) 运行的代码。
+* **`this`很重要**：如果一个函数接受一个回调函数作为参数，请考虑 `this` 变量应该如何表现。 对于许多内置函数，`this` 作为回调函数被调用的参数之一提供。
+* **回调函数中的突变。** 谨防回调函数改变其操作的数据结构。 您可能不需要在面试期间处理这种情况，但如果相关，您应该明确提及此类情况。
+* **递归边缘情况**：
+  * **澄清输入大小**：如果您已确定解决问题需要递归，请询问输入大小以及如何处理递归堆栈溢出的情况。 通常您不必处理它，但提出这个问题表明了深思熟虑。
+  * **循环结构**：嵌套的深层数据结构可以对自身进行递归引用，这使得某些操作（如序列化和遍历）更加棘手。 询问面试官您是否必须处理此类情况。 通常您不必处理它，但提出这个问题表明了深思熟虑。
+
+## 最佳实践问题
+
+根据经验，根据涵盖的频率和重要概念，最佳的 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)
+
+GreatFrontEnd 有一个 [全面的 JavaScript 编码问题列表](/questions/formats/javascript-functions)，你可以练习。 还有自动测试用例，你可以针对这些用例运行你的代码，以验证前 FAANG 高级工程师编写的正确性和解决方案。
+
+请注意，我们在某些问题中故意含糊不清，并且没有在问题描述中预先呈现完整的需求。 但是，我们将在解决方案中尽可能多地涵盖内容。 在阅读解决方案时，你可能会感到沮丧，因为你错过了一些东西，但这可以训练你提前思考并考虑在处理解决方案时可能需要注意的领域。 最好在练习中发现，而不是在实际面试中发现。
diff --git a/packages/front-end-interview-guidebook/contents/overview/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/overview/en-US.langnostic.json
new file mode 100644
index 0000000000..34bf6d8441
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/overview/en-US.langnostic.json
@@ -0,0 +1,112 @@
+{
+  "frontmatter": {
+    "title": "f264a18",
+    "description": "cadf8c0a",
+    "seo_title": "597f69db",
+    "seo_description": "48c97f2d",
+    "social_title": "3a04eb09"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "2e8b4723",
+        "1552b496",
+        "7579fce0",
+        "2b2ecb7d",
+        "dd48cb53",
+        "7b5438f6",
+        "12a4b48b",
+        "171ba949",
+        "2c0e1de9",
+        "9fe44503",
+        "c559dbe2",
+        "fcc379ee",
+        "5747a8a0",
+        "72b91d6",
+        "c68dfa68",
+        "967646dc",
+        "35cd17b5",
+        "84dd7a0c",
+        "6d972773",
+        "1922fbc3",
+        "ffabcd47",
+        "82f36e55",
+        "80e7d9b0",
+        "dc87e224",
+        "508cf78a",
+        "ea5939f0",
+        "f17fa2f",
+        "29cb15f3",
+        "788133a2",
+        "c34e2cd6",
+        "3535c343",
+        "ce77c4b6",
+        "8745c277",
+        "2f29f41",
+        "d16bbea",
+        "5ae72edb",
+        "736a07d5",
+        "6948f229",
+        "c39d20cb",
+        "14af9fbb",
+        "10ef9cad",
+        "3607fb25",
+        "74bdb403",
+        "fe6b5994",
+        "e10248d9",
+        "70cd2c67"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "2e8b4723",
+        "1552b496",
+        "7579fce0",
+        "2b2ecb7d",
+        "dd48cb53",
+        "7b5438f6",
+        "12a4b48b",
+        "171ba949",
+        "2c0e1de9",
+        "9fe44503",
+        "c559dbe2",
+        "fcc379ee",
+        "5747a8a0",
+        "72b91d6",
+        "c68dfa68",
+        "967646dc",
+        "35cd17b5",
+        "84dd7a0c",
+        "6d972773",
+        "1922fbc3",
+        "ffabcd47",
+        "82f36e55",
+        "80e7d9b0",
+        "dc87e224",
+        "508cf78a",
+        "ea5939f0",
+        "f17fa2f",
+        "29cb15f3",
+        "788133a2",
+        "c34e2cd6",
+        "3535c343",
+        "ce77c4b6",
+        "8745c277",
+        "2f29f41",
+        "d16bbea",
+        "5ae72edb",
+        "736a07d5",
+        "6948f229",
+        "c39d20cb",
+        "14af9fbb",
+        "10ef9cad",
+        "3607fb25",
+        "74bdb403",
+        "fe6b5994",
+        "e10248d9",
+        "70cd2c67"
+      ]
+    }
+  }
+}
diff --git a/packages/front-end-interview-guidebook/contents/overview/en-US.mdx b/packages/front-end-interview-guidebook/contents/overview/en-US.mdx
new file mode 100644
index 0000000000..3e3afa47ff
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/overview/en-US.mdx
@@ -0,0 +1,147 @@
+---
+title: 'Front End Interviews: An Introduction'
+description: Everything you need to know - from types of questions to preparation tactics
+seo_title: Quick Start Guide to Front End Interviews - Everything to Know
+seo_description: Kickstart your front end interview preparation with this quickstart guide. Explore interview formats, essential tips, and question types asked by by company.
+social_title: Front End Interviews - A Quick Start Guide | GreatFrontEnd
+---
+
+Front End Interviews are notoriously hard to prepare for. There are many possible interview formats and there isn't a standardized structure across the industry for evaluating front end engineers. Some companies use the same interview process for Front End Engineers as they do for generalist Software Engineers while some companies (e.g. Google and Amazon) do a mix where they have both general software engineering rounds and front end domain-specific rounds.
+
+In recent years, the industry is gradually shifting away from asking front end interview candidates to solve data structures and algorithms (DSA) questions. Instead, candidates will have to implement common front end library functions and/or build practical UI components/apps which tests their understanding of practical and relevant front end concepts. This is an encouraging trend because unlike most DSA questions, front end interview questions are highly relevant to a front end engineer's day-to-day responsibilities and is a more accurate assessment.
+
+However, many existing software engineering interview resources are geared towards general software engineering roles instead of Front End Engineers which is a much smaller and niche field; you can barely find any resources on Front End System Design. These factors combined with the breadth of possible domain topics makes preparing for front end interviews a long, tedious, and tough process.
+
+Fear not! GreatFrontEnd aims to be the best resource for Front End Engineers to ace their front end interviews by being a one-stop platform to equip Front End Engineers with the necessary knowledge and practice. On GreatFrontEnd, readers can:
+
+1. Learn how to create an [**awesome resume tailored for Front End Engineering job listings**](/front-end-interview-playbook/resume).
+1. Learn **important front end concepts and techniques** that apply to all question types.
+1. Prepare for the most common **front end interview question types** (coding, system design, quiz, behavioral).
+1. [**Practice questions**](/questions) across the most common front end interview formats along with **high quality solutions** written by ex-FAANG Senior Engineers.
+1. Browse suggested [**study plans**](/interviews/get-started) and adopt a **structured preparation approach**.
+
+## Prepare an awesome resume
+
+Your resume is the first opportunity to make an impression on potential employers and is crucial for getting shortlisted at your dream companies.
+
+If you are facing difficulties getting interviews for jobs you apply to despite having the necessary qualifications, it could be because of your resume. Even highly qualified candidates may not know how to effectively present their accomplishments in their resume and therefore may not get shortlisted. It is important to remember that being underqualified is not always the reason for not being selected; sometimes it is simply a matter of poor presentation and not including the important content. Once you have made it through the resume screening process, your past achievements are secondary and your technical skills become paramount, which can be learned and improved upon. Hence getting your foot in the door by submitting a great resume that represents you well is extremely important.
+
+While there are existing resources on how to make a good Software Engineering resume such as the [Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/) and [FAANG Tech Leads' Resume Handbook](https://www.faangtechleads.com/resume/handbook), they are general and not specific to Front End Engineers. We have written some [tips on how to tailor your resume for Front End Engineering positions](/front-end-interview-playbook/resume).
+
+## Prepare by question formats
+
+There are many different formats a front end interview loop can be conducted and each company does things differently. To be efficient in your preparation, you should find out the different interview stages of the companies you are interviewing with, the various rounds within each stage, and the question types you will be asked in each round.
+
+Each question format has its own challenges and quirks. We'll introduce you to the various formats and you can read the dedicated pages for each type if you'd like to find out more.
+
+### Coding questions
+
+Coding questions will involve writing code (duh!). However, the code you will be required to write and the platforms you will write the code on can vary wildly. You could be asked about:
+
+1. **Algorithmic coding**: Solve tricky algorithmic questions that evaluates your understanding of data structures, algorithms and time complexity. [Read about Algorithmic Coding Interviews](/front-end-interview-playbook/algorithms).
+1. **JavaScript coding**: Implement functions or data structures in JavaScript that are related to front end domain and commonly used during front end development. [Read about JavaScript Coding Interviews](/front-end-interview-playbook/javascript).
+1. **User interface coding**: Build user interfaces (components, widgets, apps) using HTML, CSS, and JavaScript, sometimes even using JavaScript frameworks. [Read about User Interface Coding Interviews](/front-end-interview-playbook/user-interface).
+
+Companies are trending towards using domain-specific coding questions and less on testing about algorithms and data structures as the former is more relevant for evaluating the core skills needed for front end engineering work.
+
+### System design questions
+
+System design interviews are highly open-ended interviews that involve coming up with a software system design to solve a vague problem or scenario. Candidates will have to break down a system into smaller components, draw architecture diagrams, design APIs, dive into certain parts of the system and discuss tradeoffs in order to succeed.
+
+System design interviews are usually only given to senior level candidates and the required systems can be one of the following types and examples:
+
+1. **Distributed systems**: Twitter back end, URL shortener
+1. **Client applications**: Newsfeed, Photo sharing applications
+1. **Complex user interface components**: Autocomplete, Dropdown menu, Modal
+
+Most of the time, Front End Engineers will be asked to design client applications and complex user interface components as those products are more relevant to front end engineering.
+
+[Read more about Front End System Design ->](/front-end-interview-playbook/system-design)
+
+### Quiz questions
+
+Quiz questions, also known as trivia questions, are short questions meant to test your understanding of the domain. Each question shouldn't take more than a minute or two to answer.
+
+There usually wouldn't be entire interview rounds just asking you quiz questions, but they could be sprung onto you in the middle of other interview rounds.
+
+[Read more about Quiz Questions ->](/front-end-interview-playbook/quiz)
+
+## Behavioral questions/interviews
+
+In behavioral interviews, interviewer asks questions about your past behaviors and experiences in order to evaluate your suitability for the job and maturity level.
+
+The idea behind behavioral interviews is that past behaviors and experiences are good indicators of how someone will behave in the future, so the interviewer will ask questions that are designed to get you to describe specific situations you have faced and how you have dealt with them in order to get a better understanding about you beyond your technical capabilities.
+
+Behavioral interviews is a large topic on its own and we have [written an entire playbook on it](/behavioral-interview-playbook).
+
+## Typical hiring process
+
+Most companies will have a process resembling:
+
+1. **Initial screen**
+   - Recruiter call (Quiz questions may be asked)
+   - Autograded online assessments or take home projects
+2. **Phone screen**
+   - Coding (Implementing algorithms, JavaScript functions, or building user interfaces)
+3. **Full loop**
+   - Coding round (Implementing algorithms, JavaScript functions, or building user interfaces)
+   - System design round
+   - Behavioral round
+
+The surest way to know what to expect is to ask the company recruiter about their interview process for the role. Good companies will even prepare a detailed document to explain each stage of the interview process along with resources to guide the candidates to prepare for the interviews. For big companies that see a large volume of applicants, there's a good chance that some candidates who have interviewed with them will share their experience on platforms like [Glassdoor](https://www.glassdoor.com/), [Blind](https://www.teamblind.com/), and [Reddit](https://www.reddit.com/).
+
+**You must know what question types to expect in interviews, otherwise you'll be flying blind and not be able to prepare effectively.**
+
+### Round-type matrix
+
+The following matrix shows the relevance/likelihood of each question type during each interview round. It's possible that an interview round can include questions from different question types.
+
+| Round             | Quiz   | Algorithms | UI   | JavaScript | System design |
+| ----------------- | ------ | ---------- | ---- | ---------- | ------------- |
+| Online assessment | Medium | High       | High | High       | None          |
+| Recruiter call    | Medium | None       | None | None       | None          |
+| Take-home project | None   | None       | High | Medium     | Medium        |
+| Coding            | Low    | High       | High | High       | Low           |
+| Behavioral        | Low    | None       | None | None       | None          |
+| System design     | Low    | None       | Low  | None       | High          |
+| Hiring manager    | Low    | None       | None | None       | Low           |
+
+### Question types asked by companies
+
+Here's a summary of the question types asked by the top US companies.
+
+| Company | Quiz | Algorithms | JavaScript | UI | System design | Behavioral |
+| :-- | :-: | :-: | :-: | :-: | :-: | :-: |
+| Airbnb | No | Yes | Yes | Yes | No | Yes |
+| Amazon | Yes | Yes | Yes | Yes | Yes | Yes |
+| Apple | Yes | Yes | Yes | Yes | Unknown | Yes |
+| ByteDance | Yes | Yes | Yes | Yes | No | Yes |
+| Dropbox | No | Yes | Yes | Yes | Yes | Yes |
+| Facebook/Meta | Yes | No | Yes | No | Yes | Yes |
+| Google | Yes | Yes | Yes | Yes | Yes | Yes |
+| LinkedIn | Yes | Yes | Yes | Yes | Unknown | Yes |
+| Lyft | No | No | Yes | Yes | Yes | Yes |
+| Microsoft | Yes | Yes | Yes | Yes | Yes | Yes |
+| OpenAI | Yes | Maybe | No | Yes | Yes | Yes |
+| X | Yes | Yes | Yes | Yes | Yes | Yes |
+| Uber | Unknown | Unknown | Yes | Yes | Unknown | Yes |
+
+**Question type legend**
+
+- **Quiz**: Closed ended quiz/trivia-style question
+- **Algorithms**: Implement a function that solves an algorithmic problem. It is usually not front end domain specific
+- **JavaScript**: Implement a function/class in JavaScript that is related to the front end domain
+- **UI**: Build a user interface using HTML/CSS/JavaScript. Some companies allow you to use a framework of your choice while some only allow Vanilla JS/certain frameworks
+- **System design**: Design a system and discuss the architecture and its components
+- **Behavioral**: Discuss your specific experience working with others and how you handled difficult scenarios
+
+## Study and practice
+
+Read on to find out how to prepare for the following front end interview formats/questions types:
+
+- [Coding Questions](/front-end-interview-playbook/coding)
+  - [Algorithmic Questions](/front-end-interview-playbook/algorithms)
+  - [JavaScript Questions](/front-end-interview-playbook/javascript)
+  - [User Interface Questions](/front-end-interview-playbook/user-interface)
+- [System Design Questions](/front-end-interview-playbook/system-design)
+- [Quiz Questions](/front-end-interview-playbook/quiz)
diff --git a/packages/front-end-interview-guidebook/contents/overview/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/overview/pt-BR.mdx
new file mode 100644
index 0000000000..505b9afd05
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/overview/pt-BR.mdx
@@ -0,0 +1,143 @@
+---
+title: Entrevistas de Front-End — Visão Geral Definitiva e Guia de Preparação
+description: O guia definitivo para entrevistas de desenvolvedor Front-End/Web por ex-entrevistadores em empresas de tecnologia de alto nível (FAANG). Descubra tudo — o que esperar, tipos de perguntas de entrevista e como se preparar.
+---
+
+As entrevistas de Front-End são conhecidas por serem difíceis de se preparar. Existem muitos formatos de entrevista possíveis, e não há uma estrutura padronizada em toda a indústria para avaliar engenheiros Front-End. Algumas empresas utilizam o mesmo processo de entrevista para Engenheiros Front-End que fazem para Engenheiros de Software generalistas, enquanto algumas empresas (por exemplo, Google e Amazon) fazem uma combinação, incluindo rodadas tanto de engenharia de software geral quanto de engenharia de Front-End específica do domínio.
+
+Nos últimos anos, a indústria está gradualmente afastando-se de pedir aos candidatos de entrevista de Front-End para resolver questões de estruturas de dados e algoritmos (DSA). Em vez disso, os candidatos terão que implementar funções comuns de bibliotecas de Front-End e/ou construir componentes/aplicativos de interface do usuário práticos, o que testa sua compreensão de conceitos práticos e relevantes de Front-End. Esta é uma tendência encorajadora porque, ao contrário da maioria das questões de estruturas de dados e algoritmos, as perguntas de entrevista de Front-End são altamente relevantes para as responsabilidades cotidianas de um engenheiro de Front-End e representam uma avaliação mais precisa.
+
+No entanto, muitos dos recursos existentes para entrevistas de engenharia de software estão direcionados para funções de engenharia de software geral, em vez de para Engenheiros Front-End, que é um campo muito menor e mais específico. É difícil encontrar recursos sobre Design de Sistema para Front End. Esses fatores, combinados com a ampla variedade de tópicos possíveis no domínio, tornam a preparação para entrevistas de Front-End um processo longo, tedioso e desafiador.
+
+Não tenha medo! O GreatFrontEnd tem como objetivo ser o melhor recurso para os Engenheiros Front-End terem sucesso em suas entrevistas de Front-End, sendo uma plataforma única para fornecer aos Engenheiros Front-End o conhecimento e a prática necessários. No GreatFrontEnd, os leitores podem:
+
+1.  Aprender como criar um [**currículo incrível adaptado para listagens de empregos em Engenharia Front-End**](/front-end-interview-playbook/resume).
+2.  Aprender **conceitos e técnicas importantes de front-end** que se aplicam a todos os tipos de perguntas.
+3.  Preparar-se para os tipos mais comuns de perguntas em entrevistas de **front-end** (codificação, design de sistema, quiz, comportamental).
+4.  [**Perguntas de prática**](/questions) em diversos formatos comuns de entrevistas de front-end, juntamente com **soluções de alta qualidade** escritas por ex-engenheiros sêniores da FAANG.
+5.  Navegar pelos [**planos de estudo sugeridos**](/interviews/get-started) e adotar uma **abordagem de preparação estruturada**.
+
+## Preparar um Currículo Incrível
+
+Seu currículo é a primeira oportunidade de causar uma impressão em potenciais empregadores e é crucial para ser selecionado em suas empresas dos sonhos.
+
+Se você está enfrentando dificuldades para conseguir entrevistas para os empregos aos quais se candidata, apesar de ter as qualificações necessárias, pode ser devido ao seu currículo. Mesmo candidatos altamente qualificados podem não saber como apresentar eficazmente suas realizações em seus currículos e, por isso, podem não ser selecionados. É importante lembrar que a falta de qualificação nem sempre é a razão para não ser selecionado; às vezes, é simplesmente uma questão de má apresentação e não incluir o conteúdo importante. Depois de passar pelo processo de triagem do currículo, suas realizações passadas se tornam secundárias e suas habilidades técnicas se tornam primordiais, as quais podem ser aprendidas e aprimoradas. Portanto, conseguir uma oportunidade inicial ao enviar um currículo excelente que represente você de forma eficaz é extremamente importante.
+
+Embora existam recursos disponíveis sobre como criar um bom currículo de Engenharia de Software, como o [Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/) e o [FAANG Tech Leads' Resume Handbook](https://www.faangtechleads.com/resume/handbook), eles são gerais e não específicos para Engenheiros Front-End. Nós escrevemos algumas [dicas sobre como adaptar o seu currículo para posições de Engenharia Front-End](/front-end-interview-playbook/resume).
+
+## Preparar por Tipos de Perguntas
+
+Existem muitos formatos diferentes em que uma entrevista de front-end pode ser conduzida, e cada empresa faz as coisas de maneira diferente. Para ser eficiente em sua preparação, você deve descobrir as diferentes etapas de entrevista das empresas com as quais está entrevistando, as várias rodadas dentro de cada etapa e os tipos de perguntas que serão feitas em cada rodada.
+
+Cada formato de pergunta tem seus próprios desafios e peculiaridades. Vamos apresentar a você os diversos formatos e você pode ler as páginas dedicadas a cada tipo se quiser saber mais.
+
+### Perguntas de Codificação
+
+Perguntas de codificação envolverão escrever código (óbvio!). No entanto, o código que você será solicitado a escrever e as plataformas nas quais você escreverá o código podem variar bastante. Você poderia ser questionado sobre:
+
+1.  **Codificação Algorítmica**: Resolver questões algorítmicas complicadas que avaliam sua compreensão de estruturas de dados, algoritmos e complexidade de tempo. [Leia sobre Entrevistas de Codificação Algorítmica.](/front-end-interview-playbook/algorithms).
+2.  **Codificação em JavaScript**: Implementar funções ou estruturas de dados em JavaScript relacionadas ao domínio de front-end e comumente usadas durante o desenvolvimento de front-end. [Leia sobre Entrevistas de Codificação em JavaScript.](/front-end-interview-playbook/javascript).
+3.  **Codificação de Interface de Usuário**: Construir interfaces de usuário (componentes, widgets, aplicativos) usando HTML, CSS e JavaScript, às vezes até mesmo usando frameworks JavaScript. [Leia sobre Entrevistas de Codificação de Interface de Usuário](/front-end-interview-playbook/user-interface).
+
+As empresas estão seguindo a tendência de usar perguntas de codificação específicas do domínio e menos testes sobre algoritmos e estruturas de dados, pois as primeiras são mais relevantes para avaliar as habilidades essenciais necessárias para o trabalho em Engenharia Front-End.
+
+### Perguntas de Design de Sistema
+
+Entrevistas de Design de Sistema são entrevistas altamente abertas que envolvem a criação de um projeto de sistema de software para resolver um problema ou cenário vago. Os candidatos terão que decompor um sistema em componentes menores, desenhar diagramas de arquitetura, projetar APIs, analisar determinadas partes do sistema e discutir compensações (trade-offs) para ter sucesso.
+
+As entrevistas de design de sistema geralmente são concedidas apenas a candidatos de nível sênior, e os sistemas necessários podem ser de um dos seguintes tipos e exemplos:
+
+1.  **Sistemas Distribuídos**: Backend do Twitter, Encurtador de URLs
+2.  **Aplicações de Cliente**: Feed de Notícias, Aplicativos de Compartilhamento de Fotos
+3.  **Componentes de Interface de Usuário Complexos**: Autocompletar, Menu Suspenso (Dropdown), Modal
+
+Na maioria das vezes, Engenheiros Front-End serão solicitados a projetar aplicativos de cliente e componentes de interface de usuário complexos, pois esses produtos são mais relevantes para a Engenharia Front-End.
+
+[Leia mais sobre Design de Sistema Front-End](/front-end-interview-playbook/system-design)
+
+### Perguntas de Quiz
+
+Perguntas de quiz, também conhecidas como perguntas de trivia, são perguntas curtas destinadas a testar sua compreensão do domínio. Cada pergunta não deve levar mais do que um ou dois minutos para responder.
+
+Normalmente, não haverá rodadas inteiras de entrevista apenas fazendo perguntas de quiz, mas elas podem ser apresentadas a você no meio de outras rodadas de entrevista.
+
+[Leia mais sobre Perguntas de Quiz](/front-end-interview-playbook/quiz).
+
+## Perguntas/Entrevistas Comportamentais
+
+Em entrevistas comportamentais, o entrevistador faz perguntas sobre seus comportamentos e experiências passadas para avaliar sua adequação para o trabalho e nível de maturidade.
+
+A ideia por trás das entrevistas comportamentais é que comportamentos e experiências passadas são bons indicadores de como alguém se comportará no futuro. Portanto, o entrevistador fará perguntas projetadas para fazer com que você descreva situações específicas que enfrentou e como lidou com elas, a fim de obter uma compreensão mais profunda sobre você, além de suas habilidades técnicas.
+
+Entrevistas comportamentais são um tópico amplo por si só, e nós [escrevemos um guia completo sobre o assunto](/behavioral-interview-playbook).
+
+## Processo de Contratação Típico
+
+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
+2.  **Entrevista por Telefone**
+    - 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
+
+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.
+
+**Você deve saber quais tipos de perguntas esperar em entrevistas, caso contrário, estará no escuro e não poderá se preparar de forma eficaz.**
+
+### Matriz de Tipos de Rodadas
+
+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 |
+
+### 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 |
+
+**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.
+
+## 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-playbook/coding)
+  - [Codificação Algoritmica](/front-end-interview-playbook/algorithms)
+  - [Questões de JavaScript](/front-end-interview-playbook/javascript)
+  - [Codificação de Interface do Usuário](/front-end-interview-playbook/user-interface)
+- [Perguntas de Design do Sistema](/front-end-interview-playbook/system-design)
+- [Perguntas do Quiz](/front-end-interview-playbook/quiz)
diff --git a/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx
new file mode 100644
index 0000000000..9305f23087
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/overview/zh-CN.mdx
@@ -0,0 +1,147 @@
+---
+title: 前端面试：简介
+description: 您需要了解的一切 - 从问题类型到准备策略
+seo_title: 前端面试快速入门指南 - 必知的一切
+seo_description: 通过本快速入门指南开始您的前端面试准备。探索面试形式、基本技巧以及公司提出的问题类型。
+social_title: 前端面试 - 快速入门指南 | GreatFrontEnd
+---
+
+准备前端面试是出了名的难。面试形式多种多样，而且整个行业在评估前端工程师方面没有统一的标准结构。一些公司对前端工程师的面试流程与对普通软件工程师的面试流程相同，而另一些公司（例如谷歌和亚马逊）则混合使用，既有通用的软件工程环节，也有前端特定领域的环节。
+
+近年来，行业正在逐渐放弃要求前端面试候选人解决数据结构和算法 (DSA) 问题。相反，候选人将不得不实现常见的前端库函数和/或构建实用的 UI 组件/应用程序，从而测试他们对实用且相关的前端概念的理解。这是一个令人鼓舞的趋势，因为与大多数 DSA 问题不同，前端面试问题与前端工程师的日常职责高度相关，并且是一种更准确的评估。
+
+然而，许多现有的软件工程面试资源都是针对普通软件工程角色，而不是前端工程师，后者是一个规模小得多的细分领域；您几乎找不到任何关于前端系统设计的资源。这些因素加上可能涉及的领域主题的广泛性，使得准备前端面试成为一个漫长、乏味和艰巨的过程。
+
+别担心！GreatFrontEnd 旨在成为前端工程师在前端面试中脱颖而出的最佳资源，它是一个一站式平台，为前端工程师提供必要的知识和实践。在 GreatFrontEnd 上，读者可以：
+
+1. 学习如何为 [**前端工程职位列表创建一份很棒的简历**](/front-end-interview-playbook/resume)。
+2. 学习适用于所有问题类型的 **重要前端概念和技术**。
+3. 准备最常见的前端 **面试问题类型**（编码、系统设计、测验、行为）。
+4. 练习最常见前端面试形式的 [**练习题**](/questions)，以及由前 FAANG 高级工程师撰写的 **高质量解决方案**。
+5. 浏览建议的 [**学习计划**](/interviews/get-started) 并采用 **结构化的准备方法**。
+
+## 准备一份很棒的简历
+
+您的简历是给潜在雇主留下第一印象的机会，对于在您梦寐以求的公司获得候选资格至关重要。
+
+如果您在申请工作时遇到面试困难，尽管您具备必要的资格，但这可能是因为您的简历。即使是高素质的候选人也可能不知道如何在简历中有效地展示他们的成就，因此可能无法入围。重要的是要记住，不合格并不总是未被选中的原因；有时这仅仅是展示不佳和未包含重要内容的问题。一旦您通过了简历筛选流程，您过去的成就就变得次要，您的技术技能变得至关重要，这些技能是可以学习和提高的。因此，通过提交一份能很好地代表您的优秀简历来敲开大门非常重要。
+
+虽然已经有关于如何制作优秀的软件工程简历的现有资源，例如 [Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/) 和 [FAANG Tech Leads' Resume Handbook](https://www.faangtechleads.com/resume/handbook/)，但它们是通用的，并非特定于前端工程师。我们编写了一些 [关于如何为前端工程职位定制简历的提示](/front-end-interview-playbook/resume)。
+
+## 按问题格式准备
+
+前端面试流程可以有多种不同的形式，每个公司的情况也各不相同。为了提高准备效率，您应该找出您正在面试的公司的不同面试阶段、每个阶段内的各个环节以及您将在每个环节中被问到的问题类型。
+
+每个问题格式都有其自身的挑战和怪癖。我们将向您介绍各种格式，如果您想了解更多信息，可以阅读每种类型的专用页面。
+
+### 编码问题
+
+编码问题将涉及编写代码（废话！）。但是，您需要编写的代码以及您编写代码的平台可能会有很大差异。您可能会被问到：
+
+1. **算法编码**：解决棘手的算法问题，评估您对数据结构、算法和时间复杂度的理解。[阅读关于算法编码面试](/front-end-interview-playbook/algorithms)。
+2. **JavaScript 编码**：用 JavaScript 实现与前端领域相关的函数或数据结构，并在前端开发过程中常用。[阅读关于 JavaScript 编码面试](/front-end-interview-playbook/javascript)。
+3. **用户界面编码**：使用 HTML、CSS 和 JavaScript 构建用户界面（组件、小部件、应用程序），有时甚至使用 JavaScript 框架。[阅读关于用户界面编码面试](/front-end-interview-playbook/user-interface)。
+
+公司正倾向于使用特定于领域的编码问题，而不是测试算法和数据结构，因为前者与评估前端工程工作所需的核心技能更相关。
+
+### 系统设计问题
+
+系统设计面试是高度开放式的面试，涉及提出软件系统设计来解决一个模糊的问题或场景。候选人将不得不将一个系统分解成更小的组件，绘制架构图，设计 API，深入研究系统的某些部分并讨论权衡，以便取得成功。
+
+系统设计面试通常只针对高级候选人，所需的系统可以是以下类型和示例之一：
+
+1. **分布式系统**：Twitter 后端、URL 缩短器
+2. **客户端应用程序**：新闻源、照片共享应用程序
+3. **复杂的用户界面组件**：自动完成、下拉菜单、模态
+
+大多数情况下，前端工程师将被要求设计客户端应用程序和复杂的用户界面组件，因为这些产品与前端工程更相关。
+
+[阅读更多关于前端系统设计 ->](/front-end-interview-playbook/system-design)
+
+### 测验问题
+
+测验问题，也称为琐事问题，是旨在测试您对该领域的理解的简短问题。每个问题不应超过一两分钟即可回答。
+
+通常不会有整个面试轮次只问你测验问题，但它们可能会在其他面试轮次中突然出现。
+
+[阅读更多关于测验问题 ->](/front-end-interview-playbook/quiz)
+
+## 行为问题/面试
+
+在行为面试中，面试官会询问您过去的行为和经验，以评估您是否适合这份工作以及成熟度。
+
+行为面试背后的想法是，过去的行为和经验是某人未来行为的良好指标，因此面试官会提出旨在让您描述您所面临的具体情况以及您如何处理这些情况的问题，以便更好地了解您，超越您的技术能力。
+
+行为面试本身就是一个很大的话题，我们已经[写了一整本关于它的手册](/behavioral-interview-playbook)。
+
+## 典型的招聘流程
+
+大多数公司都会有一个类似于：
+
+1. **初步筛选**
+   * 招聘人员电话（可能会问测验问题）
+   * 自动评分的在线评估或带回家的项目
+2. **电话筛选**
+   * 编码（实现算法、JavaScript 函数或构建用户界面）
+3. **全循环**
+   * 编码轮（实现算法、JavaScript 函数或构建用户界面）
+   * 系统设计轮
+   * 行为轮
+
+了解期望的最可靠方法是向公司招聘人员询问他们对该职位的面试流程。好的公司甚至会准备一份详细的文件来解释面试流程的每个阶段，以及指导候选人准备面试的资源。对于看到大量申请人的大公司来说，很有可能一些与他们面试过的候选人会在[Glassdoor](https://www.glassdoor.com/)、[Blind](https://www.teamblind.com/) 和 [Reddit](https://www.reddit.com/) 等平台上分享他们的经验。
+
+**您必须知道在面试中会遇到什么类型的问题，否则您将盲目行事，无法有效地准备。**
+
+### 轮次类型矩阵
+
+下表显示了每次面试轮次中每种问题类型的相关性/可能性。面试轮次可能包含来自不同问题类型的问题。
+
+| 轮次 | 测验 | 算法 | UI | JavaScript | 系统设计 |
+| ----------------- | ------ | ---------- | ---- | ---------- | ------------- |
+| 在线评估 | 中等 | 高 | 高 | 高 | 无 |
+| 招聘人员电话 | 中等 | 无 | 无 | 无 | 无 |
+| 待办项目 | 无 | 无 | 高 | 中等 | 中等 |
+| 编码 | 低 | 高 | 高 | 高 | 低 |
+| 行为 | 低 | 无 | 无 | 无 | 无 |
+| 系统设计 | 低 | 无 | 低 | 无 | 高 |
+| 招聘经理 | 低 | 无 | 无 | 无 | 低 |
+
+### 公司提出的问题类型
+
+以下是美国顶级公司提出的问题类型的摘要。
+
+| 公司 | 测验 | 算法 | JavaScript | UI | 系统设计 | 行为 |
+| :-- | :-: | :-: | :-: | :-: | :-: | :-: |
+| Airbnb | 否 | 是 | 是 | 是 | 否 | 是 |
+| Amazon | 是 | 是 | 是 | 是 | 是 | 是 |
+| Apple | 是 | 是 | 是 | 是 | 未知 | 是 |
+| ByteDance | 是 | 是 | 是 | 是 | 否 | 是 |
+| Dropbox | 否 | 是 | 是 | 是 | 是 | 是 |
+| Facebook/Meta | 是 | 否 | 是 | 否 | 是 | 是 |
+| Google | 是 | 是 | 是 | 是 | 是 | 是 |
+| LinkedIn | 是 | 是 | 是 | 是 | 未知 | 是 |
+| Lyft | 否 | 否 | 是 | 是 | 是 | 是 |
+| Microsoft | 是 | 是 | 是 | 是 | 是 | 是 |
+| OpenAI | 是 | 也许 | 否 | 是 | 是 | 是 |
+| X | 是 | 是 | 是 | 是 | 是 | 是 |
+| Uber | 未知 | 未知 | 是 | 是 | 未知 | 是 |
+
+**问题类型图例**
+
+* **测验**：封闭式测验/琐事风格的问题
+* **算法**：实现一个解决算法问题的函数。它通常不是前端特定领域
+* **JavaScript**：用 JavaScript 实现一个与前端领域相关的函数/类
+* **UI**：使用 HTML/CSS/JavaScript 构建用户界面。一些公司允许您使用您选择的框架，而另一些公司只允许 Vanilla JS/某些框架
+* **系统设计**：设计一个系统并讨论架构及其组件
+* **行为**：讨论您与他人合作的具体经验以及您如何处理困难的情况
+
+## 学习和实践
+
+请继续阅读以了解如何准备以下前端面试格式/问题类型：
+
+* [编码问题](/front-end-interview-playbook/coding)
+  * [算法问题](/front-end-interview-playbook/algorithms)
+  * [JavaScript 问题](/front-end-interview-playbook/javascript)
+  * [用户界面问题](/front-end-interview-playbook/user-interface)
+* [系统设计问题](/front-end-interview-playbook/system-design)
+* [测验问题](/front-end-interview-playbook/quiz)
diff --git a/packages/front-end-interview-guidebook/contents/quiz/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/quiz/en-US.langnostic.json
new file mode 100644
index 0000000000..69414b96dc
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/quiz/en-US.langnostic.json
@@ -0,0 +1,54 @@
+{
+  "frontmatter": {
+    "title": "e480f0cf",
+    "description": "bcff4ba6",
+    "seo_title": "1d7d3f68",
+    "seo_description": "1ee4b47e",
+    "social_title": "ea77f7d5"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "98f38cd1",
+        "493e8bd0",
+        "3b0d82ae",
+        "978b80ee",
+        "ba9aa997",
+        "2d4699d8",
+        "14246030",
+        "38ec276",
+        "62c60e5c",
+        "7e75ddb2",
+        "9ac8168",
+        "5962f6f",
+        "f4d4d23d",
+        "b892bb91",
+        "3276416d",
+        "e6a7ed6e",
+        "21ad3e33"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "98f38cd1",
+        "493e8bd0",
+        "3b0d82ae",
+        "978b80ee",
+        "ba9aa997",
+        "2d4699d8",
+        "14246030",
+        "38ec276",
+        "62c60e5c",
+        "7e75ddb2",
+        "9ac8168",
+        "5962f6f",
+        "f4d4d23d",
+        "b892bb91",
+        "3276416d",
+        "e6a7ed6e",
+        "21ad3e33"
+      ]
+    }
+  }
+}
diff --git a/packages/front-end-interview-guidebook/contents/quiz/en-US.mdx b/packages/front-end-interview-guidebook/contents/quiz/en-US.mdx
new file mode 100644
index 0000000000..a2632e01b0
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/quiz/en-US.mdx
@@ -0,0 +1,59 @@
+---
+title: Front End Quiz Interview Questions
+description: Quiz-style front end interview questions — What to expect, concepts to learn, and 100+ important practice questions.
+seo_title: Front End Quiz Interview Questions | How to prepare
+seo_description: Guide to preparing for quiz-style front end interview questions — What to expect, concepts to learn, and 100+ important practice questions.
+social_title: Cracking Quiz-style Interviews | Front End Interview Playbook
+---
+
+Quiz questions, also known as trivia questions, are short close-ended questions meant to test your understanding of the domain. Each question shouldn't take more than a minute or two to answer, however, further discussions can be spawned from your answers. Hence it's important to have good understanding of the concepts behind the answers you give and not blindly memorize and regurgitate.
+
+## Examples
+
+- [Explain what the CSS box model is.](/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)
+- [What is CSS selector specificity?](/questions/quiz/what-is-css-selector-specificity-and-how-does-it-work)
+- [What are the differences between variables created using `let`, `var` or `const`?](/questions/quiz/what-are-the-differences-between-variables-created-using-let-var-or-const)
+- [Explain how `this` works in JavaScript.](/questions/quiz/explain-how-this-works-in-javascript)
+
+Beyond getting asked on front end fundamentals (HTML, CSS, JavaScript), you could be asked on framework-specific questions if you claim to have knowledge of them (either verbally during interviews or when interviewers go through your resume):
+
+- What problems do X technology solve?
+- What are the advantages and disadvantages of X technology?
+- How does X technology work under the hood?
+- What does X technology compare with Y technology?
+
+## Relevant rounds
+
+There usually wouldn't be interview rounds just asking you solely quiz questions. However, interviewers could spring questions onto you while in the middle of interviews focused on other formats like coding and system design.
+
+- **Recruiter call**: Due to the close-ended nature of quiz questions, they can even be asked by non-technical personnel such as recruiters. Thankfully, non-engineers are probably not able to evaluate the accuracy and are probably just matching the keywords in your answers with the solutions handed to them. In the worst scenarios, you can probably still pass by replying something that sounds sensible and includes the right keywords.
+- **Online assessment**: While uncommon, it is possible that you are given multiple choice questions and have to pick a correct answer from them.
+- **Coding round**: Interviewers might ask you a few quiz questions before any coding has started to warm you up. Or while you are coding and explaining your code, the interviewer might want to dive deeper into something you just mentioned. Hence it's best to have a good understanding of everything you say/do.
+- **System design round**: Like in the coding round, the interviewer can ask further questions on the things you say.
+- **Hiring manager round**: Hiring manager rounds are usually not meant to be technical but they could be going over your resume and asking you related quiz questions on technologies/projects mentioned in your resume.
+
+As you can see, you can expect to be asked quiz questions in almost every possible round. Be prepared at all times.
+
+## Important concepts
+
+| Area | Topics |
+| --- | --- |
+| HTML | Semantic HTML, Block vs inline elements, `<head>`, `<script>`, `<style>`, `<link>`, `<form>`, `<input>`, Form validation/submission |
+| CSS | Box model, Selectors, Specificity, Positioning, Units, Flexbox, Grid, Media Queries |
+| JavaScript | Data types, Scope, Closures, `this`, Variable declaration (`var`, `let`, `const`), Array methods, Object methods, Promises, Classes, Async/Await |
+| DOM | DOM creation/manipulation/traversal, Event bubbling/capturing, Event delegation |
+| Runtime APIs | `fetch()`, Storage (`localStorage`, `sessionStorage`), Timers (`setTimeout()`, `setInterval()`) |
+
+## Tips
+
+There are a ton of concepts to cover which can feel really overwhelming. The good thing is that learning these concepts well will make you a better Front End Engineer regardless of whether you are actively interviewing or not.
+
+We wouldn't recommend memorizing answers to quiz questions. It's best to truly understand the solution for each question and get some real world experience by using them in projects as it's usually easier to learn by doing.
+
+## Practice questions
+
+GreatFrontEnd contains a list of over 100 common quiz questions with detailed solutions written for each of them.
+
+- [JavaScript Quiz Questions](/questions/javascript-interview-questions/quiz)
+- [HTML Quiz Questions](/questions/html-interview-questions/quiz)
+- [CSS Quiz Questions](/questions/css-interview-questions/quiz)
diff --git a/packages/front-end-interview-guidebook/contents/quiz/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/quiz/pt-BR.mdx
new file mode 100644
index 0000000000..0b03c24ff5
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/quiz/pt-BR.mdx
@@ -0,0 +1,56 @@
+---
+title: Perguntas de Quiz para Entrevistas de Front End — Como se Preparar
+description: Guia para preparação de perguntas de entrevista de estilo de quiz para Front End — O que esperar, conceitos para aprender e mais de 100 perguntas de prática importantes.
+---
+
+Perguntas de quiz, também conhecidas como perguntas de trivia, são perguntas curtas e fechadas destinadas a testar seu entendimento do domínio. Cada pergunta não deve levar mais do que um minuto ou dois para ser respondida; no entanto, discussões adicionais podem surgir a partir de suas respostas. Portanto, é importante ter um bom entendimento dos conceitos por trás das respostas que você dá e não apenas memorizá-las e repeti-las sem compreender.
+
+## 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)
+
+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?
+
+## 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.
+
+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()`) |
+
+## Dicas
+
+Há uma tonelada de conceitos para cobrir, o que pode parecer realmente esmagador. A boa notícia é que aprender bem esses conceitos o tornará um Engenheiro Front-End melhor, independentemente de estar ou não participando ativamente de entrevistas.
+
+Não recomendamos memorizar respostas para perguntas de quiz. É melhor realmente entender a solução para cada pergunta e adquirir alguma experiência do mundo real ao usá-las em projetos, pois geralmente é mais fácil aprender fazendo.
+
+## "Perguntas de Prática"
+
+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/javascript-interview-questions/quiz)
+- [Perguntas de Quiz de JavaScript](/questions/html-interview-questions/quiz)
+- [Perguntas de Quiz de JavaScript](/questions/css-interview-questions/quiz)
diff --git a/packages/front-end-interview-guidebook/contents/quiz/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/quiz/zh-CN.mdx
new file mode 100644
index 0000000000..72f398032c
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/quiz/zh-CN.mdx
@@ -0,0 +1,59 @@
+---
+title: 前端问答面试题
+description: 问答式前端面试题 — 期望什么、要学习的概念以及 100 多个重要的练习题。
+seo_title: 前端问答面试题 | 如何准备
+seo_description: 准备问答式前端面试题的指南 — 期望什么、要学习的概念以及 100 多个重要的练习题。
+social_title: 破解问答式面试 | 前端面试手册
+---
+
+问答题，也称为琐事题，是旨在测试你对该领域理解的简短封闭式问题。每个问题不应超过一两分钟的回答时间，但是，可以从你的答案中衍生出进一步的讨论。因此，对你给出的答案背后的概念有很好的理解非常重要，而不是盲目地记忆和重复。
+
+## 示例
+
+* [解释 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)
+* [解释 `this` 在 JavaScript 中的工作原理。](/questions/quiz/explain-how-this-works-in-javascript)
+
+除了被问到前端基础知识（HTML、CSS、JavaScript）之外，如果你声称自己了解它们（在面试期间口头或面试官浏览你的简历时），你可能会被问到特定于框架的问题：
+
+* X 技术解决了什么问题？
+* X 技术的优缺点是什么？
+* X 技术在幕后是如何工作的？
+* X 技术与 Y 技术相比如何？
+
+## 相关环节
+
+通常不会有仅询问你问答题的面试环节。但是，面试官可能会在专注于其他形式（如编码和系统设计）的面试中向你提出问题。
+
+* **招聘人员电话**: 由于问答题的封闭性质，即使是非技术人员（如招聘人员）也可以提出这些问题。值得庆幸的是，非工程师可能无法评估准确性，可能只是将你的答案中的关键词与交给他们的解决方案进行匹配。在最坏的情况下，你可能仍然可以通过回复听起来合理并包含正确关键词的内容来通过。
+* **在线评估**: 虽然不常见，但你可能会被提供多项选择题，并且必须从中选择一个正确的答案。
+* **编码环节**: 面试官可能会在任何编码开始之前问你几个问答题来热身。或者，当你正在编码和解释你的代码时，面试官可能希望深入研究你刚才提到的内容。因此，最好对你所说/所做的一切都有很好的理解。
+* **系统设计环节**: 就像在编码环节一样，面试官可以就你所说的事情提出进一步的问题。
+* **招聘经理环节**: 招聘经理环节通常不是技术性的，但他们可能会查看你的简历，并就你的简历中提到的技术/项目向你提问相关的问答题。
+
+正如你所看到的，你可能会在几乎每一轮中被问到测验问题。时刻做好准备。
+
+## 重要概念
+
+| 领域 | 主题 |
+| --- | --- |
+| HTML | 语义 HTML、块级元素与内联元素、`<head>`、`<script>`、`<style>`、`<link>`、`<form>`、`<input>`、表单验证/提交 |
+| CSS | 盒子模型、选择器、特异性、定位、单位、Flexbox、Grid、媒体查询 |
+| JavaScript | 数据类型、作用域、闭包、`this`、变量声明（`var`、`let`、`const`）、数组方法、对象方法、Promise、类、Async/Await |
+| DOM | DOM 创建/操作/遍历、事件冒泡/捕获、事件委托 |
+| 运行时 API | `fetch()`、存储（`localStorage`、`sessionStorage`）、计时器（`setTimeout()`、`setInterval()`） |
+
+## 提示
+
+有很多概念需要涵盖，这可能会让人感到不知所措。好的一点是，无论你是否积极面试，很好地学习这些概念都会让你成为一个更好的前端工程师。
+
+我们不建议死记硬背问答题的答案。最好真正理解每个问题的解决方案，并通过在项目中应用它们来获得一些实际经验，因为通过实践通常更容易学习。
+
+## 练习题
+
+GreatFrontEnd 包含了超过 100 个常见的测验问题，并为每个问题编写了详细的解决方案。
+
+* [JavaScript 测验问题](/questions/javascript-interview-questions/quiz)
+* [HTML 测验问题](/questions/html-interview-questions/quiz)
+* [CSS 测验问题](/questions/css-interview-questions/quiz)
diff --git a/packages/front-end-interview-guidebook/contents/resume/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/resume/en-US.langnostic.json
new file mode 100644
index 0000000000..f9a8fba7de
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/resume/en-US.langnostic.json
@@ -0,0 +1,94 @@
+{
+  "frontmatter": {
+    "title": "caff79e3",
+    "description": "71937ccf",
+    "seo_title": "4bca12c9",
+    "seo_description": "f9fd7900",
+    "social_title": "b464fe3c"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "e7b50714",
+        "71aaa931",
+        "28fff2a1",
+        "f9891e4b",
+        "921ffe3a",
+        "3209d369",
+        "14865fdc",
+        "3693c9a3",
+        "5d55d71d",
+        "b0f3ac1c",
+        "b10e6c10",
+        "d57cb3ea",
+        "545c4b7e",
+        "c9bdd937",
+        "da6f3da",
+        "9ec81ff1",
+        "54923456",
+        "2850e6de",
+        "2452b64a",
+        "c15ef820",
+        "e1456304",
+        "18977538",
+        "f0064fbc",
+        "16ffca7d",
+        "d4270045",
+        "80b38a54",
+        "e3ca65fa",
+        "19ea6a8d",
+        "9b5019f0",
+        "ea71a21d",
+        "df75b028",
+        "8460721f",
+        "a765aa45",
+        "e556d5a5",
+        "2a5892f",
+        "67a1d4f3",
+        "5a0b90a"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "e7b50714",
+        "71aaa931",
+        "28fff2a1",
+        "f9891e4b",
+        "921ffe3a",
+        "3209d369",
+        "14865fdc",
+        "3693c9a3",
+        "5d55d71d",
+        "b0f3ac1c",
+        "b10e6c10",
+        "d57cb3ea",
+        "545c4b7e",
+        "c9bdd937",
+        "da6f3da",
+        "9ec81ff1",
+        "54923456",
+        "2850e6de",
+        "2452b64a",
+        "c15ef820",
+        "e1456304",
+        "18977538",
+        "f0064fbc",
+        "16ffca7d",
+        "d4270045",
+        "80b38a54",
+        "e3ca65fa",
+        "19ea6a8d",
+        "9b5019f0",
+        "ea71a21d",
+        "df75b028",
+        "8460721f",
+        "a765aa45",
+        "e556d5a5",
+        "2a5892f",
+        "67a1d4f3",
+        "5a0b90a"
+      ]
+    }
+  }
+}
diff --git a/packages/front-end-interview-guidebook/contents/resume/en-US.mdx b/packages/front-end-interview-guidebook/contents/resume/en-US.mdx
new file mode 100644
index 0000000000..6cd729381b
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/resume/en-US.mdx
@@ -0,0 +1,103 @@
+---
+title: Ultimate Guide to Front End Engineer Resumes
+description: Get writing tips, samples, and best practices to help you get shortlisted for your next front end job
+seo_title: Guide to Front End Engineer Resumes | Tips, Examples, Strategies
+seo_description: Craft the perfect front end engineer resume with our ultimate guide. Get front end-specific tips, real examples, and strategies to help you secure front end roles.
+social_title: Guide to Front End Engineer Resumes | Front End Interview Playbook
+---
+
+To even get an interview for a Front End Engineer position, we have to submit a resume that passes the company's resume screening process. There are many existing resources out there to help you craft a good Software Engineer resume but few are tailored towards Front End Engineers. For general Software Engineer resume tips, refer to [Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/).
+
+On this page, we provide some front end-specific tips to help Front End Engineers improve their resumes and get to the interview stage.
+
+## Basic requirements
+
+- Preferably kept under one page if you have less than 5 years of experience, not exceeding two pages
+- Build using Microsoft Word, Google Docs, Pages, or LaTeX so that Applicant Tracking System (ATS) can parse the resumes. Avoid using design software
+- Submit in PDF format
+
+## Formatting and aesthetics
+
+Front End Engineers deal with user interfaces frequently and are expected to have a keen sense of design. It will reflect very poorly on you as a Front End Engineer if your resume isn't aesthetically pleasing.
+
+- Use a single-column format
+- Use common fonts which are available on most operating systems like Arial, Calibri, or Garamond. Avoid fancy fonts
+- Stick to a single or at most two fonts (one font for headings and another for the body)
+- Minimum font size of 11px
+
+Your resume doesn't need to be super pretty and fancy, it just needs to look neat and visually pleasing. If you have cash to spare, the quickest way to create an aesthetically pleasing and ATS-friendly resume is to purchase resume templates from [FAANG Tech Leads](https://www.faangtechleads.com/).
+
+## Work experience section
+
+The work experience section of your resume is the most important and should take up the majority of the space on your resume. It is important to highlight your contributions to your past or current employer's business goals in this section,
+
+To improve ATS ranking of your resume, sprinkle "Front End" across your resume where possible. If your official title is "Software Engineer" but you have been doing a significant amount of front end development as part of your job, consider putting your title as "Front End Engineer" / "Front End Software Engineer" / "Software Engineer (Front End)" instead to improve the relevance.
+
+It is common for people to make the mistake of not providing enough details about their experiences and achievements. To stand out, it is important to provide sufficient information about the **scale, complexity, and impact** of your experiences and achievements.
+
+- **Bad 👎**: "Built a website with HTML, CSS, and JavaScript"
+- **Better 👍**: "Built a performant e-commerce website that allowed users to browse from hundreds of items, add to their cart and checkout with PayPal. The site has 20k MAU, loads under 2 seconds and a Lighthouse score of 98. Technologies used: Next.js, React, GraphQL, CSS modules"
+
+Here's a non-exhaustive list of front end-related technical achievements that are suitable to be mentioned:
+
+- **Product work**: Elaborate on the features built within a product
+- **Performance**: Performance improvements made and the resulting gains in percentage. E.g. page load size, page load time, Lighthouse score improvements, etc.
+- **Testing**: Number of tests written, how many critical flows they cover, % increase in test coverage
+- **SEO**: % or numerical reduction in SEO errors/warnings. This metric is easy to obtain if the company uses SEO tools like Ahrefs and Semrush
+- **Accessibility (a11y)**: Number of a11y errors fixed, number of flows that were improved to meet WCAG AA/AAA level conformance, number of components where a11y improved
+- **Tooling**: Modernizing of technologies used in a code base, e.g. migrating a jQuery code base to React, improving typesafety by introducing TypeScript. Either describe the product or mention rough number of LOCs/engineers working on the code to give a better sense of the scale and complexity
+
+## Skills section
+
+The "Skills" section is a list of languages and technologies you possess and serves as a quick checklist/summary when ATS/recruiters/hiring managers read this section. At the minimum, you should have two list items for the "Languages" and "Technologies" categories:
+
+Due to the huge number of different technologies that are required to build front end applications, you might find that you have many technologies to add into the skills section of your resume. However, do not add every technology! This dilutes the weight of the skills that actually matter. Prioritize the languages/technologies that:
+
+### 1. Appear in the job listing
+
+If a skill appears in the job listing and you have experience with it, you should definitely add it in.
+
+### 2. List only key technologies that influence the architecture
+
+Libraries like React heavily influence the other accompanying technology choices while libraries like Underscore/Lodash are architecture-agnostic and can easily be swapped out. Prioritize the former and omit small/utility libraries that are easily replaceable.
+
+### 3. Widely known or are rapidly gaining popularity
+
+This shows that you keep up with the modern front end ecosystem. The company might also be considering moving towards that technology and if you are experienced in that it's a plus.
+
+### 4. Demonstrate your breadth
+
+Listing all of React, Angular, and Vue (all front end view frameworks) is overkill even if you are indeed familiar with all of them. Few job listings will list more than one technology that serves the same purpose (and it's a red flag if they do). Adding too many technologies (especially of the same category) makes it harder for the reader to get a sense of your skills.
+
+Try to list **at least one and at most two** technologies that belong to the following categories. Not all categories will apply to you, so only include the relevant ones. Popular examples are shown below.
+
+- **JavaScript libraries**: [React](https://react.dev/), [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/)
+- **Metaframeworks**: [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 frameworks**: [Bootstrap](https://getbootstrap.com/), [MUI](https://mui.com/), [Chakra UI](https://chakra-ui.com/), [Bulma](https://bulma.io/)
+- **Unit testing**: [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)
+- **Data fetching**: [GraphQL](https://graphql.org/), [tRPC](https://trpc.io/), [TanStack Query](https://tanstack.com/query/v3/), [swr](https://swr.vercel.app/)
+- **Integration testing**: [Cypress](https://www.cypress.io/), [Selenium](https://www.selenium.dev/), [Puppeteer](https://pptr.dev/), [WebdriverIO](https://webdriver.io/), [Playwright](https://playwright.dev/)
+- **Language tooling**: [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [Flow](https://flow.org/), [ESLint](https://eslint.org/)
+- **Build tools (optional)**: [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/)
+- **Package management (optional)**: [npm](https://www.npmjs.com/), [Yarn](https://yarnpkg.com/), [pnpm](https://pnpm.io/)
+
+### Example
+
+This would be how the "Skills" section on our resume looks like:
+
+- **Languages**: HTML, CSS, JavaScript, TypeScript
+- **Technologies**: React, Next.js, Tailwind CSS, Jest, Storybook, Cypress, React Query, Yarn, webpack
+
+This is exactly the technology stack used to build GreatFrontEnd. You should definitely have HTML, CSS, JavaScript under your "Languages" item, otherwise there's something hugely wrong.
+
+## Projects section
+
+The front end domain advances pretty fast with new JavaScript frameworks and CSS methodologies emerging every year. Having projects on your resume suggests that you are passionate about the field and put in the extra effort to up with latest front end technologies especially if they are not used at your job, which is a huge positive signal. List down the technologies used for each project especially if they are modern technologies that the company uses. It helps with ATS ranking and leaving a deeper impression on the reader. Where possible, put the code on GitHub and polish up the README with screenshots of the product. Add links to the project's code and live website into your resume.
+
+Open source contributions, especially non-trivial changes to complex code bases are seen as a sign of technical competency. Even better if you have created or are a maintainer of open source projects.
+
+## Summary
+
+While [Tech Interview Handbook's general Software Engineer resume tips](https://www.techinterviewhandbook.org/resume/) are mostly sufficient for Front End Engineers, the tips above will help you to elevate your Front End Engineer resume and bring it to the next level.
diff --git a/packages/front-end-interview-guidebook/contents/resume/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/resume/pt-BR.mdx
new file mode 100644
index 0000000000..91f20965c1
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/resume/pt-BR.mdx
@@ -0,0 +1,100 @@
+---
+title: Currículo de Front-End — Dicas de Escrita Específicas para Front-End, com Exemplos
+description: Dicas para aprimorar o seu currículo de desenvolvedor front-end / desenvolvedor web para conseguir a entrevista de emprego na área de front-end.
+---
+
+Para conseguir uma entrevista para uma posição de Engenheiro Front-End, precisamos enviar um currículo que passe pelo processo de triagem de currículos da empresa. Existem muitos recursos disponíveis para ajudar na elaboração de um bom currículo de Engenheiro de Software, mas poucos são adaptados para Engenheiros de Front-End. Para dicas gerais de currículo de Engenheiro de Software, consulte o [Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/).
+
+Nesta página, oferecemos algumas dicas específicas para Front End Engineers a fim de melhorar seus currículos e chegar à etapa de entrevistas.
+
+## 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.
+
+## 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.
+
+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/).
+
+## Seção de Experiência Profissional
+
+A seção de experiência profissional do seu currículo é a mais importante e deve ocupar a maior parte do espaço no currículo. It is important to highlight your contributions to your past or current employer's business goals in this section,
+
+Para melhorar a classificação do seu currículo pelo ATS, inclua "Front End" em várias partes do currículo sempre que possível. Se o seu título oficial for "Engenheiro de Software", mas você realizou uma quantidade significativa de desenvolvimento front-end como parte do seu trabalho, considere colocar seu título como "Engenheiro Front End" / "Engenheiro de Software Front End" / "Engenheiro de Software (Front End)" para aumentar a relevância.
+
+É 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
+
+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.
+
+## Seção de Habilidades
+
+A seção "Habilidades" é uma lista de idiomas e tecnologias que você possui e serve como uma verificação/resumo rápido quando ATS/recrutadores/gerentes de contratação leem essa seção. No mínimo, você deve ter dois itens de lista para as categorias "Idiomas" e "Tecnologias":
+
+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
+
+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
+
+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
+
+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
+
+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://react.dev/), [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
+
+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.
+
+## Seção Projetos
+
+O domínio de front-end avança rapidamente com novos frameworks JavaScript e metodologias CSS surgindo a cada ano. Ter projetos em seu currículo sugere que você é apaixonado pela área e se esforça para acompanhar as mais recentes tecnologias de front-end, especialmente se elas não forem utilizadas no seu trabalho, o que é um sinal muito positivo. Liste as tecnologias usadas para cada projeto, especialmente se forem tecnologias modernas que a empresa utiliza. Isso ajuda na classificação do ATS e deixa uma impressão mais profunda no leitor. Sempre que possível, coloque o código no GitHub e aprimore o README com capturas de tela do produto. Adicione links para o código do projeto e para o website ao vivo no seu currículo.
+
+Contribuições para projetos de código aberto, especialmente alterações não triviais em bases de código complexas, são vistas como um sinal de competência técnica. Ainda melhor se você tiver criado ou for mantenedor de projetos de código aberto.
+
+## Resumo
+
+Embora [dicas gerais de currículo de engenheiro de software do Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/) sejam suficientes para engenheiros de front-end, as dicas acima ajudarão você a elevar seu currículo de engenheiro de front-end e trazê-lo para o próximo nível.
diff --git a/packages/front-end-interview-guidebook/contents/resume/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/resume/zh-CN.mdx
new file mode 100644
index 0000000000..06dfc19304
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/resume/zh-CN.mdx
@@ -0,0 +1,103 @@
+---
+title: 前端工程师简历终极指南
+description: 获取写作技巧、范例和最佳实践，帮助您入围下一份前端工作
+seo_title: 前端工程师简历指南 | 技巧、示例、策略
+seo_description: 使用我们的终极指南制作完美的前端工程师简历。获取前端特定技巧、真实示例和策略，帮助您获得前端职位。
+social_title: 前端工程师简历指南 | 前端面试手册
+---
+
+为了获得前端工程师的职位面试机会，我们必须提交一份通过公司简历筛选流程的简历。 现有的资源很多，可以帮助您制作一份优秀的软件工程师简历，但很少有专门针对前端工程师的。 有关一般的软件工程师简历技巧，请参阅 \[Tech Interview Handbook]\(https://www.techinterviewhandbook.org/resume/）。
+
+在本页中，我们提供了一些前端特定的技巧，以帮助前端工程师改进他们的简历并进入面试阶段。
+
+## 基本要求
+
+* 如果您的经验少于 5 年，最好保持在一页以内，不超过两页
+* 使用 Microsoft Word、Google Docs、Pages 或 LaTeX 构建，以便申请人跟踪系统 (ATS) 可以解析简历。 避免使用设计软件
+* 以 PDF 格式提交
+
+## 格式和美学
+
+前端工程师经常处理用户界面，并且应该对设计有敏锐的意识。 如果您的简历在美学上不令人满意，那么这对您作为前端工程师来说会产生非常糟糕的影响。
+
+* 使用单列格式
+* 使用大多数操作系统上可用的常见字体，如 Arial、Calibri 或 Garamond。 避免使用花哨的字体
+* 坚持使用一种或最多两种字体（一种用于标题，另一种用于正文）
+* 最小字号为 11px
+
+您的简历不需要超级漂亮和花哨，它只需要看起来整洁且赏心悦目。 如果您有闲钱，创建美观且对 ATS 友好的简历的最快方法是从 [FAANG Tech Leads](https://www.faangtechleads.com/) 购买简历模板。
+
+## 工作经验部分
+
+简历的工作经验部分是最重要的，应该占据简历的大部分空间。 在本节中突出您对过去或当前雇主业务目标的贡献非常重要，
+
+为了提高简历的 ATS 排名，请在简历中尽可能多地散布“前端”。 如果您的官方头衔是“软件工程师”，但您在工作中做了大量的前端开发，请考虑将您的头衔改为“前端工程师”/“前端软件工程师”/“软件工程师（前端）”，以提高相关性。
+
+人们常犯的错误是没有提供足够多的关于他们的经验和成就的细节。 为了脱颖而出，提供关于您的经验和成就的**规模、复杂性和影响**的足够信息非常重要。
+
+* **错误 👎**：“使用 HTML、CSS 和 JavaScript 构建了一个网站”
+* **更好 👍**：“构建了一个高性能的电子商务网站，允许用户浏览数百个商品，添加到他们的购物车并通过 PayPal 结账。 该网站有 20k MAU，加载时间不到 2 秒，Lighthouse 评分为 98。 使用的技术：Next.js、React、GraphQL、CSS 模块”
+
+以下是一个适合提及的与前端相关的技术成就的非详尽列表：
+
+* **产品工作**：详细说明在产品中构建的功能
+* **性能**：进行的性能改进以及由此带来的百分比增益。例如，页面加载大小、页面加载时间、Lighthouse 分数改进等。
+* **测试**：编写的测试数量、它们涵盖了多少关键流程、测试覆盖率的 % 增加
+* **SEO**：SEO 错误/警告的 % 或数值减少。如果公司使用 SEO 工具（如 Ahrefs 和 Semrush），则此指标很容易获得
+* **可访问性 (a11y)**：修复的 a11y 错误数量、改进以满足 WCAG AA/AAA 级一致性的流程数量、a11y 改进的组件数量
+* **工具**：代码库中使用的技术现代化，例如将 jQuery 代码库迁移到 React，通过引入 TypeScript 提高类型安全性。描述产品或提及代码行数/工程师的大概数量，以更好地了解规模和复杂性
+
+## 技能部分
+
+"技能"部分是您拥有的语言和技术的列表，当 ATS/招聘人员/招聘经理阅读本节时，它充当快速清单/摘要。 至少，您应该为“语言”和“技术”类别提供两个列表项：
+
+由于构建前端应用程序需要大量不同的技术，您可能会发现您需要在简历的技能部分添加许多技术。但是，不要添加每一种技术！这将稀释真正重要的技能的权重。优先考虑以下语言/技术：
+
+### 1. 出现在职位列表中
+
+如果技能出现在职位列表中，并且您有相关经验，那么您绝对应该添加它。
+
+### 2. 仅列出影响架构的关键技术
+
+像 React 这样的库极大地影响了其他伴随的技术选择，而像 Underscore/Lodash 这样的库是与架构无关的，可以轻松替换。优先考虑前者，并省略易于替换的小型/实用程序库。
+
+### 3. 广为人知或迅速普及
+
+这表明您紧跟现代前端生态系统。该公司可能也在考虑转向该技术，如果您在这方面有经验，那将是一个加分项。
+
+### 4. 展示您的广度
+
+即使您确实熟悉 React、Angular 和 Vue（所有前端视图框架），列出所有这些也是多余的。很少有职位列表会列出多个用于相同目的的技术（如果这样做，则是一个危险信号）。添加太多技术（尤其是同一类别中的技术）会使读者更难了解您的技能。
+
+尝试列出**至少一个且最多两个**属于以下类别的技术。并非所有类别都适用于您，因此仅包括相关的类别。下面显示了流行的示例。
+
+* **JavaScript 库**: [React](https://react.dev/), [Angular](https://angular.io/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/)
+* **元框架**: [Next.js](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [Nuxt](https://nuxtjs.org/), [SvelteKit](https://kit.svelte.dev/)
+* **状态管理**: [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/), [MUI](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
+
+这正是用于构建 GreatFrontEnd 的技术栈。您绝对应该在“语言”项下列出 HTML、CSS、JavaScript，否则就会出现严重问题。
+
+## 项目部分
+
+前端领域发展迅速，每年都会出现新的 JavaScript 框架和 CSS 方法。在您的简历上拥有项目表明您对该领域充满热情，并付出了额外的努力来跟上最新的前端技术，尤其是在您的工作中没有使用这些技术的情况下，这是一个巨大的积极信号。列出每个项目使用的技术，尤其是如果它们是公司使用的现代技术。它有助于 ATS 排名，并在读者心中留下更深刻的印象。如果可能，将代码放在 GitHub 上，并使用产品的屏幕截图完善 README。将项目的代码和实时网站的链接添加到您的简历中。
+
+开源贡献，尤其是对复杂代码库的非平凡更改，被视为技术能力的标志。如果您创建了开源项目或维护了开源项目，那就更好了。
+
+## 摘要
+
+虽然 [Tech Interview Handbook 的一般软件工程师简历提示](https://www.techinterviewhandbook.org/resume/) 对于前端工程师来说已经足够了，但上述提示将帮助您提升前端工程师的简历，并使其更上一层楼。
diff --git a/packages/front-end-interview-guidebook/contents/system-design/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/system-design/en-US.langnostic.json
new file mode 100644
index 0000000000..523998a1fc
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/system-design/en-US.langnostic.json
@@ -0,0 +1,34 @@
+{
+  "frontmatter": {
+    "title": "da055036",
+    "description": "45cb9278",
+    "seo_title": "52bec2d7",
+    "seo_description": "f4fc8108",
+    "social_title": "960a6e84"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "22c0a066",
+        "65c58cf6",
+        "39b2993c",
+        "342c519e",
+        "3276416d",
+        "c6f12aa3",
+        "9de0f3fc"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "22c0a066",
+        "65c58cf6",
+        "39b2993c",
+        "342c519e",
+        "3276416d",
+        "c6f12aa3",
+        "9de0f3fc"
+      ]
+    }
+  }
+}
diff --git a/packages/front-end-interview-guidebook/contents/system-design/en-US.mdx b/packages/front-end-interview-guidebook/contents/system-design/en-US.mdx
new file mode 100644
index 0000000000..9d90df7686
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/system-design/en-US.mdx
@@ -0,0 +1,25 @@
+---
+title: Front End System Design Interviews - Quick Start
+description: A quick overview to all the best resources you can leverage for your front end system design interviews
+seo_title: Front End System Design Interview | How to Prepare
+seo_description: Quick start guide to prepare for Front End System Design interviews — What to expect, resources to use, and where to practice
+social_title: Front End System Design - Quick Start | GreatFrontEnd
+---
+
+System Design interviews can come in many forms and covers the entire development stack. GreatFrontEnd focuses on **Front End System Design**, aka system design and architecture of client applications and UI components rather than back end distributed systems.
+
+We have written a comprehensive [Front End System Design guide](/front-end-system-design-playbook) which you should definitely check out.
+
+## Design your system with best practices
+
+When going about the system design interview, regardless whether you are asked to design apps, games, or UI components, there are some things to pay special attention to. Incorporate the tips from our [User Interface Questions Cheatsheet](/front-end-interview-playbook/user-interface-questions-cheatsheet) and elevate your front end interview game.
+
+## Practice questions
+
+GreatFrontEnd includes many front end system design case studies and real world examples including and more:
+
+- [News Feed (e.g. Facebook)](/questions/system-design/news-feed-facebook)
+- [Autocomplete Component](/questions/system-design/autocomplete)
+- [E-commerce Website (e.g. Amazon)](/questions/system-design/e-commerce-amazon)
+- [Image Carousel](/questions/system-design/image-carousel)
+- [Google Docs](/questions/system-design/collaborative-editor-google-docs)
diff --git a/packages/front-end-interview-guidebook/contents/system-design/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/system-design/pt-BR.mdx
new file mode 100644
index 0000000000..728477ef20
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/system-design/pt-BR.mdx
@@ -0,0 +1,21 @@
+---
+title: Perguntas de Design de Sistema Front-End - Como se Preparar
+description: Guia para se preparar para perguntas de Design de Sistemas em entrevistas para desenvolvedores front-end / web - Melhores práticas e perguntas de prática importantes.
+---
+
+Entrevistas de Design de Sistemas podem assumir diversas formas e abranger todo o stack de desenvolvimento. A GreatFrontEnd se concentra no **Design de Sistemas de Front-End**, ou seja, no design e arquitetura de sistemas de cliente e componentes de interface de usuário, em vez de sistemas distribuídos de back-end.
+
+Nós escrevemos um guia abrangente de [Design de Sistemas de Front-End](/front-end-system-design-playbook), que você definitivamente deve conferir.
+
+## Projete seu sistema com as melhores práticas
+
+Ao enfrentar uma entrevista de design de sistemas, independentemente se você está sendo solicitado a projetar aplicativos, jogos ou componentes de interface de usuário, há algumas coisas às quais prestar atenção especial. Inclua as dicas do nosso [User Interface Questions Cheatsheeto](/front-end-interview-playbook/user-interface-questions-cheatsheet) e eleve seu desempenho em entrevistas de front-end.
+
+## Perguntas de prática
+
+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)
diff --git a/packages/front-end-interview-guidebook/contents/system-design/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/system-design/zh-CN.mdx
new file mode 100644
index 0000000000..b80f4ee3ad
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/system-design/zh-CN.mdx
@@ -0,0 +1,25 @@
+---
+title: 前端系统设计面试 - 快速入门
+description: 快速概览您可以为前端系统设计面试利用的所有最佳资源
+seo_title: 前端系统设计面试 | 如何准备
+seo_description: 准备前端系统设计面试的快速入门指南 — 期望什么、使用什么资源以及在哪里练习
+social_title: 前端系统设计 - 快速入门 | GreatFrontEnd
+---
+
+系统设计面试可以有多种形式，涵盖整个开发堆栈。GreatFrontEnd 专注于**前端系统设计**，即客户端应用程序和 UI 组件的系统设计和架构，而不是后端分布式系统。
+
+我们编写了一份全面的[前端系统设计指南](/front-end-system-design-playbook)，您绝对应该查看一下。
+
+## 使用最佳实践设计您的系统
+
+在进行系统设计面试时，无论您是被要求设计应用程序、游戏还是 UI 组件，都有一些需要特别注意的事项。 结合我们[用户界面问题备忘单](/front-end-interview-playbook/user-interface-questions-cheatsheet)中的提示，提升您的前端面试水平。
+
+## 练习题
+
+GreatFrontEnd 包含许多前端系统设计案例研究和真实世界的例子，包括但不限于：
+
+* [新闻提要（例如 Facebook）](/questions/system-design/news-feed-facebook)
+* [自动完成组件](/questions/system-design/autocomplete)
+* [电子商务网站（例如亚马逊）](/questions/system-design/e-commerce-amazon)
+* [图片轮播](/questions/system-design/image-carousel)
+* [谷歌文档](/questions/system-design/collaborative-editor-google-docs)
diff --git a/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.langnostic.json
new file mode 100644
index 0000000000..d1c33217f5
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.langnostic.json
@@ -0,0 +1,190 @@
+{
+  "frontmatter": {
+    "title": "f92069d3",
+    "description": "4ddddb3c",
+    "seo_title": "55313689",
+    "seo_description": "4ddddb3c",
+    "social_title": "74fd2012"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "15ed444f",
+        "b22dc8f8",
+        "818c7548",
+        "862b5f64",
+        "96652970",
+        "898bf4bf",
+        "bead125a",
+        "fa8e2a5",
+        "df3835a1",
+        "3cf8e386",
+        "dd762458",
+        "c2d097fd",
+        "3425eab9",
+        "d034a429",
+        "da6fa921",
+        "ae0981ad",
+        "6afa4b35",
+        "2595cf65",
+        "b52322e4",
+        "7792cb4a",
+        "c3a490bf",
+        "cd3a560f",
+        "24a7c100",
+        "e02e0ad7",
+        "5c43eca3",
+        "a0f7c7fd",
+        "1b647ff9",
+        "e189a7b9",
+        "6eb9ca7e",
+        "9ad97723",
+        "8cf8b49e",
+        "5e098ec0",
+        "eed4a20e",
+        "8056bb62",
+        "d09c29f1",
+        "614f6160",
+        "25258abb",
+        "d56560f3",
+        "7fa508e9",
+        "d61db084",
+        "4a2167db",
+        "6eb9ca7e",
+        "41816ef6",
+        "ec527804",
+        "504b42fe",
+        "9cfbaa1d",
+        "5893ceca",
+        "7f924670",
+        "fa8708e",
+        "cebb0b52",
+        "be0161de",
+        "c35725d4",
+        "c726a5d4",
+        "8c4385be",
+        "8015d76d",
+        "1565fce8",
+        "924a989e",
+        "157935c7",
+        "a606d5a9",
+        "8595fa06",
+        "9080495c",
+        "7bf82812",
+        "a96689e0",
+        "4af2660",
+        "c1bec761",
+        "c00de318",
+        "b50e54c3",
+        "47ee560d",
+        "f79f164d",
+        "e22bf76a",
+        "916a4cb3",
+        "9e330a88",
+        "861de668",
+        "627afd1c",
+        "5d2f9585",
+        "960705b8",
+        "d7c3dc53",
+        "8f5fb6c2",
+        "9790b325",
+        "42bfcb92",
+        "a1f4e939",
+        "fe3b5d25",
+        "2d855ced",
+        "d49f469d",
+        "3f23861b"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "15ed444f",
+        "b22dc8f8",
+        "818c7548",
+        "862b5f64",
+        "96652970",
+        "898bf4bf",
+        "bead125a",
+        "fa8e2a5",
+        "df3835a1",
+        "3cf8e386",
+        "dd762458",
+        "c2d097fd",
+        "3425eab9",
+        "d034a429",
+        "da6fa921",
+        "ae0981ad",
+        "6afa4b35",
+        "2595cf65",
+        "b52322e4",
+        "7792cb4a",
+        "c3a490bf",
+        "cd3a560f",
+        "24a7c100",
+        "e02e0ad7",
+        "5c43eca3",
+        "a0f7c7fd",
+        "1b647ff9",
+        "e189a7b9",
+        "6eb9ca7e",
+        "9ad97723",
+        "8cf8b49e",
+        "5e098ec0",
+        "eed4a20e",
+        "8056bb62",
+        "d09c29f1",
+        "614f6160",
+        "25258abb",
+        "d56560f3",
+        "7fa508e9",
+        "d61db084",
+        "4a2167db",
+        "6eb9ca7e",
+        "41816ef6",
+        "ec527804",
+        "504b42fe",
+        "9cfbaa1d",
+        "5893ceca",
+        "7f924670",
+        "fa8708e",
+        "cebb0b52",
+        "be0161de",
+        "c35725d4",
+        "c726a5d4",
+        "8c4385be",
+        "8015d76d",
+        "1565fce8",
+        "924a989e",
+        "157935c7",
+        "a606d5a9",
+        "8595fa06",
+        "9080495c",
+        "7bf82812",
+        "a96689e0",
+        "4af2660",
+        "c1bec761",
+        "c00de318",
+        "b50e54c3",
+        "47ee560d",
+        "f79f164d",
+        "e22bf76a",
+        "916a4cb3",
+        "9e330a88",
+        "861de668",
+        "627afd1c",
+        "5d2f9585",
+        "960705b8",
+        "d7c3dc53",
+        "8f5fb6c2",
+        "9790b325",
+        "42bfcb92",
+        "a1f4e939",
+        "fe3b5d25",
+        "2d855ced",
+        "d49f469d",
+        "3f23861b"
+      ]
+    }
+  }
+}
diff --git a/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.mdx b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.mdx
new file mode 100644
index 0000000000..3506d93420
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/en-US.mdx
@@ -0,0 +1,385 @@
+---
+title: API design principles for UI components
+description: Best practices for designing developer interface components APIs, useful for UI components coding and system design interviews
+seo_title: API Design Principles | Front End Interview Playbook
+seo_description: Best practices for designing developer interface components APIs, useful for UI components coding and system design interviews
+social_title: API design principles for UI components | Front End Interview Playbook
+---
+
+User Interface component libraries like [Bootstrap](https://getbootstrap.com/) and [Material UI](https://mui.com/) help developers build UI faster by providing commonly used components like buttons, tabs, modals, etc so that developers do not have to reinvent the wheel by building these components from scratch whenever they start on a new project.
+
+Often during front end interviews, you will be asked to build UI components and design an API to initialize them. Designing good component APIs is bread and butter for Front End Engineers. This page covers some of the top tips and best practices for designing UI component APIs. Some of these tips may be framework-specific but can be generalized for other component-based UI frameworks.
+
+## Initialization
+
+There are multiple ways to initialize a UI component:
+
+### jQuery-style
+
+Before modern JavaScript UI libraries/frameworks like [React](https://react.dev/), [Angular](https://angular.io/), and [Vue](https://vuejs.org/) came into the picture, [jQuery](https://jquery.com/) (and [jQuery UI](https://jqueryui.com/)) was the most popular way to build UI. jQuery UI popularized the idea of initializing UI components via "constructors" which involved two arguments:
+
+1. **Root element**: A root DOM element to render the contents
+1. **Customization options**: Optional, additional, customization options usually in the form of a plain JavaScript object
+
+Using jQuery UI, one can turn a DOM element into a [slider](https://api.jqueryui.com/slider/) (among many other UI components) with a single line of code:
+
+```html
+<div id="gfe-slider"></div>
+<script>
+  $('#gfe-slider').slider();
+</script>
+```
+
+**jQuery refresher**: jQuery UI's `slider()` method (constructor) takes in a JavaScript object which serves as customization options. Doing `$('#slider')` selects the `<div id="slider">` element and returns a jQuery object that contains convenient methods to "do something" with the element such as `addClass`, `removeClass`, etc and other DOM manipulation methods. Within jQuery methods, the selected element can be accessed via the `this` keyword. jQuery APIs are built around this "select an element and do something with it" approach, hence the `slider()` method does not need an argument for the root DOM element.
+
+The slider can be customized by passing in a plain JavaScript object of options:
+
+```html
+<div id="gfe-slider"></div>
+<script>
+  $('#gfe-slider').slider({
+    animate: true,
+    max: 50,
+    min: 10,
+    // See other options here: https://api.jqueryui.com/slider/
+  });
+</script>
+```
+
+### Vanilla JavaScript style
+
+There's no vanilla JavaScript style for initializing components since vanilla JavaScript is not a standard or framework. But if you have read enough of GreatFrontEnd's solutions for our vanilla JavaScript [UI coding questions](/questions/formats/ui-coding), you'll see that the API we recommend is similar to jQuery's, the constructor takes in a root element and options:
+
+```js
+function slider(rootEl, options) {
+  // Do something with rootEl and options.
+}
+```
+
+### React (Or similar component-based libraries)
+
+React forces you to write UI as components where the logic and structure is contained within. React components are JavaScript functions that return markup, a description of how to render itself.
+
+React components can take in `props`, which are essentially customization options for a component.
+
+```js
+function Slider({ min, max }) {
+  // Use the props to render a customized component.
+  return <div>...</div>;
+}
+
+<Slider max={50} min={10} />;
+```
+
+Components do not take in a root element. To render the element into the page, a separate API is used.
+
+```jsx
+import { createRoot } from 'react-dom/client';
+import Slider from './Slider';
+
+const domNode = document.getElementById('#gfe-slider');
+// React will manage the DOM within this element.
+const root = createRoot(domNode);
+// Display the Slider component within the element.
+root.render(<Slider max={50} min={10} />);
+```
+
+You will usually not need to call `createRoot()` yourself if the entire page is a React app because there will only be one `createRoot()` call at the root/page-level.
+
+## Customizing appearance
+
+Even though UI components in UI libraries provide default styling, developers will usually want to customize them with their company/product's branding and theme colors.
+
+Hence most UI components (especially those built as 3rd-party libraries) will allow for customization of the appearance, via a few methods:
+
+### Class injection
+
+The idea here is simple, components accept a prop/option to allow the developer to provide their own classes and these classes are added to the actual DOM elements. This approach is not very robust because if the component also adds its own styling via classes, there could be conflicting properties within the component's classes and developer-provided classes.
+
+#### React
+
+```jsx
+import clsx from 'clsx';
+
+function Slider({ className, value }) {
+  return (
+    <div className={clsx('gfe-slider', className)}>
+      <input type="range" value={value} />
+    </div>
+  );
+}
+
+<Slider className="my-custom-slider" value={50} />;
+```
+
+```css
+/* UI library default stylesheet */
+.gfe-slider {
+  height: 12px;
+}
+```
+
+```css
+/* Developer's custom stylesheet */
+.my-custom-slider {
+  color: red;
+}
+```
+
+Through class injection, developers can change the text `color` of the component to be `red`.
+
+If there are many DOM elements within the component to be targeted and one single `className` prop is not sufficient, you can also have multiple differently-named props for `className`s of different elements:
+
+```jsx
+import { useId } from 'react';
+import clsx from 'clsx';
+
+function Slider({ label, value, className, classNameLabel, classNameTrack }) {
+  const id = useId();
+  return (
+    <div className={clsx('gfe-slider', className)}>
+      <label className={clsx('gfe-slider-label', classNameLabel)} for={id}>
+        {label}
+      </label>
+      <input
+        className={clsx('gfe-slider-range', classNameTrack)}
+        id={id}
+        type="range"
+        value={value}
+      />
+    </div>
+  );
+}
+```
+
+#### jQuery
+
+In jQuery, classes can also be passed as a field on the options.
+
+```js
+$('#gfe-slider').slider({
+  // In reality, jQuery UI takes in a `classes` field instead
+  // since there are multiple elements.
+  class: 'my-custom-slider',
+});
+```
+
+In reality, all of jQuery UI's component initializers take in the `classes` field to allow adding additional classes to individual elements. The following example is taken from [jQuery UI Slider](https://api.jqueryui.com/slider/#option-classes):
+
+```js
+$('#gfe-slider').slider({
+  classes: {
+    'ui-slider': 'highlight',
+    'ui-slider-handle': 'ui-corner-all',
+    'ui-slider-range': 'ui-corner-all ui-widget-header',
+  },
+});
+```
+
+#### Downside: Non-deterministic styling
+
+Class injection has an unobvious downside — the final visual result is non-deterministic and may not be what is expected. Take the following code for example:
+
+```jsx
+import clsx from 'clsx';
+
+function Slider({ className, value }) {
+  return (
+    <div className={clsx('gfe-slider', className)}>
+      <input type="range" value={value} />
+    </div>
+  );
+}
+
+<Slider className="my-custom-slider" value={50} />;
+```
+
+```css
+/* UI library default stylesheet */
+.gfe-slider {
+  height: 12px;
+  color: black;
+}
+```
+
+```css
+/* Developer's custom stylesheet */
+.my-custom-slider {
+  color: red; /* .gfe-slider also defines a value for color. */
+}
+```
+
+In the example above, both `.gfe-slider` and `.my-custom-slider` classes specify the `color` and because these two selectors have the same specificity, the winning style is actually the class that appears later on the HTML page.
+
+If the loading order of the stylesheet is not guaranteed (e.g. if stylesheets are lazily loaded), the visual result will not be deterministic. The results is that developers start using hacks like `!important` or `.my-custom-slider.my-custom-slider` to let their selectors win the specificity war. With all these hacks, the CSS code starts becoming unmaintainable.
+
+In jQuery UI, if a custom class is added, the existing default value is not used. This removes the "winning style" ambiguity but the user must now reimplement all the necessary styles present in the original class. This approach can also be applied to React components to resolve the ambiguity.
+
+Despite its flaws, class injection is still a very popular option.
+
+### CSS selector hooks
+
+Technically speaking, developers can achieve customization if they read the source code of the component and define their custom styling by using the same classes. However, doing this is dangerous as relying on a component's internals and there's no guarantee that the class names won't change in the future.
+
+If UI library authors can make these classes/attributes part of their API, which comes with these guarantees:
+
+1. The list of selectors is published for external reference
+1. Existing published selectors will not be changed. If they are changed, it will be a breaking change and a version bump is needed as per semver
+
+Then it's an acceptable practice and developers can "hook" onto them (target them) by using these selectors in their stylesheets.
+
+An example of hooking into a component's selectors:
+
+```jsx
+import { useId } from 'react';
+import clsx from 'clsx';
+
+function Slider({ label, value }) {
+  const id = useId();
+  return (
+    <div className="gfe-slider">
+      <label className="gfe-slider-label" for={id}>
+        {label}
+      </label>
+      <input className="gfe-slider-range" id={id} type="range" value={value} />
+    </div>
+  );
+}
+```
+
+```css
+/* UI library default stylesheet */
+.gfe-slider {
+  font-size: 12px;
+}
+
+/* No other classes are defined in this stylesheet,
+gfe-slider-label and gfe-slider-range are added
+to the component just for developers to gain access
+to the underlying elements. */
+```
+
+```css
+/* Developer's custom stylesheet */
+.gfe-slider {
+  font-size: 16px; /* Conflicts with the default .gfe-slider */
+  padding: 10px 20px;
+}
+
+.gfe-slider-label {
+  color: red;
+}
+
+.gfe-slider-range {
+  height: 20px;
+}
+```
+
+This approach saves developers the hassle of passing in classes into the component as they only have to write CSS to customize the styling. [Reach UI](https://reach.tech/styling), a headless UI component library for React, uses element selectors. Each component has a `data-reach-*` attribute on the underlying DOM element.
+
+```css
+[data-reach-menu-item] {
+  color: blue;
+}
+```
+
+However, this approach still suffers from the non-deterministic styling issue as per "class injection" and doesn't easily allow per-instance styling. If per-instance styling is desired, this approach can be combined with the class injection approach.
+
+### Theme object
+
+Instead of taking in classes, the component takes in an object of key/values for styling. This is useful if there is only a strict subset of properties to customize, or if you want to restrict styling to only a few properties.
+
+```jsx
+const defaultTheme = { color: 'black', height: 12 };
+
+function Slider({ value, label, theme }) {
+  // Combine with default.
+  const mergedTheme = { ...defaultTheme, ...theme };
+
+  return (
+    <div className="gfe-slider">
+      <label
+        for={id}
+        style={{
+          color: mergedTheme.color,
+        }}>
+        {label}
+      </label>
+      <input
+        id={id}
+        type="range"
+        value={value}
+        style={{
+          height: mergedTheme.height,
+        }}
+      />
+    </div>
+  );
+}
+
+<Slider theme={{ color: 'red', height: 24 }} {...props} />;
+```
+
+However, since no classes with conflicting styles are used, and inline styles have higher specificity than classes, there's no specificity conflict and the inline styles will win. However, the number of options that need to be supported can grow really quickly. Inline styles are also present in the DOM per component instance, which can be bad for performance if this component is rendered hundreds/thousands of times within a page.
+
+The theme object is just a way to restrict the styling to certain properties and optionally, an accepted set of values, the values do not need be used as inline styles and instead can be combined with other styling approaches.
+
+### CSS preprocessor compilation
+
+UI libraries are usually written with CSS preprocessors like [Sass](https://sass-lang.com/) and [Less](https://lesscss.org/). [Bootstrap](https://getbootstrap.com/) is written with Sass and they provide a way to [customize the Sass variables](https://getbootstrap.com/docs/5.3/customize/sass/) used so that developers can generate a custom UI library stylesheet.
+
+This approach is great because it doesn't rely on overriding CSS selectors to achieve customization. There's also less amount of resulting CSS and no redundant overridden styles. The downside is that a compilation step is needed.
+
+### CSS variables / custom properties
+
+[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (or more formally known as CSS custom properties) are entities defined by CSS authors that contain specific values to be reused throughout a document. The `var()` function, it accepts fallback values if the given variable is not set.
+
+```jsx
+function Slider({ value, label }) {
+  return (
+    <div className="gfe-slider">
+      <label for={id}>{label}</label>
+      <input id={id} type="range" value={value} />
+    </div>
+  );
+}
+```
+
+```css
+/* UI library default stylesheet */
+.gfe-slider {
+  /* Fallback of 12px if not set. */
+  font-size: var(--gfe-slider-font-size, 12px);
+}
+```
+
+```css
+/* Developer's custom stylesheet */
+:root {
+  --gfe-slider-font-size: 15px;
+}
+```
+
+The developer can define a value for `--gfe-slider-font-size` globally via the `:root` selector and set the font size for the `.gfe-slider` class to be 15px. The benefit of this approach is that it doesn't require JavaScript, however, per-component customization will be more troublesome (but still possible).
+
+### Render props
+
+In React, render props are function props that a component uses to know what to render. It is useful for separating behavior from presentation. Many behavioral/headless UI libraries like [Radix](https://www.radix-ui.com/), [Headless UI](https://headlessui.com/), and [Reach UI](https://reach.tech/menu-button) make heavy use of render props.
+
+{/* TODO: Section on manipulation of component after initialization */}
+
+## Internationalization (i18n)
+
+Does your UI work for multiple languages? How easy is it to add support for more languages?
+
+### Avoid hardcoding of labels in a certain language
+
+Some UI components have label strings within them (e.g. image carousel has labels for prev/next buttons). It'd be good to allow customization of these label strings by making them part of component props/options.
+
+### Right-to-left languages
+
+Some languages (e.g. Arabic, Hebrew) are read from right-to-left and the UI has to be flipped horizontally. The component can take in a `direction` prop/option and change the order of how elements are rendered. For example, the prev and next buttons will be on the right and left respectively in an RTL language.
+
+Use [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) to futureproof your styles and let your layout work for different [writing modes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes).
+
+{/* TODO: Give examples of how to implement RTL. */}
diff --git a/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/pt-BR.mdx
new file mode 100644
index 0000000000..e52cc5dfda
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/pt-BR.mdx
@@ -0,0 +1,374 @@
+---
+title: Princípios de Design de API para Componentes de Interface do Usuário
+description: Melhores práticas para projetar APIs de componentes de interface do desenvolvedor, úteis para entrevistas de codificação de componentes de IU e design de sistemas
+---
+
+Bibliotecas de componentes de interface de usuário como [Bootstrap](https://getbootstrap.com/) e [Material UI](https://mui.com/) ajudam os desenvolvedores a criar UI mais rapidamente, fornecendo componentes comumente usados, como botões, guias, modais, etc, para que os desenvolvedores não precisem reinventar a roda construindo esses componentes do zero sempre que iniciarem um novo projeto.
+
+Frequentemente, durante entrevistas de front-end, você será solicitado a construir componentes de IU e projetar uma API para inicializá-los. Designing good component APIs is bread and butter for Front End Engineers. This page covers some of the top tips and best practices for designing UI component APIs. Algumas dessas dicas podem ser específicas para determinados frameworks, mas podem ser generalizadas para outros frameworks de interface de usuário baseados em componentes.
+
+## Inicialização
+
+### jQuery-style
+
+Antes das modernas bibliotecas de IU JavaScript como [React](https://react.dev/), [Angular](https://angular.io/), e [Vue](https://vuejs.org/) aparecerem, [jQuery](https://jquery.com) (e [jQuery UI](https://jqueryui.com/)) era a maneira mais popular de construir a interface do usuário. A jQuery UI popularizou a ideia de inicializar os componentes da UI através de "construtores" que envolvia dois argumentos:
+
+1.  **Elemento Raiz**: Um elemento raiz da DOM para renderizar o conteúdo.
+2.  **Opções de Customização**: Opcionais, opções adicionais de customização, geralmente na forma de um objeto JavaScript simples.
+
+Usando o jQuery UI, é possível transformar um elemento DOM em um [slider](https://api.jqueryui.com/slider/) (entre muitos outros componentes de UI) com uma única linha de código:
+
+```html
+<div id="gfe-slider"></div>
+<script>
+  $('#gfe-slider').slider();
+</script>
+```
+
+**jQuery refresher**: o método `slider()` do jQuery UI (construtor) recebe um objeto JavaScript que serve como opções de personalização. Ao fazer `$('#slider')` seleciona-se o elemento `<div id="slider">` e retorna um objeto jQuery que contém métodos convenientes para "fazer algo" com o elemento como `addClass`, `removeClass`, etc e outros métodos de manipulação da DOM. Dentro dos métodos do jQuery, o elemento selecionado pode ser acessado através da palavra-chave `this`. as APIs do jQuery são construídas em torno dessa abordagem de "selecionar um elemento e fazer algo com ele", portanto o método `slider()` não precisa de um argumento para o elemento raiz da DOM.
+
+O slider pode ser customizado passando um objeto JavaScript simples com opções:
+
+```html
+<div id="gfe-slider"></div>
+<script>
+  $('#gfe-slider').liderar({
+    animate: true,
+    max: 50,
+    min: 10,
+    // Veja outras opções aqui: https://api. queryui.com/slider/
+  });
+</script>
+```
+
+### Estilo JavaScript Puro
+
+Não existe um estilo de JavaScript puro para inicializar componentes, uma vez que JavaScript puro não é um padrão ou framework. Mas se você já leu as soluções do GreatFrontEnd, para nossas [perguntas sobre codificação de UI](/questions/formats/ui-coding), você verá que a API que recomendamos é semelhante ao do jQuery, o construtor recebe um elemento raiz e opções:
+
+```js
+function slider(rootEl, opções) {
+  // Faça algo com rootEl e as opções.
+}
+```
+
+### React
+
+O React te obriga a escrever a interface de usuário como componentes, que contêm sua própria lógica e aparência. Componentes do React são funções JavaScript que retornam marcações (uma descrição de como renderizar a si mesmos). Componentes do React podem receber `props`, que são essencialmente personalizações das opções de um componente.
+
+```js
+function Slider({ min, max }) {
+  // Use as props para renderizar um componente personalizado.
+  return <div>...</div>;
+}
+
+<Slider max={50} min={10} />;
+```
+
+Componentes não recebem um elemento raiz. Para renderizar o elemento na página, uma API separada é utilizada.
+
+```jsx
+import { createRoot } from 'react-dom/client';
+import Slider from './Slider';
+
+const domNode = document.getElementById('#gfe-slider');
+// O React vai gerenciar o DOM dentro deste elemento.
+const root = createRoot(domNode);
+// Exibe o componente Slider dentro do elemento.
+root.render(<Slider max={50} min={10} />);
+```
+
+Geralmente, você não precisará chamar createRoot() manualmente se toda a página for uma aplicação React, pois haverá apenas uma chamada de createRoot para o componente raiz/nível da página.
+
+## Customizando a Aparência
+
+Embora os componentes de interface de usuário em bibliotecas de UI forneçam estilos padrão, os desenvolvedores geralmente desejam personalizá-los com a identidade visual e as cores de tema de sua empresa/produto. Portanto, todos os componentes de interface de usuário permitirão a personalização da aparência, por meio de alguns métodos:
+
+### Injeção de classe
+
+A ideia aqui é simples, os componentes aceitam uma prop/opção para permitir que o desenvolvedor forneça suas próprias classes, e essas classes são adicionadas aos elementos DOM reais. Essa abordagem não é muito robusta, pois se o componente também adicionar seus próprios estilos por meio de classes, pode haver propriedades conflitantes entre as classes do componente e as classes fornecidas pelo desenvolvedor.
+
+#### React
+
+```jsx
+import clsx from 'clsx';
+
+function Slider({ className, value }) {
+  return (
+    <div className={clsx('gfe-slider', className)}>
+      <input type="range" value={value} />
+    </div>
+  );
+}
+
+<Slider className="my-custom-slider" value={50} />;
+```
+
+```css
+/* UI library default stylesheet */
+.gfe-slider {
+  height: 12px;
+}
+```
+
+```css
+/* Developer's custom stylesheet */
+.my-custom-slider {
+  color: red;
+}
+```
+
+Através da injeção de classes, os desenvolvedores podem alterar a cor do texto do componente para ser "vermelha".
+
+Se houver muitos elementos DOM dentro do componente a serem direcionados e uma única propriedade `className` não for suficiente, você também pode ter várias propriedades com nomes diferentes para as classes de diferentes elementos:
+
+```jsx
+import { useId } from 'react';
+import clsx from 'clsx';
+
+function Slider({ label, value, className, classNameLabel, classNameTrack }) {
+  const id = useId();
+  return (
+    <div className={clsx('gfe-slider', className)}>
+      <label className={clsx('gfe-slider-label', classNameLabel)} for={id}>
+        {label}
+      </label>
+      <input
+        className={clsx('gfe-slider-range', classNameRange)}
+        id={id}
+        type="range"
+        value={value}
+      />
+    </div>
+  );
+}
+```
+
+#### jQuery
+
+No jQuery, classes também podem ser passadas como um campo nas opções.
+
+```js
+$('#gfe-slider').slider({
+  // Na verdade, o jQuery UI recebe um campo `classes` em vez disso
+  // já que existem vários elementos.
+  class: 'my-custom-slider',
+});
+```
+
+Na realidade, todos os inicializadores de componentes do jQuery UI recebem o campo `classes` para permitir a adição de classes adicionais a elementos individuais. O exemplo a seguir é retirado de[jQuery UI Slider](https://api.jqueryui.com/slider/#option-classes):
+
+```js
+$('#gfe-slider').slider({
+  classes: {
+    'ui-slider': 'highlight',
+    'ui-slider-handle': 'ui-corner-all',
+    'ui-slider-range': 'ui-corner-all ui-widget-header',
+  },
+});
+```
+
+#### Estilização não determinística
+
+A injeção de classes tem uma desvantagem não óbvia — o resultado visual final é não-determinístico e pode não ser o esperado. Considere o seguinte código como exemplo:
+
+```jsx
+import clsx from 'clsx';
+
+function Slider({ className, value }) {
+  return (
+    <div className={clsx('gfe-slider', className)}>
+      <input type="range" value={value} />
+    </div>
+  );
+}
+
+<Slider className="my-custom-slider" value={50} />;
+```
+
+```css
+/* UI library default stylesheet */
+.gfe-slider {
+  height: 12px;
+  color: black;
+}
+```
+
+```css
+/* Folha de estilos customizada do desenvolvedor */
+.my-custom-slider {
+  color: red; /* .gfe-slider também define um valor para a cor. */
+}
+```
+
+No exemplo acima, tanto as classes `.gfe-slider` quanto `.my-custom-slider` especificam o `color`, e como esses dois seletores têm a mesma especificidade, o estilo vencedor é na verdade a classe que aparece mais tarde na página HTML. Se a ordem de carregamento da folha de estilos não for garantida (por exemplo, se as folhas de estilos forem carregadas de forma preguiçosa), o resultado visual não será determinístico. É nesse momento que os desenvolvedores começam a usar "hacks" como `!important` ou `.my-custom-slider.my-custom-slider` para fazer com que seus seletores vençam a guerra de especificidade, e o código CSS começa a se tornar difícil de manter.
+
+No jQuery UI, se uma classe personalizada for adicionada, o valor padrão existente não será utilizado. Isso elimina a ambiguidade do "estilo vencedor", mas o usuário agora precisa reimplementar todos os estilos necessários presentes na classe original. Essa abordagem também pode ser aplicada a componentes do React para resolver a ambiguidade.
+
+Apesar de suas possíveis falhas, a injeção de classes ainda é uma opção muito popular.
+
+### Hooks de Seletores CSS
+
+Tecnicamente falando, os desenvolvedores podem alcançar a personalização se lerem o código-fonte do componente e definirem seus estilos personalizados usando as mesmas classes. No entanto, fazer isso é perigoso, pois depende das partes internas de um componente e não há garantia de que os nomes das classes não mudarão no futuro.
+
+Se os autores de bibliotecas de UI puderem tornar essas classes/atributos parte de sua API, que oferece essas garantias:
+
+1.  A lista de seletores é publicada para referência externa.
+2.  Os seletores publicados existentes não serão alterados. Se forem alterados, será uma mudança que quebra a compatibilidade e será necessário fazer um incremento de versão de acordo com o semver.
+
+Nesse caso, é uma prática aceitável e os desenvolvedores podem "conectar-se" a eles (selecioná-los) usando esses seletores em suas folhas de estilo.
+
+Um exemplo de conexão com seletores de um componente:
+
+```jsx
+import { useId } from 'react';
+import clsx from 'clsx';
+
+function Slider({ label, value }) {
+  const id = useId();
+  return (
+    <div className="gfe-slider">
+      <label className="gfe-slider-label" for={id}>
+        {label}
+      </label>
+      <input className="gfe-slider-range" id={id} type="range" value={value} />
+    </div>
+  );
+}
+```
+
+```css
+/* Biblioteca de UI padrão de estilo */
+. fe-slider {
+  font-size: 12px;
+}
+
+/* Nenhuma outra classe é definida nesta folha de estilos,
+gfe-slider-label e gfe-slider-range são adicionados
+ao componente apenas para que os desenvolvedores tenham acesso
+aos elementos subjacentes. */
+```
+
+```css
+/* Folha de estilo personalizada do desenvolvedor */
+.gfe-slider {
+  font-size: 16px; /* Conflitos com o padrão .gfe-slider */
+  padding: 10px 20px;
+}
+
+.gfe-slider-label {
+  color: red;
+}
+
+.gfe-slider-range {
+  height: 20px;
+}
+```
+
+Essa abordagem poupa os desenvolvedores do trabalho de passar classes para o componente, pois eles só precisam escrever CSS para personalizar o estilo. [Reach UI](https://reach.tech/styling), uma biblioteca de componentes de UI para React, usa seletores de elementos. Cada componente possui um atributo \`data-reach-\* no elemento DOM subjacente.
+
+```css
+[data-reach-menu-item] {
+  color: blue;
+}
+```
+
+No entanto, essa abordagem ainda sofre com o problema de estilização não determinística, como na "injeção de classes", e não permite facilmente a estilização por instância. Se a estilização por instância for desejada, essa abordagem pode ser combinada com a abordagem de injeção de classes.
+
+### Objeto de Tema
+
+Em vez de receber classes, o componente recebe um objeto de chaves/valores para estilização. Isso é útil se houver apenas um subconjunto restrito de propriedades para personalizar ou se você quiser restringir a estilização a apenas algumas propriedades.
+
+```jsx
+const defaultTheme = { color: 'black', height: 12 };
+
+function Slider({ value, label, theme }) {
+  // Combinar com o padrão.
+  const mergedTheme = { ...defaultTheme, ...theme };
+
+  return (
+    <div className="gfe-slider">
+      <label
+        for={id}
+        style={{
+          color: mergedTheme.color,
+        }}>
+        {label}
+      </label>
+      <input
+        id={id}
+        type="range"
+        value={value}
+        style={{
+          height: mergedTheme.height,
+        }}
+      />
+    </div>
+  );
+}
+
+<Slider theme={{ color: 'red', height: 24 }} {...props} />;
+```
+
+No entanto, como não são usadas classes com estilos conflitantes e os estilos em linha têm maior especificidade do que as classes, não há conflito de especificidade e os estilos em linha serão aplicados. No entanto, o número de opções que precisam ser suportadas pode aumentar rapidamente. Os estilos em linha também estão presentes no DOM por instância do componente, o que pode ser prejudicial para o desempenho se esse componente for renderizado centenas/milhares de vezes em uma página.
+
+O objeto de tema é apenas uma maneira de restringir a estilização a determinadas propriedades e, opcionalmente, a um conjunto aceito de valores. Os valores não precisam ser usados como estilos em linha e podem ser combinados com outras abordagens de estilização.
+
+### CSS Preprocessor Compilation
+
+Bibliotecas de UI geralmente são escritas com pré-processadores de CSS como [Sass](https://sass-lang.com/) e [Less](https://lesscss.org/). [Bootstrap](https://getbootstrap.com/) é escrito com Sass e eles fornecem uma maneira de [personalizar as variáveis Sas](https://getbootstrap.com/docs/5.3/customize/sass/) usados para que os desenvolvedores possam gerar uma biblioteca de biblioteca de UI personalizada.
+
+Essa abordagem é excelente porque não depende de substituir seletores CSS para alcançar a personalização. Também há uma quantidade menor de CSS resultante e nenhum estilo redundante sobreposto. A desvantagem é que é necessário um passo de compilação.
+
+### Variáveis CSS / Propriedades Personalizadas
+
+[Variáveis CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (ou mais formalmente conhecido como propriedades personalizadas CSS) são entidades definidas por autores de CSS que contêm valores específicos para serem reutilizados através de um documento. A função `var()`, aceita valores de fallback se a variável determinada não estiver definida.
+
+```jsx
+function Slider({ value, label }) {
+  return (
+    <div className="gfe-slider">
+      <label for={id}>{label}</label>
+      <input id={id} type="range" value={value} />
+    </div>
+  );
+}
+```
+
+```css
+/* UI library default stylesheet */
+.gfe-slider {
+  /*Reserva de 12px caso não seja definido. */
+  font-size: var(--gfe-slider-font-size, 12px);
+}
+```
+
+```css
+/* Folha de estilo personalizada do desenvolvedor */
+:root {
+  --gfe-slider-font-size: 15px;
+}
+```
+
+O desenvolvedor pode definir um valor para `--gfe-slider-font-size` globalmente através do seletor `:root` e definir o tamanho da fonte para a classe `.gfe-slider` como 15px. O benefício dessa abordagem é que ela não requer JavaScript, no entanto, a personalização por componente será mais trabalhosa (mas ainda possível).
+
+### Render Props
+
+No React, as "render props" são props de função que um componente usa para saber o que renderizar. Isso é útil para separar comportamento da apresentação. Muitas bibliotecas de UI comportamentais/headless como [Radix](https://www.radix-ui.com/), [Headless UI](https://headlessui.com/) e [Reach UI](https://reach.tech/menu-button) fazem amplo uso de "render props".
+
+{/* TODO: Seção sobre manipulação do componente após a inicialização */}
+
+## Internacionalização (i18n)
+
+Minha interface de usuário funciona para múltiplos idiomas? Quão fácil é adicionar suporte para mais idiomas?
+
+### Evitar codificação rígida de rótulos em um determinado idioma
+
+Alguns componentes de interface de usuário possuem strings de rótulo dentro deles (por exemplo, um carrossel de imagens possui 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.
+
+### Idiomas da direita para a esquerda
+
+Alguns idiomas (como árabe, hebraico) são lidos da direita para a esquerda, e a interface do usuário precisa ser espelhada horizontalmente. O componente pode pegar uma prop/opção `direction` e alterar a ordem de como os elementos são renderizados. Por exemplo, os botões de anterior e próximo estarão à direita e à esquerda, respectivamente, em um idioma da direita para a esquerda (RTL).
+
+Use [propriedades lógicas CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) para tornar seus estilos mais à prova de futuro e permitir que seu layout funcione para diferentes [modos de escrita](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes).
+
+{/* TODO: Dê exemplos de como implementar RTL. */}
diff --git a/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/zh-CN.mdx
new file mode 100644
index 0000000000..850b50af0e
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/zh-CN.mdx
@@ -0,0 +1,385 @@
+---
+title: UI 组件的 API 设计原则
+description: 设计开发者界面组件 API 的最佳实践，适用于 UI 组件编码和系统设计面试
+seo_title: API 设计原则 | 前端面试手册
+seo_description: 设计开发者界面组件 API 的最佳实践，适用于 UI 组件编码和系统设计面试
+social_title: UI 组件的 API 设计原则 | 前端面试手册
+---
+
+像 [Bootstrap](https://getbootstrap.com/) 和 [Material UI](https://mui.com/) 这样的用户界面组件库通过提供常用组件（如按钮、选项卡、模态框等）来帮助开发人员更快地构建 UI，这样开发人员就不必在开始新项目时从头开始构建这些组件，从而不必重复造轮子。
+
+在前端面试中，经常会被要求构建 UI 组件并设计一个 API 来初始化它们。设计好的组件 API 是前端工程师的基本功。本页介绍了一些设计 UI 组件 API 的顶级技巧和最佳实践。其中一些技巧可能是特定于框架的，但可以推广到其他基于组件的 UI 框架。
+
+## 初始化
+
+有多种方法可以初始化 UI 组件：
+
+### jQuery 风格
+
+在像 [React](https://react.dev/)、[Angular](https://angular.io/) 和 [Vue](https://vuejs.org/) 这样的现代 JavaScript UI 库/框架出现之前，[jQuery](https://jquery.com/)（和 [jQuery UI](https://jqueryui.com/)）是构建 UI 最流行的方式。 jQuery UI 推广了通过“构造函数”初始化 UI 组件的想法，这涉及两个参数：
+
+1. **根元素**：用于渲染内容的根 DOM 元素
+2. **自定义选项**：可选的、额外的、自定义选项，通常以纯 JavaScript 对象的形式
+
+使用 jQuery UI，可以用一行代码将 DOM 元素变成 [滑块](https://api.jqueryui.com/slider/)（以及许多其他 UI 组件）：
+
+```html
+<div id="gfe-slider"></div>
+<script>
+  $('#gfe-slider').slider();
+</script>
+```
+
+**jQuery 补充**：jQuery UI 的 `slider()` 方法（构造函数）接受一个 JavaScript 对象作为自定义选项。执行 `$('#slider')` 会选择 `<div id="slider">` 元素，并返回一个 jQuery 对象，该对象包含用于“对元素执行某些操作”的便捷方法，例如 `addClass`、`removeClass` 等以及其他 DOM 操作方法。在 jQuery 方法中，可以通过 `this` 关键字访问所选元素。 jQuery API 围绕这种“选择一个元素并对其执行某些操作”的方法构建，因此 `slider()` 方法不需要根 DOM 元素的参数。
+
+可以通过传入一个纯 JavaScript 选项对象来定制滑块：
+
+```html
+<div id="gfe-slider"></div>
+<script>
+  $('#gfe-slider').slider({
+    animate: true,
+    max: 50,
+    min: 10,
+    // 在这里查看其他选项：https://api.jqueryui.com/slider/
+  });
+</script>
+```
+
+### Vanilla JavaScript 风格
+
+由于 vanilla JavaScript 不是标准或框架，因此没有用于初始化组件的 vanilla JavaScript 风格。但是，如果您阅读了足够多的 GreatFrontEnd 的 vanilla JavaScript [UI 编码问题](/questions/formats/ui-coding) 的解决方案，您会发现我们推荐的 API 与 jQuery 的 API 类似，构造函数接受一个根元素和选项：
+
+```js
+function slider(rootEl, options) {
+  // 对 rootEl 和 options 做一些事情。
+}
+```
+
+### React（或类似的基于组件的库）
+
+React 迫使你将 UI 编写为组件，其中包含逻辑和结构。React 组件是返回标记的 JavaScript 函数，是对其自身如何呈现的描述。
+
+React 组件可以接收 `props`，它们本质上是组件的自定义选项。
+
+```js
+function Slider({ min, max }) {
+  // 使用 props 渲染自定义组件。
+  return <div>...</div>;
+}
+
+<Slider max={50} min={10} />;
+```
+
+组件不接受根元素。要将元素渲染到页面中，需要使用单独的 API。
+
+```jsx
+import { createRoot } from 'react-dom/client';
+import Slider from './Slider';
+
+const domNode = document.getElementById('#gfe-slider');
+// React 将管理此元素中的 DOM。
+const root = createRoot(domNode);
+// 在元素中显示 Slider 组件。
+root.render(<Slider max={50} min={10} />);
+```
+
+如果整个页面是一个 React 应用程序，你通常不需要自己调用 `createRoot()`，因为在根/页面级别只有一个 `createRoot()` 调用。
+
+## 自定义外观
+
+即使 UI 库中的 UI 组件提供默认样式，开发人员通常也希望使用其公司/产品的品牌和主题颜色对其进行自定义。
+
+因此，大多数 UI 组件（尤其是那些构建为第三方库的组件）将允许通过以下几种方法自定义外观：
+
+### 类注入
+
+这里的想法很简单，组件接受一个 prop/选项，允许开发人员提供他们自己的类，并且这些类被添加到实际的 DOM 元素中。这种方法不是很健壮，因为如果组件也通过类添加自己的样式，则组件的类和开发人员提供的类中可能存在冲突的属性。
+
+#### React
+
+```jsx
+import clsx from 'clsx';
+
+function Slider({ className, value }) {
+  return (
+    <div className={clsx('gfe-slider', className)}>
+      <input type="range" value={value} />
+    </div>
+  );
+}
+
+<Slider className="my-custom-slider" value={50} />;
+```
+
+```css
+/* UI 库默认样式表 */
+.gfe-slider {
+  height: 12px;
+}
+```
+
+```css
+/* 开发人员的自定义样式表 */
+.my-custom-slider {
+  color: red;
+}
+```
+
+通过类注入，开发人员可以将组件的文本 `color` 更改为 `red`。
+
+如果组件中有许多要定位的 DOM 元素，并且一个 `className` prop 不够用，你还可以为不同元素的 `className` 拥有多个不同命名的 prop：
+
+```jsx
+import { useId } from 'react';
+import clsx from 'clsx';
+
+function Slider({ label, value, className, classNameLabel, classNameTrack }) {
+  const id = useId();
+  return (
+    <div className={clsx('gfe-slider', className)}>
+      <label className={clsx('gfe-slider-label', classNameLabel)} for={id}>
+        {label}
+      </label>
+      <input
+        className={clsx('gfe-slider-range', classNameTrack)}
+        id={id}
+        type="range"
+        value={value}
+      />
+    </div>
+  );
+}
+```
+
+#### jQuery
+
+在 jQuery 中，类也可以作为选项的一个字段传递。
+
+```js
+$('#gfe-slider').slider({
+  // 实际上，jQuery UI 接受一个 `classes` 字段
+  // 因为有多个元素。
+  class: 'my-custom-slider',
+});
+```
+
+实际上，所有 jQuery UI 的组件初始化器都接受 `classes` 字段，以允许向各个元素添加额外的类。以下示例取自 [jQuery UI Slider](https://api.jqueryui.com/slider/#option-classes)：
+
+```js
+$('#gfe-slider').slider({
+  classes: {
+    'ui-slider': 'highlight',
+    'ui-slider-handle': 'ui-corner-all',
+    'ui-slider-range': 'ui-corner-all ui-widget-header',
+  },
+});
+```
+
+#### 缺点：非确定性样式
+
+类注入有一个不明显的缺点——最终的视觉结果是不确定的，可能不是预期的结果。以下面的代码为例：
+
+```jsx
+import clsx from 'clsx';
+
+function Slider({ className, value }) {
+  return (
+    <div className={clsx('gfe-slider', className)}>
+      <input type="range" value={value} />
+    </div>
+  );
+}
+
+<Slider className="my-custom-slider" value={50} />;
+```
+
+```css
+/* UI 库默认样式表 */
+.gfe-slider {
+  height: 12px;
+  color: black;
+}
+```
+
+```css
+/* 开发人员的自定义样式表 */
+.my-custom-slider {
+  color: red; /* .gfe-slider 也定义了 color 的值。 */
+}
+```
+
+在上面的例子中，`.gfe-slider` 和 `.my-custom-slider` 类都指定了 `color`，并且由于这两个选择器具有相同的特异性，因此获胜的样式实际上是出现在 HTML 页面后面的类。
+
+如果样式表的加载顺序无法保证（例如，如果样式表是延迟加载的），则视觉结果将是不确定的。结果是开发人员开始使用 `!important` 或 `.my-custom-slider.my-custom-slider` 等黑客手段来让他们的选择器赢得特异性之战。有了所有这些黑客手段，CSS 代码开始变得难以维护。
+
+在 jQuery UI 中，如果添加了自定义类，则不使用现有的默认值。这消除了“获胜样式”的歧义，但用户现在必须重新实现原始类中存在的所有必要样式。这种方法也可以应用于 React 组件以解决歧义。
+
+尽管存在缺陷，但类注入仍然是一个非常受欢迎的选项。
+
+### CSS 选择器钩子
+
+从技术上讲，如果开发人员阅读组件的源代码并通过使用相同的类来定义他们的自定义样式，就可以实现自定义。然而，这样做是危险的，因为它依赖于组件的内部结构，而且不能保证类名将来不会改变。
+
+如果 UI 库作者可以将这些类/属性作为其 API 的一部分，并提供以下保证：
+
+1. 选择器列表已发布以供外部参考
+2. 现有的已发布选择器将不会更改。如果它们被更改，这将是一个重大更改，并且需要根据 semver 进行版本更新
+
+那么这是一个可以接受的做法，开发人员可以通过在他们的样式表中使用这些选择器来“钩住”它们（定位它们）。
+
+一个钩住组件选择器的例子：
+
+```jsx
+import { useId } from 'react';
+import clsx from 'clsx';
+
+function Slider({ label, value }) {
+  const id = useId();
+  return (
+    <div className="gfe-slider">
+      <label className="gfe-slider-label" for={id}>
+        {label}
+      </label>
+      <input className="gfe-slider-range" id={id} type="range" value={value} />
+    </div>
+  );
+}
+```
+
+```css
+/* UI 库默认样式表 */
+.gfe-slider {
+  font-size: 12px;
+}
+
+/* 此样式表中未定义其他类，
+gfe-slider-label 和 gfe-slider-range 被添加
+到组件中，只是为了让开发人员能够访问
+底层元素。 */
+```
+
+```css
+/* 开发者自定义样式表 */
+.gfe-slider {
+  font-size: 16px; /* 与默认的 .gfe-slider 冲突 */
+  padding: 10px 20px;
+}
+
+.gfe-slider-label {
+  color: red;
+}
+
+.gfe-slider-range {
+  height: 20px;
+}
+```
+
+这种方法使开发人员免于将类传递到组件的麻烦，因为他们只需要编写 CSS 来定制样式。 [Reach UI](https://reach.tech/styling) 是一个用于 React 的无头 UI 组件库，它使用元素选择器。 每个组件在底层 DOM 元素上都有一个 `data-reach-*` 属性。
+
+```css
+[data-reach-menu-item] {
+  color: blue;
+}
+```
+
+然而，这种方法仍然受到“类注入”带来的不确定性样式问题的影响，并且不容易实现每个实例的样式。 如果需要每个实例的样式，可以将此方法与类注入方法结合使用。
+
+### 主题对象
+
+组件不接收类，而是接收一个用于样式的键/值对象。 如果只有一小部分属性需要自定义，或者您只想将样式限制为少数属性，这将非常有用。
+
+```jsx
+const defaultTheme = { color: 'black', height: 12 };
+
+function Slider({ value, label, theme }) {
+  // 与默认值合并。
+  const mergedTheme = { ...defaultTheme, ...theme };
+
+  return (
+    <div className="gfe-slider">
+      <label
+        for={id}
+        style={{
+          color: mergedTheme.color,
+        }}>
+        {label}
+      </label>
+      <input
+        id={id}
+        type="range"
+        value={value}
+        style={{
+          height: mergedTheme.height,
+        }}
+      />
+    </div>
+  );
+}
+
+<Slider theme={{ color: 'red', height: 24 }} {...props} />;
+```
+
+但是，由于没有使用具有冲突样式的类，并且内联样式的特异性高于类，因此没有特异性冲突，内联样式将胜出。 但是，需要支持的选项数量可能会增长得非常快。 内联样式也存在于每个组件实例的 DOM 中，如果此组件在页面中呈现数百/数千次，这可能会对性能不利。
+
+主题对象只是一种将样式限制为某些属性的方法，并且可以选择一组可接受的值，这些值不需要用作内联样式，而是可以与其他样式方法结合使用。
+
+### CSS 预处理器编译
+
+UI 库通常使用 CSS 预处理器编写，例如 [Sass](https://sass-lang.com/) 和 [Less](https://lesscss.org/)。 [Bootstrap](https://getbootstrap.com/) 使用 Sass 编写，它们提供了一种 [自定义 Sass 变量](https://getbootstrap.com/docs/5.3/customize/sass/) 的方法，以便开发人员可以生成自定义 UI 库样式表。
+
+这种方法很棒，因为它不依赖于覆盖 CSS 选择器来实现自定义。 产生的 CSS 数量也更少，并且没有多余的被覆盖样式。 缺点是需要一个编译步骤。
+
+### CSS 变量 / 自定义属性
+
+[CSS 变量](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)（或更正式地称为 CSS 自定义属性）是由 CSS 作者定义的实体，其中包含要在整个文档中重复使用的特定值。 `var()` 函数，如果给定的变量未设置，它接受回退值。
+
+```jsx
+function Slider({ value, label }) {
+  return (
+    <div className="gfe-slider">
+      <label for={id}>{label}</label>
+      <input id={id} type="range" value={value} />
+    </div>
+  );
+}
+```
+
+```css
+/* UI 库默认样式表 */
+.gfe-slider {
+  /* 如果未设置，则回退为 12px。 */
+  font-size: var(--gfe-slider-font-size, 12px);
+}
+```
+
+```css
+/* 开发者自定义样式表 */
+:root {
+  --gfe-slider-font-size: 15px;
+}
+```
+
+开发人员可以通过 `:root` 选择器全局定义 `--gfe-slider-font-size` 的值，并将 `.gfe-slider` 类的字体大小设置为 15px。 这种方法的好处是不需要 JavaScript，但是，每个组件的自定义会更加麻烦（但仍然是可能的）。
+
+### Render props
+
+在 React 中，render props 是组件用来知道要呈现什么的函数 props。 它对于将行为与表示分开很有用。 许多行为/无头 UI 库，如 [Radix](https://www.radix-ui.com/)、[Headless UI](https://headlessui.com/) 和 [Reach UI](https://reach.tech/menu-button) 大量使用 render props。
+
+{/* TODO: 关于初始化后组件操作的部分 */}
+
+## 国际化 (i18n)
+
+您的 UI 是否支持多种语言？添加对更多语言的支持有多容易？
+
+### 避免用某种语言硬编码标签
+
+一些 UI 组件在其内部有标签字符串（例如，图片轮播有 prev/next 按钮的标签）。最好允许通过将这些标签字符串作为组件 props/options 的一部分来自定义它们。
+
+### 从右到左的语言
+
+一些语言（例如阿拉伯语、希伯来语）是从右向左阅读的，UI 必须水平翻转。组件可以接收一个 `direction` prop/option 并更改元素的渲染顺序。例如，在 RTL 语言中，prev 和 next 按钮将分别位于右侧和左侧。
+
+使用 [CSS 逻辑属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Logical_Properties) 来使您的样式具有前瞻性，并让您的布局适用于不同的 [书写模式](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Writing_Modes)。
+
+{/* TODO: 给出如何实现 RTL 的例子。 */}
diff --git a/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/en-US.langnostic.json
new file mode 100644
index 0000000000..d5bd628264
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/en-US.langnostic.json
@@ -0,0 +1,110 @@
+{
+  "frontmatter": {
+    "title": "840f6e65",
+    "description": "e8d1ee29",
+    "seo_title": "2ffcae27",
+    "seo_description": "fe1885a",
+    "social_title": "2ffcae27"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "7f1fffed",
+        "81cc1826",
+        "1ebd485d",
+        "900e38b",
+        "d3697278",
+        "100f898a",
+        "7ec059be",
+        "e2c69bb6",
+        "1d54ea6d",
+        "2368cb25",
+        "c1971502",
+        "5f4ca2bc",
+        "fda09b00",
+        "1ec3f9b9",
+        "14e70e0f",
+        "c13208eb",
+        "1480761c",
+        "91cda1b7",
+        "3b3e557d",
+        "7ef0c666",
+        "f2c2fd5c",
+        "12b04d09",
+        "2c98cc5a",
+        "969ca9a6",
+        "56a2c656",
+        "fd728018",
+        "b9b66c7f",
+        "64619fc4",
+        "2f7a4e16",
+        "241cc128",
+        "463e0551",
+        "3c644c8b",
+        "4db7b5a0",
+        "86784729",
+        "fdc54fc7",
+        "499e5031",
+        "edd76fef",
+        "9d0b011e",
+        "2bd9cd4c",
+        "5d246309",
+        "97763a57",
+        "cc198c3e",
+        "8f5fb6c2",
+        "9790b325",
+        "7bacbe4b"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "7f1fffed",
+        "81cc1826",
+        "1ebd485d",
+        "900e38b",
+        "d3697278",
+        "100f898a",
+        "7ec059be",
+        "e2c69bb6",
+        "1d54ea6d",
+        "2368cb25",
+        "c1971502",
+        "5f4ca2bc",
+        "fda09b00",
+        "1ec3f9b9",
+        "14e70e0f",
+        "c13208eb",
+        "1480761c",
+        "91cda1b7",
+        "3b3e557d",
+        "7ef0c666",
+        "f2c2fd5c",
+        "12b04d09",
+        "2c98cc5a",
+        "969ca9a6",
+        "56a2c656",
+        "fd728018",
+        "b9b66c7f",
+        "64619fc4",
+        "2f7a4e16",
+        "241cc128",
+        "463e0551",
+        "3c644c8b",
+        "4db7b5a0",
+        "86784729",
+        "fdc54fc7",
+        "499e5031",
+        "edd76fef",
+        "9d0b011e",
+        "2bd9cd4c",
+        "5d246309",
+        "97763a57",
+        "cc198c3e",
+        "8f5fb6c2",
+        "9790b325",
+        "7bacbe4b"
+      ]
+    }
+  }
+}
diff --git a/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/en-US.mdx b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/en-US.mdx
new file mode 100644
index 0000000000..513ef78469
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/en-US.mdx
@@ -0,0 +1,162 @@
+---
+title: Cheatsheet for UI Interview Questions
+description: A cheatsheet you can use to improve the user interfaces you have to build or design during front end interviews.
+seo_title: User Interface Questions Cheatsheet | Front End Interview Playbook
+seo_description: A cheatsheet you can use to improve the user interfaces you have to build or design during front end interviews - component organization, state design, UX and more
+social_title: User Interface Questions Cheatsheet | Front End Interview Playbook
+---
+
+Here are some tips you can use to improve the user interfaces you have to build/design during front end interviews. These can be applied to both [User Interface Coding Interviews](/front-end-interview-playbook/user-interface) and [Front End System Design Interviews](/system-design/types-of-questions).
+
+## General
+
+- **Break down the problem**: Break down the problem into stages/milestones that build on top of each other and write your code progressively.
+- **Test frequently**: Test the UI in the browser after you complete every feature so that you can catch bugs early. Bugs caught earlier are easier to fix. Make sure the current feature is working before moving on to the next feature.
+- **Use JavaScript frameworks if possible**: Your life will be very hard if you choose to build complicated UI using Vanilla JavaScript as the code can get very long and messy quickly. We recommend building apps and games using a JavaScript framework/library (e.g. React, Vue, Angular, etc.) if possible.
+- **Think ahead and plan accordingly**: Think about what features your interviewer might ask you to add next by drawing from your experience in building real-world applications, using libraries, or from practicing interview questions. Design your code in a way that makes it easy for new features to be added. Most of the time you would be asked to component-ize your UI so that multiple component instances can be shown on a page – modularize and avoid relying on global states or polluting the global namespace.
+
+## Component organization
+
+How do you structure your code?
+
+- **Adopt the [Container/Presentational Pattern](https://www.patterns.dev/posts/presentational-container-pattern/)**: To achieve good decoupling, rendering code should be agnostic to the source of data. Separate components into an outer layer that provides the data and an inner stateless one that renders the view based on the data. This makes it easy for the view to switch from local component/app state to data loaded from the network and vice versa, you only have to change the outer component and the inner component can be used as-is. This separation also facilitates testing of the presentational component as the required data can be easily mocked.
+- **Break down the app into smaller components**: If the UI has multiple parts, break the UI into smaller components and identify the props/state needed by each component.
+- **Minimal API surface area**: Don't pass excess data to inner components which don't need them.
+- **Component instantiation**: When asked to build UI components, define APIs (usually functions) to allow creating multiple independent instances of the components along with configurable options and defaults. Avoid writing code (e.g. relying on global variables) that prevents multiple UI component instances from being created.
+  - **Vanilla JavaScript**: Create a function that takes in a DOM element (the container element) and an options object. Within the function you can dynamically create DOM elements and append to the container element. Another source of inspiration for a component API is [jQuery UI](https://jqueryui.com), but that has a dependency on jQuery.
+  - **Other JavaScript UI frameworks**: Most modern JavaScript UI frameworks (e.g. React, Vue, Angular) force you to think in terms of components by default.
+
+## State design
+
+State is data that changes over time in your UI, commonly due to user interactions or background events (network request response, passing of time, WebSocket events).
+
+Most UI questions in interviews will require state and designing the state well is paramount.
+
+- **Determine the minimum state needed in your UI**: The smaller the state, the easier it is to read and understand the code -> lower likelihood for bugs. Identify essential state vs derived state. Derived state is state that can be calculated from essential state. By deriving the state on-the-fly you reduce the possibility of state values going out-of-sync.
+- **Separate rendering code vs data management code**: Make the UI a function of your data and separate your code into two parts (rendering code vs data management code) for better readability. If you use JavaScript frameworks such as React, you will more or less be forced to do so.
+- **Use the state-reducer pattern for complex state interactions**: If the question requires many state fields and certain actions require changing multiple fields at once, use a [reducer to consolidate state update logic](https://react.dev/learn/extracting-state-logic-into-a-reducer). First popularized by Redux, the state-reducer pattern encourages you to determine the state of your UI, actions that can be taken, and how to combine actions with state to derive the next state. If you are using React, you can achieve this pattern via the [`useReducer` React hook](https://react.dev/reference/react/useReducer). Redux is usually overkill for interviews and `useReducer` should be sufficient.
+
+[React's](https://react.dev/) docs on ["Managing State"](https://react.dev/learn/managing-state) is an excellent resource on how to design and use component state correctly. Some of the ideas mentioned aren't specific to React and can be applied to any UI frameworks.
+
+## JavaScript
+
+Is your JavaScript using modern language syntax and good practices while avoiding bad practices?
+
+- **Use a style guide**: Use a JavaScript style guide like [Airbnb's JavaScript Style Guide](https://github.com/airbnb/javascript). During development, static analysis tools like [ESLint](https://eslint.org) can help you to enforce some of these good practices. However, these tools might not be available during interviews. Try to get accustomed to writing code with good coding style without help from a tool.
+- **Leave the global environment alone**: This applies to Vanilla JavaScript scenarios. Avoid polluting global scope by declaring global variables and global functions. Write an Immediately-Invoked Function Expression (IIFE) and put all custom code within it.
+
+## HTML
+
+Are you writing semantic HTML with the right tags and right attributes?
+
+- **Semantic tags**: Use heading tags for titles, button tags for interactive elements, list tags for sequential elements, and so on. Don't use `<div>`s for everything!
+- **Heading hierarchy**: Ensure heading tags have a hierarchy and there's not more than one `<h1>` in the DOM.
+- **Interactive elements**: Use `<button>` for elements that require interaction. Do not add click handlers to `<div>` and `<span>`s, that's a huge red flag and shows a lack of thought for accessibility.
+
+### Forms
+
+Forms are complex on its own and deserves its own section.
+
+- **Link labels and inputs**: `<input>`s should be linked to `<label>`s using `id` and `for`.
+- **Wrap inputs in a form**: `<input>`s should be wrapped in a `<form>` so that clicking on buttons and hitting Enter will submit the form. Remember to add `event.preventDefault()` if the network request is meant to be made using Ajax.
+- **Inputs should have appropriate types**: `<input>`s should have appropriate `type` like `email`, `password`, `number`, etc.
+- **Leverage native HTML form validation**: Where possible, use the `required` attribute combined with other attributes like `pattern`, `min`, `max`, and so on.
+
+## CSS/styling
+
+Is your CSS written in a scalable and easy-to-understand manner?
+
+- **Write Vanilla CSS**: Learn to write CSS without reliance on preprocessors like [Sass](https://sass-lang.com/) and [Less](https://lesscss.org/). Not all environments will allow using processors and interview questions are likely small and do not really benefit from the features CSS preprocessors bring. The most useful feature of CSS processors is the use of variables, which is available natively via CSS custom properties (variables).
+- **Adopt a CSS naming convention**: Consider adopting a CSS naming methodology like [Block Element Modifier](https://getbem.com) when writing your classes.
+- **Avoid `#id` selectors in components**: When building UI components meant to be reused (e.g. buttons, tabs, menus, modals, etc), avoid using `#id` selectors in the HTML as `id`s are meant to be globally unique but you can have multiple instances of the component.
+- **Organize your CSS**: Read about how to [organize your CSS in big projects](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing) and how to have a [Scalable and Modular Architecture for CSS](http://smacss.com/).
+
+## User experience
+
+Does your UI provide a great user experience?
+
+- **Mobile-friendliness**: Check if you need to make your UI work well on mobile.
+  - CSS media queries can be used to render a different layout on mobile.
+  - Make interactive elements like buttons large enough to be pressed (recommend at least 44 x 44 px) and spaced widely enough.
+- **Error states**: Reflect errors promptly and clearly — form validation errors, network request errors.
+- **Handle rendering images of different dimensions**: Make your UI work for rendering images of all sizes/dimensions yet preserving the original aspect ratios.
+  - Use CSS `background-image` together with `background-size: contain` so that the image fits within your defined area. If it is ok for the image to be cropped off (e.g. for gradient backgrounds), use `background-size: cover`.
+  - `<img>` tags have a similar `object-fit` property with `contain` and `cover` values.
+- **Optimistic updates**: Advanced technique where the success state is reflected even though the network request is still pending. If the request fails, revert the UI changes and show an error message.
+
+## Network
+
+Does your UI handle the unpredictable nature of network requests and conditions?
+
+- **Reflect network request states**: If the UI involves making network requests, clearly show the pending/success/failure state of the requests
+  - **Pending**: Disable fields/buttons, show a spinner.
+  - **Error**: Show an error message.
+  - **Success**: Update the UI and/or show a success message.
+- **Race conditions**: A common reason is due to parallel network requests where the response order is not guaranteed. A request made later could receive a response earlier. If your UI is susceptible to this, you can keep track of the latest requests and ignore the results from the earlier ones. Alternatively, make it such that your UI cannot fire multiple network requests at once, e.g. by disabling elements which trigger network requests after they're clicked.
+- **Prevent duplicate requests**: Buttons should be disabled after submission to avoid making duplicate network requests.
+- **Consolidating requests**: If the UI is making too many network requests, you can:
+  - **Debounce/throttle**: Rate limit the number of network requests fired.
+  - **Batch requests**: Group requests together and make only one single request. This requires the server side to support such a format.
+- **Caching**: If a request with the same parameters has been made recently, can you reuse the previous response and save on a network round trip?
+- **Request timeouts**: You might want to artificially show that the request has failed (timed out) if the request doesn't receive a response after a stipulated duration.
+- **Optimistic updates**: Advanced technique where the success state is reflected even though the network request is still pending. If the request fails, revert the UI changes and show an error message.
+
+## Accessibility (a11y)
+
+Handling accessibility in UI is a huge plus and in some cases a requirement for senior engineers.
+
+- Can you use the UI with the keyboard only?
+- Can you use your UI component with a screen reader?
+- Can your UI component work without color?
+- Can your UI component work without sound?
+
+Source: [Accessible UI Components for the web](https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67)
+
+- **Screen readers, ARIA roles, states, and properties**:
+  - Add the right `aria-role`s for custom built elements not built using custom HTML tags.
+  - Use `aria-label`s to describe elements where text is not shown (e.g. icon-only buttons).
+  - Link error messages elements with the elements responsible for them via `aria-describedby`/`aria-errormessage`.
+  - **Image `alt` text**: Add `alt` attribute to `<img>` elements so that screen readers can describe the image.
+- **Keyboard interactions**
+  - Add the `tabindex` attribute to elements you want to be focusable via keyboard tabbing.
+  - Elements can be triggered via keyboard.
+  - Check that the focus order makes sense.
+- **Visual issues**
+  - **Color contrast**: Sufficient color contrast between text/images and the background.
+  - **Size of elements**: font size, interactive element size should be large enough for their intended medium.
+
+web.dev by Google has a [free in-depth course on accessibility](https://web.dev/learn/accessibility/) which we highly recommend.
+
+## Edge cases
+
+There's probably not enough time to handle all edge cases scenarios in your code during the interview, but it'd be good to mention them to the interviewer for brownie points.
+
+- **Handle long strings**: Strings in UI (e.g. headings/button labels) can cause the UI to behave weirdly such as overflowing and affect the position of surrounding elements. Long strings can be a result of user input or translations.
+- **Empty states**: Show an empty state message/placeholder to indicate absence of contents e.g. when the list is empty. Showing nothing might make the user think that there's a pending network request and that data is still being fetched.
+- **Too many items in a list**: Showing too many items on a single page can lead to poor UX (user has to scroll a lot) and poor performance in terms of responsiveness and memory consumption.
+  - **Pagination**: Break up a long list of items into multiple pages.
+  - [**Virtual lists**](https://www.patterns.dev/posts/virtual-lists): Rendering only visible rows of content in a dynamic list instead of the entire list.
+  - Truncate the excess content and show an ellipsis. The `word-break` CSS property will come in handy.
+  - Limit the content to the first X characters/words and hide the excess content behind a "Show More" button.
+
+## Performance
+
+- **Throttle/debounce**: Throttle and debounce are rate limiting techniques to prevent unnecessary operations. This technique can be used for operations which aren't super time-sensitive like network requests and scroll/resizing event callbacks.
+- **Caching**: The results of duplicate computations / network requests can be cached in browser memory/storage and not repeated.
+- **On demand loading**: Lazy load data/component code only when they are needed, instead of loading all at the start.
+- **Prefetch/preload data**: Reduce network latency by prefetching/preloading data right before it is needed so that updates appear instantly.
+- **Too many items in a list**: Refer to the point under "Edge Cases" above.
+
+## Security
+
+- **Cross-site Scripting (XSS)**: Avoid assigning to [`Element.innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) or React's `dangerouslySetInnerHTML` when rendering contents into the DOM if it comes from users to prevent cross-site scripting, assign to [`Node.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) or use the experimental[`Element.setHTML()`](https://webdocs.dev/en-us/docs/web/api/element/sethtml) method instead. Refer to [OWASP's XSS Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
+- **Output encoding for "URL Contexts"**: If user-supplied input can be used in URL query parameters, use `encodeURIComponent` to prevent unintended values from becoming part of the URL (e.g. extra query parameters).
+- **Cross Site Request Forgery**: Refer to [OWASP's CSRF Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html).
+
+## Internationalization (i18n)
+
+Does your UI work for multiple languages? How easy is it to add support for more languages?
+
+- **Avoid hardcoding of labels in a certain language**: Some UI components have label strings within them (e.g. image carousel has labels for prev/next buttons). It'd be good to allow customization of these label strings by making them part of component props/options.
+- **UI can render long strings**: Refer to the section above on rendering long strings.
+- **Right-to-left languages**: Some languages (e.g. Arabic, Hebrew) are read from right-to-left and the UI has to be flipped horizontally. Use [CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) to make your layout work for different [writing modes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes).
diff --git a/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/pt-BR.mdx
new file mode 100644
index 0000000000..9e29e90d5c
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/pt-BR.mdx
@@ -0,0 +1,160 @@
+---
+title: Resumo de Perguntas de Interface de Usuário Front-End
+description: Principais dicas para melhorar as interfaces de usuário que você precisa construir durante entrevistas para desenvolvedores front-end/web - Estrutura de código, gerenciamento de estado, acessibilidade e muito mais.
+---
+
+Aqui estão algumas dicas que você pode usar para melhorar as interfaces de usuário que você precisa construir ou projetar durante entrevistas para desenvolvedores front-end. Essas dicas podem ser aplicadas tanto a [Entrevistas de Codificação de Interface de Usuário](/front-end-interview-playbook/user-interface) quanto a [Entrevistas de Design de Sistema Front End](/front-end-system-design-playbook/types-of-questions).
+
+## 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.
+
+## 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.
+
+## Design de Estado
+
+Estado é a informação que muda ao longo do tempo em sua interface do usuário, geralmente devido a interações do usuário ou eventos em segundo plano (resposta de solicitações de rede, passagem do tempo, eventos WebSocket).
+
+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://react.dev/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://react.dev/reference/react/useReducer) do React. Geralmente, o Redux é excessivo para entrevistas, e `useReducer` deve ser suficiente.
+
+A documentação do [React](https://react.dev/) sobre ["Gerenciamento de Estado"](https://react.dev/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).
+
+## JavaScript
+
+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.
+
+## 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>`.
+
+### 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.
+
+## 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/).
+
+## 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.
+
+## 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.
+
+## 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?
+
+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.
+
+o web.dev, do Google, oferece um [curso abrangente e gratuito sobre acessibilidade](https://web.dev/learn/accessibility/), o qual recomendamos fortemente.
+
+## Casos extremos
+
+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".
+
+## 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.
+
+## Segurança
+
+- **Scripting Cross-site (XSS)**: Evitar atribuir a [`Element.innerHTML`](https://developer.mozilla.org/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://webdocs.dev/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).
diff --git a/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/zh-CN.mdx
new file mode 100644
index 0000000000..060b68316c
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/user-interface-questions-cheatsheet/zh-CN.mdx
@@ -0,0 +1,162 @@
+---
+title: UI 面试问题备忘单
+description: 一份备忘单，可用于在前端面试中改进您必须构建或设计的用户界面。
+seo_title: 用户界面问题备忘单 | 前端面试手册
+seo_description: 一份备忘单，可用于在前端面试中改进您必须构建或设计的用户界面 - 组件组织、状态设计、用户体验等
+social_title: 用户界面问题备忘单 | 前端面试手册
+---
+
+以下是一些提示，可用于改进您在前端面试中必须构建/设计的用户界面。这些可以应用于 [用户界面编码面试](/front-end-interview-playbook/user-interface) 和 [前端系统设计面试](/system-design/types-of-questions)。
+
+## 一般
+
+* **分解问题**: 将问题分解为相互构建的阶段/里程碑，并逐步编写代码。
+* **频繁测试**: 在完成每个功能后，在浏览器中测试 UI，以便尽早发现错误。 尽早发现的错误更容易修复。 在继续下一个功能之前，请确保当前功能正常工作。
+* **如果可能，使用 JavaScript 框架**: 如果您选择使用 Vanilla JavaScript 构建复杂的 UI，您的生活将会非常艰难，因为代码会变得非常冗长且混乱。 我们建议尽可能使用 JavaScript 框架/库（例如 React、Vue、Angular 等）构建应用程序和游戏。
+* **提前思考并相应地计划**: 考虑您的面试官可能要求您接下来添加哪些功能，方法是借鉴您在构建实际应用程序、使用库或练习面试问题方面的经验。 以一种易于添加新功能的方式设计您的代码。 大部分时间，您会被要求将您的 UI 组件化，以便可以在页面上显示多个组件实例——模块化并避免依赖全局状态或污染全局命名空间。
+
+## 组件组织
+
+您如何组织代码？
+
+* **采用 [容器/表现模式](https://www.patterns.dev/posts/presentational-container-pattern/)**: 为了实现良好的解耦，渲染代码应该与数据源无关。 将组件分成一个提供数据的外层和一个根据数据渲染视图的内部无状态组件。 这使得视图可以轻松地从本地组件/应用程序状态切换到从网络加载的数据，反之亦然，您只需更改外部组件，内部组件即可按原样使用。 这种分离也方便了表现组件的测试，因为所需的数据可以很容易地被模拟。
+* **将应用程序分解为更小的组件**: 如果 UI 有多个部分，将 UI 分解为更小的组件，并确定每个组件所需的 props/state。
+* **最小的 API 表面积**: 不要将多余的数据传递给不需要它们的内部组件。
+* **组件实例化**: 当被要求构建 UI 组件时，定义 API（通常是函数）以允许创建组件的多个独立实例以及可配置的选项和默认值。 避免编写阻止创建多个 UI 组件实例的代码（例如，依赖全局变量）。
+  * **Vanilla JavaScript**: 创建一个接受 DOM 元素（容器元素）和选项对象的函数。 在该函数中，您可以动态创建 DOM 元素并附加到容器元素。 组件 API 的另一个灵感来源是 [jQuery UI](https://jqueryui.com)，但它依赖于 jQuery。
+  * **其他 JavaScript UI 框架**: 大多数现代 JavaScript UI 框架（例如 React、Vue、Angular）默认情况下会迫使您从组件的角度进行思考。
+
+## 状态设计
+
+状态是 UI 中随时间变化的数据，通常是由于用户交互或后台事件（网络请求响应、时间流逝、WebSocket 事件）引起的。
+
+面试中的大多数 UI 问题都需要状态，并且良好地设计状态至关重要。
+
+* **确定 UI 中所需的最小状态**：状态越小，代码就越容易阅读和理解 -> 降低出现错误的几率。确定基本状态与派生状态。派生状态是可以从基本状态计算出来的状态。通过即时派生状态，您可以减少状态值不同步的可能性。
+* **分离渲染代码与数据管理代码**：使 UI 成为您数据的函数，并将您的代码分成两部分（渲染代码与数据管理代码），以提高可读性。如果您使用 JavaScript 框架（例如 React），您或多或少会被迫这样做。
+* **对复杂的状态交互使用状态-reducer 模式**：如果问题需要许多状态字段，并且某些操作需要同时更改多个字段，请使用 [reducer 来整合状态更新逻辑](https://react.dev/learn/extracting-state-logic-into-a-reducer)。状态-reducer 模式最初由 Redux 推广，它鼓励您确定 UI 的状态、可以执行的操作以及如何将操作与状态结合起来以推导出下一个状态。如果您使用 React，您可以通过 [`useReducer` React hook](https://react.dev/reference/react/useReducer) 实现此模式。Redux 通常对于面试来说是过度的，而 `useReducer` 应该足够了。
+
+[React 的](https://react.dev/) 关于 ["管理状态"](https://react.dev/learn/managing-state) 的文档是关于如何正确设计和使用组件状态的优秀资源。其中提到的一些想法并非 React 独有，可以应用于任何 UI 框架。
+
+## JavaScript
+
+您的 JavaScript 是否使用现代语言语法和良好实践，同时避免不良实践？
+
+* **使用样式指南**：使用 JavaScript 样式指南，如 [Airbnb 的 JavaScript 样式指南](https://github.com/airbnb/javascript)。在开发过程中，[ESLint](https://eslint.org) 等静态分析工具可以帮助您执行其中一些良好实践。但是，这些工具可能在面试期间不可用。尝试习惯于在没有工具帮助的情况下编写具有良好编码风格的代码。
+* **不要动全局环境**：这适用于 Vanilla JavaScript 场景。避免通过声明全局变量和全局函数来污染全局范围。编写一个立即调用的函数表达式 (IIFE) 并将所有自定义代码放入其中。
+
+## HTML
+
+您是否使用正确的标签和正确的属性编写语义 HTML？
+
+* **语义标签**: 使用标题标签表示标题，使用按钮标签表示交互元素，使用列表标签表示顺序元素，等等。 不要对所有内容都使用 `<div>`！
+* **标题层次结构**: 确保标题标签具有层次结构，并且 DOM 中只有一个 `<h1>`。
+* **交互元素**: 使用 `<button>` 表示需要交互的元素。 不要向 `<div>` 和 `<span>` 添加点击处理程序，这是一个巨大的危险信号，表明缺乏对可访问性的考虑。
+
+### 表单
+
+表单本身很复杂，值得单独讨论。
+
+* **链接标签和输入**：`<input>` 应该使用 `id` 和 `for` 链接到 `<label>`。
+* **将输入包装在表单中**：`<input>` 应该包装在 `<form>` 中，以便单击按钮和按 Enter 键将提交表单。 如果网络请求是使用 Ajax 发出的，请记住添加 `event.preventDefault()`。
+* **输入应具有适当的类型**：`<input>` 应该具有适当的 `type`，如 `email`、`password`、`number` 等。
+* **利用原生 HTML 表单验证**：如果可能，使用 `required` 属性与其他属性（如 `pattern`、`min`、`max` 等）结合使用。
+
+## CSS/样式
+
+您的 CSS 是否以可扩展且易于理解的方式编写？
+
+* **编写 Vanilla CSS**：学习编写 CSS，而不依赖于 [Sass](https://sass-lang.com/) 和 [Less](https://lesscss.org/) 等预处理器。 并非所有环境都允许使用处理器，并且面试问题可能很小，实际上并没有从 CSS 预处理器带来的功能中受益。 CSS 处理器最有用的功能是使用变量，该变量可通过 CSS 自定义属性（变量）以原生方式使用。
+* **采用 CSS 命名约定**：在编写类时，考虑采用 CSS 命名方法，例如 [Block Element Modifier](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 在移动端上也能良好运行。
+  * CSS 媒体查询可用于在移动端上呈现不同的布局。
+  * 使按钮等交互元素足够大，以便按下（建议至少 44 x 44 像素）并且间隔足够宽。
+* **错误状态**：及时、清晰地反映错误 — 表单验证错误、网络请求错误。
+* **处理不同尺寸的图像渲染**：使您的 UI 能够处理各种尺寸/尺寸的图像渲染，同时保留原始的宽高比。
+  * 使用 CSS `background-image` 以及 `background-size: contain`，使图像适合您定义的区域。如果可以裁剪图像（例如用于渐变背景），请使用 `background-size: cover`。
+  * `<img>` 标签具有类似的 `object-fit` 属性，具有 `contain` 和 `cover` 值。
+* **乐观更新**：高级技术，即使网络请求仍在等待，也会反映成功状态。如果请求失败，则恢复 UI 更改并显示错误消息。
+
+## 网络
+
+您的 UI 是否处理网络请求和条件的不可预测性？
+
+* **反映网络请求状态**：如果 UI 涉及发出网络请求，请清楚地显示请求的待处理/成功/失败状态
+  * **待处理**：禁用字段/按钮，显示微调器。
+  * **错误**：显示错误消息。
+  * **成功**：更新 UI 和/或显示成功消息。
+* **竞争条件**：一个常见的原因是由于并行网络请求，其中响应顺序不能保证。 稍后发出的请求可能会更早地收到响应。 如果您的 UI 容易受到这种情况的影响，您可以跟踪最新的请求并忽略较早请求的结果。 或者，使其 UI 无法一次触发多个网络请求，例如，通过在单击后禁用触发网络请求的元素。
+* **防止重复请求**：提交后应禁用按钮，以避免发出重复的网络请求。
+* **合并请求**：如果 UI 发出了太多网络请求，您可以：
+  * **去抖动/节流**：限制触发的网络请求的数量。
+  * **批量请求**：将请求组合在一起，只发出一个请求。 这需要服务器端支持这种格式。
+* **缓存**：如果最近发出了具有相同参数的请求，您是否可以重用之前的响应并节省网络往返？
+* **请求超时**：如果请求在规定的持续时间后未收到响应，您可能希望人为地显示请求已失败（超时）。
+* **乐观更新**：高级技术，即使网络请求仍在等待，也会反映成功状态。 如果请求失败，请恢复 UI 更改并显示错误消息。
+
+## 可访问性 (a11y)
+
+在 UI 中处理可访问性是一个很大的优势，在某些情况下是高级工程师的要求。
+
+* 您是否只能使用键盘使用 UI？
+* 您可以使用屏幕阅读器使用您的 UI 组件吗？
+* 您的 UI 组件可以在没有颜色的情况下工作吗？
+* 您的 UI 组件可以在没有声音的情况下工作吗？
+
+来源：[Web 的可访问 UI 组件](https://medium.com/@addyosmani/accessible-ui-components-for-the-web-39e727101a67)
+
+* **屏幕阅读器、ARIA 角色、状态和属性**：
+  * 为未使用自定义 HTML 标签构建的自定义构建元素添加正确的 `aria-role`。
+  * 使用 `aria-label` 描述未显示文本的元素（例如，仅限图标的按钮）。
+  * 通过 `aria-describedby`/`aria-errormessage` 将错误消息元素与负责它们的元素链接起来。
+  * **图像 `alt` 文本**：将 `alt` 属性添加到 `<img>` 元素，以便屏幕阅读器可以描述图像。
+* **键盘交互**
+  * 将 `tabindex` 属性添加到您希望通过键盘制表符聚焦的元素。
+  * 元素可以通过键盘触发。
+  * 检查焦点顺序是否有意义。
+* **视觉问题**
+  * **颜色对比度**：文本/图像与背景之间有足够的颜色对比度。
+  * **元素大小**：字体大小、交互式元素大小应足够大，以适合其预期介质。
+
+Google 的 web.dev 有一个[关于可访问性的免费深入课程](https://web.dev/learn/accessibility/)，我们强烈推荐。
+
+## 边缘情况
+
+在面试中，你可能没有足够的时间来处理代码中的所有边缘情况，但最好在面试中提及它们以获得加分。
+
+* **处理长字符串**：UI 中的字符串（例如标题/按钮标签）可能导致 UI 行为异常，例如溢出并影响周围元素的位置。长字符串可能是用户输入或翻译的结果。
+* **空状态**：显示空状态消息/占位符以指示内容缺失，例如当列表为空时。什么都不显示可能会使用户认为存在待处理的网络请求，并且数据仍在获取中。
+* **列表中项目过多**：在单个页面上显示太多项目可能导致较差的 UX（用户必须滚动很多）以及响应能力和内存消耗方面的性能不佳。
+  * **分页**：将长列表项分成多个页面。
+  * [**虚拟列表**](https://www.patterns.dev/posts/virtual-lists)：仅渲染动态列表中可见的行内容，而不是整个列表。
+  * 截断多余的内容并显示省略号。`word-break` CSS 属性将派上用场。
+  * 将内容限制为前 X 个字符/单词，并将多余的内容隐藏在“显示更多”按钮后面。
+
+## 性能
+
+* **节流/防抖**：节流和防抖是限制速率的技术，以防止不必要的操作。此技术可用于对时间要求不高的操作，例如网络请求和滚动/调整大小的事件回调。
+* **缓存**：重复计算/网络请求的结果可以在浏览器内存/存储中缓存，而无需重复。
+* **按需加载**：仅在需要时延迟加载数据/组件代码，而不是在开始时全部加载。
+* **预取/预加载数据**：在需要之前预取/预加载数据以减少网络延迟，以便更新立即显示。
+* **列表中项目过多**：请参阅上面“边缘情况”下的要点。
+
+## 安全
+
+* **跨站点脚本 (XSS)**：如果将内容呈现到 DOM 中时，内容来自用户，请避免分配给 [`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://webdocs.dev/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 的 CSRF 预防备忘单](https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html)。
+
+## 国际化 (i18n)
+
+你的 UI 适用于多种语言吗？添加对更多语言的支持有多容易？
+
+* **避免用特定语言硬编码标签**：某些 UI 组件在其内部有标签字符串（例如，图像轮播有 prev/next 按钮的标签）。最好通过将这些标签字符串作为组件 props/options 的一部分来允许自定义它们。
+* **UI 可以呈现长字符串**：请参阅上面关于呈现长字符串的部分。
+* **从右到左的语言**：某些语言（例如阿拉伯语、希伯来语）是从右到左阅读的，UI 必须水平翻转。使用 [CSS 逻辑属性](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) 使你的布局适用于不同的[书写模式](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Writing_Modes)。
diff --git a/packages/front-end-interview-guidebook/contents/user-interface/en-US.langnostic.json b/packages/front-end-interview-guidebook/contents/user-interface/en-US.langnostic.json
new file mode 100644
index 0000000000..92cc995347
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/user-interface/en-US.langnostic.json
@@ -0,0 +1,76 @@
+{
+  "frontmatter": {
+    "title": "7c63c7f2",
+    "description": "56b0e13f",
+    "seo_title": "54aa4b47",
+    "seo_description": "3b7ca34f",
+    "social_title": "3172a31e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "ec2eaf4a",
+        "f4d89882",
+        "d2f221b0",
+        "745ae0cc",
+        "92a02455",
+        "85f7a7dc",
+        "e5db926b",
+        "58935ea5",
+        "a3ac059f",
+        "63dc1953",
+        "1fc86ee7",
+        "84991a73",
+        "a00bd4c0",
+        "87d6b386",
+        "7e75ddb2",
+        "e0d8bb38",
+        "4c266b7c",
+        "9a27365c",
+        "9e022488",
+        "a751801d",
+        "55890346",
+        "d7976b37",
+        "34925827",
+        "bc21213c",
+        "80a38c02",
+        "b7506daa",
+        "5f73eccb",
+        "efbc5f44"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "ec2eaf4a",
+        "f4d89882",
+        "d2f221b0",
+        "745ae0cc",
+        "92a02455",
+        "85f7a7dc",
+        "e5db926b",
+        "58935ea5",
+        "a3ac059f",
+        "63dc1953",
+        "1fc86ee7",
+        "84991a73",
+        "a00bd4c0",
+        "87d6b386",
+        "7e75ddb2",
+        "e0d8bb38",
+        "4c266b7c",
+        "9a27365c",
+        "9e022488",
+        "a751801d",
+        "55890346",
+        "d7976b37",
+        "34925827",
+        "bc21213c",
+        "80a38c02",
+        "b7506daa",
+        "5f73eccb",
+        "efbc5f44"
+      ]
+    }
+  }
+}
diff --git a/packages/front-end-interview-guidebook/contents/user-interface/en-US.mdx b/packages/front-end-interview-guidebook/contents/user-interface/en-US.mdx
new file mode 100644
index 0000000000..fb5e085156
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/user-interface/en-US.mdx
@@ -0,0 +1,123 @@
+---
+title: User Interface Coding Interviews
+description: Best practices while interviewing, important concepts to know and critical practice questions to do
+seo_title: User Interface Coding Questions | How to prepare
+seo_description: Guide to prepare for UI interview questions, including interview best practices, important concepts to prepare for and best practice questions
+social_title: Cracking User Interface Questions | Front End Interview Playbook
+---
+
+User interface coding interviews will involve candidates writing HTML, CSS and JavaScript to complete. In our opinion this is essential for evaluating the skills of Front End Engineers and more companies are moving towards asking candidates to code user interfaces during interviews.
+
+## Types of user interface questions
+
+The user interfaces that candidates are asked to code can range from really small UI components to more complex client-facing products like small apps and games.
+
+### User interface components/widgets/layouts
+
+- Components: [Accordion](/questions/user-interface/accordion), [Tabs](/questions/user-interface/tabs), [Star Rating Widget](/questions/user-interface/star-rating), [Tweet](/questions/user-interface/tweet), Image Carousel
+- Widgets: [Digital Clock](/questions/user-interface/digital-clock), [Analog Clock](/questions/user-interface/analog-clock)
+- Page Sections: [Signup Form](/questions/user-interface/signup-form), [Holy Grail](/questions/user-interface/holy-grail)
+
+### Apps/games
+
+The time allowed for apps/games questions is usually longer than components/widgets. Depending on how complex the question is, you may spend up to half an hour or even an hour to complete the question, especially if you are asked to build games.
+
+- Apps: [Todo List](/questions/user-interface/todo-list), [Stopwatch](/questions/user-interface/stopwatch), [Temperature Converter](/questions/user-interface/temperature-converter)
+- Games: [Tic-tac-toe](/questions/user-interface/tic-tac-toe), [Whack-a-mole](/questions/user-interface/whack-a-mole), Snake, Tetris, Minesweeper, Connect 4
+
+Observe that most games will be 2D grid-based games. Make sure you know how to create grid layouts in HTML and CSS!
+
+## What to do during user interface coding interviews
+
+User interface coding interviews share a fair bit of similarity with non-front end coding interviews. In general, you should:
+
+1. **Find out what is available**: Find out what platform you are coding on and familiarize yourself with the coding environment:
+   - Whether you will be using a local IDE or an online one. If local IDE, will you be using your own laptop?
+   - The supported editor shortcuts
+   - Whether you can use JavaScript libraries/framework or have to use vanilla JavaScript
+   - Whether you can execute code and preview the UI
+   - What are the latest supported JavaScript syntax and language features?
+   - Whether you can install dependencies beforehand
+1. **Self introduction**: Make your self introduction under a minute. Unless requested, do not take longer than this otherwise you might not have enough time to code.
+1. **Clarify question**: Ask clarifying questions upon receiving the question. Clarify the following:
+   - Can you use the newest JavaScript syntax?
+   - Browser support, as this will affect the browser APIs you can use
+1. **Manage complexity**: Break down the problem into stages/milestones that build on top of each other. Communicate this breakdown to your interviewer. Unlike coding interviews, the focus of User Interface coding interviews is usually around the component states and APIs as opposed to complex data structures and algorithms
+1. **Start coding**: Code out your solution and explain your code to your interviewer while you are coding
+   - Where possible, test your code in the browser after every milestone/feature added, instead of only at the end
+   - Refer to the [User Interface Questions Cheatsheet](/front-end-interview-playbook/user-interface-questions-cheatsheet) for a list of things to take note of during User Interface coding interviews
+1. **Review your code**: After coding, read through your code once and try to spot basic errors like typos, using variables before initializing them, using APIs incorrectly, etc.
+1. **Testing**: Outline some basic test cases and some edge cases. Test your code with these cases and determine if your code passes them. If it fails, debug the issue(s) and fix them
+1. **Tradeoff**: Explain any tradeoffs you made, cases you explicitly didn't handle, and how you would improve the code if you had more time
+1. **Follow-ups**: The interview might not end here, the interviewer might have follow-up questions for you on this question or give you another question. Be prepared for them
+
+## How to prepare for user interface coding interviews
+
+1. **Core concepts**: Be familiar with the topics under the [Important concepts](#important-concepts) section below. The [Quiz section](/front-end-interview-playbook/quiz) can also be a good start since you might be asked on these concepts in the form of quiz questions during coding.
+1. **Practice writing UI**: It's best to learn how to build UIs in both Vanilla JavaScript and a UI framework of choice. Most companies will allow using JavaScript UI frameworks but some companies (e.g. Google) mandate that you can only use Vanilla JavaScript
+   - **Vanilla JavaScript**: Learn the DOM manipulation APIs. At the very least you should know how to create new DOM elements, add classes/attributes to them, and add child elements. If you come from a [jQuery](https://jquery.com/) background, check out [You might not need jQuery](https://youmightnotneedjquery.com), a website showing you how to accomplish the common jQuery operations in Vanilla JavaScript. You will be pleasantly surprised to find out that with modern browser APIs there isn't really much need for jQuery anymore.
+   - **JavaScript UI framework**: Be familiar with a UI framework of choice. Stick with the framework that you are most familiar with. There's no need and also probably not enough time to learn a new framework. If you are new to JavaScript UI frameworks, [React](https://react.dev/) will be our recommendation as it is the most popular library/framework to build UI right now and what most companies look for when hiring front end engineers.
+1. **CSS**: Be familiar with writing CSS under interview conditions (small questions which won't require writing that much CSS):
+   - **Write Vanilla CSS**: Learn to write CSS without reliance on preprocessors like Sass/Less. Not all coding environments will allow using processors and interview questions are likely small and do not really benefit from the features CSS preprocessors bring. The most useful feature of CSS processors is the use of variables, which is available natively via CSS custom properties (CSS variables).
+   - **Adopt a CSS naming convention**: Consider adopting a CSS naming methodology like [Block Element Modifier](https://getbem.com) when writing your classes.
+1. **Deep dives**: Read our User Interface coding deep dive guides:
+   - [User Interface Questions Cheatsheet](/front-end-interview-playbook/user-interface-questions-cheatsheet)
+   - [User Interface Components API Design Principles](/front-end-interview-playbook/user-interface-components-api-design-principles)
+1. **More practice**: Try out [GFE 75](/interviews/gfe75) or pick a [study plan](/interviews/study-plans) and practice the [User Interface coding questions](/questions/formats/ui-coding) recommended for the selected study plan.
+   - Spend roughly equal amount of time practicing building both UI components and building apps/games. Both are equally important.
+
+## Important concepts
+
+Be familiar with these web development concepts:
+
+| Category | Important topics |
+| --- | --- |
+| Data structures | Arrays, Maps, Stacks, Trees, Sets |
+| Software engineering | SOLID principles, Design patterns, Model-View-Controller |
+| HTML | Semantic HTML, Form validation, Form submission |
+| CSS | Box model, Selectors, Specificity, Positioning, Units, Flexbox, Grid, CSS custom properties (variables) |
+| JavaScript | Closures, Callbacks, `Promise`, `async`/`await`, Handling variadic arguments |
+| DOM | DOM traversal, DOM creation, DOM manipulation, Accessing element/node properties, Event delegation |
+| Runtime APIs | Timer — `setTimeout()`, `setInterval()`, Networking — Ajax, `fetch()` |
+| Accessibility | ARIA roles, states & properties, Keyboard interactions |
+
+## Evaluation axes
+
+User interface coding interviews have similar rubrics as JavaScript coding interviews as both involve coding in the front end domain. However, user interface coding questions will have even more emphasis on domain expertise and the various front end topics.
+
+- **Problem solving**: Use a systematic and logical approach to understanding and addressing a problem. Break down the problem into smaller independent problems. Evaluate different approaches and their tradeoffs
+- **Software engineering foundation**: Familiarity with data structures, algorithms, runtime complexity analysis, use of design patterns, design solution with clean abstractions
+- **Domain expertise**: Understanding of the front end domain and the relevant languages: Browser (DOM and DOM APIs), HTML, CSS, JavaScript, User Experience, Accessibility, i18n, Networks, Performance
+- **Communication**: Ask questions to clarify details and clearly explaining one's approach and considerations
+- **Verification**: Identify various scenarios to test the code against, including edge cases. Be able to diagnose and fix any issues that arise
+
+## Best practice questions
+
+From experience, the best UI interview questions to practice, as determined by frequency and important concepts covered are:
+
+- [Todo List](/questions/user-interface/todo-list)
+- [Signup Form](/questions/user-interface/signup-form)
+- [Temperature Converter](/questions/user-interface/temperature-converter)
+- [Progress Bar](/questions/user-interface/progress-bar)
+- [Analog Clock](/questions/user-interface/analog-clock)
+- [Job Board](/questions/user-interface/job-board)
+- [Data Table](/questions/user-interface/data-table)
+- [Whack-a-mole](/questions/user-interface/whack-a-mole)
+- [Tic-tac-toe](/questions/user-interface/tic-tac-toe)
+- [Tabs](/questions/user-interface/tabs)
+- [Image Carousel](/questions/user-interface/image-carousel)
+- [Modal Dialog](/questions/user-interface/modal-dialog)
+- Autocomplete
+- Dropdown Menu
+
+GreatFrontEnd has a [comprehensive list of user interface coding questions](/questions/formats/ui-coding) that you can practice in your framework of choice (currently supports Vanilla JavaScript and [React](https://react.dev/)). We also provide manual tests cases you can test your code against to verify the correctness and solutions written in the various JavaScript UI frameworks by ex-FAANG Senior Engineers. Automated test cases are not provided for UI questions because they tend to be coupled to implementation and hard for automated tests to test accurately. Moreover, during interviews you likely have to test your UI yourself.
+
+Many of GreatFrontEnd's coding questions are also broken down into stages, which get progressively harder. In interviews, your interviewer might only explicitly request for the basic functionality. However, after you complete the basic functionality, you can take the initiative to add on more features to improve on the basic version and handle more edge cases. An example of a question broken down into stages:
+
+1. [Accordion](/questions/user-interface/accordion): Build a basic accordion that focuses on rendering and show/hide functionality
+2. [Accordion II](/questions/user-interface/accordion-ii): Build an accordion with improved accessibility that has the right ARIA roles, states, and properties
+3. [Accordion III](/questions/user-interface/accordion-iii): Built a fully-accessible accordion that has keyboard support according to ARIA specifications
+
+Building the basic accordion component might let you pass the interview, but nailing the accessibility aspects will help you score more points and possibly put you at senior level.
+
+Note that we are intentionally vague in some of the questions and don't present the full requirements upfront in the question description. However, we'll cover as much ground as possible in the solution. It may be frustrating while reading the solutions to see that you've missed out some things, but this trains you to think ahead and consider what are the possible areas you have to take note of when working on the solution. Better to find out during practice than during actual interviews.
diff --git a/packages/front-end-interview-guidebook/contents/user-interface/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/user-interface/pt-BR.mdx
new file mode 100644
index 0000000000..c7a7c4a0f7
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/user-interface/pt-BR.mdx
@@ -0,0 +1,117 @@
+---
+title: Perguntas de Codificação de Interface de Usuário para Entrevistas de Front-End - Como se Preparar
+description: Guia para se Preparar para Perguntas de Interface de Usuário em Entrevistas para Desenvolvedores Front-End/Web - Conceitos a Conhecer, Critérios de Entrevista e Perguntas de Prática Importantes.
+---
+
+Entrevistas de codificação de interface de usuário envolverão os candidatos escrevendo HTML, CSS e JavaScript para completar tarefas. Em nossa opinião, isso é essencial para avaliar as habilidades de Engenheiros Front-End e mais empresas estão adotando a abordagem de solicitar que os candidatos codifiquem interfaces de usuário durante as entrevistas.
+
+As interfaces de usuário que os candidatos são solicitados a codificar podem variar desde componentes de UI muito pequenos até produtos mais complexos voltados para o cliente, como aplicativos e jogos simples.
+
+## Exemplos
+
+### User Interface Components/Widgets/Layouts
+
+- Componentes: [Accordion](/questions/user-interface/accordion), [Tabs](/questions/user-interface/tabs), [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/user-interface/signup-form), [Grau Sagrado](/questions/user-interface/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.
+
+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!
+
+## O que fazer durante Entrevistas de Codificação de Interface de Usuário
+
+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.
+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.
+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-playbook/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.
+9.  A entrevista pode não terminar aqui; o entrevistador pode ter perguntas de acompanhamento para você sobre esta pergunta ou apresentar outra pergunta. Esteja preparado para continuar a discussão ou abordar novos desafios. Esteja preparado para eles.
+
+## Como se preparar para entrevistas de codificação de Interface do Usuário
+
+1.  Esteja familiarizado com os tópicos listados em "Conceitos Importantes" abaixo. A seção de [Quiz](/front-end-interview-playbook/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://react.dev/) 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.
+4.  Leia nossos guias detalhados de codificação de Interface do Usuário:
+    - [Folha de perguntas de Interface do Usuário](/front-end-interview-playbook/user-interface-questions-cheatsheet)
+    - [Princípios de API Design de Componentes de Interface do Usuário](/front-end-interview-playbook/user-interface-components-api-design-principles)
+5.  Escolha um [plano de estudo](/interviews/get-started) e pratique as [perguntas de codificação de Interface do Usuário](/questions) 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.
+
+## 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 |
+
+## 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.
+
+## 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/user-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/user-interface/analog-clock)
+- [Quadro de Empregos](/questions/user-interface/job-board)
+- [Whack-a-mole](/questions/user-interface/whack-a-mole)
+- [Jogo da Velha](/questions/user-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](/questions) que você pode praticar na sua estrutura de escolha (atualmente suporta JavaScript Puro e [React](https://react.dev/)).". 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.
+
+Muitas das perguntas de codificação do GreatFrontEnd também são divididas em estágios, que ficam progressivamente mais difíceis. Nas entrevistas, seu entrevistador pode solicitar explicitamente apenas a funcionalidade básica. No entanto, após concluir a funcionalidade básica, você pode tomar a iniciativa de adicionar mais recursos para aprimorar a versão básica e lidar com mais casos especiais. Um exemplo de uma pergunta dividida em estágios:
+
+1.  [Accordion](/questions/user-interface/accordion): Construa um acordeão básico que se concentre na renderização e funcionalidade de mostrar/ocultar.
+2.  [Accordion II](/questions/user-interface/accordion-ii): Construa um acordeão com melhor acessibilidade, que tenha os papéis (roles) ARIA corretos, estados e propriedades adequados.
+3.  [Accordion III](/questions/user-interface/accordion-iii): Construa um acordeão totalmente acessível que tenha suporte ao teclado de acordo com as especificações do ARIA.
+
+Construir o componente de acordeão básico pode ajudá-lo a passar na entrevista, mas abordar os aspectos de acessibilidade com sucesso o ajudará a ganhar mais pontos e possivelmente avançar para o nível sênior.
+
+Observe que, de propósito, deixamos algumas das perguntas vagas e não apresentamos todos os requisitos completos de imediato na descrição da pergunta. No entanto, cobriremos o máximo de informações possível na solução. Pode ser frustrante perceber que você deixou passar algumas coisas ao ler as soluções, mas isso o treina a pensar adiante e considerar quais são as possíveis áreas que você deve observar ao trabalhar na solução. É melhor descobrir isso durante a prática do que durante entrevistas reais.
diff --git a/packages/front-end-interview-guidebook/contents/user-interface/zh-CN.mdx b/packages/front-end-interview-guidebook/contents/user-interface/zh-CN.mdx
new file mode 100644
index 0000000000..e710b9ddd7
--- /dev/null
+++ b/packages/front-end-interview-guidebook/contents/user-interface/zh-CN.mdx
@@ -0,0 +1,123 @@
+---
+title: 用户界面编码面试
+description: 面试时的最佳实践、需要了解的重要概念以及需要做的关键实践问题
+seo_title: 用户界面编码问题 | 如何准备
+seo_description: 准备 UI 面试问题的指南，包括面试最佳实践、要准备的重要概念和最佳实践问题
+social_title: 破解用户界面问题 | 前端面试手册
+---
+
+用户界面编码面试将涉及候选人编写 HTML、CSS 和 JavaScript 来完成。我们认为这对于评估前端工程师的技能至关重要，并且越来越多的公司开始要求候选人在面试期间编写用户界面。
+
+## 用户界面问题的类型
+
+要求候选人编写的用户界面可以从非常小的 UI 组件到更复杂的面向客户的产品，如小型应用程序和游戏。
+
+### 用户界面组件/小部件/布局
+
+* 组件：[手风琴](/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)、贪吃蛇、俄罗斯方块、扫雷、连连看
+
+请注意，大多数游戏将是基于 2D 网格的游戏。确保您知道如何在 HTML 和 CSS 中创建网格布局！
+
+## 在用户界面编码面试中做什么
+
+用户界面编码面试与非前端编码面试有很大程度的相似性。一般来说，你应该：
+
+1. **找出可用的内容**：找出您正在使用的平台，并熟悉编码环境：
+   * 您将使用本地 IDE 还是在线 IDE。如果是本地 IDE，您将使用自己的笔记本电脑吗？
+   * 支持的编辑器快捷方式
+   * 您是否可以使用 JavaScript 库/框架，或者必须使用原始 JavaScript
+   * 您是否可以执行代码并预览 UI
+   * 什么是最新支持的 JavaScript 语法和语言特性？
+   * 您是否可以事先安装依赖项
+2. **自我介绍**：在一分钟内进行自我介绍。除非被要求，否则不要超过这个时间，否则您可能没有足够的时间来编码。
+3. **澄清问题**：收到问题后，提出澄清问题。澄清以下内容：
+   * 您可以使用最新的 JavaScript 语法吗？
+   * 浏览器支持，因为这将影响您可以使用哪些浏览器 API
+4. **管理复杂性**：将问题分解为相互构建的阶段/里程碑。将此分解传达给您的面试官。与编码面试不同，用户界面编码面试的重点通常在于组件状态和 API，而不是复杂的数据结构和算法
+5. **开始编码**：编写您的解决方案，并在编码时向您的面试官解释您的代码
+   * 在可能的情况下，在添加每个里程碑/功能后在浏览器中测试您的代码，而不仅仅是在最后
+   * 参考[用户界面问题备忘单](/front-end-interview-playbook/user-interface-questions-cheatsheet)，了解用户界面编码面试期间需要注意的事项列表
+6. **检查您的代码**：编码后，通读您的代码一次，并尝试发现基本错误，例如拼写错误、在使用变量之前初始化它们、不正确地使用 API 等。
+7. **测试**：概述一些基本测试用例和一些边缘情况。使用这些用例测试您的代码，并确定您的代码是否通过了它们。如果失败，请调试问题并修复它们
+8. **权衡**：解释您所做的任何权衡、您明确未处理的案例以及如果您有更多时间将如何改进代码
+9. **后续行动**：面试可能不会在这里结束，面试官可能会就此问题向您提出后续问题或给您另一个问题。为他们做好准备
+
+## 如何准备用户界面编码面试
+
+1. **核心概念**：熟悉下面[重要概念](#important-concepts)部分的主题。 [测验部分](/front-end-interview-playbook/quiz)也可以作为一个好的开始，因为在编码过程中，你可能会被问到这些概念的测验问题。
+2. **练习编写UI**：最好学习如何使用Vanilla JavaScript和所选的UI框架来构建UI。 大多数公司将允许使用JavaScript UI框架，但一些公司（例如Google）要求您只能使用Vanilla JavaScript
+   * **Vanilla JavaScript**：学习DOM操作API。 至少您应该知道如何创建新的DOM元素，向它们添加类/属性以及添加子元素。 如果您来自[jQuery](https://jquery.com/)背景，请查看[您可能不需要jQuery](https://youmightnotneedjquery.com)，这是一个网站，向您展示如何在Vanilla JavaScript中完成常见的jQuery操作。 您会惊喜地发现，使用现代浏览器API，实际上不再需要jQuery了。
+   * **JavaScript UI框架**：熟悉所选的UI框架。 坚持使用您最熟悉的框架。 没有必要，也可能没有足够的时间来学习新框架。 如果您不熟悉JavaScript UI框架，[React](https://react.dev/)将是我们的建议，因为它是目前构建UI最流行的库/框架，也是大多数公司在招聘前端工程师时所寻找的。
+3. **CSS**：熟悉在面试条件下编写CSS（小问题，不需要编写那么多CSS）：
+   * **编写Vanilla CSS**：学习编写CSS，而不依赖于Sass/Less等预处理器。 并非所有编码环境都允许使用处理器，并且面试问题可能很小，实际上并没有从CSS预处理器带来的功能中受益。 CSS处理器最有用的功能是使用变量，该变量可通过CSS自定义属性（CSS变量）以原生方式使用。
+   * **采用CSS命名约定**：在编写类时，请考虑采用CSS命名方法，例如[Block Element Modifier](https://getbem.com)。
+4. **深度探讨**：阅读我们的用户界面编码深度探讨指南：
+   * [用户界面问题备忘单](/front-end-interview-playbook/user-interface-questions-cheatsheet)
+   * [用户界面组件API设计原则](/front-end-interview-playbook/user-interface-components-api-design-principles)
+5. **更多练习**：尝试[GFE 75](/interviews/gfe75)或选择一个[学习计划](/interviews/study-plans)，并练习为所选学习计划推荐的[用户界面编码问题](/questions/formats/ui-coding)。
+   * 花费大致相等的时间来练习构建UI组件和构建应用程序/游戏。 两者都同样重要。
+
+## 重要概念
+
+熟悉这些 Web 开发概念：
+
+| 类别 | 重要主题 |
+| --- | --- |
+| 数据结构 | 数组、映射、堆栈、树、集合 |
+| 软件工程 | 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、网络、性能
+* **沟通**：提问以澄清细节，并清楚地解释自己的方法和考虑因素
+* **验证**：确定各种场景以测试代码，包括边缘情况。 能够诊断和修复出现的任何问题
+
+## 最佳实践问题
+
+根据经验，最适合练习的 UI 面试问题，由频率和涵盖的重要概念决定，是：
+
+* [待办事项列表](/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/data-table)
+* [打地鼠](/questions/user-interface/whack-a-mole)
+* [井字棋](/questions/user-interface/tic-tac-toe)
+* [标签页](/questions/user-interface/tabs)
+* [图片轮播](/questions/user-interface/image-carousel)
+* [模态对话框](/questions/user-interface/modal-dialog)
+* 自动完成
+* 下拉菜单
+
+GreatFrontEnd 有一个 [全面的用户界面编码问题列表](/questions/formats/ui-coding)，你可以在你选择的框架中练习（目前支持 Vanilla JavaScript 和 [React](https://react.dev/)）。 我们还提供了手动测试用例，你可以根据这些用例测试你的代码，以验证由前 FAANG 高级工程师编写的各种 JavaScript UI 框架的正确性和解决方案。 UI 问题不提供自动化测试用例，因为它们往往与实现相关联，并且难以通过自动化测试进行准确测试。 此外，在面试期间，你可能需要自己测试你的 UI。
+
+GreatFrontEnd 的许多编码问题也被分解为阶段，这些阶段会逐渐变得更难。 在面试中，你的面试官可能只会明确要求基本功能。 但是，在你完成基本功能后，你可以主动添加更多功能以改进基本版本并处理更多边缘情况。 一个被分解成阶段的问题的例子：
+
+1. [手风琴](/questions/user-interface/accordion)：构建一个基本的、侧重于渲染和显示/隐藏功能的手风琴
+2. [手风琴 II](/questions/user-interface/accordion-ii)：构建一个具有改进的可访问性的手风琴，该手风琴具有正确的 ARIA 角色、状态和属性
+3. [手风琴 III](/questions/user-interface/accordion-iii)：构建一个完全可访问的手风琴，该手风琴根据 ARIA 规范具有键盘支持
+
+构建基本的手风琴组件可能让你通过面试，但掌握可访问性方面将帮助你获得更多分数，并可能让你达到高级水平。
+
+请注意，我们在某些问题中故意含糊不清，并且没有在问题描述中预先呈现完整的需求。 但是，我们将在解决方案中尽可能多地涵盖内容。 在阅读解决方案时，你可能会感到沮丧，因为你错过了一些东西，但这可以训练你提前思考并考虑在处理解决方案时需要注意的可能领域。 最好在练习期间发现，而不是在实际面试期间。
diff --git a/packages/quiz/questions/are-you-familiar-with-styling-svg/en-US.langnostic.json b/packages/quiz/questions/are-you-familiar-with-styling-svg/en-US.langnostic.json
new file mode 100644
index 0000000000..77d023da41
--- /dev/null
+++ b/packages/quiz/questions/are-you-familiar-with-styling-svg/en-US.langnostic.json
@@ -0,0 +1,24 @@
+{
+  "frontmatter": {
+    "title": "238a9430"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "952179dc",
+        "9458db02",
+        "458a6f7",
+        "f1701f19"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "952179dc",
+        "9458db02",
+        "458a6f7",
+        "f1701f19"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/are-you-familiar-with-styling-svg/en-US.mdx b/packages/quiz/questions/are-you-familiar-with-styling-svg/en-US.mdx
new file mode 100644
index 0000000000..df8df53d94
--- /dev/null
+++ b/packages/quiz/questions/are-you-familiar-with-styling-svg/en-US.mdx
@@ -0,0 +1,21 @@
+---
+title: Are you familiar with styling SVG?
+---
+
+There are several ways to color shapes (including specifying attributes on the object) using inline CSS, an embedded CSS section, or an external CSS file. Most SVGs you find on the web uses inline CSS, but there are advantages and disadvantages associated with each type.
+
+Basic coloring can be done by setting two attributes on the node: `fill` and `stroke`. `fill` sets the color inside the object and `stroke` sets the color of the line drawn around the object. You can use the same CSS color naming schemes that you use in HTML, whether that's color names (that is `red`), RGB values (that is `rgb(255,0,0)`), Hex values, RGBA values, etc.
+
+```html
+<rect
+  x="10"
+  y="10"
+  width="100"
+  height="100"
+  stroke="blue"
+  fill="purple"
+  fill-opacity="0.5"
+  stroke-opacity="0.8" />
+```
+
+The above `fill="purple"` is an example of a _presentational attribute_. Interestingly, and unlike inline styles like `style="fill: purple"` which also happens to be an attribute, presentational attributes can be [overridden by CSS](https://css-tricks.com/presentation-attributes-vs-inline-styles/) styles defined in a stylesheet. Hence if you did something like `svg { fill: blue; }` it will override the purple fill that has been defined.
diff --git a/packages/quiz/questions/are-you-familiar-with-styling-svg/metadata.json b/packages/quiz/questions/are-you-familiar-with-styling-svg/metadata.json
new file mode 100644
index 0000000000..1f28f67dd4
--- /dev/null
+++ b/packages/quiz/questions/are-you-familiar-with-styling-svg/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "are-you-familiar-with-styling-svg",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "low",
+  "difficulty": "easy"
+}
diff --git a/packages/quiz/questions/are-you-familiar-with-styling-svg/pt-BR.mdx b/packages/quiz/questions/are-you-familiar-with-styling-svg/pt-BR.mdx
new file mode 100644
index 0000000000..c1ea43107b
--- /dev/null
+++ b/packages/quiz/questions/are-you-familiar-with-styling-svg/pt-BR.mdx
@@ -0,0 +1,21 @@
+---
+title: Você conhece o estilo SVG?
+---
+
+Se você usa alguma ferramenta de análise estática em seu fluxo de trabalho (por exemplo, ESLint, TypeScript Compiler), geralmente ela também pode verificar se você está referenciando variáveis não declaradas. A maioria dos SVGs que você encontra na web usa CSS inline, mas existem vantagens e desvantagens associadas a cada tipo.
+
+A coloração básica pode ser feita definindo dois atributos no nó: `fill` e `stroke`. `fill` define a cor dentro do objeto e `stroke` define a cor da linha desenhada ao redor do objeto. Você pode usar os mesmos esquemas de nomenclatura de cores CSS que você usa em HTML, independentemente de serem nomes de cores (que é `red`), Valores RGB (que são `rgb(255,0,0)`), valores de Hex, valores RGBA, etc.
+
+```html
+<rect
+  x="10"
+  y="10"
+  width="100"
+  height="100"
+  stroke="blue"
+  fill="purple"
+  fill-opacity="0.5"
+  stroke-opacity="0.8" />
+```
+
+O `fill="purple"` acima é um exemplo de um _atributo apresentacional_. Curiosamente, e ao contrário de estilos embutidos como `style="fill: purple"` que também é um atributo, os atributos de apresentação podem ser [sobrescritos pelo CSS](https://css-tricks.com/presentation-attributes-vs-inline-styles/) definidos em uma folha de estilos. Daí se você fez algo como `svg { fill: blue; }` ele irá substituir o preenchimento roxo que foi definido.
diff --git a/packages/quiz/questions/are-you-familiar-with-styling-svg/zh-CN.mdx b/packages/quiz/questions/are-you-familiar-with-styling-svg/zh-CN.mdx
new file mode 100644
index 0000000000..84709de489
--- /dev/null
+++ b/packages/quiz/questions/are-you-familiar-with-styling-svg/zh-CN.mdx
@@ -0,0 +1,21 @@
+---
+title: 你熟悉 SVG 的样式设置吗？
+---
+
+有几种方法可以为形状着色（包括在对象上指定属性），可以使用内联 CSS、嵌入式 CSS 部分或外部 CSS 文件。 您在网络上找到的大多数 SVG 都使用内联 CSS，但每种类型都有其优点和缺点。
+
+可以通过在节点上设置两个属性来完成基本着色：`fill` 和 `stroke`。 `fill` 设置对象内部的颜色，`stroke` 设置绘制在对象周围的线条的颜色。 您可以使用在 HTML 中使用的相同 CSS 颜色命名方案，无论是颜色名称（即 `red`）、RGB 值（即 `rgb(255,0,0)`）、十六进制值、RGBA 值等。
+
+```html
+<rect
+  x="10"
+  y="10"
+  width="100"
+  height="100"
+  stroke="blue"
+  fill="purple"
+  fill-opacity="0.5"
+  stroke-opacity="0.8" />
+```
+
+上面的 `fill="purple"` 是*表现属性*的一个例子。 有趣的是，与 `style="fill: purple"` 这样的内联样式（它也恰好是一个属性）不同，表现属性可以被样式表中定义的 [CSS 样式覆盖](https://css-tricks.com/presentation-attributes-vs-inline-styles/)。 因此，如果您执行类似 `svg { fill: blue; }` 的操作，它将覆盖已定义的紫色填充。
diff --git a/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/en-US.langnostic.json b/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/en-US.langnostic.json
new file mode 100644
index 0000000000..8d19e9f07a
--- /dev/null
+++ b/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/en-US.langnostic.json
@@ -0,0 +1,28 @@
+{
+  "frontmatter": {
+    "title": "8d8eae1c"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "55926f6e",
+        "bc76e578",
+        "49603ba8",
+        "a18976f9",
+        "c789e33e",
+        "96db5f42"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "55926f6e",
+        "bc76e578",
+        "49603ba8",
+        "a18976f9",
+        "c789e33e",
+        "96db5f42"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/en-US.mdx b/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/en-US.mdx
new file mode 100644
index 0000000000..898c453102
--- /dev/null
+++ b/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/en-US.mdx
@@ -0,0 +1,38 @@
+---
+title: Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?
+---
+
+These two approaches are not mutually exclusive. Making a website responsive means that some elements will respond by adapting its size or other functionality according to the device's screen size, typically the viewport width, through CSS media queries, for example, making the font size smaller on smaller devices.
+
+```css
+@media (min-width: 768px) {
+  .my-class {
+    font-size: 24px;
+  }
+}
+
+@media (max-width: 767px) {
+  .my-class {
+    font-size: 12px;
+  }
+}
+```
+
+A mobile-first strategy is also responsive, however it agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to other devices later. Following the previous example:
+
+```css
+.my-class {
+  font-size: 12px;
+}
+
+@media (min-width: 768px) {
+  .my-class {
+    font-size: 24px;
+  }
+}
+```
+
+A mobile-first strategy has the following main advantages:
+
+- It's more performant on mobile devices, since all the rules applied for them don't have to be validated against any media queries.
+- Mobile-first designs are more likely to be usable on larger devices (will just appear more stretched, but still usable). However, the reverse is not the case.
diff --git a/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/metadata.json b/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/metadata.json
new file mode 100644
index 0000000000..213d637430
--- /dev/null
+++ b/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "low",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/pt-BR.mdx b/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/pt-BR.mdx
new file mode 100644
index 0000000000..5f7bc2d5bb
--- /dev/null
+++ b/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/pt-BR.mdx
@@ -0,0 +1,37 @@
+---
+title: Você pode explicar a diferença entre codificar um site para ser responsivo e usar uma estratégia mobile-first?
+---
+
+Estas duas abordagens não se excluem mutuamente. Tornar um site responsivo significa que alguns elementos irão responder adaptando seu tamanho ou outras funcionalidades de acordo com o tamanho da tela do dispositivo, normalmente a largura da viewport, através de media queries CSS, por exemplo, tornando o tamanho da fonte menor em dispositivos menores.
+
+```css
+@media (min-width: 768px) {
+  . y-class {
+    font-size: 24px;
+  }
+}
+
+@media (max-width: 767px) {
+  . y-class {
+    font-size: 12px;
+  }
+}
+```
+
+Uma estratégia mobile-first também é responsiva, no entanto, ela define todos os estilos para dispositivos móveis como padrão e adiciona regras específicas para dispositivos maiores posteriormente. Seguindo o exemplo anterior:
+
+```css
+.min-classe {
+  font-size: 12px;
+}
+
+@media (min-width: 768px) {
+  .my-class {
+    font-size: 24px;
+  }
+```
+
+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.
diff --git a/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/zh-CN.mdx b/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/zh-CN.mdx
new file mode 100644
index 0000000000..11f1d58e9a
--- /dev/null
+++ b/packages/quiz/questions/can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy/zh-CN.mdx
@@ -0,0 +1,38 @@
+---
+title: 你能解释一下编写响应式网站与使用移动优先策略的区别吗？
+---
+
+这两种方法并非相互排斥。使网站具有响应性意味着某些元素将通过调整其大小或其他功能来响应，具体取决于设备的屏幕尺寸，通常是视口宽度，例如通过 CSS 媒体查询，例如，在较小的设备上减小字体大小。
+
+```css
+@media (min-width: 768px) {
+  .my-class {
+    font-size: 24px;
+  }
+}
+
+@media (max-width: 767px) {
+  .my-class {
+    font-size: 12px;
+  }
+}
+```
+
+移动优先策略也具有响应性，但是它同意我们应该为移动设备设置默认值并定义所有样式，并且稍后仅为其他设备添加特定的响应式规则。 遵循前面的示例：
+
+```css
+.my-class {
+  font-size: 12px;
+}
+
+@media (min-width: 768px) {
+  .my-class {
+    font-size: 24px;
+  }
+}
+```
+
+移动优先策略具有以下主要优点：
+
+* 它在移动设备上具有更高的性能，因为应用于它们的规则不必针对任何媒体查询进行验证。
+* 移动优先设计更有可能在更大的设备上使用（只会显得更拉伸，但仍然可用）。 但是，反之则不然。
diff --git a/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/en-US.langnostic.json b/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/en-US.langnostic.json
new file mode 100644
index 0000000000..df58d74ddf
--- /dev/null
+++ b/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/en-US.langnostic.json
@@ -0,0 +1,24 @@
+{
+  "frontmatter": {
+    "title": "77f6b259"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "f259cefe",
+        "92921ca1",
+        "31ea7338",
+        "727abcd0"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "f259cefe",
+        "92921ca1",
+        "31ea7338",
+        "727abcd0"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/en-US.mdx b/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/en-US.mdx
new file mode 100644
index 0000000000..2f9055d9fe
--- /dev/null
+++ b/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/en-US.mdx
@@ -0,0 +1,20 @@
+---
+title: Can you give an example of an `@media` property other than `screen`?
+---
+
+There are four types of `@media` properties (including `screen`):
+
+- `all`: for all media type devices
+- `print`: for printers
+- `speech`: for screen readers that "reads" the page out loud
+- `screen`: for computer screens, tablets, smart-phones etc.
+
+Here is an example of `print` media type's usage:
+
+```css
+@media print {
+  body {
+    color: black;
+  }
+}
+```
diff --git a/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/metadata.json b/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/metadata.json
new file mode 100644
index 0000000000..f5f6828fb3
--- /dev/null
+++ b/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "can-you-give-an-example-of-an-media-property-other-than-screen",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "low",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/pt-BR.mdx b/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/pt-BR.mdx
new file mode 100644
index 0000000000..2f9139b99d
--- /dev/null
+++ b/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/pt-BR.mdx
@@ -0,0 +1,20 @@
+---
+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.
+
+Aqui está um exemplo de uso do tipo de mídia `print`:
+
+```css
+@media print {
+  body {
+    color: black;
+  }
+}
+```
diff --git a/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/zh-CN.mdx b/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/zh-CN.mdx
new file mode 100644
index 0000000000..9e620a9a5a
--- /dev/null
+++ b/packages/quiz/questions/can-you-give-an-example-of-an-media-property-other-than-screen/zh-CN.mdx
@@ -0,0 +1,20 @@
+---
+title: 你能举一个除了`screen`之外的`@media`属性的例子吗？
+---
+
+有四种类型的`@media`属性（包括`screen`）：
+
+* `all`：适用于所有媒体类型设备
+* `print`：适用于打印机
+* `speech`：适用于“朗读”页面的屏幕阅读器
+* `screen`：适用于电脑屏幕、平板电脑、智能手机等。
+
+以下是`print`媒体类型用法的示例：
+
+```css
+@media print {
+  body {
+    color: black;
+  }
+}
+```
diff --git a/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/en-US.langnostic.json b/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/en-US.langnostic.json
new file mode 100644
index 0000000000..5a2420c115
--- /dev/null
+++ b/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/en-US.langnostic.json
@@ -0,0 +1,37 @@
+{
+  "frontmatter": {
+    "title": "d5aa1c8e",
+    "subtitle": "d0dee082"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "a9123b80",
+        "1ee595ed",
+        "4da4c411",
+        "63788dd",
+        "269e6fd2",
+        "71990a7c",
+        "56c7acae",
+        "a740fe82",
+        "e8fe5410",
+        "ba92368c"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "a9123b80",
+        "1ee595ed",
+        "4da4c411",
+        "63788dd",
+        "269e6fd2",
+        "71990a7c",
+        "56c7acae",
+        "a740fe82",
+        "e8fe5410",
+        "ba92368c"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/en-US.mdx b/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/en-US.mdx
new file mode 100644
index 0000000000..be443b70eb
--- /dev/null
+++ b/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/en-US.mdx
@@ -0,0 +1,24 @@
+---
+title: Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`?
+subtitle: Do you know any exceptions?
+---
+
+In a nutshell, such a placement of CSS `<link>`s and JavaScript `<script>`s allows for faster rendering of the page and better overall performance.
+
+## Placing `<link>`s in `<head>`
+
+Putting `<link>`s in `<head>` is part of the proper specification in building an optimized website. When a page first loads, HTML and CSS are being parsed simultaneously; HTML creates the DOM (Document Object Model) and CSS creates the CSSOM (CSS Object Model). Both are needed to create the visuals in a website, allowing for a quick "first meaningful paint" timing. Placing CSS `<link>`s in the `<head>` ensures that the stylesheets are loaded and ready for use when the browser starts rendering the page.
+
+This progressive rendering is a metric that sites are measured on in their performance scores. Putting stylesheets near the bottom of the document is what prohibits progressive rendering in many browsers. Some browsers block rendering to avoid having to repaint elements of the page if their styles change. The user is then stuck viewing a blank white page. Other times there can be flashes of unstyled content (FOUC), which show a webpage with no styling applied.
+
+## Placing `<script>`s just before `</body>`
+
+`<script>` tags block HTML parsing while they are being downloaded and executed which can slow down the display of your page. Placing the `<script>`s at the bottom will allow the HTML to be parsed and displayed to the user first.
+
+An exception for positioning of `<script>`s at the bottom is when your script contains `document.write()`, but these days it's not a good practice to use `document.write()`. Also, placing `<script>`s at the bottom means that the browser cannot start downloading the scripts until the entire document is parsed. This ensures your code that needs to manipulate DOM elements will not throw an error and halt the entire script. If you need to put `<script>`s in the `<head>`, use the `defer` attribute, which will achieve the same effect of running the script only after the HTML is parsed but the browser can kick off the network request earlier to download the script.
+
+Keep in mind that putting scripts just before the closing `</body>` tag will create the illusion that the page loads faster on an empty cache (since the scripts won't block downloading the rest of the document). However, if you have some code you want to run during page load, it will only start executing after the entire page has loaded. If you put those scripts in the `<head>` tag, they would start executing before - so on a primed cache the page would actually appear to load faster.
+
+## `<head>` and `<body>` tags are now optional
+
+As per the HTML5 specification, certain HTML tags like `<head>` and `<body>` are optional. Google's style guide even recommends removing them to save bytes. However, this practice is still not widely adopted and the performance gain is likely to be minimal and for most sites it's not likely going to matter.
diff --git a/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/metadata.json b/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/metadata.json
new file mode 100644
index 0000000000..c61bc25025
--- /dev/null
+++ b/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/metadata.json
@@ -0,0 +1,12 @@
+{
+  "slug": "css-link-between-head-and-js-script-just-before-body",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["html", "performance"],
+  "importance": "high",
+  "difficulty": "medium",
+  "featured": true
+}
diff --git a/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/pt-BR.mdx b/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/pt-BR.mdx
new file mode 100644
index 0000000000..0bcefeaca5
--- /dev/null
+++ b/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/pt-BR.mdx
@@ -0,0 +1,24 @@
+---
+title: Por que geralmente é uma boa ideia posicionar os CSS `<link>` entre `<head></head>` e os JS `<script>` logo antes de `</body>`?
+subtitle: Você conhece alguma exceção?
+---
+
+Em poucas palavras, posicionamento CSS `<link>`s and JavaScript `<script>`s permite uma renderização mais rápida da página e um melhor desempenho geral.
+
+## Colocando `<link>`s em `<head>`
+
+Colocar `<link>`s em `<head>` faz parte da especificação adequada na construção de um site otimizado. Quando uma página é carregada pela primeira vez, HTML e CSS são analisados simultaneamente; O HTML cria o DOM (modelo de objeto do documento) e o CSS cria o modelo de objeto CSSOM (CSS Object Model). Ambos são necessários para criar os elementos visuais de um site, permitindo um tempo rápido para o "primeiro desenho significativo" (first meaningful paint). Colocar o CSS`<link>`s no `<head>` garante que os estilos são carregados e prontos para uso quando o navegador começar a renderizar a página.
+
+Esta renderização progressiva é uma métrica em que os sites são medidos na sua pontuação de desempenho. Colocar folhas de estilo perto do final do documento é o que impede a renderização progressiva em muitos navegadores. Alguns navegadores bloqueiam a renderização para evitar ter que repintar elementos da página se seus estilos mudarem. O usuário fica então preso visualizando uma página em branco. Outras vezes, podem ocorrer flashes de conteúdo não estilizado (FOUC), que mostram uma página da web sem a aplicação de estilos.
+
+## Colocando `<script>`s logo antes `</body>`
+
+`<script>` bloqueia a análise HTML enquanto eles estão sendo baixados e executados, o que pode diminuir a velocidade da sua página. Colocar o `<script>`s na parte inferior permitirá que o HTML seja analisado e exibido ao usuário primeiro.
+
+Uma exceção para posicionamento de `<script>`s na parte inferior é quando o script contém `documento.write()`, mas hoje em dia não é uma boa prática usar `document.write()`. Também, colocar `<script>`s na parte inferior significa que o navegador não pode iniciar o download dos scripts até que o documento inteiro seja analisado. Isso garante que seu código que precisa manipular elementos DOM não irá lançar um erro e parar todo o script. Se você precisar colocar `<script>`s no `<head>`, use o atributo `defer`, que alcançará o mesmo efeito de executar o script somente depois que o HTML for analisado, mas o navegador pode expulsar a solicitação de rede antes de baixar o script.
+
+Tenha em mente que colocar scripts antes da tag de fechamento `</body>` irá criar a ilusão de que a página carrega mais rápido em um cache vazio (já que os scripts não vão bloquear o download do resto do documento). No entanto, se você tiver algum código que deseja executar durante o carregamento da página, ele só começará a ser executado após o carregamento completo da página. Se você colocar esses scripts na tag `<head>`, eles começariam a ser executados antes, então em um cache carregado a página parece carregar mais rápido.
+
+## As tags `<head>` e `<body>` agora são opcionais
+
+Como na especificação HTML5, certas tags HTML como `<head>` e`<body>` são opcionais. O guia de estilo do Google recomenda até a sua remoção para economizar bytes. No entanto esta prática ainda não é amplamente adotada e o ganho de desempenho é provavelmente mínimo e para a maioria dos sites isso não vai importar.
diff --git a/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/zh-CN.mdx b/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/zh-CN.mdx
new file mode 100644
index 0000000000..db1f06f771
--- /dev/null
+++ b/packages/quiz/questions/css-link-between-head-and-js-script-just-before-body/zh-CN.mdx
@@ -0,0 +1,26 @@
+---
+title: >-
+  为什么将 CSS `<link>` 放置在 `<head></head>` 之间，而 JS `<script>` 放置在 `</body>`
+  之前是一个好主意？
+subtitle: 你知道任何例外情况吗？
+---
+
+简而言之，这种 CSS `<link>` 和 JavaScript `<script>` 的放置方式可以更快地渲染页面并获得更好的整体性能。
+
+## 将 `<link>` 放置在 `<head>` 中
+
+将 `<link>` 放在 `<head>` 中是构建优化网站的正确规范的一部分。当页面首次加载时，HTML 和 CSS 会同时被解析；HTML 创建 DOM（文档对象模型），CSS 创建 CSSOM（CSS 对象模型）。两者都需要在网站中创建视觉效果，从而实现快速的“首次有效绘制”计时。将 CSS `<link>` 放置在 `<head>` 中可确保样式表在浏览器开始渲染页面时已加载并可以使用。
+
+这种渐进式渲染是衡量网站性能得分的指标。将样式表放在文档的底部会阻止许多浏览器中的渐进式渲染。某些浏览器会阻止渲染，以避免在样式更改时重新绘制页面元素。然后，用户会卡在查看空白的白页上。其他时候可能会出现未设置样式的闪烁内容 (FOUC)，这会显示未应用任何样式的网页。
+
+## 将 `<script>` 放置在 `</body>` 之前
+
+`<script>` 标签会阻止 HTML 解析，因为它们正在被下载和执行，这会减慢页面的显示速度。将 `<script>` 放在底部将允许首先解析 HTML 并将其显示给用户。
+
+将 `<script>` 放置在底部的例外情况是，当您的脚本包含 `document.write()` 时，但如今使用 `document.write()` 并不是一个好习惯。此外，将 `<script>` 放置在底部意味着浏览器在整个文档被解析之前无法开始下载脚本。这确保了需要操作 DOM 元素的代码不会抛出错误并停止整个脚本。如果需要在 `<head>` 中放置 `<script>`，请使用 `defer` 属性，这将实现与仅在 HTML 被解析后运行脚本相同的效果，但浏览器可以更早地启动网络请求以下载脚本。
+
+请记住，将脚本放在结束 `</body>` 标签之前会产生页面在空缓存上加载更快的错觉（因为脚本不会阻止下载文档的其余部分）。但是，如果您有一些代码要在页面加载期间运行，它将仅在整个页面加载完成后才开始执行。如果将这些脚本放在 `<head>` 标签中，它们将开始更早地执行 - 因此在已准备好的缓存上，页面实际上看起来会加载得更快。
+
+## `<head>` 和 `<body>` 标签现在是可选的
+
+根据 HTML5 规范，某些 HTML 标签（如 `<head>` 和 `<body>`）是可选的。谷歌的风格指南甚至建议删除它们以节省字节。但是，这种做法尚未得到广泛采用，性能提升可能很小，对于大多数网站来说，它可能无关紧要。
diff --git a/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.langnostic.json b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.langnostic.json
new file mode 100644
index 0000000000..0299bbc2fa
--- /dev/null
+++ b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.langnostic.json
@@ -0,0 +1,28 @@
+{
+  "frontmatter": {
+    "title": "91b11af2"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "24e0ef76",
+        "d8dd99d0",
+        "4f0541a4",
+        "3aa3e4a9",
+        "210bb734",
+        "86bbfb05"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "24e0ef76",
+        "d8dd99d0",
+        "4f0541a4",
+        "3aa3e4a9",
+        "210bb734",
+        "86bbfb05"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.mdx b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.mdx
new file mode 100644
index 0000000000..1220df49e7
--- /dev/null
+++ b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/en-US.mdx
@@ -0,0 +1,18 @@
+---
+title: Describe Block Formatting Context (BFC) and how it works.
+---
+
+A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, `inline-blocks`, `table-cells`, `table-caption`s, and elements with `overflow` other than `visible` (except when that value has been propagated to the viewport) establish new block formatting contexts.
+
+Knowing how to establish a block formatting context is important, because without doing so, the containing box will not [contain floated children](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height). This is similar to collapsing margins, but more insidious as you will find entire boxes collapsing in odd ways.
+
+A BFC is an HTML box that satisfies at least one of the following conditions:
+
+- The value of `float` is not `none`.
+- The value of `position` is neither `static` nor `relative`.
+- The value of `display` is `table-cell`, `table-caption`, `inline-block`, `flex`, or `inline-flex`, `grid`, or `inline-grid`.
+- The value of `overflow` is not `visible`.
+
+In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).
+
+Vertical margins between adjacent block-level boxes within the same BFC can collapse, but a BFC prevents margin collapsing with elements outside of it. Read more on [collapsing margins](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).
diff --git a/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/metadata.json b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/metadata.json
new file mode 100644
index 0000000000..008479be48
--- /dev/null
+++ b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "describe-block-formatting-context-bfc-and-how-it-works",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "medium",
+  "difficulty": "hard"
+}
diff --git a/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/pt-BR.mdx b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/pt-BR.mdx
new file mode 100644
index 0000000000..2842b010fa
--- /dev/null
+++ b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/pt-BR.mdx
@@ -0,0 +1,18 @@
+---
+title: Descrever o contexto de formatação de bloco (BFC) e como ele funciona.
+---
+
+Um Contexto de Formatação de Bloco (BFC) é parte da renderização visual do CSS em uma página da web, no qual os blocos são organizados. Elementos flutuantes, posicionados absolutamente, `inline-blocks`, `table-cells`, `table-captions` e elementos com `overflow` diferente de `visible` (exceto quando esse valor foi propagado para a área visível) estabelecem novos contextos de formatação de bloco.
+
+Saber estabelecer um contexto de formatação de blocos é importante, porque sem fazer isso, a caixa de contenção não [conterá filhos floated](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height). Isso é semelhante ao colapso das margens, mas mais insidioso, pois você encontrará caixas inteiras colapsando de maneiras estranhas.
+
+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`.
+
+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).
+
+As margens verticais entre caixas adjacentes de nível de bloco em um BFC colapsam. Leia mais em [margens de recolhimento](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing).
diff --git a/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.mdx b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.mdx
new file mode 100644
index 0000000000..28f6f8f2de
--- /dev/null
+++ b/packages/quiz/questions/describe-block-formatting-context-bfc-and-how-it-works/zh-CN.mdx
@@ -0,0 +1,18 @@
+---
+title: 描述块格式化上下文 (BFC) 及其工作原理。
+---
+
+块格式化上下文 (BFC) 是网页视觉 CSS 渲染的一部分，其中会布局块级盒子。浮动、绝对定位的元素、`inline-blocks`、`table-cells`、`table-caption` 以及 `overflow` 值不为 `visible` 的元素（除非该值已传播到视口）会建立新的块格式化上下文。
+
+了解如何建立块格式化上下文非常重要，因为如果不这样做，包含框将无法[包含浮动子元素](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height)。这类似于折叠外边距，但更隐蔽，因为您会发现整个盒子以奇怪的方式折叠。
+
+BFC 是满足以下至少一个条件的 HTML 盒子：
+
+* `float` 的值不为 `none`。
+* `position` 的值既不是 `static` 也不是 `relative`。
+* `display` 的值为 `table-cell`、`table-caption`、`inline-block`、`flex` 或 `inline-flex`、`grid` 或 `inline-grid`。
+* `overflow` 的值不为 `visible`。
+
+在 BFC 中，每个盒子的左外边缘都与包含块的左边缘接触（对于从右到左的格式，右边缘接触）。
+
+在同一个 BFC 内的相邻块级盒子之间的垂直外边距可以折叠，但是 BFC 阻止了它与外部元素的边距折叠。 进一步阅读 [外边距折叠](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)。
diff --git a/packages/quiz/questions/describe-floats-and-how-they-work/en-US.langnostic.json b/packages/quiz/questions/describe-floats-and-how-they-work/en-US.langnostic.json
new file mode 100644
index 0000000000..6350a73ef1
--- /dev/null
+++ b/packages/quiz/questions/describe-floats-and-how-they-work/en-US.langnostic.json
@@ -0,0 +1,38 @@
+{
+  "frontmatter": {
+    "title": "1dcaea36"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "ca3164e6",
+        "3110af23",
+        "133bf48b",
+        "d680b63f",
+        "14d36a97",
+        "e42ba96a",
+        "e9d604ec",
+        "cfe2dfc0",
+        "870087a3",
+        "62fd75b6",
+        "ad21c00e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "ca3164e6",
+        "3110af23",
+        "133bf48b",
+        "d680b63f",
+        "14d36a97",
+        "e42ba96a",
+        "e9d604ec",
+        "cfe2dfc0",
+        "870087a3",
+        "62fd75b6",
+        "ad21c00e"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/describe-floats-and-how-they-work/en-US.mdx b/packages/quiz/questions/describe-floats-and-how-they-work/en-US.mdx
new file mode 100644
index 0000000000..98410e5ebc
--- /dev/null
+++ b/packages/quiz/questions/describe-floats-and-how-they-work/en-US.mdx
@@ -0,0 +1,33 @@
+---
+title: Describe `float`s and how they work.
+---
+
+Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike `position: absolute` elements, which are removed from the flow of the page.
+
+The CSS `clear` property can be used to be positioned below `left`/`right`/`both` floated elements.
+
+If a parent element contains nothing but floated elements, its height will be collapsed to nothing. It can be fixed by clearing the float after the floated elements in the container but before the close of the container.
+
+## Clearfix hack
+
+The `.clearfix` hack uses a clever CSS [pseudo-element](/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for) (`::after`) to clear floats. Rather than setting the overflow on the parent, you apply an additional class `clearfix` to it. Then apply this CSS:
+
+```css
+.clearfix::after {
+  content: ' ';
+  visibility: hidden;
+  display: block;
+  height: 0;
+  clear: both;
+}
+```
+
+Alternatively, give `overflow: auto` or `overflow: hidden` property to the parent element which will establish a new block formatting context inside the children and it will expand to contain its children.
+
+## Trivia
+
+In the good old days, CSS frameworks such as Bootstrap 2 used the `float` property to implement its grid system. However with CSS Flexbox and Grid these days, there is no longer much need to use the `float` property.
+
+## References
+
+- [Clearfix: A Lesson In Web Development Evolution](https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/)
diff --git a/packages/quiz/questions/describe-floats-and-how-they-work/metadata.json b/packages/quiz/questions/describe-floats-and-how-they-work/metadata.json
new file mode 100644
index 0000000000..52f7fd4d0c
--- /dev/null
+++ b/packages/quiz/questions/describe-floats-and-how-they-work/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "describe-floats-and-how-they-work",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "medium",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/describe-floats-and-how-they-work/pt-BR.mdx b/packages/quiz/questions/describe-floats-and-how-they-work/pt-BR.mdx
new file mode 100644
index 0000000000..9eb041f0fa
--- /dev/null
+++ b/packages/quiz/questions/describe-floats-and-how-they-work/pt-BR.mdx
@@ -0,0 +1,33 @@
+---
+title: Descreva os 'float' e como funcionam.
+---
+
+Float é uma propriedade CSS de posicionamento. Elementos flutuantes permanecem uma parte do fluxo da página, e afetarão o posicionamento de outros elementos (por exemplo, texto irá fluir em torno dos elementos flutuantes), ao contrário de `position: absolute`, que são removidos do fluxo da página.
+
+A propriedade CSS `clear` pode ser usada para ser posicionada abaixo de `left`/`right`/`both` elementos flutuantes.
+
+Se um elemento pai não conter nada além de elementos flutuantes, sua altura será desmoronada a nada. Ele pode ser corrigido limpando o float após os elementos flutuantes no contêiner, mas antes do fechamento do container.
+
+## O hack do Clearfix
+
+O hack `.clearfix` usa um CSS inteligente [pseudo-element](/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for) (`::after`) para limpar floats. Ao invés de definir o excesso de fluxo no pai, você aplica uma classe adicional `clearfix` para ele. Em seguida, aplique este CSS:
+
+```css
+.clearfix::after {
+  content: ' ';
+  visibility: hidden;
+  display: block;
+  height: 0;
+  clear: both;
+}
+```
+
+Como alternativa, dê a propriedade `overflow: auto` ou `overflow: hidden` ao elemento pai que estabelecerá um novo contexto de formatação de bloco dentro dos filhos e ele será expandido para conter seus filhos.
+
+## Trívia
+
+Nos bons dias antigos, o CSS frameworks como o Bootstrap 2 usou a propriedade `float` para implementar seu sistema de grade. No entanto, com CSS Flexbox e Grid atualmente, não há muita necessidade de usar a propriedade `float`.
+
+## Referências
+
+- [Clearfix: Uma Lição em Desenvolvimento Web Evolução](https://css-tricks.com/clearfix-a-lesson-web-development-evolution/)
diff --git a/packages/quiz/questions/describe-floats-and-how-they-work/zh-CN.mdx b/packages/quiz/questions/describe-floats-and-how-they-work/zh-CN.mdx
new file mode 100644
index 0000000000..e8fae49391
--- /dev/null
+++ b/packages/quiz/questions/describe-floats-and-how-they-work/zh-CN.mdx
@@ -0,0 +1,33 @@
+---
+title: 描述 `float` 及其工作原理。
+---
+
+Float 是一个 CSS 定位属性。浮动元素仍然是页面流程的一部分，并将影响其他元素的位置（例如，文本将环绕浮动元素），这与 `position: absolute` 元素不同，后者将从页面流程中移除。
+
+CSS `clear` 属性可用于定位在 `left`/`right`/`both` 浮动元素下方。
+
+如果父元素只包含浮动元素，则其高度将折叠为零。可以通过在容器中浮动元素之后但在容器关闭之前清除浮动来修复它。
+
+## Clearfix hack
+
+`.clearfix` hack 使用巧妙的 CSS [伪元素](/questions/quiz/describe-pseudo-elements-and-discuss-what-they-are-used-for) (`::after`) 来清除浮动。与其在父元素上设置 overflow，不如为其应用一个额外的类 `clearfix`。然后应用此 CSS：
+
+```css
+.clearfix::after {
+  content: ' ';
+  visibility: hidden;
+  display: block;
+  height: 0;
+  clear: both;
+}
+```
+
+或者，给父元素 `overflow: auto` 或 `overflow: hidden` 属性，它将在子元素内建立一个新的块格式化上下文，它将扩展以包含其子元素。
+
+## 琐事
+
+在过去的日子里，CSS 框架（如 Bootstrap 2）使用 `float` 属性来实现其网格系统。然而，如今有了 CSS Flexbox 和 Grid，不再需要使用 `float` 属性。
+
+## 参考
+
+* [Clearfix: A Lesson In Web Development Evolution](https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/)
diff --git a/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/en-US.langnostic.json b/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/en-US.langnostic.json
new file mode 100644
index 0000000000..b257758b73
--- /dev/null
+++ b/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/en-US.langnostic.json
@@ -0,0 +1,28 @@
+{
+  "frontmatter": {
+    "title": "1d72583b"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "71867e93",
+        "2731af88",
+        "add698fb",
+        "1346321c",
+        "62fd75b6",
+        "9642fcc5"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "71867e93",
+        "2731af88",
+        "add698fb",
+        "1346321c",
+        "62fd75b6",
+        "9642fcc5"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/en-US.mdx b/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/en-US.mdx
new file mode 100644
index 0000000000..55ad4faa43
--- /dev/null
+++ b/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/en-US.mdx
@@ -0,0 +1,18 @@
+---
+title: Describe pseudo-elements and discuss what they are used for.
+---
+
+A CSS [pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (`::first-line`, `::first-letter`) or adding elements to the markup (combined with `content: ...`) without having to modify the markup (`:before`, `:after`).
+
+- `::first-line` and `::first-letter` can be used to decorate text.
+- Used in the `.clearfix` hack as shown above to add a zero-space element with `clear: both`.
+- Triangular arrows in tooltips use `::before` and `::after`. Encourages separation of concerns because the triangle is considered part of styling and not really the DOM.
+
+## Notes
+
+- Pseudo-elements are different from [pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), which are used to style an element based on its _state_ (such as `:hover`, `:focus`, etc).
+- Double colons should be used instead of single colon to distinguish pseudo-classes from pseudo-elements. Most browsers support both syntaxs since this distinction was not clear in legacy W3C specs.
+
+## References
+
+- [Pseudo-elements - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
diff --git a/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/metadata.json b/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/metadata.json
new file mode 100644
index 0000000000..9004c13581
--- /dev/null
+++ b/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "describe-pseudo-elements-and-discuss-what-they-are-used-for",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "medium",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/pt-BR.mdx b/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/pt-BR.mdx
new file mode 100644
index 0000000000..f918fb2000
--- /dev/null
+++ b/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/pt-BR.mdx
@@ -0,0 +1,18 @@
+---
+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.
+
+## 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.
+
+## Referências
+
+- [Pseudo-elements - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
diff --git a/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/zh-CN.mdx b/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/zh-CN.mdx
new file mode 100644
index 0000000000..f667af4bb3
--- /dev/null
+++ b/packages/quiz/questions/describe-pseudo-elements-and-discuss-what-they-are-used-for/zh-CN.mdx
@@ -0,0 +1,18 @@
+---
+title: 描述伪元素并讨论它们的使用。
+---
+
+CSS [伪元素](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) 是添加到选择器的关键字，可让您设置所选元素特定部分的样式。它们可用于装饰 (`::first-line`, `::first-letter`) 或将元素添加到标记中（与 `content: ...` 结合使用），而无需修改标记 (`:before`, `:after`)。
+
+* `::first-line` 和 `::first-letter` 可用于装饰文本。
+* 在上面显示的 `.clearfix` hack 中使用，以添加一个带有 `clear: both` 的零空间元素。
+* 工具提示中的三角形箭头使用 `::before` 和 `::after`。 鼓励关注点分离，因为三角形被认为是样式的一部分，而不是真正的 DOM。
+
+## 笔记
+
+* 伪元素与 [伪类](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) 不同，伪类用于根据元素的*状态*（例如 `:hover`、`:focus` 等）设置元素的样式。
+* 应使用双冒号而不是单冒号来区分伪类和伪元素。 大多数浏览器都支持这两种语法，因为这种区别在旧版 W3C 规范中并不明确。
+
+## 参考
+
+* [伪元素 - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
diff --git a/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/en-US.langnostic.json b/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/en-US.langnostic.json
new file mode 100644
index 0000000000..7e78b652c1
--- /dev/null
+++ b/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/en-US.langnostic.json
@@ -0,0 +1,24 @@
+{
+  "frontmatter": {
+    "title": "64405d09"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "f8ee234b",
+        "41729b4e",
+        "476c6845",
+        "b2f264"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "f8ee234b",
+        "41729b4e",
+        "476c6845",
+        "b2f264"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/en-US.mdx b/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/en-US.mdx
new file mode 100644
index 0000000000..01588f2618
--- /dev/null
+++ b/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/en-US.mdx
@@ -0,0 +1,13 @@
+---
+title: Describe what you like and dislike about the CSS preprocessors you have used.
+---
+
+## Likes
+
+- Mostly the advantages mentioned in ["What are the advantages/disadvantages of using CSS preprocessors?"](/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors).
+- Less is written in JavaScript, which plays well with Node.
+
+## Dislikes
+
+- Sass relies on `node-sass`, which is a binding for LibSass written in C++. The library has to be recompiled frequently when switching between Node.js versions.
+- In Less, variable names are prefixed with `@`, which can be confused with native CSS keywords like `@media`, `@import` and `@font-face` rule.
diff --git a/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/metadata.json b/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/metadata.json
new file mode 100644
index 0000000000..0c59f4d88e
--- /dev/null
+++ b/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "low",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/pt-BR.mdx b/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/pt-BR.mdx
new file mode 100644
index 0000000000..f7263c18cb
--- /dev/null
+++ b/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/pt-BR.mdx
@@ -0,0 +1,13 @@
+---
+title: Descreva o que você gosta e não gosta sobre os pré-processadores CSS que você usou.
+---
+
+## 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.
+
+## 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`.
diff --git a/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/zh-CN.mdx b/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/zh-CN.mdx
new file mode 100644
index 0000000000..b65ba60952
--- /dev/null
+++ b/packages/quiz/questions/describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used/zh-CN.mdx
@@ -0,0 +1,13 @@
+---
+title: 描述你喜欢和不喜欢你使用过的 CSS 预处理器的地方。
+---
+
+## 优点
+
+* 主要是 ["使用 CSS 预处理器的优点/缺点是什么？"](/questions/quiz/what-are-the-advantages-disadvantages-of-using-css-preprocessors) 中提到的优点。
+* 编写的 JavaScript 较少，这与 Node 配合得很好。
+
+## 缺点
+
+* Sass 依赖于 `node-sass`，它是用 C++ 编写的 LibSass 的一个绑定。 在 Node.js 版本之间切换时，必须经常重新编译该库。
+* 在 Less 中，变量名以 `@` 为前缀，这可能会与 `@media`、`@import` 和 `@font-face` 规则等原生 CSS 关键字混淆。
diff --git a/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/en-US.langnostic.json b/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/en-US.langnostic.json
new file mode 100644
index 0000000000..d7974ac5ce
--- /dev/null
+++ b/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/en-US.langnostic.json
@@ -0,0 +1,26 @@
+{
+  "frontmatter": {
+    "title": "1d3f31f1"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "800be0a7",
+        "484452a7",
+        "69b0449b",
+        "e2e457bf",
+        "590313ad"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "800be0a7",
+        "484452a7",
+        "69b0449b",
+        "e2e457bf",
+        "590313ad"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/en-US.mdx b/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/en-US.mdx
new file mode 100644
index 0000000000..004c42cb9f
--- /dev/null
+++ b/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/en-US.mdx
@@ -0,0 +1,13 @@
+---
+title: Describe `z-index` and how stacking context is formed.
+---
+
+The `z-index` property in CSS controls the vertical stacking order of elements that overlap. `z-index` only affects positioned elements (elements which have a `position` value which is not `static`) and its descendants or flex items.
+
+Without any `z-index` value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning (and their children) will always appear on top of elements with default static positioning, regardless of the HTML hierarchy.
+
+A stacking context is an element that contains a set of layers. Within a local stacking context, the `z-index` values of its children are set relative to that element rather than to the document root. Layers outside of that context — i.e. sibling elements of a local stacking context — can't sit between layers within it. If an element B sits on top of element A, a child element of element A, element C, can never be higher than element B even if element C has a higher `z-index` than element B.
+
+Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as `opacity` less than 1, `filter` that is not `none`, and `transform` that is not`none`.
+
+_**Note**: What exactly qualifies an element to create a stacking context is listed in this long set of [rules](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_context#The_stacking_context)._
diff --git a/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/metadata.json b/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/metadata.json
new file mode 100644
index 0000000000..f81086a0f8
--- /dev/null
+++ b/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "describe-z-index-and-how-stacking-context-is-formed",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "medium",
+  "difficulty": "hard"
+}
diff --git a/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/pt-BR.mdx b/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/pt-BR.mdx
new file mode 100644
index 0000000000..32426d8188
--- /dev/null
+++ b/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/pt-BR.mdx
@@ -0,0 +1,13 @@
+---
+title: Descreva `z-index` e como o contexto de empilhamento é formado.
+---
+
+A propriedade `z-index` no CSS controla a ordem de empilhamento vertical dos elementos que se sobrepõem. 'z-index' afeta apenas elementos posicionados (elementos que têm um valor de 'posição' que não é 'static') e seus descendentes ou itens flexíveis.
+
+Sem qualquer valor de `z-index`, pilha de elementos na ordem de exibição no DOM (o menor nível abaixo na mesma hierarquia aparece no topo). Elementos com posicionamento não estático (e seus filhos) sempre aparecerão no topo dos elementos com posição estática padrão, independente da hierarquia HTML.
+
+Um contexto de empilhamento é um elemento que contém um conjunto de camadas. Dentro de um contexto local de empilhamento, os valores de `z-index` de seus filhos são definidos em relação a esse elemento, ao invés da raiz do documento. Camadas fora desse contexto — ou seja, elementos irmãs de um contexto local de empilhamento — não podem ficar entre as camadas dentro dele. Se um elemento B ficar no topo do elemento A, um elemento filho do elemento A, elemento C, nunca pode ser maior que o elemento B, mesmo que o elemento C tenha um `z-index` maior que o elemento B.
+
+Cada contexto de empilhamento é auto-contido - após o conteúdo do elemento ser empilhado, todo o elemento é considerado na ordem de empilhamento do contexto de empilhamento do pai. Algumas propriedades CSS desencadeiam um novo contexto de empilhamento, como `opacity` menor que 1, `filter` que não é `none`, e `transform` que não é `none`.
+
+_**Nota**: O que exatamente qualifica-se como um elemento para criar um contexto de empilhamento está listado neste longo conjunto de [rules](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context)._
diff --git a/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/zh-CN.mdx b/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/zh-CN.mdx
new file mode 100644
index 0000000000..06e27d1e9c
--- /dev/null
+++ b/packages/quiz/questions/describe-z-index-and-how-stacking-context-is-formed/zh-CN.mdx
@@ -0,0 +1,13 @@
+---
+title: 描述 `z-index` 以及如何形成堆叠上下文。
+---
+
+CSS 中的 `z-index` 属性控制重叠元素的垂直堆叠顺序。`z-index` 仅影响已定位的元素（具有 `position` 值不为 `static` 的元素）及其后代或 flex 项目。
+
+在没有任何 `z-index` 值的情况下，元素按照它们在 DOM 中出现的顺序堆叠（在同一层级中，最下面的元素出现在最上面）。具有非静态定位的元素（及其子元素）将始终出现在具有默认静态定位的元素之上，而不管 HTML 层次结构如何。
+
+堆叠上下文是包含一组层的元素。在局部堆叠上下文中，其子元素的 `z-index` 值是相对于该元素设置的，而不是相对于文档根元素。该上下文之外的层——即局部堆叠上下文的同级元素——不能位于其内的层之间。如果元素 B 位于元素 A 的顶部，而元素 A 的子元素 C 永远不能高于元素 B，即使元素 C 的 `z-index` 比元素 B 高。
+
+每个堆叠上下文都是自包含的 - 在元素的content堆叠后，整个元素被认为在父堆叠上下文的堆叠顺序中。少数 CSS 属性会触发新的堆叠上下文，例如 `opacity` 小于 1、不是 `none` 的 `filter` 以及不是 `none` 的 `transform`。
+
+***注意**：确切地说，什么使一个元素能够创建堆叠上下文列在这个长长的 [规则](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context) 集中。*
diff --git a/packages/quiz/questions/designing-or-developing-for-multilingual-sites/en-US.langnostic.json b/packages/quiz/questions/designing-or-developing-for-multilingual-sites/en-US.langnostic.json
new file mode 100644
index 0000000000..79256ef37d
--- /dev/null
+++ b/packages/quiz/questions/designing-or-developing-for-multilingual-sites/en-US.langnostic.json
@@ -0,0 +1,64 @@
+{
+  "frontmatter": {
+    "title": "5a100115"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "c7e35191",
+        "e282633b",
+        "b2d36211",
+        "f12108f0",
+        "eb5a3e21",
+        "2cafe9e3",
+        "5bec220b",
+        "e73b66f9",
+        "fa4b8826",
+        "e3f2fe37",
+        "38d12026",
+        "4fc5ac64",
+        "9239e58",
+        "2c5aa487",
+        "113c1a1d",
+        "a3287f96",
+        "d3d0ed7e",
+        "a13bc387",
+        "8558e0de",
+        "de231902",
+        "a0aba26c",
+        "e919e98b",
+        "62fd75b6",
+        "2d317c0d"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "c7e35191",
+        "e282633b",
+        "b2d36211",
+        "f12108f0",
+        "eb5a3e21",
+        "2cafe9e3",
+        "5bec220b",
+        "e73b66f9",
+        "fa4b8826",
+        "e3f2fe37",
+        "38d12026",
+        "4fc5ac64",
+        "9239e58",
+        "2c5aa487",
+        "113c1a1d",
+        "a3287f96",
+        "d3d0ed7e",
+        "a13bc387",
+        "8558e0de",
+        "de231902",
+        "a0aba26c",
+        "e919e98b",
+        "62fd75b6",
+        "2d317c0d"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/designing-or-developing-for-multilingual-sites/en-US.mdx b/packages/quiz/questions/designing-or-developing-for-multilingual-sites/en-US.mdx
new file mode 100644
index 0000000000..09d197cad3
--- /dev/null
+++ b/packages/quiz/questions/designing-or-developing-for-multilingual-sites/en-US.mdx
@@ -0,0 +1,55 @@
+---
+title: What kind of things must you be wary of when designing or developing for multilingual sites?
+---
+
+Designing and developing for multilingual sites is part of internationalization (i18n).
+
+## Search Engine Optimization
+
+- Use the `lang` attribute on the `<html>` tag.
+- Include the locale in the URL (e.g en_US, zh_CN, etc).
+- Webpages should use `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` to tell search engines that there is another page at the specified `href` with the same content but for another language/locale.
+- Use a fallback page for unmatched languages. Use the "x-default" value: `<link rel="alternate" href="url_for_fallback" hreflang="x-default" />`.
+
+## Understanding the difference between locale vs language
+
+Locale settings control how numbers, dates, and times display for your region: which may be a country, or a portion of country or may not even honor country boundaries.
+
+## Language can differ between countries
+
+Certain languages, especially the widely-spoken languages have different "flavors" in different countries (grammar rules, spelling, characters). It's important to differentiate languages for the target country and not assume/force one country's version of a language for all countries which speak the language. Examples:
+
+- `en`: `en-US` (American English), `en-GB` (British English)
+- `zh`: `zh-CN` (Chinese (Simplified)), `zh-TW` (Chinese (Traditional))
+
+## Predict locale but don't restrict
+
+Servers can determine the locale/language of visitors via a combination of HTTP `Accept-Language` headers and IPs. With these, servers can automatically select the best locale for the visitor. However, predictions are not foolproof (especially if visitors are using VPNs) and visitors should still be allowed to change their country/language easily without hassle.
+
+## Consider differences in the length of text in different languages
+
+Some content can be longer when written in another language. Be wary of layout or overflow issues in the design. It's best to avoid designing where the amount of text would make or break a design. Character counts come into play with things like headlines, labels, and buttons. They are less of an issue with free-flowing text such as body text or comments. For example, some languages, such as German and French, tend to use longer words and sentences than English, which can cause layout issues if you do not take this into account.
+
+## Language reading direction
+
+Languages like English and French are written from left-to-right, top-to-bottom. However some languages, such as Hebrew and Arabic, are written from right to left. This can affect the layout of your site and the placement of elements on the page, so you must be careful to design your site in a way that accommodates different text directions.
+
+## Do not concatenate translated strings
+
+Do not do anything like `"The date today is " + date`. It will break in languages with different word order. Use a template string with parameters substitution for each language instead. For example, look at the following two sentences in English and Chinese respectively: `I will travel on {% date %}` and `我会在{% date %}出发`. Note that the position of the variable is different due to grammar rules of the language.
+
+## Formatting dates and currencies
+
+Calendar dates are sometimes presented in different ways. Eg. "May 31, 2012" in the U.S. vs. "31 May 2012" in parts of Europe.
+
+## Do not put text in images
+
+Putting text in raster-based images (e.g. png, gif, jpg, etc.), is not a scalable approach. Placing text in an image is still a popular way to get good-looking, non-system fonts to display on any computer. However, to support image text translation other languages, there needs to be a separate image created for each language which is not a scalable workflow for designers.
+
+## Be mindful of how colors are perceived
+
+Colors are perceived differently across languages and cultures. The design should use color appropriately.
+
+## References
+
+- [The Differences between Locales and Languages](https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages)
diff --git a/packages/quiz/questions/designing-or-developing-for-multilingual-sites/metadata.json b/packages/quiz/questions/designing-or-developing-for-multilingual-sites/metadata.json
new file mode 100644
index 0000000000..f59e69746c
--- /dev/null
+++ b/packages/quiz/questions/designing-or-developing-for-multilingual-sites/metadata.json
@@ -0,0 +1,12 @@
+{
+  "slug": "designing-or-developing-for-multilingual-sites",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["html", "i18n"],
+  "importance": "medium",
+  "difficulty": "hard",
+  "featured": true
+}
diff --git a/packages/quiz/questions/designing-or-developing-for-multilingual-sites/pt-BR.mdx b/packages/quiz/questions/designing-or-developing-for-multilingual-sites/pt-BR.mdx
new file mode 100644
index 0000000000..f37a38c990
--- /dev/null
+++ b/packages/quiz/questions/designing-or-developing-for-multilingual-sites/pt-BR.mdx
@@ -0,0 +1,54 @@
+---
+title: Que tipo de coisas você deve estar atento ao projetar ou desenvolver para sites multilíngues?
+---
+
+Projetar e desenvolver para sites multilíngues faz parte da internacionalização (i18n).
+
+## 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.
+
+## Entendendo a diferença entre localidade e idioma
+
+As configurações regionais controlam como números, datas e horários são exibidos para sua região: que pode ser um país, ou uma porção de país, ou talvez nem mesmo respeite as fronteiras do país.
+
+## O idioma pode diferir entre países
+
+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))
+
+## Prever localidade, mas sem restrições
+
+Os servidores podem determinar a localidade/idioma dos visitantes por meio de uma combinação de cabeçalhos HTTP `Accept-Language` e endereços IP. Com esses, os visitantes podem selecionar automaticamente a melhor configuração regional para o visitante. No entanto, as previsões não são infalíveis (especialmente se os visitantes estiverem usando VPNs) e os visitantes ainda devem ser capazes de mudar seu país/idioma facilmente, sem complicações.
+
+## Considere as diferenças no comprimento do texto em diferentes idiomas
+
+Algum conteúdo pode ser mais longo quando escrito em outro idioma. Esteja atento a problemas de layout ou de overflow no design. É melhor evitar projetar onde a quantidade de texto pode fazer ou quebrar um design. A contagem de caracteres entra em jogo com coisas como manchetes, rótulos e botões. Eles são menos importantes com texto livre, como texto do corpo ou comentários. Por exemplo, alguns idiomas, como alemão e francês, tendem a usar palavras e frases mais longas do que o inglês, o que pode causar problemas de layout se você não levar isso em conta.
+
+## Direção de leitura do idioma
+
+Idiomas como inglês e francês são escritos da esquerda para a direita, de cima para baixo. No entanto, alguns idiomas, como hebraico e árabe, são escritos da direita para a esquerda. Isso pode afetar o layout do seu site e a colocação de elementos na página, então você deve ter cuidado ao projetar seu site de uma maneira que acomode diferentes direções de texto.
+
+## Não concatene strings traduzidas
+
+Não faça nada como `"A data de hoje é " + data`. Isso pode causar problemas em idiomas com ordens de palavras diferentes. Use uma string de modelo com substituição de parâmetros para cada idioma em vez disso. Por exemplo, observe as duas frases a seguir em inglês e chinês, respectivamente: `I will travel on {% date %}` e `{% date %} 我会出发`. Observe que a posição da variável é diferente devido às regras gramaticais do idioma.
+
+## Formatação de datas e moedas
+
+As datas do calendário são apresentadas de formas diferentes às vezes. Ex. "May 31, 2012" nos EUA. vs. "31 May 2012" em partes da Europa.
+
+## Não coloque texto em imagens
+
+Colocar texto em imagens baseadas em raster (por exemplo, png, gif, jpg, etc.) não é uma abordagem escalável. Colocar texto em uma imagem ainda é uma maneira popular de exibir fontes não padronizadas com boa aparência em qualquer computador. No entanto, para dar suporte à tradução de texto de imagem em outros idiomas, é necessário criar uma imagem separada para cada idioma, o que não é um fluxo de trabalho escalonável para os designers.
+
+## Esteja ciente de como as cores são percebidas
+
+As cores são percebidas de maneira diferente em diferentes idiomas e culturas. O design deve usar as cores de forma apropriada.
+
+## Referências
+
+- [As diferenças entre localidades e idiomas](https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages)
diff --git a/packages/quiz/questions/designing-or-developing-for-multilingual-sites/zh-CN.mdx b/packages/quiz/questions/designing-or-developing-for-multilingual-sites/zh-CN.mdx
new file mode 100644
index 0000000000..7fbde00dad
--- /dev/null
+++ b/packages/quiz/questions/designing-or-developing-for-multilingual-sites/zh-CN.mdx
@@ -0,0 +1,55 @@
+---
+title: 设计或开发多语言网站时，您必须注意哪些事项？
+---
+
+设计和开发多语言网站是国际化 (i18n) 的一部分。
+
+## 搜索引擎优化
+
+* 在 `<html>` 标签上使用 `lang` 属性。
+* 在 URL 中包含语言区域设置（例如 en\_US、zh\_CN 等）。
+* 网页应使用 `<link rel="alternate" hreflang="other_locale" href="url_for_other_locale">` 告诉搜索引擎在指定的 `href` 处有另一个页面，其内容相同，但针对另一种语言/语言区域设置。
+* 为不匹配的语言使用后备页面。使用“x-default”值：`<link rel="alternate" href="url_for_fallback" hreflang="x-default" />`。
+
+## 了解语言区域设置与语言的区别
+
+语言区域设置控制数字、日期和时间的显示方式，适用于您的地区：这可能是一个国家/地区，或一个国家/地区的一部分，甚至可能不遵守国家/地区的边界。
+
+## 语言可能因国家/地区而异
+
+某些语言，尤其是使用广泛的语言，在不同的国家/地区有不同的“风格”（语法规则、拼写、字符）。区分目标国家/地区的语言非常重要，不要假设/强制所有使用该语言的国家/地区都使用该语言的一个国家/地区的版本。示例：
+
+* `en`：`en-US`（美式英语）、`en-GB`（英式英语）
+* `zh`：`zh-CN`（简体中文）、`zh-TW`（繁体中文）
+
+## 预测语言区域设置，但不要限制
+
+服务器可以通过 HTTP `Accept-Language` 标头和 IP 地址的组合来确定访问者的语言区域设置/语言。有了这些，服务器可以自动为访问者选择最佳语言区域设置。但是，预测并非万无一失（尤其是当访问者使用 VPN 时），并且应允许访问者轻松更改其国家/地区/语言，而不会遇到麻烦。
+
+## 考虑不同语言的文本长度差异
+
+用另一种语言书写时，某些内容可能会更长。在设计中要注意布局或溢出问题。最好避免设计文本量会破坏设计的场景。字符计数会影响标题、标签和按钮等内容。对于自由流动的文本（如正文或评论），它们的影响较小。例如，某些语言（如德语和法语）往往比英语使用更长的单词和句子，如果不考虑这一点，可能会导致布局问题。
+
+## 语言阅读方向
+
+英语和法语等语言是从左到右、从上到下书写的。但是，希伯来语和阿拉伯语等某些语言是从右到左书写的。这会影响您网站的布局和页面上元素的位置，因此您必须小心设计您的网站，以适应不同的文本方向。
+
+## 不要连接翻译后的字符串
+
+不要做类似 `"今天的日期是 " + date` 的事情。它会在单词顺序不同的语言中中断。改为对每种语言使用带有参数替换的模板字符串。例如，分别查看英语和中文的以下两句话：`I will travel on {% date %}` 和 `我会在{% date %}出发`。请注意，由于该语言的语法规则，变量的位置不同。
+
+## 格式化日期和货币
+
+日期格式有时因地区而异，例如美国习惯写作“月在前”的 "May 31, 2012"，而欧洲一些国家则习惯“日在前”的 "31 May 2012"。
+
+## 不要将文本放在图片中
+
+将文本放在基于栅格的图像（例如 png、gif、jpg 等）中不是一种可扩展的方法。将文本放在图像中仍然是一种在任何计算机上显示美观的非系统字体的常用方法。但是，为了支持图像文本翻译成其他语言，需要为每种语言创建单独的图像，这对于设计师来说不是一个可扩展的工作流程。
+
+## 注意颜色是如何被感知的
+
+颜色在不同的语言和文化中被感知的方式不同。设计应适当使用颜色。
+
+## 参考资料
+
+* [区域设置和语言之间的差异](https://devblogs.microsoft.com/setup/the-differences-between-locales-and-languages)
diff --git a/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/en-US.langnostic.json b/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/en-US.langnostic.json
new file mode 100644
index 0000000000..2fe83cc65c
--- /dev/null
+++ b/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/en-US.langnostic.json
@@ -0,0 +1,40 @@
+{
+  "frontmatter": {
+    "title": "b18dffeb"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "d4b071a5",
+        "2a850f8e",
+        "e25efb62",
+        "f27ecce5",
+        "62cccb59",
+        "c5936478",
+        "151ae001",
+        "aae9915a",
+        "964f80df",
+        "c23c6f0d",
+        "62fd75b6",
+        "2a34d635"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "d4b071a5",
+        "2a850f8e",
+        "e25efb62",
+        "f27ecce5",
+        "62cccb59",
+        "c5936478",
+        "151ae001",
+        "aae9915a",
+        "964f80df",
+        "c23c6f0d",
+        "62fd75b6",
+        "2a34d635"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/en-US.mdx b/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/en-US.mdx
new file mode 100644
index 0000000000..e58002840d
--- /dev/null
+++ b/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/en-US.mdx
@@ -0,0 +1,48 @@
+---
+title: Explain CSS sprites, and how you would implement them on a page or site.
+---
+
+CSS sprites combine multiple images into one single larger image file and uses a combination of CSS `background-image`, `background-position` and `background-size` to select a specific part of the larger image as the desired image.
+
+It used to be a commonly-used technique for icons (e.g. Gmail uses sprites for all their images).
+
+## Advantages
+
+- Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.
+- Advance downloading of assets that won't be downloaded until needed, such as images that only appear upon `:hover` pseudo-states. Blinking wouldn't be seen.
+
+## How to implement
+
+1. Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.
+1. Each image would have a corresponding CSS class with `background-image` and `background-position` properties defined.
+1. To use that image, add the corresponding class to your element.
+
+The generated stylesheet might look something like:
+
+```css
+.icon {
+  background-image: url('https://example.com/images/spritesheet.png');
+  width: 24px;
+  height: 24px;
+}
+
+.icon-cart {
+  background-position: 0 0;
+}
+
+.icon-arrow {
+  background-position: -24px 0;
+}
+```
+
+And can be used in the HTML as such:
+
+```html
+<span class="icon icon-cart"></span>
+
+<span class="icon icon-arrow"></span>
+```
+
+## References
+
+- [Implementing image sprites in CSS - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
diff --git a/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/metadata.json b/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/metadata.json
new file mode 100644
index 0000000000..70fd727d47
--- /dev/null
+++ b/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css", "performance"],
+  "importance": "medium",
+  "difficulty": "hard"
+}
diff --git a/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/pt-BR.mdx b/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/pt-BR.mdx
new file mode 100644
index 0000000000..306456084a
--- /dev/null
+++ b/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/pt-BR.mdx
@@ -0,0 +1,48 @@
+---
+title: Explique os sprites CSS e como você os implementaria em uma página ou site.
+---
+
+Os sprites CSS combinam várias imagens em um único arquivo de imagem maior e usam uma combinação de CSS `background-image`, `background-position` e `background-size` para selecionar uma parte específica da imagem maior como a imagem desejada.
+
+Essa técnica costumava ser comumente usada para ícones (por exemplo, o Gmail usa sprites para todas as suas imagens).
+
+## 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.
+
+## Como implementar
+
+1.  Use um gerador de sprites que agrupa várias imagens em uma só e gere o CSS apropriado para isso.
+2.  Cada imagem teria uma classe CSS correspondente com as propriedades 'background-image' e 'background-position' definidas.
+3.  Para usar essa imagem, adicione a classe correspondente ao seu elemento.
+
+A folha de estilos gerada pode parecer algo como:
+
+```css
+.icon {
+  background-image: url('https://example.com/images/spritesheet.png');
+  width: 24px;
+  height: 24px;
+}
+
+.icon-cart {
+  background-position: 0 0;
+}
+
+.icon-arrow {
+  background-position: -24px 0;
+}
+```
+
+E pode ser usado no HTML como tal:
+
+```html
+<span class="icon icon-cart"></span>
+
+<span class="icon icon-arrow"></span>
+```
+
+## 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)
diff --git a/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/zh-CN.mdx b/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/zh-CN.mdx
new file mode 100644
index 0000000000..d2c2ab9c90
--- /dev/null
+++ b/packages/quiz/questions/explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site/zh-CN.mdx
@@ -0,0 +1,48 @@
+---
+title: 解释 CSS 精灵，以及如何在页面或网站上实现它们。
+---
+
+CSS 精灵将多个图像组合成一个更大的图像文件，并使用 CSS `background-image`、`background-position` 和 `background-size` 的组合来选择更大图像的特定部分作为所需的图像。
+
+它曾经是一种常用的图标技术（例如 Gmail 对其所有图像都使用精灵图）。
+
+## 优点
+
+* 减少多个图像的 HTTP 请求数量（每个精灵表只需要一个请求）。但使用 HTTP2，加载多个图像不再是一个大问题。
+* 预先下载在需要之前不会下载的资产，例如仅在 `:hover` 伪状态下出现的图像。不会看到闪烁。
+
+## 如何实现
+
+1. 使用精灵图生成器将多个图像打包成一个，并为其生成相应的 CSS。
+2. 每个图像都将有一个对应的 CSS 类，其中定义了 `background-image` 和 `background-position` 属性。
+3. 要使用该图像，请将相应的类添加到您的元素中。
+
+生成的样式表可能如下所示：
+
+```css
+.icon {
+  background-image: url('https://example.com/images/spritesheet.png');
+  width: 24px;
+  height: 24px;
+}
+
+.icon-cart {
+  background-position: 0 0;
+}
+
+.icon-arrow {
+  background-position: -24px 0;
+}
+```
+
+并且可以在 HTML 中这样使用：
+
+```html
+<span class="icon icon-cart"></span>
+
+<span class="icon icon-arrow"></span>
+```
+
+## 参考
+
+* [在 CSS 中实现图像精灵 - CSS：层叠样式表 | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS)
diff --git a/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/en-US.langnostic.json b/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/en-US.langnostic.json
new file mode 100644
index 0000000000..c87f0a08ab
--- /dev/null
+++ b/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/en-US.langnostic.json
@@ -0,0 +1,20 @@
+{
+  "frontmatter": {
+    "title": "7b77d48"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "f83c53b8",
+        "17357834"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "f83c53b8",
+        "17357834"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/en-US.mdx b/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/en-US.mdx
new file mode 100644
index 0000000000..0e227e422b
--- /dev/null
+++ b/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/en-US.mdx
@@ -0,0 +1,7 @@
+---
+title: Explain how a browser determines what elements match a CSS selector.
+---
+
+This question is related to the question about [writing efficient CSS](/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css). Browsers match selectors from rightmost (key selector) to the left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.
+
+For example, with a selector `p span`, browsers firstly find all the `<span>` elements and traverse up its parent all the way up to the root to find the `<p>` element. For a particular `<span>`, as soon as it finds a `<p>`, it knows that the `<span>` matches the selector, and can stop traversing its parents.
diff --git a/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/metadata.json b/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/metadata.json
new file mode 100644
index 0000000000..84c7de103a
--- /dev/null
+++ b/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "explain-how-a-browser-determines-what-elements-match-a-css-selector",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["browser", "css"],
+  "importance": "high",
+  "difficulty": "hard"
+}
diff --git a/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/pt-BR.mdx b/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/pt-BR.mdx
new file mode 100644
index 0000000000..4cc66119d5
--- /dev/null
+++ b/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/pt-BR.mdx
@@ -0,0 +1,7 @@
+---
+title: Explique como um navegador determina quais elementos correspondem a um seletor CSS.
+---
+
+Esta pergunta está relacionada com a pergunta sobre [escrever um CSS eficiente](/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css). Os navegadores combinam seletores da direita (seletor-chave) para a esquerda. Os navegadores filtram elementos no DOM de acordo com o seletor-chave e percorrem seus elementos pais para determinar correspondências. Quanto menor o comprimento da cadeia de seletores, mais rápido o navegador pode determinar se aquele elemento corresponde ao seletor.
+
+Por exemplo, com um seletor `p span`, os navegadores primeiro encontram todos os elementos `<span>` e percorrem seus pais até a raiz para encontrar o elemento `<p>`. Para um determinado `<span>`, assim que ele encontrar um `<p>`, ele sabe que o `<span>` corresponde ao seletor e pode parar de atravessar seus pais.
diff --git a/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/zh-CN.mdx b/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/zh-CN.mdx
new file mode 100644
index 0000000000..80ba723815
--- /dev/null
+++ b/packages/quiz/questions/explain-how-a-browser-determines-what-elements-match-a-css-selector/zh-CN.mdx
@@ -0,0 +1,7 @@
+---
+title: 解释浏览器如何确定哪些元素与 CSS 选择器匹配。
+---
+
+这个问题与关于 [编写高效 CSS](/questions/quiz/what-are-some-of-the-gotchas-for-writing-efficient-css) 的问题相关。浏览器从最右侧（关键选择器）到左侧匹配选择器。浏览器根据关键选择器过滤 DOM 中的元素，并向上遍历其父元素以确定匹配项。选择器链的长度越短，浏览器确定该元素是否与选择器匹配的速度就越快。
+
+例如，对于选择器 `p span`，浏览器首先找到所有 `<span>` 元素，并向上遍历其父元素，直到根元素，以找到 `<p>` 元素。对于特定的 `<span>`，一旦找到 `<p>`，它就知道 `<span>` 与选择器匹配，并且可以停止遍历其父元素。
diff --git a/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.langnostic.json b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.langnostic.json
new file mode 100644
index 0000000000..78de2781c0
--- /dev/null
+++ b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.langnostic.json
@@ -0,0 +1,42 @@
+{
+  "frontmatter": {
+    "title": "85f5b685"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "215be92",
+        "7e0d48a8",
+        "8d2822b9",
+        "23fcccfa",
+        "78dda8ab",
+        "734d6fd2",
+        "c551fdfe",
+        "2376421f",
+        "4467442",
+        "dcc0b4a3",
+        "7dbcda",
+        "62fd75b6",
+        "e7cb61ab"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "215be92",
+        "7e0d48a8",
+        "8d2822b9",
+        "23fcccfa",
+        "78dda8ab",
+        "734d6fd2",
+        "c551fdfe",
+        "2376421f",
+        "4467442",
+        "dcc0b4a3",
+        "7dbcda",
+        "62fd75b6",
+        "e7cb61ab"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.mdx b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.mdx
new file mode 100644
index 0000000000..6b96be4ad0
--- /dev/null
+++ b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/en-US.mdx
@@ -0,0 +1,67 @@
+---
+title: Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
+---
+
+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.
+
+The CSS box model is responsible for calculating:
+
+- How much space a block element takes up.
+- Whether or not borders and/or margins overlap, or collapse.
+- A box's dimensions.
+
+## Box Model Rules
+
+- The dimensions of a block element are calculated by `width`, `height`, `padding`s, and `border`s.
+- If no `height` is specified, a block element will be as high as the content it contains, plus `padding` (unless there are floats, for which, see [describe floats and how they work](/questions/quiz/describe-floats-and-how-they-work)).
+- If no `width` is specified, a non-`float`-ed block element will expand to fit the width of its parent minus the `padding`, unless it has a `max-width` property set, in which case it will be no wider than the specified maximum width.
+  - Some block-level elements (e.g. `table`, `figure`, and `input`) have inherent or default width values, and may not expand to fill the full width of their parent container.
+  - Note: `span` is an inline-level element and does not have a default width, so it will not expand to fit.
+- The `height` of an element is calculated by the content's `height`.
+- The `width` of an element is calculated by the content's `width`.
+- By default (`box-sizing: content-box`), `padding`s and `border`s are not part of the `width` and `height` of an element.
+
+Note that `margin`s are not counted towards the actual size of the box. It affects the total space that the box will take up on the page, but only the space outside the box. The box's area stops at the `border` — it does not extend into the `margin`.
+
+## Extra
+
+Look up the `box-sizing` property, which affects how the total heights and widths of elements are calculated.
+
+- `box-sizing: content-box`: This is the default value of `box-sizing` and adheres to the rules above.
+
+  For example:
+
+  ```css
+  .example {
+    box-sizing: content-box;
+    width: 100px;
+    padding: 10px;
+    border: 5px solid black;
+  }
+  ```
+
+  The actual space taken by the `.example` element will be 130px wide (100px width + 10px left padding + 10px right padding + 5px left border + 5px right border).
+
+- `box-sizing: border-box`: The `width` and `height` will include the content, padding and border (but not the margin). This is a much more intuitive way to think about boxes and hence many CSS frameworks (e.g. Bootstrap, Tailwind, Bulma) set `* { box-sizing: border-box; }` globally, so that all elements use such a box model by default. See the [question on `box-sizing: border-box`](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages) for more information.
+
+  For example:
+
+  ```css
+  .example {
+    box-sizing: border-box;
+    width: 100px;
+    padding: 10px;
+    border: 5px solid black;
+  }
+  ```
+
+  The element will still take up 100px on the page, but the content area will be 70px wide (100px - 10px left padding - 10px right padding - 5px left border - 5px right border).
+
+### Border and Margin Behavior
+
+- **Borders do not collapse or overlap** with those of adjacent elements. Each element’s border is rendered individually.
+- **Margins can collapse**, but only vertically and only between block-level elements. Horizontal margins do not collapse. This means that if one block element has a bottom margin and the next has a top margin, only the larger of the two will be used. This behavior is independent of `box-sizing` and is the default in CSS.
+
+## References
+
+- [The box model | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model)
diff --git a/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/metadata.json b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/metadata.json
new file mode 100644
index 0000000000..3141971c0e
--- /dev/null
+++ b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/metadata.json
@@ -0,0 +1,13 @@
+{
+  "slug": "explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models",
+  "languages": [],
+  "companies": ["amazon", "google", "linkedin", "uber"],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "high",
+  "difficulty": "medium",
+  "featured": true,
+  "ranking": 1
+}
diff --git a/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/pt-BR.mdx b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/pt-BR.mdx
new file mode 100644
index 0000000000..15943525e6
--- /dev/null
+++ b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/pt-BR.mdx
@@ -0,0 +1,35 @@
+---
+title: Explique sua compreensão do modelo de caixa e como você diria ao navegador em CSS para renderizar seu layout em diferentes modelos de caixa.
+---
+
+O modelo de caixa CSS descreve as caixas retangulares que são geradas para os elementos na árvore de documentos e dispostas de acordo com o modelo de formatação visual. Cada caixa tem uma área de conteúdo (por exemplo, texto, uma imagem, etc.) e áreas opcionais dos `padding`, `border`, e `margin`.
+
+O modelo da caixa CSS é responsável por calcular:
+
+- O espaço que um elemento de bloco ocupa.
+- Se as bordas e/ou margens se sobrepõem ou se colapsam.
+- Dimensões de uma caixa.
+
+## Regras do Modelo da Caixa
+
+- As dimensões de um elemento de bloco são calculadas por meio de `width`, `height`, `padding`s e `border`s.
+- Se nenhum `height` for especificado, um elemento do bloco será tão alto quanto o conteúdo que ele contém, mais `padding` (a menos que existam floats, veja [descreva flutuantes e como funcionam](/questions/quiz/describe-floats-and-how-they-work)).
+- Se nenhum `width` for especificado, um elemento não-`float` do bloco será expandido para caber a largura do seu pai menos o `padding`, a não ser que tenha uma propriedade definida para 'max-width', neste caso não será maior do que a largura máxima especificada.
+  - Alguns elementos de nível de bloco (por exemplo, `table`, `figure` e `input`) têm valores de largura inerentes ou padrão, e podem não expandir para preencher a largura total do seu recipiente pai.
+  - Nota: `span` é um elemento em nível inline e não tem largura padrão, então ele não se expandirá para se ajustar.
+- O `height` de um elemento é calculado pela `height` do conteúdo.
+- A `width` de um elemento é calculada pela `width` do conteúdo.
+- Por padrão (`box-sizing: content-box`), `padding`s e `border`s não fazem parte da `width` e `height` de um elemento.
+
+Note que `margin`s não são contados para o tamanho real da caixa. Isso afeta o espaço total que a caixa ocupará na página, mas apenas o espaço fora da caixa. A área da caixa para no `border` — ela não se estende até a `margin`.
+
+## Extra
+
+A propriedade box-sizing, que define como as dimensões totais largura e altura de um elemento são calculadas.
+
+- `box-sizing: content-box`: Este é o valor padrão de `box-sizing` e segue as regras mencionadas acima.
+- `box-sizing: border-box`: A `width` e a `height` incluirão o conteúdo, padding e borda, mas não incluirão a margin. Esta é uma maneira muito mais intuitiva de pensar em caixas e, portanto, muitos frameworks CSS (por exemplo, Bootstrap, Tailwind, Bulma) definem `* { box-sizing: border-box; }` globalmente, para que todos os elementos usem esse modelo de caixa por padrão. Veja a [pergunta sobre o 'box-sizing: border-box'](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages) para mais informações.
+
+## Referências
+
+- [O modelo de caixa | MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model)
diff --git a/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.mdx b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.mdx
new file mode 100644
index 0000000000..234a865161
--- /dev/null
+++ b/packages/quiz/questions/explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models/zh-CN.mdx
@@ -0,0 +1,67 @@
+---
+title: 解释你对盒子模型的理解，以及你将如何在 CSS 中告诉浏览器以不同的盒子模型渲染你的布局。
+---
+
+CSS 盒子模型描述了为文档树中的元素生成的矩形框，并根据视觉格式化模型进行布局。每个框都有一个内容区域（例如文本、图像等）和可选的周围 `padding`、`border` 和 `margin` 区域。
+
+CSS 盒子模型负责计算：
+
+* 块级元素占据多少空间。
+* 边框和/或边距是否重叠或折叠。
+* 盒子的尺寸。
+
+## 盒子模型规则
+
+* 块级元素的尺寸由 `width`、`height`、`padding` 和 `border` 计算。
+* 如果未指定 `height`，则块级元素的高度将与其包含的内容一样高，再加上 `padding`（除非有浮动，对于浮动，请参阅 [描述浮动及其工作原理](/questions/quiz/describe-floats-and-how-they-work)）。
+* 如果未指定 `width`，则非 `float`-ed 块级元素将扩展以适合其父元素的宽度减去 `padding`，除非它设置了 `max-width` 属性，在这种情况下，它将不超过指定的最大宽度。
+  * 某些块级元素（例如 `table`、`figure` 和 `input`）具有固有的或默认的宽度值，并且可能不会扩展以填充其父容器的整个宽度。
+  * 注意：`span` 是一个内联级元素，没有默认宽度，因此它不会扩展以适应。
+* 元素的 `height` 由内容的 `height` 计算。
+* 元素的 `width` 由内容的 `width` 计算。
+* 默认情况下 (`box-sizing: content-box`)，`padding` 和 `border` 不属于元素的 `width` 和 `height`。
+
+请注意，`margin` 不计入盒子的实际大小。它会影响盒子在页面上占用的总空间，但仅限于盒子外部的空间。盒子的区域在 `border` 处停止——它不会延伸到 `margin` 中。
+
+## 额外
+
+查找 `box-sizing` 属性，该属性会影响元素的总高度和宽度的计算方式。
+
+* `box-sizing: content-box`: 这是 `box-sizing` 的默认值，遵循上述规则。
+
+  例如：
+
+  ```css
+  .example {
+    box-sizing: content-box;
+    width: 100px;
+    padding: 10px;
+    border: 5px solid black;
+  }
+  ```
+
+  `.example` 元素实际占用的空间将是 130px 宽（100px 宽度 + 10px 左内边距 + 10px 右内边距 + 5px 左边框 + 5px 右边框）。
+
+* `box-sizing: border-box`: `width` 和 `height` 将包括内容、内边距和边框（但不包括外边距）。这是一种更直观的思考盒子模型的方式，因此许多 CSS 框架（例如 Bootstrap、Tailwind、Bulma）全局设置 `* { box-sizing: border-box; }`，以便所有元素默认使用这种盒子模型。有关更多信息，请参阅[关于 `box-sizing: border-box` 的问题](/questions/quiz/what-does-box-sizing-border-box-do-what-are-its-advantages)。
+
+  例如：
+
+  ```css
+  .example {
+    box-sizing: border-box;
+    width: 100px;
+    padding: 10px;
+    border: 5px solid black;
+  }
+  ```
+
+  该元素在页面上仍将占用 100px，但内容区域将为 70px 宽（100px - 10px 左内边距 - 10px 右内边距 - 5px 左边框 - 5px 右边框）。
+
+### 边框和外边距行为
+
+* **边框不会与相邻元素的边框折叠或重叠**。每个元素的边框单独渲染。
+* **外边距可以折叠**，但仅垂直方向，且仅在块级元素之间。水平外边距不会折叠。这意味着如果一个块级元素具有底部外边距，而下一个块级元素具有顶部外边距，则仅使用两者中较大的一个。此行为与 `box-sizing` 无关，并且是 CSS 中的默认行为。
+
+## 参考
+
+* [盒子模型 | MDN](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model#the_standard_css_box_model)
diff --git a/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.langnostic.json b/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.langnostic.json
new file mode 100644
index 0000000000..f660a9d0f5
--- /dev/null
+++ b/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.langnostic.json
@@ -0,0 +1,22 @@
+{
+  "frontmatter": {
+    "title": "b61e890f"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "6ed9e52a",
+        "edba959e",
+        "9112fe9e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "6ed9e52a",
+        "edba959e",
+        "9112fe9e"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.mdx b/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.mdx
new file mode 100644
index 0000000000..5de5d0e8fb
--- /dev/null
+++ b/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/en-US.mdx
@@ -0,0 +1,9 @@
+---
+title: Have you ever used a grid system, and if so, what do you prefer?
+---
+
+Before Flex became popular (around 2014), the `float`-based grid system was the most reliable because it still has the most browser support among the alternative existing systems (flex, grid). Bootstrap was using the `float` approach until Bootstrap 4 which switched to the `flex`-based approach.
+
+Today, `flex` is the recommended approach for building grid systems and has [decent browser support (99.64%)](https://caniuse.com/#search=flex).
+
+For the adventurous, they can look into [CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/), which uses the shiny new `grid` property. Grid is a two-dimensional grid-based layout system as compared to Flexbox, which is one-dimensional.
diff --git a/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/metadata.json b/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/metadata.json
new file mode 100644
index 0000000000..53087e8b13
--- /dev/null
+++ b/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "medium",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/pt-BR.mdx b/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/pt-BR.mdx
new file mode 100644
index 0000000000..d2f40458c4
--- /dev/null
+++ b/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/pt-BR.mdx
@@ -0,0 +1,9 @@
+---
+title: Você já usou um sistema de grid e, se sim, o que você prefere?
+---
+
+Antes de Flex se tornar popular (por volta de 2014), o sistema de grid baseado em `float` era o mais confiável porque ainda tem maior suporte dos navegadores entre os sistemas alternativos (flex, grid). Bootstrap estava usando a abordagem `float` até o Bootstrap 4 que mudou para a abordagem `flex`.
+
+Hoje, `flex` é a abordagem recomendada para construir sistemas de grid e tem [suporte bom para os navegadores (99.64%)](https://caniuse.com/#search=flex).
+
+Para os aventureiros, vocês podem dar uma olhada no [CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid-/), que usa a mais nova propriedade `grid`. Grid é um sistema de layout bidimensional baseado em grade, em comparação com o Flexbox, que é unidimensional.
diff --git a/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/zh-CN.mdx b/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/zh-CN.mdx
new file mode 100644
index 0000000000..782de22410
--- /dev/null
+++ b/packages/quiz/questions/have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer/zh-CN.mdx
@@ -0,0 +1,9 @@
+---
+title: 你是否使用过网格系统，如果使用过，你更喜欢哪种？
+---
+
+在 Flex 变得流行之前（大约在 2014 年），基于 `float` 的网格系统是最可靠的，因为它在现有的替代系统（flex、grid）中仍然拥有最多的浏览器支持。Bootstrap 一直使用 `float` 方法，直到 Bootstrap 4 切换到基于 `flex` 的方法。
+
+如今，`flex` 是构建网格系统的推荐方法，并且具有 [不错的浏览器支持 (99.64%)](https://caniuse.com/#search=flex)。
+
+对于喜欢冒险的人，他们可以研究 [CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/)，它使用全新的 `grid` 属性。Grid 是一个基于二维网格的布局系统，而 Flexbox 是一维的。
diff --git a/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.langnostic.json b/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.langnostic.json
new file mode 100644
index 0000000000..968f393f62
--- /dev/null
+++ b/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.langnostic.json
@@ -0,0 +1,31 @@
+{
+  "frontmatter": {
+    "title": "819eaa97",
+    "subtitle": "71be4a3e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "3e8ef961",
+        "934f6feb",
+        "1200e28",
+        "c042e5ca",
+        "db50a4f8",
+        "f169b34c",
+        "82006716"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "3e8ef961",
+        "934f6feb",
+        "1200e28",
+        "c042e5ca",
+        "db50a4f8",
+        "f169b34c",
+        "82006716"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.mdx b/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.mdx
new file mode 100644
index 0000000000..71db19734c
--- /dev/null
+++ b/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/en-US.mdx
@@ -0,0 +1,32 @@
+---
+title: Have you ever worked with retina graphics?
+subtitle: If so, when and what techniques did you use?
+---
+
+_Retina_ is just a marketing term to refer to high resolution screens with a pixel ratio bigger than 1. The key thing to know is that using a pixel ratio means these displays are emulating a lower resolution screen in order to show elements with the same size. Nowadays we consider all mobile devices _retina_ defacto displays.
+
+Browsers by default render DOM elements according to the device resolution, except for images.
+
+In order to have crisp, good-looking graphics that make the best of retina displays we need to use high resolution images whenever possible. However using always the highest resolution images will have an impact on performance as more bytes will need to be sent over the wire.
+
+To overcome this problem, we can use responsive images, as specified in HTML5. It requires making available different resolution files of the same image to the browser and let it decide which image is best, using the html attribute `srcset` and optionally `sizes`, for instance:
+
+```html
+<div responsive-background-image>
+  <img
+    src="/images/test-1600.jpg"
+    sizes="
+      (min-width: 768px) 50vw,
+      (min-width: 1024px) 66vw,
+      100vw"
+    srcset="
+      /images/test-400.jpg   400w,
+      /images/test-800.jpg   800w,
+      /images/test-1200.jpg 1200w
+    " />
+</div>
+```
+
+It is important to note that browsers which don't support HTML5's `srcset` (i.e. IE11) will ignore it and use `src` instead. If we really need to support IE11 and we want to provide this feature for performance reasons, we can use a JavaScript polyfill, e.g. [Picturefill](https://scottjehl.github.io/picturefill/).
+
+For icons, to use SVGs where possible, as they render very crisply regardless of resolution.
diff --git a/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/metadata.json b/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/metadata.json
new file mode 100644
index 0000000000..071c6b2305
--- /dev/null
+++ b/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "low",
+  "difficulty": "hard"
+}
diff --git a/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/pt-BR.mdx b/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/pt-BR.mdx
new file mode 100644
index 0000000000..32f5eea969
--- /dev/null
+++ b/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/pt-BR.mdx
@@ -0,0 +1,32 @@
+---
+title: Você já trabalhou com gráficos de retina?
+subtitle: Em caso afirmativo, quando e que técnicas utilizou?
+---
+
+_Retina_ é apenas um termo de marketing usado para se referir a telas de alta resolução com uma proporção de pixels maior do que 1. O ponto chave a saber é que o uso de uma taxa de pixels significa que essas telas estão emulando uma tela de resolução mais baixa para mostrar elementos com o mesmo tamanho. Hoje em dia, consideramos todos os dispositivos móveis _retina_ por padrão.
+
+Os navegadores, por padrão, renderizam elementos do DOM de acordo com a resolução do dispositivo, exceto para imagens.
+
+Para ter gráficos nítidos e com boa aparência que aproveitem ao máximo as telas retina, precisamos usar imagens de alta resolução sempre que possível. No entanto, usar sempre imagens com a maior resolução terá um impacto no desempenho, já que mais bytes precisarão ser enviados pela rede.
+
+Para superar esse problema, podemos usar imagens responsivas, como especificado no HTML5. Ele requer disponibilizar diferentes arquivos de resolução da mesma imagem para o navegador e deixá-lo decidir qual imagem é a melhor, usando o atributo html `srcset` e opcionalmente `sizes`, por exemplo:
+
+```html
+<div responsive-background-image>
+  <img
+    src="/images/test-1600.jpg"
+    sizes="
+      (min-width: 768px) 50vw,
+      (min-width: 1024px) 66vw,
+      100vw"
+    srcset="
+      /images/test-400.jpg   400w,
+      /images/test-800.jpg   800w,
+      /images/test-1200.jpg 1200w
+    " />
+</div>
+```
+
+É importante notar que os navegadores que não suportam o `srcset` do HTML5 (ou seja, IE11) vão ignorá-lo e usar o `src` em vez disso. Se realmente precisarmos oferecer suporte ao IE11 e quisermos fornecer esse recurso por motivos de desempenho, podemos usar um polyfill JavaScript, como o [Picturefill](https://scottjehl.github.io/picturefill/).
+
+Para ícones, é recomendado usar SVGs sempre que possível, pois eles são renderizados com muita nitidez independentemente da resolução.
diff --git a/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/zh-CN.mdx b/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/zh-CN.mdx
new file mode 100644
index 0000000000..6572311edb
--- /dev/null
+++ b/packages/quiz/questions/have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use/zh-CN.mdx
@@ -0,0 +1,32 @@
+---
+title: 你是否使用过视网膜图形？
+subtitle: 如果是，你是什么时候以及使用了什么技术？
+---
+
+*Retina* 只是一个营销术语，指的是像素比大于 1 的高分辨率屏幕。需要知道的关键是，使用像素比意味着这些显示器正在模拟较低分辨率的屏幕，以便以相同的大小显示元素。如今，我们认为所有移动设备都是 *retina* 默认显示器。
+
+默认情况下，浏览器会根据设备分辨率渲染 DOM 元素，但图像除外。
+
+为了获得清晰、美观的图形，充分利用视网膜显示器，我们需要尽可能使用高分辨率图像。但是，始终使用最高分辨率的图像会影响性能，因为需要通过网络发送更多字节。
+
+为了克服这个问题，我们可以使用 HTML5 中指定的响应式图像。它要求向浏览器提供相同图像的不同分辨率文件，并让它决定哪张图像最好，使用 html 属性 `srcset` 和可选的 `sizes`，例如：
+
+```html
+<div responsive-background-image>
+  <img
+    src="/images/test-1600.jpg"
+    sizes="
+      (min-width: 768px) 50vw,
+      (min-width: 1024px) 66vw,
+      100vw"
+    srcset="
+      /images/test-400.jpg   400w,
+      /images/test-800.jpg   800w,
+      /images/test-1200.jpg 1200w
+    " />
+</div>
+```
+
+重要的是要注意，不支持 HTML5 的 `srcset` 的浏览器（即 IE11）将忽略它并使用 `src`。如果我们真的需要支持 IE11 并且出于性能原因希望提供此功能，我们可以使用 JavaScript polyfill，例如 [Picturefill](https://scottjehl.github.io/picturefill/)。
+
+对于图标，尽可能使用 SVG，因为它们无论分辨率如何都能非常清晰地渲染。
diff --git a/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.langnostic.json b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.langnostic.json
new file mode 100644
index 0000000000..a0cda8a03e
--- /dev/null
+++ b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.langnostic.json
@@ -0,0 +1,22 @@
+{
+  "frontmatter": {
+    "title": "5de1782d"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "aa260efc",
+        "7f095032",
+        "b75121a7"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "aa260efc",
+        "7f095032",
+        "b75121a7"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.mdx b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.mdx
new file mode 100644
index 0000000000..4b71e4dc2e
--- /dev/null
+++ b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/en-US.mdx
@@ -0,0 +1,9 @@
+---
+title: Have you played around with the new CSS Flexbox or Grid specs?
+---
+
+Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.
+
+Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. famous CSS frameworks like Bootstrap and Bulma are based on Flexbox, and Flexbox is still the tested and proven way to create a variety of layouts.
+
+Grid is meant for two-dimensional layouts, giving you full control over both rows and columns. It offers an intuitive and powerful way to create complex grid-based designs directly in CSS, often with less code and more flexibility than older techniques. Browser support for Grid is now strong across all major modern browsers, making it a solid option for layout design in most projects.
diff --git a/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/metadata.json b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/metadata.json
new file mode 100644
index 0000000000..51c937dd60
--- /dev/null
+++ b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "have-you-played-around-with-the-new-css-flexbox-or-grid-specs",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "high",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/pt-BR.mdx b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/pt-BR.mdx
new file mode 100644
index 0000000000..e9dcf225ef
--- /dev/null
+++ b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/pt-BR.mdx
@@ -0,0 +1,9 @@
+---
+title: Você já experimentou as novas especificações CSS Flexbox ou Grid?
+---
+
+Flexbox é destinado principalmente para layouts unidimensionais, enquanto Grid é destinado para layouts bidimensionais.
+
+Flexbox resolve muitos problemas comuns no CSS, como centralização vertical de elementos dentro de um contêiner, rodapé fixo, etc. Frameworks CSS famosos como Bootstrap e Bulma são baseados em Flexbox, e Flexbox ainda é a maneira testada e comprovada de criar layouts.
+
+Grid é, de longe, a abordagem mais intuitiva para criar layouts baseados em grade, mas o suporte dos navegadores ainda não é tão amplo no momento. Muitos problemas de layout já podem ser resolvidos com Flexbox, então não há uma grande necessidade do Grid.
diff --git a/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.mdx b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.mdx
new file mode 100644
index 0000000000..d11bead5bd
--- /dev/null
+++ b/packages/quiz/questions/have-you-played-around-with-the-new-css-flexbox-or-grid-specs/zh-CN.mdx
@@ -0,0 +1,9 @@
+---
+title: 你玩过新的 CSS Flexbox 或 Grid 规范吗？
+---
+
+Flexbox 主要用于一维布局，而 Grid 用于二维布局。
+
+Flexbox 解决了 CSS 中的许多常见问题，例如在容器内垂直居中元素、粘性页脚等。著名的 CSS 框架，如 Bootstrap 和 Bulma，都基于 Flexbox，而 Flexbox 仍然是创建各种布局的经过测试和验证的方法。
+
+Grid 适用于二维布局，让您可以完全控制行和列。它提供了一种直观而强大的方式，可以直接在 CSS 中创建复杂的基于网格的设计，通常比旧技术使用更少的代码和更大的灵活性。现在，所有主要的现代浏览器都对 Grid 提供了强大的支持，这使其成为大多数项目中布局设计的可靠选择。
diff --git a/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.langnostic.json b/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.langnostic.json
new file mode 100644
index 0000000000..01e4091720
--- /dev/null
+++ b/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.langnostic.json
@@ -0,0 +1,18 @@
+{
+  "frontmatter": {
+    "title": "c3938542"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "d6429d55"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "d6429d55"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.mdx b/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.mdx
new file mode 100644
index 0000000000..00d3dd2413
--- /dev/null
+++ b/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/en-US.mdx
@@ -0,0 +1,5 @@
+---
+title: Have you used or implemented media queries or mobile-specific layouts/CSS?
+---
+
+An example would be transforming a stacked pill navigation into a fixed-bottom tab navigation beyond a certain breakpoint.
diff --git a/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/metadata.json b/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/metadata.json
new file mode 100644
index 0000000000..ff03b3fab0
--- /dev/null
+++ b/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "low",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/pt-BR.mdx b/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/pt-BR.mdx
new file mode 100644
index 0000000000..67537571bc
--- /dev/null
+++ b/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/pt-BR.mdx
@@ -0,0 +1,5 @@
+---
+title: Você usou ou implementou consultas de mídia ou layouts/CSS específicos para dispositivos móveis?
+---
+
+Um exemplo seria transformar uma navegação em forma de pilha em uma navegação de abas fixas na parte inferior, além de um determinado ponto de interrupção.
diff --git a/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/zh-CN.mdx b/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/zh-CN.mdx
new file mode 100644
index 0000000000..4d166f90e2
--- /dev/null
+++ b/packages/quiz/questions/have-you-used-or-implemented-media-queries-or-mobile-specific-layouts-css/zh-CN.mdx
@@ -0,0 +1,5 @@
+---
+title: 你是否使用或实现了媒体查询或移动设备特定的布局/CSS？
+---
+
+一个例子是将堆叠的药丸导航转换为超过某个断点的固定底部标签导航。
diff --git a/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.langnostic.json b/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.langnostic.json
new file mode 100644
index 0000000000..0e40fc8d61
--- /dev/null
+++ b/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.langnostic.json
@@ -0,0 +1,28 @@
+{
+  "frontmatter": {
+    "title": "e4a39b2e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "344c7596",
+        "98fda4d0",
+        "ee3b94b9",
+        "d17d2206",
+        "a7f2e06b",
+        "4d11a8d7"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "344c7596",
+        "98fda4d0",
+        "ee3b94b9",
+        "d17d2206",
+        "a7f2e06b",
+        "4d11a8d7"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.mdx b/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.mdx
new file mode 100644
index 0000000000..8ad2e1ea0a
--- /dev/null
+++ b/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/en-US.mdx
@@ -0,0 +1,16 @@
+---
+title: How do you serve a page with content in multiple languages?
+---
+
+> Assumption: The question is about how to serve a page with content available in multiple languages and the content within the page should be displayed only in one consistent language.
+
+Serving a page in different languages is one of the aspects of internationalization (i18n).
+
+When an HTTP request is made to a server, the requesting user agent usually sends information about language preferences, such as in the `Accept-Language` header. The server can then use this information to return a version of the document in the appropriate language if such an alternative is available. The returned HTML document should also declare the `lang` attribute in the `<html>` tag, such as `<html lang="en">...</html>`.
+
+To let a search engine know that the same content is available in different languages, `<link>` tags with the `rel="alternate"` and `hreflang="..."` attributes should be used. E.g. `<link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />`.
+
+## Rendering
+
+- **Server-side rendering:** The HTML markup will contain string placeholders and content for the specific language will be fetched from configuration in code or a translation service. The server then dynamically generates the HTML page with content in that particular language.
+- **Client-side rendering:** The appropriate locale strings will be fetched and combined with the JavaScript-based views.
diff --git a/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/metadata.json b/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/metadata.json
new file mode 100644
index 0000000000..aeb1509b1f
--- /dev/null
+++ b/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "how-do-you-serve-a-page-with-content-in-multiple-languages",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["html", "i18n"],
+  "importance": "medium",
+  "difficulty": "hard"
+}
diff --git a/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/pt-BR.mdx b/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/pt-BR.mdx
new file mode 100644
index 0000000000..96913c9872
--- /dev/null
+++ b/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/pt-BR.mdx
@@ -0,0 +1,16 @@
+---
+title: Como se serve uma página com conteúdo em vários idiomas?
+---
+
+> Suposição: A pergunta é sobre como servir uma página com conteúdo disponível em vários idiomas e o conteúdo dentro da página deve ser exibido apenas em um idioma consistente.
+
+Servir uma página em diferentes idiomas é um dos aspectos da internacionalização (i18n).
+
+Quando uma solicitação HTTP é feita para um servidor, o agente de usuário que faz a solicitação geralmente envia informações sobre as preferências de idioma, como no cabeçalho `Accept-Language`. O servidor pode então usar essa informação para retornar uma versão do documento no idioma apropriado se tal alternativa estiver disponível. O documento HTML retornado também deve declarar o atributo lang na tag `<html>,` como por exemplo `<html lang="en">...</html>`.
+
+Para permitir que um mecanismo de busca saiba que o mesmo conteúdo está disponível em diferentes idiomas, as tags `<link>` com os atributos `rel="alternate"` e `hreflang="..."` devem ser usadas. Ex. `<link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />`.
+
+## Renderização
+
+- **Renderização no servidor:** O HTML conterá espaços reservados para strings e o conteúdo para o idioma específico será obtido a partir de configurações no código ou de um serviço de tradução. O servidor então gera dinamicamente a página HTML com o conteúdo nesse idioma específico.
+- **Renderização do lado cliente:** As strings de localização apropriadas serão obtidas e combinadas com as visualizações baseadas em JavaScript.
diff --git a/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/zh-CN.mdx b/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/zh-CN.mdx
new file mode 100644
index 0000000000..ee66e13ed6
--- /dev/null
+++ b/packages/quiz/questions/how-do-you-serve-a-page-with-content-in-multiple-languages/zh-CN.mdx
@@ -0,0 +1,16 @@
+---
+title: 如何使用多种语言提供页面内容？
+---
+
+> 假设：这个问题是关于如何提供页面内容，这些内容有多种语言版本，并且页面中的内容应该只以一种一致的语言显示。
+
+以不同语言提供页面是国际化 (i18n) 的一个方面。
+
+当向服务器发出 HTTP 请求时，请求用户代理通常会发送有关语言偏好的信息，例如在 `Accept-Language` 标头中。然后，如果存在这种备选方案，服务器可以使用此信息以适当的语言返回文档版本。返回的 HTML 文档还应在 `<html>` 标签中声明 `lang` 属性，例如 `<html lang="en">...</html>`。
+
+为了让搜索引擎知道相同的内容有不同的语言版本，应该使用带有 `rel="alternate"` 和 `hreflang="..."` 属性的 `<link>` 标签。例如 `<link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />`。
+
+## 渲染
+
+* **服务器端渲染：** HTML 标记将包含字符串占位符，特定语言的内容将从代码配置或翻译服务中获取。然后，服务器动态生成具有该特定语言内容的 HTML 页面。
+* **客户端渲染：** 适当的区域设置字符串将被提取并与基于 JavaScript 的视图相结合。
diff --git a/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.langnostic.json b/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.langnostic.json
new file mode 100644
index 0000000000..049d44ef00
--- /dev/null
+++ b/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.langnostic.json
@@ -0,0 +1,21 @@
+{
+  "frontmatter": {
+    "title": "90c0df6a",
+    "subtitle": "f529aa89"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "d87b3100",
+        "d2b9db62"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "d87b3100",
+        "d2b9db62"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.mdx b/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.mdx
new file mode 100644
index 0000000000..ea9c54a976
--- /dev/null
+++ b/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/en-US.mdx
@@ -0,0 +1,13 @@
+---
+title: How do you serve your pages for feature-constrained browsers?
+subtitle: What techniques/processes do you use?
+---
+
+## Techniques
+
+- Graceful degradation: The practice of building an application for modern browsers while ensuring it remains functional in older browsers.
+- Progressive enhancement: The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
+- Use [caniuse.com](https://caniuse.com/) to check for feature support.
+- Autoprefixer for automatic vendor prefix insertion.
+- Feature detection using [Modernizr](https://modernizr.com/).
+- Use CSS Feature queries via [`@support``](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
diff --git a/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/metadata.json b/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/metadata.json
new file mode 100644
index 0000000000..cace7396c9
--- /dev/null
+++ b/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "medium",
+  "difficulty": "hard"
+}
diff --git a/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/pt-BR.mdx b/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/pt-BR.mdx
new file mode 100644
index 0000000000..df76a1a5f3
--- /dev/null
+++ b/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/pt-BR.mdx
@@ -0,0 +1,13 @@
+---
+title: Como você serve suas páginas para navegadores com limitações de recursos?
+subtitle: Quais técnicas/processos você usa?
+---
+
+## Técnicas
+
+- Degradação graciosa: A prática de construir uma aplicação para navegadores modernos, garantindo que ela permaneça funcional em navegadores mais antigos.
+- Aprimoramento progressivo: A prática de construir uma aplicação para um nível base de experiência do usuário, mas adicionar aprimoramentos funcionais quando um navegador a suporta.
+- Use [caniuse.com](https://caniuse.com/) para verificar o suporte de recursos.
+- Autoprefixer para inserção automática de prefixo do fornecedor (vendor).
+- Detecção de recursos usando [Modernizr](https://modernizr.com/).
+- Use as consultas CSS de recursos via [\`@support\`\`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
diff --git a/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/zh-CN.mdx b/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/zh-CN.mdx
new file mode 100644
index 0000000000..1576ec869e
--- /dev/null
+++ b/packages/quiz/questions/how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniques-processes-do-you-use/zh-CN.mdx
@@ -0,0 +1,13 @@
+---
+title: 您如何为功能受限的浏览器提供页面？
+subtitle: 您使用什么技术/流程？
+---
+
+## 技术
+
+* 优雅降级：为现代浏览器构建应用程序，同时确保它在旧浏览器中仍能运行的实践。
+* 渐进增强：为基本用户体验构建应用程序，但在浏览器支持时添加功能增强的实践。
+* 使用 [caniuse.com](https://caniuse.com/) 检查功能支持。
+* Autoprefixer 用于自动插入供应商前缀。
+* 使用 [Modernizr](https://modernizr.com/) 进行功能检测。
+* 通过 [\`@support\`\`](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) 使用 CSS 功能查询
diff --git a/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/en-US.langnostic.json b/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/en-US.langnostic.json
new file mode 100644
index 0000000000..9d2f05549c
--- /dev/null
+++ b/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/en-US.langnostic.json
@@ -0,0 +1,26 @@
+{
+  "frontmatter": {
+    "title": "1e6d3537"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "40e2f763",
+        "1b0a4829",
+        "734c5228",
+        "818f740a",
+        "3f919b12"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "40e2f763",
+        "1b0a4829",
+        "734c5228",
+        "818f740a",
+        "3f919b12"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/en-US.mdx b/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/en-US.mdx
new file mode 100644
index 0000000000..6288cb667e
--- /dev/null
+++ b/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/en-US.mdx
@@ -0,0 +1,14 @@
+---
+title: How is responsive design different from adaptive design?
+---
+
+Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on.
+
+Responsive design works on the principle of flexibility - a single fluid website that can look good on any device. Responsive websites use media queries, flexible grids, and responsive images to create a user experience that flexes and changes based on a multitude of factors. Like a single ball growing or shrinking to fit through several different hoops.
+
+Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. The site detects the type of device used and delivers the pre-set layout for that device. Instead of a single ball going through several different-sized hoops, you'd have several different balls to use depending on the hoop size.
+
+Both of these methods have some issues that need to be weighed:
+
+- Responsive design can be quite challenging, as you're essentially using a single albeit responsive layout to fit all situations. How to set the media query breakpoints is one such challenge. Do you use standardized breakpoint values? Or, do you use breakpoints that make sense to your particular layout? What if that layout changes?
+- Adaptive design generally requires user agent sniffing, or DPI detection, etc., all of which can prove unreliable.
diff --git a/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/metadata.json b/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/metadata.json
new file mode 100644
index 0000000000..642941d9e1
--- /dev/null
+++ b/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "how-is-responsive-design-different-from-adaptive-design",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "medium",
+  "difficulty": "hard"
+}
diff --git a/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/pt-BR.mdx b/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/pt-BR.mdx
new file mode 100644
index 0000000000..6923b2b9eb
--- /dev/null
+++ b/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/pt-BR.mdx
@@ -0,0 +1,14 @@
+---
+title: Como o design responsivo é diferente do design adaptável?
+---
+
+Tanto o design responsivo quanto o design adaptável tentam otimizar a experiência do usuário em diferentes dispositivos, ajustando-se a diferentes tamanhos de viewport, resoluções, contextos de uso, mecanismos de controle e assim por diante.
+
+O design responsivo funciona com base no princípio da flexibilidade - um único site fluido que pode ter uma boa aparência em qualquer dispositivo. Sites responsivos usam consultas de mídia, grades flexíveis e imagens responsivas para criar uma experiência do usuário que se flexiona e muda com base em uma infinidade de fatores. Como uma bola única que cresce ou diminui para se ajustar a vários aros diferentes.
+
+O design adaptável é mais parecido com a definição moderna de aprimoramento progressivo. Em vez de um design flexível, o design adaptável detecta o dispositivo e outras características e, em seguida, fornece o recurso e layout apropriados com base em um conjunto predefinido de tamanhos de viewport e outras características. O site detecta o tipo de dispositivo utilizado e fornece o layout pré-configurado para esse dispositivo. Em vez de uma única bola passando por aros de tamanhos diferentes, você teria várias bolas diferentes para usar dependendo do tamanho do aro.
+
+Ambos esses métodos têm alguns problemas que precisam ser avaliados:
+
+- O design responsivo pode ser bastante desafiador, pois você está essencialmente usando um único layout, embora responsivo, para se adequar a todas as situações. Definir os pontos de interrupção de consulta de mídia é um desses desafios. Você usa valores padronizados de ponto de quebra? Ou, você utiliza pontos de interrupção que fazem sentido para o layout específico do seu site? E se o layout mudar?
+- O design adaptável geralmente requer a detecção de agente do usuário ou detecção de DPI, etc., todos os quais podem se mostrar pouco confiáveis.
diff --git a/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/zh-CN.mdx b/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/zh-CN.mdx
new file mode 100644
index 0000000000..95f62c01eb
--- /dev/null
+++ b/packages/quiz/questions/how-is-responsive-design-different-from-adaptive-design/zh-CN.mdx
@@ -0,0 +1,14 @@
+---
+title: 响应式设计与自适应设计有何不同？
+---
+
+响应式设计和自适应设计都试图优化不同设备上的用户体验，针对不同的视口大小、分辨率、使用上下文、控制机制等进行调整。
+
+响应式设计基于灵活性原则——一个可以在任何设备上看起来都不错的单一流畅网站。响应式网站使用媒体查询、灵活的网格和响应式图像来创建一种用户体验，这种体验会根据多种因素进行调整和改变。就像一个球变大或变小以适应几个不同的圆环。
+
+自适应设计更像是渐进增强的现代定义。自适应设计不是一个灵活的设计，而是检测设备和其他功能，然后根据预定义的一组视口大小和其他特征提供适当的功能和布局。该网站检测所使用的设备类型，并为该设备提供预设的布局。与其让一个球穿过几个不同大小的圆环，不如根据圆环的大小使用几个不同的球。
+
+这两种方法都有一些需要权衡的问题：
+
+* 响应式设计可能非常具有挑战性，因为您本质上是使用一个单一的（尽管是响应式的）布局来适应所有情况。如何设置媒体查询断点就是一个这样的挑战。您是使用标准化的断点值吗？或者，您是使用对您的特定布局有意义的断点吗？如果该布局发生变化怎么办？
+* 自适应设计通常需要用户代理嗅探或 DPI 检测等，所有这些都可能被证明是不可靠的。
diff --git a/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.langnostic.json b/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.langnostic.json
new file mode 100644
index 0000000000..cd084b0533
--- /dev/null
+++ b/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.langnostic.json
@@ -0,0 +1,18 @@
+{
+  "frontmatter": {
+    "title": "66208b9c"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "a42a31eb"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "a42a31eb"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.mdx b/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.mdx
new file mode 100644
index 0000000000..d4f3d95d48
--- /dev/null
+++ b/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/en-US.mdx
@@ -0,0 +1,9 @@
+---
+title: How would you approach fixing browser-specific styling issues?
+---
+
+- After identifying the issue and the offending browser, use a separate style sheet that only loads when that specific browser is being used. This technique requires server-side rendering though.
+- Use libraries like Bootstrap that already handles these styling issues for you.
+- Use `autoprefixer` to automatically add vendor prefixes to your code.
+- Use Reset CSS or Normalize.css.
+- If you're using PostCSS (or a similar CSS transpilation library), there may be plugins which allow you to opt in to using modern CSS syntax (and even W3C proposals) that will transform those sections of your code into equivalent backward-compatible code that will work in the targets you've used.
diff --git a/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/metadata.json b/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/metadata.json
new file mode 100644
index 0000000000..b9856f8d73
--- /dev/null
+++ b/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "how-would-you-approach-fixing-browser-specific-styling-issues",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "medium",
+  "difficulty": "hard"
+}
diff --git a/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/pt-BR.mdx b/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/pt-BR.mdx
new file mode 100644
index 0000000000..5b7ab3d655
--- /dev/null
+++ b/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/pt-BR.mdx
@@ -0,0 +1,9 @@
+---
+title: Como você abordaria a correção de problemas de estilo específicos de navegador?
+---
+
+- Depois de identificar o problema e o navegador problemático, use uma folha de estilo separada que só é carregada quando aquele navegador específico está sendo usado. Essa técnica requer renderização do lado do servidor.
+- Use bibliotecas como Bootstrap que já lidam com esses problemas de estilo para você.
+- Use o `autoprefixer` para adicionar automaticamente prefixos de vendors ao seu código.
+- Use Reset CSS or Normalize.css.
+- Se você estiver usando o PostCSS (ou uma biblioteca semelhante de transpilação CSS), pode haver plugins que permitam que você opte por usar a sintaxe CSS moderna (e até mesmo as propostas W3C) que transformará aquelas seções do seu código em código compatível com versões anteriores que funcionarão nos destinos que você definiu.
diff --git a/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/zh-CN.mdx b/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/zh-CN.mdx
new file mode 100644
index 0000000000..6d4a55f9b9
--- /dev/null
+++ b/packages/quiz/questions/how-would-you-approach-fixing-browser-specific-styling-issues/zh-CN.mdx
@@ -0,0 +1,9 @@
+---
+title: 您将如何解决特定于浏览器的样式问题？
+---
+
+* 在确定问题和有问题的浏览器后，使用仅在特定浏览器使用时加载的单独样式表。但是，此技术需要服务器端渲染。
+* 使用 Bootstrap 等已经为您处理这些样式问题的库。
+* 使用 `autoprefixer` 自动将供应商前缀添加到您的代码中。
+* 使用 Reset CSS 或 Normalize.css。
+* 如果您正在使用 PostCSS（或类似的 CSS 转译库），可能存在允许您选择使用现代 CSS 语法（甚至 W3C 提案）的插件，这些插件会将代码的这些部分转换为等效的向后兼容代码，这些代码将在您使用的目标中起作用。
diff --git a/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/en-US.langnostic.json b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/en-US.langnostic.json
new file mode 100644
index 0000000000..f078b268ca
--- /dev/null
+++ b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/en-US.langnostic.json
@@ -0,0 +1,18 @@
+{
+  "frontmatter": {
+    "title": "95408e6b"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "b0b74555"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "b0b74555"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/en-US.mdx b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/en-US.mdx
new file mode 100644
index 0000000000..283ab79a9f
--- /dev/null
+++ b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/en-US.mdx
@@ -0,0 +1,12 @@
+---
+title: Consider HTML5 as an open web platform. What are the building blocks of HTML5?
+---
+
+- **Semantics**: HTML tags describe the content.
+- **Styling**: Customizing appearance of HTML tags
+- **Connectivity**: Communicate with the server in new and innovative ways.
+- **Offline and storage**: Allows webpages to store data on the client-side locally and operate offline more efficiently.
+- **Multimedia**: Makes video and audio first-class citizens in the Open Web.
+- **2D/3D graphics and effects**: Allows a much more diverse range of presentation options.
+- **Performance and integration**: Provides greater speed optimization and better usage of computer hardware.
+- **Device access**: Allows for the usage of various input and output devices.
diff --git a/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/metadata.json b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/metadata.json
new file mode 100644
index 0000000000..59abaaf07c
--- /dev/null
+++ b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "html5-as-an-open-web-platform-building-blocks",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["browser", "html"],
+  "importance": "low",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/pt-BR.mdx b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/pt-BR.mdx
new file mode 100644
index 0000000000..dadd83b04b
--- /dev/null
+++ b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/pt-BR.mdx
@@ -0,0 +1,12 @@
+---
+title: Considere HTML5 como uma plataforma web aberta. Quais são os blocos de construção do HTML5?
+---
+
+- **Semantics**: As tags HTML descrevem o conteúdo.
+- **Estilização**: Personalizando a aparência das tags HTML
+- **Conectividade**: Comunique-se com o servidor de maneiras novas e inovadoras.
+- **Offline e armazenamento**: Permite que as páginas da web armazenem dados localmente no lado do cliente e funcionem offline de maneira mais eficiente.
+- **Multimídia**: Torna o vídeo e o áudio cidadãos de primeira classe na Web Aberta.
+- **Gráficos e efeitos 2D/3D**: Permite uma gama muito mais diversa de opções de apresentação.
+- **Desempenho e integração**: Fornece uma otimização de velocidade maior e melhor uso do hardware do computador.
+- **Acesso a dispositivos**: Permite o uso de vários dispositivos de entrada e saída.
diff --git a/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/zh-CN.mdx b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/zh-CN.mdx
new file mode 100644
index 0000000000..aae31f8c94
--- /dev/null
+++ b/packages/quiz/questions/html5-as-an-open-web-platform-building-blocks/zh-CN.mdx
@@ -0,0 +1,12 @@
+---
+title: 将 HTML5 视为一个开放的 Web 平台。HTML5 的构建块是什么？
+---
+
+* **语义**: HTML 标签描述内容。
+* **样式**: 自定义 HTML 标签的外观
+* **连接性**: 以新的和创新的方式与服务器通信。
+* **离线和存储**: 允许网页在客户端本地存储数据，并更有效地离线运行。
+* **多媒体**: 使视频和音频成为开放 Web 中的一流公民。
+* **2D/3D 图形和效果**: 允许更多样化的呈现选项。
+* **性能和集成**: 提供更高的速度优化和更好的计算机硬件使用。
+* **设备访问**: 允许使用各种输入和输出设备。
diff --git a/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.langnostic.json b/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.langnostic.json
new file mode 100644
index 0000000000..30184ebbbb
--- /dev/null
+++ b/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.langnostic.json
@@ -0,0 +1,20 @@
+{
+  "frontmatter": {
+    "title": "d7fcba8e"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "4b8a7a23",
+        "7a700758"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "4b8a7a23",
+        "7a700758"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.mdx b/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.mdx
new file mode 100644
index 0000000000..5fb4e2ec23
--- /dev/null
+++ b/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/en-US.mdx
@@ -0,0 +1,7 @@
+---
+title: Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?
+---
+
+`translate()` is a possible value of the CSS `transform` property. When using `translate()`, the element still occupies its original space (sort of like `position: relative`). But when changing the absolute positioning of elements, the elements are removed from the flow of the page and the positioning of the surrounding elements will be affected. Hence the page layout will have to be recalculated.
+
+Changing `transform` or `opacity` does not trigger browser reflows or repaints but does trigger compositions; On the other hand, changing the absolute positioning triggers `reflow`. `transform` causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence `translate()` is more efficient and will result in shorter paint times for smoother animations.
diff --git a/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/metadata.json b/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/metadata.json
new file mode 100644
index 0000000000..c0adbc6f4f
--- /dev/null
+++ b/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why",
+  "languages": [],
+  "companies": ["bytedance"],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css", "performance"],
+  "importance": "high",
+  "difficulty": "hard"
+}
diff --git a/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/pt-BR.mdx b/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/pt-BR.mdx
new file mode 100644
index 0000000000..08a1440169
--- /dev/null
+++ b/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/pt-BR.mdx
@@ -0,0 +1,7 @@
+---
+title: Existe alguma razão para você querer usar `translate()` ao invés de posicionamento `absolute`, ou vice-versa? E por quê?
+---
+
+`translate()` é um valor possível da propriedade CSS `transform`. Ao usar `traduzir()`, o elemento ainda ocupa seu espaço original (mais ou menos como o `position: relative`). Mas ao mudar o posicionamento absoluto dos elementos, os elementos são removidos do fluxo da página e o posicionamento dos elementos ao redor será afetado. Portanto, o layout da página terá que ser recalculado.
+
+Mudar `transform` ou `opacity` não aciona reflows ou repaints no navegador, mas aciona composições; Por outro lado, mudar o posicionamento absoluto aciona um `reflow`. `transform` faz com que o navegador crie uma camada GPU para o elemento, mas mudar as propriedades de posicionamento absoluto usa a CPU. Portanto, `translate()` é mais eficiente e resultará em tempos de pintura mais curtos para animações mais suaves.
diff --git a/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/zh-CN.mdx b/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/zh-CN.mdx
new file mode 100644
index 0000000000..f7c328f712
--- /dev/null
+++ b/packages/quiz/questions/is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why/zh-CN.mdx
@@ -0,0 +1,7 @@
+---
+title: 你是否想使用 `translate()` 而不是 `absolute` 定位，或者反过来？为什么？
+---
+
+`translate()` 是 CSS `transform` 属性的一个可能值。使用 `translate()` 时，元素仍然占据其原始空间（有点像 `position: relative`）。但是，当更改元素的绝对定位时，元素将从页面流中移除，并且周围元素的位置将受到影响。因此，将不得不重新计算页面布局。
+
+更改 `transform` 或 `opacity` 不会触发浏览器回流或重绘，但会触发合成；另一方面，更改绝对定位会触发“回流”。`transform` 会导致浏览器为该元素创建一个 GPU 层，但更改绝对定位属性会使用 CPU。因此，`translate()` 更有效，并且将导致更短的绘制时间，从而实现更流畅的动画。
diff --git a/packages/quiz/questions/what-are-data-attributes-good-for/en-US.langnostic.json b/packages/quiz/questions/what-are-data-attributes-good-for/en-US.langnostic.json
new file mode 100644
index 0000000000..a1dd4b46de
--- /dev/null
+++ b/packages/quiz/questions/what-are-data-attributes-good-for/en-US.langnostic.json
@@ -0,0 +1,26 @@
+{
+  "frontmatter": {
+    "title": "fa5d95e6"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "1d1cfd18",
+        "47b5823a",
+        "e93b74d5",
+        "44c5cf06",
+        "69c7169d"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "1d1cfd18",
+        "47b5823a",
+        "e93b74d5",
+        "44c5cf06",
+        "69c7169d"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/what-are-data-attributes-good-for/en-US.mdx b/packages/quiz/questions/what-are-data-attributes-good-for/en-US.mdx
new file mode 100644
index 0000000000..14d32c01ba
--- /dev/null
+++ b/packages/quiz/questions/what-are-data-attributes-good-for/en-US.mdx
@@ -0,0 +1,19 @@
+---
+title: What are `data-` attributes good for?
+---
+
+Before JavaScript frameworks became popular, developers used `data-` attributes to store extra data within the DOM itself, without other hacks such as non-standard attributes, extra properties on the DOM. It is intended to store custom data private to the page or application, for when there are no more appropriate attributes or elements.
+
+Another common use case for `data-` attributes is to store information used by third-party libraries or frameworks. For example, the Bootstrap library uses data attributes to cause `<button>`s to trigger actions on a modal elsewhere on the page ([example](https://getbootstrap.com/docs/5.2/components/modal/#via-data-attributes)).
+
+```html
+<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">
+  Launch modal
+</button>
+...
+<div class="modal fade" id="myModal">Modal contents</div>
+```
+
+These days, using `data-` attributes is generally not encouraged. One reason is that users can modify the data attribute easily by using "inspect element" in the browser. The data model is better stored within JavaScript environment and have them kept in-sync with the DOM via virtual DOM reconciliation or two-way data binding possibly through a library or a framework.
+
+However, one perfectly valid use of data attributes, is to add an identifier for **end-to-end** testing frameworks (e.g. Playwright, Puppeteer, Selenium), without adding classes or ID attributes just for tests which are primarily for other purposes. The element needs a way to be selected and something like `data-test-id="my-element"` is a valid way to do so without convoluting the semantic markup otherwise.
diff --git a/packages/quiz/questions/what-are-data-attributes-good-for/metadata.json b/packages/quiz/questions/what-are-data-attributes-good-for/metadata.json
new file mode 100644
index 0000000000..ecab0f5ba0
--- /dev/null
+++ b/packages/quiz/questions/what-are-data-attributes-good-for/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "what-are-data-attributes-good-for",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["web-api", "html", "testing"],
+  "importance": "medium",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/what-are-data-attributes-good-for/pt-BR.mdx b/packages/quiz/questions/what-are-data-attributes-good-for/pt-BR.mdx
new file mode 100644
index 0000000000..167d3ca448
--- /dev/null
+++ b/packages/quiz/questions/what-are-data-attributes-good-for/pt-BR.mdx
@@ -0,0 +1,19 @@
+---
+title: Para que servem os atributos `data-`?
+---
+
+Antes de os frameworks JavaScript se tornarem populares, os desenvolvedores usavam atributos data- para armazenar dados extras dentro do próprio DOM, sem outros hacks, como atributos não padrão e propriedades extras no DOM. São destinados a armazenar dados personalizados privados para a página ou aplicação, quando não há mais atributos ou elementos apropriados para isso.
+
+Outro caso comum de uso dos atributos `data-` é armazenar informações usadas por bibliotecas ou frameworks de terceiros. Por exemplo, a biblioteca Bootstrap usa atributos de dados para causar `<button>`s executar ações em um modal em outro lugar na página ([example](https://getbootstrap.com/docs/5.2/components/modal/#via-data-attributes)).
+
+```html
+<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">
+  Iniciar modal
+</button>
+...
+<div class="modal fade" id="myModal">Conteúdo Modal</div>
+```
+
+Hoje em dia, usar atributos `data-` geralmente não é recomendado. Uma razão é que os usuários podem modificar o atributo dos dados facilmente usando "inspecionar elemento" no navegador. O modelo de dados é melhor armazenado dentro do ambiente JavaScript e mantido em sincronia com o DOM por meio de reconciliação virtual do DOM ou binding de dados bidirecional, possivelmente por meio de uma biblioteca ou framework.
+
+No entanto, um uso perfeitamente válido de atributos de dados é adicionar um identificador para frameworks de teste **end-to-end** (por exemplo, Playwright, Puppeteer, Selenium), sem adicionar classes ou atributos ID apenas para testes que são principalmente para outros fins. O elemento precisa de uma maneira de ser selecionado e algo como `data-test-id="meu-element"` é uma maneira válida de fazê-lo sem convoluir a marcação semântica.
diff --git a/packages/quiz/questions/what-are-data-attributes-good-for/zh-CN.mdx b/packages/quiz/questions/what-are-data-attributes-good-for/zh-CN.mdx
new file mode 100644
index 0000000000..4e34a56786
--- /dev/null
+++ b/packages/quiz/questions/what-are-data-attributes-good-for/zh-CN.mdx
@@ -0,0 +1,19 @@
+---
+title: data- 属性有什么用？
+---
+
+在 JavaScript 框架流行之前，开发人员使用 `data-` 属性在 DOM 本身中存储额外的数据，而无需其他技巧，例如非标准属性、DOM 上的额外属性。它旨在存储页面或应用程序专用的自定义数据，当没有更合适的属性或元素时。
+
+ `data-` 属性的另一个常见用例是存储第三方库或框架使用的信息。例如，Bootstrap 库使用数据属性使 `<button>` 在页面上的其他位置触发模态操作 ([示例](https://getbootstrap.com/docs/5.2/components/modal/#via-data-attributes))。
+
+```html
+<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">
+  Launch modal
+</button>
+...
+<div class="modal fade" id="myModal">Modal contents</div>
+```
+
+如今，通常不鼓励使用 `data-` 属性。原因之一是用户可以通过在浏览器中使用“检查元素”来轻松修改数据属性。数据模型最好存储在 JavaScript 环境中，并通过虚拟 DOM 协调或双向数据绑定（可能通过库或框架）使它们与 DOM 保持同步。
+
+但是，数据属性的一个完全有效的用途是为 **端到端** 测试框架（例如 Playwright、Puppeteer、Selenium）添加一个标识符，而无需仅为主要用于其他目的的测试添加类或 ID 属性。该元素需要一种被选择的方式，而类似 `data-test-id="my-element"` 的方式是一种有效的方式，可以在不使语义标记复杂化的前提下实现。
diff --git a/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.langnostic.json b/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.langnostic.json
new file mode 100644
index 0000000000..fa7ba0bc33
--- /dev/null
+++ b/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.langnostic.json
@@ -0,0 +1,22 @@
+{
+  "frontmatter": {
+    "title": "bd4d46b5"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "6d0b1708",
+        "3962b7fd",
+        "52953744"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "6d0b1708",
+        "3962b7fd",
+        "52953744"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.mdx b/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.mdx
new file mode 100644
index 0000000000..1fb16415a9
--- /dev/null
+++ b/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/en-US.mdx
@@ -0,0 +1,9 @@
+---
+title: What are some of the "gotchas" for writing efficient CSS?
+---
+
+Firstly, understand that browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. Hence avoid key selectors that are tag and universal selectors. They match a large number of elements and browsers will have to do more work in determining if the parents do match.
+
+[BEM (Block Element Modifier)](https://en.bem.info/) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.
+
+Be aware of which CSS properties [trigger](https://csstriggers.com/) reflow, repaint, and compositing. Avoid writing styles that change the layout (trigger reflow) where possible.
diff --git a/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/metadata.json b/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/metadata.json
new file mode 100644
index 0000000000..376f8256fb
--- /dev/null
+++ b/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "what-are-some-of-the-gotchas-for-writing-efficient-css",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "low",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/pt-BR.mdx b/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/pt-BR.mdx
new file mode 100644
index 0000000000..4987d56379
--- /dev/null
+++ b/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/pt-BR.mdx
@@ -0,0 +1,9 @@
+---
+title: Quais são algumas das "armadilhas" para escrever CSS eficiente?
+---
+
+Primeiramente, entenda que os navegadores combinam seletores da direita (seletor-chave) para a esquerda. Os navegadores filtram elementos no DOM de acordo com o seletor-chave e percorrem seus elementos pais para determinar correspondências. Quanto menor o comprimento da cadeia de seletores, mais rápido o navegador pode determinar se aquele elemento corresponde ao seletor. Portanto, evite seletores-chave que sejam seletores de tag ou universais. Eles correspondem a um grande número de elementos e os navegadores terão que fazer mais trabalho para determinar se os pais correspondem.
+
+A metodologia [BEM (Block Element Modifier)](https://bem.info/) recomenda que tudo tenha uma única classe e, quando você precisa de hierarquia, que isso seja incorporado ao nome da classe também, o que naturalmente torna o seletor eficiente e fácil de substituir.
+
+Esteja ciente de quais propriedades CSS [trigger](https://csstriggers.com/) reflow, repaint, e compositing. Evite escrever estilos que alteram o layout (fator reflow) quando possível.
diff --git a/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/zh-CN.mdx b/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/zh-CN.mdx
new file mode 100644
index 0000000000..279014d790
--- /dev/null
+++ b/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/zh-CN.mdx
@@ -0,0 +1,9 @@
+---
+title: 编写高效 CSS 时需要注意哪些“陷阱”？
+---
+
+首先，了解浏览器从最右侧（关键选择器）到左侧匹配选择器。 浏览器根据关键选择器过滤 DOM 中的元素，并遍历其父元素以确定匹配项。 选择器链的长度越短，浏览器确定该元素是否与选择器匹配的速度就越快。 因此，避免使用标签和通用选择器作为关键选择器。 它们匹配大量元素，浏览器将不得不做更多的工作来确定父元素是否匹配。
+
+[BEM (Block Element Modifier)](https://bem.info/) 方法建议所有内容都使用单个类，并且在需要层次结构时，将其也融入到类的名称中，这自然使选择器高效且易于覆盖。
+
+注意哪些 CSS 属性会[触发](https://csstriggers.com/)回流、重绘和合成。 尽可能避免编写更改布局（触发回流）的样式。
diff --git a/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.langnostic.json b/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.langnostic.json
new file mode 100644
index 0000000000..019b178c40
--- /dev/null
+++ b/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.langnostic.json
@@ -0,0 +1,24 @@
+{
+  "frontmatter": {
+    "title": "ef9812e6"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "e25efb62",
+        "c858c20a",
+        "a11dd609",
+        "c7cbc2dc"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "e25efb62",
+        "c858c20a",
+        "a11dd609",
+        "c7cbc2dc"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.mdx b/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.mdx
new file mode 100644
index 0000000000..3a9240b01b
--- /dev/null
+++ b/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/en-US.mdx
@@ -0,0 +1,17 @@
+---
+title: What are the advantages/disadvantages of using CSS preprocessors?
+---
+
+## Advantages
+
+- CSS is made more maintainable.
+- Easier to write nested selectors.
+- Variables for consistent theming. Can share theme files across different projects. This is not necessarily useful with CSS custom properties (frequently called CSS variables).
+- Mixins to generate repeated CSS.
+- Sass and Less have features like loops, lists, and maps can make configuration easier and less verbose.
+- Splitting your code into multiple files during development. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.
+
+## Disadvantages
+
+- Requires tools for preprocessing. Re-compilation time can be slow.
+- Not writing currently and potentially usable CSS. For example, by using something like [postcss-loader](https://github.com/webpack-contrib/postcss-loader) with [webpack](https://webpack.js.org/), you can write potentially future-compatible CSS, allowing you to use things like CSS variables instead of Sass variables. Thus, you're learning new syntax that could pay off if/when they become standardized.
diff --git a/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/metadata.json b/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/metadata.json
new file mode 100644
index 0000000000..a1e33af356
--- /dev/null
+++ b/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "what-are-the-advantages-disadvantages-of-using-css-preprocessors",
+  "languages": [],
+  "companies": ["linkedin"],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "medium",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/pt-BR.mdx b/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/pt-BR.mdx
new file mode 100644
index 0000000000..2d3f559a8e
--- /dev/null
+++ b/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/pt-BR.mdx
@@ -0,0 +1,17 @@
+---
+title: Quais são as vantagens / desvantagens de usar pré-processadores CSS?
+---
+
+## Vantagens
+
+- O CSS é fica mais fácil de ser mantido.
+- Mais fácil escrever seletores aninhados.
+- Variáveis para temas consistentes. Pode-se compartilhar arquivos de tema entre diferentes projetos. Isso não é necessariamente útil com propriedades personalizadas CSS (frequentemente chamadas de variáveis CSS).
+- Mixins para gerar CSS repetido.
+- Sass e Less possuem recursos como loops, listas e mapas que podem tornar a configuração mais fácil e menos verbosa.
+- Dividindo o seu código em vários arquivos durante o desenvolvimento. Os arquivos CSS também podem ser divididos, mas isso exigirá uma solicitação HTTP para baixar cada arquivo CSS.
+
+## Desvantagens
+
+- Requer ferramentas para pré-processamento. Tempo de recompilação pode ser lento.
+- Não escrever CSS atual e potencialmente utilizável. Por exemplo, usando algo como [postcss-loader](https://github.com/postcss/postcss-loader) com o [webpack](https://webpack.js.org/), você pode escrever CSS potencialmente compatível com o futuro, permitindo que você use coisas como variáveis CSS em vez de variáveis Sass. Assim, você está aprendendo uma nova sintaxe que pode pagar se/quando eles se tornarem padronizados.
diff --git a/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/zh-CN.mdx b/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/zh-CN.mdx
new file mode 100644
index 0000000000..97d5d66512
--- /dev/null
+++ b/packages/quiz/questions/what-are-the-advantages-disadvantages-of-using-css-preprocessors/zh-CN.mdx
@@ -0,0 +1,17 @@
+---
+title: 使用 CSS 预处理器的优缺点是什么？
+---
+
+## 优点
+
+* CSS 更易于维护。
+* 更容易编写嵌套选择器。
+* 用于一致主题的变量。可以在不同的项目之间共享主题文件。这不一定对 CSS 自定义属性（通常称为 CSS 变量）有用。
+* Mixins 用于生成重复的 CSS。
+* Sass 和 Less 具有循环、列表和映射等功能，可以使配置更容易且更简洁。
+* 在开发过程中将代码拆分为多个文件。CSS 文件也可以拆分，但这样做需要 HTTP 请求来下载每个 CSS 文件。
+
+## 缺点
+
+* 需要用于预处理的工具。重新编译时间可能很慢。
+* 没有编写当前和潜在可用的 CSS。例如，通过将 [postcss-loader](https://github.com/postcss/postcss-loader) 与 [webpack](https://webpack.js.org/) 结合使用，您可以编写潜在的未来兼容的 CSS，允许您使用 CSS 变量而不是 Sass 变量。因此，您正在学习新的语法，如果/当它们标准化时，可能会有所回报。
diff --git a/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.langnostic.json b/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.langnostic.json
new file mode 100644
index 0000000000..7dfa6b7367
--- /dev/null
+++ b/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.langnostic.json
@@ -0,0 +1,60 @@
+{
+  "frontmatter": {
+    "title": "57d41a39"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "5411a11e",
+        "21c813d1",
+        "e5ceffe8",
+        "67d122bf",
+        "fd063085",
+        "e8b790d1",
+        "6fde64b1",
+        "6c32beca",
+        "97dad212",
+        "90d8282c",
+        "2242fb37",
+        "f6da281a",
+        "db585158",
+        "82c841d8",
+        "671ba0c2",
+        "5d757602",
+        "29499c33",
+        "fb5294a6",
+        "6c5bd951",
+        "9ae97018",
+        "62fd75b6",
+        "b4a5009d"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "5411a11e",
+        "21c813d1",
+        "e5ceffe8",
+        "67d122bf",
+        "fd063085",
+        "e8b790d1",
+        "6fde64b1",
+        "6c32beca",
+        "97dad212",
+        "90d8282c",
+        "2242fb37",
+        "f6da281a",
+        "db585158",
+        "82c841d8",
+        "671ba0c2",
+        "5d757602",
+        "29499c33",
+        "fb5294a6",
+        "6c5bd951",
+        "9ae97018",
+        "62fd75b6",
+        "b4a5009d"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.mdx b/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.mdx
new file mode 100644
index 0000000000..0a36972c05
--- /dev/null
+++ b/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/en-US.mdx
@@ -0,0 +1,74 @@
+---
+title: What are the different ways to visually hide content (and make it available only for screen readers)?
+---
+
+These techniques are related to accessibility (a11y).
+
+## Small/zero size
+
+`width: 1px; height: 1px` and a combination of using CSS clip to make the element take up (barely any) space on the screen at all.
+
+Using `width: 0; height; 0` is not recommended because search engines might penalize this thinking it has a malicious intention, like keyword stuffing.
+
+## Absolute positioning
+
+`position: absolute; left: -99999px` will position an element way outside of the screen. However, as per [WebAIM's article](https://webaim.org/techniques/css/invisiblecontent/):
+
+> Navigable elements, such as links and form controls, should not be hidden off-screen. They would still be navigable by sighted keyboard users, but would not be visible to them, unless they are styled to become visible when they receive keyboard focus.
+
+Use this only when your contents contain only text.
+
+## Text indentation
+
+`text-indent: -9999px`. This only works on text within the `block` elements. Similar to the absolute positioning technique above, focusable elements given this style will still be focusable, causing confusion for sighted users who use keyboard navigation.
+
+## Incorrect ways
+
+The following ways are incorrect because they hide content from the user **AND** screen readers, which is incorrect if the purpose is to expose to screen readers only.
+
+- `display: none`
+- `visibility: hidden`
+- `hidden` attribute
+
+## Techniques in the wild
+
+Ideally, it is recommended to combine the above approaches to make sure it works properly in all browsers.
+
+Instead of implementing your own way to remove an element from the rendering tree and the a11y tree, you are recommended to use one of the following approaches from mature CSS frameworks, which have been battle-tested on many websites.
+
+### Tailwind CSS
+
+```css
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+```
+
+### Bootstrap CSS
+
+```css
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+```
+
+## References
+
+- [CSS in Action - Invisible Content Just for Screen Reader Users](https://webaim.org/techniques/css/invisiblecontent/)
diff --git a/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/metadata.json b/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/metadata.json
new file mode 100644
index 0000000000..5b74999e1a
--- /dev/null
+++ b/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers",
+  "languages": [],
+  "companies": ["bytedance"],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["a11y", "css"],
+  "importance": "medium",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/pt-BR.mdx b/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/pt-BR.mdx
new file mode 100644
index 0000000000..3d438409fe
--- /dev/null
+++ b/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/pt-BR.mdx
@@ -0,0 +1,74 @@
+---
+title: Quais são as diferentes maneiras de esconder conteúdo visualmente (e torná-lo disponível apenas para leitores de tela)?
+---
+
+Essas técnicas estão relacionadas à acessibilidade (a11y).
+
+## Tamanho pequeno/zero
+
+`width: 1px; height: 1px` e uma combinação do uso do clip do CSS para fazer com que o elemento ocupe (quase nenhum) espaço na tela.
+
+Usar a `largura: 0; altura; 0` não é recomendado porque os motores de busca podem penalizar isso, pensando que tem uma intenção maliciosa, como encher de palavras-chave (keyword stuffing).
+
+## Posicionamento absoluto
+
+`position: absolute; left: -99999px` posicionará um elemento fora da tela. No entanto, de acordo com [o artigo da WebAIM](https://webaim.org/techniques/css/invisiblecontent/):
+
+> Elementos navegáveis, como links e controles de formulário, não devem ser escondidos fora da tela. Eles ainda seriam navegáveis por usuários de teclado com visão, mas não seriam visíveis para eles, a menos que sejam estilizados para se tornarem visíveis quando receberem foco do teclado.
+
+Use isso apenas quando seus conteúdos contiverem apenas texto.
+
+## Indentação de texto
+
+`text-indent: -9999px`. Isso só funciona em texto dentro dos elementos `block`. Semelhante à técnica de posicionamento absoluto mencionada acima, os elementos focalizáveis com esse estilo ainda poderão ser focalizados, causando confusão para os usuários com visão que usam a navegação por teclado.
+
+## Formas incorretas
+
+As seguintes maneiras estão incorretas porque escondem o conteúdo do usuário E dos leitores de tela, o que é incorreto se o objetivo é expor apenas aos leitores de tela.
+
+- `display: none`
+- `visibility: hidden`
+- `hidden` attribute
+
+## Técnicas no mundo real
+
+Idealmente, é recomendado combinar as abordagens acima para garantir que funcione corretamente em todos os navegadores.
+
+Em vez de implementar sua própria maneira de remover um elemento da árvore de renderização e da árvore de acessibilidade (a11y), recomenda-se usar uma das seguintes abordagens de frameworks CSS maduros, que foram testadas em muitos sites.
+
+### Tailwind CSS
+
+```css
+.sr-only {
+  posição: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: oculto;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+```
+
+### Bootstrap CSS
+
+```css
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+```
+
+## Referências
+
+- [CSS em Ação - Conteúdo invisível apenas para usuários do Leitor de tela](https://webaim.org/techniques/css/invisiblecontent/)
diff --git a/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/zh-CN.mdx b/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/zh-CN.mdx
new file mode 100644
index 0000000000..4a2e3fb26c
--- /dev/null
+++ b/packages/quiz/questions/what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers/zh-CN.mdx
@@ -0,0 +1,74 @@
+---
+title: 有哪些不同的方法可以隐藏内容（使其仅对屏幕阅读器可用）？
+---
+
+这些技术与可访问性 (a11y) 相关。
+
+## 小/零尺寸
+
+`width: 1px; height: 1px` 并结合使用 CSS clip 使元素在屏幕上几乎不占用任何空间。
+
+不建议使用 `width: 0; height; 0`，因为搜索引擎可能会因此受到惩罚，认为它有恶意意图，例如关键词堆砌。
+
+## 绝对定位
+
+`position: absolute; left: -99999px` 将把元素定位到屏幕之外。但是，根据 [WebAIM 的文章](https://webaim.org/techniques/css/invisiblecontent/)：
+
+> 可导航元素（例如链接和表单控件）不应隐藏在屏幕外。有视觉的用户仍然可以使用键盘导航它们，但除非对它们进行样式设置以使其在接收到键盘焦点时可见，否则他们将看不到它们。
+
+仅当您的内容仅包含文本时才使用此方法。
+
+## 文本缩进
+
+`text-indent: -9999px`。这仅适用于 `block` 元素中的文本。与上面的绝对定位技术类似，给定此样式的可聚焦元素仍然可以聚焦，这会给使用键盘导航的视觉用户造成混淆。
+
+## 错误的方法
+
+以下方法是错误的，因为它们会向用户 **和** 屏幕阅读器隐藏内容，如果目的是仅向屏幕阅读器公开内容，则这是不正确的。
+
+* `display: none`
+* `visibility: hidden`
+* `hidden` 属性
+
+## 实际应用中的技术
+
+理想情况下，建议结合上述方法，以确保它在所有浏览器中都能正常工作。
+
+建议您使用成熟 CSS 框架中的以下方法之一，而不是实现您自己的从渲染树和 a11y 树中删除元素的方法，这些方法已经在许多网站上经过了实战测试。
+
+### Tailwind CSS
+
+```css
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+```
+
+### Bootstrap CSS
+
+```css
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+```
+
+## 参考资料
+
+* [CSS in Action - Invisible Content Just for Screen Reader Users](https://webaim.org/techniques/css/invisiblecontent/)
diff --git a/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.langnostic.json b/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.langnostic.json
new file mode 100644
index 0000000000..174c88fca6
--- /dev/null
+++ b/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.langnostic.json
@@ -0,0 +1,20 @@
+{
+  "frontmatter": {
+    "title": "8701ba06"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "1240899a",
+        "f4f053aa"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "1240899a",
+        "f4f053aa"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.mdx b/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.mdx
new file mode 100644
index 0000000000..63fd5e313e
--- /dev/null
+++ b/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/en-US.mdx
@@ -0,0 +1,9 @@
+---
+title: What are the various clearing techniques and which is appropriate for what context?
+---
+
+- Empty `div` method: `<div style="clear:both;"></div>`.
+- Clearfix method: Refer to the `.clearfix` class above.
+- `overflow: auto` or `overflow: hidden` method: Parent will establish a new block formatting context and expand to contains its floated children.
+
+In large projects, having a utility `.clearfix` class will be very helpful. `overflow: hidden` might clip children if the children is taller than the parent and is not very ideal.
diff --git a/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/metadata.json b/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/metadata.json
new file mode 100644
index 0000000000..c46ecd4849
--- /dev/null
+++ b/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "low",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/pt-BR.mdx b/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/pt-BR.mdx
new file mode 100644
index 0000000000..448dcb5994
--- /dev/null
+++ b/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/pt-BR.mdx
@@ -0,0 +1,9 @@
+---
+title: Quais são as várias técnicas de limpeza e qual é apropriada para qual contexto?
+---
+
+- Método do `div` vazio: `<div style="clear:both;"></div>`.
+- Método de Clearfix: Consulte a classe `.clearfix` mencionada anteriormente.
+- Método `overflow: auto` ou `overflow: hidden`: O pai estabelecerá um novo contexto de formatação em bloco e se expandirá para conter seus filhos flutuantes.
+
+Em projetos grandes, ter uma classe utilitária `.clearfix` será muito útil. `overflow: hidden` pode cortar os filhos se eles forem mais altos que o pai, e isso não é muito ideal.
diff --git a/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/zh-CN.mdx b/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/zh-CN.mdx
new file mode 100644
index 0000000000..47e95c5176
--- /dev/null
+++ b/packages/quiz/questions/what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context/zh-CN.mdx
@@ -0,0 +1,9 @@
+---
+title: 有哪些清除浮动的方法？在什么情况下使用哪种方法？
+---
+
+* 空 `div` 方法：`<div style="clear:both;"></div>`。
+* Clearfix 方法：参考上面的 `.clearfix` 类。
+* `overflow: auto` 或 `overflow: hidden` 方法：父元素将建立一个新的块级格式化上下文，并扩展以包含其浮动的子元素。
+
+在大型项目中，拥有一个实用程序 `.clearfix` 类将非常有帮助。如果子元素比父元素高并且不太理想，`overflow: hidden` 可能会剪切子元素。
diff --git a/packages/quiz/questions/what-does-a-doctype-do/en-US.langnostic.json b/packages/quiz/questions/what-does-a-doctype-do/en-US.langnostic.json
new file mode 100644
index 0000000000..d26853c24e
--- /dev/null
+++ b/packages/quiz/questions/what-does-a-doctype-do/en-US.langnostic.json
@@ -0,0 +1,24 @@
+{
+  "frontmatter": {
+    "title": "b084da42"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "230b5001",
+        "3816d33f",
+        "f27cf58a",
+        "7a77f514"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "230b5001",
+        "3816d33f",
+        "f27cf58a",
+        "7a77f514"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/what-does-a-doctype-do/en-US.mdx b/packages/quiz/questions/what-does-a-doctype-do/en-US.mdx
new file mode 100644
index 0000000000..6bbc3f3287
--- /dev/null
+++ b/packages/quiz/questions/what-does-a-doctype-do/en-US.mdx
@@ -0,0 +1,11 @@
+---
+title: What does a `DOCTYPE` do?
+---
+
+**DOCTYPE** is an abbreviation for **Document Type**. A DOCTYPE is always associated to a **DTD** - for **Document Type Definition**.
+
+A DTD defines how documents of a certain type should be structured (i.e. a `button` can contain a `span` but not a `div`), whereas a DOCTYPE declares what DTD a document _supposedly_ respects (i.e. this document respects the HTML DTD).
+
+For webpages, the DOCTYPE declaration is required. It is used to tell user agents what version of the HTML specifications your document respects. Once a user agent has recognized a correct DOCTYPE, it will trigger the **no-quirks mode** matching this DOCTYPE for reading the document. If a user agent doesn't recognize a correct DOCTYPE, it will trigger the **quirks mode**.
+
+The DOCTYPE declaration for the HTML5 standards is `<!DOCTYPE html>`.
diff --git a/packages/quiz/questions/what-does-a-doctype-do/metadata.json b/packages/quiz/questions/what-does-a-doctype-do/metadata.json
new file mode 100644
index 0000000000..76c20efa90
--- /dev/null
+++ b/packages/quiz/questions/what-does-a-doctype-do/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "what-does-a-doctype-do",
+  "languages": [],
+  "companies": ["apple"],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["html"],
+  "importance": "low",
+  "difficulty": "hard"
+}
diff --git a/packages/quiz/questions/what-does-a-doctype-do/pt-BR.mdx b/packages/quiz/questions/what-does-a-doctype-do/pt-BR.mdx
new file mode 100644
index 0000000000..fa4e8e3861
--- /dev/null
+++ b/packages/quiz/questions/what-does-a-doctype-do/pt-BR.mdx
@@ -0,0 +1,11 @@
+---
+title: O que um `DOCTYPE` faz?
+---
+
+**DOCTYPE** é uma abreviação para **Tipo de Documento**. Um DOCTYPE sempre está associado a um **DTD** - para **Definição de Tipo de Documento**.
+
+Um DTD define como documentos de um determinado tipo devem ser estruturados (por exemplo, um `button` pode conter um `span` mas não uma `div`), ao passo que um DOCTYPE declara o que DTD um documento _supostamente_ respeita (ex.: este documento respeita o HTML DTD).
+
+Para páginas web, a declaração DOCTYPE é necessária. É usado para dizer aos agentes do usuário qual versão das especificações HTML o seu documento respeita. Uma vez que um agente de usuário tenha reconhecido um DOCTYPE correto, ele acionará o **modo no-quirk** correspondente a este DOCTYPE para ler o documento. Se um agente de usuário não reconhecer um DOCTYPE correto, ele ativará o **quirks mode** (modo de peculiaridade).
+
+A declaração DOCTYPE para os padrões HTML5 é `<!DOCTYPE html>`.
diff --git a/packages/quiz/questions/what-does-a-doctype-do/zh-CN.mdx b/packages/quiz/questions/what-does-a-doctype-do/zh-CN.mdx
new file mode 100644
index 0000000000..9bd988855c
--- /dev/null
+++ b/packages/quiz/questions/what-does-a-doctype-do/zh-CN.mdx
@@ -0,0 +1,11 @@
+---
+title: '``DOCTYPE`` 是做什么的？'
+---
+
+**DOCTYPE** 是 **Document Type（文档类型）** 的缩写。DOCTYPE 总是与 **DTD** - **Document Type Definition（文档类型定义）** 相关联。
+
+DTD 定义了特定类型的文档应该如何构建（例如，`button` 可以包含 `span`，但不能包含 `div`），而 DOCTYPE 声明了文档*应该*遵守的 DTD（例如，此文档遵守 HTML DTD）。
+
+对于网页，DOCTYPE 声明是必需的。它用于告诉用户代理您的文档遵守 HTML 规范的哪个版本。一旦用户代理识别出正确的 DOCTYPE，它将触发 **no-quirks mode（非怪异模式）** 来读取文档。如果用户代理无法识别正确的 DOCTYPE，它将触发 **quirks mode（怪异模式）**。
+
+HTML5 标准的 DOCTYPE 声明是 `<!DOCTYPE html>`。
diff --git a/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.langnostic.json b/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.langnostic.json
new file mode 100644
index 0000000000..e4f813d87d
--- /dev/null
+++ b/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.langnostic.json
@@ -0,0 +1,35 @@
+{
+  "frontmatter": {
+    "title": "3df96b96",
+    "subtitle": "8ddc05f6"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "39e759d",
+        "f2ca3944",
+        "1158cc92",
+        "4899e8ee",
+        "1342244a",
+        "e25efb62",
+        "af84bd5d",
+        "62fd75b6",
+        "188daa56"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "39e759d",
+        "f2ca3944",
+        "1158cc92",
+        "4899e8ee",
+        "1342244a",
+        "e25efb62",
+        "af84bd5d",
+        "62fd75b6",
+        "188daa56"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.mdx b/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.mdx
new file mode 100644
index 0000000000..35401ba52f
--- /dev/null
+++ b/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/en-US.mdx
@@ -0,0 +1,27 @@
+---
+title: 'What does `* { box-sizing: border-box; }` do?'
+subtitle: What are its advantages?
+---
+
+`* { box-sizing: border-box; }` makes every element on the page use the `box-sizing: border-box` approach for calculating the elements `height` and `width`.
+
+## What's the difference?
+
+By default, elements have `box-sizing: content-box` applied, and only the content size is being accounted for if an element has `height` and `width` specified. `box-sizing: border-box` changes how the `width` and `height` of elements are being calculated, `border` and `padding` are also being included in the calculation. The `height` of an element is now calculated by the content's `height` + vertical `padding` + vertical `border` width. The `width` of an element is now calculated by the content's `width` + horizontal `padding` + horizontal `border` width.
+
+The following table indicates whether the property is included in the element's calculation of height and width when it has the respective `box-sizing`:
+
+| Property  | `box-sizing: content-box` (default) | `box-sizing: border-box` |
+| --------- | ----------------------------------- | ------------------------ |
+| content   | Yes                                 | Yes                      |
+| `padding` | No                                  | Yes                      |
+| `border`  | No                                  | Yes                      |
+| `margin`  | No                                  | No                       |
+
+## Advantages
+
+Taking into account `padding`s and `border`s as part of the box model resonates better with how designers actually imagine content in grids. This is a much more intuitive way to think about boxes and hence many CSS frameworks set `* { box-sizing: border-box; }` globally, so that all elements use such a box model by default.
+
+## References
+
+- [Box Sizing | CSS-Tricks](https://css-tricks.com/box-sizing/)
diff --git a/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/metadata.json b/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/metadata.json
new file mode 100644
index 0000000000..4e24eea84f
--- /dev/null
+++ b/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/metadata.json
@@ -0,0 +1,13 @@
+{
+  "slug": "what-does-box-sizing-border-box-do-what-are-its-advantages",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "high",
+  "difficulty": "medium",
+  "featured": true,
+  "ranking": 1
+}
diff --git a/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/pt-BR.mdx b/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/pt-BR.mdx
new file mode 100644
index 0000000000..c62921efa0
--- /dev/null
+++ b/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/pt-BR.mdx
@@ -0,0 +1,27 @@
+---
+title: 'O que faz `* { box-sizing: border-box; }`?'
+subtitle: Quais as vantagens?
+---
+
+`* { box-sizing: border-box; }` faz com que cada elemento na página use a abordagem `box: border-box` para calcular os elementos `height` e `width`.
+
+## Qual é a diferença?
+
+Por padrão, os elementos têm `box-sizing: content-box` aplicado, e apenas o tamanho do conteúdo está sendo contabilizado se um elemento tem `height` e `width` especificados. `box-sizing: border-box` altera como a `width` e `height` dos elementos estão sendo calculadas, a `border` e o `padding` também são incluídos no cálculo. O `height` de um elemento é agora calculado pelo conteúdo `height` + `padding` vertical + `border` horizontal. A `width` de um elemento é agora calculada pela `width` do conteúdo + `padding` horizontal + largura da horizontal `border`.
+
+A tabela a seguir indica se a propriedade é incluída ou não no cálculo da altura e largura do elemento quando ele tem o respectivo `box-sizing`:
+
+| Propriedade | `box-sizing: content-box` (padrão) | `box-sizing: border-box` |
+| ----------- | ---------------------------------- | ------------------------ |
+| conteúdo    | Sim                                | Sim                      |
+| `padding`   | Não                                | Sim                      |
+| `border`    | Não                                | Sim                      |
+| `margin`    | Não                                | Não                      |
+
+## Vantagens
+
+Levar em consideração `paddings` e `border`s como parte do modelo de caixa é mais coerente com a forma como os designers imaginam o conteúdo em grades. Essa é uma maneira mais intuitiva de pensar em caixas e, portanto, muitos frameworks CSS definem globalmente `* { box-sizing: border-box; }` para que todos os elementos usem esse modelo de caixa por padrão.
+
+## Referências
+
+- [Box Sizing CSS-Tricks](https://css-tricks.com/box-sizing/)
diff --git a/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/zh-CN.mdx b/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/zh-CN.mdx
new file mode 100644
index 0000000000..88e9d38040
--- /dev/null
+++ b/packages/quiz/questions/what-does-box-sizing-border-box-do-what-are-its-advantages/zh-CN.mdx
@@ -0,0 +1,27 @@
+---
+title: '`* { box-sizing: border-box; }` 是什么作用？'
+subtitle: 它有什么优点？
+---
+
+`* { box-sizing: border-box; }` 使页面上的每个元素都使用 `box-sizing: border-box` 方法来计算元素的 `height` 和 `width`。
+
+## 有什么区别？
+
+默认情况下，元素应用了 `box-sizing: content-box`，如果一个元素指定了 `height` 和 `width`，则只计算内容大小。`box-sizing: border-box` 改变了元素的 `width` 和 `height` 的计算方式，`border` 和 `padding` 也被包含在计算中。现在，一个元素的高度由内容的 `height` + 垂直 `padding` + 垂直 `border` 宽度计算。一个元素的宽度现在由内容的 `width` + 水平 `padding` + 水平 `border` 宽度计算。
+
+下表指示了当属性具有各自的 `box-sizing` 时，该属性是否包含在元素的 height 和 width 的计算中：
+
+| 属性  | `box-sizing: content-box` (默认) | `box-sizing: border-box` |
+| --------- | ----------------------------------- | ------------------------ |
+| content   | 是                                 | 是                      |
+| `padding` | 否                                  | 是                      |
+| `border`  | 否                                  | 是                      |
+| `margin`  | 否                                  | 否                       |
+
+## 优点
+
+将 `padding` 和 `border` 考虑为盒子模型的一部分，这与设计师在网格中实际想象内容的方式更吻合。这是一种更直观的思考盒子的方式，因此许多 CSS 框架全局设置 `* { box-sizing: border-box; }`，以便所有元素默认使用这种盒子模型。
+
+## 参考
+
+* [Box Sizing | CSS-Tricks](https://css-tricks.com/box-sizing/)
diff --git a/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.langnostic.json b/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.langnostic.json
new file mode 100644
index 0000000000..a775c6ef8a
--- /dev/null
+++ b/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.langnostic.json
@@ -0,0 +1,19 @@
+{
+  "frontmatter": {
+    "title": "9378c0ce",
+    "subtitle": "fe8c830"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "48e199bc"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "48e199bc"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.mdx b/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.mdx
new file mode 100644
index 0000000000..eeda5640a9
--- /dev/null
+++ b/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/en-US.mdx
@@ -0,0 +1,8 @@
+---
+title: What existing CSS frameworks have you used locally, or in production?
+subtitle: How would you change/improve them?
+---
+
+- **Bootstrap**: Slow release cycle. Bootstrap 4 has been in alpha for almost 2 years. Future versions of Bootstrap should include a spinner button component, as it is widely used.
+- **Semantic UI**: Source code structure makes theme customization extremely hard to understand. Its unconventional theming system is a pain to customize. Hardcoded config path within the vendor library. Not well-designed for overriding variables unlike in Bootstrap.
+- **Bulma**: A lot of non-semantic and superfluous classes and markup required. Not backward-compatible. Upgrading versions breaks the app in subtle manners.
diff --git a/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/metadata.json b/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/metadata.json
new file mode 100644
index 0000000000..2c5dd71e92
--- /dev/null
+++ b/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "low",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/pt-BR.mdx b/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/pt-BR.mdx
new file mode 100644
index 0000000000..482280c77a
--- /dev/null
+++ b/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/pt-BR.mdx
@@ -0,0 +1,8 @@
+---
+title: Quais frameworks CSS existentes você usou localmente ou em produção?
+subtitle: Como você mudaria/melhoraria eles?
+---
+
+- **Bootstrap**: Ciclo de lançamento lento. Bootstrap 4 está em alfa há quase 2 anos. As versões futuras do Bootstrap deveriam incluir um componente de botão spinner, já que ele é amplamente utilizado.
+- **Semantic UI**:: A estrutura do Código Fonte torna a personalização do tema extremamente difícil de entender. Seu sistema de theming não convencional é difícil de personalizar. Caminho de configuração hardcoded dentro da biblioteca do fornecedor (vendor). Não é bem projetado para substituir variáveis, ao contrário do Bootstrap.
+- **Bulma**: Muitas classes e marcações não semânticas e supérfluas são necessárias. Não é compatível com versões anteriores. Atualizar as versões do Bulma pode quebrar o aplicativo de maneiras sutis.
diff --git a/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/zh-CN.mdx b/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/zh-CN.mdx
new file mode 100644
index 0000000000..08b17c6e31
--- /dev/null
+++ b/packages/quiz/questions/what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them/zh-CN.mdx
@@ -0,0 +1,8 @@
+---
+title: 您在本地或生产中使用了哪些现有的 CSS 框架？
+subtitle: 您将如何更改/改进它们？
+---
+
+* **Bootstrap**: 发布周期慢。Bootstrap 4 已经处于 alpha 状态将近 2 年。Bootstrap 的未来版本应该包含一个微调器按钮组件，因为它被广泛使用。
+* **Semantic UI**: 源代码结构使得主题定制极难理解。它非传统的主题系统难以定制。供应商库中硬编码的配置路径。不像 Bootstrap 那样，不擅长覆盖变量。
+* **Bulma**: 需要大量非语义和多余的类和标记。不向后兼容。升级版本会以微妙的方式破坏应用程序。
diff --git a/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/en-US.langnostic.json b/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/en-US.langnostic.json
new file mode 100644
index 0000000000..549627e490
--- /dev/null
+++ b/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/en-US.langnostic.json
@@ -0,0 +1,38 @@
+{
+  "frontmatter": {
+    "title": "cf4a5fe8"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "fdb40b5e",
+        "c6dfccde",
+        "c177f72d",
+        "62b48aec",
+        "4e19f600",
+        "a43d51f3",
+        "24fe32a8",
+        "901c4fe4",
+        "d7898ccb",
+        "62fd75b6",
+        "97be1c65"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "fdb40b5e",
+        "c6dfccde",
+        "c177f72d",
+        "62b48aec",
+        "4e19f600",
+        "a43d51f3",
+        "24fe32a8",
+        "901c4fe4",
+        "d7898ccb",
+        "62fd75b6",
+        "97be1c65"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/en-US.mdx b/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/en-US.mdx
new file mode 100644
index 0000000000..1db3b2fee0
--- /dev/null
+++ b/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/en-US.mdx
@@ -0,0 +1,28 @@
+---
+title: What is CSS selector specificity and how does it work?
+---
+
+When multiple CSS rules could apply to the same HTML element, the browser needs a way to decide which rule takes precedence. This is determined by the **CSS cascade**, which considers importance, inline styles, selector specificity, and source order. **Selector specificity** is a key part of this process, calculating a weight for each selector.
+
+The browser determines what styles to show on an element depending on the **specificity** of the CSS rules that match it. Specificity is calculated for each rule to decide which one takes precedence.
+
+## How is specificity computed?
+
+The specificity algorithm is basically a three-column value of three categories or weights - ID, CLASS, and TYPE - corresponding to the three types of selectors. The value represents the count of selector components in each weight category and is written as `ID - CLASS - TYPE`. The three columns are created by counting the number of selector components for each selector weight category in the selectors that match the element.
+
+1.  **ID**: This is the count of ID selectors (e.g., `#example`).
+2.  **CLASS**: This is the count of class selectors (e.g., `.my-class`), attribute selectors (e.g., `[type="radio"]`), and pseudo-classes (e.g., `:hover`).
+3.  **TYPE**: This is the count of type selectors (element names, e.g., `h1`, `div`) and pseudo-elements (e.g., `::before`).
+
+When comparing selectors to determine which has the highest specificity, look from left to right (ID, then CLASS, then TYPE), and compare the highest value in each column. A value in the ID column will override values in the CLASS and TYPE columns, no matter how large they are. Similarly, a value in the CLASS column overrides any value in the TYPE column. For example, a specificity of `1,0,0` (one ID) is greater than `0,10,10` (ten classes and ten types).
+
+It's important to remember that specificity is part of the broader **CSS cascade**. Declarations marked `!important` have the highest precedence, followed by inline styles (using the `style` attribute). Selector specificity comes next.
+
+In cases of **equal specificity** among competing rules (that aren't inline or `!important`), the rule that appears **last** in the CSS source order is the one that counts and will be applied.
+
+It's a better practice to write CSS rules with low specificity so that they can be easily overridden if necessary. When writing CSS for UI component libraries, it is important that styles have low specificities so that users of the library can customize them without needing overly complex selectors or resorting to `!important`.
+
+## References
+
+- [Specificity | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity)
+- [Specificity | web.dev](https://web.dev/learn/css/specificity)
diff --git a/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/metadata.json b/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/metadata.json
new file mode 100644
index 0000000000..2f3c6154a4
--- /dev/null
+++ b/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/metadata.json
@@ -0,0 +1,13 @@
+{
+  "slug": "what-is-css-selector-specificity-and-how-does-it-work",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "high",
+  "difficulty": "hard",
+  "featured": false,
+  "ranking": 1
+}
diff --git a/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/pt-BR.mdx b/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/pt-BR.mdx
new file mode 100644
index 0000000000..a46f00d244
--- /dev/null
+++ b/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/pt-BR.mdx
@@ -0,0 +1,16 @@
+---
+title: O que é a especificidade do seletor CSS e como funciona?
+---
+
+O navegador determina quais estilos mostrar em um elemento, dependendo da especificidade das regras de CSS. Assumimos que o navegador já determinou as regras que correspondem a um elemento específico. Entre as regras correspondentes, a especificidade, quatro valores separados, `a, b, c, d` são calculados para cada regra com base nos seguintes:
+
+1.  `a` é se estilos inline estão sendo usados. Se a declaração de propriedade é um estilo embutido no elemento, `a` é 1, senão 0.
+2.  `b` é o número de seletores de ID.
+3.  `c` é o número de classes, atributos e seletores de pseudo-classes.
+4.  `d` é o número de tags e seletores de pseudo-elementos.
+
+A especificidade resultante não é uma única pontuação numérica, mas uma matriz de valores que podem ser comparados por coluna. Ao comparar seletores para determinar qual tem a especificidade mais alta, olhar da esquerda para a direita e comparar o maior valor em cada coluna. Portanto, um valor na coluna 'b' irá substituir valores em colunas 'c' e 'd', não importa o que eles possam ser. Como tal, especificidade de `0, 1, 0, 0` seria maior que um de `0, 0, 10, 10`.
+
+Nos casos de igual especificidade: a última regra é a que conta. Se você escreveu a mesma regra em sua folha de estilo (independente da sua folha interna ou externa) duas vezes, então a regra inferior na sua folha de estilo está mais próxima do elemento a ser estilizado, Considera-se mais específico, pelo que será aplicado.
+
+É uma melhor prática escrever regras de CSS com baixa especificidade, para que elas possam ser facilmente substituídas se necessário. Ao escrever o código da biblioteca de componentes CSS UI, é importante que eles tenham poucas especificidades, para que os usuários da biblioteca possam substituí-las sem usar regras CSS muito complicadas só para aumentar a especificidade ou recorrer a `!important`.
diff --git a/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/zh-CN.mdx b/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/zh-CN.mdx
new file mode 100644
index 0000000000..5beee49f11
--- /dev/null
+++ b/packages/quiz/questions/what-is-css-selector-specificity-and-how-does-it-work/zh-CN.mdx
@@ -0,0 +1,28 @@
+---
+title: 什么是 CSS 选择器特异性以及它是如何工作的？
+---
+
+当多个 CSS 规则可能应用于同一个 HTML 元素时，浏览器需要一种方法来决定哪个规则优先。这由 **CSS 级联** 决定，它考虑了重要性、内联样式、选择器特异性和源顺序。**选择器特异性** 是此过程的关键部分，它为每个选择器计算一个权重。
+
+浏览器根据与元素匹配的 CSS 规则的 **特异性** 来确定要在元素上显示哪些样式。为每个规则计算特异性，以决定哪个规则优先。
+
+## 如何计算特异性？
+
+特异性算法基本上是一个由三个类别或权重组成的三个值 - ID、CLASS 和 TYPE - 对应于三种类型的选择器。该值表示每个权重类别中选择器组件的计数，并写为 `ID - CLASS - TYPE`。这三列是通过计算与元素匹配的选择器中每个选择器权重类别的选择器组件的数量来创建的。
+
+1. **ID**：这是 ID 选择器的计数（例如，`#example`）。
+2. **CLASS**：这是类选择器的计数（例如，`.my-class`）、属性选择器（例如，`[type="radio"]`）和伪类（例如，`:hover`）。
+3. **TYPE**：这是类型选择器（元素名称，例如，`h1`、`div`）和伪元素（例如，`::before`）的计数。
+
+当比较选择器以确定哪个选择器具有最高的特异性时，从左到右（ID，然后是 CLASS，然后是 TYPE）查看，并比较每列中的最高值。ID 列中的值将覆盖 CLASS 和 TYPE 列中的值，无论它们有多大。类似地，CLASS 列中的值将覆盖 TYPE 列中的任何值。例如，`1,0,0`（一个 ID）的特异性大于 `0,10,10`（十个类和十个类型）。
+
+重要的是要记住，特异性是更广泛的 **CSS 级联** 的一部分。标记为 `!important` 的声明具有最高的优先级，其次是内联样式（使用 `style` 属性）。选择器特异性紧随其后。
+
+在竞争规则之间 **特异性相等** 的情况下（不是内联或 `!important`），CSS 源顺序中 **最后** 出现的规则是有效的规则，并将被应用。
+
+最好编写具有低特异性的 CSS 规则，以便在必要时可以轻松覆盖它们。在为 UI 组件库编写 CSS 时，重要的是样式具有较低的特异性，以便库的用户可以自定义它们，而无需使用过于复杂的选择器或求助于 `!important`。
+
+## 参考
+
+* [特异性 | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity)
+* [特异性 | web.dev](https://web.dev/learn/css/specificity)
diff --git a/packages/quiz/questions/what-is-progressive-rendering/en-US.langnostic.json b/packages/quiz/questions/what-is-progressive-rendering/en-US.langnostic.json
new file mode 100644
index 0000000000..1a05864a5c
--- /dev/null
+++ b/packages/quiz/questions/what-is-progressive-rendering/en-US.langnostic.json
@@ -0,0 +1,38 @@
+{
+  "frontmatter": {
+    "title": "d2a919be"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "ac6f3ea5",
+        "156da47f",
+        "1a8643df",
+        "7fa34f07",
+        "d6a883cf",
+        "eecd3ae",
+        "6ea9ce95",
+        "ded85000",
+        "c85f64a5",
+        "443b8932",
+        "5a4df967"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "ac6f3ea5",
+        "156da47f",
+        "1a8643df",
+        "7fa34f07",
+        "d6a883cf",
+        "eecd3ae",
+        "6ea9ce95",
+        "ded85000",
+        "c85f64a5",
+        "443b8932",
+        "5a4df967"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/what-is-progressive-rendering/en-US.mdx b/packages/quiz/questions/what-is-progressive-rendering/en-US.mdx
new file mode 100644
index 0000000000..38df95e747
--- /dev/null
+++ b/packages/quiz/questions/what-is-progressive-rendering/en-US.mdx
@@ -0,0 +1,28 @@
+---
+title: What is progressive rendering?
+---
+
+Progressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.
+
+It used to be much more prevalent in the days before broadband internet but it is still used in modern development as mobile data connections are becoming increasingly popular (and unreliable)!
+
+## Lazy loading of images
+
+Images on the page are not loaded all at once. The image is only loaded when the user scrolls into/near the part of the page that displays the image.
+
+- `<img loading="lazy">` is a modern way to instruct the browser to defer loading of images that are outside of the screen until the user scrolls near them.
+- Use JavaScript to watch the scroll position and load the image when the image is about to come on screen (by comparing the coordinates of the image with the scroll position).
+
+## Prioritizing visible content (or above-the-fold rendering)
+
+Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the `DOMContentLoaded`/`load` event to load in other resources and content.
+
+## Async HTML fragments
+
+Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found [here](https://innovation.ebayinc.com/stories/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
+
+## Other modern techniques
+
+- [Progressive hydration](https://www.patterns.dev/posts/progressive-hydration/)
+- [Streaming server-side rendering](https://www.patterns.dev/posts/server-side-rendering/)
+- [Selective hydration](https://www.patterns.dev/posts/react-selective-hydration/)
diff --git a/packages/quiz/questions/what-is-progressive-rendering/metadata.json b/packages/quiz/questions/what-is-progressive-rendering/metadata.json
new file mode 100644
index 0000000000..76c4507e2e
--- /dev/null
+++ b/packages/quiz/questions/what-is-progressive-rendering/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "what-is-progressive-rendering",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["html"],
+  "importance": "medium",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/what-is-progressive-rendering/pt-BR.mdx b/packages/quiz/questions/what-is-progressive-rendering/pt-BR.mdx
new file mode 100644
index 0000000000..b0c098bdb9
--- /dev/null
+++ b/packages/quiz/questions/what-is-progressive-rendering/pt-BR.mdx
@@ -0,0 +1,28 @@
+---
+title: O que é a renderização progressiva?
+---
+
+Renderização progressiva é o nome dado às técnicas utilizadas para melhorar o desempenho de uma página da web (em particular, melhorar o tempo percebido de carregamento) para exibir o conteúdo o mais rápido possível.
+
+Essa prática costumava ser muito mais comum nos dias anteriores à internet banda larga, mas ainda é utilizada no desenvolvimento moderno, pois as conexões de dados móveis estão se tornando cada vez mais populares (e inconstantes)!
+
+## Carregamento preguiçoso (lazy loading) de imagens
+
+As imagens na página não são carregadas todas de uma vez. A imagem só é carregada quando o usuário rola para perto/na parte da página que exibe a imagem.
+
+- `<img loading="lazy">` é uma maneira moderna de ensinar o navegador a adiar o carregamento de imagens que estão fora da tela até que o usuário rola perto delas.
+- Use JavaScript para ver a posição da rolagem e carregar a imagem quando a imagem estiver prestes a vir na tela (comparando as coordenadas da imagem com a posição da rolagem).
+
+## Priorizar conteúdo visível (ou renderização acima)
+
+Inclua apenas o mínimo de CSS/conteúdo/scripts necessário para a quantidade de páginas que seriam renderizadas no navegador do usuário primeiro para exibir o mais rápido possível, você pode então usar scripts adiados ou ouvir o evento `DOMContentLoaded`/`load` para carregar em outros recursos e conteúdo.
+
+## Fragmentos HTML assíncronos
+
+Liberando partes do HTML para o navegador, à medida que a página é construída no back-end. Mais detalhes sobre a técnica podem ser encontrados [here](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
+
+## Outras técnicas modernas
+
+- [Progressive hydration](https://www.patterns.dev/posts/progressive-hydration/)
+- [Streaming server-side rendering](https://www.patterns.dev/posts/server-side-rendering/)
+- [Hydratação seletiva](https://www.patterns.dev/posts/react-selective-hydration/)
diff --git a/packages/quiz/questions/what-is-progressive-rendering/zh-CN.mdx b/packages/quiz/questions/what-is-progressive-rendering/zh-CN.mdx
new file mode 100644
index 0000000000..a945b84147
--- /dev/null
+++ b/packages/quiz/questions/what-is-progressive-rendering/zh-CN.mdx
@@ -0,0 +1,28 @@
+---
+title: 什么是渐进式渲染？
+---
+
+渐进式渲染是指用于提高网页性能（特别是提高感知加载时间）的技术，以便尽快渲染内容以供显示。
+
+在宽带互联网普及之前的时代，它曾经非常流行，但它仍然被用于现代开发中，因为移动数据连接变得越来越受欢迎（而且不可靠）！
+
+## 图片的懒加载
+
+页面上的图片不会一次性全部加载。只有当用户滚动到显示图片的页面部分或附近时，才会加载图片。
+
+*  `<img loading="lazy">` 是一种现代方式，指示浏览器推迟加载屏幕外的图像，直到用户滚动到它们附近。
+*  使用 JavaScript 监视滚动位置，并在图像即将出现在屏幕上时加载图像（通过将图像的坐标与滚动位置进行比较）。
+
+## 优先显示可见内容（或首屏渲染）
+
+仅包含用户浏览器中将首先渲染的页面所需的最少 CSS/内容/脚本，以便尽快显示，然后您可以使用延迟脚本或监听 `DOMContentLoaded`/`load` 事件来加载其他资源和内容。
+
+## 异步 HTML 片段
+
+在后端构建页面时，将 HTML 的部分内容刷新到浏览器。有关该技术的更多详细信息，请参见 [此处](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)。
+
+## 其他现代技术
+
+*  [渐进式水合](https://www.patterns.dev/posts/progressive-hydration/)
+*  [流式服务器端渲染](https://www.patterns.dev/posts/server-side-rendering/)
+*  [选择性水合](https://www.patterns.dev/posts/react-selective-hydration/)
diff --git a/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.langnostic.json b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.langnostic.json
new file mode 100644
index 0000000000..0a03bb6bcf
--- /dev/null
+++ b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.langnostic.json
@@ -0,0 +1,26 @@
+{
+  "frontmatter": {
+    "title": "fb553a70"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "e6cf9807",
+        "c47a94da",
+        "6404ba72",
+        "62fd75b6",
+        "a128788"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "e6cf9807",
+        "c47a94da",
+        "6404ba72",
+        "62fd75b6",
+        "a128788"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.mdx b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.mdx
new file mode 100644
index 0000000000..6fa3b0ae5c
--- /dev/null
+++ b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/en-US.mdx
@@ -0,0 +1,24 @@
+---
+title: What is the CSS `display` property and can you give a few examples of its use?
+---
+
+The common values for the `display` property: `none`, `block`, `inline`, `inline-block`, `flex`, `grid`, `table`, `table-row`, `table-cell`, `list-item`.
+
+| `display` Value | Description |
+| :-- | :-- |
+| `none` | Does not display an element (the element no longer affects the layout of the document). All child element are also no longer displayed. The document is rendered as if the element did not exist in the document tree. |
+| `block` | The element consumes the whole line in the block direction (which is usually horizontal). |
+| `inline` | Elements can be laid out beside each other. |
+| `inline-block` | Similar to `inline`, but allows some `block` properties like setting `width` and `height`. |
+| `flex` | Behaves as a block-level `flex` container, which can be manipulated using flexbox model. |
+| `grid` | Behaves as a block-level `grid` container using grid layout. |
+| `table` | Behaves like the `<table>` element. |
+| `table-row` | Behaves like the `<tr>` element. |
+| `table-cell` | Behaves like the `<td>` element. |
+| `list-item` | Behaves like a `<li>` element which allows it to define `list-style-type` and `list-style-position`. |
+
+For a complete list of values for the `display` property, refer to [CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display).
+
+## References
+
+- [CSS Display | MDN](https://developer.mozilla.org/docs/Web/CSS/display)
diff --git a/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/metadata.json b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/metadata.json
new file mode 100644
index 0000000000..54a05ab72a
--- /dev/null
+++ b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/metadata.json
@@ -0,0 +1,13 @@
+{
+  "slug": "what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "high",
+  "difficulty": "medium",
+  "featured": false,
+  "ranking": 1
+}
diff --git a/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/pt-BR.mdx b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/pt-BR.mdx
new file mode 100644
index 0000000000..af16ccf51a
--- /dev/null
+++ b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/pt-BR.mdx
@@ -0,0 +1,24 @@
+---
+title: Qual é a propriedade CSS `display` e você pode dar alguns exemplos de seu uso?
+---
+
+Os valores comuns para a propriedade `display`: `none`, `block`, `inline`, `inline-block`, `flex`, `grid`, `tabela`, `table-row`, `table-cell`, `table-cell`, `list-item`.
+
+| Valor `display` | Descrição |
+| :-- | :-- |
+| `none` | Não exibe um elemento (o elemento não afeta mais o layout do documento). Todos os elementos filhos também não são mais exibidos. O documento é renderizado como se o elemento não existisse na árvore do documento. |
+| `block` | O elemento consome toda a linha na direção do bloco (que geralmente é horizontal). |
+| `inline` | Elementos podem ser dispostos lado a lado. |
+| `inline-block` | Semelhante ao `inline`, mas permite algumas propriedades `block` como configuração de `width` e `height`. |
+| `flex` | Comporta-se como um contêiner `flex` de nível de bloco, que pode ser manipulado usando o modelo de flexbox. |
+| `grid` | Comporta-se como um contêiner `grid` de nível de bloco usando o layout de grade. |
+| `table` | Comporta-se como o elemento `<table>`. |
+| `table-row` | Comporta-se como o elemento `<tr>`. |
+| `table-cell` | Comporta-se como o elemento `<td>`. |
+| `list-item` | Comporta-se como um elemento `<li>` que lhe permite definir `list-style-type` e `list-style-position`. |
+
+Para uma lista completa de valores para a propriedade `display`, consulte [CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display).
+
+## Referências
+
+- [CSS Display | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
diff --git a/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/zh-CN.mdx b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/zh-CN.mdx
new file mode 100644
index 0000000000..f4b8ef4aed
--- /dev/null
+++ b/packages/quiz/questions/what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use/zh-CN.mdx
@@ -0,0 +1,24 @@
+---
+title: 什么是 CSS `display` 属性？你能举几个例子说明它的用法吗？
+---
+
+`display` 属性的常见值：`none`、`block`、`inline`、`inline-block`、`flex`、`grid`、`table`、`table-row`、`table-cell`、`list-item`。
+
+| `display` 值 | 描述 |
+| :-- | :-- |
+| `none` | 不显示元素（该元素不再影响文档的布局）。所有子元素也都不再显示。文档的呈现就像该元素不存在于文档树中一样。 |
+| `block` | 元素在块方向上占用整行（通常是水平方向）。 |
+| `inline` | 元素可以并排排列。 |
+| `inline-block` | 类似于 `inline`，但允许一些 `block` 属性，如设置 `width` 和 `height`。 |
+| `flex` | 表现为块级 `flex` 容器，可以使用 flexbox 模型进行操作。 |
+| `grid` | 使用网格布局表现为块级 `grid` 容器。 |
+| `table` | 表现得像 `<table>` 元素。 |
+| `table-row` | 表现得像 `<tr>` 元素。 |
+| `table-cell` | 表现得像 `<td>` 元素。 |
+| `list-item` | 表现得像 `<li>` 元素，允许它定义 `list-style-type` 和 `list-style-position`。 |
+
+有关 `display` 属性的完整值列表，请参阅 [CSS Display | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display)。
+
+## 参考资料
+
+* [CSS Display | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display)
diff --git a/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.langnostic.json b/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.langnostic.json
new file mode 100644
index 0000000000..b214e6f776
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.langnostic.json
@@ -0,0 +1,20 @@
+{
+  "frontmatter": {
+    "title": "cbb0cfec"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "cc707b76",
+        "689ae43d"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "cc707b76",
+        "689ae43d"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.mdx b/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.mdx
new file mode 100644
index 0000000000..b12eb408b9
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/en-US.mdx
@@ -0,0 +1,11 @@
+---
+title: What's the difference between a `relative`, `fixed`, `absolute`, `sticky` and `static`-ally positioned element?
+---
+
+A positioned element is an element whose computed `position` property is either `relative`, `absolute`, `fixed` or `sticky`.
+
+- `static`: The default position; the element will flow into the page as it normally would. The `top`, `right`, `bottom`, `left` and `z-index` properties do not apply.
+- `relative`: The element's position is adjusted relative to itself, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).
+- `absolute`: The element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely-positioned boxes can have margins, and they do not collapse with any other margins. These elements do not affect the position of other elements.
+- `fixed`: The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn't move when scrolled.
+- `sticky`: Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as `relative` positioned until it crosses a specified threshold, at which point it is treated as `fixed`-positioned.
diff --git a/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/metadata.json b/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/metadata.json
new file mode 100644
index 0000000000..a1f26d1800
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/metadata.json
@@ -0,0 +1,13 @@
+{
+  "slug": "whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element",
+  "languages": [],
+  "companies": ["rippling", "salesforce", "amazon"],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "high",
+  "difficulty": "medium",
+  "featured": false,
+  "ranking": 2
+}
diff --git a/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/pt-BR.mdx b/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/pt-BR.mdx
new file mode 100644
index 0000000000..06ba5b0146
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/pt-BR.mdx
@@ -0,0 +1,11 @@
+---
+title: Qual é a diferença entre um elemento com posicionamento `relative`, `fixed`, `absolute` e `static`?
+---
+
+Um elemento posicionado é um elemento cuja propriedade `position` calculada é `relative`, `absolute`, `fixed` ou `sticky` calculada.
+
+- `static`: A posição padrão; o elemento irá fluir na página como normalmente faria. As propriedades `top`, `right`, `bottom`, `left` e`z-index` não se aplicam.
+- `relative`: A posição do elemento é ajustada em relação a si mesma, sem mudar de layout (deixando assim uma lacuna para o elemento onde ele teria sido se não tivesse sido posicionado).
+- `absolute`: O elemento é removido do fluxo da página e posicionado em uma posição específica em relação ao ancestral posicionado mais próximo se houver, ou em relação ao bloco inicial de contêiner. Caixas posicionadas absolutamente podem ter margens e não se sobrepõem com outras margens. Esses elementos não afetam a posição de outros elementos.
+- `fixed`: O elemento é removido do fluxo da página e posicionado em uma posição específica em relação à janela de visualização e não se move quando a página é rolada.
+- `sticky`: O posicionamento "sticky" é um híbrido de posicionamento relativo e fixo. O elemento é tratado como posicionado `relative` até atravessar um limite específico, momento em que é tratado como posicionado `fixed`.
diff --git a/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/zh-CN.mdx b/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/zh-CN.mdx
new file mode 100644
index 0000000000..d9ca5693a9
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element/zh-CN.mdx
@@ -0,0 +1,11 @@
+---
+title: relative、fixed、absolute、sticky 和 static 定位元素有什么区别？
+---
+
+定位元素是指其计算后的 `position` 属性为 `relative`、`absolute`、`fixed` 或 `sticky` 的元素。
+
+* `static`：默认位置；元素将像通常一样流入页面。`top`、`right`、`bottom`、`left` 和 `z-index` 属性不适用。
+* `relative`：元素的位置相对于自身进行调整，不改变布局（因此为元素留出一个间隙，就像它没有被定位一样）。
+* `absolute`：元素从页面流中移除，并相对于其最近的已定位祖先（如果有）或相对于初始包含块定位。绝对定位的框可以有边距，并且它们不会与其他任何边距合并。这些元素不会影响其他元素的位置。
+* `fixed`：元素从页面流中移除，并相对于视口中的指定位置定位，并且在滚动时不会移动。
+* `sticky`：粘性定位是相对定位和固定定位的混合。该元素被视为 `relative` 定位，直到它穿过指定的阈值，此时它被视为 `fixed` 定位。
diff --git a/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.langnostic.json b/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.langnostic.json
new file mode 100644
index 0000000000..7a5fa6df52
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.langnostic.json
@@ -0,0 +1,36 @@
+{
+  "frontmatter": {
+    "title": "622c1b58"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "71c158ca",
+        "d2039713",
+        "ab2a2521",
+        "258f0726",
+        "b3768262",
+        "243ad0bc",
+        "3ce12b5",
+        "36b82d13",
+        "65f32524",
+        "3c61b97e"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "71c158ca",
+        "d2039713",
+        "ab2a2521",
+        "258f0726",
+        "b3768262",
+        "243ad0bc",
+        "3ce12b5",
+        "36b82d13",
+        "65f32524",
+        "3c61b97e"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.mdx b/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.mdx
new file mode 100644
index 0000000000..804f4f13a5
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/en-US.mdx
@@ -0,0 +1,33 @@
+---
+title: What's the difference between feature detection, feature inference, and using the UA string?
+---
+
+## Feature Detection
+
+Feature detection involves working out whether a browser supports a certain block of code, and running different code depending on whether it does (or doesn't), so that the browser can always provide a working experience rather crashing/erroring in some browsers. For example:
+
+```js
+if ('geolocation' in navigator) {
+  // Can use navigator.geolocation
+} else {
+  // Handle lack of feature
+}
+```
+
+[Modernizr](https://modernizr.com/) is a great library to handle feature detection.
+
+## Feature Inference
+
+Feature inference checks for a feature just like feature detection, but uses another function because it assumes it will also exist, e.g.:
+
+```js
+if (document.getElementsByTagName) {
+  element = document.getElementById(id);
+}
+```
+
+This is not really recommended. Feature detection is more foolproof.
+
+## UA String
+
+This is a browser-reported string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. It can be accessed via `navigator.userAgent`. However, the string is tricky to parse and can be spoofed. For example, Chrome reports both as Chrome and Safari. So to detect Safari you have to check for the Safari string and the absence of the Chrome string. Avoid this method.
diff --git a/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/metadata.json b/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/metadata.json
new file mode 100644
index 0000000000..698eeaaca5
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["browser", "javascript"],
+  "importance": "medium",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/pt-BR.mdx b/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/pt-BR.mdx
new file mode 100644
index 0000000000..7dd048a5a6
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/pt-BR.mdx
@@ -0,0 +1,33 @@
+---
+title: Qual é a diferença entre detecção de recurso, inferência de recurso e uso da string UA?
+---
+
+## Detecção de Recursos
+
+A detecção de recursos envolve descobrir se um navegador suporta um determinado bloco de código e executar códigos diferentes dependendo se ele suporta (ou não), para que o navegador possa sempre fornecer uma experiência funcional em vez de travar/gerar erros em alguns navegadores. Por exemplo:
+
+```js
+if ('geolocation' in navigator) {
+  // Pode usar navigator.geolocation
+} else {
+  // Manipula a falta de recurso
+}
+```
+
+[Modernizr](https://modernizr.com/) é uma ótima biblioteca para lidar com a detecção de recursos.
+
+## Inferência de Recursos
+
+A inferência de recursos verifica a existência de um recurso assim como a detecção de recursos, mas usa outra função porque presume que ela também existirá, por exemplo:
+
+```js
+if (document.getElementsByTagName) {
+  element = document.getElementById(id);
+}
+```
+
+Isso não é muito recomendado. A detecção de recursos é mais à prova de falhas.
+
+## UA String
+
+Esta é uma string relatada pelo navegador que permite aos pares do protocolo de rede identificar o tipo de aplicativo, sistema operacional, fornecedor de software ou versão do software do agente de usuário solicitante. Ele pode ser acessado via `navigator.userAgent`. No entanto, a string é difícil de analisar e pode ser falsificada. Por exemplo, o Chrome informa como Chrome e Safari. Então, para detectar o Safari, você precisa verificar a presença da string do Safari e a ausência da string do Chrome. Evite este método.
diff --git a/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/zh-CN.mdx b/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/zh-CN.mdx
new file mode 100644
index 0000000000..b3c8509fb0
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string/zh-CN.mdx
@@ -0,0 +1,33 @@
+---
+title: 特性检测、特性推断和使用 UA 字符串有什么区别？
+---
+
+## 特性检测
+
+特性检测涉及确定浏览器是否支持某段代码，并根据是否支持运行不同的代码（或不支持），以便浏览器始终提供工作体验，而不是在某些浏览器中崩溃/出错。例如：
+
+```js
+if ('geolocation' in navigator) {
+  // 可以使用 navigator.geolocation
+} else {
+  // 处理缺少的功能
+}
+```
+
+[Modernizr](https://modernizr.com/) 是一个处理特性检测的好库。
+
+## 特性推断
+
+特性推断像特性检测一样检查特性，但使用另一个函数，因为它假定它也将存在，例如：
+
+```js
+if (document.getElementsByTagName) {
+  element = document.getElementById(id);
+}
+```
+
+这真的不推荐。特性检测更万无一失。
+
+## UA 字符串
+
+这是一个浏览器报告的字符串，它允许网络协议对等方识别请求软件用户代理的应用程序类型、操作系统、软件供应商或软件版本。可以通过 `navigator.userAgent` 访问它。但是，该字符串很难解析，并且可以被欺骗。例如，Chrome 报告为 Chrome 和 Safari。因此，要检测 Safari，您必须检查 Safari 字符串以及 Chrome 字符串的缺失。避免使用此方法。
diff --git a/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/en-US.langnostic.json b/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/en-US.langnostic.json
new file mode 100644
index 0000000000..b5793c1c30
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/en-US.langnostic.json
@@ -0,0 +1,18 @@
+{
+  "frontmatter": {
+    "title": "1c18cbf"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "9a602624"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "9a602624"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/en-US.mdx b/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/en-US.mdx
new file mode 100644
index 0000000000..0a7efa0acb
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/en-US.mdx
@@ -0,0 +1,13 @@
+---
+title: What's the difference between `block`, `inline`, and `inline-block`?
+---
+
+| Property | `block` | `inline-block` | `inline` |
+| --- | --- | --- | --- |
+| Size | Fills up the width of its parent container. | Depends on content. | Depends on content. |
+| Positioning | Start on a new line and tolerates no HTML elements next to it (except when you add `float`) | Flows along with other content and allows other elements beside it. | Flows along with other content and allows other elements beside it. |
+| Can specify `width` and `height` | Yes | Yes | No. Will ignore if being set. |
+| Can be aligned with `vertical-align` | No | Yes | Yes |
+| Margins and paddings | All sides respected. | All sides respected. | Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on `line-height`, even though the `border` and `padding` appear visually around the content. |
+| Float | - | - | Becomes like a `block` element where you can set vertical margins and paddings. |
+| Use Cases | Layout elements like `<div>`, `<p>`, `<section>`. | Used for buttons, images, and form fields that need custom sizes but stay in line with text. | Links `<a>`, text formatting `<span>`, text styling - bold `<b>`, italics `<i>`.|
diff --git a/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/metadata.json b/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/metadata.json
new file mode 100644
index 0000000000..5a526d0cf5
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/metadata.json
@@ -0,0 +1,12 @@
+{
+  "slug": "whats-the-difference-between-inline-and-inline-block",
+  "languages": [],
+  "companies": ["amazon"],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "high",
+  "difficulty": "easy",
+  "ranking": 2
+}
diff --git a/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/pt-BR.mdx b/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/pt-BR.mdx
new file mode 100644
index 0000000000..0af2e20bfc
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/pt-BR.mdx
@@ -0,0 +1,14 @@
+---
+title: Qual é a diferença entre `inline` e `inline-block`?
+---
+
+Vamos também comparar com `display: block` para completar.
+
+| Propriedade | `block` | `inline-block` | `inline` |
+| --- | --- | --- | --- |
+| Tamanho | Preenche a largura do contêiner pai. | Depende do conteúdo. | Depende do conteúdo. |
+| Posicionamento | Comece em uma nova linha e não tolera nenhum elemento HTML ao lado (exceto quando você adiciona `float`) | Flui juntamente com outros conteúdos e permite que outros elementos fiquem ao seu lado. | Flui juntamente com outros conteúdos e permite que outros elementos fiquem ao seu lado. |
+| Pode especificar 'largura' e 'altura' | Sim | Sim | Não. Ignorará se já estiver definido. |
+| Pode ser alinhado com `vertical-align` | Não | Sim | Sim |
+| Margem e Alinhamento | Todos os lados são respeitados. | Todos os lados são respeitados. | Apenas os lados horizontais respeitados. Os lados verticais, se especificados, não afetam o layout. O espaço vertical que ocupa depende do `line-height`, mesmo que o `border` e `padding` apareçam visualmente em torno do conteúdo. |
+| Float | - | - | Torna-se como um elemento `block` onde você pode definir margens e preenchimentos verticais. |
diff --git a/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/zh-CN.mdx b/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/zh-CN.mdx
new file mode 100644
index 0000000000..ca3cd3aa36
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-inline-and-inline-block/zh-CN.mdx
@@ -0,0 +1,13 @@
+---
+title: block、inline 和 inline-block 有什么区别？
+---
+
+| 属性 | `block` | `inline-block` | `inline` |
+| --- | --- | --- | --- |
+| 尺寸 | 填充父容器的宽度。 | 取决于内容。 | 取决于内容。 |
+| 定位 | 从新行开始，并且不允许在其旁边有其他 HTML 元素（除非你添加 `float`） | 与其他内容一起流动，并允许其他元素在其旁边。 | 与其他内容一起流动，并允许其他元素在其旁边。 |
+| 可以指定 `width` 和 `height` | 是 | 是 | 否。如果设置将被忽略。 |
+| 可以使用 `vertical-align` 对齐 | 否 | 是 | 是 |
+| 边距和内边距 | 所有边都受尊重。 | 所有边都受尊重。 | 仅水平边受尊重。垂直边（如果指定）不影响布局。它占用的垂直空间取决于 `line-height`，即使 `border` 和 `padding` 在内容周围可见。 |
+| Float | - | - | 变成类似 `block` 元素，你可以在其中设置垂直边距和内边距。 |
+| 用例 | 布局元素，如 `<div>`、`<p>`、`<section>`。 | 用于需要自定义大小但与文本保持一致的按钮、图像和表单字段。 | 链接 `<a>`、文本格式 `<span>`、文本样式 - 粗体 `<b>`、斜体 `<i>`。|
diff --git a/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.langnostic.json b/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.langnostic.json
new file mode 100644
index 0000000000..45820e3917
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.langnostic.json
@@ -0,0 +1,23 @@
+{
+  "frontmatter": {
+    "title": "f322ed4c",
+    "subtitle": "13ddc6f"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "ed40a328",
+        "cf166ea3",
+        "1346294f"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "ed40a328",
+        "cf166ea3",
+        "1346294f"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.mdx b/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.mdx
new file mode 100644
index 0000000000..64fd1788bf
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/en-US.mdx
@@ -0,0 +1,13 @@
+---
+title: What's the difference between "resetting" and "normalizing" CSS?
+subtitle: Which would you choose, and why?
+---
+
+| Term | Definition |
+| --- | --- |
+| **Resetting** | Resetting is meant to strip all default browser styling on elements. For e.g. `margin`s, `padding`s, `font-size`s of all elements are reset to be the same. You will have to redeclare styling for common typographic elements. |
+| **Normalizing** | Normalizing preserves useful default styles rather than "unstyling" everything. It also corrects bugs for common browser dependencies. |
+
+## Which to choose and why?
+
+Choose resetting when you need to have a very customized or unconventional site design such that you need to do a lot of your own styling and do not need any default styling to be preserved.
diff --git a/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/metadata.json b/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/metadata.json
new file mode 100644
index 0000000000..89b9469165
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["css"],
+  "importance": "medium",
+  "difficulty": "hard"
+}
diff --git a/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/pt-BR.mdx b/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/pt-BR.mdx
new file mode 100644
index 0000000000..9fafa61912
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/pt-BR.mdx
@@ -0,0 +1,13 @@
+---
+title: Qual é a diferença entre "resetting" e "normalizing" CSS?
+subtitle: Qual você escolheria e por quê?
+---
+
+| Termo | Definição |
+| --- | --- |
+| **Resetando** | Redefinir tem o objetivo de remover toda a formatação padrão do navegador nos elementos. Por exemplo, as `margin`s, `padding`s, `font-size`s de todos os elementos são redefinidos para serem iguais. Você terá que redeclarar o estilo para elementos tipográficos comuns. |
+| **Normalizando** | Normalizar preserva estilos padrão úteis ao invés de tirar o estilo de tudo. Ele também corrige bugs de dependências comuns do navegador. |
+
+## Qual escolher e por quê?
+
+Escolha redefinir quando precisar de um design de site muito personalizado ou não convencional, de tal forma que você precise fazer muitos estilos próprios e não precise preservar nenhum estilo padrão.
diff --git a/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/zh-CN.mdx b/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/zh-CN.mdx
new file mode 100644
index 0000000000..823fa6d74e
--- /dev/null
+++ b/packages/quiz/questions/whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why/zh-CN.mdx
@@ -0,0 +1,13 @@
+---
+title: “重置”和“标准化”CSS有什么区别？
+subtitle: 你会选择哪一个，为什么？
+---
+
+| 术语 | 定义 |
+| --- | --- |
+| **重置** | 重置旨在去除元素上的所有默认浏览器样式。例如，所有元素的 `margin`、`padding`、`font-size` 都被重置为相同。您将不得不为常见的排版元素重新声明样式。 |
+| **标准化** | 标准化保留有用的默认样式，而不是“取消样式”所有内容。它还纠正了常见浏览器依赖项的错误。 |
+
+## 选择哪个以及为什么？
+
+当您需要一个非常定制或非传统的网站设计时，请选择重置，这样您就需要做很多自己的样式，并且不需要保留任何默认样式。
diff --git a/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.langnostic.json b/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.langnostic.json
new file mode 100644
index 0000000000..36aa514931
--- /dev/null
+++ b/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.langnostic.json
@@ -0,0 +1,21 @@
+{
+  "frontmatter": {
+    "title": "72f11122",
+    "subtitle": "9425f14a"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "569e6ee9",
+        "3d0dd108"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "569e6ee9",
+        "3d0dd108"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.mdx b/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.mdx
new file mode 100644
index 0000000000..d9a19283d1
--- /dev/null
+++ b/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/en-US.mdx
@@ -0,0 +1,8 @@
+---
+title: Why would you use something like the `load` event?
+subtitle: Does this event have disadvantages? Do you know any alternatives, and why would you use those?
+---
+
+The `load` event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
+
+The DOM event `DOMContentLoaded` will fire after the DOM for the page has been constructed, but do not wait for other resources to finish loading. This is preferred in certain cases when you do not need the full page to be loaded before initializing.
diff --git a/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/metadata.json b/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/metadata.json
new file mode 100644
index 0000000000..a2e96876ad
--- /dev/null
+++ b/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["web-api", "javascript"],
+  "importance": "low",
+  "difficulty": "hard"
+}
diff --git a/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/pt-BR.mdx b/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/pt-BR.mdx
new file mode 100644
index 0000000000..bb4b7cbefe
--- /dev/null
+++ b/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/pt-BR.mdx
@@ -0,0 +1,8 @@
+---
+title: Por que você usaria algo como o evento `load`?
+subtitle: Este evento tem desvantagens? Você conhece alguma alternativa, e por que as usaria?
+---
+
+O evento `load` dispara no final do processo de carregamento de documentos. Neste ponto, todos os objetos no documento estão no DOM, e todas as imagens, scripts, links e sub-frames terminaram de carregar.
+
+O evento DOM `DOMContentLoaded` será acionado após o DOM para a página ser construído, mas não espere outros recursos terminarem de carregar. Isso é preferível em certos casos quando você não precisa que a página inteira seja carregada antes de inicializar.
diff --git a/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/zh-CN.mdx b/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/zh-CN.mdx
new file mode 100644
index 0000000000..8adea66a33
--- /dev/null
+++ b/packages/quiz/questions/why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those/zh-CN.mdx
@@ -0,0 +1,8 @@
+---
+title: 你为什么会使用类似 `load` 事件的东西？
+subtitle: 此事件有缺点吗？ 你知道任何替代方案，以及你为什么会使用这些替代方案？
+---
+
+`load` 事件在文档加载过程结束时触发。 此时，文档中的所有对象都在 DOM 中，并且所有图像、脚本、链接和子框架都已完成加载。
+
+DOM 事件 `DOMContentLoaded` 将在页面 DOM 构建完成后触发，但不会等待其他资源完成加载。 在某些情况下，当您不需要在初始化之前加载整个页面时，这是首选。
diff --git a/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.langnostic.json b/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.langnostic.json
new file mode 100644
index 0000000000..9a8dc89d44
--- /dev/null
+++ b/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.langnostic.json
@@ -0,0 +1,27 @@
+{
+  "frontmatter": {
+    "title": "381a021a",
+    "subtitle": "db68b88d"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "82f48bc8",
+        "8a8c1807",
+        "6d101dee",
+        "57c0053a",
+        "ee94df1d"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "82f48bc8",
+        "8a8c1807",
+        "6d101dee",
+        "57c0053a",
+        "ee94df1d"
+      ]
+    }
+  }
+}
diff --git a/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.mdx b/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.mdx
new file mode 100644
index 0000000000..1e75ccc152
--- /dev/null
+++ b/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/en-US.mdx
@@ -0,0 +1,16 @@
+---
+title: Why you would use a `srcset` attribute in an image tag?
+subtitle: Explain the process the browser uses when evaluating the content of this attribute.
+---
+
+You would use the `srcset` attribute when you want to serve different images to users depending on their device display width - serve higher quality images to devices with retina display enhances the user experience while serving lower resolution images to low-end devices increase performance and decrease data wastage (because serving a larger image will not have any visible difference). For example: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` tells the browser to display the small, medium or large `.jpg` graphic depending on the client's resolution. The first value is the image name and the second is the width of the image in pixels. For a device width of 320px, the following calculations are made:
+
+- 500 / 320 = 1.5625
+- 1000 / 320 = 3.125
+- 2000 / 320 = 6.25
+
+If the client's resolution is 1x, 1.5625 is the closest, and `500w` corresponding to `small.jpg` will be selected by the browser.
+
+If the resolution is retina (2x), the browser will use the closest resolution above the minimum. Meaning it will not choose the 500w (1.5625) because it is greater than 1 and the image might look bad. The browser would then choose the image with a resulting ratio closer to 2 which is 1000w (3.125).
+
+`srcset`s solve the problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low-density screens.
diff --git a/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/metadata.json b/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/metadata.json
new file mode 100644
index 0000000000..228e269ade
--- /dev/null
+++ b/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/metadata.json
@@ -0,0 +1,11 @@
+{
+  "slug": "why-you-would-use-a-srcset-attribute-in-an-image-tag",
+  "languages": [],
+  "companies": [],
+  "access": "free",
+  "duration": 5,
+  "published": true,
+  "topics": ["html"],
+  "importance": "medium",
+  "difficulty": "medium"
+}
diff --git a/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/pt-BR.mdx b/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/pt-BR.mdx
new file mode 100644
index 0000000000..60c6fcc52d
--- /dev/null
+++ b/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/pt-BR.mdx
@@ -0,0 +1,16 @@
+---
+title: Por que você usaria um atributo 'srcset' em uma tag de imagem?
+subtitle: Explique o processo que o navegador usa ao avaliar o conteúdo deste atributo.
+---
+
+Você usaria o atributo `srcset` quando desejar fornecer imagens diferentes aos usuários, dependendo da largura da tela de seus dispositivos - fornecer imagens de alta qualidade para dispositivos com tela Retina melhora a experiência do usuário, enquanto fornecer imagens de resolução mais baixa para dispositivos de baixo desempenho aumenta o desempenho e diminui o desperdício de dados (pois fornecer uma imagem maior não terá nenhuma diferença visível). Por exemplo: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` diz ao navegador para exibir o gráfico pequeno, médio ou grande `.jpg` dependendo da resolução do cliente. O primeiro valor é o nome da imagem e o segundo é a largura da imagem em pixels. Para uma largura de dispositivo de 320px, são feitos os seguintes cálculos:
+
+- 500 / 320 = 1.5625
+- 1000 / 320 = 3.125
+- 2000 / 320 = 6.25
+
+Se a resolução do cliente for 1x, a 1.5625 é a mais próxima e a opção `500w` correspondente a `small.jpg` será selecionada pelo navegador.
+
+Se a resolução for retina (2x), o navegador usará a resolução mais próxima acima do mínimo. Isso significa que ele não escolherá o 500w (1.5625) porque é maior que 1 e a imagem pode ficar ruim. O navegador escolheria a imagem com uma taxa resultante mais próxima de 2, que é 1000w (3.125).
+
+`srcset`s resolvem o problema de você querer fornecer arquivos de imagem menores para dispositivos de tela estreita, já que eles não precisam de imagens grandes como as telas de desktop - e também opcionalmente que você deseja fornecer imagens de resolução diferente para telas de alta densidade/baixa densidade.
diff --git a/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/zh-CN.mdx b/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/zh-CN.mdx
new file mode 100644
index 0000000000..4f186a2886
--- /dev/null
+++ b/packages/quiz/questions/why-you-would-use-a-srcset-attribute-in-an-image-tag/zh-CN.mdx
@@ -0,0 +1,16 @@
+---
+title: 为什么要在图像标签中使用 `srcset` 属性？
+subtitle: 解释浏览器在评估此属性内容时使用的过程。
+---
+
+当您希望根据用户的设备显示宽度为用户提供不同的图像时，您可以使用 `srcset` 属性 - 为具有视网膜显示屏的设备提供更高质量的图像可以增强用户体验，而为低端设备提供较低分辨率的图像可以提高性能并减少数据浪费（因为提供更大的图像不会有任何可见的差异）。例如：`<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` 告诉浏览器根据客户端的分辨率显示 small、medium 或 large `.jpg` 图像。第一个值是图像名称，第二个值是图像的宽度（以像素为单位）。对于 320px 的设备宽度，将进行以下计算：
+
+* 500 / 320 = 1.5625
+* 1000 / 320 = 3.125
+* 2000 / 320 = 6.25
+
+如果客户端的分辨率为 1x，则 1.5625 最接近，浏览器将选择与 `small.jpg` 对应的 `500w`。
+
+如果分辨率是视网膜 (2x)，浏览器将使用最接近最小值的分辨率。这意味着它不会选择 500w (1.5625)，因为它大于 1，并且图像可能看起来很糟糕。然后，浏览器将选择结果比率更接近 2 的图像，即 1000w (3.125)。
+
+`srcset` 解决了您希望为窄屏设备提供较小图像文件的问题，因为它们不需要像桌面显示器那样的大图像，并且还可以选择为高密度/低密度屏幕提供不同分辨率的图像。
diff --git a/packages/react-interview-playbook/contents/introduction/en-US.langnostic.json b/packages/react-interview-playbook/contents/introduction/en-US.langnostic.json
new file mode 100644
index 0000000000..ad74545e47
--- /dev/null
+++ b/packages/react-interview-playbook/contents/introduction/en-US.langnostic.json
@@ -0,0 +1,133 @@
+{
+  "frontmatter": {
+    "title": "a11a6dee",
+    "description": "54755be1"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "e326f8cb",
+        "a5cc6f1a",
+        "197729ad",
+        "2110b82e",
+        "4cedf921",
+        "820b297c",
+        "c1fff6ac",
+        "ebf9d65f",
+        "45e14d65",
+        "623afe9c",
+        "7af92bb",
+        "c1efa1e7",
+        "dfc221b7",
+        "266c29b3",
+        "eda4f3b4",
+        "67ced606",
+        "7a497cba",
+        "7087e270",
+        "932ace96",
+        "4adf0090",
+        "676fc4a5",
+        "f55dd13f",
+        "8f9d8f59",
+        "48962d23",
+        "f5b0efe8",
+        "97d62052",
+        "d9136f9",
+        "676fc4a5",
+        "c0aecfa5",
+        "8f9d8f59",
+        "acf4ebed",
+        "38fcbf5b",
+        "e25ef3ce",
+        "d1cb0100",
+        "676fc4a5",
+        "125ac1d7",
+        "8f9d8f59",
+        "1476bc0d",
+        "7ff1efbe",
+        "63f6a941",
+        "26da2808",
+        "676fc4a5",
+        "828e8019",
+        "72e73c43",
+        "d6eb4ae9",
+        "dd748412",
+        "5779bb91",
+        "65b25a1",
+        "214d2217",
+        "676fc4a5",
+        "c79484f0",
+        "8f9d8f59",
+        "2e2b09c5",
+        "482b8598",
+        "3080d752",
+        "fa40b04a",
+        "ab0ae8c5",
+        "f5994eaa"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "e326f8cb",
+        "a5cc6f1a",
+        "197729ad",
+        "2110b82e",
+        "4cedf921",
+        "820b297c",
+        "c1fff6ac",
+        "ebf9d65f",
+        "45e14d65",
+        "623afe9c",
+        "7af92bb",
+        "c1efa1e7",
+        "dfc221b7",
+        "266c29b3",
+        "eda4f3b4",
+        "67ced606",
+        "7a497cba",
+        "7087e270",
+        "932ace96",
+        "4adf0090",
+        "676fc4a5",
+        "f55dd13f",
+        "8f9d8f59",
+        "48962d23",
+        "f5b0efe8",
+        "97d62052",
+        "d9136f9",
+        "676fc4a5",
+        "c0aecfa5",
+        "8f9d8f59",
+        "acf4ebed",
+        "38fcbf5b",
+        "e25ef3ce",
+        "d1cb0100",
+        "676fc4a5",
+        "125ac1d7",
+        "8f9d8f59",
+        "1476bc0d",
+        "7ff1efbe",
+        "63f6a941",
+        "26da2808",
+        "676fc4a5",
+        "828e8019",
+        "72e73c43",
+        "d6eb4ae9",
+        "dd748412",
+        "5779bb91",
+        "65b25a1",
+        "214d2217",
+        "676fc4a5",
+        "c79484f0",
+        "8f9d8f59",
+        "2e2b09c5",
+        "482b8598",
+        "3080d752",
+        "fa40b04a",
+        "ab0ae8c5",
+        "f5994eaa"
+      ]
+    }
+  }
+}
diff --git a/packages/react-interview-playbook/contents/introduction/en-US.mdx b/packages/react-interview-playbook/contents/introduction/en-US.mdx
new file mode 100644
index 0000000000..f833ff2f5a
--- /dev/null
+++ b/packages/react-interview-playbook/contents/introduction/en-US.mdx
@@ -0,0 +1,177 @@
+---
+title: 'React Interviews: An Introduction'
+description: A comprehensive guide to mastering React interviews by covering essential concepts, question types, and tailored strategies for front end engineers
+---
+
+React has firmly established itself as the de facto standard for modern front end development. It powers everything from small web applications to massive enterprise platforms used by millions of people. Whether you're building interactive dashboards, e-commerce websites, or social media platforms, chances are you're using React or something inspired by it.
+
+Many companies use React to build user interfaces and their technical interview process will assess a candidate's React knowledge and skills. This guide is for anyone preparing for technical interviews where React skills are relevant and focuses on the important concepts and knowledge for interviews. It is not meant to teach you React, or replace the excellent [React documentation website](https://react.dev/).
+
+The content is pretty light and you should be able to complete reading cover to cover within an afternoon.
+
+However, if time permits and especially if you haven't visited the [official React documentation website](https://react.dev/) in a while, we recommend you read through the entire ["Learn React"](https://react.dev/learn) section while skimming through the examples within each page as well as the latest [blog posts](https://react.dev/blog). React is evolving at a pretty fast pace and it's good for you to read the official docs every now and then to catch up on the latest updates. It should not take longer than two afternoons.
+
+## Who this guide is for
+
+Whether you're applying for a front end engineering position, a full-stack role, or a React-specific job, if you're in one of the following categories, this guide will be useful to you:
+
+- **Front end engineers**: If you're aiming for roles that heavily focus on React, JavaScript, and UI development, this guide will give you a structured way to prepare.
+- **Full stack developers**: If React is just one part of your job, but you still need to prove your expertise in building UI components and managing front end state, this guide, along with [our practice questions](/questions/react-interview-questions) will hone your React skills.
+- **Experienced engineers looking for a refresher**: If you already use React heavily at work but want to prepare specifically for React interviews, this guide will fill in the gaps.
+
+Whether you're targeting an entry-level job or a senior position, the React Interview guide will help you systematically prepare for technical interviews by covering everything from fundamentals to advanced concepts.
+
+This guide is not for:
+
+- **Complete beginners to React**: This guide assumes familiarity and prior hands on experience with using React for building user interfaces; start with the [official React docs](https://react.dev)
+- **Developers looking to dive into React internals**: Focuses on practical interview prep, not React's internal source code; check out [JSer's React Internals Deep Dive series](https://jser.dev/series/react-source-code-walkthrough/), [Rodrigo Pombo's Build your own React](https://pomb.us/build-your-own-react/), [Tiger Abrodi's GitHub projects](https://github.com/tigerabrodi/), and [Build your own X](https://github.com/codecrafters-io/build-your-own-x?tab=readme-ov-file#build-your-own-front-end-framework--library)
+- **Those preparing for general software engineering interviews**: This guide does not cover data structures, general system design, or algorithms in depth; try [Tech Interview Handbook](https://www.techinterviewhandbook.org/) and [NeetCode](https://neetcode.io/)
+- **React Native developers**: While a lot of relevant React concepts will be covered, the guide does not touch on mobile-specific topics
+- **People just looking for a list of questions and answers**: The guide explains concepts and teaches you the patterns relevant in React interviews, not just provide answers for you to memorize; For a list of React interview questions, check out [GreatFrontEnd's React interview questions](/questions/react-interview-questions)
+
+If you already know React and want to excel in interviews, this guide is for you! 🚀
+
+## Types of companies and their interview processes
+
+| Category | Examples | Interview Process |
+| --- | --- | --- |
+| **Big tech (FAANG & similar)** | Meta, Apple, Amazon, Netflix, Google, Microsoft | Highly structured, multiple rounds including system design, algorithms, and front end expertise |
+| **Mid-sized** | Airbnb, Pinterest, Dropbox, Stripe, Shopify, DoorDash | Similar to big tech but more focused on product engineering and front end performance |
+| **High-growth startups (Unicorns & Pre-IPO)** | Notion, Figma, Ramp, Brex, Databricks, OpenAI | Mix of system design, practical front end coding, and culture fit. May include take-home assignments |
+| **Early-stage startups** | Seed to Series A startups | Flexible, often just 2-3 rounds, focused on problem-solving, UI/UX intuition, and shipping quickly |
+| **Enterprise** | Oracle, Cisco, SAP, Salesforce, Workday | Structured but often less algorithm-intensive than FAANG |
+
+Big tech companies like Meta and Google focus on fundamentals and all coding has to be done using Vanilla JavaScript; React is hardly relevant. It's crucial for you to find out from the recruiters what sort of questions to expect so that you optimize your preparation!
+
+Here's a breakdown of React's relevance, key topics, and example questions for each type of React interview question.
+
+## Types of React interview questions
+
+React knowledge can be tested in (but are not limited to) the following question formats.
+
+### Quiz / trivia
+
+Quiz-style questions test fundamental React knowledge, helping interviewers quickly assess a candidate's familiarity with React's concepts, APIs, and best practices.
+
+While it is possible to clear this type of questions purely by memorizing the answers, we wouldn't recommend as the concepts can also be tested in the other question types and it is more important to understand and apply the relevant concepts when the situation arises.
+
+**Important topics**
+
+- Fundamentals: JSX, components, rendering (virtual DOM, reconciliation)
+- Component design: Thinking declaratively, props, state, structure
+- React hooks: Common hooks (e.g. `useState`, `useEffect`), rules of hooks, best practices
+- Differences between controlled and uncontrolled components
+- Event handling in React
+- Common pitfalls (e.g., stale closures, unnecessary re-renders)
+- Performance optimizations: memoization, lazy loading, React Profiler
+
+**Example questions**
+
+- What is the difference between controlled and uncontrolled components?
+- How does React's reconciliation algorithm work?
+- Explain the difference between `useEffect` and `useLayoutEffect`
+- What happens when the state is updated in React?
+- How does `React.memo` help with performance?
+- Why should you use a `key` prop when rendering a list?
+
+Check out the [full list of React quiz questions](/questions/react-interview-questions/quiz).
+
+### User interface coding questions
+
+These questions assess a candidate's ability to implement UI components with React, focusing on creating interactive and visually accurate components.
+
+**Important topics**
+
+- Prop design and component composition
+- State design and state management
+- Event handling
+- Styling approaches (CSS Modules, Styled Components, Tailwind)
+- Conditional rendering and rendering list of items
+- Accessibility (a11y best practices)
+
+**Example questions**
+
+- Implement a tabs component
+- Implement an autocomplete component
+- Implement a basic sign up form
+- Build a reusable modal component with an overlay and close functionality
+- Build a memory game
+
+Check out the [full list of React user interface coding questions](/questions/react-interview-questions).
+
+### Implement React hooks
+
+Hooks are a core part of modern React development. These questions test a candidate's understanding of hooks, their use cases, and their ability to manage state and side effects.
+
+**Important topics**
+
+- `useState`, `useEffect`, `useMemo`, `useCallback`, `useRef`
+- Custom hooks and reusability
+- Handling side effects properly
+- Dependency arrays and stale closures
+- Performance optimizations with hooks
+- Handling async operations in hooks (e.g., `useEffect` with fetch)
+
+**Example questions**
+
+- Implement `useWindow`, a custom hook that tracks the window size and returns `width` and `height`
+- Implement `useDebounce`, a hook that delays the execution of a function
+- Implement `usePrevious`, a hook to track the previous state value
+- Implement `useLocalStorage`, a hook that reads and writes values to `localStorage`
+
+### Take-home assignments
+
+Take-home assignments evaluate a candidate's ability to build a real-world React application within a given timeframe, with a focus on code quality, maintainability, and best practices.
+
+Most take-home assignments involve fetching data from an endpoint and filtering + sorting of that data.
+
+**Important topics**
+
+- Component architecture and reusability
+- State management (Context API, Redux, Zustand)
+- API fetching and error handling
+- Performance optimizations
+- UI/UX considerations
+- Code structuring and readability
+
+**Example take-home assignments**
+
+- Build a simple task management app where users can add, edit, and delete tasks
+- Implement a e-commerce product listings page that allows for searching, filtering, and sorting
+- Create a weather app that fetches data from an API and displays weather conditions dynamically
+- Design and implement a dashboard with charts using React and a charting library
+
+### System design
+
+System design questions test a candidate's ability to architect scalable, maintainable, and performant front end applications.
+
+System design questions can broadly be classified into two types:
+
+- **Application design**: App design questions aren't specific to any front end technology but sometimes interviewers might ask you how you would implement a specific section and you would have to mention concrete libraries/approaches using React/Vue/Angular/Svelte/etc and which of their APIs you'd use.
+- **Component design**: Component design questions are about implementing a reusable, extensible, and accessible component for a specific purpose using a specific JavaScript framework of your choice or Vanilla JavaScript if you're adventurous enough. Hence mastery of the JavaScript framework is essential and component design in order to design the right props and composition mechanisms.
+
+**Important topics**
+
+- Component hierarchy and modularization
+- State management strategies (global vs local state)
+- Server-side rendering (SSR) vs client-side rendering (CSR)
+- Performance optimizations (lazy loading, memoization, list virtualization)
+- Data fetching mechanisms and how to implement them (e.g. caching, debouncing, retries, optimistic mutations)
+- Error handling and fallback UI strategies
+
+**Example questions**
+
+- How would you implement infinite scrolling within a news feed?
+- How would you design the component hierarchy within a music player?
+- How would you implement a modal dialog component in React?
+- How would you implement a dropdown menu component in React?
+
+Check out the [full list of front end system design questions](/questions/formats/system-design).
+
+## Scope of the guide
+
+Preparing for a React interview can feel overwhelming. There's a lot to cover, and not all topics are as important for interviews. This guide cuts through the noise and focuses on the topics that matter the most.
+
+This guide is structured to help you master React interviews in a systematic way. Each section builds on the previous one to help you understand not just what React does, but why it works the way it does, and what you absolutely need to know for interviews.
+
+We do not recommend memorizing answers; it's better to gain a good understanding of React so you can confidently tackle any question or variants that comes your way. You'll probably even learn new things along the way that will make you more skillful in using React!
diff --git a/packages/react-interview-playbook/contents/introduction/zh-CN.mdx b/packages/react-interview-playbook/contents/introduction/zh-CN.mdx
new file mode 100644
index 0000000000..13525e34ce
--- /dev/null
+++ b/packages/react-interview-playbook/contents/introduction/zh-CN.mdx
@@ -0,0 +1,177 @@
+---
+title: React 面试：简介
+description: 一份全面的指南，通过涵盖基本概念、问题类型和为前端工程师量身定制的策略，帮助您掌握 React 面试。
+---
+
+React 已经牢固确立了其作为现代前端开发的实际标准。它为各种事物提供支持，从小型 Web 应用程序到数百万用户使用的大型企业平台。无论您是构建交互式仪表板、电子商务网站还是社交媒体平台，您都很有可能正在使用 React 或受到它的启发。
+
+许多公司使用 React 构建用户界面，他们的技术面试流程将评估候选人的 React 知识和技能。本指南适用于任何准备技术面试的人，其中 React 技能是相关的，并且侧重于面试的重要概念和知识。它并非旨在教您 React，或取代优秀的 [React 文档网站](https://react.dev/)。
+
+内容相当轻松，您应该可以在一个下午内完成阅读。
+
+但是，如果时间允许，特别是如果您有一段时间没有访问 [官方 React 文档网站](https://react.dev/)，我们建议您通读整个 [“学习 React”](https://react.dev/learn) 部分，同时浏览每个页面中的示例以及最新的 [博客文章](https://react.dev/blog)。React 的发展速度非常快，您应该不时阅读官方文档，以了解最新更新。这不应超过两个下午。
+
+## 本指南适用于谁
+
+无论您是申请前端工程师职位、全栈职位还是 React 相关的职位，如果您属于以下类别之一，本指南将对您有所帮助：
+
+* **前端工程师**：如果您希望从事主要侧重于 React、JavaScript 和 UI 开发的职位，本指南将为您提供一种结构化的准备方法。
+* **全栈开发人员**：如果 React 只是您工作的一部分，但您仍然需要证明您在构建 UI 组件和管理前端状态方面的专业知识，那么本指南以及 [我们的练习题](/questions/react-interview-questions) 将磨练您的 React 技能。
+* **寻求复习的经验丰富的工程师**：如果您已经在工作中大量使用 React，但希望专门为 React 面试做准备，本指南将填补空白。
+
+无论您是想找一份入门级工作还是高级职位，React 面试指南都将帮助您系统地准备技术面试，涵盖从基础知识到高级概念的所有内容。
+
+本指南不适用于：
+
+* **完全不熟悉 React 的初学者**：本指南假定您熟悉并具有使用 React 构建用户界面的经验；从 [官方 React 文档](https://react.dev) 开始
+* **希望深入研究 React 内部原理的开发人员**：侧重于实际的面试准备，而不是 React 的内部源代码；查看 [JSer 的 React 内部原理深度剖析系列](https://jser.dev/series/react-source-code-walkthrough/)、[Rodrigo Pombo 的构建您自己的 React](https://pomb.us/build-your-own-react/)、[Tiger Abrodi 的 GitHub 项目](https://github.com/tigerabrodi/) 和 [构建您自己的 X](https://github.com/codecrafters-io/build-your-own-x?tab=readme-ov-file#build-your-own-front-end-framework--library)
+* **准备一般软件工程面试的人**：本指南未深入介绍数据结构、一般系统设计或算法；尝试 [技术面试手册](https://www.techinterviewhandbook.org/) 和 [NeetCode](https://neetcode.io/)
+* **React Native 开发人员**：虽然将涵盖许多相关的 React 概念，但本指南未涉及特定于移动端的主题
+* **只想找一份问题和答案列表的人**：本指南解释了 React 面试中相关的概念并教您模式，而不仅仅是为您提供要记住的答案；有关 React 面试问题的列表，请查看 [GreatFrontEnd 的 React 面试问题](/questions/react-interview-questions)
+
+如果您已经了解 React 并希望在面试中脱颖而出，那么本指南适合您！🚀
+
+## 公司类型及其面试流程
+
+| 类别 | 示例 | 面试流程 |
+| --- | --- | --- |
+| **大型科技公司（FAANG 及类似公司）** | Meta、Apple、Amazon、Netflix、Google、Microsoft | 高度结构化，多轮，包括系统设计、算法和前端专业知识 |
+| **中型公司** | Airbnb、Pinterest、Dropbox、Stripe、Shopify、DoorDash | 与大型科技公司类似，但更侧重于产品工程和前端性能 |
+| **高增长初创公司（独角兽和 Pre-IPO）** | Notion、Figma、Ramp、Brex、Databricks、OpenAI | 系统设计、实际前端编码和文化契合的混合。可能包括带回家的作业 |
+| **早期初创公司** | 种子轮到 A 轮融资的初创公司 | 灵活，通常只有 2-3 轮，侧重于解决问题、UI/UX 直觉和快速交付 |
+| **企业** | Oracle、Cisco、SAP、Salesforce、Workday | 结构化，但通常不如 FAANG 那么注重算法 |
+
+像 Meta 和 Google 这样的大型科技公司侧重于基础知识，所有编码都必须使用 Vanilla JavaScript 完成；React 几乎无关紧要。您务必从招聘人员那里了解要期望的问题类型，以便优化您的准备！
+
+以下是 React 的相关性、关键主题以及每种 React 面试问题的示例问题的细分。
+
+## React 面试问题的类型
+
+React 知识可以在（但不限于）以下问题格式中进行测试。
+
+### 测验/琐事
+
+测验式问题测试基本的 React 知识，帮助面试官快速评估候选人对 React 的概念、API 和最佳实践的熟悉程度。
+
+虽然可以通过死记硬背来清除这类问题，但我们不建议这样做，因为这些概念也可以在其他类型的问题中进行测试，并且在出现情况时理解和应用相关概念更为重要。
+
+**重要主题**
+
+* 基础知识：JSX、组件、渲染（虚拟 DOM、协调）
+* 组件设计：声明式思考、props、state、结构
+* React Hooks：常见 Hooks（例如 `useState`、`useEffect`），Hooks 规则，最佳实践
+* 受控组件和非受控组件的区别
+* React 中的事件处理
+* 常见陷阱（例如，陈旧的闭包、不必要的重新渲染）
+* 性能优化：记忆化、懒加载、React Profiler
+
+**示例问题**
+
+* 受控组件和非受控组件有什么区别？
+* React 的协调算法是如何工作的？
+* 解释 `useEffect` 和 `useLayoutEffect` 之间的区别
+* 在 React 中更新状态时会发生什么？
+* `React.memo` 如何帮助提高性能？
+* 为什么在渲染列表时应该使用 `key` prop？
+
+查看 [React 测验问题的完整列表](/questions/react-interview-questions/quiz)。
+
+### 用户界面编码问题
+
+这些问题评估候选人使用 React 实现 UI 组件的能力，重点是创建交互式和视觉上准确的组件。
+
+**重要主题**
+
+* Prop 设计和组件组合
+* 状态设计和状态管理
+* 事件处理
+* 样式方法（CSS Modules、Styled Components、Tailwind）
+* 条件渲染和渲染项目列表
+* 可访问性（a11y 最佳实践）
+
+**示例问题**
+
+* 实现一个标签组件
+* 实现一个自动完成组件
+* 实现一个基本的注册表单
+* 构建一个带有叠加层和关闭功能的可重用模态组件
+* 构建一个记忆游戏
+
+查看 [React 用户界面编码问题的完整列表](/questions/react-interview-questions)。
+
+### 实现 React Hooks
+
+Hooks 是现代 React 开发的核心部分。这些问题测试候选人对 Hooks 的理解、用例以及管理状态和副作用的能力。
+
+**重要主题**
+
+* `useState`、`useEffect`、`useMemo`、`useCallback`、`useRef`
+* 自定义 Hooks 和可重用性
+* 正确处理副作用
+* 依赖数组和陈旧的闭包
+* 使用 Hooks 进行性能优化
+* 在 Hooks 中处理异步操作（例如，带有 fetch 的 `useEffect`）
+
+**示例问题**
+
+* 实现 `useWindow`，一个跟踪窗口大小并返回 `width` 和 `height` 的自定义 Hook
+* 实现 `useDebounce`，一个延迟函数执行的 Hook
+* 实现 `usePrevious`，一个跟踪先前状态值的 Hook
+* 实现 `useLocalStorage`，一个读取和写入 `localStorage` 值的 Hook
+
+### 课后作业
+
+课后作业评估候选人在给定时间内构建真实 React 应用程序的能力，重点是代码质量、可维护性和最佳实践。
+
+大多数课后作业都涉及从端点获取数据，并对该数据进行过滤和排序。
+
+**重要主题**
+
+* 组件架构和可重用性
+* 状态管理（Context API、Redux、Zustand）
+* API 获取和错误处理
+* 性能优化
+* UI/UX 考虑因素
+* 代码结构和可读性
+
+**示例性课后作业**
+
+* 构建一个简单的任务管理应用程序，用户可以在其中添加、编辑和删除任务
+* 实现一个电子商务产品列表页面，允许搜索、过滤和排序
+* 创建一个天气应用程序，从 API 获取数据并动态显示天气状况
+* 使用 React 和图表库设计并实现一个带有图表的仪表板
+
+### 系统设计
+
+系统设计问题测试候选人构建可扩展、可维护和高性能前端应用程序的能力。
+
+系统设计问题大致可分为两类：
+
+* **应用程序设计**：应用程序设计问题并非特定于任何前端技术，但有时面试官可能会问您将如何实现特定部分，您将不得不提及使用 React/Vue/Angular/Svelte/ 等的具体库/方法，以及您将使用它们的哪些 API。
+* **组件设计**：组件设计问题是关于使用您选择的特定 JavaScript 框架或 Vanilla JavaScript（如果您足够有冒险精神）为特定目的实现可重用、可扩展和可访问的组件。因此，掌握 JavaScript 框架对于设计正确的 props 和组合机制至关重要，并且需要进行组件设计。
+
+**重要主题**
+
+* 组件层次结构和模块化
+* 状态管理策略（全局与局部状态）
+* 服务器端渲染 (SSR) 与客户端渲染 (CSR)
+* 性能优化（懒加载、记忆化、列表虚拟化）
+* 数据获取机制以及如何实现它们（例如缓存、去抖动、重试、乐观变异）
+* 错误处理和回退 UI 策略
+
+**示例问题**
+
+* 您将如何在新闻提要中实现无限滚动？
+* 您将如何设计音乐播放器中的组件层次结构？
+* 您将如何在 React 中实现模态对话框组件？
+* 您将如何在 React 中实现下拉菜单组件？
+
+查看[前端系统设计问题的完整列表](/questions/formats/system-design)。
+
+## 本指南的范围
+
+准备 React 面试可能会让人不知所措。有很多内容需要涵盖，而且并非所有主题都对面试至关重要。本指南将消除噪音，重点关注最重要的主题。
+
+本指南旨在帮助您以系统的方式掌握 React 面试。每个部分都建立在上一部分的基础上，以帮助您不仅了解 React 的作用，还了解其工作原理以及面试绝对需要了解的内容。
+
+我们不建议死记硬背答案；最好对 React 有一个很好的理解，这样您就可以自信地解决遇到的任何问题或变体。您甚至可能会在此过程中学习新知识，这将使您更熟练地使用 React！
diff --git a/packages/react-interview-playbook/contents/react-basic-concepts/en-US.langnostic.json b/packages/react-interview-playbook/contents/react-basic-concepts/en-US.langnostic.json
new file mode 100644
index 0000000000..525f7baaef
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-basic-concepts/en-US.langnostic.json
@@ -0,0 +1,161 @@
+{
+  "frontmatter": {
+    "title": "557060c7",
+    "description": "15b83f87"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "470a0f9",
+        "85a541c9",
+        "521724d2",
+        "438e75f",
+        "5612919c",
+        "bb78009f",
+        "54576afe",
+        "2778320b",
+        "d2776fe5",
+        "b58ebec7",
+        "14cc17a5",
+        "86fbfcaa",
+        "9be5e942",
+        "37ccb7c",
+        "9c3d262d",
+        "516b0392",
+        "464560d5",
+        "bbb8f29a",
+        "2dc80013",
+        "bdb5fda5",
+        "85ff4cb8",
+        "9187b393",
+        "ea05138f",
+        "37f9ddf9",
+        "e3b56df3",
+        "124d1192",
+        "840ef4a4",
+        "65d6dde5",
+        "2e5c2350",
+        "ccd580f",
+        "c8c9af79",
+        "8299d7fd",
+        "1d5365c",
+        "280f4422",
+        "5002c978",
+        "b8d19512",
+        "4c1ac029",
+        "ac6b3aa5",
+        "533da1cd",
+        "3a89f1f3",
+        "1dda6237",
+        "11494665",
+        "71b9426f",
+        "d86c0fd",
+        "a7f2e06b",
+        "92a3d5b7",
+        "a55ae905",
+        "8cad5b64",
+        "37eb482e",
+        "60a2271",
+        "37ccb7c",
+        "ee54c46",
+        "ef107c03",
+        "687cfcf1",
+        "5b3017e6",
+        "e3cd46b7",
+        "241d69ef",
+        "ef544a3b",
+        "3f1e6fe4",
+        "609e35f3",
+        "95d0b514",
+        "391311b9",
+        "73f71532",
+        "4becc23c",
+        "6b139fdc",
+        "7d043b1e",
+        "30d1352a",
+        "3276416d",
+        "7a0ead0d",
+        "9e675ec0",
+        "53d8069b",
+        "60325261"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "470a0f9",
+        "85a541c9",
+        "521724d2",
+        "438e75f",
+        "5612919c",
+        "bb78009f",
+        "54576afe",
+        "2778320b",
+        "d2776fe5",
+        "b58ebec7",
+        "14cc17a5",
+        "86fbfcaa",
+        "9be5e942",
+        "37ccb7c",
+        "9c3d262d",
+        "516b0392",
+        "464560d5",
+        "bbb8f29a",
+        "2dc80013",
+        "bdb5fda5",
+        "85ff4cb8",
+        "9187b393",
+        "ea05138f",
+        "37f9ddf9",
+        "e3b56df3",
+        "124d1192",
+        "840ef4a4",
+        "65d6dde5",
+        "2e5c2350",
+        "ccd580f",
+        "c8c9af79",
+        "8299d7fd",
+        "1d5365c",
+        "280f4422",
+        "5002c978",
+        "b8d19512",
+        "4c1ac029",
+        "ac6b3aa5",
+        "533da1cd",
+        "3a89f1f3",
+        "1dda6237",
+        "11494665",
+        "71b9426f",
+        "d86c0fd",
+        "a7f2e06b",
+        "92a3d5b7",
+        "a55ae905",
+        "8cad5b64",
+        "37eb482e",
+        "60a2271",
+        "37ccb7c",
+        "ee54c46",
+        "ef107c03",
+        "687cfcf1",
+        "5b3017e6",
+        "e3cd46b7",
+        "241d69ef",
+        "ef544a3b",
+        "3f1e6fe4",
+        "609e35f3",
+        "95d0b514",
+        "391311b9",
+        "73f71532",
+        "4becc23c",
+        "6b139fdc",
+        "7d043b1e",
+        "30d1352a",
+        "3276416d",
+        "7a0ead0d",
+        "9e675ec0",
+        "53d8069b",
+        "60325261"
+      ]
+    }
+  }
+}
diff --git a/packages/react-interview-playbook/contents/react-basic-concepts/en-US.mdx b/packages/react-interview-playbook/contents/react-basic-concepts/en-US.mdx
new file mode 100644
index 0000000000..539a824ac4
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-basic-concepts/en-US.mdx
@@ -0,0 +1,238 @@
+---
+title: Basic React Concepts for Interviews
+description: Get familiar with core React concepts – components, JSX, props, state, and rendering
+---
+
+On this page, we'll break down fundamental React topics – components, props, state, and the render cycle.
+
+## Components
+
+At its core, React is built around **components**. Components are the foundation of modern UI development because they make interfaces modular, reusable, and scalable.
+
+Some key reasons why components are the way to build user interfaces:
+
+- **Reusability**: Components encapsulate UI logic and styling, making it easy to reuse them across different parts of an application. This reduces redundancy and improves maintainability.
+- **Modularity**: Components encouraging breaking down complex UIs into smaller, manageable parts. Each component should focus on specific functionality, making debugging and updates easier.
+- **Maintainability**: Changes to a component affect only that component and its children, reducing unintended side effects. Code is easier to read and understand, improving long-term maintainability.
+- **Declarative UI**: React and similar frameworks use a declarative approach, where the UI reflects the current application state. This makes UI development more predictable and easier to debug compared to imperative approaches.
+- **Encapsulation**: Components encapsulate their styles, logic, and structure, preventing conflicts and making the UI more modular. Components manage their own state, making it easier to reason about UI behavior. While styling is not a concern of React, React paired together with encapsulated styles (e.g., CSS Modules, Styled Components) prevent unintended overrides. This results in a component-based architecture which scale well in large applications by encouraging separation of concerns. Teams can work on different components independently without breaking the entire application.
+- **Composition**: Components can be composed together to build complex UIs from smaller building blocks.
+- **Easier testing**: The encapsulated nature of components make them easily testable in isolation using unit and integration tests. This makes it easier to verify UI behavior without relying on the entire application.
+
+Components have revolutionized UI development by making it more scalable, maintainable, predictable, and efficient. Every modern JavaScript framework is built on the concept of components, props, and state.
+
+Just like how programs are built from stacks of function calls, modern apps are built using components nested within components, as deeply as the app requires.
+
+In fact, the idea of components is so great that even the mobile development ecosystem hopped onto the components bandwagon. iOS and Android have developed their own "React" – Swift UI and Jetpack Compose respectively.
+
+## Ways of writing React components
+
+There are two ways of writing React components:
+
+### Function components (modern standard)
+
+The modern recommended way is to write JavaScript functions that return JSX. React hooks (e.g. `useState`, `useEffect`, etc.) was introduced in React 16.8 and are used for state and side effects. Prior to the introduction of hooks, function components could only be used for components that didn't contain any state.
+
+Function components require less boilerplate and preferred over class components.
+
+```jsx
+function Greeting({ name }) {
+  return <h1>Hello, {name}!</h1>;
+}
+```
+
+### Class components (legacy)
+
+The legacy way of writing components uses ES6 classes that extend `React.Component`. These class components use lifecycle methods (e.g. `componentDidMount()`, `componentDidUpdate()`) instead of hooks. This was the approach taken when React was first released and still appears in older codebases.
+
+Class components can still be used in the latest React versions.
+
+```jsx
+class Greeting extends React.Component {
+  render() {
+    return <h1>Hello, {this.props.name}!</h1>;
+  }
+}
+```
+
+Although class components can still be asked in interviews, you shouldn't be faulted for not having experience with class components since it has been over half a decade that functions components have been the de facto way of writing components. If you haven't used class components before, there's no need to learn about it and you can just tell your interviewer.
+
+## JSX
+
+The HTML-like syntax (`<h1>`) within the components looks like HTML but is not actually HTML, it's JSX. JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. It is not a requirement for React but is widely used because it makes UI code more readable and expressive.
+
+JSX provides a more intuitive and ergonomic way to define React components by visually structuring the UI. Browsers do not actually recognize JSX syntax, so compilers like [Babel](https://babeljs.io/) or [TypeScript Compiler](https://www.typescriptlang.org/tsconfig/#jsx) are needed to convert the JSX syntax into something that browsers can recognize before the code the browser runs it. Under the hood, JSX is transformed into `React.createElement()` function calls (the exact function can be configured by the compiler).
+
+To produce the following HTML:
+
+```html
+<div>
+  <h1>Hello world!</h1>
+  <p>Goodbye earth!</p>
+</div>
+```
+
+Without JSX, using `React.createElement()` function calls:
+
+```jsx
+const element = React.createElement('div', null, [
+  React.createElement('h1', null, 'Hello world!'),
+  React.createElement('p', null, 'Goodbye earth!'),
+]);
+```
+
+With JSX, it is easier to read and write markup:
+
+```jsx
+const element = (
+  <div>
+    <h1>Hello world!</h1>
+    <p>Goodbye earth!</p>
+  </div>
+);
+```
+
+This looks almost exactly like the HTML that it is meant to produce! Instead of writing complex `React.createElement()` calls, JSX allows you to write components in a simpler way.
+
+Under the hood, `React.createElement()` creates a lightweight representation of the UI and displays it in the browser using DOM APIs like `document.createElement()`, `document.appendChild()`. This process will be covered in more detail in the [Rendering section](#rendering).
+
+Take note of the following key points:
+
+- JSX is syntactic sugar for `React.createElement()` and converted before running in the browser
+- Components must return a single root element
+- JavaScript can be written inside JSX using curly braces (`{}`)
+- Know the differences between JSX and HTML (className, style, self-closing tags, etc.)
+
+## Props vs State
+
+Props and state are data used by the components when rendering.
+
+### Props
+
+Props is short for "properties" and represents the data that a component receives from its parents. Props are analogous to a function's parameters.
+
+- Passed from parent to child
+- Immutable (cannot be modified by the component receiving them)
+- Used for configuration and data sharing
+
+```jsx
+function Welcome({ name }) {
+  return <h1>Hello, {name}!</h1>;
+}
+```
+
+Further reading on react.dev: [Passing Props to a Component](https://react.dev/learn/passing-props-to-a-component)
+
+### State
+
+State can be viewed as the "memory" of a component instance. Each component instance's state is isolated and cannot be directly modified from external.
+
+- Managed within the component
+- Triggers a re-render when updated
+
+```jsx
+function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
+  );
+}
+```
+
+Further reading on react.dev: [State: A Component's Memory](https://react.dev/learn/state-a-components-memory)
+
+## Rendering
+
+Traditionally, rendering in the context of the browser is the process by which a web browser takes the raw code of a webpage – primarily HTML, CSS, and JavaScript – and converts it into the visual, interactive page you see on your screen. However in React also uses the term "rendering" to describe how React converts components into actual DOM elements to be shown on the screen.
+
+To avoid confusion, in this guide, "rendering" will refer to React's definition and "browser rendering" will be referred to as "browser painting".
+
+Rendering a component in React involves several steps, from writing JSX to updating the DOM. Below is a **detailed breakdown** of how React renders a component, including the internal processes and optimizations.
+
+### 1. JSX transformation to JavaScript
+
+React components are written using **JSX (JavaScript XML)**, which is syntactic sugar over `React.createElement`. JSX is not directly understood by the browser, hence JSX has to be compiled into JavaScript using compilers like Babel or TypeScript compiler.
+
+```jsx
+function Greeting({ name }) {
+  return <h1>Hello, {name}!</h1>;
+}
+```
+
+The JSX is transformed into `React.createElement` calls:
+
+```js
+function Greeting({ name }) {
+  return React.createElement('h1', null, `Hello, ${name}!`);
+}
+```
+
+### 2. `React.createElement()` generates a virtual DOM object
+
+Once JSX is transformed, `React.createElement` produces a lightweight in-memory representation of the component called the **virtual DOM**.
+
+```js
+const vdom = {
+  type: 'h1',
+  props: { children: 'Hello, John!' },
+};
+```
+
+### 3. React reconciles the virtual DOM
+
+When a component is rendered for the first time:
+
+1. React creates the initial virtual DOM
+2. React then mounts the component into the actual DOM using DOM methods like `document.createElement()` and `document.appendChild()`
+
+When a component's props or state changes, the component is re-rendered:
+
+1. React creates a new virtual DOM tree
+2. React compares the new virtual DOM tree with the previous virtual DOM
+3. Only changed elements (added, removed, different HTML attributes) are updated in the real DOM. This is called reconciliation
+
+### Recap
+
+A React component does not directly modify the DOM. Instead:
+
+1. JSX is compiled into `React.createElement()` calls
+2. Virtual DOM is generated as a lightweight representation
+3. During updates, React reconciles the new virtual DOM with the previous virtual DOM
+4. Only the minimal, necessary updates are made to the real DOM
+
+Further reading on react.dev: [Render and Commit](https://react.dev/learn/render-and-commit)
+
+## What you need to know for interviews
+
+- **Components**: Writing functional components, reading from props, and adding state
+- **JSX**: What is JSX
+- **Rendering**: How React renders components
+- **Virtual DOM**: What virtual DOM is and what it is for
+- **Reconciliation**: Be able to explain the reconciliation process
+
+## Practice questions
+
+**Quiz**:
+
+- [What is React? Describe the benefits of React](/questions/quiz/what-is-react-describe-the-benefits-of-react?framework=react&tab=quiz)
+- [What is the difference between state and props in React?](/questions/quiz/what-is-the-difference-between-state-and-props-in-react?framework=react&tab=quiz)
+- [What is the difference between React Node, React Element, and a React Component?](/questions/quiz/what-is-the-difference-between-react-node-react-element-and-a-react-component?framework=react&tab=quiz)
+- [What is JSX and how does it work?](/questions/quiz/what-is-jsx-and-how-does-it-work?framework=react&tab=quiz)
+- [What is the purpose of the `key` prop in React?](/questions/quiz/what-is-the-purpose-of-the-key-prop-in-react?framework=react&tab=quiz)
+- [What is the consequence of using array indices as the value for `key`s in React?](/questions/quiz/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react?framework=react&tab=quiz)
+- [What are React Fragments used for?](/questions/quiz/what-are-react-fragments-used-for?framework=react&tab=quiz)
+- [What is React strict mode and what are its benefits?](/questions/quiz/what-is-react-strict-mode-and-what-are-its-benefits?framework=react&tab=quiz)
+- [Explain one-way data flow of React and its benefits](/questions/quiz/explain-one-way-data-flow-of-react-and-its-benefits?framework=react&tab=quiz)
+- [Explain what happens when `setState` is called in React](/questions/quiz/explain-what-happens-when-setstate-is-called-in-react?framework=react&tab=quiz)
+- [Why does React recommend against mutating state?](/questions/quiz/why-does-react-recommend-against-mutating-state?framework=react&tab=quiz)
+- [What does re-rendering mean in React?](/questions/quiz/what-does-re-rendering-mean-in-react?framework=react&tab=quiz)
+- [What is virtual DOM in React?](/questions/quiz/what-is-virtual-dom-in-react?framework=react&tab=quiz)
+- [How does virtual DOM in React work? What are its benefits and downsides?](/questions/quiz/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides?framework=react&tab=quiz)
+- [What is React Fiber and how is it an improvement over the previous approach?](/questions/quiz/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach?framework=react&tab=quiz)
+- [What is reconciliation in React?](/questions/quiz/what-is-reconciliation-in-react?framework=react&tab=quiz)
+- [What are some React anti-patterns?](/questions/quiz/what-are-some-react-anti-patterns?framework=react&tab=quiz)
+
+**Coding**:
+
+- [Counter](/questions/user-interface/counter/react?framework=react&tab=coding)
+- [Holy Grail](/questions/user-interface/holy-grail/react?framework=react&tab=coding)
diff --git a/packages/react-interview-playbook/contents/react-basic-concepts/zh-CN.mdx b/packages/react-interview-playbook/contents/react-basic-concepts/zh-CN.mdx
new file mode 100644
index 0000000000..4076ed3927
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-basic-concepts/zh-CN.mdx
@@ -0,0 +1,238 @@
+---
+title: React 基础概念面试
+description: 熟悉 React 的核心概念 – 组件、JSX、props、state 和渲染
+---
+
+在本页中，我们将分解 React 的基本主题 – 组件、props、state 和渲染周期。
+
+## 组件
+
+React 的核心是围绕**组件**构建的。 组件是现代 UI 开发的基础，因为它们使界面模块化、可重用和可扩展。
+
+组件是构建用户界面的关键原因如下：
+
+* **可重用性**：组件封装了 UI 逻辑和样式，使其易于在应用程序的不同部分重用。 这减少了冗余并提高了可维护性。
+* **模块化**：组件鼓励将复杂的 UI 分解为更小、更易于管理的部分。 每个组件都应侧重于特定功能，从而使调试和更新更容易。
+* **可维护性**：对组件的更改仅影响该组件及其子组件，从而减少了意外的副作用。 代码更易于阅读和理解，从而提高了长期可维护性。
+* **声明式 UI**：React 和类似的框架使用声明式方法，其中 UI 反映了当前的应用程序状态。 与命令式方法相比，这使得 UI 开发更具可预测性，并且更易于调试。
+* **封装**：组件封装了它们的样式、逻辑和结构，防止冲突并使 UI 更加模块化。 组件管理它们自己的状态，从而更容易推断 UI 行为。 虽然样式不是 React 关注的问题，但 React 与封装样式（例如，CSS 模块、样式组件）结合使用可以防止意外覆盖。 这导致了基于组件的架构，该架构通过鼓励关注点分离，在大应用程序中运行良好。 团队可以独立地处理不同的组件，而不会破坏整个应用程序。
+* **组合**：组件可以组合在一起，以从较小的构建块构建复杂的 UI。
+* **更轻松的测试**：组件的封装特性使它们可以使用单元和集成测试轻松地进行隔离测试。 这使得在不依赖整个应用程序的情况下验证 UI 行为变得更容易。
+
+组件彻底改变了 UI 开发，使其更具可扩展性、可维护性、可预测性和效率。 每个现代 JavaScript 框架都建立在组件、props 和 state 的概念之上。
+
+就像程序由函数调用堆栈构建一样，现代应用程序使用嵌套在组件中的组件构建，其深度取决于应用程序的需求。
+
+事实上，组件的概念是如此之棒，以至于移动开发生态系统也加入了组件大潮。 iOS 和 Android 分别开发了自己的“React”——Swift UI 和 Jetpack Compose。
+
+## 编写 React 组件的方式
+
+有两种编写 React 组件的方式：
+
+### 函数组件（现代标准）
+
+现代推荐的方式是编写返回 JSX 的 JavaScript 函数。 React hooks（例如 `useState`、`useEffect` 等）是在 React 16.8 中引入的，用于状态和副作用。 在引入 hooks 之前，函数组件只能用于不包含任何状态的组件。
+
+函数组件需要更少的样板代码，并且优于类组件。
+
+```jsx
+function Greeting({ name }) {
+  return <h1>Hello, {name}!</h1>;
+}
+```
+
+### 类组件（旧版）
+
+编写组件的旧方法使用扩展 `React.Component` 的 ES6 类。 这些类组件使用生命周期方法（例如 `componentDidMount()`、`componentDidUpdate()`）而不是 hooks。 这是 React 首次发布时采用的方法，仍然出现在较旧的代码库中。
+
+在最新的 React 版本中仍然可以使用类组件。
+
+```jsx
+class Greeting extends React.Component {
+  render() {
+    return <h1>Hello, {this.props.name}!</h1>;
+  }
+}
+```
+
+尽管在面试中仍然会被问到类组件，但你不应该因为没有类组件的经验而被责备，因为函数组件已经成为编写组件的事实上的方式已经超过五年了。如果你以前没有使用过类组件，则无需了解它，你只需要告诉你的面试官即可。
+
+## JSX
+
+组件中的类似 HTML 的语法 (`<h1>`) 看起来像 HTML，但实际上不是 HTML，而是 JSX。JSX（JavaScript XML）是 JavaScript 的语法扩展，允许你在 JavaScript 中编写类似 HTML 的代码。它不是 React 的必需品，但被广泛使用，因为它使 UI 代码更具可读性和表现力。
+
+JSX 通过在视觉上构建 UI 提供了一种更直观和符合人体工程学的方式来定义 React 组件。浏览器实际上不识别 JSX 语法，因此需要像 [Babel](https://babeljs.io/) 或 [TypeScript Compiler](https://www.typescriptlang.org/tsconfig/#jsx) 这样的编译器将 JSX 语法转换为浏览器可以识别的内容，然后浏览器才能运行代码。在幕后，JSX 被转换为 `React.createElement()` 函数调用（确切的函数可以通过编译器配置）。
+
+要生成以下 HTML：
+
+```html
+<div>
+  <h1>Hello world!</h1>
+  <p>Goodbye earth!</p>
+</div>
+```
+
+如果没有 JSX，使用 `React.createElement()` 函数调用：
+
+```jsx
+const element = React.createElement('div', null, [
+  React.createElement('h1', null, 'Hello world!'),
+  React.createElement('p', null, 'Goodbye earth!'),
+]);
+```
+
+使用 JSX，更容易阅读和编写标记：
+
+```jsx
+const element = (
+  <div>
+    <h1>Hello world!</h1>
+    <p>Goodbye earth!</p>
+  </div>
+);
+```
+
+这看起来几乎与它要生成的 HTML 完全一样！JSX 允许你以更简单的方式编写组件，而不是编写复杂的 `React.createElement()` 调用。
+
+在幕后，`React.createElement()` 创建了 UI 的轻量级表示，并使用 DOM API（如 `document.createElement()`、`document.appendChild()`）将其显示在浏览器中。此过程将在 [渲染部分](#rendering) 中进行更详细的介绍。
+
+请注意以下要点：
+
+* JSX 是 `React.createElement()` 的语法糖，并在浏览器中运行之前进行转换
+* 组件必须返回单个根元素
+* 可以在 JSX 中使用大括号 (`{}`) 编写 JavaScript
+* 了解 JSX 和 HTML 之间的区别（className、style、自闭合标签等）
+
+## Props vs State
+
+Props 和 state 是组件在渲染时使用的数据。
+
+### Props
+
+Props 是 "properties" 的缩写，表示组件从其父组件接收的数据。Props 类似于函数的参数。
+
+* 从父组件传递给子组件
+* 不可变（不能被接收它们的组件修改）
+* 用于配置和数据共享
+
+```jsx
+function Welcome({ name }) {
+  return <h1>Hello, {name}!</h1>;
+}
+```
+
+在 react.dev 上进一步阅读：[将 Props 传递给组件](https://react.dev/learn/passing-props-to-a-component)
+
+### 状态
+
+状态可以被看作是组件实例的“记忆”。每个组件实例的状态都是隔离的，不能从外部直接修改。
+
+* 在组件内管理
+* 更新时触发重新渲染
+
+```jsx
+function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
+  );
+}
+```
+
+在 react.dev 上进一步阅读：[状态：组件的记忆](https://react.dev/learn/state-a-components-memory)
+
+## 渲染
+
+传统上，在浏览器的上下文中，渲染是指 Web 浏览器获取网页的原始代码（主要是 HTML、CSS 和 JavaScript），并将其转换为您在屏幕上看到的视觉、交互式页面。然而，在 React 中，也使用术语“渲染”来描述 React 如何将组件转换为实际的 DOM 元素，以便在屏幕上显示。
+
+为了避免混淆，在本指南中，“渲染”将指 React 的定义，而“浏览器渲染”将被称为“浏览器绘制”。
+
+在 React 中渲染一个组件涉及几个步骤，从编写 JSX 到更新 DOM。以下是 React 如何渲染组件的**详细分解**，包括内部流程和优化。
+
+### 1. JSX 转换为 JavaScript
+
+React 组件使用 **JSX (JavaScript XML)** 编写，它是 `React.createElement` 的语法糖。JSX 不能被浏览器直接理解，因此 JSX 必须使用 Babel 或 TypeScript 编译器等编译器编译成 JavaScript。
+
+```jsx
+function Greeting({ name }) {
+  return <h1>Hello, {name}!</h1>;
+}
+```
+
+JSX 被转换为 `React.createElement` 调用：
+
+```js
+function Greeting({ name }) {
+  return React.createElement('h1', null, `Hello, ${name}!`);
+}
+```
+
+### 2. `React.createElement()` 生成一个虚拟 DOM 对象
+
+一旦 JSX 被转换，`React.createElement` 就会生成一个轻量级的组件内存表示，称为 **虚拟 DOM**。
+
+```js
+const vdom = {
+  type: 'h1',
+  props: { children: 'Hello, John!' },
+};
+```
+
+### 3. React 协调虚拟 DOM
+
+当一个组件第一次渲染时：
+
+1. React 创建初始虚拟 DOM
+2. 然后，React 使用 `document.createElement()` 和 `document.appendChild()` 等 DOM 方法将组件挂载到实际 DOM 中
+
+当组件的 props 或 state 发生变化时，组件会重新渲染：
+
+1. React 创建一个新的虚拟 DOM 树
+2. React 将新的虚拟 DOM 树与之前的虚拟 DOM 进行比较
+3. 只有更改的元素（添加、删除、不同的 HTML 属性）才会在真实的 DOM 中更新。 这称为协调
+
+### 回顾
+
+React 组件不会直接修改 DOM。 而是：
+
+1. JSX 被编译成 `React.createElement()` 调用
+2. 虚拟 DOM 被生成为轻量级表示
+3. 在更新期间，React 将新的虚拟 DOM 与之前的虚拟 DOM 进行协调
+4. 只有对真实 DOM 进行最少且必要的更新
+
+在 react.dev 上进一步阅读：[渲染和提交](https://react.dev/learn/render-and-commit)
+
+## 面试需要了解的内容
+
+* **组件**：编写函数式组件，从 props 中读取数据，并添加 state
+* **JSX**：什么是 JSX
+* **渲染**：React 如何渲染组件
+* **虚拟 DOM**：什么是虚拟 DOM 以及它的作用
+* **协调**：能够解释协调过程
+
+## 练习题
+
+**测验**：
+
+* [什么是 React？ 描述 React 的优点](/questions/quiz/what-is-react-describe-the-benefits-of-react?framework=react\&tab=quiz)
+* [React 中 state 和 props 的区别是什么？](/questions/quiz/what-is-the-difference-between-state-and-props-in-react?framework=react\&tab=quiz)
+* [React Node、React Element 和 React Component 之间有什么区别？](/questions/quiz/what-is-the-difference-between-react-node-react-element-and-a-react-component?framework=react\&tab=quiz)
+* [什么是 JSX 以及它是如何工作的？](/questions/quiz/what-is-jsx-and-how-does-it-work?framework=react\&tab=quiz)
+* [React 中 `key` prop 的作用是什么？](/questions/quiz/what-is-the-purpose-of-the-key-prop-in-react?framework=react\&tab=quiz)
+* [在 React 中使用数组索引作为 `key` 的值会产生什么后果？](/questions/quiz/what-is-the-consequence-of-using-array-indices-as-the-value-for-key-s-in-react?framework=react\&tab=quiz)
+* [React Fragments 用于什么？](/questions/quiz/what-are-react-fragments-used-for?framework=react\&tab=quiz)
+* [什么是 React strict mode 以及它的好处是什么？](/questions/quiz/what-is-react-strict-mode-and-what-are-its-benefits?framework=react\&tab=quiz)
+* [解释 React 的单向数据流及其优点](/questions/quiz/explain-one-way-data-flow-of-react-and-its-benefits?framework=react\&tab=quiz)
+* [解释在 React 中调用 `setState` 时会发生什么](/questions/quiz/explain-what-happens-when-setstate-is-called-in-react?framework=react\&tab=quiz)
+* [为什么 React 建议不要改变 state？](/questions/quiz/why-does-react-recommend-against-mutating-state?framework=react\&tab=quiz)
+* [在 React 中重新渲染是什么意思？](/questions/quiz/what-does-re-rendering-mean-in-react?framework=react\&tab=quiz)
+* [React 中的虚拟 DOM 是什么？](/questions/quiz/what-is-virtual-dom-in-react?framework=react\&tab=quiz)
+* [React 中的虚拟 DOM 如何工作？ 它的优点和缺点是什么？](/questions/quiz/how-does-virtual-dom-in-react-work-what-are-its-benefits-and-downsides?framework=react\&tab=quiz)
+* [什么是 React Fiber 以及它如何改进了之前的方法？](/questions/quiz/what-is-react-fiber-and-how-is-it-an-improvement-over-the-previous-approach?framework=react\&tab=quiz)
+* [React 中的协调是什么？](/questions/quiz/what-is-reconciliation-in-react?framework=react\&tab=quiz)
+* [一些 React 反模式是什么？](/questions/quiz/what-are-some-react-anti-patterns?framework=react\&tab=quiz)
+
+**编码**：
+
+* [计数器](/questions/user-interface/counter/react?framework=react\&tab=coding)
+* [圣杯](/questions/user-interface/holy-grail/react?framework=react\&tab=coding)
diff --git a/packages/react-interview-playbook/contents/react-data-fetching/en-US.langnostic.json b/packages/react-interview-playbook/contents/react-data-fetching/en-US.langnostic.json
new file mode 100644
index 0000000000..f06ac81dd5
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-data-fetching/en-US.langnostic.json
@@ -0,0 +1,137 @@
+{
+  "frontmatter": {
+    "title": "b46e1c55",
+    "description": "9cef1105"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "6c2dee1e",
+        "6bad399d",
+        "24e0177a",
+        "6c4eea52",
+        "32fae0c5",
+        "83084e2d",
+        "c2588b42",
+        "1e5fbc0f",
+        "fe5ae617",
+        "1feaa76e",
+        "50b91e06",
+        "86c75e2f",
+        "3ed0a79f",
+        "46c2e55e",
+        "e891ce4e",
+        "83871256",
+        "7027cb56",
+        "e6c99185",
+        "111ef70d",
+        "c6fcd77f",
+        "5ac1be0d",
+        "4fa2a0ae",
+        "690d39fd",
+        "af3ccccf",
+        "7b5a4198",
+        "655e1d91",
+        "279c743d",
+        "bea5da42",
+        "c6a391a6",
+        "ab2db239",
+        "6188ef08",
+        "c4475095",
+        "27583252",
+        "bfbc5664",
+        "2cedd3c9",
+        "b8b4e762",
+        "12f8d068",
+        "4b6b02cb",
+        "24637d57",
+        "fa0a88fa",
+        "ca432dfb",
+        "2d9f8d43",
+        "c0cc44a3",
+        "4350cba3",
+        "8228ab91",
+        "3346a9a2",
+        "86c843c",
+        "99b385b4",
+        "f0dc80ec",
+        "c683e0bd",
+        "5513f4da",
+        "7d043b1e",
+        "4805a95b",
+        "9a7a8c5b",
+        "36ffcef6",
+        "3276416d",
+        "7a0ead0d",
+        "b0bafb9b",
+        "53d8069b",
+        "f9bd0dfc"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "6c2dee1e",
+        "6bad399d",
+        "24e0177a",
+        "6c4eea52",
+        "32fae0c5",
+        "83084e2d",
+        "c2588b42",
+        "1e5fbc0f",
+        "fe5ae617",
+        "1feaa76e",
+        "50b91e06",
+        "86c75e2f",
+        "3ed0a79f",
+        "46c2e55e",
+        "e891ce4e",
+        "83871256",
+        "7027cb56",
+        "e6c99185",
+        "111ef70d",
+        "c6fcd77f",
+        "5ac1be0d",
+        "4fa2a0ae",
+        "690d39fd",
+        "af3ccccf",
+        "7b5a4198",
+        "655e1d91",
+        "279c743d",
+        "bea5da42",
+        "c6a391a6",
+        "ab2db239",
+        "6188ef08",
+        "c4475095",
+        "27583252",
+        "bfbc5664",
+        "2cedd3c9",
+        "b8b4e762",
+        "12f8d068",
+        "4b6b02cb",
+        "24637d57",
+        "fa0a88fa",
+        "ca432dfb",
+        "2d9f8d43",
+        "c0cc44a3",
+        "4350cba3",
+        "8228ab91",
+        "3346a9a2",
+        "86c843c",
+        "99b385b4",
+        "f0dc80ec",
+        "c683e0bd",
+        "5513f4da",
+        "7d043b1e",
+        "4805a95b",
+        "9a7a8c5b",
+        "36ffcef6",
+        "3276416d",
+        "7a0ead0d",
+        "b0bafb9b",
+        "53d8069b",
+        "f9bd0dfc"
+      ]
+    }
+  }
+}
diff --git a/packages/react-interview-playbook/contents/react-data-fetching/en-US.mdx b/packages/react-interview-playbook/contents/react-data-fetching/en-US.mdx
new file mode 100644
index 0000000000..ba194d690f
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-data-fetching/en-US.mdx
@@ -0,0 +1,314 @@
+---
+title: Data Fetching in React Interviews
+description: A comprehensive guide to efficiently fetching data in React, covering client-side and server-side techniques, dynamic queries, error handling, caching, and advanced optimizations with query libraries
+---
+
+Fetching data is a fundamental part of building web applications. In React, managing data fetching efficiently is crucial to creating responsive and performant applications. Whether retrieving data from an API, database, or another source, React provides multiple approaches to handle data fetching effectively.
+
+Data can be fetched either on the server (server-side rendering) or on the client via `fetch` and then rendered in the browser (client-side rendering).
+
+## Client-side data fetching
+
+The built-in `fetch` API is a straightforward way to make HTTP requests in JavaScript. Here's a simple example using the `useEffect` hook to fetch data from an API:
+
+```jsx
+import { useState, useEffect } from 'react';
+
+function Page() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    fetch('https://jsonplaceholder.typicode.com/posts')
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error('Error response');
+        }
+        return response.json();
+      })
+      .then((data) => {
+        setData(data);
+        setLoading(false);
+      })
+      .catch((error) => {
+        setError(error);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return <p>Loading...</p>;
+  }
+
+  if (error) {
+    return <p>Error: {error.message}</p>;
+  }
+
+  return (
+    <ul>
+      {data.map((post) => (
+        <li key={post.id}>{post.title}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+This component calls an API on mount, fetches the data, and renders it to the screen. It also shows a loading message while the data is being fetched and error message if an error was encountered. These are all great for user experience.
+
+## Dynamic client-side data fetching
+
+However, often you will need to fetch data based on a dynamic parameter, such as a blog post slug or an autocomplete search query.
+
+The following "live search" example fetches data based on a user-provided search term as you type:
+
+```jsx
+import { useState } from 'react';
+import axios from 'axios';
+
+function SearchResults() {
+  const [query, setQuery] = useState('');
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  async function fetchData(query) {
+    if (!query) {
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(
+        `https://jsonplaceholder.typicode.com/posts?q=${encodeURIComponent(
+          query,
+        )}`,
+      );
+
+      if (!response.ok) {
+        throw new Error('Error response');
+      }
+      const data = await response.json();
+      setData(data);
+    } catch (err) {
+      setError(err);
+    }
+    setLoading(false);
+  }
+
+  useEffect(() => {
+    fetchData(query);
+  }, [query]);
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+        placeholder="Enter search term"
+      />
+      {loading && <p>Loading...</p>}
+      {error && <p>Error: {error.message}</p>}
+      {data && (
+        <ul>
+          {data.map((result) => (
+            <li key={result.id}>{result.title}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+```
+
+Spot any problem with the example above? On first glance it might look fine, but there are actually many issues and areas of improvements:
+
+### A `fetch` request is made per keystroke
+
+Since there's no submit button, the `fetchData()` function is called on every change in the `<input>`. If a user enters `'tomato'`, a total of 6 HTTP requests will be made! This is quite redundant considering the user probably only cares about the results for `'tomato'`.
+
+One way to resolve this is to debounce the query so that the API request is only made after the user has stopped typing for a specific duration.
+
+### Race conditions
+
+Wastefulness of multiple requests aside, a more serious problem is that the displayed results aren't even for the current search term. Race conditions can occur because when multiple requests are made, the server can return the results in any order. The response for the term `'toma'` can arrive later than the response for the term `'tomato'`, but the code simply displays the results of the latest request, not necessarily the request of the current search term.
+
+This problem can be fixed/improved in multiple ways:
+
+1. **Debouncing**: Debouncing ensures that requests are sent only after a period of inactivity, which reduces the chance of race conditions. However, if the request latency is longer than the debounce duration, then race conditions can still occur. Debouncing is not a foolproof approach.
+2. **Cancelling previous requests**: Use `AbortController` to cancel in-flight API requests when a new one is made.
+3. **Ignore/discard outdated responses**: Before displayed data, determine if the response is for the current query, and ignore/discard the responses that aren't relevant.
+
+### Setting state after unmount
+
+If the user navigates away from the page and the response is returned, the code will attempt to call `setData` even though the component is no longer in the DOM and React will log a warning "Can't perform a React state update on an unmounted component." This can be fixed by ensuring the component is still mounted before updating state by using a cleanup function in `useEffect` to set an `isMounted` flag to `false` or using `AbortController`s for fetch requests.
+
+```jsx
+useEffect(() => {
+  let isMounted = true;
+
+  fetch('https://jsonplaceholder.typicode.com/posts/1')
+    .then((response) => response.json())
+    .then((data) => {
+      if (isMounted) {
+        setData(data);
+      }
+    });
+
+  return () => {
+    isMounted = false;
+  };
+}, []);
+```
+
+### Redundant duplicate requests
+
+This happens when a user types a query, receives results, and then retypes the same query, triggering another API request when the data is already available.
+
+Example: If a user types `'tomato'`, deletes it, and then types `'tomato'` again, the API is queried twice despite already having the results.
+
+Caching is the solution to this issue. An example is to use a `Map<query, results>` as the cache. Before making an API call, check if the results already exist in the cache. If they do, use them instead of fetching again.
+
+## Data mutations
+
+Data fetching isn't only limited to querying, there's also mutations. A data mutation refers to any operation that modifies data on the server, such as creating, updating, or deleting records in a database via an API.
+
+### Optimistic updates
+
+The typical steps in a data mutation with any optimizations:
+
+1. Trigger the API request (POST, PUT, DELETE)
+1. Show a loading state while the request is in progress
+1. Wait for the response from the server
+1. In success cases, handle the response and update UI where relevant
+1. Handle errors appropriately (e.g., show an error message)
+
+This flow is slow because the user must wait for the server response before seeing changes. This is where optimistic updates can help.
+
+Optimistic updates are a technique used in data mutations where the UI updates before receiving a response from the server. This makes the application feel faster and more responsive by assuming the mutation will succeed.
+
+1. Update the UI immediately with the assumed successful change
+1. Send the API request in the background
+1. If the request succeeds, keep the UI as it is
+1. If the request fails, rollback the UI to its previous state and show an error message
+
+Optimistic updates reduce perceived latency and improves user experience.
+
+```jsx
+const handleLike = async () => {
+  setLike((count) => count + 1); // Update UI optimistically
+
+  try {
+    await fetch('/api/posts/4/like', {
+      method: 'POST',
+    });
+  } catch (error) {
+    setLike((count) => count - 1); // Rollback on failure
+  }
+};
+```
+
+Optimistic updates can be used for mutations where the success scenario is known beforehand, such as liking a post, adding an item to a cart, or editing a comment.
+
+### Invalidating cache
+
+If the UI relies on cached data, the cache should be invalidated either by refetching the data or merging the mutation response with the cached data (not possible for certain mutations).
+
+## Query libraries
+
+By now you probably agree with me that data fetching is such a huge pain to implement properly. But not to worry, query libraries to the rescue!
+
+Query libraries are specially designed to handle data fetching, caching, synchronization, and state management in front end applications. They simplify making API requests while optimizing performance and user experience. Popular examples include [TanStack Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [Apollo Client](https://www.apollographql.com/) (for GraphQL).
+
+The following example uses TanStack Query. See how easy it is to fetch data when they're written in a declarative manner!
+
+```jsx
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+function DataFetchingComponent() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['posts'],
+    queryFn: async () => {
+      const response = await axios.get('/api/posts');
+      return response.data;
+    },
+    staleTime: 5000, // Cache data for 5 seconds
+  });
+
+  if (isLoading) {
+    return <p>Loading...</p>;
+  }
+  if (error) {
+    return <p>Error: {error.message}</p>;
+  }
+
+  return (
+    <ul>
+      {data.map((post) => (
+        <li key={post.id}>{post.title}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+Advantages
+
+| Feature | `useEffect` + `fetch` | Query Libraries |
+| --- | --- | --- |
+| Caching | No caching | Automatic caching |
+| Error handling | Needs `try`/`catch` | Built-in retries |
+| Optimistic updates | Requires manual rollback | Automatic rollback on failure |
+| Pagination | Requires additional logic | Built-in support |
+| Background updates | Requires manual polling | Handles updates in background |
+| Refetching | Manual | Automatic |
+
+## Server-side data fetching and server-side rendering (SSR)
+
+Server-side data fetching is a technique where data is retrieved from a database or API before rendering the page on the server (SSR), rather than fetching it on the client after the initial load. SSR improves performance, SEO, and user experience by delivering pre-rendered, data-filled pages to the client.
+
+Metaframeworks like Next.js make server-side data fetching easy with functions like `getServerSideProps` / server components, which runs on the server before sending the HTML to the browser. Unlike client-side fetching, where a loading state is visible while waiting for data, server-side fetching ensures that the user sees the fully rendered page immediately.
+
+This is particularly useful for performance-sensitive pages, SEO-sensitive pages, personalized dashboards, and dynamic content that depends on request-specific data (e.g., authentication or geolocation).
+
+With the exception of take-home assignments, most React coding interview questions will be using client-side data fetching rather than server-side data fetching.
+
+However, CSR vs SSR is a common discussion topic during system design rounds and you should know the benefits of each and when to use which.
+
+## What you need to know for interviews
+
+- **Basic data fetching**:
+  - Using `useEffect` and `useState` for fetching data in functional components
+  - Handling loading and error states
+  - Understanding dependency arrays (`[]` for on-mount fetch, `[query]` for fetch-on-change)
+  - Avoiding infinite loops due to missing dependencies
+  - Cleaning up side effects (e.g., aborting fetch requests to prevent setting state on unmount)
+- **Issues with basic data fetching approach**: Although you probably won't be asked to implement optimized data fetching approaches, you should know what the issues are and how to fix them on a high level
+
+## Key interview questions
+
+1. How do you fetch data in React?
+2. What are the benefits of using TanStack Query over `useState` and `useEffect`?
+3. How do you prevent redundant API requests in a live search?
+4. What are optimistic updates, and how do they improve performance?
+5. How do you handle errors and retries in API calls?
+6. How do you cancel an API request if a component unmounts?
+
+## Practice questions
+
+**Quiz**:
+
+- [How do you handle asynchronous data loading in React applications?](/questions/quiz/how-do-you-handle-asynchronous-data-loading-in-react-applications?framework=react&tab=quiz)
+- [Explain server-side rendering of React applications and its benefits?](/questions/quiz/explain-server-side-rendering-of-react-applications-and-its-benefits?framework=react&tab=quiz)
+- [What are some common pitfalls when doing data fetching in React?](/questions/quiz/what-are-some-common-pitfalls-when-doing-data-fetching-in-react?framework=react&tab=quiz)
+
+**Coding**:
+
+- [Like Button](/questions/user-interface/like-button/react?framework=react&tab=coding)
+- [Birth Year Histogram](/questions/user-interface/birth-year-histogram/react?framework=react&tab=coding)
+- [Job Board](/questions/user-interface/job-board/react?framework=react&tab=coding)
diff --git a/packages/react-interview-playbook/contents/react-data-fetching/zh-CN.mdx b/packages/react-interview-playbook/contents/react-data-fetching/zh-CN.mdx
new file mode 100644
index 0000000000..40b149b0f8
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-data-fetching/zh-CN.mdx
@@ -0,0 +1,314 @@
+---
+title: React 面试中的数据获取
+description: React 中高效获取数据的综合指南，涵盖客户端和服务器端技术、动态查询、错误处理、缓存以及使用查询库的高级优化
+---
+
+获取数据是构建 Web 应用程序的基本部分。 在 React 中，有效地管理数据获取对于创建响应迅速且性能良好的应用程序至关重要。 无论是从 API、数据库还是其他来源检索数据，React 都提供了多种有效处理数据获取的方法。
+
+数据可以在服务器端（服务器端渲染）或通过 `fetch` 在客户端获取，然后在浏览器中渲染（客户端渲染）。
+
+## 客户端数据获取
+
+内置的 `fetch` API 是在 JavaScript 中发出 HTTP 请求的直接方法。 这是一个使用 `useEffect` 钩子从 API 获取数据的简单示例：
+
+```jsx
+import { useState, useEffect } from 'react';
+
+function Page() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    fetch('https://jsonplaceholder.typicode.com/posts')
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error('Error response');
+        }
+        return response.json();
+      })
+      .then((data) => {
+        setData(data);
+        setLoading(false);
+      })
+      .catch((error) => {
+        setError(error);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return <p>Loading...</p>;
+  }
+
+  if (error) {
+    return <p>Error: {error.message}</p>;
+  }
+
+  return (
+    <ul>
+      {data.map((post) => (
+        <li key={post.id}>{post.title}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+此组件在挂载时调用 API，获取数据，并将其渲染到屏幕上。 如果遇到错误，它还会显示加载消息和错误消息。 这些都非常适合用户体验。
+
+## 动态客户端数据获取
+
+但是，您通常需要根据动态参数（例如博客文章 slug 或自动完成搜索查询）获取数据。
+
+以下“实时搜索”示例根据用户提供的搜索词（在您键入时）获取数据：
+
+```jsx
+import { useState } from 'react';
+import axios from 'axios';
+
+function SearchResults() {
+  const [query, setQuery] = useState('');
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  async function fetchData(query) {
+    if (!query) {
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(
+        `https://jsonplaceholder.typicode.com/posts?q=${encodeURIComponent(
+          query,
+        )}`,
+      );
+
+      if (!response.ok) {
+        throw new Error('Error response');
+      }
+      const data = await response.json();
+      setData(data);
+    } catch (err) {
+      setError(err);
+    }
+    setLoading(false);
+  }
+
+  useEffect(() => {
+    fetchData(query);
+  }, [query]);
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+        placeholder="Enter search term"
+      />
+      {loading && <p>Loading...</p>}
+      {error && <p>Error: {error.message}</p>}
+      {data && (
+        <ul>
+          {data.map((result) => (
+            <li key={result.id}>{result.title}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+```
+
+注意上面示例中的任何问题吗？ 乍一看，它可能看起来不错，但实际上存在许多问题和改进领域：
+
+### 每次按键都会发出一个 `fetch` 请求
+
+由于没有提交按钮，因此在 `<input>` 中每次更改时都会调用 `fetchData()` 函数。 如果用户输入 `'tomato'`，总共将发出 6 个 HTTP 请求！ 考虑到用户可能只关心 `'tomato'` 的结果，这非常多余。
+
+解决此问题的一种方法是防抖动查询，以便仅在用户停止键入特定持续时间后才发出 API 请求。
+
+### 竞态条件
+
+除了多次请求的浪费之外，一个更严重的问题是显示的结果甚至不是针对当前的搜索词。 可能会发生竞态条件，因为当发出多个请求时，服务器可以按任何顺序返回结果。 术语 `'toma'` 的响应可能晚于术语 `'tomato'` 的响应，但代码只是显示最新请求的结果，而不一定是当前搜索词的请求。
+
+这个问题可以通过多种方式修复/改进：
+
+1. **防抖**: 防抖确保仅在一段时间不活动后才发送请求，这降低了出现竞态条件的可能性。但是，如果请求延迟长于防抖持续时间，则仍然可能发生竞态条件。防抖并不是万无一失的方法。
+2. **取消之前的请求**: 使用 `AbortController` 在发出新请求时取消正在进行的 API 请求。
+3. **忽略/丢弃过时的响应**: 在显示数据之前，确定响应是否针对当前查询，并忽略/丢弃不相关的响应。
+
+### 在卸载后设置状态
+
+如果用户从页面导航离开并且返回了响应，代码将尝试调用 `setData`，即使组件已不再存在于 DOM 中，React 也会记录警告“无法在未挂载的组件上执行 React 状态更新”。这可以通过确保在更新状态之前组件仍然已挂载来修复，方法是在 `useEffect` 中使用清理函数将 `isMounted` 标志设置为 `false`，或者使用 `AbortController` 进行 fetch 请求。
+
+```jsx
+useEffect(() => {
+  let isMounted = true;
+
+  fetch('https://jsonplaceholder.typicode.com/posts/1')
+    .then((response) => response.json())
+    .then((data) => {
+      if (isMounted) {
+        setData(data);
+      }
+    });
+
+  return () => {
+    isMounted = false;
+  };
+}, []);
+```
+
+### 冗余的重复请求
+
+当用户输入查询、收到结果，然后重新输入相同的查询时，就会发生这种情况，从而在数据已经可用时触发另一个 API 请求。
+
+示例：如果用户输入 `'tomato'`，将其删除，然后再次输入 `'tomato'`，则 API 会被查询两次，尽管已经有了结果。
+
+缓存是解决此问题的方法。一个例子是使用 `Map<query, results>` 作为缓存。在进行 API 调用之前，检查结果是否已存在于缓存中。如果存在，则使用它们而不是再次获取。
+
+## 数据变动
+
+数据获取不仅限于查询，还包括变动。数据变动是指修改服务器上数据的任何操作，例如通过 API 在数据库中创建、更新或删除记录。
+
+### 乐观更新
+
+数据变动中的典型步骤以及任何优化：
+
+1. 触发 API 请求 (POST, PUT, DELETE)
+2. 在请求进行时显示加载状态
+3. 等待服务器的响应
+4. 在成功的情况下，处理响应并更新相关 UI
+5. 适当地处理错误（例如，显示错误消息）
+
+此流程很慢，因为用户必须等待服务器响应才能看到更改。这就是乐观更新可以提供帮助的地方。
+
+乐观更新是一种用于数据变动的技术，其中 UI 在收到服务器的响应之前更新。这通过假设变动将成功，使应用程序感觉更快、响应更灵敏。
+
+1. 立即使用假设的成功更改更新 UI
+2. 在后台发送 API 请求
+3. 如果请求成功，保持 UI 不变
+4. 如果请求失败，将 UI 回滚到之前的状态并显示错误消息
+
+乐观更新减少了感知到的延迟并改善了用户体验。
+
+```jsx
+const handleLike = async () => {
+  setLike((count) => count + 1); // 乐观地更新 UI
+
+  try {
+    await fetch('/api/posts/4/like', {
+      method: 'POST',
+    });
+  } catch (error) {
+    setLike((count) => count - 1); // 失败时回滚
+  }
+};
+```
+
+乐观更新可用于事先已知成功场景的变动，例如点赞帖子、将商品添加到购物车或编辑评论。
+
+### 使缓存失效
+
+如果 UI 依赖于缓存数据，则应通过重新获取数据或将变动响应与缓存数据合并来使缓存失效（某些变动无法实现）。
+
+## 查询库
+
+到目前为止，你可能同意我的观点，即正确实现数据获取是如此痛苦。但不用担心，查询库来救援！
+
+查询库专门设计用于处理前端应用程序中的数据获取、缓存、同步和状态管理。它们简化了 API 请求，同时优化了性能和用户体验。 常见的例子包括 [TanStack Query](https://tanstack.com/query/latest)、[useSWR](https://swr.vercel.app/) 和 [Apollo Client](https://www.apollographql.com/) (用于 GraphQL)。
+
+下面的例子使用了 TanStack Query。看看它们以声明方式编写时获取数据是多么容易！
+
+```jsx
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+
+function DataFetchingComponent() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['posts'],
+    queryFn: async () => {
+      const response = await axios.get('/api/posts');
+      return response.data;
+    },
+    staleTime: 5000, // 缓存数据 5 秒
+  });
+
+  if (isLoading) {
+    return <p>加载中...</p>;
+  }
+  if (error) {
+    return <p>错误: {error.message}</p>;
+  }
+
+  return (
+    <ul>
+      {data.map((post) => (
+        <li key={post.id}>{post.title}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+优点
+
+| 特性 | `useEffect` + `fetch` | 查询库 |
+| --- | --- | --- |
+| 缓存 | 无缓存 | 自动缓存 |
+| 错误处理 | 需要 `try`/`catch` | 内置重试 |
+| 乐观更新 | 需要手动回滚 | 失败时自动回滚 |
+| 分页 | 需要额外的逻辑 | 内置支持 |
+| 后台更新 | 需要手动轮询 | 在后台处理更新 |
+| 重新获取 | 手动 | 自动 |
+
+## 服务器端数据获取和服务器端渲染 (SSR)
+
+服务器端数据获取是一种在服务器上呈现页面 (SSR) 之前从数据库或 API 检索数据的技术，而不是在初始加载后在客户端获取数据。 SSR 通过向客户端提供预渲染的、填充数据的页面来提高性能、SEO 和用户体验。
+
+像 Next.js 这样的元框架使用 `getServerSideProps` / 服务器组件等函数使服务器端数据获取变得容易，这些函数在将 HTML 发送到浏览器之前在服务器上运行。 与客户端获取（在等待数据时会显示加载状态）不同，服务器端获取可确保用户立即看到完全呈现的页面。
+
+这对于性能敏感的页面、SEO 敏感的页面、个性化仪表板以及依赖于特定于请求的数据（例如身份验证或地理位置）的动态内容特别有用。
+
+除了家庭作业之外，大多数 React 编码面试问题将使用客户端数据获取而不是服务器端数据获取。
+
+然而，CSR 与 SSR 是系统设计环节中一个常见的讨论话题，你应该知道每个的优点以及何时使用哪个。
+
+## 面试你需要知道的
+
+* **基本数据获取**：
+  * 使用 `useEffect` 和 `useState` 在函数组件中获取数据
+  * 处理加载和错误状态
+  * 理解依赖数组 (`[]` 用于挂载时获取，`[query]` 用于更改时获取)
+  * 避免由于缺少依赖项而导致的无限循环
+  * 清理副作用（例如，中止获取请求以防止在卸载时设置状态）
+* **基本数据获取的问题**：虽然你可能不会被要求实现优化的数据获取方法，但你应该知道问题是什么以及如何在高级别上修复它们
+
+## 关键面试问题
+
+1. 你如何在 React 中获取数据？
+2. 使用 TanStack Query 而不是 `useState` 和 `useEffect` 有什么好处？
+3. 如何在实时搜索中防止冗余的 API 请求？
+4. 什么是乐观更新，它们如何提高性能？
+5. 如何处理 API 调用中的错误和重试？
+6. 如果组件卸载，如何取消 API 请求？
+
+## 练习题
+
+**测验**：
+
+* [你如何在 React 应用程序中处理异步数据加载？](/questions/quiz/how-do-you-handle-asynchronous-data-loading-in-react-applications?framework=react\&tab=quiz)
+* [解释 React 应用程序的服务器端渲染及其好处？](/questions/quiz/explain-server-side-rendering-of-react-applications-and-its-benefits?framework=react\&tab=quiz)
+* [在 React 中进行数据获取时，有哪些常见的陷阱？](/questions/quiz/what-are-some-common-pitfalls-when-doing-data-fetching-in-react?framework=react\&tab=quiz)
+
+**编码**:
+
+* [点赞按钮](/questions/user-interface/like-button/react?framework=react\&tab=coding)
+* [出生年份直方图](/questions/user-interface/birth-year-histogram/react?framework=react\&tab=coding)
+* [招聘版块](/questions/user-interface/job-board/react?framework=react\&tab=coding)
diff --git a/packages/react-interview-playbook/contents/react-design-patterns/en-US.langnostic.json b/packages/react-interview-playbook/contents/react-design-patterns/en-US.langnostic.json
new file mode 100644
index 0000000000..b09e167ca2
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-design-patterns/en-US.langnostic.json
@@ -0,0 +1,85 @@
+{
+  "frontmatter": {
+    "title": "27ed02c8",
+    "description": "74089c75"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "1d5919de",
+        "9f36b422",
+        "b37a6234",
+        "ebf923a4",
+        "5d109e54",
+        "c8b3e34b",
+        "16b54b27",
+        "da32c809",
+        "44bd2623",
+        "746eeba3",
+        "4247b503",
+        "81632874",
+        "acbaef8e",
+        "3390cd5c",
+        "8e13a7ec",
+        "dd751989",
+        "c04c071b",
+        "4420c4eb",
+        "499c41c2",
+        "cef898c8",
+        "6a71dd02",
+        "21b77e08",
+        "9bf85596",
+        "d2b6a93c",
+        "508f599c",
+        "df674717",
+        "b05e7ef",
+        "5935c4cf",
+        "9dfec81f",
+        "7d043b1e",
+        "1ce4b33a",
+        "3276416d",
+        "7a0ead0d",
+        "ae4f9c3"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "1d5919de",
+        "9f36b422",
+        "b37a6234",
+        "ebf923a4",
+        "5d109e54",
+        "c8b3e34b",
+        "16b54b27",
+        "da32c809",
+        "44bd2623",
+        "746eeba3",
+        "4247b503",
+        "81632874",
+        "acbaef8e",
+        "3390cd5c",
+        "8e13a7ec",
+        "dd751989",
+        "c04c071b",
+        "4420c4eb",
+        "499c41c2",
+        "cef898c8",
+        "6a71dd02",
+        "21b77e08",
+        "9bf85596",
+        "d2b6a93c",
+        "508f599c",
+        "df674717",
+        "b05e7ef",
+        "5935c4cf",
+        "9dfec81f",
+        "7d043b1e",
+        "1ce4b33a",
+        "3276416d",
+        "7a0ead0d",
+        "ae4f9c3"
+      ]
+    }
+  }
+}
diff --git a/packages/react-interview-playbook/contents/react-design-patterns/en-US.mdx b/packages/react-interview-playbook/contents/react-design-patterns/en-US.mdx
new file mode 100644
index 0000000000..5f78ef8cae
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-design-patterns/en-US.mdx
@@ -0,0 +1,154 @@
+---
+title: Design Patterns for React Interviews
+description: An exploration of React design patterns, including higher-order components, render props, and container/presentational patterns, to help you build clean, reusable, and scalable applications
+---
+
+React encourages component-based architecture, but as applications grow, maintaining clean, reusable, and scalable code becomes essential. The following are some of the most common design patterns in React and when to use them.
+
+## Higher-order components (HOC)
+
+A Higher-order component (HOC) is a function that takes a component and returns an enhanced component with additional props or logic. It promotes code reuse across multiple components.
+
+```jsx
+function withAuth(Component) {
+  return function WrappedComponent(props) {
+    const isAuthenticated = localStorage.getItem('token'); // Check auth status
+    return isAuthenticated ? <Component {...props} /> : <p>Access Denied</p>;
+  };
+}
+
+function Dashboard() {
+  return <h1>Dashboard</h1>;
+}
+
+const ProtectedDashboard = withAuth(Dashboard);
+```
+
+HOCs are useful for:
+
+- Reusing logic across multiple components (e.g., authentication, analytics, logging, fetching data)
+- Adding behavior without modifying original components
+- Scenarios where hooks aren't an option, such as class components
+
+Higher-order components were more useful in the pre-hooks era for adding functionality to components. Now that we have React hooks and the ability to create custom hooks, HOCs are no longer that widespread.
+
+Further reading on react.dev: [Higher-Order Components – React](https://www.patterns.dev/react/hoc-pattern/)
+
+## Render props
+
+Render props involves passing a function that renders an element as a prop to a component. The component calls the prop with certain parameters, which is usually its own state.
+
+This allows the parent to the component to render based on the the component state still allowing the parent to customize the behavior/appearance from outside.
+
+```jsx
+function MouseTracker({ render }) {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const handleMouseMove = (event) => {
+      setPosition({ x: event.clientX, y: event.clientY });
+    };
+    window.addEventListener('mousemove', handleMouseMove);
+
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, []);
+
+  return render(position);
+}
+
+function App() {
+  return (
+    <MouseTracker
+      render={(position) => (
+        <p>
+          Mouse: {position.x}, {position.y}
+        </p>
+      )}
+    />
+  );
+}
+```
+
+Render props are useful for:
+
+- Sharing logic between components while keeping UI flexible
+- Scenarios where hooks aren't an option, such as class components
+- Headless components that provide logic and behavior while allowing customization of appearance
+
+Further reading on react.dev: [Render Props - React](https://www.patterns.dev/react/render-props-pattern/)
+
+## Container/presentational pattern
+
+The Container/presentational pattern is a design pattern used in React to separate state management (logic) from UI rendering (presentation). It helps in making components reusable, maintainable, and testable by ensuring a clear separation of concerns.
+
+On the client, data can come from the user's input, fetched from an API, `localStorage`, WebSockets, etc. Not assuming where the data comes from is a good way to structure your components.
+
+**Presentational components:**
+
+- Focus only on rendering the UI
+- Do not contain state (except local UI state like toggles)
+- Receive all data via props and use event handlers (e.g. `onClick`, `onChange`)
+- Reusable and easy to test because they are independent of business logic
+- Does not assume how data is fetched
+
+```jsx
+function UserList({ users }) {
+  return (
+    <ul>
+      {users.map((user) => (
+        <li key={user.id}>
+          {user.name} - {user.email}
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+**Container components:**
+
+- Manage state, API calls, and business logic
+- Pass data and functions as props to presentational components
+- Do not contain UI code (minimal JSX except for wrapping presentational components)
+
+```jsx
+function UserListContainer() {
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    fetch('https://jsonplaceholder.typicode.com/users')
+      .then((res) => res.json())
+      .then((data) => setUsers(data));
+  }, []);
+
+  return <UserList users={users} />;
+}
+```
+
+This pattern allows:
+
+- Reusing UI components with different data sources
+- A clear separation between UI and state logic
+- Making UI components easier to test
+
+### Alternative approaches
+
+- **Custom hooks (e.g. `useUser` hook for fetching users)**: A more modern approach that keeps logic reusable across multiple components
+- **State management libraries (Redux, Zustand)**: Handle global state separately without needing explicit container components
+
+Further reading on react.dev: [Container/Presentational Pattern](https://www.patterns.dev/react/presentational-container-pattern)
+
+## What you need to know for interviews
+
+- **Use hooks first**: While HOCs and render props were once popular patterns for code reuse in React, they have largely been replaced by hooks. However, they are still useful in certain scenarios where Hooks alone may not be sufficient or usable, such as in legacy code bases still using class components.
+- **Container/presentation goes beyond front end**: The key idea behind the container/presentational pattern is to separate presentation from the source of data. Separating data fetching from presentation is a powerful concept that is useful beyond front end engineering. When building back end systems, data can be fetched from other services, loaded from a database, read from a filesystem, etc. By doing such a separation, code will be easier to reuse and test.
+
+## Practice questions
+
+**Quiz**:
+
+- [What are higher order components in React?](/questions/quiz/what-are-higher-order-components-in-react?framework=react&tab=quiz)
+- [What is the Flux pattern and what are its benefits?](/questions/quiz/what-is-the-flux-pattern-and-what-are-its-benefits?framework=react&tab=quiz)
+- [Explain the presentational vs container component pattern in React](/questions/quiz/explain-the-presentational-vs-container-component-pattern-in-react?framework=react&tab=quiz)
+- [What are render props in React and what are they for?](/questions/quiz/what-are-render-props-in-react-and-what-are-they-for?framework=react&tab=quiz)
+- [Explain the composition pattern in React](/questions/quiz/explain-the-composition-pattern-in-react?framework=react&tab=quiz)
diff --git a/packages/react-interview-playbook/contents/react-design-patterns/zh-CN.mdx b/packages/react-interview-playbook/contents/react-design-patterns/zh-CN.mdx
new file mode 100644
index 0000000000..c70c0e068c
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-design-patterns/zh-CN.mdx
@@ -0,0 +1,154 @@
+---
+title: React 面试设计模式
+description: 探索 React 设计模式，包括高阶组件、渲染道具和容器/展示模式，帮助您构建干净、可重用和可扩展的应用程序
+---
+
+React 鼓励基于组件的架构，但随着应用程序的增长，维护干净、可重用和可扩展的代码至关重要。以下是 React 中一些最常见的设计模式以及何时使用它们。
+
+## 高阶组件 (HOC)
+
+高阶组件 (HOC) 是一个接受组件并返回一个增强组件的函数，该组件具有额外的 props 或逻辑。它促进了跨多个组件的代码重用。
+
+```jsx
+function withAuth(Component) {
+  return function WrappedComponent(props) {
+    const isAuthenticated = localStorage.getItem('token'); // 检查身份验证状态
+    return isAuthenticated ? <Component {...props} /> : <p>访问被拒绝</p>;
+  };
+}
+
+function Dashboard() {
+  return <h1>Dashboard</h1>;
+}
+
+const ProtectedDashboard = withAuth(Dashboard);
+```
+
+HOC 适用于：
+
+* 在多个组件之间重用逻辑（例如，身份验证、分析、日志记录、获取数据）
+* 在不修改原始组件的情况下添加行为
+* 无法使用钩子的情况，例如类组件
+
+高阶组件在 pre-hooks 时代对于向组件添加功能更有用。现在我们有了 React 钩子以及创建自定义钩子的能力，HOC 已经不再那么普遍。
+
+在 react.dev 上进一步阅读：[高阶组件 – React](https://www.patterns.dev/react/hoc-pattern/)
+
+## 渲染道具
+
+渲染道具涉及将一个渲染元素的函数作为 prop 传递给一个组件。该组件使用某些参数（通常是其自身的状态）调用该 prop。
+
+这允许组件的父级根据组件状态进行渲染，同时仍然允许父级从外部自定义行为/外观。
+
+```jsx
+function MouseTracker({ render }) {
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    const handleMouseMove = (event) => {
+      setPosition({ x: event.clientX, y: event.clientY });
+    };
+    window.addEventListener('mousemove', handleMouseMove);
+
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, []);
+
+  return render(position);
+}
+
+function App() {
+  return (
+    <MouseTracker
+      render={(position) => (
+        <p>
+          Mouse: {position.x}, {position.y}
+        </p>
+      )}
+    />
+  );
+}
+```
+
+渲染道具适用于：
+
+* 在组件之间共享逻辑，同时保持 UI 灵活性
+* 无法使用钩子的情况，例如类组件
+* 提供逻辑和行为的无头组件，同时允许自定义外观
+
+在 react.dev 上进一步阅读：[Render Props - React](https://www.patterns.dev/react/render-props-pattern/)
+
+## 容器/展示模式
+
+容器/展示模式是 React 中使用的一种设计模式，用于将状态管理（逻辑）与 UI 渲染（展示）分开。它通过确保关注点的明确分离，有助于使组件可重用、可维护和可测试。
+
+在客户端，数据可以来自用户的输入、从 API 获取、`localStorage`、WebSockets 等。不假设数据来自哪里是构建组件的好方法。
+
+**展示组件：**
+
+* 仅专注于渲染 UI
+* 不包含状态（除了本地 UI 状态，如切换）
+* 通过 props 接收所有数据并使用事件处理程序（例如 `onClick`、`onChange`）
+* 可重用且易于测试，因为它们独立于业务逻辑
+* 不假定如何获取数据
+
+```jsx
+function UserList({ users }) {
+  return (
+    <ul>
+      {users.map((user) => (
+        <li key={user.id}>
+          {user.name} - {user.email}
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+**容器组件：**
+
+* 管理状态、API 调用和业务逻辑
+* 将数据和函数作为 props 传递给展示组件
+* 不包含 UI 代码（最小 JSX，除了包装展示组件）
+
+```jsx
+function UserListContainer() {
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    fetch('https://jsonplaceholder.typicode.com/users')
+      .then((res) => res.json())
+      .then((data) => setUsers(data));
+  }, []);
+
+  return <UserList users={users} />;
+}
+```
+
+这种模式允许：
+
+* 使用不同的数据源重用 UI 组件
+* UI 和状态逻辑之间的清晰分离
+* 使 UI 组件更易于测试
+
+### 替代方法
+
+* **自定义钩子（例如，用于获取用户的 `useUser` 钩子）**：一种更现代的方法，可在多个组件中保持逻辑的可重用性
+* **状态管理库（Redux、Zustand）**：单独处理全局状态，无需显式容器组件
+
+在 react.dev 上进一步阅读：[容器/展示模式](https://www.patterns.dev/react/presentational-container-pattern)
+
+## 面试需要了解的内容
+
+* **首先使用钩子**：虽然 HOC 和 render props 曾经是 React 中代码重用的流行模式，但它们已被钩子取代。但是，它们在某些情况下仍然有用，在某些情况下，仅靠钩子可能不够用或不可用，例如在仍在使用类组件的旧代码库中。
+* **容器/展示超越前端**：容器/展示模式背后的关键思想是将展示与数据源分离。将数据获取与展示分离是一个强大的概念，在前端工程之外也很有用。在构建后端系统时，可以从其他服务获取数据，从数据库加载数据，从文件系统读取数据等。通过进行这种分离，代码将更容易重用和测试。
+
+## 练习题
+
+**测验：**
+
+* [React 中的高阶组件是什么？](/questions/quiz/what-are-higher-order-components-in-react?framework=react\&tab=quiz)
+* [Flux 模式是什么，它有什么好处？](/questions/quiz/what-is-the-flux-pattern-and-what-are-its-benefits?framework=react\&tab=quiz)
+* [解释 React 中的展示组件与容器组件模式](/questions/quiz/explain-the-presentational-vs-container-component-pattern-in-react?framework=react\&tab=quiz)
+* [React 中的 render props 是什么，它们是做什么的？](/questions/quiz/what-are-render-props-in-react-and-what-are-they-for?framework=react\&tab=quiz)
+* [解释 React 中的组合模式](/questions/quiz/explain-the-composition-pattern-in-react?framework=react\&tab=quiz)
diff --git a/packages/react-interview-playbook/contents/react-event-handling/en-US.langnostic.json b/packages/react-interview-playbook/contents/react-event-handling/en-US.langnostic.json
new file mode 100644
index 0000000000..962df02997
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-event-handling/en-US.langnostic.json
@@ -0,0 +1,201 @@
+{
+  "frontmatter": {
+    "title": "42cb145f",
+    "description": "98e01e3f"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "e82fd5bd",
+        "b627afad",
+        "d6b6fcda",
+        "574703db",
+        "335729fa",
+        "5f94e7f5",
+        "46761787",
+        "96d4cabc",
+        "ceb7216",
+        "30330421",
+        "61361188",
+        "5c946b02",
+        "2295d3f3",
+        "67474329",
+        "de9dd7fb",
+        "ae070041",
+        "6f12b5ac",
+        "18e6b7bd",
+        "ad9713eb",
+        "f3a796c6",
+        "4fc1a052",
+        "b35942f1",
+        "53931830",
+        "7d618258",
+        "98a941cd",
+        "57f24bcc",
+        "515e13e1",
+        "2f035824",
+        "e99f539",
+        "8616629d",
+        "79ad3cb1",
+        "dcb171f5",
+        "ac5affbc",
+        "d6801699",
+        "e1367b5e",
+        "e9b49790",
+        "7ffdb3e3",
+        "c5229573",
+        "db9bb29f",
+        "e93e1f5d",
+        "88b586cf",
+        "85b21dcc",
+        "9b844ea0",
+        "65915d95",
+        "5c49a84c",
+        "3cc29967",
+        "61670bcb",
+        "63062178",
+        "cfcf78d5",
+        "e351945a",
+        "e3083b1c",
+        "34b8fb9b",
+        "3cc29967",
+        "f3974dae",
+        "d5730d0",
+        "16562d77",
+        "3dbb43bd",
+        "cfe3374",
+        "2a47f0a4",
+        "60f7e4ce",
+        "9619615f",
+        "f8de37b5",
+        "7a848dc7",
+        "d72ddca7",
+        "762c581d",
+        "c518a59d",
+        "48b577a3",
+        "3b5022f3",
+        "2e6b6454",
+        "e917be69",
+        "661eee75",
+        "9ebaf59c",
+        "5ed29dfb",
+        "2d139ecc",
+        "a553087d",
+        "eebe6a66",
+        "110bf48e",
+        "2e0da81a",
+        "66494210",
+        "1d4b42ff",
+        "7b966bc5",
+        "28439fc1",
+        "70b8c034",
+        "f7a86535",
+        "f80d992c",
+        "70509c9a",
+        "40c2ae3f",
+        "7d043b1e",
+        "8719aefd",
+        "3276416d",
+        "53d8069b",
+        "f3a1f5a5"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "e82fd5bd",
+        "b627afad",
+        "d6b6fcda",
+        "574703db",
+        "335729fa",
+        "5f94e7f5",
+        "46761787",
+        "96d4cabc",
+        "ceb7216",
+        "30330421",
+        "61361188",
+        "5c946b02",
+        "2295d3f3",
+        "67474329",
+        "de9dd7fb",
+        "ae070041",
+        "6f12b5ac",
+        "18e6b7bd",
+        "ad9713eb",
+        "f3a796c6",
+        "4fc1a052",
+        "b35942f1",
+        "53931830",
+        "7d618258",
+        "98a941cd",
+        "57f24bcc",
+        "515e13e1",
+        "2f035824",
+        "e99f539",
+        "8616629d",
+        "79ad3cb1",
+        "dcb171f5",
+        "ac5affbc",
+        "d6801699",
+        "e1367b5e",
+        "e9b49790",
+        "7ffdb3e3",
+        "c5229573",
+        "db9bb29f",
+        "e93e1f5d",
+        "88b586cf",
+        "85b21dcc",
+        "9b844ea0",
+        "65915d95",
+        "5c49a84c",
+        "3cc29967",
+        "61670bcb",
+        "63062178",
+        "cfcf78d5",
+        "e351945a",
+        "e3083b1c",
+        "34b8fb9b",
+        "3cc29967",
+        "f3974dae",
+        "d5730d0",
+        "16562d77",
+        "3dbb43bd",
+        "cfe3374",
+        "2a47f0a4",
+        "60f7e4ce",
+        "9619615f",
+        "f8de37b5",
+        "7a848dc7",
+        "d72ddca7",
+        "762c581d",
+        "c518a59d",
+        "48b577a3",
+        "3b5022f3",
+        "2e6b6454",
+        "e917be69",
+        "661eee75",
+        "9ebaf59c",
+        "5ed29dfb",
+        "2d139ecc",
+        "a553087d",
+        "eebe6a66",
+        "110bf48e",
+        "2e0da81a",
+        "66494210",
+        "1d4b42ff",
+        "7b966bc5",
+        "28439fc1",
+        "70b8c034",
+        "f7a86535",
+        "f80d992c",
+        "70509c9a",
+        "40c2ae3f",
+        "7d043b1e",
+        "8719aefd",
+        "3276416d",
+        "53d8069b",
+        "f3a1f5a5"
+      ]
+    }
+  }
+}
diff --git a/packages/react-interview-playbook/contents/react-event-handling/en-US.mdx b/packages/react-interview-playbook/contents/react-event-handling/en-US.mdx
new file mode 100644
index 0000000000..e612fcc765
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-event-handling/en-US.mdx
@@ -0,0 +1,358 @@
+---
+title: Event Handling in React Interviews
+description: Guide to React's synthetic event system, covering best practices for handling, intercepting, and optimizing mouse, input, form, focus, and keyboard events for interview success
+---
+
+React uses a **synthetic event system** to provide a consistent way to handle events across different browsers. Unlike native JavaScript events, React wraps native events into a standardized object called `SyntheticEvent`, which improves performance and ensures cross-browser compatibility.
+
+## How React handles events
+
+React's **synthetic event system** provides consistency across different browsers and optimizations for performance.
+
+In vanilla JavaScript, event listeners are added like this:
+
+```js
+document.getElementById('btn').addEventListener('click', (event) => {
+  console.log('Clicked!');
+});
+```
+
+In React, events are attached to elements like this:
+
+```tsx
+<button onClick={() => console.log('Clicked!')}>Click Me</button>
+```
+
+However, since React uses event delegation and events are attached to the root of the React application (not the document root) instead of individual elements to improve performance.
+
+React wraps native events into a `SyntheticEvent` for efficiency and compatibility.
+
+Like event listeners in vanilla JavaScript, React's `SyntheticEvent`s are passed as the first argument to event handler callbacks. For the most part they can be treated as raw browser `Event` objects and [`Event` attributes and methods](https://developer.mozilla.org/en-US/docs/Web/API/Event) can also be accessed on the `SyntheticEvent`.
+
+```jsx
+function handleClick(event) {
+  console.log(event); // React SyntheticEvent
+  console.log(event.nativeEvent); // Native browser event
+  console.log(event.target); // <button>...</button>
+}
+
+<button onClick={handleClick}>Click me</button>;
+```
+
+Further reading on react.dev: [Responding to Events](https://react.dev/learn/responding-to-events)
+
+## Event handlers in React
+
+Event handlers in React are functions that respond to user interactions, such as clicks, key presses, form submissions, or mouse movements.
+
+### Mouse events
+
+Mouse event handlers fire when users interact with the mouse (clicks, hovers, etc.). Mouse events can be added to most elements but for accessibility purposes, certain handlers like `onClick` should only be added to interactive elements such as `<button>`, `<a>`, `<input>` otherwise screen reader users will not be able to trigger those interactions.
+
+Mouse event handlers receive the [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) argument.
+
+```jsx
+function ClickButton() {
+  function handleClick() {
+    alert('Button clicked!');
+  }
+
+  return <button onClick={handleClick}>Click me</button>;
+}
+```
+
+You should know the following mouse events:
+
+- `onClick`: Fires when an element is clicked (mousedown + mouseup). Commonly used in interviews
+- `onMouseEnter`: Fires when the mouse enters an element. Does not bubble (useful for hover interactions). Sometimes used in interviews
+- `onMouseLeave`: Fires when the mouse leaves an element. Does not bubble. Sometimes used in interviews
+- `onMouseOver`: Fires when the mouse enters an element or its children. Does bubble. Sometimes used in interviews
+- `onMouseOut`: Fires when the mouse leaves an element or its children. Does bubble. Sometimes used in interviews
+- `onMouseDown`: Fires when the mouse button is pressed down. Rarely used in interviews, in most cases you should use `onClick`
+- `onMouseUp`: Fires when the mouse button is released. Rarely used in interviews, in most cases you should use `onClick`
+- `onDoubleClick`: Fires when an element is double-clicked. Rarely used in interviews
+
+In case you get quizzed, you should be able to explain the difference between `onMouseEnter`/`onMouseLeave` and `onMouseOver`/`onMouseOut` – the former pair does not [bubble up the DOM](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling) while the latter pair does.
+
+For accessibility purposes, bear in mind to not add `onClick` handlers to non-interactive (non-clickable and non-focusable) elements.
+
+90% of the time you'd use `onClick` only on `<button>`s. `<a href="#" onClick={...}>` is also an anti-pattern, just use `<button onClick={...}>` and modify the styling accordingly.
+
+`onMouseEnter`/`onMouseLeave` and `onMouseOver`/`onMouseOut` can be used for adding hover styles, it's better to use CSS's `:hover` pseudo-class. There is no need to use JavaScript when CSS is able to do the job.
+
+### Input events
+
+Input event handlers are fired when user input changes (typing, pasting, etc.) and can be attached on `<input>` and `<textarea>` elements.
+
+Input event handlers receive the [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent) as argument.
+
+```jsx
+function Foo() {
+  const [value, setValue] = useState('');
+
+  return (
+    <input
+      onChange={(event) => setValue(event.target.value)}
+      value={value}
+      placeholder="Type here"
+    />
+  );
+}
+```
+
+You should know the following input events:
+
+- `onChange`: Fires when the value of an input changes
+- `onInput`: Fires when the user inputs data (similar to `onChange`). Most of the time, use `onChange` instead
+
+#### What's the difference between `'change'` and `'input'` events?
+
+For most event handlers in React, the `onEventName` attribute is the same as doing `element.addEventListener('eventname', ...)` in the browser. But not for `onChange` and `onInput`!
+
+Both `'change'` and `'input'` events detect when the value of an input field changes, but they have key differences in behavior and when they fire.
+
+In browsers, for some elements, including `<input type="text">`, the change event doesn't fire until the control loses focus. React's `onChange` behaves more like the DOM `'input'` event where it is fired on every keystroke.
+
+The browser `'change'` event is fired when the value is committed (e.g. loses focus):
+
+- In most cases, it is not fired on every keystroke
+- Works for `<input>`, `<textarea>`, `<select>`, etc
+
+The browser `'input'` event fires on every input change, including typing, pasting, and voice input:
+
+- Works in both React and vanilla JS
+- Fires immediately on every character input (like React's `onChange`)
+- Triggers even when using voice input, drag-and-drop, and pasting
+
+**Key differences**
+
+| Feature | `onChange` | `onInput` |
+| --- | --- | --- |
+| Triggers on every keystroke? | ✅ (React only) | ✅ |
+| Triggers on copy-paste? | ✅ | ✅ |
+| Triggers on IME (Chinese, Japanese, Korean)? | ❌ (only on commit) | ✅ (on every character) |
+| Triggers on speech-to-text input? | ❌ (only on commit) | ✅ (on every spoken word) |
+| Works with `contenteditable`? | ❌ | ✅ |
+| Detects programmatic value updates? | ❌ | ✅ |
+
+It can be confusing to know when to use `onChange` vs `onInput`, during interviews, when in doubt, use `onChange`.
+
+### Form events
+
+Form event handlers (`onSubmit` and `onReset`) only work on `<form>` elements.
+
+`onSubmit` receives the [`SubmitEvent`](https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent) argument while the `onReset` handler receives the generic [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) argument.
+
+```jsx
+function SimpleForm() {
+  const [input, setInput] = useState('');
+
+  function handleSubmit(event) {
+    event.preventDefault(); // Prevents page reload
+    alert(`Form submitted with: ${input}`);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder="Enter something"
+      />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+You should know the following form events:
+
+- `onSubmit`: Fires when a form is submitted. Only fires when triggered by a `<button type="submit">` or `<input type="submit">` within a `<form>`
+- `onReset`: Fires when a form is reset. Only fires when triggered by a `<button type="reset">` or `<input type="reset">` within a `<form>`
+
+Since most of the time you are dealing with single-page applications and do not have a server, you likely have to do `event.preventDefault()` within the `onSubmit` handler to prevent a full-page refresh.
+
+### Focus events
+
+Focus event handlers work with elements that can receive focus such as form elements and interactive elements such as `<input>`, `<textarea>`, `<select>`, `<button>`.
+
+Focus event handlers receive the [`FocusEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) argument.
+
+```jsx
+function FocusBlurExample() {
+  const [focused, setFocused] = useState(false);
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="Click to focus..."
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        style={{
+          border: focused ? '2px solid blue' : '2px solid gray',
+          outline: 'none',
+          padding: '5px',
+        }}
+      />
+      <p>{focused ? 'Input is focused' : 'Input is blurred'}</p>
+    </div>
+  );
+}
+```
+
+You should know the following form events:
+
+- `onFocus`: Fires when an element gains focus
+- `onBlur`: Fires when an element loses focus
+
+While the above example uses `onFocus`/`onBlur` for adding focus styles, it's better to use CSS's `:focus` pseudo-class. There is no need to use JavaScript when CSS is able to do the job.
+
+Note that `onFocus` and `onBlur` can be fired on any elements as long as they can receive focus, even if they aren't able to by default. Adding `tabIndex` to an element will allow it to receive focus and become clickable. This is mostly used in custom design systems UI components for building custom form components to have full control over their appearance.
+
+During interviews you probably shouldn't need to do that and most of the time you should just use the default set of focusable elements.
+
+| Element type | Supports `onFocus` | Supports `onBlur` | Notes |
+| --- | --- | --- | --- |
+| Form Inputs (`<input>`, `<textarea>`, `<select>`) | ✅ Yes | ✅ Yes | Standard usage |
+| Interactive Elements (`<button>`, `<a href="...">`, `<details>`) | ✅ Yes | ✅ Yes | Automatically focusable |
+| Elements with `tabIndex` defined | ✅ Yes | ✅ Yes | Becomes focusable |
+| Non-focusable elements (`<div>`, `<span>`, `<p>`) | ❌ No | ❌ No | Needs `tabindex` |
+
+Focus handling is an important accessibility topic that goes beyond the scope of this guide.
+
+### Keyboard events
+
+Keyboard event handlers are used to detect keyboard interactions inside input fields, buttons, or any focusable elements.
+
+Keyboard event handlers receive the [`KeyboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) argument.
+
+```jsx
+function handleKeyPress(event) {
+  if (event.key === 'Enter') {
+    alert('Enter key pressed!');
+  }
+}
+
+<input type="text" onKeyPress={handleKeyPress} />;
+```
+
+You should know the following keyboard events:
+
+- `onKeyDown`: Fires when a key is pressed down. Fires continuously if the key is held
+- `onKeyUp`: Fires when a key is released after being pressed. Useful for detecting final key input after typing
+- `onKeyPress`: (Deprecated) Similar to `onKeyDown`, but does not detect special keys
+
+Keyboard event handlers receive the `KeyboardEvent` which has some properties, these are the ones you should know:
+
+| Property | Description | Example output (<kbd>A</kbd> key) |
+| --- | --- | --- |
+| `event.key` | The key as a string | `"a"` or `"A"` |
+| `event.code` | The physical key on the keyboard | `"KeyA"` |
+| `event.which` (deprecated) | System and implementation dependent numerical code | `65` (for `A`) |
+| `event.keyCode` (deprecated) | System and implementation dependent numerical code | `65` (for `A`) |
+| `event.shiftKey` | `true` if `Shift` is held | `true / false` |
+| `event.ctrlKey` | `true` if `Ctrl` is held | `true / false` |
+
+This is just a brief list, find the [full list of `KeyboardEvent` properties on MDN](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#instance_properties).
+
+`event.key`, `event.code`, `event.which` and `event.keyCode` look very similar. For interviews, just know that you should use `event.key`.
+
+**Best practices for handling keyboard events in React**
+
+- Use `onKeyDown` instead of `onKeyPress` (since `onKeyPress` is deprecated)
+- Use `event.key` instead of `event.which` or `event.keyCode` (they're deprecated)
+- Use `event.preventDefault()` when needed (e.g., prevent `Enter` from submitting a form)
+- Add `tabIndex` for non-focusable elements (e.g., `<div>` needs it to receive keyboard events)
+- Handle accessibility properly (keyboard navigation should be consistent)
+
+In most cases you shouldn't need to use keyboard events during interviews. Detecting text changes within `<input>`s is better done using `onChange`/`onInput` and detecting <kbd>Enter</kbd> key for the purpose of form submission is better done using `onSubmit` on `<form>`s.
+
+## Event interception
+
+Event interception in React refers to the ability to capture, modify, or stop an event's behavior before it reaches its final target.
+
+### Stopping event propagation
+
+One way to intercept an event in React is by using `event.stopPropagation()`, which prevents the event from bubbling up to parent components. By default, events in React follow the bubbling phase, meaning they propagate from the target element up through its ancestors.
+
+However, there are cases where this behavior is undesirable, such as when clicking inside a dropdown should not close the entire menu because the click event bubbles up to a parent listener.
+
+```jsx
+function Dropdown() {
+  function handleParentClick() {
+    console.log('Parent div clicked!');
+  }
+
+  function handleChildClick(event: React.MouseEvent<HTMLDivElement>) {
+    event.stopPropagation(); // Prevents bubbling to the parent
+    console.log('Dropdown item clicked!');
+  }
+
+  return (
+    <div
+      onClick={handleParentClick}
+      style={{ padding: '20px', border: '2px solid black' }}>
+      <div
+        onClick={handleChildClick}
+        style={{ padding: '10px', border: '1px solid blue' }}>
+        Click inside dropdown
+      </div>
+    </div>
+  );
+}
+```
+
+In interviews, there shouldn't be many instances where you need to nest `onClick` handlers. If you ever do so, consider if you need `event.stopPropagation()` in the inner event handler.
+
+Further reading on react.dev: [Event propagation](https://react.dev/learn/responding-to-events#event-propagation)
+
+### Preventing default behavior
+
+Another form of event interception is preventing default browser actions using `event.preventDefault()`. Certain HTML elements, like `<form>`, `<a>`, and `<input>`, have built-in behaviors (e.g., form submission, link navigation). If you want to handle these interactions with custom logic in React, you must prevent their default behavior.
+
+```jsx
+function PreventFormSubmit() {
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault(); // Prevents full-page reload
+    console.log('Form submitted without reloading!');
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input type="text" placeholder="Enter something" />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+Without `event.preventDefault()`, clicking "Submit" would cause the page to refresh, disrupting the React application. By intercepting the event, we can handle the form submission programmatically without affecting the user experience.
+
+Further reading on react.dev: [Preventing default behavior](https://react.dev/learn/responding-to-events#preventing-default-behavior)
+
+## Best practices for interviews
+
+- If there's a performance with excessive re-rendering, avoid inline event handlers and memoize using `useCallback`
+- Use `onChange` instead of `onInput` for form inputs
+- Use `onMouseEnter`/`onMouseLeave` instead of `onMouseOver`/`onMouseOut` to prevent bubbling issues
+- For performance-sensitive events like `onScroll`, debounce or throttle the event handlers
+
+## What you need to know for interviews
+
+- **Event system**: Explain how the event system in React works and how it is different from browser event system
+- **Common events**: Common mouse (`onClick`, `onMouseEnter`, `onMouseLeave`), input (`onChange`), form events (`onSubmit`), and keyboard events (`onKeyDown`)
+- **Event interception**: When and how to use event interception
+
+## Practice questions
+
+**Coding**:
+
+- [Temperature Converter](/questions/user-interface/temperature-converter/react?framework=react&tab=coding)
+- [Dice Roller](/questions/user-interface/dice-roller/react?framework=react&tab=coding)
+- [Grid Lights](/questions/user-interface/grid-lights/react?framework=react&tab=coding)
+- [Star Rating](/questions/user-interface/star-rating/react?framework=react&tab=coding)
+- [Stopwatch](/questions/user-interface/stopwatch/react?framework=react&tab=coding)
+- [Auth Code Input](/questions/user-interface/auth-code-input/react?framework=react&tab=coding)
+- [Selectable Cells](/questions/user-interface/selectable-cells/react?framework=react&tab=coding)
diff --git a/packages/react-interview-playbook/contents/react-event-handling/zh-CN.mdx b/packages/react-interview-playbook/contents/react-event-handling/zh-CN.mdx
new file mode 100644
index 0000000000..31e0d82739
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-event-handling/zh-CN.mdx
@@ -0,0 +1,358 @@
+---
+title: React 采访中的事件处理
+description: React 合成事件系统的指南，涵盖处理、拦截和优化鼠标、输入、表单、焦点和键盘事件以在面试中取得成功的最佳实践
+---
+
+React 使用一个**合成事件系统**来提供一种在不同浏览器中处理事件的一致方式。与原生 JavaScript 事件不同，React 将原生事件包装到一个名为 `SyntheticEvent` 的标准化对象中，这提高了性能并确保了跨浏览器兼容性。
+
+## React 如何处理事件
+
+React 的**合成事件系统**在不同浏览器之间提供了一致性，并针对性能进行了优化。
+
+在原生 JavaScript 中，事件监听器的添加方式如下：
+
+```js
+document.getElementById('btn').addEventListener('click', (event) => {
+  console.log('Clicked!');
+});
+```
+
+在 React 中，事件附加到元素的方式如下：
+
+```tsx
+<button onClick={() => console.log('Clicked!')}>点击我</button>
+```
+
+但是，由于 React 使用事件委托，并且事件附加到 React 应用程序的根目录（而不是文档根目录），而不是单个元素，以提高性能。
+
+React 将原生事件包装到 `SyntheticEvent` 中，以提高效率和兼容性。
+
+与原生 JavaScript 中的事件监听器类似，React 的 `SyntheticEvent` 作为第一个参数传递给事件处理程序回调。在大多数情况下，它们可以被视为原始浏览器 `Event` 对象，并且也可以在 `SyntheticEvent` 上访问 [`Event` 属性和方法](https://developer.mozilla.org/en-US/docs/Web/API/Event)。
+
+```jsx
+function handleClick(event) {
+  console.log(event); // React SyntheticEvent
+  console.log(event.nativeEvent); // 原生浏览器事件
+  console.log(event.target); // <button>...</button>
+}
+
+<button onClick={handleClick}>点击我</button>;
+```
+
+在 react.dev 上进一步阅读：[响应事件](https://react.dev/learn/responding-to-events)
+
+## React 中的事件处理程序
+
+React 中的事件处理程序是响应用户交互的函数，例如点击、按键、表单提交或鼠标移动。
+
+### 鼠标事件
+
+当用户与鼠标交互（点击、悬停等）时，鼠标事件处理程序会触发。鼠标事件可以添加到大多数元素，但出于可访问性目的，某些处理程序（如 `onClick`）应仅添加到交互式元素，例如 `<button>`、`<a>`、`<input>`，否则屏幕阅读器用户将无法触发这些交互。
+
+鼠标事件处理程序接收 [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) 参数。
+
+```jsx
+function ClickButton() {
+  function handleClick() {
+    alert('Button clicked!');
+  }
+
+  return <button onClick={handleClick}>Click me</button>;
+}
+```
+
+您应该了解以下鼠标事件：
+
+* `onClick`：当元素被点击时触发（鼠标按下 + 鼠标抬起）。常用于面试
+* `onMouseEnter`：当鼠标进入元素时触发。不冒泡（用于悬停交互）。有时用于面试
+* `onMouseLeave`：当鼠标离开元素时触发。不冒泡。有时用于面试
+* `onMouseOver`：当鼠标进入元素或其子元素时触发。会冒泡。有时用于面试
+* `onMouseOut`：当鼠标离开元素或其子元素时触发。会冒泡。有时用于面试
+* `onMouseDown`：当鼠标按钮被按下时触发。很少用于面试，在大多数情况下，您应该使用 `onClick`
+* `onMouseUp`：当鼠标按钮被释放时触发。很少用于面试，在大多数情况下，您应该使用 `onClick`
+* `onDoubleClick`：当元素被双击时触发。很少用于面试
+
+如果您被提问，您应该能够解释 `onMouseEnter`/`onMouseLeave` 和 `onMouseOver`/`onMouseOut` 之间的区别——前者不[冒泡 DOM](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling)，而后者会。
+
+出于可访问性目的，请记住不要将 `onClick` 处理程序添加到非交互式（不可点击和不可聚焦）元素。
+
+90% 的情况下，你只会对 `<button>` 使用 `onClick`。`<a href="#" onClick={...}>` 也是一种反模式，只需使用 `<button onClick={...}>` 并相应地修改样式。
+
+`onMouseEnter`/`onMouseLeave` 和 `onMouseOver`/`onMouseOut` 可用于添加悬停样式，最好使用 CSS 的 `:hover` 伪类。当 CSS 能够完成这项工作时，无需使用 JavaScript。
+
+### 输入事件
+
+当用户输入发生变化（打字、粘贴等）时，会触发输入事件处理程序，并且可以附加到 `<input>` 和 `<textarea>` 元素上。
+
+输入事件处理程序接收 [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent) 作为参数。
+
+```jsx
+function Foo() {
+  const [value, setValue] = useState('');
+
+  return (
+    <input
+      onChange={(event) => setValue(event.target.value)}
+      value={value}
+      placeholder="Type here"
+    />
+  );
+}
+```
+
+您应该了解以下输入事件：
+
+* `onChange`：当输入的值发生变化时触发
+* `onInput`：当用户输入数据时触发（类似于 `onChange`）。大多数情况下，请使用 `onChange` 代替
+
+#### `'change'` 和 `'input'` 事件有什么区别？
+
+对于 React 中的大多数事件处理程序，`onEventName` 属性与在浏览器中执行 `element.addEventListener('eventname', ...)` 相同。但对于 `onChange` 和 `onInput` 却并非如此！
+
+当输入字段的值发生变化时，`'change'` 和 `'input'` 事件都会检测到，但它们在行为和触发时间上存在关键差异。
+
+在浏览器中，对于某些元素，包括 `<input type="text">`，change 事件只有在控件失去焦点时才会触发。React 的 `onChange` 行为更像 DOM 的 `'input'` 事件，它会在每次按键时触发。
+
+当值被提交时（例如失去焦点），浏览器 `'change'` 事件被触发：
+
+* 在大多数情况下，它不会在每次按键时触发
+* 适用于 `<input>`、`<textarea>`、`<select>` 等
+
+浏览器 `'input'` 事件在每次输入更改时触发，包括打字、粘贴和语音输入：
+
+* 在 React 和 vanilla JS 中均有效
+* 立即在每次字符输入时触发（类似于 React 的 `onChange`）
+* 即使在使用语音输入、拖放和粘贴时也会触发
+
+**关键区别**
+
+| 特性 | `onChange` | `onInput` |
+| --- | --- | --- |
+| 每次按键触发？ | ✅（仅限 React） | ✅ |
+| 复制粘贴时触发？ | ✅ | ✅ |
+| 在 IME（中文、日文、韩文）上触发？ | ❌（仅在提交时） | ✅（在每个字符上） |
+| 在语音转文本输入时触发？ | ❌（仅在提交时） | ✅（在每个发音词上） |
+| 适用于 `contenteditable`？ | ❌ | ✅ |
+| 检测程序化值更新？ | ❌ | ✅ |
+
+在面试期间，很难知道何时使用 `onChange` 与 `onInput`，如有疑问，请使用 `onChange`。
+
+### 表单事件
+
+表单事件处理程序（`onSubmit` 和 `onReset`）仅适用于 `<form>` 元素。
+
+`onSubmit` 接收 [`SubmitEvent`](https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent) 参数，而 `onReset` 处理程序接收通用 [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) 参数。
+
+```jsx
+function SimpleForm() {
+  const [input, setInput] = useState('');
+
+  function handleSubmit(event) {
+    event.preventDefault(); // 阻止页面重新加载
+    alert(`表单提交内容：${input}`);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder="输入内容"
+      />
+      <button type="submit">提交</button>
+    </form>
+  );
+}
+```
+
+您应该了解以下表单事件：
+
+* `onSubmit`：在提交表单时触发。仅在由 `<form>` 中的 `<button type="submit">` 或 `<input type="submit">` 触发时触发
+* `onReset`：在重置表单时触发。仅在由 `<form>` 中的 `<button type="reset">` 或 `<input type="reset">` 触发时触发
+
+由于大多数时候你都在处理单页应用程序并且没有服务器，你可能需要在 `onSubmit` 处理程序中执行 `event.preventDefault()` 以防止整页刷新。
+
+### 焦点事件
+
+焦点事件处理程序适用于可以接收焦点的元素，例如表单元素和交互式元素，例如 `<input>`、`<textarea>`、`<select>`、`<button>`。
+
+焦点事件处理程序接收 [`FocusEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent) 参数。
+
+```jsx
+function FocusBlurExample() {
+  const [focused, setFocused] = useState(false);
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="点击以聚焦..."
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        style={{
+          border: focused ? '2px solid blue' : '2px solid gray',
+          outline: 'none',
+          padding: '5px',
+        }}
+      />
+      <p>{focused ? '输入已聚焦' : '输入已失焦'}</p>
+    </div>
+  );
+}
+```
+
+您应该了解以下表单事件：
+
+* `onFocus`：当元素获得焦点时触发
+* `onBlur`：当元素失去焦点时触发
+
+虽然上面的示例使用 `onFocus`/`onBlur` 来添加焦点样式，但最好使用 CSS 的 `:focus` 伪类。当 CSS 能够完成这项工作时，无需使用 JavaScript。
+
+请注意，`onFocus` 和 `onBlur` 可以在任何元素上触发，只要它们可以接收焦点，即使它们默认情况下无法接收焦点。向元素添加 `tabIndex` 将允许它接收焦点并变得可点击。这主要用于自定义设计系统 UI 组件，用于构建自定义表单组件，以便完全控制它们的外观。
+
+在面试期间，您可能不需要这样做，并且大多数情况下您应该只使用默认的焦点元素集。
+
+| 元素类型 | 支持 `onFocus` | 支持 `onBlur` | 备注 |
+| --- | --- | --- | --- |
+| 表单输入（`<input>`、`<textarea>`、`<select>`） | ✅ 是 | ✅ 是 | 标准用法 |
+| 交互式元素（`<button>`、`<a href="...">`、`<details>`） | ✅ 是 | ✅ 是 | 自动可聚焦 |
+| 定义了 `tabIndex` 的元素 | ✅ 是 | ✅ 是 | 变得可聚焦 |
+| 不可聚焦的元素（`<div>`、`<span>`、`<p>`） | ❌ 否 | ❌ 否 | 需要 `tabindex` |
+
+焦点处理是一个重要的可访问性主题，超出了本指南的范围。
+
+### 键盘事件
+
+键盘事件处理程序用于检测输入字段、按钮或任何可聚焦元素内的键盘交互。
+
+键盘事件处理程序接收 [`KeyboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) 参数。
+
+```jsx
+function handleKeyPress(event) {
+  if (event.key === 'Enter') {
+    alert('Enter key pressed!');
+  }
+}
+
+<input type="text" onKeyPress={handleKeyPress} />;
+```
+
+您应该了解以下键盘事件：
+
+* `onKeyDown`：按下某个键时触发。如果按住该键，则持续触发
+* `onKeyUp`：在按下某个键后释放时触发。用于检测输入后的最终按键输入
+* `onKeyPress`：（已弃用）类似于 `onKeyDown`，但不会检测特殊键
+
+键盘事件处理程序接收 `KeyboardEvent`，它具有一些属性，这些是您应该知道的：
+
+| 属性 | 描述 | 示例输出 (<kbd>A</kbd> 键) |
+| --- | --- | --- |
+| `event.key` | 键作为字符串 | `"a"` 或 `"A"` |
+| `event.code` | 键盘上的物理键 | `"KeyA"` |
+| `event.which` (已弃用) | 系统和实现相关的数值代码 | `65` (对于 `A`) |
+| `event.keyCode` (已弃用) | 系统和实现相关的数值代码 | `65` (对于 `A`) |
+| `event.shiftKey` | 如果按住 `Shift` 键，则为 `true` | `true / false` |
+| `event.ctrlKey` | 如果按住 `Ctrl` 键，则为 `true` | `true / false` |
+
+这只是一个简短的列表，请在 [MDN 上查找 `KeyboardEvent` 属性的完整列表](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#instance_properties)。
+
+`event.key`、`event.code`、`event.which` 和 `event.keyCode` 看起来非常相似。对于面试，只需知道您应该使用 `event.key`。
+
+**在 React 中处理键盘事件的最佳实践**
+
+* 使用 `onKeyDown` 而不是 `onKeyPress`（因为 `onKeyPress` 已弃用）
+* 使用 `event.key` 而不是 `event.which` 或 `event.keyCode`（它们已弃用）
+* 在需要时使用 `event.preventDefault()`（例如，阻止 `Enter` 提交表单）
+* 为不可聚焦的元素添加 `tabIndex`（例如，`<div>` 需要它来接收键盘事件）
+* 妥善处理可访问性（键盘导航应保持一致）
+
+在大多数情况下，您在面试期间不需要使用键盘事件。使用 `onChange`/`onInput` 检测 `<input>` 中的文本更改更好，使用 `<form>` 上的 `onSubmit` 检测 <kbd>Enter</kbd> 键以提交表单更好。
+
+## 事件拦截
+
+React 中的事件拦截是指在事件到达其最终目标之前捕获、修改或停止事件行为的能力。
+
+### 停止事件传播
+
+在 React 中拦截事件的一种方法是使用 `event.stopPropagation()`，它阻止事件冒泡到父组件。默认情况下，React 中的事件遵循冒泡阶段，这意味着它们从目标元素向上传播到其祖先。
+
+但是，在某些情况下，这种行为是不可取的，例如，当单击下拉列表内部时，不应关闭整个菜单，因为单击事件会冒泡到父侦听器。
+
+```jsx
+function Dropdown() {
+  function handleParentClick() {
+    console.log('Parent div clicked!');
+  }
+
+  function handleChildClick(event: React.MouseEvent<HTMLDivElement>) {
+    event.stopPropagation(); // Prevents bubbling to the parent
+    console.log('Dropdown item clicked!');
+  }
+
+  return (
+    <div
+      onClick={handleParentClick}
+      style={{ padding: '20px', border: '2px solid black' }}>
+      <div
+        onClick={handleChildClick}
+        style={{ padding: '10px', border: '1px solid blue' }}>
+        Click inside dropdown
+      </div>
+    </div>
+  );
+}
+```
+
+在面试中，不应该有很多需要嵌套 `onClick` 处理程序的情况。如果这样做，请考虑是否需要在内部事件处理程序中使用 `event.stopPropagation()`。
+
+在 react.dev 上进一步阅读：[事件传播](https://react.dev/learn/responding-to-events#event-propagation)
+
+### 阻止默认行为
+
+另一种形式的事件拦截是使用 `event.preventDefault()` 阻止默认的浏览器行为。某些 HTML 元素，例如 `<form>`、`<a>` 和 `<input>`，具有内置行为（例如，表单提交、链接导航）。如果你想使用 React 中的自定义逻辑处理这些交互，你必须阻止它们的默认行为。
+
+```jsx
+function PreventFormSubmit() {
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault(); // 阻止全页面重新加载
+    console.log('表单提交，没有重新加载！');
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input type="text" placeholder="输入内容" />
+      <button type="submit">提交</button>
+    </form>
+  );
+}
+```
+
+如果没有 `event.preventDefault()`，点击“提交”按钮将导致页面刷新，从而中断 React 应用程序。通过拦截事件，我们可以在不影响用户体验的情况下以编程方式处理表单提交。
+
+在 react.dev 上进一步阅读：[阻止默认行为](https://react.dev/learn/responding-to-events#preventing-default-behavior)
+
+## 面试的最佳实践
+
+* 如果存在过度重新渲染的性能问题，请避免内联事件处理程序并使用 `useCallback` 进行记忆化
+* 对表单输入使用 `onChange` 而不是 `onInput`
+* 使用 `onMouseEnter`/`onMouseLeave` 而不是 `onMouseOver`/`onMouseOut` 以防止冒泡问题
+* 对于对性能敏感的事件，如 `onScroll`，对事件处理程序进行去抖动或节流
+
+## 面试你需要知道的
+
+* **事件系统**：解释 React 中的事件系统如何工作以及它与浏览器事件系统的区别
+* **常见事件**：常见的鼠标事件（`onClick`、`onMouseEnter`、`onMouseLeave`）、输入事件（`onChange`）、表单事件（`onSubmit`）和键盘事件（`onKeyDown`）
+* **事件拦截**：何时以及如何使用事件拦截
+
+## 练习题
+
+**编码**：
+
+* [温度转换器](/questions/user-interface/temperature-converter/react?framework=react\&tab=coding)
+* [骰子滚动器](/questions/user-interface/dice-roller/react?framework=react\&tab=coding)
+* [网格灯](/questions/user-interface/grid-lights/react?framework=react\&tab=coding)
+* [星级评分](/questions/user-interface/star-rating/react?framework=react\&tab=coding)
+* [秒表](/questions/user-interface/stopwatch/react?framework=react\&tab=coding)
+* [验证码输入](/questions/user-interface/auth-code-input/react?framework=react\&tab=coding)
+* [可选择的单元格](/questions/user-interface/selectable-cells/react?framework=react\&tab=coding)
diff --git a/packages/react-interview-playbook/contents/react-forms/en-US.langnostic.json b/packages/react-interview-playbook/contents/react-forms/en-US.langnostic.json
new file mode 100644
index 0000000000..2f09139df5
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-forms/en-US.langnostic.json
@@ -0,0 +1,203 @@
+{
+  "frontmatter": {
+    "title": "f41e91bd",
+    "description": "c4bc4857"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "428b0dd7",
+        "2a416cf8",
+        "620c99c7",
+        "f03d6fd1",
+        "6fdaa146",
+        "6b1e8e0c",
+        "7e8d7472",
+        "827485a0",
+        "aba684ca",
+        "d1b1d655",
+        "d2afe33f",
+        "626160b8",
+        "537c06d9",
+        "c518d24b",
+        "14b96197",
+        "53448fa5",
+        "d5c36b38",
+        "55cd8d65",
+        "8dd64bce",
+        "2ea4b956",
+        "a282a542",
+        "4f07c698",
+        "844d9352",
+        "b3957f0f",
+        "568db67c",
+        "d537896e",
+        "a600f0a9",
+        "8624e6db",
+        "1acd4a80",
+        "3e4e1864",
+        "e8049c38",
+        "a6975bf9",
+        "b73fc093",
+        "93efcd0f",
+        "4533d347",
+        "90a8151d",
+        "c60301e0",
+        "505b6583",
+        "4427457f",
+        "85c2512c",
+        "fa36a39a",
+        "3a40d99a",
+        "687bfc4a",
+        "b7421090",
+        "3ecd8880",
+        "ba0611bb",
+        "8d1a96b4",
+        "7ff37252",
+        "9e8442f0",
+        "ad0ac081",
+        "5604fd5c",
+        "5d2d98b3",
+        "8ada7e59",
+        "aa54b7de",
+        "32679958",
+        "98f2af09",
+        "ade4a339",
+        "2d5fda08",
+        "3e70648",
+        "45942330",
+        "80fec7b2",
+        "aec57995",
+        "b6890cd9",
+        "9a709817",
+        "73b85faf",
+        "d5b94d1d",
+        "6d871610",
+        "67f3e0a7",
+        "9f026523",
+        "15de5110",
+        "b4346ea",
+        "4388d4db",
+        "bcafa699",
+        "dd11248",
+        "d590ebc8",
+        "40092b81",
+        "e4e954ba",
+        "ec950474",
+        "c6c5c6f5",
+        "5ed144c2",
+        "4a526982",
+        "de0e7d0a",
+        "d2071647",
+        "2646d6df",
+        "c65d5e70",
+        "395c4d95",
+        "70509c9a",
+        "991091b6",
+        "7d043b1e",
+        "8b0755b8",
+        "3276416d",
+        "53d8069b",
+        "25bb8a4d"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "428b0dd7",
+        "2a416cf8",
+        "620c99c7",
+        "f03d6fd1",
+        "6fdaa146",
+        "6b1e8e0c",
+        "7e8d7472",
+        "827485a0",
+        "aba684ca",
+        "d1b1d655",
+        "d2afe33f",
+        "626160b8",
+        "537c06d9",
+        "c518d24b",
+        "14b96197",
+        "53448fa5",
+        "d5c36b38",
+        "55cd8d65",
+        "8dd64bce",
+        "2ea4b956",
+        "a282a542",
+        "4f07c698",
+        "844d9352",
+        "b3957f0f",
+        "568db67c",
+        "d537896e",
+        "a600f0a9",
+        "8624e6db",
+        "1acd4a80",
+        "3e4e1864",
+        "e8049c38",
+        "a6975bf9",
+        "b73fc093",
+        "93efcd0f",
+        "4533d347",
+        "90a8151d",
+        "c60301e0",
+        "505b6583",
+        "4427457f",
+        "85c2512c",
+        "fa36a39a",
+        "3a40d99a",
+        "687bfc4a",
+        "b7421090",
+        "3ecd8880",
+        "ba0611bb",
+        "8d1a96b4",
+        "7ff37252",
+        "9e8442f0",
+        "ad0ac081",
+        "5604fd5c",
+        "5d2d98b3",
+        "8ada7e59",
+        "aa54b7de",
+        "32679958",
+        "98f2af09",
+        "ade4a339",
+        "2d5fda08",
+        "3e70648",
+        "45942330",
+        "80fec7b2",
+        "aec57995",
+        "b6890cd9",
+        "9a709817",
+        "73b85faf",
+        "d5b94d1d",
+        "6d871610",
+        "67f3e0a7",
+        "9f026523",
+        "15de5110",
+        "b4346ea",
+        "4388d4db",
+        "bcafa699",
+        "dd11248",
+        "d590ebc8",
+        "40092b81",
+        "e4e954ba",
+        "ec950474",
+        "c6c5c6f5",
+        "5ed144c2",
+        "4a526982",
+        "de0e7d0a",
+        "d2071647",
+        "2646d6df",
+        "c65d5e70",
+        "395c4d95",
+        "70509c9a",
+        "991091b6",
+        "7d043b1e",
+        "8b0755b8",
+        "3276416d",
+        "53d8069b",
+        "25bb8a4d"
+      ]
+    }
+  }
+}
diff --git a/packages/react-interview-playbook/contents/react-forms/en-US.mdx b/packages/react-interview-playbook/contents/react-forms/en-US.mdx
new file mode 100644
index 0000000000..e57d7601f6
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-forms/en-US.mdx
@@ -0,0 +1,793 @@
+---
+title: Forms in React Interviews
+description: Guide to building interactive React forms, covering controlled vs uncontrolled components, diverse input types, complex state management, and robust error handling and validation strategies
+---
+
+Forms in React are a crucial part of building interactive applications, allowing users to input and submit data. In React, it is common to control form elements using state, making them dynamic yet predictable.
+
+## Controlled vs uncontrolled form components
+
+In React, form inputs can be managed in two ways: **controlled** and **uncontrolled**. The main difference lies in how the form data is handled.
+
+### Controlled form components
+
+In a **controlled form component**, React manages the form element's state. The value of the input is stored in a state variable and updated via an `onChange` handler.
+
+```jsx
+import { useState } from 'react';
+
+function ControlledForm() {
+  const [name, setName] = useState('');
+
+  function handleChange(event) {
+    setName(event.target.value);
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    alert(`Submitted Name: ${name}`);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Name:
+        <input type="text" value={name} onChange={handleChange} />
+      </label>
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+In controlled components, the input value is stored in React state (`name`). The `onChange` handler updates the state as the user types. This ensures the value is always controlled by React.
+
+### Uncontrolled form components
+
+In an **uncontrolled form component**, the form element's value is managed by the DOM itself rather than React state.
+
+```jsx
+import { useRef } from 'react';
+
+function UncontrolledForm() {
+  const nameRef = useRef();
+
+  function handleSubmit(event) {
+    event.preventDefault();
+
+    // Access form values using `FormData`
+    const formData = new FormData(event.target);
+    console.log('Name:', formData.get('name'));
+
+    // Alternatively, access the <input> via a ref
+    console.log('Name:', nameRef.current.value);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Name:
+        <input type="text" name="name" ref={nameRef} />
+      </label>
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+In uncontrolled components, the input value is not stored in React state. To access the form data upon submission, we can either:
+
+1. **Use `FormData`**: Access the form element directly from `event.target`, create a `FormData` instance from the form, and retrieve values using `formData.get('name)` (corresponds to the `name` attribute on `<input>`)
+2. **Use refs**: Use `useRef()` to reference the `<input>` field directly. The input value can be accessed via `nameRef.current.value`
+
+### When to use which?
+
+| Feature | Controlled form | Uncontrolled form |
+| --- | --- | --- |
+| **Where state is stored** | React state (`useState`) | Native DOM |
+| **Performance** | Re-rendering needed on update, might cause issues in large forms | More performant for simple use cases |
+| **Validation** | Easy to implement | Requires manual validation |
+| **Form reset** | Easy (`setState("")`) | Needs `ref.current.value = ""` or trigger a `'reset'` event |
+| **Use case** | Dynamic forms, validation, real-time updates | Simple forms, file uploads, or integrating non-React code |
+
+- Use **controlled form components** when you need to validate, manipulate, or track user input dynamically (e.g. toggling visibility of certain form fields based on previous responses) or nested form state
+- Use **uncontrolled form components** when working with large forms, integrating with non-React code, or optimizing performance
+
+In interviews, considering the forms usually do not have many fields, both controlled components and uncontrolled approaches are viable. Personally, we'd lean towards controlled components since you might be asked to reset the values, add validation-on-typing, etc and it'd be easier to implement.
+
+## Handling different input types
+
+The following are code examples for various input types using the controlled approach, meaning their values are stored in state and updated via `onChange` handlers.
+
+### Text input
+
+A controlled text input updates its value in state as the user types.
+
+```jsx
+import { useState } from 'react';
+
+function TextInputExample() {
+  const [text, setText] = useState('');
+
+  return (
+    <div>
+      <label htmlFor="name-input">Name</label>
+      <input
+        id="name-input"
+        type="text"
+        value={text}
+        onChange={(event) => setText(event.target.value)}
+      />
+      <p>Entered Text: {text}</p>
+    </div>
+  );
+}
+```
+
+- The input field's value is controlled by React state (`text`)
+- The `onChange` event updates state with `setText(event.target.value)`
+- This ensures React manages the input value dynamically
+
+There are many other text-based values for the `type` attribute, each with various purposes:
+
+| `type` | Purpose | Built-in validation |
+| --- | --- | --- |
+| `text` | General text input | No |
+| `number` | Numerical text input | Yes, only numbers allowed. Additional validation via `min`/`max` attributes |
+| `email` | Email addresses | Yes, must contain `@` |
+| `password` | Secure password input | No, but input is masked |
+| `search` | Search field with a clear button | No |
+| `tel` | Telephone numbers | No. Additional validation via `pattern` attribute |
+| `url` | URLs | Yes, must start with `http://` or `https://` |
+| `datetime-local` | Date and time selection | Yes |
+| `color` | Color picker | Yes |
+
+**Recommendations:**
+
+- Use **`text`** for generic input fields
+- Use **`number`** when you expect only numeric values and built-in validation for numbers
+- Use **`email`**, **`url`**, and **`tel`** to take advantage of built-in validation
+- Use **`password`** for secure text entry
+- Use **`search`** for fields optimized for searching
+- Use **`datetime-local`** when date & time selection is needed
+- Use **`color`** for color selection
+
+### Checkbox input
+
+A checkbox is a **boolean value** (checked or unchecked).
+
+```jsx
+import { useState } from 'react';
+
+function CheckboxExample() {
+  const [isChecked, setIsChecked] = useState(false);
+
+  return (
+    <div>
+      <input
+        id="checkbox-input"
+        type="checkbox"
+        checked={isChecked}
+        onChange={(event) => setIsChecked(event.target.checked)}
+      />
+      <label htmlFor="checkbox-input">Agree to terms and conditions</label>
+      <p>Checkbox is {isChecked ? 'checked' : 'unchecked'}</p>
+    </div>
+  );
+}
+```
+
+- The `checked` attribute is bound to `isChecked` state
+- The `onChange` event updates state with `setIsChecked(event.target.checked)`
+- This allows React to track the checkbox's checked status
+
+### Radio group
+
+Radio buttons are used when selecting **one option from multiple choices**.
+
+```jsx
+import { useState } from 'react';
+
+function RadioGroupExample() {
+  const [gender, setGender] = useState('');
+
+  return (
+    <div>
+      <div>
+        <input
+          id="radio-male"
+          type="radio"
+          name="gender"
+          value="male"
+          checked={gender === 'male'}
+          onChange={(event) => setGender(event.target.value)}
+        />
+        <label htmlFor="radio-male">Male</label>
+      </div>
+      <div>
+        <input
+          id="radio-female"
+          type="radio"
+          name="gender"
+          value="female"
+          checked={gender === 'female'}
+          onChange={(event) => setGender(event.target.value)}
+        />
+        <label htmlFor="radio-female">Female</label>
+      </div>
+      <p>Selected gender: {gender}</p>
+    </div>
+  );
+}
+```
+
+- The `name="gender"` ensures only one option can be selected
+- The `checked` attribute checks if the current value matches the state (`gender === "male"` or `"female"`)
+- The `onChange` updates state with the selected value
+
+### Textarea
+
+A `textarea` is used for multi-line text input.
+
+```jsx
+import { useState } from 'react';
+
+function TextAreaExample() {
+  const [bio, setBio] = useState('');
+
+  return (
+    <div>
+      <label htmlFor="bio-input">Bio:</label>
+      <textarea
+        id="bio-input"
+        value={bio}
+        onChange={(event) => setBio(event.target.value)}
+      />
+      <p>Bio Preview: {bio}</p>
+    </div>
+  );
+}
+```
+
+- Unlike HTML, React uses `value` instead of setting text inside `<textarea>`
+- The `onChange` updates the state with `setBio(event.target.value)`, ensuring React controls the input
+
+### Select dropdown
+
+A `<select>` dropdown allows users to choose one option.
+
+```jsx
+import { useState } from 'react';
+
+function SelectExample() {
+  const [fruit, setFruit] = useState('apple');
+
+  return (
+    <div>
+      <label htmlFor="favorite-fruit">Favorite fruit</label>
+      <select
+        id="favorite-fruit"
+        value={fruit}
+        onChange={(event) => setFruit(event.target.value)}>
+        <option value="apple">Apple</option>
+        <option value="banana">Banana</option>
+        <option value="orange">Orange</option>
+      </select>
+      <p>Selected fruit: {fruit}</p>
+    </div>
+  );
+}
+```
+
+- The `value` attribute is bound to the state (`fruit`)
+- The `onChange` updates the state when the user selects an option
+- This ensures the dropdown value is controlled by React
+
+### Summary
+
+| Input type | Key element | Key value attribute | State update |
+| --- | --- | --- | --- |
+| Text input | `<input>` | `value` | `setState(event.target.value)` |
+| Checkbox input | `<input>` | `checked` | `setState(event.target.checked)` |
+| Radio group | `<input>` | `checked` | `setState(event.target.value)` |
+| Textarea | `<textarea>` | `value` | `setState(event.target.value)` |
+| Select dropdown | `<select>` | `value` | `setState(event.target.value)` |
+
+## Handling complex form state
+
+When working with complex forms in React, managing state efficiently is crucial to ensure good performance and maintainability. Forms become complex when they include multiple input fields, dynamic field additions, nested structures, or advanced validation. Below are some strategies to handle complex form state effectively.
+
+### Using `useReducer` for complex forms
+
+For forms with multiple fields and state dependencies, `useReducer` provides a structured way to manage state updates.
+
+```jsx
+import { useReducer } from 'react';
+
+// Define reducer function
+function formReducer(state, action) {
+  switch (action.type) {
+    case 'UPDATE_FIELD':
+      return { ...state, [action.field]: action.value };
+    case 'RESET':
+      return initialState;
+    default:
+      return state;
+  }
+}
+
+// Initial form state
+const initialState = {
+  name: '',
+  email: '',
+  age: '',
+};
+
+function ComplexFormWithReducer() {
+  const [state, dispatch] = useReducer(formReducer, initialState);
+
+  function handleChange(event) {
+    dispatch({
+      type: 'UPDATE_FIELD',
+      field: event.target.name,
+      value: event.target.value,
+    });
+  }
+
+  function handleReset() {
+    return dispatch({ type: 'RESET' });
+  }
+
+  return (
+    <form>
+      <input
+        type="text"
+        name="name"
+        value={state.name}
+        onChange={handleChange}
+        placeholder="Name"
+      />
+      <input
+        type="email"
+        name="email"
+        value={state.email}
+        onChange={handleChange}
+        placeholder="Email"
+      />
+      <input
+        type="number"
+        name="age"
+        value={state.age}
+        onChange={handleChange}
+        placeholder="Age"
+      />
+      <button type="button" onClick={handleReset}>
+        Reset
+      </button>
+    </form>
+  );
+}
+```
+
+- Keeps state updates predictable and centralized
+- Useful for forms with conditional logic and dependencies
+- Prevents unnecessary re-renders compared to `useState`
+
+### Handling dynamic fields
+
+When a form allows users to **add or remove fields dynamically** (e.g., multiple email inputs), state should be an array
+
+```jsx
+import { useState } from 'react';
+
+function DynamicForm() {
+  const [fields, setFields] = useState([{ id: 1, value: '' }]);
+
+  function addField() {
+    setFields([...fields, { id: fields.length + 1, value: '' }]);
+  }
+
+  function removeField(id) {
+    setFields(fields.filter((field) => field.id !== id));
+  }
+
+  function handleChange(id, event) {
+    const newFields = fields.map((field) =>
+      field.id === id ? { ...field, value: event.target.value } : field,
+    );
+    setFields(newFields);
+  }
+
+  return (
+    <form>
+      {fields.map((field) => (
+        <div key={field.id}>
+          <input
+            type="text"
+            value={field.value}
+            onChange={(event) => handleChange(field.id, event)}
+            placeholder="Enter value"
+          />
+          <button type="button" onClick={() => removeField(field.id)}>
+            Remove
+          </button>
+        </div>
+      ))}
+      <button type="button" onClick={addField}>
+        Add Field
+      </button>
+    </form>
+  );
+}
+```
+
+- Useful for forms where users **can add multiple entries** (e.g., multiple email addresses)
+- Keeps UI flexible without unnecessary predefined fields
+
+### Using form libraries for complex forms
+
+Instead of managing everything manually, libraries like [React Hook Form](https://react-hook-form.com/) and [Formik](https://formik.org/) (unmaintained) simplify complex form state handling.
+
+```jsx
+import { useForm, useFieldArray } from 'react-hook-form';
+
+function FormWithReactHookForm() {
+  const { register, handleSubmit, control } = useForm({
+    defaultValues: { emails: [{ value: '' }] },
+  });
+
+  const { fields, append, remove } = useFieldArray({ control, name: 'emails' });
+
+  function onSubmit(data) {
+    console.log(data);
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {fields.map((field, index) => (
+        <div key={field.id}>
+          <input {...register(`emails.${index}.value`)} placeholder="Email" />
+          <button type="button" onClick={() => remove(index)}>
+            Remove
+          </button>
+        </div>
+      ))}
+      <button type="button" onClick={() => append({ value: '' })}>
+        Add Email
+      </button>
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+- **Reduces re-renders** by using refs instead of state
+- **Easy validation** with built-in support for validation libraries like Zod, Yup, and Joi
+- **Handles dynamic fields efficiently** with `useFieldArray`
+
+### Handling nested form structures
+
+Sometimes, forms have nested objects (e.g., address with street, city, and zip code).
+
+```jsx
+import { useState } from 'react';
+
+function NestedForm() {
+  const [form, setForm] = useState({
+    name: '',
+    address: { street: '', city: '', zip: '' },
+  });
+
+  function handleChange(event) {
+    const { name, value } = event.target;
+    setForm((prev) => ({
+      ...prev,
+      address: { ...prev.address, [name]: value },
+    }));
+  }
+
+  return (
+    <form>
+      <input
+        type="text"
+        name="name"
+        placeholder="Name"
+        value={form.name}
+        onChange={(event) => setForm({ ...form, name: event.target.value })}
+      />
+      <input
+        type="text"
+        name="street"
+        placeholder="Street"
+        value={form.address.street}
+        onChange={handleChange}
+      />
+      <input
+        type="text"
+        name="city"
+        placeholder="City"
+        value={form.address.city}
+        onChange={handleChange}
+      />
+      <input
+        type="text"
+        name="zip"
+        placeholder="ZIP Code"
+        value={form.address.zip}
+        onChange={handleChange}
+      />
+    </form>
+  );
+}
+```
+
+- Helps manage related data **cleanly** in a single object
+- Useful for **address, profile, or nested form sections**
+
+### Best practices for complex form state
+
+- Use `useReducer` for structured state updates
+- Use dynamic fields for flexible input handling
+- Leverage form libraries like React Hook Form or Formik to simplify validation and state management
+- Use nested objects when dealing with grouped form data
+
+## Error handling and validation strategies
+
+Handling errors and validating user input is essential for creating a smooth user experience in React forms. Validation ensures that users enter the correct data before submission, preventing invalid entries and reducing backend errors. Below are various strategies to handle validation and errors efficiently.
+
+### Basic client-side validation with `useState`
+
+For simple forms, you can use **state-based validation** to check user input before submission.
+
+```jsx
+import { useState } from 'react';
+
+function BasicValidationForm() {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+
+  function handleSubmit(event) {
+    event.preventDefault();
+
+    if (!email) {
+      setError('Email is required');
+      return;
+    }
+
+    setError(''); // Clear error if validation passes
+    alert(`Submitted: ${email}`);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Email:
+        <input
+          type="email"
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+        />
+      </label>
+      {error && <p style={{ color: 'red' }}>{error}</p>}
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+- Uses local state to track errors
+- Displays error messages when validation fails
+- Simple but sufficient for basic validation needs
+
+### Validate input fields with regular expressions
+
+For **structured input fields** like emails, phone numbers, or passwords, **regex-based validation** is useful.
+
+```jsx
+function EmailValidationForm() {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+
+  const validateEmail = (email) => {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  };
+
+  function handleSubmit(event) {
+    event.preventDefault();
+
+    if (!validateEmail(email)) {
+      setError('Please enter a valid email address');
+      return;
+    }
+
+    setError('');
+    alert(`Valid Email: ${email}`);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Email:
+        <input
+          type="email"
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+        />
+      </label>
+      {error && <p style={{ color: 'red' }}>{error}</p>}
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+- Uses regex to check if an email follows a valid format
+- Provides real-time feedback to users
+
+### Browser built-in HTML5 validation
+
+Modern browsers provide built-in validation for certain input types.
+
+```jsx
+function HTML5ValidationForm() {
+  return (
+    <form>
+      <label>
+        Email:
+        <input type="email" required />
+      </label>
+      <br />
+      <label>
+        Password (Min 6 characters):
+        <input type="password" minLength="6" required />
+      </label>
+      <br />
+      <label>
+        Phone (Numbers only):
+        <input type="tel" pattern="[0-9]{10}" required />
+      </label>
+      <br />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+- `required`: Ensures the field is filled
+- `minLength`: Restricts input length
+- `pattern`: Uses regex directly in HTML
+- Works **without JavaScript**, improving performance
+
+### React Hook Form for efficient validation
+
+For complex forms, \*_React Hook Form_ provides optimized validation with minimal re-renders.
+
+```jsx
+import { useForm } from 'React Hook Form;
+
+function HookFormValidation() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
+
+  const onSubmit = (data) => alert(JSON.stringify(data));
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <label>
+        Email:
+        <input
+          type="email"
+          {...register('email', { required: 'Email is required' })}
+        />
+      </label>
+      {errors.email && <p style={{ color: 'red' }}>{errors.email.message}</p>}
+      <label>
+        Password:
+        <input
+          type="password"
+          {...register('password', {
+            required: 'Password is required',
+            minLength: {
+              value: 6,
+              message: 'Password must be at least 6 characters',
+            },
+          })}
+        />
+      </label>
+      {errors.password && (
+        <p style={{ color: 'red' }}>{errors.password.message}</p>
+      )}
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+- **Uses refs instead of state**, minimizing re-renders
+- **Better performance** for large forms
+- **Built-in error handling** with `formState.errors`
+
+### Handle server-side validation
+
+Even with client-side validation, backend validation is necessary. You need to know how to display error messages from API responses.
+
+```jsx
+import { useState } from 'react';
+
+function ServerErrorHandlingForm() {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+
+    try {
+      setError(null);
+
+      const response = await fetch('/api/validate-email', {
+        method: 'POST',
+        body: JSON.stringify({ email }),
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.message || 'Something went wrong');
+      }
+
+      alert('Submission successful!');
+    } catch (err) {
+      setError(err.message);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Email:
+        <input
+          type="email"
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+        />
+      </label>
+      {error && <p style={{ color: 'red' }}>{error}</p>}
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+- Uses `fetch()` to validate email on the server side
+- Displays API error messages if validation fails
+- Prevents security risks (e.g., hackers bypassing client-side validation)
+
+## Best practices for interviews
+
+- For simple forms, both controlled and uncontrolled inputs are viable
+- Wrap in `<form>` and leverage the browser form submit events
+- Use HTML5 validation where possible to reduce re-renders for better performance
+- Display clear error messages that guide users on how to fix their inputs
+- Merely client-side validation is insufficient. Server-side validation is also required to prevent security loopholes
+- If 3rd party libraries are allowed (e.g. in take home assignments), React Hook Form is a great addition that provides many useful features helps you achieve better performance at the same time
+
+## What you need to know for interviews
+
+- **Uncontrolled and controlled forms**: What's the difference, how to use either, and when to use
+- **Form controls**: Be able to build forms that use the various input types
+- **Complex forms**: How to build complex forms and the best practices
+- **Error handling and validation**: How to validate forms and show errors using native browser approaches and React approaches
+
+## Practice questions
+
+**Coding**:
+
+- [Generate Table](/questions/user-interface/generate-table/react?framework=react&tab=coding)
+- [Contact Form](/questions/user-interface/contact-form/react?framework=react&tab=coding)
+- [Mortgage Calculator](/questions/user-interface/mortgage-calculator/react?framework=react&tab=coding)
+- [Temperature Converter](/questions/user-interface/temperature-converter/react?framework=react&tab=coding)
+- [Flight Booker](/questions/user-interface/flight-booker/react?framework=react&tab=coding)
+- [Auth Code Input](/questions/user-interface/auth-code-input/react?framework=react&tab=coding)
diff --git a/packages/react-interview-playbook/contents/react-forms/zh-CN.mdx b/packages/react-interview-playbook/contents/react-forms/zh-CN.mdx
new file mode 100644
index 0000000000..1bacdada1a
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-forms/zh-CN.mdx
@@ -0,0 +1,793 @@
+---
+title: React 访谈中的表单
+description: 构建交互式 React 表单的指南，涵盖受控与非受控组件、各种输入类型、复杂的状态管理以及强大的错误处理和验证策略
+---
+
+React 中的表单是构建交互式应用程序的关键部分，允许用户输入和提交数据。在 React 中，使用状态控制表单元素很常见，这使得它们既动态又可预测。
+
+## 受控与非受控表单组件
+
+在 React 中，表单输入可以通过两种方式管理：**受控**和**非受控**。主要区别在于表单数据的处理方式。
+
+### 受控表单组件
+
+在**受控表单组件**中，React 管理表单元素的状态。输入的 value 存储在状态变量中，并通过 `onChange` 处理程序进行更新。
+
+```jsx
+import { useState } from 'react';
+
+function ControlledForm() {
+  const [name, setName] = useState('');
+
+  function handleChange(event) {
+    setName(event.target.value);
+  }
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    alert(`Submitted Name: ${name}`);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Name:
+        <input type="text" value={name} onChange={handleChange} />
+      </label>
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+在受控组件中，输入值存储在 React 状态 (`name`) 中。`onChange` 处理程序在用户输入时更新状态。这确保了该值始终由 React 控制。
+
+### 非受控表单组件
+
+在**非受控表单组件**中，表单元素的值由 DOM 本身管理，而不是 React 状态。
+
+```jsx
+import { useRef } from 'react';
+
+function UncontrolledForm() {
+  const nameRef = useRef();
+
+  function handleSubmit(event) {
+    event.preventDefault();
+
+    // Access form values using `FormData`
+    const formData = new FormData(event.target);
+    console.log('Name:', formData.get('name'));
+
+    // Alternatively, access the <input> via a ref
+    console.log('Name:', nameRef.current.value);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Name:
+        <input type="text" name="name" ref={nameRef} />
+      </label>
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+在非受控组件中，输入值未存储在 React 状态中。要访问提交时的表单数据，我们可以：
+
+1. **使用 `FormData`**：直接从 `event.target` 访问表单元素，从表单创建 `FormData` 实例，并使用 `formData.get('name')` 检索值（对应于 `<input>` 上的 `name` 属性）
+2. **使用 refs**：使用 `useRef()` 直接引用 `<input>` 字段。可以通过 `nameRef.current.value` 访问输入值
+
+### 何时使用哪个？
+
+| 特性 | 受控表单 | 非受控表单 |
+| --- | --- | --- |
+| **存储状态的位置** | React 状态 (`useState`) | 原生 DOM |
+| **性能** | 需要在更新时重新渲染，可能导致大型表单出现问题 | 对于简单用例更有效率 |
+| **验证** | 易于实现 | 需要手动验证 |
+| **表单重置** | 容易 (`setState("")`) | 需要 `ref.current.value = ""` 或触发 `'reset'` 事件 |
+| **用例** | 动态表单、验证、实时更新 | 简单表单、文件上传或集成非 React 代码 |
+
+* 当您需要动态验证、操作或跟踪用户输入（例如，根据先前的响应切换某些表单字段的可见性）或嵌套表单状态时，请使用**受控表单组件**
+* 当使用大型表单、与非 React 代码集成或优化性能时，请使用**非受控表单组件**
+
+在面试中，考虑到表单通常没有很多字段，受控组件和非受控方法都是可行的。就我个人而言，我们倾向于使用受控组件，因为您可能会被要求重置值、添加输入时验证等，并且它更容易实现。
+
+## 处理不同的输入类型
+
+以下是使用受控方法的各种输入类型的代码示例，这意味着它们的值存储在状态中，并通过 `onChange` 处理程序进行更新。
+
+### 文本输入
+
+受控文本输入会在用户输入时更新其在状态中的值。
+
+```jsx
+import { useState } from 'react';
+
+function TextInputExample() {
+  const [text, setText] = useState('');
+
+  return (
+    <div>
+      <label htmlFor="name-input">Name</label>
+      <input
+        id="name-input"
+        type="text"
+        value={text}
+        onChange={(event) => setText(event.target.value)}
+      />
+      <p>Entered Text: {text}</p>
+    </div>
+  );
+}
+```
+
+* 输入字段的值由 React 状态 (`text`) 控制
+* `onChange` 事件使用 `setText(event.target.value)` 更新状态
+* 这确保了 React 动态管理输入值
+
+`type` 属性有许多其他基于文本的值，每个值都有不同的用途：
+
+| `type` | 用途 | 内置验证 |
+| --- | --- | --- |
+| `text` | 常规文本输入 | 否 |
+| `number` | 数字文本输入 | 是，仅允许数字。通过 `min`/`max` 属性进行其他验证 |
+| `email` | 电子邮件地址 | 是，必须包含 `@` |
+| `password` | 安全密码输入 | 否，但输入被屏蔽 |
+| `search` | 带有清除按钮的搜索字段 | 否 |
+| `tel` | 电话号码 | 否。通过 `pattern` 属性进行其他验证 |
+| `url` | URL | 是，必须以 `http://` 或 `https://` 开头 |
+| `datetime-local` | 日期和时间选择 | 是 |
+| `color` | 颜色选择器 | 是 |
+
+**建议：**
+
+* 将 **`text`** 用于通用输入字段
+* 当您只需要数值和数字的内置验证时，使用 **`number`**
+* 使用 **`email`**、**`url`** 和 **`tel`** 来利用内置验证
+* 使用 **`password`** 进行安全文本输入
+* 使用 **`search`** 进行针对搜索优化的字段
+* 当需要日期和时间选择时，使用 **`datetime-local`**
+* 使用 **`color`** 进行颜色选择
+
+### 复选框输入
+
+复选框是一个**布尔值**（选中或未选中）。
+
+```jsx
+import { useState } from 'react';
+
+function CheckboxExample() {
+  const [isChecked, setIsChecked] = useState(false);
+
+  return (
+    <div>
+      <input
+        id="checkbox-input"
+        type="checkbox"
+        checked={isChecked}
+        onChange={(event) => setIsChecked(event.target.checked)}
+      />
+      <label htmlFor="checkbox-input">Agree to terms and conditions</label>
+      <p>Checkbox is {isChecked ? 'checked' : 'unchecked'}</p>
+    </div>
+  );
+}
+```
+
+* `checked` 属性绑定到 `isChecked` 状态
+* `onChange` 事件使用 `setIsChecked(event.target.checked)` 更新状态
+* 这允许 React 跟踪复选框的选中状态
+
+### 单选组
+
+当从**多个选项中选择一个选项**时，使用单选按钮。
+
+```jsx
+import { useState } from 'react';
+
+function RadioGroupExample() {
+  const [gender, setGender] = useState('');
+
+  return (
+    <div>
+      <div>
+        <input
+          id="radio-male"
+          type="radio"
+          name="gender"
+          value="male"
+          checked={gender === 'male'}
+          onChange={(event) => setGender(event.target.value)}
+        />
+        <label htmlFor="radio-male">Male</label>
+      </div>
+      <div>
+        <input
+          id="radio-female"
+          type="radio"
+          name="gender"
+          value="female"
+          checked={gender === 'female'}
+          onChange={(event) => setGender(event.target.value)}
+        />
+        <label htmlFor="radio-female">Female</label>
+      </div>
+      <p>Selected gender: {gender}</p>
+    </div>
+  );
+}
+```
+
+* `name="gender"` 确保只能选择一个选项
+* `checked` 属性检查当前值是否与状态匹配 (`gender === "male"` 或 `"female"`)
+* `onChange` 使用选定值更新状态
+
+### 文本区域
+
+`textarea` 用于多行文本输入。
+
+```jsx
+import { useState } from 'react';
+
+function TextAreaExample() {
+  const [bio, setBio] = useState('');
+
+  return (
+    <div>
+      <label htmlFor="bio-input">Bio:</label>
+      <textarea
+        id="bio-input"
+        value={bio}
+        onChange={(event) => setBio(event.target.value)}
+      />
+      <p>Bio Preview: {bio}</p>
+    </div>
+  );
+}
+```
+
+* 与 HTML 不同，React 使用 `value` 而不是在 `<textarea>` 中设置文本
+* `onChange` 使用 `setBio(event.target.value)` 更新状态，确保 React 控制输入
+
+### 选择下拉菜单
+
+`<select>` 下拉菜单允许用户选择一个选项。
+
+```jsx
+import { useState } from 'react';
+
+function SelectExample() {
+  const [fruit, setFruit] = useState('apple');
+
+  return (
+    <div>
+      <label htmlFor="favorite-fruit">Favorite fruit</label>
+      <select
+        id="favorite-fruit"
+        value={fruit}
+        onChange={(event) => setFruit(event.target.value)}>
+        <option value="apple">Apple</option>
+        <option value="banana">Banana</option>
+        <option value="orange">Orange</option>
+      </select>
+      <p>Selected fruit: {fruit}</p>
+    </div>
+  );
+}
+```
+
+* `value` 属性绑定到状态 (`fruit`)
+* 当用户选择一个选项时，`onChange` 更新状态
+* 这确保了下拉菜单的值由 React 控制
+
+### 总结
+
+| 输入类型 | 关键元素 | 关键值属性 | 状态更新 |
+| --- | --- | --- | --- |
+| 文本输入 | `<input>` | `value` | `setState(event.target.value)` |
+| 复选框输入 | `<input>` | `checked` | `setState(event.target.checked)` |
+| 单选组 | `<input>` | `checked` | `setState(event.target.value)` |
+| 文本区域 | `<textarea>` | `value` | `setState(event.target.value)` |
+| 选择下拉菜单 | `<select>` | `value` | `setState(event.target.value)` |
+
+## 处理复杂的表单状态
+
+在 React 中使用复杂表单时，有效地管理状态对于确保良好的性能和可维护性至关重要。当表单包含多个输入字段、动态字段添加、嵌套结构或高级验证时，表单会变得复杂。以下是一些有效处理复杂表单状态的策略。
+
+### 使用 `useReducer` 处理复杂表单
+
+对于具有多个字段和状态依赖关系的表单，`useReducer` 提供了一种结构化的方式来管理状态更新。
+
+```jsx
+import { useReducer } from 'react';
+
+// Define reducer function
+function formReducer(state, action) {
+  switch (action.type) {
+    case 'UPDATE_FIELD':
+      return { ...state, [action.field]: action.value };
+    case 'RESET':
+      return initialState;
+    default:
+      return state;
+  }
+}
+
+// Initial form state
+const initialState = {
+  name: '',
+  email: '',
+  age: '',
+};
+
+function ComplexFormWithReducer() {
+  const [state, dispatch] = useReducer(formReducer, initialState);
+
+  function handleChange(event) {
+    dispatch({
+      type: 'UPDATE_FIELD',
+      field: event.target.name,
+      value: event.target.value,
+    });
+  }
+
+  function handleReset() {
+    return dispatch({ type: 'RESET' });
+  }
+
+  return (
+    <form>
+      <input
+        type="text"
+        name="name"
+        value={state.name}
+        onChange={handleChange}
+        placeholder="Name"
+      />
+      <input
+        type="email"
+        name="email"
+        value={state.email}
+        onChange={handleChange}
+        placeholder="Email"
+      />
+      <input
+        type="number"
+        name="age"
+        value={state.age}
+        onChange={handleChange}
+        placeholder="Age"
+      />
+      <button type="button" onClick={handleReset}>
+        Reset
+      </button>
+    </form>
+  );
+}
+```
+
+* 保持状态更新可预测且集中
+* 适用于具有条件逻辑和依赖关系的表单
+* 与 `useState` 相比，可防止不必要的重新渲染
+
+### 处理动态字段
+
+当表单允许用户**动态添加或删除字段**（例如，多个电子邮件输入）时，状态应该是一个数组
+
+```jsx
+import { useState } from 'react';
+
+function DynamicForm() {
+  const [fields, setFields] = useState([{ id: 1, value: '' }]);
+
+  function addField() {
+    setFields([...fields, { id: fields.length + 1, value: '' }]);
+  }
+
+  function removeField(id) {
+    setFields(fields.filter((field) => field.id !== id));
+  }
+
+  function handleChange(id, event) {
+    const newFields = fields.map((field) =>
+      field.id === id ? { ...field, value: event.target.value } : field,
+    );
+    setFields(newFields);
+  }
+
+  return (
+    <form>
+      {fields.map((field) => (
+        <div key={field.id}>
+          <input
+            type="text"
+            value={field.value}
+            onChange={(event) => handleChange(field.id, event)}
+            placeholder="Enter value"
+          />
+          <button type="button" onClick={() => removeField(field.id)}>
+            Remove
+          </button>
+        </div>
+      ))}
+      <button type="button" onClick={addField}>
+        Add Field
+      </button>
+    </form>
+  );
+}
+```
+
+* 适用于用户**可以添加多个条目**的表单（例如，多个电子邮件地址）
+* 保持 UI 灵活，无需预定义的字段
+
+### 使用表单库处理复杂表单
+
+除了手动管理所有内容之外，像 [React Hook Form](https://react-hook-form.com/) 和 [Formik](https://formik.org/)（未维护）这样的库简化了复杂的表单状态处理。
+
+```jsx
+import { useForm, useFieldArray } from 'react-hook-form';
+
+function FormWithReactHookForm() {
+  const { register, handleSubmit, control } = useForm({
+    defaultValues: { emails: [{ value: '' }] },
+  });
+
+  const { fields, append, remove } = useFieldArray({ control, name: 'emails' });
+
+  function onSubmit(data) {
+    console.log(data);
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {fields.map((field, index) => (
+        <div key={field.id}>
+          <input {...register(`emails.${index}.value`)} placeholder="Email" />
+          <button type="button" onClick={() => remove(index)}>
+            Remove
+          </button>
+        </div>
+      ))}
+      <button type="button" onClick={() => append({ value: '' })}>
+        Add Email
+      </button>
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+* **减少重新渲染**，使用引用而不是状态
+* **轻松验证**，内置支持 Zod、Yup 和 Joi 等验证库
+* **高效处理动态字段**，使用 `useFieldArray`
+
+### 处理嵌套表单结构
+
+有时，表单具有嵌套对象（例如，包含街道、城市和邮政编码的地址）。
+
+```jsx
+import { useState } from 'react';
+
+function NestedForm() {
+  const [form, setForm] = useState({
+    name: '',
+    address: { street: '', city: '', zip: '' },
+  });
+
+  function handleChange(event) {
+    const { name, value } = event.target;
+    setForm((prev) => ({
+      ...prev,
+      address: { ...prev.address, [name]: value },
+    }));
+  }
+
+  return (
+    <form>
+      <input
+        type="text"
+        name="name"
+        placeholder="Name"
+        value={form.name}
+        onChange={(event) => setForm({ ...form, name: event.target.value })}
+      />
+      <input
+        type="text"
+        name="street"
+        placeholder="Street"
+        value={form.address.street}
+        onChange={handleChange}
+      />
+      <input
+        type="text"
+        name="city"
+        placeholder="City"
+        value={form.address.city}
+        onChange={handleChange}
+      />
+      <input
+        type="text"
+        name="zip"
+        placeholder="ZIP Code"
+        value={form.address.zip}
+        onChange={handleChange}
+      />
+    </form>
+  );
+}
+```
+
+* 帮助在一个对象中**干净地**管理相关数据
+* 适用于**地址、个人资料或嵌套表单部分**
+
+### 复杂表单状态的最佳实践
+
+* 使用 `useReducer` 进行结构化状态更新
+* 使用动态字段进行灵活的输入处理
+* 利用 React Hook Form 或 Formik 等表单库来简化验证和状态管理
+* 处理分组表单数据时使用嵌套对象
+
+## 错误处理和验证策略
+
+处理错误和验证用户输入对于在 React 表单中创建流畅的用户体验至关重要。验证可确保用户在提交前输入正确的数据，从而防止无效条目并减少后端错误。以下是有效处理验证和错误的各种策略。
+
+### 使用 `useState` 进行基本的客户端验证
+
+对于简单的表单，您可以使用**基于状态的验证**来在提交前检查用户输入。
+
+```jsx
+import { useState } from 'react';
+
+function BasicValidationForm() {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+
+  function handleSubmit(event) {
+    event.preventDefault();
+
+    if (!email) {
+      setError('Email is required');
+      return;
+    }
+
+    setError(''); // Clear error if validation passes
+    alert(`Submitted: ${email}`);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Email:
+        <input
+          type="email"
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+        />
+      </label>
+      {error && <p style={{ color: 'red' }}>{error}</p>}
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+* 使用本地状态来跟踪错误
+* 在验证失败时显示错误消息
+* 简单但足以满足基本的验证需求
+
+### 使用正则表达式验证输入字段
+
+对于**结构化输入字段**（如电子邮件、电话号码或密码），**基于正则表达式的验证**很有用。
+
+```jsx
+function EmailValidationForm() {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+
+  const validateEmail = (email) => {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  };
+
+  function handleSubmit(event) {
+    event.preventDefault();
+
+    if (!validateEmail(email)) {
+      setError('Please enter a valid email address');
+      return;
+    }
+
+    setError('');
+    alert(`Valid Email: ${email}`);
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Email:
+        <input
+          type="email"
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+        />
+      </label>
+      {error && <p style={{ color: 'red' }}>{error}</p>}
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+* 使用正则表达式检查电子邮件是否遵循有效格式
+* 为用户提供实时反馈
+
+### 浏览器内置的 HTML5 验证
+
+现代浏览器为某些输入类型提供了内置验证。
+
+```jsx
+function HTML5ValidationForm() {
+  return (
+    <form>
+      <label>
+        Email:
+        <input type="email" required />
+      </label>
+      <br />
+      <label>
+        Password (Min 6 characters):
+        <input type="password" minLength="6" required />
+      </label>
+      <br />
+      <label>
+        Phone (Numbers only):
+        <input type="tel" pattern="[0-9]{10}" required />
+      </label>
+      <br />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+* `required`：确保字段已填写
+* `minLength`：限制输入长度
+* `pattern`：直接在 HTML 中使用正则表达式
+* **无需 JavaScript** 即可工作，提高性能
+
+### 用于高效验证的 React Hook Form
+
+对于复杂的表单，\**React Hook Form* 提供了优化的验证，并最大限度地减少了重新渲染。
+
+```jsx
+import { useForm } from 'React Hook Form;
+
+function HookFormValidation() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm();
+
+  const onSubmit = (data) => alert(JSON.stringify(data));
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <label>
+        Email:
+        <input
+          type="email"
+          {...register('email', { required: 'Email is required' })}
+        />
+      </label>
+      {errors.email && <p style={{ color: 'red' }}>{errors.email.message}</p>}
+      <label>
+        Password:
+        <input
+          type="password"
+          {...register('password', {
+            required: 'Password is required',
+            minLength: {
+              value: 6,
+              message: 'Password must be at least 6 characters',
+            },
+          })}
+        />
+      </label>
+      {errors.password && (
+        <p style={{ color: 'red' }}>{errors.password.message}</p>
+      )}
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+* **使用 refs 而不是 state**，最大限度地减少重新渲染
+* **更好的性能**，适用于大型表单
+* **内置错误处理**，使用 `formState.errors`
+
+### 处理服务器端验证
+
+即使使用客户端验证，后端验证也是必要的。您需要知道如何显示来自 API 响应的错误消息。
+
+```jsx
+import { useState } from 'react';
+
+function ServerErrorHandlingForm() {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+
+    try {
+      setError(null);
+
+      const response = await fetch('/api/validate-email', {
+        method: 'POST',
+        body: JSON.stringify({ email }),
+        headers: { 'Content-Type': 'application/json' },
+      });
+
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.message || 'Something went wrong');
+      }
+
+      alert('Submission successful!');
+    } catch (err) {
+      setError(err.message);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Email:
+        <input
+          type="email"
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+        />
+      </label>
+      {error && <p style={{ color: 'red' }}>{error}</p>}
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+```
+
+* 使用 `fetch()` 在服务器端验证电子邮件
+* 如果验证失败，则显示 API 错误消息
+* 防止安全风险（例如，黑客绕过客户端验证）
+
+## 面试的最佳实践
+
+* 对于简单的表单，受控输入和非受控输入都是可行的
+* 包装在 `<form>` 中并利用浏览器表单提交事件
+* 尽可能使用 HTML5 验证，以减少重新渲染，从而获得更好的性能
+* 显示清晰的错误消息，指导用户如何修复其输入
+* 仅仅客户端验证是不够的。还需要服务器端验证以防止安全漏洞
+* 如果允许使用第三方库（例如，在家庭作业中），React Hook Form 是一个很好的补充，它提供了许多有用的功能，可以帮助您同时实现更好的性能
+
+## 面试中您需要知道的内容
+
+* **非受控和受控表单**：有什么区别，如何使用，以及何时使用
+* **表单控件**：能够构建使用各种输入类型的表单
+* **复杂表单**：如何构建复杂表单和最佳实践
+* **错误处理和验证**：如何使用原生浏览器方法和 React 方法验证表单并显示错误
+
+## 练习题
+
+**编码**：
+
+* [生成表格](/questions/user-interface/generate-table/react?framework=react\&tab=coding)
+* [联系表单](/questions/user-interface/contact-form/react?framework=react\&tab=coding)
+* [抵押贷款计算器](/questions/user-interface/mortgage-calculator/react?framework=react\&tab=coding)
+* [温度转换器](/questions/user-interface/temperature-converter/react?framework=react\&tab=coding)
+* [航班预订器](/questions/user-interface/flight-booker/react?framework=react\&tab=coding)
+* [身份验证代码输入](/questions/user-interface/auth-code-input/react?framework=react\&tab=coding)
diff --git a/packages/react-interview-playbook/contents/react-hooks/en-US.langnostic.json b/packages/react-interview-playbook/contents/react-hooks/en-US.langnostic.json
new file mode 100644
index 0000000000..3688bf91d2
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-hooks/en-US.langnostic.json
@@ -0,0 +1,283 @@
+{
+  "frontmatter": {
+    "title": "23f0ab10",
+    "description": "f843067d"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "82b4865",
+        "ff3af5b6",
+        "e3e32bdf",
+        "434831b6",
+        "f0056888",
+        "11118408",
+        "c17f9a6f",
+        "bd399f01",
+        "e862a333",
+        "b7887ba6",
+        "9cb99331",
+        "f150e088",
+        "15756da6",
+        "7e03dd6d",
+        "ff412395",
+        "69d4b32f",
+        "fdaf0d46",
+        "5bd18c81",
+        "52dff26c",
+        "fb29f864",
+        "6d0818d8",
+        "e199318c",
+        "2d35dfa6",
+        "1dea7231",
+        "9e21f210",
+        "11118408",
+        "5b27b4f6",
+        "22fab049",
+        "6cfdbb15",
+        "2658ef17",
+        "dc7c6dd",
+        "b7887ba6",
+        "93f141ea",
+        "51a28fab",
+        "1d48109",
+        "cba82030",
+        "4605b333",
+        "3b95a938",
+        "aa156ef0",
+        "3fe67e90",
+        "cdeeb5c6",
+        "ab6415d6",
+        "50bce4f3",
+        "c2622254",
+        "ea2c82e5",
+        "5c64496e",
+        "bed99c18",
+        "8089d3a",
+        "83f0640e",
+        "783608e4",
+        "e942ac6c",
+        "633dbd79",
+        "2ed4c04d",
+        "56c50882",
+        "14a0b7cc",
+        "607849a2",
+        "1c17a6f7",
+        "6077aff6",
+        "91e4bcd3",
+        "31e5495",
+        "b7887ba6",
+        "d04115eb",
+        "12822b13",
+        "57a0c6d4",
+        "f40b26ae",
+        "edc5a30c",
+        "3a37c526",
+        "edbcf1f",
+        "a31358c7",
+        "aa419228",
+        "f34aa64d",
+        "7426ec2a",
+        "d3fce293",
+        "b7887ba6",
+        "87edd084",
+        "66198f48",
+        "5c105d17",
+        "ae7390ce",
+        "cb996a87",
+        "1d6257c5",
+        "b7887ba6",
+        "c942382a",
+        "c6dbb4d2",
+        "4169ab15",
+        "e3b88fb9",
+        "9225c687",
+        "2a7816d0",
+        "7fbb1954",
+        "72db8c39",
+        "241bf752",
+        "e885fa33",
+        "2c3554d6",
+        "4226aa68",
+        "b3c591bf",
+        "9f4e0b91",
+        "f0a9fa22",
+        "3e5d6d8b",
+        "f35c1605",
+        "a49f36c2",
+        "36f4eacd",
+        "db4e1d87",
+        "d0608473",
+        "60bc8a56",
+        "90568c0",
+        "f21febd8",
+        "f4d0364c",
+        "b89c9ff5",
+        "a233e9a2",
+        "db7399e0",
+        "c77144a7",
+        "e8411ddf",
+        "cb7fed40",
+        "1b6cb3b7",
+        "c7b1cb8d",
+        "19c8af69",
+        "3474d541",
+        "59e61fda",
+        "97a39189",
+        "88fefb4d",
+        "7ef1fe57",
+        "d12d4290",
+        "443172cf",
+        "bd906cce",
+        "1ccde14c",
+        "f4218722",
+        "fac1d4bf",
+        "7d043b1e",
+        "64daed93",
+        "3276416d",
+        "7a0ead0d",
+        "6339323a",
+        "53d8069b",
+        "1cd7ca75"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "82b4865",
+        "ff3af5b6",
+        "e3e32bdf",
+        "434831b6",
+        "f0056888",
+        "11118408",
+        "c17f9a6f",
+        "bd399f01",
+        "e862a333",
+        "b7887ba6",
+        "9cb99331",
+        "f150e088",
+        "15756da6",
+        "7e03dd6d",
+        "ff412395",
+        "69d4b32f",
+        "fdaf0d46",
+        "5bd18c81",
+        "52dff26c",
+        "fb29f864",
+        "6d0818d8",
+        "e199318c",
+        "2d35dfa6",
+        "1dea7231",
+        "9e21f210",
+        "11118408",
+        "5b27b4f6",
+        "22fab049",
+        "6cfdbb15",
+        "2658ef17",
+        "dc7c6dd",
+        "b7887ba6",
+        "93f141ea",
+        "51a28fab",
+        "1d48109",
+        "cba82030",
+        "4605b333",
+        "3b95a938",
+        "aa156ef0",
+        "3fe67e90",
+        "cdeeb5c6",
+        "ab6415d6",
+        "50bce4f3",
+        "c2622254",
+        "ea2c82e5",
+        "5c64496e",
+        "bed99c18",
+        "8089d3a",
+        "83f0640e",
+        "783608e4",
+        "e942ac6c",
+        "633dbd79",
+        "2ed4c04d",
+        "56c50882",
+        "14a0b7cc",
+        "607849a2",
+        "1c17a6f7",
+        "6077aff6",
+        "91e4bcd3",
+        "31e5495",
+        "b7887ba6",
+        "d04115eb",
+        "12822b13",
+        "57a0c6d4",
+        "f40b26ae",
+        "edc5a30c",
+        "3a37c526",
+        "edbcf1f",
+        "a31358c7",
+        "aa419228",
+        "f34aa64d",
+        "7426ec2a",
+        "d3fce293",
+        "b7887ba6",
+        "87edd084",
+        "66198f48",
+        "5c105d17",
+        "ae7390ce",
+        "cb996a87",
+        "1d6257c5",
+        "b7887ba6",
+        "c942382a",
+        "c6dbb4d2",
+        "4169ab15",
+        "e3b88fb9",
+        "9225c687",
+        "2a7816d0",
+        "7fbb1954",
+        "72db8c39",
+        "241bf752",
+        "e885fa33",
+        "2c3554d6",
+        "4226aa68",
+        "b3c591bf",
+        "9f4e0b91",
+        "f0a9fa22",
+        "3e5d6d8b",
+        "f35c1605",
+        "a49f36c2",
+        "36f4eacd",
+        "db4e1d87",
+        "d0608473",
+        "60bc8a56",
+        "90568c0",
+        "f21febd8",
+        "f4d0364c",
+        "b89c9ff5",
+        "a233e9a2",
+        "db7399e0",
+        "c77144a7",
+        "e8411ddf",
+        "cb7fed40",
+        "1b6cb3b7",
+        "c7b1cb8d",
+        "19c8af69",
+        "3474d541",
+        "59e61fda",
+        "97a39189",
+        "88fefb4d",
+        "7ef1fe57",
+        "d12d4290",
+        "443172cf",
+        "bd906cce",
+        "1ccde14c",
+        "f4218722",
+        "fac1d4bf",
+        "7d043b1e",
+        "64daed93",
+        "3276416d",
+        "7a0ead0d",
+        "6339323a",
+        "53d8069b",
+        "1cd7ca75"
+      ]
+    }
+  }
+}
diff --git a/packages/react-interview-playbook/contents/react-hooks/en-US.mdx b/packages/react-interview-playbook/contents/react-hooks/en-US.mdx
new file mode 100644
index 0000000000..b232ded966
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-hooks/en-US.mdx
@@ -0,0 +1,606 @@
+---
+title: React Hooks for Interviews
+description: Master React hooks for interviews, covering key hooks like useState, useEffect, useContext, common pitfalls, and best practices for building reusable logic
+---
+
+React hooks are special functions that start with `use`. Introduced in React 16.8, they allow developers to use state and lifecycle features in function components. This simplifies code organization, reduce boilerplate, and enable better logic reuse. This guide will help you to tackle React hooks interview questions.
+
+Familiarize yourself with the common hooks: `useState`, `useEffect`, `useContext`, `useRef`, `useId`, you will probably have to use some of them during interviews.
+
+## `useState`
+
+`useState` enables function components to track state within component instances. State is isolated and private. Use `useState` when a component needs local state that is contained within the component instance and not meant to be shared with siblings/parents. If you render a component in two separate places, each instance gets its own state.
+
+```jsx
+const [state, setState] = useState(initialState);
+```
+
+**Parameters**
+
+- **`initialState` (Required)**: The initial value of the state. If it is a function, that function will be called to lazily initialize the state.
+
+When updating based on the previous state, use the function version of `setState`:
+
+```jsx
+import { useState } from 'react';
+
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <button onClick={() => setCount((prevCount) => prevCount + 1)}>
+      Count: {count}
+    </button>
+  );
+}
+```
+
+**Pitfalls**:
+
+- Directly mutating state instead of using the setter function (`setState`) or not passing a new object to the setter function
+- Referencing stale values in closures and updating with stale values; use the function version of `setState` if possible
+- Using `useState` when a value doesn't affect rendering; use [`useRef`](#useref) instead
+
+Further reading on react.dev: [useState - React](https://react.dev/reference/react/useState)
+
+### Common mistake: mutating state directly
+
+```jsx
+const [user, setUser] = useState({ name: 'Alice', age: 25 });
+user.age = 26; // ❌ This won't trigger a re-render
+```
+
+It is also not a good practice to re-use state objects:
+
+```jsx
+function onClick() {
+  user.age = 26;
+  setUser(user); // ❌ Calling setter with the same object
+}
+```
+
+Instead, create a new object:
+
+```jsx
+setUser((prevUser) => ({ ...prevUser, age: 26 }));
+```
+
+### Common mistake: updating state without considering previous state
+
+```jsx
+setCount(count + 1); // Potential stale state issue if used within intervals or async functions
+```
+
+One way to fix this is to use functional version of setter if your new state relies on the previous state.
+
+```jsx
+setCount((prevCount) => prevCount + 1);
+```
+
+## `useEffect`
+
+`useEffect` is a hook primarily for synchronizing a component with an external system. It can be used for executing side effects, such as fetching data, subscribing to events, or interacting with the DOM.
+
+```jsx
+useEffect(effectFunction, dependencyArray);
+```
+
+**Parameters**
+
+1. **`effectFunction` (Required):** A function that contains the side effect logic
+2. **`dependencies` (Optional):** An array of values that determine when the effect runs
+
+Depending on when the effect should run, the `dependencies` array is defined accordingly:
+
+| When should the effect run? | Dependency array | Example |
+| --- | --- | --- |
+| After every render | None | `useEffect(() => {...});` |
+| Once on mount | `[]` (empty) | `useEffect(() => {...}, []);` |
+| When any dependency changes | `[var1, var2]` | `useEffect(() => {...}, [var1, var2]);` |
+| Cleaning up (runs on unmount or before effect re-runs) | Varies | `useEffect(() => { return () => {...}; }, []);` |
+
+`useEffect` is primarily for side effects / interacting with external services and that isn't too common during interviews. If you find yourself reaching for `useEffect` in your solutions, consider if there are alternatives.
+
+```jsx
+import { useState, useEffect } from 'react';
+
+function DataFetcher() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    fetch('/api/data')
+      .then((response) => response.json())
+      .then(setData);
+  }, []);
+
+  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
+}
+```
+
+**Pitfalls**:
+
+- Not adding dependencies in the dependency array leading to stale closures
+- Causing infinite loops by updating state inside `useEffect` without proper dependency management
+- Unnecessary re-renders due to using objects/arrays in the dependency array
+- Not cleaning up side effects such as clearing timers and unsubscribing from events
+
+It's a good practice to provide a dependency array in `useEffect`, `useCallback`, and `useMemo` to avoid unexpected behavior. However in future the [React compiler](https://react.dev/learn/react-compiler) aims to remove the need for writing `useCallback` and `useMemo` manually.
+
+### Read the manual
+
+The unfortunate truth is that `useEffect` is just full of footguns and is hard to use, even for experienced engineers.
+
+The `useEffect` hook is especially hard to get right, even for seasoned developers. Our recommendation is to avoid using `useEffect` in interviews if there are alternatives.
+
+Given that interview questions are mostly self-contained, `useEffect`s aren't too commonly needed. Hence you will find that the official solutions by GreatFrontEnd's React user interface questions do not have too much `useEffect` usage. If you are using `useEffect` in your code, compare with the official solutions to see how you can possibly avoid using it.
+
+Either way, it's best to read the following pages of the React documentation to understand `useEffect` better:
+
+1. [Synchronizing with Effects](https://react.dev/learn/synchronizing-with-effects)
+2. [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)
+3. [Lifecycle of Reactive Effects](https://react.dev/learn/lifecycle-of-reactive-effects)
+4. [Separating Events from Effects](https://react.dev/learn/separating-events-from-effects)
+5. [Removing Effect Dependencies](https://react.dev/learn/removing-effect-dependencies)
+
+Further reading on react.dev: [useEffect - React](https://react.dev/reference/react/useEffect)
+
+### Common mistake: missing dependencies leading to stale closures
+
+```jsx
+useEffect(() => {
+  fetchData();
+}, []); // What if fetchData depends on props?
+```
+
+Ensure dependencies are correct, or use a callback inside `useEffect`:
+
+```jsx
+useEffect(() => {
+  fetchData(someProp);
+}, [someProp]);
+```
+
+### Common mistake: unnecessary effect invocations due to object/array dependency in `useEffect`
+
+In the following example the effect should only run when `filteredTodos` change, but effect still runs when the "Force re-render" button is triggered. This is because a new `filteredTodos` array is recreated on every render, causing `useEffect` to run unnecessarily.
+
+```jsx
+function TodoList({ todos }) {
+  const [count, setCount] = useState(0);
+  const [status, setStatus] = useState('in_progress');
+  const filteredTodos = todos.filter((todo) => todo.status === status);
+
+  useEffect(() => {
+    console.log('filteredTodos have changed');
+  }, [filteredTodos]);
+
+  return (
+    <div>
+      <button onClick={() => setCount(count + 1)}>Force re-render</button>
+      <button onClick={() => setStatus('complete')}>Change status</button>
+    </div>
+  );
+}
+```
+
+Use `useMemo` to memoize the object, ensuring that `filteredTodos` retain the same reference unless the `todos` or `status` change. Even though `todos` is an array, it is a prop received from the parent and its still the same object reference when `TodoList` re-renders.
+
+In the following example, triggering the "Force re-render" button will not cause the effect to re-run.
+
+```jsx
+function TodoList({ todos }) {
+  const [count, setCount] = useState(0);
+  const [status, setStatus] = useState('in_progress');
+  const filteredTodos = useMemo(
+    () => todos.filter((todo) => todo.status === status),
+    [todos, status],
+  );
+
+  useEffect(() => {
+    console.log('filteredTodos have changed');
+  }, [filteredTodos]);
+
+  return (
+    <div>
+      <button onClick={() => setCount(count + 1)}>Force re-render</button>
+      <button onClick={() => setStatus('complete')}>Change status</button>
+    </div>
+  );
+}
+```
+
+### Common mistake: memory leaks due to missing cleanup
+
+```jsx
+useEffect(() => {
+  const interval = setInterval(() => {
+    console.log('Running...');
+  }, 1000);
+}, []); // No cleanup
+```
+
+Return a cleanup function when needed:
+
+```jsx
+useEffect(() => {
+  const interval = setInterval(() => {
+    console.log('Running...');
+  }, 1000);
+
+  return () => clearInterval(interval);
+}, []);
+```
+
+## `useContext`
+
+`useContext` provides a way to share state across components without prop drilling. It's useful for global state like themes, authentication, or user settings.
+
+```jsx
+import { createContext, useContext, useState } from 'react';
+
+const ThemeContext = createContext('light');
+
+function App() {
+  const [theme, setTheme] = useState('light');
+
+  return (
+    <ThemeContext.Provider value={theme}>
+      <button
+        onClick={() => {
+          setTheme(theme === 'light' ? 'dark' : 'light');
+        }}>
+        Toggle theme
+      </button>
+      <ThemeComponent />
+    </ThemeContext.Provider>
+  );
+}
+
+function ThemedComponent() {
+  const theme = useContext(ThemeContext);
+
+  return (
+    <div style={{ backgroundColor: theme === 'dark' ? '#000' : '#fff' }}>
+      Theme: {theme}
+    </div>
+  );
+}
+```
+
+Note that in React 19, Context providers can use `<ThemeContext>` directly without doing `<ThemeContext.Provider>`.
+
+React automatically re-renders all the children that use a particular context starting from the provider that receives a different value.
+
+**Pitfalls**:
+
+- Using objects/functions as context values without memoization, leading to unnecessary re-renders
+- Overusing `useContext` for deeply nested state that might be better managed with a state management library
+
+Further reading on react.dev: [useContext - React](https://react.dev/reference/react/useContext)
+
+### Common mistake: using objects/functions as context values without memoization
+
+Here the context value is a list of todos. Whenever `TodoListContainer` re-renders (for example, on a route update), this will be a new array created thanks to the filtering, so React will also have to re-render all components deep in the tree that call `useContext(TodoListContext)`.
+
+`filteredTodos` is recomputed on every render and creates a new array instance, even if `todos` or `status` haven't changed. This can cause unnecessary re-renders.
+
+```jsx
+function TodoListContainer() {
+  const [todos, setTodos] = useState([
+    { title: 'Fix bug', status: 'in_progress' },
+    { title: 'Add button', status: 'completed' },
+  ]);
+  const [status, setStatus] = useState('in_progress');
+  const filteredTodos = todos.filter((todo) => todo.status === status);
+
+  return (
+    <TodoListContext.Provider value={filteredTodos}>
+      <TodoList />
+    </TodoListContext.Provider>
+  );
+}
+```
+
+We can use `useMemo` to memoize `filteredTodos`, so it's only recalculated when `todos` or `status` change. This optimization can be significant for large lists.
+
+```jsx
+function TodoListContainer() {
+  const [todos, setTodos] = useState([
+    { title: 'Fix bug', status: 'in_progress' },
+    { title: 'Add button', status: 'completed' },
+  ]);
+  const [status, setStatus] = useState('in_progress');
+  const filteredTodos = useMemo(
+    () => todos.filter((todo) => todo.status === status),
+    [todos, status],
+  );
+
+  return (
+    <TodoListContext.Provider value={filteredTodos}>
+      <TodoList />
+    </TodoListContext.Provider>
+  );
+}
+```
+
+## `useRef`
+
+`useRef` stores a mutable reference that persists across renders, commonly used for:
+
+- References data that is specific to the component instance
+- Storing references to the DOM
+- Storing data that does not affect the UI of the component (e.g. timeout or interval IDs). Mutating the ref values does not cause re-renders
+
+```jsx
+import { useRef } from 'react';
+
+function FocusInput() {
+  const inputRef = useRef(null);
+
+  return (
+    <div>
+      <input ref={inputRef} />
+      <button onClick={() => inputRef.current.focus()}>Focus Input</button>
+    </div>
+  );
+}
+```
+
+**Pitfalls**:
+
+- Overusing `useRef` for state instead of [`useState`](#usestate)
+
+Further reading on react.dev: [useRef - React](https://react.dev/reference/react/useRef)
+
+## `useId`
+
+`useId` is a hook introduced in React 18 that generates unique IDs for accessibility attributes and form elements. It ensures that the IDs are unique within a component tree, even when server-rendering.
+
+```jsx
+import { useId } from 'react';
+
+function Form() {
+  const id = useId();
+
+  return (
+    <div>
+      <label htmlFor={id}>Name:</label>
+      <input id={id} type="text" />
+    </div>
+  );
+}
+```
+
+- Primarily design system components where IDs are used for accessibility attributes (like `aria-labelledby`) yet they need to have unique values because there can be multiple component instances on the page
+- Generating unique IDs for form inputs, especially in server-rendered applications
+- Avoiding having to manually generating unique IDs with libraries or global counters
+
+**Pitfalls**:
+
+- Do not use `useId` for keys in lists. Use stable values like database IDs instead
+- It is only useful for generating static IDs and should not be used to track dynamic state
+
+Further reading on react.dev: [useId - React](https://react.dev/reference/react/useId)
+
+## Rules of hooks
+
+React hooks follow a strict set of rules to ensure they function correctly and maintain state consistency across renders. Violating these rules can lead to bugs, unintended behavior, or broken components.
+
+1. **Only call hooks at the top level**: Do not call hooks inside loops, conditions, nested functions, or `try`/`catch`/`finally` blocks
+2. **Only call hooks from React function components or custom hooks**: Avoid using hooks in regular JavaScript functions
+
+---
+
+Examples of incorrect vs correct hooks usage:
+
+### Do not call hooks inside conditions
+
+❌ **Wrong: Call hooks inside a condition**
+
+```jsx
+if (someCondition) {
+  // ❌ Wrong: Hook inside a condition
+  const [count, setCount] = useState(0);
+}
+```
+
+✅ **Correct: Call hooks at the top level**
+
+```jsx
+const [count, setCount] = useState(0);
+
+if (someCondition) {
+  console.log(count);
+}
+```
+
+Hooks must be called in the same order on every render. Conditional hooks may cause React to misalign state updates.
+
+### Only call hooks within React components or custom hooks
+
+❌ **Wrong: Call a hook outside a component**
+
+```jsx
+// ❌ Wrong: Outside of the component
+const count = useState(0);
+
+function App() {
+  // ...
+}
+```
+
+✅ **Correct: Call hooks inside functional components or custom hooks**
+
+```jsx
+function App() {
+  const [count, setCount] = useState(0);
+  return <p>{count}</p>;
+}
+
+function useCounter() {
+  const [count, setCount] = useState(0);
+
+  return [count, () => setCount((x) => x + 1)];
+}
+```
+
+Hooks rely on React's render cycle and component state. Calling hooks outside a component prevents React from tracking state.
+
+### Do not call hooks after a conditional `return`
+
+❌ **Wrong: Call hooks conditionally**
+
+```jsx
+function Counter({ hidden }) {
+  if (hidden) {
+    return;
+  }
+
+  // ❌ Wrong: After a conditional return
+  const [count, setCount] = useState(0);
+  // ...
+}
+```
+
+✅ **Correct: Call hooks without a condition**
+
+```jsx
+function Counter({ hidden }) {
+  const [count, setCount] = useState(0);
+
+  if (hidden) {
+    return;
+  }
+  // ...
+}
+```
+
+### Do not calling hooks within loops
+
+❌ **Wrong: Call hooks inside a loop**
+
+```jsx
+for (let i = 0; i < 2; i++) {
+  // ❌ Wrong: Hook inside a loop
+  const [count, setCount] = useState(0);
+}
+```
+
+✅ **Correct: Call hooks without a loop**
+
+```jsx
+const [count1, setCount1] = useState(0);
+const [count2, setCount2] = useState(0);
+```
+
+React assumes hooks are called in the same order every render. Calling them in a different order or different number of calls can break React's internal state tracking.
+
+### Do not call in event handlers
+
+❌ **Wrong: Call hooks inside an event handler**
+
+```jsx
+function Counter() {
+  function handleClick() {
+    // ❌ Wrong: Inside an event handler
+    const theme = useContext(ThemeContext);
+  }
+  // ...
+}
+```
+
+✅ **Correct: Call hooks outside event handler**
+
+```jsx
+function Counter() {
+  const theme = useContext(ThemeContext);
+
+  function handleClick() {
+    // ...
+  }
+  // ...
+}
+```
+
+Further reading on react.dev: [Rules of Hooks](https://react.dev/reference/rules/rules-of-hooks)
+
+## Custom hooks
+
+Custom hooks in React allow you to extract reusable logic from components while maintaining state and side effects using built-in hooks like `useState`, `useEffect`, `useMemo`, and others.
+
+They follow the same rules as React hooks but enable better code reuse, abstraction, and separation of concerns in a clean and maintainable way.
+
+1. **Code reusability**: Instead of duplicating logic across components, a custom Hook encapsulates the logic and makes it reusable
+2. **Separation of concerns**: Components should focus on UI rendering, while custom hooks handle logic (state management, fetching data, event listeners, etc.)
+3. **Cleaner & more readable components**: Extracting logic into a Hook makes components less cluttered and more focused on presentation
+4. **Encapsulation of side effects**: Custom hooks allow managing side effects (like API calls) separately, making debugging and testing easier
+
+A custom hook:
+
+- Is a JavaScript function that starts with `use` (e.g., `useCounter`, `useFetch`)
+- Must call other React hooks (e.g., `useState`, `useEffect`). If a custom hook does not call any React hooks, then it doesn't need to be a hook
+- Keep them focused – one purpose per hook
+- Optionally, returns state or functions that components can use
+
+Here's an example of a `useCounter` custom hook. The value of such a hook is that it does not expose the `setCount` function and users of the hook are restricted to the exposed operations, they can only increment, decrement, or reset the value.
+
+```jsx
+import { useState } from 'react';
+
+function useCounter(initialValue = 0) {
+  const [count, setCount] = useState(initialValue);
+
+  const increment = () => setCount(count + 1);
+  const decrement = () => setCount(count - 1);
+  const reset = () => setCount(initialValue);
+
+  return { count, increment, decrement, reset };
+}
+
+function CounterComponent() {
+  const { count, increment, decrement, reset } = useCounter(10);
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={increment}>+</button>
+      <button onClick={decrement}>-</button>
+      <button onClick={reset}>Reset</button>
+    </div>
+  );
+}
+```
+
+Further reading on react.dev: [Reusing Logic with Custom Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks)
+
+## What you need to know for interviews
+
+1. **Explain the purpose of hooks**: Why React introduced hooks and how they replace class component lifecycle methods
+2. **Know the common hooks**: Understand when and why to use `useState`, `useEffect`, `useContext`, and `useRef`.
+   - `useState`: Use the functional update form of `setState` when state depends on the previous state e.g. `setCount((prevCount) => prevCount + 1)`. This also eliminates the problem of stale closures within the event handlers
+3. **Understand re-rendering issues**: Recognize how dependency arrays impact performance and how `useMemo`/`useCallback` optimize rendering
+4. **Implement a custom hook**: Be able to write and explain a reusable custom hook in an interview
+5. **Debug common hook pitfalls**: Identify and fix common mistakes like missing dependencies in `useEffect` or unnecessary state updates causing re-renders
+
+## Practice questions
+
+**Quiz**:
+
+- [What are the benefits of using hooks in React?](/questions/quiz/what-are-the-benefits-of-using-hooks-in-react?framework=react&tab=quiz)
+- [What are the rules of React hooks?](/questions/quiz/what-are-the-rules-of-react-hooks?framework=react&tab=quiz)
+- [What is the difference between `useEffect` and `useLayoutEffect` in React?](/questions/quiz/what-is-the-difference-between-useeffect-and-uselayouteffect-in-react?framework=react&tab=quiz)
+- [What is the purpose of callback function argument format of `setState()` in React and when should it be used?](/questions/quiz/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used?framework=react&tab=quiz)
+- [What does the dependency array of `useEffect` affect?](/questions/quiz/what-does-the-dependency-array-of-useeffect-affect?framework=react&tab=quiz)
+- [What is the `useRef` hook in React and when should it be used?](/questions/quiz/what-is-the-useref-hook-in-react-and-when-should-it-be-used?framework=react&tab=quiz)
+- [What is the `useCallback` hook in React and when should it be used?](/questions/quiz/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used?framework=react&tab=quiz)
+- [What is the `useMemo` hook in React and when should it be used?](/questions/quiz/what-is-the-usememo-hook-in-react-and-when-should-it-be-used?framework=react&tab=quiz)
+- [What is the `useReducer` hook in React and when should it be used?](/questions/quiz/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used?framework=react&tab=quiz)
+- [What is the `useId` hook in React and when should it be used?](/questions/quiz/what-is-the-useid-hook-in-react-and-when-should-it-be-used?framework=react&tab=quiz)
+- [What is `forwardRef()` in React used for?](/questions/quiz/what-is-forwardref-in-react-used-for?framework=react&tab=quiz)
+
+**Coding**:
+
+- [Progress Bars](/questions/user-interface/progress-bars/react?framework=react&tab=coding)
+- [Tabs](/questions/user-interface/tabs/react?framework=react&tab=coding)
+- [Analog Clock](/questions/user-interface/analog-clock/react?framework=react&tab=coding)
+- [Digital Clock](/questions/user-interface/digital-clock/react?framework=react&tab=coding)
diff --git a/packages/react-interview-playbook/contents/react-hooks/zh-CN.mdx b/packages/react-interview-playbook/contents/react-hooks/zh-CN.mdx
new file mode 100644
index 0000000000..fbc99926e5
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-hooks/zh-CN.mdx
@@ -0,0 +1,608 @@
+---
+title: React Hooks 面试
+description: >-
+  掌握 React Hooks 面试，涵盖关键 Hooks，如
+  useState、useEffect、useContext，常见的陷阱以及构建可重用逻辑的最佳实践
+---
+
+React Hooks 是以 `use` 开头的特殊函数。在 React 16.8 中引入，它们允许开发人员在函数组件中使用状态和生命周期特性。这简化了代码组织，减少了样板代码，并实现了更好的逻辑重用。本指南将帮助您解决 React Hooks 面试问题。
+
+熟悉常见的 Hooks：`useState`、`useEffect`、`useContext`、`useRef`、`useId`，您可能需要在面试中使用其中的一些。
+
+## `useState`
+
+`useState` 允许函数组件在组件实例中跟踪状态。状态是隔离和私有的。当组件需要包含在组件实例中且不打算与兄弟/父组件共享的本地状态时，请使用 `useState`。如果您在两个不同的地方渲染一个组件，则每个实例都会获得自己的状态。
+
+```jsx
+const [state, setState] = useState(initialState);
+```
+
+**参数**
+
+* **`initialState` (必需)**：状态的初始值。如果它是一个函数，将调用该函数来延迟初始化状态。
+
+当基于之前的状态进行更新时，请使用 `setState` 的函数版本：
+
+```jsx
+import { useState } from 'react';
+
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <button onClick={() => setCount((prevCount) => prevCount + 1)}>
+      Count: {count}
+    </button>
+  );
+}
+```
+
+**陷阱**：
+
+* 直接改变状态而不是使用 setter 函数 (`setState`) 或不向 setter 函数传递新对象
+* 在闭包中引用过时的值并使用过时的值进行更新；如果可能，请使用 `setState` 的函数版本
+* 当一个值不影响渲染时使用 `useState`；改为使用 [`useRef`](#useref)
+
+在 react.dev 上进一步阅读：[useState - React](https://react.dev/reference/react/useState)
+
+### 常见错误：直接改变状态
+
+```jsx
+const [user, setUser] = useState({ name: 'Alice', age: 25 });
+user.age = 26; // ❌ 这不会触发重新渲染
+```
+
+重用状态对象也不是一个好习惯：
+
+```jsx
+function onClick() {
+  user.age = 26;
+  setUser(user); // ❌ 使用相同的对象调用 setter
+}
+```
+
+相反，创建一个新对象：
+
+```jsx
+setUser((prevUser) => ({ ...prevUser, age: 26 }));
+```
+
+### 常见错误：在没有考虑先前状态的情况下更新状态
+
+```jsx
+setCount(count + 1); // 如果在间隔或异步函数中使用，可能会出现过时状态问题
+```
+
+解决此问题的一种方法是使用 setter 的函数式版本，如果你的新状态依赖于先前状态。
+
+```jsx
+setCount((prevCount) => prevCount + 1);
+```
+
+## `useEffect`
+
+`useEffect` 主要是一个用于将组件与外部系统同步的 hook。它可以用于执行副作用，例如获取数据、订阅事件或与 DOM 交互。
+
+```jsx
+useEffect(effectFunction, dependencyArray);
+```
+
+**参数**
+
+1. **`effectFunction` (必需):** 包含副作用逻辑的函数
+2. **`dependencies` (可选):** 确定 effect 运行时间的数值数组
+
+根据 effect 应该运行的时间，相应地定义 `dependencies` 数组：
+
+| 什么时候应该运行 effect？ | 依赖数组 | 例子 |
+| --- | --- | --- |
+| 每次渲染后 | 无 | `useEffect(() => {...});` |
+| 仅在挂载时 | `[]` (空) | `useEffect(() => {...}, []);` |
+| 当任何依赖项更改时 | `[var1, var2]` | `useEffect(() => {...}, [var1, var2]);` |
+| 清理（在卸载或 effect 重新运行之前运行） | 变化 | `useEffect(() => { return () => {...}; }, []);` |
+
+`useEffect` 主要用于副作用/与外部服务的交互，这在面试中并不常见。 如果你发现在你的解决方案中使用 `useEffect`，请考虑是否有其他选择。
+
+```jsx
+import { useState, useEffect } from 'react';
+
+function DataFetcher() {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    fetch('/api/data')
+      .then((response) => response.json())
+      .then(setData);
+  }, []);
+
+  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
+}
+```
+
+**陷阱**：
+
+* 未在依赖项数组中添加依赖项，导致陈旧的闭包
+* 在 `useEffect` 内部更新状态导致无限循环，而没有适当的依赖项管理
+* 由于在依赖项数组中使用对象/数组而导致不必要的重新渲染
+* 未清理副作用，例如清除计时器和取消订阅事件
+
+在 `useEffect`、`useCallback` 和 `useMemo` 中提供依赖项数组是一个好习惯，以避免意外行为。 然而，将来 [React 编译器](https://react.dev/learn/react-compiler) 旨在消除手动编写 `useCallback` 和 `useMemo` 的需要。
+
+### 阅读手册
+
+不幸的真相是，`useEffect` 充满了陷阱，即使对于经验丰富的工程师来说也很难使用。
+
+`useEffect` hook 尤其难以正确使用，即使对于经验丰富的开发人员也是如此。 我们的建议是在面试中避免使用 `useEffect`，如果有其他选择的话。
+
+鉴于面试问题大多是自包含的，因此不太需要 `useEffect`。 因此，你会发现 GreatFrontEnd 的 React 用户界面问题的官方解决方案并没有太多 `useEffect` 的使用。 如果你在代码中使用 `useEffect`，请与官方解决方案进行比较，看看你如何可能避免使用它。
+
+无论如何，最好阅读 React 文档的以下页面以更好地理解 `useEffect`：
+
+1. [与 Effects 同步](https://react.dev/learn/synchronizing-with-effects)
+2. [你可能不需要 Effect](https://react.dev/learn/you-might-not-need-an-effect)
+3. [响应式 Effects 的生命周期](https://react.dev/learn/lifecycle-of-reactive-effects)
+4. [将事件与 Effects 分开](https://react.dev/learn/separating-events-from-effects)
+5. [删除 Effect 依赖项](https://react.dev/learn/removing-effect-dependencies)
+
+在 react.dev 上进一步阅读：[useEffect - React](https://react.dev/reference/react/useEffect)
+
+### 常见错误：缺少依赖项导致陈旧的闭包
+
+```jsx
+useEffect(() => {
+  fetchData();
+}, []); // 如果 fetchData 依赖于 props 怎么办？
+```
+
+确保依赖项正确，或在 `useEffect` 中使用回调：
+
+```jsx
+useEffect(() => {
+  fetchData(someProp);
+}, [someProp]);
+```
+
+### 常见错误：由于 `useEffect` 中对象/数组的依赖关系导致不必要的 effect 调用
+
+在下面的例子中，effect 应该只在 `filteredTodos` 改变时运行，但是当触发“强制重新渲染”按钮时，effect 仍然会运行。这是因为每次渲染都会重新创建新的 `filteredTodos` 数组，导致 `useEffect` 不必要地运行。
+
+```jsx
+function TodoList({ todos }) {
+  const [count, setCount] = useState(0);
+  const [status, setStatus] = useState('in_progress');
+  const filteredTodos = todos.filter((todo) => todo.status === status);
+
+  useEffect(() => {
+    console.log('filteredTodos have changed');
+  }, [filteredTodos]);
+
+  return (
+    <div>
+      <button onClick={() => setCount(count + 1)}>强制重新渲染</button>
+      <button onClick={() => setStatus('complete')}>更改状态</button>
+    </div>
+  );
+}
+```
+
+使用 `useMemo` 来记忆对象，确保 `filteredTodos` 保持相同的引用，除非 `todos` 或 `status` 发生变化。即使 `todos` 是一个数组，它也是从父组件接收的 prop，并且在 `TodoList` 重新渲染时仍然是相同的对象引用。
+
+在下面的例子中，触发“强制重新渲染”按钮不会导致 effect 重新运行。
+
+```jsx
+function TodoList({ todos }) {
+  const [count, setCount] = useState(0);
+  const [status, setStatus] = useState('in_progress');
+  const filteredTodos = useMemo(
+    () => todos.filter((todo) => todo.status === status),
+    [todos, status],
+  );
+
+  useEffect(() => {
+    console.log('filteredTodos have changed');
+  }, [filteredTodos]);
+
+  return (
+    <div>
+      <button onClick={() => setCount(count + 1)}>强制重新渲染</button>
+      <button onClick={() => setStatus('complete')}>更改状态</button>
+    </div>
+  );
+}
+```
+
+### 常见错误：由于缺少清理而导致的内存泄漏
+
+```jsx
+useEffect(() => {
+  const interval = setInterval(() => {
+    console.log('Running...');
+  }, 1000);
+}, []); // 没有清理
+```
+
+在需要时返回一个清理函数：
+
+```jsx
+useEffect(() => {
+  const interval = setInterval(() => {
+    console.log('Running...');
+  }, 1000);
+
+  return () => clearInterval(interval);
+}, []);
+```
+
+## `useContext`
+
+`useContext` 提供了一种在组件之间共享状态而无需 prop 传递的方法。它对于主题、身份验证或用户设置等全局状态很有用。
+
+```jsx
+import { createContext, useContext, useState } from 'react';
+
+const ThemeContext = createContext('light');
+
+function App() {
+  const [theme, setTheme] = useState('light');
+
+  return (
+    <ThemeContext.Provider value={theme}>
+      <button
+        onClick={() => {
+          setTheme(theme === 'light' ? 'dark' : 'light');
+        }}>
+        切换主题
+      </button>
+      <ThemeComponent />
+    </ThemeContext.Provider>
+  );
+}
+
+function ThemedComponent() {
+  const theme = useContext(ThemeContext);
+
+  return (
+    <div style={{ backgroundColor: theme === 'dark' ? '#000' : '#fff' }}>
+      主题：{theme}
+    </div>
+  );
+}
+```
+
+请注意，在 React 19 中，Context 提供程序可以直接使用 `<ThemeContext>`，而无需使用 `<ThemeContext.Provider>`。
+
+React 会自动重新渲染所有使用特定 context 的子组件，从接收不同值的提供程序开始。
+
+**陷阱**：
+
+* 使用对象/函数作为上下文值而不进行记忆，导致不必要的重新渲染
+* 过度使用 `useContext` 来处理可能最好使用状态管理库管理的深层嵌套状态
+
+在 react.dev 上进一步阅读：[useContext - React](https://react.dev/reference/react/useContext)
+
+### 常见错误：使用对象/函数作为上下文值而不进行记忆
+
+这里上下文的值是待办事项列表。每当 `TodoListContainer` 重新渲染（例如，在路由更新时），这将是一个新的数组，这要归功于过滤，因此 React 也将不得不重新渲染调用 `useContext(TodoListContext)` 的树中所有深层组件。
+
+`filteredTodos` 在每次渲染时都会重新计算并创建一个新的数组实例，即使 `todos` 或 `status` 尚未更改。这可能导致不必要的重新渲染。
+
+```jsx
+function TodoListContainer() {
+  const [todos, setTodos] = useState([
+    { title: '修复错误', status: 'in_progress' },
+    { title: '添加按钮', status: 'completed' },
+  ]);
+  const [status, setStatus] = useState('in_progress');
+  const filteredTodos = todos.filter((todo) => todo.status === status);
+
+  return (
+    <TodoListContext.Provider value={filteredTodos}>
+      <TodoList />
+    </TodoListContext.Provider>
+  );
+}
+```
+
+我们可以使用 `useMemo` 来记忆 `filteredTodos`，因此它仅在 `todos` 或 `status` 更改时重新计算。对于大型列表，此优化可能非常重要。
+
+```jsx
+function TodoListContainer() {
+  const [todos, setTodos] = useState([
+    { title: '修复错误', status: 'in_progress' },
+    { title: '添加按钮', status: 'completed' },
+  ]);
+  const [status, setStatus] = useState('in_progress');
+  const filteredTodos = useMemo(
+    () => todos.filter((todo) => todo.status === status),
+    [todos, status],
+  );
+
+  return (
+    <TodoListContext.Provider value={filteredTodos}>
+      <TodoList />
+    </TodoListContext.Provider>
+  );
+}
+```
+
+## `useRef`
+
+`useRef` 存储一个在渲染之间保持不变的可变引用，通常用于：
+
+* 引用特定于组件实例的数据
+* 存储对 DOM 的引用
+* 存储不影响组件 UI 的数据（例如超时或间隔 ID）。更改 ref 值不会导致重新渲染
+
+```jsx
+import { useRef } from 'react';
+
+function FocusInput() {
+  const inputRef = useRef(null);
+
+  return (
+    <div>
+      <input ref={inputRef} />
+      <button onClick={() => inputRef.current.focus()}>Focus Input</button>
+    </div>
+  );
+}
+```
+
+**陷阱**：
+
+* 过度使用 `useRef` 来代替 [`useState`](#usestate) 的状态
+
+在 react.dev 上进一步阅读：[useRef - React](https://react.dev/reference/react/useRef)
+
+## `useId`
+
+`useId` 是 React 18 中引入的一个 hook，用于为辅助功能属性和表单元素生成唯一的 ID。它确保 ID 在组件树中是唯一的，即使在服务器端渲染时也是如此。
+
+```jsx
+import { useId } from 'react';
+
+function Form() {
+  const id = useId();
+
+  return (
+    <div>
+      <label htmlFor={id}>名称：</label>
+      <input id={id} type="text" />
+    </div>
+  );
+}
+```
+
+* 主要设计系统组件，其中 ID 用于辅助功能属性（如 `aria-labelledby`），但它们需要具有唯一值，因为页面上可能有多个组件实例
+* 为表单输入生成唯一 ID，尤其是在服务器端渲染的应用程序中
+* 避免必须使用库或全局计数器手动生成唯一 ID
+
+**陷阱**：
+
+* 不要将 `useId` 用于列表中的键。使用稳定的值，例如数据库 ID
+* 它仅用于生成静态 ID，不应用于跟踪动态状态
+
+在 react.dev 上进一步阅读：[useId - React](https://react.dev/reference/react/useId)
+
+## Hooks 的规则
+
+React Hooks 遵循一套严格的规则，以确保它们能够正常工作，并在渲染之间保持状态一致性。违反这些规则可能会导致错误、意外行为或组件损坏。
+
+1. **仅在顶层调用 Hooks**：不要在循环、条件、嵌套函数或 `try`/`catch`/`finally` 块内调用 Hooks
+2. **仅从 React 函数组件或自定义 Hooks 调用 Hooks**：避免在常规 JavaScript 函数中使用 Hooks
+
+***
+
+不正确和正确使用 Hooks 的示例：
+
+### 不要 在条件语句中调用 Hooks
+
+❌ **错误：在条件语句中调用 Hooks**
+
+```jsx
+if (someCondition) {
+  // ❌ 错误：Hook 在条件语句中
+  const [count, setCount] = useState(0);
+}
+```
+
+✅ **正确：在顶层调用 Hooks**
+
+```jsx
+const [count, setCount] = useState(0);
+
+if (someCondition) {
+  console.log(count);
+}
+```
+
+Hooks 必须在每次渲染时以相同的顺序调用。条件 Hooks 可能会导致 React 错位状态更新。
+
+### 仅在 React 组件或自定义 Hooks 中调用 Hooks
+
+❌ **错误：在组件外部调用 Hook**
+
+```jsx
+// ❌ 错误：在组件外部
+const count = useState(0);
+
+function App() {
+  // ...
+}
+```
+
+✅ **正确：在函数组件或自定义 Hooks 中调用 Hooks**
+
+```jsx
+function App() {
+  const [count, setCount] = useState(0);
+  return <p>{count}</p>;
+}
+
+function useCounter() {
+  const [count, setCount] = useState(0);
+
+  return [count, () => setCount((x) => x + 1)];
+}
+```
+
+Hooks 依赖于 React 的渲染周期和组件状态。在组件外部调用 Hooks 会阻止 React 跟踪状态。
+
+### 不要 在条件 `return` 之后调用 Hooks
+
+❌ **错误：有条件地调用 Hooks**
+
+```jsx
+function Counter({ hidden }) {
+  if (hidden) {
+    return;
+  }
+
+  // ❌ 错误：在条件 return 之后
+  const [count, setCount] = useState(0);
+  // ...
+}
+```
+
+✅ **正确：在没有条件的情况下调用 Hook**
+
+```jsx
+function Counter({ hidden }) {
+  const [count, setCount] = useState(0);
+
+  if (hidden) {
+    return;
+  }
+  // ...
+}
+```
+
+### 不要将 Hook 放在循环中调用
+
+❌ **错误：在循环内调用 Hook**
+
+```jsx
+for (let i = 0; i < 2; i++) {
+  // ❌ 错误：Hook 在循环内
+  const [count, setCount] = useState(0);
+}
+```
+
+✅ **正确：在没有循环的情况下调用 Hook**
+
+```jsx
+const [count1, setCount1] = useState(0);
+const [count2, setCount2] = useState(0);
+```
+
+React 假定 Hook 在每次渲染时以相同的顺序调用。以不同的顺序调用它们或调用不同的次数可能会破坏 React 的内部状态跟踪。
+
+### 不要放在事件处理程序中调用
+
+❌ **错误：在事件处理程序内调用 Hook**
+
+```jsx
+function Counter() {
+  function handleClick() {
+    // ❌ 错误：在事件处理程序内
+    const theme = useContext(ThemeContext);
+  }
+  // ...
+}
+```
+
+✅ **正确：在事件处理程序外部调用 Hook**
+
+```jsx
+function Counter() {
+  const theme = useContext(ThemeContext);
+
+  function handleClick() {
+    // ...
+  }
+  // ...
+}
+```
+
+在 react.dev 上阅读更多内容：[Hook 规则](https://react.dev/reference/rules/rules-of-hooks)
+
+## 自定义 Hook
+
+React 中的自定义 Hook 允许您从组件中提取可重用的逻辑，同时使用内置的 Hook（如 `useState`、`useEffect`、`useMemo` 等）维护状态和副作用。
+
+它们遵循与 React Hook 相同的规则，但可以更好地重用代码、抽象和以干净且可维护的方式分离关注点。
+
+1. **代码可重用性**：自定义 Hook 封装了逻辑并使其可重用，而不是在组件之间复制逻辑
+2. **关注点分离**：组件应侧重于 UI 渲染，而自定义 Hook 处理逻辑（状态管理、获取数据、事件侦听器等）
+3. **更简洁、更易读的组件**：将逻辑提取到 Hook 中使组件不那么混乱，并且更专注于呈现
+4. **封装副作用**：自定义 Hook 允许单独管理副作用（如 API 调用），从而使调试和测试更容易
+
+一个自定义 Hook：
+
+* 是一个以 `use` 开头的 JavaScript 函数（例如，`useCounter`、`useFetch`）
+* 必须调用其他 React Hook（例如，`useState`、`useEffect`）。如果自定义 Hook 没有调用任何 React Hook，则它不需要是一个 Hook
+* 保持专注 – 每个 Hook 都有一个目的
+* （可选）返回组件可以使用的状态或函数
+
+这是一个 `useCounter` 自定义 Hook 的示例。 这种 Hook 的价值在于它不暴露 `setCount` 函数，并且 Hook 的使用者仅限于已公开的操作，他们只能增加、减少或重置该值。
+
+```jsx
+import { useState } from 'react';
+
+function useCounter(initialValue = 0) {
+  const [count, setCount] = useState(initialValue);
+
+  const increment = () => setCount(count + 1);
+  const decrement = () => setCount(count - 1);
+  const reset = () => setCount(initialValue);
+
+  return { count, increment, decrement, reset };
+}
+
+function CounterComponent() {
+  const { count, increment, decrement, reset } = useCounter(10);
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={increment}>+</button>
+      <button onClick={decrement}>-</button>
+      <button onClick={reset}>Reset</button>
+    </div>
+  );
+}
+```
+
+在 react.dev 上进一步阅读：[使用自定义 Hook 重用逻辑](https://react.dev/learn/reusing-logic-with-custom-hooks)
+
+## 面试中你需要知道的
+
+1. **解释 Hook 的目的**：为什么 React 引入了 Hook 以及它们如何取代类组件生命周期方法
+2. **了解常见的 Hook**：了解何时以及为何使用 `useState`、`useEffect`、`useContext` 和 `useRef`。
+   * `useState`：当状态依赖于之前的状态时，使用 `setState` 的函数式更新形式，例如 `setCount((prevCount) => prevCount + 1)`。 这也消除了事件处理程序中陈旧闭包的问题
+3. **了解重新渲染问题**：识别依赖数组如何影响性能以及 `useMemo`/`useCallback` 如何优化渲染
+4. **实现自定义 Hook**：能够在面试中编写和解释可重用的自定义 Hook
+5. **调试常见的 Hook 陷阱**：识别和修复常见的错误，例如 `useEffect` 中缺少依赖项或不必要的导致重新渲染的状态更新
+
+## 练习题
+
+**测验**：
+
+* [在 React 中使用 Hook 有什么好处？](/questions/quiz/what-are-the-benefits-of-using-hooks-in-react?framework=react\&tab=quiz)
+* [React Hook 的规则是什么？](/questions/quiz/what-are-the-rules-of-react-hooks?framework=react\&tab=quiz)
+* [React 中 `useEffect` 和 `useLayoutEffect` 的区别是什么？](/questions/quiz/what-is-the-difference-between-useeffect-and-uselayouteffect-in-react?framework=react\&tab=quiz)
+* [React 中 `setState()` 的回调函数参数格式的目的是什么？应该在什么时候使用它？](/questions/quiz/what-is-the-purpose-of-callback-function-argument-format-of-setstate-in-react-and-when-should-it-be-used?framework=react\&tab=quiz)
+* [`useEffect` 的依赖项数组会影响什么？](/questions/quiz/what-does-the-dependency-array-of-useeffect-affect?framework=react\&tab=quiz)
+* [React 中的 `useRef` Hook 是什么？应该在什么时候使用它？](/questions/quiz/what-is-the-useref-hook-in-react-and-when-should-it-be-used?framework=react\&tab=quiz)
+* [React 中的 `useCallback` Hook 是什么？应该在什么时候使用它？](/questions/quiz/what-is-the-usecallback-hook-in-react-and-when-should-it-be-used?framework=react\&tab=quiz)
+* [React 中的 `useMemo` Hook 是什么？应该在什么时候使用它？](/questions/quiz/what-is-the-usememo-hook-in-react-and-when-should-it-be-used?framework=react\&tab=quiz)
+* [React 中的 `useReducer` Hook 是什么？应该在什么时候使用它？](/questions/quiz/what-is-the-usereducer-hook-in-react-and-when-should-it-be-used?framework=react\&tab=quiz)
+* [React 中的 `useId` Hook 是什么？应该在什么时候使用它？](/questions/quiz/what-is-the-useid-hook-in-react-and-when-should-it-be-used?framework=react\&tab=quiz)
+* [React 中的 `forwardRef()` 是用来做什么的？](/questions/quiz/what-is-forwardref-in-react-used-for?framework=react\&tab=quiz)
+
+**编码**：
+
+* [进度条](/questions/user-interface/progress-bars/react?framework=react\&tab=coding)
+* [标签页](/questions/user-interface/tabs/react?framework=react\&tab=coding)
+* [模拟时钟](/questions/user-interface/analog-clock/react?framework=react\&tab=coding)
+* [数字时钟](/questions/user-interface/digital-clock/react?framework=react\&tab=coding)
diff --git a/packages/react-interview-playbook/contents/react-interview-preparation/en-US.langnostic.json b/packages/react-interview-playbook/contents/react-interview-preparation/en-US.langnostic.json
new file mode 100644
index 0000000000..3a6c3248f7
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-interview-preparation/en-US.langnostic.json
@@ -0,0 +1,117 @@
+{
+  "frontmatter": {
+    "title": "f2949ed2",
+    "description": "5b377e79"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "997eb2bc",
+        "a70fbb8a",
+        "510e3122",
+        "ab4c6371",
+        "a679d7a0",
+        "e8c1c5cc",
+        "ee921d3b",
+        "673367b1",
+        "7c50336c",
+        "51ea93b9",
+        "d1a66564",
+        "a68083bf",
+        "3aa6fb9f",
+        "bffa827",
+        "19979d44",
+        "a3ab0683",
+        "187f374e",
+        "a92588a9",
+        "9dfaefca",
+        "f9b35a4d",
+        "91cda1b7",
+        "a89733f7",
+        "35c896e4",
+        "8fc86db8",
+        "b67e81d",
+        "c8a2df85",
+        "13a82562",
+        "cc74b848",
+        "97325e96",
+        "ac43b31b",
+        "8c8ece43",
+        "8bef2f1b",
+        "93255159",
+        "c4ef1e3b",
+        "97b13d30",
+        "671e3c37",
+        "a36a0132",
+        "1167bdd3",
+        "d68ad290",
+        "d2736d8b",
+        "ddd1b879",
+        "a8290a15",
+        "f9bd4637",
+        "c7d41520",
+        "3467d3f2",
+        "f1eec60d",
+        "463a3ec7",
+        "625c188",
+        "a7b66ec",
+        "ba275228"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "997eb2bc",
+        "a70fbb8a",
+        "510e3122",
+        "ab4c6371",
+        "a679d7a0",
+        "e8c1c5cc",
+        "ee921d3b",
+        "673367b1",
+        "7c50336c",
+        "51ea93b9",
+        "d1a66564",
+        "a68083bf",
+        "3aa6fb9f",
+        "bffa827",
+        "19979d44",
+        "a3ab0683",
+        "187f374e",
+        "a92588a9",
+        "9dfaefca",
+        "f9b35a4d",
+        "91cda1b7",
+        "a89733f7",
+        "35c896e4",
+        "8fc86db8",
+        "b67e81d",
+        "c8a2df85",
+        "13a82562",
+        "cc74b848",
+        "97325e96",
+        "ac43b31b",
+        "8c8ece43",
+        "8bef2f1b",
+        "93255159",
+        "c4ef1e3b",
+        "97b13d30",
+        "671e3c37",
+        "a36a0132",
+        "1167bdd3",
+        "d68ad290",
+        "d2736d8b",
+        "ddd1b879",
+        "a8290a15",
+        "f9bd4637",
+        "c7d41520",
+        "3467d3f2",
+        "f1eec60d",
+        "463a3ec7",
+        "625c188",
+        "a7b66ec",
+        "ba275228"
+      ]
+    }
+  }
+}
diff --git a/packages/react-interview-playbook/contents/react-interview-preparation/en-US.mdx b/packages/react-interview-playbook/contents/react-interview-preparation/en-US.mdx
new file mode 100644
index 0000000000..7ec59789b0
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-interview-preparation/en-US.mdx
@@ -0,0 +1,109 @@
+---
+title: How to Prepare for React Interviews
+description: A strategic guide offering a step-by-step plan to prepare for React interviews by outlining essential study steps, core concepts, and topics that are most critical for success
+---
+
+## Recommended preparation strategy
+
+Although everyone's mastery of React is different, this preparation plan can be used by most people that have a React interview coming up.
+
+1. **Read [react.dev](https://react.dev)**: Read the ["Learn" section of react.dev](https://react.dev/learn) cover-to-cover. It's not extremely long and can be completed in a day
+2. **Read this guidebook**: Read this "React Interview Playbook" cover-to-cover. It's also not very long and can be completed in two hours
+3. **Practice**: Practice makes perfect, get your hands dirty and start studying!
+   - **Quiz questions**: Practice [React quiz questions on GreatFrontEnd](/questions/react-interview-questions/quiz)
+   - **Coding questions**: Practice building [UI questions using React on GreatFrontEnd](/questions/react-interview-questions)
+4. Read [GreatFrontEnd's front end system design questions](/questions/formats/system-design) if targeting for a senior role or expecting system design rounds
+
+## Important concepts for interviews
+
+Although by now React is a vast library by with many concepts to master and APIs to learn, not all concepts are important for interviews. This guidebook covers the most important concepts that candidates are expected to know during interviews as well as the various key points.
+
+### Basic concepts
+
+Understanding the basic concepts in React is crucial for any front end interview, as they form the foundation of building and reasoning about React applications. This includes core concepts like components, JSX, props, state, and how rendering happens. Mastery of these basics enables engineers to construct modular, reusable UI components and efficiently manage application state. Without a solid grasp of these fundamentals, tackling more advanced topics such as hooks, performance optimizations, or state management becomes significantly more challenging.
+
+Interviewers often test these concepts to gauge a candidate's ability to build and reason about React applications effectively. [Read more about the basic concepts in React](/react-interview-playbook/react-basic-concepts).
+
+### Thinking declaratively
+
+React encourages a declarative programming style, where UI logic is expressed in terms of "what to render" rather than "how to render it". This approach makes code more predictable, easier to debug, and more maintainable. Instead of manually manipulating the DOM, React developers describe the UI in terms of components and state, letting React handle updates efficiently.
+
+Understanding declarative patterns is crucial in interviews, as it reflects a candidate's ability to write clean, maintainable, and idiomatic React code. [Read more about thinking declaratively in React](/react-interview-playbook/react-basic-concepts).
+
+### State design
+
+State design is a critical part of building scalable React applications, as poor state management can lead to unnecessary re-renders, hard-to-maintain code, and performance issues. A well-structured state design considers factors like co-locating state where it is needed, lifting state up when necessary, and minimizing unnecessary state variables. Interviewers assess candidates on their ability to decide where state should live and how to structure it for clarity and efficiency.
+
+Mastery of state design principles is key to building robust React applications that remain performant and scalable as complexity grows. [Read more about state design in React](/react-interview-playbook/react-state-design).
+
+### React hooks
+
+React hooks, introduced in React 16.8, revolutionized state and side effect management in function components. Hooks like `useState`, `useEffect`, and `useContext` enable developers to handle state and lifecycle events without needing class components. More advanced hooks like `useMemo` and `useCallback` help optimize performance. Understanding hooks is crucial in front end interviews, as they are the primary way React developers manage state, side effects, and component logic in modern applications.
+
+Candidates are often tested on their ability to use hooks correctly while avoiding common pitfalls like excessive re-renders and dependency array misconfigurations. [Read more hooks in React](/react-interview-playbook/react-hooks).
+
+### Event handling
+
+Event handling in React differs from vanilla JavaScript, as it uses synthetic events for cross-browser consistency and performance optimizations. Understanding how to work with event handlers, pass event data, and optimize event-driven logic is essential in React development. Candidates should be familiar with common patterns like preventing default behavior, handling input changes, and efficiently binding event handlers to avoid unnecessary re-renders.
+
+Since UI interactions are central to front end applications, interviewers often test a candidate's ability to handle events in a structured and efficient manner. [Read more about event handling in React](/react-interview-playbook/react-event-handling).
+
+### Forms
+
+Forms are a fundamental part of many web applications, handling user inputs and interactions. In React, managing forms involves controlled and uncontrolled components, state updates, and form validation. A strong understanding of form handling ensures a seamless user experience while maintaining performance and scalability. Interviewers frequently assess a candidate's ability to manage form state, implement validations, and handle form submissions efficiently.
+
+Mastering forms in React is crucial for developing data-driven applications where user inputs play a central role. [Read more about writing forms in React](/react-interview-playbook/react-forms).
+
+### Data fetching
+
+Fetching and managing data efficiently is a key aspect of React applications. Whether using `fetch`, `Axios`, or React Query, candidates need to understand how to handle asynchronous operations, caching, pagination, error handling, and performance optimizations like debouncing and memoization. Many interview questions revolve around fetching data efficiently while avoiding common pitfalls such as excessive re-renders and race conditions.
+
+Since many React applications interact with external APIs, strong data fetching skills demonstrate an ability to build real-world applications that perform well and handle data gracefully. [Read more about data fetching in React](/react-interview-playbook/react-data-fetching).
+
+### Design patterns
+
+React development benefits from common design patterns that enhance code reusability, maintainability, and scalability. Patterns like higher-order components (HOCs), render props, and compound components enable developers to create flexible, modular components. More modern patterns, like hooks-based composition and context-based state management, simplify complex logic. Interviewers often test candidates on their understanding of these patterns to gauge their ability to write scalable and maintainable React code.
+
+Strong knowledge of React design patterns showcases an ability to architect large applications in a clean, efficient manner. [Read more about design patterns in React](/react-interview-playbook/react-design-patterns).
+
+### Performance optimization strategies
+
+Performance optimization is a key skill in React development, as poorly optimized applications can suffer from slow renders, excessive re-renders, and sluggish user experiences. Strategies like memoization (`useMemo`, `useCallback`), virtualization (e.g., React Virtualized), lazy loading (`React.lazy`), and optimizing state updates help improve application performance. Front end interviews frequently assess a candidate's ability to recognize and address performance bottlenecks, ensuring smooth and efficient applications.
+
+Demonstrating strong optimization techniques highlights a developer's ability to build high-performance React applications that scale effectively.
+
+## Concepts that you probably won't need
+
+These concepts are either still quite new, not mature yet, or not used directly by developers, hence they aren't that relevant for interviews.
+
+### Suspense
+
+[Suspense](https://react.dev/reference/react/Suspense) is a React feature designed for handling asynchronous operations like data fetching, code splitting, and lazy loading components in a more declarative way.
+
+While it's a useful tool for improving user experience, it is not commonly tested in front end interviews because there are usually higher level abstractions to use for data fetching and code splitting. Most interviewers focus on fundamental data fetching patterns (e.g., `useEffect`, TanStack Query, or SWR) rather than `<Suspense>`-based solutions.
+
+### Server components
+
+[React Server Components (RSC)](https://react.dev/reference/rsc/server-components) are a major shift in React's architecture, allowing developers to render components on the server while reducing client-side JavaScript bundle sizes. While they offer significant performance benefits, they are still relatively new and mainly relevant for projects using frameworks like Next.js.
+
+Since many front end interviews focus on React fundamentals and client-side rendering, RSCs are unlikely to be a priority in interviews. Most companies are still transitioning to these patterns, making them less relevant for assessing a candidate's core React skills.
+
+### Server functions
+
+[Server functions](https://react.dev/reference/rsc/server-functions), such as those found in Next.js (API routes) or other serverless architectures, enable handling business logic on the server rather than the client.
+
+While they are important for full-stack applications, front end interviews typically emphasize client-side concerns like component structure, state management, and UI performance. Unless interviewing for a full-stack role, knowledge of server functions is not a key evaluation criterion, as they fall outside the core responsibilities of a front end engineer focused on React.
+
+### Changes in React 19
+
+[React 19](https://react.dev/blog/2024/12/05/react-19) introduces several updates, such as improvements to Suspense, server actions, new hooks, etc.
+
+While these changes are valuable for developers staying up to date with the ecosystem, they are not typically the focus of front end interviews. Most companies prioritize a candidate's ability to work with widely adopted React patterns rather than the latest experimental features. Since React 19 is still being adopted, interviewers are unlikely to expect deep knowledge of its updates unless specifically mentioned in a job description.
+
+### React compiler
+
+[React Compiler](https://react.dev/learn/react-compiler) is an upcoming optimization tool that aims to improve performance by automatically optimizing React code at build time.
+
+While it promises efficiency gains, it has not yet been widely adopted and remains in an early phase. Since front end interviews typically focus on hands-on problem-solving and existing optimization techniques (`useMemo`, `useCallback`, etc.), the React Compiler is not a crucial topic for candidates to study.
+
+Until it becomes a standard part of the React ecosystem, it is unlikely to appear in most front end interviews.
diff --git a/packages/react-interview-playbook/contents/react-interview-preparation/zh-CN.mdx b/packages/react-interview-playbook/contents/react-interview-preparation/zh-CN.mdx
new file mode 100644
index 0000000000..eccc05991e
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-interview-preparation/zh-CN.mdx
@@ -0,0 +1,109 @@
+---
+title: 如何准备 React 面试
+description: 一份战略指南，提供逐步计划，通过概述必要的学习步骤、核心概念和对成功至关重要的主题来准备 React 面试
+---
+
+## 推荐的准备策略
+
+虽然每个人对 React 的掌握程度不同，但大多数即将参加 React 面试的人都可以使用此准备计划。
+
+1. **阅读 [react.dev](https://react.dev)**：从头到尾阅读 [react.dev 的“学习”部分](https://react.dev/learn)。它不是很长，可以在一天内完成
+2. **阅读本指南**：从头到尾阅读这本“React 面试手册”。它也不是很长，可以在两个小时内完成
+3. **练习**：熟能生巧，动手开始学习！
+   * **测验问题**：在 [GreatFrontEnd 上练习 React 测验问题](/questions/react-interview-questions/quiz)
+   * **编码问题**：在 [GreatFrontEnd 上练习使用 React 构建 UI 问题](/questions/react-interview-questions)
+4. 如果目标是高级职位或期望系统设计环节，请阅读 [GreatFrontEnd 的前端系统设计问题](/questions/formats/system-design)
+
+## 面试的重要概念
+
+虽然到目前为止 React 已经是一个庞大的库，有很多概念需要掌握，API 需要学习，但并非所有概念都对面试很重要。本指南涵盖了面试中预计候选人需要知道的最重要的概念以及各种关键点。
+
+### 基本概念
+
+了解 React 中的基本概念对于任何前端面试都至关重要，因为它们构成了构建和推理 React 应用程序的基础。这包括组件、JSX、props、state 和渲染如何发生的等核心概念。掌握这些基础知识使工程师能够构建模块化、可重用的 UI 组件并有效地管理应用程序状态。如果对这些基础知识没有扎实的掌握，那么处理更高级的主题（如 hooks、性能优化或状态管理）将变得更具挑战性。
+
+面试官经常测试这些概念，以衡量候选人有效构建和推理 React 应用程序的能力。[阅读更多关于 React 中的基本概念](/react-interview-playbook/react-basic-concepts)。
+
+### 声明式思考
+
+React 鼓励声明式编程风格，其中 UI 逻辑用“要渲染什么”而不是“如何渲染它”来表达。这种方法使代码更可预测、更容易调试和维护。React 开发人员不手动操作 DOM，而是根据组件和状态描述 UI，让 React 有效地处理更新。
+
+在面试中，理解声明式模式至关重要，因为它反映了候选人编写干净、可维护和惯用的 React 代码的能力。[阅读更多关于 React 中的声明式思考](/react-interview-playbook/react-basic-concepts)。
+
+### 状态设计
+
+状态设计是构建可扩展 React 应用程序的关键部分，因为糟糕的状态管理可能导致不必要的重新渲染、难以维护的代码和性能问题。一个结构良好的状态设计考虑了诸如将状态与需要它的地方放在一起、在必要时提升状态以及最大限度地减少不必要的状态变量等因素。面试官会根据候选人决定状态应该存在的位置以及如何构建状态以提高清晰度和效率的能力来评估他们。
+
+掌握状态设计原则是构建强大的 React 应用程序的关键，这些应用程序在复杂性增加时仍能保持高性能和可扩展性。[阅读更多关于 React 中的状态设计](/react-interview-playbook/react-state-design)。
+
+### React hooks
+
+React 16.8 中引入的 React hooks 彻底改变了函数组件中的状态和副作用管理。像 `useState`、`useEffect` 和 `useContext` 这样的 Hooks 使开发人员能够处理状态和生命周期事件，而无需类组件。更高级的 hooks（如 `useMemo` 和 `useCallback`）有助于优化性能。了解 hooks 在前端面试中至关重要，因为它们是 React 开发人员在现代应用程序中管理状态、副作用和组件逻辑的主要方式。
+
+候选人经常接受测试，以确保他们能够正确使用 hooks，同时避免常见的陷阱，例如过度重新渲染和依赖项数组配置错误。[阅读更多关于 React 中的 hooks](/react-interview-playbook/react-hooks)。
+
+### 事件处理
+
+React 中的事件处理与原始 JavaScript 不同，因为它使用合成事件来实现跨浏览器一致性和性能优化。了解如何使用事件处理程序、传递事件数据以及优化事件驱动的逻辑对于 React 开发至关重要。候选人应该熟悉常见的模式，如阻止默认行为、处理输入更改以及有效地将事件处理程序绑定到避免不必要的重新渲染。
+
+由于 UI 交互是前端应用程序的核心，面试官通常会测试候选人以结构化和高效的方式处理事件的能力。[阅读更多关于 React 中的事件处理](/react-interview-playbook/react-event-handling)。
+
+### 表单
+
+表单是许多 Web 应用程序的基本组成部分，用于处理用户输入和交互。在 React 中，管理表单涉及受控和非受控组件、状态更新和表单验证。对表单处理的深入理解可确保无缝的用户体验，同时保持性能和可扩展性。面试官经常评估候选人管理表单状态、实现验证以及有效处理表单提交的能力。
+
+掌握 React 中的表单对于开发用户输入起核心作用的数据驱动型应用程序至关重要。[阅读更多关于在 React 中编写表单的信息](/react-interview-playbook/react-forms)。
+
+### 数据获取
+
+有效地获取和管理数据是 React 应用程序的一个关键方面。无论是使用 `fetch`、`Axios` 还是 React Query，候选人都需要了解如何处理异步操作、缓存、分页、错误处理以及性能优化，如防抖和记忆化。许多面试问题都围绕着有效地获取数据，同时避免常见的陷阱，如过度重新渲染和竞态条件。
+
+由于许多 React 应用程序与外部 API 交互，强大的数据获取技能展示了构建性能良好且能够优雅地处理数据的实际应用程序的能力。[阅读更多关于 React 中的数据获取](/react-interview-playbook/react-data-fetching)。
+
+### 设计模式
+
+React 开发受益于常见的设计模式，这些模式增强了代码的可重用性、可维护性和可扩展性。高阶组件 (HOC)、渲染属性和复合组件等模式使开发人员能够创建灵活的模块化组件。更现代的模式，如基于钩子的组合和基于上下文的状态管理，简化了复杂的逻辑。面试官通常会测试候选人对这些模式的理解，以衡量他们编写可扩展和可维护的 React 代码的能力。
+
+对 React 设计模式的深入了解展示了以清晰、高效的方式构建大型应用程序的能力。[阅读更多关于 React 中的设计模式](/react-interview-playbook/react-design-patterns)。
+
+### 性能优化策略
+
+性能优化是 React 开发中的一项关键技能，因为优化不佳的应用程序可能会受到渲染速度慢、过度重新渲染和用户体验迟缓的影响。记忆化（`useMemo`、`useCallback`）、虚拟化（例如，React Virtualized）、惰性加载（`React.lazy`）和优化状态更新等策略有助于提高应用程序性能。前端面试经常评估候选人识别和解决性能瓶颈的能力，从而确保应用程序流畅高效。
+
+展示强大的优化技术突出了开发人员构建能够有效扩展的高性能 React 应用程序的能力。
+
+## 你可能不需要的概念
+
+这些概念要么还很新，要么尚未成熟，要么开发人员没有直接使用，因此它们与面试关系不大。
+
+### Suspense
+
+[Suspense](https://react.dev/reference/react/Suspense) 是一个 React 功能，旨在以更具声明性的方式处理异步操作，如数据获取、代码拆分和惰性加载组件。
+
+虽然它是一个用于改善用户体验的有用工具，但它通常不在前端面试中进行测试，因为通常有更高级别的抽象用于数据获取和代码拆分。大多数面试官侧重于基本的数据获取模式（例如，`useEffect`、TanStack Query 或 SWR），而不是基于 `<Suspense>` 的解决方案。
+
+### 服务端组件
+
+[React 服务器组件 (RSC)](https://react.dev/reference/rsc/server-components) 是 React 架构的一大转变，允许开发者在服务器上渲染组件，同时减少客户端 JavaScript 捆绑包的大小。 尽管它们提供了显著的性能优势，但它们仍然相对较新，主要与使用 Next.js 等框架的项目相关。
+
+由于许多前端面试侧重于 React 基础知识和客户端渲染，因此 RSC 不太可能成为面试的重点。 大多数公司仍在过渡到这些模式，这使得它们与评估候选人的核心 React 技能相关性较低。
+
+### 服务器函数
+
+[服务器函数](https://react.dev/reference/rsc/server-functions)，例如在 Next.js（API 路由）或其他无服务器架构中找到的函数，支持在服务器而不是客户端上处理业务逻辑。
+
+虽然它们对全栈应用程序很重要，但前端面试通常强调客户端问题，如组件结构、状态管理和 UI 性能。 除非面试的是全栈角色，否则服务器函数的知识不是关键的评估标准，因为它们超出了专注于 React 的前端工程师的核心职责范围。
+
+### React 19 中的变化
+
+[React 19](https://react.dev/blog/2024/12/05/react-19) 引入了几项更新，例如对 Suspense 的改进、服务器操作、新钩子等。
+
+虽然这些变化对于希望与生态系统保持同步的开发人员来说很有价值，但它们通常不是前端面试的重点。 大多数公司优先考虑候选人使用广泛采用的 React 模式而不是最新的实验性功能的能力。 由于 React 19 仍在采用中，除非在职位描述中特别提及，否则面试官不太可能期望对它的更新有深入的了解。
+
+### React 编译器
+
+[React Compiler](https://react.dev/learn/react-compiler) 是一个即将推出的优化工具，旨在通过在构建时自动优化 React 代码来提高性能。
+
+虽然它承诺提高效率，但尚未被广泛采用，仍处于早期阶段。 由于前端面试通常侧重于实践问题解决和现有的优化技术（`useMemo`、`useCallback` 等），因此 React Compiler 并不是候选人需要研究的关键主题。
+
+在它成为 React 生态系统的一部分之前，它不太可能出现在大多数前端面试中。
diff --git a/packages/react-interview-playbook/contents/react-landscape-history/en-US.langnostic.json b/packages/react-interview-playbook/contents/react-landscape-history/en-US.langnostic.json
new file mode 100644
index 0000000000..2e8f2d15c9
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-landscape-history/en-US.langnostic.json
@@ -0,0 +1,113 @@
+{
+  "frontmatter": {
+    "title": "8298d291",
+    "description": "7bec1b01"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "90b7b80e",
+        "43f83f37",
+        "267f59df",
+        "618ff351",
+        "1a9c5935",
+        "aa3127aa",
+        "63baeff1",
+        "5f64bb7f",
+        "7278040b",
+        "8e7bfefe",
+        "50831792",
+        "81e8c5c4",
+        "819a676f",
+        "b4c1169f",
+        "c6c9f37",
+        "b575952c",
+        "2e4cf6b3",
+        "880d8d9d",
+        "84d5741b",
+        "6c94e261",
+        "d50b7679",
+        "d91dba77",
+        "f831e888",
+        "a98c9e2d",
+        "d18225db",
+        "33008f49",
+        "d79616a3",
+        "8fc86db8",
+        "90969dd4",
+        "b8610e8e",
+        "b668cba0",
+        "6c229985",
+        "73573ab4",
+        "209ae7d1",
+        "5948f9ad",
+        "1ddef267",
+        "4ad4768c",
+        "d285b3fe",
+        "541779b3",
+        "72a425a0",
+        "fd1895ea",
+        "a487747f",
+        "db3e31c0",
+        "ee461b59",
+        "c1cb66d8",
+        "2a7816d0",
+        "806201d0",
+        "9eb452c9"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "90b7b80e",
+        "43f83f37",
+        "267f59df",
+        "618ff351",
+        "1a9c5935",
+        "aa3127aa",
+        "63baeff1",
+        "5f64bb7f",
+        "7278040b",
+        "8e7bfefe",
+        "50831792",
+        "81e8c5c4",
+        "819a676f",
+        "b4c1169f",
+        "c6c9f37",
+        "b575952c",
+        "2e4cf6b3",
+        "880d8d9d",
+        "84d5741b",
+        "6c94e261",
+        "d50b7679",
+        "d91dba77",
+        "f831e888",
+        "a98c9e2d",
+        "d18225db",
+        "33008f49",
+        "d79616a3",
+        "8fc86db8",
+        "90969dd4",
+        "b8610e8e",
+        "b668cba0",
+        "6c229985",
+        "73573ab4",
+        "209ae7d1",
+        "5948f9ad",
+        "1ddef267",
+        "4ad4768c",
+        "d285b3fe",
+        "541779b3",
+        "72a425a0",
+        "fd1895ea",
+        "a487747f",
+        "db3e31c0",
+        "ee461b59",
+        "c1cb66d8",
+        "2a7816d0",
+        "806201d0",
+        "9eb452c9"
+      ]
+    }
+  }
+}
diff --git a/packages/react-interview-playbook/contents/react-landscape-history/en-US.mdx b/packages/react-interview-playbook/contents/react-landscape-history/en-US.mdx
new file mode 100644
index 0000000000..5c4f7278e6
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-landscape-history/en-US.mdx
@@ -0,0 +1,127 @@
+---
+title: Landscape and History of React
+description: A overview of React's evolution, from its Facebook origins to its current dominance as a versatile, battle-tested library with a vast ecosystem of tools and innovations
+---
+
+## Why React?
+
+Why has React remained dominant in the front end ecosystem for so long? There are several key reasons:
+
+- **Corporate backing and enterprise adoption**: React was created at Facebook and powers all of their products user interfaces. It's trusted by major companies and enterprises worldwide to build applications across all sizes.
+- **Huge community support**: Abundance of resources for learning React, from React's official docs, along with countless tutorials, courses, and GitHub projects.
+- **Massive open source ecosystem**: From state management libraries (Redux, Zustand, Recoil) to UI component frameworks (Material UI, Chakra UI), React's ecosystem is vast and continues to evolve.
+- **Server-side and full stack capabilities**: React is no longer just for the front end. With Next.js and React Server Components, it's now deeply integrated into the back-end, enabling full-stack React applications.
+- **Support & stability**: React has consistently evolved while maintaining good backward compatibility.
+
+React's wide adoption, strong community, and ongoing innovation make it the go-to choice for front end development today.
+
+## History and evolution of React
+
+React didn't become the most widely used front end framework overnight. It evolved through years of iteration and problem-solving. To truly appreciate where React is today, it helps to look back at how it started and progressed.
+
+**2011 – Birth of React:** React began as an internal project at Facebook. Engineers were struggling with performance issues when rendering dynamic UIs (like Facebook's News Feed). Jordan Walke created an early version of React called "FaxJS", which later became React.
+
+**2013 – Open sourcing React:** React was [officially open sourced at JSConf US](https://www.youtube.com/watch?v=GW0rj4sNH2w) in May 2013. At first, it was met with skepticism – especially JSX, which mixed JavaScript with HTML. However, developers soon realized that React's Virtual DOM approach led to better performance.
+
+**2015 – Flux & state management:** State management in React was a growing challenge, especially for large-scale applications with complex data flows. To address this, Facebook introduced Flux, an architectural pattern that enforced a unidirectional data flow, making state changes more predictable and easier to debug. Flux inspired the creation of Redux, which quickly became the de facto state management solution for React due to its centralized store, immutability principles, and time-travel debugging capabilities.
+
+**2016 – Functional components & Fiber architecture:** React introduced functional components as an alternative to class components, making component logic cleaner and more reusable. Around the same time, work on [React Fiber](https://github.com/acdlite/react-fiber-architecture) started, which is a complete rewrite of React's core architecture and reconciliation algorithm, improving performance and paving the way for features like Concurrent Mode and Suspense.
+
+**2018 – React hooks:** Before Hooks, developers relied on class components to manage state and lifecycle methods. Unveiled at React Conf 2018, React 16.8 introduced Hooks (`useState`, `useEffect`, etc.), shifting React's development style towards functional programming.
+
+**2020 – Concurrent mode & Suspense:** React 17 laid the groundwork for Concurrent Mode, allowing React to prioritize rendering work and make apps feel more responsive. React Suspense made it easier to handle data fetching.
+
+**2021 - React Forget:** An early preview of [React Forget](https://www.youtube.com/watch?v=lGEMwh32soc) was presented at React Conf 2021. It's a compiler that automatically generates the equivalent of `useMemo` and `useCallback` calls to minimize the cost of re-rendering.
+
+**2022 – React 18 and Server Components:** React 18 introduced automatic batching, new hooks (`useId`, `useTransition`), and [React Server Components](https://react.dev/reference/rsc/use-server), allowing developers to offload rendering work to the server.
+
+**2023 – New official website:** React unveiled [react.dev](https://react.dev/) as the new official website for React documentation and resources, offering a more comprehensive and user-friendly experience for developers with the inclusion of embedded coding exercises.
+
+**2024 – React 19:** The latest React version further optimized Server Components and improved static site generation. The introduction of Actions simplified state updates, making React apps easier to manage. An experimental release of [React Compiler](https://react.dev/learn/react-compiler) was [announced](https://react.dev/blog/2024/10/21/react-compiler-beta-release) at React Conf 2024.
+
+## React ecosystem
+
+The React ecosystem is vast and consists of several official and community-driven projects that extend React's capabilities. These projects help developers build scalable, performant, and maintainable applications.
+
+Aim to be familiar and gain experience with at least one technology in each category.
+
+### State management
+
+React has built-in state management (`useState`, `useReducer`, and Context API), but external solutions are often used for managing global state.
+
+- [Redux](https://redux.js.org): A predictable state container often used for large applications
+- [Zustand](https://zustand-demo.pmnd.rs): A lightweight alternative to Redux with a simple API
+- [Jotai](https://jotai.pmnd.rs): A minimal atomic state library for React
+
+### UI components
+
+Many UI libraries provide styled and themeable components for React applications.
+
+- [MUI (Material UI)](https://mui.com): A popular and themeable component library based originally on Material Design
+- [Mantine](https://mantine.dev): A modern, fully-featured React component library with built-in accessibility, dark mode support, and a flexible styling API
+- [Ant Design](https://ant.design): A popular enterprise-focused UI component library
+
+Meanwhile, headless UI libraries provide unstyled, fully accessible components that give developers full control over styling while maintaining functionality and accessibility best practices.
+
+- [Headless UI](https://headlessui.com): Developed by the Tailwind team, it provides fully accessible, unstyled components like modals, dropdowns, and accordions
+- [Radix UI](https://radix-ui.com): A set of highly composable, accessible components designed for low-level UI building with full styling flexibility
+- [Base UI](https://base-ui.com/): Headless, unstyled component library from creators of Radix UI, and Material UI team
+- [React Aria](https://react-spectrum.adobe.com/react-aria/): A set of highly accessible hooks from Adobe for building fully customizable UI components
+- [Ariakit](https://ariakit.org/): Open-source library with unstyled, primitive components, with a collection of styled examples that you can copy and paste into your apps
+
+### Data fetching
+
+React apps frequently fetch data from HTTP APIs and libraries have been built to make it easier to fetch data, incorporating useful features like caching, retries, and pagination.
+
+- [React Query (TanStack Query)](https://tanstack.com/query): Popular server state management tool for React. It optimizes caching, background syncing, and pagination
+- [SWR](https://swr.vercel.app): A lightweight data fetching library by Vercel, optimized for performance
+- [Apollo Client](https://www.apollographql.com): The most widely-used GraphQL client for React
+- [Relay](https://relay.dev): A GraphQL client by Meta that is optimized for performance
+
+### Form validation
+
+Libraries for client-side validation of forms built in React.
+
+- [React Hook Form](https://react-hook-form.com/): A lightweight, performant library built entirely with React hooks. Minimizes re-renders and supports both built‑in validation rules and schema-based validation (with Yup, Zod, etc.), making it ideal for both small and complex forms
+- [Formik](https://formik.org/): Although no longer maintained, it was one of the most popular form libraries that offers a declarative way to manage form state, validation, and error handling. Formik is often paired with Yup for schema validation but tends to be more opinionated and slightly heavier compared to React Hook Form
+
+### Routing & metaframeworks
+
+Several frameworks extend React (known as metaframeworks) by adding routing, server-side rendering, and full stack capabilities.
+
+- [Next.js](https://nextjs.org): A full stack React framework by Vercel that supports various rendering approaches (e.g. server-side rendering (SSR), static site generation (SSG)) and nested routing
+- [Remix](https://remix.run) & [React Router](https://reactrouter.com): A full-stack React framework that emphasizes progressive enhancement and nested routing, from the creators of React Router. The Remix team [merged Remix's features into React Router v7](https://remix.run/blog/merging-remix-and-react-router)
+- [TanStack Start](https://tanstack.com/start): Full-stack React framework powered by TanStack Router
+
+### Testing & debugging
+
+React applications often require unit, integration, and end-to-end testing.
+
+- [Jest](https://jestjs.io): A popular testing framework for unit and integration tests
+- [Vitest](https://vitest.dev): A testing framework that uses Vite bundling and config
+- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/): A user-focused testing library that simulates real user interactions
+- [Storybook](https://storybook.js.org): A tool for developing and testing isolated UI components
+- [Cypress](https://www.cypress.io): A popular end-to-end (E2E) testing tool for websites
+- [React DevTools](https://react.dev/tools): An official browser extension for debugging React components
+
+### Bundlers
+
+Bundlers help convert your modular code (with imports, JSX, CSS, images, etc.) into optimized bundles that can be efficiently served in development and production.
+
+- [Vite](https://vitejs.dev): A very fast development server and bundler for web apps, with great support for React
+- [Parcel](https://parceljs.org): A zero-config bundler for JavaScript apps, including React
+- [webpack](https://webpack.js.org): Highly configurable module bundler that has been the industry standard for many years. Succeeded by [Turbopack](https://turbo.build/pack/docs)
+
+### Animation & effects
+
+Animation has traditionally been quite difficult to build in React. Thankfully, various animation and transition libraries were created to make animation easier.
+
+- [Motion](https://motion.dev/): A popular and powerful animation library with a declarative API. Previously Framer Motion
+- [React Spring](https://react-spring.dev): Provides fluid, physics-based animations
+- [GSAP (GreenSock)](https://greensock.com/gsap/): A high-performance JavaScript animation library compatible with React
+
+---
+
+React has come a long way from its early days as an internal library at Meta. Today, it's a mature, battle-tested library/framework that continues to evolve. Understanding its history and ecosystem gives you context on why certain patterns exist and how React solves real-world problems.
+
+As we move through this guide, keep in mind that companies look for engineers who understand React's core principles, performance optimizations, and real-world applications. By the time you finish this guide, you'll not only be able to answer React interview questions – you'll be better at using React.
diff --git a/packages/react-interview-playbook/contents/react-landscape-history/zh-CN.mdx b/packages/react-interview-playbook/contents/react-landscape-history/zh-CN.mdx
new file mode 100644
index 0000000000..f72a64a877
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-landscape-history/zh-CN.mdx
@@ -0,0 +1,127 @@
+---
+title: React 的发展历程和历史
+description: React 的演变概述，从其 Facebook 起源到目前作为一种多功能、经过实战考验的库，拥有庞大的工具和创新生态系统。
+---
+
+## 为什么选择 React？
+
+为什么 React 在前端生态系统中长期保持主导地位？这有几个关键原因：
+
+* **企业支持和企业采用**：React 创建于 Facebook，并为他们的所有产品用户界面提供支持。它受到全球主要公司和企业的信赖，用于构建各种规模的应用程序。
+* **巨大的社区支持**：有大量用于学习 React 的资源，包括 React 的官方文档，以及无数的教程、课程和 GitHub 项目。
+* **庞大的开源生态系统**：从状态管理库（Redux、Zustand、Recoil）到 UI 组件框架（Material UI、Chakra UI），React 的生态系统非常庞大，并且不断发展。
+* **服务器端和全栈功能**：React 不再仅仅用于前端。通过 Next.js 和 React Server Components，它现在已深入集成到后端，支持全栈 React 应用程序。
+* **支持和稳定性**：React 一直在不断发展，同时保持良好的向后兼容性。
+
+React 的广泛采用、强大的社区和持续创新使其成为当今前端开发的理想选择。
+
+## React 的历史和演变
+
+React 并非一夜之间成为使用最广泛的前端框架。它通过多年的迭代和问题解决而发展。要真正了解 React 今天的地位，回顾它的开始和发展历程会很有帮助。
+
+**2011 – React 的诞生：** React 最初是 Facebook 的一个内部项目。工程师们在渲染动态 UI（如 Facebook 的新闻提要）时遇到了性能问题。Jordan Walke 创建了 React 的早期版本，名为“FaxJS”，后来变成了 React。
+
+**2013 – React 开源：** React 于 2013 年 5 月在 [JSConf US 上正式开源](https://www.youtube.com/watch?v=GW0rj4sNH2w)。起初，它受到了质疑——尤其是 JSX，它将 JavaScript 与 HTML 混合在一起。然而，开发人员很快意识到 React 的 Virtual DOM 方法带来了更好的性能。
+
+**2015 – Flux 和状态管理：** React 中的状态管理是一个日益增长的挑战，尤其是在具有复杂数据流的大型应用程序中。为了解决这个问题，Facebook 引入了 Flux，这是一种强制执行单向数据流的架构模式，使状态更改更可预测且更易于调试。Flux 启发了 Redux 的创建，由于其集中式存储、不变性原则和时间旅行调试功能，Redux 很快成为 React 的事实上的状态管理解决方案。
+
+**2016 – 函数式组件和 Fiber 架构：** React 引入了函数式组件作为类组件的替代方案，使组件逻辑更清晰、更可重用。大约在同一时间，[React Fiber](https://github.com/acdlite/react-fiber-architecture) 的工作开始，这是对 React 核心架构和协调算法的完全重写，提高了性能，并为并发模式和 Suspense 等功能铺平了道路。
+
+**2018 – React Hooks：** 在 Hooks 出现之前，开发人员依赖类组件来管理状态和生命周期方法。在 React Conf 2018 上发布，React 16.8 引入了 Hooks（`useState`、`useEffect` 等），将 React 的开发风格转向函数式编程。
+
+**2020 – 并发模式和 Suspense：** React 17 为并发模式奠定了基础，允许 React 优先处理渲染工作，并使应用程序感觉更灵敏。React Suspense 使数据获取更容易。
+
+**2021 - React Forget：** [React Forget](https://www.youtube.com/watch?v=lGEMwh32soc) 的早期预览版在 React Conf 2021 上展示。它是一个编译器，可自动生成等效于 `useMemo` 和 `useCallback` 的调用，以最大限度地减少重新渲染的成本。
+
+**2022 – React 18 和服务器组件：** React 18 引入了自动批处理、新的 hooks（`useId`、`useTransition`）和 [React 服务器组件](https://react.dev/reference/rsc/use-server)，允许开发人员将渲染工作卸载到服务器。
+
+**2023 – 新的官方网站：** React 推出了 [react.dev](https://react.dev/) 作为 React 文档和资源的新官方网站，为开发人员提供了更全面、用户友好的体验，其中包括嵌入式编码练习。
+
+**2024 – React 19：** 最新 React 版本进一步优化了服务器组件并改进了静态站点生成。Actions 的引入简化了状态更新，使 React 应用程序更易于管理。React Compiler 的实验性版本在 React Conf 2024 上[发布](https://react.dev/blog/2024/10/21/react-compiler-beta-release)。
+
+## React 生态系统
+
+React 生态系统非常庞大，由几个官方和社区驱动的项目组成，这些项目扩展了 React 的功能。这些项目帮助开发人员构建可扩展、高性能和可维护的应用程序。
+
+目标是熟悉并获得每个类别中至少一项技术的经验。
+
+### 状态管理
+
+React 具有内置的状态管理（`useState`、`useReducer` 和 Context API），但外部解决方案通常用于管理全局状态。
+
+* [Redux](https://redux.js.org): 一种可预测的状态容器，常用于大型应用程序
+* [Zustand](https://zustand-demo.pmnd.rs): Redux 的轻量级替代方案，具有简单的 API
+* [Jotai](https://jotai.pmnd.rs): React 的最小原子状态库
+
+### UI 组件
+
+许多 UI 库为 React 应用程序提供样式化和可主题化的组件。
+
+* [MUI (Material UI)](https://mui.com): 一种流行的、可主题化的组件库，最初基于 Material Design
+* [Mantine](https://mantine.dev): 一个现代的、功能齐全的 React 组件库，具有内置的可访问性、暗模式支持和灵活的样式 API
+* [Ant Design](https://ant.design): 一个流行的、以企业为中心的 UI 组件库
+
+同时，无头 UI 库提供非样式化的、完全可访问的组件，使开发人员可以完全控制样式，同时保持功能和可访问性最佳实践。
+
+* [Headless UI](https://headlessui.com): 由 Tailwind 团队开发，它提供了完全可访问的、非样式化的组件，如模态框、下拉菜单和手风琴
+* [Radix UI](https://radix-ui.com): 一组高度可组合的、可访问的组件，专为低级 UI 构建而设计，具有完全的样式灵活性
+* [Base UI](https://base-ui.com/): 来自 Radix UI 和 Material UI 团队的无头、非样式化组件库
+* [React Aria](https://react-spectrum.adobe.com/react-aria/): Adobe 提供的一组高度可访问的钩子，用于构建完全可定制的 UI 组件
+* [Ariakit](https://ariakit.org/): 具有非样式化、原始组件的开源库，以及您可以复制并粘贴到您的应用程序中的一组样式化示例
+
+### 数据获取
+
+React 应用程序经常从 HTTP API 获取数据，并且已经构建了库来简化数据获取，其中包含缓存、重试和分页等有用功能。
+
+* [React Query (TanStack Query)](https://tanstack.com/query): React 的流行服务器状态管理工具。它优化了缓存、后台同步和分页
+* [SWR](https://swr.vercel.app): Vercel 提供的轻量级数据获取库，针对性能进行了优化
+* [Apollo Client](https://www.apollographql.com): React 最广泛使用的 GraphQL 客户端
+* [Relay](https://relay.dev): Meta 提供的 GraphQL 客户端，针对性能进行了优化
+
+### 表单验证
+
+用于在 React 中构建的表单的客户端验证的库。
+
+* [React Hook Form](https://react-hook-form.com/): 一个轻量级、高性能的库，完全使用 React 钩子构建。最大限度地减少重新渲染，并支持内置验证规则和基于模式的验证（使用 Yup、Zod 等），使其成为小型和复杂表单的理想选择
+* [Formik](https://formik.org/): 尽管不再维护，但它曾经是最流行的表单库之一，它提供了一种声明式方式来管理表单状态、验证和错误处理。Formik 经常与 Yup 配对进行模式验证，但与 React Hook Form 相比，往往更具主观性，并且略重
+
+### 路由和元框架
+
+一些框架通过添加路由、服务器端渲染和全栈功能来扩展 React（称为元框架）。
+
+* [Next.js](https://nextjs.org): Vercel 提供的全栈 React 框架，支持各种渲染方法（例如服务器端渲染 (SSR)、静态站点生成 (SSG)）和嵌套路由
+* [Remix](https://remix.run) & [React Router](https://reactrouter.com): 一个全栈 React 框架，强调渐进式增强和嵌套路由，来自 React Router 的创建者。Remix 团队[将 Remix 的功能合并到 React Router v7 中](https://remix.run/blog/merging-remix-and-react-router)
+* [TanStack Start](https://tanstack.com/start): 由 TanStack Router 提供支持的全栈 React 框架
+
+### 测试和调试
+
+React 应用程序通常需要单元测试、集成测试和端到端测试。
+
+* [Jest](https://jestjs.io): 一个流行的用于单元和集成测试的测试框架
+* [Vitest](https://vitest.dev): 一个使用 Vite 打包和配置的测试框架
+* [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/): 一个以用户为中心的测试库，模拟真实的用户交互
+* [Storybook](https://storybook.js.org): 用于开发和测试独立 UI 组件的工具
+* [Cypress](https://www.cypress.io): 一个流行的用于网站的端到端 (E2E) 测试工具
+* [React DevTools](https://react.dev/tools): 用于调试 React 组件的官方浏览器扩展
+
+### 打包器
+
+打包器帮助将您的模块化代码（包含导入、JSX、CSS、图像等）转换为优化的包，这些包可以在开发和生产中高效地提供。
+
+* [Vite](https://vitejs.dev): 一个非常快的 Web 应用程序开发服务器和打包器，对 React 有很好的支持
+* [Parcel](https://parceljs.org): 一个用于 JavaScript 应用程序（包括 React）的零配置打包器
+* [webpack](https://webpack.js.org): 高度可配置的模块打包器，多年来一直是行业标准。由 [Turbopack](https://turbo.build/pack/docs) 继承
+
+### 动画和效果
+
+传统上，在 React 中构建动画非常困难。 值得庆幸的是，创建了各种动画和过渡库，使动画更容易。
+
+* [Motion](https://motion.dev/): 一个流行的、功能强大的动画库，具有声明式 API。 以前是 Framer Motion
+* [React Spring](https://react-spring.dev): 提供流畅的、基于物理的动画
+* [GSAP (GreenSock)](https://greensock.com/gsap/): 与 React 兼容的高性能 JavaScript 动画库
+
+***
+
+React 从 Meta 的早期内部库发展至今。 如今，它是一个成熟的、经过实战考验的库/框架，并不断发展。 了解其历史和生态系统，可以帮助您了解某些模式存在的原因以及 React 如何解决现实世界中的问题。
+
+在我们浏览本指南时，请记住，公司正在寻找了解 React 核心原则、性能优化和实际应用的工程师。 在您完成本指南时，您不仅能够回答 React 面试问题，而且会更擅长使用 React。
diff --git a/packages/react-interview-playbook/contents/react-signup-form-example/en-US.langnostic.json b/packages/react-interview-playbook/contents/react-signup-form-example/en-US.langnostic.json
new file mode 100644
index 0000000000..44360e8c00
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-signup-form-example/en-US.langnostic.json
@@ -0,0 +1,121 @@
+{
+  "frontmatter": {
+    "title": "2a455036",
+    "description": "a75bc465"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "250a033f",
+        "2dd4ccb1",
+        "7949c8e7",
+        "db024c",
+        "99b4ea46",
+        "fbe55144",
+        "9c8eb850",
+        "dc6e49f0",
+        "6198cacf",
+        "4095dfa7",
+        "346a3ae8",
+        "e63beaf2",
+        "ebc39032",
+        "1e4d171f",
+        "683fbefd",
+        "304851b6",
+        "c735a8ff",
+        "65113060",
+        "4762023b",
+        "5a54fe9b",
+        "b78628eb",
+        "7e65466d",
+        "b94ea14a",
+        "4cc4d4a7",
+        "8bb92041",
+        "1597e6f7",
+        "addd33af",
+        "9b3724e5",
+        "4a151bea",
+        "5cecb131",
+        "f4523689",
+        "e2fa7b73",
+        "83c8ccd",
+        "be611254",
+        "771d378b",
+        "ecf1c03d",
+        "a04f1c44",
+        "c394e720",
+        "ba903ec",
+        "ed8ba52e",
+        "6ca480d1",
+        "1d3c31bc",
+        "4b83e88f",
+        "9d1c854d",
+        "92b919b5",
+        "12401139",
+        "3a42a992",
+        "141d94ce",
+        "32eab227",
+        "38032c9a",
+        "7d043b1e",
+        "6769e780"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "250a033f",
+        "2dd4ccb1",
+        "7949c8e7",
+        "db024c",
+        "99b4ea46",
+        "fbe55144",
+        "9c8eb850",
+        "dc6e49f0",
+        "6198cacf",
+        "4095dfa7",
+        "346a3ae8",
+        "e63beaf2",
+        "ebc39032",
+        "1e4d171f",
+        "683fbefd",
+        "304851b6",
+        "c735a8ff",
+        "65113060",
+        "4762023b",
+        "5a54fe9b",
+        "b78628eb",
+        "7e65466d",
+        "b94ea14a",
+        "4cc4d4a7",
+        "8bb92041",
+        "1597e6f7",
+        "addd33af",
+        "9b3724e5",
+        "4a151bea",
+        "5cecb131",
+        "f4523689",
+        "e2fa7b73",
+        "83c8ccd",
+        "be611254",
+        "771d378b",
+        "ecf1c03d",
+        "a04f1c44",
+        "c394e720",
+        "ba903ec",
+        "ed8ba52e",
+        "6ca480d1",
+        "1d3c31bc",
+        "4b83e88f",
+        "9d1c854d",
+        "92b919b5",
+        "12401139",
+        "3a42a992",
+        "141d94ce",
+        "32eab227",
+        "38032c9a",
+        "7d043b1e",
+        "6769e780"
+      ]
+    }
+  }
+}
diff --git a/packages/react-interview-playbook/contents/react-signup-form-example/en-US.mdx b/packages/react-interview-playbook/contents/react-signup-form-example/en-US.mdx
new file mode 100644
index 0000000000..bb2e7236f6
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-signup-form-example/en-US.mdx
@@ -0,0 +1,254 @@
+---
+title: Signup Form Example in React
+description: A step-by-step guide to building an accessible React signup form with uncontrolled inputs, proper labeling, browser validation, and client-side submission
+---
+
+Building a form with great user experience and accessibility isn't all that easy - but it also isn't that hard once you know the things to pay attention to.
+
+On this page we'll demonstrate the basics of building a good, accessible simple signup form with uncontrolled inputs. Since the inputs are uncontrolled, most of the points aren't specific to React.
+
+## 1. Input field
+
+First and foremost, start with an `<input>` field. `<input>` are the backbone of HTML forms and depending on the `type` attribute value, browsers render these controls differently to assist the user in filling up the form. Common values include `text`, `email`, `number`, `url`, `checkbox`, `file`, etc.
+
+```jsx
+<input type="email" />
+```
+
+## 2. Add label to input field
+
+All `<input>` tags should have an associated `<label>` for accessibility purposes. This is necessary so that users of assistive technologies can tell what the input is for. Clicking or touching a label will also focus on the label's associated form control.
+
+The `<label>` and the `<input>` are linked using `for` (`htmlFor` in React) and `id` attributes respectively.
+
+```jsx
+<label htmlFor="email-input">Email</label>
+<input id="email-input" type="email" />
+```
+
+The alternative is to use `aria-label` on `<input>` but it is better to have a visible label using `<label>`.
+
+## 3. Wrap within a form
+
+Next, the elements should be wrapped within a `<form>`. This enables the browser's enter-to-submit behavior, aka users can hit <kbd>Enter</kbd> to submit the form.
+
+```jsx
+<form>
+  <label htmlFor="email-input">Email</label>
+  <input id="email-input" type="email" />
+</form>
+```
+
+## 4. Form attributes
+
+The `<form>` tag accepts these attributes:
+
+- `action`: Specifies the URL of the server that will receive the submitted form data.
+- `method`: Defines the HTTP method used to send the form data. Common values are:
+  - `POST` Form data is sent as part of the request body.
+  - `GET`: Form data is appended to the URL as search/query parameters.
+- `enctype`: Specifies how the form data should be encoded when submitting it to the server. This is particularly important when you're uploading files.
+
+```jsx
+<form method="POST" action="/users/signup">
+  <label htmlFor="email-input">Email</label>
+  <input id="email-input" type="email" />
+</form>
+```
+
+## 5. Submit button
+
+While not all users are aware they can hit <kbd>Enter</kbd> to submit the form, submit buttons are universally understood mechanisms for form submissions. If the `type` attribute of the `<button>` is not specified, the default value used is `<button type="submit">`.
+
+When such `<button>`s are used within a `<form>`, triggering them will cause form submissions.
+
+```jsx
+<form method="POST" action="/users/signup">
+  <label htmlFor="email-input">Email</label>
+  <input id="email-input" type="email" />
+  <button>Sign up</button>
+</form>
+```
+
+An alternative way to create a submit button is by using the `<input>` tag with `type="submit`.
+
+```jsx
+<form method="POST" action="/users/signup">
+  <label htmlFor="email-input">Email</label>
+  <input id="email-input" type="email" />
+  <input type="submit" value="Sign up">
+</form>
+```
+
+## 6. Input field `name` attribute
+
+`<input>` elements with a `name` attribute defined will be included in the form submission data as part of the name/value pairs.
+
+```jsx
+<form method="POST" action="/users/signup">
+  <label htmlFor="email-input">Email</label>
+  <input id="email-input" name="userEmail" type="email" />
+  <button>Sign up</button>
+</form>
+```
+
+With the `name` attribute specified, when the form is submitted:
+
+- For `<form method="GET">`, a HTTP `GET` request will be made to `/users/signup?userEmail=john.doe@gmail.com`.
+- For `<form method="POST">`, a HTTP `POST` request will be made to `/users/signup` and with the body as `userEmail=john.doe@gmail.com`.
+
+If there are more form fields, the key-values pairs are concatenated with `&` as the delimiter. E.g. `userEmail=john.doe@gmail.com&password=securepassword123`.
+
+The value of an `<input>` element without a `name` attribute is not included in the data submitted to the server. The `name` attribute acts as a key for the form data, pairing it with the `value` attribute of the input element. If the `name` attribute is missing, the form data associated with that input will not be part of the HTTP request when the form is submitted.
+
+Hence all form control input elements should have the `name` attribute specified.
+
+## 7. Other attributes for input field (e.g. `autocomplete`)
+
+By adding the `autocomplete` attribute, browsers will offer suggestions based on the value and the user's autofill data such as addresses and payment methods.
+
+```jsx
+<form method="POST" action="/users/signup">
+  <label htmlFor="email-input">Email</label>
+  <input autocomplete="email" id="email-input" name="userEmail" type="email" />
+  <button>Sign up</button>
+</form>
+```
+
+Possible values include `email`, `family-name`, `new-password`, `street-address`, etc. Refer to the [full list of values on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values). Specifying the `autocomplete` attribute is especially useful for shipping and billing address forms on checkout pages.
+
+## 8. Browser validation
+
+Add a password field using `<input type="password" />`.
+
+By specifying attributes like `required`, `minlength`, `pattern`, on `<input>`, the browser can help to validate that the user's input matches these requirements before the form is submitted to the server.
+
+```jsx
+<form method="POST" action="/users/signup">
+  <label htmlFor="email-input">Email</label>
+  <input
+    autocomplete="email"
+    id="email-input"
+    name="userEmail"
+    required
+    type="email"
+  />
+  <label htmlFor="password-input">Password</label>
+  <input
+    autocomplete="new-password"
+    id="password-input"
+    minlength="8"
+    name="userPassword"
+    required
+    type="password"
+  />
+  <button>Sign up</button>
+</form>
+```
+
+Note that browser validation alone is insufficient! Malicious personnel can directly hit your server endpoints without using your HTML form. You should still validate and sanitize all user input on the server.
+
+## 9. Link form control descriptions using `aria-describedby`
+
+For `<input>`s which benefit from additional descriptions / hint text, they can be associated with the element that contain the descriptive text, which could be a `<span>`, `<div>` or any other suitable HTML elements.
+
+```jsx
+<form method="POST" action="/users/signup">
+  <label htmlFor="email-input">Email</label>
+  <input
+    autocomplete="email"
+    id="email-input"
+    name="userEmail"
+    required
+    type="email"
+  />
+  <label htmlFor="password-input">Password</label>
+  <input
+    aria-describedby="password-hint"
+    autocomplete="new-password"
+    id="password-input"
+    minlength="8"
+    name="userPassword"
+    required
+    type="password"
+  />
+  <div id="password-hint">
+    Your password must be at least 8 characters long.
+  </div>
+  <button>Sign up</button>
+</form>
+```
+
+When a user focuses on the password input field, assistive technologies like screen readers will read the input label along with the additional instructions provided in the `<div>`. This helps users understand the requirements for the password field more clearly.
+
+## 10. Submission via `fetch()`
+
+The current form will make a HTTP `POST` request to `/users/signup` upon submission, which causes a full page navigation and that might not always be desirable.
+
+We can modify the form to make a client-side HTTP `POST` request via `fetch()`. The main changes to make are:
+
+- Call `event.preventDefault()` to prevent the browser from navigating away
+- Use `new FormData(formElement)` to get the input fields data from the form element
+- Send the data to the server API endpoint via `fetch()`
+
+```jsx
+function SignupForm() {
+  async function handleSubmit(event) {
+    // Prevent default behavior, which is a navigation
+    event.preventDefault();
+
+    const formElement = event.target;
+    const formData = new FormData(formElement);
+
+    const response = await fetch('/users/signup', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: formData.get('userEmail'),
+        password: formData.get('userPassword'),
+      }),
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    const data = await response.json();
+    if (!response.ok) {
+      // Handle error response
+      return;
+    }
+
+    // Handle success flow
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label htmlFor="email-input">Email</label>
+      <input
+        autocomplete="email"
+        id="email-input"
+        name="userEmail"
+        required
+        type="email"
+      />
+      <label htmlFor="password-input">Password</label>
+      <input
+        aria-describedby="password-hint"
+        autocomplete="new-password"
+        id="password-input"
+        minlength="8"
+        name="userPassword"
+        required
+        type="password"
+      />
+      <div id="password-hint">
+        Your password must be at least 8 characters long.
+      </div>
+      <button>Sign up</button>
+    </form>
+  );
+}
+```
+
+There you have it, a fully-accessible sign up form in React.
+
+## What you need to know for interviews
+
+How to independently build an accessible form in React with validation and submission.
diff --git a/packages/react-interview-playbook/contents/react-signup-form-example/zh-CN.mdx b/packages/react-interview-playbook/contents/react-signup-form-example/zh-CN.mdx
new file mode 100644
index 0000000000..a6caddc710
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-signup-form-example/zh-CN.mdx
@@ -0,0 +1,254 @@
+---
+title: React 中的注册表单示例
+description: 一个逐步指南，用于使用不受控输入、适当的标签、浏览器验证和客户端提交来构建可访问的 React 注册表单
+---
+
+构建具有出色用户体验和可访问性的表单并非易事 - 但一旦您知道需要注意的事项，它也不会那么难。
+
+在本页中，我们将演示使用不受控输入构建一个好的、可访问的简单注册表单的基础知识。由于输入是未受控的，因此大多数点都不是 React 特有的。
+
+## 1. 输入字段
+
+首先，从一个 `<input>` 字段开始。 `<input>` 是 HTML 表单的支柱，根据 `type` 属性值，浏览器会以不同的方式呈现这些控件，以帮助用户填写表单。 常见值包括 `text`、`email`、`number`、`url`、`checkbox`、`file` 等。
+
+```jsx
+<input type="email" />
+```
+
+## 2. 将标签添加到输入字段
+
+出于可访问性目的，所有 `<input>` 标签都应具有关联的 `<label>`。 这是必要的，以便辅助技术用户可以知道输入的目的。 单击或触摸标签也会将焦点放在标签的关联表单控件上。
+
+`<label>` 和 `<input>` 分别使用 `for`（React 中的 `htmlFor`）和 `id` 属性进行链接。
+
+```jsx
+<label htmlFor="email-input">Email</label>
+<input id="email-input" type="email" />
+```
+
+另一种方法是在 `<input>` 上使用 `aria-label`，但最好使用 `<label>` 具有可见标签。
+
+## 3. 包装在表单中
+
+接下来，这些元素应该包装在 `<form>` 中。 这将启用浏览器的 enter-to-submit 行为，也就是用户可以点击 <kbd>Enter</kbd> 提交表单。
+
+```jsx
+<form>
+  <label htmlFor="email-input">Email</label>
+  <input id="email-input" type="email" />
+</form>
+```
+
+## 4. 表单属性
+
+`<form>` 标签接受这些属性：
+
+* `action`：指定将接收提交的表单数据的服务器的 URL。
+* `method`：定义用于发送表单数据的 HTTP 方法。 常见值有：
+  * `POST` 表单数据作为请求正文的一部分发送。
+  * `GET`：表单数据作为搜索/查询参数附加到 URL。
+* `enctype`：指定将表单数据提交到服务器时应如何编码。 当您上传文件时，这一点尤其重要。
+
+```jsx
+<form method="POST" action="/users/signup">
+  <label htmlFor="email-input">邮箱</label>
+  <input id="email-input" type="email" />
+</form>
+```
+
+## 5. 提交按钮
+
+虽然并非所有用户都知道他们可以按 <kbd>Enter</kbd> 提交表单，但提交按钮是普遍理解的表单提交机制。如果未指定 `<button>` 的 `type` 属性，则使用的默认值为 `<button type="submit">`。
+
+当此类 `<button>` 在 `<form>` 中使用时，触发它们将导致表单提交。
+
+```jsx
+<form method="POST" action="/users/signup">
+  <label htmlFor="email-input">邮箱</label>
+  <input id="email-input" type="email" />
+  <button>注册</button>
+</form>
+```
+
+创建提交按钮的另一种方法是使用带有 `type="submit` 的 `<input>` 标签。
+
+```jsx
+<form method="POST" action="/users/signup">
+  <label htmlFor="email-input">邮箱</label>
+  <input id="email-input" type="email" />
+  <input type="submit" value="注册">
+</form>
+```
+
+## 6. 输入字段 `name` 属性
+
+定义了 `name` 属性的 `<input>` 元素将作为名称/值对的一部分包含在表单提交数据中。
+
+```jsx
+<form method="POST" action="/users/signup">
+  <label htmlFor="email-input">邮箱</label>
+  <input id="email-input" name="userEmail" type="email" />
+  <button>注册</button>
+</form>
+```
+
+指定 `name` 属性后，提交表单时：
+
+* 对于 `<form method="GET">`，将向 `/users/signup?userEmail=john.doe@gmail.com` 发出 HTTP `GET` 请求。
+* 对于 `<form method="POST">`，将向 `/users/signup` 发出 HTTP `POST` 请求，并且正文为 `userEmail=john.doe@gmail.com`。
+
+如果还有更多表单字段，则键值对将使用 `&` 作为分隔符连接起来。例如 `userEmail=john.doe@gmail.com&password=securepassword123`。
+
+不带 `name` 属性的 `<input>` 元素的值不包含在提交到服务器的数据中。`name` 属性充当表单数据的键，将其与输入元素的 `value` 属性配对。如果缺少 `name` 属性，则与该输入关联的表单数据将不会成为提交表单时 HTTP 请求的一部分。
+
+因此，所有表单控件输入元素都应指定 `name` 属性。
+
+## 7. 输入字段的其他属性（例如 `autocomplete`）
+
+通过添加 `autocomplete` 属性，浏览器将根据该值和用户的自动填充数据（例如地址和付款方式）提供建议。
+
+```jsx
+<form method="POST" action="/users/signup">
+  <label htmlFor="email-input">邮箱</label>
+  <input autocomplete="email" id="email-input" name="userEmail" type="email" />
+  <button>注册</button>
+</form>
+```
+
+可能的值包括 `email`、`family-name`、`new-password`、`street-address` 等。请参阅 [MDN 上的完整值列表](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)。指定 `autocomplete` 属性对于结帐页面上的送货和账单地址表单特别有用。
+
+## 8. 浏览器验证
+
+使用 `<input type="password" />` 添加密码字段。
+
+通过在 `<input>` 上指定 `required`、`minlength`、`pattern` 等属性，浏览器可以在表单提交到服务器之前帮助验证用户的输入是否符合这些要求。
+
+```jsx
+<form method="POST" action="/users/signup">
+  <label htmlFor="email-input">电子邮件</label>
+  <input
+    autocomplete="email"
+    id="email-input"
+    name="userEmail"
+    required
+    type="email"
+  />
+  <label htmlFor="password-input">密码</label>
+  <input
+    autocomplete="new-password"
+    id="password-input"
+    minlength="8"
+    name="userPassword"
+    required
+    type="password"
+  />
+  <button>注册</button>
+</form>
+```
+
+请注意，仅靠浏览器验证是不够的！恶意人员可以直接访问您的服务器端点，而无需使用您的 HTML 表单。您仍然应该在服务器上验证和清理所有用户输入。
+
+## 9. 使用 `aria-describedby` 链接表单控件描述
+
+对于需要额外描述/提示文本的 `<input>`，它们可以与包含描述性文本的元素关联，该元素可以是 `<span>`、`<div>` 或任何其他合适的 HTML 元素。
+
+```jsx
+<form method="POST" action="/users/signup">
+  <label htmlFor="email-input">电子邮件</label>
+  <input
+    autocomplete="email"
+    id="email-input"
+    name="userEmail"
+    required
+    type="email"
+  />
+  <label htmlFor="password-input">密码</label>
+  <input
+    aria-describedby="password-hint"
+    autocomplete="new-password"
+    id="password-input"
+    minlength="8"
+    name="userPassword"
+    required
+    type="password"
+  />
+  <div id="password-hint">
+    您的密码必须至少包含 8 个字符。
+  </div>
+  <button>注册</button>
+</form>
+```
+
+当用户聚焦于密码输入字段时，屏幕阅读器等辅助技术将读取输入标签以及 `<div>` 中提供的附加说明。这有助于用户更清楚地了解密码字段的要求。
+
+## 10. 通过 `fetch()` 提交
+
+当前表单将在提交时向 `/users/signup` 发送 HTTP `POST` 请求，这会导致整页导航，这可能并不总是理想的。
+
+我们可以修改表单，通过 `fetch()` 发出客户端 HTTP `POST` 请求。需要进行的主要更改是：
+
+* 调用 `event.preventDefault()` 以防止浏览器导航离开
+* 使用 `new FormData(formElement)` 从表单元素获取输入字段数据
+* 通过 `fetch()` 将数据发送到服务器 API 端点
+
+```jsx
+function SignupForm() {
+  async function handleSubmit(event) {
+    // 阻止默认行为，即导航
+    event.preventDefault();
+
+    const formElement = event.target;
+    const formData = new FormData(formElement);
+
+    const response = await fetch('/users/signup', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: formData.get('userEmail'),
+        password: formData.get('userPassword'),
+      }),
+      headers: { 'Content-Type': 'application/json' },
+    });
+
+    const data = await response.json();
+    if (!response.ok) {
+      // 处理错误响应
+      return;
+    }
+
+    // 处理成功流程
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label htmlFor="email-input">电子邮件</label>
+      <input
+        autocomplete="email"
+        id="email-input"
+        name="userEmail"
+        required
+        type="email"
+      />
+      <label htmlFor="password-input">密码</label>
+      <input
+        aria-describedby="password-hint"
+        autocomplete="new-password"
+        id="password-input"
+        minlength="8"
+        name="userPassword"
+        required
+        type="password"
+      />
+      <div id="password-hint">
+        您的密码必须至少包含 8 个字符。
+      </div>
+      <button>注册</button>
+    </form>
+  );
+}
+```
+
+您已经拥有了，一个完全可访问的 React 注册表单。
+
+## 面试时您需要知道的内容
+
+如何在 React 中独立构建一个具有验证和提交功能的可访问表单。
diff --git a/packages/react-interview-playbook/contents/react-state-design/en-US.langnostic.json b/packages/react-interview-playbook/contents/react-state-design/en-US.langnostic.json
new file mode 100644
index 0000000000..a9433a80f5
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-state-design/en-US.langnostic.json
@@ -0,0 +1,177 @@
+{
+  "frontmatter": {
+    "title": "6d87d48a",
+    "description": "20432d58"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "f741761b",
+        "40334e0",
+        "ad82dbb8",
+        "7b8abf2a",
+        "78ee0141",
+        "f81a5b26",
+        "4235267b",
+        "dcb229fa",
+        "6d26b5c1",
+        "9ebe5cb8",
+        "426b8b32",
+        "f33922db",
+        "c11f28c",
+        "7660bf55",
+        "4e32aebb",
+        "6f4ee5c",
+        "9869177c",
+        "6cdc4700",
+        "983caaca",
+        "55ed5552",
+        "57308137",
+        "ed6544af",
+        "48271154",
+        "a847c412",
+        "d6071831",
+        "47e934cd",
+        "c11625e1",
+        "90c21954",
+        "737ce16c",
+        "f35e407d",
+        "f8bd0b2b",
+        "3d11a54b",
+        "af6a9a05",
+        "100a75f2",
+        "9980e865",
+        "d486a504",
+        "afc0c0d7",
+        "a0ac0d1c",
+        "52de3b41",
+        "9471709d",
+        "5d9b1093",
+        "c7050e3",
+        "c7cf6161",
+        "71ee3f29",
+        "5b32fcdf",
+        "36353a85",
+        "3b01116d",
+        "19df8361",
+        "f3479593",
+        "c7b106e5",
+        "6a610502",
+        "3eceaee4",
+        "612441b2",
+        "fcdeb0c5",
+        "98aa2349",
+        "5d04a307",
+        "b3f45a31",
+        "5c77aad6",
+        "5965b51",
+        "358344f4",
+        "7f7d4fcb",
+        "ac1350f6",
+        "1bf99d45",
+        "49cce588",
+        "49abfd1e",
+        "d50215ab",
+        "15a2f965",
+        "aa37db50",
+        "c4674254",
+        "35d82a57",
+        "6362ba61",
+        "8169f8f2",
+        "7d043b1e",
+        "b0206fe",
+        "3811c404",
+        "3276416d",
+        "7a0ead0d",
+        "34972532",
+        "53d8069b",
+        "660c2de4"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "f741761b",
+        "40334e0",
+        "ad82dbb8",
+        "7b8abf2a",
+        "78ee0141",
+        "f81a5b26",
+        "4235267b",
+        "dcb229fa",
+        "6d26b5c1",
+        "9ebe5cb8",
+        "426b8b32",
+        "f33922db",
+        "c11f28c",
+        "7660bf55",
+        "4e32aebb",
+        "6f4ee5c",
+        "9869177c",
+        "6cdc4700",
+        "983caaca",
+        "55ed5552",
+        "57308137",
+        "ed6544af",
+        "48271154",
+        "a847c412",
+        "d6071831",
+        "47e934cd",
+        "c11625e1",
+        "90c21954",
+        "737ce16c",
+        "f35e407d",
+        "f8bd0b2b",
+        "3d11a54b",
+        "af6a9a05",
+        "100a75f2",
+        "9980e865",
+        "d486a504",
+        "afc0c0d7",
+        "a0ac0d1c",
+        "52de3b41",
+        "9471709d",
+        "5d9b1093",
+        "c7050e3",
+        "c7cf6161",
+        "71ee3f29",
+        "5b32fcdf",
+        "36353a85",
+        "3b01116d",
+        "19df8361",
+        "f3479593",
+        "c7b106e5",
+        "6a610502",
+        "3eceaee4",
+        "612441b2",
+        "fcdeb0c5",
+        "98aa2349",
+        "5d04a307",
+        "b3f45a31",
+        "5c77aad6",
+        "5965b51",
+        "358344f4",
+        "7f7d4fcb",
+        "ac1350f6",
+        "1bf99d45",
+        "49cce588",
+        "49abfd1e",
+        "d50215ab",
+        "15a2f965",
+        "aa37db50",
+        "c4674254",
+        "35d82a57",
+        "6362ba61",
+        "8169f8f2",
+        "7d043b1e",
+        "b0206fe",
+        "3811c404",
+        "3276416d",
+        "7a0ead0d",
+        "34972532",
+        "53d8069b",
+        "660c2de4"
+      ]
+    }
+  }
+}
diff --git a/packages/react-interview-playbook/contents/react-state-design/en-US.mdx b/packages/react-interview-playbook/contents/react-state-design/en-US.mdx
new file mode 100644
index 0000000000..e633d6c6b2
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-state-design/en-US.mdx
@@ -0,0 +1,408 @@
+---
+title: Designing State in React Interviews
+description: How to think about state in React, detailing best practices for structuring, resetting, and updating state to build efficient, maintainable, and performant applications
+---
+
+State is the backbone of any React application, dictating how components behave and render over time. Unlike static data, state enables dynamic updates, user interactions, and real-time changes without requiring a full page reload.
+
+A well-structured state improves code maintainability, enhances performance, and prevents unnecessary re-renders. Poor state management, on the other hand, can lead to buggy code, sluggish applications, and unpredictable behavior.
+
+## How to structure state
+
+When creating a stateful component, you need to decide how many state variables to use and how to structure their data. While a suboptimal state design can still produce a functioning application, following these key principles can help you make better decisions and improve maintainability.
+
+### Keep state local where possible
+
+❌ **Bad**: Unnecessarily lifting state up when it's only used in one component.
+
+```jsx
+function App() {
+  const [count, setCount] = useState(0);
+
+  return <Child count={count} setCount={setCount} />;
+}
+
+function Child({ count, setCount }) {
+  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
+}
+```
+
+✅ **Good**: Keep the state inside the component that uses it. When the count changes, only `Child` needs to be re-rendered.
+
+```jsx
+function App() {
+  return <Child />;
+}
+
+function Child() {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
+}
+```
+
+### Group related state together
+
+❌ **Bad**: Using separate `useState` calls for related values.
+
+In this case, `x` and `y` represent a single point, meaning they should be managed together. Using separate state variables makes updates more cumbersome.
+
+```jsx
+function App() {
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+
+  return (
+    <div
+      onPointerMove={(e) => {
+        setX(e.clientX);
+        setY(e.clientY);
+      }}>
+      <p>
+        Point: ({x}, {y})
+      </p>
+    </div>
+  );
+}
+```
+
+✅ **Good**: Use an object to group related state. Since `x` and `y` together define a single point, they should be managed as a unit.
+
+```jsx
+function App() {
+  const [point, setPoint] = useState({ x: 0, y: 0 });
+
+  return (
+    <div
+      onPointerMove={(e) => {
+        setPoint({ x: e.clientX, y: e.clientY });
+      }}>
+      <p>
+        Point: ({x}, {y})
+      </p>
+    </div>
+  );
+}
+```
+
+### Avoid possible contradictions in state
+
+❌ **Bad: Separate `isSubmitting` and `isSubmitted` state**
+
+```jsx
+function ContactForm() {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setIsError(false);
+
+    fetch('/api/submit', { method: 'POST' })
+      .then(() => {
+        setIsSubmitting(false);
+        setIsSubmitted(true);
+      })
+      .catch(() => {
+        setIsSubmitting(false);
+        setIsError(true);
+      });
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <button type="submit" disabled={isSubmitting}>
+        Submit
+      </button>
+      {isSubmitted && <p>Form submitted successfully!</p>}
+    </form>
+  );
+}
+```
+
+In this example, contradictory states are possible given there are 3 state values used to represent the state of the form. If new code somehow accidentally does `setIsSubmitting(true); setIsSubmitted(true);` then the component is both submitting and submitted, which does not make sense.
+
+✅ **Good: Using a single `status` state**
+
+```jsx
+function ContactForm() {
+  const [status, setStatus] = useState('idle'); // "idle", "submitting", "success", "error"
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    setStatus('submitting');
+
+    fetch('/api/submit', { method: 'POST' })
+      .then(() => setStatus('success'))
+      .catch(() => setStatus('error'));
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <button type="submit" disabled={status === 'submitting'}>
+        Submit
+      </button>
+      {status === 'success' && <p>Form submitted successfully!</p>}
+      {status === 'error' && <p>Submission failed. Please try again.</p>}
+    </form>
+  );
+}
+```
+
+**Why is this better?**
+
+- **Prevents contradictions**: The form can only be in one state at a time
+- **Handles errors properly**: The UI can react to errors without incorrectly marking the form as "submitted"
+- **Simpler logic**: No need to sync multiple boolean states manually
+
+### Derive state instead of storing redundant values
+
+❌ **Bad**: Storing both the list and a count when count can be derived.
+
+```jsx
+const [todos, setTodos] = useState(['Task 1', 'Task 2']);
+const [count, setCount] = useState(2); // Unnecessary state that needs to be synced
+
+useEffect(() => {
+  setCount(todos.length);
+}, [todos]);
+```
+
+✅ **Good**: Derive count from the `todos` array.
+
+```jsx
+const [todos, setTodos] = useState(['Task 1', 'Task 2']);
+
+const count = todos.length; // No need to store it separately
+```
+
+There are other [good principles for structuring state](https://react.dev/learn/choosing-the-state-structure#principles-for-structuring-state) such as ["Avoid duplication in state"](https://react.dev/learn/choosing-the-state-structure#avoid-duplication-in-state) and ["Avoid deeply nested state"](https://react.dev/learn/choosing-the-state-structure#avoid-deeply-nested-state) but they aren't too relevant for interviews.
+
+## Resetting state
+
+The simplest way to reset state is by setting it back to its initial value. However, when there are multiple state values, it can be troublesome to have to call multiple setters to reset to the initial state. You might miss out certain state fields. That's why it's important to group state and also define functions for each possible action.
+
+One way of doing a full reset of a component is to change the `key` property when rendering. When the `key` changes, React will discard the element and recreate it from scratch. `key`s are useful beyond rendering lists.
+
+```jsx
+function Form() {
+  return (
+    <form>
+      <input type="text" placeholder="John Doe"/>
+      <button >Submit</button>
+    </div>
+  );
+}
+
+function App() {
+  const [key, setKey] = useState(0);
+
+  return (
+    <div>
+      <Form key={key} />
+      <button onClick={() => setKey((prev) => prev + 1)}>Reset form</button>
+    </div>
+  );
+}
+```
+
+**How it works:**
+
+- Changing the `key` forces React to **unmount and remount** the `Form` component
+- `<form>`s have built-in ways to reset its state (e.g. `formElement.reset()`), but the `key` approach works for any component
+
+Further reading on react.dev: [Preserving and Resetting State](https://react.dev/learn/preserving-and-resetting-state)
+
+## Controlled vs uncontrolled components
+
+In React, a component can be described as controlled or uncontrolled based on how its state is managed. These terms are not strict technical definitions but rather a way to understand how components interact with their parents.
+
+**Note**: the legacy definition of uncontrolled components was restricted to form `<input>` elements and whether the state lived within the DOM or was controlled by React. The [modern definition](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components) expands the definition of uncontrolled to be more than form `<input>` elements.
+
+| **Type** | **Who controls state?** | **Pros** | **Cons** |
+| --- | --- | --- | --- |
+| **Controlled** | Parent via props | Flexible, easily coordinated with other components | Requires more props/configuration |
+| **Uncontrolled** | Component itself via local state | Simpler to use, fewer props needed | Less flexible, harder to coordinate |
+
+A **controlled component** is one where its behavior is fully determined by its props rather than its own local state. This allows the parent component to have full control over how the component behaves.
+
+An **uncontrolled component** manages its own state internally, making it independent of the parent component. The parent cannot directly modify the state of an uncontrolled component.
+
+Most components are not strictly controlled or uncontrolled, they often use a mix of both. A good practice is to start with local state (uncontrolled) and lift state up when needed.
+
+**Example**: An example of a common component where both controlled or uncontrolled are viable is accordions. On marketing pages, accordions tend to be used for FAQ sections and uncontrolled versions is sufficient. On dashboards and detail pages, accordions items might expand or collapse depending on user actions and it is necessary for these accordions to be controlled.
+
+## Context
+
+React context is used for managing global or shared data that needs to be accessible to its descendants without passing props manually through each level of the component tree.
+
+Context is commonly paired with state and used at the top of the app to make app-level data available to the entire app such as theming and authentication. Whenever the context provider value changes, all descendants consuming the context (`useContext(...)`) will be re-rendered.
+
+```jsx
+const ThemeContext = React.createContext();
+
+function App() {
+  const [theme, setTheme] = useState('light');
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      <Child />
+    </ThemeContext.Provider>
+  );
+}
+
+function Child() {
+  const { theme, setTheme } = useContext(ThemeContext);
+  return (
+    <div>
+      <p>Current theme: {theme}</p>
+      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
+        Toggle Theme
+      </button>
+    </div>
+  );
+}
+```
+
+### Pitfalls of context
+
+Context is an easier (but not necessarily best) way to make data available to multiple components because of the following pitfalls:
+
+- **Not statically analyzable**: Unlike props, which are explicitly passed down to components, context is dynamically provided at runtime. This means you can't easily determine at build time whether a component has access to the necessary context, leading to potential errors that only appear when the app is running
+- **May cause unnecessary re-renders**: When a context value updates, all consuming components re-render, even if they don't use the changed part of the context. This can lead to performance issues, especially when the provider holds a large object or updates frequently. Splitting context or memoizing values can help mitigate this
+- **Easy to add but hard to remove**: Context is convenient for managing global state, but once added, removing it or refactoring can be difficult, especially in large applications. Child components could be relying on a removed context provider but static analysis will not be able to flag the issue
+- **Should not be used for frequent updates**: Context is not optimized for state that updates frequently, such as form input, animations, or rapidly changing data (e.g., typing in a search bar). Instead, use `useState` or `useReducer` locally and only update context when necessary to avoid unnecessary renders
+- **Do not put too much data into a single provider**: If too much unrelated data is stored in one context provider, it increases the likelihood of unnecessary re-renders and makes the state harder to manage. Instead, split context into multiple providers, each handling a specific concern (e.g., separate providers for authentication, theme, and notifications)
+
+### Use cases for context
+
+- **Theming**: If your app allows users to switch themes (e.g., dark mode, high contrast mode), you can place a context provider at the top level and use that context in components that need to adjust their styling. This avoids prop drilling and ensures a consistent appearance across the app.
+- **Current user (Authentication)**: Many components might need access to the currently logged-in user's information. Storing this in context makes it easy to read and update anywhere in the app. If your app supports multiple active user sessions (e.g., commenting as different users), you can wrap parts of the UI in a nested provider with different user values.
+- **Language and localization**: If your app supports multiple languages, a context provider can store the currently selected language and provide translations to components without manually passing language settings down the tree. This makes it easy to build a fully localized experience.
+- **Routing**: Most routing libraries use context internally to keep track of the current route. This allows components like navigation links to determine whether they are active. If you're building a custom router, using context can help manage and propagate navigation state throughout the app.
+- **Notifications and alerts**: Toasts, success messages, and error alerts often need to be triggered from different parts of the app. A notification context can centralize the logic for showing and dismissing alerts, making it easy to manage and display messages consistently.
+- **Global modals and dialogs**: If you have modal dialogs that can be triggered from multiple locations (e.g., a confirmation dialog or a settings modal), storing their open/close state in context allows any component to show or hide them without passing down handlers manually.
+- **Saving user preferences**: If your app needs to store UI preferences (e.g., sidebar open/closed state, default sorting options), placing them in context allows different parts of the UI to stay synchronized while keeping logic centralized.
+- **Managing complex state with reducers**: As your app grows, you might accumulate a lot of state at the top level. Many deeply nested components may need to update this state. Using `useReducer` with context allows components to dispatch actions to modify global state without requiring complex prop drilling.
+
+Further reading on react.dev: [Passing Data Deeply with Context](https://react.dev/learn/passing-data-deeply-with-context)
+
+## Reducers
+
+As an app grows, the amount of state in the app increases and these things happen:
+
+- **Complex state transitions**: The number of ways state can change increases proportionately or even exponentially
+- **Multiple origins for transitions**: State updates can be triggered from multiple places (e.g. various places in the UI, background events, command palette, etc.)
+- **Inconsistent state transitions**: It becomes harder to see at a glance all the different ways a component's state can get updated. As a result, certain state values should be modified together (e.g. request state and error message) but the logic might not be consistent in various parts of the UI
+
+One way to manage state at a larger scale is to consolidate the possible changes into "actions" and consolidate the logic for how state should change in response to these actions.
+
+A reducer in React is a function that manages complex state logic by taking the current state and an action, then returning a new state based on that action. It follows the Redux pattern and is commonly used with the `useReducer` hook, which makes state updates more predictable and easier to debug. All changes to the state have to be made through an action, the state should not be modified directly.
+
+```js
+const newState = reducer(currentState, action);
+```
+
+A reducer function follows this structure:
+
+```jsx
+function reducer(state, action) {
+  switch (action.type) {
+    case 'INCREMENT':
+      return { count: state.count + 1 };
+    case 'DECREMENT':
+      return { count: state.count - 1 };
+    default:
+      return state; // Return current state if action is unknown
+  }
+}
+```
+
+- `state`: Represents the current state
+- `action`: An object describing the update (e.g., `{ type: "INCREMENT" }` with an optional payload field)
+- `reducer`: Pure function that takes in the current `state` and `action` and returns a new state based on the action
+
+Here's an example of a counter implemented using reducers:
+
+```jsx
+function Counter() {
+  const [state, dispatch] = useReducer(reducer, { count: 0 });
+
+  return (
+    <div>
+      <p>Count: {state.count}</p>
+      <button
+        aria-label="Increment"
+        onClick={() => dispatch({ type: 'INCREMENT' })}>
+        +
+      </button>
+      <button
+        aria-label="Decrement"
+        onClick={() => dispatch({ type: 'DECREMENT' })}>
+        -
+      </button>
+      <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
+    </div>
+  );
+}
+```
+
+1. `useReducer(reducer, initialState)` initializes state using the `reducer` function
+2. `dispatch({ type: "INCREMENT" })` triggers the reducer, updating state accordingly
+3. State updates **do not mutate** the previous state but return a new object
+
+### Use cases of reducers
+
+`useReducer` is useful for managing complex state updates where multiple actions modify the state in a structured way. Here's how reducers help in different use cases:
+
+1. **Complex multi-step forms**: Forms with multiple steps or dependent fields can be hard to manage with useState. Reducers help reduce repetitive state updates by centralizing form logic Keeps form submission, validation, and step navigation logic clean
+2. **State-driven UI (e.g. Handling modals, notifications, dropdown menus)**: Managing modals, notifications, dropdown menus, with only `useState` can get messy. Multiple UI elements (e.g., opening modals, dismissing notifications) share state, making it harder to track
+3. **Finite state machines and flows requiring transition**: Flows with well-defined behavior (e.g., authentication, multi-step processes) follow a finite number of states. Using `useState` for each authentication step results in too many independent state variables. `useReducer` helps to structure state transitions so that they are predictable
+
+### Benefits of reducers
+
+- **Readability**: Reducers centralize state logic changes and this separation of actions vs. reducers improves readability
+- **Debugging**: Easier to debug with `useReducer` as you can add a `console.log` at the top to see every state update and which action caused it
+- **Complex state changes**: Use reducers when state changes involve multiple steps or dependencies
+- **State management**: Reducers work well with React Context for non-local state management. However, there are better alternatives like Redux, Zustand, and Jotai
+- **Pure**: Reducers should not have side effects, return the same output for the same input, and always return a new state object, as React depends on immutability for re-renders
+- **Testing**: Reducers don't depend on the UI and being pure functions, they don't require a React environment or much set up to be tested
+
+Further reading on react.dev: [Extracting State Logic into a Reducer](https://react.dev/learn/extracting-state-logic-into-a-reducer)
+
+## What you need to know for interviews
+
+Given the close-ended and limited nature of UI coding questions during interviews, bear the following in mind:
+
+- **State design is crucial**: Since the question is small, there are usually not many fields needed and hence limited in the ways state can be structured. You absolutely have to come up with the most efficient and minimal state for the question. Remember the suggested practice – derive state where you can, avoid possible contradictions in state, and group state fields appropriately.
+- **State lives at the top level**: Given that most questions will be small, it is highly likely that the state should live at the top level / app level and most children should be stateless, receiving data as props. The few cases where state should live within children are ephemeral state in form inputs or state that isn't needed across the whole app.
+- **You probably won't need context**: Most interview questions are small and prop passing will probably not be deeper than two or three levels in the worst case. Stick with prop passing since it's simpler.
+- **You probably won't need reducers**: Most UI coding questions are small and will not require that many different state changes. You can consolidate state updates within action functions without the need for `useReducer`. The exception being games since game logic can get pretty complex.
+
+## Practice questions
+
+**Quiz**:
+
+- [What is the difference between controlled and uncontrolled React Components?](/questions/quiz/what-is-the-difference-between-controlled-and-uncontrolled-react-components?framework=react&tab=quiz)
+- [What are some pitfalls about using context in React?](/questions/quiz/what-are-some-pitfalls-about-using-context-in-react?framework=react&tab=quiz)
+- [How do you reset a component's state in React?](/questions/quiz/how-do-you-reset-a-components-state-in-react?framework=react&tab=quiz)
+- [How do you decide between using React state, context, and external state managers?](/questions/quiz/how-do-you-decide-between-using-react-state-context-and-external-state-managers?framework=react&tab=quiz)
+
+**Coding**:
+
+- [Data Table](/questions/user-interface/data-table/react?framework=react&tab=coding)
+- [Data Table II](/questions/user-interface/data-table-ii/react?framework=react&tab=coding)
+- [Todo List](/questions/user-interface/todo-list/react?framework=react&tab=coding)
+- [Traffic Light](/questions/user-interface/traffic-light/react?framework=react&tab=coding)
+- [Tic-tac-toe](/questions/user-interface/tic-tac-toe/react?framework=react&tab=coding)
+- [Connect Four](/questions/user-interface/connect-four/react?framework=react&tab=coding)
+- [Image Carousel](/questions/user-interface/image-carousel/react?framework=react&tab=coding)
+- [Pixel Art](/questions/user-interface/pixel-art/react?framework=react&tab=coding)
+- [Transfer List](/questions/user-interface/transfer-list/react?framework=react&tab=coding)
+- [Undoable Counter](/questions/user-interface/undoable-counter/react?framework=react&tab=coding)
+- [Users Database](/questions/user-interface/users-database/react?framework=react&tab=coding)
+- [Whack-A-Mole](/questions/user-interface/whack-a-mole/react?framework=react&tab=coding)
+- [Memory Game](/questions/user-interface/memory-game/react?framework=react&tab=coding)
+- [Nested Checkboxes](/questions/user-interface/nested-checkboxes/react?framework=react&tab=coding)
+- [Wordle](/questions/user-interface/wordle/react?framework=react&tab=coding)
diff --git a/packages/react-interview-playbook/contents/react-state-design/zh-CN.mdx b/packages/react-interview-playbook/contents/react-state-design/zh-CN.mdx
new file mode 100644
index 0000000000..10f869e500
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-state-design/zh-CN.mdx
@@ -0,0 +1,408 @@
+---
+title: 在 React 访谈中设计状态
+description: 如何思考 React 中的状态，详细介绍用于构建高效、可维护和高性能应用程序的结构化、重置和更新状态的最佳实践
+---
+
+状态是任何 React 应用程序的支柱，它决定了组件随时间的行为和渲染方式。与静态数据不同，状态支持动态更新、用户交互和实时更改，而无需完全重新加载页面。
+
+结构良好的状态可提高代码可维护性、增强性能并防止不必要的重新渲染。另一方面，糟糕的状态管理可能导致错误的代码、应用程序运行缓慢和不可预测的行为。
+
+## 如何构建状态
+
+创建有状态组件时，您需要决定使用多少个状态变量以及如何构建它们的数据。虽然次优的状态设计仍然可以生成一个功能正常的应用程序，但遵循这些关键原则可以帮助您做出更好的决策并提高可维护性。
+
+### 尽可能保持状态本地化
+
+❌ **错误**：当状态仅在一个组件中使用时，不必要地提升状态。
+
+```jsx
+function App() {
+  const [count, setCount] = useState(0);
+
+  return <Child count={count} setCount={setCount} />;
+}
+
+function Child({ count, setCount }) {
+  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
+}
+```
+
+✅ **正确**：将状态保留在使用它的组件内部。当计数更改时，只需要重新渲染 `Child`。
+
+```jsx
+function App() {
+  return <Child />;
+}
+
+function Child() {
+  const [count, setCount] = useState(0);
+  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
+}
+```
+
+### 将相关状态组合在一起
+
+❌ **错误**：对相关值使用单独的 `useState` 调用。
+
+在这种情况下，`x` 和 `y` 代表一个单点，这意味着它们应该一起管理。使用单独的状态变量会使更新更加麻烦。
+
+```jsx
+function App() {
+  const [x, setX] = useState(0);
+  const [y, setY] = useState(0);
+
+  return (
+    <div
+      onPointerMove={(e) => {
+        setX(e.clientX);
+        setY(e.clientY);
+      }}>
+      <p>
+        点：({x}，{y})
+      </p>
+    </div>
+  );
+}
+```
+
+✅ **正确**：使用对象对相关状态进行分组。由于 `x` 和 `y` 共同定义一个单点，因此它们应该作为一个单元进行管理。
+
+```jsx
+function App() {
+  const [point, setPoint] = useState({ x: 0, y: 0 });
+
+  return (
+    <div
+      onPointerMove={(e) => {
+        setPoint({ x: e.clientX, y: e.clientY });
+      }}>
+      <p>
+        点：({x}，{y})
+      </p>
+    </div>
+  );
+}
+```
+
+### 避免状态中可能出现的矛盾
+
+❌ **不好：分离 `isSubmitting` 和 `isSubmitted` 状态**
+
+```jsx
+function ContactForm() {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setIsError(false);
+
+    fetch('/api/submit', { method: 'POST' })
+      .then(() => {
+        setIsSubmitting(false);
+        setIsSubmitted(true);
+      })
+      .catch(() => {
+        setIsSubmitting(false);
+        setIsError(true);
+      });
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <button type="submit" disabled={isSubmitting}>
+        提交
+      </button>
+      {isSubmitted && <p>表单提交成功！</p>}
+    </form>
+  );
+}
+```
+
+在这个例子中，考虑到有 3 个状态值用于表示表单的状态，因此可能会出现矛盾的状态。如果新代码不小心执行了 `setIsSubmitting(true); setIsSubmitted(true);`，那么组件既在提交又已提交，这没有任何意义。
+
+✅ **好：使用单个 `status` 状态**
+
+```jsx
+function ContactForm() {
+  const [status, setStatus] = useState('idle'); // "idle", "submitting", "success", "error"
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    setStatus('submitting');
+
+    fetch('/api/submit', { method: 'POST' })
+      .then(() => setStatus('success'))
+      .catch(() => setStatus('error'));
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <button type="submit" disabled={status === 'submitting'}>
+        提交
+      </button>
+      {status === 'success' && <p>表单提交成功！</p>}
+      {status === 'error' && <p>提交失败。请重试。</p>}
+    </form>
+  );
+}
+```
+
+**为什么这更好？**
+
+* **防止矛盾**：表单一次只能处于一种状态
+* **正确处理错误**：UI 可以对错误做出反应，而不会错误地将表单标记为“已提交”
+* **更简单的逻辑**：无需手动同步多个布尔状态
+
+### 派生状态而不是存储冗余值
+
+❌ **不好**：存储列表和计数，而计数可以派生。
+
+```jsx
+const [todos, setTodos] = useState(['任务 1', '任务 2']);
+const [count, setCount] = useState(2); // 需要同步的不必要的状态
+
+useEffect(() => {
+  setCount(todos.length);
+}, [todos]);
+```
+
+✅ **好**：从 `todos` 数组派生计数。
+
+```jsx
+const [todos, setTodos] = useState(['任务 1', '任务 2']);
+
+const count = todos.length; // 无需单独存储
+```
+
+还有其他[用于构建状态的良好原则](https://react.dev/learn/choosing-the-state-structure#principles-for-structuring-state)，例如["避免状态中的重复"](https://react.dev/learn/choosing-the-state-structure#avoid-duplication-in-state)和["避免深度嵌套状态"](https://react.dev/learn/choosing-the-state-structure#avoid-deeply-nested-state)，但它们与面试关系不大。
+
+## 重置状态
+
+重置状态的最简单方法是将其设置回其初始值。但是，当有多个状态值时，必须调用多个 setter 才能重置为初始状态可能会很麻烦。您可能会遗漏某些状态字段。这就是分组状态以及为每个可能的操作定义函数很重要的原因。
+
+对组件进行完全重置的一种方法是在渲染时更改 `key` 属性。当 `key` 更改时，React 将丢弃该元素并从头开始重新创建它。`key` 不仅在渲染列表中很有用。
+
+```jsx
+function Form() {
+  return (
+    <form>
+      <input type="text" placeholder="John Doe"/>
+      <button >提交</button>
+    </div>
+  );
+}
+
+function App() {
+  const [key, setKey] = useState(0);
+
+  return (
+    <div>
+      <Form key={key} />
+      <button onClick={() => setKey((prev) => prev + 1)}>重置表单</button>
+    </div>
+  );
+}
+```
+
+**它是如何工作的：**
+
+* 更改 `key` 会强制 React **卸载并重新挂载** `Form` 组件
+* `<form>` 具有内置的方式来重置其状态（例如 `formElement.reset()`），但 `key` 方法适用于任何组件
+
+在 react.dev 上进一步阅读：[保留和重置状态](https://react.dev/learn/preserving-and-resetting-state)
+
+## 受控组件与非受控组件
+
+在 React 中，一个组件可以被描述为受控或非受控，这取决于其状态的管理方式。这些术语不是严格的技术定义，而是一种理解组件如何与其父组件交互的方式。
+
+**注意**：非受控组件的传统定义仅限于表单 `<input>` 元素，以及状态是存在于 DOM 中还是由 React 控制。 [现代定义](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components) 将非受控的定义扩展到不仅仅是表单 `<input>` 元素。
+
+| **类型** | **谁控制状态？** | **优点** | **缺点** |
+| --- | --- | --- | --- |
+| **受控** | 父组件通过 props | 灵活，易于与其他组件协调 | 需要更多 props/配置 |
+| **非受控** | 组件本身通过本地状态 | 更易于使用，所需 props 较少 | 灵活性较低，更难协调 |
+
+一个**受控组件**是指其行为完全由其 props 决定，而不是由其自身的本地状态决定。这允许父组件完全控制组件的行为。
+
+一个**非受控组件**在其内部管理自己的状态，使其独立于父组件。父组件不能直接修改非受控组件的状态。
+
+大多数组件并非严格受控或非受控，它们通常混合使用两者。一个好的做法是先从本地状态（非受控）开始，并在需要时提升状态。
+
+**示例**：一个常见组件的示例，其中受控或非受控都是可行的，就是手风琴。在营销页面上，手风琴倾向于用于常见问题解答部分，非受控版本就足够了。在仪表板和详细信息页面上，手风琴项目可能会根据用户操作展开或折叠，并且这些手风琴需要被控制。
+
+## 上下文
+
+React 上下文用于管理需要被其后代访问的全局或共享数据，而无需通过组件树的每一层手动传递 props。
+
+上下文通常与状态配对，并在应用程序的顶部使用，以使应用程序级数据可用于整个应用程序，例如主题和身份验证。每当上下文提供程序的值更改时，所有使用上下文的后代 (`useContext(...)`) 都将重新渲染。
+
+```jsx
+const ThemeContext = React.createContext();
+
+function App() {
+  const [theme, setTheme] = useState('light');
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      <Child />
+    </ThemeContext.Provider>
+  );
+}
+
+function Child() {
+  const { theme, setTheme } = useContext(ThemeContext);
+  return (
+    <div>
+      <p>Current theme: {theme}</p>
+      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
+        Toggle Theme
+      </button>
+    </div>
+  );
+}
+```
+
+### 上下文的陷阱
+
+由于以下陷阱，上下文是一种更容易（但不一定是最佳）的方式，可以使数据可用于多个组件：
+
+* **不可静态分析**：与显式传递给组件的 props 不同，上下文是在运行时动态提供的。这意味着您无法在构建时轻松确定组件是否可以访问必要的上下文，从而导致仅在应用程序运行时才会出现的潜在错误
+* **可能导致不必要的重新渲染**：当上下文值更新时，所有使用组件都会重新渲染，即使它们不使用上下文的更改部分。这可能导致性能问题，尤其是在提供程序包含大型对象或频繁更新时。拆分上下文或记忆值可以帮助缓解此问题
+* **易于添加但难以删除**：上下文对于管理全局状态很方便，但一旦添加，删除或重构它可能很困难，尤其是在大型应用程序中。子组件可能依赖于已删除的上下文提供程序，但静态分析将无法标记该问题
+* **不应用于频繁更新**：上下文未针对频繁更新的状态进行优化，例如表单输入、动画或快速变化的数据（例如，在搜索栏中键入）。相反，请在本地使用 `useState` 或 `useReducer`，并且仅在必要时更新上下文，以避免不必要的渲染
+* **不要将太多数据放入单个提供程序中**：如果将太多不相关的数据存储在一个上下文提供程序中，则会增加不必要的重新渲染的可能性，并使状态更难管理。相反，将上下文拆分为多个提供程序，每个提供程序处理一个特定的问题（例如，用于身份验证、主题和通知的单独提供程序）
+
+### 上下文的用例
+
+* **主题**：如果您的应用程序允许用户切换主题（例如，深色模式、高对比度模式），您可以在顶层放置一个上下文提供程序，并在需要调整其样式的组件中使用该上下文。这避免了 prop 钻取，并确保了整个应用程序的一致外观。
+* **当前用户（身份验证）**：许多组件可能需要访问当前登录的用户的信息。将其存储在上下文中可以轻松地在应用程序中的任何位置读取和更新。如果您的应用程序支持多个活动用户会话（例如，以不同用户的身份发表评论），您可以在具有不同用户值的嵌套提供程序中包装 UI 的一部分。
+* **语言和本地化**：如果您的应用程序支持多种语言，上下文提供程序可以存储当前选择的语言，并向组件提供翻译，而无需手动向下传递语言设置。这使得构建完全本地化的体验变得容易。
+* **路由**：大多数路由库在内部使用上下文来跟踪当前路由。这允许导航链接等组件确定它们是否处于活动状态。如果您正在构建自定义路由器，使用上下文可以帮助管理和传播整个应用程序的导航状态。
+* **通知和警报**：Toast、成功消息和错误警报通常需要从应用程序的不同部分触发。通知上下文可以集中显示和关闭警报的逻辑，从而使其易于管理和一致地显示消息。
+* **全局模态和对话框**：如果您有可以从多个位置触发的模态对话框（例如，确认对话框或设置模态），将它们打开/关闭状态存储在上下文中允许任何组件显示或隐藏它们，而无需手动传递处理程序。
+* **保存用户偏好**：如果您的应用程序需要存储 UI 偏好（例如，侧边栏打开/关闭状态、默认排序选项），将它们放置在上下文中允许 UI 的不同部分保持同步，同时保持逻辑集中。
+* **使用 reducers 管理复杂状态**：随着您的应用程序的增长，您可能会在顶层积累大量状态。许多深度嵌套的组件可能需要更新此状态。将 `useReducer` 与上下文一起使用允许组件调度操作以修改全局状态，而无需复杂的 prop 钻取。
+
+在 react.dev 上进一步阅读：[使用上下文深入传递数据](https://react.dev/learn/passing-data-deeply-with-context)
+
+## Reducers
+
+随着应用程序的增长，应用程序中的状态量会增加，并且会发生以下情况：
+
+* **复杂的状态转换**：状态可以更改的方式数量成比例增加，甚至呈指数级增长
+* **转换的多个来源**：状态更新可以从多个地方触发（例如，UI 中的各个地方、后台事件、命令面板等）
+* **不一致的状态转换**：一目了然地查看组件状态可以更新的所有不同方式变得更加困难。因此，某些状态值应该一起修改（例如，请求状态和错误消息），但逻辑在 UI 的各个部分可能不一致
+
+在更大范围内管理状态的一种方法是将可能的更改合并为“操作”，并将用于响应这些操作的状态应如何更改的逻辑合并起来。
+
+React 中的 reducer 是一个函数，它通过获取当前状态和一个操作来管理复杂的状态逻辑，然后根据该操作返回一个新状态。它遵循 Redux 模式，通常与 `useReducer` 钩子一起使用，这使得状态更新更具可预测性，并且更易于调试。对状态的所有更改都必须通过一个操作来完成，不应直接修改状态。
+
+```js
+const newState = reducer(currentState, action);
+```
+
+reducer 函数遵循此结构：
+
+```jsx
+function reducer(state, action) {
+  switch (action.type) {
+    case 'INCREMENT':
+      return { count: state.count + 1 };
+    case 'DECREMENT':
+      return { count: state.count - 1 };
+    default:
+      return state; // 如果操作未知，则返回当前状态
+  }
+}
+```
+
+* `state`：表示当前状态
+* `action`：描述更新的对象（例如，`{ type: "INCREMENT" }`，带有一个可选的 payload 字段）
+* `reducer`：纯函数，它接受当前的 `state` 和 `action`，并根据 action 返回一个新状态
+
+以下是使用 reducer 实现的计数器示例：
+
+```jsx
+function Counter() {
+  const [state, dispatch] = useReducer(reducer, { count: 0 });
+
+  return (
+    <div>
+      <p>Count: {state.count}</p>
+      <button
+        aria-label="Increment"
+        onClick={() => dispatch({ type: 'INCREMENT' })}>
+        +
+      </button>
+      <button
+        aria-label="Decrement"
+        onClick={() => dispatch({ type: 'DECREMENT' })}>
+        -
+      </button>
+      <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
+    </div>
+  );
+}
+```
+
+1. `useReducer(reducer, initialState)` 使用 `reducer` 函数初始化状态
+2. `dispatch({ type: "INCREMENT" })` 触发 reducer，相应地更新状态
+3. 状态更新**不会改变**以前的状态，而是返回一个新对象
+
+### reducer 的用例
+
+`useReducer` 适用于管理复杂的状态更新，其中多个操作以结构化的方式修改状态。以下是 reducer 在不同用例中的帮助：
+
+1. **复杂的、多步骤的表单**：具有多个步骤或相关字段的表单可能难以使用 useState 管理。 Reducer 通过集中表单逻辑来帮助减少重复的状态更新。保持表单提交、验证和步骤导航逻辑的清晰
+2. **状态驱动的 UI（例如，处理模态框、通知、下拉菜单）**：仅使用 `useState` 管理模态框、通知、下拉菜单可能会变得混乱。 多个 UI 元素（例如，打开模态框、关闭通知）共享状态，这使得跟踪更加困难
+3. **需要转换的有限状态机和流程**：具有明确定义的行为的流程（例如，身份验证、多步骤流程）遵循有限数量的状态。 对每个身份验证步骤使用 `useState` 会导致太多独立的状态变量。 `useReducer` 有助于构建状态转换，使其具有可预测性
+
+### reducer 的好处
+
+* **可读性**：Reducer 集中状态逻辑更改，这种操作与 reducer 的分离提高了可读性
+* **调试**：使用 `useReducer` 更容易调试，因为您可以在顶部添加一个 `console.log` 来查看每个状态更新以及导致它的操作
+* **复杂的状态更改**：当状态更改涉及多个步骤或依赖项时，请使用 reducer
+* **状态管理**：Reducer 适用于 React Context 进行非本地状态管理。 但是，有更好的替代方案，例如 Redux、Zustand 和 Jotai
+* **纯粹**：Reducer 不应有副作用，对相同的输入返回相同的输出，并且始终返回一个新状态对象，因为 React 依赖于不变性进行重新渲染
+* **测试**：Reducer 不依赖于 UI，并且是纯函数，它们不需要 React 环境或太多设置即可进行测试
+
+在 react.dev 上进一步阅读：[将状态逻辑提取到 Reducer 中](https://react.dev/learn/extracting-state-logic-into-a-reducer)
+
+## 面试需要了解的内容
+
+鉴于面试期间 UI 编码问题的封闭性和局限性，请记住以下几点：
+
+* **状态设计至关重要**：由于问题很小，通常不需要很多字段，因此在状态的结构方式上受到限制。 您绝对必须为该问题提出最有效和最少的状态。 记住建议的实践 – 在可能的情况下派生状态，避免状态中可能存在的矛盾，并适当地对状态字段进行分组。
+* **状态位于顶层**：鉴于大多数问题都很小，状态很可能位于顶层/应用程序级别，并且大多数子级应该是无状态的，作为 props 接收数据。 状态应存在于子级中的少数情况是表单输入中的临时状态或整个应用程序中不需要的状态。
+* **您可能不需要上下文**：大多数面试问题都很小，并且 prop 传递可能不会比最坏情况下的两到三层更深。 坚持使用 prop 传递，因为它更简单。
+* **您可能不需要 reducer**：大多数 UI 编码问题都很小，不需要那么多不同的状态更改。 您可以在操作函数中整合状态更新，而无需使用 `useReducer`。 例外情况是游戏，因为游戏逻辑可能会变得非常复杂。
+
+## 练习题
+
+**测验**：
+
+* [受控和非受控 React 组件有什么区别？](/questions/quiz/what-is-the-difference-between-controlled-and-uncontrolled-react-components?framework=react\&tab=quiz)
+* [在 React 中使用上下文有哪些陷阱？](/questions/quiz/what-are-some-pitfalls-about-using-context-in-react?framework=react\&tab=quiz)
+* [如何在 React 中重置组件的状态？](/questions/quiz/how-do-you-reset-a-components-state-in-react?framework=react\&tab=quiz)
+* [如何决定使用 React 状态、上下文和外部状态管理器？](/questions/quiz/how-do-you-decide-between-using-react-state-context-and-external-state-managers?framework=react\&tab=quiz)
+
+**编码**:
+
+* [数据表](/questions/user-interface/data-table/react?framework=react\&tab=coding)
+* [数据表 II](/questions/user-interface/data-table-ii/react?framework=react\&tab=coding)
+* [待办事项列表](/questions/user-interface/todo-list/react?framework=react\&tab=coding)
+* [交通灯](/questions/user-interface/traffic-light/react?framework=react\&tab=coding)
+* [井字棋](/questions/user-interface/tic-tac-toe/react?framework=react\&tab=coding)
+* [四子棋](/questions/user-interface/connect-four/react?framework=react\&tab=coding)
+* [图片轮播](/questions/user-interface/image-carousel/react?framework=react\&tab=coding)
+* [像素艺术](/questions/user-interface/pixel-art/react?framework=react\&tab=coding)
+* [转移列表](/questions/user-interface/transfer-list/react?framework=react\&tab=coding)
+* [可撤销计数器](/questions/user-interface/undoable-counter/react?framework=react\&tab=coding)
+* [用户数据库](/questions/user-interface/users-database/react?framework=react\&tab=coding)
+* [打地鼠](/questions/user-interface/whack-a-mole/react?framework=react\&tab=coding)
+* [记忆游戏](/questions/user-interface/memory-game/react?framework=react\&tab=coding)
+* [嵌套复选框](/questions/user-interface/nested-checkboxes/react?framework=react\&tab=coding)
+* [Wordle](/questions/user-interface/wordle/react?framework=react\&tab=coding)
diff --git a/packages/react-interview-playbook/contents/react-thinking-declaratively/en-US.langnostic.json b/packages/react-interview-playbook/contents/react-thinking-declaratively/en-US.langnostic.json
new file mode 100644
index 0000000000..ceb5c051eb
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-thinking-declaratively/en-US.langnostic.json
@@ -0,0 +1,151 @@
+{
+  "frontmatter": {
+    "title": "c8c1c2d6",
+    "description": "42fe29d4"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "92c1d247",
+        "656fd87",
+        "7f645ed3",
+        "dd981ece",
+        "b0cd085c",
+        "a90a3ac9",
+        "6066faf1",
+        "b7c95d33",
+        "2e2c398f",
+        "bd04810a",
+        "a6f146ab",
+        "6b9c4df7",
+        "eadc892e",
+        "d86c4ed2",
+        "efed1979",
+        "610f3f68",
+        "80a1b39a",
+        "d2b1e1c",
+        "46946edf",
+        "4739004b",
+        "bd52b62b",
+        "ae8a01e7",
+        "56fa5fe7",
+        "7056463f",
+        "9ba7bc31",
+        "422d36e8",
+        "42200754",
+        "871d8555",
+        "915db318",
+        "89bce8e0",
+        "67bf96ba",
+        "85fdc045",
+        "65d7d93d",
+        "c07a98a0",
+        "237a818c",
+        "cab6ad95",
+        "ea6d1bbd",
+        "5d3ae483",
+        "20986903",
+        "c54f5305",
+        "3a8f57b0",
+        "a70bb01b",
+        "b03f3ca4",
+        "951aabcd",
+        "303af164",
+        "43e12a35",
+        "6f1921a8",
+        "5687f321",
+        "3ee158b5",
+        "e47b328",
+        "e8737cc0",
+        "746c881",
+        "12c8167e",
+        "d57a170",
+        "5f131084",
+        "2906f1ff",
+        "268713a4",
+        "7ee1aba3",
+        "48036c67",
+        "3a9339b2",
+        "92317be0",
+        "1d4f7aa4",
+        "7d043b1e",
+        "82182ecf",
+        "3276416d",
+        "53d8069b",
+        "2632a719"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "92c1d247",
+        "656fd87",
+        "7f645ed3",
+        "dd981ece",
+        "b0cd085c",
+        "a90a3ac9",
+        "6066faf1",
+        "b7c95d33",
+        "2e2c398f",
+        "bd04810a",
+        "a6f146ab",
+        "6b9c4df7",
+        "eadc892e",
+        "d86c4ed2",
+        "efed1979",
+        "610f3f68",
+        "80a1b39a",
+        "d2b1e1c",
+        "46946edf",
+        "4739004b",
+        "bd52b62b",
+        "ae8a01e7",
+        "56fa5fe7",
+        "7056463f",
+        "9ba7bc31",
+        "422d36e8",
+        "42200754",
+        "871d8555",
+        "915db318",
+        "89bce8e0",
+        "67bf96ba",
+        "85fdc045",
+        "65d7d93d",
+        "c07a98a0",
+        "237a818c",
+        "cab6ad95",
+        "ea6d1bbd",
+        "5d3ae483",
+        "20986903",
+        "c54f5305",
+        "3a8f57b0",
+        "a70bb01b",
+        "b03f3ca4",
+        "951aabcd",
+        "303af164",
+        "43e12a35",
+        "6f1921a8",
+        "5687f321",
+        "3ee158b5",
+        "e47b328",
+        "e8737cc0",
+        "746c881",
+        "12c8167e",
+        "d57a170",
+        "5f131084",
+        "2906f1ff",
+        "268713a4",
+        "7ee1aba3",
+        "48036c67",
+        "3a9339b2",
+        "92317be0",
+        "1d4f7aa4",
+        "7d043b1e",
+        "82182ecf",
+        "3276416d",
+        "53d8069b",
+        "2632a719"
+      ]
+    }
+  }
+}
diff --git a/packages/react-interview-playbook/contents/react-thinking-declaratively/en-US.mdx b/packages/react-interview-playbook/contents/react-thinking-declaratively/en-US.mdx
new file mode 100644
index 0000000000..c438e4bb62
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-thinking-declaratively/en-US.mdx
@@ -0,0 +1,289 @@
+---
+title: Thinking Declaratively in React
+description: Guide on thinking in declarative and state-driven approaches in React, featuring practical examples like a todo list to illustrate building dynamic, maintainable UIs
+---
+
+One of the core principles of React is its declarative nature. Instead of manually updating the DOM step by step (imperative programming), React allows you to define what the UI should look like based on the current state, and it takes care of the updates for you. This approach makes UI development more predictable, scalable, and easier to reason about.
+
+## Declarative UI vs imperative UI
+
+In imperative programming, you give explicit instructions on how things should happen. DOM APIs are inherently imperative. When manipulating the DOM, this often means selecting elements and modifying them manually.
+
+```js
+const button = document.createElement('button');
+button.textContent = 'Click me';
+button.style.backgroundColor = 'blue';
+document.body.appendChild(button);
+
+button.addEventListener('click', () => {
+  button.style.backgroundColor = 'red';
+  alert('Button clicked!');
+});
+```
+
+See that every single action is explicitly defined: creating the button, setting styles, appending it to the DOM, and changing properties in response to an event.
+
+Declarative programming, on the other hand, focuses on describing the desired outcome rather than detailing how to achieve it. React components allow us to declare what the UI should look like, and React takes care of updating it when state changes.
+
+```jsx
+function App() {
+  const [color, setColor] = React.useState('blue');
+
+  return (
+    <button style={{ backgroundColor: color }} onClick={() => setColor('red')}>
+      Click me
+    </button>
+  );
+}
+```
+
+In this example, we define the button's UI based on `color` state. When the state changes, React automatically updates the DOM without us having to manage it manually.
+
+### Analogy: Imperative vs Declarative
+
+Think of making a cup of coffee:
+
+- **Imperative:** "Take a mug, pour hot water, add coffee, stir, and serve"
+- **Declarative:** "I want a cup of coffee"
+
+In a declarative approach, the details of execution are abstracted away. You describe the final outcome, and a system (e.g. a coffee machine, a barista, or React) ensures it happens correctly.
+
+The benefit of declarative programming might not be too obvious in the button example above because it is small.
+
+Let's use a slightly more complex example of a todo list that allows adding, deleting, and completing of tasks. The UI should show the task list and the total number of tasks as well as completed tasks.
+
+Using an imperative approach (e.g., using vanilla JavaScript and the DOM API), every interaction requires manually finding, updating, and re-rendering elements.
+
+The following user actions will require these DOM operations:
+
+1. **Adding a task**:
+   1. Append the new task to the existing list
+   2. Clear the contents of the input
+   3. Add event listener to the newly-added task for task completion
+   4. Increment the number of total tasks
+2. **Completing a task**:
+   1. Update the task to show completed state
+   2. Modify the number of completed tasks
+3. **Deleting a task**:
+   1. Remove the task from the list
+   2. Decrement the number of total tasks
+   3. Decrement the number of completed tasks if the task was completed
+
+Using an imperative approach, it is much tougher to keep the UI in-sync with state as you have to remember the relevant areas to modify. When new features are introduced, imperatively-written logic becomes harder to read and trace. That's bad for maintainability!
+
+Using a declarative approach such as React, you can simply describe the UI that should be shown based on the updated tasks state, and React will figure out the necessary imperative DOM operations to evolve the current UI into the intended UI.
+
+There can be infinitely many possible current UIs – how does React figure out the right imperative DOM operations to make? That's where React's virtual DOM and reconciliation process comes in. React compares/diffs the current UI representation with the new UI representation, and generates the necessary list of DOM operations.
+
+Declarative UI is the approach taken by virtually any modern UI framework due to its overwhelming advantages over the imperative approach.
+
+Further reading on react.dev: [How declarative UI compares to imperative ](https://react.dev/learn/reacting-to-input-with-state#how-declarative-ui-compares-to-imperative)
+
+## How to think about UI declaratively
+
+Thinking declaratively requires shifting your focus from how to update the UI to what the UI should be at any given moment.
+
+Let's use the same todo list example above and demonstrate how declarative programming is better. Instead of manually manipulating the DOM (imperative programming), we define how the UI should look based on state and let React take care of the rendering.
+
+To make things a bit more complex, the todo list supports filtering (All, Complete, Incomplete).
+
+### 1. Identify visual states in the components
+
+A todo list has several possible UI states:
+
+- Input field that can accept text input from the user
+- A list of tasks, which can be empty or non-empty
+- Each task can be completed or incomplete
+- Selector for task filters and the selected option
+- The list of tasks can be filtered (All, Active, Completed)
+
+### 2. Determine the actions that trigger state changes
+
+Next, we define the actions that affect state:
+
+- Adding a task
+- Completing a task
+- Deleting a task
+- Filtering tasks (show All, Active, or Completed)
+
+These actions will modify state, and React will automatically re-render the UI accordingly.
+
+### 3. Design a minimal structure to represent the state
+
+Next, we need to design a structure to capture the state data in the UI.
+
+Here's one possible design:
+
+```js
+const [tasks, setTasks] = useState([
+  { id: 1, title: 'Learn React' },
+  { id: 2, title: 'Build a project' },
+]);
+const [completedTasks, setCompletedTasks] = useState([
+  { id: 1, title: 'Learn React' },
+]);
+const [incompleteTasks, setIncompleteTasks] = useState([
+  { id: 2, title: 'Build a project' },
+]);
+const [filter, setFilter] = useState('all'); // all | active | completed
+```
+
+However, in this design, there's some duplication of data. Tasks are part of both `tasks` and either `completedTasks` or `incompleteTasks`, and adding/remove tasks will involve modifying multiple tasks arrays. This state design is not great.
+
+Some ways to improve it:
+
+1. The `incompleteTasks` state is redundant since if a task is not within `completedTasks`, then it is incomplete. However, it would be inefficient when linear scanning the `completedTasks` array for every task to check if a task is completed
+2. We can use a `Set` for `completedTasks` that stores only the task ID. This way, the task titles don't have to be repeated and looking up a task's completion status is efficient. However, we still need to remember to modify two places when a completed task is being deleted.
+
+Instead of storing multiple independent pieces of state that require syncing, we can track completion status on the task itself. Here's a minimal and structured state representation:
+
+```js
+const [tasks, setTasks] = useState([
+  { id: 1, title: 'Learn React', completed: false },
+  { id: 2, title: 'Build a project', completed: true },
+]);
+
+const [filter, setFilter] = useState('all'); // all | active | completed
+```
+
+Using this structure:
+
+- `tasks` is an array where each task has an `id`, `title`, and `completed` status
+- `filter` determines which tasks to display
+
+To avoid redundant state, instead of keeping a separate `completedTasks` array, we can derive completed tasks from `tasks`.
+
+There are tradeoffs to consider here. Although state is now consolidated, toggling tasks completion will now require cloning of the entire `tasks` array when there wasn't a need to if we use a `Set` for `completedTasks`.
+
+### 4. Call actions within event handlers
+
+Actions are triggered in response to two kinds of events:
+
+- **User events**: Actions directly performed by the user, such as clicking a button, typing in an input field, or selecting an option from a dropdown
+- **Background events**: Actions triggered without direct user interaction such as API responses, timers and intervals, WebSocket real-time updates
+
+For the todo list at hand, we only need to care about user events.
+
+However, it is advisable to write a function for each of these actions, and call the state setters within each action function. This is because the same operation can be triggered from many places on the UI, or even in the background. An example is a video player, where, to pause the video, users can either press the "Pause" button or press the spacebar.
+
+Centralizing state update logic within these action functions will help to keep the code maintainable.
+
+### Full example
+
+Now, let's implement what we have learnt above.
+
+```jsx
+import { useState } from 'react';
+
+function TodoApp() {
+  const [tasks, setTasks] = useState([]);
+  const [filter, setFilter] = useState('all');
+  const [taskInput, setTaskInput] = useState('');
+
+  // Add a task
+  function addTask() {
+    if (taskInput.trim() === '') {
+      return;
+    }
+    const newTask = { id: Date.now(), text: taskInput, completed: false };
+    setTasks([...tasks, newTask]);
+    setTaskInput('');
+  }
+
+  // Toggle task completion
+  function toggleTask(id) {
+    setTasks(
+      tasks.map((task) =>
+        task.id === id ? { ...task, completed: !task.completed } : task,
+      ),
+    );
+  }
+
+  // Delete a task
+  function deleteTask(id) {
+    setTasks(tasks.filter((task) => task.id !== id));
+  }
+
+  // Get tasks based on filter
+  const filteredTasks = tasks.filter((task) => {
+    if (filter === 'active') {
+      return !task.completed;
+    }
+
+    if (filter === 'completed') {
+      return task.completed;
+    }
+
+    return true; // "all" case
+  });
+
+  return (
+    <div>
+      <h2>Todo List</h2>
+      <input
+        value={taskInput}
+        onChange={(e) => setTaskInput(e.target.value)}
+        placeholder="Add a new task..."
+      />
+      <button onClick={addTask}>Add</button>
+      <div>
+        <button onClick={() => setFilter('all')}>All</button>
+        <button onClick={() => setFilter('active')}>Active</button>
+        <button onClick={() => setFilter('completed')}>Completed</button>
+      </div>
+      <ul>
+        {filteredTasks.map((task) => (
+          <li
+            key={task.id}
+            style={{
+              textDecoration: task.completed ? 'line-through' : 'none',
+            }}>
+            {task.text}
+            <button onClick={() => toggleTask(task.id)}>
+              {task.completed ? 'Undo' : 'Complete'}
+            </button>
+            <button onClick={() => deleteTask(task.id)}>❌</button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default TodoApp;
+```
+
+This todo list is declarative because:
+
+- **UI updates automatically**: When `tasks` or `filter` changes, React re-renders the UI accordingly
+- **No manual DOM manipulation**: No need to select elements, manually remove tasks, or update styles via `document.querySelector`.
+- **Minimal and structured state**: The UI is derived from a **single source of truth** (`tasks` and `filter`)
+- **Event handlers update state, not the DOM**: The functions `addTask`, `toggleTask`, and `deleteTask` only update state, React handles the re-rendering.
+
+This example shows how thinking declaratively simplifies UI development in React:
+
+1. Identify **UI states**
+2. Determine **state-changing actions/operations**
+3. Design a **minimal state structure**
+4. Use **event handlers** to update state
+
+Instead of micromanaging DOM updates, we let React **react** to state changes – making our code cleaner, scalable, and easier to maintain.
+
+Thinking declaratively in React means shifting from a step-by-step, command-driven mindset to a state-driven approach. By focusing on defining what the UI should be based on state, you create components that are more readable, predictable, and maintainable.
+
+Embracing this paradigm makes it easier to manage complex UIs and lets React do the heavy lifting of figuring out how to update the DOM efficiently.
+
+## What you need to know for interviews
+
+- **Think declaratively and design the component**: Given a UI and the requirements, you should be able to think in a declarative fashion to define the various necessary components, props, state, operations that change the state, and connect all of them together.
+
+## Practice questions
+
+**Coding**:
+
+- [Tweet](/questions/user-interface/tweet/react?framework=react&tab=coding)
+- [Progress Bar](/questions/user-interface/progress-bar/react?framework=react&tab=coding)
+- [Progress Bars](/questions/user-interface/progress-bars/react?framework=react&tab=coding)
+- [File Explorer](/questions/user-interface/file-explorer/react?framework=react&tab=coding)
+- [File Explorer II](/questions/user-interface/file-explorer-ii/react?framework=react&tab=coding)
+- [File Explorer III](/questions/user-interface/file-explorer-iii/react?framework=react&tab=coding)
diff --git a/packages/react-interview-playbook/contents/react-thinking-declaratively/zh-CN.mdx b/packages/react-interview-playbook/contents/react-thinking-declaratively/zh-CN.mdx
new file mode 100644
index 0000000000..3f7e10c3da
--- /dev/null
+++ b/packages/react-interview-playbook/contents/react-thinking-declaratively/zh-CN.mdx
@@ -0,0 +1,289 @@
+---
+title: 在 React 中进行声明式思考
+description: 关于在 React 中使用声明式和状态驱动方法的指南，其中包含实际示例，如待办事项列表，以说明构建动态、可维护的 UI
+---
+
+React 的核心原则之一是其声明性。React 允许你定义 UI 应该根据当前状态呈现的样子，而不是手动逐步更新 DOM（命令式编程），它会为你处理更新。这种方法使 UI 开发更具可预测性、可扩展性，并且更容易推理。
+
+## 声明式 UI 与命令式 UI
+
+在命令式编程中，你给出关于事情应该如何发生的明确指令。DOM API 本质上是命令式的。当操作 DOM 时，这通常意味着选择元素并手动修改它们。
+
+```js
+const button = document.createElement('button');
+button.textContent = 'Click me';
+button.style.backgroundColor = 'blue';
+document.body.appendChild(button);
+
+button.addEventListener('click', () => {
+  button.style.backgroundColor = 'red';
+  alert('Button clicked!');
+});
+```
+
+请注意，每个操作都被明确定义：创建按钮、设置样式、将其附加到 DOM 以及响应事件更改属性。
+
+另一方面，声明式编程侧重于描述期望的结果，而不是详细说明如何实现它。React 组件允许我们声明 UI 应该是什么样子，当状态改变时，React 会负责更新它。
+
+```jsx
+function App() {
+  const [color, setColor] = React.useState('blue');
+
+  return (
+    <button style={{ backgroundColor: color }} onClick={() => setColor('red')}>
+      Click me
+    </button>
+  );
+}
+```
+
+在这个例子中，我们根据 `color` 状态定义了按钮的 UI。当状态改变时，React 会自动更新 DOM，而无需我们手动管理它。
+
+### 类比：命令式与声明式
+
+想想制作一杯咖啡：
+
+* **命令式：**“拿一个马克杯，倒入热水，加入咖啡，搅拌，然后享用”
+* **声明式：**“我想要一杯咖啡”
+
+在声明式方法中，执行的细节被抽象掉了。你描述最终结果，然后一个系统（例如咖啡机、咖啡师或 React）确保它正确发生。
+
+声明式编程的好处在上面的按钮示例中可能不太明显，因为它很小。
+
+让我们使用一个稍微复杂一点的待办事项列表示例，该列表允许添加、删除和完成任务。UI 应该显示任务列表和任务总数以及已完成的任务。
+
+使用命令式方法（例如，使用原始 JavaScript 和 DOM API），每次交互都需要手动查找、更新和重新渲染元素。
+
+以下用户操作将需要这些 DOM 操作：
+
+1. **添加任务**：
+   1. 将新任务追加到现有列表中
+   2. 清空输入内容
+   3. 为新添加的任务添加任务完成事件监听器
+   4. 增加总任务数
+2. **完成任务**：
+   1. 更新任务以显示已完成状态
+   2. 修改已完成任务的数量
+3. **删除任务**：
+   1. 从列表中删除任务
+   2. 减少总任务数
+   3. 如果任务已完成，则减少已完成任务的数量
+
+使用命令式方法，要使 UI 与状态保持同步要困难得多，因为您必须记住要修改的相关区域。当引入新功能时，用命令式编写的逻辑会变得更难阅读和跟踪。这对可维护性不利！
+
+使用声明式方法（如 React），您可以简单地描述应根据更新后的任务状态显示的 UI，React 将计算出必要的命令式 DOM 操作，以将当前 UI 演变为预期的 UI。
+
+可能存在无数个可能的当前 UI – React 如何计算出要进行的正确命令式 DOM 操作？ 这就是 React 的虚拟 DOM 和协调过程发挥作用的地方。 React 比较/区分当前 UI 表示和新的 UI 表示，并生成必要的 DOM 操作列表。
+
+声明式 UI 是几乎所有现代 UI 框架都采用的方法，因为它相对于命令式方法具有压倒性的优势。
+
+在 react.dev 上进一步阅读：[声明式 UI 与命令式 UI 的比较](https://react.dev/learn/reacting-to-input-with-state#how-declarative-ui-compares-to-imperative)
+
+## 如何以声明方式思考 UI
+
+以声明方式思考需要将您的重点从如何更新 UI 转移到 UI 在任何给定时刻应该是什么。
+
+让我们使用与上面相同的待办事项列表示例，并演示声明式编程如何更好。 我们不手动操作 DOM（命令式编程），而是根据状态定义 UI 应该如何显示，并让 React 负责渲染。
+
+为了使事情更复杂一些，待办事项列表支持过滤（全部、已完成、未完成）。
+
+### 1. 识别组件中的视觉状态
+
+待办事项列表有几种可能的 UI 状态：
+
+* 输入字段，可以接受用户的文本输入
+* 任务列表，可以为空或非空
+* 每个任务可以完成或未完成
+* 任务筛选器的选择器和所选选项
+* 任务列表可以被过滤（全部、活动、已完成）
+
+### 2. 确定触发状态更改的操作
+
+接下来，我们定义影响状态的操作：
+
+* 添加任务
+* 完成任务
+* 删除任务
+* 过滤任务（显示全部、活动或已完成）
+
+这些操作将修改状态，React 将相应地自动重新渲染 UI。
+
+### 3. 设计一个最小结构来表示状态
+
+接下来，我们需要设计一个结构来捕获 UI 中的状态数据。
+
+这是一个可能的方案：
+
+```js
+const [tasks, setTasks] = useState([
+  { id: 1, title: '学习 React' },
+  { id: 2, title: '构建一个项目' },
+]);
+const [completedTasks, setCompletedTasks] = useState([
+  { id: 1, title: '学习 React' },
+]);
+const [incompleteTasks, setIncompleteTasks] = useState([
+  { id: 2, title: '构建一个项目' },
+]);
+const [filter, setFilter] = useState('all'); // all | active | completed
+```
+
+然而，在这种设计中，存在一些数据重复。任务是 `tasks` 和 `completedTasks` 或 `incompleteTasks` 的一部分，添加/删除任务将涉及修改多个任务数组。这种状态设计不太好。
+
+一些改进方法：
+
+1. `incompleteTasks` 状态是多余的，因为如果一个任务不在 `completedTasks` 中，那么它就是未完成的。但是，当线性扫描 `completedTasks` 数组以检查每个任务是否已完成时，效率会很低
+2. 我们可以对 `completedTasks` 使用一个 `Set`，它只存储任务 ID。这样，任务标题就不必重复，并且查找任务的完成状态也很有效。但是，当已完成的任务被删除时，我们仍然需要记住修改两个地方。
+
+我们可以跟踪任务本身的完成状态，而不是存储需要同步的多个独立状态片段。这是一个最小且结构化的状态表示：
+
+```js
+const [tasks, setTasks] = useState([
+  { id: 1, title: 'Learn React', completed: false },
+  { id: 2, title: 'Build a project', completed: true },
+]);
+
+const [filter, setFilter] = useState('all'); // all | active | completed
+```
+
+使用此结构：
+
+* `tasks` 是一个数组，其中每个任务都有一个 `id`、`title` 和 `completed` 状态
+* `filter` 确定要显示的任务
+
+为了避免状态冗余，我们可以从 `tasks` 派生已完成的任务，而不是保留一个单独的 `completedTasks` 数组。
+
+这里需要考虑权衡。虽然状态现在已合并，但切换任务完成状态现在将需要克隆整个 `tasks` 数组，而如果我们对 `completedTasks` 使用 `Set`，则不需要这样做。
+
+### 4. 在事件处理程序中调用操作
+
+操作是响应两种事件而触发的：
+
+* **用户事件**：用户直接执行的操作，例如单击按钮、在输入字段中键入或从下拉列表中选择一个选项
+* **后台事件**：在没有直接用户交互的情况下触发的操作，例如 API 响应、计时器和间隔、WebSocket 实时更新
+
+对于手头的待办事项列表，我们只需要关心用户事件。
+
+但是，建议为每个操作编写一个函数，并在每个操作函数中调用状态设置器。这是因为相同的操作可以从 UI 上的许多地方甚至在后台触发。一个例子是视频播放器，用户可以按“暂停”按钮或按空格键来暂停视频。
+
+在这些操作函数中集中状态更新逻辑将有助于保持代码的可维护性。
+
+### 完整示例
+
+现在，让我们实现上面学到的内容。
+
+```jsx
+import { useState } from 'react';
+
+function TodoApp() {
+  const [tasks, setTasks] = useState([]);
+  const [filter, setFilter] = useState('all');
+  const [taskInput, setTaskInput] = useState('');
+
+  // Add a task
+  function addTask() {
+    if (taskInput.trim() === '') {
+      return;
+    }
+    const newTask = { id: Date.now(), text: taskInput, completed: false };
+    setTasks([...tasks, newTask]);
+    setTaskInput('');
+  }
+
+  // Toggle task completion
+  function toggleTask(id) {
+    setTasks(
+      tasks.map((task) =>
+        task.id === id ? { ...task, completed: !task.completed } : task,
+      ),
+    );
+  }
+
+  // Delete a task
+  function deleteTask(id) {
+    setTasks(tasks.filter((task) => task.id !== id));
+  }
+
+  // Get tasks based on filter
+  const filteredTasks = tasks.filter((task) => {
+    if (filter === 'active') {
+      return !task.completed;
+    }
+
+    if (filter === 'completed') {
+      return task.completed;
+    }
+
+    return true; // "all" case
+  });
+
+  return (
+    <div>
+      <h2>Todo List</h2>
+      <input
+        value={taskInput}
+        onChange={(e) => setTaskInput(e.target.value)}
+        placeholder="Add a new task..."
+      />
+      <button onClick={addTask}>Add</button>
+      <div>
+        <button onClick={() => setFilter('all')}>All</button>
+        <button onClick={() => setFilter('active')}>Active</button>
+        <button onClick={() => setFilter('completed')}>Completed</button>
+      </div>
+      <ul>
+        {filteredTasks.map((task) => (
+          <li
+            key={task.id}
+            style={{
+              textDecoration: task.completed ? 'line-through' : 'none',
+            }}>
+            {task.text}
+            <button onClick={() => toggleTask(task.id)}>
+              {task.completed ? 'Undo' : 'Complete'}
+            </button>
+            <button onClick={() => deleteTask(task.id)}>❌</button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default TodoApp;
+```
+
+这个待办事项列表是声明式的，因为：
+
+* **UI 自动更新**：当 `tasks` 或 `filter` 更改时，React 会相应地重新渲染 UI
+* **没有手动 DOM 操作**：无需选择元素、手动删除任务或通过 `document.querySelector` 更新样式。
+* **最小且结构化的状态**：UI 源自**单一事实来源** (`tasks` 和 `filter`)
+* **事件处理程序更新状态，而不是 DOM**：函数 `addTask`、`toggleTask` 和 `deleteTask` 仅更新状态，React 处理重新渲染。
+
+此示例展示了声明式思维如何简化 React 中的 UI 开发：
+
+1. 识别 **UI 状态**
+2. 确定 **状态更改操作/操作**
+3. 设计一个 **最小状态结构**
+4. 使用 **事件处理程序** 更新状态
+
+我们让 React **响应** 状态变化，而不是微观管理 DOM 更新，这使得我们的代码更简洁、更具可扩展性，并且更易于维护。
+
+在 React 中以声明式方式思考意味着从一步一步的、命令驱动的思维模式转变为状态驱动的方法。 通过专注于根据状态定义 UI 应该是什么，您可以创建更具可读性、可预测性和可维护性的组件。
+
+拥抱这种范式可以更容易地管理复杂的 UI，并让 React 承担起确定如何有效地更新 DOM 的繁重工作。
+
+## 面试需要了解的内容
+
+* **以声明方式思考并设计组件**：给定一个 UI 和需求，您应该能够以声明式方式思考，以定义各种必要的组件、道具、状态、更改状态的操作，并将它们全部连接在一起。
+
+## 练习题
+
+**编码**：
+
+* [Tweet](/questions/user-interface/tweet/react?framework=react\&tab=coding)
+* [进度条](/questions/user-interface/progress-bar/react?framework=react\&tab=coding)
+* [进度条](/questions/user-interface/progress-bars/react?framework=react\&tab=coding)
+* [文件资源管理器](/questions/user-interface/file-explorer/react?framework=react\&tab=coding)
+* [文件资源管理器 II](/questions/user-interface/file-explorer-ii/react?framework=react\&tab=coding)
+* [文件资源管理器 III](/questions/user-interface/file-explorer-iii/react?framework=react\&tab=coding)
diff --git a/packages/system-design/contents/cheatsheet/en-US.langnostic.json b/packages/system-design/contents/cheatsheet/en-US.langnostic.json
new file mode 100644
index 0000000000..d18da5deab
--- /dev/null
+++ b/packages/system-design/contents/cheatsheet/en-US.langnostic.json
@@ -0,0 +1,32 @@
+{
+  "frontmatter": {
+    "title": "c1620193",
+    "description": "5d80e5f1",
+    "seo_title": "dd85935d",
+    "social_title": "dd85935d",
+    "seo_description": "5d80e5f1"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "3ef63259",
+        "87fdaf9b",
+        "9a27365c",
+        "5ffd9452",
+        "cca4fd7e",
+        "a7d9eb32"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "3ef63259",
+        "87fdaf9b",
+        "9a27365c",
+        "5ffd9452",
+        "cca4fd7e",
+        "a7d9eb32"
+      ]
+    }
+  }
+}
diff --git a/packages/system-design/contents/cheatsheet/en-US.mdx b/packages/system-design/contents/cheatsheet/en-US.mdx
new file mode 100644
index 0000000000..c5d24b3dc0
--- /dev/null
+++ b/packages/system-design/contents/cheatsheet/en-US.mdx
@@ -0,0 +1,33 @@
+---
+title: Cheatsheet for Front End System Design Interviews
+description: Summary of the most important things you should take note of during front end system design interviews.
+seo_title: Cheatsheet for Front End System Design Interviews | GreatFrontEnd
+social_title: Cheatsheet for Front End System Design Interviews | GreatFrontEnd
+seo_description: Summary of the most important things you should take note of during front end system design interviews.
+---
+
+## RADIO framework
+
+1. **Requirements exploration**: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions.
+1. **Architecture / High-level design**: Identify the key components of the product and how they are related to each other.
+1. **Data model**: Describe the various data entities, the fields they contain and which component(s) they belong to.
+1. **Interface definition (API)**: Define the interface (API) between components in the product, functionality of each APIs, their parameters and responses.
+1. **Optimizations and deep dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product.
+
+## Evaluation axes
+
+1. **Problem exploration**: Demonstrated understanding of the problem, asked clarifying questions to reduce ambiguities and gathered sufficient requirements.
+1. **Architecture**: Broke down the problem into smaller independent parts, defined their responsibilities and how these components can work together.
+1. **Technical proficiency**: Demonstrated technical knowledge and proficiency of front end domain fundamentals (e.g. performance, networking, accessibility, i18n, security, etc), relevant technologies and APIs.
+1. **Exploration and tradeoffs**: Suggested various possible approaches on how to achieve certain functionality, explained the pros and cons and made recommendations.
+1. **Product and UX sense**: Showed consideration for user experience and decisions to make the product a great one.
+1. **Communication and collaboration**: Conveyed thoughts and ideas clearly and concisely, receptive to feedback and collaborated with the interviewer.
+
+## Common mistakes
+
+- Jumping into answering the question immediately without first asking questions and gathering requirements.
+- Approaching the question in an unstructured manner, going all over the place and missing out on important areas.
+- Insisting on only one solution or the best solution without realizing that each solution has tradeoffs.
+- Remaining silent the entire time and only thinking in their head.
+- Going down a rabbit hole and spending too much time on unimportant areas.
+- Using buzzwords without being able to explain them.
diff --git a/packages/system-design/contents/cheatsheet/pt-BR.mdx b/packages/system-design/contents/cheatsheet/pt-BR.mdx
new file mode 100644
index 0000000000..c6351772af
--- /dev/null
+++ b/packages/system-design/contents/cheatsheet/pt-BR.mdx
@@ -0,0 +1,31 @@
+---
+title: Resumo para Projeto de Sistema Front-End
+description: Resumo das coisas importantes que você precisa observar durante as entrevistas de design de sistema front-end.
+seo_title: Guia rápido para entrevistas de design de sistema front-end
+---
+
+## Framework RADIO
+
+1.  Exploração de Requisitos: Compreenda completamente o problema e determine o escopo por meio de perguntas esclarecedoras.
+2.  Arquitetura/Design de Alto Nível: Identifique os principais componentes do produto e como eles se relacionam entre si.
+3.  Modelo de Dados: Descreva as várias entidades de dados, os campos que elas contêm e a(s) componente(s) a que pertencem.
+4.  Definição de Interface (API): Defina a interface (API) entre os componentes do produto, a funcionalidade de cada API, seus parâmetros e respostas.
+5.  Otimizações e Análise Detalhada: Vamos discutir as possíveis oportunidades de otimização e áreas específicas de interesse ao construir o produto.
+
+## Eixos de Avaliação
+
+1.  Exploração do Problema: Demonstrou compreensão do problema, fez perguntas esclarecedoras para reduzir ambiguidades e coletou requisitos suficientes.
+2.  Arquitetura: Dividiu o problema em partes menores e independentes, definiu suas responsabilidades e como esses componentes podem trabalhar juntos.
+3.  Proficiência Técnica: Demonstrou conhecimento técnico e proficiência nas fundamentos do domínio de front-end (por exemplo, desempenho, redes, acessibilidade, i18n, segurança, etc), tecnologias relevantes e APIs.
+4.  Exploração e Compromissos: Sugeriu várias abordagens possíveis para alcançar determinada funcionalidade, explicou os prós e contras e fez recomendações.
+5.  Senso de Produto e Experiência do Usuário (UX): Demonstra consideração pela experiência do usuário e toma decisões para tornar o produto excelente.
+6.  Comunicação e Colaboração: Expressou pensamentos e ideias de forma clara e concisa, receptivo ao feedback e colaborou com o entrevistador.
+
+## Erros Comuns
+
+- Responder imediatamente à pergunta sem primeiro fazer perguntas e obter requisitos.
+- Abordar a pergunta de maneira desestruturada, indo em várias direções e deixando de abordar áreas importantes.
+- Insistir em apenas uma solução ou na melhor solução sem perceber que cada solução tem compensações.
+- Permanecer em silêncio o tempo todo e apenas pensar em suas próprias ideias.
+- Entrar em uma toca de coelho e gastar muito tempo em áreas não importantes.
+- Utilizar buzzwords sem conseguir explicá-los.
diff --git a/packages/system-design/contents/cheatsheet/zh-CN.mdx b/packages/system-design/contents/cheatsheet/zh-CN.mdx
new file mode 100644
index 0000000000..7a11fff2b9
--- /dev/null
+++ b/packages/system-design/contents/cheatsheet/zh-CN.mdx
@@ -0,0 +1,33 @@
+---
+title: 前端系统设计面试备忘单
+description: 总结前端系统设计面试中您应该注意的最重要的事情。
+seo_title: 前端系统设计面试备忘单 | GreatFrontEnd
+social_title: 前端系统设计面试备忘单 | GreatFrontEnd
+seo_description: 总结前端系统设计面试中您应该注意的最重要的事情。
+---
+
+## RADIO 框架
+
+1. **需求探索**：彻底理解问题，通过提出一些澄清问题来确定范围。
+2. **架构/高层设计**：确定产品的主要组成部分以及它们之间的关系。
+3. **数据模型**：描述各种数据实体、它们包含的字段以及它们所属的组件。
+4. **接口定义 (API)**：定义产品中组件之间的接口 (API)、每个 API 的功能、它们的参数和响应。
+5. **优化和深入研究**：讨论构建产品时可能的优化机会和特定的关注领域。
+
+## 评估轴
+
+1. **问题探索**：展示对问题的理解，提出澄清问题以减少歧义并收集足够的需求。
+2. **架构**：将问题分解为较小的独立部分，定义它们的职责以及这些组件如何协同工作。
+3. **技术熟练程度**：展示前端领域基础知识（例如性能、网络、可访问性、i18n、安全性等）、相关技术和 API 的技术知识和熟练程度。
+4. **探索和权衡**：建议实现某些功能的各种可能方法，解释优缺点并提出建议。
+5. **产品和用户体验意识**：考虑用户体验并做出使产品成为优秀产品的决策。
+6. **沟通与协作**：清晰简洁地传达想法和想法，接受反馈并与面试官合作。
+
+## 常见错误
+
+* 在没有先提问和收集需求的情况下立即开始回答问题。
+* 以非结构化的方式处理问题，到处乱跑，错过了重要领域。
+* 坚持只使用一种解决方案或最佳解决方案，而没有意识到每个解决方案都有权衡。
+* 始终保持沉默，只在脑海中思考。
+* 陷入兔子洞，在不重要的领域花费太多时间。
+* 使用流行语而无法解释它们。
diff --git a/packages/system-design/contents/common-mistakes/en-US.langnostic.json b/packages/system-design/contents/common-mistakes/en-US.langnostic.json
new file mode 100644
index 0000000000..cd7a311214
--- /dev/null
+++ b/packages/system-design/contents/common-mistakes/en-US.langnostic.json
@@ -0,0 +1,58 @@
+{
+  "frontmatter": {
+    "title": "b58a6170",
+    "description": "d56109c6",
+    "seo_title": "c9370406",
+    "social_title": "1cbb43e8",
+    "seo_description": "d56109c6"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "1da5aa13",
+        "6d8988f5",
+        "e4bbaf74",
+        "3d71039e",
+        "d03c15b3",
+        "e3ba4360",
+        "14d3c301",
+        "bd8dfa90",
+        "bf8e2bdb",
+        "56a1a69a",
+        "430f5bbd",
+        "6e6e30f3",
+        "13999e42",
+        "54bd1adf",
+        "8ae07331",
+        "17f2899a",
+        "25e5b6fc",
+        "1b8c8cf4",
+        "f4d4f36d"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "1da5aa13",
+        "6d8988f5",
+        "e4bbaf74",
+        "3d71039e",
+        "d03c15b3",
+        "e3ba4360",
+        "14d3c301",
+        "bd8dfa90",
+        "bf8e2bdb",
+        "56a1a69a",
+        "430f5bbd",
+        "6e6e30f3",
+        "13999e42",
+        "54bd1adf",
+        "8ae07331",
+        "17f2899a",
+        "25e5b6fc",
+        "1b8c8cf4",
+        "f4d4f36d"
+      ]
+    }
+  }
+}
diff --git a/packages/system-design/contents/common-mistakes/en-US.mdx b/packages/system-design/contents/common-mistakes/en-US.mdx
new file mode 100644
index 0000000000..2424cce490
--- /dev/null
+++ b/packages/system-design/contents/common-mistakes/en-US.mdx
@@ -0,0 +1,45 @@
+---
+title: Common Mistakes to Avoid for Front End System Design Interviews
+description: Know the mistakes candidates often make during front end system design interviews and how to avoid them.
+seo_title: Common Mistakes to Avoid | Front End System Design Playbook
+social_title: Common Mistakes to Avoid for Front End System Design Interviews | GreatFrontEnd
+seo_description: Know the mistakes candidates often make during front end system design interviews and how to avoid them.
+---
+
+Unlike coding interviews which are much more common and you can somewhat practice/simulate interview conditions, it is much harder to practice for system design interviews.
+
+Here's a list of common mistakes made by candidates when they are answering system design interview questions and many of them are not specific to front end system design interviews. Hopefully you will remember these points and avoid them for your own interviews.
+
+## Jumping into answering the question immediately
+
+Don't jump into answering the question immediately! Take the time to gather requirements and clarify assumptions by asking questions. Answering the wrong question well is worse than answering the right question poorly.
+
+## Approaching the question in an unstructured manner
+
+Because system design interviews are very open-ended with no explicit completion milestone (unlike coding interviews where you have to produce working code), some candidates might just talk about whatever that comes to their mind and the answer might end up appearing messy to the interviewer. Use the RADIO framework to help you.
+
+Write down each step of the RADIO framework on the whiteboard at the start of the interview and ensure that by the end of the interview you have covered each section sufficiently. Note that you don't necessarily have to complete each section in order and you can always revisit previous sections if you've missed out on certain things.
+
+## Insisting on only one solution or the best solution
+
+Don't insist there's only one solution, especially if the interviewer prompts you for alternative approaches. More often than not, there are multiple ways to solve a problem, each with its own tradeoffs.
+
+The interviewer wants to see you identify a solution with the right tradeoffs for the issue at hand, not you saying that there's only one right or best solution. The other solutions might be clearly bad and is very obvious to you, but the interviewer wants to hear you explain why they are bad.
+
+## Remaining silent the entire time
+
+On the opposite of the spectrum of answering too quickly, there are people who remain too silent. Don't remain silent the entire time and thinking only in your head – think out loud!
+
+System design interviews are meant to be collaborative exercises between you and the interviewer. Treat your interviewer as a coworker, bring up issues you've identified, bounce ideas, and discuss possible solutions with them.
+
+## Going down a rabbit hole
+
+Don't go down a rabbit hole of diving too deep into a particular component. Define an initial architecture/high-level design first, then proceed to elaborate on the various parts of the system. Focus on the parts which are most important to the problem.
+
+If you are unsure, ask the interviewer if you should dive deeper into a specific component. It'd be bad to spend too much time discussing about an unimportant component, wasting precious time without providing useful signals to the interviewer.
+
+## Using buzzwords without being able to explain them
+
+Don't use buzzwords or terms you can't explain well. It might be tempting to throw out some cool terms like "Virtual DOM", "DOM Reconciliation", "Partial Hydration", "Streaming Server-side Rendering" and you can if they're relevant to the current topic!
+
+However, if you do, make sure you are able to explain the term you just used as your interviewer is likely going to probe for more information to test your knowledge. It's a red flag if you are unable to explain the term you just used.
diff --git a/packages/system-design/contents/common-mistakes/pt-BR.mdx b/packages/system-design/contents/common-mistakes/pt-BR.mdx
new file mode 100644
index 0000000000..5397dcc5cb
--- /dev/null
+++ b/packages/system-design/contents/common-mistakes/pt-BR.mdx
@@ -0,0 +1,42 @@
+---
+title: Erros Comuns Cometidos Durante Entrevistas de Design de Sistemas Front End
+seo_title: Armadilhas Comuns a Evitar em Entrevistas de Design de Sistemas Front-End
+description: 6 erros comuns que você deve evitar durante entrevistas de design de sistemas front-end.
+seo_description: 6 erros comuns que você deve evitar durante entrevistas de design de sistemas front-end.
+---
+
+Ao contrário das entrevistas de codificação, que são muito mais comuns e nas quais é possível praticar e simular as condições da entrevista, é muito mais difícil praticar para entrevistas de design de sistemas.
+
+Aqui está uma lista de erros comuns cometidos pelos candidatos ao responder perguntas de entrevistas sobre design de sistemas, e muitos deles não são específicos para entrevistas de design de sistemas front-end. Espero que você se lembre desses pontos e evite-os em suas próprias entrevistas.
+
+## Responder imediatamente à pergunta
+
+Não responda imediatamente à pergunta! Dedique um tempo para reunir os requisitos e esclarecer suposições fazendo perguntas. Responder à pergunta errada de forma correta é pior do que responder à pergunta certa de forma inadequada.
+
+## Abordar a pergunta de maneira desestruturada
+
+Como as entrevistas de design de sistemas são muito abertas e não possuem um marco de conclusão explícito (ao contrário das entrevistas de codificação, onde você precisa produzir um código funcional), alguns candidatos podem simplesmente falar sobre qualquer coisa que lhes venha à mente, e a resposta pode acabar parecendo confusa para o entrevistador. Utilize o framework RADIO para te auxiliar.
+
+Escreva cada etapa do framework RADIO no quadro branco no início da entrevista e garanta que, ao final da entrevista, você tenha abordado cada seção de forma suficiente. Observe que você não precisa necessariamente completar cada seção em ordem e sempre pode revisitar seções anteriores se tiver deixado de fora certos elementos.
+
+## Insistir em apenas uma solução ou na melhor solução
+
+Não insista que existe apenas uma solução, especialmente se o entrevistador lhe pedir abordagens alternativas. Na maioria das vezes, existem várias maneiras de resolver um problema, cada uma com suas próprias compensações (tradeoffs).
+
+O entrevistador quer ver você identificar uma solução com as compensações adequadas para o problema em questão, e não que você diga que existe apenas uma solução correta ou melhor. As outras soluções podem ser claramente ruins e óbvias para você, mas o entrevistador precisa ouvir você explicar por que elas são ruins.
+
+## Permanecer em silêncio o tempo todo
+
+No extremo oposto do espectro de responder muito rapidamente, temos pessoas que permanecem em silêncio. Não permaneça em silêncio o tempo todo e apenas pense em sua cabeça. Pense em voz alta! As entrevistas de design de sistemas têm como objetivo ser exercícios colaborativos entre você e o entrevistador. Trate seu entrevistador como um colega de trabalho, mencione as questões que você identificou, compartilhe ideias e discuta possíveis soluções com eles.
+
+## Entrando na toca do coelho
+
+Não se aprofunde demais em um componente específico, seguindo um caminho longo e complexo que não seja relevante para a questão em discussão. Elabore a arquitetura/design de alto nível primeiro e, em seguida, prossiga para as várias partes do sistema. Concentre-se nas partes mais importantes para o problema em questão.
+
+Se você não tiver certeza, pergunte ao entrevistador se deve se aprofundar mais em um componente específico. Seria ruim gastar muito tempo discutindo sobre um componente irrelevante, desperdiçando tempo precioso sem fornecer um sinal útil ao entrevistador.
+
+## Utilizar termos da moda (buzzwords) sem conseguir explicá-los
+
+Não utilize termos da moda ou palavras-chave que você não consiga explicar adequadamente. Pode ser tentador usar termos interessantes como "Virtual DOM", "DOM Reconciliation", "Partial Hydration", "Streaming Server-side Rendering" e você pode fazê-lo se forem relevantes para o tópico atual!
+
+No entanto, se você fizer isso, certifique-se de que consegue explicar o termo que acabou de usar, pois o entrevistador provavelmente irá investigar mais informações para testar seus conhecimentos. É um sinal preocupante se você não conseguir explicar o termo que acabou de usar.
diff --git a/packages/system-design/contents/common-mistakes/zh-CN.mdx b/packages/system-design/contents/common-mistakes/zh-CN.mdx
new file mode 100644
index 0000000000..66479deb09
--- /dev/null
+++ b/packages/system-design/contents/common-mistakes/zh-CN.mdx
@@ -0,0 +1,45 @@
+---
+title: 前端系统设计面试中要避免的常见错误
+description: 了解候选人在前端系统设计面试中常犯的错误以及如何避免这些错误。
+seo_title: 避免的常见错误 | 前端系统设计实战
+social_title: 前端系统设计面试中要避免的常见错误 | GreatFrontEnd
+seo_description: 了解候选人在前端系统设计面试中常犯的错误以及如何避免这些错误。
+---
+
+与更常见的编码面试不同，你可以或多或少地练习/模拟面试条件，系统设计面试更难练习。
+
+以下是候选人在回答系统设计面试问题时常犯的错误列表，其中许多错误并非特定于前端系统设计面试。希望你记住这些要点，并在你自己的面试中避免它们。
+
+## 立即开始回答问题
+
+不要立即开始回答问题！花时间收集需求并通过提问来澄清假设。很好地回答错误的问题比糟糕地回答正确的问题更糟糕。
+
+## 以非结构化的方式处理问题
+
+由于系统设计面试非常开放，没有明确的完成里程碑（不像编码面试，你必须编写可运行的代码），一些候选人可能会谈论他们想到的任何事情，而答案最终可能对面试官来说显得混乱。使用 RADIO 框架来帮助你。
+
+在面试开始时在白板上写下 RADIO 框架的每个步骤，并确保在面试结束时你已充分涵盖了每个部分。请注意，你不必按顺序完成每个部分，如果错过了某些内容，你随时可以重新访问之前的部分。
+
+## 坚持只有一个解决方案或最佳解决方案
+
+不要坚持只有一个解决方案，特别是如果面试官提示你使用替代方法。通常情况下，有多种解决问题的方法，每种方法都有其自身的权衡。
+
+面试官希望看到你针对手头的问题确定一个具有正确权衡的解决方案，而不是你说只有一个正确或最佳的解决方案。其他解决方案可能明显很糟糕，对你来说也很明显，但面试官希望听到你解释为什么它们很糟糕。
+
+## 始终保持沉默
+
+与回答太快相反，有些人过于沉默。不要一直保持沉默，只在脑海中思考——大声思考！
+
+系统设计面试旨在成为你和面试官之间的协作练习。将你的面试官视为同事，提出你已确定的问题，提出想法，并与他们讨论可能的解决方案。
+
+## 钻牛角尖
+
+不要陷入深入研究特定组件的兔子洞。首先定义一个初始架构/高级设计，然后继续详细阐述系统的各个部分。专注于对问题最重要的部分。
+
+如果你不确定，请询问面试官是否应该深入研究特定组件。花太多时间讨论一个不重要的组件是不好的，这会浪费宝贵的时间，而没有向面试官提供有用的信号。
+
+## 使用无法解释的流行语
+
+不要使用你无法很好解释的流行语或术语。 抛出一些很酷的术语，例如“虚拟 DOM”、“DOM 协调”、“部分水合”、“流式服务器端渲染”可能很诱人，如果它们与当前主题相关，你可以这样做！
+
+但是，如果你这样做了，请确保你能够解释你刚刚使用的术语，因为你的面试官很可能会探究更多信息来测试你的知识。 如果你无法解释你刚刚使用的术语，这是一个危险信号。
diff --git a/packages/system-design/contents/evaluation-axes/en-US.langnostic.json b/packages/system-design/contents/evaluation-axes/en-US.langnostic.json
new file mode 100644
index 0000000000..9859b55b75
--- /dev/null
+++ b/packages/system-design/contents/evaluation-axes/en-US.langnostic.json
@@ -0,0 +1,68 @@
+{
+  "frontmatter": {
+    "title": "3df940cf",
+    "description": "270973cf",
+    "seo_title": "5765a06",
+    "social_title": "52d13191",
+    "seo_description": "f5f9259d"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "bb5a563d",
+        "75d99e54",
+        "86b52841",
+        "95750ede",
+        "25956746",
+        "1776ea1d",
+        "ff21ee3e",
+        "900434f0",
+        "d0e307ad",
+        "ec73b21f",
+        "82167a11",
+        "7ef2ce0c",
+        "457f88e9",
+        "38888fb5",
+        "76a5c505",
+        "c2b3bece",
+        "e9e22f0c",
+        "c8f9f67a",
+        "15959410",
+        "189b50dd",
+        "49cc6d02",
+        "67a1d4f3",
+        "77ca216d",
+        "23733c97"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "bb5a563d",
+        "75d99e54",
+        "86b52841",
+        "95750ede",
+        "25956746",
+        "1776ea1d",
+        "ff21ee3e",
+        "900434f0",
+        "d0e307ad",
+        "ec73b21f",
+        "82167a11",
+        "7ef2ce0c",
+        "457f88e9",
+        "38888fb5",
+        "76a5c505",
+        "c2b3bece",
+        "e9e22f0c",
+        "c8f9f67a",
+        "15959410",
+        "189b50dd",
+        "49cc6d02",
+        "67a1d4f3",
+        "77ca216d",
+        "23733c97"
+      ]
+    }
+  }
+}
diff --git a/packages/system-design/contents/evaluation-axes/en-US.mdx b/packages/system-design/contents/evaluation-axes/en-US.mdx
new file mode 100644
index 0000000000..11229ae1ea
--- /dev/null
+++ b/packages/system-design/contents/evaluation-axes/en-US.mdx
@@ -0,0 +1,103 @@
+---
+title: Evaluation Criteria for Front End System Design Interviews
+description: Specific behaviors and signals interviewers look out for in front end system design interviews.
+seo_title: Interview Evaluation Criteria | Front End System Design Playbook
+social_title: Evaluation Axes for Front End System Design Interviews | GreatFrontEnd
+seo_description: Evaluation criteria typically used by big tech interviewers to evaluate front end system design interviews.
+---
+
+During interviews, interviewers look out for signals displayed by candidates before making an overall hiring and leveling recommendation. The more desired behaviors the candidate displays, the higher the likelihood the interviewer will recommend a "Hire" decision. The more detailed and mature the answers are, the higher the leveling recommendation.
+
+This section lists some of the behaviors that candidates should display. Bear them in mind as you are answering the system design question and demonstrate them confidently during the interview.
+
+## Problem exploration
+
+- Demonstrated thorough understanding of the problem.
+- Explored the requirements sufficiently by asking relevant clarifying questions to minimize ambiguities.
+- Gathered functional and non-functional requirements of the problem.
+- Defined the scope of the problem.
+- Identified the important aspects of the problem to focus on and address.
+
+<div className="mt-6 space-x-1 space-y-1 text-sm">
+  <strong className="font-medium">Relevant framework sections:</strong>
+  Requirements exploration
+</div>
+
+## Architecture
+
+- Developed an architecture that solved the entire problem sufficiently.
+- Broke down the problem into smaller independent parts of suitable granularity.
+- Identified components of the system and defined their responsibilities clearly.
+- Articulated how these components will work together and defined/described the API between these components.
+- Developed an architecture that can be put into practice.
+- Developed an architecture with scalability and reusability in mind, one that can be extended to support future requirements.
+
+<div className="mt-6 space-x-1 space-y-1 text-sm">
+  <strong className="font-medium">Relevant framework sections:</strong>
+  Architecture/High-level design, Data model, Interface definition
+</div>
+
+## Technical proficiency
+
+- Demonstrated technical knowledge and proficiency of front end fundamentals, common technologies and APIs.
+- Able to dive into specific front end domain areas where relevant to the problem.
+- Identified areas which need to be paid special attention to and addressed them by proposing solutions and analyzing their tradeoffs.
+
+_Front end domain areas include Performance, Networking, HTML/CSS, Accessibility, Internationalization, Security, Scalability, etc._
+
+<div className="mt-6 space-x-1 space-y-1 text-sm">
+  <strong className="font-medium">Relevant framework sections:</strong>
+  Architecture / High-level design, Optimizations and deep dive
+</div>
+
+## Exploration and tradeoffs
+
+- Offered various possible solutions to the problems at hand and explained the pros and cons of each solution.
+  - The "problem" here doesn't necessarily refer to the given system design question.
+  - While solving the given question, there would be smaller problems to solve/questions to answer and each small problem/question can have various solutions and choices to make.
+- Explained the suitability of the solutions given the context and requirements and provided recommendations for the context of the question.
+  - Do not insist there is only one possible solution. Good questions usually have a few possible solutions where the suitability of each depends on the context.
+  - Even if the other solutions are clearly and obviously bad, do still mention them and briefly explain why they are bad.
+
+<div className="mt-6 space-x-1 space-y-1 text-sm">
+  <strong className="font-medium">Relevant framework sections:</strong>
+  Requirements exploration, Data model, Interface definition, Optimizations and
+  deep dive
+</div>
+
+## Product and UX sense
+
+- Proposed a robust solution that lays the foundation of a good product.
+- Considered user experience when answering: loading states, performance (perceived or actual), mobile friendliness, keyboard friendliness, etc.
+- Considered error cases and suggested ways to handle them.
+
+<div className="mt-6 space-x-1 space-y-1 text-sm">
+  <strong className="font-medium">Relevant framework sections:</strong>
+  Optimizations and deep dive
+</div>
+
+## Communication and collaboration
+
+- Conveyed their thoughts and ideas clearly and concisely.
+- Explained complex concepts with ease.
+- Engaged the interviewer during the session, asks good questions and seeks opinions where relevant.
+- Open to feedback from the interviewer and incorporates the feedback to refine their solutions.
+
+<div className="mt-6 space-x-1 space-y-1 text-sm">
+  <strong className="font-medium">Relevant framework sections:</strong>
+  Architecture / High-level design, Data model, Interface definition,
+  Optimizations and deep dive
+</div>
+
+## Summary
+
+Here's a table summarizing how the evaluation axes can be mapped to the various sections of the **RADIO framework**: Requirements Exploration, Architecture/High-level Design, Data Model, Interface Definition, Optimizations and Deep Dive.
+
+| Axis                            |  R  |  A  |  D  |  I  |  O  |
+| ------------------------------- | :-: | :-: | :-: | :-: | :-: |
+| Problem exploration             | ✅  |  -  |  -  |  -  |  -  |
+| Architecture                    |  -  | ✅  | ✅  | ✅  |  -  |
+| Technical proficiency           |  -  | ✅  |  -  |  -  | ✅  |
+| Exploration and tradeoffs       |  -  | ✅  | ✅  | ✅  | ✅  |
+| Product and UX sense            |  -  |  -  |  -  |  -  | ✅  |
+| Communication and collaboration | ✅  | ✅  | ✅  | ✅  | ✅  |
diff --git a/packages/system-design/contents/evaluation-axes/pt-BR.mdx b/packages/system-design/contents/evaluation-axes/pt-BR.mdx
new file mode 100644
index 0000000000..ba0aef3e0f
--- /dev/null
+++ b/packages/system-design/contents/evaluation-axes/pt-BR.mdx
@@ -0,0 +1,104 @@
+---
+title: Eixos de Avaliação para Entrevistas de Design de Sistemas Front-End
+description: Comportamentos específicos e sinais que os entrevistadores observam durante entrevistas de design de sistemas front-end.
+seo_title: Eixos de Avaliação para Design de Sistemas Front-End segundo ex-entrevistadores
+seo_description: Descubra como os entrevistadores do Google, Amazon, Meta, Microsoft e outras empresas de tecnologia avaliam você nas entrevistas de design de sistemas front-end
+---
+
+Durante as entrevistas, os entrevistadores observam os sinais exibidos pelos candidatos antes de fazer uma recomendação geral de contratação e nível. Quanto mais comportamentos desejados o candidato demonstrar, maior será a probabilidade de o entrevistador recomendar uma decisão de "Contratar". Quanto mais detalhadas e maduras forem as respostas, maior será a recomendação de nível do candidato.
+
+Esta seção lista alguns dos comportamentos que os candidatos devem demonstrar. Mantenha-os em mente ao responder a pergunta de design de sistemas e demonstre-os com confiança durante a entrevista.
+
+## Exploração de Problemas
+
+- Demonstrou um entendimento completo do problema.
+- Explorou suficientemente os requisitos fazendo perguntas pertinentes de esclarecimento para minimizar ambiguidades.
+- Reuniu os requisitos funcionais e não funcionais do problema.
+- Definiu o escopo do problema.
+- Identificou os aspectos importantes do problema para focar e abordar.
+
+<div className="mt-6 space-x-1 space-y-1 text-xs">
+  <strong className="font-medium">Seções relevantes do framework:</strong>
+  Exploração de Requisitos
+</div>
+
+## Arquitetura
+
+- Desenvolveu uma arquitetura que resolveu o problema como um todo de forma suficiente.
+- Dividiu o problema em partes menores e independentes, com uma granularidade adequada.
+- Identificou os componentes do sistema e definiu suas responsabilidades de forma clara.
+- Articulou como esses componentes irão funcionar juntos e definiu/descreveu a API entre esses componentes.
+- Desenvolveu uma arquitetura que pode ser colocada em prática.
+- Desenvolveu uma arquitetura com escalabilidade e reutilização em mente, uma que possa ser estendida para suportar requisitos futuros.
+
+<div className="mt-6 space-x-1 space-y-1 text-xs">
+  <strong className="font-medium">Seções relevantes do framework:</strong>
+  Arquitetura/Design de alto nível, Modelo de dados, Definição de interface
+</div>
+
+## Proficiência técnica
+
+- Demonstrou conhecimento técnico e proficiência nas fundamentos de front-end, tecnologias comuns e APIs.
+- Capaz de aprofundar-se em áreas específicas do front-end quando relevantes para o problema.
+- Identificou áreas que precisam de atenção especial e abordou-as propondo soluções e analisando os compromissos envolvidos.
+
+As áreas específicas do domínio de front-end incluem Performance, Networking, HTML/CSS, Acessibilidade, Internacionalização, Segurança, Escalabilidade, etc
+
+<div className="mt-6 space-x-1 space-y-1 text-xs">
+  <strong className="font-medium">Seções relevantes do framework:</strong>
+  Arquitetura/Design de alto nível, Otimizações e Profundidade
+</div>
+
+## Exploração e Comprometimentos
+
+- Ofereceu várias soluções possíveis para os problemas em questão e explicou os prós e contras de cada solução.
+  - O "problema" aqui não se refere necessariamente à questão de design do sistema.
+  - Ao resolver a pergunta dada, haverá problemas menores para resolver e perguntas para responder, e cada problema/pergunta menor pode ter várias soluções e escolhas a serem feitas.
+- Explicou a adequação das soluções considerando o contexto e os requisitos, e forneceu recomendações para o contexto da pergunta.
+  - Não insista que só existe uma solução possível. Boas perguntas geralmente têm algumas soluções possíveis, onde a adequação de cada uma depende do contexto.
+  - Mesmo que as outras soluções sejam claramente e obviamente ruins, ainda mencione-as e explique brevemente por que são inadequadas.
+
+<div className="mt-6 space-x-1 space-y-1 text-xs">
+  <strong className="font-medium">Seções relevantes do framework:</strong>
+  Exploração de Requisitos, Modelo de Dados, Definição de Interface, Otimizações
+  e Análise Detalhada
+</div>
+
+## Sentido de Produto e Experiência do Usuário (UX)
+
+Seções relevantes do framework: **Otimizações e Aprofundamento**
+
+- Propôs uma solução robusta que estabelece as bases de um bom produto.
+- Considerou a experiência do usuário ao responder, incluindo estados de carregamento, desempenho (percebido ou real), compatibilidade com dispositivos móveis, facilidade de uso do teclado, entre outros aspectos.
+- Considerou casos de erro e sugeriu formas de lidar com eles.
+
+<div className="mt-6 space-x-1 space-y-1 text-xs">
+  <strong className="font-medium">Seções relevantes do framework:</strong>
+  Otimizações e Aprofundamento
+</div>
+
+## Comunicação e Colaboração
+
+- Transmitiu seus pensamentos e ideias de forma clara e concisa.
+- Explicou conceitos complexos com facilidade.
+- Envolvido o entrevistador durante a sessão, fez boas perguntas e buscou opiniões quando relevante.
+- Aberto a feedback do entrevistador e incorpora o feedback para aprimorar suas soluções.
+
+<div className="mt-6 space-x-1 space-y-1 text-xs">
+  <strong className="font-medium">Seções relevantes do framework:</strong>
+  Arquitetura/Design de alto nível, Modelo de dados, Definição de interface, Otimizações
+  e Aprofundamento
+</div>
+
+## Resumo
+
+Aqui está uma tabela resumindo como os eixos de avaliação podem ser mapeados para as várias seções do **RADIO framework**: Exploração de Requisitos, Arquitetura/Design de Alto Nível, Modelo de Dados, Definição de Interface, Otimizações e Aprofundamento.
+
+| Eixo                      |  R  |  A  |  D  |  I  |  O  |
+| ------------------------- | :-: | :-: | :-: | :-: | :-: |
+| Exploração de Problemas   | ✅  |  -  |  -  |  -  |  -  |
+| Arquitetura               |  -  | ✅  | ✅  | ✅  |  -  |
+| Proficiência Técnica      |  -  | ✅  |  -  |  -  | ✅  |
+| Exploração e Compromissos |  -  | ✅  | ✅  | ✅  | ✅  |
+| Sentido de produto e UX   |  -  |  -  |  -  |  -  | ✅  |
+| Comunicação e Colaboração | ✅  | ✅  | ✅  | ✅  | ✅  |
diff --git a/packages/system-design/contents/evaluation-axes/zh-CN.mdx b/packages/system-design/contents/evaluation-axes/zh-CN.mdx
new file mode 100644
index 0000000000..3d1e1db418
--- /dev/null
+++ b/packages/system-design/contents/evaluation-axes/zh-CN.mdx
@@ -0,0 +1,101 @@
+---
+title: 前端系统设计面试的评估标准
+description: 面试官在前端系统设计面试中寻找的特定行为和信号。
+seo_title: 面试评估标准 | 前端系统设计手册
+social_title: 前端系统设计面试的评估标准 | GreatFrontEnd
+seo_description: 大公司面试官通常用来评估前端系统设计面试的评估标准。
+---
+
+在面试过程中，面试官会观察候选人所表现出的信号，然后给出整体的招聘和定级建议。候选人表现出的期望行为越多，面试官推荐“聘用”决定的可能性就越高。答案越详细、越成熟，定级建议就越高。
+
+本节列出了候选人应表现出的一些行为。在您回答系统设计问题时请记住这些行为，并在面试中自信地展示它们。
+
+## 问题探索
+
+* 表现出对问题的透彻理解。
+* 通过提出相关的澄清问题充分探索需求，以最大限度地减少歧义。
+* 收集问题的、功能性和非功能性需求。
+* 定义问题的范围。
+* 确定要关注和解决的问题的重要方面。
+
+<div className="mt-6 space-x-1 space-y-1 text-sm">
+  <strong className="font-medium">相关框架章节：</strong>
+  需求探索
+</div>
+
+## 架构
+
+* 开发了一个能够充分解决整个问题的架构。
+* 将问题分解为具有适当粒度的较小独立部分。
+* 确定系统的组件并清晰地定义其职责。
+* 阐明这些组件将如何协同工作，并定义/描述这些组件之间的 API。
+* 开发了一个可以付诸实践的架构。
+* 开发了一个考虑到可扩展性和可重用性的架构，该架构可以扩展以支持未来的需求。
+
+<div className="mt-6 space-x-1 space-y-1 text-sm">
+  <strong className="font-medium">相关框架章节：</strong>
+  架构/高层设计、数据模型、接口定义
+</div>
+
+## 技术熟练度
+
+* 表现出对前端基础知识、常用技术和 API 的技术知识和熟练程度。
+* 能够深入研究与问题相关的前端特定领域。
+* 确定需要特别注意的领域，并通过提出解决方案并分析其权衡来解决这些领域。
+
+*前端领域包括性能、网络、HTML/CSS、可访问性、国际化、安全性、可扩展性等*
+
+<div className="mt-6 space-x-1 space-y-1 text-sm">
+  <strong className="font-medium">相关框架章节：</strong>
+  架构/高层设计、优化和深入研究
+</div>
+
+## 探索和权衡
+
+* 针对手头的问题提供了各种可能的解决方案，并解释了每种解决方案的优缺点。
+  * 这里的“问题”不一定指给定的系统设计问题。
+  * 在解决给定的问题时，会有需要解决/回答的较小问题，并且每个小问题/问题都可以有各种解决方案和选择。
+* 解释了给定上下文和需求的解决方案的适用性，并为问题的上下文提供了建议。
+  * 不要坚持只有一个可能的解决方案。好的问题通常有几个可能的解决方案，其中每个解决方案的适用性取决于上下文。
+  * 即使其他解决方案明显很糟糕，也请提及它们并简要解释它们为什么不好。
+
+<div className="mt-6 space-x-1 space-y-1 text-sm">
+  <strong className="font-medium">相关框架部分：</strong>
+  需求探索、数据模型、接口定义、优化和深入研究
+</div>
+
+## 产品和用户体验意识
+
+* 提出了一个稳健的解决方案，为优秀的产品奠定了基础。
+* 在回答问题时考虑了用户体验：加载状态、性能（感知或实际）、移动友好性、键盘友好性等。
+* 考虑了错误情况并提出了处理方法。
+
+<div className="mt-6 space-x-1 space-y-1 text-sm">
+  <strong className="font-medium">相关框架部分：</strong>
+  优化和深入研究
+</div>
+
+## 沟通与协作
+
+* 清楚简洁地表达了他们的想法和观点。
+* 轻松解释了复杂的概念。
+* 在会议期间与面试官互动，提出好的问题，并在相关情况下征求意见。
+* 接受面试官的反馈，并将反馈纳入其中以完善他们的解决方案。
+
+<div className="mt-6 space-x-1 space-y-1 text-sm">
+  <strong className="font-medium">相关框架部分：</strong>
+  架构/高层设计、数据模型、接口定义、优化和深入研究
+</div>
+
+## 总结
+
+下表总结了评估轴如何映射到 **RADIO 框架** 的各个部分：需求探索、架构/高层设计、数据模型、接口定义、优化和深入研究。
+
+| 轴 |  R  |  A  |  D  |  I  |  O  |
+| ------------------------------- | :-: | :-: | :-: | :-: | :-: |
+| 问题探索 | ✅  |  -  |  -  |  -  |  -  |
+| 架构 |  -  | ✅  | ✅  | ✅  |  -  |
+| 技术熟练程度 |  -  | ✅  |  -  |  -  | ✅  |
+| 探索和权衡 |  -  | ✅  | ✅  | ✅  | ✅  |
+| 产品和用户体验意识 |  -  |  -  |  -  |  -  | ✅  |
+| 沟通与协作 | ✅  | ✅  | ✅  | ✅  | ✅  |
diff --git a/packages/system-design/contents/framework/en-US.langnostic.json b/packages/system-design/contents/framework/en-US.langnostic.json
new file mode 100644
index 0000000000..1698b7a4fd
--- /dev/null
+++ b/packages/system-design/contents/framework/en-US.langnostic.json
@@ -0,0 +1,204 @@
+{
+  "frontmatter": {
+    "title": "552eeef9",
+    "description": "4427dfff",
+    "seo_title": "efdb603e",
+    "social_title": "f3c6b946",
+    "seo_description": "7278dbf6"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "478e0bff",
+        "9746ae2a",
+        "7fce111a",
+        "f8ebfb03",
+        "b5e6c41e",
+        "bb871ac0",
+        "2b76a235",
+        "709ce433",
+        "e59efbf5",
+        "bdab5a83",
+        "898b7d7b",
+        "c4eb45f2",
+        "73d770ac",
+        "e87661d2",
+        "fb14e289",
+        "ca0a950f",
+        "a4e3385",
+        "a63c8972",
+        "98e9468",
+        "1672db9c",
+        "67172dc5",
+        "382d5d02",
+        "441d74c3",
+        "ec63fb73",
+        "91cc4f97",
+        "5d960a90",
+        "e5a3154d",
+        "2a7816d0",
+        "e047d9f0",
+        "8928c793",
+        "1431bbe2",
+        "62fde6f1",
+        "57018474",
+        "3726d095",
+        "b963df66",
+        "88582392",
+        "69d86bfc",
+        "68a0601f",
+        "596c7a77",
+        "caed9d8e",
+        "f44ef58b",
+        "b89f3dff",
+        "17476c2e",
+        "f1f61e3d",
+        "fc3031c3",
+        "2a7816d0",
+        "b9f3fd8c",
+        "53818197",
+        "d4dd9558",
+        "418e7a65",
+        "797c236f",
+        "2451695f",
+        "d8bd6241",
+        "cde922c3",
+        "a2eb6df4",
+        "f79d8df9",
+        "274db8e9",
+        "d90ae5c9",
+        "dd56c10e",
+        "ccb76817",
+        "1f927239",
+        "2a7816d0",
+        "fec93fe5",
+        "facf1276",
+        "ed753860",
+        "df95f1e2",
+        "80a42054",
+        "5175515d",
+        "7753389c",
+        "775df49",
+        "cb2fa491",
+        "eee8e84b",
+        "756f3951",
+        "d0a20604",
+        "f5395f42",
+        "1139dcd1",
+        "c35cf80b",
+        "e7a64ca8",
+        "b426ab3d",
+        "2a7816d0",
+        "84fb1fa5",
+        "4cf6de5a",
+        "ef821638",
+        "7cf98f3c",
+        "8ae8c685",
+        "b5347d4f",
+        "92417292",
+        "438772a9",
+        "5f653c52",
+        "2a7816d0",
+        "67a1d4f3",
+        "7f3e45c1"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "478e0bff",
+        "9746ae2a",
+        "7fce111a",
+        "f8ebfb03",
+        "b5e6c41e",
+        "bb871ac0",
+        "2b76a235",
+        "709ce433",
+        "e59efbf5",
+        "bdab5a83",
+        "898b7d7b",
+        "c4eb45f2",
+        "73d770ac",
+        "e87661d2",
+        "fb14e289",
+        "ca0a950f",
+        "a4e3385",
+        "a63c8972",
+        "98e9468",
+        "1672db9c",
+        "67172dc5",
+        "382d5d02",
+        "441d74c3",
+        "ec63fb73",
+        "91cc4f97",
+        "5d960a90",
+        "e5a3154d",
+        "2a7816d0",
+        "e047d9f0",
+        "8928c793",
+        "1431bbe2",
+        "62fde6f1",
+        "57018474",
+        "3726d095",
+        "b963df66",
+        "88582392",
+        "69d86bfc",
+        "68a0601f",
+        "596c7a77",
+        "caed9d8e",
+        "f44ef58b",
+        "b89f3dff",
+        "17476c2e",
+        "f1f61e3d",
+        "fc3031c3",
+        "2a7816d0",
+        "b9f3fd8c",
+        "53818197",
+        "d4dd9558",
+        "418e7a65",
+        "797c236f",
+        "2451695f",
+        "d8bd6241",
+        "cde922c3",
+        "a2eb6df4",
+        "f79d8df9",
+        "274db8e9",
+        "d90ae5c9",
+        "dd56c10e",
+        "ccb76817",
+        "1f927239",
+        "2a7816d0",
+        "fec93fe5",
+        "facf1276",
+        "ed753860",
+        "df95f1e2",
+        "80a42054",
+        "5175515d",
+        "7753389c",
+        "775df49",
+        "cb2fa491",
+        "eee8e84b",
+        "756f3951",
+        "d0a20604",
+        "f5395f42",
+        "1139dcd1",
+        "c35cf80b",
+        "e7a64ca8",
+        "b426ab3d",
+        "2a7816d0",
+        "84fb1fa5",
+        "4cf6de5a",
+        "ef821638",
+        "7cf98f3c",
+        "8ae8c685",
+        "b5347d4f",
+        "92417292",
+        "438772a9",
+        "5f653c52",
+        "2a7816d0",
+        "67a1d4f3",
+        "7f3e45c1"
+      ]
+    }
+  }
+}
diff --git a/packages/system-design/contents/framework/en-US.mdx b/packages/system-design/contents/framework/en-US.mdx
new file mode 100644
index 0000000000..5f3b23bc96
--- /dev/null
+++ b/packages/system-design/contents/framework/en-US.mdx
@@ -0,0 +1,265 @@
+---
+title: The RADIO Framework
+description: Approach your front end system design interviews in a structured fashion. A good structure is half the battle won.
+seo_title: The RADIO Framework | Front End System Design Playbook
+social_title: The RADIO Framework for structuring Front End System Design answers | GreatFrontEnd
+seo_description: A robust framework developed to help you answer front end system design interview questions in a structured fashion.
+---
+
+A good beginning is half the battle won. By using the **RADIO framework** to answer front end system design questions, you will already be much closer to acing your interview.
+
+In the context of front end system design interviews, the systems you are asked to design tend to be products, so we'll refer to the system as "product" from here on. Start by understanding the **R**equirements, defining the high level **A**rchitecture and the **D**ata Model. Then define the **I**nterfaces between the components in the product and talk about any **O**ptimizations or dive deep into specific areas which require special attention.
+
+## What is RADIO about?
+
+1. **Requirements exploration**: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions
+1. **Architecture / High-level design**: Identify the key components of the product and how they are related to each other
+1. **Data model / Core entities**: Describe the core entities and its data – the fields each entity contains and which component(s) they belong to
+1. **Interface definition (API)**: Define the interface (API) between components in the product, functionality of each API, their parameters and responses
+1. **Optimizations and deep dive**: Discuss possible optimization opportunities and specific areas of interest when building the product
+
+## Requirements exploration
+
+**Objective**: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions.
+
+**Recommended duration**: Not more than 15% of the session.
+
+System design interview questions are open-ended in nature and are usually vague and under-specified on purpose. **You are required to dig deeper and clarify ambiguities in the problem by asking useful questions.** Treat your interviewer as a product manager you are working with on a new project, ask enough questions so that you know what problems you are trying to solve and what you need to build. In reality, some problems can be solved without any engineering at all!
+
+No two system design interview experiences will be the same even if you have been asked the same question before. Interviewers have different backgrounds and might prioritize different aspects of the system. Take this chance to find out what they are most interested in and plan your answers accordingly.
+
+Some general questions you should get answers to before moving on to the next part of the interview:
+
+### What are the main use cases we should be focusing on?
+
+Imagine you were asked to "Design Facebook". Facebook is a huge platform, there's news feed, profiles, friends, groups, stories, and more. Which parts of Facebook should you focus on? The interviewer has the answer in mind but wants you to find out by asking questions. Typically you should focus on the most unique aspects of the product, the features which define it. For Facebook, it would be the news feed, pagination of the feed, and creating new posts. For YouTube, it would be the video-watching experience. The important areas for other type of products be found in the [types of questions](/system-design/types-of-questions#examples).
+
+For the rest of this page, we'll be using "Design Facebook" as the problem and apply the framework to it.
+
+Let's assume you didn't clarify which parts of the product to focus on and you assumed you should talk about the befriending flow and started talking about it. In the best case, good interviewers will steer you back in the direction the question was meant to proceed, but they will make a mental note that you didn't clarify the question. In the worst case, inexperienced interviewers will let you keep talking and politely try to find an opportunity to correct you, but you would have already wasted some precious minutes discussing an unimportant topic.
+
+### What are the functional requirements and non-functional requirements?
+
+Firstly, what are functional and non-functional requirements?
+
+- **Functional requirements**: Basic requirements of the product such that the product cannot function without them. This is usually whether a user can complete the core flows correctly.
+- **Non-functional requirements**: Requirements that are viewed as improvements to the product, but not strictly required for the product to be usable, i.e. the product can still be used without these. These include performance (how fast the page loads, how fast an interaction takes), scalability (how many items can be present on the page before the page slows to a crawl), good user experience, etc.
+
+There are two ways you can get the answer to this question:
+
+1. Take the initiative to list out what you think are the requirements and get feedback and alignment from the interviewer (Preferred).
+1. Ask the interviewer directly. However, most of the time they'd want you to define them. Even if they give you an answer, it won't be too detailed.
+
+At the very minimum, your design has to meet the functional requirements. After meeting all the function requirements, move on to talk about how to fulfill the non-functional requirements.
+
+### What are the core features to focus on and which are good-to-have?
+
+Even after you know the functional requirements, there can still be a ton of small features that make up the large feature. For example, when creating new Facebook posts, what kind of post formats should be supported? Besides the usual text-based posts, should the user be able to upload photos, upload videos, create polls, check in to a location, etc.
+
+You should clarify the core features beforehand and design for them before moving on to the extra features.
+
+### Other questions:
+
+- What devices/platforms (desktop/tablet/mobile) need to be supported?
+- Is offline support necessary?
+- Who are the main users of the product?
+- What are the performance requirements, if any? Performance requirements typically fall under non-functional requirements
+
+The questions above should give you a good starting list but it is by no means an exhaustive list! Different problems will require you to ask domain-specific questions, which we will talk about in the case studies.
+
+You are recommended to write down the agreed requirements somewhere so that you can refer to them throughout the interview and ensure that you've covered them.
+
+---
+
+## Architecture / High-level design
+
+**Objective**: Identify the key components of the product and how they are related to each other.
+
+**Recommended duration**: Roughly 20% of the session.
+
+With the requirements in mind, we can move on to the architecture design proper. Your next task is to come up with a product/system architecture by identifying the key components of the product, how the components interact with each other, and how they are related. Remember to focus on the **client-side architecture**, not the back end.
+
+Diagrams are your friends here. Each component can be represented using a rectangle and your high-level design usually ends up looking like a few rectangular boxes with arrows between them to demonstrate the flow of data. It is also possible to have components within components, in that case, draw the parent using bigger rectangles since they need to fit multiple subcomponents.
+
+Examples of components/modules which are commonly found in a high-level front end design:
+
+- **Server**: In front end system design interviews, we can treat the server as a black box and assume it exposes some APIs you can call via HTTP/WebSockets.
+- **View**: This represents what the user sees, and it usually contains smaller subviews within it. Can contain client-side only state.
+- **Controller**: The module which responds to user interactions and processes the data from the store/model in a format the view expects. This module is not always needed if the application is small and there's not much passing of data between modules.
+- **Model/Client store**: Where the data lives. Stores contain data which will be presented to the user via views and stores tend to be app-wide in an interview context. In reality, you can have multiple stores within an application and stores can contain other stores.
+
+Other things to consider when defining the responsibilities of components:
+
+- **Separation of concerns**: Components are meant to be modular and serve to encapsulate a set of functionality and data. Consider the purpose/functionality of each component, what data it should contain and how it can service the rest of the system (what it can do for the other components).
+- **Where computation should occur**: If some amount of computation is needed (e.g. filtering of results given a search term, calculating the total amount for a cart), should the work be done on the server or the client? There are tradeoffs to each approach and the decision is both product-dependent and context-dependent.
+
+It is important to realize that not every common component mentioned above will be relevant and necessary for every product, it depends on the unique aspects of the product.
+
+After drawing out the architecture diagram, verbally describe the responsibilities of each component (box in the diagram).
+
+### Architecture example
+
+Here's an example architecture diagram for the [News Feed](/questions/system-design/news-feed-facebook) question drawn using Excalidraw.
+
+![Example architecture diagram](/img/questions/news-feed-facebook/news-feed-architecture.png)
+
+#### Component responsibilities
+
+- **Server**: Serves feed data and provides a HTTP API for new feed posts to be created.
+- **Controller**: Controls the flow of data within the application and makes network requests to the server.
+- **Client store**: Stores data needed across the whole application. In the context of a news feed, most of the data in the store will be server-originated data needed by the feed UI.
+- **Feed UI**: Contains a list of feed posts and the UI for composing new posts.
+  - **Feed post**: Presents the data for a feed post and contains buttons to interact with the post (like/react/share/comment).
+  - **Post composer**: UI for users to create new feed posts.
+
+Common free drawing tools that you might be asked to use include [diagrams.net](https://app.diagrams.net/) and [Excalidraw](https://excalidraw.com/). It'd be a good idea to familiarize yourself with these tools beforehand.
+
+---
+
+## Data model
+
+**Objective**: Describe the various data entities, the fields they contain and which component(s) they belong to.
+
+**Recommended duration**: Roughly 10% of the session.
+
+We now have to think about what data fields are present in the client. There are two kinds of data on client applications:
+
+### Server-originated data
+
+Data that originates from the server, usually from a database and meant to be seen by multiple people or accessed from multiple different devices. Common examples include user data (name, profile picture) and user-generated data (feed posts, comments).
+
+### Client-only data
+
+Client-only data, also commonly known as state, is data that only needs to live on the client and does not have to be sent to the server for writing into the database. Client data can be further broken down into two:
+
+- **Data to be persisted**: Usually user input such as data entered into form fields. These data usually has to be sent to the server and saved into a database for it to be useful.
+- **Ephemeral data**: Temporary state that lasts for a short time. Common examples include form validation state, current navigation tab, whether a section is expanded, etc. It's usually acceptable to lose these data when the browser tab is closed.
+
+When listing the data fields, it'd be useful to identify what kind of data that field is, whether it's server-originated data or client-only data.
+
+### Data model example
+
+Here's a basic example of data model for the various entities using the [News Feed](/questions/system-design/news-feed-facebook) question.
+
+| Source | Entity | Belongs to | Fields |
+| --- | --- | --- | --- |
+| Server | `Post` | Feed Post | `id`, `created_time`, `content`, `image`, `author` (a `User`), `reactions` |
+| Server | `Feed` | Feed UI | `posts` (list of `Post`s), `pagination` (pagination metadata) |
+| Server | `User` | Client Store | `id`, `name`, `profile_photo_url` |
+| User input (client) | `NewPost` | Feed Composer UI | `message`, `image` |
+
+Depending on how far you progress along in the question and how the requirements have evolved and grown during the interview, you might need to add more fields. It's a dynamic and iterative process.
+
+You might want to write these fields near the components which owns them in your architecture diagram.
+
+---
+
+## Interface definition (API)
+
+**Objective**: Define the interface between components in the product, functionality of the various APIs, their parameters and responses.
+
+**Recommended duration**: Roughly 15% of the session.
+
+With the components and data within each components, we can move on to discuss the interface (APIs) between the components. API is an overloaded term and generally refer to the protocol which software components communicate and request/send data between components. Client and server communicate via network layer APIs (HTTP/WebSockets). Client components generally communicate via functions in the browser runtime. All APIs have three things in common whether they are between the server and the client or between client components:
+
+| Parts of an API | Server-client | Client-client |
+| --- | --- | --- |
+| Name and functionality | HTTP path | JavaScript function |
+| Parameters | HTTP GET query and POST parameters | Function parameters |
+| Return Value | HTTP response, typically JSON format | Function return value |
+
+### Server-client API example
+
+Using the [News Feed system design](/questions/system-design/news-feed-facebook) example yet again, we have a server API that allows the client to fetch the latest feed posts.
+
+| Field       | Value                                |
+| ----------- | ------------------------------------ |
+| HTTP Method | `GET`                                |
+| Path        | `/feed`                              |
+| Description | Fetches the feed results for a user. |
+
+#### Parameters
+
+A feed response is a paginated list so the API expects pagination parameters.
+
+```json
+{
+  "size": 10,
+  "cursor": "=dXNlcjpXMDdRQ1JQQTQ"
+}
+```
+
+#### Response
+
+```json
+{
+  "pagination": {
+    "size": 10,
+    "next_cursor": "=dXNlcjpVMEc5V0ZYTlo"
+  },
+  "results": [
+    {
+      "id": "123",
+      "author": {
+        "id": "456",
+        "name": "John Doe"
+      },
+      "content": "Hello world",
+      "image": "https://www.example.com/feed-images.jpg",
+      "reactions": {
+        "likes": 20,
+        "haha": 15
+      },
+      "created_time": 1620639583
+    }
+    // ... More posts.
+  ]
+}
+```
+
+### Client-client API example
+
+The client-client API can be written in a similar fashion as the server-client API, main difference being they are JavaScript functions, or events that are being listened to. The most important parts to describe are the functionality of the API, the parameters and the return/response value.
+
+### API for UI component system design
+
+If you're asked to design a UI component, for the "Interface" section, discuss the customization options for the component, similar to the props of a React component.
+
+---
+
+## Optimizations and deep dive
+
+**Objective**: Discuss about possible optimization opportunities and specific areas of interest when building the product.
+
+**Recommended duration**: Roughly 40% of the session.
+
+There's no fixed way to go about the optimization and deep dive section and you are free to focus on different areas of the product. There will not be sufficient time to cover every area, so select how you want to spend your time carefully according to these guidelines:
+
+- **Focus on the important areas of the product**: For e-commerce websites, performance is crucial and you'd want to spend the bulk of your time diving into the various performance optimizations that can be done. For collaborative editors, the complexity is in how to handle race conditions and concurrent modifications, so you'd want to focus on explaining that.
+- **Focus on your strengths**: Showcase your domain knowledge. If you are well-versed in accessibility, talk about the various accessibility pitfalls that can occur in the product and how to address them. Impress the interviewer with your knowledge. If you are a performance guru, explain the various performance optimization opportunities that can provide a buttery smooth user experience.
+
+### General optimization / Deep dive areas
+
+Here's a list of topics you can talk about for this section. Bear in mind that the importance of a topic depends on the product and some topics are entirely irrelevant to certain products (possible but unlikely).
+
+- Performance
+- User Experience
+- Network
+- Accessibility (a11y)
+- Multilingual Support
+- Multi-device Support
+- Security
+
+Refer to our [Best Practices for Building User Interfaces Guide](/front-end-interview-guidebook/user-interface-questions-cheatsheet) for details on each topic.
+
+---
+
+## Summary
+
+| Step | Objective | Recommended duration |
+| --- | --- | --- |
+| Requirements exploration | Understand the problem thoroughly and determine the scope by asking a number of clarifying questions. | &lt;15% |
+| Architecture / High-level design | Identify the key components of the product and how they are related to each other. | ~20% |
+| Data model | Describe the various data entities, the fields they contain and which component(s) they belong to. | ~10% |
+| Interface definition (API) | Define the interface (API) between components in the product, functionality of each APIs, their parameters and responses. | ~15% |
+| Optimizations and deep dive | Discuss about possible optimization opportunities and specific areas of interest when building the product. | ~40% |
diff --git a/packages/system-design/contents/framework/pt-BR.mdx b/packages/system-design/contents/framework/pt-BR.mdx
new file mode 100644
index 0000000000..d8c6d7af22
--- /dev/null
+++ b/packages/system-design/contents/framework/pt-BR.mdx
@@ -0,0 +1,264 @@
+---
+title: Framework RADIO
+description: Aborde suas entrevistas de design de sistemas front-end de forma estruturada. Uma boa estrutura é meio caminho andado.
+seo_title: Framework RADIO para Design de Sistemas | Aplicável a Qualquer Entrevista de Design de Sistemas Front-End
+seo_description: Aplique o framework RADIO a entrevistas de design de sistemas front-end para se orientar de maneira estruturada. Uma boa estrutura é meio caminho andado.
+---
+
+Uma boa estrutura é meio caminho andado. Ao utilizar o **framework RADIO** para responder perguntas de design de sistemas front-end, você estará muito mais próximo de ter sucesso na sua entrevista.
+
+No contexto de entrevistas de design de sistemas de front-end, os sistemas que você é solicitado a projetar tendem a ser produtos, então vamos nos referir ao sistema como "produto" daqui em diante. Comece compreendendo os **R**equisitos, definindo a **A**rquitetura de alto nível e o Modelo de **D**ados. Em seguida, defina as **I**nterfaces entre os componentes no produto e fale sobre quaisquer **O**timizações ou aprofunde-se em áreas específicas que requerem atenção especial.
+
+## Do que se trata o RADIO?
+
+1.  **Exploração de Requisitos**: Compreenda completamente o problema e determine o escopo fazendo uma série de perguntas esclarecedoras.
+2.  **Arquitetura/Design de Alto Nível**: Identifique os principais componentes do produto e como eles estão relacionados entre si.
+3.  **Modelo de Dados**: Descreva as diversas entidades de dados, os campos que elas contêm e a(s) componente(s) a que pertencem.
+4.  **Definição de Interface (API)**: Defina a interface (API) entre os componentes no produto, a funcionalidade de cada API, seus parâmetros e respostas.
+5.  **Otimizações e Aprofundamento**: Discuta possíveis oportunidades de otimização e áreas específicas de interesse ao construir o produto.
+
+## Exploração de Requisitos
+
+**Objetivo**: Compreender completamente o problema e determinar o escopo fazendo uma série de perguntas esclarecedoras.
+
+**Duração Recomendada**: Não mais do que 15% da sessão.
+
+As perguntas de entrevistas de design de sistemas são abertas por natureza e geralmente são propositalmente vagas e pouco especificadas. **Você deve se aprofundar e esclarecer ambiguidades no problema fazendo perguntas úteis.** Trate seu entrevistador como um gerente de produto com quem você está trabalhando em um novo projeto, faça perguntas suficientes para entender quais problemas você está tentando resolver e o que você precisa construir. Na realidade, alguns problemas podem ser resolvidos sem qualquer engenharia envolvida!
+
+Nenhuma experiência de entrevista de design de sistemas é igual, mesmo que você possa ser questionado sobre a mesma pergunta. Os entrevistadores têm diferentes formações e podem priorizar aspectos diferentes do sistema. Aproveite essa oportunidade para descobrir o que eles estão mais interessados e planeje suas respostas de acordo.
+
+Algumas perguntas gerais das quais você deve obter respostas antes de prosseguir para a próxima parte da entrevista são:
+
+### Em quais casos de uso principais devemos nos concentrar?
+
+Imagine que você foi solicitado a "Projetar o Facebook". O Facebook é uma plataforma enorme, envolvendo recursos como feed de notícias, perfis, amigos, grupos, histórias e muito mais. Em qual parte do Facebook você deve se concentrar? O entrevistador tem a resposta em mente, mas quer que você descubra fazendo perguntas. Normalmente, você deve se concentrar nos aspectos mais únicos do produto, ou seja, nas características que o definem. Para o Facebook, seriam o feed de notícias, a paginação do feed e a criação de novas postagens. Para o YouTube, seria a experiência de assistir vídeos. As áreas importantes para outros tipos de produtos podem ser encontradas nos [tipos de perguntas](/system-design/types-of-questions).
+
+No restante desta página, usaremos "Projetar o Facebook" como o problema e aplicaremos a estrutura a ele.
+
+Vamos supor que você não tenha esclarecido em quais partes do produto focar, assumiu que deveria falar sobre o fluxo de amizade e começou a falar sobre isso. No melhor caso, bons entrevistadores irão direcioná-lo de volta na direção em que a pergunta foi originalmente destinada, mas eles irão tomar nota mental de que você não esclareceu a pergunta. No pior caso, entrevistadores inexperientes podem permitir que você continue falando e tentar educadamente encontrar uma oportunidade para corrigi-lo, mas você já terá perdido alguns minutos preciosos discutindo um tópico não importante.
+
+### Quais são os requisitos funcionais e requisitos não funcionais?
+
+Em primeiro lugar, o que são requisitos funcionais e não funcionais?
+
+- **Requisitos funcionais**: Requisitos básicos do produto de forma que o produto não possa funcionar sem eles. Isso geralmente se refere à capacidade do usuário de concluir corretamente as principais etapas do fluxo.
+- **Requisitos não funcionais**: São requisitos que são considerados melhorias para o produto, mas não são estritamente necessários para que o produto seja utilizável. Ou seja, o produto ainda pode ser utilizado sem esses requisitos. Isso inclui desempenho (quão rápido a página carrega, quão rápido a interação ocorre), escalabilidade (quantos itens podem estar presentes na página), boa experiência do usuário, entre outros.
+
+Existem duas maneiras pelas quais você pode obter a resposta para essa pergunta:
+
+1.  Assuma a iniciativa de listar o que você acredita serem os requisitos e obter feedback e alinhamento do entrevistador (preferível).
+2.  Pergunte diretamente ao entrevistador. No entanto, na maioria das vezes, eles esperam que você os defina. Mesmo que eles forneçam uma resposta, ela não será muito detalhada.
+
+No mínimo, o seu design deve atender aos requisitos funcionais. Após atender a todos os requisitos funcionais, passe a falar sobre como atender aos requisitos não funcionais.
+
+### Quais são os principais recursos para focar e quais são bons de se ter?
+
+Mesmo depois de conhecer os requisitos funcionais, ainda pode haver uma infinidade de pequenos recursos que compõem o recurso principal. Por exemplo, ao criar novas postagens no Facebook, que tipos de formatos de postagens devem ser suportados? Além das postagens usuais baseadas em texto, se o usuário puder fazer upload de fotos, fazer upload de vídeos, criar enquetes, fazer check-in em um local etc.
+
+Você deve esclarecer os recursos principais antecipadamente e projetar para eles antes de passar para os recursos extras.
+
+### Outras questões:
+
+- Quais dispositivos/plataformas (desktop, tablet, mobile) precisam ser suportados?
+- O suporte offline é necessário?
+- Quem são os principais usuários do produto?
+- Quais são os requisitos de desempenho, se houver? (Requisitos de desempenho geralmente se enquadram nos requisitos não funcionais.)
+
+A lista acima deve fornecer uma boa lista inicial de perguntas, mas não é uma lista exaustiva! Problemas diferentes exigirão que você faça perguntas específicas do domínio, o que abordaremos nos estudos de caso.
+
+Recomenda-se que você registre os requisitos acordados em algum lugar para poder consultá-los durante toda a entrevista e garantir que tenha abordado todos eles.
+
+---
+
+## Arquitetura/Design de Alto Nível
+
+**Objetivo**: Identificar os principais componentes do produto e como eles estão relacionados entre si.
+
+**Duração recomendada**: Aproximadamente 20% da sessão.
+
+Com os requisitos em mente, podemos passar para o projeto de arquitetura propriamente dito. Sua próxima tarefa é criar uma arquitetura de produto/sistema identificando os principais componentes do produto, como os componentes interagem entre si e como estão relacionados. Lembre-se de focar na **arquitetura do lado do cliente**, não no backend.
+
+Diagramas são seus amigos nesse caso. Cada componente pode ser representado usando um retângulo, e o design de alto nível geralmente acaba parecendo alguns retângulos conectados por setas para demonstrar o fluxo de dados. Também é possível ter componentes dentro de componentes. Nesse caso, desenhe o componente pai usando retângulos maiores, já que eles precisam abrigar vários subcomponentes.
+
+Aqui estão alguns exemplos de componentes/módulos comumente encontrados em um design de front-end de alto nível:
+
+- **Servidor**: Em entrevistas de design de sistemas front-end, podemos tratar o servidor como uma caixa preta e assumir que ele expõe algumas APIs que você pode chamar por meio de HTTP/WebSockets.
+- **View**: Isso representa o que o usuário vê e geralmente contém subvisualizações menores dentro dele. Pode conter estados exclusivos do lado do cliente.
+- **Controlador**: O módulo que responde às interações do usuário e processa os dados do armazenamento/modelo em um formato esperado pela visualização. Esse módulo nem sempre é necessário se a aplicação for pequena e não houver muita troca de dados entre os módulos.
+- **Store do Modelo/Cliente**: Onde os dados estão. Os armazenamentos contêm os dados que serão apresentados ao usuário por meio das visualizações e, em um contexto de entrevista, os armazenamentos tendem a abranger toda a aplicação. Na realidade, é possível ter vários armazenamentos dentro de uma aplicação, e os armazenamentos podem conter outros armazenamentos.
+
+Outros aspectos a serem considerados ao definir as responsabilidades dos componentes:
+
+- **Separação de Responsabilidades**: Os componentes devem ser modulares e servir para encapsular um conjunto de funcionalidades e dados. Considere o propósito/funcionalidade de cada componente, quais dados ele deve conter e como ele pode servir ao restante do sistema (o que ele pode fazer pelos outros componentes).
+- Onde a computação deve ocorrer: Se for necessária alguma quantidade de computação (por exemplo, filtrar resultados com base em um termo de pesquisa, calcular o valor total de um carrinho), o trabalho deve ser feito no servidor ou no cliente? Existem compensações para cada abordagem, e a decisão depende tanto da pergunta específica quanto do contexto em que ela é aplicada.
+
+É importante perceber que nem todos os componentes comuns mencionados acima serão relevantes e necessários para todas as perguntas, isso depende do produto em questão.
+
+Após desenhar o diagrama de arquitetura, descreva verbalmente as responsabilidades de cada componente (caixa no diagrama).
+
+### Exemplo de Arquitetura
+
+Aqui está um exemplo de diagrama de arquitetura para a pergunta do News Feed, desenhado usando o Excalidraw.
+
+![Diagrama de arquitetura de exemplo](/img/questions/news-feed-facebook/news-feed-architecture.png)
+
+#### Responsabilidades do Componente
+
+- **Servidor**: Fornece os dados do feed e disponibiliza uma API HTTP para a criação de novas postagens no feed.
+- **Controlador**: Controla o fluxo de dados dentro da aplicação e faz solicitações de rede para o servidor.
+- **Armazenamento do Cliente**: Armazena dados necessários em toda a aplicação. No contexto de um feed de notícias, a maioria dos dados armazenados será originada do servidor e necessária para a interface do feed.
+- **Interface do Feed**: Contém uma lista de postagens do feed e a interface para compor novas postagens.
+  - **Feed Post**: Mostra os dados de uma publicação e contém botões para interagir com a publicação (como /react/share/comment).
+  - **Compositor de Postagens**: Interface do usuário para os usuários criarem novas postagens no feed.
+
+Algumas ferramentas de desenho gratuitas comuns que você pode ser solicitado a usar incluem [diagrams.net](https://app.diagrams.net/) e [Excalidraw](https://excalidraw.com/). Seria uma boa ideia se familiarizar com essas ferramentas antecipadamente.
+
+---
+
+## Modelo de Dados
+
+**Objetivo**: Descrever as diversas entidades de dados, os campos que elas contêm e a(s) componente(s) a que pertencem.
+
+**Duração Recomendada**: Aproximadamente 10% da sessão.
+
+Agora precisamos pensar nos campos de dados presentes no cliente. Existem dois tipos de dados em aplicativos cliente:
+
+### Dados originados no servidor
+
+Dados que se originam no servidor, geralmente de um banco de dados, e são destinados a serem vistos por várias pessoas ou acessados a partir de diferentes dispositivos. Exemplos comuns incluem dados do usuário (nome, foto de perfil) e dados gerados pelo usuário (publicações no feed, comentários).
+
+### Dados somente do cliente
+
+Dados exclusivos do cliente, também comumente conhecidos como estado, são dados que apenas precisam estar no cliente e não precisam ser enviados para o servidor para serem gravados no banco de dados. Os dados do cliente podem ser subdivididos em dois:
+
+- **Dados a serem persistidos**: Normalmente, entrada do usuário, como dados inseridos em campos de formulário. Esses dados geralmente precisam ser enviados para o servidor e salvos em um banco de dados para que sejam úteis.
+- Dados efêmeros: Estado temporário que dura por um curto período de tempo. Exemplos comuns incluem o estado de validação de um formulário, a aba atual, se uma seção está expandida, etc. Normalmente, é aceitável perder esses dados quando a guia do navegador é fechada.
+
+Ao listar os campos de dados, seria útil identificar que tipo de dados esse campo é, se é um dado originado pelo servidor ou apenas pelo cliente.
+
+### Exemplo de Modelo de Dados
+
+Aqui está um exemplo básico de modelo de dados para as várias entidades usando a pergunta [Feed de notícias](/questions/system-design/news-feed-facebook).
+
+| Fonte | Entidade | Pertence a | Campos |
+| --- | --- | --- | --- |
+| Servidor | `Post` | Postagem do Feed | `id`, `created_time`, `content`, `image`, `author` (`User`), `reactions` |
+| Servidor | `Feed` | Interface do Feed | `posts` (lista de `Posts`s), `pagination` (metadados de paginação) |
+| Servidor | `User` | Store do cliente | `id`, `nome`, `profile_photo_url` |
+| Entrada do usuário (cliente) | `NewPost` | Interface do Usuário (UI) do Feed Composer | `message`, `image` |
+
+Dependendo de quão longe você avança na pergunta e de como os requisitos evoluíram e cresceram durante a entrevista, você pode precisar adicionar mais campos. É um processo dinâmico e iterativo.
+
+Você pode querer escrever esses campos próximos aos componentes que os possuem no seu diagrama de arquitetura.
+
+---
+
+## Definição de Interface (API)
+
+**Objetivo**: Definir a interface entre os componentes do produto, funcionalidade das várias APIs, seus parâmetros e respostas.
+
+**Duração recomendada**: Aproximadamente 15% da sessão.
+
+Com os componentes e dados dentro de cada componente, podemos prosseguir para discutir a interface (APIs) entre os componentes. API é um termo sobrecarregado e geralmente se refere ao protocolo pelo qual os componentes de software se comunicam e solicitam/enviam dados entre si. Client and server communicate via network layer APIs (HTTP/WebSockets). Componentes do cliente geralmente se comunicam por meio de funções no tempo de execução do navegador. Todas as APIs têm três coisas em comum, quer estejam entre o servidor e o cliente ou entre componentes do cliente:
+
+| Partes de uma API | Servidor-Cliente | Client-Client |
+| --- | --- | --- |
+| Nome e funcionalidade | Caminho HTTP | Função JavaScript |
+| Parâmetros | Parâmetros HTTP GET e POST | Parâmetros da função |
+| Valor de retorno | Resposta HTTP, geralmente no formato JSON | Valor de retorno da função |
+
+### Exemplo de API de Servidor-Cliente
+
+Usando o exemplo [News Feed](/questions/system-design/news-feed-facebook) mais uma vez, nós temos uma API de servidor que permite que o cliente busque os últimos posts de feeds.
+
+| Campo       | Valor                                           |
+| ----------- | ----------------------------------------------- |
+| Método HTTP | `GET`                                           |
+| Caminho     | `/feed`                                         |
+| Descrição   | Recupera os resultados do feed para um usuário. |
+
+#### Parâmetros
+
+Uma resposta de feed é uma lista paginada, portanto, a API espera parâmetros de paginação.
+
+```json
+{
+  "size": 10,
+  "cursor": "=dXNlcjpXMDdRQ1JQQTQ"
+}
+```
+
+#### Resposta
+
+```json
+{
+  "pagination": {
+    "size": 10,
+    "next_cursor": "=dXNlcjpVMEc5V0ZYTlo"
+  },
+  "results": [
+    {
+      "id": "123",
+      "author": {
+        "id": "456",
+        "name": "João Silva"
+      },
+      "content": "Olá mundo",
+      "image": "https://www.example.com/feed-images.jpg",
+      "reactions": {
+        "likes": 20,
+        "haha": 15
+      },
+      "created_time": 1620639583
+    }
+    // . . Mais publicações.
+  ]
+}
+```
+
+### Exemplo de API Cliente-Cliente
+
+A API cliente-cliente pode ser escrita de maneira semelhante à API servidor-cliente, sendo a principal diferença que são funções JavaScript ou eventos que estão sendo ouvidos. As partes mais importantes para descrever são a funcionalidade da API, os parâmetros e o valor de retorno/resposta.
+
+### API para Design de Sistema de Componentes de UI
+
+Se você foi solicitado a projetar um componente de interface do usuário, na seção "Interface", discuta sobre as opções de personalização para o componente, semelhantes às props para componentes React.
+
+---
+
+## Otimizações e Análise Detalhada
+
+**Objetivo**: Discutir sobre possíveis oportunidades de otimização e áreas específicas de interesse ao construir o produto.
+
+**Duração Recomendada**: Aproximadamente 40% da sessão.
+
+Não há uma maneira fixa de abordar a seção de otimização e aprofundamento, e você está livre para se concentrar em diferentes áreas do produto. Não haverá tempo suficiente para abordar todas as áreas, portanto, selecione como deseja gastar seu tempo cuidadosamente de acordo com essas diretrizes:
+
+- **Foque nas áreas importantes do produto**. Para sites de comércio eletrônico, o desempenho é crucial e você gostaria de dedicar a maior parte do seu tempo a mergulhar nas várias otimizações de desempenho que podem ser feitas. Para editores colaborativos, a complexidade está em como lidar com condições de corrida e modificações concorrentes, portanto, você gostaria de se concentrar em explicar isso.
+- **Concentre-se nos seus pontos fortes.** Demonstre seu conhecimento no domínio. Se você está familiarizado com acessibilidade, fale sobre as várias armadilhas de acessibilidade que podem ocorrer no produto e como abordá-las. Impressionar o entrevistador com seu conhecimento. Se você é um especialista em desempenho, explique as várias oportunidades de otimização de desempenho que podem proporcionar uma experiência do usuário extremamente fluida.
+
+### Áreas gerais de otimização/aprofundamento
+
+Aqui está uma lista de tópicos sobre os quais você pode falar para esta seção. Tenha em mente que a importância de um tópico depende da pergunta e alguns tópicos são completamente irrelevantes para certas perguntas (possível, mas improvável).
+
+- Desempenho
+- Experiência de Usuário
+- Rede
+- Acessibilidade (a11y)
+- Suporte Multilíngue
+- Multi-device Support
+- Segurança
+
+Consulte nosso [Guia de Melhores Práticas para Construção de Interfaces de Usuário](/front-end-interview-guidebook/user-interface-questions-cheatsheet) para obter detalhes sobre cada tópico.
+
+---
+
+## Resumo
+
+| Etapa | Objetivo | Duração Recomendada |
+| --- | --- | --- |
+| Exploração de requisitos | Entenda o problema completamente e determine o escopo fazendo uma série de perguntas de esclarecimento. | \<15% |
+| Arquitetura/Design de Alto Nível | Identifique os principais componentes do produto e como eles estão relacionados entre si. | ~20% |
+| Modelo de Dados | Descreva as várias entidades de dados, os campos que elas contêm e a(s) qual(is) componente(s) elas pertencem. | ~10% |
+| Definição de Interface | Defina a interface (API) entre os componentes do produto, a funcionalidade de cada API, seus parâmetros e respostas. | ~15% |
+| Otimizações e Análise Detalhada | Discutir sobre possíveis oportunidades de otimização e áreas específicas de interesse ao construir o produto. | ~40% |
diff --git a/packages/system-design/contents/framework/zh-CN.mdx b/packages/system-design/contents/framework/zh-CN.mdx
new file mode 100644
index 0000000000..a539648f3f
--- /dev/null
+++ b/packages/system-design/contents/framework/zh-CN.mdx
@@ -0,0 +1,265 @@
+---
+title: RADIO 框架
+description: 以结构化的方式进行前端系统设计面试。一个好的结构是成功的一半。
+seo_title: RADIO 框架 | 前端系统设计实战
+social_title: 用于构建前端系统设计答案的 RADIO 框架 | GreatFrontEnd
+seo_description: 一个强大的框架，旨在帮助您以结构化的方式回答前端系统设计面试问题。
+---
+
+一个好的开始是成功的一半。通过使用 **RADIO 框架** 来回答前端系统设计问题，您将更接近于在面试中取得好成绩。
+
+在前端系统设计面试的背景下，您被要求设计的系统往往是产品，因此我们从这里开始将系统称为“产品”。首先要了解 **R**equirements（需求），定义高级 **A**rchitecture（架构）和 **D**ata Model（数据模型）。然后定义产品中组件之间的 **I**nterfaces（接口），并讨论任何 **O**ptimizations（优化）或深入研究需要特别关注的特定领域。
+
+## RADIO 是关于什么的？
+
+1. **需求探索**：彻底了解问题，并通过提出一些澄清问题来确定范围
+2. **架构/高级设计**：确定产品的关键组件以及它们之间的相互关系
+3. **数据模型/核心实体**：描述核心实体及其数据——每个实体包含的字段以及它们属于哪个（些）组件
+4. **接口定义（API）**：定义产品中组件之间的接口（API）、每个 API 的功能、它们的参数和响应
+5. **优化和深入研究**：讨论构建产品时可能的优化机会和特定感兴趣的领域
+
+## 需求探索
+
+**目标**：彻底了解问题，并通过提出一些澄清问题来确定范围。
+
+**建议时长**：不超过会话的 15%。
+
+系统设计面试问题本质上是开放式的，通常是模糊的，并且故意未充分说明。**您需要通过提出有用的问题来深入挖掘并澄清问题中的歧义。** 将您的面试官视为您正在合作进行新项目的项目经理，提出足够的问题，以便您知道您要尝试解决的问题以及您需要构建的内容。实际上，有些问题根本不需要任何工程就可以解决！
+
+即使您之前被问过相同的问题，也不会有两次系统设计面试经历是相同的。面试官的背景各不相同，可能优先考虑系统的不同方面。借此机会找出他们最感兴趣的内容，并相应地计划您的答案。
+
+在进入面试的下一部分之前，您应该获得一些一般性问题的答案：
+
+### 我们应该关注哪些主要用例？
+
+假设您被要求“设计 Facebook”。Facebook 是一个巨大的平台，有新闻提要、个人资料、朋友、群组、故事等等。您应该关注 Facebook 的哪些部分？面试官心里有答案，但希望您通过提问来找出答案。通常，您应该关注产品最独特的方面，即定义它的功能。对于 Facebook 来说，它将是新闻提要、提要的分页以及创建新帖子。对于 YouTube 来说，这将是观看视频的体验。其他类型产品的重要领域可以在[问题类型](/system-design/types-of-questions#examples)中找到。
+
+在这一页的其余部分，我们将使用“设计 Facebook”作为问题，并将其应用于该框架。
+
+假设您没有澄清要关注产品的哪些部分，并且您认为您应该谈论交友流程并开始谈论它。在最好的情况下，好的面试官会引导您回到问题的本意，但他们会注意到您没有澄清问题。在最坏的情况下，经验不足的面试官会让你继续说下去，并礼貌地寻找机会纠正你，但你已经浪费了一些宝贵的时间来讨论一个不重要的话题。
+
+### 什么是功能需求和非功能需求？
+
+首先，什么是功能需求和非功能需求？
+
+* **功能需求**：产品的基本要求，如果没有这些要求，产品就无法运行。这通常是用户是否可以正确完成核心流程。
+* **非功能需求**：被视为对产品的改进，但并非产品可用的严格要求，即没有这些产品仍然可以使用。这些包括性能（页面加载速度、交互速度）、可扩展性（页面上可以存在多少个项目，然后页面才会变慢）、良好的用户体验等。
+
+你可以通过两种方式获得这个问题的答案：
+
+1. 主动列出你认为的需求，并从面试官那里获得反馈和一致意见（首选）。
+2. 直接问面试官。但是，大多数时候他们希望你定义它们。即使他们给你一个答案，也不会太详细。
+
+至少，你的设计必须满足功能需求。在满足所有功能需求后，继续讨论如何满足非功能需求。
+
+### 哪些是需要关注的核心功能，哪些是锦上添花的功能？
+
+即使你知道了功能需求，仍然可能有很多小功能构成大功能。例如，在创建新的 Facebook 帖子时，应该支持什么样的帖子格式？除了通常的基于文本的帖子之外，用户是否应该能够上传照片、上传视频、创建投票、签到某个位置等。
+
+你应该事先明确核心功能，并在继续讨论额外功能之前为它们进行设计。
+
+### 其他问题：
+
+* 需要支持哪些设备/平台（桌面/平板电脑/移动设备）？
+* 是否需要离线支持？
+* 该产品的主要用户是谁？
+* 有什么性能要求吗？如果有的话？性能要求通常属于非功能性需求
+
+上面的问题应该为您提供一个良好的开端列表，但这绝不是一个详尽的列表！不同的问题将要求您提出特定于领域的问题，我们将在案例研究中讨论这些问题。
+
+建议你将商定的要求写在某个地方，以便你可以在整个面试过程中参考它们，并确保你已经涵盖了它们。
+
+***
+
+## 架构/高层设计
+
+**目标**：确定产品的关键组件以及它们之间的相互关系。
+
+**推荐时长**：大约占总时长的 20%。
+
+考虑到这些要求，我们可以继续进行架构设计。你的下一个任务是通过确定产品的关键组件、组件之间的交互方式以及它们之间的关系来提出一个产品/系统架构。请记住专注于**客户端架构**，而不是后端。
+
+图表是您在这里的朋友。每个组件都可以用一个矩形表示，您的高级设计通常最终看起来像几个矩形框，它们之间有箭头来演示数据的流程。也可以在组件内包含组件，在这种情况下，使用更大的矩形绘制父组件，因为它们需要容纳多个子组件。
+
+前端设计高级设计中常见的组件/模块示例：
+
+* **服务器**：在前端系统设计面试中，我们可以将服务器视为一个黑盒，并假设它公开了一些您可以通过 HTTP/WebSockets 调用的 API。
+* **视图**：这代表用户看到的内容，它通常包含其中的较小子视图。可以仅包含客户端状态。
+* **控制器**：响应用户交互并以视图期望的格式处理来自存储/模型的数据的模块。如果应用程序很小，并且模块之间没有太多数据传递，则不一定需要此模块。
+* **模型/客户端存储**：数据所在的位置。存储包含将通过视图呈现给用户的数据，并且存储在面试环境中往往是应用程序范围的。实际上，您可以在一个应用程序中拥有多个存储，并且存储可以包含其他存储。
+
+定义组件的职责时要考虑的其他事项：
+
+* **关注点分离**：组件旨在模块化，并用于封装一组功能和数据。考虑每个组件的目的/功能、它应该包含什么数据以及它如何为系统的其余部分提供服务（它可以为其他组件做什么）。
+* **应该在哪里进行计算**：如果需要进行一些计算（例如，根据搜索词过滤结果，计算购物车的总金额），应该在服务器还是客户端完成这项工作？每种方法都有权衡，并且该决定既取决于产品，也取决于上下文。
+
+重要的是要认识到，上面提到的并非每个常见组件都与每个产品相关且必要，这取决于产品的独特方面。
+
+在绘制出架构图后，用语言描述每个组件（图中的框）的职责。
+
+### 架构示例
+
+这是一个使用 Excalidraw 绘制的 [新闻提要](/questions/system-design/news-feed-facebook) 问题的架构图示例。
+
+![架构图示例](/img/questions/news-feed-facebook/news-feed-architecture.png)
+
+#### 组件职责
+
+* **服务器**：提供 feed 数据，并提供一个 HTTP API 以创建新的 feed 帖子。
+* **控制器**：控制应用程序内的数据流，并向服务器发出网络请求。
+* **客户端存储**：存储整个应用程序所需的数据。在新闻提要的上下文中，存储中的大多数数据将是 feed UI 所需的服务器生成的数据。
+* **Feed UI**：包含 feed 帖子的列表以及撰写新帖子的 UI。
+  * **Feed 帖子**：呈现 feed 帖子的数据，并包含与帖子交互的按钮（喜欢/反应/分享/评论）。
+  * **帖子撰写器**：用户创建新 feed 帖子的 UI。
+
+你可能被要求使用的常见免费绘图工具包括 [diagrams.net](https://app.diagrams.net/) 和 [Excalidraw](https://excalidraw.com/)。最好事先熟悉这些工具。
+
+***
+
+## 数据模型
+
+**目标**：描述各种数据实体、它们包含的字段以及它们所属的组件。
+
+**推荐时长**：大约占会话的 10%。
+
+我们现在必须考虑客户端中存在哪些数据字段。客户端应用程序中有两种数据：
+
+### 服务器生成的数据
+
+源自服务器的数据，通常来自数据库，供多个人查看或从多个不同的设备访问。常见示例包括用户数据（姓名、个人资料图片）和用户生成的数据（feed 帖子、评论）。
+
+### 仅客户端数据
+
+仅客户端数据，也常被称为状态，是只需要存在于客户端的数据，不需要发送到服务器写入数据库。客户端数据可以进一步细分为两类：
+
+* **要持久化的数据**：通常是用户输入，例如输入到表单字段中的数据。这些数据通常必须发送到服务器并保存到数据库中才能有用。
+* **临时数据**：持续很短时间的临时状态。常见的例子包括表单验证状态、当前导航选项卡、某个部分是否已展开等。当浏览器选项卡关闭时，丢失这些数据通常是可以接受的。
+
+在列出数据字段时，确定该字段是什么类型的数据，是服务器生成的数据还是仅客户端数据会很有用。
+
+### 数据模型示例
+
+以下是使用 [新闻源](/questions/system-design/news-feed-facebook) 问题的各种实体的基本数据模型示例。
+
+| 来源 | 实体 | 属于 | 字段 |
+| --- | --- | --- | --- |
+| 服务器 | `Post` | Feed Post | `id`, `created_time`, `content`, `image`, `author` (a `User`), `reactions` |
+| 服务器 | `Feed` | Feed UI | `posts` (list of `Post`s), `pagination` (pagination metadata) |
+| 服务器 | `User` | Client Store | `id`, `name`, `profile_photo_url` |
+| 用户输入（客户端） | `NewPost` | Feed Composer UI | `message`, `image` |
+
+根据您在问题中的进展程度以及需求在面试期间的演变和增长情况，您可能需要添加更多字段。这是一个动态和迭代的过程。
+
+您可能希望在架构图中拥有它们的组件附近编写这些字段。
+
+***
+
+## 接口定义 (API)
+
+**目标**：定义产品中组件之间的接口、各种 API 的功能、它们的参数和响应。
+
+**推荐时长**：大约占会话的 15%。
+
+有了每个组件中的组件和数据，我们就可以继续讨论组件之间的接口 (API)。API 是一个重载术语，通常指软件组件之间进行通信以及请求/发送组件之间数据的协议。客户端和服务器通过网络层 API（HTTP/WebSockets）进行通信。客户端组件通常通过浏览器运行时中的函数进行通信。所有 API 都有三个共同点，无论它们是在服务器和客户端之间还是在客户端组件之间：
+
+| API 的组成部分 | 服务器-客户端 | 客户端-客户端 |
+| --- | --- | --- |
+| 名称和功能 | HTTP 路径 | JavaScript 函数 |
+| 参数 | HTTP GET 查询和 POST 参数 | 函数参数 |
+| 返回值 | HTTP 响应，通常为 JSON 格式 | 函数返回值 |
+
+### 服务器-客户端 API 示例
+
+再次使用 [新闻源系统设计](/questions/system-design/news-feed-facebook) 示例，我们有一个服务器 API，允许客户端获取最新的 feed 帖子。
+
+| 字段 | 值 |
+| --- | --- |
+| HTTP 方法 | `GET` |
+| 路径 | `/feed` |
+| 描述 | 获取用户的 feed 结果。 |
+
+#### 参数
+
+feed 响应是一个分页列表，因此 API 期望分页参数。
+
+```json
+{
+  "size": 10,
+  "cursor": "=dXNlcjpXMDdRQ1JQQTQ"
+}
+```
+
+#### 响应
+
+```json
+{
+  "pagination": {
+    "size": 10,
+    "next_cursor": "=dXNlcjpVMEc5V0ZYTlo"
+  },
+  "results": [
+    {
+      "id": "123",
+      "author": {
+        "id": "456",
+        "name": "John Doe"
+      },
+      "content": "Hello world",
+      "image": "https://www.example.com/feed-images.jpg",
+      "reactions": {
+        "likes": 20,
+        "haha": 15
+      },
+      "created_time": 1620639583
+    }
+    // ... More posts.
+  ]
+}
+```
+
+### 客户端-客户端 API 示例
+
+客户端-客户端 API 可以用与服务器-客户端 API 类似的方式编写，主要区别在于它们是 JavaScript 函数，或者正在侦听的事件。要描述的最重要的部分是 API 的功能、参数和返回/响应值。
+
+### UI 组件系统设计的 API
+
+如果您被要求设计一个 UI 组件，对于“接口”部分，请讨论该组件的自定义选项，类似于 React 组件的 props。
+
+***
+
+## 优化和深入研究
+
+**目标**：讨论构建产品时可能的优化机会和特定的感兴趣领域。
+
+**推荐时长**：大约占会议的 40%。
+
+优化和深入研究部分没有固定的方法，您可以自由地专注于产品的不同领域。没有足够的时间来涵盖每个领域，因此请根据以下指南仔细选择您想如何分配时间：
+
+* **关注产品的重要领域**：对于电子商务网站，性能至关重要，您需要花费大量时间深入研究可以完成的各种性能优化。对于协作编辑器，复杂之处在于如何处理竞争条件和并发修改，因此您需要专注于解释这一点。
+* **专注于您的优势**：展示您的领域知识。如果您精通可访问性，请谈谈产品中可能发生的各种可访问性陷阱以及如何解决它们。用您的知识给面试官留下深刻印象。如果您是性能大师，请解释可以提供流畅用户体验的各种性能优化机会。
+
+### 一般优化/深入研究领域
+
+以下是您可以讨论的本节主题列表。请记住，主题的重要性取决于产品，某些主题与某些产品完全无关（可能但不太可能）。
+
+* 性能
+* 用户体验
+* 网络
+* 可访问性 (a11y)
+* 多语言支持
+* 多设备支持
+* 安全性
+
+有关每个主题的详细信息，请参阅我们的 [构建用户界面的最佳实践指南](/front-end-interview-guidebook/user-interface-questions-cheatsheet)。
+
+***
+
+## 总结
+
+| 步骤 | 目标 | 推荐时长 |
+| --- | --- | --- |
+| 需求探索 | 彻底了解问题，并通过提出一些澄清问题来确定范围。 | \<15% |
+| 架构/高级设计 | 确定产品的关键组件以及它们之间的关系。 | ~20% |
+| 数据模型 | 描述各种数据实体、它们包含的字段以及它们所属的组件。 | ~10% |
+| 接口定义 (API) | 定义产品中组件之间的接口 (API)、每个 API 的功能、它们的参数和响应。 | ~15% |
+| 优化和深入研究 | 讨论构建产品时可能的优化机会和特定的感兴趣领域。 | ~40% |
diff --git a/packages/system-design/contents/introduction/en-US.langnostic.json b/packages/system-design/contents/introduction/en-US.langnostic.json
new file mode 100644
index 0000000000..51228df3c7
--- /dev/null
+++ b/packages/system-design/contents/introduction/en-US.langnostic.json
@@ -0,0 +1,50 @@
+{
+  "frontmatter": {
+    "title": "53c2039b",
+    "description": "ec7f6c04",
+    "seo_title": "3d6141d5",
+    "social_title": "3d6141d5",
+    "seo_description": "869eab92"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "c30e1291",
+        "2f47a2e",
+        "e2670984",
+        "fd523bd0",
+        "73fcd5dc",
+        "107fb4e6",
+        "d0ca6bbd",
+        "862ea9fa",
+        "2a1af6cd",
+        "2772fe13",
+        "622e42c9",
+        "f1bcf3f4",
+        "db2e5ac6",
+        "22969bc3",
+        "ccd38694"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "c30e1291",
+        "2f47a2e",
+        "e2670984",
+        "fd523bd0",
+        "73fcd5dc",
+        "107fb4e6",
+        "d0ca6bbd",
+        "862ea9fa",
+        "2a1af6cd",
+        "2772fe13",
+        "622e42c9",
+        "f1bcf3f4",
+        "db2e5ac6",
+        "22969bc3",
+        "ccd38694"
+      ]
+    }
+  }
+}
diff --git a/packages/system-design/contents/introduction/en-US.mdx b/packages/system-design/contents/introduction/en-US.mdx
new file mode 100644
index 0000000000..82b0ed5b4e
--- /dev/null
+++ b/packages/system-design/contents/introduction/en-US.mdx
@@ -0,0 +1,50 @@
+---
+title: 'Front End System Design: An Introduction'
+description: Learn useful techniques and how to approach top front end system design questions. Written by ex-interviewers at FAANG.
+seo_title: Front End System Design Playbook | GreatFrontEnd
+social_title: Front End System Design Playbook | GreatFrontEnd
+seo_description: The definitive guide to front end system design interviews. Learn useful techniques and how to approach the most common questions. Written by Ex-FAANG interviewers.
+---
+
+Unlike coding and quiz questions, system design interviews are open-ended style interviews where there are no right answers. You're given a vague problem or scenario and you're expected to work with the interviewer to answer the question by coming up with a suitable software design on a whiteboard, or some collaborative drawing app if it's a virtual interview. It is similar to the process at certain companies where engineers write technical design documents to outline the possible approaches to a project they are working on, explain technical decisions and discuss tradeoffs with coworkers except that you have to do it within 30-60 minutes.
+
+System design interviews are usually given to candidates who have some number of years of working experience (aka non-fresh grads) and your performance in the system design interview has significant influence on the job level you will be offered. Most of the time, failing the system design interview will result in an overall rejection. It's really important to ace your system design interviews!
+
+However, given the open-ended nature of system design interviews, it is much harder to practice for it as compared to coding interviews. Many candidates also don't have real life experience building various systems and it's hard to draw from experience when answering system design interview questions. Also, there are very few resources available for front end system design. Most existing system design resources are targeted at general Software Engineers and hence focus on distributed systems.
+
+GreatFrontEnd's front end system design resources are perhaps the most comprehensive you can find and will help you ace your front end system design interviews with ease!
+
+{/* TODO: Add some testimonials regarding front end system design */}
+
+## Front end vs Back end / Full stack system design
+
+In traditional Software Engineer system design interviews, candidates will be asked to describe the architecture of a distributed system, usually involving web servers, API gateways, load balancers, caches, databases, microservices, message queues, streams, etc.
+
+For Front End Engineers, system design interviews are slightly different – there's more emphasis on what goes on in the client and API design between the client and the server, as opposed to what goes on in the back end.
+
+| Area | Back end / Full stack | Front end |
+| --- | --- | --- |
+| Gather requirements | Required | Required |
+| Architecture / High-level design entities | Distributed cloud services | Application/Component |
+| Back-of-the-envelope estimation | May be required | Not required |
+| Components of the system | Cloud services (e.g. Load balancer, Application server, Database, File storage, Caches, Message queues, CDN, Full-text search) | Application modules (Model, View, Controller) |
+| Data model | Database schema | Application state |
+| Type of APIs between components | Network (Any protocol) | Network (HTTP, WebSocket), JavaScript functions |
+| Deep dives / focus areas | Scalability, Reliability, Consistency, Availability | Performance, User Experience, Accessibility, Internationalization |
+| Less important (Can treat as a black box) | Client | Server |
+
+For example, a classic question is to ask about designing a Facebook news feed which can be asked during both back end and front end system interviews.
+
+- **Back end / Full stack**: Capacity estimation, designing the database schema, APIs between microservices, how to ensure the services can scale with the traffic, how to generate a user's news feed in a scalable fashion, what happens when a post is created by a typical user (hundreds of followers) vs celebrities (millions of followers)
+- **Front end**: HTTP API for the feed, how to implement feed pagination, how to implement interactions with posts, how new posts can be created, user experience and accessibility considerations
+
+As you can see, the focus of front end system design interviews can be very different from back end, and answering them well requires a different approach.
+
+## What you will learn in this guide
+
+Our Front End System Design guide is structured into two parts, you will first gain a deeper understanding of what system design interviews are about, then dive into some front end system design case studies that use the RADIO framework.
+
+- [Types of questions](/system-design/types-of-questions): Types of Front End System Design interview questions and examples
+- [RADIO framework](/system-design/framework): A framework for answering Front End System Design interview questions
+- [Evaluation axes](/system-design/evaluation-axes): How you are being evaluated and what interviewers are looking out for
+- [Common mistakes](/system-design/common-mistakes): Common mistakes to avoid during Front End System Design interviews
diff --git a/packages/system-design/contents/introduction/pt-BR.mdx b/packages/system-design/contents/introduction/pt-BR.mdx
new file mode 100644
index 0000000000..8b4cc0c6d9
--- /dev/null
+++ b/packages/system-design/contents/introduction/pt-BR.mdx
@@ -0,0 +1,44 @@
+---
+title: Introdução ao Design de Sistemas Front-End
+description: Aprenda técnicas úteis e como abordar as principais perguntas de design de sistemas front-end, escritas por ex-entrevistadores de empresas de tecnologia renomadas FAANG.
+seo_title: Guia de Design de Sistemas Front-End | Conceitos, Técnicas e Perguntas
+---
+
+Ao contrário das perguntas de codificação e questionários, as entrevistas de design de sistemas são do estilo aberto, onde não há respostas certas. Você recebe um problema ou cenário vago e espera-se que trabalhe com o entrevistador para responder à pergunta, desenvolvendo um design de software adequado em um quadro branco ou em algum aplicativo de desenho colaborativo, caso a entrevista seja virtual. É semelhante ao processo em certas empresas, onde os engenheiros escrevem documentos técnicos de design para esboçar as abordagens possíveis de um projeto em que estão trabalhando, explicar decisões técnicas e discutir compensações com os colegas, exceto que você precisa fazer isso em um período de 30 a 60 minutos.
+
+As entrevistas de design de sistemas geralmente são realizadas com candidatos que têm alguns anos de experiência de trabalho (não recém-formados) e seu desempenho na entrevista de design de sistemas tem uma influência significativa no nível de cargo que lhe será oferecido. Na maioria das vezes, falhar na entrevista de design de sistemas resultará em uma rejeição geral. É realmente importante ter um desempenho excepcional em suas entrevistas de design de sistemas!
+
+No entanto, devido à natureza aberta das entrevistas de design de sistemas, é muito mais difícil praticar para elas em comparação com as entrevistas de codificação. Muitos candidatos também não têm experiência real na construção de vários sistemas, e é difícil se basear em experiências ao responder perguntas de entrevistas de design de sistemas. Além disso, existem poucos recursos disponíveis para o design de sistemas front-end. A maioria dos recursos existentes de design de sistemas é direcionada a Engenheiros de Software em geral e, portanto, foca em sistemas distribuídos.
+
+Os recursos de design de sistemas da GreatFrontEnd são talvez os mais abrangentes que você pode encontrar e ajudarão você a lidar com as entrevistas de design de sistemas front-end com facilidade!
+
+## Design de Sistemas Front-End vs. Back-End
+
+Nas entrevistas tradicionais de design de sistemas para Engenheiros de Software, os candidatos serão solicitados a descrever a arquitetura de um sistema distribuído, geralmente envolvendo servidores web, balanceadores de carga, caches, bancos de dados, microsserviços, filas de tarefas, etc. Para Engenheiros Front-End, as entrevistas de design de sistemas são um pouco diferentes, com mais ênfase no que acontece no cliente e no design da API entre o cliente e o servidor, em vez do que acontece no back-end.
+
+| Proporção | Back End | Front End |
+| --- | --- | --- |
+| Coletar requisitos | Obrigatório | Obrigatório |
+| Arquitetura/design de alto nível | Serviços em nuvem distribuídos | Aplicação/Componente |
+| Estimativa rápida | Obrigatório | Não obrigatório |
+| Componentes do sistema | Serviços em nuvem (por exemplo, balanceador de carga, servidor de aplicação, banco de dados, armazenamento de arquivos, caches, filas de mensagens, CDN) | Módulos de aplicação (Modelo, Visualização, Controlador) |
+| Modelo de dados | Esquema SQL | Estado da aplicação |
+| Tipo de APIs entre os componentes | Rede (qualquer protocolo) | Rede (HTTP, WebSocket), funções JavaScript |
+| Áreas de foco | Escalabilidade, Confiabilidade, Disponibilidade | Desempenho, Experiência do Usuário, Acessibilidade, Internacionalização |
+| Menos importante (pode ser tratado como uma caixa-preta) | Cliente | Servidor |
+
+Por exemplo, uma pergunta clássica é pedir para projetar uma interface de feed do Twitter, que pode ser feita tanto em entrevistas de sistemas de back end quanto de front end.
+
+- Back end: Estimativa de capacidade, projeto dos esquemas do banco de dados, como garantir que os serviços possam escalar com o tráfego, como gerar o feed do Twitter de um usuário?
+- Front end: Como você implementa as interações com um tweet, como implementar paginação no feed e como os usuários podem criar novos tweets?
+
+Como você pode ver, o foco das entrevistas de design de sistemas de front end pode ser muito diferente das de back end, e respondê-las bem requer uma abordagem diferente.
+
+## O que você aprenderá neste guia
+
+Nosso guia de Design de Sistema de Front End está estruturado em duas partes. Primeiro, você obterá uma compreensão mais profunda do que se trata uma entrevista de design de sistema e, em seguida, mergulhará em alguns estudos de caso de design de sistema de front end usando o framework RADIO.
+
+- [Tipos de questões e exemplos do Front End System Design](/system-design/types-of-questions)
+- [Framework para responder perguntas sobre o Design do Sistema Front-end](/system-design/framework)
+- [Como você está sendo avaliado e o que os entrevistadores estão procurando](/system-design/evaluation-axes)
+- [Erros comuns para evitar](/system-design/common-mistakes)
diff --git a/packages/system-design/contents/introduction/zh-CN.mdx b/packages/system-design/contents/introduction/zh-CN.mdx
new file mode 100644
index 0000000000..5c3f281220
--- /dev/null
+++ b/packages/system-design/contents/introduction/zh-CN.mdx
@@ -0,0 +1,50 @@
+---
+title: 前端系统设计：简介
+description: 学习有用的技术以及如何处理顶尖前端系统设计问题。由前 FAANG 面试官撰写。
+seo_title: 前端系统设计手册 | GreatFrontEnd
+social_title: 前端系统设计手册 | GreatFrontEnd
+seo_description: 前端系统设计面试的权威指南。学习有用的技术以及如何处理最常见的问题。由前 FAANG 面试官撰写。
+---
+
+与编码和测验问题不同，系统设计面试是开放式面试，没有正确答案。您会得到一个模糊的问题或场景，并且希望您与面试官一起通过在白板上或一些协作绘图应用程序上提出合适的软件设计来回答问题（如果它是虚拟面试）。这类似于某些公司工程师编写技术设计文档以概述他们正在处理的项目的可能方法、解释技术决策并与同事讨论权衡的过程，除了您必须在 30-60 分钟内完成它。
+
+系统设计面试通常会给有多年工作经验（又名非应届毕业生）的候选人，并且您在系统设计面试中的表现对您将获得的职位级别有重大影响。大多数情况下，未能通过系统设计面试将导致整体拒绝。顺利通过系统设计面试真的很重要！
+
+然而，鉴于系统设计面试的开放性，与编码面试相比，它更难练习。许多候选人也没有构建各种系统的真实生活经验，并且在回答系统设计面试问题时很难从经验中汲取灵感。此外，针对前端系统设计的资源很少。大多数现有的系统设计资源都针对一般的软件工程师，因此侧重于分布式系统。
+
+GreatFrontEnd 的前端系统设计资源可能是您能找到的最全面的资源，它将帮助您轻松通过前端系统设计面试！
+
+{/* TODO: 添加一些关于前端系统设计的推荐 */}
+
+## 前端 vs 后端 / 全栈系统设计
+
+在传统的软件工程师系统设计面试中，会要求候选人描述分布式系统的架构，通常涉及 Web 服务器、API 网关、负载均衡器、缓存、数据库、微服务、消息队列、流等。
+
+对于前端工程师来说，系统设计面试略有不同——更侧重于客户端发生的事情以及客户端和服务器之间的 API 设计，而不是后端发生的事情。
+
+| 领域 | 后端 / 全栈 | 前端 |
+| --- | --- | --- |
+| 收集需求 | 必需 | 必需 |
+| 架构 / 高级设计实体 | 分布式云服务 | 应用程序/组件 |
+| 粗略估算 | 可能需要 | 不需要 |
+| 系统的组件 | 云服务（例如负载均衡器、应用程序服务器、数据库、文件存储、缓存、消息队列、CDN、全文搜索） | 应用程序模块（模型、视图、控制器） |
+| 数据模型 | 数据库模式 | 应用程序状态 |
+| 组件之间的 API 类型 | 网络（任何协议） | 网络（HTTP、WebSocket）、JavaScript 函数 |
+| 深入研究/重点领域 | 可扩展性、可靠性、一致性、可用性 | 性能、用户体验、可访问性、国际化 |
+| 不太重要（可以视为黑盒） | 客户端 | 服务器 |
+
+例如，一个经典的问题是询问如何设计 Facebook 新闻提要，这可以在后端和前端系统面试中提出。
+
+* **后端 / 全栈**：容量估算、设计数据库模式、微服务之间的 API、如何确保服务能够随着流量扩展、如何以可扩展的方式生成用户的新闻提要、当普通用户（数百个关注者）与名人（数百万个关注者）创建帖子时会发生什么
+* **前端**：Feed 的 HTTP API、如何实现 Feed 分页、如何实现与帖子的交互、如何创建新帖子、用户体验和可访问性考虑因素
+
+正如您所看到的，前端系统设计面试的重点可能与后端有很大不同，并且要很好地回答它们需要不同的方法。
+
+## 您将在此指南中学习的内容
+
+我们的前端系统设计指南分为两部分，您将首先更深入地了解什么是系统设计面试，然后深入研究一些使用 RADIO 框架的前端系统设计案例研究。
+
+* [问题类型](/system-design/types-of-questions)：前端系统设计面试问题的类型和示例
+* [RADIO 框架](/system-design/framework)：用于回答前端系统设计面试问题的框架
+* [评估轴](/system-design/evaluation-axes)：如何被评估以及面试官正在寻找什么
+* [常见错误](/system-design/common-mistakes)：在前端系统设计面试中要避免的常见错误
diff --git a/packages/system-design/contents/types-of-questions/en-US.langnostic.json b/packages/system-design/contents/types-of-questions/en-US.langnostic.json
new file mode 100644
index 0000000000..19f93d4493
--- /dev/null
+++ b/packages/system-design/contents/types-of-questions/en-US.langnostic.json
@@ -0,0 +1,66 @@
+{
+  "frontmatter": {
+    "title": "d4b1cc69",
+    "description": "fb8f139b",
+    "seo_title": "c5995a66",
+    "social_title": "23a691c3",
+    "seo_description": "8c26d043"
+  },
+  "content": {
+    "source": {
+      "locale": "en-US",
+      "hashes": [
+        "4473509f",
+        "a35b5e44",
+        "49bc41c2",
+        "cd112d59",
+        "7df37cbe",
+        "2d65d6fb",
+        "70e92007",
+        "a4fff735",
+        "d5942c75",
+        "f5d1aae5",
+        "4880c013",
+        "16b97cb4",
+        "c8f0ef9a",
+        "53e312bc",
+        "95d5ec41",
+        "b845620a",
+        "84bf7fd",
+        "ae327a26",
+        "70e92007",
+        "822e6a62",
+        "9ac1adca",
+        "5fb02f68",
+        "2cfeae"
+      ]
+    },
+    "targets": {
+      "zh-CN": [
+        "4473509f",
+        "a35b5e44",
+        "49bc41c2",
+        "cd112d59",
+        "7df37cbe",
+        "2d65d6fb",
+        "70e92007",
+        "a4fff735",
+        "d5942c75",
+        "f5d1aae5",
+        "4880c013",
+        "16b97cb4",
+        "c8f0ef9a",
+        "53e312bc",
+        "95d5ec41",
+        "b845620a",
+        "84bf7fd",
+        "ae327a26",
+        "70e92007",
+        "822e6a62",
+        "9ac1adca",
+        "5fb02f68",
+        "2cfeae"
+      ]
+    }
+  }
+}
diff --git a/packages/system-design/contents/types-of-questions/en-US.mdx b/packages/system-design/contents/types-of-questions/en-US.mdx
new file mode 100644
index 0000000000..8accec3054
--- /dev/null
+++ b/packages/system-design/contents/types-of-questions/en-US.mdx
@@ -0,0 +1,89 @@
+---
+title: Types of Front End System Design Questions
+description: Question formats you can expect in a front end system design interview.
+seo_title: Types of Questions to Expect | Front End System Design Playbook
+social_title: Types of Front End System Design questions to expect | GreatFrontEnd
+seo_description: Learn about the main types of front end system design interview questions that can be asked.
+---
+
+There are two main kinds of front end system design questions: (1) Applications and (2) UI components.
+
+## Applications
+
+As mentioned above, designing applications for front end system design interviews will feel similar to general Software Engineering system design interviews, and in fact, the questions are highly similar. However, instead of talking about distributed systems, you should focus on the client side of things and talk about application architecture and client-side implementation details.
+
+In this day and age, many websites are interactive and rich applications that can do virtually what many desktop applications can. If you've used Gmail, Facebook, YouTube, ChatGPT, or Google Calender on the web, you have used a web app. Web apps tend to be interactive and dynamic (contents on the page change frequently) and page navigations in a web app usually don't require a full page refresh; the app uses JavaScript to fetch remote data for the next page and dynamically change the contents and URL.
+
+Since web apps are complex software involving multiple modules, common application architectures learnt in Software Engineering classes like Model-View-Controller (MVC), Model-View-ViewModel (MVVM) are also applicable when building web apps. React is one of the most popular JavaScript libraries by Facebook to build interactive web applications and many React web apps adopt a unidirectional Flux/Redux-based architecture.
+
+Different applications have their own unique aspects and talking points. It's imperative that you focus on the parts that are unique to the application and not spend too much time talking about general stuff that are applicable to all questions. Firstly, design the high-level architecture, identify the components in the system, and the API between the components. Then dive into a few areas that are interesting/unique to the problem and how to implement or optimize them.
+
+### Examples
+
+Here's a list of application questions commonly asked during front end system design interviews and the areas you should focus on:
+
+| Application | Examples | Important areas |
+| --- | --- | --- |
+| [News Feed](/questions/system-design/news-feed-facebook) | Facebook, Twitter | Feed interactions, Feed pagination approaches, Post composer |
+| [Messaging/Chat](/questions/system-design/chat-application-messenger) | Messenger, Slack, Discord | Real-time chat, Message syncing, Messages list, Chat list |
+| [E-commerce Marketplaces](/questions/system-design/e-commerce-amazon) | Amazon, eBay | Product listing pages, Product detail pages, Cart, Checkout |
+| [Photo Sharing](/questions/system-design/photo-sharing-instagram) | Instagram, Flickr, Google Photos | Photos browsing, Photos editing, Photos uploading |
+| [Travel Booking](/questions/system-design/travel-booking-airbnb) | Airbnb, Skyscanner | Search UI, Search results, Booking UI |
+| [Video Streaming](/questions/system-design/video-streaming-netflix) | Netflix, YouTube | Video player, Video streaming, Recommended videos |
+| [Pinterest](/questions/system-design/pinterest) | Pinterest | Masonry layout implementation and media feed optimizations |
+| [Collaborative Apps](/questions/system-design/collaborative-editor-google-docs) | Google Docs, Google Sheets, Google Slides, Notion | Real-time collaboration protocols, Conflict resolution, State syncing |
+| [Email Client](/questions/system-design/email-client-outlook) | Outlook, Apple Mail, Gmail | Mailbox syncing, Mailbox UI, Email composer |
+| Drawing | Figma, Excalidraw, Canva | Rendering approach, Client state/data model, State management |
+| Maps | Google/Apple Maps, Foursquare City Guide | Map rendering, Displaying locations |
+| File Storage | Google Drive, Dropbox | File uploading, File downloading, File explorer |
+| Video Conferencing | Zoom, Google Meet | Video streaming, Various viewing modes |
+| Ridesharing | Uber, Lyft | Trip booking, Driver location, App states |
+| Music Streaming | Spotify, Apple Music | Audio streaming, Music player UI, Playlists UI |
+| Games | Tetris, Snake | Game state, Game loop, Game logic |
+
+## UI components
+
+In modern front end development, it is common to use component libraries to build applications. Some popular component libraries you might have used before include jQuery UI (how old school!), Bootstrap, Material UI, Chakra UI, etc.
+
+It is an expectation of Front End Engineers to be able to build the various UI components needed by an application. Some UI components can be easy to build (e.g. text, button, badge, etc), while others can be much more complex (autocomplete, dropdown, modal, etc). Most of the time, if you are asked to design a UI component, it would be from the latter category.
+
+Firstly determine the subcomponents of the component (e.g. for an image carousel, there's the image, the pagination buttons, thumbnails), define the external-facing API of the component (what options/props the component should accept), describe the internal component state, API between the subcomponents (if relevant), then dive into optimizations and considerations for performance, accessibility, user experience, security, etc where relevant.
+
+You might have to write a small amount of code for one or more of the following purposes:
+
+1. Describe the component hierarchy
+1. Describe the shape of the component state
+1. Explain some non-trivial logic within the component
+
+```jsx
+<ImageCarousel
+  images={...}
+  onPrev={...}
+  onNext={...}
+  layout="horizontal">
+  <ImageCarouselImage style={...} />
+  <ImageThumbnail onClick={...} />
+</ImageCarousel>
+```
+
+### Customizing theming
+
+You will most certainly be expected to design a way for users of the component (developers) to customize the component appearance. Refer to [Front End Interview Guidebook's UI Components API Design Principles Section](/front-end-interview-guidebook/user-interface-components-api-design-principles) for an overview and comparison of the different approaches.
+
+### Examples
+
+Examples of UI components asked during front end system design interviews:
+
+- Design an [autocomplete component](/questions/system-design/autocomplete)
+- Design a [dropdown menu component](/questions/system-design/dropdown-menu)
+- Design an [embeddable poll widget](/questions/system-design/poll-widget)
+- Design an [image carousel](/questions/system-design/image-carousel)
+- Design a [modal component](/questions/system-design/modal-dialog)
+- Design a [rich text editor](/questions/system-design/rich-text-editor)
+- Design a data table with sorting and pagination
+- Design a datepicker
+- Design a multiselect component
+
+## What to do during interviews?
+
+Now that you have an understanding of the kind of questions you can be asked during Front end system design interviews, how do you go about answering them? We came up with the [RADIO framework](/system-design/framework), an easy-to-remember structured approach that you can use to ace Front End system design interview questions.
diff --git a/packages/system-design/contents/types-of-questions/pt-BR.mdx b/packages/system-design/contents/types-of-questions/pt-BR.mdx
new file mode 100644
index 0000000000..44a87b34ba
--- /dev/null
+++ b/packages/system-design/contents/types-of-questions/pt-BR.mdx
@@ -0,0 +1,84 @@
+---
+title: Tipos de perguntas de design de sistema front-end
+description: Formatos de perguntas que você pode esperar em uma entrevista de design de sistema de front end.
+seo_title: Tipos de perguntas em entrevistas de design de sistema de front end
+seo_description: Aprenda os dois tipos de perguntas de design de sistema de front end e como abordá-las de forma diferente.
+---
+
+Existem dois tipos principais de perguntas de design de sistema de front end: (1) Aplicações e (2) Componentes de interface do usuário.
+
+## Aplicações
+
+Conforme mencionado acima, projetar aplicações para entrevistas de design de sistema de front end será semelhante às entrevistas gerais de design de sistema de Engenharia de Software e, de fato, as perguntas são muito parecidas. No entanto, em vez de falar sobre sistemas distribuídos, você deve se concentrar no lado do cliente e discutir sobre a arquitetura da aplicação e os detalhes de implementação no lado do cliente.
+
+Nos dias de hoje, muitos sites são interativos e aplicativos ricos que podem realizar virtualmente o que muitos aplicativos de desktop são capazes. Se você já usou o Gmail, Facebook, YouTube ou Google Calendar na web, você já utilizou um aplicativo web. Os aplicativos web geralmente são dinâmicos e as navegações em um aplicativo web geralmente não exigem uma atualização completa da página. Em vez disso, eles usam JavaScript para buscar dados remotos para a próxima página e alterar dinamicamente o conteúdo e o URL. Como os aplicativos web são softwares complexos que envolvem vários módulos, as arquiteturas comuns de aplicativos que aprendemos nas aulas de Engenharia de Software, como o Model-View-Controller (MVC) e o Model-View-ViewModel (MVVM), também são aplicáveis na construção de aplicativos web. O React é uma das bibliotecas JavaScript mais populares do Facebook para criar aplicativos da Web interativos e muitos aplicativos da Web do React adotam uma arquitetura baseada em Flux/Redux unidirecional.
+
+Diferentes aplicativos têm seus próprios aspectos únicos e pontos de discussão. É imperativo que você se concentre nas partes que são únicas para o aplicativo e não gaste muito tempo falando sobre coisas gerais que são aplicáveis a todas as perguntas. Primeiramente, projete a arquitetura de alto nível, identifique os componentes no sistema e a API entre os componentes. Em seguida, aprofunde-se em algumas áreas que são interessantes para o problema e discuta como implementá-las ou otimizá-las.
+
+### Exemplos
+
+Aqui está uma lista de perguntas comumente feitas durante entrevistas de design de sistema de front end e as áreas nas quais você deve se concentrar:
+
+| Aplicação | Exemplos | Áreas importantes |
+| --- | --- | --- |
+| [Fonte de Notícias](/questions/system-design/news-feed-facebook) | Facebook, Twitter | Interações de feed, abordagens de paginação de feed, compositor de mensagens/postagens |
+| [Mensagem/Chat](/questions/system-design/chat-application-messenger) | Messenger, Slack, Discord | Sincronização de mensagens, chat em tempo real, lista de mensagens, lista de chat |
+| [Marketplaces de comércio eletrônico](/questions/system-design/e-commerce-amazon) | Amazon, eBay | Páginas de listagem de produtos, páginas de detalhes do produto, carrinho, checkout |
+| [Compartilhamento de Fotos](/questions/system-design/photo-sharing-instagram) | Instagram, Flickr, Google Fotos | Navegação de fotos, Edição de fotos, Envio de fotos |
+| [Reserva de Viagem](/questions/system-design/travel-booking-airbnb) | Airbnb, Skyscanner | Interface de busca, Resultados da busca, Interface de reserva |
+| [Cliente de Email](/questions/system-design/email-client-outlook) | Outlook, Apple Mail, Gmail | Sincronização de caixa de entrada, Interface de caixa de entrada, Compositor de e-mail, |
+| Streaming de Vídeo | YouTube, Netflix, TikTok | Reprodutor de vídeo, Streaming de vídeo, Página de detalhes do vídeo, Vídeos recomendados |
+| Aplicativos Colaborativos | Google Docs, Google Sheets, Google Slides, Notion | Colaboração em tempo real, Sincronização de Estado |
+| Desenho | Figma, Lucidchart | Abordagem de renderização, Modelo de estado/dados do cliente |
+| Mapas | Google/Apple Maps, Foursquare City Guide | Renderização do mapa, Exibindo Localizações |
+| Armazenamento de Arquivos | Google Drive, Dropbox | Envio de arquivos, Download de arquivos, Explorador de arquivos |
+| Videoconferência | Zoom, Google Meet | Streaming de vídeo, Modos de visualização variados |
+| Caronas | Uber, Lyft | Reserva de percurso, local do motorista |
+| Streaming de Música | Spotify, Apple Music | Interface do reprodutor de música, Interface de listas de reprodução |
+| Jogos | Tetris, Snake | Estado do jogo, Loop do jogo, Lógica do jogo |
+
+## Componente de UI
+
+No desenvolvimento front-end moderno, é comum usar bibliotecas de componentes para construir aplicativos. Alguns dos componentes populares que eu poderia ter utilizado anteriormente incluem jQuery UI (um tanto antigo!), Bootstrap, Material UI, Chakra UI, entre outros.
+
+É uma expectativa dos Engenheiros Front-End serem capazes de construir os vários componentes de interface de usuário necessários para uma aplicação. Alguns componentes de interface de usuário podem ser fáceis de construir (como texto, botão, insígnia, etc.), enquanto outros podem ser muito mais complexos (como autocompletar, menu suspenso, modal, etc.). Na maioria das vezes, quando solicitado a projetar um componente de interface de usuário, geralmente será da categoria mais complexa mencionada anteriormente.
+
+Primeiramente, determine os subcomponentes do componente (por exemplo, para um carrossel de imagens, temos a imagem, os botões de paginação, miniaturas), defina a API externa do componente (quais opções/props o componente deve aceitar), descreva o estado interno do componente, a API entre os subcomponentes (se relevante), e então mergulhe nas otimizações e considerações de desempenho, acessibilidade, experiência do usuário, segurança, etc., quando aplicável.
+
+Você pode ter que escrever um pequeno trecho de código para um ou mais dos seguintes propósitos:
+
+1.  Descreva a hierarquia de componentes.
+2.  Descreva a forma do estado do componente.
+3.  Explique alguma lógica não trivial dentro do componente.
+
+```jsx
+<ImageCarousel
+  images={...}
+  onPrev={...}
+  onNext={...}
+  layout="horizontal">
+  <ImageCarouselImage style={...} />
+  <ImageThumbnail onClick={...} />
+</ImageCarousel>
+```
+
+### Personalização do tema
+
+Certamente será esperado que você projete uma forma para os usuários do componente (desenvolvedores) personalizarem a aparência do componente. Consulte [Seção de Princípios de API no Design de Componentes de UI do Front End Guidebook](/front-end-interview-guidebook/user-interface-components-api-design-principles) para uma visão geral e comparação das diferentes abordagens.
+
+### Exemplos
+
+Exemplos de componentes de interface do usuário frequentemente solicitados durante entrevistas de design de sistemas front-end:
+
+- Projete um [componente de preenchimento automático](/questions/system-design/autocomplete)
+- Projete um [componente menu suspenso](/questions/system-design/dropdown-menu)
+- Projete um [widget de enquetes incorporável](/questions/system-design/poll-widget)
+- Projete um [carrossel de imagens](/questions/system-design/image-carousel)
+- Projete um [componente modal](/questions/system-design/modal-dialog)
+- Projete uma tabela de dados com classificação e paginação
+- Crie um datepicker
+- Projete um componente multiselect
+
+## O que fazer durante as entrevistas?
+
+Agora que você tem uma compreensão do tipo de perguntas que podem ser feitas durante as entrevistas de Design de Sistemas Front-End, como você procede para respondê-las? Nós criamos o [RADIO framework](/system-design/framework) uma abordagem estruturada fácil de lembrar que você pode utilizar para se destacar em perguntas de entrevistas de design de sistemas.
diff --git a/packages/system-design/contents/types-of-questions/zh-CN.mdx b/packages/system-design/contents/types-of-questions/zh-CN.mdx
new file mode 100644
index 0000000000..6a036be5e5
--- /dev/null
+++ b/packages/system-design/contents/types-of-questions/zh-CN.mdx
@@ -0,0 +1,89 @@
+---
+title: 前端系统设计问题的类型
+description: 您可以在前端系统设计面试中期望的问题格式。
+seo_title: 期望的问题类型 | 前端系统设计手册
+social_title: 期望的前端系统设计问题类型 | GreatFrontEnd
+seo_description: 了解可以提出的前端系统设计面试问题的主要类型。
+---
+
+前端系统设计问题主要有两种：(1) 应用程序和 (2) UI 组件。
+
+## 应用程序
+
+如上所述，为前端系统设计面试设计应用程序将类似于一般的软件工程系统设计面试，事实上，这些问题非常相似。但是，您应该专注于客户端，讨论应用程序架构和客户端实现细节，而不是讨论分布式系统。
+
+当今时代，许多网站都是交互式和丰富的应用程序，几乎可以完成许多桌面应用程序可以做的事情。 如果您在网络上使用过 Gmail、Facebook、YouTube、ChatGPT 或 Google 日历，那么您就使用过 Web 应用程序。 Web 应用程序往往具有交互性和动态性（页面上的内容经常变化），并且 Web 应用程序中的页面导航通常不需要完全刷新页面； 该应用程序使用 JavaScript 获取下一页的远程数据，并动态更改内容和 URL。
+
+由于 Web 应用程序是涉及多个模块的复杂软件，因此在软件工程课程中学习的常见应用程序架构（如模型-视图-控制器 (MVC)、模型-视图-视图模型 (MVVM)）也适用于构建 Web 应用程序。 React 是 Facebook 用于构建交互式 Web 应用程序的最流行的 JavaScript 库之一，许多 React Web 应用程序都采用基于单向 Flux/Redux 的架构。
+
+不同的应用程序有其独特的方面和讨论要点。 重要的是，您要专注于应用程序特有的部分，而不是花太多时间讨论适用于所有问题的通用内容。 首先，设计高级架构，确定系统中的组件以及组件之间的 API。 然后深入研究几个对问题有趣/独特且如何实现或优化它们的领域。
+
+### 示例
+
+以下是前端系统设计面试中常问的应用程序问题列表以及您应该关注的领域：
+
+| 应用程序 | 示例 | 重要领域 |
+| --- | --- | --- |
+| [新闻提要](/questions/system-design/news-feed-facebook) | Facebook、Twitter | 提要交互、提要分页方法、帖子撰写器 |
+| [消息/聊天](/questions/system-design/chat-application-messenger) | Messenger、Slack、Discord | 实时聊天、消息同步、消息列表、聊天列表 |
+| [电子商务市场](/questions/system-design/e-commerce-amazon) | 亚马逊、eBay | 产品列表页面、产品详细信息页面、购物车、结帐 |
+| [照片共享](/questions/system-design/photo-sharing-instagram) | Instagram、Flickr、Google Photos | 照片浏览、照片编辑、照片上传 |
+| [旅行预订](/questions/system-design/travel-booking-airbnb) | Airbnb、Skyscanner | 搜索 UI、搜索结果、预订 UI |
+| [视频流](/questions/system-design/video-streaming-netflix) | Netflix、YouTube | 视频播放器、视频流、推荐视频 |
+| [Pinterest](/questions/system-design/pinterest) | Pinterest | Masonry 布局实现和媒体提要优化 |
+| [协作应用程序](/questions/system-design/collaborative-editor-google-docs) | Google Docs、Google Sheets、Google Slides、Notion | 实时协作协议、冲突解决、状态同步 |
+| [电子邮件客户端](/questions/system-design/email-client-outlook) | Outlook、Apple Mail、Gmail | 邮箱同步、邮箱 UI、电子邮件撰写器 |
+| 绘图 | Figma、Excalidraw、Canva | 渲染方法、客户端状态/数据模型、状态管理 |
+| 地图 | Google/Apple Maps、Foursquare City Guide | 地图渲染、显示位置 |
+| 文件存储 | Google Drive、Dropbox | 文件上传、文件下载、文件资源管理器 |
+| 视频会议 | Zoom、Google Meet | 视频流、各种观看模式 |
+| 乘车共享 | Uber、Lyft | 行程预订、司机位置、应用程序状态 |
+| 音乐流 | Spotify、Apple Music | 音频流、音乐播放器 UI、播放列表 UI |
+| 游戏 | 俄罗斯方块、贪吃蛇 | 游戏状态、游戏循环、游戏逻辑 |
+
+## UI 组件
+
+在现代前端开发中，使用组件库来构建应用程序是很常见的。您可能以前使用过的一些流行的组件库包括 jQuery UI（多么老派！）、Bootstrap、Material UI、Chakra UI 等。
+
+前端工程师应该能够构建应用程序所需的各种 UI 组件。一些 UI 组件可能很容易构建（例如文本、按钮、徽章等），而另一些则可能更复杂（自动完成、下拉菜单、模态框等）。大多数情况下，如果您被要求设计一个 UI 组件，它将来自后一类。
+
+首先确定组件的子组件（例如，对于图像轮播，有图像、分页按钮、缩略图），定义组件的面向外部的 API（组件应该接受哪些选项/属性），描述内部组件状态，子组件之间的 API（如果相关），然后深入研究性能、可访问性、用户体验、安全性等方面的优化和考虑。
+
+您可能需要为以下一个或多个目的编写少量代码：
+
+1. 描述组件层次结构
+2. 描述组件状态的形状
+3. 解释组件内的一些非平凡逻辑
+
+```jsx
+<ImageCarousel
+  images={...}
+  onPrev={...}
+  onNext={...}
+  layout="horizontal">
+  <ImageCarouselImage style={...} />
+  <ImageThumbnail onClick={...} />
+</ImageCarousel>
+```
+
+### 自定义主题
+
+您肯定会被期望设计一种方式，让组件的用户（开发人员）自定义组件的外观。请参阅 [前端面试指南的 UI 组件 API 设计原则部分](/front-end-interview-guidebook/user-interface-components-api-design-principles)，以了解不同方法的概述和比较。
+
+### 示例
+
+前端系统设计面试中会问到的 UI 组件示例：
+
+* 设计一个 [自动完成组件](/questions/system-design/autocomplete)
+* 设计一个 [下拉菜单组件](/questions/system-design/dropdown-menu)
+* 设计一个 [可嵌入的轮询小部件](/questions/system-design/poll-widget)
+* 设计一个 [图片轮播](/questions/system-design/image-carousel)
+* 设计一个 [模态组件](/questions/system-design/modal-dialog)
+* 设计一个 [富文本编辑器](/questions/system-design/rich-text-editor)
+* 设计一个带有排序和分页的数据表
+* 设计一个日期选择器
+* 设计一个多选组件
+
+## 面试期间该做什么？
+
+既然您已经了解了在前端系统设计面试中可能被问到的问题，那么您应该如何回答呢？我们提出了 [RADIO 框架](/system-design/framework)，这是一种易于记忆的结构化方法，您可以使用它来应对前端系统设计面试问题。
diff --git a/questions/css-questions.md b/questions/css-questions.md
index c3bdaa5c9d..edf7a72dbd 100644
--- a/questions/css-questions.md
+++ b/questions/css-questions.md
@@ -1,549 +1,3 @@
 # CSS Questions
 
-Answers to [Front-end Job Interview Questions - CSS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/css-questions.md). Pull requests for suggestions and corrections are welcome!
-
-* [What is CSS selector specificity and how does it work?](#what-is-css-selector-specificity-and-how-does-it-work)
-* [What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?](#whats-the-difference-between-resetting-and-normalizing-css-which-would-you-choose-and-why)
-* [Describe `float`s and how they work.](#describe-floats-and-how-they-work)
-* [Describe z-index and how stacking context is formed.](#describe-z-index-and-how-stacking-context-is-formed)
-* [Describe BFC (Block Formatting Context) and how it works.](#describe-block-formatting-context-bfc-and-how-it-works)
-* [What are the various clearing techniques and which is appropriate for what context?](#what-are-the-various-clearing-techniques-and-which-is-appropriate-for-what-context)
-* [Explain CSS sprites, and how you would implement them on a page or site.](#explain-css-sprites-and-how-you-would-implement-them-on-a-page-or-site)
-* [How would you approach fixing browser-specific styling issues?](#how-would-you-approach-fixing-browser-specific-styling-issues)
-* [How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?](#how-do-you-serve-your-pages-for-feature-constrained-browsers-what-techniquesprocesses-do-you-use)
-* [What are the different ways to visually hide content (and make it available only for screen readers)?](#what-are-the-different-ways-to-visually-hide-content-and-make-it-available-only-for-screen-readers)
-* [Have you ever used a grid system, and if so, what do you prefer?](#have-you-ever-used-a-grid-system-and-if-so-what-do-you-prefer)
-* [Have you used or implemented media queries or mobile specific layouts/CSS?](#have-you-used-or-implemented-media-queries-or-mobile-specific-layoutscss)
-* [Are you familiar with styling SVG?](#are-you-familiar-with-styling-svg)
-* [Can you give an example of an @media property other than screen?](#can-you-give-an-example-of-an-media-property-other-than-screen)
-* [What are some of the "gotchas" for writing efficient CSS?](#what-are-some-of-the-gotchas-for-writing-efficient-css)
-* [What are the advantages/disadvantages of using CSS preprocessors?](#what-are-the-advantagesdisadvantages-of-using-css-preprocessors)
-* [Describe what you like and dislike about the CSS preprocessors you have used.](#describe-what-you-like-and-dislike-about-the-css-preprocessors-you-have-used)
-* [How would you implement a web design comp that uses non-standard fonts?](#how-would-you-implement-a-web-design-comp-that-uses-non-standard-fonts)
-* [Explain how a browser determines what elements match a CSS selector.](#explain-how-a-browser-determines-what-elements-match-a-css-selector)
-* [Describe pseudo-elements and discuss what they are used for.](#describe-pseudo-elements-and-discuss-what-they-are-used-for)
-* [Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.](#explain-your-understanding-of-the-box-model-and-how-you-would-tell-the-browser-in-css-to-render-your-layout-in-different-box-models)
-* [What does `* { box-sizing: border-box; }` do? What are its advantages?](#what-does---box-sizing-border-box--do-what-are-its-advantages)
-* [What is the CSS `display` property and can you give a few examples of its use?](#what-is-the-css-display-property-and-can-you-give-a-few-examples-of-its-use)
-* [What's the difference between `inline` and `inline-block`?](#whats-the-difference-between-inline-and-inline-block)
-* [What's the difference between a `relative`, `fixed`, `absolute` and `static`ally positioned element?](#whats-the-difference-between-a-relative-fixed-absolute-and-statically-positioned-element)
-* [What existing CSS frameworks have you used locally, or in production? How would you change/improve them?](#what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them)
-* [Have you played around with the new CSS Flexbox or Grid specs?](#have-you-played-around-with-the-new-css-flexbox-or-grid-specs)
-* [Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?](#can-you-explain-the-difference-between-coding-a-website-to-be-responsive-versus-using-a-mobile-first-strategy)
-* [How is responsive design different from adaptive design?](#how-is-responsive-design-different-from-adaptive-design)
-* [Have you ever worked with retina graphics? If so, when and what techniques did you use?](#have-you-ever-worked-with-retina-graphics-if-so-when-and-what-techniques-did-you-use)
-* [Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?](#is-there-any-reason-youd-want-to-use-translate-instead-of-absolute-positioning-or-vice-versa-and-why)
-
-### What is CSS selector specificity and how does it work?
-
-The browser determines what styles to show on an element depending on the specificity of CSS rules. We assume that the browser has already determined the rules that match a particular element. Among the matching rules, the specificity, four comma-separate values, `a, b, c, d` are calculated for each rule based on the following:
-
-1. `a` is whether inline styles are being used. If the property declaration is an inline style on the element, `a` is 1, else 0.
-2. `b` is the number of ID selectors.
-3. `c` is the number of classes, attributes and pseudo-classes selectors.
-4. `d` is the number of tags and pseudo-elements selectors.
-
-The resulting specificity is not a score, but a matrix of values that can be compared column by column. When comparing selectors to determine which has the highest specificity, look from left to right, and compare the highest value in each column. So a value in column `b` will override values in columns `c` and `d`, no matter what they might be. As such, specificity of `0,1,0,0` would be greater than one of `0,0,10,10`.
-
-In the cases of equal specificity: the latest rule is the one that counts. If you have written the same rule into your stylesheet (regardless of internal or external) twice, then the lower rule in your style sheet is closer to the element to be styled, it is deemed to be more specific and therefore will be applied.
-
-I would write CSS rules with low specificity so that they can be easily overridden if necessary. When writing CSS UI component library code, it is important that they have low specificities so that users of the library can override them without using too complicated CSS rules just for the sake of increasing specificity or resorting to `!important`.
-
-###### References
-
-* https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
-* https://www.sitepoint.com/web-foundations/specificity/
-
-[[↑] Back to top](#css-questions)
-
-### What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?
-
-* **Resetting** - Resetting is meant to strip all default browser styling on elements. For e.g. `margin`s, `padding`s, `font-size`s of all elements are reset to be the same. You will have to redeclare styling for common typographic elements.
-* **Normalizing** - Normalizing preserves useful default styles rather than "unstyling" everything. It also corrects bugs for common browser dependencies.
-
-I would choose resetting when I have a very customized or unconventional site design such that I need to do a lot of my own styling and do not need any default styling to be preserved.
-
-###### References
-
-* https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
-
-[[↑] Back to top](#css-questions)
-
-### Describe `float`s and how they work.
-
-Float is a CSS positioning property. Floated elements remain a part of the flow of the page, and will affect the positioning of other elements (e.g. text will flow around floated elements), unlike `position: absolute` elements, which are removed from the flow of the page.
-
-The CSS `clear` property can be used to be positioned below `left`/`right`/`both` floated elements.
-
-If a parent element contains nothing but floated elements, its height will be collapsed to nothing. It can be fixed by clearing the float after the floated elements in the container but before the close of the container.
-
-The `.clearfix` hack uses a clever CSS pseudo selector (`:after`) to clear floats. Rather than setting the overflow on the parent, you apply an additional class `clearfix` to it. Then apply this CSS:
-
-```css
-.clearfix:after {
-  content: ' ';
-  visibility: hidden;
-  display: block;
-  height: 0;
-  clear: both;
-}
-```
-
-Alternatively, give `overflow: auto` or `overflow: hidden` property to the parent element which will establish a new block formatting context inside the children and it will expand to contain its children.
-
-###### References
-
-* https://css-tricks.com/all-about-floats/
-
-[[↑] Back to top](#css-questions)
-
-### Describe `z-index` and how stacking context is formed.
-
-The `z-index` property in CSS controls the vertical stacking order of elements that overlap. `z-index` only affects elements that have a `position` value which is not `static`.
-
-Without any `z-index` value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning (and their children) will always appear on top of elements with default static positioning, regardless of HTML hierarchy.
-
-A stacking context is an element that contains a set of layers. Within a local stacking context, the `z-index` values of its children are set relative to that element rather than to the document root. Layers outside of that context — i.e. sibling elements of a local stacking context — can't sit between layers within it. If an element B sits on top of element A, a child element of element A, element C, can never be higher than element B even if element C has a higher `z-index` than element B.
-
-Each stacking context is self-contained - after the element's contents are stacked, the whole element is considered in the stacking order of the parent stacking context. A handful of CSS properties trigger a new stacking context, such as `opacity` less than 1, `filter` that is not `none`, and `transform` that is not`none`.
-
-###### References
-
-* https://css-tricks.com/almanac/properties/z/z-index/
-* https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
-* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
-
-[[↑] Back to top](#css-questions)
-
-### Describe Block Formatting Context (BFC) and how it works.
-
-A Block Formatting Context (BFC) is part of the visual CSS rendering of a web page in which block boxes are laid out. Floats, absolutely positioned elements, `inline-blocks`, `table-cells`, `table-caption`s, and elements with `overflow` other than `visible` (except when that value has been propagated to the viewport) establish new block formatting contexts.
-
-A BFC is an HTML box that satisfies at least one of the following conditions:
-
-* The value of `float` is not `none`.
-* The value of `position` is neither `static` nor `relative`.
-* The value of `display` is `table-cell`, `table-caption`, `inline-block`, `flex`, or `inline-flex`.
-* The value of `overflow` is not `visible`.
-
-In a BFC, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).
-
-Vertical margins between adjacent block-level boxes in a BFC collapse. Read more on [collapsing margins](https://www.sitepoint.com/web-foundations/collapsing-margins/).
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-* https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
-
-[[↑] Back to top](#css-questions)
-
-### What are the various clearing techniques and which is appropriate for what context?
-
-* Empty `div` method - `<div style="clear:both;"></div>`.
-* Clearfix method - Refer to the `.clearfix` class above.
-* `overflow: auto` or `overflow: hidden` method - Parent will establish a new block formatting context and expand to contains its floated children.
-
-In large projects, I would write a utility `.clearfix` class and use them in places where I need it. `overflow: hidden` might clip children if the children is taller than the parent and is not very ideal.
-
-[[↑] Back to top](#css-questions)
-
-### Explain CSS sprites, and how you would implement them on a page or site.
-
-CSS sprites combine multiple images into one single larger image. It is a commonly-used technique for icons (Gmail uses it). How to implement it:
-
-1. Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.
-1. Each image would have a corresponding CSS class with `background-image`, `background-position` and `background-size` properties defined.
-1. To use that image, add the corresponding class to your element.
-
-**Advantages:**
-
-* Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue.
-* Advance downloading of assets that won't be downloaded until needed, such as images that only appear upon `:hover` pseudo-states. Blinking wouldn't be seen.
-
-###### References
-
-* https://css-tricks.com/css-sprites/
-
-[[↑] Back to top](#css-questions)
-
-### How would you approach fixing browser-specific styling issues?
-
-* After identifying the issue and the offending browser, use a separate style sheet that only loads when that specific browser is being used. This technique requires server-side rendering though.
-* Use libraries like Bootstrap that already handles these styling issues for you.
-* Use `autoprefixer` to automatically add vendor prefixes to your code.
-* Use Reset CSS or Normalize.css.
-
-[[↑] Back to top](#css-questions)
-
-### How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?
-
-* Graceful degradation - The practice of building an application for modern browsers while ensuring it remains functional in older browsers.
-* Progressive enhancement - The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
-* Use [caniuse.com](https://caniuse.com/) to check for feature support.
-* Autoprefixer for automatic vendor prefix insertion.
-* Feature detection using [Modernizr](https://modernizr.com/).
-* Use CSS Feature queries [@support](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
-
-[[↑] Back to top](#css-questions)
-
-### What are the different ways to visually hide content (and make it available only for screen readers)?
-
-These techniques are related to accessibility (a11y).
-
-* `visibility: hidden`. However, the element is still in the flow of the page, and still takes up space.
-* `width: 0; height: 0`. Make the element not take up any space on the screen at all, resulting in not showing it.
-* `position: absolute; left: -99999px`. Position it outside of the screen.
-* `text-indent: -9999px`. This only works on text within the `block` elements.
-* Metadata. For example by using Schema.org, RDF, and JSON-LD.
-* WAI-ARIA. A W3C technical specification that specifies how to increase the accessibility of web pages.
-
-Even if WAI-ARIA is the ideal solution, I would go with the `absolute` positioning approach, as it has the least caveats, works for most elements and it's an easy technique.
-
-###### References
-
-* https://www.w3.org/TR/wai-aria-1.1/
-* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
-* http://a11yproject.com/
-
-[[↑] Back to top](#css-questions)
-
-### Have you ever used a grid system, and if so, what do you prefer?
-
-I like the `float`-based grid system because it still has the most browser support among the alternative existing systems (flex, grid). It has been used in Bootstrap for years and has been proven to work.
-
-[[↑] Back to top](#css-questions)
-
-### Have you used or implemented media queries or mobile-specific layouts/CSS?
-
-Yes. An example would be transforming a stacked pill navigation into a fixed-bottom tab navigation beyond a certain breakpoint.
-
-[[↑] Back to top](#css-questions)
-
-### Are you familiar with styling SVG?
-
-Yes, there are several ways to color shapes (including specifying attributes on the object) using inline CSS, an embedded CSS section, or an external CSS file. Most SVG you'll find around the web use inline CSS, but there are advantages and disadvantages associated with each type.
-
-Basic coloring can be done by setting two attributes on the node: `fill` and `stroke`. `fill` sets the color inside the object and `stroke` sets the color of the line drawn around the object. You can use the same CSS color naming schemes that you use in HTML, whether that's color names (that is `red`), RGB values (that is `rgb(255,0,0)`), Hex values, RGBA values, etc.
-
-```html
-<rect x="10" y="10" width="100" height="100" stroke="blue" 
-  fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
-```
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
-
-[[↑] Back to top](#css-questions)
-
-### Can you give an example of an @media property other than screen?
-
-Yes, there are four types of @media properties (including _screen_):
-
-* `all` - for all media type devices
-* `print` - for printers
-* `speech` - for screenreaders that "reads" the page out loud
-* `screen` - for computer screens, tablets, smart-phones etc.
-
-Here is an example of `print` media type's usage:
-
-```css
-@media print {
-  body {
-    color: black;
-  }
-}
-```
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
-
-[[↑] Back to top](#css-questions)
-
-### What are some of the "gotchas" for writing efficient CSS?
-
-Firstly, understand that browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector. Hence avoid key selectors that are tag and universal selectors. They match a large number of elements and browsers will have to do more work in determining if the parents do match.
-
-[BEM (Block Element Modifier)](https://bem.info/) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.
-
-Be aware of which CSS properties trigger reflow, repaint, and compositing. Avoid writing styles that change the layout (trigger reflow) where possible.
-
-###### References
-
-* https://developers.google.com/web/fundamentals/performance/rendering/
-* https://csstriggers.com/
-
-[[↑] Back to top](#css-questions)
-
-### What are the advantages/disadvantages of using CSS preprocessors?
-
-**Advantages:**
-
-* CSS is made more maintainable.
-* Easy to write nested selectors.
-* Variables for consistent theming. Can share theme files across different projects.
-* Mixins to generate repeated CSS.
-* Splitting your code into multiple files. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.
-
-**Disadvantages:**
-
-* Requires tools for preprocessing. Re-compilation time can be slow.
-
-[[↑] Back to top](#css-questions)
-
-### Describe what you like and dislike about the CSS preprocessors you have used.
-
-**Likes:**
-
-* Mostly the advantages mentioned above.
-* Less is written in JavaScript, which plays well with Node.
-
-**Dislikes:**
-
-* I use Sass via `node-sass`, which is a binding for LibSass written in C++. I have to frequently recompile it when switching between node versions.
-* In Less, variable names are prefixed with `@`, which can be confused with native CSS keywords like `@media`, `@import` and `@font-face` rule.
-
-[[↑] Back to top](#css-questions)
-
-### How would you implement a web design comp that uses non-standard fonts?
-
-Use `@font-face` and define `font-family` for different `font-weight`s.
-
-[[↑] Back to top](#css-questions)
-
-### Explain how a browser determines what elements match a CSS selector.
-
-This part is related to the above about writing efficient CSS. Browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.
-
-For example with this selector `p span`, browsers firstly find all the `<span>` elements and traverse up its parent all the way up to the root to find the `<p>` element. For a particular `<span>`, as soon as it finds a `<p>`, it knows that the `<span>` matches and can stop its matching.
-
-###### References
-
-* https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
-
-[[↑] Back to top](#css-questions)
-
-### Describe pseudo-elements and discuss what they are used for.
-
-A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (`:first-line`, `:first-letter`) or adding elements to the markup (combined with `content: ...`) without having to modify the markup (`:before`, `:after`).
-
-* `:first-line` and `:first-letter` can be used to decorate text.
-* Used in the `.clearfix` hack as shown above to add a zero-space element with `clear: both`.
-* Triangular arrows in tooltips use `:before` and `:after`. Encourages separation of concerns because the triangle is considered part of styling and not really the DOM. It's not really possible to draw a triangle with just CSS styles without using an additional HTML element.
-
-###### References
-
-* https://css-tricks.com/almanac/selectors/a/after-and-before/
-
-[[↑] Back to top](#css-questions)
-
-### Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.
-
-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.
-
-The CSS box model is responsible for calculating:
-
-* How much space a block element takes up.
-* Whether or not borders and/or margins overlap, or collapse.
-* A box's dimensions.
-
-The box model has the following rules:
-
-* The dimensions of a block element are calculated by `width`, `height`, `padding`, `border`s, and `margin`s.
-* If no `height` is specified, a block element will be as high as the content it contains, plus `padding` (unless there are floats, for which see below).
-* If no `width` is specified, a non-floated block element will expand to fit the width of its parent minus `padding`.
-* The `height` of an element is calculated by the content's `height`.
-* The `width` of an element is calculated by the content's `width`.
-* By default, `padding`s and `border`s are not part of the `width` and `height` of an element.
-
-###### References
-
-* https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
-
-[[↑] Back to top](#css-questions)
-
-### What does `* { box-sizing: border-box; }` do? What are its advantages?
-
-* By default, elements have `box-sizing: content-box` applied, and only the content size is being accounted for.
-* `box-sizing: border-box` changes how the `width` and `height` of elements are being calculated, `border` and `padding` are also being included in the calculation.
-* The `height` of an element is now calculated by the content's `height` + vertical `padding` + vertical `border` width.
-* The `width` of an element is now calculated by the content's `width` + horizontal `padding` + horizontal `border` width.
-* Taking into account `padding`s and `border`s as part of our box model resonates better with how designers actually imagine content in grids.
-
-###### References
-
-* https://www.paulirish.com/2012/box-sizing-border-box-ftw/
-
-[[↑] Back to top](#css-questions)
-
-### What is the CSS `display` property and can you give a few examples of its use?
-
-* `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`.
-
-TODO
-
-[[↑] Back to top](#css-questions)
-
-### What's the difference between `inline` and `inline-block`?
-
-I shall throw in a comparison with `block` for good measure.
-
-|                                      | `block`                                                                                     | `inline-block`                                                      | `inline`                                                                                                                                                                                                             |
-| ------------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Size                                 | Fills up the width of its parent container.                                                 | Depends on content.                                                 | Depends on content.                                                                                                                                                                                                  |
-| Positioning                          | Start on a new line and tolerates no HTML elements next to it (except when you add `float`) | Flows along with other content and allows other elements beside it. | Flows along with other content and allows other elements beside it.                                                                                                                                                  |
-| Can specify `width` and `height`     | Yes                                                                                         | Yes                                                                 | No. Will ignore if being set.                                                                                                                                                                                        |
-| Can be aligned with `vertical-align` | No                                                                                          | Yes                                                                 | Yes                                                                                                                                                                                                                  |
-| Margins and paddings                 | All sides respected.                                                                        | All sides respected.                                                | Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on `line-height`, even though the `border` and `padding` appear visually around the content. |
-| Float                                | -                                                                                           | -                                                                   | Becomes like a `block` element where you can set vertical margins and paddings.                                                                                                                                      |
-
-[[↑] Back to top](#css-questions)
-
-### What's the difference between a `relative`, `fixed`, `absolute` and `static`ally positioned element?
-
-A positioned element is an element whose computed `position` property is either `relative`, `absolute`, `fixed` or `sticky`.
-
-* `static` - The default position; the element will flow into the page as it normally would. The `top`, `right`, `bottom`, `left` and `z-index` properties do not apply.
-* `relative` - The element's position is adjusted relative to itself, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).
-* `absolute` - The element is removed from the flow of the page and positioned at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins. These elements do not affect the position of other elements.
-* `fixed` - The element is removed from the flow of the page and positioned at a specified position relative to the viewport and doesn't move when scrolled.
-* `sticky` - Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as `relative` positioned until it crosses a specified threshold, at which point it is treated as `fixed` positioned.
-
-###### References
-
-* https://developer.mozilla.org/en/docs/Web/CSS/position
-
-[[↑] Back to top](#css-questions)
-
-### What existing CSS frameworks have you used locally, or in production? How would you change/improve them?
-
-* **Bootstrap** - Slow release cycle. Bootstrap 4 has been in alpha for almost 2 years. Add a spinner button component, as it is widely used.
-* **Semantic UI** - Source code structure makes theme customization extremely hard to understand. Its unconventional theming system is a pain to customize. Hardcoded config path within the vendor library. Not well-designed for overriding variables unlike in Bootstrap.
-* **Bulma** - A lot of non-semantic and superfluous classes and markup required. Not backward compatible. Upgrading versions breaks the app in subtle manners.
-
-[[↑] Back to top](#css-questions)
-
-### Have you played around with the new CSS Flexbox or Grid specs?
-
-Yes. Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts.
-
-Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. Bootstrap and Bulma are based on Flexbox, and it is probably the recommended way to create layouts these days. Have tried Flexbox before but ran into some browser incompatibility issues (Safari) in using `flex-grow`, and I had to rewrite my code using `inline-blocks` and math to calculate the widths in percentages, it wasn't a nice experience.
-
-Grid is by far the most intuitive approach for creating grid-based layouts (it better be!) but browser support is not wide at the moment.
-
-###### References
-
-* https://philipwalton.github.io/solved-by-flexbox/
-
-[[↑] Back to top](#css-questions)
-
-### Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?
-
-Note that these two 2 approaches are not exclusive.
-
-Making a website responsive means the some elements will respond by adapting its size or other functionality according to the device's screen size, typically the viewport width, through CSS media queries, for example, making the font size smaller on smaller devices.
-
-```css
-@media (min-width: 601px) {
-  .my-class {
-    font-size: 24px;
-  }
-}
-@media (max-width: 600px) {
-  .my-class {
-    font-size: 12px;
-  }
-}
-```
-
-A mobile-first strategy is also responsive, however it agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to other devices later. Following the previous example:
-
-```css
-.my-class {
-  font-size: 12px;
-}
-
-@media (min-width: 600px) {
-  .my-class {
-    font-size: 24px;
-  }
-}
-```
-
-A mobile-first strategy has 2 main advantages:
-
-* It's more performant on mobile devices, since all the rules applied for them don't have to be validated against any media queries.
-* It forces to write cleaner code in respect to responsive CSS rules.
-
-[[↑] Back to top](#css-questions)
-
-### How is responsive design different from adaptive design?
-
-Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on.
-
-Responsive design works on the principle of flexibility - a single fluid website that can look good on any device. Responsive websites use media queries, flexible grids, and responsive images to create a user experience that flexes and changes based on a multitude of factors. Like a single ball growing or shrinking to fit through several different hoops.
-
-Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. The site detects the type of device used and delivers the pre-set layout for that device. Instead of a single ball going through several different-sized hoops, you'd have several different balls to use depending on the hoop size.
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design
-* http://mediumwell.com/responsive-adaptive-mobile/
-* https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
-
-[[↑] Back to top](#css-questions)
-
-### Have you ever worked with retina graphics? If so, when and what techniques did you use?
-
-_Retina_ is just a marketing term to refer to high resolution screens with a pixel ratio bigger than 1. The key thing to know is that using a pixel ratio means these displays are emulating a lower resolution screen in order to show elements with the same size. Nowadays we consider all mobile devices _retina_ defacto displays.
-
-Browsers by default render DOM elements according to the device resolution, except for images.
-
-In order to have crisp, good-looking graphics that make the best of retina displays we need to use high resolution images whenever possible. However using always the highest resolution images will have an impact on performance as more bytes will need to be sent over the wire.
-
-To overcome this problem, we can use responsive images, as specified in HTML5. It requires making available different resolution files of the same image to the browser and let it decide which image is best, using the html attribute `srcset` and optionally `sizes`, for instance:
-
-```html
-<div responsive-background-image>  
-  <img src="/images/test-1600.jpg"
-    sizes="
-      (min-width: 768px) 50vw,
-      (min-width: 1024px) 66vw,
-      100vw"
-    srcset="
-      /images/test-400.jpg 400w,
-      /images/test-800.jpg 800w,
-      /images/test-1200.jpg 1200w">
-</div>
-```
-
-It is important to note that browsers which don't support HTML5's `srcset` (i.e. IE11) will ignore it and use `src` instead. If we really need to support IE11 and we want to provide this feature for performance reasons, we can use a JavaScript polyfill, e.g. Picturefill (link in the references).
-
-For icons, I would also opt to use SVGs and icon fonts where possible, as they render very crisply regardless of resolution.
-
-###### References
-
-* https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
-* http://scottjehl.github.io/picturefill/
-* https://aclaes.com/responsive-background-images-with-srcset-and-sizes/
-
-[[↑] Back to top](#css-questions)
-
-### Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?
-
-`translate()` is a value of CSS `transform`. Changing `transform` or `opacity` does not trigger browser reflow or repaint but does trigger compositions; whereas changing the absolute positioning triggers `reflow`. `transform` causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence `translate()` is more efficient and will result in shorter paint times for smoother animations.
-
-When using `translate()`, the element still occupies its original space (sort of like `position: relative`), unlike in changing the absolute positioning.
-
-###### References
-
-* https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
-
-[[↑] Back to top](#css-questions)
-
-### Other Answers
-
-* https://neal.codes/blog/front-end-interview-css-questions
-* https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/
-* http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
+Moved to [new location](https://www.frontendinterviewhandbook.com/css-questions/).
diff --git a/questions/html-questions.md b/questions/html-questions.md
index 649a0cf3d7..93bdade681 100644
--- a/questions/html-questions.md
+++ b/questions/html-questions.md
@@ -1,204 +1,3 @@
 # HTML Questions
 
-Answers to [Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/html-questions.md). Pull requests for suggestions and corrections are welcome!
-
-* [What does a doctype do?](#what-does-a-doctype-do)
-* [How do you serve a page with content in multiple languages?](#how-do-you-serve-a-page-with-content-in-multiple-languages)
-* [What kind of things must you be wary of when design or developing for multilingual sites?](#what-kind-of-things-must-you-be-wary-of-when-designing-or-developing-for-multilingual-sites)
-* [What are `data-` attributes good for?](#what-are-data--attributes-good-for)
-* [Consider HTML5 as an open web platform. What are the building blocks of HTML5?](#consider-html5-as-an-open-web-platform-what-are-the-building-blocks-of-html5)
-* [Describe the difference between a `cookie`, `sessionStorage` and `localStorage`.](#describe-the-difference-between-a-cookie-sessionstorage-and-localstorage)
-* [Describe the difference between `<script>`, `<script async>` and `<script defer>`.](#describe-the-difference-between-script-script-async-and-script-defer)
-* [Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`? Do you know any exceptions?](#why-is-it-generally-a-good-idea-to-position-css-links-between-headhead-and-js-scripts-just-before-body-do-you-know-any-exceptions)
-* [What is progressive rendering?](#what-is-progressive-rendering)
-* [Why you would use a `srcset` attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.](#why-you-would-use-a-srcset-attribute-in-an-image-tag-explain-the-process-the-browser-uses-when-evaluating-the-content-of-this-attribute)
-* [Have you used different HTML templating languages before?](#have-you-used-different-html-templating-languages-before)
-
-### What does a DOCTYPE do?
-
-**DOCTYPE** is an abbreviation for **DOCument TYPE**.  
-A DOCTYPE is always associated to a **DTD** - for **Document Type Definition**.  
-
-A DTD defines how documents of a certain type should be structured (i.e. a `button` can contain a `span` but not a `div`), whereas a DOCTYPE declares what DTD a document *supposedly* respects (i.e. this document respects the HTML DTD).  
-
-For webpages, the DOCTYPE declation is required. It is used to tell user agents what version of the HTML specifications your document respects.  
-Once a user agent has recognized a correct DOCTYPE, it will trigger the **no-quirks mode** matching this DOCTYPE for reading the document.  
-If a user agent doesn't recognize a correct DOCTYPE, it will trigger the **quirks mode**.
-
-The DOCTYPE declaration for the HTML5 standards is `<!DOCTYPE html>`.
-
-###### References
-
-* https://html.spec.whatwg.org/multipage/syntax.html#the-doctype
-* https://html.spec.whatwg.org/multipage/xhtml.html
-* https://quirks.spec.whatwg.org/
-
-[[↑] Back to top](#html-questions)
-
-### How do you serve a page with content in multiple languages?
-
-The question is a little vague, I will assume that it is asking about the most common case, which is how to serve a page with content available in multiple languages, but the content within the page should be displayed only in one consistent language.
-
-When an HTTP request is made to a server, the requesting user agent usually sends information about language preferences, such as in the `Accept-Language` header. The server can then use this information to return a version of the document in the appropriate language if such an alternative is available. The returned HTML document should also declare the `lang` attribute in the `<html>` tag, such as `<html lang="en">...</html>`.
-
-In the back end, the HTML markup will contain `i18n` placeholders and content for the specific language stored in YML or JSON formats. The server then dynamically generates the HTML page with content in that particular language, usually with the help of a back end framework.
-
-###### References
-
-* https://www.w3.org/International/getting-started/language
-
-[[↑] Back to top](#html-questions)
-
-### What kind of things must you be wary of when designing or developing for multilingual sites?
-
-* Use `lang` attribute in your HTML.
-* Directing users to their native language - Allow a user to change his country/language easily without hassle.
-* Text in images is not a scalable approach - Placing text in an image is still a popular way to get good-looking, non-system fonts to display on any computer. However, to translate image text, each string of text will need to have it's a separate image created for each language. Anything more than a handful of replacements like this can quickly get out of control.
-* Restrictive words/sentence length - Some content can be longer when written in another language. Be wary of layout or overflow issues in the design. It's best to avoid designing where the amount of text would make or break a design. Character counts come into play with things like headlines, labels, and buttons. They are less of an issue with free-flowing text such as body text or comments.
-* Be mindful of how colors are perceived - Colors are perceived differently across languages and cultures. The design should use color appropriately.
-* Formatting dates and currencies - Calendar dates are sometimes presented in different ways. Eg. "May 31, 2012" in the U.S. vs. "31 May 2012" in parts of Europe.
-* Do not concatenate translated strings - Do not do anything like `"The date today is " + date`. It will break in languages with different word order. Use a template string with parameters substitution for each language instead. For example, look at the following two sentences in English and Chinese respectively: `I will travel on {% date %}` and `{% date %} 我会出发`. Note that the position of the variable is different due to grammar rules of the language.
-* Language reading direction - In English, we read from left-to-right, top-to-bottom, in traditional Japanese, text is read up-to-down, right-to-left.
-
-###### References
-
-* https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
-
-[[↑] Back to top](#html-questions)
-
-### What are `data-` attributes good for?
-
-Before JavaScript frameworks became popular, front end developers used `data-` attributes to store extra data within the DOM itself, without other hacks such as non-standard attributes, extra properties on the DOM. It is intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
-
-These days, using `data-` attributes is not encouraged. One reason is that users can modify the data attribute easily by using inspect element in the browser. The data model is better stored within JavaScript itself and stay updated with the DOM via data binding possibly through a library or a framework.
-
-###### References
-
-* http://html5doctor.com/html5-custom-data-attributes/
-* https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
-
-[[↑] Back to top](#html-questions)
-
-### Consider HTML5 as an open web platform. What are the building blocks of HTML5?
-
-* Semantics - Allowing you to describe more precisely what your content is.
-* Connectivity - Allowing you to communicate with the server in new and innovative ways.
-* Offline and storage - Allowing webpages to store data on the client-side locally and operate offline more efficiently.
-* Multimedia - Making video and audio first-class citizens in the Open Web.
-* 2D/3D graphics and effects - Allowing a much more diverse range of presentation options.
-* Performance and integration - Providing greater speed optimization and better usage of computer hardware.
-* Device access - Allowing for the usage of various input and output devices.
-* Styling - Letting authors write more sophisticated themes.
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
-
-[[↑] Back to top](#html-questions)
-
-### Describe the difference between a `cookie`, `sessionStorage` and `localStorage`.
-
-All the above-mentioned technologies are key-value storage mechanisms on the client side. They are only able to store values as strings.
-
-|                                        | `cookie`                                                 | `localStorage` | `sessionStorage` |
-| -------------------------------------- | -------------------------------------------------------- | -------------- | ---------------- |
-| Initiator                              | Client or server. Server can use `Set-Cookie` header     | Client         | Client           |
-| Expiry                                 | Manually set                                             | Forever        | On tab close     |
-| Persistent across browser sessions     | Depends on whether expiration is set                     | Yes            | No               |
-| Sent to server with every HTTP request | Cookies are automatically being sent via `Cookie` header | No             | No               |
-| Capacity (per domain)                  | 4kb                                                      | 5MB            | 5MB              |
-| Accessibility                          | Any window                                               | Any window     | Same tab         |
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
-* http://tutorial.techaltum.com/local-and-session-storage.html
-
-[[↑] Back to top](#html-questions)
-
-### Describe the difference between `<script>`, `<script async>` and `<script defer>`.
-
-* `<script>` - HTML parsing is blocked, the script is fetched and executed immediately, HTML parsing resumes after the script is executed.
-* `<script async>` - The script will be fetched in parallel to HTML parsing and executed as soon as it is available (potentially before HTML parsing completes). Use `async` when the script is independent of any other scripts on the page, for example, analytics.
-* `<script defer>` - The script will be fetched in parallel to HTML parsing and executed when the page has finished parsing. If there are multiple of them, each deferred script is executed in the order they were encoun­tered in the document. If a script relies on a fully-parsed DOM, the `defer` attribute will be useful in ensuring that the HTML is fully parsed before executing. There's not much difference in putting a normal `<script>` at the end of `<body>`. A deferred script must not contain `document.write`.
-
-Note: The `async` and `defer` attrib­utes are ignored for scripts that have no `src` attribute.
-
-###### References
-
-* http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
-* https://stackoverflow.com/questions/10808109/script-tag-async-defer
-* https://bitsofco.de/async-vs-defer/
-
-[[↑] Back to top](#html-questions)
-
-### Why is it generally a good idea to position CSS `<link>`s between `<head></head>` and JS `<script>`s just before `</body>`? Do you know any exceptions?
-
-**Placing `<link>`s in the `<head>`**
-
-Putting `<link>`s in the head is part of the specification. Besides that, placing at the top allows the page to render progressively which improves the user experience. The problem with putting stylesheets near the bottom of the document is that it prohibits progressive rendering in many browsers, including Internet Explorer. Some browsers block rendering to avoid having to repaint elements of the page if their styles change. The user is stuck viewing a blank white page. It prevents the flash of unstyled contents.
-
-**Placing `<script>`s just before `</body>`**
-
-`<script>`s block HTML parsing while they are being downloaded and executed. Downloading the scripts at the bottom will allow the HTML to be parsed and displayed to the user first.
-
-An exception for positioning of `<script>`s at the bottom is when your script contains `document.write()`, but these days it's not a good practice to use `document.write()`. Also, placing `<script>`s at the bottom means that the browser cannot start downloading the scripts until the entire document is parsed. One possible workaround is to put `<script>` in the `<head>` and use the `defer` attribute.
-
-###### References
-
-* https://developer.yahoo.com/performance/rules.html#css_top
-
-[[↑] Back to top](#html-questions)
-
-### What is progressive rendering?
-
-Progressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.
-
-It used to be much more prevalent in the days before broadband internet but it is still used in modern development as mobile data connections are becoming increasingly popular (and unreliable)!
-
-Examples of such techniques:
-
-* Lazy loading of images - Images on the page are not loaded all at once. JavaScript will be used to load an image when the user scrolls into the part of the page that displays the image.
-* Prioritizing visible content (or above-the-fold rendering) - Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the `DOMContentLoaded`/`load` event to load in other resources and content.
-* Async HTML fragments - Flushing parts of the HTML to the browser as the page is constructed on the back end. More details on the technique can be found [here](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
-
-###### References
-
-* https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
-* http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
-
-[[↑] Back to top](#html-questions)
-
-### Why you would use a `srcset` attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
-
-You would use the `srcset` attribute when you want to serve different images to users depending on their device display width - serve higher quality images to devices with retina display enhances the user experience while serving lower resolution images to low-end devices increase performance and decrease data wastage (because serving a larger image will not have any visible difference). For example: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` tells the browser to display the small, medium or large `.jpg` graphic depending on the client's resolution. The first value is the image name and the second is the width of the image in pixels. For a device width of 320px, the following calculations are made:
-
-* 500 / 320 = 1.5625
-* 1000 / 320 = 3.125
-* 2000 / 320 = 6.25
-
-If the client's resolution is 1x, 1.5625 is the closest, and `500w` corresponding to `small.jpg` will be selected by the browser.
-
-If the resolution is retina (2x), the browser will use the closest resolution above the minimum. Meaning it will not choose the 500w (1.5625) because it is greater than 1 and the image might look bad. The browser would then choose the image with a resulting ratio closer to 2 which is 1000w (3.125).
-
-`srcset`s solve the problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low-density screens.
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
-* https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
-
-[[↑] Back to top](#html-questions)
-
-### Have you used different HTML templating languages before?
-
-Yes, Pug (formerly Jade), ERB, Slim, Handlebars, Jinja, Liquid, just to name a few. In my opinion, they are more or less the same and provide similar functionality of escaping content and helpful filters for manipulating the data to be displayed. Most templating engines will also allow you to inject your own filters in the event you need custom processing before display.
-
-[[↑] Back to top](#html-questions)
-
-### Other Answers
-
-* https://neal.codes/blog/front-end-interview-questions-html/
-* http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
-
----
+Moved to [new location](https://www.frontendinterviewhandbook.com/html-questions/).
diff --git a/questions/javascript-questions.md b/questions/javascript-questions.md
index 7acefd26e6..61c182011b 100644
--- a/questions/javascript-questions.md
+++ b/questions/javascript-questions.md
@@ -1,1248 +1,3 @@
-## JS Questions
+# JavaScript Questions
 
-Answers to [Front-end Job Interview Questions - JS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/javascript-questions.md). Pull requests for suggestions and corrections are welcome!
-
-* [Explain event delegation](#explain-event-delegation)
-* [Explain how `this` works in JavaScript](#explain-how-this-works-in-javascript)
-* [Explain how prototypal inheritance works](#explain-how-prototypal-inheritance-works)
-* [What do you think of AMD vs CommonJS?](#what-do-you-think-of-amd-vs-commonjs)
-* [Explain why the following doesn't work as an IIFE: `function foo(){ }();`. What needs to be changed to properly make it an IIFE?](#explain-why-the-following-doesnt-work-as-an-iife-function-foo--what-needs-to-be-changed-to-properly-make-it-an-iife)
-* [What's the difference between a variable that is: `null`, `undefined` or undeclared? How would you go about checking for any of these states?](#whats-the-difference-between-a-variable-that-is-null-undefined-or-undeclared-how-would-you-go-about-checking-for-any-of-these-states)
-* [What is a closure, and how/why would you use one?](#what-is-a-closure-and-howwhy-would-you-use-one)
-* [Can you describe the main difference between a `.forEach` loop and a `.map()` loop and why you would pick one versus the other?](#can-you-describe-the-main-difference-between-a-foreach-loop-and-a-map-loop-and-why-you-would-pick-one-versus-the-other)
-* [What's a typical use case for anonymous functions?](#whats-a-typical-use-case-for-anonymous-functions)
-* [How do you organize your code? (module pattern, classical inheritance?)](#how-do-you-organize-your-code-module-pattern-classical-inheritance)
-* [What's the difference between host objects and native objects?](#whats-the-difference-between-host-objects-and-native-objects)
-* [Difference between: `function Person(){}`, `var person = Person()`, and `var person = new Person()`?](#difference-between-function-person-var-person--person-and-var-person--new-person)
-* [What's the difference between `.call` and `.apply`?](#whats-the-difference-between-call-and-apply)
-* [Explain `Function.prototype.bind`.](#explain-functionprototypebind)
-* [When would you use `document.write()`?](#when-would-you-use-documentwrite)
-* [What's the difference between feature detection, feature inference, and using the UA string?](#whats-the-difference-between-feature-detection-feature-inference-and-using-the-ua-string)
-* [Explain Ajax in as much detail as possible.](#explain-ajax-in-as-much-detail-as-possible)
-* [What are the advantages and disadvantages of using Ajax?](#what-are-the-advantages-and-disadvantages-of-using-ajax)
-* [Explain how JSONP works (and how it's not really Ajax).](#explain-how-jsonp-works-and-how-its-not-really-ajax)
-* [Have you ever used JavaScript templating? If so, what libraries have you used?](#have-you-ever-used-javascript-templating-if-so-what-libraries-have-you-used)
-* [Explain "hoisting".](#explain-hoisting)
-* [Describe event bubbling.](#describe-event-bubbling)
-* [What's the difference between an "attribute" and a "property"?](#whats-the-difference-between-an-attribute-and-a-property)
-* [Why is extending built-in JavaScript objects not a good idea?](#why-is-extending-built-in-javascript-objects-not-a-good-idea)
-* [Difference between document `load` event and document `DOMContentLoaded` event?](#difference-between-document-load-event-and-document-domcontentloaded-event)
-* [What is the difference between `==` and `===`?](#what-is-the-difference-between--and-)
-* [Explain the same-origin policy with regards to JavaScript.](#explain-the-same-origin-policy-with-regards-to-javascript)
-* [Make this work: `duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]`](#make-this-work)
-* [Why is it called a Ternary expression, what does the word "Ternary" indicate?](#why-is-it-called-a-ternary-expression-what-does-the-word-ternary-indicate)
-* [What is "use strict";? what are the advantages and disadvantages to using it?](#what-is-use-strict-what-are-the-advantages-and-disadvantages-to-using-it)
-* [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](#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)
-* [Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?](#why-is-it-in-general-a-good-idea-to-leave-the-global-scope-of-a-website-as-is-and-never-touch-it)
-* [Why would you use something like the `load` event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?](#why-would-you-use-something-like-the-load-event-does-this-event-have-disadvantages-do-you-know-any-alternatives-and-why-would-you-use-those)
-* [Explain what a single page app is and how to make one SEO-friendly.](#explain-what-a-single-page-app-is-and-how-to-make-one-seo-friendly)
-* [What is the extent of your experience with Promises and/or their polyfills?](#what-is-the-extent-of-your-experience-with-promises-andor-their-polyfills)
-* [What are the pros and cons of using Promises instead of callbacks?](#what-are-the-pros-and-cons-of-using-promises-instead-of-callbacks)
-* [What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?](#what-are-some-of-the-advantagesdisadvantages-of-writing-javascript-code-in-a-language-that-compiles-to-javascript)
-* [What tools and techniques do you use debugging JavaScript code?](#what-tools-and-techniques-do-you-use-for-debugging-javascript-code)
-* [What language constructions do you use for iterating over object properties and array items?](#what-language-constructions-do-you-use-for-iterating-over-object-properties-and-array-items)
-* [Explain the difference between mutable and immutable objects.](#explain-the-difference-between-mutable-and-immutable-objects)
-* [Explain the difference between synchronous and asynchronous functions.](#explain-the-difference-between-synchronous-and-asynchronous-functions)
-* [What is event loop? What is the difference between call stack and task queue?](#what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue)
-* [Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}`](#explain-the-differences-on-the-usage-of-foo-between-function-foo--and-var-foo--function-)
-* [What are the differences between variables created using `let`, `var` or `const`?](#what-are-the-differences-between-variables-created-using-let-var-or-const)
-* [What are the differences between ES6 class and ES5 function constructors?](#what-are-the-differences-between-es6-class-and-es5-function-constructors)
-* [Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?](#can-you-offer-a-use-case-for-the-new-arrow--function-syntax-how-does-this-new-syntax-differ-from-other-functions)
-* [What advantage is there for using the arrow syntax for a method in a constructor?](#what-advantage-is-there-for-using-the-arrow-syntax-for-a-method-in-a-constructor)
-* [What is the definition of a higher-order function?](#what-is-the-definition-of-a-higher-order-function)
-* [Can you give an example for destructuring an object or an array?](#can-you-give-an-example-for-destructuring-an-object-or-an-array)
-* [ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example?](#es6-template-literals-offer-a-lot-of-flexibility-in-generating-strings-can-you-give-an-example)
-* [Can you give an example of a curry function and why this syntax offers an advantage?](#can-you-give-an-example-of-a-curry-function-and-why-this-syntax-offers-an-advantage)
-* [What are the benefits of using spread syntax and how is it different from rest syntax?](#what-are-the-benefits-of-using-spread-syntax-and-how-is-it-different-from-rest-syntax)
-* [How can you share code between files?](#how-can-you-share-code-between-files)
-* [Why you might want to create static class members?](#why-you-might-want-to-create-static-class-members)
-
-### Explain event delegation
-
-Event delegation is a technique involving adding event listeners to a parent element instead of adding them to the descendant elements. The listener will fire whenever the event is triggered on the descendant elements due to event bubbling up the DOM. The benefits of this technique are:
-
-* Memory footprint goes down because only one single handler is needed on the parent element, rather than having to attach event handlers on each descendant.
-* There is no need to unbind the handler from elements that are removed and to bind the event for new elements.
-
-###### References
-
-* https://davidwalsh.name/event-delegate
-* https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
-
-[[↑] Back to top](#js-questions)
-
-### Explain how `this` works in JavaScript
-
-There's no simple explanation for `this`; it is one of the most confusing concepts in JavaScript. A hand-wavey explanation is that the value of `this` depends on how the function is called. I have read many explanations on `this` online, and I found [Arnav Aggrawal](https://medium.com/@arnav_aggarwal)'s explanation to be the clearest. The following rules are applied:
-
-1. If the `new` keyword is used when calling the function, `this` inside the function is a brand new object.
-2. If `apply`, `call`, or `bind` are used to call/create a function, `this` inside the function is the object that is passed in as the argument.
-3. If a function is called as a method, such as `obj.method()` — `this` is the object that the function is a property of.
-4. If a function is invoked as a free function invocation, meaning it was invoked without any of the conditions present above, `this` is the global object. In a browser, it is the `window` object. If in strict mode (`'use strict'`), `this` will be `undefined` instead of the global object.
-5. If multiple of the above rules apply, the rule that is higher wins and will set the `this` value.
-6. If the function is an ES2015 arrow function, it ignores all the rules above and receives the `this` value of its surrounding scope at the time it is created.
-
-For an in-depth explanation, do check out his [article on Medium](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3).
-
-###### References
-
-* https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
-* https://stackoverflow.com/a/3127440/1751946
-
-[[↑] Back to top](#js-questions)
-
-### Explain how prototypal inheritance works
-
-This is an extremely common JavaScript interview question. All JavaScript objects have a `prototype` property, that is a reference to another object. When a property is accessed on an object and if the property is not found on that object, the JavaScript engine looks at the object's `prototype`, and the `prototype`'s `prototype` and so on, until it finds the property defined on one of the `prototype`s or until it reaches the end of the prototype chain. This behavior simulates classical inheritance, but it is really more of [delegation than inheritance](https://davidwalsh.name/javascript-objects).
-
-###### References
-
-* https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
-* https://davidwalsh.name/javascript-objects
-
-[[↑] Back to top](#js-questions)
-
-### What do you think of AMD vs CommonJS?
-
-Both are ways to implement a module system, which was not natively present in JavaScript until ES2015 came along. CommonJS is synchronous while AMD (Asynchronous Module Definition) is obviously asynchronous. CommonJS is designed with server-side development in mind while AMD, with its support for asynchronous loading of modules, is more intended for browsers.
-
-I find AMD syntax to be quite verbose and CommonJS is closer to the style you would write import statements in other languages. Most of the time, I find AMD unnecessary, because if you served all your JavaScript into one concatenated bundle file, you wouldn't benefit from the async loading properties. Also, CommonJS syntax is closer to Node style of writing modules and there is less context-switching overhead when switching between client side and server side JavaScript development.
-
-I'm glad that with ES2015 modules, that has support for both synchronous and asynchronous loading, we can finally just stick to one approach. Although it hasn't been fully rolled out in browsers and in Node, we can always use transpilers to convert our code.
-
-###### References
-
-* https://auth0.com/blog/javascript-module-systems-showdown/
-* https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
-
-[[↑] Back to top](#js-questions)
-
-### Explain why the following doesn't work as an IIFE: `function foo(){ }();`. What needs to be changed to properly make it an IIFE?
-
-IIFE stands for Immediately Invoked Function Expressions. The JavaScript parser reads `function foo(){ }();` as `function foo(){ }` and `();`, where the former is a function declaration and the latter (a pair of brackets) is an attempt at calling a function but there is no name specified, hence it throws `Uncaught SyntaxError: Unexpected token )`.
-
-Here are two ways to fix it that involves adding more brackets: `(function foo(){ })()` and `(function foo(){ }())`. These functions are not exposed in the global scope and you can even omit its name if you do not need to reference itself within the body.
-
-You might also use `void` operator: `void function foo(){ }();`. Unfortunately, there is one issue with such approach. The evaluation of given expression is always `undefined`, so if your IIFE function returns anything, you can't use it. An example:
-
-```
-// Don't add JS syntax to this code block to prevent Prettier from formatting it.
-const foo = void function bar() { return 'foo'; }();
-
-console.log(foo); // undefined
-```
-
-###### References
-
-* http://lucybain.com/blog/2014/immediately-invoked-function-expression/
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
-
-[[↑] Back to top](#js-questions)
-
-### What's the difference between a variable that is: `null`, `undefined` or undeclared? How would you go about checking for any of these states?
-
-**Undeclared** variables are created when you assign a value to an identifier that is not previously created using `var`, `let` or `const`. Undeclared variables will be defined globally, outside of the current scope. In strict mode, a `ReferenceError` will be thrown when you try to assign to an undeclared variable. Undeclared variables are bad just like how global variables are bad. Avoid them at all cost! To check for them, wrap its usage in a `try`/`catch` block.
-
-```js
-function foo() {
-  x = 1; // Throws a ReferenceError in strict mode
-}
-
-foo();
-console.log(x); // 1
-```
-
-A variable that is `undefined` is a variable that has been declared, but not assigned a value. It is of type `undefined`. If a function does not return any value as the result of executing it is assigned to a variable, the variable also has the value of `undefined`. To check for it, compare using the strict equality (`===`) operator or `typeof` which will give the `'undefined'` string. Note that you should not be using the abstract equality operator to check, as it will also return `true` if the value is `null`.
-
-```js
-var foo;
-console.log(foo); // undefined
-console.log(foo === undefined); // true
-console.log(typeof foo === 'undefined'); // true
-
-console.log(foo == null); // true. Wrong, don't use this to check!
-
-function bar() {}
-var baz = bar();
-console.log(baz); // undefined
-```
-
-A variable that is `null` will have been explicitly assigned to the `null` value. It represents no value and is different from `undefined` in the sense that it has been explicitly assigned. To check for `null,` simply compare using the strict equality operator. Note that like the above, you should not be using the abstract equality operator (`==`) to check, as it will also return `true` if the value is `undefined`.
-
-```js
-var foo = null;
-console.log(foo === null); // true
-console.log(typeof foo === 'object'); // true
-
-console.log(foo == undefined); // true. Wrong, don't use this to check!
-```
-
-As a personal habit, I never leave my variables undeclared or unassigned. I will explicitly assign `null` to them after declaring if I don't intend to use it yet. If you use a linter in your workflow, it will usually also be able to check that you are not referencing undeclared variables.
-
-###### References
-
-* https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
-* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
-
-[[↑] Back to top](#js-questions)
-
-### What is a closure, and how/why would you use one?
-
-A closure is the combination of a function and the lexical environment within which that function was declared. The word "lexical" refers to the fact that lexical scoping uses the location where a variable is declared within the source code to determine where that variable is available. Closures are functions that have access to the outer (enclosing) function's variables—scope chain even after the outer function has returned.
-
-**Why would you use one?**
-
-* Data privacy / emulating private methods with closures. Commonly used in the [module pattern](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript).
-* [Partial applications or currying](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x).
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
-* https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
-
-[[↑] Back to top](#js-questions)
-
-### Can you describe the main difference between a `.forEach` loop and a `.map()` loop and why you would pick one versus the other?
-
-To understand the differences between the two, let's look at what each function does.
-
-**`forEach`**
-
-* Iterates through the elements in an array.
-* Executes a callback for each element.
-* Does not return a value.
-
-```js
-const a = [1, 2, 3];
-const doubled = a.forEach((num, index) => {
-  // Do something with num and/or index.
-});
-
-// doubled = undefined
-```
-
-**`map`**
-
-* Iterates through the elements in an array.
-* "Maps" each element to a new element by calling the function on each element, creating a new array as a result.
-
-```js
-const a = [1, 2, 3];
-const doubled = a.map(num => {
-  return num * 2;
-});
-
-// doubled = [2, 4, 6]
-```
-
-The main difference between `.forEach` and `.map()` is that `.map()` returns a new array. If you need the result, but do not wish to mutate the original array, `.map()` is the clear choice. If you simply need to iterate over an array, `forEach` is a fine choice.
-
-###### References
-
-* https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
-
-[[↑] Back to top](#js-questions)
-
-### What's a typical use case for anonymous functions?
-
-They can be used in IIFEs to encapsulate some code within a local scope so that variables declared in it do not leak to the global scope.
-
-```js
-(function() {
-  // Some code here.
-})();
-```
-
-As a callback that is used once and does not need to be used anywhere else. The code will seem more self-contained and readable when handlers are defined right inside the code calling them, rather than having to search elsewhere to find the function body.
-
-```js
-setTimeout(function() {
-  console.log('Hello world!');
-}, 1000);
-```
-
-Arguments to functional programming constructs or Lodash (similar to callbacks).
-
-```js
-const arr = [1, 2, 3];
-const double = arr.map(function(el) {
-  return el * 2;
-});
-console.log(double); // [2, 4, 6]
-```
-
-###### References
-
-* https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
-* https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
-
-[[↑] Back to top](#js-questions)
-
-### How do you organize your code? (module pattern, classical inheritance?)
-
-In the past, I used Backbone for my models which encourages a more OOP approach, creating Backbone models and attaching methods to them.
-
-The module pattern is still great, but these days, I use React/Redux which utilize a single-directional data flow based on Flux architecture. I would represent my app's models using plain objects and write utility pure functions to manipulate these objects. State is manipulated using actions and reducers like in any other Redux application.
-
-I avoid using classical inheritance where possible. When and if I do, I stick to [these rules](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4).
-
-[[↑] Back to top](#js-questions)
-
-### What's the difference between host objects and native objects?
-
-Native objects are objects that are part of the JavaScript language defined by the ECMAScript specification, such as `String`, `Math`, `RegExp`, `Object`, `Function`, etc.
-
-Host objects are provided by the runtime environment (browser or Node), such as `window`, `XMLHTTPRequest`, etc.
-
-###### References
-
-* https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
-
-[[↑] Back to top](#js-questions)
-
-### Difference between: `function Person(){}`, `var person = Person()`, and `var person = new Person()`?
-
-This question is pretty vague. My best guess at its intention is that it is asking about constructors in JavaScript. Technically speaking, `function Person(){}` is just a normal function declaration. The convention is to use PascalCase for functions that are intended to be used as constructors.
-
-`var person = Person()` invokes the `Person` as a function, and not as a constructor. Invoking as such is a common mistake if it the function is intended to be used as a constructor. Typically, the constructor does not return anything, hence invoking the constructor like a normal function will return `undefined` and that gets assigned to the variable intended as the instance.
-
-`var person = new Person()` creates an instance of the `Person` object using the `new` operator, which inherits from `Person.prototype`. An alternative would be to use `Object.create`, such as: `Object.create(Person.prototype)`.
-
-```js
-function Person(name) {
-  this.name = name;
-}
-
-var person = Person('John');
-console.log(person); // undefined
-console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined
-
-var person = new Person('John');
-console.log(person); // Person { name: "John" }
-console.log(person.name); // "john"
-```
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
-
-[[↑] Back to top](#js-questions)
-
-### What's the difference between `.call` and `.apply`?
-
-Both `.call` and `.apply` are used to invoke functions and the first parameter will be used as the value of `this` within the function. However, `.call` takes in comma-separated arguments as the next arguments while `.apply` takes in an array of arguments as the next argument. An easy way to remember this is C for `call` and comma-separated and A for `apply` and an array of arguments.
-
-```js
-function add(a, b) {
-  return a + b;
-}
-
-console.log(add.call(null, 1, 2)); // 3
-console.log(add.apply(null, [1, 2])); // 3
-```
-
-[[↑] Back to top](#js-questions)
-
-### Explain `Function.prototype.bind`.
-
-Taken word-for-word from [MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind):
-
-> The `bind()` method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
-
-In my experience, it is most useful for binding the value of `this` in methods of classes that you want to pass into other functions. This is frequently done in React components.
-
-###### References
-
-* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
-
-[[↑] Back to top](#js-questions)
-
-### When would you use `document.write()`?
-
-`document.write()` writes a string of text to a document stream opened by `document.open()`. When `document.write()` is executed after the page has loaded, it will call `document.open` which clears the whole document (`<head>` and `<body>` removed!) and replaces the contents with the given parameter value. Hence it is usually considered dangerous and prone to misuse.
-
-There are some answers online that explain `document.write()` is being used in analytics code or [when you want to include styles that should only work if JavaScript is enabled](https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html). It is even being used in HTML5 boilerplate to [load scripts in parallel and preserve execution order](https://github.com/paulirish/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag)! However, I suspect those reasons might be outdated and in the modern day, they can be achieved without using `document.write()`. Please do correct me if I'm wrong about this.
-
-###### References
-
-* https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
-* https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
-
-[[↑] Back to top](#js-questions)
-
-### What's the difference between feature detection, feature inference, and using the UA string?
-
-**Feature Detection**
-
-Feature detection involves working out whether a browser supports a certain block of code, and running different code depending on whether it does (or doesn't), so that the browser can always provide a working experience rather crashing/erroring in some browsers. For example:
-
-```js
-if ('geolocation' in navigator) {
-  // Can use navigator.geolocation
-} else {
-  // Handle lack of feature
-}
-```
-
-[Modernizr](https://modernizr.com/) is a great library to handle feature detection.
-
-**Feature Inference**
-
-Feature inference checks for a feature just like feature detection, but uses another function because it assumes it will also exist, e.g.:
-
-```js
-if (document.getElementsByTagName) {
-  element = document.getElementById(id);
-}
-```
-
-This is not really recommended. Feature detection is more foolproof.
-
-**UA String**
-
-This is a browser-reported string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent. It can be accessed via `navigator.userAgent`. However, the string is tricky to parse and can be spoofed. For example, Chrome reports both as Chrome and Safari. So to detect Safari you have to check for the Safari string and the absence of the Chrome string. Avoid this method.
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
-* https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
-* https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
-
-[[↑] Back to top](#js-questions)
-
-### Explain Ajax in as much detail as possible.
-
-Ajax (asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows for web pages, and by extension web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly substitute use JSON instead of XML, due to the advantages of JSON being native to JavaScript.
-
-The `XMLHttpRequest` API is frequently used for the asynchronous communication or these days, the `fetch` API.
-
-###### References
-
-* https://en.wikipedia.org/wiki/Ajax_(programming)
-* https://developer.mozilla.org/en-US/docs/AJAX
-
-[[↑] Back to top](#js-questions)
-
-### What are the advantages and disadvantages of using Ajax?
-
-**Advantages**
-
-* Better interactivity. New content from the server can be changed dynamically without the need to reload the entire page.
-* Reduce connections to the server since scripts and stylesheets only have to be requested once.
-* State can be maintained on a page. JavaScript variables and DOM state will persist because the main container page was not reloaded.
-* Basically most of the advantages of an SPA.
-
-**Disadvantages**
-
-* Dynamic webpages are harder to bookmark.
-* Does not work if JavaScript has been disabled in the browser.
-* Some webcrawlers do not execute JavaScript and would not see content that has been loaded by JavaScript.
-* Basically most of the disadvantages of an SPA.
-
-[[↑] Back to top](#js-questions)
-
-### Explain how JSONP works (and how it's not really Ajax).
-
-JSONP (JSON with Padding) is a method commonly used to bypass the cross-domain policies in web browsers because Ajax requests from the current page to a cross-origin domain is not allowed.
-
-JSONP works by making a request to a cross-origin domain via a `<script>` tag and usually with a `callback` query parameter, for example: `https://example.com?callback=printData`. The server will then wrap the data within a function called `printData` and return it to the client.
-
-```html
-<!-- https://mydomain.com -->
-<script>
-function printData(data) {
-  console.log(`My name is ${data.name}!`);
-}
-</script>
-
-<script src="https://example.com?callback=printData"></script>
-```
-
-```js
-// File loaded from https://example.com?callback=printData
-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.
-
-JSONP can be unsafe and has some security implications. As JSONP is really JavaScript, it can do everything else JavaScript can do, so you need to trust the provider of the JSONP data.
-
-These days, [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) is the recommended approach and JSONP is seen as a hack.
-
-###### References
-
-* https://stackoverflow.com/a/2067584/1751946
-
-[[↑] Back to top](#js-questions)
-
-### Have you ever used JavaScript templating? If so, what libraries have you used?
-
-Yes. Handlebars, Underscore, Lodash, AngularJS, and JSX. I disliked templating in AngularJS because it made heavy use of strings in the directives and typos would go uncaught. JSX is my new favorite as it is closer to JavaScript and there is barely any syntax to learn. Nowadays, you can even use ES2015 template string literals as a quick way for creating templates without relying on third-party code.
-
-```js
-const template = `<div>My name is: ${name}</div>`;
-```
-
-However, do be aware of a potential XSS in the above approach as the contents are not escaped for you, unlike in templating libraries.
-
-[[↑] Back to top](#js-questions)
-
-### Explain "hoisting".
-
-Hoisting is a term used to explain the behavior of variable declarations in your code. Variables declared or initialized with the `var` keyword will have their declaration "moved" up to the top of the current scope, which we refer to as hoisting. However, only the declaration is hoisted, the assignment (if there is one), will stay where it is.
-
-Note that the declaration is not actually moved - the JavaScript engine parses the declarations during compilation and becomes aware of declarations and their scopes. It is just easier to understand this behavior by visualizing the declarations as being hoisted to the top of their scope. Let's explain with a few examples.
-
-```js
-// var declarations are hoisted.
-console.log(foo); // undefined
-var foo = 1;
-console.log(foo); // 1
-
-// let/const declarations are NOT hoisted.
-console.log(bar); // ReferenceError: bar is not defined
-let bar = 2;
-console.log(bar); // 2
-```
-
-Function declarations have the body hoisted while the function expressions (written in the form of variable declarations) only has the variable declaration hoisted.
-
-```js
-// Function Declaration
-console.log(foo); // [Function: foo]
-foo(); // 'FOOOOO'
-function foo() {
-  console.log('FOOOOO');
-}
-console.log(foo); // [Function: foo]
-
-// Function Expression
-console.log(bar); // undefined
-bar(); // Uncaught TypeError: bar is not a function
-var bar = function() {
-  console.log('BARRRR');
-};
-console.log(bar); // [Function: bar]
-```
-
-[[↑] Back to top](#js-questions)
-
-### Describe event bubbling.
-
-When an event triggers on a DOM element, it will attempt to handle the event if there is a listener attached, then the event is bubbled up to its parent and the same thing happens. This bubbling occurs up the element's ancestors all the way to the `document`. Event bubbling is the mechanism behind event delegation.
-
-[[↑] Back to top](#js-questions)
-
-### What's the difference between an "attribute" and a "property"?
-
-Attributes are defined on the HTML markup but properties are defined on the DOM. To illustrate the difference, imagine we have this text field in our HTML: `<input type="text" value="Hello">`.
-
-```js
-const input = document.querySelector('input');
-console.log(input.getAttribute('value')); // Hello
-console.log(input.value); // Hello
-```
-
-But after you change the value of the text field by adding "World!" to it, this becomes:
-
-```js
-console.log(input.getAttribute('value')); // Hello
-console.log(input.value); // Hello World!
-```
-
-###### References
-
-* https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
-
-[[↑] Back to top](#js-questions)
-
-### Why is extending built-in JavaScript objects not a good idea?
-
-Extending a built-in/native JavaScript object means adding properties/functions to its `prototype`. While this may seem like a good idea at first, it is dangerous in practice. Imagine your code uses a few libraries that both extend the `Array.prototype` by adding the same `contains` method, the implementations will overwrite each other and your code will break if the behavior of these two methods is not the same.
-
-The only time you may want to extend a native object is when you want to create a polyfill, essentially providing your own implementation for a method that is part of the JavaScript specification but might not exist in the user's browser due to it being an older browser.
-
-###### References
-
-* http://lucybain.com/blog/2014/js-extending-built-in-objects/
-
-[[↑] Back to top](#js-questions)
-
-### Difference between document `load` event and document `DOMContentLoaded` event?
-
-The `DOMContentLoaded` event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
-
-`window`'s `load` event is only fired after the DOM and all dependent resources and assets have loaded.
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
-* https://developer.mozilla.org/en-US/docs/Web/Events/load
-
-[[↑] Back to top](#js-questions)
-
-### What is the difference between `==` and `===`?
-
-`==` is the abstract equality operator while `===` is the strict equality operator. The `==` operator will compare for equality after doing any necessary type conversions. The `===` operator will not do type conversion, so if two values are not the same type `===` will simply return `false`. When using `==`, funky things can happen, such as:
-
-```js
-1 == '1'; // true
-1 == [1]; // true
-1 == true; // true
-0 == ''; // true
-0 == '0'; // true
-0 == false; // true
-```
-
-My advice is never to use the `==` operator, except for convenience when comparing against `null` or `undefined`, where `a == null` will return `true` if `a` is `null` or `undefined`.
-
-```js
-var a = null;
-console.log(a == null); // true
-console.log(a == undefined); // true
-```
-
-###### References
-
-* https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
-
-[[↑] Back to top](#js-questions)
-
-### Explain the same-origin policy with regards to JavaScript.
-
-The same-origin policy prevents JavaScript from making requests across domain boundaries. An origin is defined as a combination of URI scheme, hostname, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model.
-
-###### References
-
-* https://en.wikipedia.org/wiki/Same-origin_policy
-
-[[↑] Back to top](#js-questions)
-
-### Make this work:
-
-```js
-duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
-```
-
-```js
-function duplicate(arr) {
-  return arr.concat(arr);
-}
-
-duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
-```
-
-[[↑] Back to top](#js-questions)
-
-### Why is it called a Ternary expression, what does the word "Ternary" indicate?
-
-"Ternary" indicates three, and a ternary expression accepts three operands, the test condition, the "then" expression and the "else" expression. Ternary expressions are not specific to JavaScript and I'm not sure why it is even in this list.
-
-###### References
-
-* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
-
-[[↑] Back to top](#js-questions)
-
-### What is `"use strict";`? What are the advantages and disadvantages to using it?
-
-'use strict' is a statement used to enable strict mode to entire scripts or individual functions. Strict mode is a way to opt into a restricted variant of JavaScript.
-
-Advantages:
-
-* Makes it impossible to accidentally create global variables.
-* Makes assignments which would otherwise silently fail to throw an exception.
-* Makes attempts to delete undeletable properties throw (where before the attempt would simply have no effect).
-* Requires that function parameter names be unique.
-* `this` is undefined in the global context.
-* It catches some common coding bloopers, throwing exceptions.
-* It disables features that are confusing or poorly thought out.
-
-Disadvantages:
-
-* Many missing features that some developers might be used to.
-* No more access to `function.caller` and `function.arguments`.
-* Concatenation of scripts written in different strict modes might cause issues.
-
-Overall, I think the benefits outweigh the disadvantages, and I never had to rely on the features that strict mode blocks. I would recommend using strict mode.
-
-###### References
-
-* http://2ality.com/2011/10/strict-mode-hatred.html
-* http://lucybain.com/blog/2014/js-use-strict/
-
-[[↑] Back to top](#js-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`.
-
-Check out this version of FizzBuzz by [Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724).
-
-```js
-for (let i = 1; i <= 100; i++) {
-  let f = i % 3 == 0,
-    b = i % 5 == 0;
-  console.log(f ? (b ? 'FizzBuzz' : 'Fizz') : b ? 'Buzz' : i);
-}
-```
-
-I would not advise you to write the above during interviews though. Just stick with the long but clear approach. For more wacky versions of FizzBuzz, check out the reference link below.
-
-###### References
-
-* https://gist.github.com/jaysonrowe/1592432
-
-[[↑] Back to top](#js-questions)
-
-### Why is it, in general, a good idea to leave the global scope of a website as-is and never touch it?
-
-Every script has access to the global scope, and if everyone uses the global namespace to define their variables, collisions will likely occur. Use the module pattern (IIFEs) to encapsulate your variables within a local namespace.
-
-[[↑] Back to top](#js-questions)
-
-### Why would you use something like the `load` event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?
-
-The `load` event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
-
-The DOM event `DOMContentLoaded` will fire after the DOM for the page has been constructed, but do not wait for other resources to finish loading. This is preferred in certain cases when you do not need the full page to be loaded before initializing.
-
-TODO.
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
-
-[[↑] Back to top](#js-questions)
-
-### Explain what a single page app is and how to make one SEO-friendly.
-
-The below is taken from the awesome [Grab Front End Guide](https://github.com/grab/front-end-guide), which coincidentally, is written by me!
-
-Web developers these days refer to the products they build as web apps, rather than websites. While there is no strict difference between the two terms, web apps tend to be highly interactive and dynamic, allowing the user to perform actions and receive a response to their action. Traditionally, the browser receives HTML from the server and renders it. When the user navigates to another URL, a full-page refresh is required and the server sends fresh new HTML to the new page. This is called server-side rendering.
-
-However, in modern SPAs, client-side rendering is used instead. The browser loads the initial page from the server, along with the scripts (frameworks, libraries, app code) and stylesheets required for the whole app. When the user navigates to other pages, a page refresh is not triggered. The URL of the page is updated via the [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). New data required for the new page, usually in JSON format, is retrieved by the browser via [AJAX](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started) requests to the server. The SPA then dynamically updates the page with the data via JavaScript, which it has already downloaded in the initial page load. This model is similar to how native mobile apps work.
-
-The benefits:
-
-* The app feels more responsive and users do not see the flash between page navigations due to full-page refreshes.
-* Fewer HTTP requests are made to the server, as the same assets do not have to be downloaded again for each page load.
-* Clear separation of the concerns between the client and the server; you can easily build new clients for different platforms (e.g. mobile, chatbots, smart watches) without having to modify the server code. You can also modify the technology stack on the client and server independently, as long as the API contract is not broken.
-
-The downsides:
-
-* Heavier initial page load due to the loading of framework, app code, and assets required for multiple pages.
-* There's an additional step to be done on your server which is to configure it to route all requests to a single entry point and allow client-side routing to take over from there.
-* SPAs are reliant on JavaScript to render content, but not all search engines execute JavaScript during crawling, and they may see empty content on your page. This inadvertently hurts the Search Engine Optimization (SEO) of your app. However, most of the time, when you are building apps, SEO is not the most important factor, as not all the content needs to be indexable by search engines. To overcome this, you can either server-side render your app or use services such as [Prerender](https://prerender.io/) to "render your javascript in a browser, save the static HTML, and return that to the crawlers".
-
-###### References
-
-* https://github.com/grab/front-end-guide#single-page-apps-spas
-* http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
-* http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
-* https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
-
-[[↑] Back to top](#js-questions)
-
-### What is the extent of your experience with Promises and/or their polyfills?
-
-Possess working knowledge of it. A promise is an object that may produce a single value sometime in the future: either a resolved value or a reason that it's not resolved (e.g., a network error occurred). A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to handle the fulfilled value or the reason for rejection.
-
-Some common polyfills are `$.deferred`, Q and Bluebird but not all of them comply with the specification. ES2015 supports Promises out of the box and polyfills are typically not needed these days.
-
-###### References
-
-* https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
-
-[[↑] Back to top](#js-questions)
-
-### What are the pros and cons of using Promises instead of callbacks?
-
-**Pros**
-
-* Avoid callback hell which can be unreadable.
-* Makes it easy to write sequential asynchronous code that is readable with `.then()`.
-* Makes it easy to write parallel asynchronous code with `Promise.all()`.
-
-**Cons**
-
-* Slightly more complex code (debatable).
-* In older browsers where ES2015 is not supported, you need to load a polyfill in order to use it.
-
-[[↑] Back to top](#js-questions)
-
-### What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?
-
-Some examples of languages that compile to JavaScript include CoffeeScript, Elm, ClojureScript, PureScript, and TypeScript.
-
-Advantages:
-
-* Fixes some of the longstanding problems in JavaScript and discourages JavaScript anti-patterns.
-* Enables you to write shorter code, by providing some syntactic sugar on top of JavaScript, which I think ES5 lacks, but ES2015 is awesome.
-* Static types are awesome (in the case of TypeScript) for large projects that need to be maintained over time.
-
-Disadvantages:
-
-* Require a build/compile process as browsers only run JavaScript and your code will need to be compiled into JavaScript before being served to browsers.
-* Debugging can be a pain if your source maps do not map nicely to your pre-compiled source.
-* Most developers are not familiar with these languages and will need to learn it. There's a ramp up cost involved for your team if you use it for your projects.
-* Smaller community (depends on the language), which means resources, tutorials, libraries, and tooling would be harder to find.
-* IDE/editor support might be lacking.
-* These languages will always be behind the latest JavaScript standard.
-* Developers should be cognizant of what their code is being compiled to — because that is what would actually be running, and that is what matters in the end.
-
-Practically, ES2015 has vastly improved JavaScript and made it much nicer to write. I don't really see the need for CoffeeScript these days.
-
-###### References
-
-* https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
-
-[[↑] Back to top](#js-questions)
-
-### What tools and techniques do you use for debugging JavaScript code?
-
-* React and Redux
-  * [React Devtools](https://github.com/facebook/react-devtools)
-  * [Redux Devtools](https://github.com/gaearon/redux-devtools)
-* Vue
-  * [Vue Devtools](https://github.com/vuejs/vue-devtools)
-* JavaScript
-  * [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)
-  * `debugger` statement
-  * Good old `console.log` debugging
-
-###### References
-
-* https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
-* https://raygun.com/blog/javascript-debugging/
-
-[[↑] Back to top](#js-questions)
-
-### What language constructions do you use for iterating over object properties and array items?
-
-For objects:
-
-* `for` loops - `for (var property in obj) { console.log(property); }`. However, this will also iterate through its inherited properties, and you will add an `obj.hasOwnProperty(property)` check before using it.
-* `Object.keys()` - `Object.keys(obj).forEach(function (property) { ... })`. `Object.keys()` is a static method that will lists all enumerable properties of the object that you pass it.
-* `Object.getOwnPropertyNames()` - `Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`. `Object.getOwnPropertyNames()` is a static method that will lists all enumerable and non-enumerable properties of the object that you pass it.
-
-For arrays:
-
-* `for` loops - `for (var i = 0; i < arr.length; i++)`. The common pitfall here is that `var` is in the function scope and not the block scope and most of the time you would want block scoped iterator variable. ES2015 introduces `let` which has block scope and it is recommended to use that instead. So this becomes: `for (let i = 0; i < arr.length; i++)`.
-* `forEach` - `arr.forEach(function (el, index) { ... })`. This construct can be more convenient at times because you do not have to use the `index` if all you need is the array elements. There are also the `every` and `some` methods which will allow you to terminate the iteration early.
-
-Most of the time, I would prefer the `.forEach` method, but it really depends on what you are trying to do. `for` loops allow more flexibility, such as prematurely terminate the loop using `break` or incrementing the iterator more than once per loop.
-
-[[↑] Back to top](#js-questions)
-
-### Explain the difference between mutable and immutable objects.
-
-* What is an example of an immutable object in JavaScript?
-* What are the pros and cons of immutability?
-* How can you achieve immutability in your own code?
-
-TODO
-
-[[↑] Back to top](#js-questions)
-
-### Explain the difference between synchronous and asynchronous functions.
-
-Synchronous functions are blocking while asynchronous functions are not. In synchronous functions, statements complete before the next statement is run. In this case, the program is evaluated exactly in order of the statements and execution of the program is paused if one of the statements take a very long time.
-
-Asynchronous functions usually accept a callback as a parameter and execution continue on the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).
-
-[[↑] Back to top](#js-questions)
-
-### What is event loop? What is the difference between call stack and task queue?
-
-The event loop is a single-threaded loop that monitors the call stack and checks if there is any work to be done in the task queue. If the call stack is empty and there are callback functions in the task queue, a function is dequeued and pushed onto the call stack to be executed.
-
-If you haven't already checked out Philip Robert's [talk on the Event Loop](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html), you should. It is one of the most viewed videos on JavaScript.
-
-###### References
-
-* https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
-* http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
-
-[[↑] Back to top](#js-questions)
-
-### Explain the differences on the usage of `foo` between `function foo() {}` and `var foo = function() {}`
-
-The former is a function declaration while the latter is a function expression. The key difference is that function declarations have its body hoisted but the bodies of function expressions are not (they have the same hoisting behavior as variables). For more explanation on hoisting, refer to the question above on hoisting. If you try to invoke a function expression before it is defined, you will get an `Uncaught TypeError: XXX is not a function` error.
-
-**Function Declaration**
-
-```js
-foo(); // 'FOOOOO'
-function foo() {
-  console.log('FOOOOO');
-}
-```
-
-**Function Expression**
-
-```js
-foo(); // Uncaught TypeError: foo is not a function
-var foo = function() {
-  console.log('FOOOOO');
-};
-```
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
-
-[[↑] Back to top](#js-questions)
-
-### What are the differences between variables created using `let`, `var` or `const`?
-
-Variables declared using the `var` keyword are scoped to the function in which they are created, or if created outside of any function, to the global object. `let` and `const` are _block scoped_, meaning they are only accessible within the nearest set of curly braces (function, if-else block, or for-loop).
-
-```js
-function foo() {
-  // All variables are accessible within functions.
-  var bar = 'bar';
-  let baz = 'baz';
-  const qux = 'qux';
-
-  console.log(bar); // bar
-  console.log(baz); // baz
-  console.log(qux); // qux
-}
-
-console.log(bar); // ReferenceError: bar is not defined
-console.log(baz); // ReferenceError: baz is not defined
-console.log(qux); // ReferenceError: qux is not defined
-```
-
-```js
-if (true) {
-  var bar = 'bar';
-  let baz = 'baz';
-  const qux = 'qux';
-}
-
-// var declared variables are accessible anywhere in the function scope.
-console.log(bar); // bar
-// let and const defined variables are not accessible outside of the block they were defined in.
-console.log(baz); // ReferenceError: baz is not defined
-console.log(qux); // ReferenceError: qux is not defined
-```
-
-`var` allows variables to be hoisted, meaning they can be referenced in code before they are declared. `let` and `const` will not allow this, instead throwing an error.
-
-```js
-console.log(foo); // undefined
-
-var foo = 'foo';
-
-console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization
-
-let baz = 'baz';
-
-console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization
-
-const bar = 'bar';
-```
-
-Redeclaring a variable with `var` will not throw an error, but 'let' and 'const' will.
-
-```js
-var foo = 'foo';
-var foo = 'bar';
-console.log(foo); // "bar"
-
-let baz = 'baz';
-let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared
-```
-
-`let` and `const` differ in that `let` allows reassigning the variable's value while `const` does not.
-
-```js
-// This is fine.
-let foo = 'foo';
-foo = 'bar';
-
-// This causes an exception.
-const baz = 'baz';
-baz = 'qux';
-```
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
-
-[[↑] Back to top](#js-questions)
-
-### What are the differences between ES6 class and ES5 function constructors?
-
-Let's first look at example of each:
-
-```js
-// ES5 Function Constructor
-function Person(name) {
-  this.name = name;
-}
-
-// ES6 Class
-class Person {
-  constructor(name) {
-    this.name = name;
-  }
-}
-```
-
-For simple constructors, they look pretty similar.
-
-The main difference in the constructor comes when using inheritance. If we want to create a `Student` class that subclasses `Person` and add a `studentId` field, this is what we have to do in addition to the above.
-
-```js
-// ES5 Function Constructor
-function Student(name, studentId) {
-  // Call constructor of superclass to initialize superclass-derived members.
-  Person.call(this, name);
-
-  // Initialize subclass's own members.
-  this.studentId = studentId;
-}
-
-Student.prototype = Object.create(Person.prototype);
-Student.prototype.constructor = Student;
-
-// ES6 Class
-class Student extends Person {
-  constructor(name, studentId) {
-    super(name);
-    this.studentId = studentId;
-  }
-}
-```
-
-It's much more verbose to use inheritance in ES5 and the ES6 version is easier to understand and remember.
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
-* https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5
-
-[[↑] Back to top](#js-questions)
-
-### Can you offer a use case for the new arrow => function syntax? How does this new syntax differ from other functions?
-
-TODO
-
-[[↑] Back to top](#js-questions)
-
-### What advantage is there for using the arrow syntax for a method in a constructor?
-
-TODO
-
-[[↑] Back to top](#js-questions)
-
-### What is the definition of a higher-order function?
-
-A higher-order function is any function that takes one or more functions as arguments, which it uses to operate on some data, and/or returns a function as a result. Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is `map`, which takes an array and a function as arguments. `map` then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are `forEach`, `filter`, and `reduce`. A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. `Function.prototype.bind` is one such example in JavaScript.
-
-**Map**
-
-Let say we have an array of names which we need to transform each string to uppercase.
-
-```js
-const names = ['irish', 'daisy', 'anna'];
-```
-
-The imperative way will be as such:
-
-```js
-const transformNamesToUppercase = function(names) {
-  const results = [];
-  for (let i = 0; i < names.length; i++) {
-    results.push(names[i].toUpperCase());
-  }
-  return results;
-};
-transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
-```
-
-Use `.map(transformerFn)` makes the code shorter and more declarative.
-
-```js
-const transformNamesToUppercase = function(names) {
-  return names.map(name => name.toUpperCase());
-};
-transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
-```
-
-###### References
-
-* https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
-* https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
-* https://eloquentjavascript.net/05_higher_order.html
-
-[[↑] Back to top](#js-questions)
-
-### Can you give an example for destructuring an object or an array?
-
-Destructuring is an expression available in ES6 which enables a succinct and convenient way to extract values of Objects or Arrays and place them into distinct variables.
-
-**Array destructuring**
-
-```js
-// Variable assignment.
-const foo = ['one', 'two', 'three'];
-
-const [one, two, three] = foo;
-console.log(one); // "one"
-console.log(two); // "two"
-console.log(three); // "three"
-```
-
-```js
-// Swapping variables
-let a = 1;
-let b = 3;
-
-[a, b] = [b, a];
-console.log(a); // 3
-console.log(b); // 1
-```
-
-**Object destructuring**
-
-```js
-// Variable assignment.
-const o = { p: 42, q: true };
-const { p, q } = o;
-
-console.log(p); // 42
-console.log(q); // true
-```
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
-* https://ponyfoo.com/articles/es6-destructuring-in-depth
-
-[[↑] Back to top](#js-questions)
-
-### ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example?
-
-TODO
-
-[[↑] Back to top](#js-questions)
-
-### Can you give an example of a curry function and why this syntax offers an advantage?
-
-Currying is a pattern where a function with more than one parameter is broken into multiple functions that, when called in series, will accumulate all of the required parameters one at a time. This technique can be useful for making code written in a functional style easier to read and compose. It's important to note that for a function to be curried, it needs to start out as one function, then broken out into a sequence of functions that each accepts one parameter.
-
-```js
-function curry(fn) {
-  if (fn.length === 0) {
-    return fn;
-  }
-
-  function _curried(depth, args) {
-    return function(newArgument) {
-      if (depth - 1 === 0) {
-        return fn(...args, newArgument);
-      }
-      return _curried(depth - 1, [...args, newArgument]);
-    };
-  }
-
-  return _curried(fn.length, []);
-}
-
-function add(a, b) {
-  return a + b;
-}
-
-var curriedAdd = curry(add);
-var addFive = curriedAdd(5);
-
-var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
-```
-
-###### References
-
-* https://hackernoon.com/currying-in-js-d9ddc64f162e
-
-[[↑] Back to top](#js-questions)
-
-### What are the benefits of using spread syntax and how is it different from rest syntax?
-
-ES6's spread syntax is very useful when coding in a functional paradigm as we can easily create copies of arrays or objects without resorting to `Object.create`, `slice`, or a library function. This language feature is used often in Redux and rx.js projects.
-
-```js
-function putDookieInAnyArray(arr) {
-  return [...arr, 'dookie'];
-}
-
-const result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"]
-
-const person = {
-  name: 'Todd',
-  age: 29,
-};
-
-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.
-
-```js
-function addFiveToABunchOfNumbers(...numbers) {
-  return numbers.map(x => x + 5);
-}
-
-const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]
-
-const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
-
-const { e, f, ...others } = {
-  e: 1,
-  f: 2,
-  g: 3,
-  h: 4,
-}; // e: 1, f: 2, others: { g: 3, h: 4 }
-```
-
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
-
-[[↑] Back to top](#js-questions)
-
-### How can you share code between files?
-
-This depends on the JavaScript environment.
-
-On the client (browser environment), as long as the variables/functions are declared in the global scope (`window`), all scripts can refer to them. Alternatively, adopt the Asynchronous Module Definition (AMD) via RequireJS for a more modular approach.
-
-On the server (Node.js), the common way has been to use CommonJS. Each file is treated as a module and it can export variables and functions by attaching them to the `module.exports` object.
-
-ES2015 defines a module syntax which aims to replace both AMD and CommonJS. This will eventually be supported in both browser and Node environments.
-
-[[↑] Back to top](#js-questions)
-
-###### References
-
-* http://requirejs.org/docs/whyamd.html
-* https://nodejs.org/docs/latest/api/modules.html
-* http://2ality.com/2014/09/es6-modules-final.html
-
-### Why you might want to create static class members?
-
-Static class members (properties/methods) are not tied to a specific instance of a class and have the same value regardless of which instance is referring to it. Static properties are typically configuration variables and static methods are usually pure utility functions which do not depend on the state of the instance.
-
-###### References
-
-* https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
-
-[[↑] Back to top](#js-questions)
-
-### Other Answers
-
-* http://flowerszhong.github.io/2013/11/20/javascript-questions.html
+Moved to [new location](https://www.frontendinterviewhandbook.com/javascript-questions/).
diff --git a/utilities/debounce.js b/utilities/debounce.js
deleted file mode 100644
index e0d4ed66a8..0000000000
--- a/utilities/debounce.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const debounce = (fn, time) => {
-    let timerId;
-    return function(...args) {
-        const functionCall = () => fn.apply(this, args);
-        clearTimeout(timerId);
-        timerId = setTimeout(functionCall, time);
-    };
-};
diff --git a/website/.gitignore b/website/.gitignore
new file mode 100755
index 0000000000..1b34df5127
--- /dev/null
+++ b/website/.gitignore
@@ -0,0 +1,20 @@
+# dependencies
+/node_modules
+
+# production
+/build
+
+# generated files
+.docusaurus
+.cache-loader
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
\ No newline at end of file
diff --git a/website/README.md b/website/README.md
new file mode 100755
index 0000000000..71505291a8
--- /dev/null
+++ b/website/README.md
@@ -0,0 +1,33 @@
+# Website
+
+This website is built using Docusaurus 2, a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+```
+$ GIT_USER=<Your GitHub username> USE_SSH=1 yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
diff --git a/website/blog/2019-11-03-are-front-end-development-enough-for-a-career.md b/website/blog/2019-11-03-are-front-end-development-enough-for-a-career.md
new file mode 100644
index 0000000000..bec8643517
--- /dev/null
+++ b/website/blog/2019-11-03-are-front-end-development-enough-for-a-career.md
@@ -0,0 +1,65 @@
+---
+title: Are Front End Development Skills Enough for a Career?
+slug: are-front-end-development-skills-enough-for-a-career
+author: Yangshun Tay
+author_title: Front End Engineer at Facebook
+author_url: https://github.com/yangshun
+author_image_url: https://github.com/yangshun.png
+author_twitter: yangshunz
+tags: [front end, career]
+hide_table_of_contents: true
+---
+
+<head>
+  <link rel="canonical" href="https://www.yangshuntay.com/blog/are-front-end-development-skills-enough-for-a-career" />
+</head>
+
+Recently, an undergrad freshmen I met at an event asked me a question regarding Front End development as a career.
+
+<!--truncate-->
+
+> I'm honestly quite into front end development — web technologies, UI/UX, web design and stuff. But with there being more and more accessible to new developers (create-react-app, parcel and such), I just can't help but wonder if these skills are sufficient to survive in the tech industry today. Not that it's a bad thing! Lowering the barrier to entry for programmers is always good. However, for those like myself who would like to pursue front end development as a career, I'm just wondering if having these skills are enough.
+
+Interesting question. I've wondered the same question to myself before but convinced myself that I'm probably fine just dabbling in Front End development for now. 😌
+
+## Front End is complex and getting increasingly so
+
+Most people would have used websites like facebook.com, youtube.com and gmail.com. These applications have hundreds of engineers working on them (thousands if you include the back end) due to the demanding nature of the application - it has to load fast, it has to be secure, it has to look pretty. These days, front end development is no longer just about building websites rendering a static HTML. Many websites these days are in fact web applications and a lot of thought has to be put into the application architecture, and that requires good software engineering capabilities.
+
+That's why you see many Front End tools these days like React, Redux, Relay, CSS modules, webpack, etc. These tools exist because of the ever-increasing requirements of building rich and performant user experiences on the web. Being a good Front End developer is very hard, there are many aspects to know about - HTML, CSS, JavaScript, Browser APIs, Security, Performance, Animation, SEO, Networking, the list is non-exhaustive and growing. There are always new problems to solve and new things to learn. [JavaScript fatigue](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) was a term pretty common a few years back due to the explosion of tools in the Front End ecosystem. Things have gotten more stable but the JavaScript community is currently still one of the most fast-moving communities.
+
+## Does the rise of mobile threaten the existence of web developers?
+
+Many products now have a native mobile app version and that might make people think that the existence of Front End (web) developers could be threatened. I think that is only true to a small extent. Certain applications like Uber and Lyft make sense to be mobile-first, but there are also many complex professional applications where web (or any interface with a larger screens) will always prevail, such as office productivity and design software. Viewing things at a more macro scale, both mobile apps and web apps fall under the category of client-side applications. Many core skills important for being a good web developer are also important for mobile app development - they are transferable across platforms.
+
+Tools like [React Native](https://reactnative.dev) and [Flutter](https://flutter.dev) have also been created to help engineers build products across platforms by only writing the code "once" (in quotes because that dream is still in development). This approach is not a silver bullet solution and has yet to prove itself adequately, but for prototyping small apps or even just certain parts of your mobile app, it works pretty well. In React Native, you write your application in JavaScript using React Native primitives, and the React Native runtime runs the code on the JavaScript engine in the platform to construct native app UI views and handle application logic. It's pretty similar to writing typical web front end code. Facebook's Ads Manager App and the Marketplace tab are built using React Native. There are numerous technologies that enable you to build native apps on mobile platforms by knowing web front end development.
+
+Even though mobile usage is on the rise, there still exists many use cases where the desktop still excels at. Google Suite, Microsoft Office, Design tools are still more efficiently operated on desktops. In fact, many desktop applications these days are built on HTML5 technologies instead of native desktop code using tools like Electron to package web application code into an executable shipped to users. You might already be using some of them without knowing - Slack, Discord, WhatsApp Desktop, VS Code, Atom Editor, just to name a few. I think developers who are only familiar with native desktop platform engineering skills have more reasons to worry than Front End developers.
+
+The web is incredibly cross-platform!
+
+## Jack of all trades, master of one
+
+However, I think that being a Front End development in many regards, is considered a specialized position. That's why it's important to be "T-shaped". I first got introduced to this term through my ex-manager at Grab, Tim Goh. He advised me to have a specialization (front end), yet still know a bit about everything. In other words, you are strong in your core fundamentals, but you also specialize in a particular area.
+
+This is good advice and it's not new advice. In most university courses, students are expected to study the fundamental courses before choosing their area of specialization. In the context of a School of Computing in National University of Singapore, students start their in school by taking basic classes in Algorithms, Data Structures, Software Engineering, Operating Systems, Computer Networks, before choosing their specialization in deeper areas like Compilers, Computer Graphics, AI and Machine Learning, Media, Networking and more.
+
+Having a strong foundation enables someone to make switching domains a possibility. There will definitely be a ramp-up process, but it can be made smoother with solid foundations, and with the skill of learning how to learn fast. In the extreme case where the web becomes irrelevant, and no companies want to hire front end developers anymore, front end developers with strong fundamentals can always slightly switch tracks by doing mobile or back end engineering, or even the hottest UI platform (AR/VR?) out there.
+
+Having good tools to use (like Create React App, Parcel) doesn't eradicate the need for Front End developers to possess good software engineering skills. What will happen if you are the person tasked to build the tools? GreatFrontEnd developers (or Software Engineers really) go beneath the abstractions layer, understand how their tools work, and what problems the tool set out to solve. They also constantly seek to challenge and improve the status quo by building better technologies to cater to the ever-increasing demands.
+
+At Facebook, the Front End Engineers are Software Engineers first, domain experts second. Many of the Front End engineers I know at Facebook have a deep understanding of the technical stack and don't just work on stuff related to the browser. At Facebook scale, front end work also involves building a lot of infrastructure to make our front end code base scale well with the growing technical and people needs. That means writing [codemods](https://github.com/facebook/jscodeshift) to do large-scale refactoring, inventing new [UI](https://react.dev) [paradigms](https://facebookarchive.github.io/flux/), performant [testing frameworks](https://jestjs.io), creating [type-checkers](https://flow.org) for untyped languages, changing the ways we [fetch data](https://graphql.org) from our servers and [managing it on clients](https://relay.dev). These tools wouldn't exist if the Front End engineers at Facebook didn't possess strong software engineering skills.
+
+## Pick up new, relevant skills
+
+It can be hard to pick up new skills at work in an unrelated domain if there are no opportunities to do so. Thankfully (or not), due to the explosion of tools in the Front End ecosystem, I've found an area which I have gained a new-found interest in - Programming Languages Theory (Static Analysis, Compilers, and Intepreters). Static analysis is incredibly important in tools that I use on a daily basis - it's being used by the module bundlers for bundling JavaScript files together, generating CSS from more user-friendly CSS syntaxes, compiling modern JavaScript into older versions of JavaScript that more common browsers can run, and even this blog post written in Markdown uses static analysis to be converted into HTML.
+
+I've been toying with writing my own interpreter after learning this awesome book called [Crafting Interpreters](http://www.craftinginterpreters.com) and will be further exploring this domain in my spare time, possibly building Front End-related tooling in future that leverages static analysis and compilation.
+
+Adding new skills to my arsenal in a related but different domain helps me to stay relevant in the event that the industry no longer needs Front End developers 😱
+
+---
+
+In summary, although Front End development is considered quite specialized, there's enough demand and complexity for it to stay relevant in the years to come. What would threaten the web would be an entire shift of the way users interact with apps, perhaps to a non-visual paradigm like a brain-controlled interface. However, paradigm shifts don't happen overnight and there will be sufficient time to react (pun intended) in the case that ever happens. Being strong in your Software Engineering fundamentals and knowing how to learn new skills fast will help you in switching domains (and also careers).
+
+_Opinions are my own and do not represent the views of my employer._
diff --git a/website/blog/2021-08-28-front-end-career-questions.md b/website/blog/2021-08-28-front-end-career-questions.md
new file mode 100644
index 0000000000..9f0cbf1d53
--- /dev/null
+++ b/website/blog/2021-08-28-front-end-career-questions.md
@@ -0,0 +1,36 @@
+---
+title: Front End Career Questions
+slug: front-end-career-questions
+author: Yangshun Tay
+author_title: Engineering Lead at Facebook
+author_url: https://github.com/yangshun
+author_image_url: https://github.com/yangshun.png
+tags: [front end, career]
+hide_table_of_contents: true
+---
+
+<head>
+  <link rel="canonical" href="https://www.yangshuntay.com/blog/front-end-career-questions" />
+</head>
+
+Recently a junior front end engineer at a startup in Singapore reached out to me to ask me how front end development as a career.
+
+<!--truncate-->
+
+### My manager told me that currently it's a bit hard to define requirements & expectations for higher tier / higher Individual Contributor (IC) level for Front End engineers in the organization. Since you are working at Facebook, I am wondering what are some requirements & expectations for higher IC level there for Front End engineers (maybe around IC4, IC5 and above if that's kinda the level you use there)?
+
+For smaller companies that might be true, but it's still possible if you don't limit yourself to front end work. Going up the levels is all about scope and complexity. IC3s (Junior Engineer) work on tasks, IC4s (Software Engineer) work on features, IC5s (Senior Software Engineer) work on projects, IC6s (Staff Software Engineer) work on huge projects spanning across teams, IC7s (Senior Staff Software Engineer) work on projects spanning across the org, IC8+s (Principal Software Engineer) work on projects spanning across the company or even influencing the industry. If you're able to show that you can handle scope of that magnitude, there shouldn't be a reason not to be compensated at that level. That said, the rough guide I proposed here is for a company the size of Facebook where we have 10s of thousands of Engineers. Doing work that impacts an entire company of 10 people likely won't be IC8 level work. For reference, React core team is mostly made up of IC5s/IC6s and one IC7. Flow has a number of IC5s and IC6s as it's technically complex and affects how the entire company writes JavaScript. GraphQL has many senior engineers and the creator of GraphQL is currently a director (IC8 equivalent).
+
+### Are you still doing a lot of Front End-related development work now? Be it in the company or personally? If yes, I am just curious what are the things you often do, and what do you like in particular about Front End development?
+
+I'm still doing a lot of Front End development for work. Less in a personal capacity ever since I stopped working on Docusaurus as a side project. You can check out my GitHub to see what stuff I've done. At work I'm in-charge of oculus.com and built the infra for it. I built a design system of React components for the content developers to develop the marketing pages.
+
+I really like all aspects of Front End development, maybe except optimizing performance. At FB we build a lot of Front End-related tooling (e.g. Jest, GraphQL, Flow) and libraries (our internal CSS-in-JS solution, Docusaurus, React, Flux, etc) which is personally very exciting to me. Even within front end development, there are various layers - very user-facing stuff (HTML/CSS/visual related code) and back end (JavaScript stuff, network layer, storage), tooling (ESLint, Babel, TypeScript, webpack). I call myself a full front end stack developer as I'm decent across the entire front end stack. I'm especially excited about tooling work as the problems there are interesting and challenging. Typically only large companies face such problems because they only occur at scale, hence I really like being at FB because FB is one of such companies.
+
+### Personally, do you have any tips on how best to grow as an Front End engineer? Are there any particular areas that you'd recommend?
+
+Learn your fundamentals well. There are many UI and CSS libraries out there, but a good Front End developer still needs to know how to build a website without them. Peek beneath the abstraction layers and understand the problems these libraries are trying to solve, do not use them blindly. Keep building stuff - try to build a simple version of the libraries you frequently use, build interesting user interfaces and products, etc.
+
+### What do you think about developing breadth-wise vs depth-wise? For example, do you think it's important for a software engineer to know more about other fields besides the end he/she is currently working at? In particular, what do you think about an Front End engineer that knows BE (i.e. a full-stack developer), or an Front End engineer that knows mobile development (with the advent of React Native or Flutter)?
+
+I somewhat answered this in another [blog post](/blog/are-front-end-development-skills-enough-for-a-career). Lemme know if your question isn't answered after reading it.
diff --git a/website/blog/2021-08-30-a-glimpse-into-front-end-interviews.md b/website/blog/2021-08-30-a-glimpse-into-front-end-interviews.md
new file mode 100644
index 0000000000..523b6d60e4
--- /dev/null
+++ b/website/blog/2021-08-30-a-glimpse-into-front-end-interviews.md
@@ -0,0 +1,157 @@
+---
+title: A Glimpse into Front End Interviews
+slug: a-glimpse-into-front-end-interviews
+author: Kai Li
+author_title: Software Engineer at Stripe, ex-Quora, ex-Zendesk
+author_url: https://github.com/li-kai
+author_image_url: https://github.com/li-kai.png
+tags: [front end, interview]
+hide_table_of_contents: true
+---
+
+<head>
+  <link rel="canonical" href="https://lik.ai/blog/a-glimpse-into-front-end-interviews/" />
+</head>
+
+A glimpse into the front end interview process and questions that frequently come up.
+
+<!--truncate-->
+
+## Interview Process
+
+Applying for front end engineer roles is very similar to software engineer roles, but the interviews can be quite different. In my experience, for each company, there tend to be between 3 to 4 sessions. Most of them will be testing on JavaScript and discussion around web development technologies, and the rest on algorithms or behavioral.
+
+One aspect that I have found interesting is that the younger the company, the more questions will lean towards JavaScript. This could be because hiring specifically for front end engineers is relatively new. Older companies used to only hire software engineers without regard if their focus is on the back end or front end.
+
+## JavaScript Rounds
+
+JavaScript is the main focus among all the companies I have interviewed with. It makes sense as front end work nowadays is very JavaScript-heavy. HTML and CSS knowledge is no longer a necessity thanks to component libraries and the likes.
+
+### JavaScript Minutiae
+
+To qualify for some companies, you might need to brush up on the minutiae of JavaScript. Topics like variable hoisting, holey arrays, non-strict mode, and switch case fall through came up. While I do not feel that knowing such things determine who is a better engineer, it is what it is. Here is my [JavaScript cheat sheet](https://repl.it/@li_kai/JavaScript-Cheatsheet).
+
+### JavaScript Topics
+
+After the first assessment, live interviews tend to test on more advanced JavaScript concepts such as the event loop, promises, async/await, scope and closures.
+
+If you have been writing JavaScript applications for some time and have come across a variety of situations, this should not be too hard.
+
+The most frequently asked question I have ever gotten is to implement `debounce` and `throttle`:
+
+```javascript
+function debounce(fn, duration) {
+  let id;
+  return function (...args) {
+    if (id) {
+      // reset timeout and prevent it from triggering
+      // if debounced function is called within duration
+      clearTimeout(id);
+    }
+    id = setTimeout(() => {
+      fn(...args);
+    }, duration);
+  };
+}
+
+function throttle(fn, duration) {
+  let id;
+  return function (...args) {
+    if (id) {
+      // if throttled function is called within duration,
+      // do nothing
+      return;
+    }
+
+    fn(...args);
+
+    id = setTimeout(() => {
+      id = null; // release "lock"
+    }, duration);
+  };
+}
+
+// usage example
+const helloWorld = () => {
+  console.log('hello world');
+};
+const debouncedHelloWorld = debounce(helloWorld, 1000);
+const throttledHelloWorld = throttle(helloWorld, 1000);
+```
+
+The second most frequently asked question is to implement a sequential `Promise.all` of sorts:
+
+```typescript
+function sequential(data, fetcher) {
+  const helper = (index, results) => {
+    if (index === data.length) {
+      return results;
+    }
+    return fetcher(data[index]).then((datum) => {
+      results.push(datum);
+      return helper(index + 1, results);
+    });
+  };
+
+  return helper(0, []);
+}
+
+// usage example
+const fetcher = (i) => {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(i), 1000);
+  });
+};
+sequential([1, 2, 3], fetcher);
+```
+
+## Discussion Rounds
+
+### Web development tools
+
+Regardless of how we wish to deny it, web development tools are an increasingly complex and diverse ecosystem.
+
+Smaller companies, especially start-ups, require engineers who have a good understanding of these tools. Larger companies will be able to abstract tooling complexity away from engineers unless the role demands it.
+
+As such, web development tools like Webpack and Babel have become a common discussion topic.
+
+A good understanding of tools like Webpack would be to be able to explain the following concepts:
+
+- what is bundling
+- what is tree-shaking
+- what is lazy-loading and why does it matter
+- how loaders work
+
+### React or web framework of choice
+
+If the role states that React knowledge is required, you may be expected to answer or code out React components. If you do not have React experience, using other frameworks would be possible, provided that you can explain well what is happening.
+
+This may range from implementing a feature live or simply answering or explaining some React concepts such as `useEffect`'s dependencies array or `shouldComponentUpdate`.
+
+### Work experience
+
+Aside from the two topics mentioned earlier, interviewers might dive into one or two things that they found interesting in your resume and ask you to elaborate.
+
+As I had some experience in writing Babel plugins and jscodeshift code mods, I walked them through how I utilized those tools to help make the company codebase better.
+
+## Implementation Rounds
+
+In all of my interviews, I have only been asked to implement a feature twice. It is not a common question, but it may come up.
+
+This would come down to how well-versed you are with your basics such as HTML and CSS, as well as tools and frameworks. As an example, one of the question I have gotten was to implement an autocomplete search bar like Google's. If you have built something like that before, it is doable within an hour.
+
+Implementation rounds feel very similar to algorithms, as you need to actively find the best solution while thinking out loud and explaining your decisions.
+
+## Algorithm Rounds
+
+As software engineers, we are not unfamiliar with algorithm questions. Leetcode and Hackerrank are common resources used for practicing such questions.
+
+As I knew this was my weakness, this was where I spent the most time. It may be a little ironic that I chose Python over JavaScript as my language of choice for tackling algorithms. JavaScript's lack of a native minheap and binary search implementation made it a slightly worse choice.
+
+For those who are just starting to learn Python or getting back into it, here's my [Python cheat sheet](https://repl.it/@li_kai/Python-Cheatsheet).
+
+## Conclusion
+
+Front end software engineer roles are not very different from general software engineer roles, but they do tend to be more specialized and in some ways, require even more effort.
+
+If you are passionate about this field and interested in what you do, this would not be too high of a hurdle. I hope my experience and tips were useful to you, and good luck in your search!
diff --git a/website/blog/2021-12-23-front-end-vs-back-end-system-design-interviews.md b/website/blog/2021-12-23-front-end-vs-back-end-system-design-interviews.md
new file mode 100644
index 0000000000..76ab2e13b1
--- /dev/null
+++ b/website/blog/2021-12-23-front-end-vs-back-end-system-design-interviews.md
@@ -0,0 +1,103 @@
+---
+title: Front End vs. Back End System Design Interviews
+slug: front-end-vs-back-end-system-design-interviews
+author: Zhenghao He
+author_title: Engineering Manager at Robinhood, ex-Amazon
+author_url: https://x.com/he_zhenghao
+author_image_url: /img/authors/zhenghao.jpg
+tags: [front end, back end, system design, interview]
+hide_table_of_contents: true
+---
+
+Walkthrough of similarities and differences between front end vs. back end system design interviews and my thoughts on a front end career ceiling.
+
+<!-- truncate -->
+
+## Context
+
+I have been interviewing a lot for the past year - not conducting interviews, I was the candidate being interviewed. Most of the interview processes I had with big tech companies consisted of 1-2 system design rounds depending on the level of the role. Unlike traditional back end-focused system design questions, for which you can find lots of prep resources online such as the famous Grokking System Design Interview or System Design Primer, I didn't know what to expect for a front end-focused system design interview as there are very few resources out there talking about this type of interviews.
+
+Now that I have done a fair amount of system design interviews of both types, I want to give you a summary of what to expect, especially for the front end ones since I have been mostly working on the front end side.
+
+## Similarities
+
+Both front end-focused and back end-focused system design interviews share a lot of similarities in terms of the methodology you can adopt to solve the design questions:
+
+- Starting with gathering system requirements
+- Laying out a clear plan and identifying major distinguishable components of the system
+- Proceeding to end to end api design
+- Talking about optimization
+
+Other kinds of similarities include:
+
+- The interviewer is relying on you to drive the presentation. You can't rely on the interviewer to have your back.
+- While the topics can be either micro or macro, you probably won't need to actually write code - it is rare to jam some portion of coding in the middle of a system design interview
+- Unlike scantron school exams, both types will consist of mainly open ended questions. There probably isn't a checklist of things for you to cover one by one. Nor are you expected to drill deep into all of those. When you realize your interviewer is biased toward a particular part of the system, which they usually do, pivot your focus to that area. Other times you focus on your strengths and lead the conversation.
+
+## Differences
+
+During the back end-focused system design interviews, you would spend most of the time talking about things like:
+
+- Back end/server side architecture, hand waving various back end services/components
+- Discussing which type of database to use and how to aggregate data across different shards
+- Designing SQL table schema
+- Choosing the right the cross-region strategy if your service has a global user base
+- Any other kinds of system characteristics like latency, availability, fault tolerance, etc
+
+For front end-focused system design interviews, you would spend most of the time talking about stuff like:
+
+- Front end/client side architecture, such as the appropriate rendering pattern to choose - client side rendering, or server side rendering or static generation or something in between?
+- What kind of data fetching mechanism to use - REST vs. GRAPHQL vs. gRPC and what should the APIs look like?
+- Specifics about UI components
+  - A news feed which has an infinite scroll behavior with all the images lazily loaded while ensuring the client side has the aspect ratio of the images upfront to prevent layout shift.
+  - An autocomplete UI component which fetches search result data incrementally in batches while receiving images from server pushes in parallel.
+  - a gallery page which pulls images and displays them in the correct order despite the asynchrony that comes with the network requests that might cause them to arrive out of order.
+- How do you leverage different layers of cache to decrease latency or support offline mode.
+- If they want to get framework-specific, which is totally possible, they might even ask you to define a particular React components's props or manage complex state in a React app.
+
+A lot times having one type of system design interviews means you can over simplify the opposite side:
+
+- In a back end system design interview, the client-side/front end is reduced to an API layer - you don't need to consider all the intricacies of the browser or the pesky rerenders your real-time updates would cause.
+- In a front end system design interview, you can treat the back end as a black box and you don't need to worry about how things like how to scale a database, or how your choice of using web sockets might affect the load balancers because of the need for sticky sessions support.
+
+But again, this is a summary of my experience and depending on who your interviewers are (are they front end, back end and/or fullstack developers), the scope of the role and which team it is (are you going to be on a front end team or are you expected to work across the stack and stretch into the back end?) your front end system design interview might be a bit of a hybrid where some aspects of back end system design interviews might come up.
+
+Outside of the differences with the technical topics I needed to dig deep into during the interviews, I found there are two other interesting differences that stand out between the two types:
+
+- For front end system design interviews I was often encouraged to treat the interviewer as the **product manager** and we spent some time just fleshing out the brief solution for each user story. For the back end system design interviews, we didn't really get to talk about any user interaction (I am aware that the definition of users of your system might vary, depending on whether it is customer-facing vs. developer-facing)
+- These two types of system design interviews also differ a lot in terms of estimating certain system's needs based on the potential scale of the system. The system needs can be storage needs or throughput needs or any other types of requirements.
+  - It is common and expected to do these estimation during back end system design interviews since your design decision is only feasible when all of the system needs can realistically be met.
+  - But for the front end system design interview, I rarely needed to do any **quantitative estimation** - for example, when I was designing some live feed during a front end system design interview, I didn't need to do estimations like "So let's say each message was roughly 140 characters long and it is utf8 so that's 140 bytes and an average user gets 10000 messages over a certain period of time so we ended up allocating 1.4mb memory on user devices". Again, I am not saying that this would never come up during a front end system design interview. in my experience It is just much, much more rare compared to back end ones.
+
+## Career ceiling
+
+I am going to talk about something that is a little tangential. I don't think this is going to be a hot take but if you just want to pass the upcoming interviews, then you are welcome to skip this part.
+
+I have done interviews for both front end focused roles and general software engineer roles. As I went through the preparation process for the system designs interviews, it just occurred to me that there is indeed a career ceiling for a pure front end focused software engineer role.
+
+Ok so let's first get this out of the way - you can be extremely successful as either a front end developer or a back end developer.
+
+Also it is hard to discuss any topic intelligently when we cannot agree on definitions. By saying front end developers I meant developers/engineers who solely work on the UI of a software system. And by saying career ceiling I meant the potential terminal title and the highest level such a developer/engineer can achieve in the technical individual contributor track.
+
+This is an unspoken thing and a very impolite conversation. And [there are exceptions](https://twitter.com/swyx/status/1236023548227072000) to this but just statistically speaking there seems to be a career ceiling for front end-only developers.
+
+## Fighting the inertia
+
+Part of the ceiling comes from some traditional baggage:
+
+- modern front end development is fairly new compared to the back end counterpart. I have seen some bias in the industry that front end is not real engineering compared to the back end and that needs absolutely to be combated.
+- power structure persists for a very long time and that's partially why most of VP Eng and CTOs out there are back end/infra developers.
+
+## Economic reasoning
+
+I had this realization that when I was going through the back end system design interviews vs. the front end system design interviews - the technical topics those interviews tend to cover let me think about some economic reasoning leading to the perception of a "Front end ceiling" as well. Your value to the company really depends on how many machines/compute/storage run through you. As a developer/engineer, that means much money you control and front end-only developers just don't take as much. Of course front end is just as hard and as important especially for consumer facing products but at the end of the day your compute is being run on someone else's machine or device and the company just don't value that as much as the compute that they themselves need to pay for and to scale.
+
+## Short-lived vs. long-running
+
+On top of that, normally the front end/web apps are short-lived on the client side - the user opens the browser tab that loads your app and after 20 minutes they might just close the tab, and all the memory allocated by your app is on their devices from that point onward. On the other hand, the back end servers/services behind probably keep running for months or even years. One implication resulting from this difference is that you can generally get away with bad code that leads to performance problems down the road in front end apps because they are short-lived and the scale of the data they are dealing with is probably small, but you cannot ignore that in a long-running back end service.
+
+Good luck with your interviews.
+
+---
+
+_Follow me on [Twitter](https://twitter.com/he_zhenghao)_
diff --git a/website/blog/2022-06-18-javascript-object-vs-map.md b/website/blog/2022-06-18-javascript-object-vs-map.md
new file mode 100644
index 0000000000..b1ada778a3
--- /dev/null
+++ b/website/blog/2022-06-18-javascript-object-vs-map.md
@@ -0,0 +1,381 @@
+---
+title: When You Should Prefer Map Over Object In JavaScript
+slug: javascript-object-vs-map
+author: Zhenghao He
+author_title: Engineering Manager at Robinhood, ex-Amazon
+author_url: https://x.com/he_zhenghao
+author_image_url: /img/authors/zhenghao.jpg
+tags: [front end, javascript, interview, object, map]
+hide_table_of_contents: true
+---
+
+<head>
+  <link rel="canonical" href="https://www.zhenghao.io/posts/object-vs-map" />
+</head>
+
+> See discussions on [Reddit](https://www.reddit.com/r/javascript/comments/vgs7y1/why_you_should_prefer_map_over_object_in/)
+
+In JavaScript, objects are handy. They allow us to easily group multiple pieces of data together. After ES6, we got a new addition to the language - `Map`. In a lot of aspects, it seems like a more capable `Object` with a somewhat clumsy interface. However, most people still reach for objects when they need a [hash map](https://en.wikipedia.org/wiki/Hash_table) and only switch to using `Map` when they realize the keys can't just be strings for their use cases. As a result, `Map` remains **underused** in today's JavaScript community.
+
+In this post, I will break down all the reasons when you should consider using `Map` more and its performance characteristics with benchmarks.
+
+<!-- truncate -->
+
+> In JavaScript, Object is a pretty broad term. Almost everything can be an object, except for two bottom types - `null` and `undefined`. In this blog post, Object only refers to plain old objects, delimited by a left brace `{` and a right brace `}`.
+
+## TL;DR:
+
+- Use `Object` for records where you have a fixed and finite number of properties/fields known at author time, such as a config object. And anything that is for one-time use in general.
+- Use `Map` for dictionaries or hash maps where you have a variable number of entries, with frequent updates, whose keys might not be known at author time, such as an [event emitter](https://github.com/developit/mitt/blob/main/src/index.ts#L45).
+- According to [my benchmarks](#performance-extravaganza), _unless_ the keys are strings of small integers, `Map` is indeed **more performant** than `Object` on insertion, deletion and iteration speed, and it consumes **less memory** than an object of the same size.
+
+## Why `Object` falls short of a hash map use case
+
+Probably the most obvious downside of using objects for hash maps is that objects only allow keys that are strings and symbols. Any other types will be implicitly cast to string via the `toString` method.
+
+```jsx
+const foo = [];
+const bar = {};
+const obj = { [foo]: 'foo', [bar]: 'bar' };
+
+console.log(obj); // {"": 'foo', [object Object]: 'bar'}
+```
+
+More importantly, using objects for hash maps can cause confusion and _security hazards_.
+
+### Unwanted inheritance
+
+Before ES6, the only way to get a hash map is by creating an empty object.
+
+```jsx
+const hashMap = {};
+```
+
+However, upon creation, this object is no longer empty. Although `hashMap` is made with an empty object literal, it automatically inherits from `Object.prototype`. That's why we can invoke methods like `hasOwnProperty`, `toString`, `constructor` on `hashMap` even though we never explicitly defined those methods on the object.
+
+Because of prototypal inheritance, we now have two types of properties conflated: properties that live within the object itself, i.e. its _own_ properties, and properties that live in the prototype chain, i.e. _inherited_ properties. As a result, we need an additional check (e.g. `hasOwnProperty`) to make sure a given property is indeed user-provided, as opposed to inherited from the prototype.
+
+On top of that, because of how the property resolution mechanism works in JavaScript, any change to `Object.prototype` at runtime will cause a _ripple_ effect in all objects. This opens the door for [prototype pollution attacks](https://github.com/HoLyVieR/prototype-pollution-nsec18/blob/master/paper/JavaScript_prototype_pollution_attack_in_NodeJS.pdf), which can be a serious security issue for large JavaScript applications.
+
+Fortunately, we can work around this by using `Object.create(null)`, which makes an object that inherits nothing from `Object.prototype`.
+
+### Name collisions
+
+When an object's _own_ properties have name collisions with ones on its prototype, it breaks expectations and thus crashes your program.
+
+For example, we have a function `foo` which accepts an object:
+
+```jsx
+function foo(obj) {
+  //...
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+    }
+  }
+}
+```
+
+There is a reliability hazard in `obj.hasOwnProperty(key)`: given how property resolution mechanism works in JavaScript, if `obj` contains a user-provided property with the same name `hasOwnProperty`, that shadows `Object.prototype.hasOwnProperty`. As a result, we _don't know_ which method is going to get called exactly during runtime.
+
+Some defensive programming can be done to prevent this. For example we can "borrow" the "real" `hasOwnProperty` from `Object.prototype` instead:
+
+```jsx
+function foo(obj) {
+  //...
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      // ...
+    }
+  }
+}
+```
+
+A shorter way might be invoking the method on an object literal as in `{}.hasOwnProperty.call(key)` however it is still pretty cumbersome. That's why there is a newly-added static method `Object.hasOwn`.
+
+### Sub-optimal ergonomics
+
+`Object` doesn't provide adequate ergonomics to be used as a hash map. Many common tasks can't be intuitively performed.
+
+#### size
+
+`Object` doesn't come with a handy API to get the size, i.e. the number of properties. And there are nuances to what constitutes the size of an object:
+
+- if you only care about string, enumerable keys, then you can convert the keys to an array with `Object.keys()` and get its `length`.
+- if you want to account for _non-enumerable_ string keys, then you have to use `Object.getOwnPropertyNames` to get a list of the keys and get its length.
+- if you are interested in symbol keys, you can use `getOwnPropertySymbols` to reveal the symbol keys. Or you can use `Reflect.ownKeys` to get both string keys and symbol keys all at once, regardless if it is enumerable or not.
+
+All the above options take a runtime complexity of `O(n)` since we have to construct an array of keys first before we can get its length.
+
+#### iterate
+
+Looping through objects suffers from similar complexity.
+
+We can use the good old `for ... in` loop. But it reveals inherited enumerable properties:
+
+```jsx
+Object.prototype.foo = 'bar';
+
+const obj = { id: 1 };
+
+for (const key in obj) {
+  console.log(key); // 'id', 'foo'
+}
+```
+
+We can't use `for ... of` with an object since by default it is not an iterable, unless we explicitly define the `Symbol.iterator` method on it.
+
+We can use `Object.keys`, `Object.values` and `Object.entries` to get a list of enumerable, string keys (or/and values) and iterate through that instead, which introduces an extra step with overhead.
+
+Finally, the insertion order is infamously not _fully_ respected. In most browsers, integer keys are sorted in ascending order and take precedence over string keys even if the string keys were inserted before the integer keys.
+
+```jsx
+const obj = {};
+
+obj.foo = 'first';
+obj[2] = 'second';
+obj[1] = 'last';
+
+console.log(obj); // {1: 'last', 2: 'second', foo: 'first'}
+```
+
+#### clear
+
+There is no easy way to remove all properties from an object, you have to delete each property one by one with the `delete` operator, which [has been historically known](https://stackoverflow.com/questions/43594092/slow-delete-of-object-properties-in-js-in-v8) to be slow. However, my benchmarks show that its performance is actually not an order-of-magnitude slower than `Map.prototype.delete`. More on that later.
+
+#### check property existence
+
+Finally, we can't rely on the dot/bracket notation to check for existence of an property because the value itself could be set as `undefined`. Instead we have to use `Object.prototype.hasOwnProperty` or `Object.hasOwn`.
+
+```jsx
+const obj = { a: undefined };
+
+Object.hasOwn(obj, 'a'); // true
+```
+
+## Map for Hash Map
+
+ES6 brings us `Map`. It is much more suited for a hash map use case.
+
+First of all, unlike `Object`, which only allows keys that are strings and symbols, `Map` supports keys of any data type.
+
+> However if you are using `Map` to store meta-data for objects, then you should use `WeakMap` instead to avoid memory leak.
+
+But more importantly, `Map` provides a _clean separation_ between user-defined and built-in program data, at the expense of an additional `Map.prototype.get` to retrieve entries.
+
+`Map` also provides better ergonomics: A `Map` is an iterable by default. That means you can iterate a map easily with `for ... of`, and do things like using nested destructuring to pull out the first entry from a map.
+
+```jsx
+const [[firstKey, firstValue]] = map;
+```
+
+In contrast to `Object`, `Map` provides dedicated APIs for various common tasks:
+
+- `Map.prototype.has` checks for the existence of a given entry, less awkward compared to having to `Object.prototype.hasOwnProperty` / `Object.hasOwn` on objects.
+- `Map.prototype.get` returns the value associated to the provided key. One might feel this is clunkier than the dot notation or the bracket notation on objects. Nevertheless it provides a clean separation between user data and built-in method.
+- `Map.prototype.size` returns the number of entries in a `Map` and it is a clear winner over the maneuvers you have to perform to get an object's size. Besides, it is much faster.
+- `Map.prototype.clear` removes all the entries in a `Map` and it much faster than the `delete` operator.
+
+## Performance extravaganza
+
+There seems to be a common belief among JavaScript community that `Map` is faster than `Object`, for the most part. There are [people](https://twitter.com/diegohaz/status/1534888291732013058) who claimed to see noticeable performance gains by switching from `Object` to `Map`.
+
+My experience of grinding LeetCode seems to confirm this belief: LeetCode feeds a huge amount of data as the test cases to your solution and it times out if your solution is taking too long. Questions like [this](https://leetcode.com/problems/random-pick-with-weight/solutions/671804/Javascript-with-explanation-and-very-interesting-find-regarding-vs-Map/) only times out if you use `Object`, but not on `Map`.
+
+However, I believe just saying "`Map` is faster than `Object`" is reductive. There must be some nuance that I wanted to find out myself. Therefore. I built [a little app](https://csb-yuu1dm.netlify.app/) to run some benchmarks.
+
+<details>
+    <summary>Important Disclaimer</summary>
+    <p>I don't claim to fully understand how V8 works under the hood to optimize `Map` despite my many attempts to read blog posts and peek into the C++ source code. Perfectly robust benchmarking is hard, and most of us have never gone through any form of training in either benchmarking or interpreting the results. The more benchmarking I do the more it felt like a story about [blind men and an elephant](https://en.wikipedia.org/wiki/Blind_men_and_an_elephant). So take everything I'm saying here about performance with a grain of salt. You'll need to test such changes with your application in a production environment to know for sure if there are actual performance gains from using `Map`s over `Object`s.</p>
+</details>
+
+### Benchmarking implementation details
+
+[The app](https://csb-yuu1dm.netlify.app/) has a table that shows the insertion, iteration, and deletion speed measured on `Object` and `Map`.
+
+The performances of insertion and iteration are measured in operations per second. I wrote a utility function `measureFor` that runs the target function repeatedly until the specified minimal amount of time threshold (i.e. the `duration` input field on the UI) has been reached. It returns the average number of times such a function is executed per second.
+
+```jsx
+function measureFor(f, duration) {
+  let iterations = 0;
+  const now = performance.now();
+  let elapsed = 0;
+  while (elapsed < duration) {
+    f();
+    elapsed = performance.now() - now;
+    iterations++;
+  }
+
+  return ((iterations / elapsed) * 1000).toFixed(4);
+}
+```
+
+As for deletion, I am simply going to measure the time taken for using the `delete` operator to remove all properties from an objects and compare it with the time with `Map.prototype.delete` for a `Map` of the same size. I could use `Map.prototype.clear` but it defeats the purpose of the benchmarks as I know for sure it is going to be vastly faster.
+
+In these three operations, I pay more attention to insertion since it tends to be the most common operation I perform in my day-to-day work. For iteration performance, it is hard to come up with an all-encompassing benchmarks as there are many different variants of iteration we can perform on a given object. Here I am only measuring the `for ... in` loop.
+
+I used three types of keys here:
+
+1. strings, e.g. `yekwl7caqejth7aawelo4`.
+2. integer strings, e.g. `123`.
+3. numeric strings generated by `Math.random().toString()`, e.g. `0.4024025689756525`.
+
+All keys are randomly generated so we don't hit the inline-cache implemented by V8. I also explicitly convert integer and numeric keys to strings using `toString` before adding them to objects to avoid the overhead of implicitly casting.
+
+Lastly, before the benchmark begins, there is also a warmup phase for at least 100ms where we repeatedly create new objects and maps that are discarded right away.
+
+I put the code on [CodeSandbox](https://codesandbox.io/s/still-glitter-yuu1dm) if you want to play with it.
+
+I started with `Object` and `Map` with a size of 100 properties/entries, all the way to 5000000, and had each type of operations keep running for 10000ms to see how they performed against each other. Here are my findings...
+
+<details>
+    <summary>Why do we stop when the number of entries reaches 5000000?</summary>
+    <p>Because this is about as big as an object can get in JavaScript. According to [@jmrk](https://stackoverflow.com/questions/54452896/maximum-number-of-entries-in-node-js-map#comment127492362_72149605), a V8 engineer who is active on StackOverflow, "if the keys are strings, a regular object becomes unusably slow after ~8.3M elements (for which there is a technical reason: a certain bit field being 23 bits wide and taking a very slow fallback path when exceeded).".</p>
+</details>
+
+### string keys
+
+Generally speaking, when keys are (non-numeric) string, `Map` outperforms `Object` on all operations.
+
+![Map vs Object operations benchmark](https://www.zhenghao.io/art/blog/object-vs-map/deletion-speed.png)
+
+But the nuance is that when the number of entries is not really huge (under 100000), `Map` is twice as fast as `Object` on insertion speed, but as the size grows over 100000, the performance gap starts to shrink.
+
+I made some graphs to better illustrate my findings.
+
+![Object vs Map insertion performance with string keys](https://www.zhenghao.io/art/blog/object-vs-map/string-key-line-1.png)
+
+The above graph shows how insertion rate drops (y-axis) as the number of entries increased (x-axis). However because the x-axis expands too wide (from 100 to 1000000), it is hard to tell the gap between these two lines.
+
+I then used logarithmic scale to process the data and made the graph below.
+
+![Object vs Map insertion performance with string keys on logarithmic scale](https://www.zhenghao.io/art/blog/object-vs-map/string-key-line-2.png)
+
+You can clearly tell the two lines are converging.
+
+I made another graph plotting how much faster `Map` is in relation to `Object` on insertion speed. You can see `Map` starts out being about 2 times faster than `Object`. Then over time the performance gap starts to shrink. Eventually `Map` is only 30% faster as the size grows to 5000000.
+
+![Object vs Map insertion relative performance on logarithmic scale](https://www.zhenghao.io/art/blog/object-vs-map/string-key-line-3.png)
+
+Most of us will never have more than 1 million entries in an object or map though. With a size of a few hundreds or thousands of entries, `Map` is at least twice as performant as `Object`. Therefore, should we leave it at that and head over to start refactoring our codebase by going all in on `Map`?
+
+Absolutely not... or at least not with an expectation that our app becomes 2 times faster. Remember we haven't explored other types of keys. Let's take a look at integer keys.
+
+### integer keys
+
+The reason I specifically want to run benchmarks on objects with integer keys is that V8 internally optimizes [integer-indexed properties](https://v8.dev/blog/fast-properties#named-properties-vs.-elements) and store them in a separate array that can be accessed linearly and consecutively. I can't find any resources confirming it employs the same kind of optimization for `Map`s though.
+
+Let's first try integer keys in the range of [0, 1000].
+
+![Object vs Map insertion performance with integer keys](https://www.zhenghao.io/art/blog/object-vs-map/integer-key-1.png)
+
+As I expected, `Object` **outperform** `Map` this time. They are 65% faster than maps for insertion speed and 16% faster to iterate.
+
+Let's widen the range so that the maximum integer in the keys is 1200.
+
+![Object vs Map insertion performance with integer keys with maximum integer of 1200](https://www.zhenghao.io/art/blog/object-vs-map/integer-key-2.png)
+
+It seems like now `Map` s are starting to get a little faster than objects for insertion and 5 times faster for iteration.
+
+Now that we only increased the integer keys' range, not the actual size of `Object` and `Map`. Let's bump up the size to see how that affects the performances.
+
+![Object vs Map insertion performance with integer keys with 1000 properties](https://www.zhenghao.io/art/blog/object-vs-map/integer-key-3.png)
+
+When a size of 1000 properties, `Object` ends up being 70% faster than `Map` for insertion and 2 times slower for iteration.
+
+I played with a bunch of different combinations of `Object`/`Map` sizes and integer key ranges and failed to come up with a clear pattern. But the general trend I am seeing is that, for as the size grows, with some relative small integer being the keys, objects can be _more performant_ than `Map`s in terms of insertion, always roughly the same as to deletion and 4 or 5 times slower to iterate. The threshold of max integer keys at which objects start to be slower for insertion grows with the size of the objects. For example, when the object only has 100 entries, the threshold is 1200; when it has 10000 entries, the threshold seems to be around 24000.
+
+### numeric keys
+
+Lastly, let's take a look at the last type of keys - numeric keys.
+
+Technically, the previously integer keys are also numeric. Here numeric keys specifically refer to the numeric strings generated by `Math.random().toString()`.
+
+The results are similar to those string-key cases: `Map`s start off as much faster than objects (2 times faster for insertion and deletion, 4-5 times faster for iteration), but the delta is getting smaller as we increase the size.
+
+<details>
+    <summary>What about nested objects/maps?</summary>
+    <p>You might have noticed that I have been only talking about flat objects and maps with only one depth. I did add some depth but I found the performance characteristics stay largely the same as long as the total number of entries are the same, no matter how many levels of nesting we have.</p>
+    <p>For example, with `width` being 100 and `depth` being 3, we have a total number of one million entries (100 * 100 * 100). The results are pretty much the same compared to just having `1000000` for width and 1 for `depth`</p>
+</details>
+
+### Memory usage
+
+Another important facet of benchmarking is memory utilization.
+
+Since I don't have control over the garbage collector in a browser environment, I decided to run benchmarks in Node.
+
+I created a [little script](https://gist.github.com/zhenghaohe/b496dcffe3a9a6217eba90776dc2cafe) to measure their respective memory usage with manually triggered full garbage collection in each measurement. Run it with `node --expose-gc` and I got the following results:
+
+```jsx
+{
+  object: {
+    'string-key': {
+      '10000': 3.390625,
+      '50000': 19.765625,
+      '100000': 16.265625,
+      '500000': 71.265625,
+      '1000000': 142.015625
+    },
+    'numeric-key': {
+      '10000': 1.65625,
+      '50000': 8.265625,
+      '100000': 16.765625,
+      '500000': 72.265625,
+      '1000000': 143.515625
+    },
+    'integer-key': {
+      '10000': 0.25,
+      '50000': 2.828125,
+      '100000': 4.90625,
+      '500000': 25.734375,
+      '1000000': 59.203125
+    }
+  },
+  map: {
+    'string-key': {
+      '10000': 1.703125,
+      '50000': 6.765625,
+      '100000': 14.015625,
+      '500000': 61.765625,
+      '1000000': 122.015625
+    },
+    'numeric-key': {
+      '10000': 0.703125,
+      '50000': 3.765625,
+      '100000': 7.265625,
+      '500000': 33.265625,
+      '1000000': 67.015625
+    },
+    'integer-key': {
+      '10000': 0.484375,
+      '50000': 1.890625,
+      '100000': 3.765625,
+      '500000': 22.515625,
+      '1000000': 43.515625
+    }
+  }
+}
+```
+
+It is pretty clear that `Map` consumes less memory than `Object` by anywhere from 20% to 50%, which is no surprise since `Map` doesn't store [property descriptors](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties) such as `writable`/`enumerable`/`configurable` like `Object` does.
+
+## Conclusion
+
+So what do we take away from all this?
+
+- `Map` is faster than `Object` _unless_ you have small integer, array-indexed keys, and it is more memory-efficient.
+- Use `Map` if you need a hash map with frequent updates; use `Object` if you want to a fixed key-value collection (i.e. record), and watch out for pitfalls that come with prototypal inheritance.
+
+> If you know the details of exactly how V8 optimizes `Map` or simply want to call out the flaws in my benchmarks, ping me. I'll be happy to update this post based on your information!
+
+## Notes on browser compatibility
+
+`Map` is an ES6 feature. By now most of us shouldn't be worried about its compatibility unless you are targeting a user base with some niche, old browser. By "old" I mean older than IE 11 because even IE 11 supports [`Map`](https://caniuse.com/mdn-javascript_builtins_map) and at this point IE 11 is [dead](https://twitter.com/swyx/status/1536353949132853248). We shouldn't be mindlessly transpiling and adding polyfill to target ES5 by default, because not only does it bloat your bundle size, it is also slower to run compared to modern JavaScript. Most importantly, it penalizes 99.999% of your users who use a modern browser.
+
+Plus, we don't have to drop support for legacy browsers - serve legacy code via `nomodule` by serving fallback bundles so that we can avoid degrading the experience of visitors with modern browsers. Refer to [_Transitioning to modern JavaScript_](https://www.youtube.com/watch?v=cLxNdLK--yI) if you need more convincing.
+
+The JavaScript language is evolving and the platform keeps getting better at optimizing modern JavaScript. We shouldn't use browser compatibility as an excuse to ignore all the improvements that have been made.
+
+---
+
+_Follow me on [Twitter](https://twitter.com/he_zhenghao)_
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
new file mode 100755
index 0000000000..d03f802f22
--- /dev/null
+++ b/website/docusaurus.config.js
@@ -0,0 +1,304 @@
+const { themes } = require('prism-react-renderer');
+
+module.exports = {
+  title: 'The Official Front End Interview Handbook 2025',
+  tagline:
+    'Front end interview preparation resources for busy engineers – quiz questions, JavaScript coding questions, algorithms questions, front end system design questions and more. Updated for 2025!',
+  url: 'https://www.frontendinterviewhandbook.com',
+  baseUrl: '/',
+  trailingSlash: false,
+  favicon: 'img/favicon.png',
+  organizationName: 'yangshun',
+  projectName: 'front-end-interview-handbook',
+  onBrokenLinks: 'ignore',
+  themeConfig: {
+    announcementBar: {
+      id: 'gfe', // Increment on change
+      content: `We are now part of <a href="https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook" target="_blank">GreatFrontEnd</a>, a front end interview preparation platform created by ex-Meta and Google Engineers. <a href="https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook" target="_blank">Get 20% off today</a>!`,
+      isCloseable: false,
+    },
+    prism: {
+      theme: themes.github,
+      darkTheme: themes.dracula,
+    },
+    navbar: {
+      title: 'Front End Interview Handbook',
+      logo: {
+        alt: 'Front End Interview Handbook Logo',
+        src: 'img/logo.svg',
+      },
+      items: [
+        { to: 'introduction', label: 'Start reading', position: 'left' },
+        {
+          type: 'dropdown',
+          position: 'left',
+          label: 'Practice',
+          items: [
+            {
+              label: 'Coding Questions',
+              href: 'https://www.greatfrontend.com/questions?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook',
+            },
+            {
+              label: 'System Design',
+              href: 'https://www.greatfrontend.com/questions/system-design?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook',
+            },
+            {
+              label: 'Quiz Questions',
+              href: 'https://www.greatfrontend.com/questions/quiz?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook',
+            },
+          ],
+        },
+        {
+          to: 'front-end-system-design',
+          label: 'System design',
+          position: 'left',
+        },
+        { to: 'blog', label: 'Blog', position: 'left' },
+        {
+          type: 'localeDropdown',
+          position: 'right',
+        },
+        {
+          href: 'https://github.com/yangshun/front-end-interview-handbook',
+          position: 'right',
+          className: 'navbar-icon navbar-icon-github',
+          'aria-label': 'GitHub repository',
+          html: `<svg
+              stroke="currentColor"
+              fill="currentColor"
+              stroke-width="0"
+              viewBox="0 0 496 512"
+              height="16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg">
+              <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
+            </svg>`,
+        },
+        {
+          href: 'https://discord.com/invite/NDFx8f6P6B',
+          position: 'right',
+          className: 'navbar-icon navbar-icon-discord',
+          'aria-label': 'Discord channel',
+          html: `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" height="16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"></path></svg>`,
+        },
+        {
+          href: 'https://x.com/greatfrontend',
+          position: 'right',
+          className: 'navbar-icon navbar-icon-twitter',
+          'aria-label': 'Twitter page',
+          html: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" width="16" height="16" fill="currentColor" version="1.1"><path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66"/></svg>`,
+        },
+      ],
+    },
+    footer: {
+      style: 'dark',
+      copyright: `Copyright © ${new Date().getFullYear()} Yangshun Tay and GreatFrontEnd`,
+      links: [
+        {
+          title: 'General',
+          items: [
+            {
+              label: 'Get started',
+              href: '/introduction/',
+            },
+            {
+              label: 'Trivia questions',
+              href: '/trivia/',
+            },
+            {
+              label: 'Company questions',
+              href: '/company-interview-questions/',
+            },
+            {
+              label: 'Blog',
+              href: '/blog/',
+            },
+          ],
+        },
+        {
+          title: 'Coding',
+          items: [
+            {
+              label: 'Algorithms',
+              href: '/coding/algorithms/',
+            },
+            {
+              label: 'JavaScript utility functions',
+              href: '/coding/javascript-utility-function/',
+            },
+            {
+              label: 'User interfaces',
+              href: '/coding/build-front-end-user-interfaces/',
+            },
+          ],
+        },
+        {
+          title: 'System design',
+          items: [
+            {
+              label: 'System design overview',
+              href: '/front-end-system-design/',
+            },
+            {
+              label: 'User interface components',
+              href: '/front-end-system-design/ui-components/',
+            },
+            {
+              label: 'Applications',
+              href: '/front-end-system-design/applications/',
+            },
+          ],
+        },
+        {
+          title: 'More',
+          items: [
+            {
+              label: 'GreatFrontEnd',
+              href: 'https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=banner&gnrs=frontendinterviewhandbook',
+            },
+            {
+              label: 'GitHub',
+              href: 'https://github.com/yangshun/front-end-interview-handbook',
+            },
+            {
+              label: 'X',
+              href: 'https://x.com/greatfrontend',
+            },
+            {
+              label: 'Discord',
+              href: 'https://discord.com/invite/NDFx8f6P6B',
+            },
+            {
+              label: 'Contact us',
+              href: 'mailto:contact@greatfrontend.com',
+            },
+            {
+              label: 'Tech Interview Handbook',
+              href: 'https://www.techinterviewhandbook.org',
+            },
+          ],
+        },
+      ],
+    },
+    algolia: {
+      appId: '21T5PEFGI7',
+      apiKey: '10d7777b44bc7e0495cc00e860918b03',
+      indexName: 'frontendinterviewhandbook',
+    },
+    docs: {
+      sidebar: {
+        hideable: true,
+      },
+    },
+  },
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          path: '../contents',
+          routeBasePath: '/',
+          sidebarPath: require.resolve('./sidebars.js'),
+          editUrl:
+            'https://github.com/yangshun/front-end-interview-handbook/edit/main/contents/',
+          showLastUpdateAuthor: true,
+          showLastUpdateTime: true,
+        },
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+        gtag: {
+          trackingID: 'G-D9B6CHX36V',
+        },
+        sitemap: {
+          ignorePatterns: ['/blog/tags/javascript', 'blog/tags/career', 'blog/tags/map', 'blog/tags/object', 'blog/tags/interview', 'blog/tags/front-end', 'blog', 'blog/blog/javascript-object-vs-map', 'blog/a-glimpse-into-front-end-interviews', '/blog/front-end-career-questions', 'blog/are-front-end-development-skills-enough-for-a-career'],
+        },
+      },
+    ],
+  ],
+  plugins: [
+    [
+      '@docusaurus/plugin-google-gtag',
+      {
+        id: 'universal-analytics',
+        trackingID: 'UA-44622716-3',
+        anonymizeIP: true,
+      },
+    ],
+    [
+      '@docusaurus/plugin-client-redirects',
+      {
+        redirects: [
+          {
+            to: '/css-questions',
+            from: '/en/css-questions',
+          },
+          {
+            to: '/html-questions',
+            from: '/en/html-questions',
+          },
+          {
+            to: '/javascript-questions',
+            from: '/en/javascript-questions',
+          },
+        ],
+      },
+    ],
+  ],
+  scripts: [],
+  i18n: {
+    defaultLocale: 'en',
+    locales: [
+      'en',
+      'zh-CN',
+      'es',
+      'ja-JP',
+      'kr',
+      'pl',
+      'pt-BR',
+      'ru',
+      'tl',
+      'bn',
+    ],
+    localeConfigs: {
+      'zh-CN': {
+        htmlLang: 'zh-CN',
+        label: '简体中文',
+        direction: 'ltr',
+      },
+      es: {
+        label: 'Español',
+        direction: 'ltr',
+      },
+      'ja-JP': {
+        label: '日本語',
+        direction: 'ltr',
+      },
+      kr: {
+        label: '한국어',
+        direction: 'ltr',
+      },
+      pl: {
+        label: 'Polski',
+        direction: 'ltr',
+      },
+      'pt-BR': {
+        htmlLang: 'pt-BR',
+        label: 'Português',
+        direction: 'ltr',
+      },
+      ru: {
+        label: 'Русский',
+        direction: 'ltr',
+      },
+      tl: {
+        label: 'Tagalog',
+        direction: 'ltr',
+      },
+      bn: {
+        label: 'বাংলা',
+        direction: 'ltr',
+      },
+    },
+  },
+};
diff --git a/website/i18n/bn/javascript-questions.md b/website/i18n/bn/javascript-questions.md
new file mode 100644
index 0000000000..c050b953b3
--- /dev/null
+++ b/website/i18n/bn/javascript-questions.md
@@ -0,0 +1,251 @@
+---
+title: ফ্রন্টএন্ড ডেভেলপার এর জন্য JavaScript প্রশ্ন
+---
+
+উত্তরসমূহ [ফ্রন্টএন্ড জব ইন্টারভিউ প্রশ্ন - JS প্রশ্নসূমুহ](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/javascript-questions.md)। পরামর্শ এবং পুল-রিকোয়েস্ট এর মাধ্যমে সংশোধনের করুন!
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+### ইভেন্ট ডেলিগেশন ব্যাখ্যা করুন
+
+ইভেন্ট ডেলিগেশন হল এমন একটি কৌশল যেখানে ইভেন্ট কে চাইল্ড এলিমেন্ট এর পরিবর্তে প্যারেন্ট এলিমেন্ট এ বসানো হয়। ডোম এর ইভেন্ট-বাবলিং বৈশিষ্টের কারণে যখনই চাইল্ড এ ইভেন্টটি ট্রিগার হবে তখনই ইভেন্টটি কল হবে। এই টেকনিক এর সুবিধাগুলি হলো :
+
+- মেমরি ফুটপ্রিন্ট কমে যায় কারণ প্রতিটি চাইল্ড এ ইভেন্ট হ্যান্ডলার সংযুক্ত করার পরিবর্তে প্যারেন্ট এলিমেন্টে শুধুমাত্র একটি একক হ্যান্ডলার প্রয়োজন হয়।
+- অপসারণ করা এলিমেন্ট থেকে হ্যান্ডলারকে আনবাইন্ড করার এবং নতুন উপাদানগুলির জন্য ইভেন্টটিকে বাইন্ড করার দরকার নেই।
+
+###### রেফারেন্স
+
+- https://davidwalsh.name/event-delegate
+- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
+
+### JavaScript এ 'this' কীভাবে কাজ করে তা ব্যাখ্যা করুন
+
+'this' এর কোন সহজ ব্যাখ্যা নেই; এটি জাভাস্ক্রিপ্টের সবচেয়ে বিভ্রান্তিকর ধারণাগুলির মধ্যে একটি। একটি ব্যাখ্যা হল যে 'this' এর মান কীভাবে ফাংশনটিকে কল করা হয় তার উপর নির্ভর করে। আমি অনলাইনে `this` নিয়ে অনেক ব্যাখ্যা পড়েছি এবং আমি [Arnav Aggrawal](https://medium.com/@arnav_aggarwal) এর ব্যাখ্যাটি সবচেয়ে পরিষ্কার বলে খুঁজে পেয়েছি। নিম্নলিখিত নিয়ম প্রয়োগ করা হয়েছে :
+
+১. যদি 'new' কীওয়ার্ডটি ফাংশনটি কল করার সময় ব্যবহার করা হয়, তাহলে ফাংশনের ভিতরে `this` একটি নতুন অবজেক্ট। ২. যদি একটি ফাংশন কল/তৈরি করতে `apply`, `call` বা `bind` ব্যবহার করা হয়, তাহলে ফাংশনের ভিতরে `this` টি সেই অবজেক্ট যা আর্গুমেন্ট হিসেবে পাস করা হয়। ৩. যদি একটি ফাংশনকে একটি মেথড হিসাবে কল করা হয়, যেমন `obj.method()`——তাহলে `this` হবে সেই অবজেক্ট যেটির প্রপার্টি হবে ওই ফাংশন। ৪. যদি ফাংশনটি একটি ফাংশন ইনভোকেশন হিসাবে ব্যবহার করা হয়, অর্থাৎ এটি কোনো শর্ত ছাড়াই কল করা হয়, তাহলে 'this' হবে গ্লোবাল অবজেক্ট। এটি হলো ব্রাউজারে একটি `window` অবজেক্ট। যদি (`use strict`) মোডে থাকে, তাহলে `this` গ্লোবাল অবজেক্টের পরিবর্তে `undefined` হবে। ৫. উপরের নিয়মগুলির একাধিক প্রযোজ্য হলে, যে নিয়মটি উপরে, সেটি জয়ী হবে এবং সেটি `this` মান সেট করবে। ৬. যদি ফাংশনটি একটি ES2015 অ্যারো ফাংশন হয়, তবে এটি উপরের সমস্ত নিয়ম উপেক্ষা করে এবং এটি তৈরি করার সময় এটির আশেপাশের স্কোপ এর `this` মানটি গ্রহণ করে৷
+
+গভীর ব্যাখ্যার জন্য, চেক করুন তার [Medium আর্টিকেল](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3).
+
+#### আপনি কি ES6 এ this দিয়ে কাজ করার নিয়ম পরিবর্তন হয়েছে এমন একটি উদাহরণ দিতে পারবেন?
+
+ES6 এ [অ্যারো ফাঙ্কশন](http://2ality.com/2017/12/alternate-this.html#arrow-functions) আছে যেটি হলো [লেক্সিক্যাল স্কোপ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this)। এটি সাধারণত সুবিধাজনক কিন্তু কলারকে `.call` বা `.apply`-এর মাধ্যমে কনটেক্সট নিয়ন্ত্রণ করতে বাধা দেয়—যার পরিণতি হল যে `jQuery` এর মতো একটি লাইব্রেরি আপনার ইভেন্ট হ্যান্ডলার ফাংশনে `this` কে সঠিকভাবে bind করবে না। সুতরাং, বড় লিগ্যাসি অ্যাপ্লিকেশনগুলিকে রিফ্যাক্টর করার সময় এটি মাথায় রাখা গুরুত্বপূর্ণ৷
+
+###### রেফারেন্স
+
+- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
+- https://stackoverflow.com/a/3127440/1751946
+
+### প্রোটোটিপাল ইনহেরিটেন্স কিভাবে কাজ করে তা ব্যাখ্যা করুন
+
+এটি একটি কমন JavaScript ইন্টারভিউ প্রশ্ন। সমস্ত JavaScript অবজেক্টের একটি `__proto__` প্রপার্টি আছে যা `Object.create(null)` দিয়ে তৈরি করা অবজেক্ট ছাড়া, এটি অন্য একটি অবজেক্টের রেফারেন্স, যেটিকে অবজেক্টের "প্রোটোটাইপ" বলা হয়। যখন কোনো অবজেক্ট এ কোনো প্রপার্টি অ্যাক্সেস করা হয় এবং যদি সেই অবজেক্ট এ প্রপার্টি টি পাওয়া না যায়, জাভাস্ক্রিপ্ট ইঞ্জিন অবজেক্টের `__proto__`, এবং `__proto__` এর `__proto__` দেখে, যতক্ষণ না এটি প্রপার্টি টি খুঁজে পায় বা যতক্ষণ না এটি প্রোটোটাইপ চেইনের শেষ পর্যন্ত পৌঁছায়। এটিকে ক্লাসিকাল ইনহেরিটেন্স ও বলা যাই। কিন্তু এটি আসলেই [ইনহেরিটেন্স থেকে ডেলিগেশন বেশি](https://davidwalsh.name/javascript-objects)।
+
+#### প্রোটোটিপাল ইনহেরিটেন্স এর উদাহরণ
+
+```js
+function Parent() {
+  this.name = 'Parent';
+}
+
+Parent.prototype.greet = function () {
+  console.log('Hello from ' + this.name);
+};
+
+const child = Object.create(Parent.prototype);
+
+child.cry = function () {
+  console.log('waaaaaahhhh!');
+};
+
+child.cry();
+// waaaaaahhhh!
+
+child.greet();
+// hello from Parent
+
+child.constructor;
+// ƒ Parent() {
+//   this.name = 'Parent';
+// }
+
+child.constructor.name;
+// 'Parent'
+```
+
+উল্লেখ্য বিষয়গুলি হলো:
+
+- _child_- এ `.greet` ডিফাইন করা হয়নি, তাই js ইঞ্জিন প্রোটোটাইপ চেইনের উপরে যায় এবং _Parent_ থেকে ইনহেরিটেন্স এ পাওয়া `.greet` খুঁজে পায়।
+- প্রোটোটাইপ মেথডগুলো ইনহেরিট করে পাওয়ার জন্য আমাদের নিম্নলিখিত পদ্ধতির মধ্যে যেইকোনো একভাবে `Object.create` কল করতে হবে:
+- Object.create(Parent.prototype);
+- Object.create(new Parent(null));
+- Object.create(objLiteral);
+- বর্তমানে, `child.constructor` `Parent`-এর দিকে নির্দেশ করছে:
+
+আমরা যদি এটি সংশোধন করতে চাই তবে সেক্ষেত্রে:
+
+```js
+function Parent() {
+  this.name = 'Parent';
+}
+
+Parent.prototype.greet = function () {
+  console.log('Hello from ' + this.name);
+};
+
+function Child() {
+  Parent.call(this);
+  this.name = 'Child';
+}
+
+Child.prototype = Object.create(Parent.prototype);
+Child.prototype.constructor = Child;
+
+const child = new Child();
+
+child.greet();
+// hello from Child
+
+child.constructor.name;
+// 'Child'
+```
+
+###### রেফারেন্স
+
+- http://dmitrysoshnikov.com/ecmascript/javascript-the-core/
+- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
+- https://davidwalsh.name/javascript-objects
+- https://crockford.com/javascript/prototypal.html
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
+
+### আপনি AMD বনাম CommonJS সম্পর্কে কি মনে করেন?
+
+উভয়ই লাইব্রেরি হলো একটি মডিউল সিস্টেম, যা ES2015 আসা পর্যন্ত জাভাস্ক্রিপ্টে উপস্থিত ছিল না। CommonJS সিঙ্ক্রোনাস কিন্তু AMD (Asynchronous Module Definition) অ্যাসিঙ্ক্রোনাস। CommonJS সার্ভার-সাইড ডেভেলপমেন্টকে মাথায় রেখে ডিজাইন করা হয়েছে, অন্যদিকে AMD, অ্যাসিঙ্ক্রোনাস বৈশিষ্টের সাথে ব্রাউজারগুলির জন্য উদ্দেশ্যে করে তৈরি করা হয়েছে।
+
+আমি AMD সিনট্যাক্সকে বেশ ভার্বোস বলে মনে করি এবং CommonJS আপনি অন্যান্য প্রোগ্রামিং ল্যাঙ্গুয়েজে যেইভাবে import ব্যবহার করেন তার কাছাকাছি। বেশিরভাগ সময়, আমি AMD কে অপ্রয়োজনীয় বলে মনে করি, কারণ আপনি যদি আপনার সমস্ত জাভাস্ক্রিপ্ট একটি সংযুক্ত বান্ডেল ফাইলে পরিবেশন করেন তখন আপনি অ্যাসিঙ্ক লোডিং বৈশিষ্ট্যগুলি থেকে উপকৃত হবেন না। এছাড়াও, CommonJS সিনট্যাক্স প্রায় Node.js এ মডিউল লেখার মতন এবং ক্লায়েন্ট সাইড এবং সার্ভার সাইড জাভাস্ক্রিপ্ট ডেভেলপমেন্টের মধ্যে স্যুইচ করার সময় কম কনটেক্সট-সুইচিং ওভারহেড আছে।
+
+আমি খুশি ES2015 এর সাথে, যা সিঙ্ক্রোনাস এবং অ্যাসিঙ্ক্রোনাস লোডিং উভয়ের জন্য সাপোর্ট করে, তাই আমরা কেবল একটি পদ্ধতিত ফলো করতে পারি। যদিও এটি ব্রাউজারে এবং নোডে সম্পূর্ণরূপে চালু করা হয়নি, আমরা আমাদের কোড রূপান্তর করতে সর্বদা ট্রান্সপিলার ব্যবহার করতে পারি।
+
+###### রেফারেন্স
+
+- https://auth0.com/blog/javascript-module-systems-showdown/
+- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
+
+### ব্যাখ্যা করুন কেন নিম্নলিখিত কোডটি একটি IIFE হিসাবে কাজ করে না: `function foo(){ }();`। এটিকে সঠিকভাবে একটি IIFE করতে কী পরিবর্তন করতে হবে?
+
+IIFE এর ফুলফর্ম হলো Immediately Invoked Function Expressions। জাভাস্ক্রিপ্ট পার্সারটি `function foo(){ }();` এই কোডটি `function foo(){ }` এবং `();` হিসেবে পড়ে। যেখানে প্রথমটি একটি _function declaration_ এবং পরেরটি (এক জোড়া বন্ধনী) একটি একটি ফাংশন ইনভোকেশন বুঝাই কিন্তু কোন নাম নির্দিষ্ট করা নেই, তাই এটি `Uncaught SyntaxError: Unexpected token )` রিটার্ন করে।
+
+এটি ঠিক করার দুটি উপায় রয়েছে : `(function foo(){ })()` এবং `(function foo(){ }())` । যে স্টেটমেন্টগুলো `function` দিয়ে শুরু হয় সেগুলোকে _function declarations_ হিসেবে বিবেচনা করা হয়; এই ফাংশনটিকে `()` এর মধ্যে রাখা হলে, এটি একটি _ function expression_ হয়ে যায় যা পরবর্তী `()` এর সাথে কার্যকর করা যেতে পারে। এই ফাংশনগুলি গ্লোবাল স্কোপ এ প্রকাশ করা হয় না এবং আপনি যদি এটিকে বডি এর মধ্যে উল্লেখ করতে না চান তবে আপনি এটির নামও বাদ দিতে পারেন।
+
+আপনি `void` অপারেটরও ব্যবহার করতে পারেন: `void function foo(){ }();`। দুর্ভাগ্যবশত, এই ধরনের পদ্ধতির সাথে একটি সমস্যা আছে। প্রদত্ত এক্সপ্রেশন সর্বদা 'undefined' রিটার্ন করবে, তাই যদি আপনার IIFE ফাংশন কিছু রিটার্ন করে, আপনি এটি ব্যবহার করতে পারবেন না। যেমন:
+
+```js
+const foo = void (function bar() {
+  return 'foo';
+})();
+
+console.log(foo); // undefined
+```
+
+###### রেফারেন্স
+
+- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
+
+### `null`, `undefined` অথবা undeclared ভেরিয়েবলের মধ্যে পার্থক্য কী? আপনি কিভাবে ভেরিয়েবলের এই মানগুলো চেক করবেন?
+
+**Undeclared** ভেরিয়েবল তৈরি হয় যখন আপনি একটি ভ্যারিয়েবল এ একটি মান ডিক্লেয়ার করেন যা পূর্বে `var`, `let` বা `const` ব্যবহার করে তৈরি করা হয়নি। Undeclared ভেরিয়েবলগুলি গ্লোবালি ডিফাইন করা হবে, বর্তমান স্কোপ এর বাহিরে। strict mode, এ আপনি যখন একটি Undeclared ভ্যারিয়েবল এ এসাইন করবেন তখন একটি `ReferenceError` ছুড়ে দেওয়া হবে। Undeclared ভেরিয়েবলগুলি গ্লোবাল ভেরিয়েবলগুলির মতোই ক্ষতিকর। তাই তাদের এড়িয়ে চলুন! এদের পরীক্ষা করতে, `try`/`catch` ব্লক ব্যবহার করুন।
+
+```js
+function foo() {
+  x = 1; // Throws a ReferenceError in strict mode
+}
+
+foo();
+console.log(x); // 1
+```
+
+একটি `undefined` ভেরিয়েবল হলো এমন একটি ভেরিয়েবল যা ডিক্লেয়ার করা হয়েছে, কিন্তু কোনো মান নির্ধারণ করা হয়নি। যদি কোনো ফাংশন কল করার পরে কোনো মান রিটার্ন না করে এবং এটি যদি একটি ভ্যারিয়েবল এ রাখা হয়, তাহলে ভেরিয়েবলটিরও `undefined` মান থাকে। এটি পরীক্ষা করার জন্য, strict equality(`===`) অপারেটর বা `typeof` ব্যবহার করে তুলনা করুন যা `'undefined'` স্ট্রিং রিটার্ন করবে। মনে রাখবেন চেক করার জন্য abstract equality operator ব্যবহার করা উচিত নয়, কারণ মানটি যদি 'null' হয় তবে এটি 'true' ফেরত দেবে।
+
+```js
+var foo;
+console.log(foo); // undefined
+console.log(foo === undefined); // true
+console.log(typeof foo === 'undefined'); // true
+
+console.log(foo == null); // true. Wrong, don't use this to check!
+
+function bar() {}
+var baz = bar();
+console.log(baz); // undefined
+```
+
+যদি কোনো একটি ভেরিয়েবল `null` হয় তবে তা সুস্পষ্টভাবে `null` মানের সাথে বরাদ্দ করা হবে। এটি কোনো মান উপস্থাপন করে না এবং এটি 'undefined' থেকে আলাদা এ অর্থে যে এটিতে আলাদাভাবে মান বরাদ্দ করা হয়েছে৷ `null` চেক করতে, strict equality operator ব্যবহার করে তুলনা করুন। মনে রাখবেন যে উপরের মত, এটি চেক করার জন্য abstract equality operator (`==`) ব্যবহার করা উচিত নয়, কারণ মানটি যদি 'undefined' হয় তবে এটি 'true' ফেরত দেবে।
+
+```js
+var foo = null;
+console.log(foo === null); // true
+console.log(typeof foo === 'object'); // true
+
+console.log(foo == undefined); // true. Wrong, don't use this to check!
+```
+
+ব্যক্তিগত অভ্যাস হিসাবে, আমি কখনই আমার ভেরিয়েবলগুলি undeclared বা unassigned রাখিনা। আমি যদি ভ্যারিয়েবল টি এখন ব্যবহার না করি তাহলে আমি `null` এসাইন করে রাখি। আপনি যদি আপনার ওয়ার্কফ্লোতে একটি লিন্টার ব্যবহার করেন তবে এটি সাধারণত চেক করতে সক্ষম হবে যে আপনি undeclared ভেরিয়েবলগুলি উল্লেখ করছেন না।
+
+###### রেফারেন্স
+
+- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
+
+### closure কি, এবং কিভাবে/কেন আপনি একটি ব্যবহার করবেন?
+
+Closure হল একটি ফাংশন এবং ঐ ফাংশনটির লেক্সিক্যাল এনভায়রনমেন্ট এর সমন্বয় যার মধ্যে সেই ফাংশনটি ঘোষণা করা হয়েছিল। "lexical" শব্দটি দ্বারা বোঝায় লেক্সিক্যাল স্কোপিং অর্থ্যাৎ ভ্যারিয়েবল টি কোন এরিয়া পর্যন্ত এক্সেস করা যাই এবং এটি নির্ধারণ করা হয় সেই অবস্থানটি ব্যবহার করে যেখানে একটি ভেরিয়েবল সোর্স কোডের মধ্যে ঘোষণা করা হয়। Closure হলো ফাংশন যা বাইরের ফাংশন রিটার্ন করার পরেও বাইরের ফাংশনের ভেরিয়েবল-স্কোপ চেইন অ্যাক্সেস করতে পারে।
+
+**কেন আপনি একটি ব্যবহার করবেন?**
+
+- ডেটা গোপনীয়তা / ব্যক্তিগত পদ্ধতি অনুকরণ করা। সাধারণত ব্যবহৃত হয় [মডিউল প্যাটার্ন](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript)।
+- [পার্শিয়াল এপ্লিকেশন অথবা কার্রিং](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x).
+
+###### রেফারেন্স
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
+- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
+
+### আপনি কি একটি `.forEach` লুপ এবং `.map()` লুপের মধ্যে প্রধান পার্থক্য বর্ণনা করতে পারেন এবং কেন আপনি একটি বনাম অন্যটিকে বেছে নেবেন?
+
+উভয়ের মধ্যে পার্থক্য বোঝার জন্য, প্রতিটি ফাংশন কী করে তা দেখি।
+
+**`forEach`**
+
+- একটি অ্যারের উপাদানগুলির মধ্যে পুনরাবৃত্তি করে।
+- প্রতিটি উপাদানের জন্য একটি কলব্যাক কার্যকর করে।
+- এটি কোনো মান ফেরত দেয় না।
+
+```js
+const a = [1, 2, 3];
+const doubled = a.forEach((num, index) => {
+  // Do something with num and/or index.
+});
+
+// doubled = undefined
+```
+
+**`map`**
+
+- একটি অ্যারের উপাদানগুলির মধ্যে পুনরাবৃত্তি করে।
+- প্রতিটি উপাদানকে "Map" করে একটি নতুন উপাদানে পরিণত করে প্রতিটি উপাদানের ফাংশন কল করে, ফলে একটি নতুন অ্যারে তৈরি করে।
+
+```js
+const a = [1, 2, 3];
+const doubled = a.map((num) => {
+  return num * 2;
+});
+
+// doubled = [2, 4, 6]
+```
+
+`.forEach` এবং `.map()` এর মধ্যে প্রধান পার্থক্য হল `.map()` একটি নতুন অ্যারে প্রদান করে। আপনার যদি আসল অ্যারে পরিবর্তন করতে না চান, তাহলে `.map()` বেছে নিন। কিন্তু আপনি যদি কেবল একটি অ্যারের উপর পুনরাবৃত্তি করতে চান, তাহলে `forEach` বেছে নিন।
+
+###### রেফারেন্স
+
+- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
diff --git a/website/i18n/de/docusaurus-plugin-content-docs/current/html-questions.md b/website/i18n/de/docusaurus-plugin-content-docs/current/html-questions.md
new file mode 100644
index 0000000000..add1caa7dc
--- /dev/null
+++ b/website/i18n/de/docusaurus-plugin-content-docs/current/html-questions.md
@@ -0,0 +1,187 @@
+---
+title: Fragen zu HTML
+---
+
+Antworten auf [Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/html-questions.md). Pull requests for suggestions and corrections are welcome!
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+### Was tut ein doctype?
+
+**DOCTYPE** ist eine Abkürzung für **DOCument TYPE**. Jeder DOCTYPE ist immer mit einer **DTD** - verbunden, einer **Document Type Definition**.
+
+Eine DTD legt fest, wie ein Dokument eines bestimmten Typs strukturiert ist (d.h. ein `button` kann ein `span` enthalten, aber kein`div`), ein DOCTYPE hingegen erklärt, welche DTD ein Dokument _vermutlich_ akzeptiert (d.h. dieses Dokument akzeptiert eine HTML DTD).
+
+Webseiten benötigen die Ausweisung im jeweiligen DOCTYPE. User Agents erkennen so, welche Version der HTML-Spezifikationen das Dokument akzeptiert. Sobald ein User Agent ein korrektes DOCTYPE erkannt hat, löst es den **no-quirks mode** aus, das dem jeweiligen DOCTYPE entspricht. Wenn der User Agent kein korrektes DOCTYPE erkennt, löst er den **quirks mode** aus.
+
+<!-- DOCTYPE declaration = DOCTYPE Spezifikation? -->
+
+Die DOCTYPE Spezifikation für den HTML5 Standard ist `<!DOCTYPE html>`.
+
+###### Referenzen
+
+- https://html.spec.whatwg.org/multipage/syntax.html#the-doctype
+- https://html.spec.whatwg.org/multipage/xhtml.html
+- https://quirks.spec.whatwg.org/
+
+### Wie lieferst du eine Seite mit Inhalten in verschiedenen Sprachen aus?
+
+Ich gehe davon aus, dass es sich um den häufigsten Fall handelt: Wie kann eine Seite mit Inhalten bedient werden, die in mehreren Sprachen verfügbar ist. Dabei soll der Inhalt innerhalb der Seite nur in einer konsistenten Sprache angezeigt werden.
+
+Wenn ein Server eine HTTP-Anforderung erhält, sendet der anfordernde User Agent normalerweise Informationen über Sprachpräferenzen, die z.B. im `Accept-Language`-Header definiert sind. Der Server kann dann diese Informationen verwenden, um eine Version des Dokuments in der entsprechenden Sprache zurückzugeben, wenn eine solche Alternative verfügbar ist. Das zurückgegebene HTML-Dokument sollte auch das `lang`-Attribut im `<html>`-Tag deklarieren, wie z.B. `<html lang="en">...</html>`.
+
+<!-- Bitte prüfen -->
+
+Da es keinen Sinn ergibt, eine Suchmaschine wissen zu lassen, dass der gleiche Inhalt in verschiedenen Sprachen erhältlich ist, solltest du das `hreflang` Attribute im `<head>` setzen. D.h `<link rel="alternate" hreflang="de" href="http://de.example.com/page.html" />`
+
+Im Backend enthält das HTML-Markup `i18n'-Platzhalter und Inhalte für die jeweilige Sprache, die im YML- oder JSON-Format gespeichert sind. Der Server generiert dann dynamisch die HTML-Seite mit Inhalt in dieser speziellen Sprache, normalerweise mit Hilfe eines Backend-Frameworks.
+
+###### Referenzen
+
+- https://www.w3.org/International/getting-started/language
+- https://support.google.com/webmasters/answer/189077
+
+### Vor welchen Dingen solltest du dich hüten, wenn du mehrsprachige Websites designst oder entwickelst?
+
+- Setze im HTML das `lang` Attribut.
+- Erlauben Sie einem Benutzer, sein Land/seine Sprache einfach und problemlos zu ändern.
+- Text in rasterbasierten Bildern (z.B. png, gif, jpg, etc.) auszuliefern, ist kein skalierbarer Ansatz. Dabei ist das Platzieren von Texten in Bildern immer noch eine beliebte Methode, um gut aussehende, nicht systemgebundene Schriftarten auf jedem Computer anzuzeigen. In diesem Fall muss aber für jeder auszuliefernde Sprache ein eigenes mit der entsprechenden Textzeichenfolge erstellt werden. Alles, was über eine Handvoll solcher Ersetzungen hinausgeht, kann schnell außer Kontrolle geraten.
+- Restriktive Wort-/Satzlänge - Manche Inhalte können länger sein, wenn sie in einer anderen Sprache geschrieben sind. Sei vorsichtig bei Layout- oder Überlaufproblemen im Design. Besondere Aufemerksamkeit ist prominenten Elementen wie Überschriften, Beschriftungen und Schaltflächen zu widmen, das hier sich ändernde Zeilenlängen schnell Überläufe bilden können. Frei fließender Text wie Fließtext oder Kommentartext ist weniger problematisch.
+- Achte darauf, wie Farben wahrgenommen werden - Farben werden je nach Sprache und Kultur unterschiedlich wahrgenommen. Das Design sollte das berücksichtigen.
+- Formatierung von Daten und Währungen - Kalenderdaten werden unterschiedlich dargestellt. Z.B. "31. Mai 2012" in den USA vs. "31. Mai 2012" in Teilen Europas.
+
+- Verketten Sie keine übersetzten Zeichenketten - Machen Sie nichts wie `"Das heutige Datum ist " + date`. So ein Konstrukt funktioniert in einer Sprache mit einer anderen Wortstellung nicht. Verwende stattdessen Template-Strings mit sprachspezifischen Parameter-Substitution. Dazu ein Beispiel: `I will travel on {% date %}` sieht auf Chinesisch so aus: `{% date %} 我会出发`. Beachte, dass die Position der Variable Grammatikbedingt unterschiedlich ist.
+- Sprachleserichtung - Im Englischen lesen wir von links nach rechts, von oben nach unten, im traditionellen Japanisch wird der Text von oben nach unten, von rechts nach links gelesen.
+
+###### Referenzen
+
+- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
+
+### Wofür sind `data-` Attribute nützlich?
+
+Bevor JavaScript-Frameworks populär wurden, benutzten Front-End-Entwickler `data-` Attribute, um zusätzliche Daten innerhalb des DOM selbst zu speichern. Sie dienen zum Speichern benutzerdefinierter Daten, für die es keine passenderen Attribute oder Elemente gibt.
+
+Heute wird die Verwendung von `Daten-` Attributen nicht empfohlen. Zum Beispiel weil Benutzer das Datenattribut leicht modifizieren können, indem sie das inspect-Element im Browser verwenden. Das Datenmodell ist besser im JavaScript gespeichert und bleibt mit dem DOM durch Datenbindung, bspw. eine Library oder ein Framework, auf dem neuesten Stand.
+
+Das Hinzufügen eines Hooks für _end to end_ Testframeworks wie Selenium und Capybara ist ein Beispiel für die gültige Verwendung von Datenattributen. Denn so ist es nicht nötig, sinnlose Klassen oder ID-Attribute erstellen zu müssen. Da das Element einen Weg benötigt , um von einer bestimmten Selenium-Spezifikation gefunden zu werden, und etwas wie `data-selector='the-thing'` ist ein gültiger Weg.
+
+###### Referenzen
+
+- http://html5doctor.com/html5-custom-data-attributes/
+- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
+
+### Stelle dir HTML5 als eine offene Internetplattform vor. Was sind die Basiskomponenten von HTML5?
+
+- Semantik - Ermöglicht, Inhalte genauer zu beschreiben.
+- Konnektivität - Ermöglicht, auf (innovative) neue Weise mit dem Server zu kommunizieren.
+- Offline und Speicherung - Ermöglicht Webseiten, Daten auf der Client-Seite lokal zu speichern und offline effizienter zu arbeiten.
+- Multimedia - Video und Audio lassen sich besser im Open Web nutzen.
+- 2D/3D-Grafiken und -Effekte - Ermöglicht eine vielfältigere Palette von Präsentationsmöglichkeiten.
+- Leistung und Integration - Geschwindigkeitsoptimierung und bessere Nutzung der Computerhardware.
+- Gerätezugriff - Ermöglicht die Verwendung verschiedener Ein- und Ausgabegeräte.
+- Styling - Macht anspruchsvollere Themes möglich.
+
+###### Referenzen
+
+- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
+
+### Beschreibe die Unterschiede zwischen `Cookies`, `sessionStorage` und `localStorage`.
+
+Alle oben genannten Technologien sind Schlüsselspeichermechanismen auf der Client-Seite. Sie sind nur in der Lage, Werte als Strings zu speichern.
+
+|  | `cookie` | `localStorage` | `sessionStorage` |
+| --- | --- | --- | --- |
+| Initiator | Client bzw. Server. Server nutzt `Set-Cookie` Header | Client | Client |
+| Ablauf | Manuell gesetzt | Für immer | Wenn Tab geschlossen |
+| Persistenz über Browser-Sessions | Hängt davon ab, welcher Ablauf gesetzt ist | Ja | Nein |
+| Wird mit jeder HTTP-Anfrage an den Server gesendet | Cookies werden automatisch über den `Cookie`-Header gesendet | Nein | Nein |
+| Kapazität (pro Domain) | 4kb | 5MB | 5MB |
+| Zugänglichkeit | Jedes Fenster | Jedes Fenster | Selbes Tab |
+
+_Hinweis: Löscht der Nutzer seine Browser-Daten s zu löschen, löscht dies auch jeden gespeicherten `Cookie`, `LocalStorage` oder `SessionStorage`. Es ist wichtig, dies beim Design für lokale Persistenz zu bedenken. Eventuell sollte eine serverseitige Speicherung in einer Datenbank in Erwägung gezogen werden._
+
+###### Referenzen
+
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
+- http://tutorial.techaltum.com/local-and-session-storage.html
+
+### Beschreibe die Unterschiedie zwischen `<script>`, `<script async>` und `<script defer>`.
+
+- `<script>` - Das HTML-Parsing wird blockiert, das Skript wird geholt (gefetcht) und sofort ausgeführt, das HTML-Parsing wird nach Ausführung des Scripts fortgesetzt.
+- `<script async>` - Das Skript wird parallel zum HTML-Parsing geholt (gefetcht) und ausgeführt, sobald es verfügbar ist (möglicherweise bevor das HTML-Parsing abgeschlossen ist). Verwende `async`, wenn das Skript unabhängig von anderen Skripten auf der Seite ist, z.B. bei Analysen. (im Original "Analytics")
+- `<script defer>` - Das Skript wird parallel zum HTML-Parsing geholt (gefetcht) aber erst dann ausgeführt, wenn das Parsen der Seite beendet ist. Sind mehrere Scripts vorhanden, werden sie in der Reihenfolge ausgeführt, in der sie im Dokument angetroffen wurden. Wenn sich ein Script auf ein vollständig geparstes DOM stützt, ist das `defer`-Attribut nützlich, um sicherzustellen, dass das HTML vor der Ausführung vollständig geparst wird. Es macht keinen großen Unterschied, ein normales `<script>` an das Ende von `<body>` zu setzen. Ein verzögertes Skript darf kein `document.write` enthalten.
+
+Hinweis: Die Attribute `async` und `defer` werden für Skripte ignoriert, die kein `src'-Attribut haben.
+
+###### Referenzen
+
+- http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
+- https://stackoverflow.com/questions/10808109/script-tag-async-defer
+- https://bitsofco.de/async-vs-defer/
+
+### Warum ist es eine gute Idee, die `<link>`s zum CSS-Stylesheet inneralb der `<head></head>` Tags zu platzieren und die JS `<script>`s direkt vorm `</body>` einzubinden? Würdest du Ausnahmen machen?
+
+**Platzieren von `<link>`s im `<head>`**
+
+Eine optimierten Website setzt voraus, dass das `<link>` Attribut im `<head>` platziert ist. Wird eine Seite erstmalig geladen, werden HTML und CSS gleichzeitig geparst; HTML erzeugt das DOM (Document Object Model) und CSS erzeugt das CSSOM (CSS Object Model). Beide sind für die Erstellung einer Website erforderlich. Je schneller geparsed wird, desto besser, denn "first meaningful paint" ist ein wichtiger Performance-Indikator. Die Platzierung von Stylesheets am unteren Rand des Dokuments würde das progressessive Rendering in vielen Browsern verhindern. Einige Browser blockieren das Rendering, um zu vermeiden, dass Elemente der Seite neu gezeichnet werden müssen, wenn sich ihre Stile ändern. Der Benutzer bleibt dann bei der Anzeige einer leeren weißen Seite hängen. Zu anderen Zeiten kann es Flashs mit unstyled content (FOUC) geben, die eine Webseite ohne angewandtes Styling zeigen.
+
+**Platzieren von `<script>`s direkt vor `</body>`**
+
+`<script>` Tags blockieren das Parsen von HTML, während sie heruntergeladen und ausgeführt werden. Das kann die Seite verlangsamen. Durch die Platzierung der Skripte am unteren Rand wird das HTML zuerst geparsed und dem Benutzer angezeigt.
+
+Es gibt eine Ausnahme für die Positionierung von `<script>`s am unteren Rand: Dein Script enthält `document.write()`. Das ist aber heutzutage eine schlechte Praxis. Außerdem bedeutet die Platzierung von `<script>`s am unteren Rand, dass der Browser erst dann mit dem Herunterladen der Skripte beginnen kann, wenn das gesamte Dokument geparst wurde. Dies stellt sicher, dass Code, der DOM-Elemente manipulieren muss, das gesamte Skript nicht verwirft, Fehler macht und anhält. Muss `<script>` in's `<head>` gesetzt werden, sollte man das`defer`-Attribut nutzen, das den gleichen Effekt erzielt wie das Herunterladen und Ausführen des Skripts nach dem Parsen des HTML-Dokuments.
+
+Denke daran, dass das Einfügen von Scripten vor dem schließenden `</body>`-Tag die Illusion erzeugt, dass die Seite in einem leeren Cache schneller geladen wird (da die Scripte den Download des restlichen Dokuments nicht blockieren). Der Code wird erst dann ausgeführt, wenn die gesamte Seite geladen ist. Sind diese Scripte in das `<head>`-Tag gesetzt, beginnen sie vorher mit der Ausführung - auf einem vorbereiteten Cache würde die Seite also tatsächlich schneller geladen werden.
+
+#### References
+
+- https://developer.yahoo.com/performance/rules.html#css_top
+- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
+- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
+
+### Was ist progressives Rendern?
+
+"Progressive rendering" (progressive Wiedergabe) bezeichnet Techniken zur Verbesserung der Leistung einer Webseite (insbesondere zur Verbesserung der wahrgenommenen Ladezeit), da Inhalte so schnell wie möglich dargestellt werden können.
+
+Vor der Einführung des Breitband-Internets war es viel weiter verbreitet, aber es wird in der modernen Web-Entwicklung immer noch verwendet, da mobile Datenverbindungen immer populärer (und unzuverlässiger) werden!
+
+Beispiele für diese Technologie:
+
+- Langsames Laden von Bildern (Lazy loading of images) - Bilder werden nicht alle auf einmal geladen. JavaScript lädtt Bilder erst, wenn der Benutzer in den Teil der Seite scrollt, der das Bild anzeigt.
+- Priorisierung von sichtbarem Inhalt (oder Rendering über dem Falz "above-the-fold rendering" ) - Berücksichtige nur das für das erste Erscheinen der Seite nötige Minimum an CSS/Inhalten/Scripten. Durch verzögerte Scripte bzw. durch `DOMContentLoaded`/`load` können andere Ressourcen nachgeladen werden.
+- Asynchrone HTML-Fragmente - Flushen von Teilen des HTML in den Browser, während die Seite im Backend aufgebaut wird.Mehr Details findest du [hier](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
+
+###### Referenzen
+
+- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
+- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
+
+### Warum würdest du ein `srcset` Attribute in ein image tag einsetzen? Erkläre wie der Browser bei der Auswertung des Inhalts dieses Attributs vorgeht.
+
+Das`srcset`-Attribut wird verwendet, um Benutzern abhängig von der Anzeigebreite ihrer Geräte unterschiedliche Bilder zur Verfügung zu stellen. Die Bereitstellung von Bildern höherer Qualität für Geräte mit Retina-Display verbessert das Nutzererlebnis, während die Bereitstellung von Bildern niedrigerer Auflösung für Geräte des unteren Marktsegments die Leistung erhöht und das Datenvolumen verringert (da die Bereitstellung eines größeren Bildes keinen sichtbaren Unterschied aufweist). Zum Beispiel: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` weist den Browser an, die kleine, mittlere oder große `.jpg` Grafik abhängig von der Auflösung des Kunden anzuzeigen. Der erste Wert ist der Bildname und der zweite ist die Breite des Bildes in Pixeln. Für eine Gerätebreite von 320px werden die folgenden Berechnungen durchgeführt:
+
+- 500 / 320 = 1.5625
+- 1000 / 320 = 3.125
+- 2000 / 320 = 6.25
+
+Wenn die Auflösung des Clients 1x ist, ist 1.5625 die nächstliegende Auflösung. Damit entspricht `500w` `small.jpg` und wird vom Browser ausgewählt.
+
+Handelt es sich um ein Retina-Display (Auflösung: 2x), verwendet der Browser die nächstliegende Auflösung, die über dem Minimum liegt. Das heißt, er wird nicht die 500w (1,5625) wählen, nur weil sie größer als 1. Der Browser würde stattdessen das Bild mit einem resultierenden Verhältnis wählen, das näher an 2 liegt, d.h. 1000w (3,125). (Dessen Qualität der einer Retina-Auflösung entspricht)
+
+Durch `srcset`s lassen sich Bilddateien Geräte- und Auflösungsspezifisch ausliefern: Kleine Bilder an Geräte mit schmalem Bildschirm, große, an Geräte mit großen Monitoren - und optional auch, Bilder unterschiedlicher Auflösung je nach Pixeldichte.
+
+###### Referenzen
+
+- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
+- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
+
+### Hast du Erfahrungen mit unterschiedlichen HTML templating languages gemacht?
+
+Ja, Pug (früher Jade), ERB, Slim, Handlebars, Jinja, Liquid und EJS, um nur einige zu nennen. Meiner Meinung nach sind sie mehr oder weniger gleich und bieten eine ähnliche Funktionalität: Inhalte zu "escapen" und die anzuzeigenden Daten zu Filter um beispielsweise ihre Darstellung zu manipulieren. Die meisten Template-Engines erlauben es, eigene Filter einzufügen, falls eine benutzerdefinierte Verarbeitung benötigt wird.
+
+### Andere Antworten
+
+- https://neal.codes/blog/front-end-interview-questions-html/
+- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
diff --git a/website/i18n/es/docusaurus-plugin-content-docs/current/html-questions.md b/website/i18n/es/docusaurus-plugin-content-docs/current/html-questions.md
new file mode 100644
index 0000000000..31e644eaae
--- /dev/null
+++ b/website/i18n/es/docusaurus-plugin-content-docs/current/html-questions.md
@@ -0,0 +1,177 @@
+---
+title: Preguntas de HTML
+---
+
+Respuestas a [Preguntas de trabajo para entrevistas Front-end - Preguntas de HTML](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/html-questions.md). Solicitudes de inserción para sugerencias y correcciones son bienvenidas!
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+### ¿Qué hace un doctype?
+
+**DOCTYPE** es una abreviación para **DOCument TYPE**. Un DOCTYPE es siempre asociado a **DTD** - que significa **Definición de tipo de documento, por sus siglas en inglés**.
+
+Un DTD define cómo se deben estructurar los documentos de cierto tipo (por ejemplo, un `button` puede contener un `span` pero no un `div`), mientras un DOCTYPE declara qué DTD un documento _supuestamente_ respeta (por ejemplo, este documento respeta el DTD de HTML).
+
+Para páginas web, se requiere la declaración DOCTYPE. Se utiliza para indicar a los agentes de usuario qué versión de las especificaciones HTML respeta el documento. Una vez que un agente de usuario ha reconocido un DOCTYPE correcto, activará el **modo sin peculiaridades** haciendo coincidir este DOCTYPE para leer el documento. Si un agente de usuario no reconoce un DOCTYPE correcto, activará el **modo con peculiaridades**.
+
+La declaración DOCTYPE para los estándares HTML5 es `<!DOCTYPE html>`.
+
+###### Referencias
+
+- https://html.spec.whatwg.org/multipage/syntax.html#the-doctype
+- https://html.spec.whatwg.org/multipage/xhtml.html
+- https://quirks.spec.whatwg.org/
+
+### ¿Cómo desplegar una página con contenido en varios idiomas?
+
+La pregunta es un poco vaga, supondré que se trata del caso más común, que es cómo desplegar una página con contenido disponible en varios idiomas, pero el contenido dentro de la página debe mostrarse solo en un idioma coherente.
+
+Cuando se realiza una solicitud HTTP a un servidor, el agente de usuario solicitante generalmente envía información sobre las preferencias de idioma, como en el encabezado `Accept-Language`. El servidor puede usar esta información para devolver una versión del documento en el idioma apropiado si dicha alternativa está disponible. El documento HTML devuelto también debe declarar el atributo `lang` en la etiqueta`<html>`, como`<html lang="en">...</html>`.
+
+En el back-end, el HTML contendrá marcadores de posición `i18n` y contenido para el idioma específico almacenado en formatos YML o JSON. El servidor genera dinámicamente la página HTML con contenido en ese idioma en particular, generalmente con la ayuda de un framework back-end.
+
+###### Referencias
+
+- https://www.w3.org/International/getting-started/language
+
+### ¿Qué debes tener en cuenta al diseñar o desarrollar sitios en múltiples lenguajes?
+
+- Usar el atributo `lang` en tu HTML.
+- Dirigir a los usuarios a su idioma nativo: permitir que un usuario cambie su país/idioma fácilmente sin problemas.
+- El texto en imágenes basadas en ráster (por ejemplo, png, gif, jpg, etc.) no es escalable: colocar texto en una imagen sigue siendo una forma popular de obtener fuentes atractivas que no sean del sistema para mostrarlas en cualquier computadora. Sin embargo, para traducir el texto de la imagen, cada cadena de texto deberá tener una imagen separada creada para cada idioma. Cualquier cosa más que un puñado de reemplazos como este puede salirse rápidamente de control.
+- Palabras restrictivas/longitud de la oración: algunos contenidos pueden ser más largos cuando se escriben en otro idioma. Se debe tener cuidado con los problemas de diseño o desbordamiento en el diseño. Es mejor evitar diseñar donde la cantidad de texto crearía o rompería el diseño. El conteo de caracteres entra en juego con cosas como titulares, etiquetas y botones. Son un problema menor con el texto de flujo libre, como el texto del cuerpo o los comentarios.
+- Tener en cuenta cómo se perciben los colores: los colores se perciben de manera diferente en todos los idiomas y culturas. El diseño debe usar color adecuadamente.
+- Formato de fechas y monedas: las fechas del calendario a veces se presentan de diferentes maneras. Por ejemplo. "Mayo 31, 2012" en los Estados Unidos versus "31 de mayo de 2012" en partes de Europa.
+- No concatenar cadenas traducidas. No se deben hacer cosas como `"La fecha de hoy es " + fecha`. Se dividirá en idiomas con un orden de palabras diferente. Utilizar una cadena de plantilla con sustitución de parámetros para cada idioma en su lugar. Por ejemplo, mira las siguientes dos oraciones en español y chino respectivamente: `Viajaré el {%date%}` y `{%date%} 我会出发`. Tener en cuenta que la posición de la variable es diferente debido a las reglas gramaticales del lenguaje.
+- Dirección de lectura del idioma: en español, leemos de izquierda a derecha, de arriba a abajo, en japonés tradicional, el texto se lee de arriba a abajo, de derecha a izquierda.
+
+###### Referencias
+
+- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
+
+### ¿Para qué sirve el atributo `data-`?
+
+Antes de que los frameworks de JavaScript se hicieran populares, los desarrolladores front-end usaban atributos `data-` para almacenar datos adicionales dentro del DOM, sin otros hacks como atributos no estándar, propiedades adicionales en el DOM. Está destinado a almacenar datos personalizados privados para la página o aplicación, para los cuales no hay más atributos o elementos apropiados.
+
+Hoy en día, generalmente no se recomienda el uso de los atributos `data-`. Una razón es que los usuarios pueden modificar el atributo de datos fácilmente mediante el uso de inspección de elementos en el navegador. El modelo de datos se almacena mejor dentro de JavaScript y se mantiene actualizado con el DOM a través del enlace de datos posiblemente a través de una biblioteca o un marco.
+
+Sin embargo, un uso perfectamente válido de los atributos de datos es agregar un gancho para frameworks de testeo como Selenium y Capybara, sin tener que crear clases sin sentido o atributos ID. El elemento necesita una forma de ser encontrado por una especificación de Selenium particular y algo como `data-selector='la-cosa`' es una forma válida de hacerlo sin complicar el marcado semántico.
+
+###### Referencias
+
+- http://html5doctor.com/html5-custom-data-attributes/
+- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
+
+### ¿Consideras HTML5 como una plataforma web abierta. Cuáles son los componentes básicos de HTML5?
+
+- Semántica: Permite describir con mayor precisión cuál es tu contenido.
+- Conectividad: Permite comunicarse con el servidor de forma nueva e innovadora.
+- Offline y almacenamiento: Permite que las páginas web almacenen datos por el lado del cliente localmente y operen offline de manera más eficiente.
+- Multimedia: Hace ciudadanos de primera clase en la Web abierta a videos y audio.
+- Gráficos y efectos 2D/3D: Permite una gama mucho más diversa de opciones de presentación.
+- Rendimiento e integración: Proporciona una mayor optimización de la velocidad y un mejor uso del hardware de la computadora.
+- Acceso a dispositivos: Permite el uso de varios dispositivos de entrada y salida.
+- Estilo: Permite que los autores escriban temas más sofisticados.
+
+###### Referencias
+
+- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
+
+### Describe las diferenias entre `cookie`, `sessionStorage` y `localStorage`.
+
+Las tecnologías mencionadas anteriormente son mecanismos de almacenamiento de llave-valor en el lado del cliente. Solo pueden almacenar valores como cadenas.
+
+|  | `cookie` | `localStorage` | `sessionStorage` |
+| --- | --- | --- | --- |
+| Iniciador | Cliente o servidor. El servidor puede utilizar el encabezado `Set-Cookie` | Cliente | Cliente |
+| Expiración | Se establece manualmente | Para siempre | Al cerrar la ventana |
+| Persistente en sesiones del navegador | Depende de si se establece la caducidad | Si | No |
+| Enviado al servidor con cada solicitud HTTP | Las cookies se envían automáticamente a través del encabezado `Cookie` | No | No |
+| Capacidad (por dominio) | 4kb | 5MB | 5MB |
+| Accesibilidad | Cualquier ventana | Cualquier ventana | Misma ventana |
+
+_Nota: Si el usuario decide borrar los datos de navegación a través de cualquier mecanismo proporcionado por el navegador, esto borrará cualquier `cookie`,` localStorage` o `sessionStorage` almacenada. Es importante tener esto en cuenta al diseñar la persistencia local, especialmente cuando se compara con alternativas como el almacenamiento del lado del servidor en una base de datos o similar (que por supuesto persistirá a pesar de las acciones del usuario) ._
+
+###### Referencias
+
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
+- http://tutorial.techaltum.com/local-and-session-storage.html
+
+### Describe las diferencias entre `<script>`, `<script async>` y `<script defer>`.
+
+- `<script>` - El análisis del HTML es bloqueado, el script es extraído y ejecutado inmediatamente, el análisis del HTML se reanuda luego de ejecutado el script.
+- `<script async>` - El script será extraído en paralelo con el análisis del HTML y ejecutado tan pronto esté disponible (potencialmente antes de que el análisis HTML termine). Usa `async` cuando el script sea independiente de cualquier otro script en la página, por ejemplo, scripts de analítica.
+- `<script defer>` - El script será extraído en paralelo al análisis del HTML y ejecutado una vez la página haya terminado de ser analizada. Si hay varios scripts, cada script diferido es ejecutado en el orden en el que se encuentran en el documento. Si un script está basado en un análisis completo del DOM, el atributo `defer` será útil en asegurarse que el análisis del HTML haya terminado antes de ser ejecutado el script. No hay mucha diferencia con poner un `<script>` normal al final del `<body>`. Un script diferido no debe contener `document.write`.
+
+Nota: Los atributos `async` y `defer` son ignorados por scripts que no tienen el atributo `src`.
+
+###### Referencias
+
+- http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
+- https://stackoverflow.com/questions/10808109/script-tag-async-defer
+- https://bitsofco.de/async-vs-defer/
+
+### ¿Por qué generalmente es buena idea colocar los `<link>` de CSS entre `<head></head>` y `<script>` de JS justo antes del `</body>`? ¿Conoces alguna excepción?
+
+**Colocar los `<link>` en el `<head>`**
+
+Colocar los `<link>` dentro de `<head></head>` es parte de la especificación adecuada en la construcción de un sitio web optimizado. Cuando una página se carga por primera vez, el HTML y el CSS se analizan simultáneamente; el HTML crea el DOM (Modelo de objetos de documento) y el CSS crea el CSSOM (Modelo de objetos de CSS). Ambos son necesarios para crear los elementos visuales en un sitio web, lo que permite una sincronización rápida de la "primera pintura significativa". Esta representación progresiva es una categoría de optimización de sitios que se miden en puntajes de rendimiento. Poner hojas de estilo cerca de la parte inferior del documento prohíbe la representación progresiva en muchos navegadores. Algunos navegadores bloquean la representación para evitar tener que volver a pintar elementos de la página si cambian sus estilos. El usuario queda atrapado viendo una página en blanco. Otras veces puede haber flashes de contenido sin estilo (FOUC), que puede mostrar una página web sin aplicar estilo.
+
+**Colocar los `<script>` justo antes del `</body>`**
+
+Los `<script>` bloquean el análisis del HTML mientras son descargados y ejecutados. Colocar los scripts en la parte inferior permitirá que el HTML se analice y se muestre primero al usuario.
+
+Una excepción para el posicionamiento de los `<script>` en la parte inferior es cuando el script contiene `document.write()`, pero hoy en día no es una buena práctica usar `document.write()`. Además, colocar `<script>` en la parte inferior significa que el navegador no puede comenzar a descargar los scripts hasta que se analice todo el documento. Esto garantiza que el código que necesita manipular elementos del DOM no arrojará errores y detendrá todo el script. Si necesitas poner algún `<script>` dentro del `<head>` por algún motivo, se debe utilizar el atributo `defer`, que logrará el mismo efecto de descarga diferido y ejecutará el script solo después de analizado el HTML.
+
+###### Referencias
+
+- https://developer.yahoo.com/performance/rules.html#css_top
+- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
+- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
+
+### ¿Qué es el renderizado progresivo?
+
+Renderizado progresivo es el nombre dado a las técnicas utilizadas para mejorar el rendimiento de una página web (en particular, mejorar el tiempo de carga percibido) para representar el contenido y su visualización lo más rápido posible.
+
+Solía ser mucho más frecuente en los días previos a Internet de banda ancha, pero aun es usado en el desarrollo moderno, ya que las conexiones de datos móviles se están volviendo cada vez más populares (y poco confiables).
+
+Ejemplos:
+
+- Carga perezosa de imágenes: las imágenes de la página no se cargan todas a la vez. JavaScript es usado para cargar una imagen a medida que el usuario se desplaza hacia la parte de la página que la muestra.
+- Priorizar el contenido visible (o la representación por encima del pliegue): incluir el mínimo CSS/contenido/scripts necesarios para que la página que se representará en el navegador de los usuarios se muestre primero lo más rápido posible, luego puede usar scripts diferidos o escuchar el evento `DOMContentLoaded`/`load` para cargar otros recursos y contenido.
+- Fragmentos HTML asíncronos - Enviar partes del HTML al navegador a medida que la página se construye en el back-end. Se pueden encontrar más detalles sobre esta técnica [aquí](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
+
+###### Referencias
+
+- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
+- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
+
+### ¿Por qué usaría el atributo `srcset` en una etiqueta de imagen? Explica el proceso que usa el navegador al evaluar el contenido de este atributo.
+
+El atributo `srcset` debiese ser usado cuando se desee mostrar diferentes imágenes a los usuarios en función del ancho de visualización de su dispositivo; mostrar imágenes de mayor calidad a los dispositivos con pantalla retina mejora la experiencia del usuario, mientras que mostrar imágenes de menor resolución a dispositivos de gama baja aumenta el rendimiento y disminuir el desperdicio de datos (porque mostrar una imagen más grande no tendrá ninguna diferencia visible). Por ejemplo: `<img srcset="pequeño.jpg 500w, mediano.jpg 1000w, grande.jpg 2000w "src="..." alt="">` le dice al navegador que muestre el gráfico `.jpg` pequeño, mediano o grande dependiendo de la resolución del cliente. El primer valor es el nombre de la imagen y el segundo es el ancho de la imagen en píxeles. Para un ancho de dispositivo de 320px, se realizan los siguientes cálculos:
+
+- 500 / 320 = 1.5625
+- 1000 / 320 = 3.125
+- 2000 / 320 = 6.25
+
+Si la resolución del cliente es 1x, 1.5625 es la más cercana, y el navegador seleccionará `500w` correspondiente a `pequeño.jpg`.
+
+Si la resolución es retina (2x), el navegador usará la resolución más cercana por encima del mínimo. Lo que significa que no elegirá 500w (1.5625) porque es mayor que 1 y la imagen puede verse mal. El navegador elegiría la imagen con una relación resultante más cercana a 2, que es 1000w (3.125).
+
+`srcset` resuelve el problema de mostrar archivos de imagen más pequeños a dispositivos de pantalla estrecha, ya que no necesitan imágenes de gran tamaño como las pantallas de escritorio, y también opcionalmente mostrar imágenes de resolución diferente a pantallas de alta/baja densidad.
+
+###### Referencias
+
+- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
+- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
+
+### ¿Has utilizado otros lenguajes de plantillas HTML anteriormente?
+
+Sí, Pug (anteriormente Jade), ERB, Slim, Handlebars, Jinja, Liquid, por nombrar algunos. En mi opinión, son más o menos lo mismo y proporcionan una funcionalidad similar de escape de contenido y filtros útiles para manipular los datos que se mostrarán. La mayoría de los motores de plantillas también permiten inyectar tus propios filtros en caso de que se necesite un procesamiento personalizado antes de mostrarlos.
+
+### Otras Respuestas
+
+- https://neal.codes/blog/front-end-interview-questions-html/
+- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
diff --git a/website/i18n/es/docusaurus-plugin-content-docs/current/javascript-questions.md b/website/i18n/es/docusaurus-plugin-content-docs/current/javascript-questions.md
new file mode 100644
index 0000000000..6c6ef123e8
--- /dev/null
+++ b/website/i18n/es/docusaurus-plugin-content-docs/current/javascript-questions.md
@@ -0,0 +1,177 @@
+---
+title: Preguntas de JavaScript
+---
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+### Explique la delegación de eventos
+
+La delegación de eventos es una técnica en la cual los escuchas de eventos se setean en el elemento padre en vez de en los elementos hijos. La función de escucha se ejecutara cuando el evento se dispare en los elementos descendientes gracias a la propagación de eventos del DOM. Los beneficios de esta técnica son:
+
+- El uso de memoria se reduce dado que solo se requiere un unico escucha de eventos en el elemento parent, en vez de crear un escucha en cada descendiente.
+- No es necesario quitar el escucha de los elementos que se eliminan y tampoco es necesario agregarlo cuando se crean nuevos elementos.
+
+##### Referecias
+
+- https://medium.com/@osmancea/delegaci%C3%B3n-de-eventos-del-dom-con-javascript-d28131d43686
+
+### Explique como funciona this
+
+Una explicación simple es que en Javascript `this` depende de como se llama la función. Para entender mejor como funciona se deben seguir las siguientes reglas:
+
+1. Si se utiliza la palabra clave `new` cuando se llama a la funcion, dentro de la función `this` será un nuevo objeto vacio.
+2. Si se utiliza `apply`, `call`, o `bind` cuando se llama o crea la función, dentro de la función `this` será el objeto que se pase como argumento.
+3. Si la función se llama de la forma `obj.method()`. `this` será el objeto que tiene la función como propiedad.
+4. Si la función se invoca de forma regular, `this` será el objeto `global`. Dentro de un navegador, este objeto es el objeto `window`. Si se utiliza el modo estricto (`strict mode`), `this` sera `undefined` en lugar del objeto global.
+5. Si se aplican multiples reglas, la regla con más prioridad prevalecera.
+6. Si la función tiene la sintaxis de ES2015 de funcion flecha, se ignoran todas las reglas anteriores y `this` tendra el valor que tenga el contexto donde donde se crea la función.
+
+Para una explicación más detallada, lee [este articulo](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3) (en inglés).
+
+### Explique como funciona la herencia de prototipos
+
+Esta es una pregunta muy común en las entrevistas de Javascript. Todos lo objetos de Javascript tienen una propiedad `__proto__` que referencia a otro objetos, el cual se llama el prototipo del objeto. Cuando se accede a una propiedad de un objeto, se busca si el objeto tiene esa propiedad, si no la tiene, el engine de Javascript buscara en el objeto referenciado por `__proto__` y si este no tuviese la propiedad, seguira buscando por la cadena de prototipos hasta encontrar la propiedad o hasta llegar al final de la cadena de prototipo. Esto simula la herencia clasica de objetos, pero es más bien una [ delegación que herencia](https://davidwalsh.name/javascript-objects).
+
+#### Ejemplo de herencia de prototipos
+
+```js
+if (typeof Object.create !== 'function') {
+  Object.create = function (parent) {
+    function Tmp() {}
+    Tmp.prototype = parent;
+    return new Tmp();
+  };
+}
+
+const Padre = function () {
+  this.name = 'Padre';
+};
+
+Padre.prototype.saludar = function () {
+  console.log('Hola desde el Padre');
+};
+
+const hijo = Object.create(Padre.prototype);
+
+hijo.llorar = function () {
+  console.log('waaaaaahhhh!');
+};
+
+hijo.llorar();
+// Salida: waaaaaahhhh!
+
+hijo.saludar();
+// Salida: Hola desde el Padre
+```
+
+Algo para destacar:
+
+- `.saludar` no esta definido en el objeto _hijo_, por eso el engine busca por la cadena de prototipo hasta encontrar `.saludar` que esta definido en el _Padre_.
+- Es necesario llamar a `Object.create` de la siguiente manera para que se produzca la herencia:
+  - Object.create(Padre.prototype);
+  - Object.create(new Padre(null));
+  - Object.create(objLiteral);
+  - `child.constructor` apunta al `Padre`:
+
+```js
+hijo.constructor
+ƒ () {
+  this.nombre = "Padre";
+}
+hijo.constructor.nombre
+"Parent"
+```
+
+- If we'd like to correct this, one option would be to do:
+
+```js
+function Hijo() {
+  Padre.call(this);
+  this.name = 'hijo';
+}
+
+Hijo.prototype = Padre.prototype;
+Hijo.prototype.constructor = Hijo;
+
+const c = new Hijo();
+
+c.llorar();
+// Salida: waaaaaahhhh!
+
+c.saludar();
+// Salida: Hola desde el padre
+
+c.constructor.name;
+// Salida: "Hijo"
+```
+
+###### Referencias
+
+- http://dmitrysoshnikov.com/ecmascript/javascript-the-core/
+- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
+- https://davidwalsh.name/javascript-objects
+- https://crockford.com/javascript/prototypal.html
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
+
+### Explique la diferencia cuando una variable es: `null`, `undefined` o `undeclared`. Como chequearia cada uno de estos estados?
+
+Una variable no declarada (`undeclared`) se crea cuando se asigna un valor a un identificador que no ha sido creado previamente usando `var`, `let` o `const`. Las variables no declaradas se crearan de forma `global` fuera del contexto actual. En el modo escrito, se creara un `ReferenceError` cuando se intente asignar un valor a una variable no declarada. Las variables no declaradas son una mala páctica, de la misma forma que las variables globales son una mala práctica.
+
+```js
+function foo() {
+  x = 1; // Throws a ReferenceError in strict mode
+}
+
+foo();
+console.log(x); // 1
+```
+
+Una variable que es `undefined` es una variable que ha sido declarada, pero no se le ha asignado un valor. Esta variable es de tipo `undefined`. Si una función no devuelve un valor especifico, se devolvera por defecto `undefined`.
+
+Para chequear si una variable es `undefined`, se utiliza el operador de igualdad estricta(`===`) o el operador `typeof` que devolvera la cadena `'undefined'`. Es importante recalcar que no se utiliza el operador de igualdad abstracta (`==`) ya que este devolverá `true` si el valor es `null`.
+
+```js
+var foo;
+console.log(foo); // undefined
+console.log(foo === undefined); // true
+console.log(typeof foo === 'undefined'); // true
+
+console.log(foo == null); // true. Mal, no utilice esto para chequear!
+
+function bar() {}
+var baz = bar();
+console.log(baz); // undefined
+```
+
+Una variable que es `null` tendra asignado explicitamente el valor `null` a diferencia de `undefined` que no se ha asignado ningun valor especifico. Para chequear si una variable es `null` se utiliza el operador de igualdad estricta ( `===`). Es importante recalcar, de la misma forma que anteriormente, no se debe utilizar el operador de igualdad (`==`) que devolverá `true` si el valor es `undefined`.
+
+```js
+var foo = null;
+console.log(foo === null); // true
+console.log(typeof foo === 'object'); // true
+
+console.log(foo == undefined); // true. Wrong, don't use this to check!
+```
+
+Como recomendación personal, nunca dejar las variables no declaradas o no asignadas, sino que es conveniente asignarle explicitamente el valor `null` al momento de declarar la variable si no tiene un valor especifico aún. Si se utiliza algún tipo de linter, se pueden crear reglas para verificar que no se haga referencia a variables no declaradas.
+
+###### Referencias
+
+- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
+
+### Que es una closure, y como/porque se utilizaria?
+
+Una **closure** es la combinación de una función con el entorno lexico en el cual se declara dicha función. La palabra `lexico` hace referencia al hecho de que el contexto lexico referencia donde se declara una variable dentro del código para determinar que parte del código puede acceder a dicha variable. Una closure es una función que tiene acceso a las variables declaradas en el contexto externo aún cuando la función externa ya haya finalizado su ejecución.
+
+**Porque utilizaría una?**
+
+- Emular metodos privados con closures. Comunmente usada en el [patron modulo](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript).
+- [Aplicación parcial o ](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x).
+
+###### Referencias
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
+- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
diff --git a/Translations/Japanese/questions/css-questions.md b/website/i18n/ja-JP/docusaurus-plugin-content-docs/current/css-questions.md
similarity index 57%
rename from Translations/Japanese/questions/css-questions.md
rename to website/i18n/ja-JP/docusaurus-plugin-content-docs/current/css-questions.md
index f772ceafd8..0989a51103 100644
--- a/Translations/Japanese/questions/css-questions.md
+++ b/website/i18n/ja-JP/docusaurus-plugin-content-docs/current/css-questions.md
@@ -1,38 +1,12 @@
-# CSS に関する質問
-
-[Front-end Job Interview Questions - CSS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/css-questions.md) の回答集です。提案や訂正のプルリクエストは大歓迎です！
-
-* [CSS セレクターの詳細度とは何ですか？どのようにはたらきますか？](#css-セレクターの詳細度とは何ですかそれはどのようにはたらきますか)
-* ["リセット" と "ノーマライズ" CSS の違いは何ですか？あなたはどちらを使いますか？そしてそれはなぜですか？](#リセット-と-ノーマライズ-css-の違いは何ですかあなたはどちらを使いますかそしてそれはなぜですか)
-* [`float` とは何ですか？どのようにはたらきますか？](#float-とは何ですかどのようにはたらきますか)
-* [`z-index` とは何かと、スタックコンテキスト(スタック文脈)がどのように作られるのかを教えてください。](#z-index-とは何かとスタックコンテキストスタック文脈がどのように作られるのかを教えてください)
-* [ブロック整形文脈（Block Formatting Context: BFC）とその仕組みを教えてください。](#ブロック整形文脈block-formatting-context-bfcとその仕組みを教えてください)
-* [clear を行う手法にはどのようなものがあり、それぞれどのような状況に適していますか？](#clear-を行う手法にはどのようなものがありそれぞれどのような状況に適していますか)
-* [CSS スプライトとは何ですか？ページやサイトに実装する方法も合わせて説明してください。](#css-スプライトとは何ですかページやサイトに実装する方法も合わせて説明してください)
-* [ブラウザ固有のスタイリングに関する問題を解決するにはどうすればいいですか？](#ブラウザ固有のスタイリングに関する問題を解決するにはどうすればいいですか)
-* [機能の少ないブラウザに対しては、どのようにページを提供しますか？どのようなテクニック/プロセスを使用しますか？](#機能の少ないブラウザに対してはどのようにページを提供しますかどのようなテクニックプロセスを使用しますか)
-* [コンテンツを視覚的に隠す（スクリーンリーダーのみ利用可能にする）方法にはどのようなものがありますか？いくつか教えてください。](#コンテンツを視覚的に隠すスクリーンリーダーのみ利用可能にする方法にはどのようなものがありますかいくつか教えてください)
-* [グリッドシステムを使用したことがありますか？使ったことがあるなら、あなたはどのグリッドシステムが好きですか？](#グリッドシステムを使用したことがありますか使ったことがあるならあなたはどのグリッドシステムが好きですか)
-* [メディアクエリやモバイル固有のレイアウト/CSS を使用したり実装したことはありますか？](#メディアクエリやモバイル固有のレイアウトcss-を使用したり実装したことはありますか)
-* [SVG のスタイリングについては詳しいですか？](#svg-のスタイリングについては詳しいですか)
-* [`screen` 以外の `@media` プロパティの例を挙げられますか？](#screen-以外の-media-プロパティの例を挙げられますか)
-* [効率的な CSS を書くにために避けるべき "落とし穴" にはどんなものがありますか？](#効率的な-css-を書くにために避けるべき-落とし穴-にはどんなものがありますか)
-* [CSS プリプロセッサを使用するメリットとデメリットを教えてください。](#css-プリプロセッサを使用するメリットとデメリットには何がありますか)
-* [使用したことのある CSS プリプロセッサについて好きなものと嫌いなものを教えてください。](#使用したことのある-css-プリプロセッサについて好きなものと嫌いなものを教えてください)
-* [非標準フォントを使用する Web サイトを実装するにはどのようにしますか？](#非標準フォントを使用する-web-サイトを実装するにはどのようにしますか)
-* [CSS セレクタにマッチする要素がどれなのか、ブラウザがどのように決定しているかを説明してください。](#css-セレクタにマッチする要素がどれなのかブラウザがどのように決定しているかを説明してください)
-* [疑似要素について説明し、それらがなんのために使われているかを詳しく話してください。](#疑似要素について説明しそれらがなんのために使われているかを詳しく話してください)
-* [ボックスモデルがなんであるかのあなたの理解と、ボックスモデルでレイアウトをレンダリングするために CSS でブラウザに指示する複数の方法を説明してください。](#ボックスモデルがなんであるかのあなたの理解と異なるボックスモデルでレイアウトをレンダリングするために-css-でブラウザに指示する方法を説明してください)
-* [`* { box-sizing: border-box; }` によって何が起きますか？その利点は何ですか？](#--box-sizing-border-box--によって何が起きますかその利点は何ですか)
-* [CSS の `display` プロパティとは何ですか？その使い方の例をいくつか挙げることができますか？](#css-の-display-プロパティとは何ですかその使い方の例をいくつか挙げることができますか)
-* [`inline` と `inline-block` の違いは何ですか？](#inline-と-inline-block-の違いは何ですか)
-* [`position` が `relative`、`fixed`、`absolute`、`static` の要素の違いは何ですか？](#position-が-relativefixedabsolutestatic-の要素の違いは何ですか)
-* [ローカルや本番環境で、どの既存の CSS フレームワークを使用していますか？また、どのように変更/改善していますか？](#ローカルや本番環境でどの既存の-css-フレームワークを使用していますかまたどのように変更改善していますか)
-* [CSS の Flexbox や Grid の仕様で遊んだことはありますか？](#css-の-flexbox-や-grid-の仕様で遊んだことはありますか)
-* [ウェブサイトをレスポンシブでコーディングすることとモバイルファーストでコーディングすることの違いを説明できますか？](#ウェブサイトをレスポンシブでコーディングすることとモバイルファーストでコーディングすることの違いを説明できますか)
-* [レスポンシブデザインはアダプティブデザインと何が違いますか？](#レスポンシブデザインはアダプティブデザインと何が違いますか)
-* [Retina 対応を行ったことはありますか？もしあるなら、いつどのようなテクニックを使いましたか？](#retina-対応を行ったことはありますかもしあるならいつどのようなテクニックを使いましたか)
-* [`position: absolute` の代わりに `translate()` を使用するべき場合はありますか？その逆の場合もありますか？理由も合わせて教えてください。](#position-absolute-の代わりに-translate-を使用するべき場合はありますかその逆の場合もありますか理由も合わせて教えてください)
+---
+title: CSS に関する質問
+---
+
+[Front-end Job Interview Questions - CSS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/css-questions.md) の回答集です。提案や訂正のプルリクエストは大歓迎です！
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
 
 ### CSS セレクターの詳細度とは何ですか？それはどのようにはたらきますか？
 
@@ -51,23 +25,19 @@
 
 ###### 参考
 
-* https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
-* https://www.sitepoint.com/web-foundations/specificity/
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
+- https://www.sitepoint.com/web-foundations/specificity/
 
 ### "リセット" と "ノーマライズ" CSS の違いは何ですか？あなたはどちらを使いますか？そしてそれはなぜですか？
 
-* **リセット** - リセットとは、要素のすべてのデフォルトブラウザスタイルを削除することを意味します。例えば、`margin`、`padding`、`font-size` は全て同じ要素にリセットされます。一般的なタイポグラフィー要素のためにスタイリングを再宣言しなければなりません。
-* **ノーマライズ** - ノーマライズでは、すべてのスタイルを削除するのではなく、有用なデフォルトスタイルは保持します。合わせて、一般的なブラウザの依存関係のバグを修正します。
+- **リセット** - リセットとは、要素のすべてのデフォルトブラウザスタイルを削除することを意味します。例えば、`margin`、`padding`、`font-size` は全て同じ要素にリセットされます。一般的なタイポグラフィー要素のためにスタイリングを再宣言しなければなりません。
+- **ノーマライズ** - ノーマライズでは、すべてのスタイルを削除するのではなく、有用なデフォルトスタイルは保持します。合わせて、一般的なブラウザの依存関係のバグを修正します。
 
 私は非常にカスタマイズされた、または一般的ではないデザインのサイトを作成する際にはリセットを選択します。これらの場合、自分のスタイリングをたくさん行う必要があり、デフォルトのスタイリングを保存する必要がないためです。
 
 ###### 参考
 
-* https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
 
 ### `float` とは何ですか？どのようにはたらきますか？
 
@@ -93,9 +63,7 @@ CSS の `clear` プロパティは、`left`/`right`/`both` フロート要素の
 
 ###### 参考
 
-* https://css-tricks.com/all-about-floats/
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- https://css-tricks.com/all-about-floats/
 
 ### `z-index` とは何かと、スタックコンテキスト(スタック文脈)がどのように作られるのかを教えてください。
 
@@ -109,12 +77,10 @@ CSS の `z-index` プロパティは、重なっている要素の垂直方向
 
 ###### 参考
 
-* https://css-tricks.com/almanac/properties/z/z-index/
-* https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
-* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context (英語)
-* https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context (日本語)
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- https://css-tricks.com/almanac/properties/z/z-index/
+- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
+- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context (英語)
+- https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context (日本語)
 
 ### ブロック整形文脈（Block Formatting Context: BFC）とその仕組みを教えてください。
 
@@ -122,10 +88,10 @@ CSS の `z-index` プロパティは、重なっている要素の垂直方向
 
 BFC は、以下の条件の少なくとも 1 つを満たす HTML ボックスです。
 
-* `float` の値は `none` ではありません。
-* `position` の値は `static` でも `relative` でもありません。
-* `display` の値は `table-cell`、`table-caption`、`inline-block`、`flex`、`inline-flex` です。
-* `overflow` の値は `visible` ではありません。
+- `float` の値は `none` ではありません。
+- `position` の値は `static` でも `relative` でもありません。
+- `display` の値は `table-cell`、`table-caption`、`inline-block`、`flex`、`inline-flex` です。
+- `overflow` の値は `visible` ではありません。
 
 BFC では、各ボックスの左端が包含ブロックの左端に接します（右から左への書式設定、右端からのタッチ）。
 
@@ -133,22 +99,18 @@ BFC が崩壊したときに隣接するブロックレベルボックス間の
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context (英語)
-* https://developer.mozilla.org/ja/docs/Web/CSS/Block_formatting_context (日本語)
-* https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context (英語)
+- https://developer.mozilla.org/ja/docs/Web/CSS/Block_formatting_context (日本語)
+- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
 
 ### clear を行う手法にはどのようなものがあり、それぞれどのような状況に適していますか？
 
-* 空の `div` メソッド - `<div style="clear:both;"></div>`
-* Clearfix メソッド - 上記の `.clearfix` クラスを参照してください。
-* `overflow: auto` または `overflow: hidden` メソッド - 親は新しいブロック書式設定コンテキストを確立し、float された子を含むように展開します。
+- 空の `div` メソッド - `<div style="clear:both;"></div>`
+- Clearfix メソッド - 上記の `.clearfix` クラスを参照してください。
+- `overflow: auto` または `overflow: hidden` メソッド - 親は新しいブロック書式設定コンテキストを確立し、float された子を含むように展開します。
 
 大規模なプロジェクトでは、ユーティリティ `.clearfix` クラスを作成し、必要な場所で使用します。子供が親よりも背が高く、それほど理想的でない場合、`overflow: hidden` は子供をクリップするかもしれません。
 
-[[↑] 先頭に戻る](#css-に関する質問)
-
 ### CSS スプライトとは何ですか？ページやサイトに実装する方法も合わせて説明してください。
 
 CSS スプライトは、複数のイメージを 1 つの大きなイメージに結合します。これは一般的にアイコン用の技術です（Gmail が使用しています）。それを実装する方法：
@@ -159,82 +121,67 @@ CSS スプライトは、複数のイメージを 1 つの大きなイメージ
 
 **利点:**
 
-* 複数のイメージに対する HTTP リクエストの数を減らす（スプライトシートごとに 1 回のリクエストが 1 回だけ必要）。しかし、HTTP2 では複数のイメージを読み込むことはもはや大きな問題にはなりません。
-* 必要なまでダウンロードされないアセットの事前ダウンロード。例えば、`:hover` 疑似ステートにのみ現れるイメージ。点滅は見られない。
+- 複数のイメージに対する HTTP リクエストの数を減らす（スプライトシートごとに 1 回のリクエストが 1 回だけ必要）。しかし、HTTP2 では複数のイメージを読み込むことはもはや大きな問題にはなりません。
+- 必要なまでダウンロードされないアセットの事前ダウンロード。例えば、`:hover` 疑似ステートにのみ現れるイメージ。点滅は見られない。
 
 ###### 参考
 
-* https://css-tricks.com/css-sprites/
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- https://css-tricks.com/css-sprites/
 
 ### ブラウザ固有のスタイリングに関する問題を解決するにはどうすればいいですか？
 
-* 問題を特定して問題のブラウザを特定したら、その特定のブラウザが使用されているときにのみロードする別のスタイルシートを使用します。この手法では、サーバー側のレンダリングが必要です。
-* これらのスタイリングの問題を既に処理している Bootstrap のようなライブラリを使用してください。
-* ベンダープレフィックスをコードに自動的に追加するには、`autoprefixer` を使用します。
-* Reset CSS または Normalize.css を使用してください。
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- 問題を特定して問題のブラウザを特定したら、その特定のブラウザが使用されているときにのみロードする別のスタイルシートを使用します。この手法では、サーバー側のレンダリングが必要です。
+- これらのスタイリングの問題を既に処理している Bootstrap のようなライブラリを使用してください。
+- ベンダープレフィックスをコードに自動的に追加するには、`autoprefixer` を使用します。
+- Reset CSS または Normalize.css を使用してください。
 
 ### 機能の少ないブラウザに対しては、どのようにページを提供しますか？どのようなテクニック/プロセスを使用しますか？
 
-* グレースフル・デグラデーション（Graceful degradation） - 最新のブラウザー用のアプリケーションを構築し、古いブラウザーでは機能し続けることを保証する習慣。
-* プログレッシブ・エンハンス（Progressive Enhancement） - 基本レベルのユーザーエクスペリエンスのためのアプリケーションを構築するが、ブラウザーがそれをサポートするときに機能拡張を追加するプラクティス。
-* 機能のサポートを確認するには、[caniuse.com](https://caniuse.com/) を使用してください。
-* 自動ベンダー接頭辞挿入のための\*オートプレフィクサー。
-* [Modernizr](https://modernizr.com/) を使った機能の検出
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- グレースフル・デグラデーション（Graceful degradation） - 最新のブラウザー用のアプリケーションを構築し、古いブラウザーでは機能し続けることを保証する習慣。
+- プログレッシブ・エンハンス（Progressive Enhancement） - 基本レベルのユーザーエクスペリエンスのためのアプリケーションを構築するが、ブラウザーがそれをサポートするときに機能拡張を追加するプラクティス。
+- 機能のサポートを確認するには、[caniuse.com](https://caniuse.com/) を使用してください。
+- 自動ベンダー接頭辞挿入のための\*オートプレフィクサー。
+- [Modernizr](https://modernizr.com/) を使った機能の検出
 
 ### コンテンツを視覚的に隠す（スクリーンリーダーのみ利用可能にする）方法にはどのようなものがありますか？いくつか教えてください。
 
 これらの技術はアクセシビリティ（a11y）に関連しています。
 
-* `visibility: hidden`： しかし、要素はまだページの流れにあり、まだ空間を占めています。
-* `width: 0; height: 0`： 要素が画面上のスペースを全く占めないようにして、それを表示しないようにします。
-* `position: absolute; left: -99999px`： 画面の外側に配置します。
-* `text-indent: -9999px`： これは `block` 要素内のテキストに対してのみ機能します。
-* メタデータ： たとえば、Schema.org、RDF、JSON-LD を使用します。
-* WAI-ARIA： Web ページのアクセシビリティを向上させる方法を指定する W3C の技術仕様。
+- `width: 0; height: 0`： 要素が画面上のスペースを全く占めないようにして、それを表示しないようにします。
+- `position: absolute; left: -99999px`： 画面の外側に配置します。
+- `text-indent: -9999px`： これは `block` 要素内のテキストに対してのみ機能します。
+- メタデータ： たとえば、Schema.org、RDF、JSON-LD を使用します。
+- WAI-ARIA： Web ページのアクセシビリティを向上させる方法を指定する W3C の技術仕様。
 
 WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute` による位置決定手法を採用しています。注意すべきことが少なく、ほとんどの要素に対応している簡単な手法だからです。
 
 ###### 参考
 
-* https://www.w3.org/TR/wai-aria-1.1/
-* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA (英語)
-* https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA (日本語)
-* http://a11yproject.com/
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- https://www.w3.org/TR/wai-aria-1.1/
+- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA (英語)
+- https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA (日本語)
+- http://a11yproject.com/
 
 ### グリッドシステムを使用したことがありますか？使ったことがあるなら、あなたはどのグリッドシステムが好きですか？
 
 私は `float` ベースのグリッドシステムが好きです。なぜなら、既存の代替システム（フレックス、グリッド）の中でも最も多くのブラウザをサポートしているからです。ブートストラップで長年使用されており、動作することが証明されています。
 
-[[↑] 先頭に戻る](#css-に関する質問)
-
 ### メディアクエリやモバイル固有のレイアウト/CSS を使用したり実装したことはありますか？
 
 はい。一例は、ピル型ナビゲーションを、特定のブレークポイントを越えた固定底のタブ型ナビゲーションに変換することである。
 
-[[↑] 先頭に戻る](#css-に関する質問)
-
 ### SVG のスタイリングについては詳しいですか？
 
 いいえ...悲しいことに。
 
-[[↑] 先頭に戻る](#css-に関する質問)
-
 ### `screen` 以外の @media プロパティの例を挙げられますか？
 
 はい、@media プロパティには `screen` も含めて４つの種類があります。:
 
-* `all` - for all media type devices
-* `print` - for printers
-* `speech` - for screenreaders that "reads" the page out loud
-* `screen` - for computer screens, tablets, smart-phones etc.
+- `all` - 全てのデバイス
+- `print` - プリンター
+- `speech` - ページを読み上げるスクリーンリーダー
+- `screen` - コンピュータスクリーンやタブレット、スマートフォンなど
 
 `print` メディアタイプの使い方の例:
 
@@ -246,8 +193,6 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute` 
 }
 ```
 
-[[↑] 先頭に戻る](#css-に関する質問)
-
 ### 効率的な CSS を書くにために避けるべき "落とし穴" にはどんなものがありますか？
 
 まず、ブラウザがセレクタを右端（キーセレクタ）から左に一致させることを理解してください。ブラウザはキーセレクタに従って DOM 内の要素をフィルタリングし、親要素を走査して一致を判定します。セレクターチェーンの長さが短いほど、ブラウザーはそのエレメントがセレクターと一致するかどうかを判別することができます。したがって、タグセレクタとユニバーサルセレクタであるキーセレクタは避けてください。それらは多数の要素にマッチし、ブラウザは親がマッチするかどうかを判断するために多くの作業をする必要があります。
@@ -258,47 +203,39 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute` 
 
 ###### 参考
 
-* https://developers.google.com/web/fundamentals/performance/rendering/
-* https://csstriggers.com/
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- https://developers.google.com/web/fundamentals/performance/rendering/
+- https://csstriggers.com/
 
 ### CSS プリプロセッサを使用するメリットとデメリットには何がありますか？
 
 **メリット:**
 
-* CSS のメンテナンス性が向上しました。
-* ネストされたセレクタを書きやすい。
-* 一貫したテーマ設定のための変数。異なるプロジェクト間でテーマファイルを共有できます。
-* ミックスインは繰り返し CSS を生成します。
-* あなたのコードを複数のファイルに分割する。CSS ファイルも分割することができますが、そのためには各 CSS ファイルをダウンロードするための HTTP リクエストが必要です。
+- CSS のメンテナンス性が向上しました。
+- ネストされたセレクタを書きやすい。
+- 一貫したテーマ設定のための変数。異なるプロジェクト間でテーマファイルを共有できます。
+- ミックスインは繰り返し CSS を生成します。
+- あなたのコードを複数のファイルに分割する。CSS ファイルも分割することができますが、そのためには各 CSS ファイルをダウンロードするための HTTP リクエストが必要です。
 
 **デメリット:**
 
-* 前処理のためのツールが必要です。再コンパイル時間が遅くなることがあります。
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- 前処理のためのツールが必要です。再コンパイル時間が遅くなることがあります。
 
 ### 使用したことのある CSS プリプロセッサについて好きなものと嫌いなものを教えてください。
 
 **好きなもの:**
 
-* 主に上記の利点。
-* Less は JavaScript で書かれており、Node でうまくいきます。
+- 主に上記の利点。
+- Less は JavaScript で書かれており、Node でうまくいきます。
 
 **嫌いなもの:**
 
-* C++ で書かれた LibSass のバインディングである `node-sass` を使って Sass を使用します。ノードのバージョンを切り替えるときに、頻繁に再コンパイルする必要があります。
-* Less では、変数名の先頭に `@` が付いています。これは `@media`、`@import`、`@font-face` ルールなどのネイティブ CSS キーワードと混同することがあります。
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- C++ で書かれた LibSass のバインディングである `node-sass` を使って Sass を使用します。ノードのバージョンを切り替えるときに、頻繁に再コンパイルする必要があります。
+- Less では、変数名の先頭に `@` が付いています。これは `@media`、`@import`、`@font-face` ルールなどのネイティブ CSS キーワードと混同することがあります。
 
 ### 非標準フォントを使用する Web サイトを実装するにはどのようにしますか？
 
 `font-face` を使って `font-weight` の `font-family` を定義してください。
 
-[[↑] 先頭に戻る](#css-に関する質問)
-
 ### CSS セレクタにマッチする要素がどれなのか、ブラウザがどのように決定しているかを説明してください。
 
 この部分は上記の効率的な CSS の記述に関するものです。ブラウザはセレクタを右端（キーセレクタ）から左に一致させます。ブラウザはキーセレクタに従って DOM 内の要素をフィルタリングし、親要素を走査して一致を判定します。セレクタチェーンの長さが短ければ短いほど、ブラウザがその要素がセレクタに一致するかどうかを判断することができます。
@@ -307,23 +244,19 @@ WAI-ARIA が理想的な解決策かもしれませんが、私は `absolute` 
 
 ###### 参考
 
-* https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
 
 ### 疑似要素について説明し、それらがなんのために使われているかを詳しく話してください。
 
 CSS 疑似要素はセレクタに追加されたキーワードで、選択した要素の特定の部分をスタイルすることができます。マークアップ(`:before`, `:after`)を変更しなくても、マークアップ(combined with `content: ...`)への要素の追加やデコレーション(`:first-line`, `:first-letter`) に使用できます。
 
-* `:first-line` と `:first-letter` を使ってテキストを装飾することができます。
-* 上記の `.clearfix` ハックで、`clear:both` でゼロスペースの要素を追加するために使用されます。
-* ツールチップの三角形の矢印は `:before` と `:after` を使います。三角形は実際には DOM ではなくスタイリングの一部とみなされるため、懸念の分離を促します。追加の HTML 要素を使用せずに CSS スタイルだけで三角形を描画することは、実際には不可能です。
+- `:first-line` と `:first-letter` を使ってテキストを装飾することができます。
+- 上記の `.clearfix` ハックで、`clear:both` でゼロスペースの要素を追加するために使用されます。
+- ツールチップの三角形の矢印は `:before` と `:after` を使います。三角形は実際には DOM ではなくスタイリングの一部とみなされるため、懸念の分離を促します。追加の HTML 要素を使用せずに CSS スタイルだけで三角形を描画することは、実際には不可能です。
 
 ###### 参考
 
-* https://css-tricks.com/almanac/selectors/a/after-and-before/
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- https://css-tricks.com/almanac/pseudo-selectors/b/after-and-before/
 
 ### ボックスモデルがなんであるかのあなたの理解と、異なるボックスモデルでレイアウトをレンダリングするために CSS でブラウザに指示する方法を説明してください。
 
@@ -331,81 +264,69 @@ CSS ボックスモデルは、ドキュメントツリー内の要素に対し
 
 CSS ボックスモデルは、次の計算を行います。
 
-* ブロック要素がどれくらいのスペースを占めるか。
-* 枠線や余白が重なるかどうか、または折りたたむかどうか。
-* ボックスの寸法。
+- ブロック要素がどれくらいのスペースを占めるか。
+- 枠線や余白が重なるかどうか、または折りたたむかどうか。
+- ボックスの寸法。
 
 ボックスモデルには次の規則があります。
 
-* ブロック要素の大きさは、`width`、`height`、`padding`、`border` および `margin` によって計算されます。
-* `height` が指定されていない場合、ブロック要素は含まれている内容と同じくらい高くなります（フロートがない限り、以下参照）。
-* `width` が指定されていない場合、フロートのブロック要素は、その親の幅から `padding` の幅に収まるように展開されます。
-* 要素の `height` は内容の `height` によって計算されます。
-* 要素の `width` は内容の `width` によって計算されます。
-* デフォルトでは、`padding` と `border` は要素の `width` と `height` の一部ではありません。
+- ブロック要素の大きさは、`width`、`height`、`padding`、`border` および `margin` によって計算されます。
+- `height` が指定されていない場合、ブロック要素は含まれている内容と同じくらい高くなります（フロートがない限り、以下参照）。
+- `width` が指定されていない場合、フロートのブロック要素は、その親の幅から `padding` の幅に収まるように展開されます。
+- 要素の `height` は内容の `height` によって計算されます。
+- 要素の `width` は内容の `width` によって計算されます。
+- デフォルトでは、`padding` と `border` は要素の `width` と `height` の一部ではありません。
 
 ###### 参考
 
-* https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
 
 ### `* { box-sizing: border-box; }` によって何が起きますか？その利点は何ですか？
 
-* デフォルトでは、要素には `box-sizing: content-box` が適用され、コンテンツサイズのみが考慮されます。
-* `box-sizing：border-box` は、要素の `width` と `height` がどのように計算されるかを変更し、`border` と `padding` も計算に含めます。
-* 要素の `height` は、コンテンツの `height` + 垂直 `padding` + 垂直 `border` 幅によって計算されます。
-* 要素の `width` は、コンテンツの `width` + 水平 `padding` + 水平 `border` 幅によって計算されます。
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- デフォルトでは、要素には `box-sizing: content-box` が適用され、コンテンツサイズのみが考慮されます。
+- `box-sizing：border-box` は、要素の `width` と `height` がどのように計算されるかを変更し、`border` と `padding` も計算に含めます。
+- 要素の `height` は、コンテンツの `height` + 垂直 `padding` + 垂直 `border` 幅によって計算されます。
+- 要素の `width` は、コンテンツの `width` + 水平 `padding` + 水平 `border` 幅によって計算されます。
 
 ### CSS の `display` プロパティとは何ですか？その使い方の例をいくつか挙げることができますか？
 
-* `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`
+- `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`
 
 TODO
 
-[[↑] 先頭に戻る](#css-に関する質問)
-
 ### `inline` と `inline-block` の違いは何ですか？
 
 比較のために `block` も並べます。
 
-|                                      | `block`                                                                                     | `inline-block`                                                   | `inline`                                                                                                                                                                                                             |
-| ------------------------------------ | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Size                                 | Fills up the width of its parent container.                                                 | Depends on content.                                              | Depends on content.                                                                                                                                                                                                  |
-| Positioning                          | Start on a new line and tolerates no HTML elements next to it (except when you add `float`) | Flows along with other content and allows other elements beside. | Flows along with other content and allows other elements beside.                                                                                                                                                     |
-| Can specify `width` and `height`     | Yes                                                                                         | Yes                                                              | No. Will ignore if being set.                                                                                                                                                                                        |
-| Can be aligned with `vertical-align` | No                                                                                          | Yes                                                              | Yes                                                                                                                                                                                                                  |
-| Margins and paddings                 | All sides respected.                                                                        | All sides respected.                                             | Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on `line-height`, even though the `border` and `padding` appear visually around the content. |
-| Float                                | -                                                                                           | -                                                                | Becomes like a `block` element where you can set vertical margins and paddings.                                                                                                                                      |
-
-[[↑] 先頭に戻る](#css-に関する質問)
+|  | `block` | `inline-block` | `inline` |
+| --- | --- | --- | --- |
+| サイズ | 親要素の幅と同じになる。 | 要素によって変わる。 | 要素によって変わる。 |
+| ポジショニング | 新しい行から始まり、隣に要素を並べられない。(`float`を使う場合を除く) | 他の要素とフローし、隣に要素を並べることができる。 | 他の要素とフローし、隣に要素を並べることができる。 |
+| `width` と `height` の指定ができるか | はい | はい | いいえ、設定をしても無視される。 |
+| `vertical-align` を指定できるか | いいえ | はい | はい |
+| マージンとパディング | 上下左右に指定できる。 | 上下左右に指定できる。 | 左右のみ指定可能。上下に指定をしてもレイアウトに影響はない。 `border` と `padding` が要素の周りに視覚的に現れていても、上下のスペースは `line-height` によって決まる。 |
+| フロート | - | - | 上下の `margins` と `paddings` を設定できる `block` 要素のようになる。 |
 
 ### `position` が `relative`、`fixed`、`absolute`、`static` の要素の違いは何ですか？
 
 配置された要素は、計算された `position` プロパティが `relative`、`absolute`、`fixed` または `sticky` のいずれかである要素です。
 
-* `static` - デフォルトの位置です。要素は通常どおりページに流れます。`top`、`right`、`bottom`、`left`、`z-index` プロパティは適用されません。
-* `relative` - 要素の位置は、レイアウトを変更することなく、それ自体に対して相対的に調整されます（したがって、配置されていなかった要素の隙間を残します）。
-* `absolute` - 要素は、ページのフローから削除され、もしあれば、最も近い位置にある祖先に対して指定された位置に置かれます。絶対配置されたボックスは余白を持つことができ、他の余白と一緒に折り畳まれることはありません。これらの要素は他の要素の位置に影響しません。
-* `fixed` - 要素は、ページのフローから削除され、ビューポートに対して指定された位置に配置され、スクロールすると移動しません。
-* `sticky` - スティッキーポジショニングは、相対位置と固定位置のハイブリッドです。要素は、指定されたしきい値を超えるまで、相対的な位置として扱われます。その時点で、`fixed` の位置として扱われます。
+- `static` - デフォルトの位置です。要素は通常どおりページに流れます。`top`、`right`、`bottom`、`left`、`z-index` プロパティは適用されません。
+- `relative` - 要素の位置は、レイアウトを変更することなく、それ自体に対して相対的に調整されます（したがって、配置されていなかった要素の隙間を残します）。
+- `absolute` - 要素は、ページのフローから削除され、もしあれば、最も近い位置にある祖先に対して指定された位置に置かれます。絶対配置されたボックスは余白を持つことができ、他の余白と一緒に折り畳まれることはありません。これらの要素は他の要素の位置に影響しません。
+- `fixed` - 要素は、ページのフローから削除され、ビューポートに対して指定された位置に配置され、スクロールすると移動しません。
+- `sticky` - スティッキーポジショニングは、相対位置と固定位置のハイブリッドです。要素は、指定されたしきい値を超えるまで、相対的な位置として扱われます。その時点で、`fixed` の位置として扱われます。
 
 ###### 参考
 
-* https://developer.mozilla.org/en/docs/Web/CSS/position (英語)
-* https://developer.mozilla.org/ja/docs/Web/CSS/position (日本語)
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- https://developer.mozilla.org/en/docs/Web/CSS/position (英語)
+- https://developer.mozilla.org/ja/docs/Web/CSS/position (日本語)
 
 ### ローカルや本番環境で、どの既存の CSS フレームワークを使用していますか？また、どのように変更/改善していますか？
 
-* **BootStrap** - 緩やかなリリースサイクル。BootStrap4 は、ほぼ 2 年間アルファになっています。広く使用されているように、スピナーボタンコンポーネントを追加します。
-* **Semantic UI** - ソースコード構造により、テーマのカスタマイズが非常に難しくなります。慣習的でないテーマ設定システムでカスタマイズするのは面倒です。ベンダライブラリ内のハードコードされた設定パス。BootStrap とは違って、変数をオーバーライドするためにうまく設計されていません。
-* **Bulma** - 非セマンティックで余計なクラスやマークアップが必要です。下位互換性がありません。バージョンをアップグレードすると、微妙な方法でアプリが壊れてしまいます。
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- **BootStrap** - 緩やかなリリースサイクル。BootStrap4 は、ほぼ 2 年間アルファになっています。広く使用されているように、スピナーボタンコンポーネントを追加します。
+- **Semantic UI** - ソースコード構造により、テーマのカスタマイズが非常に難しくなります。慣習的でないテーマ設定システムでカスタマイズするのは面倒です。ベンダライブラリ内のハードコードされた設定パス。BootStrap とは違って、変数をオーバーライドするためにうまく設計されていません。
+- **Bulma** - 非セマンティックで余計なクラスやマークアップが必要です。下位互換性がありません。バージョンをアップグレードすると、微妙な方法でアプリが壊れてしまいます。
 
 ### CSS の Flexbox や Grid の仕様で遊んだことはありますか？
 
@@ -417,16 +338,12 @@ Flexbox は、コンテナ内の要素の垂直方向のセンタリング、ス
 
 ###### 参考
 
-* https://philipwalton.github.io/solved-by-flexbox/
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- https://philipwalton.github.io/solved-by-flexbox/
 
 ### ウェブサイトをレスポンシブでコーディングすることとモバイルファーストでコーディングすることの違いを説明できますか？
 
 TODO
 
-[[↑] 先頭に戻る](#css-に関する質問)
-
 ### レスポンシブデザインはアダプティブデザインと何が違いますか？
 
 応答性と適応性の両方の設計では、さまざまなデバイス間でユーザーエクスペリエンスを最適化し、異なるビューポートサイズ、解像度、使用状況、制御メカニズムなどを調整します。
@@ -437,12 +354,9 @@ TODO
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design (英語)
-* https://developer.mozilla.org/ja/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design (日本語)
-* http://mediumwell.com/responsive-adaptive-mobile/
-* https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design (英語)
+- http://mediumwell.com/responsive-adaptive-mobile/
+- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
 
 ### Retina 対応を行ったことはありますか？もしあるなら、いつどのようなテクニックを使いましたか？
 
@@ -454,9 +368,7 @@ TODO
 
 ###### 参考
 
-* https://www.sitepoint.com/css-techniques-for-retina-displays/
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- https://www.sitepoint.com/css-techniques-for-retina-displays/
 
 ### `position: absolute` の代わりに `translate()` を使用するべき場合はありますか？その逆の場合もありますか？理由も合わせて教えてください。
 
@@ -466,12 +378,10 @@ TODO
 
 ###### 参考
 
-* https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
-
-[[↑] 先頭に戻る](#css-に関する質問)
+- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
 
 ### 他の方の回答集
 
-* https://neal.codes/blog/front-end-interview-css-questions
-* https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/
-* http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
+- https://neal.codes/blog/front-end-interview-css-questions
+- https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/
+- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
diff --git a/Translations/Japanese/questions/html-questions.md b/website/i18n/ja-JP/docusaurus-plugin-content-docs/current/html-questions.md
similarity index 65%
rename from Translations/Japanese/questions/html-questions.md
rename to website/i18n/ja-JP/docusaurus-plugin-content-docs/current/html-questions.md
index 9cdfdb3a7c..db15b5fa0e 100644
--- a/Translations/Japanese/questions/html-questions.md
+++ b/website/i18n/ja-JP/docusaurus-plugin-content-docs/current/html-questions.md
@@ -1,18 +1,12 @@
-# HTML に関する質問
-
-[Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/html-questions.md) の回答集です。提案や訂正のプルリクエストは大歓迎です！
-
-* [`DOCTYPE` は何のためにあるものですか？](#doctype-は何のためにあるものですか)
-* [どのようにすれば複数の言語のコンテンツを含むページを提供できますか？](#どのようにすれば複数の言語のコンテンツを含むページを提供できますか)
-* [多言語サイトを設計・開発する際には、どんなことに注意を払わなければならないですか？](#多言語サイトを設計開発する際にはどんなことに注意を払わなければならないですか)
-* [`data-` 属性は何のために使われるのですか？](#data--属性は何のために使われるのですか)
-* [HTML5 をオープンウェブプラットフォームとして考えたときに、HTML5 とはどんな要素から成るものですか？](#html5-をオープンウェブプラットフォームとして考えたときにhtml5-とはどんな要素から成るものですか)
-* [`cookie`、`sessionStorage`、`localStorage` の違いを教えてください。](#cookiesessionstoragelocalstorage-の違いを教えてください)
-* [`<script>`、`<script async>`、`<script defer>` の違いを教えてください。](#scriptscript-asyncscript-defer-の違いを教えてください)
-* [なぜ一般的に、CSS の `<link>` を `<head></head>` の間に、JS の `<script>` を `</body>` の直前に置くことが良いと言われているのでしょうか？こうすべきでない例外を知っていますか？](#なぜ一般的にcss-の-link-を-headhead-の間にjs-の-script-を-body-の直前に置くことが良いと言われているのでしょうかこうすべきでない例外を知っていますか)
-* [プログレッシブレンダリングとは何ですか？](#プログレッシブレンダリングとは何ですか)
-* [img タグに `srcset` 属性を使用する理由は？この属性をもつ要素を評価するときにブラウザが行うプロセスを説明してください。](#img-タグに-srcset-属性を使用する理由はこの属性をもつ要素を評価するときにブラウザが行うプロセスを説明してください)
-* [HTML テンプレート言語をいくつか使用した経験はありますか？](#html-テンプレート言語をいくつか使用した経験はありますか)
+---
+title: HTML に関する質問
+---
+
+[Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/html-questions.md) の回答集です。提案や訂正のプルリクエストは大歓迎です！
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
 
 ### `DOCTYPE` は何のためにあるものですか？
 
@@ -22,11 +16,9 @@
 
 ###### 参考
 
-* https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
-* https://www.w3.org/QA/Tips/Doctype
-* https://quirks.spec.whatwg.org/#history
-
-[[↑] 先頭に戻る](#html-に関する質問)
+- https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
+- https://www.w3.org/QA/Tips/Doctype
+- https://quirks.spec.whatwg.org/#history
 
 ### どのようにすれば複数の言語のコンテンツを含むページを提供できますか？
 
@@ -38,26 +30,22 @@ HTTP リクエストがサーバに対して行われるとき、リクエスト
 
 ###### 参考
 
-* https://www.w3.org/International/getting-started/language
-
-[[↑] 先頭に戻る](#html-に関する質問)
+- https://www.w3.org/International/getting-started/language
 
 ### 多言語サイトを設計・開発する際には、どんなことに注意を払わなければならないですか？
 
-* HTML に `lang` 属性を使います。
-* ユーザーを母国語に誘導する - ユーザーが困難なく、国/言語を簡単に変更できるようにします。
-* 画像によるテキストを使用することはスケーラブルな方法ではない - 確かに画像にテキストを配置することは、システムに無い見栄えの良いフォントをあらゆるコンピュータに表示させるための一般的な方法です。しかし、画像によるテキストを翻訳するにはテキストごとに各言語用の別々の画像が必要になります。このような画像の変換はほんの少しならいいものの、増えてくるとすぐに管理できなくなってしまいます。
-* 制限的な言葉/文章の長さ - 別の言語で書くとコンテンツの長さが変わるので、デザインのレイアウトやオーバーフローの問題に注意します。テキスト量でデザインを決めるのは避けるべきです。文字数は、見出し、ラベル、ボタンなどのものがあります。それらは、本文やコメントなど自由に流れるテキストの問題ではありません。
-* 色がどのように認識されているかに注意します。色は言語や文化によって違って見えます。デザインは適切に色を使用する必要があります。
-* 日付と通貨の書式設定 - カレンダーの日付が異なる方法で表示されることがあります。例えば。米国の "May 31, 2012" とヨーロッパの "31 May 2012" です。
-* 翻訳された文字列を連結しない - `"今日の日付は" + date` のことです。異なる言語で単語の順序は変化するのです。かわりに各言語のパラメータ置換を伴うテンプレート文字列を使用します。たとえば、次の 2 つの文章をそれぞれ日本語と英語で見てみましょう： `私は{% date %}に旅行します` と `I will travel on {% date %}` です。変数の位置は、言語の文法規則によって異なることに注意する必要があります。
-* 言語の読む方向 - 英語では、左から右、上から下へ向かって読みますが、日本語では伝統的に、上から下へ、右から左へ向かって読みます。
+- HTML に `lang` 属性を使います。
+- ユーザーを母国語に誘導する - ユーザーが困難なく、国/言語を簡単に変更できるようにします。
+- 画像によるテキストを使用することはスケーラブルな方法ではない - 確かに画像にテキストを配置することは、システムに無い見栄えの良いフォントをあらゆるコンピュータに表示させるための一般的な方法です。しかし、画像によるテキストを翻訳するにはテキストごとに各言語用の別々の画像が必要になります。このような画像の変換はほんの少しならいいものの、増えてくるとすぐに管理できなくなってしまいます。
+- 制限的な言葉/文章の長さ - 別の言語で書くとコンテンツの長さが変わるので、デザインのレイアウトやオーバーフローの問題に注意します。テキスト量でデザインを決めるのは避けるべきです。文字数は、見出し、ラベル、ボタンなどのものがあります。それらは、本文やコメントなど自由に流れるテキストの問題ではありません。
+- 色がどのように認識されているかに注意します。色は言語や文化によって違って見えます。デザインは適切に色を使用する必要があります。
+- 日付と通貨の書式設定 - カレンダーの日付が異なる方法で表示されることがあります。例えば。米国の "May 31, 2012" とヨーロッパの "31 May 2012" です。
+- 翻訳された文字列を連結しない - `"今日の日付は" + date` のことです。異なる言語で単語の順序は変化するのです。かわりに各言語のパラメータ置換を伴うテンプレート文字列を使用します。たとえば、次の 2 つの文章をそれぞれ日本語と英語で見てみましょう： `私は{% date %}に旅行します` と `I will travel on {% date %}` です。変数の位置は、言語の文法規則によって異なることに注意する必要があります。
+- 言語の読む方向 - 英語では、左から右、上から下へ向かって読みますが、日本語では伝統的に、上から下へ、右から左へ向かって読みます。
 
 ###### 参考
 
-* https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
-
-[[↑] 先頭に戻る](#html-に関する質問)
+- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
 
 ### `data-` 属性は何のために使われるのですか？
 
@@ -67,65 +55,56 @@ JavaScript フレームワークが普及する前に、フロントエンドの
 
 ###### 参考
 
-* http://html5doctor.com/html5-custom-data-attributes/
-* https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
-
-[[↑] 先頭に戻る](#html-に関する質問)
+- http://html5doctor.com/html5-custom-data-attributes/
+- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
 
 ### HTML5 をオープンウェブプラットフォームとして考えたときに、HTML5 とはどんな要素から成るものですか？
 
-* セマンティクス - コンテンツを正確に記述できるようにします。
-* 接続性 - 新しく革新的な方法でサーバーと通信することができます。
-* オフラインとストレージ - ウェブページにクライアント側のデータをローカルに格納し、オフラインでより効率的に操作できるようにします。
-* マルチメディア - オープンウェブでビデオとオーディオを第一級オブジェクトにする。
-* 2D/3D グラフィックスとエフェクト - より多様なプレゼンテーションオプションを可能にします。
-* パフォーマンスと統合 - より高速な最適化とコンピュータハードウェアの使い方を提供します。
-* デバイスアクセス - さまざまな入出力デバイスの使用を許可します。
-* スタイリング - 製作者はより洗練されたテーマを書くことができます。
+- セマンティクス - コンテンツを正確に記述できるようにします。
+- 接続性 - 新しく革新的な方法でサーバーと通信することができます。
+- オフラインとストレージ - ウェブページにクライアント側のデータをローカルに格納し、オフラインでより効率的に操作できるようにします。
+- マルチメディア - オープンウェブでビデオとオーディオを第一級オブジェクトにする。
+- 2D/3D グラフィックスとエフェクト - より多様なプレゼンテーションオプションを可能にします。
+- パフォーマンスと統合 - より高速な最適化とコンピュータハードウェアの使い方を提供します。
+- デバイスアクセス - さまざまな入出力デバイスの使用を許可します。
+- スタイリング - 製作者はより洗練されたテーマを書くことができます。
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 (英語)
-* https://developer.mozilla.org/ja/docs/Web/HTML/HTML5 (日本語)
-
-[[↑] 先頭に戻る](#html-に関する質問)
+- https://developer.mozilla.org/en-US/docs/Glossary/HTML5 (英語)
 
 ### `cookie`、`sessionStorage`、`localStorage` の違いを教えてください。
 
 これらの技術は、クライアント側の key-value ストレージメカニズムです。彼らは文字列として値を格納することだけができます。
 
-|                                          | `cookie`                                                 | `localStorage` | `sessionStorage` |
-| ---------------------------------------- | -------------------------------------------------------- | -------------- | ---------------- |
-| イニシエータ                             | クライアントかサーバ。サーバは `Set-Cookie` ヘッダ使用可 | クライアント   | クライアント     |
-| 有効期限                                 | 手動で設定　                                             | 永続　         | タブを閉じるまで |
-| ブラウザセッション間で保持するか         | 有効期限が設定されているかどうかによって異なります       | はい           | いいえ           |
-| すべての HTTP リクエストでサーバーに送信 | クッキーは自動的に `Cookie` ヘッダ経由で送信されます     | いいえ         | いいえ           |
-| ドメインごとの容量                       | 4kB                                                      | 5MB            | 5MB              |
-| アクセシビリティ                         | ウィンドウ全て                                           | ウィンドウ全て | 同じタブ         |
+|  | `cookie` | `localStorage` | `sessionStorage` |
+| --- | --- | --- | --- |
+| イニシエータ | クライアントかサーバ。サーバは `Set-Cookie` ヘッダ使用可 | クライアント | クライアント |
+| 有効期限 | 手動で設定　 | 永続　 | タブを閉じるまで |
+| ブラウザセッション間で保持するか | 有効期限が設定されているかどうかによって異なります | はい | いいえ |
+| すべての HTTP リクエストでサーバーに送信 | クッキーは自動的に `Cookie` ヘッダ経由で送信されます | いいえ | いいえ |
+| ドメインごとの容量 | 4kB | 5MB | 5MB |
+| アクセシビリティ | ウィンドウ全て | ウィンドウ全て | 同じタブ |
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies (英語)
-* https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies (日本語)
-* http://tutorial.techaltum.com/local-and-session-storage.html
-
-[[↑] 先頭に戻る](#html-に関する質問)
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies (英語)
+- https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies (日本語)
+- http://tutorial.techaltum.com/local-and-session-storage.html
 
 ### `<script>`、`<script async>`、`<script defer>` の違いを教えてください。
 
-* `<script>` - HTML 解析がブロックされ、スクリプトがフェッチされてすぐに実行され、スクリプトの実行後に HTML 解析が再開されます。
-* `<script async>` - スクリプトは HTML 解析と並行して取得され、利用可能になるとすぐに（HTML 解析が完了する前に）実行されます。スクリプトがページ上の他のスクリプト（アナリティックスなど）と独立している場合は、`async` を使用します。
-* `<script defer>` - スクリプトは HTML 解析と並行して取得され、ページの解析が完了すると実行されます。複数のスクリプトがある場合、各遅延スクリプトはドキュメント内で遭遇した順序で実行されます。スクリプトが完全に解析された DOM に依存している場合、`defer` 属性は HTML が実行前に完全に解析されることを保証するのに役立ちます。`<body>` の最後に通常の `<script>` を置くことと大した違いはありません。遅延されたスクリプトは `document.write` を含んではいけません。
+- `<script>` - HTML 解析がブロックされ、スクリプトがフェッチされてすぐに実行され、スクリプトの実行後に HTML 解析が再開されます。
+- `<script async>` - スクリプトは HTML 解析と並行して取得され、利用可能になるとすぐに（HTML 解析が完了する前に）実行されます。スクリプトがページ上の他のスクリプト（アナリティックスなど）と独立している場合は、`async` を使用します。
+- `<script defer>` - スクリプトは HTML 解析と並行して取得され、ページの解析が完了すると実行されます。複数のスクリプトがある場合、各遅延スクリプトはドキュメント内で遭遇した順序で実行されます。スクリプトが完全に解析された DOM に依存している場合、`defer` 属性は HTML が実行前に完全に解析されることを保証するのに役立ちます。`<body>` の最後に通常の `<script>` を置くことと大した違いはありません。遅延されたスクリプトは `document.write` を含んではいけません。
 
 注意： `src` 属性を持たないスクリプトでは `async` と `defer` 属性は無視されます。
 
 ###### 参考
 
-* http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
-* https://stackoverflow.com/questions/10808109/script-tag-async-defer
-* https://bitsofco.de/async-vs-defer/
-
-[[↑] 先頭に戻る](#html-に関する質問)
+- http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
+- https://stackoverflow.com/questions/10808109/script-tag-async-defer
+- https://bitsofco.de/async-vs-defer/
 
 ### なぜ一般的に、CSS の `<link>` を `<head></head>` の間に、JS の `<script>` を `</body>` の直前に置くことが良いと言われているのでしょうか？こうすべきでない例外を知っていますか？
 
@@ -141,9 +120,7 @@ JavaScript フレームワークが普及する前に、フロントエンドの
 
 ###### 参考
 
-* https://developer.yahoo.com/performance/rules.html#css_top
-
-[[↑] 先頭に戻る](#html-に関する質問)
+- https://developer.yahoo.com/performance/rules.html#css_top
 
 ### プログレッシブレンダリングとは何ですか？
 
@@ -153,24 +130,22 @@ JavaScript フレームワークが普及する前に、フロントエンドの
 
 このような技術の例：
 
-* 画像の遅延読み込み - ページ上の画像が一度に読み込まれないようにします。ユーザーが画像を表示するページの部分にスクロールすると、JavaScript が使用されて画像がロードされます。
-* 目に見えるコンテンツの優先順位付け（または折り畳みの上のレンダリング） - できるだけ早く表示するためにユーザーのブラウザでレンダリングされるページの量に必要な最小の CSS/コンテンツ/スクリプトのみを含める。スクリプトを呼び出すか、`DOMContentLoaded`/`load` イベントが他のリソースやコンテンツを読み込むのを待ちます。
-* 非同期 HTML フラグメント - HTML の一部をブラウザにフラッシュし、ページがバックエンド上に構築されます。この技術の詳細は[こちら](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)にあります。
-
-###### References
+- 画像の遅延読み込み - ページ上の画像が一度に読み込まれないようにします。ユーザーが画像を表示するページの部分にスクロールすると、JavaScript が使用されて画像がロードされます。
+- 目に見えるコンテンツの優先順位付け（または折り畳みの上のレンダリング） - できるだけ早く表示するためにユーザーのブラウザでレンダリングされるページの量に必要な最小の CSS/コンテンツ/スクリプトのみを含める。スクリプトを呼び出すか、`DOMContentLoaded`/`load` イベントが他のリソースやコンテンツを読み込むのを待ちます。
+- 非同期 HTML フラグメント - HTML の一部をブラウザにフラッシュし、ページがバックエンド上に構築されます。この技術の詳細は[こちら](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)にあります。
 
-* https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
-* http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
+#### References
 
-[[↑] 先頭に戻る](#html-に関する質問)
+- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
+- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
 
 ### img タグに `srcset` 属性を使用する理由は？この属性をもつ要素を評価するときにブラウザが行うプロセスを説明してください。
 
 デバイスの表示幅に応じて異なるイメージをユーザーに提供したい場合は、`srcset` 属性を使用します。Retina ディスプレイに高品質のイメージを表示することでユーザー体験を向上させ、ローエンドのデバイスに低解像度のイメージを提供することでパフォーマンスとデータ量削減に貢献します（ローエンドでは高品質イメージを提供しても綺麗になりません）。例：`<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` はブラウザに小、中、大のいずれかを表示するように指示します。クライアントの解像度に応じて「jpg」グラフィックを表示します。最初の値はイメージ名で、2 番目の値はイメージのピクセル単位の幅です。320px のデバイス幅の場合、次の計算が行われます。
 
-* 500/320 = 1.5625
-* 1000/320 = 3.125
-* 2000/320 = 6.25
+- 500/320 = 1.5625
+- 1000/320 = 3.125
+- 2000/320 = 6.25
 
 クライアントの解像度が 1x の場合、1.5625 が最も近く、`small.jpg` に対応する `500w` がブラウザによって選択されます。
 
@@ -180,20 +155,14 @@ JavaScript フレームワークが普及する前に、フロントエンドの
 
 ###### 参考
 
-* https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
-* http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
-
-[[↑] 先頭に戻る](#html-に関する質問)
+- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
+- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
 
 ### HTML テンプレート言語をいくつか使用した経験はありますか？
 
 はい。例をあげると、Pug (旧 Jade)、ERB、Slim、Handlebars、Jinja、Liquid を使ったことがあります。私の意見では、これらはおおよそ同じようなものであり、表示されるデータを操作するためのエスケープするコンテンツや役立つフィルタと同様の機能を提供します。ほとんどのテンプレートエンジンでは、表示前にカスタム処理が必要なイベントに独自のフィルタを挿入することもできます。
 
-[[↑] 先頭に戻る](#html-に関する質問)
-
 ### 他の方の回答集
 
-* https://neal.codes/blog/front-end-interview-questions-html/
-* http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
-
----
+- https://neal.codes/blog/front-end-interview-questions-html/
+- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
diff --git a/Translations/Japanese/questions/javascript-questions.md b/website/i18n/ja-JP/docusaurus-plugin-content-docs/current/javascript-questions.md
similarity index 68%
rename from Translations/Japanese/questions/javascript-questions.md
rename to website/i18n/ja-JP/docusaurus-plugin-content-docs/current/javascript-questions.md
index 91c00671d1..19539fd4c7 100644
--- a/Translations/Japanese/questions/javascript-questions.md
+++ b/website/i18n/ja-JP/docusaurus-plugin-content-docs/current/javascript-questions.md
@@ -1,79 +1,28 @@
-# JS に関する質問
-
-[Front-end Job Interview Questions - JS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/javascript-questions.md) の回答集です。提案や訂正のプルリクエストは大歓迎です！
-
-* [イベントデリゲーションについて説明してください。](#イベントデリゲーションについて説明してください)
-* [JavaScript の `this` はどう機能するものなのか説明してください。](#javascript-の-this-はどう機能するものなのか説明してください)
-* [プロトタイプ継承はどのように機能するか説明してください。](#プロトタイプ継承はどのように機能するか説明してください)
-* [AMD と CommonJS は何が違いますか？](#amd-と-commonjs-は何が違いますか)
-* [なぜ次のコードは IIFE として機能しないのでしょうか？:`function foo(){ }();` IIFE として機能させるには何を変える必要がありますか？](#なぜ次のコードは-iife-として機能しないのでしょうかfunction-foo--iife-として機能させるには何を変える必要がありますか)
-* [変数が `null`、`undefined`、未定義だったときの違いはなんでしょう？どのようにして、これらの状態を調べますか？](#変数が-nullundefined未定義だったときの違いはなんでしょうどのようにしてこれらの状態を調べますか)
-* [クロージャとはなんですか？また、なぜこれを使うのでしょうか？どのように使うのでしょうか？](#クロージャとはなんですかまたなぜこれを使うのでしょうかどのように使うのでしょうか)
-* [`.forEach` と `.map()` の違いを説明できますか？これらをどのように使い分けますか？](#foreach-と-map-の違いを説明できますかこれらをどのように使い分けますか)
-* [無名関数の典型的な使い方を教えてください。](#無名関数の典型的な使い方を教えてください)
-* [どのようなことを意識してコードを組み立てていますか？（モジュールパターン, classical inheritance？）](#どのようなことを意識してコードを組み立てていますか-モジュールパターン-classical-inheritance)
-* [host objects と native objects は何が違いますか？](#host-objects-と-native-objects-は何が違いますか)
-* [次のコードの違いはなんですか？:`function Person(){}` 後、`var person = Person()` と `var person = new Person()`](#次のコードの違いはなんですか-function-person-後var-person--person-と-var-person--new-person)
-* [`.call` と `.apply` の違いはなんですか？](#call-と-apply-の違いはなんですか)
-* [`Function.prototype.bind` について説明してください。](#functionprototypebind-について説明してください)
-* [`document.write()` はいつ使いますか？](#documentwrite-はいつ使いますか)
-* [feature detection, feature inference, and using the UA string の違いはなんですか？](#feature-detection-feature-inference-and-using-the-ua-string-の違いはなんですか)
-* [Ajax をできるだけ詳しく説明してください。](#ajax-をできるだけ詳しく説明してください)
-* [Ajax を利用する利点を欠点はなんですか？](#ajax-を利用する利点を欠点はなんですか)
-* [JSONP がどのように機能するか（またそれが Ajax とはどこが違うのか）を説明してください。](#jsonp-がどのように機能するかまたそれが-ajax-とはどこが違うのかを説明してください)
-* [JavaScript templating を使ったことがありますか？ もしあれば、どのライブラリを使ったことがありますか？](#javascript-templating-を使ったことがありますか-もしあればどのライブラリを使ったことがありますか)
-* ["巻き上げ"について説明してください。](#巻き上げについて説明してください)
-* [event bubbling について教えてください。](#event-bubbling-について教えてください)
-* ["attribute" と "property" の違いを説明してください。](#attribute-と-property-の違いを説明してください)
-* [ビルトインオブジェクトを拡張することはなぜ良くないのでしょうか？](#ビルトインオブジェクトを拡張することはなぜ良くないのでしょうか)
-* [document `load` event と document `DOMContentLoaded` event の違いは？](#document-load-event-と-document-domcontentloaded-event-の違いは)
-* [`==` と `===` の違いはなんですか？](#-と--の違いはなんですか)
-* [JavaScript の同一オリジンポリシーについて説明してください。](#javascript-の同一オリジンポリシーについて説明してください)
-* [以下のコードを動くようにしてください: `duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]`](#以下のコードを動くようにしてください)
-* [それが　 Ternary expression と呼ばれるのはなぜですか？ "Ternary" はどういう意味で使われているのでしょうか？](#それがternary-expression-と呼ばれるのはなぜですか-ternary-はどういう意味で使われているのでしょうか)
-* [`"use strict";` とはなんですか？これを使う利点と欠点を教えてください。](#use-strict-とはなんですかこれを使う利点と欠点を教えてください)
-* [**"fizz"** を`3`の倍数で、**"buzz"** を`5`の倍数で、**"fizzbuzz"** を`3`と`5`の倍数で出力する`100`まで反復する for ループを作成してください。](#fizz-を3の倍数でbuzz-を5の倍数でfizzbuzz-を3と5の倍数で出力する100まで反復する-for-ループを作成してください)
-* [Web サイトのグローバルスコープをそのままの状態を保ち、決して触らないことが、一般的に良いとされているのはなぜですか？](#web-サイトのグローバルスコープをそのままの状態を保ち決して触らないことが一般的に良いとされているのはなぜですか)
-* [なぜあなたは `load` イベントのようなものを使うのですか？このイベントには欠点がありますか？あなたは何か選択肢を知っていますか、なぜそれらを使うのですか？](#なぜあなたは-load-イベントのようなものを使うのですかこのイベントには欠点がありますかあなたは何か選択肢を知っていますかなぜそれらを使うのですか)
-* [シングルページアプリが何であるか、そして SEO に優しいアプリを作る方法を説明してください。](#シングルページアプリが何であるかそして-seo-に優しいアプリを作る方法を説明してください)
-* [プロミスおよび/またはそのポリフィルの経験はどの程度ですか？](#プロミスおよびまたはそのポリフィルの経験はどの程度ですか)
-* [コールバックの代わりにプロミスを使用することの長所と短所は何ですか？](#コールバックの代わりにプロミスを使用することの長所と短所は何ですか)
-* [JavaScript にコンパイルしてくれる言語で JavaScript を書く利点と欠点をいくつか教えてください。](#javascript-にコンパイルしてくれる言語で-javascript-を書く利点と欠点をいくつか教えてください)
-* [JavaScript のコードをデバッグする際にはどんなツールや技術をを利用しますか？](#javascript-のコードをデバッグする際にはどんなツールや技術をを利用しますか)
-* [オブジェクトのプロパティや、配列の要素をイテレートする際にどの構文を使いますか？](#オブジェクトのプロパティや配列の要素をイテレートする際にどの構文を使いますか)
-* [mutable と immutable オブジェクトの違いを説明してください](#mutable-と-immutable-オブジェクトの違いを説明してください)
-* [synchronous と asynchronous functions の違いを説明してください。](#synchronous-と-asynchronous-functions-の違いを説明してください)
-* [event loop とはなんですか？call stack や task queue との違いはなんですか？](#event-loop-とはなんですかcall-stack-や-task-queue-との違いはなんですか)
-* [`function foo() {}` と `var foo = function() {}` をした場合の `foo` の使い方の違いを説明してください。](#function-foo--と-var-foo--function--をした場合の-foo-の使い方の違いを説明してください)
-* [`let` と `var` と `const` で宣言した変数の違いはなんですか？](#let-と-var-と-const-で宣言した変数の違いはなんですか)
-* [ES6 のクラス定義と、ES5 のコンストラクタ関数との違いには何がありますか？](#es6-のクラス定義とes5-のコンストラクタ関数との違いには何がありますか)
-* [アロー構文の使い方を例示してください。この構文と他の方法による定義とは何が違いますか？](#アロー構文の使い方を例示してくださいこの構文と他の方法による定義とは何が違いますか)
-* [コンストラクタにおいて、メソッドをアロー構文で定義する方法の利点はなんですか？](#コンストラクタにおいてメソッドをアロー構文で定義する方法の利点はなんですか)
-* [高階関数とはなんですか？](#高階関数とはなんですか)
-* [オブジェクトと配列について、「分割代入」の例を教えてください。](#オブジェクトと配列について分割代入の例を教えてください)
-* [ES6 のテンプレート文字列は文字列を作り出す上で様々な柔軟性をもたらしますが、例を示すことはできますか？](#es6-のテンプレート文字列は文字列を作り出す上で様々な柔軟性をもたらしますが例を示すことはできますか)
-* [カリー化の例を説明してください。またカリー化がもたらす利点はどこにあるのでしょうか？](#カリー化の例を説明してくださいまたカリー化がもたらす利点はどこにあるのでしょうか)
-* [spread syntax を利用する利点はなんですか？また、rest syntax とは何が違っていますか？](#spread-syntax-を利用する利点はなんですかまたrest-syntax-とは何が違っていますか)
-* [ファイル間でコードを共有するにはどうすれば良いですか？](#ファイル間でコードを共有するにはどうすれば良いですか)
-* [静的クラスメンバーはどんな場面で使いますか？](#静的クラスメンバーはどんな場面で使いますか)
+---
+title: JavaScript に関する質問
+---
+
+[Front-end Job Interview Questions - JS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/javascript-questions.md) の回答集です。提案や訂正のプルリクエストは大歓迎です！
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
 
 ### イベントデリゲーションについて説明してください。
 
 イベントデリゲーションは、イベントリスナーを子要素に追加するのではなく、親要素に追加する手法です。リスナーは子孫要素でイベントがトリガーされるたびに発生します。これはイベントが DOM を登ってくるためです。この手法の利点は次のとおりです。
 
-* 子孫ごとにイベントハンドラーをアタッチするのではなく親要素に 1 つのハンドラーしか必要ないため、メモリの使用量が減少します。
-* 削除された要素からハンドラをはずしたり、新しい要素にイベントをつける必要がなくなります。
+- 子孫ごとにイベントハンドラーをアタッチするのではなく親要素に 1 つのハンドラーしか必要ないため、メモリの使用量が減少します。
+- 削除された要素からハンドラをはずしたり、新しい要素にイベントをつける必要がなくなります。
 
 ###### 参考
 
-* https://davidwalsh.name/event-delegate
-* https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://davidwalsh.name/event-delegate
+- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
 
 ### JavaScript の `this` はどう機能するものなのか説明してください。
 
-`this` の簡単な説明はありません。それは JavaScript の最も混乱しやすい概念の 1 つです。手のひら波の説明は、`this` の値が関数の呼び出し方法に依存するということです。私はこのオンラインで多くの説明を読んでおり、[Arnav Aggrawal]（https://medium.com/@arnav_aggarwal）の説明が最も明白であることがわかりました。次のルールが適用されます。
+`this` の簡単な説明はありません。それは JavaScript の最も混乱しやすい概念の 1 つです。手のひら波の説明は、`this` の値が関数の呼び出し方法に依存するということです。私はこのオンラインで多くの説明を読んでおり、[Arnav Aggrawal](https://medium.com/@arnav_aggarwal)の説明が最も明白であることがわかりました。次のルールが適用されます。
 
 1. 関数を呼び出すときに `new` キーワードが使用されている場合、関数内の `this` は全く新しいオブジェクトです。
 2. `apply`、`call`、`bind` を使って関数を呼び出す/作成する場合、関数内の `this` は引数として渡されるオブジェクトです。
@@ -86,21 +35,17 @@
 
 ###### 参考
 
-* https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
-* https://stackoverflow.com/a/3127440/1751946
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
+- https://stackoverflow.com/a/3127440/1751946
 
 ### プロトタイプ継承はどのように機能するか説明してください。
 
-これは非常によくある JavaScript インタビューの質問です。すべての JavaScript オブジェクトには、別のオブジェクトへの参照である `prototype` プロパティがあります。プロパティがオブジェクト上でアクセスされ、プロパティがそのオブジェクトに見つからない場合、JavaScript エンジンはオブジェクトの `prototype` と `prototype` の `prototype` などを調べて、プロパティが定義されるまで探します。プロトタイプチェーンの最後に到達するまで、この動作は古典的な継承をシミュレートしますが、実際は継承よりも委譲されています （[delegation than inheritance](https://davidwalsh.name/javascript-objects)）。
+これは非常によくある JavaScript インタビューの質問です。すべての JavaScript オブジェクトには、別のオブジェクトへの参照である `__proto__` プロパティがあります。プロパティがオブジェクト上でアクセスされ、プロパティがそのオブジェクトに見つからない場合、JavaScript エンジンはオブジェクトの `__proto__` と `__proto__` の `__proto__` などを調べて、プロパティが定義されるまで探します。プロトタイプチェーンの最後に到達するまで、この動作は古典的な継承をシミュレートしますが、実際は継承よりも委譲されています （[delegation than inheritance](https://davidwalsh.name/javascript-objects)）。
 
 ###### 参考
 
-* https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
-* https://davidwalsh.name/javascript-objects
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
+- https://davidwalsh.name/javascript-objects
 
 ### AMD と CommonJS は何が違いますか？
 
@@ -112,10 +57,8 @@
 
 ###### 参考
 
-* https://auth0.com/blog/javascript-module-systems-showdown/
-* https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://auth0.com/blog/javascript-module-systems-showdown/
+- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
 
 ### なぜ次のコードは IIFE として機能しないのでしょうか？:`function foo(){ }();` IIFE として機能させるには何を変える必要がありますか？
 
@@ -125,9 +68,7 @@ IIFE は、Immediately Invoked Function Expressions の略です。JavaScript 
 
 ###### 参考
 
-* http://lucybain.com/blog/2014/immediately-invoked-function-expression/
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
 
 ### 変数が `null`、`undefined`、未定義だったときの違いはなんでしょう？どのようにして、これらの状態を調べますか？
 
@@ -170,11 +111,9 @@ console.log(foo == undefined); // true. Wrong, don't use this to check!
 
 ###### 参考
 
-* https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
-* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined (英語)
-* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined (日本語)
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined (英語)
+- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined (日本語)
 
 ### クロージャとはなんですか？また、なぜこれを使うのでしょうか？どのように使うのでしょうか？
 
@@ -182,15 +121,13 @@ console.log(foo == undefined); // true. Wrong, don't use this to check!
 
 **なぜそれを使うのか？**
 
-* データのプライバシー/クロージャによるプライベートメソッドのエミュレート。[モジュールパターン](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript)でよく使われる。
-* [Partial applications or currying](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x)
+- データのプライバシー/クロージャによるプライベートメソッドのエミュレート。[モジュールパターン](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript)でよく使われる。
+- [Partial applications or currying](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x)
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
-* https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
+- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
 
 ### `.forEach` と `.map()` の違いを説明できますか？これらをどのように使い分けますか？
 
@@ -198,9 +135,9 @@ console.log(foo == undefined); // true. Wrong, don't use this to check!
 
 **`forEach`**
 
-* 配列内の要素を反復処理します。
-* 各要素のコールバックを実行します。
-* 値を返しません。
+- 配列内の要素を反復処理します。
+- 各要素のコールバックを実行します。
+- 値を返しません。
 
 ```js
 const a = [1, 2, 3];
@@ -213,12 +150,12 @@ const doubled = a.forEach((num, index) => {
 
 **`map`**
 
-* 配列内の要素を反復処理します。
-* 各要素の関数を呼び出し、結果として新しい配列を作成して、各要素を新しい要素にマップします。
+- 配列内の要素を反復処理します。
+- 各要素の関数を呼び出し、結果として新しい配列を作成して、各要素を新しい要素にマップします。
 
 ```js
 const a = [1, 2, 3];
-const doubled = a.map(num => {
+const doubled = a.map((num) => {
   return num * 2;
 });
 
@@ -229,16 +166,14 @@ const doubled = a.map(num => {
 
 ###### 参考
 
-* https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
 
 ### 無名関数の典型的な使い方を教えてください。
 
 IIFE では、ローカルスコープ内でコードをカプセル化して、その中で宣言された変数がグローバルスコープに漏れないようにすることができます。
 
 ```js
-(function() {
+(function () {
   // Some code here.
 })();
 ```
@@ -246,7 +181,7 @@ IIFE では、ローカルスコープ内でコードをカプセル化して、
 一度使用され、他の場所で使用する必要がないコールバックです。関数本体を見つけるために他の場所を検索する必要がなく、コードを呼び出すコードの中でハンドラが定義されていると、コードはより自蔵的で読みやすいように見えます。
 
 ```js
-setTimeout(function() {
+setTimeout(function () {
   console.log('Hello world!');
 }, 1000);
 ```
@@ -255,7 +190,7 @@ setTimeout(function() {
 
 ```js
 const arr = [1, 2, 3];
-const double = arr.map(function(el) {
+const double = arr.map(function (el) {
   return el * 2;
 });
 console.log(double); // [2, 4, 6]
@@ -263,10 +198,8 @@ console.log(double); // [2, 4, 6]
 
 ###### 参考
 
-* https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
-* https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
+- https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
 
 ### どのようなことを意識してコードを組み立てていますか？ (モジュールパターン, classical inheritance？)
 
@@ -276,8 +209,6 @@ console.log(double); // [2, 4, 6]
 
 私は可能な限り古典的な継承を避けます。私がそうすると、[これらの規則](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4)に固執します。
 
-[[↑] 先頭に戻る](#js-に関する質問)
-
 ### host objects と native objects は何が違いますか？
 
 ネイティブオブジェクトは、`String`、`Math`、`RegExp`、`Object`、`Function` など、ECMAScript 仕様で定義された JavaScript 言語の一部であるオブジェクトです。
@@ -286,9 +217,7 @@ console.log(double); // [2, 4, 6]
 
 ###### 参考
 
-* https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
 
 ### 次のコードの違いはなんですか？: `function Person(){}` 後、`var person = Person()` と `var person = new Person()`
 
@@ -314,10 +243,8 @@ console.log(person.name); // "john"
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new (英語)
-* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/new (日本語)
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new (英語)
+- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/new (日本語)
 
 ### `.call` と `.apply` の違いはなんですか？
 
@@ -332,8 +259,6 @@ console.log(add.call(null, 1, 2)); // 3
 console.log(add.apply(null, [1, 2])); // 3
 ```
 
-[[↑] 先頭に戻る](#js-に関する質問)
-
 ### `Function.prototype.bind` について説明してください。
 
 [MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) から word-for-word を取り出しました：
@@ -344,10 +269,8 @@ console.log(add.apply(null, [1, 2])); // 3
 
 ###### 参考
 
-* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind (英語)
-* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind (日本語)
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind (英語)
+- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind (日本語)
 
 ### `document.write()` はいつ使いますか？
 
@@ -357,10 +280,8 @@ console.log(add.apply(null, [1, 2])); // 3
 
 ###### 参考
 
-* https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
-* https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
+- https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
 
 ### feature detection, feature inference, and using the UA string の違いはなんですか？
 
@@ -388,7 +309,7 @@ if (document.getElementsByTagName) {
 }
 ```
 
-This is not really recommended. Feature detection is more foolproof.
+これはあまり推奨されません。フィーチャの検出の方がより確実です。
 
 **UA String**
 
@@ -396,45 +317,39 @@ This is not really recommended. Feature detection is more foolproof.
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection (英語)
-* https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection (日本語)
-* https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
-* https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent (英語)
-* https://developer.mozilla.org/ja/docs/Web/HTTP/Browser_detection_using_the_user_agent (日本語)
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection (英語)
+- https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection (日本語)
+- https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent (英語)
+- https://developer.mozilla.org/ja/docs/Web/HTTP/Browser_detection_using_the_user_agent (日本語)
 
 ### Ajax をできるだけ詳しく説明してください。
 
 Ajax（非同期 JavaScript と XML）は、クライアント側で多くの Web テクノロジを使用して非同期 Web アプリケーションを作成する一連の Web 開発手法です。Ajax を使用すると、Web アプリケーションは、既存のページの表示や動作を妨げずに、バックグラウンドで非同期的にサーバーにデータを送信し、サーバーから取得することができます。Ajax は、データ交換レイヤーをプレゼンテーション・レイヤーから切り離すことにより、Web ページ、さらには Web アプリケーションに対して、ページ全体を再ロードせずにコンテンツを動的に変更できるようにします。実際には、現代の実装では、XML を JSON に置き換えるのが一般的です。これは、JavaScript 固有のメリットがあるからです。
 
-`XMLHttpRequest` API は、非同期通信や最近の `fetch` API のためによく使われます。
+`XMLHttpRequest` API は、非同期通信や最近の `fetch()` API のためによく使われます。
 
 ###### 参考
 
-* https://en.wikipedia.org/wiki/Ajax_(programming)
-* https://developer.mozilla.org/en-US/docs/AJAX (英語)
-* https://developer.mozilla.org/ja/docs/AJAX (日本語)
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://en.wikipedia.org/wiki/Ajax_(programming)
+- https://developer.mozilla.org/en-US/docs/AJAX (英語)
+- https://developer.mozilla.org/ja/docs/AJAX (日本語)
 
-### Ajax を利用する利点を欠点はなんですか？
+### Ajax を利用する利点と欠点はなんですか？
 
 **利点**
 
-* より良い対話性。サーバーからの新しいコンテンツは、ページ全体をリロードする必要なく動的に変更できます。
-* スクリプトとスタイルシートは一度しか要求されないので、サーバへの接続を減らす。
-* 状態はページ上で維持することができます。メインのコンテナページがリロードされなかったため、JavaScript 変数と DOM 状態は保持されます。
-* 基本的に SPA の利点のほとんど。
+- より良い対話性。サーバーからの新しいコンテンツは、ページ全体をリロードする必要なく動的に変更できます。
+- スクリプトとスタイルシートは一度しか要求されないので、サーバへの接続を減らす。
+- 状態はページ上で維持することができます。メインのコンテナページがリロードされなかったため、JavaScript 変数と DOM 状態は保持されます。
+- 基本的に SPA の利点のほとんど。
 
 **欠点**
 
-* 動的なウェブページはブックマークするのが難しいです。
-* ブラウザで JavaScript が無効になっていると機能しません。
-* 一部の Webcrawler は JavaScript を実行しないため、JavaScript によって読み込まれたコンテンツは表示されません。
-* SPA の基本的な欠点。
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- 動的なウェブページはブックマークするのが難しいです。
+- ブラウザで JavaScript が無効になっていると機能しません。
+- 一部の Webcrawler は JavaScript を実行しないため、JavaScript によって読み込まれたコンテンツは表示されません。
+- SPA の基本的な欠点。
 
 ### JSONP がどのように機能するか（またそれが Ajax とはどこが違うのか）を説明してください。
 
@@ -445,9 +360,9 @@ JSONP は、`<script>` タグを介してクロスオリジンドメインにリ
 ```html
 <!-- https://mydomain.com -->
 <script>
-function printData(data) {
-  console.log(`My name is ${data.name}!`);
-}
+  function printData(data) {
+    console.log(`My name is ${data.name}!`);
+  }
 </script>
 
 <script src="https://example.com?callback=printData"></script>
@@ -466,9 +381,7 @@ JSONP は安全ではなく、セキュリティ上の問題もあります。JS
 
 ###### 参考
 
-* https://stackoverflow.com/a/2067584/1751946
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://stackoverflow.com/a/2067584/1751946
 
 ### JavaScript templating を使ったことがありますか？ もしあれば、どのライブラリを使ったことがありますか？
 
@@ -480,8 +393,6 @@ const template = `<div>My name is: ${name}</div>`;
 
 ただし、上記のアプローチでは、テンプレートライブラリとは異なり、コンテンツがエスケープされない可能性があるため、潜在的な XSS に注意してください。
 
-[[↑] 先頭に戻る](#js-に関する質問)
-
 ### "巻き上げ"について説明してください。
 
 巻き上げは、コード内の変数宣言の動作を説明するために使用される用語です。`var` キーワードで宣言または初期化された変数の宣言は、現在のスコープの先頭まで "巻き上げ"されます。しかし、宣言だけが吊り上げられ、譲渡（存在する場合）がその場所にとどまります。いくつかの例をあげて説明しましょう。
@@ -512,20 +423,16 @@ console.log(foo); // [Function: foo]
 // Function Expression
 console.log(bar); // undefined
 bar(); // Uncaught TypeError: bar is not a function
-var bar = function() {
+var bar = function () {
   console.log('BARRRR');
 };
 console.log(bar); // [Function: bar]
 ```
 
-[[↑] 先頭に戻る](#js-に関する質問)
-
 ### event bubbling について教えてください。
 
 DOM エレメントでイベントがトリガーされると、リスナーが接続されている場合にイベントを処理しようとすると、そのイベントは親に浮上(bubble up)され、同じことが起こります。この泡立ちは、要素の先祖を `document` までずっと上げています。イベントの浮上(bubble up)は、イベントの委任の背後にあるメカニズムです。
 
-[[↑] 先頭に戻る](#js-に関する質問)
-
 ### "attribute" と "property" の違いを説明してください。
 
 属性は HTML マークアップで定義されますが、プロパティは DOM で定義されます。違いを説明するために、HTML にこのテキストフィールドがあるとします：`<input type="text" value="Hello">`
@@ -545,9 +452,7 @@ console.log(input.value); // Hello World!
 
 ###### 参考
 
-* https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
 
 ### ビルトインオブジェクトを拡張することはなぜ良くないのでしょうか？
 
@@ -557,9 +462,7 @@ console.log(input.value); // Hello World!
 
 ###### 参考
 
-* http://lucybain.com/blog/2014/js-extending-built-in-objects/
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- http://lucybain.com/blog/2014/js-extending-built-in-objects/
 
 ### document `load` event と document `DOMContentLoaded` event の違いは？
 
@@ -569,12 +472,10 @@ console.log(input.value); // Hello World!
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded (英語)
-* https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded (日本語)
-* https://developer.mozilla.org/en-US/docs/Web/Events/load (英語)
-* https://developer.mozilla.org/en-US/docs/Web/Events/load (日本語)
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded (英語)
+- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded (日本語)
+- https://developer.mozilla.org/en-US/docs/Web/Events/load (英語)
+- https://developer.mozilla.org/en-US/docs/Web/Events/load (日本語)
 
 ### `==` と `===` の違いはなんですか？
 
@@ -599,9 +500,7 @@ console.log(a == undefined); // true
 
 ###### 参考
 
-* https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
 
 ### JavaScript の同一オリジンポリシーについて説明してください。
 
@@ -609,9 +508,7 @@ console.log(a == undefined); // true
 
 ###### 参考
 
-* https://en.wikipedia.org/wiki/Same-origin_policy
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://en.wikipedia.org/wiki/Same-origin_policy
 
 ### 以下のコードを動くようにしてください:
 
@@ -627,18 +524,14 @@ function duplicate(arr) {
 duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
 ```
 
-[[↑] 先頭に戻る](#js-に関する質問)
-
 ### それが　 Ternary expression と呼ばれるのはなぜですか？ "Ternary" はどういう意味で使われているのでしょうか？
 
 "Ternary" は 3 つを示し、3 つの式は 3 つのオペランド、テスト条件、"then" 式および "else" 式を受け入れます。三項式は JavaScript に固有のものではなく、なぜこのリスト内にあるのかわかりません。
 
 ###### 参考
 
-* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator (英語)
-* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator (日本語)
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator (英語)
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator (日本語)
 
 ### `"use strict";` とはなんですか？これを使う利点と欠点を教えてください。
 
@@ -646,32 +539,30 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
 
 利点：
 
-* 誤ってグローバル変数を作成することは不可能になります。
-* 静かに例外をスローすることができない割り当てを行います。
-* 削除不可能なプロパティーの削除を試行させます（試行が効果を持たない前に）。
-* 関数のパラメータ名は一意である必要があります。
-* `this` はグローバルコンテキストでは未定義です。
-* 例外を投げて、いくつかの共通のコーディング・グロッパーを捕まえる。
-* それは、混乱しているか、または慎重に考えられていない機能を無効にします。
+- 誤ってグローバル変数を作成することは不可能になります。
+- 静かに例外をスローすることができない割り当てを行います。
+- 削除不可能なプロパティーの削除を試行させます（試行が効果を持たない前に）。
+- 関数のパラメータ名は一意である必要があります。
+- `this` はグローバルコンテキストでは未定義です。
+- 例外を投げて、いくつかの共通のコーディング・グロッパーを捕まえる。
+- それは、混乱しているか、または慎重に考えられていない機能を無効にします。
 
 欠点：
 
-* いくつかの開発者が慣れ親しかった欠けている機能がたくさんあります。
-* `function.caller` と `function.arguments` へのアクセスはもうありません。
-* 異なる厳密なモードで記述されたスクリプトを連結すると、問題が発生する可能性があります。
+- いくつかの開発者が慣れ親しかった欠けている機能がたくさんあります。
+- `function.caller` と `function.arguments` へのアクセスはもうありません。
+- 異なる厳密なモードで記述されたスクリプトを連結すると、問題が発生する可能性があります。
 
 全体的に、私は利点が欠点を上回っていると思うし、厳密なモードブロックという機能に頼る必要はなかった。私は厳密なモードを使用することをお勧めします。
 
 ###### 参考
 
-* http://2ality.com/2011/10/strict-mode-hatred.html
-* http://lucybain.com/blog/2014/js-use-strict/
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- http://2ality.com/2011/10/strict-mode-hatred.html
+- http://lucybain.com/blog/2014/js-use-strict/
 
 ### **"fizz"** を`3`の倍数で、**"buzz"** を`5`の倍数で、**"fizzbuzz"** を`3`と`5`の倍数で出力する`100`まで反復する for ループを作成してください。
 
-Check out this version of FizzBuzz by [Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724).
+[Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724) による FizzBuzz のこのバージョンを確認してください。
 
 ```js
 for (let i = 1; i <= 100; i++) {
@@ -685,16 +576,12 @@ for (let i = 1; i <= 100; i++) {
 
 ###### 参考
 
-* https://gist.github.com/jaysonrowe/1592432
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://gist.github.com/jaysonrowe/1592432
 
 ### Web サイトのグローバルスコープをそのままの状態を保ち、決して触らないことが、一般的に良いとされているのはなぜですか？
 
 すべてのスクリプトはグローバルスコープにアクセスできます。誰もが独自の変数を定義するためにグローバル名前空間を使用している場合、衝突が発生します。モジュールパターン（IIFE）を使用して、変数をローカル名前空間内にカプセル化します。
 
-[[↑] 先頭に戻る](#js-に関する質問)
-
 ### なぜあなたは `load` イベントのようなものを使うのですか？このイベントには欠点がありますか？あなたは何か選択肢を知っていますか、なぜそれらを使うのですか？
 
 `load` イベントは、ドキュメント読み込みプロセスの最後に発生します。この時点で、ドキュメント内のすべてのオブジェクトが DOM 内にあり、すべてのイメージ、スクリプト、リンク、およびサブフレームの読み込みが完了しています。
@@ -705,10 +592,8 @@ TODO.
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload (英語)
-* https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload (日本語)
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload (英語)
+- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload (日本語)
 
 ### シングルページアプリが何であるか、そして SEO に優しいアプリを作る方法を説明してください。
 
@@ -720,24 +605,22 @@ TODO.
 
 利点：
 
-* アプリの応答性が向上し、フルページのリフレッシュのためにページの移動の間にフラッシュが表示されないという問題がありました。
-* ページロードごとに同じアセットを再度ダウンロードする必要がないため、サーバーへの HTTP 要求が少なくなります。
-* クライアントとサーバーの間の問題の明確な分離。サーバーコードを変更することなく、さまざまなプラットフォーム（モバイル、チャットボット、スマートウォッチなど）の新しいクライアントを簡単に構築できます。また、API 契約が破られていない限り、クライアントとサーバーのテクノロジスタックを個別に変更することもできます。
+- アプリの応答性が向上し、フルページのリフレッシュのためにページの移動の間にフラッシュが表示されないという問題がありました。
+- ページロードごとに同じアセットを再度ダウンロードする必要がないため、サーバーへの HTTP 要求が少なくなります。
+- クライアントとサーバーの間の問題の明確な分離。サーバーコードを変更することなく、さまざまなプラットフォーム（モバイル、チャットボット、スマートウォッチなど）の新しいクライアントを簡単に構築できます。また、API 契約が破られていない限り、クライアントとサーバーのテクノロジスタックを個別に変更することもできます。
 
 欠点：
 
-* 複数のページに必要なフレームワーク、アプリケーションコード、およびアセットの読み込みによる最初のページ読み込みが重くなりました。
-* すべてのリクエストを単一のエントリポイントにルーティングし、そこからクライアント側のルーティングを引き継ぐように設定する追加のステップがサーバー上で実行されます。
-* SPA はコンテンツを表示するために JavaScript に依存していますが、すべての検索エンジンがクロール中に JavaScript を実行するわけではなく、ページ上に空のコンテンツが表示されることがあります。これは、誤ってあなたのアプリの検索エンジン最適化（SEO）を傷つけます。しかし、ほとんどの場合、アプリケーションを構築するときに、SEO はすべてのコンテンツが検索エンジンによってインデックスを作成する必要があるわけではないため、最も重要な要素ではありません。これを克服するには、アプリをサーバー側でレンダリングするか、[Prerender](https://prerender.io/) などのサービスを使用してブラウザの JavaScript をレンダリングし、静的 HTML を保存してクローラー。
+- 複数のページに必要なフレームワーク、アプリケーションコード、およびアセットの読み込みによる最初のページ読み込みが重くなりました。
+- すべてのリクエストを単一のエントリポイントにルーティングし、そこからクライアント側のルーティングを引き継ぐように設定する追加のステップがサーバー上で実行されます。
+- SPA はコンテンツを表示するために JavaScript に依存していますが、すべての検索エンジンがクロール中に JavaScript を実行するわけではなく、ページ上に空のコンテンツが表示されることがあります。これは、誤ってあなたのアプリの検索エンジン最適化（SEO）を傷つけます。しかし、ほとんどの場合、アプリケーションを構築するときに、SEO はすべてのコンテンツが検索エンジンによってインデックスを作成する必要があるわけではないため、最も重要な要素ではありません。これを克服するには、アプリをサーバー側でレンダリングするか、[Prerender](https://prerender.io/) などのサービスを使用してブラウザの JavaScript をレンダリングし、静的 HTML を保存してクローラー。
 
 ###### 参考
 
-* https://github.com/grab/front-end-guide#single-page-apps-spas
-* http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
-* http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
-* https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://github.com/grab/front-end-guide#single-page-apps-spas
+- http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
+- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
+- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
 
 ### プロミスおよび/またはそのポリフィルの経験はどの程度ですか？
 
@@ -747,24 +630,20 @@ TODO.
 
 ###### 参考
 
-* https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
 
 ### コールバックの代わりにプロミスを使用することの長所と短所は何ですか？
 
 **長所**
 
-* 読めないコールバック地獄は避けてください。
-* `.then()` で読めるシーケンシャルな非同期コードを書くのが簡単になります。
-* `Promise.all()` で並列非同期コードを書くのが簡単になります。
+- 読めないコールバック地獄は避けてください。
+- `.then()` で読めるシーケンシャルな非同期コードを書くのが簡単になります。
+- `Promise.all()` で並列非同期コードを書くのが簡単になります。
 
 **短所**
 
-* やや複雑なコード（議論の余地がある）。
-* ES2015 がサポートされていない古いブラウザでは、使用するためにポリフィルをロードする必要があります。
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- やや複雑なコード（議論の余地がある）。
+- ES2015 がサポートされていない古いブラウザでは、使用するためにポリフィルをロードする必要があります。
 
 ### JavaScript にコンパイルしてくれる言語で JavaScript を書く利点と欠点をいくつか教えてください。
 
@@ -772,79 +651,69 @@ JavaScript へコンパイルする言語には、CoffeeScript、Elm、ClojureSc
 
 利点：
 
-* JavaScript の長年にわたる問題のいくつかを修正し、JavaScript のアンチパターンを廃止しました。
-* JavaScript の上に文法的な砂糖を提供することで、短いコードを書くことができますが、ES5 はそれがないと思っていますが、ES2015 はすばらしいです。
-* 静的型は時間が経っても維持する必要のある大規模プロジェクトの場合は素晴らしいです（TypeScript の場合）。
+- JavaScript の長年にわたる問題のいくつかを修正し、JavaScript のアンチパターンを廃止しました。
+- JavaScript の上に文法的な砂糖を提供することで、短いコードを書くことができますが、ES5 はそれがないと思っていますが、ES2015 はすばらしいです。
+- 静的型は時間が経っても維持する必要のある大規模プロジェクトの場合は素晴らしいです（TypeScript の場合）。
 
 欠点：
 
-* ブラウザは JavaScript のみを実行するため、ビルド/コンパイルのプロセスを必要とし、ブラウザに提供する前にコードを JavaScript にコンパイルする必要があります。
-* ソースマップがあらかじめコンパイルされたソースにうまくマッピングされない場合、デバッグが苦しいことがあります。
-* ほとんどの開発者はこれらの言語に精通しておらず、それを学ぶ必要があります。プロジェクトに使用する場合、チームのコストが上昇します。
-* 小規模なコミュニティ（言語に依存します）。リソース、チュートリアル、図書館、ツールなどを見つけるのが難しくなります。
-* IDE/エディタのサポートが不足している可能性があります。
-* これらの言語は常に最新の JavaScript 標準より遅れています。
-* 開発者は、コードがコンパイルされていることを認識しておく必要があります。これは実際に実行されるコードであり、最終的に問題になります。
+- ブラウザは JavaScript のみを実行するため、ビルド/コンパイルのプロセスを必要とし、ブラウザに提供する前にコードを JavaScript にコンパイルする必要があります。
+- ソースマップがあらかじめコンパイルされたソースにうまくマッピングされない場合、デバッグが苦しいことがあります。
+- ほとんどの開発者はこれらの言語に精通しておらず、それを学ぶ必要があります。プロジェクトに使用する場合、チームのコストが上昇します。
+- 小規模なコミュニティ（言語に依存します）。リソース、チュートリアル、図書館、ツールなどを見つけるのが難しくなります。
+- IDE/エディタのサポートが不足している可能性があります。
+- これらの言語は常に最新の JavaScript 標準より遅れています。
+- 開発者は、コードがコンパイルされていることを認識しておく必要があります。これは実際に実行されるコードであり、最終的に問題になります。
 
 具体的には、ES2015 では JavaScript が大幅に改善され、はるかに書やすくなっています。私は最近 CoffeeScript の必要性を見ていません。
 
 ###### 参考
 
-* https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
 
 ### JavaScript のコードをデバッグする際にはどんなツールや技術をを利用しますか？
 
-* React and Redux
-  * [React Devtools](https://github.com/facebook/react-devtools)
-  * [Redux Devtools](https://github.com/gaearon/redux-devtools)
-* JavaScript
-  * [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)
-  * `debugger` statement
-  * Good old `console.log` debugging
+- React and Redux
+  - [React Devtools](https://github.com/facebook/react-devtools)
+  - [Redux Devtools](https://github.com/gaearon/redux-devtools)
+- JavaScript
+  - [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)
+  - `debugger` statement
+  - Good old `console.log` debugging
 
 ###### 参考
 
-* https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
-* https://raygun.com/blog/javascript-debugging/
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
+- https://raygun.com/blog/javascript-debugging/
 
 ### オブジェクトのプロパティや、配列の要素をイテレートする際にどの構文を使いますか？
 
 オブジェクトの場合：
 
-* `for` ループ用 - `for (var property in obj) { console.log(property); }`。ただし、これは継承されたプロパティを繰り返し処理するため、使用する前に `obj.hasOwnProperty(property）` チェックを追加します。
-* `Object.keys()` - `Object.keys(obj).forEach(function (property) { ... })`。`Object.keys()` は静的メソッドで、渡すオブジェクトのすべての列挙可能なプロパティをリストします。
-* `Object.getOwnPropertyNames()` - `Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`。`Object.getOwnPropertyNames()` は静的メソッドで、渡すオブジェクトのすべての列挙可能なプロパティと列挙可能でないプロパティをリストします。
+- `for` ループ用 - `for (var property in obj) { console.log(property); }`。ただし、これは継承されたプロパティを繰り返し処理するため、使用する前に `obj.hasOwnProperty(property）` チェックを追加します。
+- `Object.keys()` - `Object.keys(obj).forEach(function (property) { ... })`。`Object.keys()` は静的メソッドで、渡すオブジェクトのすべての列挙可能なプロパティをリストします。
+- `Object.getOwnPropertyNames()` - `Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`。`Object.getOwnPropertyNames()` は静的メソッドで、渡すオブジェクトのすべての列挙可能なプロパティと列挙可能でないプロパティをリストします。
 
 配列の場合：
 
-* `for` ループ - `for (var i = 0; i < arr.length; i++)`。ここでの一般的な落とし穴は、`var` は関数スコープであり、ブロックスコープではなく、ブロックスコープのイテレータ変数を使用したいと思うことです。ES2015 では、ブロックスコープを持つ `let` が導入されています。代わりにそのブロックを使用することをお勧めします。したがって、これは `for (let i = 0; i < arr.length; i++)` となります。
-* `forEach` - `arr.forEach(function (el, index) { ... })`。必要なのが配列要素であれば `index` を使う必要がないので、このコンストラクトは時に便利です。また、`every` と `some` メソッドもあります。これにより、早期に反復処理を終了させることができます。
+- `for` ループ - `for (var i = 0; i < arr.length; i++)`。ここでの一般的な落とし穴は、`var` は関数スコープであり、ブロックスコープではなく、ブロックスコープのイテレータ変数を使用したいと思うことです。ES2015 では、ブロックスコープを持つ `let` が導入されています。代わりにそのブロックを使用することをお勧めします。したがって、これは `for (let i = 0; i < arr.length; i++)` となります。
+- `forEach` - `arr.forEach(function (el, index) { ... })`。必要なのが配列要素であれば `index` を使う必要がないので、このコンストラクトは時に便利です。また、`every` と `some` メソッドもあります。これにより、早期に反復処理を終了させることができます。
 
 ほとんどの場合、私は `.forEach` メソッドを好むでしょうが、本当にあなたがしようとしているものに依存します。`for` ループは、より柔軟性を持たせます。たとえば、`break` を使ってループを早期に終了するか、ループごとにイテレータを複数回インクリメントします。
 
-[[↑] 先頭に戻る](#js-に関する質問)
-
 ### mutable と immutable オブジェクトの違いを説明してください
 
-* JavaScript の不変オブジェクトの例は何ですか？
-* 不変性の長所と短所は何ですか？
-* あなた自身のコードで不変性をどのように達成できますか？
+- JavaScript の不変オブジェクトの例は何ですか？
+- 不変性の長所と短所は何ですか？
+- あなた自身のコードで不変性をどのように達成できますか？
 
 TODO
 
-[[↑] 先頭に戻る](#js-に関する質問)
-
 ### synchronous と asynchronous functions の違いを説明してください。
 
-非同期関数が非同期関数ではなく、非同期関数がブロックされています。同期関数では、次のステートメントが実行される前にステートメントが完了します。この場合、プログラムはステートメントの順番で正確に評価され、ステートメントの 1 つが非常に長い場合、プログラムの実行は一時停止されます。
-
-非同期関数は、通常、パラメータとしてコールバックを受け入れ、非同期関数が呼び出された直後に次の行で実行を続けます。コールバックは、非同期操作が完了し、呼び出しスタックが空の場合にのみ呼び出されます。Web サーバーからのデータのロードやデータベースのクエリなどの大規模な操作は、非同期で実行する必要があります。これにより、メインスレッドは、完了するまでの長い操作がブロックされるのではなく、他の操作の実行を継続できます（ブラウザの場合、UI はフリーズします）。
+同期関数はブロッキングし、非同期関数はブロッキングしません。同期関数では、前のステートメントが終わってから次のステートメントが実行されます。この場合、プログラムはステートメントの記載されている順どおりに正確に評価され、もしあるステートメントで時間がかかるとプログラムの実行は一時停止します。
 
-[[↑] 先頭に戻る](#js-に関する質問)
+非同期関数は、通常コールバックをパラメータとして受け取り、非同期関数が呼ばれた後、直ちに次の行を実行します。コールバックは、非同期処理が完了し呼び出しスタックが空の場合にのみ呼び出されます。Web サーバーからのデータのロードやデータベースのクエリなどとても重い処理は非同期で実行すべきで、そうすることで、メインスレッドは長い処理が完了するまでブロッキングすることなく(ブラウザの場合、UI がフリーズします)、他の処理を継続して実行出来ます。
 
 ### event loop とはなんですか？call stack や task queue との違いはなんですか？
 
@@ -854,10 +723,8 @@ TODO
 
 ###### 参考
 
-* https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
-* http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
+- http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
 
 ### `function foo() {}` と `var foo = function() {}` をした場合の `foo` の使い方の違いを説明してください。
 
@@ -876,17 +743,15 @@ function foo() {
 
 ```js
 foo(); // Uncaught TypeError: foo is not a function
-var foo = function() {
+var foo = function () {
   console.log('FOOOOO');
 };
 ```
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function (英語)
-* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function (日本語)
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function (英語)
+- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function (日本語)
 
 ### `let` と `var` と `const` で宣言した変数の違いはなんですか？
 
@@ -964,32 +829,120 @@ baz = 'qux';
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let (英語)
-* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let (日本語)
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var (英語)
-* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var (英語)
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const (英語)
-* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const (日本語)
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let (英語)
+- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let (日本語)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var (英語)
+- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var (英語)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const (英語)
+- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const (日本語)
 
 ### ES6 のクラス定義と、ES5 のコンストラクタ関数との違いには何がありますか？
 
-TODO
+まずはそれぞれの例を見てみましょう。
 
-[[↑] 先頭に戻る](#js-に関する質問)
+```js
+// ES5 Function Constructor
+function Person(name) {
+  this.name = name;
+}
 
-### アロー構文の使い方を例示してください。この構文と他の方法による定義とは何が違いますか？
+// ES6 Class
+class Person {
+  constructor(name) {
+    this.name = name;
+  }
+}
+```
 
-TODO
+単純なコンストラクタの場合、見た目はよく似ています。
+
+コンストラクタの主な違いは継承を使う場合です。`Person`をサブクラス化した Student クラスを作成して`studentId` フィールドを追加したい場合は、上記に加えて以下のようにしなければなりません。
+
+```js
+// ES5 Function Constructor
+function Student(name, studentId) {
+  // Call constructor of superclass to initialize superclass-derived members.
+  Person.call(this, name);
+
+  // Initialize subclass's own members.
+  this.studentId = studentId;
+}
 
-[[↑] 先頭に戻る](#js-に関する質問)
+Student.prototype = Object.create(Person.prototype);
+Student.prototype.constructor = Student;
+
+// ES6 Class
+class Student extends Person {
+  constructor(name, studentId) {
+    super(name);
+    this.studentId = studentId;
+  }
+}
+```
+
+ES5 で継承を使う方が冗長になりますし、ES6 版の方がわかりやすくて覚えやすいです。
+
+###### 参考
+
+- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance (英語)
+- https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Inheritance (日本語)
+- https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5
+
+### アロー構文の使い方を例示してください。この構文と他の方法による定義とは何が違いますか？
+
+アロー関数の明白な利点の 1 つは、関数を作成するのに必要な構文を単純化し、`function` キーワードを必要としないことです。これは、通常の関数では `this` がそれを呼び出すオブジェクトによって決定されますが、これとは異なります。レキシカルスコープされた `this` は、とくに React コンポーネントでコールバックを呼び出すときに便利です。
 
 ### コンストラクタにおいて、メソッドをアロー構文で定義する方法の利点はなんですか？
 
-TODO
+コンストラクタ内のメソッドとしてアロー関数を使用する主な利点は、`this` の値が関数の作成時に設定され、それ以降は変更できないことです。
+
+つまり、コンストラクタを使って新しいオブジェクトを作成するとき、`this` は常にそのオブジェクトを参照することになります。
+
+例えば、ファーストネームを引数に取る `Person`コンストラクタがあり、その名前を `console.log` に出力するための 2 つのメソッドを持っているとします。
+
+```js
+const Person = function (firstName) {
+  this.firstName = firstName;
+  this.sayName1 = function () {
+    console.log(this.firstName);
+  };
+  this.sayName2 = () => {
+    console.log(this.firstName);
+  };
+};
+
+const john = new Person('John');
+const dave = new Person('Dave');
+
+john.sayName1(); // John
+john.sayName2(); // John
+
+// The regular function can have its 'this' value changed, but the arrow function cannot
+john.sayName1.call(dave); // Dave (because "this" is now the dave object)
+john.sayName2.call(dave); // John
+
+john.sayName1.apply(dave); // Dave (because 'this' is now the dave object)
+john.sayName2.apply(dave); // John
+
+john.sayName1.bind(dave)(); // Dave (because 'this' is now the dave object)
+john.sayName2.bind(dave)(); // John
+
+var sayNameFromWindow1 = john.sayName1;
+sayNameFromWindow1(); // undefined (because 'this' is now the window object)
+
+var sayNameFromWindow2 = john.sayName2;
+sayNameFromWindow2(); // John
+```
+
+ここでの主なポイントは、通常の関数では `this` を変更できますが、アロー関数ではコンテキストは常に同じままであるということです。つまり、アプリケーションの異なる部分にアロー関数を渡していても、コンテキストが変わることを心配する必要はありません。
+
+これは React のクラスコンポーネントでとくに便利です。通常の関数を使ってクリックハンドラなどのクラスメソッドを定義し、そのクリックハンドラを prop として子コンポーネントに渡す場合、親コンポーネントのコンストラクタで `this` もバインドする必要があります。代わりにアロー関数を使用する場合、"this "もバインドする必要はありません。(素晴らしいデモとサンプルコードについては、この記事を参照してください。: https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)
+
+###### 参考
 
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions (英語)
+- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions (日本語)
+- https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb
 
 ### 高階関数とはなんですか？
 
@@ -1006,7 +959,7 @@ const names = ['irish', 'daisy', 'anna'];
 命令的な方法はこのようになります：
 
 ```js
-const transformNamesToUppercase = function(names) {
+const transformNamesToUppercase = function (names) {
   const results = [];
   for (let i = 0; i < names.length; i++) {
     results.push(names[i].toUpperCase());
@@ -1019,19 +972,17 @@ transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
 `.map(transformerFn)` を使うと、コードが短くて宣言的になります。
 
 ```js
-const transformNamesToUppercase = function(names) {
-  return names.map(name => name.toUpperCase());
+const transformNamesToUppercase = function (names) {
+  return names.map((name) => name.toUpperCase());
 };
 transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
 ```
 
 ###### 参考
 
-* https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
-* https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
-* https://eloquentjavascript.net/05_higher_order.html
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
+- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
+- https://eloquentjavascript.net/05_higher_order.html
 
 ### オブジェクトと配列について、「分割代入」の例を教えてください。
 
@@ -1072,17 +1023,75 @@ console.log(q); // true
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (英語)
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (日本語)
-* https://ponyfoo.com/articles/es6-destructuring-in-depth
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (英語)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (日本語)
+- https://ponyfoo.com/articles/es6-destructuring-in-depth
 
 ### ES6 のテンプレート文字列は文字列を作り出す上で様々な柔軟性をもたらしますが、例を示すことはできますか？
 
-TODO
+テンプレートリテラルは、文字列の補間や、文字列に変数を含めることを簡単にするのに役立ちます。ES2015 以前は、このようなことをするのが一般的でした。
 
-[[↑] 先頭に戻る](#js-に関する質問)
+```js
+var 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!'
+```
+
+テンプレートリテラルを使用すると、このような出力で作成できます。
+
+```js
+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!'
+```
+
+テンプレートリテラルを使用していることと、`${}`プレースホルダー内に式を挿入できることを示すために、引用符ではなくバッククォートを使用していることに注意してください。
+
+2 つ目の便利な使用例は、複数行の文字列を作成する場合です。ES2015 以前は、以下のような複数行文字列を作成することができました。
+
+```js
+console.log('This is line one.\nThis is line two.');
+// This is line one.
+// This is line two.
+```
+
+あるいは、長い文字列を読むためにテキストエディタで右にスクロールする必要がないように、コードの中で複数行に分割したい場合は、次のように書くこともできます。
+
+```js
+console.log('This is line one.\n' + 'This is line two.');
+// This is line one.
+// This is line two.
+```
+
+しかし、テンプレートリテラルは、それらに追加した間隔を保持します。たとえば、上で作成したのと同じ複数行の出力を作成するには、以下のようにします。
+
+```js
+console.log(`This is line one.
+This is line two.`);
+// This is line one.
+// This is line two.
+```
+
+テンプレートリテラルのもう 1 つの使用例は、単純な変数補間のためのテンプレートライブラリの代用として使用することです。
+
+```js
+const person = { name: 'Tyler', age: 28 };
+document.body.innerHTML = `
+  <div>
+    <p>Name: ${person.name}</p>
+    <p>Age: ${person.age}</p>
+  </div>
+`;
+```
+
+**`.innerHTML`を使用していると、コードが XSS の影響を受ける可能性があるので注意してください。データがユーザからのものであれば、表示する前にデータをサニタイズしましょう!**
+
+###### 参考
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals (英語)
+- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals (日本語)
 
 ### カリー化の例を説明してください。またカリー化がもたらす利点はどこにあるのでしょうか？
 
@@ -1095,7 +1104,7 @@ function curry(fn) {
   }
 
   function _curried(depth, args) {
-    return function(newArgument) {
+    return function (newArgument) {
       if (depth - 1 === 0) {
         return fn(...args, newArgument);
       }
@@ -1118,13 +1127,11 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
 
 ###### 参考
 
-* https://hackernoon.com/currying-in-js-d9ddc64f162e
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://hackernoon.com/currying-in-js-d9ddc64f162e
 
 ### spread syntax を利用する利点はなんですか？また、rest syntax とは何が違っていますか？
 
-ES6 の普及構文は、`Object.create`、`slice`、またはライブラリ関数に頼らずに配列やオブジェクトのコピーを簡単に作成できるので、機能的なパラダイムでコーディングするときに非常に便利です。この言語機能は、Redux および rx.js プロジェクトで頻繁に使用されます。
+ES6 の普及構文は、`Object.create`、`slice`、またはライブラリ関数に頼らずに配列やオブジェクトのコピーを簡単に作成できるので、機能的なパラダイムでコーディングするときに非常に便利です。この言語機能は、Redux および RxJS プロジェクトで頻繁に使用されます。
 
 ```js
 function putDookieInAnyArray(arr) {
@@ -1145,7 +1152,7 @@ ES6 の rest 構文は、任意の数の引数を関数に渡すための省略
 
 ```js
 function addFiveToABunchOfNumbers(...numbers) {
-  return numbers.map(x => x + 5);
+  return numbers.map((x) => x + 5);
 }
 
 const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]
@@ -1162,14 +1169,12 @@ const { e, f, ...others } = {
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax (英語)
-* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax (日本語)
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters (英語)
-* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters (日本語)
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (英語)
-* https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (日本語)
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax (英語)
+- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax (日本語)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters (英語)
+- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters (日本語)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (英語)
+- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment (日本語)
 
 ### ファイル間でコードを共有するにはどうすれば良いですか？
 
@@ -1183,11 +1188,9 @@ ES2015 は、AMD と CommonJS の両方を置き換えることを目指すモ
 
 ###### 参考
 
-* http://requirejs.org/docs/whyamd.html
-* https://nodejs.org/docs/latest/api/modules.html
-* http://2ality.com/2014/09/es6-modules-final.html
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- http://requirejs.org/docs/whyamd.html
+- https://nodejs.org/docs/latest/api/modules.html
+- http://2ality.com/2014/09/es6-modules-final.html
 
 ### 静的クラスメンバーはどんな場面で使いますか？
 
@@ -1195,10 +1198,8 @@ ES2015 は、AMD と CommonJS の両方を置き換えることを目指すモ
 
 ###### 参考
 
-* https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
-
-[[↑] 先頭に戻る](#js-に関する質問)
+- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
 
 ### 他の方の回答集
 
-* http://flowerszhong.github.io/2013/11/20/javascript-questions.html
+- http://flowerszhong.github.io/2013/11/20/javascript-questions.html
diff --git a/website/i18n/kr/docusaurus-plugin-content-docs/current/css-questions.md b/website/i18n/kr/docusaurus-plugin-content-docs/current/css-questions.md
new file mode 100644
index 0000000000..2678ebaa62
--- /dev/null
+++ b/website/i18n/kr/docusaurus-plugin-content-docs/current/css-questions.md
@@ -0,0 +1,471 @@
+---
+title: CSS 질문
+---
+
+[프론트엔드 면접 질문 - CSS 질문](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/css-questions.md)에 대한 해설입니다. Pull Request를 통한 제안, 수정 요청 환영합니다.
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+### CSS 선택자의 특정성은 무엇이며 어떻게 작동하나요?
+
+브라우저는 CSS 규칙의 특정성에 따라 요소에 표시할 스타일을 결정합니다. 브라우저는 이미 특정 요소와 일치하는 규칙을 결정했다고 가정합니다. 일치하는 규칙들 가운데, 네 개의 쉼표로 구분된 값 `a, b, c, d`는 다음을 기반으로 각 규칙에 대해 계산됩니다.
+
+1.  `a`는 인라인 스타일이 사용되고 있는지입니다. 속성의 선언이 요소의 인라인 스타일이면 `a`는 1이고, 그렇지 않으면 0입니다.
+2.  `b`는 ID 셀렉터의 수입니다.
+3.  `c`는 클래스, 속성, 가상 클래스 선택자의 수입니다.
+4.  `d`는 태그, 가상 요소 선택자의 수입니다.
+
+결과적인 특정성은 점수가 아니라, 컬럼마다 비교할 수 있는 값들의 행렬입니다. 선택자를 비교하여 가장 높은 특정성을 갖는 항목을 결정할 때, 왼쪽에서 오른쪽 순으로 각 열의 가장 높은 값을 비교합니다. 따라서 `b`열의 값은 `c`와 `d`열에 있는 값을 무시합니다. 따라서 `0,1,0,0`의 특정성은 `0,0,10,10`중 하나보다 큽니다.
+
+동등한 특정성의 경우: 가장 마지막 규칙이 중요한 규칙입니다. 스타일 시트에 동일한 규칙을 두 번 작성한 경우(내부나 외부에 관계없이) 스타일 시트의 하위 규칙이 스타일 될 요소에 더 가까우므로 더 구체적으로 적용됩니다.
+
+저라면, 필요하다면 쉽게 재정의할 수 있도록 낮은 특정성 규칙들을 작성할 것입니다. CSS UI 컴포넌트 라이브러리 코드를 작성할 때, 라이브러리 사용자가 `!important`를 사용하거나 특정성을 높이기 위해 지나치게 복잡한 CSS 규칙을 사용하지 않고도 이를 재정의할 수 있도록 특정성을 낮게 하는 것이 중요합니다.
+
+###### 참고자료
+
+- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
+- https://www.sitepoint.com/web-foundations/specificity/
+
+### `Resetting`과 `Normalizing` CSS의 차이점은 무엇인가요? 당신은 무엇을 선택할 것이며, 그 이유는 무엇인가요?
+
+- **Resetting** - Resetting은 요소의 모든 기본 브라우저 스타일을 제거하기 위한 것입니다. 예: `margin`, `padding`, `font-size`는 같은 값으로 재설정됩니다. 일반적인 타이포그래피 요소에 대한 스타일을 재 선언해야합니다.
+
+- **Normalizing** - Normalizing는 "모든 스타일을 제거"하는 것이 아니라 유용한 기본 스타일을 보존합니다. 또한 일반적인 브라우저 종속성에 대한 버그를 수정합니다.
+
+필자는 저만의 스타일링을 많이 해야 하고 보존할 기본 스타일이 필요하지 않도록 매우 커스터마이징되었거나 자유로운 사이트 디자인해야할 때 리셋을 선택합니다.
+
+###### 참고자료
+
+- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
+
+### `float`가 어떻게 작동하는지 설명하세요.
+
+Float는 CSS 위치 지정 속성입니다. Float된 요소는 페이지의 흐름의 일부가 되며, 페이지의 흐름에서 제거되는 `position: absolute` 요소와 달리 다른 요소(예: 플로팅 요소 주위로 흐르는 텍스트)의 위치에 영향을 줍니다.
+
+CSS `clear` 속성은 float 요소에 `left`/`right`/`both`에 위치하도록 사용될 수 있습니다.
+
+부모 요소에 float 요소만 있으면, 그 높이는 무효가 됩니다. 컨테이너의 float 요소 다음에 있지만 컨테이너가 닫히기 전에 float를 clear 하면 해결할 수 있습니다.
+
+`.clearfix`는 영리한 CSS 가상 선택자 (`:after`)를 사용하여 float를 제거합니다. 상위 클래스에 overflow 를 설정하는 대신 추가 클래스 `clearfix`를 적용합니다. 그 다음 아래 CSS를 적용하세요:
+
+```css
+.clearfix:after {
+  content: ' ';
+  visibility: hidden;
+  display: block;
+  height: 0;
+  clear: both;
+}
+```
+
+대신, 부모 요소에 `overflow: auto`나 `overflow: hidden` 속성을 주면, 자식 요소 내부에 새로운 블록 포맷 컨텍스트을 설정하고 자식을 포함하도록 확장합니다.
+
+###### 참고자료
+
+- https://css-tricks.com/all-about-floats/
+
+### `z-index`와 스택 컨텍스트(stacking context)가 어떻게 형성되는지 설명하세요.
+
+CSS의 `z-index`속성은 겹치는 요소의 쌓임 순서를 제어합니다. `z-index`는 `position`에 `static`이 아닌 값을 갖는 요소에만 영향을 줍니다.
+
+`z-index` 값이 없으면 DOM에 나타나는 순서대로 요소가 쌓이게 됩니다(동일한 계층에서 가장 아래의 것이 맨 위에 보여집니다). 정적이지 않은(non-static) 위치지정 요소(및 해당 하위 요소)는 HTML 레이어 구조와 상관없이 기본 정적 위치로 항상 요소 위에 나타납니다.
+
+스택 컨텍스트(stacking context)는 레이어들을 포함하는 요소입니다. 지역 스택 컨텍스트 내에서, 자식의 `z-index` 값은 문서 루트가 아닌 해당 요소를 기준으로 설정됩니다. 해당 컨텍스트 외부 레이어(예: 지역 스택 컨텍스트의 형제 요소)는 그 사이의 레이어에 올 수 없습니다. 요소 B가 요소 A의 상단에 위치하는 경우, 요소 A의 하위 요소 C는, 요소 C가 요소 B보다 `z-index`가 더 높은 경우에도 요소 B 보다 위에 올 수 없습니다.
+
+각각의 스택 컨텍스트는 자체적으로 포함되어 있습니다 - 요소의 내용이 쌓인 후에는 전체 요소를 스택 컨텍스트의 쌓인 순서로 고려합니다. 다음 몇몇 CSS 속성, `opacity`가 1보다 작거나, `filter`가 `none`이 이거나, `transform`이 `none`이 아닌 것들이 새로운 스택 컨텍스트를 트리거 합니다.
+
+###### 참고 자료
+
+- https://css-tricks.com/almanac/properties/z/z-index/
+- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
+- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+
+### BFC(Block Formatting Context)와 그 작동 방식을 설명하세요.
+
+BFC(Block Formatting Context)는 블록 박스가 배치된 웹 페이지의 시각적 CSS 렌더링의 일부입니다. float, absolute로 배치된 요소, `inline-blocks`, `table-cells`, `table-caption` 그리고 `visible`(그 값이 viewport에 전파되었을 때는 제외)이 아닌 `overflow`가 있는 요소들이 새로운 Block Formatting Context를 만듭니다.
+
+BFC는 다음 조건 중 하나 이상을 충족시키는 HTML 박스입니다:
+
+- `float`의 값이 `none`이 아님.
+- `position`의 값이 `static`도 아니고 `relative`도 아님.
+- `display`의 값이 `table-cell`, `table-caption`, `inline-block`, `flex`, `inline-flex`임.
+- `overflow`의 값이 `visible`이 아님.
+
+BFC에서 각 박스의 왼쪽 바깥 모서리는 포함하는 블록의 왼쪽 모서리에 닿습니다(right-to-left 포맷에서는, 오른쪽 모서리에 닿음).
+
+BFC collapse 시에 인접한 블록 레벨 박스 사이의 수직 마진. [collapsing margins](https://www.sitepoint.com/web-foundations/collapsing-margins/)에 대해 자세히 읽어보세요.
+
+###### 참고 자료
+
+- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
+
+### clear 하는 방법에는 어떤 것이 있으며, 각각 어떤 상황에 적합한가요?
+
+- 빈 `div` 방법 - `<div style="clear:both;"></div>`
+- Clearfix 방법 - 위 `.clearfix` 클래스를 참조하세요.
+- `overflow: auto` 또는 `overflow: hidden` 방법 - 부모는 새로운 Block Formatting Context를 설정하고, 확장된 자식을 포함하도록 합니다.
+
+대규모의 프로젝트에서는 유용하게 `.clearfix` 클래스를 만들어 필요한 곳에서 사용합니다. 자식이 부모보다 크기가 큰 경우 `overflow: hidden`은 자식을 모두 보여줄 수 없습니다.
+
+### CSS 스프라이트는 무엇인가요? 그리고 당신이 페이지나 사이트에 구현하는 방법도 설명해 주세요.
+
+CSS 스프라이트는 여러 이미지를 하나의 큰 이미지로 결합합니다. 일반적으로 아이콘에 사용되는 기술(Gmail에서 사용)입니다. 구현 방법:
+
+1. 스프라이트 생성기를 사용하여 여러 이미지를 하나로 묶어 적절한 CSS를 생성합니다.
+1. 각 이미지는 `background-image`, `background-position`, `background-size` 속성이 정의된 해당 CSS 클래스를 갖습니다.
+1. 해당 이미지를 사용하기 위해, 요소에 해당 클래스를 추가합니다.
+
+**장점:**
+
+- 여러 이미지에 대한 HTTP 요청 수를 줄입니다(스프라이트 시트당 하나의 단일 요청만 필요합니다.) 그러나 HTTP2를 사용하면, 여러 이미지를 로드하는 것이 더 이상 중요하지 않습니다.
+- `:hover`의 상태에서만 나타나는 이미지가 필요할 때, 다운로드되지 않는 이미지를 미리 다운로드하여 깜박임이 보이지 않습니다.
+
+###### 참고 자료
+
+- https://css-tricks.com/css-sprites/
+
+### 브라우저 별로 스타일이 다른 문제를 어떤 접근 방법으로 해결하나요?
+
+- 문제와 그 문제를 일으키는 브라우저를 식별한 후, 해당 브라우저가 사용 중일 때만 로드되는 별도의 스타일 시트를 사용합니다. 하지만 이 방식을 사용하려면 서버사이드 렌더링이 필요합니다.
+- 이미 이러한 스타일링 문제를 처리하고 있는 Bootstrap 같은 라이브러리를 사용합니다.
+- `autoprefixer`를 사용하여 벤더 프리픽스를 코드에 자동으로 추가합니다.
+- Reset CSS 또는 Normalize.css를 사용합니다.
+
+### 기능이 제한된 브라우저의 페이지는 어떻게 처리하나요? 어떤 기술/프로세스를 사용하나요?
+
+- 우아한 퇴보 - 최신 브라우저를 위한 어플리케이션을 구축하는 동시에 그것이 구형 브라우저에서도 계속 작동하도록 하는 구축 방법.
+- 점진적 향상 - 기본 수준의 사용자 환경에 대한 응용 프로그램을 구축하지만 브라우저가 이를 지원할 경우 기능을 강화하는 방법.
+- [caniuse.com](https://caniuse.com/)을 사용하여 기능 지원을 확인합니다.
+- 자동 벤더 프리픽스 삽입을 위해 Autoprefixer 사용.
+- [Modernizr](https://modernizr.com/)를 사용하여 기능 감지.
+- CSS Feature 쿼리 [@support](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports) 사용.
+
+### 콘텐츠를 시각적으로 숨기는(그리고 screen reader에서만 사용할 수 있게 만드는) 다양한 방법은 무엇인가요?
+
+이러한 기술은 Accessibility(a11y)에 관련이 있습니다.
+
+- `width: 0; height: 0`. 요소가 화면의 어떤 공간도 차지하지 않도록 합니다. 결과적으로 보이지 않게 됩니다.
+- `position: absolute; left: -99999px`. 화면 외부에 배치합니다.
+- `text-indent: -9999px`. 이것은 `block`인 요소 내의 텍스트에서만 작동합니다.
+- 메타데이터. 예를 들면, Schema.org, RDF, JSON-LD를 사용합니다.
+- WAI-ARIA. 웹 페이지의 Accessibility를 높이는 방법을 정의하는 W3C 기술 사양입니다.
+
+WAI-ARIA가 이상적인 해결책이라 하더라도 저는 `absolute` 위치 지정 접근 방법을 택할 것입니다. 대부분의 요소에 작동하며 간단한 기술이기 때문입니다.
+
+###### 참고자료
+
+- https://www.w3.org/TR/wai-aria-1.1/
+- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
+- http://a11yproject.com/
+
+### 그리드 시스템을 사용해본적 있나요? 만약 그렇다면, 당신은 어떤 것을 선호하나요?
+
+저는는 `float` 기반 그리드 시스템을 좋아합니다. 왜냐하면, 여전히 기존 대체할만한 시스템(flex, grid) 중에서도 가장 많은 브라우저를 지원하기 때문입니다. 이것은 `Bootstrap`에서 수 년동안 사용되었으며, 효과가 있다는 것이 입증되었습니다.
+
+### 미디어 쿼리나 모바일만을 위한 layouts/CSS를 사용하거나 구현해본적 있나요?
+
+네. 한가지 예를 들면, 여러 줄 형식의 네비게이션을 특정 breakpoint를 지나면 `fixed-bottom tab` 형태로 변환하였습니다.
+
+### SVG 스타일링에 익숙하신가요?
+
+네, 객체의 속성을 지정하는 방법을 포함해 inline CSS, CSS section 삽입, 외부 CSS file처럼 shape의 색상을 정하는 여러 방법이 있습니다. 웹에서 볼 수 있는 대부분의 SVG는 inline CSS를 사용하지만, 각각 장단점이 있습니다.
+
+기본적인 채색은 노드에 `fill`과 `stroke` 두 속성을 설정하여 정할 수 있습니다. `fill`은 객체 안쪽 색을 설정하고, `stroke`는 객체 주위에 그려지는 선의 색을 설정합니다. 색상 이름 (`red` 등), RGB값 (`rgb(255,0,0)`), 16진수 값, RGBA 값 등 HTML에서 사용하는 것과 동일한 CSS 색상 이름 스킴을 사용할 수 있습니다. HTML에서 사용하는 것과 동일한 CSS 색상 지정 스킴을 사용할 수 있습니다.
+
+```html
+<rect
+  x="10"
+  y="10"
+  width="100"
+  height="100"
+  stroke="blue"
+  fill="purple"
+  fill-opacity="0.5"
+  stroke-opacity="0.8" />
+```
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
+
+### screen이 아닌 @media 속성의 예를 들어줄 수 있나요?
+
+네, @media 속성은 _screen_ 을 포함하여 4가지 타입이 있습니다.
+
+- all - 모든 미디어 기기 장치
+- print - 프린터
+- speech - 화면을 크게 읽는 스크린리더
+- screen - 컴퓨터 스크린, 태블릿, 스마트폰 등
+
+`print` 미디어 타입의 사용 예제:
+
+```css
+@media print {
+  body {
+    color: black;
+  }
+}
+```
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
+
+### 효율적인 CSS를 작성하는데 있어서 어려움은 무엇인가요?
+
+먼저, 브라우저는 선택자가 맨 오른쪽(key 선택자)부터 왼쪽으로 일치하는지 확인합니다. 브라우저는 선택자에 따라 DOM의 요소를 필터링하고 해당 부모요소가 일치하는지 식별합니다. 선택자 체인의 길이가 짧을수록 브라우저는 해당 요소가 선택자와 일치하는지 여부를 빠르게 판별할 수 있습니다. 따라서 태그 선택자와 보편적인 선택자 사용을 피해야 합니다. 이들은 많은 요소가 매치되기 때문에 부모가 일치하는지 여부를 판단하기 위해 브라우저가 많은 작업을 해야합니다.
+
+[BEM (Block Element Modifier)](https://bem.info/) 방법론에서는 모두 단일 클래스를 갖고, 계층구조가 필요한 곳에서는 클래스의 이름을 확장하기를 권장합니다. 따라서 선택자를 쉽고 효율적으로 재정의할 수 있습니다.
+
+어떤 CSS 속성이 reflow, repaint, compositing을 트리거 하는지 알아두세요. 가능하면 레이아웃(reflow 트리거)를 변경하는 스타일은 피하세요.
+
+###### 참고자료
+
+- https://developers.google.com/web/fundamentals/performance/rendering/
+- https://csstriggers.com/
+
+### CSS 전처리기를 사용하면 어떤 장단점이 있나요?
+
+**장점:**
+
+- CSS의 유지보수성이 향상됩니다.
+- 중첩 선택자를 작성하기 쉽습니다.
+- 일관된 테마를 위한 변수사용. 여러 프로젝트에 걸쳐 테마 파일을 공유할 수 있습니다.
+- 반복되는 CSS를 위한 Mixins 생성.
+- 코드를 여러 파일로 나눕니다. CSS 파일도 나눌 수 있지만, 그렇게 하기 위해서는 각 CSS 파일을 다운로드하기 위한 HTTP 요청이 필요합니다.
+
+**단점:**
+
+- 전처리기를 위한 도구가 필요합니다. 다시 컴파일하는 시간이 느릴 수도 있습니다.
+
+### 사용했던 CSS 전처리기에 대해 좋았던 점과 싫었던 점을 설명해주세요.
+
+**좋은 점:**
+
+- 대부분의 장점은 위에서 언급했습니다.
+- Less는 자바스크립트로 작성되었으며, Node와 잘 작동합니다.
+
+**싫은 점:**
+
+- 저는 C++로 작성된 LibSass 바인딩인 `node-sass`를 통해 Sass를 사용합니다. 노드 버전을 바꿀 때 자주 다시 컴파일해야 했습니다.
+- Less에서는 변수 이름의 접두어가 `@`이며, `@media`, `@import`, `@font-face` 규칙과 같은 고유 CSS 키워드와 혼동될 수 있습니다.
+
+### 비표준 글꼴을 사용하는 웹 디자인 컴포넌트를 어떻게 구현하나요?
+
+`font-face`를 사용하고 `font-weight`가 다른 경우 `font-family`를 정의합니다.
+
+### 브라우저가 CSS 선택자에 일치하는 요소를 어떻게 결정하는지 설명하세요.
+
+이는 위의 효율적인 CSS 작성과 관련있습니다. 브라우저는 선택자를 오른쪽(선택자)에서부터 왼쪽으로 일치시킵니다. 브라우저는 선택자에 따라 DOM의 요소를 필터링하고 부모요소를 검사하여 일치를 판정합니다. 선택자 체인의 길이가 짧을수록, 브라우저가 해당 요소가 일치하는지 여부를 더 빠르게 판단할 수 있습니다.
+
+예를 들어, 이 선택자 `p span`는 먼저 모든 `<span>`요소를 찾아 그 부모의 루트까지 모두 통과하여 `<p>`요소를 찾습니다. 특정한 `<span>`의 경우 `<p>`를 찾는 즉시 `<span>`이 일치하는 것을 알고있으며, 이에 따라 매칭을 중지합니다.
+
+###### 참고자료
+
+- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
+
+### Pseudo-elements에 대해 설명하고 이 요소가 무엇을 위해 사용되는지 설명하세요.
+
+CSS Pseudo-element는 선택자에 추가되는 키워드로, 선택한 요소의 특정 부분을 스타일링 할 수 있습니다. 마크업을 수정하지 않고(`:before`, `:after`) 텍스트 데코레이션을 위해 사용하거나(`:first-line`, `:first-letter`) 마크업에 요소를 추가할 수 있습니다.(`content: ...`와 결합)
+
+- `:first-line`과 `:first-letter`는 텍스트를 데코레이션하는데 사용될 수 있습니다.
+- 위의 `.clearfix`에 사용되어 `clear: both`로 영역을 차지하지 않는 요소를 추가합니다.
+- 툴팁의 삼각 화살표는 `:before`와 `:after`를 사용합니다. 삼각형이 실제로 DOM이 아닌 스타일의 일부로 간주되기 때문에 분리하는 것이 좋습니다. 추가적인 HTML 요소를 사용하지 않고 CSS 스타일만으로 삼각형을 그릴 수는 없습니다.
+
+###### 참고자료
+
+- https://css-tricks.com/almanac/pseudo-selectors/b/after-and-before/
+
+### 박스 모델에 대한 당신의 이해와 CSS에서 브라우저에 다른 박스 모델로 레이아웃을 렌더링하는 방법을 설명하세요.
+
+CSS 박스 모델은 문서 트리의 요소에 대해 생성되고 시각적 포매팅 모델에 따라 배치된 사각형 상자를 나타냅니다. 각 박스에는 content 영역(예: 텍스트, 이미지 등)과 `padding`, `border`, `margin` 영역을 선택적으로 사용할 수 있습니다.
+
+CSS 박스 모델은 다음을 계산합니다.
+
+- 블록 요소가 공간을 얼마나 차지하는지.
+- 테두리 또는 여백이 겹치거나 충돌하는지 여부.
+- 박스의 크기.
+
+박스 모델에는 다음과 같은 규칙이 있습니다.
+
+- 블록 요소의 크기는 `width`, `height`, `padding`, `border`, `margin`에 의해 계산됩니다.
+- `height` 가 지정되어있지 않으면, 블럭 요소는 포함하고있는 내용만큼의 높이를 가질 것이고, `padding`을 더합니다.(float가 아닌경우).
+- `width` 가 지정되지있지 않으면, float가 아닌 블록 요소는 [부모의 너비-`padding`]에 맞게 확장됩니다.
+- 요소의 `height`는 내용의 `height`에 의해 계산됩니다.
+- 요소의 `width`는 내용의 `width`에 의해 계산됩니다.
+- 기본적으로, `padding`과 `border`는 요소의 `width`와 `height`의 일부가 아닙니다.
+
+###### 참고자료
+
+- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
+
+### `* { box-sizing: border-box; }`는 무엇을 하나요? 장점은 무엇인가요?
+
+- 기본적으로, 요소들에 `box-sizing: content-box`가 적용되면, 내용의 크기만 고려됩니다.
+- `box-sizing: border-box`는 요소의 `width`와 `height`가 어떻게 계산되는지를 변경하여, `border`와 `padding`도 계산에 포함됩니다.
+- 요소의 `height`는 내용의 [`height` + 수직 `padding` + 수직 `border` 폭]으로 계산됩니다.
+- 요소의 `width` 는 내용의 [`width` + 수평 `padding` + 수평 `border` 폭]으로 계산됩니다.
+- `padding`과 `border`를 박스 모델의 일부분으로 생각하면, 디자이너가 실제로 생각하는 것과 잘 들어 맞습니다.
+
+###### 참고자료
+
+- https://www.paulirish.com/2012/box-sizing-border-box-ftw/
+
+### CSS의 `display` 속성은 무엇이며 사용법에 대한 몇 가지 예를 들 수 있나요?
+
+- `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`.
+
+TODO
+
+### `inline` 과 `inline-block` 의 차이점은 무엇인가요?
+
+좋은 비교를 위해 `block` 과도 비교해 볼 것입니다.
+
+|  | `block` | `inline-block` | `inline` |
+| --- | --- | --- | --- |
+| 크기 | 부모 컨테이너의 너비를 채웁니다. | 내용에 의존합니다. | 내용에 의존합니다. |
+| 위치 | 새 줄에서 시작하고, 그 옆에 HTML 요소를 허용하지 않습니다 (`float`을 추가 할 때 제외). | 다른 콘텐츠와 함께 흐르고, 다른 요소가 옆에 있는 것을 허용합니다. | 다른 콘텐츠와 함께 흐르고, 다른 요소가 옆에 있는 것을 허용합니다. |
+| `width`, `height` 지정 가능 여부 | 가능 | 가능 | 불가능. 설정되면 무시됩니다. |
+| `vertical-align` 정렬 가능 여부 | 불가능 | 가능 | 가능 |
+| margin 과 padding | 모든 방향에서 가능. | 모든 방향에서 가능. | 수평방향만 가능. 세로방향을 지정하면, 레이아웃에 영향을 주지 않습니다. `border`와 `padding`이 콘텐츠 주위에 시각적으로 나타나는 경우에도, 수직영역은 `line-height`에 의존합니다. |
+| Float | - | - | 수직 margin과 padding을 설정할 수 있는 `block` 요소와 같아집니다. |
+
+### `relative`, `fixed`, `absolute`, `static` 요소의 차이점은 무엇인가요?
+
+위치가 정해진 요소는 계산된 `position` 속성이 `relative`, `absolute`, `fixed`, `sticky` 중 하나인 요소입니다.
+
+- `static` - 기본 위치. 요소가 평소와 같이 페이지에 위치합니다. `top`, `right`, `bottom`, `left`, `z-index` 속성은 적용되지 않습니다.
+- `relative` - 요소의 위치가 레이아웃을 변경하지 않고, 자체에 상대적으로 조정됩니다. (따라서 배치되지 않은 요소의 간격을 남겨 둡니다.)
+- `absolute` - 요소가 페이지의 평소 위치에서 제거되고, 가장 가까운 `static이 아닌` 부모 블록이 있는 경우 지정된 위치에 배치됩니다. 그렇지 않으면 최상위 블록에 의존됩니다. absolute로 배치된 박스는 margin을 가질 수 있으며 다른 margin과 충돌하지 않습니다. 이 요소는 다른 요소의 위치에 영향을 주지 않습니다.
+- `fixed` - 요소는 페이지의 평소 위치에서 제거되고 뷰포트를 기준으로 지정된 위치에 배치되며 스크롤 할 때 이동하지 않습니다.
+- `sticky` - sticky는 `relative`와 `fixed`의 하이브리드입니다. 요소는 지정된 임계값을 넘을 때까지 `relative` 위치로 처리되며, 특정 지점에서 `fixed` 위치로 처리됩니다.
+
+###### 참고자료
+
+- https://developer.mozilla.org/en/docs/Web/CSS/position
+
+### 로컬이나 프로덕션 환경에서 사용했던 CSS 프레임워크는 무엇인가요? 어떻게 그들을 바꾸거나 개선할 수 있을까요?
+
+- **Bootstrap** - 느린 배포 주기. 부트스트랩 4는 거의 2년 동안 알파버전 상태였습니다. 널리 사용되는 Spinner 버튼 컴포넌트를 추가합니다.
+- **Semantic UI** - 소스 코드 구조는 테마 커스터마이징을 이해하기 어렵게 만듭니다. 틀에 얽매이지 않는 테마 시스템으로 사용자 정의하기가 어렵습니다. 벤더 라이브러리 내의 하드 코딩된 설정 경로. 부트스트랩과 달리 변수 오버라이드에 대해 잘 설계되지 않았습니다.
+- **Bulma** - 많은 의미없고 불필요한 클래스와 마크업을 필요로 합니다. 이전 버전과 호환되지 않습니다. 버전을 업그레이드하면 미묘한 방식으로 앱이 손상됩니다.
+
+### 새로운 CSS Flexbox나 Grid 스펙을 사용해본 적이 있나요?
+
+네. Flexbox는 주로 1차원 레이아웃을 대상으로 하며 Grid는 2차원 레이아웃을 대상으로 합니다.
+
+Flexbox는 CSS에서 컨테이너 안에 있는 요소의 수직 가운데정렬, sticky footer 등과 같은 많은 일반적인 문제들을 해결합니다. Bootstrap과 Bulma는 Flexbox를 기반으로 하고, 이는 아마도 요즘 레이아웃을 만드는 데 권장되는 방법일 것입니다. 이전에 Flexbox를 사용해 보았지만, `flex-grow`를 사용할 때 일부 브라우저에서 비호환성 문제(Safari)가 발생했습니다. 그래서 백분율로 나타낸 폭을 계산하기 위해 `inline-blocks`과 수학을 사용한 코드로 다시 써야했는데, 이는 좋은 경험은 아니었습니다.
+
+Grid는 그리드 기반의 레이아웃을 생성하기 위한 가장 직관적인 접근법이지만(더 좋을 것입니다!), 현재 브라우저 지원은 넓지 않습니다.
+
+###### 참고자료
+
+- https://philipwalton.github.io/solved-by-flexbox/
+
+### 반응형 웹사이트를 코딩하는 것과 모바일 우선 전략을 사용하는 것 사이의 차이점을 설명하세요.
+
+이 두가지 접근법은 배타적이지 않습니다.
+
+반응형 웹사이트를 만드는 것은 일부 요소가 미디어 쿼리를 통해 장치의 화면 크기(일반적으로 뷰포트 너비)에 따라 크기나 다른 기능을 조정하도록 반응함을 의미합니다. (예: 작은 디바이스에서 글꼴 크기를 줄임)
+
+```css
+@media (min-width: 601px) {
+  .my-class {
+    font-size: 24px;
+  }
+}
+
+@media (max-width: 600px) {
+  .my-class {
+    font-size: 12px;
+  }
+}
+```
+
+모바일 우선 전략 또한 반응적이지만, 모바일 장치에 대한 모든 스타일을 정의해야하며 나중에 다른 장치에 대한 특정 규칙을 추가해야합니다. 이전 예를 따르면 다음과 같습니다.
+
+```css
+.my-class {
+  font-size: 12px;
+}
+
+@media (min-width: 600px) {
+  .my-class {
+    font-size: 24px;
+  }
+}
+```
+
+모바일 우선 전략은 2가지 주요 장점을 가지고 있습니다.
+
+- 모바일 장치에서 적용되는 모든 규칙이 미디어 쿼리에 대해 유효성 검사를 받을 필요가 없으므로 모바일 장치에서 더 뛰어난 성능을 발휘합니다.
+- 반응형 CSS 규칙과 관련하여 보다 명확한 코드를 작성해야합니다.
+
+### 반응형 디자인은 적응형 디자인과 어떻게 다른가요?
+
+반응형과 적응형 디자인은 모두 서로 다른 뷰포트 사이즈, 해상도, 사용 컨텍스트, 제어 메커니즘 등을 조정하여 다양한 장치에서 사용자 경험을 최적화하려고 시도합니다.
+
+반응형 디자인은 유연성 원칙에 따라 작동합니다. 즉, 어떤 장치에서나 보기 좋은 단일 변하기 쉬운 웹 사이트입니다. 반응형 웹 사이트는 미디어 쿼리, 유연한 그리드 및 반응 형 이미지를 사용하여 다양한 요인에 따라 유연하고 변화하는 사용자 경험을 제공합니다. 마치 하나의 공이 여러개의 서로 다른 링을 통과하기 위해 커지거나 줄어드는 것과 유사합니다.
+
+적응형 디자인는 점진적 향상의 현대적 정의에 더 가깝습니다. 하나의 유연한 디자인 대신에, 적응형 설계는 장치 및 기타 기능을 감지 한 다음 사전 정의 된 뷰포트 크기 및 기타 특성 세트를 기반으로 적절한 기능 및 레이아웃을 제공합니다. 하나의 공이 여러개의 서로 다른 링을 통과하는 대신, 링의 크기에 따라 여러개의 공을 사용하는 것과 유사합니다.
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
+- http://mediumwell.com/responsive-adaptive-mobile/
+- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
+
+### 레티나 그래픽으로 작업 해본 적이 있나요? 그렇다면, 언제, 어떤 기술을 사용하였나요?
+
+_레티나_ 는 픽셀 비율이 1보다 큰 고해상도 화면을 나타내는 마케팅 용어 일뿐입니다. 중요하게 알아야할 것은 픽셀 비율을 사용하면 이러한 디스플레이가 동일한 크기의 요소를 표시하기 위해 더 저해상도의 화면으로 표현한다는 것입니다. 요즘에는 모든 모바일 디바이스를 _레티나_ 디스플레이로 간주합니다.
+
+브라우저는 기본적으로 이미지들을 제외하고 디바이스의 해상도에 따라 DOM 요소를 렌더링합니다.
+
+레티나 디스플레이를 최상으로 만드는 선명하고보기 좋은 그래픽을 얻으려면 가능한한 고해상도 이미지를 사용해야합니다. 하지만 항상 가장 높은 해상도의 이미지를 사용하면 더 많은 바이트가 전송되어야 하기 때문에 성능에 영향을 미칩니다.
+
+이 문제를 극복하기 위해, HTML5에 스펙인 반응형 이미지를 사용할 수 있습니다. 이는 동일한 이미지의 다른 해상도 파일을 브라우저에 제공하고 html 속성 `srcset`과 `sizes`를 사용하여 어떤 이미지가 가장 적합한지 결정하도록합니다.
+
+```html
+<div responsive-background-image>
+  <img
+    src="/images/test-1600.jpg"
+    sizes="
+      (min-width: 768px) 50vw,
+      (min-width: 1024px) 66vw,
+      100vw"
+    srcset="
+      /images/test-400.jpg   400w,
+      /images/test-800.jpg   800w,
+      /images/test-1200.jpg 1200w
+    " />
+</div>
+```
+
+HTML5의 `srcset`를 지원하지 않는 브라우저(예: IE11)는 이를 무시하고 대신 `src`로 사용한다는 것을 알고있어야 합니다. IE11를 정말 지원해야하고 성능상의 이유로 이 기능을 제공해야하는 경우 자바스크립트 폴리필을 사용할 수 있습니다. 예: Picturefill(참고자료 링크)
+
+아이콘의 경우, SVG나 아이콘폰트를 사용하면 해상도에 관계없이 매우 선명하게 렌더링되므로 가능하면 이를 사용합니다.
+
+###### 참고자료
+
+- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
+- http://scottjehl.github.io/picturefill/
+- https://aclaes.com/responsive-background-images-with-srcset-and-sizes/
+
+### `absolute` 포지셔닝 대신 `translate()`를 사용하는 이유가 무엇인가요? 또는 그 반대의 경우에 대해서는 어떻게 생각하시나요?, 그 이유는 무엇인가요?
+
+`translate()`은 CSS `transform`의 값입니다. `transform`이나 `opacity`를 변경해도 브라우저의 reflow나 repaint가 다시 발생하지 않고 컴포지션만 실행되는 반면, 절대 위치를 변경하면 `reflow`가 발생합니다. `transform`을 사용하면 브라우저에서 이 요소를 위한 GPU 레이어가 생성되지만, 절대 위치 속성을 변경하는 것은 CPU를 사용합니다. 그러므로 `translate()`가 더 효율적이며, 매끄러운 애니메이션을 위한 페인트 시간이 짧아집니다.
+
+`translate()`을 사용할 때는 절대 위치를 변경할 때와 달리 원래 위치(일종의 `position: relative`)를 그대로 사용합니다.
+
+###### 참고자료
+
+- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
+
+### 다른 답변들
+
+- https://neal.codes/blog/front-end-interview-css-questions
+- https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/
+- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
diff --git a/website/i18n/kr/docusaurus-plugin-content-docs/current/html-questions.md b/website/i18n/kr/docusaurus-plugin-content-docs/current/html-questions.md
new file mode 100644
index 0000000000..944b037269
--- /dev/null
+++ b/website/i18n/kr/docusaurus-plugin-content-docs/current/html-questions.md
@@ -0,0 +1,177 @@
+---
+title: HTML 질문
+---
+
+[프론트엔드 면접 질문 - HTML 질문](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/html-questions.md)에 대한 해설입니다. Pull Request를 통한 제안, 수정 요청 환영합니다.
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+### `DOCTYPE`은 무엇을 하나요?
+
+**DOCTYPE**은 **document type**의 약어입니다. **DOCTYPE**은 항상 **DTD** (Document Type Definition)와 관련됩니다.
+
+**DTD**는 특정 문서가 어떻게 구성되어야 하는지 정의합니다(예시: `button`은 `span`을 포함할 수 있지만, `div`는 그럴 수 없다.), 반면, **DOCTYPE**은 문서가 _대략_ 존중할만한 **DTD**를 선언합니다. (예시: 이 문서는 HTML DTD를 존중한다.)
+
+웹 페이지는 DOCTYPE 선언이 필요합니다. 유저 에이전트에게 문서가 존중하는 HTML 사양의 버전을 알리는데 사용됩니다. 유저 에이전트가 올바른 DOCTYPE을 인식하면, 문서를 읽는데에 DOCTYPE과 일치하는 **no-quirks mode**를 트리거합니다. 유저 에이전트가 올바른 DOCTYPE을 인식하지 못하면, **quirks mode**를 트리거합니다.
+
+HTML5 표준에 대한 DOCTYPE 선언은 `<!DOCTYPE html>`입니다.
+
+###### 참고자료
+
+- https://html.spec.whatwg.org/multipage/syntax.html#the-doctype
+- https://html.spec.whatwg.org/multipage/xhtml.html
+- https://quirks.spec.whatwg.org/
+
+### 여러 언어로 되어 있는 콘텐츠의 페이지를 어떻게 제공하나요?
+
+이 질문은 다소 모호합니다. 여러 언어로 제공되는 내용의 페이지를 제공하는 방법에 대한, 가장 일반적인 경우에 대해 묻고 있다고 가정합니다. 하지만 페이지 내의 내용은 하나의 일관된 언어로만 표시되어야합니다.
+
+HTTP 요청을 서버에 보내면, 대개 요청하는 유저 에이전트가 `Accept-Language` 헤더와 같은 기본 언어 설정에 대한 정보를 보냅니다. 그 다음 서버는 이 정보를 사용하여 해당 언어가 제공 가능한 경우, 해당 언어 버전의 문서를 반환할 수 있습니다. 반환된 HTML 문서는 `<html lang="en">...</html>`과 같이 `<html>` 태그에 `lang` 속성을 선언해야 합니다.
+
+백엔드에서, HTML 마크업은 YML 또는 JSON 형식으로 저장된 특정 언어에 대한 `i18n` placeholder와 내용을 포함합니다. 그 다음 서버는 일반적으로 백엔드 프레임워크의 도움을 받아 특정 언어로 HTML 페이지를 동적 생성합니다.
+
+###### 참고자료
+
+- https://www.w3.org/International/getting-started/language
+
+### 다국어 사이트를 디자인하거나 개발할 때 주의해야할 사항은 무엇인가요?
+
+- HTML에 `lang` 속성을 사용합니다.
+- 사용자를 그들의 모국어로 안내합니다 - 사용자가 번거롭지 않도록 쉽게 국가/언어를 변경할 수 있도록 합니다.
+- 텍스트를 포함한 이미지를 사용하는 것은 확장가능한 접근이 아닙니다 - 이미지에 텍스트를 배치하는 것은 잘 보이고 시스템 글꼴이 아닌 글꼴을 모든 컴퓨터에 표시하는데 여전히 널리 사용되는 방법입니다. 그러나 이미지에 텍스트를 번역하려면, 텍스트 문자열에 각 언어에 대해 만들어진 별도 이미지가 필요합니다. 이 같은 대체 방식이 늘어나면 금방 통제가 어려워집니다.
+- 단어/문장 길이 제한 - 일부 언어는 다른 언어로 작성될 때 더 길어질 수도 있습니다. 디자인에 레이아웃이나 오버 플로우 문제 발생에 주의하세요. 디자인에 필요한 텍스트의 양을 정하거나, 디자인이 꺠질 수 있는 디자인은 하지 않도록 하는 것이 가장 좋습니다. 문자 수 제한은 제목, 레이블, 버튼과 같은 항목에서 사용됩니다. 본문이나 댓글과 같이 자유롭게 흐르는 텍스트에 대해서는 문제가 되지 않습니다.
+- 색상이 어떻게 이해될지에 대해 주의 깊게보세요 - 색상은 언어와 문화에 따라 다르게 인식됩니다. 적절한 색상을 사용하여 디자인해야 합니다.
+- 날짜와 통화 형식 - 날짜는 종종 다른 방식으로 표현됩니다. 예) 미국의 "May 31, 2012" vs. 유럽의 "31 May 2012".
+- 번역된 문자열을 연결하지 않습니다 - `"오늘의 날짜는 " + date + "입니다"` 와 같은 것은 하지마세요. 단어의 순서가 다른 언어에서는 문자가 망가지게됩니다. 대신 각 언어에 대한 매개변수와 함께 템플릿 스트링을 사용하세요. 예를 들면, 영어와 한국어로된 다음 두 문장을 보세요. `I will travel on {% date %}`, `나는 {% date %}에 여행 갈거야`. 변수의 위치는 언어의 문법에 따라 달라집니다.
+- 언어를 읽는 방향 - 영어는 왼쪽에서 오른쪽으로, 위에서 아래로 읽지만, 전통적인 일본어는 위에서 아래로, 오른쪽에서 왼쪽으로 읽습니다.
+
+###### 참고자료
+
+- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
+
+### `data-`속성은 무엇에 좋은가요?
+
+JavaScript 프레임워크가 인기있기 전에, 프론트엔드 개발자는 비표준 속성, DOM 추가 프로퍼티 등의 조작없이, DOM 자체에 추가적인 데이터를 저장하기 위해 `data-`속성을 사용했었습니다. 이는 적절한 속성이나 요소가 없는 페이지나 애플리케이션에 사용자정의 데이터를 비공개로 저장하기 위한 것입니다.
+
+요즘에는, `data-`속성을 사용하는 것을 권장하지 않습니다. 그 이유 중 하나는 사용자가 브라우저의 inspect 기능를 사용하여 데이터 속성을 쉽게 수정할 수 있다는 것입니다. 데이터 모델은 JavaScript 자체에 더 잘 저장되며, 라이브러리나 프레임워크의 데이터 바인딩을 통해 DOM을 업데이트된 상태로 유지하는 것이 더 낫습니다.
+
+###### 참고자료
+
+- http://html5doctor.com/html5-custom-data-attributes/
+- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
+
+### HTML5를 개방형 웹 플랫폼으로 간주할 때, HTML5의 구성 요소는 무엇인가요?
+
+- 의미 - 콘텐츠를 보다 더 정확하게 설명할 수 있도록 허용합니다.
+- 연결 - 새롭고 혁신적인 방법으로 서버와 통신할 수 있도록 허용합니다.
+- 오프라인과 저장소 - 웹 페이지가 클라이언트 측에서 데이터를 로컬로 저장하여, 오프라인에서보다 효율적으로 작동하도록 허용합니다.
+- 멀티미디어 - 개방형 웹에서 비디오와 오디오를 일급으로 만듭니다.
+- 2D/3D 그래픽과 효과 - 훨씬 다양한 프레젠테이션 옵션을 허용합니다.
+- 성능과 통합 - 컴퓨터 하드웨어의 성능 최적화와 개선으로 더 나은 사용을 제공합니다.
+- 장치 접근 - 다양한 입출력 장치의 사용을 허용합니다.
+- 스타일링 - 사용자가 더 세련된 테마를 사용하게 합니다.
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
+
+### `cookie`, `sessionStorage`, `localStorage` 사이의 차이점을 설명하세요.
+
+위 세 가지 기술은 모두 클라이언트 측에서 값을 저장하는 key-value 저장소 매커니즘입니다. 모두 문자열로만 값을 저장할 수 있습니다.
+
+|  | `cookie` | `localStorage` | `sessionStorage` |
+| --- | --- | --- | --- |
+| 생성자 | 클라이언트나 서버. 서버는 `Set-Cookie` 헤더를 사용할 수 있습니다 | 클라이언트 | 클라이언트 |
+| 만료 | 수동으로 설정 | 영구적 | 탭을 닫을 때 |
+| 브라우저 세션 전체에서 지속 | 만료 설정 여부에 따라 다름 | O | X |
+| 모든 HTTP 요청과 함께 서버로 보냄 | 쿠키는 `Cookie` 헤더를 통해 자동 전송됨 | X | X |
+| 용량 (도메인당) | 4kb | 5MB | 5MB |
+| 접근성 | 모든 윈도우 | 모든 윈도우 | 같은 탭 |
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
+- http://tutorial.techaltum.com/local-and-session-storage.html
+
+### `<script>`, `<script async>`, `<script defer>` 사이의 차이점을 설명하세요.
+
+- `<script>` - HTML 파싱이 중단되고, 스크립트를 즉시 가져오고 실행되며, 스크립트 실행 후 HTML 파싱이 다시 시작됩니다.
+- `<script async>` - 이 스크립트는 HTML 파싱과 병렬적으로 가져오며, 가능할 때 즉시 실행됩니다(아마 HTML 파싱이 끝나기 전). 스크립트가 페이지의 다른 스크립트들과 독립적인 경우 `async`를 사용하세요. 예) analytics.
+- `<script defer>` - 이 스크립트는 HTML 파싱과 병렬적으로 가져오지만, 페이지 파싱이 끝나면 실행됩니다. 이 것이 여러개 있는 경우, 각 스크립트는 페이지에 등장한 순서대로 실행됩니다. 스크립트가 완전히 파싱된 DOM에 의존되는 경우 `defer` 속성은 스크립트를 실행하기 전에 HTML이 완전히 파싱되도록 하는데 유용합니다. `<body>`의 끝부분에 일반 `<script>`를 두는 것과 별 차이가 없습니다. `defer` 스크립트는 `document.write`를 포함하면 안됩니다.
+
+주의: `src` 속성이 없는 스크립트 태그는 `async` 와 `defer` 속성이 무시됩니다.
+
+###### 참고자료
+
+- http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
+- https://stackoverflow.com/questions/10808109/script-tag-async-defer
+- https://bitsofco.de/async-vs-defer/
+
+### 왜 일반적으로 CSS `<link>` 태그를 `<head></head>` 태그 사이에 위치시키고, JS `<script>` 태그를 `</body>` 직전에 위치시키는 것이 좋은 방법인가요? 다른 예외적인 상황을 알고있나요?
+
+**`<head>` 안에 `<link>`를 넣는 이유**
+
+`<link>`를 `<head>` 안에 넣는 것은 최적화된 웹사이트를 구출할 때 적절한 명세의 일부입니다. 페이지가 처음로드되면 HTML과 CSS가 동시에 파싱됩니다. HTML은 DOM(Document Object Model)을 만들고 CSS는 CSSOM (CSS Object Model)을 만듭니다. 두 가지 모두 웹사이트에서 시각적인 부분을 만드는데 필요하므로, 빠른 "first meaningful paint"를 가능하게 합니다. 이 점진적 렌더링은 사이트의 성능 점수에서 측정되는 사이트 최적화의 범주입니다. 문서 최하단에 스타일시트를 두는 것은 많은 브라우저에서 점진적 렌더링을 금지하게 되는 것입니다. 몇몇 브라우저는 스타일이 변경되면 페이지의 요소를 다시 그리는 것을 피하기 위해 렌더링을 차단합니다. 그렇게되면 사용자는 빈 하얀 페이지를 보게됩니다.
+
+그 외에도 상단에 배치하면 페이지가 점진적으로 렌더링되기 때문에 UX가 향상됩니다. 문서 맨 아래에 CSS 를 두는 것은 Internet Explorer 를 비롯한 많은 브라우저에서 점진적 렌더링을 금지시키는 것입니다. 몇몇 브라우저는 스타일이 변경되면 페이지의 요소를 다시 그리지 않아도 되도록 렌더링을 차단합니다. 사용자는 빈 하얀 페이지에서 멈추게 됩니다. 또한 스타일이 없는 내용이 잠깐 보이는 것을 방지합니다. 다른 경우에는 스타일되지 않은 내용이 깜빡일 수 있습니다(flashes of unstyled content: FOUC).
+
+**`</body>` 직전에 `<script>`를 넣는 이유**
+
+`<script>`는 다운로드되고 실행되는 동안 HTML 파싱을 차단합니다. 스크립트를 맨 아래에 두면 HTML을 먼저 파싱하여 사용자에게 표시할 수 있습니다.
+
+스크립트에 `document.write()`가 있을 때는 `<script>`를 아래쪽에 두는 것이 예외적일 수 있습니다만, 요즘은 `document.write()`를 사용하지 않는 것이 좋습니다. 또한, `<script>`를 맨 아래에 두면, 브라우저가 전체 문서가 파싱될 때까지 스크립트 다운로드를 시작할 수 없다는 것을 의미합니다. 이렇게하면 DOM 요소를 조작해야하는 코드가 오류를 발생시키지 않고 전체 스크립트를 중지시키지 않습니다. `<head>`에 `<script>`를 넣어야하는 경우, `defer` 속성을 사용하세요. HTML을 파싱한 후에 스크립트를 다운로드하고 실행하는 것과 같은 효과가 있습니다.
+
+###### 참고자료
+
+- https://developer.yahoo.com/performance/rules.html#css_top
+- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
+- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
+
+### 프로그레시브 렌더링이 무엇인가요?
+
+프로그레시브 렌더링이란 콘텐츠를 가능한한 빠르게 표시하기 위해 웹 페이지의 성능을 향상시키는 데 사용되는 기술입니다. (특히, 인식되는 로딩 시간을 향상시킵니다)
+
+예전에는 광대역 인터넷을 사용하기도 했지만 불안정한 모바일 데이터 연결이 점점 인기를 끌면서 최근 개발에 있어서도 여전히 유용합니다!
+
+관련 기술 예시:
+
+- 이미지 지연 로딩 - 페이지의 이미지를 한꺼번에 로딩하지 않습니다. JavaScript를 사용하여 사용자가 이미지를 표시하는 페이지 부분으로 스크롤 할 때 이미지를 로드 할 수 있습니다.
+- 보이는 콘텐츠의 우선순위 설정 (또는 스크롤 없이 볼 수 있는 렌더링) - 가능한 한 빨리 표시하기 위해 사용자 브라우저에서 렌더링될 페이지에 필요한 최소한의 CSS/콘텐츠/스크립트 만 포함하면 `deferred` 스크립트를 사용하거나 `DOMContentLoaded`/`load` 이벤트를 사용하여 다른 리소스와 내용을 로드할 수 있습니다.
+- 비동기 HTML 프래그먼트 - 페이지의 백엔드에서 HTML 페이지의 일부를 브라우저로 가져옵니다. 이 기술에 대한 자세한 내용은 [여기](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)에서 찾을 수 있습니다.
+
+###### 참고자료
+
+- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
+- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
+
+### 이미지 태그에 `srcset` 속성을 사용하는 이유는 무엇인가요? 이 속성의 컨텐츠를 실행할 때 브라우저의 프로세스를 설명하세요.
+
+기기의 디스플레이 너비에 따라 다른 이미지를 사용자에게 제공하려는 경우 `srcset` 속성을 사용합니다 - 레티나 디스플레이를 통해 장치에 고품질 이미지를 제공하여 사용자 경험을 향상시키고, 저해상도 이미지를 저사양 기기에 제공하여 성능을 높이고 데이터 낭비를 줄입니다. (왜냐하면 더 큰 이미지를 제공하는 것은 눈에 보일 정도의 차이가 없기 때문). 예를 들면: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">`는 클라이언트의 해상도에 따라 브라우저에 small, medium, large `.jpg` 그래픽을 표시하도록 지시합니다. 첫 번째 값은 이미지 이름이고 두 번째 값은 픽셀 단위의 이미지 너비입니다. 320px 너비의 경우, 다음과 같은 계산을 따릅니다
+
+- 500 / 320 = 1.5625
+- 1000 / 320 = 3.125
+- 2000 / 320 = 6.25
+
+클라이언트의 해상도가 1x 일 경우, 1.5625가 가장 가깝고 `small.jpg`에 해당하는 `500w`가 브라우저에 의해 선택됩니다.
+
+해상도가 레티나 (2x)인 경우 브라우저는 최소값에서 가장 위로 가까운 해상도를 사용합니다. 500w (1.5625)는 1보다 크고 이미지가 보기 좋지 않을 수 있기 때문에 선택하지 않는다는 것을 의미합니다. 그래서 브라우저는 계산 결과 비율값이 2에 가까운 1000w (3.125) 이미지를 선택합니다.
+
+`srcset`는 데스크탑 디스플레이처럼 거대한 이미지를 필요로하지 않기 때문에 화면 장치를 좁히는 작은 이미지 파일을 제공하고자하는 문제를 해결합니다.
+
+`srcset`는 화면이 작은 기기에서 데스크탑 디스플레이처럼 큰 이미지가 필요하지 않기 때문에 작은 이미지 파일을 제공하는 문제를 해결합니다 — 또한 선택적으로 고해상도/저해상도 화면에 다른 해상도 이미지를 제공할 수도 있습니다.
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
+- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
+
+### 다른 HTML 템플릿 언어를 사용해본 적이 있나요?
+
+네, Pug (구 Jade), ERB, Slim, Handlebars, Jinja, Liquid 등이 있습니다. 필자의 견해로, 이들은 다소 차이는 없으며, 보여줄 데이터를 조작하는 데 유용한 필터들과 내용을 escape하는 유사한 기능을 제공합니다. 대부분의 템플릿 엔진을 사용하면 표시하기 전에 처리가 필요한 이벤트에 자신의 필터를 삽입할 수 있습니다.
+
+### 다른 답변들
+
+- https://neal.codes/blog/front-end-interview-questions-html/
+- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
diff --git a/website/i18n/kr/docusaurus-plugin-content-docs/current/javascript-questions.md b/website/i18n/kr/docusaurus-plugin-content-docs/current/javascript-questions.md
new file mode 100644
index 0000000000..1a1572c7f1
--- /dev/null
+++ b/website/i18n/kr/docusaurus-plugin-content-docs/current/javascript-questions.md
@@ -0,0 +1,1232 @@
+---
+title: JavaScript 질문
+---
+
+[프론트엔드 면접 질문 - JS 질문](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/css-questions.md)에 대한 해설입니다. Pull Request를 통한 제안, 수정 요청 환영합니다.
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+### 이벤트 위임에 대해 설명하세요.
+
+이벤트 위임은 이벤트 리스너를 하위 요소에 추가하는 대신 상위 요소에 추가하는 기법입니다. 리스너는 DOM의 event bubbling으로 인해 하위 요소에서 이벤트가 발생될 때마다 실행됩니다. 이 기술의 이점은 다음과 같습니다.
+
+- 각 하위 항목에 이벤트 핸들러를 연결하지 않고, 상위 요소에 하나의 단일 핸들러만 필요하기 때문에 메모리 사용 공간이 줄어듭니다.
+- 제거된 요소에서 핸들러를 해제하고 새 요소에 대해 이벤트를 바인딩할 필요가 없습니다.
+
+###### 참고자료
+
+- https://davidwalsh.name/event-delegate
+- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
+
+### `this`가 JavaScript에서 어떻게 작동하는지 설명하세요.
+
+`this`는 간단하게 설명하기 어렵습니다. JavaScript에서 가장 혼란스러운 개념 중 하나입니다. 대략 설명하면 `this`의 값은 함수가 호출되는 방식에 따라 달라집니다. 온라인에 많은 설명을 읽었는데, [Arnav Aggrawal](https://medium.com/@arnav_aggarwal)의 설명이 가장 명확했습니다. 다음 규칙과 같습니다.
+
+1.  함수를 호출할 때 `new` 키워드를 사용하는 경우, 함수 내부에 있는 `this`는 완전히 새로운 객체입니다.
+2.  `apply`, `call`, `bind`가 함수의 호출/생성에 사용되는 경우, 함수 내의 `this`는 인수로 전달된 객체입니다.
+3.  `obj.method()`와 같이 함수를 메서드로 호출하는 경우, `this`는 함수가 프로퍼티인 객체입니다.
+4.  함수가 자유함수로 호출되는 경우, 즉, 위의 조건 없이 호출되는 경우 `this`는 전역 객체입니다. 브라우저에서는 `window` 객체입니다. 엄격 모드(`'use strict'`) 일 경우, `this`는 전역 객체 대신 `undefined`가 됩니다.
+5.  위의 규칙 중 다수가 적용되면 더 상위 규칙이 승리하고 `this`값을 설정합니다.
+6.  함수가 ES2015 화살표 함수인 경우 위의 모든 규칙을 무시하고 생성된 시점에서 주변 스코프의 `this`값을 받습니다.
+
+상세한 설명은 [Medium의 글](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3)을 참조하세요.
+
+#### References
+
+- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
+- https://stackoverflow.com/a/3127440/1751946
+
+### 프로토타입 상속이 어떻게 작동하는지 설명하세요.
+
+이는 매우 일반적인 JavaScript 인터뷰 질문입니다. 모든 JavaScript 객체는 다른 객체에 대한 참조인 `__proto__` 프로퍼티를 가지고 있습니다. 객체의 프로퍼티에 접근할 때, 해당 객체에 해당 프로퍼티가 없으면 JavaScript 엔진은 객체의 `__proto__`과 `__proto__`의 `__proto__`등을 보고 프로퍼티 정의가 있을 때까지 찾고, 만약 객체의 프로퍼티에 접근할 때 해당 객체에 해당 프로퍼티가 없으면 프로토타입 체인 중 하나에 있거나 프로토타입 체인의 끝에 도달할 때까지 찾습니다. 이 동작은 고전적인 상속을 흉내내지만, 실제로 [상속보다 위임](https://davidwalsh.name/javascript-objects)에 더 가깝습니다.
+
+###### 참고자료
+
+- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
+- https://davidwalsh.name/javascript-objects
+
+### AMD vs CommonJS에 대해 어떻게 생각하나요?
+
+두 가지 모두 ES2015가 등장하기 전까지 JavaScript에 기본적으로 존재하지 않는 모듈 시스템을 구현하는 방법입니다. CommonJS는 동기식인 반면 AMD(Asynchronous Module Definition - 비동기식 모듈 정의)는 분명히 비동기식입니다. CommonJS는 서버사이드 개발을 염두에 두고 설계되었으며, AMD는 모듈의 비동기 로딩을 지원하므로 브라우저용으로 더 많이 사용됩니다.
+
+AMD은 구문이 매우 장황하고, CommonJS은 다른 언어처럼 import 문을 작성하는 스타일에 더 가깝습니다. 대부분의 경우 AMD를 필요로 하지 않습니다. 모든 JavaScript를 연결된 하나의 번들 파일로 제공하면 비동기 로딩 속성의 이점을 누릴 수 없기 때문입니다. 또한 CommonJS 구문은 모듈 작성의 노드 스타일에 가깝고 클라이언트 사이드와 서버사이드 JavaScript 개발 사이를 전환할 때 문맥 전환 오버 헤드가 적습니다.
+
+ES2015 모듈이 동기식 및 비동기식 로딩을 모두 지원하는 것이 반가운 것은 마침내 하나의 접근 방식만 고수할 수 있다는 점입니다. 브라우저와 노드에서 완전히 작동되지는 않지만, 언제나 트랜스파일러를 사용하여 코드를 변환할 수 있습니다.
+
+###### 참고자료
+
+- https://auth0.com/blog/javascript-module-systems-showdown/
+- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
+
+### 다음이 IIFE로 작동하지 않는 이유를 설명하세요: `function foo(){ }();`를 IIFE로 만들기 위해서는 무엇을 바꿔야하나요?
+
+IIFE는 즉시 함수 호출 표현식(Immediately Invoked Function Expressions)을 의미합니다. JavaScript parser는 `function foo(){ }();`을 `function foo(){ }`와 `();`로 읽습니다. 전자는 **함수 선언**이며 후자(한 쌍의 중괄호)는 함수를 호출하려고 시도했지만, 이름이 지정되지 않았기 때문에 `Uncaught SyntaxError : Unexpected token )`을 발생시킵니다.
+
+괄호를 추가하여 고치는 두 가지 방법이 있습니다: `(function foo(){ })()` 그리고 `(function foo(){ }())`. `function`으로 시작하는 문은 **함수 선언**으로 간주됩니다. 이 함수를 `()`로 묶으면 **함수 식**이 되고, 이렇게하면 다음 `()`로 함수를 실행할 수 있습니다. 이러한 함수는 전역 범위에 노출되지 않으며, 본문 내에서 이 함수 자체를 참조할 필요가 없는 경우에는 해당 함수의 이름을 생략할 수도 있습니다.
+
+`void function foo(){ }();`처럼 `void` 연산자를 사용할 수도 있습니다. 불행히도, 이러한 접근방식에는 한 가지 문제가 있습니다. 주어진 표현식의 평가는 항상 `undefined`이므로, IIFE 함수가 무언가를 반환하면, 사용할 수 없습니다. 예:
+
+```js
+// Don't add JS syntax to this code block to prevent Prettier from formatting it.
+const foo = void (function bar() {
+  return 'foo';
+})();
+
+console.log(foo); // undefined
+```
+
+###### 참고자료
+
+- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
+
+### `null`, `undefined`, `undeclared`의 차이점은 무엇인가요? 어떻게 이 상태들에 대한 확인을 할 것인가요?
+
+**Undeclared** 변수는 이전에 `var`, `let`, `const`를 사용하여 생성되지 않은 식별자에 값을 할당할 때 생성됩니다. `Undeclared` 변수는 현재 범위 외부에 전역으로 정의됩니다. strict 모드에서는 `Undeclared` 변수에 할당하려고 할 때, `ReferenceError`가 발생합니다. `Undeclared` 변수는 전역 변수처럼 좋지 않습니다. 이것들은 모두 사용을 피하세요! 이를 검사하려면, 사용할 때 `try`/`catch` 블록에 감싸세요.
+
+```js
+function foo() {
+  x = 1; // strict 모드에서 ReferenceError를 발생시킵니다.
+}
+
+foo();
+console.log(x); // 1
+```
+
+`undefined` 변수는 선언되었지만, 값이 할당되지 않은 변수입니다. 이는 `undefined` 타입입니다. 함수가 실행 결과에 따라 아무값도 반환하지 않으면, 변수에 할당되며, 그 변수가 `undefined` 값을 갖습니다. 이를 검사하기 위해, 엄격한 (`===`) 연산자 또는 `typeof`에 `undefined` 문자열을 사용하여 비교하세요. 확인을 위해 추상 평등 연산자(`==`)를 사용해서는 안되며, 이는 값이 `null`이면 `true`를 반환합니다.
+
+```js
+var foo;
+console.log(foo); // undefined
+console.log(foo === undefined); // true
+console.log(typeof foo === 'undefined'); // true
+
+console.log(foo == null); // true. 옳지않습니다. 이렇게 사용하지 마세요.
+
+function bar() {}
+var baz = bar();
+console.log(baz); // undefined
+```
+
+`null`인 변수는 `null` 값이 명시적으로 할당된 것입니다. 그것은 값을 나타내지 않으며, 명시적으로 할당됐다는 점에서 `undefined`와 다릅니다. `null`을 체크하기 위해서 단순히 완전 항등 연산자(`===`)를 사용하여 비교하면 됩니다. 위와 같이, 추상 평등 연산자 (`==`)를 사용해서는 안되며, 값이 `undefined`이면 `true`를 반환합니다.
+
+```js
+var foo = null;
+console.log(foo === null); // true
+
+console.log(foo == undefined); // true. 옳지않습니다. 이렇게 사용하지 마세요.
+```
+
+개인적 습관으로, 저는 변수를 선언하지 않거나(undeclared) 할당하지 않은 상태(unassigned)로 두지 않습니다. 아직 사용하지 않으려는 경우, 선언한 후에 명시적으로 `null`을 할당할 것입니다. 작업시 linter를 사용하면, 일반적으로 Undeclared 변수를 참조하지는 않는지 확인할 수 있습니다.
+
+###### 참고자료
+
+- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
+
+### 클로저는 무엇이며, 어떻게/왜 사용하나요?
+
+클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. "렉시컬"은 렉시컬 범위 지정이 변수가 사용 가능한 위치를 결정하기 위해 소스 코드 내에서 변수가 선언된 위치를 사용한다는 사실을 나타냅니다. 클로저는 외부 함수가 반환된 후에도 외부 함수의 변수 범위 체인에 접근할 수 있는 함수입니다.
+
+**왜 클로저를 사용합니까?**
+
+- 클로저로 데이터 프라이버시 / private method를 모방. 일반적으로 [모듈 패턴](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript)에 사용됩니다.
+- [부분 적용 또는 currying](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x).
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
+- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
+
+### `.forEach` 루프와 `.map()` 루프 사이의 주요 차이점을 설명할 수 있나요? 왜 둘 중 하나를 선택할 것인가요?
+
+이 두 함수의 차이점을 이해하기 위해 각 함수가 무엇을 하는지 살펴보겠습니다.
+
+**`forEach`**
+
+- 배열의 요소를 반복합니다.
+- 각 요소에 대해 콜백을 실행합니다.
+- 값을 반환하지 않습니다.
+
+```js
+const a = [1, 2, 3];
+const doubled = a.forEach((num, index) => {
+  // num나 index로 무언가 합니다.
+});
+
+// doubled = undefined
+```
+
+**`map`**
+
+- 배열의 요소를 반복합니다.
+- 각 요소에서 함수를 호출하여 결과로 새 배열을 작성하여 각 요소를 새 요소에 매핑합니다.
+
+```js
+const a = [1, 2, 3];
+const doubled = a.map((num) => {
+  return num * 2;
+});
+
+// doubled = [2, 4, 6]
+```
+
+`.forEach`와 `.map()`의 가장 큰 차이점은 `.map()`이 새로운 배열을 반환한다는 것입니다. 결과가 필요하지만 원본 배열을 변경하고 싶지 않으면, `.map()`이 확실한 선택입니다. 단순히 배열을 반복할 필요가 있다면, `forEach`가 좋은 선택입니다.
+
+###### 참고자료
+
+- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
+
+### 익명 함수의 일반적인 사용 사례는 무엇인가요?
+
+익명함수는 IIFE로 사용되어 지역 범위 내에서 일부 코드를 캡슐화하므로 선언된 변수가 전역 범위로 누출되지 않습니다.
+
+```js
+(function () {
+  // 코드
+})();
+```
+
+한 번 사용되고 다른 곳에서는 사용할 필요가 없는 콜백으로 사용됩니다. 함수 본체를 찾기 위해 다른 곳을 찾아볼 필요 없이 코드를 호출하는 코드 바로 안에 핸들러가 정의되어 있으면 코드가 보다 독립적이고 읽기 쉽게 보일 것입니다.
+
+```js
+setTimeout(function () {
+  console.log('Hello world!');
+}, 1000);
+```
+
+함수형 프로그래밍 또는 Lodash에 대한 인수(콜백과 유사)로 사용.
+
+```js
+const arr = [1, 2, 3];
+const double = arr.map(function (el) {
+  return el * 2;
+});
+console.log(double); // [2, 4, 6]
+```
+
+###### 참고자료
+
+- https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
+- https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
+
+### 코드를 어떻게 구성하나요? (모듈 패턴, 고전적인 상속?)
+
+과거에는 Backbone 모델을 만들고 그 모델에 메소드를 연결하는 등 OOP 접근 방식을 장려하는 모델에 Backbone 을 사용했습니다.
+
+모듈 패턴은 여전히​​ 훌륭하지만, 요즘에는 React/Redux 기반의 Flux 아키텍처를 사용합니다. 이 아키텍처는 단방향 프로그래밍 방식을 권장합니다. 저는 평범한 객체를 사용하여 응용 프로그램의 모델을 표현하고 이러한 객체를 조작하는 유틸리티 순수 함수를 작성합니다. 상태는 다른 Redux 응용 프로그램에서와 마찬가지로 action 및 reducer를 사용하여 조작됩니다.
+
+가능한 경우 고전적인 상속을 사용하지 않습니다. 저는 [이 규칙들](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4)을 유지합니다.
+
+### 호스트 객체와 내장 객체의 차이점은 무엇인가요?
+
+내장 객체는 ECMAScript 사양에 정의된 JavaScript 언어의 일부인 객체입니다. (예: `String`, `Math`, `RegExp`, `Object`, `Function` 등)
+
+호스트 객체는 `window`, `XMLHTTPRequest` 등과 같이 런타임 환경 (브라우저 or 노드)에 의해 제공됩니다.
+
+###### 참고자료
+
+- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
+
+### `function Person(){}`, `var person = Person()`, `var person = new Person()`의 차이점은 무엇인가요?
+
+이 질문은 굉장해 애매합니다. 질문의 의도에 대한 저의 최선의 추측은 JavaScript의 생성자에 대해 묻는 것입니다. 엄밀히 말하면, `function Person(){}`은 정상적인 함수 선언일 뿐입니다. 이 컨벤션은 함수생성자로 사용하기 위해 함수이름에 PascalCase를 사용합니다.
+
+`var person = Person()`은 생성자가 아니며 `Person`을 함수로 호출합니다. 함수를 생성자로 사용하려는 경우에 이렇게 호출하는 것은 일반적인 실수입니다. 일반적으로 생성자는 아무것도 반환하지 않으므로 일반 함수처럼 생성자를 호출하면 `undefined`가 반환되고 지정된 변수에 할당됩니다.
+
+`var person = new Person()`은 `Person.prototype`을 상속받은 `new` 연산자를 사용하여 `Person` 객체의 인스턴스를 생성합니다. 또 다른 방법은 `Object.create`를 사용하는 것입니다: `Object.create(Person.prototype)`.
+
+```js
+function Person(name) {
+  this.name = name;
+}
+
+var person = Person('John');
+console.log(person); // undefined
+console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined
+
+var person = new Person('John');
+console.log(person); // Person { name: "John" }
+console.log(person.name); // "john"
+```
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
+
+### `.call`과 `.apply`의 차이점은 무엇인가요?
+
+`.call`과 `.apply`는 모두 함수를 호출하는데 사용되며, 첫 번째 매개변수는 함수 내에서 `this`의 값으로 사용됩니다. 그러나 `.call`은 쉼표로 구분된 인수를 두 번째 인수로 취하고 `.apply`는 인수의 배열을 두 번째 인수로 취합니다. `call`은 `C`: `Comma` 로 구분되며, `apply`는 인수 배열인 `A`: `arguments` 라고 기억하면 쉽습니다.
+
+```js
+function add(a, b) {
+  return a + b;
+}
+
+console.log(add.call(null, 1, 2)); // 3
+console.log(add.apply(null, [1, 2])); // 3
+```
+
+### `Function.prototype.bind`에 대해 설명하세요.
+
+[MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)에서 인용:
+
+> `bind()` 메소드는 호출될 때, this 키워드가 주어진 인자 값으로 설정되고, 새로운 함수가 호출될 때, 앞쪽의 매개변수도 자신의 인자를 사용해 미리 순서대로 채워놓은 새로운 함수를 반환합니다.
+
+저의 경험상, 다른 함수로 전달하고자 하는 클래스의 메소드에서 `this`의 값을 바인딩할 때 가장 유용합니다. 이는 React 컴포넌트에서 자주 사용됩니다.
+
+###### 참고자료
+
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
+
+### 언제 `document.write()`를 사용하나요?
+
+`document.write()`는 `document.open()`에 의해 열린 문서 스트림에 텍스트 문자열을 씁니다. 페이지가 로드된 후에 `document.write()`가 실행되면 `document.open`을 호출하여 문서 전체를 지우고 (`<head>`와 `<body>`를 지웁니다!). 문자열로 주어진 매개 변수 값으로 대체합니다. 그러므로 일반적으로 위험하고 오용되기 쉽습니다.
+
+`document.write()`가 코드분석이나 [JavaScript가 활성화된 경우에만 작동하는 스타일을 포함하고 싶을 때](https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html) 사용되는 경우를 설명하는 온라인 답변이 몇 가지 있습니다. 심지어 HTML5 보일러 플레이트에서 [스크립트를 병렬로 로드하고 실행 순서를 보존](https://github.com/paulirish/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag)할 때도 사용됩니다! 그러나, 저는 그 이유가 시대에 뒤떨어진 것으로 생각하고 있으며, 현재는 `document.write()`를 사용하지 않고도 할 수 있습니다. 이것이 틀렸다면 고쳐주세요.
+
+###### 참고자료
+
+- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
+- https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
+
+### Feature detection, Feature inference, UA String의 차이점은 무엇인가요?
+
+**Feature Detection**
+
+Feature Detection은 브라우저가 특정 코드 블록을 지원하는지에 따라 다른 코드를 실행하도록 하여, 일부 브라우저에서 항상 오류 대신 무언가 작동하도록 합니다. 예:
+
+```js
+if ('geolocation' in navigator) {
+  // navigator.geolocation를 사용할 수 있습니다
+} else {
+  // 부족한 기능 핸들링
+}
+```
+
+[Modernizr](https://modernizr.com/)는 Feature detection을 처리 ​​할 수 있는 훌륭한 라이브러리입니다.
+
+**Feature Inference**
+
+Feature inference는 Feature detection과 마찬가지로 기능을 확인하지만 다른 함수도 존재한다고 가정하고 사용합니다. 예:
+
+```js
+if (document.getElementsByTagName) {
+  element = document.getElementById(id);
+}
+```
+
+이것은 권장하지 않습니다. Feature detection이 더 확실합니다.
+
+**UA String**
+
+네트워크 프로토콜 피어가 요청하는 소프트웨어 유저 에이전트의 응용 프로그램 유형, 운영 체제, 소프트웨어 공급 업체 또는 소프트웨어 버전을 식별할 수 있도록 해주는 browser-reported String입니다. `navigator.userAgent` 를 통해 접근 할 수 있습니다. 하지만 문자열은 구문 분석하기 까다로우며 스푸핑될 수 있습니다. 예를 들어, Chrome은 Chrome과 Safari로 모두 보고됩니다. Safari를 감지하기 위해서는 Safari 문자열이 있는지와 Chrome 문자열이 없는지 확인해야 합니다. 이 방법은 사용하지 마세요.
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
+- https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
+
+### Ajax에 대해 가능한 한 자세히 설명하세요.
+
+Ajax(asynchronous JavaScript and XML)는 비동기 웹 응용 프로그램을 만들기 위해 클라이언트 측에서 사용되는 웹 개발 기술의 집합입니다. Ajax를 사용하면 웹 애플리케이션은 기존 페이지의 화면 및 동작을 방해하지 않으면서 백그라운드에서 비동기적으로 서버로 데이터를 보내고 서버에서 데이터를 받아올 수 있습니다. Ajax는 프리젠테이션 레이어에서 데이터 교환 레이어를 분리함으로써, 웹페이지 및 확장 웹 애플리케이션이 전체 페이지를 다시 로드 할 필요 없이 동적으로 컨텐츠를 변경할 수 있도록 합니다. 실제로 최근에는 일반적으로 네이티브 JavaScript의 장점 때문에 XML대신 JSON을 사용합니다.
+
+`XMLHttpRequest` API는 비동기 통신에 자주 사용되며, 최근에는 `fetch()` API가 자주 사용됩니다.
+
+###### 참고자료
+
+- https://en.wikipedia.org/wiki/Ajax_(programming)
+- https://developer.mozilla.org/en-US/docs/AJAX
+
+### Ajax를 사용하는 것의 장단점은 무엇인가요?
+
+**장점**
+
+- 상호작용성이 좋아집니다. 서버의 새로운 컨텐츠를 전체 페이지를 다시로드할 필요 없이 동적으로 변경할 수 있습니다.
+- 스크립트나 스타일 시트는 한 번만 요청하면 되므로 서버에 대한 연결을 줄여줍니다.
+- 상태를 페이지에서 관리 할 수 ​​있습니다. 메인 컨테이너 페이지가 다시 로드되지 않기 때문에 JavaScript의 변수와 DOM의 상태가 유지됩니다.
+- 기본적으로 SPA의 대부분의 장점과 같습니다.
+
+**단점**
+
+- 동적 웹 페이지는 북마크하기 어렵습니다.
+- 브라우저에서 JavaScript가 비활성화된 경우 작동하지 않습니다.
+- 일부 웹 크롤러는 JavaScript를 실행하지 않으며 JavaScript에 의해 로드된 콘텐츠를 볼 수 없습니다.
+- SPA의 대부분의 단점과 같습니다.
+
+### JSONP가 어떻게 동작하는지(그리고 Ajax와 어떻게 다른지)를 설명하세요.
+
+JSONP(JSON with Padding)는 현재 페이지에서 cross-origin 도메인으로의 Ajax 요청이 허용되지 않기 때문에 웹 브라우저에서 cross-domain 정책을 우회하는 데 일반적으로 사용되는 방법입니다.
+
+JSONP는 `<script>`태그를 통해 cross-origin 도메인에 요청하고 보통 `callback`쿼리 매개 변수(예: `https://example.com?callback=printData`)로 요청합니다. 그러면 서버는 `printData`라는 함수 안에 데이터를 래핑하여 클라이언트로 반환합니다.
+
+```html
+<!-- https://mydomain.com -->
+<script>
+  function printData(data) {
+    console.log(`My name is ${data.name}!`);
+  }
+</script>
+
+<script src="https://example.com?callback=printData"></script>
+```
+
+```js
+// https://example.com?callback=printData 에서 로드된 파일
+printData({ name: 'Yang Shun' });
+```
+
+클라이언트는 전역 범위에 있는 `printData` 함수를 가져야만 하고, cross-origin domain으로부터의 응답이 수신될 때 함수가 클라이언트에 의해 실행됩니다.
+
+JSONP는 안전하지 않을 수 있으며, 보안 관련 이슈가 있습니다. JSONP는 실제 JavaScript고, JavaScript가 할 수 있는 모든 작업을 수행할 수 있으므로 JSONP 데이터 공급자를 신뢰해야만 합니다.
+
+요즘에는 [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing)가 권장되는 접근 방식이며 JSONP는 해킹으로 간주됩니다.
+
+###### 참고자료
+
+- https://stackoverflow.com/a/2067584/1751946
+
+### JavaScript 템플릿을 사용한 적이 있나요? 사용해봤다면, 어떤 라이브러리를 사용했나요?
+
+네. Handlebars, Underscore, Lodash, AngularJS, JSX. 저는 AngularJS에서의 템플릿을 좋아하지 않았습니다. 지시자에서 문자열을 많이 사용하게 되며 오타가 감지되지 않기 때문입니다. JSX는 JavaScript에 가깝고 배워야 하는 새로운 문법이 거의 없기 때문에 더 좋아합니다. 요즘에는, Third-party 라이브러리에 의존하지 않고 템플릿을 만드는 빠른 방법으로 ES2015 템플릿 문자열 리터럴을 사용할 수도 있습니다.
+
+```js
+const template = `<div>My name is: ${name}</div>`;
+```
+
+그러나 템플릿 라이브러리와 달리 컨텐츠가 이스케이프되지 않으므로 위의 접근 방식에서 잠재적 XSS를 알고 있어야 합니다.
+
+### `호이스팅`에 대해 설명하세요.
+
+호이스팅은 코드에서 변수 선언의 동작을 설명하는데 사용되는 용어입니다. `var` 키워드로 선언되거나 초기화된 변수는 현재 스코프의 최상위까지 `옮겨`집니다. 이것을 호이스팅이라고 부릅니다. 그러나 선언문만 `호이스팅`되며 할당(있는 경우)은 그대로 있게 됩니다.
+
+사실 선언은 실제로 이동되지 않습니다 - JavaScript 엔진은 컴파일 중에 선언을 파싱하고 선언과 해당 스코프를 인식합니다. 선언을 해당 스코프의 맨 위로 옮겨지는 것으로 생각하여 동작을 이해하는 것이 더 쉬울 뿐입니다. 몇 가지 예를 들어 설명해 보겠습니다.
+
+```js
+// var 선언이 호이스팅됩니다
+console.log(foo); // undefined
+var foo = 1;
+console.log(foo); // 1
+
+// let/const 선언은 호이스팅되지 않습니다.
+console.log(bar); // ReferenceError: bar is not defined
+let bar = 2;
+console.log(bar); // 2
+```
+
+함수 선언은 함수몸체가 호이스팅되는 반면, 변수 선언 형태로 작성된 함수 표현식은 변수 선언만 호이스팅됩니다.
+
+```js
+// 함수 선언
+console.log(foo); // [Function: foo]
+foo(); // 'FOOOOO'
+function foo() {
+  console.log('FOOOOO');
+}
+console.log(foo); // [Function: foo]
+
+// 함수 표현식
+console.log(bar); // undefined
+bar(); // Uncaught TypeError: bar is not a function
+var bar = function () {
+  console.log('BARRRR');
+};
+console.log(bar); // [Function: bar]
+```
+
+### event bubbling에 대해 설명하세요.
+
+DOM 요소에서 이벤트가 트리거되면 리스너가 연결되어 있는 경우 이벤트 처리를 시도한 다음, 해당 이벤트가 부모에게 bubbling되고 부모에서 같은 이벤트가 발생합니다. 이 bubbling은 요소의 최상단 부모요소인 `document`까지 계속적으로 발생시킵니다. 이벤트 bubbling은 이벤트 위임의 작동 메커니즘입니다.
+
+### "attribute"와 "property"의 차이점은 무엇인가요?
+
+attribute는 HTML 마크업에 정의되지만 property는 DOM에 정의됩니다. 차이점을 설명하기 위해 HTML에 다음 텍스트 필드가 있다고 가정해 봅시다: `<input type="text" value="Hello">`.
+
+```js
+const input = document.querySelector('input');
+console.log(input.getAttribute('value')); // Hello
+console.log(input.value); // Hello
+```
+
+그러나 텍스트 필드에 "World!"를 추가하면 이렇게 될것입니다.
+
+```js
+console.log(input.getAttribute('value')); // Hello
+console.log(input.value); // Hello World!
+```
+
+###### 참고자료
+
+- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
+
+### 내장 JavaScript 객체를 확장하는 것이 좋은 생각이 아닌 이유는 무엇인가요?
+
+내장/네이티브 JavaScript 객체를 확장한다는 것은 prototype에 속성/함수를 추가한다는 것을 의미합니다. 이것은 처음에는 좋은 생각처럼 보일 수 있지만 실제로는 위험합니다. 여러분의 코드가 동일한 `contains` 메소드를 추가함으로써 `Array.prototype`을 확장하는 여러가지 라이브러리를 사용한다고 상상해보십시오. 이러한 구현은 메소드를 서로 덮어쓰게 되며, 이 두 메소드의 동작이 동일하지 않으면 코드가 망가질 것입니다.
+
+네이티브 객체를 확장할 수 있는 유일한 경우는 polyfill을 만들 때입니다. JavaScript 사양의 일부이지만, 오래된 브라우저이기 때문에 사용자 브라우저에 없을 수도 있는 메서드에 대한 고유한 구현을 제공해야할 경우 뿐입니다.
+
+###### 참고자료
+
+- http://lucybain.com/blog/2014/js-extending-built-in-objects/
+
+### document `load` 이벤트와 document `DOMContentLoaded` 이벤트의 차이점은 무엇인가요?
+
+`DOMContentLoaded` 이벤트는 스타일시트, 이미지, 서브프레임 로딩을 기다리지 않고, 초기 HTML 문서가 완전히 로드되고 파싱되면 발생합니다.
+
+`window`의 `load` 이벤트는 DOM과 모든 종속 리소스와 에셋들이 로드된 후에 ​​발생합니다.
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
+- https://developer.mozilla.org/en-US/docs/Web/Events/load
+
+### `==`와 `===`의 차이점은 무엇인가요?
+
+`==`는 추상 동등 연산자이고 `===`는 완전 동등 연산자입니다. `==`연산자는 타입 변환이 필요한 경우 타입 변환을 한 후에 동등한지 비교할 것입니다. `===`연산자는 타입 변환을 하지 않으므로 두 값이 같은 타입이 아닌 경우 `===`는 `false`를 반환합니다. `==`를 사용하면 다음과 같은 무서운 일이 발생할 수 있습니다.
+
+```js
+1 == '1'; // true
+1 == [1]; // true
+1 == true; // true
+0 == ''; // true
+0 == '0'; // true
+0 == false; // true
+```
+
+저의 조언은 편의상 `null`과 `undefined`를 비교할 때를 제외하고, `==`연산자를 절대 사용하지 않는 것입니다. `a == null`은 `a`가 `null` 또는 `undefined`이면 `true`를 반환합니다.
+
+```js
+var a = null;
+console.log(a == null); // true
+console.log(a == undefined); // true
+```
+
+###### 참고자료
+
+- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
+
+### JavaScript와 관련하여 same-origin 정책을 설명하세요.
+
+same-origin 정책은 JavaScript가 도메인 경계를 넘어서 요청하는 것을 방지합니다. origin은 URI 체계, 호스트 이름, 포트 번호의 조합으로 정의됩니다. 이 정책은 한 페이지의 악의적인 스크립트가 해당 페이지의 DOM을 통해 다른 웹 페이지의 중요한 데이터에 접근하는 것을 방지합니다.
+
+###### 참고자료
+
+- https://en.wikipedia.org/wiki/Same-origin_policy
+
+### 다음이 작동하게 만들어보세요.
+
+```js
+duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
+```
+
+```js
+function duplicate(arr) {
+  return arr.concat(arr);
+}
+
+duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
+```
+
+### 왜 Ternary expression이라고 부르고, "Ternary"라는 단어는 무엇을 나타내나요?
+
+"Ternary"는 "삼항"을 나타내고 삼항 표현식은 세가지 피연산자, 테스트 조건문, "then"표현식, "else"표현식을 받습니다. 삼항 표현식은 JavaScript에만 해당되는 것이 아니며 왜 이 목록에 있는지 잘 모르겠습니다.
+
+###### 참고자료
+
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
+
+### `"use strict";` 이 무엇인가요? 사용시 장단점이 무엇인가요?
+
+'use strict'는 전체 스크립트나 개별 함수에 엄격 모드를 사용하는데 사용되는 명령문입니다. Strict 모드는 JavaScript 다양한 자바스크립트를 제한하는 방법입니다.
+
+장점:
+
+- 실수로 전역변수를 만드는 것이 불가능합니다.
+- 암묵적으로 실패한 예외를 throw하지 못하는 할당을 만듭니다.
+- 삭제할 수 없는 속성을 삭제하려고 시도합니다. (시도 효과가 없을 때까지)
+- 함수의 매개변수 이름은 고유해야합니다.
+- `this`는 전역 컨텍스트에서 undefined입니다.
+- 예외를 발생시키는 몇 가지 일반적인 코딩을 잡아냅니다.
+- 헷갈리거나 잘 모르는 기능을 사용할 수 없게 합니다.
+
+단점:
+
+- 일부 개발자는 익숙하지 않은 기능이 많습니다.
+- `function.caller`와 `function.arguments`에 더 이상 접근할 수 없습니다.
+- 서로 다른 엄격한 모드로 작성된 스크립트를 병합하면 문제가 발생할 수 있습니다.
+
+전반적으로 장점이 단점보다 중요하다고 생각합니다. 엄격 모드가 차단하는 기능에 의존하지 않아도 됩니다. 엄격한 모드를 사용하는 것을 추천합니다.
+
+###### 참고자료
+
+- http://2ality.com/2011/10/strict-mode-hatred.html
+- http://lucybain.com/blog/2014/js-use-strict/
+
+### 100까지 증가하면서 `3`의 배수에는 `fizz`를 출력하고, `5`의 배수에는 `buzz`를 출력하고, `3`과 `5`의 배수에는 `fizzbuzz`를 출력하는 for loop를 만드세요.
+
+[Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724)의 FizzBuzz를 확인해보세요.
+
+```js
+for (let i = 1; i <= 100; i++) {
+  let f = i % 3 == 0,
+    b = i % 5 == 0;
+  console.log(f ? (b ? 'FizzBuzz' : 'Fizz') : b ? 'Buzz' : i);
+}
+```
+
+저는 인터뷰 중에 위와 같이 쓰라고 조언하지는 않습니다. 길지만 분명한 접근 방식을 고수하세요. FizzBuzz의 더 다양한 버전을 보려면 아래의 참조 링크를 확인하세요.
+
+###### 참고자료
+
+- https://gist.github.com/jaysonrowe/1592432
+
+### 일반적으로 웹 사이트의 전역 스코프를 그대로 두고 건드리지 않는 것이 좋은 이유는 무엇인가요?
+
+모든 스크립트는 전역 스코프에 접근할 수 있으며, 모든 사람이 전역 네임스페이스를 사용하여 변수를 정의하면 충돌이 발생할 수 있습니다. 모듈 패턴 (IIFEs)을 사용하여 변수를 로컬 네임스페이스 내에 캡슐화하세요.
+
+### 왜 `load` 이벤트와 같은 것을 사용하나요? 이 이벤트에는 단점이 있나요? 다른 대안을 알고 있나요? 알고 있다면 왜 그것을 사용할 건가요?
+
+`load` 이벤트는 문서로딩 프로세스가 끝날 때 발생됩니다. 이 시점에서 문서의 모든 객체가 DOM에 있고, 모든 이미지, 스크립트, 링크 및 하위 프레임로딩이 완료됩니다.
+
+DOM 이벤트 `DOMContentLoaded`는 페이지의 DOM이 생성된 후에 발생하지만 다른 리소스가 로딩되기를 기다리지 않습니다. 이것은 초기화되기 전에 전체 페이지가 로드될 필요가 없는 경우에 선호됩니다.
+
+TODO.
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
+
+### single page app이 무엇인지 설명하고 SEO-friendly하게 만드는 방법을 설명하세요.
+
+아래는 [Grab Front End Guide](https://github.com/grab/front-end-guide)에서 가져온 것이며, 우연히도 제가 작성했습니다!
+
+웹 개발자는 요즘 웹 사이트가 아닌 웹 앱으로 제작한 제품을 언급합니다. 두 가지 용어 사이에는 엄격한 차이는 없지만, 웹 앱은 대화형, 동적인 경향이 있어 사용자가 작업을 수행하고 작업에 대한 응답을 받을 수 있습니다. 전통적으로, 브라우저는 서버에서 HTML을 받아 렌더링합니다. 사용자가 다른 URL로 이동하면, 전체페이지 새로고침이 필요하며 서버는 새페이지에 대해 새 HTML을 보냅니다. 이를 server-side rendering이라고합니다.
+
+그러나 현대 SPA에서는 대신 client-side rendering이 사용됩니다. 브라우저는 전체 애플리케이션에 필요한 스크립트(프레임워크, 라이브러리, 앱 코드) 및 스타일시트와 함께 서버의 초기 페이지를 로드합니다. 사용자가 다른 페이지로 이동하면 페이지 새로고침이 발생하지 않습니다. 페이지의 URL은 [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)를 통해 업데이트됩니다. 일반적으로 JSON 형식의 새 페이지에 필요한 새 데이터는 브라우저에서 [AJAX](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started) 요청을 통해 서버로 전송됩니다. SPA는 초기 페이지 로딩에서 미리 다운로드된 JavaScript를 통해 페이지를 동적으로 업데이트합니다. 이 모델은 네이티브 모바일 앱의 작동 방식과 유사합니다.
+
+장점들:
+
+- 전체 페이지 새로고침으로 인해 페이지 탐색 사이에 하얀 화면이 보이지 않아 앱이 더 반응적으로 느껴지게 됩니다.
+- 동일한 애셋을 페이지 로드마다 다시 다운로드할 필요가 없으므로 서버에 대한 HTTP 요청이 줄어듭니다.
+- 클라이언트와 서버 사이의 고려해야 할 부분을 명확하게 구분합니다. 서버 코드를 수정하지 않고도 다양한 플랫폼(예: 모바일, 채팅 봇, 스마트워치)에 맞는 새로운 클라이언트를 쉽게 구축할 수 있습니다. 또한 API 규약이 깨지지 않는 한도 내에서 클라이언트와 서버에서 기술 스택을 독립적으로 수정할 수 있습니다.
+
+단점들:
+
+- 여러 페이지에 필요한 프레임워크, 앱 코드, 애셋로드로 인해 초기 페이지로드가 무거워집니다.
+- 모든 요청을 단일 진입점으로 라우트하고 클라이언트 측 라우팅이 그 한곳에서 인계받을 수 있도록 서버를 구성하는 추가 단계가 필요합니다.
+- SPA는 콘텐츠를 렌더링하기 위해 JavaScript에 의존하지만 모든 검색 엔진이 크롤링 중에 JavaScript를 실행하지는 않으며 페이지에 빈 콘텐츠가 표시될 수 있습니다. 이로 인해 의도치 않게 앱의 검색 엔진 최적화(SEO)가 어려워집니다. 그러나 대부분의 경우 앱을 제작할 때 검색 엔진에서 모든 콘텐츠 색인할 필요는 없으므로 SEO가 가장 중요한 요소는 아닙니다. 이를 극복하기 위해, 앱을 서버 측 렌더링하거나 [Prerender](https://prerender.io/)와 같은 서비스를 사용하여 "브라우저에서 JavaScript를 렌더링하고, 정적 HTML을 저장한 다음, 크롤러에게 반환합니다".
+
+###### 참고자료
+
+- https://github.com/grab/front-end-guide#single-page-apps-spas
+- http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
+- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
+- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
+
+### Promises와 그 Polyfill에 대한 당신의 경험은 어느 정도인가요?
+
+Promise는 어느 시점에 resolve된 값 또는 resolve되지 않은 이유(예: 네트워크 오류가 발생) 중 하나의 값을 생성할 수 있는 객체입니다. promise는 fulfilled, rejected, pending 3가지 상태 중 하나일 수 있습니다. promise 사용자는 콜백을 붙여서 fulfill된 값이나 reject된 이유를 처리할 수 ​​있습니다.
+
+일반적인 polyfill은 `$.deferred`, Q, Bluebird 입니다만, 모두가 스펙을 따르는 것은 아닙니다. ES2015는 즉시 사용할 수 있는 Promise를 지원하며 일반적으로 요즘엔 polyfill이 필요하지 않습니다.
+
+###### 참고자료
+
+- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
+
+### Callback 대신에 Promise를 사용할 때의 장점과 단점은 무엇인가요?
+
+**장점**
+
+- 가독성이 떨어질 수 있는 콜백 지옥을 피할 수 있습니다.
+- `.then()`을 이용하여 가독성 좋은 연속적인 비동기 코드를 쉽게 작성할 수 있습니다.
+- `Promise.all()`을 사용하여 병렬 비동기 코드를 쉽게 작성할 수 있습니다.
+- Promise를 통해 콜백만 사용하는 코딩방식에 있는 다음과 같은 상황이 발생하지 않습니다:
+  - 콜백을 너무 빨리 호출함
+  - 콜백을 너무 늦게 호출하거나 호출하지 않음
+  - 콜백을 너무 적게 호출하거나 너무 많이 호출함
+  - 필요한 환경/매개변수를 전달하는데 실패함
+  - 발생가능한 오류/예외를 무시함
+
+**단점**
+
+- 약간 더 복잡한 소스코드(논쟁의 여지가 있음).
+- ES2015를 지원하지 않는 이전 브라우저에서 이를 사용하기 위해서는 polyfill을 로드해야 합니다.
+
+###### 참고자료
+
+- https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch3.md
+
+### JavaScript로 컴파일되는 언어로 JavaScript 코드를 작성하는 경우의 장단점은 무엇인가요?
+
+JavaScript로 컴파일되는 언어의 예로 CoffeeScript, Elm, ClojureScript, PureScript, TypeScript가 있습니다.
+
+장점:
+
+- JavaScript의 오랜 문제점들을 해결하고 JavaScript 안티-패턴을 방지합니다.
+- JavaScript 위에 syntatic sugar를 제공함으로써 더 짧은 소스코드를 작성할 수 있도록 해줍니다. 제 생각에는 ES5는 부족하지만 ES2015는 굉장합니다.
+- 정적 타입은 시간 경과에 따라 유지 관리해야 하는 대규모 프로젝트에서 훌륭합니다(TypeScript의 경우).
+
+단점:
+
+- 브라우저는 오직 JavaScript만 실행하기 때문에 빌드/컴파일 프로세스가 필요하며 브라우저에 제공되기 전에 JavaScript로 코드를 컴파일해야 합니다.
+- 소스 맵이 미리 컴파일된 소스에 잘 매핑되지 않으면 디버깅이 어려울 수 있습니다.
+- 대부분의 개발자들은 이러한 언어에 익숙하지 않으므로 이를 배워야합니다. 프로젝트에 사용할 경우 팀 비용이 증가합니다.
+- 소규모 커뮤니티(언어에 따라 다름)에서는 리소스, 튜토리얼, 라이브러리, 툴을 찾기가 어려울 수 있습니다.
+- IDE / 편집기 지원이 부족할 수 있습니다.
+- 이러한 언어는 항상 최신 JavaScript 표준보다 뒤쳐질 것입니다.
+- 개발자들은 자신들의 코드를 무엇으로 컴파일하고 있는지 알고 있어야 합니다. 왜냐하면 그것이 실제로 실행될 것이고, 그것이 결국 중요하기 때문입니다.
+
+실질적으로 ES2015는 JavaScript를 크게 개선하여 작성하기가 훨씬 쉬워졌습니다. 요즘은 CoffeeScript가 필요성을 느끼지 못합니다.
+
+###### 참고자료
+
+- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
+
+### JavaScript 코드를 디버깅하기 위해 어떤 도구와 기술을 사용하나요?
+
+- React and Redux
+  - [React Devtools](https://github.com/facebook/react-devtools)
+  - [Redux Devtools](https://github.com/gaearon/redux-devtools)
+- JavaScript
+  - [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)
+  - `debugger` statement
+  - Good old `console.log` debugging
+
+###### 참고자료
+
+- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
+- https://raygun.com/blog/javascript-debugging/
+
+### 오브젝트 속성이나 배열 항목을 반복할 때 사용하는 언어 구문은 무엇인가요?
+
+오브젝트의 경우:
+
+- `for-in` 반복 - `for (var property in obj) { console.log(property); }`. 그러나, 이는 상속된 속성도 반복되며, 사용하기 전에 `obj.hasOwnProperty(property)` 체크를 추가해야 합니다.
+- `Object.keys()` - `Object.keys(obj).forEach(function (property) { ... })`. `Object.keys()`는 전달하는 객체의 열거 가능한 모든 속성을 나열하는 정적 메서드입니다.
+- `Object.getOwnPropertyNames()` - `Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`. `Object.getOwnPropertyNames()`는 전달하는 객체의 열거 가능한 속성과 열거불가능한 모든 속성을 나열하는 정적 메서드입니다.
+
+배열의 경우:
+
+- `for` 반복 - `for (var i = 0; i < arr.length; i++)`. 여기에 있는 일반적인 함정은 `var`이 함수 스코프고 블록 스코프가 아니며, 대부분 블록 스코프의 반복자 변수를 원할 것이라는 점입니다. ES2015에는 블록 범위가 있는 `let`이 추가됐고, 이를 대신 사용할 것을 권장합니다. 그래서 다음과 같이 됩니다. `for (let i = 0; i < arr.length; i++)`.
+- `forEach` - `arr.forEach(function (el, index) { ... })`. 필요한 것이 배열의 요소라면 `index`를 사용할 필요가 없기 때문에 이 구문이 더 편리 할 수 ​​있습니다. 또한 `every`과 `some`메서드를 이용하여 반복을 일찍 끝낼 수 있습니다.
+- `for-of` 반복 - `for (let elem of arr) { ... }`. ES6는 `String`, `Array`, `Map`, `Set` 등과 같은 [iterable protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol)을 준수하는 객체를 반복 할 수 있게 해주는 새로운 `for-of` 루프를 도입했습니다. `for` 루프의 장점은 루프에서 벗어날 수 있다는 것이고, `forEach()`의 장점은 카운터 변수가 필요 없기 때문에 `for` 루프보다 간결하다는 것입니다. `for-of` 루프를 사용하면, 루프에서 빠져 나올 수도 있고 더 간결한 구문도 얻을 수 있습니다.
+
+대부분의 경우에 저는 `.forEach` 메서드를 선호하지만, 무엇을 하느냐에 따라서 각 상황에 맞게 사용하는 것이 좋습니다. ES6 이전에는 `for` 루프를 사용하여 루프를 조기 종료해야 할 때 `break`를 사용했습니다. 그러나 이제 ES6에서는 `for-of`루프를 사용하여 이를 수행 할 수 있습니다. 루프 당 반복자를 두 번 이상 늘리는 것과 같이 유연성이 더 필요하다면, `for` 루프를 사용할 것입니다.
+
+또한, `for-of` 루프를 사용할 때 각 배열 요소의 인덱스와 값에 모두 접근해야하는 경우 ES6 Array의 `entries()` 메소드와 destructuring을 사용하면됩니다.
+
+```js
+const arr = ['a', 'b', 'c'];
+
+for (let [index, elem] of arr.entries()) {
+  console.log(index, ': ', elem);
+}
+```
+
+###### 참고자료
+
+- http://2ality.com/2015/08/getting-started-es6.html#from-for-to-foreach-to-for-of
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries
+
+### mutable 객체와 immutable 객체 사이의 차이점을 설명하세요.
+
+- JavaScript에서 immutable 객체의 예는 무엇인가요?
+- Immutability의 장점과 단점은 무엇인가요?
+- 자신의 코드에서 어떻게 immutability를 얻을 수 있나요?
+
+TODO
+
+### 동기, 비동기 함수의 차이점을 설명하세요.
+
+동기 함수는 블로킹인 반면, 비동기 함수는 그렇지 않습니다. 동기 함수에서는 다음 명령문이 실행되기 전에 앞 명령문이 완료됩니다. 이 경우, 프로그램은 명령문의 순서대로 정확하게 평가되고 명령문 중 하나가 매우 오랜 시간이 걸리면 프로그램 실행이 일시중지됩니다.
+
+비동기 함수는 일반적으로 파라미터를 통해서 콜백을 받고, 비동기 함수가 호출된 후 즉시 다음 줄 실행이 계속됩니다. 콜백은 비동기 작업이 완료되고 호출 스택이 비어 있을 때만 호출됩니다. 웹 서버에서 데이터를 로드하거나 데이터베이스를 쿼리하는 등의 무거운 작업을 비동기식으로 수행하여, 메인 스레드가 긴 작업을 완료할 때까지 블로킹하지 않고 다른 작업을 계속할 수 있습니다(브라우저의 경우 UI가 중지됨).
+
+### 이벤트 루프란 무엇인가요? 콜 스택과 태스크 큐의 차이점은 무엇인가요?
+
+이벤트 루프는 콜 스택을 모니터하고 태스크 큐에서 수행할 작업이 있는지 확인하는 단일 스레드 루프입니다. 콜 스택이 비어 있고 태스크 큐에 콜백 함수가 있는 경우, 함수는 큐에서 제거되고 실행될 콜 스택으로 푸시됩니다.
+
+Philip Robert의 [talk on the Event Loop](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html)를 아직 확인하지 않은 경우 확인하십시오. JavaScript 분야에서 가장 많은 조회수를 기록한 동영상 중 하나입니다.
+
+###### 참고자료
+
+- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
+- http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
+
+### `function foo() {}`와 `var foo = function() {}` 사이에서 `foo` 사용의 차이에 대해 설명하세요.
+
+전자는 함수 선언인 반면, 후자는 함수 표현식입니다. 주요한 차이점은 함수 선언은 함수바디가 호이스트되지만, 함수 표현식의 바디는 호이스트되지 않습니다(변수와 동일한 호이스팅 동작을 가짐). 호이스팅에 대한 자세한 설명은 질문 위의 호이스팅을 참조하십시오. 함수 표현식을 정의하기 전에 호출하려고 하면 `Uncaught TypeError : XXX is not function` 에러가 발생합니다.
+
+**함수 선언**
+
+```js
+foo(); // 'FOOOOO'
+function foo() {
+  console.log('FOOOOO');
+}
+```
+
+**함수 표현식**
+
+```js
+foo(); // Uncaught TypeError: foo는 함수가 아닙니다
+var foo = function () {
+  console.log('FOOOOO');
+};
+```
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
+
+### `let`, `var`, `const`를 사용하여 생성된 변수들의 차이점은 무엇인가요?
+
+`var` 키워드를 사용하여 선언된 변수는 함수가 생성된 함수나 함수 밖에서 생성된 함수에 전역 오브젝트로 적용됩니다. `let`과 `const`는 블록 스코프입니다. 즉, 가장 가까운 중괄호(function, if-else 블록, for-loop) 내에서만 접근할 수 있습니다.
+
+```js
+function foo() {
+  // 함수 내에서 모든 변수에 접근할 수 있습니다.
+  var bar = 'bar';
+  let baz = 'baz';
+  const qux = 'qux';
+
+  console.log(bar); // "bar"
+  console.log(baz); // "baz"
+  console.log(qux); // "qux"
+}
+
+console.log(bar); // ReferenceError: bar is not defined
+console.log(baz); // ReferenceError: baz is not defined
+console.log(qux); // ReferenceError: qux is not defined
+```
+
+```js
+if (true) {
+  var bar = 'bar';
+  let baz = 'baz';
+  const qux = 'qux';
+}
+
+// var로 선언된 변수는 함수 스코프의 어디에서나 접근할 수 있습니다.
+console.log(bar); // "bar"
+// let과 const로 정의된 변수는 정의된 블록 외부에서 접근할 수 없습니다.
+console.log(baz); // ReferenceError: baz is not defined
+console.log(qux); // ReferenceError: qux is not defined
+```
+
+`var`는 변수가 호이스트되도록 허용합니다. 즉, 변수가 선언되기 전에 코드에서 참조될 수 있습니다. `let`과 `const`는 이를 허용하지 않고 대신 에러를 던집니다.
+
+```js
+console.log(foo); // undefined
+
+var foo = 'foo';
+
+console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization
+
+let baz = 'baz';
+
+console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization
+
+const bar = 'bar';
+```
+
+`var`을 사용하여 변수를 다시 선언해도 에러가 발생하지 않지만, `let`과 `const`는 에러를 발생시킵니다.
+
+```js
+var foo = 'foo';
+var foo = 'bar';
+console.log(foo); // "bar"
+
+let baz = 'baz';
+let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared
+```
+
+`let`은 변수의 값을 재할당할 수 있지만, `const`는 재할당할 수 없다는 점이 다릅니다.
+
+```js
+// 괜찮습니다
+let foo = 'foo';
+foo = 'bar';
+
+// 예외가 발생합니다
+const baz = 'baz';
+baz = 'qux';
+```
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
+
+### ES6 클래스와 ES5 함수 생성자의 차이점은 무엇인가요?
+
+먼저 각각의 예를 살펴보겠습니다.
+
+```js
+// ES5 함수 생성자
+function Person(name) {
+  this.name = name;
+}
+
+// ES6 클래스
+class Person {
+  constructor(name) {
+    this.name = name;
+  }
+}
+```
+
+간단한 생성자의 경우에는 매우 유사합니다.
+
+생성자의 주요 차이점은 상속을 사용할 때 발생합니다. `Person`의 하위 클래스이면서 `studentId` 필드를 추가로 가지고 있는 `Student` 클래스를 만들고자 한다면, 이것이 우리가 추가로 해야할 일입니다.
+
+```js
+// ES5 함수 생성자
+function Student(name, studentId) {
+  // 수퍼 클래스의 생성자를 호출하여 수퍼 클래스에서 상속된 멤버를 초기화합니다.
+  Person.call(this, name);
+
+  // 서브 클래스의 멤버를 초기화합니다.
+  this.studentId = studentId;
+}
+
+Student.prototype = Object.create(Person.prototype);
+Student.prototype.constructor = Student;
+
+// ES6 클래스
+class Student extends Person {
+  constructor(name, studentId) {
+    super(name);
+    this.studentId = studentId;
+  }
+}
+```
+
+ES5에서 상속을 사용하는 것이 훨씬 더 불편하며, ES6 버전이 이해하고 기억하기가 더 쉽습니다.
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
+- https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5
+
+### 새 화살표 => 함수 문법에 대한 사용 예시를 들 수 있나요? 이 새로운 문법은 다른 함수와 어떻게 다른가요?
+
+화살표 함수의 한 가지 분명한 이점은 `function` 키워드를 사용하지 않고도 함수를 생성하는데 필요한 문법을 단순화하는 것입니다.
+
+또한, 화살표 함수 내의 `this`는, `this`가 함수를 호출하는 객체에 의해 결정되는 일반 함수와 다르게, 주변 스코프에에 묶입니다.
+
+렉시컬스코프 `this`는 특히 React 컴포넌트에서 콜백을 호출할 때 유용합니다.
+
+### 생성자의 메서드에 화살표 문법을 사용하면 어떤 이점이 있나요?
+
+생성자 내부에서 화살표 함수를 메소드로 사용하는 주된 장점은, 함수 생성시 `this`의 값이 설정되고 그 이후에는 변경할 수 없다는 것입니다.
+
+따라서, 생성자가 새로운 객체를 생성하는데 사용될 때, `this`는 항상 그 객체를 참조할 것입니다.
+
+예를 들어, 우리가 인수로 first name을 받고, 그 이름을 `console.log`로 출력하는 `Person` 생성자가 있다고 해봅시다. 하나는 일반 함수이고, 다른 하나는 화살표 함수일 때,
+
+```js
+const Person = function (firstName) {
+  this.firstName = firstName;
+  this.sayName1 = function () {
+    console.log(this.firstName);
+  };
+  this.sayName2 = () => {
+    console.log(this.firstName);
+  };
+};
+
+const john = new Person('John');
+const dave = new Person('Dave');
+
+john.sayName1(); // John
+john.sayName2(); // John
+
+// 일반 함수의 'this'값은 변경할 수 있지만, 화살표 함수는 변경할 수 없습니다.
+john.sayName1.call(dave); // Dave (because "this" is now the dave object)
+john.sayName2.call(dave); // John
+
+john.sayName1.apply(dave); // Dave (because 'this' is now the dave object)
+john.sayName2.apply(dave); // John
+
+john.sayName1.bind(dave)(); // Dave (because 'this' is now the dave object)
+john.sayName2.bind(dave)(); // John
+
+var sayNameFromWindow1 = john.sayName1;
+sayNameFromWindow1(); // undefined (because 'this' is now the window object)
+
+var sayNameFromWindow2 = john.sayName2;
+sayNameFromWindow2(); // John
+```
+
+여기에서 주요 장점은 `this`는 일반 함수에 대해 변경될 수 있지만, 컨텍스트는 항상 화살표 함수에 대해 동일하게 유지된다는 것입니다. 따라서 화살표 함수를 앱의 다른 부분으로 전달하는 경우에도 컨텍스트 변경에 대해 걱정할 필요가 없습니다.
+
+이는 특히 React 클래스 컴포넌트에서 유용할 수 있습니다. 일반 함수를 사용하는 클릭 핸들러와 같은 클래스 메소드를 정의한 다음, 해당 클릭 핸들러를 하위 컴포넌트의 prop으로 전달하면 상위 컴포넌트의 생성자에서 `this`도 바인드해야합니다.
+
+대신 화살표 함수를 사용하면, 메소드가 `this`값을 주위 렉시컬 컨텍스트에서 자동으로 가져오기 때문에 `this`를 바인딩할 필요가 없습니다.
+
+(좋은 데모, 샘플 코드는 [이 기사](https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)를 참조하세요.)
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
+- https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb
+
+### 고차 함수(higher-order function)의 정의는 무엇인가요?
+
+고차 함수는 다른 함수를 매개 변수로 사용하여 어떤 데이터를 처리하거나, 결과로 함수를 반환하는 함수입니다. 고차 함수는 반복적으로 수행되는 어떤 연산을 추상화하기 위한 것입니다. 전형적인 예시는 배열과 함수를 인수로 취하는 `map`입니다. `map`은 고차 함수를 사용하여 배열의 각 항목을 변환하고, 변환된 데이터로 새로운 배열을 반환합니다. JavaScript에서 흔히 볼 수 있는 다른 예로 `forEach`, `filter`, `reduce`가 있습니다. 다른 함수에서 함수를 반환하는 많은 사용사례가 있기 때문에 고차 함수는 배열을 조작할 필요가 없습니다. `Array.prototype.bind`는 JavaScript에서 그러한 예시 중 하나입니다.
+
+**Map**
+
+각 요소를 대문자 문자열로 변환해야하는 이름들을 가진 배열이 있다고 가정해 보겠습니다.
+
+```js
+const names = ['irish', 'daisy', 'anna'];
+```
+
+일반적인 방법은 다음과 같습니다.
+
+```js
+const transformNamesToUppercase = function (names) {
+  const results = [];
+  for (let i = 0; i < names.length; i++) {
+    results.push(names[i].toUpperCase());
+  }
+  return results;
+};
+transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
+```
+
+`.map(transformerFn)`을 사용하면 코드가 더 짧아지고 선언적이어집니다.
+
+```js
+const transformNamesToUppercase = function (names) {
+  return names.map((name) => name.toUpperCase());
+};
+transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
+```
+
+###### 참고자료
+
+- https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
+- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
+- https://eloquentjavascript.net/05_higher_order.html
+
+### 객체나 배열에 대한 디스트럭쳐링 예시를 들 수 있나요?
+
+디스트럭쳐링은 ES6에서 사용할 수 있는 표현식으로 객체나 배열의 값을 추출하여 다른 변수에 배치하는 간결하고 편리한 방법을 제공합니다.
+
+**배열 디스트럭쳐링**
+
+```js
+// 변수 할당.
+const foo = ['one', 'two', 'three'];
+
+const [one, two, three] = foo;
+console.log(one); // "one"
+console.log(two); // "two"
+console.log(three); // "three"
+```
+
+```js
+// 변수 교환
+let a = 1;
+let b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+```
+
+**객체 디스트럭쳐링**
+
+```js
+// 변수 할당.
+const o = { p: 42, q: true };
+const { p, q } = o;
+
+console.log(p); // 42
+console.log(q); // true
+```
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
+- https://ponyfoo.com/articles/es6-destructuring-in-depth
+
+### ES6 템플릿 리터럴은 문자열을 생성하는데 많은 유연성을 제공합니다. 이에 대한 예를 들 수 있나요?
+
+템플릿 리터럴을 사용하면 문자열 보간을 하거나 문자열에 변수를 포함하는 작업을 간단하게 수행할 수 있습니다. ES2015 이전에는 아래와 같이하는 것이 일반적이었습니다.
+
+```js
+var 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!'
+```
+
+템플릿 리터럴을 사용하면, 대신 이렇게해도 같은 출력을 만들 수 있습니다.
+
+```js
+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 이전에는 아래와 같이 다행의 문자열을 만들 수 있었습니다.
+
+```js
+console.log('This is line one.\nThis is line two.');
+// This is line one.
+// This is line two.
+```
+
+또는 코드에서 여러 줄로 나눠진 긴 문자열을 읽기 위해 텍스트 편집기에서 오른쪽으로 스크롤 할 필요가 없도록하려면 다음과 같이 작성할 수 있습니다.
+
+```js
+console.log('This is line one.\n' + 'This is line two.');
+// This is line one.
+// This is line two.
+```
+
+그러나 템플릿 리터럴은 당신이 추가한 간격 그대로 유지됩니다. 예를 들어, 위에 작성한 것과 동일한 다중행 출력을 작성하려면 다음과 같이하면 됩니다.
+
+```js
+console.log(`This is line one.
+This is line two.`);
+// This is line one.
+// This is line two.
+```
+
+템플릿 리터럴의 또 다른 사용사례는 간단한 변수 보간을 위한 템플릿 라이브러리의 대체품으로 사용하는 것입니다.
+
+```js
+const person = { name: 'Tyler', age: 28 };
+document.body.innerHTML = `
+  <div>
+    <p>Name: ${person.name}</p>
+    <p>Age: ${person.age}</p>
+  </div>
+`;
+```
+
+**`.innerHTML`을 사용하면 코드가 XSS의 영향을 받을 수 있습니다. 사용자로부터 입력받은 데이터인 경우 표시하기 전에 데이터를 안전하게 만드세요!**
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
+
+### curry 함수의 예를 들어 줄 수 있나요? 그리고 이 문법은 어떤 이점을 가지고 있나요?
+
+currying은 둘 이상의 매개 변수가 있는 함수가 여러 함수로 분리된 패턴으로, 직렬로 호출하면, 필요한 모든 매개 변수가 한 번에 하나씩 누적됩니다. 이 기법은 함수형 스타일로 작성된 코드를 읽고, 합성하기 더 쉬워진 경우 유용할 수 있습니다. 함수를 currying하려면, 하나의 함수로 시작하여, 하나의 매개 변수를 취하는 일련의 함수로 분리해야 합니다.
+
+```js
+function curry(fn) {
+  if (fn.length === 0) {
+    return fn;
+  }
+
+  function _curried(depth, args) {
+    return function (newArgument) {
+      if (depth - 1 === 0) {
+        return fn(...args, newArgument);
+      }
+      return _curried(depth - 1, [...args, newArgument]);
+    };
+  }
+
+  return _curried(fn.length, []);
+}
+
+function add(a, b) {
+  return a + b;
+}
+
+var curriedAdd = curry(add);
+var addFive = curriedAdd(5);
+
+var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
+```
+
+###### 참고자료
+
+- https://hackernoon.com/currying-in-js-d9ddc64f162e
+
+### spread 문법을 사용할 때의 이점은 무엇이며 rest 문법과 다른 점은 무엇인가요?
+
+ES6의 spread 문법은 함수형 패러다임에서 코딩할 때 매우 유용합니다. 왜냐하면 `Object.create`, `slice`나 라이브러리 함수를 사용하지 않고도 배열이나 객체의 복사본을 쉽게 만들 수 있기 때문입니다. 이 언어 기능은 Redux나 RxJS를 사용하는 프로젝트에서 많이 사용됩니다.
+
+```js
+function putDookieInAnyArray(arr) {
+  return [...arr, 'dookie'];
+}
+
+var result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"]
+
+var person = {
+  name: 'Todd',
+  age: 29,
+};
+
+var copyOfTodd = { ...person };
+```
+
+ES6의 rest 구문은 함수에 전달할 임의의 수의 인수를 포함하는 약식을 제공합니다. 이는 데이터의 배열을 채우기보다는 데이터를 가져와서 배열로 채우는 spread 구문의 반대와 비슷하며, 배열이나 객체 디스트럭쳐링 할당뿐만 아니라 함수 인수에서도 작동합니다.
+
+```js
+function addFiveToABunchOfNumbers(...numbers) {
+  return numbers.map((x) => x + 5);
+}
+
+const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]
+
+const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
+
+const { e, f, ...others } = {
+  e: 1,
+  f: 2,
+  g: 3,
+  h: 4,
+}; // e: 1, f: 2, others: { g: 3, h: 4 }
+```
+
+###### 참고자료
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
+
+### 파일 간에 코드를 공유하려면 어떻게 해야하나요?
+
+이것은 Javascript 환경에 따라 다릅니다.
+
+클라이언트(브라우저 환경)에서는, 변수/함수가 전역 스코프(`window`)에 선언되어있는 한 모든 스크립트가 이를 참조할 수 있습니다. 또는, 보다 모듈형 접근 방식을 위해 RequireJS를 통해 비동기 모듈 정의(AMD)를 이용합니다.
+
+서버(Node.js)에서 일반적인 방법은 CommonJS를 사용하는 것입니다. 각 파일은 모듈로 취급되며, 변수와 함수를 `module.exports` 객체에 붙여서 내보낼 수 있습니다.
+
+ES2015에서는 AMD 및 commonJS를 모두 대체하기 위한 모듈 문법을 정의합니다. 이 기능은 브라우저 및 노드 환경 모두에서 지원됩니다.
+
+###### 참고자료
+
+- http://requirejs.org/docs/whyamd.html
+- https://nodejs.org/docs/latest/api/modules.html
+- http://2ality.com/2014/09/es6-modules-final.html
+
+### 정적 클래스 멤버를 만드는 이유는 무엇인가요?
+
+정적 클래스 멤버(속성/메서드)는 클래스의 특정 인스턴스와 묶이지 않으며, 어떤 인스턴스가 이를 참조하는지에 관계없이 동일한 값을 가집니다. 정적 속성은 일반적으로 설정(configuration) 변수이며 정적 메서드는 일반적으로 인스턴스의 상태에 의존하지 않는 순수 유틸리티 함수입니다.
+
+###### 참고자료
+
+- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
+
+### 다른 답변들
+
+- http://flowerszhong.github.io/2013/11/20/javascript-questions.html
diff --git a/website/i18n/pl/docusaurus-plugin-content-docs/current/css-questions.md b/website/i18n/pl/docusaurus-plugin-content-docs/current/css-questions.md
new file mode 100644
index 0000000000..57a05b03a4
--- /dev/null
+++ b/website/i18n/pl/docusaurus-plugin-content-docs/current/css-questions.md
@@ -0,0 +1,499 @@
+---
+title: Pytania z CSS
+---
+
+Odpowiedzi do [Front-end Job Interview Questions - CSS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/css-questions.md). Pull requesty mile widziane, jeśli masz sugestie i poprawki!
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+### Czym jest specyficzność selektora CSS i jak działa?
+
+Przeglądarka określa, jakie style mają być wyświetlane w elemencie, w zależności od specyfiki reguł CSS. Zakładamy, że przeglądarka już określiła reguły, które pasują do określonego elementu. Wśród reguł dopasowania, specyfika, cztery wartości oddzielone przecinkami, `a, b, c, d` są obliczane dla każdej reguły na podstawie:
+
+1. `a` określa, czy stosowane są style wbudowane. Jeśli deklaracja właściwości jest stylem wbudowanym w elemencie, `a` jest 1, w przeciwnym razie 0.
+2. `b` jest numerem ID selektorów.
+3. `c` to liczba selektorów klas, atrybutów i pseudoklas.
+4. `d` to liczba znaczników i selektorów pseudoelementów.
+
+Wynikająca z tego specyficzność nie jest wynikiem, ale macierzą wartości, które można porównać kolumna po kolumnie. Porównując selektory w celu ustalenia, która ma najwyższą swoistość, spójrz od lewej do prawej i porównaj najwyższą wartość w każdej kolumnie. Tak więc wartość w kolumnie `b` zastąpi wartości w kolumnach `c` i `d`, bez względu na to, jakie mogą być. Jako taka, specyfika `0,1,0,0` byłaby większa niż jedno z `0,0,10,10`.
+
+W przypadkach o jednakowej specyficzności: najnowsza reguła się liczy. Jeśli dwukrotnie zapisałeś tę samą regułę w arkuszu stylów (niezależnie od wewnętrznego lub zewnętrznego), wówczas dolna reguła w arkuszu stylów jest bliżej elementu, który ma być stylizowany, jest uważana za bardziej szczegółową i dlatego zostanie zastosowana.
+
+Pisałbym reguły CSS o niskiej specyficzności, aby w razie potrzeby można je było łatwo zastąpić. Pisząc kod biblioteki komponentu interfejsu użytkownika CSS, ważne jest, aby miały niską specyficzność, aby użytkownicy biblioteki mogli je zastąpić bez stosowania zbyt skomplikowanych reguł CSS tylko ze względu na zwiększenie specyficzności lub uciekanie się do `!important`.
+
+###### Bibliografia
+
+- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
+- https://www.sitepoint.com/web-foundations/specificity/
+
+### Jaka jest różnica pomiędzy CSS "resetting" oraz "normalizing"? Które wybrałbyś, i dlaczego?
+
+- **Resetting** - Resetowanie ma na celu usunięcie wszystkich domyślnych stylów przeglądarki z elementów. Na przykład `margin`, `padding`, `font-size` wszystkich elementów są resetowane, aby były takie same. Będziesz musiał zmienić styl dla wspólnych elementów typograficznych.
+- **Normalizing** - Normalizacja zachowuje użyteczne style domyślne zamiast "unstyling" wszystkiego. Poprawia również błędy w typowych zależnościach przeglądarki.
+
+Zdecydowałbym się zresetować, gdy mam bardzo niestandardowy lub niekonwencjonalny projekt strony, tak że muszę zrobić dużo własnej stylizacji i nie muszę zachowywać żadnej domyślnej stylizacji.
+
+###### Bibliografia
+
+- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
+
+### Opisz `float`y i jak one działają.
+
+Float to właściwość pozycjonowania CSS. Elementy pływające (floated elements) pozostają częścią przepływu strony i będą wpływać na położenie innych elementów (np. tekst będzie płynął wokół elementów pływających), w przeciwieństwie do elementów `position: absolute`, które są usuwane z przepływu strony.
+
+Właściwość `clear` CSS może być użyta do pozycjonowania poniżej elementów pływających `left`/`right`/`both`.
+
+Jeśli element nadrzędny zawiera wyłącznie elementy pływające, jego wysokość zostanie zwinięta do zera. Można to naprawić, usuwając float za pływającymi elementami w kontenerze, ale przed zamknięciem kontenera.
+
+Hack `.clearfix` używa sprytnego CSS [pseudo selektora](#describe-pseudo-elements-and-discuss-what-they-are-used-for) (`:after`) do czyszczenia float'ów. Zamiast ustawiać przepełnienie dla elementu nadrzędnego, stosuje się do niego dodatkową klasę `clearfix`. Następnie stosuje ten CSS:
+
+```css
+.clearfix:after {
+  content: ' ';
+  visibility: hidden;
+  display: block;
+  height: 0;
+  clear: both;
+}
+```
+
+Alternatywnie, nadaj właściwość `overflow: auto` lub `overflow: hidden` elementowi nadrzędnemu, który ustanowi nowy kontekst formatowania bloku wewnątrz elementów podrzędnych i rozszerzy się, aby objąć jego elementy podrzędne.
+
+###### Bibliografia
+
+- https://css-tricks.com/all-about-floats/
+
+### Opisz `z-index` i jak powstaje stacking context.
+
+Właściwość `z-index` w CSS kontroluje pionową kolejność układania elementów, które się nakładają. `z-index` wpływa tylko na elementy, które mają wartość `position`, która nie jest `static`.
+
+Bez żadnej wartości `z-index`, elementy układają się w kolejności, w jakiej występują w DOM (najniższy na dole na tym samym poziomie hierarchii pojawia się na górze). Elementy z pozycjonowaniem niestatycznym (i ich potomnymi) zawsze będą pojawiać się na elementach z domyślnym pozycjonowaniem statycznym, niezależnie od hierarchii HTML.
+
+Kontekst stosu to element zawierający zestaw warstw. W lokalnym kontekście stosowym wartości `z-index` jego elementów podrzędnych są ustawione względem tego elementu, a nie do katalogu głównego dokumentu. Warstwy poza tym kontekstem - np. sibling elements lokalnego kontekstu stosu - nie mogą znajdować się między warstwami w tym kontekście. Jeśli element B znajduje się na szczycie elementu A, element potomny elementu A, elementu C, nigdy nie może być wyższy niż element B, nawet jeśli element C ma wyższy `z-index`, niż element B.
+
+Każdy kontekst stosu jest samowystarczalny - po ułożeniu zawartości elementu cały element jest rozpatrywany w kolejności stosu nadrzędnego kontekstu stosu. Kilka właściwości CSS wyzwala nowy kontekst stosu, taki jak `opacity` mniejszy niż 1, `filter` który nie jest `none`, oraz `transform` który nie jest `none`.
+
+_Uwaga: To, co dokładnie kwalifikuje element do utworzenia kontekstu stosu, znajduje się w tym długim zestawie [reguł](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context)._
+
+###### Bibliografia
+
+- https://css-tricks.com/almanac/properties/z/z-index/
+- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
+- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+
+### Opisz Block Formatting Context (BFC) i jak działa.
+
+Block Formatting Context (BFC) jest częścią wizualnego renderowania CSS strony internetowej, na której układane są pola bloków. Float'y, elementy absolutnie pozycjonowane, `inline-blocks`, `table-cells`, `table-caption`, i elementy z `overflow` inne niż `visible` (z wyjątkiem sytuacji, gdy ta wartość została propagowana do viewport), ustal nowe konteksty formatowania bloków.
+
+Umiejętność ustanowienia kontekstu formatowania bloku jest ważna, ponieważ bez tego pole zawierające nie będzie [zawierało floated children](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height). Jest to podobne do zwijających się marginesów, ale bardziej podstępne, ponieważ całe boxes zapadają się w dziwny sposób.
+
+BFC to box HTML, który spełnia co najmniej jeden z następujących warunków:
+
+- Wartość `float` nie jest `none`.
+- Wartość `position` nie jest `static` ani `relative`.
+- Wartość `display` jest `table-cell`, `table-caption`, `inline-block`, `flex`, lub `inline-flex`.
+- Wartość `overflow` nie jest `visible`.
+
+W BFC lewa zewnętrzna krawędź każdego box'a dotyka lewej krawędzi bloku zawierającego (w przypadku formatowania od prawej do lewej dotykają się prawej krawędzi).
+
+Pionowe marginesy między sąsiadującymi polami na poziomie bloku w zwinięciu BFC. Przeczytaj więcej na temat [zawijanych marginesów](https://www.sitepoint.com/web-foundations/collapsing-margins/).
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
+
+### Jakie są różne techniki czyszczenia i które są odpowiednie w jakim kontekście?
+
+- Pusta metoda `div` - `<div style="clear:both;"></div>`.
+- Metoda clearfix - nawiązując do klasy powyżej `.clearfix`.
+- `overflow: auto` lub metoda `overflow: hidden` - Rodzic ustanowi nowy kontekst formatowania bloku i rozszerzy się, aby zawierał elementy podrzędne.
+
+W dużych projektach napisałbym klasę użyteczności `.clearfix` i używał ich w miejscach, w których tego potrzebuję. `overflow: hidden` może podcinać children, jeśli children jest wyższy od parent i nie jest zbyt idealny.
+
+### Wyjaśnij CSS sprites, i jak zaimplementujesz je na stronie lub witrynie.
+
+CSS sprites łączy wiele obrazów w jeden większy obraz. Jest to powszechnie stosowana technika ikon (Gmail ją używa). Jak ją zaimplementować:
+
+1. Użyj generatora sprite, który pakuje wiele obrazów w jeden i generuje odpowiedni CSS do tego.
+1. Każdy obraz miałby odpowiednią klasę CSS `background-image`, `background-position` i `background-size` - zdefiniowane właściwości.
+1. Aby użyć tego obrazu, dodaj odpowiednią klasę do swojego elementu.
+
+**Korzyści:**
+
+- Zmniejszy liczbę żądań HTTP dla wielu obrazów (wymagane jest tylko jedno pojedyncze żądanie na spritesheet). Jednak w przypadku HTTP2 ładowanie wielu obrazów nie stanowi już większego problemu.
+- Pobieraj z wyprzedzeniem zasoby, które nie zostaną pobrane, dopóki nie będą potrzebne, takie jak obrazy, które pojawiają się tylko w pseudo-states `: hover`. Nie widać migania.
+
+###### Bibliografia
+
+- https://css-tricks.com/css-sprites/
+
+### Jak podchodziłbyś do rozwiązywania problemów związanych ze stylem specyficznym dla przeglądarki?
+
+- Po zidentyfikowaniu problemu i sprawiającej kłopoty przeglądarki użyj osobnego arkusza stylów, który ładuje się tylko wtedy, gdy używana jest konkretna przeglądarka. Ta technika wymaga jednak renderowania po stronie serwera.
+- Używaj bibliotek takich jak Bootstrap, które już obsługują te problemy ze stylem.
+- Użyj `autoprefixer`, aby automatycznie dodać prefiksy dostawcy do swojego kodu.
+- Użyj Reset CSS lub Normalize.css.
+- Jeśli korzystasz z Postcss (lub podobnej biblioteki do transpilowania), mogą istnieć wtyczki, które pozwolą ci wybrać nowoczesną składnię CSS (a nawet propozycje W3C), które przekształcą te sekcje twojego kodu w odpowiedni bezpieczny kod, który będzie pracować w celach, dla których korzystałeś.
+
+### Jak wyświetlasz swoje strony w przeglądarkach z ograniczeniami funkcji? Jakich technik/procesów używasz?
+
+- Wdzięczna degradacja (graceful degradation) - praktyka polegająca na tworzeniu aplikacji dla nowoczesnych przeglądarek przy jednoczesnym zapewnieniu jej funkcjonalności w starszych przeglądarkach.
+- Progresywne ulepszenie (progressive enhancement) - Praktyka budowania aplikacji dla podstawowego poziomu doświadczenia użytkownika, ale dodawanie ulepszeń funkcjonalnych, gdy przeglądarka ją obsługuje.
+- Używanie [caniuse.com](https://caniuse.com/) aby sprawdzić obsługę funkcji.
+- Autoprefixer do automatycznego wstawiania prefiksu dostawcy.
+- Wykrywanie funkcji za pomocą [Modernizr](https://modernizr.com/).
+- Używanie zapytań CSS Feature [@support](https://developer.mozilla.org/en-US/docs/Web/CSS/@supports)
+
+### Jakie są różne sposoby wizualnego ukrywania treści (i udostępniania jej tylko dla czytników ekranu)?
+
+Te techniki są związane z dostępnością (a11y).
+
+- `width: 0; height: 0`. Spraw, aby element nie zajmował w ogóle miejsca na ekranie, co powoduje, że nie jest pokazywany.
+- `position: absolute; left: -99999px`. Ustaw go poza ekranem.
+- `text-indent: -9999px`. Działa to tylko w przypadku tekstu w elementach `block`.
+- Metadane. Na przykład za pomocą Schema.org, RDF i JSON-LD.
+- WAI-ARIA. Specyfikacja techniczna W3C określająca sposób zwiększenia dostępności stron internetowych.
+
+Nawet jeśli WAI-ARIA jest idealnym rozwiązaniem, wybrałbym podejście pozycjonowania `absolute`, ponieważ ma najmniej zastrzeżeń, działa na większość elementów i jest łatwą techniką.
+
+###### Bibliografia
+
+- https://www.w3.org/TR/wai-aria-1.1/
+- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
+- http://a11yproject.com/
+
+### Czy kiedykolwiek korzystałeś z systemu siatki (grid system), a jeśli tak, to co preferujesz?
+
+Przed tym jak Flex stał się popularny (około roku 2014), oparty na `float` grid system był najbardziej niezawodny, ponieważ nadal ma największą obsługę przeglądarek wśród alternatywnych istniejących systemów (flex, grid). Bootstrap korzystał z podejścia `float` do chwili, gdy Bootstrap 4, przełączył się na podejście oparte na `flex`. W chwili pisania (2020r.), `flex` jest zalecanym podejściem do budowania systemów gridowych i ma [przyzwoitą obsługę przeglądarki](https://caniuse.com/#search=flex).
+
+Dla odważnych, mogą zajrzeć w [CSS Grid Layout](https://css-tricks.com/snippets/css/complete-guide-grid/), który używa nowej błyszczącej właściwości `grid`; jest nawet lepszy niż `flex` do budowania układów siatki i będzie de facto sposobem na zrobienie tego w przyszłości.
+
+### Czy używałeś lub implementowałeś media queries lub mobile-specific layouts/CSS?
+
+Tak. Przykładem może być przekształcenie nawigacji stacked pill w nawigację fixed-bottom tab poza pewnym breakpointem.
+
+### Czy znasz stylizację SVG?
+
+Tak, istnieje kilka sposobów pokolorowania kształtów (w tym określenie atrybutów obiektu) za pomocą wbudowanego CSS, osadzonej sekcji CSS lub zewnętrznego pliku CSS. Większość plików SVG, które można znaleźć w Internecie, wykorzystuje wbudowany CSS, ale z każdym typem wiążą się wady i zalety.
+
+Podstawowe kolorowanie można wykonać, ustawiając dwa atrybuty w węźle: `fill` i `stroke`. `fill` ustawia kolor wewnątrz obiektu i `stroke` ustawia kolor linii rysowanej wokół obiektu. Możesz używać tych samych schematów nazewnictwa kolorów CSS, których używasz w HTML, niezależnie od tego, czy są to nazwy kolorów (to znaczy `red`), wartości RGB (tzn. `rgb(255,0,0)`), wartości Hex, wartości RGBA, etc.
+
+```html
+<rect
+  x="10"
+  y="10"
+  width="100"
+  height="100"
+  stroke="blue"
+  fill="purple"
+  fill-opacity="0.5"
+  stroke-opacity="0.8" />
+```
+
+Powyższe `fill="purple"` to przykład _presentational attribute_. Co ciekawe, w przeciwieństwie do stylów wbudowanych, takich jak `style="fill: purple"`, który również jest atrybutem, atrybuty prezentacji można [zastąpić stylami CSS](https://css-tricks.com/presentation-attributes-vs-inline-styles/) zdefiniowanymi w arkuszu stylów. Więc, jeśli zrobić coś takiego jak `svg { fill: blue; }` zastąpiłoby to zdefiniowane przez nas fioletowe wypełnienie.
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
+
+### Czy możesz podać przykład właściwości @media innej niż screen?
+
+Tak, są cztery typy właściwości @media (włączając w to _screen_):
+
+- `all` - dla wszystkich typu media
+- `print` - dla drukarek
+- `speech` - lub czytników ekranu, które "czytają" stronę na głos
+- `screen` - do ekranów komputerowych, tabletów, smartfonów itp.
+
+Tu jest przykład użycia typu `print` media:
+
+```css
+@media print {
+  body {
+    color: black;
+  }
+}
+```
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
+
+### Jakie są "tricki" do pisania wydajnego CSS?
+
+Po pierwsze, zrozum, że przeglądarki dopasowują selektory od skrajnie prawej (key selector) do lewej. Przeglądarki odfiltrowują elementy w DOM zgodnie z key selector'em i przesuwają w górę jego elementy nadrzędne, aby ustalić dopasowania. Im krótsza długość łańcucha selektora, tym szybciej przeglądarka może ustalić, czy ten element pasuje do selektora. Dlatego unikaj key selectorów, które są selektorami tagów i uniwersalnymi. Pasują do dużej liczby elementów, a przeglądarki będą musiały wykonać więcej pracy, aby ustalić, czy rodzice pasują.
+
+Metodologia [BEM (Block Element Modifier)](https://bem.info/) zaleca, aby wszystko miało jedną klasę, a tam, gdzie potrzebna jest hierarchia, która wpisuje się również w nazwę klasy, w naturalny sposób sprawia to, że selektor jest wydajny i łatwy do zastąpienia.
+
+Należy pamiętać, które właściwości CSS wyzwalają [trigger](https://csstriggers.com/) reflow, repaint, i compositing. Unikaj pisania stylów, które zmieniają układ (wyzwalanie przepływu) tam, gdzie to możliwe.
+
+###### Bibliografia
+
+- https://developers.google.com/web/fundamentals/performance/rendering/
+- https://csstriggers.com/
+
+### Jakie są zalety/wady korzystania z preprocesorów CSS?
+
+**Zalety:**
+
+- CSS jest łatwiejszy w utrzymaniu.
+- Łatwe do pisania zagnieżdżone selektory.
+- Zmienne dla spójnego motywu. Może udostępniać pliki motywów w różnych projektach.
+- Mixins do generowania powtarzanego CSS.
+- Funkcje Sass, takie jak pętle, listy i mapy, mogą ułatwić konfigurację i zmniejszyć poziom szczegółowości.
+- Dzielenie kodu na wiele plików. Pliki CSS można również podzielić, ale będzie to wymagało żądania HTTP pobrania każdego pliku CSS.
+
+**Wady:**
+
+- Wymaga narzędzi do wstępnego przetwarzania. Czas ponownej kompilacji może być długi.
+- Brak pisania obecnego i potencjalnie użytecznego CSS. Na przykład, używając czegoś podobnego do [postcss-loader](https://github.com/postcss/postcss-loader) z [webpack](https://webpack.js.org/), możesz napisać potencjalnie kompatybilny CSS, pozwalając na używanie takich zmiennych jak CSS zamiast zmiennych Sass. W ten sposób uczysz się nowych umiejętności, które mogą się opłacić, jeśli/gdy zostaną ujednolicone.
+
+### Opisz, co lubisz, a czego nie w preprocesorach CSS, z których korzystałeś.
+
+**Polubione:**
+
+- Głównie zalety wymienione powyżej.
+- Less jest napisany w JavaScript, który dobrze współpracuje z Node.
+
+**Niepolubione:**
+
+- Używam Sass przez `node-sass`, który jest powiązaniem dla LibSass napisanego w C++. Muszę często go przekompilować podczas przełączania między wersjami węzłów.
+- W Less, nazwy zmiennych są poprzedzone znakiem `@`, które można pomylić z natywnymi słowami kluczowymi CSS, takimi jak `@media`, `@import` i reguła `@font-face`.
+
+### Jak zaimplementowałbyś kompozycję do projektowania stron internetowych, która wykorzystuje niestandardowe czcionki?
+
+Użycie `@font-face` i zdefiniowanie `font-family` dla różnych `font-weight`.
+
+### Wyjaśnij, w jaki sposób przeglądarka określa, które elementy pasują do selektora CSS.
+
+Ta część jest związana z powyższą na temat [pisania wydajnego CSS](#what-are-some-of-the-gotchas-for-writing-efficient-css). Przeglądarki dopasowują selektory od skrajnie prawej (key selector) do lewej. Przeglądarki odfiltrowują elementy w DOM zgodnie z key selector i przesuwają w górę jego elementy nadrzędne, aby ustalić dopasowania. Im krótsza długość łańcucha selektora, tym szybciej przeglądarka może ustalić, czy ten element pasuje do selektora.
+
+Na przykład ten selektor `p span`, przeglądarka najpierw znajduje wszystkie elementy `<span>` i przemierza jego rodzica aż do roota, aby znaleźć element `<p>`. Dla konkretnego `<span>`, jak tylko znajdzie `<p>`, wie że `<span>` dopasowane i może zatrzymać dopasowanie.
+
+###### Bibliografia
+
+- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
+
+### Opisz pseudoelementy i omów, do czego służą.
+
+Pseudoelement CSS jest słowem kluczowym dodawanym do selektora, który pozwala stylizować określoną część wybranych elementów. Mogą być używane do dekoracji (`:first-line`, `:first-letter`) lub dodawać elementy do znaczników (w połączeniu z `content: ...`) bez konieczności modyfikowania znaczników (`:before`, `:after`).
+
+- `:first-line` i `:first-letter` może służyć do ozdabiania tekstu.
+- Użycie `.clearfix` jak pokazano powyżej, aby dodać element zero-space z `clear: both`.
+- Trójkątne strzałki w tooltips używają `:before` i `:after`. Zachęca do rozdzielenia rzeczy, ponieważ trójkąt jest uważany za część stylizacji, a nie DOM.
+
+###### Bibliografia
+
+- https://css-tricks.com/almanac/pseudo-selectors/b/after-and-before/
+
+### Wyjaśnij swoje zrozumienie box model i sposób, w jaki chcesz, aby przeglądarka w CSS renderowała układ w różnych modelach pudełkowych.
+
+Model pola CSS opisuje prostokątne pola, które są generowane dla elementów w drzewie dokumentu i rozmieszczone zgodnie z wizualnym modelem formatowania. Każdy box ma pole zawartości (np. text, an image, etc.) i opcjonalne otoczenie polami `padding`, `border`, i `margin`.
+
+Model pudełkowy CSS odpowiada za obliczenie:
+
+- Ile miejsca zajmuje element bloku.
+- Niezależnie od tego, czy granice i/lub marginesy nachodzą na siebie, czy się zawalają.
+- Wymiary pudełka.
+
+Model pudełkowy ma następujące zasady:
+
+- Wymiary elementu bloku są obliczane przez `width`, `height`, `padding`, `border` i `margin`.
+- Jeśli `height` nie jest określona, element blokowy będzie tak samo wysoki, jak zawarta w nim zawartość, plus `padding` (chyba że są to floaty, dla których patrz poniżej).
+- Jeśli `width` nie jest określona, element blokowy non-floated rozszerzy się, aby dopasować się do szerokości jego rodzica minus `padding`.
+- `height` elementu jest obliczany na podstawie zawartości `height`.
+- `width` elementu jest obliczany na podstawie zawartości `width`.
+- Domyślnie, `padding` i `border` nie są częścią `width` oraz `height` elementu.
+
+###### Bibliografia
+
+- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
+
+### Co robi `* { box-sizing: border-box; }`? Jakie są tego zalety?
+
+- Domyślnie, elementy mają `box-sizing: content-box` zastosowane, i uwzględniany jest tylko rozmiar contentu.
+- `box-sizing: border-box` zmienia jak `width` i `height` elementów są liczone, `border` i `padding` są również uwzględniane w obliczeniach.
+- `height` elementu jest teraz obliczany na podstawie zawartości `height` + pionowy `padding` + pionowa szerokość `border`.
+- `width` elementu jest teraz obliczany na podstawie zawartości `width` + poziomy `padding` + pozioma szerokość `border`.
+- Biorąc pod uwagę `padding` oraz `border` jako część naszego modelu pudełkowego lepiej współgra z tym, jak projektanci wyobrażają sobie treść w gridach.
+
+###### Bibliografia
+
+- https://www.paulirish.com/2012/box-sizing-border-box-ftw/
+
+### Czym jest właściwość `display` w CSS i czy możesz podać kilka przykładów jej użycia?
+
+- `none`, `block`, `inline`, `inline-block`, `flex`, `grid`, `table`, `table-row`, `table-cell`, `list-item`.
+
+| `display` | Description |
+| :-- | :-- |
+| `none` | Does not display an element (the elementv no longer affects the layout of the document). All child element are also no longer displayed. The document is rendered as if the element did not exist in the document tree |
+| `block` | The element consumes the whole line in the block direction (which is usually horizontal) |
+| `inline` | Elements can be laid out beside each other |
+| `inline-block` | Similar to `inline`, but allows some `block` properties like setting `width` and `height` |
+| `table` | Behaves like the `<table>` element |
+| `table-row` | Behaves like the `<tr>` element |
+| `table-cell` | Behaves like the `<td>` element |
+| `list-item` | Behaves like a `<li>` element which allows it to define `list-style-type` and `list-style-position` |
+
+### Jaka jest różnica pomiędzy `inline`, a `inline-block`?
+
+Dla dobrego porównania wrzucę porównanie z `block`.
+
+|  | `block` | `inline-block` | `inline` |
+| --- | --- | --- | --- |
+| Size | Fills up the width of its parent container. | Depends on content. | Depends on content. |
+| Positioning | Start on a new line and tolerates no HTML elements next to it (except when you add `float`) | Flows along with other content and allows other elements beside it. | Flows along with other content and allows other elements beside it. |
+| Can specify `width` and `height` | Yes | Yes | No. Will ignore if being set. |
+| Can be aligned with `vertical-align` | No | Yes | Yes |
+| Margins and paddings | All sides respected. | All sides respected. | Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on `line-height`, even though the `border` and `padding` appear visually around the content. |
+| Float | - | - | Becomes like a `block` element where you can set vertical margins and paddings. |
+
+### Jaka jest różnica między pozycjonowaniem `relative`, `fixed`, `absolute` i `static` elementu?
+
+Element pozycjonowany to element, którego obliczona właściwość `position` jest albo `relative`, `absolute`, `fixed` lub `sticky`.
+
+- `static` - Pozycja domyślna; element wpłynie na stronę w normalny sposób. Właściwości `top`, `right`, `bottom`, `left` i `z-index` nie mają zastosowania.
+- `relative` - Pozycja elementu jest dopasowywana względem siebie, bez zmiany układu (i tym samym pozostawiając odstęp dla elementu, w którym byłby, gdyby nie został ustawiony).
+- `absolute` - Element jest usuwany z przepływu strony i ustawiany w określonej pozycji względem najbliższego umieszczonego przodka, jeśli taki istnieje, lub w inny sposób względem początkowego bloku zawierającego. Pola absolutnie pozycjonowane mogą mieć marginesy i nie zwijają się z żadnymi innymi marginesami. Te elementy nie wpływają na pozycję innych elementów.
+- `fixed` - Element jest usuwany z przepływu strony i ustawiany w określonej pozycji względem viewport i nie porusza się podczas przewijania.
+- `sticky` - Pozycjonowanie sticky to hybryda pozycjonowania względnego i ustalonego. Element jest traktowany jako pozycja `relative`, dopóki nie przekroczy określonego progu, w którym to momencie jest traktowany jako pozycja `fixed`.
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en/docs/Web/CSS/position
+
+### Z jakich istniejących frameworków CSS korzystałeś lokalnie lub na produkcji? Jak byś je zmienił/ulepszył?
+
+- **Bootstrap** - Cykl wolnego wydania. Bootstrap 4 jest w wersji alfa od prawie 2 lat. Dodać spinner button component, ponieważ jest on powszechnie używany.
+- **Semantic UI** - Struktura kodu źródłowego sprawia, że dostosowanie motywu jest niezwykle trudne do zrozumienia. Niekonwencjonalny system tematyczny jest trudny do dostosowania. Zahardkodowana ścieżka konfiguracji w bibliotece dostawcy. Niezbyt dobrze zaprojektowany do nadpisywania zmiennych w przeciwieństwie do Bootstrap.
+- **Bulma** - Wymaganych jest wiele niesemantycznych i zbędnych klas i znaczników. Niekompatybilny wstecz. Uaktualnianie wersji psuje aplikację w subtelny sposób.
+
+### Czy robiłeś coś w nowej specyfikacji CSS Flexbox lub Grid?
+
+Tak. Flexbox jest przeznaczony głównie do układów 1-wymiarowych, a Grid do układów 2-wymiarowych.
+
+Flexbox rozwiązuje wiele typowych problemów w CSS, takich jak pionowe centrowanie elementów w kontenerze, sticky footer itp. Bootstrap i Bulma są oparte na Flexbox i jest to prawdopodobnie zalecany sposób tworzenia układów w dzisiejszych czasach. Próbowałem już Flexboksa wcześniej, ale napotkałem pewne problemy z niekompatybilnością przeglądarki (Safari) przy użyciu `flex-grow`, i musiałem przepisać mój kod przy użyciu `inline-block` i matematyki, aby obliczyć szerokości w procentach, to nie było miłe doświadczenie.
+
+Grid jest zdecydowanie najbardziej intuicyjnym podejściem do tworzenia układów opartych na grid'zie (lepiej!), ale obsługa przeglądarki nie jest w tej chwili szeroka.
+
+###### Bibliografia
+
+- https://philipwalton.github.io/solved-by-flexbox/
+
+### Czy potrafisz wyjaśnić różnicę między kodowaniem strony internetowej, aby była responsywna, a używaniem mobile-first strategy?
+
+Pamiętaj, że te dwa podejścia nie są wykluczające.
+
+Uaktywnienie strony internetowej oznacza, że niektóre elementy zareagują, dostosowując jej rozmiar lub inne funkcje zgodnie z rozmiarem ekranu urządzenia, zwykle szerokością viewport, poprzez CSS media queries, na przykład zmniejszając rozmiar czcionki na mniejszych urządzeniach.
+
+```css
+@media (min-width: 601px) {
+  .my-class {
+    font-size: 24px;
+  }
+}
+
+@media (max-width: 600px) {
+  .my-class {
+    font-size: 12px;
+  }
+}
+```
+
+Mobile-first strategy również jest responsywna, jednak zgadza się, że powinniśmy domyślnie zdefiniować wszystkie style dla urządzeń mobilnych, a później dopiero dodać konkretne reguły responsywne do innych urządzeń. Zgodnie z poprzednim przykładem:
+
+```css
+.my-class {
+  font-size: 12px;
+}
+
+@media (min-width: 600px) {
+  .my-class {
+    font-size: 24px;
+  }
+}
+```
+
+Mobile-first strategy ma 2 główne zalety:
+
+- Jest bardziej wydajna na urządzeniach mobilnych, ponieważ wszystkie zastosowane reguły nie muszą być sprawdzane pod kątem media queries.
+- Wymusza pisanie czystszego kodu w odniesieniu do responsywnych reguł CSS.
+
+### Czym różni się projektowanie responsywne od projektowania adaptacyjnego?
+
+Zarówno responsywne, jak i adaptacyjne próbują zoptymalizować wrażenia użytkownika na różnych urządzeniach, dostosowując się do różnych rozmiarów viewport, rozdzielczości, kontekstów użytkowania, mechanizmów kontrolnych i tak dalej.
+
+Responsywne projektowanie działa na zasadzie elastyczności - jedna płynna strona internetowa, która może dobrze wyglądać na dowolnym urządzeniu. Responsywne strony internetowe używają media queries, elastycznych gridów i responsywnych obrazów, aby stworzyć wrażenia użytkownika, które zmieniają w zależności od wielu czynników. Jak pojedyncza piłka rosnąca lub kurcząca się, aby zmieścić się w kilku różnych obręczach.
+
+Projektowanie adaptacyjne bardziej przypomina nowoczesną definicję stopniowego ulepszania. Zamiast jednego elastycznego projektu, projekt adaptacyjny wykrywa urządzenie i inne funkcje, a następnie zapewnia odpowiednią funkcję i układ na podstawie predefiniowanego zestawu rozmiarów viewport i innych cech. Witryna wykrywa typ używanego urządzenia i zapewnia wstępnie ustawiony układ tego urządzenia. Zamiast jednej piłki przechodzącej przez kilka różnej wielkości obręczy, będziesz mieć kilka różnych piłek do użycia w zależności od rozmiaru obręczy.
+
+Obie z tych metod mają pewne problemy, które warto ocenić:
+
+- Elastyczne projektowanie może być dość trudne, ponieważ zasadniczo używasz jednego, choć responsywnego układu, pasującego do wszystkich sytuacji. Jak ustawić punkty przerwania media query to jedno z takich wyzwań. Czy używasz standardowych wartości progowych? A może używasz punktów przerwania, które mają sens dla twojego konkretnego układu? Co jeśli ten układ się zmieni?
+- Projektowanie adaptacyjne zazwyczaj wymaga user agent sniffing lub wykrywania DPI itp., co może okazać się zawodne.
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
+- http://mediumwell.com/responsive-adaptive-mobile/
+- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
+
+### Czy kiedykolwiek pracowałeś z grafiką Retina? Jeśli tak, kiedy i jakich technik użyłeś?
+
+_Retina_ jest po prostu marketingowym terminem odnoszącym się do ekranów o wysokiej rozdzielczości ze współczynnikiem pikseli większym niż 1. Kluczową rzeczą, o której należy wiedzieć, jest to, że użycie współczynnika pikseli oznacza, że wyświetlacze emulują ekran o niższej rozdzielczości w celu wyświetlenia elementów o tym samym rozmiarze. Obecnie rozważamy defacto wszystkie wyświetlacze urządzeń mobilnych _retina_.
+
+Przeglądarki domyślnie renderują elementy DOM zgodnie z rozdzielczością urządzenia, z wyjątkiem obrazów.
+
+Aby mieć wyraźną, ładną grafikę, która najlepiej wykorzystuje wyświetlacze retina, musimy w miarę możliwości używać obrazów o wysokiej rozdzielczości. Jednak używanie zawsze obrazów o najwyższej rozdzielczości będzie miało wpływ na wydajność, ponieważ więcej bajtów będzie trzeba przesłać przewodowo.
+
+Aby rozwiązać ten problem, możemy użyć responsywnych obrazów, jak określono w HTML5. Wymaga udostępnienia przeglądarki różnych plików o tym samym obrazie w różnych rozdzielczościach i pozwala zdecydować, który obraz jest najlepszy, używając atrybutu HTML `srcset` i opcjonalnie `sizes`, na przykład:
+
+```html
+<div responsive-background-image>
+  <img
+    src="/images/test-1600.jpg"
+    sizes="
+      (min-width: 768px) 50vw,
+      (min-width: 1024px) 66vw,
+      100vw"
+    srcset="
+      /images/test-400.jpg   400w,
+      /images/test-800.jpg   800w,
+      /images/test-1200.jpg 1200w
+    " />
+</div>
+```
+
+Ważne jest, aby pamiętać, że przeglądarki, które nie obsługują `srcset` HTML5 (np. IE11), zignorują go i zamiast tego użyją `src`. Jeśli naprawdę musimy obsługiwać IE11 i chcemy udostępnić tę funkcję ze względu na wydajność, możemy użyć polyfill JavaScript, np. Picturefill (link w bibliografii).
+
+W przypadku ikon wolałbym również używać plików SVG i czcionek ikon, jeśli to możliwe, ponieważ renderują one bardzo ostro, niezależnie od rozdzielczości.
+
+###### Bibliografia
+
+- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
+- http://scottjehl.github.io/picturefill/
+- https://aclaes.com/responsive-background-images-with-srcset-and-sizes/
+
+### Czy jest jakiś powód, dla którego chciałbyś użyć `translate ()` zamiast pozycjonowania `absolute` lub odwrotnie? I dlaczego?
+
+`translate()` jest wartością CSS `transform`. Zmieniając `transform` lub `opacity` nie powoduje ponownego wczytywania przeglądarki ani odmalowywania, ale powoduje kompozycje; podczas gdy zmiana bezwzględnych wyzwalaczy pozycjonowania `reflow`. `transform` powoduje, że przeglądarka tworzy warstwę GPU dla elementu, ale zmiana bezwzględnych właściwości pozycjonowania wykorzystuje procesor. W związku z tym `translate()` jest bardziej wydajny i spowoduje krótszy czas malowania dla płynniejszych animacji.
+
+Kiedy używasz `translate ()`, element nadal zajmuje swoją pierwotną przestrzeń (coś w rodzaju `position: relative`), w przeciwieństwie do zmiany absolutnego pozycjonowania.
+
+###### Bibliografia
+
+- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
+
+### Inne odpowiedzi
+
+- https://neal.codes/blog/front-end-interview-css-questions
+- https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/
+- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
+
+---
+
+Stworzone przez [@yangshun](https://github.com/yangshun) polska wersja od [@mbiesiad](https://github.com/mbiesiad)
diff --git a/website/i18n/pl/docusaurus-plugin-content-docs/current/html-questions.md b/website/i18n/pl/docusaurus-plugin-content-docs/current/html-questions.md
new file mode 100644
index 0000000000..a8f354b713
--- /dev/null
+++ b/website/i18n/pl/docusaurus-plugin-content-docs/current/html-questions.md
@@ -0,0 +1,181 @@
+---
+title: Pytania z HTML
+---
+
+Odpowiedzi do [Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/html-questions.md). Pull request mile widziany, jeśli masz jakieś sugestie lub poprawki!
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+### Co robi DOCTYPE?
+
+**DOCTYPE** to skrót od **DOCument TYPE**. DOCTYPE jest zawsze powiązany z **DTD** - tzn z **Document Type Definition**.
+
+DTD określa, w jaki sposób powinny być uporządkowane dokumenty określonego rodzaju (np. `button` może zawierać `span` ale nie `div`), podczas gdy DOCTYPE deklaruje to, co DTD _jakoby_ respektuje (np. ten dokument jest zgodny z DTD HTML).
+
+W przypadku stron internetowych wymagana jest deklaracja DOCTYPE. Służy do informowania agentów użytkownika (user agents), jakiej wersji specyfikacji HTML dotyczy twój dokument. Gdy user agent rozpozna prawidłowy DOCTYPE, uruchomi **tryb no-quirks** pasujący do tego DOCTYPE do odczytu dokumentu. Jeśli user agent nie rozpozna prawidłowego DOCTYPE, uruchomi **tryb quirks**.
+
+Deklaracja DOCTYPE dla standardów HTML5 to `<!DOCTYPE html>`.
+
+###### Bibliografia
+
+- https://html.spec.whatwg.org/multipage/syntax.html#the-doctype
+- https://html.spec.whatwg.org/multipage/xhtml.html
+- https://quirks.spec.whatwg.org/
+
+### W jaki sposób wyświetlasz stronę z treścią w wielu językach?
+
+Pytanie jest trochę niejasne, założę się, że chodzi o najczęstszy przypadek, czyli sposób obsługi strony z treścią dostępną w wielu językach, ale treść na stronie powinna być wyświetlana tylko w jednym spójnym języku.
+
+Po wysłaniu żądania HTTP do serwera requestujący user agent zwykle wysyła informacje o preferencjach językowych, na przykład w nagłówku `Accept-Language`. Serwer może następnie użyć tych informacji, aby zwrócić wersję dokumentu w odpowiednim języku, jeśli taka alternatywa jest dostępna. Zwrócony dokument HTML powinien również zadeklarować atrybut `lang` w tagu `<html>`, tak jak `<html lang="en">...</html>`.
+
+W backendzie, HTML będzie zawierać symbole zastępcze `i18n` oraz treść dla określonego języka przechowywaną w formatach YML lub JSON. Serwer następnie dynamicznie generuje stronę HTML z zawartością w tym konkretnym języku, zwykle za pomocą frameworka backend.
+
+###### Bibliografia
+
+- https://www.w3.org/International/getting-started/language
+
+### Jakich rzeczy należy się wystrzegać podczas projektowania lub tworzenia witryn wielojęzycznych?
+
+- Używanie atrybutu `lang` w swoim HTML.
+- Przekierowanie użytkowników na ich język ojczysty - pozwól użytkownikowi na łatwą zmianę kraju/języka bez żadnych problemów.
+- Tekst na obrazach rastrowych (np. png, gif, jpg, itp.) nie jest skalowalnym podejściem - umieszczanie tekstu na obrazie jest nadal popularnym sposobem na uzyskanie ładnych, niesystemowych czcionek do wyświetlania na dowolnym komputerze. Jednak, aby przetłumaczyć tekst obrazu, każdy ciąg tekstu musi mieć osobny obraz utworzony dla każdego języka. Coś więcej niż kilka takich zamienników, może szybko wymknąć się spod kontroli.
+- Ograniczająca długość słów/zdań - niektóre treści mogą być dłuższe, gdy są napisane w innym języku. Uważaj na problemy z układem lub przepełnieniem w projekcie. Najlepiej unikać projektowania miejsca, w którym ilość tekstu mogłaby stworzyć lub zepsuć projekt. Liczby znaków wchodzą w grę z takimi nagłówkami, etykietami i przyciskami. Są mniej problematyczne z płynnym tekstem, takim jak treść lub komentarze.
+- Pamiętaj o tym, jak postrzegane są kolory - kolory są postrzegane inaczej w różnych językach i kulturach. Projekt powinien odpowiednio używać koloru.
+- Formatowanie dat i walut - Daty kalendarza są czasami przedstawiane na różne sposoby. Na przykład. "May 31, 2012" w Stanach Zjednoczonych, a "31 May 2012" w niektórych częściach Europy.
+- Nie łącz przetłumaczonych ciągów - nie rób niczego podobnego jak `"The date today is " + date`. Będzie psuł się w językach o różnej kolejności słów. Zamiast tego użyj ciągu szablonu z podstawieniem parametrów dla każdego języka. Na przykład spójrz na następujące dwa zdania odpowiednio w języku angielskim i chińskim: `I will travel on {% date %}` oraz `{% date %} 我会出发`. Zauważ, że pozycja zmiennej jest inna ze względu na reguły gramatyczne języka.
+- Kierunek czytania języka - w języku angielskim czytamy od lewej do prawej, od góry do dołu, w tradycyjnym japońskim tekst jest czytany od góry do dołu, od prawej do lewej.
+
+###### Bibliografia
+
+- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
+
+### Do czego są dobre atrybuty `data-`?
+
+Zanim frameworki JavaScript stały się popularne, programiści używali atrybutów `data-` do przechowywania dodatkowych danych w samym DOM, bez innych sztuczek, takich jak niestandardowe atrybuty, dodatkowe właściwości w DOM. Jest przeznaczony do przechowywania niestandardowych danych prywatnych na stronie lub w aplikacji, dla których nie ma już odpowiednich atrybutów ani elementów.
+
+Obecnie używanie atrybutów `data-` ogólnie nie jest popierane. Jednym z powodów jest to, że użytkownicy mogą łatwo modyfikować atrybut danych za pomocą elementu inspekcji w przeglądarce. Model danych jest lepiej przechowywany w samym JavaScript i jest na bieżąco aktualizowany za pomocą DOM poprzez powiązanie danych, ewentualnie za pośrednictwem biblioteki lub frameworka.
+
+Jednakże, jednym całkowicie poprawnym zastosowaniem atrybutów danych jest dodanie hook dla _end to end_ testujących frameworków takich jak Selenium i Capybara bez konieczności tworzenia bezsensownych atrybutów klas lub identyfikatorów. Element musi być znaleziony przez konkretną specyfikację Selenium i coś jak `data-selector='the-thing'` jest prawidłowym sposobem, aby to zrobić bez zwijania znaczników semantycznych.
+
+###### Bibliografia
+
+- http://html5doctor.com/html5-custom-data-attributes/
+- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
+
+### Rozważ HTML5 jako Open Web Platform. Jakie są elementy składowe HTML5?
+
+- Semantyka - pozwala precyzyjniej opisać treść.
+- Łączność - umożliwiając komunikację z serwerem w nowy i innowacyjny sposób.
+- Offline i przechowywanie - Umożliwienie stronom lokalnym przechowywanie danych po stronie klienta i wydajniejszą pracę offline.
+- Multimedia - Tworzenie wysokiej jakości materiałów wideo i audio w Open Web.
+- Grafika i efekty 2D/3D - Umożliwiając znacznie bardziej zróżnicowany zakres opcji prezentacji.
+- Wydajność i integracja - Zapewnienie większej optymalizacji prędkości i lepszego wykorzystania sprzętu komputerowego.
+- Dostęp do urządzenia - Umożliwia korzystanie z różnych urządzeń wejściowych i wyjściowych.
+- Stylizacja - Pozwalanie autorom na pisanie bardziej wyrafinowanych motywów.
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
+
+### Opisz różnicę pomiędzy `cookie`, `sessionStorage` oraz `localStorage`.
+
+Wszystkie wyżej wymienione technologie są kluczowymi mechanizmami przechowywania po stronie klienta. Są w stanie przechowywać wartości tylko jako ciągi znaków (strings).
+
+|  | `cookie` | `localStorage` | `sessionStorage` |
+| --- | --- | --- | --- |
+| Initiator | Client or server. Server can use `Set-Cookie` header | Client | Client |
+| Expiry | Manually set | Forever | On tab close |
+| Persistent across browser sessions | Depends on whether expiration is set | Yes | No |
+| Sent to server with every HTTP request | Cookies are automatically being sent via `Cookie` header | No | No |
+| Capacity (per domain) | 4kb | 5MB | 5MB |
+| Accessibility | Any window | Any window | Same tab |
+
+_Uwaga: Jeśli użytkownik zdecyduje się wyczyścić dane przeglądania za pomocą dowolnego mechanizmu zapewnianego przez przeglądarkę, spowoduje to usunięcie dowolnego zebranego `cookie`, `localStorage`, czy `sessionStorage`. Należy o tym pamiętać przy projektowaniu pod kątem trwałości lokalnej, zwłaszcza w porównaniu z alternatywami, takimi jak przechowywanie po stronie serwera w bazie danych lub podobnym (które oczywiście będzie się utrzymywać pomimo działań użytkownika)._
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
+- http://tutorial.techaltum.com/local-and-session-storage.html
+
+### Opisz różnicę pomiędzy `<script>`, `<script async>` oraz `<script defer>`.
+
+- `<script>` - Parsowanie HTML jest zablokowane, skrypt jest pobierany i wykonywany natychmiast, parsowanie HTML jest wznawiane po wykonaniu skryptu.
+- `<script async>` - Skrypt zostanie pobrany równolegle do parsowania HTML i wykonany, gdy tylko będzie dostępny (potencjalnie przed zakończeniem parsowania HTML). Użyj `async` gdy skrypt jest niezależny od innych skryptów na stronie, na przykład analityki.
+- `<script defer>` - Skrypt zostanie pobrany równolegle do parsowania HTML i wykonany, gdy strona zakończy parsowanie. Jeśli jest ich wiele, każdy odroczony skrypt jest wykonywany w kolejności, w jakiej napotkano w dokumencie. Jeśli skrypt opiera się na w pełni przeanalizowanym modelu DOM, atrybut `defer` przyda się do pełnego przeanalizowania kodu HTML przed jego wykonaniem. Nie ma dużej różnicy we wprowadzaniu normalnego `<script>` na końcu `<body>`. Odroczony skrypt nie może zawierać `document.write`.
+
+Uwaga: Atrybuty `async` oraz `defer` są ignorowane przez skrypty, które nie zawierają atrybutu `src`.
+
+###### Bibliografia
+
+- http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
+- https://stackoverflow.com/questions/10808109/script-tag-async-defer
+- https://bitsofco.de/async-vs-defer/
+
+### Dlaczego ogólnie dobrym pomysłem jest pozycjonowanie CSS `<link>` pomiędzy `<head></head>` oraz JS `<script>` tuż przed `</body>`? Czy znasz jakieś wyjątki?
+
+**Umieszczanie `<link>` w `<head>`**
+
+Umieszczanie `<link>` w nagłówku jest częścią właściwej specyfikacji w budowaniu zoptymalizowanej strony internetowej. Gdy strona ładuje się po raz pierwszy, HTML i CSS są analizowane jednocześnie; HTML tworzy DOM (Document Object Model), a CSS tworzy CSSOM (CSS Object Model). Oba są potrzebne do stworzenia wizualizacji na stronie internetowej, pozwalając na szybkie "pierwsze znaczące malowanie". To progresywne renderowanie jest kategorią optymalizacji witryn ocenianych na podstawie ich wyników. Umieszczenie arkuszy stylów u dołu dokumentu uniemożliwia progresywne renderowanie w wielu przeglądarkach. Niektóre przeglądarki blokują renderowanie, aby uniknąć konieczności przemalowywania elementów strony, jeśli ich style się zmienią. Użytkownik utknął wtedy, oglądając pustą białą stronę. Innym razem mogą pojawiać się błyski niestylizowanej treści (FOUC), które pokazują stronę bez zastosowania stylizacji.
+
+**Umieszczanie `<script>` tuż przed `</body>`**
+
+`<script>` blokuje parsowanie HTML podczas ich pobierania i wykonywania. Umieszczenie skryptów na dole umożliwi parsowanie HTML i wyświetlenie go najpierw użytkownikowi.
+
+Wyjątkiem dla pozycjonowania `<script>` na dole jest gdy twój skrypt zawiera `document.write()`, ale obecnie nie jest to dobra praktyka, aby używać `document.write()`. Również, umieszczanie `<script>` na dole oznacza, że przeglądarka nie może rozpocząć pobierania skryptów, dopóki cały dokument nie zostanie przeanalizowany. Zapewnia to, że kod, który musi manipulować elementami DOM, nie będzie generował błędów i nie zatrzyma całego skryptu. Jeśli musisz umieścić `<script>` w `<head>`, użyj atrybutu `defer`, który osiągnie ten sam efekt pobierania i uruchamiania skryptu dopiero po przeanalizowaniu HTML.
+
+###### Bibliografia
+
+- https://developer.yahoo.com/performance/rules.html#css_top
+- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
+- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
+
+### Co to jest rendering progresywny?
+
+Renderowanie progresywne to nazwa nadana technikom stosowanym w celu poprawy wydajności strony internetowej (w szczególności w celu poprawy postrzeganego czasu ładowania) w celu renderowania treści do wyświetlenia tak szybko, jak to możliwe.
+
+Kiedyś był znacznie bardziej rozpowszechniony w czasach przed internetem szerokopasmowym, ale nadal jest wykorzystywany w nowoczesnym rozwoju, ponieważ mobilne połączenia danych stają się coraz bardziej popularne (i zawodne)!
+
+Przykłady takich technik:
+
+- Leniwe ładowanie obrazów - obrazy na stronie nie są ładowane jednocześnie. JavaScript zostanie użyty do załadowania obrazu, gdy użytkownik przewinie do części strony, która wyświetla obraz.
+- Określanie priorytetu widocznej treści (lub renderowania ponad zakładką) - Uwzględnij tylko minimalną ilość CSS/treści/skryptów niezbędnych do tego, aby ilość stron, które byłyby najpierw renderowane w przeglądarce użytkownika, były wyświetlane tak szybko, jak to możliwe, a następnie możesz użyć odroczonych skryptów lub nasłuchiwać zdarzenia `DOMContentLoaded`/`load`, aby załadować inne zasoby i zawartość.
+- Asynchroniczne fragmenty HTML - opróżnianie części HTML do przeglądarki, gdy strona jest konstruowana na zapleczu. Więcej szczegółów na temat techniki można znaleźć [tutaj](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
+
+###### Bibliografia
+
+- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
+- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
+
+### Dlaczego warto użyć atrybutu `srcset` w tagu obrazu? Wyjaśnij proces wykorzystywany przez przeglądarkę podczas oceny zawartości tego atrybutu.
+
+Możesz użyć atrybutu `srcset` gdy chcesz wyświetlać użytkownikom różne obrazy w zależności od szerokości ekranu ich urządzenia - wyświetlaj obrazy o wyższej jakości na urządzeniach z wyświetlaczem Retina, które poprawiają wrażenia użytkownika, a wyświetlanie obrazów o niższej rozdzielczości na mniejszych urządzeniach zwiększa wydajność i zmniejsza marnotrawstwo danych (ponieważ służy to większemu, obraz nie będzie miał widocznej różnicy). Na przykład: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` informuje przeglądarkę, aby wyświetlała małą, średnią lub dużą grafikę `.jpg` w zależności od rozdzielczości klienta. Pierwsza wartość to nazwa obrazu, a druga to szerokość obrazu w pikselach. W przypadku urządzenia o szerokości 320 pikseli wykonywane są następujące obliczenia:
+
+- 500 / 320 = 1.5625
+- 1000 / 320 = 3.125
+- 2000 / 320 = 6.25
+
+Jeśli rozdzielczość klienta wynosi 1x, 1.5625 jest najbliższa, a '500w' odpowiadające „small.jpg” zostanie wybrane przez przeglądarkę.
+
+Jeśli rozdzielczość to retina (2x), przeglądarka użyje najbliższej rozdzielczości powyżej minimum. Oznacza to, że nie wybierze 500w (1,5625), ponieważ jest większa niż 1 i obraz może wyglądać źle. Przeglądarka wybrałaby wówczas obraz o współczynniku wynikowym bliższym 2, czyli 1000w (3,125).
+
+`srcset` rozwiązuje problem polegający na tym, że chcesz wyświetlać mniejsze pliki obrazów na urządzeniach z wąskim ekranem, ponieważ nie potrzebują one dużych obrazów, takich jak wyświetlacze stacjonarne - a także opcjonalnie, że chcesz wyświetlać obrazy o różnej rozdzielczości na ekranach o wysokiej / niskiej gęstości.
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
+- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
+
+### Czy używałeś wcześniej różnych języków szablonów HTML?
+
+Tak, Pug (formalnie Jade), ERB, Slim, Handlebars, Jinja, Liquid, żeby wymienić tylko kilka. Moim zdaniem są one mniej więcej takie same i zapewniają podobną funkcjonalność ucieczki treści oraz pomocne filtry do manipulowania wyświetlanymi danymi. Większość silników szablonów pozwala również wstrzykiwać własne filtry na wypadek, gdybyś potrzebował niestandardowego przetwarzania przed wyświetleniem.
+
+### Inne odpowiedzi
+
+- https://neal.codes/blog/front-end-interview-questions-html/
+- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
+
+---
+
+Stworzone przez [@yangshun](https://github.com/yangshun) polska wersja od [@mbiesiad](https://github.com/mbiesiad)
diff --git a/website/i18n/pl/docusaurus-plugin-content-docs/current/javascript-questions.md b/website/i18n/pl/docusaurus-plugin-content-docs/current/javascript-questions.md
new file mode 100644
index 0000000000..b71ab3370d
--- /dev/null
+++ b/website/i18n/pl/docusaurus-plugin-content-docs/current/javascript-questions.md
@@ -0,0 +1,1427 @@
+---
+title: Pytania z JavaScript
+---
+
+Odpowiedzi do [Front-end Job Interview Questions - JS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/javascript-questions.md). Pull requesty mile widziane, jeśli masz sugestie i poprawki!
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+### Wyjaśnij delegowanie zdarzeń
+
+Delegowanie zdarzeń to technika polegająca na dodawaniu event listenerów do elementu nadrzędnego zamiast dodawania ich do elementów potomnych. Listener będzie wyzwalany za każdym razem, gdy zdarzenie zostanie wyzwolone na elementach potomnych z powodu wystąpienia zdarzenia propagującego DOM. Korzyści z tej techniki to:
+
+- Memory footprint zmniejsza się, ponieważ do elementu nadrzędnego potrzebny jest tylko jeden moduł obsługi, zamiast konieczności dołączania modułów obsługi zdarzeń do każdego elementu potomnego.
+- Nie ma potrzeby odłączania modułu obsługi od usuwanych elementów i wiązania zdarzenia dla nowych elementów.
+
+###### Bibliografia
+
+- https://davidwalsh.name/event-delegate
+- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
+
+### Wyjaśnij jak `this` działa w JavaScript
+
+Nie ma prostego wyjaśnienia dla `this`; jest to jedna z najbardziej mylących koncepcji w JavaScript. Wytłumaczeniem na szybko jest to, że wartość `this` zależy od tego, jak wywoływana jest funkcja. Przeczytałem wiele wyjaśnień na temat `this` w Internecie i znalazłem wytłumaczenie od [Arnav Aggrawal](https://medium.com/@arnav_aggarwal), jako najbardziej klarowne. Stosuje się następujące zasady:
+
+1. Jeśli słowo kluczowe `new` jest używane podczas wywoływania funkcji, `this` wewnątrz funkcji jest nowym obiektem.
+2. Jeśli `apply`, `call`, lub `bind` służą do wywoływania/tworzenia funkcji, `this` wewnątrz funkcji jest obiektem przekazywanym jako argument.
+3. Jeśli funkcja jest wywoływana jako metoda, na przykład `obj.method()` — `this` jest obiektem, którego funkcja jest własnością.
+4. Jeśli funkcja jest wywoływana jako wywołanie wolnej funkcji, co oznacza, że została wywołana bez żadnego z powyższych warunków, `this` jest globalnym obiektem. W przeglądarce, jest obiektem `window`. Jeśli jest w trybie strict mode (`'use strict'`), `this` będzie `undefined` zamiast globalnego obiektu.
+5. Jeśli stosuje się wiele powyższych zasad, reguła, która jest wyższa, wygrywa i ustawi wartość `this`.
+6. Jeśli funkcja jest funkcją strzałkową (arrow function) ES2015, ignoruje wszystkie powyższe reguły i otrzymuje wartość `this` swojego otaczającego zakresu w momencie jej tworzenia.
+
+Aby uzyskać szczegółowe wyjaśnienie, sprawdź jego [artykuł na Medium](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3).
+
+#### Czy możesz podać przykład jednego ze sposobów, w jaki praca z tym zmieniła się w ES6?
+
+ES6 umożliwia korzystanie z [funkcji strzałkowych (arrow functions)](http://2ality.com/2017/12/alternate-this.html#arrow-functions) które wykorzystują [enclosing lexical scope](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this). Jest to zwykle wygodne, ale nie zabezpiecza caller przed kontrolowaniem kontekstu przez `.call` lub `.apply`— konsekwencją jest to, że biblioteka taka jak `jQuery` nie będzie poprawnie bindować `this` w funkcjach obsługi zdarzeń. Dlatego ważne jest, aby o tym pamiętać przy refaktoryzacji dużych aplikacji.
+
+###### Bibliografia
+
+- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
+- https://stackoverflow.com/a/3127440/1751946
+
+### Wyjaśnij, jak działa dziedziczenie prototypowe
+
+To jest bardzo częste pytanie dotyczące rozmowy rekrutacyjnej w JavaScript. Wszystkie obiekty JavaScript mają właściwość `__proto__`, jest to odniesienie do innego obiektu, który nazywa się "prototypem" obiektu. Gdy właściwość jest udostępniana na obiekt i jeśli właściwość nie została znaleziona na tym obiekcie, silnik JavaScript sprawdza `__proto__` obiektu oraz `__proto__` z `__proto__` i tak dalej, dopóki nie znajdzie właściwości zdefiniowanej w jednym z `__proto__` lub dopóki nie osiągnie końca łańcucha prototypów. To zachowanie symuluje klasyczne dziedziczenie, ale tak naprawdę jest bardziej [delegowaniem niż dziedziczeniem](https://davidwalsh.name/javascript-objects).
+
+#### Przykład dziedziczenia prototypowego
+
+Mamy już wbudowane `Object.create`, ale gdybyś dostarczył dla niego polyfill, mogłoby to wyglądać:
+
+```js
+if (typeof Object.create !== 'function') {
+  Object.create = function (parent) {
+    function Tmp() {}
+    Tmp.prototype = parent;
+    return new Tmp();
+  };
+}
+
+const Parent = function () {
+  this.name = 'Parent';
+};
+
+Parent.prototype.greet = function () {
+  console.log('hello from Parent');
+};
+
+const child = Object.create(Parent.prototype);
+
+child.cry = function () {
+  console.log('waaaaaahhhh!');
+};
+
+child.cry();
+// Outputs: waaaaaahhhh!
+
+child.greet();
+// Outputs: hello from Parent
+```
+
+Warto zwrócić uwagę na:
+
+- `.greet` nie jest zdefiniowane w _child_, więc silnik idzie w górę łańcucha prototypów i znajduje `.greet` odziedziczone z _Parent_.
+- Musimy wywołać `Object.create` na jeden z następujących sposobów dziedziczenia prototypowych metod:
+  - Object.create(Parent.prototype);
+  - Object.create(new Parent(null));
+  - Object.create(objLiteral);
+  - W tej chwili, `child.constructor` wskazuje na `Parent`:
+
+```js
+child.constructor
+ƒ () {
+  this.name = "Parent";
+}
+child.constructor.name
+"Parent"
+```
+
+- Jeśli chcielibyśmy to naprawić, jedną z opcji byłoby:
+
+```js
+function Child() {
+  Parent.call(this);
+  this.name = 'child';
+}
+
+Child.prototype = Parent.prototype;
+Child.prototype.constructor = Child;
+
+const c = new Child();
+
+c.cry();
+// Outputs: waaaaaahhhh!
+
+c.greet();
+// Outputs: hello from Parent
+
+c.constructor.name;
+// Outputs: "Child"
+```
+
+###### Bibliografia
+
+- http://dmitrysoshnikov.com/ecmascript/javascript-the-core/
+- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
+- https://davidwalsh.name/javascript-objects
+- https://crockford.com/javascript/prototypal.html
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
+
+### Co sądzisz o AMD vs CommonJS?
+
+Oba sposoby implementacji systemu modułowego, który nie pojawił się natywnie w JavaScript przed pojawieniem się ES2015. CommonJS jest synchroniczny, podczas gdy AMD (definicja modułu asynchronicznego) jest oczywiście asynchroniczny. CommonJS został zaprojektowany z myślą o rozwoju po stronie serwera, podczas gdy AMD, ze wsparciem dla asynchronicznego ładowania modułów, jest bardziej przeznaczone dla przeglądarek.
+
+Uważam, że składnia AMD jest dość wymowna, a CommonJS jest bliższy stylowi, w którym pisałbyś instrukcje importu w innych językach. Przez większość czasu uważam, że AMD jest niepotrzebne, ponieważ jeśli podałeś cały JavaScript w jednym połączonym pliku pakietu, nie skorzystałbyś z właściwości ładowania asynchronicznego. Ponadto składnia CommonJS jest bliższa stylowi pisania modułów w Node, a przełączanie między tworzeniem JavaScript po stronie klienta i serwera jest mniejsze.
+
+Cieszę się, że dzięki modułom ES2015, które obsługują zarówno ładowanie synchroniczne, jak i asynchroniczne, możemy w końcu zastosować jedno podejście. Chociaż nie został w pełni wdrożony w przeglądarkach i w Node, zawsze możemy użyć transpilatorów do konwersji naszego kodu.
+
+###### Bibliografia
+
+- https://auth0.com/blog/javascript-module-systems-showdown/
+- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
+
+### Wyjaśnij, dlaczego następujące elementy nie działają jako IIFE: `function foo(){ }();`. Co należy zmienić, aby poprawnie uczynić to IIFE?
+
+IIFE oznacza Immediately Invoked Function Expressions. Parser JavaScript czyta `function foo(){ }();` jako `function foo(){ }` i `();`, gdzie ten pierwszy to _deklaracja funkcji_ i ten drugi (para nawiasów) jest próbą wywołania funkcji, ale nie ma określonej nazwy, dlatego rzuca `Uncaught SyntaxError: Unexpected token )`.
+
+Oto dwa sposoby rozwiązania tego problemu, polegające na dodaniu większej liczby nawiasów: `(function foo(){ })()` oraz `(function foo(){ }())`. Deklaracje zaczynające się od `function` są uważane za _deklaracji funkcji_; poprzez zawinięcie tej funkcji wewnątrz `()`, staje się _wyrażeniem funkcji_ które mogą być następnie wykonane z kolejnym `()`. Funkcje te nie są ujawniane w zakresie globalnym i można nawet pominąć jego nazwę, jeśli nie trzeba odwoływać się do ciała.
+
+Możesz także użyć operatora `void`: `void function foo(){ }();`. Niestety istnieje jeden problem związany z takim podejściem. Ocena danego wyrażenia jest zawsze `undefined`, więc jeśli funkcja IIFE zwraca cokolwiek, nie możesz jej użyć. Przykład:
+
+```js
+const foo = void (function bar() {
+  return 'foo';
+})();
+
+console.log(foo); // undefined
+```
+
+###### Bibliografia
+
+- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
+
+### Jaka jest różnica między zmienną: `null`, `undefined` lub niezadeklarowaną? Jak sprawdziłbyś którykolwiek z tych stanów?
+
+**Niezadeklarowane** zmienne są tworzone, gdy przypisujesz wartość do identyfikatora, który nie był wcześniej tworzony przy użyciu `var`, `let` lub `const`. Niezadeklarowane zmienne zostaną zdefiniowane globalnie, poza bieżącym zakresem. W trybie strict mode, `ReferenceError` zostanie rzucony, gdy spróbujesz przypisać do niezadeklarowanej zmiennej. Niezadeklarowane zmienne są złe, tak jak zmienne globalne są złe. Unikaj ich za wszelką cenę! Aby je sprawdzić, zawiń jego użycie w bloku `try`/`catch`.
+
+```js
+function foo() {
+  x = 1; // Throws a ReferenceError in strict mode
+}
+
+foo();
+console.log(x); // 1
+```
+
+Zmienna `undefined` jest zmienną, która została zadeklarowana, ale nie ma przypisanej wartości. Jest to typu `undefined`. Jeśli funkcja nie zwraca żadnej wartości, ponieważ w wyniku jej wykonania jest przypisana do zmiennej, zmienna ma również wartość `undefined`. Aby to sprawdzić, porównaj, stosując operatora ścisłej równości (`===`) lub `typeof` który da string `'undefined'`. Zauważ, że nie powinieneś używać operatora abstrakcyjnej równości do sprawdzania, ponieważ zwróci on również wartość `true`, jeśli wartość wynosi `null`.
+
+```js
+var foo;
+console.log(foo); // undefined
+console.log(foo === undefined); // true
+console.log(typeof foo === 'undefined'); // true
+
+console.log(foo == null); // true. Wrong, don't use this to check!
+
+function bar() {}
+var baz = bar();
+console.log(baz); // undefined
+```
+
+Zmienna która jest `null` zostanie wyraźnie przypisana do wartości `null`. Nie reprezentuje żadnej wartości i różni się od `undefined` w tym sensie, że zostało to wyraźnie przypisane. Aby sprawdzić `null,` po prostu porównaj, używając operatora ścisłej równości. Pamiętaj, że podobnie jak powyżej, nie powinieneś używać abstrakcyjnego operatora równości (`==`) do sprawdzenia, to również zwróci `true` jeśli wartość jest `undefined`.
+
+```js
+var foo = null;
+console.log(foo === null); // true
+console.log(typeof foo === 'object'); // true
+
+console.log(foo == undefined); // true. Wrong, don't use this to check!
+```
+
+Jako osobisty nawyk nigdy nie pozostawiam moich zmiennych niezadeklarowanych ani nieprzypisanych. Wyraźnie przypiszę im `null` po zadeklarowaniu, jeśli nie zamierzam jej jeszcze używać. Jeśli użyjesz lintera w swoim przepływie pracy, zwykle będzie on również w stanie sprawdzić, czy nie odwołujesz się do niezadeklarowanych zmiennych.
+
+###### Bibliografia
+
+- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
+
+### Czym jest domknięcie i jak/dlaczego miałbyś je zastosować?
+
+Domknięcie (closure) jest kombinacją funkcji i środowiska leksykalnego, w którym zadeklarowano tę funkcję. Słowo "leksykalny" odnosi się do faktu, że zakres leksykalny wykorzystuje lokalizację, w której zmienna jest zadeklarowana w kodzie źródłowym, w celu ustalenia, gdzie ta zmienna jest dostępna. Domknięcia to funkcje, które mają dostęp do zmiennych funkcji zewnętrznej (obejmującej) - łańcuch zasięgu nawet po zwróceniu funkcji zewnętrznej.
+
+**Dlaczego miałbyś skorzystać z tego?**
+
+- Prywatność danych/emulacja prywatnych metod przy domknięciach. Powszechnie stosowane we [wzorcu modułu](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript).
+- [Partial applications lub currying](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x).
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
+- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
+
+### Czy możesz opisać główną różnicę pomiędzy pętlą `.forEach`, a pętlą `.map()` i dlaczego wybrałbyś jeden albo drugi?
+
+Aby zrozumieć różnice między nimi, spójrzmy na to, co robi każda funkcja.
+
+**`forEach`**
+
+- Iteruje przez elementy w tablicy.
+- Wykonuje callback dla każdego elementu.
+- Nie zwraca wartości.
+
+```js
+const a = [1, 2, 3];
+const doubled = a.forEach((num, index) => {
+  // Do something with num and/or index.
+});
+
+// doubled = undefined
+```
+
+**`map`**
+
+- Iteruje przez elementy w tablicy.
+- "Mapuje" każdy element do nowego elementu, wywołując funkcję na każdym elemencie, tworząc w rezultacie nową tablicę.
+
+```js
+const a = [1, 2, 3];
+const doubled = a.map((num) => {
+  return num * 2;
+});
+
+// doubled = [2, 4, 6]
+```
+
+Główna różnica między `.forEach` i `.map()` to to, że `.map()` zwraca nową tablicę. Jeśli potrzebujesz wyniku, ale nie chcesz mutować oryginalnej tablicy, `.map()` jest jasnym wyborem. Jeśli potrzebujesz po prostu iterować tablicę, `forEach` jest dobrym wyborem.
+
+###### Bibliografia
+
+- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
+
+### Jaki jest typowy przypadek użycia funkcji anonimowych?
+
+Można ich użyć w IIFE do enkapsulacji części kodu w zakresie lokalnym, tak aby zmienne zadeklarowane w nim nie przenikały do zakresu globalnego.
+
+```js
+(function () {
+  // Some code here.
+})();
+```
+
+Jako callback, które jest używane raz i nie musi być używane nigdzie indziej. Kod będzie wydawał się bardziej samodzielny i czytelny, gdy procedury obsługi zostaną zdefiniowane bezpośrednio w kodzie wywołującym je, zamiast konieczności szukania gdzie indziej w celu znalezienia w ciele funkcji.
+
+```js
+setTimeout(function () {
+  console.log('Hello world!');
+}, 1000);
+```
+
+Argumenty do konstrukcji funkcjonalnego programowania lub Lodasha (podobne do callbacków).
+
+```js
+const arr = [1, 2, 3];
+const double = arr.map(function (el) {
+  return el * 2;
+});
+console.log(double); // [2, 4, 6]
+```
+
+###### Bibliografia
+
+- https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
+- https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
+
+### Jak organizujesz swój kod? (wzorzec modułu, klasyczne dziedziczenie?)
+
+W przeszłości używałem Backbone do moich modeli, co zachęca do bardziej otwartego podejścia, tworzenia modeli Backbone i dołączania do nich metod.
+
+Wzorzec modułu jest nadal świetny, ale obecnie używam React/Redux, które wykorzystują jednokierunkowy przepływ danych oparty na architekturze Flux. Reprezentowałbym modele mojej aplikacji przy użyciu prostych obiektów i pisał funkcje czysto użytkowe do manipulowania tymi obiektami. Stan jest manipulowany za pomocą akcji i reduktorów, jak w każdej innej aplikacji Redux.
+
+W miarę możliwości unikam dziedziczenia klasycznego. Kiedy już i jeśli to zrobię, trzymam się [tych reguł](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4).
+
+### Jaka jest różnica między obiektami hosta a obiektami macierzystymi?
+
+Obiekty macierzyste to obiekty, które są częścią języka JavaScript zdefiniowanego w specyfikacji ECMAScript, takie jak `String`, `Math`, `RegExp`, `Object`, `Function`, etc.
+
+Obiekty hosta są dostarczane przez środowisko wykonawcze (przeglądarkę lub Node), takie jak `window`, `XMLHTTPRequest`, etc.
+
+###### Bibliografia
+
+- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
+
+### Różnica pomiędzy: `function Person(){}`, `var person = Person()`, i `var person = new Person()`?
+
+To pytanie jest dość niejasne. Myślę, że jego intencją jest to, że pyta o konstruktory w JavaScript. Z technicznego punktu widzenia, `function Person(){}` jest zwykłą deklaracją funkcji. Konwencja polega na wykorzystaniu PascalCase do funkcji, które mają być używane jako konstruktory.
+
+`var person = Person()` wywołuje `Person` jako funkcję, i nie jako konstruktor. Wywołanie jako takie jest częstym błędem, jeśli funkcja ma być używana jako konstruktor. Zazwyczaj konstruktor niczego nie zwraca, dlatego wywołanie konstruktora jak normalnej funkcji zwróci `undefined`, a to zostanie przypisane do zmiennej przeznaczonej jako instancja.
+
+`var person = new Person()` tworzy instancję obiektu `Person` za pomocą operatora `new`, który dziedziczy po `Person.prototype`. Alternatywą byłoby użycie `Object.create`, tak jak: `Object.create(Person.prototype)`.
+
+```js
+function Person(name) {
+  this.name = name;
+}
+
+var person = Person('John');
+console.log(person); // undefined
+console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined
+
+var person = new Person('John');
+console.log(person); // Person { name: "John" }
+console.log(person.name); // "john"
+```
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
+
+### Jaka jest różnica pomiędzy `.call` i `.apply`?
+
+Zarówno `.call`, jak i `.apply` są używane do wywoływania funkcji, a pierwszy parametr zostanie użyty jako wartość `this` w funkcji. Jednak `.call` przyjmuje argumenty oddzielone przecinkami jako kolejne argumenty, podczas gdy `.apply` przyjmuje tablicę argumentów jako następny argument. Łatwym sposobem na zapamiętanie tego jest C dla `call` i oddzielone przecinkami, i A dla `apply` oraz tablica argumentów.
+
+```js
+function add(a, b) {
+  return a + b;
+}
+
+console.log(add.call(null, 1, 2)); // 3
+console.log(add.apply(null, [1, 2])); // 3
+```
+
+### Wytłumacz `Function.prototype.bind`.
+
+Wzięte słowo w słowo z[MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind):
+
+> Metoda `bind()` tworzy nową funkcję, która po wywołaniu ma ustawione słowo kluczowe `this` na podaną wartość, z podaną sekwencją argumentów poprzedzającą dowolną podaną podczas wywoływania nowej funkcji.
+
+Z mojego doświadczenia wynika, że jest to najbardziej przydatne do bindowania wartości `this` w metodach klas, które chcesz przekazać innym funkcjom. Często odbywa się to w komponentach React.
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
+
+### Kiedy użyłbyś `document.write()`?
+
+`document.write()` zapisuje ciąg tekstu do strumienia dokumentów otwartego przez `document.open()`. Kiedy `document.write()` jest wykonywane po załadowaniu strony, wywoła `document.open`, który usuwa cały dokument (`<head>`i `<body>` usunięto!) i zamienia zawartość na podaną wartość parametru. Dlatego jest zwykle uważany za niebezpieczny i podatny na niewłaściwe użycie.
+
+Istnieje kilka odpowiedzi online, które wyjaśniają, że w kodzie analitycznym używany jest `document.write()` lub [gdy chcesz dołączyć style, które powinny działać tylko wtedy, gdy JavaScript jest włączony](https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html). Jest nawet używany w HTML5 boilerplate do [równoległego ładowania skryptów i zachowania kolejności wykonywania](https://github.com/paulirish/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag)! Podejrzewam jednak, że przyczyny te mogą być nieaktualne i we współczesnych czasach można je osiągnąć bez użycia `document.write()`. Proszę, popraw mnie, jeśli się mylę.
+
+###### Bibliografia
+
+- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
+- https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
+
+### Jaka jest różnica między wykrywaniem funkcji, feature inference i używaniem UA string?
+
+**Feature Detection**
+
+Wykrywanie funkcji polega na sprawdzeniu, czy przeglądarka obsługuje określony blok kodu, i uruchomieniu innego kodu w zależności od tego, czy to robi (czy nie), tak aby przeglądarka zawsze zapewniała działanie w przypadku awarii/błędów w niektórych przeglądarkach. Na przykład:
+
+```js
+if ('geolocation' in navigator) {
+  // Can use navigator.geolocation
+} else {
+  // Handle lack of feature
+}
+```
+
+[Modernizr](https://modernizr.com/) to świetna biblioteka do obsługi feature detection.
+
+**Feature Inference**
+
+Feature inference sprawdza funkcję podobnie jak wykrywanie funkcji, ale używa innej funkcji, ponieważ zakłada, że ona również będzie istnieć, np .:
+
+```js
+if (document.getElementsByTagName) {
+  element = document.getElementById(id);
+}
+```
+
+To nie jest naprawdę zalecane. Wykrywanie funkcji jest bardziej niezawodne.
+
+**UA String**
+
+Jest to string zgłaszany przez przeglądarkę, który umożliwia elementom protokołu sieciowego identyfikowanie typu aplikacji, systemu operacyjnego, dostawcy oprogramowania lub wersji oprogramowania żądającego agenta użytkownika oprogramowania. Można uzyskać do niego dostęp za pośrednictwem `navigator.userAgent`. Jednak string jest trudny do przeanalizowania i może zostać sfałszowany. Na przykład Chrome zgłasza zarówno Chrome, jak i Safari. Aby wykryć Safari, musisz sprawdzić string Safari i nieobecność Chrome string. Unikaj tej metody.
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
+- https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
+
+### Wyjaśnij Ajax tak szczegółowo, jak to możliwe.
+
+Ajax (asynchronous JavaScript and XML - asynchroniczny JavaScript i XML) to zestaw technik tworzenia stron internetowych wykorzystujących wiele technologii sieciowych po stronie klienta do tworzenia asynchronicznych aplikacji internetowych. Dzięki Ajax aplikacje internetowe mogą wysyłać dane i pobierać je z serwera asynchronicznie (w tle) bez ingerencji w wyświetlanie i zachowanie istniejącej strony. Oddzielając warstwę wymiany danych od warstwy prezentacji, Ajax pozwala stronom internetowym, a poprzez rozszerzenia aplikacji internetowych, dynamicznie zmieniać treść bez konieczności ponownego ładowania całej strony. W praktyce nowoczesne implementacje często zastępują użycie JSON zamiast XML, ze względu na zalety natywnej obsługi JSON w JavaScript.
+
+API `XMLHttpRequest` jest często używany do komunikacji asynchronicznej lub w dzisiejszych czasach, `fetch()` API.
+
+###### Bibliografia
+
+- https://en.wikipedia.org/wiki/Ajax_(programming)
+- https://developer.mozilla.org/en-US/docs/AJAX
+
+### Jakie są zalety i wady korzystania z Ajax?
+
+**Zalety**
+
+- Lepsza interaktywność. Nowa zawartość z serwera może być zmieniana dynamicznie bez potrzeby przeładowywania całej strony.
+- Zmniejsza liczbę połączeń z serwerem, ponieważ skrypty i arkusze stylów muszą być wymagane tylko raz.
+- Stan można utrzymać na stronie. Zmienne JavaScript i stan DOM zostaną zachowane, ponieważ główna strona kontenera nie została ponownie załadowana.
+- Zasadniczo większość zalet SPA.
+
+**Wady**
+
+- Dynamiczne strony internetowe są trudniejsze do dodania do zakładek.
+- Nie działa, jeśli JavaScript jest wyłączony w przeglądarce.
+- Niektóre przeglądarki internetowe nie wykonują JavaScript i nie widzą treści załadowanych przez JavaScript.
+- Strony internetowe wykorzystujące Ajax do pobierania danych prawdopodobnie będą musiały połączyć pobrane dane zdalne z szablonami po stronie klienta, aby zaktualizować DOM. Aby tak się stało, JavaScript musi zostać przeanalizowany i wykonany w przeglądarce, a urządzenia mobilne z niższej półki mogą mieć z tym problem.
+- Zasadniczo większość wad SPA.
+
+### Wyjaśnij, jak działa JSONP (i jak to naprawdę nie jest Ajax).
+
+JSONP (JSON with Padding) jest metodą powszechnie używaną do omijania zasad międzydomenowych w przeglądarkach internetowych, ponieważ żądania Ajax z bieżącej strony do domeny międzydomenowej są niedozwolone.
+
+JSONP działa poprzez wysłanie żądania do domeny cross-origin za pomocą znacznika `<script>` i zwykle za pomocą parametru zapytania `callback`, na przykład: `https://example.com?callback=printData`. Serwer następnie opakowuje dane w funkcję o nazwie `printData` i zwraca je klientowi.
+
+```html
+<!-- https://mydomain.com -->
+<script>
+  function printData(data) {
+    console.log(`My name is ${data.name}!`);
+  }
+</script>
+
+<script src="https://example.com?callback=printData"></script>
+```
+
+```js
+// File loaded from https://example.com?callback=printData
+printData({ name: 'Yang Shun' });
+```
+
+Klient musi mieć funkcję `printData` w swoim globalnym zasięgu, a funkcja zostanie wykonana przez klienta po otrzymaniu odpowiedzi z domeny cross-origin.
+
+JSONP może być niebezpieczny i ma pewne implikacje dla bezpieczeństwa. Ponieważ JSONP to tak naprawdę JavaScript, może robić wszystko, co potrafi JavaScript, więc musisz zaufać dostawcy danych JSONP.
+
+Obecnie, [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) jest zalecanym podejściem, a JSONP jest postrzegany jako hack.
+
+###### Bibliografia
+
+- https://stackoverflow.com/a/2067584/1751946
+
+### Czy kiedykolwiek używałeś szablonów JavaScript? Jeśli tak, z jakich bibliotek korzystałeś?
+
+Tak. Handlebars, Underscore, Lodash, AngularJS, i JSX. Nie podobało mi się tworzenie szablonów w AngularJS, ponieważ często używało łańcuchów w dyrektywach, a literówki nie zostały złapane. JSX jest moim nowym ulubionym, ponieważ jest bliżej JavaScript i nie ma prawie żadnej składni do nauki. W dzisiejszych czasach możesz nawet używać literałów ciągów szablonów ES2015 jako szybkiego sposobu tworzenia szablonów bez konieczności korzystania z kodu innej firmy.
+
+```js
+const template = `<div>My name is: ${name}</div>`;
+```
+
+Należy jednak pamiętać o potencjalnym XSS w powyższym podejściu, ponieważ zawartość nie jest dla ciebie umykająca, w przeciwieństwie do bibliotek szablonów.
+
+### Wytłumacz "hoisting".
+
+Hoisting to termin używany do wyjaśnienia zachowania deklaracji zmiennych w kodzie. Zmienne zadeklarowane lub zainicjowane słowem kluczowym `var` będą miały swoją deklarację "przeniesioną" na górę zakresu na poziomie modułu/funkcji, który nazywamy windowaniem. Jednak tylko deklaracja jest windowana, przydział (jeśli taki istnieje) pozostanie tam, gdzie jest.
+
+Zauważ, że deklaracja nie została faktycznie przeniesiona - silnik JavaScript analizuje deklaracje podczas kompilacji i dowiaduje się o deklaracjach i ich zakresach. Po prostu łatwiej jest zrozumieć to zachowanie, wizualizując deklaracje jako podnoszone na szczyt ich zakresu. Wyjaśnijmy kilka przykładów.
+
+```js
+console.log(foo); // undefined
+var foo = 1;
+console.log(foo); // 1
+```
+
+W deklaracjach funkcji podnoszone jest ciało, podczas gdy w wyrażeniach funkcji (zapisanych w formie deklaracji zmiennych) windowanana jest tylko deklaracja zmiennej.
+
+```js
+// Function Declaration
+console.log(foo); // [Function: foo]
+foo(); // 'FOOOOO'
+function foo() {
+  console.log('FOOOOO');
+}
+console.log(foo); // [Function: foo]
+
+// Function Expression
+console.log(bar); // undefined
+bar(); // Uncaught TypeError: bar is not a function
+var bar = function () {
+  console.log('BARRRR');
+};
+console.log(bar); // [Function: bar]
+```
+
+Windowane są również zmienne zadeklarowane za pomocą `let` i `const`. Jednak w przeciwieństwie do `var` i `function`, nie są one inicjowane i dostęp do nich przed deklaracją spowoduje wyjątek `ReferenceError`. Zmienna znajduje się w "czasowej martwej strefie" od początku bloku do momentu przetworzenia deklaracji.
+
+```js
+x; // undefined
+y; // Reference error: y is not defined
+
+var x = 'local';
+let y = 'local';
+```
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_Types#Variable_hoisting
+- https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-not-hoisted-in-es6/31222689#31222689
+
+### Opisz event bubbling.
+
+Kiedy zdarzenie zostanie wyzwolone na elemencie DOM, spróbuje obsłużyć to zdarzenie, jeśli dołączony jest detektor, a następnie zdarzenie zostanie przekazane do jego obiektu nadrzędnego i nastąpi to samo. To 'bubbling' występuje u przodków elementu aż do `document`. Event bubbling jest mechanizmem delegowania zdarzeń.
+
+### Jaka jest różnica pomiędzy "attribute", a "property"?
+
+Atrybuty są zdefiniowane w znacznikach HTML, ale właściwości są zdefiniowane w DOM. Aby zilustrować różnicę, wyobraź sobie, że mamy to pole tekstowe w naszym HTML: `<input type="text" value="Hello">`.
+
+```js
+const input = document.querySelector('input');
+console.log(input.getAttribute('value')); // Hello
+console.log(input.value); // Hello
+```
+
+Ale po zmianie wartości pola tekstowego przez dodanie "World!" staje się to:
+
+```js
+console.log(input.getAttribute('value')); // Hello
+console.log(input.value); // Hello World!
+```
+
+###### Bibliografia
+
+- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
+
+### Dlaczego rozszerzenie wbudowanych obiektów JavaScript nie jest dobrym pomysłem?
+
+Rozszerzenie wbudowanego/natywnego obiektu JavaScript oznacza dodanie właściwości/funkcji do jego `prototype`. Choć na początku może się to wydawać dobrym pomysłem, w praktyce jest niebezpieczne. Wyobraź sobie, że twój kod używa kilku bibliotek, które rozszerzają `Array.prototype` poprzez dodanie tej samej metody `contains`, implementacje się nadpisują, a twój kod się zepsuje, jeśli zachowanie tych dwóch metod nie będzie takie samo.
+
+Jedynym momentem, w którym możesz chcieć rozszerzyć obiekt macierzysty, jest utworzenie polyfill, zasadniczo zapewniające własną implementację metody, która jest częścią specyfikacji JavaScript, ale może nie istnieć w przeglądarce użytkownika, jeśli jest to starsza przeglądarka.
+
+###### Bibliografia
+
+- http://lucybain.com/blog/2014/js-extending-built-in-objects/
+
+### Różnica między document `load` event, a document `DOMContentLoaded` event?
+
+Zdarzenie `DOMContentLoaded` jest uruchamiane, gdy początkowy dokument HTML został całkowicie załadowany i przeanalizowany, bez oczekiwania na zakończenie ładowania arkuszy stylów, obrazów i podramek.
+
+`window`sowe zdarzenie `load` jest uruchamiane dopiero po załadowaniu DOM i wszystkich zależnych zasobów i assetów.
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
+- https://developer.mozilla.org/en-US/docs/Web/Events/load
+
+### Jaka jest różnica pomiędzy `==` i `===`?
+
+`==` jest abstrakcyjnym operatorem równości, podczas gdy `===` jest operatorem ścisłej równości. Operator `==` porówna pod kątem równości po wykonaniu niezbędnych konwersji typu. Operator `===` nie dokona konwersji typu, więc jeśli dwie wartości nie są tego samego typu, `===` po prostu zwróci `false`. Gdy używasz `==`, mogą się zdarzyć dziwne rzeczy, takie jak:
+
+```js
+1 == '1'; // true
+1 == [1]; // true
+1 == true; // true
+0 == ''; // true
+0 == '0'; // true
+0 == false; // true
+```
+
+Radzę nigdy nie korzystać z operatora `==`, z wyjątkiem wygody przy porównywaniu z `null` lub `undefined`, gdzie `a == null` zwróci `true`, jeśli `a` jest `null` lub `undefined`.
+
+```js
+var a = null;
+console.log(a == null); // true
+console.log(a == undefined); // true
+```
+
+###### Bibliografia
+
+- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
+
+### Wyjaśnij same-origin policy w odniesieniu do JavaScript.
+
+Same-origin policy zapobiega przesyłaniu żądań JavaScript przez granice domen. Źródło jest zdefiniowane jako kombinacja schematu URI, nazwy hosta i numeru portu. Ta zasada uniemożliwia złośliwemu skryptowi na jednej stronie uzyskanie dostępu do poufnych danych na innej stronie internetowej za pomocą modelu obiektowego dokumentu (DOM) tej strony.
+
+###### Bibliografia
+
+- https://en.wikipedia.org/wiki/Same-origin_policy
+
+### Spraw aby działało:
+
+```js
+duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
+```
+
+```js
+function duplicate(arr) {
+  return arr.concat(arr);
+}
+
+duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
+```
+
+Lub z ES6:
+
+```js
+const duplicate = (arr) => [...arr, ...arr];
+
+duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
+```
+
+### Dlaczego nazywa się to wyrażeniem trójargumentowym, co oznacza słowo "trójargumentowe"?
+
+"Ternary" wskazuje trzy, a wyrażenie potrójne akceptuje trzy operandy, warunek testu, wyrażenie "then" i wyrażenie "else". Wyrażenia trójskładnikowe nie są specyficzne dla JavaScript i nie jestem pewien, dlaczego znajduje się nawet na tej liście.
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
+
+### Czym jest `"use strict";`? Jakie są zalety i wady korzystania z tego?
+
+'use strict' to instrukcja używana do włączenia trybu strict mode do całych skryptów lub poszczególnych funkcji. Tryb strict mode to sposób na włączenie ograniczonej wersji JavaScript.
+
+Zalety:
+
+- Uniemożliwia przypadkowe utworzenie zmiennych globalnych.
+- Wykonuje zadania, które w przeciwnym razie cicho nie rzucałyby wyjątku.
+- Podejmuje próby usunięcia właściwości nieusuwalnych (gdzie przed próbą po prostu nie miałby żadnego efektu).
+- Wymaga, aby nazwy parametrów funkcji były unikalne.
+- `this` jest niezdefiniowane w kontekście globalnym.
+- Łapie niektóre popularne coding bloopers, rzucając wyjątki.
+- Wyłącza funkcje, które są mylące lub źle przemyślane.
+
+Wady:
+
+- Wiele brakujących funkcji, do których niektórzy programiści mogą być przyzwyczajeni.
+- Nie ma już dostępu do `function.caller` i `function.arguments`.
+- Łączenie skryptów napisanych w różnych trybach strict mode może powodować problemy.
+
+Ogólnie rzecz biorąc, uważam, że korzyści przeważają nad wadami i nigdy nie musiałem polegać na funkcjach blokujących tryb strict mode. Poleciłbym użycie trybu strict mode.
+
+###### Bibliografia
+
+- http://2ality.com/2011/10/strict-mode-hatred.html
+- http://lucybain.com/blog/2014/js-use-strict/
+
+### Utwórz pętlę for, która będzie się powtarzać do `100` podczas wysyłania **"fizz"** w wielokrotnościach `3`, **"buzz"** w wielokrotnościach `5` i **"fizzbuzz"** w wielokrotnościach `3` oraz `5`.
+
+Sprawdź tę wersję FizzBuzz od [Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724).
+
+```js
+for (let i = 1; i <= 100; i++) {
+  let f = i % 3 == 0,
+    b = i % 5 == 0;
+  console.log(f ? (b ? 'FizzBuzz' : 'Fizz') : b ? 'Buzz' : i);
+}
+```
+
+Nie radzę jednak pisać wyżej podczas wywiadów. Trzymaj się długiego, ale wyraźnego podejścia. Aby uzyskać bardziej zwariowane wersje FizzBuzz, sprawdź odnośnik poniżej.
+
+###### Bibliografia
+
+- https://gist.github.com/jaysonrowe/1592432
+
+### Dlaczego generalnie dobrym pomysłem jest pozostawienie globalnego zasięgu witryny takim, jakim jest, i nigdy go nie dotykać?
+
+Każdy skrypt ma dostęp do zakresu globalnego, a jeśli wszyscy użyją globalnej przestrzeni nazw do zdefiniowania swoich zmiennych, prawdopodobnie dojdzie do kolizji. Wzorzec modułu (IIFE) służy do enkapsulacji zmiennych w lokalnej przestrzeni nazw.
+
+### Dlaczego miałbyś używać czegoś takiego jak zdarzenie `load`? Czy to wydarzenie ma wady? Czy znasz jakieś alternatywy i dlaczego miałbyś je wykorzystać?
+
+Zdarzenie `load` odpala po zakończeniu ładowania dokumentu. W tym momencie wszystkie obiekty w dokumencie znajdują się w DOM, a wszystkie obrazy, skrypty, łącza i podramki zostały załadowane.
+
+Zdarzenie DOM `DOMContentLoaded` uruchomi się po zbudowaniu DOM dla strony, ale nie czekaj na zakończenie ładowania innych zasobów. Jest to preferowane w niektórych przypadkach, gdy nie trzeba ładować całej strony przed inicjalizacją.
+
+TODO.
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
+
+### Wyjaśnij, czym jest SAP i jak uczynić ją przyjazną SEO.
+
+Poniżej zaczerpnięto z niesamowitego [Grab Front End Guide](https://github.com/grab/front-end-guide), który przypadkiem jest napisany przeze mnie!
+
+Obecnie twórcy stron internetowych odnoszą się do produktów, które budują, jako aplikacji internetowych, a nie stron internetowych. Chociaż nie ma ścisłej różnicy między tymi dwoma terminami, aplikacje internetowe wydają się być wysoce interaktywne i dynamiczne, umożliwiając użytkownikowi wykonywanie działań i otrzymywanie odpowiedzi na ich działanie. Tradycyjnie przeglądarka odbiera HTML z serwera i renderuje go. Gdy użytkownik przechodzi do innego adresu URL, wymagane jest odświeżenie całej strony, a serwer wysyła nowy kod HTML na nową stronę. Nazywa się to renderowaniem po stronie serwera.
+
+Jednak w nowoczesnych SPA stosuje się zamiast tego renderowanie po stronie klienta. Przeglądarka ładuje stronę początkową z serwera wraz ze skryptami (frameworki, biblioteki, kod aplikacji) i arkuszami stylów wymaganymi dla całej aplikacji. Gdy użytkownik przechodzi do innych stron, odświeżanie strony nie jest uruchamiane. Adres URL strony jest aktualizowany za pośrednictwem [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). Nowe dane wymagane dla nowej strony, zwykle w formacie JSON, są pobierane przez przeglądarkę za pośrednictwem żądań [AJAX](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started) do serwera. SPA następnie dynamicznie aktualizuje stronę danymi za pomocą JavaScript, który został już pobrany podczas ładowania strony. Ten model jest podobny do działania natywnych aplikacji mobilnych.
+
+Korzyści:
+
+- Aplikacja jest bardziej responsywna, a użytkownicy nie widzą flashowania między nawigacjami po stronach z powodu odświeżania całej strony.
+- Na serwer przesyłanych jest mniej żądań HTTP, ponieważ te same zasoby nie muszą być pobierane ponownie przy każdym ładowaniu strony.
+- Jasne rozdzielenie spraw między klientem a serwerem; możesz łatwo budować nowych klientów dla różnych platform (np. mobilnych, chatbotów, inteligentnych zegarków) bez konieczności modyfikowania kodu serwera. Możesz także modyfikować stos technologii na kliencie i serwerze niezależnie, o ile umowa API nie zostanie zerwana.
+
+Wady:
+
+- Cięższe początkowe ładowanie strony ze względu na ładowanie frameworka, kodu aplikacji i zasobów wymaganych na wielu stronach.
+- Na serwerze należy wykonać dodatkowy krok, aby skonfigurować go tak, aby kierował wszystkie żądania do jednego punktu wejścia i pozwalał na przejęcie od niego routingu po stronie klienta.
+- Usługi SPA są zależne od JavaScript do renderowania treści, ale nie wszystkie wyszukiwarki wykonują JavaScript podczas przeszukiwania i mogą widzieć pustą treść na twojej stronie. To mimowolnie szkodzi optymalizacji silnika wyszukiwarki (Search Engine Optimization - SEO) twojej aplikacji. Jednak przez większość czasu, gdy tworzysz aplikacje, SEO nie jest najważniejszym czynnikiem, ponieważ nie wszystkie treści muszą być indeksowane przez wyszukiwarki. Aby temu zaradzić, możesz renderować aplikację po stronie serwera lub korzystać z usług takich jak [Prerender](https://prerender.io/) aby "wyrenderuj javascript w przeglądarce, zapisz statyczny kod HTML i zwróć go do pliku crawlers".
+
+###### Bibliografia
+
+- https://github.com/grab/front-end-guide#single-page-apps-spas
+- http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
+- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
+- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
+
+### Jaki jest zakres twojego doświadczenia z Promises i/lub ich polyfills?
+
+Posiadanie praktycznej wiedzy na ten temat. Obietnica (promise) to obiekt, który może kiedyś wygenerować jedną wartość: wartość rozwiązaną lub przyczynę, dla której nie została ona rozwiązana (np. wystąpił błąd sieci). Obietnica może być w jednym z 3 możliwych stanów: spełniona, odrzucona lub oczekująca (fulfilled, rejected, pending). Użytkownicy promise mogą dołączać callbacks, aby obsłużyć spełnioną wartość lub przyczynę odrzucenia.
+
+Niektóre wspólne polyfills są `$.deferred`, Q oraz Bluebird ale nie wszystkie z nich są zgodne ze specyfikacją. ES2015 obsługuje obietnice od razu po wyjęciu z pudełka, a obecnie polifilly zwykle nie są potrzebne.
+
+###### Bibliografia
+
+- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
+
+### Jakie są zalety i wady korzystania z obietnic zamiast callbacks?
+
+**Zalety**
+
+- Unikanie callback hell, które może być nieczytelne.
+- Ułatwia pisanie sekwencyjnego kodu asynchronicznego, który można odczytać za pomocą `.then()`.
+- Ułatwia pisanie równoległego kodu asynchronicznego za pomocą `Promise.all()`.
+- W przypadku obietnic te scenariusze występujące w kodowaniu callbacks-only nie wystąpią:
+  - wywołanie callback za wcześnie
+  - wywołanie callback za późno (lub nigdy)
+  - wywołanie callback za mało lub zbyt wiele razy
+  - nieprzekazanie niezbędnego środowiska/parametrów
+  - Połknięcie ewentualnych błędów/wyjątków
+
+**Wady**
+
+- Nieco bardziej złożony kod (dyskusyjny).
+- W starszych przeglądarkach, w których ES2015 nie jest obsługiwany, w celu korzystania z niego należy załadować polyfill.
+
+###### Bibliografia
+
+- https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch3.md
+
+### Jakie są zalety/wady pisania kodu JavaScript w języku kompilującym się w JavaScript?
+
+Niektóre przykłady języków, które kompilują się do JavaScript włączając CoffeeScript, Elm, ClojureScript, PureScript i TypeScript.
+
+Zalety:
+
+- Naprawia niektóre długotrwałe problemy z JavaScriptem i odradza antywzorce JavaScript.
+- Umożliwia pisanie krótszego kodu, poprzez dodanie cukru syntaktycznego do JavaScript, którego moim zdaniem ES5 brakuje, ale ES2015 jest niesamowity.
+- Typy statyczne są niesamowite (w przypadku TypeScript) dla dużych projektów, które muszą być utrzymywane z czasem.
+
+Wady:
+
+- Wymaga procesu builda/kompilacji, ponieważ przeglądarki obsługują tylko JavaScript, a twój kod będzie musiał zostać skompilowany w JavaScript przed podaniem do przeglądarki.
+- Debugowanie może być uciążliwe, jeśli mapy źródłowe nie są ładnie odwzorowane na wstępnie skompilowanym źródle.
+- Większość programistów nie zna tych języków i będzie musiała się ich nauczyć. Jeśli używasz go do swoich projektów, wiąże się to z dodatkowymi kosztami.
+- Mniejsza społeczność (zależy od języka), co oznacza, że trudniej będzie znaleźć zasoby, samouczki, biblioteki i narzędzia.
+- Może brakować obsługi IDE / edytora.
+- Te języki zawsze będą w tyle za najnowszym standardem JavaScript.
+- Programiści powinni być świadomi, do czego ich kod jest kompilowany - ponieważ tak właśnie by się działało, i to w końcu ma znaczenie.
+
+W praktyce, ES2015 znacznie poprawił JavaScript i znacznie ułatwił pisanie. Obecnie nie widzę potrzeby używania CoffeeScript.
+
+###### Bibliografia
+
+- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
+
+### Jakich narzędzi i technik używasz do debugowania kodu JavaScript?
+
+- React i Redux
+  - [React Devtools](https://github.com/facebook/react-devtools)
+  - [Redux Devtools](https://github.com/gaearon/redux-devtools)
+- Vue
+  - [Vue Devtools](https://github.com/vuejs/vue-devtools)
+- JavaScript
+  - [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)
+  - instrukcja `debugger`
+  - stary dobry `console.log` debugging
+
+###### Bibliografia
+
+- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
+- https://raygun.com/blog/javascript-debugging/
+
+### Jakich konstrukcji językowych używasz do iteracji właściwości obiektów i elementów tablicy?
+
+Dla obiektów:
+
+- pętle `for-in` - `for (var property in obj) { console.log(property); }`. Spowoduje to jednak również iterację po jej odziedziczonych właściwościach, a przed użyciem dodanie sprawdzenia `obj.hasOwnProperty (właściwość)`.
+- `Object.keys()` - `Object.keys(obj).forEach(function (property) { ... })`. `Object.keys()` jest statyczną metodą, która wyświetli wszystkie wyliczalne właściwości obiektu, który przekazujesz.
+- `Object.getOwnPropertyNames()` - `Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`. `Object.getOwnPropertyNames()` jest statyczną metodą, która wyświetli wszystkie wyliczalne i niepoliczalne właściwości przekazywanego obiektu.
+
+Dla tablic:
+
+- pętle `for` - `for (var i = 0; i < arr.length; i++)`. Częstą pułapką jest to, że `var` jest w zakresie funkcji, a nie w zakresie bloku, i przez większość czasu chciałbyś mieć zmienną iteratora o zasięgu blokowym. ES2015 wprowadza `let`, który ma zakres blokowy i zaleca się jego użycie zamiast tego. To staje się: `for (let i = 0; i < arr.length; i++)`.
+- `forEach` - `arr.forEach(function (el, index) { ... })`. Ta konstrukcja może być czasem wygodniejsza, ponieważ nie musisz używać `index`, jeśli wszystko, czego potrzebujesz, to elementy tablicy. Istnieją również metody `every` i `some`, które pozwalają na wcześniejsze zakończenie iteracji.
+- pętle `for-of` - `for (let elem of arr) { ... }`. ES6 wprowadza nową pętlę, pętlę `for-of`, która pozwala zapętlać obiekty zgodne z [iterowalnym protokołem](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol) takie jak `String`, `Array`, `Map`, `Set`, etc. Łączy zalety pętli `for` i metody `forEach()`. Zaletą pętli `for` jest to, że można się od niej oderwać, a zaletą `forEach()` jest to, że jest ona bardziej zwięzła niż pętla `for`, ponieważ nie jest potrzebna zmienna licznika. Pętla `for-of` daje zarówno możliwość zerwania z pętli, jak i bardziej zwięzłą składnię.
+
+Przez większość czasu wolałbym metodę `.forEach`, ale tak naprawdę zależy to od tego, co próbujesz zrobić. Przed ES6 używaliśmy pętli `for`, gdy potrzebowaliśmy przedwcześnie zakończyć pętlę za pomocą `break`. Ale teraz dzięki ES6 możemy to zrobić za pomocą pętli `for-of`. Używałbym pętli `for`, gdy potrzebuję jeszcze większej elastyczności, takiej jak zwiększanie iteratora więcej niż raz na pętlę.
+
+Ponadto, gdy korzystasz z pętli `for-of`, jeśli potrzebujesz dostępu zarówno do indeksu, jak i wartości każdego elementu tablicy, możesz to zrobić za pomocą metody ESR Array `entry()` i destrukcji:
+
+```js
+const arr = ['a', 'b', 'c'];
+
+for (let [index, elem] of arr.entries()) {
+  console.log(index, ': ', elem);
+}
+```
+
+###### Bibliografia
+
+- http://2ality.com/2015/08/getting-started-es6.html#from-for-to-foreach-to-for-of
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries
+
+### Wyjaśnij różnicę między obiektami mutable, a immutable.
+
+Niezmienność jest podstawową zasadą programowania funkcjonalnego i ma wiele do zaoferowania także programom obiektowym. Zmienny obiekt to obiekt, którego stan można zmodyfikować po utworzeniu. Niezmienny obiekt to obiekt, którego stanu nie można zmienić po jego utworzeniu.
+
+#### Jaki jest przykład niezmiennego obiektu w JavaScript?
+
+W JavaScript niektóre wbudowane typy (liczby, stringi) są niezmienne, ale obiekty niestandardowe są na ogół modyfikowalne.
+
+Niektóre wbudowane niezmienne obiekty JavaScript są `Math`, `Date`.
+
+Oto kilka sposobów dodania / symulacji niezmienności prostych obiektów JavaScript.
+
+**Object Constant Properties**
+
+Łącząc `writable: false` i `configurable: false`, możesz zasadniczo stworzyć stałą (nie można jej zmienić, przedefiniować ani usunąć) jako właściwość obiektu, na przykład:
+
+```js
+let myObject = {};
+Object.defineProperty(myObject, 'number', {
+  value: 42,
+  writable: false,
+  configurable: false,
+});
+console.log(myObject.number); // 42
+myObject.number = 43;
+console.log(myObject.number); // 42
+```
+
+**Prevent Extensions**
+
+Jeśli chcesz uniemożliwić dodawanie do obiektu nowych właściwości, ale w przeciwnym razie pozostaw resztę właściwości obiektu w spokoju, wywołaj `Object.preventExtensions(...)`:
+
+```js
+var myObject = {
+  a: 2,
+};
+
+Object.preventExtensions(myObject);
+
+myObject.b = 3;
+myObject.b; // undefined
+```
+
+W trybie innym niż strict tworzenie `b` kończy się bezgłośnie. W trybie strict mode rzuca `TypeError`.
+
+**Seal**
+
+`Object.seal()` tworzy "zapieczętowany" obiekt, co oznacza, że bierze istniejący obiekt i zasadniczo wywołuje `Object.preventExtensions()` zaznacza na nim wszystkie istniejące właściwości jako `configurable: false`.
+
+Dlatego nie tylko nie możesz dodawać żadnych dodatkowych właściwości, ale także nie możesz rekonfigurować ani usuwać żadnych istniejących właściwości (chociaż nadal możesz modyfikować ich wartości).
+
+**Freeze**
+
+`Object.freeze()` tworzy zamrożony obiekt, co oznacza, że pobiera istniejący obiekt i zasadniczo wywołuje na nim `Object.seal()`, ale oznacza również wszystkie właściwości "data accessor" jako writable:false, dzięki czemu ich wartości nie można zmienić.
+
+To podejście jest najwyższym poziomem niezmienności, jaki można osiągnąć dla samego obiektu, ponieważ zapobiega wszelkim zmianom w tym obiekcie lub jakichkolwiek jego bezpośrednich właściwościach (chociaż, jak wspomniano powyżej, zawartość jakichkolwiek innych obiektów, do których istnieją odniesienia, pozostaje nienaruszona).
+
+```js
+var immutable = Object.freeze({});
+```
+
+Zamrożenie obiektu nie pozwala na dodanie nowych właściwości do obiektu i uniemożliwia usunięcie lub zmianę istniejących właściwości. `Object.freeze()` zachowuje wyliczalność, konfigurowalność, zapisywalność i prototyp obiektu. Zwraca przekazany obiekt i nie tworzy zamrożonej kopii.
+
+#### Jakie są zalety i wady immutability?
+
+**Zalety**
+
+- Łatwiejsze wykrywanie zmian - Równość obiektów można ustalić w wydajny i łatwy sposób dzięki równości referencyjnej. Jest to przydatne do porównywania różnic obiektów w React i Redux.
+- Programy z niezmiennymi obiektami są mniej skomplikowane do przemyślenia, ponieważ nie musisz martwić się o to, jak obiekt może ewoluować w czasie.
+- Kopie obronne nie są już potrzebne, gdy niezmienne obiekty wracają z funkcji lub są przekazywane do nich, ponieważ nie ma możliwości, aby niezmienny obiekt został przez nią zmodyfikowany.
+- Łatwe udostępnianie za pośrednictwem referencji - Jedna kopia obiektu jest tak samo dobra jak inna, dzięki czemu można buforować obiekty lub wielokrotnie używać tego samego obiektu.
+- Bezpieczne dla wątków - Niezmienne obiekty mogą być bezpiecznie używane między wątkami w środowisku wielowątkowym, ponieważ nie ma ryzyka ich modyfikacji w innych równolegle działających wątkach.
+- Korzystając z bibliotek takich jak ImmmutableJS, obiekty są modyfikowane przy użyciu współdzielenia strukturalnego i potrzeba mniej pamięci do posiadania wielu obiektów o podobnych strukturach.
+
+**Wady**
+
+- Naiwne implementacje niezmiennych struktur danych i ich operacje mogą powodować wyjątkowo niską wydajność, ponieważ za każdym razem tworzone są nowe obiekty. Zaleca się stosowanie bibliotek do wydajnych niezmiennych struktur danych i operacji wykorzystujących współużytkowanie strukturalne.
+- Alokacja (i dezalokacja) wielu małych obiektów zamiast modyfikowania istniejących może mieć wpływ na wydajność. Złożoność alokatora lub modułu wyrzucania elementów bezużytecznych zwykle zależy od liczby obiektów na stercie.
+- Trudno jest zbudować cykliczne struktury danych, takie jak wykresy. Jeśli masz dwa obiekty, których nie można zmodyfikować po inicjalizacji, w jaki sposób można je skierować na siebie?
+
+###### Bibliografia
+
+- https://stackoverflow.com/questions/1863515/pros-cons-of-immutability-vs-mutability
+
+#### Jak osiągnąć niezmienność we własnym kodzie?
+
+Jednym ze sposobów osiągnięcia niezmienności jest użycie bibliotek takich jak [immutable.js](https://immutable-js.com/), [mori](https://github.com/swannodette/mori) lub [immer](https://github.com/immerjs/immer).
+
+Alternatywą jest użycie deklaracji `const` w połączeniu ze wspomnianymi wyżej technikami tworzenia. Aby "mutować" obiekty, użyj operatora rozkładania, `Object.assign`, `Array.concat()` itp., Aby utworzyć nowe obiekty zamiast mutować obiekt oryginalny.
+
+Przykłady:
+
+```js
+// Array Example
+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"}
+```
+
+###### Bibliografia
+
+- https://stackoverflow.com/questions/1863515/pros-cons-of-immutability-vs-mutability
+- https://www.sitepoint.com/immutability-javascript/
+- https://wecodetheweb.com/2016/02/12/immutable-javascript-using-es6-and-beyond/
+
+### Wyjaśnij różnicę między funkcjami synchronicznymi i asynchronicznymi.
+
+Funkcje synchroniczne blokują, a funkcje asynchroniczne nie. W funkcjach synchronicznych instrukcje kończą się przed uruchomieniem następnej instrukcji. W takim przypadku program jest oceniany dokładnie w kolejności instrukcji, a wykonywanie programu jest wstrzymywane, jeśli jedna z instrukcji zajmuje bardzo dużo czasu.
+
+Funkcje asynchroniczne zwykle akceptują wywołanie zwrotne (callback) jako parametr i wykonywanie jest kontynuowane w następnym wierszu natychmiast po wywołaniu funkcji asynchronicznej. Wywołanie zwrotne jest wywoływane tylko wtedy, gdy operacja asynchroniczna jest zakończona, a stos wywołań jest pusty. Intensywne operacje, takie jak ładowanie danych z serwera WWW lub wyszukiwanie w bazie danych, powinny być wykonywane asynchronicznie, aby główny wątek mógł kontynuować wykonywanie innych operacji zamiast blokować do czasu zakończenia tej długiej operacji (w przypadku przeglądarek interfejs użytkownika (UI) zawiesza się).
+
+### Co to jest pętla zdarzeń? Jaka jest różnica między stosem wywołań (call stack) a kolejką zadań (task queue)?
+
+Pętla zdarzeń jest pętlą jednowątkową, która monitoruje stos wywołań i sprawdza, czy w kolejce zadań jest jakaś praca do wykonania. Jeśli stos wywołań jest pusty, a w kolejce zadań znajdują się funkcje wywołania zwrotnego, funkcja jest usuwana z kolejki i przekazywana na stos wywołań, który ma zostać wykonany.
+
+Jeśli jeszcze nie sprawdziłeś Philipa Roberta i jego [talk odnośnie Event Loop](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html), powinieneś. Jest to jeden z najczęściej oglądanych filmów w JavaScript.
+
+###### Bibliografia
+
+- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
+- http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
+
+### Wyjaśnij różnice w korzystaniu z `foo` pomiędzy `function foo() {}` i `var foo = function() {}`
+
+Pierwsza jest deklaracją funkcji, a druga jest wyrażeniem funkcji. Kluczową różnicą jest to, że deklaracje funkcji mają swoje ciała windowane, ale ciała wyrażeń funkcji nie są (mają takie samo zachowanie podczas windowania jak zmienne). Więcej informacji na temat windowania znajduje się w powyższym pytaniu [na temat windowania](#wytłumacz-hoisting). Jeśli spróbujesz wywołać wyrażenie funkcyjne przed jego zdefiniowaniem, otrzymasz błąd `Uncaught TypeError: XXX is not a function`.
+
+**Deklaracja funkcji**
+
+```js
+foo(); // 'FOOOOO'
+function foo() {
+  console.log('FOOOOO');
+}
+```
+
+**Wyrażenie funkcji**
+
+```js
+foo(); // Uncaught TypeError: foo is not a function
+var foo = function () {
+  console.log('FOOOOO');
+};
+```
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
+
+### Jakie są różnice między zmiennymi utworzonymi za pomocą `let`, `var` lub `const`?
+
+Zmienne zadeklarowane przy użyciu słowa kluczowego `var` mają zasięg do funkcji, w której zostały utworzone, lub jeśli zostały utworzone poza jakąkolwiek funkcją, do obiektu globalnego. Parametry `let` i `const` są _block scoped_, co oznacza, że są dostępne tylko w najbliższym zestawie nawiasów klamrowych (funkcja, blok if-else lub pętla for).
+
+```js
+function foo() {
+  // All variables are accessible within functions.
+  var bar = 'bar';
+  let baz = 'baz';
+  const qux = 'qux';
+
+  console.log(bar); // bar
+  console.log(baz); // baz
+  console.log(qux); // qux
+}
+
+console.log(bar); // ReferenceError: bar is not defined
+console.log(baz); // ReferenceError: baz is not defined
+console.log(qux); // ReferenceError: qux is not defined
+```
+
+```js
+if (true) {
+  var bar = 'bar';
+  let baz = 'baz';
+  const qux = 'qux';
+}
+
+// var declared variables are accessible anywhere in the function scope.
+console.log(bar); // bar
+// let and const defined variables are not accessible outside of the block they were defined in.
+console.log(baz); // ReferenceError: baz is not defined
+console.log(qux); // ReferenceError: qux is not defined
+```
+
+`var` umożliwia windowanie zmiennych, co oznacza, że można do nich odwoływać się w kodzie przed ich zadeklarowaniem. `let` oraz `const` nie pozwolą na to, zamiast tego zgłoszą błąd.
+
+```js
+console.log(foo); // undefined
+
+var foo = 'foo';
+
+console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization
+
+let baz = 'baz';
+
+console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization
+
+const bar = 'bar';
+```
+
+Ponowne zadeklarowanie zmiennej za pomocą `var` nie spowoduje błędu, ale 'let' oraz 'const', tak.
+
+```js
+var foo = 'foo';
+var foo = 'bar';
+console.log(foo); // "bar"
+
+let baz = 'baz';
+let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared
+```
+
+`let` i `const` różnią się tym, że `let` pozwala na ponowne przypisanie wartości zmiennej, podczas gdy `const` nie.
+
+```js
+// This is fine.
+let foo = 'foo';
+foo = 'bar';
+
+// This causes an exception.
+const baz = 'baz';
+baz = 'qux';
+```
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
+
+### Jakie są różnice między konstruktorami funkcji ES6 i ES5?
+
+Najpierw spójrzmy na przykład każdego:
+
+```js
+// ES5 Function Constructor
+function Person(name) {
+  this.name = name;
+}
+
+// ES6 Class
+class Person {
+  constructor(name) {
+    this.name = name;
+  }
+}
+```
+
+W przypadku prostych konstruktorów wyglądają bardzo podobnie.
+
+Główna różnica w konstruktorze występuje podczas korzystania z dziedziczenia. Jeśli chcemy stworzyć klasę `Student`, która jest podklasą `Person` i dodać pole `studentId`, musimy to zrobić dodatkowo do powyższego.
+
+```js
+// ES5 Function Constructor
+function Student(name, studentId) {
+  // Call constructor of superclass to initialize superclass-derived members.
+  Person.call(this, name);
+
+  // Initialize subclass's own members.
+  this.studentId = studentId;
+}
+
+Student.prototype = Object.create(Person.prototype);
+Student.prototype.constructor = Student;
+
+// ES6 Class
+class Student extends Person {
+  constructor(name, studentId) {
+    super(name);
+    this.studentId = studentId;
+  }
+}
+```
+
+Używanie dziedziczenia w ES5 jest znacznie bardziej szczegółowe, a wersja ES6 jest łatwiejsza do zrozumienia i zapamiętania.
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
+- https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5
+
+### Czy możesz podać przypadek użycia nowej składni funkcji arrow =>? Czym ta nowa składnia różni się od innych funkcji?
+
+Jedną oczywistą zaletą funkcji strzałek jest uproszczenie składni potrzebnej do tworzenia funkcji, bez potrzeby stosowania słowa kluczowego `function`. Funkcja `this` w funkcjach strzałek jest również związana z otaczającym zakresem, który jest inny w porównaniu do zwykłych funkcji, w których `this` jest określane przez obiekt wywołujący go. Leksykonowalne `this` jest przydatne, gdy wywołuje się callbacki, szczególnie w komponentach React.
+
+### Jaka jest zaleta korzystania ze składni arrow syntax dla metody w konstruktorze?
+
+Główną zaletą używania funkcji strzałkowej jako metody w konstruktorze jest to, że wartość `this` jest ustawiana w momencie tworzenia funkcji i nie może się później zmienić. Tak więc, gdy konstruktor jest używany do utworzenia nowego obiektu, `this` zawsze będzie odnosić się do tego obiektu. Na przykład, powiedzmy, że mamy konstruktor `Person`, który bierze imię jako argument i ma dwie metody `console.log` o tej nazwie, jedną jako funkcję zwykłą, a drugą jako funkcję strzałkową:
+
+```js
+const Person = function (firstName) {
+  this.firstName = firstName;
+  this.sayName1 = function () {
+    console.log(this.firstName);
+  };
+  this.sayName2 = () => {
+    console.log(this.firstName);
+  };
+};
+
+const john = new Person('John');
+const dave = new Person('Dave');
+
+john.sayName1(); // John
+john.sayName2(); // John
+
+// The regular function can have its 'this' value changed, but the arrow function cannot
+john.sayName1.call(dave); // Dave (because "this" is now the dave object)
+john.sayName2.call(dave); // John
+
+john.sayName1.apply(dave); // Dave (because 'this' is now the dave object)
+john.sayName2.apply(dave); // John
+
+john.sayName1.bind(dave)(); // Dave (because 'this' is now the dave object)
+john.sayName2.bind(dave)(); // John
+
+var sayNameFromWindow1 = john.sayName1;
+sayNameFromWindow1(); // undefined (because 'this' is now the window object)
+
+var sayNameFromWindow2 = john.sayName2;
+sayNameFromWindow2(); // John
+```
+
+Najważniejsze jest to, że `this` można zmienić dla normalnej funkcji, ale kontekst zawsze pozostaje taki sam dla funkcji strzałkowej. Więc nawet jeśli przekazujesz funkcję strzałkową do różnych części aplikacji, nie musisz się martwić o zmianę kontekstu.
+
+Może to być szczególnie pomocne w komponentach klasy React. Jeśli zdefiniujesz metodę klasy dla czegoś takiego jak moduł obsługi kliknięć za pomocą normalnej funkcji, a następnie przekażesz ten moduł obsługi kliknięć w dół do komponentu podrzędnego jako rekwizytu, musisz również powiązać `this` w konstruktorze komponentu nadrzędnego. Jeśli zamiast tego użyjesz funkcji strzałkowej, nie ma również potrzeby wiązania "this", ponieważ metoda automatycznie uzyska wartość "this" z otaczającego kontekstu leksykalnego. (Zobacz ten artykuł dla doskonałej demonstracji i przykładowego kodu: https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
+- https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb
+
+### Jaka jest definicja funkcji wyższego rzędu?
+
+Funkcja wyższego rzędu to dowolna funkcja, która przyjmuje jedną lub więcej funkcji jako argumenty, których używa do działania na niektórych danych i / lub zwraca w rezultacie funkcję. Funkcje wyższego rzędu mają na celu wyodrębnienie niektórych operacji, które są wykonywane wielokrotnie. Klasycznym przykładem tego jest `map`, który przyjmuje tablicę i funkcję jako argumenty. `map` następnie używa tej funkcji do transformacji każdego elementu w tablicy, zwracając nową tablicę z transformowanymi danymi. Inne popularne przykłady w JavaScript to `forEach`, `filter` i `reduce`. Funkcja wyższego rzędu nie musi tylko manipulować tablicami, ponieważ istnieje wiele przypadków użycia do zwrócenia funkcji z innej funkcji. `Function.prototype.bind` jest jednym z takich przykładów w JavaScript.
+
+**Map**
+
+Powiedzmy, że mamy tablicę nazw, których potrzebujemy do przekształcenia każdego stringa na wielkie litery.
+
+```js
+const names = ['irish', 'daisy', 'anna'];
+```
+
+Imperatywnym sposobem będzie tak:
+
+```js
+const transformNamesToUppercase = function (names) {
+  const results = [];
+  for (let i = 0; i < names.length; i++) {
+    results.push(names[i].toUpperCase());
+  }
+  return results;
+};
+transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
+```
+
+Użycie `.map(transformerFn)`sprawia, że kod jest krótszy i bardziej deklaratywny.
+
+```js
+const transformNamesToUppercase = function (names) {
+  return names.map((name) => name.toUpperCase());
+};
+transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
+```
+
+###### Bibliografia
+
+- https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
+- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
+- https://eloquentjavascript.net/05_higher_order.html
+
+### Czy możesz podać przykład destrukturyzacji obiektu lub tablicy?
+
+Destrukturyzacja to wyrażenie dostępne w ES6, które umożliwia zwięzły i wygodny sposób na wydobycie wartości Obiektów (Objects) lub Tablic (Arrays) i umieszczenie ich w odrębnych zmiennych.
+
+**Destrukturyzacja Array**
+
+```js
+// Variable assignment.
+const foo = ['one', 'two', 'three'];
+
+const [one, two, three] = foo;
+console.log(one); // "one"
+console.log(two); // "two"
+console.log(three); // "three"
+```
+
+```js
+// Swapping variables
+let a = 1;
+let b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+```
+
+**Destrukturyzacja Object**
+
+```js
+// Variable assignment.
+const o = { p: 42, q: true };
+const { p, q } = o;
+
+console.log(p); // 42
+console.log(q); // true
+```
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
+- https://ponyfoo.com/articles/es6-destructuring-in-depth
+
+### ES6 Template Literals oferują dużą elastyczność w generowaniu ciągów, czy możesz podać przykład?
+
+Literały szablonów ułatwiają interpolację stringów lub uwzględnianie zmiennych w stringach. Przed ES2015 było coś takiego:
+
+```js
+var person = { name: 'Tyler', age: 28 };
+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!'
+```
+
+With template literals, you can now create that same output like this instead:
+
+```js
+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!'
+```
+
+Zauważ, że używasz odwrotnych znaków, a nie cudzysłowów, aby wskazać, że używasz literału szablonu i że możesz wstawiać wyrażenia wewnątrz symboli zastępczych `${}`.
+
+Drugim pomocnym przypadkiem użycia jest tworzenie ciągów wieloliniowych. Przed ES2015 można było utworzyć ciąg wielu wierszy, taki jak ten:
+
+```js
+console.log('This is line one.\nThis is line two.');
+// This is line one.
+// This is line two.
+```
+
+Lub jeśli chcesz podzielić go na wiele wierszy w kodzie, abyś nie musiał przewijać w edytorze tekstu w prawo, aby odczytać długi ciąg, możesz również napisać w następujący sposób:
+
+```js
+console.log('This is line one.\n' + 'This is line two.');
+// This is line one.
+// This is line two.
+```
+
+Literały szablonów zachowują jednak wszelkie dodane do nich odstępy. Na przykład, aby utworzyć to samo wyjście wieloliniowe, które stworzyliśmy powyżej, możesz po prostu zrobić:
+
+```js
+console.log(`This is line one.
+This is line two.`);
+// This is line one.
+// This is line two.
+```
+
+Innym przykładem użycia literałów szablonów byłoby użycie jako zamiennika bibliotek szablonów dla prostych interpolacji zmiennych:
+
+```js
+const person = { name: 'Tyler', age: 28 };
+document.body.innerHTML = `
+  <div>
+    <p>Name: ${person.name}</p>
+    <p>Age: ${person.age}</p>
+  </div>
+`;
+```
+
+**Zauważ, że twój kod może być podatny na XSS przy użyciu `.innerHTML`. Wyczyść swoje dane przed wyświetleniem, jeśli pochodzą one od użytkownika!**
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
+
+### Czy możesz podać przykład curry function i dlaczego ta składnia ma tę zaletę?
+
+Currying to wzorzec, w którym funkcja z więcej niż jednym parametrem jest podzielona na wiele funkcji, które po wywołaniu szeregowym będą gromadzić wszystkie wymagane parametry pojedynczo. Ta technika może być użyteczna do ułatwienia czytania i komponowania kodu napisanego w funkcjonalnym stylu. Ważne jest, aby pamiętać, że aby funkcja była curry, musi zacząć od jednej funkcji, a następnie podzielić ją na sekwencję funkcji, z których każda akceptuje jeden parametr.
+
+```js
+function curry(fn) {
+  if (fn.length === 0) {
+    return fn;
+  }
+
+  function _curried(depth, args) {
+    return function (newArgument) {
+      if (depth - 1 === 0) {
+        return fn(...args, newArgument);
+      }
+      return _curried(depth - 1, [...args, newArgument]);
+    };
+  }
+
+  return _curried(fn.length, []);
+}
+
+function add(a, b) {
+  return a + b;
+}
+
+var curriedAdd = curry(add);
+var addFive = curriedAdd(5);
+
+var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
+```
+
+###### Bibliografia
+
+- https://hackernoon.com/currying-in-js-d9ddc64f162e
+
+### Jakie są zalety korzystania ze składni spread syntax i czym różni się od rest syntax?
+
+Spread syntax z ES6 jest bardzo przydatna podczas kodowania w funkcjonalnym paradygmacie, ponieważ możemy łatwo tworzyć kopie tablic lub obiektów bez uciekania się do `Object.create`, `slice` lub funkcji bibliotecznej. Ta funkcja języka jest często używana w projektach Redux i RxJS.
+
+```js
+function putDookieInAnyArray(arr) {
+  return [...arr, 'dookie'];
+}
+
+const result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"]
+
+const person = {
+  name: 'Todd',
+  age: 29,
+};
+
+const copyOfTodd = { ...person };
+```
+
+Rest syntax z ES6 oferuje skrót do włączenia dowolnej liczby argumentów, które należy przekazać do funkcji. To jest jak odwrotność spread syntax, biorąc dane i upychając je do tablicy, zamiast rozpakowywać tablicę danych, i działa w argumentach funkcyjnych, a także w przypisaniach destrukturyzacji tablicy i obiektów.
+
+```js
+function addFiveToABunchOfNumbers(...numbers) {
+  return numbers.map((x) => x + 5);
+}
+
+const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]
+
+const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
+
+const { e, f, ...others } = {
+  e: 1,
+  f: 2,
+  g: 3,
+  h: 4,
+}; // e: 1, f: 2, others: { g: 3, h: 4 }
+```
+
+###### Bibliografia
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
+
+### Jak współdzielić kod między plikami?
+
+To zależy od środowiska JavaScript.
+
+Na kliencie (środowisko przeglądarki), o ile zmienne / funkcje są zadeklarowane w zasięgu globalnym (`window`), wszystkie skrypty mogą się do nich odnosić. Ewentualnie zastosuj Asynchronous Module Definition (AMD) za pośrednictwem RequireJS, aby uzyskać bardziej modułowe podejście.
+
+Na serwerze (Node.js) powszechnym sposobem było użycie CommonJS. Każdy plik jest traktowany jako moduł i może eksportować zmienne i funkcje, dołączając je do obiektu `module.exports`.
+
+ES2015 definiuje składnię modułu, która ma zastąpić zarówno AMD, jak i CommonJS. To będzie ostatecznie obsługiwane zarówno w przeglądarce, jak i w środowisku Node.
+
+###### Bibliografia
+
+- http://requirejs.org/docs/whyamd.html
+- https://nodejs.org/docs/latest/api/modules.html
+- http://2ality.com/2014/09/es6-modules-final.html
+
+### Dlaczego warto tworzyć członków klasy statycznej?
+
+Statyczne elementy klasy (właściwości / metody) nie są powiązane z konkretnym wystąpieniem klasy i mają tę samą wartość niezależnie od tego, do którego wystąpienia się odnosi. Właściwości statyczne są zwykle zmiennymi konfiguracyjnymi, a metody statyczne są zwykle czystymi funkcjami narzędziowymi, które nie zależą od stanu instancji.
+
+###### Bibliografia
+
+- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
+
+### Inne odpowiedzi
+
+- http://flowerszhong.github.io/2013/11/20/javascript-questions.html
+
+---
+
+Stworzone przez [@yangshun](https://github.com/yangshun) polska wersja od [@mbiesiad](https://github.com/mbiesiad)
diff --git a/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/css-questions.md b/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/css-questions.md
new file mode 100644
index 0000000000..d93b7ba69c
--- /dev/null
+++ b/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/css-questions.md
@@ -0,0 +1,123 @@
+---
+title: Perguntas de CSS
+---
+
+Respostas às <a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/css-questions.md" id="top">Perguntas da Entrevista de Trabalho de Front-end - Questões CSS</a>. Pull requests para sugestões e correções são bem-vindos!
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+### <a id="01">O que é a especificidade do seletor CSS e como funciona?</a>
+
+O navegador determina quais estilos mostrar em um elemento, dependendo da especificidade das regras CSS. Presumimos que o navegador já determinou as regras que correspondem a um elemento específico. Entre as regras de correspondência, a especificidade, quatro valores separados por vírgulas, `a, b, c, d` são calculados para cada regra com base no seguinte:
+
+1. `a` é se estilos embutidos estão sendo usados. Se a declaração da propriedade for um estilo embutido no elemento, `a` é 1, caso contrário, 0.
+2. `b` é o número de seletores de ID.
+3. `c` é o número de classes, atributos e seletores de pseudo-classes.
+4. `d` é o número de tags e seletores de pseudo-elementos.
+
+A especificidade resultante não é uma pontuação, mas uma matriz de valores que podem ser comparados coluna por coluna. Ao comparar seletores para determinar qual tem a especificidade mais alta, olhe da esquerda para a direita e compare o valor mais alto em cada coluna. Portanto, um valor na coluna `b` substituirá os valores nas colunas `c e d`, não importa quais sejam. Como tal, a especificidade de `0,1,0,0` seria maior do que `0,0,10,10`.
+
+Nos casos de especificidade igual: a regra mais recente é a que conta. Se você escreveu a mesma regra em sua folha de estilo (independentemente de interna ou externa) duas vezes, então a regra inferior em sua folha de estilo está mais próxima do elemento a ser estilizado, é considerada mais específica e, portanto, será aplicada.
+
+Eu escreveria regras CSS com baixa especificidade para que possam ser facilmente substituídas, se necessário. Ao escrever código de biblioteca de componente de UI CSS, é importante que eles tenham especificidades baixas para que os usuários da biblioteca possam substituí-los sem usar regras CSS muito complicadas apenas para aumentar a especificidade ou recorrer a `!important`.
+
+###### Referências
+
+- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
+- https://www.sitepoint.com/web-foundations/specificity/
+
+### <a id="02">Qual é a diferença entre "redefinir"/"resetting" e "normalizar"/"normalizing" o CSS? Qual você escolheria e porquê?</a>
+
+- <b>Redefinir</b> - Redefinir visa eliminar todos os estilos padrão do navegador nos elementos. Por exemplo: `margins, paddings, font-size` são todos redefinidos. Você terá que redeclarar o estilo dos elementos tipográficos comuns.
+- <b>Normalizar</b> - A normalização preserva estilos padrão úteis em vez de "desestilizar" tudo. Ele também corrige bugs para dependências comuns do navegador.
+
+Eu escolheria redefinir quando tenho um design de site muito personalizado ou não convencional, de modo que preciso fazer muito do meu próprio estilo e não preciso que nenhum estilo padrão seja preservado.
+
+###### Referências
+
+- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
+
+### <a id="03">Descreva `float` e como eles funcionam.</a>
+
+Float é uma propriedade de posicionamento CSS. Os elementos flutuantes permanecem como parte do fluxo da página e afetarão o posicionamento de outros elementos (por exemplo, o texto fluirá em torno dos elementos flutuantes), ao contrário dos elementos `position: absolute`, que são removidos do fluxo da página.
+
+A propriedade CSS `clear` pode ser usada para ser posicionada abaixo de `left`/`right`/`both` elementos flutuantes.
+
+Se um elemento pai não contém nada além de elementos flutuantes, sua altura será reduzida a nada. Pode ser consertado limpando o flutuador após os elementos flutuantes no contêiner, mas antes do fechamento do contêiner.
+
+O hack `.clearfix` usa um pseudo-seletor CSS inteligente (`: after`) para limpar os floats. Em vez de definir o overflow no pai, você aplica uma classe adicional `clearfix` a ele. Em seguida, aplique este CSS:
+
+`.clearfix:after { content: ' '; visibility: hidden; display: block; height: 0; clear: both; }`
+
+Como alternativa, atribua a propriedade `overflow: auto` ou `overflow: hidden` ao elemento pai, que estabelecerá um novo contexto de formatação de bloco dentro dos filhos e se expandirá para conter seus filhos.
+
+###### Referências
+
+- https://css-tricks.com/all-about-floats/
+
+### <a id="04">Descreva o z-index e como o contexto de empilhamento é formado.</a>
+
+A propriedade `z-index` em CSS controla a ordem de empilhamento vertical dos elementos que se sobrepõem. O `z-index` afeta apenas os elementos que possuem um valor `position` que não seja `static`.
+
+Sem nenhum valor de `z-index`, os elementos são empilhados na ordem em que aparecem no DOM (o mais baixo no mesmo nível de hierarquia aparece no topo). Os elementos com posicionamento não estático (e seus filhos) sempre aparecerão no topo dos elementos com posicionamento estático padrão, independentemente da hierarquia HTML.
+
+Um contexto de empilhamento é um elemento que contém um conjunto de camadas. Em um contexto de empilhamento local, os valores de `z-index` de seus filhos são definidos em relação a esse elemento, e não à raiz do documento. Camadas fora desse contexto - ou seja, elementos irmãos de um contexto de empilhamento local - não podem ficar entre as camadas dentro dele. Se um elemento B fica em cima do elemento A, um elemento filho do elemento A, elemento C, nunca pode ser maior do que o elemento B, mesmo se o elemento C tiver um `z-index` maior do que o elemento B.
+
+Cada contexto de empilhamento é autocontido - depois que o conteúdo do elemento é empilhado, todo o elemento é considerado na ordem de empilhamento do contexto de empilhamento pai. Algumas propriedades CSS acionam um novo contexto de empilhamento, como `opacity` menor que 1, `filter` que não é `none` e `transform` que não é `none`.
+
+_Nota: O que exatamente qualifica um elemento para criar um contexto de empilhamento está listado neste longo conjunto de [regras](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#the_stacking_context")._
+
+###### Referências
+
+- https://css-tricks.com/almanac/properties/z/z-index/
+- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
+- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+
+### <a id="05">Descreva o BFC (Block Formatting Context) e como ele funciona.</a>
+
+Um Block Formatting Context (BFC) é parte da renderização CSS visual de uma página da web na qual as caixas de bloco são dispostas. Floats, elementos com position absolute, `inline-block`, `table-cells`, `table-caption` e elementos com `overflow` diferente de `visible` (exceto quando esse valor foi propagado para a janela de visualização) estabelecem novos contextos de formatação de bloco.
+
+Saber como estabelecer um contexto de formatação de bloco é importante, pois, sem isso, a caixa que o contém não conterá [filhos flutuantes](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context#Make_float_content_and_alongside_content_the_same_height). Isso é semelhante ao colapso de margens, mas mais insidioso, pois você encontrará caixas inteiras colapsando de maneiras estranhas.
+
+Um BFC é uma caixa HTML que satisfaz pelo menos uma das seguintes condições:
+
+- O valor de `float` não é `none`.
+- O valor de `position` não é `static` nem `relative`.
+- O valor de `display` é `table-cell`, `table-caption`, `inline-block`, `flex`, ou `inline-flex`.
+- O valor de `overflow` não é `visible`.
+
+Em um BFC, a borda externa esquerda de cada caixa toca a borda esquerda do bloco que o contém (para formatação da direita para a esquerda, as bordas direitas se tocam).
+
+Margens verticais entre caixas de nível de bloco adjacentes em um colapso BFC. Leia mais sobre [redução de margens](https://www.sitepoint.com/collapsing-margins/).
+
+###### Referências
+
+- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
+
+### <a id="06">Quais são as várias técnicas de limpeza e quais são apropriadas para qual contexto?</a>
+
+- `div` vazia, método - `<div style="clear: both;"></div>`.
+- Método Clearfix - Consulte a classe `.clearfix` acima.
+- Método `overflow: auto` ou `overflow: hidden` - O pai estabelecerá um novo contexto de formatação de bloco e se expandirá para conter seus filhos flutuados.
+
+Em grandes projetos, eu escreveria uma classe utilitária `.clearfix` e a usaria nos lugares onde preciso. `overflow: hidden` pode cortar os filhos se os filhos forem mais altos do que os pais e não for muito ideal.
+
+### <a id="07">Explique os sprites CSS e como você os implementaria em uma página ou site.</a>
+
+Sprites CSS combinam várias imagens em uma única imagem maior. É uma técnica comumente usada para ícones (o Gmail usa). Como implementar:
+
+[1]Use um gerador de sprite que reúna várias imagens em uma e gere o CSS apropriado para isso. [2]Cada imagem teria uma classe CSS correspondente com propriedades de `background-image`, `background-position` e `background-size` definidas. [3]Para usar essa imagem, adicione a classe correspondente ao seu elemento.
+
+<b>Vantagens:</b>
+
+- Reduza o número de solicitações HTTP para várias imagens (apenas uma única solicitação é necessária por planilha). Mas com HTTP2, carregar várias imagens não é mais um problema.
+- Download avançado de ativos que não serão baixados até que sejam necessários, como imagens que só aparecem em: pseudo-estados de `:hover`. Piscando não seria visto.
+
+###### Referências
+
+- https://css-tricks.com/css-sprites/
+
+Vamos traduzir esse conteúdo juntos para toda comunidade. Agradecemos a sua ajuda na tradução!
diff --git a/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/html-questions.md b/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/html-questions.md
new file mode 100644
index 0000000000..4f0134e737
--- /dev/null
+++ b/website/i18n/pt-BR/docusaurus-plugin-content-docs/current/html-questions.md
@@ -0,0 +1,179 @@
+---
+title: Perguntas sobre HTML
+---
+
+Respostas a [Front-end Job Interview Questions - HTML Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/Índice.md). Pedidos de sugestões e correções são bem-vindos!
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+**DOCTYPE** é uma abreviatura para **Tipo de documento** (Document Type). Um DOCTYPE sempre está associado a um **DTD** - Document Type Definition (Definição do Tipo de Documento).
+
+O DTD define como estruturar documentos de um certo tipo (por exemplo, um `<button>` pode conter um `<span>` mas não um `<div>`), enquanto o DOCTYPE declara qual DTD o documento _supostamente_ respeita (por exemplo, este documento respeita o DTD de HTML).
+
+Uma declaração de DOCTYPE é necessária para os websites. A declaração é utilizada para indicar aos agentes-usuários qual versão das especificações HTML o documento respeita. Assim que o agente-usuário reconheça o DOCTYPE correto, será ativado o **modo padrão** (_no-quirks mode_) que coincide com esse DOCTYPE para ler o documento. Caso o agente-usuário não reconheça um DOCTYPE correto, será ativado o **modo peculiar** (_quirks mode_).
+
+A declaração DOCTYPE para os _standards_ de HTML5 é `<!DOCTYPE html>`.
+
+Moral da história - apenas adiciona `<!DOCTYPE html>` no início da sua página.
+
+###### Referências
+
+- https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
+- https://www.w3.org/QA/Tips/Doctype
+- https://quirks.spec.whatwg.org/#history
+
+### Como podemos servir uma página com conteúdo em vários idiomas?
+
+A questão é um pouco vaga. Vou supor que quer saber sobre o caso mais comum: servir uma página com conteúdo disponível em vários idiomas, mas o conteúdo dentro da página deve ser exibido somente em um idioma coerente.
+
+Quando uma requisição (_request_) HTTP é feita para um servidor, o agente-usuário que faz a requisição geralmente envia informações sobre as preferências de idioma, como no cabeçalho `Accept-Language`. O servidor pode usar essas informações para retornar uma versão do documento no idioma apropriado, caso tal alternativa esteja disponível. O documento HTML retornado também deve declarar o atributo `lang` na tag `<html>`, como por exemplo `<html lang="en">...</html>`.
+
+Obviamente, isso não permite a um mecanismo de busca saiba que o conteúdo está disponível em idiomas diferentes, e por isso devemos também usar o atributo `hreflang` na `<head>`. Por exemplo, <link rel="alternate" hreflang="de" href="http://de.example.com/page.html"/>.
+
+No back end, o HTML irá conter marcadores de posição (_placeholders_) `i18n` e conteúdo para o idioma específico, armazenado em formato YML ou JSON. O servidor, em seguida, gera dinamicamente a página HTML com conteúdo nesse idioma específico, geralmente com a ajuda de uma estrutura de back end.
+
+###### Referências
+
+- https://www.w3.org/International/getting-started/language
+
+### O que deve ser levado em conta ao projetar ou desenvolver sites multilíngues?
+
+- Usar o atributo `lang` no HTML.
+- Direcionar os usuários ao seu idioma nativo - Permitir que um usuário mude seu país/idioma sem problemas.
+- Texto em imagens rasterizadas (por exemplo, png, gif, jpg) não é uma abordagem escalável - colocar texto numa imagem ainda é uma maneira popular de exibir fontes bonitas e que não são do sistema em qualquer computador. No entanto, para traduzir o texto da imagem, cada sequência de texto precisará de uma imagem separada para cada idioma. Qualquer coisa além de algumas substituições como essa podem rapidamente sair do controle.
+- Restrições no comprimento de palavras restritas/frases - Alguns conteúdos podem ser mais longos quando escritos num outro idioma. É preciso ter cuidado com problemas de layout ou overflow no design. É melhor evitar situações em que a quantidade de texto possa quebrar o layout. A contagem de caracteres é importante para coisas como manchetes, legendas e botões. É um problema menor com texto livre, como o corpo do texto ou comentários.
+- Levar em consideração a percepção das cores - As cores são percebidas de maneira diferente dependendo do idioma e a cultura. O design deve usar a cor adequadamente.
+- Formatar datas e moedas - As datas do calendário são por vezes apresentadas de maneiras diferentes. Por exemplo, "May 31, 2012" nos EUA e "31 de maio de 2012" em partes da Europa.
+- Não concatenar strings traduzidas - Não fazer coisas como `"A data hoje é" + data`. Isso não vai funcionar para idiomas com diferentes ordem de palavras. É melhor usar um template que permita a substituição de parâmetros para cada idioma. Por exemplo, considere as frases seguintes em inglês e chinês, respectivamente: `I will travel on {% date %}` e `{% date %} 我会出发`. Observe que a posição da variável é diferente devido às regras da gramática do idioma.
+- Direção da leitura do idioma - Em inglês, lemos da esquerda para a direita, de cima para baixo; em japonês tradicional, o texto é lido de cima para baixo, da direita para a esquerda.
+- Útil - incluir o local na especificação (p.ex., en_US, zh_CN, etc.).
+
+###### Referências
+
+- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
+
+### Para que servem os atributos `data-`?
+
+Antes que os frameworks JavaScript se tornassem populares, os programadores front-end usavam atributos `data-` para armazenar dados extras dentro do próprio DOM, sem usar outros hacks como atributos fora do padrão, propriedades extras no DOM. Os atributos `data-` servem para armazenar dados personalizados privados de uma página ou aplicativo, para os quais não há mais atributos ou elementos apropriados.
+
+Atualmente, o uso dos atributos `data-` não é recomendado. Um dos motivos é que os usuários podem modificar o atributo de dados facilmente mediante a inspeção de elementos no navegador. O modelo de dados é melhor armazenado dentro do próprio JavaScript e se mantém atualizado com o DOM pela ligação de dados possivelmente com o uso de uma biblioteca ou framework.
+
+No entanto, um uso perfeitamente válido dos atributos `-data` é adicionar um gancho para frameworks de teste como Selenium e Cabybara, sem a necessidade de criar classes sem sentido ou atributos ID. É necessário que o elemento possa ser encontrado por uma especificação particular de Selenium e algo como `data-selector='a-coisa` é uma solução válida que não irá confundir o markup semântico.
+
+###### Referências
+
+- http://html5doctor.com/html5-custom-data-attributes/
+- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
+
+### Considere o HTML5 como uma plataforma aberta. Quais são os blocos de construção do HTML5?
+
+- Semântica - Permite descrever o conteúdo mais precisamente.
+- Conectividade - Permite a comunicação com o servidor de formas novas e inovadoras.
+- Offline e armazenamento - Permite que os websites armazenem dados localmente no lado do cliente e funcionem offline de forma mais eficiente.
+- Multimédia - Faz com que vídeo e áudio sejam cidadãos de primeira classe na Open Web.
+- Gráficos e efeitos 2D/3D - Permite uma gama muito mais diversificada de opções de apresentação.
+- Desempenho e integração - Possibilita uma maior optimização da velocidade e melhor uso do hardware do computador.
+- Acesso ao dispositivo - Permite o uso de vários dispositivos de entrada e saída.
+- Estilo - Permite que autores escrevam temas mais sofisticados.
+
+###### Referências
+
+- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
+
+### Descreva a diferença entre `cookie`,`sessionStorage` e `localStorage`.
+
+Todas as tecnologias mencionadas são mecanismos de armazenamento de valor-chave do lado do cliente. Elas só podem armazenar valores como strings.
+
+|  | `cookie` | `localStorage` | `sessionStorage` |
+| --- | --- | --- | --- |
+| Iniciador | Cliente ou servidor. O servidor pode usar o cabeçalho `Set-Cookie` | Cliente | Cliente |
+| Validade | Definida manualmente | Para sempre | Ao fechar a aba |
+| Persiste em todas sessões do navegador | Depende de se o tempo de validade está configurado | Sim | Não |
+| Enviado para servidor a cada solicitação HTTP | Os cookies são automaticamente enviados através do cabeçalho `Cookie` | Não | Não |
+| Capacidade (por domínio) | 4kb | 5MB | 5MB |
+| Acessibilidade | Qualquer janela | Qualquer janela | A mesma aba |
+
+_Nota: Se o usuário decide apagar os dados de navegação através de qualquer mecanismo disponibilizado pelo navegador, isso irá apagar qualquer `cookie`,` localStorage` ou `sessionStorage` armazenada. É importante ter isso em mente ao projetar para persistência local, especialmente quando se compara com alternativas como o armazenamento do lado do servidor em uma base de dados ou algo semelhante (que obviamente irá persistir independentemente das ações do usuário) ._
+
+###### Referências
+
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
+- http://tutorial.techaltum.com/local-and-session-storage.html
+
+### Descreva a diferença entre `<script>`, `<script async>` e `<script defer>`.
+
+- `<script>` - A análise do HTML é bloqueada, o script é obtido e executado imediatamente, a análise do HTML é retomada após o script ser executado.
+- `<script async>` - O script será obtido em paralelo com a análise do HTML e executado assim que estiver disponível (possivelmente antes da análise do HTML ter sido finalizada). Use `async` quando o script for independente de qualquer outro script na página, por exemplo, scripts de analítica.
+
+* `<script defer>` - O script será obtido em paralelo com a análise do HTML e executado quando a página terminar de analisar. Se houver vários scripts, cada script diferido será executado na ordem em que se encontra no documento. Se um script estiver baseado na análise completa do DOM, o atributo `defer` será útil para garantir que o HTML seja totalmente analisado antes de executar o script. Não é muito diferente de colocar um `<script>` normal no final de `<body>`. Um script diferido não deve conter `document.write`.
+
+Nota: Os atributos `async` e` defer` são ignorados para scripts que não tenham o atributo `src`.
+
+###### Referências
+
+- http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
+- https://stackoverflow.com/questions/10808109/script-tag-async-defer
+- https://bitsofco.de/async-vs-defer/
+
+### Por que geralmente é uma boa ideia posicionar os `<link>`s para CSS entre `<head></head>` e os `<script>`s de JS antes de `</body>`? Existe alguma exceção?
+
+**Colocar `<link>`s no `<head>`**
+
+Colocar `<link>`s no `<head>` faz parte da especificação adequada para construir um website otimizado. Quando a página é carregada pela primeira vez, o HTML e CSS são analisados simultaneamente; o HTML cria o DOM (Document Object Model) e o CSS cria o CSSOM (CSS Object Model). Ambos são necessários para criar a parte visual de um website, permitindo uma sincronização rápida da "primeira pintura significativa". Essa renderização progressiva é uma categoria de otimização mensurada em análises de desempenho. Colocar as folhas de estilo perto da parte inferior do documento impede a renderização progressiva em muitos navegadores. Alguns navegadores bloqueiam a renderização para evitar ter que pintar elementos da página novamente caso os seus estilos mudem. O utilizador terá que ver uma página em branco. Em outras situações pode haver flashes de conteúdo não estilizado (FOUC), mostrando uma página sem nenhum estilo aplicado.
+
+**Colocar `<script>`s pouco antes de `</body>`**
+
+A tag `<script>`s bloqueia a análise do HTML enquanto os scripts estão sendo descarregados e executados, o que pode tornar a página lenta. Colocar os scripts na parte inferior permite que o HTML seja analisado e mostrado por primeiro ao utilizador.
+
+Uma exceção para o posicionamento de `<script>`s na parte inferior é quando o script contém `document.write()`, mas nos dias de hoje não é uma boa prática usar `document.write()`. Além disso, colocar `<script>`s na parte inferior significa que o navegador não pode começar a descarregar os scripts até que o documento inteiro seja analisado. Isso garante que o código que precise manipular elementos do DOM não apresente erros e detenha todo o script. Se for necessário colocar `<script>`s na `<head>`, utilize o atributo `defer`, o que vai ter o mesmo efeito de executar o script apenas depois do HTML ser analisado, mas permite ao navegador baixar o script antes.
+
+###### Referências
+
+- https://developer.yahoo.com/performance/rules.html#css_top
+
+### O que é renderização progressiva?
+
+A renderização progressiva é o nome dado às técnicas utilizadas para melhorar o desempenho de uma página web (em particular, melhorar a percepção do usuário sobre o tempo de carregamento) de forma a renderizar o conteúdo para exibição o mais rápido possível.
+
+Costumava ser muito mais prevalente antes da internet de banda larga, mas ainda é utilizada no desenvolvimento moderno, pois as conexões de dados móveis estão a tornar-se cada vez mais populares (e não confiáveis)!
+
+Exemplos de tais técnicas:
+
+- O carregamento preguiçoso de imagens - As imagens da página não são carregadas de uma só vez. O JavaScript será usado para carregar uma imagem quando o utilizador encontrar a parte da página que mostra a imagem.
+- Priorizar o conteúdo visível (ou a renderização acima da dobra) - Incluir apenas o CSS/conteúdo/scripts mínimos necessários para que a página apresentada no navegador do utilizador seja exibida o mais rápido possível, pode-se então usar scripts diferidos ou escutar o evento `DOMContentLoaded`/`load` para carregar os outros recursos e conteúdo.
+- Fragmentos HTML assíncronos - Enviar partes do HTML ao navegador à medida em que a página é construída no back-end. Mais detalhes sobre a técnica podem ser encontrados [aqui](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
+
+###### Referências
+
+- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
+- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
+
+### Por que usar um atributo `srcset` numa tag de imagem? Explique o processo que o navegador usa ao avaliar o conteúdo desse atributo.
+
+Tu usarias o atributo `srcset` quando quiseres exibir imagens diferentes para os utilizadores, dependendo da largura do ecrã (tela) do dispositivo - mostrar imagens de qualidade superior para dispositivos com display de retina melhora a experiência do utilizador, enquanto fornecer imagens de baixa resolução para dispositivos de baixo custo melhora o desempenho e diminui o desperdício de dados (porque mostrar uma imagem maior não terá nenhuma diferença visível). Por exemplo: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` diz ao navegador para mostrar o `.jpg` pequeno, médio ou grande dependendo da resolução do cliente. O primeiro valor é o nome da imagem e o segundo é a largura da imagem em pixels. Para um dispositivo com 320px de largura, são feitos os seguintes cálculos:
+
+- 500 / 320 = 1.5625
+- 1000 / 320 = 3.125
+- 2000 / 320 = 6.25
+
+Se a resolução do cliente for 1x, 1.5625 é a mais próxima, e o navegador irá selecionar `500w` que corresponde a `small.jpg`.
+
+Se a resolução for retina (2x), o navegador usará a resolução mais próxima acima do mínimo. O que significa que não escolherá o 500w (1.5625) porque é maior que 1 e a imagem pode parecer de má qualidade. O navegador escolheria então a imagem com uma razão resultante mais próxima de 2, que é 1000w (3.125).
+
+O `srcset` resolve o problema de querer servir arquivos de imagem menores para dispositivos com ecrã estreita, já que não precisam de imagens enormes como monitores de desktop - e também opcionalmente permite servir imagens de resolução diferentes para ecrãs de alta densidade/baixa densidade.
+
+###### Referências
+
+- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
+- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
+
+### Já usou diferentes linguagens de modelos de HTML antes?
+
+Sim, Pug (anteriormente Jade), ERB, Slim, Handlebars, Jinja, Liquid, para citar alguns. Na minha opinião, eles são mais ou menos o mesmo e oferecem funcionalidades semelhantes de escape de conteúdo e filtros úteis para manipular os dados a serem exibidos. A maioria motores de template também permitirá que injetes teus próprios filtros no caso de precisares de processamento personalizado antes da exibição.
+
+### Outras respostas
+
+- https://neal.codes/blog/front-end-interview-questions-html/
+- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
diff --git a/website/i18n/ru/docusaurus-plugin-content-docs/current/html-questions.md b/website/i18n/ru/docusaurus-plugin-content-docs/current/html-questions.md
new file mode 100644
index 0000000000..eef80f4d90
--- /dev/null
+++ b/website/i18n/ru/docusaurus-plugin-content-docs/current/html-questions.md
@@ -0,0 +1,173 @@
+---
+title: Вопросы по HTML
+---
+
+Ответы на [Вопросы кандидату на должность фронтенд-разработчика - Вопросы по HTML](https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/src/contents/ru#html).
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+### Для чего нужен DOCTYPE?
+
+**DOCTYPE** — это сокращение от **DOCument TYPE** (тип документа). DOCTYPE всегда связан с **DTD** — **Document Type Definition** (определение типа документа).
+
+DTD определяет как должны быть структурированы документы определенного типа (т.е. тег `button` может содержать в себе тег `span`, но не `div`), в то время как DOCTYPE объявляет, к какому DTD _предположительно_ относится документ.
+
+Для веб-страниц объявление DOCTYPE необходимо. Он используется для того, чтобы сообщить пользовательскому агенту, к какой версии спецификаций HTML принадлежит ваш документ. Как только пользовательский агент распознал правильный DOCTYPE, он запустит режим **no-quirks**, соответствующий этому DOCTYPE, для чтения документа. Если пользовательский агент не распознает правильный DOCTYPE, он активирует режим **quirks**.
+
+DOCTYPE для стандарта HTML5 определяется как `<!DOCTYPE html>`.
+
+###### Ссылки
+
+- https://html.spec.whatwg.org/multipage/syntax.html#the-doctype
+- https://html.spec.whatwg.org/multipage/xhtml.html
+- https://quirks.spec.whatwg.org/
+
+### Как следует оформлять страницу, содержимое которой может быть на разных языках?
+
+Вопрос немного расплывчатый. Полагаю, что речь о наиболее частом случае: как показывать страницу, где содержимое доступно на нескольких языках, но отображается на одном определенном.
+
+Когда к серверу делается HTTP-запрос, то браузер пользователя обычно отсылает информацию о предпочитаемом языке в заголовке `Accept-Language`. Сервер может использовать эту информацию, чтобы вернуть версию документа на подходящем языке, если такая возможность есть. В возвращённом HTML-документе обязательно должен быть указан атрибут `lang` у тега `<html>`, к примеру `<html lang="en">...</html>`.
+
+На бэкенде HTML-разметка будет содержать плейсхолдер i18n, а контент для конкретного языка будет храниться в YAML- или JSON-формате. Сервер динамически формирует HTML-страницу с контентом на конкретном языке, чаще всего при помощи бэкенд-фреймворка.
+
+###### Ссылки
+
+- https://www.w3.org/International/getting-started/language
+
+### На что необходимо обратить внимание при разработке мультиязычных сайтов?
+
+- Используйте атрибут `lang` в HTML.
+- Перенаправляйте пользователей на версию сайта на их языке. Позволяйте быстро и без проблем изменить страну и язык.
+- Текст на картинках плохо поддается адаптации. Многие до сих пор помещают текст на картинки чтобы получить хорошо выглядящий несистемный шрифт на любом компьютере. Однако чтобы перевести текст картинкой, нужно иметь подготовленную картинку с каждой строкой текста для каждого языка. При большом количестве текста это быстро выйдет из-под контроля.
+- Ограничение длины слов и предложений. Некоторый текст может быть длиннее при написании на другом языке. Будьте внимательны к макету и проверяйте поведение блоков при переполнении. Количество символов важно в таких элементах, как заголовки, лейблы и кнопки. Но не так важно в основном тексте или в блоке комментария.
+- Помните о восприятии цветов. В разных языках и культурах цвета имеют разное значение. Дизайн должен учитывать эти особенности.
+- Форматируйте даты и валюты. Календарные даты иногда пишутся по-разному. Например, «Май 31, 2012» в США или «31 мая 2012» в странах Европы.
+- Не склеивайте переведённые строки. Не пишите что-то вроде `"Сегодняшняя дата " + date`. Эта фраза будет выглядеть некорректно на языках с другим порядком слов. Вместо этого используйте шаблонную строку с подстановкой параметров для каждого языка. Например, посмотрите на следующие два предложения на русском и китайском соответственно: `Я буду путешествовать {% date %}` и `{% date %} 我会出发`. Обратите внимание, что положение переменной отличается из-за грамматических правил языка.
+- Разные направления чтения. В русском мы читаем слева направо, сверху вниз. В традиционном японском языке текст читается сверху вниз, справа налево.
+
+###### Ссылки
+
+- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
+
+### Для чего нужны `data-` атрибуты?
+
+До того, как JavaScript-фреймворки стали популярны, фронтенд-разработчики использовали `data-` атрибуты чтобы хранить дополнительные данные прямо в DOM без хаков вроде нестандартных атрибутов или дополнительных свойств в DOM. Атрибуты этого семейства предназначены для хранения частных данных пользователя, для которых не существует более подходящих атрибутов или элементов на странице или в приложении.
+
+На сегодняшний день использование data-атрибутов не поощряется. Одной из причин является то, что пользователь может модифицировать данные в атрибуте, используя инспектор кода в браузере. Данные лучше хранить в самом JavaScript и обновлять DOM при помощи связывания данных через библиотеку или фреймворк.
+
+###### Ссылки
+
+- http://html5doctor.com/html5-custom-data-attributes/
+- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
+
+### Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?
+
+- Семантика. Позволяет более точно описать из чего состоит контент.
+- Связанность. Позволяет общаться с сервером новыми и инновационными способами.
+- Офлайн и хранилище. Позволяют страницам хранить данные локально на клиентской стороне и более эффективно работать в офлайне.
+- Мультимедиа. Ставит создание видео и аудио на первое место в вебе.
+- 2D/3D-графика и эффекты. Позволяет расширить возможности презентации.
+- Производительность и интеграция. Обеспечивает большую скорость оптимизации и лучшее использование аппаратных средств.
+- Доступ к устройствам. Позволяет взаимодействовать с различными устройствами ввода и вывода.
+- Стилизация. Позволяет создавать более сложные темы оформления.
+
+###### Ссылки
+
+- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
+
+### Объясните разницу между `cookie`, `sessionStorage` и `localStorage`.
+
+Все вышеупомянутые технологии являются механизмами хранения типа ключ-значение на клиентской стороне. Они могут хранить данные только как строки.
+
+|  | `cookie` | `localStorage` | `sessionStorage` |
+| --- | --- | --- | --- |
+| Инициатор | Клиент или сервер. Сервер может использовать заголовок `Set-Cookie` | Клиент | Клиент |
+| Срок хранения | Устанавливается вручную | Всегда | До закрытия вкладки |
+| Хранение между сессиями | Зависит от установки срока хранения | Да | Нет |
+| Отправка на сервер с каждым HTTP-запросом | автоматически, с помощью заголовка `Cookie` | Нет | Нет |
+| Емкость (на один домен) | 4 КБ | 5 МБ | 5 МБ |
+| Доступность | В любом окне | В любом окне | В той же вкладке |
+
+###### Ссылки
+
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
+- http://tutorial.techaltum.com/local-and-session-storage.html
+
+### Объясните разницу между `<script>`, `<script async>` и `<script defer>`.
+
+- `<script>` - отрисовка HTML блокируется, скрипт извлекается и выполняется немедленно, отрисовка HTML возобновляется после окончания выполнения скрипта.
+- `<script async>` - скрипт будет получен и обработан параллельно с отрисовкой HTML, его выполнение закончится как только это будет возможно (обычно до того, как закончилась отрисовка HTML). Используйте `async` тогда, когда скрипт не зависит от других скриптов на странице, например для аналитики.
+- `<script defer>` - скрипт будет получен параллельно с отрисовкой HTML, его выполнение произойдет после того, как вся страница будет загружена. Если таких скриптов несколько, то каждый из них будет исполнятся в том порядке, в котором они расположены в документе. Если скрипту нужен полностью распарсеный DOM, то атрибут `defer` обеспечит уверенность в том, что на момент отработки скрипта весь HTML отрисован. Нет особой разницы со скриптами, расположенными перед тегом `<body>`. Отложенный скрипт не должен содержать `document.write`.
+
+Примечание: Атрибуты `async` и `defer` игнорируются, если у тега `<script>` нет атрибута `src`.
+
+###### Ссылки
+
+- http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
+- https://stackoverflow.com/questions/10808109/script-tag-async-defer
+- https://bitsofco.de/async-vs-defer/
+
+### Почему хорошей практикой считается располагать `<link>` для подключения CSS между `<head></head>`, а `<script>` для подключения JS ставить перед `</body>`? Знаете ли вы исключения?
+
+**Размещение `<link>` внутри `<head>`**
+
+Размещение `<link>` внутри тега `<head>` необходимо при создании оптимизированного веб-сайта. Когда страница загружается впервые, HTML и CSS анализируются одновременно; HTML создает DOM (объектную модель документа), а CSS создает CSSOM (объектную модель CSS). И то, и другое необходимо для создания визуальных элементов на веб-сайте, что позволяет быстро определить время «первого значимого рисования». Этот прогрессивный рендеринг является категорией оптимизации сайтов, которые измеряются в их показателях эффективности. Размещение таблиц стилей в нижней части документа - это то, что препятствует прогрессивной загрузке страницы во многих браузерах. Некоторые браузеры блокируют рендеринг, чтобы избежать перерисовки элементов страницы, если ее стили изменятся. Все это время пользователь будет пялиться на пустую белую страницу. В других случаях может возникать мерцание нестилизованного содержимого (FOUC), на котором может отображаться веб-страница без применения стилей.
+
+**Размещение `<script>` прямо перед `</body>`**
+
+Теги `<script>` блокируют отрисовку HTML на то время, пока они скачиваются и исполняются. Размещение скриптов внизу позволяет сперва распарсить и показать пользователю весь HTML.
+
+Исключением является случай, когда в вашем скрипте содержится `document.write()`. Но на сегодняшний день его использование не считается хорошей практикой. К тому же, расположение скриптов внизу разметки означает, что браузер не может начать их скачивать до тех пор, пока не отрисован весь документ. Единственным рабочим способом, при котором `<script>` будет расположен внутри `<head>`, является добавление атрибута defer.
+
+###### Ссылки
+
+- https://developer.yahoo.com/performance/rules.html#css_top
+- https://www.techrepublic.com/blog/web-designer/how-to-prevent-flash-of-unstyled-content-on-your-websites/
+- https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
+
+### Что такое прогрессивный рендеринг
+
+Прогрессивный рендеринг — это название технологий, используемых для ускорения отрисовки страниц (в частности, для уменьшения времени загрузки), чтобы показать пользователю контент как можно скорее.
+
+До того, как широкополосный интернет распространился повсеместно, прогрессивный рендеринг встречался довольно часто. Но этот подход по прежнему полезен в современной разработке, поскольку все более популярным (и ненадежным) становится мобильный доступ в интернет.
+
+Примеры подобных технологий:
+
+- Ленивая загрузка изображений. Изображения на странице не загружаются все разом. JavaScript подгрузит изображения тогда, когда пользователь доскроллит до той части страницы, на которой они расположены.
+- Приоритизация видимого контента. Только минимум CSS, контента, скриптов, необходимых для отрисовки той части страницы, которую пользователь увидит первой. Вы можете использовать отложенные скрипты или слушать события `DOMContentLoaded` или `load`, чтобы загрузить остальные ресурсы и контент.
+- Асинхронные фрагменты HTML. Отправка в браузер частей HTML-страницы, созданной на бэкенде. Более подробно про эту технологию можно почитать [в этой статье](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
+
+###### Ссылки
+
+- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
+- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
+
+### Для чего используется атрибут `srcset` в теге изображения? Опишите процесс, который браузер использует при обработке содержимого этого атрибута.
+
+Вы должны использовать атрибут `srcset`, когда хотите показывать пользователям разные изображения в зависимости от их ширины дисплея их устройств - предоставление изображений более высокого качества устройствам с retina-дисплеями улучшает работу пользователя, в то время как предоставление изображений с низким разрешением на устройства с низким разрешением повышает производительность и уменьшает объём передаваемых данных (поскольку нет видимой разницы с большими изображениями). Например: `<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">` указывает браузеру отображать малое, среднее или большое изображение в зависимости от разрешения дисплея пользователя. Первое значение - это имя изображения, а второе - ширина изображения в пикселях. Для ширины устройства 320px выполняются следующие расчеты:
+
+- 500 / 320 = 1.5625
+- 1000 / 320 = 3.125
+- 2000 / 320 = 6.25
+
+Если у клиента стандартное разрешение 1x, то 1.5625 является ближайшим коэффициентом, и `500w` соответствующее `small.jpg` будет отображено в браузере.
+
+Если же разрешение retina (2x), браузер будет использовать ближайшее разрешение выше минимального. Это означает, что он не выберет 500w (1.5625), потому что оно больше 1 и изображение может выглядеть плохо. Браузер затем выберет изображение с результирующим соотношением ближе к 2, то есть 1000w (3.125).
+
+`srcset` решает проблему, когда вы хотите показывать файлы изображений меньшего размера для устройств с узким экраном, поскольку они не нуждаются в больших изображениях, как на настольных дисплеях, - а также, при желании, вы можете показывать изображения с различным разрешением для экранов с высокой/низкой плотностью пикселей.
+
+###### Ссылки
+
+- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
+- https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
+
+### Приходилось ли вам работать с языками HTML-шаблонизации?
+
+Да, Pug (ранее известный как Jade), ERB, Slim, Handlebars, Jinja, Liquid и это только некоторые из них. По моему мнению, все они более или менее одинаковые и предоставляют одинаковые возможности экранирования контента и полезных фильтров для работы с отображаемыми данными. Большинство шаблонизаторов позволяют вводить собственные фильтры, если вам необходима дополнительная обработка контента перед его отображением.
+
+### Другие ответы
+
+- https://neal.codes/blog/front-end-interview-questions-html/
+- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
diff --git a/website/i18n/ru/docusaurus-plugin-content-docs/current/javascript-questions.md b/website/i18n/ru/docusaurus-plugin-content-docs/current/javascript-questions.md
new file mode 100644
index 0000000000..bf530c5e15
--- /dev/null
+++ b/website/i18n/ru/docusaurus-plugin-content-docs/current/javascript-questions.md
@@ -0,0 +1,1218 @@
+---
+title: Вопросы по JavaScript
+---
+
+Ответы на [Вопросы кандидату на должность фронтенд-разработчика - Вопросы по Javascript](https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/src/contents/ru#js).
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
+
+### Объясните делегирование событий
+
+Делегирование событий - это приём, заключающийся в добавлении обработчиков событий к родительскому элементу, а не к дочерним элементам. Обработчик будет срабатывать всякий раз, когда событие будет запущено на дочерних элементах благодаря всплытию событий в DOM. Преимущества этого приёма:
+
+- Экономит объем используемой памяти, т.к. для родительского элемента требуется только один обработчик.
+- Не нужно привязывать или убирать обработчики при добавлении и удалении элементов.
+
+###### Ссылки
+
+- https://davidwalsh.name/event-delegate
+- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
+
+### Объясните, как `this` работает в JavaScript
+
+Нельзя в двух словах объяснить работу ключевого слова `this`; это одно из самых запутанных понятий в JavaScript. Говоря максимально простым языком, значение `this` зависит от того, как вызывается функция. Я прочитал много объяснений о работе `this`, и считаю объяснение [Arnav Aggrawal](https://medium.com/@arnav_aggarwal) наиболее понятным. Применяются следующие правила:
+
+1. Если ключевое слово `new` используется при вызове функции, `this` внутри функции является совершенно новым объектом.
+2. Если для вызова/создания функции используются `apply`, `call` или `bind`, то `this` внутри функции - это объект, который передается в качестве аргумента.
+3. Если функция вызывается как метод, например, `obj.method()`, то `this` - это объект, к которому принадлежит функция.
+4. Если функция вызывается без контекста, то есть она вызывается без условий, описанных в пунктах выше, то `this` является глобальным объектом. В браузере это объект `window`. В строгом режиме (`'use strict'`), `this` будет `undefined` вместо глобального объекта.
+5. Если применяются несколько из вышеперечисленных правил, то правило, которое выше выигрывает и устанавливает значение `this`.
+6. Если функция является стрелочной функцией, то она игнорирует все вышеописанные правила и получает значение `this` из лексического окружения во время ее создания.
+
+Чтобы получить более подробное объяснение, ознакомьтесь с его [статьей на Medium](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3).
+
+###### Ссылки
+
+- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
+- https://stackoverflow.com/a/3127440/1751946
+
+### Расскажите, как работает прототипное наследование
+
+Этот вопрос очень часто задают на собеседованиях. Все объекты в JavaScript имеют свойство `__proto__`, которое является ссылкой на другой объект. Когда происходит обращение к свойству объекта, и если свойство не найдено в этом объекте, то механизм JavaScript просматривает прототип объекта, затем прототип прототипа и т.д. До тех пор, пока не найдет определенное свойство на одном из прототипов или до тех пор, пока он не достигнет конца цепочки прототипов. Такое поведение имитирует классическое наследование, но на самом деле это скорее [делегирование, чем наследование](https://davidwalsh.name/javascript-objects).
+
+###### Ссылки
+
+- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
+- https://davidwalsh.name/javascript-objects
+
+### Что вы думаете о AMD против CommonJS?
+
+Оба являются способами реализации системы модулей, которая изначально не присутствовала в JavaScript до появления ES2015. CommonJS является синхронным, в то время как AMD (Asynchronous Module Definition, асинхронное определение модуля) - соответственно, асинхронным. CommonJS разработан с учетом разработки на стороне сервера, в то время как AMD с поддержкой асинхронной загрузки модулей больше предназначена для браузеров.
+
+Я считаю синтаксис AMD довольно многословным, а CommonJS ближе к стилю, который используется в выражениях импорта в других языках. В большинстве случаев я считаю AMD ненужным, потому что если вы разместите весь свой код в одном объединенном файле, то вы не сможете воспользоваться свойствами асинхронной загрузки. Кроме того, синтаксис CommonJS ближе к стилю написания модулей Node, и поэтому происходит меньше путаницы при переключении между клиентской и серверной разработкой на JavaScript.
+
+Я рад, что с появлением модулей ES2015, которые поддерживают как синхронную, так и асинхронную загрузку, мы, наконец, можем придерживаться одного подхода. Несмотря на то, что они не полностью поддерживаются во всех браузерах и Node, мы можем использовать транспайлеры для преобразования нашего кода.
+
+###### Ссылки
+
+- https://auth0.com/blog/javascript-module-systems-showdown/
+- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
+
+### Объясните, почему это не является IIFE: `function foo(){ }();`. Что необходимо изменить, чтобы это стало IIFE??
+
+IIFE расшифровывается как Immediately Invoked Function Expression - немедленно вызываемое функциональное выражение. Синтаксический анализатор JavaScript читает `function foo(){ } ();` как `function foo(){ }` и `();`, где первое выражение - это _объявление функции_, а второе (пара скобок) - попытка вызова функции, но так как имя не указано, он выдает ошибку `Uncaught SyntaxError: Unexpected token`.
+
+Вот два способа исправить это, которые заключаются добавление дополнительных скобок: `(function foo(){ })()` и `(function foo(){ }())`. Выражения, начинающиеся с `function`, считаются _объявлениями функций_. Оборачивая эту функцию внутри `()`, она становится _функциональным выражением_, которое затем может быть выполнено с последующим `()`. Подобные функции не отображаются в глобальной области видимости, и вы можете даже не указывать им имя, если вы не будете на них ссылаться.
+
+Вы также можете использовать оператор `void` - `void function foo(){ }()`. К сожалению, с таким подходом есть одна проблема. Выполнение данного выражения всегда возвращает `undefined`, поэтому, если ваше IIFE возвращает что-либо, вы не можете его использовать. Пример:
+
+```js
+const foo = void (function bar() {
+  return 'foo';
+})();
+
+console.log(foo); // undefined
+```
+
+###### Ссылки
+
+- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
+
+### В чем различие между переменными, значение которых: `null`, `undefined` и не объявлено? Как бы вы проверили их на каждое из этих значений?
+
+**Необъявленные** переменные создаются, когда вы присваиваете значение идентификатору, который не был ранее создан при помощи `var`,`let` или `const`. Необъявленные переменные будут определены глобально, вне текущей области видимости. В строгом режиме, будет ошибка `ReferenceError`, когда вы попытаетесь назначить значение необъявленной переменной. Необъявленные переменные плохи так же, как и глобальные переменные. Избегайте их любой ценой! Чтобы проверить на их наличие, оберните код в блок `try`/`catch`.
+
+```js
+function foo() {
+  x = 1; // ReferenceError в строгом режиме
+}
+
+foo();
+console.log(x); // 1
+```
+
+Переменная `undefined` - это переменная, которая была объявлена, но ей не было присвоено значение. Ее тип `undefined`. Если переменной присвоить функцию, которая не возвращает никакого значения, то переменная также будет иметь значение `undefined`. Чтобы проверить это, сравните, используя оператор строгого равенства (`===`) или `typeof`, который вернет строку `'undefined'`. Обратите внимание, что вам не следует использовать оператор абстрактного сравнения для проверки, так как он также вернет `true`, если значение равно `null`.
+
+```js
+var foo;
+console.log(foo); // undefined
+console.log(foo === undefined); // true
+console.log(typeof foo === 'undefined'); // true
+
+console.log(foo == null); // true. Неправильно, не используйте это для проверки!
+
+function bar() {}
+var baz = bar();
+console.log(baz); // undefined
+```
+
+Переменной со значением `null` было явно присвоено значение `null`. Она отличается от `undefined` тем, что она была назначена явно. Чтобы проверить на `null`, просто сравните, используя оператор строгого равенства. Обратите внимание, что, как и выше, вы не должны использовать оператор абстрактного равенства (`==`) для проверки, так как он также вернет `true`, если значение равно `undefined`.
+
+```js
+var foo = null;
+console.log(foo === null); // true
+console.log(typeof foo === 'object'); // true
+
+console.log(foo == undefined); // true. Неправильно, не используйте это для проверки!
+```
+
+Личная привычка - я никогда не оставляю свои переменные необъявленными или неприсвоенными. Я явно назначаю им `null` после объявления, если я не собираюсь их пока использовать. Если вы используете линтер в своем рабочем процессе, он обычно также проверяет, что вы не ссылаетесь на необъявленные переменные.
+
+###### Ссылки
+
+- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
+
+### Что такое замыкание и как/для чего его используют?
+
+Замыкание - это комбинация функции и лексического окружения, в которой эта функция была объявлена. Слово "лексический" относится к тому факту, что лексическая область видимости использует место, где переменная объявлена в исходном коде, чтобы определить, где эта переменная доступна. Замыкания - это функции, которые имеют доступ к переменным внешней (замыкающей) функции - цепочке областей видимости даже после того, как внешняя функция вернулась.
+
+**Для чего его используют?**
+
+- Конфиденциальность данных / эмуляция скрытых методов при помощи замыканий. Обычно используется в [модульном паттерне](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript).
+- [Частичное применение функций или каррирование](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x).
+
+###### Ссылки
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
+- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
+
+### Можете ли вы описать основное различие между циклом `.forEach` и циклом `.map()`? И в каких случаях каждый из них используется?
+
+Чтобы понять разницу между ними, давайте посмотрим, что делает каждая функция.
+
+**`forEach`**
+
+- Перебирает элементы в массиве.
+- Вызывает callback-функцию для каждого элемента.
+- Не возвращает значение.
+
+```js
+const a = [1, 2, 3];
+const doubled = a.forEach((num, index) => {
+  // Делаем что-либо с num и/или index.
+});
+
+// doubled = undefined
+```
+
+**`map`**
+
+- Перебирает элементы в массиве.
+- "Сопоставляет" каждый элемент с новым элементом, вызывая функцию для каждого элемента, создавая в результате новый массив.
+
+```js
+const a = [1, 2, 3];
+const doubled = a.map((num) => {
+  return num * 2;
+});
+
+// doubled = [2, 4, 6]
+```
+
+Основное различие между `.forEach` и `.map()` состоит в том, что `.map()` возвращает новый массив. Если вам нужен результат, но вы не хотите изменять исходный массив, `.map()` - очевидный выбор. Если вам просто нужно перебрать массив, то стоит воспользоваться `forEach`.
+
+###### Ссылки
+
+- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
+
+### В каких случаях обычно используются анонимные функции?
+
+Они могут использоваться в IIFE для инкапсуляции кода в локальную область видимости, чтобы объявленные в ней переменные не попадали в глобальную область видимости.
+
+```js
+(function () {
+  // Здесь код функции.
+})();
+```
+
+Как callback-функция, которая используется один раз и не должна использоваться где-либо еще. Код будет казаться более автономным и читаемым, когда обработчики будут определены прямо внутри вызывающего их кода, а не искать в другом месте, чтобы найти тело функции.
+
+```js
+setTimeout(function () {
+  console.log('Hello world!');
+}, 1000);
+```
+
+Аргументы в конструкциях функционального программирования или Lodash (аналогично callback-функциям).
+
+```js
+const arr = [1, 2, 3];
+const double = arr.map(function (el) {
+  return el * 2;
+});
+console.log(double); // [2, 4, 6]
+```
+
+###### Ссылки
+
+- https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
+- https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
+
+### Как вы организуете свой код? (module pattern, classical inheritance)
+
+В прошлом я использовал Backbone, который поощряет ООП подход, создавая Backbone модели и добавляя к ним методы.
+
+Модульный паттерн до сих пор хорош, но в настоящее время я использую React/Redux, который использует однонаправленный поток данных на основе архитектуры Flux. Я создаю модели своего приложения при помощи простых объектов и пишу чистые функции для управления этими объектами. Состояние управляется при помощью экшенов и редьюсеров, как в любом другом приложении Redux.
+
+Я избегаю использования наследования классов, где это возможно. Если же мне это необходимо сделать, то я придерживаюсь [этих правил](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4).
+
+### В чем разница между host-объектами и нативными объектами?
+
+Нативные объекты - это объекты, которые являются частью языка JavaScript, определенного в спецификации ECMAScript, такие как `String`,`Math`, `RegExp`,`Object`, `Function` и т.д.
+
+Хост-объекты предоставляются средой выполнения (браузером или Node), такие как `window`, `XMLHTTPRequest` и т.д.
+
+###### Ссылки
+
+- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
+
+### В чем разница между: `function Person(){}`, `var person = Person()`, и `var person = new Person()`?
+
+Этот вопрос не совсем понятен. Я полагаю, что суть вопроса о конструкторах в JavaScript. Строго говоря, `function Person(){}` - это обычное объявление функции. Принято называть с заглавной буквы функции, которые предназначены для использования в качестве конструкторов.
+
+`var person = Person()` вызывает `Person` как функцию, а не как конструктор. Вызов как таковой является распространенной ошибкой, если функция предназначена для использования в качестве конструктора. Как правило, конструктор ничего не возвращает, поэтому при вызове конструктора как обычной функции возвращается `undefined`, и это присваивается переменной, предназначенной в качестве экземпляра.
+
+`var person = new Person()` создает экземпляр объекта `Person` с помощью оператора `new`, который наследуется от `Person.prototype`. Альтернативой может быть использование `Object.create`, например:`Object.create(Person.prototype)`.
+
+```js
+function Person(name) {
+  this.name = name;
+}
+
+var person = Person('John');
+console.log(person); // undefined
+console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined
+
+var person = new Person('John');
+console.log(person); // Person { name: "John" }
+console.log(person.name); // "john"
+```
+
+###### Ссылки
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
+
+### В чем разница между `.call` и `.apply`?
+
+Сходство заключается в том, что и `.call`, и `.apply` используются для вызова функций, а также первый параметр будет использоваться как значение `this` внутри функции. А разница в том, что `.call` в качестве следующих аргументов принимает аргументы, разделенные запятыми, в то время как`.apply` в качестве следующих аргументов принимает массив аргументов.
+
+```js
+function add(a, b) {
+  return a + b;
+}
+
+console.log(add.call(null, 1, 2)); // 3
+console.log(add.apply(null, [1, 2])); // 3
+```
+
+### Что делает и для чего нужна функция `Function.prototype.bind`?
+
+Взято дословно с [MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind):
+
+> Метод bind() создаёт новую функцию, которая при вызове устанавливает в качестве контекста выполнения `this` предоставленное значение. В метод также передаётся набор аргументов, которые будут установлены перед переданными в привязанную функцию аргументами при её вызове.
+
+По моему опыту, это наиболее полезно для привязки значения `this` в методах классов, которые вы хотите передать в другие функции. Это часто делается в компонентах React.
+
+###### Ссылки
+
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
+
+### В каких случаях используется `document.write()`?
+
+`document.write()` записывает строку текста в поток документа, открытого при помощи `document.open()`. Когда `document.write()` выполняется после загрузки страницы, он вызывает `document.open`, который очищает весь документ (`<head>`и`<body>` будут удалены!) и заменяет содержимое на заданное значение параметра. Подобный подход считается опасным и не рекомендуется его использовать.
+
+В Интернете есть несколько ответов, которые объясняют, что `document.write()` используется в коде отслеживания или [когда вы хотите добавить стили, которые должны работать только при включенном JavaScript](https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html). Он даже используется в шаблоне HTML5 для [параллельной загрузки скриптов и сохранения порядка выполнения](https://github.com/paulirish/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag)! Тем не менее, я подозреваю, что эти причины могут быть устаревшими, и в наши дни они могут быть достигнуты без использования `document.write()`. Пожалуйста, поправьте меня, если я ошибаюсь по этому поводу.
+
+###### Ссылки
+
+- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
+- https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
+
+### В чем разница между feature detection (определение возможностей браузера), feature inference (предположение возможностей) и анализом строки user-agent?
+
+**Feature detection (определение возможностей браузера)**
+
+Определение возможностей браузера заключается в определении, поддерживает ли браузер определенный блок кода - и если нет, то будет выполняться другой код, так что браузер всегда сможет обеспечить работоспособность и предотвратить сбои/ошибки в некоторых браузерах. Например:
+
+```js
+if ('geolocation' in navigator) {
+  // Можно использовать navigator.geolocation
+} else {
+  // Обработка отсутствия возможности
+}
+```
+
+[Modernizr](https://modernizr.com/) - отличная библиотека для обработки таких функций.
+
+**Feature inference (предположение возможностей)**
+
+Предположение возможностей проверяет на наличие определенных возможностей, как и предыдущий подход, но использует другую функцию, которая предполагает, что определенная возможность уже существует, например:
+
+```js
+if (document.getElementsByTagName) {
+  element = document.getElementById(id);
+}
+```
+
+Этот подход не рекомендуется. Первый подход более надежен.
+
+**Строка User Agent**
+
+Это строка, сообщаемая браузером, которая позволяет узлам сетевого протокола определить тип приложения, операционную систему, поставщика программного обеспечения или версию программного обеспечения пользователя от которого исходит запрос. Доступ к ней можно получить через `navigator.userAgent`. Тем не менее, строка User Agent сложна для обработки и может быть подделана. Например, браузер Chrome идентифицируется как Chrome, так и Safari. Таким образом, чтобы обнаружить браузер Safari, вы должны проверить на наличие строки Safari и отсутствие строки Chrome. Избегайте этого метода.
+
+###### Ссылки
+
+- https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
+- https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
+
+### Расскажите об Ajax как можно более подробно
+
+Ajax (асинхронный JavaScript и XML) - это набор методов веб-разработки, использующих множество веб-технологий на стороне клиента для создания асинхронных веб-приложений. С помощью Ajax веб-приложения могут отправлять данные на сервер и получать их с сервера асинхронно (в фоновом режиме), не влияя на отображение и поведение открытой страницы. Отделяя уровень обмена данными от уровня представления, Ajax позволяет веб-страницам и, в частности, веб-приложениям динамически изменять содержимое без необходимости перезагрузки всей страницы. На практике для получения/передачи данных используется формат данных JSON вместо XML из-за того, что JSON основан на JavaScript.
+
+Раньше для асинхронного взаимодействия использовали `XMLHttpRequest` API, а сейчас принято использовать `fetch()` API.
+
+###### Ссылки
+
+- https://en.wikipedia.org/wiki/Ajax_(programming)
+- https://developer.mozilla.org/en-US/docs/AJAX
+
+### Какие преимущества и недостатки в использовании Ajax?
+
+**Преимущества**
+
+- Повышение интерактивности. Новые данные с сервера могут быть добавлены динамически без перезагрузки всей страницы.
+- Сокращение количества подключений к серверу, поскольку скрипты и таблицы стилей нужно запрашивать только один раз.
+- Состояние может быть сохранено на странице. Переменные JavaScript и состояние DOM сохраняется, поскольку главная страница контейнера не перезагружается.
+- Большая часть преимуществ SPA.
+
+**Недостатки**
+
+- Сложнее реализовать добавление динамической веб-страницы в закладки.
+- Не работает, если в браузере отключен JavaScript.
+- Некоторые поисковые роботы не выполняют JavaScript и не видят данные, загружаемые при помощи JavaScript.
+- Большая часть недостатков SPA.
+
+### Объясните, как работает JSONP (и почему это не совсем AJAX)
+
+JSONP (JSON с набивкой) - это способ, часто используемый для обхода политики ограничения домена в браузерах, потому что Ajax-запросы с текущей страницы к серверу, находящемуся в другом домене, запрещены.
+
+JSONP работает, отправляя запрос к серверу в другом домене через тег `<script>` и обычно с параметром запроса `callback`, например:`https://example.com?callback=printData`. Затем сервер обернет данные внутри функции с именем `printData` и вернет их клиенту.
+
+```html
+<!-- https://mydomain.com -->
+<script>
+  function printData(data) {
+    console.log(`My name is ${data.name}!`);
+  }
+</script>
+
+<script src="https://example.com?callback=printData"></script>
+```
+
+```js
+// Файл загружен с https://example.com?callback=printData
+printData({ name: 'Yang Shun' });
+```
+
+У клиента должна быть функция `printData` в своей глобальной области видимости, и эта функция будет выполнена клиентом, когда будет получен ответ с сервера из другого домена.
+
+JSONP может быть небезопасным и иметь повышенный риск. Поскольку JSONP - это действительно JavaScript, и он может делать все остальное, что может делать JavaScript, то вы должны быть уверены в надежности поставщика данных JSONP.
+
+В наши дни, [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) является рекомендуемым подходом и JSONP является способом для его обхода.
+
+###### Ссылки
+
+- https://stackoverflow.com/a/2067584/1751946
+
+### Вы когда-нибудь использовали шаблонизацию на JavaScript? Если да, то какие библиотеки вы использовали?
+
+Да. Handlebars, Underscore, Lodash, AngularJS, и JSX. Мне не нравилась шаблонизация в AngularJS, потому что там активно использовались строки в директивах и легко допустить ошибку при опечатке. JSX - мой новый фаворит, так как он ближе к JavaScript и почти не имеет дополнительного синтаксиса. В настоящее время вы даже можете использовать строковые литералы шаблонов ES2015 в качестве быстрого способа создания шаблонов, не полагаясь на сторонний код.
+
+```js
+const template = `<div>My name is: ${name}</div>`;
+```
+
+Однако следует помнить о возможном XSS в вышеприведенном подходе, поскольку содержимое не экранируется, в отличие от библиотек шаблонизации.
+
+### Расскажите, что такое поднятие (hoisting)
+
+Поднятие (hoisting) - это термин, используемый для объяснения поведения объявлений переменных в вашем коде. Переменные, объявленные или инициализированные при помощи ключевого слова `var`, будут перемещены в верхнюю часть текущей области, что мы называем "поднятием". Однако, "поднимается" только объявление переменной, присвоение значения (если оно имеется) останется на прежнем месте.
+
+Обратите внимание, что объявление фактически не перемещается - движок JavaScript анализирует объявления во время компиляции и узнает о объявлениях и их областях видимости. Просто легче понять подобное поведение, представляя объявления как перемещение наверх своей области видимости. Давайте рассмотрим несколько примеров.
+
+```js
+// объявления переменных через var поднимаются.
+console.log(foo); // undefined
+var foo = 1;
+console.log(foo); // 1
+
+// объявления переменных через let/const НЕ поднимаются.
+console.log(bar); // ReferenceError: bar is not defined
+let bar = 2;
+console.log(bar); // 2
+```
+
+При объявлении функции ее тело поднимается наверх, в то время как у функциональных выражений (когда переменной присваивается функция) поднимается только переменная.
+
+```js
+// Объявление функции
+console.log(foo); // [Function: foo]
+foo(); // 'FOOOOO'
+function foo() {
+  console.log('FOOOOO');
+}
+console.log(foo); // [Function: foo]
+
+// Функциональное выражение
+console.log(bar); // undefined
+bar(); // Uncaught TypeError: bar is not a function
+var bar = function () {
+  console.log('BARRRR');
+};
+console.log(bar); // [Function: bar]
+```
+
+### Объясните, что такое всплытие событий (event bubbling)
+
+Когда событие срабатывает на элементе DOM, оно попытается обработать событие (если привязан обработчик), затем событие всплывет вверх к своему родителю и это повторится снова. Подобное всплытие проходит по всем предкам элемента вплоть до `document`. Всплытие событий является механизмом, на котором основано делегирование событий.
+
+### В чем разница между "атрибутом" (attribute) и "свойством" (property)?
+
+Атрибуты определены в разметке HTML, а свойства определены в DOM. Чтобы проиллюстрировать разницу, представьте, что у нас есть это текстовое поле в HTML: `<input type="text" value="Hello">`.
+
+```js
+const input = document.querySelector('input');
+console.log(input.getAttribute('value')); // Hello
+console.log(input.value); // Hello
+```
+
+Но после того, как вы измените значение текстового поля, добавив к нему "World!", будет:
+
+```js
+console.log(input.getAttribute('value')); // Hello
+console.log(input.value); // Hello World!
+```
+
+###### Ссылки
+
+- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
+
+### Почему не следует расширять нативные JavaScript-объекты?
+
+Расширение встроенного/нативног объекта JavaScript означает добавление свойств/функций к его прототипу. Хотя на первый взгляд это может показаться хорошей идеей, на практике это опасно. Представьте, что ваш код использует несколько библиотек, которые расширяют `Array.prototype`, добавляя один и тот же метод `contains`. В результате код будет работать неверно, если поведение этих двух методов не будет одинаковым.
+
+Единственный случай, при котором можно расширить нативный объект - это при создании полифила, создав собственную реализацию метода, который является частью спецификации JavaScript, но может отсутствовать в устаревших браузерах.
+
+###### Ссылки
+
+- http://lucybain.com/blog/2014/js-extending-built-in-objects/
+
+### В чем разница между событием `load` и событием `DOMContentLoaded`?
+
+Событие `DOMContentLoaded` вызывается, когда исходный HTML-документ полностью загружен и обработан, не дожидаясь окончания загрузки таблиц стилей, изображений и скриптов.
+
+Событие `load` происходит только после загрузки DOM и всех зависимых ресурсов.
+
+###### Ссылки
+
+- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
+- https://developer.mozilla.org/en-US/docs/Web/Events/load
+
+### В чем разница между `==` и `===`?
+
+`==` - это оператор абстрактного сравнения, а `===` - оператор строгого сравнения. Оператор `==` будет сравнивать на равенство после выполнения любых необходимых преобразований типов. Оператор `===` не будет выполнять преобразование типов, поэтому, если два значения не одного типа, `===` просто вернет `false`. При использовании `==` могут происходить такие странные вещи, как:
+
+```js
+1 == '1'; // true
+1 == [1]; // true
+1 == true; // true
+0 == ''; // true
+0 == '0'; // true
+0 == false; // true
+```
+
+Мой совет - никогда не используйте оператор `==`, за исключением удобного сравнения с `null` или`undefined`, где выражение `a == null` вернет`true`, если `a` принимает значение `null` или `undefined`.
+
+```js
+var a = null;
+console.log(a == null); // true
+console.log(a == undefined); // true
+```
+
+###### Ссылки
+
+- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
+
+### Объясните same-origin policy в контексте JavaScript
+
+Same-origin policy (принцип одинакового источника) не позволяет JavaScript выполнять запросы за границы домена. Источник определяется как комбинация схемы URI, имени хоста и номера порта. Этот принцип не позволяет вредоносному сценарию на одной странице получить доступ к конфиденциальным данным на другой через объектную модель документа этой страницы.
+
+###### Ссылки
+
+- https://en.wikipedia.org/wiki/Same-origin_policy
+
+### Сделайте так, чтобы этот код работал:
+
+```js
+duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
+```
+
+```js
+function duplicate(arr) {
+  return arr.concat(arr);
+}
+
+duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
+```
+
+### Почему тернарный оператор так называется?
+
+"Тернарный" означает три. Троичное выражение принимает три операнда: условие, выражение "then" и выражение "else". Тернарные операторы не являются исключительными для JavaScript, и я не знаю, почему подобный вопрос был добавлен в этот список.
+
+###### Ссылки
+
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
+
+### Что делает строчка "use strict";? Какие достоинства и недостатки от ее использования?
+
+'use strict' это директива, используемая для включения строгого режима во всем скрипте или отдельных функциях.
+
+Преимущества:
+
+- Не позволяет случайно создавать глобальные переменные.
+- Любое присваивание, которое в обычном режиме завершается неудачей, в строгом режиме выдаст исключение.
+- При попытке удалить неудаляемые свойства, выдаст исключение (в то время как в нестрогом режиме никакого действия бы не произошло).
+- Требует, чтобы имена параметров функции были уникальными.
+- `this` в глобальной области видимости равно undefined.
+- Перехватывает распространенные ошибки, выдавая исключения.
+- Исключает неочевидные особенности языка.
+
+Недостатки:
+
+- Нельзя использовать некоторые особенности языка, к которым привыкли некоторые разработчики.
+- Нет доступа к `function.caller` и `function.arguments`.
+- Объединение скриптов, написанных в строгом режиме может вызвать проблемы.
+
+В целом, я думаю, что преимущества перевешивают недостатки, и мне никогда не приходилось полагаться на функции, которые заблокированы в строгом режиме. Я бы порекомендовал использовать строгий режим.
+
+###### Ссылки
+
+- http://2ality.com/2011/10/strict-mode-hatred.html
+- http://lucybain.com/blog/2014/js-use-strict/
+
+### Напишите цикл, который перебирает числа до `100`, возвращая **"fizz"** на числа кратные `3`, **"buzz"** на числа кратные `5` и **"fizzbuzz"** на числа кратные `3` и `5`.
+
+Взгляните на версию FizzBuzz от [Paul Irish](https://gist.github.com/jaysonrowe/1592432#gistcomment-790724).
+
+```js
+for (let i = 1; i <= 100; i++) {
+  let f = i % 3 == 0,
+    b = i % 5 == 0;
+  console.log(f ? (b ? 'FizzBuzz' : 'Fizz') : b ? 'Buzz' : i);
+}
+```
+
+Хотя я бы не советовал вам использовать этот код во время интервью. Просто придерживайтесь длинного, но ясного подхода. Также можете взглянуть на разные безумные реализации FizzBuzz, по ссылке ниже.
+
+###### Ссылки
+
+- https://gist.github.com/jaysonrowe/1592432
+
+### Почему считается хорошим тоном оставить глобальную область видимости (global scope) в нетронутом состоянии?
+
+Каждый скрипт имеет доступ к глобальной области видимости, и если каждый будет использовать глобальное пространство имен для определения своих переменных, то могут возникнуть конфликты. Используйте модульный паттерн (используя IIFE) для инкапсуляции ваших переменных в локальное пространство имен.
+
+### Для чего используют событие `load`? Есть ли у этого события недостатки? Знаете ли вы какие-либо альтернативы, и в каких случаях бы стали их использовать?
+
+Событие `load` происходит в конце процесса загрузки документа. На этом этапе все объекты в документе находятся в DOM, и все изображения, скрипты и ссылки загрузились.
+
+Событие DOM `DOMContentLoaded` будет запущено после создания DOM для страницы, но не будет ждать окончания загрузки других ресурсов. Оно предпочтительно в тех случаях, когда вам не нужно загружать страницу целиком перед инициализацией.
+
+###### Ссылки
+
+- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
+
+### Расскажите, что такое одностраничное приложение, и как сделать его SEO-оптимизированным.
+
+Текст ниже взят из замечательного [руководства по фронтенду от Grab](https://github.com/grab/front-end-guide), который по счастливой случайности тоже написан мной.
+
+В наши дни веб-разработчики называют свои продукты веб-приложениями, а не веб-сайтами. Хотя между этими двумя терминами нет строгой разницы, веб-приложения, как правило, очень интерактивны и динамичны, что позволяет пользователю выполнять действия и получать мгновенный ответ. Традиционно браузер получает HTML с сервера и отображает его. Когда пользователь переходит на другой URL-адрес, требуется полное обновление страницы, и сервер отправляет свежий HTML-код на новую страницу. Это называется рендерингом на стороне сервера.
+
+Однако в современных SPA вместо этого используется рендеринг на стороне клиента. Браузер загружает начальную страницу с сервера вместе со скриптами (фреймворками, библиотеками, кодом приложения) и таблицами стилей, необходимыми для всего приложения. Когда пользователь переходит на другие страницы, обновление страницы не происходит. URL-адрес страницы обновляется при помощи [HTML5 History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). Новые данные, необходимые для страницы (обычно в формате JSON), извлекаются браузером посредством запросов [AJAX](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started) к серверу. Затем SPA динамически обновляет страницу данными через JavaScript, которые были получены при начальной загрузке страницы. Эта модель похожа на работу нативных мобильных приложений.
+
+Преимущества:
+
+- Приложение становится более отзывчивым, и пользователи не видят мерцание при навигации, т.к. страница не обновляется целиком.
+- На сервер поступает меньше HTTP-запросов, так как одни и те же ресурсы не нужно загружать снова для каждой загрузки страницы.
+- Четкое разделение на клиент и сервер. Вы можете легко создавать новые клиентские приложения для разных платформ (например, для мобильных устройств, чат-ботов, умных часов) без необходимости изменять код сервера. Вы также можете изменить технологический стек на клиенте и сервере независимо, пока между ними существует интерфейс.
+
+Недостатки:
+
+- Более тяжелая первоначальная загрузка страницы из-за загрузки кода фреймворка, самого приложения и ресурсов.
+- Ваш сервер должен быть сконфигурирован так, чтобы он направлял все запросы к единой точке входа, и переложил обязанности по навигации на сторону клиента.
+- Для отображения содержимого SPA полагается на JavaScript, но не все поисковые системы выполняют JavaScript во время индексации, и они могут не увидеть содержимое страницы. Это вредит поисковой оптимизации (SEO) вашего приложения. Тем не менее, в большинстве случаев, когда вы создаете приложения, SEO не является наиболее важным фактором, так как не весь контент должен индексироваться поисковыми системами. Чтобы преодолеть это, вы можете либо рендерить свое приложение на стороне сервера, либо использовать такие сервисы, как [Prerender](https://prerender.io/), чтобы "рендерить ваш javascript в браузере, сохранять статический HTML и передавать его поисковым роботам".
+
+###### Ссылки
+
+- https://github.com/grab/front-end-guide#single-page-apps-spas
+- http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
+- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
+- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
+
+### Насколько вы опытны в работе с промисами (promises) и/или их полифилами?
+
+Обладаю практическими знаниями о них. Промис - это объект, который может вернуть одно значение в будущем: либо выполненное значение, либо причина, по которой оно не было выполнено (например, произошла ошибка сети). Промис может находиться в одном из 3 возможных состояний: выполнено, отклонено или ожидает выполнения. При использовании промисов можно добавлять callback-функции для обработки выполненного значения или причины отказа.
+
+Некоторыми распространенными полифилами являются `$.deferred`, Q и Bluebird, но не все они соответствуют спецификации. ES2015 поддерживает промисы "из коробки", и в настоящее время полифилы обычно не нужны.
+
+###### Ссылки
+
+- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
+
+### Какие преимущества и недостатки при использовании промисов вместо колбэков (callbacks)?
+
+**Преимущества**
+
+- Помогает избежать "callback hell", который может быть нечитаемым.
+- Упрощает написание последовательного удобочитаемого асинхронного кода с помощью `.then()`.
+- Упрощает написание параллельного асинхронного кода с помощью `Promise.all()`.
+- С использованием промисов можно избежать следующих проблем, которые возникают при использовании callback-функций:
+  - Колбэк-функция была вызвана слишком рано
+  - Колбэк-функция была вызвана слишком поздно (или вовсе не была вызвана)
+  - Колбэк-функция была вызвана слишком мало или слишком много раз
+  - Не удалось передать необходимую среду/параметры
+  - Были пропущены ошибки/исключения
+
+**Недостатки**
+
+- Чуть более сложный код (спорно).
+- В старых браузерах, где не поддерживается ES2015, вам нужно загрузить полифил, чтобы их использовать.
+
+###### Ссылки
+
+- https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch3.md
+
+### Каковы преимущества и недостатки написания JavaScript-кода на языке, который компилируется в JavaScript?
+
+Вот несколько языков, которые компилируются в JavaScript: CoffeeScript, Elm, ClojureScript, PureScript и TypeScript.
+
+Преимущества:
+
+- Исправляют некоторые давние проблемы в JavaScript и препятствует использованию анти-паттернов в JavaScript.
+- Позволяют писать более короткий код, предоставляя синтаксический сахар поверх JavaScript, которого, как мне кажется, не хватало в ES5, но с приходом ES2015 все изменилось.
+- Статическая типизация идеальна (в случае TypeScript) для больших проектов, которые необходимо поддерживать с течением времени.
+
+Недостатки:
+
+- Необходима сборка/компиляция кода, так как браузеры запускают только JavaScript, и ваш код должен быть скомпилирован в JavaScript перед тем, как он будет передан в браузеры.
+- Отладка может быть трудной, если карты кода (source maps) плохо сопоставляются с исходным кодом.
+- Большинство разработчиков не знакомы с этими языками и должны будут изучить их. Если ваша команда будет использовать их для своих проектов, это приведет к увеличению затрат.
+- Меньшее сообщество (зависит от языка), что означает, что будет труднее найти ресурсы, учебные пособия, библиотеки и инструменты.
+- Может отсутствовать поддержка в IDE/редакторе.
+- Эти языки всегда будут позади последнего стандарта JavaScript.
+- Разработчики должны знать, во что компилируется их код - потому что это то, что будет запускаться в браузере, и это наиболее важно.
+
+По большому счету, ES2015 значительно улучшил JavaScript и сделал разработку на нем намного удобнее. Я не вижу причин использовать CoffeeScript в наши дни.
+
+###### Ссылки
+
+- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
+
+### Какие инструменты и методы вы используете при отладке кода?
+
+- React и Redux
+  - [React Devtools](https://github.com/facebook/react-devtools)
+  - [Redux Devtools](https://github.com/gaearon/redux-devtools)
+- Vue
+  - [Vue Devtools](https://github.com/vuejs/vue-devtools)
+- JavaScript
+  - [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)
+  - Выражение `debugger`
+  - Отладка при помощи старого доброго `console.log`
+
+###### Ссылки
+
+- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
+- https://raygun.com/blog/javascript-debugging/
+
+### Какие языковые конструкции вы используете для итерации по свойствам объекта и элементам массива?
+
+Для объектов:
+
+- `for-in` циклы - `for (var property in obj) { console.log(property); }`. Тем не менее, он также будет перебирать его унаследованные свойства, и вам нужно добавить проверку `obj.hasOwnProperty(property)` перед его использованием.
+- `Object.keys()` - `Object.keys(obj).forEach(function (property) { ... })`. `Object.keys()`- это статический метод, который возвращает все перечисляемые свойства объекта.
+- `Object.getOwnPropertyNames()` - `Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`. `Object.getOwnPropertyNames()` - это статический метод, который возвращает все перечисляемые и неперечисляемые свойства объекта.
+
+Для массивов:
+
+- Циклы `for` - `for (var i = 0; i < arr.length; i++)`. Распространенной ошибкой здесь является то, что `var` находится в области видимости функции, а не в блочной области видимости, и в большинстве случаев нам нужна переменная-итератор блочной области. ES2015 позволяет использовать `let`, который имеет блочную область видимости, и рекомендуется использовать его вместо `var`. В итоге: `for (let i = 0; i < arr.length; i++)`.
+- `forEach` - `arr.forEach(function (el, index) { ... })`. Эта конструкция иногда может быть более удобной, потому что вам не нужно использовать `index`, если все, что вам нужно, это элементы массива. Существуют также методы `every` и `some`, которые позволят вам досрочно завершить итерацию.
+- `for-of` циклы - `for (let elem of arr) { ... }`. ES6 представил новый цикл for-of, который позволяет перебирать объекты, которые соответствуют [итерируемому протоколу](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Iteration_protocols) такие как `String`, `Array`, `Map`, `Set`, и т.д. Он сочетает в себе преимущества цикла `for` и метода `forEach()`. Преимущество цикла `for` заключается в том, что его можно преждевременно завершить, а преимущество `forEach()` заключается в том, что он более лаконичен, чем цикл `for`, поскольку вам не нужна переменная счетчика. С циклом `for-of` вы получаете возможность выхода из цикла и более сжатый синтаксис.
+
+В большинстве случаев я бы предпочел метод `.forEach`, но он зависит от того, что вы пытаетесь сделать. До ES6 мы использовали циклы `for`, если нам нужно было преждевременно завершить цикл при помощи `break`. Но теперь с ES6 мы можем сделать это с помощью циклов `for-of`. Я использую циклы `for`, когда мне нужно еще больше гибкости, например, в случае увеличения итератора более одного раза за цикл.
+
+Кроме того, при использовании цикла `for-of`, если вам нужен доступ как к индексу, так и к значению каждого элемента массива, вы можете сделать это с помощью метода ES6 `entries()` и деструктуризации:
+
+```js
+const arr = ['a', 'b', 'c'];
+
+for (let [index, elem] of arr.entries()) {
+  console.log(index, ': ', elem);
+}
+```
+
+###### Ссылки
+
+- http://2ality.com/2015/08/getting-started-es6.html#from-for-to-foreach-to-for-of
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries
+
+### Объясните разницу между изменяемыми (mutable) и неизменяемыми (immutable) объектами
+
+- Приведите пример неизменяемого объекта в JavaScript
+- Какие преимущества и недостатки у неизменяемости?
+- Как вы можете достигнуть неизменяемости в вашем коде?
+
+### Объясните разницу между синхронными и асинхронными функциями
+
+Синхронные функции являются блокирующими, а асинхронные - нет. В синхронных функциях одна операция должна завершиться, прежде чем будет запущена следующая операция. В этом случае скрипт выполняется строго по порядку операций, и выполнение скрипта приостанавливается, если одна из операций занимает очень много времени.
+
+Асинхронные функции обычно принимают callback-функцию в качестве параметра, и выполнение продолжается на следующей строке сразу после вызова асинхронной функции. Callback-функция вызывается только тогда, когда асинхронная операция завершена и стек вызовов пуст. Ресурсоемкие операции, такие как загрузка данных с веб-сервера или запросы к базе данных, должны выполняться асинхронно, чтобы основной поток мог продолжать выполнять другие операции вместо блокировки до завершения этой долгой операции (в случае браузеров пользовательский интерфейс будет зависать).
+
+### Что такое цикл событий (event loop)? В чем разница между стеком вызовов (call stack) и очередью событий (task queue)?
+
+Цикл событий - это однопоточный цикл, который контролирует стек вызовов и проверяет, есть ли какая-либо работа, которую необходимо выполнить в очереди задач. Если стек вызовов пуст и в очереди задач есть callback-функции, то функция удаляется из очереди и помещается в стек вызовов для выполнения.
+
+Рекомендую ознакомиться с [докладом о цикле событий от Philip Robert](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html). Это одно из самых популярных видео о JavaScript.
+
+###### Ссылки
+
+- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
+- http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
+
+### Объясните разницу при использовании `foo` в `function foo() {}` и `var foo = function() {}`
+
+Первое - объявление функции, а второе - функциональное выражение. Ключевое отличие состоит в том, что тело функции при объявлении поднимается наверх, а тело функциональных выражений - нет (они имеют такое же поведение поднятия, что и переменные). Для получения более подробной информации, обратитесь к вопросу выше [о поднятии](#расскажите-что-такое-поднятие-hoisting). Если вы попытаетесь вызвать выражение функции до того, как оно будет определено, вы получите ошибку `Uncaught TypeError: XXX is not a function`.
+
+**Объявление функции**
+
+```js
+foo(); // 'FOOOOO'
+function foo() {
+  console.log('FOOOOO');
+}
+```
+
+**Функциональное выражение**
+
+```js
+foo(); // Uncaught TypeError: foo is not a function
+var foo = function () {
+  console.log('FOOOOO');
+};
+```
+
+###### Ссылки
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
+
+### В чем различие между переменными, созданными при помощи `let`, `var` и `const`?
+
+Переменные, объявленные при помощи ключевого слова `var`, относятся к области видимости функции, в которой они созданы. Или, если они созданы вне какой-либо функции - к глобальному объекту. `let` и `const` относятся к блочной области видимости - это означает, что они доступны только в пределах ближайшего набора фигурных скобок (функция, блок if-else или цикл for).
+
+```js
+function foo() {
+  // Все переменные доступны внутри функции.
+  var bar = 'bar';
+  let baz = 'baz';
+  const qux = 'qux';
+
+  console.log(bar); // bar
+  console.log(baz); // baz
+  console.log(qux); // qux
+}
+
+console.log(bar); // ReferenceError: bar is not defined
+console.log(baz); // ReferenceError: baz is not defined
+console.log(qux); // ReferenceError: qux is not defined
+```
+
+```js
+if (true) {
+  var bar = 'bar';
+  let baz = 'baz';
+  const qux = 'qux';
+}
+
+// переменные, объявленные при помощи var, доступны в любом месте функции.
+console.log(bar); // bar
+// переменные, объявленные при помощи let и const не доступны вне блока, в котором были определены.
+console.log(baz); // ReferenceError: baz is not defined
+console.log(qux); // ReferenceError: qux is not defined
+```
+
+`var` позволяет поднимать переменные, что означает, что на них можно ссылаться в коде до их объявления. `let` и `const` не позволяют этого, и выдают ошибку.
+
+```js
+console.log(foo); // undefined
+
+var foo = 'foo';
+
+console.log(baz); // ReferenceError: can't access lexical declaration 'baz' before initialization
+
+let baz = 'baz';
+
+console.log(bar); // ReferenceError: can't access lexical declaration 'bar' before initialization
+
+const bar = 'bar';
+```
+
+Переопределение переменной с помощью `var` не вызовет ошибку, в отличие от `let` и `const`.
+
+```js
+var foo = 'foo';
+var foo = 'bar';
+console.log(foo); // "bar"
+
+let baz = 'baz';
+let baz = 'qux'; // Uncaught SyntaxError: Identifier 'baz' has already been declared
+```
+
+`let` отличается от `const` тем, что изменять значение `const` нельзя.
+
+```js
+// Это нормально.
+let foo = 'foo';
+foo = 'bar';
+
+// Это вызывает исключение.
+const baz = 'baz';
+baz = 'qux';
+```
+
+###### Ссылки
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
+
+### В чем разница между классом в ES6 и функцией-конструктором в ES5?
+
+Для начала посмотрим на примеры:
+
+```js
+// ES5 функция-конструктор
+function Person(name) {
+  this.name = name;
+}
+
+// ES6 класс
+class Person {
+  constructor(name) {
+    this.name = name;
+  }
+}
+```
+
+Они выглядят довольно похоже, если рассматривать простые конструкторы.
+
+Основное отличие в конструкторе возникает при использовании наследования. Если мы хотим создать класс `Student` (который будет являться подклассом класса `Person`) и добавить поле `studentId`, то, в дополнение к вышеописанному, мы должны сделать следующее:
+
+```js
+// ES5 функция-конструктор
+function Student(name, studentId) {
+  // Вызов конструктора суперкласса для инициализации производных от суперкласса членов.
+  Person.call(this, name);
+
+  // Инициализация собственных членов подкласса.
+  this.studentId = studentId;
+}
+
+Student.prototype = Object.create(Person.prototype);
+Student.prototype.constructor = Student;
+
+// ES6 класс
+class Student extends Person {
+  constructor(name, studentId) {
+    super(name);
+    this.studentId = studentId;
+  }
+}
+```
+
+Наследование в синтаксисе ES5 является намного более многословным, а в ES6 более понятное и усваиваемое.
+
+###### Ссылки
+
+- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
+- https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5
+
+### Можете ли вы привести пример использования стрелочных функции =>? Чем они отличаются от других функций?
+
+Одним очевидным преимуществом стрелочных функций является упрощение синтаксиса, необходимого для создания функций, без необходимости использования ключевого слова `function`. `This` внутри стрелочных функций также привязано к замыкающей области видимости, в отличие от обычных функций, где `this` определяется контекстом, в котором они вызываются. Лексически привязанное `this` полезно при вызове callback-функций, особенно в компонентах React.
+
+### В чем преимущество использования стрелочных функций для метода в конструкторе?
+
+Основным преимуществом использования стрелочной функции в качестве метода внутри конструктора является то, что значение `this` устанавливается во время создания функции и не может измениться после этого. Таким образом, когда конструктор используется для создания нового объекта, `this` всегда будет ссылаться на этот объект. Например, допустим, у нас есть конструктор Person, который принимает имя в качестве аргумента, имеет два метода для вывода в консоль этого имени, один в качестве обычной функции, а другой в качестве стрелочной:
+
+```js
+const Person = function (firstName) {
+  this.firstName = firstName;
+  this.sayName1 = function () {
+    console.log(this.firstName);
+  };
+  this.sayName2 = () => {
+    console.log(this.firstName);
+  };
+};
+
+const john = new Person('John');
+const dave = new Person('Dave');
+
+john.sayName1(); // John
+john.sayName2(); // John
+
+// У обычной функции значение `this` может быть изменено, но у стрелочной функции нет
+john.sayName1.call(dave); // Dave (потому что 'this' сейчас ссылается на объект dave)
+john.sayName2.call(dave); // John
+
+john.sayName1.apply(dave); // Dave (потому что 'this' сейчас ссылается на объект dave)
+john.sayName2.apply(dave); // John
+
+john.sayName1.bind(dave)(); // Dave (потому что 'this' сейчас ссылается на объект dave)
+john.sayName2.bind(dave)(); // John
+
+var sayNameFromWindow1 = john.sayName1;
+sayNameFromWindow1(); // undefined (потому что 'this' сейчас ссылается на объект window)
+
+var sayNameFromWindow2 = john.sayName2;
+sayNameFromWindow2(); // John
+```
+
+Смысл заключается в том, что `this` можно изменить для обычной функции, но для стрелочных функций контекст всегда остается неизменным. Поэтому, даже если вы передаете стрелочную функцию в разные части вашего приложения, вам не нужно беспокоиться об изменении контекста.
+
+Это может быть особенно полезно в классовых React-компонентах. Если вы определяете метод класса для чего-то такого, как обработчик клика, используя обычную функцию, а затем передаете этот обработчик в дочерний компонент в качестве `prop`, вам также необходимо привязать `this` в конструкторе родительского компонента , Если вместо этого вы используете стрелочную функцию, то нет необходимости привязывать "this", так как метод автоматически получит свое значение "this" из замыкающего лексического контекста. (Прочитайте эту статью о стрелочных функциях: https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)
+
+###### Ссылки
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
+- https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb
+
+### Дайте определение функции высшего порядка
+
+Функция высшего порядка - это любая функция, которая принимает одну или несколько функций в качестве аргументов, которые она использует для работы с данными и/или возвращает функцию в качестве результата. Функции высшего порядка предназначены для абстрагирования некоторой операции, которая выполняется повторно. Классическим примером является метод `map`, который принимает массив и функцию в качестве аргументов. Затем `map` использует эту функцию для преобразования каждого элемента в массиве, возвращая новый массив с преобразованными данными. Другими популярными примерами в JavaScript являются `forEach`, `filter` и `reduce`. Функции высшего порядка используют не только для манипуляций с массивами, но также и для возврата функции из другой функции, например при использовании `Function.prototype.bind`.
+
+**Map**
+
+Допустим, у нас есть массив с именами, которые нам нужны о преобразовать в верхний регистр.
+
+```js
+const names = ['irish', 'daisy', 'anna'];
+```
+
+Императивное решение будет выглядеть так:
+
+```js
+const transformNamesToUppercase = function (names) {
+  const results = [];
+  for (let i = 0; i < names.length; i++) {
+    results.push(names[i].toUpperCase());
+  }
+  return results;
+};
+transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
+```
+
+Воспользууемся `.map(transformerFn)`, чтобы сделать код декларативным и более коротким:
+
+```js
+const transformNamesToUppercase = function (names) {
+  return names.map((name) => name.toUpperCase());
+};
+transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
+```
+
+###### Ссылки
+
+- https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
+- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
+- https://eloquentjavascript.net/05_higher_order.html
+
+### Можете ли вы привести пример деструктуризации объекта или массива?
+
+Деструктуризация - это выражение, доступное в ES6, которое предоставляет краткий и удобный способ извлекать значения из объектов или массивов и помещать их в отдельные переменные.
+
+**Деструктуризация массива**
+
+```js
+// Присваивание переменной
+const foo = ['one', 'two', 'three'];
+
+const [one, two, three] = foo;
+console.log(one); // "one"
+console.log(two); // "two"
+console.log(three); // "three"
+```
+
+```js
+// Перестановка переменных местами
+let a = 1;
+let b = 3;
+
+[a, b] = [b, a];
+console.log(a); // 3
+console.log(b); // 1
+```
+
+**Деструктуризация объекта**
+
+```js
+// Присваивание переменной
+const o = { p: 42, q: true };
+const { p, q } = o;
+
+console.log(p); // 42
+console.log(q); // true
+```
+
+###### Ссылки
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
+- https://ponyfoo.com/articles/es6-destructuring-in-depth
+
+### Шаблонные строки в ES6 намного упрощают создание строк, можете ли вы привести пример их использования?
+
+Шаблонные строки помогают упростить построение строк или включение переменных в строку. До ES2015 писали так:
+
+```js
+var 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!'
+```
+
+С приходом шаблонных строк в ES6 стало намного проще:
+
+```js
+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 перенос осуществлялся следующим образом:
+
+```js
+console.log('This is line one.\nThis is line two.');
+// This is line one.
+// This is line two.
+```
+
+Или же, чтобы не приходилось прокручивать длинную строку в текстовом редакторе, можно было разбить код на несколько строк в коде, таким образом:
+
+```js
+console.log('This is line one.\n' + 'This is line two.');
+// This is line one.
+// This is line two.
+```
+
+Однако шаблонные строки сохраняют любой интервал, который вы добавляете к ним. Например, чтобы создать тот же многострочный литерал, который мы создали выше, вы можете просто написать:
+
+```js
+console.log(`This is line one.
+This is line two.`);
+// This is line one.
+// This is line two.
+```
+
+Еще одним вариантом использования шаблонных строк будет использование в качестве замены библиотек шаблонизации для интерполяции переменных:
+
+```js
+const person = { name: 'Tyler', age: 28 };
+document.body.innerHTML = `
+  <div>
+    <p>Name: ${person.name}</p>
+    <p>Age: ${person.age}</p>
+  </div>
+`;
+```
+
+**Обратите внимание, что ваш код может быть восприимчив к XSS при использовании `.innerHTML`. Очищайте ваши данные перед отображением, если они получены от пользователя!**
+
+###### Ссылки
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
+
+### Можете ли вы привести пример каррированной функции (curry function) и в чем их преимущество?
+
+Каррирование - это паттерн, где функция с более чем одним параметром разбивается на несколько функций, которые при последовательном вызове будут накапливать все необходимые параметры по одному. Этот метод может быть полезен для облегчения чтения и написания кода, написанного в функциональном стиле. Важно отметить, что каррированная функция должна начинаться как одна функция, а затем разбиваться на последовательность функций, каждая из которых принимает один параметр.
+
+```js
+function curry(fn) {
+  if (fn.length === 0) {
+    return fn;
+  }
+
+  function _curried(depth, args) {
+    return function (newArgument) {
+      if (depth - 1 === 0) {
+        return fn(...args, newArgument);
+      }
+      return _curried(depth - 1, [...args, newArgument]);
+    };
+  }
+
+  return _curried(fn.length, []);
+}
+
+function add(a, b) {
+  return a + b;
+}
+
+var curriedAdd = curry(add);
+var addFive = curriedAdd(5);
+
+var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
+```
+
+###### Ссылки
+
+- https://hackernoon.com/currying-in-js-d9ddc64f162e
+
+### В чем преимущества использования spread оператора и чем он отличается от rest оператора?
+
+Spread оператор синтаксиса ES6 очень полезен при написании кода в функциональном стиле, поскольку мы можем легко создавать копии массивов или объектов, не прибегая к `Object.create`,`slice` или функции библиотеки. Эта языковая функция часто используется в проектах с Redux и RxJS.
+
+```js
+function putDookieInAnyArray(arr) {
+  return [...arr, 'dookie'];
+}
+
+const result = putDookieInAnyArray(['I', 'really', "don't", 'like']); // ["I", "really", "don't", "like", "dookie"]
+
+const person = {
+  name: 'Todd',
+  age: 29,
+};
+
+const copyOfTodd = { ...person };
+```
+
+В свою очередь, rest оператор синтаксиса ES6 позволяет в сокращенном виде указывать неопределенное количество аргументов, передаваемых в функцию. Можно сказать, что он противоположен spread оператору: собирает данные и добавляет их в массив, вместо разделения массива данных. Он используется в аргументах функций, а также при деструктуризации массивов и объектов.
+
+```js
+function addFiveToABunchOfNumbers(...numbers) {
+  return numbers.map((x) => x + 5);
+}
+
+const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]
+
+const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]
+
+const { e, f, ...others } = {
+  e: 1,
+  f: 2,
+  g: 3,
+  h: 4,
+}; // e: 1, f: 2, others: { g: 3, h: 4 }
+```
+
+###### Ссылки
+
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
+
+### Каким образом можно обмениваться кодом между файлами?
+
+Это зависит от среды выполнения JavaScript.
+
+На клиенте (в среде браузера), пока переменные/функции объявлены в глобальной области видимости (`window`), все скрипты могут на них ссылаться. В качестве альтернативы, используйте Asynchronous Module Definition (AMD) через RequireJS для модульного подхода.
+
+На сервере (Node.js) обычно используется CommonJS. Каждый файл считается модулем, и он может экспортировать переменные и функции, добавляя их к объекту `module.exports`.
+
+ES2015 позволяет использовать модульный синтаксис, который призван заменить как AMD, так и CommonJS. В конечном итоге он будет поддерживаться как в браузере, так и в Node.
+
+###### Ссылки
+
+- http://requirejs.org/docs/whyamd.html
+- https://nodejs.org/docs/latest/api/modules.html
+- http://2ality.com/2014/09/es6-modules-final.html
+
+### Для чего используются статические члены класса?
+
+Члены статических классов (свойства/методы) не привязаны к конкретному экземпляру класса и имеют одинаковое значение вне зависимости от того, какой экземпляр ссылается на них. Статические свойства обычно являются конфигурационными переменными, а статические методы обычно являются чисто служебными функциями, которые не зависят от состояния экземпляра.
+
+###### Ссылки
+
+- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
+
+### Другие ответы
+
+- http://flowerszhong.github.io/2013/11/20/javascript-questions.html
diff --git a/Translations/Tagalog/questions/css-questions.md b/website/i18n/tl/docusaurus-plugin-content-docs/current/css-questions.md
similarity index 56%
rename from Translations/Tagalog/questions/css-questions.md
rename to website/i18n/tl/docusaurus-plugin-content-docs/current/css-questions.md
index 8302a97989..fab2fa1a00 100644
--- a/Translations/Tagalog/questions/css-questions.md
+++ b/website/i18n/tl/docusaurus-plugin-content-docs/current/css-questions.md
@@ -1,38 +1,12 @@
-# Mga Katanungan sa CSS
-
-Mga kasagutan sa [Mga Kasagutan sa Pakikipanayam sa Front-end na Trabaho - Mga Katanungan sa CSS](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/css-questions.md). Malugod na tatanggapin ang mga Pull request para sa mga suhestyon at mga koreksyon!
-
-* [Ano ang pagsisigurado ng CSS selector at kung paano ito gumagana?](#ano-ang-pagsisigurado-ng-css-selector-at-kung-paano-ito-gumagana)
-* [Ano ang pagkakaiba sa pagitan ng "pag-reset" at "pag-normalize" ng CSS? saan sa dalawa ang iyong pipiliin, at bakit?](#ano-ang-pagkakaiba-sa-pagitan-ng-pag-reset-at-pag-normalize-ng-css-saan-sa-dalawa-ang-iyong-pipiliin-at-bakit)
-* [Ilarawan ang mga `float` at kung paano sila gumagana.](#ilarawan-ang-mga-float-at-kung-paano-sila-gumagana)
-* [Ilarawan ang z-index at kung papaano nabuo ang konteksto.](iIlarawan-ang-z-index-at-kung-papaano-nabuo-ang-konteksto)
-* [Ilarawan ang BFK (Block Formatting na Konteksto) at papaaano ito gumagana.](#ilarawan-ang-bfk-block-formatting-na-konteksto-at-papaaano-ito-gumagana)
-* [Ano ang iba't ibang teknik ng paglilinis at kung ano ang nararapat sa kung ano ang konteksto?](#ano-ang-ibat-ibang-teknik-ng-paglilinis-at-kung-ano-ang-nararapat-sa-kung-ano-ang-konteksto)
-* [Ipaliwanag ang mga CSS na sprite, at papaano mo ipapatupad ang mga ito sa isang pahina o site.](#ipaliwanag-ang-mga-css-na-sprite-at-papaano-mo-ipapatupad-ang-mga-ito-sa-isang-pahina-o-site)
-* [Papaano mo didiskartehan ang pag-aayos ng mga ispisipik sa browser na pag-eestilo na isyu?](#papaano-mo-didiskartehan-ang-pag-aayos-ng-mga-ispisipik-sa-browser-na-pag-eestilo-na-isyu)
-* [Papaano mo inahahanda ang iyong mga pahina para sa mga browser na kulang sa tampok? Ano-ano ang mga teknik or proseso ang iyong ginagamit?](#papaano-mo-inahahanda-ang-iyong-mga-pahina-para-sa-mga-browser-na-kulang-sa-tampok-ano-ano-ang-mga-teknik-or-proseso-ang-iyong-ginagamit)
-* [Ano-ano ang mga iba't ibang pamamaraan upang matago ang nakatagong nilalaman (at gawan ng paraan na ito ay magagamit lamang ng mga mambabasa ng iskrin)?](#ano-ano-ang-mga-ibat-ibang-pamamaraan-upang-matago-ang-nakatagong-nilalaman-at-gawan-ng-paraan-na-ito-ay-magagamit-lamang-ng-mga-mambabasa-ng-iskrin)
-* [Ikaw ba ay nakagamit kailanman ng sistemang grid?, at kung gayon, Ano ang iyong mas pipiliin?](#ikaw-ba-ay-nakagamit-kailanman-ng-sistemang-grid-at-kung-gayon-ano-ang-iyong-mas-pipiliin)
-* [Ikaw ba ay nakagamit oh nakapagpatupad na ng mga query sa mobile o mga layout na espisipik sa mobile/CSS?](#ikaw-ba-ay-nakagamit-oh-nakapagpatupad-na-ng-mga-query-sa-mobile-o-mga-layout-na-espisipik-sa-mobilecss)
-* [Ikaw ba ay pamilyar sa estilong SVG?](#ikaw-ba-ay-pamilyar-sa-estilong-svg)
-* [Makapagbibigay kaba ng halimbawa ng klase ng @media maliban sa iskrin?](#makapagbibigay-kaba-ng-halimbawa-ng-klase-ng-media-maliban-sa-iskrin)
-* [Ano-ano ang ilan sa mga "pasabog" para sa epektibong pagsusulat ng CSS?](#ano-ano-ang-ilan-sa-mga-pasabog-para-sa-epektibong-pagsusulat-ng-css)
-* [Ano ang mga pakinabang o di-pakinabang ng paggamit ng mga preprocessors ng CSS?](#ano-ang-mga-pakinabang-o-di-pakinabang-ng-paggamit-ng-mga-preprocessors-ng-css)
-* [Ilarawan kung ano ang iyong gusto at di gusto tungkol sa CSS na mga preprocessor na iyong nagamit.](#ilarawan-kung-ano-ang-iyong-gusto-at-di-gusto-tungkol-sa-css-na-mga-preprocessor-na-iyong-nagamit)
-* [Papaano mo ipapatupad ang isang web design comp na gumagamit ng mga di pangkaraniwang font?](#papaano-mo-ipapatupad-ang-isang-web-design-comp-na-gumagamit-ng-mga-di-pangkaraniwang-font)
-* [Ipaliwanag kung paano tinutukoy ng isang browser kung anu-anong mga elemento ang tumutugma sa tagapili ng CSS.](#ipaliwanag-kung-paano-tinutukoy-ng-isang-browser-kung-anu-anong-mga-elemento-ang-tumutugma-sa-tagapili-ng-css)
-* [Ilarawan ang mga elementong pseudo at talakayin kung para saan ito gagamitin.](#ilarawan-ang-mga-elementong-pseudo-at-talakayin-kung-para-saan-ito-gagamitin)
-* [Ipaliwanag ang iyong pagkakaintindi sa modelong kahon at papaano mo pagsasabihan ang browser sa CSS na mag-render ng iyong layout sa iba't ibang modelo ng kahon.](#ipaliwanag-ang-iyong-pagkakaintindi-sa-modelong-kahon-at-papaano-mo-pagsasabihan-ang-browser-sa-css-na-mag-render-ng-iyong-layout-sa-ibat-ibang-modelo-ng-kahon)
-* [Ano ang ginagawa ng `* { box-sizing: border-box; }`? Anu-ano ang mga pakinabang nito?](#ano-ang-ginagawa-ng---box-sizing-border-box--anu-ano-ang-mga-pakinabang-nito)
-* [Ano ang katangian ng CSS na `display` at pwede ka bang magbigay ng ilang mga halimbawa ng paggamit nito?](#ano-ang-katangian-ng-css-na-display-at-pwede-ka-bang-magbigay-ng-ilang-mga-halimbawa-ng-paggamit-nito)
-* [Ano ang pagkakaiba sa pagitan ng `inline` at `inline-block`?](#ano-ang-pagkakaiba-sa-pagitan-ng-inline-at-inline-block)
-* [Ano ang pagkakaiba sa pagitan ng `relative`, `fixed`, `absolute` at elementong nakaposisyong panig sa `static`?](#ano-ang-pagkakaiba-sa-pagitan-ng-relative-fixed-absolute-at-elementong-nakaposisyong-panig-sa-static)
-* [Ano ang mga umiiral na framework ng CSS na ginamit mo ng lokal, o kaya naman ay sa produksyon? Papaano mo babaguhin o mapapabuti ang mga ito?](#ano-ang-mga-umiiral-na-framework-ng-css-na-ginamit-mo-ng-lokal-o-kaya-naman-ay-sa-produksyon-papaano-mo-babaguhin-o-mapapabuti-ang-mga-ito)
-* [Ikaw ba ay nakapaglaro na sa paligid ng bagong CSS Flexbox o Grid na specs?](#ikaw-ba-ay-nakapaglaro-na-sa-paligid-ng-bagong-css-flexbox-o-grid-na-specs)
-* [Maipapaliwanag mo ba ang kaibahan sa pagitan ng pag-code ng isang web site na tumutugon kumpara sa paggamit ng diskarteng mobile ang una?](#maipapaliwanag-mo-ba-ang-kaibahan-sa-pagitan-ng-pag-code-ng-isang-web-site-na-tumutugon-kumpara-sa-paggamit-ng-diskarteng-mobile-ang-una)
-* [Sa anong paraan naiiba ang disenyo ng tumutugon mula sa disenyo ng umaangkop?](#sa-anong-paraan-naiiba-ang-disenyo-ng-tumutugon-mula-sa-disenyo-ng-umaangkop)
-* [Ikaw ba ay nakagamit na ng mga grapikong retina? kung gayon, kelan at anu-anong mga teknik ang iyong ginamit?](#ikaw-ba-ay-nakagamit-na-ng-mga-grapikong-retina-kung-gayon-kelan-at-anu-anong-mga-teknik-ang-iyong-ginamit)
-* [May kadahilanan ba na nais mong gamitin ang `translate()` kesa sa `absolute` na pag-poposisyon, o kabaliktaran? at bakit?](#may-kadahilanan-ba-na-nais-mong-gamitin-ang-translate-kesa-sa-absolute-na-pag-poposisyon-o-kabaliktaran-at-bakit)
+---
+title: Mga Katanungan sa CSS
+---
+
+Mga kasagutan sa [Mga Kasagutan sa Pakikipanayam sa Front-end na Trabaho - Mga Katanungan sa CSS](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/css-questions.md). Malugod na tatanggapin ang mga Pull request para sa mga suhestyon at mga koreksyon!
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
 
 ### Ano ang pagsisigurado ng CSS selector at kung paano ito gumagana?
 
@@ -51,23 +25,19 @@ Mas gusto kong magsulat ng mga CSS na panuntunan na may mababang pagtitiyak ng s
 
 ###### Mga Reperensiya
 
-* https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
-* https://www.sitepoint.com/web-foundations/specificity/
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
+- https://www.sitepoint.com/web-foundations/specificity/
 
 ### Ano ang pagkakaiba sa pagitan ng "pag-reset" at "pag-normalize" ng CSS? saan sa dalawa ang iyong pipiliin, at bakit?
 
-* **Pag-reset** - Ang pag-reset ay sinadya upang i-strip ang lahat ng mga default na pag-istilo ng browser sa mga elemento. Halimbawa. mga `margin`,mga `padding`,mga `font-size` ng lahat ng mga elemento ay naka-set upang maging pareho. Kakailanganin mong ideklara ulit ang estilo para sa karaniwang mga elemento ng tipograpiya.
-* **Pag-normalize** - Ang pag-normalize ay pinapanatili ang kapaki-pakinabang na mga estilo ng default sa halip na i-unstyle ang lahat. Iniayos din nito ang mga bug para sa mga karaniwang dependensya ng browser.
+- **Pag-reset** - Ang pag-reset ay sinadya upang i-strip ang lahat ng mga default na pag-istilo ng browser sa mga elemento. Halimbawa. mga `margin`,mga `padding`,mga `font-size` ng lahat ng mga elemento ay naka-set upang maging pareho. Kakailanganin mong ideklara ulit ang estilo para sa karaniwang mga elemento ng tipograpiya.
+- **Pag-normalize** - Ang pag-normalize ay pinapanatili ang kapaki-pakinabang na mga estilo ng default sa halip na i-unstyle ang lahat. Iniayos din nito ang mga bug para sa mga karaniwang dependensya ng browser.
 
 Mas pipiliin ko ang pagreset kung meron man akong mas pinasadya o hindi tipikal na disenyo ng site tulad ng kailangan kong gawin sa karamihan ng aking sariling estilo at hindi kailangan ng anumang mga default na estilo para sa pag-aalaga.
 
 ###### Mga Reperensiya
 
-* https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
 
 ### Ilarawan ang mga `float` at kung paano sila gumagana.
 
@@ -93,9 +63,7 @@ Bilang alternatibo, Ibigay ang `overflow: auto` o `overflow: hidden` na katangia
 
 ###### Mga Reperensiya
 
-* https://css-tricks.com/all-about-floats/
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://css-tricks.com/all-about-floats/
 
 ### Ilarawan ang z-index at kung papaano nabuo ang konteksto.
 
@@ -109,46 +77,38 @@ Ang bawat kontekstong nakasalansan ay nakatimpi - matapos ang mga nilalaman ng e
 
 ###### Mga Reperensiya
 
-* https://css-tricks.com/almanac/properties/z/z-index/
-* https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
-* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://css-tricks.com/almanac/properties/z/z-index/
+- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
+- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
 
 ### Ilarawan ang BFK (Block Formatting na Konteksto) at papaaano ito gumagana.
 
-Ang Block Formatting na Konteksto (BFK) ay parte ng biswal na pagrender ng css ng isang pahina ng web na kung saan ang mga bloke na kahon ay inilatag. Ang mga floats, ganap na mga nakaposisyon na mga elemento, `inline-blocks`, `table-cells`, mga `table-caption`, at mga elemento na may `overflow` maliban sa `visible` (maliban kung ang halaga na ito ay pinalaganap sa viewport) na magtatag ng mga bagong konteksto sa pag-format ng bloke
-.
+Ang Block Formatting na Konteksto (BFK) ay parte ng biswal na pagrender ng css ng isang pahina ng web na kung saan ang mga bloke na kahon ay inilatag. Ang mga floats, ganap na mga nakaposisyon na mga elemento, `inline-blocks`, `table-cells`, mga `table-caption`, at mga elemento na may `overflow` maliban sa `visible` (maliban kung ang halaga na ito ay pinalaganap sa viewport) na magtatag ng mga bagong konteksto sa pag-format ng bloke .
 
 Ang BFK ay isang HTML na kahon na natutugunan ng hindi bababa sa isa sa mga sumusunod na kondisyon:
 
-* Ang halaga ng `float` ay hindi `none`.
-* Ang halaga ng `position` ay hindi `static` o `relative`.
-* Ang halaga ng `display` ay `table-cell`, `table-caption`, `inline-block`, `flex`, o `inline-flex`.
-* Ang halaga ng `overflow` ay hindi `visible`.
+- Ang halaga ng `float` ay hindi `none`.
+- Ang halaga ng `position` ay hindi `static` o `relative`.
+- Ang halaga ng `display` ay `table-cell`, `table-caption`, `inline-block`, `flex`, o `inline-flex`.
+- Ang halaga ng `overflow` ay hindi `visible`.
 
-Sa isang BFK, hinawakan ang kaliwang panlabas na gilid ng bawat kahon ang kaliwang gilid ng bloke na naglalaman
-(for right-to-left formatting, right edges touch).
+Sa isang BFK, hinawakan ang kaliwang panlabas na gilid ng bawat kahon ang kaliwang gilid ng bloke na naglalaman (for right-to-left formatting, right edges touch).
 
 Ang mga bertikal na margin sa pagitan ng mga katabing kahon ng block-level sa isang pagbagsak ng BFK. Magpasa pa sa [Mga margin na bumabagsak](https://www.sitepoint.com/web-foundations/collapsing-margins/).
 
 ###### Mga Reperensiya
 
-* https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-* https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
 
 ### Ano ang iba't ibang teknik ng paglilinis at kung ano ang nararapat sa kung ano ang konteksto?
 
-* Walang laman na `div` na paraaan- `<div style="clear:both;"></div>`.
-* Clearfix na paraan - Sumangguni sa `.clearfix` na klase sa itaas.
-* `overflow: auto` o `overflow: hidden` na paraan - Magtatatag ang magulang ng isang bagong konteksto sa pag-format ng block at palawakin na naglalaman ng mga anak nito.
+- Walang laman na `div` na paraaan- `<div style="clear:both;"></div>`.
+- Clearfix na paraan - Sumangguni sa `.clearfix` na klase sa itaas.
+- `overflow: auto` o `overflow: hidden` na paraan - Magtatatag ang magulang ng isang bagong konteksto sa pag-format ng block at palawakin na naglalaman ng mga anak nito.
 
 Sa mga malaking proyekto, Gusto kong magsulat ng kagamitan na `.clearfix` na klase at gamitin ang mga ito sa mga lugar na kung saan ko kailangan. Ang `overflow: hidden` maaaring i-clip ang mga bata kung ang mga bata ay mas mataas kaysa sa magulang at hindi masyadong mainam.
 
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
-
 ### Ipaliwanag ang mga CSS na sprite, at papaano mo ipapatupad ang mga ito sa isang pahina o site.
 
 Ang mga CSS na sprite ay pinagsasama ang maramihang mga imahe sa isang solong mas malaking imahe. Karaniwang ginagamit itong pamamaraan para sa mga icon (Ang Gmail ay gumagamit nito). Ito ang mga pamamaraan kung papaano ito ipatutupad:
@@ -159,81 +119,66 @@ Ang mga CSS na sprite ay pinagsasama ang maramihang mga imahe sa isang solong ma
 
 **Mga Bentahe:**
 
-* Bawasan ang bilang ng mga kahilingan ng HTTP para sa maraming mga imahe (kailangan lamang ng isang solong kahilingan sa bawat spritesheet). Ngunit sa HTTP2, Ang paglo-load ng maramihang mga imahe ay kinalaunan hindi na isang isyu.
-* Pangunang pagdownload ng mga asset na hindi ma-download hangga't hindi pa kailangan, gaya ng mga imahe na makikita lang kung ang `:hover` ay nasa pseudo na estado. Ang pag-blink ay hindi makikita.
+- Bawasan ang bilang ng mga kahilingan ng HTTP para sa maraming mga imahe (kailangan lamang ng isang solong kahilingan sa bawat spritesheet). Ngunit sa HTTP2, Ang paglo-load ng maramihang mga imahe ay kinalaunan hindi na isang isyu.
+- Pangunang pagdownload ng mga asset na hindi ma-download hangga't hindi pa kailangan, gaya ng mga imahe na makikita lang kung ang `:hover` ay nasa pseudo na estado. Ang pag-blink ay hindi makikita.
 
 ###### Mga Reperensiya
 
-* https://css-tricks.com/css-sprites/
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://css-tricks.com/css-sprites/
 
 ### Papaano mo didiskartehan ang pag-aayos ng mga ispisipik sa browser na pag-eestilo na isyu?
 
-* Matapos malaman ang isyu at ang nakakasakit na browser, gumamit ng isang hiwalay na estilo ng sheet na naglo-load lamang kapag ginagamit ang partikular na browser na iyon. Bagaman ang pamamaraan na ito ay nangangailangan ng pagrender sa panig ng serber.
-* Gumamit ng mga librerya kagaya ng Bootstrap na humahawak na ng mga estilo ng mga isyu para sa iyo.
-* Gumamit ng `autoprefixer` upang awtomatikong magdagdag ng mga prefix ng vendor sa iyong code.
-* Gumamit ng pa-reset sa CSS o kaya naman ay Normalize.css.
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- Matapos malaman ang isyu at ang nakakasakit na browser, gumamit ng isang hiwalay na estilo ng sheet na naglo-load lamang kapag ginagamit ang partikular na browser na iyon. Bagaman ang pamamaraan na ito ay nangangailangan ng pagrender sa panig ng serber.
+- Gumamit ng mga librerya kagaya ng Bootstrap na humahawak na ng mga estilo ng mga isyu para sa iyo.
+- Gumamit ng `autoprefixer` upang awtomatikong magdagdag ng mga prefix ng vendor sa iyong code.
+- Gumamit ng pa-reset sa CSS o kaya naman ay Normalize.css.
 
 ### Papaano mo inahahanda ang iyong mga pahina para sa mga browser na kulang sa tampok? Ano-ano ang mga teknik or proseso ang iyong ginagamit?
 
-* Kaaya-ayang pag-degrade - Ang pagsasagawa ng pagbuo ng isang aplikasyon para sa mga modernong browser habang tinitiyak na ito ay nananatiling punksyonal sa mas lumang mga browser.
-* progresibong pagpapahusay - Ang pagsasagawa ng pagbuo ng isang aplikasyon para sa antas ng lebel ng karanasan ng gumagamit, ngunit nagdaragdag ng mga punksyonal na pagpapahusay kapag sinusuportahan ito ng isang browser.
-* Gumamit ng [caniuse.com](https://caniuse.com/)upang suriin ang suporta sa tampok.
-* Autoprefixer para sa pagpapasok ng prefix ng awtomatikong vendor.
-* Pag-detect ng mga tampok gamit ang [Modernizr](https://modernizr.com/).
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- Kaaya-ayang pag-degrade - Ang pagsasagawa ng pagbuo ng isang aplikasyon para sa mga modernong browser habang tinitiyak na ito ay nananatiling punksyonal sa mas lumang mga browser.
+- progresibong pagpapahusay - Ang pagsasagawa ng pagbuo ng isang aplikasyon para sa antas ng lebel ng karanasan ng gumagamit, ngunit nagdaragdag ng mga punksyonal na pagpapahusay kapag sinusuportahan ito ng isang browser.
+- Gumamit ng [caniuse.com](https://caniuse.com/)upang suriin ang suporta sa tampok.
+- Autoprefixer para sa pagpapasok ng prefix ng awtomatikong vendor.
+- Pag-detect ng mga tampok gamit ang [Modernizr](https://modernizr.com/).
 
 ### Ano-ano ang mga iba't ibang pamamaraan upang matago ang nakatagong nilalaman (at gawan ng paraan na ito ay magagamit lamang ng mga mambabasa ng iskrin)?
 
 Ang mga pamamaraan na ito ay may kaugnayan sa pagkakarating (a11y).
 
-* `visibility: hidden`. Gayunpaman ang elemento ay nasa daloy pa rin ng pahina, at umuupa pa rin ng espasyo.
-* `width: 0; height: 0`. Gawin ang elemento na hindi kukuha ng anumang espasyo sa iskrin ng lahat, na magreresulta sa hindi pagpapakita nito.
-* `position: absolute; left: -99999px`. Ilagay ito sa labas ng iskrin.
-* `text-indent: -9999px`. Ito ay gagana lamang sa mga teksto sa loob ng `block` na mga elemento.
-* Metadata. Halimbawa ay sa paggamit ng Schema.org, RDF at JSON-LD.
-* WAI-ARIA. Isang W3C na teknikal na ispisipikasyon na tinutukoy kung paano madagdagan ang ang abilidad ng pag-akses ng mga pahina ng web.
+- `width: 0; height: 0`. Gawin ang elemento na hindi kukuha ng anumang espasyo sa iskrin ng lahat, na magreresulta sa hindi pagpapakita nito.
+- `position: absolute; left: -99999px`. Ilagay ito sa labas ng iskrin.
+- `text-indent: -9999px`. Ito ay gagana lamang sa mga teksto sa loob ng `block` na mga elemento.
+- Metadata. Halimbawa ay sa paggamit ng Schema.org, RDF at JSON-LD.
+- WAI-ARIA. Isang W3C na teknikal na ispisipikasyon na tinutukoy kung paano madagdagan ang ang abilidad ng pag-akses ng mga pahina ng web.
 
 Kahit na ang WAI-ARIA ay ang angkop na solusyon, Ako ay pupunta parin sa `absolute` na pagpoposisyon na paglapit, dahil mayroon itong maliit na mga problema, na gumagana para sa karamihan ng mga elemento at ito ay isang madaling pamamaraan.
 
 ###### Mga Reperensiya
 
-* https://www.w3.org/TR/wai-aria-1.1/
-* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
-* http://a11yproject.com/
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://www.w3.org/TR/wai-aria-1.1/
+- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
+- http://a11yproject.com/
 
 ### Ikaw ba ay nakagamit kailanman ng sistemang grid?, at kung gayon, Ano ang iyong mas pipiliin?
 
 Gusto ko ang `float`na batay sa sistemang grid dahil mayroon pa rin itong pinakamaraming suportado ng browser sa mga alternatibong umiiral na mga sistema (flex, grid). Ginamit na ito sa Bootstrap nang maraming taon at napatunayan na ito ay gumagana.
 
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
-
 ### Ikaw ba ay nakagamit oh nakapagpatupad na ng mga query sa mobile o mga layout na espisipik sa mobile/CSS?
 
 OO. Ang isang halimbawa ay ang pagbabago ng isang nakasalansan na pag-navigate ng pill sa isang fixed-bottom na tab na navigation na lampas sa isang tiyak yugto ng pagpatlang.
 
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
-
 ### Ikaw ba ay pamilyar sa estilong SVG?
 
 Hindi... Sa kasamaang palad
 
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
-
 ### Makapagbibigay kaba ng halimbawa ng klase ng @media maliban sa iskrin?
 
 Oo, mayroong apat na uri ng @media na mga katangian (kabilang ang _screen_):
 
-* `all` - para sa lahat ng mga aparatong uri ng media
-* `print` - para sa mga printer
-* `speech` - para sa mga nagbabasa ng iskrin na "binabasa" ang pahina ng malakas
-* `screen` -para sa mga iskrin ng kompyuter, tablet, smart-phone atbp
+- `all` - para sa lahat ng mga aparatong uri ng media
+- `print` - para sa mga printer
+- `speech` - para sa mga nagbabasa ng iskrin na "binabasa" ang pahina ng malakas
+- `screen` -para sa mga iskrin ng kompyuter, tablet, smart-phone atbp
 
 Narito ang isang halimbawa ng paggamit ng `print` na uri ng media:
 
@@ -247,9 +192,7 @@ Narito ang isang halimbawa ng paggamit ng `print` na uri ng media:
 
 ###### Mga Reperensiya
 
-* https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Syntax
 
 ### Ano-ano ang ilan sa mga "pasabog" para sa epektibong pagsusulat ng CSS?
 
@@ -261,47 +204,39 @@ Maging maingat kung aling mga katangian ng CSS ang mag-trigger ng reflow, repain
 
 ###### Mga Reperensiya
 
-* https://developers.google.com/web/fundamentals/performance/rendering/
-* https://csstriggers.com/
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://developers.google.com/web/fundamentals/performance/rendering/
+- https://csstriggers.com/
 
 ### Ano ang mga pakinabang o di-pakinabang ng paggamit ng mga preprocessors ng CSS?
 
 **Mga Bentahe:**
 
-* CSS ay ginawang mas kapanati-panatili.
-* Madaling sumulat nga mga nested na tagapili.
-* Mga variable para sa pare-pareho na pag-theme. Maaaring magbahagi ng mga file ng tema sa iba't ibang mga proyekto.
-* Mga paghalo para maka-generate ng naulit na CSS.
-* Ang paghati sa iyong code sa maramihang mga file. Ang mga file ng CSS ay maaaring hatiin din ngunit ang paggawa nito ay mangangailangan pa ng isang HTTP na kahilingan upang i-download ang bawat CSS na file.
+- CSS ay ginawang mas kapanati-panatili.
+- Madaling sumulat nga mga nested na tagapili.
+- Mga variable para sa pare-pareho na pag-theme. Maaaring magbahagi ng mga file ng tema sa iba't ibang mga proyekto.
+- Mga paghalo para maka-generate ng naulit na CSS.
+- Ang paghati sa iyong code sa maramihang mga file. Ang mga file ng CSS ay maaaring hatiin din ngunit ang paggawa nito ay mangangailangan pa ng isang HTTP na kahilingan upang i-download ang bawat CSS na file.
 
 **Mga Kasahulan:**
 
-* Nangangailangan ng mga gamit para sa pag-preprocess. Maaaring ang oras ng pag-compile ulit ay magiging.
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- Nangangailangan ng mga gamit para sa pag-preprocess. Maaaring ang oras ng pag-compile ulit ay magiging.
 
 ### Ilarawan kung ano ang iyong gusto at di gusto tungkol sa CSS na mga preprocessor na iyong nagamit.
 
 **Mga Gusto:**
 
-* Halos ang lahat ng bentahe ay nasabi na sa itaas.
-* Kaunti lang ang isinulat sa JavaScript, na gumaganap nang mahusay sa Node.
+- Halos ang lahat ng bentahe ay nasabi na sa itaas.
+- Kaunti lang ang isinulat sa JavaScript, na gumaganap nang mahusay sa Node.
 
 **Mga Hindi Gusto:**
 
-* Gumagamit ako ng Sass sa pamamagitan ng `node-sass`, na kung saan ay naka-bisa para sa LibSass na nakasulat sa C++. Ako ay madalas na mag-recompile nito kapag ako ay lumilipat sa pagitan ng mga bersyon ng node.
-* Sa maliit, ang mga variable na pangalan ay naka-prefix sa `@`, na maaaring malito sa katutubong mga keyword sa CSS tulad ng `@ media`,`@ import` at `@ font-face` na panuntunan.
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- Gumagamit ako ng Sass sa pamamagitan ng `node-sass`, na kung saan ay naka-bisa para sa LibSass na nakasulat sa C++. Ako ay madalas na mag-recompile nito kapag ako ay lumilipat sa pagitan ng mga bersyon ng node.
+- Sa maliit, ang mga variable na pangalan ay naka-prefix sa `@`, na maaaring malito sa katutubong mga keyword sa CSS tulad ng `@ media`,`@ import` at `@ font-face` na panuntunan.
 
 ### Papaano mo ipapatupad ang isang web design comp na gumagamit ng mga di pangkaraniwang font?
 
 Gumamit ng `@font-face` at tukuyin ang `font-family` para sa ibang mga `font-weight`.
 
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
-
 ### Ipaliwanag kung paano tinutukoy ng isang browser kung anu-anong mga elemento ang tumutugma sa tagapili ng CSS.
 
 Ang parteng ito ay may kaugnayan sa taas tungkol sa mahusay na pagsusulat ng CSS. Ang mga browser ay tumutugma sa mga tagapili mula sa pinaka-kanang bahagi (tagapili ng key) hanggang sa kaliwa. sinasala ng mga browser ang mga elemento sa DOM ayon sa tagapili ng, at tinatawid ang mga elemento ng magulang nito upang matukoy ang mga tugma. Kung mas maikli ang haba ng chain ng tagapili, mas mabilis na matutukoy ng browser kung tumutugma ang sangkap na ito sa tagapili.
@@ -310,23 +245,18 @@ Halimbawa ay sa tagapiling `p span` na ito, unang hahanapin ng mga browser ang l
 
 ###### Mga Reperensiya
 
-* https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
 
 ### Ilarawan ang mga elementong pseudo at talakayin kung para saan ito gagamitin.
 
 Ang CSS pseudo-element ay isang keyword na dinadagdag sa tagapili na nagbibigay-daan sa iyo ng pag-eestilo ng isang tiyak na bahagi ng piniling elemento(s). Maaari silang magamit para sa dekorasyon (`:first-line`, `:first-letter`) o pagdaragdag ng mga elemento sa markup (kasama ng `content: ...`) na hindi na kailangang baguhin pa ang markup (`:before`, `:after`).
 
-* `:first-line` at `:first-letter` ay magagamit para lagyan ng dekorasyon ang teksto.
-  \*Ginamit sa `.clearfix` na hack na ipinakita sa itaas upang magdagdag ng zero-space na elemento kasabay ang `clear: both`.
-* Mala-tatsulok na mga arrow sa tooltips ay gumagamit ng `:before` at `:after`. Hinihikayat ang paghihiwalay ng mga alalahanin dahil ang tatsulok ay itinuturing na bahagi ng estilo at hindi talaga ang DOM. Hindi talaga posible na gumuhit ng isang tatsulok na may mga estilo lamang ng CSS nang hindi gumagamit ng karagdagang elemento ng HTML.
+- `:first-line` at `:first-letter` ay magagamit para lagyan ng dekorasyon ang teksto. \*Ginamit sa `.clearfix` na hack na ipinakita sa itaas upang magdagdag ng zero-space na elemento kasabay ang `clear: both`.
+- Mala-tatsulok na mga arrow sa tooltips ay gumagamit ng `:before` at `:after`. Hinihikayat ang paghihiwalay ng mga alalahanin dahil ang tatsulok ay itinuturing na bahagi ng estilo at hindi talaga ang DOM. Hindi talaga posible na gumuhit ng isang tatsulok na may mga estilo lamang ng CSS nang hindi gumagamit ng karagdagang elemento ng HTML.
 
   ###### RMga Reperensiya
 
-* https://css-tricks.com/almanac/selectors/a/after-and-before/
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://css-tricks.com/almanac/pseudo-selectors/b/after-and-before/
 
 ### Ipaliwanag ang iyong pagkakaintindi sa modelong kahon at papaano mo pagsasabihan ang browser sa CSS na mag-render ng iyong layout sa iba't ibang modelo ng kahon.
 
@@ -334,80 +264,68 @@ Ang CSS na modelo ng kahon ay naglalarawan ng mga hugis-parihaba na kahon na bin
 
 Ang CSS na modelong kahon ay responsable sa pagkalkula ng:
 
-* Ilang ang espasyong kinakain ng elemento ng block.
-* Kung ang mga borders at / o mga palugit ay magkakapatong, o bumagsak.
-* Mga sukat ng isang kahon.
+- Ilang ang espasyong kinakain ng elemento ng block.
+- Kung ang mga borders at / o mga palugit ay magkakapatong, o bumagsak.
+- Mga sukat ng isang kahon.
 
 Ang modelo ng kahon ay may mga sumusunod na panuntunan:
 
-* Ang mga sukat ng isang elemento ng block ay kinakalkula gamit ang `lapad`,`taas`, `padding`, mga `border`, at mga `margin`.
-* Kung walang tinukoy na `taas`, ang isang elementong bloke ay magiging kasing taas ng nilalaman na naglalaman nito, kasama ang `padding` (maliban kung may mga float, na nakikita sa ibaba).
-* Kung walang tinukoy na `lapad`, ang isang hindi floated na elemento ng block ay lalawak upang magkasya ang lapad ng kanyang magulang na bawas ang `padding`.
-* Ang `taas` ng isang elemento ay kinakalkula sa pamamagitan ng`taas` ng nilalaman.
-* Ang `lapad` ng isang elemento ay kinakalkula ng `lapad` ng nilalaman.
-* Sa pamamagitan ng default, ang `padding` at mga `border`s ay hindi bahagi ng `lapad` at`taas` ng isang elemento.
+- Ang mga sukat ng isang elemento ng block ay kinakalkula gamit ang `lapad`,`taas`, `padding`, mga `border`, at mga `margin`.
+- Kung walang tinukoy na `taas`, ang isang elementong bloke ay magiging kasing taas ng nilalaman na naglalaman nito, kasama ang `padding` (maliban kung may mga float, na nakikita sa ibaba).
+- Kung walang tinukoy na `lapad`, ang isang hindi floated na elemento ng block ay lalawak upang magkasya ang lapad ng kanyang magulang na bawas ang `padding`.
+- Ang `taas` ng isang elemento ay kinakalkula sa pamamagitan ng`taas` ng nilalaman.
+- Ang `lapad` ng isang elemento ay kinakalkula ng `lapad` ng nilalaman.
+- Sa pamamagitan ng default, ang `padding` at mga `border`s ay hindi bahagi ng `lapad` at`taas` ng isang elemento.
 
 ###### Mga Reperensiya
 
-* https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
 
 ### Ano ang ginagawa ng `* { box-sizing: border-box; }`? Anu-ano ang mga pakinabang nito?
 
-* Bilang default, ang mga elemento ay may `box-sizing: content-box` na naipapatupad, at tanging ang laki ng nilalaman lang ang siyang binibilang.
-* Ang `box-sizing: border-box` ay ang siyang nagpapabago kung papaano kinakalkula ang `lapad` at `taas` ng mga elemento, kasama ang `border` at `padding` sa pagkalkula.
-* Ang `taas` ng isang elemento ay kinalkula ngayon ng lapad ng`taas` + bertikal na `padding` + bertikal na `border`.
-* Ang `lapad` ng isang elemento ay kinakalkula ngayon ng `lapad` ng nilalaman + pahalang na `padding` + pahalang na `border`.
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- Bilang default, ang mga elemento ay may `box-sizing: content-box` na naipapatupad, at tanging ang laki ng nilalaman lang ang siyang binibilang.
+- Ang `box-sizing: border-box` ay ang siyang nagpapabago kung papaano kinakalkula ang `lapad` at `taas` ng mga elemento, kasama ang `border` at `padding` sa pagkalkula.
+- Ang `taas` ng isang elemento ay kinalkula ngayon ng lapad ng`taas` + bertikal na `padding` + bertikal na `border`.
+- Ang `lapad` ng isang elemento ay kinakalkula ngayon ng `lapad` ng nilalaman + pahalang na `padding` + pahalang na `border`.
 
 ### Ano ang katangian ng CSS na `display` at pwede ka bang magbigay ng ilang mga halimbawa ng paggamit nito?
 
-* `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`.
+- `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`.
 
 TODO
 
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
-
 ### Ano ang pagkakaiba sa pagitan ng `inline` at `inline-block`?
 
 Ako ay magbibigay ng isang paghahambing sa `block` para sa mahusay na panukalang.
 
-|                                        | `block`                                                                                                                                   | `inline-block`                                                                                    | `inline`                                                                                                                                                                                                                                                                             |
-| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Sukat                                  | Pinupunan ang lapad ng lalagyan ng magulang nito.                                                                                         | Nakadepende sa nilalaman.                                                                         | Depende sa nilalaman                                                                                                                                                                                                                                                                 |
-| Pagpoposisyon                          | Magsimula sa isang bagong linya at hindi papayagan ang mga elemento ng HTML sa tabi nito (maliban nalang kapag nagdadagdag ka ng `float`) | Sumasabay kasama ang iba pang nilalaman at nagbibigay-daan sa iba pang mga elemento sa tabi nito. | Sumasabay kasama ang iba pang nilalaman at nagbibigay-daan sa iba pang mga elemento sa tabi nito.                                                                                                                                                                                    |
-| Maaaring tukuyin ang `lapad` at`taas`  | Oo                                                                                                                                        | Oo                                                                                                | Hindi. Huwag pansinin kung itinakda.                                                                                                                                                                                                                                                 |
-| Maaaring nakahanay sa `vertical-align` | Hindi                                                                                                                                     | Oo                                                                                                | Oo                                                                                                                                                                                                                                                                                   |
-| Mga margin at paddings                 | Iginagalang ang lahat ng panig.                                                                                                           | Iginagalang ang lahat ng panig.                                                                   | Iginagalang lamang ang mga pahalang na panig. Ang mga bertikal na gilid, kung tinukoy, ito ay hindi nakakaapekto sa layout. Ang bertikal na puwang na kinukuha ay depende sa `line-height`, kahit na ang`border` at `padding` ay mukhang biswal na nakikita sa paligid ng nilalaman. |
-| Float                                  | -                                                                                                                                         | -                                                                                                 | Nagiging katulad ng isang elemento ng 'block' kung saan maaari kang magtakda ng mga bertikal na margin at paddings.                                                                                                                                                                  |
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+|  | `block` | `inline-block` | `inline` |
+| --- | --- | --- | --- |
+| Sukat | Pinupunan ang lapad ng lalagyan ng magulang nito. | Nakadepende sa nilalaman. | Depende sa nilalaman |
+| Pagpoposisyon | Magsimula sa isang bagong linya at hindi papayagan ang mga elemento ng HTML sa tabi nito (maliban nalang kapag nagdadagdag ka ng `float`) | Sumasabay kasama ang iba pang nilalaman at nagbibigay-daan sa iba pang mga elemento sa tabi nito. | Sumasabay kasama ang iba pang nilalaman at nagbibigay-daan sa iba pang mga elemento sa tabi nito. |
+| Maaaring tukuyin ang `lapad` at`taas` | Oo | Oo | Hindi. Huwag pansinin kung itinakda. |
+| Maaaring nakahanay sa `vertical-align` | Hindi | Oo | Oo |
+| Mga margin at paddings | Iginagalang ang lahat ng panig. | Iginagalang ang lahat ng panig. | Iginagalang lamang ang mga pahalang na panig. Ang mga bertikal na gilid, kung tinukoy, ito ay hindi nakakaapekto sa layout. Ang bertikal na puwang na kinukuha ay depende sa `line-height`, kahit na ang`border` at `padding` ay mukhang biswal na nakikita sa paligid ng nilalaman. |
+| Float | - | - | Nagiging katulad ng isang elemento ng 'block' kung saan maaari kang magtakda ng mga bertikal na margin at paddings. |
 
 ### Ano ang pagkakaiba sa pagitan ng `relative`, `fixed`, `absolute` at elementong nakaposisyong panig sa `static`?
 
 Ang isang naka-posisyon na elemento ay isang elemento na ang na-compute na `posisyon` ay alinman sa`kamag-anak`, `absolute`,`fixed` o `malagkit`.
 
-* `static` - Ang default na posisyon; ang elemento ay dumadaloy sa pahina gaya ng karaniwan. Ang mga `taas`,`kanan`, `ilalim`,`kaliwa` at `z-index` na katangian ay hindi nalalapat.
-* `kamag-anak` - Ang posisyon ng elemento ay nababagay sa sarili nito, nang hindi binabago ang layout (at sa gayo'y nag-iiwan ng puwang para sa elemento kung saan ay hindi ito nakaposisyon).
-* `absolute` - Ang elemento ay inalis mula sa daloy ng pahina at nakaposisyon sa isang tinukoy na posisyon na may kaugnayan sa pinakamalapit na nakaposisyon na ninuno kung mayroon man, o kung hindi man sa kamag-anak sa paunang nilalaman ng bloke. Ang mga nakaposisyon na mga kahon ay maaaring magkaroon ng mga gilid, at hindi sila bumagsak sa anumang iba pang mga margin. Ang mga elementong ito ay hindi nakakaapekto sa posisyon ng iba pang mga elemento.
-* `naayos` - Ang elemento ay inalis mula sa daloy ng pahina at nakaposisyon sa isang tinukoy na posisyon na may kaugnayan sa viewport na hindi gumagalaw kapag nag-scroll.
-* `malagkit` - Ang malagkit na pagpoposisyon ay isang hybrid ng kamag-anak at nakapirming pagpoposisyon. Ang elemento ay itinuturing bilang `kamag-anak` na nakaposisyon hanggang sa lumampas ito sa tinutukoy na limitasyon, na kung saan ang puntong ito ay itinuturing na `nakatakda` na nakaposisyon.
+- `static` - Ang default na posisyon; ang elemento ay dumadaloy sa pahina gaya ng karaniwan. Ang mga `taas`,`kanan`, `ilalim`,`kaliwa` at `z-index` na katangian ay hindi nalalapat.
+- `kamag-anak` - Ang posisyon ng elemento ay nababagay sa sarili nito, nang hindi binabago ang layout (at sa gayo'y nag-iiwan ng puwang para sa elemento kung saan ay hindi ito nakaposisyon).
+- `absolute` - Ang elemento ay inalis mula sa daloy ng pahina at nakaposisyon sa isang tinukoy na posisyon na may kaugnayan sa pinakamalapit na nakaposisyon na ninuno kung mayroon man, o kung hindi man sa kamag-anak sa paunang nilalaman ng bloke. Ang mga nakaposisyon na mga kahon ay maaaring magkaroon ng mga gilid, at hindi sila bumagsak sa anumang iba pang mga margin. Ang mga elementong ito ay hindi nakakaapekto sa posisyon ng iba pang mga elemento.
+- `naayos` - Ang elemento ay inalis mula sa daloy ng pahina at nakaposisyon sa isang tinukoy na posisyon na may kaugnayan sa viewport na hindi gumagalaw kapag nag-scroll.
+- `malagkit` - Ang malagkit na pagpoposisyon ay isang hybrid ng kamag-anak at nakapirming pagpoposisyon. Ang elemento ay itinuturing bilang `kamag-anak` na nakaposisyon hanggang sa lumampas ito sa tinutukoy na limitasyon, na kung saan ang puntong ito ay itinuturing na `nakatakda` na nakaposisyon.
 
 ###### Mga Reperensiya
 
-* https://developer.mozilla.org/en/docs/Web/CSS/position
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://developer.mozilla.org/en/docs/Web/CSS/position
 
 ### Ano ang mga umiiral na framework ng CSS na ginamit mo ng lokal, o kaya naman ay sa produksyon? Papaano mo babaguhin o mapapabuti ang mga ito?
 
-* ** Bootstrap ** - Mabagal na ikot ng paglabas. Ang Bootstrap 4 ay nasa alpha sa halos dalawang taon. Magdagdag ng bahagi ng pindutan ng spinner, dahil malawak itong ginagamit.
-* ** Semantikong UI ** - Ang istraktura ng pinagmulang code ay gumagawa ng pagsadya ng tema na napakahirap maunawaan. Masakit na ipasadya sa hindi pangkaraniwang sistema ng paggawa ng tema. Hardcoded na config na landas sa loob ng librerya ng vendor. Hindi mahusay na pag-disenyo para pag-override ng mga variable na hindi katulad sa Bootstrap.
-* ** Bulma ** - Isang pulutong ng mga di-semantiko at labis na mga klase at markup ang kinakailangan. Hindi tugma ang pabalik. Ang pag-upgrade ng mga bersyon sa sumisira sa app sa banayad na asal.
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- ** Bootstrap ** - Mabagal na ikot ng paglabas. Ang Bootstrap 4 ay nasa alpha sa halos dalawang taon. Magdagdag ng bahagi ng pindutan ng spinner, dahil malawak itong ginagamit.
+- ** Semantikong UI ** - Ang istraktura ng pinagmulang code ay gumagawa ng pagsadya ng tema na napakahirap maunawaan. Masakit na ipasadya sa hindi pangkaraniwang sistema ng paggawa ng tema. Hardcoded na config na landas sa loob ng librerya ng vendor. Hindi mahusay na pag-disenyo para pag-override ng mga variable na hindi katulad sa Bootstrap.
+- ** Bulma ** - Isang pulutong ng mga di-semantiko at labis na mga klase at markup ang kinakailangan. Hindi tugma ang pabalik. Ang pag-upgrade ng mga bersyon sa sumisira sa app sa banayad na asal.
 
 ### Ikaw ba ay nakapaglaro na sa paligid ng bagong CSS Flexbox o Grid na specs?
 
@@ -419,16 +337,12 @@ Ang Grid sa ngayon ay ang pinaka-intuitive na diskarte para sa paglikha ng grid-
 
 ###### Mga Reperensiya
 
-* https://philipwalton.github.io/solved-by-flexbox/
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://philipwalton.github.io/solved-by-flexbox/
 
 ### Maipapaliwanag mo ba ang kaibahan sa pagitan ng Pag-code ng isang web site na tumutugon kumpara sa paggamit ng diskarteng mobile ang una?
 
 TODO
 
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
-
 ### Sa anong paraan naiiba ang disenyo ng tumutugon mula sa disenyo ng umaangkop?
 
 Sinusubukan ng parehong tumutugon at bumabagay na disenyo ang pag-optimize ng karanasan ng gumagamit sa iba't ibang mga device, pag-ayos para sa iba't ibang mga laki ng viewport, mga resolusyon, mga konteksto sa paggamit, mekanismo ng kontrol, at iba pa.
@@ -439,11 +353,9 @@ Ang bumabagay na disenyo ay mas katulad ng modernong kahulugan ng progresibong p
 
 ###### Mga Reperensiya
 
-* https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design
-* http://mediumwell.com/responsive-adaptive-mobile/
-* https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
+- http://mediumwell.com/responsive-adaptive-mobile/
+- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
 
 ### Ikaw ba ay nakagamit na ng mga grapikong retina? kung gayon, kelan at anu-anong mga teknik ang iyong ginamit?
 
@@ -455,9 +367,7 @@ Ang isa pang paraan ay ang paggamit ng JavaScript upang palitan ang mga attribut
 
 ###### Mga Reperensiya
 
-* https://www.sitepoint.com/css-techniques-for-retina-displays/
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://www.sitepoint.com/css-techniques-for-retina-displays/
 
 ### May kadahilanan ba na nais mong gamitin ang `translate()` kesa sa `absolute` na pag-poposisyon, o kabaliktaran? at bakit?
 
@@ -465,12 +375,10 @@ Ang `translate ()` ay isang halaga ng CSS `transform`. Ang pagpapalit ng `transf
 
 ###### Mga Reperensiya
 
-* https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
-
-[[↑] Bumalik sa taas](#mga-katanungan-sa-css)
+- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
 
 ### Ang ibang mga Kasagutan
 
-* https://neal.codes/blog/front-end-interview-css-questions
-* https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/
-* http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
+- https://neal.codes/blog/front-end-interview-css-questions
+- https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/
+- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
diff --git a/Translations/Tagalog/questions/html-questions.md b/website/i18n/tl/docusaurus-plugin-content-docs/current/html-questions.md
similarity index 62%
rename from Translations/Tagalog/questions/html-questions.md
rename to website/i18n/tl/docusaurus-plugin-content-docs/current/html-questions.md
index 51531c34e1..8b2401a7fa 100644
--- a/Translations/Tagalog/questions/html-questions.md
+++ b/website/i18n/tl/docusaurus-plugin-content-docs/current/html-questions.md
@@ -1,18 +1,12 @@
-# Mga Tanong sa HTML
-
-Mga sagot sa [Mga Tanong sa Pakikipanayam para sa Trabahong Pangfront-end - Mga Tanong sa HTML](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/html-questions.md). Malugod naming tatanggaping ang mga pull request para sa mga mungkahi at mga koreksyon
-
-* [Ano ang ginagawa ng `DOCTYPE`?](#ano-ang-ginagawa-ng-doctype)
-* [Papaano mo ihahain ang pahinang may iba't-ibang lenggwaheng nilalaman?](#papaano-mo-ihahain-ang-pahinang-may-ibat-ibang-lenggwaheng-nilalaman)
-* [Anong uri ng mga bagay ang dapat mong ingatan ukol sa pagdidisenyo o pag-develop ng mga multilingual na site?](#anong-uri-ng-mga-bagay-ang-dapat-mong-ingatan-ukol-sa-pagdidisenyo-o-pag-develop-ng-mga-multilingual-na-site)
-* [Saan maganda ang mga `data-`na katangian?](#saan-maganda-ang-mga-data-na-katangian)
-* [Isaalang-alang ang HTML5 bilang isang bukas na web platform. Ano-ano ang mga pangunahing sangkap ng HTML5?](#isaalang-alang-ang-html5-bilang-isang-bukas-na-web-platform-ano-ano-ang-mga-pangunahing-sangkap-ng-html5)
-* [Ilarawan ang pagkakaiba sa pagitan ng isang `cookie`,`sessionStorage` at `localStorage`.](#ilarawan-ang-pagkakaiba-sa-pagitan-ng-isang-cookie-sessionstorage-at-localstorage)
-* [Ilarawan ang pagkakaiba sa pagitan ng `<script>`, `<script async>` at `<script defer>`.](#ilarawan-ang-pagkakaiba-sa-pagitan-ng-script-script-async-at-script-defer)
-* [Bakit karaniwang magandang ideya na ilagay ang mga CSS `<link>` sa pagitan ng `<head> </ head>` at JS `<script>` s bago ang `/ <body>`? May alam ka bang anumang mga pagbubukod?](#bakit-karaniwang-magandang-ideya-na-ilagay-ang-mga-css-link-sa-pagitan-ng-head-head-at-js-script-s-bago-ang-body-may-alam-ka-bang-anumang-mga-pagbubukod)
-* [Ano ang progresibong pag-render?](#ano-ang-progresibong-pag-render)
-* [Bakit ka gagamit ng isang `srcset` na katangian sa isang tag ng imahe? Ipaliwanag ang proseso na ginagamit ng browser sa pagsuri ng nilalaman ng katangiang ito.](#bakit-ka-gagamit-ng-isang-srcset-na-katangian-sa-isang-tag-ng-imahe-ipaliwanag-ang-proseso-na-ginagamit-ng-browser-sa-pagsuri-ng-nilalaman-ng-katangiang-ito)
-* [Nakagamit ka na ba ng ibang lenggwahe sa pag-template ng HTML?](#nakagamit-ka-na-ba-ng-ibang-lenggwahe-sa-pag-template-ng-html)
+---
+title: Mga Tanong sa HTML
+---
+
+Mga sagot sa [Mga Tanong sa Pakikipanayam para sa Trabahong Pangfront-end - Mga Tanong sa HTML](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/html-questions.md). Malugod naming tatanggaping ang mga pull request para sa mga mungkahi at mga koreksyon
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
 
 ### Ano ang ginagawa ng `DOCTYPE`?
 
@@ -22,11 +16,9 @@ Moral ng kuwento - idagdag lamang ang `<! DOCTYPE html>` sa simula ng iyong pahi
 
 ###### Mga Reperensiya
 
-* https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
-* https://www.w3.org/QA/Tips/Doctype
-* https://quirks.spec.whatwg.org/#history
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-html)
+- https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
+- https://www.w3.org/QA/Tips/Doctype
+- https://quirks.spec.whatwg.org/#history
 
 ### Papaano mo ihahain ang pahinang may iba't-ibang lenggwaheng nilalaman?
 
@@ -38,26 +30,22 @@ Sa back end, ang HTML markup ay maglalaman ng mga `i18n` na placeholder at para
 
 ###### Mga Reperensiya
 
-* https://www.w3.org/International/getting-started/language
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-html)
+- https://www.w3.org/International/getting-started/language
 
 ### Anong uri ng mga bagay ang dapat mong ingatan ukol sa pagdidisenyo o pag-develop ng mga multilingual na site?
 
-* Gumamit ng `lang` na katangian sa iyong HTML.
-* Pag-direkta sa mga gumagamit sa kanilang katutubong wika - Payagan ang isang gumagamit na baguhin ang kanyang bansa / wika nang walang abala.
-* Ang teksto sa mga imahe ay hindi isang nasusukat na diskarte - Ang paglalagay ng teksto sa isang imahe ay isang sikat pa rin na paraan upang makakuha ng mga kagandahan, di-systemang mga font na ipapakita sa anumang kompyuter. Gayunpaman upang i-translate ang teksto ng imahe, ang bawat string ng teksto ay kailangang magkaroon ng isang hiwalay na imahe na ililikha para sa bawat wika. Anumang bagay na higit pa sa isang dakot ng kapalit na tulad nito ay maaaring mabilis na mawalan ng kontrol.
-* Maging maingat sa mga isyu ng layout o overflow sa disenyo. Pinakamainam na iwasan ang pagdisenyo kung saan ang halaga ng teksto ay makakasira sa isang disenyo. Ang mga bilang ng mga character ay nakikipaglaro sa mga bagay na tulad ng mga headline, mga label, at mga pindutan. Mas mababa ang mga ito sa isang isyu sa libreng dumadaloy na teksto tulad ng teksto ng katawan o mga komento.
-* Pag-isipan kung paano nakikita ang mga kulay - Ang mga kulay ay itinuturing na isang paghatol din sa mga wika at kultura. Ang disenyo ay dapat gumamit ng kulay kung ano man ang naaangkop.
-* Mga petsa at pera sa pag-format - Ang mga petsa ng kalendaryo ay ipinapahayag minsan sa iba't ibang paraan. Halimbawa, "Mayo 31, 2012" sa U.S. kumpara sa "31 Mayo 2012" sa mga bahagi ng Europa.
-* Huwag pagsama-samahin ang mga isinalin na mga string - Huwag gumawa ng anumang bagay tulad ng `"Ang petsa ngayon ay "+ date`.Ito ay makasisira sa mga wika na may iba't ibang pagkasunod-sunod ng mga salita. Gumamit ng isang string ng template na may mga parameter na pagpapalit para sa bawat wika sa halip. Halimbawa, tingnan ang sumusunod na dalawang pangungusap sa wikang Ingles at Tsino: `Maglalakbay ako sa {% date%}` at `{% date%} 我 会 出发`. Tandaan na ang posisyon ng variable ay naiiba dahil sa mga tuntunin ng grammar ng wika.
-* Direksyon sa pagbabasa ng wika - Sa Ingles, binabasa namin mula sa kaliwa papuntang kanan, mula itaas papuntang pailalim, habang sa tradisyunal na Hapon naman, ang teksto ay binabasa nang pababa, mula kanan papuntang kaliwa.
+- Gumamit ng `lang` na katangian sa iyong HTML.
+- Pag-direkta sa mga gumagamit sa kanilang katutubong wika - Payagan ang isang gumagamit na baguhin ang kanyang bansa / wika nang walang abala.
+- Ang teksto sa mga imahe ay hindi isang nasusukat na diskarte - Ang paglalagay ng teksto sa isang imahe ay isang sikat pa rin na paraan upang makakuha ng mga kagandahan, di-systemang mga font na ipapakita sa anumang kompyuter. Gayunpaman upang i-translate ang teksto ng imahe, ang bawat string ng teksto ay kailangang magkaroon ng isang hiwalay na imahe na ililikha para sa bawat wika. Anumang bagay na higit pa sa isang dakot ng kapalit na tulad nito ay maaaring mabilis na mawalan ng kontrol.
+- Maging maingat sa mga isyu ng layout o overflow sa disenyo. Pinakamainam na iwasan ang pagdisenyo kung saan ang halaga ng teksto ay makakasira sa isang disenyo. Ang mga bilang ng mga character ay nakikipaglaro sa mga bagay na tulad ng mga headline, mga label, at mga pindutan. Mas mababa ang mga ito sa isang isyu sa libreng dumadaloy na teksto tulad ng teksto ng katawan o mga komento.
+- Pag-isipan kung paano nakikita ang mga kulay - Ang mga kulay ay itinuturing na isang paghatol din sa mga wika at kultura. Ang disenyo ay dapat gumamit ng kulay kung ano man ang naaangkop.
+- Mga petsa at pera sa pag-format - Ang mga petsa ng kalendaryo ay ipinapahayag minsan sa iba't ibang paraan. Halimbawa, "Mayo 31, 2012" sa U.S. kumpara sa "31 Mayo 2012" sa mga bahagi ng Europa.
+- Huwag pagsama-samahin ang mga isinalin na mga string - Huwag gumawa ng anumang bagay tulad ng `"Ang petsa ngayon ay "+ date`.Ito ay makasisira sa mga wika na may iba't ibang pagkasunod-sunod ng mga salita. Gumamit ng isang string ng template na may mga parameter na pagpapalit para sa bawat wika sa halip. Halimbawa, tingnan ang sumusunod na dalawang pangungusap sa wikang Ingles at Tsino: `Maglalakbay ako sa {% date%}` at `{% date%} 我 会 出发`. Tandaan na ang posisyon ng variable ay naiiba dahil sa mga tuntunin ng grammar ng wika.
+- Direksyon sa pagbabasa ng wika - Sa Ingles, binabasa namin mula sa kaliwa papuntang kanan, mula itaas papuntang pailalim, habang sa tradisyunal na Hapon naman, ang teksto ay binabasa nang pababa, mula kanan papuntang kaliwa.
 
 ###### Mga Reperensiya
 
-* https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-html)
+- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
 
 ### Saan maganda ang mga `data-`na katangian?
 
@@ -67,63 +55,55 @@ These days, using `data-` attributes is not encouraged. One reason is that users
 
 ###### Mga Reperensiya
 
-* http://html5doctor.com/html5-custom-data-attributes/
-* https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-html)
+- http://html5doctor.com/html5-custom-data-attributes/
+- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
 
 ### Isaalang-alang ang HTML5 bilang isang bukas na web platform. Ano-ano ang mga pangunahing sangkap ng HTML5?
 
-* Mga semantika - Nagpapahintulot sa iyo na ilarawan nang mas tiyak kung ano ang nilalaman.
-* Pagkakakonekta - Binibigyang-daan ka na makipag-ugnay sa serber sa mga bago at makabagong pamamaraan.
-* Offline at imbakan - Pinapayagan ang mga webpage na mag-imbak ng data sa lokal na client-side at mag-operate sa paraang offline nang mas mahusay.
-* Multimedia - Paggawa ng mga pangmamamayang de-kalidad na video at audio sa Open Web.
-* 2D / 3D na mga grapiks at mga effects - Pinapayagan ang mas malawak na hanay ng mga pagpipilian sa pagtatanghal.
-* Pagsasagawa at pagsasama - Pagbibigay ng mabilis na pag-optimize at mas mahusay na paggamit ng hardware sa kompyuter.
-* Akses ng device - Nagpapahintulot para sa paggamit ng iba't ibang mga input at output na aparato.
-* Pag-istilo - Pagpapaalam sa mga may-akda na magsulat ng mas sopistikadong mga tema.
+- Mga semantika - Nagpapahintulot sa iyo na ilarawan nang mas tiyak kung ano ang nilalaman.
+- Pagkakakonekta - Binibigyang-daan ka na makipag-ugnay sa serber sa mga bago at makabagong pamamaraan.
+- Offline at imbakan - Pinapayagan ang mga webpage na mag-imbak ng data sa lokal na client-side at mag-operate sa paraang offline nang mas mahusay.
+- Multimedia - Paggawa ng mga pangmamamayang de-kalidad na video at audio sa Open Web.
+- 2D / 3D na mga grapiks at mga effects - Pinapayagan ang mas malawak na hanay ng mga pagpipilian sa pagtatanghal.
+- Pagsasagawa at pagsasama - Pagbibigay ng mabilis na pag-optimize at mas mahusay na paggamit ng hardware sa kompyuter.
+- Akses ng device - Nagpapahintulot para sa paggamit ng iba't ibang mga input at output na aparato.
+- Pag-istilo - Pagpapaalam sa mga may-akda na magsulat ng mas sopistikadong mga tema.
 
 ###### Mga Reperensiya
 
-* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-html)
+- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
 
 ### Ilarawan ang pagkakaiba sa pagitan ng isang `cookie`,`sessionStorage` at `localStorage`.
 
 Ang lahat ng nabanggit na mga teknolohiya ay ang mahahalagang mekanismo ng imbakan sa parte ng kliyente. Ang mga ito ay maaari lamang mag-imbak ng mga halaga bilang mga string.
 
-|                                                 | `cookie`                                                                      | `localStorage`         | `sessionStorage` |
-| ----------------------------------------------- | ----------------------------------------------------------------------------- | ---------------------- | ---------------- |
-| Tagasimula                                      | Kliyente o serber. Ang serber ay pwedeng gumamit ng `Set-Cookie` na header    | Kliyente               | Kliyente         |
-| Pag-expire                                      | Mano-manong pag-set                                                           | Habang buhay           | Nasa tab malapit |
-| Patuloy sa lahat ng mga sesyon ng browser       | Depende sa kung ang panahon nng pag-expire ay itinakda                        | Oo                     | Hindi            |
-| Ipinadala sa server sa bawat kahilingan ng HTTP | Ang mga cookies ay awtomatikong ipinadala sa pamamagitan ng `Cookie`na header | Hindi                  | Hindi            |
-| Kapasidad (kada domain)                         | 4kb                                                                           | 5MB                    | 5MB              |
-| kayang i-aakses                                 | Kahit na anong bintana                                                        | Kahit na anong bintana | Parehong tab     |
+|  | `cookie` | `localStorage` | `sessionStorage` |
+| --- | --- | --- | --- |
+| Tagasimula | Kliyente o serber. Ang serber ay pwedeng gumamit ng `Set-Cookie` na header | Kliyente | Kliyente |
+| Pag-expire | Mano-manong pag-set | Habang buhay | Nasa tab malapit |
+| Patuloy sa lahat ng mga sesyon ng browser | Depende sa kung ang panahon nng pag-expire ay itinakda | Oo | Hindi |
+| Ipinadala sa server sa bawat kahilingan ng HTTP | Ang mga cookies ay awtomatikong ipinadala sa pamamagitan ng `Cookie`na header | Hindi | Hindi |
+| Kapasidad (kada domain) | 4kb | 5MB | 5MB |
+| kayang i-aakses | Kahit na anong bintana | Kahit na anong bintana | Parehong tab |
 
 ###### Mga Reperensiya
 
-* https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
-* http://tutorial.techaltum.com/local-and-session-storage.html
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-html)
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
+- http://tutorial.techaltum.com/local-and-session-storage.html
 
 ### Ilarawan ang pagkakaiba sa pagitan ng `<script>`, `<script async>` at `<script defer>`.
 
-* `<script>` - Ang pag-parse ng HTML ay naka-block, ang script ay kinuha at agad na pinaandar, ang pag-parse ng HTML ay ipagpapatuloy pagkatapos na maisagawa ang script.
-* `<script async>` - Ang script ay kukunin na kahilera sa pag-parse ng HTML at maisagawa sa lalong madaling panahon na ito ay magagamit (may potensyal bago makumpleto ang pag-parse ng HTML). Gumamit ng `async` kapag ang script ay malaya sa anumang iba pang mga script sa pahina, halimbawa ay mga analitika.
-* `<script defer>` - Ang script ay kukuha ng kahanay sa pag-parse ng HTML at isasagawa kapag natapos na ang pahina sa pag-parse. Kung maraming ganito, ang bawat ipinagpaliban na script ay ipapagana ayon sa pagkakasunud-sunod sa panahong itoy nasagupaan sa dokumento. Kung ang isang script ay umaasa sa isang ganap na nai-parse na DOM, ang `defer` na katangian ay magiging kapaki-pakinabang sa pagtitiyak na ang HTML ay ganap na ma-parse bago pa man isagawa. Hindi gaanong naiiba ang paglagay ng normal na `<script>` sa dulo ng `` body '`. Ang isang ipinagpaliban na script ay hindi dapat maglalaman ng`document.write`.
+- `<script>` - Ang pag-parse ng HTML ay naka-block, ang script ay kinuha at agad na pinaandar, ang pag-parse ng HTML ay ipagpapatuloy pagkatapos na maisagawa ang script.
+- `<script async>` - Ang script ay kukunin na kahilera sa pag-parse ng HTML at maisagawa sa lalong madaling panahon na ito ay magagamit (may potensyal bago makumpleto ang pag-parse ng HTML). Gumamit ng `async` kapag ang script ay malaya sa anumang iba pang mga script sa pahina, halimbawa ay mga analitika.
+- `<script defer>` - Ang script ay kukuha ng kahanay sa pag-parse ng HTML at isasagawa kapag natapos na ang pahina sa pag-parse. Kung maraming ganito, ang bawat ipinagpaliban na script ay ipapagana ayon sa pagkakasunud-sunod sa panahong itoy nasagupaan sa dokumento. Kung ang isang script ay umaasa sa isang ganap na nai-parse na DOM, ang `defer` na katangian ay magiging kapaki-pakinabang sa pagtitiyak na ang HTML ay ganap na ma-parse bago pa man isagawa. Hindi gaanong naiiba ang paglagay ng normal na `<script>` sa dulo ng `` body '`. Ang isang ipinagpaliban na script ay hindi dapat maglalaman ng`document.write`.
 
 Tandaan: Ang mga katangian ng `async` at `defer` ay binabalewala para sa mga script na walang katangian na `src`.
 
 ###### Mga Reperensiya
 
-* http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
-* https://stackoverflow.com/questions/10808109/script-tag-async-defer
-* https://bitsofco.de/async-vs-defer/
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-html)
+- http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
+- https://stackoverflow.com/questions/10808109/script-tag-async-defer
+- https://bitsofco.de/async-vs-defer/
 
 ### Bakit karaniwang magandang ideya na ilagay ang mga CSS `<link>` sa pagitan ng `<head> </ head>` at JS `<script>` s bago ang `/ <body>`? May alam ka bang anumang mga pagbubukod?
 
@@ -139,9 +119,7 @@ Ang isang pagbubukod para sa pagpoposisyon ng mga `<script>` sa baba ay kapag an
 
 ###### Mga Reperensiya
 
-* https://developer.yahoo.com/performance/rules.html#css_top
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-html)
+- https://developer.yahoo.com/performance/rules.html#css_top
 
 ### Ano ang progresibong pag-render?
 
@@ -151,31 +129,24 @@ Ito ay ginagamit ng mas laganap noong mga araw na wala pang broadband internet n
 
 Mga halimbawa ng naturang pamamaraan:
 
-* Mabagal na pag-load ng mga imahe - Ang lahat ng mga imahe sa pahina ay hindi nag-load ng sabay-sabay. Ang JavaScript ay gagamitin upang mag-load ng isang imahe kapag nag-scroll ang gumagamit sa bahagi ng pahina na nagpapakita ng imahe.
-* Pag-prioritize ng nakikitang nilalaman (o pag-render sa itaas ng tiklop) - Isama lamang ang pinakamaliit na CSS / nilalaman / script na kailangan para sa dami ng pahina na mai-render sa unang gumagamit ng browser upang ipakita nang mabilis hangga't maaari, maaari mong gamitin ang ipinagpaliban na script o makinig para sa kaganapan ng `DOMContentLoaded` /` load ' upang mag-load sa iba pang mga mapagkukunan at nilalaman.
-* Mga fragment ng Async HTML - Ang mga bahagi ng HTML sa pag-flush sa browser habang ginagawa ang pahina sa back end. Ang mga higit pang mga detalye sa pamamaraan ay matatagpuan [dito](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
+- Mabagal na pag-load ng mga imahe - Ang lahat ng mga imahe sa pahina ay hindi nag-load ng sabay-sabay. Ang JavaScript ay gagamitin upang mag-load ng isang imahe kapag nag-scroll ang gumagamit sa bahagi ng pahina na nagpapakita ng imahe.
+- Pag-prioritize ng nakikitang nilalaman (o pag-render sa itaas ng tiklop) - Isama lamang ang pinakamaliit na CSS / nilalaman / script na kailangan para sa dami ng pahina na mai-render sa unang gumagamit ng browser upang ipakita nang mabilis hangga't maaari, maaari mong gamitin ang ipinagpaliban na script o makinig para sa kaganapan ng `DOMContentLoaded` /` load ' upang mag-load sa iba pang mga mapagkukunan at nilalaman.
+- Mga fragment ng Async HTML - Ang mga bahagi ng HTML sa pag-flush sa browser habang ginagawa ang pahina sa back end. Ang mga higit pang mga detalye sa pamamaraan ay matatagpuan [dito](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/).
 
 ###### Mga Reperensiya
 
-* https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
-* http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-html)
+- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
+- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
 
 ### Bakit ka gagamit ng isang `srcset` na katangian sa isang tag ng imahe? Ipaliwanag ang proseso na ginagamit ng browser sa pagsuri ng nilalaman ng katangiang ito.
 
 TODO
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-html)
-
 ### Nakagamit ka na ba ng ibang lenggwahe sa pag-template ng HTML?
 
 Oo, Pug (dating Jade), ERB, Slim, Handlebars, Jinja, Liquid, upang pangalanan lamang ang ilan. Sa palagay ko, ang mga ito ay higit pa o mas mababa na parehong nagbibigay ng katulad na pag-andar ng nilalamang tumatakas at kapaki-pakinabang na mga pag-sala para sa pagmamanipula ng datos na ipapakita. Ang karamihan sa mga engine sa pag-template ay magpapahintulot din sa iyo na mag-inject ng iyong sariling mga pag-sala sa kaganapan na kailangan mo ng pasadyang pagproseso bago ipakita.
-[[↑] Bumalik sa taas](#mga-tanong-sa-html)
 
 ### Mga Ibang Sagot
 
-* https://neal.codes/blog/front-end-interview-questions-html/
-* http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
-
----
+- https://neal.codes/blog/front-end-interview-questions-html/
+- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
diff --git a/Translations/Tagalog/questions/javascript-questions.md b/website/i18n/tl/docusaurus-plugin-content-docs/current/javascript-questions.md
similarity index 69%
rename from Translations/Tagalog/questions/javascript-questions.md
rename to website/i18n/tl/docusaurus-plugin-content-docs/current/javascript-questions.md
index 00cff2ba60..edb9190025 100644
--- a/Translations/Tagalog/questions/javascript-questions.md
+++ b/website/i18n/tl/docusaurus-plugin-content-docs/current/javascript-questions.md
@@ -1,75 +1,24 @@
-## Mga Tanong sa JS
-
-Mga Sagot sa [Mga Tanong sa Pakikipanayam sa Trabahong Pangfront-end - Mga Tanong sa JS](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/javascript-questions.md). Ang mga pull request para sa mga suhestyon at koreksyon ay malugod na tatanggapin
-
-* [Ipaliwanag ang delegasyon ng kaganapan](#ipaliwanag-ang-delegasyon-ng-kaganapan)
-* [Ipaliwanag kung paano gumagana ang `this` na ito sa JavaScript](#ipaliwanag-kung-paano-gumagana-ang-this-na-ito-sa-javascript)
-* [Ipaliwanag kung paano gumagana ang prototypal na pagmamana](#ipaliwanag-kung-paano-gumagana-ang-prototypal-na-pagmamana)
-* [Ano ang iyong naiisip sa AMD laban sa CommonJS?](#ano-ang-iyong-naiisip-sa-amd-laban-sa-commonjs)
-* [Ipaliwanag kung bakit ang mga sumusunod ay hindi gumagana bilang isang IIFE: `function foo(){ }();`. Ano ang kailangang baguhin upang gawing maayos itong IIFE?](#ipaliwanag-kung-bakit-ang-mga-sumusunod-ay-hindi-gumagana-bilang-isang-iife-function-foo--ano-ang-kailangang-baguhin-upang-gawing-maayos-itong-iife)
-* [Ano ang kaibahan sa pagitan ng isang variable na: `null`, `undefined` o hindi naipahayag? Paano mo gagawin ang pag-check para sa alinman sa mga kalagayang ito?](#ano-ang-kaibahan-sa-pagitan-ng-isang-variable-na-null-undefined-o-hindi-naipahayag-paano-mo-gagawin-ang-pag-check-para-sa-alinman-sa-mga-kalagayang-ito)
-* [Ano ang pagsasara, at paano mo gagamitin ang isa sa mga ito?](#ano-ang-pagsasara-at-paano-mo-gagamitin-ang-isa-sa-mga-ito)
-* [Mailalarawan mo ba ang pangunahing pagkakaiba sa pagitan ng isang `.forEach` na loop at isang `.Map()` na loop at bakit kailangan mo lang pumili ng isa mula sa dalawa?](#mailalarawan-mo-ba-ang-pangunahing-pagkakaiba-sa-pagitan-ng-isang-foreach-na-loop-at-isang-map-na-loop-at-bakit-kailangan-mo-lang-pumili-ng-isa-mula-sa-dalawa?)
-* [Ano ang isang tipikal na kaso ng paggamit para sa mga hindi kilalang punksyon?](#ano-ang-isang-tipikal-na-kaso-ng-paggamit-para-sa-mga-hindi-kilalang-punksyon)
-* [Paano mo inaayos ang iyong code? (modular na pattern, makalumang pagmamana?)](#paano-mo-inaayos-ang-iyong-code-modular-na-pattern-makalumang-pagmamana)
-* [Ano ang pagkakaiba sa pagitan ng mga host na bagay at mga likas na bagay?](#ano-ang-pagkakaiba-sa-pagitan-ng-mga-host-na-bagay-at-mga-likas-na-bagay)
-* [Kaibahan sa pagitan ng: punksyon na `Person(){}`, `var person = Person()`, at `var person = new Person()`?](#kaibahan-sa-pagitan-ng-punksyon-na-person-var-person--person-var-person--new-person)
-* [Ano ang pagkakaiba sa pagitan ng `.call` at `.apply`?](#ano-ang-pagkakaiba-sa-pagitan-ng-call-at-apply)
-* [Ipaliwanag ang `Function.prototype.bind`.](#ipaliwanag-ang-functionprototypebind)
-* [Kelan ka gagamit ng `document.write()`?](#kelan-ka-gagamit-ng-documentwrite)
-* [Ano ang kaibahan sa pagitan ng pagtukoy na tampok, tampok na pagkakilala, at paggamit ng UA na string?](#ano-ang-kaibahan-sa-pagitan-ng-pagtukoy-na-tampok-tampok-na-pagkakilala-at-paggamit-ng-Uua-na-string)
-* [Ipaliwanag ang Ajax sa mas detalyadong pamamaraan hangga't maaari.](#ipaliwanag-ang-ajax-sa-mas-detalyadong-pamamaraan-hanggat-maaari)
-* [Ano ang mga kalamangan at di-kalamangan ng paggamit ng Ajax?](#ano-ang-mga-kalamangan-at-di-kalamangan-ng-paggamit-ng-ajax)
-* [Ipaliwanag kung papaano gumagana ang JSONP (at kung bakit hindi talaga Ajax).](#ipaliwanag-kung-papaano-gumagana-ang-jsonp-at-kung-bakit-hindi-talaga-ajax)
-* [Ikaw ba ay nakagamit na ng JavaScript sa pag-template? Kung gayon, anong mga librerya ang ginamit mo?](#ikaw-ba-ay-nakagamit-na-ng-javascript-sa-pag-template-kung-gayon-anong-mga-librerya-ang-ginamit-mo)
-* [Ipaliwanag ang "hoisting".](#ipaliwanag-ang-hoisting)
-* [Ilarawan ang kaganapan ng pagbubwak.](#ilarawan-ang-kaganapan-ng-pagbubwak)
-* [Ano ang pagkakaiba sa pagitan ng isang "katangian" at isang "propyedad"?](#ano-ang-pagkakaiba-sa-pagitan-ng-isang-katangian-at-isang-propyedad)
-* [Bakit ang pagpapalawak ng mga built-in na JavaScript na mga bagay ay hindi isang magandang ideya?](#bakit-ang-pagpapalawak-ng-mga-built-in-na-javascript-na-mga-bagay-ay-hindi-isang-magandang-ideya)
-* [Pagkakaiba sa pagitan ng kaganapan ng `pag-load` ng dokumento at dokumento ng `DOMContentLoaded` na kaganapan?](#pagkakaiba-sa-pagitan-ng-kaganapan-ng-pag-load-ng-dokumento-at-dokumento-ng-domcontentloaded-na-kaganapan)
-* [Ano ang pagkakaiba sa pagitan ng `==` at `===`?](#ano-ang-pagkakaiba-sa-pagitan-ng--at-)
-* [Ipaliwanag ang patakaran na pareho pareho dapat ang pinanggalingan tungkol sa JavaScript.](#ipaliwanag-ang-patakaran-na-pareho-pareho-dapat-ang-pinanggalingan-tungkol-sa-javascript)
-* [Paganahin ito:](#paganahin-ito)
-* [Bakit tinatawag itong isang ternary na ekspresyon, ano ang ibig sabihin ng salitang "Ternary"?](#bakit-tinatawag-itong-isang-ternary-na-ekspresyon-ano-ang-ibig-sabihin-ng-salitang-ternary)
-* [Ano ang `"use strict";`? ano ang mga bentahe at di-bentahe sa paggamit nito?](#ano-ang-use-strict-ano-ang-mga-bentahe-at-di-bentahe-sa-paggamit-nito)
-* [Gumawa ng para sa loop na mag-iterate hanggang sa 100 habang mag-ouput ng "fizz" sa multiples ng 3, "buzz" sa pagmultiplika ng 5 at "fizzbuzz" sa pagmultiplika ng 3 at 5](#gumawa-ng-para-sa-loop-na-mag-iterate-hanggang-sa-100-habang-mag-ouput-ng-fizz-sa-multiples-ng-3-buzz-sa-pagmultiplika-ng-5-at-fizzbuzz-sa-pagmultiplika-ng-3-at-5)
-* [Bakit, sa pangkalahatan, isang magandang ideya na iwanan ang pandaigdigang saklaw ng isang website bilang kung ano man ito at hindi kailanman na galawin ito?](#bakit-sa-pangkalahatan-isang-magandang-ideya-na-iwanan-ang-pandaigdigang-saklaw-ng-isang-website-bilang-kung-ano-man-ito-at-hindi-kailanman-na-galawin-ito)
-* [Bakit mo gagamitin ang isang bagay tulad ng `load` na kaganapan? Mayroon bang mga di-bentahe ang kaganapang ito? May alam ka bang anumang mga alternatibo, at bakit mo gagamitin ang mga ito?](#bakit-mo-gagamitin-ang-isang-bagay-tulad-ng-load-na-kaganapan-mayroon-bang-mga-di-bentahe-ang-kaganapang-ito-may-alam-ka-bang-anumang-mga-alternatibo-at-bakit-mo-gagamitin-ang-mga-ito)
-* [Ipaliwanag kung ano ang isang solong pahina na app at kung paano gumawa ng isang SEO-friendly.](#ipaliwanag-kung-ano-ang-isang-solong-pahina-na-app-at-kung-paano-gumawa-ng-isang-seo-friendly)
-* [Ano ang lawak ng iyong karanasan sa mga Pangako at o ang kanilang mga polyfill?](#ano-ang-lawak-ng-iyong-karanasan-sa-mga-pangako-at-o-ang-kanilang-mga-polyfill)
-* [Ano ang mga kalamangan at kahinaan ng paggamit ng mga Pangako sa halip ng mga callback?](#ano-ang-mga-kalamangan-at-kahinaan-ng-paggamit-ng-mga-pangako-sa-halip-ng-mga-callback?)
-* [Ano ang ilan sa mga pakinabang o di-pakinabang ng pagsulat ng JavaScript code sa isang wika na naka-compile sa JavaScript?](#ano-ang-ilan-sa-mga-pakinabang-o-di-pakinabang-ng-pagsulat-ng-javascript-code-sa-isang-wika-na-naka-compile-sa-javascript)
-* [Anong mga kagamitan at pamamaraan ang ginagamit mo sa pag-debug ng JavaScript na code?](#anong-mga-kagamitan-at-pamamaraan-ang-ginagamit-mo-sa-pag-debug-ng-javascript-na-code)
-* [Anong mga pag-construct ng wika ang ginagamit mo para sa pag-ulit sa mga katangian ng bagay at mga item na array?](#anong-mga-pag-construct-ng-wika-ang-ginagamit-mo-para-sa-pag-ulit-sa-mga-katangian-ng-bagay-at-mga-item-na-array)
-* [Ipaliwanag ang pagkakaiba sa pagitan ng mga bagay na nababago at hindi nababago.](#ipaliwanag-ang-pagkakaiba-sa-pagitan-ng-mga-bagay-na-nababago-at-hindi-nababago)
-* [Ipaliwanag ang pagkakaiba sa pagitan ng sabay at hindi sabay na punksiyon.](#ipaliwanag-ang-pagkakaiba-sa-pagitan-ng-sabay-at-hindi-sabay-na-punksiyon)
-* [Ano ang loop na kaganapan? Ano ang pagkakaiba sa pagitan ng call na stack at queue ng gawain?](#ano-ang-loop-na-kaganapan-ano-ang-pagkakaiba-sa-pagitan-ng-call-na-stack-at-queue-ng-gawain)
-* [Ipaliwanag ang mga pagkakaiba sa paggamit ng `foo` sa pagitan ng `function foo() {}` at `var foo = function() {}`](#ipaliwanag-ang-mga-pagkakaiba-sa-paggamit-ng-foo-sa-pagitan-ng-function-foo--at-var-foo--function-)
-* [Ano ang mga pagkakaiba sa pagitan ng mga variable na nilikha sa pamamagitan ng paggamit ng `let`,`var` o `const`?](#ano-ang-mga-pagkakaiba-sa-pagitan-ng-mga-variable-na-nilikha-sa-pamamagitan-ng-paggamit-ng-let-var-o-const)
-* [Ano ang mga pagkakaiba sa pagitan ng ES6 na class at mga ES5 na taga-construct na punksyon?](#ano-ang-mga-pagkakaiba-sa-pagitan-ng-es6-na-class-at-mga-es5-na-taga-construct-na-punksyon)
-* [May maaalok ka bang isang kaso ng paggamit para sa bagong arrow => sintaks ng punksyon? Paano naiiba ang bagong sintaks na ito sa iba pang mga punksyon?](#may-maaalok-ka-bang-isang-kaso-ng-paggamit-para-sa-bagong-arrow--sintaks-ng-punksyon-Paano-naiiba-ang-bagong-sintaks-na-ito-sa-iba-pang-mga-punksyon)
-* [Ano ang bentahe para sa paggamit ng sintaks na arrow para sa isang paraan sa isang taga-construct?](#ano-ang-bentahe-para-sa-paggamit-ng-sintaks-na-arrow-para-sa-isang-paraan-sa-isang-taga-construct)
-* [Ano ang kahulugan ng isang mas mataas na hanay na punksyon?](#ano-ang-kahulugan-ng-isang-mas-mataas-na-hanay-na-punksyon)
-* [Makapagbibigaay kaba ng isang halimbawa para sa pag-destructure ng isang bagay o isang array?](#makapagbibigaay-kaba-ng-isang-halimbawa-para-sa-pag-destructure-ng-isang-bagay-o-isang-array)
-* [Ang literal na ES6 na template ay nag-aalok ng maraming kakayahan na umangkop sa pagbuo ng mga string, maaari ka bang makapagbigay ng isang halimbawa?](#ang-literal-na-es6-na-template-ay-nag-aalok-ng-maraming-kakayahan-na-umangkop-sa-pagbuo-ng-mga-string-maaari-ka-bang-makapagbigay-ng-isang-halimbawa)
-* [Makapagbibigay kaba ng isang halimbawa ng isang punksyon na curry at kung bakit ang sintaks na ito ay nag-aalok ng isang kalamangan?](#makapagbibigay-kaba-ng-isang-halimbawa-ng-isang-punksyon-na-curry-at-kung-bakit-ang-sintaks-na-ito-ay-nag-aalok-ng-isang-kalamangan)
-* [Ano ang mga pakinabang ng paggamit ng spread na sintaks at kung paano ito naiiba mula sa rest na sintaks?](#ano-ang-mga-pakinabang-ng-paggamit-ng-spread-na-sintaks-at-kung-paano-ito-naiiba-mula-sa-rest-na-sintaks)
-* [Paano ka makakabahagi ng code sa pagitan ng mga file?](#paano-ka-makakabahagi-ng-code-sa-pagitan-ng-mga-file)
-* [Bakit gusto mong lumikha ng mga statik na miyembro ng klase?](#bakit-gusto-mong-lumikha-ng-mga-statik-na-miyembro-ng-klase)
+---
+title: Mga Tanong sa JS
+---
+
+Mga Sagot sa [Mga Tanong sa Pakikipanayam sa Trabahong Pangfront-end - Mga Tanong sa JS](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/javascript-questions.md). Ang mga pull request para sa mga suhestyon at koreksyon ay malugod na tatanggapin
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
 
 ### Ipaliwanag ang delegasyon ng kaganapan
 
 Ang delegasyon ng kaganapan ay isang pamamaraan na kinasasangkutan ng pagdaragdag ng mga tagapakinig ng kaganapan sa isang elemento ng magulang sa halip na idagdag ang mga ito sa mga kaapu-apuhan na elemento. Ang tagapakinig ay titira kapag ang kaganapan ay na-trigger sa mga kaapu-apuhan na sangkap dahil sa kaganapang pagbulubok sa DOM. Ang mga pakinabang ng pamamaraang ito ay:
 
-* Ang bakas ng memorya ay bababa dahil ang isang nag-iisang humahawak ay kailangan sa elemento ng magulang, sa halip na mag-attach sa mga humahawak ng kaganapan sa bawat inapo.
-* Hindi na kailangang buksan ang humahawak mula sa mga elemento na aalisin at itali ang kaganapan para sa mga bagong elemento.
+- Ang bakas ng memorya ay bababa dahil ang isang nag-iisang humahawak ay kailangan sa elemento ng magulang, sa halip na mag-attach sa mga humahawak ng kaganapan sa bawat inapo.
+- Hindi na kailangang buksan ang humahawak mula sa mga elemento na aalisin at itali ang kaganapan para sa mga bagong elemento.
 
 ###### Mga Reperensiya
 
-* https://davidwalsh.name/event-delegate
-* https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://davidwalsh.name/event-delegate
+- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
 
 ### Ipaliwanag kung paano gumagana ang `this` na ito sa JavaScript
 
@@ -86,21 +35,17 @@ Para sa malalim na pagpapaliwanag, tingnan ang kanyang [artikulo sa Medium](http
 
 ###### Mga Reperensiya
 
-* https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
-* https://stackoverflow.com/a/3127440/1751946
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
+- https://stackoverflow.com/a/3127440/1751946
 
 ### Ipaliwanag kung paano gumagana ang prototypal na pagmamana
 
-Ito ay isang pangkaraniwan na tanong sa pakikipanayam tungkol sa JavaScript. Ang lahat ng mga JavaScript na mga bagay ay may isang `prototype` na propyedad, iyon ay isang reperensiya sa ibang bagay. Kapag ang isang propyedad ay na-akses sa isang bagay at kung ang propyedad ay hindi natagpuan sa bagay na iyon, tinitingnan ng engine ng JavaScript ang `prototype` ng object, at ang`prototype` ng `prototype` at iba pa, hanggang sa matagpuan nito ang tinukoy ng propyedad sa isa sa `prototype` o hanggang sa ito ay umabot sa dulo ng prototype na chain. Ang pag-uugali na ito ay gumagaya ng klasikal na pagpapamana, ngunit ito ay higit pa sa [delegasyon kaysa sa pamana](https://davidwalsh.name/javascript-objects).
+Ito ay isang pangkaraniwan na tanong sa pakikipanayam tungkol sa JavaScript. Ang lahat ng mga JavaScript na mga bagay ay may isang `__proto__` na propyedad, iyon ay isang reperensiya sa ibang bagay. Kapag ang isang propyedad ay na-akses sa isang bagay at kung ang propyedad ay hindi natagpuan sa bagay na iyon, tinitingnan ng engine ng JavaScript ang `__proto__` ng object, at ang`__proto__` ng `__proto__` at iba pa, hanggang sa matagpuan nito ang tinukoy ng propyedad sa isa sa `__proto__` o hanggang sa ito ay umabot sa dulo ng prototype na chain. Ang pag-uugali na ito ay gumagaya ng klasikal na pagpapamana, ngunit ito ay higit pa sa [delegasyon kaysa sa pamana](https://davidwalsh.name/javascript-objects).
 
 ###### Mga Reperensiya
 
-* https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
-* https://davidwalsh.name/javascript-objects
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
+- https://davidwalsh.name/javascript-objects
 
 ### Ano ang iyong naiisip sa AMD laban sa CommonJS??
 
@@ -108,15 +53,12 @@ Ang dalawa ay parehong mga paraan upang ipatupad ang isang sistema ng module, na
 
 Nakikita ko ang sintaks ng AMD na parang masyadong malubha at ang CommonJS ay mas malapit sa estilo na nais mong ng pagsulat ng mga pahayag ng pag-import sa iba pang mga wika. halos kada, nakikita kong hindi kailangang AMD, dahil kung napagsilbihan mo ang lahat ng iyong JavaScript sa isang pinagdugtong na bugkos na, hindi ka makikinabang mula sa mga propyedad ng pag-load sa paraang async. Gayundin, ang sintaks ng CommonJS ay mas malapit sa estilo ng Node ng pagsusulat ng mga module at mayroong mas kaunting konteksto na lumilipat sa itaas kapag lumipat sa pagitan ng panig sa kliyente at panig sa serber na pag-develop ng JavaScript.
 
-Natutuwa ako na may mga ES2015 na module, na may suporta para sa parehong kasabay at di sinkronisado na paglo-load, maaari na sa wakas na tayo ay mananatili lamang sa isang diskarte. Kahit na hindi ito ganap na pinagsama sa mga browser at sa Node, maaari tayong gumamit lagi ng mga transpiler upang i-convert ang ating code.
-.
+Natutuwa ako na may mga ES2015 na module, na may suporta para sa parehong kasabay at di sinkronisado na paglo-load, maaari na sa wakas na tayo ay mananatili lamang sa isang diskarte. Kahit na hindi ito ganap na pinagsama sa mga browser at sa Node, maaari tayong gumamit lagi ng mga transpiler upang i-convert ang ating code. .
 
 ###### Mga Reperensiya
 
-* https://auth0.com/blog/javascript-module-systems-showdown/
-* https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://auth0.com/blog/javascript-module-systems-showdown/
+- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
 
 ### Ipaliwanag kung bakit ang mga sumusunod ay hindi gumagana bilang isang IIFE: `function foo(){ }();`. Ano ang kailangang baguhin upang gawing maayos itong IIFE?
 
@@ -126,9 +68,7 @@ Narito ang dalawang paraan upang ayusin ito na kinasasangkutan ng pagdaragdag ng
 
 ###### Mga Reperensiya
 
-* http://lucybain.com/blog/2014/immediately-invoked-function-expression/
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
 
 ### Ano ang kaibahan sa pagitan ng isang variable na: `null`, `undefined` o hindi naipahayag? Paano mo gagawin ang pag-check para sa alinman sa mga kalagayang ito?
 
@@ -171,10 +111,8 @@ Bilang isang personal na nakaugalian, hindi ko kailanman iiwanan ang aking mga v
 
 ###### Mga Reperensiya
 
-* https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
-* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
 
 ### Ano ang pagsasara, at paano mo gagamitin ang isa sa mga ito?
 
@@ -182,15 +120,13 @@ Ang pagsasara ay ang kumbinasyon ng isang punksyon at ang leksikong environment
 
 **Bakit ka pipili ng isa?**
 
-* Privacy sa datos / pag-emulate ng pribadong pamamaraan sa closures. Karaniwang ginagamit sa [pattern ng module](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript).
-* [Bahagyang mga aplikasyon o pagcurry](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x).
+- Privacy sa datos / pag-emulate ng pribadong pamamaraan sa closures. Karaniwang ginagamit sa [pattern ng module](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript).
+- [Bahagyang mga aplikasyon o pagcurry](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x).
 
 ###### Mga Reperensiya
 
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
-* https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
+- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
 
 ### Mailalarawan mo ba ang pangunahing pagkakaiba sa pagitan ng isang `.forEach` na loop at isang `.Map()` na loop at bakit kailangan mo lang pumili ng isa mula sa dalawa?
 
@@ -198,9 +134,9 @@ Upang maunawaan ang mga pagkakaiba sa pagitan ng dalawa, tingnan natin kung ano
 
 **`forEach`**
 
-* nagbabago sa pamamagitan ng mga elemento sa isang array.
-* Nagpapatupad ng callback para sa bawat elemento.
-* Hindi nagbabalik ng isang halaga.
+- nagbabago sa pamamagitan ng mga elemento sa isang array.
+- Nagpapatupad ng callback para sa bawat elemento.
+- Hindi nagbabalik ng isang halaga.
 
 ```js
 const a = [1, 2, 3];
@@ -213,12 +149,12 @@ const doubled = a.forEach((num, index) => {
 
 **`map`**
 
-* binabago sa pamamagitan ng mga elemento sa isang array.
-* Mina- "Map" ang bawat elemento sa isang bagong elemento sa pamamagitan ng pagtawag sa punksyon sa bawat elemento, na lumilikha ng isang bagong array bilang isang resulta.
+- binabago sa pamamagitan ng mga elemento sa isang array.
+- Mina- "Map" ang bawat elemento sa isang bagong elemento sa pamamagitan ng pagtawag sa punksyon sa bawat elemento, na lumilikha ng isang bagong array bilang isang resulta.
 
 ```js
 const a = [1, 2, 3];
-const doubled = a.map(num => {
+const doubled = a.map((num) => {
   return num * 2;
 });
 
@@ -229,16 +165,14 @@ Ang pangunahing pagkakaiba sa pagitan ng `.forEach` at `.map ()` ay ang `.map ()
 
 ###### Mga Reperensiya
 
-* https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
 
 ### Ano ang isang tipikal na kaso ng paggamit para sa mga hindi kilalang punksyon?
 
 Maaari silang gamitin sa mga IIFE upang ipaloob ang ilang mga code sa loob ng isang lokal na saklaw upang ang mga variable na ipinahayag dito ay hindi mag-leak sa pandaigdigang saklaw.
 
 ```js
-(function() {
+(function () {
   // Ibang mga code dito.
 })();
 ```
@@ -246,7 +180,7 @@ Maaari silang gamitin sa mga IIFE upang ipaloob ang ilang mga code sa loob ng is
 Bilang isang callback na ginagamit minsan at hindi na kailangang magamit kahit saan pa. Ang code ay mukhang mas self-contained at nababasa kapag ang mga handler ay tinukoy sa loob ng code na tinatawag ang mga ito, sa halip na maghanap sa ibang lugar upang mahanap ang punksyon na katawan.
 
 ```js
-setTimeout(function() {
+setTimeout(function () {
   console.log('Hello world!');
 }, 1000);
 ```
@@ -255,7 +189,7 @@ Mga argumento sa mga punksyonal na mga konstruktura na pag-program o Lodash (kat
 
 ```js
 const arr = [1, 2, 3];
-const double = arr.map(function(el) {
+const double = arr.map(function (el) {
   return el * 2;
 });
 console.log(double); // [2, 4, 6]
@@ -263,10 +197,8 @@ console.log(double); // [2, 4, 6]
 
 ###### Mga Reperensiya
 
-* https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
-* https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
+- https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
 
 ### Paano mo inaayos ang iyong code? (modular na pattern, makalumang pagmamana?)
 
@@ -276,8 +208,6 @@ Mahusay pa rin ang module pattern, ngunit sa mga araw na ito, ginagamit ko ang a
 
 Iniiwasan ko ang paggamit ng klasikal na pagmamana kung posible. Kapag at kung gagawin ko, mananatili ako sa [mga patakarang ito](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4).
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
-
 ### Ano ang pagkakaiba sa pagitan ng mga host na bagay at mga likas na bagay?
 
 Ang mga likas na bagay ay mga bagay na bahagi ng wika ng JavaScript na tinutukoy ECMAScript na ispisipikasyon, kagaya ng `String`, `Math`, `RegExp`, `Object`, `Function`, atbp.
@@ -286,9 +216,7 @@ Ang mga bagay na host ay ibinibigay ng runtime environment (browser o Node), kag
 
 ###### Mga Reperensiya
 
-* https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
 
 ### Kaibahan sa pagitan ng: punksyon na `Person(){}`, `var person = Person()`, at `var person = new Person()`?
 
@@ -314,9 +242,7 @@ console.log(person.name); // "john"
 
 ###### Mga Reperensiya
 
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
 
 ### Ano ang pagkakaiba sa pagitan ng `.call` at `.apply`?
 
@@ -331,8 +257,6 @@ console.log(add.call(null, 1, 2)); // 3
 console.log(add.apply(null, [1, 2])); // 3
 ```
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
-
 ### Ipaliwanag ang `Function.prototype.bind`.
 
 Kinuha mula sa bawat salita ng [MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind):
@@ -343,9 +267,7 @@ Sa aking karanasan, ito ay pinaka-kapaki-pakinabang para sa pag-bind ng halaga n
 
 ###### Mga Reperensiya
 
-* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
 
 ### Kelan ka gagamit ng `document.write()`?
 
@@ -355,17 +277,14 @@ Mayroong ilang mga sagot na makikita online na nagpapaliwanag na ang `document.w
 
 ###### Mga Reperensiya
 
-* https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
-* https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
+- https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
 
 ### Ano ang kaibahan sa pagitan ng pagtukoy na tampok, tampok na pagkakilala, at paggamit ng UA na string?
 
 **Pagtuklas ng Tampok**
 
-Ang pagtuklas ng tampok ay kinasasangkutan ng pagtatrabaho kung ang isang browser ay sumusuporta sa isang tiyak na bloke ng code, at nagpapatakbo ng ibang code na nakasalalay sa kung ito (o hindi), upang ang browser ay maaaring makapagbigay kahit kailan ng isang gumaganang karanasan sa halip na mag-crash o magka-error sa ilang mga browser.
-Halimbawa:
+Ang pagtuklas ng tampok ay kinasasangkutan ng pagtatrabaho kung ang isang browser ay sumusuporta sa isang tiyak na bloke ng code, at nagpapatakbo ng ibang code na nakasalalay sa kung ito (o hindi), upang ang browser ay maaaring makapagbigay kahit kailan ng isang gumaganang karanasan sa halip na mag-crash o magka-error sa ilang mga browser. Halimbawa:
 
 ```js
 if ('geolocation' in navigator) {
@@ -395,41 +314,35 @@ Ito ay isang string na iniulat ng browser na nagbibigay-daan sa mga network prot
 
 ###### Mga Reperensiya
 
-* https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
-* https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
-* https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
+- https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
 
 ### Ipaliwanag ang Ajax sa mas detalyadong pamamaraan hangga't maaari.
 
 Ang Ajax ay (sinkronisadong JavaScript at XML) ay isang set ng mga diskarte sa pag-develop ng web gamit ang maraming mga teknolohiya ng web sa panig ng kliyente upang lumikha ng mga aplikasyon ng web na sinkronisado. Sa Ajax, ang mga web na aplikasyon ay maaaring magpadala ng datos sa at kunin mula sa isang serber na di-sinkronisado (sa background) nang hindi nakakasagabal sa displey at pag-uugali ng umiiral na pahina. Sa pamamagitan ng pag-decoupling ng layer ng pagpapalit ng datos mula sa layer ng pagtatanghal, ang Ajax ay nagbibigay-daan para sa mga web na pahina, at sa pamamagitan ng extension ng mga aplikasyon sa web, upang baguhin ang nilalaman na dynamic na walang kailangang i-reload ang buong pahina. Sa pagsasagawa, ang mga modernong pagpapatupad ay kadalasang kapalit ng JSON para sa XML dahil sa mga pakinabang ng pagiging likas sa JavaScript.
 
-Ang `XMLHttpRequest` na API ay madalas na ginagamit para sa di-sinkronisadong komunikasyon o sa mga araw ngayon, ang`fetch` na API.
+Ang `XMLHttpRequest` na API ay madalas na ginagamit para sa di-sinkronisadong komunikasyon o sa mga araw ngayon, ang`fetch()` na API.
 
 ###### Mga Reperensiya
 
-* https://en.wikipedia.org/wiki/Ajax_(programming)
-* https://developer.mozilla.org/en-US/docs/AJAX
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://en.wikipedia.org/wiki/Ajax_(programming)
+- https://developer.mozilla.org/en-US/docs/AJAX
 
 ### Ano ang mga kalamangan at di-kalamangan ng paggamit ng Ajax?
 
 **Mga Kalamangan**
 
-* Mas mahusay na pakikipag-ugnayan. Maaaring mabago ang bagong nilalaman mula sa serber nang hindi kailangang i-reload ang buong pahina.
-* Binawasang mga koneksyon sa serber dahil ang mga script at mga stylesheet lamang ay kailangang hilingin ng isang beses lamang.
-* Maaaring mapanatili ang estado sa isang pahina. Ang mga JavaScript na variable at DOM na estado ay mananatili dahil ang pangunahing pahinang paglalagyan ay hindi na-reload.
-* Karaniwang karamihan sa mga pakinabang ng isang SPA.
+- Mas mahusay na pakikipag-ugnayan. Maaaring mabago ang bagong nilalaman mula sa serber nang hindi kailangang i-reload ang buong pahina.
+- Binawasang mga koneksyon sa serber dahil ang mga script at mga stylesheet lamang ay kailangang hilingin ng isang beses lamang.
+- Maaaring mapanatili ang estado sa isang pahina. Ang mga JavaScript na variable at DOM na estado ay mananatili dahil ang pangunahing pahinang paglalagyan ay hindi na-reload.
+- Karaniwang karamihan sa mga pakinabang ng isang SPA.
 
 **Mga Di Kalamangan**
 
-* Ang mga dynamic na webpage ay mas mahirap i-bookmark.
-* Hindi gagana kung hindi pinagana ang JavaScript sa browser.\* Ang ilang mga webcrawlers ay hindi nagsasagawa ng JavaScript at hindi makikita ang nilalamang na-load ng JavaScript.
-* Karaniwang karamihan sa mga di kalamangan ng isang SPA.
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- Ang mga dynamic na webpage ay mas mahirap i-bookmark.
+- Hindi gagana kung hindi pinagana ang JavaScript sa browser.\* Ang ilang mga webcrawlers ay hindi nagsasagawa ng JavaScript at hindi makikita ang nilalamang na-load ng JavaScript.
+- Karaniwang karamihan sa mga di kalamangan ng isang SPA.
 
 ### Ipaliwanag kung papaano gumagana ang JSONP (at kung bakit hindi talaga Ajax).
 
@@ -440,9 +353,9 @@ Gumagana ang JSONP sa pamamagitan ng paggawa ng isang kahilingan sa isang cross-
 ```html
 <!-- https://mydomain.com -->
 <script>
-function printData(data) {
-  console.log(`My name is ${data.name}!`);
-}
+  function printData(data) {
+    console.log(`My name is ${data.name}!`);
+  }
 </script>
 
 <script src="https://example.com?callback=printData"></script>
@@ -461,9 +374,7 @@ Sa panahon ngayon, Ang [CORS](http://en.wikipedia.org/wiki/Cross-origin_resource
 
 ###### Mga Reperensiya
 
-* https://stackoverflow.com/a/2067584/1751946
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://stackoverflow.com/a/2067584/1751946
 
 ### Ikaw ba ay nakagamit na ng JavaScript sa pag-template? Kung gayon, anong mga librerya ang ginamit mo?
 
@@ -475,8 +386,6 @@ const template = `<div>My name is: ${name}</div>`;
 
 Gayunpaman, maging maingat sa isang potensyal na XSS sa itaas na pamamaraan dahil ang mga nilalaman ay hindi ligtas para sa iyo, hindi katulad sa mga libreryang pang-template.
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
-
 ### Ipaliwanag ang "hoisting".
 
 Ang pag-hoist ay isang terminong ginamit upang ipaliwanag ang pag-uugali ng mga variable na deklarasyon sa iyong code. Ang mga variable na ipinahayag o nasimulan sa keyword na `var` ay magkakaroon ng kanilang deklarasyon na "hoisted" hanggang sa tuktok ng kasalukuyangnasasakupan. Gayunpaman, ang pagpapahayag lamang ang na-hoist na, ang pagtatalaga (kung mayroong isa), ay mananatili kung saan ito. Ipaliwanag natin ang ilang mga halimbawa.
@@ -507,20 +416,16 @@ console.log(foo); // [Function: foo]
 // Ekspresyon ng Punksyon
 console.log(bar); // undefined
 bar(); // Uncaught TypeError: ang bar ay hindi isang punksyon
-var bar = function() {
+var bar = function () {
   console.log('BARRRR');
 };
 console.log(bar); // [Function: bar]
 ```
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
-
 ### Ilarawan ang kaganapan ng pagbubwak.
 
 Kapag ang isang kaganapan ay nag-trigger sa isang elemento ng DOM, susubukan nito na pangasiwaan ang kaganapan kung may nakakabit na tagapakinig, pagkatapos ay ang kaganapan ay bubula hanggang sa kanyang magulang at ang parehong bagay ang mangyayari. Ang pag-bula na ito ay nangyayari sa mga ninuno ng elemento sa lahat ng mga paraan sa `dokumento`. Ang kaganapan ng pagbubwak ng bula ay ang mekanismo sa likod ng delegasyon ng kaganapan.
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
-
 ### Ano ang pagkakaiba sa pagitan ng isang "katangian" at isang "propyedad"?
 
 Ang mga katangian ay tinukoy sa markup ng HTML ngunit ang mga propyedad ay tinukoy sa DOM. Upang ilarawan ang pagkakaiba, isipin na mayroon kaming field na ito sa aming HTML: `<input type ="text"value ="Hello">`.
@@ -540,9 +445,7 @@ console.log(input.value); // Hello World!
 
 ###### Mga Reperensiya
 
-* https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
 
 ### Bakit ang pagpapalawak ng mga built-in na JavaScript na mga bagay ay hindi isang magandang ideya?
 
@@ -552,9 +455,7 @@ Ang tanging oras na maaari mong i-extend ang isang likas na bagay ay kung nais m
 
 ###### Mga Reperensiya
 
-* http://lucybain.com/blog/2014/js-extending-built-in-objects/
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- http://lucybain.com/blog/2014/js-extending-built-in-objects/
 
 ### Pagkakaiba sa pagitan ng kaganapan ng `pag-load` ng dokumento at dokumento ng `DOMContentLoaded` na kaganapan?
 
@@ -562,10 +463,8 @@ Ang `DOMContentLoaded` na kaganapan ay pinapaputok kapag ang unang HTML na dokum
 
 ###### Mga Reperensiya
 
-* https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
-* https://developer.mozilla.org/en-US/docs/Web/Events/load
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
+- https://developer.mozilla.org/en-US/docs/Web/Events/load
 
 ### Ano ang pagkakaiba sa pagitan ng `==` at `===`
 
@@ -590,9 +489,7 @@ console.log(a == undefined); // true
 
 ###### Mga Reperensiya
 
-* https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
 
 ### Ipaliwanag ang patakaran na pareho pareho dapat ang pinanggalingan tungkol sa JavaScript.
 
@@ -600,9 +497,7 @@ Pinipigilan ng patakaran ng may parehong pinagmulan ang JavaScript mula sa pagga
 
 ###### Mga reperensiya
 
-* https://en.wikipedia.org/wiki/Same-origin_policy
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://en.wikipedia.org/wiki/Same-origin_policy
 
 ### Paganahin ito:
 
@@ -618,17 +513,13 @@ function duplicate(arr) {
 duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
 ```
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
-
 ### Bakit tinatawag itong isang ternary na ekspresyon, ano ang ibig sabihin ng salitang "Ternary"?
 
 "Ternary" indicates three, and a ternary expression accepts three operands, the test condition, the "then" expression and the "else" expression. Ternary expressions are not specific to JavaScript and I'm not sure why it is even in this list.
 
-###### References
+#### References
 
-* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
 
 ### Ano ang `"use strict";`? ano ang mga bentahe at di-bentahe sa paggamit nito?
 
@@ -636,28 +527,26 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
 
 Advantages:
 
-* Makes it impossible to accidentally create global variables.
-* Makes assignments which would otherwise silently fail to throw an exception.
-* Makes attempts to delete undeletable properties throw (where before the attempt would simply have no effect).
-* Requires that function parameter names be unique.
-* `this` is undefined in the global context.
-* It catches some common coding bloopers, throwing exceptions.
-* It disables features that are confusing or poorly thought out.
+- Makes it impossible to accidentally create global variables.
+- Makes assignments which would otherwise silently fail to throw an exception.
+- Makes attempts to delete undeletable properties throw (where before the attempt would simply have no effect).
+- Requires that function parameter names be unique.
+- `this` is undefined in the global context.
+- It catches some common coding bloopers, throwing exceptions.
+- It disables features that are confusing or poorly thought out.
 
 Disadvantages:
 
-* Many missing features that some developers might be used to.
-* No more access to `function.caller` and `function.arguments`.
-* Concatenation of scripts written in different strict modes might cause issues.
+- Many missing features that some developers might be used to.
+- No more access to `function.caller` and `function.arguments`.
+- Concatenation of scripts written in different strict modes might cause issues.
 
 Overall, I think the benefits outweigh the disadvantages, and I never had to rely on the features that strict mode blocks. I would recommend using strict mode.
 
-###### References
-
-* http://2ality.com/2011/10/strict-mode-hatred.html
-* http://lucybain.com/blog/2014/js-use-strict/
+#### References
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- http://2ality.com/2011/10/strict-mode-hatred.html
+- http://lucybain.com/blog/2014/js-use-strict/
 
 ### Gumawa ng para sa loop na mag-iterate hanggang sa `100` habang mag-ouput ng **"fizz"** sa multiples ng `3`, **"buzz"** sa pagmultiplika ng `5` at **"fizzbuzz"** sa pagmultiplika ng `3` at `5`
 
@@ -673,11 +562,9 @@ for (let i = 1; i <= 100; i++) {
 
 I would not advise you to write the above during interviews though. Just stick with the long but clear approach. For more wacky versions of FizzBuzz, check out the reference link below.
 
-###### References
+#### References
 
-* https://gist.github.com/jaysonrowe/1592432
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://gist.github.com/jaysonrowe/1592432
 
 ### Bakit, sa pangkalahatan, isang magandang ideya na iwanan ang pandaigdigang saklaw ng isang website bilang kung ano man ito at hindi kailanman na galawin ito?
 
@@ -693,11 +580,9 @@ The DOM event `DOMContentLoaded` will fire after the DOM for the page has been c
 
 TODO.
 
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
+#### References
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
 
 ### Ipaliwanag kung ano ang isang solong pahina na app at kung paano gumawa ng isang SEO-friendly.
 
@@ -709,24 +594,22 @@ However in modern SPAs, client-side rendering is used instead. The browser loads
 
 The benefits:
 
-* The app feels more responsive and users do not see the flash between page navigations due to full-page refreshes.
-* Fewer HTTP requests are made to the server, as the same assets do not have to be downloaded again for each page load.
-* Clear separation of the concerns between the client and the server; you can easily build new clients for different platforms (e.g. mobile, chatbots, smart watches) without having to modify the server code. You can also modify the technology stack on the client and server independently, as long as the API contract is not broken.
+- The app feels more responsive and users do not see the flash between page navigations due to full-page refreshes.
+- Fewer HTTP requests are made to the server, as the same assets do not have to be downloaded again for each page load.
+- Clear separation of the concerns between the client and the server; you can easily build new clients for different platforms (e.g. mobile, chatbots, smart watches) without having to modify the server code. You can also modify the technology stack on the client and server independently, as long as the API contract is not broken.
 
 The downsides:
 
-* Heavier initial page load due to loading of framework, app code, and assets required for multiple pages.
-* There's an additional step to be done on your server which is to configure it to route all requests to a single entry point and allow client-side routing to take over from there.
-* SPAs are reliant on JavaScript to render content, but not all search engines execute JavaScript during crawling, and they may see empty content on your page. This inadvertently hurts the Search Engine Optimization (SEO) of your app. However, most of the time, when you are building apps, SEO is not the most important factor, as not all the content needs to be indexable by search engines. To overcome this, you can either server-side render your app or use services such as [Prerender](https://prerender.io/) to "render your javascript in a browser, save the static HTML, and return that to the crawlers".
+- Heavier initial page load due to loading of framework, app code, and assets required for multiple pages.
+- There's an additional step to be done on your server which is to configure it to route all requests to a single entry point and allow client-side routing to take over from there.
+- SPAs are reliant on JavaScript to render content, but not all search engines execute JavaScript during crawling, and they may see empty content on your page. This inadvertently hurts the Search Engine Optimization (SEO) of your app. However, most of the time, when you are building apps, SEO is not the most important factor, as not all the content needs to be indexable by search engines. To overcome this, you can either server-side render your app or use services such as [Prerender](https://prerender.io/) to "render your javascript in a browser, save the static HTML, and return that to the crawlers".
 
-###### References
+#### References
 
-* https://github.com/grab/front-end-guide#single-page-apps-spas
-* http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
-* http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
-* https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://github.com/grab/front-end-guide#single-page-apps-spas
+- http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
+- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
+- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
 
 ### Ano ang lawak ng iyong karanasan sa Mga Pangako at/o ang kanilang mga polyfill?
 
@@ -734,26 +617,22 @@ Possess working knowledge of it. A promise is an object that may produce a singl
 
 Some common polyfills are `$.deferred`, Q and Bluebird but not all of them comply to the specification. ES2015 supports Promises out of the box and polyfills are typically not needed these days.
 
-###### References
-
-* https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
+#### References
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
 
 ### Ano ang mga kalamangan at kahinaan ng paggamit ng mga pangako sa halip ng mga callback?
 
 **Pros**
 
-* Avoid callback hell which can be unreadable.
-* Makes it easy to write sequential asynchronous code that is readable with `.then()`.
-* Makes it easy to write parallel asynchronous code with `Promise.all()`.
+- Avoid callback hell which can be unreadable.
+- Makes it easy to write sequential asynchronous code that is readable with `.then()`.
+- Makes it easy to write parallel asynchronous code with `Promise.all()`.
 
 **Cons**
 
-* Slightly more complex code (debatable).
-* In older browsers where ES2015 is not supported, you need to load a polyfill in order to use it.
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- Slightly more complex code (debatable).
+- In older browsers where ES2015 is not supported, you need to load a polyfill in order to use it.
 
 ### Ano ang ilan sa mga pakinabang o di-pakinabang ng pagsulat ng JavaScript code sa isang wika na naka-compile sa JavaScript?
 
@@ -761,92 +640,80 @@ Some examples of languages that compile to JavaScript include CoffeeScript, Elm,
 
 Advantages:
 
-* Fixes some of the longstanding problems in JavaScript and discourages JavaScript anti-patterns.
-* Enables you to write shorter code, by providing some syntactic sugar on top of JavaScript, which I think ES5 lacks, but ES2015 is awesome.
-* Static types are awesome (in the case of TypeScript) for large projects that need to be maintained over time.
+- Fixes some of the longstanding problems in JavaScript and discourages JavaScript anti-patterns.
+- Enables you to write shorter code, by providing some syntactic sugar on top of JavaScript, which I think ES5 lacks, but ES2015 is awesome.
+- Static types are awesome (in the case of TypeScript) for large projects that need to be maintained over time.
 
 Disadvantages:
 
-* Require a build/compile process as browsers only run JavaScript and your code will need to be compiled into JavaScript before being served to browsers.
-* Debugging can be a pain if your source maps do not map nicely to your pre-compiled source.
-* Most developers are not familiar with these languages and will need to learn it. There's a ramp up cost involved for your team if you use it for your projects.
-* Smaller community (depends on the language), which means resources, tutorials, libraries and tooling would be harder to find.
-* IDE/editor support might be lacking.
-* These languages will always be behind the latest JavaScript standard.
-* Developers should be cognizant of what their code is being compiled to — because that is what would actually be running, and that is what matters in the end.
+- Require a build/compile process as browsers only run JavaScript and your code will need to be compiled into JavaScript before being served to browsers.
+- Debugging can be a pain if your source maps do not map nicely to your pre-compiled source.
+- Most developers are not familiar with these languages and will need to learn it. There's a ramp up cost involved for your team if you use it for your projects.
+- Smaller community (depends on the language), which means resources, tutorials, libraries and tooling would be harder to find.
+- IDE/editor support might be lacking.
+- These languages will always be behind the latest JavaScript standard.
+- Developers should be cognizant of what their code is being compiled to — because that is what would actually be running, and that is what matters in the end.
 
 Practically, ES2015 has vastly improved JavaScript and made it much nicer to write. I don't really see the need for CoffeeScript these days.
 
-###### References
-
-* https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
+#### References
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
 
 ### Anong mga kagamitan at pamamaraan ang ginagamit mo sa pag-debug ng JavaScript na code?
 
-* React and Redux
-  * [React Devtools](https://github.com/facebook/react-devtools)
-  * [Redux Devtools](https://github.com/gaearon/redux-devtools)
-* JavaScript
-  * [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)
-  * `debugger` statement
-  * Good old `console.log` debugging
+- React and Redux
+  - [React Devtools](https://github.com/facebook/react-devtools)
+  - [Redux Devtools](https://github.com/gaearon/redux-devtools)
+- JavaScript
+  - [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)
+  - `debugger` statement
+  - Good old `console.log` debugging
 
-###### References
+#### References
 
-* https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
-* https://raygun.com/blog/javascript-debugging/
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
+- https://raygun.com/blog/javascript-debugging/
 
 ### Anong mga pag-construct ng wika ang ginagamit mo para sa pag-ulit sa mga katangian ng bagay at mga item na array?
 
 For objects:
 
-* `for` loops - `for (var property in obj) { console.log(property); }`. However, this will also iterate through its inherited properties, and you will add an `obj.hasOwnProperty(property)` check before using it.
-* `Object.keys()` - `Object.keys(obj).forEach(function (property) { ... })`. `Object.keys()` is a static method that will lists all enumerable properties of the object that you pass it.
-* `Object.getOwnPropertyNames()` - `Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`. `Object.getOwnPropertyNames()` is a static method that will lists all enumerable and non-enumerable properties of the object that you pass it.
+- `for` loops - `for (var property in obj) { console.log(property); }`. However, this will also iterate through its inherited properties, and you will add an `obj.hasOwnProperty(property)` check before using it.
+- `Object.keys()` - `Object.keys(obj).forEach(function (property) { ... })`. `Object.keys()` is a static method that will lists all enumerable properties of the object that you pass it.
+- `Object.getOwnPropertyNames()` - `Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`. `Object.getOwnPropertyNames()` is a static method that will lists all enumerable and non-enumerable properties of the object that you pass it.
 
 For arrays:
 
-* `for` loops - `for (var i = 0; i < arr.length; i++)`. The common pitfall here is that `var` is in the function scope and not the block scope and most of the time you would want block scoped iterator variable. ES2015 introduces `let` which has block scope and it is recommended to use that instead. So this becomes: `for (let i = 0; i < arr.length; i++)`.
-* `forEach` - `arr.forEach(function (el, index) { ... })`. This construct can be more convenient at times because you do not have to use the `index` if all you need is the array elements. There are also the `every` and `some` methods which will allow you to terminate the iteration early.
+- `for` loops - `for (var i = 0; i < arr.length; i++)`. The common pitfall here is that `var` is in the function scope and not the block scope and most of the time you would want block scoped iterator variable. ES2015 introduces `let` which has block scope and it is recommended to use that instead. So this becomes: `for (let i = 0; i < arr.length; i++)`.
+- `forEach` - `arr.forEach(function (el, index) { ... })`. This construct can be more convenient at times because you do not have to use the `index` if all you need is the array elements. There are also the `every` and `some` methods which will allow you to terminate the iteration early.
 
 Most of the time, I would prefer the `.forEach` method, but it really depends on what you are trying to do. `for` loops allow more flexibility, such as prematurely terminate the loop using `break` or incrementing the iterator more than once per loop.
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
-
 ### Ipaliwanag ang pagkakaiba sa pagitan ng mga bagay na nababago at hindi nababago.
 
-* What is an example of an immutable object in JavaScript?
-* What are the pros and cons of immutability?
-* How can you achieve immutability in your own code?
+- What is an example of an immutable object in JavaScript?
+- What are the pros and cons of immutability?
+- How can you achieve immutability in your own code?
 
 TODO
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
-
 ### Ipaliwanag ang pagkakaiba sa pagitan ng sabay at hindi sabay na punksiyon.
 
 Synchronous functions are blocking while asynchronous functions are not. In synchronous functions, statements complete before the next statement is run. In this case the program is evaluated exactly in order of the statements and execution of the program is paused if one of the statements take a very long time.
 
 Asynchronous functions usually accept a callback as a parameter and execution continues on the next line immediately after the asynchronous function is invoked. The callback is only invoked when the asynchronous operation is complete and the call stack is empty. Heavy duty operations such as loading data from a web server or querying a database should be done asynchronously so that the main thread can continue executing other operations instead of blocking until that long operation to complete (in the case of browsers, the UI will freeze).
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
-
 ### Ano ang loop na kaganapan? Ano ang pagkakaiba sa pagitan ng call na stack at queue ng gawain?
 
 The event loop is a single-threaded loop that monitors the call stack and checks if there is any work to be done in the task queue. If the call stack is empty and there are callback functions in the task queue, a function is dequeued and pushed onto the call stack to be executed.
 
 If you haven't already checked out Philip Robert's [talk on the Event Loop](https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html), you should. It is one of the most viewed videos on JavaScript.
 
-###### References
-
-* https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
-* http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
+#### References
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
+- http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
 
 ### Ipaliwanag ang mga pagkakaiba sa paggamit ng `foo` sa pagitan ng `function foo() {}` at `var foo = function() {}`
 
@@ -865,16 +732,14 @@ function foo() {
 
 ```js
 foo(); // Uncaught TypeError: foo is not a function
-var foo = function() {
+var foo = function () {
   console.log('FOOOOO');
 };
 ```
 
-###### References
+#### References
 
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
 
 ### Ano ang mga pagkakaiba sa pagitan ng mga variable na nilikha sa pamamagitan ng paggamit ng `let`,`var` o `const`?
 
@@ -950,32 +815,24 @@ const baz = 'baz';
 baz = 'qux';
 ```
 
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
+#### References
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
 
 ### Ano ang mga pagkakaiba sa pagitan ng ES6 na class at mga ES5 na taga-construct na punksyon?
 
 TODO
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
-
 ### May maaalok ka bang isang kaso ng paggamit para sa bagong arrow => sintaks ng punksyon? Paano naiiba ang bagong sintaks na ito sa iba pang mga punksyon?
 
 TODO
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
-
 ### Ano ang bentahe para sa paggamit ng sintaks na arrow para sa isang paraan sa isang taga-construct?
 
 TODO
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
-
 ### Ano ang kahulugan ng isang mas mataas na hanay na punksyon?
 
 A higher-order function is any function that takes one or more functions as arguments, which it uses to operate on some data, and/or returns a function as a result. Higher-order functions are meant to abstract some operation that is performed repeatedly. The classic example of this is `map`, which takes an array and a function as arguments. `map` then uses this function to transform each item in the array, returning a new array with the transformed data. Other popular examples in JavaScript are `forEach`, `filter`, and `reduce`. A higher-order function doesn't just need to be manipulating arrays as there are many use cases for returning a function from another function. `Array.prototype.bind` is one such example in JavaScript.
@@ -991,7 +848,7 @@ const names = ['irish', 'daisy', 'anna'];
 The imperative way will be as such:
 
 ```js
-const transformNamesToUppercase = function(names) {
+const transformNamesToUppercase = function (names) {
   const results = [];
   for (let i = 0; i < names.length; i++) {
     results.push(names[i].toUpperCase());
@@ -1004,19 +861,17 @@ transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
 Use `.map(transformerFn)` makes the code shorter and more declarative.
 
 ```js
-const transformNamesToUppercase = function(names) {
-  return names.map(name => name.toUpperCase());
+const transformNamesToUppercase = function (names) {
+  return names.map((name) => name.toUpperCase());
 };
 transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
 ```
 
-###### References
+#### References
 
-* https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
-* https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
-* https://eloquentjavascript.net/05_higher_order.html
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
+- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
+- https://eloquentjavascript.net/05_higher_order.html
 
 ### Makapagbibigaay kaba ng isang halimbawa para sa pag-destructure ng isang bagay o isang array?
 
@@ -1055,19 +910,15 @@ console.log(p); // 42
 console.log(q); // true
 ```
 
-###### References
-
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
-* https://ponyfoo.com/articles/es6-destructuring-in-depth
+#### References
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
+- https://ponyfoo.com/articles/es6-destructuring-in-depth
 
 ### Ang literal na ES6 na template ay nag-aalok ng maraming kakayahan na umangkop sa pagbuo ng mga string, maaari ka bang makapagbigay ng isang halimbawa
 
 TODO
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
-
 ### Makapagbibigay kaba ng isang halimbawa ng isang punksyon na curry at kung bakit ang sintaks na ito ay nag-aalok ng isang kalamangan?
 
 Currying is a pattern where a function with more than one parameter is broken into multiple functions that, when called in series, will accumulate all of the required parameters one at a time. This technique can be useful for making code written in a functional style easier to read and compose. It's important to note that for a function to be curried, it needs to start out as one function, then broken out into a sequence of functions that each take one parameter.
@@ -1079,7 +930,7 @@ function curry(fn) {
   }
 
   function _curried(depth, args) {
-    return function(newArgument) {
+    return function (newArgument) {
       if (depth - 1 === 0) {
         return fn(...args, newArgument);
       }
@@ -1100,15 +951,13 @@ var addFive = curriedAdd(5);
 var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
 ```
 
-###### References
-
-* https://hackernoon.com/currying-in-js-d9ddc64f162e
+#### References
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://hackernoon.com/currying-in-js-d9ddc64f162e
 
 ### Ano ang mga pakinabang ng paggamit ng spread na sintaks at kung paano ito naiiba mula sa rest na sintaks?
 
-ES6's spread syntax is very useful when coding in a functional paradigm as we can easily create copies of arrays or objects without resorting to `Object.create`, `slice`, or a library function. This language feature is used often in Redux and rx.js projects.
+ES6's spread syntax is very useful when coding in a functional paradigm as we can easily create copies of arrays or objects without resorting to `Object.create`, `slice`, or a library function. This language feature is used often in Redux and RxJS projects.
 
 ```js
 function putDookieInAnyArray(arr) {
@@ -1129,7 +978,7 @@ ES6's rest syntax offers a shorthand for including an arbitrary number of argume
 
 ```js
 function addFiveToABunchOfNumbers(...numbers) {
-  return numbers.map(x => x + 5);
+  return numbers.map((x) => x + 5);
 }
 
 const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]
@@ -1144,26 +993,20 @@ const { e, f, ...others } = {
 }; // e: 1, f: 2, others: { g: 3, h: 4 }
 ```
 
-###### References
+#### References
 
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
-
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
 
 ### Paano ka makakabahagi ng code sa pagitan ng mga file?
 
 TODO
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
-
 ### Bakit gusto mong lumikha ng mga statik na miyembro ng klase?
 
 TODO
 
-[[↑] Bumalik sa taas](#mga-tanong-sa-js)
-
 ### Mga Ibang Sagot
 
-* http://flowerszhong.github.io/2013/11/20/javascript-questions.html
+- http://flowerszhong.github.io/2013/11/20/javascript-questions.html
diff --git a/Translations/Chinese/questions/css-questions.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/css-questions.md
similarity index 54%
rename from Translations/Chinese/questions/css-questions.md
rename to website/i18n/zh-CN/docusaurus-plugin-content-docs/current/css-questions.md
index 9844567a0b..58ffa78620 100644
--- a/Translations/Chinese/questions/css-questions.md
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/css-questions.md
@@ -1,38 +1,12 @@
-# CSS 问题
-
-本章节是[前端开发者面试问题 - CSS 部分](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/css-questions.md)的参考答案。 欢迎提出 PR 进行建议和指正！
-
-* [CSS 选择器的优先级是如何计算的？](#css-选择器的优先级是如何计算的)
-* [重置（resetting）CSS 和 标准化（normalizing）CSS 的区别是什么？你会选择哪种方式，为什么？](#重置resettingcss-和-标准化normalizingcss-的区别是什么你会选择哪种方式为什么)
-* [请阐述`Float`定位的工作原理。](#请阐述float定位的工作原理)
-* [请阐述`z-index`属性，并说明如何形成层叠上下文（stacking context）。](#请阐述z-index属性并说明如何形成层叠上下文stacking-context)
-* [请阐述块格式化上下文（Block Formatting Context）及其工作原理。](#请阐述块格式化上下文block-formatting-context及其工作原理)
-* [有哪些清除浮动的技术，都适用哪些情况？](#有哪些清除浮动的技术都适用哪些情况)
-* [请解释什么是雪碧图（css sprites），以及如何实现？](#请解释什么是雪碧图css-sprites以及如何实现)
-* [如何解决不同浏览器的样式兼容性问题？](#如何解决不同浏览器的样式兼容性问题)
-* [如何为功能受限的浏览器提供页面？ 使用什么样的技术和流程？](#如何为功能受限的浏览器提供页面-使用什么样的技术和流程)
-* [有什么不同的方式可以隐藏内容（使其仅适用于屏幕阅读器）？](#有什么不同的方式可以隐藏内容使其仅适用于屏幕阅读器)
-* [你使用过栅格系统吗？偏爱哪一个？](#你使用过栅格系统吗偏爱哪一个)
-* [你是否使用过媒体查询或移动优先的布局？](#你是否使用过媒体查询或移动优先的布局)
-* [你熟悉制作 SVG 吗？](#你熟悉制作-svg-吗)
-* [除了`screen`，你还能说出一个 @media 属性的例子吗？](#除了screen你还能说出一个-media-属性的例子吗)
-* [编写高效的 CSS 应该注意什么？](#编写高效的-css-应该注意什么)
-* [使用 CSS 预处理的优缺点分别是什么？](#使用-css-预处理的优缺点分别是什么)
-* [对于你使用过的 CSS 预处理，说说喜欢和不喜欢的地方？](#对于你使用过的-css-预处理说说喜欢和不喜欢的地方)
-* [如何实现一个使用非标准字体的网页设计？](#如何实现一个使用非标准字体的网页设计)
-* [解释浏览器如何确定哪些元素与 CSS 选择器匹配。](#解释浏览器如何确定哪些元素与-css-选择器匹配)
-* [描述伪元素及其用途。](#描述伪元素及其用途)
-* [说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。](#说说你对盒模型的理解以及如何告知浏览器使用不同的盒模型渲染布局)
-* [`* { box-sizing: border-box; }`会产生怎样的效果？](#--box-sizing-border-box-会产生怎样的效果)
-* [`display`的属性值都有哪些？](#display的属性值都有哪些)
-* [`inline`和`inline-block`有什么区别？](#inline和inline-block有什么区别)
-* [`relative`、`fixed`、`absolute`和`static`四种定位有什么区别？](#relativefixedabsolute和static四种定位有什么区别)
-* [你使用过哪些现有的 CSS 框架？你是如何改进它们的？](#你使用过哪些现有的-css-框架你是如何改进它们的)
-* [你了解 CSS Flexbox 和 Grid 吗？](#你了解-css-flexbox-和-grid-吗)
-* [请解释在编写网站时，响应式与移动优先的区别。](#请解释在编写网站时响应式与移动优先的区别)
-* [响应式设计与自适应设计有何不同？](#响应式设计与自适应设计有何不同)
-* [你有没有使用过视网膜分辨率的图形？当中使用什么技术？](#你有没有使用过视网膜分辨率的图形当中使用什么技术)
-* [什么情况下，用`translate()`而不用绝对定位？什么时候，情况相反。](#什么情况下用translate而不用绝对定位什么时候情况相反)
+---
+title: CSS 问题
+---
+
+本章节是[前端开发者面试问题 - CSS 部分](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/css-questions.md)的参考答案。 欢迎提出 PR 进行建议和指正！
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
 
 ### CSS 选择器的优先级是如何计算的？
 
@@ -51,23 +25,19 @@
 
 ###### 参考
 
-* https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
-* https://www.sitepoint.com/web-foundations/specificity/
-
-[[↑] 回到顶部](#css-问题)
+- https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
+- https://www.sitepoint.com/web-foundations/specificity/
 
 ### 重置（resetting）CSS 和 标准化（normalizing）CSS 的区别是什么？你会选择哪种方式，为什么？
 
-* **重置（Resetting）**： 重置意味着除去所有的浏览器默认样式。对于页面所有的元素，像`margin`、`padding`、`font-size`这些样式全部置成一样。你将必须重新定义各种元素的样式。
-* **标准化（Normalizing）**： 标准化没有去掉所有的默认样式，而是保留了有用的一部分，同时还纠正了一些常见错误。
+- **重置（Resetting）**： 重置意味着除去所有的浏览器默认样式。对于页面所有的元素，像`margin`、`padding`、`font-size`这些样式全部置成一样。你将必须重新定义各种元素的样式。
+- **标准化（Normalizing）**： 标准化没有去掉所有的默认样式，而是保留了有用的一部分，同时还纠正了一些常见错误。
 
 当需要实现非常个性化的网页设计时，我会选择重置的方式，因为我要写很多自定义的样式以满足设计需求，这时候就不再需要标准化的默认样式了。
 
 ###### 参考
 
-* https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
-
-[[↑] 回到顶部](#css-问题)
+- https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
 
 ### 请阐述`Float`定位的工作原理。
 
@@ -91,9 +61,7 @@ CSS 的`clear`属性通过使用`left`、`right`、`both`，让该元素向下
 
 ###### 参考
 
-* https://css-tricks.com/all-about-floats/
-
-[[↑] 回到顶部](#css-问题)
+- https://css-tricks.com/all-about-floats/
 
 ### 请阐述`z-index`属性，并说明如何形成层叠上下文（stacking context）。
 
@@ -107,11 +75,9 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
 
 ###### 参考
 
-* https://css-tricks.com/almanac/properties/z/z-index/
-* https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
-* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
-
-[[↑] 回到顶部](#css-问题)
+- https://css-tricks.com/almanac/properties/z/z-index/
+- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
+- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
 
 ### 请阐述块格式化上下文（Block Formatting Context）及其工作原理。
 
@@ -119,10 +85,10 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
 
 一个 HTML 盒（Box）满足以下任意一条，会创建块格式化上下文：
 
-* `float`的值不是`none`.
-* `position`的值不是`static`或`relative`.
-* `display`的值是`table-cell`、`table-caption`、`inline-block`、`flex`、或`inline-flex`。
-* `overflow`的值不是`visible`。
+- `float`的值不是`none`.
+- `position`的值不是`static`或`relative`.
+- `display`的值是`table-cell`、`table-caption`、`inline-block`、`flex`、或`inline-flex`。
+- `overflow`的值不是`visible`。
 
 在 BFC 中，每个盒的左外边缘都与其包含的块的左边缘相接。
 
@@ -130,195 +96,175 @@ CSS 中的`z-index`属性控制重叠元素的垂直叠加顺序。`z-index`只
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-* https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
-
-[[↑] 回到顶部](#css-问题)
+- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+- https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
 
 ### 有哪些清除浮动的技术，都适用哪些情况？
 
-* 空`div`方法：`<div style="clear:both;"></div>`。
-* Clearfix 方法：上文使用`.clearfix`类已经提到。
-* `overflow: auto`或`overflow: hidden`方法：上文已经提到。
+- 空`div`方法：`<div style="clear:both;"></div>`。
+- Clearfix 方法：上文使用`.clearfix`类已经提到。
+- `overflow: auto`或`overflow: hidden`方法：上文已经提到。
 
 在大型项目中，我会使用 Clearfix 方法，在需要的地方使用`.clearfix`。设置`overflow: hidden`的方法可能使其子元素显示不完整，当子元素的高度大于父元素时。
 
-[[↑] 回到顶部](#css-问题)
+### 请解释什么是精灵图（css sprites），以及如何实现？
 
-### 请解释什么是雪碧图（css sprites），以及如何实现？
+精灵图，也称雪碧图。因常见碳酸饮料雪碧的英文名也是 Sprite，因此也有人会使用雪碧图的非正式译名。
 
-雪碧图是把多张图片整合到一张上的图片。它被运用在众多使用了很多小图标的网站上（Gmail 在使用）。实现方法：
+精灵图是把多张图片整合到一张上的图片。它被运用在众多使用了很多小图标的网站上（Gmail 在使用）。实现方法：
 
-1. 使用生成器将多张图片打包成一张雪碧图，并为其生成合适的 CSS。
+1. 使用生成器将多张图片打包成一张精灵图，并为其生成合适的 CSS。
 1. 每张图片都有相应的 CSS 类，该类定义了`background-image`、`background-position`和`background-size`属性。
 1. 使用图片时，将相应的类添加到你的元素中。
 
 好处：
 
-* 减少加载多张图片的 HTTP 请求数（一张雪碧图只需要一个请求）。但是对于 HTTP2 而言，加载多张图片不再是问题。
-* 提前加载资源，防止在需要时才在开始下载引发的问题，比如只出现在`:hover`伪类中的图片，不会出现闪烁。
+- 减少加载多张图片的 HTTP 请求数（一张精灵图只需要一个请求）。但是对于 HTTP2 而言，加载多张图片不再是问题。
+- 提前加载资源，防止在需要时才在开始下载引发的问题，比如只出现在`:hover`伪类中的图片，不会出现闪烁。
 
 ###### 参考
 
-* https://css-tricks.com/css-sprites/
-
-[[↑] 回到顶部](#css-问题)
+- https://css-tricks.com/css-sprites/
 
 ### 如何解决不同浏览器的样式兼容性问题？
 
-* 在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
-* 使用已经处理好此类问题的库，比如 Bootstrap。
-* 使用 `autoprefixer` 自动生成 CSS 属性前缀。
-* 使用 Reset CSS 或 Normalize.css。
-
-[[↑] 回到顶部](#css-问题)
+- 在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
+- 使用已经处理好此类问题的库，比如 Bootstrap。
+- 使用 `autoprefixer` 自动生成 CSS 属性前缀。
+- 使用 Reset CSS 或 Normalize.css。
 
 ### 如何为功能受限的浏览器提供页面？ 使用什么样的技术和流程？
 
-* 优雅的降级：为现代浏览器构建应用，同时确保它在旧版浏览器中正常运行。
-* 渐进式增强：构建基于用户体验的应用，但在浏览器支持时添加新增功能。
-* 利用 [caniuse.com](https://caniuse.com/) 检查特性支持。
-* 使用 `autoprefixer` 自动生成 CSS 属性前缀。
-* 使用 [Modernizr](https://modernizr.com/)进行特性检测。
-
-[[↑] 回到顶部](#css-问题)
+- 优雅的降级：为现代浏览器构建应用，同时确保它在旧版浏览器中正常运行。
+- 渐进式增强：构建基于用户体验的应用，但在浏览器支持时添加新增功能。
+- 利用 [caniuse.com](https://caniuse.com/) 检查特性支持。
+- 使用 `autoprefixer` 自动生成 CSS 属性前缀。
+- 使用 [Modernizr](https://modernizr.com/)进行特性检测。
 
 ### 有什么不同的方式可以隐藏内容（使其仅适用于屏幕阅读器）？
 
 这些方法与可访问性（a11y）有关。
 
-* `visibility: hidden`：元素仍然在页面流中，并占用空间。
-* `width: 0; height: 0`：使元素不占用屏幕上的任何空间，导致不显示它。
-* `position: absolute; left: -99999px`： 将它置于屏幕之外。
-* `text-indent: -9999px`：这只适用于`block`元素中的文本。
-* Metadata： 例如通过使用 Schema.org，RDF 和 JSON-LD。
-* WAI-ARIA：如何增加网页可访问性的 W3C 技术规范。
+- `width: 0; height: 0`：使元素不占用屏幕上的任何空间，导致不显示它。
+- `position: absolute; left: -99999px`： 将它置于屏幕之外。
+- `text-indent: -9999px`：这只适用于`block`元素中的文本。
+- Metadata： 例如通过使用 Schema.org，RDF 和 JSON-LD。
+- WAI-ARIA：如何增加网页可访问性的 W3C 技术规范。
 
 即使 WAI-ARIA 是理想的解决方案，我也会采用绝对定位方法，因为它具有最少的注意事项，适用于大多数元素，而且使用起来非常简单。
 
 ###### 参考
 
-* https://www.w3.org/TR/wai-aria-1.1/
-* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
-* http://a11yproject.com/
-
-[[↑] 回到顶部](#css-问题)
+- https://www.w3.org/TR/wai-aria-1.1/
+- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
+- http://a11yproject.com/
 
 ### 你使用过栅格系统吗？偏爱哪一个？
 
 我使用 `float`-based 栅格系统，因为它相比 flex、grid 系统，拥有更多浏览器的支持。它已经在 Bootstrap 中使用多年，并且已经被证明是可行的。
 
-[[↑] 回到顶部](#css-问题)
-
 ### 你是否使用过媒体查询或移动优先的布局？
 
 是的，一个例子就是根据窗口的尺寸改变导航的样式。
 
-[[↑] 回到顶部](#css-问题)
-
 ### 你熟悉制作 SVG 吗？
 
-是的，你可以使用内联CSS、嵌入式CSS部分或外部CSS文件对形状进行着色（包括指定对象上的属性）。在网上大部分SVG使用的是内联CSS，不过每个类型都有优点和缺点。
+是的，你可以使用内联 CSS、嵌入式 CSS 部分或外部 CSS 文件对形状进行着色（包括指定对象上的属性）。在网上大部分 SVG 使用的是内联 CSS，不过每个类型都有优点和缺点。
 
-通过设置`fill`和`stroke`属性，可以完成基本着色操作。`fill`可以设置内部的颜色，`stroke`可以设置周围绘制的线条的颜色。你可以使用与`HTML`中使用的CSS颜色命名方案相同的CSS颜色命名方案：颜色名称（即`red`）、RGB值（即`rgb(255,0,0)`）、十六进制值、RGBA值等等。
+通过设置`fill`和`stroke`属性，可以完成基本着色操作。`fill`可以设置内部的颜色，`stroke`可以设置周围绘制的线条的颜色。你可以使用与`HTML`中使用的 CSS 颜色命名方案相同的 CSS 颜色命名方案：颜色名称（即`red`）、RGB 值（即`rgb(255,0,0)`）、十六进制值、RGBA 值等等。
 
 ```html
-<rect x="10" y="10" width="100" height="100" stroke="blue" 
-  fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
+<rect
+  x="10"
+  y="10"
+  width="100"
+  height="100"
+  stroke="blue"
+  fill="purple"
+  fill-opacity="0.5"
+  stroke-opacity="0.8" />
 ```
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
-
-
-[[↑] 回到顶部](#css-问题)
+- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
 
 ### 除了`screen`，你还能说出一个 @media 属性的例子吗？
 
-TODO
+- `all` 适用于所有设备。
+- `print` 为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media（媒体屏幕尺寸）, 以满足个别设备网页尺寸不匹配等问题。
+- `screen` 主要适用于彩色的电脑屏幕
+- `speech` 解析 speech 这个合成器. 注意: CSS2 已经有一个相似的媒体类型叫 aural.
 
-[[↑] 回到顶部](#css-问题)
+###### 参考
+
+- https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media
 
 ### 编写高效的 CSS 应该注意什么？
 
 首先，浏览器从最右边的选择器，即关键选择器（key selector），向左依次匹配。根据关键选择器，浏览器从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。避免使用标签和通用选择器作为关键选择器，因为它们会匹配大量的元素，浏览器必须要进行大量的工作，去判断这些元素的父元素们是否匹配。
 
-[BEM (Block Element Modifier)](https://bem.info/) methodology recommends that everything has a single class, and, where you need hierarchy, that gets baked into the name of the class as well, this naturally makes the selector efficient and easy to override.
 [BEM (Block Element Modifier)](https://bem.info/)原则上建议为独立的 CSS 类命名，并且在需要层级关系时，将关系也体现在命名中，这自然会使选择器高效且易于覆盖。
 
 搞清楚哪些 CSS 属性会触发重新布局（reflow）、重绘（repaint）和合成（compositing）。在写样式时，避免触发重新布局的可能。
 
 ###### 参考
 
-* https://developers.google.com/web/fundamentals/performance/rendering/
-* https://csstriggers.com/
-
-[[↑] 回到顶部](#css-问题)
+- https://developers.google.com/web/fundamentals/performance/rendering/
+- https://csstriggers.com/
 
 ### 使用 CSS 预处理的优缺点分别是什么？
 
 优点：
 
-* 提高 CSS 可维护性。
-* 易于编写嵌套选择器。
-* 引入变量，增添主题功能。可以在不同的项目中共享主题文件。
-* 通过混合（Mixins）生成重复的 CSS。
-* Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to download each CSS file.
-* 将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。
+- 提高 CSS 可维护性。
+- 易于编写嵌套选择器。
+- 引入变量，增添主题功能。可以在不同的项目中共享主题文件。
+- 通过混合（Mixins）生成重复的 CSS。
+- 将代码分割成多个文件。不进行预处理的 CSS，虽然也可以分割成多个文件，但需要建立多个 HTTP 请求加载这些文件。
 
 缺点：
 
-* 需要预处理工具。
-* 重新编译的时间可能会很慢。
-
-[[↑] 回到顶部](#css-问题)
+- 需要预处理工具。
+- 重新编译的时间可能会很慢。
 
 ### 对于你使用过的 CSS 预处理，说说喜欢和不喜欢的地方？
 
 喜欢：
 
-* 绝大部分优点上题以及提过。
-* Less 用 JavaScript 实现，与 NodeJS 高度结合。
+- 绝大部分优点上题以及提过。
+- Less 用 JavaScript 实现，与 NodeJS 高度结合。
 
 **Dislikes:**
 
-* 我通过`node-sass`使用 Sass，它用 C ++ 编写的 LibSass 绑定。在 Node 版本切换时，我必须经常重新编译。
-* Less 中，变量名称以`@`作为前缀，容易与 CSS 关键字混淆，如`@media`、`@import`和`@font-face`。
-
-[[↑] 回到顶部](#css-问题)
+- 我通过`node-sass`使用 Sass，它用 C ++ 编写的 LibSass 绑定。在 Node 版本切换时，我必须经常重新编译。
+- Less 中，变量名称以`@`作为前缀，容易与 CSS 关键字混淆，如`@media`、`@import`和`@font-face`。
 
 ### 如何实现一个使用非标准字体的网页设计？
 
 使用`@font-face`并为不同的`font-weight`定义`font-family`。
 
-[[↑] 回到顶部](#css-问题)
-
 ### 解释浏览器如何确定哪些元素与 CSS 选择器匹配。
 
 这部分与上面关于编写高效的 CSS 有关。浏览器从最右边的选择器（关键选择器）根据关键选择器，浏览器从 DOM 中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。
 
-例如，对于形如`p span`的选择器，浏览器首先找到所有`<span>`元素，并遍历它的父元素直到根元素以找到`<p>`元素。对于特定的`<span>`，只要找到一个`<p>`，就知道'<span>`已经匹配并停止继续匹配。
+例如，对于形如`p span`的选择器，浏览器首先找到所有`<span>`元素，并遍历它的父元素直到根元素以找到`<p>`元素。对于特定的`<span>`，只要找到一个`<p>`，就知道`<span>`已经匹配并停止继续匹配。
 
 ###### 参考
 
-* https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
-
-[[↑] 回到顶部](#css-问题)
+- https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left
 
 ### 描述伪元素及其用途。
 
 CSS 伪元素是添加到选择器的关键字，去选择元素的特定部分。它们可以用于装饰（`:first-line`，`:first-letter`）或将元素添加到标记中（与 content:...组合），而不必修改标记（`:before`，`:after`）。
 
-* `:first-line`和`:first-letter`可以用来修饰文字。
-* 上面提到的`.clearfix`方法中，使用`clear: both`来添加不占空间的元素。
-* 使用`:before`和`after`展示提示中的三角箭头。鼓励关注点分离，因为三角被视为样式的一部分，而不是真正的 DOM。如果不使用额外的 HTML 元素，只用 CSS 样式绘制三角形是不太可能的。
+- `:first-line`和`:first-letter`可以用来修饰文字。
+- 上面提到的`.clearfix`方法中，使用`clear: both`来添加不占空间的元素。
+- 使用`:before`和`after`展示提示中的三角箭头。鼓励关注点分离，因为三角被视为样式的一部分，而不是真正的 DOM。如果不使用额外的 HTML 元素，只用 CSS 样式绘制三角形是不太可能的。
 
 ###### 参考
 
-* https://css-tricks.com/almanac/selectors/a/after-and-before/
-
-[[↑] 回到顶部](#css-问题)
+- https://css-tricks.com/almanac/pseudo-selectors/b/after-and-before/
 
 ### 说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。
 
@@ -326,80 +272,68 @@ CSS 盒模型描述了以文档树中的元素而生成的矩形框，并根据
 
 CSS 盒模型负责计算：
 
-* 块级元素占用多少空间。
-* 边框是否重叠，边距是否合并。
-* 盒子的尺寸。
+- 块级元素占用多少空间。
+- 边框是否重叠，边距是否合并。
+- 盒子的尺寸。
 
 盒模型有以下规则：
 
-* 块级元素的大小由`width`、`height`、`padding`、`border`和`margin`决定。
-* 如果没有指定`height`，则块级元素的高度等于其包含子元素的内容高度加上`padding`（除非有浮动元素，请参阅下文）。
-* 如果没有指定`width`，则非浮动块级元素的宽度等于其父元素的宽度减去父元素的`padding`。
-* 元素的`height`是由内容的`height`来计算的。
-* 元素的`width`是由内容的`width`来计算的。
-* 默认情况下，`padding`和`border`不是元素`width`和`height`的组成部分。
+- 块级元素的大小由`width`、`height`、`padding`、`border`和`margin`决定。
+- 如果没有指定`height`，则块级元素的高度等于其包含子元素的内容高度加上`padding`（除非有浮动元素，请参阅下文）。
+- 如果没有指定`width`，则非浮动块级元素的宽度等于其父元素的宽度减去父元素的`padding`。
+- 元素的`height`是由内容的`height`来计算的。
+- 元素的`width`是由内容的`width`来计算的。
+- 默认情况下，`padding`和`border`不是元素`width`和`height`的组成部分。
 
 ###### 参考
 
-* https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
-
-[[↑] 回到顶部](#css-问题)
+- https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model
 
 ### `* { box-sizing: border-box; }`会产生怎样的效果？
 
-* 元素默认应用了`box-sizing: content-box`，元素的宽高只会决定内容（content）的大小。
-* `box-sizing: border-box`改变计算元素`width`和`height`的方式，`border`和`padding`的大小也将计算在内。
-* 元素的`height` = 内容（content）的高度 + 垂直方向的`padding` + 垂直方向`border`的宽度
-* 元素的`width` = 内容（content）的宽度 + 水平方向的`padding` + 水平方向`border`的宽度
-
-[[↑] 回到顶部](#css-问题)
+- 元素默认应用了`box-sizing: content-box`，元素的宽高只会决定内容（content）的大小。
+- `box-sizing: border-box`改变计算元素`width`和`height`的方式，`border`和`padding`的大小也将计算在内。
+- 元素的`height` = 内容（content）的高度 + 垂直方向的`padding` + 垂直方向`border`的宽度
+- 元素的`width` = 内容（content）的宽度 + 水平方向的`padding` + 水平方向`border`的宽度
 
 ### `display`的属性值都有哪些？
 
-* `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`.
+- `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item`.
 
 TODO
 
-[[↑] 回到顶部](#css-问题)
-
 ### `inline`和`inline-block`有什么区别？
 
 我把`block`也加入其中，为了获得更好的比较。
 
-|                                 | `block`                                                     | `inline-block`                             | `inline`                                                                                                           |
-| ------------------------------- | ----------------------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
-| 大小                            | 填充其父容器的宽度。                                        | 取决于内容。                               | 取决于内容。                                                                                                       |
-| 定位                            | 从新的一行开始，并且不允许旁边有 HTML 元素（除非是`float`） | 与其他内容一起流动，并允许旁边有其他元素。 | 与其他内容一起流动，并允许旁边有其他元素。                                                                         |
-| 能否设置`width`和`height`       | 能                                                          | 能                                         | 不能。 设置会被忽略。                                                                                              |
-| 可以使用`vertical-align`对齐    | 不可以                                                      | 可以                                       | 可以                                                                                                               |
-| 边距（margin）和填充（padding） | 各个方向都存在                                              | 各个方向都存在                             | 只有水平方向存在。垂直方向会被忽略。 尽管`border`和`padding`在`content`周围，但垂直方向上的空间取决于'line-height' |
-| 浮动（float）                   | -                                                           | -                                          | 就像一个`block`元素，可以设置垂直边距和填充。                                                                      |
-
-[[↑] 回到顶部](#css-问题)
+|  | `block` | `inline-block` | `inline` |
+| --- | --- | --- | --- |
+| 大小 | 填充其父容器的宽度。 | 取决于内容。 | 取决于内容。 |
+| 定位 | 从新的一行开始，并且不允许旁边有 HTML 元素（除非是`float`） | 与其他内容一起流动，并允许旁边有其他元素。 | 与其他内容一起流动，并允许旁边有其他元素。 |
+| 能否设置`width`和`height` | 能 | 能 | 不能。 设置会被忽略。 |
+| 可以使用`vertical-align`对齐 | 不可以 | 可以 | 可以 |
+| 边距（margin）和填充（padding） | 各个方向都存在 | 各个方向都存在 | 只有水平方向存在。垂直方向会被忽略。 尽管`border`和`padding`在`content`周围，但垂直方向上的空间取决于'line-height' |
+| 浮动（float） | - | - | 就像一个`block`元素，可以设置垂直边距和填充。 |
 
 ### `relative`、`fixed`、`absolute`和`static`四种定位有什么区别？
 
 经过定位的元素，其`position`属性值必然是`relative`、`absolute`、`fixed`或`sticky`。
 
-* `static`：默认定位属性值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
-* `relative`：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
-* `absolute`：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
-* `fixed`：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
-* `sticky`：盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 `table` 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。`position: sticky` 对 `table` 元素的效果与 `position: relative` 相同。
+- `static`：默认定位属性值。该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。
+- `relative`：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。
+- `absolute`：不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
+- `fixed`：不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
+- `sticky`：盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 `table` 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。`position: sticky` 对 `table` 元素的效果与 `position: relative` 相同。
 
 ###### 参考
 
-* https://developer.mozilla.org/en/docs/Web/CSS/position
-
-[[↑] 回到顶部](#css-问题)
+- https://developer.mozilla.org/en/docs/Web/CSS/position
 
 ### 你使用过哪些现有的 CSS 框架？你是如何改进它们的？
 
-* **Bootstrap**： 更新周期缓慢。Bootstrap 4 已经处于 alpha 版本将近两年了。添加了在页面中广泛使用的微调按钮组件。
-* **Semantic UI**：源代码结构使得自定义主题很难理解。非常规主题系统的使用体验很差。外部库的路径需要硬编码（hard code）配置。变量重新赋值没有 Bootstrap 设计得好。
-* **Bulma**： 需要很多非语义的类和标记，显得很多余。不向后兼容，以至于升级版本后，会破坏应用的正常运行。
-
-[[↑] 回到顶部](#css-问题)
+- **Bootstrap**： 更新周期缓慢。Bootstrap 4 已经处于 alpha 版本将近两年了。添加了在页面中广泛使用的微调按钮组件。
+- **Semantic UI**：源代码结构使得自定义主题很难理解。非常规主题系统的使用体验很差。外部库的路径需要硬编码（hard code）配置。变量重新赋值没有 Bootstrap 设计得好。
+- **Bulma**： 需要很多非语义的类和标记，显得很多余。不向后兼容，以至于升级版本后，会破坏应用的正常运行。
 
 ### 你了解 CSS Flexbox 和 Grid 吗？
 
@@ -411,15 +345,46 @@ Grid 创建基于栅格的布局，是迄今为止最直观的方法（最好是
 
 ###### 参考
 
-* https://philipwalton.github.io/solved-by-flexbox/
-
-[[↑] 回到顶部](#css-问题)
+- https://philipwalton.github.io/solved-by-flexbox/
 
 ### 请解释在编写网站时，响应式与移动优先的区别。
 
-TODO
+请注意，这两种方法不是互斥的。
 
-[[↑] 回到顶部](#css-问题)
+使一个网站响应意味着网站会根据设备屏幕的尺寸会自行调整一些元素的尺寸和功能，通常是通过 CSS 媒体查询的视口宽度，例如，使字体在小屏幕上变小。
+
+```css
+@media (min-width: 601px) {
+  .my-class {
+    font-size: 24px;
+  }
+}
+
+@media (max-width: 600px) {
+  .my-class {
+    font-size: 12px;
+  }
+}
+```
+
+移动优先策略同样也指的是响应式，但是它建议我们应该默认定义移动设备的所有样式，仅仅添加特定的规则用来适配其他设备，下面是前一个例子：
+
+```css
+.my-class {
+  font-size: 12px;
+}
+
+@media (min-width: 600px) {
+  .my-class {
+    font-size: 24px;
+  }
+}
+```
+
+移动优先策略有 2 大优势：
+
+- 在移动设备上有更好的性能，因为应用于它们的规则无需针对任何媒体查询的验证。
+- 它让你强制编写与响应 CSS 规则相关的更干净的代码。
 
 ### 响应式设计与自适应设计有何不同？
 
@@ -431,11 +396,9 @@ TODO
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design
-* http://mediumwell.com/responsive-adaptive-mobile/
-* https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
-
-[[↑] 回到顶部](#css-问题)
+- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
+- http://mediumwell.com/responsive-adaptive-mobile/
+- https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
 
 ### 你有没有使用过视网膜分辨率的图形？当中使用什么技术？
 
@@ -447,9 +410,7 @@ TODO
 
 ###### 参考
 
-* https://www.sitepoint.com/css-techniques-for-retina-displays/
-
-[[↑] 回到顶部](#css-问题)
+- https://www.sitepoint.com/css-techniques-for-retina-displays/
 
 ### 什么情况下，用`translate()`而不用绝对定位？什么时候，情况相反。
 
@@ -459,12 +420,10 @@ TODO
 
 ###### 参考
 
-* https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
-
-[[↑] 回到顶部](#css-问题)
+- https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
 
 ### 其他答案
 
-* https://neal.codes/blog/front-end-interview-css-questions
-* https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/
-* http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
+- https://neal.codes/blog/front-end-interview-css-questions
+- https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/
+- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
diff --git a/Translations/Chinese/questions/html-questions.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/html-questions.md
similarity index 58%
rename from Translations/Chinese/questions/html-questions.md
rename to website/i18n/zh-CN/docusaurus-plugin-content-docs/current/html-questions.md
index 99fe308b00..f42596e0a1 100644
--- a/Translations/Chinese/questions/html-questions.md
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/html-questions.md
@@ -1,18 +1,12 @@
-# HTML 问题
-
-本章节是[前端开发者面试问题 - HTML 部分](https://github.com/h5bp/Front-end-Developer-Interview-Questions#html-questions)的参考答案。 欢迎提出 PR 进行建议和指正！
-
-* [`DOCTYPE`有什么用？](#doctype有什么用)
-* [如何提供包含多种语言内容的页面？](#如何提供包含多种语言内容的页面)
-* [在设计开发多语言网站时，需要留心哪些事情？](#在设计开发多语言网站时需要留心哪些事情)
-* [什么是`data-`属性？](#什么是data-属性)
-* [将 HTML5 看作成开放的网络平台，什么是 HTML5 的基本构件（building block）？](#将-html5-看作成开放的网络平台什么是-html5-的基本构件building-block)
-* [请描述`cookie`、`sessionStorage`和`localStorage`的区别。](#请描述cookiesessionstorage和localstorage的区别)
-* [请描述`<script>`、`<script async>`和`<script defer>`的区别。](#请描述scriptscript-async和script-defer的区别)
-* [为什么最好把 CSS 的`<link>`标签放在`<head></head>`之间？为什么最好把 JS 的`<script>`标签恰好放在`</body>`之前，有例外情况吗？](#为什么最好把css的link标签放在headhead之间为什么最好把js的script标签恰好放在body之前有例外情况吗)
-* [什么是渐进式渲染（progressive rendering）？](#什么是渐进式渲染progressive-rendering)
-* [为什么在`<img>`标签中使用`srcset`属性？请描述浏览器遇到该属性后的处理过程。](#为什么在img标签中使用srcset属性请描述浏览器遇到该属性后的处理过程)
-* [你有过使用不同模版语言的经历吗？](#你有过使用不同模版语言的经历吗)
+---
+title: HTML 问题
+---
+
+本章节是[前端开发者面试问题 - HTML 部分](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/html-questions.md)的参考答案。 欢迎提出 PR 进行建议和指正！
+
+import TOCInline from '@theme/TOCInline';
+
+<TOCInline toc={toc} />
 
 ### `DOCTYPE`有什么用？
 
@@ -22,11 +16,9 @@
 
 ###### 参考
 
-* https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
-* https://www.w3.org/QA/Tips/Doctype
-* https://quirks.spec.whatwg.org/#history
-
-[[↑] 回到顶部](#html-问题)
+- https://stackoverflow.com/questions/7695044/what-does-doctype-html-do
+- https://www.w3.org/QA/Tips/Doctype
+- https://quirks.spec.whatwg.org/#history
 
 ### 如何提供包含多种语言内容的页面？
 
@@ -38,26 +30,22 @@
 
 ###### 参考
 
-* https://www.w3.org/International/getting-started/language
-
-[[↑] 回到顶部](#html-问题)
+- https://www.w3.org/International/getting-started/language
 
 ### 在设计开发多语言网站时，需要留心哪些事情？
 
-* 在 HTML 中使用`lang`属性。
-* 引导用户切换到自己的母语——让用户能够轻松地切换到自己的国家或语言，而不用麻烦。
-* 在图片中展示文本会阻碍网站规模增长——把文本放在图片中展示，仍然是一种非常流行的方式。这样做可以在所有终端上，都能显示出美观的非系统字体。然而，为了翻译图片中的文本，需要为每种语言单独创建对应的图片，这种做法很容易在图片数量不断增长的过程中失控。
-* 限制词语或句子的长度——网页内容在使用其他语言表述时，文字长度会发生变化。设计时，需要警惕文字长度溢出布局的问题，最好不要使用受文字长度影响较大的设计。比如标题、标签、按钮的设计，往往很受文字长度影响，这些设计中的文字与正文或评论部分不同，一般不可以自由换行。
-* 注意颜色的使用——颜色在不同的语言和文化中，意义和感受是不同的。设计时应该使用恰当的颜色。
-* 日期和货币的格式化——日期在不同的国家和地区，会以不同的方式显示。比如美国的日期格式是“May 31, 2012”，而在欧洲部分地区，日期格式是“31 May 2012”。
-* 不要使用连接的翻译字符串——不要做类似这样的事情，比如`“今天的日期是”+具体日期`。这样做可能会打乱其他语言的语序。替代方案是，为每种语言编写带变量替换的模版字符串。请看下面两个分别用英语和中文表示的句子：`I will travel on {% date %}`和`{% date %} 我会出发`。可以看到，语言的语法规则不同，变量的位置是不同的。
-* 注意语言阅读的方向——在英语中，文字是从左向右阅读的；而在传统日语中，文字是从右向左阅读的。
+- 在 HTML 中使用`lang`属性。
+- 引导用户切换到自己的母语——让用户能够轻松地切换到自己的国家或语言，而不用麻烦。
+- 在图片中展示文本会阻碍网站规模增长——把文本放在图片中展示，仍然是一种非常流行的方式。这样做可以在所有终端上，都能显示出美观的非系统字体。然而，为了翻译图片中的文本，需要为每种语言单独创建对应的图片，这种做法很容易在图片数量不断增长的过程中失控。
+- 限制词语或句子的长度——网页内容在使用其他语言表述时，文字长度会发生变化。设计时，需要警惕文字长度溢出布局的问题，最好不要使用受文字长度影响较大的设计。比如标题、标签、按钮的设计，往往很受文字长度影响，这些设计中的文字与正文或评论部分不同，一般不可以自由换行。
+- 注意颜色的使用——颜色在不同的语言和文化中，意义和感受是不同的。设计时应该使用恰当的颜色。
+- 日期和货币的格式化——日期在不同的国家和地区，会以不同的方式显示。比如美国的日期格式是“May 31, 2012”，而在欧洲部分地区，日期格式是“31 May 2012”。
+- 不要使用连接的翻译字符串——不要做类似这样的事情，比如`“今天的日期是”+具体日期`。这样做可能会打乱其他语言的语序。替代方案是，为每种语言编写带变量替换的模版字符串。请看下面两个分别用英语和中文表示的句子：`I will travel on {% date %}`和`{% date %} 我会出发`。可以看到，语言的语法规则不同，变量的位置是不同的。
+- 注意语言阅读的方向——在英语中，文字是从左向右阅读的；而在传统日语中，文字是从右向左阅读的。
 
 ###### 参考
 
-* https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
-
-[[↑] 回到顶部](#html-问题)
+- https://www.quora.com/What-kind-of-things-one-should-be-wary-of-when-designing-or-developing-for-multilingual-sites
 
 ### 什么是`data-`属性？
 
@@ -67,63 +55,55 @@
 
 ###### 参考
 
-* http://html5doctor.com/html5-custom-data-attributes/
-* https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
-
-[[↑] 回到顶部](#html-问题)
+- http://html5doctor.com/html5-custom-data-attributes/
+- https://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
 
 ### 将 HTML5 看作成开放的网络平台，什么是 HTML5 的基本构件（building block）？
 
-* 语义 - 提供更准确地描述内容。
-* 连接 - 提供新的方式与服务器通信。
-* 离线和存储 - 允许网页在本地存储数据并有效地离线运行。
-* 多媒体 - 在 Open Web 中，视频和音频被视为一等公民（first-class citizens）。
-* 2D/3D 图形和特效 - 提供更多种演示选项。
-* 性能和集成 - 提供更快的访问速度和性能更好的计算机硬件。
-* 设备访问 - 允许使用各种输入、输出设备。
-* 外观 - 可以开发丰富的主题。
+- 语义 - 提供更准确地描述内容。
+- 连接 - 提供新的方式与服务器通信。
+- 离线和存储 - 允许网页在本地存储数据并有效地离线运行。
+- 多媒体 - 在 Open Web 中，视频和音频被视为一等公民（first-class citizens）。
+- 2D/3D 图形和特效 - 提供更多种演示选项。
+- 性能和集成 - 提供更快的访问速度和性能更好的计算机硬件。
+- 设备访问 - 允许使用各种输入、输出设备。
+- 外观 - 可以开发丰富的主题。
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
-
-[[↑] 回到顶部](#html-问题)
+- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
 
 ### 请描述`cookie`、`sessionStorage`和`localStorage`的区别。
 
 上面提到的技术名词，都是在客户端以键值对存储的存储机制，并且只能将值存储为字符串。
 
-|                                                    | `cookie`                                           | `localStorage` | `sessionStorage` |
-| -------------------------------------------------- | -------------------------------------------------- | -------------- | ---------------- |
-| 由谁初始化                                         | 客户端或服务器，服务器可以使用`Set-Cookie`请求头。 | 客户端         | 客户端           |
-| 过期时间                                           | 手动设置                                           | 永不过期       | 当前页面关闭时   |
-| 在当前浏览器会话（browser sessions）中是否保持不变 | 取决于是否设置了过期时间                           | 是             | 否               |
-| 是否随着每个 HTTP 请求发送给服务器                 | 是，Cookies 会通过`Cookie`请求头，自动发送给服务器 | 否             | 否               |
-| 容量（每个域名）                                   | 4kb                                                | 5MB            | 5MB              |
-| 访问权限                                           | 任意窗口                                           | 任意窗口       | 当前页面窗口     |
+|  | `cookie` | `localStorage` | `sessionStorage` |
+| --- | --- | --- | --- |
+| 由谁初始化 | 客户端或服务器，服务器可以使用`Set-Cookie`请求头。 | 客户端 | 客户端 |
+| 过期时间 | 手动设置 | 永不过期 | 当前页面关闭时 |
+| 在当前浏览器会话（browser sessions）中是否保持不变 | 取决于是否设置了过期时间 | 是 | 否 |
+| 是否随着每个 HTTP 请求发送给服务器 | 是，Cookies 会通过`Cookie`请求头，自动发送给服务器 | 否 | 否 |
+| 容量（每个域名） | 4kb | 5MB | 5MB |
+| 访问权限 | 任意窗口 | 任意窗口 | 当前页面窗口 |
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
-* http://tutorial.techaltum.com/local-and-session-storage.html
-
-[[↑] 回到顶部](#html-问题)
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
+- http://tutorial.techaltum.com/local-and-session-storage.html
 
 ### 请描述`<script>`、`<script async>`和`<script defer>`的区别。
 
-* `<script>` - HTML 解析中断，脚本被提取并立即执行。执行结束后，HTML 解析继续。
-* `<script async>` - 脚本的提取、执行的过程与 HTML 解析过程并行，脚本执行完毕可能在 HTML 解析完毕之前。当脚本与页面上其他脚本独立时，可以使用`async`，比如用作页面统计分析。
-* `<script defer>` - 脚本仅提取过程与 HTML 解析过程并行，脚本的执行将在 HTML 解析完毕后进行。如果有多个含`defer`的脚本，脚本的执行顺序将按照在 document 中出现的位置，从上到下顺序执行。
+- `<script>` - HTML 解析中断，脚本被提取并立即执行。执行结束后，HTML 解析继续。
+- `<script async>` - 脚本的提取、执行的过程与 HTML 解析过程并行，脚本执行完毕可能在 HTML 解析完毕之前。当脚本与页面上其他脚本独立时，可以使用`async`，比如用作页面统计分析。
+- `<script defer>` - 脚本仅提取过程与 HTML 解析过程并行，脚本的执行将在 HTML 解析完毕后进行。如果有多个含`defer`的脚本，脚本的执行顺序将按照在 document 中出现的位置，从上到下顺序执行。
 
 注意：没有`src`属性的脚本，`async`和`defer`属性会被忽略。
 
 ###### 参考
 
-* http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
-* https://stackoverflow.com/questions/10808109/script-tag-async-defer
-* https://bitsofco.de/async-vs-defer/
-
-[[↑] 回到顶部](#html-问题)
+- http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
+- https://stackoverflow.com/questions/10808109/script-tag-async-defer
+- https://bitsofco.de/async-vs-defer/
 
 ### 为什么最好把 CSS 的`<link>`标签放在`<head></head>`之间？为什么最好把 JS 的`<script>`标签恰好放在`</body>`之前，有例外情况吗？
 
@@ -139,9 +119,7 @@
 
 ###### 参考
 
-* https://developer.yahoo.com/performance/rules.html#css_top
-
-[[↑] 回到顶部](#html-问题)
+- https://developer.yahoo.com/performance/rules.html#css_top
 
 ### 什么是渐进式渲染（progressive rendering）？
 
@@ -151,16 +129,14 @@
 
 一些举例：
 
-* 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
-* 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听`DOMContentLoaded`/`load`事件加载其他资源和内容。
-* 异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。更多相关细节可以在[这里](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)找到。
+- 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
+- 确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听`DOMContentLoaded`/`load`事件加载其他资源和内容。
+- 异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。更多相关细节可以在[这里](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)找到。
 
 ###### 参考
 
-* https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
-* http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
-
-[[↑] 回到顶部](#html-问题)
+- https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
+- http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/
 
 ### 为什么在`<img>`标签中使用`srcset`属性？请描述浏览器遇到该属性后的处理过程。
 
@@ -179,19 +155,13 @@
 
 ###### 参考
 
-* https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
-
-[[↑] 回到顶部](#html-问题)
+- https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
 
 ### 你有过使用不同模版语言的经历吗？
 
 有过，比如 Pug （以前叫 Jade）、 ERB、 Slim、 Handlebars、 Jinja、 Liquid 等等。在我看来，这些模版语言大多是相似的，都提供了用于展示数据的内容替换和过滤器的功能。大部分模版引擎都支持自定义过滤器，以展示自定义格式的内容。
 
-[[↑] 回到顶部](#html-问题)
-
 ### 其它答案
 
-* https://neal.codes/blog/front-end-interview-questions-html/
-* http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
-
----
+- https://neal.codes/blog/front-end-interview-questions-html/
+- http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/
diff --git a/Translations/Chinese/questions/javascript-questions.md b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/javascript-questions.md
similarity index 70%
rename from Translations/Chinese/questions/javascript-questions.md
rename to website/i18n/zh-CN/docusaurus-plugin-content-docs/current/javascript-questions.md
index 04ac61bc72..6ed75dbbf6 100644
--- a/Translations/Chinese/questions/javascript-questions.md
+++ b/website/i18n/zh-CN/docusaurus-plugin-content-docs/current/javascript-questions.md
@@ -1,80 +1,24 @@
-## JS 问题
-
-本章节是[前端开发者面试问题 - JS 部分](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/javascript-questions.md)的参考答案。 欢迎提出 PR 进行建议和指正！
-
-* [请解释事件委托（event delegation）。](#请解释事件委托event-delegation)
-* [请简述`JavaScript`中的`this`。](#请简述javascript中的this)
-* [请解释原型继承（prototypal inheritance）的工作原理。](#请解释原型继承prototypal-inheritance的工作原理)
-* [说说你对 AMD 和 CommonJS 的了解。](#说说你对-amd-和-commonjs-的了解)
-* [请解释下面代码为什么不能用作 IIFE：`function foo(){ }();`，需要作出哪些修改才能使其成为 IIFE？](#请解释下面代码为什么不能用作-iifefunction-foo-需要作出哪些修改才能使其成为-iife)
-* [`null`、`undefined`和未声明变量之间有什么区别？如何检查判断这些状态值？](#nullundefined和未声明变量之间有什么区别如何检查判断这些状态值)
-* [什么是闭包（closure），为什么使用闭包？](#什么是闭包closure为什么使用闭包)
-* [请说明`.forEach`循环和`.map()`循环的主要区别，它们分别在什么情况下使用？](#请说明foreach循环和map循环的主要区别它们分别在什么情况下使用)
-* [匿名函数的典型应用场景是什么？](#匿名函数的典型应用场景是什么)
-* [你如何组织自己的代码？（使用模块模式（module pattern）还是经典继承（classical inheritance）？）](#你如何组织自己的代码使用模块模式module-pattern还是经典继承classical-inheritance)
-* [宿主对象（host objects）和原生对象（native objects）的区别是什么？](#宿主对象host-objects和原生对象native-objects的区别是什么)
-* [下列语句有什么区别：`function Person(){}`、`var person = Person()`和`var person = new Person()`？](#下列语句有什么区别function-personvar-person--person和var-person--new-person)
-* [`.call`和`.apply`有什么区别？](#call和apply有什么区别)
-* [请说明`Function.prototype.bind`的用法。](#请说明functionprototypebind的用法)
-* [什么时候会用到`document.write()`？](#什么时候会用到documentwrite)
-* [功能检测（feature detection）、功能推断（feature inference）和使用 UA 字符串之间有什么区别？](#功能检测feature-detection功能推断feature-inference和使用-ua-字符串之间有什么区别)
-* [请尽可能详细地解释 Ajax。](#请尽可能详细地解释-ajax)
-* [使用 Ajax 的优缺点分别是什么？](#使用ajax的优缺点分别是什么)
-* [请说明 JSONP 的工作原理，它为什么不是真正的 Ajax？](#请说明-jsonp-的工作原理它为什么不是真正的-ajax)
-* [你使用过 JavaScript 模板吗？用过什么相关的库？](#你使用过-javascript-模板吗用过什么相关的库)
-* [请解释变量提升（hoisting）。](#请解释变量提升hoisting)
-* [请描述事件冒泡。](#请描述事件冒泡)
-* [“attribute” 和 “property” 之间有什么区别？](#attribute-和-property-之间有什么区别)
-* [为什么扩展 JavaScript 内置对象是不好的做法？](#为什么扩展-javascript-内置对象是不好的做法)
-* [document 中的`load`事件和`DOMContentLoaded`事件之间的区别是什么？](#document-中的load事件和domcontentloaded事件之间的区别是什么)
-* [`==`和`===`的区别是什么？](#和的区别是什么)
-* [请解释关于 JavaScript 的同源策略。](#请解释关于-javascript-的同源策略)
-* [请使下面的语句生效：](#请使下面的语句生效)
+---
+title: JavaScript 问题
+---
 
-```js
-duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
-```
+本章节是[前端开发者面试问题 - JS 部分](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/src/questions/javascript-questions.md)的参考答案。 欢迎提出 PR 进行建议和指正！
+
+import TOCInline from '@theme/TOCInline';
 
-* [请说明三元表达式中“三元”这个词代表什么？](#请说明三元表达式中三元这个词代表什么)
-* [什么是`"use strict";`？使用它有什么优缺点？](#什么是use-strict使用它有什么优缺点)
-* [创建一个循环，从 1 迭代到 100，`3`的倍数时输出 "fizz"，`5`的倍数时输出 "buzz"，同时为`3`和`5`的倍数时输出 "fizzbuzz"。](#创建一个循环从1迭代到1003的倍数时输出-fizz5的倍数时输出-buzz同时为3和5的倍数时输出-fizzbuzz)
-* [为什么不要使用全局作用域？](#为什么不要使用全局作用域)
-* [为什么要使用`load`事件？这个事件有什么缺点吗？你知道一些代替方案吗，为什么使用它们？](#为什么要使用load事件这个事件有什么缺点吗你知道一些代替方案吗为什么使用它们)
-* [请解释单页应用是什么，如何使其对 SEO 友好。](#请解释单页应用是什么如何使其对seo友好)
-* [你对 Promises 及其 polyfill 的掌握程度如何？](#你对-promises-及其-polyfill-的掌握程度如何)
-* [`Promise`代替回调函数有什么优缺点？](#promise代替回调函数有什么优缺点)
-* [用转译成 JavaScript 的语言写 JavaScript 有什么优缺点？](#用转译成-javascript-的语言写-javascript-有什么优缺点)
-* [你使用什么工具和技巧调试 JavaScript 代码？](#你使用什么工具和技巧调试-javascript-代码)
-* [你使用什么语句遍历对象的属性和数组的元素？](#你使用什么语句遍历对象的属性和数组的元素)
-* [请解释可变对象和不可变对象之间的区别。](#请解释可变对象和不可变对象之间的区别)
-* [请解释同步和异步函数之间的区别。](#请解释同步和异步函数之间的区别)
-* [什么是事件循环？调用堆栈和任务队列之间有什么区别？](#什么是事件循环调用堆栈和任务队列之间有什么区别)
-* [请解释`function foo() {}`和`var foo = function() {}`之间`foo`的用法上的区别。](#请解释function-foo-和var-foo--function-之间foo的用法上的区别)
-* [使用`let`、`var`和`const`创建变量有什么区别？](#使用letvar和const创建变量有什么区别)
-* [ES6 的类和 ES5 的构造函数有什么区别？](#es6-的类和-es5-的构造函数有什么区别)
-* [你能给出一个使用箭头函数的例子吗，箭头函数与其他函数有什么不同？](#你能给出一个使用箭头函数的例子吗箭头函数与其他函数有什么不同)
-* [在构造函数中使用箭头函数有什么好处？](#在构造函数中使用箭头函数有什么好处)
-* [高阶函数（higher-order）的定义是什么？](#高阶函数higher-order的定义是什么)
-* [请给出一个解构（destructuring）对象或数组的例子。](#请给出一个解构destructuring对象或数组的例子)
-* [ES6 的模板字符串为生成字符串提供了很大的灵活性，你可以举个例子吗？](#es6-的模板字符串为生成字符串提供了很大的灵活性你可以举个例子吗)
-* [你能举出一个柯里化函数（curry function）的例子吗？它有哪些好处？](#你能举出一个柯里化函数curry-function的例子吗它有哪些好处)
-* [使用扩展运算符（spread）的好处是什么，它与使用剩余参数语句（rest）有什么区别？](#使用扩展运算符spread的好处是什么它与使用剩余参数语句rest有什么区别)
-* [如何在文件之间共用代码？](#如何在文件之间共用代码)
-* [什么情况下会用到静态类成员？](#什么情况下会用到静态类成员)
+<TOCInline toc={toc} />
 
 ### 请解释事件委托（event delegation）。
 
 事件委托是将事件监听器添加到父元素，而不是每个子元素单独设置事件监听器。当触发子元素时，事件会冒泡到父元素，监听器就会触发。这种技术的好处是：
 
-* 内存占用减少，因为只需要一个父元素的事件处理程序，而不必为每个后代都添加事件处理程序。
-* 无需从已删除的元素中解绑处理程序，也无需将处理程序绑定到新元素上。
+- 内存占用减少，因为只需要一个父元素的事件处理程序，而不必为每个后代都添加事件处理程序。
+- 无需从已删除的元素中解绑处理程序，也无需将处理程序绑定到新元素上。
 
 ###### 参考
 
-* https://davidwalsh.name/event-delegate
-* https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
-
-[[↑] 回到顶部](#js-问题)
+- https://davidwalsh.name/event-delegate
+- https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation
 
 ### 请简述`JavaScript`中的`this`。
 
@@ -91,21 +35,17 @@ JS 中的`this`是一个相对复杂的概念，不是简单几句能解释清
 
 ###### 参考
 
-* https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
-* https://stackoverflow.com/a/3127440/1751946
-
-[[↑] 回到顶部](#js-问题)
+- https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3
+- https://stackoverflow.com/a/3127440/1751946
 
 ### 请解释原型继承（prototypal inheritance）的工作原理。
 
-这是一个非常常见的 JavaScript 问题。所有 JS 对象都有一个`prototype`属性，指向它的原型对象。当试图访问一个对象的属性时，如果没有在该对象上找到，它还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。这种行为是在模拟经典的继承，[但是与其说是继承，不如说是委托（delegation）](https://davidwalsh.name/javascript-objects)。
+这是一个非常常见的 JavaScript 问题。所有 JS 对象都有一个`__proto__`属性，指向它的原型对象。当试图访问一个对象的属性时，如果没有在该对象上找到，它还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。这种行为是在模拟经典的继承，[但是与其说是继承，不如说是委托（delegation）](https://davidwalsh.name/javascript-objects)。
 
 ###### 参考
 
-* https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
-* https://davidwalsh.name/javascript-objects
-
-[[↑] 回到顶部](#js-问题)
+- https://www.quora.com/What-is-prototypal-inheritance/answer/Kyle-Simpson
+- https://davidwalsh.name/javascript-objects
 
 ### 说说你对 AMD 和 CommonJS 的了解。
 
@@ -117,10 +57,8 @@ JS 中的`this`是一个相对复杂的概念，不是简单几句能解释清
 
 ###### 参考
 
-* https://auth0.com/blog/javascript-module-systems-showdown/
-* https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
-
-[[↑] 回到顶部](#js-问题)
+- https://auth0.com/blog/javascript-module-systems-showdown/
+- https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
 
 ### 请解释下面代码为什么不能用作 IIFE：`function foo(){ }();`，需要作出哪些修改才能使其成为 IIFE？
 
@@ -130,19 +68,18 @@ IIFE（Immediately Invoked Function Expressions）代表立即执行函数。 Ja
 
 你可能会用到 `void` 操作符：`void function foo(){ }();`。但是，这种做法是有问题的。表达式的值是`undefined`，所以如果你的 IIFE 有返回值，不要用这种做法。例如：
 
-```
-// Don't add JS syntax to this code block to prevent Prettier from formatting it.
-const foo = void function bar() { return 'foo'; }();
+```js
+const foo = void (function bar() {
+  return 'foo';
+})();
 
 console.log(foo); // undefined
 ```
 
 ###### 参考
 
-* http://lucybain.com/blog/2014/immediately-invoked-function-expression/
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
-
-[[↑] 回到顶部](#js-问题)
+- http://lucybain.com/blog/2014/immediately-invoked-function-expression/
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
 
 ### `null`、`undefined`和未声明变量之间有什么区别？如何检查判断这些状态值？
 
@@ -185,10 +122,8 @@ console.log(foo == undefined); // true. 错误，不要使用非严格相等！
 
 ###### 参考
 
-* https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
-* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
-
-[[↑] 回到顶部](#js-问题)
+- https://stackoverflow.com/questions/15985875/effect-of-declared-and-undeclared-variables
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/undefined
 
 ### 什么是闭包（closure），为什么使用闭包？
 
@@ -196,15 +131,13 @@ console.log(foo == undefined); // true. 错误，不要使用非严格相等！
 
 **为什么使用闭包？**
 
-* 利用闭包实现数据私有化或模拟私有方法。这个方式也称为[模块模式（module pattern）](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript)。
-* [部分参数函数（partial applications）柯里化（currying）](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x).
+- 利用闭包实现数据私有化或模拟私有方法。这个方式也称为[模块模式（module pattern）](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript)。
+- [部分参数函数（partial applications）柯里化（currying）](https://medium.com/javascript-scene/curry-or-partial-application-8150044c78b8#.l4b6l1i3x).
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
-* https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
-
-[[↑] 回到顶部](#js-问题)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
+- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
 
 ### 请说明`.forEach`循环和`.map()`循环的主要区别，它们分别在什么情况下使用？
 
@@ -212,9 +145,9 @@ console.log(foo == undefined); // true. 错误，不要使用非严格相等！
 
 **`forEach`**
 
-* 遍历数组中的元素。
-* 为每个元素执行回调。
-* 无返回值。
+- 遍历数组中的元素。
+- 为每个元素执行回调。
+- 无返回值。
 
 ```js
 const a = [1, 2, 3];
@@ -227,12 +160,12 @@ const doubled = a.forEach((num, index) => {
 
 **`map`**
 
-* 遍历数组中的元素
-* 通过对每个元素调用函数，将每个元素“映射（map）”到一个新元素，从而创建一个新数组。
+- 遍历数组中的元素
+- 通过对每个元素调用函数，将每个元素“映射（map）”到一个新元素，从而创建一个新数组。
 
 ```js
 const a = [1, 2, 3];
-const doubled = a.map(num => {
+const doubled = a.map((num) => {
   return num * 2;
 });
 
@@ -243,16 +176,14 @@ const doubled = a.map(num => {
 
 ###### 参考
 
-* https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
-
-[[↑] 回到顶部](#js-问题)
+- https://codeburst.io/javascript-map-vs-foreach-f38111822c0f
 
 ### 匿名函数的典型应用场景是什么？
 
 匿名函数可以在 IIFE 中使用，来封装局部作用域内的代码，以便其声明的变量不会暴露到全局作用域。
 
 ```js
-(function() {
+(function () {
   // 一些代码。
 })();
 ```
@@ -260,7 +191,7 @@ const doubled = a.map(num => {
 匿名函数可以作为只用一次，不需要在其他地方使用的回调函数。当处理函数在调用它们的程序内部被定义时，代码具有更好地自闭性和可读性，可以省去寻找该处理函数的函数体位置的麻烦。
 
 ```js
-setTimeout(function() {
+setTimeout(function () {
   console.log('Hello world!');
 }, 1000);
 ```
@@ -269,7 +200,7 @@ setTimeout(function() {
 
 ```js
 const arr = [1, 2, 3];
-const double = arr.map(function(el) {
+const double = arr.map(function (el) {
   return el * 2;
 });
 console.log(double); // [2, 4, 6]
@@ -277,10 +208,8 @@ console.log(double); // [2, 4, 6]
 
 ###### 参考
 
-* https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
-* https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
-
-[[↑] 回到顶部](#js-问题)
+- https://www.quora.com/What-is-a-typical-usecase-for-anonymous-functions
+- https://stackoverflow.com/questions/10273185/what-are-the-benefits-to-using-anonymous-functions-instead-of-named-functions-fo
 
 ### 你如何组织自己的代码？（使用模块模式（module pattern）还是经典继承（classical inheritance）？）
 
@@ -290,8 +219,6 @@ console.log(double); // [2, 4, 6]
 
 我尽可能避免使用经典继承。如果非要这么做，我会坚持[这些原则](https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4)。
 
-[[↑] 回到顶部](#js-问题)
-
 ### 宿主对象（host objects）和原生对象（native objects）的区别是什么？
 
 原生对象是由 ECMAScript 规范定义的 JavaScript 内置对象，比如`String`、`Math`、`RegExp`、`Object`、`Function`等等。
@@ -300,9 +227,7 @@ console.log(double); // [2, 4, 6]
 
 ###### 参考
 
-* https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
-
-[[↑] 回到顶部](#js-问题)
+- https://stackoverflow.com/questions/7614317/what-is-the-difference-between-native-objects-and-host-objects
 
 ### 下列语句有什么区别：`function Person(){}`、`var person = Person()`和`var person = new Person()`？
 
@@ -328,9 +253,7 @@ console.log(person.name); // "john"
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
-
-[[↑] 回到顶部](#js-问题)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
 
 ### `.call`和`.apply`有什么区别？
 
@@ -345,8 +268,6 @@ console.log(add.call(null, 1, 2)); // 3
 console.log(add.apply(null, [1, 2])); // 3
 ```
 
-[[↑] 回到顶部](#js-问题)
-
 ### 请说明`Function.prototype.bind`的用法。
 
 摘自[MDN](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind)：
@@ -357,9 +278,7 @@ console.log(add.apply(null, [1, 2])); // 3
 
 ###### 参考
 
-* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
-
-[[↑] 回到顶部](#js-问题)
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind
 
 ### 什么时候会用到`document.write()`？
 
@@ -369,10 +288,8 @@ console.log(add.apply(null, [1, 2])); // 3
 
 ###### 参考
 
-* https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
-* https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
-
-[[↑] 回到顶部](#js-问题)
+- https://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
+- https://github.com/h5bp/html5-boilerplate/wiki/Script-Loading-Techniques#documentwrite-script-tag
 
 ### 功能检测（feature detection）、功能推断（feature inference）和使用 UA 字符串之间有什么区别？
 
@@ -408,42 +325,36 @@ if (document.getElementsByTagName) {
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
-* https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
-* https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
-
-[[↑] 回到顶部](#js-问题)
+- https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
+- https://stackoverflow.com/questions/20104930/whats-the-difference-between-feature-detection-feature-inference-and-using-th
+- https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
 
 ### 请尽可能详细地解释 Ajax。
 
 Ajax（asynchronous JavaScript and XML）是使用客户端上的许多 Web 技术，创建异步 Web 应用的一种 Web 开发技术。借助 Ajax，Web 应用可以异步（在后台）向服务器发送数据和从服务器检索数据，而不会干扰现有页面的显示和行为。通过将数据交换层与表示层分离，Ajax 允许网页和扩展 Web 应用程序动态更改内容，而无需重新加载整个页面。实际上，现在通常将 XML 替换为 JSON，因为 JavaScript 对 JSON 有原生支持优势。
 
-`XMLHttpRequest` API 经常用于异步通信。此外还有最近流行的`fetch` API。
+`XMLHttpRequest` API 经常用于异步通信。此外还有最近流行的`fetch()` API。
 
 ###### 参考
 
-* https://en.wikipedia.org/wiki/Ajax_(programming)
-* https://developer.mozilla.org/en-US/docs/AJAX
-
-[[↑] 回到顶部](#js-问题)
+- https://en.wikipedia.org/wiki/Ajax_(programming)
+- https://developer.mozilla.org/en-US/docs/AJAX
 
 ### 使用 Ajax 的优缺点分别是什么？
 
 **优点**
 
-* 交互性更好。来自服务器的新内容可以动态更改，无需重新加载整个页面。
-* 减少与服务器的连接，因为脚本和样式只需要被请求一次。
-* 状态可以维护在一个页面上。JavaScript 变量和 DOM 状态将得到保持，因为主容器页面未被重新加载。
-* 基本上包括大部分 SPA 的优点。
+- 交互性更好。来自服务器的新内容可以动态更改，无需重新加载整个页面。
+- 减少与服务器的连接，因为脚本和样式只需要被请求一次。
+- 状态可以维护在一个页面上。JavaScript 变量和 DOM 状态将得到保持，因为主容器页面未被重新加载。
+- 基本上包括大部分 SPA 的优点。
 
 **缺点**
 
-* 动态网页很难收藏。
-* 如果 JavaScript 已在浏览器中被禁用，则不起作用。
-* 有些网络爬虫不执行 JavaScript，也不会看到 JavaScript 加载的内容。
-* 基本上包括大部分 SPA 的缺点。
-
-[[↑] 回到顶部](#js-问题)
+- 动态网页很难收藏。
+- 如果 JavaScript 已在浏览器中被禁用，则不起作用。
+- 有些网络爬虫不执行 JavaScript，也不会看到 JavaScript 加载的内容。
+- 基本上包括大部分 SPA 的缺点。
 
 ### 请说明 JSONP 的工作原理，它为什么不是真正的 Ajax？
 
@@ -454,9 +365,9 @@ JSONP 通过`<script>`标签发送跨域请求，通常使用`callback`查询参
 ```html
 <!-- https://mydomain.com -->
 <script>
-function printData(data) {
-  console.log(`My name is ${data.name}!`);
-}
+  function printData(data) {
+    console.log(`My name is ${data.name}!`);
+  }
 </script>
 
 <script src="https://example.com?callback=printData"></script>
@@ -475,9 +386,7 @@ JSONP 可能具有一些安全隐患。由于 JSONP 是纯 JavaScript 实现，
 
 ###### 参考
 
-* https://stackoverflow.com/a/2067584/1751946
-
-[[↑] 回到顶部](#js-问题)
+- https://stackoverflow.com/a/2067584/1751946
 
 ### 你使用过 JavaScript 模板吗？用过什么相关的库？
 
@@ -489,8 +398,6 @@ const template = `<div>My name is: ${name}</div>`;
 
 但是，请注意上述方法中可能存在的 XSS，因为内容不会被转义，与模板库不同。
 
-[[↑] 回到顶部](#js-问题)
-
 ### 请解释变量提升（hoisting）。
 
 变量提升（hoisting）是用于解释代码中变量声明行为的术语。使用`var`关键字声明或初始化的变量，会将声明语句“提升”到当前作用域的顶部。 但是，只有声明才会触发提升，赋值语句（如果有的话）将保持原样。我们用几个例子来解释一下。
@@ -521,20 +428,16 @@ console.log(foo); // [Function: foo]
 // 函数表达式
 console.log(bar); // undefined
 bar(); // Uncaught TypeError: bar is not a function
-var bar = function() {
+var bar = function () {
   console.log('BARRRR');
 };
 console.log(bar); // [Function: bar]
 ```
 
-[[↑] 回到顶部](#js-问题)
-
 ### 请描述事件冒泡。
 
 当一个事件在 DOM 元素上触发时，如果有事件监听器，它将尝试处理该事件，然后事件冒泡到其父级元素，并发生同样的事情。最后直到事件到达祖先元素。事件冒泡是实现事件委托的原理（event delegation）。
 
-[[↑] 回到顶部](#js-问题)
-
 ### “attribute” 和 “property” 之间有什么区别？
 
 “Attribute” 是在 HTML 中定义的，而 “property” 是在 DOM 上定义的。为了说明区别，假设我们在 HTML 中有一个文本框：`<input type="text" value="Hello">`。
@@ -554,9 +457,7 @@ console.log(input.value); // Hello World!
 
 ###### 参考
 
-* https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
-
-[[↑] 回到顶部](#js-问题)
+- https://stackoverflow.com/questions/6003819/properties-and-attributes-in-html
 
 ### 为什么扩展 JavaScript 内置对象是不好的做法？
 
@@ -566,9 +467,7 @@ console.log(input.value); // Hello World!
 
 ###### 参考
 
-* http://lucybain.com/blog/2014/js-extending-built-in-objects/
-
-[[↑] 回到顶部](#js-问题)
+- http://lucybain.com/blog/2014/js-extending-built-in-objects/
 
 ### document 中的`load`事件和`DOMContentLoaded`事件之间的区别是什么？
 
@@ -578,10 +477,8 @@ console.log(input.value); // Hello World!
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
-* https://developer.mozilla.org/en-US/docs/Web/Events/load
-
-[[↑] 回到顶部](#js-问题)
+- https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
+- https://developer.mozilla.org/en-US/docs/Web/Events/load
 
 ### `==`和`===`的区别是什么？
 
@@ -606,9 +503,7 @@ console.log(a == undefined); // true
 
 ###### 参考
 
-* https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
-
-[[↑] 回到顶部](#js-问题)
+- https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons
 
 ### 请解释关于 JavaScript 的同源策略。
 
@@ -616,9 +511,7 @@ console.log(a == undefined); // true
 
 ###### 参考
 
-* https://en.wikipedia.org/wiki/Same-origin_policy
-
-[[↑] 回到顶部](#js-问题)
+- https://en.wikipedia.org/wiki/Same-origin_policy
 
 ### 请使下面的语句生效：
 
@@ -634,17 +527,13 @@ function duplicate(arr) {
 duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
 ```
 
-[[↑] 回到顶部](#js-问题)
-
 ### 请说明三元表达式中“三元”这个词代表什么？
 
 “三元”表示接受三个操作数：判断条件，`then`表达式和`else`表达式。三元表达式不是 JavaScript 特有的，我不知道这个问题为什么会出现在这里。
 
 ###### 参考
 
-* https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
-
-[[↑] 回到顶部](#js-问题)
+- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
 
 ### 什么是`"use strict";`？使用它有什么优缺点？
 
@@ -652,28 +541,26 @@ duplicate([1, 2, 3, 4, 5]); // [1,2,3,4,5,1,2,3,4,5]
 
 **优点：**
 
-* 无法再意外创建全局变量。
-* 会使引起静默失败（silently fail，即：不报错也没有任何效果）的赋值操抛出异常。
-* 试图删除不可删除的属性时会抛出异常（之前这种操作不会产生任何效果）。
-* 要求函数的参数名唯一。
-* 全局作用域下，`this`的值为`undefined`。
-* 捕获了一些常见的编码错误，并抛出异常。
-* 禁用令人困惑或欠佳的功能。
+- 无法再意外创建全局变量。
+- 会使引起静默失败（silently fail，即：不报错也没有任何效果）的赋值操抛出异常。
+- 试图删除不可删除的属性时会抛出异常（之前这种操作不会产生任何效果）。
+- 要求函数的参数名唯一。
+- 全局作用域下，`this`的值为`undefined`。
+- 捕获了一些常见的编码错误，并抛出异常。
+- 禁用令人困惑或欠佳的功能。
 
 **缺点：**
 
-* 缺失许多开发人员已经习惯的功能。
-* 无法访问`function.caller`和`function.arguments`。
-* 以不同严格模式编写的脚本合并后可能导致问题。
+- 缺失许多开发人员已经习惯的功能。
+- 无法访问`function.caller`和`function.arguments`。
+- 以不同严格模式编写的脚本合并后可能导致问题。
 
 总的来说，我认为利大于弊，我从来不使用严格模式禁用的功能，因此我推荐使用严格模式。
 
 ###### 参考
 
-* http://2ality.com/2011/10/strict-mode-hatred.html
-* http://lucybain.com/blog/2014/js-use-strict/
-
-[[↑] 回到顶部](#js-问题)
+- http://2ality.com/2011/10/strict-mode-hatred.html
+- http://lucybain.com/blog/2014/js-use-strict/
 
 ### 创建一个循环，从 1 迭代到 100，`3`的倍数时输出 "fizz"，`5`的倍数时输出 "buzz"，同时为`3`和`5`的倍数时输出 "fizzbuzz"。
 
@@ -691,16 +578,12 @@ for (let i = 1; i <= 100; i++) {
 
 ###### 参考
 
-* https://gist.github.com/jaysonrowe/1592432
-
-[[↑] 回到顶部](#js-问题)
+- https://gist.github.com/jaysonrowe/1592432
 
 ### 为什么不要使用全局作用域？
 
 每个脚本都可以访问全局作用域，如果人人都使用全局命名空间来定义自己的变量，肯定会发生冲突。使用模块模式（IIFE）将变量封装在本地命名空间中。
 
-[[↑] 回到顶部](#js-问题)
-
 ### 为什么要使用`load`事件？这个事件有什么缺点吗？你知道一些代替方案吗，为什么使用它们？
 
 在文档装载完成后会触发`load`事件。此时，在文档中的所有对象都在 DOM 中，所有图像、脚本、链接和子框架都完成了加载。
@@ -711,9 +594,7 @@ TODO.
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
-
-[[↑] 回到顶部](#js-问题)
+- https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
 
 ### 请解释单页应用是什么，如何使其对 SEO 友好。
 
@@ -725,24 +606,22 @@ TODO.
 
 **好处：**
 
-* 用户感知响应更快，用户切换页面时，不再看到因页面刷新而导致的白屏。
-* 对服务器进行的 HTTP 请求减少，因为对于每个页面加载，不必再次下载相同的资源。
-* 客户端和服务器之间的关注点分离。可以为不同平台（例如手机、聊天机器人、智能手表）建立新的客户端，而无需修改服务器代码。只要 API 没有修改，可以单独修改客户端和服务器上的代码。
+- 用户感知响应更快，用户切换页面时，不再看到因页面刷新而导致的白屏。
+- 对服务器进行的 HTTP 请求减少，因为对于每个页面加载，不必再次下载相同的资源。
+- 客户端和服务器之间的关注点分离。可以为不同平台（例如手机、聊天机器人、智能手表）建立新的客户端，而无需修改服务器代码。只要 API 没有修改，可以单独修改客户端和服务器上的代码。
 
 **坏处：**
 
-* 由于加载了多个页面所需的框架、应用代码和资源，导致初始页面加载时间较长。
-* 服务器还需要进行额外的工作，需要将所有请求路由配置到单个入口点，然后由客户端接管路由。
-* SPA 依赖于 JavaScript 来呈现内容，但并非所有搜索引擎都在抓取过程中执行 JavaScript，他们可能会在你的页面上看到空的内容。这无意中损害了应用的搜索引擎优化（SEO）。然而，当你构建应用时，大多数情况下，搜索引擎优化并不是最重要的因素，因为并非所有内容都需要通过搜索引擎进行索引。为了解决这个问题，可以在服务器端渲染你的应用，或者使用诸如 [Prerender](https://prerender.io/) 的服务来“在浏览器中呈现你的 javascript，保存静态 HTML，并将其返回给爬虫”。
+- 由于加载了多个页面所需的框架、应用代码和资源，导致初始页面加载时间较长。
+- 服务器还需要进行额外的工作，需要将所有请求路由配置到单个入口点，然后由客户端接管路由。
+- SPA 依赖于 JavaScript 来呈现内容，但并非所有搜索引擎都在抓取过程中执行 JavaScript，他们可能会在你的页面上看到空的内容。这无意中损害了应用的搜索引擎优化（SEO）。然而，当你构建应用时，大多数情况下，搜索引擎优化并不是最重要的因素，因为并非所有内容都需要通过搜索引擎进行索引。为了解决这个问题，可以在服务器端渲染你的应用，或者使用诸如 [Prerender](https://prerender.io/) 的服务来“在浏览器中呈现你的 javascript，保存静态 HTML，并将其返回给爬虫”。
 
 ###### 参考
 
-* https://github.com/grab/front-end-guide#single-page-apps-spas
-* http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
-* http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
-* https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
-
-[[↑] 回到顶部](#js-问题)
+- https://github.com/grab/front-end-guide#single-page-apps-spas
+- http://stackoverflow.com/questions/21862054/single-page-app-advantages-and-disadvantages
+- http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/
+- https://medium.freecodecamp.com/heres-why-client-side-rendering-won-46a349fadb52
 
 ### 你对 Promises 及其 polyfill 的掌握程度如何？
 
@@ -752,95 +631,84 @@ TODO.
 
 ###### 参考
 
-* https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
-
-[[↑] 回到顶部](#js-问题)
+- https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261
 
 ### `Promise`代替回调函数有什么优缺点？
 
 **优点：**
 
-* 避免可读性极差的回调地狱。
-* 使用`.then()`编写的顺序异步代码，既简单又易读。
-* 使用`Promise.all()`编写并行异步代码变得很容易。
+- 避免可读性极差的回调地狱。
+- 使用`.then()`编写的顺序异步代码，既简单又易读。
+- 使用`Promise.all()`编写并行异步代码变得很容易。
 
 **缺点：**
 
-* 轻微地增加了代码的复杂度（这点存在争议）。
-* 在不支持 ES2015 的旧版浏览器中，需要引入 polyfill 才能使用。
-
-[[↑] 回到顶部](#js-问题)
+- 轻微地增加了代码的复杂度（这点存在争议）。
+- 在不支持 ES2015 的旧版浏览器中，需要引入 polyfill 才能使用。
 
 ### 用转译成 JavaScript 的语言写 JavaScript 有什么优缺点？
 
-Some examples of languages that compile to JavaScript include CoffeeScript, Elm, ClojureScript, PureScript and TypeScript.
 这些是转译成 JavaScript 的语言，包括 CoffeeScript、Elm、ClojureScript、PureScript 和 TypeScript。
 
 **优点：**
 
-* 修复了 JavaScript 中的一些长期问题，并摒弃了 JavaScript 不好的做法。
-* 在 JavaScript 的基础上提供一些语法糖，使我们能够编写更短的代码，我认为 ES5 缺乏语法糖的支持，但 ES2015 非常好。
-* 对于需要长时间维护的大型项目，静态类型非常好用（针对 TypeScript）。
+- 修复了 JavaScript 中的一些长期问题，并摒弃了 JavaScript 不好的做法。
+- 在 JavaScript 的基础上提供一些语法糖，使我们能够编写更短的代码，我认为 ES5 缺乏语法糖的支持，但 ES2015 非常好。
+- 对于需要长时间维护的大型项目，静态类型非常好用（针对 TypeScript）。
 
 **缺点：**
 
-* 由于浏览器只运行 JavaScript，所以需要构建、编译过程，在将代码提供给浏览器之前，需要将代码转译为 JavaScript。
-* 如果 source map 不能很好地映射到预编译的源代码，调试会很痛苦。
-* 大多数开发人员不熟悉这些语言，需要学习它。如果将其用于项目，会增加团队成本。
-* 社区比较小（取决于语言），这意味着资源、教程、图书和工具难以找到。
-* 可能缺乏 IDE（编辑器）的支持。
-* 这些语言将始终落后于最新的 JavaScript 标准。
-* 开发人员应该清楚代码正在被编译到什么地方——因为这是实际运行的内容，是最重要的。
+- 由于浏览器只运行 JavaScript，所以需要构建、编译过程，在将代码提供给浏览器之前，需要将代码转译为 JavaScript。
+- 如果 source map 不能很好地映射到预编译的源代码，调试会很痛苦。
+- 大多数开发人员不熟悉这些语言，需要学习它。如果将其用于项目，会增加团队成本。
+- 社区比较小（取决于语言），这意味着资源、教程、图书和工具难以找到。
+- 可能缺乏 IDE（编辑器）的支持。
+- 这些语言将始终落后于最新的 JavaScript 标准。
+- 开发人员应该清楚代码正在被编译到什么地方——因为这是实际运行的内容，是最重要的。
 
 实际上，ES2015 已经大大改进了 JavaScript，编写体验很好。我现在还没有真正看到对 CoffeeScript 的需求。
 
 ###### 参考
 
-* https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
-
-[[↑] 回到顶部](#js-问题)
+- https://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript
 
 ### 你使用什么工具和技巧调试 JavaScript 代码？
 
-* React 和 Redux
-  * [React Devtools](https://github.com/facebook/react-devtools)
-  * [Redux Devtools](https://github.com/gaearon/redux-devtools)
-* Vue
-  * [Vue Devtools](https://github.com/vuejs/vue-devtools)
-* JavaScript
-  * [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)
-  * `debugger`声明
-  * 使用万金油`console.log`进行调试
+- React 和 Redux
+  - [React Devtools](https://github.com/facebook/react-devtools)
+  - [Redux Devtools](https://github.com/gaearon/redux-devtools)
+- Vue
+  - [Vue Devtools](https://github.com/vuejs/vue-devtools)
+- JavaScript
+  - [Chrome Devtools](https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d)
+  - `debugger`声明
+  - 使用万金油`console.log`进行调试
 
 ###### 参考
 
-* https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
-* https://raygun.com/blog/javascript-debugging/
-
-[[↑] 回到顶部](#js-问题)
+- https://hackernoon.com/twelve-fancy-chrome-devtools-tips-dc1e39d10d9d
+- https://raygun.com/blog/javascript-debugging/
 
 ### 你使用什么语句遍历对象的属性和数组的元素？
 
 **对象：**
 
-* `for`循环：`for (var property in obj) { console.log(property); }`。但是，这还会遍历到它的继承属性，在使用之前，你需要加入`obj.hasOwnProperty(property)`检查。
-* `Object.keys()`：`Object.keys(obj).forEach(function (property) { ... })`。`Object.keys()`方法会返回一个由一个给定对象的自身可枚举属性组成的数组。
-* `Object.getOwnPropertyNames()`：`Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`。`Object.getOwnPropertyNames()`方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括 Symbol 值作为名称的属性）组成的数组。
+- `for`循环：`for (var property in obj) { console.log(property); }`。但是，这还会遍历到它的继承属性，在使用之前，你需要加入`obj.hasOwnProperty(property)`检查。
+- `Object.keys()`：`Object.keys(obj).forEach(function (property) { ... })`。`Object.keys()`方法会返回一个由一个给定对象的自身可枚举属性组成的数组。
+- `Object.getOwnPropertyNames()`：`Object.getOwnPropertyNames(obj).forEach(function (property) { ... })`。`Object.getOwnPropertyNames()`方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括 Symbol 值作为名称的属性）组成的数组。
 
 **数组：**
 
-* `for` loops：`for (var i = 0; i < arr.length; i++)`。这里的常见错误是`var`是函数作用域而不是块级作用域，大多数时候你想要迭代变量在块级作用域中。ES2015 引入了具有块级作用域的`let`，建议使用它。所以就变成了：`for (let i = 0; i < arr.length; i++)`。
-* `forEach`：`arr.forEach(function (el, index) { ... })`。这个语句结构有时会更精简，因为如果你所需要的只是数组元素，你不必使用`index`。还有`every`和`some`方法可以让你提前终止遍历。
+- `for` loops：`for (var i = 0; i < arr.length; i++)`。这里的常见错误是`var`是函数作用域而不是块级作用域，大多数时候你想要迭代变量在块级作用域中。ES2015 引入了具有块级作用域的`let`，建议使用它。所以就变成了：`for (let i = 0; i < arr.length; i++)`。
+- `forEach`：`arr.forEach(function (el, index) { ... })`。这个语句结构有时会更精简，因为如果你所需要的只是数组元素，你不必使用`index`。还有`every`和`some`方法可以让你提前终止遍历。
 
 大多数情况下，我更喜欢`.forEach`方法，但这取决于你想要做什么。`for`循环有更强的灵活性，比如使用`break`提前终止循环，或者递增步数大于一。
 
-[[↑] 回到顶部](#js-问题)
-
 ### 请解释可变对象和不可变对象之间的区别。
 
-* 什么是 JavaScript 中的不可变对象的例子？
-* 不变性有什么优点和缺点？
-* 你如何在自己的代码中实现不变性？
+- 什么是 JavaScript 中的不可变对象的例子？
+- 不变性有什么优点和缺点？
+- 你如何在自己的代码中实现不变性？
 
 **_可变对象_** 在创建之后是可以被改变的。
 
@@ -875,11 +743,9 @@ console.log(student1, student2);
 
 ###### 参考
 
-* https://juejin.im/post/58d0ff6f1b69e6006b8fd4e9
-* https://www.interviewcake.com/concept/java/mutable
-* https://www.sitepoint.com/immutability-javascript/
-
-[[↑] 回到顶部](#js-问题)
+- https://juejin.im/post/58d0ff6f1b69e6006b8fd4e9
+- https://www.interviewcake.com/concept/java/mutable
+- https://www.sitepoint.com/immutability-javascript/
 
 ### 请解释同步和异步函数之间的区别。
 
@@ -887,8 +753,6 @@ console.log(student1, student2);
 
 异步函数通常接受回调作为参数，在调用异步函数后立即继续执行下一行。回调函数仅在异步操作完成且调用堆栈为空时调用。诸如从 Web 服务器加载数据或查询数据库等重负载操作应该异步完成，以便主线程可以继续执行其他操作，而不会出现一直阻塞，直到费时操作完成的情况（在浏览器中，界面会卡住）。
 
-[[↑] 回到顶部](#js-问题)
-
 ### 什么是事件循环？调用堆栈和任务队列之间有什么区别？
 
 事件循环是一个单线程循环，用于监视调用堆栈并检查是否有工作即将在任务队列中完成。如果调用堆栈为空并且任务队列中有回调函数，则将回调函数出队并推送到调用堆栈中执行。
@@ -897,10 +761,8 @@ console.log(student1, student2);
 
 ###### 参考
 
-* https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
-* http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
-
-[[↑] 回到顶部](#js-问题)
+- https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
+- http://theproactiveprogrammer.com/javascript/the-javascript-event-loop-a-stack-and-a-queue/
 
 ### 请解释`function foo() {}`和`var foo = function() {}`之间`foo`的用法上的区别。
 
@@ -919,16 +781,14 @@ function foo() {
 
 ```js
 foo(); // Uncaught TypeError: foo is not a function
-var foo = function() {
+var foo = function () {
   console.log('FOOOOO');
 };
 ```
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
-
-[[↑] 回到顶部](#js-问题)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function
 
 ### 使用`let`、`var`和`const`创建变量有什么区别？
 
@@ -1006,29 +866,108 @@ baz = 'qux';
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
-
-[[↑] 回到顶部](#js-问题)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
 
 ### ES6 的类和 ES5 的构造函数有什么区别？
 
-TODO
+让我们来看一个例子：
 
-[[↑] 回到顶部](#js-问题)
+```js
+// ES5 构造函数
+function Person(name) {
+  this.name = name;
+}
 
-### 你能给出一个使用箭头函数的例子吗，箭头函数与其他函数有什么不同？
+// ES6 类
+class Person {
+  constructor(name) {
+    this.name = name;
+  }
+}
+```
+
+对于简单的构造函数而言，他们看起来很相似。
 
-TODO
+他们的主要区别体现在类继承上。如果我们想要创建一个继承于 `Person` 父类的 `Student` 子类，并且添加一个 `studentId` 字段，我们需要做的修改如下：
 
-[[↑] 回到顶部](#js-问题)
+```js
+// ES5 构造函数
+function Student(name, studentId) {
+  // 调用父类的构造函数来初始化父类的成员变量
+  Person.call(this, name);
+
+  // 初始化子类自己的成员变量
+  this.studentId = studentId;
+}
+
+Student.prototype = Object.create(Person.prototype);
+Student.prototype.constructor = Student;
+
+// ES6 类
+class Student extends Person {
+  constructor(name, studentId) {
+    super(name);
+    this.studentId = studentId;
+  }
+}
+```
+
+从上面的例子我们可以看出来，使用 ES5 构造函数来实现继承特别麻烦，而使用 ES6 类的方式来实现就特别容易理解和记忆。
+
+###### 参考
+
+- https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
+- https://eli.thegreenplace.net/2013/10/22/classical-inheritance-in-javascript-es5
+
+### 你能给出一个使用箭头函数的例子吗，箭头函数与其他函数有什么不同？
+
+一个很明显的优点就是箭头函数可以简化创建函数的语法，我们不需要在箭头函数前面加上 `function` 关键词。并且箭头函数的 `this` 会自动绑定到当前作用域的上下文中，这和普通的函数不一样。普通函数的 `this` 是在执行的时候才能确定的。箭头函数的这个特点对于回调函数来说特别有用，特别对于 React 组件而言。
 
 ### 在构造函数中使用箭头函数有什么好处？
 
-TODO
+在构造函数里使用箭头函数的主要优点是它的 `this` 只与箭头函数创建时的 `this` 保持一致，并且不会修改。所以，当用构造函数去创建一个新的对象的时候，箭头函数的 `this` 总是指向新创建的对象。比如，假设我们有一个 `Person` 构造函数，它接受一个 `firstName` 参数，并且它有两个方法去调用 `console.log` 这个 `firstName`，一个是正常的函数，而另一个则是箭头函数:
+
+```js
+const Person = function (firstName) {
+  this.firstName = firstName;
+  this.sayName1 = function () {
+    console.log(this.firstName);
+  };
+  this.sayName2 = () => {
+    console.log(this.firstName);
+  };
+};
+
+const john = new Person('John');
+const dave = new Person('Dave');
+
+john.sayName1(); // John
+john.sayName2(); // John
+
+// 普通函数的 this 可以被修改，而箭头函数则不会
+john.sayName1.call(dave); // Dave (因为 "this" 现在指向了 dave 对象)
+john.sayName2.call(dave); // John
+
+john.sayName1.apply(dave); // Dave (因为 "this" 现在指向了 dave 对象)
+john.sayName2.apply(dave); // John
+
+john.sayName1.bind(dave)(); // Dave (因为 "this" 现在指向了 dave 对象)
+john.sayName2.bind(dave)(); // John
 
-[[↑] 回到顶部](#js-问题)
+var sayNameFromWindow1 = john.sayName1;
+sayNameFromWindow1(); // undefined (因为 "this" 现在指向了 Window 对象)
+
+var sayNameFromWindow2 = john.sayName2;
+sayNameFromWindow2(); // John
+```
+
+这里主要的区别是，正常函数的 `this` 是可以在执行过程中被改变的，而箭头函数的 `this` 则会一直保持一致。所以在使用箭头函数的时候，你就不需要担心它的上下文被改变了。
+
+这在 React 的类组件里非常有用。如果你使用普通的函数来定义一个类方法，比如一个点击处理函数，然后你将这个点击处理函数通过 prop 的形式传递给子节点，你将必须在父组件的 `constroctor` 里使用 `fn.bind(this)` 的形式来确保该函数能正常工作。但是如果你使用箭头函数的话，你就不需要手动去绑定 `this` 了，因为箭头函数会自动绑定创建时的 `this`。
+
+(想看更好的演示以及示例代码，可以打开这篇文章: https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbb)
 
 ### 高阶函数（higher-order）的定义是什么？
 
@@ -1045,7 +984,7 @@ const names = ['irish', 'daisy', 'anna'];
 不使用高阶函数的方法是这样：
 
 ```js
-const transformNamesToUppercase = function(names) {
+const transformNamesToUppercase = function (names) {
   const results = [];
   for (let i = 0; i < names.length; i++) {
     results.push(names[i].toUpperCase());
@@ -1058,19 +997,17 @@ transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
 使用`.map(transformerFn)`使代码更简明
 
 ```js
-const transformNamesToUppercase = function(names) {
-  return names.map(name => name.toUpperCase());
+const transformNamesToUppercase = function (names) {
+  return names.map((name) => name.toUpperCase());
 };
 transformNamesToUppercase(names); // ['IRISH', 'DAISY', 'ANNA']
 ```
 
 ###### 参考
 
-* https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
-* https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
-* https://eloquentjavascript.net/05_higher_order.html
-
-[[↑] 回到顶部](#js-问题)
+- https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
+- https://hackernoon.com/effective-functional-javascript-first-class-and-higher-order-functions-713fde8df50a
+- https://eloquentjavascript.net/05_higher_order.html
 
 ### 请给出一个解构（destructuring）对象或数组的例子。
 
@@ -1111,10 +1048,8 @@ console.log(q); // true
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
-* https://ponyfoo.com/articles/es6-destructuring-in-depth
-
-[[↑] 回到顶部](#js-问题)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
+- https://ponyfoo.com/articles/es6-destructuring-in-depth
 
 ### ES6 的模板字符串为生成字符串提供了很大的灵活性，你可以举个例子吗？
 
@@ -1170,9 +1105,7 @@ message; //"我来给大家介绍:张三的年龄是20."
 
 ###### 参考
 
-* https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings
-
-[[↑] 回到顶部](#js-问题)
+- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings
 
 ### 你能举出一个柯里化函数（curry function）的例子吗？它有哪些好处？
 
@@ -1185,7 +1118,7 @@ function curry(fn) {
   }
 
   function _curried(depth, args) {
-    return function(newArgument) {
+    return function (newArgument) {
       if (depth - 1 === 0) {
         return fn(...args, newArgument);
       }
@@ -1208,13 +1141,11 @@ var result = [0, 1, 2, 3, 4, 5].map(addFive); // [5, 6, 7, 8, 9, 10]
 
 ###### 参考
 
-* https://hackernoon.com/currying-in-js-d9ddc64f162e
-
-[[↑] 回到顶部](#js-问题)
+- https://hackernoon.com/currying-in-js-d9ddc64f162e
 
 ### 使用扩展运算符（spread）的好处是什么，它与使用剩余参数语句（rest）有什么区别？
 
-在函数泛型编码时，ES6 的扩展运算符非常有用，因为我们可以轻松创建数组和对象的拷贝，而无需使用`Object.create`、`slice`或其他函数库。这个语言特性在 Redux 和 rx.js 的项目中经常用到。
+在函数泛型编码时，ES6 的扩展运算符非常有用，因为我们可以轻松创建数组和对象的拷贝，而无需使用`Object.create`、`slice`或其他函数库。这个语言特性在 Redux 和 RxJS 的项目中经常用到。
 
 ```js
 function putDookieInAnyArray(arr) {
@@ -1235,7 +1166,7 @@ ES6 的剩余参数语句提供了一个简写，允许我们将不定数量的
 
 ```js
 function addFiveToABunchOfNumbers(...numbers) {
-  return numbers.map(x => x + 5);
+  return numbers.map((x) => x + 5);
 }
 
 const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10); // [9, 10, 11, 12, 13, 14, 15]
@@ -1252,11 +1183,9 @@ const { e, f, ...others } = {
 
 ###### 参考
 
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
-* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
-
-[[↑] 回到顶部](#js-问题)
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
+- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
 
 ### 如何在文件之间共用代码？
 
@@ -1268,13 +1197,11 @@ const { e, f, ...others } = {
 
 ES2015 定义了一个模块语法，旨在替换 AMD 和 CommonJS。 这最终将在浏览器和 Node 环境中得到支持。
 
-[[↑] 回到顶部](#js-问题)
-
 ###### 参考
 
-* http://requirejs.org/docs/whyamd.html
-* https://nodejs.org/docs/latest/api/modules.html
-* http://2ality.com/2014/09/es6-modules-final.html
+- http://requirejs.org/docs/whyamd.html
+- https://nodejs.org/docs/latest/api/modules.html
+- http://2ality.com/2014/09/es6-modules-final.html
 
 ### 什么情况下会用到静态类成员？
 
@@ -1282,10 +1209,8 @@ ES2015 定义了一个模块语法，旨在替换 AMD 和 CommonJS。 这最终
 
 ###### 参考
 
-* https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
-
-[[↑] 回到顶部](#js-问题)
+- https://stackoverflow.com/questions/21155438/when-to-use-static-variables-methods-and-when-to-use-instance-variables-methods
 
 ### 其他答案
 
-* http://flowerszhong.github.io/2013/11/20/javascript-questions.html
+- http://flowerszhong.github.io/2013/11/20/javascript-questions.html
diff --git a/website/package-lock.json b/website/package-lock.json
new file mode 100644
index 0000000000..8fedb58b0f
--- /dev/null
+++ b/website/package-lock.json
@@ -0,0 +1,14566 @@
+{
+  "name": "website",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "website",
+      "version": "0.0.0",
+      "dependencies": {
+        "@docusaurus/core": "^3.1.1",
+        "@docusaurus/plugin-client-redirects": "3.1.1",
+        "@docusaurus/preset-classic": "^3.1.1",
+        "clsx": "^2.0.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-icons": "5.3.0"
+      }
+    },
+    "node_modules/@algolia/autocomplete-core": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz",
+      "integrity": "sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==",
+      "dependencies": {
+        "@algolia/autocomplete-plugin-algolia-insights": "1.9.3",
+        "@algolia/autocomplete-shared": "1.9.3"
+      }
+    },
+    "node_modules/@algolia/autocomplete-plugin-algolia-insights": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.9.3.tgz",
+      "integrity": "sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==",
+      "dependencies": {
+        "@algolia/autocomplete-shared": "1.9.3"
+      },
+      "peerDependencies": {
+        "search-insights": ">= 1 < 3"
+      }
+    },
+    "node_modules/@algolia/autocomplete-preset-algolia": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.9.3.tgz",
+      "integrity": "sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==",
+      "dependencies": {
+        "@algolia/autocomplete-shared": "1.9.3"
+      },
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
+    },
+    "node_modules/@algolia/autocomplete-shared": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.9.3.tgz",
+      "integrity": "sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==",
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
+    },
+    "node_modules/@algolia/cache-browser-local-storage": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.22.1.tgz",
+      "integrity": "sha512-Sw6IAmOCvvP6QNgY9j+Hv09mvkvEIDKjYW8ow0UDDAxSXy664RBNQk3i/0nt7gvceOJ6jGmOTimaZoY1THmU7g==",
+      "dependencies": {
+        "@algolia/cache-common": "4.22.1"
+      }
+    },
+    "node_modules/@algolia/cache-common": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.22.1.tgz",
+      "integrity": "sha512-TJMBKqZNKYB9TptRRjSUtevJeQVXRmg6rk9qgFKWvOy8jhCPdyNZV1nB3SKGufzvTVbomAukFR8guu/8NRKBTA=="
+    },
+    "node_modules/@algolia/cache-in-memory": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.22.1.tgz",
+      "integrity": "sha512-ve+6Ac2LhwpufuWavM/aHjLoNz/Z/sYSgNIXsinGofWOysPilQZPUetqLj8vbvi+DHZZaYSEP9H5SRVXnpsNNw==",
+      "dependencies": {
+        "@algolia/cache-common": "4.22.1"
+      }
+    },
+    "node_modules/@algolia/client-account": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.22.1.tgz",
+      "integrity": "sha512-k8m+oegM2zlns/TwZyi4YgCtyToackkOpE+xCaKCYfBfDtdGOaVZCM5YvGPtK+HGaJMIN/DoTL8asbM3NzHonw==",
+      "dependencies": {
+        "@algolia/client-common": "4.22.1",
+        "@algolia/client-search": "4.22.1",
+        "@algolia/transporter": "4.22.1"
+      }
+    },
+    "node_modules/@algolia/client-analytics": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.22.1.tgz",
+      "integrity": "sha512-1ssi9pyxyQNN4a7Ji9R50nSdISIumMFDwKNuwZipB6TkauJ8J7ha/uO60sPJFqQyqvvI+px7RSNRQT3Zrvzieg==",
+      "dependencies": {
+        "@algolia/client-common": "4.22.1",
+        "@algolia/client-search": "4.22.1",
+        "@algolia/requester-common": "4.22.1",
+        "@algolia/transporter": "4.22.1"
+      }
+    },
+    "node_modules/@algolia/client-common": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.22.1.tgz",
+      "integrity": "sha512-IvaL5v9mZtm4k4QHbBGDmU3wa/mKokmqNBqPj0K7lcR8ZDKzUorhcGp/u8PkPC/e0zoHSTvRh7TRkGX3Lm7iOQ==",
+      "dependencies": {
+        "@algolia/requester-common": "4.22.1",
+        "@algolia/transporter": "4.22.1"
+      }
+    },
+    "node_modules/@algolia/client-personalization": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.22.1.tgz",
+      "integrity": "sha512-sl+/klQJ93+4yaqZ7ezOttMQ/nczly/3GmgZXJ1xmoewP5jmdP/X/nV5U7EHHH3hCUEHeN7X1nsIhGPVt9E1cQ==",
+      "dependencies": {
+        "@algolia/client-common": "4.22.1",
+        "@algolia/requester-common": "4.22.1",
+        "@algolia/transporter": "4.22.1"
+      }
+    },
+    "node_modules/@algolia/client-search": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.22.1.tgz",
+      "integrity": "sha512-yb05NA4tNaOgx3+rOxAmFztgMTtGBi97X7PC3jyNeGiwkAjOZc2QrdZBYyIdcDLoI09N0gjtpClcackoTN0gPA==",
+      "dependencies": {
+        "@algolia/client-common": "4.22.1",
+        "@algolia/requester-common": "4.22.1",
+        "@algolia/transporter": "4.22.1"
+      }
+    },
+    "node_modules/@algolia/events": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@algolia/events/-/events-4.0.1.tgz",
+      "integrity": "sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ=="
+    },
+    "node_modules/@algolia/logger-common": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.22.1.tgz",
+      "integrity": "sha512-OnTFymd2odHSO39r4DSWRFETkBufnY2iGUZNrMXpIhF5cmFE8pGoINNPzwg02QLBlGSaLqdKy0bM8S0GyqPLBg=="
+    },
+    "node_modules/@algolia/logger-console": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.22.1.tgz",
+      "integrity": "sha512-O99rcqpVPKN1RlpgD6H3khUWylU24OXlzkavUAMy6QZd1776QAcauE3oP8CmD43nbaTjBexZj2nGsBH9Tc0FVA==",
+      "dependencies": {
+        "@algolia/logger-common": "4.22.1"
+      }
+    },
+    "node_modules/@algolia/requester-browser-xhr": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.22.1.tgz",
+      "integrity": "sha512-dtQGYIg6MteqT1Uay3J/0NDqD+UciHy3QgRbk7bNddOJu+p3hzjTRYESqEnoX/DpEkaNYdRHUKNylsqMpgwaEw==",
+      "dependencies": {
+        "@algolia/requester-common": "4.22.1"
+      }
+    },
+    "node_modules/@algolia/requester-common": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.22.1.tgz",
+      "integrity": "sha512-dgvhSAtg2MJnR+BxrIFqlLtkLlVVhas9HgYKMk2Uxiy5m6/8HZBL40JVAMb2LovoPFs9I/EWIoFVjOrFwzn5Qg=="
+    },
+    "node_modules/@algolia/requester-node-http": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.22.1.tgz",
+      "integrity": "sha512-JfmZ3MVFQkAU+zug8H3s8rZ6h0ahHZL/SpMaSasTCGYR5EEJsCc8SI5UZ6raPN2tjxa5bxS13BRpGSBUens7EA==",
+      "dependencies": {
+        "@algolia/requester-common": "4.22.1"
+      }
+    },
+    "node_modules/@algolia/transporter": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.22.1.tgz",
+      "integrity": "sha512-kzWgc2c9IdxMa3YqA6TN0NW5VrKYYW/BELIn7vnLyn+U/RFdZ4lxxt9/8yq3DKV5snvoDzzO4ClyejZRdV3lMQ==",
+      "dependencies": {
+        "@algolia/cache-common": "4.22.1",
+        "@algolia/logger-common": "4.22.1",
+        "@algolia/requester-common": "4.22.1"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
+      "integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
+      "integrity": "sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==",
+      "dependencies": {
+        "@babel/highlight": "^7.23.4",
+        "chalk": "^2.4.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
+    "node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0= sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/code-frame/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.5.tgz",
+      "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz",
+      "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.23.5",
+        "@babel/generator": "^7.23.6",
+        "@babel/helper-compilation-targets": "^7.23.6",
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helpers": "^7.24.0",
+        "@babel/parser": "^7.24.0",
+        "@babel/template": "^7.24.0",
+        "@babel/traverse": "^7.24.0",
+        "@babel/types": "^7.24.0",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.23.6.tgz",
+      "integrity": "sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==",
+      "dependencies": {
+        "@babel/types": "^7.23.6",
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "jsesc": "^2.5.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+      "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz",
+      "integrity": "sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==",
+      "dependencies": {
+        "@babel/types": "^7.22.15"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
+      "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
+      "dependencies": {
+        "@babel/compat-data": "^7.23.5",
+        "@babel/helper-validator-option": "^7.23.5",
+        "browserslist": "^4.22.2",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.0.tgz",
+      "integrity": "sha512-QAH+vfvts51BCsNZ2PhY6HAggnlS6omLLFTsIpeqZk/MmJ6cW7tgz5yRv0fMJThcr6FmbMrENh1RgrWPTYA76g==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-member-expression-to-functions": "^7.23.0",
+        "@babel/helper-optimise-call-expression": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.20",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-create-regexp-features-plugin": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz",
+      "integrity": "sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "regexpu-core": "^5.3.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-create-regexp-features-plugin/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/helper-define-polyfill-provider": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.5.0.tgz",
+      "integrity": "sha512-NovQquuQLAQ5HuyjCz7WQP9MjRj7dx++yspwiyUiGl9ZyadHRSql1HZh5ogRd8W8w6YM6EQ/NTB8rgjLt5W65Q==",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.22.6",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/helper-environment-visitor": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-function-name": {
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
+      "dependencies": {
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.23.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-hoist-variables": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+      "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz",
+      "integrity": "sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==",
+      "dependencies": {
+        "@babel/types": "^7.23.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.22.15",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz",
+      "integrity": "sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==",
+      "dependencies": {
+        "@babel/types": "^7.22.15"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
+      "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/helper-simple-access": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/helper-validator-identifier": "^7.22.20"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
+      "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz",
+      "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-remap-async-to-generator": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz",
+      "integrity": "sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-wrap-function": "^7.22.20"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.20.tgz",
+      "integrity": "sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==",
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-member-expression-to-functions": "^7.22.15",
+        "@babel/helper-optimise-call-expression": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-simple-access": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+      "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
+      "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-split-export-declaration": {
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
+      "integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+      "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-wrap-function": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.20.tgz",
+      "integrity": "sha512-pms/UwkOpnQe/PDAEdV/d7dVCoBbB+R4FvYoHGZz+4VPcg7RtYy2KP7S2lbuWM6FCSgob5wshfGESbC/hzNXZw==",
+      "dependencies": {
+        "@babel/helper-function-name": "^7.22.5",
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.22.19"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.0.tgz",
+      "integrity": "sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==",
+      "dependencies": {
+        "@babel/template": "^7.24.0",
+        "@babel/traverse": "^7.24.0",
+        "@babel/types": "^7.24.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.23.4.tgz",
+      "integrity": "sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "chalk": "^2.4.2",
+        "js-tokens": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
+    "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0= sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz",
+      "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.23.3.tgz",
+      "integrity": "sha512-iRkKcCqb7iGnq9+3G6rZ+Ciz5VywC4XNRHe57lKM+jOeYAoR0lVqdeeDRfh0tQcTfw/+vBhHn926FmQhLtlFLQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.23.3.tgz",
+      "integrity": "sha512-WwlxbfMNdVEpQjZmK5mhm7oSwD3dS6eU+Iwsi4Knl9wAletWem7kaRsGOG+8UEbRyqxY4SS5zvtfXwX+jMxUwQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/plugin-transform-optional-chaining": "^7.23.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.13.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
+      "version": "7.23.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.23.7.tgz",
+      "integrity": "sha512-LlRT7HgaifEpQA1ZgLVOIJZZFVPWN5iReq/7/JixwBtwcoeVGDBD53ZV28rrsLYOZs1Y/EHhA8N/Z6aazHR8cw==",
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-class-static-block": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-assertions": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.23.3.tgz",
+      "integrity": "sha512-lPgDSU+SJLK3xmFDTV2ZRQAiM7UuUjGidwBywFavObCiZc1BeAAcMtHJKUya92hPHO+at63JJPLygilZard8jw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.23.3.tgz",
+      "integrity": "sha512-pawnE0P9g10xgoP7yKr6CK63K2FMsTE+FZidZO/1PwRdzmAPVs+HS1mAURUsgaoxammTJvULUdIkEK0gOcU2tA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz",
+      "integrity": "sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-private-property-in-object": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-top-level-await": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.23.3.tgz",
+      "integrity": "sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+      "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-arrow-functions": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.23.3.tgz",
+      "integrity": "sha512-NzQcQrzaQPkaEwoTm4Mhyl8jI1huEL/WWIEvudjTCMJ9aBZNpsJbMASx7EQECtQQPS/DcnFpo0FIh3LvEO9cxQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-generator-functions": {
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.9.tgz",
+      "integrity": "sha512-8Q3veQEDGe14dTYuwagbRtwxQDnytyg1JFu4/HwEMETeofocrB0U0ejBJIXoeG/t2oXZ8kzCyI0ZZfbT80VFNQ==",
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-remap-async-to-generator": "^7.22.20",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-async-to-generator": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.23.3.tgz",
+      "integrity": "sha512-A7LFsKi4U4fomjqXJlZg/u0ft/n8/7n7lpffUP/ZULx/DtV9SGlNKZolHH6PE8Xl1ngCc0M11OaeZptXVkfKSw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-remap-async-to-generator": "^7.22.20"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.23.3.tgz",
+      "integrity": "sha512-vI+0sIaPIO6CNuM9Kk5VmXcMVRiOpDh7w2zZt9GXzmE/9KD70CUEVhvPR/etAeNK/FAEkhxQtXOzVF3EuRL41A==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.23.4.tgz",
+      "integrity": "sha512-0QqbP6B6HOh7/8iNR4CQU2Th/bbRtBp4KS9vcaZd1fZ0wSh5Fyssg0UCIHwxh+ka+pNDREbVLQnHCMHKZfPwfw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-properties": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.23.3.tgz",
+      "integrity": "sha512-uM+AN8yCIjDPccsKGlw271xjJtGii+xQIF/uMPS8H15L12jZTsLfF4o5vNO7d/oUguOyfdikHGc/yi9ge4SGIg==",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-class-static-block": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.23.4.tgz",
+      "integrity": "sha512-nsWu/1M+ggti1SOALj3hfx5FXzAY06fwPJsUZD4/A5e1bWi46VUIWtD+kOX6/IdhXGsXBWllLFDSnqSCdUNydQ==",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-classes": {
+      "version": "7.23.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.8.tgz",
+      "integrity": "sha512-yAYslGsY1bX6Knmg46RjiCiNSwJKv2IUC8qOdYKqMMr0491SXFhcHqOdRDeCRohOOIzwN/90C6mQ9qAKgrP7dg==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-compilation-targets": "^7.23.6",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.20",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-computed-properties": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.23.3.tgz",
+      "integrity": "sha512-dTj83UVTLw/+nbiHqQSFdwO9CbTtwq1DsDqm3CUEtDrZNET5rT5E6bIdTlOftDTDLMYxvxHNEYO4B9SLl8SLZw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/template": "^7.22.15"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-destructuring": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.23.3.tgz",
+      "integrity": "sha512-n225npDqjDIr967cMScVKHXJs7rout1q+tt50inyBCPkyZ8KxeI6d+GIbSBTT/w/9WdlWDOej3V9HE5Lgk57gw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dotall-regex": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.23.3.tgz",
+      "integrity": "sha512-vgnFYDHAKzFaTVp+mneDsIEbnJ2Np/9ng9iviHw3P/KVcgONxpNULEW/51Z/BaFojG2GI2GwwXck5uV1+1NOYQ==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-duplicate-keys": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.23.3.tgz",
+      "integrity": "sha512-RrqQ+BQmU3Oyav3J+7/myfvRCq7Tbz+kKLLshUmMwNlDHExbGL7ARhajvoBJEvc+fCguPPu887N+3RRXBVKZUA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-dynamic-import": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.23.4.tgz",
+      "integrity": "sha512-V6jIbLhdJK86MaLh4Jpghi8ho5fGzt3imHOBu/x0jlBaPYqDoWz4RDXjmMOfnh+JWNaQleEAByZLV0QzBT4YQQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.23.3.tgz",
+      "integrity": "sha512-5fhCsl1odX96u7ILKHBj4/Y8vipoqwsJMh4csSA8qFfxrZDEA4Ssku2DyNvMJSmZNOEBT750LfFPbtrnTP90BQ==",
+      "dependencies": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-export-namespace-from": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.23.4.tgz",
+      "integrity": "sha512-GzuSBcKkx62dGzZI1WVgTWvkkz84FZO5TC5T8dl/Tht/rAla6Dg/Mz9Yhypg+ezVACf/rgDuQt3kbWEv7LdUDQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-for-of": {
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.23.6.tgz",
+      "integrity": "sha512-aYH4ytZ0qSuBbpfhuofbg/e96oQ7U2w1Aw/UQmKT+1l39uEhUPoFS3fHevDc1G0OvewyDudfMKY1OulczHzWIw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-function-name": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.23.3.tgz",
+      "integrity": "sha512-I1QXp1LxIvt8yLaib49dRW5Okt7Q4oaxao6tFVKS/anCdEOMtYwWVKoiOA1p34GOWIZjUK0E+zCp7+l1pfQyiw==",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.22.15",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-json-strings": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.23.4.tgz",
+      "integrity": "sha512-81nTOqM1dMwZ/aRXQ59zVubN9wHGqk6UtqRK+/q+ciXmRy8fSolhGVvG09HHRGo4l6fr/c4ZhXUQH0uFW7PZbg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-literals": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.23.3.tgz",
+      "integrity": "sha512-wZ0PIXRxnwZvl9AYpqNUxpZ5BiTGrYt7kueGQ+N5FiQ7RCOD4cm8iShd6S6ggfVIWaJf2EMk8eRzAh52RfP4rQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-logical-assignment-operators": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.23.4.tgz",
+      "integrity": "sha512-Mc/ALf1rmZTP4JKKEhUwiORU+vcfarFVLfcFiolKUo6sewoxSEgl36ak5t+4WamRsNr6nzjZXQjM35WsU+9vbg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-member-expression-literals": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.23.3.tgz",
+      "integrity": "sha512-sC3LdDBDi5x96LA+Ytekz2ZPk8i/Ck+DEuDbRAll5rknJ5XRTSaPKEYwomLcs1AA8wg9b3KjIQRsnApj+q51Ag==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-amd": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.23.3.tgz",
+      "integrity": "sha512-vJYQGxeKM4t8hYCKVBlZX/gtIY2I7mRGFNcm85sgXGMTBcoV3QdVtdpbcWEbzbfUIUZKwvgFT82mRvaQIebZzw==",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-commonjs": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.23.3.tgz",
+      "integrity": "sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-simple-access": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-systemjs": {
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.9.tgz",
+      "integrity": "sha512-KDlPRM6sLo4o1FkiSlXoAa8edLXFsKKIda779fbLrvmeuc3itnjCtaO6RrtoaANsIJANj+Vk1zqbZIMhkCAHVw==",
+      "dependencies": {
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-identifier": "^7.22.20"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-modules-umd": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.23.3.tgz",
+      "integrity": "sha512-zHsy9iXX2nIsCBFPud3jKn1IRPWg3Ing1qOZgeKV39m1ZgIdpJqvlWVeiHBZC6ITRG0MfskhYe9cLgntfSFPIg==",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
+      "integrity": "sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-new-target": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.23.3.tgz",
+      "integrity": "sha512-YJ3xKqtJMAT5/TIZnpAR3I+K+WaDowYbN3xyxI8zxx/Gsypwf9B9h0VB+1Nh6ACAAPRS5NSRje0uVv5i79HYGQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.23.4.tgz",
+      "integrity": "sha512-jHE9EVVqHKAQx+VePv5LLGHjmHSJR76vawFPTdlxR/LVJPfOEGxREQwQfjuZEOPTwG92X3LINSh3M40Rv4zpVA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-numeric-separator": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.23.4.tgz",
+      "integrity": "sha512-mps6auzgwjRrwKEZA05cOwuDc9FAzoyFS4ZsG/8F43bTLf/TgkJg7QXOrPO1JO599iA3qgK9MXdMGOEC8O1h6Q==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-rest-spread": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.0.tgz",
+      "integrity": "sha512-y/yKMm7buHpFFXfxVFS4Vk1ToRJDilIa6fKRioB9Vjichv58TDGXTvqV0dN7plobAmTW5eSEGXDngE+Mm+uO+w==",
+      "dependencies": {
+        "@babel/compat-data": "^7.23.5",
+        "@babel/helper-compilation-targets": "^7.23.6",
+        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.23.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-object-super": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.23.3.tgz",
+      "integrity": "sha512-BwQ8q0x2JG+3lxCVFohg+KbQM7plfpBwThdW9A6TMtWwLsbDA01Ek2Zb/AgDN39BiZsExm4qrXxjk+P1/fzGrA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-replace-supers": "^7.22.20"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-catch-binding": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.23.4.tgz",
+      "integrity": "sha512-XIq8t0rJPHf6Wvmbn9nFxU6ao4c7WhghTR5WyV8SrJfUFzyxhCm4nhC+iAp3HFhbAKLfYpgzhJ6t4XCtVwqO5A==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-optional-chaining": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.4.tgz",
+      "integrity": "sha512-ZU8y5zWOfjM5vZ+asjgAPwDaBjJzgufjES89Rs4Lpq63O300R/kOz30WCLo6BxxX6QVEilwSlpClnG5cZaikTA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-parameters": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.23.3.tgz",
+      "integrity": "sha512-09lMt6UsUb3/34BbECKVbVwrT9bO6lILWln237z7sLaWnMsTi7Yc9fhX5DLpkJzAGfaReXI22wP41SZmnAA3Vw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-methods": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.23.3.tgz",
+      "integrity": "sha512-UzqRcRtWsDMTLrRWFvUBDwmw06tCQH9Rl1uAjfh6ijMSmGYQ+fpdB+cnqRC8EMh5tuuxSv0/TejGL+7vyj+50g==",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-private-property-in-object": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.23.4.tgz",
+      "integrity": "sha512-9G3K1YqTq3F4Vt88Djx1UZ79PDyj+yKRnUy7cZGSMe+a7jkwD259uKKuUzQlPkGam7R+8RJwh5z4xO27fA1o2A==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-create-class-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-property-literals": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.23.3.tgz",
+      "integrity": "sha512-jR3Jn3y7cZp4oEWPFAlRsSWjxKe4PZILGBSd4nis1TsC5qeSpb+nrtihJuDhNI7QHiVbUaiXa0X2RZY3/TI6Nw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-constant-elements": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.23.3.tgz",
+      "integrity": "sha512-zP0QKq/p6O42OL94udMgSfKXyse4RyJ0JqbQ34zDAONWjyrEsghYEyTSK5FIpmXmCpB55SHokL1cRRKHv8L2Qw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-display-name": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.23.3.tgz",
+      "integrity": "sha512-GnvhtVfA2OAtzdX58FJxU19rhoGeQzyVndw3GgtdECQvQFXPEZIOVULHVZGAYmOgmqjXpVpfocAbSjh99V/Fqw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx": {
+      "version": "7.23.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.23.4.tgz",
+      "integrity": "sha512-5xOpoPguCZCRbo/JeHlloSkTA8Bld1J/E1/kLfD1nsuiW1m8tduTA1ERCgIZokDflX/IBzKcqR3l7VlRgiIfHA==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-jsx": "^7.23.3",
+        "@babel/types": "^7.23.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-development": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.22.5.tgz",
+      "integrity": "sha512-bDhuzwWMuInwCYeDeMzyi7TaBgRQei6DqxhbyniL7/VG4RSS7HtSL2QbY4eESy1KJqlWt8g3xeEBGPuo+XqC8A==",
+      "dependencies": {
+        "@babel/plugin-transform-react-jsx": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-pure-annotations": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.23.3.tgz",
+      "integrity": "sha512-qMFdSS+TUhB7Q/3HVPnEdYJDQIk57jkntAwSuz9xfSE4n+3I+vHYCli3HoHawN1Z3RfCz/y1zXA/JXjG6cVImQ==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-regenerator": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.23.3.tgz",
+      "integrity": "sha512-KP+75h0KghBMcVpuKisx3XTu9Ncut8Q8TuvGO4IhY+9D5DFEckQefOuIsB/gQ2tG71lCke4NMrtIPS8pOj18BQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "regenerator-transform": "^0.15.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-reserved-words": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.23.3.tgz",
+      "integrity": "sha512-QnNTazY54YqgGxwIexMZva9gqbPa15t/x9VS+0fsEFWplwVpXYZivtgl43Z1vMpc1bdPP2PP8siFeVcnFvA3Cg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.24.0.tgz",
+      "integrity": "sha512-zc0GA5IitLKJrSfXlXmp8KDqLrnGECK7YRfQBmEKg1NmBOQ7e+KuclBEKJgzifQeUYLdNiAw4B4bjyvzWVLiSA==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.24.0",
+        "babel-plugin-polyfill-corejs2": "^0.4.8",
+        "babel-plugin-polyfill-corejs3": "^0.9.0",
+        "babel-plugin-polyfill-regenerator": "^0.5.5",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-runtime/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/plugin-transform-shorthand-properties": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.23.3.tgz",
+      "integrity": "sha512-ED2fgqZLmexWiN+YNFX26fx4gh5qHDhn1O2gvEhreLW2iI63Sqm4llRLCXALKrCnbN4Jy0VcMQZl/SAzqug/jg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-spread": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.23.3.tgz",
+      "integrity": "sha512-VvfVYlrlBVu+77xVTOAoxQ6mZbnIq5FM0aGBSFEcIh03qHf+zNqA4DC/3XMUozTg7bZV3e3mZQ0i13VB6v5yUg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-sticky-regex": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.23.3.tgz",
+      "integrity": "sha512-HZOyN9g+rtvnOU3Yh7kSxXrKbzgrm5X4GncPY1QOquu7epga5MxKHVpYu2hvQnry/H+JjckSYRb93iNfsioAGg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.23.3.tgz",
+      "integrity": "sha512-Flok06AYNp7GV2oJPZZcP9vZdszev6vPBkHLwxwSpaIqx75wn6mUd3UFWsSsA0l8nXAKkyCmL/sR02m8RYGeHg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typeof-symbol": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.23.3.tgz",
+      "integrity": "sha512-4t15ViVnaFdrPC74be1gXBSMzXk3B4Us9lP7uLRQHTFpV5Dvt33pn+2MyyNxmN3VTTm3oTrZVMUmuw3oBnQ2oQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.23.6.tgz",
+      "integrity": "sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-create-class-features-plugin": "^7.23.6",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/plugin-syntax-typescript": "^7.23.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-escapes": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.23.3.tgz",
+      "integrity": "sha512-OMCUx/bU6ChE3r4+ZdylEqAjaQgHAgipgW8nsCfu5pGqDcFytVd91AwRvUJSBZDz0exPGgnjoqhgRYLRjFZc9Q==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-property-regex": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.23.3.tgz",
+      "integrity": "sha512-KcLIm+pDZkWZQAFJ9pdfmh89EwVfmNovFBcXko8szpBeF8z68kWIPeKlmSOkT9BXJxs2C0uk+5LxoxIv62MROA==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-regex": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.23.3.tgz",
+      "integrity": "sha512-wMHpNA4x2cIA32b/ci3AfwNgheiva2W0WUKWTK7vBHBhDKfPsc5cFGNWm69WBqpwd86u1qwZ9PWevKqm1A3yAw==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-unicode-sets-regex": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.23.3.tgz",
+      "integrity": "sha512-W7lliA/v9bNR83Qc3q1ip9CQMZ09CcHDbHfbLRDNuAhn1Mvkr1ZNF7hPmztMQvtTGVLJ9m8IZqWsTkXOml8dbw==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/preset-env": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.24.0.tgz",
+      "integrity": "sha512-ZxPEzV9IgvGn73iK0E6VB9/95Nd7aMFpbE0l8KQFDG70cOV9IxRP7Y2FUPmlK0v6ImlLqYX50iuZ3ZTVhOF2lA==",
+      "dependencies": {
+        "@babel/compat-data": "^7.23.5",
+        "@babel/helper-compilation-targets": "^7.23.6",
+        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-validator-option": "^7.23.5",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.23.3",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.23.3",
+        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.23.7",
+        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-import-assertions": "^7.23.3",
+        "@babel/plugin-syntax-import-attributes": "^7.23.3",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5",
+        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+        "@babel/plugin-transform-arrow-functions": "^7.23.3",
+        "@babel/plugin-transform-async-generator-functions": "^7.23.9",
+        "@babel/plugin-transform-async-to-generator": "^7.23.3",
+        "@babel/plugin-transform-block-scoped-functions": "^7.23.3",
+        "@babel/plugin-transform-block-scoping": "^7.23.4",
+        "@babel/plugin-transform-class-properties": "^7.23.3",
+        "@babel/plugin-transform-class-static-block": "^7.23.4",
+        "@babel/plugin-transform-classes": "^7.23.8",
+        "@babel/plugin-transform-computed-properties": "^7.23.3",
+        "@babel/plugin-transform-destructuring": "^7.23.3",
+        "@babel/plugin-transform-dotall-regex": "^7.23.3",
+        "@babel/plugin-transform-duplicate-keys": "^7.23.3",
+        "@babel/plugin-transform-dynamic-import": "^7.23.4",
+        "@babel/plugin-transform-exponentiation-operator": "^7.23.3",
+        "@babel/plugin-transform-export-namespace-from": "^7.23.4",
+        "@babel/plugin-transform-for-of": "^7.23.6",
+        "@babel/plugin-transform-function-name": "^7.23.3",
+        "@babel/plugin-transform-json-strings": "^7.23.4",
+        "@babel/plugin-transform-literals": "^7.23.3",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.23.4",
+        "@babel/plugin-transform-member-expression-literals": "^7.23.3",
+        "@babel/plugin-transform-modules-amd": "^7.23.3",
+        "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+        "@babel/plugin-transform-modules-systemjs": "^7.23.9",
+        "@babel/plugin-transform-modules-umd": "^7.23.3",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
+        "@babel/plugin-transform-new-target": "^7.23.3",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
+        "@babel/plugin-transform-numeric-separator": "^7.23.4",
+        "@babel/plugin-transform-object-rest-spread": "^7.24.0",
+        "@babel/plugin-transform-object-super": "^7.23.3",
+        "@babel/plugin-transform-optional-catch-binding": "^7.23.4",
+        "@babel/plugin-transform-optional-chaining": "^7.23.4",
+        "@babel/plugin-transform-parameters": "^7.23.3",
+        "@babel/plugin-transform-private-methods": "^7.23.3",
+        "@babel/plugin-transform-private-property-in-object": "^7.23.4",
+        "@babel/plugin-transform-property-literals": "^7.23.3",
+        "@babel/plugin-transform-regenerator": "^7.23.3",
+        "@babel/plugin-transform-reserved-words": "^7.23.3",
+        "@babel/plugin-transform-shorthand-properties": "^7.23.3",
+        "@babel/plugin-transform-spread": "^7.23.3",
+        "@babel/plugin-transform-sticky-regex": "^7.23.3",
+        "@babel/plugin-transform-template-literals": "^7.23.3",
+        "@babel/plugin-transform-typeof-symbol": "^7.23.3",
+        "@babel/plugin-transform-unicode-escapes": "^7.23.3",
+        "@babel/plugin-transform-unicode-property-regex": "^7.23.3",
+        "@babel/plugin-transform-unicode-regex": "^7.23.3",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.23.3",
+        "@babel/preset-modules": "0.1.6-no-external-plugins",
+        "babel-plugin-polyfill-corejs2": "^0.4.8",
+        "babel-plugin-polyfill-corejs3": "^0.9.0",
+        "babel-plugin-polyfill-regenerator": "^0.5.5",
+        "core-js-compat": "^3.31.0",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-env/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/@babel/preset-modules": {
+      "version": "0.1.6-no-external-plugins",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+      "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/@babel/preset-react": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.23.3.tgz",
+      "integrity": "sha512-tbkHOS9axH6Ysf2OUEqoSZ6T3Fa2SrNH6WTWSPBboxKzdxNc9qOICeLXkNG0ZEwbQ1HY8liwOce4aN/Ceyuq6w==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-option": "^7.22.15",
+        "@babel/plugin-transform-react-display-name": "^7.23.3",
+        "@babel/plugin-transform-react-jsx": "^7.22.15",
+        "@babel/plugin-transform-react-jsx-development": "^7.22.5",
+        "@babel/plugin-transform-react-pure-annotations": "^7.23.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/preset-typescript": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.23.3.tgz",
+      "integrity": "sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "@babel/helper-validator-option": "^7.22.15",
+        "@babel/plugin-syntax-jsx": "^7.23.3",
+        "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+        "@babel/plugin-transform-typescript": "^7.23.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/regjsgen": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+      "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
+      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/runtime-corejs3": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.24.0.tgz",
+      "integrity": "sha512-HxiRMOncx3ly6f3fcZ1GVKf+/EROcI9qwPgmij8Czqy6Okm/0T37T4y2ZIlLUuEUFjtM7NRsfdCO8Y3tAiJZew==",
+      "dependencies": {
+        "core-js-pure": "^3.30.2",
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
+      "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
+      "dependencies": {
+        "@babel/code-frame": "^7.23.5",
+        "@babel/parser": "^7.24.0",
+        "@babel/types": "^7.24.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.0.tgz",
+      "integrity": "sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==",
+      "dependencies": {
+        "@babel/code-frame": "^7.23.5",
+        "@babel/generator": "^7.23.6",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/parser": "^7.24.0",
+        "@babel/types": "^7.24.0",
+        "debug": "^4.3.1",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+      "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.23.4",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@colors/colors": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
+      "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.90"
+      }
+    },
+    "node_modules/@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/@docsearch/css": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.5.2.tgz",
+      "integrity": "sha512-SPiDHaWKQZpwR2siD0KQUwlStvIAnEyK6tAE2h2Wuoq8ue9skzhlyVQ1ddzOxX6khULnAALDiR/isSF3bnuciA=="
+    },
+    "node_modules/@docsearch/react": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.5.2.tgz",
+      "integrity": "sha512-9Ahcrs5z2jq/DcAvYtvlqEBHImbm4YJI8M9y0x6Tqg598P40HTEkX7hsMcIuThI+hTFxRGZ9hll0Wygm2yEjng==",
+      "dependencies": {
+        "@algolia/autocomplete-core": "1.9.3",
+        "@algolia/autocomplete-preset-algolia": "1.9.3",
+        "@docsearch/css": "3.5.2",
+        "algoliasearch": "^4.19.1"
+      },
+      "peerDependencies": {
+        "@types/react": ">= 16.8.0 < 19.0.0",
+        "react": ">= 16.8.0 < 19.0.0",
+        "react-dom": ">= 16.8.0 < 19.0.0",
+        "search-insights": ">= 1 < 3"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "search-insights": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@docusaurus/core": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/core/-/core-3.1.1.tgz",
+      "integrity": "sha512-2nQfKFcf+MLEM7JXsXwQxPOmQAR6ytKMZVSx7tVi9HEm9WtfwBH1fp6bn8Gj4zLUhjWKCLoysQ9/Wm+EZCQ4yQ==",
+      "dependencies": {
+        "@babel/core": "^7.23.3",
+        "@babel/generator": "^7.23.3",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-transform-runtime": "^7.22.9",
+        "@babel/preset-env": "^7.22.9",
+        "@babel/preset-react": "^7.22.5",
+        "@babel/preset-typescript": "^7.22.5",
+        "@babel/runtime": "^7.22.6",
+        "@babel/runtime-corejs3": "^7.22.6",
+        "@babel/traverse": "^7.22.8",
+        "@docusaurus/cssnano-preset": "3.1.1",
+        "@docusaurus/logger": "3.1.1",
+        "@docusaurus/mdx-loader": "3.1.1",
+        "@docusaurus/react-loadable": "5.5.2",
+        "@docusaurus/utils": "3.1.1",
+        "@docusaurus/utils-common": "3.1.1",
+        "@docusaurus/utils-validation": "3.1.1",
+        "@slorber/static-site-generator-webpack-plugin": "^4.0.7",
+        "@svgr/webpack": "^6.5.1",
+        "autoprefixer": "^10.4.14",
+        "babel-loader": "^9.1.3",
+        "babel-plugin-dynamic-import-node": "^2.3.3",
+        "boxen": "^6.2.1",
+        "chalk": "^4.1.2",
+        "chokidar": "^3.5.3",
+        "clean-css": "^5.3.2",
+        "cli-table3": "^0.6.3",
+        "combine-promises": "^1.1.0",
+        "commander": "^5.1.0",
+        "copy-webpack-plugin": "^11.0.0",
+        "core-js": "^3.31.1",
+        "css-loader": "^6.8.1",
+        "css-minimizer-webpack-plugin": "^4.2.2",
+        "cssnano": "^5.1.15",
+        "del": "^6.1.1",
+        "detect-port": "^1.5.1",
+        "escape-html": "^1.0.3",
+        "eta": "^2.2.0",
+        "file-loader": "^6.2.0",
+        "fs-extra": "^11.1.1",
+        "html-minifier-terser": "^7.2.0",
+        "html-tags": "^3.3.1",
+        "html-webpack-plugin": "^5.5.3",
+        "leven": "^3.1.0",
+        "lodash": "^4.17.21",
+        "mini-css-extract-plugin": "^2.7.6",
+        "postcss": "^8.4.26",
+        "postcss-loader": "^7.3.3",
+        "prompts": "^2.4.2",
+        "react-dev-utils": "^12.0.1",
+        "react-helmet-async": "^1.3.0",
+        "react-loadable": "npm:@docusaurus/react-loadable@5.5.2",
+        "react-loadable-ssr-addon-v5-slorber": "^1.0.1",
+        "react-router": "^5.3.4",
+        "react-router-config": "^5.1.1",
+        "react-router-dom": "^5.3.4",
+        "rtl-detect": "^1.0.4",
+        "semver": "^7.5.4",
+        "serve-handler": "^6.1.5",
+        "shelljs": "^0.8.5",
+        "terser-webpack-plugin": "^5.3.9",
+        "tslib": "^2.6.0",
+        "update-notifier": "^6.0.2",
+        "url-loader": "^4.1.1",
+        "webpack": "^5.88.1",
+        "webpack-bundle-analyzer": "^4.9.0",
+        "webpack-dev-server": "^4.15.1",
+        "webpack-merge": "^5.9.0",
+        "webpackbar": "^5.0.2"
+      },
+      "bin": {
+        "docusaurus": "bin/docusaurus.mjs"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@docusaurus/cssnano-preset": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/cssnano-preset/-/cssnano-preset-3.1.1.tgz",
+      "integrity": "sha512-LnoIDjJWbirdbVZDMq+4hwmrTl2yHDnBf9MLG9qyExeAE3ac35s4yUhJI8yyTCdixzNfKit4cbXblzzqMu4+8g==",
+      "dependencies": {
+        "cssnano-preset-advanced": "^5.3.10",
+        "postcss": "^8.4.26",
+        "postcss-sort-media-queries": "^4.4.1",
+        "tslib": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=18.0"
+      }
+    },
+    "node_modules/@docusaurus/logger": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/logger/-/logger-3.1.1.tgz",
+      "integrity": "sha512-BjkNDpQzewcTnST8trx4idSoAla6zZ3w22NqM/UMcFtvYJgmoE4layuTzlfql3VFPNuivvj7BOExa/+21y4X2Q==",
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "tslib": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=18.0"
+      }
+    },
+    "node_modules/@docusaurus/mdx-loader": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/mdx-loader/-/mdx-loader-3.1.1.tgz",
+      "integrity": "sha512-xN2IccH9+sv7TmxwsDJNS97BHdmlqWwho+kIVY4tcCXkp+k4QuzvWBeunIMzeayY4Fu13A6sAjHGv5qm72KyGA==",
+      "dependencies": {
+        "@babel/parser": "^7.22.7",
+        "@babel/traverse": "^7.22.8",
+        "@docusaurus/logger": "3.1.1",
+        "@docusaurus/utils": "3.1.1",
+        "@docusaurus/utils-validation": "3.1.1",
+        "@mdx-js/mdx": "^3.0.0",
+        "@slorber/remark-comment": "^1.0.0",
+        "escape-html": "^1.0.3",
+        "estree-util-value-to-estree": "^3.0.1",
+        "file-loader": "^6.2.0",
+        "fs-extra": "^11.1.1",
+        "image-size": "^1.0.2",
+        "mdast-util-mdx": "^3.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "rehype-raw": "^7.0.0",
+        "remark-directive": "^3.0.0",
+        "remark-emoji": "^4.0.0",
+        "remark-frontmatter": "^5.0.0",
+        "remark-gfm": "^4.0.0",
+        "stringify-object": "^3.3.0",
+        "tslib": "^2.6.0",
+        "unified": "^11.0.3",
+        "unist-util-visit": "^5.0.0",
+        "url-loader": "^4.1.1",
+        "vfile": "^6.0.1",
+        "webpack": "^5.88.1"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@docusaurus/module-type-aliases": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/module-type-aliases/-/module-type-aliases-3.1.1.tgz",
+      "integrity": "sha512-xBJyx0TMfAfVZ9ZeIOb1awdXgR4YJMocIEzTps91rq+hJDFJgJaylDtmoRhUxkwuYmNK1GJpW95b7DLztSBJ3A==",
+      "dependencies": {
+        "@docusaurus/react-loadable": "5.5.2",
+        "@docusaurus/types": "3.1.1",
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router-config": "*",
+        "@types/react-router-dom": "*",
+        "react-helmet-async": "*",
+        "react-loadable": "npm:@docusaurus/react-loadable@5.5.2"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/@docusaurus/plugin-client-redirects": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-client-redirects/-/plugin-client-redirects-3.1.1.tgz",
+      "integrity": "sha512-J/1Z75XkO+BmUXHW17FrCIYZQ3b0IKaJECH6yCxW5RQ8NMMJ+SZCtPtx5oYoAd0VHersNiUu+ZAxfOqbsn1jKQ==",
+      "dependencies": {
+        "@docusaurus/core": "3.1.1",
+        "@docusaurus/logger": "3.1.1",
+        "@docusaurus/utils": "3.1.1",
+        "@docusaurus/utils-common": "3.1.1",
+        "@docusaurus/utils-validation": "3.1.1",
+        "eta": "^2.2.0",
+        "fs-extra": "^11.1.1",
+        "lodash": "^4.17.21",
+        "tslib": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@docusaurus/plugin-content-blog": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-blog/-/plugin-content-blog-3.1.1.tgz",
+      "integrity": "sha512-ew/3VtVoG3emoAKmoZl7oKe1zdFOsI0NbcHS26kIxt2Z8vcXKCUgK9jJJrz0TbOipyETPhqwq4nbitrY3baibg==",
+      "dependencies": {
+        "@docusaurus/core": "3.1.1",
+        "@docusaurus/logger": "3.1.1",
+        "@docusaurus/mdx-loader": "3.1.1",
+        "@docusaurus/types": "3.1.1",
+        "@docusaurus/utils": "3.1.1",
+        "@docusaurus/utils-common": "3.1.1",
+        "@docusaurus/utils-validation": "3.1.1",
+        "cheerio": "^1.0.0-rc.12",
+        "feed": "^4.2.2",
+        "fs-extra": "^11.1.1",
+        "lodash": "^4.17.21",
+        "reading-time": "^1.5.0",
+        "srcset": "^4.0.0",
+        "tslib": "^2.6.0",
+        "unist-util-visit": "^5.0.0",
+        "utility-types": "^3.10.0",
+        "webpack": "^5.88.1"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@docusaurus/plugin-content-docs": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.1.1.tgz",
+      "integrity": "sha512-lhFq4E874zw0UOH7ujzxnCayOyAt0f9YPVYSb9ohxrdCM8B4szxitUw9rIX4V9JLLHVoqIJb6k+lJJ1jrcGJ0A==",
+      "dependencies": {
+        "@docusaurus/core": "3.1.1",
+        "@docusaurus/logger": "3.1.1",
+        "@docusaurus/mdx-loader": "3.1.1",
+        "@docusaurus/module-type-aliases": "3.1.1",
+        "@docusaurus/types": "3.1.1",
+        "@docusaurus/utils": "3.1.1",
+        "@docusaurus/utils-validation": "3.1.1",
+        "@types/react-router-config": "^5.0.7",
+        "combine-promises": "^1.1.0",
+        "fs-extra": "^11.1.1",
+        "js-yaml": "^4.1.0",
+        "lodash": "^4.17.21",
+        "tslib": "^2.6.0",
+        "utility-types": "^3.10.0",
+        "webpack": "^5.88.1"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@docusaurus/plugin-content-pages": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-pages/-/plugin-content-pages-3.1.1.tgz",
+      "integrity": "sha512-NQHncNRAJbyLtgTim9GlEnNYsFhuCxaCNkMwikuxLTiGIPH7r/jpb7O3f3jUMYMebZZZrDq5S7om9a6rvB/YCA==",
+      "dependencies": {
+        "@docusaurus/core": "3.1.1",
+        "@docusaurus/mdx-loader": "3.1.1",
+        "@docusaurus/types": "3.1.1",
+        "@docusaurus/utils": "3.1.1",
+        "@docusaurus/utils-validation": "3.1.1",
+        "fs-extra": "^11.1.1",
+        "tslib": "^2.6.0",
+        "webpack": "^5.88.1"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@docusaurus/plugin-debug": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-debug/-/plugin-debug-3.1.1.tgz",
+      "integrity": "sha512-xWeMkueM9wE/8LVvl4+Qf1WqwXmreMjI5Kgr7GYCDoJ8zu4kD+KaMhrh7py7MNM38IFvU1RfrGKacCEe2DRRfQ==",
+      "dependencies": {
+        "@docusaurus/core": "3.1.1",
+        "@docusaurus/types": "3.1.1",
+        "@docusaurus/utils": "3.1.1",
+        "fs-extra": "^11.1.1",
+        "react-json-view-lite": "^1.2.0",
+        "tslib": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@docusaurus/plugin-google-analytics": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-3.1.1.tgz",
+      "integrity": "sha512-+q2UpWTqVi8GdlLoSlD5bS/YpxW+QMoBwrPrUH/NpvpuOi0Of7MTotsQf9JWd3hymZxl2uu1o3PIrbpxfeDFDQ==",
+      "dependencies": {
+        "@docusaurus/core": "3.1.1",
+        "@docusaurus/types": "3.1.1",
+        "@docusaurus/utils-validation": "3.1.1",
+        "tslib": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@docusaurus/plugin-google-gtag": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-3.1.1.tgz",
+      "integrity": "sha512-0mMPiBBlQ5LFHTtjxuvt/6yzh8v7OxLi3CbeEsxXZpUzcKO/GC7UA1VOWUoBeQzQL508J12HTAlR3IBU9OofSw==",
+      "dependencies": {
+        "@docusaurus/core": "3.1.1",
+        "@docusaurus/types": "3.1.1",
+        "@docusaurus/utils-validation": "3.1.1",
+        "@types/gtag.js": "^0.0.12",
+        "tslib": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@docusaurus/plugin-google-tag-manager": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-3.1.1.tgz",
+      "integrity": "sha512-d07bsrMLdDIryDtY17DgqYUbjkswZQr8cLWl4tzXrt5OR/T/zxC1SYKajzB3fd87zTu5W5klV5GmUwcNSMXQXA==",
+      "dependencies": {
+        "@docusaurus/core": "3.1.1",
+        "@docusaurus/types": "3.1.1",
+        "@docusaurus/utils-validation": "3.1.1",
+        "tslib": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@docusaurus/plugin-sitemap": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-sitemap/-/plugin-sitemap-3.1.1.tgz",
+      "integrity": "sha512-iJ4hCaMmDaUqRv131XJdt/C/jJQx8UreDWTRqZKtNydvZVh/o4yXGRRFOplea1D9b/zpwL1Y+ZDwX7xMhIOTmg==",
+      "dependencies": {
+        "@docusaurus/core": "3.1.1",
+        "@docusaurus/logger": "3.1.1",
+        "@docusaurus/types": "3.1.1",
+        "@docusaurus/utils": "3.1.1",
+        "@docusaurus/utils-common": "3.1.1",
+        "@docusaurus/utils-validation": "3.1.1",
+        "fs-extra": "^11.1.1",
+        "sitemap": "^7.1.1",
+        "tslib": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@docusaurus/preset-classic": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/preset-classic/-/preset-classic-3.1.1.tgz",
+      "integrity": "sha512-jG4ys/hWYf69iaN/xOmF+3kjs4Nnz1Ay3CjFLDtYa8KdxbmUhArA9HmP26ru5N0wbVWhY+6kmpYhTJpez5wTyg==",
+      "dependencies": {
+        "@docusaurus/core": "3.1.1",
+        "@docusaurus/plugin-content-blog": "3.1.1",
+        "@docusaurus/plugin-content-docs": "3.1.1",
+        "@docusaurus/plugin-content-pages": "3.1.1",
+        "@docusaurus/plugin-debug": "3.1.1",
+        "@docusaurus/plugin-google-analytics": "3.1.1",
+        "@docusaurus/plugin-google-gtag": "3.1.1",
+        "@docusaurus/plugin-google-tag-manager": "3.1.1",
+        "@docusaurus/plugin-sitemap": "3.1.1",
+        "@docusaurus/theme-classic": "3.1.1",
+        "@docusaurus/theme-common": "3.1.1",
+        "@docusaurus/theme-search-algolia": "3.1.1",
+        "@docusaurus/types": "3.1.1"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@docusaurus/react-loadable": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz",
+      "integrity": "sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==",
+      "dependencies": {
+        "@types/react": "*",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/@docusaurus/theme-classic": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/theme-classic/-/theme-classic-3.1.1.tgz",
+      "integrity": "sha512-GiPE/jbWM8Qv1A14lk6s9fhc0LhPEQ00eIczRO4QL2nAQJZXkjPG6zaVx+1cZxPFWbAsqSjKe2lqkwF3fGkQ7Q==",
+      "dependencies": {
+        "@docusaurus/core": "3.1.1",
+        "@docusaurus/mdx-loader": "3.1.1",
+        "@docusaurus/module-type-aliases": "3.1.1",
+        "@docusaurus/plugin-content-blog": "3.1.1",
+        "@docusaurus/plugin-content-docs": "3.1.1",
+        "@docusaurus/plugin-content-pages": "3.1.1",
+        "@docusaurus/theme-common": "3.1.1",
+        "@docusaurus/theme-translations": "3.1.1",
+        "@docusaurus/types": "3.1.1",
+        "@docusaurus/utils": "3.1.1",
+        "@docusaurus/utils-common": "3.1.1",
+        "@docusaurus/utils-validation": "3.1.1",
+        "@mdx-js/react": "^3.0.0",
+        "clsx": "^2.0.0",
+        "copy-text-to-clipboard": "^3.2.0",
+        "infima": "0.2.0-alpha.43",
+        "lodash": "^4.17.21",
+        "nprogress": "^0.2.0",
+        "postcss": "^8.4.26",
+        "prism-react-renderer": "^2.3.0",
+        "prismjs": "^1.29.0",
+        "react-router-dom": "^5.3.4",
+        "rtlcss": "^4.1.0",
+        "tslib": "^2.6.0",
+        "utility-types": "^3.10.0"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@docusaurus/theme-common": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/theme-common/-/theme-common-3.1.1.tgz",
+      "integrity": "sha512-38urZfeMhN70YaXkwIGXmcUcv2CEYK/2l4b05GkJPrbEbgpsIZM3Xc+Js2ehBGGZmfZq8GjjQ5RNQYG+MYzCYg==",
+      "dependencies": {
+        "@docusaurus/mdx-loader": "3.1.1",
+        "@docusaurus/module-type-aliases": "3.1.1",
+        "@docusaurus/plugin-content-blog": "3.1.1",
+        "@docusaurus/plugin-content-docs": "3.1.1",
+        "@docusaurus/plugin-content-pages": "3.1.1",
+        "@docusaurus/utils": "3.1.1",
+        "@docusaurus/utils-common": "3.1.1",
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router-config": "*",
+        "clsx": "^2.0.0",
+        "parse-numeric-range": "^1.3.0",
+        "prism-react-renderer": "^2.3.0",
+        "tslib": "^2.6.0",
+        "utility-types": "^3.10.0"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@docusaurus/theme-search-algolia": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/theme-search-algolia/-/theme-search-algolia-3.1.1.tgz",
+      "integrity": "sha512-tBH9VY5EpRctVdaAhT+b1BY8y5dyHVZGFXyCHgTrvcXQy5CV4q7serEX7U3SveNT9zksmchPyct6i1sFDC4Z5g==",
+      "dependencies": {
+        "@docsearch/react": "^3.5.2",
+        "@docusaurus/core": "3.1.1",
+        "@docusaurus/logger": "3.1.1",
+        "@docusaurus/plugin-content-docs": "3.1.1",
+        "@docusaurus/theme-common": "3.1.1",
+        "@docusaurus/theme-translations": "3.1.1",
+        "@docusaurus/utils": "3.1.1",
+        "@docusaurus/utils-validation": "3.1.1",
+        "algoliasearch": "^4.18.0",
+        "algoliasearch-helper": "^3.13.3",
+        "clsx": "^2.0.0",
+        "eta": "^2.2.0",
+        "fs-extra": "^11.1.1",
+        "lodash": "^4.17.21",
+        "tslib": "^2.6.0",
+        "utility-types": "^3.10.0"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@docusaurus/theme-translations": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/theme-translations/-/theme-translations-3.1.1.tgz",
+      "integrity": "sha512-xvWQFwjxHphpJq5fgk37FXCDdAa2o+r7FX8IpMg+bGZBNXyWBu3MjZ+G4+eUVNpDhVinTc+j6ucL0Ain5KCGrg==",
+      "dependencies": {
+        "fs-extra": "^11.1.1",
+        "tslib": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=18.0"
+      }
+    },
+    "node_modules/@docusaurus/types": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/types/-/types-3.1.1.tgz",
+      "integrity": "sha512-grBqOLnubUecgKFXN9q3uit2HFbCxTWX4Fam3ZFbMN0sWX9wOcDoA7lwdX/8AmeL20Oc4kQvWVgNrsT8bKRvzg==",
+      "dependencies": {
+        "@mdx-js/mdx": "^3.0.0",
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "commander": "^5.1.0",
+        "joi": "^17.9.2",
+        "react-helmet-async": "^1.3.0",
+        "utility-types": "^3.10.0",
+        "webpack": "^5.88.1",
+        "webpack-merge": "^5.9.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/@docusaurus/utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/utils/-/utils-3.1.1.tgz",
+      "integrity": "sha512-ZJfJa5cJQtRYtqijsPEnAZoduW6sjAQ7ZCWSZavLcV10Fw0Z3gSaPKA/B4micvj2afRZ4gZxT7KfYqe5H8Cetg==",
+      "dependencies": {
+        "@docusaurus/logger": "3.1.1",
+        "@svgr/webpack": "^6.5.1",
+        "escape-string-regexp": "^4.0.0",
+        "file-loader": "^6.2.0",
+        "fs-extra": "^11.1.1",
+        "github-slugger": "^1.5.0",
+        "globby": "^11.1.0",
+        "gray-matter": "^4.0.3",
+        "jiti": "^1.20.0",
+        "js-yaml": "^4.1.0",
+        "lodash": "^4.17.21",
+        "micromatch": "^4.0.5",
+        "resolve-pathname": "^3.0.0",
+        "shelljs": "^0.8.5",
+        "tslib": "^2.6.0",
+        "url-loader": "^4.1.1",
+        "webpack": "^5.88.1"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "@docusaurus/types": "*"
+      },
+      "peerDependenciesMeta": {
+        "@docusaurus/types": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@docusaurus/utils-common": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/utils-common/-/utils-common-3.1.1.tgz",
+      "integrity": "sha512-eGne3olsIoNfPug5ixjepZAIxeYFzHHnor55Wb2P57jNbtVaFvij/T+MS8U0dtZRFi50QU+UPmRrXdVUM8uyMg==",
+      "dependencies": {
+        "tslib": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "@docusaurus/types": "*"
+      },
+      "peerDependenciesMeta": {
+        "@docusaurus/types": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@docusaurus/utils-validation": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@docusaurus/utils-validation/-/utils-validation-3.1.1.tgz",
+      "integrity": "sha512-KlY4P9YVDnwL+nExvlIpu79abfEv6ZCHuOX4ZQ+gtip+Wxj0daccdReIWWtqxM/Fb5Cz1nQvUCc7VEtT8IBUAA==",
+      "dependencies": {
+        "@docusaurus/logger": "3.1.1",
+        "@docusaurus/utils": "3.1.1",
+        "joi": "^17.9.2",
+        "js-yaml": "^4.1.0",
+        "tslib": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=18.0"
+      }
+    },
+    "node_modules/@hapi/hoek": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
+      "integrity": "sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ=="
+    },
+    "node_modules/@hapi/topo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-5.1.0.tgz",
+      "integrity": "sha512-foQZKJig7Ob0BMAYBfcJk8d77QtOe7Wo4ox7ff1lQYoNNAb6jwcY1ncdoy2e9wQZzvNy7ODZCYJkK8kzmcAnAg==",
+      "dependencies": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
+    "node_modules/@jest/schemas": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
+      "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+      "dependencies": {
+        "@sinclair/typebox": "^0.27.8"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jest/types": {
+      "version": "29.6.3",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz",
+      "integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==",
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^17.0.8",
+        "chalk": "^4.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.4.tgz",
+      "integrity": "sha512-Oud2QPM5dHviZNn4y/WhhYKSXksv+1xLEIsNrAbGcFzUN3ubqWRFT5gwPchNc5NuzILOU4tPBDTZ4VwhL8Y7cw==",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
+      "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz",
+      "integrity": "sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.23",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.23.tgz",
+      "integrity": "sha512-9/4foRoUKp8s96tSkh8DlAAc5A0Ty8vLXld+l9gjKKY6ckwI8G15f0hskGmuLZu78ZlGa1vtsfOa+lnB4vG6Jg==",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@leichtgewicht/ip-codec": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
+      "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
+    },
+    "node_modules/@mdx-js/mdx": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.0.1.tgz",
+      "integrity": "sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdx": "^2.0.0",
+        "collapse-white-space": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-build-jsx": "^3.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "estree-util-to-js": "^2.0.0",
+        "estree-walker": "^3.0.0",
+        "hast-util-to-estree": "^3.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "markdown-extensions": "^2.0.0",
+        "periscopic": "^3.0.0",
+        "remark-mdx": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "source-map": "^0.7.0",
+        "unified": "^11.0.0",
+        "unist-util-position-from-estree": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/@mdx-js/react": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.0.1.tgz",
+      "integrity": "sha512-9ZrPIU4MGf6et1m1ov3zKf+q9+deetI51zprKB1D/z3NOb+rUxxtEl3mCjW5wTGh6VhRdwPueh1oRzi6ezkA8A==",
+      "dependencies": {
+        "@types/mdx": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16",
+        "react": ">=16"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
+      "integrity": "sha512-33g3pMJk3bg5nXbL/+CY6I2eJDzZAni49PfJnL5fghPTggPvBd/pFNSgJsdAgWptuFu7qq/ERvOYFlhvsLTCKA==",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.4",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
+      "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.6.tgz",
+      "integrity": "sha512-8Broas6vTtW4GIXTAHDoE32hnN2M5ykgCpWGbuXHQ15vEMqr23pB76e/GZcYsZCHALv50ktd24qhEyKr6wBtow==",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.4",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pnpm/config.env-replace": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@pnpm/config.env-replace/-/config.env-replace-1.1.0.tgz",
+      "integrity": "sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w==",
+      "engines": {
+        "node": ">=12.22.0"
+      }
+    },
+    "node_modules/@pnpm/network.ca-file": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@pnpm/network.ca-file/-/network.ca-file-1.0.2.tgz",
+      "integrity": "sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==",
+      "dependencies": {
+        "graceful-fs": "4.2.10"
+      },
+      "engines": {
+        "node": ">=12.22.0"
+      }
+    },
+    "node_modules/@pnpm/npm-conf": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@pnpm/npm-conf/-/npm-conf-2.2.2.tgz",
+      "integrity": "sha512-UA91GwWPhFExt3IizW6bOeY/pQ0BkuNwKjk9iQW9KqxluGCrg4VenZ0/L+2Y0+ZOtme72EVvg6v0zo3AMQRCeA==",
+      "dependencies": {
+        "@pnpm/config.env-replace": "^1.1.0",
+        "@pnpm/network.ca-file": "^1.0.1",
+        "config-chain": "^1.1.11"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.24",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.24.tgz",
+      "integrity": "sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ=="
+    },
+    "node_modules/@sideway/address": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
+      "integrity": "sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==",
+      "dependencies": {
+        "@hapi/hoek": "^9.0.0"
+      }
+    },
+    "node_modules/@sideway/formula": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz",
+      "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="
+    },
+    "node_modules/@sideway/pinpoint": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
+      "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
+    },
+    "node_modules/@sinclair/typebox": {
+      "version": "0.27.8",
+      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+      "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA=="
+    },
+    "node_modules/@sindresorhus/is": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
+      "integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/is?sponsor=1"
+      }
+    },
+    "node_modules/@slorber/remark-comment": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@slorber/remark-comment/-/remark-comment-1.0.0.tgz",
+      "integrity": "sha512-RCE24n7jsOj1M0UPvIQCHTe7fI0sFL4S2nwKVWwHyVr/wI/H8GosgsJGyhnsZoGFnD/P2hLf1mSbrrgSLN93NA==",
+      "dependencies": {
+        "micromark-factory-space": "^1.0.0",
+        "micromark-util-character": "^1.1.0",
+        "micromark-util-symbol": "^1.0.1"
+      }
+    },
+    "node_modules/@slorber/static-site-generator-webpack-plugin": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@slorber/static-site-generator-webpack-plugin/-/static-site-generator-webpack-plugin-4.0.7.tgz",
+      "integrity": "sha512-Ug7x6z5lwrz0WqdnNFOMYrDQNTPAprvHLSh6+/fmml3qUiz6l5eq+2MzLKWtn/q5K5NpSiFsZTP/fck/3vjSxA==",
+      "dependencies": {
+        "eval": "^0.1.8",
+        "p-map": "^4.0.0",
+        "webpack-sources": "^3.2.2"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz",
+      "integrity": "sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
+      "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.5.1.tgz",
+      "integrity": "sha512-8DPaVVE3fd5JKuIC29dqyMB54sA6mfgki2H2+swh+zNJoynC8pMPzOkidqHOSc6Wj032fhl8Z0TVn1GiPpAiJg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.5.1.tgz",
+      "integrity": "sha512-FwOEi0Il72iAzlkaHrlemVurgSQRDFbk0OC8dSvD5fSBPHltNh7JtLsxmZUhjYBZo2PpcU/RJvvi6Q0l7O7ogw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.5.1.tgz",
+      "integrity": "sha512-gWGsiwjb4tw+ITOJ86ndY/DZZ6cuXMNE/SjcDRg+HLuCmwpcjOktwRF9WgAiycTqJD/QXqL2f8IzE2Rzh7aVXA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.5.1.tgz",
+      "integrity": "sha512-2jT3nTayyYP7kI6aGutkyfJ7UMGtuguD72OjeGLwVNyfPRBD8zQthlvL+fAbAKk5n9ZNcvFkp/b1lZ7VsYqVJg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.5.1.tgz",
+      "integrity": "sha512-a1p6LF5Jt33O3rZoVRBqdxL350oge54iZWHNI6LJB5tQ7EelvD/Mb1mfBiZNAan0dt4i3VArkFRjA4iObuNykQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-preset": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-6.5.1.tgz",
+      "integrity": "sha512-6127fvO/FF2oi5EzSQOAjo1LE3OtNVh11R+/8FXa+mHx1ptAaS4cknIjnUA7e6j6fwGGJ17NzaTJFUwOV2zwCw==",
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "^6.5.1",
+        "@svgr/babel-plugin-remove-jsx-attribute": "*",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "*",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "^6.5.1",
+        "@svgr/babel-plugin-svg-dynamic-title": "^6.5.1",
+        "@svgr/babel-plugin-svg-em-dimensions": "^6.5.1",
+        "@svgr/babel-plugin-transform-react-native-svg": "^6.5.1",
+        "@svgr/babel-plugin-transform-svg-component": "^6.5.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/core": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-6.5.1.tgz",
+      "integrity": "sha512-/xdLSWxK5QkqG524ONSjvg3V/FkNyCv538OIBdQqPNaAta3AsXj/Bd2FbvR87yMbXO2hFSWiAe/Q6IkVPDw+mw==",
+      "dependencies": {
+        "@babel/core": "^7.19.6",
+        "@svgr/babel-preset": "^6.5.1",
+        "@svgr/plugin-jsx": "^6.5.1",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-6.5.1.tgz",
+      "integrity": "sha512-1hnUxxjd83EAxbL4a0JDJoD3Dao3hmjvyvyEV8PzWmLK3B9m9NPlW7GKjFyoWE8nM7HnXzPcmmSyOW8yOddSXw==",
+      "dependencies": {
+        "@babel/types": "^7.20.0",
+        "entities": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-6.5.1.tgz",
+      "integrity": "sha512-+UdQxI3jgtSjCykNSlEMuy1jSRQlGC7pqBCPvkG/2dATdWo082zHTTK3uhnAju2/6XpE6B5mZ3z4Z8Ns01S8Gw==",
+      "dependencies": {
+        "@babel/core": "^7.19.6",
+        "@svgr/babel-preset": "^6.5.1",
+        "@svgr/hast-util-to-babel-ast": "^6.5.1",
+        "svg-parser": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "^6.0.0"
+      }
+    },
+    "node_modules/@svgr/plugin-svgo": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-6.5.1.tgz",
+      "integrity": "sha512-omvZKf8ixP9z6GWgwbtmP9qQMPX4ODXi+wzbVZgomNFsUIlHA1sf4fThdwTWSsZGgvGAG6yE+b/F5gWUkcZ/iQ==",
+      "dependencies": {
+        "cosmiconfig": "^7.0.1",
+        "deepmerge": "^4.2.2",
+        "svgo": "^2.8.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
+      }
+    },
+    "node_modules/@svgr/webpack": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-6.5.1.tgz",
+      "integrity": "sha512-cQ/AsnBkXPkEK8cLbv4Dm7JGXq2XrumKnL1dRpJD9rIO2fTIlJI9a1uCciYG1F2aUsox/hJQyNGbt3soDxSRkA==",
+      "dependencies": {
+        "@babel/core": "^7.19.6",
+        "@babel/plugin-transform-react-constant-elements": "^7.18.12",
+        "@babel/preset-env": "^7.19.4",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.18.6",
+        "@svgr/core": "^6.5.1",
+        "@svgr/plugin-jsx": "^6.5.1",
+        "@svgr/plugin-svgo": "^6.5.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@szmarczak/http-timer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-5.0.1.tgz",
+      "integrity": "sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==",
+      "dependencies": {
+        "defer-to-connect": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=14.16"
+      }
+    },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/@types/acorn": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz",
+      "integrity": "sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/bonjour": {
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz",
+      "integrity": "sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/color-name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
+      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ=="
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect-history-api-fallback": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz",
+      "integrity": "sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==",
+      "dependencies": {
+        "@types/express-serve-static-core": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/debug": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
+    "node_modules/@types/eslint": {
+      "version": "7.2.12",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.12.tgz",
+      "integrity": "sha512-HjikV/jX6e0Pg4DcB+rtOBKSrG6w5IaxWpmi3efL/eLxMz5lZTK+W1DKERrX5a+mNzL78axfsDNXu7JHFP4uLg==",
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@types/eslint-scope": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.3.tgz",
+      "integrity": "sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==",
+      "dependencies": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
+    },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/express": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
+      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "4.17.28",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
+      "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
+    "node_modules/@types/gtag.js": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/@types/gtag.js/-/gtag.js-0.0.12.tgz",
+      "integrity": "sha512-YQV9bUsemkzG81Ea295/nF/5GijnD2Af7QhEofh7xu+kvCN6RdodgNwwGWXB5GMI3NoyvQo0odNctoH/qLMIpg=="
+    },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
+    },
+    "node_modules/@types/html-minifier-terser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.0.0.tgz",
+      "integrity": "sha512-NZwaaynfs1oIoLAV1vg18e7QMVDvw+6SQrdJc8w3BwUaoroVSf6EBj/Sk4PBWGxsq0dzhA2drbsuMC1/6C6KgQ=="
+    },
+    "node_modules/@types/http-cache-semantics": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
+      "integrity": "sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA=="
+    },
+    "node_modules/@types/http-proxy": {
+      "version": "1.17.9",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.9.tgz",
+      "integrity": "sha512-QsbSjA/fSk7xB+UXlCT3wHBy5ai9wOcNDWwZAtud+jXhwOM3l+EYZh8Lng4+/6n8uar0J7xILzqftJdJ/Wdfkw==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/istanbul-lib-coverage": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
+      "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w=="
+    },
+    "node_modules/@types/istanbul-lib-report": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
+      "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
+      "dependencies": {
+        "@types/istanbul-lib-coverage": "*"
+      }
+    },
+    "node_modules/@types/istanbul-reports": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
+      "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
+      "dependencies": {
+        "@types/istanbul-lib-report": "*"
+      }
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
+      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ=="
+    },
+    "node_modules/@types/mdast": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz",
+      "integrity": "sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/mdx": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.11.tgz",
+      "integrity": "sha512-HM5bwOaIQJIQbAYfax35HCKxx7a3KrK3nBtIqJgSOitivTD1y3oW9P3rxY9RkXYPUk7y/AjAohfHKmFpGE79zw=="
+    },
+    "node_modules/@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw=="
+    },
+    "node_modules/@types/ms": {
+      "version": "0.7.34",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
+      "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
+    },
+    "node_modules/@types/node": {
+      "version": "17.0.23",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
+      "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
+    },
+    "node_modules/@types/node-forge": {
+      "version": "1.3.11",
+      "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.11.tgz",
+      "integrity": "sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.3",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.3.tgz",
+      "integrity": "sha512-A0D0aTXvjlqJ5ZILMz3rNfDBOx9hHxLZYv2by47Sm/pqW35zzjusrZTryatjN/Rf8Us2gZrJD+KeHbUSTux1Cw=="
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+    },
+    "node_modules/@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
+    },
+    "node_modules/@types/react": {
+      "version": "17.0.38",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
+      "integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-config": {
+      "version": "5.0.11",
+      "resolved": "https://registry.npmjs.org/@types/react-router-config/-/react-router-config-5.0.11.tgz",
+      "integrity": "sha512-WmSAg7WgqW7m4x8Mt4N6ZyKz0BubSj/2tVUMsAHp+Yd2AMwcSbeFq9WympT19p5heCFmF97R9eD5uUR/t4HEqw==",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "^5.1.0"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
+    "node_modules/@types/retry": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
+      "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g=="
+    },
+    "node_modules/@types/sax": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.1.tgz",
+      "integrity": "sha512-dqYdvN7Sbw8QT/0Ci5rhjE4/iCMJEM0Y9rHpCu+gGXD9Lwbz28t6HI2yegsB6BoV1sShRMU6lAmAcgRjmFy7LA==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
+    "node_modules/@types/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==",
+      "dependencies": {
+        "@types/express": "*"
+      }
+    },
+    "node_modules/@types/serve-static": {
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
+      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/sockjs": {
+      "version": "0.3.33",
+      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
+      "integrity": "sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/unist": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
+      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+    },
+    "node_modules/@types/ws": {
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
+      "integrity": "sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/yargs": {
+      "version": "17.0.32",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.32.tgz",
+      "integrity": "sha512-xQ67Yc/laOG5uMfX/093MRlGGCIBzZMarVa+gfNKJxWAIgykYpVGkBdbqEzGDDfCrVUj6Hiff4mTZ5BA6TmAog==",
+      "dependencies": {
+        "@types/yargs-parser": "*"
+      }
+    },
+    "node_modules/@types/yargs-parser": {
+      "version": "21.0.3",
+      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
+      "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ=="
+    },
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
+    },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
+      "integrity": "sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==",
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz",
+      "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw=="
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz",
+      "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q=="
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz",
+      "integrity": "sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA=="
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz",
+      "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==",
+      "dependencies": {
+        "@webassemblyjs/floating-point-hex-parser": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz",
+      "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA=="
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz",
+      "integrity": "sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz",
+      "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==",
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz",
+      "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==",
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz",
+      "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA=="
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz",
+      "integrity": "sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/helper-wasm-section": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6",
+        "@webassemblyjs/wasm-opt": "1.11.6",
+        "@webassemblyjs/wasm-parser": "1.11.6",
+        "@webassemblyjs/wast-printer": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz",
+      "integrity": "sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz",
+      "integrity": "sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-buffer": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.11.6",
+        "@webassemblyjs/wasm-parser": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz",
+      "integrity": "sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.11.6",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz",
+      "integrity": "sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.11.6",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
+      "dependencies": {
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/accepts/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/accepts/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-import-assertions": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
+      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+      "peerDependencies": {
+        "acorn": "^8"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/acorn-walk": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.1.0.tgz",
+      "integrity": "sha512-mjmzmv12YIG/G8JQdQuz2MUDShEJ6teYpT5bmWA4q7iwoGen8xtt3twF3OvzIUl+Q06aWIjvnwQUKvQ6TtMRjg==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/address": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/address/-/address-1.1.2.tgz",
+      "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
+      "engines": {
+        "node": ">= 0.12.0"
+      }
+    },
+    "node_modules/aggregate-error": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz",
+      "integrity": "sha512-quoaXsZ9/BLNae5yiNoUz+Nhkwz83GhWwtYFglcjEQB2NDHCIpApbqXxIFnm4Pq/Nvhrsq5sYJFyohrrxnTGAA==",
+      "dependencies": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.9.0.tgz",
+      "integrity": "sha512-qOKJyNj/h+OWx7s5DePL6Zu1KeM9jPZhwBqs+7DzP6bGOvqzVCSf0xueYmVuaC/oQ/VtS2zLMLHdQFbkka+XDQ==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/algoliasearch": {
+      "version": "4.22.1",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.22.1.tgz",
+      "integrity": "sha512-jwydKFQJKIx9kIZ8Jm44SdpigFwRGPESaxZBaHSV0XWN2yBJAOT4mT7ppvlrpA4UGzz92pqFnVKr/kaZXrcreg==",
+      "dependencies": {
+        "@algolia/cache-browser-local-storage": "4.22.1",
+        "@algolia/cache-common": "4.22.1",
+        "@algolia/cache-in-memory": "4.22.1",
+        "@algolia/client-account": "4.22.1",
+        "@algolia/client-analytics": "4.22.1",
+        "@algolia/client-common": "4.22.1",
+        "@algolia/client-personalization": "4.22.1",
+        "@algolia/client-search": "4.22.1",
+        "@algolia/logger-common": "4.22.1",
+        "@algolia/logger-console": "4.22.1",
+        "@algolia/requester-browser-xhr": "4.22.1",
+        "@algolia/requester-common": "4.22.1",
+        "@algolia/requester-node-http": "4.22.1",
+        "@algolia/transporter": "4.22.1"
+      }
+    },
+    "node_modules/algoliasearch-helper": {
+      "version": "3.16.3",
+      "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.16.3.tgz",
+      "integrity": "sha512-1OuJT6sONAa9PxcOmWo5WCAT3jQSpCR9/m5Azujja7nhUQwAUDvaaAYrcmUySsrvHh74usZHbE3jFfGnWtZj8w==",
+      "dependencies": {
+        "@algolia/events": "^4.0.1"
+      },
+      "peerDependencies": {
+        "algoliasearch": ">= 3.1 < 6"
+      }
+    },
+    "node_modules/ansi-align": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
+      "integrity": "sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==",
+      "dependencies": {
+        "string-width": "^4.1.0"
+      }
+    },
+    "node_modules/ansi-align/node_modules/ansi-regex": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.1.tgz",
+      "integrity": "sha512-ILlv4k/3f6vfQ4OoP2AGvirOktlQ98ZEL1k9FaQjxa3L1abBgbuTDAdPOpvbGncC0BTVQrl+OM8xZGK6tWXt7g==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ansi-align/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/ansi-align/node_modules/string-width": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.1.0.tgz",
+      "integrity": "sha512-NrX+1dVVh+6Y9dnQ19pR0pP4FiEIlUvdTGn8pw6CKTNq5sgib2nIhmUNT5TAmhWmvKr3WcxBcP3E8nWezuipuQ==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-align/node_modules/strip-ansi": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+      "dependencies": {
+        "ansi-regex": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ansi-html-community": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
+      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
+      "engines": [
+        "node >= 0.8.0"
+      ],
+      "bin": {
+        "ansi-html": "bin/ansi-html"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+      "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+      "dependencies": {
+        "@types/color-name": "^1.1.1",
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.0.tgz",
+      "integrity": "sha512-4P8Zm2H+BRS+c/xX1LrHw0qKpEhdlZjLCgWy+d78T9vqa2Z2SiD2wMrYuWIAFy5IZUD7nnNXroRttz+0RzlrzQ=="
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/array-flatten": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
+      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ=="
+    },
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/astring": {
+      "version": "1.8.6",
+      "resolved": "https://registry.npmjs.org/astring/-/astring-1.8.6.tgz",
+      "integrity": "sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==",
+      "bin": {
+        "astring": "bin/astring"
+      }
+    },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.17",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.17.tgz",
+      "integrity": "sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.22.2",
+        "caniuse-lite": "^1.0.30001578",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/babel-loader": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.3.tgz",
+      "integrity": "sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==",
+      "dependencies": {
+        "find-cache-dir": "^4.0.0",
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0",
+        "webpack": ">=5"
+      }
+    },
+    "node_modules/babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+      "dependencies": {
+        "object.assign": "^4.1.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs2": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.8.tgz",
+      "integrity": "sha512-OtIuQfafSzpo/LhnJaykc0R/MMnuLSSVjVYy9mHArIZ9qTCSZ6TpWCuEKZYVoN//t8HqBNScHrOtCrIK5IaGLg==",
+      "dependencies": {
+        "@babel/compat-data": "^7.22.6",
+        "@babel/helper-define-polyfill-provider": "^0.5.0",
+        "semver": "^6.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.9.0.tgz",
+      "integrity": "sha512-7nZPG1uzK2Ymhy/NbaOWTg3uibM2BmGASS4vHS4szRZAIR8R6GwA/xAujpdrXU5iyklrimWnLWU+BLF9suPTqg==",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.5.0",
+        "core-js-compat": "^3.34.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/babel-plugin-polyfill-regenerator": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.5.tgz",
+      "integrity": "sha512-OJGYZlhLqBh2DDHeqAxWB1XIvr49CxiJ2gIt61/PU55CQK4Z58OzMqjDe1zwQdQk+rBYsRc+1rJmdajM3gimHg==",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.5.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c= sha512-9Y0g0Q8rmSt+H33DfKv7FOc3v+iRI+o1lbzt8jGcIosYW37IIW/2XVYq5NPdmaD5NQ59Nk26Kl/vZbwW9Fr8vg=="
+    },
+    "node_modules/batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY= sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
+    },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
+      "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz",
+      "integrity": "sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.10.3",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/body-parser/node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/body-parser/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/body-parser/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g= sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/bonjour-service": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.0.13.tgz",
+      "integrity": "sha512-LWKRU/7EqDUC9CTAQtuZl5HzBALoCYwtLhffW3et7vZMwv3bWLpJf8bRYlMD5OCcDpTfnPgNCV4yo9ZIaJGMiA==",
+      "dependencies": {
+        "array-flatten": "^2.1.2",
+        "dns-equal": "^1.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "multicast-dns": "^7.2.5"
+      }
+    },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24= sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+    },
+    "node_modules/boxen": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-6.2.1.tgz",
+      "integrity": "sha512-H4PEsJXfFI/Pt8sjDWbHlQPx4zL/bvSQjcilJmaulGt5mLDorHOHpmdXAJcBcmru7PhYSp/cDMWRko4ZUMFkSw==",
+      "dependencies": {
+        "ansi-align": "^3.0.1",
+        "camelcase": "^6.2.0",
+        "chalk": "^4.1.2",
+        "cli-boxes": "^3.0.0",
+        "string-width": "^5.0.1",
+        "type-fest": "^2.5.0",
+        "widest-line": "^4.0.1",
+        "wrap-ansi": "^8.0.1"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
+      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001587",
+        "electron-to-chromium": "^1.4.668",
+        "node-releases": "^2.0.14",
+        "update-browserslist-db": "^1.0.13"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+    },
+    "node_modules/bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg= sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/cacheable-lookup": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-7.0.0.tgz",
+      "integrity": "sha512-+qJyx4xiKra8mZrcwhjMRMUhD5NR1R8esPkzIYxX96JiecFoxAXFuz/GpR3+ev4PE1WamHip78wV0vcmPQtp8w==",
+      "engines": {
+        "node": ">=14.16"
+      }
+    },
+    "node_modules/cacheable-request": {
+      "version": "10.2.14",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-10.2.14.tgz",
+      "integrity": "sha512-zkDT5WAF4hSSoUgyfg5tFIxz8XQK+25W/TLVojJTMKBaxevLBBtLxgqguAuVQB8PVW79FVjHcU+GJ9tVbDZ9mQ==",
+      "dependencies": {
+        "@types/http-cache-semantics": "^4.0.2",
+        "get-stream": "^6.0.1",
+        "http-cache-semantics": "^4.1.1",
+        "keyv": "^4.5.3",
+        "mimic-response": "^4.0.0",
+        "normalize-url": "^8.0.0",
+        "responselike": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      }
+    },
+    "node_modules/cacheable-request/node_modules/normalize-url": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-8.0.0.tgz",
+      "integrity": "sha512-uVFpKhj5MheNBJRTiMZ9pE/7hD1QTeEvugSJW/OmLzAp78PB5O6adfMNTvmfKhXBkvCzC+rqifWcVYpGFwTjnw==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camel-case": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
+      "dependencies": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
+      "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001591",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001591.tgz",
+      "integrity": "sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
+    },
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/char-regex": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/cheerio": {
+      "version": "1.0.0-rc.12",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz",
+      "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==",
+      "dependencies": {
+        "cheerio-select": "^2.1.0",
+        "dom-serializer": "^2.0.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "htmlparser2": "^8.0.1",
+        "parse5": "^7.0.0",
+        "parse5-htmlparser2-tree-adapter": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/cheerio?sponsor=1"
+      }
+    },
+    "node_modules/cheerio-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz",
+      "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-select": "^5.1.0",
+        "css-what": "^6.1.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz",
+      "integrity": "sha512-9e/zx1jw7B4CO+c/RXoCsfg/x1AfUBioy4owYH0bJprEYAx5hRFLRhWBqHAG57D0ZM4H7vxbP7bPe0VwhQRYDQ==",
+      "dependencies": {
+        "tslib": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/chrome-trace-event/node_modules/tslib": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
+      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+    },
+    "node_modules/ci-info": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
+      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/clean-css": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
+      "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
+      "dependencies": {
+        "source-map": "~0.6.0"
+      },
+      "engines": {
+        "node": ">= 10.0"
+      }
+    },
+    "node_modules/clean-css/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/clean-stack": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
+      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cli-boxes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
+      "integrity": "sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-table3": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.6.3.tgz",
+      "integrity": "sha512-w5Jac5SykAeZJKntOxJCrm63Eg5/4dhMWIcuTbo9rpE+brgaSZo0RuNJZeOyMgsUdhDeojvgyQLmjI+K50ZGyg==",
+      "dependencies": {
+        "string-width": "^4.2.0"
+      },
+      "engines": {
+        "node": "10.* || >= 12.*"
+      },
+      "optionalDependencies": {
+        "@colors/colors": "1.5.0"
+      }
+    },
+    "node_modules/cli-table3/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/cli-table3/node_modules/string-width": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/clone-deep/node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/collapse-white-space": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz",
+      "integrity": "sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/colord": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
+      "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ=="
+    },
+    "node_modules/colorette": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
+      "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g=="
+    },
+    "node_modules/combine-promises": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/combine-promises/-/combine-promises-1.1.0.tgz",
+      "integrity": "sha512-ZI9jvcLDxqwaXEixOhArm3r7ReIivsXkpbyEWyeOhzz1QS0iSgBPnWvEqvIQtYyamGCYA88gFhmUrs9hrrQ0pg==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/commander": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/common-path-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz",
+      "integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w=="
+    },
+    "node_modules/compressible": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.17.tgz",
+      "integrity": "sha512-BGHeLCK1GV7j1bSmQQAi26X+GgWcTjLr/0tzSvMCl3LH1w1IJ4PFSPoV5316b30cneTziC+B1a+3OjoSUcQYmw==",
+      "dependencies": {
+        "mime-db": ">= 1.40.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/compressible/node_modules/mime-db": {
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
+      "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "dependencies": {
+        "accepts": "~1.3.5",
+        "bytes": "3.0.0",
+        "compressible": "~2.0.16",
+        "debug": "2.6.9",
+        "on-headers": "~1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/compression/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/compression/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g= sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/compression/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+    },
+    "node_modules/config-chain": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
+      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
+      "dependencies": {
+        "ini": "^1.3.4",
+        "proto-list": "~1.2.1"
+      }
+    },
+    "node_modules/configstore": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-6.0.0.tgz",
+      "integrity": "sha512-cD31W1v3GqUlQvbBCGcXmd2Nj9SvLDOP1oQ0YFuLETufzSPaKp11rYBsSOm7rCsW3OnIRAFM3OxRhceaXNYHkA==",
+      "dependencies": {
+        "dot-prop": "^6.0.1",
+        "graceful-fs": "^4.2.6",
+        "unique-string": "^3.0.0",
+        "write-file-atomic": "^3.0.3",
+        "xdg-basedir": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/yeoman/configstore?sponsor=1"
+      }
+    },
+    "node_modules/connect-history-api-fallback": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz",
+      "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/consola": {
+      "version": "2.15.3",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.3.tgz",
+      "integrity": "sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw=="
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+      "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ= sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="
+    },
+    "node_modules/cookie": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw= sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
+    },
+    "node_modules/copy-text-to-clipboard": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.0.tgz",
+      "integrity": "sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/copy-webpack-plugin": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz",
+      "integrity": "sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ==",
+      "dependencies": {
+        "fast-glob": "^3.2.11",
+        "glob-parent": "^6.0.1",
+        "globby": "^13.1.1",
+        "normalize-path": "^3.0.0",
+        "schema-utils": "^4.0.0",
+        "serialize-javascript": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/globby": {
+      "version": "13.1.1",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.1.tgz",
+      "integrity": "sha512-XMzoDZbGZ37tufiv7g0N4F/zp3zkwdFtVbV3EHsVl1KQr4RPLfNoT068/97RPshz2J5xYNEjLKKBKaGHifBd3Q==",
+      "dependencies": {
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.11",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/copy-webpack-plugin/node_modules/slash": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
+      "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/core-js": {
+      "version": "3.36.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.36.0.tgz",
+      "integrity": "sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-js-compat": {
+      "version": "3.36.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.36.0.tgz",
+      "integrity": "sha512-iV9Pd/PsgjNWBXeq8XRtWVSgz2tKAfhfvBs7qxYty+RlRd+OCksaWmOnc4JKrTc1cToXL1N0s3l/vwlxPtdElw==",
+      "dependencies": {
+        "browserslist": "^4.22.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-js-pure": {
+      "version": "3.36.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.36.0.tgz",
+      "integrity": "sha512-cN28qmhRNgbMZZMc/RFu5w8pK9VJzpb2rJVR/lHuZJKwmXnoWOpXmMkxqBB514igkp1Hu8WGROsiOAzUcKdHOQ==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac= sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ=="
+    },
+    "node_modules/cosmiconfig": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
+      "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/crypto-random-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-4.0.0.tgz",
+      "integrity": "sha512-x8dy3RnvYdlUcPOjkEHqozhiwzKNSq7GcPuXFbnyMOCHxX8V3OgIg/pYuabl2sbUPfIJaeAQB7PMOK8DFIdoRA==",
+      "dependencies": {
+        "type-fest": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/crypto-random-string/node_modules/type-fest": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
+      "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/css-declaration-sorter": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
+      "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
+    "node_modules/css-loader": {
+      "version": "6.10.0",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.10.0.tgz",
+      "integrity": "sha512-LTSA/jWbwdMlk+rhmElbDR2vbtQoTBPr7fkJE+mxrHj+7ru0hUmHafDRzWIjIHTwpitWVaqY2/UWGRca3yUgRw==",
+      "dependencies": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.33",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.4",
+        "postcss-modules-scope": "^3.1.1",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-4.2.2.tgz",
+      "integrity": "sha512-s3Of/4jKfw1Hj9CxEO1E5oXhQAxlayuHO2y/ML+C6I9sQ7FdzfEV6QgMLN3vI+qFsjJGIAFLKtQK7t8BOXAIyA==",
+      "dependencies": {
+        "cssnano": "^5.1.8",
+        "jest-worker": "^29.1.2",
+        "postcss": "^8.4.17",
+        "schema-utils": "^4.0.0",
+        "serialize-javascript": "^6.0.0",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@parcel/css": {
+          "optional": true
+        },
+        "@swc/css": {
+          "optional": true
+        },
+        "clean-css": {
+          "optional": true
+        },
+        "csso": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/css-minimizer-webpack-plugin/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-select": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
+      "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-tree/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cssnano": {
+      "version": "5.1.15",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
+      "integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
+      "dependencies": {
+        "cssnano-preset-default": "^5.2.14",
+        "lilconfig": "^2.0.3",
+        "yaml": "^1.10.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/cssnano"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano-preset-advanced": {
+      "version": "5.3.10",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-advanced/-/cssnano-preset-advanced-5.3.10.tgz",
+      "integrity": "sha512-fnYJyCS9jgMU+cmHO1rPSPf9axbQyD7iUhLO5Df6O4G+fKIOMps+ZbU0PdGFejFBBZ3Pftf18fn1eG7MAPUSWQ==",
+      "dependencies": {
+        "autoprefixer": "^10.4.12",
+        "cssnano-preset-default": "^5.2.14",
+        "postcss-discard-unused": "^5.1.0",
+        "postcss-merge-idents": "^5.1.1",
+        "postcss-reduce-idents": "^5.2.0",
+        "postcss-zindex": "^5.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano-preset-default": {
+      "version": "5.2.14",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
+      "integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
+      "dependencies": {
+        "css-declaration-sorter": "^6.3.1",
+        "cssnano-utils": "^3.1.0",
+        "postcss-calc": "^8.2.3",
+        "postcss-colormin": "^5.3.1",
+        "postcss-convert-values": "^5.1.3",
+        "postcss-discard-comments": "^5.1.2",
+        "postcss-discard-duplicates": "^5.1.0",
+        "postcss-discard-empty": "^5.1.1",
+        "postcss-discard-overridden": "^5.1.0",
+        "postcss-merge-longhand": "^5.1.7",
+        "postcss-merge-rules": "^5.1.4",
+        "postcss-minify-font-values": "^5.1.0",
+        "postcss-minify-gradients": "^5.1.1",
+        "postcss-minify-params": "^5.1.4",
+        "postcss-minify-selectors": "^5.2.1",
+        "postcss-normalize-charset": "^5.1.0",
+        "postcss-normalize-display-values": "^5.1.0",
+        "postcss-normalize-positions": "^5.1.1",
+        "postcss-normalize-repeat-style": "^5.1.1",
+        "postcss-normalize-string": "^5.1.0",
+        "postcss-normalize-timing-functions": "^5.1.0",
+        "postcss-normalize-unicode": "^5.1.1",
+        "postcss-normalize-url": "^5.1.0",
+        "postcss-normalize-whitespace": "^5.1.1",
+        "postcss-ordered-values": "^5.1.3",
+        "postcss-reduce-initial": "^5.1.2",
+        "postcss-reduce-transforms": "^5.1.0",
+        "postcss-svgo": "^5.1.0",
+        "postcss-unique-selectors": "^5.1.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/cssnano-utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
+      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dependencies": {
+        "css-tree": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+    },
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
+      "integrity": "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/decompress-response/node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/default-gateway": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
+      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
+      "dependencies": {
+        "execa": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/defer-to-connect": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
+      "integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
+      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "dependencies": {
+        "object-keys": "^1.0.12"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/del": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz",
+      "integrity": "sha512-ua8BhapfP0JUJKC/zV9yHHDW/rDoDxP4Zhn3AkA6/xT6gY7jYXJiaeyBZznYVujhZZET+UgcbZiQ7sN3WqcImg==",
+      "dependencies": {
+        "globby": "^11.0.1",
+        "graceful-fs": "^4.2.4",
+        "is-glob": "^4.0.1",
+        "is-path-cwd": "^2.2.0",
+        "is-path-inside": "^3.0.2",
+        "p-map": "^4.0.0",
+        "rimraf": "^3.0.2",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
+    },
+    "node_modules/detect-node": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz",
+      "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw=="
+    },
+    "node_modules/detect-port": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.5.1.tgz",
+      "integrity": "sha512-aBzdj76lueB6uUst5iAs7+0H/oOjqI5D16XUWxlWMIMROhcM0rfsNVk93zTngq1dDNpoXRr++Sus7ETAExppAQ==",
+      "dependencies": {
+        "address": "^1.0.1",
+        "debug": "4"
+      },
+      "bin": {
+        "detect": "bin/detect-port.js",
+        "detect-port": "bin/detect-port.js"
+      }
+    },
+    "node_modules/detect-port-alt": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
+      "integrity": "sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==",
+      "dependencies": {
+        "address": "^1.0.1",
+        "debug": "^2.6.0"
+      },
+      "bin": {
+        "detect": "bin/detect-port",
+        "detect-port": "bin/detect-port"
+      },
+      "engines": {
+        "node": ">= 4.2.1"
+      }
+    },
+    "node_modules/detect-port-alt/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/detect-port-alt/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g= sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/dns-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
+      "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0= sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg=="
+    },
+    "node_modules/dns-packet": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.3.1.tgz",
+      "integrity": "sha512-spBwIj0TK0Ey3666GwIdWVfUpLyubpU53BTCu8iPn4r4oXd9O14Hjg3EHw3ts2oed77/SeckunUYCyRlSngqHw==",
+      "dependencies": {
+        "@leichtgewicht/ip-codec": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/dom-converter": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
+      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+      "dependencies": {
+        "utila": "~0.4"
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+      "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/dot-prop": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-6.0.1.tgz",
+      "integrity": "sha512-tE7ztYzXHIeyvc7N+hR3oi7FIbf/NIjVP9hmAt3yMXzrQ072/fpjGLx2GxNxGxUl5V73MEqYzioOMoVhGMJ5cA==",
+      "dependencies": {
+        "is-obj": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/dot-prop/node_modules/is-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0= sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.689",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.689.tgz",
+      "integrity": "sha512-GatzRKnGPS1go29ep25reM94xxd1Wj8ritU0yRhCJ/tr1Bg8gKnm6R9O/yPOhGQBoLMZ9ezfrpghNaTw97C/PQ=="
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
+    "node_modules/emojilib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/emojilib/-/emojilib-2.4.0.tgz",
+      "integrity": "sha512-5U0rVMU5Y2n2+ykNLQqMoqklN9ICBT/KsvC1Gz6vqHbz2AXXGkG+Pm5rMWk/8Vjrr/mY9985Hi8DYzn1F09Nyw=="
+    },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/emoticon": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/emoticon/-/emoticon-4.0.1.tgz",
+      "integrity": "sha512-dqx7eA9YaqyvYtUhJwT4rC1HIp82j5ybS1/vQ42ur+jBe17dJMwZE4+gvL1XadSFfxaPFFGt3Xsw+Y8akThDlw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k= sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.1.tgz",
+      "integrity": "sha512-3d3JRbwsCLJsYgvb6NuWEG44jjPSOMuS73L/6+7BZuoKm3W+qXnSoIYVHi8dG7Qcg4inAY4jbzkZ7MnskePeDg==",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
+      "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w=="
+    },
+    "node_modules/escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-goat": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-4.0.0.tgz",
+      "integrity": "sha512-2Sd4ShcWxbx6OY1IHyla/CVNwvg7XwZVoXZHcSu9w9SReNP1EzzD5T8NWKIR38fIqEns9kDWKUQTXXAmlDrdPg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg= sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse/node_modules/estraverse": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+      "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz",
+      "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM= sha512-VHvyaGnJy+FuGfcfaM7W7OZw4mQiKW73jPHwQXx2VnMSUBajYmytOT5sKEfsBvNPtGX6YDwcrGDz2eocoHg0JA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/estree-util-attach-comments": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-attach-comments/-/estree-util-attach-comments-3.0.0.tgz",
+      "integrity": "sha512-cKUwm/HUcTDsYh/9FgnuFqpfquUbwIqwKM26BVCGDPVgvaCl/nDCCjUfiLlx6lsEZ3Z4RFxNbOQ60pkaEwFxGw==",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-build-jsx": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/estree-util-build-jsx/-/estree-util-build-jsx-3.0.1.tgz",
+      "integrity": "sha512-8U5eiL6BTrPxp/CHbs2yMgP8ftMhR5ww1eIKoWRMlqvltHF8fZn5LRDvTKuxD3DUn+shRbLGqXemcP51oFCsGQ==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "estree-walker": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-to-js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-to-js/-/estree-util-to-js-2.0.0.tgz",
+      "integrity": "sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "astring": "^1.8.0",
+        "source-map": "^0.7.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-util-value-to-estree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/estree-util-value-to-estree/-/estree-util-value-to-estree-3.0.1.tgz",
+      "integrity": "sha512-b2tdzTurEIbwRh+mKrEcaWfu1wgb8J1hVsgREg7FFiecWwK/PhO8X0kyc+0bIcKNtD4sqxIdNoRy6/p/TvECEA==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "is-plain-obj": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/remcohaszing"
+      }
+    },
+    "node_modules/estree-util-visit": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-2.0.0.tgz",
+      "integrity": "sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
+      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs= sha512-UUPPULqkyAV+M3Shodis7l8D+IyX6V8SbaBnTb449jf3fMTd8+UOZI1Q70NbZVOQkcR91yYgdHsJiMMMVmYshg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eta": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/eta/-/eta-2.2.0.tgz",
+      "integrity": "sha512-UVQ72Rqjy/ZKQalzV5dCCJP80GrmPrMxh6NlNf+erV6ObL0ZFkhCstWRawS85z3smdr3d2wXPsZEY7rDPfGd2g==",
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/eta-dev/eta?sponsor=1"
+      }
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc= sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/eval": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/eval/-/eval-0.1.8.tgz",
+      "integrity": "sha512-EzV94NYKoO09GLXGjXj9JIlXijVck4ONSr5wiCWDvhsvj5jxSrzTmRU/9C1DyB6uToszLs8aifA6NQ7lEQdvFw==",
+      "dependencies": {
+        "@types/node": "*",
+        "require-like": ">= 0.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/execa": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.0.0.tgz",
+      "integrity": "sha512-ov6w/2LCiuyO4RLYGdpFGjkcs0wMTgGE8PrkTHikeUy5iJekXyPIKUjifk5CsE0pt7sMCrMZ3YNqoCj6idQOnQ==",
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.1.tgz",
+      "integrity": "sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==",
+      "dependencies": {
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.0",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.5.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.2.0",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.10.3",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/express/node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI= sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg=="
+    },
+    "node_modules/express/node_modules/content-disposition": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
+      "dependencies": {
+        "safe-buffer": "5.2.1"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/express/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g= sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/express/node_modules/path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w= sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+    },
+    "node_modules/express/node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8= sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
+    "node_modules/fast-glob": {
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz",
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I= sha512-eIgZvM9C3P05kg0qxfqaVU6Tma4QedCPIByQOcemV0vju8ot3cS2DpHi4m2G2JvbSMI152rjfLX0p1pkSdyPlQ=="
+    },
+    "node_modules/fast-url-parser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fast-url-parser/-/fast-url-parser-1.1.3.tgz",
+      "integrity": "sha1-9K8+qfNNiicc9YrSs3WfQx8LMY0= sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==",
+      "dependencies": {
+        "punycode": "^1.3.2"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.6.0.tgz",
+      "integrity": "sha512-jmxqQ3Z/nXoeyDmWAzF9kH1aGZSis6e/SbfPmJpUnyZ0ogr6iscHQaml4wsEepEWSdtmpy+eVXmCRIMpxaXqOA==",
+      "dependencies": {
+        "reusify": "^1.0.0"
+      }
+    },
+    "node_modules/fault": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
+      "integrity": "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/feed": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/feed/-/feed-4.2.2.tgz",
+      "integrity": "sha512-u5/sxGfiMfZNtJ3OvQpXcvotFpYkL0n9u9mM2vkui2nGo8b4wvDkJ8gAkYqbA8QpGyFCv3RK0Z+Iv+9veCS9bQ==",
+      "dependencies": {
+        "xml-js": "^1.6.11"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/file-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/file-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/file-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/file-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
+    "node_modules/file-loader/node_modules/schema-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+      "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.6",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/filesize": {
+      "version": "8.0.7",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
+      "integrity": "sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/finalhandler/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/finalhandler/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g= sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/find-cache-dir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-4.0.0.tgz",
+      "integrity": "sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==",
+      "dependencies": {
+        "common-path-prefix": "^3.0.0",
+        "pkg-dir": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-6.3.0.tgz",
+      "integrity": "sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==",
+      "dependencies": {
+        "locate-path": "^7.1.0",
+        "path-exists": "^5.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.0.tgz",
+      "integrity": "sha512-cS178Y+xxtIjEUorcHddKS7yCMlrDPV31mt47blKKRfMd70Kxu5xruAFE2o9sDY6wVC5deuob/u/alD04YYHnw==",
+      "dependencies": {
+        "@babel/code-frame": "^7.8.3",
+        "@types/json-schema": "^7.0.5",
+        "chalk": "^4.1.0",
+        "chokidar": "^3.4.2",
+        "cosmiconfig": "^6.0.0",
+        "deepmerge": "^4.2.2",
+        "fs-extra": "^9.0.0",
+        "glob": "^7.1.6",
+        "memfs": "^3.1.2",
+        "minimatch": "^3.0.4",
+        "schema-utils": "2.7.0",
+        "semver": "^7.3.2",
+        "tapable": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "yarn": ">=1.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">= 6",
+        "typescript": ">= 2.7",
+        "vue-template-compiler": "*",
+        "webpack": ">= 4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        },
+        "vue-template-compiler": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.4.1.tgz",
+      "integrity": "sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
+      "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.4",
+        "ajv": "^6.12.2",
+        "ajv-keywords": "^3.4.1"
+      },
+      "engines": {
+        "node": ">= 8.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/tapable": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
+      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/form-data-encoder": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-2.1.4.tgz",
+      "integrity": "sha512-yDYSgNMraqvnxiEXO4hi88+YZxaHC6QKzb5N84iRCTDeRO7ZALpir/lVmf/uXUhnwUr2O4HU8s/n6x+yNjQkHw==",
+      "engines": {
+        "node": ">= 14.17"
+      }
+    },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac= sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
+      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
+    "node_modules/fs-monkey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
+      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q=="
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8= sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
+      "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-own-enumerable-property-symbols": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.0.tgz",
+      "integrity": "sha512-CIJYJC4GGF06TakLg8z4GQKvDsx9EMspVxOYih7LerEL/WosUnFIww45CGfxfeKHqlg3twgUrYRT1O3WQqjGCg=="
+    },
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/github-slugger": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz",
+      "integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw=="
+    },
+    "node_modules/glob": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz",
+      "integrity": "sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+    },
+    "node_modules/global-dirs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-3.0.0.tgz",
+      "integrity": "sha512-v8ho2DS5RiCjftj1nD9NmnfaOzTdud7RRnVd9kFNOjqZbISlx5DQ+OrTkywgd0dIt7oFCvKetZSHoHcP3sDdiA==",
+      "dependencies": {
+        "ini": "2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/global-dirs/node_modules/ini": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz",
+      "integrity": "sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "dependencies": {
+        "global-prefix": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "dependencies": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/got": {
+      "version": "12.6.1",
+      "resolved": "https://registry.npmjs.org/got/-/got-12.6.1.tgz",
+      "integrity": "sha512-mThBblvlAF1d4O5oqyvN+ZxLAYwIJK7bpMxgYqPD9okW0C3qm5FFn7k811QrcuEBwaogR3ngOFoCfs6mRv7teQ==",
+      "dependencies": {
+        "@sindresorhus/is": "^5.2.0",
+        "@szmarczak/http-timer": "^5.0.1",
+        "cacheable-lookup": "^7.0.0",
+        "cacheable-request": "^10.2.8",
+        "decompress-response": "^6.0.0",
+        "form-data-encoder": "^2.1.2",
+        "get-stream": "^6.0.1",
+        "http2-wrapper": "^2.1.10",
+        "lowercase-keys": "^3.0.0",
+        "p-cancelable": "^3.0.0",
+        "responselike": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/got?sponsor=1"
+      }
+    },
+    "node_modules/got/node_modules/@sindresorhus/is": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-5.6.0.tgz",
+      "integrity": "sha512-TV7t8GKYaJWsn00tFDqBw8+Uqmr8A0fRU1tvTQhyZzGv0sJCGRQL3JGMI3ucuKo3XIZdUP+Lx7/gh2t3lewy7g==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/is?sponsor=1"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.10",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+    },
+    "node_modules/gray-matter": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz",
+      "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==",
+      "dependencies": {
+        "js-yaml": "^3.13.1",
+        "kind-of": "^6.0.2",
+        "section-matter": "^1.0.0",
+        "strip-bom-string": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/gray-matter/node_modules/argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dependencies": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/gray-matter/node_modules/js-yaml": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
+      "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+      "dependencies": {
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/gzip-size": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
+      "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
+      "dependencies": {
+        "duplexer": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/handle-thing": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
+      "integrity": "sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ=="
+    },
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-yarn": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-3.0.0.tgz",
+      "integrity": "sha512-IrsVwUHhEULx3R8f/aA8AHuEzAorplsab/v8HBzEiIukwq5i/EC+xmOW+HfP1OaDP+2JkgT1yILHN2O3UFIbcA==",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/hast-util-from-parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.1.tgz",
+      "integrity": "sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hastscript": "^8.0.0",
+        "property-information": "^6.0.0",
+        "vfile": "^6.0.0",
+        "vfile-location": "^5.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-raw": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.0.2.tgz",
+      "integrity": "sha512-PldBy71wO9Uq1kyaMch9AHIghtQvIwxBUkv823pKmkTM3oV1JxtsTNYdevMxvUHqcnOAuO65JKU2+0NOxc2ksA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "hast-util-to-parse5": "^8.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "parse5": "^7.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-estree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.0.tgz",
+      "integrity": "sha512-lfX5g6hqVh9kjS/B9E2gSkvHH4SZNiQFiqWS0x9fENzEl+8W12RqdRxX6d/Cwxi30tPQs3bIO+aolQJNp1bIyw==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-attach-comments": "^3.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-object": "^0.4.0",
+        "unist-util-position": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.0.tgz",
+      "integrity": "sha512-H/y0+IWPdsLLS738P8tDnrQ8Z+dj12zQQ6WC11TIM21C8WFVoIxcqWXf2H3hiTVZjF1AWqoimGwrTWecWrnmRQ==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-object": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-jsx-runtime/node_modules/inline-style-parser": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.2.tgz",
+      "integrity": "sha512-EcKzdTHVe8wFVOGEYXiW9WmJXPjqi1T+234YpJr98RiFYKHV3cdy1+3mkTE+KHTHxFFLH51SfaGOoUdW+v7ViQ=="
+    },
+    "node_modules/hast-util-to-jsx-runtime/node_modules/style-to-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.5.tgz",
+      "integrity": "sha512-rDRwHtoDD3UMMrmZ6BzOW0naTjMsVZLIjsGleSKS/0Oz+cgCfAPRspaqJuE8rDzpKha/nEvnM0IF4seEAZUTKQ==",
+      "dependencies": {
+        "inline-style-parser": "0.2.2"
+      }
+    },
+    "node_modules/hast-util-to-parse5": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.0.tgz",
+      "integrity": "sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-8.0.0.tgz",
+      "integrity": "sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
+    "node_modules/history": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-4.9.0.tgz",
+      "integrity": "sha512-H2DkjCjXf0Op9OAr6nJ56fcRkTSNrUiv41vNJ6IswJjif6wlpZK0BTfFbi7qK9dXLSYZxkq5lBsj3vUjlYBYZA==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^2.2.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^0.4.0"
+      }
+    },
+    "node_modules/history/node_modules/resolve-pathname": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
+      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
+      "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hpack.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
+      "integrity": "sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI= sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==",
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "obuf": "^1.0.0",
+        "readable-stream": "^2.0.1",
+        "wbuf": "^1.1.0"
+      }
+    },
+    "node_modules/hpack.js/node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE= sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
+    },
+    "node_modules/hpack.js/node_modules/readable-stream": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+      "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/hpack.js/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/hpack.js/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/html-entities": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
+      "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ=="
+    },
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="
+    },
+    "node_modules/html-minifier-terser": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-7.2.0.tgz",
+      "integrity": "sha512-tXgn3QfqPIpGl9o+K5tpcj3/MN4SfLtsx2GWwBC3SSd0tXQGyF3gsSqad8loJgKZGM3ZxbYDd5yhiBIdWpmvLA==",
+      "dependencies": {
+        "camel-case": "^4.1.2",
+        "clean-css": "~5.3.2",
+        "commander": "^10.0.0",
+        "entities": "^4.4.0",
+        "param-case": "^3.0.4",
+        "relateurl": "^0.2.7",
+        "terser": "^5.15.1"
+      },
+      "bin": {
+        "html-minifier-terser": "cli.js"
+      },
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      }
+    },
+    "node_modules/html-minifier-terser/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/html-tags": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/html-webpack-plugin": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.0.tgz",
+      "integrity": "sha512-iwaY4wzbe48AfKLZ/Cc8k0L+FKG6oSNRaZ8x5A/T/IVDGyXcbHncM9TdDa93wn0FsSm82FhTKW7f3vS61thXAw==",
+      "dependencies": {
+        "@types/html-minifier-terser": "^6.0.0",
+        "html-minifier-terser": "^6.0.2",
+        "lodash": "^4.17.21",
+        "pretty-error": "^4.0.0",
+        "tapable": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/html-webpack-plugin"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "webpack": "^5.20.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/html-webpack-plugin/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/html-webpack-plugin/node_modules/html-minifier-terser": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.0.2.tgz",
+      "integrity": "sha512-AgYO3UGhMYQx2S/FBJT3EM0ZYcKmH6m9XL9c1v77BeK/tYJxGPxT1/AtsdUi4FcP8kZGmqqnItCcjFPcX9hk6A==",
+      "dependencies": {
+        "camel-case": "^4.1.2",
+        "clean-css": "^5.1.5",
+        "commander": "^8.1.0",
+        "he": "^1.2.0",
+        "param-case": "^3.0.4",
+        "relateurl": "^0.2.7",
+        "terser": "^5.7.2"
+      },
+      "bin": {
+        "html-minifier-terser": "cli.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
+      "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "entities": "^4.3.0"
+      }
+    },
+    "node_modules/http-cache-semantics": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
+    },
+    "node_modules/http-deceiver": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
+      "integrity": "sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc= sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw=="
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
+      "dependencies": {
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/http-parser-js": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.3.tgz",
+      "integrity": "sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg=="
+    },
+    "node_modules/http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "dependencies": {
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/http-proxy-middleware": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
+      "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
+      "dependencies": {
+        "@types/http-proxy": "^1.17.8",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "is-plain-obj": "^3.0.0",
+        "micromatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "@types/express": "^4.17.13"
+      },
+      "peerDependenciesMeta": {
+        "@types/express": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/http-proxy-middleware/node_modules/is-plain-obj": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/http2-wrapper": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-2.2.1.tgz",
+      "integrity": "sha512-V5nVw1PAOgfI3Lmeaj2Exmeg7fenjhRUgz1lPSezy1CuhPYbgQtbQj4jZfEAEMlaL+vupsvhjqCyjzob0yxsmQ==",
+      "dependencies": {
+        "quick-lru": "^5.1.1",
+        "resolve-alpn": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=10.19.0"
+      }
+    },
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/image-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.1.1.tgz",
+      "integrity": "sha512-541xKlUw6jr/6gGuk92F+mYM5zaFAc5ahphvkqvNe2bQ6gVBkd6bfrmVJ2t4KDAfikAYZyIqTnktX3i6/aQDrQ==",
+      "dependencies": {
+        "queue": "6.0.2"
+      },
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
+    "node_modules/immer": {
+      "version": "9.0.12",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.12.tgz",
+      "integrity": "sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-lazy": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
+      "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o= sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/infima": {
+      "version": "0.2.0-alpha.43",
+      "resolved": "https://registry.npmjs.org/infima/-/infima-0.2.0-alpha.43.tgz",
+      "integrity": "sha512-2uw57LvUqW0rK/SWYnd/2rRfxNA5DDNOh33jxF7fy46VWoNhGxiUQyVZHbBMjQ33mQem0cjdDVwgWVAmlRfgyQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk= sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+    },
+    "node_modules/inline-style-parser": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
+      "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
+    },
+    "node_modules/interpret": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.2.0.tgz",
+      "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
+      "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0= sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-ci": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",
+      "integrity": "sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==",
+      "dependencies": {
+        "ci-info": "^3.2.0"
+      },
+      "bin": {
+        "is-ci": "bin.js"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
+      "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik= sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI= sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-installed-globally": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz",
+      "integrity": "sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==",
+      "dependencies": {
+        "global-dirs": "^3.0.0",
+        "is-path-inside": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-npm": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-6.0.0.tgz",
+      "integrity": "sha512-JEjxbSmtPSt1c8XTkVrlujcXdKV1/tvuQ7GwKcAlyiVLeYFQ2VHat8xfrDJsIkhCdF/tZ7CiIR3sy141c6+gPQ==",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8= sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-path-cwd": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
+      "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-reference": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
+      "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk= sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-root": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
+      "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/is-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
+    },
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-yarn-global": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.4.1.tgz",
+      "integrity": "sha512-/kppl+R+LO5VmhYSEWARUFjodS25D68gvj8W7z0I7OWhUla5xWu8KL6CtB2V0R6yqhnRgbcaREMr4EEM6htLPQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8= sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA= sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+    },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8= sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/jest-util": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
+      "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==",
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "graceful-fs": "^4.2.9",
+        "picomatch": "^2.2.3"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-worker": {
+      "version": "29.7.0",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.7.0.tgz",
+      "integrity": "sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==",
+      "dependencies": {
+        "@types/node": "*",
+        "jest-util": "^29.7.0",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      }
+    },
+    "node_modules/jest-worker/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
+      "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/joi": {
+      "version": "17.12.2",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.12.2.tgz",
+      "integrity": "sha512-RonXAIzCiHLc8ss3Ibuz45u28GOsWE1UpfDXLbN/9NKbL4tCJf8TWYVKsoYuuh+sAUt7fsSNpA+r2+TBA6Wjmw==",
+      "dependencies": {
+        "@hapi/hoek": "^9.3.0",
+        "@hapi/topo": "^5.1.0",
+        "@sideway/address": "^4.1.5",
+        "@sideway/formula": "^3.0.1",
+        "@sideway/pinpoint": "^2.0.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/latest-version": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-7.0.0.tgz",
+      "integrity": "sha512-KvNT4XqAMzdcL6ka6Tl3i2lYeFDgXNCuIX+xNx6ZMVR1dFq+idXd9FLKNMOIx0t9mJ9/HudyX4oZWXZQ0UJHeg==",
+      "dependencies": {
+        "package-json": "^8.1.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/launch-editor": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.6.1.tgz",
+      "integrity": "sha512-eB/uXmFVpY4zezmGp5XtU21kwo7GBbKB+EQ+UZeWtGb9yAM5xt/Evk+lYH3eRNAtId+ej4u7TYPFZ07w4s7rRw==",
+      "dependencies": {
+        "picocolors": "^1.0.0",
+        "shell-quote": "^1.8.1"
+      }
+    },
+    "node_modules/leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.3.tgz",
+      "integrity": "sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA= sha512-8ZmlJFVK9iCmtLz19HpSsR8HaAMWBT284VMNednLwlIMDP2hJDCIhUp0IZ2xUcZ+Ob6BM0VvCSJwzASDM45NLQ=="
+    },
+    "node_modules/loader-runner": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
+      "integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==",
+      "engines": {
+        "node": ">=6.11.5"
+      }
+    },
+    "node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-7.2.0.tgz",
+      "integrity": "sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==",
+      "dependencies": {
+        "p-locate": "^6.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168= sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4= sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag=="
+    },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ=="
+    },
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/lowercase-keys": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-3.0.0.tgz",
+      "integrity": "sha512-ozCC6gdQ+glXOQsveKD0YsDy8DSQFjDTz4zyzEHNV5+JP5D62LmfDZ6o1cycFx9ouG940M5dE8C8CTewdj2YWQ==",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/markdown-extensions": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz",
+      "integrity": "sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/markdown-table": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
+      "integrity": "sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdast-util-directive": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-directive/-/mdast-util-directive-3.0.0.tgz",
+      "integrity": "sha512-JUpYOqKI4mM3sZcNxmF/ox04XYFFkNwr0CFlrQIkCwbvH0xzMCqkMqAde9wRd80VAhaUrwFwKm2nxretdT1h7Q==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.1.tgz",
+      "integrity": "sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.0.tgz",
+      "integrity": "sha512-n7MTOr/z+8NAX/wmhhDji8O3bRvPTV/U0oTCaZJkjhPSKTPhS3xufVhKGF8s1pJ7Ox4QgoIU7KHseh09S+9rTA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-from-markdown/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/mdast-util-frontmatter": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-frontmatter/-/mdast-util-frontmatter-2.0.1.tgz",
+      "integrity": "sha512-LRqI9+wdgC25P0URIJY9vwocIzCcksduHQ9OF2joxQoyTNVduwLAFUzjoopuRJbJAReaKrNQKAZKL3uCMugWJA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-extension-frontmatter": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-frontmatter/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.0.0.tgz",
+      "integrity": "sha512-dgQEX5Amaq+DuUqf26jJqSK9qgixgd6rYDHAv4aTBuA92cTknZlKpPfa86Z/s8Dj8xsAQpFfBmPUHWJBWqS4Bw==",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.0.tgz",
+      "integrity": "sha512-FyzMsduZZHSc3i0Px3PQcBT4WJY/X/RCtEJKuybiC6sjPqLv7h1yqAkmILZtuxMSsUyaLUWNp71+vQH2zqp5cg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.0.0.tgz",
+      "integrity": "sha512-5jOT2boTSVkMnQ7LTrd6n/18kqwjmuYqo7JUPe+tRCY6O7dAuTFMtTPauYYrMPpox9hlN0uOx/FL8XvEfG9/mQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx/-/mdast-util-mdx-3.0.0.tgz",
+      "integrity": "sha512-JfbYLAW7XnYTTbUsmpu0kdBUVe+yKVJZBItEjwyYJiDJuZ9w4eeaqks4HQO+R7objWgS2ymV60GYpI14Ug554w==",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.0.tgz",
+      "integrity": "sha512-fGCu8eWdKUKNu5mohVGkhBXCXGnOTLuFqOvGMvdikr+J1w7lDJgxThOKpwRWzzbyXAU2hhSwsmssOY4yTokluw==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.1.0.tgz",
+      "integrity": "sha512-A8AJHlR7/wPQ3+Jre1+1rq040fX9A4Q1jG8JxmSNp/PLPHg80A6475wxTp3KzHpApFH6yWxFotHrJQA3dXP6/w==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-remove-position": "^5.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.1.0.tgz",
+      "integrity": "sha512-/e2l/6+OdGp/FB+ctrJ9Avz71AN/GRH3oi/3KAx/kMnoUsD6q0woXlDT8lLEeViVKE7oZxE7RXzvO3T8kF2/sA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.0.tgz",
+      "integrity": "sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g= sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/memfs": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.1.tgz",
+      "integrity": "sha512-1c9VPVvW5P7I85c35zAdEr1TD5+F11IToIHIlrVIcflfnzPkJa0ZoYEoEdYDP8KgPFoSZ/opDrUsAoZWym3mtw==",
+      "dependencies": {
+        "fs-monkey": "1.0.3"
+      },
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E= sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4= sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/micromark": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.0.tgz",
+      "integrity": "sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.0.tgz",
+      "integrity": "sha512-jThOz/pVmAYUtkroV3D5c1osFXAMv9e0ypGDOIZuCeAe91/sD6BoE2Sjzt30yuXtwOYUmySOhMas/PVyh02itA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark/node_modules/micromark-factory-space": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+      "integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-extension-directive": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-directive/-/micromark-extension-directive-3.0.0.tgz",
+      "integrity": "sha512-61OI07qpQrERc+0wEysLHMvoiO3s2R56x5u7glHq2Yqq6EHbH4dW25G9GfDdGCDYqA21KE6DWgNSzxSwHc2hSg==",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "parse-entities": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-directive/node_modules/micromark-factory-space": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+      "integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-directive/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-directive/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-extension-frontmatter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-frontmatter/-/micromark-extension-frontmatter-2.0.0.tgz",
+      "integrity": "sha512-C4AkuM3dA58cgZha7zVnuVxBhDsbttIMiytjgsM2XbHAB2faRVaHRle40558FBN+DJcrLNCoqG5mlrpdU4cRtg==",
+      "dependencies": {
+        "fault": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-frontmatter/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-frontmatter/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.0.0.tgz",
+      "integrity": "sha512-rTHfnpt/Q7dEAK1Y5ii0W8bhfJlVJFnJMHIPisfPK3gpVNuOP0VnRl96+YJ3RYWV/P4gFeQoGKNlT3RhuvpqAg==",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.0.0.tgz",
+      "integrity": "sha512-6Rzu0CYRKDv3BfLAUnZsSlzx3ak6HAoI85KTiijuKIz5UxZxbUI+pD6oHgw+6UtQuiRwnGRhzMmPRv4smcz0fg==",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote/node_modules/micromark-factory-space": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+      "integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-c3BR1ClMp5fxxmwP6AoOY2fXO9U8uFMKs4ADD66ahLTNcwzSCyRVU4k7LPV5Nxo/VJiR4TdzxRQY2v3qIUceCw==",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-PoHlhypg1ItIucOaHmKE8fbin3vTLpDOUg8KAr8gRCF1MOZI9Nquq2i/44wFvviM4WuxJzc3demT8Y3dkfvYrw==",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table/node_modules/micromark-factory-space": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+      "integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.0.1.tgz",
+      "integrity": "sha512-cY5PzGcnULaN5O7T+cOzfMoHjBW7j+T9D2sucA5d/KbsBTPcYdebm9zUd9zzdgJGCwahV+/W78Z3nbulBYVbTw==",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item/node_modules/micromark-factory-space": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+      "integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-extension-mdx-expression": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-3.0.0.tgz",
+      "integrity": "sha512-sI0nwhUDz97xyzqJAbHQhp5TfaxEvZZZ2JDqUo+7NvyIYG6BZ5CPPqj2ogUoPJlmXHBnyZUzISg9+oUmU6tUjQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-mdx-expression": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-mdx-expression/node_modules/micromark-factory-space": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+      "integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-mdx-expression/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-mdx-expression/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-extension-mdx-jsx": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-3.0.0.tgz",
+      "integrity": "sha512-uvhhss8OGuzR4/N17L1JwvmJIpPhAd8oByMawEKx6NVdBCbesjH4t+vjEp3ZXft9DwvlKSD07fCeI44/N0Vf2w==",
+      "dependencies": {
+        "@types/acorn": "^4.0.0",
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "micromark-factory-mdx-expression": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdx-jsx/node_modules/micromark-factory-space": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+      "integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-mdx-jsx/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-mdx-jsx/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-extension-mdx-md": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-md/-/micromark-extension-mdx-md-2.0.0.tgz",
+      "integrity": "sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ==",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdxjs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs/-/micromark-extension-mdxjs-3.0.0.tgz",
+      "integrity": "sha512-A873fJfhnJ2siZyUrJ31l34Uqwy4xIFmvPY1oj+Ean5PHcPBYzEsvqvWGaWcfEIr11O5Dlw3p2y0tZWpKHDejQ==",
+      "dependencies": {
+        "acorn": "^8.0.0",
+        "acorn-jsx": "^5.0.0",
+        "micromark-extension-mdx-expression": "^3.0.0",
+        "micromark-extension-mdx-jsx": "^3.0.0",
+        "micromark-extension-mdx-md": "^2.0.0",
+        "micromark-extension-mdxjs-esm": "^3.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdxjs-esm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-3.0.0.tgz",
+      "integrity": "sha512-DJFl4ZqkErRpq/dAPyeWp15tGrcrrJho1hKK5uBS70BCtfrIFg81sqcTVu3Ta+KD1Tk5vAtBNElWxtAa+m8K9A==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-position-from-estree": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-mdxjs-esm/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-mdxjs-esm/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.0.tgz",
+      "integrity": "sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-destination/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-destination/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.0.tgz",
+      "integrity": "sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-factory-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-F0ccWIUHRLRrYp5TC9ZYXmZo+p2AM13ggbsW4T0b5CRKP8KHVRB8t4pwtBgTxtjRmwrK0Irwm7vs2JOZabHZfg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-position-from-estree": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      }
+    },
+    "node_modules/micromark-factory-mdx-expression/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-mdx-expression/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-1.1.0.tgz",
+      "integrity": "sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space/node_modules/micromark-util-types": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-1.1.0.tgz",
+      "integrity": "sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.0.tgz",
+      "integrity": "sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title/node_modules/micromark-factory-space": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+      "integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.0.tgz",
+      "integrity": "sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace/node_modules/micromark-factory-space": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+      "integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-whitespace/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-character": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-1.2.0.tgz",
+      "integrity": "sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0"
+      }
+    },
+    "node_modules/micromark-util-character/node_modules/micromark-util-types": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-1.1.0.tgz",
+      "integrity": "sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.0.tgz",
+      "integrity": "sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-chunked/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.0.tgz",
+      "integrity": "sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-classify-character/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.0.tgz",
+      "integrity": "sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.1.tgz",
+      "integrity": "sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-numeric-character-reference/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.0.tgz",
+      "integrity": "sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-decode-string/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+      "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-events-to-acorn": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-2.0.2.tgz",
+      "integrity": "sha512-Fk+xmBrOv9QZnEDguL9OI9/NQQp6Hz4FuQ4YmCb/5V7+9eAh1s6AYSvL20kHkD67YIg7EpE54TiSlcsf3vyZgA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "@types/acorn": "^4.0.0",
+        "@types/estree": "^1.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-visit": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "vfile-message": "^4.0.0"
+      }
+    },
+    "node_modules/micromark-util-events-to-acorn/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.0.tgz",
+      "integrity": "sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.0.tgz",
+      "integrity": "sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-normalize-identifier/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.0.tgz",
+      "integrity": "sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+      "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-sanitize-uri/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.0.tgz",
+      "integrity": "sha512-vc93L1t+gpR3p8jxeVdaYlbV2jTYteDje19rNSS/H5dlhxUYll5Fy6vJ2cDwP8RnsXi818yGty1ayP55y3W6fg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-subtokenize/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-1.1.0.tgz",
+      "integrity": "sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark-util-types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
+      "integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromark/node_modules/micromark-factory-space": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+      "integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark/node_modules/micromark-util-character": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
+      "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark/node_modules/micromark-util-symbol": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+      "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
+      "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.18",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
+      "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
+      "dependencies": {
+        "mime-db": "~1.33.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mimic-response": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-4.0.0.tgz",
+      "integrity": "sha512-e5ISH9xMYU0DzrT+jl8q2ze9D6eWBto+I8CNpe+VI+K2J/F/k3PdkdTdz4wvGVH4NTpo+NRYTVIuMQEMMcsLqg==",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mini-css-extract-plugin": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.8.1.tgz",
+      "integrity": "sha512-/1HDlyFRxWIZPI1ZpgqlZ8jMw/1Dp/dl3P0L1jtZ+zVcHqwPhGwaJwKL00WVgfnBy6PWCde9W65or7IIETImuA==",
+      "dependencies": {
+        "schema-utils": "^4.0.0",
+        "tapable": "^2.2.1"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mrmime": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
+      "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "node_modules/multicast-dns": {
+      "version": "7.2.5",
+      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz",
+      "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==",
+      "dependencies": {
+        "dns-packet": "^5.2.2",
+        "thunky": "^1.0.2"
+      },
+      "bin": {
+        "multicast-dns": "cli.js"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+    },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/node-emoji": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-2.1.3.tgz",
+      "integrity": "sha512-E2WEOVsgs7O16zsURJ/eH8BqhF029wGpEOnv7Urwdo2wmQanOACwJQh0devF9D9RhoZru0+9JXIS0dBXIAz+lA==",
+      "dependencies": {
+        "@sindresorhus/is": "^4.6.0",
+        "char-regex": "^1.0.2",
+        "emojilib": "^2.4.0",
+        "skin-tone": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/node-forge": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
+      "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==",
+      "engines": {
+        "node": ">= 6.13.0"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI= sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-url": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dependencies": {
+        "path-key": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E= sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
+    },
+    "node_modules/nth-check": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
+      "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
+      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
+      "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
+      "dependencies": {
+        "define-properties": "^1.1.2",
+        "function-bind": "^1.1.1",
+        "has-symbols": "^1.0.0",
+        "object-keys": "^1.0.11"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/obuf": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
+      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E= sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "dependencies": {
+        "mimic-fn": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/open": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
+      "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
+      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
+      "bin": {
+        "opener": "bin/opener-bin.js"
+      }
+    },
+    "node_modules/p-cancelable": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-3.0.0.tgz",
+      "integrity": "sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==",
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
+      "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
+      "dependencies": {
+        "yocto-queue": "^1.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-6.0.0.tgz",
+      "integrity": "sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==",
+      "dependencies": {
+        "p-limit": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-map": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
+      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
+      "dependencies": {
+        "aggregate-error": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-retry": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.1.tgz",
+      "integrity": "sha512-e2xXGNhZOZ0lfgR9kL34iGlU8N/KO0xZnQxVEwdeOvpqNDQfdnxIYizvWtK8RglUa3bGqI8g0R/BdfzLMxRkiA==",
+      "dependencies": {
+        "@types/retry": "^0.12.0",
+        "retry": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/package-json": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/package-json/-/package-json-8.1.1.tgz",
+      "integrity": "sha512-cbH9IAIJHNj9uXi196JVsRlt7cHKak6u/e6AkL/bkRelZ7rlL3X1YKxsZwa36xipOEKAsdtmaG6aAJoM1fx2zA==",
+      "dependencies": {
+        "got": "^12.1.0",
+        "registry-auth-token": "^5.0.1",
+        "registry-url": "^6.0.0",
+        "semver": "^7.3.7"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/param-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-entities": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz",
+      "integrity": "sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
+      "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ=="
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parse-numeric-range": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz",
+      "integrity": "sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ=="
+    },
+    "node_modules/parse5": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.0.0.tgz",
+      "integrity": "sha512-y/t8IXSPWTuRZqXc0ajH/UwDj4mnqLEbSttNbThcFhGrZuOyoyvNBO85PBp2jQa55wY9d07PBNjsK8ZP3K5U6g==",
+      "dependencies": {
+        "entities": "^4.3.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parse5-htmlparser2-tree-adapter": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.0.0.tgz",
+      "integrity": "sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==",
+      "dependencies": {
+        "domhandler": "^5.0.2",
+        "parse5": "^7.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/pascal-case": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-5.0.0.tgz",
+      "integrity": "sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18= sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-is-inside": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
+      "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM= sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w=="
+    },
+    "node_modules/path-key": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.0.tgz",
+      "integrity": "sha512-8cChqz0RP6SHJkMt48FW0A7+qUOn+OsnOsVtzI59tZ8m+5bCSk7hzwET0pulwOM2YMn9J1efb07KB9l9f30SGg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "node_modules/path-to-regexp": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
+      "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30= sha512-nifX1uj4S9IrK/w3Xe7kKvNEepXivANs9ng60Iq7PU/BlouV3yL/VUhFqTuTq33ykwUqoNcTeGo5vdOBP4jS/Q==",
+      "dependencies": {
+        "isarray": "0.0.1"
+      }
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/periscopic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
+      "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^3.0.0",
+        "is-reference": "^3.0.0"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-7.0.0.tgz",
+      "integrity": "sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==",
+      "dependencies": {
+        "find-up": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/pkg-up": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
+      "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
+      "dependencies": {
+        "find-up": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pkg-up/node_modules/find-up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+      "dependencies": {
+        "locate-path": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pkg-up/node_modules/locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dependencies": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pkg-up/node_modules/p-limit": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz",
+      "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pkg-up/node_modules/p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dependencies": {
+        "p-limit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pkg-up/node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU= sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.35",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
+      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-calc": {
+      "version": "8.2.4",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
+      "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.9",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.2"
+      }
+    },
+    "node_modules/postcss-colormin": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
+      "integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "colord": "^2.9.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-convert-values": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
+      "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-comments": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
+      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-duplicates": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
+      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-empty": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
+      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-overridden": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
+      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-discard-unused": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-discard-unused/-/postcss-discard-unused-5.1.0.tgz",
+      "integrity": "sha512-KwLWymI9hbwXmJa0dkrzpRbSJEh0vVUd7r8t0yOGPcfKzyJJxFM8kLyC5Ev9avji6nY95pOp1W6HqIrfT+0VGw==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-loader": {
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.4.tgz",
+      "integrity": "sha512-iW5WTTBSC5BfsBJ9daFMPVrLT36MrNiC6fqOZTTaHjBNX6Pfd5p+hSBqe/fEeNd7pc13QiAyGt7VdGMw4eRC4A==",
+      "dependencies": {
+        "cosmiconfig": "^8.3.5",
+        "jiti": "^1.20.0",
+        "semver": "^7.5.4"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "postcss": "^7.0.0 || ^8.0.1",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/postcss-loader/node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+      "dependencies": {
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-merge-idents": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-5.1.1.tgz",
+      "integrity": "sha512-pCijL1TREiCoog5nQp7wUe+TUonA2tC2sQ54UGeMmryK3UFGIYKqDyjnqd6RcuI4znFn9hWSLNN8xKE/vWcUQw==",
+      "dependencies": {
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-merge-longhand": {
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
+      "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "stylehacks": "^5.1.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-merge-rules": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
+      "integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^3.1.0",
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-font-values": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
+      "integrity": "sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-gradients": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz",
+      "integrity": "sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==",
+      "dependencies": {
+        "colord": "^2.9.1",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-params": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
+      "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-minify-selectors": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz",
+      "integrity": "sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz",
+      "integrity": "sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==",
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.1.1.tgz",
+      "integrity": "sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-normalize-charset": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
+      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-display-values": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz",
+      "integrity": "sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-positions": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz",
+      "integrity": "sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-repeat-style": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz",
+      "integrity": "sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-string": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz",
+      "integrity": "sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-timing-functions": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz",
+      "integrity": "sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-unicode": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
+      "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-url": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz",
+      "integrity": "sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==",
+      "dependencies": {
+        "normalize-url": "^6.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-normalize-whitespace": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz",
+      "integrity": "sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-ordered-values": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz",
+      "integrity": "sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==",
+      "dependencies": {
+        "cssnano-utils": "^3.1.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-reduce-idents": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-5.2.0.tgz",
+      "integrity": "sha512-BTrLjICoSB6gxbc58D5mdBK8OhXRDqud/zodYfdSi52qvDHdMwk+9kB9xsM8yJThH/sZU5A6QVSmMmaN001gIg==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-reduce-initial": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
+      "integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "caniuse-api": "^3.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-reduce-transforms": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz",
+      "integrity": "sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-sort-media-queries": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/postcss-sort-media-queries/-/postcss-sort-media-queries-4.4.1.tgz",
+      "integrity": "sha512-QDESFzDDGKgpiIh4GYXsSy6sek2yAwQx1JASl5AxBtU1Lq2JfKBljIPNdil989NcSKRQX1ToiaKphImtBuhXWw==",
+      "dependencies": {
+        "sort-css-media-queries": "2.1.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.16"
+      }
+    },
+    "node_modules/postcss-svgo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
+      "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "svgo": "^2.7.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-unique-selectors": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz",
+      "integrity": "sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.5"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+    },
+    "node_modules/postcss-zindex": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-zindex/-/postcss-zindex-5.1.0.tgz",
+      "integrity": "sha512-fgFMf0OtVSBR1va1JNHYgMxYk73yhn/qb4uQDq1DLGYolz8gHCyr/sesEuGUaYs58E3ZJRcpoGuPVoB7Meiq9A==",
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/pretty-error": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
+      "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
+      "dependencies": {
+        "lodash": "^4.17.20",
+        "renderkid": "^3.0.0"
+      }
+    },
+    "node_modules/pretty-time": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/pretty-time/-/pretty-time-1.1.0.tgz",
+      "integrity": "sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/prism-react-renderer": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.3.1.tgz",
+      "integrity": "sha512-Rdf+HzBLR7KYjzpJ1rSoxT9ioO85nZngQEoFIhL07XhtJHlCU3SOz0GJ6+qvMyQe0Se+BV3qpe6Yd/NmQF5Juw==",
+      "dependencies": {
+        "@types/prismjs": "^1.26.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0"
+      }
+    },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
+    "node_modules/prompts": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+      "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+      "dependencies": {
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
+    "node_modules/property-information": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.4.1.tgz",
+      "integrity": "sha512-OHYtXfu5aI2sS2LWFSN5rgJjrQ4pCy8i1jubJLe2QvMF8JJ++HXTUIVWFLfXJoaOfvYYjk2SN8J2wFUWIGXT4w==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/proto-list": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
+      "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA=="
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/proxy-addr/node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4= sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="
+    },
+    "node_modules/pupa": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/pupa/-/pupa-3.1.0.tgz",
+      "integrity": "sha512-FLpr4flz5xZTSJxSeaheeMKN/EDzMdK7b8PTOC6a5PYFKTucWbdqjgqaEyH0shFiSJrVB1+Qqi4Tk19ccU6Aug==",
+      "dependencies": {
+        "escape-goat": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.10.3",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz",
+      "integrity": "sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/queue": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
+      "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==",
+      "dependencies": {
+        "inherits": "~2.0.3"
+      }
+    },
+    "node_modules/quick-lru": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
+      "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4= sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
+      "dependencies": {
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/raw-body/node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo= sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dev-utils": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
+      "integrity": "sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==",
+      "dependencies": {
+        "@babel/code-frame": "^7.16.0",
+        "address": "^1.1.2",
+        "browserslist": "^4.18.1",
+        "chalk": "^4.1.2",
+        "cross-spawn": "^7.0.3",
+        "detect-port-alt": "^1.1.6",
+        "escape-string-regexp": "^4.0.0",
+        "filesize": "^8.0.6",
+        "find-up": "^5.0.0",
+        "fork-ts-checker-webpack-plugin": "^6.5.0",
+        "global-modules": "^2.0.0",
+        "globby": "^11.0.4",
+        "gzip-size": "^6.0.0",
+        "immer": "^9.0.7",
+        "is-root": "^2.1.0",
+        "loader-utils": "^3.2.0",
+        "open": "^8.4.0",
+        "pkg-up": "^3.1.0",
+        "prompts": "^2.4.2",
+        "react-error-overlay": "^6.0.11",
+        "recursive-readdir": "^2.2.2",
+        "shell-quote": "^1.7.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/loader-utils": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz",
+      "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==",
+      "engines": {
+        "node": ">= 12.13.0"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
+    "node_modules/react-error-overlay": {
+      "version": "6.0.11",
+      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
+      "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
+    },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
+    "node_modules/react-helmet-async": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.3.0.tgz",
+      "integrity": "sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.2.0",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.8.6",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
+      "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
+    },
+    "node_modules/react-json-view-lite": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/react-json-view-lite/-/react-json-view-lite-1.2.1.tgz",
+      "integrity": "sha512-Itc0g86fytOmKZoIoJyGgvNqohWSbh3NXIKNgH6W6FT9PC1ck4xas1tT3Rr/b3UlFXyA9Jjaw9QSXdZy2JwGMQ==",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-loadable": {
+      "name": "@docusaurus/react-loadable",
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz",
+      "integrity": "sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==",
+      "dependencies": {
+        "@types/react": "*",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/react-loadable-ssr-addon-v5-slorber": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/react-loadable-ssr-addon-v5-slorber/-/react-loadable-ssr-addon-v5-slorber-1.0.1.tgz",
+      "integrity": "sha512-lq3Lyw1lGku8zUEJPDxsNm1AfYHBrO9Y1+olAYwpUJ2IGFBskM0DMKok97A6LWUpHm+o7IvQBOWu9MLenp9Z+A==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "peerDependencies": {
+        "react-loadable": "*",
+        "webpack": ">=4.41.1 || 5.x"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
+      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "hoist-non-react-statics": "^3.1.0",
+        "loose-envify": "^1.3.1",
+        "path-to-regexp": "^1.7.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.6.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/react-router-config": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-router-config/-/react-router-config-5.1.1.tgz",
+      "integrity": "sha512-DuanZjaD8mQp1ppHjgnnUnyOlqYXZVjnov/JzFhjLEwd3Z4dYjMSnqrEzzGThH47vpCOqPPwJM2FtthLeJ8Pbg==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      },
+      "peerDependencies": {
+        "react": ">=15",
+        "react-router": ">=5"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
+      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13",
+        "history": "^4.9.0",
+        "loose-envify": "^1.3.1",
+        "prop-types": "^15.6.2",
+        "react-router": "5.3.4",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=15"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
+      "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/reading-time": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/reading-time/-/reading-time-1.5.0.tgz",
+      "integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg=="
+    },
+    "node_modules/rechoir": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
+      "integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q= sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==",
+      "dependencies": {
+        "resolve": "^1.1.6"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/recursive-readdir": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
+      "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==",
+      "dependencies": {
+        "minimatch": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="
+    },
+    "node_modules/regenerate-unicode-properties": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz",
+      "integrity": "sha512-X007RyZLsCJVVrjgEFVpLUTZwyOZk3oiL75ZcuYjlIWd6rNJtOjkBwQc5AsRrpbKVkxN6sklw/k/9m2jJYOf8Q==",
+      "dependencies": {
+        "regenerate": "^1.4.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
+    "node_modules/regenerator-transform": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
+      "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "node_modules/regexpu-core": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
+      "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
+      "dependencies": {
+        "@babel/regjsgen": "^0.8.0",
+        "regenerate": "^1.4.2",
+        "regenerate-unicode-properties": "^10.1.0",
+        "regjsparser": "^0.9.1",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/registry-auth-token": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-5.0.2.tgz",
+      "integrity": "sha512-o/3ikDxtXaA59BmZuZrJZDJv8NMDGSj+6j6XaeBmHw8eY1i1qd9+6H+LjVvQXx3HN6aRCGa1cUdJ9RaJZUugnQ==",
+      "dependencies": {
+        "@pnpm/npm-conf": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/registry-url": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-6.0.1.tgz",
+      "integrity": "sha512-+crtS5QjFRqFCoQmvGduwYWEBng99ZvmFvF+cUJkGYF1L1BfU8C6Zp9T7f5vPAwyLkUExpvK+ANVZmGU49qi4Q==",
+      "dependencies": {
+        "rc": "1.2.8"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/regjsparser": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+      "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
+      "dependencies": {
+        "jsesc": "~0.5.0"
+      },
+      "bin": {
+        "regjsparser": "bin/parser"
+      }
+    },
+    "node_modules/regjsparser/node_modules/jsesc": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+      "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0= sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      }
+    },
+    "node_modules/rehype-raw": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
+      "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-raw": "^9.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk= sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/remark-directive": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/remark-directive/-/remark-directive-3.0.0.tgz",
+      "integrity": "sha512-l1UyWJ6Eg1VPU7Hm/9tt0zKtReJQNOA4+iDMAxTyZNWnJnFlbS/7zhiel/rogTLQ2vMYwDzSJa4BiVNqGlqIMA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-directive": "^3.0.0",
+        "micromark-extension-directive": "^3.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-emoji": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-emoji/-/remark-emoji-4.0.1.tgz",
+      "integrity": "sha512-fHdvsTR1dHkWKev9eNyhTo4EFwbUvJ8ka9SgeWkMPYFX4WoI7ViVBms3PjlQYgw5TLvNQso3GUB/b/8t3yo+dg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.2",
+        "emoticon": "^4.0.1",
+        "mdast-util-find-and-replace": "^3.0.1",
+        "node-emoji": "^2.1.0",
+        "unified": "^11.0.4"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
+    "node_modules/remark-frontmatter": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/remark-frontmatter/-/remark-frontmatter-5.0.0.tgz",
+      "integrity": "sha512-XTFYvNASMe5iPN0719nPrdItC9aU0ssC4v14mH1BCi1u0n1gAocqcujWUrByftZTbLhRtiKRyjYTSIOcr69UVQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-frontmatter": "^2.0.0",
+        "micromark-extension-frontmatter": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-gfm": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.0.tgz",
+      "integrity": "sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-mdx": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.0.1.tgz",
+      "integrity": "sha512-3Pz3yPQ5Rht2pM5R+0J2MrGoBSrzf+tJG94N+t/ilfdh8YLyyKYtidAYwTveB20BoHAcwIopOUqhcmh2F7hGYA==",
+      "dependencies": {
+        "mdast-util-mdx": "^3.0.0",
+        "micromark-extension-mdxjs": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.0.tgz",
+      "integrity": "sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/renderkid": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
+      "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
+      "dependencies": {
+        "css-select": "^4.1.3",
+        "dom-converter": "^0.2.0",
+        "htmlparser2": "^6.1.0",
+        "lodash": "^4.17.21",
+        "strip-ansi": "^6.0.1"
+      }
+    },
+    "node_modules/renderkid/node_modules/css-select": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
+      "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^5.0.0",
+        "domhandler": "^4.2.0",
+        "domutils": "^2.6.0",
+        "nth-check": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/renderkid/node_modules/css-what": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz",
+      "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/renderkid/node_modules/dom-serializer": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/renderkid/node_modules/domhandler": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
+      "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/renderkid/node_modules/domutils": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
+      "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/renderkid/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/renderkid/node_modules/htmlparser2": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-like": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/require-like/-/require-like-0.1.2.tgz",
+      "integrity": "sha1-rW8wwTvs15cBDEaK+ndcDAprR/o= sha512-oyrU88skkMtDdauHDuKVrgR+zuItqr6/c//FXzvmxRGMexSDc6hNvJInGW3LL46n+8b50RykrvwSUIIQH2LQ5A==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8= sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
+    },
+    "node_modules/resolve": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+      "dependencies": {
+        "is-core-module": "^2.2.0",
+        "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-alpn": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
+      "integrity": "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g=="
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-pathname": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+    },
+    "node_modules/responselike": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-3.0.0.tgz",
+      "integrity": "sha512-40yHxbNcl2+rzXvZuVkrYohathsSJlMTXKryG5y8uciHv1+xDLHQpgjG64JUO9nrEq2jGLH6IZ8BcZyw3wrweg==",
+      "dependencies": {
+        "lowercase-keys": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rtl-detect": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/rtl-detect/-/rtl-detect-1.0.4.tgz",
+      "integrity": "sha512-EBR4I2VDSSYr7PkBmFy04uhycIpDKp+21p/jARYXlCSjQksTBQcJ0HFUPOO79EPPH5JS6VAhiIQbycf0O3JAxQ=="
+    },
+    "node_modules/rtlcss": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.1.1.tgz",
+      "integrity": "sha512-/oVHgBtnPNcggP2aVXQjSy6N1mMAfHg4GSag0QtZBlD5bdDgAHwr4pydqJGd+SUCu9260+Pjqbjwtvu7EMH1KQ==",
+      "dependencies": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.21",
+        "strip-json-comments": "^3.1.1"
+      },
+      "bin": {
+        "rtlcss": "bin/rtlcss.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.9.tgz",
+      "integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q=="
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "node_modules/sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/schema-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+      "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.8.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/search-insights": {
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.13.0.tgz",
+      "integrity": "sha512-Orrsjf9trHHxFRuo9/rzm0KIWmgzE8RMlZMzuhZOJ01Rnz3D0YBAe+V6473t6/H6c7irs6Lt48brULAiRWb3Vw==",
+      "peer": true
+    },
+    "node_modules/section-matter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
+      "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==",
+      "dependencies": {
+        "extend-shallow": "^2.0.1",
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/select-hose": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
+      "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo= sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg=="
+    },
+    "node_modules/selfsigned": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz",
+      "integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==",
+      "dependencies": {
+        "@types/node-forge": "^1.3.0",
+        "node-forge": "^1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver-diff": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-4.0.0.tgz",
+      "integrity": "sha512-0Ju4+6A8iOnpL/Thra7dZsSlOHYAHIeMxfhWQRI1/VLcT3WDBZKKtQt/QkBOsiIN9ZpuvHE6cGZ0x4glCMmfiA==",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/semver/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/semver/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "node_modules/send": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/send/node_modules/debug/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g= sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/send/node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/serve-handler": {
+      "version": "6.1.5",
+      "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.5.tgz",
+      "integrity": "sha512-ijPFle6Hwe8zfmBxJdE+5fta53fdIY0lHISJvuikXB3VYFafRjMRpOffSPvCYsbKyBA7pvy9oYr/BT1O3EArlg==",
+      "dependencies": {
+        "bytes": "3.0.0",
+        "content-disposition": "0.5.2",
+        "fast-url-parser": "1.1.3",
+        "mime-types": "2.1.18",
+        "minimatch": "3.1.2",
+        "path-is-inside": "1.0.2",
+        "path-to-regexp": "2.2.1",
+        "range-parser": "1.2.0"
+      }
+    },
+    "node_modules/serve-handler/node_modules/path-to-regexp": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-2.2.1.tgz",
+      "integrity": "sha512-gu9bD6Ta5bwGrrU8muHzVOBFFREpp2iRkVfhBJahwJ6p6Xw20SjT0MxLnwkjOibQmGSYhiUnf2FLe7k+jcFmGQ=="
+    },
+    "node_modules/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha1-03aNabHn2C5c4FD/9bRTvqEqkjk= sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==",
+      "dependencies": {
+        "accepts": "~1.3.4",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.6.2",
+        "mime-types": "~2.1.17",
+        "parseurl": "~1.3.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/serve-index/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/serve-index/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak= sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-index/node_modules/http-errors": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+      "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0= sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.0",
+        "statuses": ">= 1.4.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-index/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4= sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+    },
+    "node_modules/serve-index/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g= sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/serve-index/node_modules/setprototypeof": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+    },
+    "node_modules/serve-index/node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow= sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "dependencies": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.18.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
+    "node_modules/shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dependencies": {
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
+      "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/shelljs": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz",
+      "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==",
+      "dependencies": {
+        "glob": "^7.0.0",
+        "interpret": "^1.0.0",
+        "rechoir": "^0.6.2"
+      },
+      "bin": {
+        "shjs": "bin/shjs"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
+    },
+    "node_modules/sirv": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+      "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
+    },
+    "node_modules/sitemap": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-7.1.1.tgz",
+      "integrity": "sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==",
+      "dependencies": {
+        "@types/node": "^17.0.5",
+        "@types/sax": "^1.2.1",
+        "arg": "^5.0.0",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "sitemap": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=12.0.0",
+        "npm": ">=5.6.0"
+      }
+    },
+    "node_modules/skin-tone": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/skin-tone/-/skin-tone-2.0.0.tgz",
+      "integrity": "sha512-kUMbT1oBJCpgrnKoSr0o6wPtvRWT9W9UKvGLwfJYO2WuahZRHOpEyL1ckyMGgMWh0UdpmaoFqKKD29WTomNEGA==",
+      "dependencies": {
+        "unicode-emoji-modifier-base": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sockjs": {
+      "version": "0.3.24",
+      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz",
+      "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==",
+      "dependencies": {
+        "faye-websocket": "^0.11.3",
+        "uuid": "^8.3.2",
+        "websocket-driver": "^0.7.4"
+      }
+    },
+    "node_modules/sort-css-media-queries": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/sort-css-media-queries/-/sort-css-media-queries-2.1.0.tgz",
+      "integrity": "sha512-IeWvo8NkNiY2vVYdPa27MCQiR0MN0M80johAYFVxWWXQ44KU84WNxjslwBHmc/7ZL2ccwkM7/e6S5aiKZXm7jA==",
+      "engines": {
+        "node": ">= 6.3.0"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.20",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.20.tgz",
+      "integrity": "sha512-n1lZZ8Ve4ksRqizaBQgxXDgKwttHDhyfQjA6YZZn8+AroHbsIz+JjwxQDxbp+7y5OYCI8t1Yk7etjD9CRd2hIw==",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/spdy": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
+      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+      "dependencies": {
+        "debug": "^4.1.0",
+        "handle-thing": "^2.0.0",
+        "http-deceiver": "^1.2.7",
+        "select-hose": "^2.0.0",
+        "spdy-transport": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/spdy-transport": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
+      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+      "dependencies": {
+        "debug": "^4.1.0",
+        "detect-node": "^2.0.4",
+        "hpack.js": "^2.1.6",
+        "obuf": "^1.1.2",
+        "readable-stream": "^3.0.6",
+        "wbuf": "^1.7.3"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw= sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+    },
+    "node_modules/srcset": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/srcset/-/srcset-4.0.0.tgz",
+      "integrity": "sha512-wvLeHgcVHKO8Sc/H/5lkGreJQVeYMm9rlmt8PuR1xE31rIuXhuzznUUqAt8MqLhB3MqJdFzlNAfpcWnxiFUcPw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility"
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/std-env": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.0.1.tgz",
+      "integrity": "sha512-mC1Ps9l77/97qeOZc+HrOL7TIaOboHqMZ24dGVQrlxFcpPpfCHpH+qfUT7Dz+6mlG8+JPA1KfBQo19iC/+Ngcw=="
+    },
+    "node_modules/string_decoder": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.2.0.tgz",
+      "integrity": "sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+      "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/stringify-entities": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.3.tgz",
+      "integrity": "sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dependencies": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-bom-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz",
+      "integrity": "sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI= sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.4.tgz",
+      "integrity": "sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==",
+      "dependencies": {
+        "inline-style-parser": "0.1.1"
+      }
+    },
+    "node_modules/stylehacks": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
+      "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
+      "dependencies": {
+        "browserslist": "^4.21.4",
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.15"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+      "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ=="
+    },
+    "node_modules/svgo": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
+      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^4.1.3",
+        "css-tree": "^1.1.3",
+        "csso": "^4.2.0",
+        "picocolors": "^1.0.0",
+        "stable": "^0.1.8"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/svgo/node_modules/css-select": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
+      "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^5.0.0",
+        "domhandler": "^4.2.0",
+        "domutils": "^2.6.0",
+        "nth-check": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/svgo/node_modules/css-what": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz",
+      "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/svgo/node_modules/dom-serializer": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/domhandler": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
+      "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/domutils": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
+      "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/svgo/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.28.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.28.1.tgz",
+      "integrity": "sha512-wM+bZp54v/E9eRRGXb5ZFDvinrJIOaTapx3WUokyVGZu5ucVCK55zEgGd5Dl2fSr3jUo5sDiERErUWLY6QPFyA==",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser-webpack-plugin": {
+      "version": "5.3.10",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz",
+      "integrity": "sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.20",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^3.1.1",
+        "serialize-javascript": "^6.0.1",
+        "terser": "^5.26.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "uglify-js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
+    "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
+      "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ=="
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ= sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
+    },
+    "node_modules/thunky": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.0.3.tgz",
+      "integrity": "sha512-YwT8pjmNcAXBZqrubu22P4FYsh2D4dxRmnWBOL8Jk8bUcRUtc5326kx32tuTmFDAZtLOGEVNl8POAR8j896Iow=="
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.0.5.tgz",
+      "integrity": "sha512-BziszNEQNwtyMS9OVJia2LK9N9b6VJ35kBrvhDDDpr4hreLYqhCie15dB35uZMdqv9ZTQ55GHQtkz2FnleTHIA=="
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4= sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+    },
+    "node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/type-is/node_modules/mime-db": {
+      "version": "1.40.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
+      "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/type-is/node_modules/mime-types": {
+      "version": "2.1.24",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
+      "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
+      "dependencies": {
+        "mime-db": "1.40.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
+      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-emoji-modifier-base": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-emoji-modifier-base/-/unicode-emoji-modifier-base-1.0.0.tgz",
+      "integrity": "sha512-yLSH4py7oFH3oG/9K+XWrz1pSi3dfUrWEnInbxMfArOfc1+33BlGPQtLsOYwvdMy11AwUBetYuaRxSPqgkq+8g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+      "dependencies": {
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-value-ecmascript": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+      "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-property-aliases-ecmascript": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz",
+      "integrity": "sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unified": {
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz",
+      "integrity": "sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unique-string": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-3.0.0.tgz",
+      "integrity": "sha512-VGXBUVwxKMBUznyffQweQABPRRW1vHZAbadFZud4pLFAqRGvv/96vafgjWFqzourzr8YonlQiPgH0YCJfawoGQ==",
+      "dependencies": {
+        "crypto-random-string": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
+      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position-from-estree": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position-from-estree/-/unist-util-position-from-estree-2.0.0.tgz",
+      "integrity": "sha512-KaFVRjoqLyF6YXCbVLNad/eS4+OfPQQn2yOd7zF/h5T/CSL2v8NpN6a5TPvtbXthAGw5nG+PuTtq+DdIZr+cRQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-remove-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-5.0.0.tgz",
+      "integrity": "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
+      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw= sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/update-notifier": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-6.0.2.tgz",
+      "integrity": "sha512-EDxhTEVPZZRLWYcJ4ZXjGFN0oP7qYvbXWzEgRm/Yql4dHX5wDbvh89YHP6PK1lzZJYrMtXUuZZz8XGK+U6U1og==",
+      "dependencies": {
+        "boxen": "^7.0.0",
+        "chalk": "^5.0.1",
+        "configstore": "^6.0.0",
+        "has-yarn": "^3.0.0",
+        "import-lazy": "^4.0.0",
+        "is-ci": "^3.0.1",
+        "is-installed-globally": "^0.4.0",
+        "is-npm": "^6.0.0",
+        "is-yarn-global": "^0.4.0",
+        "latest-version": "^7.0.0",
+        "pupa": "^3.1.0",
+        "semver": "^7.3.7",
+        "semver-diff": "^4.0.0",
+        "xdg-basedir": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/yeoman/update-notifier?sponsor=1"
+      }
+    },
+    "node_modules/update-notifier/node_modules/boxen": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-7.1.1.tgz",
+      "integrity": "sha512-2hCgjEmP8YLWQ130n2FerGv7rYpfBmnmp9Uy2Le1vge6X3gZIfSmEzP5QTDElFxcvVcXlEn8Aq6MU/PZygIOog==",
+      "dependencies": {
+        "ansi-align": "^3.0.1",
+        "camelcase": "^7.0.1",
+        "chalk": "^5.2.0",
+        "cli-boxes": "^3.0.0",
+        "string-width": "^5.1.2",
+        "type-fest": "^2.13.0",
+        "widest-line": "^4.0.1",
+        "wrap-ansi": "^8.1.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/update-notifier/node_modules/camelcase": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-7.0.1.tgz",
+      "integrity": "sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/update-notifier/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
+      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/uri-js/node_modules/punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/url-loader": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
+      "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "mime-types": "^2.1.27",
+        "schema-utils": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "file-loader": "*",
+        "webpack": "^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "file-loader": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/url-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/url-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/url-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
+    "node_modules/url-loader/node_modules/mime-db": {
+      "version": "1.47.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.47.0.tgz",
+      "integrity": "sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/url-loader/node_modules/mime-types": {
+      "version": "2.1.30",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.30.tgz",
+      "integrity": "sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==",
+      "dependencies": {
+        "mime-db": "1.47.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/url-loader/node_modules/schema-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+      "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.6",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8= sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/utila": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+      "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw= sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA=="
+    },
+    "node_modules/utility-types": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.10.0.tgz",
+      "integrity": "sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM= sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/value-equal": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
+      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw= sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vfile": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+      "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-location": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.2.tgz",
+      "integrity": "sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+      "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/watchpack": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
+      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "dependencies": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/wbuf": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
+      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
+      "dependencies": {
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "node_modules/web-namespaces": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/webpack": {
+      "version": "5.90.3",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.3.tgz",
+      "integrity": "sha512-h6uDYlWCctQRuXBs1oYpVe6sFcWedl0dpcVaTf/YF67J9bKvwJajFulMVSYKHrksMB3I/pIagRzDxwxkebuzKA==",
+      "dependencies": {
+        "@types/eslint-scope": "^3.7.3",
+        "@types/estree": "^1.0.5",
+        "@webassemblyjs/ast": "^1.11.5",
+        "@webassemblyjs/wasm-edit": "^1.11.5",
+        "@webassemblyjs/wasm-parser": "^1.11.5",
+        "acorn": "^8.7.1",
+        "acorn-import-assertions": "^1.9.0",
+        "browserslist": "^4.21.10",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.15.0",
+        "es-module-lexer": "^1.2.1",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.9",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.2.0",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.2.0",
+        "tapable": "^2.1.1",
+        "terser-webpack-plugin": "^5.3.10",
+        "watchpack": "^2.4.0",
+        "webpack-sources": "^3.2.3"
+      },
+      "bin": {
+        "webpack": "bin/webpack.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-bundle-analyzer": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.1.tgz",
+      "integrity": "sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==",
+      "dependencies": {
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "commander": "^7.2.0",
+        "debounce": "^1.2.1",
+        "escape-string-regexp": "^4.0.0",
+        "gzip-size": "^6.0.0",
+        "html-escaper": "^2.0.2",
+        "is-plain-object": "^5.0.0",
+        "opener": "^1.5.2",
+        "picocolors": "^1.0.0",
+        "sirv": "^2.0.3",
+        "ws": "^7.3.1"
+      },
+      "bin": {
+        "webpack-bundle-analyzer": "lib/bin/analyzer.js"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/webpack-bundle-analyzer/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/webpack-dev-middleware": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.1.tgz",
+      "integrity": "sha512-81EujCKkyles2wphtdrnPg/QqegC/AtqNH//mQkBYSMqwFVCQrxM6ktB2O/SPlZy7LqeEfTbV3cZARGQz6umhg==",
+      "dependencies": {
+        "colorette": "^2.0.10",
+        "memfs": "^3.4.1",
+        "mime-types": "^2.1.31",
+        "range-parser": "^1.2.1",
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/mime-db": {
+      "version": "1.51.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz",
+      "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/mime-types": {
+      "version": "2.1.34",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz",
+      "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==",
+      "dependencies": {
+        "mime-db": "1.51.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/webpack-dev-server": {
+      "version": "4.15.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.1.tgz",
+      "integrity": "sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==",
+      "dependencies": {
+        "@types/bonjour": "^3.5.9",
+        "@types/connect-history-api-fallback": "^1.3.5",
+        "@types/express": "^4.17.13",
+        "@types/serve-index": "^1.9.1",
+        "@types/serve-static": "^1.13.10",
+        "@types/sockjs": "^0.3.33",
+        "@types/ws": "^8.5.5",
+        "ansi-html-community": "^0.0.8",
+        "bonjour-service": "^1.0.11",
+        "chokidar": "^3.5.3",
+        "colorette": "^2.0.10",
+        "compression": "^1.7.4",
+        "connect-history-api-fallback": "^2.0.0",
+        "default-gateway": "^6.0.3",
+        "express": "^4.17.3",
+        "graceful-fs": "^4.2.6",
+        "html-entities": "^2.3.2",
+        "http-proxy-middleware": "^2.0.3",
+        "ipaddr.js": "^2.0.1",
+        "launch-editor": "^2.6.0",
+        "open": "^8.0.9",
+        "p-retry": "^4.5.0",
+        "rimraf": "^3.0.2",
+        "schema-utils": "^4.0.0",
+        "selfsigned": "^2.1.1",
+        "serve-index": "^1.9.1",
+        "sockjs": "^0.3.24",
+        "spdy": "^4.0.2",
+        "webpack-dev-middleware": "^5.3.1",
+        "ws": "^8.13.0"
+      },
+      "bin": {
+        "webpack-dev-server": "bin/webpack-dev-server.js"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.37.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "webpack": {
+          "optional": true
+        },
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/ws": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
+      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-merge": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz",
+      "integrity": "sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==",
+      "dependencies": {
+        "clone-deep": "^4.0.1",
+        "flat": "^5.0.2",
+        "wildcard": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/webpack/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/webpack/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
+    "node_modules/webpack/node_modules/mime-db": {
+      "version": "1.47.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.47.0.tgz",
+      "integrity": "sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/webpack/node_modules/mime-types": {
+      "version": "2.1.30",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.30.tgz",
+      "integrity": "sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==",
+      "dependencies": {
+        "mime-db": "1.47.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/webpack/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/webpackbar": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/webpackbar/-/webpackbar-5.0.2.tgz",
+      "integrity": "sha512-BmFJo7veBDgQzfWXl/wwYXr/VFus0614qZ8i9znqcl9fnEdiVkdbi0TedLQ6xAK92HZHDJ0QmyQ0fmuZPAgCYQ==",
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "consola": "^2.15.3",
+        "pretty-time": "^1.1.0",
+        "std-env": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "webpack": "3 || 4 || 5"
+      }
+    },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.1.tgz",
+      "integrity": "sha512-N7GBZOTswtB9lkQBZA4+zAXrjEIWAUOB93AvzUiudRzRxhUdLURQ7D/gAIMY1gatT/LTbmbcv8SiYazy3eYB7w==",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/widest-line": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-4.0.1.tgz",
+      "integrity": "sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==",
+      "dependencies": {
+        "string-width": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/wildcard": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
+      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw=="
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.1.0.tgz",
+      "integrity": "sha512-VbqNsoz55SYGczauuup0MFUyXNQviSpFTj1RQtFzmQLk18qbVSpTFFGMT293rmDaQuKCT6InmbuEyUne4mTuxQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+      "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+    },
+    "node_modules/write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "is-typedarray": "^1.0.0",
+        "signal-exit": "^3.0.2",
+        "typedarray-to-buffer": "^3.1.5"
+      }
+    },
+    "node_modules/ws": {
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
+      "engines": {
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xdg-basedir": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-5.1.0.tgz",
+      "integrity": "sha512-GCPAHLvrIH13+c0SuacwvRYj2SxJXQ4kaVTT5xgL3kPrz56XxkF21IGhjSE1+W0aw7gpBWRGXLCPnPby6lSpmQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/xml-js": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz",
+      "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==",
+      "dependencies": {
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "xml-js": "bin/cli.js"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+    },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.0.0.tgz",
+      "integrity": "sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    }
+  }
+}
diff --git a/website/package.json b/website/package.json
new file mode 100755
index 0000000000..2df1d3ac0f
--- /dev/null
+++ b/website/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "website",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "dev": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy"
+  },
+  "dependencies": {
+    "@docusaurus/core": "^3.1.1",
+    "@docusaurus/plugin-client-redirects": "3.1.1",
+    "@docusaurus/preset-classic": "^3.1.1",
+    "clsx": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "5.3.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/website/sidebars.js b/website/sidebars.js
new file mode 100755
index 0000000000..600a27fa5d
--- /dev/null
+++ b/website/sidebars.js
@@ -0,0 +1,70 @@
+module.exports = {
+  root: [
+    'introduction',
+    {
+      type: 'category',
+      label: 'Coding interview',
+      collapsed: false,
+      items: [
+        'javascript-utility-function',
+        'build-front-end-user-interfaces',
+        'algorithms',
+      ],
+    },
+    {
+      type: 'category',
+      label: 'Quiz/trivia interview',
+      items: [
+        'trivia',
+        'javascript-questions',
+        'css-questions',
+        'html-questions',
+      ],
+    },
+    {
+      type: 'category',
+      label: 'System design interview',
+      collapsed: false,
+      items: [
+        'front-end-system-design',
+        'front-end-system-design-ui-components',
+        'front-end-system-design-applications',
+      ],
+    },
+    'behavioral',
+    'resume',
+    {
+      type: 'category',
+      label: 'Interview questions 🔥',
+      collapsed: false,
+      link: {
+        type: 'generated-index',
+        title: 'Company interview questions',
+        slug: '/company-interview-questions',
+      },
+      items: [
+        'companies/amazon-front-end-interview-questions',
+        'companies/google-front-end-interview-questions',
+        'companies/microsoft-front-end-interview-questions',
+        'companies/meta-front-end-interview-questions',
+        'companies/airbnb-front-end-interview-questions',
+        'companies/bytedance-tiktok-front-end-interview-questions',
+        'companies/atlassian-front-end-interview-questions',
+        'companies/uber-front-end-interview-questions',
+        'companies/apple-front-end-interview-questions',
+        'companies/canva-front-end-interview-questions',
+        'companies/dropbox-front-end-interview-questions',
+        'companies/linkedin-front-end-interview-questions',
+        'companies/lyft-front-end-interview-questions',
+        'companies/twitter-front-end-interview-questions',
+        'companies/shopify-front-end-interview-questions',
+        'companies/pinterest-front-end-interview-questions',
+        'companies/reddit-front-end-interview-questions',
+        'companies/adobe-front-end-interview-questions',
+        'companies/palantir-front-end-interview-questions',
+        'companies/salesforce-front-end-interview-questions',
+        'companies/oracle-front-end-interview-questions',
+      ],
+    },
+  ],
+};
diff --git a/website/src/components/SidebarAd/index.js b/website/src/components/SidebarAd/index.js
new file mode 100644
index 0000000000..b07359f611
--- /dev/null
+++ b/website/src/components/SidebarAd/index.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+import clsx from 'clsx';
+
+import styles from './styles.module.css';
+
+function FAANGTechLeads({ position }) {
+  return (
+    <a
+      className={clsx(styles.container, styles.backgroundRed)}
+      href={`https://www.faangtechleads.com?utm_source=techinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=1e80c401fe7e2`}
+      target="_blank"
+      rel="noopener"
+      onClick={() => {
+        window.gtag('event', `faangtechleads.${position}.click`);
+      }}>
+      <p className={styles.tagline}>
+        <span className={styles.title}>
+          Craft the perfect resume for FAANG
+        </span>
+        Save time crafting your resume with FAANG Tech Leads'{' '}
+        <u>FAANG-quality resume templates and examples</u> which have helped
+        many Software Engineers get interviews at top Bay Area companies. Grab
+        them now for a <u>whopping 70% off</u>!
+      </p>
+    </a>
+  );
+}
+
+function GreatFrontEnd({ position }) {
+  return (
+    <a
+      className={clsx(styles.container)}
+      href={`https://www.greatfrontend.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=${position}&gnrs=frontendinterviewhandbook`}
+      target="_blank"
+      rel="noopener"
+      onClick={() => {
+        window.gtag('event', `greatfrontend.${position}.click`);
+      }}>
+      <div className={styles.tagline}>
+        <span className={styles.title}>
+          Navigate front end interviews easily with GreatFrontEnd
+        </span>
+        Meet the front end interview prep platform built by <u>ex-FAANG senior engineers</u> to make your life much easier
+      </div>
+    </a>
+  );
+}
+
+export default React.memo(function SidebarAd({ position }) {
+  // Because the SSR and client output can differ and hydration doesn't patch attribute differences,
+  // we'll render this on the browser only.
+  return (
+    <BrowserOnly>
+      {() => {
+        const path = window.location.pathname;
+        // Ugly hack to show conditional sidebar content.
+
+        if (path.includes('resume')) {
+          return (
+            <FAANGTechLeads
+              key={Math.random()}
+              position={position}
+            />
+          );
+        }
+
+        return <GreatFrontEnd position={position} />;
+      }}
+    </BrowserOnly>
+  );
+});
diff --git a/website/src/components/SidebarAd/styles.module.css b/website/src/components/SidebarAd/styles.module.css
new file mode 100644
index 0000000000..be87198077
--- /dev/null
+++ b/website/src/components/SidebarAd/styles.module.css
@@ -0,0 +1,151 @@
+/* The secret sauce that enables gradient rotation. NOTE: does not work in all browsers. https://caniuse.com/?search=%40property */
+@property --border-angle-1 {
+  syntax: '<angle>';
+  inherits: true;
+  initial-value: 0deg;
+}
+
+@property --border-angle-2 {
+  syntax: '<angle>';
+  inherits: true;
+  initial-value: 90deg;
+}
+
+@property --border-angle-3 {
+  syntax: '<angle>';
+  inherits: true;
+  initial-value: 180deg;
+}
+
+:root {
+  --color-one: #a07cfe;
+  --color-two: #fe8fb5;
+  --color-three: #ffbe7b;
+  --background: #fff;
+  --foreground: #18181b;
+  --border-size: 1.5px;
+  --border-radius: 0.75rem;
+}
+
+[data-theme='dark'] {
+  --background: #18181b;
+  --foreground: #fff;
+}
+
+@keyframes rotateBackground {
+  to {
+    --border-angle-1: 360deg;
+  }
+}
+
+@keyframes rotateBackground2 {
+  to {
+    --border-angle-2: -270deg;
+  }
+}
+
+@keyframes rotateBackground3 {
+  to {
+    --border-angle-3: 540deg;
+  }
+}
+
+.container {
+  --border-angle-1: 0deg;
+  --border-angle-2: 90deg;
+  --border-angle-3: 180deg;
+
+  background-color: #111;
+  border: 1px solid #eee;
+  color: inherit;
+  font-size: calc(0.8rem + 4vmin);
+  font-family: inherit;
+  padding: var(--border-size);
+  display: flex;
+  border-radius: var(--border-radius);
+  background-color: transparent;
+  position: relative;
+}
+
+.container::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-image:
+    conic-gradient(
+      from var(--border-angle-1) at 10% 15%,
+      transparent,
+      var(--color-one) 10%,
+      transparent 30%,
+      transparent
+    ),
+    conic-gradient(
+      from var(--border-angle-2) at 70% 60%,
+      transparent,
+      var(--color-two) 10%,
+      transparent 60%,
+      transparent
+    ),
+    conic-gradient(
+      from var(--border-angle-3) at 50% 20%,
+      transparent,
+      var(--color-three) 10%,
+      transparent 50%,
+      transparent
+    );
+  animation:
+    rotateBackground 3s linear infinite,
+    rotateBackground2 8s linear infinite,
+    rotateBackground3 13s linear infinite;
+  z-index: -1;
+}
+
+.container:hover {
+  text-decoration: none;
+}
+
+.container > * {
+  background: var(--background);
+  padding: 0.75rem;
+  border-radius: calc(var(--border-radius) - var(--border-size));
+  color: var(--foreground);
+}
+
+[data-theme^='dark'] .container {
+  border: 0;
+}
+
+.backgroundRed {
+  --color-one: rgb(248, 7, 89);
+  --color-two: rgb(188, 78, 156);
+  --color-three: rgb(243, 115, 53);
+}
+
+.title {
+  color: var(--ifm-color-content);
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 600;
+  margin-bottom: 0.1rem;
+}
+
+.tagline {
+  color: var(--ifm-color-content-secondary);
+  font-size: 0.75rem;
+  margin-bottom: 0;
+}
+
+.tagline strong,
+.tagline u {
+  color: var(--ifm-color-content);
+  font-weight: 500;
+}
+
+[data-theme='dark'] .tagline {
+  color: #a1a1aa;
+}
+
+.logo {
+  width: 96px;
+}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
new file mode 100755
index 0000000000..bfe718e50d
--- /dev/null
+++ b/website/src/css/custom.css
@@ -0,0 +1,168 @@
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url('./fonts/Inter-roman-latin.var.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url('./fonts/Inter-italic-latin.var.woff2') format('woff2');
+}
+
+:root {
+  --ifm-color-primary: #d62b79;
+  --ifm-color-primary-dark: #c2256d;
+  --ifm-color-primary-darker: #b72367;
+  --ifm-color-primary-darkest: #971d55;
+  --ifm-color-primary-light: #da4187;
+  --ifm-color-primary-lighter: #dc4b8d;
+  --ifm-color-primary-lightest: #e26ca2;
+
+  --ifm-font-family-base: 'Inter var', -apple-system, BlinkMacSystemFont,
+    'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+
+  --ifm-footer-padding-vertical: 3rem;
+}
+
+html[data-theme='dark'] {
+  --ifm-color-primary: #ffa700;
+  --ifm-color-primary-dark: #e69600;
+  --ifm-color-primary-darker: #d98e00;
+  --ifm-color-primary-darkest: #b37500;
+  --ifm-color-primary-light: #ffb01a;
+  --ifm-color-primary-lighter: #ffb426;
+  --ifm-color-primary-lightest: #ffc14d;
+
+  --ifm-footer-padding-vertical: 3rem;
+}
+
+.navbar {
+  font-size: 0.875rem;
+}
+
+.footer__links {
+  margin-bottom: 3rem;
+}
+
+.footer__copyright {
+  text-align: start;
+}
+
+.markdown h1:first-child {
+  --ifm-h1-font-size: 1.5em;
+}
+
+@media screen and (min-width: 768px) {
+  .markdown h1:first-child {
+    --ifm-h1-font-size: 2.25em;
+  }
+}
+
+.markdown h2 {
+  --ifm-h2-font-size: 1.375em;
+  margin-top: 2em;
+  margin-bottom: 0.5em;
+}
+
+@media screen and (min-width: 768px) {
+  .markdown h2 {
+    --ifm-h2-font-size: 1.5em;
+  }
+}
+
+.markdown h3 {
+  --ifm-h3-font-size: 1.25em;
+  font-weight: 600;
+  margin-top: 1.8em;
+  margin-bottom: 0.5em;
+}
+
+.markdown h4 {
+  font-size: 1.15em;
+  font-weight: 600;
+  margin-top: 1.6em;
+  margin-bottom: 0.4em;
+}
+
+.markdown h5 {
+  font-size: 1em;
+  font-weight: 600;
+  margin-top: 1.4em;
+  margin-bottom: 0.3em;
+}
+.markdown blockquote {
+  border-left-color: var(--ifm-color-emphasis-200);
+  border-left-width: 0.5rem;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.markdown ul blockquote {
+  font-size: 0.9em;
+  margin-top: 0.5em;
+}
+
+@media screen and (max-width: 767px) {
+  :root {
+    --ifm-font-size-base: 16px;
+  }
+}
+
+div[class^='announcementBar_'] {
+  background-color: var(--ifm-color-primary);
+  color: var(--ifm-color-emphasis-100);
+  font-weight: bold;
+}
+
+.menu {
+  font-size: 0.875rem;
+}
+
+.navbar__item.dropdown.dropdown--hoverable {
+  flex-shrink: 0;
+}
+
+.navbar-icon {
+  border-radius: 50%;
+  display: flex;
+  height: 32px;
+  width: 32px;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  padding: 0;
+  transition: background var(--ifm-transition-fast);
+}
+
+.navbar-icon:hover {
+  background: var(--ifm-color-emphasis-200);
+  color: inherit;
+}
+
+.theme-doc-markdown a[target='_blank']:after {
+  content: '↗';
+  width: 5px;
+  position: relative;
+  margin-left: 3px;
+  bottom: 1px;
+  height: 5px;
+}
+
+video.gfe-webm {
+  width: 80%;
+  height: auto;
+}
+
+.video-container {
+  margin: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/website/src/css/fonts/Inter-italic-latin.var.woff2 b/website/src/css/fonts/Inter-italic-latin.var.woff2
new file mode 100644
index 0000000000..e09a2014b3
Binary files /dev/null and b/website/src/css/fonts/Inter-italic-latin.var.woff2 differ
diff --git a/website/src/css/fonts/Inter-roman-latin.var.woff2 b/website/src/css/fonts/Inter-roman-latin.var.woff2
new file mode 100644
index 0000000000..44fabcbc3c
Binary files /dev/null and b/website/src/css/fonts/Inter-roman-latin.var.woff2 differ
diff --git a/website/src/data/successStories.js b/website/src/data/successStories.js
new file mode 100644
index 0000000000..9b9cf6318c
--- /dev/null
+++ b/website/src/data/successStories.js
@@ -0,0 +1,61 @@
+import React from 'react';
+
+export default [
+  {
+    name: 'Erin Teo',
+    title: 'Senior Front End Engineer, Facebook',
+    thumbnail: 'https://github.com/airse.png',
+    quote: (
+      <>
+        Preparing for my first rounds of tech interviews was really daunting - I
+        wasn't sure what to expect and where to start. This handbook together
+        with the{' '}
+        <a
+          href="https://www.techinterviewhandbook.org"
+          target="_blank"
+          rel="noreferrer noopener">
+          Tech Interview Handbook
+        </a>{' '}
+        was a great starting point for me. It clearly describes each part of the
+        process and has tons of awesome tips and resources. With this handbook
+        and lots of practice, I managed to get offers from Facebook, Dropbox and
+        Amazon!
+      </>
+    ),
+  },
+  {
+    name: 'Zhenghao He',
+    title: 'Engineering Manager at Robinhood, ex-Amazon',
+    thumbnail: '/img/authors/zhenghao.jpg',
+    quote: (
+      <>
+        There aren't a lot of high quality front end interview prep materials
+        online. That's why the Front End Interview Handbook is my go-to prep
+        resource. With the help of the interview handbook, I was able to easily
+        identify my weak points and work on them. As a result, I managed to get
+        offers from Meta, Amazon, Twitch, Microsoft, Coinbase, etc.
+        <br />
+        <br />
+        I've learnt a few things and blogged about them on{' '}
+        <a href="https://www.zhenghao.io/" rel="noopener">
+          https://www.zhenghao.io/
+        </a>
+        , check them out if you're interested!
+      </>
+    ),
+  },
+  {
+    name: 'Kai Li',
+    title: 'Software Engineer, Stripe, ex-Quora, ex-Zendesk',
+    thumbnail: 'https://github.com/li-kai.png',
+    quote: (
+      <>
+        Before discovering the handbook, I didn't know what to expect for my
+        front end interviews. Thanks to it, I had a better understanding and
+        even learned new things about frontend development. The handbook is an
+        immense resource, one that I still use to refresh and reinforce my
+        knowledge to tackle interviews confidently!
+      </>
+    ),
+  },
+];
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
new file mode 100755
index 0000000000..9beaaa8282
--- /dev/null
+++ b/website/src/pages/index.js
@@ -0,0 +1,537 @@
+import React from 'react';
+import clsx from 'clsx';
+import Layout from '@theme/Layout';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Link from '@docusaurus/Link';
+import styles from './styles.module.css';
+import {
+  RiBookOpenLine,
+  RiPresentationLine,
+  RiStackLine,
+} from 'react-icons/ri';
+
+import successStories from '@site/src/data/successStories';
+
+export default function Home() {
+  const { siteConfig = {} } = useDocusaurusContext();
+
+  return (
+    <Layout
+      title="Front end interview preparation for busy engineers"
+      description={siteConfig.tagline}>
+      <div>
+        <HeroSection />
+        <GreatFrontEndSection />
+        <FeaturesSection />
+        <TweetsSection />
+        <FAANGTechLeadsSection />
+        <SuccessStoriesSection />
+        <SponsorshipSection />
+      </div>
+    </Layout>
+  );
+}
+
+function HeroSection() {
+  const { siteConfig = {} } = useDocusaurusContext();
+
+  return (
+    <header className={clsx('hero', styles.heroBanner)}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--8 col--offset-2">
+            <img
+              alt={siteConfig.title}
+              className={clsx(styles.heroBannerLogo, 'margin-vert--md')}
+              src={useBaseUrl('img/logo.svg')}
+            />
+            <h1 className="hero__title">Front End Interview Handbook</h1>
+            <p className="hero__subtitle">{siteConfig.tagline}</p>
+            <div className={styles.buttons}>
+              <Link
+                className={clsx(
+                  'button button--primary button--lg',
+                  styles.getStarted,
+                )}
+                to="/introduction">
+                Start reading&nbsp;&nbsp;→
+              </Link>
+            </div>
+            <p className="margin-top--md">
+              <em>It's completely free to read!</em>
+            </p>
+            <div className="margin-top--lg">
+              <iframe
+                src="https://ghbtns.com/github-btn.html?user=yangshun&amp;repo=front-end-interview-handbook&amp;type=star&amp;count=true&amp;size=large"
+                frameBorder={0}
+                scrolling={0}
+                width={165}
+                height={30}
+                title="GitHub Stars"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+function GreatFrontEndSection() {
+  return (
+    <div
+      className="padding-vert--lg"
+      style={{ backgroundColor: 'rgb(214, 43, 121)' }}>
+      <div className="container padding-vert--lg">
+        <div className="row">
+          <div className="col col--8 col--offset-2">
+            <div className="margin-bottom--lg text--center">
+              <div>
+                <h2
+                  className={styles.sectionSponsorTitle}
+                  style={{ fontSize: 'var(--ifm-h1-font-size)' }}>
+                  <strong>
+                    Looking for front end interview practice? <br />
+                    GreatFrontEnd has 500+ practice questions and reference
+                    solutions from ex-interviewers at FAANG
+                  </strong>
+                </h2>
+                <div className="margin-vert--md">
+                  <a
+                    className="button button--secondary button--lg"
+                    href="https://www.greatfrontend.com/interviews/get-started?gnrs=frontendinterviewhandbook"
+                    rel="noopener"
+                    target="_blank"
+                    onClick={() => {
+                      window.gtag(
+                        'event',
+                        'greatfrontend.homepage.system_design.click',
+                      );
+                    }}>
+                    Get started &nbsp;&nbsp;→
+                  </a>
+                </div>
+                <div className="margin-vert--md">
+                  <h5
+                    style={{ color: 'rgb(255,255,255)', fontWeight: 'normal' }}>
+                    Psst... I built this!
+                    <br />
+                  </h5>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="row">
+          <div className={clsx('col col--8 col--offset-2')}>
+            <div className="row">
+              <div className={clsx('col col--4', styles.flexContainer)}>
+                <RiPresentationLine className={styles.promoIcon} />
+                <p className={styles.whiteText}>Well-explained solutions</p>
+              </div>
+              <div className={clsx('col col--4', styles.flexContainer)}>
+                <RiBookOpenLine className={styles.promoIcon} />
+                <p className={styles.whiteText}>Step-by-step study plans</p>
+              </div>
+              <div className={clsx('col col--4', styles.flexContainer)}>
+                <RiStackLine className={styles.promoIcon} />
+                <p className={styles.whiteText}>Structured prep process</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FAANGTechLeadsSection() {
+  return (
+    <div
+      className={clsx('padding-vert--lg')}
+      style={{ backgroundColor: 'rgb(244, 63, 94)' }}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--8 col--offset-2">
+            <div className="margin-vert--lg text--center">
+              <div>
+                <h2 className={styles.sectionSponsorTitle}>
+                  <strong>
+                    Craft the perfect resume for FAANG with FAANG Tech Leads'
+                    high quality Software Engineer resume templates and samples.
+                  </strong>
+                </h2>
+                <div className="margin-vert--lg">
+                  <a
+                    className="button button--secondary button--lg"
+                    href="https://www.faangtechleads.com?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=${position}&aff=1e80c401fe7e2"
+                    rel="noopener"
+                    target="_blank"
+                    onClick={() => {
+                      window.gtag('event', 'faangtechleads.homepage.click');
+                    }}>
+                    Improve your resume now &nbsp;&nbsp;→
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FeaturesSection() {
+  return (
+    <div className={clsx('margin-vert--lg', 'padding-vert--lg')}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--10 col--offset-1">
+            <h2
+              className={clsx(
+                'text--center',
+                'margin-bottom--xl',
+                styles.sectionTitle,
+              )}>
+              Why Front End Interview Handbook?
+            </h2>
+            <div className={clsx('row', styles.featuresRow)}>
+              <div className={clsx('col', 'col--4', styles.featuresRowItem)}>
+                <h3>🔍 Front end interviews demystified</h3>
+                <p>
+                  Front end interview preparation resources are scarce but no
+                  fret, we tell you what to expect and everything else you need
+                  to know!
+                </p>
+                <a href={useBaseUrl('introduction')}>
+                  <strong>Learn more</strong>
+                </a>
+              </div>
+              <div className={clsx('col', 'col--4', styles.featuresRowItem)}>
+                <h3>👩‍🎨 System design</h3>
+                <p>
+                  What even is Front end system design?! Learn more about them
+                  and how to ace these interviews.
+                </p>
+                <a href={useBaseUrl('front-end-system-design')}>
+                  <strong>Learn more</strong>
+                </a>
+              </div>
+              <div className={clsx('col', 'col--4', styles.featuresRowItem)}>
+                <h3>👩‍💻 Coding questions</h3>
+                <p>
+                  Coding questions are an entirely different ball game for Front
+                  End interviews. We tell you how to prepare for them (hint: not
+                  just LeetCode).
+                </p>
+                <a href={useBaseUrl('coding/build-front-end-user-interfaces')}>
+                  <strong>Learn more</strong>
+                </a>
+              </div>
+              <div className={clsx('col', 'col--4', styles.featuresRowItem)}>
+                <h3>💯 From zero to hero</h3>
+                <p>
+                  Go from zero to front end interview hero with this handbook.
+                  No prior interview experience needed.
+                </p>
+              </div>
+              <div className={clsx('col', 'col--4', styles.featuresRowItem)}>
+                <h3>🍼 Back to basics</h3>
+                <p>
+                  Learn to walk before you learn to fly. While React, Vue and
+                  Angular are cool, make sure you also know your fundamentals.
+                </p>
+              </div>
+              <div className={clsx('col', 'col--4', styles.featuresRowItem)}>
+                <h3>👨‍👩‍👦‍👦 Community effort</h3>
+                <p>
+                  The best thing about Open Source is that the community vets
+                  the contents, so you can be sure the answers here have been
+                  proofread by many.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Tweet({ url, handle, name, content, avatar, date }) {
+  return (
+    <div className={clsx('card', styles.tweet)}>
+      <div className="card__header">
+        <div className="avatar">
+          <img alt={name} className="avatar__photo" src={avatar} />
+          <div className="avatar__intro">
+            <div className={styles.tweet}>
+              <strong>{name}</strong>{' '}
+              <span className={styles.tweetMeta}>
+                @{handle} &middot;{' '}
+                <a className={styles.tweetMeta} href={url} rel="noopener">
+                  {date}
+                </a>
+              </span>
+            </div>
+            <div>{content}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TweetsSection() {
+  return (
+    <div className={clsx('padding-vert--xl', styles.sectionAlt)}>
+      <div className="container">
+        <h2
+          className={clsx(
+            'margin-bottom--lg',
+            'text--center',
+            styles.sectionTitle,
+          )}>
+          Over 500,000 people have benefitted from this handbook
+        </h2>
+        <div className={clsx('row', styles.tweetsSection)}>
+          <div className="col col--4">
+            <Tweet
+              url="https://twitter.com/css/status/963442650476089344"
+              handle="css"
+              name="CSS-Tricks"
+              date="Feb 14, 2018"
+              avatar="/img/tweets/css.jpg"
+              content={
+                <>
+                  Front End Interview [Question] Handbook
+                  <br />
+                  <br />A good amount of HTML, CSS, and JavaScript questions
+                  (and answers).
+                </>
+              }
+            />
+            <Tweet
+              url="https://twitter.com/Insharamin/status/1479459483592110085"
+              handle="Insharamin"
+              name="Insha"
+              date="Jan 7, 2022"
+              avatar="/img/tweets/Insharamin.jpg"
+              content={
+                <>
+                  Almost complete answers to "Front-end Job Interview Questions"
+                  which you can use to interview potential candidates, test
+                  yourself. Go from zero to front end interview hero with this
+                  handbook.
+                </>
+              }
+            />
+            <Tweet
+              url="https://twitter.com/umaar/status/963161780787798016"
+              handle="umaar"
+              name="Umar Hansa"
+              date="Feb 13, 2018"
+              avatar="/img/tweets/umaar.jpg"
+              content={
+                <>
+                  Front End Interview Handbook (Answers) 👀 - Useful for testing
+                  yourself and learning more about quirks, best practices and
+                  standards on the web ✅
+                </>
+              }
+            />
+          </div>
+          <div className="col col--4">
+            <Tweet
+              url="https://twitter.com/FrontendDaily/status/966791481058119680"
+              handle="FrontendDaily"
+              name="Frontend Daily"
+              date="Apr 10, 2018"
+              avatar="/img/tweets/FrontendDaily.jpg"
+              content={
+                <>
+                  A Front End Interview Handbook (Headed to a job interview any
+                  time soon? Here are some questions and answers worth being
+                  prepared for.)
+                </>
+              }
+            />
+            <Tweet
+              url="https://twitter.com/silvenon/status/1284988755942748161"
+              handle="silvenon"
+              name="Matija Marohnić"
+              date="Jul 20, 2020"
+              avatar="/img/tweets/silvenon.jpg"
+              content={
+                <>
+                  Front End Interview Handbook is AMAZING, huge props to
+                  @yangshunz and all the contributors. ⭐️
+                </>
+              }
+            />
+            <Tweet
+              url="https://twitter.com/nimz_co/status/1052966426645016588"
+              handle="nimz_co"
+              name="Nima Izadi"
+              date="Oct 19, 2018"
+              avatar="/img/tweets/nimz_co.jpg"
+              content={
+                <>
+                  Awesome guide for beginners to front-end development
+                  #JavaScript #CSS #HTML
+                  <br />
+                  <br />I guess, big shout out to @yangshunz and all the
+                  contributors of the repo! 💪
+                </>
+              }
+            />
+          </div>
+          <div className="col col--4">
+            <Tweet
+              url="https://twitter.com/CodeWithKenny/status/1326505319137161218"
+              handle="CodeWithKenny"
+              name="Code with Kenny"
+              date="Nov 11, 2020"
+              avatar="/img/tweets/CodeWithKenny.jpg"
+              content={
+                <>
+                  This has been a great refresher resource and in an easy to
+                  read format. Enjoy!
+                </>
+              }
+            />
+            <Tweet
+              url="https://twitter.com/ddskier/status/1287085703172677632"
+              handle="ddskier"
+              name="DeeDee Walsh"
+              date="Jul 26, 2020"
+              avatar="/img/tweets/ddskier.jpg"
+              content={
+                <>
+                  This is useful! Front End Interview Handbook by @yangshunz
+                  #interviews #interviewing #career
+                </>
+              }
+            />
+            <Tweet
+              url="https://twitter.com/realJacobJed/status/969604583273172992"
+              handle="realJacobJed"
+              name="Jacob Jed"
+              date="Mar 3, 2018"
+              avatar="/img/tweets/realJacobJed.jpg"
+              content={
+                <>
+                  Awesome Front End Interview Handbook. I learned a lot from
+                  this. Test yourself! I wouldn't pass this interview before
+                  reading the answers for the first time. Would you?
+                </>
+              }
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SuccessStoriesSection() {
+  return (
+    <div className={clsx('padding-vert--lg', styles.sectionAlt)}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--6 col--offset-3">
+            <h2
+              className={clsx(
+                'margin-vert--lg',
+                'text--center',
+                styles.sectionTitle,
+              )}>
+              Success stories
+            </h2>
+            {successStories.map((user) => (
+              <div className="card margin-vert--lg" key={user.name}>
+                <div className="card__body">
+                  <p className={styles.quote}>"{user.quote}"</p>
+                </div>
+                <div className="card__header">
+                  <div className="avatar">
+                    <img
+                      alt={user.name}
+                      className="avatar__photo"
+                      src={user.thumbnail}
+                    />
+                    <div className="avatar__intro">
+                      <div className="avatar__name">{user.name}</div>
+                      <small className="avatar__subtitle">{user.title}</small>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+            <p className="margin-vert--lg text--center">
+              Would you like to contribute a success story?{' '}
+              <a
+                href="https://github.com/yangshun/front-end-interview-handbook/edit/main/website/src/data/successStories.js"
+                rel="nofollow noopener"
+                target="_blank">
+                Open a Pull Request here
+              </a>
+              !
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SponsorshipSection() {
+  return (
+    <div className={clsx('padding-vert--lg', 'text--center')}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--8 col--offset-2">
+            <h2 className={clsx('margin-vert--lg', styles.sectionTitle)}>
+              Enjoying Front End Interview Handbook so far?
+            </h2>
+            <p className={clsx(styles.sectionTagline)}>
+              Support this project by becoming a sponsor! Your logo/profile
+              picture will show up here with a link to your website.
+            </p>
+            <div>
+              <a
+                href="https://opencollective.com/tech-interview-handbook/sponsor/0/website"
+                rel="noopener"
+                target="_blank">
+                <img
+                  alt="Sponsor"
+                  src="https://opencollective.com/tech-interview-handbook/sponsor/0/avatar.svg"
+                />
+              </a>
+              <a
+                href="https://opencollective.com/tech-interview-handbook/sponsor/1/website"
+                rel="noopener"
+                target="_blank">
+                <img
+                  alt="Sponsor"
+                  src="https://opencollective.com/tech-interview-handbook/sponsor/1/avatar.svg"
+                />
+              </a>
+            </div>
+            <div className="margin-vert--lg">
+              <a
+                className="button button--primary button--lg"
+                href="https://opencollective.com/tech-interview-handbook"
+                rel="noopener"
+                target="_blank">
+                Become a sponsor!
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
new file mode 100755
index 0000000000..2b82f2e6fa
--- /dev/null
+++ b/website/src/pages/styles.module.css
@@ -0,0 +1,110 @@
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.heroBannerLogo {
+  max-width: 300px;
+}
+
+@media screen and (max-width: 966px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flexContainer {
+  display: flex;
+}
+
+.promoIcon {
+  color: #fff;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  margin-right: 0.5rem;
+}
+
+.whiteText {
+  color: #fff;
+  margin: 0;
+}
+
+.sectionTitle {
+  font-size: 2rem;
+}
+
+.sectionTagline {
+  font-size: 1.25rem;
+}
+
+.sectionAlt {
+  background-color: var(--ifm-color-emphasis-100);
+}
+
+.sectionSponsor {
+  background-image: linear-gradient(90deg, rgb(188, 78, 156), rgb(248, 7, 89));
+}
+
+html[data-theme='dark'] .sectionSponsor {
+  background-image: linear-gradient(
+    90deg,
+    rgb(253, 200, 48),
+    rgb(243, 115, 53)
+  );
+}
+
+.sectionSponsorTitle {
+  color: var(--ifm-color-gray-0);
+}
+
+.sectionSponsorAlt {
+  background: linear-gradient(
+    135deg,
+    rgb(29, 136, 244),
+    rgb(252, 67, 128),
+    rgb(251, 191, 36)
+  );
+}
+
+.quote {
+  font-size: 1.1rem;
+}
+
+.featuresRow {
+  margin-top: -2rem;
+}
+
+.featuresRow .featuresRowItem {
+  padding-top: 2rem;
+}
+
+.tweet {
+  font-size: 15px;
+}
+
+.tweetsSection {
+  margin-top: -2rem;
+}
+
+.tweetsSection > :global(.col) {
+  padding-top: 2rem;
+  margin-top: -2rem;
+}
+
+.tweetsSection > :global(.col) > * {
+  margin-top: 2rem;
+}
+
+.tweetMeta,
+.tweetMeta:hover {
+  color: var(--ifm-color-emphasis-700);
+}
diff --git a/website/src/theme/DocItem/Content/index.js b/website/src/theme/DocItem/Content/index.js
new file mode 100644
index 0000000000..afc2e82c30
--- /dev/null
+++ b/website/src/theme/DocItem/Content/index.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import clsx from 'clsx';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/theme-common/internal';
+import Heading from '@theme/Heading';
+import MDXContent from '@theme/MDXContent';
+/**
+ Title can be declared inside md content or declared through
+ front matter and added manually. To make both cases consistent,
+ the added title is added under the same div.markdown block
+ See https://github.com/facebook/docusaurus/pull/4882#issuecomment-853021120
+
+ We render a "synthetic title" if:
+ - user doesn't ask to hide it with front matter
+ - the markdown content does not already contain a top-level h1 heading
+*/
+function useSyntheticTitle() {
+  const { metadata, frontMatter, contentTitle } = useDoc();
+  const shouldRender =
+    !frontMatter.hide_title && typeof contentTitle === 'undefined';
+  if (!shouldRender) {
+    return null;
+  }
+  return metadata.title;
+}
+export default function DocItemContent({ children }) {
+  const syntheticTitle = useSyntheticTitle();
+  return (
+    <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>
+      {syntheticTitle && (
+        <header>
+          <Heading as="h1">{syntheticTitle}</Heading>
+        </header>
+      )}
+      <div className="margin-bottom--lg">
+        <iframe
+          src="https://ghbtns.com/github-btn.html?user=yangshun&amp;repo=front-end-interview-handbook&amp;type=star&amp;count=true&amp;size=large"
+          frameBorder={0}
+          width={160}
+          height={30}
+          title="GitHub Stars"
+        />
+      </div>
+      <MDXContent>{children}</MDXContent>
+    </div>
+  );
+}
diff --git a/website/src/theme/DocItem/Layout/index.js b/website/src/theme/DocItem/Layout/index.js
new file mode 100644
index 0000000000..3384d78098
--- /dev/null
+++ b/website/src/theme/DocItem/Layout/index.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import clsx from 'clsx';
+import { useWindowSize } from '@docusaurus/theme-common';
+import { useDoc } from '@docusaurus/theme-common/internal';
+import DocItemPaginator from '@theme/DocItem/Paginator';
+import DocVersionBanner from '@theme/DocVersionBanner';
+import DocVersionBadge from '@theme/DocVersionBadge';
+import DocItemFooter from '@theme/DocItem/Footer';
+import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
+import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
+import DocItemContent from '@theme/DocItem/Content';
+import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import styles from './styles.module.css';
+
+/**
+ * Decide if the toc should be rendered, on mobile or desktop viewports
+ */
+function useDocTOC() {
+  const { frontMatter, toc } = useDoc();
+  const windowSize = useWindowSize();
+  const hidden = frontMatter.hide_table_of_contents;
+  const canRender = !hidden && toc.length > 0;
+  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
+  const desktop =
+    canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
+      <DocItemTOCDesktop />
+    ) : undefined;
+  return {
+    hidden,
+    mobile,
+    desktop,
+  };
+}
+export default function DocItemLayout({ children }) {
+  const docTOC = useDocTOC();
+  return (
+    <div className="row">
+      <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
+        <DocVersionBanner />
+        <div className={styles.docItemContainer}>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
+            {docTOC.mobile}
+            <DocItemContent>{children}</DocItemContent>
+            <DocItemFooter />
+          </article>
+          <DocItemPaginator />
+        </div>
+      </div>
+      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+    </div>
+  );
+}
diff --git a/website/src/theme/DocItem/Layout/styles.module.css b/website/src/theme/DocItem/Layout/styles.module.css
new file mode 100644
index 0000000000..3ead8cf972
--- /dev/null
+++ b/website/src/theme/DocItem/Layout/styles.module.css
@@ -0,0 +1,17 @@
+/* TIH: Add horizontal padding */
+@media (min-width: 768px) {
+  .docItemContainer {
+    padding: 0 3rem;
+  }
+}
+
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+@media (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}
diff --git a/website/src/theme/DocSidebar/Mobile/index.d.ts b/website/src/theme/DocSidebar/Mobile/index.d.ts
new file mode 100644
index 0000000000..0ba788e588
--- /dev/null
+++ b/website/src/theme/DocSidebar/Mobile/index.d.ts
@@ -0,0 +1,5 @@
+import React from 'react';
+import type { Props } from '@theme/DocSidebar/Mobile';
+declare function DocSidebarMobile(props: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof DocSidebarMobile>;
+export default _default;
diff --git a/website/src/theme/DocSidebar/Mobile/index.js b/website/src/theme/DocSidebar/Mobile/index.js
new file mode 100644
index 0000000000..db3dfbd992
--- /dev/null
+++ b/website/src/theme/DocSidebar/Mobile/index.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import clsx from 'clsx';
+import {
+  NavbarSecondaryMenuFiller,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal';
+import DocSidebarItems from '@theme/DocSidebarItems';
+import SidebarAd from '../../../components/SidebarAd';
+// eslint-disable-next-line react/function-component-definition
+const DocSidebarMobileSecondaryMenu = ({ sidebar, path }) => {
+  const mobileSidebar = useNavbarMobileSidebar();
+  return (
+    <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+      <DocSidebarItems
+        items={sidebar}
+        activePath={path}
+        onItemClick={(item) => {
+          // Mobile sidebar should only be closed if the category has a link
+          if (item.type === 'category' && item.href) {
+            mobileSidebar.toggle();
+          }
+          if (item.type === 'link') {
+            mobileSidebar.toggle();
+          }
+        }}
+        level={1}
+      />
+      {/* TIH: Add SidebarAd */}
+      <div className="margin--md">
+        <SidebarAd position="mobile_sidebar" />
+      </div>
+    </ul>
+  );
+};
+function DocSidebarMobile(props) {
+  return (
+    <NavbarSecondaryMenuFiller
+      component={DocSidebarMobileSecondaryMenu}
+      props={props}
+    />
+  );
+}
+export default React.memo(DocSidebarMobile);
diff --git a/website/src/theme/TOC/index.js b/website/src/theme/TOC/index.js
new file mode 100644
index 0000000000..8757047e35
--- /dev/null
+++ b/website/src/theme/TOC/index.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import clsx from 'clsx';
+import TOCItems from '@theme/TOCItems';
+import styles from './styles.module.css'; // Using a custom className
+import SidebarAd from '../../components/SidebarAd';
+// This prevents TOC highlighting to highlight TOCInline/TOCCollapsible by mistake
+
+const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight';
+const LINK_ACTIVE_CLASS_NAME = 'table-of-contents__link--active';
+
+function TOC({ className, ...props }) {
+  return (
+    <div className={clsx(styles.tableOfContents, 'thin-scrollbar', className)}>
+      <div className="margin--md">
+        <SidebarAd position="table_of_contents" />
+      </div>
+      <h3
+        className="padding-left--md padding-top--md margin-bottom--none"
+        style={{
+          textTransform: 'uppercase',
+          fontSize: '0.75em',
+          color: 'var(--ifm-color-emphasis-700)',
+          letterSpacing: '0.5px',
+        }}>
+        Table of Contents
+      </h3>
+      <TOCItems
+        {...props}
+        linkClassName={LINK_CLASS_NAME}
+        linkActiveClassName={LINK_ACTIVE_CLASS_NAME}
+      />
+    </div>
+  );
+}
+
+export default TOC;
diff --git a/website/src/theme/TOC/styles.module.css b/website/src/theme/TOC/styles.module.css
new file mode 100644
index 0000000000..869692423b
--- /dev/null
+++ b/website/src/theme/TOC/styles.module.css
@@ -0,0 +1,29 @@
+.tableOfContents {
+  max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+  overflow-y: auto;
+  position: sticky;
+  top: calc(var(--ifm-navbar-height) + 1rem);
+}
+
+@media (max-width: 996px) {
+  .tableOfContents {
+    display: none;
+  }
+
+  .docItemContainer {
+    padding: 0 0.3rem;
+  }
+}
+
+.socialLinksContainer {
+  background-color: var(--ifm-color-emphasis-100);
+  border-radius: var(--ifm-global-radius);
+}
+
+.socialLinks {
+  align-items: center;
+  display: flex;
+  font-size: 0.9rem;
+  justify-content: center;
+  gap: 1rem;
+}
diff --git a/website/static/CNAME b/website/static/CNAME
new file mode 100644
index 0000000000..64b028b3dd
--- /dev/null
+++ b/website/static/CNAME
@@ -0,0 +1 @@
+frontendinterviewhandbook.com
\ No newline at end of file
diff --git a/website/static/_redirects b/website/static/_redirects
new file mode 100644
index 0000000000..996cdbaba5
--- /dev/null
+++ b/website/static/_redirects
@@ -0,0 +1,12 @@
+/algorithms /coding/algorithms/
+/algorithms/ /coding/algorithms/
+/utility-function /coding/javascript-utility-function/
+/utility-function/ /coding/javascript-utility-function/
+/coding/utility-function /coding/javascript-utility-function/
+/coding/utility-function/ /coding/javascript-utility-function/
+/build-user-interfaces /coding/build-front-end-user-interfaces/
+/build-user-interfaces/ /coding/build-front-end-user-interfaces/
+/coding/build-user-interfaces /coding/build-front-end-user-interfaces/
+/coding/build-user-interfaces/ /coding/build-front-end-user-interfaces/
+/pop-quiz /trivia/
+/pop-quiz/ /trivia/
diff --git a/website/static/ads.txt b/website/static/ads.txt
new file mode 100644
index 0000000000..8a56c180eb
--- /dev/null
+++ b/website/static/ads.txt
@@ -0,0 +1 @@
+google.com, pub-4984084888641317, DIRECT, f08c47fec0942fa0
\ No newline at end of file
diff --git a/website/static/gfe-features.webm b/website/static/gfe-features.webm
new file mode 100644
index 0000000000..6ede4545b1
Binary files /dev/null and b/website/static/gfe-features.webm differ
diff --git a/website/static/guides/amazon-front-end-guide.pdf b/website/static/guides/amazon-front-end-guide.pdf
new file mode 100644
index 0000000000..886f6503e0
Binary files /dev/null and b/website/static/guides/amazon-front-end-guide.pdf differ
diff --git a/website/static/guides/atlassian-front-end-interview-guide.pdf b/website/static/guides/atlassian-front-end-interview-guide.pdf
new file mode 100644
index 0000000000..cebb39fb23
Binary files /dev/null and b/website/static/guides/atlassian-front-end-interview-guide.pdf differ
diff --git a/website/static/guides/dropbox-web-developer-guide.pdf b/website/static/guides/dropbox-web-developer-guide.pdf
new file mode 100644
index 0000000000..5503ea516a
Binary files /dev/null and b/website/static/guides/dropbox-web-developer-guide.pdf differ
diff --git a/website/static/guides/google-front-end-guide-old.pdf b/website/static/guides/google-front-end-guide-old.pdf
new file mode 100644
index 0000000000..6ec04ebc3c
Binary files /dev/null and b/website/static/guides/google-front-end-guide-old.pdf differ
diff --git a/website/static/guides/google-front-end-guide.pdf b/website/static/guides/google-front-end-guide.pdf
new file mode 100644
index 0000000000..d1863932d7
Binary files /dev/null and b/website/static/guides/google-front-end-guide.pdf differ
diff --git a/website/static/guides/google-non-technical-guide.pdf b/website/static/guides/google-non-technical-guide.pdf
new file mode 100644
index 0000000000..1c9b27cb2c
Binary files /dev/null and b/website/static/guides/google-non-technical-guide.pdf differ
diff --git a/website/static/guides/stripe-guide.pdf b/website/static/guides/stripe-guide.pdf
new file mode 100644
index 0000000000..d4f1daff50
Binary files /dev/null and b/website/static/guides/stripe-guide.pdf differ
diff --git a/website/static/img/authors/zhenghao.jpg b/website/static/img/authors/zhenghao.jpg
new file mode 100644
index 0000000000..4ba39f2ba4
Binary files /dev/null and b/website/static/img/authors/zhenghao.jpg differ
diff --git a/website/static/img/discord-light.svg b/website/static/img/discord-light.svg
new file mode 100644
index 0000000000..e54d182f78
--- /dev/null
+++ b/website/static/img/discord-light.svg
@@ -0,0 +1,10 @@
+<svg width="28" height="22" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="#ffffff"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="71" height="55" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/website/static/img/discord.svg b/website/static/img/discord.svg
new file mode 100644
index 0000000000..b8396a902f
--- /dev/null
+++ b/website/static/img/discord.svg
@@ -0,0 +1,10 @@
+<svg width="28" height="22" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="#000"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="71" height="55" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/website/static/img/favicon.png b/website/static/img/favicon.png
new file mode 100644
index 0000000000..afe48c8ef5
Binary files /dev/null and b/website/static/img/favicon.png differ
diff --git a/website/static/img/icons8-github-light.svg b/website/static/img/icons8-github-light.svg
new file mode 100644
index 0000000000..3a26a017fa
--- /dev/null
+++ b/website/static/img/icons8-github-light.svg
@@ -0,0 +1 @@
+<svg fill="#fff" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px">    <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/></svg>
diff --git a/website/static/img/icons8-github.svg b/website/static/img/icons8-github.svg
new file mode 100644
index 0000000000..4263f8aac9
--- /dev/null
+++ b/website/static/img/icons8-github.svg
@@ -0,0 +1 @@
+<svg fill="#000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="24px" height="24px">    <path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"/></svg>
diff --git a/website/static/img/icons8-twitter-light.svg b/website/static/img/icons8-twitter-light.svg
new file mode 100644
index 0000000000..3e9c79ab26
--- /dev/null
+++ b/website/static/img/icons8-twitter-light.svg
@@ -0,0 +1 @@
+<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px"><path d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"/></svg>
diff --git a/website/static/img/icons8-twitter.svg b/website/static/img/icons8-twitter.svg
new file mode 100644
index 0000000000..858b14e690
--- /dev/null
+++ b/website/static/img/icons8-twitter.svg
@@ -0,0 +1 @@
+<svg fill="#000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px"><path d="M 50.0625 10.4375 C 48.214844 11.257813 46.234375 11.808594 44.152344 12.058594 C 46.277344 10.785156 47.910156 8.769531 48.675781 6.371094 C 46.691406 7.546875 44.484375 8.402344 42.144531 8.863281 C 40.269531 6.863281 37.597656 5.617188 34.640625 5.617188 C 28.960938 5.617188 24.355469 10.21875 24.355469 15.898438 C 24.355469 16.703125 24.449219 17.488281 24.625 18.242188 C 16.078125 17.8125 8.503906 13.71875 3.429688 7.496094 C 2.542969 9.019531 2.039063 10.785156 2.039063 12.667969 C 2.039063 16.234375 3.851563 19.382813 6.613281 21.230469 C 4.925781 21.175781 3.339844 20.710938 1.953125 19.941406 C 1.953125 19.984375 1.953125 20.027344 1.953125 20.070313 C 1.953125 25.054688 5.5 29.207031 10.199219 30.15625 C 9.339844 30.390625 8.429688 30.515625 7.492188 30.515625 C 6.828125 30.515625 6.183594 30.453125 5.554688 30.328125 C 6.867188 34.410156 10.664063 37.390625 15.160156 37.472656 C 11.644531 40.230469 7.210938 41.871094 2.390625 41.871094 C 1.558594 41.871094 0.742188 41.824219 -0.0585938 41.726563 C 4.488281 44.648438 9.894531 46.347656 15.703125 46.347656 C 34.617188 46.347656 44.960938 30.679688 44.960938 17.09375 C 44.960938 16.648438 44.949219 16.199219 44.933594 15.761719 C 46.941406 14.3125 48.683594 12.5 50.0625 10.4375 Z"/></svg>
diff --git a/website/static/img/logo.svg b/website/static/img/logo.svg
new file mode 100644
index 0000000000..e5ced07742
--- /dev/null
+++ b/website/static/img/logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 582.39 453.96"><defs><style>.cls-1{fill:#eef2f5;}.cls-2{fill:#ffe400;}.cls-3{fill:#9e6101;}.cls-4{fill:#ffb321;}.cls-5{opacity:0.2;}.cls-6{fill:#383838;}.cls-7{fill:#ff4585;}</style></defs><title>Artboard 16</title><ellipse class="cls-1" cx="291.19" cy="423.93" rx="291.19" ry="30.03"/><path d="M398.61,50.48h20a18.14,18.14,0,0,1,18.14,18.14v0a18.14,18.14,0,0,1-18.14,18.14h-20a0,0,0,0,1,0,0V50.48A0,0,0,0,1,398.61,50.48Z"/><circle cx="398.61" cy="68.61" r="18.14"/><path class="cls-2" d="M100.74,26.1H380.62a42.51,42.51,0,0,1,42.51,42.51v0a42.51,42.51,0,0,1-42.51,42.51H100.74a0,0,0,0,1,0,0v-85A0,0,0,0,1,100.74,26.1Z"/><path class="cls-3" d="M136.42,68.61c0,23.48-6.48,42.52-30,42.52H223.72V68.61Z"/><path class="cls-4" d="M106.46,26.1A42.52,42.52,0,1,0,120,108.9L95.62,84.56l25.65-25.65,23.9,29.59,1-4.72A42.42,42.42,0,0,0,106.46,26.1Z"/><path class="cls-4" d="M139.78,77.43,121.27,58.91,95.62,84.56,120,108.9a42.55,42.55,0,0,0,21.36-16A12.12,12.12,0,0,0,139.78,77.43Z"/><rect class="cls-4" x="143.25" y="65.54" width="5.72" height="312.19"/><polygon class="cls-2" points="423.13 377.73 148.98 377.73 148.98 65.54 423.13 67.34 423.13 377.73"/><rect class="cls-4" x="179.43" y="218.55" width="213.26" height="16.72" rx="8.36" ry="8.36"/><rect class="cls-4" x="179.43" y="256.41" width="135.6" height="16.72" rx="8.36" ry="8.36"/><rect class="cls-4" x="337" y="256.41" width="55.68" height="16.72" rx="8.36" ry="8.36"/><rect class="cls-4" x="179.43" y="294.28" width="65.2" height="16.72" rx="8.36" ry="8.36"/><rect class="cls-4" x="262.75" y="294.28" width="129.94" height="16.72" rx="8.36" ry="8.36"/><g id="IzKML2"><path class="cls-4" d="M337.84,117l-12.49,8c-.76-1.07-1.42-2.1-2.18-3.06a10.16,10.16,0,0,0-11-3.38c-6,1.75-6,8.79-3,11.55a16,16,0,0,0,3.71,2.62c3,1.47,6,2.76,9.06,4.11A55.49,55.49,0,0,1,334.43,144a21,21,0,0,1,8.09,16.41,22.73,22.73,0,0,1-2.67,12.43A20.48,20.48,0,0,1,328,182.3c-10.47,3.39-20.7,2.82-30.43-2.59a27.26,27.26,0,0,1-10.73-11.13c-.12-.21-.21-.44-.36-.76l13.1-7.58.57.84a19.53,19.53,0,0,0,6.8,6.81,16.92,16.92,0,0,0,13.8,1.25c2.7-.87,4.78-2.55,5.43-5.47a6.83,6.83,0,0,0-1.9-6.83,16,16,0,0,0-3.78-2.66c-3.54-1.73-7.16-3.28-10.76-4.88a42,42,0,0,1-11.38-6.93,21.18,21.18,0,0,1-7-15,21.83,21.83,0,0,1,2.5-12.21,19.77,19.77,0,0,1,10.75-9.18,29.61,29.61,0,0,1,21.83.26C331.6,108.25,335.1,112.18,337.84,117Z"/><path class="cls-4" d="M229.56,169.53l13.08-7.91.73,1.21a19.1,19.1,0,0,0,3.72,4.93,10.37,10.37,0,0,0,10.9,1.08c2.14-1.21,3-3.24,3.33-5.52a28.33,28.33,0,0,0,.3-4.22q0-26.37,0-52.73v-1.3h16.1c0,.3,0,.61,0,.93v53.46a30.25,30.25,0,0,1-2.42,13c-2.81,6-7.64,9.58-14,11a30.6,30.6,0,0,1-19.66-1.56,24.18,24.18,0,0,1-12-12A3.79,3.79,0,0,1,229.56,169.53Z"/></g><path d="M479.53,359.6h20a18.14,18.14,0,0,1,18.14,18.14v0a18.14,18.14,0,0,1-18.14,18.14h-20a0,0,0,0,1,0,0V359.6a0,0,0,0,1,0,0Z"/><circle cx="479.53" cy="377.73" r="18.14"/><path class="cls-3" d="M185.77,335.22H465.65a42.51,42.51,0,0,1,42.51,42.51v0a42.51,42.51,0,0,1-42.51,42.51H185.77a0,0,0,0,1,0,0v-85A0,0,0,0,1,185.77,335.22Z"/><circle class="cls-4" cx="185.77" cy="377.73" r="42.51"/><path class="cls-5" d="M225.63,392.82l-24.88-24.88-25.64,25.65,24.34,24.35A42.61,42.61,0,0,0,225.63,392.82Z"/><path d="M170.11,361.39h18a16.35,16.35,0,0,1,16.35,16.35v0a16.35,16.35,0,0,1-16.35,16.35h-18a0,0,0,0,1,0,0V361.39a0,0,0,0,1,0,0Z"/><circle class="cls-6" cx="170.11" cy="377.73" r="16.35"/><path class="cls-7" d="M425.59,269.87l5.6,14.82a2.68,2.68,0,0,0,1.53,1.53l14.82,5.6a2.63,2.63,0,0,1,0,4.91l-14.82,5.61a2.64,2.64,0,0,0-1.53,1.52l-5.6,14.82a2.63,2.63,0,0,1-4.91,0l-5.61-14.82a2.59,2.59,0,0,0-1.52-1.52l-14.82-5.61a2.63,2.63,0,0,1,0-4.91l14.82-5.6a2.64,2.64,0,0,0,1.52-1.53l5.61-14.82A2.63,2.63,0,0,1,425.59,269.87Z"/><path class="cls-7" d="M214.32,1.7l5.61,14.81A2.61,2.61,0,0,0,221.45,18l14.82,5.6a2.63,2.63,0,0,1,0,4.92l-14.82,5.6a2.61,2.61,0,0,0-1.52,1.53L214.32,50.5a2.62,2.62,0,0,1-4.91,0l-5.6-14.81a2.62,2.62,0,0,0-1.53-1.53l-14.82-5.6a2.63,2.63,0,0,1,0-4.92L202.28,18a2.62,2.62,0,0,0,1.53-1.53l5.6-14.81A2.62,2.62,0,0,1,214.32,1.7Z"/><path class="cls-7" d="M482,112.83l5.6,14.81a2.65,2.65,0,0,0,1.53,1.53l14.82,5.6a2.63,2.63,0,0,1,0,4.92l-14.82,5.6a2.65,2.65,0,0,0-1.53,1.53L482,161.63a2.62,2.62,0,0,1-4.91,0l-5.61-14.81a2.61,2.61,0,0,0-1.52-1.53l-14.82-5.6a2.63,2.63,0,0,1,0-4.92l14.82-5.6a2.61,2.61,0,0,0,1.52-1.53l5.61-14.81A2.62,2.62,0,0,1,482,112.83Z"/><path class="cls-7" d="M123.34,202.51l5.6,14.81a2.62,2.62,0,0,0,1.53,1.53l14.81,5.6a2.63,2.63,0,0,1,0,4.92L130.47,235a2.62,2.62,0,0,0-1.53,1.53l-5.6,14.81a2.62,2.62,0,0,1-4.91,0l-5.61-14.81a2.6,2.6,0,0,0-1.53-1.53l-14.81-5.6a2.63,2.63,0,0,1,0-4.92l14.81-5.6a2.6,2.6,0,0,0,1.53-1.53l5.61-14.81A2.62,2.62,0,0,1,123.34,202.51Z"/><path class="cls-5" d="M139.74,77.38,121.27,58.91,95.62,84.56,120,108.9a42.54,42.54,0,0,0,19.08-13l1.45-1.75A12.42,12.42,0,0,0,139.74,77.38Z"/><path d="M91.63,54.06h18A16.35,16.35,0,0,1,126,70.4v0a16.35,16.35,0,0,1-16.35,16.35h-18a0,0,0,0,1,0,0V54.06A0,0,0,0,1,91.63,54.06Z"/><circle class="cls-6" cx="91.63" cy="70.4" r="16.35"/></svg>
\ No newline at end of file
diff --git a/website/static/img/tweets/CodeWithKenny.jpg b/website/static/img/tweets/CodeWithKenny.jpg
new file mode 100644
index 0000000000..834107af28
Binary files /dev/null and b/website/static/img/tweets/CodeWithKenny.jpg differ
diff --git a/website/static/img/tweets/FrontendDaily.jpg b/website/static/img/tweets/FrontendDaily.jpg
new file mode 100644
index 0000000000..d56afc894f
Binary files /dev/null and b/website/static/img/tweets/FrontendDaily.jpg differ
diff --git a/website/static/img/tweets/Insharamin.jpg b/website/static/img/tweets/Insharamin.jpg
new file mode 100644
index 0000000000..340028019a
Binary files /dev/null and b/website/static/img/tweets/Insharamin.jpg differ
diff --git a/website/static/img/tweets/css.jpg b/website/static/img/tweets/css.jpg
new file mode 100644
index 0000000000..e9eb2aa250
Binary files /dev/null and b/website/static/img/tweets/css.jpg differ
diff --git a/website/static/img/tweets/ddskier.jpg b/website/static/img/tweets/ddskier.jpg
new file mode 100644
index 0000000000..b7ceb1bcf8
Binary files /dev/null and b/website/static/img/tweets/ddskier.jpg differ
diff --git a/website/static/img/tweets/nimz_co.jpg b/website/static/img/tweets/nimz_co.jpg
new file mode 100644
index 0000000000..3ec45c75e7
Binary files /dev/null and b/website/static/img/tweets/nimz_co.jpg differ
diff --git a/website/static/img/tweets/realJacobJed.jpg b/website/static/img/tweets/realJacobJed.jpg
new file mode 100644
index 0000000000..def6b55120
Binary files /dev/null and b/website/static/img/tweets/realJacobJed.jpg differ
diff --git a/website/static/img/tweets/silvenon.jpg b/website/static/img/tweets/silvenon.jpg
new file mode 100644
index 0000000000..7f00527bae
Binary files /dev/null and b/website/static/img/tweets/silvenon.jpg differ
diff --git a/website/static/img/tweets/umaar.jpg b/website/static/img/tweets/umaar.jpg
new file mode 100644
index 0000000000..7f94c1eb32
Binary files /dev/null and b/website/static/img/tweets/umaar.jpg differ