mirror
/
front-end-interview-handbook
mirror of https://github.com/yangshun/front-end-interview-handbook.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

i18n: update guides again

This commit is contained in:
Yangshun 2023-07-06 12:47:36 +08:00
parent 56d2912454
commit 02f30d937b
15 changed files with 45 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -1,6 +1,9 @@
{
"scripts": {
"format-mdx": "prettier --write \"packages/**/en-US.{md,mdx}\""
"format-mdx": "prettier --write \"packages/**/en-US.{md,mdx}\"",
"i18n": "npm run i18n:download && npm run i18n:fix",
"i18n:download": "crowdin download",
"i18n:fix": "find packages -type f -name '*.mdx' -exec sed -i '' -e 's/{\\/_/{\\/*/g' -e 's/_\\/}/\\*\\/}/g' {} +"
},
"devDependencies": {
"prettier": "^2.7.1"

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

@ -183,7 +183,7 @@ For questions on problem solving or drive for results, interviewers will most li
Tailoring the above sample story to answer specific questions.
{/_ TODO: Gina _/}
{/* TODO: Gina */}
- 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?

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

@ -183,7 +183,7 @@ description: 描述：学习如何回答有关前端/网络开发人员/软件
将上述样本故事调整为回答特定问题。
{/_ TODO: Gina _/}
{/* TODO: Gina */}
- 你能告诉我一次你必须使用数据来驱动工程决策的经历吗？
- 你可以提供一个你必须解决和修复复杂问题的项目的例子吗？

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

@ -13,7 +13,7 @@ Although algorithmic coding questions aren't specific to front end, the skills n
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
## Exemplos
- Reverse a linked list.
- Determine if a string contains balanced brackets.

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

@ -38,11 +38,11 @@ At certain companies, you could be asked to write all required code on the white
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 |
| Environment | Preview | Execute Code | Add 3rd Party Dependencies |
| ------------------ | -------- | ------------- | --------------------------- |
| Online code editor | Não | Situational | Usually no |
| IDEs | Sim | Sim | Sim |
| Whiteboard | Não | Não | Não |
## General Coding Tips

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

@ -10,7 +10,7 @@ These JavaScript coding questions tend to be practical in nature and can come in
1. Implement standard built-in classes or methods in the JavaScript language.
2. Implement a utility function/class commonly found in popular libraries.
## Examples
## Exemplos
### JavaScript Standard Built-in Classes/methods

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

@ -109,18 +109,18 @@ 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 |
| Twitter | Yes | Yes | Yes | Yes | Yes | Yes |
| Uber | Unknown | Unknown | Yes | Yes | Unknown | Yes |
| Airbnb | Não | Sim | Sim | Sim | Não | Sim |
| Amazon | Sim | Sim | Sim | Sim | Sim | Sim |
| Apple | Sim | Sim | Sim | Sim | Unknown | 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 | Unknown | 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 | Unknown | Unknown | Sim | Sim | Unknown | Sim |
**Question Type Legend**

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

@ -5,7 +5,7 @@ description: Guide to preparing for quiz-style front end interview questions —
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.
## Examples
## Exemplos
- [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)

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

@ -38,7 +38,7 @@ It is common for people to make the mistake of not providing enough details abou
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.
- **Performance**: Performance improvements made and the resulting gains in percentage. Ex. 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.
@ -95,6 +95,6 @@ The front end domain advances pretty fast with new JavaScript frameworks and CSS
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
## Resumo
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.

4
packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/pt-BR.mdx
View File

@ -355,7 +355,7 @@ The developer can define a value for `--gfe-slider-font-size` globally via the `
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 _/}
{/* TODO: Section on manipulation of component after initialization */}
## Internationalization (i18n)
@ -371,4 +371,4 @@ Some languages (e.g. Arabic, Hebrew) are read from right-to-left and the UI has
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. _/}
{/* TODO: Give examples of how to implement RTL. */}

6
packages/front-end-interview-guidebook/contents/user-interface-components-api-design-principles/zh-CN.mdx
View File

@ -117,7 +117,7 @@ function Slider({ className, value }) {
}
```
通过类注入，开发者可以将组件的文本`color`改为red\`。
通过类注入，开发者可以将组件的文本`color`改为`red`。
如果组件内有许多DOM元素，一个`className` prop 是不够的，你也可以为不同元素的`className` 设置多个不同名称的 prop：
@ -352,7 +352,7 @@ function Slider({ value, label }) {
在React中，render props 是一个组件用来知道要渲染什么的函数prop。 它对于将行为和表现形式分开是很有用的。 许多行为/无头UI库，如[Radix](https://www.radix-ui.com/)、[Headless UI](https://headlessui.com/)和[Reach UI](https://reach.tech/menu-button)大量使用了render props。
{/_ TODO: 关于初始化后组件操作的部分 _/}
{/* TODO: Section on manipulation of component after initialization */}
## 国际化 (i18n)
@ -368,4 +368,4 @@ function Slider({ value, label }) {
使用[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)。
{/_ TODO: 举例说明如何实现RTL。 _/}
{/* TODO: Give examples of how to implement RTL. */}

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

@ -69,7 +69,7 @@ Is your CSS written in a scalable and easy-to-understand manner?
- **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
## Experiência de Usuário
Does your UI provide a great user experience?
@ -82,7 +82,7 @@ Does your UI provide a great user experience?
- `<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
## Rede
Does your UI handle the unpredictable nature of network requests and conditions?
@ -99,7 +99,7 @@ Does your UI handle the unpredictable nature of network requests and conditions?
- **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)
## Acessibilidade (a11y)
Handling accessibility in UI is a huge plus and in some cases a requirement for senior engineers.
@ -137,7 +137,7 @@ There's probably not enough time to handle all edge cases scenarios in your code
- Truncate the excess content and show an ellipsis. The `word-break` CSS property will come in handy useful.
- Limit the content to the first X characters/words and hide the excess content behind a "Show More" button.
## Performance
## Desempenho
- **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.
@ -145,7 +145,7 @@ There's probably not enough time to handle all edge cases scenarios in your code
- **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
## Segurança
- **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://developer.mozilla.org/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).

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

@ -7,7 +7,7 @@ User interface coding interviews will involve candidates writing HTML, CSS and J
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.
## Examples
## Exemplos
### User Interface Components/Widgets/Layouts

10
packages/system-design/contents/framework/zh-CN.mdx
View File

@ -11,11 +11,11 @@ In the context of front end system design interviews, the systems you are asked
## What is RADIO about?
1. **Requirements Exploration**: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions.
2. **Architecture/High-level Design**: Identify the key components of the product and how they are related to each other.
3. **Data Model**: Describe the various data entities, the fields they contain and which component(s) they belong to.
1. **需求探索**：通过提出一些澄清问题，深入了解问题，并确定范围。
2. **架构/高层设计**：确定产品的关键组件及其相互关系。
3. **数据模型**：描述各种数据实体、它们所包含的字段以及它们属于哪个组件。
4. **Interface Definition (API)**: Define the interface (API) between components in the product, functionality of each API, their parameters and responses.
5. **Optimizations and Deep Dive**: Discuss about possible optimization opportunities and specific areas of interest when building the product.
5. **优化和深度挖掘**：讨论在构建产品时可能存在的优化机会和特定的感兴趣的领域。
## Requirements Exploration
@ -175,7 +175,7 @@ Using the [News Feed](/questions/system-design/news-feed-facebook) example yet a
| ----------- | ------------------------------------ |
| HTTP Method | `GET` |
| Path | `/feed` |
| Description | Fetches the feed results for a user. |
| 描述 | Fetches the feed results for a user. |
#### Parameters

2
packages/system-design/contents/introduction/zh-CN.mdx
View File

@ -25,7 +25,7 @@ In traditional Software Engineer system design interviews, candidates will be as
| Data Model | SQL Schema | Application state |
| Type of APIs between components | Network (Any protocol) | Network (HTTP, WebSocket), JavaScript functions |
| Focus areas | Scalability, Reliability, Availability | Performance, User Experience, Accessibility, Internationalization |
| Less important (Can treat as a black box) | Client | Server |
| Less important (Can treat as a black box) | 客户端 | Server |
_Read more on the differences between Front End and Back End System Design Interviews on [Zhenghao's blog](https://www.zhenghao.io/posts/system-design-interviews)._