Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Guia para se tornar uma Pessoa Desenvolvedora F...
Search
Afonso Pacifer
May 15, 2024
Programming
0
17
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
Afonso Pacifer
May 15, 2024
Tweet
Share
More Decks by Afonso Pacifer
See All by Afonso Pacifer
Open Source e Developer Experience
afonsopacifer
0
33
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
4
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
0
13
Recriando o React do Zero em 10 minutos
afonsopacifer
0
26
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
110
HTML 5.3: O que existe além de a11y e SEO?
afonsopacifer
0
80
State of JS 2022
afonsopacifer
0
200
Welcome CSS LV5
afonsopacifer
0
180
No pain no gain
afonsopacifer
0
150
Other Decks in Programming
See All in Programming
How to Break into Reading Open Source
kaspth
2
220
Why Prism?
kddnewton
4
1.7k
A New Era of Testing
mannodermaus
2
510
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
2
560
XStateでReactに秩序を与えたい
gizm000
0
730
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
800
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
390
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
The Shape of a Service Object
inem
0
520
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
A designer walks into a library…
pauljervisheath
201
24k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
How to name files
jennybc
75
98k
Docker and Python
trallard
39
3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Atom: Resistance is Futile
akmur
261
25k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
A Philosophy of Restraint
colly
202
16k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
Transcript
afonsopacifer.github.io Guia para se tornar uma Pessoa Desenvolvedora 1 Front
end Especialista Descolada
Afonso Pacifer @afonsopacifer afonsopacifer.github.io DevRel & Front-End Specialist 2
3 SP
None
5 https://roadmap.sh/frontend
6
Sem Roadmaps E sem frameworks 7
8 ```Uma das melhores decisões da minha carreira como desenvolvedor
foi ir além de apenas usar ferramentas…`` - Afonso Pacifer
Como faz? 9
2014 4 anos de carreira Full Stack
Fr on t in BH
Tracking.js https://trackingjs.com/
https://trackingjs.com/
None
Eu me demiti para Estudar 15
16
Write code Every Day 17
18
19
O Básico HTML === Semântica?
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
Importa Para quem?
Existe diferença Div X Button?
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
Sobre empatia A hora de criar um componente que não
existe no HTML
CSS Não usar framework para aprender
Aprendi a Ler a especificação 27
Achei algo interessante 28
CSS GRID Layout 29 2015
30 2/2
31
32
33
34
35
CSS Das Ruas 36
Jogos Apenas Com CSS 37 counter-increment: score; content: "Score "counter(score)"/50";
.egg-check:checked + .score-up
38
Me Tornei um Evangelista CSS 39
Eu não Sabia Javascript 40
Mas Eu Sabia aprender 41
Referencias De Front Usavam Node.js 42
Front in Vale 43
44
Banana CSS https://github.com/bananacss 🍌 The Brazilian CSS superset.
46
47 E o Browser?
Millenium.js https://github.com/millenniumjs 🚀 Render your front-end in less than 12
parsecs.
https://github.com/millenniumjs
50 Prog. Funcional?
https://github.com/burnoutjs 🎮 The 2D game engine for manage collisions.
https://github.com/burnoutjs
53 Testes, Isomorfismo?
https://github.com/afonsopacifer/nomsjs N.O.M.s 🔮 Universal/isomorphic javascript unit tests for witches.
https://github.com/afonsopacifer/nomsjs
Por fim 56
Mercado de Trabalho? 57
Hard Skills? 58
59
60 N.O.M.s Dev Descolado
Javascript Das Ruas 61
Reddit 62
Soft Skills 63
Comunidades 64
A comunidade mudou a minha vida 65
66
67 Developer Relations
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
Reinventar a roda? 69
@afonsopacifer Obrigado Dev Tec afonsopacifer.github.io 70