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
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