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
70
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
Developer Experience (DevEx) no mundo Front-End: Do Ruby ao Next.js
afonsopacifer
0
45
Open Source e Developer Experience
afonsopacifer
1
75
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
58
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
66
Recriando o React do Zero em 10 minutos
afonsopacifer
0
73
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
170
HTML 5.3: O que existe além de a11y e SEO?
afonsopacifer
0
150
State of JS 2022
afonsopacifer
0
270
Welcome CSS LV5
afonsopacifer
0
210
Other Decks in Programming
See All in Programming
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
100
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.4k
TypeScript Language Service Plugin で CSS Modules の開発体験を改善する
mizdra
PRO
3
2.3k
技術的負債と戦略的に戦わざるを得ない場合のオブザーバビリティ活用術 / Leveraging Observability When Strategically Dealing with Technical Debt
yoshiyoshifujii
0
160
Practical Domain-Driven Design - Workshop at NDC 2025
mufrid
0
120
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
530
ワンバイナリWebサービスのススメ
mackee
10
7.3k
インターフェース設計のコツとツボ
togishima
2
450
Use Perl as Better Shell Script
karupanerura
0
620
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
2.4k
Proxmoxをまとめて管理できるコンソール作ってみました
karugamo
1
390
鯛変だったRubyKaigi 2025 ── それでも楽しかった!
pndcat
0
130
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9.3k
Statistics for Hackers
jakevdp
799
220k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
Code Reviewing Like a Champion
maltzj
523
40k
Designing for humans not robots
tammielis
253
25k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Adopting Sorbet at Scale
ufuk
76
9.4k
Six Lessons from altMBA
skipperchong
28
3.8k
Faster Mobile Websites
deanohume
307
31k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
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