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
7. Gerenciador de dependências bower.io npmjs.com
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
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
45. Task Runners gulpjs.com gruntjs.com
46. Packages
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
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
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