5 Extensões do Chrome que Todos os Frontend Developers Deveriam Conhecer

Se você é desenvolvedor Frontend – ou sonha conseguir sua primeira vaga na área – venha conhecê-las!

Quem trabalha com desenvolvimento frontend utiliza diariamente o browser para poder ver o resultado final do seu trabalho. E como nós fazemos o código pensando na experiência do cliente, o ideal é usar o navegador que é mais usado para acessar o site para poder testar e debugar nosso código.

Inclusive, para quem não sabe, o Chrome é o navegador mais utilizado do mundo!

A empresa StatCounter fez uma pesquisa recentemente e concluiu que 65,24% dos sites são acessados via Chrome! Seguido por quase 20% acessado pelo Safari e outros com menos de 5% cada.

img-2


Nesse contexto, o Chrome tem várias extensões que auxiliam o desenvolvimento de software. Nesse artigo vou-te mostrar as que eu mais utilizo no meu dia a dia para melhorar minha produtividade e facilitar o trabalho.

Atenção! Leia esse artigo até ao final, porque vou dar uma dica valiosa para quem está procurando o primeiro emprego…


5 extensões do Chrome que todos os Frontend Developers deveriam conhecer


1.Wappalyzer

img-4


O Wappalyzer é muito útil, pois permite identificar as tecnologias que foram usadas para criar o site. O mais interessante é que ele mostra tanto a linguagem de programação que foi usada, a biblioteca/framework e também todas as ferramentas usadas na parte de Marketing e Segurança.


2.‘Check my Links

img-6


Com essa extensão, você consegue verificar se todos os links do seu site estão funcionando bem. ????

Sabe quando você clica em um link do site e ele mostra uma página com um “404 not found?”. Isso acontece porque a página que foi linkada para esse endereço não está no ar e não foi encontrada! 

Ao invés de ficar clicando em todos os links do site para ver se ele redireciona para alguma página válida, podemos apenas usar essa extensão que faz essa verificação para nós.


3.WhatFont

img-8


Com essa extensão você consegue descobrir qual é a fonte que qualquer site está usando.

No mundo do software, a gente sempre usa outros códigos, sites e apps como inspirações para criar novos. Então é muito interessante ter extensões como essa que facilitam na hora que você quer inspecionar o código fonte para conseguir replicar do seu lado!


4.Page Ruler

img-10


A Page Ruler é como ter uma régua virtual. Com esta extensão do Chrome, você consegue ter uma régua virtual para saber exatamente quantos pixel tem cada elemento que você precisa analisar.


5.Colorzilla

img-12


Por último, mas não menos importante, trago-lhe a Colorzilla. Com essa extensão você consegue saber exatamente a cor que é usada em uma determinada página ou imagem. É super útil e eu uso no meu dia a dia! Essa extensão dá a cor no formato RGB ou hexadecimal, então você consegue reproduzir exatamente a cor que você quiser.

Como é que o uso dessas extensões pode ajudar na busca do primeiro emprego?


Se você é ou quer ser desenvolvedor Frontend, essas extensões podem fazer a diferença na hora de procurar um emprego.

Você pode estar se perguntando, mas como Saty?

Eu vejo muita gente falando que quer um emprego na área, pedindo emprego, mas o que essas pessoas estão fazendo para se destacar no meio de tanta gente querendo um emprego?

Para esse caso gosto de fazer uma analogia ao mercado de ações: oferta e demanda. 

Se tem muita gente querendo o primeiro emprego e pouca vaga para júnior, a oferta vai ser maior que a demanda, então vai ficar mais concorrido. Já no caso para vagas de sênior é ao contrário, tem mais vagas que profissionais, então a oferta é menor que a demanda. 

Se você se enquadra no primeiro caso, para você conseguir a tão sonhada vaga, é preciso se destacar!

Ok, mas como se destacar?

Agora vou citar uma frase que eu gosto muito e tento levar como lema em várias áreas da minha vida:

“First give, then receive”

Traduzindo para o português seria algo como “Primeiro dê, e depois receba”. Colocando ela no contexto de emprego: o que você pode oferecer para a empresa antes de pedir um emprego?

Existem várias formas de abordar um recrutador ou uma pessoa de tecnologia que trabalha na empresa em que primeiro vai dar antes de receber. E uma delas é usando as extensões que eu sugeri aqui: faça um site clone do site da empresa que você tem vontade de entrar!


Primeiro: utilize o Wappalyzer para identificar as tecnologias que foram utilizadas no site


Assim você já consegue direcionar seus estudos para um ponto específico! Isso pode te ajudar nas próximas etapas também, principalmente na técnica, porque você vai ter experiência com as stacks que a empresa usa e também uma opinião formada sobre como foi o desenvolvimento.


Segundo: use o CheckMyLinks para validar se todos os links estão corretos no seu projeto


E digo mais, use essa extensão no site da empresa, quem sabe você pode acabar descobrindo algum bug e trazendo ele COM a solução para a sua entrevista! Uma dica importante aqui é: não só aponte os bugs no sistema que você quer entrar, mas sim aponte eles e venha com a sugestão de como resolver. Um profissional que só trás problemas não é bem visto, mas um profissional que traz soluções é um que as empresas mais almejam ter na equipe!


Terceiro: utilize o WhatFont, o PageRuler e o Colorzilla para conseguir manter o Layout o mais fiel possível ao original


Essas extensões são super úteis para conseguir pegar informações exatas sobre o layout e design do site que você está clonando ????


Últimas dicas antes de usar essas extensões para te ajudar a conseguir seu primeiro emprego


Com tudo pronto é quase hora de ir atrás dos recrutadores, mas antes tenha em atenção mais uns pontos de preparação:

  • Arrume seu LinkedIn, deixe ele atualizado, com uma foto de perfil bonita e profissional e também com palavras chaves para você ser encontrado;
  • Faça um currículo bem feito, com uma introdução sobre você, falando suas características principais, objetivos e uma pincelada sobre suas experiências;
  • Suba seu código no Github, escrevendo um README explicando as tecnologias usadas, um pouco sobre você e os próximos passos;
  • Escreva um texto legal para mandar para os recrutadores sobre esse projeto. Se você tiver achado um bug ou feito alguma melhoria é legal comentar também! (Aqui você pode procurar também pessoas que tem cargo de desenvolvedor sênior, CTO ou gerente para conversar!).


Para encerrar esse artigo queria deixar uma última mensagem: aprenda a lidar com frustrações.

Quem trabalha com TI tem que lidar diariamente com frustrações: código que não funciona, documentação incompleta, mudança no escopo do projeto… e na procura de vaga não é diferente!

Encare cada vaga como um desafio novo e uma nova oportunidade de se aperfeiçoar! Leve sempre em conta o quanto você está aprendendo em primeiro lugar! ???? 

E aí, achou essas dicas úteis? Me conta sobre as extensões que você costuma usar no seu dia a dia, fazendo um comentário na área abaixo.