Guia do Frontend

Uma simples trilha pra quem está querendo entrar na área de frontend. Palestra apresentada para alunos do IFAL.

Transcript

1. Desenvolvedor Front End Guia do Leandro Vitor
2. ME Html ~ 2006 Lead Front End Engineer NYX Knowledge ~ 2012 @leandrolpvitor vitoleandro
3. Project 1
6. CURIOSIDADE Importante combustível para aprender mais, testar coisas novas e lidar coma tentativa e erro.
7. DÚVIDA FRONTEND DEVELOPMENT UI ENGINEER FRONTEND ENGINEER WEB DEVELOPER PROJETISTA DE INTERFACES
8. ISSO, NUNCA ! FRONT-END UNICORN FRONT-END UX NINJA FRONT-END NINJA
9. O QUE FAZ UM ?
10. HTML
11. HTML começando do fazer de qualquer jeito ao código com sua devida semântica
12. CSS
13. CSS começando do remover sublinhado de links até a sua relevância quanto a apresentação visual, animações, interações e responsividade.
14. JavaScript
15. JAVASCRIPT da validação de um formulário até ferramentas de grande relevância para a melhoria da experiência do usuário
16. INTEGRAÇÃO diferentes navegadores diferentes resoluções diferentes versões diferentes dispositivos
17. COMEÇAR A SEGUIR REFERÊNCIAS !
18. GRINGOS @mathias @sindresorhus @stoyanstafanov @paul_irish @value_of @rmurphey @souders @addyosmani @codepo8 @stubbornella @mathias @rauchg
19. BRAZUCAS @marcelduran @leobalter @bergbrandt @millermedeiros @zenorocha @jaydson @almirfilho @fabiomcosta @eduardolundgren @caio_gondim @sergio_caelum @maujor
20. O QUE PRECISO APRENDER?
21. HTML, CSS, JAVACRIPT, FEATURE DETECTION, REPAINT, REFLOW, PRE-PROCESSADORES, HTTP, CSRF, XSS, TIME FUNCTION PARA ANIMAÇÕES, SVG, CANVAS, LOCALSTORAGE, WEBCOMPONENTS, WEBSOCKETS, SHADOW DOM, FERRAMENTAS PARA DEBUG, SISTEMA DE GRIDS, SCHEMA.ORG, SEO … E PORQUE NÃO ? GESTÃO DE DEPENDÊNCIAS, FRAMEWORKS MVC, TESTES, ANALISADORES DE QUALIDADE DE CÓDIGO, TASK RUNNERS, PERFORMANCE …
22. COMO POR EM PRÁTICA?
23. ESCOLHER UM EDITOR
28. CRIO UM PADRÃO?
33. O QUE APRENDER ? Boa organização de arquivos Estrutura do HTML, CSS e JS Projetos em constante evolução
34. NÃO USE !
35. GIT, MERCURIAL … Trabalhar com repositórios Entender branches, tags … Pull requests Issues
38. GERENCIE SEU TEMPO!
42. COMO SE MANTER ATUALIZADO?
47. APRENDA COM O TEMPO ! Código limpo Testes Preocupação com a manutenibilidade e extensibilidade
48. OBRIGADO ! Html ~ 2006 Lead Front End Engineer NYX Knowledge ~ 2012 @leandrolpvitor vitoleandro