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
Menjelajah Dunia Frontend Lebih Jauh
Search
Rizqy Hidayat
April 02, 2022
Technology
0
4
Menjelajah Dunia Frontend Lebih Jauh
Rizqy Hidayat
April 02, 2022
Tweet
Share
More Decks by Rizqy Hidayat
See All by Rizqy Hidayat
HTMX: Back to Basic
rizqyhi
0
20
Exploring PEMPA Architecture on Dicoding.com
rizqyhi
0
10
JavaScript Modules & Current Updates
rizqyhi
0
86
Introduction to Open Source & Hacktoberfest
rizqyhi
0
64
Frontend is Enough
rizqyhi
0
24
Other Decks in Technology
See All in Technology
How to Lead? Testimonial of a Lead Android Engineer
oleur
1
110
MapLibreとAmazon Location Service
dayjournal
1
180
今日からできる!簡単 .NET 高速化 Tips -2024 edition-
xin9le
7
3.6k
いいたいことちゃんという
tkengo
0
230
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
270
Gradle Build Scanを使ってビルドのことを知ろう potatotips #87
tomorrowkey
2
150
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
4
610
IPUT App Dev. Co. -Overview 2024/4
iputapp
0
120
2024春 注目のWeb系 OSS & SaaS 3選
makies
0
170
JAWS-UG Bedrock Claude Night
yamahiro
3
700
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
1
360
【SORACOM UG 東海】あらゆるモノがつながる社会へ、IoT と SORACOM
soracom
PRO
1
140
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
Thoughts on Productivity
jonyablonski
59
3.9k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.2k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Unsuck your backbone
ammeep
663
57k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Design by the Numbers
sachag
274
18k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Practical Orchestrator
shlominoach
183
9.7k
Transcript
Menjelajah Dunia Front-end Lebih Jauh Rizqy Hidayat Product Engineer @
Dicoding Indonesia
Perjalanan sebelumnya
Persiapan Gerbang Slicing Tanjakan Coding Padang Deployment Lembah Debugging Puncak
Web API Cakrawala Berikutnya
I. Persiapan
“Give me six hours to chop down a tree and
I will spend the first four sharpening the axe.” Abraham Lincoln
Investasi ke peralatan untuk menunjang produktivitas
Pilih code editor/IDE sesuai selera dan maksimalkan fitur yang diberikan
Pelajari dan latih jari menggunakan keyboard shortcuts
II. Gerbang Slicing
Mulai dengan membayangkan struktur tiap bagian/komponen dengan tag HTML div
img h3 svg span div div
Tambahkan class untuk memudahkan styling div.course-card img.course-card__logo h3.course-card__name svg.course-card__meta-icon span.course-card__meta-label
div.course-card__meta div.course-card__fre e-badge
Gunakan Emmet untuk menulis struktur HTML lebih cepat
Jangan copy-paste CSS yang diberikan design tool mentah-mentah
III. Tanjakan Coding
Tulis kode yang indah dan menyenangkan untuk dibaca
Pecah method/fungsi menjadi kecil-kecil agar lebih mudah dipahami
Gunakan linter untuk membantu menjaga konsistensi gaya penulisan kode ✅
Baca Clean Code dan terapkan yang sekiranya masuk akal
IV. Padang Deployment
Ada yang masih ingat atau pernah menggunakan tool ini?
Atau ini?
Deployment modern yang lebih mudah dan cepat
Istirahat sebentar…
V. Lembah Debugging
Berteman dengan Developer Tools di browser, mengakrabi fitur-fitur yang diberikan
Debugging manual dengan console.log
Manfaatkan Break on… untuk mengecek perubahan di DOM dan siapa
yang mengubah
Gunakan tab Network untuk memantau request dan response
Lebih lanjut lagi, gunakan Profiler untuk mengoptimalkan performa aplikasi
Jika sudah mentok, segera cari bantuan
VI. Puncak Web API
Bekerja dengan gambar dan vektor menggunakan Canvas API
Kolaborasi realtime dengan Websocket atau WebRTC
VII. Cakrawala Berikutnya
Membangun situs yang aksesibel untuk semua pengguna http://blogs.quovantis.com/web-accessibility/
Eksplorasi pendekatan Jamstack untuk membangun aplikasi web https://jamstack.org/
Membangun aplikasi desktop dengan Electron
📚 Sumber Belajar • https://web.dev/ • https://developer.mozilla.org/ • Dokumentasi resmi
• Kelas Frontend Expert Dicoding
📝 Catatan Perjalanan • Siapkan peralatan, asah kemampuan • Tulis
kode yang indah dan menyenangkan untuk dibaca • Anggap error sebagai tantangan yang harus diselesaikan • Hindari frontend fatigue • Jangan pernah berhenti belajar (dan berbagi)
Narahubung E:
[email protected]
W: https://rizqy.me T: @rizqyhi 👋 Terima Kasih