Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Boas práticas e automatização de tarefas no Fro...
Search
Tiago Porto
September 24, 2016
Programming
1
4k
Boas práticas e automatização de tarefas no Front-end
Tiago Porto
September 24, 2016
Tweet
Share
More Decks by Tiago Porto
See All by Tiago Porto
Saudade typeface
tiagoporto
0
310
Aplicativos híbridos com Ionic. Você também pode começar a desenvolver agora!
tiagoporto
2
4.6k
Other Decks in Programming
See All in Programming
鯛変だったRubyKaigi 2025 ── それでも楽しかった!
pndcat
0
130
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
izumin5210
12
5.6k
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
110
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
180
衛星の軌道をWeb地図上に表示する
sankichi92
0
210
Building an Application with TDD, DDD and Hexagonal Architecture - Isn't it a bit too much?
mufrid
0
360
2025年のz-index設計を考える
tak_dcxi
13
5.1k
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
910
ruby.wasmとWebSocketで遊ぼう!
lnit
0
140
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
guvalif
1
210
“技術カンファレンスで何か変わる?” ──RubyKaigi後の自分とチームを振り返る
ssagara00
0
200
iOSアプリ開発もLLMで自動運転する
hiragram
6
1.9k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Producing Creativity
orderedlist
PRO
345
40k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.5k
It's Worth the Effort
3n
184
28k
Designing for humans not robots
tammielis
253
25k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
33k
Transcript
Boas práticas e 24 Set 2016 automatização de tarefas no
Front-end
Tiago Porto
[email protected]
ondeeuvimparar.com.br front-end developer designer beer freak traveler
headbanger \m/ guitar player tiagoporto.com tiagoporto
Boas práticas
Indentação Código legível. O coleguinha do lado agradece!!
editorconfig.org
None
Gerenciador de dependências bower.io npmjs.com
None
Não use estilos nem scripts inline
Pare de usar <br>
Pare de usar <br>
Qual desculpa para não validar seu HTML? validator.w3.org
None
Não misture idiomas ao nomear classes e ids .banner__botao .banner--principal
Não nomeie classes ou ids baseados no estilo
Prefira classes a ids #dont-use-me .use-me-everywhere
Use unidades relativas para tipografia em rem Exemplo de uso:
tiagoporto.github.io/accessibility-buttons
!important não use !important
Metodologia CSS BEM getbem.com/introduction smacss.com
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
autoprefixer.github.io
Pré-processadores sass-lang.com stylus-lang.com
Variáveis
Mixins
Nesting
Image size
compressor.io kraken.io jakearchibald.github.io/svgomg Otimize imagens
Opte por Alta resolução Arquivos menores Interação com CSS e
JS Inline* *github.com/tiagoporto/jquery-svg-to-inline
CSS Sprite Economiza requisições HTTP* *veja HTTP/2
spritegen.website-performance.org CSS Sprite sprite
Lint Padronização Aprendizado
Obrigatório aspas simples proibido usar console Faltando ; Lint
eslint.org jshint.com www.jslint.com Lint csslint.net stylelint.io/user-guide/rules
Concatenação de arquivos
Minificação
webpack.github.io
Não seja a janela quebrada pt.wikipedia.org/wiki/Teoria_das_Janelas_Partidas
Blz!! Mas tenho que lembrar disso tudo?
Automatização
O que eu ganho? Processo otimizado Diminuição de erros Tempo
para ser dedicado agregando valor ao projeto
Claro que não. Mas só isso?
MAIS TEMPO PARA TOMAR CAFÉ.
Ahhh! Agora sim. E o que devo automatizar? Toda tarefa
chata Toda tarefa que é repetida mais de uma vez
None
Task Runners gulpjs.com gruntjs.com
Packages
None
Até agora quase tudo do que foi citado e mais...
O que ele faz?
browsersync.io
handlebarsjs.com
babeljs.io
Não curti developers.google.com/web/tools/starter-kit www.ryanbensonmedia.com/harvest github.com/LFeh/kratos-boilerplate github.com/willianjusten/Fast
yeoman.io Pode ser mais fácil!
github.com/tiagoporto/generator-swill-boilerplate
None
npm install -g gulp
npm install -g bower
npm install -g yo
npm install -g generator-swill-boilerplate
yo swill-boilerplate
None
Contribua doc site bugs sugestões Open Source Contribuindo em projetos
Open Source utilizando git [parte 1]: goo.gl/EGikzG
This is it