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
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
410
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.3k
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
370
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
250
ハイパーパラメータチューニングって何をしているの
toridori_dev
0
140
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
120
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
37
12k
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
170
Why does continuous profiling matter to developers? #appdevelopercon
salaboy
0
180
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
0
110
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
0
980
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
180
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Side Projects
sachag
452
42k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Six Lessons from altMBA
skipperchong
27
3.5k
KATA
mclloyd
29
14k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
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