Menjelajah Dunia Frontend Lebih Jauh

Transcript

1. Menjelajah Dunia Front-end Lebih Jauh Rizqy Hidayat Product Engineer @ Dicoding Indonesia
2. Perjalanan sebelumnya
3. Persiapan Gerbang Slicing Tanjakan Coding Padang Deployment Lembah Debugging Puncak Web API Cakrawala Berikutnya
4. I. Persiapan
5. “Give me six hours to chop down a tree and I will spend the first four sharpening the axe.” Abraham Lincoln
6. Investasi ke peralatan untuk menunjang produktivitas
7. Pilih code editor/IDE sesuai selera dan maksimalkan fitur yang diberikan
8. Pelajari dan latih jari menggunakan keyboard shortcuts
9. II. Gerbang Slicing
10. Mulai dengan membayangkan struktur tiap bagian/komponen dengan tag HTML div img h3 svg span div div
11. 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
12. Gunakan Emmet untuk menulis struktur HTML lebih cepat
13. Jangan copy-paste CSS yang diberikan design tool mentah-mentah
14. III. Tanjakan Coding
15. Tulis kode yang indah dan menyenangkan untuk dibaca
16. Pecah method/fungsi menjadi kecil-kecil agar lebih mudah dipahami
17. Gunakan linter untuk membantu menjaga konsistensi gaya penulisan kode ✅
18. Baca Clean Code dan terapkan yang sekiranya masuk akal
19. IV. Padang Deployment
20. Ada yang masih ingat atau pernah menggunakan tool ini?
21. Atau ini?
22. Deployment modern yang lebih mudah dan cepat
23. Istirahat sebentar…
24. V. Lembah Debugging
25. Berteman dengan Developer Tools di browser, mengakrabi fitur-fitur yang diberikan
26. Debugging manual dengan console.log
27. Manfaatkan Break on… untuk mengecek perubahan di DOM dan siapa yang mengubah
28. Gunakan tab Network untuk memantau request dan response
29. Lebih lanjut lagi, gunakan Profiler untuk mengoptimalkan performa aplikasi
30. Jika sudah mentok, segera cari bantuan
31. VI. Puncak Web API
32. Bekerja dengan gambar dan vektor menggunakan Canvas API
33. Kolaborasi realtime dengan Websocket atau WebRTC
34. VII. Cakrawala Berikutnya
35. Membangun situs yang aksesibel untuk semua pengguna http://blogs.quovantis.com/web-accessibility/
36. Eksplorasi pendekatan Jamstack untuk membangun aplikasi web https://jamstack.org/
37. Membangun aplikasi desktop dengan Electron
38. 📚 Sumber Belajar • https://web.dev/ • https://developer.mozilla.org/ • Dokumentasi resmi • Kelas Frontend Expert Dicoding
39. 📝 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)
40. Narahubung E: rizqy@dicoding.com W: https://rizqy.me T: @rizqyhi 👋 Terima Kasih