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
   

   View Slide

2. 2
   ```CSS é simples para aprender mas leva anos
   para se tornar um(a) mestre(a)``
   

   View Slide

3. Sem Roadmaps
   
   
   E sem frameworks
   3
   

   View Slide

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

   View Slide

5. Afonso
   
   
   Pacifer
   @afonsopacifer
   afonsopacifer.github.io
   DevRel & Front-End Specialist
   5
   

   View Slide

6. View Slide

7. View Slide

8. Conferência
   
   
   CSS Brasil
   http://henriquesilverio.github.io/eventos/conferencia-css-brasil-2015
   8
   

   View Slide

9. RIO > SP
   9
   Rodoviária e amizades (6h)
   

   View Slide

10. View Slide

11. View Slide

12. 9 / 05 / 15
    12
    

    View Slide

13. View Slide

14. View Slide

15. Começando pelo CSS 5
    15
    

    View Slide

16. CSS 5?
    16
    

    View Slide

17. Que?
    E o CSS4?
    

    View Slide

18. Já ta no
    CSS 5?
    

    View Slide

19. Lek,
    

    View Slide

20. Voltando a base
    

    View Slide

21. World
    Wide
    Web
    Consortium
    https://www.w3.org/
    

    View Slide

22. Write Specs Implement Features
    

    View Slide

23. CSS 4 ?
    CSS 5 ?
    

    View Slide

24. Entendendo
    O passado
    para explicar o futuro
    

    View Slide

25. CSS timeline
    

    View Slide

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.
    

    View Slide

27. 1995
    A W3C se interessa.
    É criada a primeira lista de e-mails.
    

    View Slide

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.
    

    View Slide

29. 1997 O CSS Working Group
    é o
    fi
    cialmente criado.
    

    View Slide

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.
    

    View Slide

31. 2011 W3C lança a especi
    fi
    cação do
    CSS 2.1.
    

    View Slide

32. 2014
    W3C lança o
    HTML 5.
    O CSS3 deixa seu estado
    de draft e se torna uma
    recommendation.
    

    View Slide

33. 1994
    1995
    1996
    1997
    1998 2011
    2014
    2020
    CSS 2.0 CSS 2.1
    

    View Slide

34. A solução?
    

    View Slide

35. CSS 3
    

    View Slide

36. Muito mais que animations,
    fl
    exbox,
    borders,
    etc…
    

    View Slide

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
    

    View Slide

38. Um CSS 4 ou CSS 5
    Global não faz sentido
    

    View Slide

39. O que acontece
    dentro de um level?
    

    View Slide

40. Working Draft
    WD
    Canditate
    Recommendation
    CR
    Proposed
    Recommendation
    PR
    Recommendation
    REC
    

    View Slide

41. Conheça os
    Editores
    

    View Slide

42. Voltando…
    42
    

    View Slide

43. View Slide

44. Primeiro
    
    
    Code in the Dark
    44
    2016
    

    View Slide

45. View Slide

46. @deividmarques
    46
    Deivid
    Marques
    Frontend Developer #Usability #Accessibility
    Dica sobre como
    Melhorar com CSS?
    

    View Slide

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
    

    View Slide

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
    

    View Slide

49. Primeira
    
    
    Front end Week
    49
    2016
    

    View Slide

50. View Slide

51. View Slide

52. View Slide

53. 53
    2/2
    

    View Slide

54. View Slide

55. View Slide

56. 2015
    
    
    2016
    56
    Zé mané
    Meetup CSS no Google
    

    View Slide

57. O que rolou
    nesse ano?
    57
    

    View Slide

58. View Slide

59. @omariosouto
    59
    Dev Soutinho
    Lead Software Enginee. Alura & Creator at DevSoutinho
    Mario Souto
    Como escrever CSS
    Sem gambiarras?
    

    View Slide

60. 60
    ```Não dá pra parar chutar CSS sem
    tentar entender o que você quer fazer```
    - Mario Souto (Dev Soutinho)
    

    View Slide

61. Voltando para
    2015…
    61
    

    View Slide

62. View Slide

63. Um mês após a
    Conf CSS
    63
    

    View Slide

64. View Slide

65. View Slide

66. Aprendi a Ler a
    especificação
    66
    

    View Slide

67. Achei algo
    interessante
    67
    

    View Slide

68. CSS
    
    
    GRID
    
    
    Layout
    68
    2015
    

    View Slide

69. View Slide

70. View Slide

71. @samorim02
    71
    Simone Amorim
    A dama
    
    
    Do CSS
    CSS Software Engineer em Berlim
    Como escrever CSS
    Sem o processo de
    tentativa e erro?
    

    View Slide

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)
    

    View Slide

73. Voltando para
    2015…
    73
    

    View Slide

74. Write code
    
    
    Every Day
    74
    

    View Slide

75. View Slide

76. 09 / 05 / 15
    76
    

    View Slide

77. View Slide

78. Eu me demiti
    para Estudar
    78
    

    View Slide

79. Front in Rio
    79
    Adeus joguinhos
    

    View Slide

80. View Slide

81. O outro Lado do
    
    
    Evangelista CSS
    81
    

    View Slide

82. View Slide

83. View Slide

84. @maujor
    84
    maujor
    Um dinossauro apaixonado por Padrões Web
    Mauricio Samy Silva
    Manda uma mensagem
    Para Conferência CSS Brasil
    

    View Slide

85. 85
    ```Nunca é tarde para aprender algo
    novo```
    Frase preferida do Maujor, "o dinossauro das CSS", hoje com 76 anos de idade
    

    View Slide

86. Me
    
    
    Tornei um
    Evangelista CSS
    86
    

    View Slide

87. Jogos
    
    
    Apenas
    
    
    Com CSS
    87
    counter-increment: score;
    content: "Score "counter(score)"/50";
    .egg-check:checked + .score-up
    

    View Slide

88. CSS
    
    
    Das Ruas
    88
    

    View Slide

89. Eu
    
    
    não Sabia
    Javascript
    89
    

    View Slide

90. Mas
    
    
    Eu Sabia
    aprender
    90
    

    View Slide

91. Front in Vale
    91
    

    View Slide

92. View Slide

93. View Slide

94. View Slide

95. veio da front-end
    Week…
    95
    

    View Slide

96. @_Gui_Souza
    96
    Guilherme de
    Souza
    Founder & Software Engineer @ Data² | Creator of Infleux
    Fala ai mano
    

    View Slide

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
    

    View Slide

98. 98
    ```A sua responsabilidade como
    membro da comunidade de
    Desenvolvimento de software é eliminar
    a necessidade dessas interfaces.```
    - Guilherme Souza
    2/2
    

    View Slide

99. Comunidades
    99
    

    View Slide

100. A comunidade
     mudou a minha vida
     100
     

     View Slide

101. View Slide

102. Responsabilidade
     
     
     Com suas vozes
     102
     

     View Slide

103. @wharleyornelas
     103
     wharley
     ornelas
     Software Engineer
     O que a comunidade
     Representa para você?
     

     View Slide

104. 104
     ```O momento que entrei para a
     comunidade foi o momento da minha
     virada de chave.```
     - Wharley Ornelas
     1/3
     

     View Slide

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
     

     View Slide

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
     

     View Slide

107. Hard Skills?
     107
     

     View Slide

108. View Slide

109. Javascript
     
     
     Das Ruas
     109
     

     View Slide

110. Reddit
     110
     

     View Slide

111. @ananeridev
     111
     Ana Beatriz
     Neri
     Senior Software Engineer @Rocketseat @Womakerscode
     @WomenTechmakers
     Como a comunidade
     Te ajudou na carreira?
     

     View Slide

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
     

     View Slide

113. Soft Skills
     113
     

     View Slide

114. Falando Sério
     114
     

     View Slide

115. @diogomoretti_
     115
     Diogo
     
     
     Moretti
     DevRel & DX @frontendbr @frontinfloripa @floripajs
     Por que você veio de longe
     para o evento?
     

     View Slide

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
     

     View Slide

117. Como me tornei
     um mestre no
     CSS?
     117
     

     View Slide

118. 118
     ```Se enxerguei um pouco mais
     longe,é porque me coloquei nos
     ombros de gigantes.``
     - Newton
     

     View Slide

119. Hoje eu trouxe
     aqui a voz de
     alguns desses
     gigantes
     119
     

     View Slide

120. Uma provocação
     
     
     &
     
     
     A minha dica
     120
     

     View Slide

121. View Slide

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
     

     View Slide

123. Agora é com
     vocês
     123
     

     View Slide

124. @afonsopacifer
     Obrigado
     
     
     Conf CSS Brasil
     afonsopacifer.github.io
     124
     

     View Slide