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

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