$30 off During Our Annual Pro Sale. View Details »

Bongkar Dapur Webnya #PHPID-OL

Bongkar Dapur Webnya #PHPID-OL

Menjelaskan cerita dibalik pembuatan web pendukung dari kegiatan PHPID Online Learning

Irfan Maulana

March 08, 2021
Tweet

More Decks by Irfan Maulana

Other Decks in Programming

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