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
4.2k
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
360
Aplicativos híbridos com Ionic. Você também pode começar a desenvolver agora!
tiagoporto
2
4.7k
Other Decks in Programming
See All in Programming
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
900
CSC305 Lecture 08
javiergs
PRO
0
200
Le côté obscur des IA génératives
pascallemerrer
0
150
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
250
All About Angular's New Signal Forms
manfredsteyer
PRO
0
160
CSC305 Lecture 04
javiergs
PRO
0
270
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
170
CSC509 Lecture 04
javiergs
PRO
0
300
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.3k
株式会社 Sun terras カンパニーデック
sunterras
0
310
理論と実務のギャップを超える
eycjur
0
140
Featured
See All Featured
Embracing the Ebb and Flow
colly
88
4.8k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Being A Developer After 40
akosma
91
590k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Gamification - CAS2011
davidbonilla
81
5.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Cost Of JavaScript in 2023
addyosmani
55
9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Designing Experiences People Love
moore
142
24k
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