Como se tornar um desenvolvedor Frontend sênior

Olá Habr! Apresento a você a tradução do artigo "Um guia prático para se tornar um desenvolvedor sênior de front-end", de Seifeldin Mahjoub.

A quarentena pode ser seu ponto alto

Existem várias definições para o título de "Sênior" e variam de empresa para empresa. E, é claro, são necessárias muitas habilidades, tanto as duras quanto as leves. Chris Coeur escreveu um artigo sobre as características e tendências comportamentais que um desenvolvedor sênior de front-end deve ter, o que dá uma boa imagem em geral.

Neste artigo, abordaremos 13 coisas que você pode fazer no ambiente atual, para que, quando tudo acabar, você possa se tornar um desenvolvedor front-end sênior.

1. Domine o básico

O Senjor deve estar muito confortável com HTML, JS e CSS. Além disso, eles devem estar familiarizados com os conceitos básicos de como a Internet funciona, incluindo navegadores, redes e servidores.

Isso significa que conceitos como protótipos, pop-ups de eventos, pilha de chamadas, promessa e es6 não são palavras vazias para você. O mesmo vale para CSS, animações, sistemas de grade, convenções de nomes e especificações.

Você precisa conhecer vários conceitos; abaixo, você pode encontrar alguns recursos que podem ser revisados ​​e preencher o conhecimento que lhe falta, pelo menos por enquanto. Referência CSS , Referência HTML , Fundamentos de Javascript , Manual do Frontend .

2. Comece lendo a documentação.

A maioria dos desenvolvedores é curiosa e quer ir direto para escrever código e experimentar com ele. Tudo isso é bom e divertido, mas não é a maneira mais eficaz de dominar uma estrutura ou ferramentas.

. , , .

, , .

. , , win-win.

3.

CLI, angular-cli create-react-app.

, .

, , , . 'nice-to-have' , , , git .

, , (webpack/parcel), .

4. (style guide)

, , .

Style guide (Best practices), .

, , , vue-eslint-plugin.

5. Devtools

— . , , , .

, , , , , DOM .

dev tools console.log debugger.

6.

Vue React . , .

, DOM . DOM DOM-.

, , , .

( Vue), , Vuejs, .

7.

— . .

.

Advance Vuejs Component Patterns
Advanced React Component Patterns .

8.

— .

, , , , , .

, react-hooks, , Vue, Vue-composition API Mixins.

, .

9.

, , .

, , , , .

, flux pattern, event emissions callbacks props.

Vue-.

10. -

, , , , , .

, , , .

unit , snapshot e2e .

.

11.

- , , . , .

, , , .

, . , React, Angular, Vue Stencil, . , .

12.

, , , . , .

, , Jamstack, accessibility, , , service workers, , .

13.

, , . , , .

-, , , , , .

. , . , .

P.S. :

, . , , . .

!