WORKFLOWOPENSOURCEPARA FRONTENDDEVELOPERSpor davidson fellipewww.fellipe.com
View Slide
I’mDAVIDSON FELLIPE
WORKS
ERA UMA VEZ...
http://www.oldversion.com/windows/macromedia-dreamweaver/E AINDA...
LAYOUT USANDOTABLE?
ENQUANTO ISSO EM 2000...
HTMLCSS2006...
precisa saberJAVASCRIPT?2006...
ATUALMENTE...
SEMÂNTICAFERRAMENTASFRAMEWORKSLIBRARIESPRÉPROCESSADORESSEOTESTESPADRÕESWEB
XBROWSERXDEVICEXPLATFORM
MULTITASKING...@flavioribeiro na globo.com
VAMOSARRUMARA CASA?
EDITORES
VIMhttp://www.vim.org/
SUBLIMEhttp://www.sublimetext.com/
SUBLIMEhttp://www.sublimetext.com/NÃO É OPEN SOUCENEM FREE
BRACKETShttp://brackets.io/
DOTFILES
DOTFILES.GITHUB.IOhttp://dotfiles.github.io/
automatize suasconfiguraçõeshttps://github.com/davidsonfellipe/dotfiles
CONTROLEDEVERSÃO
gittrabalhar com repositóriosentender branchespull requestcode reviewCONTROLE DE VERSÃO
https://bitbucket.org/
https://github.com/
BITBUCKET VS GITHUBrepos privadosilimitadosprincing baseado nonúmero decolaboradoresnúmero decolaboradores ilimitadoprincing baseado nonúmero decolaboradores
TASK RUNNER
http://gruntjs.com/
O QUE É O GRUNT?É um task runner baseado em linha de comandopara projetos javascript
O QUE É O GRUNT?TestesJS lintingConcatenando e MinificandoOtimizando imagensWatches para Pré-processadores
Por que usar o GRUNT?Facil de usarGrande número de pluginsImensa comunidadeOpen source
Instalados e gerenciados via NPM (node.js)Adiciona grunt command no system pathINICIANDO COM GRUNT$ npm install -g grunt-cli
package.json{"name": "project-name","version": "0.1.0","description": "Project description"}
gruntfile.jsmodule.exports = function( grunt ) {grunt.initConfig({// configuracoes});//pluginsgrunt.loadNpmTasks( 'plugin-name' );//tarefasgrunt.registerTask( 'default', [ 'watch' ] );};
INSTALANDO GRUNT$ npm install grunt --save-devInstala a ultima versão no seu folderAdiciona ao package.json
ANThttp://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
RAKEhttp://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
GRUNThttp://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
PRÉ-PROCESSADORES
http://usablica.github.io/front-end-frameworks/compare.html
QUALIDADEDECÓDIGO
JSHINThttp://www.jshint.com/
CSSLINThttp://csslint.net/
TESTES
PERFORMANCE
YSLOWhttp://developer.yahoo.com/yslow/
PAGE SPEEDhttps://developers.google.com/speed/pagespeed/insights
+PERFORMANCE?http://browserdiet.com/pt
SPEEDLIMIThttp://mschrag.github.io
MAIS TOOLS
GRADIENTES?http://www.colorzilla.com/gradient-editor/
GITIFIERhttp://psionides.github.io/Gitifier/
IMAGEOPTIMhttp://imageoptim.com/
MICROJShttp://microjs.com/#
http://html5boilerplate.com/
CONTRIBUAhttp://braziljs.org/projetos/http://contribute.jquery.org/http://gruntjs.com/contributingPull requests em projetos no github ou bitbucket
COMO SE MANTERATUALIZADO?
https://twitter.com/slicknet/status/292103833327370240
6 SEMANAS?
http://html5weekly.com/
http://javascriptweekly.com
http://braziljs.org/
AH...É MUITA COISAPARA ESTUDAR...
O SUCESSO DE SUA APPNÃO DEPENDE APENASDE SEU WORKFLOW
ELE APENASVAI TE DEIXAMAIS FELIZ
OBRIGADOgithub.com/davidsonfellipetwitter.com/davidsonfellipefacebook.com/fellipefellipe.com
www.fellipe.com/talksslides disponíveis em...