misc: prettify files
This commit is contained in:
Yangshun
parent
026491e6a9
commit
badc0e8842
|
|
@ -1,6 +1,5 @@
|
|||
{
|
||||
"bracketSameLine": true,
|
||||
"bracketSpacing": false,
|
||||
"printWidth": 80,
|
||||
"proseWrap": "never",
|
||||
"singleQuote": true,
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
Browser
|
||||
==
|
||||
# Browser
|
||||
|
||||
## Glossary
|
||||
|
||||
|
|
@ -15,21 +14,30 @@ 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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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).
|
||||
|
||||
1. Painting
|
||||
|
||||
- Finally, this gets actually displayed in a browser window, a process called "painting".
|
||||
|
||||
###### References
|
||||
|
|
@ -44,6 +52,7 @@ When changing element styles which don't affect the element's position on a page
|
|||
## Reflow
|
||||
|
||||
When the changes affect document contents or structure, or element position, a reflow (or relayout) happens. These changes are usually triggered by:
|
||||
|
||||
- DOM manipulation (element addition, deletion, altering, or changing element order)
|
||||
- Contents changes, including text changes in form fields
|
||||
- Calculation or altering of CSS properties
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
Caching
|
||||
==
|
||||
# Caching
|
||||
|
||||
WIP.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
CSS
|
||||
==
|
||||
# CSS
|
||||
|
||||
CSS (Cascading Style Sheets) are rules to describe how your HTML elements look. Writing good CSS is hard. It usually takes many years of experience and frustration of shooting yourself in the foot before one is able to write maintainable and scalable CSS. CSS, having a global namespace, is fundamentally designed for web documents, and not really for web apps that favor a components architecture. Hence, experienced front end developers have designed methodologies to guide people on how to write organized CSS for complex projects, such as using [SMACSS](https://smacss.com/), [BEM](http://getbem.com/), [SUIT CSS](http://suitcss.github.io/), etc.
|
||||
|
||||
|
|
@ -20,7 +19,7 @@ If you are a total beginner to CSS, Codecademy's [HTML & CSS course](https://www
|
|||
- [**Positioning**](https://developer.mozilla.org/en-US/docs/Web/CSS/position) - The position CSS property determines how an element will be positioned in a document. The `top`, `right`, `bottom`, and `left` properties would later determine the final location of said positioned element.
|
||||
- Initial value: `static`
|
||||
- Values that are frequently used: `relative`, `absolute`, `fixed`, `sticky`
|
||||
- [**Floats**](https://developer.mozilla.org/en-US/docs/Web/CSS/float) - The `float` CSS property determines where an element should be placed - along the left or right side of its container. This allows text and inline elements to wrap around it. Also note, the element would be removed from the normal *flow* of the web page, though still remaining a part of the flow (in contrast to `position: absolute`). For an element to be `float`, it's value must not be `none`.
|
||||
- [**Floats**](https://developer.mozilla.org/en-US/docs/Web/CSS/float) - The `float` CSS property determines where an element should be placed - along the left or right side of its container. This allows text and inline elements to wrap around it. Also note, the element would be removed from the normal _flow_ of the web page, though still remaining a part of the flow (in contrast to `position: absolute`). For an element to be `float`, it's value must not be `none`.
|
||||
- Initial value: `none`
|
||||
- Values that are frequently used: `left`, `right`, `inline-start`, `inline-end`.
|
||||
- Additional Notes: Usually, there would be cases that you may want to move an item below any floated elements. E.g, you may want some elements like your paragraphs to remain adjacent to floats, but force headings and footers to be on their own line. See [`clear` attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/clear) for more examples
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
DOM
|
||||
==
|
||||
# DOM
|
||||
|
||||
## Glossary
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
Networking
|
||||
==
|
||||
# Networking
|
||||
|
||||
WIP.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
Performance
|
||||
==
|
||||
# Performance
|
||||
|
||||
WIP.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
Security
|
||||
==
|
||||
# Security
|
||||
|
||||
## Glossary
|
||||
|
||||
|
|
@ -52,7 +51,7 @@ XSS vulnerabilities allow attackers to bypass essentially all CSRF preventions.
|
|||
|
||||
###### References
|
||||
|
||||
- [OWASP CSRF](https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF))
|
||||
- [OWASP CSRF](<https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)>)
|
||||
|
||||
## HTTPS
|
||||
|
||||
|
|
@ -100,7 +99,6 @@ http://shebang.brandonmintern.com/foolproof-html-escaping-in-javascript/
|
|||
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
|
||||
- https://www.nczonline.net/blog/2009/05/12/cookies-and-security/
|
||||
|
||||
|
||||
## Framebusting
|
||||
|
||||
https://seclab.stanford.edu/websec/framebusting/framebust.pdf
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
Widgets
|
||||
==
|
||||
# Widgets
|
||||
|
||||
Here are some commonly seen widgets/components and the considerations we should take into account when designing them.
|
||||
|
||||
|
|
|
|||
|
|
@ -87,4 +87,3 @@ Many hours of hard work have gone into this project. Your support will be very a
|
|||
## License
|
||||
|
||||
All projects and packages in this repository are [MIT licensed](/LICENSE).
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@ The [Tech Interview Handbook](https://www.techinterviewhandbook.org/algorithms/s
|
|||
|
||||
[GreatFrontEnd](https://www.greatfrontend.com) provides [**free** questions for you to practice implementing Data Structures and Algorithms in JavaScript](https://www.greatfrontend.com/questions/js/coding/data-structures-algorithms). You can practice implementing common data structures (e.g. [Stacks](https://www.greatfrontend.com/questions/javascript/stack), [Queues](https://www.greatfrontend.com/questions/javascript/queue)) and algorithms (e.g. [Binary Search](https://www.greatfrontend.com/questions/javascript/binary-search), [Merge Sort](https://www.greatfrontend.com/questions/javascript/merge-sort)).
|
||||
|
||||
|
||||
## Algorithm courses
|
||||
|
||||
### [AlgoMonster](https://shareasale.com/r.cfm?b=1873647&u=3114753&m=114505&urllink=&afftrack=)
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ Front End Interview Handbook is now part of [GreatFrontEnd](https://www.greatfro
|
|||
|
||||
:::
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
- News feed (e.g. Facebook): [Read example solution on GreatFrontEnd](https://www.greatfrontend.com/questions/system-design/news-feed-facebook)
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@ In system design interviews, candidates are supposed to lead the conversation. H
|
|||
1. **<u>I</u>nterface definition (API)**: Define the interface (API) between components in the product, functionality of each API, their parameters and responses.
|
||||
1. **<u>O</u>ptimizations and deep dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product.
|
||||
|
||||
|
||||
### Requirements exploration
|
||||
|
||||
Every system design interview (even for non-front end as well) should start with requirements gathering/clarifying requirements about the question, which is usually left underspecified on purpose. You are recommended to spend at least a few minutes clarifying the requirements. Do not start drawing the architecture before you are clear about the requirements!
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ Not sure how to start? [GreatFrontEnd](https://www.greatfrontend.com) has front
|
|||
|
||||
:::
|
||||
|
||||
|
||||
## Basic examples
|
||||
|
||||
- Implement `Array.prototype` functions: `map`, `reduce`, `filter`, `sort`
|
||||
|
|
|
|||
|
|
@ -7,10 +7,8 @@ description: 前端/网络开发人员/软件工程师的行为面试指南，
|
|||
|
||||
然而，准备行为面试时面临的一些常见挑战有：
|
||||
|
||||
1. 如何准备面试的各种问题？
|
||||
由于面试官可以问任何他们想要问的问题，因此准备任何行为问题都是不可能的。 但是，我们可以将常见的问题分类为几个主题，并采用方法论来解决它们。
|
||||
2. 如何展现自己的"适应性"？
|
||||
许多候选人在面试时都难以让自己显得可爱，并与面试官取得联系。 我们将根据我们的经验提供一些应对策略。
|
||||
1. 如何准备面试的各种问题？由于面试官可以问任何他们想要问的问题，因此准备任何行为问题都是不可能的。 但是，我们可以将常见的问题分类为几个主题，并采用方法论来解决它们。
|
||||
2. 如何展现自己的"适应性"？许多候选人在面试时都难以让自己显得可爱，并与面试官取得联系。 我们将根据我们的经验提供一些应对策略。
|
||||
|
||||
本文将介绍：
|
||||
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ Em essência, para os gerentes de contratação, a autointrodução serve para r
|
|||
Além dos requisitos específicos do cargo, como frameworks e tecnologias específicas da equipe, os gerentes de contratação para desenvolvedores front-end geralmente se concentram nos seguintes **4 critérios**:
|
||||
|
||||
| Critérios | Exemplo |
|
||||
| --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| --- | --- |
|
||||
| Compreensão dos fundamentos do front-end: HTML, CSS, JavaScript e áreas relacionadas | "Tenho construído aplicações de front-end há alguns anos e também contribuído para projetos populares de código aberto, como Lodash e jQuery." <br/><br/>"Fui assistente de ensino para o curso de desenvolvimento web da minha faculdade e orientei estudantes que trabalharam em projetos que envolviam a construção de aplicações web full stack." |
|
||||
| A amplitude e profundidade das tecnologias front-end que o candidato conhece | "Utilizei React, Tailwind, Next.js, Prisma e MySQL para construir um clone do Twitter como parte do projeto da minha equipe de engenharia de software." |
|
||||
| Iniciativa para acompanhar as tecnologias modernas de front-end | "Eu aprendi Astro e reconstruí meu blog pessoal usando ele, pois o Astro é ótimo para construir sites orientados a conteúdo." |
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ description: 如何在不同的面试背景下有效地构建你的面试自我
|
|||
在特定角色的要求之上，如团队特定的框架和技术，前端招聘经理通常关注以下**4 个标准**：
|
||||
|
||||
| 标准 | 例子 |
|
||||
| ---------------------------------- | ----------------------------------------------------------------------------------------------------- |
|
||||
| --- | --- |
|
||||
| 了解前端的基本原理：HTML、CSS、JavaScript 和相关领域 | "我建立前端应用程序已经有几年了，也为 Lodash 和 jQuery 等流行的开源项目做出了贡献。" <br/><br/>"我是我的大学的网络开发课程的教学助理，指导学生从事涉及建立全栈 Web 应用的项目。" |
|
||||
| 候选人了解的前端技术的广度和深度 | "我使用 React、Tailwind、Next.js、Prisma 和 MySQL 建立一个 Twitter 克隆，作为我的软件工程团队项目的一部分。" |
|
||||
| 主动跟上现代前端技术的步伐 | "我学习了 Astro，并使用它重建了我的个人博客，因为 Astro 对于建立内容驱动的网站非常好。" |
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "Entrevistas para Desenvolvedor Front-End - Perguntas de Codificação Algorítmica: Como se Preparar"
|
||||
title: 'Entrevistas para Desenvolvedor Front-End - Perguntas de Codificação Algorítmica: Como se Preparar'
|
||||
description: Guia para se Preparar para Perguntas de Codificação Algorítmica em Entrevistas para Desenvolvedor Front-End / Web - Conceitos para Saber, Critérios de Entrevista e Questões de Prática Importantes.
|
||||
---
|
||||
|
||||
|
|
@ -35,7 +35,7 @@ Embora você ainda possa ser questionado sobre qualquer tópico algorítmico, as
|
|||
Como o DOM é uma árvore, priorize aprender sobre árvores e os diversos algoritmos de travessia de árvores.
|
||||
|
||||
| Categoria | Tópicos Importantes |
|
||||
| ------------------- | -------------------------------------------------------------------------------------- |
|
||||
| --- | --- |
|
||||
| Estruturas de Dados | Arrays, Mapas, Pilhas, Árvores, Gráficos, Matriz (Arrays 2D), Conjuntos |
|
||||
| Algoritmos | Busca Binária, Busca em Largura, Busca em Profundidade, Ordenação Topológica, Recursão |
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ a serem adicionados.
|
|||
### `Map`
|
||||
|
||||
| Operação | Complexidade de Tempo |
|
||||
| ------------------------- | ------------------------------------------------------------------------------- |
|
||||
| --- | --- |
|
||||
| `Map.prototype.clear()` | O(n) |
|
||||
| `Map.prototype.delete()` | O(1) |
|
||||
| `Map.prototype.entries()` | O(1) because it returns an iterator. Obter todas as entradas levará tempo O(n). |
|
||||
|
|
@ -83,7 +83,7 @@ a serem adicionados.
|
|||
### `Set`
|
||||
|
||||
| Operação | Complexidade de Tempo |
|
||||
| ------------------------- | --------------------------------------------------------------------------- |
|
||||
| --- | --- |
|
||||
| `Set.prototype.add()` | O(1) |
|
||||
| `Set.prototype.clear()` | O(n) |
|
||||
| `Set.prototype.delete()` | O(1) |
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ description: 这是前端/网站开发者面试中准备算法编码问题的指
|
|||
由于 DOM 是一棵树，优先学习有关树和各种树遍历算法的知识。
|
||||
|
||||
| 类别 | 重要话题 |
|
||||
| ---- | -------------------------- |
|
||||
| -------- | ---------------------------------------------------- |
|
||||
| 数据结构 | 数组、映射、堆栈、树、图、矩阵（2D 数组）、集合 |
|
||||
| 算法 | 二分查找、广度优先搜索、深度优先搜索、拓扑排序、递归 |
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ description: 这是前端/网站开发者面试中准备算法编码问题的指
|
|||
### `Array`
|
||||
|
||||
| 操作 | 时间复杂度 |
|
||||
| --------------------------- | --------------- |
|
||||
| --------------------------- | ---------- |
|
||||
| `Array.prototype.concat()` | O(m + n) |
|
||||
| `Array.prototype.every()` | O(n) |
|
||||
| `Array.prototype.fill()` | O(n) |
|
||||
|
|
@ -66,7 +66,7 @@ description: 这是前端/网站开发者面试中准备算法编码问题的指
|
|||
### `Map`
|
||||
|
||||
| 操作 | 时间复杂度 |
|
||||
| ------------------------- | -------------------------------------- |
|
||||
| --- | --- |
|
||||
| `Map.prototype.clear()` | O(n) |
|
||||
| `Map.prototype.delete()` | O(1) |
|
||||
| `Map.prototype.entries()` | O(1)，因为它返回一个迭代器。 获取所有条目将花费 O(n)时间。 |
|
||||
|
|
@ -82,7 +82,7 @@ description: 这是前端/网站开发者面试中准备算法编码问题的指
|
|||
### `Set`
|
||||
|
||||
| 操作 | 时间复杂度 |
|
||||
| ------------------------- | -------------------------------------- |
|
||||
| --- | --- |
|
||||
| `Set.prototype.add()` | O(1) |
|
||||
| `Set.prototype.clear()` | O(n) |
|
||||
| `Set.prototype.delete()` | O(1) |
|
||||
|
|
|
|||
|
|
@ -34,12 +34,12 @@ Exemplos de IDEs online incluem [JSFiddle](https://jsfiddle.net/), [CodePen](htt
|
|||
|
||||
Em certas empresas, você pode ser solicitado a escrever todo o código necessário no quadro branco. Imagine escrever HTML e CSS no quadro sem poder visualizá-lo! Isso pode ser um pesadelo para os candidatos, e grandes empresas de tecnologia como o Google e o Meta/Facebook são conhecidas por fazer isso durante entrevistas presenciais. A maioria das outras empresas geralmente pede que você traga seu próprio laptop e codifique em seu IDE local ou em um editor de código/IDE online em um navegador da web.
|
||||
|
||||
* * *
|
||||
---
|
||||
|
||||
Aqui está um resumo dos diversos ambientes de codificação e o que você pode fazer em cada um deles:
|
||||
|
||||
| Ambiente | Visualizar | Executar Código | Adicionar Dependências de Terceiros |
|
||||
| ----------------------------------------------------------- | ---------- | --------------- | ----------------------------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| Editor de código online | Não | Situacional | Normalmente, não |
|
||||
| IDEs (Ambientes de Desenvolvimento Integrado) | Sim | Sim | Sim |
|
||||
| Quadro Branco | Não | Não | Não |
|
||||
|
|
|
|||
|
|
@ -34,12 +34,12 @@ description: 准备前端/ Web开发人员面试中的编码问题——了解
|
|||
|
||||
在某些公司，您可能会被要求在白板上编写所有必需的代码。 想象一下没有办法预览在白板上编写的 HTML 和 CSS！ 这是候选人的噩梦，像谷歌和 Meta / Facebook 这样的大型科技公司在面试时已知会这样做。 大多数其他公司要么让您带自己的笔记本电脑，您可以在本地 IDE 或 Web 浏览器中的在线代码编辑器/ IDE 中编码。
|
||||
|
||||
* * *
|
||||
---
|
||||
|
||||
下面是各种编码环境的摘要和您可以采取的措施：
|
||||
|
||||
| 环境 | 预览 | 执行代码 | 添加第三方依赖 |
|
||||
| ----------------- | ------ | ----------- | ------------------------- |
|
||||
| -------------- | ---- | -------- | -------------- |
|
||||
| 在线代码编辑器 | 否 | 有时 | 通常否 |
|
||||
| IDE | 是 | 是 | 是 |
|
||||
| 白板 | 否 | 否 | 否 |
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ Entrevistas de codificação em JavaScript compartilham muitas semelhanças com
|
|||
## Conceitos Importantes
|
||||
|
||||
| Categoria | Tópicos Importantes |
|
||||
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| --- | --- |
|
||||
| Estruturas de Dados | Arrays, Maps, Stacks, Trees, Sets |
|
||||
| Algoritmos | Busca Binária, Busca em Largura (Breadth-first Search), Busca em Profundidade (Depth-first Search), Recursão |
|
||||
| Linguagem JavaScript | Tipos de dados (verificação de tipos, coerção de tipos), Escopo, Closures, Callbacks, Funcionamento da palavra-chave `this`, Programação Orientada a Objetos em JavaScript (protótipos, classes, métodos), Funções de seta vs. funções normais, Invocando funções via `Function.prototype.apply()`/`Function.prototype.call()`, Promises, Manipulação de argumentos variádicos |
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ description: 为前端/网站开发人员面试准备JavaScript问题的指南
|
|||
|
||||
1. 它传递 4 个参数给回调函数，包括 `index` 和 `this` ？
|
||||
2. 它保留稀疏数组中的“空”，即 `[1, 2, , 4].map(val => val * val) === [1, 4, , 16]`。
|
||||
3. `map`处理的元素范围在第一个调用_callbackfn_之前设置。 在调用map之后附加到数组中的元素将不会被_callbackfn_访问。 如果更改数组的现有元素，则将它们的值作为传递给_callbackfn_的值在`map`访问它们时。 来源：[Array.prototype.map ECMAScript说明]（https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.map）
|
||||
3. `map`处理的元素范围在第一个调用*callbackfn*之前设置。 在调用 map 之后附加到数组中的元素将不会被*callbackfn*访问。 如果更改数组的现有元素，则将它们的值作为传递给*callbackfn*的值在`map`访问它们时。 来源：[Array.prototype.map ECMAScript 说明]（https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.map）
|
||||
|
||||
您的实施不必处理所有这些情况，特别是数组突变的情况。 但是，如果您提到了这些情况，那么这是一个积极的信号。 您的实现越接近规范，您就会显得更加资深/有经验。
|
||||
|
||||
|
|
@ -72,7 +72,7 @@ JavaScript编码面试与算法编码面试有许多相似之处。 一般来说
|
|||
## 重要概念
|
||||
|
||||
| 类别 | 重要主题 |
|
||||
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| --- | --- |
|
||||
| 数据结构 | 数组、地图、堆栈、树、套装 |
|
||||
| 算法 | 二进制搜索、广度优先搜索、深度优先搜索、递归 |
|
||||
| JavaScript 语言 | 数据类型（检查类型、类型强制转换）、范围、闭合、回调、如何使用此处关键字、面向对象编程（原型、类、方法），箭头函数与普通函数、通过`Function.prototype.apply()` / `Function.prototype.call()`调用函数，`Promise`，处理多参数 |
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ A maneira mais segura de saber o que esperar é perguntar ao recrutador da empre
|
|||
A matriz a seguir mostra a relevância/probabilidade de cada tipo de pergunta durante cada rodada de entrevista. É possível que uma rodada de entrevista inclua perguntas de diferentes tipos.
|
||||
|
||||
| Rodada | Quiz | Algoritmos | UI (Interface de Usuário) | JavaScript | System Design |
|
||||
| -------------------------- | -------- | ------------ | --------------------------- | ------------ | --------------- |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| Avaliação Online | Médio | Alto | Alto | Alto | Nada |
|
||||
| Chamada de Recrutador | Médio | Nenhum | Nenhum | Nenhum | Nenhum |
|
||||
| Projeto para Fazer em Casa | Nenhum | Nenhum | Alto | Médio | Médio |
|
||||
|
|
@ -108,7 +108,7 @@ A matriz a seguir mostra a relevância/probabilidade de cada tipo de pergunta du
|
|||
Aqui está um resumo dos tipos de perguntas feitas pelas principais empresas dos Estados Unidos.
|
||||
|
||||
| Empresa | Questionário | Algoritmos | JavaScript | UI (Interface de Usuário) | Design de Sistema | Comportamental |
|
||||
| :------------ | :----------: | :----------: | :--------: | :-----------------------: | :---------------: | :------------: |
|
||||
| :-- | :-: | :-: | :-: | :-: | :-: | :-: |
|
||||
| Airbnb | Não | Sim | Sim | Sim | Não | Sim |
|
||||
| Amazon | Sim | Sim | Sim | Sim | Sim | Sim |
|
||||
| Apple | Sim | Sim | Sim | Sim | Desconhecido | Sim |
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
|
|||
以下矩阵显示了每个面试轮次中每种问题类型的相关程度/可能性。 面试轮可能包括来自不同问题类型的问题。
|
||||
|
||||
| 环节 | 测验 | 算法 | UI | JavaScript | 系统设计 |
|
||||
| -------------- | ---- | ------- | ---- | ---------- | ----------- |
|
||||
| ------------ | ---- | ---- | --- | ---------- | -------- |
|
||||
| 在线评估 | 中等 | 高 | 高 | 高 | 无 |
|
||||
| 招聘人员通话 | 中等 | 无 | 无 | 无 | 无 |
|
||||
| 接回家的项目 | 无 | 无 | 高 | 中等 | 中等 |
|
||||
|
|
@ -108,7 +108,7 @@ description: 前雇主的FAANG为前端/ Web开发人员面试提供了权威指
|
|||
以下是美国顶尖公司问的问题类型摘要。
|
||||
|
||||
| 公司 | 测验 | 算法 | JavaScript | UI | 系统设计 | 行为面试 |
|
||||
| :------------ | :-: | :-: | :--------: | :-: | :--: | :--: |
|
||||
| :------------ | :--: | :--: | :--------: | :-: | :------: | :------: |
|
||||
| 爱彼迎 | 否 | 是 | 是 | 是 | 否 | 是 |
|
||||
| 亚马逊 | 是 | 是 | 是 | 是 | 是 | 是 |
|
||||
| 苹果 | 是 | 是 | 是 | 是 | 未知 | 是 |
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ Como você pode ver, pode-se esperar que façam perguntas de quiz em quase todas
|
|||
## Conceitos Importantes
|
||||
|
||||
| Area | Tópicos |
|
||||
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| --- | --- |
|
||||
| HTML | HTML Semântico, Elementos de Bloco vs. Elementos Inline, `<head>`, `<script>`, `<style>`, `<link>`, `<form>`, `<input>`, Validação e Envio de Formulário |
|
||||
| CSS | Modelo de Caixa, Seletores, Especificidade, Posicionamento, Unidades, Flexbox, Grid, Consultas de Mídia |
|
||||
| JavaScript | Tipos de Dados, Escopo, Closures, `this`, Declaração de Variáveis (`var`, `let`, `const`), Métodos de Arrays, Métodos de Objetos, Promessas, Classes, Async/Await |
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ description: 准备测验式前端面试问题的指南——预期情况，需
|
|||
## 重要概念
|
||||
|
||||
| 领域 | 主题 |
|
||||
| ---------- | ----------------------------------------------------------------------------------- |
|
||||
| --- | --- |
|
||||
| HTML | 语义化 HTML，块级元素和行内元素，`<head>`、`<script>`、`<style>`、`<link>`、`<form>`、`<input>`，表单验证/提交 |
|
||||
| CSS | 盒模型，选择器，优先级，定位，单位，Flexbox，Grid，媒体查询 |
|
||||
| JavaScript | 数据类型，作用域，闭包，`this`，变量声明（`var`、`let`、`const`），数组方法，对象方法，Promise，类，异步/等待 |
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ Entrevistas de codificação de interface de usuário compartilham algumas semel
|
|||
## Conceitos Importantes
|
||||
|
||||
| Categoria | Tópicos Importantes |
|
||||
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| --- | --- |
|
||||
| Estruturas de Dados | Vetores, Mapas, Pilhas, Árvores, Conjuntos |
|
||||
| Engenharia de Software | Princípios de SOLID, Padrões de Design, Model-View-Controller |
|
||||
| HTML | HTML Semântico, Validação de Formulário, Envio de Formulário |
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ description: 准备前端/网络开发人员面试中的用户界面问题的指
|
|||
## 重要概念
|
||||
|
||||
| 类别 | 重要主题 |
|
||||
| ---------- | ------------------------------------------------ |
|
||||
| --- | --- |
|
||||
| 数据结构 | 数组、映射、栈、树、集合 |
|
||||
| 软件工程 | SOLID 原则、设计模式、模型 - 视图 - 控制器 |
|
||||
| HTML | 语义 HTML、表单验证、表单提交 |
|
||||
|
|
|
|||
|
|
@ -5,9 +5,7 @@
|
|||
"premium": false,
|
||||
"duration": 5,
|
||||
"published": true,
|
||||
"topics": [
|
||||
"css"
|
||||
],
|
||||
"topics": ["css"],
|
||||
"importance": "low",
|
||||
"difficulty": "medium"
|
||||
}
|
||||
|
|
@ -5,9 +5,7 @@
|
|||
"premium": false,
|
||||
"duration": 5,
|
||||
"published": true,
|
||||
"topics": [
|
||||
"javascript"
|
||||
],
|
||||
"topics": ["javascript"],
|
||||
"importance": "low",
|
||||
"difficulty": "medium"
|
||||
}
|
||||
|
|
@ -5,9 +5,7 @@
|
|||
"premium": false,
|
||||
"duration": 5,
|
||||
"published": true,
|
||||
"topics": [
|
||||
"css"
|
||||
],
|
||||
"topics": ["css"],
|
||||
"importance": "low",
|
||||
"difficulty": "medium"
|
||||
}
|
||||
|
|
@ -5,10 +5,7 @@
|
|||
"premium": false,
|
||||
"duration": 5,
|
||||
"published": true,
|
||||
"topics": [
|
||||
"html",
|
||||
"performance"
|
||||
],
|
||||
"topics": ["html", "performance"],
|
||||
"importance": "high",
|
||||
"difficulty": "medium",
|
||||
"featured": true
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ Cookies, `localStorage`, and `sessionStorage`, são todos:
|
|||
## Diferenças
|
||||
|
||||
| Propriedade | Cookie | `localStorage` | `sessionStorage` |
|
||||
| ------------------------------------------------- | ------------------------------------------------------------------ | --------------- | ---------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| Iniciador | Cliente ou servidor. O servidor pode usar o cabeçalho `Set-Cookie` | Cliente | Cliente |
|
||||
| Vencimento | Definir manualmente | Para sempre | Ao fechar a aba |
|
||||
| Persistente através de sessões do navegador | Depende se a expiração está definida | Sim | Não |
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ Cookies、`localStorage`和`sessionStorage`都是:
|
|||
## 差异
|
||||
|
||||
| 属性 | Cookie | `localStorage` | `sessionStorage` |
|
||||
| --------------- | ------------------------------- | -------------- | ---------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| 发起方 | 客户端或服务器。 服务器可以使用 `Set-Cookie` 头 | 客户端 | 客户端 |
|
||||
| 有效期 | 手动设置 | 永久 | 标签关闭时 |
|
||||
| 跨浏览器会话的持久性 | 取决于是否设置过期时间 | 是 | 否 |
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "Diferença entre: `function Person(){}`, `var person = Person()`, e `var person = new Person()`?"
|
||||
title: 'Diferença entre: `function Person(){}`, `var person = Person()`, e `var person = new Person()`?'
|
||||
---
|
||||
|
||||
Esta pergunta é muito vaga. Nossa melhor suposição sobre a intenção dessa pergunta é que ela está perguntando sobre construtores em JavaScript. Tecnicamente falando, `function Person(){}` é apenas uma declaração de função normal. A convenção é usar PascalCase para funções que se destinam a ser usadas como construtores.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "比较差异: `function Person(){}`, `var person = Person()`, 和 `var person = new Person()`?"
|
||||
title: '比较差异: `function Person(){}`, `var person = Person()`, 和 `var person = new Person()`?'
|
||||
---
|
||||
|
||||
这个问题相当含糊。 我们对其意图的最好猜测是，它在询问 JavaScript 中的构造函数。 从技术上讲，`function Person(){}` 只是一个正常函数声明。 惯例是对打算作为构造函数使用的函数使用 PascalCase。
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@ Os literais de template ajudam a simplificar a interpolação de strings ou a in
|
|||
```js
|
||||
var person = { name: 'Tyler', age: 28 };
|
||||
console.log(
|
||||
'Oi, meu nome é ' + person.name + ' e eu sou ' + pessoa.age + ' anos de idade!',
|
||||
'Oi, meu nome é ' +
|
||||
person.name +
|
||||
' e eu sou ' +
|
||||
pessoa.age +
|
||||
' anos de idade!',
|
||||
);
|
||||
// 'Oi, meu nome é Tyler e eu tenho 28 anos!'
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "Explique porque o seguinte não funciona como um IIFE: `function foo(){ }();`. O que precisa ser alterado para torná-lo corretamente um IIFE?"
|
||||
title: 'Explique porque o seguinte não funciona como um IIFE: `function foo(){ }();`. O que precisa ser alterado para torná-lo corretamente um IIFE?'
|
||||
---
|
||||
|
||||
IIFE significa expressões de função imediatamente invocadas. O interpretador JavaScript lê `function foo(){ }();` como `function foo(){ }` e `();`, onde o primeiro é uma declaração de função e o último (um par de parênteses) é uma tentativa de chamar uma função, mas não há nome especificado, portanto, ele retorna `Uncaught SyntaxError: Unexpected token )`.
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
title: "解释这为什么不能以IIFE工作: `function foo(){ }();`. 为了使它成为一个IIFE，需要作出哪些改变？"
|
||||
title: '解释这为什么不能以IIFE工作: `function foo(){ }();`. 为了使它成为一个IIFE，需要作出哪些改变？'
|
||||
---
|
||||
|
||||
IIFE 是 Immediately Invoked Function Expressions 的缩写，即立即调用函数表达式。 JavaScript 解析器读取`function foo(){ }();` 作为 `function foo(){ }` 和 `(); `, 如果前者是一个 _函数声明_, 而后者是一对括号, 则试图调用函数, 但没有指定名称, 因此，它抛出`Uncaught SyntaxError: Unexpected token )`。
|
||||
|
||||
这里有两种方法修复它，涉及添加更多括号：`(function foo(){ })()` 和 `(function foo(){ }())` 以 `function` 开头的语句被认为是_函数声明_；通过将这个函数包裹在"() "中，它成为一个_函数表达式_，然后可以用后面的`()`执行。 这些函数不会在全局范围内暴露，如果你不需要在代码里提及，你甚至可以省略它的名称。
|
||||
这里有两种方法修复它，涉及添加更多括号：`(function foo(){ })()` 和 `(function foo(){ }())` 以 `function` 开头的语句被认为是*函数声明*；通过将这个函数包裹在"() "中，它成为一个*函数表达式*，然后可以用后面的`()`执行。 这些函数不会在全局范围内暴露，如果你不需要在代码里提及，你甚至可以省略它的名称。
|
||||
|
||||
您也可以使用 `void` 操作符：`void function foo(){ }();`. 不幸的是，这种做法有一个问题。 对给定表达式的执行结果总是\`undefined'，所以如果你的 IIFE 函数返回任何东西，你就不能使用它。 举个例子：
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "`data-`属性有什么用？"
|
||||
title: '`data-`属性有什么用？'
|
||||
---
|
||||
|
||||
在 JavaScript 框架流行之前，开发者使用`data-`属性在 DOM 本身中存储额外的数据，没有其他的黑客，如非标准属性，DOM 上的额外属性。 它是为了在没有更合适的属性或元素时将自定义数据私密存储到页面或应用中。
|
||||
|
|
|
|||
|
|
@ -5,10 +5,7 @@
|
|||
"premium": false,
|
||||
"duration": 5,
|
||||
"published": true,
|
||||
"topics": [
|
||||
"css",
|
||||
"a11y"
|
||||
],
|
||||
"topics": ["css", "a11y"],
|
||||
"importance": "mid",
|
||||
"difficulty": "medium"
|
||||
}
|
||||
|
|
@ -5,9 +5,7 @@
|
|||
"premium": false,
|
||||
"duration": 5,
|
||||
"published": true,
|
||||
"topics": [
|
||||
"css"
|
||||
],
|
||||
"topics": ["css"],
|
||||
"importance": "low",
|
||||
"difficulty": "medium"
|
||||
}
|
||||
|
|
@ -5,9 +5,7 @@
|
|||
"premium": false,
|
||||
"duration": 5,
|
||||
"published": true,
|
||||
"topics": [
|
||||
"javascript"
|
||||
],
|
||||
"topics": ["javascript"],
|
||||
"importance": "low",
|
||||
"difficulty": "medium"
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "`DOCTYPE` 是做什么的？"
|
||||
title: '`DOCTYPE` 是做什么的？'
|
||||
---
|
||||
|
||||
**DOCTYPE** 是**文档类型**的缩写。 DOCTYPE 始终与**DTD**——**文档类型定义**相关。
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "O que faz `* { box-sizing: border-box; }`?"
|
||||
title: 'O que faz `* { box-sizing: border-box; }`?'
|
||||
subtitle: Quais as vantagens?
|
||||
---
|
||||
|
||||
|
|
@ -12,7 +12,7 @@ Por padrão, os elementos têm `box-sizing: content-box` aplicado, e apenas o ta
|
|||
A tabela a seguir indica se a propriedade é incluída ou não no cálculo da altura e largura do elemento quando ele tem o respectivo `box-sizing`:
|
||||
|
||||
| Propriedade | `box-sizing: content-box` (padrão) | `box-sizing: border-box` |
|
||||
| ------------ | ------------------------------------ | ------------------------- |
|
||||
| ----------- | ---------------------------------- | ------------------------ |
|
||||
| conteúdo | Sim | Sim |
|
||||
| `padding` | Não | Sim |
|
||||
| `border` | Não | Sim |
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "`* { box-sizing: border-box; }` 是干什么的？"
|
||||
title: '`* { box-sizing: border-box; }` 是干什么的？'
|
||||
subtitle: 它有什么好处？
|
||||
---
|
||||
|
||||
|
|
@ -12,7 +12,7 @@ subtitle: 它有什么好处？
|
|||
下表显示当属性具有相应的 `box-sizing`时，是否计算包含在元素的高度和宽度：
|
||||
|
||||
| 属性 | `box-sizing: content-box` (默认) | `box-sizing: border-box` |
|
||||
| --------- | ---------------------------------- | ------------------------ |
|
||||
| --------- | -------------------------------- | ------------------------ |
|
||||
| 内容 | 是 | 是 |
|
||||
| `padding` | 否 | 是 |
|
||||
| `border` | 否 | 是 |
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ title: Qual é a propriedade CSS `display` e você pode dar alguns exemplos de s
|
|||
Os valores comuns para a propriedade `display`: `none`, `block`, `inline`, `inline-block`, `flex`, `grid`, `tabela`, `table-row`, `table-cell`, `table-cell`, `list-item`.
|
||||
|
||||
| Valor `display` | Descrição |
|
||||
| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| :-- | :-- |
|
||||
| `none` | Não exibe um elemento (o elemento não afeta mais o layout do documento). Todos os elementos filhos também não são mais exibidos. O documento é renderizado como se o elemento não existisse na árvore do documento. |
|
||||
| `block` | O elemento consome toda a linha na direção do bloco (que geralmente é horizontal). |
|
||||
| `inline` | Elementos podem ser dispostos lado a lado. |
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ title: CSS `display` 属性是什么，你可以举几个例子说明它的使
|
|||
`display` 属性的常用值：`none`、`block`、`inline`、`inline-block`、`flex`、`grid`、`table`、`table-row`、`table-cell`、`list-item`。
|
||||
|
||||
| `display` 值 | 描述 |
|
||||
| :------------- | :----------------------------------------------------------------- |
|
||||
| :-- | :-- |
|
||||
| `none` | 不显示元素(元素不再影响文档的布局)。 所有子元素也不再显示。 文档被呈现为文档树中不存在的元素。 |
|
||||
| `block` | 该元素在区块方向（通常是水平方向）占用一整行。 |
|
||||
| `inline` | 元素可以彼此相邻地布置在一起。 |
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "`==` 和 `===`之间有什么区别？"
|
||||
title: '`==` 和 `===`之间有什么区别？'
|
||||
---
|
||||
|
||||
`==`是抽象的平等运算符，而`===`是严格的平等运算符。 `==`运算符会在做完任何必要的类型转换后进行平等性比较。 `===`运算符不会输入转换，所以如果两个值不是同一类型， `===`则只会返回 `false`。 当使用 `==`时，有趣的事情可能会发生，例如：
|
||||
|
|
|
|||
|
|
@ -5,9 +5,7 @@
|
|||
"premium": false,
|
||||
"duration": 5,
|
||||
"published": true,
|
||||
"topics": [
|
||||
"javascript"
|
||||
],
|
||||
"topics": ["javascript"],
|
||||
"importance": "high",
|
||||
"difficulty": "medium"
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "`relative`, `absolute`, `fixed` 和 `sticky` 定位的元素之间有什么区别？"
|
||||
title: '`relative`, `absolute`, `fixed` 和 `sticky` 定位的元素之间有什么区别？'
|
||||
---
|
||||
|
||||
定位元素是一个元素，其计算的 `position` 属性是 `relative`, `absolute`, `fixed` 或 `sticky`。
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "Qual é a diferença entre uma variável que é: `null`, `undefined` ou não declarada?"
|
||||
title: 'Qual é a diferença entre uma variável que é: `null`, `undefined` ou não declarada?'
|
||||
subtitle: Como você checaria cada um destes estados?"
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "`null`, `undefined` 和未声明变量的区别是什么？"
|
||||
title: '`null`, `undefined` 和未声明变量的区别是什么？'
|
||||
subtitle: 您将如何检查这些状态？”
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "`.call`和`.apply`之间有什么区别？"
|
||||
title: '`.call`和`.apply`之间有什么区别？'
|
||||
---
|
||||
|
||||
`.call`和`.apply`都用于调用函数，而第一个参数将用作函数中`this`的值。 然而，`.call`以逗号分隔的参数作为下一个参数，而`.apply`则以一系列参数作为下一个参数。 记住这一点的一个简单方法是 C for `call` and comma-separated and A for `appy` and an array of arguments。
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ 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. |
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
---
|
||||
title: "`inline` 和 `inline-block`之间有什么区别？"
|
||||
title: '`inline` 和 `inline-block`之间有什么区别？'
|
||||
---
|
||||
|
||||
为了完整起见，让我们也与`display: block`进行比较。
|
||||
|
||||
| 属性 | `block` | `inline-block` | `inline` |
|
||||
| ----------------------- | ----------------------------------------- | --------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| 尺寸 | 填充其父容器的宽度。 | 取决于内容。 | 取决于内容。 |
|
||||
| 位置 | 在新的一行开始，并且不允许旁边有任何 HTML 元素（除了当你添加`float`时）。 | 与其他内容一起排列，并允许旁边有其他元素。 | 与其他内容一起排列，允许其他元素在旁边。 |
|
||||
| 可以指定 `width` 和 `height` | 是 | 是 | 否. 如果设置，将忽略。 |
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ 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. |
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ subtitle: 你会选择哪一个，为什么？
|
|||
---
|
||||
|
||||
| 术语 | 定义 |
|
||||
| --------------- | --------------------------------------------------------------------------------------------- |
|
||||
| --- | --- |
|
||||
| **Resetting** | Resetting 是为了删除所有元素上默认的浏览器样式。 例如，`margin`, `padding`, `font-size`均重置为相同的。 你将不得不为常见的排版元素重新声明样式。 |
|
||||
| **Normalizing** | 正常化保留了有用的默认样式，而不是 "取消 "所有的样式。 它还纠正了常见浏览器依赖性的错误。 |
|
||||
|
||||
|
|
|
|||
|
|
@ -5,9 +5,7 @@
|
|||
"premium": false,
|
||||
"duration": 5,
|
||||
"published": true,
|
||||
"topics": [
|
||||
"javascript"
|
||||
],
|
||||
"topics": ["javascript"],
|
||||
"importance": "mid",
|
||||
"difficulty": "medium"
|
||||
}
|
||||
|
|
@ -5,9 +5,7 @@
|
|||
"premium": false,
|
||||
"duration": 5,
|
||||
"published": true,
|
||||
"topics": [
|
||||
"javascript"
|
||||
],
|
||||
"topics": ["javascript"],
|
||||
"importance": "low",
|
||||
"difficulty": "medium"
|
||||
}
|
||||
|
|
@ -5,9 +5,7 @@
|
|||
"premium": false,
|
||||
"duration": 5,
|
||||
"published": true,
|
||||
"topics": [
|
||||
"html"
|
||||
],
|
||||
"topics": ["html"],
|
||||
"importance": "mid",
|
||||
"difficulty": "medium"
|
||||
}
|
||||
|
|
@ -60,7 +60,8 @@ As áreas específicas do domínio de front-end incluem Performance, Networking,
|
|||
|
||||
<div className="mt-6 space-x-1 space-y-1 text-xs">
|
||||
<strong className="font-medium">Seções relevantes do framework:</strong>
|
||||
Exploração de Requisitos, Modelo de Dados, Definição de Interface, Otimizações e Análise Detalhada
|
||||
Exploração de Requisitos, Modelo de Dados, Definição de Interface, Otimizações
|
||||
e Análise Detalhada
|
||||
</div>
|
||||
|
||||
## Sentido de Produto e Experiência do Usuário (UX)
|
||||
|
|
@ -85,7 +86,8 @@ Seções relevantes do framework: **Otimizações e Aprofundamento**
|
|||
|
||||
<div className="mt-6 space-x-1 space-y-1 text-xs">
|
||||
<strong className="font-medium">Seções relevantes do framework:</strong>
|
||||
Arquitetura/Design de alto nível, Modelo de dados, Definição de interface, Otimizações e Aprofundamento
|
||||
Arquitetura/Design de alto nível, Modelo de dados, Definição de interface, Otimizações
|
||||
e Aprofundamento
|
||||
</div>
|
||||
|
||||
## Resumo
|
||||
|
|
@ -93,7 +95,7 @@ Seções relevantes do framework: **Otimizações e Aprofundamento**
|
|||
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 | - | ✅ | - | - | ✅ |
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ seo_description: 了解谷歌、亚马逊、Meta、微软和其他科技公司
|
|||
下面的表格总结了如何将评估轴映射到**RADIO 框架**的各个部分：需求探索（Requirements Exploration）、架构/高层设计（Architecture/High-level Design）、数据模型（Data Model）、接口定义（Interface Definition）、优化和深度挖掘（Optimizations and Deep Dive）。
|
||||
|
||||
| 轴 | R | A | D | I | O |
|
||||
| ---------------------------- | :-: | :-: | :-: | :-: | :-: |
|
||||
| ------------------ | :-: | :-: | :-: | :-: | :-: |
|
||||
| 问题探讨 | ✅ | - | - | - | - |
|
||||
| 架构 | - | ✅ | ✅ | ✅ | - |
|
||||
| 技术能力 | - | ✅ | - | - | ✅ |
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ A lista acima deve fornecer uma boa lista inicial de perguntas, mas não é uma
|
|||
|
||||
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
|
||||
|
||||
|
|
@ -111,10 +111,9 @@ Aqui está um exemplo de diagrama de arquitetura para a pergunta do News Feed, d
|
|||
- **Feed Post**: Mostra os dados de uma publicação e contém botões para interagir com a publicação (como /react/share/comment).
|
||||
- **Compositor de Postagens**: Interface do usuário para os usuários criarem novas postagens no feed.
|
||||
|
||||
Algumas ferramentas de desenho gratuitas comuns que você pode ser solicitado a usar incluem
|
||||
[diagrams.net](https://app.diagrams.net/) e [Excalidraw](https://excalidraw.com/). Seria uma boa ideia se familiarizar com essas ferramentas antecipadamente.
|
||||
Algumas ferramentas de desenho gratuitas comuns que você pode ser solicitado a usar incluem [diagrams.net](https://app.diagrams.net/) e [Excalidraw](https://excalidraw.com/). Seria uma boa ideia se familiarizar com essas ferramentas antecipadamente.
|
||||
|
||||
* * *
|
||||
---
|
||||
|
||||
## Modelo de Dados
|
||||
|
||||
|
|
@ -142,7 +141,7 @@ Ao listar os campos de dados, seria útil identificar que tipo de dados esse cam
|
|||
Aqui está um exemplo básico de modelo de dados para as várias entidades usando a pergunta [Feed de notícias](/questions/system-design/news-feed-facebook).
|
||||
|
||||
| Fonte | Entidade | Pertence a | Campos |
|
||||
| ---------------------------- | --------- | ------------------------------------------ | ------------------------------------------------------------------------ |
|
||||
| --- | --- | --- | --- |
|
||||
| Servidor | `Post` | Postagem do Feed | `id`, `created_time`, `content`, `image`, `author` (`User`), `reactions` |
|
||||
| Servidor | `Feed` | Interface do Feed | `posts` (lista de `Posts`s), `pagination` (metadados de paginação) |
|
||||
| Servidor | `User` | Store do cliente | `id`, `nome`, `profile_photo_url` |
|
||||
|
|
@ -152,7 +151,7 @@ Dependendo de quão longe você avança na pergunta e de como os requisitos evol
|
|||
|
||||
Você pode querer escrever esses campos próximos aos componentes que os possuem no seu diagrama de arquitetura.
|
||||
|
||||
* * *
|
||||
---
|
||||
|
||||
## Definição de Interface (API)
|
||||
|
||||
|
|
@ -163,7 +162,7 @@ Você pode querer escrever esses campos próximos aos componentes que os possuem
|
|||
Com os componentes e dados dentro de cada componente, podemos prosseguir para discutir a interface (APIs) entre os componentes. API é um termo sobrecarregado e geralmente se refere ao protocolo pelo qual os componentes de software se comunicam e solicitam/enviam dados entre si. Client and server communicate via network layer APIs (HTTP/WebSockets). Componentes do cliente geralmente se comunicam por meio de funções no tempo de execução do navegador. Todas as APIs têm três coisas em comum, quer estejam entre o servidor e o cliente ou entre componentes do cliente:
|
||||
|
||||
| Partes de uma API | Servidor-Cliente | Client-Client |
|
||||
| --------------------- | ----------------------------------------- | -------------------------- |
|
||||
| --- | --- | --- |
|
||||
| Nome e funcionalidade | Caminho HTTP | Função JavaScript |
|
||||
| Parâmetros | Parâmetros HTTP GET e POST | Parâmetros da função |
|
||||
| Valor de retorno | Resposta HTTP, geralmente no formato JSON | Valor de retorno da função |
|
||||
|
|
@ -173,7 +172,7 @@ Com os componentes e dados dentro de cada componente, podemos prosseguir para di
|
|||
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. |
|
||||
|
|
@ -225,7 +224,7 @@ A API cliente-cliente pode ser escrita de maneira semelhante à API servidor-cli
|
|||
|
||||
Se você foi solicitado a projetar um componente de interface do usuário, na seção "Interface", discuta sobre as opções de personalização para o componente, semelhantes às props para componentes React.
|
||||
|
||||
* * *
|
||||
---
|
||||
|
||||
## Otimizações e Análise Detalhada
|
||||
|
||||
|
|
@ -252,12 +251,12 @@ Aqui está uma lista de tópicos sobre os quais você pode falar para esta seç
|
|||
|
||||
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% |
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ seo_description: 在前端系统设计面试中应用RADIO框架，以结构化
|
|||
|
||||
建议您将商定的要求写在某个地方，以便在整个面试过程中参考，并确保您已经涵盖了这些要求。
|
||||
|
||||
* * *
|
||||
---
|
||||
|
||||
## 架构/高级设计
|
||||
|
||||
|
|
@ -113,7 +113,7 @@ seo_description: 在前端系统设计面试中应用RADIO框架，以结构化
|
|||
|
||||
常见的免费绘图工具包括[diagrams.net](https://app.diagrams.net/)和[Excalidraw](https://excalidraw.com/)。 最好事先熟悉一下这些工具。
|
||||
|
||||
* * *
|
||||
---
|
||||
|
||||
## 数据模型
|
||||
|
||||
|
|
@ -141,7 +141,7 @@ seo_description: 在前端系统设计面试中应用RADIO框架，以结构化
|
|||
这是一个使用[信息流](/questions/system-design/news-feed-facebook)问题的各个实体数据模型的基本例子。
|
||||
|
||||
| 来源 | 实体 | 属于 | 字段 |
|
||||
| --------- | --------- | ------- | -------------------------------------------------------------------------- |
|
||||
| --- | --- | --- | --- |
|
||||
| 服务端 | `Post` | 信息流帖子 | `id`, `created_time`, `content`, `image`, `author` (a `User`), `reactions` |
|
||||
| 服务端 | `Feed` | 信息流 UI | `posts`（`Post` 列表），`pagination `（分页元数据） |
|
||||
| 服务端 | `User` | 客户端存储 | `id`, `name`, `profile_photo_url` |
|
||||
|
|
@ -151,7 +151,7 @@ seo_description: 在前端系统设计面试中应用RADIO框架，以结构化
|
|||
|
||||
你可能想把这些字段写在你的架构图中拥有它们的组件附近。
|
||||
|
||||
* * *
|
||||
---
|
||||
|
||||
## 接口定义 (API)
|
||||
|
||||
|
|
@ -162,7 +162,7 @@ seo_description: 在前端系统设计面试中应用RADIO框架，以结构化
|
|||
有了组件和每个组件内的数据，我们就可以继续讨论组件之间的接口（API）了。 API 是一个重载的术语，通常指软件组件之间通信和请求/发送数据的协议。 客户端和服务器通过网络层 API（HTTP/WebSockets）进行通信。 客户端组件通常通过浏览器运行时的函数进行通信。 无论是在服务器和客户端之间，还是在客户端组件之间，所有的 API 都有三个共同点：
|
||||
|
||||
| API 的组成部分 | 服务器-客户端 | 客户端-客户端 |
|
||||
| -------- | -------------------- | ------------- |
|
||||
| -------------- | --------------------------- | --------------- |
|
||||
| 名称和功能 | HTTP 路径 | JavaScript 函数 |
|
||||
| 参数 | HTTP GET 查询和 POST 参数 | 函数参数 |
|
||||
| 返回值 | HTTP 响应，一般为 JSON 格式 | 函数返回值 |
|
||||
|
|
@ -172,7 +172,7 @@ seo_description: 在前端系统设计面试中应用RADIO框架，以结构化
|
|||
再次以[信息流](/questions/system-design/news-feed-facebook)为例，我们有一个服务器 API，允许客户机获取最新的动态帖子。
|
||||
|
||||
| 字段 | 值 |
|
||||
| --------- | ------------------------------------ |
|
||||
| --------- | ---------------------- |
|
||||
| HTTP 方法 | `GET` |
|
||||
| 路径 | `/feed` |
|
||||
| 描述 | 为用户获取信息流结果。 |
|
||||
|
|
@ -224,7 +224,7 @@ seo_description: 在前端系统设计面试中应用RADIO框架，以结构化
|
|||
|
||||
如果你被要求设计一个 UI 组件，在 "界面 "部分，讨论组件的自定义选项，类似于 React 组件的道具。
|
||||
|
||||
* * *
|
||||
---
|
||||
|
||||
## 优化和深入研究
|
||||
|
||||
|
|
@ -251,12 +251,12 @@ seo_description: 在前端系统设计面试中应用RADIO框架，以结构化
|
|||
|
||||
有关每个主题的详细信息，请参阅我们的[构建用户界面的最佳实践指南](/front-end-interview-guidebook/user-interface-questions-cheatsheet)。
|
||||
|
||||
* * *
|
||||
---
|
||||
|
||||
## 总结
|
||||
|
||||
| 步骤 | 目标 | 推荐时长 |
|
||||
| ------- | ------------------------------------ | ----- |
|
||||
| --- | --- | --- |
|
||||
| 需求探索 | 通过提出一些明确的问题来全面了解问题并确定其范围。 | \<15% |
|
||||
| 架构/高级设计 | 识别产品的关键部件以及它们之间的关系。 | ~20% |
|
||||
| 数据模型 | 描述各种数据实体、它们包含的字段以及它们属于哪个组件。 | ~10% |
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ Os recursos de design de sistemas da GreatFrontEnd são talvez os mais abrangent
|
|||
Nas entrevistas tradicionais de design de sistemas para Engenheiros de Software, os candidatos serão solicitados a descrever a arquitetura de um sistema distribuído, geralmente envolvendo servidores web, balanceadores de carga, caches, bancos de dados, microsserviços, filas de tarefas, etc. Para Engenheiros Front-End, as entrevistas de design de sistemas são um pouco diferentes, com mais ênfase no que acontece no cliente e no design da API entre o cliente e o servidor, em vez do que acontece no back-end.
|
||||
|
||||
| Proporção | Back End | Front End |
|
||||
| -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
|
||||
| --- | --- | --- |
|
||||
| Coletar requisitos | Obrigatório | Obrigatório |
|
||||
| Arquitetura/design de alto nível | Serviços em nuvem distribuídos | Aplicação/Componente |
|
||||
| Estimativa rápida | Obrigatório | Não obrigatório |
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ GreatFrontEnd的系统设计资源也许是您能找到的最全面的资源，
|
|||
在传统的软件工程师系统设计面试中，应聘者会被要求描述分布式系统的架构，通常涉及 Web 服务器、负载均衡器、缓存、数据库、微服务、任务队列等。 对于前端工程师来说，系统设计面试略有不同，与后端相比，面试更注重客户端以及客户端与服务器之间的 API 设计。
|
||||
|
||||
| 方面 | 后端 | 前端 |
|
||||
| ------------- | --------------------------------------- | ------------------------------- |
|
||||
| --- | --- | --- |
|
||||
| 收集需求 | 需要 | 需要 |
|
||||
| 架构/高级设计 | 分布式云服务 | 应用/组件 |
|
||||
| 事后估算 | 需要 | 不需要 |
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ Diferentes aplicativos têm seus próprios aspectos únicos e pontos de discuss
|
|||
Aqui está uma lista de perguntas comumente feitas durante entrevistas de design de sistema de front end e as áreas nas quais você deve se concentrar:
|
||||
|
||||
| Aplicação | Exemplos | Áreas importantes |
|
||||
| --------------------------------------------------------------------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------- |
|
||||
| --- | --- | --- |
|
||||
| [Fonte de Notícias](/questions/system-design/news-feed-facebook) | Facebook, Twitter | Interações de feed, abordagens de paginação de feed, compositor de mensagens/postagens |
|
||||
| [Mensagem/Chat](/questions/system-design/chat-application-messenger) | Messenger, Slack, Discord | Sincronização de mensagens, chat em tempo real, lista de mensagens, lista de chat |
|
||||
| [Marketplaces de comércio eletrônico](/questions/system-design/e-commerce-amazon) | Amazon, eBay | Páginas de listagem de produtos, páginas de detalhes do produto, carrinho, checkout |
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ seo_description: 了解两种类型的前端系统设计问题，以及如何以
|
|||
以下是前端系统设计面试中常见的应用问题列表，以及您应重点关注的领域：
|
||||
|
||||
| 应用 | 示例 | 重要领域 |
|
||||
| ------------------------------------------------------------ | -------------------------------- | ------------------------ |
|
||||
| --- | --- | --- |
|
||||
| [信息流](/questions/system-design/news-feed-facebook) | Facebook, Twitter | 按钮交互， 动态内容分页方法， 消息/帖子编辑器 |
|
||||
| [消息/聊天](/questions/system-design/chat-application-messenger) | Messenger, Slack, Discord | 消息同步、实时聊天、消息列表、聊天列表 |
|
||||
| [电子商务市场](/questions/system-design/e-commerce-amazon) | Amazon, eBay | 产品列表页, 产品详情页, 购物车, 结账 |
|
||||
|
|
|
|||
|
|
@ -44,9 +44,8 @@ function GreatFrontEnd({position}) {
|
|||
<strong className={styles.title}>
|
||||
LeetCode for Front End Interviews
|
||||
</strong>
|
||||
Get 20% off <u>GreatFrontEnd</u>'s premium high quality
|
||||
practice questions, answers and guides by{' '}
|
||||
<u>ex-FAANG Senior Engineers</u>
|
||||
Get 20% off <u>GreatFrontEnd</u>'s premium high quality practice
|
||||
questions, answers and guides by <u>ex-FAANG Senior Engineers</u>
|
||||
</p>
|
||||
</a>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -88,13 +88,16 @@ function GreatFrontEndSection() {
|
|||
className={styles.sectionSponsorTitle}
|
||||
style={{ fontSize: 'var(--ifm-h2-font-size)' }}>
|
||||
<strong>
|
||||
Want to practice front end questions and reference answers from experienced ex-FAANG senior engineers? Top front end interview practice platform{' '}
|
||||
Want to practice front end questions and reference answers
|
||||
from experienced ex-FAANG senior engineers? Top front end
|
||||
interview practice platform{' '}
|
||||
<a
|
||||
href="https://www.greatfrontend.com/?utm_source=frontendinterviewhandbook&utm_medium=referral&utm_content=homepage&fpr=frontendinterviewhandbook"
|
||||
style={{ color: '#fff', textDecoration: 'underline' }}>
|
||||
GreatFrontEnd
|
||||
</a>{' '}
|
||||
is now offering 25% off their lifetime plan! Try out their free questions today:
|
||||
is now offering 25% off their lifetime plan! Try out their
|
||||
free questions today:
|
||||
</strong>
|
||||
</h2>
|
||||
<div className="margin-vert--lg">
|
||||
|
|
|
|||
Loading…
Reference in New Issue