Inovasi Web dari Google I/O 2024 - Ngobrolin WEB

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.

Poin-poin Utama

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