Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Afonso Pacifer

January 21, 2023
Tweet

More Decks by Afonso Pacifer

Other Decks in Programming

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. 2015
    6

    View Slide

  7. 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. 13

    View Slide

  14. 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. 43

    View Slide

  44. Primeiro


    Code in the Dark
    44
    2016

    View Slide

  45. 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. 50

    View Slide

  51. 51

    View Slide

  52. 52

    View Slide

  53. 53
    2/2

    View Slide

  54. 54

    View Slide

  55. 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. 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. 62

    View Slide

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

    View Slide

  64. 64

    View Slide

  65. 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. 69

    View Slide

  70. 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. 75

    View Slide

  76. 09 / 05 / 15
    76

    View Slide

  77. 77

    View Slide

  78. Eu me demiti
    para Estudar
    78

    View Slide

  79. Front in Rio
    79
    Adeus joguinhos

    View Slide

  80. 80

    View Slide

  81. O outro Lado do


    Evangelista CSS
    81

    View Slide

  82. 82

    View Slide

  83. 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. 92

    View Slide

  93. 93

    View Slide

  94. 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. 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. 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. 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