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?

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