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

Transcript

1. Menjelajah Dunia Front-end Lebih Jauh
   Rizqy Hidayat
   Product Engineer @ Dicoding Indonesia
   

   View Slide

2. Perjalanan sebelumnya
   

   View Slide

3. Persiapan
   Gerbang
   Slicing
   Tanjakan
   Coding
   Padang
   Deployment
   Lembah
   Debugging
   Puncak
   Web API
   Cakrawala
   Berikutnya
   

   View Slide

4. I.
   Persiapan
   

   View Slide

5. “Give me six hours to chop down a tree and I
   will spend the first four sharpening the axe.”
   Abraham Lincoln
   

   View Slide

6. Investasi ke peralatan untuk menunjang
   produktivitas
   

   View Slide

7. Pilih code editor/IDE sesuai selera dan
   maksimalkan fitur yang diberikan
   

   View Slide

8. Pelajari dan latih jari menggunakan
   keyboard shortcuts
   

   View Slide

9. II.
   Gerbang Slicing
   

   View Slide

10. Mulai dengan membayangkan struktur tiap
    bagian/komponen dengan tag HTML
    div
    img h3
    svg span
    div
    div
    

    View Slide

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
    

    View Slide

12. Gunakan Emmet untuk menulis struktur HTML
    lebih cepat
    

    View Slide

13. Jangan copy-paste CSS yang diberikan design
    tool mentah-mentah
    

    View Slide

14. III.
    Tanjakan Coding
    

    View Slide

15. Tulis kode yang indah dan menyenangkan untuk
    dibaca
    

    View Slide

16. Pecah method/fungsi menjadi kecil-kecil agar
    lebih mudah dipahami
    

    View Slide

17. Gunakan linter untuk membantu menjaga
    konsistensi gaya penulisan kode
    ✅
    
    

    View Slide

18. Baca Clean Code dan terapkan yang
    sekiranya masuk akal
    

    View Slide

19. IV.
    Padang Deployment
    

    View Slide

20. Ada yang masih ingat atau pernah
    menggunakan tool ini?
    

    View Slide

21. Atau ini?
    

    View Slide

22. Deployment modern yang lebih mudah dan
    cepat
    

    View Slide

23. Istirahat sebentar…
    

    View Slide

24. V.
    Lembah Debugging
    

    View Slide

25. Berteman dengan Developer Tools di browser,
    mengakrabi fitur-fitur yang diberikan
    

    View Slide

26. Debugging manual dengan console.log
    

    View Slide

27. Manfaatkan Break on… untuk mengecek
    perubahan di DOM dan siapa yang mengubah
    

    View Slide

28. Gunakan tab Network untuk memantau
    request dan response
    

    View Slide

29. Lebih lanjut lagi, gunakan Profiler untuk
    mengoptimalkan performa aplikasi
    

    View Slide

30. Jika sudah mentok, segera cari bantuan
    

    View Slide

31. VI.
    Puncak Web API
    

    View Slide

32. Bekerja dengan gambar dan vektor
    menggunakan Canvas API
    

    View Slide

33. Kolaborasi realtime dengan Websocket atau
    WebRTC
    

    View Slide

34. VII.
    Cakrawala Berikutnya
    

    View Slide

35. Membangun situs yang aksesibel untuk
    semua pengguna
    http://blogs.quovantis.com/web-accessibility/
    

    View Slide

36. Eksplorasi pendekatan Jamstack untuk
    membangun aplikasi web
    https://jamstack.org/
    

    View Slide

37. Membangun aplikasi desktop dengan
    Electron
    

    View Slide

38. 📚 Sumber Belajar
    ● https://web.dev/
    ● https://developer.mozilla.org/
    ● Dokumentasi resmi
    ● Kelas Frontend Expert Dicoding
    

    View Slide

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)
    

    View Slide

40. Narahubung
    E: rizqy@dicoding.com
    W: https://rizqy.me
    T: @rizqyhi
    👋 Terima Kasih
    

    View Slide