Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Baparekraf Developer Day 2022 - Front-End (Rizqy Hidayat)

Baparekraf Developer Day 2022 - Front-End (Rizqy Hidayat)

Rizqy Hidayat (Product Engineer - Dicoding Indonesia)

Judul:
Menjelajah Dunia Front-End Lebih Jauh

Informasi event: https://www.dicoding.com/events/4398

349a7f52975989094c75c055f9f6ba25?s=128

Dicoding Indonesia

April 12, 2022
Tweet

More Decks by Dicoding Indonesia

Other Decks in Education

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