contents(pt-BR): update and replace broken links of frontend interview playbook (#483)
This commit is contained in:
DanielJames0302
GitHub
parent
b4f0800d42
commit
759369039c
|
|
@ -11,7 +11,7 @@ Perguntas de codificação algorítmica são exatamente as questões que você p
|
|||
|
||||
Embora as perguntas de codificação algorítmica não sejam específicas para o front-end, as habilidades necessárias para se destacar nessas questões - pensamento analítico sólido, comunicação eficaz, compreensão sólida das estruturas de dados e algoritmos comuns, boas práticas de codificação - ainda são habilidades cruciais que bons Engenheiros Front-End devem possuir. Bons Engenheiros Front-End também são bons Engenheiros de Software, e bons Engenheiros de Software devem ter domínio sobre estruturas de dados e algoritmos básicos. Portanto, não é surpresa que muitas empresas ainda façam perguntas de codificação algorítmica durante o processo de entrevista. Familiaridade com estruturas de dados e algoritmos também é útil para resolver perguntas de codificação em JavaScript e perguntas de codificação de Interface do Usuário.
|
||||
|
||||
Existem muitos recursos disponíveis que abordam entrevistas de codificação algorítmica, e como elas não são específicas para o front end, não entraremos em muitos detalhes nesta página. Recomendamos consultar o [Manual de Entrevistas Técnicas] \(https://www.techinterviewhandbook.org) como um recurso gratuito se você deseja aprender mais sobre entrevistas de codificação algorítmica.
|
||||
Existem muitos recursos disponíveis que abordam entrevistas de codificação algorítmica, e como elas não são específicas para o front end, não entraremos em muitos detalhes nesta página. Recomendamos consultar o [Manual de Entrevistas Técnicas](https://www.techinterviewhandbook.org) como um recurso gratuito se você deseja aprender mais sobre entrevistas de codificação algorítmica.
|
||||
|
||||
## Exemplos
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ Existem muitos recursos disponíveis que abordam entrevistas de codificação al
|
|||
3. Combine o estudo e a prática para um único tópico.
|
||||
4. Acompanhe a prática com folhas de consulta de entrevista de codificação para internalizar as ações essenciais e os pontos importantes para lembrar.
|
||||
|
||||
Consulte o guia passo a passo do Manual de Entrevistas Técnicas sobre como se preparar para entrevistas de codificação algorítmica. (https://www.techinterviewhandbook.org/coding-interview-prep/).
|
||||
Consulte o guia passo a passo do [Manual de Entrevistas Técnicas sobre como se preparar para entrevistas de codificação algorítmica.](https://www.techinterviewhandbook.org/coding-interview-prep/)
|
||||
|
||||
## Conceitos Importantes
|
||||
|
||||
|
|
@ -115,4 +115,4 @@ Durante entrevistas de codificação algorítmica, os entrevistadores estão ava
|
|||
|
||||
## Questões de Prática
|
||||
|
||||
Atualmente, a melhor plataforma para praticar perguntas algorítmicas é indiscutivelmente o LeetCode. No entanto, o GreatFrontEnd fornece algumas [perguntas práticas para Estruturas de Dados e Algoritmos](/questions/js/coding/data-structures-algorithms) onde você pode praticar a implementação de estruturas de dados comuns ([Stack](/questions/javascript/stack), [Queue](/questions/javascript/queue)) e algoritmos ([Pesquisa Binária](/questions/javascript/binary-search), [Merge Sort](/questions/javascript/merge-sort)), etc em JavaScript.
|
||||
Atualmente, a melhor plataforma para praticar perguntas algorítmicas é indiscutivelmente o LeetCode. No entanto, o GreatFrontEnd fornece algumas [perguntas práticas para Estruturas de Dados e Algoritmos](/questions/javascript-interview-questions/algo-coding) onde você pode praticar a implementação de estruturas de dados comuns ([Stack](/questions/algo/stack), [Queue](/questions/algo/queue)) e algoritmos ([Binary Search](/questions/algo/binary-search), [Merge Sort](/questions/algo/merge-sort)), etc em JavaScript.
|
||||
|
|
|
|||
|
|
@ -59,13 +59,13 @@ Aqui está um resumo dos diversos ambientes de codificação e o que você pode
|
|||
|
||||
Continue lendo para obter dicas para cada tipo de entrevista de codificação:
|
||||
|
||||
- [Codificação Algoritmica](/front-end-interview-guidebook/algoritms)
|
||||
- [Codificação JavaScript](/front-end-interview-guidebook/javascript)
|
||||
- [Codificação de Interface do Usuário](/front-end-interview-guidebook/user-interface)
|
||||
- [Codificação Algoritmica](/front-end-interview-playbook/algorithms)
|
||||
- [Codificação JavaScript](/front-end-interview-playbook/javascript)
|
||||
- [Codificação de Interface do Usuário](/front-end-interview-playbook/user-interface)
|
||||
|
||||
## Perguntas de Prática
|
||||
|
||||
GreatFrontEnd possui uma longa lista de [perguntas de codificação](/prepare/coding) que você pode praticar, e definitivamente deve reservar um tempo para conferi-las.
|
||||
GreatFrontEnd possui uma longa lista de [perguntas de codificação](/questions) que você pode praticar, e definitivamente deve reservar um tempo para conferi-las.
|
||||
|
||||
Observe que, de propósito, deixamos algumas das perguntas vagas e não apresentamos todos os requisitos completos na pergunta. Isso é para treiná-lo a pensar adiante e considerar quais possíveis coisas você deve observar ao trabalhar na solução.
|
||||
|
||||
|
|
|
|||
|
|
@ -66,8 +66,8 @@ Entrevistas de codificação em JavaScript compartilham muitas semelhanças com
|
|||
|
||||
## Como se preparar para entrevistas de codificação em JavaScript
|
||||
|
||||
1. Esteja familiarizado com os conceitos de HTML, CSS, JavaScript e DOM, consultando os "Conceitos Importantes" abaixo. A seção de [Quiz](/front-end-interview-guidebook/quiz) também pode ser um bom começo, já que você pode ser questionado sobre esses conceitos na forma de perguntas de quiz durante a codificação.
|
||||
2. Escolha um [plano de estudos](/get-started) e pratique as [perguntas de codificação JavaScript](/questions/js/coding/utilities) recomendadas para o plano de estudos selecionado. Também está tudo bem estudar um tópico específico enquanto você está fazendo as perguntas.
|
||||
1. Esteja familiarizado com os conceitos de HTML, CSS, JavaScript e DOM, consultando os "Conceitos Importantes" abaixo. A seção de [Quiz](/front-end-interview-playbook/quiz) também pode ser um bom começo, já que você pode ser questionado sobre esses conceitos na forma de perguntas de quiz durante a codificação.
|
||||
2. Escolha um [plano de estudos](/interviews/get-started) e pratique as [perguntas de codificação JavaScript](/questions/javascript-interview-questions/javascript-functions) recomendadas para o plano de estudos selecionado. Também está tudo bem estudar um tópico específico enquanto você está fazendo as perguntas.
|
||||
|
||||
## Conceitos Importantes
|
||||
|
||||
|
|
@ -114,6 +114,6 @@ Pela minha experiência, as melhores perguntas de entrevista de codificação em
|
|||
- [Deep Clone](/questions/javascript/deep-clone)
|
||||
- [Seleção de Dados](/questions/javascript/data-seletion)
|
||||
|
||||
A GreatFrontEnd possui uma [lista abrangente de perguntas de codificação JavaScript](/questions/js/coding/utilities) que você pode praticar. Também existem casos de testes automatizados que você pode executar em seu código para verificar a correção e soluções escritas por ex-engenheiros sênior da FAANG.
|
||||
A GreatFrontEnd possui uma [lista abrangente de perguntas de codificação JavaScript](/questions/javascript-interview-questions/javascript-functions) que você pode praticar. Também existem casos de testes automatizados que você pode executar em seu código para verificar a correção e soluções escritas por ex-engenheiros sênior da FAANG.
|
||||
|
||||
Note que, de propósito, somos vagos em algumas das perguntas e não apresentamos os requisitos completos de imediato na descrição da pergunta. No entanto, abordaremos o máximo possível na solução. Pode ser frustrante ao ler as soluções perceber que você deixou passar algumas coisas, mas isso o treina a pensar adiante e considerar quais são as áreas possíveis que você deve observar ao trabalhar na solução. É mais proveitoso descobrir durante a preparação do que durante entrevistas de verdade.
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@ No entanto, muitos dos recursos existentes para entrevistas de engenharia de sof
|
|||
|
||||
Não tenha medo! O GreatFrontEnd tem como objetivo ser o melhor recurso para os Engenheiros Front-End terem sucesso em suas entrevistas de Front-End, sendo uma plataforma única para fornecer aos Engenheiros Front-End o conhecimento e a prática necessários. No GreatFrontEnd, os leitores podem:
|
||||
|
||||
1. Aprender como criar um **currículo incrível adaptado para listagens de empregos em Engenharia Front-End**. (Link: /guia-de-entrevista-para-front-end/resume).
|
||||
1. Aprender como criar um [**currículo incrível adaptado para listagens de empregos em Engenharia Front-End**](/front-end-interview-playbook/resume).
|
||||
2. Aprender **conceitos e técnicas importantes de front-end** que se aplicam a todos os tipos de perguntas.
|
||||
3. Preparar-se para os tipos mais comuns de perguntas em entrevistas de **front-end** (codificação, design de sistema, quiz, comportamental).
|
||||
4. [**Perguntas de prática**](/perguntas) em diversos formatos comuns de entrevistas de front-end, juntamente com **soluções de alta qualidade** escritas por ex-engenheiros sêniores da FAANG.
|
||||
5. Navegar pelos [**planos de estudo sugeridos**](/comece) e adotar uma **abordagem de preparação estruturada**.
|
||||
4. [**Perguntas de prática**](/questions) em diversos formatos comuns de entrevistas de front-end, juntamente com **soluções de alta qualidade** escritas por ex-engenheiros sêniores da FAANG.
|
||||
5. Navegar pelos [**planos de estudo sugeridos**](/interviews/dashboard) e adotar uma **abordagem de preparação estruturada**.
|
||||
|
||||
## Preparar um Currículo Incrível
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ Seu currículo é a primeira oportunidade de causar uma impressão em potenciais
|
|||
|
||||
Se você está enfrentando dificuldades para conseguir entrevistas para os empregos aos quais se candidata, apesar de ter as qualificações necessárias, pode ser devido ao seu currículo. Mesmo candidatos altamente qualificados podem não saber como apresentar eficazmente suas realizações em seus currículos e, por isso, podem não ser selecionados. É importante lembrar que a falta de qualificação nem sempre é a razão para não ser selecionado; às vezes, é simplesmente uma questão de má apresentação e não incluir o conteúdo importante. Depois de passar pelo processo de triagem do currículo, suas realizações passadas se tornam secundárias e suas habilidades técnicas se tornam primordiais, as quais podem ser aprendidas e aprimoradas. Portanto, conseguir uma oportunidade inicial ao enviar um currículo excelente que represente você de forma eficaz é extremamente importante.
|
||||
|
||||
Embora existam recursos disponíveis sobre como criar um bom currículo de Engenharia de Software, como o [Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/) e o [FAANG Tech Leads' Resume Handbook](https://www.faangtechleads.com/resume/handbook), eles são gerais e não específicos para Engenheiros Front-End. Nós escrevemos algumas [dicas sobre como adaptar o seu currículo para posições de Engenharia Front-End](/guia-de-entrevista-para-front-end/resume).
|
||||
Embora existam recursos disponíveis sobre como criar um bom currículo de Engenharia de Software, como o [Tech Interview Handbook](https://www.techinterviewhandbook.org/resume/) e o [FAANG Tech Leads' Resume Handbook](https://www.faangtechleads.com/resume/handbook), eles são gerais e não específicos para Engenheiros Front-End. Nós escrevemos algumas [dicas sobre como adaptar o seu currículo para posições de Engenharia Front-End](/front-end-interview-playbook/resume).
|
||||
|
||||
## Preparar por Tipos de Perguntas
|
||||
|
||||
|
|
@ -35,9 +35,9 @@ Cada formato de pergunta tem seus próprios desafios e peculiaridades. Vamos apr
|
|||
|
||||
Perguntas de codificação envolverão escrever código (óbvio!). No entanto, o código que você será solicitado a escrever e as plataformas nas quais você escreverá o código podem variar bastante. Você poderia ser questionado sobre:
|
||||
|
||||
1. **Codificação Algorítmica**: Resolver questões algorítmicas complicadas que avaliam sua compreensão de estruturas de dados, algoritmos e complexidade de tempo. [Leia sobre Entrevistas de Codificação Algorítmica.](/front-end-interview-guidebook/algorithms).
|
||||
2. **Codificação em JavaScript**: Implementar funções ou estruturas de dados em JavaScript relacionadas ao domínio de front-end e comumente usadas durante o desenvolvimento de front-end. [Leia sobre Entrevistas de Codificação em JavaScript.](/front-end-interview-guidebook/javascript).
|
||||
3. **Codificação de Interface de Usuário**: Construir interfaces de usuário (componentes, widgets, aplicativos) usando HTML, CSS e JavaScript, às vezes até mesmo usando frameworks JavaScript. [Leia sobre Entrevistas de Codificação de Interface de Usuário](/front-end-interview-guidebook/user-interface).
|
||||
1. **Codificação Algorítmica**: Resolver questões algorítmicas complicadas que avaliam sua compreensão de estruturas de dados, algoritmos e complexidade de tempo. [Leia sobre Entrevistas de Codificação Algorítmica.](/front-end-interview-playbook/algorithms).
|
||||
2. **Codificação em JavaScript**: Implementar funções ou estruturas de dados em JavaScript relacionadas ao domínio de front-end e comumente usadas durante o desenvolvimento de front-end. [Leia sobre Entrevistas de Codificação em JavaScript.](/front-end-interview-playbook/javascript).
|
||||
3. **Codificação de Interface de Usuário**: Construir interfaces de usuário (componentes, widgets, aplicativos) usando HTML, CSS e JavaScript, às vezes até mesmo usando frameworks JavaScript. [Leia sobre Entrevistas de Codificação de Interface de Usuário](/front-end-interview-playbook/user-interface).
|
||||
|
||||
As empresas estão seguindo a tendência de usar perguntas de codificação específicas do domínio e menos testes sobre algoritmos e estruturas de dados, pois as primeiras são mais relevantes para avaliar as habilidades essenciais necessárias para o trabalho em Engenharia Front-End.
|
||||
|
||||
|
|
@ -53,7 +53,7 @@ As entrevistas de design de sistema geralmente são concedidas apenas a candidat
|
|||
|
||||
Na maioria das vezes, Engenheiros Front-End serão solicitados a projetar aplicativos de cliente e componentes de interface de usuário complexos, pois esses produtos são mais relevantes para a Engenharia Front-End.
|
||||
|
||||
[Leia mais sobre Design de Sistema Front-End](/front-end-interview-guidebook/system-design)
|
||||
[Leia mais sobre Design de Sistema Front-End](/front-end-interview-playbook/system-design)
|
||||
|
||||
### Perguntas de Quiz
|
||||
|
||||
|
|
@ -61,7 +61,7 @@ Perguntas de quiz, também conhecidas como perguntas de trivia, são perguntas c
|
|||
|
||||
Normalmente, não haverá rodadas inteiras de entrevista apenas fazendo perguntas de quiz, mas elas podem ser apresentadas a você no meio de outras rodadas de entrevista.
|
||||
|
||||
[Leia mais sobre Perguntas de Quiz](/front-end-interview-guidebook/quiz).
|
||||
[Leia mais sobre Perguntas de Quiz](/front-end-interview-playbook/quiz).
|
||||
|
||||
## Perguntas/Entrevistas Comportamentais
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ Em entrevistas comportamentais, o entrevistador faz perguntas sobre seus comport
|
|||
|
||||
A ideia por trás das entrevistas comportamentais é que comportamentos e experiências passadas são bons indicadores de como alguém se comportará no futuro. Portanto, o entrevistador fará perguntas projetadas para fazer com que você descreva situações específicas que enfrentou e como lidou com elas, a fim de obter uma compreensão mais profunda sobre você, além de suas habilidades técnicas.
|
||||
|
||||
Entrevistas comportamentais são um tópico amplo por si só, e nós [escrevemos um guia completo sobre o assunto](/guia-de-entrevista-comportamental).
|
||||
Entrevistas comportamentais são um tópico amplo por si só, e nós [escrevemos um guia completo sobre o assunto](/behavioral-interview-playbook).
|
||||
|
||||
## Processo de Contratação Típico
|
||||
|
||||
|
|
@ -135,9 +135,9 @@ Aqui está um resumo dos tipos de perguntas feitas pelas principais empresas dos
|
|||
|
||||
Leia para descobrir como se preparar para os seguintes formatos de entrevista e tipos de perguntas relacionadas ao front-end:
|
||||
|
||||
- [Questões de codificação](/front-end-interview-guidebook/coding)
|
||||
- [Codificação Algoritmica](/front-end-interview-guidebook/algoritms)
|
||||
- [Questões de JavaScript](/front-end-interview-guidebook/javascript)
|
||||
- [Codificação de Interface do Usuário](/front-end-interview-guidebook/user-interface)
|
||||
- [Perguntas de Design do Sistema](/front-end-interview-guidebook/system-design)
|
||||
- [Perguntas do Quiz](/front-end-interview-guidebook/quiz)
|
||||
- [Questões de codificação](/front-end-interview-playbook/coding)
|
||||
- [Codificação Algoritmica](/front-end-interview-playbook/algorithms)
|
||||
- [Questões de JavaScript](/front-end-interview-playbook/javascript)
|
||||
- [Codificação de Interface do Usuário](/front-end-interview-playbook/user-interface)
|
||||
- [Perguntas de Design do Sistema](/front-end-interview-playbook/system-design)
|
||||
- [Perguntas do Quiz](/front-end-interview-playbook/quiz)
|
||||
|
|
|
|||
|
|
@ -51,6 +51,6 @@ Não recomendamos memorizar respostas para perguntas de quiz. É melhor realment
|
|||
|
||||
GreatFrontEnd contém uma lista de mais de 100 perguntas de quiz com soluções detalhadas escritas para cada uma delas.
|
||||
|
||||
- [Perguntas de Quiz de JavaScript](/questions/js/quiz)
|
||||
- [Perguntas de Quiz de JavaScript](/questions/js/quiz)
|
||||
- [Perguntas de Quiz de JavaScript](/questions/js/quiz)
|
||||
- [Perguntas de Quiz de JavaScript](/questions/javascript-interview-questions/quiz)
|
||||
- [Perguntas de Quiz de JavaScript](/questions/html-interview-questions/quiz)
|
||||
- [Perguntas de Quiz de JavaScript](/questions/css-interview-questions/quiz)
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@ description: Guia para se preparar para perguntas de Design de Sistemas em entre
|
|||
|
||||
Entrevistas de Design de Sistemas podem assumir diversas formas e abranger todo o stack de desenvolvimento. A GreatFrontEnd se concentra no **Design de Sistemas de Front-End**, ou seja, no design e arquitetura de sistemas de cliente e componentes de interface de usuário, em vez de sistemas distribuídos de back-end.
|
||||
|
||||
Nós escrevemos um guia abrangente de [Design de Sistemas de Front-End](/system-design), que você definitivamente deve conferir.
|
||||
Nós escrevemos um guia abrangente de [Design de Sistemas de Front-End](/front-end-system-design-playbook), que você definitivamente deve conferir.
|
||||
|
||||
## Projete seu sistema com as melhores práticas
|
||||
|
||||
Ao enfrentar uma entrevista de design de sistemas, independentemente se você está sendo solicitado a projetar aplicativos, jogos ou componentes de interface de usuário, há algumas coisas às quais prestar atenção especial. Inclua as dicas do nosso [User Interface Questions Cheatsheeto](/front-end-interview-guidebook/user-interface-questions-cheatsheet) e eleve seu desempenho em entrevistas de front-end.
|
||||
Ao enfrentar uma entrevista de design de sistemas, independentemente se você está sendo solicitado a projetar aplicativos, jogos ou componentes de interface de usuário, há algumas coisas às quais prestar atenção especial. Inclua as dicas do nosso [User Interface Questions Cheatsheeto](/front-end-interview-playbook/user-interface-questions-cheatsheet) e eleve seu desempenho em entrevistas de front-end.
|
||||
|
||||
## Perguntas de prática
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ Frequentemente, durante entrevistas de front-end, você será solicitado a const
|
|||
|
||||
### jQuery-style
|
||||
|
||||
Antes das modernas bibliotecas de IU JavaScript como [React](https://reactjs.org/), [Angular](https://angular.io/), e [Vue](https://vuejs.org/) aparecerem, [jQuery]\(https://jquery. om/) (e [jQuery UI](https://jqueryui.com/)) era a maneira mais popular de construir a interface do usuário. A jQuery UI popularizou a ideia de inicializar os componentes da UI através de "construtores" que envolvia dois argumentos:
|
||||
Antes das modernas bibliotecas de IU JavaScript como [React](https://reactjs.org/), [Angular](https://angular.io/), e [Vue](https://vuejs.org/) aparecerem, [jQuery](https://jquery.com) (e [jQuery UI](https://jqueryui.com/)) era a maneira mais popular de construir a interface do usuário. A jQuery UI popularizou a ideia de inicializar os componentes da UI através de "construtores" que envolvia dois argumentos:
|
||||
|
||||
1. **Elemento Raiz**: Um elemento raiz da DOM para renderizar o conteúdo.
|
||||
2. **Opções de Customização**: Opcionais, opções adicionais de customização, geralmente na forma de um objeto JavaScript simples.
|
||||
|
|
@ -43,7 +43,7 @@ O slider pode ser customizado passando um objeto JavaScript simples com opções
|
|||
|
||||
### Estilo JavaScript Puro
|
||||
|
||||
Não existe um estilo de JavaScript puro para inicializar componentes, uma vez que JavaScript puro não é um padrão ou framework. Mas se você já leu as soluções do GreatFrontEnd, para nossas [perguntas sobre codificação de UI](/questions/vanilla), você verá que a API que recomendamos é semelhante ao do jQuery, o construtor recebe um elemento raiz e opções:
|
||||
Não existe um estilo de JavaScript puro para inicializar componentes, uma vez que JavaScript puro não é um padrão ou framework. Mas se você já leu as soluções do GreatFrontEnd, para nossas [perguntas sobre codificação de UI](/questions/vanilla-javascript-interview-questions), você verá que a API que recomendamos é semelhante ao do jQuery, o construtor recebe um elemento raiz e opções:
|
||||
|
||||
```js
|
||||
function slider(rootEl, opções) {
|
||||
|
|
@ -315,13 +315,13 @@ O objeto de tema é apenas uma maneira de restringir a estilização a determina
|
|||
|
||||
### CSS Preprocessor Compilation
|
||||
|
||||
Bibliotecas de UI geralmente são escritas com pré-processadores de CSS como [Sass] \(https://sass-lang.com/) e [Less](https://lesscss.org/). [Bootstrap](https://getbootstrap.com/) é escrito com Sass e eles fornecem uma maneira de [personalizar as variáveis Sas]\(https://getbootstrap. om/docs/5.3/customize/sass/) usados para que os desenvolvedores possam gerar uma biblioteca de biblioteca de UI personalizada.
|
||||
Bibliotecas de UI geralmente são escritas com pré-processadores de CSS como [Sass](https://sass-lang.com/) e [Less](https://lesscss.org/). [Bootstrap](https://getbootstrap.com/) é escrito com Sass e eles fornecem uma maneira de [personalizar as variáveis Sas](https://getbootstrap.com/docs/5.3/customize/sass/) usados para que os desenvolvedores possam gerar uma biblioteca de biblioteca de UI personalizada.
|
||||
|
||||
Essa abordagem é excelente porque não depende de substituir seletores CSS para alcançar a personalização. Também há uma quantidade menor de CSS resultante e nenhum estilo redundante sobreposto. A desvantagem é que é necessário um passo de compilação.
|
||||
|
||||
### Variáveis CSS / Propriedades Personalizadas
|
||||
|
||||
[Variáveis CSS]\(https://developer.mozilla. rg/en-US/docs/Web/CSS/Using_CSS_custom_properties) (ou mais formalmente conhecido como propriedades personalizadas CSS) são entidades definidas por autores de CSS que contêm valores específicos para serem reutilizados através de um documento. A função `var()`, aceita valores de fallback se a variável determinada não estiver definida.
|
||||
[Variáveis CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (ou mais formalmente conhecido como propriedades personalizadas CSS) são entidades definidas por autores de CSS que contêm valores específicos para serem reutilizados através de um documento. A função `var()`, aceita valores de fallback se a variável determinada não estiver definida.
|
||||
|
||||
```jsx
|
||||
function Slider({ value, label }) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: Resumo de Perguntas de Interface de Usuário Front-End
|
|||
description: Principais dicas para melhorar as interfaces de usuário que você precisa construir durante entrevistas para desenvolvedores front-end/web - Estrutura de código, gerenciamento de estado, acessibilidade e muito mais.
|
||||
---
|
||||
|
||||
Aqui estão algumas dicas que você pode usar para melhorar as interfaces de usuário que você precisa construir ou projetar durante entrevistas para desenvolvedores front-end. Essas dicas podem ser aplicadas tanto a [Entrevistas de Codificação de Interface de Usuário](/front-end-interview-guidebook/user-interface) quanto a [Entrevistas de Design de Sistema Front End](/system-design/types-of-questions).
|
||||
Aqui estão algumas dicas que você pode usar para melhorar as interfaces de usuário que você precisa construir ou projetar durante entrevistas para desenvolvedores front-end. Essas dicas podem ser aplicadas tanto a [Entrevistas de Codificação de Interface de Usuário](/front-end-interview-playbook/user-interface) quanto a [Entrevistas de Design de Sistema Front End](/front-end-system-design-playbook/types-of-questions).
|
||||
|
||||
## Geral
|
||||
|
||||
|
|
@ -147,7 +147,7 @@ Provavelmente não há tempo suficiente para lidar com todos os cenários de cas
|
|||
|
||||
## Segurança
|
||||
|
||||
- **Scripting Cross-site (XSS)**: Evitar atribuir a [`Element.innerHTML`]\(https://developer.mozilla. rg/en-US/docs/Web/API/Element/innerHTML) ou `dangerouslySetInnerHTML` do React ao renderizar conteúdo no DOM se ele vier de usuários para impedir script entre sites, atribuir ao [`Node. extContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) ou use o método experimental[`Element.setHTML()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setHTML) em vez disso. Consulte o [Folha de Dicas de Prevenção de XSS do OWASP](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
|
||||
- **Scripting Cross-site (XSS)**: Evitar atribuir a [`Element.innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) ou `dangerouslySetInnerHTML` do React ao renderizar conteúdo no DOM se ele vier de usuários para impedir script entre sites, atribuir ao [`Node. extContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) ou use o método experimental[`Element.setHTML()`](https://webdocs.dev/en-us/docs/web/api/element/sethtml) em vez disso. Consulte o [Folha de Dicas de Prevenção de XSS do OWASP](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html)
|
||||
- **Codificação de saída para "Contextos de URL"**: Se a entrada fornecida pelo usuário puder ser usada em parâmetros de consulta de URL, use `encodeURIComponent` para evitar que valores indesejados façam parte da URL (por exemplo, parâmetros de consulta extras).
|
||||
- **Cross Site Request Forgery (CSRF)**: Consulte a [OWASP's XSS Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) para obter informações sobre prevenção de CSRF e outras vulnerabilidades de segurança.
|
||||
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ As interfaces de usuário que os candidatos são solicitados a codificar podem v
|
|||
|
||||
### User Interface Components/Widgets/Layouts
|
||||
|
||||
- Componentes: [Accordion]\(/questions/interface de usuário/acorda), [Tabs](/questions/interface/tabelas), [Widget de Classificação por Estrela](/questions/user-interface/star-rating), [Tweet](/questions/user-interface/tweet), Image Carousel.
|
||||
- Componentes: [Accordion](/questions/user-interface/accordion), [Tabs](/questions/user-interface/tabs), [Widget de Classificação por Estrela](/questions/user-interface/star-rating), [Tweet](/questions/user-interface/tweet), Image Carousel.
|
||||
- Widgets: [Relógio Digital](/questions/user-interface/digital-clock), [Relógio Analógico](/questions/user-interface/analog-clock).
|
||||
- Seções de Página: [Formulário de inscrição]\(/questions/interface do usuário-assinante-forma), [Grau Sagrado]\(/questions/interface do usuário-holy-grail)
|
||||
- Seções de Página: [Formulário de inscrição](/questions/user-interface/signup-form), [Grau Sagrado](/questions/user-interface/holy-grail)
|
||||
|
||||
### Apps/Jogos
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ Entrevistas de codificação de interface de usuário compartilham algumas semel
|
|||
4. Divida o problema em etapas/marcos que se construam uma sobre a outra. Comunique essa divisão ao seu entrevistador. Ao contrário das entrevistas de codificação tradicionais, o foco das entrevistas de codificação de Interface do Usuário geralmente está nos estados dos componentes e nas APIs, em vez de estruturas de dados complexas e algoritmos.
|
||||
5. Crie sua solução em código e explique seu código ao seu entrevistador enquanto estiver codificando.
|
||||
- Sempre que possível, teste seu código no navegador após cada marco ou recurso adicionado, em vez de fazer isso apenas no final.
|
||||
- Consulte a [Folha de Dicas de Perguntas de Interface do Usuário](/front-end-interview-guidebook/user-interface-questions-cheatsheet) para uma lista de coisas a serem observadas durante entrevistas de codificação de Interface do Usuário.
|
||||
- Consulte a [Folha de Dicas de Perguntas de Interface do Usuário](/front-end-interview-playbook/user-interface-questions-cheatsheet) para uma lista de coisas a serem observadas durante entrevistas de codificação de Interface do Usuário.
|
||||
6. Após codificar, leia seu código uma vez e tente identificar erros básicos, como erros de digitação, uso de variáveis antes de inicializá-las, uso incorreto de APIs, etc.
|
||||
7. Faça um esboço de alguns casos de teste básicos e alguns casos limite. Teste seu código com esses casos e determine se seu código os aprova. Se ele falhar, depure o(s) problema(s) e corrija-os.
|
||||
8. Explique qualquer compromisso que você tenha feito, casos que você explicitamente não tratou e como você melhoraria o código se tivesse mais tempo.
|
||||
|
|
@ -50,7 +50,7 @@ Entrevistas de codificação de interface de usuário compartilham algumas semel
|
|||
|
||||
## Como se preparar para entrevistas de codificação de Interface do Usuário
|
||||
|
||||
1. Esteja familiarizado com os tópicos listados em "Conceitos Importantes" abaixo. A seção de [Quiz](/front-end-interview-guidebook/quiz) também pode ser um bom começo, já que você pode ser questionado sobre esses conceitos na forma de perguntas de quiz durante a codificação.
|
||||
1. Esteja familiarizado com os tópicos listados em "Conceitos Importantes" abaixo. A seção de [Quiz](/front-end-interview-playbook/quiz) também pode ser um bom começo, já que você pode ser questionado sobre esses conceitos na forma de perguntas de quiz durante a codificação.
|
||||
2. É melhor aprender a construir interfaces de usuário tanto em JavaScript puro quanto em um framework de UI de sua escolha. A maioria das empresas permitirá o uso de frameworks de UI JavaScript, mas algumas empresas (por exemplo, o Google) podem exigir que você use apenas JavaScript puro.
|
||||
- **JavaScript Puro**: Aprenda as APIs de manipulação do DOM. No mínimo, você deve saber como criar novos elementos no DOM, adicionar classes/atributos a eles e adicionar elementos filhos. Se você tem experiência com [jQuery](https://jquery.com/), dê uma olhada em [You might not need jQuery](https://youmightnotneedjquery.com), um site que mostra como realizar operações comuns do jQuery em JavaScript puro. Você ficará agradavelmente surpreso ao descobrir que, com as APIs de navegadores modernos, realmente não há mais tanta necessidade do jQuery.
|
||||
- **Framework de Interface do Usuário em JavaScript**: Esteja familiarizado com um framework de UI de sua escolha. Mantenha-se com o framework com o qual você está mais familiarizado. Não há necessidade e provavelmente não há tempo suficiente para aprender um novo framework. Se você é novo em frameworks de UI em JavaScript, [React](https://reactjs.org/) será nossa recomendação, pois é a biblioteca/framework mais popular para construir interfaces de usuário atualmente, e é a linguagem mais procurada pelas empresas ao contratar engenheiros front-end.
|
||||
|
|
@ -58,9 +58,9 @@ Entrevistas de codificação de interface de usuário compartilham algumas semel
|
|||
- **Escreva Vanilla CSS**: aprenda a escrever CSS sem depender de pré-processadores como Sass/Less. Nem todos os ambientes de codificação permitirão o uso de processadores, e as perguntas de entrevista provavelmente serão pequenas e não se beneficiarão muito dos recursos que os pré-processadores de CSS oferecem. A característica mais útil dos processadores de CSS é o uso de variáveis, que está disponível nativamente por meio das propriedades personalizadas de CSS (variáveis CSS).
|
||||
- **Adote uma convenção de nomenclatura CSS**: Considere adotar uma metodologia de nomenclatura CSS como [Block Element Modifier](https://getbem.com) ao escrever suas classes.
|
||||
4. Leia nossos guias detalhados de codificação de Interface do Usuário:
|
||||
- [Folha de perguntas de Interface do Usuário](/front-end-interview-guidebook/user-interface-questions-cheatsheet)
|
||||
- [Princípios de API Design de Componentes de Interface do Usuário](/front-end-interview-guidebook/user-interface-components-api-design-principles)
|
||||
5. Escolha um [plano de estudo](/get-started) e pratique as [perguntas de codificação de Interface do Usuário](/prepare/coding) recomendadas para o plano de estudo selecionado.
|
||||
- [Folha de perguntas de Interface do Usuário](/front-end-interview-playbook/user-interface-questions-cheatsheet)
|
||||
- [Princípios de API Design de Componentes de Interface do Usuário](/front-end-interview-playbook/user-interface-components-api-design-principles)
|
||||
5. Escolha um [plano de estudo](/interviews/get-started) e pratique as [perguntas de codificação de Interface do Usuário](/questions) recomendadas para o plano de estudo selecionado.
|
||||
- Dedique aproximadamente a mesma quantidade de tempo praticando a construção de componentes de interface do usuário e a construção de aplicativos/jogos. Ambos são igualmente importantes.
|
||||
|
||||
## Conceitos Importantes
|
||||
|
|
@ -90,21 +90,21 @@ As entrevistas de codificação de interface do usuário têm rubricas semelhant
|
|||
|
||||
Com base na experiência, as melhores perguntas de entrevista de interface do usuário para praticar, determinadas pela frequência e pelos conceitos importantes abordados são:
|
||||
|
||||
- [Lista de tarefas](/questions/interface/todo-list)
|
||||
- [Lista de tarefas](/questions/user-interface/todo-list)
|
||||
- [Formulário de Inscrição](/questions/user-interface/signup-form)
|
||||
- [Conversor de Temperatura](/questions/user-interface/temperature-converter)
|
||||
- [Barra de Progresso](/questions/user-interface/progress-bar)
|
||||
- [Relógio Analógico](/questions/interface/analog-clock)
|
||||
- [Relógio Analógico](/questions/user-interface/analog-clock)
|
||||
- [Quadro de Empregos](/questions/user-interface/job-board)
|
||||
- [Whack-a-mole](/questions/interface/whack-a-mole)
|
||||
- [Jogo da Velha](/questions/interface/whack-a-mole)
|
||||
- [Whack-a-mole](/questions/user-interface/whack-a-mole)
|
||||
- [Jogo da Velha](/questions/user-interface/whack-a-mole)
|
||||
- [Abas](/questions/user-interface/tabs)
|
||||
- Carrossel de Imagens
|
||||
- Autocompletar
|
||||
- Menu dropdown
|
||||
- Modal
|
||||
|
||||
"GreatFrontEnd possui uma [lista abrangente de perguntas de codificação de Interface de Usuário](/prepare/coding) que você pode praticar na sua estrutura de escolha (atualmente suporta JavaScript Puro e [React](https://reactjs.org/)).". Também fornecemos casos de teste manuais que você pode usar para testar seu código e verificar a correção, além de soluções escritas em várias estruturas de interface de usuário JavaScript por engenheiros sênior ex-FAANG. Testes automatizados não são fornecidos para perguntas de IU (Interface de Usuário) porque geralmente estão acoplados à implementação e são difíceis de serem testados com precisão por meio de testes automatizados. Além disso, durante entrevistas, provavelmente você terá que testar sua IU por si mesmo.
|
||||
"GreatFrontEnd possui uma [lista abrangente de perguntas de codificação de Interface de Usuário](/questions) que você pode praticar na sua estrutura de escolha (atualmente suporta JavaScript Puro e [React](https://reactjs.org/)).". Também fornecemos casos de teste manuais que você pode usar para testar seu código e verificar a correção, além de soluções escritas em várias estruturas de interface de usuário JavaScript por engenheiros sênior ex-FAANG. Testes automatizados não são fornecidos para perguntas de IU (Interface de Usuário) porque geralmente estão acoplados à implementação e são difíceis de serem testados com precisão por meio de testes automatizados. Além disso, durante entrevistas, provavelmente você terá que testar sua IU por si mesmo.
|
||||
|
||||
Muitas das perguntas de codificação do GreatFrontEnd também são divididas em estágios, que ficam progressivamente mais difíceis. Nas entrevistas, seu entrevistador pode solicitar explicitamente apenas a funcionalidade básica. No entanto, após concluir a funcionalidade básica, você pode tomar a iniciativa de adicionar mais recursos para aprimorar a versão básica e lidar com mais casos especiais. Um exemplo de uma pergunta dividida em estágios:
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue