Workflow Open Source para Frontend Developers

Transcript

1. WORKFLOW OPENSOURCE PARA FRONTEND DEVELOPERS por davidson fellipe www.fellipe.com
2. I’m DAVIDSON FELLIPE
3. WORKS
4. ERA UMA VEZ...
5. http://www.oldversion.com/windows/macromedia-dreamweaver/ E AINDA...
6. LAYOUT USANDO TABLE?
7. ENQUANTO ISSO EM 2000...
8. HTML CSS 2006...
9. precisa saber JAVASCRIPT? 2006...
10. ATUALMENTE...
11. SEMÂNTICA FERRAMENTAS FRAMEWORKS LIBRARIES PRÉ PROCESSADORES SEO TESTES PADRÕES WEB
12. SEMÂNTICA FERRAMENTAS FRAMEWORKS LIBRARIES PRÉ PROCESSADORES SEO TESTES PADRÕES WEB
13. XBROWSER XDEVICE XPLATFORM
14. XBROWSER XDEVICE XPLATFORM
15. MULTITASKING... @flavioribeiro na globo.com
16. VAMOS ARRUMAR A CASA?
18. EDITORES
19. VIM http://www.vim.org/
20. SUBLIME http://www.sublimetext.com/
21. SUBLIME http://www.sublimetext.com/ NÃO É OPEN SOUCE NEM FREE
22. BRACKETS http://brackets.io/
23. DOTFILES
24. DOTFILES.GITHUB.IO http://dotfiles.github.io/
25. automatize suas configurações https://github.com/davidsonfellipe/dotfiles
26. CONTROLE DE VERSÃO
27. git trabalhar com repositórios entender branches pull request code review CONTROLE DE VERSÃO
28. https://bitbucket.org/
29. https://github.com/
30. 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
31. TASK RUNNER
32. http://gruntjs.com/
33. O QUE É O GRUNT? É um task runner baseado em linha de comando para projetos javascript
34. O QUE É O GRUNT? Testes JS linting Concatenando e Minificando Otimizando imagens Watches para Pré-processadores
35. Por que usar o GRUNT? Facil de usar Grande número de plugins Imensa comunidade Open source
36. Instalados e gerenciados via NPM (node.js) Adiciona grunt command no system path INICIANDO COM GRUNT $ npm install -g grunt-cli
37. package.json { "name": "project-name", "version": "0.1.0", "description": "Project description" }
38. gruntfile.js module.exports = function( grunt ) { grunt.initConfig({ // configuracoes }); //plugins grunt.loadNpmTasks( 'plugin-name' ); //tarefas grunt.registerTask( 'default', [ 'watch' ] ); };
39. INSTALANDO GRUNT $ npm install grunt --save-dev Instala a ultima versão no seu folder Adiciona ao package.json
40. ANT http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
41. RAKE http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
42. GRUNT http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
43. PRÉ-PROCESSADORES
50. http://usablica.github.io/front-end-frameworks/compare.html
51. QUALIDADE DE CÓDIGO
52. JSHINT http://www.jshint.com/
53. CSSLINT http://csslint.net/
54. TESTES
57. PERFORMANCE
58. YSLOW http://developer.yahoo.com/yslow/
59. PAGE SPEED https://developers.google.com/speed/pagespeed/insights
60. +PERFORMANCE? http://browserdiet.com/pt
61. SPEEDLIMIT http://mschrag.github.io
62. MAIS TOOLS
65. GRADIENTES? http://www.colorzilla.com/gradient-editor/
66. GITIFIER http://psionides.github.io/Gitifier/
67. IMAGEOPTIM http://imageoptim.com/
68. MICROJS http://microjs.com/#
69. http://html5boilerplate.com/
70. CONTRIBUA http://braziljs.org/projetos/ http://contribute.jquery.org/ http://gruntjs.com/contributing Pull requests em projetos no github ou bitbucket
71. COMO SE MANTER ATUALIZADO?
72. https://twitter.com/slicknet/status/292103833327370240
73. 6 SEMANAS?
74. http://html5weekly.com/
75. http://javascriptweekly.com
76. http://braziljs.org/
77. AH... É MUITA COISA PARA ESTUDAR...
79. O SUCESSO DE SUA APP NÃO DEPENDE APENAS DE SEU WORKFLOW
80. ELE APENAS VAI TE DEIXA MAIS FELIZ
81. OBRIGADO github.com/davidsonfellipe twitter.com/davidsonfellipe facebook.com/fellipe fellipe.com
82. www.fellipe.com/talks slides disponíveis em...