Front-end na vida real

O que faz um front-end? Quais as principais tecnologias utilizadas nessa área, como está o mercado de trabalho e como podemos encontrar a comunidade? Vamos debater sobre assuntos legais pra que você fique com vontade de conhecer um pouquinho sobre esse maravilhoso mundo.

Transcript

1. front-end na vida real
2. S Simone Amorim Mother, WWcode Leader, Organizer of FEMUGPE, Developer @samorim02 @simoneas02 simoneas02.github.io
3. Mother
4. I love running And bike riding!
5. I’m CSS Evangelista
6. O que é Front-End?
7. Definição Client Side VS Server Side
8. Definição Client Side
9. Definição O que faz um desenvolvedor Front-End?
10. Definição ou melhor… Front-End Engineer UI Developer Client Side Developer
11. Definição Vamos focar mais na função e menos no nome!
12. Cria interfaces rápidas, adaptáveis e interativas. “ - Afonso Pacifer
13. Como Faz?
14. Como?
15. Espera… O que é mesmo Como?
16. Como?
17. Simples assim? Como?
18. Marcação Estilo Comportamento
19. Marcação!
20. Markup w3.org/html/
21. JSX WAI-ARIA Markup
22. HTML WAI-ARIA microdados Open Graph Twitter Cards Template engine Validações Padrões HTML5.1 Markup
23. Estilo!
24. Style w3.org/Style/CSS/
25. Style
26. CSS Testes Lint Metodologias de organização pré-processadores Pós processadores Animações Padrões CSS Layouts Resets Modularização Grids UI Frameworks Style
27. Comportamento!
28. Behavior TC39 github.com/tc39
29. babeljs.io/ Behavior
30. Behavior Javascript Ecma 2015/ES6 Diversos Testes Padrões Frameworks MV* Bibliotecas TDD BDD Coverage de testes Modularização Transpilers pré-processadores
31. WorkFlow!
32. Workflow nodejs.org/ Ambiente!
33. Workflow git-scm.com/ Controle de versão!
34. Workflow yarnpkg.com/ Dependências!
35. Workflow yeoman.io/ Scaffolding!
36. Workflow gulpjs.com/ Task runner!
37. Workflow mochajs.org/ Tests!
38. Workflow developer.chrome.com/devtools Debug!
39. Workflow travis-ci.org/ Integração Continua!
40. Workflow Deploy!
41. BuzzWords!
42. Você não precisa saber tudo!
43. Áreas que você pode gostar
44. Accessibility Áreas Visual/Motora/Testes
45. Adaptive Web Design Áreas RWD/Cross browser/Cross device
46. SEO Áreas Pesquisa/ferramentas/testes
47. Performance Áreas De 80% a 90% é Responsabilidade do Front-End
48. Segurança Áreas Cross-Site Scripting
49. Frameworks War!
50. War X X
51. #UseThePlatform War
52. Front-End Power!
53. Progressive Web Apps afonsopacifer.github.io/react-pomodoro/ Install (Web manifest) Offline First (Service Workers) Progressive
54. The Physical Web google.github.io/physical-web
55. Web VR developers.google.com/web/fundamentals/vr/ aframe.io
56. App Híbridos electron.atom.io
57. Compartilhe!
58. github.com Contribua!
59. codepen.io Divirta-se!
60. Comunidade!
61. Eventos facebook.com/femugpe/
62. Eventos facebook.com/femugpe/
63. Eventos codeinthedark.com.br/
64. Mercado de Trabalho!
65. Mercado github.com/frontendbr/vagas
66. Como Começar?
67. github.com/frontendbr/forum Baby steps
68. github.com/training-center Mentoria! Baby steps
69. Baby steps
70. Baby steps github.com/kamranahmedse/developer-roadmap
71. Jogue o jogo segundo as regras, não segundo as outras pessoas jogam. “ - Afonso Pacifer
72. Não deixe o medo de jogar impedir que você jogue! “ - Raphael Amorim
73. Obrigada! @samorim02 @simoneas02 simoneas02.github.io