Pro Yearly is on sale from $80 to $50! »

Workflow Open Source para Frontend Developers

Workflow Open Source para Frontend Developers

054c583ad5dc09a861874e14dcb43e4c?s=128

Davidson Fellipe

July 20, 2013
Tweet

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?

  17. None
  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

  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  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

  55. None
  56. None
  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

  63. None
  64. None
  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...

  78. None
  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...