Slide 1
Slide 1 text
Boas práticas e
24 Set 2016
automatização de tarefas
no Front-end
Slide 2
Slide 2 text
Tiago Porto
[email protected]
ondeeuvimparar.com.br
front-end developer
designer
beer freak
traveler
headbanger \m/
guitar player
tiagoporto.com
tiagoporto
Slide 3
Slide 3 text
Boas práticas
Slide 4
Slide 4 text
Indentação
Código legível.
O coleguinha do lado agradece!!
Slide 5
Slide 5 text
editorconfig.org
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Gerenciador de
dependências
bower.io
npmjs.com
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Não use estilos
nem scripts inline
Slide 10
Slide 10 text
Pare de usar
Slide 11
Slide 11 text
Pare de usar
Slide 12
Slide 12 text
Qual desculpa para não validar seu HTML?
validator.w3.org
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
Não misture idiomas ao
nomear classes e ids
.banner__botao
.banner--principal
Slide 15
Slide 15 text
Não nomeie classes ou
ids baseados no estilo
Slide 16
Slide 16 text
Prefira classes a ids
#dont-use-me
.use-me-everywhere
Slide 17
Slide 17 text
Use unidades relativas
para tipografia
em
rem
Exemplo de uso:
tiagoporto.github.io/accessibility-buttons
Slide 18
Slide 18 text
!important não use !important
Slide 19
Slide 19 text
Metodologia CSS
BEM
getbem.com/introduction smacss.com
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
autoprefixer.github.io
Slide 22
Slide 22 text
Pré-processadores
sass-lang.com stylus-lang.com
Slide 23
Slide 23 text
Variáveis
Slide 24
Slide 24 text
Mixins
Slide 25
Slide 25 text
Nesting
Slide 26
Slide 26 text
Image size
Slide 27
Slide 27 text
compressor.io
kraken.io
jakearchibald.github.io/svgomg
Otimize imagens
Slide 28
Slide 28 text
Opte por
Alta resolução
Arquivos menores
Interação com CSS e JS
Inline*
*github.com/tiagoporto/jquery-svg-to-inline
Slide 29
Slide 29 text
CSS Sprite
Economiza requisições HTTP*
*veja HTTP/2
Slide 30
Slide 30 text
spritegen.website-performance.org
CSS Sprite
sprite
Slide 31
Slide 31 text
Lint
Padronização
Aprendizado
Slide 32
Slide 32 text
Obrigatório aspas simples
proibido usar console
Faltando ;
Lint
Slide 33
Slide 33 text
eslint.org
jshint.com
www.jslint.com
Lint
csslint.net
stylelint.io/user-guide/rules
Slide 34
Slide 34 text
Concatenação de arquivos
Slide 35
Slide 35 text
Minificação
Slide 36
Slide 36 text
webpack.github.io
Slide 37
Slide 37 text
Não seja a janela
quebrada
pt.wikipedia.org/wiki/Teoria_das_Janelas_Partidas
Slide 38
Slide 38 text
Blz!!
Mas tenho que
lembrar disso tudo?
Slide 39
Slide 39 text
Automatização
Slide 40
Slide 40 text
O que eu ganho?
Processo otimizado
Diminuição de erros
Tempo para ser dedicado agregando
valor ao projeto
Slide 41
Slide 41 text
Claro que não.
Mas só isso?
Slide 42
Slide 42 text
MAIS TEMPO PARA
TOMAR CAFÉ.
Slide 43
Slide 43 text
Ahhh! Agora sim.
E o que devo automatizar?
Toda tarefa chata
Toda tarefa que é repetida
mais de uma vez
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Task Runners
gulpjs.com gruntjs.com
Slide 46
Slide 46 text
Packages
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
Até agora quase tudo do que
foi citado e mais...
O que ele faz?
Slide 49
Slide 49 text
browsersync.io
Slide 50
Slide 50 text
handlebarsjs.com
Slide 51
Slide 51 text
babeljs.io
Slide 52
Slide 52 text
Não curti
developers.google.com/web/tools/starter-kit
www.ryanbensonmedia.com/harvest
github.com/LFeh/kratos-boilerplate
github.com/willianjusten/Fast
Slide 53
Slide 53 text
yeoman.io
Pode ser mais fácil!
Slide 54
Slide 54 text
github.com/tiagoporto/generator-swill-boilerplate
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
npm install -g gulp
Slide 57
Slide 57 text
npm install -g bower
Slide 58
Slide 58 text
npm install -g yo
Slide 59
Slide 59 text
npm install -g generator-swill-boilerplate
Slide 60
Slide 60 text
yo swill-boilerplate
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
Contribua
doc
site
bugs
sugestões
Open Source
Contribuindo em projetos Open Source utilizando git [parte 1]: goo.gl/EGikzG
Slide 63
Slide 63 text
This is it