O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.

No passado um sábio disse que "CSS é simples de aprender, mas leva muitos anos para se tornar um mestre". Nessa palestra não falaremos sobre roadmaps de estudo ou tecnologias de um futuro distante, mas sim sobre caminhos não óbvios e um presente ofuscado por pré / pós processadores, bibliotecas / frameworks e CSS in JS.

Transcript

1. … 1
2. 2 ```CSS é simples para aprender mas leva anos para se tornar um(a) mestre(a)``
3. Sem Roadmaps E sem frameworks 3
4. afonsopacifer.github.io O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5 4
5. Afonso Pacifer @afonsopacifer afonsopacifer.github.io DevRel & Front-End Specialist 5
6. 2015 6
8. Conferência CSS Brasil http://henriquesilverio.github.io/eventos/conferencia-css-brasil-2015 8
9. RIO > SP 9 Rodoviária e amizades (6h)
12. 9 / 05 / 15 12
15. Começando pelo CSS 5 15
16. CSS 5? 16
17. Que? E o CSS4?
18. Já ta no CSS 5?
19. Lek,
20. Voltando a base
21. World Wide Web Consortium https://www.w3.org/
22. Write Specs Implement Features
23. CSS 4 ? CSS 5 ?
24. Entendendo O passado para explicar o futuro
25. CSS timeline
26. 1994 Bert Boss se interessa E começa a ajudar no projeto. Håkon Wium Lie começa o primeiro rascunho doCSS. A primeira apresentação sobre CSS acontece em Chicago na WWW Conference.
27. 1995 A W3C se interessa. É criada a primeira lista de e-mails.
28. 1996 W3C publica o CSS 1.0 Internet Explorer 3 é o primeiro browser a suportar CSS, Seguido pelo Netscape 4 e o Opera 3.5.
29. 1997 O CSS Working Group é o fi cialmente criado.
30. 1998 W3C publica a especi fi cação CSS 2.0. Erick Mayer lança a developer suit para o Opera. Esse project melhora o suporte a CSS.
31. 2011 W3C lança a especi fi cação do CSS 2.1.
32. 2014 W3C lança o HTML 5. O CSS3 deixa seu estado de draft e se torna uma recommendation.
33. 1994 1995 1996 1997 1998 2011 2014 2020 CSS 2.0 CSS 2.1
34. A solução?
35. CSS 3
36. Muito mais que animations, fl exbox, borders, etc…
37. CSS 2.1 CSS 3 All CSS Specs Version 2.1 Flex box Selectors Grid Layout Custom properties Media queries LV 1 LV 1 LV 2 LV 4 LV 5 Modules Monolito
38. Um CSS 4 ou CSS 5 Global não faz sentido
39. O que acontece dentro de um level?
40. Working Draft WD Canditate Recommendation CR Proposed Recommendation PR Recommendation REC
41. Conheça os Editores
42. Voltando… 42
44. Primeiro Code in the Dark 44 2016
46. @deividmarques 46 Deivid Marques Frontend Developer #Usability #Accessibility Dica sobre como Melhorar com CSS?
47. 47 ```adquira um conhecimento profundo de HTML semântico e entenda sobre eixos x,y e z existente nas telas que desenvolvemos, conhecer profundamente de DOM e o CSSOM ajudará a ter um CSS escalável, performático e acessível.``` - Deivid Marques 1/2
48. 48 ```Errar e aprender faz parte, então se divirta e solte seu lado artístico, desenhando, pintando, e animando pixels com responsabilidade e acessibilidade, pois além de tudo o código precisa ser compreensível pra humanos e máquinas``` - Deivid Marques 2/2
49. Primeira Front end Week 49 2016
53. 53 2/2
56. 2015 2016 56 Zé mané Meetup CSS no Google
57. O que rolou nesse ano? 57
59. @omariosouto 59 Dev Soutinho Lead Software Enginee. Alura & Creator at DevSoutinho Mario Souto Como escrever CSS Sem gambiarras?
60. 60 ```Não dá pra parar chutar CSS sem tentar entender o que você quer fazer``` - Mario Souto (Dev Soutinho)
61. Voltando para 2015… 61
63. Um mês após a Conf CSS 63
66. Aprendi a Ler a especificação 66
67. Achei algo interessante 67
68. CSS GRID Layout 68 2015
71. @samorim02 71 Simone Amorim A dama Do CSS CSS Software Engineer em Berlim Como escrever CSS Sem o processo de tentativa e erro?
72. 72 ```O segredo é iniciar os estudos pelo básico e entender de fato a função de cada propriedade. Pare de tentar aprender na base de tentativa e erro, sei que é muito conteúdo, mas se desafie com a meta de todo dia aprender e entender o que uma propriedade faz, no fim do ano você vai ter aprendido 365 coisas novas e vai alavancar tua experiência com CSS.``` - Simone Amorim (A Dama do CSS)
73. Voltando para 2015… 73
74. Write code Every Day 74
76. 09 / 05 / 15 76
78. Eu me demiti para Estudar 78
79. Front in Rio 79 Adeus joguinhos
81. O outro Lado do Evangelista CSS 81
84. @maujor 84 maujor Um dinossauro apaixonado por Padrões Web Mauricio Samy Silva Manda uma mensagem Para Conferência CSS Brasil
85. 85 ```Nunca é tarde para aprender algo novo``` Frase preferida do Maujor, "o dinossauro das CSS", hoje com 76 anos de idade
86. Me Tornei um Evangelista CSS 86
87. Jogos Apenas Com CSS 87 counter-increment: score; content: "Score "counter(score)"/50"; .egg-check:checked + .score-up
88. CSS Das Ruas 88
89. Eu não Sabia Javascript 89
90. Mas Eu Sabia aprender 90
91. Front in Vale 91
95. veio da front-end Week… 95
96. @_Gui_Souza 96 Guilherme de Souza Founder & Software Engineer @ Data² | Creator of Infleux Fala ai mano
97. 97 ```De um lado, 99,9% do dinheiro no mundo, é digital. Do outro 99,9% dos usuários de computador não sabem programar. A sua responsabilidade como Desenvolvedor, é tornar o mundo acessível criando interfaces que conectem esses dois lados.``` - Guilherme Souza 1/2
98. 98 ```A sua responsabilidade como membro da comunidade de Desenvolvimento de software é eliminar a necessidade dessas interfaces.``` - Guilherme Souza 2/2
99. Comunidades 99
100. A comunidade mudou a minha vida 100
102. Responsabilidade Com suas vozes 102
103. @wharleyornelas 103 wharley ornelas Software Engineer O que a comunidade Representa para você?
104. 104 ```O momento que entrei para a comunidade foi o momento da minha virada de chave.``` - Wharley Ornelas 1/3
105. 105 ```Que além do meu desenvolvimento profissional me possibilitou sonhar e realizar sonhos que ainda não tinha sonhado, como por exemplo um dia palestrar para 500 pessoas, trabalhar para uma grande empresa em Berlim Alemanha``` .``` - Wharley Ornelas 2/3
106. 106 ```Adquirir alguns bens que melhoraram a minha qualidade de vida e da minha família. Além do amplo grupo de amigos que ganhei, e isso você sabe que não tem dinheiro que pague.``` - Wharley Ornelas 3/3
107. Hard Skills? 107
109. Javascript Das Ruas 109
110. Reddit 110
111. @ananeridev 111 Ana Beatriz Neri Senior Software Engineer @Rocketseat @Womakerscode @WomenTechmakers Como a comunidade Te ajudou na carreira?
112. 112 ```A comunidade ajudou na minha carreira de diversas formas positivas mas com certeza a questão da comunicação foi super marcante. Saber com quem como e quando usar as palavras certas e além de sempre buscar formas divertidas de trazer exemplos``` - Ana Beatriz Neri
113. Soft Skills 113
114. Falando Sério 114
115. @diogomoretti_ 115 Diogo Moretti DevRel & DX @frontendbr @frontinfloripa @floripajs Por que você veio de longe para o evento?
116. 116 ```EVENTO É O MAIOR INVESTIMENTO QUE VOCÊ PODE FAZER! Eu não compro cursos e não moro em São Paulo, mas hoje estou aqui para meu 31º evento na cidade. Sei que sai mais caro que um curso, porém, PRA MIM, o ganho é maior. Sempre encarei um evento com 10% de conteúdo e 90% de networking. Frameworks se vão, amizades ficam. INTERAJAM!`` - Diogo Moretti
117. Como me tornei um mestre no CSS? 117
118. 118 ```Se enxerguei um pouco mais longe,é porque me coloquei nos ombros de gigantes.`` - Newton
119. Hoje eu trouxe aqui a voz de alguns desses gigantes 119
120. Uma provocação & A minha dica 120
122. 122 ```Uma das melhores decisões da minha carreira como desenvolvedor foi ir além de apenas usar ferramentas, eu decidi tentar criá-las`` - Afonso Pacifer
123. Agora é com vocês 123
124. @afonsopacifer Obrigado Conf CSS Brasil afonsopacifer.github.io 124