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.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
Aplicativos híbridos com Ionic. Você também pode começar a desenvolver agora!
tiagoporto
2
4k
Other Decks in Technology
See All in Technology
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
国土交通省 データコンペ参加者向け勉強会
takehikohashimoto
0
130
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
170
よくわからんサービスについての問い合わせが来たときの強い味方 Amazon Q について
kazzpapa3
0
220
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
640
Forget efficiency – Become more productive without the stress
ufried
0
150
バクラクにおける可観測性向上の取り組み
yuu26
3
420
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
10分でわかるfreeeのQA
freee
1
3.4k
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
180
フルカイテン株式会社 採用資料
fullkaiten
0
36k
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
130
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
38
7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
How to Ace a Technical Interview
jacobian
275
23k
A Tale of Four Properties
chriscoyier
156
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Designing for humans not robots
tammielis
249
25k
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