Pitch: Passei 1 mês desenvolvendo do zero meu primeiro pacote NPM e esse foi o resultado
A ideia de criar esse projeto surgiu quando eu encontrei o React Doctor (https://github.com/millionco/react-doctor), eu gostei muito desse projeto e pensei em uma forma de trazer a proposta dele pra fora do React, foi aí que eu criei o Web Doctor.
O Web Doctor analisa os códigos HTML, CSS e JS e procura por oportunidades de melhoria de performance, aumento da acessibilidade e erros críticos na segurança do site.
Abaixo vou listas algumas das várias checagens que o Web Doctor realiza:
- Checa o peso real e formato das imagens utilizadas, recomendando compressão ou o uso de formatos modernos (WebP/AVIF).
- Verifica se o
<body/>possui a estrutura semântica mínima obrigatória (<header/>,<nav/>,<main/>,<footer/>). - Alerta sobre o uso de tags antigas e atributos que quebram a acessibilidade.
- Encontra regras vazias no CSS.
- Avisa sobre o uso de
!importantno CSS. - Identifica e alerta práticas perigosas no JS, como o uso de
eval().
O pacote ainda está em desenvolvimento e o meu objetivo é transformá-lo em uma verdadeira consultoria de código estático. As próximas ideias que eu vou implementar são:
- Checagem de hierarquia de títulos, para garantir que o documento não pule níveis lógicos (ex: ir de um
<h1/>direto para um<h3/>). - Calcular a densidade semântica para avisar quando o arquivo tem excesso de
<div/>em comparação com tags estruturais. - Identificar classes declaradas no CSS que não estão sendo usadas em nenhuma tag do HTML analisado.
- Checagem de contraste de cores.
Se você tiver alguma ideia de implementação ou quiser apenas opinar sobre o projeto, pode comentar.
Link do projeto no NPM: https://www.npmjs.com/package/web-doctor-cli
Link do repositório: https://github.com/VictorFrancelino/web-doctor-cli