8
```Uma das melhores decisões da minha
carreira como desenvolvedor foi ir além
de apenas usar ferramentas…``
- Afonso Pacifer
Slide 9
Slide 9 text
Como faz?
9
Slide 10
Slide 10 text
2014
4 anos de carreira
Full Stack
Slide 11
Slide 11 text
Fr
on
t in BH
Slide 12
Slide 12 text
Tracking.js
https://trackingjs.com/
Slide 13
Slide 13 text
https://trackingjs.com/
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
Eu me demiti
para Estudar
15
Slide 16
Slide 16 text
16
Slide 17
Slide 17 text
Write code
Every Day
17
Slide 18
Slide 18 text
18
Slide 19
Slide 19 text
19
Slide 20
Slide 20 text
O Básico
HTML === Semântica?
Slide 21
Slide 21 text
Semântica é o estudo do signi
fi
cado.
[1]
Incide sobre a relação entre signi
fi
cantes,
tais como palavras, frases, sinais e símbolos,
e o que eles representam, a sua denotação.
Semântica
Slide 22
Slide 22 text
Importa
Para quem?
Slide 23
Slide 23 text
Existe diferença
Div X Button?
Slide 24
Slide 24 text
Live Code
https://codepen.io/afonsopacifer/pen/BaPmKXr
• Aparência
• UI feedbacks (Hover, Active, etc…)
• Acessível via teclado (tabIndex)
•Leitor de tela (Wai-Aria)
•Evento click mapeado para teclado
Slide 25
Slide 25 text
Sobre empatia
A hora de criar um componente que
não existe no HTML
Slide 26
Slide 26 text
CSS
Não usar framework
para aprender
Slide 27
Slide 27 text
Aprendi a Ler a
especificação
27
Slide 28
Slide 28 text
Achei algo
interessante
28
Slide 29
Slide 29 text
CSS
GRID
Layout
29
2015
Slide 30
Slide 30 text
30
2/2
Slide 31
Slide 31 text
31
Slide 32
Slide 32 text
32
Slide 33
Slide 33 text
33
Slide 34
Slide 34 text
34
Slide 35
Slide 35 text
35
Slide 36
Slide 36 text
CSS
Das Ruas
36
Slide 37
Slide 37 text
Jogos
Apenas
Com CSS
37
counter-increment: score;
content: "Score "counter(score)"/50";
.egg-check:checked + .score-up
Slide 38
Slide 38 text
38
Slide 39
Slide 39 text
Me
Tornei um
Evangelista CSS
39
Slide 40
Slide 40 text
Eu
não Sabia
Javascript
40
Slide 41
Slide 41 text
Mas
Eu Sabia
aprender
41
Slide 42
Slide 42 text
Referencias De Front
Usavam Node.js
42
Slide 43
Slide 43 text
Front in Vale
43
Slide 44
Slide 44 text
44
Slide 45
Slide 45 text
Banana CSS
https://github.com/bananacss
🍌 The Brazilian CSS superset.
Slide 46
Slide 46 text
46
Slide 47
Slide 47 text
47
E o Browser?
Slide 48
Slide 48 text
Millenium.js
https://github.com/millenniumjs
🚀 Render your front-end in less than 12 parsecs.
Slide 49
Slide 49 text
https://github.com/millenniumjs
Slide 50
Slide 50 text
50
Prog. Funcional?
Slide 51
Slide 51 text
https://github.com/burnoutjs
🎮 The 2D game engine for manage collisions.
Slide 52
Slide 52 text
https://github.com/burnoutjs
Slide 53
Slide 53 text
53
Testes,
Isomorfismo?
Slide 54
Slide 54 text
https://github.com/afonsopacifer/nomsjs
N.O.M.s
🔮 Universal/isomorphic javascript unit tests for witches.
Slide 55
Slide 55 text
https://github.com/afonsopacifer/nomsjs
Slide 56
Slide 56 text
Por fim
56
Slide 57
Slide 57 text
Mercado de
Trabalho?
57
Slide 58
Slide 58 text
Hard Skills?
58
Slide 59
Slide 59 text
59
Slide 60
Slide 60 text
60
N.O.M.s
Dev Descolado
Slide 61
Slide 61 text
Javascript
Das Ruas
61
Slide 62
Slide 62 text
Reddit
62
Slide 63
Slide 63 text
Soft Skills
63
Slide 64
Slide 64 text
Comunidades
64
Slide 65
Slide 65 text
A comunidade
mudou a minha vida
65
Slide 66
Slide 66 text
66
Slide 67
Slide 67 text
67
Developer Relations
Slide 68
Slide 68 text
68
```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
Slide 69
Slide 69 text
Reinventar a
roda?
69
Slide 70
Slide 70 text
@afonsopacifer
Obrigado
Dev Tec
afonsopacifer.github.io
70