From 00a9e33a3f720deee4c75fef64c6d7d63e713d91 Mon Sep 17 00:00:00 2001 From: Yangshun Date: Sun, 2 Feb 2025 15:12:32 +0800 Subject: [PATCH] misc: fix typos --- .../contents/algorithms/en-US.mdx | 2 +- .../contents/algorithms/pt-BR.mdx | 4 ++-- .../front-end-interview-guidebook/contents/quiz/en-US.mdx | 2 +- .../en-US.mdx | 8 ++++---- .../pt-BR.mdx | 8 ++++---- .../zh-CN.mdx | 8 ++++---- packages/system-design/contents/framework/en-US.mdx | 2 +- .../system-design/contents/types-of-questions/en-US.mdx | 8 ++++---- 8 files changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/front-end-interview-guidebook/contents/algorithms/en-US.mdx b/packages/front-end-interview-guidebook/contents/algorithms/en-US.mdx index d9dcf3f21..6c309610a 100644 --- a/packages/front-end-interview-guidebook/contents/algorithms/en-US.mdx +++ b/packages/front-end-interview-guidebook/contents/algorithms/en-US.mdx @@ -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) | -* `n` is the number of elements in the array and `m`` is the number of +* `n` is the number of elements in the array and `m` is the number of elements to be added. ### `Map` diff --git a/packages/front-end-interview-guidebook/contents/algorithms/pt-BR.mdx b/packages/front-end-interview-guidebook/contents/algorithms/pt-BR.mdx index 37ff06fdc..f1070bdd8 100644 --- a/packages/front-end-interview-guidebook/contents/algorithms/pt-BR.mdx +++ b/packages/front-end-interview-guidebook/contents/algorithms/pt-BR.mdx @@ -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) | -* `n` é o número de elementos do array e `m`` é o número de elementos -a serem adicionados. +* `n` é o número de elementos do array e `m` é o número de elementos a +serem adicionados. ### `Map` diff --git a/packages/front-end-interview-guidebook/contents/quiz/en-US.mdx b/packages/front-end-interview-guidebook/contents/quiz/en-US.mdx index c306c29b9..949c43dba 100644 --- a/packages/front-end-interview-guidebook/contents/quiz/en-US.mdx +++ b/packages/front-end-interview-guidebook/contents/quiz/en-US.mdx @@ -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 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 index 886280a8e..7e44c05e8 100644 --- 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 @@ -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 (
@@ -302,14 +302,14 @@ function Slider({ value, label, theme }) { type="range" value={value} style={{ - height: finalTheme.height, + height: mergedTheme.height, }} />
); } -; +; ``` 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. 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 index 5fc9274f8..64ebd87dc 100644 --- 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 @@ -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 (
@@ -299,14 +299,14 @@ function Slider({ value, label, theme }) { type="range" value={value} style={{ - height: finalTheme.height, + height: mergedTheme.height, }} />
); } -; +; ``` 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. 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 index ada31ec24..21bb6428a 100644 --- 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 @@ -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 (
@@ -296,14 +296,14 @@ function Slider({ value, label, theme }) { type="range" value={value} style={{ - height: finalTheme.height, + height: mergedTheme.height, }} />
); } -; +; ``` 然而，由于没有使用有冲突的样式的类，而且内联样式的特异性比类高，所以没有特异性冲突，内联样式将获胜。 然而，需要支持的选项数量可能真的会迅速增长。 内联样式也存在于每个组件实例的 DOM 中，如果这个组件在一个页面中被渲染了数百/数千次，这可能对性能不利。 diff --git a/packages/system-design/contents/framework/en-US.mdx b/packages/system-design/contents/framework/en-US.mdx index a799fad27..bdffdcf0b 100644 --- a/packages/system-design/contents/framework/en-US.mdx +++ b/packages/system-design/contents/framework/en-US.mdx @@ -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. diff --git a/packages/system-design/contents/types-of-questions/en-US.mdx b/packages/system-design/contents/types-of-questions/en-US.mdx index fc55cf615..4dc13c0fb 100644 --- a/packages/system-design/contents/types-of-questions/en-US.mdx +++ b/packages/system-design/contents/types-of-questions/en-US.mdx @@ -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