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.1k
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
330
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
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.4k
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
170
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
810
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
210
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
290
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
7
1k
PHPカンファレンス関西2025 基調講演
sugimotokei
5
1k
20250708_JAWS_opscdk
takuyay0ne
2
150
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
230
Reactの歴史を振り返る
tutinoko
1
140
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
17
6.1k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Bash Introduction
62gerente
613
210k
The Invisible Side of Design
smashingmag
301
51k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Designing Experiences People Love
moore
142
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Docker and Python
trallard
45
3.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
Site-Speed That Sticks
csswizardry
10
720
Facilitating Awesome Meetings
lara
54
6.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
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