Ferramentas de Front End

15 Dec 2013

Essa é uma lista de coisas a se pensar na hora de criar um projeto front-end. Ela foi baseda na lista criada pelo meu colega Ignacio Duarte. A idéia é manter essa lista sempre atualizada e que ela seja um guia rápido de referência quando se está pensando em um projeto de front-end.

Documentando o código

Uma das maneiras mais fáceis de melhorar a comunicação entre desenvolvedores front-end e backend é criando um guia de estilo (Exemplos starbucks, Github ou Hackerhires) — essa é uma das principais razões pela qual o bootstrap está sendo tão usado.

Ferramentas que ajudam na criação de um guia de estilo:

  • Kneath é uma metodologia de documentação de CSS e geração de guia de estilos.
  • Nadarei KSS é a versão do Kneath KSS para Rails.
  • Kalei styleguide é uma solução client-side usando backbone, então não é necessário manter um servidor.
  • Pears usa wordpress e um tema específico para criar guia de estilos.
  • Styledocco usa NodeJS e Markdown para gerar guia de estilos em HTML e documentação.
  • Patter primer gera markup estilizado através de uma pasta com componentes markup.
  • Hologram é uma ruby gem para gerar guia de estilo baseado em comentários no CSS
  • TopDoc é uma ferramenta muito bem documentada para gerar guias de uso para CSS que utiliza uma maneira estrita de documentação de código CSS.
  • Alguns posts interessantes Warpspire, rjmetrics e UXMag.

Testes de regressão

CSS é um conjunto de regras que aplicado ao HTML produz um resultado bonito esteticamente.. Por essa razão não é fácil adicionar testes a um CSS framework. Mas existem maneiras de adicionar testes ao nosso pipeline, a maioria baseado em antes e depois usando comparações de imagens:

  • Wraith, uma ferramenta de comparação responsiva feita pelo pessoal da BCC.
  • PhantomCSS Testes de regressão visual usando PhantomJS.
  • Hardy Teste de CSS, baseado em Selenium e cucumber.
  • CSS critic, Um framework leve de testes de regressão para folhas de estilo.
  • Sikuli é uma ferramenta de testes de interface gráfica utilizando screenshots..
  • SuitCSS provê uma estrutura de testes para testar componentes visualmente.

Análise de código estática

Interessante para se utilizar antes de commitar, para verificar erros de sintaxe e redundância de código:

Implementação HTML+CSS

Depois de você configurar o seu projeto, é preciso pensar em como você irá escrever seu código CSS:

Outras considerações

Voltar para todos os posts Voltar para todos os posts
comments powered by Disqus