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
28
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
6
Open Source e Developer Experience
afonsopacifer
0
45
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
18
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
25
Recriando o React do Zero em 10 minutos
afonsopacifer
0
39
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
120
HTML 5.3: O que existe além de a11y e SEO?
afonsopacifer
0
96
State of JS 2022
afonsopacifer
0
220
Welcome CSS LV5
afonsopacifer
0
180
Other Decks in Programming
See All in Programming
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
200
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
610
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
1
300
エンジニアとして関わる要件と仕様(公開用)
murabayashi
0
300
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
ヤプリ新卒SREの オンボーディング
masaki12
0
130
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
170
CSC509 Lecture 09
javiergs
PRO
0
140
as(型アサーション)を書く前にできること
marokanatani
10
2.7k
受け取る人から提供する人になるということ
little_rubyist
0
250
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Why Our Code Smells
bkeepers
PRO
334
57k
Building an army of robots
kneath
302
43k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Building Applications with DynamoDB
mza
90
6.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Bash Introduction
62gerente
608
210k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
The Language of Interfaces
destraynor
154
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
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