Guia do Front-end das galáxias

Transcript

1. GUIA DO FRONT-END DAS GALÁXIAS
   Davidson Fellipe v4
2. Front in Cuiabá 2015 Frontend Carioca 2014 Rupy Natal 2014 Front in Aracaju 2014 me apresentada em
3. HTML ~ 2001 senior front-end engineer globo.com ~ 2010 mais em fellipe.com me
10. marvin, Quer ser front-end
11. ELE ERA CURIOSO…
12. curiosidade É um importante combustível para aprender mais, testar coisas novas, e lidar com o tentativa e erro.
13. FRONTEND DEVELOPER UI ENGINEER WEB DEVELOPER PROJETISTA DE INTERFACES FRONTEND ENGINEER
14. FRONT-END UNICORN FRONT-END UX NINJA FRONT-END NINJA
15. MAS O QUÊ FAZ UM?
16. HTML
17. html começando do fazer de qualquer jeito ao código com sua devida semântica
18. CSS
19. css começando do remover sublinhado de links até sua relevância para apresentar visual, animações e interações e responsividade
20. JAVASCRIPT
21. javascript da validação de formulários até ferramenta de grande relevância para melhoria da experiência do usuário
22. diferentes navegadores diferentes versões diferentes resoluções diferentes dispositivos integração
23. começou a seguir referências…
24. GRANDES GRINGOS DA ÁREA @leaverou @paul_irish @codepo8 @souders @slicknet @stoyanstefanov @stubbornella @addyosmani @rauchg @sindresorhus @cowboy @mathias @valueof @rmurphey
25. @zenorocha @marcelduran @maujor @bergbrandt @fabiomcosta @eduardolundgren @jaydson @almirfilho @leobalter @millermedeiros @caio_gondim @felipenmoura NOMES brazucas DA ÁREA @sergio_caelum @jcemer
26. O QUE PRECISO APRENDER?
27. HTML, CSS, JAVASCRIPT, FEATURE DETECTION, REPAINT, REFLOW, PRÉ-PROCESSADORES, HTTP, CSRF, XSS, TIME FUNCTIONS PARA ANIMAÇÕES, SVG, CANVAS, LOCALSTORAGE, WEBCOMPONENTS, WEBSOCKETS,
    SHADOW DOM, FERRAMENTAS PARA DEBUG, SISTEMAS DE GRIDS, SCHEMA.ORG, SEO...
    GESTÃO DE DEPENDÊNCIAS, FRAMEWORKS MVC, TESTES, ANALISADORES DE QUALIDADE DE CÓDIGO, TASK RUNNERS, PERFORMANCE... E PORQUE NÃO?
28. HTTP://I1- NEWS.SOFTPE
29. https://twitter.com/slicknet/status/292103833327370240
30. COMO POR
    EM PRÁTICA?
31. ESCOLHENDO UM EDITOR
36. CRIO UM PADRÃO?
37. BUSCO POR UM PADRÃO?
40. http://html5boilerplate.com/
41. O que aprendo? Boa organização de arquivos Estrutura do HTML, CSS e JS Projetos em constante evolução
42. GRANDES
    PROBLEMAS
43. http://cubic-bezier.com/#.17,.67,.83,.67
44. COMO ORGANIZAR
    MEU PROJETO?
45. definindo uma estrutura
46. padrões ponto e vírgula; espaços vs tabulações aspas simples vs aspas duplas nomenclaturas para functions, Object Literal, conditional statement...
47. https://github.com/rwaldron/idiomatic.js/
48. https://github.com/airbnb/javascript
49. COMO ORGANIZAR
    MEU CSS?
50. css nãããããããão
51. CSS
    VS
    PRÉ-PROCESSADOR
52. vantagens produtividade facilidade de trabalhar
 com módulos e variáveis uso de mixins e placeholders
57. PÉSSIMAS PRÁTICAS COM CSS, PODEM SER PIORADAS COM PRÉ-PROCESSADORES
58. fazendo o mal com css .bisavo { .avo { .pai { #wtf { color: #f60; } } } } .bisavo .avo .pai #wtf { color: #f60; } SCSS CSS
59. http://csslint.net/
60. COMO ORGANIZAR
    MEU JS?
61. APRENDA ALGORITMOS!!!
62. http://eloquentjavascript.net/
63. https://github.com/braziljs/eloquente-javascript também em português
64. HTTP://I1- NEWS.SOFTPE <3
65. NÃO DESPREZE OS CUSTOS DO LADO FRONT-END!
66. MUITAS VEZES OS CUSTOS PODEM SER MAIS ALTOS QUE OS DO BACK-END!
67. aprenda Design Patterns Inheritance Prototype e Promises Memoize, Throttle e Debounce Detalhes do JSLint Escopo de variáveis
68. http://www.jshint.com/ JSHINT
69. ESQUEÇA FTP COM GUI
70. ESQUEÇA SVN
71. git, mercurial… TRABALHAR COM REPOS ENTENDER BRANCHES, TAGS PULL REQUEST ISSUES
72. https://github.com/
73. https://bitbucket.org/
74. COMO GERENCIO
    MEU TEMPO?
75. https://trello.com/
76. http://www.yast.com/
77. https://wakatime.com/
78. https://www.rescuetime.com
79. COMO MANTENHO
    MEU PROJETO?
80. http://jasmine.github.io/
81. http://qunitjs.com/
82. http://visionmedia.github.io/mocha/
83. INTEGRAÇÃO CONTÍNUA
85. processo de deploy
86. TASK RUNNERS
88. MAKE
    ANT
    RAKE
    CAKE
    GULP GRUNT SHELL JAVA RUBY COFFEE JS JS
89. $ make grunt-config MAKEFILE grunt-config: @echo '✖ installing node'; brew install node; @echo '✖ installing grunt'; sudo npm install -g grunt-cli; @sudo npm i --save-dev make
90. tasks testes pré-processadores js/css lint criar sprites concatenação otimização de imagens
91. task
    compass:prod MAKEFILE grunt.initConfig({ compass: { dev: { /* ... */ }, prod: { options: { sassDir: 'src/scss', cssDir: 'build/css', imagesDir: 'src/img', generatedImagesDir: 'build/img', outputStyle: 'compressed', noLineComments: true }}}}); js
92. https://github.com/vigetlabs/grunt-complexity
93. executando $ grunt compass:dev $ grunt compass:prod
94. https://github.com/davidsonfellipe/grunt-workflow
95. http://bower.io/
96. http://yeoman.io/
97. automatize suas configurações https:/ /github.com/davidsonfellipe/dotfiles
98. PERFORMANCE
99. Qual impacto da performance? baixas conversões baixo engajamento altas taxas de rejeição
100. https://github.com/davidsonfellipe/awesome-wpo
101. http://browserdiet.com/pt
102. https://github.com/davidsonfellipe/keepfast/
103. OTIMIZAR A
     EXPERIÊNCIA DO USUÁRIO
105. QI de 30 bilhões de vezes superior ao de um ser humano
106. COMO SE MANTER ATUALIZADO?
107. http://braziljs.org/
108. http://web-design-weekly.com/
109. http://html5weekly.com/
110. http://javascriptweekly.com
113. Aprenda com o tempo código limpo testes preocupação com manutenibilidade e extensibilidade
115. fellipe.com/talks github.com/davidsonfellipe twitter.com/davidsonfellipe obrigado pelos peixes