Inovasi Web dari Google I/O 2024 - Ngobrolin WEB
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.
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.
0:00selamat malam halo halo halo halo malam semuanya malam semuanya bertemu lagi dengan kita berdua
0:21Masih berdua dulu
0:22Nanti tambah satu
0:24Lagi di perjalanan
0:25Mudah-mudahan segera sampai
0:27Tapi gak usah buru-buru juga
0:29Santai-santai aja
0:30Jadi kita berdua
0:34Nanti mudah-mudahan bertiga
0:35Akan malam ini
0:38Ngobrolin
0:39Tentang berbagai hal
0:42Yang berhubungan
0:44Dengan web
0:45Di Google I.O
0:46Seperti biasa di selasa malam
0:49Waktunya
0:50ngobrolin web
0:53absen, oh ada tomato
0:56halo tomato
0:57ada siapa lagi
1:00jadi seminggu yang lalu ya
1:03beberapa hari yang lalu
1:04itu
1:05google ayo diselenggarakan
1:08disana di Amerika
1:10ada teman kita yang ikutan ya
1:12teman dari GDI
1:15yang kebetulan disana
1:16Andrew, ada Imre
Lihat transkrip lengkap
1:18game bersama Andrew langsung live report laporan pandangan mata kalau kita watch party doang di
1:28discordnya Google deskripsi Indonesia ada kita ada ada gue Devan ada temen-temen yang lain juga
1:35mas Budi live stream juga sama Padika Padika ya ada di channelnya padika duit stream dari channelnya
1:43juga seru sampai malam Hai teman-teman disini pada ngikutin kasih Google Ayo ada yang nonton
1:52atau ada ikutan watch party mungkin bisa share juga apa ya topik-topik yang menarik Nah malam
1:59hari ini kita akan bahas tentang beberapa topik yang menarik menurut kita mendingan dari event
2:08Google IOO 2024 khususnya yang berkaitan dengan teknologi web karena kan banyak banget kemarin
2:17IO kalau kita ngobrolin AI lagi semua dan kayaknya nggak mungkin kita nggak bahas AI karena ada
2:27beberapa juga yang berhubungan dengan web dan AI secara keseluruhan banyak sekali ya sampai ada
2:32sampai ada bikin klipnya diedit semua ngomong eh doang enggak tapi sebenarnya di luar AI
2:41mau saya okelah karena emang kebutuhan industri ya siapa kompetitor si open.ai juga kemarin
2:48barusan apa ada spring release jadi memang kebutuhan fokus kebutuhannya fokusnya ke arah
2:55cuma ternyata kalau dilihat-lihat
2:57sebenarnya ya tadi nih karena
2:59ngecek konten
3:01buat ini, ternyata
3:03konten webnya ya cukup
3:05banyak, cukup signifikan juga
3:07jadi mungkin kalau teman-teman
3:09ada yang cuma nonton
3:11keynote-nya misalnya terus belum sempat
3:13misalnya belum sempat ngecek
3:15apa sih yang baru di web, apa yang di-announce
3:17mungkin FOMO
3:19nah ini nanti kita kasih
3:21isi-isinya di sini
3:22Iya, sekaligus kita mau cari inspirasi buat Ayo Extended ya sebenarnya ya. Topik apa yang kira-kira teman-teman tertarik untuk belajar yang lebih dalam gitu ya.
3:35ada banyak sebenarnya web di ranah UI CSS HTML JavaScript ada update kemudian
3:46apa lagi performance ya performance yang kemarin kita bahas juga ya testing ada
3:55beberapa project juga yang lumayan menarik ada web GPU juga ada AI yang ditaruh di
4:04browser nah itu juga menarik jadi Mari kita bahas satu persatu ya Halo ilham Halo halo halo kita
4:14mulai dari apa keynote-nya web kali ya Nah ini tadi lupa tadi lupa naro linknya enggak usah diputer
4:27juga sih cuma Oh nyanyi kalau teman-teman mau nonton nanti ya setelah ini ya jangan
4:37sekarang bingung dan jadi strukturnya strukturnya IO itu kan eh apa sih keynote keynote yang utama tuh yang di panggung besar yang Pak Sundar dan developer lain
4:52Terus ada developer keynote yang combine.
4:55Nah terus masing-masing bidang kayak misalnya Android, web ada itunya sendiri juga.
5:01Nah coba sambil dibuka aja tuh link-nya, YouTube-nya.
5:05Sebentar, sebelum dibuka kita kedatangan satu orang lagi.
5:08akhirnya sampai udah sampai rumah udah selesai makan belum sempat mandi loh dari Bandung acara
5:26itu BW build with eh enggak acara nyantai-nyantai aja ketemu acara ketemu Mas Danang Oh kalau bahas
5:37senang ntar muncul ini hati-hati nggak papa juga ini ya Oh simbolnya siapa sih namanya Rachel
5:46Andrews dan ini salah satu idola juga ikonik banget dulu beliau lama di smashing magazine
5:52cuma Oh ini hasil web.dev kan ya Iya dan semua punya konten-konten terkait web ya termasuk di
6:03kalau per Chrome juga nah ini tuh kalau what's new misal what's new in the web what's new in Android
6:09what's new in bla bla bla itu kayak ringkasannya sih ini lumayan lama sih talknya 45 menit jadi
6:15kalau misalnya males nonton semua ya bahas di sini aja jadi ini yang gue lihat menarik juga sih
6:23karena fokusnya banyak di inisiatif-inisiatif men-streamline teknologi web Nah itu tadi kan
6:31screennya udah muncul tuh baseline jadi masih mirip masih sama kayak tahun lalu update update
6:39intinya ke banyak tentang baseline dan interop jadi kalau buat yang belum tahu berarti belum
6:47sering apa belum sering nonton channel nonton show kita ngobrolin web nah besok ini berapa
6:53inisiatif antar jadi komunitas semua di ekosistem web jadi kayak berbagai vendor browser bukan Chrome
7:02doang Chrome Mozilla Safari terus komunitas ya itu pokoknya terus kelompok kerja kelompok kerja
7:11di apa W3C ya itu terlibat juga bikin standarisasi lah intinya nah baseline itu intinya sih suatu
7:22fitur web bisa dibilang udah masuk Westline kalau sudah disupport oleh dua versi stabil terbaru dari
7:30semua major browser itu intinya nah yang menarik di tahun ini ilang keynote yang tahun ini mereka
7:39apa ya kayak mengimprove lah dari yang tahun lalu kan konsep secara konsep Oke tuh ada konsep
7:45baseline jadi masa kalau kita lihat ada logo centang ini ibaratnya suatu fitur sudah aman
7:51untuk digunakan tapi kan kenyataan enggak seindah kenyataan enggak seindah keynote speech ya kan
7:58maksudnya dua versi browser stabil terbaru Apakah semua user mengaktifkan auto update misalnya atau
8:07salah satu concern nya kan kalau di dunia nyata kan belum tentu semua orang auto update semua
8:13orang rajin mengupdate versi browser jangan-jangan misalnya dua versi terbaru itu ternyata scope-nya
8:19masih eh lima bulan terakhir nah klien gak mau terima karena mungkin target audiensnya nggak
8:26seperti itu nah sekarang di perbeda ada label coba Scroll ke atas deh nah zoom in sekarang ada
8:35dua label milie available dan white available sama-sama baseline jadi mau saya enggak enggak
8:43berubah dari konsep yang original yang simple yang tahun lalu cuma ini masih dibedakan dan
8:50kalau misal temen melihat keynote nya itu ada muslih di logo centang itu bawahnya ada teksnya
8:56juga newly available dibedakan antara newly available atau white li available dan newly
9:03available itu ya itu biru ya kalau nggak salah punya ada teksnya sih Iya ke biru atau iya tuh
9:10Oh iya, kayaknya, newly biru kalau nggak salah, hijau widely, ya gitu.
9:15Pokoknya newly available ya baru, barusan.
9:18Baru aja di misalnya browser terakhir yang, vendor terakhir yang rilis Firefox gitu.
9:25Firefox, stabelnya support, yang lain semua udah support ya.
9:29Ini dua versi terakhir nah kalau baru banget namanya newly available Kalau widely available itu 30 bulan setelah iya 30 bulan atau berapa bulan gitu
9:41Setelah newly available.
9:44Oh iya, nah itu.
9:45Nah 30 bulan itu kan udah lama ya, jadi maksudnya itu kayaknya yang beneran widely available itu
9:51udah bener-bener bisa banget dipakai di semua, ya hampir semua lah.
9:57Hampir semua use case kita.
9:592,5 tahun ya?
10:022,5 tahun ya?
10:032,5 tahun setelah
10:05newly available, jadi kayak kita
10:08relatif nggak harus mikirin
10:10fallback
10:11progressive enhancement atau
10:14polyfill dan lain-lain
10:15nah itu helpful banget sih, sama
10:18kalau tahun lalu kan baru banget
10:20baru banget di-announce
10:21terus sekarang kan udah 2 tahun
10:23dan ini sudah dibuat, tulis daftar
10:26berdasarkan tahun, baseline 2023
10:28tahun 3 2024 maksudnya fitur apa saja yang menjadi baseline di tahun 2023 apa saja yang masuk ke
10:36baseline di tahun 2024 nah dan seterusnya pas tahun lalu ini udah dibilang sih cuma kayak masih
10:42wacana karena belum kan belum dijalanin belum banyak di refine nah ternyata sekarang udah ada
10:49apa yang menarik ini dengan Ken Ayus ya sebetulnya datanya sumbernya sebagian sama sih lah itu Ken
10:59Ayus juga di link cuma lebih ke apa-apa ya lebih keras ini ya kali ya Project mungkin waktu setup
11:10project atau space baru kita mendesain Oke kita pakai baseline 2003 jadi enggak enggak enggak
11:18rancu lagi persatuan enggak maksudnya enggak ketengan lagi harus nanya ini bisa atau enggak
11:25kalau memang sudah ada kita sebagai tim sudah di set Oke kita pakainya baseline 2023 berarti
11:33kalau dia masih eksperimental atau masih belum white level boleh jangan dipakai gitu ya iya
11:41memudahkan itu sih komunikasi dan dokumentasi walaupun ya bisa aja kita buka canaius periksa
11:48satu persatu versi browser terus kita cek browser versi X itu rilisnya kapan udah cukup lama belum
11:54bedanya berapa bulan dari sekarang Iya bisa tapi kan enggak enggak practical untuk keperluan
11:59komunikasi termasuk bisa apa bikin project spesifikasi project dan dokumentasi bisa aja
12:06jadinya contohnya sub-css upgrade dia kan baru-baru baseline di 2024 sedangkan project di setupnya
12:14setupnya di baseline 2023 contohnya ya berarti kita sebagai tim ya udah tahu kalau udah kalau
12:24misalnya itu ada di 2024 ya berarti belum bisa gitu ya kita dengan cepat bisa bilang Oh ini belum
12:32atau Wah ini udah aman Iya kalau mungkin betul apa jadi menetapkan standar baru ya kalau misalkan kan
12:40teman-teman misalkan mau ngecek Oh di Firefox kompatibilitinya gimana kan Biasa kita lihat
12:47di mdn-mdn itu kan ada ya seperti kena is juga kan ya tapi perfiturnya sama datangnya sama-sama
12:53Terus abis itu di KNIUS ada juga seperti ini, tapi dengan mungkin dengan standar-standar yang berbeda gitu.
13:03Ya mungkin tampilannya atau apa gitu dengan adanya baseline ya jadi satu gitu jadi standar.
13:09Jadi sama tim juga ngomongnya oh kita pakai baseline aja baseline 2024 atau 2023 gitu.
13:15Jadi udah lebih.
13:16batik ini sama kayak sama kayak memilih Oke project kita pakai is next next yes next yes
13:26seven atau yes six seven eight gitu ya kalau dulu kan masih is 2015 atau yes next gitu kan
13:34ya sekarang sudah yes yes seven Iya buat standar aja dan baru lihat juga sih besok masukkan air
13:42tim saya emang membuktikan bahwa ini kerjasama semua ekosistem yang nge-tracking fitur web ya
13:52itu melot can I use eh nge-load baseline ini loh asinkron asinkronus loh iya kelihatan kan dia tiba-tiba
14:03awalnya nggak ada terus kliker muncul gitu ya dan terjadi CLS di kolom selama
14:09reflex ya apa matanya mata CLS banget ya Iya Wah ini pakai web komponen Oh disediain dikasih itu resmi Jadi misalnya kita punya website yang isinya artikel atau tutorial pemrograman tutorial web
14:33Terus kita ingin memberi informasi tentang suatu fitur.
14:38Lah, kok nggak bisa?
14:40Belum dibikin kali itu, harusnya ada button-nya.
14:43Belum selesai.
14:43Ada kok di GitHub-nya, cari somewhere.
14:46coba inspek elemen di sana ini beda ini beda loh Coba klik tapi ini sendiri artikel bukan
15:00dia summary ya Oh ini dia summary taruhnya di summary itu bikin sendiri dia Iya bikin
15:07sendiri ini enggak pakai widgetnya Oh di GitHub nya ada ya ada somewhere somewhere okelah lanjut
15:17lanjut tahun lalu udah lihat soalnya nah terus apalagi ya yang menarik Oh dashboard baru dashboard
15:24ngomongin inisiatif ah iya kiri itu kan selama ini kita pakai WPT web platform test itu terkait
15:33project interop jadi bikin web itu juga masih update tentang project interop yang masih jalan
15:39terus jadi intinya para vendor browser browser engine semacam voting menentukan fitur-fitur
15:47apa yang mau di fokuskan banget biar bekerjanya perfect sama konsistensi antar browser juga perfect
15:57untuk setiap tahun ya dipilih sekian fitur nage cara ngetesnya tuh paket eh cara ngetes cara tahu
16:04suatu fitur udah berjalan dengan baik bagus atau enggak kan pakai tes web platform tes WPT dulu
16:12pakainya wpt.com fyi ya fyi sampai sekarang minggu lalu juga sekarang masih buka itu kan
16:18sampai sekarang masih masih cuma ini dibikin dashboard yang lebih kecih dan mudah dipakai
16:26untuk apa dari perspektif developer kalau ini jadi kalau si dashboardnya WPT web platform test
16:34itu kan sebenarnya lebih ke fungsi utamanya lebih ke tukang bikin browser mereka yang bikin
16:40buat nge-track po nya fitur-fiturnya, test suite nya, masing-masing test nya juga.
16:47Nah kalau ini memudahkan kita buat cari-cari apa ngecek misalnya apa aja yang disupport di baseline 2023.
16:55Bisa di filter-filter juga tuh filternya lebih. Oke.
17:00Light dark ini buat itu ya.
17:02Nah kan lebih catchy ya. Kalau dulu kan kita harus buka satu persatu terus tabelnya ya gitu lah developer banget.
17:08Nah kalau ini secara UI lebih.
17:10Iya kalau ini udah secara yuk lebih keci bisa filter tol di atas itu ya Oh ya filter by
17:20available on Safari nah harus ditulis ya Pak gitu ya kayak GitHub gitu ya kayaknya nah tapi
17:32ini ya search oh search eh iya search
17:38level on Safari Afif belum termasuk baru ya
17:46tapi sudah whiteleaf ya sudah oh newly available ini ya Iya udah masuk baseline ini yang di-announce
17:5530 bulanan Iya kalau yang masih pagi masih lagi ya butuhnya ada yang lulus tes tuh 0,3 persen
18:11kalau besoknya yang nah itu pasti edge case yang aneh-aneh Oh ini filter aja ya apa namanya statusnya
18:20white liya enter deh kayaknya tanya harus mencet ini enggak bisa dienter Oh gitu Oh nah berarti
18:30masih bagi juga itu dashboardnya tahu kita kirim feedback aja rai ini udah bahkan udah nggak ada
18:36persenannya lagi ya udah nggak bikin nggak dibikin tesut kayaknya nggak ada yang komplain udah bisa
18:43semua teksi Indian 82% tapi udah white available ya ini belum belum ada yang white jadi white
18:49available itu maksudnya udah di support di semua major browser setelah selama yaitu ini tes kedua
18:56versi terbaru plus 30 bulan cuma tesutnya ternyata masih ada yang nggak lolos kan bisa mau saya jadi
19:02lulus testing itu bukan selalu karena nggak berfungsi ya cuma ini kadang antar browser
19:10misalnya speknya kurang jelas, interpretasi masing-masing browser tuh behaviornya beda.
19:15Nah, kan mungkin selama ini sebelum dibikin testingnya ya mereka sama-sama semua ngerasa,
19:20oh ya emang expected kok kayak gitu. Nah, setelah dibikin tested baru kerasa, baru ketahuan.
19:28Nggak 100%.
19:29Background clip.
19:31nah ini berguna kalau kita pengen kita nemu suatu fitur lihat tutorial atau apa kan kadang
19:44itu kalau kita lihat pasti kita cenderungnya Wah seru nih ah tapi pasti Chrome doang pasti
19:51browser lain belum ada yang support nah daripada susun kayak gitu langsung cek di situ aja cekin
19:57dong cekin speculation API itu Chrome only pasti speculation-speculation
20:09enggak masuk di-announce juga kan ya speculation API iya Nah cuma kalau yang kayak gitu bisa
20:19dibikin tes kayak gini enggak ya coba ya mdn ya ngetesnya gimana coba ini kan yang buat rendering
20:28kan maksudnya yang UI related nah itu udah deh speculation rules experimental tuh ada warningnya
20:38di atas nih Chrome Chrome only emangnya Chrome only Chrome only masih chromium only no belum
20:52masuk web platform masa belum-belum streamline di browser lain Safari juga belum dia baru hanya
21:03Chrome ya tapi ini per API loh ini dokumen pre-rendering pre-rendering chase event ada
21:11banyak masih merah semua masih merah semua Cuy ya chromium chromium only nggak papa tetep ya
21:19sul cuma apa ekspektasinya berarti harus di manage ya Oh ini yang 2023 ya yang ini yang baru ya
21:29Oh, newly available tuh.
21:33Tuh ada range tanggalnya yang jadi besain di tanggal-tanggal tersebut.
21:39Sinkostan, buset, udah newly available ternyata.
21:43Apa? Trigonometri.
21:45Trigonometri buat charting library mungkin ya. Bagus.
21:52Oke, berikutnya.
21:54berikutnya kita bahas tentang
21:56room dashboard ya
22:00ya ini di announce juga
22:02di apa
22:03room dashboard itu apa
22:06baru denger
22:07ya itu support dari
22:10RUM itu loh
22:12user metric
22:13RK
22:15real user metric
22:18ya ini kan juga sebenarnya udah ada
22:20dari dulu cuma dibikinin
22:22apa dibikinin dashboard yang enak dilihat gitu ya bukan Oh iya raminsight.com jadi intinya misal
22:35kita pengen tahu berdasarkan data RAM berapa yang berapa orang yang masih pakai i6 gitu atau atau
22:42apalah ini kan dari dulu ada ya kalau nggak salah bukannya di ada sebagai bagian dari web almanac
22:51nah ya inget deh kita pernah bahas ini pas eh tentang rumusnya apa user Matrix
23:01enggak inget rumer kek nggak mau saya bahas kilas tanggung sumber datanya
23:08Oke.
23:11RAM archive.
23:13RAM archive.
23:15Oke. Browser version.
23:17Ini apa? Time series Chrome version.
23:21Mobile desktop.
23:24Samsung internet.
23:25Cuma yang seru itu.
23:26Itu banget sih.
23:28Iya. Siapa ya?
23:29Siapa dan dalam kasus apa orang buka
23:32Samsung internet dari desktop?
23:33Itu semua yang...
23:35TV ya maksudnya?
23:37kayak bisa jadi udah stop sih soalnya yang dianggap sebagai browser desktop
23:44atau itu Samsung Samsung Chromebook itu Oh ada ya ada kan Samsung Samsung ada ada ada Kan bisa di install juga Semua Chromebook bisa di install Samsung Internet kan Tapi masuknya
24:04mobile atau desktop?
24:06Nah itu gak tau.
24:14Nah kaitannya ini yang
24:16seru sih. Coba scroll gak tau deh.
24:18Ke bawah atau ke atas yang tadi
24:19sama baseline.
24:20gimana bacanya ini?
24:22ini MPA, berarti user kan, user yang mengakses, loh jadi kecil
24:30loh, iya
24:32ini gede tapi ini kecil, ya balik lagi
24:37ini berarti kalau nggak salah baca berarti user yang mengakses aplikasi web yang MPA 56%
24:46yang mengakses SPA 21% yang hard yang song 2% beda aja sih hardsoft kayak telur 33,9 ya hard
25:01navigation itu eh apa client-side tapi pertama kali pertama kali dateng atau di refresh user
25:09manually refresh habis itu kalau udah kalau biasanya kalau SP itu kan pakai client-side router ya
25:16react router atau apalah terserah next router habis itu kalau navigasi antar halaman itu kan
25:23kayak udah dibajakkan di hijack sama client-side routing nya itu disebutnya soft navigation Oh ya
25:30intinya antara SP sama MP itu beda-beda tipis ya 56% dan 40% dan tetap lebih banyak MP itu
25:38walaupun beda tipis lebih banyak MP dari sisi dari sisi usernya bukan dari sisi developer ya
25:47macem-macem sih kayak di atas kan ada itunya ada perbandingannya sama baseline tuh coba ke atas
25:53atas atau bawah ya nggak tahu carilah baseline landing page jadi user yang mengakses landing
26:02page ada 22% gitu cuma klik apa tuh artinya landing page landing page is the first page
26:11to paragraph 2 ada keterangannya the first page a user visit loh kok kesini akamai
26:19for this during new session on 같은 website- vino website
26:25clear
26:28khusus입니다 sejenis tipis pilih...
26:39kaget batik ini maksudnya visit perlahan jumlah visit yang hanya ke landing page gitu
26:51landing page nah halaman pertama kan yang diakses sama user ya terus itu artinya bener
27:01nggak ngerti kalau ini cuma orang-orang analitik singpah
27:09backward backward ini nih cash cash cash bukan Oh bukan ya Iya bener-bener dia
27:22navigationnya pakai pakai tombol back kalau di mobile di mobile pakai dan pakai swat kan
27:31kalau yang di announce kemarin kaitannya ini apa sih eh bawah lagi bawah dikit
27:44bawah dikit iya ada seksion buat dapetin data tentang baseline support coba deh klik misalnya
27:55coba Scroll ke bawah klik yang 2024 ya 2023 misalnya if you target the following web
28:04features for design 2000-2024 75% dari desktop users yang ada di RAM RKF akan bisa mendapat
28:15keuntungan dari fitur-fitur ini jadi kayak kita ngebandingin nih kan sebelumnya abstrak ya
28:21maksudnya dua versi browser terakhir misalnya itu kan kayak gimana nyatanya realnya di user kita
28:28berapa persen yang bisa dapat manfaatnya Nah kalau ini jadi kayak di cross apa sih
28:34di tituin sama data dirilis sama data usernya
28:38desktop desktop ya kalau misalnya mau bawa misalnya gue pengen pakai hash
28:52Berarti boleh nggak pakai hash berdasarkan data. Ya coba 2023.
28:58Oke, berarti bisa dibilang kalau saya pakai hash, meskipun dia newly available,
29:04sudah bisa diakses oleh 80% pengguna user yang di RAMR5 itu.
29:13Berarti bisa beri enough justification gitu ya, bisa berikan oke 80%.
29:19Iya, jadi kayak buat decision making kita, maksudnya worth it atau enggak sih?
29:23Sebenarnya kan kalau misalnya adopsi suatu fitur baru kan pemikirannya adalah worth it atau enggak.
29:29Nah, jadi itu bisa didukung dengan data.
29:34dia justru sama ttp-archive itu mirip-mirip cuman sumber datanya berbeda sumber datanya
29:42dari CDN kalau nggak salah Kama ini kan salah satu profil CDN ya wah kita di tracking
29:50selama ini juga di tracking nah ini kalau kalau
29:57WTP Arkas itu ngambilnya dari Chrome only kan seru-seru X Chrome only bahkan chromium pun belum
30:06tentukan kan Chrome only Yes ya Chrome seksual Nah kalau akamai ini mungkin lebih umum karena
30:14CDM bisa aja ngambil apa ngambil ya ya jadi ngerti sekarang maksudnya kenapa dia pakai data
30:23presidien karena kalau kreks ya kondekom only datanya enggak sah dong Iya bisa di
30:29dia bisa ngasih presentase browser kan makanya iya
30:39dan bisa di query juga sama kayak carewax ada nggak datanya dikasihnya sih ada nih
30:50bigwere ada-ada nice coba nanti gue mainin tuh dikasih kok berarti bisa jadi Jakarta
30:58bisa jadi Jakarta bisa jadi Jens konflik di Jakarta nih Mas kita bahas beginian lagi
31:04datanya Amin doakan saja kalau ada yang mendengar kita mencari organizer dan cari
31:15sponsor ganti nama dong jabodetabek CS biar bisa lebih fleksibel panjang banget
31:23enggak kita kan pakai namanya kalau konferensi akan namanya jst
31:28jst ya jadi buka kita keman pakai jst ya jst ya jst ya ya ya oke oke oke wah menarik ya Jadi kalau
31:38Chrome you are you xx care wax itu hanya Chrome aja kalau ini bisa semua walaupun mungkin tidak
31:48menjangkau tergantung kita sebagai pengguna Apakah kita mengakses akamai CDN atau enggak gitu ya Iya
31:56masih masih lumayan ada celah juga ya walaupun ini lebih general karena semua lebih general ya lebih
32:04general nah cuma mungkin mereka kerja sama-sama siapa gitu yang lain CDN lainnya Akamai kan Akamai
32:13kan mungkin dia salah satu provider CDN terlama dan terbesar juga ya salah satu ya dia produknya
32:25banyak sih video provider juga dan dipakai banyak enterprise kan bisa jadi kayak CDN CDN lain tuh
32:35di belakangnya pakai infrastructure nah itu gue mikir-mikir kayak gitu kayak misalnya apalah
32:41Lambda function kan banyak yang pakai ya AWS Lambda atau mungkin TCP ya ya saingannya ya kayak cloudflare
32:50Cloudflare
32:53Oh iya benar Cloudflare juga sebenarnya
32:57Kalau mereka mau
32:59Buka data
33:00Nah kalau Amazon
33:03Atau AWS Cloudflare
33:05Itu kan punya data yang sendiri
33:07Makanya dulu namanya
33:08Yang Amazon top 10 million itu apa namanya
33:10Alexa
33:12Alexa
33:14Itu Alexa itu kan data
33:16Datanya dari CDN mereka juga
33:19bukan Amazon Alexa ya
33:23pakai Akamai apa nih produk apa nih
33:25CDN ya CDN atau apa boleh info kita soalnya agak abu juga nih cuman taunya sih dia doang sama saya pakai akan banyak video banyak akan main storage ya es trinya akan My
33:40Kamai CDN yang jelas ya stream-stream nya juga ada
33:47kategori desktop dan mobile tapi pemakaiannya lebih banyak di mobile
33:50oh di desktop juga ada ya baru tahu
33:52Nah itu yang tadi kita bahas desktopnya itu kalau mobile kan jelas
33:56maksudnya kalau yang browser bawaan Samsung
33:59desktop
34:01iseng banget
34:03bisa download gitu
34:04enggak mungkin mereka punya produk laptop
34:09netbook enggak tahu
34:12Google Play
34:13oh apa ini kan sekarang Windows sudah bisa install Google Play kan
34:21iya
34:22bisa jadi oh teklannya Akamai Peace for all bagus teklanya CDN ya
34:31dia dia semua semua produk ada ya semua produk adalah kompetitor
34:38dan akamai to the non sudah ada semenjak sebelum Amazon atau sebelum masuk sudah ada
34:52saya saya waktu ngadain acara di salah satu apa namanya data center ngobrol-ngobrol sama orang
35:05senterai kita akan disini loh ya udah dulu cuma boleh sebut nama tempatnya jadi ya nanti jadi
35:15kalian tahu gimana salah satu yang cukup terkenal juga itu apa namanya video platform Jadi kalau
35:25misalkan temen-temen mau bikin YouTube dan bikin YouTube atau bikin kompetitor YouTube
35:31Hampir semua TV ada online platformnya.
35:36Video.com atau RCTI Plus. Itu mereka punya servicenya di sana.
35:43Untuk streaming, DRM supaya nggak dibajak. Itu mereka punya banyak.
35:56Oke oke apalagi nih yang menarik nah di CSS sendiri ada beberapa fitur yang masuk
36:07baseline ya kalau nggak salah ya yang banyak adalah banyak yang di yang di-announce di
36:15keynote nih kemarin ada size container queries nah mana ya nggak nemu apa belum sempet cari
36:24intinya sih intinya yang di-announce pertama karena major yaitu size container queries itu tuh udah
36:31masuk semua browser kita kan kayaknya kalau size container queries ini bersejarah nih karena kita
36:38pertama kali banget ngobrolin ngobrolin web belum bikin show nya ya pertama kita ngobrol tentang
36:44fitur web dan ternyata langsung semangat langsung nyambung bertiga itu tentang container queries itu
36:50tahun yang lalu kan ya Nah itu kan baru masuk Chrome tapi udah stable di Chrome jadi maksudnya
36:57kita kita pas itu semangat karena udah stable di Chrome berarti ya enggak waktu no no no no no
37:03waktu itu kita sudah bahas karena dia sudah disupport sama tiga browser yang ini size
37:10kontainer query kan saya berdasarkan size ini beda lagi ada update subsetnya
37:20kayaknya subsetnya kayaknya enggak ini udah baseline udah baseline berarti dua versi stabil
37:29terbaru container query dan size container query itu hal yang sama atau fitur salah satu fitur
37:35container berdasarkan size yang di-nounce poinnya masuk baseline itu size container
37:43queries Coba aja cari di blognya kita cari intinya itu hasil dari apa udah masuk interop juga jadi
37:55sebelumnya di state of CSS survey banyak developer yang ngevote fitur itu
38:032023 masuk interop jadi emang digodok banget sama semua browser biar
38:09stabil di seluruh browser itu nah sekarang udah masuk baseline
38:15nah disini ada tuh using container query ada size inline
38:20dan normal ya semua itu sih kayaknya ya harusnya tapi ini belum ada widget baseline nya ya Iya
38:29ya kenapa belum kalau-kalau di ini ada kalau di kalau dikenai usada oke ada ada ada konten
38:45kontainer query
38:47ini query unit
38:52ini kontainer size
38:53nah tuh udah ada
38:55centangnya
38:57ya update ya karena pake widget
39:00masih bahas widget
39:02oh gak ada ya
39:04jadi memang ada
39:06bagian-bagiannya kontainer query doang
39:08ini ada units
39:10ada unitnya
39:11unit tuh mungkin
39:14pakai itu ya kayak yang kayak itu tadi qvh qvqvw nah tuh unit unit tapi ini belum ada baseline
39:25juga ya belum masuk kali ya belum belum belum masuk berarti tapi ini udah ijo loh ya udah ijo
39:32kan tapi belum masuk baseline ya belum harus dua versi stabil terakhir dari semua browser major
39:38nah ini limited ya konten ini beda ya konten-konten beda ini unik lagi ini style-nya berdasarkan
39:49style atau CSS class yang dimiliki elemen lain pokoknya gitu deh ribet dan emang belum
39:56ini ya konten query ya Iya semua itu yang di-announce yang major kecuali teman-teman
40:05punya user yang menggunakan QQ browser Baidu Baidu itu mah ditinggal aja atau bisa belum tentu karena
40:16bisa jadikan itu akan mereka belum tentu masuk China ya jadi ya belum tentu jadi kita nggak
40:23tahu juga Pramini Pramini Pramini sudah kayaknya udah tinggal aja karena sudah sudah lewat masa
40:33simbian I juga udah ditinggalkan kan soalnya udah stop kan developmentnya udah stop kan sekarang
40:40ke-8 sekarang ya dan kalau kalaupun misalnya ada corporate yang zaman batu gitu yang birokrasinya
40:49nggak boleh update sama sekali masih pakai itu kan mereka udah terbiasa untuk nggak mungkin mengakses
40:55situs modern yang app gitu kan paling buat akses dokumen doang kan Oh kalaupun ada masih masih
41:02Masih ada pemakaiannya seperti ini loh, kalau kayak IAT ya kasusnya itu yang saya tahu pernah cerita.
41:11Kayak di kampus yang lab gitu loh, lab atau riset gitu.
41:17Kan mereka punya mesin labnya yang gede.
41:21Dan itu mungkin sebut saja ya Microsoft, eh Microsoft, mikroskop elektron misalnya.
41:33Yang itu dibuatnya tahun lama banget dan mikroskop itu masih berguna, masih dipakai gitu.
41:45Dan hanya bisa diakses untuk ngambil data atau interface-nya itu mereka bikinnya pakai EA dengan applet-nya.
41:56Jadi ya masih dipakai sometimes.
41:59Itu hanya untuk komputer di lab.
42:04Buat buka Crystal Report.
42:07Bisa jadi, bisa jadi Crystal Report.
42:10Masih ada nggak sih Crystal Report?
42:12Kristen report itu yang library buat ini kan buat printing kan VB buat bikin buat bikin reporting
42:20reporting kayak kayak PDF kayak PDF Oh itu sebelum ada PDF ya enggak sudah ada PDF tapi another
42:31standar belum seopen sekarang punya Microsoft dan PDF dulu bikin PDF itu susah karena kayaknya
42:39spesifikasinya belum ada belum banyak yang explore kesana belum jadi seperti skandar sekarang
42:45bisa jadi tuh kata mas Raffky buat mapping ECU mobil tua yes itu betul
42:50ya kayak itu kan komputer mobil kan ada komputernya kalau mobil Eropa itu ada
43:00ada microcontroller nya dan untuk connect ke situ bukannya pakai browser Oh gitu Iya jadi masih ada gitu ya masih ada tapi enggak membuka website baru kita website kontainer query pakai table aja
43:22kalau yang zaman gitu mah dan kalau yang kasus-kasus use case kayak gitu kan udah
43:28ada spesifik mau saya pasti itu cuma dipakai buat buka website ABC kayak udah nggak nggak buat
43:34yuskes lain lagi kan betul dan kalau mau di update ya nggak bisa juga kan di update yang
43:42susah itu adalah kalau download IA nya sudah di udah dihilangin gimana coba hahaha tapi ada
43:50misalkan sekarang disuruh download Edge kan pasti
43:54tetap ada mirror-mirrornya ada kok kayak
43:57tapi kan sekarang udah lebih streamline lah
44:01kalau dulu bayangin ada sebuah
44:03apa job search ya yang mengharuskan kita menggunakan browser tertentu
44:09jadi begitu kita buka tiba-tiba browser Anda tidak kompatibel
44:13silahkan download browser ini gitu kan
44:15kalau sekarang ada yang ngatur-ngatur gitu dimarahin kali ya
44:18ya ya kalau gitu karena kan karena website di dunia nyata juga emang gitu kan apa decide is
44:28best in internet Explorer atau nescape navigator ya websitenya pun ngatur-ngatur website di
44:36production pun ngatur-ngatur kayak gitu jadi ya emang standar behavior nya kayak gitu tuh masih
44:44masih ada mirrornya tuh Pak Hippo download internet explorer 6 ini sekarang ini jadi
44:56wilayahnya historian apa sejarawan ini kalau anak kuliah jurusan sejarah disuruhnya itu
45:04apa sejarah internetnya nah ini CSS nesting yang kayaknya major yang major diumumin sudah masuk
45:14baseline baru saja masuk baseline ini dalam arti didukung oleh semua major browser dua
45:21rilis stabil terakhir CSS nesting nah ini masuk interop 2024 juga jadi apa diperbaiki
45:29ini streamlite kan dibuat konsisten sudah-sudah ini udah white lebar masih
45:36new level ya newly available by the time ini sudah white level ini bisa mengurangi
45:43ukuran tetap bisa kita tetap bisa menulisnya di SAS tapi saat dikompilasi prosesor enggak perlu
45:56dibikin banyak jadi bisa diwikub nestingnya tetep saya yakin itu sus-sus compiler nanti dia akan
46:06keep nestingnya jadi ukuran-ukuran CSS nya bisa jauh berkurang Iya betul juga nah ternyata sekarang
46:19disarankan install Chrome untuk beberapa ujian online kayaknya ada beberapa website juga yang
46:26menyarankan pakai Chrome dulu kalau salah salah satunya ini streamer yang kita pakai ini dulu
46:32kalau salah menyarankan chromium base kalau enggak salah ini juga sama ya jadi Chrome is the new ia
46:45IA
46:45Tapi sepuluh gak sih kalau yang saya
46:48Diatur-atur begitu
46:50Bukan maksudnya
46:52Dominasi kan didominasi oleh
46:54IA
46:56Kebetulan waktu itu kalau gak salah ya
46:57Tolong dikoreksi ya jadi
46:59Si job portal yang
47:01Saya ceritakan tadi itu menggunakan
47:04Teknologi yang
47:06Sama dengan
47:08Browsernya jadi mereka
47:10Menggunakan .net
47:12Dan lain-lain yang kayaknya
47:14hanya available di IE
47:16jadi hanya bisa di IE
47:19nah mungkin kasusnya Chrome itu mereka
47:22pakai Meet
47:22pakai Meet kan kalau
47:25misalnya mungkin ada sesi yang
47:28pakai Meet atau
47:30Google Meet atau teknologi
47:32jenisnya, teknologi Google
47:34yang lebih
47:36optimal kalau di Chrome
47:38jadi maksudnya ngindarin apa ya
47:40kayak preemptively
47:41ngindarin in case tiba-tiba ada yang ngebug
47:44di tengah-tengah daripada repot ya udah disuruh pakai Chrome.
47:47Mungkin ada teknik compressing video audio dan lain yang lebih optimize di browser tertentu tapi idealnya ya jangan sih maksudnya kalau di dunia yang ideal semua web standar
48:00harusnya disupport semua
48:02nah terus aneh tapi nyata nih ternyata nesting itu udah ada di Tailwind
48:08native CSS nesting
48:10halo halo
48:11tuh coba buka di private chat
48:14ya maksudnya CSS nesting yang kayak gini nih
48:18udah disupport sama mereka gitu maksudnya udah lama al-tawin Alfa itu Maret 2004 ini
48:28apa sih cuma masai tailwind itu dia nggak akan ngadopsi ke core tailwind nya kalau belum standar
48:36web API mau saya belum masuk standar CSS yang standar itu tutup di highlight Oh ya ampun
48:44tapi masih Alpha kelihatan belum nyoba juga sih cuma mau saya berarti emang ke arah situ
48:57bakal whiteley supported ini kan ya apa lepas dari kita pakai telwin atau enggak ini kan salah
49:04itu pemain major di ekosistem CSS ya betul-betul ini indikator juga update berikutnya color mix
49:14color mix itu sebenernya kita pernah bahas kita pernah bahas dulu cuma yang sekarang udah masuk
49:21besok itu enak sih jadi mencampur atau menggabungkan ya gitu menggabungkan warna
49:27dengan bahasa yang familiar apa human friendly banget sih jadi kayak color mix plump plump itu
49:35warna ya plump 40% dicampur pink itu kan kayak human banget kan kata apa itunya
49:42jadi susah nggak sih nggak gue kadang gua nggak ngerti warna sih ya jadi susah justru ini buat
49:51developer itu coba Scroll atas Scroll atas Scroll atas nih ya Scroll bawah dikit
50:00Oh ya buat apa ya kalau yang ngerti warna mungkin bisa dengan gampang ngebayangin HSL itu misalnya
50:07kita pengen warna lebih cerah itu apa hanya jadi gimana esnya lebih gimana elnya gimana atau RGB
50:13genya ditambahin airnya dikurangin nah kan itu abstrak ya kalau ini kan lebih apa ya lebih deket
50:21bahasa manusia pada pada umumnya lah kita bisa lihat kalau biru kalau birunya 0% itu putih-putih
50:29dicampur biru-birunya 0% putih birunya 25% jadi kayak apa birunya dikitlah biru muda Nah kalau
50:3750% birunya setengah ya kayak gitu kayak lebih deket aja ke pemahaman kita manusia awam
50:45bener-bener ini mainannya designer kali ya kan kalau dulu ada di apa di sas gitu kan kayak ada
50:57bikin Iya ini ada mixingnya kan biasanya jadi sebenarnya fitur-fitur CSS yang udah masuk
51:06baseline sekarang itu kayak pelan-pelan mengusur peran preprocessor jadi kayak diserap ke CSS
51:13pertamanya ya sama langsung sih javascript juga begitu kan akan dulu semua harus pakai loaders
51:20yang gak harus cuma apa pakai loaders jQuery lama-lama semua diserap ke xmascript sama web
51:27javascript web API Nah kalau sekarang CSS juga mau saya fenomenanya kayak gitu gambaran besarnya
51:35tapi sebenarnya enggak apa-apa kan intinya kan sesuatu yang sudah working dan banyak yang pakai
51:42post-profesor ya sudah proven akhirnya diadopsi jadi core banyak karena terbukti ada kebutuhan
51:49untuk itu Iya mungkin yang bikin juga merasa tersanjung gitu kan Oh seneng-seneng nggak bisa
51:56main train lagi itu juga bener menghilangkan fitur ya Oke oke nah kalau saya mungkin kalau
52:09saya itu enggak terlalu banyak ya yang belum baru nonton yang video yang tadi itu yang apa yang
52:17keynote nya web ya yang tadi kita share dan ya ini fitur-fitur yang update itu ya sebagian besar itu
52:25kalau kalau saya mungkin insidenya ini jadi sekarang ya kita balik lagi ya ke eh balik lagi
52:34apa di Chrome itu sudah ada gemininya ya akan akan ada gemin 126 ya mulai berapa sudah ada gemininya akan ada gemininya sudah ada apalagi kalau yang pakai
52:50kanari
52:54kalau dev sudah ada belum sih?
52:59nggak tahu
52:59sebenarnya saya udah
53:03kalian dapat ini nggak?
53:06invitasi untuk nyobain dapat-dapat udah ya udah ya ya sebenarnya udah udah beberapa bulan atau
53:14beberapa minggu sebelum Google ayo udah dapet cuman kan NDA kan nggak boleh ceritain ke orang-orang
53:19juga belum-belum final kan masih masih di develop berdasarkan feedback ya kita nah ini apa ini adalah
53:31untuk membantu kita memahami error code error error error message jadi misalkan disini kalau
53:40kita klik terus tiba-tiba fail to fetch gitu errornya nah disini di kanan atas ini ada
53:46gambar understand this error ya gambar bohlam gitu understand this error kemudian continue
53:53nah dia akan coba menjelaskan something went wrong kalau dianya error siapa kalau dianya
54:01error siapa yang jawab ya Oh ini error reception gak sih ini ada error ada error kita minta AI
54:13buat nerangin ehnya juga error ini keren sih ini kocat nah untuk nggak muncul itu lagi dalamnya
54:22Untung nggak muncul lightbulb lagi dalam cari arti error ini.
54:27Mudah-mudahan ini glitch aja.
54:29Mudah-mudahan ini glitch.
54:30Console message continue. Bener kan?
54:33Iya, error.
54:34Gemini lagi error.
54:37Jadi, intinya adalah kita bisa dijelaskan tentang course policy,
54:45no access control, alo origin itu kira-kira apa, dan ada solusinya ya?
54:49Ada solusinya nggak sih?
54:50Iya dia coba kasih solusi ya kita lihat di yang lain ya itu kan contoh ini kan ini ada nih
55:00warning warning ya bukan error ya error semuanya berarti error semua lagi down ya berarti ya jadi
55:10sudah demo itu sudah ada setiap demo itu pasti error ya Chrome versi 126
55:18satu lagi yang menarik adalah tentang web GPU wewe kalau saya kalau ada ininya ada saingannya
55:30kalau memang dari sisi gedung sebelah openai ada yang bikin npm-nya oh bukan npm ini
55:42community community library ya community library npm package untuk bisa ngedetect debugger di
55:54Dev tool jadi kalau ada error bisa pakai over ya third party ya mirip lah kalau ini
56:03first party eh betul gue bisa nih baik-baik aja coba ya share screen gimana caranya
56:09share screen Chrome
56:17mungkin saya yang error
56:23karena kan hari sih Chrome yang masih jalan kan hari itu Iya pakai yang masih banyak error ya
56:31pakai yang Dev kalau saya kan yang Dev lebih stabil sedikit daripada kan hari itu bisa ini
56:38krom apa stable ini stabil ya Chrome 125 stable latest iya biasa 125 coba ya jangan begitu di demo
56:49nggak bisa nih Coba kita lihat ini understand this warning error aja ya bentar weh keren weh
57:00Oke. Error with permission policy occurs when bla bla bla in this case.
57:08The error occurs because the browser does not to fix the error bla bla bla.
57:17There are some additional tips.
57:19Jadi dikasih tips. Coba ya kita lihat.
57:21Wait, wait, wait. Data used to understand this message.
57:24Jadi transparan ya.
57:26Console message.
57:27Ya ini data ini.
57:30ini saja yang dikirimkan yang dipakai buat konteks yang di-fetch yang dikirimkan ke Gemini nya cuma
57:37data itu saja secara sederhana sebenarnya ini apa ya memudahkan kita daripada copy paste ke Gemini
57:45atau penyelenggaraan atau chat GPT ke Stack Overflow dan lain-lain ini pakai Gemini Flash
57:54ya kalau nggak salah flash itu yang bisa diambil paling ringan Iya paling ringan diambil di dalam
58:03browser di dalam Chrome sendiri ya ya nah ini semakin gede dong ya Iya mungkin kemungkinan ya
58:15nah ini nih, content security policy, adblocker, privacy settings
58:22eh tadi apa urlnya yang buat ngecek?
58:27di private chat, di private chat
58:29bubble jingle web
58:32Coba nama itunya
58:50Njboba
58:51Dibikinnya pakai angular ya
58:55Iya dari namanya
58:57ya felt of fetch nah coba harus ini ya harus di ada yang diaktifkan ya ininya ya flagnya ya
59:10flag-nya
59:11hah, enggak, ini enggak aktifin
59:16flag apapun
59:17waktu nyoba
59:20waktu dicoba kan harus kan
59:21waktu ini, kemarin
59:24has been blocked by course policy
59:29oh, bisa nih
59:32the error message
59:36indicates that the browser
59:37lost resource
59:39but the server hosting that resource has not provided
59:43iya
59:44servernya
59:46course adalah bla bla bla
59:48oh dikasih ininya lagi
59:51code snippetnya
59:52buat aksesnya beneran dikasih kodenya
59:56servernya harus
59:57disarankan untuk
1:00:01update si servernya ya
1:00:03pake header ini
1:00:06if the server
1:00:09extension sama sekali dulu gua pas sebelum ngerti itu apa juga pakai extension
1:00:23sendiri nah data used to understand this message cuman ini yang dikirimkan ke Gemini ya berarti
1:00:36data itu ya, data errornya ya
1:00:38udah nih errornya pilihannya satu ini doang
1:00:42udah, oh gitu
1:00:43oke
1:00:45update terakhir
1:00:48dari saya
1:00:49itu adalah ini
1:00:51yang cukup
1:00:53lumayan ini ya
1:00:55kalau teman-teman ngikutin
1:00:57apa namanya
1:00:58web GPU
1:01:00sekarang udah bisa jalanin
1:01:03LLM
1:01:05demo demo demo demo ada ada demo-nya di bawah tenang-tenang Oke itu berarti di browser kan ya
1:01:16di browser jadi semuanya jalan di browser accelerated web GPU nice ini contohnya nih
1:01:23kita bisa pilih Gema misalkan mau yang berapa 2B nanti nggak tahu nih apa nih bedanya ya yang
1:01:29to be aja to be Oke ya oke apa ya What is course
1:01:42Oh belum dia lagi pecing Oh wah habis nih bandwidth ini gabungan dari webgp sama
1:02:00assembly ya kalau enggak salah ada di ada GitHub nya juga jadi kalau teman-teman mau jalanin model
1:02:08model setelah matiga game atau mistral yang open ya yang open access itu sekarang bisa pakai web GPU selain gede banget ya kalau misalnya minta minta user download sepamega terus kalau masalah jayma itu 22 gigadek kalau masalah yang kecilnya ya mungkin
1:02:28ya bukti ini lama ya yang flash ya tapi belum ada ya Gema yang flash baru ada Gemini flash ya
1:02:35baru kemini yang flash C ma enggak ada yang flash belum ada with one key traffic signif
1:02:45signify waa 1024 konteks lengsela Waring 223 GB VRAM
1:02:54Hai free to start trying with those yang minus satu yang ini ya berarti ya salah kita terdiri
1:03:03eh tuh ditanya yang kecil aja cari kecil Oh udah keburu download apa nggak bisa diulang
1:03:15refresh aja iya tuh jenon download lagi udah lama aja udah udah udah pilih apa itu error
1:03:25not enable you can try lu eh bisa Apakah gara-gara yang minus satu demo
1:03:35nil mungkin
1:03:36bisa Oh bisa lanjut Wow keren batidilokal dimana download ya lokasor aja otot ada pernyataan dari
1:03:48tomato bagus tapi berat gak sih webnya case tadi gimana banyak nah di diio kemarin ada itunya ada
1:03:58masih itu salah satu konten yang banyak di eh ya juga diio kemarin cuma saya nggak ngerti coba deh
1:04:06buka tuh di private chat itu ada artikelnya sama ada videonya dari io kemarin cuma belum
1:04:14yang pertama dan yang utama adalah privasi data tidak dikirim ke server datanya hanya di klien
1:04:21jadi data customer itu aman availability bisa membuat PWA sekali ya downloadnya sekali habis
1:04:34itu udah kecuali kita clear cache kan ya ya kalau download kayak jadi kayak PWA kan atau di embed
1:04:42sekali-sekali download doang Oke sebentar ini downloadnya di mana ya application local storage
1:04:53enggak enggak sih catch the set eh set storage eh enggak sih set storage beda set storage beda lagi
1:05:03ini ini itu enggak wasm config wasm
1:05:12beda ya ini gede-gede nih Iya tutup modelnya tuh betul betul betul sekali model satu-satu
1:05:21ada-ada dua tuh satu lagi modelnya klik-klik yang bawah tuh itu kan wasm nya atau lagi model
1:05:29di sini di sini ini modelnya juga di ini namanya di apa istilahnya ya di split di
1:05:44cang ini enggak satu finish weh pakai Nvidia laptopnya keren banget PC PC yang ini keren
1:05:57explain about course
1:06:11like I'm five terus dia jawab anak umur lima tahun ke gak usah ngurusin course
1:06:20main layangan di luar sana
1:06:27ini jalan lokal kenceng kan itu salah satu keunggulannya kalau udah sekali
1:06:38doang coba-coba bisa enggak ini Mas Riza kes sesuatu yang the live ini tunggu selesai
1:06:47real life question contohnya
1:06:50apa ya
1:06:54bukan bukan bukan
1:06:57begini aja yang lebih umum aja what is the please compare please compare between toyota innova
1:07:11zenix hybrid
1:07:13versus toyota yaris cross
1:07:16hybrid
1:07:16with a table
1:07:18versus
1:07:23versus
1:07:25yaris cross
1:07:27hybrid
1:07:27yaris toyota juga kan
1:07:29Iya, cross hybrid.
1:07:36With specification table and comprehensive.
1:07:44In comprehensive table.
1:07:48Comprehensive table.
1:07:51Di mana tulisannya?
1:07:52kompre-pre pre-pre pre-pre handshift pakai handshift table table for the specification
1:08:08nah coba pengen tahu
1:08:15nggak bisa nggak ada hahaha
1:08:22mobil lama mobil lama nggak bisa yang gitu-gitu kita harus provide sendiri kayaknya dia datanya
1:08:29Iya nggak ada dia tanya kan ini yang dikompres nggak usah minta macam suruh nulis resep coba
1:08:38resep apa ya terserah gaduh gaduh gaduh gaduh gaduh gaduh
1:08:47tapi tapi dia tapi dia ini sih tahu detok resepi
1:08:57diskriminasi
1:09:02ini gak inklusif dia
1:09:07Iya pakai Gemini baru bisa ya bener-bener ini ringan loh webnya ringan jadi proses downloadnya
1:09:28aja yang mungkin agak berat ya downloadnya 1 giga makanya di video yang itu juga ada tuh
1:09:34coba deh buka coba-coba baca baca bawahnya itu preview nya 17 token per second lumayan cepet
1:09:41eh maksudnya untuk web ya untuk website oke lah 11,3 token per second token itu kayak satu-satu
1:09:51kata sekian kata-kata sekian kata-kata bukan sih eh token itu tergantung kalau di rata-rata
1:10:01tergantung konteks satu-satu kata yang eh kata yang bermakna itu lebih tepatnya token bisa jadi
1:10:13itu dua kata bisa jadi tiga kata tapi satu konteks yang bermakna itu token ada stable
1:10:20juga investasi web woi keren sekali download lagi download lagi udah cukup cukup ini harus
1:10:31pakai Chrome kanari ya demo eh jendret ya langsung jendret gitu ini bisa diklik ya download tuh
1:10:38kalau kita lihat gambar besarnya berarti ini bakal banyak makin banyak ya besok-besok eh
1:10:50on device yang khususnya yang di browser makanya tuh ada si video yang tadi kan
1:10:56ada tutorialnya enggak sih Mas jadi ini ya gue ya tertarik juga gua untuk ngulik
1:11:06satu lagi yang kepikiran nih ada use case satu lagi yang kepikiran kalau kita bikin
1:11:13Chrome extension terus pakai webgplm jadi bisa lokal bener gak bisa gak pro konteks server
1:11:20ya kan berarti bisa pakai Chrome extension 3 tuh version 3 sekaligus sekaligus jadi dua topik tuh
1:11:26gimana cara bikin Chrome extension yang versi 3 plus menggunakan yang bawa model
1:11:34nah kan itu juga udah diimprovekan wasm sama web GPU ada tuh coba buka artikelnya tuh oke kalian pada mau pada mau ini topik apa belum dapet ide gonta ganti terus ini tiap ngobrol ganti topik Justru kita mau ngobrolin malam ini supaya dapet ide
1:12:01Dapet ide topik
1:12:02Buat ayo extend it
1:12:06Ini ya
1:12:08Accelerate web with
1:12:10Accelerating web AI
1:12:13Oke with wasm jadi wasm sama web GPU nya tuh kayak semacam diri pemplah di di ituin di diperkuat sih
1:12:22untuk memproses yang yang kayak gini mustahil berarti kan ini bakal ke depannya makin banyak
1:12:29dipakai makin common nah ini di en di enhance lah di asik sis karena karena gue pernah bikin
1:12:37yang sama yang zaman dulu yang yang masih pakai transfer jsf-light kalau yang on-device
1:12:44ia pakai wae-wae support.js Yes kompak model modelnya kok compare ke tf-light dan di dibuat
1:12:54jadi wasm di lotnya pakai wasm jadi kayak mau menghirupkan lagi ketepat ah ulikan zaman dulu
1:13:01ambil nggak ya ambil nggak ya ambil ya
1:13:04misalkan
1:13:06jangan-jangan Mas Riza mau ambil ini
1:13:08Mas Riza mau ambil ini belum
1:13:10nggak
1:13:11mungkin akan
1:13:13membahas tentang web GPU tapi
1:13:16nggak sampai sini
1:13:17pengen
1:13:19tadinya rencananya itu pengen banget
1:13:21bahas tentang web GPU
1:13:24terus hello world lah web GPU cuman kan
1:13:26nggak ada use case ya kecuali
1:13:28gamers gitu yang bikin game gitu kan
1:13:30ada
1:13:30kalau ini kayaknya masih bingung dengan itu yang skeleton GPU masalahnya skeleton dance itu aja
1:13:39yang kayak tangannya bisa kalau mau ngambil silakan jadi in general ini ya jadi apa arsitekturnya
1:13:51kalau misalkan kita biasa pakai TensorFlow.js itu dia runningnya di CPU kan Nah kalau ada GPU
1:13:58mungkin dia akan lari ke sini sederhananya gitu berarti tergantung device user kan ya betul
1:14:06Oke menarik ya kalau sih itu udah bikin squash squash squash bisa bisa upscale
1:14:22bisa upscale image atau enggak sih dia atau dia cuma downscale bisa bisa bisa bisa upscale
1:14:29apa gue bikin itu aja ya pakai GPU bikin upscale image ya satu contoh aja ya upscale pakai pakai AI
1:14:41kabum.js kabum.js itu apa tomato?
1:14:47kayak pernah denger kabum. Oh buat game ya game engine ya coba buka
1:14:54game programming library iya canvas betul betul pernah denger ini ada ada satu game engine yang
1:15:05mau mengadopsi web GPU namanya apa ya lupa kemarin itu udah sempet kita bahas sekilas kalau enggak
1:15:12salah jenen itu ini sih kebenar bukan bukan bukan bukan yang lain yang lain eh apa ya
1:15:28Hai coba tanya si Jemela
1:15:29game engine
1:15:34ada 2D nya ada 3D nya game engine game game kok nggak ada haiku bukan
1:15:47Kokos2D
1:15:50Kokos
1:15:51Bener gak kokos
1:15:55Saya baru pernah denger
1:15:58Bener bener bener
1:16:00Ini kokos
1:16:012022
1:16:10Kokos kreatornya yang pake web gpu ya
1:16:14karena juga juga number of web browser
1:16:21kata si akun pacer tuh pacer kah?
1:16:26pacer? bukan ini kokos bener kokos
1:16:30ya itu berarti game bikinan dia bisa di apa kayak bisa di compile untuk web
1:16:40Creator berarti ini nya ya bikin ide nya
1:16:47nah waktu gamenya ya nggak tahu bisa di-compile kemana gitu ya
1:16:50itu kayaknya tadi maksudnya dia bisa mengekspor game yang dibikin di situ di Creator itu untuk web deh maksudnya
1:16:58kalau lihat dari penjelasan di paragraf paling bawah tadi
1:17:01jadi mungkin bisa di deploy bisa dipublis untuk web game hasil buatan di kokos kreator itu
1:17:10oh benar-benar coba kita lihat Iya benar ini ada nih ada ada apa namanya ada screenshotnya platform web desktop
1:17:21tapi ini benar-benar itu ya game engine yang full-blown ya semua apa yang lengkap gitu ya
1:17:36ada 2D ada 3D nya berarti
1:17:43build and preview
1:17:45iya benar bisa di desktop
1:17:51for building web desktop
1:17:58tapi pertanyaannya
1:18:00kalau misalkan
1:18:01device usernya gak punya GPU
1:18:04yang enggak enggak kuat
1:18:10ya bukan jadi fallback ada yang di diagramnya Mas Riza Oh itu bisa otomatis jalan di main thread JavaScript biasa ya harusnya ya oh belum
1:18:32webllmlc.ai
1:18:37coba buka di
1:18:38laptop masing-masing bisa apa enggak
1:18:41yang tidak ada GPU-nya
1:18:43harusnya bisa
1:18:44karena GEMA kan
1:18:47enggak terlalu besar ya
1:18:48enggak terlalu berat lah gitu
1:18:54masih bisa dijalankan di CPU
1:18:56gitu maksudnya
1:18:58oh tapi dari segi
1:19:01bahasa sama persis ya berarti.
1:19:07Skripnya mustahil interaksi
1:19:08sama engine-nya itu
1:19:10aplikasi web
1:19:13GPU itu tidak ngaruh ya, berarti
1:19:15mustahil sama saja.
1:19:18Benar juga. Apakah berpengaruh
1:19:21atau enggak? Itu yang
1:19:22pengen di-explore sebenarnya.
1:19:25Maksudnya apa ada hal yang bisa
1:19:27diakses atau enggak bisa
1:19:29Kalau dari web GPU
1:19:31Misalnya bisa
1:19:32Akses grafik yang kayak gimana
1:19:35Itu harus coba sih ya
1:19:38Iya
1:19:39Kan ada sekarang
1:19:42Ada bahasa-bahasa pemograman yang running
1:19:45Langsung untuk GPU kan
1:19:46Karena berbeda kan, arsitekturnya berbeda kan
1:19:48Jadi kemungkinan Web GPU kalau mau itu ya Jalannya dengan bahasa pemograman yang berbeda nggak bisa kayak aplikasi kita yang udah kita bikin misalkan pakai TypeScript atau JavaScript atau apa
1:20:06terus kita minta dia untuk jalan di GPU kayaknya nggak bisa
1:20:10pindahin ke GPU, kayaknya nggak bisa deh
1:20:13iya, beda dunia kayaknya
1:20:16Oke oke ada lagi yang mau yang menarik topik-topik yang menarik yang mau disampaikan kalau yang
1:20:27CSS UI dari Mbak Una bagus ya banyak-banyak banget kayaknya kita bikin-bikin episode enggak
1:20:35semua sih belum banyak lagi belum semua besok-besok aja bikin episode terpisah nama-nama
1:20:40nopik kan enggak soalnya banyak tapi perintilan kecil-kecil kalau yang paling notable yaitu tadi
1:20:46apa nesting terus view transition juga yang multi apa multi-page Nah itu yang khusus UI satu episode
1:20:58sendiri aja itu speculation rules juga kita belum bahas nih yang di browser ya yang buat apa fitur
1:21:04browser nya itu bisa dibahas lebih dalam ya banyaklah sebenarnya topik yang paling banyak
1:21:14justru dari UI kan salah satu yang banyak cuman kecil-kecil ya perintilannya Oh iya banyak oke
1:21:23oke gimana cukup malam ini sip cukup udah satu setengah jam juga kan kayaknya kepanjangan kepanjangan mau saya ditunggu ya untuk itu ya stable infusion ya mau mandi belum selesai masih 21 tidak ditungguin Oke
1:21:43kalau gitu Terima kasih banyak buat semuanya yang sudah meramaikan malam hari ini mudah-mudahan
1:21:48udah kebayang ya apa topik-topik menarik yang dibahas di Google I o Nah kalau teman-teman punya
1:21:56menarik juga ya untuk dibahas lebih lanjut boleh ke GitHub nya kita belum di mana dia belum sabar
1:22:05ini kesana.in slash ngobrolin web jadi hang gara-gara dong bisa jadi siapa tahu bisa jadi
1:22:13inspirasi buat saya atau Ivan atau Eka untuk bahas di Google I o extended di kota-kota terdekat teman-teman
1:22:22karena kita juga masih bingung nih, mau bahasa apa
1:22:25mau bahas, kalau Eka mau bahas
1:22:28view transition lagi, masa itu lagi
1:22:30itu lagi gitu kan
1:22:31ada yang baru
1:22:34saya mau bahas wasm juga ada tambahan
1:22:36tapi masa wasm lagi, pengen yang lain
1:22:38gitu, tapi ya
1:22:40kita lihat aja nanti gimana
1:22:41videonya juga belum semua kita tonton
1:22:44karena banyak banget
1:22:45justru obrolan malam hari ini
1:22:48yang bikin
1:22:49Siapa tau idenya muncul dari sini
1:22:52Dan siapa tau idenya muncul dari teman-teman juga
1:22:54Oke untuk malam ini
1:22:56Segitu dulu aja
1:22:57Kita ketemu lagi minggu depan
1:23:00Dengan topik-topik yang berbeda
1:23:02Selamat malam
1:23:03Selamat istirahat
1:23:04Bye-bye
Suka episode ini?
Langganan untuk update episode terbaru setiap Selasa malam!
Episode Terkait
13 Mei 2025
Web Performance Update - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...
27 Mei 2024
Mengintip Masa Depan Web AI: Apa yang Disiapkan Google?
Apakah kamu siap untuk menjelajahi masa depan web yang diperkuat oleh kecerdasan buatan? Ngobrolin WEB kali ini, kita ak...
13 Mei 2024
Ngobrolin Web API Baru - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...