Bongkar Dapur Webnya #PHPID-OL

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

> 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

Slide 5

Slide 5 text

> 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

Slide 6

Slide 6 text

> 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

Slide 7

Slide 7 text

> 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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Tampilan Web UI Per MARET 2021

Slide 14

Slide 14 text

SIMPLE & PERFORMANT

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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