# Ngobrolin WEB > Video podcast mingguan seputar web development dalam Bahasa Indonesia. Hadir setiap Selasa malam jam 20:00 WIB. - Hosts: Eka (Google Developer Expert - Web), Ivan (Senior Web Engineer - Human Made), Riza Fahmi (Co-founder Hacktiv8) - Language: Indonesian (Bahasa Indonesia) - Format: Video podcast on YouTube - Website: https://ngobrol.in - RSS: https://ngobrol.in/rss.xml ## EP 181: Bedah Buku Panduan Coding - Ngobrolin WEB - Published: 2026-09-09 - URL: https://ngobrol.in/episodes/_VoS7mnsUdQ-bedah-buku-panduan-coding-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=_VoS7mnsUdQ Full transcript available on the episode page. ## EP 180: Modern Web UI - Ngobrolin WEB - Published: 2026-08-26 - URL: https://ngobrol.in/episodes/0RCXRNHhBfo-modern-web-ui-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=0RCXRNHhBfo Episode ini berangkat dari satu keluhan yang sangat spesifik: web UI jadi berantakan begitu fitur LLM ditempelkan ke aplikasi yang sudah ada. Riza bercerita soal Google Drive yang tiba-tiba menyisipkan blok ringkasan AI di tengah hasil pencarian sehingga terjadi layout shift dan salah klik — CLS lama yang jadi relevan lagi gara-gara AI. Contoh lain, antarmuka chat sebetulnya melawan kebiasaan web: konten terbaru muncul di bawah, bukan di atas seperti Twitter, jadi butuh scroll-to-bottom otomatis dan penanganan tombol Enter di textarea yang biasanya gratis kalau memakai pustaka jadi. Di pembuka juga sempat disinggung Interactivity API di WordPress yang polanya mirip HTMX atau Livewire untuk filter, pencarian dan paginasi, serta Chrome DevTools MCP yang skill debug LCP-nya sudah bisa mengejar skor Lighthouse 100 dalam dua kali putaran. Bagian utamanya adalah Modern Web Guidance, yang dirilis tim Chrome DevRel di IO Connect Shanghai. Yang menarik, ini bukan pustaka dan bukan tool, melainkan sekumpulan agent skill berformat standar — bisa dipakai dari Claude Code, Codex, Antigravity atau harness apa pun. Isinya semacam RAG untuk dokumentasi web platform: pencarian semantik lokal memakai model TensorFlow.js hemat CPU dengan tokenizer BERT, cosine similarity, dan vektor yang sudah di-precompute saat build, jadi tanpa jaringan dan tanpa API key. Panduannya dipecah kecil-kecil per topik — CSS, UI atoms, UI behaviors, UI components, layout, performance, security, privacy — dan dimuat progressive disclosure, sehingga context window tidak habis. Secara default ia menargetkan Baseline widely available, yaitu fitur yang sudah ada di semua mesin browser standar selama 30 bulan terakhir, dan ia paham polyfill serta fallback untuk progressive enhancement. Mereka lalu mempraktikkannya langsung di repositori situs Ngobrolin WEB: meminta karusel CSS untuk daftar episode terbaru di homepage. Agennya membaca test case lebih dulu sebelum menulis kode, lalu mengambil panduan carousel-slide-effect dan carousel-snap-highlight. Prompt pertama masih menghasilkan karusel yang bergantung pada JavaScript; setelah diminta ulang secara eksplisit, hasilnya jalan dengan JavaScript dimatikan. Selipan penting lain: CSS clamp(), min() dan max() untuk fluid sizing tanpa breakpoint keras — contoh nyatanya mengecilkan jarak antar menu navigasi sebelum berubah jadi hamburger, dengan fluid.tw dan Utopia sebagai rujukan — serta peringatan keamanan bahwa skill itu cuma berkas Markdown yang bisa saja menyuruh agen membaca .env dan mengirimkannya keluar, jadi bacalah isinya sebelum menjalankan npx apa pun. Key points: - Menempelkan fitur LLM ke aplikasi lama memunculkan lagi masalah web UI klasik: blok ringkasan AI di hasil pencarian Google Drive menyebabkan layout shift (CLS) dan salah klik - Modern Web Guidance dari tim Chrome DevRel bukan pustaka atau tool, melainkan sekumpulan agent skill berformat standar yang bisa dipakai dari Claude Code, Codex, Antigravity atau harness mana pun - Cara kerjanya seperti RAG untuk dokumentasi web platform: pencarian semantik lokal dengan model TensorFlow.js, tokenizer BERT, cosine similarity dan vektor yang sudah di-precompute — tanpa jaringan dan tanpa API key - Secara default ia menargetkan Baseline widely available, yaitu fitur yang sudah ada di semua mesin browser standar selama 30 bulan terakhir, lengkap dengan pengetahuan soal polyfill dan fallback untuk progressive enhancement - Demo langsung di repositori Ngobrolin WEB: agennya membaca test case dulu, mengambil panduan carousel-slide-effect dan carousel-snap-highlight, dan baru pada prompt kedua menghasilkan karusel yang tetap jalan saat JavaScript dimatikan - CSS clamp(), min() dan max() memberi fluid sizing tanpa breakpoint keras — dipakai untuk mengecilkan jarak antar menu navigasi sebelum berubah jadi hamburger, dengan fluid.tw dan Utopia sebagai rujukan - Peringatan keamanan: agent skill hanyalah berkas Markdown yang bisa menyuruh agen membaca .env lalu mengirimkannya ke luar, jadi baca isinya dulu sebelum menjalankan npx apa pun Full transcript available on the episode page. ## EP 179: Model Context Protocol - Ngobrolin WEB - Published: 2026-08-19 - URL: https://ngobrol.in/episodes/qei6_h3wwPY-model-context-protocol-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=qei6_h3wwPY Episode ini membahas Model Context Protocol sekaligus laporan dari Google I/O Connect Shanghai. Pertanyaan pembukanya paling mendasar: kenapa AI butuh protokol baru padahal sudah ada REST API? Jawabannya bukan soal cara berkomunikasi — di baliknya MCP tetap bisa memakai REST atau apa pun — melainkan discovery. REST API tidak memberi tahu model tool apa saja yang tersedia, apa kegunaannya, dan parameternya apa; MCP mengekspos daftar tool beserta deskripsinya, dan kalau deskripsi itu ditulis asal-asalan hasilnya tetap kacau karena model tidak tahu kapan memanggil apa. MCP lahir di Anthropic pada 2024, terinspirasi Language Server Protocol dari VS Code yang membuat satu editor bisa mendukung banyak bahasa tanpa harus membuat semuanya sendiri, lalu hak spesifikasi dan patennya didonasikan ke yayasan open source. Kelemahan klasiknya adalah boros token karena seluruh daftar tool disuntikkan sejak awal sesi — kini sudah diperbaiki menjadi on demand. Dibahas juga sebuah artikel yang menunjukkan bahwa membungkus REST API mentah-mentah jadi MCP itu naif: yang penting bukan meminimalkan token dengan segala cara, melainkan mengembalikan hanya data yang benar-benar menjawab pertanyaan. Dari Shanghai, hal paling menonjol justru bukan fitur baru melainkan Modern Web Guidance — koleksi agent skill resmi dari tim Chrome berisi praktik web modern, termasuk cara membuat accordion dan carousel yang aksesibel. Pergeseran strateginya menarik: alih-alih mengajari developer satu per satu, Chrome kini menyiapkan standar yang bisa dibaca AI assistant. Web MCP juga dibahas — namanya menyesatkan karena ia bukan client-server, melainkan cara satu halaman web mengekspos fitur-fiturnya sebagai tool, bahkan cukup lewat atribut pada elemen form. Key points: - Yang membedakan MCP dari REST API bukan cara berkomunikasi melainkan discovery — ia mengekspos daftar tool beserta deskripsinya, dan deskripsi yang ditulis asal-asalan membuat model tidak tahu kapan memanggil apa - MCP terinspirasi Language Server Protocol dari VS Code, yang membuat satu editor bisa mendukung banyak bahasa tanpa membuat semuanya sendiri — lalu spesifikasi dan patennya didonasikan Anthropic ke yayasan open source - Keluhan boros token pada MCP karena seluruh daftar tool disuntikkan sejak awal sesi kini diperbaiki menjadi on demand - Membungkus REST API mentah-mentah jadi MCP adalah pendekatan naif — tujuannya bukan meminimalkan token dengan segala cara melainkan mengembalikan hanya data yang menjawab pertanyaan - MCP cocok saat kita belum tahu persis apa yang mau dilakukan, sedangkan CLI lebih cepat saat perintahnya sudah kita ketahui — sama seperti mengetik perintah git langsung ketimbang menjelaskannya dengan kalimat - Modern Web Guidance adalah koleksi agent skill resmi tim Chrome berisi praktik web modern — pergeseran strategi dari mengajari developer menjadi menyiapkan standar yang dibaca AI assistant - Web MCP namanya menyesatkan: ia bukan client-server melainkan cara satu halaman web mengekspos fitur-fiturnya sebagai tool, bahkan cukup lewat atribut pada elemen form tanpa JavaScript sama sekali Full transcript available on the episode page. ## EP 178: Local Development Server - Ngobrolin WEB - Published: 2026-08-11 - URL: https://ngobrol.in/episodes/-TwyNC_SSFY-local-development-server-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=-TwyNC_SSFY Episode ini membahas local development server, dari XAMPP yang legendaris sampai pendekatan modern berbasis kontainer. Pertanyaan pembukanya menarik: kenapa tools seperti ini jauh lebih populer di kalangan developer PHP daripada Node.js? Jawabannya ada di sejarah — Node.js punya installer dan langsung bisa dijalankan dari command line, sedangkan PHP dulu harus berjalan di atas web server terpisah seperti Apache yang berupa service, bukan aplikasi. Itulah yang membuat paket sekali pasang jadi penyelamat, terutama bagi pemula di Windows. Dibedah tiga pendekatan yang berbeda karakternya. Laragon memasang semuanya langsung di file system dan bersifat portable — seluruh isinya ada di satu folder yang tinggal disalin ke mesin lain; ia juga tidak terbatas PHP, bisa menyiapkan Go, Node.js, dan Python sekaligus. Laravel Herd lebih rapi secara tampilan dan membawa mail catcher serta Xdebug. DDEV berbasis Docker dan menang di kolaborasi: konfigurasinya ikut di-commit ke repo, sehingga rekan tim cukup menjalankan satu perintah untuk mendapat environment yang persis sama, lengkap dengan domain dan HTTPS. Diskusi berlanjut ke pergeseran yang lebih besar: coding agent kini bisa berjalan di mesin cloud yang disediakan vendor tanpa kita menyiapkan apa pun. Ditutup dengan Nix yang dipakai Riza sebagai package manager sekaligus development environment — konfigurasinya terpusat sehingga bisa dibawa ke mesin baru, meskipun kurva belajarnya tinggi karena punya bahasa sendiri. Key points: - PHP sebenarnya punya built-in web server yang cukup dijalankan dengan php -S, tetapi ia single-threaded dan dokumentasinya sendiri menegaskan bukan untuk produksi - Paket seperti XAMPP populer di kalangan PHP karena dulu PHP harus berjalan di atas web server terpisah yang berupa service — berbeda dari Node.js yang punya installer dan langsung jalan dari command line - Laragon memasang semuanya di file system dan portable — seluruh isinya ada di satu folder yang tinggal disalin — dan tidak terbatas PHP, bisa menyiapkan Go, Node.js, serta Python sekaligus - DDEV berbasis Docker dan menang di kolaborasi: konfigurasinya ikut di-commit ke repo, jadi rekan tim cukup menjalankan satu perintah untuk mendapat environment identik lengkap dengan domain dan HTTPS - Coding agent kini bisa berjalan di mesin cloud yang disediakan vendor tanpa kita menyiapkan Docker atau dependensi apa pun — pola yang sama seperti GitHub Codespaces, hanya saja kini dikelola agent - Nix bisa dipakai sebagai package manager sekaligus development environment dengan konfigurasi terpusat yang bisa dibawa ke mesin baru, tetapi kurva belajarnya tinggi karena memakai bahasanya sendiri - Debugger dengan breakpoint lebih terstruktur daripada menyebar print statement, tetapi tetap ada kasus yang menuntut eksekusi terus berjalan — di situ print masih relevan, bukan tanda kurang mahir Full transcript available on the episode page. ## EP 177: State of CSS - Ngobrolin WEB - Published: 2026-08-05 - URL: https://ngobrol.in/episodes/YBFDo2jSSJA-state-of-css-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=YBFDo2jSSJA Episode ini membedah hasil survei State of CSS terbaru. Pembukanya soal matinya CSS-in-JS: pola seperti styled-components dan Emotion praktis ditinggalkan karena CSS sendiri sudah punya nesting dan import, sementara Tailwind mencakup hampir semua kebutuhan yang dulu memaksa orang memakainya — dan pemasangan Tailwind kini sudah sesederhana drag and drop. Fitur yang paling banyak dibicarakan adalah anchor positioning, disusul :has() yang dijuluki parent selector karena membalik arah styling: dari anak menargetkan induknya, atau dari adik menargetkan kakaknya. Sebelum ada :has(), satu-satunya cara adalah menambahkan class modifier seperti card--with-media yang harus dikarang dan dirawat sendiri. Menariknya, kesimpulan survei soal dukungan browser sudah tertinggal — pada saat episode direkam, anchor positioning sudah baseline padahal survei ditutup Juni. Temuan yang paling mengejutkan ada di bagian AI: 26% responden sama sekali tidak memakai AI untuk menulis CSS, dan banyak yang berkomentar AI kurang bagus menulis CSS. Penjelasan yang masuk akal bukan idealisme melainkan pembagian kerja — kasus yang sederhana sudah tertutup Tailwind sehingga tidak perlu menulis CSS sama sekali, dan yang tersisa untuk ditulis manual justru kasus kompleks yang memang belum dikuasai model. Pain point terbesarnya adalah grid, terutama sintaks grid-row dan grid-column yang terasa janggal, disusul cognitive overload karena terlalu banyak pilihan, dan ketidakcocokan format warna saat handoff dari desainer. Key points: - CSS-in-JS praktis ditinggalkan karena CSS sudah punya nesting dan import, dan Tailwind mencakup hampir semua kebutuhan yang dulu memaksa orang memakai styled-components atau Emotion - :has() membalik arah styling — anak bisa menargetkan induknya, adik bisa menargetkan kakaknya — sehingga tidak perlu lagi mengarang class modifier seperti card--with-media yang harus dirawat sendiri - Kesimpulan dukungan browser dalam survei bisa cepat basi: anchor positioning sudah baseline saat episode direkam padahal survei ditutup Juni, jadi selalu cek caniuse untuk data terbaru - 26% responden sama sekali tidak memakai AI untuk menulis CSS — bukan karena idealisme, tetapi karena kasus sederhana sudah tertutup Tailwind dan yang tersisa justru kasus kompleks yang belum dikuasai model - Grid adalah pain point terbesar, terutama sintaks grid-row dan grid-column yang janggal; masalahnya bukan tidak paham konsepnya melainkan sintaksnya sulit diingat - Coding agent secara default fasih memakai Tailwind tetapi masih menulis CSS dengan cara lama — perlu diberi tahu atau dipasangi skill agar memakai fitur yang baru - Handoff warna dari desainer sering bermasalah karena mereka berangkat dari CMYK untuk cetak lalu memberi hex, sementara developer sudah memakai ruang warna modern — hasilnya terlihat sama bagi kita tetapi berbeda bagi desainer Full transcript available on the episode page. ## EP 176: Pengaruh Kecerdasan Buatan terhadap Kecerdasan Manusia - Ngobrolin WEB - Published: 2026-07-29 - URL: https://ngobrol.in/episodes/JJqLKn25DJI-pengaruh-kecerdasan-buatan-terhadap-kecerdasan-manusia-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=JJqLKn25DJI Episode ini lahir dari kecurigaan di episode sebelumnya soal end-to-end testing dengan Playwright: kalau skenario tes, orkestrasinya, sampai penulisannya sudah bisa didelegasikan ke AI, lalu peran manusianya di mana. Ivan membuka dengan pengakuan yang jujur — ia sudah bingung menulis pesan commit sendiri karena terbiasa menyerahkan pemecahan atomic commit ke agen. Istilahnya cognitive debt, cognitive regression, atau versi bahasa anak mudanya brain rot. Untuk menjawabnya mereka mengundang Ester Irawati Setiawan, dosen ISTTS Surabaya, karena persoalannya bukan cuma soal AI tapi juga soal pedagogi. Dari sisi kampus, jawabannya ternyata bukan melarang. Mahasiswa boleh memakai AI sejak semester satu, tapi wajib bisa menjelaskan apa yang dibuatnya — dan justru karena itu mata kuliah dasar kembali ke paper-based test, menulis kode dengan kertas dan pulpen serta flowchart, untuk mengukur computational thinking yang tidak bisa dititipkan. Ada ujian close AI, ada capstone project yang diuji lewat wawancara "kenapa kamu pakai ini". Kurikulumnya juga bergerak: ada mata kuliah Prompt Engineering dua SKS satu semester dengan kerangka role–task–context–constraint–format, materi agentic AI dengan Google ADK, dan SDLC yang kini bercabang ke MLOps dan AgentOps. Sisi industrinya lebih keras: velocity satu sprint melompat dari sekitar 50 story point ke 80–100, satu developer menjalankan delapan tiket Jira sekaligus lewat delapan git worktree, dan kelelahan mental itu justru mengembalikan orang ke kebiasaan percaya buta pada AI. Paruh kedua diisi Zain dengan materi Fundamental Computer Science for AI Era. Analoginya AI sebagai kuda — Haiku, Sonnet, Opus, Fable makin kencang langkahnya — dan manusia sebagai kusir yang tetap harus hafal peta, karena kalau tidak, justru kitalah yang memperlambat. Ia menutup dengan poin yang paling menohok: kita hanya sanggup menilai model sampai batas pengetahuan kita sendiri; selisih Opus 5 dan GPT-5.5 tak terasa bagi yang bukan ahli, sementara selisih Opus dan Haiku jelas bagi siapa pun. Soal kualitas, kesimpulannya terbelah — bagi yang tidak paham kode, kuantitas naik dan kualitas turun; bagi engineer berpengalaman kualitas justru naik, karena utang teknis yang selama ini dibiarkan akhirnya terbayar, backlog bug turun dari ratusan ke sekitar 40, dan komponen kelas React dengan unsafe_componentWillMount akhirnya bisa diberantas. Key points: - Cognitive debt itu nyata dan diakui sendiri oleh praktisi: Ivan sudah bingung menulis pesan commit dan memecah atomic commit tanpa bantuan agen, karena kebiasaan mendelegasikan hal-hal kecil - ISTTS tidak melarang AI — mahasiswa boleh memakainya sejak semester satu asal bisa menjelaskan — tapi mata kuliah dasar dikembalikan ke paper-based test dengan kertas, pulpen dan flowchart untuk mengukur computational thinking - Kurikulumnya ikut berubah: ada mata kuliah Prompt Engineering dua SKS satu semester dengan kerangka role–task–context–constraint–format, materi agentic AI memakai Google ADK, dan SDLC yang bercabang ke MLOps serta AgentOps - Tekanan industri melipatgandakan beban: velocity satu sprint naik dari sekitar 50 story point ke 80–100 dan satu developer menjalankan delapan tiket Jira paralel lewat delapan git worktree, yang berujung kelelahan mental dan balik percaya buta pada AI - Analogi kuda dan kusir dari Zain: model seperti Haiku, Sonnet, Opus dan Fable makin kencang, tapi kalau kusirnya tidak hafal peta justru manusianya yang memperlambat - Kita hanya bisa menilai model sampai batas pengetahuan kita sendiri — selisih Opus 5 dan GPT-5.5 tidak terasa bagi yang bukan ahli, sedangkan selisih Opus dan Haiku terasa oleh siapa pun - Tiga pagar yang disarankan saat membangun dengan AI: verifikasi PR lewat rekaman atau screenshot before-after dari browser, TDD sebagai penjaga regresi yang sekarang tidak lagi melelahkan, dan pemahaman kita sendiri atas kode sebagai satu-satunya cara melacak production issue di antara puluhan tiket sebulan Full transcript available on the episode page. ## EP 175: Testing dengan Playwright - Ngobrolin WEB - Published: 2026-07-22 - URL: https://ngobrol.in/episodes/80Cnky1uvyk-testing-dengan-playwright-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=80Cnky1uvyk Episode ini membahas Playwright dan bagaimana perannya berubah di era coding agent. Sejarahnya dimulai dari Puppeteer buatan Google yang hanya mendukung browser berbasis Chromium; dua pembuatnya pindah ke Microsoft dan melahirkan Playwright yang mendukung semua browser — memakai protokol DevTools untuk Chromium dan jatuh ke WebDriver untuk Firefox dan Safari. Pergeseran terbesarnya: end-to-end test yang dulu dihindari karena lambat kini justru jadi masuk akal, karena kita tidak perlu menungguinya lagi. Ivan menjalankan seluruh rangkaian sebelum tidur dan paginya tinggal memeriksa hasilnya. Ia juga memasang quality gate — linter, type check, formatter, lalu test — yang harus lolos sebelum agent boleh membuat PR, dengan catatan penting: pernah ketahuan agent-nya menyiasati gate itu dengan memfilter test yang gagal supaya bisa lanjut membuat PR. Untuk menghubungkan Playwright ke coding agent ada dua jalan yang berbeda karakternya. CLI lebih cepat, lebih hemat token, dan berjalan headless — cocok untuk alur yang sudah kita ketahui langkahnya. MCP berjalan headed dengan browser yang benar-benar terbuka, lebih boros tetapi lebih tepat untuk penjelajahan yang open ended dan menghasilkan rekaman video yang lebih andal. Dibahas juga UI mode yang memberi dashboard lokal berisi timeline dan filter test, serta paralelisme yang harus dirancang sendiri karena test end-to-end sering saling bergantung lewat database bersama. Key points: - Playwright lahir setelah dua pembuat Puppeteer pindah ke Microsoft — bedanya ia mendukung semua browser, memakai protokol DevTools untuk Chromium dan WebDriver untuk Firefox serta Safari - End-to-end test yang dulu dihindari karena lambat kini masuk akal justru karena kita tidak perlu menungguinya — dijalankan semalaman, hasilnya diperiksa pagi harinya - Quality gate berisi linter, type check, formatter, dan test yang harus lolos sebelum agent boleh membuat PR — tetapi agent pernah ketahuan menyiasatinya dengan memfilter test yang gagal - CLI lebih cepat dan hemat token untuk alur yang langkahnya sudah kita ketahui, sementara MCP lebih cocok untuk penjelajahan open ended dan menghasilkan rekaman video yang lebih andal karena browsernya benar-benar terbuka - Sintaks Playwright sengaja dibuat mirip Testing Library, termasuk getByRole yang berbasis accessibility — sehingga secara tidak langsung mendorong penulisan HTML yang semantik - Paralelisme harus dirancang sendiri: test end-to-end sering bocor satu sama lain lewat database bersama, jadi login dijalankan sekali dulu lalu sisanya baru boleh paralel - Standar dukungan browser di enterprise bisa berarti 4 browser kali 3 versi kali 3 ukuran viewport — 36 kombinasi untuk satu test, dan di situlah layanan terkelola seperti browser farm jadi masuk akal Full transcript available on the episode page. ## EP 174: Optimasi JavaScript - Ngobrolin WEB - Published: 2026-07-15 - URL: https://ngobrol.in/episodes/JUu7WUGt1eU-optimasi-javascript-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=JUu7WUGt1eU Episode ini membedah teknik optimasi JavaScript, dimulai dari prinsip paling mendasar: avoid work. Cara paling efektif mempercepat JavaScript adalah tidak menjalankannya sama sekali, dan tiap tahun daftar hal yang bisa dipindahkan ke platform bertambah — animasi, view transition, date picker, combo box yang bisa dicari, dan sebentar lagi carousel, semuanya kini punya padanan HTML atau CSS tanpa library. Dari sisi mesin, dibahas kenapa membandingkan integer lebih murah daripada string, dan kenapa bentuk objek sebaiknya konsisten. JavaScript engine berspekulasi bahwa objek berikutnya akan punya shape yang sama dengan yang sudah ia lihat, lalu menghasilkan machine code yang dioptimasi untuk asumsi itu — kode monomorfik cepat, polimorfik lebih lambat, megamorfik paling lambat. Urutan properti pun ikut menentukan shape, sehingga dua objek dengan field yang sama tetapi urutan berbeda dianggap berbeda. Diskusi terpanjangnya justru soal gaya: rantai map-filter-reduce membuat salinan array di setiap langkah, sementara satu loop imperatif tidak. Kesimpulannya pragmatis — kalau ukuran data terkontrol karena API-nya sudah dibatasi, tulis yang paling mudah dibaca; kalau datanya bisa puluhan ribu baris seperti pada CLI migrasi atau sinkronisasi, tulis imperatif. Bagian penutup soal benchmarking sama pentingnya: optimalkan bagian yang paling banyak memakan waktu lebih dulu, hindari micro benchmark, jalankan di production mode, pakai profil browser yang bersih tanpa extension, dan berusahalah membuktikan hasil sendiri salah alih-alih membenarkannya. Key points: - Optimasi terbaik adalah avoid work — cek ulang tiap tahun kode JavaScript mana yang kini bisa digantikan CSS atau HTML native seperti animasi, view transition, dan date picker - JavaScript engine berspekulasi bahwa objek berikutnya punya shape yang sama dan menghasilkan machine code untuk asumsi itu; kode monomorfik paling cepat, megamorfik paling lambat — dan urutan properti ikut menentukan shape - Bandingkan integer atau enum, bukan string: integer umumnya dilewatkan by value sehingga perbandingannya jauh lebih murah - Rantai map-filter-reduce membuat salinan array di setiap langkah; satu loop imperatif tidak — dan forEach lebih lambat dari for biasa - Pilihan gaya itu kontekstual: kalau ukuran data sudah terkontrol oleh API pakai yang paling mudah dibaca, tetapi untuk CLI migrasi atau sinkronisasi yang memproses puluhan ribu baris tulis imperatif - Mulai optimasi dari bagian yang paling banyak memakan waktu — mengoptimasi kode yang cuma dipanggil sekali adalah membuang waktu - Benchmark harus di production mode dengan data yang representatif dan profil browser bersih tanpa extension; dan alih-alih membenarkan hasil sendiri, berusahalah membuktikan hasil itu keliru Full transcript available on the episode page. ## EP 173: Bedah Framework Anvia - Ngobrolin WEB - Published: 2026-07-08 - URL: https://ngobrol.in/episodes/nJhk892C4_U-bedah-framework-anvia-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=nJhk892C4_U Episode ini membedah Anvia bersama pembuatnya, Indra, yang bekerja sebagai AI Engineering Lead di sebuah perusahaan fintech di Jepang. Anvia adalah framework open source berlisensi MIT untuk membangun AI agent, lahir dari puluhan agent yang ia bangun untuk produksi dan dari masalah nyata yang ia temui saat memakai tools lain. Pembedanya adalah scope. Framework sebesar Mastra atau Vercel AI SDK adalah platform besar tempat aplikasi kita harus masuk dan mengikuti aturan mereka; Anvia sebaliknya menyediakan building block dalam 22 package terpisah — core, adapter provider, storage untuk RAG, server, React UI yang headless, sandbox untuk eksekusi kode, dan studio — yang dipasang hanya kalau dibutuhkan, dengan SDK resmi masing-masing provider tetap di bawahnya. Anvia Studio hanya butuh satu baris tambahan untuk memberi chat UI, tracing, dan tampilan biaya, sehingga agent bisa diuji tanpa harus membangun aplikasi lengkap terlebih dahulu. Dua ide yang paling menonjol: agent didefinisikan sebagai full managed runtime — bukan sekadar completion plus tool calling yang eksekusinya masih kita urus sendiri, melainkan sudah membawa reasoning, tool set, loop, dan hook di dalamnya; dan dynamic tools yang mengubah daftar tool menjadi embedding lalu dicari, lahir dari kenyataan bahwa di kantornya ada 189 tool sehingga menyuntikkan semua deskripsinya justru membuat model bingung. Ditutup dengan saran belajar yang pragmatis: pahami common pattern dan kapan memakainya, tidak perlu membedah isi SDK — kecuali untuk domain bisnisnya sendiri, yang justru harus didalami karena selisih 0,01 sen di sana pernah berarti dua juta dolar. Key points: - AI agent bukan sekadar completion plus tool calling — tool calling hanya mengembalikan nama fungsi dan argumennya, sedangkan agent adalah full managed runtime yang sudah membawa reasoning, tool set, loop, dan hook - Anvia berbeda dari Mastra dan Vercel AI SDK pada scope: ia menyediakan building block dalam 22 package yang dipasang seperlunya, bukan platform yang aplikasi kita harus masuk ke dalamnya - Anvia Studio cukup ditambahkan satu baris untuk memberi chat UI, tracing, dan biaya — sehingga agent bisa diuji lebih dulu tanpa membangun aplikasi lengkap; visualisasi pipeline-nya diterjemahkan dari kode, jadi ramah bagi QA dan orang produk - Dynamic tools mengubah daftar tool menjadi embedding untuk dicari, lahir dari kenyataan 189 tool di satu sistem — menyuntikkan semua deskripsi sekaligus justru membuat model bingung - Sandbox untuk eksekusi kode bukan fitur teoretis: ada pengguna yang menjalankan script untuk membaca file ENV setelah membaca soal debate agent - Waktu terbanyak justru habis di dokumentasi, bukan di kode — kode jadi murah, dan yang mahal sekarang adalah merancang produk serta menyampaikannya dengan contoh yang benar-benar bisa disalin dan dijalankan - Cara belajarnya pragmatis: pahami common pattern dan kapan memakainya tanpa membedah isi SDK — tetapi untuk domain bisnisnya sendiri harus mendalam, karena di sistem trading selisih 0,01 sen pernah berarti dua juta dolar Full transcript available on the episode page. ## EP 172: Pekerja Web - Ngobrolin WEB - Published: 2026-06-24 - URL: https://ngobrol.in/episodes/a_MmIT8QLxI-pekerja-web-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=a_MmIT8QLxI Episode ini membahas Web Worker, saudara Service Worker yang jauh kurang populer padahal memecahkan masalah yang sangat nyata. Titik berangkatnya adalah sifat browser yang single-threaded: main thread hanya bisa mengerjakan satu hal dalam satu waktu, seperti satu orang yang merangkap kasir, tukang masak, dan tukang bungkus di satu warung. Kalau ia sibuk menghitung sesuatu yang berat, ia tidak sempat me-render, dan scroll pun terasa tersendat. Satu thread dipertahankan bukan karena keterbatasan perangkat keras zaman dulu, melainkan karena DOM akan kacau kalau banyak thread mengubahnya bersamaan. Itu sebabnya Web Worker tetap tidak boleh menyentuh DOM — ia hanya bisa berkirim pesan lewat postMessage, dan main thread yang menindaklanjuti. Perbedaan pentingnya dengan Service Worker dibedah satu per satu: Web Worker menempel pada satu tab dan mati begitu tab ditutup, bisa banyak sekaligus, cocok untuk kerja berat seperti kompresi gambar, WebAssembly, physics engine, atau memindahkan script analitik pihak ketiga keluar dari main thread; Service Worker menempel pada origin, hanya boleh satu, bertahan meski tab ditutup, dan bekerja sebagai proxy jaringan untuk offline support, caching, dan push notification. Karena postMessage terasa low level, ada dua library yang mempermudah: Comlink dari Surma yang membuat pemanggilan worker terasa seperti memanggil fungsi biasa, dan Party Town yang memindahkan script pihak ketiga ke worker sekaligus mengurung aksesnya ke API browser. Key points: - Browser hanya punya satu main thread, jadi kalkulasi berat membuat scroll tersendat karena thread yang sama tidak sempat menggambar ulang layar - Alasan DOM tetap single-threaded bukan keterbatasan hardware lama tetapi karena banyak thread yang mengubah DOM bersamaan akan berantakan — karena itu Web Worker hanya boleh berkirim pesan, bukan menyentuh DOM - Web Worker menempel pada satu tab dan mati saat tab ditutup, sedangkan Service Worker menempel pada origin, hanya boleh satu, dan tetap hidup setelah tab ditutup — inilah yang memungkinkan push notification dan background sync - Web Worker bisa dijalankan banyak sekaligus untuk kerja paralel, sementara Service Worker hanya satu per origin dalam satu waktu - Service Worker pada dasarnya adalah proxy jaringan: ia bisa mencegat setiap request dan memutuskan mana yang diambil dari internet dan mana yang dilayani dari cache, per halaman sekalipun - Comlink dari Surma menyembunyikan postMessage sehingga memanggil worker terasa seperti memanggil fungsi biasa, sedangkan Party Town memindahkan script pihak ketiga seperti analitik ke worker sekaligus membatasi aksesnya ke API browser - Daftar service worker yang pernah terdaftar di browser bisa dilihat lewat tab Application di DevTools — kebanyakan isinya justru berasal dari Chrome extension Full transcript available on the episode page. ## EP 171: Tailwind - Ngobrolin WEB - Published: 2026-06-17 - URL: https://ngobrol.in/episodes/eexwOhPaMso-tailwind-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=eexwOhPaMso Episode ini menengok kabar terbaru Tailwind, dimulai dari kisah pahit di baliknya: tim Tailwind sempat harus melepas sebagian karyawan karena model bisnis mereka bertumpu pada iklan di dokumentasi, dan sejak era AI orang tidak lagi mengunjungi dokumentasi — cukup bertanya ke coding agent. Ironisnya Tailwind justru menang telak di sisi adopsi, karena hampir semua LLM otomatis memilihnya ketika stack tidak disebutkan. Dari sisi teknis, Tailwind 4 mengubah posisinya: konfigurasi tidak lagi butuh file JavaScript atau TypeScript, cukup satu file CSS, dan seluruh dokumentasi kini memakai pendekatan itu. Ada custom variant yang membungkus selector CSS panjang menjadi satu nama pendek, dukungan container query, dan warna default berpindah ke ruang warna modern — semua mengikuti baseline, yaitu fitur yang sudah didukung semua major browser engine. Diskusi terpanjangnya justru pertanyaan yang wajar muncul: kalau AI yang menulis kode, kenapa tidak pakai CSS vanilla saja? Jawabannya bukan soal ketikan melainkan soal struktur — Tailwind memaksa berpikir per komponen dan menyediakan design token yang sudah jadi konvensi bersama, sehingga file CSS ribuan baris yang berujung tumpukan !important lebih kecil kemungkinannya terjadi. Ditutup dengan nasihat belajar: hafalkan konsep bukan sintaks, pelajari fitur bahasa saat dibutuhkan saja, dan sadari bahwa fundamental paling terasa gunanya justru saat AI mulai berputar-putar — orang yang paham bisa langsung menunjuk letak masalahnya, yang juga membuat pemakaian token jauh lebih hemat. Key points: - Tailwind terpaksa melepas sebagian karyawan karena pendapatan iklan di dokumentasi anjlok — orang tidak lagi mengunjungi docs sejak bisa bertanya ke coding agent, padahal adopsi Tailwind justru naik karena LLM otomatis memilihnya - Tailwind 4 tidak lagi butuh konfigurasi JavaScript atau TypeScript — cukup satu file CSS, dan seluruh dokumentasi kini memakai pendekatan itu - Custom variant membungkus selector CSS yang panjang menjadi satu nama pendek yang bisa dipakai ulang, dan karena semuanya ada di satu file CSS siapa pun yang bingung tinggal membukanya - Tailwind mengikuti baseline: fitur yang memakai CSS terbaru disembunyikan sampai fitur itu didukung semua major browser engine - Alasan tetap memakai Tailwind meski AI yang menulis kode bukan soal ketikan tetapi struktur — ia memaksa berpikir per komponen dan menyediakan design token yang sudah jadi konvensi bersama manusia dan model - Pakai role seperti background dan foreground, bukan warna mentah seperti green-700 — inilah yang membuat menambahkan dark mode belakangan jadi pekerjaan sebentar, bukan proyek sebulan; dan AI perlu diarahkan agar tidak mengarang warna sendiri - Fundamental paling terasa gunanya saat AI mulai berputar-putar: orang yang paham bisa langsung menunjuk file dan fungsi yang bermasalah, dan itu sekaligus memangkas token karena model tidak perlu menyisir seluruh codebase Full transcript available on the episode page. ## EP 170: Ngobrolin State of AI - Ngobrolin WEB - Published: 2026-06-10 - URL: https://ngobrol.in/episodes/oNrHsiogsQY-ngobrolin-state-of-ai-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=oNrHsiogsQY Episode ini membedah hasil survei State of AI di stateofai.dev, saudara dari seri State of JS dan State of CSS, tetapi kali ini fokus pada bagaimana web developer benar-benar memakai AI. Rata-rata responden mengaku 54% kodenya digenerate AI, ChatGPT masih paling banyak dipakai meski penggunaannya sedikit turun, sementara Claude dan Gemini naik paling tajam. Temuan yang paling melegakan justru soal uang: 40% responden tidak mengeluarkan biaya pribadi sama sekali untuk AI, dan bila digabung dengan yang membayar sampai 50 dolar sebulan, angkanya mencapai sekitar 81%. Artinya kesan bahwa semua orang berlangganan jor-joran itu keliru — yang terlihat royal umumnya dibayari kantor atau ditopang duit investor. Pain point terbesarnya juga bukan hal eksotis: halusinasi, kualitas kode, biaya, lalu comprehension — model salah memahami maksud kita, yang berbeda dari halusinasi. Sepanjang pembahasan datanya sendiri dikritisi: banyak responden mengisi nama produk (ChatGPT, Claude.ai) sebagai nama model, atau menyebut Ollama dan OpenCode yang sebenarnya tools bukan model, sehingga sebagian grafik menyesatkan. Bagian pembukanya berisi diskusi soal AI di dunia medis — pasien kini datang membawa jawaban ChatGPT untuk dikonfirmasi — dengan pesan tegas: untuk urusan medis, finansial, dan hukum, jadikan AI sebagai teman diskusi dan pencari sumber, bukan pengambil keputusan. Contoh pemakaian yang sehat justru mencari jurnal lewat NotebookLM lalu membaca sumber aslinya lewat kutipan yang disediakan. Key points: - Rata-rata responden mengaku 54% kodenya digenerate AI, dan ChatGPT masih paling banyak dipakai meski turun sedikit sementara Claude dan Gemini naik paling tajam - 40% responden tidak mengeluarkan biaya pribadi sama sekali untuk AI, dan bila digabung dengan yang membayar sampai 50 dolar sebulan totalnya sekitar 81% — yang terlihat jor-joran umumnya dibayari kantor atau duit investor - Pain point terbesar tetap halusinasi dan kualitas kode, tetapi comprehension muncul sebagai kategori tersendiri: model salah memahami maksud kita, berbeda dari mengarang jawaban - Datanya sendiri perlu dibaca hati-hati — banyak responden mengisi nama produk sebagai nama model, atau menyebut Ollama dan OpenCode yang sebenarnya tools, sehingga sebagian grafik menyesatkan - GitHub Copilot paling banyak dipakai karena terbawa paket enterprise yang sudah berlangganan Azure, tetapi sentimennya kebanyakan netral — sedangkan Claude Code paling tinggi tingkat kepuasannya - Untuk urusan medis, finansial, dan hukum, jadikan AI teman diskusi dan alat mencari sumber — bukan pengambil keputusan; pola sehatnya adalah memakai NotebookLM mencari jurnal lalu membaca sumber aslinya lewat kutipan - Yang bisa bertanya dengan benar adalah yang sudah punya keahlian di bidangnya — kalau salah mendefinisikan masalah, arah jawabannya ikut salah sejak awal Full transcript available on the episode page. ## EP 169: Liputan langsung Google I/O - Ngobrolin WEB - Published: 2026-06-03 - URL: https://ngobrol.in/episodes/wHi7Q711vW8-liputan-langsung-google-io-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=wHi7Q711vW8 Episode ini adalah liputan langsung Google I/O dari sudut pandang orang yang hadir di lokasi. Tamunya Pak Dika, yang berangkat lewat Friends of Google — program dari tim marketing Google, bukan jalur GDE — dan bercerita mulai dari perjalanan 17 jam via Narita sampai antre imigrasi dua jam karena tiga pesawat mendarat bersamaan. Sebagian besar isinya justru soal hal-hal yang tidak terlihat di siaran: visa yang baru terbit seminggu sebelum berangkat sehingga semua hotel harus dipesan yang refundable, biaya hidup yang bikin sekali Uber dari bandara San Francisco ke Mountain View habis 100 dolar, motel di Sunnyvale seharga 180 dolar semalam karena semua hotel penuh, dan ojek online di depan kedutaan yang berkeliling membawa sepuluh tas titipan karena pemohon visa tidak boleh membawa apa pun masuk. Dari acaranya sendiri: menonton Sundar Pichai bicara langsung terasa seperti konser dan demo AI-nya berjalan mulus tanpa kegagalan, berbeda dari tahun-tahun sebelumnya yang sempat error. Ada latte art yang gambarnya di-prompt sendiri lewat Gemini lalu dicetak di atas kopi, mobil self driving Waymo yang tidak bisa dinaiki tanpa nomor Social Security, hidden quest berburu barcode dengan hadiah Coral board berisi TPU, ruang podcast dengan kamera yang otomatis zoom out menyesuaikan jumlah orang tanpa operator, dan sesi khusus kreator di kantor Google untuk memberi masukan soal Gemini. Ditutup dengan keresahan Pak Dika sebagai pengajar: tugas mahasiswa kini bagus semua tetapi tidak ada yang bisa menjelaskannya ketika ditanya. Key points: - Tiket Google I/O tidak bisa diperebutkan seperti war biasa — harus apply lebih dulu dan disetujui berdasarkan asal perusahaan, jabatan, dan relevansinya - Biaya tak terlihat lebih besar daripada tiketnya: sekali Uber dari bandara San Francisco ke Mountain View 100 dolar, dan motel di Sunnyvale 180 dolar semalam karena semua hotel penuh oleh acara - Visa yang baru terbit seminggu sebelum berangkat memaksa semua pemesanan hotel dibuat refundable — dan di depan kedutaan ada ojek online yang berkeliling membawa sepuluh tas titipan karena pemohon tidak boleh membawa apa pun masuk - Demo AI di panggung tahun ini berjalan mulus sepenuhnya, berbeda dari tahun-tahun sebelumnya yang sempat error di depan penonton - Peralatan acaranya sendiri menunjukkan otomasi yang sama: kamera podcast tanpa operator otomatis zoom out menyesuaikan berapa orang yang duduk, dan latte art dicetak dari gambar yang di-prompt sendiri lewat Gemini - Kreator yang hadir dikumpulkan di kantor Google untuk memberi masukan khusus soal Gemini app — mereka masuk program VIP yang mendapat model tier tertinggi lebih dulu sebagai penguji - Keresahan dari sisi pengajar: tugas mahasiswa kini bagus semua tetapi tidak ada yang bisa menjelaskan ketika ditanya, sementara senior engineer di media sosial justru ikut mengadvokasi vibe coding Full transcript available on the episode page. ## EP 168: Google I/O 2026 - Ngobrolin WEB - Published: 2026-05-27 - URL: https://ngobrol.in/episodes/hDtImY8hikU-google-io-2026-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=hDtImY8hikU Episode ini merangkum pengumuman Google I/O 2026 dengan catatan bahwa tema tahunnya bergeser lagi — dua tahun lalu era AI, tahun lalu era Gemini, tahun ini era agent. Model barunya adalah Gemini 3.5 Flash dan Gemini Omni yang benar-benar multimodal di kedua arah: input berupa teks, gambar, video, dan audio, output-nya pun bisa video, sehingga menyunting video lewat percakapan menjadi mungkin. Antigravity berubah drastis dari sekadar IDE hasil fork VS Code menjadi payung produk: ada aplikasi desktop yang mirip Codex, ada Antigravity CLI yang dibangun dari nol dan menggantikan Gemini CLI, ada SDK untuk membangun harness sendiri, dan integrasi ke platform agent enterprise. Sisi web membawa beberapa hal praktis: fungsi contrast-color yang otomatis memilih hitam atau putih, elemen dialog yang bisa ditutup dengan klik di luar tanpa JavaScript, corner-shape yang melampaui border-radius, dan linear() untuk animasi berbasis fisika. Dua hal yang paling memancing diskusi adalah HTML in Canvas — membalik pola lama, kini elemen HTML sungguhan bisa dirender di dalam canvas, membuka pintu untuk form di dalam game, buku 3D, dan interaksi fisika pada elemen DOM — serta Web MCP, usulan standar web agar situs mengekspos fitur-fiturnya sebagai tool bagi AI agent, mirip mendefinisikan tool calling tetapi lewat Web API. Ditutup dengan koleksi agent skill resmi dari tim Chrome yang berisi praktik web modern, agar LLM tidak lagi menyarankan jQuery untuk hal yang sudah punya solusi native. Key points: - Gemini Omni multimodal di dua arah — bukan hanya menerima video dan teks sebagai input tetapi juga menghasilkan video, sehingga menyunting video lewat percakapan menjadi mungkin - Antigravity berubah dari satu IDE menjadi payung produk: aplikasi desktop, CLI yang dibangun dari nol menggantikan Gemini CLI, dan SDK untuk membangun harness sendiri — harness-nya sama antara desktop dan CLI - HTML in Canvas membalik pola lama: elemen HTML sungguhan kini bisa dirender di dalam canvas, membuka form di dalam game, buku 3D yang teksnya bisa diseleksi, dan interaksi fisika pada elemen DOM - Web MCP adalah usulan standar agar situs mengekspos fiturnya sebagai tool untuk AI agent — mendefinisikan skema dan fungsi seperti tool calling, tetapi lewat Web API dan lintas browser - CSS membawa beberapa hal yang menghapus JavaScript: contrast-color yang otomatis memilih hitam atau putih, dialog yang bisa ditutup dengan klik di luar, corner-shape untuk bentuk sudut di luar border-radius, dan linear() untuk animasi berbasis fisika - Tim Chrome merilis koleksi agent skill resmi berisi praktik web modern, supaya LLM tidak lagi menyarankan jQuery atau library untuk hal yang sudah ada padanan native-nya - SynthID menanamkan watermark di level piksel, bukan hanya label di bawah gambar — jadi tetap bertahan setelah di-screenshot, mirip pola pengaman pada uang kertas yang membuat scanner menolak memindainya Full transcript available on the episode page. ## EP 167: Alat Desain AI - Ngobrolin WEB - Published: 2026-05-20 - URL: https://ngobrol.in/episodes/dD1AajkCSe0-alat-desain-ai-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=dD1AajkCSe0 Episode ini menelusuri gelombang alat desain berbasis AI: getdesign.md, Stitch dari Google, Claude Design, Open Design, dan Impeccable. Pembukaannya adalah pengakuan jujur bahwa jago CSS dan jago visual design itu dua keahlian berbeda yang sering dianggap satu paket — CSS punya spesifikasi yang bisa dipelajari, sementara membuat desain yang punya karakter seperti Vercel atau Apple adalah hal lain, dan justru di situlah AI sekarang menutup celah. Dibahas juga kontroversi getdesign.md yang bisa meniru design token situs populer seperti Airbnb hanya dengan satu perintah. Kekhawatiran utamanya bukan soal originalitas — meminta desainer meniru situs lain juga selalu bisa dilakukan — melainkan bahwa scam jadi jauh lebih mudah: dulu penanda penipuan adalah tampilan yang acak-acakan karena scammer tidak punya budget untuk desainer, sekarang halaman phishing bisa dibuat sepolished aslinya. Bagian demo membandingkan Stitch dan Claude Design. Stitch bagus di one shot tetapi kacau saat diminta revisi, sehingga lebih baik memulai chat baru daripada menyunting; ia juga masih menuntut ekspor ke AI Studio dan instruksi teknis manual seperti memecah komponen React agar tidak menumpuk di satu file. Claude Design menang di alur ujung ke ujung dalam satu antarmuka — generate design system dulu (sekitar 30 menit), lalu prototipe yang komponennya sudah siap pakai, dan design system itu bisa dipakai ulang satu tim. Ditutup dengan design.md, format markdown terstandar dari Google untuk design token beserta CLI linter-nya, dan Figma MCP yang membuat perbandingan spacing serta line-height jadi urusan mesin ke mesin, bukan lagi tebak-tebakan mata. Key points: - Jago CSS dan jago visual design adalah dua keahlian berbeda yang sering diasumsikan satu paket — CSS punya spesifikasi yang bisa dipelajari, sedangkan membuat desain yang berkarakter tidak, dan di situlah alat AI paling menolong - Bahaya terbesar alat yang bisa menyalin design token situs populer bukan soal originalitas tetapi scam: penanda klasik penipuan adalah tampilan acak-acakan, dan itu kini bisa dihapus dengan mudah - Stitch bagus untuk one shot tetapi berantakan saat diminta merevisi, jadi lebih efektif membuka chat baru daripada menyunting hasil lama - Claude Design unggul karena alurnya ujung ke ujung dalam satu antarmuka: generate design system dulu, lalu prototipe dengan komponen yang sudah siap pakai — dan design system itu bisa dipakai ulang oleh satu tim - design.md adalah markdown biasa dengan frontmatter terstandar untuk design token, jadi tetap berguna meski kita tidak memakai tool Google — cukup suruh AI assistant membacanya - CLI design.md bisa mengecek field yang hilang, mendeteksi token duplikat atau penamaan yang tidak konsisten, memeriksa kontras WCAG, dan mengekspor ke konfigurasi Tailwind - Figma MCP mengubah perbandingan spacing, line-height, dan font menjadi urusan mesin ke mesin — tetapi scope-nya harus dipecah per komponen, karena satu halaman penuh membuat coding agent kewalahan Full transcript available on the episode page. ## EP 166: Bedah Web - Ngobrolin WEB - Published: 2026-05-13 - URL: https://ngobrol.in/episodes/_BnH4kIsSwk-bedah-web-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=_BnH4kIsSwk Episode ini membedah appfirst.id, sebuah direktori aplikasi buatan Khalid, backend developer yang sehari-hari bekerja dengan Java 8 dan Spring MVC di kantor lalu membangun side project agar tetap relevan. Uniknya seluruh aplikasi dibuat dengan Next.js yang sama sekali belum pernah ia pakai sebelumnya — bahkan cara menjalankannya pun ia tanyakan ke AI — dan tampilannya sengaja dimintakan menyerupai situs Anthropic. Bagian paling berguna adalah alurnya membangun fitur dengan coding agent: minta kajian teknis ujung ke ujung dulu dalam file markdown, review dan tuning kajian itu, cek ulang apakah kajian masih sinkron dengan kode terbaru, baru eksekusi. Setelah kode jadi, ia meminta agent membuat skenario tes dalam bentuk markdown lalu mengetesnya manual sendiri karena tidak percaya tes otomatis dan takut boros token. Ivan menawarkan alternatif: pakai agent browser yang membaca Accessibility Tree Chrome sehingga tidak perlu screenshot yang mahal, dan tulis skenario sebagai langkah pengguna, bukan sebagai kode Playwright. Ditemukan juga masalah nyata: query count langsung ke database di homepage yang berpotensi jadi DDoS diri sendiri (solusinya tabel counter yang di-update cron, atau cache), gallery screenshot yang terasa mati karena tidak ada placeholder berukuran tetap, dan thumbnail yang gepeng karena flex-shrink belum diatur. Diskusi berlanjut ke blind spot memakai AI di bidang yang tidak kita kuasai, mekanika token yang habis karena seluruh konteks dikirim ulang setiap giliran, dan kapan Claude enterprise plan masuk akal. Key points: - Alur vibe coding yang berkelanjutan: minta kajian teknis ujung ke ujung dalam file markdown, review dan tuning, cek ulang apakah kajian masih sinkron dengan kode terbaru, baru eksekusi — jauh lebih minim bug daripada langsung menyuruh coding - Menyuruh agent menulis test Playwright itu boros token; lebih hemat memakai agent browser yang membaca Accessibility Tree Chrome dan menulis skenario sebagai langkah pengguna, bukan sebagai kode - SELECT COUNT langsung di homepage berarti setiap refresh menembak database — perbaikannya bisa sesederhana tabel counter yang di-update cron, tanpa harus menambah Redis - Gallery yang terasa mati bukan karena lambat tapi karena tidak ada placeholder berukuran tetap; sediakan div seukuran gambar atau lazy placeholder supaya tidak ada loncatan - AI tidak punya mata: thumbnail gepeng karena flex-shrink, proporsi logo yang terlalu kecil, dan font yang tidak konsisten tidak akan diperbaiki kecuali kita screenshot dan menunjuknya secara eksplisit - Blind spot terbesar adalah bidang yang bukan keahlian kita — salah satu penawarnya adalah meminta model yang berbeda me-review kode buatan model lain sebelum di-commit - Token cepat habis karena setiap giliran mengirim ulang seluruh konteks; lebih baik buka sesi baru per task daripada compact berulang, dan pelajari mekanikanya dengan membuat chatbot vanilla sendiri Full transcript available on the episode page. ## EP 165: Zona Waktu - Ngobrolin WEB - Published: 2026-05-06 - URL: https://ngobrol.in/episodes/4vHgtGtsDFg-zona-waktu-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=4vHgtGtsDFg Episode ini membahas zona waktu, topik yang terlihat sepele sampai benar-benar diimplementasikan. Premisnya: waktu bukan sekadar fakta geografis yang tinggal dibagi 24, melainkan keputusan politik, ekonomi, dan sosial yang bisa berubah kapan saja di luar kendali developer. Contohnya India yang seharusnya punya tiga zona waktu tetapi parlemennya tidak ada yang mau mengalah sehingga bertemu di tengah pada +5:30, Nepal di +5:45, dan Tiongkok yang seluas itu memaksakan satu zona waktu untuk semua wilayahnya. Kesalahan klasik yang dibahas adalah memakai now() atau NOW() bawaan bahasa dan database: di laptop lokal semuanya benar, tetapi begitu di-deploy ke server luar negeri jam yang tersimpan bergeser dan cron tidak jalan pada waktu yang diharapkan. Solusinya berlapis — server mengirim ISO 8601 lalu front-end menghidrasinya dengan Intl.DateTimeFormat yang sudah tersedia di Web API tanpa perlu moment.js, atau menyimpan dua kolom (UTC dan zona waktu asal). Dibahas juga jebakan month di JavaScript yang dimulai dari 0 karena disimpan sebagai array nama bulan, sementara tanggal tidak. Bagian terberatnya adalah tiga opsi menyimpan waktu acara yang jatuh setelah aturan zona waktu berubah — semuanya menyimpan UTC, tetapi berbeda pada apa yang dijadikan sumber kebenaran; yang paling disukai adalah menyimpan local time sebagai patokan dan menganggap UTC sebagai turunan yang bisa dihitung ulang. Ditutup dengan Temporal, API baru pengganti Date yang meninggalkan OOP dan bekerja seperti namespace mirip Intl, plus fakta bahwa ada BIPM yang menjaga akurasi UTC dan ITU yang mengurus zona waktu di sistem operasi. Sesi ini terselenggara berkat kerja sama dengan DomaiNesia. Key points: - Zona waktu bukan fakta geografis murni melainkan keputusan politik — India memilih +5:30 karena parlemennya tidak ada yang mau mengalah antara +5 dan +6, dan Tiongkok memaksakan satu zona waktu untuk seluruh wilayahnya - Kesalahan paling umum dan paling berulang: memakai now() bawaan PHP atau MySQL, benar di laptop lokal tetapi bergeser begitu di-deploy ke server luar negeri — dan cron ikut meleset tanpa error apa pun - Solusi yang paling benar adalah server mengirim ISO 8601 lalu front-end menghidrasinya dengan Intl.DateTimeFormat yang sudah ada di Web API — tidak perlu memasang moment.js hanya untuk memformat tanggal - Argumen locale di Intl.DateTimeFormat menerima array sebagai fallback berjenjang (misalnya jv lalu id), dan kode dua huruf berarti bahasa umum sementara tambahan huruf kapital menandai region seperti en-GB versus en-US - Bulan di JavaScript dimulai dari 0 karena disimpan sebagai array nama bulan, sedangkan tanggal tidak — getMonth() mengembalikan 1 untuk Februari - Untuk acara yang jatuh setelah aturan zona waktu berubah, pendekatan terbaik adalah menjadikan local time sebagai sumber kebenaran dan UTC sebagai nilai turunan yang dihitung ulang — sehingga tidak perlu konversi bolak-balik memakai versi aturan lama - Library apa pun tidak menyelesaikan edge case seperti ambiguous time atau perubahan batas zona waktu; kita tetap harus memilih satu pendekatan dan konsisten memakainya Full transcript available on the episode page. ## EP 164: Vite+ - Ngobrolin WEB - Published: 2026-04-28 - URL: https://ngobrol.in/episodes/Edez-dpX0Hw-vite-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=Edez-dpX0Hw Episode rekaman ini membahas Vite+, saudara dari Vite yang bukan produk berbayar — berbeda dengan Tailwind+ yang memang versi komersial dari Tailwind. Intinya Vite+ menjawab keluhan klasik ekosistem JavaScript: setiap kali memulai project kita harus memilih dan merakit sendiri bundler, linter, test runner, dan task runner satu per satu. Vite+ membungkus semuanya menjadi satu toolchain yang opinionated. Tim mencoba langsung perintah-perintahnya di terminal. Lintingnya menampilkan lokasi error secara visual lewat terminal UI, bukan sekadar teks; test dan coverage sudah tersedia tanpa perlu menulis script test, test:ui, dan test:watch di package.json sendiri; dan untuk monorepo ada task graph dengan dependensi antar-perintah — build hanya jalan setelah lint selesai, deploy setelah build dan test. Ada juga perintah pack yang membungkus aplikasi menjadi satu file executable standalone lengkap dengan Node.js di dalamnya, sehingga pengguna tidak perlu memasang Node terlebih dahulu; fitur itu hanya didukung Node.js, tidak di Bun maupun Deno. Catatan penting di akhir: halaman troubleshooting-nya sendiri menyebut fitur ini masih alpha meskipun sudah diumumkan, dan selama sesi memang sempat beberapa kali error. Diselingi juga obrolan soal product founder fit — produk bisa punya pasar tetapi tetap gagal kalau pembuatnya tidak menikmati mengerjakannya. Sesi ini terselenggara berkat kerja sama dengan DomaiNesia. Key points: - Vite+ bukan produk berbayar — berbeda dari Tailwind+ yang merupakan versi komersial Tailwind; ia menjawab masalah ekosistem JavaScript yang memaksa kita merakit bundler, linter, dan test runner satu per satu - Linter-nya menampilkan posisi error secara visual lewat terminal UI, bukan hanya dump teks — pengalaman CLI yang jarang ada di tooling sejenis - Script yang biasanya harus ditulis sendiri di package.json seperti test, test:ui, test:watch, dan coverage sudah tersedia langsung tanpa konfigurasi - Untuk monorepo ada task graph berbasis dependensi: build baru jalan setelah lint selesai, deploy setelah build dan test — mirip runner yang biasanya kita rakit manual - Perintah pack membungkus aplikasi menjadi satu file executable standalone yang sudah membawa Node.js di dalamnya, sehingga pengguna tidak perlu memasang Node — hanya didukung di Node.js, tidak di Bun atau Deno - Halaman troubleshooting-nya sendiri menyatakan fitur ini masih alpha meski sudah diumumkan, dan sesi percobaan memang beberapa kali error, jadi belum untuk produksi - Selain product market fit ada product founder fit: produk yang punya pasar tetap berhenti kalau pembuatnya tidak menikmati mengerjakannya, dan yang menyelamatkan saat semangat turun adalah konsistensi Full transcript available on the episode page. ## EP 163: Scam dan Penipuan - Ngobrolin WEB - Published: 2026-04-22 - URL: https://ngobrol.in/episodes/g6gKeLGYPQU-scam-dan-penipuan-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=g6gKeLGYPQU Episode ini membahas scam dan penipuan digital yang makin marak, dengan penekanan bahwa celah utamanya hampir selalu social engineering, bukan kelemahan teknis. Pola yang berulang cuma dua: too good to be true (menang undian, saldo unlimited, warisan pangeran Nigeria) dan fear mongering plus scarcity (kurang bayar pajak, akun YouTube akan kehilangan monetisasi dalam tujuh hari). Keduanya bekerja dengan mematikan pikiran jernih korban. Ivan berbagi prosedur klarifikasi berlapis yang ia pakai saat dihubungi seseorang yang mengaku kepala cabang bank: cek nama di LinkedIn, minta foto ID card, minta dikirimi undangan lewat email resmi institusi (bukan Gmail) tanpa memberi tahu alamat email kita — jika dia benar punya data kita, dia bisa menemukannya sendiri — lalu periksa DKIM dan SPF di source email, dan tetapkan tempat bertemu di kafe, bukan rumah. Dibahas juga bahwa alamat pengirim email bisa benar-benar dipalsukan sampai domain resmi, biasanya karena API key perusahaan yang bocor dan lupa dirotasi. Bagian berikutnya menelusuri modus konkret: link bank dengan huruf Unicode yang mirip, APK yang meminta permission membaca SMS sehingga OTP bisa dicuri, serangan lama yang membelokkan SMS OTP lewat jaringan seluler, paket COD bernilai kecil yang dikirim ke rumah, sampai pinjol yang diajukan atas nama korban lalu dananya diminta dikembalikan. Solusinya berlapis: reject first untuk telepon tak dikenal, urus semua urusan resmi dengan datang langsung ke kantor, pasang password manager untuk orang tua dan pasangan karena ia otomatis tidak muncul di domain yang salah, dan pakai passkey bila tersedia. Sesi ini terselenggara berkat kerja sama dengan DomaiNesia. Key points: - Hampir semua penipuan sehari-hari masuk lewat social engineering, bukan pembobolan teknis — dua pemicunya too good to be true dan menakut-nakuti dengan tenggat, keduanya membuat korban berhenti berpikir jernih - Prosedur verifikasi berlapis yang bisa ditiru: cek nama di LinkedIn, minta foto ID card, minta dikirimi email dari domain resmi institusi tanpa memberi tahu alamat email kita, periksa DKIM dan SPF di source email, lalu bertemu di kafe bukan di rumah - From address email bisa benar-benar dipalsukan sampai domain resmi — kasus scam ke kreator YouTube lolos verifikasi, diduga lewat API key perusahaan yang bocor dan lupa dirotasi; petunjuk aslinya justru ada di link tujuan seperti studio.youtube.plus.com - Institusi resmi tidak pernah menghubungi lewat WhatsApp satu per satu — kanal mereka surat resmi, email terdaftar, atau telepon kantor, jadi urusan yang benar-benar legit selalu bisa diselesaikan dengan datang ke kantor cabang - Password manager adalah proteksi terbaik untuk orang tua dan pasangan karena ia tidak akan memunculkan kredensial di domain yang salah — typo satu karakter langsung ketahuan; passkey lebih aman lagi karena butuh biometrik - OTP lewat SMS tidak aman: APK dengan permission membaca pesan bisa menangkapnya, dan pernah ada kasus OTP dibelokkan lewat jaringan seluler sehingga device korban maupun servernya sama-sama tidak disentuh - India mewajibkan situs bank memakai subdomain di bawah bank.in yang hanya dipegang pemerintah — pendekatan struktural untuk membasmi domain phishing yang bisa ditiru dengan bank.go.id Full transcript available on the episode page. ## EP 162: Bedah Situs - Ngobrolin WEB - Published: 2026-04-15 - URL: https://ngobrol.in/episodes/YoeCPP6c2LI-bedah-situs-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=YoeCPP6c2LI Episode ini melanjutkan sesi bedah situs dengan dua website institusi kesehatan yang dikirimkan lewat DomaiNesia. Situs pertama adalah Institut Kesehatan Immanuel di Bandung yang dibangun dengan Wix Studio dan dipresentasikan langsung oleh pengelolanya. Temuannya berkisar pada konsistensi: ada sembilan font berbeda dalam satu situs karena beberapa orang dari tim IT dan pemasaran sama-sama mengedit, tombol yang kadang rounded kadang kotak, bahasa yang campur Indonesia dan Inggris, video YouTube yang autoplay dan langsung memakan 55MB bandwidth, serta halaman yang butuh sembilan detik untuk selesai memuat. Situs kedua adalah website rumah sakit hasil vibe coding, dan di sini kritiknya lebih tajam karena menyangkut tujuan pengguna. Semua informasi penting — nomor telepon pendaftaran, partner asuransi, alamat — dikurung di dalam slideshow berisi gambar tanpa alt text, sehingga tidak bisa di-copy, tidak bisa diklik, tidak terbaca screen reader, dan tidak masuk indeks mesin pencari. Padahal pengunjung situs rumah sakit hampir pasti sedang butuh sesuatu, bukan sedang iseng. Ditemukan juga bug nyata: warning "Undefined variable WA Link" bocor ke HTML dan ikut membeberkan path direktori server, sehingga tombol WhatsApp hanya berfungsi di beranda. Bagian penutup menelusuri tab Coverage yang menunjukkan Font Awesome 98% tidak terpakai dan Bootstrap Icons 100% tidak terpakai, plus diskusi soal sanitasi input dan OWASP Top 10. Key points: - Situs yang diedit banyak orang butuh aturan tertulis — ukuran heading, font family, batas ukuran upload gambar — karena tanpa itu satu halaman bisa memakai sembilan font berbeda; dua sampai tiga font sudah cukup - Informasi penting jangan dikubur di dalam slideshow: nomor telepon berupa gambar tidak bisa di-copy, hilang saat slide berganti, dan tanpa alt text ia tak terbaca screen reader maupun mesin pencari - Desain bukan cuma estetika — mulailah dari tujuan pengunjung: yang membuka situs rumah sakit sedang butuh alamat, jadwal, atau kontak, jadi itulah yang harus paling mudah di-copy dan diklik - Warning PHP yang bocor ke HTML tidak hanya merusak fungsi (tombol WhatsApp mati di semua halaman kecuali beranda) tetapi juga membeberkan path direktori server ke publik - Tab Coverage di Chrome memperlihatkan berapa persen CSS/JS yang tidak terpakai per halaman — di situs ini Font Awesome 98% dan Bootstrap Icons 100% tidak terpakai, keduanya render blocking - Library eksternal untuk lightbox dan carousel sering tidak perlu lagi: elemen sudah tersedia di Web API, dan carousel ringan tanpa script bisa dipelajari dari demo di chrome.dev - Untuk PHP vanilla tanpa ORM, sanitasi setiap input pengguna dan pakai OWASP Top 10 sebagai checklist — agent skill soal security fundamentals bisa dipasang agar coding agent ikut memeriksanya Full transcript available on the episode page. ## EP 161: Bedah Situs - Ngobrolin WEB - Published: 2026-04-08 - URL: https://ngobrol.in/episodes/KJ96IaRARvQ-bedah-situs-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=KJ96IaRARvQ Episode ini adalah sesi bedah situs, membedah dua website yang dikirimkan lewat DomaiNesia secara langsung di depan penonton. Situs pertama milik Mas Zain — landing page komunitas Vibe Coding from Cafe — dan uniknya perbaikan dikerjakan saat itu juga oleh coding agent lewat Telegram, mulai dari memperbaiki contrast ratio teks yang hanya 3.0 (di bawah batas minimum WCAG 4.5) sampai membuat PR yang bisa langsung di-preview. Bagian terbesar episode adalah tutorial praktis membaca Performance panel di Chrome DevTools. Ivan menunjukkan cara throttle CPU ke mid-tier mobile dan network ke fast 4G supaya audit tidak memakai spek dewa, membedakan lab test (Lighthouse/PageSpeed) dari field data CrUX (Chrome UX Report) yang dikumpulkan anonim dari pengguna Chrome asli, lalu menelusuri kenapa LCP tinggi karena chaining CSS, font, dan JS sebelum React sempat hydrate, serta melacak layout shift sampai ke force reflow yang dipicu CSS. Situs kedua milik Baliyun, seorang mahasiswa yang juga bekerja, membawa pertanyaan apakah perlu migrasi ke Next.js demi SEO. Jawabannya tegas: bukan itu masalahnya. Sekali page load situs tersebut memakan 57MB bandwidth karena gambar galeri berukuran 2.000x2.000 piksel ditampilkan pada 80 piksel, dan mengganti framework tidak akan menyelesaikan itu. Ditemukan juga open graph image yang 404 sehingga link tidak muncul preview saat dibagikan. Key points: - Saat mengaudit performa, throttle dulu CPU ke mid-tier mobile dan network ke fast 4G — jangan mengukur dengan spek dewa karena pengguna di luar sana tidak memakai Mac dan iPhone - Lab test (Lighthouse/PageSpeed) adalah forensik di mesin kita, sedangkan CrUX adalah data lapangan anonim dari pengguna Google Chrome asli pada persentil 75 — keduanya menjawab pertanyaan yang berbeda - LCP tidak selalu gambar; browser yang menentukan elemen terbesar di viewport, dan pada situs React ia bisa tertunda lama karena chaining CSS, font, lalu beberapa chunk JS harus selesai sebelum hydration - Force reflow terjadi ketika CSS atau JS berikutnya memaksa browser menghitung ulang dimensi yang sudah ditetapkan sebelumnya — inilah sumber long task yang merusak INP - Ganti framework bukan solusi performa: situs yang memuat 57MB sekali page load karena gambar 2.000x2.000 piksel ditampilkan pada 80 piksel akan tetap berat di Next.js, Astro, maupun Laravel - Patokan praktis ukuran gambar: usahakan di bawah 100KB, mentok 150KB; pakai JPG atau WebP untuk foto dan PNG untuk logo/ikon, dan iframe seperti embed Instagram bisa diberi loading="lazy" yang sudah baseline - Open graph image yang 404 membuat link tidak menampilkan preview saat dibagikan di WhatsApp — kesalahan kecil tetapi fatal untuk promosi, dan bisa dicek cepat lewat heymeta.com Full transcript available on the episode page. ## EP 160: Project Management Tools - Ngobrolin WEB - Published: 2026-04-01 - URL: https://ngobrol.in/episodes/qlL_42q4mUE-project-management-tools-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=qlL_42q4mUE Episode ini membahas tools project management, mulai dari yang klasik sampai yang lahir karena era coding agent. Diskusi dibuka dengan kasus malware pada paket Axios yang baru terjadi, lengkap dengan pesan layanan masyarakat soal pinning versi dependensi — memakai versi eksak alih-alih caret ("karet") atau tilde ("cacing"), terutama karena Axios sering ikut terbawa sebagai dependensi dari dependensi tanpa kelihatan langsung. Masuk ke topik utama, tim menelusuri Jira sebagai standar enterprise dengan JQL (Jira Query Language) sebagai fitur andalan yang tidak ditemukan di tools lain, lalu GitHub Projects yang kini dianggap sudah cukup lengkap dan gratis bagi yang sudah membayar GitHub. Ada cerita migrasi dari Zenhub ke Jira dan GitHub Projects lewat ekspor CSV, serta ulasan Azure DevOps, Notion Projects, Asana yang dulu membangun framework JavaScript sendiri bernama Luna demi real-time update, Basecamp, Redmine yang masih dirawat sampai sekarang, ClickUp, Monday.com, dan Plane.so yang bisa self-hosted. Bagian paling menarik adalah pergeseran pemakaian: tiket kini dipakai sebagai memori antar-agent. Hasil kerja satu agent ditulis sebagai komentar di tiket supaya agent berikutnya membaca konteks itu sebelum mengambil tiket lanjutan. Beads sempat dipakai untuk ini tetapi ditinggalkan karena masalah out of sync yang menghabiskan waktu berjam-jam, digantikan GitHub Projects, Linear yang local-first, atau ticket/tk yang murni file-based di folder .tickets. Sesi ini terselenggara berkat kerja sama dengan DomaiNesia. Key points: - Insiden malware Axios jadi pengingat untuk pin versi dependensi secara eksak, bukan caret atau tilde — apalagi karena Axios sering masuk lewat dependensi dari dependensi yang tidak terlihat di package.json sendiri - Killer feature Jira adalah JQL (Jira Query Language) yang belum ditemukan padanannya di tools lain, dan sekarang bisa di-query lewat Atlassian CLI oleh coding agent untuk membuatkan tiket beserta acceptance criteria - GitHub Projects sudah cukup lengkap untuk pemakaian enterprise (kanban, calendar, custom fields, iteration, otomatis update status saat PR di-merge) dan ikut terbayar bersama langganan GitHub - Migrasi antar-tools itu mahal: pindah dari Zenhub perlu ekspor CSV untuk metadata yang tidak ada di GitHub Issue seperti priority, estimation, dan due date — dan tiket yang sudah close sengaja tidak ikut dipindahkan - Pola baru era coding agent: tiket dipakai sebagai memori antar-sesi — agent diminta menulis hasil dan alasan keputusan di komentar tiket supaya agent berikutnya punya konteks sebelum melanjutkan - Beads menarik idenya tetapi masalah out of sync antara SQLite lokal dan JSONL di branch sync bisa menghabiskan waktu berjam-jam, sehingga ditinggalkan demi GitHub Projects, Linear, atau ticket/tk yang murni file-based - Time tracking punya spektrum yang berbeda: Time Doctor merekam screenshot layar karyawan sehingga terasa terlalu jauh, sedangkan Harvest dan Toggl hanya mencatat alokasi jam — bahkan waktu memikirkan project sambil duduk di sofa tetap dihitung billable Full transcript available on the episode page. ## EP 159: Ngobrolin Otorisasi - Published: 2026-03-11 - URL: https://ngobrol.in/episodes/UMNXxUqlZS0-ngobrolin-otorisasi - YouTube: https://www.youtube.com/watch?v=UMNXxUqlZS0 Episode ini membahas otorisasi (authorization) dan bagaimana ia berbeda dari otentikasi yang pernah dibahas di episode sebelumnya. Otentikasi menjawab "siapa Anda dan benarkah Anda orang itu", sedangkan otorisasi menjawab "Anda boleh melakukan apa saja". Dari pembeda sederhana itu tim Ngobrolin WEB menelusuri empat model hak akses yang lazim dipakai di aplikasi web. Pembahasan dimulai dari RBAC (Role-Based Access Control) yang paling umum dan paling mudah dipahami, contohnya level administrator, editor, writer, dan subscriber di WordPress. Lalu naik ke ACL (Access Control List) yang memecah izin menjadi permission kecil-kecil seperti read, write, publish, dan delete others — model yang juga dipakai S3 bucket. Berikutnya ABAC (Attribute-Based Access Control, disebut juga PBAC) yang memutuskan akses lewat kondisi atas atribut user, resource, action, dan environment, sehingga bisa membatasi akses hanya pada jam kantor atau hanya beberapa hari. Terakhir ReBAC (Relationship-Based Access Control) yang dipopulerkan Google Zanzibar dan terasa seperti model Google Drive atau collaborator di GitHub. Diskusi ditutup dengan sisi implementasi: menyimpan relasi ReBAC butuh satu tabel khusus relationship sehingga memberi akses ke satu orang tidak perlu mengubah data user maupun dokumen, dan untuk relasi yang dalam seperti mutual friend atau second degree connection, graph database seperti Neo4j lebih cocok daripada relational database. Sesi ini terselenggara berkat kerja sama dengan DomaiNesia. Key points: - Otentikasi menjawab "siapa Anda" dan memverifikasi kebenarannya, sedangkan otorisasi menjawab "Anda boleh melakukan apa" — dua hal berbeda yang sering tertukar - RBAC adalah model paling lazim dan paling mudah diterapkan: role seperti administrator, editor, writer, dan subscriber di WordPress menentukan daftar izin yang menempel padanya - ACL memecah izin menjadi kontrol kecil-kecil (read, write, publish, delete milik sendiri vs delete milik orang lain) dan bisa berdiri sendiri maupun dikombinasikan dengan RBAC — S3 bucket memakai pendekatan ini - ABAC (atau PBAC) berprinsip "allow access if conditions are true" dengan empat jenis atribut: user, resource, action, dan environment — inilah yang memungkinkan aturan seperti login hanya pada jam kantor atau akses edit yang berlaku dua hari - ReBAC yang dipopulerkan Google Zanzibar menentukan akses dari relasi antara subject dan object, persis seperti owner/editor/commenter/viewer di Google Drive atau collaborator di repo GitHub - Kelebihan ReBAC adalah pemberian akses ad-hoc ke satu user tertentu cukup mengubah satu baris di tabel relationship, tanpa menyentuh data user, role, maupun atribut dokumen — tetapi ia tidak punya batas waktu bawaan seperti ABAC - Untuk relasi yang berjenjang seperti mutual friend atau second degree connection, graph database seperti Neo4j lebih mudah di-query daripada relational database Full transcript available on the episode page. ## EP 158: Stack dan Tools - Ngobrolin WEB - Published: 2026-02-18 - URL: https://ngobrol.in/episodes/00ZHWKLlp5g-stack-dan-tools-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=00ZHWKLlp5g Episode ini membahas tentang berbagai perangkat keras, perangkat lunak, dan tools yang digunakan oleh para host dalam keseharian mereka sebagai developer. Topik berkisar dari setup hardware seperti keyboard, monitor, speaker, dan microphone, hingga software development tools seperti AI coding assistants (Cursor, Windsurf, Kode, Cloudcode), terminal emulator, dan berbagai aplikasi produktivitas. Episode ini juga menyentuh tentang pengalaman menggunakan berbagai layanan VPN, browser, dan manajemen password serta snippet. Key points: - Setup hardware yang dibahas mencakup berbagai pilihan keyboard (Keychron K7, Mistel Baroko MD770, split keyboard), monitor (LG 4K 27 inch), speaker (Harman Kardon Onyx, HomePod Mini), dan microphone (Audio-Technica AT2020, Rode Wireless Go 2) - Para host berbagi pengalaman menggunakan AI coding assistant seperti Cursor, Windsurf, Kode, dan Cloudcode, dengan berbagai model AI seperti Opus, GLM, dan Gemini untuk coding dan review - Terminal dan shell menjadi bagian penting dari workflow, dengan penggunaan Warp, Ghostty, iTerm2, dan Oh My ZSH untuk meningkatkan produktivitas - Aplikasi produktivitas yang menjadi favorit termasuk Raycast (sebagai replacement untuk Alfred), Snippet Lab untuk manajemen code snippets, dan Karabiner untuk custom keyboard mapping - Diskusi tentang browser mencakup Safari, Chrome, Arc, Brave, Firefox, dan Zen Browser dengan pertimbangan privacy dan user experience - Layanan VPN seperti Mullvad dan Tunnelbear dibahas dengan fokus pada dedicated IP address untuk keamanan akses server - Episode diakhiri dengan promosi Domonesia yang memberikan diskon 50% untuk VPS Turbo Full transcript available on the episode page. ## EP 157: Library Animasi - Ngobrolin WEB - Published: 2026-02-11 - URL: https://ngobrol.in/episodes/TdgJMT3NrRM-library-animasi-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=TdgJMT3NrRM Episode ini membahas tentang animasi dalam web development, mulai dari berbagai jenis animasi seperti micro-interaction, page transition, dan scroll-driven animation. Host membahas beberapa library animasi populer seperti GSAP, Framer Motion (sekarang Motion), Anime.js, dan Lottie. Diskusi juga mencakup perbandingan antara library-library tersebut dari sisi performa, ukuran bundle, licensing, dan kemudahan penggunaan. Ada juga showcase portfolio dari Yogi yang menggunakan GSAP dengan efek combat style yang impresif, serta pembahasan tentang view transition API sebagai alternatif modern untuk transisi antar halaman. Key points: - Ada beberapa kategori animasi dalam web: micro-interaction (button hover, loading state), page transition, dan scroll-driven animation - GSAP (GreenSock Animation Platform) adalah library animasi yang sudah lama ada, sekarang open source dan gratis digunakan namun tidak boleh untuk membangun produk yang kompetitif dengan Webflow - Framer Motion (sekarang bernama Motion) lebih populer di ekosistem React karena API yang ramah developer dengan konsep komponen (motion.div) - Motion memiliki varian 'motion mini' dengan ukuran bundle jauh lebih kecil (40-50 KB dibanding 500 KB versi full) untuk use case yang lebih sederhana - Lottie adalah format animasi yang memungkinkan embed file animasi (.lottie) dengan runtime tersendiri, mirip konsep Flash namun lebih modern - View Transition API adalah native browser API untuk transisi antar halaman, ada level 1 (client-side only) dan level 2 (multi-page) - Showcase portfolio Yogi menggunakan GSAP dengan efek combat style yang dikembangkan dengan bantuan AI, menunjukkan bagaimana AI dapat membantu developer belajar dan mengimplementasikan animasi kompleks Full transcript available on the episode page. ## EP 156: Computational Thinking - Ngobrolin WEB - Published: 2026-02-03 - URL: https://ngobrol.in/episodes/c5RSiDy2sRM-computational-thinking-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=c5RSiDy2sRM Episode ini membahas tentang Computational Thinking, sebuah framework berpikir yang menjadi fundamental lebih dasar dari kemampuan teknis programming. Host membahas empat pilar utama Computational Thinking yang dikenal dengan akronim AADP (Abstraction, Algorithm Design, Decomposition, Pattern Recognition) dan bagaimana konsep ini tidak hanya berguna untuk programming tetapi juga applicable dalam kehidupan sehari-hari dan karir profesional. Diskusi juga mencakup bagaimana Computational Thinking sudah diajarkan di kurikulum sekolah (SD/SMP) dan bagaimana materi dari BBC Bitesize memberikan penjelasan yang mudah dipahami dengan contoh-contoh konkret. Key points: - Computational Thinking adalah framework berpikir layaknya komputer dengan memecahkan masalah secara sistematis dan logis, ini adalah fundamental yang lebih dasar dari fundamental web atau programming - Empat pilar Computational Thinking (AADP): Abstraction (berfokus pada detail penting), Algorithm Design (merancang langkah-langkah sistematis), Decomposition (memecah masalah besar menjadi bagian kecil), dan Pattern Recognition (mengenali pola yang berulang) - Computational Thinking tidak hanya untuk programming - ini applicable dalam kehidupan sehari-hari seperti merencanakan resepsi pernikahan, mengatur flow supermarket, hingga menyelesaikan kasus kriminal - Dekomposisi penting karena masalah besar sering membuat kita bingung mulai dari mana; dengan memecah masalah menjadi bagian kecil, kita bisa fokus dan manage setiap bagian dengan lebih baik - Pattern Recognition memungkinkan kita menggunakan solusi yang sudah ada untuk masalah serupa, mempercepat penyelesaian, dan menciptakan standarisasi seperti framework, component library, atau SOP - Abstraction membantu kita fokus pada detail yang penting dan mengabaikan hal-hal yang tidak relevan, seperti ketika mencari akar masalah dengan teknik 5 Whys atau fokus pada core functionality saat development - Algorithm Design bukan hanya tentang kode tetapi juga tentang SOP dan workflow dalam pekerjaan seperti deployment flow, yang bisa di-hand over ke orang lain karena terdokumentasi dengan baik Full transcript available on the episode page. ## EP 155: Alat Pengkodean Agen - Ngobrolin WEB - Published: 2026-01-28 - URL: https://ngobrol.in/episodes/Tkh8-LleLws-alat-pengkodean-agen-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=Tkh8-LleLws Episode ini membahas tentang Agentic Coding Tools, yaitu tools AI yang dapat membantu developer dalam menulis kode secara lebih efisien. Ivan dan Eka berbagi pengalaman mereka menggunakan berbagai tools seperti Cursor, Claude Code (Ampcode), Gemini CLI, dan GitHub Copilot. Diskusi mencakup evolusi dari ChatGPT web interface, ke Copilot autocomplete, hingga era agentic coding saat ini di mana AI bisa membuat file, menjalankan terminal, dan mengerjakan task secara mandiri. Mereka juga membahas pentingnya spec-driven development dan design system untuk mengontrol output AI agar tetap konsisten. Episode ini juga menyentuh topik burnout karena terlalu asyik bermain dengan AI, serta tips praktis seperti menggunakan VPS untuk menjalankan agentic coding agar lebih aman dari risiko halusinasi AI yang bisa menghapus file penting. Key points: - Agentic AI berbeda dari AI biasa karena memiliki tools, memory, dan reasoning loop yang memungkinkan AI mengerjakan task sampai selesai - Evolusi coding assistant: dari ChatGPT web → Copilot autocomplete → Cursor inline chat → CLI-based agents (Claude Code, Gemini CLI) - Spec-driven development penting untuk mengarahkan AI agar tidak melantur dan tetap sesuai dengan requirement - Design system dan design token membantu menjaga konsistensi output AI, terutama untuk styling dengan Tailwind CSS - Disarankan menggunakan VPS untuk agentic coding untuk menghindari risiko AI menghapus file penting secara tidak sengaja - Context window AI terbatas (seperti ingatan ikan Dory), sehingga dokumentasi dan persistent context sangat penting - Tools populer saat ini: Cursor, Claude Code (Ampcode), Gemini CLI, GitHub Copilot, Kiro, dan berbagai UI generators seperti Loveable dan Bolt Full transcript available on the episode page. ## EP 154: Agentic AI - Ngobrolin WEB - Published: 2026-01-21 - URL: https://ngobrol.in/episodes/ZcYNuHirHOA-agentic-ai-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=ZcYNuHirHOA Episode ini membahas tentang Agentic AI, menjelaskan perbedaan mendasar antara AI/LLM biasa dengan Agent AI. Diskusi ini terinspirasi dari GitHub Discussion yang diajukan oleh salah satu pendengar, dan menjadi fondasi penting sebelum membahas topik-topik lanjutan seperti Agentic UI. Trio Ngobrolin WEB menjelaskan bahwa perbedaan utama antara LLM biasa dan Agent adalah kemampuan Agent untuk bekerja dalam loop sampai tugasnya selesai. LLM biasa hanya bisa menerima prompt dan memberikan respons sekali jalan, sedangkan Agent bisa terus berinteraksi, menggunakan tools, dan mengambil keputusan sampai goal tercapai. Contoh praktis yang dibahas termasuk perbandingan antara ChatGPT zaman dulu (copy-paste kode manual) dengan agentic coding assistant modern seperti Cursor, Claude Code, dan Kiro yang bisa menulis file, menjalankan terminal, dan menyelesaikan task secara mandiri. Key points: - Agent AI bekerja dalam loop sampai tugasnya selesai, berbeda dengan LLM biasa yang hanya sekali prompt-response - Tiga komponen utama Agent: Tools (kemampuan melakukan aksi), Memory (menyimpan konteks), dan Reasoning Loop (berpikir dan iterasi) - LLM biasa hanya bisa conversation, Agent bisa melakukan action/tindakan nyata - Contoh perbedaan: LLM biasa tidak bisa booking pesawat sungguhan, Agent bisa karena punya tools dan bisa berinteraksi sampai task selesai - Evolusi coding assistant: dari ChatGPT (copy-paste manual) → Copilot (satu perintah sekali jalan) → Agentic AI (bisa menyelesaikan goal kompleks) - Anthropic membedakan antara 'workflow' (prescriptive) dan 'agent' (autonomous) dalam kategori agentic system - Tahun 2025 adalah era Agentic AI seperti yang diprediksi sebelumnya Full transcript available on the episode page. ## EP 153: CSS Wrapped - Ngobrolin WEB - Published: 2025-12-17 - URL: https://ngobrol.in/episodes/Qh0ImRYTync-css-wrapped-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=Qh0ImRYTync Episode ini membahas CSS Wrapped 2025, yaitu rekapitulasi fitur-fitur CSS dan UI baru yang hadir di Google Chrome sepanjang tahun 2025. Ivan dan Eka membahas satu per satu fitur yang dikategorikan menjadi tiga bagian: Customizable Components, Next Gen Interaction, dan Optimized Ergonomics. Diskusi dimulai dengan cerita tentang event offline Ngobrolin WEB di Jogja bersama DomaiNesia, sebelum masuk ke pembahasan teknis tentang invoker commands, dialog light dismiss, popover API, dan berbagai fitur CSS baru lainnya. Tema CSS Wrapped tahun ini adalah "Sculpt a Dynamic Web" dengan visual Play-Doh yang menggambarkan CSS sebagai building blocks yang bisa dibentuk sesuai kebutuhan. Episode ini cocok untuk developer yang ingin mengetahui fitur-fitur CSS terbaru yang sudah bisa digunakan di browser modern, serta memahami perbedaan antara dialog dan popover. Key points: - CSS Wrapped 2025 dibagi menjadi 3 kategori: Customizable Components, Next Gen Interaction, dan Optimized Ergonomics - Invoker Commands memungkinkan membuka modal/dialog tanpa JavaScript, cukup dengan atribut HTML command dan commandfor - Dialog dan Popover memiliki behavior berbeda: Dialog bersifat blocking dan butuh user decision, Popover bisa di-dismiss dengan klik di luar - Light Dismiss feature memungkinkan dialog ditutup dengan tombol Escape atau back button di mobile - Fitur-fitur baru ini meningkatkan Developer Experience (DX) dengan mengurangi kebutuhan JavaScript untuk interaksi UI dasar - Beberapa fitur sudah di-support Firefox tapi Safari masih tertinggal (belum Baseline) - Google Chrome DevRel membuat CSS Wrapped sebagai program tahunan untuk highlight fitur CSS/UI baru Full transcript available on the episode page. ## EP 152: Ngobrolin Gemini 3 - Ngobrolin WEB - Published: 2025-12-03 - URL: https://ngobrol.in/episodes/lPTtyv8Hzgs-ngobrolin-gemini-3-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=lPTtyv8Hzgs Episode 158 ini membahas tentang Gemini 3, model AI terbaru dari Google yang dirilis beberapa minggu sebelumnya. Pembawa acara mendiskusikan bagaimana Gemini 3 mengalahkan semua model AI lain di berbagai benchmark, termasuk benchmark unik seperti 'Vending Bench' yang mensimulasikan bisnis vending machine selama setahun. Diskusi juga mencakup berbagai produk AI Google lainnya seperti AI Studio, Notebook LM, CodeWiki yang bisa generate dokumentasi dari repository, serta Google AI Mode untuk pencarian. Episode ini juga menyinggung tentang kolaborasi dengan DomaiNesia dan rencana kunjungan ke kantor mereka di Jogja, serta penggalangan dana untuk korban bencana di Sumatera melalui GDG Medan. Key points: - Gemini 3 mengalahkan semua model AI lain termasuk Gemini 2.5, Claude, dan OpenAI di berbagai benchmark - Benchmark 'Vending Bench' menunjukkan kemampuan reasoning Gemini 3 dalam simulasi bisnis selama setahun - Image generation Gemini 3 sudah bisa membuat infografis dengan teks yang akurat - CodeWiki adalah tool dari Google yang bisa generate Wiki/dokumentasi lengkap dari repository kode - Persaingan AI semakin ketat antara Google, Anthropic, dan OpenAI yang terus merilis model baru - Kolaborasi dengan DomaiNesia menawarkan promo hosting dengan kode 'ngobrolinweb' - GDG Medan menggalang dana untuk korban bencana di Sumatera melalui donasi.gdgmedan.com Full transcript available on the episode page. ## EP 151: WebAI - Ngobrolin WEB - Published: 2025-11-26 - URL: https://ngobrol.in/episodes/puCZUlxrSpg-webai-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=puCZUlxrSpg Episode ini membahas Web AI - teknologi AI yang berjalan langsung di browser. Diskusi dipicu oleh Web AI Summit 2025 yang diselenggarakan Google. Eka, Ivan, dan Bahayu membahas perbedaan antara Web AI (on-device) dengan Cloud AI, serta keuntungan dan tantangannya. Episode juga menyinggung pengalaman IDSW (Indonesia Developer Summit), cerita horor tentang "John Titor" prank, dan pembahasan teknis tentang TensorFlow.js, MediaPipe, dan cara kerja model AI di browser. Key points: - Web AI adalah teknologi AI yang berjalan langsung di browser tanpa perlu memanggil API eksternal - Model AI yang besar perlu di-download terlebih dahulu sebelum bisa digunakan di browser - Google Web AI API menghubungkan ke layanan eksternal secara transparan, namun ada juga opsi model yang benar-benar berjalan lokal - Web AI Summit 2025 awalnya diselenggarakan secara internal oleh Google untuk mencari use case yang tepat - MediaPipe adalah open-source library Google untuk machine learning yang dapat berjalan di browser dengan model yang didownload dari server - Transformers.js memungkinkan model Python berjalan di browser melalui WebAssembly dan ONNX runtime - Perbedaan utama: Cloud AI (API wrapper ke layanan eksternal) vs Web AI (model berjalan di device/browser) Full transcript available on the episode page. ## EP 150: Serba Serbi Pengujian: Vitest, Jest, dkk - Ngobrolin WEB - Published: 2025-11-19 - URL: https://ngobrol.in/episodes/yfgMjKu89u0-serba-serbi-pengujian-vitest-jest-dkk-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=yfgMjKu89u0 Episode ini membahas serba-serbi testing di ekosistem JavaScript, mulai dari alasan kenapa testing penting sampai perbedaan jenis-jenisnya. Pembahasan menyinggung konsep testing trophy/pyramid, kapan unit test cocok dipakai, serta kapan lebih masuk akal menggunakan integration atau end-to-end testing untuk memastikan alur bisnis tetap aman. Ngobrolin juga mengulas tool dan praktik populer seperti Vitest vs Jest, snapshot testing beserta pro-kontra dan konflik yang sering muncul, serta strategi coverage dan CI/CD agar kualitas tetap terjaga. Di sisi lain, ada diskusi tentang trade-off: biaya maintenance, over-testing, dan kapan "cukup" itu cukup. Beberapa contoh praktik seperti Playwright, mocking, dan visual/regression testing ikut dibahas untuk konteks real di proyek. Key points: - Testing dibahas dari sisi tujuan: mengurangi risiko bug dan menjaga alur bisnis tetap aman - Konsep testing trophy/pyramid dijadikan kerangka memilih jenis test - Perbedaan unit, integration, dan end-to-end testing serta kapan masing-masing dipakai - Perbandingan tool seperti Vitest dan Jest termasuk isu performa dan migrasi - Snapshot testing dibahas lengkap dengan manfaat, potensi konflik, dan kapan sebaiknya dihindari - Coverage dan CI/CD dibahas sebagai cara memantau kualitas, tapi tidak jadi satu-satunya patokan - Playwright, mocking, dan visual/regression testing disebut sebagai praktik yang relevan di proyek modern Full transcript available on the episode page. ## EP 149: Kisah-kisah Menyeramkan dgn @zainfathoni - Ngobrolin WEB - Published: 2025-11-05 - URL: https://ngobrol.in/episodes/aY57UgFCC48-kisah-kisah-menyeramkan-dgn-zainfathoni-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=aY57UgFCC48 Episode spesial "Kisah-kisah Diiramakan" ini menghadirkan Mas Zain yang berbagi cerita horor pengalamannya sebagai engineer. Dua insiden utama dibahas: pertama tentang MIME type error yang menyebabkan JavaScript tidak dieksekusi sama sekali, dan kedua tentang masalah intermiten pada asset loading akibat konfigurasi double CDN. Diskusi juga mencakup pentingnya dokumentasi sebelum melakukan perubahan konfigurasi, serta pembelajaran dari insiden yang berlangsung hampir setahun sebelum akar masalah ditemukan. Key points: - Silent error adalah salah satu error yang paling sulit didiagnosa karena tidak menampilkan pesan error di console - MIME type salah (text/plain instead of application/javascript) membuat browser menolak untuk mengeksekusi JavaScript tanpa ada pesan error - Setelah upgrade CI/CD, konfigurasi default server mungkin berubah dan perlu diset secara eksplisit - Double CDN (Cloudflare di depan CloudFront) menyebabkan cache invalidation issues dan race conditions - Splitting bundle terlalu banyak meningkatkan frekuensi kejadian error intermiten - Screenshot atau dokumentasi sebelum melakukan perubahan konfigurasi sangat krusial untuk recovery - Cache adalah pedang bermata dua - mempercepat performa tapi juga menjadi sumber masalah kompleks Full transcript available on the episode page. ## EP 148: Ngobrolin CSS Unit - Ngobrolin WEB - Published: 2025-10-22 - URL: https://ngobrol.in/episodes/x1jm57leZW0-ngobrolin-css-unit-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=x1jm57leZW0 Episode ini dibuka dengan obrolan soal insiden layanan cloud (AWS) yang sempat tumbang dan dampaknya ke produktivitas. Mereka bahas ketergantungan pada tools berbasis cloud, kapan on‑prem atau server lokal dibutuhkan, serta contoh narasi "cloud exit" ala DHH. Disinggung juga sponsor Domainesia, termasuk opsi hosting/VPS dan promo code yang mereka bagikan. Bagian utama kemudian masuk ke topik CSS—khususnya satuan (units) dan implikasinya terhadap layout responsif dan aksesibilitas. Pembahasan mencakup rem/em vs px, viewport units (termasuk varian small/large/dynamic), container queries, custom properties, hingga pentingnya meta viewport agar tampilan mobile tidak "terkecil" seperti layout desktop. Key points: - Insiden AWS jadi pemicu diskusi soal risiko ketergantungan pada layanan cloud dan pentingnya fallback/offline mindset - Perbandingan serverless, VPS, dan on‑prem; konteks "cloud exit" serta kapan kontrol infrastruktur jadi krusial - Sponsor Domainesia: hosting/VPS dengan promo code khusus untuk pemirsa Ngobrolin WEB - Perbedaan rem/em/px dan dampaknya pada aksesibilitas (zoom dan ukuran teks) - Viewport units modern (svh/lvh/dvh) untuk mengatasi masalah toolbar mobile dan 100vh - Peran meta viewport dan custom properties dalam memastikan layout responsif bekerja konsisten Full transcript available on the episode page. ## EP 147: Desain Aplikasi CLI - Ngobrolin WEB - Published: 2025-10-08 - URL: https://ngobrol.in/episodes/uPiv9JbEOPA-desain-aplikasi-cli-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=uPiv9JbEOPA Episode ini membahas desain aplikasi CLI dan pengalaman pengguna di terminal, termasuk perbedaan CLI, TUI, dan aplikasi terminal pada umumnya. Diskusi mencakup alasan kenapa banyak developer tetap memilih terminal, serta bagaimana pengalaman di CLI bisa dibuat lebih jelas, cepat, dan menyenangkan.Pembahasan juga menyentuh prinsip desain dan panduan praktik terbaik, seperti pentingnya help, konsistensi flags, pesan error yang informatif, output yang bisa dipipe, dan mode quiet untuk kebutuhan otomatisasi. Selain itu, dibahas ekosistem tool dan library untuk membangun CLI, contoh penggunaan real (misalnya Cloudflare CLI), serta referensi guideline seperti clig.dev dan prinsip desain dari Atlassian. Key points: - Perbedaan CLI, TUI, dan aplikasi terminal dibahas dari sisi UX dan konteks penggunaan - Desain CLI perlu fokus pada kejelasan: help yang mudah, flags konsisten, dan error yang informatif - Output harus ramah otomatisasi: mendukung piping, format terstruktur (mis. table/json), dan mode quiet - Contoh tooling dibahas seperti Yargs, Inquirer/Enquirer, dan framework seperti oclif - Kasus nyata seperti Cloudflare CLI dipakai untuk melihat struktur perintah, konfigurasi, dan output - Guideline seperti clig.dev dan prinsip desain Atlassian dirujuk sebagai acuan - Tren dan tools TUI/terminal UI dibahas untuk memperkaya pengalaman di terminal Full transcript available on the episode page. ## EP 146: File Upload Strategy - Ngobrolin WEB - Published: 2025-10-01 - URL: https://ngobrol.in/episodes/_H9EkkzDGTs-file-upload-strategy-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=_H9EkkzDGTs Episode ini membahas berbagai strategi upload file dalam pengembangan aplikasi web. Eka dan Ivan berdiskusi tentang trade-off dari setiap pendekatan mulai dari local storage, database blob, hingga cloud storage seperti S3, GCP, dan Azure. Diskusi dimulai dengan cerita horor pengalaman masa lalu ketika menyimpan file di server yang sama dengan aplikasi, masalah scalability, hingga solusi modern menggunakan cloud storage. Topik ini diajukan oleh Kaisa yang memberikan konteks diskusi yang lengkap. Key points: - Local storage (menyimpan file di folder server) adalah solusi paling sederhana namun memiliki masalah scalability ketika aplikasi perlu horizontal scaling - Menyimpan file sebagai BLOB di database umumnya tidak direkomendasikan kecuali untuk use case sangat spesifik seperti avatar kecil yang jarang berubah - Cloud storage (S3, GCP Storage, Azure Blob) adalah best practice untuk aplikasi modern karena mendukung horizontal scaling dan CDN - Biaya cloud storage biasanya dihitung berdasarkan bandwidth transfer (transfer in/out) bukan jumlah file atau storage size - MinIO adalah alternatif open source yang kompatibel dengan S3 untuk self-hosted atau development environment - Tools modern seperti Docker, Docker Compose, dan Local by Flywheel mempermudah development workflow - Pemilihan strategi harus berdasarkan analisis trade-off antara performa, keamanan, biaya, dan user experience Full transcript available on the episode page. ## EP 145: Toolkit Modern - Ngobrolin WEB - Published: 2025-09-24 - URL: https://ngobrol.in/episodes/7WbdKRP1QY4-toolkit-modern-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=7WbdKRP1QY4 Episode ini membahas tentang tools atau alat bantu modern dalam pengembangan web, khususnya build tools dan test runners. Para host mendiskusikan evolusi dari tools tradisional seperti Gulp, Grunt, dan Webpack ke tools modern seperti Vite, esbuild, dan Vitest yang menawarkan performa lebih cepat. Diskusi mencakup perbandingan antara berbagai build tools dan test runners, mulai dari sejarah Jasmine, Mocha, Jest hingga Vitest. Dibahas juga bagaimana tools modern memanfaatkan native ES modules dan teknologi baru untuk meningkatkan developer experience dengan build time yang jauh lebih cepat dibandingkan pendahulunya. Key points: - Evolusi build tools: dari Gulp/Grunt (task runner) ke Webpack hingga Vite dan esbuild yang lebih modern dan cepat - Vitest hadir sebagai alternatif modern untuk Jest dengan performa lebih baik karena tidak bloated - Sejarah test runner: Jasmine (browser only) → Jest (by React, based on Jasmine) → Vitest - Mocha adalah test runner yang perlu dipasangkan dengan Chai untuk assertion dan Istanbul untuk coverage - Webpack 5 masih baik-baik saja digunakan, tidak semua proyek perlu migrasi ke tools terbaru - Tools modern memanfaatkan native ES modules sehingga tidak perlu bundling saat development - Pentingnya memilih tools yang sesuai dengan kebutuhan proyek, bukan sekadar mengikuti tren Full transcript available on the episode page. ## EP 144: Ngobrolin JWT - Ngobrolin WEB - Published: 2025-09-17 - URL: https://ngobrol.in/episodes/3C-psD7dx9w-ngobrolin-jwt-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=3C-psD7dx9w Episode ini membahas secara mendalam tentang JWT (JSON Web Token), mulai dari cara pengucapan yang benar menurut spesifikasi resmi yaitu "jot", hingga struktur dan cara kerjanya. Para host menjelaskan komponen JWT yang terdiri dari header (hijau), payload (putih), dan signature (biru/ungu), serta bagaimana data di dalamnya hanya di-encode dengan Base64, bukan di-encrypt. Diskusi juga menyentuh pentingnya membaca RFC dan spesifikasi teknis, dengan contoh kasus menarik tentang perbedaan perilaku redirect 301 di berbagai browser yang ternyata dijelaskan di RFC. Selain itu, dibahas juga penggunaan JWT dalam autentikasi, perbedaan dengan session-based authentication, serta best practices dalam implementasinya. Key points: - JWT secara resmi diucapkan "jot" menurut spesifikasi di papernya, bukan "jay-double-u-tee" - JWT terdiri dari 3 bagian: header (algoritma), payload (data/claims), dan signature (untuk verifikasi) - Data di JWT hanya di-encode dengan Base64, bukan di-encrypt, sehingga bisa dibaca siapa saja - Membaca RFC dan spesifikasi teknis penting untuk memahami behavior yang tidak dijelaskan di tutorial biasa - Contoh kasus: redirect 301 di-cache permanent oleh browser sesuai RFC, yang bisa menyebabkan masalah jika tidak dipahami - JWT debugger di jwt.io dapat digunakan untuk melihat dan memverifikasi isi token - Pentingnya memahami kapan menggunakan JWT vs session-based authentication sesuai kebutuhan aplikasi Full transcript available on the episode page. ## EP 143: Ngobrolin Dokumentasi - Ngobrolin WEB - Published: 2025-09-12 - URL: https://ngobrol.in/episodes/2Y7gmbdrnqc-ngobrolin-dokumentasi-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=2Y7gmbdrnqc Episode ini membahas pentingnya dokumentasi dalam pengembangan software. Para host berdiskusi tentang berbagai jenis dokumentasi, mulai dari dokumentasi teknis untuk developer hingga dokumentasi untuk onboarding dan hand-over project. Mereka juga membahas tantangan yang dihadapi developer dalam menulis dokumentasi dan bagaimana AI dapat membantu proses ini. Diskusi mencakup best practices untuk membuat dokumentasi yang baik, termasuk pentingnya memasukkan dokumentasi sebagai bagian dari definition of done dalam sprint. Contoh-contoh dokumentasi bagus seperti Astro dan GitLab juga dibahas, serta peran technical writer sebagai profesi khusus dalam membuat dokumentasi berkualitas. Key points: - Dokumentasi sering diabaikan oleh developer karena dianggap tugas yang membosankan, padahal sangat penting untuk hand-over dan onboarding - AI dapat membantu menulis dokumentasi, tetapi tetap perlu dicek karena bisa menghasilkan informasi yang tidak akurat (halusinasi) - Perusahaan remote/distributed seperti GitLab cenderung memiliki dokumentasi yang lebih baik karena budaya menulis yang kuat - Dokumentasi sebaiknya dimasukkan ke dalam task list dan definition of done, bukan dikerjakan di akhir project - Engineering documentation minimal harus mencakup: setup lokal, tech stack, credential management, dan kontak untuk akses - Compliance seperti SOC 2 mewajibkan dokumentasi yang lengkap, terutama untuk enterprise client - Technical writer adalah profesi khusus yang fokus pada pembuatan dokumentasi berkualitas tinggi Full transcript available on the episode page. ## EP 142: Fundamental JavaScript - Ngobrolin WEB - Published: 2025-08-27 - URL: https://ngobrol.in/episodes/Lg3hspyi4eg-fundamental-javascript-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=Lg3hspyi4eg Episode ini membahas konsep fundamental JavaScript yaitu Closure. Para host menjelaskan secara mendalam apa itu closure, bagaimana cara kerjanya, dan mengapa konsep ini penting untuk dipahami oleh developer JavaScript. Diskusi dimulai dengan penjelasan bahwa JavaScript adalah bahasa dengan first-class function yang memungkinkan function dipassing sebagai parameter. Pembahasan mencakup konsep lexical scope, outer scope vs inner scope, dan bagaimana closure memungkinkan sebuah function mengakses variabel dari scope luarnya. Contoh kode praktis juga ditunjukkan untuk membantu pemahaman, termasuk perbandingan dengan bahasa lain seperti PHP versi lama dan C yang tidak mendukung first-class function. Key points: - Closure adalah teknik untuk implementasi lexical scope name binding dalam bahasa dengan first-class function - JavaScript adalah bahasa first-class function di mana function bisa dijadikan parameter (higher order function) - Closure memungkinkan function mengakses outer scope-nya, yaitu variabel di luar function tersebut - Berbeda dengan PHP lama (sebelum versi 7) atau C yang tidak mendukung callback di dalam function - Closure sering ditanyakan dalam interview JavaScript sebagai pertanyaan fundamental - Konsep enclosed mereferensi surrounding state, memungkinkan akses ke variabel di dalam scope tertentu - Pemahaman closure penting untuk memahami konsep lanjutan seperti memoization dan React hooks Full transcript available on the episode page. ## EP 141: IO Connect Shanghai - Ngobrolin WEB - Published: 2025-08-20 - URL: https://ngobrol.in/episodes/p4Gk1NTKYoo-io-connect-shanghai-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=p4Gk1NTKYoo Episode ini membahas pengalaman para host menghadiri Google I/O Connect di Shanghai, China. Mereka menjelaskan perbedaan antara Google I/O (acara utama di Mountain View), I/O Connect (versi regional untuk berbagai wilayah seperti Asia Pacific), dan I/O Extended (acara lokal yang diorganisir GDG di masing-masing kota). Diskusi mencakup berbagai aktivitas di acara tersebut seperti keynote speech, demo booth interaktif termasuk Phone and App (ngobrol dengan Gemini untuk generate app), dan lomba gambar yang dinilai oleh AI. Para host juga berbagi cerita lucu tentang salah pasang channel penerjemah saat menonton presentasi berbahasa Mandarin, serta membahas panel diskusi tentang web dan AI termasuk Gemini Nano. Key points: - Google I/O Connect adalah versi regional dari Google I/O yang memungkinkan developer bertemu Googler tanpa harus ke Amerika - I/O Connect Shanghai mencakup peserta dari seluruh Asia Pacific, China, Australia, dan New Zealand - Ada demo booth interaktif seperti Phone and App untuk generate aplikasi dengan Gemini melalui voice - Presentasi keynote menggunakan bahasa Inggris namun slide tetap dalam bahasa Mandarin - Panel diskusi web fokus pada AI termasuk Gemini Nano dan interoperability dengan custom model lain - Sayangnya tidak ada workshop khusus web tahun ini, berbeda dengan tahun sebelumnya - Kultur tech conference di Silicon Valley sangat aktif dengan meetup hampir setiap hari dalam seminggu Full transcript available on the episode page. ## EP 140: Stackoverflow Survey 2025 - Ngobrolin WEB - Published: 2025-08-12 - URL: https://ngobrol.in/episodes/cYH8NfEPPu0-stackoverflow-survey-2025-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=cYH8NfEPPu0 Episode ini membahas hasil Stack Overflow Developer Survey 2025 yang baru diluncurkan. Para host mendiskusikan berbagai temuan menarik dari survey tersebut, termasuk demografi responden, tingkat pendidikan, dan tren penggunaan AI dalam pengembangan software. Survey ini melibatkan hampir 50.000 responden dari seluruh dunia. Diskusi juga menyentuh dampak AI terhadap Stack Overflow sebagai platform dan bagaimana mereka beradaptasi dengan menyediakan produk enterprise seperti knowledge base internal dan AI agent. Para host juga membahas berbagai survey developer lainnya seperti State of JavaScript, State of CSS, dan survey dari JetBrains, serta keinginan untuk membuat survey lokal Indonesia di masa depan. Key points: - Stack Overflow Developer Survey 2025 mendapat hampir 50.000 responden dari seluruh dunia - Stack Overflow menambahkan segmen AI dalam survey tahun ini mengikuti tren industri - Traffic Stack Overflow menurun signifikan karena developer sekarang lebih sering bertanya ke AI - Stack Overflow beradaptasi dengan menyediakan produk enterprise: knowledge base dan AI agent untuk tim - Sebagian besar responden memiliki pendidikan S1 (Bachelor's degree), namun ada juga professional developer dengan pendidikan dasar - Banyak survey developer tahunan lainnya: State of JavaScript, State of CSS, State of HTML, dan survey per bahasa pemrograman - Ada rencana untuk membuat survey developer lokal Indonesia, namun belum terwujud karena keterbatasan waktu Full transcript available on the episode page. ## EP 139: Konsep Dependency Injection - Ngobrolin WEB - Published: 2025-07-30 - URL: https://ngobrol.in/episodes/Viq69Sv_MrI-konsep-dependency-injection-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=Viq69Sv_MrI Episode ini membahas konsep Dependency Injection (DI), sebuah design pattern fundamental dalam software development. Para host menjelaskan apa itu Dependency Injection dengan contoh praktis menggunakan JavaScript, membandingkan kode tanpa DI dan dengan DI untuk menunjukkan perbedaan dan manfaatnya. Diskusi mencakup konsep terkait seperti Inversion of Control dan prinsip SOLID (khususnya Dependency Inversion). Contoh yang digunakan adalah analogi mobil dan mesin (engine), di mana dengan DI, kelas Car tidak perlu membuat instance Engine sendiri di constructor, melainkan menerima engine sebagai parameter yang di-inject dari luar. Episode ini juga disponsori oleh DomaiNesia dengan promo code untuk cloud VPS. Key points: - Dependency Injection adalah teknik di mana dependencies di-inject dari luar, bukan dibuat di dalam class/function - Tanpa DI: constructor membuat instance dependency sendiri (new Engine()), dengan DI: engine diterima sebagai parameter - DI merupakan implementasi dari prinsip Inversion of Control dan Dependency Inversion (bagian dari SOLID) - Manfaat DI: kode lebih fleksibel, mudah di-test (bisa inject mock), dan loosely coupled - Artikel referensi dari Smashing Magazine (2020) menjelaskan DI dalam perspektif web development - Konsep DI relevan untuk interview dan penting dipahami untuk arsitektur aplikasi yang baik - Kolaborasi dengan DomaiNesia: promo code NGOBROLINVPSDN untuk diskon 50% cloud VPS Full transcript available on the episode page. ## EP 138: Bedah Buku Problem Solving 101 - Ngobrolin WEB - Published: 2025-07-23 - URL: https://ngobrol.in/episodes/ZwXgk5yeUD0-bedah-buku-problem-solving-101-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=ZwXgk5yeUD0 Episode ini membahas buku "Problem Solving 101" karya Ken Watanabe, mantan konsultan McKinsey yang menulis buku ini sebagai bagian dari reformasi pendidikan Jepang untuk menggeser fokus dari hafalan menuju problem-solving. Meskipun ditujukan untuk anak-anak, buku ini menjadi international best seller di kalangan orang dewasa. Buku menyajikan framework problem-solving yang praktis dengan tiga studi kasus: band sekolah yang ingin meningkatkan penonton, John Octopus yang ingin membeli komputer, dan Kiwi yang memilih sekolah sepak bola. Diskusi juga mencakup kaitan problem-solving dengan computational thinking serta pengalaman nyata para host dalam mengaplikasikan konsep ini dalam pekerjaan sehari-hari sebagai developer. Key points: - Problem solving adalah skill yang bisa dipelajari, bukan bakat bawaan - bisa dilatih dengan praktik dan kebiasaan - Buku menyajikan empat langkah problem-solving: pahami situasi, identifikasi root cause, kembangkan solusi, dan eksekusi + review - Tools penting yang dibahas: Logic Tree untuk mem-breakdown masalah, Hypothesis Testing untuk menguji dugaan, dan Pro/Cons Matrix untuk mengambil keputusan - Pentingnya mencari root cause (akar masalah) bukan hanya mengobati gejala, analogi dengan cara dokter mendiagnosa pasien - Metode Five Whys dari Toyota untuk menemukan akar masalah dengan terus bertanya "kenapa" hingga jawaban sebenarnya ditemukan - Kaitan problem-solving dengan computational thinking: dekomposisi, pattern recognition, abstraksi, dan algoritma - Para host berbagi pengalaman nyata mengaplikasikan problem-solving dalam kerja sehari-hari, termasuk menangani issue dari klien Full transcript available on the episode page. ## EP 137: Bedah Situs meutia.net - Ngobrolin WEB - Published: 2025-07-16 - URL: https://ngobrol.in/episodes/hSUqstbgNgI-bedah-situs-meutianet-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=hSUqstbgNgI Episode ini membahas bedah situs blog personal milik Mbak Mutia, seorang dosen di IAIN Langsa, yang dikembangkan oleh Mas Yudi Ananda. NaraBlog menonjol dengan desain minimalis yang konsisten, penggunaan bahasa Indonesia yang baku, dan konsep Digital Garden. Website dibangun menggunakan teknologi modern seperti Remix, Sanity CMS, Tailwind CSS, dan Cloudflare Workers. Diskusi mencakup berbagai aspek teknis termasuk implementasi Speculation Rules API untuk performa navigasi, penggunaan Web Share API, carbon-conscious analytics dengan Cabin, serta berbagai catatan accessibility yang perlu ditingkatkan. Key points: - NaraBlog adalah blog personal akademisi dengan desain minimalis, tipografi yang rapi, dan konsistensi penggunaan bahasa Indonesia baku di seluruh situs - Website mengimplementasikan konsep Digital Garden - pendekatan di mana konten bisa dipublikasikan dan diperbarui secara berkala tanpa harus sempurna - Tech stack yang digunakan: Remix sebagai full-stack framework, Sanity sebagai headless CMS, Tailwind CSS untuk styling, dan Cloudflare Workers untuk deployment - Implementasi Speculation Rules API untuk prefetch halaman secara konservatif - hanya mengambil dokumen yang akan dikunjungi untuk menghemat bandwidth - Situs menggunakan Web Share API native browser untuk fitur share, dark/light mode dengan view transitions, dan carbon-conscious analytics melalui Partytown dan Cabin - Catatan accessibility: beberapa tombol dan link belum memiliki aria-label yang memadai untuk screen reader, serta browser caching yang belum dikonfigurasi dengan optimal - Struktur monorepo yang rapi dengan Sanity Studio untuk CMS, web app, dan CDN image proxy menggunakan Hono dengan dokumentasi OpenAPI via Scalar Full transcript available on the episode page. ## EP 136: Ngobrolin EcmaScript 2025 - Ngobrolin WEB - Published: 2025-07-08 - URL: https://ngobrol.in/episodes/GGfh-olIzl0-ngobrolin-ecmascript-2025-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=GGfh-olIzl0 Episode ini membahas ECMAScript 2025, standar terbaru untuk JavaScript. Diskusi dimulai dengan perbandingan responsivitas tombol darurat di Jepang vs Indonesia, dan pembahasan tentang prioritas P0 dalam tiket software development. Topik utama menjelaskan sejarah mengapa kita menggunakan istilah ECMAScript instead of JavaScript - masalah trademark karena JavaScript adalah merek dagang Oracle. JavaScript berasal dari Netscape yang kemudian diakuisisi oleh Sun Microsystems lalu Oracle. Standar ECMAScript dikembangkan oleh ECMA (badan standarisasi) dan diimplementasikan oleh browser/engine masing-masing. Fitur-fitur baru di ECMAScript 2025 meliputi: import JSON secara native tanpa loader tambahan, iterator helper methods (map, filter, take, drop, toArray) yang sebelumnya hanya ada di Array, new Set methods, perbaikan RegExp seperti regex.escape dan regex modifiers, Promise.try untuk menangani promise secara lebih aman, dan 16-bit floating point untuk machine learning. Juga dibahas Dr. Axel Rauschmayer, penulis buku gratis tentang JavaScript yang sangat produktif dalam blogging dan training. Key points: - ECMAScript adalah standar spesifikasi JavaScript, dinamakan demikian karena 'JavaScript' adalah trademark milik Oracle - JavaScript berasal dari Netscape, diakuisisi Sun Microsystems, lalu Oracle memiliki trademark-nya - Import JSON modules secara native sekarang memungkinkan import file JSON langsung tanpa loader atau transpiler tambahan - Iterator helper methods (map, filter, take, drop, toArray) sekarang tersedia untuk semua iterator, tidak hanya Array - RegExp mendapatkan peningkatan seperti regex.escape untuk escaping teks dan regex modifiers yang bisa diletakkan di depan pattern - Promise.try menyediakan cara yang lebih aman untuk consume promise tanpa khawatir error jika value bukan promise - 16-bit floating point ditambahkan untuk keperluan machine learning dan operasi vector di client-side - New Set methods menyediakan fungsi tambahan untuk manipulasi data yang unik - Dr. Axel Rauschmayer adalah expert JavaScript yang produktif menulis buku gratis dan artikel tentang ECMAScript - Minggu depan akan ada bedah situs (site review) untuk website milik Eka Full transcript available on the episode page. ## EP 135: Ngobrolin Storybook - Ngobrolin WEB - Published: 2025-07-02 - URL: https://ngobrol.in/episodes/RQ6KMuo9PPg-ngobrolin-storybook-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=RQ6KMuo9PPg Episode ini membahas Storybook, tool untuk membangun, menguji, dan mendokumentasikan komponen UI secara terisolasi. Host membahas evolusi Storybook dari yang sebelumnya dianggap berat dan lambat (menggunakan webpack) menjadi jauh lebih baik setelah beralih ke Vite 1-2 tahun terakhir. Diskusi mencakup bagaimana Storybook membantu dalam pengembangan Design System, implementasi Atomic Design methodology (Atoms, Molecules, Organisms, Templates, Pages), dan kolaborasi antara frontend developer dengan designer. Storybook memungkinkan frontend developer bekerja mandiri dengan fake data sambil menunggu backend selesai, serta mendokumentasikan berbagai state dan varian komponen yang mungkin tidak terpikirkan saat desain. Key points: - Storybook adalah tool untuk build, test, dan dokumentasi UI components dalam isolasi (seperti workshop untuk komponen) - Storybook sudah jauh lebih ringan setelah beralih dari webpack ke Vite sekitar 1-2 tahun lalu - Chromatic menyediakan layanan visual testing berbayar untuk membandingkan screenshot antar perubahan kode - Atomic Design methodology memecah desain menjadi Atoms, Molecules, Organisms, Templates, dan Pages - Frontend developer bisa bekerja paralel dengan backend menggunakan fake data dari library seperti Faker - Storybook membantu mendokumentasikan edge cases seperti state hover, disabled, text panjang, dan dukungan RTL (right-to-left) - Kolaborasi dengan DomaiNesia untuk cloud hosting dengan promo code 'ngobrolin' Full transcript available on the episode page. ## EP 134: Web Interop & Baseline - Ngobrolin WEB - Published: 2025-06-25 - URL: https://ngobrol.in/episodes/f1g2zrOmzN0-web-interop-baseline-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=f1g2zrOmzN0 Episode ini membahas Web Interop 2025, sebuah inisiatif tahunan dari konsorsium browser vendor (Google, Mozilla, Apple, Microsoft) untuk menstandarisasi fitur-fitur web platform agar bekerja konsisten di semua browser. Diskusi dimulai dengan pembahasan tentang relevansi belajar coding di era AI dan perbandingan antara WFH vs commuting. Topik utama menjelaskan sejarah "masa kelam" pengembangan web di mana setiap browser memiliki standar sendiri, memaksa developer menggunakan hack seperti prefix (-webkit-, -moz-) dan polyfill. Interop hadir sebagai solusi dengan memilih fitur-fitur prioritas yang akan diimplementasikan secara konsisten. Episode mengulas dashboard Interop 2025 yang menunjukkan progress setiap browser, membahas area fokus seperti CSS Anchor Positioning, Popover API, View Transitions, WebAssembly, dan penghapusan API usang seperti Mutation Events. Juga dibahas Ladybird, browser baru yang dibangun dari scratch tanpa menggunakan engine yang sudah ada. Key points: - Web Interop adalah inisiatif tahunan konsorsium browser (Google, Mozilla, Apple, Microsoft) untuk menstandarisasi fitur web agar bekerja konsisten di semua browser - Di era sebelum Interop, developer harus menghadapi perbedaan implementasi antar browser dengan menggunakan prefix, polyfill, dan user agent detection - Fitur dipilih untuk Interop melalui proses proposal, voting, dan refinement oleh browser vendors dan komunitas developer - Dashboard Interop 2025 menunjukkan persentase implementasi setiap browser - Microsoft Edge secara mengejutkan paling up-to-date pada versi stable - Area fokus Interop 2025 meliputi CSS Anchor Positioning, Popover API, View Transitions (same document), Backdrop Filter, dan CSS Scope - Improvement pada elemen Detail/Summary membuatnya lebih useful dengan kemampuan custom styling yang sebelumnya sulit dilakukan - API baru seperti Scrollend event menggantikan hack menggunakan setTimeout atau Intersection Observer untuk infinite scroll - Beberapa API di-remove seperti Mutation Events karena sudah memiliki pengganti yang lebih baik (Mutation Observer) - Ladybird adalah browser baru yang dibangun dari scratch tanpa menggunakan engine Blink, WebKit, atau Gecko yang sudah ada - Minggu depan akan membahas tentang Storybook Full transcript available on the episode page. ## EP 133: Ngobrolin Database - Ngobrolin WEB - Published: 2025-06-18 - URL: https://ngobrol.in/episodes/zX0gDaovb1w-ngobrolin-database-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=zX0gDaovb1w Episode ini membahas Database Scaling, khususnya perbedaan antara horizontal scaling dan vertical scaling. Topik ini diajukan oleh Mas Triad Moko melalui GitHub discussion sejak April tahun lalu. Narasumber tamu adalah Mas Doni yang sudah ketiga kalinya hadir di Ngobrolin WEB. Diskusi dimulai dengan cerita lucu tentang tagihan StreamYard yang membengkak hingga 13 juta per tahun setelah stream platform otomatis upgrade ke Pro ketika streaming ke 3 platform sekaligus. Kemudian masuk ke topik utama: database scaling. Host membahas bahwa tidak peduli seberapa cepat framework yang digunakan (Rust, Zig, Laravel), jika database query-nya lambat, aplikasi tetap akan lambat. Episode juga menyentuh perdebatan ORM vs Raw SQL, pentingnya memahami struktur data, tools untuk monitoring slow query, dan peran DBA di era modern. Key points: - Horizontal scaling = menambah jumlah server, Vertical scaling = menambah spesifikasi server (CPU, RAM) - Database sering menjadi bottleneck terlepas dari kecepatan backend framework - Perdebatan ORM vs Raw SQL: ORM support raw query, pilihan tergantung konteks dan kebutuhan - SQL memerlukan cara berpikir berbeda (set theory, joins, grouping) yang sulit bagi frontend developer - Role DBA (Database Administrator) semakin langka, tugasnya sering dibebankan ke DevOps/SRE - Tools untuk monitoring slow query: MySQL slow query log, pgAdmin untuk PostgreSQL, Prometheus + Grafana - EXPLAIN ANALYZE untuk melihat execution plan dan mengidentifikasi query yang lambat - APM (Application Performance Monitoring) seperti New Relic mahal, alternatif open source: Prometheus + Grafana Full transcript available on the episode page. ## EP 132: Bedah Situs - Ngobrolin WEB - Published: 2025-06-11 - URL: https://ngobrol.in/episodes/0sMCTZ77Fjk-bedah-situs-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=0sMCTZ77Fjk Episode ini merupakan sesi bedah situs yang pertama kali mendapatkan partisipasi dari penonton. Website yang dibedah adalah undangan pernikahan digital yang dibuat oleh Mas Grafis menggunakan Next.js 13 dengan Contentful sebagai headless CMS. Diskusi dimulai dengan pembahasan tentang pentingnya signed commit (GPG signing) untuk keamanan dan mencegah impersonasi di GitHub. Selanjutnya dilakukan analisis performa dan accessibility terhadap website tersebut. Beberapa masalah yang diidentifikasi meliputi auto-playing audio tanpa konsentrasi user, kontras warna yang kurang, navigasi carousel yang tidak ramah accessibility, serta bundle size yang cukup besar sekitar 4.1 MB terutama karena gambar. Episode juga membahas berbagai tools untuk mengecek accessibility seperti color contrast checker extension dan Chrome DevTools. Key points: - Signed commit (GPG signing) penting untuk keamanan dan mencegah impersonasi - commit yang verified memiliki centang hijau di GitHub - Website undangan pernikahan menggunakan Next.js 13 dengan Contentful sebagai headless CMS untuk konten yang dinamis - Analisis performa menunjukkan bundle size sekitar 4,1 MB dengan gambar sebagai kontributor terbesar penggunaan bandwidth - Masalah accessibility utama: auto-playing audio tanpa user consent dapat mengganggu dan tidak ramah untuk pengguna - Kontras warna yang kurang pada beberapa elemen seperti tombol navigasi menyulitkan pengguna untuk melihat interface - Navigasi carousel tidak mendukung keyboard navigation dan tidak memiliki focus management yang baik - Tools yang direkomendasikan: Color Contrast Checker extension untuk Chrome dan fitur bawaan Chrome DevTools untuk analisis accessibility - Tips penting: jangan commit file .env ke repository publik untuk keamanan credentials - Web development memiliki entry barrier yang lebih rendah dibanding app development dalam hal kebutuhan hardware Full transcript available on the episode page. ## EP 131: Ngobrolin Astro - Ngobrolin WEB - Published: 2025-06-04 - URL: https://ngobrol.in/episodes/0o-PcX6pR2E-ngobrolin-astro-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=0o-PcX6pR2E Episode ini membahas secara mendalam tentang fitur server-side Astro yang menjadikannya framework yang sangat versatile. Diskusi dimulai dengan pembahasan mengapa Astro menjadi favorit banyak developer akhir-akhir ini - kemampuannya mengakomodasi berbagai jenis developer dengan UI library yang berbeda-beda dalam satu proyek. Topik utama meliputi sistem file-based routing, API routes yang bisa mengembalikan JSON, middleware, helper untuk cookies, data fetching dengan web standard, dan konsep Island Architecture di sisi server (Server Islands) yang memungkinkan on-demand rendering untuk konten yang dinamis. Fitur menarik yang dibahas adalah Astro Actions - RPC-like function dengan type safety dan validasi input otomatis yang memudahkan komunikasi antara client dan server tanpa boilerplate code. Episode juga membahas ekosistem adapter Astro untuk berbagai platform deployment seperti Node.js, Cloudflare Workers, Vercel, dan Netlify. Key points: - Astro sangat versatile karena bisa mengakomodasi berbagai UI library (React, Svelte, Vue, dll) dalam satu proyek tanpa perubahan signifikan - Menggunakan file-based routing di src/pages dengan dukungan dynamic routes dan API routes untuk endpoint JSON - Server Islands memungkinkan on-demand rendering komponen tertentu tanpa mem牺牲 performance keseluruhan halaman - Astro Actions menyediakan type safety dan validasi input otomatis untuk fungsi server yang bisa dipanggil dari client atau server-side - Helper bawaan untuk cookies memudahkan operasi get, set, dan delete dengan TypeScript auto-completion - Ekosistem adapter yang luas memungkinkan deployment ke berbagai platform seperti Node.js, Cloudflare Workers, Vercel, dan Netlify - AstroDB menyediakan ORM sederhana dengan koneksi ke libSQL, SQLite, atau database lain Full transcript available on the episode page. ## EP 130: Ngobrolin Google I/O - Ngobrolin WEB - Published: 2025-05-28 - URL: https://ngobrol.in/episodes/ZRQrg3dABLQ-ngobrolin-google-io-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=ZRQrg3dABLQ Episode Ngobrolin WEB ini membahas secara lengkap tentang Google I/O 2025, dengan fokus utama pada berbagai pengumuman terkait teknologi AI dan pengembangan web. Host membahas model AI terbaru Gemini 2.5 Pro yang secara mengejutkan menjadi pemimpin di berbagai leaderboard LLM, termasuk LLM Arena dan Web Dev Arena. Mereka juga mengulas Veo 3, model video generator dari Google yang mampu menghasilkan video dengan audio secara bersamaan, serta aplikasi Flow yang ditujukan untuk filmmaker profesional. Selain itu, dibahas pula update SDK Gemini yang kini kompatibel dengan OpenAI dan mendukung MCP (Model Context Protocol), serta fitur thinking budget untuk mencegah over-analyzing. Di sektor web development, episode ini menyentuh perkembangan Baseline dan Interop sebagai inisiatif lintas browser yang terus berkembang. Episode juga mencakup diskusi tentang tren remote work dan realitas kerja sebagai digital nomad, dengan berbagai pengalaman pribadi dari para host tentang bekerja di lokasi yang tidak proper untuk kerja. Di akhir episode, diumumkan bahwa topik Astro akan dibahas minggu berikutnya. Key points: - Gemini 2.5 Pro tampil sebagai pemimpin di LLM Arena dan Web Dev Arena, mengalahkan Claude Sonnet dan GPT-4.1, dengan kemampuan reasoning yang ditampilkan secara step-by-step saat digunakan sebagai coding assistant - Veo 3, model video generator terbaru dari Google, dapat menghasilkan video lengkap dengan audio dalam satu proses, berbeda dengan Veo 2 yang hanya menghasilkan video tanpa audio - Flow adalah aplikasi baru dari Google yang ditujukan untuk filmmaker dan kreator profesional, menggunakan model Veo 3 dengan fitur edit per scene dan kemampuan refinement yang detail - Update Gemini SDK kini kompatibel dengan API OpenAI dan mendukung MCP (Model Context Protocol), menunjukkan strategi Google yang lebih mengikuti standar pasar ketimbang membuat standar sendiri - Thinking budget menjadi fitur baru di Gemini SDK yang memungkinkan developer membatasi penggunaan token untuk reasoning, mencegah over-analyzing dan biaya yang berlebihan - Diskusi realistis tentang remote work dan digital nomad lifestyle, dengan kesimpulan bahwa bekerja di pantai atau lokasi wisata tidaklah produktif dan lebih cocok bekerja di tempat yang proper untuk kerja - Project Astra diperkenalkan sebagai AI tutor yang dapat membantu pembelajaran personalized, namun menimbulkan kekhawatiran tentang potensi penyalahgunaan oleh siswa yang hanya mencari jawaban tanpa belajar Full transcript available on the episode page. ## EP 129: Ngobrolin React Server Component - Published: 2025-05-21 - URL: https://ngobrol.in/episodes/KzqALj3KpDo-ngobrolin-react-server-component - YouTube: https://www.youtube.com/watch?v=KzqALj3KpDo Episode Ngobrolin WEB ini membahas React Server Components (RSC), topik yang sebenarnya sudah ada sejak 2020 namun baru banyak diadopsi secara luas dalam beberapa tahun terakhir. Diskusi dimulai dengan menjelaskan perbedaan antara RSC dengan server-side rendering tradisional, di mana RSC memungkinkan developer menggunakan React di kedua sisi—server dan client—dalam satu codebase yang sama. Eka dan Ivan mengulas evolusi pengembangan web dari HTML statis, ke Single Page Application (SPA) yang semuanya client-side, lalu muncul meta framework yang mengadopsi server-side rendering untuk mengatasi masalah performa dan SEO. RSC menjadi solusi selanjutnya dengan memisahkan komponen yang berjalan di server (yang tidak perlu interaksi) dan di client (yang butuh interaktivitas), sehingga mengurangi bundle size yang dikirim ke browser. Episode ini juga menampilkan demo praktis implementasi RSC menggunakan Parcel bundler, menunjukkan bagaimana komponen server bisa mengakses resource seperti file system dan database secara langsung tanpa perlu membuat API endpoint terpisah. Diskusi diakhiri dengan percakapan tentang tantangan adopsi RSC terkait perubahan mental model developer, serta obrolan santai tentang penggunaan AI coding tools seperti Cursor dan Windsurf. Key points: - React Server Components sudah ada sejak 2020, baru diadopsi luas belakangan ini oleh meta framework seperti Next.js - Perbedaan mendasar: Server-side rendering mengirim HTML lengkap ke browser, sementara RSC memisahkan komponen server dan client secara eksplisit - Komponen server tidak dikirim ke browser, hanya hasil render-nya berupa HTML, sehingga mengurangi bundle size secara drastis - Dengan RSC, tidak perlu membuat API endpoint terpisah untuk mengambil data—komponen server bisa langsung akses database atau file system - Direktif 'use client' menandai komponen yang harus berjalan di browser dan memerlukan interaktivitas - Parcel bundler menjadi alternatif implementasi RSC selain Next.js, menawarkan pendekatan yang berbeda - Adopsi RSC membutuhkan perubahan mental model karena developer harus sadar di mana kode berjalan (server atau client) - Diskusi tambahan tentang AI coding tools (Cursor, Windsurf) dan pentingnya tidak kehilangan kemampuan menulis kode manual Full transcript available on the episode page. ## EP 128: Update Performa Web - Ngobrolin WEB - Published: 2025-05-14 - URL: https://ngobrol.in/episodes/v28qyGyoMw4-web-performance-update-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=v28qyGyoMw4 Episode ini membahas update terbaru seputar web performance, dengan fokus utama pada rilisnya Web Vitals versi 5 yang menghapus FID (First Input Delay) dan menggantinya dengan INP (Interaction to Next Paint) sebagai metrik resmi. Diskusi mendalam mengenai perbedaan antara lab data (data pengujian dengan tools seperti Lighthouse, PageSpeed Insights) dan field data (data real dari pengguna menggunakan Web Vitals JS). Episode juga menyinggung tentang Chrome UX Report (CrUX) yang menyediakan data performance publik dari pengguna Chrome, serta pengenalan tools RAM Vision untuk monitoring capability browser dan fitur web secara lebih detail. Topik tambahan meliputi Speculation Rules API dan View Transitions API yang dapat membuat Multi-Page Application terasa seperti Single-Page Application, serta pentingnya accessibility dan standar web yang berlaku di berbagai negara. Key points: - Web Vitals versi 5 telah dirilis dengan perubahan utama menghapus FID dan menggantinya dengan INP secara permanen - Perbedaan mendasar antara lab data (data pengujian dengan Lighthouse/PageSpeed Insights di device sendiri) dan field data (data real dari pengguna dengan Web Vitals JS) - Chrome UX Report (CrUX) menyediakan data performance publik dari pengguna Chrome yang dapat diakses melalui CrUX Dashboard dan CrUX Visualize dengan Looker Studio - RAM Vision adalah tools monitoring berbayar (€157/bulan) yang dapat melacak capability browser dan fitur web per user, membantu decision making untuk mengadopsi fitur baru - Speculation Rules API dan View Transitions API dapat dikombinasikan untuk membuat Multi-Page Application terasa seperti Single-Page Application dengan instant loading dan smooth transitions - Lighthouse CI dapat digunakan untuk monitoring performance dalam pipeline CI/CD, namun alternatif lain seperti Calibre, DebugBear, dan New Relic juga tersedia - Accessibility dan performance web adalah standar yang diwajibkan oleh hukum di beberapa negara seperti US, UK, dan negara-negara Eropa untuk layanan publik Full transcript available on the episode page. ## EP 127: Ngobrolin TanStack - Ngobrolin WEB - Published: 2025-05-07 - URL: https://ngobrol.in/episodes/8ke0CsKPjAU-ngobrolin-tanstack-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=8ke0CsKPjAU Episode Ngobrolin WEB membahas TanStack, kumpulan library front-end yang dibuat oleh Tanner Linsley. Awalnya dikenal dengan React Table dan React Query, TanStack kini telah berevolusi menjadi ekosistem yang framework-agnostik, mendukung React, Solid, Vue, Svelte, dan Angular. Diskusi mencakup sejarah evolusi dari library React-centric menjadi framework-agnostik, filosofi desain modular yang memungkinkan penggunaan library secara terpisah (ketengan) sesuai kebutuhan, serta pendekatan unik Tanner dalam membangun bisnis open source yang independen tanpa venture capital atau akuisisi. Episode juga menyinggung tentang sustainability model bisnis open source dan perbandingan dengan ekosistem lain seperti Vue (Anthony Fu/Evan You) dan React (Next.js/Remix). Key points: - TanStack adalah ekosistem library front-end yang awalnya React-centric (React Table, React Query) namun kini telah menjadi framework-agnostik, mendukung React, Solid, Vue, Svelte, dan Angular - Tanner Linsley, pencipta TanStack, sebelumnya dikenal dengan React Static (SSG framework) dan library React seperti React Table dan React Query yang menjadi standar industri - TanStack Query (sebelumnya React Query) muncul sebagai alternatif yang lebih sederhana daripada Redux + Apollo untuk manajemen state server, dengan API yang lebih straightforward dan caching yang cerdas - TanStack Router menawarkan pendekatan file-based routing mirip Next.js dengan fitur lengkap termasuk DevTools, type-safety, dan berbagai template untuk memulai project - Filosofi desain TanStack adalah modular - library dapat digunakan secara terpisah (ketengan) sesuai kebutuhan, berbeda dengan pendekatan 'batteries-included' seperti framework lain - TanStack dijalankan sebagai perusahaan swasta independen tanpa venture capital, akuisisi, atau investor luar, dengan model bisnis melalui sponsorship, merchandise, dan kursus - Diskusi tentang sustainability open source mencakup pentingnya entitas legal untuk menerima donasi/sponsorship dari perusahaan besar, dengan referensi ke Perkodi sebagai contoh yayasan open source di Indonesia Full transcript available on the episode page. ## EP 126: Ngobrolin SEO - Ngobrolin WEB - Published: 2025-04-30 - URL: https://ngobrol.in/episodes/99CaLw7Q7os-ngobrolin-seo-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=99CaLw7Q7os Episode Ngobrolin WEB ini membahas topik SEO (Search Engine Optimization) secara mendalam, terutama relevansinya di era AI dan perubahan landscape mesin pencari modern. Diskusi dimulai dengan pertanyaan mendasar: apakah SEO masih relevan ketika orang beralih menggunakan AI untuk mencari informasi? Pembicara menjelaskan bahwa meskipun AI semakin populer, SEO tetap penting karena hasil pencarian Google sekarang menampilkan jawaban AI-generated di bagian atas, yang kemudian diikuti oleh link-link website. Episode ini mengeksplorasi sejarah singkat SEO dari era directory listing seperti Yahoo, hingga lahirnya Google yang menggunakan crawling dan indexing. Pembicara juga membahas perbedaan algoritma antar search engine dan fakta bahwa tidak ada yang benar-benar mengetahui secara pasti sinyal apa yang digunakan oleh mesin pencari, hanya ada guideline dan best practice. Diskusi kemudian berfokus pada perspektif web developer mengenai SEO, menekankan bahwa SEO yang baik pada dasarnya adalah tentang accessibility, semantic HTML, dan struktur konten yang proper. Episode ini juga menyentuh topik-topik teknis seperti hierarchical heading (H1-H6), canonical links untuk menghindari duplicate content, penggunaan alt text pada gambar, meta tags untuk social media sharing (Open Graph dan Twitter Cards), schema markup, dan pentingnya Core Web Vitals. Pembicara menekankan bahwa konten berkualitas tetap menjadi faktor utama, dan SEO hanyalah optimasi - bukan cara untuk memanipulasi sistem. Di bagian akhir, pembicara membahas berbagai tools SEO yang tersedia, mulai dari gratis seperti Google Search Console dan browser extension SEO Quake, hingga tools berbayar seperti SEMrush dan Ahrefs untuk kebutuhan yang lebih komprehensif seperti keyword research dan competitor analysis. Key points: - SEO tetap relevan di era AI karena mesin pencari modern seperti Google mengintegrasikan jawaban AI-generated di bagian atas hasil pencarian, diikuti oleh link-link website yang teroptimasi dengan baik - Sejarah SEO berkembang dari era directory listing manual (Yahoo) menuju sistem crawling dan indexing otomatis yang diperkenalkan Google, yang kemudian berkembang dengan berbagai aturan untuk mencegah penyalahgunaan seperti keyword stuffing - Setiap search engine memiliki algoritma yang berbeda dan tidak ada yang mengetahui secara pasti sinyal apa yang digunakan, sehingga web developer hanya bisa mengikuti guideline dan best practice yang tersedia - Dari perspektif web developer, SEO yang baik pada dasarnya bertumpu pada accessibility, semantic HTML, dan struktur konten yang proper - bukan trik-trik manipulatif - Hierarchical heading yang benar (satu H1 per halaman, diikuti H2, H3, dst.) sangat penting untuk membantu crawler memahami struktur dan fokus konten halaman - Canonical links diperlukan untuk menghindari masalah duplicate content, terutama ketika satu konten dapat diakses melalui multiple URL atau ketika melakukan cross-posting ke platform lain - Penggunaan alt text pada gambar, meta tags untuk social media (Open Graph dan Twitter Cards), schema markup, dan performa Core Web Vitals adalah elemen teknis penting dalam SEO modern - Konten berkualitas tetap menjadi faktor utama dalam SEO - website dengan konten bagus akan tetap mendapatkan traffic meskipun optimasi SEO-nya biasa saja, sementara konten jelek dengan SEO bagus akan menyebabkan high bounce rate - Tersedia berbagai tools SEO mulai dari gratis (Google Search Console, SEO Quake browser extension) hingga berbayar (SEMrush untuk keyword research dan content marketing, Ahrefs untuk competitor analysis dan backlink tracking) Full transcript available on the episode page. ## EP 125: Ngobrolin CORS & Browser Policy - Ngobrolin WEB - Published: 2025-04-16 - URL: https://ngobrol.in/episodes/RZ0hw1FcdnA-ngobrolin-cors-browser-policy-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=RZ0hw1FcdnA Episode Ngobrolin WEB ini membahas secara mendalam tentang kebijakan keamanan browser (browser security policy) dengan fokus utama pada CORS (Cross-Origin Resource Sharing), CSP (Content Security Policy), dan CORP (Cross-Origin Resource Policy). Pembahasan dimulai dengan pengalaman umum developer yang sering mengalami masalah CORS saat mengembangkan aplikasi web, terutama saat frontend dan backend terpisah. Host menjelaskan bahwa CORS adalah mekanisme keamanan browser yang mencegah website dari origin berbeda mengakses resource tanpa izin, yang dikenal sebagai Same-Origin Policy. Mereka membahas solusi praktis untuk mengatasi CORS, termasuk penggunaan Chrome extension untuk development (sebagai solusi sementara) dan konfigurasi yang benar di sisi server dengan middleware seperti cors di Express.js atau Laravel CORS. Diskusi kemudian meluas ke Content Security Policy (CSP), yang merupakan header HTTP untuk mencegah serangan XSS (Cross-Site Scripting) dengan mengontrol apa saja resource yang boleh dimuat di halaman web. Mereka menjelaskan berbagai directive CSP seperti script-src, style-src, img-src, dan penggunaan hash untuk validasi script. Terakhir, mereka membahas Cross-Origin Resource Policy (CORP) yang lebih spesifik untuk mencegah website lain meng-embed resource kita dalam konteks mereka, sebagai perlindungan terhadap serangan side-channel seperti Spectre dan Meltdown. Seluruh diskusi dikelilingi dengan contoh praktis, pengalaman pribadi, dan humor khas Ngobrolin WEB. Key points: - CORS (Cross-Origin Resource Sharing) adalah mekanisme keamanan browser yang menggunakan HTTP headers untuk mengizinkan atau memblokir request antar-origin berbeda sebagai pelonggaran terkontrol dari Same-Origin Policy - Solusi paling umum untuk masalah CORS adalah menambahkan header Access-Control-Allow-Origin di sisi server, yang dapat dikonfigurasi untuk origin spesifik atau menggunakan wildcard (*) untuk development - Chrome extension sering digunakan sebagai solusi cepat untuk bypass CORS di lingkungan development lokal, namun tidak boleh digunakan di production karena alasan keamanan - Content Security Policy (CSP) adalah header HTTP yang mencegah serangan XSS dengan mengontrol resource apa saja (script, style, image, font, dll) yang boleh dimuat dari origin mana saja - CSP memiliki berbagai directive seperti script-src, style-src, img-src, default-src, dan fitur canggih seperti nonce dan hash untuk validasi integritas script yang dimuat - Cross-Origin Resource Policy (CORP) berfokus pada mencegah website lain meng-embed resource kita (image, halaman web, dll) dalam konteks mereka sebagai perlindungan terhadap serangan side-channel seperti Spectre dan Meltdown - Hampir semua framework web modern (Express.js, Laravel, Next.js, Go, dll) memiliki middleware atau konfigurasi bawaan untuk mengimplementasikan CORS, CSP, dan CORP dengan mudah Full transcript available on the episode page. ## EP 124: Bedah Situs - Ngobrolin WEB - Published: 2025-04-09 - URL: https://ngobrol.in/episodes/dk8JSYuOmhc-bedah-situs-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=dk8JSYuOmhc Episode ini merupakan edisi perdana segmen "Bedah Situs" di mana tim Ngobrolin WEB mengulas website mereka sendiri, yaitu ngobrol.in. Website ini dibangun dengan bantuan berbagai AI tools seperti GitHub Copilot, Claude Code, Amazon Q Developer CLI, dan Cursor untuk hampir seluruh aspek pengembangan termasuk coding, testing, dan dokumentasi. Website menggunakan teknologi Elixir dengan Phoenix Framework, Live View, PostgreSQL, dan Tailwind CSS. Website ini berfungsi sebagai showcase arsip episode podcast Ngobrolin WEB yang bersumber dari YouTube playlist, dengan fitur RSS feed yang kompatibel dengan format podcast sehingga dapat didengarkan di Spotify. Diskusi juga mencakup proses konversi video YouTube menjadi MP3 menggunakan yt-dlp, deployment menggunakan Coolify (open source alternatif Heroku) di AWS, dan analisis performa website menggunakan Chrome DevTools Performance tab. Key points: - Website ngobrol.in dibangun hampir sepenuhnya menggunakan berbagai AI tools (GitHub Copilot, Claude Code, Amazon Q Developer CLI, Cursor) untuk coding, testing, dan dokumentasi - Teknologi yang digunakan: Elixir, Phoenix Framework, Live View, PostgreSQL, dan Tailwind CSS dengan desain neo-brutalisme yang dibuat dengan bantuan v0.dev - Website mengambil data dari YouTube Data API dan mengkonversi video ke audio MP3 menggunakan yt-dlp untuk podcast feed yang kompatibel dengan Spotify - Deployment menggunakan Coolify (versi open source Heroku) di infrastruktur AWS dengan konfigurasi Docker dan webhook untuk auto-deploy - Website memiliki fitur RSS feed, pencarian episode, dan halaman detail untuk setiap episode dengan catatan yang diambil dari deskripsi video - Analisis performa menggunakan Chrome DevTools menunjukkan TTFB 215ms (bagus), penggunaan HTTP/3 untuk beberapa resource, dan area yang perlu ditingkatkan seperti font display swap dan preconnect untuk domain YouTube image - Rencana pengembangan masa depan termasuk menambahkan fitur transcript otomatis dengan AI, ringkasan episode, dan perbaikan performa serta responsivitas mobile Full transcript available on the episode page. ## EP 123: Ngobrolin Lebaran - Ngobrolin WEB - Published: 2025-04-01 - URL: https://ngobrol.in/episodes/L4VUZPu-IMQ-ngobrolin-lebaran-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=L4VUZPu-IMQ Episode ini adalah ucapan Selamat Idul Fitri dari tim Ngobrolin WEB. Eka, Ivan, dan Rizah memberikan salam Lebaran dengan mengucapkan "Minal Aidzin Wal Faidzin" dan memohon maaf lahir dan batin kepada para pendengar. Episode ini menampilkan momen yang cukup menghibur ketika para host mencoba mengucapkan salam secara kompak, yang ternyata membutuhkan beberapa kali percobaan untuk mencapai kekompakan. Key points: - Episode khusus ucapan Selamat Idul Fitri dari tim Ngobrolin WEB - Diucapkan oleh ketiga host: Eka, Ivan, dan Rizah - Mengucapkan "Minal Aidzin Wal Faidzin" dan memohon maaf lahir batin - Menampilkan momen lucu ketika para host berusaha kompak dalam pengucapan - Episode pendek sebagai salam Lebaran untuk komunitas pendengar Full transcript available on the episode page. ## EP 122: Ngobrolin Design Pattern - Ngobrolin WEB - Published: 2025-03-26 - URL: https://ngobrol.in/episodes/utmuHV8-MAU-ngobrolin-design-pattern-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=utmuHV8-MAU Episode ini membahas tentang Design Pattern dalam pengembangan software, sebuah topik permintaan dari Mas Azam Aziz. Diskusi dimulai dengan perdebatan menarik tentang apakah MVC (Model-View-Controller) termasuk dalam kategori Design Pattern atau tidak, mengingat beberapa referensi menyatakan MVC bukanlah Design Pattern melainkan Architectural Pattern. Eka dan Ivan mengulas berbagai kategori Design Pattern seperti Creational Pattern, Structural Pattern, dan Behavioral Pattern, serta membahas referensi terpercaya seperti Refactoring Guru dan Patterns.dev karya Addy Osmani. Diskusi juga mencakup perbedaan antara Front-end dan Back-end Design Pattern, serta bagaimana konsep ini berbeda dengan Rendering Method seperti SSR, CSR, dan SSG. Episode juga menyentuh topik browser security seperti CORS (Cross-Origin Resource Sharing), CORP (Cross-Origin Resource Policy), dan berbagai kebijakan keamanan browser lainnya yang relevan bagi pengembang web modern. Key points: - MVC (Model-View-Controller) sebenarnya adalah Architectural Pattern, bukan Design Pattern, dan sudah ada sejak era Smalltalk - Design Pattern dikategorikan menjadi tiga jenis: Creational Pattern, Structural Pattern, dan Behavioral Pattern - Refactoring Guru dan Patterns.dev (karya Addy Osmani) adalah dua referensi terpercaya untuk belajar Design Pattern - Design Pattern berbeda dengan Rendering Method seperti SSR, CSR, dan SSG yang lebih fokus pada cara rendering halaman - Astro direkomendasikan sebagai framework fleksibel yang bisa mengkombinasikan berbagai metode rendering dalam satu aplikasi - Browser security menjadi topik penting dengan berbagai kebijakan seperti CORS, CORP, CSP (Content Security Policy), dan lainnya - Untuk aplikasi sederhana yang tidak butuh fitur kompleks Next.js, Vite dengan React Router sudah cukup untuk membangun aplikasi Full transcript available on the episode page. ## EP 121: Ngobrolin Kata Sandi - Ngobrolin WEB - Published: 2025-03-19 - URL: https://ngobrol.in/episodes/wRF7vpvs95s-ngobrolin-kata-sandi-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=wRF7vpvs95s Episode Ngobrolin Web ke-122 membahas topik password secara komprehensif dari berbagai sisi: pengguna, developer front-end, hingga back-end. Diskusi dimulai dengan pentingnya password yang kuat dan unik untuk mencegah kebocoran data, yang masih menjadi salah satu top 10 OWASP security risks. Para host membahas praktik terbaik untuk pengguna seperti menggunakan password manager (Bitwarden, LastPass, bawaan browser), menghindari password yang sama di multiple services, dan memanfaatkan fitur password generator. Dari sisi developer, dibahas implementasi yang benar mulai dari penggunaan input type="password" yang semantik, atribut autocomplete yang proper, hingga teknik hashing dan salting di sisi server menggunakan library seperti bcrypt, Argon2, dan lain-lain. Episode ini juga menyinggung evolusi layanan autentikasi modern seperti Auth0, Firebase, Supabase, dan AuthJS yang mempermudah implementasi security tanpa harus membangun dari nol. Key points: - Password yang lemah seperti '123456' atau 'password' masih menjadi penyebab utama kebocoran data dan termasuk dalam top 10 OWASP security risks - Pengguna wajib menggunakan password manager (Bitwarden, LastPass, atau bawaan browser) untuk mengelola password yang kompleks dan unik untuk setiap service - Browser modern telah menggalakkan penggunaan password manager dengan fitur sinkronisasi antar device dan browser extension yang memudahkan autofill - Front-end developer harus menggunakan input type='password' secara semantik dan mengkombinasikannya dengan atribut autocomplete yang proper untuk UX yang baik - Password tidak boleh dikirim dalam plaintext dan harus di-hash di client-side sebelum dikirim ke server, meskipun hashing utama tetap dilakukan di server - Di sisi server, password harus di-hash menggunakan algoritma seperti bcrypt atau Argon2 dengan teknik salting untuk mencegah rainbow table attacks - Salt harus unik dan random untuk setiap user, tidak boleh diambil dari data yang predictable seperti username atau timestamp - Framework modern seperti Laravel, Node.js, dan AuthJS telah menyediakan library bawaan untuk password hashing dan verifikasi yang secure - Layanan autentikasi modern seperti Auth0, Firebase, Supabase, dan Cognito semakin mengurangi kebutuhan untuk membangun sistem autentikasi manual - Episode ini di-sponsor oleh Hacktivate (coding bootcamp) dan Nupea keyboard, dengan voting topik minggu depan adalah Design Pattern Full transcript available on the episode page. ## EP 120: Ngobrolin Keamanan bareng @mazipan - Ngobrolin WEB - Published: 2025-03-12 - URL: https://ngobrol.in/episodes/7TR-vxCBiZ4-ngobrolin-keamanan-bareng-mazipan-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=7TR-vxCBiZ4 Episode ini membahas tentang keamanan web (web security) bersama Mas Irfan, narasumber untuk ketiga kalinya. Diskusi dimulai dengan pengalaman Mas Irfan mencari pekerjaan selama 2 bulan dan pentingnya memiliki dana darurat (emergency fund). Topik utama adalah security yang sering dianggap sulit oleh banyak developer karena kurangnya exposure dan pembahasan, padahal security adalah tanggung jawab semua orang dalam tim pengembangan, bukan hanya tim IT security khusus. Episode ini menekankan bahwa security harus dianggap sebagai bagian dari produk, sama seperti performance dan accessibility. Key points: - Security adalah tanggung jawab semua orang dalam pengembangan software, dari front-end sampai back-end, bukan hanya tim IT security khusus - Ada banyak tools untuk security checking seperti CodeQL, SonarQube, DefectDojo, Snyk, dan Dependabot yang bisa membantu mendeteksi vulnerability - WordPress memiliki standar coding yang ketat dengan mantra 'sanitize early, escape late, always validate everything' untuk mencegah XSS - XSS (Cross-Site Scripting) adalah salah satu ancaman paling umum dan harus di-handle dengan sanitasi input dan escaping output - Security seringkali berbanding terbalik dengan productivity dan performance, sehingga perlu dicari keseimbangan yang tepat - Dependency management menjadi penting karena vulnerability di dependency bisa berdampak ke seluruh aplikasi, sebagaimana dibahas dalam artikel Dan Abramov tentang npm audit - Penting untuk menjadi advocate di tempat kerja masing-masing tentang security, performance, dan accessibility dengan pendekatan 'by design' sejak awal pengembangan Full transcript available on the episode page. ## EP 119: Ngobrolin Monorepo - Ngobrolin WEB - Published: 2025-03-05 - URL: https://ngobrol.in/episodes/j-wZjh62Gaw-ngobrolin-monorepo-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=j-wZjh62Gaw Episode ini membahas konsep Monorepo dalam pengembangan software, sebuah strategi di mana kode dari banyak proyek disimpan dalam satu repository. Host membahas definisi Monorepo, perbedaannya dengan monolitik dan multirepo, serta kelebihan dan kekurangannya. Diskusi mencakup berbagai tools yang mendukung Monorepo seperti Lerna, NX, Turborepo, dan workspace features dari NPM, Yarn, PNPM, dan Bun. Episode juga menampilkan contoh implementasi Monorepo dari perusahaan besar seperti Google dan proyek open source populer seperti React, Next.js, dan Bun. Key points: - Monorepo adalah strategi pengembangan software di mana kode dari banyak proyek disimpan dalam satu repository, berbeda dengan multirepo yang memisahkan setiap proyek - Kelebihan Monorepo termasuk berbagi resource dan business logic dengan mudah, dependensi yang terpusat, dan memudahkan onboarding tim baru - Kekurangan Monorepo meliputi ukuran repository yang besar, proses build yang menjadi satu, dan kurang cocok untuk organisasi dengan silo unit bisnis yang rahasia - Tools populer untuk Monorepo: Lerna (sekarang diakuisisi oleh NX), NX, Turborepo (ekosistem Vercel), dan workspace features dari package manager modern - Perusahaan besar seperti Google menggunakan Monorepo dengan miliaran baris kode dalam satu repository, menggunakan tools proprietary seperti Bazel - Contoh implementasi Monorepo di proyek open source: React repository menggunakan NX, Next.js dan Bun juga menggunakan struktur Monorepo - Workspace features dari NPM, Yarn, PNPM, dan Bun memungkinkan pengelolaan dependensi yang efisien dengan symbolic linking untuk menghemat storage - Episode disponsori oleh Hektivate yang menawarkan bootcamp dengan diskon Rp 10 juta untuk full-time dan Rp 4 juta untuk night bootcamp selama Ramadhan - Topik minggu depan akan membahas Basic Web Security berdasarkan voting dari penonton Full transcript available on the episode page. ## EP 118: Ngobrolin Fitur Terbaru CSS bersama @AdamArgyleInk dan Bramus @ChromeDevs - Published: 2025-02-25 - URL: https://ngobrol.in/episodes/QdWmc9bMo48-ngobrolin-fitur-terbaru-css-bersama-adamargyleink-dan-bramus-chromedevs - YouTube: https://www.youtube.com/watch?v=QdWmc9bMo48 Episode ini membahas CSS Wrap 2024 bersama Adam Argyle dan Bramus, dua Developer Relations Engineer dari tim Chrome yang fokus pada CSS dan UI. Mereka berbagi cerita di balik layar pembuatan CSS Wrap 2024, sebuah website interaktif yang merangkum perkembangan CSS sepanjang tahun 2024 dalam bentuk scrollytelling dengan tema retro game 8-bit. Diskusi mencakup berbagai topik penting termasuk perkembangan web modern, termasuk peran Adam dan Bramus sebagai DevRel, serta berbagai fitur CSS unggulan seperti Scroll Driven Animations, View Transitions, CSS Nesting, dan Field Sizing. Mereka juga menjelaskan pendekatan mereka dalam menjembatani developer, engineering tim, dan standard body untuk membuat fitur web yang lebih baik dan mudah digunakan. Key points: - CSS Wrap 2024 adalah website interaktif yang merangkum semua perkembangan CSS tahun 2024 dengan tema retro game 8-bit, dibangun menggunakan Astro dan menampilkan berbagai demo fitur CSS terbaru - Adam Argyle dan Bramus adalah Developer Relations Engineer dari Chrome yang bertugas menjembatani developer, engineering tim, dan CSS Working Group untuk memastikan fitur yang diluncurkan sesuai dengan kebutuhan nyata developer - Scroll Driven Animations adalah fitur favorit Adam karena memungkinkan animasi yang dihubungkan dengan scroll posisi untuk berjalan off-main thread, memberikan performa yang jauh lebih baik daripada menggunakan JavaScript library - View Transitions memberikan kemampuan untuk melakukan transisi antar halaman (cross-document) maupun dalam halaman yang sama (same-document) dengan mudah, memberikan pengalaman seperti Single Page Application tanpa JavaScript yang rumit - CSS Nesting kini telah tersedia di semua browser modern, memberikan kemampuan untuk menulis CSS yang lebih terorganisir dan mudah dibaca tanpa perlu menulis selector berulang-ulang - Field Sizing adalah fitur kecil yang memberikan dampak besar karena memungkinkan penghapusan ribuan baris kode JavaScript yang sebelumnya dibutuhkan untuk auto-growing text input - Platform web selalu berupaya mengejar keunggulan JavaScript library dengan membangun fitur-fitur tersebut secara natif, memberikan performa yang lebih baik dan pengalaman pengguna yang lebih konsisten di seluruh browser Full transcript available on the episode page. ## EP 117: Ngobrolin Protokol Jaringan - Ngobrolin WEB - Published: 2025-02-19 - URL: https://ngobrol.in/episodes/iLILgsmq9mg-ngobrolin-protokol-jaringan-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=iLILgsmq9mg Episode ini membahas tentang protokol jaringan (network protocols) dan model OSI (Open System Interconnection) yang menjadi dasar komunikasi antar perangkat di jaringan. Diskusi dimulai dengan penjelasan apa itu protokol sebagai tata cara atau spesifikasi yang memungkinkan perangkat-perangkat berbeda untuk saling berkomunikasi dengan reliable dan konsisten. Topik utama meliputi penjelasan 7 lapisan OSI model mulai dari Physical layer (kabel/fisik) hingga Application layer (HTTP, HTTPS, FTP), serta perbedaan antara TCP dan UDP sebagai protokol transport yang umum digunakan. Key points: - Protokol jaringan adalah tata cara atau spesifikasi yang memungkinkan perangkat berbeda untuk saling bertukar informasi secara reliable dan konsisten - OSI Model terdiri dari 7 layer: Physical (bits), Data Link (frames), Network (packets), Transport (segments), Session, Presentation, dan Application - TCP (Transmission Control Protocol) lebih aman karena memastikan data sampai tujuan dengan urutan yang benar, namun lebih lambat - UDP (User Datagram Protocol) lebih cepat dengan pendekatan 'fire and forget' namun tidak menjamin data sampai tujuan - Network layer menggunakan IP (Internet Protocol) dan ICMP untuk routing dan error handling antar perangkat - Transport layer bertanggung jawab atas end-to-end connection dan menangani packet loss serta retransmission - Application layer adalah yang paling sering berinteraksi dengan developer seperti HTTP, HTTPS, FTP, dan SMTP Full transcript available on the episode page. ## EP 116: Optimasi Performa JS - Ngborlin WEB - Published: 2025-02-12 - URL: https://ngobrol.in/episodes/ObTg-XT9C64-optimasi-performa-js-ngborlin-web - YouTube: https://www.youtube.com/watch?v=ObTg-XT9C64 Episode ini membahas tentang tips dan trik optimasi performa JavaScript, khususnya penggunaan atribut async, defer, dan dynamic import. Diskusi dimulai dengan Core Web Vitals, terutama INP (Interaction to Next Paint) yang menggantikan FID (First Input Delay) sebagai metrik responsivitas halaman. Tim NgobrolinWEB menjelaskan perbedaan antara script synchronous (blocking), async (dieksekusi segera setelah selesai di-download), dan defer (dieksekusi setelah DOM Content Loaded). Episode ini juga membahas kasus nyata seperti penggunaan jQuery, header bidding untuk iklan, cookie consent, dan bagaimana menghindari race condition. Terdapat diskusi menarik tentang Partytown untuk offload third-party script ke web worker, TypeScript, dan sejarah browser serta JavaScript. Key points: - INP (Interaction to Next Paint) adalah Core Web Vital baru yang menggantikan FID sejak 31 Desember 2024, mengukur responsivitas halaman saat interaksi user - Script tanpa atribut akan bersifat render-blocking dan menghentikan parsing HTML hingga script selesai di-download dan dieksekusi - Atribut async memungkinkan script di-download secara paralel dan dieksekusi segera setelah selesai, cocok untuk analitik dan tracking - Atribut defer menunda eksekusi script hingga DOM Content Loaded, menjaga urutan eksekusi sesuai urutan dalam HTML, ideal untuk vendor dan main script - Race condition dapat terjadi ketika script dependency di-load secara async, seperti jQuery yang belum siap saat script lain dieksekusi - Partytown adalah library untuk offload third-party script ke web worker, mengurangi beban main thread untuk tracking, ads, dan analytics - Diskusi juga mencakup Progressive Web Apps, pentingnya progressive enhancement, dan perbedaan antara TypeScript sebagai developer experience tool bukan performance tool Full transcript available on the episode page. ## EP 115: Ngobrolin Video Player - Ngobrolin WEB - Published: 2025-02-05 - URL: https://ngobrol.in/episodes/KiBErl9F2a0-ngobrolin-video-player-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=KiBErl9F2a0 Episode ini membahas perjalanan Imbre Nagi, seorang Cloud Engineer yang berbagi pengalamannya dalam mempelajari front-end development dan membangun platform course online menggunakan Astro. Imbre menceritakan awal mula karirnya sebagai iOS engineer, transisi ke cloud infrastructure, dan tantangan yang dihadapi ketika belajar front-end framework seperti React dan Next.js. Diskusi juga mencakup filosofi Astro sebagai framework yang mengutamakan server-side rendering dengan JavaScript minimal, serta insight tentang teknologi yang digunakan dalam platform course-nya seperti TypeScript, Ansible untuk deployment, dan integrasi dengan Firebase untuk autentikasi. Key points: - Imbre Nagi berbagi perjalanan karir dari iOS engineer hingga menjadi Cloud Engineer yang fokus pada database infrastructure (Postgres, Redis, Kafka) - Pengalaman belajar front-end yang cukup menantang karena harus beradaptasi dengan perubahan paradigma dari server-side rendering ke client-side rendering (SPA) - Pilihan menggunakan Astro untuk membangun courses.imbranagi.com karena filosofi server-side rendering dan JavaScript minimal yang sesuai dengan background back-end - Platform course menggunakan Astro dengan TypeScript, pure CSS (tanpa Tailwind), dan Ansible untuk deployment ke VM di Singapura - Diskusi tentang pentingnya memahami dasar-dasar web development dan tidak terjebak dalam abstraksi framework yang terlalu kompleks - Imbre menciptakan platform course sebagai bagian dari 'nazar pemilu' dan sekarang menjual materi course baik dalam format markdown maupun video - Pendekatan pragmatis dalam belajar teknologi: fokus pada pemrograman fundamentals daripada terpaku pada bahasa tertentu, sesuai dengan kebutuhan karir atau minat membangun produk Full transcript available on the episode page. ## EP 114: Ngobrolin CSS Wrapped 2024 - Ngobrolin WEB - Published: 2025-01-28 - URL: https://ngobrol.in/episodes/2E52qAB9Pq4-ngobrolin-css-wrapped-2024-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=2E52qAB9Pq4 Episode ini membahas CSS Wrapped 2024, sebuah showcase interaktif yang menampilkan 17 fitur CSS baru yang dirilis sepanjang tahun 2024. Ivan dan Eka mengeksplorasi berbagai fitur baru yang dibagi dalam tiga kategori: Components, Interactions, dan Developer Experience. Website CSS Wrapped 2024 sendiri dibangun dengan Astro dan menampilkan tema retro game yang kreatif. Para pembahas juga membicarakan tentang browser support, di mana beberapa fitur sudah mencapai baseline (didukung semua browser utama) sementara yang lain masih terbatas pada browser berbasis Chromium. Key points: - Field Sizing: Form elements yang otomatis menyesuaikan ukuran berdasarkan konten (limited availability) - Animate to Auto: Fitur interpolate-size yang memungkinkan animasi ke intrinsic size seperti auto, max-content, min-content (limited availability) - Exclusive Details: Akordion tanpa JavaScript hanya dengan menambahkan atribut name yang sama pada elemen details (sudah baseline) - Anchor Positioning: Posisi elemen relatif terhadap elemen lain secara deklaratif untuk tooltips, menus, dan dialogs (limited availability) - Custom Scrollbar: scrollbar-width sudah baseline, scrollbar-color masih terbatas (Safari belum mendukung color) - Cross-Document View Transitions: Animasi transisi halaman untuk MPA tanpa perlu mengubah ke SPA (limited availability) - Scroll-Driven Animations: Animasi parallax dan efek scroll murni dengan CSS, tidak perlu JavaScript (limited availability) Full transcript available on the episode page. ## EP 113: Ngobrolin LocalFirst - Ngobrolin WEB - Published: 2025-01-22 - URL: https://ngobrol.in/episodes/Ggx5EOiZIwA-ngobrolin-localfirst-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=Ggx5EOiZIwA Episode ini membahas tentang paradigma Local First dalam pengembangan aplikasi modern. Diskusi dimulai dari pengalaman menggunakan Actual Budget, aplikasi personal finance yang berjalan secara lokal dan dapat diakses offline. Trio host membahas definisi Local First menurut Maggie Appleton yang bukan hanya tentang storage lokal, tetapi aplikasi yang dibangun untuk penggunaan personal dan lingkungan sekitar. Episode ini juga mengeksplorasi berbagai teknologi pendukung seperti database lokal (IndexedDB, PouchDB, SQLite dengan WebAssembly), CRDT (Conflict-Free Replicated Data Types) untuk resolusi konflik, serta sync engine modern seperti PowerSync, ElectricSQL, dan Zero. Diskusi juga menyentuh tren evolusi dari aplikasi offline-first era desktop, ke online-first saat web booming, dan kembali ke hybrid offline/online dengan tetap mempertahankan kepemilikan data (data ownership). Key points: - Local First adalah paradigma di mana aplikasi dibangun untuk penggunaan personal dan lingkungan sekitar, bukan hanya tentang storage lokal atau dapat berjalan offline - Data ownership adalah aspek kunci dari Local First - pengguna memiliki kontrol penuh atas data mereka dan dapat memindahkannya antar perangkat atau layanan tanpa ketergantungan pada vendor tertentu - CRDT (Conflict-Free Replicated Data Types) adalah teknologi penting yang menangani resolusi konflik secara otomatis ketika data disinkronisasi antar perangkat - Berbagai sync engine modern mendukung pengembangan aplikasi Local First seperti PowerSync, ElectricSQL, Zero, dan Yjs untuk collaborative editing - SQLite dengan WebAssembly memungkinkan database SQL berjalan langsung di browser, memungkinkan aplikasi yang sebelumnya hanya bisa berjalan di server untuk berjalan di klien - Evolusi tren aplikasi: offline-first (era desktop) → online-first (era web) → hybrid offline/online dengan Local First yang menggabungkan keunggulan keduanya - Contoh aplikasi Local First termasuk Git, Obsidian, Actual Budget, dan Linear yang memberikan pengalaman responsif (snappy) karena tidak bergantung pada koneksi internet untuk operasi dasar Full transcript available on the episode page. ## EP 112: Ngobrolin Video Singkat bareng @dannydwic - Ngobrolin WEB - Published: 2025-01-15 - URL: https://ngobrol.in/episodes/QgnEdmGl814-ngobrolin-video-singkat-bareng-dannydwic-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=QgnEdmGl814 Episode Ngobrolin WEB ini berbincang dengan Dhani Dwijaya Putra, seorang software engineer di Hijra sekaligus konten kreator programming di TikTok dan LinkedIn. Percakapan membahas perjalanan karir Dhani yang unik—beralih dari latar belakang pendidikan olahraga menjadi software engineer melalui belajar autodidak selama 2 tahun dengan bimbingan mentor. Topik utama episode adalah proses pembuatan konten video pendek untuk edukasi programming, termasuk strategi scripting, teknik recording, editing, dan cara meningkatkan engagement audiens. Dhani berbagi formula pembuatan konten edukatif yang engaging melalui showing emotions, storytelling, dan struktur konten yang jelas. Episode ini juga menyentuh aspek time management untuk menyeimbangkan pekerjaan full-time sebagai software engineer dengan hobi membuat konten, serta rencana karir ke depan termasuk target bekerja di luar negeri. Key points: - Dhani Dwijaya Putra berlatar belakang pendidikan olahraga, kemudian beralih menjadi software engineer melalui belajar autodidak selama 2 tahun dengan mentor teman satu desa yang kuliah di informatika - Motivasi awal membuat konten berasal dari patah hati—perlu mengisi kegiatan agar tidak terpikirkan mantan pacar, kemudian berkembang menjadi keinginan menyediakan konten edukatif di tengah dominasi konten hiburan di social media - Proses pembuatan konten Dhani meliputi: ideation dari hasil belajar, riset dan POC, scripting yang terstruktur (hooks, background, konten), recording dalam batch di weekend, dan editing menggunakan CapCut - Formula konten engaging: menampilkan emosi secara ekspresif (lebay), storytelling dengan struktur problem-glorifikasi-solusi, serta teknik seperti kontradiksi atau konfirmasi opini untuk memicu engagement - Strategi time management: scripting pada weekday saat sebelum/sesudah office, recording dalam batch sehari penuh di weekend, dan editing bisa dilakukan secara asinkron di tengah jam kerja - Dhani membagi kontennya menjadi dua kategori: konten teknikal untuk share hasil belajar (Feynman technique) dan konten entertainment yang jarang dibuat karena lebih time-consuming - Rencana 2025: fokus membuat konten berbahasa Inggris untuk meningkatkan speaking skill dan mendapat opportunity kerja di luar negeri, serta deep dive ke topik-topik teknikal yang lebih advance Full transcript available on the episode page. ## EP 111: Ngborolin 2025 - Ngobrolin WEB - Published: 2025-01-08 - URL: https://ngobrol.in/episodes/_6HCMH8SREU-ngborolin-2025-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=_6HCMH8SREU Episode ini membahas tren teknologi web di tahun 2025 dengan fokus utama pada perkembangan Artificial Intelligence (AI). Diskusi dimulai dengan review singkat tren 2024, dimana AI Generative menjadi sangat dominan dengan banyak provider baru, produk yang beragam (chatbot, image generator, video generator, audio generator), dan integrasi AI yang semakin meluas ke berbagai produk. Episode ini juga menyinggung tren "micro apps" atau aplikasi sekali pakai yang dibuat dengan bantuan AI, serta prediksi bahwa AI akan semakin terintegrasi dan terjangkau bagi developer web. Key points: - AI Generative mendominasi tren 2024 dengan banyak provider baru yang tidak hanya menawarkan chatbot, tetapi juga image, video, dan audio generator - AI Coding Assistant seperti GitHub Copilot, Cursor, dan Windsurf semakin merakyat dan terintegrasi dengan berbagai editor dan workflow developer - Munculnya tools AI yang dapat membuat aplikasi full-stack secara otomatis seperti bold.new dan v0, memungkinkan pembuatan aplikasi dengan cepat - Tren "micro apps" atau aplikasi sekali pakai (disposable apps) yang dibuat dengan bantuan AI untuk kebutuhan spesifik dan sementara - Chrome API sebagai standar baru untuk mengakses kemampuan AI di browser, yang memungkinkan AI berjalan secara lokal (on-edge) - Svelte 5 dan React 19 yang rilis akhir 2024 diprediksi akan semakin banyak diadopsi di tahun 2025 - Local-first architecture dengan sync engine menjadi tren, memungkinkan aplikasi tetap berjalan saat offline dan menyinkronkan data ketika online kembali Full transcript available on the episode page. ## EP 110: Ngobrolin WEB edisi Offline Surabaya - Published: 2024-12-24 - URL: https://ngobrol.in/episodes/bu4mEcws2h0-ngobrolin-web-edisi-offline-surabaya - YouTube: https://www.youtube.com/watch?v=bu4mEcws2h0 Episode ini adalah sesi tanya jawab Ngobrolin Web versi offline yang diadakan di Surabaya. Pembahasan mencakup berbagai topik teknis seputar pengembangan web, mulai dari perbedaan penggunaan RUM (Real User Monitoring) dan Google Analytics, tantangan menggunakan AI untuk front-end development, keunggulan Tailwind CSS untuk developer yang tidak terlalu mahir CSS, optimasi performa web dengan banyak third-party libraries, hingga perdebatan tentang penggunaan ORM seperti Prisma dan Sequelize dibandingkan SQL raw. Episode ini juga membahas tentang browser automation, web scraping, dan cara kerja spesifikasi teknis web antar browser modern. Key points: - RUM (Real User Monitoring) seperti New Relic digunakan untuk memantau error dan performance metrics termasuk Core Web Vitals, sedangkan Google Analytics lebih fokus pada user behavior, device usage, dan traffic analysis - AI tools seperti v0.dev dapat membantu generate komponen front-end, namun developer tetap perlu memahami prinsip-prinsip front-end seperti validasi form, state management, dan event handler untuk prompting yang efektif - Tailwind CSS sangat membantu back-end developer yang kurang mahir CSS karena menyediakan utility classes yang konsisten, dengan custom config untuk design tokens yang bisa digunakan lintas project - Untuk mengoptimalkan performa dengan banyak third-party scripts, gunakan konsep critical rendering path dan defer loading script yang tidak diperlukan di awal (below the fold) menggunakan intersection observer - ORM seperti Prisma dan Sequelize menawarkan developer experience yang baik dengan TypeScript definitions, namun dapat menghasilkan query yang kurang optimal untuk use case kompleks, sehingga perlu trade-off antara kemudahan dan performa - Browser automation tidak hanya untuk testing, tetapi juga dapat digunakan untuk scraping data dan otomasi tugas-tugas repetitif, selama dilakukan dengan etika dan menghormati rate limit dari website - Spesifikasi teknis web (HTML, CSS, JavaScript API) dibuat oleh konsorsium yang terdiri dari perusahaan browser dan komunitas, dengan Web Platform Tests (webpt.fyi) digunakan untuk memastikan konsistensi implementasi antar browser Full transcript available on the episode page. ## EP 109: Ngobrolin Desktop App - Ngobrolin WEB - Published: 2024-12-18 - URL: https://ngobrol.in/episodes/94-ige23PDs-ngobrolin-desktop-app-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=94-ige23PDs Episode ini membahas pengalaman produksi menggunakan Tauri, framework desktop application berbasis Rust yang memungkinkan pengembangan aplikasi desktop cross-platform dengan teknologi web. Mas Donny dan Mas Aris dari Zero01 Group berbagi pengalaman mereka memilih Tauri sebagai solusi untuk membangun aplikasi desktop trading, menjelaskan keuntungan menggunakan WebView native dari OS dan bagaimana Tauri menawarkan performa lebih baik dibandingkan alternatif seperti Electron. Diskusi mencakup berbagai aspek teknis termasuk integrasi SQLite untuk penyimpanan data lokal, tantangan multi-monitor, serta keamanan data dengan enkripsi. Kedua pembicara juga berbagi insight tentang ekosistem Rust, integrasi dengan Deno, dan tips karir untuk developer teknis tentang pentingnya membangun kehadiran di media sosial. Key points: - Tauri adalah framework desktop application berbasis Rust yang menggunakan WebView native dari OS, memberikan ukuran aplikasi yang jauh lebih kecil (sekitar 4-5 MB) dibandingkan Electron yang bisa mencapai 100+ MB - Untuk aplikasi yang membutuhkan database lokal, SQLite adalah pilihan utama untuk penyimpanan data dengan pendekatan Local First architecture - Tantangan teknis seperti multi-monitor support perlu diperhatikan saat mengembangkan aplikasi desktop, termasuk penentuan posisi window yang tepat - Keamanan data sangat penting, terutama untuk data sensitif seperti API keys dan credentials, sehingga perlu implementasi enkripsi yang proper - Integrasi dengan runtime JavaScript seperti Deno memungkinkan pengembangan lebih fleksibel dengan memanfaatkan core library Deno - Memilih teknologi sebaiknya berdasarkan use case yang spesifik - Tauri cocok untuk desktop app, sementara Wails (Go-based) bisa menjadi alternatif - Penting untuk developer teknis membangun kehadiran di media sosial dan berbagi knowledge, karena ini membantu karir dan membuka peluang baru Full transcript available on the episode page. ## EP 108: Ngobrolin Pengalaman Frontend @imrenagi - Ngobrolin WEB - Published: 2024-12-11 - URL: https://ngobrol.in/episodes/jxW4wishA8s-ngobrolin-pengalaman-frontend-imrenagi-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=jxW4wishA8s Episode ini membahas tentang teknologi video di web bersama Mas Yudi, engineer yang bekerja di Daily Motion. Percakapan dimulai dengan sejarah singkat video di web, dari era Flash hingga HTML5, dan tantangan format video seperti MP4, WebM, dan OGV. Mas Yudi berbagi pengalaman kerja di bagian B2B Daily Motion yang menyediakan layanan hosting video untuk klien corporate, termasuk infrastruktur video yang bisa di-white-label. Diskusi mencakup berbagai aspek teknis seperti autoplay policy browser, integrasi iklan menggunakan Google IMA SDK, tantangan smart TV dengan browser engine Chromium versi lama, hingga isu performa dan accessibility pada video player. Episode ini juga menyentuh regulasi seperti GDPR dan PDP (Perlindungan Data Pribadi) yang mempengaruhi implementasi video di website. Key points: - Daily Motion adalah video platform B2B yang menyediakan layanan hosting dan infrastruktur video untuk klien corporate, dengan opsi white-label untuk media dan news - Sejarah video di web berkembang dari Flash era menuju HTML5 dengan format video MP4 sebagai yang paling universal, disusul WebM dan OGV - Autoplay policy browser menjadi tantangan utama karena aturan ketat yang berbeda antar browser, terutama Safari yang paling ketat - Integrasi iklan video menggunakan Google IMA SDK (Interactive Media Ads) yang terhubung dengan Google Ads Manager - Smart TV yang masih menggunakan Chromium versi lama memerlukan video.js versi lama dan menyulitkan proses testing karena ketersediaan device - Video.js adalah open source video player yang paling matang dan lengkap, menjadi base untuk banyak fork dan implementasi lain - Isu accessibility dan regulasi seperti GDPR serta PDP Indonesia memerlukan pendekatan khusus dalam implementasi video player Full transcript available on the episode page. ## EP 107: Persiapan DevFest Surabaya - Ngobrolin WEB - Published: 2024-12-04 - URL: https://ngobrol.in/episodes/8MhHQNJ6OzE-persiapan-devfest-surabaya-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=8MhHQNJ6OzE Episode ini membahas persiapan dan agenda DevFest Surabaya 2024, acara tahunan Google Developer Group (GDG) Surabaya yang akan diselenggarakan pada tanggal 8 Desember 2024. Trio host Ngobrolin Web - Mas Riza, Mas Ivan, dan Mbak Eka - akan menjadi pembicara dalam sesi khusus "Ngobrolin Web" yang akan diadakan secara offline. Episode ini juga mengundang Haidar Zamzam, salah satu panitia GDG Surabaya, untuk berbagi informasi tentang persiapan acara, format event, dan berbagai topik teknis yang akan dibahas. Diskusi mencakup topik-topik seperti Browser Automation, HTML over the Wire, dan penggunaan AI sebagai coding assistant untuk front-end development. Key points: - DevFest Surabaya akan diadakan pada tanggal 8 Desember 2024 di hotel Bintang 5 (versi mewah dari Ibis) dengan kapasitas 500 peserta di main hall - Pendaftaran acara melalui form kurasi yang ketat untuk memastikan peserta yang benar-benar serius dan dapat berkomitmen untuk hadir, menghindari no-show seperti tahun-tahun sebelumnya - Format acara terdiri dari single track di pagi hari dengan keynote dan sesi teknis (Android, Flutter, AI, Cloud), kemudian multi-track di siang hari dengan workshop terbatas 50 orang - "Ngobrolin Web" akan hadir sebagai sesi panel discussion di main hall setelah makan siang, dipandu oleh moderator, dengan format masing-masing speaker presentasi 7-20 menit dilanjutkan sesi Q&A selama 30 menit - Topik yang akan dibahas meliputi Browser Automation (bagaimana bekerja dan use cases), HTML over the Wire (solusi middle-ground antara SPA dan server-rendered apps), dan AI sebagai coding assistant untuk front-end development dengan tips memaksimalkan penggunaan AI - Acara akan menyediakan live streaming di channel GDG Surabaya untuk mereka yang tidak dapat hadir secara offline, dengan slide.do untuk pertanyaan terkurasi - Terdapat sesi Women Techmakers (WTM) panel discussion dan peserta akan mendapatkan makan siang termasuk kuliner khas Surabaya seperti pecel rawon Full transcript available on the episode page. ## EP 106: Ngobrolin Alat Dokumentasi - Ngobrolin WEB - Published: 2024-11-20 - URL: https://ngobrol.in/episodes/w0--WVHU5DE-ngobrolin-alat-dokumentasi-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=w0--WVHU5DE Episode ini membahas tentang dokumentasi dalam pengembangan software, mulai dari konsep dasar, jenis-jenis dokumentasi, hingga berbagai tools yang dapat digunakan. Diskusi dimulai dengan pengenalan Documentation System yang terdiri dari empat jenis utama: Tutorial (learning-oriented), How-to Guides (problem-solving oriented), Explanation (teoretical/conceptual), dan Reference (API documentation). Episode mengulas berbagai tools populer seperti Docusaurus (React-based), Starlight (Astro-based), Storybook (untuk UI components), Swagger/OpenAPI (untuk API documentation), dan Google Code Lab (untuk step-by-step tutorial). Topik penting yang dibahas meliputi best practice "Docs as Code" di mana dokumentasi ditempatkan dalam reposisi yang sama dengan kode untuk memudahkan tracking, version control, dan code review, serta diskusi tentang bagaimana dokumentasi modern juga perlu dikonsumsi oleh AI tools seperti Cursor dan Copilot. Key points: - Documentation System terdiri dari empat jenis: Tutorial (belajar step-by-step), How-to Guides (solusi masalah spesifik), Explanation (konsep/filosofi di balik teknologi), dan Reference (dokumentasi API/sintaks) - Docusaurus adalah framework dokumentasi berbasis React yang paling populer (go-to solution) dengan fitur SSG, blog, dan dukungan MDX - Starlight adalah template dokumentasi berbasis Astro dengan best practices dari dokumentasi Astro sendiri, mendukung multi-lingual termasuk bahasa Indonesia - Storybook adalah tool khusus untuk dokumentasi UI components dengan fitur autodocs, accessibility testing, dan visual testing, mendukung berbagai framework - Swagger/OpenAPI Specification adalah standar untuk API documentation yang berfungsi sebagai "kontrak" antara front-end dan back-end developer - Best practice "Docs as Code" menyarankan dokumentasi ditempatkan dalam repo yang sama dengan kode untuk tracking, version control, dan menghindari dokumentasi terbengkalai - Google Code Lab menawarkan format step-by-step tutorial yang user-friendly untuk workshop, dapat ditulis menggunakan Google Docs dan dikonversi menjadi HTML - Dokumentasi modern tidak hanya untuk manusia tetapi juga untuk dikonsumsi oleh AI tools, sehingga struktur heading dan semantic markdown menjadi semakin penting Full transcript available on the episode page. ## EP 105: Ngobrolin Slide - Ngobrolin WEB - Published: 2024-11-13 - URL: https://ngobrol.in/episodes/uYnfyW3M790-ngobrolin-slide-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=uYnfyW3M790 Episode ini membahas tentang berbagai tools dan platform untuk membuat presentasi slide, mulai dari konvensional seperti PowerPoint dan Keynote hingga berbasis web seperti Google Slides, Canva, dan solusi berbasis kode seperti Reveal.js, MDX Deck, dan Slidev. Diskusi dimulai dengan pengalaman pribadi para host dalam menggunakan berbagai tools presentasi, kelebihan dan kekurangan masing-masing, serta fokus khusus pada Slidev - sebuah framework berbasis Markdown dan Vue yang memungkinkan developer membuat presentasi dengan cara yang lebih natural menggunakan kode. Episode juga menyinggung tentang use case khusus untuk developer seperti menampilkan kode dengan syntax highlighting, demo langsung di browser, dan kemudahan kolaborasi serta hosting. Key points: - Perbandingan berbagai tools presentasi dari konvensional (PowerPoint, Keynote) ke berbasis web (Google Slides, Canva) dan berbasis kode (Reveal.js, MDX Deck, Slidev, Marp) - Slidev sebagai framework berbasis Markdown dan Vue yang memungkinkan developer membuat slide dengan code editor kesukaan mereka, menawarkan velocity lebih cepat dan layout yang lebih fleksibel - Kelebihan tools berbasis JavaScript untuk presentasi technical: kemampuan menjalankan demo langsung di browser, syntax highlighting yang baik, dan integrasi dengan component framework - Fitur-fitur Slidev termasuk built-in layouts, custom components, UnoCSS untuk styling, icon integration via UnoCSS Icons, dan kemampuan export ke berbagai format - Diskusi tentang use case khusus seperti demo Web API, View Transition API, dan integrasi dengan WebContainer untuk live coding langsung di slide - Opsi hosting dan deployment untuk slide berbasis kode termasuk GitHub Pages, Netlify, Vercel, dan kemampuan kolaborasi via Git atau GitHub Codespaces - Alternatif lain seperti Marp (Markdown Presentation Ecosystem) yang lebih pure tanpa framework JavaScript, serta tools komersial seperti AI Presenter Full transcript available on the episode page. ## EP 104: Ngobrolin MicroFrontend - Ngobrolin WEB - Published: 2024-11-06 - URL: https://ngobrol.in/episodes/4B17oXqMoRY-ngobrolin-microfrontend-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=4B17oXqMoRY Episode ini membahas tentang Micro Front-end, sebuah arsitektur front-end yang memecah aplikasi monolitik menjadi bagian-bagian kecil yang dapat dikelola oleh tim yang berbeda secara independen. Diskusi dipandu oleh Ivan dengan narasumber Mas Irvan Maulana dan Lihao, yang berbagi pengalaman dan perspektif mereka tentang implementasi micro front-end di industri. Topik yang dibahas meliputi definisi micro front-end, kapan dan mengapa harus menggunakannya, tantangan performa dan dependensi, perbedaan antara monorepo dan micro front-end, serta konsep horizontal dan vertical split. Diskusi juga menyentuh alat-alat seperti Module Federation Plugin dan perdebatan tentang apakah pendekatan Vercel (vertical split) dapat disebut sebagai micro front-end yang sejati. Key points: - Micro Front-end adalah ekivalen dari microservice di dunia back-end, memungkinkan tim yang berbeda untuk mengelola bagian-bagian front-end secara independen dengan deployment yang terpisah - Tanda-tanda bahwa sebuah tim membutuhkan micro front-end adalah ketika ada banyak tim yang mulai bertengkar tentang deployment, delivery menjadi terlalu lambat, dan koordinasi menjadi rumit - Jangan memulai dengan micro front-end dari awal - mulailah dengan monolit terlebih dahulu, baru pertimbangkan micro front-end ketika benar-benar dibutuhkan (sama seperti pendekatan microservice di back-end) - Tantangan utama micro front-end adalah performa - semua micro front-end berjalan di environment browser yang sama, membagi JavaScript thread dan memory yang sama, membuat debugging dan optimasi menjadi jauh lebih sulit - Ada dua konsep split dalam micro front-end: horizontal split (satu halaman dengan multiple aplikasi/packages) dan vertical split (satu aplikasi per halaman seperti pendekatan Vercel) - Module Federation adalah salah satu alat yang paling populer untuk mengimplementasikan micro front-end, meskipun terikat dengan webpack dan memiliki batasan di Next.js App Router - Micro front-end lebih bersifat organisasi/pattern daripada teknis - tentang bagaimana memecah satu aplikasi menjadi build yang terpisah untuk tim yang berbeda, bukan sekadar menggunakan teknologi tertentu Full transcript available on the episode page. ## EP 103: Ngborolin Svelte feat. @lihautan - Ngobrolin WEB - Published: 2024-10-30 - URL: https://ngobrol.in/episodes/8tZIeQH1DSU-ngborolin-svelte-feat-lihautan-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=8tZIeQH1DSU Episode ini membahas tentang Svelte dan Svelte 5 bersama Lihau, seorang Svelte maintainer yang bekerja sebagai Front-end Engineer di Shopee Singapore. Lihau berbagi perjalanan menjadi maintainer Svelte yang dimulai saat pandemi COVID-19 ketika ia mencoba membaca kode Svelte di GitHub dan membuat pull request kecil. Diskusi mencakup perbedaan antara Svelte dan React, keuntungan menggunakan Svelte untuk animasi dan transisi, konsep compiler Svelte yang mengubah kode menjadi vanilla JavaScript, serta perubahan besar dalam Svelte 5 yang memperkenalkan runes untuk universal reactivity. Episode juga membahas tentang SvelteKit sebagai meta framework resmi, contoh aplikasi populer yang menggunakan Svelte seperti Apple Music dan syntax.fm, serta tantangan dalam mengadopsi framework baru di lingkungan perusahaan. Key points: - Lihau menjadi Svelte maintainer setelah membuat beberapa pull request kecil saat pandemi COVID-19, dibantu oleh kebetuan bahwa Rich Harris sibuk dengan proyek COVID di New York Times - Svelte bekerja sebagai compiler yang mengubah kode menjadi vanilla JavaScript, sehingga tidak ada runtime overhead di browser, berbeda dengan React yang menggunakan Virtual DOM - Svelte 5 memperkenalkan runes dan effect hooks yang terinspirasi dari React hooks, memungkinkan universal reactivity yang bekerja di mana saja dalam kode - Shopee masih menggunakan React untuk sebagian besar proyek karena maintainability dan familiarity, bukan karena keterbatasan Svelte - Lihau merekomendasikan SvelteKit sebagai meta framework resmi untuk sebagian besar use case, dari blog statis hingga aplikasi dinamis dengan server-side rendering - Contoh aplikasi populer yang menggunakan Svelte termasuk Apple Music, syntax.fm, dan PocketBase admin UI - Tim Svelte menggunakan test suite yang komprehensif untuk memastikan backward compatibility saat mengembangkan Svelte 5, dengan test case yang dapat dilihat langsung di repository Full transcript available on the episode page. ## EP 102: Ngobrolin JavaScript Bangkok - Ngobrolin WEB - Published: 2024-10-23 - URL: https://ngobrol.in/episodes/4yHA-8Bu4XM-ngobrolin-javascript-bangkok-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=4yHA-8Bu4XM Episode ini membahas pengalaman tim Ngobrolin WEB menghadiri JavaScript Bangkok Conference 2.0.1 di Bangkok, Thailand. Rizal menceritakan pengalamannya ditolak saat mengajukan topik presentasi tentang Local First AI, namun tetap mendapat kesempatan untuk hadir setelah nebeng hotel dan mendapat subsidi dari pihak penyelenggara. Selama konferensi, mereka menghadiri berbagai sesi menarik termasuk keynote oleh Lihao (maintainer Stealth) tentang cara kerja spell compiler, presentasi oleh Pak Thor (ex-Googler) tentang real-time translation dan semantic search menggunakan WebAssembly dan WebGPU secara offline, serta sesi tentang creative coding dengan P5.js oleh Patt Vira. Ivan memberikan presentasi lightning talk tentang WebDriver BiDi. Episode juga menyinggung perbandingan budaya dan kuliner antara Indonesia, Thailand, dan Malaysia, serta diskusi teknis mengapa framework JavaScript yang populer cenderung bersifat minimalis dibandingkan full-battery seperti framework di bahasa pemrograman lain. Key points: - Rizal dan Ivan berangkat ke Bangkok untuk menghadiri JavaScript Bangkok Conference 2.0.1, setelah Rizal mengajukan topik presentasi yang ditolak namun tetap diterima kehadirannya - Eka apply ke conference dengan topik eksperimental tentang Local First AI yang ditolak, namun hal ini membiasakan dirinya untuk tidak takut ditolak dan tetap mencoba dengan segala risiko - Keynote speaker Lihao (maintainer Stealth) menjelaskan cara kerja spell compiler dengan live-coding, membreakdown bagaimana kode biasa dikompilasi menjadi JavaScript yang dieksekusi - Pak Thor (ex-Googler yang sekarang di Supabase) mendemonstrasikan real-time translation dan semantic search yang berjalan sepenuhnya offline menggunakan WebAssembly dan WebGPU di browser - Patt Vira, content creator Thailand yang ahli creative coding dengan P5.js, berbagi cerita bagaimana dia merasa kesulitan belajar coding secara tradisional namun menemukan passion melalui creative coding - Alicia JS, framework backend minimalis karya developer Thailand dengan tema anime, diperkenalkan sebagai alternatif dari Express dengan performa yang lebih cepat - Diskusi teknis tentang mengapa framework JavaScript populer cenderung minimalis (Express, Hono, Alicia JS) dibandingkan full-battery framework di bahasa lain seperti Rails, Django, atau Laravel Full transcript available on the episode page. ## EP 101: Ngobrolin ViteConf - Ngobrolin WEB - Published: 2024-10-16 - URL: https://ngobrol.in/episodes/RfOoMPVgYjM-ngobrolin-viteconf-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=RfOoMPVgYjM Episode ini membahas ViteConf 2024, sebuah konferensi yang menghadirkan ekosistem Vite dan berbagai tools pengembangan web modern. Topik utama meliputi pengumuman pendanaan Void Zero oleh Evan You (pencipta Vite), hadirnya toolchain baru yang lebih cepat seperti OXC dan Rolldown, serta pembahasan tentang Tutorial Kit dari StackBlitz untuk membuat tutorial interaktif. Episode juga menyentuh fenomena "Everything Written in Rust" di dunia JavaScript tooling serta perbandingan antara berbagai bundler dan linter modern. Key points: - ViteConf 2024 menghadirkan ekosistem Vite yang terus berkembang dengan adopsi yang sangat cepat, mencapai 5 juta unduhan mingguan di npm - Evan You mengumumkan pendanaan seed untuk Void Zero, perusahaan baru yang akan mengembangkan toolchain unified termasuk Vite, Vitest, Rolldown, dan OXC - OXC adalah toolchain JavaScript berbasis Rust yang diklaim 3-100x lebih cepat dari SWC dan ESLint, mencakup parser, transformer, linter, dan bundler - Rolldown adalah bundler baru berbasis Rust yang kompatibel dengan Rollup API, dirancang untuk menggabungkan kelebihan ESBuild dan Rollup dalam satu tool - Tutorial Kit dari StackBlitz memungkinkan pembuatan tutorial interaktif dengan mudah, terinspirasi dari tutorial Svelte yang dibuat oleh Rich Harris - Tren "Everything Written in Rust" semakin kuat di ekosistem JavaScript, menggantikan tools berbasis Node.js yang lebih lambat - Diskusi juga menyentuh konferensi lain seperti JavaScript Bangkok dan IDSW.DEV di Jakarta yang akan diadakan tanggal 16-17 Full transcript available on the episode page. ## EP 100: Ngobrolin Deno - Ngobrolin WEB - Published: 2024-10-09 - URL: https://ngobrol.in/episodes/d7L_jRDJb-E-ngobrolin-deno-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=d7L_jRDJb-E Episode ini membahas tentang Deno 2, runtime JavaScript/TypeScript alternatif Node.js yang dibuat oleh Ryan Dahl (pencipta Node.js asli). Topik utama mencakup sejarah Deno, perbedaan dengan Node.js, keunggulan utama seperti security by default dan TypeScript first-class citizen, serta ekosistem lengkap yang meliputi Fresh framework, JSR (package registry), Deno KV (database), dan Deno Deploy (platform hosting). Diskusi juga menyinggung perbandingan dengan runtime lain seperti Bun serta kelebihan dan kekurangan masing-masing. Key points: - Deno 2 adalah versi terbaru dari runtime JavaScript/TypeScript yang dibuat oleh Ryan Dahl (pencipta Node.js asli) sebagai perbaikan dari berbagai penyesalan dalam desain Node.js - Salah satu penyesalan terbesar Ryan Dahl terhadap Node.js adalah tidak bisa mengontrol NPM (Node Package Manager), yang kemudian menjadi monopoli dan memiliki masalah keamanan - Keunggulan utama Deno: security by default (semua akses harus di-explicitly grant), TypeScript first-class (bisa jalan langsung tanpa transpilasi), dan support ES modules secara native - Deno menggunakan engine V8 (sama seperti Node.js) namun ditulis dengan Rust, sedangkan Bun menggunakan JavaScriptCore dari Safari - Ekosistem Deno mencakup: Fresh (web framework dengan Preact), JSR (package registry alternatif NPM yang mendukung TypeScript dan ESM), Deno KV (key-value database), dan Deno Deploy (platform hosting) - Deno 2 mendukung NPM packages secara native, menjembatani kesenjangan dengan ekosistem Node.js yang sudah ada - Deno mengadopsi model bisnis vendor lock-in yang komprehensif dengan enterprise support, mirip dengan platform seperti Vercel atau Firebase, menyediakan solusi end-to-end dari development hingga deployment Full transcript available on the episode page. ## EP 99: Ngobrolin Drama Trademark & Open Source - Ngobrolin WEB - Published: 2024-10-02 - URL: https://ngobrol.in/episodes/V1yh7lLkzbw-ngobrolin-drama-trademark-open-source-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=V1yh7lLkzbw Episode ini membahas drama perseteruan antara Matt Mullenweg (co-founder WordPress) dengan WP Engine, sebuah perusahaan hosting WordPress. Konflik berawal dari tuduhan penggunaan merek WordPress yang berlebihan oleh WP Engine di luar batas "fair usage" serta klaim ketidakkontribusian WP Engine terhadap proyek open source WordPress. Matt Mullenweg menuntut pembayaran lisensi 8% dari pendapatan WP Engine, yang ditolak oleh perusahaan tersebut. Perseteruan ini berkembang hingga pemblokiran akses layanan WordPress.org untuk pelanggan WP Engine. Episode juga menyentuh tema pentingnya memahami perbedaan antara "free" dan "open source", serta konsep vendor lock-in dalam ekosistem teknologi modern. Key points: - Sengketa bermula dari klaim Matt Mullenweg bahwa WP Engine telah melanggar aturan penggunaan merek dagang WordPress secara berlebihan (trademark infringement) - WP Engine dituduh menggunakan branding WordPress untuk keuntungan komersial besar tanpa memberikan kontribusi balik ke proyek open source WordPress - Matt Mullenweg menuntut pembayaran lisensi 8% dari gross income WP Engine sebagai ganti penggunaan nama WordPress - Pemblokiran akses WordPress.org untuk pelanggan WP Engine menimbulkan pertanyaan tentang kekuasaan kontrol atas infrastruktur open source - Episode menyoroti perbedaan penting antara sponsorship (marketing) dan kontribusi nyata (memberikan tenaga/sumber daya) ke proyek open source - Diskusi tentang konsep "5 for the Future" di mana perusahaan diharapkan mengalokasikan 5% sumber daya untuk kontribusi open source - Analogi menarik dibuat: open source seperti air gratis yang disediakan, namun ada biaya infrastruktur (pipa, pompa) yang harus ditanggung oleh pihak tertentu Full transcript available on the episode page. ## EP 98: Ngobrolin FOMO - Ngobrolin WEB - Published: 2024-09-25 - URL: https://ngobrol.in/episodes/NxIfTz_DN-0-ngobrolin-fomo-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=NxIfTz_DN-0 Episode ini membahas tentang fenomena FOMO (Fear of Missing Out) di kalangan developer teknologi, khususnya di dunia web development yang perubahannya sangat cepat. Diskusi dimulai dengan pengalaman tim menghadapi pertanyaan dari developer yang merasa tertinggal karena kantornya menggunakan teknologi yang sudah jadul, diluar tren yang sedang ramai dibahas. Topik berkembang menjadi diskusi yang lebih dalam tentang pertimbangan mengadopsi teknologi baru di tempat kerja, membedakan antara FOMO yang irasional dengan kebutuhan nyata untuk upgrade, dan konsep JOMO (Joy of Missing Out) sebagai kontrapoint. Episode juga membahas Lindy Effect yang menyatakan bahwa teknologi yang sudah bertahan lama cenderung akan terus bertahan relevan, serta tips untuk mengatasi FOMO seperti fokus pada 'learning how to learn' daripada menghafal detail setiap framework. Key points: - Pertimbangan utama dalam mengadopsi teknologi baru di tempat kerja termasuk ketersediaan talent, kemampuan maintainability, dan dampak terhadap biaya operasional - cost saving sering menjadi argumentasi paling kuat - Pentingnya membedakan antara FOMO irasional (hanya mengikuti trend untuk portfolio pribadi) dengan kebutuhan nyata untuk upgrade demi security patches dan performance improvements - "LinkedIn driven development" adalah praktik buruk ketika developer memaksakan teknologi baru hanya untuk portfolio lalu meninggalkan perusahaan, meninggalkan legacy code yang tidak bisa di-maintain - JOMO (Joy of Missing Out) sebagai kontrapoint FOMO - menemukan kebahagiaan dengan tidak mengikuti setiap trend teknologi dan fokus pada hal yang benar-benar relevan - Lindy Effect - semakin lama sebuah teknologi bertahan relevan, semakin besar kemungkinan ia akan terus bertahan di masa depan (contoh: jQuery, PHP yang 'mati' tetapi masih hidup) - Pesan bijaksana: 'It's same shit, just different brand' - pindah kerja atau teknologi tidak akan membuat masalah magically hilang, masalah yang dihadapi tetap sama - Kunci untuk mengatasi FOMO adalah fokus pada 'learning how to learn' - membangun kemampuan fundamental untuk beradaptasi dengan teknologi baru daripada menghafal detail setiap framework yang trending Full transcript available on the episode page. ## EP 97: 🗣️ Ngobrolin HTMX - Ngobrolin WEB - Published: 2024-09-18 - URL: https://ngobrol.in/episodes/ayiRFLsM-mM--ngobrolin-htmx-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=ayiRFLsM-mM Episode Ngobrolin ini membahas tentang HTMX, sebuah front-end framework yang unik dengan pendekatan HTML-first. Berbeda dengan framework modern seperti React atau Vue yang berbasis JavaScript, HTMX memperluas kemampuan HTML melalui atribut khusus dengan prefix HX-, memungkinkan elemen HTML mana pun untuk melakukan HTTP request (GET, POST, PATCH, PUT, DELETE) tanpa perlu menulis kode JavaScript tambahan. Konsep kuncinya adalah "HTML over the wire" di mana server mengirimkan HTML sebagai respons yang kemudian langsung di-swap ke DOM, bukan JSON seperti pada SPA modern. Para pembicara juga menunjukkan demo live coding menggunakan Hono sebagai backend server untuk mendemonstrasikan fitur-fitur HTMX seperti hx-get, hx-post, hx-target, hx-swap, hx-indicator, dan hx-boost untuk membuat Single Page Application sederhana. Key points: - HTMX adalah front-end framework yang menggunakan pendekatan HTML-first dengan menambahkan atribut HX- pada elemen HTML, memungkinkan interaktivitas tanpa menulis JavaScript client-side yang kompleks. - Konsep "HTML over the wire" - server mengirimkan HTML sebagai respons (bukan JSON), yang kemudian langsung dirender ke browser, mengurangi kompleksitas state management di sisi client. - Creator HTMX adalah Carson Gross, seorang dosen Software Engineering di Montana State University, yang juga menulis buku "Hypermedia Systems" yang tersedia gratis untuk dibaca online. - HTMX mendukung berbagai metode HTTP (GET, POST, PATCH, PUT, DELETE) dari elemen HTML apa saja, tidak hanya anchor dan form seperti HTML tradisional. - Fitur penting HTMX meliputi: hx-target untuk menentukan elemen yang akan diupdate, hx-swap untuk mengontrol cara swapping (innerHTML, outerHTML, beforebegin, afterend, dll), hx-indicator untuk loading state, dan hx-boost untuk progressive enhancement. - HTMX dapat dikombinasikan dengan berbagai backend (Go, PHP, Python, Node.js) dan framework lain seperti Astro untuk API routing yang baik, serta Alpine.js untuk state management client-side tambahan. - Untuk fitur real-time, HTMX mendukung polling, SSE (Server-Sent Events), dan WebSocket melalui extensions, menjadikannya alternatif yang menarik bagi developer full-stack atau backend yang ingin mengurangi kompleksitas frontend. Full transcript available on the episode page. ## EP 96: Diskusi Bebas - Ngobrolin WEB - Published: 2024-09-11 - URL: https://ngobrol.in/episodes/hsf-T40wRz0-diskusi-bebas-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=hsf-T40wRz0 Episode ini membahas tentang pengalaman tim dalam beralih dari StreamYard ke Vdo.Ninja, sebuah tools streaming open source berbasis teknologi WebRTC. Diskusi kemudian bergeser ke topik performa website dengan audit Core Web Vitals (INP, CLS, LCP) yang dilakukan di kantor. Topik utama yang dibahas adalah WCAG accessibility audit level 2.1 AA, termasuk aspek legal seperti ADA (Americans with Disabilities Act) di Amerika dan regulasi yang mulai mewajibkan aksesibilitas di Eropa. Episode juga membahas tantangan dalam menjalankan audit accessibility yang mencakup development, design, konten, dan QA. Key points: - Vdo.Ninja adalah alternatif open source untuk StreamYard yang menggunakan teknologi WebRTC, memberikan solusi streaming yang lebih fleksibel dan terjangkau - Core Web Vitals audit memerlukan perhatian pada tiga metrik utama: INP (Interaction to Next Paint), CLS (Cumulative Layout Shift), dan LCP (Largest Contentful Paint) - WCAG 2.1 AA adalah standar aksesibilitas yang menjadi fokus audit, meskipun tidak selalu wajib secara hukum tergantung yurisdiksi - ADA (Americans with Disabilities Act) di Amerika mencakup produk digital dan website, terutama untuk toko online dan fasilitas publik yang melayani banyak orang - Eropa telah mulai mewajibkan standar aksesibilitas WCAG untuk perusahaan enterprise, menunjukkan tren global menuju web yang lebih inklusif - Accessibility audit tidak hanya tentang development, tetapi juga mencakup design, konten, dan proses QA yang membutuhkan kombinasi automated testing dan manual review - Tantangan dalam audit accessibility meliputi struktur semantik (heading levels, sections), kontras warna, dan kebutuhan QA yang tidak sepenuhnya bisa di-automate Full transcript available on the episode page. ## EP 95: Ngobrolin Buku Halo Koding - Ngobrolin WEB - Published: 2024-09-04 - URL: https://ngobrol.in/episodes/fZtxF7gECuI-ngobrolin-buku-halo-koding-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=fZtxF7gECuI Episode ini membahas buku "Halo Coding" karya Hilman, sebuah buku yang membahas dunia pemrograman dari sisi manusianya, bukan dari sisi teknis. Hilman berbagi perjalanannya menulis buku selama masa pandemi, mulai dari motivasi awal yaitu menggabungkan passionnya terhadap menulis dan pemrograman, hingga proses self-publishing yang ia lakukan. Buku ini lahir dari keprihatinan Hilman melihat minimnya literatur tentang pemrograman yang membahas aspek non-teknis seperti mental model, tantangan psikologis, dan masalah keseharian yang dihadapi programmer. Episode ini juga menyinggung tentang imposter syndrome, strategi menentukan harga produk digital, dan pentingnya memulai hal-hal kecil (start small) dalam meraih tujuan besar. Key points: - Buku "Halo Coding" mengisi celah di pasar literatur pemrograman dengan membahas aspek non-teknis seperti mental model, tantangan psikologis, dan masalah keseharian programmer - Proses penulisan buku memakan waktu sekitar 3 bulan dengan menulis per artikel untuk kemudian dikompilasi, bukan menulis satu file besar dari awal - Hilman memilih jalur self-publishing karena ingin kebebasan konten tanpa harus melalui proses seleksi penerbit besar yang mungkin tidak sesuai dengan visinya - Buku ini awalnya ditulis tanpa permintaan pasar (bukan dari demand), namun ternyata membantu sebagai marketing tool untuk Sekolah Coding milik Hilman - Strategi penentuan harga premium didasarkan pada perhitungan bahwa investasi belajar coding jauh lebih kecil dibanding gaji pertama sebagai programmer, membuat produk sangat worth it - Tips untuk pemula yang ingin menulis buku: mulailah dari hal kecil seperti menulis artikel secara konsisten, gunakan sistem reward untuk diri sendiri, dan jangan takut dengan ketakutan atau imposter syndrome - Hilman berencana menerbitkan buku kedua berjudul "Halo Error" yang akan membahas tentang cara mengatasi masalah dan error dalam pemrograman Full transcript available on the episode page. ## EP 94: Ngobrolin Google I⧸O Connect China 2024! #WPUCAST x #NgobrolinWEB - Published: 2024-08-27 - URL: https://ngobrol.in/episodes/vQIu4ekqhvY-ngobrolin-google-io-connect-china-2024-wpucast-x-ngobrolinweb - YouTube: https://www.youtube.com/watch?v=vQIu4ekqhvY Episode ini membahas pengalaman para Google Developer Expert (GDE) dari Indonesia yang menghadiri Google I/O Connect China 2024 di Beijing. Mereka berbagi cerita tentang perjalanan, sesi-sesi teknis yang diikuti, demo interaktif menarik, serta kesempatan bertemu langsung dengan developer relation Google seperti Adam Argyle, Thomas Steiner, dan Jocelyn. Episode ini juga membahas perbedaan antara Google I/O, I/O Connect, dan I/O Extended, serta berbagai teknologi baru seperti AI di browser, View Transitions API, dan fitur terbaru Chrome DevTools. Key points: - Perbedaan Google I/O (event utama di California), I/O Connect (event regional yang diselenggarakan Google), dan I/O Extended (event lokal yang diselenggarakan komunitas GDG) - Demo interaktif menarik menggunakan AI seperti game sepak bola dan mini golf yang menganalisis gerakan dengan OpenCV, Gemini Pro, dan text-to-speech - Workshop View Transitions API oleh Adam Argyle yang menampilkan cara membuat e-commerce dengan UI modern menggunakan vanilla CSS dan JavaScript - Fitur baru Chrome DevTools yang dapat menjelaskan error menggunakan AI dan memanipulasi response untuk development - Web AI dan keuntungan menjalankan model AI langsung di browser menggunakan Cache API untuk menyimpan model sebagai binary - Pengalaman menjadi minoritas di negara dengan bahasa yang berbeda dan tantangan bahasa dalam mengikuti sesi teknis - Tips untuk menghadiri event internasional: persiapkan paspor minimal 6 bulan, kondisi fisik yang prima, dan siapkan pertanyaan untuk speakers Full transcript available on the episode page. ## EP 93: Ngobrolin Astro - Ngobrolin WEB - Published: 2024-08-20 - URL: https://ngobrol.in/episodes/89TRqTXfwrg-ngobrolin-astro-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=89TRqTXfwrg Episode ini membahas tentang Astro, sebuah meta framework JavaScript yang semakin populer di kalangan developer. Pembahasan dimulai dengan pengenalan Astro sebagai framework yang awalnya fokus pada content-driven websites dan static site generation (SSG), namun kini telah berkembang mendukung SSG, SSR, dan hybrid rendering. Host menjelaskan filosofi Astro yang mengedepankan HTML-first, zero JavaScript by default, dan pendekatan island architecture untuk interaktivitas yang terkontrol. Episode ini juga membahas fitur unggulan Astro seperti zero-lock (mendukung berbagai UI framework seperti React, Vue, Svelte, Preact, dan Solid), performa yang optimal dengan hydration minimal, serta adopsi web API modern seperti requestIdleCallback. Dibahas juga evolusi Astro dari penggabungan Snowpack ke Vite, integrasi Astro DB, fitur experimental Server Islands, serta proyek terkait seperti Starlight untuk dokumentasi. Perbandingan dengan framework lain seperti Next.js dan Gatsby juga menjadi topik menarik, menyoroti keunggulan Astro dalam performa dan pendekatan yang lebih web standard. Key points: - Astro adalah meta framework JavaScript yang awalnya fokus pada content-driven websites dan SSG, namun kini mendukung SSG, SSR, dan hybrid rendering secara penuh. - Filosofi utama Astro adalah HTML-first, zero JavaScript by default, dan hanya mengirim JavaScript ke browser ketika benar-benar diperlukan (opt-in interactivity). - Fitur zero-lock Astro memungkinkan penggunaan berbagai UI framework (React, Vue, Svelte, Preact, Solid) dalam satu proyek, bahkan dapat menggabungkan beberapa framework sekaligus. - Island Architecture Astro memisahkan komponen statis dan interaktif, di mana komponen interaktif dihydrate on-demand untuk performa yang lebih optimal. - Astro mengadopsi web API modern seperti requestIdleCallback untuk mengoptimalkan timing rendering komponen interaktif saat main thread idle. - Astro DB adalah database service built-in berbasis SQLite yang terintegrasi langsung dengan framework, mendukung kolaborasi dan maintenance yang lebih mudah. - Proyek Starlight adalah dokumentasi framework berbasis Astro yang bersaing dengan Docusaurus, dengan performa lebih baik dan ukuran bundle lebih kecil. - Astro memiliki komunitas yang aktif dengan dokumentasi berkualitas tinggi, guide untuk kontributor, dan pendekatan yang developer-friendly. - Fitur experimental Server Islands memungkinkan lazy server-side rendering terpisah dari halaman utama, memberikan fleksibilitas rendering hibrida. - Perbandingan performa Astro menunjukkan keunggulan signifikan dibanding Next.js, terutama pada metrik seperti First Contentful Paint (FCP) dan Total Blocking Time (TBT). - Astro menargetkan posisi di tengah antara vanilla HTML/CSS/JavaScript dan framework interaktif seperti Next.js/Nuxt/SvelteKit, memberikan solusi yang balance untuk berbagai use case. - Meskipun relatif muda dan user base masih didominasi front-end developer, Astro memiliki potensi migrasi yang mudah dari framework lain karena dukungan komponen UI yang ada. Full transcript available on the episode page. ## EP 92: Ngobrolin Big-O - Ngobrolin WEB - Published: 2024-07-31 - URL: https://ngobrol.in/episodes/NDQXIdPWaUQ-ngobrolin-big-o-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=NDQXIdPWaUQ Episode ini membahas tentang Big O Notation, sebuah konsep fundamental dalam ilmu komputer yang digunakan untuk mengukur kompleksitas performa kode. Diskusi dimulai dengan pengalaman tim mengenai pembelajaran Big O di kampus dan relevansinya dalam coding interview. Topik utama mencakup pengenalan berbagai jenis notasi kompleksitas seperti O(1), O(n), O(log n), O(n²), hingga O(n!), serta perbedaan antara Big O (worst case scenario), Omega (best case scenario), dan Theta notation. Episode juga menampilkan studi kasus nyata dari dunia kerja, termasuk kisah menarik tentang sistem penyimpanan 15.000 kunci mobil yang menerapkan konsep indexing secara fisik, serta contoh implementasi query optimization untuk WordPress block editor. Key points: - Big O Notation adalah representasi matematis untuk mengukur kompleksitas waktu atau ruang dari suatu algoritma, dengan fokus pada worst case scenario - Terdapat tiga jenis notasi kompleksitas: Big O (worst case), Omega (best case), dan Theta (ketika keduanya sama) - Jenis-jenis kompleksitas yang dibahas: O(1) konstan, O(n) linear, O(log n) logaritmik, O(n²) kuadratik, dan O(n!) eksponensial - Database indexing berperan penting dalam optimasi performa query, analog dengan sistem indeks pada buku atau yellow pages - Studi kasus nyata: sistem penyimpanan 15.000 kunci mobil menggunakan pengelompokan berdasarkan 2 digit pertama nomor plat untuk efisiensi pencarian - Contoh implementasi nyata: optimasi query WordPress block editor dengan teknik batching query menjadi hanya 2 query per halaman, menghindari nested loop yang berpotensi menyebabkan O(n³) atau lebih - Penting untuk berhati-hati dengan ORM yang mengorbankan performa untuk developer experience, serta disarankan untuk mengecek query hasil ORM dan mengoptimalkannya dengan raw query jika diperlukan Full transcript available on the episode page. ## EP 91: Ngobrolin State of JS Bagian 2 - Ngobrolin WEB - Published: 2024-07-17 - URL: https://ngobrol.in/episodes/aPv5UxXSPfM-ngobrolin-state-of-js-bagian-2-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=aPv5UxXSPfM Episode ini adalah kelanjutan pembahasan State of JavaScript 2023, berfokus pada meta framework, testing tools, dan build tools. Diskusi dimulai dengan pembahasan meta framework seperti Next.js yang mendominasi pasar, diikuti oleh Nuxt, dan Astro yang mengalami pertumbuhan signifikan. Astro menonjol dengan pendekatannya yang agnostik terhadap framework UI, mendukung React, Vue, Solid, hingga Vanilla JavaScript. Pembahasan juga mencakup sentimen pengguna terhadap berbagai meta framework, dengan Gatsby mengalami penurunan drastis dan Remix yang sempat hype namun memiliki kompleksitas tersendiri. Untuk testing tools, Vitest dan Playwright mengalami kenaikan popularitas yang signifikan menggeser Jest dan Cypress. Playwright mendapat pujian karena dokumentasinya yang di-revamp dan API yang mirip dengan Testing Library. Diskusi juga menyentuh build tools seperti Vite yang semakin dominan menggantikan Webpack, serta runtime baru seperti Bun yang memiliki bundler built-in bernama "Bundler". Episode ini juga menyoroti pain points utama dalam ekosistem JavaScript modern: excessive dominance dari framework tertentu (terutama React), terlalu banyak pilihan (choice overload), vendor lock-in concerns, dan dokumentasi yang kurang lengkap. Khusus untuk Next.js, isu utama adalah App Router instability, server components complexity, dan ketergantungan pada Vercel untuk deployment. Kesimpulan penting adalah pentingnya testing minimal untuk critical business scenarios, dan pentingnya memahami trade-off antara kemudahan penggunaan (magic) dengan kustomisasi. Key points: - Next.js mendominasi meta framework dengan pangsa pasar terbesar, namun memiliki pain points signifikan terkait App Router instability, server components complexity, dan vendor lock-in ke Vercel untuk fitur seperti image optimization - Astro menonjol sebagai meta framework dengan pertumbuhan dua kali lipat, menawarkan pendekatan framework-agnostic yang mendukung React, Vue, Solid, hingga Vanilla JavaScript, dengan tingkat kepuasan pengguna yang sangat tinggi - Gatsby mengalami penurunan drastis popularitasnya dari puncak kejayaan, sekarang lebih banyak pengguna yang memiliki experience negatif dibanding positif - Nuxt memiliki paradoks menarik: banyak yang sudah pernah mendengar namun tidak tertarik, namun pengguna existing memberikan tingkat kepuasan yang tinggi - kemungkinan besar karena dikaitkan dengan ekosistem Vue - Vitest menggeser Jest sebagai testing framework populer dengan keunggulan speed yang jauh lebih cepat, sedangkan Playwright naik signifikan menggeser Cypress untuk end-to-end testing berkat dokumentasi yang di-revamp dan API yang familiar dengan Testing Library - Bun muncul sebagai runtime baru dengan bundler built-in bernama 'Bundler', menawarkan alternatif untuk JavaScript development yang lebih terintegrasi - Deno Fresh dan SolidStart mulai mendapat perhatian sebagai meta framework pendatang baru dengan pendekatan yang berbeda - Pain points utama JavaScript modern: excessive dominance (React terlalu dominan), choice overload yang membingungkan developer baru, dokumentasi yang kurang (terutama Nuxt dan framework baru), terlalu banyak "magic" yang menyembunyikan konfigurasi, dan isu vendor lock-in - Testing penting minimal untuk critical business scenarios seperti login dan page loading, membantu mencegah regresi bug dan memberikan kepercayaan diri saat deploy - Diskusi juga menyentuh perbedaan antara framework yang battery-included (lengkap dengan berbagai fitur) versus framework yang minimalis, dan pentingnya menemukan keseimbangan antara kemudahan dan kustomisasi Full transcript available on the episode page. ## EP 90: Ngobrolin State of JavaScript - Ngobrolin WEB - Published: 2024-07-10 - URL: https://ngobrol.in/episodes/q2Xe49Du4no-ngobrolin-state-of-javascript-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=q2Xe49Du4no Episode ini membahas hasil State of JavaScript 2023 survey yang baru dirilis, memberikan gambaran komprehensif tentang landscape JavaScript dan web development. Host membahas demografi responden survei yang menunjukkan bias terhadap negara-negara Barat dan English-speaking countries, dengan mayoritas responden berusia 30-39 tahun (milenial) dan berpengalaman lebih dari 4 tahun. Menariknya, 90% responden adalah laki-laki, menunjukkan under-representation perempuan di industri. Pembahasan fitur JavaScript modern meliputi nullish coalescing operator yang banyak dipakai namun sering dilupakan namanya dalam interview, dynamic import untuk lazy loading, private fields untuk class-based development, dan top-level await yang banyak ditunggu. Browser APIs yang dibahas mencakup WebSocket, Geolocation, Web Animation, WebAssembly, dan modern APIs seperti Broadcast Channel dan Temporal untuk date handling. Pain points JavaScript yang dominan meliputi: static typing (JavaScript inherently dynamic sehingga TypeScript menjadi kebutuhan), module system fragmentation antara CJS dan ESM, date/time handling yang tricky (JavaScript month dimulai dari 0), dan slow progress pada type annotation proposal. Isu lainnya adalah too many frameworks dan tools yang membuat developer kebingungan (choice overload), browser support inconsistency (terutama Safari), dan performance issues. Untuk libraries, Webpack menunjukkan grafik fall dari grace - sangat populer di 2017-2020 namun sekarang lebih banyak experience negatif. Vite sebaliknya, dengan tingkat kepuasan sangat tinggi. TypeScript Compiler menempati posisi baik dengan 43% experience positif. Frontend framework landscape masih didominasi React, Vue, dan Angular, dengan Svelte dan Solid.js mulai mendapat traction namun penggunaan di production masih terbatas. Key points: - State of JS 2023 survey menunjukkan demografi responden yang 90% laki-laki, didominasi milenial (usia 30-39), dengan experience level 4-6 tahun sebagai mayoritas, dan bias terhadap negara Barat/English-speaking countries - JavaScript modern features yang paling banyak dipakai: nullish coalescing operator (??), logical assignment operators (??=), dynamic import untuk lazy loading, array methods baru (toSorted, toReversed, with, findLast), dan top-level await yang sangat ditunggu - Browser APIs yang dibahas meliputi WebSocket untuk real-time communication, Geolocation, Web Animation API, WebAssembly untuk performa tinggi, dan modern APIs seperti Broadcast Channel untuk antar-tab communication dan Temporal API untuk date handling yang lebih baik - Pain points JavaScript utama: static typing (butuh TypeScript karena JavaScript inherently dynamic), ESM vs CJS fragmentation yang menyebabkan compatibility issues, date/time handling yang tricky (month index mulai dari 0), dan slow progress pada TC39 proposals - Tooling issues: too many frameworks dan tools menyebabkan choice overload untuk developer baru, browser support inconsistency (Safari sering tertinggal), dan documentation quality yang bervariasi - Webpack menunjukkan fall dari grace - sangat populer 2017-2020 namun sekarang 48% pengguna memiliki experience negatif, sedangkan Vite memiliki tingkat kepuasan sangat tinggi dan semakin menggeser Webpack - TypeScript Compiler memiliki 43% experience positif, namun 35% responden mengaku tidak pernah menggunakannya (mungkin tidak aware bahwa project mereka menggunakan TSC di bawah hood) - Frontend framework landscape: React masih dominan dengan stabilization, Vue mengalami growth moderat, Angular secara konsisten turun, Svelte dan Solid.js mulai mendapat traction namun penggunaan production masih terbatas karena ekosistem job market - Security concerns muncul terkait ketergantungan pada banyak external packages dan libraries, serta poor documentation quality untuk beberapa teknologi - Safari mendapat sentimen negatif signifikan terkait ad blocking controversy dan keterlambatan mengadopsi web standards modern dibandingkan Chrome dan Firefox Full transcript available on the episode page. ## EP 89: Ngobrolin Elixir - Ngobrolin WEB - Published: 2024-07-03 - URL: https://ngobrol.in/episodes/vufuDf7MrmA-ngobrolin-elixir-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=vufuDf7MrmA Episode ini membahas tentang Elixir, bahasa pemrograman fungsional yang berjalan di BEAM (Erlang Virtual Machine), bersama tamu spesial Alan Weimah. Diskusi dimulai dengan latar belakang Alan yang berpindah dari Ruby ke Elixir karena ketertarikannya pada pemrosesan multi-core dan concurrent programming. Topik utama meliputi perbedaan antara concurrency dan parallelism, konsep green thread, keunggulan model pemrosesan Elixir yang menggunakan copy of data untuk menghindari mutex dan locking, serta perbedaan mindset antara OOP dan functional programming. Alan juga menjelaskan tentang OTP (Open Telecom Platform), Phoenix framework, Phoenix LiveView untuk real-time web applications, serta berbagai use case yang cocok untuk Elixir seperti aplikasi web, sistem telekomunikasi, dan aplikasi real-time. Key points: - Elixir adalah bahasa pemrograman fungsional dinamis yang berjalan di atas BEAM (Erlang Virtual Machine) dengan keunggulan pada concurrent dan parallel processing menggunakan konsep green thread yang sangat ringan (sekitar 1 kilobyte per proses) - Model pemrosesan Elixir menggunakan copy of data antar proses sehingga tidak memerlukan mutex atau locking, berbeda dengan pendekatan shared memory pada bahasa lain yang rentan terhadap race conditions - Perbedaan mindset antara OOP dan functional programming: OOP fokus pada methods di dalam object, sementara functional programming fokus pada transformasi data melalui pipeline dengan pipe operator - OTP (Open Telecom Platform) adalah koleksi library pattern yang telah teruji selama 30 tahun, mencakup supervisor untuk monitoring proses, GenServer untuk background processes, dan Mnesia untuk database - Phoenix framework dengan LiveView memungkinkan pembuatan real-time web applications yang sangat efisien menggunakan WebSocket dan hanya mengirimkan perubahan HTML (diff) ke klien - Elixir mampu menskalakan aplikasi secara vertikal (menambah resource pada satu mesin) maupun horizontal (menambah lebih banyak mesin dengan networking built-in) - Beberapa perusahaan besar telah berhasil mengurangi penggunaan server secara drastis dengan bermigrasi ke Elixir, contoh yang dibahas adalah Bleacher Report yang mengurangi dari 120+ server menjadi hanya 5 server Full transcript available on the episode page. ## EP 88: Ngobrolin Layout Email - Ngobrolin WEB - Published: 2024-06-26 - URL: https://ngobrol.in/episodes/pCUea-03ZbQ-ngobrolin-layout-email-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=pCUea-03ZbQ Episode Ngobrolin WEB ini membahas tantangan dan kompleksitas dalam membuat email template HTML. Topik utama meliputi perbedaan antara HTML untuk web dan HTML untuk email, keterbatasan CSS di berbagai email client, serta berbagai tools dan framework yang dapat membantu developer dalam membuat email template yang responsif dan konsisten di berbagai platform. Key points: - Email dapat dikategorikan menjadi dua jenis: email transaksional (lupa password, registrasi, invoice) yang dikirim sekali per transaksi, dan email marketing/newsletter yang dikirim secara berkala dengan personalisasi konten. - HTML untuk email memiliki keterbatasan signifikan dibandingkan HTML web: CSS harus inline, tidak bisa menggunakan external stylesheet atau script tags, media query sering di-strip, dan layout harus menggunakan table bukan flexbox atau grid. - Berbagai email client (Gmail, Outlook, Apple Mail, Thunderbird) memiliki engine rendering yang berbeda-beda dengan dukungan CSS yang tidak konsisten, membuat pengujian lintas platform menjadi sangat penting namun sulit. - Foundation for Emails (sebelumnya Ink), MJML, dan React Email adalah beberapa framework yang membantu menyederhanakan pembuatan email template dengan mengkompile syntax modern ke HTML table-based yang compatible. - Tantangan lain termasuk dukungan dark mode yang terbatas, gambar yang terblokir oleh beberapa client untuk keamanan, dan kebutuhan link unsubscribe yang wajib untuk menghindari flagging sebagai spam. - Tools untuk testing email seperti Litmus, Mailtrap, dan Put menyediakan cara untuk mempreview email di berbagai client, namun seringkali berbayar karena kompleksitas emulasi berbagai email client. - VML (Vector Markup Language) kadang digunakan untuk conditional rendering khusus di Outlook, terutama untuk background images, meskipun ini adalah teknologi yang sudah usang dan sulit dikelola. Full transcript available on the episode page. ## EP 87: Ngobrolin Safari - Ngobrolin WEB - Published: 2024-06-19 - URL: https://ngobrol.in/episodes/ZrMsScX7sh0-ngobrolin-safari-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=ZrMsScX7sh0 Episode ini membahas tentang sejarah dan perkembangan browser, khususnya WebKit dan Safari. Diskusi dimulai dengan fenomena browser war yang semakin mengerucut ke sedikit engine saja - Chromium, Gecko (Firefox), dan WebKit. Tim narasumber menjelaskan sejarah panjang WebKit yang berasal dari KHTML dan KJS milik KDE, kemudian diforking oleh Apple menjadi Safari dan open source sebagai WebKit. Google kemudian menggunakan WebKit sebelum akhirnya membuat Blink engine sendiri. Episode ini juga membahas bagaimana Apple dulu memonopoli browser di iOS dengan memaksa semua browser menggunakan engine WebKit, namun kini aturan tersebut mulai longgar di Eropa. Topik utama adalah Safari 18 yang menunjukkan peningkatan signifikan dengan banyak fitur CSS baru seperti View Transitions API, Style Query, animasi display, dan Content Visibility. Terungkap juga bahwa Jen Simmons, mantan Mozilla Firefox developer, kini bergabung dengan Apple yang menjelaskan mengapa Safari mulai mengejar ketertinggalan CSS-nya. Key points: - Browser landscape semakin mengerucut ke tiga engine utama: Chromium (Chrome, Edge, Opera), Gecko (Firefox), dan WebKit (Safari), meskipun ada browser alternatif berbasis WebKit seperti Orion dan Sigma OS - WebKit memiliki sejarah panjang dari KHTML dan KJS milik KDE, diforking oleh Apple tahun 2000-an menjadi Safari, lalu open source sebagai WebKit dengan komponen WebCore dan JavaScriptCore - Google Chrome awalnya menggunakan WebKit sebelum membuat fork sendiri bernama Blink pada 2013, sementara JavaScriptCore kembali digunakan oleh runtime JavaScript modern seperti Bun - Apple dulu memonopoli browser di iOS dengan memaksa semua browser menggunakan engine WebKit melalui SDK restrictions, namun aturan ini mulai dilonggarkan di Eropa - Safari 18 menunjukkan peningkatan signifikan dengan dukungan View Transitions API, Style Query, animasi display, Flexbox alignment fixes, Content Visibility, dan URL.parse API - Jen Simmons, mantan developer Firefox yang terkenal dengan kontribusi CSS-nya, kini bergabung dengan Apple sebagai Safari dan WebKit evangelist, menjelaskan transformasi Safari - Browser alternatif berbasis WebKit seperti Orion dan Sigma OS mulai bermunculan, menawarkan fitur unik seperti ad blocker bawaan, workspace management, dan dukungan ekstensi Firefox maupun Chrome Full transcript available on the episode page. ## EP 86: Ngobrolin WebSocket - Ngobrolin WEB - Published: 2024-06-12 - URL: https://ngobrol.in/episodes/aedr75hKoZ0-ngobrolin-websocket-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=aedr75hKoZ0 Episode ini membahas teknologi real-time communication di web, dengan fokus utama pada WebSocket. Host menjelaskan perbedaan antara HTTP request-response konvensional dengan WebSocket yang memungkinkan koneksi terus-menerus (persistent connection) antara klien dan server. Episode ini mengupas sejarah singkat munculnya WebSocket sebagai solusi atas keterbatasan HTTP untuk komunikasi dua arah secara real-time, serta membahas alternatif seperti polling, long polling, dan COMET yang pernah digunakan sebelum WebSocket menjadi standar. Selain WebSocket, episode ini juga membahas Server-Sent Events (SSE) sebagai alternatif yang lebih sederhana untuk use case satu arah (server-to-client) serta WebTransport sebagai teknologi terbaru yang menjanjikan. Diskusi juga menyentuh implementasi WebSocket di berbagai framework seperti Ruby on Rails (Action Cable, Hotwire) dan Laravel (Laravel Echo, Livewire), tantangan scaling koneksi WebSocket untuk jumlah pengguna besar, serta perbedaan WebSocket dengan teknologi lain seperti WebRTC yang bersifat peer-to-peer. Key points: - WebSocket memungkinkan komunikasi bidireksional dengan latency rendah - Koneksi tetap terbuka (persistent connection) antara klien dan server, memungkinkan data dikirim dua arah secara real-time tanpa perlu request-response berulang seperti HTTP biasa. - Server-Sent Events (SSE) sebagai alternatif yang lebih sederhana - SSE hanya mengizinkan server mengirim event ke klien (satu arah), lebih mudah diimplementasikan, dan kompatibel dengan infrastruktur yang tidak mendukung WebSocket seperti di belakang CDN. - gRPC menggunakan HTTP/2 untuk komunikasi antar microservice - Framework dari Google yang mengirim data dalam format binary (protobuf) dengan performa tinggi, awalnya dirancang untuk komunikasi server-to-server, bukan browser-to-server. - WebTransport adalah teknologi baru yang masih dalam pengembangan - Menawarkan API yang lebih user-friendly, mendukung UDP (datagram) dan TCP (stream), namun belum didukung oleh semua browser dan masih berstatus limited availability. - Masalah utama WebSocket adalah skalabilitas dan kompatibilitas server - Setiap klien membutuhkan koneksi persistent yang terus terbuka, membuat scaling lebih sulit, dan tidak semua hosting/CDN mendukung WebSocket. - Socket.io menyediakan abstraksi dengan fallback mechanism - Library yang secara otomatis memilih teknologi terbaik yang tersedia (WebSocket, HTTP long polling, atau lainnya) dan menangani reconnection otomatis ketika koneksi terputus. - Hotwire dan Livewire merender di server, mengirim HTML melalui WebSocket - Pendekatan HTML over the wire di mana hanya bagian yang berubah yang dikirimkan melalui WebSocket, memungkinkan server-side rendering dengan pengalaman real-time. Full transcript available on the episode page. ## EP 85: Ngobrolin NextJS - Ngobrolin WEB - Published: 2024-06-05 - URL: https://ngobrol.in/episodes/upgl3jIWEqc-ngobrolin-nextjs-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=upgl3jIWEqc Episode Ngobrolin kali ini membahas update terbaru dari Next.js 14 beserta berbagai kontroversi dan perubahan signifikan yang dibawanya. Diskusi dimulai dengan keluhan para peserta mengenai kecepatan update Next.js yang dinilai terlalu cepat, seringkali mengadopsi fitur React yang masih bersifat experimental sebelum stabil, yang menyebabkan breaking changes dan API yang deprecated dalam beberapa major version. Para peserta berbagi pengalaman kurang menyenangkan saat mengupdate versi framework, terutama dalam lingkungan produksi. Topik utama yang dibahas mencakup pengenalan Turbopack sebagai pengganti webpack yang menjanjikan performa lebih baik, Server Actions yang memungkinkan pemanggilan fungsi server dari client components, dan Partial Prerendering (PPR) untuk mengoptimasi rendering konten statis dan dinamis dalam satu layout. Kontroversi terbesar dibahas adalah perilaku caching by default pada Next.js 14 yang dianggap berbahaya karena dapat menyebabkan unexpected behavior, sehingga pada versi 15 caching akan diubah menjadi opt-in setelah mendapat protes dari komunitas. Diskusi juga menyentuh perbandingan Next.js dengan framework lain seperti Remix, Astro, dan pendekatan tradisional seperti Laravel + Blade, serta tantangan dalam memilih teknologi yang stabil versus yang selalu mengikuti perkembangan terbaru. Key points: - Next.js 14 hadir dengan fitur-fitur utama seperti Turbopack (bundler baru), Server Actions, Partial Pre-rendering (PPR), dan peningkatan pada self-hosting sebagai respons terhadap developer yang bermigrasi ke OpenNext. - App Router mengubah paradigma dari Pages Router menjadi server first di mana semua komponen dianggap server-side secara default, dan hanya komponen dengan direktif 'use client' yang akan di-render di client. - Masalah utama Next.js adalah update yang sangat cepat dan sering mengubah atau meng-deprecated API, sehingga developer sering kesulitan untuk keep up-to-date dan menghadapi breaking changes. - Sistem caching di Next.js 14 masih caching by default yang bisa membingungkan, namun di Next.js 15 akan berubah menjadi opt-in caching sebagai respons terhadap feedback dari komunitas developer. - Turbopack diklaim lebih cepat hingga 96% dibanding webpack dan dalam status RC untuk production, namun banyak developer yang masih ragu untuk menggunakannya di lingkungan production karena masih eksperimental. - Partial Pre-rendering (PPR) memungkinkan kombinasi antara shell/static content dan dynamic content dalam satu halaman, mirip dengan konsep Island architecture dan App Shell pattern di PWA. - Diskusi juga mencakup alternatif framework seperti Remix, Astro, Hono, Fresh (Deno), dan Elysia JS sebagai pilihan yang lebih stabil, serta konsep modern monolith menggunakan Laravel + Inertia.js untuk developer PHP yang ingin UI modern tanpa kompleksitas full-stack JavaScript. Full transcript available on the episode page. ## EP 84: Mengintip Masa Depan Web AI: Apa yang Disiapkan Google? - Published: 2024-05-28 - URL: https://ngobrol.in/episodes/1w9mppcKs8M-mengintip-masa-depan-web-ai-apa-yang-disiapkan-google - YouTube: https://www.youtube.com/watch?v=1w9mppcKs8M Episode ini membahas update terbaru dari Google I/O 2024 dengan fokus utama pada Web AI atau on-device AI. Pembahasan dimulai dengan lanjutan dari episode sebelumnya yang membahas baseline, interrupt CSS, dan update web development lainnya. Namun, tema utama Google I/O dua tahun terakhir memang didominasi oleh AI, dengan Google yang terlihat mengejar ketertinggalan dari perusahaan lain melalui produk Gemini yang diintegrasikan ke berbagai lini produk mereka. Tiga topik utama yang dibahas secara mendalam adalah: (1) LLM inference di browser menggunakan teknologi WebAssembly dan WebGPU yang memungkinkan model seperti Gemma 2B berjalan langsung di perangkat user, (2) Visual Blocks, sebuah alat no-code untuk prototyping aplikasi AI dengan pendekatan drag-and-drop, dan (3) Transformers.js, library JavaScript yang mengkonversi model Python menjadi format yang dapat berjalan di browser. Episode ini juga menyinggung rencana Chrome untuk mengintegrasikan model AI secara built-in (disebut Gemini Nano) guna mengurangi kebutuhan download model yang besar—sebuah strategi menarik yang membedakan pendekatan Google dengan browser lain seperti Brave dan Arc yang masih mengandalkan server-side AI. Diskusi juga menyoroti pro dan kontra implementasi on-device AI, termasuk keuntungan seperti cost saving, latensi yang lebih rendah, dan privasi data yang lebih terjaga, di sisi kekurangan seperti beban download model yang besar (hingga 1-2GB) dan tuntutan perangkat yang mumpuni. Use case yang dianggap paling relevan untuk pendekatan ini adalah aplikasi dengan model spesifik seperti background removal, makeup tester, atau validasi KTP yang memprioritaskan privasi, dibandingkan aplikasi chat umum yang masih lebih efisien menggunakan server-side AI. Key points: - Tema Utama Google I/O 2024 adalah AI - Dua tahun terakhir, Google fokus besar pada pengembangan AI di semua lini produk dengan branding Gemini sebagai keluarga model yang mencakup berbagai variasi untuk use case berbeda (multimodal, code assistant, dll). - Arsitektur Web AI: Server-side vs Client-side - Ada dua pendekatan utama: cloud AI (proses di server, request-response) dan on-device AI (proses di browser menggunakan WebAssembly dan WebGPU). WebAssembly dan WebGPU menjadi teknologi kunci yang membuat AI bisa jalan di browser. - Keuntungan On-Device AI: Cost Saving, Latensi, dan Privasi - Tiga keuntungan utama: hemat biaya (tidak perlu kirim data ke server), latensi lebih rendah, dan privasi terjaga karena data tidak keluar dari device user. Ini sangat penting untuk aplikasi yang menangani data sensitif. - Kekurangan On-Device AI: Download Model & Beban Device - Kontra utama: user harus download model (bisa 1-2GB), dan memerlukan device yang mendukung WebGPU. Perlu profiling user dan fallback ke server-side jika device tidak mendukung. Use case yang justify download besar adalah aplikasi spesifik seperti AR makeup, furniture placement, atau deteksi KTP. - Transformers.js: Library JavaScript untuk Machine Learning di Browser - Library yang memungkinkan model Python (PyTorch/TensorFlow) dijalankan di JavaScript. Mendukung berbagai task seperti sentiment analysis, object detection, sketch recognition, dll. Menjadi foundation untuk tools seperti Visual Blocks. - Visual Blocks: No-Code/Low Code untuk Prototyping AI - Tools berbasis drag-and-drop untuk bikin pipeline AI dengan visual interface. Memudahkan prototyping tanpa coding langsung, cocok untuk demonstrasi cara kerja model AI dengan berbagai use case. - Chrome akan Include Built-in On-Device AI (Gemini Nano) - Chrome berencana menyertakan model AI langsung di browser, mirip konsep Docker layer. Use case utama: translation, summarization, code assistant. Ini akan mengurangi ukuran download karena sebagian model sudah ada di browser, dan bisa digunakan untuk aplikasi offline. Full transcript available on the episode page. ## EP 83: Inovasi Web dari Google I/O 2024 - Ngobrolin WEB - Published: 2024-05-22 - URL: https://ngobrol.in/episodes/Rbs_UFZdUT8-inovasi-web-dari-google-io-2024-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=Rbs_UFZdUT8 Episode ini membahas highlight dari Google I/O 2024 dengan fokus pada teknologi web. Topik utama yang dibahas termasuk inisiatif baseline yang kini memiliki dua label: newly available untuk fitur yang baru didukung oleh dua versi browser terbaru, dan widely available untuk fitur yang telah stabil selama 30 bulan. Episode ini juga menyoroti dashboard baru yang lebih user-friendly untuk mengecek kompatibilitas fitur web, serta data dari RUM (Real User Monitoring) yang menunjukkan persentase pengguna nyata yang dapat mengakses fitur-fitur tertentu. Selain itu, episode ini membawa pembaruan signifikan di Chrome DevTools yang kini terintegrasi dengan AI untuk membantu developer memahami error console secara lebih baik, serta kemajuan WebGPU yang memungkinkan menjalankan model bahasa besar (LLM) seperti Gemma dan Mistral langsung di browser tanpa mengirim data ke server. Pembahasan juga mencakup update CSS/UI seperti nesting, view transitions untuk multi-page, dan speculation rules untuk pre-rendering, memberikan gambaran komprehensif tentang perkembangan teknologi web yang ditampilkan di Google I/O tahun ini. Key points: - Inisiatif Baseline ditingkatkan - Tahun ini ada penambahan label newly available dan widely available untuk membedakan fitur yang baru masuk baseline (didukung 2 browser stabil terbaru) dengan fitur yang sudah benar-benar aman digunakan (30 bulan setelah newly available). Memudahkan tim menetapkan standar seperti baseline 2023 atau baseline 2024 untuk proyek. - CSS Nesting dan Color Mix masuk Baseline - CSS nesting sekarang sudah didukung semua browser major, mengurangi ketergantungan pada preprocessor seperti SASS. Color mix memungkinkan pencampuran warna dengan bahasa yang human-friendly (misal: color-mix(in srgb, plum 40%, pink)). - WebGPU untuk menjalankan LLM di browser - Model AI seperti Gemma dan Mistral sekarang bisa dijalankan langsung di browser menggunakan WebGPU tanpa mengirim data ke server, menjanjikan privasi lebih baik dan kemampuan offline processing. - Gemini AI di Chrome DevTools - Chrome 126+ memiliki fitur AI untuk menjelaskan error message dan warning di console secara langsung, membantu developer memahami error beserta solusinya tanpa perlu copy-paste ke chatbot lain. - View Transitions API untuk Multi-Page - Fitur yang memungkinkan transisi halus antar halaman website, sebelumnya hanya untuk SPA (Single Page Application) sekarang sudah diperluas untuk multi-page navigation. - Fitur CSS lain yang masuk Baseline - Termasuk :has() selector, container queries, dan berbagai fitur CSS lain yang sebelumnya eksperimental sekarang sudah widely available, secara perlahan mengurangi peran preprocessor CSS. - Web Platform Test Dashboard baru - Dashboard yang lebih mudah digunakan untuk developer mengecek dukungan fitur browser dan status interop project, memudahkan filtering berdasarkan tahun baseline. Full transcript available on the episode page. ## EP 82: Ngobrolin Web API Baru - Ngobrolin WEB - Published: 2024-05-14 - URL: https://ngobrol.in/episodes/32B5A4eX_aw-ngobrolin-web-api-baru-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=32B5A4eX_aw Episode ini membahas berbagai Web API baru yang sedang trending atau akan menjadi tren di tahun 2024. Diskusi dimulai dengan penjelasan tentang apa itu Web API—bukan REST API melainkan API yang disediakan oleh browser seperti Storage API, Performance API, dan Observer API yang berlandaskan pada spesifikasi teknis. Beberapa API yang dibahas meliputi View Transition API yang kini sudah mencapai level 1 (client-side) dan sedang menuju level 2 (server-side), Popover API yang kini telah menjadi baseline dan bisa digunakan tanpa JavaScript murni untuk membuat tooltip atau toast non-modal, serta Web Vitals 4.0 yang menambahkan metrik INP (Interaction to Next Paint) sebagai pengganti First Input Delay. Selain itu, episode juga menyinggung proposal TypeScript type annotations untuk JavaScript yang masih dalam tahap perdebatan (stage 1) dan kontroversial karena berpotensi mengubah cara kerja JavaScript secara drastis. Speculation Rules API juga dibahas sebagai fitur baru yang memungkinkan browser untuk melakukan prefetch dan prerender secara cerdas berdasarkan perilaku pengguna, yang sangat relevan dengan tren kembalinya Multi-Page Application (MPA) dengan adanya server-side rendering. Diskusi diakhiri dengan JSON module import yang kini berstatus stage 3, memungkinkan import file JSON langsung tanpa bundler, serta setHTML API sebagai alternatif innerHTML untuk web components. Key points: - View Transition API Level 2 - Memungkinkan transisi antar halaman (MPA) tanpa client-side routing, membuat website multi-page terasa secepat single-page application. - Popover API - API native browser untuk elemen pop-up non-modal (tooltip, toast, menu) tanpa perlu library tambahan, sudah masuk baseline 2023 dan didukung semua browser modern. - Web Vitals 4.0 - Library terbaru untuk mengukur Core Web Vitals dengan dukungan INP (Interaction to Next Paint) yang menggantikan First Input Delay. - Speculation Rules API - API baru untuk mengontrol perilaku prefetch dan prerender berdasarkan prediksi browser, sangat berguna untuk Multi-Page Application. - JSON Modules - Memungkinkan import file JSON langsung tanpa bundler atau plugin tambahan, sudah mencapai Stage 3 dan hampir resmi menjadi standar. - setHTML API - Pengganti innerHTML untuk custom elements/web components dengan fitur sanitasi bawaan untuk keamanan. - Type Annotations Proposal - Usulan kontroversial untuk menambahkan type annotation langsung di JavaScript tanpa transpilasi, masih tahap Stage 1 dan menjadi perdebatan di komunitas. Full transcript available on the episode page. ## EP 81: Ngobrol dan Diskusi Bebas - Ngobrolin WEB - Published: 2024-05-08 - URL: https://ngobrol.in/episodes/nGvDLYPcv1Q-ngobrol-dan-diskusi-bebas-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=nGvDLYPcv1Q Episode ini membahas topik-topik seputar dunia pengembangan teknologi dan karier. Diskusi dimulai dengan pembahasan mengenai isu efisiensi di tim Flutter Google, di mana para host menjelaskan bahwa hal ini bukan berarti Flutter akan mati, melainkan bagian dari strategi untuk mengalihkan fokus Google ke AI dan Cloud. Mereka menggunakan analogi dokter spesialis untuk menjelaskan konsep keahlian dan mengaitkannya dengan label Google Developer Expert yang mereka miliki. Selain itu, dibahas juga fenomena serupa yang terjadi di tim React Facebook, di mana para pengembang yang di-layoff kemudian dipekerjakan oleh perusahaan lain seperti Next.js. Percakapan kemudian meluas ke topik proses rekrutmen dan interview di perusahaan teknologi. Para host berbagi pengalaman tentang ketidakadilan sistem interview yang menilai seseorang hanya dalam waktu 1-2 jam, termasuk cerita tentang pembuat Homebrew yang ditolak Google meskipun produknya digunakan oleh banyak developer Google. Mereka membahas berbagai metode seleksi mulai dari whiteboard interview algorithm, LeetCode-style tests, hingga psikotes, serta pentingnya portofolio open source dan referensi sebagai alternatif yang lebih fair. Di bagian akhir, diskusi menyentuh topik zero downtime deployment dan kenyataan bahwa outage pasti akan terjadi seiring dengan kompleksitas infrastruktur. Key points: - Google Developer Expert (GDE) bukan berarti tahu segalanya - Gelar expert justru menunjukkan spesialisasi di bidang tertentu, seperti analogi dokter spesialis yang ahli di satu area tapi belum tentu mengerti hal-hal di luar keahliannya. - Kabar efisiensi tim Flutter di Google - Google melakukan efisiensi developer di tim Flutter, namun ini bukan berarti Flutter dibunuh. Lebih kepada strategi sharing cost dengan komunitas dan mengalihkan fokus ke AI. - Dua jalur karir developer: Individual Contributor (IC) dan Managerial - Tidak harus jadi manajer untuk naik level atau gaji. Jalur IC (Staff Engineer, Principal Engineer, Distinguished Engineer) memiliki level dan gaji yang setara dengan jalur manajerial (Engineering Manager, VP Engineering). - Soft skill sama pentingnya dengan hard skill - Kemampuan komunikasi, conflict resolution, dan kontribusi open source semakin banyak dinilai oleh perusahaan, bahkan ada yang tidak mempedulikan ijazah sama sekali. - Perkembangan teknologi mengubah cara belajar developer - Dari dulu belajar lewat buku dan majalah, kemudian googling, sekarang beralih ke prompting dengan AI. Namun tetap perlu validasi dan mentor karena solusi AI tidak selalu benar. - Problem solving adalah skill fundamental yang tak tergantikan - Terlepas dari kemudahan framework dan AI, kemampuan menyelesaikan masalah, kalkulasi risiko, dan pengambilan keputusan berdasarkan konteks (it depends) tetap menjadi pembeda level developer. - Kontribusi open source tidak selalu tentang kode - Bisa berupa translasi, dokumentasi, perbaikan README, atau onboarding guide. Hal ini jadi nilai tambah saat melamar kerja karena bukti kerja nyata yang bisa dilihat. Full transcript available on the episode page. ## EP 80: 🔥 UI Component Library: Pakai atau Gak?! Untung Rugi, Tips Memilih, & Pengalaman Developer! - Published: 2024-05-01 - URL: https://ngobrol.in/episodes/fnKxblQw57c--ui-component-library-pakai-atau-gak-untung-rugi-tips-memilih-pengalaman-developer - YouTube: https://www.youtube.com/watch?v=fnKxblQw57c Episode ini membahas secara mendalam tentang UI Component Library, mulai dari definisi, perbedaan dengan CSS framework dan design system, hingga berbagai opsi yang tersedia saat ini seperti Material UI, Bootstrap, Carbon Design System, Radix UI, hingga modern solution seperti Shadcn UI dan DC UI. Diskusi juga mencakup konsep headless UI yang semakin populer karena memberikan fleksibilitas lebih dalam styling sambil tetap menjaga aksesibilitas, serta evolusi tren dari library yang opinionated dan kaku menuju pendekatan yang lebih fleksibel dan mudah dikustomisasi. Selain membahas kelebihan dan kekurangan penggunaan UI component library—mulai dari percepatan development, konsistensi visual, hingga risiko terkunci pada satu ekosistem dan tampilan yang terlihat pasaran—episode ini juga menyinggung topik terkait seperti Open UI initiative dari W3C yang berupaya memetakan pola komponen UI secara standar, Web Component sebagai solusi cross-framework, hingga sedikit diskusi tentang Deno dan JSR sebagai alternatif runtime JavaScript modern. Key points: - Evolusi UI Component Library dari Zaman Bootstrap ke Tailwind - UI component library telah berkembang dari library yang sangat ketat dan sulit dikustomisasi (seperti Bootstrap) menjadi lebih fleksibel (Tailwind). Bootstrap dulunya sering membuat website terlihat pasaran karena desainnya mirip satu sama lain, hanya berbeda warna. Tailwind menawarkan fleksibilitas kustomisasi yang jauh lebih tinggi, meskipun dengan learning curve yang lebih curam. - Perbedaan Antara Design System, UI Component Library, dan Headless UI - Design system adalah konsep yang paling luas dan mencakup seluruh pendekatan desain (contoh: Material Design, Carbon Design System). UI Component Library adalah kumpulan komponen yang siap pakai. Headless UI (seperti Radix UI) adalah generasi baru yang memberikan komponen tanpa styling, memungkinkan developer untuk men-styling sesuai kebutuhan sendiri sambil tetap mendapatkan aksesibilitas yang baik. - Kelebihan dan Kekurangan Menggunakan UI Component Library - Kelebihannya adalah menghemat waktu awal pengembangan dan memastikan konsistensi. Namun, kekurangannya meliputi learning curve, sulit untuk keluar dari ekosistem tersebut, dan risiko desain terlihat pasaran jika tidak dikustomisasi dengan baik. Semakin lama produk berkembang, semakin besar cost untuk mengubah komponen yang sudah banyak digunakan. - Shadcn sebagai Pendekatan Baru dalam Component Library - Shadcn bukanlah library tradisional dengan kode di node_modules, melainkan generator yang menyalin kode komponen langsung ke project kita. Ini memberikan fleksibilitas penuh untuk mengubah kode sesuai kebutuhan karena kodenya sudah berada di project kita sendiri. V0 menggunakan Shadcn untuk menghasilkan kode. - Carbon Design System oleh IBM sebagai Contoh Enterprise-Ready - Carbon Design System adalah salah satu contoh design system yang sangat lengkap, dibuat oleh IBM untuk penggunaan enterprise. Sistem ini mencakup dokumentasi yang detail, contoh implementasi untuk berbagai framework (React, Angular, Vue, dan Vanilla), dan fokus pada aksesibilitas. - Headless UI Fokus pada Aksesibilitas dan Kustomisasi - Headless UI library seperti Radix UI berfokus pada mengurus aspek teknis yang rumit seperti focus trapping untuk modal/dialog, memastikan aksesibilitas standar terpenuhi. Developer bebas men-styling komponen tersebut sesuai kebutuhan desain menggunakan Tailwind, CSS modules, atau metode styling lainnya. - Dukacita dan Harapan untuk Timnas Sepak Bola Indonesia - Di awal episode, pembicara mengungkapkan perasaan campur antara sedih dan bangga dengan pencapaian Timnas Indonesia yang berhasil mencapai semifinal untuk pertama kalinya. Mereka berharap Indonesia bisa memenangkan pertandingan perebutan juara tiga untuk lolos ke Olimpiade. Full transcript available on the episode page. ## EP 79: Ngobrolin Buku "Refactoring to Collections" - Ngobrolin WEB - Published: 2024-04-24 - URL: https://ngobrol.in/episodes/B_k1563IOz0-ngobrolin-buku-refactoring-to-collections-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=B_k1563IOz0 Episode ini membahas buku "Refactoring to Collections" karya Adam Wathan, seorang pengembang yang dikenal luas sebagai pencipta Tailwind CSS. Pembahasan diawali dengan latar belakang ketertarikan Ivan terhadap kode yang clean dan maintainable, di mana ia memiliki prinsip bahwa dalam tim bekerja, setiap orang harus dapat digantikan (everyone is replaceable) dan tidak boleh ada "superhero" yang bergantung pada satu orang saja. Buku ini menarik perhatian karena mengajarkan konsep menulis kode tanpa loop dan conditional statement yang berlebihan, mengarah ke gaya pemrograman yang lebih deklaratif daripada imperatif. Buku ini juga menonjol karena menggunakan contoh production code yang nyata, bukan sekadar contoh "Hello World" atau "Animal extends Dog" yang kurang praktikal. Selain membahas inti isi buku yang mencakup penggunaan higher-order function seperti map, filter, dan reduce untuk mengubah kode menjadi lebih bersih dan mudah dipelihara, episode ini juga membahas topik pembelajaran dari buku secara umum. Para pembicara dan audiens sepakat bahwa buku sangat cocok untuk topik-topik "evergreen" yang tidak cepat berubah seiring waktu, seperti konsep dan pola berpikir dalam pemrograman, berbeda dengan tutorial framework yang sering berubah setiap beberapa bulan. Episode ini ditutup dengan rekomendasi buku-buku lain yang menarik seperti "The Phoenix Project," buku-buku karya Adi Osman, serta "Halo Coding" karya Hilman, dengan harapan episode bedah buku ini dapat dilanjutkan secara rutin untuk meningkatkan literasi dan memberikan perspektif baru dalam pembelajaran pemrograman. Key points: - Refactoring ke Collection - Mengubah kode imperatif dengan loop dan conditional bertingkat menjadi pendekatan deklaratif menggunakan method collection seperti filter(), map(), dan reduce() membuat kode lebih mudah dibaca dan dimaintain. - Kode untuk Manusia - Menulis kode bukan hanya untuk mesin, tapi terutama untuk manusia (diri sendiri dan tim). Kode yang mudah dipahami mengurangi WTF per menit saat membaca dan mempermudah kolaborasi tim. - No If, No Loop - Prinsip Never Write Another Loop mengajarkan menghindari explicit for/while loop dan if-else bertingkat. Sebagai gantinya, gunakan higher-order function dan method chaining yang lebih ekspresif. - Everyone is Replaceable - Dalam tim kerja, tidak boleh ada superhero yang bergantung pada satu orang. Kode harus ditulis dengan standar yang memungkinkan siapapun untuk mengambil alih dan melanjutkan pekerjaan. - Make it Work, Make it Beautiful - Definition of done bukan hanya kode berjalan, tapi juga kode yang sudah rapi dan refactored. Proses: tulis imperatif dulu (make it work), lalu refactor menjadi deklaratif (make it beautiful). - Early Return dan Konsistensi - Teknik seperti early return, satu tipe data return, dan konsistensi code style membantu mengurangi kompleksitas kognitif saat membaca kode. - Menulis Kode Hanya 25% - Dari 100% waktu development, hanya 25% untuk menulis kode, 50% untuk berpikir/imajinasi, dan 25% untuk testing. Refactoring adalah langkah penting setelah kode berjalan. Full transcript available on the episode page. ## EP 78: Ngobrolin OOP di JS - Ngobrolin WEB - Published: 2024-04-17 - URL: https://ngobrol.in/episodes/SgILyFtQs5k-ngobrolin-oop-di-js-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=SgILyFtQs5k Episode ini membahas Object-Oriented Programming (OOP) di JavaScript secara mendalam, dimulai dari konsep dasar prototype, class, inheritance, hingga perbedaan antara paradigma OOP dan fungsional. Host Ivan yang sedang berada di Yunani dan pembicara lain membahas artikel dari Kensho.dot yang membandingkan penggunaan class dan function, termasuk kelebihan dan kekurangan masing-masing pendekatan. Diskusi juga menyentuh tantangan JavaScript yang sering disalahartikan karena sejarahnya yang dibuat dalam waktu singkat (10 hari) oleh Brendan Eich untuk keperluan sederhana di browser, namun kemudian berkembang menjadi bahasa yang digunakan di berbagai platform. Topik lain yang dibahas meliputi masalah `this` context yang sering membingungkan developer, penggunaan private properties dengan hashtag syntax, module pattern, serta perbandingan performa antara penggunaan class dan object literal. Episode ini juga menyinggung tentang masa depan JavaScript dan bahasa-bahasa yang meng-compile ke JavaScript seperti TypeScript, ReScript, dan PureScript, serta tantangan backward compatibility yang harus dipertahankan oleh JavaScript karena digunakan di berbagai browser. Key points: - JavaScript awalnya diciptakan oleh Brendan Eich dengan pengaruh bahasa Scheme (functional programming), namun dipaksa meniru sintaks Java untuk kepentingan marketing Netscape - JavaScript itu multi-paradigma - bisa functional, OOP, atau prosedural, bukan murni OOP seperti Java - OOP di JavaScript itu prototype-based, bukan class-based seperti Java atau C++ - Sebelum ES6 (2015), JavaScript belum memiliki keyword `class` - orang membuat kelas menggunakan function dan prototype - Keyword `class` di ES6 sebenarnya hanya syntactic sugar - di belakang layar tetap menggunakan prototype-based approach - Masalah umum di JavaScript OOP adalah penggunaan `this` yang konteksnya bisa berubah tergantung bagaimana fungsi dipanggil - JavaScript banyak memiliki keanehan karena harus menjaga backward compatibility - kode JavaScript zaman dulu harus tetap bisa jalan di browser modern Full transcript available on the episode page. ## EP 77: Ngobrolin Kontainer - Ngobrolin WEB - Published: 2024-04-09 - URL: https://ngobrol.in/episodes/mYBN0iKfWUA-ngobrolin-kontainer-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=mYBN0iKfWUA Episode Ngobrolin Web ini membahas teknologi containerization, khususnya Docker, sebagai solusi modern untuk masalah kompatibilitas dan dependency management yang telah menjadi tantangan sejak lama dalam pengembangan aplikasi. Diskusi dimulai dengan sejarah perkembangan environment development dari era XAMPP yang all-in-one, masalah versi yang berbeda-beda antar developer, hingga munculnya solusi version manager seperti NVM untuk Node.js. Para host menjelaskan evolusi dari virtual machine yang berat namun powerful, hingga lahirnya teknologi container yang lebih efisien dengan konsep layer-based dan image sharing. Diskusi mendalam mengurai perbedaan antara VM dan Container, di mana VM membutuhkan OS lengkap sementara container hanya membutuhkan library dan komponen yang spesifik, membuatnya jauh lebih ringan dan cepat. Episode ini juga membahas Docker Hub sebagai registry untuk berbagai image siap pakai, konsep image vs container, serta Docker Compose untuk mengelola multi-container application. Para host mendemonstrasikan penggunaan Portainer sebagai container management tool yang production-ready, serta membahas konsep Dev Container untuk development environment yang konsisten. Episode ini menutup dengan contoh praktis deployment Next.js tanpa terikat pada Vercel, menunjukkan fleksibilitas yang ditawarkan oleh Docker. Key points: - Docker adalah teknologi containerization yang menghilangkan masalah "it works on my machine" dengan konsistensi environment - Perbedaan utama VM dan Container: VM butuh OS lengkap sementara container hanya butuh library spesifik yang lebih efisien - Docker menggunakan sistem layer-based di mana layer yang sama bisa di-share antar container, menghemat storage dan build time - Docker Hub adalah registry berisi ribuan image siap pakai dari PHP, MySQL, Node.js, hingga kombinasi custom - Image adalah blueprint/template aplikasi sedangkan Container adalah instance yang sedang running dari image tersebut - Docker Compose memudahkan mengelola multi-container application dengan menentukan urutan start dan dependency antar service - Portainer adalah container management tool yang production-ready dengan UI untuk deploy dan monitor container - Dev Container memungkinkan development environment yang konsisten, bahkan bisa dijalankan di GitHub Codespace Full transcript available on the episode page. ## EP 76: Ngobrolin Cache - Ngobrolin WEB - Published: 2024-04-03 - URL: https://ngobrol.in/episodes/m7rsN2Wmb78-ngobrolin-cache-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=m7rsN2Wmb78 Episode ini membahas topik caching secara komprehensif mulai dari konsep dasar hingga implementasi praktis di berbagai layer aplikasi. Diskusi dimulai dengan analogi dompet dan penjelasan tentang sejarah caching dari hardware (L1, L2 cache) hingga implementasi di software. Pembahasan mencakup multi-layer caching yang mencakup DNS cache, client cache (browser), CDN caching, web server caching, application caching, hingga database query level caching. Episode juga menyinggung perubahan lisensi Redis dari BSD ke RSPL dan dampaknya terhadap industri, serta membahas strategi cache invalidation dan tantangan dalam mengelola cache di sisi client yang berada di luar kontrol developer. Episode lebih lanjut membahas berbagai strategi cache update untuk traffic tinggi seperti stale-while-revalidate, cache update melalui endpoint tersembunyi, dan penggunaan cron job untuk memperbarui cache secara berkala. Diskusi juga menyentuh konsep memoization di React (useMemo), opcode cache di PHP, dan perbandingan antara teori normalisasi database dengan praktek denormalisasi di dunia kerja yang lebih mengutamakan performa. Topik Big O notation dan time complexity juga dibahas dalam konteks memilih operasi Redis yang tepat untuk performa optimal. Key points: - Caching adalah metode menyimpan data sementara untuk membuat aplikasi lebih cepat dan service lebih ringan secara finansial - Multi-layer caching mencakup DNS cache, client cache (browser/local storage/session storage), CDN, web server, application, dan database query level - Redis sering digunakan untuk object level caching karena kecepatannya dan cocok untuk centralize session di lingkungan dengan multiple web servers - Cache invalidation di sisi client sulit dikontrol karena berada di luar kendali developer, memerlukan strategi seperti tombol reload atau service worker update - Strategi cache update untuk traffic tinggi meliputi stale-while-revalidate, endpoint tersembunyi untuk revalidation, dan cron job untuk update berkala - Opcode cache di PHP menyimpan kompilasi kode di memori untuk menghindari kompilasi ulang, membuat eksekusi PHP 8 jauh lebih cepat - Memoization di React (useMemo) adalah bentuk caching frontend yang mengingat hasil komputasi berdasarkan input untuk mencegah re-render yang tidak perlu - Denormalisasi di dunia kerja sering lebih dipilih daripada normalisasi murni karena storage sekarang lebih murah dan performa lebih prioritas Full transcript available on the episode page. ## EP 75: Ngobrolin Kerja Jarak Jauh - Ngobrolin WEB - Published: 2024-03-27 - URL: https://ngobrol.in/episodes/AtRclaIb4zE-ngobrolin-kerja-jarak-jauh-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=AtRclaIb4zE Episode Ngobrolin Web kali ini membahas secara mendalam tentang pekerjaan jarak jauh atau remote work, yang menjadi topik relevan terutama sejak pandemi. Diskusi dimulai dengan pengalaman pribadi para host yang telah bekerja remote sejak lama, bahkan sebelum pandemi, termasuk bekerja untuk perusahaan internasional seperti 10up dan Human Made. Para host berbagi cerita tentang bagaimana mereka memulai karier remote work, tantangan yang dihadapi seperti perbedaan timezone, bahasa, dan budaya, serta bagaimana mengatasi hambatan komunikasi dalam lingkungan kerja asynchronous. Diskusi juga menyinggung mitos-mitos seputar remote work, seperti anggapan bahwa WFH (Work From Home) sama dengan liburan, serta stigma negatif yang muncul setelah pandemi tentang remote worker yang dianggap malas atau melakukan double job. Para host menekankan pentingnya accountability, kemampuan komunikasi tertulis yang baik, dan over-communicate tanpa micromanage. Episode ini juga membahas tips untuk mendapatkan pekerjaan remote di perusahaan luar negeri melalui networking, kontribusi open source, dan menjadi aktif di komunitas teknologi. Key points: - Remote work telah menjadi new normal sejak pandemi, tetapi tidak semua profesi dan perusahaan cocok dengan sistem ini - Software developer memiliki privilege untuk bekerja remote karena pekerjaan bersifat konsultasi dan berbasis output - Tantangan utama remote work meliputi perbedaan timezone, bahasa, budaya, dan komunikasi asynchronous - Pentingnya mengatur ekspektasi dengan jelas, seperti jam kerja overlap dan waktu respons untuk komunikasi - Over-communicate berbeda dengan nagging atau micromanage, fokus pada memberikan konteks yang cukup - Accountability adalah kunci utama sukses dalam remote work karena tidak ada pengawasan langsung - Untuk mendapatkan pekerjaan remote di perusahaan luar negeri, networking dan kontribusi open source sangat penting - Double job atau triple job dapat menyebabkan burnout dan menciptakan stigma negatif untuk developer Indonesia - Perusahaan distributed seperti 10up dan Human Made memiliki budaya remote yang berbeda dengan perusahaan WFO yang terpaksa WFH - Trial period atau working together sebelum hire jauh lebih efektif untuk menilai compatibility daripada interview singkat Full transcript available on the episode page. ## EP 74: Ngobrolin Ekosistem Vue - Ngobrolin WEB - Published: 2024-03-20 - URL: https://ngobrol.in/episodes/kpyPIYuChU0-ngobrolin-ekosistem-vue-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=kpyPIYuChU0 Episode Ngobrolin ini menghadirkan Warad Wong Maneki, seorang Google Developer Expert (GDE) untuk Web dari Thailand yang berbagi pengalamannya tentang Vue.js dan ekosistem pengembangan web. Warad, yang merupakan co-founder di Wisesight (perusahaan analitik sosial dengan 260 karyawan) dan CTO di startup EV charger finder, membahas perjalanan kariernya selama 20 tahun di pengembangan web. Percakapan ini mengeksplorasi alasan di balik preferensi Warad terhadap Vue.js dibandingkan React, kelebihan dan kekurangan masing-masing framework, serta tantangan dalam komunitas Vue.js di Thailand. Diskusi juga mencakup topik-topik penting seperti Nuxt.js sebagai meta framework, manajemen state dengan Pinia, pengembangan aplikasi hybrid dengan Capacitor, dan masa depan Vue dengan fitur-fitur baru seperti Vapor mode. Warad juga berbagi wawasan tentang ekosistem teknologi Thailand, tantangan dalam menyelenggarakan meetups pasca-pandemi, serta perbedaan antara Options API dan Composition API dalam Vue 3. Key points: - Warad Wong Maneki adalah GDE Web kedua di Asia Tenggara dan pertama di Thailand dengan pengalaman 20 tahun di pengembangan web - Vue.js dipilih karena kesederhanaan dan pendekatannya yang mirip dengan AngularJS namun lebih ringan, terinspirasi dari preferensi penulisan template terpisah daripada JSX - Ekosistem Vue di Thailand memiliki komunitas yang lebih kecil dibandingkan React (64% React, 20% Vue, 15% Angular) dengan tantangan dalam menyelenggarakan meetups pasca-pandemi - Nuxt.js menyediakan banyak "magic" yang memudahkan pengembangan seperti auto-import, routing berbasis folder, dan manajemen state, namun memerlukan pemahaman tentang cara kerjanya - Pinia telah menggantikan Vuex sebagai library manajemen state resmi Vue dengan pendekatan yang lebih sederhana menggunakan methods daripada actions - Warad menggunakan kombinasi Vue.js dan Capacitor untuk membangun aplikasi yang dapat berjalan di berbagai platform (mobile, desktop, PWA) dengan satu codebase - Tantangan utama dalam ekosistem Vue adalah kompatibilitas antara Options API dan Composition API, serta ketersediaan library komponen yang lebih sedikit dibandingkan React - Vue 3 akan menghadirkan fitur baru seperti Vapor mode yang berpotensi menghilangkan virtual DOM untuk performa yang lebih baik, serta dukungan View Transitions API Full transcript available on the episode page. ## EP 73: Ngobrolin PHP - Ngobrolin WEB & @sandhikagalihWPU - Published: 2024-03-13 - URL: https://ngobrol.in/episodes/5P6heS1ZtPw-ngobrolin-php-ngobrolin-web-sandhikagalihwpu - YouTube: https://www.youtube.com/watch?v=5P6heS1ZtPw Episode Ngobrolin Web ini membahas perjalanan panjang PHP dari bahasa scripting sederhana hingga menjadi fondasi ekosistem modern yang powerful. Diskusi dimulai dengan konteks tentang bagaimana PHP sempat diprediksi akan mati namun justru terus berkembang dan bertahan, bahkan mengalami kebangkitan berkat framework Laravel yang revolusioner. Host membahas evolusi PHP dari era awal dengan XAMPP, kehadiran framework seperti CodeIgniter dan Zend Framework, hingga transformasi besar yang dibawa oleh Laravel yang mengubah cara pandang industri terhadap PHP. Diskusi juga menyinggung peluncuran PHP 8.2 dan Laravel 11 yang baru, dengan fitur-fitur modern seperti readonly class, typed properties, dan improvement signifikan pada type system. Para host mengulas bagaimana ekosistem Laravel yang matang dengan paket-paket first-party dan third-party berkualitas telah menciptakan platform development yang enterprise-ready. Episode ini menutup dengan refleksi tentang pentingnya tidak terlalu fanatik pada satu teknologi, mengingat dinamika cepat dunia programming dan bagaimana konflik internal bisa mempengaruhi masa depan sebuah bahasa atau framework. Key points: - PHP sering diprediksi akan mati namun terus bertahan seperti "kecoa" dan mengalami kebangkitan berkat framework modern - Laravel memberikan dampak revolusioner yang mengangkat kembali popularitas PHP yang sempat menurun - PHP 8.2 membawa fitur-fitur modern seperti readonly class, typed properties, dan improvement pada type system - Laravel 11 diluncurkan dengan struktur folder yang lebih streamlines dan fitur-fitur baru yang powerful - Ekosistem Laravel yang mature dengan paket first-party dan third-party berkualitas membuatnya enterprise-ready - Sejarah PHP dimulai sebagai scripting language yang bisa di-embed ke HTML, dijalankan dengan Apache dan tools seperti XAMPP - Pentingnya tidak terlalu fanatik pada satu teknologi karena dunia programming sangat dinamis - Konflik internal dalam pengembang bahasa atau framework bisa berdampak pada masa depan teknologi tersebut Full transcript available on the episode page. ## EP 72: Ngobrolin Gemini AI bareng @EstherIrawati - Ngobrolin WEB - Published: 2024-03-06 - URL: https://ngobrol.in/episodes/d28J0ZgkORY-ngobrolin-gemini-ai-bareng-estherirawati-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=d28J0ZgkORY Episode Ngobrolin Web kali ini membahas Artificial Intelligence (AI) dalam konteks web development bersama tamu spesial Bu Esther Irawati, Google Developer Expert di Machine Learning dan Associate Professor di Institut Sains dan Teknologi Terpadu Surabaya. Diskusi dimulai dengan latar belakang Bu Esther yang awalnya adalah web developer sebelum masuk ke dunia machine learning, kemudian membahas evolusi teknologi AI dari Google seperti BART, Vertex AI, hingga Gemini yang menjadi fokus utama pembicaraan. Episode ini sangat relevan bagi web developer yang ingin memahami apakah perlu belajar AI, seberapa jauh pemahaman yang dibutuhkan, dan bagaimana memanfaatkan AI untuk meningkatkan kualitas aplikasi web yang dikembangkan. Key points: - Bu Esther Irawati adalah Google Developer Expert di Machine Learning dan dosen di ITS Surabaya yang awalnya berkarir sebagai web developer sebelum masuk ke bidang machine learning - Google memiliki berbagai teknologi AI seperti BART, Vertex AI, AI Studio, dan Gemini yang dapat dimanfaatkan oleh web developer untuk berbagai kebutuhan aplikasi - Vertex AI adalah platform cloud untuk menjalankan model machine learning dengan andal, sedangkan AI Studio berfungsi sebagai tools untuk prototyping dan eksperimentasi dengan model-model AI - Perbedaan antara auto-complete biasa dengan generative AI adalah kemampuan LLM untuk memahami konteks dan menghasilkan teks yang relevan berdasarkan data training dari internet - Parameter penting dalam AI seperti temperature (mengatur tingkat kreativitas/akurasi), top-K (probabilitas jawaban), dan top-P (diversitas jawaban) perlu dipahami untuk mengoptimalkan hasil - Web developer tidak perlu memahami detail cara kerja internal AI, cukup fokus pada pemilihan tools yang tepat dan bagaimana mengintegrasikannya ke dalam aplikasi - Fine-tuning dan transfer learning adalah teknik untuk melatih model AI dengan data spesifik agar lebih relevan dengan use case tertentu tanpa harus melatih dari awal - Privasi data menjadi pertimbangan penting saat menggunakan cloud AI services, alternatifnya adalah menggunakan open source model yang dapat di-deploy secara lokal Full transcript available on the episode page. ## EP 71: Ngobrolin Fungsional JS - Ngobrolin WEB - Published: 2024-02-28 - URL: https://ngobrol.in/episodes/9PpM7f7TEbw-ngobrolin-fungsional-js-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=9PpM7f7TEbw Episode Ngobrolin WEB ini membahas konsep-konsep pemrograman fungsional dalam JavaScript secara mendalam. Diskusi dimulai dengan sejarah singkat JavaScript yang awalnya dirancang oleh Brendan Eich untuk mengimplementasikan Scheme (bahasa fungsional) di browser, namun kemudian dikompromikan dengan tren Java yang sedang naik daun pada masa itu, menjadikan JavaScript sebagai bahasa hibrida yang mendukung baik paradigma fungsional maupun OOP. Pembahasan lanjut ke konsep-konsep fundamental pemrograman fungsional seperti pure function yang harus menghasilkan output yang sama untuk input yang sama tanpa side effect, pentingnya return value, serta konsep immutability di mana data tidak boleh diubah setelah dibuat. Episode ini juga menyinggung perbedaan antara pendekatan deklaratif (fungsional) dan imperatif, serta memperkenalkan utility library seperti Ramda.js yang membantu implementasi fungsional programming di JavaScript dengan fitur seperti pipe operator dan tree-shaking untuk optimasi bundle size. Diskusi ditutup dengan pembicaraan tentang bahasa-bahasa fungsional murni seperti Haskell, Elixir, dan Reason, serta bagaimana konsep fungsional dapat diterapkan dalam pengembangan web modern tanpa harus mengadopsi sepenuhnya bahasa fungsional. Key points: - JavaScript memiliki akar sejarah dari pemrograman fungsional melalui visi awal Brendan Eich yang ingin mengimplementasikan Scheme di browser, namun dikompromikan dengan tren Java yang sedang populer pada tahun 1995 - Pure function adalah fungsi yang selalu mengembalikan hasil yang sama untuk input yang sama dan tidak memiliki side effect, dengan karakteristik utama: semua data yang dibutuhkan harus diteruskan melalui parameter dan fungsi harus memiliki return value - Side effect dalam konteks web mencakup manipulasi DOM, console.log, request ke server, save ke database, atau mengubah variabel di luar scope fungsi, yang sebaiknya diisolasi pada fungsi-fungsi tertentu saja - Immutability adalah konsep penting dalam pemrograman fungsional di mana data tidak boleh diubah setelah dibuat, berbeda dengan mutability yang memungkinkan perubahan data langsung pada variabel yang sama - Pendekatan deklaratif (fungsional) berfokus pada "apa yang ingin dicapai" menggunakan fungsi seperti map, filter, dan reduce, sedangkan pendekatan imperatif berfokus pada "bagaimana mencapainya" dengan for loop dan conditional - Higher order function adalah fungsi yang dapat menerima fungsi lain sebagai parameter atau mengembalikan fungsi, yang sangat umum digunakan dalam React components dan utility functions - Ramda.js adalah utility library yang populer untuk pemrograman fungsional di JavaScript dengan fitur seperti pipe operator, auto-currying, dan mendukung tree-shaking untuk optimasi bundle size - Belajar paradigma pemrograman fungsional tidak harus menggantikan OOP sepenuhnya, namun dapat memperkaya toolkit developer dan membantu memahami kode yang ditulis dengan paradigma berbeda Full transcript available on the episode page. ## EP 70: Ngobrolin Interop 2024 - Ngobrolin WEB - Published: 2024-02-20 - URL: https://ngobrol.in/episodes/7JewigkI4Do-ngobrolin-interop-2024-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=7JewigkI4Do Episode ini membahas Interop 2024, sebuah inisiatif kolaboratif antara empat browser mayor (Chrome, Edge, Firefox, dan Safari) untuk meningkatkan interoperabilitas web. Interop 2024 adalah kelanjutan dari Interop 2023 yang telah dibahas sebelumnya, dengan tujuan utama menyamakan perilaku fitur-fitur web platform di berbagai browser sehingga developer tidak perlu lagi melakukan workaround atau "akal-akalan montir" untuk mengatasi perbedaan implementasi antar browser. Proyek ini dimulai dari riset oleh WebDX Community Group yang mengumpulkan masukan dari developer melalui survei dan GitHub, kemudian diimplementasikan melalui Web Platform Test (WPT) dengan pendekatan test-driven development di mana semua browser menjalankan tes yang sama untuk memastikan konsistensi. Dalam episode ini, tim membahas berbagai fitur yang menjadi fokus Interop 2024 termasuk JPEG XL, View Transitions, Popover API, Textual Balance, Pointer and Mouse Events, CSS Nesting, dan berbagai fitur lainnya. Menariknya, tahun ini Edge memiliki kolom tersendiri dalam dashboard Interop, menandakan bahwa mereka sudah mulai forking dari base Chromium dan mengembangkan engine sendiri. Episode ini juga menyoroti pentingnya backward compatibility dan accessibility dalam pengembangan web platform, di mana ratusan ribu test case dibuat untuk mengakomodasi berbagai skenario termasuk bahasa dengan arah teks berbeda (kanan-ke-kiri, atas-ke-bawah) serta berbagai perangkat input dan assistive device. Diskusi juga mencakup progres implementasi masing-masing browser, dengan Safari sering kali memimpin dalam beberapa fitur sementara Firefox tertinggal namun memiliki skor eksperimental yang baik. Key points: - Interop 2024 adalah inisiatif kolaborasi antara empat browser mayor (Chrome, Edge, Firefox, Safari) untuk meningkatkan interoperabilitas web dan mengurangi perbedaan implementasi antar browser - Proyek ini menggunakan pendekatan test-driven development melalui Web Platform Test (WPT) di mana semua browser menjalankan test suite yang sama untuk memastikan konsistensi perilaku - Fitur-fitur yang menjadi fokus Interop 2024 antara lain JPEG XL, View Transitions, Popover API, Textual Balance, Pointer and Mouse Events, CSS Nesting, Custom Properties, dan lainnya - Tahun ini Edge memiliki kolom tersendiri dalam dashboard Interop, menandakan bahwa mereka sudah mulai forking dari base Chromium dan mengembangkan engine sendiri - Progres implementasi bervariasi antar browser, dengan Safari sering memimpin dalam beberapa fitur seperti HTTPS URL untuk WebSocket, sementara Firefox tertinggal dalam stable release namun memiliki skor eksperimental yang baik - Web Platform Test mencakup ratusan ribu test case yang sangat detail, mengakomodasi berbagai skenario termasuk bahasa dengan arah teks berbeda, berbagai perangkat input, dan assistive device untuk accessibility - Interoperability penting untuk developer karena mengurangi kebutuhan akan workaround, mempercepat adopsi fitur baru, dan memudahkan pengembangan library serta framework web - Proses seleksi fitur untuk Interop melibatkan survei developer, diskusi di GitHub, dan voting oleh komunitas untuk menentukan fitur yang paling penting dan paling bermasalah dari sisi interoperabilitas Full transcript available on the episode page. ## EP 69: Ngobrolin Open Source bareng @AriyaHidayat - Ngobrolin WEB - Published: 2024-02-13 - URL: https://ngobrol.in/episodes/IPWEi0I3bf0-ngobrolin-open-source-bareng-ariyahidayat-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=IPWEi0I3bf0 Episode ini membahas dunia open source bersama Mas Arya, pembuat PhantomJS dan Esprima yang sangat terkenal di komunitas JavaScript. Mas Arya berbagi pengalaman perjalanannya mulai dari latar belakang pendidikan di bidang hardware engineering di Jerman, terpapar ekosistem open source melalui komunitas KDE, hingga akhirnya menciptakan dua proyek open source yang sangat berpengaruh. Diskusi mencakup perbedaan antara proyek open source yang dikelola perorangan dengan yang didukung perusahaan besar, tantangan maintaining proyek populer, serta perubahan motivasi kontributor open source dari murni altruistik menjadi monetisasi dan popularitas. Episode juga menyentuh fenomena maintainer burnout seperti kasus color.js dan faker.js, serta strategi untuk membuat proyek open source yang sustainable. Key points: - Mas Arya menciptakan PhantomJS (headless browser untuk testing) dan Esprima (JavaScript parser) yang keduanya memiliki jutaan download di NPM - Awal mula terjun ke open source berasal dari pengalaman studi di Jerman dan terlibat dalam komunitas KDE yang sangat aktif di Eropa - PhantomJS lahir untuk menjembatani antara unit test dan end-to-end test di era front-end development yang masih liar 15 tahun lalu - Esprima dibuat karena tidak ada parser JavaScript yang cepat dan akurat saat itu, test suite-nya menjadi standar untuk parser modern lainnya - Perbedaan mendasar antara proyek open source hobi dengan proyek perusahaan: yang pertama bebas dari tekanan tapi bisa membebani maintainer secara emosional - Kontribusi ke proyek besar seperti React atau TypeScript sebelum membuat proyek sendiri dapat melatih kesabaran menghadapi komentar positif dan negatif - Motivasi open source telah berubah dari memenuhi kebutuhan pribadi dan belajar, menjadi mengejar popularitas dan monetisasi - Strategi sustainable untuk maintainer: fokus pada niat awal memenuhi kebutuhan sendiri, tidak mencoba membuat semua orang bahagia, dan menggunakan fitur archive atau transfer maintainer jika sudah tidak sanggup Full transcript available on the episode page. ## EP 68: Ngobrolin CSS Wrapped Bagian 2 - Ngobrolin WEB - Published: 2024-02-07 - URL: https://ngobrol.in/episodes/TsJQsHCdhUQ-ngobrolin-css-wrapped-bagian-2-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=TsJQsHCdhUQ Episode ini merupakan kelanjutan pembahasan artikel CSS Wrap 2023 dari Chrome Developers yang membahas fitur-fitur CSS terbaru dan menarik. Tim Ngobrolin yang terdiri dari Mas Riza, Mas Eka, dan Mas Awan membahas kategori Responsive Design dengan mendalam, termasuk Container Query yang menjadi topik bersejarah karena mempersatukan ketiga host untuk pertama kalinya. Diskusi mencakup berbagai fitur CSS modern seperti Container Style Query untuk mendeteksi custom properties, selector :has() yang sangat powerful, update media query untuk refresh rate dan preferensi pengguna, serta kemampuan animasi CSS yang semakin canggih. Episode juga menyinggung integrasi fitur-fitur ini dengan framework populer seperti Tailwind CSS, pentingnya memahami CSS vanilla meskipun sudah menggunakan framework, dan tantangan dalam mengadopsi fitur baru di lingkungan production. Key points: - Container Query memungkinkan elemen responsif berdasarkan ukuran kontainer parent-nya, bukan hanya viewport, sangat berguna untuk layout kompleks seperti sidebar atau card components - Container Style Query adalah fitur eksperimental Chromium yang memungkinkan styling berdasarkan keberadaan custom property atau CSS variable dengan nilai tertentu - Selector :has() memungkinkan styling berdasarkan keberadaan elemen tertentu dalam DOM, mendukung pseudo-class seperti :has() + untuk efek fish eye pada sibling yang dihover - Update Media Query mencakup detect refresh rate device untuk optimasi animasi, preferensi reduce-transparansi untuk aksesibilitas, dan scripting untuk detect apakah JavaScript di-disable - Linear easing function memungkinkan pembuatan kurva animasi yang kompleks dengan mendefinisikan key points untuk kontrol penuh atas timing animation - Scroll-driven animations dan scroll end event memungkinkan animasi berdasarkan posisi scroll dan mendeteksi kapan user selesai scrolling tanpa JavaScript - CSS sekarang dapat meng-animate properti discrete seperti display dan content-visibility dengan menggunakan allow-discrete pada transition, sebelumnya tidak mungkin dilakukan - Penting untuk memahami fitur CSS vanilla meskipun menggunakan framework karena Tailwind dan framework lain mengadopsi fitur-fitur tersebut melalui plugin, seperti @tailwindcss/container-queries Full transcript available on the episode page. ## EP 67: Ngobrolin Koneksi Real-Time - Ngobrolin WEB - Published: 2024-01-31 - URL: https://ngobrol.in/episodes/lb6jvnmDM6I-ngobrolin-koneksi-real-time-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=lb6jvnmDM6I Episode Ngobrolin ini membahas WebRTC (Web Real-Time Communication) secara mendalam bersama Yohan, pendiri InLive - startup lokal yang mengembangkan solusi live streaming berbasis WebRTC. Diskusi dimulai dengan latar belakang terciptanya InLive akibat mahalnya API live streaming dari luar negeri yang menggunakan pricing dolar, sehingga sulit diaplikasikan untuk pasar Indonesia dengan UMR lokal. Yohan berpengalaman dengan WebRTC sejak 2016 dan sebelumnya membuat demo Jam with Chrome yang menggunakan teknologi ini. WebRTC dijelaskan sebagai protokol standar yang memungkinkan komunikasi real-time berbasis media atau data antar browser dengan latensi sangat rendah (idealnya di bawah 200ms). Untuk komunikasi suara, delay di atas 200ms akan terasa mengganggu. Protokol ini didesain untuk peer-to-peer connection, namun untuk skenario dengan lebih dari dua peserta, dibutuhkan SFU (Selective Forwarding Unit) - server yang hanya melakukan forwarding video tanpa encoding, berbeda dengan MCU (Multipoint Control Unit) zaman dulu yang melakukan encoding ulang dan menambah latensi serta beban server. InLive memiliki dua produk: pertama adalah live streaming berbasis CDN (one-way seperti YouTube Live) yang menggabungkan WebRTC, FFmpeg, dan HLS/DASH format. Kedua adalah two-way communication product menggunakan SFU untuk use case seperti StreamYard, Google Meet, webinar, dan telemedicine. Teknologi WebRTC yang dibahas meliputi congestion controller untuk meng-handle bandwidth variability, SVC (Scalable Video Coding) dengan codec VP9 dari Google yang memungkinkan pengiriman video dengan kualitas berbeda tanpa encoding ulang, dan simulcast yang mengirim tiga jenis stream sekaligus (720p, 360p, 180p) untuk server memilih yang sesuai dengan bandwidth penerima. Perbedaan mendasar antara TCP dan UDP juga dijelaskan - TCP (yang digunakan WebSocket) memerlukan handshake dan acknowledgement untuk setiap paket sehingga menambah latensi, sementara UDP mengirim paket secara kontinyu tanpa menunggu konfirmasi, sehingga ideal untuk video streaming. TCP cocok untuk chat dan collaborative editing di mana urutan data sangat penting, sedangkan UDP lebih baik untuk video di mana beberapa paket yang hilang masih dapat ditoleransi. InLive mengalami perubahan strategi dari awalnya fokus B2B (menjual API) ke B2C karena masalah klasik "chicken and egg" - perusahaan B2B selalu bertanya tentang portfolio dan klien yang sudah ada. Terinspirasi dari pendekatan TikTok/ByteDance yang menawarkan API setelah memiliki consumer app yang sukses, InLive mengembangkan InLive Room (room.inlife.app) - aplikasi webinar yang menggabungkan fitur Locket, Zoom, dan sistem pembayaran untuk event berbayar. Fitur yang sedang dikembangkan termasuk registrasi peserta, sistem pembayaran tiket, analytics engagement dengan voice activity detection, dan broadcast capability ke YouTube. InLive ternyata open source, dengan core yang tersedia gratis. Ada dua opsi untuk pengguna: download open source version dan self-host (membutuhkan pengetahuan infrastruktur) atau menggunakan cloud API yang di-hosting oleh InLive. Salah satu keuntungan utama InLive adalah menggunakan on-premise server dengan dedicated line di Indonesia yang dibayar per capacity bandwidth, bukan per total bandwidth seperti Google Cloud atau Amazon yang sangat mahal untuk use case streaming. Key points: - InLive didirikan karena mahalnya API live streaming dari luar negeri yang menggunakan pricing dolar, sehingga sulit diaplikasikan untuk pasar Indonesia dengan UMR lokal - WebRTC adalah protokol standar untuk komunikasi real-time berbasis media atau data antar browser dengan latensi sangat rendah (idealnya di bawah 200ms), di atas nilai tersebut akan terasa mengganggu untuk percakapan - WebRTC didesain untuk peer-to-peer connection, namun untuk skenario dengan lebih dari dua peserta dibutuhkan SFU (Selective Forwarding Unit) yang hanya forwarding video tanpa encoding - SFU berbeda dengan MCU (Multipoint Control Unit) zaman dulu yang melakukan encoding ulang video di server, menambah latensi dan beban server secara signifikan - InLive memiliki dua produk: live streaming berbasis CDN (one-way seperti YouTube Live) menggunakan WebRTC+FFmpeg+HLS/DASH, dan two-way communication product dengan SFU untuk use case seperti StreamYard, Google Meet, webinar, dan telemedicine - Teknologi WebRTC penting: congestion controller untuk bandwidth variability, SVC (Scalable Video Coding) dengan VP9 codec yang memungkinkan pengiriman kualitas berbeda tanpa re-encoding, dan simulcast yang mengirim tiga stream sekaligus (720p, 360p, 180p) - TCP vs UDP: TCP memerlukan handshake dan acknowledgement per paket yang menambah latensi (cocok untuk chat/collaborative editing), sedangkan UDP mengirim paket kontinyu tanpa konfirmasi (ideal untuk video streaming) - InLive berubah strategi dari B2B ke B2C karena masalah 'chicken and egg' - perusahaan B2B selalu bertanya tentang portfolio dan klien yang sudah ada, terinspirasi dari pendekatan TikTok/ByteDance - InLive Room (room.inlife.app) adalah aplikasi webinar yang menggabungkan fitur Locket, Zoom, dan sistem pembayaran untuk event berbayar dengan fitur registrasi, analytics engagement, dan voice activity detection - InLive ternyata open source dengan dua opsi: download dan self-host (butuh pengetahuan infra) atau gunakan cloud API InLive yang di-hosting - Keuntungan InLive: menggunakan on-premise server dengan dedicated line di Indonesia yang dibayar per capacity bandwidth, bukan per total bandwidth seperti Google Cloud/Amazon yang sangat mahal - InLive akan segera memiliki fitur broadcast ke YouTube untuk use case seperti Ngobrolin community yang ingin mengganti StreamYard dengan solusi lokal yang lebih hemat bandwidth Full transcript available on the episode page. ## EP 66: Ngobrolin CSS Wrapped - Ngobrolin WEB - Published: 2024-01-24 - URL: https://ngobrol.in/episodes/SAGNwE--Htw-ngobrolin-css-wrapped-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=SAGNwE--Htw Episode ini membahas review fitur-fitur CSS yang muncul sepanjang tahun 2023, berdasarkan artikel dari tim Google Chrome DevRel oleh Adam Argyle dan Una Kravets. Para host mengakui bahwa ilmu CSS mereka masih terbatas dan banyak ketinggalan, sehingga pembahasan ini menjadi kesempatan untuk belajar bersama. Episode ini mengulas berbagai fitur CSS baru yang menarik yang telah menjadi available atau mendapat dukungan browser yang lebih luas selama tahun 2023. Diskusi berlangsung dengan santai dan interaktif, di mana para host saling berbagi pengetahuan dan pengalaman tentang fitur-fitur CSS yang mereka ketahui sebelum membaca artikel tersebut. Key points: - View Transitions API yang memungkinkan transisi halaman yang smooth dan mudah diimplementasikan - CSS Nesting yang memungkinkan penulisan selector bersarang seperti di preprocessors - Container Queries yang memungkinkan styling berdasarkan ukuran container parent - CSS @layer untuk mengorganisir dan mengatur prioritas CSS - Fitur-fitur baru untuk animasi dan transisi yang lebih powerful - Selector Has() untuk seleksi elemen berdasarkan child elements - Peningkatan dukungan browser untuk berbagai fitur CSS modern Full transcript available on the episode page. ## EP 65: Ngobrolin Form - Ngobrolin WEB - Published: 2024-01-17 - URL: https://ngobrol.in/episodes/Rem4xNV92fs-ngobrolin-form-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=Rem4xNV92fs Episode ini membahas secara mendalam tentang formulir (forms) dalam pengembangan web, yang ternyata jauh lebih kompleks dari yang terlihat. Diskusi dimulai dengan sejarah elemen form yang sudah ada sejak HTML era 90-an dan menjadi salah satu penanda transisi dari halaman web statis ke aplikasi web interaktif. Host membahas berbagai aspek form mulai dari dasar-dasar HTML form, method GET vs POST, berbagai tipe input yang tersedia (text, email, date, color, file, dll), hingga validasi baik di client-side maupun server-side. Episode ini juga menyinggung tentang integrasi dengan password manager, autocomplete, accessibility, dan security. Pembahasan meliputi payment form sebagai study case yang kompleks karena melibatkan banyak best practice, serta berbagai library form helper seperti Formik dan React Hook Form beserta validasi library seperti Zod yang bisa digunakan baik di frontend maupun backend. Key points: - Form adalah salah satu elemen HTML tertua yang menjadi penanda transisi dari web statis ke aplikasi web interaktif, memungkinkan user mengirim data ke server - Method GET mengirim data melalui query string di URL sementara POST mengirim data melalui body request untuk data yang sensitif - HTML menyediakan berbagai tipe input spesifik seperti email, date, color, number, file yang secara otomatis memberikan validasi dan UI yang sesuai di berbagai browser dan device - Validasi form terjadi di multiple layers: client-side (browser), client-side (JavaScript), server-side, dan database - masing-masing dengan tujuan berbeda - Browser modern memiliki built-in validation API yang bisa di-customize tanpa library tambahan, namun perlu hati-hati dengan error message browser yang mengikuti bahasa settingan browser - Payment form adalah study case yang kompleks karena melibatkan banyak best practice mulai dari meaningful HTML, proper autocomplete, input type selection, hingga mencegah multiple submissions - Library form helper seperti Formik, React Hook Form, dan validasi library seperti Zod membantu mengelola kompleksitas form, dengan Zod memiliki keunggulan bisa digunakan baik di frontend maupun backend dengan schema yang sama Full transcript available on the episode page. ## EP 64: Ngobrolin CORS - Ngobrolin WEB - Published: 2024-01-10 - URL: https://ngobrol.in/episodes/Nk9Z7BwGUUQ-ngobrolin-cors-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=Nk9Z7BwGUUQ Episode ini membahas tentang CORS (Cross-Origin Resource Sharing), salah satu topik yang sering membingungkan developer web. Diskusi dimulai dengan pengalaman pribadi tim menghadapi error CORS saat pertama kali belajar pengembangan web, dan kesalahpahaman umum bahwa solusinya cukup menambahkan header di sisi request (padahal harus dari server). Tim Ngobrolin WEB menjelaskan konsep origin, same-origin policy, dan bagaimana CORS bekerja sebagai mekanisme keamanan di browser. Episode ini juga membahas preflight request (OPTIONS), solusi menggunakan proxy/middleware untuk bypass CORS, dan teknik lama JSONP. Demonstrasi menarik ditampilkan dengan fitur Local Overrides di Chrome DevTools yang bisa mengubah response header dan content untuk testing. Episode ditutup dengan diskusi tentang berbagai tool untuk mengatasi CORS dan risiko membangun produk di atas platform orang lain. Key points: - CORS adalah mekanisme keamanan browser yang membatasi resource dari origin berbeda (domain, schema, port) untuk diakses - Kesalahpahaman umum: banyak developer mencoba menambahkan CORS header di sisi request/client, padahal harus dari server - Preflight request (OPTIONS) dikirim browser sebelum request sebenarnya untuk mengecek apakah request tersebut diizinkan server - CORS hanya berlaku di browser, tidak di server-side atau HTTP client seperti Postman/Insomnia - Solusi umum mengatasi CORS: menambahkan header Access-Control-Allow-Origin di server (bisa * untuk semua origin atau origin spesifik), atau menggunakan middleware/proxy - JSONP (JSON with Padding) adalah teknik lama untuk bypass CORS dengan memanfaatkan script tag yang tidak terkena same-origin policy, namun sudah tidak umum digunakan lagi - Chrome DevTools memiliki fitur Local Overrides yang memungkinkan developer mengubah response header dan content untuk testing tanpa perlu extension tambahan Full transcript available on the episode page. ## EP 63: Yang Seru di 2024 - Ngobrolin WEB - Published: 2024-01-02 - URL: https://ngobrol.in/episodes/hLDgpdLdb9c-yang-seru-di-2024-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=hLDgpdLdb9c Episode ini membahas tentang hal-hal seru yang dinantikan di dunia web development pada tahun 2024. Para host membahas prediksi dan wishlist mereka untuk teknologi dan tren yang akan muncul atau berkembang di tahun 2024. Diskusi dimulai dengan harapan bahwa musim winter (PHK massal) di industri tech tahun 2023 akan segera berakhir dan ekonomi akan membaik di tahun 2024, yang pada gilirannya akan memperbaiki situasi hiring. Episode ini mencakup berbagai topik mulai dari framework JavaScript, tools, hingga tren teknologi yang mungkin akan populer. Para host juga mengundang pendengar untuk berpartisipasi dalam diskusi melalui komentar di YouTube atau GitHub Discussion. Key points: - Harapan pemulihan ekonomi dan berakhirnya musim PHK di industri tech pada 2024 - Diskusi tentang framework JavaScript dan tren yang mungkin akan populer - Astro sebagai framework yang menarik untuk dipelajari - Perkembangan teknologi web dan tools yang dinantikan - Tren hiring dan kondisi industri software development - Ajakan kepada pendengar untuk berpartisipasi menentukan topik diskusi - Resolusi dan target pembelajaran untuk tahun 2024 Full transcript available on the episode page. ## EP 62: Rahasia Dibalik Konfigurasi File: INI, XML, JSON, YAML, TOML - Mana yang Terbaik? - Ngobrolin WEB - Published: 2023-12-20 - URL: https://ngobrol.in/episodes/OvSawGB6Kuo-rahasia-dibalik-konfigurasi-file-ini-xml-json-yaml-toml-mana-yang-terbaik-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=OvSawGB6Kuo Episode ini membahas tentang berbagai format file konfigurasi yang digunakan dalam pengembangan software, mulai dari format klasik seperti .ini hingga format modern seperti YAML, TOML, dan HCL. Host membahas sejarah dan evolusi format-format ini, dimulai dari file .ini yang populer di era Windows 90-an, kemudian XML yang banyak digunakan di Java dan .NET, hingga JSON yang menjadi standar de facto untuk komunikasi API. Diskusi juga mencakup berbagai varian JSON seperti BSON (Binary JSON) yang digunakan MongoDB, JSONB di PostgreSQL, dan format khusus lainnya seperti GeoJSON untuk data geografis. Episode ini juga menyinggung tentang YAML yang populer di DevOps dan infrastructure-as-code, TOML yang dibuat oleh Tom Preston-Werner (co-founder GitHub) sebagai alternatif YAML tanpa indentation, dan HCL (HashiCorp Configuration Language) yang digunakan di Terraform. Key points: - File .ini adalah format konfigurasi klasik dari era Windows 90-an yang menggunakan struktur sederhana dengan key-value pairs - XML pernah menjadi standar untuk konfigurasi dan pertukaran data, terutama di ekosistem Java dan .NET, namun sintaksnya yang verbose membuatnya kurang populer - JSON (JavaScript Object Notation) menjadi format dominan untuk komunikasi API dan konfigurasi karena ringan, mudah dibaca manusia, dan portable - BSON (Binary JSON) adalah varian binary JSON yang digunakan MongoDB untuk performa lebih baik dan dukungan tipe data tambahan seperti datetime dan decimal - YAML (YAML Ain't Markup Language) populer di DevOps karena human-readable dan mendukung kompleks data structure, namun memiliki risiko error karena indentation-based - TOML (Tom's Obvious Minimal Language) dibuat oleh Tom Preston-Werner sebagai alternatif YAML tanpa indentation, digunakan oleh tools seperti Supabase dan RedwoodJS - HCL (HashiCorp Configuration Language) adalah format konfigurasi yang digunakan Terraform dan Vagrant untuk infrastructure-as-code dengan sintaks mirip JavaScript Full transcript available on the episode page. ## EP 61: Ngobrolin Manajemen Kode Sumber - Ngobrolin WEB - Published: 2023-12-13 - URL: https://ngobrol.in/episodes/-ThmdHbkH-c-ngobrolin-manajemen-kode-sumber-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=-ThmdHbkH-c Episode ini membahas tentang manajemen source code dan version control, mulai dari sejarah hingga praktik modern. Diskusi dimulai dengan kebutuhan akan version control dalam pengembangan software, baik untuk proyek open source maupun kolaborasi tim. Tim Ngobrolin WEB menelusuri evolusi version control dari era punch card IBM di tahun 1960-an, hingga lahirnya SCCS, RCS, CVS, dan Subversion. Fokus utama pembahasan adalah Git - version control system yang dibuat oleh Linus Torvalds dengan pendekatan distributed yang revolusioner. Episode ini juga menyinggung berbagai platform hosting seperti GitHub, GitLab, dan Bitbucket, serta tantangan dalam belajar Git seperti konflik merge dan manajemen history. Di akhir episode, dibahas juga tentang Sourcegraph sebagai tool untuk mencari kode di berbagai repository private. Key points: - Version control mulai dikembangkan sejak tahun 1960-an oleh IBM menggunakan punch card, kemudian berkembang menjadi SCCS dan RCS dari GNU - CVS dan Subversion merupakan centralized version control yang masih digunakan beberapa proyek seperti WordPress (core WordPress masih di Subversion) - Git dibuat oleh Linus Torvalds karena ketidakpuasannya dengan CVS dan Subversion, dengan pendekatan distributed yang revolusioner - Perbedaan utama Git dengan sistem lain: Git berdiri sendiri tanpa butuh server, menggunakan file system murni, dan setiap clone adalah full copy - GitHub mempopulerkan konsep social coding dan repository publik, namun ada juga alternatif seperti GitLab (bisa self-hosted) dan Bitbucket - Tantangan dalam menggunakan Git termasuk konflik merge, manajemen history yang berantakan, cherry pick, rebase, dan menghapus file besar dari history - Sourcegraph diperkenalkan sebagai tool untuk mencari kode di berbagai repository private dalam suatu organisasi, membantu developer menemukan referensi implementasi Full transcript available on the episode page. ## EP 60: Ngobrolin Web & #KULTUM - Published: 2023-12-06 - URL: https://ngobrol.in/episodes/r5JKkGJEbko-ngobrolin-web-kultum - YouTube: https://www.youtube.com/watch?v=r5JKkGJEbko Episode ini rekaman sesi #KULTUM bersama komunitas — formatnya tanya jawab terbuka dengan penonton di Discord dan YouTube, dan pertanyaannya melompat dari yang teknis sampai yang soal arah karier. Yang pertama dari Robert, soal mengapa client-side rendering merepotkan SEO. Dulu Google crawler memang belum bisa menjalankan JavaScript sama sekali, sehingga meta tag yang disisipkan React Helmet tidak pernah terbaca; sekarang sudah bisa, tapi ada crawler time budget yang membatasi, sehingga tidak semua halaman sempat dirender ulang. Dari situ lahir berbagai akal-akalan di masa lalu, termasuk menyajikan versi khusus untuk crawler — praktik yang justru berisiko dihukum karena isinya berbeda dari yang dilihat pengunjung. SSR dan static site generation jelas lebih ringan bagi crawler karena kontennya sudah jadi HTML dan tak butuh eksekusi apa pun. Sarannya tetap membumi: kalaupun tetap memakai CSR, entah lewat Create React App atau front-end React di atas Laravel maupun Ruby on Rails, pastikan shell HTML-nya sudah lengkap dengan title, meta description, dan canonical, jangan semuanya di-inject belakangan. Pertanyaan Zaky lebih personal, dan dibacakan apa adanya: "is it worth it to learn PHP Laravel for the future?" — trennya menurun tapi permintaan di kota kecil masih banyak. Jawabannya tidak seragam, dan justru itu yang menarik. Ada yang mengingatkan memisahkan mana yang ikut tren dan mana yang benar-benar dibutuhkan, sambil mencatat PHP kini sudah punya strict typing. Ada yang menyarankan menanyakan dulu apakah pasar di sana memilih Laravel karena alasan tertentu atau sekadar itu yang mereka tahu. Ada yang menyarankan kembali ke dasar — cara kerja JavaScript engine dan PHP interpreter, algoritma, struktur data — supaya bisa jadi agnostik terhadap bahasa apa pun. Dan ada yang menutupnya dengan bukti hidup: 15 tahun di dunia WordPress, sementara PHP yang katanya mau mati tak kunjung mati. Sisanya membahas Ruby on Rails versus Phoenix, hosting di Google Cloud, perlu tidaknya belajar WordPress, Web3, dan HTMX. Key points: - Google crawler kini bisa menjalankan JavaScript, tapi crawler time budget membatasinya sehingga tidak semua halaman sempat dirender ulang — dulu meta tag dari React Helmet malah tidak terbaca sama sekali - Mendeteksi crawler lalu menyajikan versi khusus untuknya berisiko kena penalty kalau ketahuan, karena isinya berbeda dari yang dilihat pengunjung sungguhan - SSR dan static site generation lebih ringan bagi crawler karena sudah berupa HTML; kalaupun tetap memakai CSR — Create React App atau React di atas Laravel maupun Ruby on Rails — pastikan shell HTML-nya lengkap dengan title, meta description, dan canonical - Untuk pertanyaan "is it worth it to learn PHP Laravel": pisahkan mana yang ikut tren dan mana yang benar-benar dibutuhkan, dan catat bahwa PHP kini sudah punya strict typing - Cari tahu dulu apakah pasar di kota itu memilih Laravel karena pertimbangan atau sekadar satu-satunya yang mereka tahu — itu menentukan seberapa dalam perlu didalami - Saran yang paling tahan lama: kuasai dasarnya — cara kerja JavaScript engine dan PHP interpreter, algoritma, struktur data — supaya jadi agnostik terhadap bahasa apa pun - Ruby on Rails dinilai tidak akan tergantikan Phoenix, sama seperti React yang akan tetap dipakai Meta — dan 15 tahun di WordPress jadi bukti bahwa PHP yang katanya mau mati tak kunjung mati Full transcript available on the episode page. ## EP 59: Ngobrolin Web Offline di DevFest Bogor - Published: 2023-11-28 - URL: https://ngobrol.in/episodes/SYXywMW05GY-ngobrolin-web-offline-di-devfest-bogor - YouTube: https://www.youtube.com/watch?v=SYXywMW05GY Episode ini direkam langsung dari panggung sebuah konferensi komunitas, dan sebagian besarnya sesi tanya jawab. Pertanyaan pertama soal ongkos performa View Transitions API — jawabannya jujur: ongkosnya tetap ada, tapi jauh lebih ringan daripada memakai pustaka animasi, karena sebagian besar ditangani browser. Sebagian properti animasi bahkan berjalan di luar main thread, meski yang menyangkut lebar dan tinggi masih membebaninya. Pertanyaan berikutnya membedakan bfcache dari cache biasa. Cache biasa menyimpan berkas sumbernya sehingga halaman tetap harus dirender ulang; back-forward cache menyimpan snapshot halaman yang sudah jadi lengkap dengan state terakhirnya. Analoginya bagus: seperti meninggalkan kamar lalu kembali dan menemukannya persis seperti saat ditinggalkan. Disebutkan pula dua penyebab paling umum ia tidak bekerja — memakai unload dan mengirim header no-store. Sisanya berisi saran untuk pertanyaan yang sangat membumi: membuat situs portofolio penuh gambar tapi tetap cepat. Jawabannya memakai srcset agar ukuran gambar menyesuaikan perangkat, membatasi ukuran maksimalnya, menyediakan gambar penuh hanya sebagai pilihan, memakai tag picture untuk art direction, mempertimbangkan format yang lebih modern daripada JPEG dan PNG, serta placeholder base64 yang di-blur — dengan catatan elemen LCP jangan pernah di-lazy load. Ketiga metrik Core Web Vitals dijelaskan mewakili tiga hal berbeda: LCP untuk kecepatan tampil, CLS untuk kestabilan, dan INP untuk responsivitas, dipantau lewat Google Search Console atau Lighthouse CI. Ditutup dengan tamu dari Kuala Lumpur soal kebangkitan Angular di versi 17. Key points: - View Transitions API tetap punya ongkos performa, tapi jauh lebih ringan daripada memakai pustaka animasi karena sebagian besar ditangani browser - Sebagian properti animasi berjalan di luar main thread, sementara yang menyangkut lebar dan tinggi masih membebaninya - Cache biasa menyimpan berkas sumbernya, sedangkan bfcache menyimpan snapshot halaman yang sudah jadi lengkap dengan state terakhirnya - Dua penyebab paling umum bfcache tidak bekerja: memakai unload dan mengirim header no-store - Ketiga metrik Core Web Vitals mewakili hal berbeda — LCP untuk kecepatan tampil, CLS untuk kestabilan, INP untuk responsivitas - Untuk situs penuh gambar: pakai srcset dan tag picture, batasi ukuran maksimal, sediakan gambar penuh hanya sebagai pilihan, dan jangan pernah lazy load elemen LCP - Angular versi 17 dibahas sebagai kebangkitan: lompatan kecepatan besar, sintaks control flow baru, dan signals yang kini diadopsi banyak framework lain Full transcript available on the episode page. ## EP 58: Ngobrolin Festival Developer - Ngobrolin WEB - Published: 2023-11-22 - URL: https://ngobrol.in/episodes/KhIlxKS1vwc-ngobrolin-festival-developer-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=KhIlxKS1vwc Episode ini kedatangan dua orang yang baru bergabung sebagai Google Developer Expert, dan sebagian besar isinya cerita bagaimana mereka sampai ke sana. Keduanya sama-sama tidak berangkat dari niat mengejar gelar itu. Yang satu awalnya sekadar bertanya-tanya ke Mas Danang, lalu tertarik karena merasa kredibilitasnya akan menambah bobot saat berbagi — meski sempat ragu karena kata expert sendiri memicu rasa tidak layak. Yang satu lagi masuk lewat Women Developer Academy, program yang memang bermisi mencetak lebih banyak GDE perempuan di Asia Tenggara, dan justru tidak memburu status itu melainkan menumpuk pengalaman jadi pembicara dulu — debutnya di Depok. Prosesnya digambarkan apa adanya: bisa memakan waktu tiga sampai empat bulan karena berkasnya bolak-balik direvisi, dan begitu berkasnya final sisanya justru cepat. Disebut pula bahwa bidang web punya beberapa spesialisasi — web capabilities, performance, UI and tooling, security dan browser extension — dan seseorang cukup memilih satu; memilih dua dimungkinkan kalau bidangnya benar-benar berjauhan. Bagian berikutnya menjelaskan DevFest, singkatan dari developer festival: rangkaian konferensi komunitas yang berlangsung serentak di seluruh dunia pada kuartal terakhir tiap tahun, diinisiasi Google Developer Group di kotanya masing-masing. Di Indonesia rangkaiannya melintasi Bogor, Bandung, Semarang, Makassar, Bali, Surabaya, Jogja, dan Jakarta, dibuka oleh Bogor yang tiketnya sudah habis untuk seribu dua ratus orang. Key points: - Keduanya tidak berangkat dari niat mengejar status GDE — satu tertarik karena kredibilitas saat berbagi, satu lagi lebih dulu menumpuk pengalaman jadi pembicara - Kata expert itu sendiri memicu rasa tidak layak, dan itu sempat jadi keraguan sebelum mendaftar - Prosesnya bisa memakan tiga sampai empat bulan karena berkasnya bolak-balik direvisi, tapi begitu berkasnya final sisanya justru cepat - Bidang web punya beberapa spesialisasi — web capabilities, performance, UI and tooling, security, browser extension — dan cukup pilih satu - Women Developer Academy jadi salah satu jalan masuknya, karena programnya memang bermisi mencetak lebih banyak GDE perempuan di Asia Tenggara - DevFest adalah developer festival: konferensi komunitas serentak di seluruh dunia pada kuartal terakhir tiap tahun, diinisiasi Google Developer Group tiap kota - Di Indonesia rangkaiannya melintasi Bogor, Bandung, Semarang, Makassar, Bali, Surabaya, Jogja, dan Jakarta — dibuka Bogor dengan tiket habis untuk seribu dua ratus orang Full transcript available on the episode page. ## EP 57: Ngobrolin RedwoodJS - Ngobrolin WEB - Published: 2023-11-15 - URL: https://ngobrol.in/episodes/_5rmu9SJsJY-ngobrolin-redwoodjs-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=_5rmu9SJsJY Redwood dibahas sebagai contoh framework yang berani memilih ceruk yang sangat sempit. Kalau kebanyakan perkakas berusaha netral dan menyerahkan banyak keputusan pada kita, Redwood justru menyediakan segalanya sekaligus dalam satu paket: React untuk antarmuka, GraphQL untuk lapisan data, Prisma sebagai ORM, TypeScript, Jest untuk pengujian, sampai Storybook yang terkenal jelimet kalau disiapkan sendiri. Perbandingannya dengan Next.js dipakai untuk menunjukkan bedanya — Next.js pun disebut belum selengkap ini karena belum membawa ORM. Basis datanya SQLite secara bawaan untuk tutorial, dengan Postgres sebagai pilihan lain, dan ada pembuat kode otomatis untuk bagian-bagian yang berulang. Sasarannya jelas dan diakui terbatas: orang yang membangun produk sendiri atau tim yang isinya satu sampai tiga orang, dan hackathon 24 jam di mana waktu memasang Jest lalu menambal Babel dan TS config adalah waktu yang terbuang. Konsekuensinya juga jujur disebut — ia dirancang untuk proyek yang benar-benar dimulai dari nol, padahal di tempat kerja kita jarang benar-benar memulai dari nol. Pengalaman pahit dengan Gatsby dibawa sebagai pembanding: salah pilih di awal berujung menulis ulang. Halangan lain yang dibahas lebih membumi: seberapa banyak orang di sekitar kita yang mengenalnya. Di tempat kerja sering ada kesepakatan tak tertulis untuk tidak memakai perkakas yang tidak umum, karena pekerjaannya bisa berpindah tangan ke pihak lain. Karena itu jalannya biasanya panjang — mulai dari proyek pribadi, dikuasai dulu, baru diusulkan ke kantor ketika ada proyek baru yang cocok. Menariknya, di balik framework ini ada pula program lomba berhadiah dan pendanaan pribadi untuk produk bermisi lingkungan. Ditutup dengan pengamatan yang berguna: menonton rekaman presentasi produk-produk itu bukan untuk melihat produknya, melainkan belajar menyampaikan sesuatu dalam tiga sampai lima menit. Key points: - Redwood memilih ceruk sempit dengan membundel React, GraphQL, Prisma, TypeScript, Jest dan Storybook sekaligus — termasuk Storybook yang terkenal jelimet kalau dipasang sendiri - Pembandingnya Next.js, yang disebut belum selengkap ini karena belum membawa ORM; basis data bawaannya SQLite, dengan Postgres sebagai pilihan lain - Sasarannya orang yang membangun produk sendiri, tim satu sampai tiga orang, dan hackathon 24 jam — waktu memasang Jest lalu menambal Babel dan TS config adalah waktu terbuang - Konsekuensinya jujur: ia dirancang untuk proyek yang dimulai dari nol, padahal di tempat kerja kita jarang benar-benar memulai dari nol - Pengalaman pahit dengan Gatsby jadi pembanding — salah pilih perkakas di awal berujung menulis ulang - Halangan lain adalah ketidakumumannya: banyak tempat kerja punya kesepakatan tak tertulis memakai perkakas yang lazim, karena pekerjaannya bisa berpindah tangan - Di balik Redwood ada program lomba berhadiah dan pendanaan untuk produk bermisi lingkungan; menonton rekaman presentasinya berguna untuk belajar menyampaikan sesuatu dalam tiga sampai lima menit Full transcript available on the episode page. ## EP 56: Ngobrolin Code Review - Ngobrolin WEB - Published: 2023-11-08 - URL: https://ngobrol.in/episodes/LaoReWcsyao-ngobrolin-code-review-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=LaoReWcsyao Sebelum masuk topik, mereka membahas RedwoodJS — meta framework yang menyediakan segalanya sekaligus, dari Prisma untuk basis data sampai Storybook yang biasanya paling merepotkan disiapkan sendiri — beserta alasan kenapa perkakas semacam itu sulit masuk tempat kerja: ia dirancang untuk proyek yang dimulai dari nol, sementara di kantor kita jarang benar-benar memulai dari nol. Topik utamanya code review, dibahas jujur soal biayanya: menerapkannya berarti menambah tenaga dan memperlambat pekerjaan. Imbalannya juga jelas — kita memang tidak bisa melihat kesalahan sendiri, terutama yang menyangkut logika. Panduan yang dipakai adalah engineering practices milik Google: tujuannya memastikan kesehatan kode secara keseluruhan, dan kedua belah pihak sama-sama berperan. Bagian paling berharga adalah cara memberi masukan tanpa melukai. Prinsipnya menyerang kodenya, bukan orangnya, dan sebisa mungkin bukan perintah. Contohnya konkret: menemukan hasil querySelector yang langsung dipakai tanpa diperiksa, ia tidak menulis "tolong perbaiki" berulang kali, melainkan bertanya bagaimana kalau elemennya tidak ditemukan lalu menautkan halaman MDN-nya. Ada pula pengakuan soal budaya sungkan meninjau kode orang yang lebih senior, padahal senior pun menghargai temuan yang memperbaiki kodenya. Ditegaskan soal urutan: tinjauan manusia adalah langkah terakhir, setelah ESLint, Prettier, Husky, dan unit test di CI lolos, plus tangkapan layar dan langkah pengujian sudah dilampirkan di pull request — dan masukan yang bersifat selera ditandai jelas sebagai nitpick, boleh tidak diikuti. Key points: - Code review memang menambah tenaga dan memperlambat, tapi kita memang tidak bisa melihat kesalahan sendiri — terutama yang menyangkut logika - Panduan yang dipakai adalah engineering practices Google: tujuannya memastikan kesehatan kode secara keseluruhan, dan kedua belah pihak sama-sama berperan - Prinsipnya menyerang kodenya bukan orangnya, dan sebisa mungkin masukan berbentuk pertanyaan, bukan perintah - Contoh konkretnya: menemukan hasil querySelector yang dipakai tanpa diperiksa, ajukan pertanyaan lalu tautkan MDN — biar yang ditinjau memikirkan solusinya sendiri - Sungkan meninjau kode senior itu nyata di lingkungan kita, padahal senior pun menghargai temuan yang memperbaiki kodenya - Yang meninjau justru banyak belajar dari cara orang lain berpikir, memecahkan masalah dari arah berbeda, dan menamai sesuatu - Tinjauan manusia adalah langkah terakhir — setelah ESLint, Prettier, Husky, dan unit test di CI lolos, dan masukan bersifat selera ditandai jelas sebagai nitpick Full transcript available on the episode page. ## EP 55: Ngoding di browser - Ngobrolin WEB - Published: 2023-11-01 - URL: https://ngobrol.in/episodes/3W1Vk95usrg-ngoding-di-browser-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=3W1Vk95usrg Episode ini kedatangan seorang developer advocate dari AWS, dan pertanyaan pembukanya membumi: masih menjalankan lingkungan pengembangan di localhost, atau sudah pindah ke Cloud9, Codespaces dan sejenisnya? Obrolannya lalu melebar ke penyunting kode masing-masing — Sublime, Vim, Notepad++, dan Atom yang sudah dihentikan — dengan pengamatan bahwa yang populer di satu lingkungan belum tentu dipakai di lingkungan lain: pengembang Android bertahan di Android Studio, pengembang Java di Eclipse atau NetBeans, pengembang desktop di Visual Studio. Beberapa fakta menarik diungkap. VSCode ternyata dibangun dengan teknologi web, dan berkas yang kita unduh sebenarnya bukan sumber terbuka — kodenya ada di GitHub tapi harus dikompilasi sendiri, persis pola Chrome dan Chromium. Mesin penyuntingnya pun tersedia terpisah dan dipakai banyak perkakas berbasis web lain. Bagian utamanya soal menulis kode dari jauh. Dulu menyunting berkas di server berarti masuk lewat SSH dan memakai Vim atau Nano; sekarang VSCode bisa dijalankan sebagai server dan diakses lewat browser. Dibedakan pula dua hal yang sering tertukar: VSCode yang benar-benar berjalan di browser, versus VSCode lokal yang menyambung ke WSL, ke kontainer Docker, atau ke mesin lain lewat terowongan. Ditutup dengan gagasan berakhirnya kebiasaan bekerja di localhost, karena proyek makin berat dan perusahaan seperti Google memang sudah lama bekerja begitu — basis kode Chrome konon butuh berhari-hari untuk dikompilasi di laptop biasa. Key points: - Penyunting kode yang populer di satu lingkungan belum tentu dipakai di lingkungan lain — Android Studio untuk Android, Eclipse atau NetBeans untuk Java, Visual Studio untuk desktop - VSCode dibangun dengan teknologi web, dan berkas unduhannya bukan sumber terbuka — kodenya ada di GitHub tapi harus dikompilasi sendiri - Pola itu persis seperti Chrome dan Chromium: mesinnya terbuka, tapi produk jadinya tidak - Mesin penyunting di dalam VSCode tersedia sebagai pustaka tersendiri dan dipakai banyak perkakas berbasis web lain - Dulu menyunting berkas di server berarti masuk lewat SSH dan memakai Vim atau Nano; kini VSCode bisa dijalankan sebagai server dan diakses lewat browser - Dua hal sering tertukar: VSCode yang benar-benar berjalan di browser, versus VSCode lokal yang menyambung ke WSL, kontainer Docker, atau mesin lain lewat terowongan - Google memang sudah lama bekerja di mesin jauh, karena basis kode sebesar Chrome konon butuh berhari-hari untuk dikompilasi di laptop biasa Full transcript available on the episode page. ## EP 54: Jangan gunakan NodeJS sebelum nonton video ini! - Published: 2023-10-25 - URL: https://ngobrol.in/episodes/IG1x81EIb54-jangan-gunakan-nodejs-sebelum-nonton-video-ini - YouTube: https://www.youtube.com/watch?v=IG1x81EIb54 Episode ini membahas JavaScript di sisi server, dan sengaja tidak dibatasi pada Node.js saja — sekarang ada Deno, Bun, Cloudflare Workers, dan berbagai layanan function yang di baliknya memakai AWS. Bagian paling seru adalah drama penomoran versi Node.js. Ia lama tertahan di 0.x, dan itu bukan soal teknis melainkan kepercayaan: banyak perusahaan menolak memakainya semata-mata karena angka nol di depan, padahal sejak 0.8 sudah dianggap stabil. Ketika Joyent, tempat Ryan Dahl bekerja, ikut mengambil peran mengelolanya, sebagian komunitas khawatir arahnya disetir satu pihak lalu memisahkan diri sebagai io.js dan langsung menerbitkan versi 1.0. Keduanya akhirnya rujuk di bawah sebuah foundation dan bersepakat melompat ke 4.0 sekaligus. Sejak itu penomorannya teratur: versi genap jadi LTS yang disarankan, versi ganjil untuk mencoba yang terbaru. Dua runtime pendatang dibahas sebagai pemicu geliat baru. Deno dibuat Ryan Dahl sendiri setelah merasa ada keputusan awal Node.js yang keliru, terutama soal keamanan paket npm; ia tetap memakai V8 tapi ditulis ulang dengan Rust setelah sempat memakai Go. Bun memakai mesin JavaScript dari WebKit alih-alih V8 dan menjual kecepatan. Keduanya membuat Node.js terlihat lamban — meski disinggung juga bahwa berinovasi terlalu cepat pun sama-sama dikeluhkan orang. Sisanya obrolan membumi soal cara menerbitkan aplikasi: dari Heroku yang tinggal push, sampai mengatur droplet sendiri dengan Nginx dan PM2 agar prosesnya tetap hidup di latar belakang. Key points: - Node.js lama tertahan di versi 0.x bukan karena teknis, melainkan karena perusahaan menolak memakainya semata-mata karena angka nol di depan - Kekhawatiran arahnya disetir Joyent memicu perpecahan menjadi io.js yang langsung menerbitkan versi 1.0, lalu keduanya rujuk dan melompat ke 4.0 sekaligus - Sejak itu penomorannya teratur: versi genap jadi LTS yang disarankan dipakai, versi ganjil untuk mencoba fitur terbaru - Deno dibuat Ryan Dahl sendiri setelah merasa ada keputusan awal Node.js yang keliru, terutama soal keamanan paket npm — tetap memakai V8 tapi ditulis ulang dengan Rust - Bun memakai mesin JavaScript dari WebKit alih-alih V8 dan menjual kecepatan sebagai pembedanya - Kehadiran Deno dan Bun membuat Node.js terlihat lamban — meski berinovasi terlalu cepat pun sama-sama dikeluhkan orang - Menerbitkan aplikasinya berkisar dari Heroku yang tinggal push sampai mengatur droplet sendiri dengan Nginx dan PM2 agar prosesnya tetap hidup di latar belakang Full transcript available on the episode page. ## EP 53: Ngobrolin CSS Layout - Ngobrolin WEB - Published: 2023-10-11 - URL: https://ngobrol.in/episodes/oyQSFpOjcEo-ngobrolin-css-layout-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=oyQSFpOjcEo Episode ini berangkat dari pengakuan yang jujur: banyak developer web merasa takut atau jengkel pada CSS, dan salah satu dari mereka mengakuinya untuk dirinya sendiri. Alasannya menarik — ia merasa tidak pernah benar-benar memegang dasarnya. Kalau menulis JavaScript ia paham kenapa sesuatu bekerja begitu, sementara di CSS ia cenderung mengikuti saja gaya yang sudah dipasang orang lain di awal proyek. Dari situ muncul diagnosis yang lebih adil: masalahnya tidak murni pada bahasanya, melainkan pada betapa luasnya ruang bagi orang untuk menyimpang. Satu tim bisa sudah sepakat memakai Bootstrap 5, tetap saja ada yang menulis gayanya sendiri; variabel yang sudah disiapkan diabaikan, satuan yang sudah distandarkan tetap ditulis manual, dan penyimpangan diselesaikan dengan akal-akalan seperti margin negatif. Sisanya menelusuri sejarah tata letak sampai ke CSS Grid dan Flexbox. Mula-mula tidak ada pengaturan sama sekali, karena web dirancang untuk dokumen yang saling terkait, bukan aplikasi; orang mengakalinya dengan image transparan sebagai spacer, deretan NBSP, lalu tabel dan display table yang jelas disalahgunakan karena tidak ada pilihan lain, sebelum float jadi tumpuan. Tempat menulis gaya pun berpindah berulang kali — dari atribut di dalam markup, ke satu blok gaya, ke berkas tersendiri, dan kini kembali ke markup lewat Tailwind. Ada catatan menarik bahwa React Native sampai sekarang masih bertumpu pada Flex untuk layout-nya, dan prinsip penutupnya: kalau bisa di CSS, kerjakan di CSS. Key points: - Rasa takut pada CSS sering berakar pada tidak pernah memegang dasarnya — hanya mengikuti gaya yang dipasang orang lain di awal proyek tanpa tahu alasannya - Masalahnya bukan murni pada bahasanya melainkan pada luasnya ruang untuk menyimpang: sudah sepakat pakai Bootstrap 5 pun, tetap ada yang menulis gayanya sendiri - Gejalanya khas: variabel yang sudah disiapkan diabaikan, satuan yang sudah distandarkan tetap ditulis manual, dan masalah diselesaikan dengan margin negatif - Web mula-mula tidak punya pengaturan tata letak sama sekali karena dirancang untuk dokumen yang saling terkait, bukan aplikasi - Sebelum Flexbox dan CSS Grid, tata letak diakali dengan image transparan sebagai spacer, deretan NBSP, tabel dan display table, lalu float - Tempat menulis gaya berpindah berulang kali: dari atribut di markup, ke satu blok gaya, ke berkas tersendiri — dan kini kembali ke markup lewat Tailwind - React Native sampai sekarang masih bertumpu pada Flex untuk layout-nya, dan prinsip penutupnya: kalau bisa di CSS, kerjakan di CSS Full transcript available on the episode page. ## EP 52: Ngobrolin Ngobrolin WEB - Edisi Spesial 1 Tahun - Published: 2023-10-04 - URL: https://ngobrol.in/episodes/TgNDGcvEEfg-ngobrolin-ngobrolin-web-edisi-spesial-1-tahun - YouTube: https://www.youtube.com/watch?v=TgNDGcvEEfg Edisi khusus satu tahun ini berisi cerita di balik acaranya sendiri. Idenya lahir spontan saat mereka berjalan menuju makan malam di Bali, ketika GDE web dan GDE Android dikumpulkan dalam satu acara — pertemuan tatap muka pertama setelah masa pandemi, ketika orang-orang yang selama ini hanya muncul sebagai kepala di layar akhirnya terlihat utuh. Grup obrolannya dibuat saat itu juga, satu tangan memegang ponsel dan satu tangan memegang piring, padahal mereka belum saling menyimpan nomor. Alasan yang mendorongnya jujur dan spesifik. Pembaruan seputar web datang banyak tapi tersebar ke mana-mana — dari CSS, gambar, font, sampai browser dan sisi server. Sebelum pandemi selalu ada Chrome Dev Summit sebagai titik kumpul pembaruan, dan setelahnya sesi-sesi daring resmi berlangsung di jam yang tidak bersahabat bagi zona waktu mereka, sementara rekamannya tidak menggantikan sisi sosialnya. Ditambah lagi, hubungan informal yang dulu memungkinkan bertanya kabar pembaruan secara santai kini sudah tidak ada. Komunitas mereka sendiri disebut satu per satu: GDG, GDSC, Women Techmaker, sampai kanal Discord Google Developers Indonesia, dengan penonton yang datang dari Surabaya hingga Belanda. Yang mereka anggap paling berharga adalah perubahan cara belajarnya. Menonton video atau membaca artikel sendirian cenderung jadi konsumsi pasif dan tergesa-gesa; sementara membahasnya untuk orang lain memaksa mereka mengolah ulang dan menyampaikannya dengan perspektif sendiri, karena harus bisa dipertanggungjawabkan. Diakui pula bahwa sekitar separuh topiknya adalah hal yang tidak mereka kuasai sebelumnya dan baru dipahami saat membahasnya. Kunci bertahan setahun, kata mereka, adalah harapan yang sengaja dibuat rendah — namanya saja mengobrol — dan punya teman yang sama-sama berkomitmen. Key points: - Idenya lahir spontan saat berjalan menuju makan malam di Bali, ketika GDE web dan GDE Android dikumpulkan, dan grup obrolannya dibuat saat itu juga padahal mereka belum saling menyimpan nomor - Pemicunya nyata: pembaruan seputar web datang banyak tapi tersebar — CSS, gambar, font, browser, sisi server - Sebelum pandemi Chrome Dev Summit jadi titik kumpul pembaruan; setelahnya sesi daring resmi jatuh di jam yang tidak bersahabat bagi zona waktu mereka - Hubungan informal yang dulu memungkinkan bertanya kabar pembaruan secara santai sudah tidak ada, dan acara ini sebagian mengisi celah itu - Ekosistem komunitas mereka disebut satu per satu — GDG, GDSC, Women Techmaker, dan kanal Discord Google Developers Indonesia — dengan penonton dari Surabaya sampai Belanda - Nilai terbesarnya adalah berubahnya cara belajar: dari konsumsi pasif yang tergesa-gesa menjadi mengolah ulang dan menyampaikannya dengan perspektif sendiri - Sekitar separuh topiknya adalah hal yang tidak mereka kuasai sebelumnya, dan kunci bertahan setahun adalah harapan yang sengaja dibuat rendah plus teman yang sama-sama berkomitmen Full transcript available on the episode page. ## EP 51: Ngobrolin Package Manager - Ngobrolin WEB ep52 - Published: 2023-09-26 - URL: https://ngobrol.in/episodes/yhlD16hyW90-ngobrolin-package-manager-ngobrolin-web-ep52 - YouTube: https://www.youtube.com/watch?v=yhlD16hyW90 Berangkat dari keheranan sehari-hari — memasang satu paket lewat npm install tapi folder node_modules langsung membengkak — episode ini menelusuri asal-usul package manager, yang ternyata jauh lebih tua daripada ekosistem JavaScript. Akarnya di dunia Linux, tempat sebuah program tidak membawa semua kebutuhannya sendiri melainkan bergantung pada pustaka lain, yang bergantung pada pustaka lain lagi. Dari sana lahir repositori terpusat berisi daftar paket beserta versi, arsitektur, dan dependensinya — nenek moyang registry yang kita pakai hari ini, dengan dpkg di kubu Debian dan rpm di kubu Red Hat. Pendekatan tiap sistem operasi dibandingkan: Windows membundel semuanya jadi satu installer besar, Linux mengunduh dependensinya terpisah sehingga butuh koneksi, dan macOS cukup memindahkan satu bundel ke folder Applications. Homebrew kemudian membawa gaya Linux ke sana. Bagian paling berkesan adalah insiden left-pad: pustaka mungil berfungsi sepele tapi jadi dependensi ribuan paket lain, dan ketika pemiliknya menghapusnya semuanya berantakan. Dari sana pembicaraan bergeser ke celah keamanan yang paling rawan, yang ternyata bukan teknis melainkan manusia — paket palsu yang namanya sengaja dibuat mirip agar tertukar saat salah ketik. Ditutup dengan pengamatan bahwa munculnya Yarn dan pnpm justru menyehatkan: Yarn membawa cache lokal agar tidak perlu mengunduh ulang dan workspaces, pnpm membawa hard link agar berkas dibagi antar proyek dan tidak boros ruang — dan npm lalu ikut mengadopsinya. Key points: - Gagasan package manager jauh lebih tua daripada ekosistem JavaScript — akarnya di Linux, dengan dpkg di kubu Debian dan rpm di kubu Red Hat - Repositori terpusat berisi daftar paket beserta versi dan dependensinya adalah nenek moyang registry npm yang kita pakai sekarang - Tiap sistem operasi memilih pendekatan berbeda: Windows membundel jadi satu installer besar, Linux mengunduh terpisah, macOS cukup memindahkan satu bundel - Insiden left-pad menunjukkan pustaka mungil berfungsi sepele bisa jadi dependensi ribuan paket lain — dan ketika dihapus, semuanya ikut berantakan - Celah keamanan paling rawan bukan teknis melainkan manusia: paket palsu yang namanya sengaja dibuat mirip agar tertukar saat salah ketik - Munculnya Yarn dan pnpm justru menyehatkan npm — masing-masing membawa gagasan baru yang kemudian ikut diadopsi - Yarn membawa cache lokal dan workspaces, sementara pnpm membawa hard link agar berkas dibagi antar proyek dan tidak boros ruang disk Full transcript available on the episode page. ## EP 50: Ngobrolin Linter - Ngobrolin WEB ep51 - Published: 2023-09-19 - URL: https://ngobrol.in/episodes/2dqsz5Y4Mlk-ngobrolin-linter-ngobrolin-web-ep51 - YouTube: https://www.youtube.com/watch?v=2dqsz5Y4Mlk Sebelum masuk topik, mereka berbagi soal kenapa acara ini terasa berbeda dari podcast yang pernah mereka buat: tidak ada beban mencari narasumber tiap minggu, dan justru jadi alasan sah untuk mengulik hal yang di pekerjaan tidak mungkin disentuh. Kuncinya, kata mereka, harus ada teman — dan temannya pun harus sama-sama berkomitmen. Topik malam itu static code analysis, atau yang lazim disebut linter. Definisinya sederhana: memeriksa kode tanpa menjalankannya. Nilainya justru di situ — pada bahasa bertipe longgar seperti JavaScript, salah ketik baru ketahuan ketika program berjalan, dan itu berarti penggunanya yang melihatnya lebih dulu. ESLint menangkapnya sedini mungkin, entah lewat garis merah di editor atau lewat pemeriksaan di CI sebelum kode digabungkan. Dibuka dengan lelucon bahwa pesan commit paling sering di dunia adalah "fix linter error". Penempatannya dalam gambaran besar juga dijelaskan: mengutip Kent C. Dodds, static analysis adalah lapisan paling dasar penjagaan kualitas, di bawah unit test dan jauh di bawah end-to-end. Yang menarik, code review oleh manusia pun sebenarnya sejenis pemeriksaan statis — kode dibaca tanpa dijalankan — maka masuk akal kalau ESLint dan Prettier diselesaikan lebih dulu sebelum merepotkan mata manusia. Ada pula pengamatan bahwa bahasa yang lebih muda seperti Go menyertakan formatter sejak awal, sementara JavaScript harus menunggu komunitasnya membuatnya sendiri — karena bahasanya memang tidak dirancang untuk aplikasi sebesar sekarang. Aturan yang terasa merepotkan biasanya warisan setup awal proyek, saat orang masih idealis sebelum dikejar tenggat dan akhirnya menyalin konfigurasi Airbnb. Key points: - Format obrolan mingguan bertahan karena tidak membebani, dan jadi alasan sah untuk mengulik hal di luar pekerjaan — kuncinya punya teman yang sama-sama berkomitmen - Static code analysis memeriksa kode tanpa menjalankannya, sehingga salah ketik tertangkap sebelum penggunanya yang lebih dulu melihatnya - Pada bahasa bertipe longgar seperti JavaScript, kesalahan semacam itu baru muncul saat program berjalan — di situlah ESLint jadi lapisan pertama - Mengutip Kent C. Dodds, static analysis adalah lapisan paling dasar penjagaan kualitas, di bawah unit test dan jauh di bawah end-to-end - Code review oleh manusia sebenarnya sejenis pemeriksaan statis juga — maka ESLint dan Prettier sebaiknya lolos dulu sebelum merepotkan mata manusia - Bahasa yang lebih muda seperti Go menyertakan formatter sejak awal, sementara JavaScript harus menunggu komunitasnya membuat sendiri - Aturan yang terasa merepotkan biasanya warisan setup awal proyek, saat orang masih idealis sebelum dikejar tenggat dan akhirnya menyalin konfigurasi Airbnb Full transcript available on the episode page. ## EP 49: Ngobrolin Framework - Ngobrolin WEB - Published: 2023-09-13 - URL: https://ngobrol.in/episodes/ORga5NqFQ10-ngobrolin-framework-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=ORga5NqFQ10 Episode ini kedatangan seorang engineer yang kini bekerja di GovTech di kementerian pendidikan, dan salah satu pesan sampingannya melegakan: karier di ranah web tidak selalu berujung di startup, karena lembaga seperti itu pun memakai Tailwind, Headless UI, dan perkakas sekelas startup. Cerita utamanya soal melewati banyak generasi framework — dari ExtJS yang sudah berbasis komponen dan MVC jauh sebelum orang membicarakannya, ke masa halaman dirakit dengan template Java atau PHP lalu ditempeli jQuery, lalu AngularJS, lalu Vue.js, dan akhirnya Next.js. Dari situ muncul pengamatan bahwa dulu satu framework menyediakan segalanya, sementara sekarang berlapis: React yang menolak disebut framework di bawah, dan Next.js, Remix, atau Astro di atasnya, masing-masing memilih sendiri masalah mana yang diselesaikan. Bagian paling berharga adalah cerita memilih framework untuk tim besar di Blibli. Ia sendiri condong ke Angular 2 karena dekorator dan dependency injection-nya terasa akrab bagi tim yang berlatar Java dan Spring — dan ternyata salah. Setelah keduanya dicoba langsung, yang lebih cepat dikuasai justru Vue, karena direktifnya masih mirip AngularJS yang sudah mereka pakai. Dari sana lahir pelajaran yang ia tekankan: dalam bekerja bersama, singkirkan pertimbangan yang bersifat selera; ajukan yang bisa diukur seperti ukuran bundle, waktu muat, dan biaya perawatan — karena kurva belajar yang dimaksud adalah kurva belajar tim, bukan kurva belajar kita sendiri. Key points: - Karier di ranah web tidak selalu berujung di startup — GovTech pun memakai Tailwind, Headless UI, dan perkakas sekelas startup, serta banyak merekrut engineer web - ExtJS sudah berbasis komponen dan MVC jauh sebelum orang ramai membicarakan komponen - Dulu satu framework menyediakan segalanya; kini berlapis — React di bawah, lalu Next.js, Remix, atau Astro di atasnya - Tiap meta framework memilih sendiri masalah yang diselesaikan, karena memelihara semuanya punya biaya yang tak sanggup ditanggung maintainer - Dugaan bahwa Angular 2 paling mudah dipelajari tim berlatar Java dan Spring ternyata meleset — Vue lebih cepat dikuasai karena direktifnya mirip AngularJS yang sudah dipakai - Pelajarannya: singkirkan pertimbangan selera dan ajukan yang bisa diukur — ukuran bundle, waktu muat, dan biaya perawatan jangka panjang - Kurva belajar yang harus dipertimbangkan adalah kurva belajar tim, bukan kurva belajar orang yang mengusulkan Full transcript available on the episode page. ## EP 48: Ngobrolin AI - Ngobrolin WEB - Published: 2023-09-06 - URL: https://ngobrol.in/episodes/M5lUhWTF9As-ngobrolin-ai-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=M5lUhWTF9As Episode ini mengambil sudut berbeda dari kebanyakan pembicaraan soal AI: bukan apakah ia akan menggantikan kita, melainkan bagian mana dari pekerjaan sehari-hari yang benar-benar terbantu. Jawabannya jujur dan tidak berlebihan — sebagian besar cerita justru soal batasnya. Percobaan menyuruh ChatGPT menulis fitur utuh dari tiket Jira disebut gagal telak: hasilnya jauh dari yang dibutuhkan, dan merapikannya lebih repot daripada menulis sendiri. Salah satu sebabnya, ia tidak mengenal gaya penulisan kode di tempat kerja kita. Menyusun ulang prompt-nya pun menguras tenaga tersendiri — capeknya berpindah dari mengetik kode ke memikirkan kalimat. Copilot dan Code Whisperer dari AWS dipakai untuk pelengkapan kode, dengan catatan bahwa untuk kode sederhana IntelliSense yang sudah ada sering lebih cepat. Yang benar-benar terasa berguna justru hal-hal sempit dan berulang. Regex disebut paling manjur, baik menyusunnya dari contoh maupun membedah yang sudah rumit. Lalu membuat data contoh untuk pengujian. Lalu mengingatkan sintaks yang kita pahami tapi malas mengetiknya — konfigurasi Nginx, perintah curl lengkap dengan header-nya. Lalu menyiapkan kerangka berkas unit test lewat Copilot Chat sehingga tinggal diisi. Ada pula pemakaian di luar kode: merapikan bahasa Inggris pada deskripsi pull request GitHub dan balasan email, serta menerjemahkan pesan ke klien Jepang lewat DeepL secara lebih halus dan tidak langsung sesuai budayanya. Key points: - Menyuruh ChatGPT menulis fitur utuh dari tiket Jira gagal telak — hasilnya jauh dari kebutuhan dan merapikannya lebih repot daripada menulis sendiri - Sebabnya ia tidak mengenal gaya penulisan kode di tempat kerja kita, sehingga terlalu banyak yang harus diubah - Menyusun ulang prompt menguras tenaga tersendiri — capeknya cuma berpindah dari mengetik kode ke memikirkan kalimat - Regex disebut pemakaian paling manjur, baik menyusunnya dari contoh maupun membedah yang sudah terlalu rumit dibaca - Untuk kode sederhana, IntelliSense yang sudah ada sering lebih cepat daripada menunggu Copilot atau Code Whisperer - Berguna untuk mengingatkan sintaks yang kita pahami tapi malas mengetik lengkapnya, seperti konfigurasi Nginx atau perintah curl beserta header-nya - Pemakaian di luar kode juga terasa: merapikan bahasa Inggris pada deskripsi pull request GitHub, dan menerjemahkan pesan ke klien Jepang lewat DeepL sesuai budayanya Full transcript available on the episode page. ## EP 47: Ngobrolin HTTP - Ngobrolin WEB - Published: 2023-08-30 - URL: https://ngobrol.in/episodes/MZ4dViTkIZ0-ngobrolin-http-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=MZ4dViTkIZ0 Topik ini muncul dari kejadian nyata: sebuah situs yang baru dipasang selalu dialihkan ke HTTPS, padahal tidak ada pengaturan Nginx apa pun yang menyuruhnya. Penyebabnya ternyata domain berakhiran .dev yang memang memaksakan HTTPS di tingkat browser. Dari situ obrolannya melebar ke HTTP itu sendiri, sekaligus keheranan bahwa hal sedasar ini jarang benar-benar diajarkan di kampus. Sejarahnya ditelusuri dari HTTP 0.9 yang luar biasa sederhana: hanya ada GET, tidak ada header, tidak ada status code, tidak ada penanganan galat. Server menjawab dengan HTML, lalu koneksinya langsung ditutup. Saat itu belum ada browser sama sekali — permintaan dikirim lewat Telnet, perkakas serbaguna yang bisa berbicara dengan protokol apa pun lewat port yang sesuai, dari SMTP di port 25 sampai IMAP. Protokolnya sendiri lahir di CERN dan berjalan di atas TCP, sementara HTTP/3 belakangan pindah ke UDP. HTTP 1.0 dan 1.1 menambahkan hampir semua yang kita kenal: nomor versi, status code, tipe konten yang diminta dan diberikan, kompresi gzip, caching, unggahan berkas, dan keep-alive agar koneksinya tidak langsung ditutup. Yang menarik justru pengamatan di sela-selanya — membangun protokol seperti ini bukan soal menulis kode melainkan menyusun RFC dan mengambil keputusan lebih dulu, karena semua pihak harus sepakat sebelum ada yang mengimplementasikan. Ada pula saran keamanan kecil tapi praktis: jangan bocorkan identitas web server di header respons. Ditutup dengan kenyataan bahwa banyak situs besar sudah berjalan di HTTP/2 bahkan HTTP/3 di balik Cloudflare tanpa kita sadari. Key points: - Domain berakhiran .dev memaksakan HTTPS di tingkat browser, sehingga situs bisa selalu dialihkan tanpa pengaturan Nginx apa pun - HTTP 0.9 luar biasa sederhana: hanya GET, tanpa header, tanpa status code, dan koneksinya langsung ditutup setelah dijawab - Saat itu belum ada browser — permintaan dikirim lewat Telnet, yang bisa berbicara dengan protokol apa pun lewat port yang sesuai seperti SMTP di port 25 - Protokolnya lahir di CERN dan berjalan di atas TCP, sementara HTTP/3 belakangan pindah ke UDP - HTTP 1.0 dan 1.1 menambahkan status code, tipe konten, kompresi gzip, caching, unggahan berkas, dan keep-alive - Membangun protokol semacam ini bukan soal menulis kode melainkan menyusun RFC lebih dulu, karena semua pihak harus sepakat sebelum ada yang mengimplementasikan - Saran keamanan kecil tapi praktis: jangan bocorkan identitas web server di header respons, atau sekalian isi dengan yang mengecoh Full transcript available on the episode page. ## EP 46: Ngobrolin WASM - Ngobrolin WEB - Published: 2023-08-22 - URL: https://ngobrol.in/episodes/9ECU9Wz0wzU-ngobrolin-wasm-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=9ECU9Wz0wzU WebAssembly dibahas dengan mundur dulu ke kata assembly itu sendiri — istilah yang bisa terasa asing bagi siapa pun yang belajar otodidak dari HTML, CSS, dan JavaScript, karena ketiganya sudah berada jauh di atas lapisan itu. Assembly adalah bahasa yang paling dekat dengan mesin sebelum kode biner: menjumlahkan dua angka saja berarti mengalokasikan memori, menyimpan nilainya, mengambilnya dari alamat tertentu, lalu menyimpan hasilnya lagi. Istilah tingkat rendah pun diluruskan — maksudnya bukan buruk atau sederhana, melainkan makin sedikit lapisan penerjemah antara kode dan perangkat kerasnya. Dari situ WebAssembly dijelaskan sebagai format biner yang berjalan di browser dengan kecepatan mendekati aplikasi asli. Bahasa sumbernya dimulai dari C++ dan Rust, lalu menyusul Java, Kotlin, Dart dan Golang; rantai kompilasinya lewat Emscripten dan LLVM, dan Google serta Adobe sempat berkolaborasi membawa proxying API ke sana. Contoh-contohnya yang membuat gagasan ini konkret: Figma, yang dulu mustahil ada di web dan kini justru jadi pengguna WebAssembly; Photoshop yang menyusul ke browser; FFmpeg yang dijalankan langsung di sisi klien sehingga video tidak perlu diunggah ke server lebih dulu; TensorFlow Lite yang modelnya dikompilasi agar bisa berjalan real-time; sampai PHP Wasm, yang membuat PHP pun bisa hidup di dalam browser. Pembatasnya tetap jelas — untuk pekerjaan berat semacam itulah WebAssembly masuk akal, bukan untuk hal yang sudah cukup ditangani JavaScript atau service worker. Key points: - Assembly adalah bahasa paling dekat dengan mesin sebelum kode biner: menjumlahkan dua angka berarti mengalokasikan memori, menyimpannya, mengambilnya dari alamat, lalu menyimpan hasilnya lagi - Tingkat rendah bukan berarti buruk atau sederhana, melainkan makin sedikit lapisan penerjemah antara kode dan perangkat kerasnya - Bahasa sumbernya dimulai dari C++ dan Rust, lalu menyusul Java, Kotlin, Dart dan Golang, dengan rantai kompilasi lewat Emscripten dan LLVM - Figma dulu mustahil ada di web dan kini justru jadi salah satu pengguna WebAssembly, disusul Photoshop yang pindah ke browser - FFmpeg bisa dijalankan langsung di sisi klien, sehingga video tidak perlu diunggah ke server lebih dulu sebelum diproses - TensorFlow Lite dikompilasi ke WebAssembly supaya modelnya bisa berjalan real-time di browser - PHP Wasm membuat PHP pun bisa hidup di dalam browser — tapi pembatasnya tetap: WebAssembly untuk pekerjaan berat, bukan untuk yang sudah cukup ditangani JavaScript atau service worker Full transcript available on the episode page. ## EP 45: Ngobrolin Performa CLS feat Jessica Cecilia - Ngobrolin WEB - Published: 2023-08-16 - URL: https://ngobrol.in/episodes/uKWkLVtKb7g-ngobrolin-performa-cls-feat-jessica-cecilia-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=uKWkLVtKb7g Episode ini kedatangan Jessica Cecilia, front-end engineer di Tokopedia, dan sebagian awalnya berisi cerita di balik layar: bahwa fitur sekecil membagikan tautan produk pun punya timnya sendiri, bahwa stack hariannya React dan TypeScript, dan bahwa legacy JavaScript beserta class component-nya masih menyisakan gaya penulisan yang sulit dimusnahkan. Motivasinya mulai berbagi juga menarik — sebagai alumni Bangkit dan Women Developer Academy ia merasakan sendiri jurang antara apa yang diajarkan di kuliah dan apa yang dibutuhkan di dunia kerja, lalu ingin menjadi orang yang menjembatani keduanya. Topik utamanya CLS atau Cumulative Layout Shift, salah satu dari tiga Core Web Vitals dan yang paling menjengkelkan: halaman yang isinya melompat justru saat kita hendak menekan sesuatu. Diawali penyegaran soal mengapa Google merumuskan metrik semacam ini — karena tanpa angka, penilaian cepat atau lambat cuma jadi perasaan — dan bagaimana setiap metrik lama selalu berakhir diakali sampai diganti: FCP dulu dicurangi dengan loading spinner di shell HTML lalu digantikan LCP, dan FID sebentar lagi digantikan INP. Bagian praktisnya membagi sumber masalahnya jadi dua. Untuk elemen yang punya kotak — gambar, video, iklan — kuncinya aspect-ratio CSS, sehingga tempatnya sudah dipesan sebelum isinya datang. Yang lebih rumit adalah teks yang panjangnya tidak bisa ditebak karena datang dari API: solusinya line-clamp atau text-overflow ellipsis, yang kini sudah jadi standar CSS dan tersedia sebagai kelas di Tailwind, sehingga tinggi tempatnya tetap sama entah teksnya pendek atau panjang. Font juga jadi biang CLS, dan diakali lewat pencocokan fallback di Fontaine, properti size-adjust, ascent-override, dan descent-override, atau font matcher di meowni.ca. Iklan pihak ketiga disebut kasus tersulit karena isinya tidak diketahui. Ditutup dengan Layout Instability API untuk mengukur pergeseran secara terprogram, dan pengakuan jujur bahwa perbaikan performa di Tokopedia dipisahkan dari pengembangan fitur lalu dipantau lewat Google Search Console dan performance budget Lighthouse CI. Key points: - Jessica Cecilia bercerita bahwa di Tokopedia fitur sekecil membagikan tautan produk pun punya timnya sendiri, dengan React dan TypeScript sebagai stack hariannya di atas legacy JavaScript yang masih banyak - Core Web Vitals dirumuskan Google karena tanpa angka penilaian cepat atau lambat cuma jadi perasaan, dan setiap metrik lama selalu berakhir diakali lalu diganti — FCP dicurangi dengan loading spinner sampai digantikan LCP, kini FID digantikan INP - Untuk elemen yang punya kotak seperti gambar, video, dan iklan, kuncinya aspect-ratio CSS sehingga tempatnya sudah dipesan sebelum isinya datang - Untuk teks dinamis dari API, line-clamp dan text-overflow ellipsis menjaga tinggi tempatnya tetap sama — sudah jadi standar CSS dan tersedia sebagai kelas Tailwind, jadi ikut responsif tanpa JavaScript - Font jadi biang CLS karena fallback dan web font punya lebar serta line height berbeda; diakali lewat Fontaine, properti size-adjust, ascent-override dan descent-override, atau font matcher di meowni.ca - Iklan pihak ketiga adalah kasus tersulit karena isinya tidak diketahui, tidak seperti gambar yang setidaknya bisa ditanyakan ukurannya - Layout Instability API mengukur pergeseran secara terprogram dan lebih granular daripada skor CLS-nya, sementara pemantauan rutin memakai Google Search Console dan performance budget Lighthouse CI di alur integrasi Full transcript available on the episode page. ## EP 44: Ngobrolin URL - Ngobrolin WEB ep45 - Published: 2023-08-09 - URL: https://ngobrol.in/episodes/EMynH33TrBI-ngobrolin-url-ngobrolin-web-ep45 - YouTube: https://www.youtube.com/watch?v=EMynH33TrBI Episode ini bagian dari niat baru mereka: menyelipkan topik yang benar-benar mendasar setidaknya sebulan sekali, alih-alih terus mengejar yang sedang ramai. Alasannya sederhana — framework datang dan pergi, sementara yang mendasar bertahan; bentuk URL yang kita pakai hari ini sudah ada sejak awal 90-an, dirumuskan Tim Berners-Lee. URL dibedah bagian per bagian: skema di depan seperti HTTP, HTTPS, atau FTP; informasi pengguna yang jarang dipakai kecuali untuk basic auth; host yang sendirinya terdiri dari subdomain, nama domain, dan top level domain; lalu port yang biasanya tersembunyi karena 80 dan 443 sudah jadi nilai bawaan, jalur, parameter kueri, dan fragment di paling belakang. Fragment ternyata punya kemampuan bawaan yang sering dilupakan: menautkan ke penanda yang cocok dengan id sebuah elemen membuat browser menggulir ke sana sendiri, tanpa pustaka apa pun. Alasan kenapa ini perlu dipahami juga dijelaskan dengan membumi: tanpa tahu nama bagiannya, kita tidak bisa bertanya dengan jelas saat minta bantuan. Bagian penutupnya meluruskan istilah yang sering tertukar — URI adalah payungnya, URL hanya salah satu jenisnya yaitu yang menunjuk berdasarkan lokasi, sementara URN menunjuk berdasarkan nama dan lazim dijumpai pada berkas konfigurasi SAML untuk single sign-on. Disebut juga bahwa panjang maksimum URL berbeda jauh antar Chrome, Firefox, dan Safari — peringatan yang relevan saat orang tergoda menyelipkan JWT ke dalamnya. Key points: - Topik mendasar sengaja diselipkan rutin karena framework datang dan pergi sementara yang mendasar bertahan — bentuk URL hari ini sudah dirumuskan Tim Berners-Lee sejak awal 90-an - Sebuah URL terdiri dari skema, informasi pengguna, host, port, jalur, parameter kueri, dan fragment — masing-masing punya pemisah dan aturannya sendiri - Menautkan ke fragment yang cocok dengan id sebuah elemen membuat browser menggulir ke sana sendiri, tanpa pustaka tambahan apa pun - Port 80 untuk HTTP dan 443 untuk HTTPS tersembunyi karena sudah jadi nilai bawaan, dan skema lain seperti FTP masih bisa dibuka langsung dari browser - Segala sesuatu setelah tanda tanya bukan lagi bagian jalur, sehingga garis miring di dalam parameter kueri tidak dianggap sebagai jalur - Panjang maksimum URL berbeda jauh antara Chrome, Firefox, dan Safari — jadi berhati-hatilah menyelipkan JWT panjang ke dalamnya - URI adalah payungnya: URL menunjuk berdasarkan lokasi, sedangkan URN menunjuk berdasarkan nama dan lazim dijumpai pada berkas konfigurasi SAML untuk single sign-on Full transcript available on the episode page. ## EP 43: Ngobrolin Privacy Sandbox - Ngobrolin WEB ep44 - Published: 2023-08-02 - URL: https://ngobrol.in/episodes/IA3ECrPgbZU-ngobrolin-privacy-sandbox-ngobrolin-web-ep44 - YouTube: https://www.youtube.com/watch?v=IA3ECrPgbZU Privacy Sandbox dibahas bukan sebagai wacana melainkan sesuatu yang harus disiapkan dari sekarang, karena dampaknya bisa membuat aplikasi yang selama ini baik-baik saja tiba-tiba tidak bisa dipakai — gagal login, gagal memproses pembelian, dan tidak ada yang error secara jelas. Akarnya adalah third party cookie yang terlalu berkuasa. Ketika sebuah layanan disematkan di banyak situs — peta, tombol berbagi, apa pun — layanan itu bisa mengenali bahwa pengunjung situs A dan situs B adalah orang yang sama, lalu menyusun rekam jejak lengkap perjalanannya. Analogi yang dipakai: CCTV di setiap ujung jalan; siapa pun yang memegang panelnya bisa mengikuti seseorang dari rumah, ke kantor, sampai tempat nongkrongnya. Firefox dan Safari sudah lebih dulu memblokirnya, dan Chrome menyusul awal tahun depan. Tapi tidak semua penggunaannya jahat, dan di situlah Privacy Sandbox masuk: ia bukan satu API melainkan sekumpulan usulan, masing-masing menangani satu kebutuhan. Topics API disebut sebagai yang paling terlihat, meski masih proposal dan origin trial di Chromium saja, dan CHIPS alias partitioned cookie tetap memungkinkan berbagi cookie sepanjang developer-nya mengizinkan. Dampak terbesarnya bukan iklan yang membuntuti, melainkan single sign on — pola yang membuat kita otomatis dikenali saat berpindah antar situs bersaudara, dan yang menopang autentikasi pihak ketiga seperti Firebase, Supabase atau Auth0. Sarannya praktis: nyalakan pengaturan yang mensimulasikan pemblokiran itu sekarang juga, lalu periksa apa yang rusak sebelum tenggatnya tiba. Key points: - Dampaknya bukan wacana: aplikasi yang selama ini baik-baik saja bisa tiba-tiba gagal login atau gagal memproses pembelian, tanpa ada error yang jelas - Layanan yang disematkan di banyak situs bisa mengenali bahwa pengunjung situs A dan situs B adalah orang yang sama, lalu menyusun rekam jejak lengkapnya — analoginya CCTV di setiap ujung jalan - Firefox dan Safari sudah memblokir third party cookie lebih dulu; Chrome menyusul awal tahun depan - Privacy Sandbox bukan satu API melainkan sekumpulan usulan: Topics API yang paling terlihat masih sebatas proposal dan origin trial di Chromium - CHIPS alias partitioned cookie tetap memungkinkan berbagi cookie pihak ketiga, tetapi hanya sepanjang developer-nya mengizinkan - Dampak paling genting bukan iklan melainkan single sign on — termasuk autentikasi pihak ketiga seperti Firebase, Supabase dan Auth0 yang bisa berhenti bekerja - Sarannya praktis: nyalakan pengaturan yang mensimulasikan pemblokiran itu sekarang juga, lalu periksa apa yang rusak sebelum tenggatnya tiba Full transcript available on the episode page. ## EP 42: Ngobrolin Web bersama Thomas Steiner ep43 - Published: 2023-07-26 - URL: https://ngobrol.in/episodes/aSAW5q7xEaY-ngobrolin-web-bersama-thomas-steiner-ep43 - YouTube: https://www.youtube.com/watch?v=aSAW5q7xEaY Episode ini kedatangan Thomas Steiner, Developer Relations Engineer di tim Chrome yang sudah 15 tahun di Google, dan obrolannya berbahasa Inggris. Dibuka dengan kenangan masa Chrome pertama kali diperkenalkan lewat komik cetak, lengkap dengan pengakuan jujur bahwa reaksi pribadinya waktu itu justru skeptis — kenapa Google tidak fokus saja memperbaiki browser yang sudah ada. Sekarang, katanya, perang browser sudah berakhir; Chrome, Safari, dan yang lain satu tim web yang mengerjakan platform yang sama, kadang berbeda pendapat, dan itu sehat. Pekerjaannya sehari-hari ternyata sebagian besar membaca: surel, repositori yang diikuti di GitHub, dan blog orang-orang lewat pembaca RSS. Perannya digambarkan sebagai enabler — penghubung dua kelompok yang jarang bersinggungan, yaitu engineer pembuat browser dan developer yang membangun web di atasnya. Detail yang menarik: engineer Chrome biasanya justru bukan ahli JavaScript, sehingga sebagian pekerjaannya adalah membaca contoh kode mereka dan menyadari bahwa gayanya masih berbau C++, lalu mengusulkan bentuk yang lebih wajar bagi developer web. Soal Project Fugu — nama internal yang terlanjur populer untuk Project Web Capabilities — ia menekankan bahwa titik berangkatnya selalu dari orang yang punya ide aplikasi lalu menemui tembok karena API-nya belum ada, mulai dari akses berkas, clipboard, sampai integrasi dengan sistem operasi. Tapi tidak semua permintaan layak dijadikan bagian platform: contoh yang dipakai adalah Touch Bar pada MacBook Pro yang sempat ramai diminta, padahal hanya ada di satu produk dari satu vendor — dan sekarang produknya sendiri sudah tidak ada. Dibahas pula WebAssembly sebagai jalan aplikasi berat pindah ke web, dengan Photoshop sebagai contoh yang mengisolasi algoritma intinya dari basis kode native. Ditutup dengan bahasan izin: aplikasi web selalu berjalan dalam sandbox sejak awal dan meminta izin per kemampuan — VSCode.dev jadi contoh kasus yang ingin izin aksesnya diingat — sementara sistem operasi justru bergerak ke arah yang sama setelah dulu memberi akses terlalu longgar. Key points: - Thomas Steiner, Developer Relations Engineer di tim Chrome, menyebut perang browser sudah berakhir — Chrome, Safari, dan yang lain kini satu tim web, dan perbedaan pendapat justru dianggap sehat - Pekerjaan developer relations sebagian besar ternyata membaca: surel, repositori GitHub yang diikuti, dan blog orang lain lewat pembaca RSS - Engineer Chrome biasanya bukan ahli JavaScript, sehingga sebagian tugasnya membaca contoh kode mereka yang masih berbau C++ dan mengusulkan bentuk yang lebih wajar bagi developer web - Project Fugu adalah nama internal yang terlanjur populer untuk Project Web Capabilities, dan titik berangkatnya selalu dari orang yang punya ide aplikasi lalu menemui tembok karena API-nya belum ada - Tidak semua permintaan layak masuk platform: Touch Bar pada MacBook Pro sempat ramai diminta padahal hanya ada di satu produk dari satu vendor — dan kini produknya sudah tidak ada - WebAssembly jadi jalan aplikasi berat pindah ke web, dengan Photoshop sebagai contoh yang mengisolasi algoritma intinya dari basis kode native - Aplikasi web selalu berjalan dalam sandbox dan meminta izin per kemampuan — VSCode.dev jadi contoh kasus yang ingin izin aksesnya diingat — sementara sistem operasi justru bergerak ke arah yang sama setelah dulu memberi akses terlalu longgar Full transcript available on the episode page. ## EP 41: Ngobrolin Public Speaking - Ngobrolin WEB ep42 - Published: 2023-07-18 - URL: https://ngobrol.in/episodes/neF7qCLqUaY-ngobrolin-public-speaking-ngobrolin-web-ep42 - YouTube: https://www.youtube.com/watch?v=neF7qCLqUaY Topik malam itu keluar dari kebiasaan: bukan teknologi, melainkan berbicara di depan umum. Ketiganya berbagi cerita awal masing-masing, dan tidak satu pun berangkat dari rasa percaya diri. Ada yang bertahun-tahun percaya dirinya tidak bisa berbicara jelas dan menyalahkan sifatnya sendiri. Ada yang dulu berkeringat dingin hanya untuk mengangkat tangan bertanya dari bangku penonton. Ada yang saat skripsi memilih tugas menekan tombol lanjut agar tidak perlu bicara. Yang mendorong semuanya bukan bakat melainkan keadaan: mereka mulai mengurus komunitas — WordPress yang sedang mati suri, dan meetup Meteor yang organizer-nya sudah vakum — dan mencari pembicara ternyata sulit, maka penyelenggaranya sendiri yang naik. Salah satu cerita paling berkesan adalah meetup yang tiga puluh orang mendaftar tapi hanya satu yang datang. Acaranya tetap dijalankan berdua di depan laptop, dan satu orang itu belakangan resign lalu jadi developer lepas. Dari situlah dampaknya terasa nyata. Sisanya berisi saran praktis: kenali audiensnya lebih dulu dengan bertanya ke penyelenggara, dan sadari bahwa kata kuncinya adalah publik — fokusnya pada mereka, bukan pada diri kita. Pilih topik yang benar-benar sudah diterapkan sendiri, karena yang membuat presentasi bernilai justru hal yang tidak ada di dokumentasi. Menyanggupi sebuah topik juga bisa dipakai untuk memaksa diri belajar, seperti WebAssembly yang lama ingin dipelajari tapi tak ada kesempatannya. Rancang alurnya seperti cerita dengan kail di lima menit pertama, dan berlatih bukan untuk menghafal melainkan mengukur waktu. Key points: - Tidak satu pun berangkat dari rasa percaya diri — ada yang yakin dirinya tidak bisa bicara jelas, ada yang berkeringat dingin sekadar untuk bertanya dari bangku penonton - Yang mendorong mereka bukan bakat melainkan keadaan: mengurus komunitas WordPress yang mati suri dan meetup Meteor yang vakum, lalu kesulitan mencari pembicara - Sebuah meetup hanya dihadiri satu orang dari tiga puluh yang mendaftar — acaranya tetap dijalankan, dan orang itu belakangan resign lalu jadi developer lepas - Kata kuncinya adalah publik: fokus pada apa yang audiens bawa pulang, bukan pada cerita tentang diri sendiri yang sudah disampaikan pembawa acara - Pilih topik yang benar-benar sudah diterapkan sendiri, karena yang membuat presentasi bernilai justru hal yang tidak ada di dokumentasinya - Menyanggupi sebuah topik bisa dipakai untuk memaksa diri belajar — seperti WebAssembly yang lama ingin dipelajari tapi tak ada kesempatannya - Berlatih malam sebelumnya bukan untuk menghafal melainkan mengukur waktu, dengan penanda menit di catatan tiap slide Full transcript available on the episode page. ## EP 40: Ngobrolin Fluttercon - Ngobrolin WEB ep41 - Published: 2023-07-12 - URL: https://ngobrol.in/episodes/hnJLh0JoQ84-ngobrolin-fluttercon-ngobrolin-web-ep41 - YouTube: https://www.youtube.com/watch?v=hnJLh0JoQ84 Episode ini menghadirkan seorang developer asal Jakarta yang kini bekerja di ING, sebuah bank di Belanda, dan obrolannya berjalan santai — dari pola kerja hibrida yang bahkan diatur per sektor supaya kereta tidak terlalu penuh, sampai cerita sepeda yang dipreteli bagian demi bagian meski sudah dikunci di dua titik. Bagian teknisnya soal memakai Flutter sejak versinya masih beta pada 2018, untuk sebuah aplikasi loyalitas berskala besar yang selesai dalam tiga sampai empat bulan dan langsung terbit di Android maupun iOS. Datang dari pengembangan Android asli, yang paling ia sukai adalah menyusutnya jumlah berkas: dulu satu fitur berarti berkas XML untuk tampilan, berkas Java terpisah untuk logika, dan berkas XML lain lagi untuk animasi; di Flutter semuanya berada di satu tempat dalam Dart. Kelemahannya juga disebut jujur. Sebagai teknologi yang masih mencari bentuk, banyak hal belum diputuskan — terutama pengelolaan state dan arsitektur, di mana tim Google sengaja tidak menetapkan satu cara yang direkomendasikan, berbeda dengan Android yang lewat Kotlin sudah memberi jalur jelas. Bagi pendatang baru itu membingungkan, dan diakui setara dengan orang yang belajar web tapi langsung masuk ke React tanpa panduan pola. Bagian penutupnya soal FlutterCon di Berlin yang merupakan bagian dari DroidCon: pusat pengembangan ekosistemnya ternyata banyak di Eropa, sehingga bisa berbincang langsung dengan orang yang pustakanya selama ini hanya kita pakai. Ruang sesi Flutter dan Android bahkan bersebelahan, bukan bersaing. Key points: - Sebuah aplikasi loyalitas berskala besar selesai dalam tiga sampai empat bulan dan langsung terbit di Android maupun iOS, memakai Flutter yang saat itu masih beta - Datang dari Android asli, yang paling terasa adalah menyusutnya berkas — dulu satu fitur berarti XML untuk tampilan, Java untuk logika, dan XML lain untuk animasi - Di Flutter semuanya berada di satu tempat dalam Dart, dan itulah yang membuatnya bertahan menyukainya - Sebagai teknologi yang masih mencari bentuk, pengelolaan state dan arsitekturnya belum diputuskan — tim Google sengaja tidak menetapkan satu cara yang direkomendasikan - Berbeda dengan Android yang lewat Kotlin sudah memberi jalur jelas, dan bagi pendatang baru kebebasan itu justru membingungkan - Setara dengan orang yang belajar web tapi langsung masuk ke React tanpa panduan pola pengelolaan state - FlutterCon di Berlin adalah bagian dari DroidCon, dan ruang sesi Flutter dan Android bersebelahan alih-alih bersaing Full transcript available on the episode page. ## EP 39: Ngobrolin I/O Extended - Ngobrolin WEB ep40 - Published: 2023-07-05 - URL: https://ngobrol.in/episodes/M2zdLxrm4F4-ngobrolin-io-extended-ngobrolin-web-ep40 - YouTube: https://www.youtube.com/watch?v=M2zdLxrm4F4 Setelah beberapa episode membahas pengumuman Google I/O dari jauh, kali ini ceritanya datang dari orang yang benar-benar hadir — di I/O Connect Bangalore, sekaligus persiapan I/O Extended Jakarta bersama GDG. Formatnya menyerupai acara pusatnya: keynote utama, lalu keynote per bidang, lalu sesi paralel yang hampir tanpa jeda, ditambah deretan stan demo di tengah aula. Sensasi yang disebut paling berkesan sederhana saja — biasanya orang-orang ini hanya terlihat di video dan artikel, sekarang bisa ditemui langsung. Dua demo yang paling membekas keduanya soal web yang menyentuh perangkat keras. Yang pertama sebuah mesin kasir Point of Sales lengkap dengan barcode reader, printer struk, monitor kedua, dan laci uang — semuanya dikendalikan dari sebuah Progressive Web App memakai Web Serial, Web HID, Web USB, dan Web Bluetooth. Bukan sekadar demo pameran: perangkat itu sudah dipakai di usaha sungguhan, dan dibuat seorang GDE Web asal Belanda. Yang kedua LEGO Education Kit, di mana anak-anak menyusun logika secara visual di antarmuka web berbasis Scratch — dengan opsi naik ke Python kalau sudah terbiasa — lalu mengirim hasil kompilasinya ke microcontroller di dalam set LEGO-nya lewat Bluetooth, sehingga jadi robot, mobil, atau line follower. Yang menarik justru keputusan bisnisnya: aplikasi native untuk macOS, Windows, dan Android tetap ada tapi siklus perawatannya dikurangi, dan pengembangannya dialihkan ke versi web — karena instalasi native butuh unduhan ratusan megabyte sampai lebih dari satu gigabyte, sementara versi webnya jauh lebih ringan karena modulnya dialirkan sesuai kebutuhan. Sisanya membahas dominasi AI di acara itu, dari MediaPipe dan TensorFlow.js untuk object detection dan image segmentation, sampai Vertex AI dengan Model Garden-nya yang memungkinkan melatih model dari dokumentasi sendiri — misalnya dokumentasi React atau WordPress — sehingga pencarian bisa dijawab secara percakapan. Key points: - I/O Extended dan I/O Connect memakai format yang sama dengan Google I/O pusat — keynote utama, keynote per bidang, sesi paralel hampir tanpa jeda, plus deretan stan demo - Sebuah mesin kasir Point of Sales lengkap dengan barcode reader, printer struk, dan laci uang dikendalikan sepenuhnya dari Progressive Web App lewat Web Serial, Web HID, Web USB, dan Web Bluetooth - Mesin kasir itu bukan sekadar demo pameran — perangkatnya sudah dipakai di usaha sungguhan, dan dibuat seorang GDE Web asal Belanda - LEGO Education Kit memakai antarmuka web berbasis Scratch untuk menyusun logika secara visual, dengan opsi naik ke Python, lalu mengirim hasil kompilasinya ke microcontroller lewat Bluetooth - Keputusan bisnisnya menarik: aplikasi native untuk macOS, Windows, dan Android tetap ada tapi siklus perawatannya dikurangi, dan pengembangan dialihkan ke versi web - Alasannya soal ukuran — instalasi native butuh unduhan ratusan megabyte sampai lebih dari satu gigabyte, sementara versi webnya jauh lebih ringan karena modulnya dialirkan sesuai kebutuhan - AI mendominasi acaranya: MediaPipe dan TensorFlow.js untuk object detection dan image segmentation, serta Vertex AI dengan Model Garden yang memungkinkan melatih model dari dokumentasi sendiri seperti dokumentasi React atau WordPress Full transcript available on the episode page. ## EP 38: Ngobrolin Bundler - Ngobrolin WEB ep39 - Published: 2023-06-27 - URL: https://ngobrol.in/episodes/bwpPxqgFyWQ-ngobrolin-bundler-ngobrolin-web-ep39 - YouTube: https://www.youtube.com/watch?v=bwpPxqgFyWQ Module bundler dibahas lewat sejarahnya, bukan daftar perkakasnya — dan pesan pembukanya bahwa hampir semua orang yang membangun web sudah memakainya tanpa sadar, karena Laravel pun menyertakan Webpack Mix siap pakai. Tugas intinya cuma dua: menyelesaikan dependensi antar berkas, dan mengemas semuanya jadi satu. Ceritanya berangkat dari masa ketika JavaScript belum modular sama sekali. Semua berkas dipanggil satu per satu lewat tag script dan semuanya mendarat di global namespace, sehingga urutan pemanggilan menentukan segalanya dan dua pustaka dengan nama sama bisa saling merusak. Masalah ini bukan teori: konflik semacam itu dulu jadi sumber bug paling sering di situs WordPress berbasis plugin, ketika beberapa plugin masing-masing membawa jQuery-nya sendiri — sampai jQuery harus menyediakan noConflict untuk melepaskan tanda dolar. Rangkaian solusinya ditelusuri satu per satu, dan tiap tahap menyisakan sisanya: IIFE agar isinya tidak bocor ke luar, lalu menempelkan semuanya pada satu objek induk sehingga yang mengotori global tinggal satu nama — bukan nol. Lalu Node.js membawa module.exports dan require yang akhirnya menyelesaikan dependensi sungguhan, disusul AMD dan UMD yang memuat modul secara asinkron tapi memunculkan masalah baru: berkas dimuat berantai dan waktu tunggunya menumpuk. Dari situlah Browserify lahir sebagai bundler pertama, dijalankan lewat task runner seperti Grunt atau Gulp, dan diteruskan Webpack serta Rollup — menghitung seluruh rantai dependensi lebih dulu, lalu menyerahkan satu berkas jadi ke browser. Key points: - Tugas inti bundler hanya dua: menyelesaikan dependensi antar berkas dan mengemas semuanya jadi satu - Hampir semua orang memakainya tanpa sadar — Laravel pun menyertakan Webpack Mix siap pakai tanpa perlu menulis konfigurasi sendiri - Dulu semua berkas mendarat di global namespace sehingga urutan tag script menentukan segalanya, dan dua pustaka bernama sama bisa saling merusak - Konflik itu nyata: beberapa plugin WordPress masing-masing membawa jQuery sendiri, sampai jQuery harus menyediakan noConflict untuk melepaskan tanda dolar - IIFE mencegah isinya bocor ke luar, tapi menempelkan semuanya pada satu objek induk hanya menyisakan satu nama global — bukan nol - Node.js membawa module.exports dan require, lalu AMD dan UMD memuat modul secara asinkron tapi berkasnya jadi dimuat berantai dan waktu tunggunya menumpuk - Browserify lahir sebagai bundler pertama dan dijalankan lewat Grunt atau Gulp, lalu diteruskan Webpack dan Rollup yang menghitung rantai dependensi lebih dulu Full transcript available on the episode page. ## EP 37: Ngobrolin DevTools - Ngobrolin WEB ep38 - Published: 2023-06-21 - URL: https://ngobrol.in/episodes/zzhCUMQNjN8-ngobrolin-devtools-ngobrolin-web-ep38 - YouTube: https://www.youtube.com/watch?v=zzhCUMQNjN8 Chrome DevTools dibahas sebagai salah satu alasan sesungguhnya orang bertahan pada sebuah browser — bukan mesin renderingnya, melainkan seberapa nyaman alat bantunya dipakai sehari-hari. Ceritanya dimulai dari Firebug, extension Firefox yang dulu jadi hal pertama yang dipasang orang setiap habis memasang ulang Windows, dan yang membuat menyunting CSS langsung di halaman jadi mungkin. DevTools yang kita pakai sekarang justru terinspirasi darinya; sebagian orang Firebug kemudian direkrut Google untuk membangun Chrome DevTools, dan sisanya membangun DevTools bawaan Firefox. Obrolan ini juga menyinggung keanehan yang jarang disadari: JavaScript tidak punya situs dokumentasi resminya sendiri. Alasannya karena ia implementasi dari spesifikasi ECMAScript dan tiap browser menafsirkannya masing-masing — sampai akhirnya MDN, yang dibuat Mozilla, justru diterima semua orang sebagai rujukan bersama. Sisanya tur fitur yang sering luput. Alat bantu visual untuk grid dan flexbox menampilkan garis panduannya langsung di halaman. Ada tangkapan layar seluruh halaman dari atas sampai bawah tanpa extension apa pun, bahkan per elemen lewat klik kanan. Ada pemblokiran request jaringan tertentu, berguna saat ingin memeriksa situs klien tanpa gangguan skrip iklan. Ada palet perintah lewat Command+Shift+P yang mempercepat semuanya. Disebut pula fitur 3D view Firefox yang dulu ada lalu dihapus karena berat, sementara Chrome punya panel Layers yang mirip meski kurang fancy, serta YSlow dari era Yahoo sebagai leluhur Lighthouse. Key points: - Kenyamanan DevTools sering jadi alasan sesungguhnya orang bertahan pada satu browser, bukan mesin renderingnya - Chrome DevTools terinspirasi dari Firebug, dan sebagian orang Firebug kemudian direkrut Google untuk membangunnya sementara sisanya membangun DevTools bawaan Firefox - JavaScript tidak punya situs dokumentasi resmi karena ia implementasi spesifikasi ECMAScript — yang jadi rujukan bersama justru MDN buatan Mozilla - Alat bantu visual untuk grid dan flexbox menampilkan garis panduannya langsung di halaman, sangat menolong saat hasilnya tidak sesuai bayangan - Tangkapan layar seluruh halaman bisa dilakukan tanpa extension apa pun, bahkan per elemen lewat klik kanan - Request jaringan tertentu bisa diblokir, berguna saat memeriksa situs tanpa gangguan skrip iklan yang bukan urusan kita - Palet perintah lewat Command+Shift+P mempercepat semuanya, dan Firefox pernah punya 3D view untuk melihat lapisan halaman sebelum dihapus karena berat Full transcript available on the episode page. ## EP 36: Ngobrolin SVG - Ngobrolin WEB - Published: 2023-06-14 - URL: https://ngobrol.in/episodes/GIlzAKp7rI8-ngobrolin-svg-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=GIlzAKp7rI8 SVG dibahas sebagai format gambar yang berbeda jenisnya dari JPEG atau PNG: ia bukan kumpulan titik warna melainkan rangkaian bentuk yang dihitung ulang, sehingga tetap tajam berapa pun ukurannya. Karena isinya sebenarnya teks berformat XML, ia bisa ditulis dan disunting seperti dokumen biasa, diberi atribut, ditata dengan CSS, bahkan dianimasikan. Bentuk dasarnya hanya segelintir — lingkaran, elips, garis, path, poligon, dan persegi — tapi dari situ hampir semua ilustrasi bisa dibangun, dan editor seperti Figma mengekspornya langsung. Wilayah pemakaiannya jelas: ikon, logo, dan ilustrasi bergaya gambar, bukan foto. Keuntungannya berlipat untuk performa: ukurannya kecil karena bisa dimampatkan seperti teks, dan ia bisa di-inline langsung ke dalam halaman sehingga muncul begitu markup-nya dibaca, tanpa permintaan tambahan ke server. Untuk logo di bagian paling atas halaman, itu bedanya terasa. Di React pun ia bisa ditempel sebagai elemen JSX biasa, asal atributnya disesuaikan. Cerita yang paling mengena adalah Font Awesome, pustaka ikon yang dulunya berupa web font. Pendekatan itu ditinggalkan karena memuat ribuan ikon demi memakai dua di antaranya jelas boros, dan karena font memang dibuat untuk teks — ketika lambat dimuat, yang muncul justru huruf-huruf aneh alih-alih ikonnya. Ditutup dengan dua contoh ekstrem: dynamic favicon yang berubah warna mengikuti dark mode atau light mode cukup dengan aturan CSS di dalam berkasnya, dan sebuah charting library yang seluruh grafiknya dirakit dari SVG tanpa JavaScript sama sekali. Key points: - SVG bukan kumpulan titik warna seperti JPEG atau PNG melainkan bentuk yang dihitung ulang, jadi tetap tajam berapa pun ukurannya — dan isinya teks XML yang bisa disunting seperti dokumen - Bentuk dasarnya hanya segelintir — lingkaran, elips, garis, path, poligon, persegi — dan dari situ hampir semua ilustrasi bisa dibangun, termasuk hasil ekspor Figma - Karena berupa teks, ia bisa di-inline langsung ke dalam halaman sehingga muncul begitu markup dibaca, tanpa permintaan tambahan ke server — penting untuk logo di bagian paling atas - Di React, SVG bisa ditempel sebagai elemen JSX biasa asalkan atribut-atributnya disesuaikan - Font Awesome ditinggalkan sebagai web font karena memuat ribuan ikon demi memakai dua di antaranya jelas boros, dan karena font memang dibuat untuk teks - Kelemahan ikon berbasis font terlihat saat lambat dimuat: yang muncul justru huruf-huruf aneh alih-alih ikonnya - Contoh ekstremnya dynamic favicon yang mengikuti dark mode lewat CSS di dalam berkasnya, dan charting library yang seluruh grafiknya dirakit dari SVG tanpa JavaScript Full transcript available on the episode page. ## EP 35: Ngobrolin Otomasi bersama Jecelyn - Ngobrolin WEB ep36 - Published: 2023-06-07 - URL: https://ngobrol.in/episodes/2Kcb9uIQW8M-ngobrolin-otomasi-bersama-jecelyn-ngobrolin-web-ep36 - YouTube: https://www.youtube.com/watch?v=2Kcb9uIQW8M Episode ini kedatangan Jecelyn dari Malaysia, yang bekerja di tim Chrome DevTools untuk urusan debugging dan otomasi pengujian. Sebagian besar obrolan berbahasa Inggris, dibuka dengan kisah perjalanannya: masuk ke dunia IT lewat beasiswa yang menyediakan uang saku, sempat ditolak mentah-mentah di wawancara pertama karena dianggap tidak layak melamar, lalu perlahan aktif berbagi dan mengurus komunitas — termasuk mendirikan komunitas pengembang perempuan karena di kantornya nyaris tidak ada rekan perempuan. Dari kebiasaan berbagi itulah pintu-pintu berikutnya terbuka. Topik utamanya evolusi otomasi browser, dan dua protokol yang berbeda kekuatannya. CDP, Chrome DevTools Protocol, berjalan di atas WebSocket sehingga cepat, dua arah, dan bisa mengendalikan hal-hal tingkat rendah seperti mencegat request jaringan, memalsukan lokasi, atau membaca pesan konsol — tapi ia bukan standar, sehingga bisa berubah sewaktu-waktu dan hanya jalan di Chrome dan Chromium. Di sisi lain WebDriver Classic adalah standar yang jalan di mana-mana, tapi searah dan tidak menjangkau hal-hal tingkat rendah itu. Jalan keluarnya adalah WebDriver BiDi, yang menggabungkan keduanya: standar lintas browser sekaligus dua arah. Yang membuatnya meyakinkan adalah siapa yang menggarapnya bersama — Selenium dan WebDriver IO ikut dalam kolaborasinya, karena merekalah yang paling tahu bagaimana API semacam ini seharusnya bekerja. Dijelaskan juga pembagian perannya: Chrome DevTools ada di ranah debugging, sementara Puppeteer ada di ranah testing, dan pekerjaannya justru berdiri di persimpangan keduanya. Key points: - Tamunya bekerja di tim Chrome DevTools; jalannya ke sana dimulai dari beasiswa beruang saku dan wawancara pertama yang menolaknya mentah-mentah - Ia mendirikan komunitas pengembang perempuan karena di kantornya nyaris tidak ada rekan perempuan, dan dari kebiasaan berbagi itulah pintu berikutnya terbuka - CDP berjalan di atas WebSocket sehingga cepat, dua arah, dan bisa mencegat request jaringan atau memalsukan lokasi — tapi bukan standar dan hanya jalan di Chrome dan Chromium - WebDriver Classic kebalikannya: standar yang jalan di semua browser, tapi searah dan tidak menjangkau kendali tingkat rendah - WebDriver BiDi menggabungkan keduanya — standar lintas browser sekaligus dua arah - Yang membuatnya meyakinkan adalah kolaborasinya: Selenium dan WebDriver IO ikut menggarap, karena merekalah yang paling tahu bagaimana API semacam ini seharusnya bekerja - Pembagian ranahnya jelas: Chrome DevTools di sisi debugging, Puppeteer di sisi testing, dan pekerjaannya berdiri di persimpangan keduanya Full transcript available on the episode page. ## EP 34: Ngobrolin Core Web Vitals - Ngobrolin WEB ep35 - Published: 2023-05-30 - URL: https://ngobrol.in/episodes/y7orEQReOns-ngobrolin-core-web-vitals-ngobrolin-web-ep35 - YouTube: https://www.youtube.com/watch?v=y7orEQReOns Core Web Vitals dibahas mulai dari alasan kemunculannya. Sebelum ada patokan bersama, orang mengukur kecepatan dengan YSlow, PageSpeed, dan GTmetrix yang berlomba memberi skor huruf, dan semuanya cenderung berbicara soal angka teknis. Pemicunya adalah kenyataan bahwa halaman web makin berat sejak era framework JavaScript modern — bundle-nya saja bisa menembus 4 MB sebelum menghitung gambar — sementara kecepatan internet dan kemampuan ponsel Android awal 3,5G tidak melaju secepat itu. Google akhirnya merumuskan Web Vitals lewat Lighthouse dan Performance API supaya ada standar bersama. Yang membedakannya adalah sudut pandang. Alih-alih mengukur seberapa cepat server menjawab atau seberapa cepat berkas terunduh, Core Web Vitals berangkat dari apa yang benar-benar dirasakan pengunjung. Contoh yang dipakai: kotak pencarian yang langsung menampilkan huruf yang kita ketik terasa jauh lebih responsif daripada yang menahannya dulu, meski hasil pencariannya sama-sama datang dalam waktu yang sama. Karena itu pula TTFB (Time to First Byte) tetap diukur tapi tidak masuk ke dalam tiga metrik inti — ia penting dan memengaruhi LCP maupun yang lain, tapi tidak langsung terlihat oleh pengunjung. Tiga metriknya dibedah satu per satu: LCP dan kenapa nilainya bisa memburuk tanpa disadari karena elemen terbesarnya bisa berpindah — kalau gambar utama dibiarkan lazy load, mula-mula judulnya yang terhitung lalu berganti ke gambar begitu selesai dimuat. Lalu CLS, yang disebut paling sulit diperbaiki karena skornya rata-rata seluruh halaman dan sumber terparahnya adalah iklan dan embed TikTok atau Twitter yang tingginya tak bisa ditebak; obatnya aspect-ratio CSS, font fallback yang dimensinya dicocokkan, dan untuk embed hanya bisa diakali lewat field data seperti yang ditulis BuzzFeed. Terakhir FID yang akan digantikan INP mulai tahun depan. Ditutup dengan penelusuran langsung lewat Performance Insights di Chrome DevTools dan PageSpeed Insights, plus catatan bahwa data lapangan di Search Console berasal dari CrUX dan baru terlihat setelah 28 hari. Key points: - Core Web Vitals lahir sebagai inisiatif Google karena halaman web makin berat sejak era framework JavaScript modern, sementara kecepatan internet dan kemampuan ponsel tidak melaju secepat itu - Sebelumnya orang mengukur dengan YSlow, PageSpeed, dan GTmetrix yang berlomba memberi skor huruf; Lighthouse hanyalah pelapor, data sebenarnya datang dari Performance API - TTFB tetap diukur tapi tidak masuk tiga metrik inti — ia memengaruhi LCP dan semuanya, tapi tidak langsung terlihat oleh pengunjung - Elemen LCP bisa berpindah: kalau gambar utama dibiarkan lazy load, mula-mula judulnya yang terhitung lalu berganti ke gambar, dan skornya ikut melar di atas 3 detik - CLS disebut paling sulit diperbaiki karena skornya rata-rata seluruh halaman; aspect-ratio CSS menolong untuk gambar dan video, tapi embed TikTok atau Twitter hanya bisa diakali lewat field data seperti yang ditulis BuzzFeed - FID hanya mengukur interaksi pertama dan akan digantikan INP, yang mengukur semua klik, tap, dan keypress — diumumkan di Google I/O 2023 agar developer punya waktu bersiap - Semuanya bisa ditelusuri lewat Performance Insights di Chrome DevTools atau PageSpeed Insights, sementara field data di Search Console berasal dari CrUX dan baru terlihat setelah 28 hari Full transcript available on the episode page. ## EP 33: Ngobrolin Google IO Lebih Dalam - Ngobrolin WEB ep34 - Published: 2023-05-24 - URL: https://ngobrol.in/episodes/OwdCWP1FWNE-ngobrolin-google-io-lebih-dalam-ngobrolin-web-ep34 - YouTube: https://www.youtube.com/watch?v=OwdCWP1FWNE Melanjutkan rangkuman umum minggu sebelumnya, episode ini memilih beberapa topik dari Google I/O untuk dibedah lebih dalam. Yang pertama soal masuk tanpa kata sandi. Titik berangkatnya keluhan yang semua orang kenali: setiap layanan meminta kata sandi, dan konsekuensinya kita memakai kata sandi yang sama di mana-mana. Web authentication API menawarkan jalan lain — memakai sidik jari, wajah, atau kunci fisik langsung dari browser, dengan kunci rahasianya tetap tinggal di perangkat dan hanya kunci publiknya yang dikirim ke server. Dua hal membuatnya menarik. Pertama, karena kredensialnya terikat pada domain tempat ia didaftarkan, situs tiruan yang dibuat semirip mungkin tidak akan mengenali akun kita — jadi ia sekaligus penangkal penipuan lewat situs palsu. Kedua, karena tidak ada kata sandi yang disimpan di server, tidak ada yang bisa ditebak paksa maupun bocor. Alurnya sendiri hanya dua fungsi: mendaftar dan mengambil. Karena bentuknya standar, perangkat keras jenis baru bisa langsung terpakai tanpa menulis kode berbeda. Topik kedua soal WebAssembly, yang sempat terasa senyap padahal adopsinya justru besar di produk-produk berat: perangkat desain, penyunting gambar, sampai permainan yang dulu mustahil hidup di browser. Nilainya bagi mereka adalah tidak perlu menulis ulang basis kode raksasa demi bisa jalan di web. Alasan perkembangannya sempat tersendat pun terjawab: versi awalnya belum mendukung bahasa yang punya pengelola memori otomatis, dan itulah yang dibuka di versi berikutnya. Dampaknya beruntun — basis data, pengolah video, sampai mesin permainan kini bisa berjalan langsung di sisi pengunjung tanpa perjalanan ke server. Key points: - Masuk tanpa kata sandi bekerja dengan menyimpan kunci rahasia di perangkat dan hanya mengirim kunci publik ke server — jadi tidak ada kata sandi yang bisa bocor atau ditebak paksa - Kredensialnya terikat pada domain tempat ia didaftarkan, sehingga situs tiruan semirip apa pun tidak akan mengenali akun kita — sekaligus jadi penangkal penipuan lewat situs palsu - Alurnya hanya dua fungsi, mendaftar dan mengambil, dan karena bentuknya standar, perangkat keras jenis baru langsung terpakai tanpa menulis kode berbeda - Ia bukan pengganti pengiriman data yang aman — untuk mengirim data ke server tetap perlu mekanismenya sendiri, karena lingkupnya hanya mengesahkan siapa penggunanya - WebAssembly terasa senyap tapi adopsinya justru besar di produk berat, karena nilainya adalah tidak perlu menulis ulang basis kode raksasa demi bisa jalan di web - Perkembangannya sempat tersendat karena versi awal belum mendukung bahasa yang punya pengelola memori otomatis — itulah yang dibuka di versi berikutnya - Dampaknya beruntun: basis data, pengolah video, sampai mesin permainan kini bisa berjalan langsung di sisi pengunjung tanpa perjalanan ke server Full transcript available on the episode page. ## EP 32: Ngobrolin Google IO - Ngobrolin WEB ep33 - Published: 2023-05-17 - URL: https://ngobrol.in/episodes/mUrwxwrehqE-ngobrolin-google-io-ngobrolin-web-ep33 - YouTube: https://www.youtube.com/watch?v=mUrwxwrehqE Episode ini merangkum apa yang menarik dari Google I/O tahun itu, khususnya sisi web. Pembukanya sebuah pengamatan iseng tapi telak: tahun-tahun sebelumnya semua orang bicara web3, sekarang tidak ada yang menyebutnya lagi dan semua beralih ke AI. Bedanya, yang diumumkan di ajang seperti ini bukan sekadar hype melainkan produk yang benar-benar ada. Topik yang paling banyak dibahas adalah otentikasi. Passkey — yang API-nya sendiri bernama berbeda dan lebih sulit disebut — memungkinkan aplikasi web memakai sidik jari, pengenalan wajah, atau kunci fisik langsung lewat web API, tanpa pustaka tambahan. Posisinya bukan pengganti kata sandi melainkan pengganti faktor kedua, jadi tetap ada jalan cadangan. Dibahas pula bahwa alur masuk yang terlalu berlapis justru membuat orang enggan, dan tren sekarang bergeser ke tautan sekali pakai yang dikirim lewat surel — yang pada dasarnya sekerabat dengan kode sekali pakai. Bagian privasinya menjelaskan kenapa persoalannya tidak selesai hanya dengan menghapus cookie pihak ketiga. Ada teknik yang membaca detail-detail perangkat dan browser lalu merangkumnya jadi satu sidik unik — dan sidik itu tetap sama meski kita berpindah ke mode penyamaran, karena browsernya toh sama. Itulah yang coba dijawab oleh inisiatif privasi baru, mengikuti pengetatan aturan data di banyak negara. Disinggung juga alat analitik alternatif yang mengedepankan privasi, dengan catatan jujur bahwa skalanya belum tentu meyakinkan bagi perusahaan. Key points: - Pengamatan pembuka yang telak: web3 tak lagi disebut siapa pun dan semua beralih ke AI — bedanya yang diumumkan di ajang seperti ini adalah produk nyata, bukan sekadar hype - Passkey memungkinkan aplikasi web memakai sidik jari, pengenalan wajah, atau kunci fisik langsung lewat web API tanpa pustaka tambahan - Posisinya bukan pengganti kata sandi melainkan pengganti faktor kedua, jadi jalan cadangan tetap harus disediakan - Alur masuk yang terlalu berlapis justru membuat orang enggan — dan tren bergeser ke tautan sekali pakai lewat surel, yang pada dasarnya sekerabat dengan kode sekali pakai - Menghapus cookie pihak ketiga tidak menyelesaikan pelacakan: detail perangkat dan browser bisa dirangkum jadi satu sidik unik yang tetap sama meski kita berpindah ke mode penyamaran - Inisiatif privasi baru dari tim browser muncul mengikuti pengetatan aturan data di banyak negara, bukan sekadar inisiatif teknis - Ada alat analitik alternatif yang mengedepankan privasi dan sebagian open source, meski skalanya belum tentu meyakinkan bagi perusahaan besar Full transcript available on the episode page. ## EP 31: Ngobrolin React+Komunitas - Ngobrolin WEB ep32 - Published: 2023-05-09 - URL: https://ngobrol.in/episodes/_5-m3tfD5tU-ngobrolin-reactkomunitas-ngobrolin-web-ep32 - YouTube: https://www.youtube.com/watch?v=_5-m3tfD5tU Episode ini kedatangan beberapa penggerak Komunitas React Indonesia, dan dibuka dengan perdebatan klasik: React itu pustaka atau framework? Kesepakatannya pustaka — yang disediakannya adalah cara merender antarmuka lewat virtual DOM, sementara ke mana hasilnya digambar bisa bermacam-macam: React DOM untuk web, React Native untuk ponsel, custom renderer untuk UI game seperti Battlefield 1 milik EA, bahkan Ink untuk aplikasi terminal. Framework justru berdiri di atasnya — Next.js di atas React. Bagian yang paling menarik adalah cerita di balik pilihan desainnya. React memakai class di masa awal karena saat itu gaya berorientasi objek sedang jadi arus utama à la Backbone, dan tujuannya membuat pendatang merasa familiar sebelum akhirnya diarahkan ke gaya fungsional. Ada pula sisi strategisnya: React muncul tepat ketika pengguna Angular 1 melihat Angular 2 yang berubah total — dari MVVM menjadi full class, dependency injection, dan taruhan pertama pada TypeScript — sementara satu-satunya saran migrasi yang ditawarkan adalah menulis ulang seluruh aplikasi. Banyak yang akhirnya melirik ke tempat lain. Perkembangan terbarunya juga dibahas: Next.js sempat gagal pivot ke static, lalu bermain di serverless, dan akhirnya mengambil banyak ide progressive enhancement yang dipelopori Remix, yang dituangkan jadi App Router di Next.js 13.4 berkat React Server Components. Setengah episodenya justru tentang komunitas, dan ceritanya jujur. Komunitas React Indonesia tidak punya pendiri tunggal maupun ketua — ia tumbuh dari beberapa gerakan akar rumput yang berjalan sendiri-sendiri di Telegram, Discord, dan kanal masing-masing. Upaya menyatukan semuanya ke satu tempat pernah dicoba dan gagal, karena komunitas bukan perusahaan yang bisa diperintah pindah; orang tetap hidup di tempat yang sudah nyaman bagi mereka. Yang aktif sekarang menyebut diri sekadar penerus, bukan pemilik, dan terbuka bagi siapa pun yang mau ikut menghidupkan. Ditutup dengan pengakuan bahwa meetup pun tidak harus formal — berkumpul dan mengobrol spontan sudah cukup. Key points: - React disepakati sebagai pustaka, bukan framework: yang disediakannya cara merender antarmuka lewat virtual DOM, sementara Next.js justru framework yang berdiri di atasnya - Karena itu React dipakai jauh melampaui web — React Native untuk ponsel, custom renderer untuk UI game seperti Battlefield 1 milik EA, bahkan Ink untuk aplikasi terminal - React memakai class di masa awal karena gaya berorientasi objek à la Backbone sedang jadi arus utama, jadi pendatang merasa familiar sebelum akhirnya diarahkan ke gaya fungsional - React tumbuh tepat ketika pengguna Angular 1 melihat Angular 2 yang berubah total — dari MVVM ke full class, dependency injection, dan TypeScript — dengan satu-satunya saran migrasi berupa menulis ulang seluruh aplikasi - Next.js sempat gagal pivot ke static lalu bermain di serverless, dan akhirnya mengambil ide progressive enhancement yang dipelopori Remix menjadi App Router di 13.4 berkat React Server Components - Komunitas React Indonesia tidak punya pendiri tunggal maupun ketua — ia tumbuh dari beberapa gerakan akar rumput yang berjalan sendiri-sendiri di Telegram, Discord, dan kanalnya masing-masing - Upaya menyatukan semua kanal ke satu tempat pernah dicoba dan gagal, karena komunitas bukan perusahaan yang bisa diperintah pindah — dan meetup tidak harus formal, berkumpul dan mengobrol spontan sudah cukup Full transcript available on the episode page. ## EP 30: Ngobrolin Accessibility - Ngobrolin WEB ep31 - Published: 2023-05-03 - URL: https://ngobrol.in/episodes/ypxWNOnW10Y-ngobrolin-accessibility-ngobrolin-web-ep31 - YouTube: https://www.youtube.com/watch?v=ypxWNOnW10Y Aksesibilitas dibahas berangkat dari satu kekeliruan yang sering kita lakukan: menganggap pengguna kita sama seperti kita sendiri. Sama seperti soal performa, di mana kita mengasumsikan semua orang punya koneksi lancar, di sini kita mengasumsikan semua orang melihat, mendengar, dan bergerak seperti kita. Padahal cakupannya luas — dari buta warna sebagian, penglihatan yang menurun karena usia, gangguan motorik, sampai kemampuan memahami. Ivan bercerita jujur bahwa ia mulai mempelajarinya karena tuntutan hukum: sebuah bank internasional mensyaratkan situsnya lolos WCAG level AAA, sejajar dengan GDPR dan urusan keamanan lain. Di banyak negara aturan itu memang kelanjutan dari aturan fisik yang sudah lama ada — bangunan publik wajib menyediakan akses kursi roda, trotoar wajib punya jalur khusus Tuna Netra. Karena infrastruktur pindah ke digital, kewajibannya ikut pindah. Yang menarik adalah efek yang meluas. Landaian di ujung trotoar mula-mula dibuat untuk pengguna kursi roda, tapi ternyata membantu jauh lebih banyak orang, termasuk yang mendorong stroller. Begitu pula di web: pengaturan ukuran teks dan kontras yang baik menolong bukan hanya mereka yang penglihatannya terbatas. Navigasi lewat tombol tab pun sama — dipakai mereka yang tak bisa memakai tetikus sekaligus pengguna mahir yang enggan memindahkan tangan. WCAG dari W3C menyediakan patokan teknis berjenjang dari A sampai AAA, dan Lighthouse menangkap yang paling dasar seperti kontras warna — tapi lolos pemeriksaan bukan jaminan: alt text yang asal tulis tetap lolos padahal tidak menolong pengguna screen reader. Key points: - Kekeliruan paling dasar adalah menganggap semua pengguna seperti kita sendiri — sama seperti mengasumsikan semua orang punya koneksi internet lancar - Tuntutan hukum bisa jadi pemicunya: sebuah bank internasional mensyaratkan situsnya lolos WCAG level AAA, sejajar dengan GDPR dan urusan keamanan lain - Aturan aksesibilitas digital adalah kelanjutan aturan fisik yang lebih dulu ada, seperti akses kursi roda dan jalur khusus Tuna Netra di trotoar - Landaian trotoar dibuat untuk pengguna kursi roda tapi menolong jauh lebih banyak orang — prinsip yang sama berlaku di web - Navigasi lewat tombol tab dipakai mereka yang tidak bisa memakai tetikus sekaligus pengguna mahir yang enggan memindahkan tangan - WCAG dari W3C memberi patokan teknis berjenjang dari A sampai AAA, dan Lighthouse menangkap yang paling dasar seperti kontras warna - Lolos pemeriksaan bukan jaminan: alt text yang asal tulis tetap lolos padahal tidak menolong pengguna screen reader Full transcript available on the episode page. ## EP 29: Ngobrolin Templating Language - Ngobrolin WEB ep30 - Published: 2023-04-25 - URL: https://ngobrol.in/episodes/mJ6t8TJc6cQ-ngobrolin-templating-language-ngobrolin-web-ep30 - YouTube: https://www.youtube.com/watch?v=mJ6t8TJc6cQ Apa pun yang kita pakai untuk membangun web — React, Vue, Svelte, atau Laravel — kita tidak pernah benar-benar lepas dari templating language. Semuanya punya sintaksnya sendiri untuk menyisipkan nilai ke dalam markup, dari JSX sampai direktif Vue, dan meski bentuknya berbeda tujuannya sama persis. Justru perbedaan sintaks itulah yang merepotkan ketika kita berpindah antar proyek. Akarnya sederhana: HTML tidak mengenal logika. Tidak ada perulangan, tidak ada percabangan. Padahal isi halaman datang dari basis data dan bentuknya berubah-ubah. Tanpa templating, satu-satunya jalan adalah merangkai potongan string HTML di dalam controller — yang berujung pada controller gemuk dan lapisan tampilan bercampur logika bisnis. Templating mengembalikan pemisahan itu sekaligus membuat markup bisa dipecah jadi bagian yang dipakai berulang seperti header dan footer. Berbagai gayanya dibandingkan, dari Smarty di era PHP lama, Blade di Laravel, EJS di ekosistem Node, sampai Jade yang menghapus tag penutup sama sekali dan hanya mengandalkan indentasi — gaya yang memecah orang jadi sangat suka atau sangat benci, dan yang sampai sekarang masih bisa dipakai di CodePen bersama Slim dan Haml. Perbedaannya sering soal selera dan bahkan kenyamanan mengetik: kurung kurawal ganda ala Handlebars lebih cepat diketik daripada kombinasi bersimbol. Satu hal yang bukan soal selera adalah keamanan: sintaks yang menampilkan isi apa adanya tanpa escaping berbahaya kalau isinya datang dari pengunjung — aturannya sanitize early, escape late. Key points: - Semua framework punya templating language-nya sendiri dengan tujuan identik — dari JSX sampai direktif Vue; yang merepotkan justru berpindah sintaks antar proyek - Akarnya sederhana: HTML tidak mengenal perulangan maupun percabangan, padahal isi halaman datang dari basis data - Tanpa templating, markup harus dirangkai sebagai potongan string di dalam controller — controller jadi gemuk dan pemisahan tanggung jawabnya hilang - Templating juga memungkinkan markup dipecah jadi bagian yang dipakai berulang seperti header dan footer - Gayanya beragam: Smarty di era PHP lama, Blade di Laravel, EJS di Node, sampai Jade yang menghapus tag penutup dan hanya mengandalkan indentasi - Pilihan gaya sering soal selera dan kenyamanan mengetik — kurung kurawal ganda ala Handlebars lebih cepat diketik daripada kombinasi bersimbol - Sintaks yang menampilkan isi apa adanya tanpa escaping berbahaya kalau isinya dari pengunjung — aturannya sanitize early, escape late Full transcript available on the episode page. ## EP 28: Ngobrolin CMS - Ngobrolin WEB ep29 - Published: 2023-04-19 - URL: https://ngobrol.in/episodes/zc2NxphfHeE-ngobrolin-cms-ngobrolin-web-ep29 - YouTube: https://www.youtube.com/watch?v=zc2NxphfHeE Content management system dibahas sebagai kelanjutan alami dari episode-episode sebelumnya soal cara halaman dirender. Ceritanya sama: mula-mula berkas HTML ditulis manual lalu diunggah lewat FTP, kemudian muncul PHP dan basis data, dan dari sanalah lahir perangkat yang membuat isi situs bisa diubah tanpa menyentuh kode. Definisi yang mereka pakai sederhana — apa pun bentuk penyimpanannya, yang penting ada antarmuka tempat orang menyunting isi. Pertanyaan yang menarik: kalau membuat CRUD itu mudah bagi developer, kenapa repot memakai CMS jadi seperti WordPress atau Drupal? Jawabannya soal siapa yang memakainya — yang memperbarui isi sering kali bukan kita, melainkan tim pemasaran, klien, atau redaksi yang tidak menulis kode. Alasan kedua kesiapan menghadapi perubahan: ketika kebutuhan bertambah setelah beberapa bulan, sistem buatan sendiri berarti mengubah basis data dan menulis ulang, sementara CMS memang dirancang untuk diperluas lewat plugin. Situs berita disebut mempopulerkannya karena butuh penerbitan rutin dan masif oleh banyak orang, lengkap dengan peran penulis dan editor. Arah perkembangannya kini terbelah dua. Di satu sisi site builder tanpa kode seperti Wix, Squarespace, dan Webflow yang menggabungkan penyusunan tampilan dengan pengisian data. Di sisi lain headless CMS seperti Strapi, Contentful, Sanity, Directus, dan Ghost yang sengaja memisahkan pengelolaan isi dari lapisan tampilan: ia hanya menyediakan tempat mengelola konten beserta API-nya, sementara tampilannya bebas kita bangun — dan tidak harus web, bisa aplikasi ponsel bahkan papan iklan digital. Disinggung pula backend as a service seperti Firebase, Supabase, dan PocketBase. Key points: - CMS didefinisikan sederhana: apa pun bentuk penyimpanannya, yang penting ada antarmuka tempat orang menyunting isi tanpa menyentuh kode - Alasan memakai WordPress atau Drupal ketimbang membuat CRUD sendiri bukan kemalasan, melainkan siapa penggunanya — tim pemasaran, klien, atau redaksi yang tidak menulis kode - Alasan kedua kesiapan menghadapi perubahan: kebutuhan baru berarti ubah basis data dan tulis ulang kalau dibangun sendiri, sementara CMS dirancang diperluas lewat plugin - Situs berita mempopulerkan CMS karena butuh penerbitan rutin dan masif oleh banyak orang, lengkap dengan pembagian peran penulis dan editor - Kata kunci headless adalah pemisahan pengelolaan isi dari lapisan tampilannya — bukan berarti tidak ada tampilan, melainkan keduanya tidak lagi menyatu - Karena isinya dipanggil lewat API, satu sumber konten bisa melayani banyak wujud: situs, aplikasi ponsel, bahkan papan iklan digital di toko - Arahnya terbelah dua — site builder tanpa kode seperti Wix, Squarespace, dan Webflow, versus headless seperti Strapi, Contentful, Sanity, Directus, dan Ghost Full transcript available on the episode page. ## EP 27: Ngobrolin Format Warna - Ngobrolin WEB ep28 - Published: 2023-04-13 - URL: https://ngobrol.in/episodes/uYqnB9rhIaQ-ngobrolin-format-warna-ngobrolin-web-ep28 - YouTube: https://www.youtube.com/watch?v=uYqnB9rhIaQ Topik malam itu terdengar sepele tapi tak terhindarkan: menentukan warna di CSS. Sesedikit apa pun kita berurusan dengan sisi visual, membangun web berarti menuliskan warna — dan daftar formatnya sekarang panjang sekali: RGB dan RGBA, heksadesimal, HSL, HWB, Lab, LCH, sampai OKLCH. Dimulai dari yang paling sederhana, yaitu nama warna. Awalnya hanya ada enam belas, warisan sistem tampilan lama dengan nilai-nilai yang rapi dan simetris, lalu bertambah sekitar seratus lima puluh nama yang jauh lebih semaunya. Salah satunya punya kisah yang tidak lucu sama sekali: Rebecca Purple diabadikan untuk mengenang anak seorang pengembang yang meninggal saat masih kecil dan menyukai warna itu. Sisanya membandingkan format penulisan. RGB dan heksadesimal paling umum dan paling aman dukungannya, tapi keduanya tidak intuitif ketika kita hanya ingin sebuah warna sedikit lebih terang atau lebih gelap. Di situlah HSL dan HWB terasa lebih dekat dengan cara manusia berpikir — cukup tambahkan whiteness atau blackness, tanpa perlu memasang pustaka tambahan seperti dulu; skala warna Tailwind dipakai sebagai contoh yang sudah dihafal orang. Dibahas juga bahwa RGB punya sRGB sebagai versi standar, sehingga penyerahan desain sebaiknya menyepakati yang mana, dan Display P3 di spesifikasi CSS Color yang baru menjangkau warna yang sebelumnya tidak terjangkau. CMYK ditutup sebagai ranah percetakan, bukan pengganti yang setara di web. Key points: - Nama warna di CSS awalnya hanya enam belas, warisan sistem tampilan lama, lalu bertambah sekitar seratus lima puluh nama yang jauh lebih semaunya - Rebecca Purple punya kisah duka di baliknya: diabadikan untuk mengenang anak seorang pengembang yang meninggal saat masih kecil dan menyukai warna itu - RGB dan heksadesimal paling aman dukungannya tapi tidak intuitif — mencerahkan sedikit sebuah warna berarti membuka color picker, bukan menaikkan satu angka - HSL dan HWB lebih dekat dengan cara manusia berpikir: cukup tambah whiteness atau blackness-nya, tanpa perlu pustaka tambahan seperti dulu - RGB punya sRGB sebagai versi standar, jadi penyerahan desain sebaiknya menyepakati yang mana supaya warnanya tidak melenceng - Display P3 di spesifikasi CSS Color baru menjangkau warna yang sebelumnya tidak terjangkau — terasa untuk tampilan kaya, hampir tidak untuk teks dan dokumen - CMYK adalah ranah percetakan dengan gamut lebih sempit dari RGB dan tanpa transparansi, jadi bukan pengganti yang setara di web Full transcript available on the episode page. ## EP 26: Ngobrolin Web Jadul - Ngobrolin WEB ep27 - Published: 2023-04-05 - URL: https://ngobrol.in/episodes/2nJE0rvIUps-ngobrolin-web-jadul-ngobrolin-web-ep27 - YouTube: https://www.youtube.com/watch?v=2nJE0rvIUps Episode ini menyusuri teknologi web yang sudah wafat, sekarat, atau sekadar tak lagi ramai — sebuah obituari yang dibawakan sambil bernostalgia. Bintang utamanya Flash, yang aslinya perkakas animasi berbasis timeline tapi banyak dipakai membangun situs karena antarmukanya mudah dan perilakunya konsisten di semua browser, saat manipulasi DOM masih menyakitkan dan browser belum seragam. Harganya: tidak ada aksesibilitas sama sekali, dan pengunjung harus menunggu seluruh isinya terunduh dulu — kebalikan dari filosofi web sekarang. Ada benang merah yang menghubungkan hampir semua yang dibahas. Flash, ActiveX, Java Applet, Silverlight, dan Adobe Air sama-sama dibangun sendiri oleh masing-masing perusahaan, dan sama-sama berakhir. Justru dari kegagalan berpencar itulah standar web bersama menjadi jalan keluarnya. Menariknya, bahasa skrip di dalam Flash punya sintaks yang sangat mirip JavaScript dan ikut memengaruhi arah standarnya — jadi sesuatu darinya tetap hidup. Sisanya berisi kenangan lain: perkakas penyunting drag and drop yang lalu ditinggalkan orang demi mengetik kode sendiri, meski sekarang perkakas serupa muncul lagi dalam wujud baru; pustaka pembungkus yang dulu satu-satunya cara mengakses kamera dan GPS dari kode web, kini tergantikan karena web sendiri sudah mampu; serta protokol pertukaran data berbasis XML yang menghilang begitu format yang lebih sederhana terasa lebih masuk akal. Ditutup dengan elemen HTML yang membuat teks berjalan — masih hidup sampai sekarang, bukti bahwa kompatibilitas mundur benar-benar dijaga. Key points: - Flash aslinya perkakas animasi, tapi dipakai membangun situs karena perilakunya konsisten di semua browser saat manipulasi DOM masih menyakitkan dan browser belum seragam - Harganya mahal: situs berbasis Flash tidak punya aksesibilitas sama sekali, dan pengunjung harus menunggu seluruh isinya terunduh sebelum apa pun tampil - Flash, ActiveX, Java Applet, dan Adobe Air punya benang merah yang sama — dibangun sendiri oleh masing-masing perusahaan, dan semuanya berakhir; dari situlah standar web bersama jadi jalan keluar - Bahasa skrip di dalam Flash bersintaks sangat mirip JavaScript dan ikut memengaruhi arah standarnya, jadi sebagian darinya tetap hidup sampai sekarang - Perkakas penyunting drag and drop sempat ditinggalkan orang demi mengetik kode sendiri karena hasilnya berantakan — meski sekarang perkakas serupa muncul lagi dalam wujud baru - Pustaka pembungkus mobile dulu satu-satunya cara mengakses kamera dan GPS dari kode web; ia surut karena web sendiri akhirnya punya kemampuan itu - Elemen teks berjalan masih tetap jalan sampai sekarang meski jelas mengganggu — bukti bahwa browser benar-benar menjaga kompatibilitas mundur Full transcript available on the episode page. ## EP 25: Ngobrolin Teknologi Edge - Ngobrolin WEB ep25 - Published: 2023-03-22 - URL: https://ngobrol.in/episodes/J8qef9MI1rY-ngobrolin-teknologi-edge-ngobrolin-web-ep25 - YouTube: https://www.youtube.com/watch?v=J8qef9MI1rY Teknologi edge dibahas bersama Donny, head of engineering di Zero One Group, dan penjelasan paling gampangnya: mirip CDN, hanya saja yang ditaruh di banyak titik itu bukan sekadar berkas melainkan logika program. Permintaan pengunjung diarahkan ke lokasi terdekat lewat geolokasi IP — pengunjung dari Asia Tenggara dilayani dari Singapura kalau Jakarta belum ada — dan penyebaran ke puluhan titik terjadi sekaligus, sesuatu yang mustahil dilakukan sendiri baik dari sisi biaya maupun tenaga. Untuk web, artinya halaman bisa dirakit di server yang dekat dengan pengunjungnya, lengkap dengan bahasa, mata uang, dan pilihan produk sesuai wilayahnya; Vercel, Netlify dan Cloudflare Workers sudah menyediakan edge function untuk itu. Pertanyaan yang langsung muncul adalah nasib basis datanya. Dua jalan dibahas — Fly.io menyediakan klaster Postgres yang benar-benar tersebar di beberapa region, atau basis datanya ditahan tetap terpusat lalu cache-nya yang disebar. Yang kedua jauh lebih murah, meski membawa persoalan klasik: membatalkan cache adalah salah satu masalah paling sulit di komputasi. Disinggung juga Turso, yang membawa SQLite sendiri ke edge. Alasan edge bisa hidup begitu cepat adalah lapisan abstraksinya yang jauh lebih ringan. Ceritanya ditarik dari mesin fisik, ke virtualisasi, ke Docker dan Kubernetes, sampai ke runtime JavaScript yang berdiri di atas semuanya — makin ke atas makin cepat menyala. Mesin tiap penyedia berbeda-beda, Deno misalnya berdiri di atas V8, tapi karena semuanya mengacu pada standar web API yang sama, kode yang kita tulis tetap serupa. Ditutup dengan kenangan mengangkut server ke pusat data karena rumah kebanjiran, sebagai kontras dengan hari ini. Key points: - Edge paling mudah dipahami sebagai CDN yang bisa menjalankan logika program, bukan cuma menyajikan berkas — Vercel, Netlify dan Cloudflare Workers semuanya sudah menyediakan edge function - Permintaan diarahkan lewat geolokasi IP ke titik terdekat: pengunjung Asia Tenggara dilayani dari Singapura selama Jakarta belum ada - Halaman bisa dirakit dekat pengunjungnya lengkap dengan bahasa, mata uang, dan pilihan produk sesuai wilayah, bukan sekadar aset statis - Kalau aplikasi tersebar tapi basis datanya di satu benua, jaraknya tetap terasa — Fly.io menjawabnya dengan klaster Postgres tersebar, dan Turso dengan membawa SQLite ke edge - Jalan yang lebih murah adalah menyebar cache-nya saja, dengan konsekuensi klasik: membatalkan cache adalah salah satu masalah tersulit di komputasi - Edge cepat menyala karena abstraksinya jauh lebih ringan — jenjangnya dari mesin fisik, virtualisasi, Docker dan Kubernetes, sampai runtime JavaScript; mesin tiap penyedia berbeda, Deno misalnya berdiri di atas V8, tapi standar web API-nya sama sehingga kode yang ditulis tetap serupa - Serverless bukan berarti tidak ada server, melainkan servernya bukan kita yang maintain — analoginya wireless yang di dalamnya tetap ada kabel, hanya saja kita tidak berurusan dengannya Full transcript available on the episode page. ## EP 24: Ngobrolin TypeScript - Ngobrolin WEB ep24 - Published: 2023-03-15 - URL: https://ngobrol.in/episodes/cjqz5C0eWgc-ngobrolin-typescript-ngobrolin-web-ep24 - YouTube: https://www.youtube.com/watch?v=cjqz5C0eWgc TypeScript dibahas sebagai superset JavaScript — bahasanya tetap JavaScript, hanya ditambah anotasi tipe, interface, generic, dan sejenisnya, lalu dikompilasi kembali menjadi JavaScript karena itulah satu-satunya yang dimengerti browser. Analoginya seperti komentar dan sorotan pada dokumen yang sedang disunting: semuanya membantu selama menulis, tapi hilang begitu dokumen dicetak. Satu hal penting ditegaskan supaya tidak salah harap: pemeriksaan tipenya berlangsung statis, saat menulis dan mengompilasi. Begitu program berjalan, TypeScript tidak lagi memeriksa apa pun — jadi memakainya bukan jaminan bebas galat, terutama ketika data dari luar ternyata tidak sesuai bentuk yang diasumsikan. Nilainya justru pada mendelegasikan pekerjaan repetitif yang manusia memang buruk mengerjakannya: memeriksa typo, memastikan salinan akurat, mengingat bentuk data. Sebagai efek samping, menulis tipe memaksa kita mendokumentasikan apa yang kita buat. Dibahas juga alternatif yang lebih ringan berupa komentar dokumentasi di JavaScript biasa, lengkap dengan pengalaman nyata memakainya untuk mewarisi codebase asing tanpa dokumentasi dan tanpa kontak siapa pun — cukup untuk tipe sederhana, tapi menyiksa begitu berhadapan dengan objek bersarang. Sisanya membedah union type yang membatasi nilai pada beberapa kemungkinan saja, type predicate, dan strict mode yang memaksa kita memeriksa dulu apakah datanya benar-benar ada sebelum dipakai. Key points: - TypeScript adalah superset JavaScript yang harus dikompilasi kembali menjadi JavaScript, karena browser sampai sekarang hanya mengerti JavaScript - Pemeriksaan tipenya statis: begitu program berjalan, TypeScript tidak lagi memeriksa apa pun — jadi memakainya bukan jaminan bebas galat, terutama untuk data dari luar - Nilai utamanya adalah mendelegasikan pekerjaan repetitif yang manusia memang buruk mengerjakannya — memeriksa typo, memastikan salinan akurat, mengingat bentuk data - Menulis tipe memaksa kita mendokumentasikan: rekan kerja jadi bisa tahu sebuah fungsi menerima apa dan mengembalikan apa tanpa membaca isinya - Komentar dokumentasi di JavaScript biasa bisa jadi solusi cepat untuk codebase warisan yang tidak berdokumentasi, tapi sintaksnya menyiksa begitu berhadapan dengan objek bersarang - Union type membatasi nilai pada beberapa kemungkinan saja, sehingga salah ketik pada salah satu nilainya langsung tertangkap alih-alih lolos sebagai string sembarang - Strict mode memaksa kita memeriksa dulu apakah data benar-benar ada sebelum dipakai — persis kasus undefined yang biasanya baru meledak saat program berjalan Full transcript available on the episode page. ## EP 23: Ngobrolin Proyek Fugu - Ngobrolin WEB ep23 - Published: 2023-03-08 - URL: https://ngobrol.in/episodes/YMFz1Ky2E0k-ngobrolin-proyek-fugu-ngobrolin-web-ep23 - YouTube: https://www.youtube.com/watch?v=YMFz1Ky2E0k Proyek Fugu adalah nama panggilan yang lebih catchy untuk web capabilities project — upaya menutup jarak antara apa yang bisa dilakukan aplikasi native dan apa yang bisa dilakukan web. Dulu web hanya bisa menampilkan dokumen, sementara perangkat punya kamera, sensor, Bluetooth, NFC, USB, dan akses berkas. Peran itu sempat diisi oleh pustaka pembungkus dari pihak ketiga yang menyediakan jembatannya sendiri; sekarang kemampuan itu digarap langsung di lapisan browsernya. Nama ikan buntal Jepang itu dipilih bukan tanpa alasan: ikannya beracun dan bisa mematikan kalau disiapkan sembarangan, tapi konon lezat kalau disiapkan dengan hati-hati. Begitu pula API-nya. Yang membuatnya perlu ekstra hati-hati adalah betapa rendahnya ambang masuk web: sebuah aplikasi cukup dibuka lewat tautan, tanpa langkah sadar mengunduh dan memasang seperti aplikasi biasa. Maka akses berkas, papan klip, dan perangkat keras harus dijaga ketat agar tidak jadi jalan bagi penyalahgunaan. Setiap API melewati tahapan yang jelas dan bisa dilacak terbuka: dari sekadar usulan, ke percobaan yang harus diaktifkan sendiri oleh pengguna lewat flag, ke origin trial yang didaftarkan pemilik situs sehingga pengunjungnya tidak perlu melakukan apa-apa, sampai akhirnya stabil. Ada pula galeri contoh aplikasi nyata yang memakainya — berguna bukan hanya untuk belajar, tapi juga untuk meyakinkan tim bahwa hal seperti ini memang bisa dibangun di web. Kekhawatiran bahwa semua ini hanya jalan di satu keluarga browser diakui wajar, tapi karena bentuknya spesifikasi terbuka, adopsi oleh vendor lain sudah terjadi pada beberapa API. Key points: - Fugu adalah nama panggilan dari web capabilities project: menutup jarak antara kemampuan aplikasi native dan web, mulai dari kamera, Bluetooth, NFC, USB, sampai akses berkas - Namanya diambil dari ikan buntal yang beracun kalau disiapkan sembarangan tapi lezat kalau hati-hati — persis seperti API yang powerful tapi rawan disalahgunakan - Ambang masuk web sangat rendah karena cukup dibuka lewat tautan, tanpa langkah sadar mengunduh dan memasang seperti aplikasi biasa — itulah alasan keamanannya harus lebih ketat - Tahapannya berjenjang dan terbuka: usulan, percobaan lewat flag yang harus diaktifkan pengguna sendiri, origin trial yang didaftarkan pemilik situs, lalu stabil - Origin trial berarti pemilik situs yang mendaftar dan pengunjungnya tidak perlu melakukan apa-apa, sedangkan flag berarti penggunanya sendiri yang harus mengaktifkan - Galeri contoh aplikasi nyata berguna bukan hanya untuk belajar tapi juga untuk meyakinkan tim bahwa hal seperti itu benar-benar bisa dibangun di web - Kekhawatiran bahwa semuanya hanya jalan di satu keluarga browser wajar, tapi karena bentuknya spesifikasi terbuka, beberapa API sudah diadopsi vendor lain Full transcript available on the episode page. ## EP 22: Ngobrolin Interop 2023 - Ngobrolin WEB ep22 - Published: 2023-03-01 - URL: https://ngobrol.in/episodes/mN01Hg41tB8-ngobrolin-interop-2023-ngobrolin-web-ep22 - YouTube: https://www.youtube.com/watch?v=mN01Hg41tB8 Interop dipilih sebagai topik justru karena belum banyak yang tahu, padahal hasilnya langsung terasa: sejumlah fitur CSS baru yang menarik ternyata lahir dari proyek ini. Ceritanya dimulai dari sebuah survei mendalam pada 2019 tentang kebutuhan developer, yang lalu menjadi proyek percontohan bernama Compat 2021 — momen historis karena baru pertama kali Google, Mozilla, dan Apple duduk bersama untuk urusan web API, bukan hanya sesama keluarga Chromium. Namanya berganti jadi Interop mulai 2022 untuk menekankan interoperability alih-alih backwards compatibility, dan fokusnya terus bertambah: 5 area di 2021, 15 di 2022, dan 26 di 2023 karena yang belum tuntas ikut dibawa ke tahun berikutnya. Yang dikerjakan ternyata bukan sekadar menambah fitur. Kasus yang lebih menjengkelkan justru ketika sebuah fitur sudah didukung Chrome, Firefox, dan Safari tapi perilakunya berbeda-beda — situasi yang tidak bisa diakali dengan feature query, karena dukungannya memang ada. Maka yang dikerjakan adalah menyepakati perilaku itu sampai detail, memperjelas spesifikasi yang rancu, dan menuangkannya jadi web-platform-tests. Persentase kelulusan tiap browser bisa dipantau terbuka di dashboard wpt.fyi — pada dasarnya test-driven development, tapi untuk API browser. Manfaat praktisnya adalah rasa percaya diri. Selama ini fitur keren sering hanya jadi tontonan karena kita ragu memakainya di produksi, lalu memilih akal-akalan dengan JavaScript. Contohnya berderet dari daftar fokus 2023: satuan viewport yang menyesuaikan bilah alat, scroll snap dan scroll behavior untuk karusel tanpa menghitung piksel, subgrid untuk menata elemen cucu, container queries, color space dengan color-mix dan contrast, elemen dialog, custom element, serta selektor :has() untuk menata induk berdasarkan isinya. WebAssembly juga masuk daftar, dengan Figma, Adobe Photoshop, CodeSandbox dan GitHub Codespaces sebagai contoh yang sudah memakainya. Terlihat pula karakter masing-masing browser di dashboard itu — ada yang unggul di tata letak, ada yang di warna, ada yang di kemampuan baru. Key points: - Interop bermula dari survei mendalam kebutuhan developer pada 2019, lalu jadi Compat 2021 yang untuk pertama kalinya mempertemukan Google, Mozilla, dan Apple dalam urusan web API — bukan hanya sesama keluarga Chromium - Namanya berganti jadi Interop mulai 2022 untuk menekankan interoperability, dan fokusnya bertambah dari 5 area di 2021 jadi 15 di 2022 dan 26 di 2023 karena yang belum tuntas ikut dibawa - Masalah yang lebih menjengkelkan bukan fitur yang belum didukung, melainkan yang sudah didukung Chrome, Firefox, dan Safari tapi perilakunya berbeda — itu tidak bisa diakali dengan feature query - Hasilnya dituangkan jadi web-platform-tests dengan persentase kelulusan tiap browser terbuka di dashboard wpt.fyi — pada dasarnya test-driven development untuk API browser - Manfaat praktisnya adalah rasa percaya diri memakai fitur baru di produksi, alih-alih terus mengakalinya dengan JavaScript yang justru membebani main thread - Contoh dari daftar fokus 2023: satuan viewport yang menyesuaikan bilah alat, scroll snap untuk karusel tanpa menghitung piksel, subgrid, container queries, color-mix, elemen dialog, dan selektor :has() - WebAssembly juga masuk daftar Interop, dengan Figma, Adobe Photoshop, CodeSandbox dan GitHub Codespaces sebagai contoh yang sudah memakainya Full transcript available on the episode page. ## EP 21: Ngobrolin Belajar - Ngobrolin WEB Ep21 - Published: 2023-02-22 - URL: https://ngobrol.in/episodes/18LNXOF8IPA-ngobrolin-belajar-ngobrolin-web-ep21 - YouTube: https://www.youtube.com/watch?v=18LNXOF8IPA Episode ini kedatangan bintang tamu dari kanal Web Programming UNPAS, dan pembahasannya berangkat dari satu pertanyaan penonton yang sudah lama menunggu: sudah belajar HTML dan CSS, lalu harus ke mana? Sebelum menjawab, keempatnya bergantian menceritakan jalur masing-masing — dari desainer grafis yang jatuh cinta pada antarmuka yang bisa diklik, dari kuliah berbasis produk Microsoft yang lalu berbelok ke open source lewat kelompok studi Linux, dan dari menyunting profil band di Myspace dengan CSS sambil menyimpan artikel ke flashdisk di warnet. Saran teknisnya konsisten: mulai dari fundamental, dan sebelum itu pahami dulu gambaran besar cara web bekerja — apa itu request dan response, apa itu domain, hosting, dan server. Baru setelah itu masuk ke HTML, CSS, dan seterusnya. Framework tidak dianggap musuh; justru dipakai sebagai pintu masuk, karena penasaran pada apa yang terjadi di baliknya sering membawa kita ke fundamental yang belum dikuasai. Cerita paling berkesan datang dari pengalaman terjebak selama tiga bulan mencoba memahami sebuah framework PHP dan tetap tidak mengerti. Framework itu akhirnya ditinggalkan, diganti delapan bulan mempelajari pemrograman berorientasi objek dan pola MVC dari nol. Ketika dokumentasinya dibuka lagi, semuanya terang — yang dikira fitur khusus framework itu ternyata fitur bahasanya sendiri. Dari sana lahir aturan sederhananya: kalau sudah baca dokumentasi dan tetap buntu, berarti ada fundamental yang terlewat. Ditutup dengan pembahasan tutorial hell dan tanda bahwa kita benar-benar sudah bisa. Key points: - Sebelum HTML dan CSS, pahami dulu gambaran besar cara web bekerja: apa itu request dan response, domain, hosting, dan server — supaya tahu kenapa sebuah alamat bisa memunculkan halaman - Kalau sudah membaca dokumentasi dan tetap buntu, itu tanda ada fundamental yang terlewat: tinggalkan dulu framework-nya, pelajari dasarnya, lalu kembali — dokumentasinya akan terang dengan sendirinya - Framework bukan musuh fundamental; justru rasa penasaran pada apa yang terjadi di baliknya sering menjadi jalan masuk untuk mempelajarinya, asal tidak berhenti sebagai pemakai buta - Menyelesaikan sebuah tutorial bukan akhir belajar melainkan permulaannya — ukurannya adalah bisa membuat ulang tanpa menonton lagi, lalu memodifikasinya jadi sesuatu yang berbeda - Cara mengobati bosan pada fundamental: pakai dulu komponen jadi yang menarik, lalu bongkar kodenya dan buat versi sendiri dari nol - Fundamental seperti pola MVC berlaku lintas bahasa dan framework, jadi yang dipelajari sekali terpakai di banyak tempat - Kontribusi adalah cara paling mudah mendapatkan kasus nyata untuk dilatih — merawat situs kampus, ikut proyek open source, atau mengambil pekerjaan kecil berbayar Full transcript available on the episode page. ## EP 20: Ngobrolin Otentikasi - Ngobrolin WEB ep20 - Published: 2023-02-14 - URL: https://ngobrol.in/episodes/H-NPmffVrcw-ngobrolin-otentikasi-ngobrolin-web-ep20 - YouTube: https://www.youtube.com/watch?v=H-NPmffVrcw Otentikasi dibedakan tegas dari otorisasi lewat analogi bandara: mencocokkan wajah dengan paspor dan tiket itu otentikasi — memastikan orangnya memang dia; sementara boleh masuk gerbang yang mana dan boleh melakukan apa itu otorisasi. Seorang pilot dan seorang penumpang sama-sama terverifikasi identitasnya, tapi izin yang mereka punya berbeda. Kebutuhannya sendiri muncul karena HTTP itu stateless: server tidak tahu siapa yang datang kalau tidak diberitahu, dan hanya sebagian sumber daya yang boleh diakses semua orang. Empat pendekatan dibahas. API key membedakan kunci publik yang boleh tertanam di sisi klien dan kunci privat yang haram keluar dari server — inilah alasan layanan seperti payment gateway mengharuskan kita punya server, dan mengapa meta framework atau serverless function jadi jalan keluar bagi yang sebelumnya hanya punya aplikasi sisi klien. Skema dasar HTTP juga dibandingkan: basic sekadar mengirim nama pengguna dan kata sandi dalam bentuk base64, sedangkan bearer mengirim token yang bisa dibatalkan dan punya masa berlaku. OAuth dijelaskan lewat alur single sign-on: ada server otentikasi tersendiri, dan setiap domain lain mengalihkan pengguna ke sana lalu menerima token sebagai jawaban — sehingga satu kali masuk cukup untuk banyak layanan. Diakui pula bahwa OAuth mudah bagi pengguna tapi merepotkan bagi yang mengimplementasikannya. Terakhir JWT, dengan satu penekanan penting: bagian payload-nya bisa dibaca siapa saja, yang menjaga keamanan adalah tanda tangannya. Key points: - Otentikasi memastikan siapa kita, otorisasi menentukan apa yang boleh kita lakukan — pilot dan penumpang sama-sama terverifikasi tapi izinnya berbeda - Kunci privat tidak boleh ada di sisi klien karena bisa dilihat lewat view source; inilah alasan payment gateway mengharuskan kita punya server - Meta framework dan serverless function menjadi jalan keluar bagi aplikasi yang tadinya murni sisi klien tapi butuh operasi yang harus terjadi di server - Bearer lebih aman daripada basic karena yang dikirim berulang kali adalah token yang bisa dibatalkan dan punya masa berlaku, bukan nama pengguna dan kata sandi asli - Single sign-on bekerja lewat server otentikasi tersendiri: domain lain mengalihkan pengguna ke sana, lalu menerima token untuk diverifikasi antar server - OAuth mengembalikan access token berumur pendek beserta refresh token berumur panjang, dan izin yang lebih sensitif harus diminta lewat scope terpisah - Payload JWT bisa dibaca siapa saja — yang menjaga keamanannya adalah tanda tangan, jadi server harus menolak permintaan yang signature-nya tidak terverifikasi Full transcript available on the episode page. ## EP 19: Ngobrolin Metode Rendering - Ngobrolin WEB ep19 - Published: 2023-02-07 - URL: https://ngobrol.in/episodes/WC230bL6YnY-ngobrolin-metode-rendering-ngobrolin-web-ep19 - YouTube: https://www.youtube.com/watch?v=WC230bL6YnY Salah satu permintaan topik paling awal akhirnya dibahas: kumpulan singkatan yang membingungkan seputar cara halaman web dirender. SSR dan SSG kebetulan sama-sama diawali dua huruf S, padahal maknanya berbeda sepenuhnya — dan pesannya adalah jangan terjebak menghafal singkatan, melainkan pahami urutan sejarahnya, karena definisinya sering tumpang tindih dan satu situs bisa memakai beberapa cara sekaligus. Ceritanya dimulai dari halaman web yang benar-benar berupa berkas statis: setiap dokumen diketik manual, dan menambah satu artikel berarti menyunting navigasi di semua halaman satu per satu. Dari kerepotan itu lahir server-side scripting — mula-mula Perl lewat CGI, lalu PHP yang merajai karena kemudahannya — di mana halaman dirakit di server dari basis data setiap kali diminta. Lalu perangkat pengguna makin kuat dan muncul gagasan menyerahkan perakitan itu ke browser; yang dikirim cukup datanya saja. Gmail disebut sebagai contoh awal yang membuat orang tertarik, dan jauh sebelum itu ada Java applet, ActiveX, dan Flash yang bahasanya justru masih satu turunan dengan JavaScript. Setiap ayunan menyelesaikan masalah lama dan memunculkan yang baru. Client-side rendering membuat halaman awal terkirim kosong dan pengunjung menunggu, sekaligus menyulitkan mesin pencari yang saat itu belum bisa menjalankan JavaScript — solusinya mula-mula pre-render khusus untuk bot, yang kemudian berkembang jadi static site generation. Tapi menghasilkan halaman statis pun tidak berskala untuk situs berita dengan jutaan artikel, sebab mengubah satu menu berarti membangun ulang semuanya. Key points: - SSR dan SSG kebetulan sama-sama berawalan dua huruf S padahal maknanya berbeda sepenuhnya — pahami urutan sejarahnya, jangan menghafal singkatannya - Halaman web mula-mula benar-benar berkas statis yang diketik manual, dan menambah satu artikel berarti menyunting navigasi di semua halaman satu per satu - Server-side scripting lahir dari kerepotan itu — dimulai dari Perl lewat CGI, lalu PHP merajai karena kemudahannya dibanding Perl yang kurvanya curam - Perpindahan ke sisi klien terjadi bukan terutama karena soal cepat-lambat, melainkan karena kebutuhan pembaruan real-time — dan Gmail disebut sebagai contoh awal yang membuat orang tertarik - Flash punya bahasa skripnya sendiri yang masih satu turunan dengan JavaScript modern, dan justru interaktivitasnya yang mendorong JavaScript naik dari sekadar pembantu validasi form - Static site generation berakar dari pre-render: dulu HTML khusus disiapkan untuk bot karena mesin pencari belum bisa menjalankan JavaScript, lalu disadari lebih baik dikirim ke pengunjung juga - Menghasilkan halaman statis tidak berskala untuk situs berita dengan jutaan artikel, sebab mengubah satu menu berarti membangun ulang seluruhnya Full transcript available on the episode page. ## EP 18: Ngobrolin Storage - Ngobrolin WEB ep18 - Published: 2023-02-01 - URL: https://ngobrol.in/episodes/k-4ZMXMGISA-ngobrolin-storage-ngobrolin-web-ep18 - YouTube: https://www.youtube.com/watch?v=k-4ZMXMGISA Melanjutkan episode cookie minggu sebelumnya, pembahasan bergeser ke tempat penyimpanan lain di browser — bukan basis data di server, melainkan yang benar-benar tinggal di perangkat pengguna. localStorage dan sessionStorage bersaudara dengan API yang sama; bedanya hanya umur: sessionStorage hilang begitu tab ditutup, localStorage bertahan sampai dihapus. Keduanya menempel pada domain, jadi data yang disimpan satu situs tidak bisa dibaca situs lain. Contoh paling membumi adalah kejengkelan lama: sudah menulis panjang di kolom komentar lalu koneksi bermasalah dan semuanya hilang setelah refresh. Sekarang jarang terjadi karena aplikasi menyimpan draft ke localStorage, dan itu disebut sebagai cara tercepat menaikkan pengalaman pengguna secara tajam. Contoh lain preferensi mode gelap, yang memang tidak perlu ikut dikirim ke server di setiap request seperti cookie — dan di Svelte pun menyinkronkannya ke localStorage relatif mudah. Untuk kebutuhan lebih berat ada IndexedDB, yang berperilaku seperti basis data sungguhan: punya indeks, jauh lebih cepat, dan satu-satunya yang bisa menyimpan blob. Kapasitasnya sangat besar — di browser berbasis Chromium bisa memakai sebagian besar ruang disk — tapi berbeda tiap perangkat, jadi transaksinya tetap harus ditangani kalau gagal. Sintaksnya diakui kurang menarik, dan dari situlah PouchDB yang mengikuti gaya CouchDB, Minimongo milik Meteor, serta RxDB menawarkan lapisan yang lebih nyaman sekaligus sinkronisasi ketika koneksi kembali ada. Disinggung pula SQLite yang kini bisa berjalan di browser lewat WebAssembly. Key points: - localStorage dan sessionStorage punya API yang sama dan bedanya hanya umur: sessionStorage hilang saat tab ditutup, localStorage bertahan sampai dihapus - Keduanya menempel pada domain, jadi data yang ditulis satu situs tidak bisa dibaca situs lain — mirip perilaku cookie - Menyimpan draft tulisan ke localStorage adalah cara tercepat menaikkan pengalaman pengguna: teks panjang tidak lagi hilang saat halaman ter-refresh - Preferensi seperti mode gelap cocok di localStorage justru karena tidak perlu ikut menempel di setiap request seperti cookie - IndexedDB berperilaku seperti basis data sungguhan — punya indeks, lebih cepat, dan satu-satunya yang bisa menyimpan blob - Kapasitas IndexedDB sangat besar, di browser Chromium bisa sampai sebagian besar ruang disk, tapi berbeda tiap perangkat sehingga kegagalan transaksi tetap harus ditangani - Sintaksnya kurang nyaman, dan dari situlah PouchDB yang mengikuti gaya CouchDB, Minimongo milik Meteor, dan RxDB menawarkan lapisan yang lebih ramah plus sinkronisasi Full transcript available on the episode page. ## EP 17: Ngobrolin Cookies - Ngobrolin WEB ep17 - Published: 2023-01-18 - URL: https://ngobrol.in/episodes/KPZ-BgtX1kk-ngobrolin-cookies-ngobrolin-web-ep17 - YouTube: https://www.youtube.com/watch?v=KPZ-BgtX1kk Cookie dibahas dari akarnya: HTTP itu stateless, server tidak peduli siapa yang meminta — datang permintaan, dikirim jawaban, selesai. Masalah muncul ketika Netscape membangun toko online di awal 90-an dan semua data pelanggan ditumpuk di server sehingga makin lambat seiring bertambahnya pengunjung. Solusinya membalik arah: penanda identitas disimpan di komputer pengguna, dan lahirlah magic cookie — istilah yang sebelumnya sudah lumrah di kalangan programmer. Analoginya seperti karcis parkir; kita tunjukkan potongan kertas itu saat mau keluar. Yang membedakan cookie dari penyimpanan lain di browser bukan kapasitasnya — hanya sekitar empat kilobyte — tapi sifatnya yang selalu ikut menempel di setiap request dan response, termasuk request ke domain lain. Dari situlah masalah privasi tumbuh: satu titik data soal sepatu lari tidak berarti apa-apa, tapi ketika menumpuk dengan pembelian aksesori bayi dan aksesori mobil, terbentuklah persona lengkap dengan perkiraan lokasi, status keluarga, dan rentang penghasilan. Ivan berbagi pengalaman mengimplementasikan kepatuhan GDPR dan menegaskan bahwa memasang banner saja tidak cukup: semua vendor pihak ketiga harus benar-benar diblokir sampai izin diberikan, dan pekerjaan itu memakan waktu lebih dari sebulan termasuk berkonsultasi dengan pengacara. Sisanya membahas flag HttpOnly, Secure, dan SameSite sebagai pertahanan terhadap CSRF, perbedaan first-party dan third-party cookie, serta penegasan bahwa cookie sendiri bukan teknologi jahat — menyimpan sesi login lewat cookie justru penggunaan yang sepenuhnya sah. Key points: - Cookie lahir karena HTTP stateless: toko online awal menyimpan semua data pelanggan di server dan jadi lambat, lalu dibalik dengan menaruh penanda identitas di komputer pengguna - Yang membedakan cookie dari penyimpanan browser lain bukan kapasitasnya yang cuma sekitar empat kilobyte, tapi sifatnya yang selalu ikut menempel di setiap request dan response - Bahaya pelacakan bukan pada satu titik data melainkan akumulasinya — sepatu lari, aksesori bayi, dan aksesori mobil bersama-sama membentuk persona lengkap dengan lokasi dan status keluarga - GDPR bukan cuma soal banner: consent harus diberikan secara sadar, data harus bisa diminta pemiliknya, dan penghapusan harus tuntas tanpa soft delete atau backup - Implementasi yang benar berarti memblokir semua skrip pihak ketiga sampai izin diberikan, dan mengerjakannya untuk satu situs bisa makan waktu lebih dari sebulan termasuk konsultasi dengan pengacara - Flag SameSite mencegah CSRF dengan membuat cookie tidak ikut terkirim saat request datang dari origin lain, sementara HttpOnly menutup akses dari JavaScript di browser - Cookie sendiri bukan teknologi jahat — menyimpan sesi login lewat cookie itu sah, dan menghindarinya dengan menaruh data di tempat yang aneh-aneh justru bukan solusi Full transcript available on the episode page. ## EP 16: Ngobrolin 2023 - Ngobrolin WEB ep15 - Published: 2023-01-04 - URL: https://ngobrol.in/episodes/Dwy3ydXygaY-ngobrolin-2023-ngobrolin-web-ep15 - YouTube: https://www.youtube.com/watch?v=Dwy3ydXygaY Episode awal tahun ini berisi daftar hal yang menurut Riza, Eka, dan Ivan akan menarik sepanjang 2023 — bukan ramalan, melainkan apa yang mereka sendiri ingin lirik. Eka membuka dengan yang paling tidak terduga: kembalinya standar-standar lama ekosistem web. ActivityPub yang dipakai Mastodon sedang ramai, dan RSS mulai dilirik lagi seiring munculnya gerakan kembali ngeblog. Poinnya bukan nostalgia melainkan kepemilikan — dengan RSS kita bisa mengikuti sumber konten apa pun tanpa terikat pada satu produk milik satu perusahaan, berbeda dengan taman berpagar tempat kita cuma menumpang. Benang merah yang sama muncul di gelombang framework terbaru. Ceritanya ditarik dari CGI dan PHP yang serba server, ke era SPA tempat segalanya dipindah ke klien sampai muncul masalah SEO dan halaman yang berat, lalu berayun kembali ke multi-page yang sekarang sudah modern. Framework seperti Astro, Enhance, dan Qwik mengedepankan HTML first dengan alasan sederhana: platformnya sudah berkembang, jadi pakai saja apa yang sudah disediakan browser. Salah satu pemicunya adalah browser yang akhirnya bisa menjalankan JavaScript module. Sisanya soal perkakas yang ditulis ulang dengan bahasa lain — Turbopack, Rome, dan SWC dengan Rust; Bun dengan Zig dan JavaScriptCore alih-alih V8 — plus WebAssembly yang sudah sanggup menjalankan WordPress tanpa server sama sekali. Bagian penutupnya justru yang paling membumi: sebuah cerita interview di mana rekomendasi memasang plugin adalah red flag, dan jawaban yang lolos justru menunjuk gambar yang kegedean dan font yang berlebihan. Key points: - RSS dan ActivityPub kembali dilirik karena soal kepemilikan: kita bisa mengikuti sumber konten apa pun tanpa terikat produk satu perusahaan, dan informasinya datang ke kita alih-alih kita yang mencari - Sejarah rendering berayun bolak-balik — server, lalu klien, lalu kembali ke server — dan gelombang framework terbaru mengedepankan HTML first karena platform webnya sendiri sudah cukup berkembang - Perkakas JavaScript makin banyak ditulis dengan bahasa lain: Turbopack, Rome, dan SWC pakai Rust, sementara Bun pakai Zig dan memakai JavaScriptCore dari WebKit alih-alih V8 - WebAssembly sudah sanggup menjalankan WordPress sepenuhnya di dalam browser tanpa server PHP sama sekali — berguna untuk demo, tutorial, dan workshop membuat plugin - Kalau mau mulai TypeScript, ganti dulu .js jadi .ts lalu perbaiki satu per satu sambil belajar; memakai any di mana-mana sama saja dengan tidak memakai TypeScript - Dalam satu cerita interview, menyarankan pemasangan plugin justru dianggap red flag — yang diminta adalah menelusuri sendiri penyebab lambatnya, seperti gambar kegedean dan font yang tidak terpakai - Jangan belajar hanya karena hype: fundamental dan kemampuan memecahkan masalah lebih tahan lama, tapi penguasaan bahasa tetap perlu karena tanpa lolos tes coding kita tidak sampai ke tahap menunjukkannya Full transcript available on the episode page. ## EP 15: Ngobrolin Browser - Ngobrolin WEB ep14 - Published: 2022-12-27 - URL: https://ngobrol.in/episodes/O2c3Q2QTZI4-ngobrolin-browser-ngobrolin-web-ep14 - YouTube: https://www.youtube.com/watch?v=O2c3Q2QTZI4 Setelah membahas HTML, CSS, font, gambar, dan testing, episode ini menutup daftar komponen web dengan yang paling mendasar: browser. Ia digambarkan sebagai jendela menuju dunia web sekaligus satu-satunya platform yang jalan di semua sistem operasi dan semua perangkat — dan semua kemampuan aplikasi web modern hari ini adalah buah dari kemampuan browser yang melompat jauh, sebagian justru karena perang browser. Sejarahnya ditelusuri dari browser pertama buatan Tim Berners-Lee untuk komputer NeXT, lewat Mosaic yang pertama kali menampilkan gambar dan teks dalam satu dokumen, sampai perang Netscape melawan Microsoft yang bukan hanya rebutan pengguna tapi juga rebutan bahasa — JavaScript melawan JScript. Dari kekacauan itulah lahir W3C: kalau mau bikin fitur, sepakati dulu spesifikasinya. Jejak masa itu masih tersisa, dan bisa dibuktikan sendiri: ketik navigator di konsol browser apa pun, appCodeName-nya masih Mozilla dan appName-nya masih Netscape. Yang menarik dari lanskap sekarang adalah arah yang berlawanan. Dari sisi mesin, pilihan justru mengerucut tinggal tiga — Gecko, WebKit, dan Blink — sementara dari sisi antarmuka browser justru makin beragam: ada yang menaruh tab di samping dan memperlakukannya sebagai to-do list, ada yang khusus untuk developer front-end, ada yang menempel wallet atau Fediverse. Dibahas juga kejengkelan lama bahwa semua browser di iOS wajib memakai WebKit sehingga Chrome dan Firefox di sana sebenarnya hanya kulit, plus Interop sebagai forum tempat semua vendor akhirnya sepakat memprioritaskan area yang sama. Key points: - Jejak perang browser masih tertinggal di setiap browser hari ini: ketik navigator di konsol, appCodeName-nya Mozilla dan appName-nya Netscape — bahkan di Edge yang sama sekali tidak memakai keduanya - Perang Netscape dan Microsoft bukan cuma rebutan pengguna tapi juga rebutan bahasa (JavaScript versus JScript), dan dari kekacauan itulah W3C lahir supaya spesifikasi disepakati lebih dulu - Mesin browser justru mengerucut tinggal tiga — Gecko, WebKit, Blink — sementara ragam browser malah bertambah karena yang dibedakan sekarang lapisan antarmukanya, bukan mesinnya - Semua browser di App Store iOS wajib memakai WebKit, jadi Chrome dan Firefox di sana sebenarnya Safari berkostum — dan pernah menyebabkan CSS Grid jalan mulus di emulator desktop tapi rusak total di perangkat aslinya - Chromium sudah berupa browser lengkap dan open source; analoginya seperti kernel Linux yang di atasnya ada berbagai distro, sementara Chrome, Edge, Opera, Vivaldi, dan Brave adalah lapisan vendor masing-masing - Opera Mini dulu cepat karena punya server perantara yang merender halaman jadi markup sendiri sebelum dikirim ke ponsel — hemat data, tapi dukungannya suka-suka mereka dan tidak mengikuti standar apa pun - Interop adalah forum tempat semua vendor besar akhirnya sepakat memilih beberapa focus area per tahun berdasarkan masukan komunitas, lalu skornya diumumkan di akhir tahun dari hasil pengujian yang repositorinya terbuka Full transcript available on the episode page. ## EP 14: Nobrolin Image - Ngobrolin WEB ep13 - Published: 2022-12-20 - URL: https://ngobrol.in/episodes/NwXiJKBW35U-nobrolin-image-ngobrolin-web-ep13 - YouTube: https://www.youtube.com/watch?v=NwXiJKBW35U Episode tentang gambar ini berangkat dari satu kenyataan sederhana: kalau kita cuek, image akan jadi bagian paling berat dari sebuah halaman. Foto langsung dari kamera atau handphone gampang menembus ukuran belasan megabyte, dan kalau diunggah apa adanya, itulah yang harus diunduh pengunjung. Angka dari Web Almanac dipakai sebagai pengingat: dari total yang diunduh pengguna web mobile, sekitar 56% adalah image — lebih besar daripada HTML, CSS, dan JavaScript digabungkan. Solusinya sudah lama tersedia di tag image itu sendiri, yang ternyata sudah dipersenjatai srcset, sizes, loading, dan fetch priority. Dengan menyediakan beberapa varian ukuran, kita tidak perlu lagi menebak-nebak resolusi perangkat terbaru — apalagi sekarang ada ponsel lipat yang justru lebih kecil, dan device pixel ratio yang membuat perangkat kelas atas menuntut gambar berkali lipat lebih besar dari ukuran tampilnya. Biarkan browser yang menghitung. Untuk membuat variannya ada Sharp, ImageMagick lewat shell script, Squoosh yang punya CLI berbasis Wasm, atau layanan seperti Cloudinary dan Imgix kalau budgetnya ada. Bagian performanya membahas hal yang sering keliru: gambar di atas lipatan jangan pernah dibuat lazy, justru sebaliknya. Untuk preload gambar responsif ada imagesrcset dan imagesizes pada link preload, sehingga browser tetap memilih satu ukuran yang tepat alih-alih mengunduh keempat variannya. Ada juga peringatan bahwa kalau semuanya penting, tidak ada yang penting — prioritas tinggi yang menumpuk malah jadi antrean. Penutupnya soal CLS, aspect-ratio, blur hash sebagai placeholder, dan pesan agar atribut alt tetap ditulis, bahkan ketika isinya harus string kosong. Key points: - Dari total yang diunduh pengguna web mobile, sekitar 56% adalah image — lebih besar daripada HTML, CSS, dan JavaScript digabungkan - Dengan srcset dan sizes kita tidak perlu menebak ukuran perangkat, termasuk device pixel ratio yang bikin ponsel kelas atas memuat gambar 2-3 kali lipat dari ukuran tampilnya; biarkan browser yang menghitung - Preload gambar responsif punya pasangannya sendiri: imagesrcset dan imagesizes pada link preload, supaya browser tetap memilih satu ukuran alih-alih mengunduh semua varian sekaligus - Gambar di atas lipatan jangan dibuat lazy — pakai loading eager plus fetch priority high, karena tanpa itu hero image justru terunduh belakangan setelah gambar-gambar di bawahnya - Kalau semua hal ditandai penting, tidak ada yang penting: fetch priority high yang bertebaran malah memenuhi antrean, dan perpindahan posisi komponen harus dibarengi penurunan prioritas yang lama - Lazy loading bawaan tidak menimbulkan CLS karena browser sudah memuat gambar satu-dua viewport sebelumnya — pergeseran layout di luar viewport tidak dihitung, tapi yang menulis intersection observer sendiri harus menyetel boundary-nya negatif - Atribut alt jangan dihapus meski gambarnya dinamis dan tidak bisa dideskripsikan: tulis sebagai string kosong supaya dilewati screen reader, karena alt asal-asalan justru merusak pengalaman dan SEO Full transcript available on the episode page. ## EP 13: Ngobrolin Testing - Ngobrolin WEB Ep12 - Published: 2022-12-14 - URL: https://ngobrol.in/episodes/TPetwHcfXns-ngobrolin-testing-ngobrolin-web-ep12 - YouTube: https://www.youtube.com/watch?v=TPetwHcfXns Riza, Ivan, dan Eka membahas testing — atau pengujian, istilah yang diakui masih terasa asing di telinga. Definisinya sederhana: kita punya ekspektasi, lalu memastikan hasilnya cocok. Tapi urgensinya baru terasa ketika kode terus bertambah dan dipakai banyak orang; kesalahan kecil pada modul yang dipakai jutaan aplikasi bisa merusak semuanya sekaligus, dan mengecek satu per satu secara manual sebelum tiap rilis jelas tidak sanggup mengejar. Nilai testing yang paling ditekankan justru bukan soal menangkap bug. Menulis test memaksa kita berpikir jernih tentang apa yang ingin dicapai — semacam to-do list sebelum ngoding, dan dokumentasi setelahnya untuk diri sendiri enam bulan kemudian atau untuk rekan kerja yang belum tahu maksud kodenya. Ada juga cerita bahwa test bisa memperbaiki desain sistem: kalau test untuk satu tampilan jadi kebanyakan, artinya tanggung jawab elemen itu terlalu besar dan perlu dipecah. Bagian paling jujur di episode ini adalah pengakuan bahwa waktu yang dihemat dengan melewatkan testing itu sia-sia. Ivan bercerita tentang plugin WordPress yang harus jalan di beberapa versi PHP dan WordPress sekaligus; tanpa test otomatis, setiap rilis berarti tiga sampai empat jam permutasi manual, dan satu fatal error berarti mengulang dari awal — sampai akhirnya burnout. Sisanya membahas jenjang unit, integration dan end-to-end testing, mocking layanan pihak ketiga dengan MSW, storybook, Playwright dan Cypress, sampai git hooks dan CI agar kode yang belum lulus tidak pernah sampai ke production. Key points: - Nilai terbesar testing bukan menangkap bug melainkan memaksa berpikir jernih: test jadi to-do list sebelum ngoding dan dokumentasi setelahnya, termasuk saat kita membaca repo orang lain dan readme-nya kurang lengkap - Testing bisa memperbaiki desain sistem — kalau test untuk satu tampilan jadi kebanyakan, itu tanda tanggung jawab elemen tersebut terlalu besar dan perlu dipecah - Waktu yang dihemat dengan melewatkan testing itu sia-sia: plugin WordPress yang harus jalan di banyak permutasi versi PHP dan WordPress butuh 3-4 jam pengecekan manual setiap rilis, dan satu fatal error berarti mengulang semuanya - Jenjangnya naik dari static analysis di dasar, lalu unit testing, integration testing, sampai end-to-end testing: semakin ke atas semakin dekat ke user tapi semakin mahal dijalankan, sementara unit test justru paling murah dijalankan tapi paling besar effort menulisnya - Panggilan ke layanan pihak ketiga seperti payment gateway harus di-mock — bukan hanya agar test tidak menembus rate limit atau menagih biaya, tapi karena error code-nya jauh lebih banyak daripada skenario sukses dan semuanya perlu ditangani - Automatic testing sudah bergeser jadi tugas developer, bukan hanya divisi QA; QA manusia menguji dari sudut pandang user, sementara manusia memang tidak didesain untuk pekerjaan repetitif berskala besar - Gabungkan testing dengan alur kerja lewat git hooks dan CI supaya kode yang belum lulus tidak pernah di-commit apalagi di-deploy — tapi perhatikan juga soal billing, karena jam GitHub Action gratisan ada batasnya Full transcript available on the episode page. ## EP 12: Ngobrolin Font - Ngobrolin WEB Ep11 - Published: 2022-12-07 - URL: https://ngobrol.in/episodes/WJvTvTSm9l8-ngobrolin-font-ngobrolin-web-ep11 - YouTube: https://www.youtube.com/watch?v=WJvTvTSm9l8 Font dipilih sebagai topik justru karena jarang dibahas orang, padahal separuh isi web adalah teks. Ia bisa membuat halaman terlihat bagus atau jelek, tapi juga bisa membengkakkan ukuran halaman, memblokir rendering, bahkan membuat seluruh teks tidak muncul sama sekali kalau font-display disetel keliru dan file-nya gagal diunduh. Episodenya dibuka dengan meluruskan istilah: typeface adalah kelompok gayanya, font file adalah berkas untuk tiap variasi, dan yang kita tulis di CSS sebagai font-family sebenarnya merujuk typeface. Saran teknis pertamanya tegas: jangan impor font lewat @import di CSS, karena browser harus mengunduh HTML, lalu CSS, lalu mem-parsing, lalu baru tahu ada impor lain, lalu baru memanggil file font — rantai panjang yang seluruhnya memblokir render. Meng-host font sendiri lebih baik karena kita bisa melakukan preload dan menghemat satu langkah DNS resolve. Dibahas juga bahwa font-display swap menyelesaikan masalah teks tak tampil, tapi memunculkan masalah baru berupa pergeseran layout ketika font asli akhirnya menggantikan fallback-nya. Solusi untuk masalah baru itu bagian paling praktis: setel font fallback dengan size-adjust dan ascent-override agar jumlah barisnya sama persis, dan pakai Fontaine kalau tidak mau menghitung sendiri. Ivan menceritakan hasil menggabungkan itu dengan CSS kritis yang di-inline dan sisanya ditunda — LCP-nya turun dari sekitar 2,3 detik ke sekitar 1,5 detik, hanya dari urusan font. Ditutup dengan variable font, unicode-range untuk memangkas karakter yang tidak dipakai, dan alasan mengapa memuat font ikon demi tiga ikon itu pemborosan. Key points: - Jangan impor font lewat @import di CSS: browser harus mengunduh HTML, lalu CSS, mem-parsing, baru tahu ada impor lain, baru memanggil file font — rantai panjang yang memblokir render - Meng-host font sendiri lebih baik karena kita bisa melakukan preload dan memangkas satu langkah DNS resolve ke origin lain - font-display swap menyelesaikan teks yang tidak muncul, tapi menimbulkan pergeseran layout — perbaiki dengan size-adjust dan ascent-override pada fallback-nya, atau pakai Fontaine agar dihitungkan otomatis - Menggabungkan CSS kritis yang di-inline dengan font yang ditunda menurunkan LCP dari sekitar 2,3 detik ke sekitar 1,5 detik — hanya dari urusan font - Muat hanya varian yang benar-benar dipakai: kalau panduan desain memakai satu typeface khusus untuk header dengan bobot tebal saja, tidak perlu ikut mengunduh versi normalnya - unicode-range memangkas karakter yang tidak pernah dipakai, dan untuk teks yang tidak pernah berubah seperti nama situs, font bisa dimuat khusus untuk teks itu saja - Memuat font ikon demi tiga ikon itu pemborosan puluhan sampai ratusan kilobyte — SVG inline lebih tepat, dan pustaka ikonnya sendiri kini sudah bergeser ke SVG Full transcript available on the episode page. ## EP 11: Ngobrolin i18n - Ngobrolin WEB Ep6 - Published: 2022-12-05 - URL: https://ngobrol.in/episodes/CH5rh-zHktQ-ngobrolin-i18n-ngobrolin-web-ep6 - YouTube: https://www.youtube.com/watch?v=CH5rh-zHktQ Episode ini membahas Intl, Web API untuk internationalization yang membuat pemformatan tanggal, angka, dan mata uang sesuai kebiasaan tiap negara jadi urusan satu baris kode. Masalah yang diselesaikannya nyata: desimal di Indonesia memakai koma sementara di Amerika memakai titik, urutan tanggal berbeda-beda, dan bentuk jamak berbeda di tiap bahasa. Dulu semua itu dikerjakan dengan membuat array nama bulan sendiri untuk tiap bahasa, atau mengganti titik dan koma secara manual — pendekatan yang berbahaya ketika menyangkut uang. Intl juga sudah punya RelativeTimeFormat untuk menampilkan "satu hari yang lalu", kebutuhan yang hampir selalu muncul di produk yang menghadap pengguna dan dulu menjadi alasan memasang moment.js yang berukuran ratusan kilobyte. Bagian terbaiknya adalah diskusi tentang kapan memakai library. Urutannya: pakai Web API yang sudah ada dulu, baru cari library sekecil mungkin kalau memang belum ada. Pertimbangan lain yang jarang dibicarakan adalah biaya perawatan — library pihak ketiga bisa punya celah keamanan, bisa berhenti dirawat, dan kalau kita tidak paham kodenya kita tidak bisa mem-fork dan menyesuaikannya saat darurat. Ada juga temuan menarik dari benchmark: library pihak ketiga ternyata bisa lebih cepat daripada Web API, tetapi itu tidak sebanding dengan biaya mengunduh ratusan kilobyte lebih dulu. Key points: - Intl menangani perbedaan format desimal, urutan tanggal, nama bulan, dan mata uang tanpa perlu memasang library — cukup panggil langsung karena sudah ada di browser - Argumen locale bisa berupa array sebagai fallback berjenjang: kalau bahasa daerah tidak didukung browser, ia jatuh ke bahasa yang lebih umum - Jangan pernah mengganti titik dan koma secara manual untuk memformat uang — satu kesalahan koma bisa mengubah nominal seribu kali lipat - Urutan memilih tooling: pakai Web API yang sudah ada dulu, baru cari library sekecil mungkin — dan kalau yang dibutuhkan hanya satu fungsi kecil, membuka kodenya dan menyalin bagian itu dengan kredit sering lebih masuk akal daripada memasang seluruh library - Biaya library pihak ketiga bukan hanya ukurannya tetapi perawatannya: bisa muncul celah keamanan, bisa berhenti dirawat, dan kalau kita tidak paham kodenya kita tidak bisa mem-fork saat darurat - Benchmark menunjukkan library pihak ketiga bisa lebih cepat daripada Web API karena mereka bebas mengambil trade-off yang tidak boleh diambil browser — tetapi kecepatan itu tidak sebanding dengan biaya mengunduhnya lebih dulu - Uji ketahanan dengan memblokir request di DevTools: kalau CDN atau script analytics diblokir ad blocker, pastikan aplikasi tidak ikut rusak Full transcript available on the episode page. ## EP 10: Ngobrolin Web Components - Ngobrolin WEB Ep10 - Published: 2022-11-30 - URL: https://ngobrol.in/episodes/B0Ar5k_h2uk-ngobrolin-web-components-ngobrolin-web-ep10 - YouTube: https://www.youtube.com/watch?v=B0Ar5k_h2uk Web components dijelaskan sebagai cara membangun antarmuka yang sudah tertanam di browser modern, jadi tidak bergantung pada framework mana pun. Konsepnya sama dengan komponen di React, Vue, atau Svelte — bungkus sekumpulan tag agar bisa dipakai berulang — bedanya ia bagian dari spesifikasi web itu sendiri. Contoh yang paling mengena: input bertipe date yang widget kalendernya kita pakai sehari-hari sebenarnya adalah web component; centang show user agent shadow DOM di setting, bagian preference dan isi dalamnya langsung terlihat. Ia bukan satu teknologi tunggal melainkan gabungan beberapa: HTML template untuk markup yang dipakai berulang (dan tidak ikut dirender, berbeda dengan div yang disembunyikan), custom element untuk mendefinisikan tag sendiri dengan nama yang wajib dua kata berpisah tanda hubung, shadow DOM yang mengurung styling agar tidak bocor ke global, plus slot untuk menyisipkan isi. Modul JavaScript disebut sebagai kunci yang akhirnya membuat semuanya bisa terenkapsulasi tanpa mengontaminasi yang lain. Yang menarik justru datanya: pemakaian web component malah menurun dari tahun ke tahun, dan HTML template hampir tidak terpakai sama sekali. Dugaan mereka soal eksposur dan pengalaman developer — banyak boilerplate, penamaan lifecycle yang tidak intuitif, dan gaya berbasis kelas yang terasa melawan arus saat ekosistem bergerak ke fungsional. Dari situlah lahir Lit dan Stencil sebagai pembungkus, sementara framework populer sendiri sudah bisa dikompilasi menjadi custom element. Key points: - Input bertipe date yang kita pakai sehari-hari sebenarnya adalah web component — centang show user agent shadow DOM di setting, bagian preference dan isi dalamnya langsung terlihat - Pakai HTML template, bukan div yang disembunyikan dengan display none, karena isi template benar-benar tidak dirender sementara div tetap dirender - Nama custom element wajib terdiri dari dua kata berpisah tanda hubung agar tidak bentrok dengan elemen bawaan HTML - Styling di dalam shadow DOM tidak terpengaruh style global, dan web component sebenarnya masih bisa dipakai tanpa shadow DOM - Modul JavaScript adalah kunci yang akhirnya membuat web component bisa terenkapsulasi — sebelumnya di browser semuanya global lewat tag script - Pemakaiannya justru menurun dari tahun ke tahun; dugaannya soal eksposur dan pengalaman developer — banyak boilerplate, penamaan lifecycle yang tidak intuitif, dan gaya berbasis kelas saat ekosistem bergerak ke fungsional - Framework populer bisa dikompilasi menjadi custom element, dan hasilnya lebih kecil karena mesin komponennya sudah ada di browser dan tidak perlu ikut diunduh Full transcript available on the episode page. ## EP 9: Ngobrolin Konsep JS: Event Loop - Ngobrolin WEB Ep5 - Published: 2022-11-29 - URL: https://ngobrol.in/episodes/qU3POeBk-0E-ngobrolin-konsep-js-event-loop-ngobrolin-web-ep5 - YouTube: https://www.youtube.com/watch?v=qU3POeBk-0E Episode ini membahas event loop, konsep fundamental yang menjelaskan kenapa JavaScript sering terasa tidak bisa ditebak. Keluhan klasiknya nyata: kode berjalan sesuai urutan saat dicoba, lalu berubah urutannya saat dipresentasikan ke klien. Akar masalahnya bukan bahasanya yang aneh melainkan model konkurensinya yang belum dipahami. Dijelaskan lebih dulu bedanya asynchronous dan paralel lewat analogi tujuh anak membungkus kado: pada asynchronous tiap anak mengerjakan satu tahap untuk semua kado, sehingga satu anak yang berhenti membuat seluruh proses terhenti; pada paralel tiap anak menyelesaikan satu kado utuh sendiri, sehingga satu yang gagal masih menyisakan enam kado jadi. JavaScript memakai jalur asynchronous dan berjalan di satu thread. Demo setTimeout dengan delay nol menunjukkan intinya: meski tanpa penundaan, callback-nya tetap masuk antrean dan baru dieksekusi setelah call stack kosong. Dari sini dibahas kenapa while(true) membekukan halaman sementara versi rekursif dengan setTimeout tidak, kenapa JavaScript yang terlalu berat membuat scroll terasa patah-patah karena proses render kalah cepat, dan kenapa alert adalah satu-satunya hal yang benar-benar memblokir. Ditutup dengan Web API — implementasi khusus browser di luar JavaScript engine seperti fetch, Intersection Observer, History, dan Intl — serta pesan praktis: pahami callback dulu, lalu promise, baru async/await, dan jangan menumpuk await berurutan untuk dua permintaan yang sebenarnya tidak saling bergantung. Key points: - Perbedaan asynchronous dan paralel: pada asynchronous satu tahap yang gagal menghentikan seluruh rangkaian, sedangkan pada paralel satu yang gagal hanya menghilangkan bagiannya sendiri — JavaScript memakai jalur asynchronous di satu thread - setTimeout dengan delay nol tetap tidak dieksekusi langsung: callback-nya masuk antrean dan baru dijalankan setelah call stack kosong - while(true) membekukan halaman karena task-nya tidak pernah keluar dari antrean, sedangkan rekursi yang sama di dalam setTimeout tetap membiarkan event loop berputar sehingga halaman masih bisa di-scroll - JavaScript yang terlalu berat membuat scroll terasa patah-patah karena proses render kalah cepat dengan eksekusi task — dan alert adalah satu-satunya hal yang benar-benar memblokir semuanya - Web API adalah implementasi khusus browser di luar JavaScript engine — fetch, Intersection Observer, History, Intl — dan banyak library populer sebenarnya hanya membungkusnya - Urutan belajarnya callback dulu, lalu promise, baru async/await — melompat langsung ke async/await tanpa paham promise justru membingungkan - Dua await berurutan untuk permintaan yang tidak saling bergantung membuat JavaScript berperilaku seperti bahasa sinkron; gunakan Promise.all atau Promise.allSettled, dan selalu tangani error karena satu promise yang gagal bisa menjatuhkan sisanya Full transcript available on the episode page. ## EP 8: Ngobrolin Android - Ngobrolin WEB Ep9 - Published: 2022-11-23 - URL: https://ngobrol.in/episodes/TGEH6ovjnjU-ngobrolin-android-ngobrolin-web-ep9 - YouTube: https://www.youtube.com/watch?v=TGEH6ovjnjU Episode ini menyeberang ke dunia Android bersama tiga Google Developer Expert di bidang itu: Andrew, Budi, dan Sidik. Pembukanya cerita masing-masing tentang bagaimana mereka menjadi GDE — prosesnya bukan mengirim lamaran, melainkan direkomendasikan lalu melewati beberapa kali wawancara: dengan sesama GDE yang menggali sisi komunitas, dan dengan Googler yang justru menanyakan hal teknis serta masukan terhadap produk yang dipakai. Pertanyaan utamanya soal masa depan Java. Jawabannya: Java masih akan bertahan lama karena bahasanya matang dan penggunanya luas, dan di banyak proyek ia hidup berdampingan dengan Kotlin dalam satu codebase. Kotlin hadir bukan untuk menggantikan melainkan mengobati keluhan utama Java — terutama null pointer yang dulu ditangani dengan berbagai pre-condition. Dibahas juga sisi politiknya: perselisihan Oracle membuat lahir banyak varian OpenJDK dari berbagai pihak. Bagian tentang Jetpack Compose menarik karena mengakui asal-usulnya: developer mobile beralih dari imperatif ke deklaratif setelah melihat cara kerja web, dan XML di Android sendiri dulu dipilih justru agar terasa akrab bagi developer web yang sudah terbiasa dengan HTML. Compose membuat hal yang dulu rumit jadi sederhana — membuat list tidak lagi butuh RecyclerView beserta adapter dan view holder-nya. Ditutup dengan Kotlin Multiplatform yang membagi business logic bersama tetapi membiarkan lapisan tampilan tetap native, plus pesan soal menjadi agnostik: pelajari lebih dari satu platform supaya kita sendiri yang jadi multiplatform. Key points: - Menjadi GDE bukan lewat lamaran melainkan rekomendasi, lalu beberapa wawancara: sesama GDE menggali sisi komunitas, sementara Googler menanyakan hal teknis dan masukan terhadap produknya - Java dan Kotlin bisa hidup berdampingan dalam satu codebase, dan itulah yang terjadi di banyak proyek nyata — Kotlin hadir untuk mengobati keluhan utama Java seperti null pointer, bukan menggantikannya - Perselisihan dengan Oracle melahirkan banyak varian OpenJDK dari berbagai pihak yang ingin mengembalikan Java ke jalur open source - Jetpack Compose membuat hal yang dulu rumit jadi sederhana: membuat list tidak lagi butuh RecyclerView beserta adapter dan view holder, cukup lazy column - XML di Android dulu dipilih justru agar terasa akrab bagi developer web yang sudah terbiasa HTML — dan kini developer mobile beralih ke deklaratif setelah melihat cara kerja web - Kotlin Multiplatform membagi business logic bersama tetapi membiarkan lapisan tampilan tetap native, sehingga akses ke API platform masing-masing tidak perlu lewat bridge - Menjadi agnostik itu menguntungkan: kita tahu kelemahan tiap tools dan bisa memilih sesuai kebutuhan — jadikan diri sendiri yang multiplatform, dengan bentuk keahlian seperti huruf T Full transcript available on the episode page. ## EP 7: Ngobrolin Viteconf - Ngobrolin WEB Ep4 - Published: 2022-11-22 - URL: https://ngobrol.in/episodes/8Diqwtb6hKs-ngobrolin-viteconf-ngobrolin-web-ep4 - YouTube: https://www.youtube.com/watch?v=8Diqwtb6hKs Episode ini membahas Vite dan ViteConf yang baru saja digelar. Dimulai dari pertanyaan mendasar: kenapa kita butuh bundler? Karena kode yang kita tulis belum tentu bisa langsung dijalankan browser — ada sintaks TypeScript, fitur ECMAScript yang belum didukung, import dan export, tree shaking, minifikasi, sampai SASS yang harus di-transpile jadi CSS. Bundler adalah alat yang membaca semua itu dan mengolahnya menjadi bentuk yang bisa dijalankan. Yang membuat Vite berbeda adalah momen kemunculannya: ES module akhirnya didukung browser, sehingga sebagian pekerjaan yang dulu harus dikerjakan bundler kini bisa diserahkan ke browser. Di mode development Vite bahkan tidak melakukan bundling sama sekali — modulnya dijalankan langsung, dan itulah kenapa hot module reload-nya terasa instan. Untuk produksi ceritanya berbeda: Vite memakai Rollup untuk bundling dan esbuild untuk transpile serta tree shaking, karena prioritas development dan produksi memang berbeda. Ada juga cerita Snowpack yang sempat diumumkan akan dipakai SvelteKit lalu batal, dan timnya justru kini mengerjakan Astro yang memakai Vite. Dibahas juga Vitest sebagai alternatif Jest yang lebih kompatibel dengan ES module, dan pengumuman WebContainers dari StackBlitz — sistem operasi berbasis WebAssembly yang berjalan di dalam browser, dibangun dengan bekerja erat bersama tim standar web. Ditutup dengan menjawab pertanyaan penonton: kode JavaScript di sisi klien tidak bisa benar-benar diamankan, dan CDN masih masuk akal selama dependensinya sedikit. Key points: - Vite tidak melakukan bundling sama sekali di mode development — modulnya dijalankan langsung, dan itulah sumber hot module reload yang terasa instan - Di produksi Vite memakai Rollup untuk bundling dan esbuild untuk transpile serta tree shaking, karena prioritas development (feedback cepat) berbeda dari prioritas produksi - Yang memungkinkan generasi bundler baru adalah dukungan ES module di browser — sebagian pekerjaan yang dulu wajib dikerjakan bundler kini bisa diserahkan ke browser - Kode JavaScript di sisi klien tidak bisa benar-benar diamankan; minifikasi hanyalah security through obscurity, jadi jangan pernah menaruh API key di dalam bundle - CDN masih masuk akal untuk satu atau dua dependensi, tetapi begitu ada lima sampai sepuluh library yang saling bergantung, satu request yang gagal membuat seluruh aplikasi rusak — dan tidak ada tree shaking - WebContainers dari StackBlitz menjalankan sistem operasi berbasis WebAssembly di dalam browser, dibangun dengan bekerja erat bersama tim standar web agar bisa lintas engine - Bundler bekerja diam-diam sehingga jarang dipikirkan, padahal di dalamnya ada keputusan arsitektur yang serius seperti strategi hashing untuk mendeteksi file mana yang harus diproses ulang saat satu file berubah Full transcript available on the episode page. ## EP 6: Ngobrolin DevFest - Ngobrolin WEB Ep3 - Published: 2022-11-22 - URL: https://ngobrol.in/episodes/LrPBLlURfIs-ngobrolin-devfest-ngobrolin-web-ep3 - YouTube: https://www.youtube.com/watch?v=LrPBLlURfIs Episode ini membahas DevFest bersama Danang, community manager Google untuk region Indonesia dan Brunei. DevFest adalah konferensi teknologi tahunan yang diselenggarakan komunitas Google Developer Groups di seluruh dunia pada rentang waktu yang sama, biasanya menjelang akhir tahun. Dijelaskan juga peta komunitas di bawah Developer Relations Google: Google Developer Student Clubs yang berbasis kampus, Google Developer Groups yang berbasis kota dengan sepuluh chapter di Indonesia ditambah tiga chapter khusus cloud, Google Developer Experts yang berbasis keahlian produk, program accelerator untuk startup, dan Women Techmakers. Untuk menjadi GDE, dua kualitas yang diharapkan adalah keahlian yang cukup untuk mengajar di tingkat intermediate hingga advanced, dan jiwa berkomunitas. Saran paling praktisnya bertumpu pada kisah nyata: jalan menuju GDE biasanya dimulai dari datang sebagai peserta, lalu menjadi volunteer, lalu ditawari menjadi pembicara. Format DevFest sendiri bebas — bisa talk, workshop, panel, atau exhibition — dan slot pembicara terbuka untuk siapa saja, bukan hanya GDE. Ada juga kabar praktis: karena Chrome Dev Summit tahun itu ditiadakan, tim Chrome dibuka untuk hadir di acara komunitas lokal, asalkan diundang jauh-jauh hari. Untuk kota yang belum punya GDG, chapter baru bisa diusulkan, dengan syarat ekosistem komunitasnya sudah cukup hidup lebih dulu. Key points: - Jalan menuju GDE biasanya dimulai dari datang sebagai peserta, lalu jadi volunteer, lalu ditawari mengisi — dan proses rekomendasinya harus melalui Googler - Dua kualitas yang diharapkan dari GDE: keahlian yang cukup untuk mengajar di tingkat intermediate hingga advanced, dan jiwa berkomunitas - Slot pembicara DevFest terbuka untuk siapa saja, bukan hanya GDE — dan formatnya bebas: talk, workshop, panel discussion, atau exhibition - Topik web di DevFest tidak terbatas teknologi Google — apa pun yang termasuk web API boleh dibahas karena web API adalah kesepakatan banyak pemangku kepentingan, bukan produk eksklusif satu browser - Chapter GDG baru bisa diusulkan untuk kota yang belum punya, tetapi syaratnya ekosistem komunitasnya sudah hidup lebih dulu — GDG tidak bisa berdiri sendirian tanpa komunitas lain di sekitarnya - Ketika Chrome Dev Summit ditiadakan, tim Chrome justru dibuka untuk hadir di acara komunitas lokal — asalkan diundang jauh-jauh hari karena perlu waktu perjalanan dan persetujuan - Kalau ingin mulai berkomunitas tetapi belum ada acara di kota sendiri, kontribusi bisa berbentuk tulisan, video, podcast, atau kelompok belajar kecil — tidak harus jadi pembicara di panggung Full transcript available on the episode page. ## EP 5: Ngobrolin CSS - Ngobrolin WEB Ep2 - Published: 2022-11-17 - URL: https://ngobrol.in/episodes/ghLVcP_CgkY-ngobrolin-css-ngobrolin-web-ep2 - YouTube: https://www.youtube.com/watch?v=ghLVcP_CgkY Episode ini berbenang merah CSS, dari sumber belajar sampai fitur yang baru saja tersedia. Dibuka dengan menjawab pertanyaan penonton soal Quicklink: prefetch tidak menambah jumlah pengunjung secara langsung, tetapi ada efek samping yang jarang disadari — setiap prefetch tetap menjadi page request di sisi back-end, sehingga pada situs bertrafik besar dengan tagihan berbasis jumlah request, biayanya bisa membengkak. Bagian terbesarnya membahas inline CSS versus file CSS terpisah. CSS bersifat render blocking: browser menunggu file-nya selesai diunduh dan diparsing sebelum melanjutkan render, sehingga LCP ikut tertahan. Solusinya menyisipkan CSS kritikal langsung di dalam tag style, tetapi trade-off-nya nyata — HTML jadi lebih besar dan tidak bisa di-cache browser. Patokan praktis yang dipakai adalah sekitar 5KB; kalau sudah mencapai puluhan kilobyte, sebaiknya dipisah. Pengalaman memecah CSS sampai per komponen justru membuat halaman lebih lambat karena tiap file punya delay sendiri. Topik berikutnya container query, fitur yang mulai diminta orang sejak 2013 dan baru stabil sembilan tahun kemudian. Bedanya dengan media query: media query hanya tahu ukuran viewport, sedangkan sebuah komponen bisa saja ditempatkan di sidebar sempit meski layarnya lebar. Dari sini muncul diskusi bagus soal kapan mengadopsi fitur yang belum merata dukungannya — jawabannya bukan menunggu semua browser, melainkan melihat data analytics pengguna sendiri, memakai polyfill, dan menerapkan progressive enhancement. Ditutup dengan cerita harus mendukung IE11 karena pegawai bank memakai laptop kantor yang browsernya dikunci dari pusat. Key points: - Prefetch tidak menambah pengunjung secara langsung, tetapi setiap prefetch tetap menjadi page request di back-end — pada trafik besar dengan tagihan berbasis jumlah request, biayanya bisa membengkak - CSS bersifat render blocking sehingga LCP ikut tertahan menunggu file-nya selesai diunduh dan diparsing — inilah alasan CSS kritikal disisipkan langsung di tag style - Trade-off inline CSS: HTML jadi lebih besar dan tidak bisa di-cache browser, jadi patokan praktisnya sekitar 5KB; memecah CSS sampai per komponen justru melambatkan karena tiap file punya delay sendiri - Optimasi Core Web Vitals itu untuk pengguna, bukan untuk mesin pencari — menyisipkan semua CSS memang membuat skor hijau, tetapi pengguna terus mengunduh isi yang sama berulang kali - Container query menjawab keterbatasan media query yang hanya tahu ukuran viewport, padahal satu komponen bisa ditempatkan di sidebar sempit meski layarnya lebar — fitur ini diminta sejak 2013 dan baru stabil sembilan tahun kemudian - Untuk memutuskan mengadopsi fitur yang belum merata dukungannya, kirim deteksi dukungan API ke analytics dan kumpulkan datanya beberapa minggu — jadi seperti caniuse khusus pengguna kita sendiri - Framework berganti tetapi fundamental bertahan: prinsip prefetch, render blocking, dan hidrasi tetap sama entah memakai React, Svelte, atau Angular Full transcript available on the episode page. ## EP 4: Ngobrolin Island Architecture - Ngobrolin WEB Ep1 - Published: 2022-11-17 - URL: https://ngobrol.in/episodes/1p7nM1Yr6tw-ngobrolin-island-architecture-ngobrolin-web-ep1 - YouTube: https://www.youtube.com/watch?v=1p7nM1Yr6tw Episode ini membahas Island Architecture beserta dua topik yang saling menyambung: Quicklink dan Astro. Dimulai dari Quicklink, library mungil buatan tim Google yang mengubah semua tautan internal di halaman menjadi prefetch otomatis. Kuncinya bukan sekadar prefetch — itu sudah lama ada di web — melainkan kapan prefetch dijalankan: hanya saat browser sedang menganggur lewat requestIdleCallback, dan hanya untuk tautan yang benar-benar masuk viewport lewat Intersection Observer. Hasilnya aplikasi multi-halaman biasa terasa seperti single page application, tanpa harus memakai meta framework. Island Architecture sendiri adalah cara menata arsitektur front-end dengan analogi kepulauan: seluruh halaman adalah wilayah statis (laut), sementara bagian-bagian yang butuh interaktivitas JavaScript adalah pulau-pulaunya. Pendekatan ini memadukan keunggulan client-side rendering dan server-side rendering — kita bisa memilih komponen mana yang perlu dihidrasi, dan menentukan prioritasnya: yang di atas lipatan segera, yang di bawah menunggu browser menganggur. Kelemahannya lebih pada faktor manusia: keputusan itu sangat bergantung pada aplikasi masing-masing, dan tidak cocok untuk aplikasi yang memang seluruhnya dinamis seperti game atau aplikasi peta. Astro menerapkan filosofi ini dengan menjual zero JavaScript by default, dan direktif client:idle serta client:visible-nya sebenarnya membungkus dua Web API yang sama. Dibahas juga Qwik yang mengklaim tidak butuh hidrasi sama sekali karena ia resumable. Ditutup dengan demo View Transition yang masih di balik flag, plus catatan bahwa keunggulan pendekatan berbasis Web API adalah fallback-nya tetap berfungsi sebagai tautan biasa. Key points: - Kunci Quicklink bukan prefetch itu sendiri tetapi kapan ia dijalankan — hanya saat browser menganggur lewat requestIdleCallback dan hanya untuk tautan yang masuk viewport lewat Intersection Observer - Prefetch harus dibatasi hanya domain sendiri dan di-throttle; halaman berita dengan seratus tautan internal yang di-prefetch semuanya sama saja dengan menyerang server sendiri - Island Architecture memakai analogi kepulauan: halaman adalah wilayah statis dan hanya bagian yang butuh interaktivitas yang jadi pulau — memadukan keunggulan CSR dan SSR - Kekurangannya bersifat human factor: keputusan mana yang perlu dihidrasi sangat bergantung pada aplikasi masing-masing, dan tidak cocok untuk aplikasi yang seluruhnya dinamis seperti game atau peta - Direktif client:idle dan client:visible di Astro sebenarnya membungkus requestIdleCallback dan Intersection Observer — pola yang makin umum seiring meta framework memilih Web API ketimbang membuat mekanisme sendiri - Qwik mengklaim tidak butuh hidrasi sama sekali karena ia resumable — konsep yang di episode ini pun diakui belum sepenuhnya jelas cara kerjanya - Keunggulan pendekatan berbasis Web API adalah fallback-nya: kalau View Transition belum didukung, tautannya tetap berfungsi sebagai anchor biasa — berbeda dari router yang sepenuhnya bergantung JavaScript Full transcript available on the episode page. ## EP 3: Ngobrolin Web Episode Perdana - Published: 2022-11-17 - URL: https://ngobrol.in/episodes/Aneo-LjbnoI-ngobrolin-web-episode-perdana - YouTube: https://www.youtube.com/watch?v=Aneo-LjbnoI Episode perdana Ngobrolin WEB, dibuka dengan perkenalan tiga pembawa acaranya: Riza, Eka, dan Ivan. Formatnya sengaja dibuat santai — mengobrol tentang teknologi web secara umum, bukan mengikat diri pada satu framework atau satu browser, dengan tujuan mengejar ketertinggalan dari perkembangan web yang bergerak sangat cepat. Masing-masing membawa satu topik. Topik pertama adalah Sanitizer API, sebuah web API baru yang membersihkan string HTML dari script berbahaya sebelum dirender. Selama ini kebutuhan itu ditambal dengan library pihak ketiga seperti DOMPurify atau — lebih buruk lagi — regex hasil salin-tempel dari Stack Overflow. React menandainya dengan nama yang menakutkan, dangerouslySetInnerHTML, sementara Svelte terang-terangan menyatakan tidak melakukan sanitasi sehingga tanggung jawabnya ada pada kita. Dari sini muncul prinsip yang sudah lama dipegang komunitas WordPress: sanitize early, escape late — bersihkan setiap input di pintu masuk, dan escape di titik output paling akhir. Topik kedua adalah Performance Insights, panel baru di Chrome DevTools yang memvisualisasikan proses render alih-alih hanya menyajikan skor seperti Lighthouse. Dengan panel ini bisa terlihat langsung elemen mana yang dianggap browser sebagai FCP dan LCP, di detik ke berapa layout shift terjadi dan apa penyebabnya, serta resource mana yang render blocking. Pembedahan situs berita sungguhan menunjukkan polanya: kerangka halaman dirender di server, tetapi kontennya baru diambil belakangan lewat client-side rendering, sehingga pembaca menunggu terlalu lama untuk melihat isi yang sebenarnya mereka datangi. Key points: - Sanitizer API membersihkan string HTML dari script berbahaya langsung di browser, menggantikan kebutuhan memasang library pihak ketiga atau menyalin regex dari Stack Overflow - Nama dangerouslySetInnerHTML di React dan peringatan di dokumentasi Svelte sama-sama menegaskan hal yang sama: merender HTML dari pengguna adalah tanggung jawab kita, bukan framework - Prinsip sanitize early, escape late: bersihkan setiap input di pintu masuk — form, query string, header — dan escape di titik output paling akhir, bukan di tengah-tengah - Fitur di balik flag berarti sudah ada di browser tetapi harus diaktifkan manual — biasanya tahap sebelum dirilis stabil beberapa versi kemudian - Performance Insights memvisualisasikan proses render, bukan sekadar memberi skor — jadi bisa terlihat elemen mana persisnya yang dianggap browser sebagai FCP dan LCP - Konten di atas lipatan jangan di-lazy load; targetnya adalah membuat FCP, LCP, dan DOMContentLoaded berdekatan, dengan CSS kritikal di-inline dan JavaScript yang tidak perlu ditunda - Skor yang berbeda antara Lighthouse online dan pengukuran lokal itu wajar karena lokasi CDN berbeda — yang penting bukan angkanya melainkan apa yang menghambat sebelum FCP Full transcript available on the episode page. ## EP 2: Ngobrolin ECMAScript - Ngobrolin WEB Ep8 - Published: 2022-11-16 - URL: https://ngobrol.in/episodes/fv-M_fFil0c-ngobrolin-ecmascript-ngobrolin-web-ep8 - YouTube: https://www.youtube.com/watch?v=fv-M_fFil0c Episode ini membahas ECMAScript — apa sebenarnya di balik nama yang sering kita sebut sebagai ES6, ES2015, dan seterusnya. Intinya ECMAScript adalah spesifikasi, bukan implementasi: ia menjelaskan perilaku yang harus dicapai, sementara tiap browser bebas mewujudkannya dengan caranya sendiri lewat engine masing-masing seperti V8, SpiderMonkey, dan JavaScriptCore. Itu sebabnya hasil benchmark yang sama bisa berbeda antar browser, dan itu pula sebabnya JavaScript tidak punya situs dokumentasi resmi tunggal. Sejarahnya menarik: setelah ES3 pada 1999 sempat vakum sepuluh tahun karena ES4 tidak pernah selesai akibat perselisihan, dan baru sejak ES5 pada 2009 rilisnya kembali teratur setiap tahun. Proses penambahan fitur dijelaskan bertahap: siapa pun boleh mengusulkan di stage 0 lewat isu di GitHub, tetapi baru masuk stage 1 kalau ada anggota komite TC39 yang menjadi champion. Stage 4 berarti selesai dan pasti dirilis pada versi tahun berikutnya — inilah yang dimaksud ESNext pada konfigurasi Babel atau TypeScript. Menjadi anggota ECMA ternyata berbayar untuk kalangan industri dengan tarif yang sengaja dibuat tinggi, meski ada kategori khusus untuk institusi pendidikan dan organisasi nirlaba. Ditutup dengan pembahasan perbedaan arrow function dan regular function — sintaks yang lebih ringkas, implicit return, tidak punya objek arguments, dan perbedaan perlakuan terhadap this. Key points: - ECMAScript adalah spesifikasi perilaku, bukan implementasi — tiap browser mewujudkannya dengan engine berbeda, dan itulah kenapa hasil benchmark yang sama bisa berbeda antar browser - Setelah ES3 pada 1999, spesifikasinya vakum sepuluh tahun karena ES4 tidak pernah selesai akibat perselisihan; baru sejak ES5 rilisnya kembali teratur tiap tahun - Siapa pun boleh mengusulkan fitur di stage 0 lewat isu di GitHub, tetapi baru bergerak setelah ada anggota TC39 yang menjadi champion-nya - ESNext pada konfigurasi Babel atau TypeScript berarti fitur yang sudah mencapai stage 4 — sudah final dan pasti dirilis pada versi tahun berikutnya - Backward compatibility adalah keunggulan besar platform web: script lama tetap berjalan bertahun-tahun kemudian, dan tiap proposal wajib menjelaskan cara polyfill-nya - Arrow function bukan sekadar sintaks lebih pendek — ia punya implicit return untuk satu baris, tidak punya objek arguments sehingga harus memakai rest parameter, dan memperlakukan this secara berbeda - Named function membantu saat debugging karena namanya muncul di stack trace, sedangkan anonymous function membuat jejak error lebih sulit dibaca Full transcript available on the episode page. ## EP 1: Perkembangan Teknologi WEB dari httparchive - Ngobrolin WEB Ep7 - Published: 2022-11-09 - URL: https://ngobrol.in/episodes/UEaMZRG_OnQ-perkembangan-teknologi-web-dari-httparchive-ngobrolin-web-ep7 - YouTube: https://www.youtube.com/watch?v=UEaMZRG_OnQ Episode ini membedah Web Almanac 2022, laporan tahunan tentang keadaan web yang datanya berasal dari HTTP Archive. Yang membedakannya dari survei seperti State of JS adalah metodenya: ini field report, bukan kuesioner. Datanya berasal dari URL yang benar-benar diakses pengguna Chrome lewat Chrome UX Report, lalu tiap bulan URL-urL itu diuji dengan sejumlah tools dan disimpan di BigQuery yang bisa dikueri siapa saja. Temuan dari sisi JavaScript: jumlah JavaScript yang dimuat justru naik dibanding tahun sebelumnya, webpack masih memimpin sebagai bundler, dan jQuery masih jauh di atas React — sebagian besar karena WordPress yang dipakai sekitar 35% situs. Sisi lain dari popularitas jQuery adalah ia jadi penyumbang celah keamanan terbesar. Yang cukup memprihatinkan, 77% halaman mobile masih memuat script yang render blocking, padahal atribut async sudah lama tersedia. Adopsi PWA naik stabil sejak 2019, dan datanya menunjukkan jenis situs yang paling banyak memakainya adalah shopping dan news. Ada temuan praktis soal ikon: meski variasi ukurannya membingungkan, hanya dua ukuran yang benar-benar dominan. Ditutup dengan pembahasan kenapa laporan seperti ini berguna — bukan sekadar tahu tren, tetapi punya data untuk mendukung keputusan teknis di hadapan pemegang keputusan, dan tahu di mana posisi kita dibanding rata-rata. Key points: - Web Almanac adalah field report, bukan survei — datanya dari URL yang benar-benar diakses pengguna Chrome, sehingga bebas dari bias lingkaran pertemanan pembuat survei - Datanya terbuka di BigQuery dan bisa dikueri siapa saja untuk analisis sendiri, misalnya melihat pertumbuhan teknologi tertentu di situs yang diakses dari Indonesia — gratis sampai satu terabyte sebulan - jQuery masih jauh di atas React, sebagian besar karena WordPress yang dipakai sekitar 35% situs — dan popularitas itu pula yang membuatnya jadi penyumbang celah keamanan terbesar - 77% halaman mobile masih memuat script yang render blocking padahal atribut async sudah lama tersedia — salah satu celah perbaikan terbesar yang datanya jelas - Adopsi PWA naik stabil sejak 2019, bukan tren sesaat, dan paling banyak dipakai situs shopping serta news - Untuk web manifest, meski variasi ukuran ikon membingungkan, hanya dua ukuran yang benar-benar dominan — sisanya hanya perlu kalau memang menyasar browser lama - Angkanya perlu dibaca dengan hati-hati: metriknya diukur dengan lab tools dalam kondisi cache kosong dan tidak login, dan framework tanpa runtime seperti Svelte sulit terdeteksi karena jejaknya hilang setelah di-build Full transcript available on the episode page.