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
Technology
1
3.5k
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
Aplicativos híbridos com Ionic. Você também pode começar a desenvolver agora!
tiagoporto
2
4.1k
Other Decks in Technology
See All in Technology
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
2.5Dモデルのすべて
yu4u
2
610
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
現場で役立つAPIデザイン
nagix
29
10k
RSNA2024振り返り
nanachi
0
500
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.7k
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
Code Review Best Practice
trishagee
66
17k
Typedesign – Prime Four
hannesfritz
40
2.5k
It's Worth the Effort
3n
184
28k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
How STYLIGHT went responsive
nonsquared
98
5.3k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Visualization
eitanlees
146
15k
A Tale of Four Properties
chriscoyier
158
23k
A Philosophy of Restraint
colly
203
16k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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