Seu código, estiloso
If you prefer to read in another language, this article was also published in english. Click HERE to access!
Introdução
Houve um tempo no qual criar sites era mais difícil e o float dominava o mundo… era uma época sombria e cheia de terrores. Mas, não só em questão de linguagens a tecnologia evoluiu, ótimas ferramentas surgiram para facilitar a vida do dev.
Trazendo consigo funções que os navegadores não fornecem nativamente ou uma visão mais amigável das já existentes, as extensões para navegadores são as amigas que todo desenvolvedor deveria ter.
Pensando nisso, separei 5 extensões que podem te ajudar principalmente na questão da estilização do site, possibilitando você a selecionar cores com o mouse, medir distâncias entre elementos e muito mais. Além de um belo de um bônus no final… o que tá esperando 😉?
1. ColorZilla
Cores são um ponto fundamental em qualquer site, pois equilibram o estilo e dá um toque único, pessoal ou marcante.
ColorZilla é uma extensão que surgiu primeiro para o Mozilla Firefox e ficou famosa por facilitar o trabalho com cores no navegador, possibilitando a inspeção da paleta de cores do site, provendo um poderoso gerador de gradiente em CSS e umas coisas mais.
Caso não precise de algo tão robusto, o Firefox possui um selecionador de cores nativamente. Ele se encontra no DevTools, na aba Inspetor.
2. CSS Peeper
Acha a inspeção de CSS por meio do DevTools pouco prática ou intimidadora? O CSS Peeper chega para tornar a inspeção de estilos mais fácil e elegante. Ele também, de maneira inteligente, extrai a paleta de cores do site e facilita a exportação de seus assets.
Essa extensão não está disponível para o Firefox e, infelizmente, não encontrei alternativas a ela.
3. Dimensions
Medir as distâncias entre os elementos em um site nunca foi tão fácil com Dimensions. Ao ativar a extensão, o seu mouse se torna o ponto de partida de dois eixos que são usados para calcular os espaços.
Essa extensão te possibilita ainda a fazer medições dentro de imagens, sendo de grande ajuda quando se tem um mockup em .png ou .jpg por exemplo.
Mockup, se tratando de design, é um protótipo / modelo / rascunho de um dado projeto, sendo usados principamente para adquirir feedback dos usuários e ter uma visão geral do mesmo.
4. Web Developer
O Web Developer provê uma série de funcionalidades extras que podem não estar presentes no seu browser. Note que, não só ferramentas envolvendo CSS são adicionadas, mas que tocam em vários pontos se tratando de desenvolvimento de sites que podem ser bem úteis.
Ela também é uma extensão que foi feita originalmente para o Firefox e, devido ao seu sucesso, foi portada para o navegador da Google.
5. WhatFont
Com o intuito de facilitar a inspeção das tipografias na web chega o WhatFont, bastando simplesmente ativar a extensão e clicar em cima do texto sobre o qual quer saber as informações. É simples, elegante e extremamente útil.
A extensão CSS Peeper (citada mais acima) também traz algumas informações ao se inspecionar algum texto com ele, sendo a principal diferença de informações que essas extensões trazem é que a primeira provê o letter-spacing quanto a outra o font-style como umas das informações.
Como o CSS Peeper não está disponível em todos os navegadores, achei relevante incluir esta extensão na lista.
Bônus: Lighthouse
Essa é uma ferramenta open-source criada pelo Google que analisa um determinado site e dá pontuações de acordo com 5 quesitos: Performance, Acessibilidade, Boas Práticas, SEO e suporte como PWA.
Em questão de CSS, atente-se mais a pontuação dos 3 primeiros quesitos citados acima: construa um site responsivo, usando assets otimizados para web e se aproveite de bons contrastes para não prejudicar na leitura de seus conteúdos.
Sendo uma ótima maneira de se manter atento se seu site está bom e dentro dos padrões da web, o Lighthouse já vêm integrado ao Google Chrome, possuindo uma extensão oficial para que qualquer baseado em Chromium possa ter essa funcionalidade.
A Gigante das Buscas não levou essa extensão para as lojas da concorrência. Mas, por ser open-source, Foram criadas duas alternativas para o Firefox. Porém, nenhuma delas consegue avaliar sites rodando localmente. Uma solução para isso pode ser instalar e usar o Lighthouse via NPM em seus projetos.
Firefox - Lighthouse Report Generator
Conclusão
Para finalizar, preciso esclarecer e alertar você para alguns pontos importantes.
- Admito que, por gosto pessoal e estilo de workflow, não utilizo atualmente as extensões 2 e 4 listadas acima, mas achei que poderia vir a ser útil a alguém e testei todas antes de escrever este texto.
- Sim, extensões podem trazer muitas funcionalidades novas. Porém, isso tem um custo e geralmente é o impacto negativo na performance do navegador e no carregamento das páginas.
- Tome cuidado! Há extensões com más intenções, podendo espiar seu histórico de navegação, acessar dados sensíveis indevidamente ou outras coisas igualmente ruins. Não saia instalando qualquer uma, veja as avaliações, leia os comentários, pesquise sobre ela.
E, como nem só de CSS viverá o dev, um passarinho me contou que mais dicas de extensões virão por aí 🙃!
Feedback!
Sinta-se a vontade para dizer o que achou desse artigo, fazer perguntas, apontar algum assunto que não ficou muito bem explicado ou que faltou ser falado, sugerir outros tópicos e complementar o que já foi dito. Até a próxima!
