Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Boas práticas e automatização de tarefas no Fro...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Tiago Porto Tiago Porto
September 24, 2016
Programming
4.3k
1

Boas práticas e automatização de tarefas no Front-end

Avatar for Tiago Porto

Tiago Porto

September 24, 2016

More Decks by Tiago Porto

See All by Tiago Porto
Saudade typeface
Avatar for Tiago Porto tiagoporto
0
460
Aplicativos híbridos com Ionic. Você também pode começar a desenvolver agora!
Avatar for Tiago Porto tiagoporto
2
4.8k

Other Decks in Programming

See All in Programming
iOS26時代の新規アプリ開発
Avatar for 野瀬田　裕樹 yuukiw00w
0
210
Old Dog, New Tricks: The Java 25 Reinvention - JNation
Avatar for A N M Bazlur Rahman bazlur_rahman
0
130
さぁV100、メモリをお食べ・・・
Avatar for nilpe nilpe
0
110
These Five Tricks Can Make Your Apps Greener, Cheaper, & Nicer
Avatar for Holly Cummins hollycummins
0
240
自動レビューエンジンの実装と運用 ~レビューのない世界へ~
Avatar for Kanato kurukuru1999
2
280
TSKaigi 2026 TypeScriptバックエンドのオブザーバビリティ戦略 — Datadog × NestJSの実践
Avatar for Taisei Yamamoto taiseiyamamotoan
1
210
密結合なバックエンドから TypeScript のコードを生成する
Avatar for kemuridama kemuridama
1
390
SPMマルチモジュールで テストカバレッジを取得する技法
Avatar for yosshi yosshi4486
0
130
Skillは並べた。動かなかった。契約で繋いだ。— 65個のSkillから、自走する開発サイクルへ
Avatar for じゅん junholee
0
780
プラグインで拡張される Context をtype-safe にする難しさと設計判断
Avatar for kazupon kazupon
2
430
Modding RubyKaigi for Myself
Avatar for yui-knk yui_knk
0
760
3Dシーンの圧縮
Avatar for Fadis fadis
1
460

Featured

See All Featured
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
380
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.7k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.9k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
260
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
230
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.3k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
Done Done
Avatar for chrislema chrislema
186
16k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.6k

Transcript

  1. Boas práticas e 24 Set 2016 automatização de tarefas no

    Front-end

  2. Tiago Porto [email protected] ondeeuvimparar.com.br front-end developer designer beer freak traveler

    headbanger \m/ guitar player tiagoporto.com tiagoporto

  3. Boas práticas

  4. Indentação Código legível. O coleguinha do lado agradece!!

  5. editorconfig.org

  6. None

  7. Gerenciador de dependências bower.io npmjs.com

  8. None

  9. Não use estilos nem scripts inline

  10. Pare de usar <br>

  11. Pare de usar <br>

  12. Qual desculpa para não validar seu HTML? validator.w3.org

  13. None

  14. Não misture idiomas ao nomear classes e ids .banner__botao .banner--principal

  15. Não nomeie classes ou ids baseados no estilo

  16. Prefira classes a ids #dont-use-me .use-me-everywhere

  17. Use unidades relativas para tipografia em rem Exemplo de uso:

    tiagoporto.github.io/accessibility-buttons

  18. !important não use !important

  19. Metodologia CSS BEM getbem.com/introduction smacss.com

  20. 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

  21. autoprefixer.github.io

  22. Pré-processadores sass-lang.com stylus-lang.com

  23. Variáveis

  24. Mixins

  25. Nesting

  26. Image size

  27. compressor.io kraken.io jakearchibald.github.io/svgomg Otimize imagens

  28. Opte por Alta resolução Arquivos menores Interação com CSS e

    JS Inline* *github.com/tiagoporto/jquery-svg-to-inline

  29. CSS Sprite Economiza requisições HTTP* *veja HTTP/2

  30. spritegen.website-performance.org CSS Sprite sprite

  31. Lint Padronização Aprendizado

  32. Obrigatório aspas simples proibido usar console Faltando ; Lint

  33. eslint.org jshint.com www.jslint.com Lint csslint.net stylelint.io/user-guide/rules

  34. Concatenação de arquivos

  35. Minificação

  36. webpack.github.io

  37. Não seja a janela quebrada pt.wikipedia.org/wiki/Teoria_das_Janelas_Partidas

  38. Blz!! Mas tenho que lembrar disso tudo?

  39. Automatização

  40. O que eu ganho? Processo otimizado Diminuição de erros Tempo

    para ser dedicado agregando valor ao projeto

  41. Claro que não. Mas só isso?

  42. MAIS TEMPO PARA TOMAR CAFÉ.

  43. Ahhh! Agora sim. E o que devo automatizar? Toda tarefa

    chata Toda tarefa que é repetida mais de uma vez
  44. None

  45. Task Runners gulpjs.com gruntjs.com

  46. Packages

  47. None

  48. Até agora quase tudo do que foi citado e mais...

    O que ele faz?

  49. browsersync.io

  50. handlebarsjs.com

  51. babeljs.io

  52. Não curti developers.google.com/web/tools/starter-kit www.ryanbensonmedia.com/harvest github.com/LFeh/kratos-boilerplate github.com/willianjusten/Fast

  53. yeoman.io Pode ser mais fácil!

  54. github.com/tiagoporto/generator-swill-boilerplate

  55. None

  56. npm install -g gulp

  57. npm install -g bower

  58. npm install -g yo

  59. npm install -g generator-swill-boilerplate

  60. yo swill-boilerplate

  61. None

  62. Contribua doc site bugs sugestões Open Source Contribuindo em projetos

    Open Source utilizando git [parte 1]: goo.gl/EGikzG

  63. This is it