Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
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
86
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
70
Open Source e Developer Experience
afonsopacifer
1
110
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
82
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
90
Recriando o React do Zero em 10 minutos
afonsopacifer
0
93
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
200
HTML 5.3: O que existe além de a11y e SEO?
afonsopacifer
0
180
State of JS 2022
afonsopacifer
0
300
Welcome CSS LV5
afonsopacifer
0
230
Other Decks in Programming
See All in Programming
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
pd1xx
1
730
Github Copilotのチャット履歴ビューワーを作りました~WPF、dotnet10もあるよ~ #clrh111
katsuyuzu
0
120
Claude Codeの「Compacting Conversation」を体感50%減! CLAUDE.md + 8 Skills で挑むコンテキスト管理術
kmurahama
1
430
ローカルLLMを⽤いてコード補完を⾏う VSCode拡張機能を作ってみた
nearme_tech
PRO
0
110
MAP, Jigsaw, Code Golf 振り返り会 by 関東Kaggler会|Jigsaw 15th Solution
hasibirok0
0
250
著者と進める!『AIと個人開発したくなったらまずCursorで要件定義だ!』
yasunacoffee
0
150
AIエージェントの設計で注意するべきポイント6選
har1101
5
780
Developing static sites with Ruby
okuramasafumi
0
310
マスタデータ問題、マイクロサービスでどう解くか
kts
0
110
複数人でのCLI/Infrastructure as Codeの暮らしを良くする
shmokmt
5
2.3k
SwiftUIで本格音ゲー実装してみた
hypebeans
0
420
AI時代を生き抜く 新卒エンジニアの生きる道
coconala_engineer
1
320
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
70k
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
28
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
0
180
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
0
1.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
The Language of Interfaces
destraynor
162
25k
Code Review Best Practice
trishagee
74
19k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
120
Embracing the Ebb and Flow
colly
88
4.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.8k
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