misc: fix typos
This commit is contained in:
Yangshun
parent
0b8d949154
commit
00a9e33a3f
|
|
@ -64,7 +64,7 @@ Since the DOM is a tree, prioritize learning about trees and the various tree tr
|
|||
| `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
|
||||
<sup>*</sup> `n` is the number of elements in the array and `m` is the number of
|
||||
elements to be added.
|
||||
|
||||
### `Map`
|
||||
|
|
|
|||
|
|
@ -61,8 +61,8 @@ Como o DOM é uma árvore, priorize aprender sobre árvores e os diversos algori
|
|||
| `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.
|
||||
<sup>*</sup> `n` é o número de elementos do array e `m` é o número de elementos a
|
||||
serem adicionados.
|
||||
|
||||
### `Map`
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ seo_description: Guide to preparing for quiz-style front end interview 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 regurgitating.
|
||||
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
|
||||
|
||||
|
|
|
|||
|
|
@ -286,14 +286,14 @@ const defaultTheme = { color: 'black', height: 12 };
|
|||
|
||||
function Slider({ value, label, theme }) {
|
||||
// Combine with default.
|
||||
const finalTheme = { ...defaultTheme, ...theme };
|
||||
const mergedTheme = { ...defaultTheme, ...theme };
|
||||
|
||||
return (
|
||||
<div className="gfe-slider">
|
||||
<label
|
||||
for={id}
|
||||
style={{
|
||||
color: finalTheme.color,
|
||||
color: mergedTheme.color,
|
||||
}}>
|
||||
{label}
|
||||
</label>
|
||||
|
|
@ -302,14 +302,14 @@ function Slider({ value, label, theme }) {
|
|||
type="range"
|
||||
value={value}
|
||||
style={{
|
||||
height: finalTheme.height,
|
||||
height: mergedTheme.height,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<Slider themeOptions={{ color: 'red', height: 24 }} {...props} />;
|
||||
<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.
|
||||
|
|
|
|||
|
|
@ -283,14 +283,14 @@ const defaultTheme = { color: 'black', height: 12 };
|
|||
|
||||
function Slider({ value, label, theme }) {
|
||||
// Combinar com o padrão.
|
||||
const finalTheme = { ...defaultTheme, ...theme };
|
||||
const mergedTheme = { ...defaultTheme, ...theme };
|
||||
|
||||
return (
|
||||
<div className="gfe-slider">
|
||||
<label
|
||||
for={id}
|
||||
style={{
|
||||
color: finalTheme.color,
|
||||
color: mergedTheme.color,
|
||||
}}>
|
||||
{label}
|
||||
</label>
|
||||
|
|
@ -299,14 +299,14 @@ function Slider({ value, label, theme }) {
|
|||
type="range"
|
||||
value={value}
|
||||
style={{
|
||||
height: finalTheme.height,
|
||||
height: mergedTheme.height,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<Slider themeOptions={{ color: 'red', height: 24 }} {...props} />;
|
||||
<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.
|
||||
|
|
|
|||
|
|
@ -280,14 +280,14 @@ const defaultTheme = { color: 'black', height: 12 };
|
|||
|
||||
function Slider({ value, label, theme }) {
|
||||
// Combine with default.
|
||||
const finalTheme = { ...defaultTheme, ...theme };
|
||||
const mergedTheme = { ...defaultTheme, ...theme };
|
||||
|
||||
return (
|
||||
<div className="gfe-slider">
|
||||
<label
|
||||
for={id}
|
||||
style={{
|
||||
color: finalTheme.color,
|
||||
color: mergedTheme.color,
|
||||
}}>
|
||||
{label}
|
||||
</label>
|
||||
|
|
@ -296,14 +296,14 @@ function Slider({ value, label, theme }) {
|
|||
type="range"
|
||||
value={value}
|
||||
style={{
|
||||
height: finalTheme.height,
|
||||
height: mergedTheme.height,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<Slider themeOptions={{ color: 'red', height: 24 }} {...props} />;
|
||||
<Slider theme={{ color: 'red', height: 24 }} {...props} />;
|
||||
```
|
||||
|
||||
然而，由于没有使用有冲突的样式的类，而且内联样式的特异性比类高，所以没有特异性冲突，内联样式将获胜。 然而，需要支持的选项数量可能真的会迅速增长。 内联样式也存在于每个组件实例的 DOM 中，如果这个组件在一个页面中被渲染了数百/数千次，这可能对性能不利。
|
||||
|
|
|
|||
|
|
@ -217,7 +217,7 @@ A feed response is a paginated list so the API expects pagination parameters.
|
|||
}
|
||||
```
|
||||
|
||||
### Client-elient API example
|
||||
### 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -47,11 +47,11 @@ It is an expectation of Front End Engineers to be able to build the various UI c
|
|||
|
||||
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 code for one or more of the following purposes:
|
||||
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.
|
||||
1. Describe the component hierarchy
|
||||
1. Describe the shape of the component state
|
||||
1. Explain some non-trivial logic within the component
|
||||
|
||||
```jsx
|
||||
<ImageCarousel
|
||||
|
|
|
|||
Loading…
Reference in New Issue