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

Bongkar Dapur Webnya #PHPID-OL

Bongkar Dapur Webnya #PHPID-OL

Menjelaskan cerita dibalik pembuatan web pendukung dari kegiatan PHPID Online Learning

D83b3739651001461f48763639b90b50?s=128

Irfan Maulana

March 08, 2021
Tweet

Transcript

  1. Webnya #PHPID-OL Irfan Maulana Peracik web #PHPID-OL 31 Maret 2021

    19:00 WIB facebook.com/groups/phpid Bongkar Dapur
  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
  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
  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
  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
  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
  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
  8. > Membuat awesome list -- Biar mudah di-parsing, buatkan aturan

    mainnya -- Siapkan template biar gampang menambahkan -- Sematkan navigasi utama agar mudah loncat antar bagian
  9. > Parsing awesome list -- Baca raw text berkas markdown

    -- Split dengan RegEx seadanya -- Mapping data ke masing-masing kolom -- Tulis hasilnya menjadi berkas JSON
  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
  11. > Menyiapkan Web UI -- versi awal -- Menggunakan Parcel.js

    -- HTML dengan Pug -- Vanilla JS -- Paper.CSS
  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)
  13. Tampilan Web UI Per MARET 2021

  14. SIMPLE & PERFORMANT

  15. > BONUS: CARIK Kalian bisa juga loh cari tau jadwal

    mendatang #PHPID-OL lewat @CarikBot
  16. > BONUS: Short links Pemendek tautan statis sederhana memanfaatkan Netlify

    redirect github.com/phpid-jakarta/shortlinks
  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!
  18. speakerdeck.com/mazipan

  19. Terima Kasih Irfan Maulana Principal Engineer @ Tokopedia