Guia do Front-end das galáxias

Guia do Front-end das galáxias

054c583ad5dc09a861874e14dcb43e4c?s=128

Davidson Fellipe

August 02, 2014
Tweet

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
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  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

  32. None
  33. None
  34. None
  35. None
  36. CRIO UM PADRÃO?

  37. BUSCO POR UM PADRÃO?

  38. None
  39. None
  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
  53. None
  54. None
  55. None
  56. None
  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

  84. None
  85. processo de deploy

  86. TASK RUNNERS

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

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

  111. None
  112. None
  113. Aprenda com o tempo código limpo testes preocupação com manutenibilidade

    e extensibilidade
  114. None
  115. fellipe.com/talks github.com/davidsonfellipe twitter.com/davidsonfellipe obrigado pelos peixes