Bongkar Dapur Webnya #PHPID-OL

Menjelaskan cerita dibalik pembuatan web pendukung dari kegiatan PHPID Online Learning

Transcript

1. Webnya
   #PHPID-OL
   Irfan Maulana
   Peracik web #PHPID-OL
   31 Maret 2021 19:00 WIB
   facebook.com/groups/phpid
   Bongkar Dapur
   

   View Slide

2. > Kenalan
   Saya Irfan Maulana
   Menjadi Pemrogram sejak 2013-an
   Terjerumus menjadi Front End sejak 2015-an
   Kalian bisa temukan tulisan saya di mazipan.space
   

   View Slide

3. > Bersama PHPID
   Mengikuti groupnya sejak jaman kuliah
   Berkesempatan kenal Om Peter di 2016-an
   Komunitas pertama yang memberi saya kesempatan presentasi di
   acara mereka
   

   View Slide

4. > Mengenai #PHPID-OL
   Inisiatif dari komunitas PHP Indonesia untuk mengisi waktu “Bekerja dari
   rumah massal di masa pandemi” dimulai pada April 2020.
   Kegiatan berupa sharing, diskusi santai dari hati ke hati, kesemuanya
   dijalankan lewat pertemuan daring dan disiarkan langsung ke Facebook
   PHP ID
   Materi beragam dari mulai Engineering, Digital Marketing, Data Analytics,
   Nasihat Karir, Motivasi dan berbagai topik menarik lainnya.
   phpid.netlify.app/learning
   

   View Slide

5. > Bagaimana Awalnya
   Om Peter akan selalu membuat tautan ke
   sesi sebelumnya.
   Dengan 6 sesi berlangsung saja, post
   tersebut sudah menjadi terlalu panjang
   Facebook post susah dicari, susah
   diurutkan dan gampang tenggelam
   https://www.facebook.com/peterjkambey/videos/10219344
   732706833
   

   View Slide

6. > Menurut Saya Seharusnya Begini
   Ada satu tempat untuk mengumpulkan semua daftar ini.
   Mudah dicari, mudah disimpan, mudah ditautkan.
   Mudah diubah -- om Peter tidak selalu berada di depan laptop.
   Perubahan bisa terlihat secara instan
   Daftar harus terbuka, jadi gak perlu om Peter yang ubah terus
   

   View Slide

7. > Mari Merangkai pecahan
   WEB
   Mudah dicari
   Mudah disimpan Mudah ditautkan
   Static
   JSON
   AWESOME
   LIST
   OTHER
   CLIENT
   CI/CD CI/CD
   Update
   Data
   Bisa dikonsumsi platform lain
   

   View Slide

8. > Membuat awesome list
   -- Biar mudah di-parsing,
   buatkan aturan mainnya
   -- Siapkan template biar
   gampang menambahkan
   -- Sematkan navigasi utama
   agar mudah loncat antar
   bagian
   

   View Slide

9. > Parsing awesome list
   -- Baca raw text berkas
   markdown
   -- Split dengan RegEx seadanya
   -- Mapping data ke
   masing-masing kolom
   -- Tulis hasilnya menjadi berkas
   JSON
   

   View Slide

10. > Menyiapkan Delivery Automation
    -- Memanfaatkan Github Actions
    -- Trigger on `push` di branch `master`
    -- Eksekusi pembuatan file JSON
    -- Commit balik ke branch master file
    JSON tersebut
    

    View Slide

11. > Menyiapkan Web UI -- versi awal
    -- Menggunakan Parcel.js
    -- HTML dengan Pug
    -- Vanilla JS
    -- Paper.CSS
    

    View Slide

12. > Menyiapkan Web UI -- Saat ini
    -- Menggunakan Svelte lewat Sapper
    -- Di deploy sebagai static site
    -- Memindahkan fungsi Vanilla JS ke Svelte
    -- Paper.CSS, Animate.CSS, Masonry (Macy.js)
    

    View Slide

13. Tampilan Web UI
    Per MARET 2021
    

    View Slide

14. SIMPLE
    &
    PERFORMANT
    

    View Slide

15. > BONUS: CARIK
    Kalian bisa juga loh cari tau
    jadwal mendatang #PHPID-OL
    lewat @CarikBot
    

    View Slide

16. > BONUS: Short links
    Pemendek tautan statis sederhana
    memanfaatkan Netlify redirect
    github.com/phpid-jakarta/shortlinks
    

    View Slide

17. > Pesan dan kesan
    -- Tidak perlu nunggu jago buat berkontribusi balik
    -- Tidak perlu merasa kalau kontribusi kita tidak penting
    -- Mulai dari hal sederhana, seperti memastikan daftarnya tetap
    akurat saja sudah sangat membantu mereka
    -- Mari bareng-bareng mendukung inisiatif baik dari komunitas lewat
    kontribusi nyata
    -- Tidak perlu banyak ngomong, tunjukkan saja kode kalian!
    

    View Slide

18. speakerdeck.com/mazipan
    

    View Slide

19. Terima Kasih
    Irfan Maulana
    Principal Engineer @ Tokopedia
    

    View Slide