#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 pagina 404 personalizada
• Utilizar URLs amigaveis
• 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

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

####Cores

• Validar contraste de cor

####Formularios

• 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 index do google
• Adicionar sitemap.xml
• Adicionar robots.txt
• Planejar link building
• Oferecer um conteúdo relevante no elemento <tittle>
• 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
• Disponibilar 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 mobileOK 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