/front-end-checklist

:construction: work in progress.

MIT LicenseMIT

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

Obrigatório

Opcional

Acessibilidade

Marcação

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

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 <tittle>
  • Oferecer um conteúdo relevante nas <meta description="">

Marcação

Validação de rich snippets

Testes

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

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

Créditos

Autores

Afonso Pacifer | Dani Guerrato | Bruno Pulis --- | --- | --- | --- | --- | --- | --- Afonso Pacifer | Dani Guerrato| Bruno Pulis

Referências

Licença

MIT Licence © Afonso Pacifer