EP 83

Inovasi Web dari Google I/O 2024 - Ngobrolin WEB

Bagikan:

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 Koreksi

Episode ini membahas highlight dari Google I/O 2024 dengan fokus pada teknologi web. Topik utama yang dibahas termasuk inisiatif baseline yang kini memiliki dua label: newly available untuk fitur yang baru didukung oleh dua versi browser terbaru, dan widely available untuk fitur yang telah stabil selama 30 bulan. Episode ini juga menyoroti dashboard baru yang lebih user-friendly untuk mengecek kompatibilitas fitur web, serta data dari RUM (Real User Monitoring) yang menunjukkan persentase pengguna nyata yang dapat mengakses fitur-fitur tertentu. Selain itu, episode ini membawa pembaruan signifikan di Chrome DevTools yang kini terintegrasi dengan AI untuk membantu developer memahami error console secara lebih baik, serta kemajuan WebGPU yang memungkinkan menjalankan model bahasa besar (LLM) seperti Gemma dan Mistral langsung di browser tanpa mengirim data ke server. Pembahasan juga mencakup update CSS/UI seperti nesting, view transitions untuk multi-page, dan speculation rules untuk pre-rendering, memberikan gambaran komprehensif tentang perkembangan teknologi web yang ditampilkan di Google I/O tahun ini.

Poin-poin Utama

  • Inisiatif Baseline ditingkatkan - Tahun ini ada penambahan label newly available dan widely available untuk membedakan fitur yang baru masuk baseline (didukung 2 browser stabil terbaru) dengan fitur yang sudah benar-benar aman digunakan (30 bulan setelah newly available). Memudahkan tim menetapkan standar seperti baseline 2023 atau baseline 2024 untuk proyek.
  • CSS Nesting dan Color Mix masuk Baseline - CSS nesting sekarang sudah didukung semua browser major, mengurangi ketergantungan pada preprocessor seperti SASS. Color mix memungkinkan pencampuran warna dengan bahasa yang human-friendly (misal: color-mix(in srgb, plum 40%, pink)).
  • WebGPU untuk menjalankan LLM di browser - Model AI seperti Gemma dan Mistral sekarang bisa dijalankan langsung di browser menggunakan WebGPU tanpa mengirim data ke server, menjanjikan privasi lebih baik dan kemampuan offline processing.
  • Gemini AI di Chrome DevTools - Chrome 126+ memiliki fitur AI untuk menjelaskan error message dan warning di console secara langsung, membantu developer memahami error beserta solusinya tanpa perlu copy-paste ke chatbot lain.
  • View Transitions API untuk Multi-Page - Fitur yang memungkinkan transisi halus antar halaman website, sebelumnya hanya untuk SPA (Single Page Application) sekarang sudah diperluas untuk multi-page navigation.
  • Fitur CSS lain yang masuk Baseline - Termasuk :has() selector, container queries, dan berbagai fitur CSS lain yang sebelumnya eksperimental sekarang sudah widely available, secara perlahan mengurangi peran preprocessor CSS.
  • Web Platform Test Dashboard baru - Dashboard yang lebih mudah digunakan untuk developer mengecek dukungan fitur browser dan status interop project, memudahkan filtering berdasarkan tahun baseline.
Transkrip Bantu Koreksi

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!

Langganan Sekarang

Episode Terkait

Web Performance Update - Ngobrolin WEB
EP 128

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

Mengintip Masa Depan Web AI: Apa yang Disiapkan Google?
EP 84

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

Ngobrolin Web API Baru - Ngobrolin WEB
EP 82

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

Komentar