# 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 176: State of CSS - Ngobrolin WEB - Published: 2026-08-04 - URL: https://ngobrol.in/episodes/YBFDo2jSSJA-state-of-css-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=YBFDo2jSSJA Full transcript available on the episode page. ## EP 175: Liputan langsung Google I/O - Ngobrolin WEB - Published: 2026-07-22 - URL: https://ngobrol.in/episodes/wHi7Q711vW8-liputan-langsung-google-io-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=wHi7Q711vW8 Full transcript available on the episode page. ## EP 174: Ngobrolin State of AI - Ngobrolin WEB - Published: 2026-07-22 - URL: https://ngobrol.in/episodes/oNrHsiogsQY-ngobrolin-state-of-ai-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=oNrHsiogsQY Full transcript available on the episode page. ## EP 173: Tailwind - Ngobrolin WEB - Published: 2026-07-22 - URL: https://ngobrol.in/episodes/eexwOhPaMso-tailwind-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=eexwOhPaMso Full transcript available on the episode page. ## EP 172: Pekerja Web - Ngobrolin WEB - Published: 2026-07-22 - URL: https://ngobrol.in/episodes/a_MmIT8QLxI-pekerja-web-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=a_MmIT8QLxI Full transcript available on the episode page. ## EP 171: Bedah Framework Anvia - Ngobrolin WEB - Published: 2026-07-22 - URL: https://ngobrol.in/episodes/nJhk892C4_U-bedah-framework-anvia-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=nJhk892C4_U Full transcript available on the episode page. ## EP 170: 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 Full transcript available on the episode page. ## EP 169: Optimasi JavaScript - Ngobrolin WEB - Published: 2026-07-14 - URL: https://ngobrol.in/episodes/JUu7WUGt1eU-optimasi-javascript-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=JUu7WUGt1eU Full transcript available on the episode page. ## EP 168: Google I/O 2026 - Ngobrolin WEB - Published: 2026-05-26 - URL: https://ngobrol.in/episodes/hDtImY8hikU-google-io-2026-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=hDtImY8hikU Full transcript available on the episode page. ## EP 167: Alat Desain AI - Ngobrolin WEB - Published: 2026-05-19 - URL: https://ngobrol.in/episodes/dD1AajkCSe0-alat-desain-ai-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=dD1AajkCSe0 Full transcript available on the episode page. ## EP 166: Bedah Web - Ngobrolin WEB - Published: 2026-05-12 - URL: https://ngobrol.in/episodes/_BnH4kIsSwk-bedah-web-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=_BnH4kIsSwk Full transcript available on the episode page. ## EP 165: Zona Waktu - Ngobrolin WEB - Published: 2026-05-05 - URL: https://ngobrol.in/episodes/4vHgtGtsDFg-zona-waktu-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=4vHgtGtsDFg Full transcript available on the episode page. ## EP 164: Vite+ - Ngobrolin WEB - Published: 2026-04-27 - URL: https://ngobrol.in/episodes/Edez-dpX0Hw-vite-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=Edez-dpX0Hw Full transcript available on the episode page. ## EP 163: Scam dan Penipuan - Ngobrolin WEB - Published: 2026-04-21 - URL: https://ngobrol.in/episodes/g6gKeLGYPQU-scam-dan-penipuan-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=g6gKeLGYPQU 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 Full transcript available on the episode page. ## EP 161: Bedah Situs - Ngobrolin WEB - Published: 2026-04-07 - URL: https://ngobrol.in/episodes/KJ96IaRARvQ-bedah-situs-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=KJ96IaRARvQ Full transcript available on the episode page. ## EP 160: Project Management Tools - Ngobrolin WEB - Published: 2026-03-31 - URL: https://ngobrol.in/episodes/qlL_42q4mUE-project-management-tools-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=qlL_42q4mUE Full transcript available on the episode page. ## EP 159: Ngobrolin Otorisasi - Published: 2026-03-12 - URL: https://ngobrol.in/episodes/UMNXxUqlZS0-ngobrolin-otorisasi - YouTube: https://www.youtube.com/watch?v=UMNXxUqlZS0 Full transcript available on the episode page. ## EP 158: Stack dan Tools - Ngobrolin WEB - Published: 2026-02-17 - 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-27 - 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-20 - 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-16 - 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-11-30 - 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-25 - 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-18 - 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-04 - 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-21 - 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-13 - 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-13 - 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-23 - 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-16 - 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-10 - 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-26 - 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-19 - 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-11 - 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-29 - 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-22 - 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-21 - 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-06 - 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-01 - 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-30 - 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-17 - 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-27 - 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: Web Performance Update - Ngobrolin WEB - Published: 2025-05-13 - 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-06 - 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-08 - 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-03-31 - 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-25 - 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-18 - 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-18 - 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-18 - 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-11 - 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-04 - 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-21 - 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-14 - 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-07 - 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-23 - 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-17 - 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-10 - 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-03 - 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-19 - 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-05 - 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-29 - 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-15 - 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-08 - 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-01 - 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-24 - 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-17 - 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-10 - 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-03 - 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-26 - 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-30 - 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-09 - 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-02 - 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-11 - 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-04 - 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-27 - 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-21 - 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-13 - 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-07 - 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-04-30 - 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-23 - 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-02 - 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-19 - 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-12 - 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-05 - 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-27 - 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-30 - 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-09 - 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-19 - 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 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 Full transcript available on the episode page. ## EP 58: Ngobrolin Festival Developer - Ngobrolin WEB - Published: 2023-11-21 - URL: https://ngobrol.in/episodes/KhIlxKS1vwc-ngobrolin-festival-developer-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=KhIlxKS1vwc Full transcript available on the episode page. ## EP 57: Ngobrolin RedwoodJS - Ngobrolin WEB - Published: 2023-11-14 - URL: https://ngobrol.in/episodes/_5rmu9SJsJY-ngobrolin-redwoodjs-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=_5rmu9SJsJY 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 Full transcript available on the episode page. ## EP 55: Ngoding di browser - Ngobrolin WEB - Published: 2023-10-31 - URL: https://ngobrol.in/episodes/3W1Vk95usrg-ngoding-di-browser-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=3W1Vk95usrg 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 Full transcript available on the episode page. ## EP 53: Ngobrolin CSS Layout - Ngobrolin WEB - Published: 2023-10-10 - URL: https://ngobrol.in/episodes/oyQSFpOjcEo-ngobrolin-css-layout-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=oyQSFpOjcEo 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 Full transcript available on the episode page. ## EP 51: Ngobrolin Package Manager - Ngobrolin WEB ep52 - Published: 2023-09-17 - URL: https://ngobrol.in/episodes/yhlD16hyW90-ngobrolin-package-manager-ngobrolin-web-ep52 - YouTube: https://www.youtube.com/watch?v=yhlD16hyW90 Full transcript available on the episode page. ## EP 50: Ngobrolin Linter - Ngobrolin WEB ep51 - Published: 2023-09-17 - URL: https://ngobrol.in/episodes/2dqsz5Y4Mlk-ngobrolin-linter-ngobrolin-web-ep51 - YouTube: https://www.youtube.com/watch?v=2dqsz5Y4Mlk 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 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 Full transcript available on the episode page. ## EP 47: Ngobrolin HTTP - Ngobrolin WEB - Published: 2023-08-29 - URL: https://ngobrol.in/episodes/MZ4dViTkIZ0-ngobrolin-http-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=MZ4dViTkIZ0 Full transcript available on the episode page. ## EP 46: Ngobrolin WASM - Ngobrolin WEB - Published: 2023-08-20 - URL: https://ngobrol.in/episodes/9ECU9Wz0wzU-ngobrolin-wasm-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=9ECU9Wz0wzU Full transcript available on the episode page. ## EP 45: Ngobrolin Performa CLS feat Jessica Cecilia - Ngobrolin WEB - Published: 2023-08-15 - URL: https://ngobrol.in/episodes/uKWkLVtKb7g-ngobrolin-performa-cls-feat-jessica-cecilia-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=uKWkLVtKb7g Full transcript available on the episode page. ## EP 44: Ngobrolin URL - Ngobrolin WEB ep45 - Published: 2023-08-08 - URL: https://ngobrol.in/episodes/EMynH33TrBI-ngobrolin-url-ngobrolin-web-ep45 - YouTube: https://www.youtube.com/watch?v=EMynH33TrBI Full transcript available on the episode page. ## EP 43: Ngobrolin Privacy Sandbox - Ngobrolin WEB ep44 - Published: 2023-08-04 - URL: https://ngobrol.in/episodes/IA3ECrPgbZU-ngobrolin-privacy-sandbox-ngobrolin-web-ep44 - YouTube: https://www.youtube.com/watch?v=IA3ECrPgbZU Full transcript available on the episode page. ## EP 42: Ngobrolin Web bersama Thomas Steiner ep43 - Published: 2023-07-25 - URL: https://ngobrol.in/episodes/aSAW5q7xEaY-ngobrolin-web-bersama-thomas-steiner-ep43 - YouTube: https://www.youtube.com/watch?v=aSAW5q7xEaY 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 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 Full transcript available on the episode page. ## EP 39: Ngobrolin I/O Extended - Ngobrolin WEB ep40 - Published: 2023-07-07 - URL: https://ngobrol.in/episodes/M2zdLxrm4F4-ngobrolin-io-extended-ngobrolin-web-ep40 - YouTube: https://www.youtube.com/watch?v=M2zdLxrm4F4 Full transcript available on the episode page. ## EP 38: Ngobrolin Bundler - Ngobrolin WEB ep39 - Published: 2023-06-26 - URL: https://ngobrol.in/episodes/bwpPxqgFyWQ-ngobrolin-bundler-ngobrolin-web-ep39 - YouTube: https://www.youtube.com/watch?v=bwpPxqgFyWQ 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 Full transcript available on the episode page. ## EP 36: Ngobrolin SVG - Ngobrolin WEB - Published: 2023-06-13 - URL: https://ngobrol.in/episodes/GIlzAKp7rI8-ngobrolin-svg-ngobrolin-web - YouTube: https://www.youtube.com/watch?v=GIlzAKp7rI8 Full transcript available on the episode page. ## EP 35: Ngobrolin Otomasi bersama Jecelyn - Ngobrolin WEB ep36 - Published: 2023-06-06 - URL: https://ngobrol.in/episodes/2Kcb9uIQW8M-ngobrolin-otomasi-bersama-jecelyn-ngobrolin-web-ep36 - YouTube: https://www.youtube.com/watch?v=2Kcb9uIQW8M 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 Full transcript available on the episode page. ## EP 33: Ngobrolin Google IO Lebih Dalam - Ngobrolin WEB ep34 - Published: 2023-05-23 - URL: https://ngobrol.in/episodes/OwdCWP1FWNE-ngobrolin-google-io-lebih-dalam-ngobrolin-web-ep34 - YouTube: https://www.youtube.com/watch?v=OwdCWP1FWNE 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 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 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 Full transcript available on the episode page. ## EP 29: Ngobrolin Templating Language - Ngobrolin WEB ep30 - Published: 2023-04-21 - URL: https://ngobrol.in/episodes/mJ6t8TJc6cQ-ngobrolin-templating-language-ngobrolin-web-ep30 - YouTube: https://www.youtube.com/watch?v=mJ6t8TJc6cQ 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 Full transcript available on the episode page. ## EP 27: Ngobrolin Format Warna - Ngobrolin WEB ep28 - Published: 2023-04-19 - URL: https://ngobrol.in/episodes/uYqnB9rhIaQ-ngobrolin-format-warna-ngobrolin-web-ep28 - YouTube: https://www.youtube.com/watch?v=uYqnB9rhIaQ Full transcript available on the episode page. ## EP 26: Ngobrolin Web Jadul - Ngobrolin WEB ep27 - Published: 2023-04-04 - URL: https://ngobrol.in/episodes/2nJE0rvIUps-ngobrolin-web-jadul-ngobrolin-web-ep27 - YouTube: https://www.youtube.com/watch?v=2nJE0rvIUps Full transcript available on the episode page. ## EP 25: Ngobrolin Teknologi Edge - Ngobrolin WEB ep25 - Published: 2023-03-21 - URL: https://ngobrol.in/episodes/J8qef9MI1rY-ngobrolin-teknologi-edge-ngobrolin-web-ep25 - YouTube: https://www.youtube.com/watch?v=J8qef9MI1rY Full transcript available on the episode page. ## EP 24: Ngobrolin TypeScript - Ngobrolin WEB ep24 - Published: 2023-03-16 - URL: https://ngobrol.in/episodes/cjqz5C0eWgc-ngobrolin-typescript-ngobrolin-web-ep24 - YouTube: https://www.youtube.com/watch?v=cjqz5C0eWgc Full transcript available on the episode page. ## EP 23: Ngobrolin Proyek Fugu - Ngobrolin WEB ep23 - Published: 2023-03-07 - URL: https://ngobrol.in/episodes/YMFz1Ky2E0k-ngobrolin-proyek-fugu-ngobrolin-web-ep23 - YouTube: https://www.youtube.com/watch?v=YMFz1Ky2E0k Full transcript available on the episode page. ## EP 22: Ngobrolin Interop 2023 - Ngobrolin WEB ep22 - Published: 2023-02-28 - URL: https://ngobrol.in/episodes/mN01Hg41tB8-ngobrolin-interop-2023-ngobrolin-web-ep22 - YouTube: https://www.youtube.com/watch?v=mN01Hg41tB8 Full transcript available on the episode page. ## EP 21: Ngobrolin Belajar - Ngobrolin WEB Ep21 - Published: 2023-02-21 - URL: https://ngobrol.in/episodes/18LNXOF8IPA-ngobrolin-belajar-ngobrolin-web-ep21 - YouTube: https://www.youtube.com/watch?v=18LNXOF8IPA Full transcript available on the episode page. ## EP 20: Ngobrolin Otentikasi - Ngobrolin WEB ep20 - Published: 2023-02-12 - URL: https://ngobrol.in/episodes/H-NPmffVrcw-ngobrolin-otentikasi-ngobrolin-web-ep20 - YouTube: https://www.youtube.com/watch?v=H-NPmffVrcw Full transcript available on the episode page. ## EP 19: Ngobrolin Metode Rendering - Ngobrolin WEB ep19 - Published: 2023-02-04 - URL: https://ngobrol.in/episodes/WC230bL6YnY-ngobrolin-metode-rendering-ngobrolin-web-ep19 - YouTube: https://www.youtube.com/watch?v=WC230bL6YnY 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 Full transcript available on the episode page. ## EP 17: Ngobrolin Web Components - Ngobrolin WEB Ep10 - Published: 2023-01-24 - URL: https://ngobrol.in/episodes/B0Ar5k_h2uk-ngobrolin-web-components-ngobrolin-web-ep10 - YouTube: https://www.youtube.com/watch?v=B0Ar5k_h2uk Full transcript available on the episode page. ## EP 16: Ngobrolin Cookies - Ngobrolin WEB ep17 - Published: 2023-01-17 - URL: https://ngobrol.in/episodes/KPZ-BgtX1kk-ngobrolin-cookies-ngobrolin-web-ep17 - YouTube: https://www.youtube.com/watch?v=KPZ-BgtX1kk Full transcript available on the episode page. ## EP 15: Ngobrolin Font - Ngobrolin WEB Ep11 - Published: 2023-01-17 - URL: https://ngobrol.in/episodes/WJvTvTSm9l8-ngobrolin-font-ngobrolin-web-ep11 - YouTube: https://www.youtube.com/watch?v=WJvTvTSm9l8 Full transcript available on the episode page. ## EP 14: 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 Full transcript available on the episode page. ## EP 13: Ngobrolin Browser - Ngobrolin WEB ep14 - Published: 2022-12-22 - URL: https://ngobrol.in/episodes/O2c3Q2QTZI4-ngobrolin-browser-ngobrolin-web-ep14 - YouTube: https://www.youtube.com/watch?v=O2c3Q2QTZI4 Full transcript available on the episode page. ## EP 12: Nobrolin Image - Ngobrolin WEB ep13 - Published: 2022-12-14 - URL: https://ngobrol.in/episodes/NwXiJKBW35U-nobrolin-image-ngobrolin-web-ep13 - YouTube: https://www.youtube.com/watch?v=NwXiJKBW35U Full transcript available on the episode page. ## EP 11: Ngobrolin Testing - Ngobrolin WEB Ep12 - Published: 2022-12-13 - URL: https://ngobrol.in/episodes/TPetwHcfXns-ngobrolin-testing-ngobrolin-web-ep12 - YouTube: https://www.youtube.com/watch?v=TPetwHcfXns Full transcript available on the episode page. ## EP 10: Ngobrolin i18n - Ngobrolin WEB Ep6 - Published: 2022-11-30 - URL: https://ngobrol.in/episodes/CH5rh-zHktQ-ngobrolin-i18n-ngobrolin-web-ep6 - YouTube: https://www.youtube.com/watch?v=CH5rh-zHktQ Full transcript available on the episode page. ## EP 9: Ngobrolin Konsep JS: Event Loop - Ngobrolin WEB Ep5 - Published: 2022-11-23 - URL: https://ngobrol.in/episodes/qU3POeBk-0E-ngobrolin-konsep-js-event-loop-ngobrolin-web-ep5 - YouTube: https://www.youtube.com/watch?v=qU3POeBk-0E Full transcript available on the episode page. ## EP 8: Ngobrolin Android - Ngobrolin WEB Ep9 - Published: 2022-11-22 - URL: https://ngobrol.in/episodes/TGEH6ovjnjU-ngobrolin-android-ngobrolin-web-ep9 - YouTube: https://www.youtube.com/watch?v=TGEH6ovjnjU 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 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 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 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 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 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 Full transcript available on the episode page. ## EP 1: Perkembangan Teknologi WEB dari httparchive - Ngobrolin WEB Ep7 - Published: 2022-11-11 - URL: https://ngobrol.in/episodes/UEaMZRG_OnQ-perkembangan-teknologi-web-dari-httparchive-ngobrolin-web-ep7 - YouTube: https://www.youtube.com/watch?v=UEaMZRG_OnQ Full transcript available on the episode page.