Que o desenvolvimento web está em constante evolução não é segredo nem mesmo para os usuários mais comuns da tecnologia. A cada dia, novas ferramentas, novos frameworks e novas soluções surgem para resolver os novos problemas em que a evolução consequentemente é responsável.

Recentemente, eu estava desenvolvendo uma aplicação para um cliente no trabalho e utilizei várias das minhas extensões para gerar um relatório que me faça melhorar a qualidade da aplicação em um modo geral.

Neste artigo, vou compartilhar algumas das ferramentas mais eficazes para otimizar seu fluxo de trabalho como desenvolvedor, com base na minha experiência na criação de aplicações web. Além disso, considerei também as necessidades mais comuns que eu enfrentei quando precisei de algum dado que me fosse útil para elevar a qualidade das encomendas. As ferramentas não estão em ordem do mais útil para menos útil, apresentei-as sem ordenação lógica.

Lembrando que, você encontrará o download de todas essas extensões neste próprio artigo nos dois principais navegadores da internet, vamos nessa! 😎

1 - Lighthouse

O Lighthouse é uma ferramente poderosa para desenvolvedores web extremamente necessária para o desenvolvedor que busca evoluir o nível das aplicações que ele trabalha, utilizando frameworks para o desenvolvimento ou não.

Sim, ele gera relatórios, e esses relatórios são separados por diferentes categorias. As principais coisas nas quais o Lighthouse leva em consideração ao testar uma aplicação são: Perfomance, Acessibilidade, Boas práticas, e o SEO.

Além dos relatórios separados por categorias, dentro dessa categoria específica, ele mostra o que pode ser aprimorado para melhorar a nota da sua aplicação no teste, e a forma com que o Lighthouse calcula isso, foi documentada e você pode se aprofundar mais lendo a documentação oficial da extensão. Você também pode acessar o Lighthouse pelo próprio console do navegador, mas eu particularmente prefiro a extensão instalada.

Você terá uma chance de aprender sobre uma aplicação de forma mais avançada, a medida que estuda como as seguintes propriedades funcionam:

• First Contentful Paint(FCP)
• Large Contentfull Paint(LCP)
• SI (Speed Index)
• TBT (Total Blocking Time)
• CLS (Cumulative Layout Shift)

Os mais importantes, para você que está iniciando neste mundo, recomendo que como indrodução aprenda o FCP e o LCP, após isso, siga a ordem natural no aprendizado da lista de cima para baixo.

Aprenda também pela calculadora oficial da extensão: Lighthouse Calculator

Introdução ao Lighthouse: Visão geral, o que é o Lighthouse?

Como o cálculo funciona: Introdução

Baixe a extensão Lighthouse

• Chrome: Lighthouse para Chrome
• Firefox: Lighthouse para Firefox

2 - Wapplyzer

O Wapplyzer é uma extensão multiplataforma que tem como objetivo mostrar ao desenvolvedor quais são as tecnologias que a aplicação web que está sendo visualizada que a compõe.

Isso se torna útil, principalmente, quando há um projeto no qual você gostou muito do resultado final, e pretende descobrir a tecnologia que foi utilizada para criar aquele site. Não é segredo que eu, particularmente utilizo Nuxt.Js 3.0 para criar as minhas aplicações hoje, desta forma, caso você encontre um website que eu desenvolvi recentemente, encontrará tudo que eu utilizei na criação do site.

Como é possível visualizar na imagem, você por conseguinte concluí que as categorias organizam as tecnologias em que o site contém, e essas categorias são:

• Frameworks Javascript utilizados
• Linguagem de Programação
• Scripts utilizados
• UI Framework (Front-end)
• Diversos (Outros que não necessariamente se enquadram nas categorias anteriores)

Para você que é mais radical e -zoa todo mundo que usa o tema light~ não gosta de utilizar o tema claro para visualizar elementos na web, você também pode optar por trocar o tema.

Encontre mais informações sobre a extensão: Site do Wapplyzer

Baixe a extensão Wappalyzer

• Chrome: Wappalyzer para Chrome
• Firefox: Wappalyzer para Firefox

3 - Landmarks

Você já ouviu falar nas Landmarks? As Landmarks são simplesmente as linhas de divisão de conteúdo que indicam ao navegador como o conteúdo está distribuído na página.

Geralmente, aqueles websites que possuem uma distribuição correta das Landmarks, indicam uma estruturação correta da aplicação, do mesmo modo um HTML semântico e organizado.

Ao analisar a imagem acima, perceba como a extensão analisa o layout com precisão. No menu expandido à direita, ao marcar a caixinha “Show all landmarks”, você poderá ver todas as linhas de uma vez, mas também pode optar por visualizar uma por vez.

Veja mais sobre esta extensão: Site do Landmarks

Baixe a extensão Landmarks

• Chrome: Landmarks para Chrome
• Firefox: Landmarks para Firefox

4 - WhatFont

Whatfont é uma importante ferramenta que nos permite a encontrar qualquer fonte presente na web. É uma espécie de “pesquisador interativo”.

Lembra daquela fonte que você viu em um site e queria descobrir o nome dela sem perder um bom tempo buscando no código fonte? Sim, essa extensão resolve este problema.

Ele identifica, o nome da fonte, o peso, estilo, tamanho, cor, estilo da fonte o line-height e também disponibiliza uma pré visualização abaixo das propriedades.

Baixe a extensão WhatFont:

• Chrome: WhatFont Chrome
• Firefox: WhatFont Firefox

5 - Colorzilla

Seguindo a mesma linha do WhatFont, nós como desenvolvedores web Front-end, muitas vezes necessitamos de alguma ferramenta que seja capaz de capturar as cores de algum elemento na página. Para fins práticos, o Colorzilla é uma excelente opção, e possui a maior nota na loja do Chrome para aplicativos deste segmento.

Ele possui várias opções disponíveis para a captura de cores. A principal opção, seria a captura de cores com precisão, clicando em “Escolher cor da página”, você libera uma espécie de “lupa” que é capaz de capturar a cor até mesmo dos pixels que compõem algum elemento.

Eu particularmente não tive uma boa experiência com outras extensões de captura de cor, esta, por mais que antiga, funcionou para o que eu precisei naquele momento. A minha recomendação neste caso, vem mais pela praticidade, não necessariamente por algo a mais que a extensão poderia proporcionar.

Baixe a extensão Colorzilla:

• Chrome: Colorzilla para Chrome
• Firefox: Colorzilla para Firefox

6 - Ah, Foque-se (pegou mal?)

Alguém mais tem problemas com foco na hora de trabalhar em casa com desenvolvimento de aplicações? Eu sou uma dessas pessoas, por isso utilizei esta extensão que me proporcionou uma melhora significativa no que diz respeito ao foco no meu trabalho.

O principal objetivo do Stayfocusd é bloquear sites que podem te distrair durante o seu trabalho. As principais funções dele são:

• Geração de relatórios dos sites que você utiliza (para descobrir quanto tempo você passou nele)
• Bloqueador de sites (bloqueia os sites que você não gostaria de mais acessar)
• Modo de foco (Para você que quer criar uma lista de sites bloqueados e ativar em uma hora específica)
• Require Challange (Desafio requerido para você não desativar a extensão facilmente)
• Import/Export config (Faça a importação e exportação de uma configuração pré estabelecida, configure apenas uma vez em todos os dispositivos)

O que eu particularmente mais gosto nessa extensão, é o fato dela gerar os relatórios mensais de consumo dos sites que eu visito. Com eles, eu posso definir se estou “gastando tempo” em sites que não são produtivos ao meu trabalho para depois ter o poder de bloquea-los após a descoberta com os próprios relatórios gerados pela extensão.

Baixe a extensão StayFocusd:

• Chrome: StayFocusd para Chrome
• Firefox: Incompatível, infelizmente sem grandes alternativas.

7 - Picture in Picture

Picture in Picture, é uma extensão de navegador que é capaz de capturar um vídeo de uma página a sua escolha e transforma-lo em uma versão “móvel”, participando de toda a tela e sobrepondo qualquer aplicativo da área de trabalho.

Ao realizar uma aula da faculdade, de algum curso de programação, ou até mesmo acompanhar um vídeo enquanto trabalha em algum projeto na sua IDE, a extensão se torna bem prática para a exibição de vídeos em segundo plano.

Utilizando esta extensão, você pode redimensionar o tamanho do vídeo, para se ajustar na sua tela, adiantar um vídeo em uma playlist, pausar, silenciar, adiantar ou retroceder em um tempo específico, volume, ou voltar para a página inicial onde o vídeo foi primeiramente localizado.

Para iniciar a extensão, basta clicar no ícone da extensão na mesma página em que o seu vídeo está localizado, e a extensão será ativada automaticamente.

Baixe a extensão Picture in Picture:

• Chrome: Picture in Picture para Chrome
• Firefox: Incompatível, mas encontrei uma alternativa: para o Firefox

Conclusão

Neste artigo, vimos sobre diversas ferramentas úteis que podemos utilizar para o nosso trabalho como desenvolvedores. Espero que alguma dessas dicas possam ter servido para você.

Novos artigos estão por vir! conto com a sua presença. Se você gostou, me siga e deixe o seu coração para me incentivar a trazer mais informação para vocês.

Grato, Victor Augusto Klecz.

Conheça a Cherry Code -> https://cherrycode.com.br