Prefere ouvir o conteúdo? Dê play no áudio abaixo ou faça download! 🤘💚
Se você está em busca de mudança de carreira ou quer aprender novas habilidades para dar um upgrade e aprimorar sua atual ocupação, as habilidades tecnológicas são tão necessárias que chegam a ser óbvias, ou seja, não há muito que pensar.
Começando pelos três maiores salários do mercado, um trabalho criativo e horário flexível, há uma grande lista de razões pelas quais a área de tecnologia é tão atrativa para trabalhar.
Mas o que significa trabalhar com tecnologia? Quando você ainda é novo na área parece que há muitos jargões para serem compreendidos.
O que é um/a dev Front End?
Esse artigo fez um excelente trabalho ao esclarecer os diferentes tipos de desenvolvedores web, mas, por enquanto, eu quero focar no perfil de dev front end.
Para resumir, os/as desenvolvedores/as front end codificam sites usando HTML, CSS e JavaScript (vamos falar mais sobre isso em breve).
Eles/as pegam o design e desenvolvem um site que funcione.
Se você deseja entrar na área de tecnologia, o desenvolvimento front end é uma maneira direta e versátil de chegar lá.
Você terá uma base específica de habilidades que o/a fará atraente para empregadores/as, de uma forma suficientemente ampla que permitirá que você encontre uma oportunidade de emprego que seja adequada para você.
Confie em mim, não há falta de demanda para dev front-end, em uma variedade de empregos e ambientes.
Para alguns/as de vocês, essa pequena introdução pode ser suficiente para iniciar sua própria odisseia de codificação.
Mas se você é como eu e tem facilidade para avançar com especificidades que você pode visualizar, uma visão geral das habilidades que você vai precisar na área do front end pode ser útil.
Uma rápida verificação das listagens de empregos atuais para desenvolvedores/as front-end mostra que há um conjunto claro e comum de habilidades que os/as empregadores/as estão procurando.
Enquanto escrevo isso, as três primeiras oportunidades de empregos para dev front end que encontrei no Glassdoor.com têm muito em comum.
Todos os três (One North Interactive, En Masse Entertainment e Aha! Labs) compartilham o HTML, o CSS e o Javascript na lista de qualificações exigidas. Você já deve ter percebido essa parte.
Mas existem alguns termos menos familiares flutuando pelas vagas de emprego. Sistema de controle de versões? Plataformas de pré-processamento? Frameworks?
Estes são termos que se tornarão familiares para você quando começar a aprender habilidades tecnológicas, mas, para facilitar, aqui está uma lista das 10 habilidades essenciais que todo/a dev front end precisa.
10 habilidades que todo/a dev front end deve ter
1. HTML/CSS
Eu sei, esses dois termos continuam aparecendo. Há uma boa razão para isso. Você não encontrará uma única postagem de vaga para dev front end que não exija proficiência nessas duas linguagens.
Mas vamos dar um passo atrás e ver o que são HTML e CSS.
HTML (HyperText Markup Language) é a linguagem padrão usada para criar páginas da web.
Uma linguagem de marcação, ou Markup, é a sua forma de fazer anotações em um documento digital que pode ser diferenciado de um texto comum.
É o bloco de construção mais básico e necessário para o desenvolvimento de sites.
CSS (Cascading Style Sheets) é a linguagem usada para apresentar o documento que você cria com o HTML.
Enquanto o HTML vem primeiro e cria a base da sua página, o CSS vem em seguida e é usado para criar o layout, a cor, as fontes e o estilo da página!
As duas linguagens são absolutamente essenciais para quem deseja ser um/a dev front end. Simplificando: sem HTML e CSS, sem desenvolvimento web.
2. JAVASCRIPT/JQUERY
Outra ferramenta majoritária na sua caixa de ferramentas de desenvolvedor/a front end será o JavaScript (JS).
Enquanto o HTML é uma linguagem de marcação e o CSS é uma linguagem de estilo das páginas, JS é a primeira linguagem de programação autêntica.
Qual é a diferença? O HTML e CSS determinam a apresentação de uma página, já o JS determina a sua função.
Em alguns casos, um site ou uma página da Web simples é suficiente, mas para situações em que você precisa de recursos interativos – como áudio e vídeo, jogos, rolagem e animações de página — o JS é a ferramenta que você usará para implementá-los (embora à medida que o CSS evolui, ele começa a incluir todos esses recursos também).
Uma coisa interessante para ter em mente sobre o JS é a existência de bibliotecas como o jQuery, uma coleção de plugins e extensões que tornam o uso do JS mais rápido e fácil no seu site.
O jQuery pega tarefas comuns que requerem várias linhas de código JS e as compacta em um formato que pode ser executado com uma única linha. Isso será uma grande ajuda quando você estiver codificando com JS.
A menos, é claro, que você não goste de economizar tempo. 😉
3. CSS E JAVASCRIPT FRAMEWORKS
Calma, nós já falamos de CSS e Javascript, certo?
Sim, nós falamos. Mas eles são uma parte tão importante do desenvolvimento front end que muitas outras habilidades que você precisará serão desenvolvidas a partir deles.
CSS e JavaScript Frameworks são coleções de arquivos CSS ou JS que fazem um monte de trabalho para você, fornecendo funcionalidades comuns (como fazer login em um site ou pesquisar em um blog).
Em vez de começar com um documento de texto VAZIO, você começa com um arquivo de código que já possui uma quantidade incrível de JS.
Os Frameworks têm seus pontos fortes e fracos — assim como todos nós! — E é importante escolher o melhor Framework para o tipo de site que você está construindo.
Por exemplo, alguns Frameworks JS são ótimos para construir interfaces de usuário complexas, enquanto outros se destacam na exibição de todo o conteúdo do seu site.
Para tornar as coisas ainda mais divertidas, você pode usar os Frameworks juntos. É comum emparelhar o Bootstrap com outro framework JavaScript, como o AngularJS. O conteúdo é tratado pelo Angular, e a aparência é tratada pelo Bootstrap (com algum CSS também).
Como você usará CSS e JS o tempo todo no desenvolvimento web e como muitos projetos começam com elementos e códigos de estilos semelhantes, o conhecimento dos frameworks é fundamental para ser um/a desenvolvedor/a eficiente.
4. PRÉ-PROCESSAMENTO DE CSS
Sim, outra habilidade relacionada ao CSS!
O CSS, por si só, embora essencial, às vezes pode ser limitador. Uma dessas limitações é o fato de que você não pode definir variáveis, funções ou executar operações aritméticas.
Esse é um problema quando um projeto cresce em escala e base de código, pois você logo estará perdendo muito tempo escrevendo código repetitivo para fazer alterações.
Assim como o framework CSS (e JS), o pré-processamento de CSS é outro meio de tornar sua vida como desenvolvedor/a mais fácil e flexível.
Usando um pré-processador CSS, como Sass, LESS ou Stylus, você consegue escrever o código na linguagem do pré-processador (permitindo que você faça coisas que podem ser uma grande dificuldade com o simples CSS). O pré-processador então converte esse código em CSS para que ele funcione no seu site.
Digamos que você decida ajustar o tom de azul que está usando em um site. Com um pré-processador de CSS, você só precisa alterar o valor hexadecimal em um só lugar, em vez de passar por todo o seu CSS e alterar os valores hexadecimais em todos os lugares.
5. CONTROLE DE VERSÃO/GIT
Chegando à metade dessa lista, finalmente vamos falar sobre uma habilidade que não tem HTML, CSS ou JS no título. Mas que, mesmo assim, está totalmente relacionada!
Depois de todo o trabalho duro com HTML, com estilo no CSS e programação com o JS, você terá passado por um grande número de revisões no seu desenvolvimento.
Se algo der errado ao longo do caminho, a última coisa que você deseja fazer é recomeçar o projeto.
O controle de versão é o processo de rastreamento e controle das alterações no seu código-fonte, para evitar que você tenha que começar tudo do início.
O software de controle de versão — como o robusto Git, de código aberto — é uma ferramenta que você usará para rastrear essas alterações, para que possa voltar para uma versão anterior do seu trabalho e descobrir o que deu errado, sem o risco de acabar com tudo o que você já fez.
Como você pode imaginar, essa é uma habilidade que você (e seus/suas possíveis clientes e empregadores/as) ficará muito feliz em ter.
6. DESIGN RESPONSIVO
Você se lembra do tempo em que usava apenas um dispositivo para acessar um website? Pois é, eu também não!
Os dias em que o Desktop (e até mesmo do laptop) era a única forma de visualizar websites estão tão distantes que nem vou falar sobre eles.
Hoje, nós usamos computadores, smartphones e tablets para acessar páginas da web. Você já reparou como essas páginas se ajustam ao dispositivo que você está usando sem que você precise fazer nada?
Isso acontece devido ao design responsivo. Compreender os princípios do design responsivo e como implementá-los na codificação é essencial para o desenvolvimento front end.
Uma coisa interessante a ter em mente em relação ao design responsivo é que ele é uma parte intrínseca dos frameworks CSS, como o Bootstrap acima mencionado.
Essas habilidades estão todas interconectadas e, à medida que você aprende uma, muitas vezes estará progredindo nas outras ao mesmo tempo.
7. TESTE E DEPURAÇÃO
Desde um site para a empresa de passear com cachorros da sua mãe até um site internacional de um banco online, os bugs são uma realidade do processo de desenvolvimento.
Para manter as coisas em andamento, você precisará testar seu código quanto a possíveis erros ao longo do caminho. Por isso, a habilidade de testar e depurar faz parte da lista de skills essenciais para desenvolvedores/as front end.
Existem alguns métodos de teste diferentes para o desenvolvimento web.
O teste funcional analisa uma parte específica de uma funcionalidade do seu site (como um formulário ou banco de dados) e garante que ele faça tudo o que você codificou.
O teste de unidade é outro método. Ele testa o menor pedaço do código responsável por uma coisa no seu site e o examina individualmente para garantir a operação correta.
O teste é uma coisa muito importante no processo de desenvolvimento front end, mas, felizmente, é uma atividade para a qual existem frameworks para ajudar.
Programas como Mocha e Jasmine foram projetados para acelerar e simplificar seu processo de teste.
8. FERRAMENTAS DE DESENVOLVIMENTO DO NAVEGADOR
Os usuários acabarão interagindo com seus sites por meio de um navegador da web. A maneira como seu site é renderizado por esses navegadores será fundamental para definir se seu trabalho será um sucesso ou não.
Da mesma forma que os testes e a depuração mencionados acima, todos os navegadores modernos são equipados com ferramentas de desenvolvedor/a.
Essas ferramentas permitem testar e ajustar suas páginas no próprio navegador, de maneiras específicas em relação a como o navegador está interpretando seu código.
Os detalhes variam de navegador para navegador, mas as ferramentas de dev para navegador geralmente consistem em um inspetor e um console JavaScript.
O inspetor permite que você veja como é o tempo de execução do HTML na sua página, qual CSS está associado a cada elemento da página e também permite editar seu HTML e CSS e ver as alterações ativas à medida que ocorrem.
O console JS permite visualizar quaisquer erros que ocorram enquanto o navegador tenta executar seu código JS.
9. FERRAMENTAS DE AUTOMAÇÃO E BUILD/DESEMPENHO WEB
Você pode estar vendo um padrão de que HTML, CSS e JavaScript são as três principais ferramentas para um/a dev front end.
Enquanto isso, a maioria das outras habilidades ajuda a tornar essas ferramentas mais eficientes ou a testar seu site e corrigir erros. A tendência continua aqui com as ferramentas de build e automação e desempenho web.
Você pode codificar o site mais legal de todos os tempos, mas se ele apresentar um desempenho lento para o usuário, isso não terá valor.
O desempenho web está relacionado à quantidade de tempo que o site leva para carregar.
Se você estiver tendo problemas com o desempenho, é possível seguir algumas etapas para aprimorá-lo, como otimizar imagens (dimensionar e compactar imagens para obter um desempenho máximo na Web) e reduzir CSS e JavaScript (remover todos os caracteres desnecessários do seu código sem alterar a funcionalidade).
A realização dessas tarefas que levam a um melhor desempenho web pode ser outro problema, mas é aí que entram as ferramentas de build e automação.
Programas como Grunt e gulp podem ser usados para automatizar a otimização de imagem, a redução de CSS e JS e outras tarefas que melhorem o desempenho do site.
Na busca contínua por eficiência, será do seu interesse se familiarizar com essas ferramentas.
10. LINHA DE COMANDOS
De várias maneiras, a proliferação de interfaces gráficas de usuário (GUIs) na computação foi uma das melhores coisas que já aconteceram.
Afinal, quem quer digitar linhas de comandos em uma tela estática para acessar uma máquina? É muito mais fácil apontar e clicar em um menu interativo e animado.
As GUIs também podem ser atraentes quando se trata de desenvolvimento e codificação web. E elas geralmente são boas e úteis. Mas uma GUI terá suas limitações para alguns aplicativos específicos.
Haverá momentos em que você precisará abrir um terminal no seu computador onde poderá digitar comandos (Linha de Comandos) para obter o que precisa.
Essa é a diferença entre seu computador apenas produzir o que está disponível na superfície e ser capaz de obter o que você precisa trabalhando com suas próprias mãos.
Mesmo que a maior parte do seu trabalho ainda seja realizada por meio de uma GUI, você adicionará um grande valor às suas habilidades de front end se dominar a linha de comandos.
Leia também: 10 projetos de desenvolvimento para melhorar seu portfólio e aprender a programar
SOFT SKILLS!
Por mais fácil que seja focar nas novas e sofisticadas habilidades necessárias em uma carreira tecnológica, existem algumas skills familiares que você não deve ignorar.
De volta às vagas de emprego para dev front end do Glassdoor.com, a oportunidade da empresa One North, por exemplo, cita, antes de qualquer habilidade técnica, o seguinte:
“Respeito e admiração pela cultura, processo e habilidade do desenvolvimento web, bem como entendimento da experiência do cliente, valorizando o que é necessário para construir relacionamentos de longo prazo.”
Assim como:
“Um talento especial para o trabalho em equipe e para trabalhar com pessoas em todas as áreas da agência.”
E:
“Habilidades de comunicação escrita e verbal necessárias para articular efetivamente a sua equipe de tecnologia”.
No final das contas, esses tipos de soft skills são tão essenciais para a tecnologia quanto para qualquer outro setor.
Não se esqueça de continuar aprimorando seu profissionalismo enquanto segue seu caminho para uma nova carreira no campo mais legal e inovador do mercado!
Este é um artigo traduzido, você pode acessar a versão original em inglês aqui.
Todos os créditos para a autora: Scott Morris
Last modified: 01/04/2020