Workflow Open Source para Frontend Developers

  • View
    991

  • Download
    4

Embed Size (px)

DESCRIPTION

Um Workflow Open Source para Frontend Developers

Text of Workflow Open Source para Frontend Developers

  • 1.WORKFLOW OPENSOURCE PARA FRONTEND DEVELOPERS por davidson fellipe www.fellipe.com

2. ImDAVIDSON 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. SEMNTICA FERRAMENTAS FRAMEWORKS LIBRARIES PR PROCESSADORES SEO TESTES PADRES WEB 12. SEMNTICA FERRAMENTAS FRAMEWORKS LIBRARIES PR PROCESSADORES SEO TESTES PADRES WEB 13. XBROWSER XDEVICE XPLATFORM 14. XBROWSER XDEVICE XPLATFORM 15. MULTITASKING... @flavioribeiro na globo.com 16. VAMOS ARRUMAR A CASA? 17. EDITORES 18. VIM http://www.vim.org/ 19. SUBLIME http://www.sublimetext.com/ 20. SUBLIME http://www.sublimetext.com/ NO OPEN SOUCE NEM FREE 21. BRACKETS http://brackets.io/ 22. DOTFILES 23. DOTFILES.GITHUB.IO http://dotfiles.github.io/ 24. automatize suas configuraes https://github.com/davidsonfellipe/dotfiles 25. CONTROLE DE VERSO 26. git trabalhar com repositrios entender branches pull request code review CONTROLE DE VERSO 27. https://bitbucket.org/ 28. https://github.com/ 29. BITBUCKET VS GITHUB repos privados ilimitados princing baseado no nmero de colaboradores nmero de colaboradores ilimitado princing baseado no nmero de colaboradores 30. TASK RUNNER 31. http://gruntjs.com/ 32. O QUE O GRUNT? um task runner baseado em linha de comando para projetos javascript 33. O QUE O GRUNT? Testes JS linting Concatenando e Minificando Otimizando imagens Watches para Pr-processadores 34. Por que usar o GRUNT? Facil de usar Grande nmero de plugins Imensa comunidade Open source 35. Instalados e gerenciados via NPM (node.js) Adiciona grunt command no system path INICIANDO COM GRUNT $ npm install -g grunt-cli 36. package.json { "name": "project-name", "version": "0.1.0", "description": "Project description" } 37. gruntfile.js module.exports = function( grunt ) { grunt.initConfig({ // configuracoes }); //plugins grunt.loadNpmTasks( 'plugin-name' ); //tarefas grunt.registerTask( 'default', [ 'watch' ] ); }; 38. INSTALANDO GRUNT $ npm install grunt --save-dev Instala a ultima verso no seu folder Adiciona ao package.json 39. ANT http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/ 40. RAKE http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/ 41. GRUNT http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/ 42. PR-PROCESSADORES 43. http://usablica.github.io/front-end-frameworks/compare.html 44. QUALIDADE DE CDIGO 45. JSHINT http://www.jshint.com/ 46. CSSLINT http://csslint.net/ 47. TESTES 48. PERFORMANCE 49. YSLOW http://developer.yahoo.com/yslow/ 50. PAGE SPEED https://developers.google.com/speed/pagespeed/insights 51. +PERFORMANCE? http://browserdiet.com/pt 52. SPEEDLIMIT http://mschrag.github.io 53. MAIS TOOLS 54. GRADIENTES? http://www.colorzilla.com/gradient-editor/ 55. GITIFIER http://psionides.github.io/Gitifier/ 56. IMAGEOPTIM http://imageoptim.com/ 57. MICROJS http://microjs.com/# 58. http://html5boilerplate.com/ 59. CONTRIBUA http://braziljs.org/projetos/ http://contribute.jquery.org/ http://gruntjs.com/contributing Pull requests em projetos no github ou bitbucket 60. COMO SE MANTER ATUALIZADO? 61. https://twitter.com/slicknet/status/292103833327370240 62. 6 SEMANAS? 63. http://html5weekly.com/ 64. http://javascriptweekly.com 65. http://braziljs.org/ 66. AH... MUITA COISA PARA ESTUDAR... 67. O SUCESSO DE SUA APP NO DEPENDE APENAS DE SEU WORKFLOW 68. ELE APENAS VAI TE DEIXA MAIS FELIZ 69. OBRIGADO github.com/davidsonfellipe twitter.com/davidsonfellipe facebook.com/fellipe fellipe.com 70. www.fellipe.com/talks slides disponveis em...