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
Workflow Open Source para Frontend Developers
Search
Davidson Fellipe
July 20, 2013
Programming
3
250
Workflow Open Source para Frontend Developers
Davidson Fellipe
July 20, 2013
Tweet
Share
More Decks by Davidson Fellipe
See All by Davidson Fellipe
Adventures from Enzyme to React Testing Library
fellipe
1
330
O melhor da monitoração de web performance
fellipe
0
430
Guia do Front-end das galáxias
fellipe
3
260
Workflow para desenvolvimento web e mobile usando gruntjs
fellipe
2
130
Como é trabalhar na Globo.com?
fellipe
3
110
Guia prático de desenvolvimento front-end para django devs
fellipe
1
160
Practical guide for front-end development for Django Devs
fellipe
0
87
Esse cara é o Grunt
fellipe
9
790
It's Javascript Time
fellipe
6
500
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
340
明日から始めるリファクタリング
ryounasso
0
140
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
150
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
160
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
240
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
180
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
440
Devoxx BE - Local Development in the AI Era
kdubois
0
130
株式会社 Sun terras カンパニーデック
sunterras
0
310
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
170
Catch Up: Go Style Guide Update
andpad
0
230
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
160
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Designing for Performance
lara
610
69k
Facilitating Awesome Meetings
lara
56
6.6k
Site-Speed That Sticks
csswizardry
12
900
Git: the NoSQL Database
bkeepers
PRO
431
66k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
It's Worth the Effort
3n
187
28k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Transcript
WORKFLOW OPENSOURCE PARA FRONTEND DEVELOPERS por davidson fellipe www.fellipe.com
I’m DAVIDSON FELLIPE
WORKS
ERA UMA VEZ...
http://www.oldversion.com/windows/macromedia-dreamweaver/ E AINDA...
LAYOUT USANDO TABLE?
ENQUANTO ISSO EM 2000...
HTML CSS 2006...
precisa saber JAVASCRIPT? 2006...
ATUALMENTE...
SEMÂNTICA FERRAMENTAS FRAMEWORKS LIBRARIES PRÉ PROCESSADORES SEO TESTES PADRÕES WEB
SEMÂNTICA FERRAMENTAS FRAMEWORKS LIBRARIES PRÉ PROCESSADORES SEO TESTES PADRÕES WEB
XBROWSER XDEVICE XPLATFORM
XBROWSER XDEVICE XPLATFORM
MULTITASKING... @flavioribeiro na globo.com
VAMOS ARRUMAR A CASA?
None
EDITORES
VIM http://www.vim.org/
SUBLIME http://www.sublimetext.com/
SUBLIME http://www.sublimetext.com/ NÃO É OPEN SOUCE NEM FREE
BRACKETS http://brackets.io/
DOTFILES
DOTFILES.GITHUB.IO http://dotfiles.github.io/
automatize suas configurações https://github.com/davidsonfellipe/dotfiles
CONTROLE DE VERSÃO
git trabalhar com repositórios entender branches pull request code review
CONTROLE DE VERSÃO
https://bitbucket.org/
https://github.com/
BITBUCKET VS GITHUB repos privados ilimitados princing baseado no número
de colaboradores número de colaboradores ilimitado princing baseado no número de colaboradores
TASK RUNNER
http://gruntjs.com/
O QUE É O GRUNT? É um task runner baseado
em linha de comando para projetos javascript
O QUE É O GRUNT? Testes JS linting Concatenando e
Minificando Otimizando imagens Watches para Pré-processadores
Por que usar o GRUNT? Facil de usar Grande número
de plugins Imensa comunidade Open source
Instalados e gerenciados via NPM (node.js) Adiciona grunt command no
system path INICIANDO COM GRUNT $ npm install -g grunt-cli
package.json { "name": "project-name", "version": "0.1.0", "description": "Project description" }
gruntfile.js module.exports = function( grunt ) { grunt.initConfig({ // configuracoes
}); //plugins grunt.loadNpmTasks( 'plugin-name' ); //tarefas grunt.registerTask( 'default', [ 'watch' ] ); };
INSTALANDO GRUNT $ npm install grunt --save-dev Instala a ultima
versão no seu folder Adiciona ao package.json
ANT http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
RAKE http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
GRUNT http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
PRÉ-PROCESSADORES
None
None
None
None
None
None
http://usablica.github.io/front-end-frameworks/compare.html
QUALIDADE DE CÓDIGO
JSHINT http://www.jshint.com/
CSSLINT http://csslint.net/
TESTES
None
None
PERFORMANCE
YSLOW http://developer.yahoo.com/yslow/
PAGE SPEED https://developers.google.com/speed/pagespeed/insights
+PERFORMANCE? http://browserdiet.com/pt
SPEEDLIMIT http://mschrag.github.io
MAIS TOOLS
None
None
GRADIENTES? http://www.colorzilla.com/gradient-editor/
GITIFIER http://psionides.github.io/Gitifier/
IMAGEOPTIM http://imageoptim.com/
MICROJS http://microjs.com/#
http://html5boilerplate.com/
CONTRIBUA http://braziljs.org/projetos/ http://contribute.jquery.org/ http://gruntjs.com/contributing Pull requests em projetos no github
ou bitbucket
COMO SE MANTER ATUALIZADO?
https://twitter.com/slicknet/status/292103833327370240
6 SEMANAS?
http://html5weekly.com/
http://javascriptweekly.com
http://braziljs.org/
AH... É MUITA COISA PARA ESTUDAR...
None
O SUCESSO DE SUA APP NÃO DEPENDE APENAS DE SEU
WORKFLOW
ELE APENAS VAI TE DEIXA MAIS FELIZ
OBRIGADO github.com/davidsonfellipe twitter.com/davidsonfellipe facebook.com/fellipe fellipe.com
www.fellipe.com/talks slides disponíveis em...