Inovasi Web dari Google I/O 2024
Ringkasan Episode
Bantu KoreksiEpisode 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.
(musik)
Selamat malam. Halo, halo, halo.
Halo, Bu. Malam semuanya.
Malam semuanya bertemu lagi dengan kita berdua.
Masih berdua dulu.
Nanti tambah satu.
Lagi di perjalanan.
Mudah-mudahan segera sampai.
Tapi nggak usah buru-buru juga.
Santai-santai aja.
Jadi kita berdua nanti mudah-mudahan bertiga
akan malam ini ngobrolin tentang berbagai hal
yang berhubungan dengan web.
Di Google I/O ya.
Seperti biasa di Selasa Malam.
Waktunya ngobrolin web.
Ngobrolin web.
Absent. Oh, ada Tomato. Halo, Tomato.
Halo.
Ada siapa lagi?
Ya, jadi seminggu yang lalu ya.
Beberapa hari yang lalu lah ya.
Seminggu yang lalu itu Google I/O diselenggerakan di sana.
Di Amerika.
Ada teman kita yang ikutannya.
Kita bikin teman dari GDI yang kebetulan di sana.
Ada Andrew, ada Imre.
Ada Imre sama Andrew.
Langsung.
Live report.
Lihat transkrip lengkap (911 segmen lagi)
Laporan pandangan mata.
Di Indonesia kita watch party doang.
Di Discord-nya Google Maps Indonesia.
Ada kita, ada gue, ada Ivan.
Ada teman-teman yang lain juga.
Mas Budi.
Di live stream juga sama Padhika.
Padhika.
Ada di channelnya Padhika juga.
Doi stream dari channelnya dia juga.
Seru. Sampai malam.
Hai.
Teman-teman di sini pada ngikutin nggak sih Google I/O?
Ada yang nonton atau ada ikutan watch party.
Mungkin bisa share juga topik-topik yang menarik.
Nah, malam hari ini kita akan bahas tentang beberapa topik yang menarik menurut kita.
Yang dihalai dari event Google I/O 2024.
Khususnya yang berkaitan dengan teknologi web.
Karena kan banyak banget lulus banget kan kemarin I/O.
Kalau kita ngobrolin AI ntar AI-AI lagi semua.
Dan kayaknya nggak mungkin kita nggak bahas AI.
Karena ada beberapa juga yang berhubungan dengan web ya.
Dan AI secara keseluruhan banyak sekali ya.
Sampai ada counternya ya itu ya.
Sampai ada yang bikin flipnya di edit semua ngomong AI doang.
Nggak, tapi sebenarnya di luar AI, maksudnya oke lah.
Karena kebutuhan industri ya.
Kompetitor si OpenAI juga kemarin barusan ada spring release.
Jadi memang fokusnya ke arah sana.
Cuma ternyata kalau dilihat-lihat,
sebenarnya ya tadi nih karena ngecek konten buat ini,
ternyata konten webnya ya cukup banyak, cukup signifikan juga.
Jadi mungkin kalau teman-teman ada yang cuma nonton keynotenya,
misalnya terus belum sempat, misalnya belum sempat ngecek apa sih yang baru di web,
apa yang di-announce, mungkin FOMO,
nah ini nanti kita kasih kisih-kisihnya di sini.
Sekaligus kita mau cari inspirasi buat I/O Extended ya sebenarnya ya.
Topik apa yang kira-kira teman-teman tertarik untuk belajar.
- Pernasaran tertarik. - Yang lebih dalam gitu ya.
Ada banyak sebenarnya web di ranah UI, CSS, HTML, JavaScript,
ada update kemudian apa lagi, performance ya, performance.
- Performance testing. - Yang kemarin udah minggu dulu,
kalau nggak salah kita bahas juga ya testing,
ada beberapa project juga yang lumayan menarik,
ada web GPU juga, ada AI yang ditaro di browser,
itu juga menarik, jadi mari kita bahas satu per satu ya.
Halo Ilham, halo.
- Halo-halo. - Dan kita mulai dari...
- Bahasa mana ini? - Pake notenya web kali ya.
Nah ini tadi lupa, tadi lupa naruh linknya,
nggak usah diputer juga sih, cuman...
kalau teman-teman mau nonton nanti ya setelah ini ya,
jangan sekarang nontonnya, bingung.
- Jadi strukturnya I/O itu kan keynote, keynote yang utama itu
yang di panggung besar yang Pak Sundir dan developer lain,
terus ada developer keynote yang kombin,
terus masing-masing bidang kayak misalnya Android, web,
ada itunya sendiri juga, coba sambil dibuka aja tuh linknya, YouTube-nya.
- Sebentar, sebelum dibuka kita kedatangan satu orang lagi.
- Akhirnya sampai, udah balik.
- Akhirnya udah sampai rumah udah selesai makan,
belum sempat mandi, loh.
- Dari mana, dari mana? - Dari Bandung, iya.
- Acara itu, pwp. - Nggak, acara nyantai-nyantai aja.
Acara ketemu Mas Danang.
- Oh, kalau bahas Mas Danang ntar muncul ini.
- Hati-hati, hati-hati. - Nggak apa-apa juga, cuman muncul aja.
Rachel Andrews, dan ini salah satu idola juga, ikonik banget.
Dulu beliau lama di Smashing Magazine.
- Oh, dia urusin web.dev kan ya?
- Iya, dan semua punya konten.
Konten terkait web, ya, termasuk di developer Chrome juga.
Nah, ini tuh kalau what's new, misalnya what's new in the web,
what's new in Android, what's new in blablabla,
itu kayak ringkasannya sih.
Ini lumayan lama sih, toknya 45 menit.
Jadi kalau misalnya males nonton semua, bahas di sini aja.
Jadi ini yang gue lihat menarik juga sih,
karena fokusnya banyak di inisiatif-inisiatif
men-streamline teknologi web.
Nah, itu tadi kan di skrin-nya udah muncul tuh baseline.
Jadi masih mirip, masih sama kayak yang tahun lalu,
update intinya kayak banyak tentang baseline dan interrupt.
Jadi kalau buat yang belum tahu,
berarti belum sering nonton show kita.
- Ngobrolin web. - Nah, baseline.
Inisiatif antar, jadi komunitas semua di ekosistem web.
Jadi kayak berbagai vendor-browser, bukan Chrome doang,
Chrome, Mozilla, Safari, terus komunitas.
Terus kelompok kerja di W3C itu terlibat juga.
Bikin standarisasi intinya.
Nah, baseline itu intinya sih suatu fitur web
bisa dibilang udah masuk baseline
kalau sudah disupport oleh 2 versi stabil terbaru
dari semua major browsers.
Itu intinya.
Nah, yang menarik di tahun ini, di keynote yang tahun ini,
mereka kayak meng-improve lah dari yang...
tahun lalu kan secara konsep,
oke tuh, ada konsep baseline.
Jadi kalau kita lihat ada logo centang ini,
ibaratnya suatu fitur sudah aman untuk digunakan.
Tapi kan kenyataan nggak seindah keynote speech, ya kan?
Maksudnya 2 versi browser stabil terbaru.
Apakah semua user mengaktifkan auto-update?
Misalnya salah satu concern-nya kalau di dunia nyata,
kan belum tentu semua orang auto-update,
semua orang rajin meng-update versi browser,
jangan-jangan misalnya 2 versi terbaru itu
ternyata scope-nya masih 5 bulan terakhir.
Nah, client nggak mau terima
karena mungkin target audience-nya nggak seperti itu.
Nah, sekarang di perbeda...
ada label, coba scroll ke atas deh.
Nah, zoom in.
Sekarang ada 2 label,
newly available dan widely available.
Sama-sama baseline.
Jadi nggak mengubah dari konsep yang original,
yang simple, yang tahun lalu.
Cuma ini dibedakan,
dan kalau misalnya teman-teman lihat keynote-nya itu,
di logo centang itu bawahnya ada text-nya juga
dibedakan antara newly available atau widely available.
Nah, newly available itu...
Kalau nggak salah yang newly itu biru ya?
Kalau nggak salah.
Pokoknya ada text-nya sih, iya.
Ke biru atau...
Oh iya, kayak...
Newly biru, kalau nggak salah.
Ijo widely, ya gitu.
Pokoknya newly available ya baru, baru send.
Baru aja, misalnya browser terakhir,
vendor terakhir yang rilis, Firefox, gitu.
Firefox stable-nya support,
yang lain semua udah support, ya.
Ini 2 versi terakhir.
Nah, kalau baru banget namanya newly available.
Kalau widely available itu 30 bulan setelah...
Iya, 30 bulan atau berapa bulan, gitu.
Setelah newly available.
Oh iya, nah itu.
Nah, 30 bulan itu kan udah lama ya.
Jadi maksudnya itu kayaknya yang beneran widely available itu
udah bener-bener bisa banget dipakai di semua...
Ya, hampir semua lah.
Hampir semua use case kita.
Dua setengah tahun ya?
Dua setengah tahun.
Dua setengah tahun setelah newly available.
Jadi kayak kita relatif nggak harus mikirin fallback,
progressive enhancement,
atau polyfill, dan lain-lain.
Nah, itu helpful banget sih.
Sama kalau tahun lalu kan baru banget tuh.
Baru banget di-announce.
Terus sekarang kan udah 2 tahun.
Dan ini sudah dibuat polis daftar berdasarkan tahun.
Baseline 2023-2024.
Maksudnya fitur apa saja yang menjadi baseline di tahun 2023.
Apa saja yang masuk ke baseline di tahun 2024.
Nah, dan seterusnya.
Pas tahun lalu ini udah dibilang sih,
cuma kayak masih wacana.
Karena belum kan, belum dijalani.
Belum banyak di-refine.
Nah, ternyata sekarang udah ada.
Apa yang membedakan ini dengan Can I use?
- Ya, sebetulnya data-nya, sumbernya sebagian sama sih.
Itu Can I use juga di link.
Cuma lebih ke stream line semua.
- Mungkin waktu set up project atau space baru kita mendeside,
"Oke, kita pakai baseline 2003."
Jadi nggak rancu lagi persatuan. Maksudnya nggak ketengan lagi.
Harus nanya ini bisa nggak atau nggak.
Jadi kalau memang sudah ada kita sebagai team,
sudah desain, "Oke, kita pakainya baseline 2023."
Berarti kalau dia masih eksperimental atau masih belum widely available,
jangan dipakai.
- Iya, memudahkan itu sih komunikasi dan dokumentasi.
Walaupun bisa aja kita buka Can I use,
periksa satu per satu versi browser,
terus kita cek browser versi X itu rilisnya kapan.
Udah cukup lama belum, bedanya berapa bulan dari sekarang.
Iya, bisa.
Tapi kan nggak praktikal untuk keperluan komunikasi,
termasuk bikin spesifikasi project dan dokumentasi.
- Bisa aja jadinya, contohnya CSS subgrade.
Dia kan baru baseline di 2024.
Sedangkan project di set-upnya di baseline 2023, contohnya.
Berarti kita sebagai team, ya udah tahu.
Kalau misalnya itu ada di 2024, ya berarti belum bisa.
- Iya, kita dengan cepat bisa bilang, "Oh, ini belum."
atau, "Oh, ini udah aman."
- Iya, kalau mungkin betul, jadi menetapkan standar baru.
Kalau misalkan kan teman-teman misalkan mau ngecek,
"Oh, di Firefox kompatibilitasnya gimana?"
Biasa kita lihat di MDN. MDN itu kan ada ya, seperti Can I use juga kan ya.
Tapi per fitur, sama ya. - Data-nya sama.
- Sama. Terus abis itu di Can I use ada juga seperti ini.
Tapi dengan mungkin dengan standar-standar yang berbeda gitu.
Ya mungkin tampilannya atau apa gitu.
Dengan adanya baseline, ya jadi satu, jadi standar.
Jadi sama team juga ngomongnya, "Oh, kita pakai baseline aja."
Baseline 2024 atau 2023, jadi udah lebih...
- Berarti ini sama kayak memilih.
Oke, project kita pakai ES Next, ES Next, ES 6, 7, atau ES 6, eh, 7, 8 gitu ya.
Kalau dulu kan masih ES 2015 atau ES Next gitu kan ya.
Sekarang sudah ES 6, ES 7. - Iya, buat standar aja.
- Dan baru lihat juga sih, baseline masuk Can I use.
Berarti emang membuktikan bahwa ini kerja sama semua ekosistem
yang ngetracking fitur web ya.
- Itu nge-lock baseline-nya ini loh. Asynchronous loh.
- Iya, kelihatan kan dia tiba-tiba awalnya nggak ada, terus muncul kayak gitu ya.
- Dan terjadi CLS kalau misalnya mau dirilat.
- Reflex-nya, apa, matanya mata CLS banget ya.
- Iya. Oh, web komponen.
- Oh, disediain, dikasih, itu resmi.
Jadi kita misalnya punya website yang isinya artikel atau tutorial pemprograman ya, tutorial web.
Terus kita pengen ambil informasi tentang suatu fitur.
Kok nggak bisa? Belum dibikin kali itu, harusnya ada button-nya.
Belum selesai. Ada kok di GitHub-nya, cari somewhere.
- Coba inspect element di sana.
- Ini kan beda. Ini widget-nya beda loh.
- Coba klik. - Ini bikin sendiri kali, tapi disediain.
- Oh ini bikin sendiri ya. Artikel main, bukan.
Dia summary ya? Oh ini dia summary, taruhnya di summary itu.
Bikin sendiri dia. - Iya.
- Bikin sendiri. Ini nggak pakai widget-nya. Oh di GitHub-nya ada ya?
- Ada, somewhere. - Somewhere.
- Oke lah, lanjut. - Tahun lalu udah lihat soalnya.
Terus apa lagi yang menarik? Oh dashboard baru.
Ngomongin inisiatif kiri itu.
Selama ini kita pakai WPT ya, web platform test itu terkait project interrupt.
Jadi di keynote web itu juga masih ngupdate tentang project interrupt yang masih jalan terus.
Jadi intinya para vendor browser, browser engine, semacam voting menentukan fitur-fitur apa
yang mau difokuskan banget biar bekerjanya perfect sama konsistensi
antar browser juga perfect untuk setiap tahun dipilih sekian fitur.
Cara ngetesnya tuh pakai, cara ngetes.
Cara tahu suatu fitur udah berjalan-jalan bagus atau nggak kan?
Pakai test, web platform test WPT. Dulu pakainya WPT.FYI ya.
Sampai sekarang masih buka itu kan?
- Sampai sekarang masih. Cuma ini dibikin dashboard yang lebih keci dan mudah dipakai.
Dari perspektif developer kalau ini. Jadi kalau si dashboardnya WPT, web platform test,
itu kan sebenarnya lebih ke fungsi utamanya lebih ke tukang bikin browser.
Mereka yang bikin buat ngetrack punya fitur-fiturnya, test suite-nya, masing-masing test-nya juga.
Nah kalau ini memudahkan kita buat cari-cari apa, ngecek misalnya apa aja yang di support di baseline 2023.
Bisa difilter-filter juga tuh. Filternya lebih oke.
Nah kan lebih keci ya? Kalau dulu kan kita harus buka satu persatu terus tabelnya ya gitulah developer banget.
Kalau ini secara UI lebih keci. Bisa filter tuh di atas.
Oh iya filter by. Available on safari.
Oh harus ditulis ya apa gitu ya?
Kayak GitHub gitu ya kayaknya.
Ininya search, oh search, iya search. Available on safari.
Belum.
Ini juga termasuk baru ya.
Tapi sudah widely, oh newly available ini ya?
Iya udah masuk baseline. Ini yang di-announce.
Iya.
Belum 30 bulan.
30 bulanan.
Iya.
Tapi masih bagi.
Masih bagi ya?
Ya butuhnya ada yang nggak lulus test-nya 0,3%.
Nah itu pasti edge case yang aneh-aneh.
Oh ini filter aja ya?
Apa namanya status-nya widely ya?
Enter deh kayaknya.
Harus pencet ini, nggak bisa di-enter.
Nah berarti masih bagi juga itu dashboard-nya tuh. Kita kirim feedback aja.
Ini udah bahkan nggak ada persenannya lagi ya.
Nggak dibikin test-suit. Kayaknya nggak ada yang komplain.
Udah bisa semua.
Taxi Indian 82% tapi udah widely available ya?
Jadi widely available itu maksudnya udah di-support di semua major browser selama 2 versi terbaru plus 30 bulan.
Cuma test-suitnya ternyata masih ada yang nggak lulus.
Kan bisa.
Jadi nggak lulus testing itu bukan selalu karena nggak berfungsi ya.
Cuma ini kadang antar browser, misalnya speknya kurang jelas.
Interpretasi masing-masing browser tuh behavior-nya beda.
Nah kan mungkin selama ini sebelum dibikin testing-nya ya mereka sama-sama semua ngerasa oh iya emang expected kok kayak gitu.
Nah setelah dibikin test-suit baru kerasa.
Baru ketahuan nggak 100%.
Backdown clip.
Nah ini berguna kalau kita pengen, kita nemu suatu fitur, liat tutorial atau apa.
Bahkan kadang itu tuh kalau kita lihat pasti kita cenderungnya, wah seru nih.
Ah tapi pasti Chrome doang.
Pasti browser lain belum ada yang support.
Nah daripada susun-susun kayak gitu langsung cek di situ aja.
Cekin ini dong, cekin Spekulation API.
Itu Chrome only pasti.
Gak bisa ya?
Spekulation?
Nggak ada.
Itu baru di-announce juga kan ya, Spekulation API kan?
Iya.
Nah cuma kalau yang kayak gitu bisa dibikin test kayak gini nggak ya?
Coba ya MDN ya.
Nah test-nya gimana coba?
Ini kan yang buat rendering kan, maksudnya yang UI-related.
Nah itu udah ada, Spekulation Rules.
Experimental, tuh ada warning-nya di atas.
Hey, Chrome Edge.
Chromeium only emang.
Chromeium only?
Iya Chromeium only.
Masih Chromeium only, no.
Belum masuk web platform.
Maksudnya belum streamline di browser lain.
Safari juga belum, iya baru hanya Chrome ya.
Tapi ini per API loh, ini dokumen pre-rendering, pre-rendering change event, ada banyak.
Masih merah semua, masih merah semua.
Masih merah semua.
Ya Chromeium, Chromeium only.
Gapapa, tetap useful.
Cuma apa, ekspektasinya berarti harus di-manage.
Oh ini yang 2023 ya?
Iya, yang ini yang baru ya.
Oh, newly available tuh.
Itu ada range tanggalnya yang jadi baseline di tanggal-tanggal tersebut.
Ya.
Sin costan, buset, udah newly available ternyata, apa trigonometry?
Trigonometry buat charting library mungkin ya, bagus.
Oke berikutnya, berikutnya kita bahas tentang Chrome Dashboard ya.
Ya ini di-announce juga di King of Web.
Chrome Dashboard itu apa?
Gue baru denger.
Ya itu support dari ROM itu loh, user metric.
Oh, real user metric.
Ya ini kan juga sebenarnya udah ada dari dulu, cuma dibikinin dashboard yang enak dilihat gitu lah.
Ini ya, Chrome Insight ya bukan?
Iya, RAM Insights.
RAM Archive Insights.
Jadi intinya misalnya kita pengen tahu berdasarkan data RAM,
berapa orang yang masih pakai IE 6 gitu, atau apalah.
Ini kan dari dulu ada ya kalau nggak salah.
Bukannya ini ada sebagai bagian dari web almanak ya?
Ingat ya, kita pernah bahas ini pas tentang ROM, user metrics.
Masa sih, kok nggak inget?
ROM Archive, nggak, maksudnya bahas kilas, tanggung sumber datanya.
RAM Archive.
RAM Archive, FOK, browser version, ini apa? Timeseries Chrome version, mobile desktop.
Cuma yang seru itu detail banget sih.
Iya, siapa ya? Siapa dan dalam kasus apa orang buka Samsung internet dari desktop?
Itu semua yang...
TV ya maksudnya kayak?
Bisa jadi.
Kok desktop sih soalnya?
Yang dianggap sebagai browser desktop.
Atau itu Samsung Chromebook itu?
Oh ada ya?
Ada kan Samsung Chromebook?
Ada, ada.
Kan bisa di-install juga, semua Chromebook bisa di-install Samsung internet kan.
Tapi masuknya mobile atau desktop?
Nah itu nggak tahu.
Nah kaitannya, ini yang seru sih, coba scroll nggak tahu deh ke bawah atau ke atas yang tadi sama baseline.
Gimana bacanya ini?
Zoom in, zoom in.
User kan, user yang mengakses, loh jadi kecil. Ini yang gede tapi ini yang kecil, ya balik lagi.
Ini berarti kalau nggak salah baca, berarti user yang mengakses aplikasi web yang MPA 56%,
yang mengakses SPA 21%, yang hard yang software 2%.
Tapi apa beda aja sih, hardsoft kayak telor, 33,9.
Hard Navigation itu client-side, tapi pertama kali datang atau di-refresh, user manually refresh.
Habis itu kalau udah, biasanya kalau SPA itu kan pakai client-side router ya, react router atau apalah,
terserah next router, habis itu kalau navigasi antar halaman, itu kan kayak udah dibajakan,
di-hijack sama client-side routing-nya, itu disebutnya soft navigation.
Ya intinya antara SPA sama MPA itu beda-beda tipis ya, 56% dan 44%.
Dan tetap lebih banyak MPA tuh, walaupun beda tipis, lebih banyak MPA.
Berarti ini dari sisi user-nya, bukan dari sisi developer ya?
Macem-macem sih, kayak di atas kan ada perbandingannya sama baseline tuh, coba ke atas.
Atas atau bawah ya, nggak tau carilah baseline.
Landing page apa ini? Jadi user yang mengakses landing page ada 22% gitu.
Coba klik apa tuh atinya landing page?
Landing page is the first page, tuh paragraf 2 ada keterangannya. The first page a user visit.
Loh kok kesini? Akamai. Landing page is per-page user visit during new session on given website.
On a given website.
Oke.
As long as first a user visit. True-false itu maksudnya apa?
A session is typically defined as a series of navigation.
Berarti ini maksudnya, per jumlah visit yang hanya ke landing page gitu?
Landing page itu artinya halaman pertama kan yang diakses sama user.
Iya.
Terus true itu artinya benar.
Gak ngerti kalau ini cuma orang analytics yang paham.
Backward, back-forward ini nih.
Back-forward cache bukan? Oh bukan.
Iya benar, benar.
Dia navigasinya pakai back-forward.
Kalau di mobile, pakai swipe kan.
Kalau ini masih bisa kebaca lah.
Nah kalau yang di-announce kemarin kaitannya ini, eh bawah lagi.
Bawah dikit.
Ada section buat dapetin data tentang baseline support.
Coba deklik, misalnya coba scroll ke bawah.
Klik yang 2024.
Iya, 2023 misalnya.
If you target to following web features for baseline 2024,
75% dari desktop users yang ada di RAM Archive akan bisa mendapat keuntungan dari fitur-fitur ini.
Jadi kayak kita ngebanding ini.
Kan sebelumnya abstrak ya.
Maksudnya dua versi browser terakhir misalnya.
Itu kan kayak gimana nyatanya realnya di user kita.
Berapa persen yang bisa dapat manfaatnya.
Nah kalau ini jadi kayak di cross apa sih.
Dituin sama data, di relate sama data user-nya.
Ini kan desktop.
Desktop user ya.
Kalo misalnya mau, misalnya pengen pake hash.
Berarti boleh gak pake hash berdasarkan data.
Coba 2023.
Oke, berarti bisa dibilang kalau saya pake hash, meskipun dia newly available,
sudah bisa diakses oleh 80%.
Sudah bisa memanfaatkan 80% pengguna user yang di RAM Archive itu.
Berarti bisa berikan enough justification gitu ya.
Bisa berikan, oke 80%.
- Iya, jadi kayak buat decision making kita.
Maksudnya worth it atau nggak sih.
Sebenarnya kan kalau misalnya adopsi suatu fitur baru,
pemikirannya adalah worth it atau nggak.
Nah, jadi itu bisa didukung dengan data.
- Oh, dia justru sama TTP Archive itu mirip-mirip.
Cuma sumber datanya berbeda.
Sumber datanya dari CDN kalau nggak salah.
Kama ini kan salah satu program CDN ya.
- Oh, kita di tracking.
- Selama ini juga di tracking.
- Nah ini, kalo Http Archive itu ngambilnya dari Chrome only kan.
Krux CRUX.
Chrome only, bahkan Chromium pun belum tentu kan.
- Chrome only.
- Ya, Chrome only.
- Nah kalau Akamai ini mungkin lebih umum.
- CDN.
- Karena semua producer bisa aja ngambil...
- Iya, jadi ngerti sekarang maksudnya kenapa dia pakai data dari CDN.
Karena kalo Krux ya di Chrome only, datanya nggak sah dong.
Gak bisa jadi patohan.
- Oh iya, dia gak bisa dapet browser lagi.
- Iya, bisa jadi patohan browser lagi.
- Dia bisa ngasih presentase browser kan makanya.
- Iya.
- Make sense.
- Dan bisa di-query juga sama kayak CRUX kan.
- Ada nggak datanya? Dikasih nggak sih?
- Ada nih, di-query.
- Ada, ada.
- Ah, nice.
- Tuh, dikasih kok.
- Berarti bisa jadi JN's conflag di Jakarta nih mas, kita bahas beginian lagi datanya.
- Amin, doakan saja.
- Gak, kalo ada yang mendengar, kita mencari organizer dan cari sponsor.
- Kanti nama dong, Jabodetabekcs, biar bisa lebih seksibel.
- Penjang banget.
- Nggak, kita kan pake namanya, kalo conference-nya kan namanya JSD.
- JSD ya.
- Kita kemarin pake JSD ya.
- JSD.
- Oke, menarik ya. Jadi kalo CRUX itu hanya Chrome aja, kalo ini bisa semua.
Walaupun mungkin tidak menjangkau, tergantung kita sebagai pengguna apakah kita mengakses Akamai CDN atau nggak gitu ya.
Masih lumayan ada celah juga, ya walaupun ini lebih general.
- Tapi lebih general.
- Ya, lebih general.
- Nah, cuma mungkin mereka kerja sama-sama siapa gitu yang lain, CDN lainnya.
Akamai kan mungkin dia salah satu provider CDN terlama dan terbesar juga ya, salah satu ya.
- Dia produknya banyak sih, video provider juga.
- Dan dipake banyak enterprise kan.
Bisa jadi kayak CDN-CDN lain tuh di belakangnya pake infrastructure.
- Nah, itu gue mikir kayak gitu, misalnya Lambda Function kan banyak yang pake AWS Lambda atau JCP.
- Ya, ya saingannya ya kayak CloudFront, CloudFlare.
- Oh iya bener, CloudFlare juga sebenernya kalo mereka mau kasih insight, buka data juga bisa.
- Nah, kalo Amazon atau AWS CloudFlare itu kan punya datanya sendiri, makanya dulu namanya Amazon top 10 million itu apa namanya?
- Alexa, bukan?
- Alexa, ya itu Alexa itu kan datanya dari CDN mereka juga, bukan Amazon Alexa ya.
- Jadi pake Akamai produk apa nih? CDN ya? Atau apa? Boleh info-info, kita soalnya agak-agak abu-abu juga nih, cuman taunya CDN doang.
- Saya pake Akamai banyak. - Banyak ya?
- Akamai Net Storage, streamnya Akamai, Akamai CDN yang jelas ya, streamnya juga ada.
- Kategori desktop dan mobile, tapi pemakainya lebih banyak di mobile. Oh di desktop juga ada ya? Baru tau nih.
- Nah itu yang tadi kita bahas, desktopnya itu, kalo mobile kan jelas, maksudnya kalo yang
browser bawaan Samsung. - Desktop.
- Iseng banget. - Bisa download gitu?
- Enggak, mungkin mereka punya produk laptop? Netbook? Enggak tau.
- Google Play, oh apa ini? Kan sekarang Windows udah bisa install Google Play kan? - Iya, betul.
- Bisa jadi, bisa jadi. - Oh, tagline-nya Akamai, peace for all.
- Bagus tagline-nya. - CDN ya, peace for all.
- Maksudnya dia semua produk ada ya, semua produk adalah kompetitor, jadi peace. Peace ya, maap ya. Kita punya produknya semua.
- Dan Akamai itu ada note, sudah ada semenjak sebelum Amazon atau Google Cloud masuk, sudah ada.
- Saya waktu ngadain acara di salah satu data center, ngobrol-ngobrol sama orang data center-nya,
"Kita Akamai di sini loh." - Iya, udah duluan.
- Cuma gak boleh sebut nama tempatnya, jadi ya nanti jadi kalian tau gimana.
- Salah satu yang cukup terkenal juga itu, apa namanya, video platform.
Jadi kalau misalkan temen-temen mau bikin Youtube, bikin Youtube atau bikin... - Kompetitor Youtube.
- Hampir semua TV, hampir semua TV ada platform-nya, ya video.com atau RCTI+. Nah itu mereka punya servisnya di sana untuk streaming.
- Pikin TV, paket bikin TV, bikin streaming servisnya. - DRM, ya misalkan supaya gak dibajak gitu kan. Nah itu mereka punya banyak lah pokoknya.
- Oke, oke. Apa lagi nih yang menarik? Nah di CSS sendiri ada beberapa fitur yang masuk baseline ya, kalau gak salah ya.
- Banyak, banyak. - Yang menarik-menarik aja.
- Yang di-announce di keynote nih kemarin, ada size container queries. Nah mana ya?
- Gak nemu, apa belum sempet cari link-nya sih. Intinya yang di-announce pertama kena major yaitu size container queries itu tuh udah masuk semua browser.
Nah kita kan kayaknya kalau size container queries nih bersejarah nih, karena kita pertama kali banget ngobrolin web, belum bikin show-nya ya.
Pertama kita ngobrol tentang fitur web, dan ternyata langsung semangat, langsung nyambung bertiga itu tentang container queries.
- Itu 2 tahun yang lalu kan ya? Nah itu kan baru masuk Chrome, tapi udah stable di Chrome. Jadi maksudnya kita pas itu semangat karena udah stable di Chrome, berarti ya...
- Enggak lah, waktu itu kita sudah bahas karena dia sudah disupport sama 3 browser. - Yang ini size-nya?
- Container query kan? - Size container queries. - Berdasarkan size. - Kalau ini beda lagi, ada update subset-nya kali?
- Beda lagi kayaknya. Subset-nya kayaknya... - Nggak, ini udah baseline. Udah baseline berarti 2 versi, stabil terbaru.
- Container query dan size container query itu hal yang sama. Atau fitur salah satu? - Container queries berdasarkan size.
Ya yang di-nounspornya masuk baseline itu size container queries sih. Coba aja cari di blognya, kita cari.
Intinya itu hasil dari... udah masuk interrupt juga. Jadi sebelumnya di state of CSS survey, banyak developer yang vote fitur itu.
2023 masuk interrupt, jadi emang digodok banget sama semua browser biar stabil di seluruh browser itu. Sekarang udah masuk baseline.
- Nah di sini ada tuh, using container query ada size inline, size dan normal. - Ya semua itu sih kayaknya ya, harusnya.
- Tapi ini belum ada widget baseline-nya ya? - Iya iya, kenapa belum? - Kalau di ini ada, kalau di... kalau di Can I use ada...
- Oh Can I use ada? - Ada... ada... ada... container query. - Container query.
- Belum itu? - Jadi unit ini, wait ini query unit, ini container size. - Nah tuh udah ada centangnya.
- Kalau... - Ya update ya, karena pakai widget. Masih bahas widget.
- Oh nggak ada ya. Jadi memang ada bagian-bagiannya, container query doang. Ini ada units, ada size.
- Nah unit tuh mungkin pakai itu ya, yang kayak itu tadi qvhqvnato. - Tapi ini belum ada baseline-nya juga ya? Belum masuk kali ya?
- Belum, belum masuk. - Belum, belum masuk berarti. - Tapi ini udah ijo loh. - Ya udah ijo kan, tapi belum masuk baseline.
- Ya belum, harus dua versi stabil terakhir dari semua browser major. - Iya, iya bener-bener. Nah ini limited ya.
- Belum ini. - Oh ini beda ya, container query sama container query beda? - Beda. Ini unik lagi, ini style punya berdasarkan style atau CSS class yang dimiliki elemen lain.
- Ya gitu deh, ribet. Dan emang belum. - Ini ya, container query ya. - Iya. Itu yang di-announce yang major.
- Kecuali teman-teman punya user yang menggunakan QQ browser, Baidu. - Baidu. Itu mah ditinggal aja.
- Belum tentu. Karena bisa jadi kan, itu akamanya kan belum tentu masuk China ya. Jadi ya belum tentu. Jadi kita nggak tahu juga kan. - Opera Mini.
- Opera Mini. - Kalau di Opera Mini kayaknya udah tinggal aja karena sudah lewat masa symbian.
IE juga udah ditinggalkan kan. Soalnya udah stop kan. Developmentnya udah stop kan. Sekarang ke Edge kan.
- Dan kalau misalnya ada corporate yang jaman batu gitu yang birokrasinya nggak boleh ngupdate sama sekali, masih pakai itu,
kan mereka udah terbiasa untuk nggak mungkin mengakses situs modern yang up gitu kan. Paling buat akses dokumen doang kan.
- Kalau pun ada, nggak usah dipikir. - Masih ada pemakaiannya seperti ini loh.
Kalau kayak EAT ya kasusnya itu yang saya tahu pernah cerita. Kayak di kampus yang lab gitu loh lab atau reset gitu.
Kan mereka punya mesin labnya yang gede, ya kan. Dan itu mungkin sebut saja ya Microsoft, ee Microsoft.
Mikroskop elektron misalnya. Yang itu dibuatnya tahun lama banget dan mikroskop itu masih berguna, masih dipakai gitu.
Dan hanya bisa diakses untuk ngambil data atau interfacenya itu mereka bikinnya pakai EA dengan appletnya.
Jadi ya masih dipakai kadang-kadang. Itu hanya untuk komputer di lab.
- Buat buka Crystal Report tuh. - Bisa jadi, bisa jadi Crystal Report. Masih ada nggak sih Crystal Report?
Crystal Report itu yang library buat ini kan buat printing kan. Iya buat bikin reporting kayak PDF.
- Kayak PDF. - Oh itu sebelum ada PDF ya?
- Nggak sudah ada PDF tapi another standard. - PDF belum seopen sekarang.
- Punyanya Microsoft. - Dan PDF dulu bikin PDF itu susah karena kayaknya spesifikasinya belum ada, belum banyak yang explore kesana.
- Belum jadi seperti standard sekarang. - Bisa jadi tuh kata Mas Rafki buat mapping ECU mobil tua.
Yes itu betul. Jadi kalau mobil tua, mobil kan ada komputernya, kalau mobil Eropa itu ada microkontrolernya dan untuk connect kesitu bukanya pakai browser.
- Oh gitu. - Jadi masih ada gitu.
- Iya masih ada tapi nggak membuka website baru kita. - Iya ngapain bikin pakai container query, pakai table aja kalau yang jaman gitu mah.
- Dan kalau kasus-kasus use case kayak gitu kan udah ada spesifik. Pasti itu cuma dibakai buat buka website A, B, C kayak udah nggak buat use case lain-lain lagi kan.
- Betul. Dan kalau mau diupdate ya nggak bisa juga kan diupdate. Yang susah itu adalah kalau download EA aja sudah dihilangin gimana coba.
- Sekarang disuruh download Edge kan pasti. - Tetap ada mirror-mirrornya ada kok kayak.
- Tapi kan sekarang udah lebih streamline lah. Kalau dulu bayangin ada sebuah job search yang mengharuskan kita menggunakan browser tertentu.
Jadi begitu kita buka tiba-tiba browser Anda tidak kompatibel. Silahkan download browser ini.
Kalau sekarang ada yang ngatur-ngatur gitu dimarahin kali ya. Ya kalau dulu cara kerja gitu karena kan website di dunia nyata juga emang gitu kan.
This site is best viewed in Internet Explorer atau Netscape Navigator. Website-nya pun ngatur-ngatur, maksudnya website di production pun ngatur-ngatur kayak gitu.
Jadi emang standar behavior-nya kayak gitu. - Masih ada mirror-nya tuh. FileHippo.
- Udah. Download Internet Explorer 6. Ini jadi wilayahnya sejarawan. Ini kalau anak kuliah jurusan sejarah disuruhnya.
- Itu apa? - Sejarah internet ya.
Nah ini CSS nesting yang kayaknya major diumumin sudah masuk baseline. Baru saja masuk baseline namanya ini.
Dalam arti didukung oleh semua major browser dua release tabil terakhir CSS nesting.
Nah ini masuk internet 2024 juga. Jadi apa? Diperbaiki dan di-streamline kan. Dibuat konsisten.
- Ini masih newly available ya? - Nggak. Newly available.
- By the time ini sudah widely available, ini bisa mengurangi ukuran kita tetap bisa menulisnya di SAS.
Tapi saat di-compile di post-processor nggak perlu lagi dibikin banyak. Jadi nestingnya tetap saya yakin.
SAS compiler nanti dia akan keep nestingnya. Jadi ukuran CSS SAS-nya bisa jauh berkurang.
- Iya betul juga. - Nah ternyata sekarang disarankan install Chrome untuk beberapa ujian online.
Kayaknya ada beberapa website juga yang menyarankan pakai Chrome. Dulu kalau nggak salah salah satunya ini.
Streamyard yang kita pakai ini dulu kalau nggak salah menyarankan Chromium Base.
Kalau nggak salah. Ini juga sama ya. Jadi Chrome is the new EA ya.
- Tapi sebuah nggak sih kalau misalnya diatur-atur begitu? - Bukan. Maksudnya didominasi kan.
Didominasi oleh EA. Kebetulan waktu itu kalau nggak salah ya ini tolong dikoreksi ya.
Jadi si job portal yang saya ceritakan tadi itu menggunakan teknologi yang sama dengan browser-nya.
Jadi mereka menggunakan .NET dan lain-lain yang kayaknya hanya available di EA gitu.
Jadi hanya bisa dibuka di EA. - Nah mungkin kasusnya Chrome itu mereka pakai Meet.
Pakai Meet kan kalau misalnya mungkin ada sesi yang pakai Meet atau Google Meet atau teknologi sejenisnya.
- Google Meet ya benar-benar. - Yang lebih optimal kalau di Chrome.
Jadi misalnya ngindarin, preemptively ngindarin in case tiba-tiba ada yang nge-bug di tengah-tengah
daripada repot ya udah disuruh pakai Chrome. - Mungkin ada teknik...
- Tapi idealnya audio dan lain-lain yang lebih optimize di browser tertentukan.
- Tapi idealnya jangan sih. Maksudnya kalau di dunia yang ideal semua web standar harusnya disupport semua.
Nah terus aneh tapi nyata nih ternyata nesting itu udah ada di Tailwind, native CSS nesting.
- Oh iya? - Tuh, coba buka di private chat.
Ya maksudnya CSS nesting yang kayak gini nih. - Udah di-support sama mereka gitu maksudnya.
Udah lama. - Tailwind alpha, itu Maret 2004.
Ini alpha sih, cuma misalnya Tailwind itu dia nggak akan ngadopsi ke core Tailwind-nya
kalau belum standar web API. Maksudnya belum masuk standar CSS yang standar.
Itu tuh tuh di-highlight. - Oh iya ampun, nggak kubaca.
- Oke. Menarik, menarik. - Tapi masih alpha.
Keliatannya belum nyoba juga sih. Cuma maksudnya berarti emang ke arah situ bakal widely supported.
Ini kan lepas dari kita pakai Tailwind atau nggak, ini kan salah satu pemain major di ekosistem CSS ya.
- Betul, betul. - Ini indikator juga.
- Update berikutnya, color mix. - Color mix itu sebenarnya kita pernah bahas.
Kita pernah bahas dulu, cuma yang sekarang udah masuk besain itu enak sih. Jadi mencampur atau menggabungkan ya gitu.
Menggabungkan warna dengan bahasa yang familiar, apa, human friendly banget sih.
Jadi kayak color mix, plum itu warna ya. Plum 40% dicampur pink.
Itu kan kayak human banget kan, kata apa, itunya. - Tapi jadi susah nggak sih?
- Nggak, gue kadang-kadang nggak ngerti warna sih ya, jadi susah.
- Bukan, justru ini buat developer itu tuh. Coba scroll atas, scroll atas.
Scroll atas, ini ya, scroll bawah dikit.
Ya buat apa ya, kalau yang ngerti warna mungkin bisa dengan gampang ngebayangin HSL itu,
misalnya kita pengen warna lebih cerah itu apa halnya jadi gimana, S-nya lebih gimana, L-nya gimana,
atau RGB, G-nya ditambahin, R-nya dikurangin. Nah kan itu abstrak ya.
Kalau ini kan lebih apa ya, lebih deket ke bahasa manusia pada umumnya lah.
Kita misalnya lihat kalau birunya 0%, itu putih, putih dicampur biru.
Birunya 0% ya putih, birunya 25%, jadi kayak apa, birunya dikit lah, biru muda.
Nah kalau 50%, birunya setengah, ya kayak gitu. Kayak lebih deket aja ke pemahaman kita manusia awam.
- Benar, benar, benar. Ini mainannya desainer kali ya. Kan kalau dulu ada di SAS gitu kan kayak ada bikin...
- Iya, ini ada mixing-nya kan biasanya. - Iya ada mixing-nya, iya.
Jadi sebenarnya fitur-fitur CSS yang udah masuk baseline sekarang itu kayak pelan-pelan gusur peran pre-processor.
Jadi kayak diserap ke CSS utamanya. - Ya sama lah kayak di JavaScript juga begitu kan.
- Nah kan dulu semua harus pakai Lodas, ya nggak harus cuma pakai Lodas, JQuery,
lama-lama semua diserap ke ECMAScript sama JavaScript Web API.
Nah kalau sekarang CSS juga. Maksudnya fenomenanya kayak gitu gambaran besarnya.
- Tapi sebenarnya nggak apa-apa kan intinya kan sesuatu yang sudah working dan banyak yang pakai di post-processor,
ya sudah proven, akhirnya diadopsi jadi core, banyak kan.
- Karena terbukti ada kebutuhan untuk itu. - Iya mungkin yang bikin juga merasa tersanjung gitu kan.
- Senang nggak bisa maintain lagi. - Gak perlu maintain lagi juga.
Bener menghilangkan fitur ya.
Oke. Nah kalau saya mungkin kalau dari saya itu nggak terlalu banyak ya.
Baru nonton yang video yang tadi itu yang keynotenya web ya yang tadi kita share.
Dan ya ini fitur-fitur yang update itu ya sebagian besar itu.
Kalau saya mungkin insightnya ini. Jadi sekarang kita balik lagi ya ke AI.
Di Chrome itu sudah ada gemininya. Akan ada gemininya.
- 126 ya mulai berapa sih? - Sudah ada kalau sudah ada.
Apalagi kalau yang pakai Chrome kanari itu sudah ada.
- Kalau def sudah ada belum sih? - Nggak tahu.
Sebenarnya saya udah kalian dapet ini nggak invitasi untuk nyobain?
- Dapet-dapet. - Udah ya. Sebenarnya sudah beberapa bulan atau beberapa minggu sebelum Google I/O udah dapet.
Cuman kan NDA kan nggak boleh diceritakan ke orang-orangnya.
- Iya kalau sekarang udah live sudah boleh. - Dan fiturnya juga belum final kan.
Masih di develop berdasarkan feedback kita.
Nah ini apa? Ini adalah AI untuk membantu kita memahami error code. Error message.
Jadi misalkan kalau kita klik terus tiba-tiba fail to fetch gitu errornya.
Di kanan atas ini ada gambar bohlam.
Ya gambar bohlam gitu. Understand this error kemudian continue. Nah dia akan coba menjelaskan. Something went wrong.
Kalau dia error siapa yang jawab ya?
Oh ini error reception nggak sih?
Ada error kita minta AI buat nerangin. AI-nya juga error.
- Ini keren sih. Ini ko cat. - AI-nya error.
Untung nggak muncul itu lagi dalamnya. Untung nggak muncul lightbulb lagi dalamnya.
- Ulang ya, ulang ya, ulang. - Cari arti error ini.
Git glitz aja. Udah-udah ini glitz.
Console message, continue. Bener kan? Iya error. Gemininya lagi error.
Jadi intinya adalah kita bisa dijelaskan tentang course policy, no access control origin itu kira-kira apa, dan ada solusinya ya?
Ada solusinya nggak sih?
- Ya harusnya ya. - Iya, sebaiknya.
Kasih solusi ya. Kita lihat di yang lain ya. Itu kan contoh ini kan. Ini ada warning. Ini warning ya, bukan error ya.
- Error semuanya berarti. - Error semua.
Lagi down ya berarti ya. Jadi nggak bisa demo.
Setiap demo itu pasti error ya.
Chrome versi 126.
Satu lagi yang menarik adalah tentang web GPU.
Wait, wait, wait. Kalau ada saingannya dari sisi gedung sebelah.
Ada yang bikin NPM-nya.
- NPM. Ini community library ya. - Oh community notes itu.
Community library NPM package untuk bisa ngedetect debugger di DevTool.
- Jadi kalau ada error bisa pakai open. - Terparti ya?
- Iya, terparti. Mirip lah. - Kalau ini first party.
Eh, tapi gue bisa nih. Baik-baik aja. Coba ya share screen gimana caranya.
Wait, gimana caranya. Share screen. Chrome tab.
- Mungkin Chrome saya yang error. - Window.
- Kanari sih, Chrome yang masih dijalan kan kanari tuh. - Iya, kanari masih banyak error ya.
- Pakai yang dev, kalau saya kan yang dev lebih stabil sedikit daripada kanari. - Itu bisa.
- Ini apa? Chrome apa? Stable? - Ini stable. Chrome 125 stable.
- Ini biasa? - Iya, biasa 125.
Jangan-jangan begitu didemoin gak bisa nih. Coba kita lihat ini.
- Understand this warning. - Yang error aja.
- Ya bentar. - Weee, keren.
Error with permission policy occurs when bla-bla-bla in this case.
The error occurs because the browser does not fix the error, bla-bla-bla.
- There are some additional tips. Jadi dikasih tips. Coba ya kita lihat. - Coba-coba.
Wait, data used to understand this message. Jadi transparan ya.
Ya ini data ini saja yang dikirimkan. - Data yang dipakai buat konteks.
- Yang dikirimkan ke Jemenainya, cuma data itu saja.
- Secara sederhana sebenarnya ini apa ya, memudahkan kita daripada copy paste ke Gemini atau Pneka, atau chat GPT kan.
- Ke Stack Overflow dan lain-lain. - Ini pakai Jemenai Flash kan ya.
Kalau nggak salah. - Flash itu yang bisa di embed ya?
- Paling ringan. Iya paling ringan. - Paling ringan.
- Di embed di dalam browser, di dalam Chrome sendiri ya? - Iya.
- Oh, jadi semakin gede dong ya. - Iya, kemungkinan ya.
Nah ini nih. Content security policy, ad blocker, privacy settings.
Eh tadi apa URL-nya yang buat nge-check? - Di private chat.
Bubble Jingle.
Coba nama itunya NJ Bobba. - Dibikinya pakai angular ya.
- Iya, dari namanya. Yaa fail to fetch. Nah coba.
- Harus ini ya, harus ada yang diaktifkan ya ininya ya, flag-nya ya. - Iya, flag-nya.
- Hah, nggak, ini nggak aktifin flag apa pun. - Waktu uji-coba kan harus kan.
- Waktu ini kemarin. - Oh iya.
- Has been blocked by course policy. - Oke, mau bisa nih.
The error message indicates that the browser has resource, but the server hosting that resource has not provided the server-nya.
Course adalah blablabla. Oh dikasih ininya lagi, code snippet-nya buat akses.
Ya beneran dikasih code-nya, server-nya harus. - Disarankan untuk update si server-nya ya.
- Pake header ini. - Dulu gue pas sebelum ngerti cost itu apa, pas develop juga pake extension sih.
Kenceng, keren kusingnya. Kusing sendiri. Data used to understand this message.
- Cuma ini yang dikirimkan ke Gemini ya, berarti ya data itu ya, data error-nya ya.
- Udah nih, error-nya pilihannya satu ini doang. - Udah.
- Oke. Update terakhir dari saya itu adalah yang cukup lumayan ini ya.
Kalau teman-teman ngikutin web GPU, sekarang udah bisa jalanin LLM.
- Demo, oke. - Demo, demo, demo.
- Ada demo-nya di bawah, tenang-tenang. - Oke.
- Itu berarti di browser kan ya, pake GPU. - Di browser, jadi semuanya jalan di browser.
Asli lihat ini web GPU. Ini contohnya nih, kita bisa pilih GEMA misalkan,
mau yang berapa, 2B, nggak tau nih apa bedanya ya. - Yang 2B aja 2B. - Oke.
- What is course? Oh, nggak bisa dienter. Nggak bisa dienter, nggak bisa di-send.
- Oh belum, dia lagi patching. - Wah, habis nih bandwidth.
- Ini gabungan dari web GPU sama WASMD ya, kalau nggak salah.
Ada GitHub-nya juga, jadi kalau teman-teman mau jalanin model-model LLM3, GEMA atau Mistral,
yang open ya, yang open access itu, sekarang bisa pakai web GPU.
- Gede banget ya kalau misalnya minta user download, kalau nggak salah, GEMA itu 2GB deh,
kalau nggak salah, yang kecilnya ya. - Ustah.
- Yang flash ya. Tapi belum ada ya GEMA yang flash ya, baru ada Gemini flash ya.
- Baru Gemini yang flash, GEMA nggak ada yang flash. - Belum ada.
- Models with 1K suffix signify 1024 context length, lowering 2-3GB VRAM.
Feel free to start trying with those. Yang -1. Yang ini ya berarti ya, salah kita, salah pilih.
- Itu ditanya. Yang kecil aja, cari yang kecil. - Udah keburu download apa, nggak bisa diulang?
Refresh aja. - Iya tuh. Download lagi.
- Udah lama aja, oh udah. Biarin. Apa itu? - Biarin ya. Error.
- Not enable. You can try, look. Tadi bisa. Apakah gara-gara yang -1. - The model.
- Oh bisa lanjut. Wow, keren. Berarti di local, gimana aja download ya, local storage ya?
Oh itu ada pernyataan dari Tomoto. Bagus tapi berat nggak sih webnya, case study-nya gimana?
Ada banyak case study-nya. - Nah di I/O kemarin, ada itunya.
Maksudnya itu salah satu konten yang banyak juga di I/O kemarin. Cuma saya nggak ngerti.
Coba deh buka tuh, di private chat. Itu ada artiklenya sama ada videonya dari I/O kemarin.
- Privacy. Yang pertama dan yang utama adalah privacy. Data tidak dikirim ke server.
Datanya hanya di client. Jadi data customer itu aman. Availability.
- Bisa kalau mau bikin PWA. - Dan downloadnya sekali ya.
Ya, downloadnya kan sekali. Habis itu udah, kecuali kita clear cache kan ya.
- Ya kalau download jadi kayak PWA kan, atau di embed, bisa jadi kan?
- Sekali download doang. - Oke sebentar. Ini downloadnya dimana ya?
Application? Local storage?
- Nggak sih. Set storage? Eh nggak sih set storage beda. Set storage beda lagi.
- Ini, ini, ini. - Itu wasm. Config wasm.
- Beda ya? - Ini? Gede-gede ini?
- Iya itu tuh modelnya tuh. Betul. Betul sekali. Modelnya satu-satu.
Ada dua tuh. Satu lagi modelnya. Click-click yang bawah tuh modelnya. Itu kan wasmnya.
Satu lagi modelnya. Ini dia. Ini modelnya juga di ini namanya, apa istilahnya ya, di split, di chunk.
Ini nggak satu finish. Pakai NVIDIA laptopnya. Keren banget.
- Ini PC, yang ini PC. - Keren banget.
- Bukan laptop. Satu giga loh downloadnya. Coba ya, what is this?
- Explain. - Explain about course.
- About course. Like? - Like I'm 5. Terus dia jawab,
anak umur 5 tahun nggak usah ngurusin course. Main layangan di luar sana.
- Ini jalannya lokal. Keceng kan. Itu salah satu keunggulannya.
- Kan nggak perlu khawatir, nggak bisa ngabisin token ya.
- Coba-coba. Bisa nggak ini Mas Riza? Sesuatu yang real life ini. Tunggu selesai dulu deh.
Real life question, contohnya.
Bukan, bukan. Gini aja, yang lebih umum aja. Please compare between Toyota Innova Xenics hybrid
versus Toyota Yaris Cross Hybrid with a table... versus, versus Yaris Cross Hybrid.
- Yaris Toyota juga kan? - Iya.
Yaris Cross Hybrid with specification table and comprehensive.
Comprehensive table. Comprehensive table for the specification.
Nah, coba. Pengen tahu.
- Gak bisa. - Ah, gak ada.
- Harus kasih. Harus kasih. - Mobil lama, mobil lama.
- Mobil lama, mobil lama. - Nggak bisa yang gitu-gitu.
Kita harus provide sendiri. Kayaknya ada data-nya.
- Iya, nggak ada dia data-nya. - Kan ini yang di-compress.
Nggak usah minta apa-apa macam. Suruh nulis resep coba.
- Resep apa? - Ya terserah.
- Gado-gado, gado-gado. - Gado-gado, gado, gado.
- Nggak bisa. - Tapi dia AD sih. Tahu dia tuh resipi.
- Iya, bener-bener. - Diskriminasional.
- Ini nggak inklusif dia. - Iya, mau inklusif 100 giga.
Ini 1 giganya.
- Iya, pakai gemini baru bisa ya. Bener, bener, bener.
Ini ringan loh, web-nya ringan. Jadi pas proses download-nya aja
yang mungkin agak berat tergantung. - Ya, download-nya 1 giga.
Makanya di video yang IO itu juga ada tuh. Coba deh buka.
- Coba baca bawahnya itu. Preview-nya 17 token per second.
Lumayan cepat loh. Maksudnya untuk web ya.
Untuk web sih oke lah. - 11,3 token per second.
Token itu kayak satu kata kan. - Sekian kata.
- Sekian kata lah ya. Sekian kata. Sekian kata.
- Bukan sih. Token itu konteks sih. Tergantung konteks.
Satu kata yang bermakna itu lebih tepatnya token.
Bisa jadi itu 2 kata, bisa jadi 3 kata, tapi satu konteks yang bermakna itu token.
Ada stable diffusion juga yang versi web. Keren sekali.
- Daruh lagi. - Satu-tiga lagi.
- Udah cukup. Ini harus pakai Chrome Canary ya demo.
Langsung generate ya. Ini bisa di-click. - Iya, download tuh.
- Anyway. - Lagi di-click.
- Kalau kita lihat gambar besarnya, berarti ini bakal makin banyak ya.
Besok-besok AI on-device, yang khususnya yang di-browser.
Makanya itu ada si video AIO yang tadi kan. Practical tips untuk AI on-device.
- Ada tutorialnya gak sih Mas Jay? Apa itu jadi ininya gue ya?
Tertarik juga gue untuk ngulik. - Nah buat materi IOX.
- Ada use case satu lagi yang kepikiran nih.
Kalau kita bikin Chrome extension, terus pakai web GPU LLM, jadi bisa lokal.
- Bisa. - Gak perlu konteks server.
- Berarti bisa pakai Chrome extension 3 tuh, version 3 sekaligus.
- Sekaligus. Jadi 2 topik tuh.
Gimana cara bikin Chrome extension yang versi 3 plus menggunakan LLM.
- Yang bawa model. - Oh berarti 3 topik, bukan GPU.
- 3 topik langsung. - Nah kan itu juga udah di-improve kan,
Wasm sama web GPU. Ada tuh, coba buka artikelnya tuh.
- Oke. Kalian pada mau ini topik apa?
- Belum dapet ide, kontek ganti, terus ini tiap ngobrol ganti topik.
- Justru kita mau ngobrolin malam ini supaya dapet ide.
- Dapet ide topik. - Buat AIO Extended.
- Ini ya. Accelerate web with, accelerating web AI.
- Jadi Wasm sama web GPU-nya tuh kayak semacam di revamp lah.
Diperkuat sih untuk memproses yang kayak gini.
Maksudnya berarti kan ini bakal, kedepannya makin banyak dipakai ya, makin kamen.
- Nah ini di-enhance lah. - Asik sih, karena gue pernah bikin
yang sama, yang jaman dulu yang masih pakai TensorFlow.js.
- TF Lite, kalau yang on-defense.
- Iya pakai TensorFlow.js, modelnya gue compare ke TF Lite
dan dibuat jadi Wasm, di-load-nya pakai Wasm.
Jadi kayaknya mau menghirupkan lagi ke ulikan jaman dulu.
Ambil nggak ya? - Jadi kalau misalkan...
- Jalan-jalan Mas Liza mau ambil ini? - Enggak.
- Mas Liza mau ambil ini? Belum? - Enggak.
Mungkin akan membahas tentang web GPU tapi nggak sampai sini.
Tadinya rencananya itu pengen banget bahas tentang web GPU, terus hello world lah web GPU.
Cuman kan nggak ada use case ya, kecuali gamers gitu yang bikin game, gitu kan.
Ada. Kalau ini kayaknya masih bingung dengan...
- Itu yang skeleton... - Gampang ngading GPU masalahnya.
- Skeleton dance itu aja yang kayak tangannya bisa...
- Yang TensorFlow. - Kalau mau ngambil silahkan.
Jadi in general, ini ya jadi parasitekturnya.
Kalau misalkan kita biasa pakai TensorFlow.js itu dia running-nya di CPU kan.
Kalau ada GPU available, mungkin dia akan lari ke sini.
Sederhananya gitu. - Berarti tergantung device-nya user kan ya?
- Betul. Ada Wasm-nya dia. - Oke.
- Menarik ya. - Kalau si itu udah bikin squash bisa upscale.
Bisa upscale image atau nggak sih dia? Atau dia cuma downscale?
- Bisa, bisa. - Bisa upscale?
- Downscale. - Upscale?
Apa gue bikin itu aja ya, pakai GPU bikin upscale image ya?
Satu contoh aja. Upscale pakai AI.
- Kaboom.js. Kaboom.js itu apa? Tomato?
- Kayak pernah dengar kaboom. - Buat game ya? Game engine ya?
- Coba buka. - Game Programming Library.
- Iya, Canvas. Betul, pernah dengar ini.
Ada satu game engine yang mau mengadopsi web GPU namanya apa ya? Lupa.
Kemarin itu udah sempet kita bahas sekilas kalau nggak salah.
- Genian ya itu? Ini si kaboom. - Iya.
- Bukan. - Bukan, bukan. Yang lain, yang lain.
Apa ya?
Coba tanya si Jemana.
Buat game engine?
Ada 2D-nya, ada 3D-nya. Game engine.
Game engine. Kok nggak ada Haiku? Bukan.
Kokos 2D? Kokos.
Bener nggak kokos?
- Kayak baru pernah dengar. - Benar, benar, ini kokos.
2022. Kokos kreatornya yang pakai web GPU ya?
Kata si akun Phaser tuh. Phaser kah?
Phaser? Bukan. Ini kokos, bener kokos.
Yaitu berarti game bikinannya bisa di compile untuk web.
- Kreator berarti ininya ya? - IDE-nya.
Waktu gamenya nggak tahu bisa di compile ke mana gitu ya?
Itu kayaknya tadi maksudnya dia bisa mengekspor game yang dibikin di situ, di Kreator itu untuk web deh maksudnya.
Kalau lihat dari penjelasan di paragraf paling bawah tadi.
Jadi mungkin bisa di deploy, bisa di publish untuk web game hasil buatan di kokos Kreator itu.
Oh bener, bener, bener. Coba kita lihat.
Iya bener, ini ada ni. Ada, apa namanya, ada screenshot-nya. Platform, web, desktop.
Tapi ini benar-benar itu ya, game engine yang full blown ya, semua yang lengkap gitu ya.
Kokos 2DX. Ada 2D, ada 3D-nya berarti.
For building web desktop.
Tapi pertanyaannya, kalau misalkan device user-nya nggak punya GPU?
- Iya nggak. - Nggak kuat. Pake CPU.
Terus tulis, not supported.
Bukan, jadi fallback kan tadi ada yang di diagramnya Mas Liza?
Oh itu bisa otomatis jalan di main thread JavaScript biasa ya?
- Harusnya ya. - Oh, belum pernah party soalnya.
Apa, webmlc.ai? Coba buka di laptop masing-masing. Bisa apa nggak yang tidak ada GPU-nya?
Harusnya bisa. Karena Gemini, eh Gema kan nggak terlalu besar ya.
Nggak terlalu berat lah gitu. Masih bisa dijalankan di CPU gitu maksudnya.
Oh tapi dari segi bahasa, sama persis ya berarti?
Skript-nya interaksi sama engine-nya itu aplikasi web GPU itu nggak ngaruh ya berarti sama aja.
Benar juga. Apakah berpengaruh atau nggak? Itu yang pengen di eksplor sebenarnya.
Maksudnya apa ada hal yang bisa diakses atau nggak bisa gitu?
Kalau dari web GPU misalnya bisa akses grafik yang kayak gimana gitu.
Itu harus coba sih ya.
Iya, ya itu. Kan sekarang ada bahasa-bahasa pemrograman yang running langsung untuk GPU kan?
Karena berbeda kan, arsitekturnya berbeda kan.
Jadi kemungkinan web GPU kalau mau itu ya jalannya dengan bahasa pemrograman yang berbeda.
Nggak bisa kayak aplikasi kita yang udah kita pikir misalkan pakai TypeScript atau JavaScript atau apa.
Terus kita minta dia untuk jalan di GPU kayaknya nggak bisa.
Pindahin ke GPU, ya makanya kayaknya nggak bisa deh.
Iya, beda dunia kayaknya.
Oke, ada lagi yang menarik? Topik-topik yang menarik yang mau disampaikan?
Kalau yang CSSQI dari Mbak Unar bagus nggak?
Banyak, banyak banget. Kayaknya kita bikin episode, nggak semua sih, masih banyak lagi.
Besok-besok aja bikin episode terpisah, nambah-nambahin topik kan.
Nggak, soalnya banyak tapi perintilan kecil-kecil. Kalau yang paling notable ya itu tadi nesting.
Terus view transition juga yang multi-page.
Nah itu yang khusus UI satu episode sendiri aja itu.
Spekulasi rules juga kita belum bahas nih yang di browser ya, yang buat fitur browser-nya.
Itu bisa dibahas lebih dalam. Iya banyak lah sebenarnya topik yang paling banyak justru dari UI kan.
Salah satu yang banyak. Cuman kecil-kecil ya perintilan ya.
Iya banyak.
Oke, gimana cukup malam ini?
-Sip, cukup. Udah satu setengah jam juga kan? -Iya. Kayaknya udah kepanjangan.
Mau saya ditungguin ya si stable infusion ya. -Mau mandi.
-Bisa selesai. Masih 21% bisa ditungguin.
Oke, kalau gitu. Terima kasih banyak buat semuanya yang sudah meramaikan malam hari ini.
Mudah-mudahan udah kebayang ya topik-topik menarik yang dibahas di Google I/O.
Kalau teman-teman punya topik menarik juga, untuk dibahas lebih lanjut, boleh ke GitHub-nya kita?
-Belum. -Mana dia? Belum. Sabar.
Ini, kesana.ins/ngobroinweb.
-Jadi Heng gara-gara dong ke stable infusion lah.
-Siapa tahu bisa jadi inspirasi buat saya atau Ivan atau Eka untuk membahas di Google I/O Extended
di kota-kota terdekat teman-teman ya.
-Terdekat atau terjauh? -Karena kita masih bingung mau bahasa apa.
Kalau Eka mau bahas view transition lagi, masa itu lagi-itu lagi.
-Tahun lalu dia. Ada yang baru. -Saya mau bahas Wasm juga ada tambahan.
Tapi masa Wasm lagi, pengen yang lain.
Kita lihat aja nanti gimana.
Videonya juga belum semua kita tonton karena banyak banget.
Justru obrolan malam hari ini yang bikin siapa tahu ide-nya muncul dari sini
dan siapa tahu ide-nya muncul dari teman-teman juga.
Untuk malam ini segitu dulu aja.
Kita ketemu lagi minggu depan dengan topik-topik yang berbeda.
Selamat malam. Selamat istirahat. Bye bye.
Bye bye.
Deskripsi asli dari YouTube
Penasaran dengan perkembangan terbaru di dunia web yang diperkenalkan oleh Google pada konferensi tahunan mereka, Google I/O 2024? Jika iya, video ini adalah jawaban yang kamu cari! Sesi kali ini Eka, Ivan dan Riza akan mengupas akan menilik beberapa pengumuman dan inovasi yang berhubungan dengan web, langsung dari Google I/O. Dari peningkatan performa dan keamanan browser Chrome, hingga teknologi baru yang akan mengubah cara kita berinteraksi dengan web. Jangan lewatkan kesempatan untuk Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
6 Sep 2023
Ngobrolin AI
Episode ini mengambil sudut berbeda dari kebanyakan pembicaraan soal AI: bukan apakah ia akan menggantikan kita, melaink...
21 Jan 2026
Agentic AI
Episode ini membahas tentang Agentic AI, menjelaskan perbedaan mendasar antara AI/LLM biasa dengan Agent AI. Diskusi ini...
23 Jul 2025
Bedah Buku Problem Solving 101
Episode ini membahas buku "Problem Solving 101" karya Ken Watanabe, mantan konsultan McKinsey yang menulis buku ini seba...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .