Front-end Checklist

Uma checklist para ajudar os desenvolvedores Front-end a implementar as boas práticas.

Este repositório não é nenhum tipo de guia definitivo e nem tem a pretensão de ser. O objetivo é ter um bom ponto de partida para que cada um crie seu próprio checklist adaptado a suas necessidades, afinal, cada caso é um caso :D

Índice

• [ ] Design
• [ ] Usabilidade
• [ ] Acessibilidade
• [ ] SEO
• [ ] Web Performance Optimization
• [ ] Qualidade de Código
• [ ] Cross Browser
• [ ] AWD/RWD/Mobile
• [ ] Análises
• [ ] Workflow
• [ ] Mantenabilidade
• [ ] Outros Testes
• [ ] Créditos
• Autores
• Referências
• Licença

Design

• [ ] Criar guia de estilos

Usabilidade

Obrigatório

• [ ] Adicionar Favicons
• [ ] Adicionar página 404 personalizada
• [ ] Utilizar URLs amigáveis
• [ ] Utilizar um CSS alternativo que seja "Print friendly"

Opcional

• [ ] Adicionar pesquisa interna
• [ ] Integrar ao ambiente iOS
• [ ] Integrar ao ambiente Windows

Acessibilidade

Marcação

• [ ] Adicionar 'Salto de Conteúdo'
• [ ] Adicionar WAI-ARIA
• [ ] Validar WAI-ARIA

Semântica

• [ ] Utilizar corretamente a estrutura semântica <header>, <main>, <aside>, <footer>, <nav> etc...
• [ ] Use os Headings corretamente

Idioma

• [ ] Declare corretamente o atributo lang

Links

• [ ] Garantir que os links sempre tenham o evento :focus atrelado
• [ ] Garantir que os links sejam reconhecidos como links

Navegação

• [ ] Adicionar o evento :focus junto a todos os evento de :hover

Mídia

• [ ] Forneça transcrições de texto.
• [ ] Sincronize legendas com o vídeo.

Cores

• [ ] Validar contraste de cor

Formulários

• [ ] Vincular os labels a seus respectivos campos através da propriedade for.

• [ ] Relacione os elementos com fieldset e descreva o grupo com um legend adequado.

Imagens

• [ ] Adicionar o atributo alt com descrição coerente em todas as imagens.

JavaScript

• [ ] Unobtrusive JavaScript
• [ ] Alternativas sem JavaScript - fornecer alternativas para usuários sem JavaScript habilitado.

Testes

• [ ] Validar Acessibilidade
• [ ] Validar Contraste
• [ ] Testar navegação apenas com o teclado
• [ ] Testar diretamente no leitor de tela

SEO

Básico

• [ ] Submeter URL ao índice do Google
• [ ] Adicionar sitemap.xml
• [ ] Adicionar robots.txt
• [ ] Planejar link building
• [ ] Oferecer um conteúdo relevante no elemento <title>
• [ ] Oferecer um conteúdo relevante nas <meta description="">

Marcação

• [ ] Schema
• [ ] Open Graph Protocol
• [ ] Twitter Cards

Validação de rich snippets

• [ ] [Google Developers - Testing tool](https://developers.google.com/structured- data/testing-tool/)
• [ ] Facebook Developers - Debugger
• [ ] Twitter Developer - Card validator

Testes

• [ ] Verificar SEO - Site Analyzer e SEO SiteCheckop
• [ ] Google mobile friendly test
• [ ] W3C Semantic Validation
• [ ] W3C Internationalization Checker
• [ ] Google Webmaster Tools
• [ ] Bing Webmaster Tools

Web Performance Optimization

Básico

• [ ] Servir arquivos comprimidos através de Gzip
• [ ] Concatenar os arquivos CSS
• [ ] Concatenar os arquivos JS
• [ ] Minificar os arquivos HTML
• [ ] Minificar os arquivos CSS
• [ ] Minificar os arquivos JS
• [ ] Carregar assets estáticos através de um CDN
• [ ] Fazer cache do conteúdo estático
• [ ] Otimizar imagens
• [ ] Usar sprites sempre que possível (incluindo SVG)

CSS

• [ ] Manter animações na Composite Layer
• [ ] Evitar ao máximo utilizar o seletor universal *
• [ ] Não utilizar import (ao menos que seja com algum pré-processador)
• [ ] Criar expressões de seletores o menor possíveis
• [ ] Utilizar uma classe/ID como seletor e evitar selecionar os elementos diretamente ( .header/#header > header)

Validações e Testes

• [ ] Web Page Test
• [ ] Page Speed resultados 90+
• [ ] YSlow resultados 85+
• [ ] CSS Perf Test

Qualidade de código

• [ ] Validar HTML na W3C
• [ ] Validar CSS na W3C
• [ ] CSS Lint
• [ ] JS Hint

Cross-browser

• [ ] Definir quais browsers serão suportados
• [ ] Utilizar Autoprefixer
• [ ] Verifique o site/aplicação em todos os navegadores

AWD/RWD/Mobile

• [ ] Media Queries Mobile First
• [ ] Disponibilizar fotos para Retina Display
• [ ] Utilizar SVG em tudo o que possivel (SVG > icon fonts)
• [ ] Use input types corretos
• [ ] Use a meta-tag viewport da forma correta
• [ ] Pontuação mobile OK de 75+
• [ ] Validar no W3C Mobile Checker
• [ ] Teste em emuladores mobile
• [ ] Teste em dispositivos reais

Análises

• [ ] Adicionar análise de tráfego (Analytics)

Workflow

• [ ] Versionar o projeto corretamente
• [ ] Automatizar o máximo de tarefas possíveis
• [ ] Automatizar deploy

Mantenabilidade

• [ ] Nunca usar !important
• [ ] Focar o nome de seletores (Classes) sempre na função e nunca no conteúdo

Outros Testes

• [ ] Verificar links quebrados
• [ ] Verificar ortografia e gramática

Créditos

• [ ] Adicionar humans.txt
• [ ] Escolher e adicionar uma licença adequada

Autores

Afonso Pacifer	Dani Guerrato	Bruno Pulis

Referências

• a11y Project checklist
• Browser Diet
• Web Dev Checklist

Licença

MIT Licence © Afonso Pacifer