Boas práticas e automatização de tarefas no Front-end

B56c717edbe04635d111851fb62328a2?s=47 Tiago Porto
September 24, 2016

Boas práticas e automatização de tarefas no Front-end

B56c717edbe04635d111851fb62328a2?s=128

Tiago Porto

September 24, 2016
Tweet

Transcript

  1. Boas práticas e 24 Set 2016 automatização de tarefas no

    Front-end
  2. Tiago Porto tiago@tiagoporto.com ondeeuvimparar.com.br front-end developer designer beer freak traveler

    headbanger \m/ guitar player tiagoporto.com tiagoporto
  3. Boas práticas

  4. Indentação Código legível. O coleguinha do lado agradece!!

  5. editorconfig.org

  6. None
  7. Gerenciador de dependências bower.io npmjs.com

  8. None
  9. Não use estilos nem scripts inline

  10. Pare de usar <br>

  11. Pare de usar <br>

  12. Qual desculpa para não validar seu HTML? validator.w3.org

  13. None
  14. Não misture idiomas ao nomear classes e ids .banner__botao .banner--principal

  15. Não nomeie classes ou ids baseados no estilo

  16. Prefira classes a ids #dont-use-me .use-me-everywhere

  17. Use unidades relativas para tipografia em rem Exemplo de uso:

    tiagoporto.github.io/accessibility-buttons
  18. !important não use !important

  19. Metodologia CSS BEM getbem.com/introduction smacss.com

  20. Não se preocupe mais com prefixos Código maior para manutenção

    Você nunca vai lembrar de deletar quando eles não forem mais necessários
  21. autoprefixer.github.io

  22. Pré-processadores sass-lang.com stylus-lang.com

  23. Variáveis

  24. Mixins

  25. Nesting

  26. Image size

  27. compressor.io kraken.io jakearchibald.github.io/svgomg Otimize imagens

  28. Opte por Alta resolução Arquivos menores Interação com CSS e

    JS Inline* *github.com/tiagoporto/jquery-svg-to-inline
  29. CSS Sprite Economiza requisições HTTP* *veja HTTP/2

  30. spritegen.website-performance.org CSS Sprite sprite

  31. Lint Padronização Aprendizado

  32. Obrigatório aspas simples proibido usar console Faltando ; Lint

  33. eslint.org jshint.com www.jslint.com Lint csslint.net stylelint.io/user-guide/rules

  34. Concatenação de arquivos

  35. Minificação

  36. webpack.github.io

  37. Não seja a janela quebrada pt.wikipedia.org/wiki/Teoria_das_Janelas_Partidas

  38. Blz!! Mas tenho que lembrar disso tudo?

  39. Automatização

  40. O que eu ganho? Processo otimizado Diminuição de erros Tempo

    para ser dedicado agregando valor ao projeto
  41. Claro que não. Mas só isso?

  42. MAIS TEMPO PARA TOMAR CAFÉ.

  43. Ahhh! Agora sim. E o que devo automatizar? Toda tarefa

    chata Toda tarefa que é repetida mais de uma vez
  44. None
  45. Task Runners gulpjs.com gruntjs.com

  46. Packages

  47. None
  48. Até agora quase tudo do que foi citado e mais...

    O que ele faz?
  49. browsersync.io

  50. handlebarsjs.com

  51. babeljs.io

  52. Não curti developers.google.com/web/tools/starter-kit www.ryanbensonmedia.com/harvest github.com/LFeh/kratos-boilerplate github.com/willianjusten/Fast

  53. yeoman.io Pode ser mais fácil!

  54. github.com/tiagoporto/generator-swill-boilerplate

  55. None
  56. npm install -g gulp

  57. npm install -g bower

  58. npm install -g yo

  59. npm install -g generator-swill-boilerplate

  60. yo swill-boilerplate

  61. None
  62. Contribua doc site bugs sugestões Open Source Contribuindo em projetos

    Open Source utilizando git [parte 1]: goo.gl/EGikzG
  63. This is it