O maravilhoso mundo do front-end... não

March 19, 2016 - At DevParana

Transcript

1. O Maravilhoso mundo do front-end ou não!
2. @mteusor)z mateusor)z mateusor)z.com
4. O que preciso saber para ser…
6. Basicamente! HTML CSS JAVASCRIPT
7. Será que é só isso mesmo? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
9. pré-processadores task-runners ES* WebComponents testes performance …
10. Aprenda uma coisa de cada vez e quando aprender parta pra outra.
11. A melhor forma de aprender é praMcar/contribuir
12. A melhor forma de aprender é praMcar/contribuir
13. Mas o principal…
14. Ache um editor que você se sinta confortável, porque você vai passar o dia inteiro nele
18. 1995 2015
21. Testes
24. Performance
26. “Otimize a performance do front-end primeiro, é onde 80/90% do tempo de resposta ao usuário é gasto.” - Steve Souders
27. h"ps:/ /goo.gl/kJUptW
28. Aprenda Git
29. Não tenha medo do terminal
30. Com tantas ferramentas hoje para aprender, dá até uma saudade…
34. O melhor do front-end, é poder dar vida as coisas
35. h"p:/ /wen3n.github.io/underlineJS/
36. h"p:/ /devtoolschallenger.com/
37. A web está evoluindo muito!
38. CSS
40. Pré processador não faz mágica!
42. html { --color: blue; } body { background-color: var(--color); } Variáveis CSS
43. Web Components HTML Imports Templates Shadow DOM Custom Elements
44. Construindo um componente de tab hoje
45. Construindo um componente de tab hoje
46. Construindo um componente de tab hoje
47. Construindo um componente de tab hoje
48. <x-tabs> <x-tab>Tab 1</x-tab> <x-tab>Tab 2</x-tab> <x-tab>Tab 3</x-tab> </x-tabs> Web Components Menos marcação. Menos JS. Menos confusão
49. Mantenha um padrão com sua equipe
50. h"ps:/ /github.com/airbnb/javascript
51. h"ps:/ /github.com/rwaldron/idioma3c.js
52. Para o CSS também…
54. Dicas para ser um front-end fora da curva
55. Não seja retroativo
57. Crie e Contribua em projetos
58. h"p:/ /webcomponentsweekly.me/
60. h"p:/ /harmonicjs.com/
61. h"p:/ /harmonicjs.com/
62. Seja Proativo!
63. Se não existe nada parecido, vai lá e crie!
64. Você não precisa saber tudo
65. Conheça diversos assuntos de forma geral. Mas seja expert em uma área!
67. Qual é a dica de outros devs para ser um front-end fora da curva?
68. “always focus on what you want to create first and then create the technology, the open source projects, the presenta7ons set yourself as a goal to create a very cool product or demo and then figure out the tech I created socket.io because I was working on enabling real7me classroom collabora7on, so students could work on documents, it was a "side effect” @rauchg
69. @wesbos “The best way to constantly improve yourself as a front end developer is to always be crea7ng things - whether that is a tutorial or an open source project, the more you make the beDer you get.”
70. @addyosmani “The key is to never stop learning. You do that by just wri7ng code and experimen7ng, sharing your ideas with others through ar7cles. If what you create is useful enough, share your ideas through open-source projects. Even contribu7ng to projects by other people is great because you're helping improve something exis7ng by making it beDer and hopefully learning in the process. Speaking at events is also a fantas7c way to force yourself to get beDer acquainted with a subject. All of those things help a lot.”
71. #4 Escreva ar)gos!
72. #5 Tenha heróis
73. #6 Par)cipe da comunidade
74. #7 Dê a cara a tapa
76. Inventa o Futuro
77. Obrigado @mteusor)z mateusor)z.com