Inovasi Web dari Google I/O 2024 - Ngobrolin WEB

1:22Laporan pandangan mata.

1:24Di Indonesia kita watch party doang.

1:28Di Discord-nya Google Maps Indonesia.

1:30Ada kita, ada gue, ada Ivan.

1:33Ada teman-teman yang lain juga.

1:35Mas Budi.

1:36Di live stream juga sama Padhika.

1:39Padhika.

1:40Ada di channelnya Padhika juga.

1:42Doi stream dari channelnya dia juga.

1:44Seru. Sampai malam.

1:46Hai.

1:48Teman-teman di sini pada ngikutin nggak sih Google I/O?

1:52Ada yang nonton atau ada ikutan watch party.

1:54Mungkin bisa share juga topik-topik yang menarik.

1:58Nah, malam hari ini kita akan bahas tentang beberapa topik yang menarik menurut kita.

2:04Yang dihalai dari event Google I/O 2024.

2:09Khususnya yang berkaitan dengan teknologi web.

2:13Karena kan banyak banget lulus banget kan kemarin I/O.

2:18Kalau kita ngobrolin AI ntar AI-AI lagi semua.

2:23Dan kayaknya nggak mungkin kita nggak bahas AI.

2:26Karena ada beberapa juga yang berhubungan dengan web ya.

2:29Dan AI secara keseluruhan banyak sekali ya.

2:31Sampai ada counternya ya itu ya.

2:34Sampai ada yang bikin flipnya di edit semua ngomong AI doang.

2:39Nggak, tapi sebenarnya di luar AI, maksudnya oke lah.

2:43Karena kebutuhan industri ya.

2:45Kompetitor si OpenAI juga kemarin barusan ada spring release.

2:51Jadi memang fokusnya ke arah sana.

2:56Cuma ternyata kalau dilihat-lihat,

2:58sebenarnya ya tadi nih karena ngecek konten buat ini,

3:03ternyata konten webnya ya cukup banyak, cukup signifikan juga.

3:08Jadi mungkin kalau teman-teman ada yang cuma nonton keynotenya,

3:12misalnya terus belum sempat, misalnya belum sempat ngecek apa sih yang baru di web,

3:17apa yang di-announce, mungkin FOMO,

3:20nah ini nanti kita kasih kisih-kisihnya di sini.

3:23Sekaligus kita mau cari inspirasi buat I/O Extended ya sebenarnya ya.

3:28Topik apa yang kira-kira teman-teman tertarik untuk belajar.

3:33- Pernasaran tertarik. - Yang lebih dalam gitu ya.

3:35Ada banyak sebenarnya web di ranah UI, CSS, HTML, JavaScript,

3:44ada update kemudian apa lagi, performance ya, performance.

3:49- Performance testing. - Yang kemarin udah minggu dulu,

3:51kalau nggak salah kita bahas juga ya testing,

3:54ada beberapa project juga yang lumayan menarik,

3:58ada web GPU juga, ada AI yang ditaro di browser,

4:04itu juga menarik, jadi mari kita bahas satu per satu ya.

4:09Halo Ilham, halo.

4:12- Halo-halo. - Dan kita mulai dari...

4:16- Bahasa mana ini? - Pake notenya web kali ya.

4:20Nah ini tadi lupa, tadi lupa naruh linknya,

4:25nggak usah diputer juga sih, cuman...

4:29kalau teman-teman mau nonton nanti ya setelah ini ya,

4:38jangan sekarang nontonnya, bingung.

4:40- Jadi strukturnya I/O itu kan keynote, keynote yang utama itu

4:48yang di panggung besar yang Pak Sundir dan developer lain,

4:52terus ada developer keynote yang kombin,

4:55terus masing-masing bidang kayak misalnya Android, web,

4:59ada itunya sendiri juga, coba sambil dibuka aja tuh linknya, YouTube-nya.

5:06- Sebentar, sebelum dibuka kita kedatangan satu orang lagi.

5:09- Akhirnya sampai, udah balik.

5:12- Akhirnya udah sampai rumah udah selesai makan,

5:18belum sempat mandi, loh.

5:21- Dari mana, dari mana? - Dari Bandung, iya.

5:25- Acara itu, pwp. - Nggak, acara nyantai-nyantai aja.

5:31Acara ketemu Mas Danang.

5:35- Oh, kalau bahas Mas Danang ntar muncul ini.

5:39- Hati-hati, hati-hati. - Nggak apa-apa juga, cuman muncul aja.

5:45Rachel Andrews, dan ini salah satu idola juga, ikonik banget.

5:50Dulu beliau lama di Smashing Magazine.

5:53- Oh, dia urusin web.dev kan ya?

5:56- Iya, dan semua punya konten.

5:59Konten terkait web, ya, termasuk di developer Chrome juga.

6:04Nah, ini tuh kalau what's new, misalnya what's new in the web,

6:07what's new in Android, what's new in blablabla,

6:10itu kayak ringkasannya sih.

6:12Ini lumayan lama sih, toknya 45 menit.

6:14Jadi kalau misalnya males nonton semua, bahas di sini aja.

6:19Jadi ini yang gue lihat menarik juga sih,

6:23karena fokusnya banyak di inisiatif-inisiatif

6:27men-streamline teknologi web.

6:30Nah, itu tadi kan di skrin-nya udah muncul tuh baseline.

6:33Jadi masih mirip, masih sama kayak yang tahun lalu,

6:36update intinya kayak banyak tentang baseline dan interrupt.

6:42Jadi kalau buat yang belum tahu,

6:45berarti belum sering nonton show kita.

6:51- Ngobrolin web. - Nah, baseline.

6:53Inisiatif antar, jadi komunitas semua di ekosistem web.

6:59Jadi kayak berbagai vendor-browser, bukan Chrome doang,

7:02Chrome, Mozilla, Safari, terus komunitas.

7:06Terus kelompok kerja di W3C itu terlibat juga.

7:14Bikin standarisasi intinya.

7:19Nah, baseline itu intinya sih suatu fitur web

7:23bisa dibilang udah masuk baseline

7:25kalau sudah disupport oleh 2 versi stabil terbaru

7:30dari semua major browsers.

7:32Itu intinya.

7:34Nah, yang menarik di tahun ini, di keynote yang tahun ini,

7:38mereka kayak meng-improve lah dari yang...

7:42tahun lalu kan secara konsep,

7:44oke tuh, ada konsep baseline.

7:46Jadi kalau kita lihat ada logo centang ini,

7:48ibaratnya suatu fitur sudah aman untuk digunakan.

7:52Tapi kan kenyataan nggak seindah keynote speech, ya kan?

7:58Maksudnya 2 versi browser stabil terbaru.

8:02Apakah semua user mengaktifkan auto-update?

8:06Misalnya salah satu concern-nya kalau di dunia nyata,

8:10kan belum tentu semua orang auto-update,

8:12semua orang rajin meng-update versi browser,

8:15jangan-jangan misalnya 2 versi terbaru itu

8:18ternyata scope-nya masih 5 bulan terakhir.

8:22Nah, client nggak mau terima

8:24karena mungkin target audience-nya nggak seperti itu.

8:27Nah, sekarang di perbeda...

8:30ada label, coba scroll ke atas deh.

8:32Nah, zoom in.

8:34Sekarang ada 2 label,

8:36newly available dan widely available.

8:41Sama-sama baseline.

8:42Jadi nggak mengubah dari konsep yang original,

8:45yang simple, yang tahun lalu.

8:47Cuma ini dibedakan,

8:49dan kalau misalnya teman-teman lihat keynote-nya itu,

8:53di logo centang itu bawahnya ada text-nya juga

8:57dibedakan antara newly available atau widely available.

9:02Nah, newly available itu...

9:03Kalau nggak salah yang newly itu biru ya?

9:06Kalau nggak salah.

9:07Pokoknya ada text-nya sih, iya.

9:08Ke biru atau...

9:10Oh iya, kayak...

9:12Newly biru, kalau nggak salah.

9:14Ijo widely, ya gitu.

9:16Pokoknya newly available ya baru, baru send.

9:19Baru aja, misalnya browser terakhir,

9:23vendor terakhir yang rilis, Firefox, gitu.

9:26Firefox stable-nya support,

9:28yang lain semua udah support, ya.

9:30Ini 2 versi terakhir.

9:32Nah, kalau baru banget namanya newly available.

9:35Kalau widely available itu 30 bulan setelah...

9:39Iya, 30 bulan atau berapa bulan, gitu.

9:42Setelah newly available.

9:44Oh iya, nah itu.

9:46Nah, 30 bulan itu kan udah lama ya.

9:48Jadi maksudnya itu kayaknya yang beneran widely available itu

9:52udah bener-bener bisa banget dipakai di semua...

9:56Ya, hampir semua lah.

9:58Hampir semua use case kita.

10:00Dua setengah tahun ya?

10:02Dua setengah tahun.

10:04Dua setengah tahun setelah newly available.

10:07Jadi kayak kita relatif nggak harus mikirin fallback,

10:12progressive enhancement,

10:14atau polyfill, dan lain-lain.

10:16Nah, itu helpful banget sih.

10:18Sama kalau tahun lalu kan baru banget tuh.

10:21Baru banget di-announce.

10:22Terus sekarang kan udah 2 tahun.

10:24Dan ini sudah dibuat polis daftar berdasarkan tahun.

10:27Baseline 2023-2024.

10:30Maksudnya fitur apa saja yang menjadi baseline di tahun 2023.

10:34Apa saja yang masuk ke baseline di tahun 2024.

10:38Nah, dan seterusnya.

10:40Pas tahun lalu ini udah dibilang sih,

10:42cuma kayak masih wacana.

10:43Karena belum kan, belum dijalani.

10:45Belum banyak di-refine.

10:47Nah, ternyata sekarang udah ada.

10:49Apa yang membedakan ini dengan Can I use?

10:53- Ya, sebetulnya data-nya, sumbernya sebagian sama sih.

10:58Itu Can I use juga di link.

11:00Cuma lebih ke stream line semua.

11:05- Mungkin waktu set up project atau space baru kita mendeside,

11:13"Oke, kita pakai baseline 2003."

11:16Jadi nggak rancu lagi persatuan. Maksudnya nggak ketengan lagi.

11:24Harus nanya ini bisa nggak atau nggak.

11:26Jadi kalau memang sudah ada kita sebagai team,

11:30sudah desain, "Oke, kita pakainya baseline 2023."

11:33Berarti kalau dia masih eksperimental atau masih belum widely available,

11:39jangan dipakai.

11:41- Iya, memudahkan itu sih komunikasi dan dokumentasi.

11:45Walaupun bisa aja kita buka Can I use,

11:47periksa satu per satu versi browser,

11:49terus kita cek browser versi X itu rilisnya kapan.

11:53Udah cukup lama belum, bedanya berapa bulan dari sekarang.

11:56Iya, bisa.

11:57Tapi kan nggak praktikal untuk keperluan komunikasi,

12:01termasuk bikin spesifikasi project dan dokumentasi.

12:05- Bisa aja jadinya, contohnya CSS subgrade.

12:09Dia kan baru baseline di 2024.

12:12Sedangkan project di set-upnya di baseline 2023, contohnya.

12:18Berarti kita sebagai team, ya udah tahu.

12:22Kalau misalnya itu ada di 2024, ya berarti belum bisa.

12:27- Iya, kita dengan cepat bisa bilang, "Oh, ini belum."

12:32atau, "Oh, ini udah aman."

12:34- Iya, kalau mungkin betul, jadi menetapkan standar baru.

12:39Kalau misalkan kan teman-teman misalkan mau ngecek,

12:42"Oh, di Firefox kompatibilitasnya gimana?"

12:46Biasa kita lihat di MDN. MDN itu kan ada ya, seperti Can I use juga kan ya.

12:50Tapi per fitur, sama ya. - Data-nya sama.

12:53- Sama. Terus abis itu di Can I use ada juga seperti ini.

12:58Tapi dengan mungkin dengan standar-standar yang berbeda gitu.

13:03Ya mungkin tampilannya atau apa gitu.

13:06Dengan adanya baseline, ya jadi satu, jadi standar.

13:09Jadi sama team juga ngomongnya, "Oh, kita pakai baseline aja."

13:13Baseline 2024 atau 2023, jadi udah lebih...

13:16- Berarti ini sama kayak memilih.

13:20Oke, project kita pakai ES Next, ES Next, ES 6, 7, atau ES 6, eh, 7, 8 gitu ya.

13:30Kalau dulu kan masih ES 2015 atau ES Next gitu kan ya.

13:35Sekarang sudah ES 6, ES 7. - Iya, buat standar aja.

13:40- Dan baru lihat juga sih, baseline masuk Can I use.

13:43Berarti emang membuktikan bahwa ini kerja sama semua ekosistem

13:49yang ngetracking fitur web ya.

13:53- Itu nge-lock baseline-nya ini loh. Asynchronous loh.

14:01- Iya, kelihatan kan dia tiba-tiba awalnya nggak ada, terus muncul kayak gitu ya.

14:06- Dan terjadi CLS kalau misalnya mau dirilat.

14:10- Reflex-nya, apa, matanya mata CLS banget ya.

14:15- Iya. Oh, web komponen.

14:19- Oh, disediain, dikasih, itu resmi.

14:23Jadi kita misalnya punya website yang isinya artikel atau tutorial pemprograman ya, tutorial web.

14:33Terus kita pengen ambil informasi tentang suatu fitur.

14:37Kok nggak bisa? Belum dibikin kali itu, harusnya ada button-nya.

14:42Belum selesai. Ada kok di GitHub-nya, cari somewhere.

14:46- Coba inspect element di sana.

14:48- Ini kan beda. Ini widget-nya beda loh.

14:51- Coba klik. - Ini bikin sendiri kali, tapi disediain.

14:55- Oh ini bikin sendiri ya. Artikel main, bukan.

14:59Dia summary ya? Oh ini dia summary, taruhnya di summary itu.

15:03Bikin sendiri dia. - Iya.

15:06- Bikin sendiri. Ini nggak pakai widget-nya. Oh di GitHub-nya ada ya?

15:11- Ada, somewhere. - Somewhere.

15:15- Oke lah, lanjut. - Tahun lalu udah lihat soalnya.

15:19Terus apa lagi yang menarik? Oh dashboard baru.

15:23Ngomongin inisiatif kiri itu.

15:27Selama ini kita pakai WPT ya, web platform test itu terkait project interrupt.

15:34Jadi di keynote web itu juga masih ngupdate tentang project interrupt yang masih jalan terus.

15:39Jadi intinya para vendor browser, browser engine, semacam voting menentukan fitur-fitur apa

15:48yang mau difokuskan banget biar bekerjanya perfect sama konsistensi

15:55antar browser juga perfect untuk setiap tahun dipilih sekian fitur.

16:00Cara ngetesnya tuh pakai, cara ngetes.

16:04Cara tahu suatu fitur udah berjalan-jalan bagus atau nggak kan?

16:08Pakai test, web platform test WPT. Dulu pakainya WPT.FYI ya.

16:14Sampai sekarang masih buka itu kan?

16:18- Sampai sekarang masih. Cuma ini dibikin dashboard yang lebih keci dan mudah dipakai.

16:27Dari 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.

16:40Mereka yang bikin buat ngetrack punya fitur-fiturnya, test suite-nya, masing-masing test-nya juga.

16:48Nah kalau ini memudahkan kita buat cari-cari apa, ngecek misalnya apa aja yang di support di baseline 2023.

16:56Bisa difilter-filter juga tuh. Filternya lebih oke.

17:01Nah kan lebih keci ya? Kalau dulu kan kita harus buka satu persatu terus tabelnya ya gitulah developer banget.

17:09Kalau ini secara UI lebih keci. Bisa filter tuh di atas.

17:19Oh iya filter by. Available on safari.

17:25Oh harus ditulis ya apa gitu ya?

17:29Kayak GitHub gitu ya kayaknya.

17:32Ininya search, oh search, iya search. Available on safari.

17:44Belum.

17:46Ini juga termasuk baru ya.

17:50Tapi sudah widely, oh newly available ini ya?

17:53Iya udah masuk baseline. Ini yang di-announce.

17:57Iya.

17:58Belum 30 bulan.

18:0030 bulanan.

18:02Iya.

18:04Tapi masih bagi.

18:06Masih bagi ya?

18:08Ya butuhnya ada yang nggak lulus test-nya 0,3%.

18:12Nah itu pasti edge case yang aneh-aneh.

18:16Oh ini filter aja ya?

18:19Apa namanya status-nya widely ya?

18:22Enter deh kayaknya.

18:25Harus pencet ini, nggak bisa di-enter.

18:30Nah berarti masih bagi juga itu dashboard-nya tuh. Kita kirim feedback aja.

18:34Ini udah bahkan nggak ada persenannya lagi ya.

18:38Nggak dibikin test-suit. Kayaknya nggak ada yang komplain.

18:42Udah bisa semua.

18:43Taxi Indian 82% tapi udah widely available ya?

18:46Jadi widely available itu maksudnya udah di-support di semua major browser selama 2 versi terbaru plus 30 bulan.

18:58Cuma test-suitnya ternyata masih ada yang nggak lulus.

19:01Kan bisa.

19:02Jadi nggak lulus testing itu bukan selalu karena nggak berfungsi ya.

19:07Cuma ini kadang antar browser, misalnya speknya kurang jelas.

19:12Interpretasi masing-masing browser tuh behavior-nya beda.

19:15Nah kan mungkin selama ini sebelum dibikin testing-nya ya mereka sama-sama semua ngerasa oh iya emang expected kok kayak gitu.

19:23Nah setelah dibikin test-suit baru kerasa.

19:26Baru ketahuan nggak 100%.

19:30Backdown clip.

19:33Nah ini berguna kalau kita pengen, kita nemu suatu fitur, liat tutorial atau apa.

19:44Bahkan kadang itu tuh kalau kita lihat pasti kita cenderungnya, wah seru nih.

19:49Ah tapi pasti Chrome doang.

19:51Pasti browser lain belum ada yang support.

19:53Nah daripada susun-susun kayak gitu langsung cek di situ aja.

19:56Cekin ini dong, cekin Spekulation API.

20:01Itu Chrome only pasti.

20:05Gak bisa ya?

20:07Spekulation?

20:10Nggak ada.

20:12Itu baru di-announce juga kan ya, Spekulation API kan?

20:16Iya.

20:18Nah cuma kalau yang kayak gitu bisa dibikin test kayak gini nggak ya?

20:23Coba ya MDN ya.

20:25Nah test-nya gimana coba?

20:27Ini kan yang buat rendering kan, maksudnya yang UI-related.

20:32Nah itu udah ada, Spekulation Rules.

20:36Experimental, tuh ada warning-nya di atas.

20:40Hey, Chrome Edge.

20:42Chromeium only emang.

20:44Chromeium only?

20:45Iya Chromeium only.

20:47Masih Chromeium only, no.

20:51Belum masuk web platform.

20:54Maksudnya belum streamline di browser lain.

21:02Safari juga belum, iya baru hanya Chrome ya.

21:05Tapi ini per API loh, ini dokumen pre-rendering, pre-rendering change event, ada banyak.

21:11Masih merah semua, masih merah semua.

21:14Masih merah semua.

21:15Ya Chromeium, Chromeium only.

21:17Gapapa, tetap useful.

21:19Cuma apa, ekspektasinya berarti harus di-manage.

21:24Oh ini yang 2023 ya?

21:28Iya, yang ini yang baru ya.

21:31Oh, newly available tuh.

21:33Itu ada range tanggalnya yang jadi baseline di tanggal-tanggal tersebut.

21:39Ya.

21:40Sin costan, buset, udah newly available ternyata, apa trigonometry?

21:45Trigonometry buat charting library mungkin ya, bagus.

21:50Oke berikutnya, berikutnya kita bahas tentang Chrome Dashboard ya.

22:01Ya ini di-announce juga di King of Web.

22:05Chrome Dashboard itu apa?

22:07Gue baru denger.

22:09Ya itu support dari ROM itu loh, user metric.

22:14Oh, real user metric.

22:18Ya ini kan juga sebenarnya udah ada dari dulu, cuma dibikinin dashboard yang enak dilihat gitu lah.

22:27Ini ya, Chrome Insight ya bukan?

22:29Iya, RAM Insights.

22:32RAM Archive Insights.

22:34Jadi intinya misalnya kita pengen tahu berdasarkan data RAM,

22:38berapa orang yang masih pakai IE 6 gitu, atau apalah.

22:43Ini kan dari dulu ada ya kalau nggak salah.

22:45Bukannya ini ada sebagai bagian dari web almanak ya?

22:52Ingat ya, kita pernah bahas ini pas tentang ROM, user metrics.

23:01Masa sih, kok nggak inget?

23:03ROM Archive, nggak, maksudnya bahas kilas, tanggung sumber datanya.

23:09RAM Archive.

23:13RAM Archive, FOK, browser version, ini apa? Timeseries Chrome version, mobile desktop.

23:24Cuma yang seru itu detail banget sih.

23:27Iya, siapa ya? Siapa dan dalam kasus apa orang buka Samsung internet dari desktop?

23:34Itu semua yang...

23:36TV ya maksudnya kayak?

23:38Bisa jadi.

23:40Kok desktop sih soalnya?

23:42Yang dianggap sebagai browser desktop.

23:46Atau itu Samsung Chromebook itu?

23:52Oh ada ya?

23:54Ada kan Samsung Chromebook?

23:56Ada, ada.

23:58Kan bisa di-install juga, semua Chromebook bisa di-install Samsung internet kan.

24:03Tapi masuknya mobile atau desktop?

24:06Nah itu nggak tahu.

24:09Nah kaitannya, ini yang seru sih, coba scroll nggak tahu deh ke bawah atau ke atas yang tadi sama baseline.

24:21Gimana bacanya ini?

24:23Zoom in, zoom in.

24:27User kan, user yang mengakses, loh jadi kecil. Ini yang gede tapi ini yang kecil, ya balik lagi.

24:39Ini berarti kalau nggak salah baca, berarti user yang mengakses aplikasi web yang MPA 56%,

24:47yang mengakses SPA 21%, yang hard yang software 2%.

24:53Tapi apa beda aja sih, hardsoft kayak telor, 33,9.

25:01Hard Navigation itu client-side, tapi pertama kali datang atau di-refresh, user manually refresh.

25:10Habis itu kalau udah, biasanya kalau SPA itu kan pakai client-side router ya, react router atau apalah,

25:18terserah next router, habis itu kalau navigasi antar halaman, itu kan kayak udah dibajakan,

25:24di-hijack sama client-side routing-nya, itu disebutnya soft navigation.

25:30Ya intinya antara SPA sama MPA itu beda-beda tipis ya, 56% dan 44%.

25:36Dan tetap lebih banyak MPA tuh, walaupun beda tipis, lebih banyak MPA.

25:42Berarti ini dari sisi user-nya, bukan dari sisi developer ya?

25:47Macem-macem sih, kayak di atas kan ada perbandingannya sama baseline tuh, coba ke atas.

25:54Atas atau bawah ya, nggak tau carilah baseline.

25:57Landing page apa ini? Jadi user yang mengakses landing page ada 22% gitu.

26:05Coba klik apa tuh atinya landing page?

26:08Landing page is the first page, tuh paragraf 2 ada keterangannya. The first page a user visit.

26:17Loh kok kesini? Akamai. Landing page is per-page user visit during new session on given website.

26:24On a given website.

26:26Oke.

26:28As long as first a user visit. True-false itu maksudnya apa?

26:34A session is typically defined as a series of navigation.

26:40Berarti ini maksudnya, per jumlah visit yang hanya ke landing page gitu?

26:52Landing page itu artinya halaman pertama kan yang diakses sama user.

26:58Iya.

27:00Terus true itu artinya benar.

27:02Gak ngerti kalau ini cuma orang analytics yang paham.

27:10Backward, back-forward ini nih.

27:16Back-forward cache bukan? Oh bukan.

27:19Iya benar, benar.

27:22Dia navigasinya pakai back-forward.

27:25Kalau di mobile, pakai swipe kan.

27:33Kalau ini masih bisa kebaca lah.

27:37Nah kalau yang di-announce kemarin kaitannya ini, eh bawah lagi.

27:43Bawah dikit.

27:46Ada section buat dapetin data tentang baseline support.

27:53Coba deklik, misalnya coba scroll ke bawah.

27:58Klik yang 2024.

28:01Iya, 2023 misalnya.

28:03If you target to following web features for baseline 2024,

28:0975% dari desktop users yang ada di RAM Archive akan bisa mendapat keuntungan dari fitur-fitur ini.

28:17Jadi kayak kita ngebanding ini.

28:19Kan sebelumnya abstrak ya.

28:21Maksudnya dua versi browser terakhir misalnya.

28:24Itu kan kayak gimana nyatanya realnya di user kita.

28:28Berapa persen yang bisa dapat manfaatnya.

28:31Nah kalau ini jadi kayak di cross apa sih.

28:34Dituin sama data, di relate sama data user-nya.

28:39Ini kan desktop.

28:43Desktop user ya.

28:45Kalo misalnya mau, misalnya pengen pake hash.

28:51Berarti boleh gak pake hash berdasarkan data.

28:55Coba 2023.

28:58Oke, berarti bisa dibilang kalau saya pake hash, meskipun dia newly available,

29:05sudah bisa diakses oleh 80%.

29:08Sudah bisa memanfaatkan 80% pengguna user yang di RAM Archive itu.

29:13Berarti bisa berikan enough justification gitu ya.

29:17Bisa berikan, oke 80%.

29:19- Iya, jadi kayak buat decision making kita.

29:21Maksudnya worth it atau nggak sih.

29:23Sebenarnya kan kalau misalnya adopsi suatu fitur baru,

29:26pemikirannya adalah worth it atau nggak.

29:29Nah, jadi itu bisa didukung dengan data.

29:32- Oh, dia justru sama TTP Archive itu mirip-mirip.

29:39Cuma sumber datanya berbeda.

29:41Sumber datanya dari CDN kalau nggak salah.

29:44Kama ini kan salah satu program CDN ya.

29:47- Oh, kita di tracking.

29:50- Selama ini juga di tracking.

29:54- Nah ini, kalo Http Archive itu ngambilnya dari Chrome only kan.

30:00Krux CRUX.

30:04Chrome only, bahkan Chromium pun belum tentu kan.

30:07- Chrome only.

30:08- Ya, Chrome only.

30:11- Nah kalau Akamai ini mungkin lebih umum.

30:14- CDN.

30:15- Karena semua producer bisa aja ngambil...

30:18- Iya, jadi ngerti sekarang maksudnya kenapa dia pakai data dari CDN.

30:23Karena kalo Krux ya di Chrome only, datanya nggak sah dong.

30:28Gak bisa jadi patohan.

30:30- Oh iya, dia gak bisa dapet browser lagi.

30:32- Iya, bisa jadi patohan browser lagi.

30:35- Dia bisa ngasih presentase browser kan makanya.

30:38- Iya.

30:40- Make sense.

30:42- Dan bisa di-query juga sama kayak CRUX kan.

30:46- Ada nggak datanya? Dikasih nggak sih?

30:49- Ada nih, di-query.

30:50- Ada, ada.

30:51- Ah, nice.

30:53- Tuh, dikasih kok.

30:56- Berarti bisa jadi JN's conflag di Jakarta nih mas, kita bahas beginian lagi datanya.

31:06- Amin, doakan saja.

31:10- Gak, kalo ada yang mendengar, kita mencari organizer dan cari sponsor.

31:16- Kanti nama dong, Jabodetabekcs, biar bisa lebih seksibel.

31:21- Penjang banget.

31:23- Nggak, kita kan pake namanya, kalo conference-nya kan namanya JSD.

31:29- JSD ya.

31:31- Kita kemarin pake JSD ya.

31:33- JSD.

31:35- Oke, menarik ya. Jadi kalo CRUX itu hanya Chrome aja, kalo ini bisa semua.

31:47Walaupun mungkin tidak menjangkau, tergantung kita sebagai pengguna apakah kita mengakses Akamai CDN atau nggak gitu ya.

31:55Masih lumayan ada celah juga, ya walaupun ini lebih general.

32:02- Tapi lebih general.

32:03- Ya, lebih general.

32:05- Nah, cuma mungkin mereka kerja sama-sama siapa gitu yang lain, CDN lainnya.

32:10Akamai kan mungkin dia salah satu provider CDN terlama dan terbesar juga ya, salah satu ya.

32:24- Dia produknya banyak sih, video provider juga.

32:28- Dan dipake banyak enterprise kan.

32:32Bisa jadi kayak CDN-CDN lain tuh di belakangnya pake infrastructure.

32:38- Nah, itu gue mikir kayak gitu, misalnya Lambda Function kan banyak yang pake AWS Lambda atau JCP.

32:47- Ya, ya saingannya ya kayak CloudFront, CloudFlare.

32:53- Oh iya bener, CloudFlare juga sebenernya kalo mereka mau kasih insight, buka data juga bisa.

33:02- Nah, kalo Amazon atau AWS CloudFlare itu kan punya datanya sendiri, makanya dulu namanya Amazon top 10 million itu apa namanya?

33:11- Alexa, bukan?

33:14- Alexa, ya itu Alexa itu kan datanya dari CDN mereka juga, bukan Amazon Alexa ya.

33:23- Jadi pake Akamai produk apa nih? CDN ya? Atau apa? Boleh info-info, kita soalnya agak-agak abu-abu juga nih, cuman taunya CDN doang.

33:33- Saya pake Akamai banyak. - Banyak ya?

33:37- Akamai Net Storage, streamnya Akamai, Akamai CDN yang jelas ya, streamnya juga ada.

33:47- Kategori desktop dan mobile, tapi pemakainya lebih banyak di mobile. Oh di desktop juga ada ya? Baru tau nih.

33:52- Nah itu yang tadi kita bahas, desktopnya itu, kalo mobile kan jelas, maksudnya kalo yang

33:57browser bawaan Samsung. - Desktop.

34:02- Iseng banget. - Bisa download gitu?

34:06- Enggak, mungkin mereka punya produk laptop? Netbook? Enggak tau.

34:13- Google Play, oh apa ini? Kan sekarang Windows udah bisa install Google Play kan? - Iya, betul.

34:22- Bisa jadi, bisa jadi. - Oh, tagline-nya Akamai, peace for all.

34:28- Bagus tagline-nya. - CDN ya, peace for all.

34:34- Maksudnya dia semua produk ada ya, semua produk adalah kompetitor, jadi peace. Peace ya, maap ya. Kita punya produknya semua.

34:43- Dan Akamai itu ada note, sudah ada semenjak sebelum Amazon atau Google Cloud masuk, sudah ada.

34:53- Saya waktu ngadain acara di salah satu data center, ngobrol-ngobrol sama orang data center-nya,

35:06"Kita Akamai di sini loh." - Iya, udah duluan.

35:12- Cuma gak boleh sebut nama tempatnya, jadi ya nanti jadi kalian tau gimana.

35:17- Salah satu yang cukup terkenal juga itu, apa namanya, video platform.

35:25Jadi kalau misalkan temen-temen mau bikin Youtube, bikin Youtube atau bikin... - Kompetitor Youtube.

35:31- Hampir semua TV, hampir semua TV ada platform-nya, ya video.com atau RCTI+. Nah itu mereka punya servisnya di sana untuk streaming.

35:47- Pikin TV, paket bikin TV, bikin streaming servisnya. - DRM, ya misalkan supaya gak dibajak gitu kan. Nah itu mereka punya banyak lah pokoknya.

35:57- Oke, oke. Apa lagi nih yang menarik? Nah di CSS sendiri ada beberapa fitur yang masuk baseline ya, kalau gak salah ya.

36:09- Banyak, banyak. - Yang menarik-menarik aja.

36:14- Yang di-announce di keynote nih kemarin, ada size container queries. Nah mana ya?

36:22- Gak nemu, apa belum sempet cari link-nya sih. Intinya yang di-announce pertama kena major yaitu size container queries itu tuh udah masuk semua browser.

36:33Nah kita kan kayaknya kalau size container queries nih bersejarah nih, karena kita pertama kali banget ngobrolin web, belum bikin show-nya ya.

36:43Pertama kita ngobrol tentang fitur web, dan ternyata langsung semangat, langsung nyambung bertiga itu tentang container queries.

36:50- Itu 2 tahun yang lalu kan ya? Nah itu kan baru masuk Chrome, tapi udah stable di Chrome. Jadi maksudnya kita pas itu semangat karena udah stable di Chrome, berarti ya...

37:01- Enggak lah, waktu itu kita sudah bahas karena dia sudah disupport sama 3 browser. - Yang ini size-nya?

37:11- Container query kan? - Size container queries. - Berdasarkan size. - Kalau ini beda lagi, ada update subset-nya kali?

37:20- Beda lagi kayaknya. Subset-nya kayaknya... - Nggak, ini udah baseline. Udah baseline berarti 2 versi, stabil terbaru.

37:30- Container query dan size container query itu hal yang sama. Atau fitur salah satu? - Container queries berdasarkan size.

37:38Ya yang di-nounspornya masuk baseline itu size container queries sih. Coba aja cari di blognya, kita cari.

37:48Intinya itu hasil dari... udah masuk interrupt juga. Jadi sebelumnya di state of CSS survey, banyak developer yang vote fitur itu.

38:032023 masuk interrupt, jadi emang digodok banget sama semua browser biar stabil di seluruh browser itu. Sekarang udah masuk baseline.

38:15- Nah di sini ada tuh, using container query ada size inline, size dan normal. - Ya semua itu sih kayaknya ya, harusnya.

38:25- Tapi ini belum ada widget baseline-nya ya? - Iya iya, kenapa belum? - Kalau di ini ada, kalau di... kalau di Can I use ada...

38:36- Oh Can I use ada? - Ada... ada... ada... container query. - Container query.

38:50- Belum itu? - Jadi unit ini, wait ini query unit, ini container size. - Nah tuh udah ada centangnya.

38:58- Kalau... - Ya update ya, karena pakai widget. Masih bahas widget.

39:03- Oh nggak ada ya. Jadi memang ada bagian-bagiannya, container query doang. Ini ada units, ada size.

39:12- Nah unit tuh mungkin pakai itu ya, yang kayak itu tadi qvhqvnato. - Tapi ini belum ada baseline-nya juga ya? Belum masuk kali ya?

39:27- Belum, belum masuk. - Belum, belum masuk berarti. - Tapi ini udah ijo loh. - Ya udah ijo kan, tapi belum masuk baseline.

39:34- Ya belum, harus dua versi stabil terakhir dari semua browser major. - Iya, iya bener-bener. Nah ini limited ya.

39:42- Belum ini. - Oh ini beda ya, container query sama container query beda? - Beda. Ini unik lagi, ini style punya berdasarkan style atau CSS class yang dimiliki elemen lain.

39:54- Ya gitu deh, ribet. Dan emang belum. - Ini ya, container query ya. - Iya. Itu yang di-announce yang major.

40:04- Kecuali teman-teman punya user yang menggunakan QQ browser, Baidu. - Baidu. Itu mah ditinggal aja.

40:13- Belum tentu. Karena bisa jadi kan, itu akamanya kan belum tentu masuk China ya. Jadi ya belum tentu. Jadi kita nggak tahu juga kan. - Opera Mini.

40:25- Opera Mini. - Kalau di Opera Mini kayaknya udah tinggal aja karena sudah lewat masa symbian.

40:35IE juga udah ditinggalkan kan. Soalnya udah stop kan. Developmentnya udah stop kan. Sekarang ke Edge kan.

40:43- Dan kalau misalnya ada corporate yang jaman batu gitu yang birokrasinya nggak boleh ngupdate sama sekali, masih pakai itu,

40:51kan mereka udah terbiasa untuk nggak mungkin mengakses situs modern yang up gitu kan. Paling buat akses dokumen doang kan.

40:59- Kalau pun ada, nggak usah dipikir. - Masih ada pemakaiannya seperti ini loh.

41:06Kalau kayak EAT ya kasusnya itu yang saya tahu pernah cerita. Kayak di kampus yang lab gitu loh lab atau reset gitu.

41:17Kan mereka punya mesin labnya yang gede, ya kan. Dan itu mungkin sebut saja ya Microsoft, ee Microsoft.

41:29Mikroskop elektron misalnya. Yang itu dibuatnya tahun lama banget dan mikroskop itu masih berguna, masih dipakai gitu.

41:45Dan hanya bisa diakses untuk ngambil data atau interfacenya itu mereka bikinnya pakai EA dengan appletnya.

41:55Jadi ya masih dipakai kadang-kadang. Itu hanya untuk komputer di lab.

42:04- Buat buka Crystal Report tuh. - Bisa jadi, bisa jadi Crystal Report. Masih ada nggak sih Crystal Report?

42:12Crystal Report itu yang library buat ini kan buat printing kan. Iya buat bikin reporting kayak PDF.

42:24- Kayak PDF. - Oh itu sebelum ada PDF ya?

42:28- Nggak sudah ada PDF tapi another standard. - PDF belum seopen sekarang.

42:33- Punyanya Microsoft. - Dan PDF dulu bikin PDF itu susah karena kayaknya spesifikasinya belum ada, belum banyak yang explore kesana.

42:43- Belum jadi seperti standard sekarang. - Bisa jadi tuh kata Mas Rafki buat mapping ECU mobil tua.

42:49Yes itu betul. Jadi kalau mobil tua, mobil kan ada komputernya, kalau mobil Eropa itu ada microkontrolernya dan untuk connect kesitu bukanya pakai browser.

43:05- Oh gitu. - Jadi masih ada gitu.

43:11- Iya masih ada tapi nggak membuka website baru kita. - Iya ngapain bikin pakai container query, pakai table aja kalau yang jaman gitu mah.

43:23- Dan kalau kasus-kasus use case kayak gitu kan udah ada spesifik. Pasti itu cuma dibakai buat buka website A, B, C kayak udah nggak buat use case lain-lain lagi kan.

43:36- Betul. Dan kalau mau diupdate ya nggak bisa juga kan diupdate. Yang susah itu adalah kalau download EA aja sudah dihilangin gimana coba.

43:48- Sekarang disuruh download Edge kan pasti. - Tetap ada mirror-mirrornya ada kok kayak.

43:58- Tapi kan sekarang udah lebih streamline lah. Kalau dulu bayangin ada sebuah job search yang mengharuskan kita menggunakan browser tertentu.

44:09Jadi begitu kita buka tiba-tiba browser Anda tidak kompatibel. Silahkan download browser ini.

44:16Kalau sekarang ada yang ngatur-ngatur gitu dimarahin kali ya. Ya kalau dulu cara kerja gitu karena kan website di dunia nyata juga emang gitu kan.

44:28This site is best viewed in Internet Explorer atau Netscape Navigator. Website-nya pun ngatur-ngatur, maksudnya website di production pun ngatur-ngatur kayak gitu.

44:38Jadi emang standar behavior-nya kayak gitu. - Masih ada mirror-nya tuh. FileHippo.

44:48- Udah. Download Internet Explorer 6. Ini jadi wilayahnya sejarawan. Ini kalau anak kuliah jurusan sejarah disuruhnya.

45:04- Itu apa? - Sejarah internet ya.

45:08Nah ini CSS nesting yang kayaknya major diumumin sudah masuk baseline. Baru saja masuk baseline namanya ini.

45:18Dalam arti didukung oleh semua major browser dua release tabil terakhir CSS nesting.

45:25Nah ini masuk internet 2024 juga. Jadi apa? Diperbaiki dan di-streamline kan. Dibuat konsisten.

45:33- Ini masih newly available ya? - Nggak. Newly available.

45:39- By the time ini sudah widely available, ini bisa mengurangi ukuran kita tetap bisa menulisnya di SAS.

45:54Tapi saat di-compile di post-processor nggak perlu lagi dibikin banyak. Jadi nestingnya tetap saya yakin.

46:03SAS compiler nanti dia akan keep nestingnya. Jadi ukuran CSS SAS-nya bisa jauh berkurang.

46:13- Iya betul juga. - Nah ternyata sekarang disarankan install Chrome untuk beberapa ujian online.

46:23Kayaknya ada beberapa website juga yang menyarankan pakai Chrome. Dulu kalau nggak salah salah satunya ini.

46:30Streamyard yang kita pakai ini dulu kalau nggak salah menyarankan Chromium Base.

46:35Kalau nggak salah. Ini juga sama ya. Jadi Chrome is the new EA ya.

46:45- Tapi sebuah nggak sih kalau misalnya diatur-atur begitu? - Bukan. Maksudnya didominasi kan.

46:54Didominasi oleh EA. Kebetulan waktu itu kalau nggak salah ya ini tolong dikoreksi ya.

47:00Jadi si job portal yang saya ceritakan tadi itu menggunakan teknologi yang sama dengan browser-nya.

47:09Jadi mereka menggunakan .NET dan lain-lain yang kayaknya hanya available di EA gitu.

47:17Jadi hanya bisa dibuka di EA. - Nah mungkin kasusnya Chrome itu mereka pakai Meet.

47:23Pakai Meet kan kalau misalnya mungkin ada sesi yang pakai Meet atau Google Meet atau teknologi sejenisnya.

47:33- Google Meet ya benar-benar. - Yang lebih optimal kalau di Chrome.

47:39Jadi misalnya ngindarin, preemptively ngindarin in case tiba-tiba ada yang nge-bug di tengah-tengah

47:45daripada repot ya udah disuruh pakai Chrome. - Mungkin ada teknik...

47:48- Tapi idealnya audio dan lain-lain yang lebih optimize di browser tertentukan.

47:55- Tapi idealnya jangan sih. Maksudnya kalau di dunia yang ideal semua web standar harusnya disupport semua.

48:02Nah terus aneh tapi nyata nih ternyata nesting itu udah ada di Tailwind, native CSS nesting.

48:10- Oh iya? - Tuh, coba buka di private chat.

48:16Ya maksudnya CSS nesting yang kayak gini nih. - Udah di-support sama mereka gitu maksudnya.

48:22Udah lama. - Tailwind alpha, itu Maret 2004.

48:27Ini alpha sih, cuma misalnya Tailwind itu dia nggak akan ngadopsi ke core Tailwind-nya

48:34kalau belum standar web API. Maksudnya belum masuk standar CSS yang standar.

48:40Itu tuh tuh di-highlight. - Oh iya ampun, nggak kubaca.

48:47- Oke. Menarik, menarik. - Tapi masih alpha.

48:53Keliatannya belum nyoba juga sih. Cuma maksudnya berarti emang ke arah situ bakal widely supported.

48:59Ini kan lepas dari kita pakai Tailwind atau nggak, ini kan salah satu pemain major di ekosistem CSS ya.

49:07- Betul, betul. - Ini indikator juga.

49:11- Update berikutnya, color mix. - Color mix itu sebenarnya kita pernah bahas.

49:19Kita pernah bahas dulu, cuma yang sekarang udah masuk besain itu enak sih. Jadi mencampur atau menggabungkan ya gitu.

49:26Menggabungkan warna dengan bahasa yang familiar, apa, human friendly banget sih.

49:32Jadi kayak color mix, plum itu warna ya. Plum 40% dicampur pink.

49:38Itu kan kayak human banget kan, kata apa, itunya. - Tapi jadi susah nggak sih?

49:46- Nggak, gue kadang-kadang nggak ngerti warna sih ya, jadi susah.

49:50- Bukan, justru ini buat developer itu tuh. Coba scroll atas, scroll atas.

49:55Scroll atas, ini ya, scroll bawah dikit.

50:00Ya buat apa ya, kalau yang ngerti warna mungkin bisa dengan gampang ngebayangin HSL itu,

50:07misalnya kita pengen warna lebih cerah itu apa halnya jadi gimana, S-nya lebih gimana, L-nya gimana,

50:13atau RGB, G-nya ditambahin, R-nya dikurangin. Nah kan itu abstrak ya.

50:18Kalau ini kan lebih apa ya, lebih deket ke bahasa manusia pada umumnya lah.

50:24Kita misalnya lihat kalau birunya 0%, itu putih, putih dicampur biru.

50:30Birunya 0% ya putih, birunya 25%, jadi kayak apa, birunya dikit lah, biru muda.

50:37Nah kalau 50%, birunya setengah, ya kayak gitu. Kayak lebih deket aja ke pemahaman kita manusia awam.

50:46- Benar, benar, benar. Ini mainannya desainer kali ya. Kan kalau dulu ada di SAS gitu kan kayak ada bikin...

50:59- Iya, ini ada mixing-nya kan biasanya. - Iya ada mixing-nya, iya.

51:03Jadi sebenarnya fitur-fitur CSS yang udah masuk baseline sekarang itu kayak pelan-pelan gusur peran pre-processor.

51:11Jadi kayak diserap ke CSS utamanya. - Ya sama lah kayak di JavaScript juga begitu kan.

51:17- Nah kan dulu semua harus pakai Lodas, ya nggak harus cuma pakai Lodas, JQuery,

51:24lama-lama semua diserap ke ECMAScript sama JavaScript Web API.

51:29Nah kalau sekarang CSS juga. Maksudnya fenomenanya kayak gitu gambaran besarnya.

51:35- Tapi sebenarnya nggak apa-apa kan intinya kan sesuatu yang sudah working dan banyak yang pakai di post-processor,

51:43ya sudah proven, akhirnya diadopsi jadi core, banyak kan.

51:47- Karena terbukti ada kebutuhan untuk itu. - Iya mungkin yang bikin juga merasa tersanjung gitu kan.

51:54- Senang nggak bisa maintain lagi. - Gak perlu maintain lagi juga.

52:00Bener menghilangkan fitur ya.

52:04Oke. Nah kalau saya mungkin kalau dari saya itu nggak terlalu banyak ya.

52:12Baru nonton yang video yang tadi itu yang keynotenya web ya yang tadi kita share.

52:20Dan ya ini fitur-fitur yang update itu ya sebagian besar itu.

52:25Kalau saya mungkin insightnya ini. Jadi sekarang kita balik lagi ya ke AI.

52:33Di Chrome itu sudah ada gemininya. Akan ada gemininya.

52:44- 126 ya mulai berapa sih? - Sudah ada kalau sudah ada.

52:50Apalagi kalau yang pakai Chrome kanari itu sudah ada.

52:56- Kalau def sudah ada belum sih? - Nggak tahu.

53:00Sebenarnya saya udah kalian dapet ini nggak invitasi untuk nyobain?

53:08- Dapet-dapet. - Udah ya. Sebenarnya sudah beberapa bulan atau beberapa minggu sebelum Google I/O udah dapet.

53:17Cuman kan NDA kan nggak boleh diceritakan ke orang-orangnya.

53:20- Iya kalau sekarang udah live sudah boleh. - Dan fiturnya juga belum final kan.

53:25Masih di develop berdasarkan feedback kita.

53:29Nah ini apa? Ini adalah AI untuk membantu kita memahami error code. Error message.

53:39Jadi misalkan kalau kita klik terus tiba-tiba fail to fetch gitu errornya.

53:44Di kanan atas ini ada gambar bohlam.

53:49Ya gambar bohlam gitu. Understand this error kemudian continue. Nah dia akan coba menjelaskan. Something went wrong.

53:59Kalau dia error siapa yang jawab ya?

54:03Oh ini error reception nggak sih?

54:07Ada error kita minta AI buat nerangin. AI-nya juga error.

54:16- Ini keren sih. Ini ko cat. - AI-nya error.

54:20Untung nggak muncul itu lagi dalamnya. Untung nggak muncul lightbulb lagi dalamnya.

54:25- Ulang ya, ulang ya, ulang. - Cari arti error ini.

54:27Git glitz aja. Udah-udah ini glitz.

54:30Console message, continue. Bener kan? Iya error. Gemininya lagi error.

54:37Jadi intinya adalah kita bisa dijelaskan tentang course policy, no access control origin itu kira-kira apa, dan ada solusinya ya?

54:49Ada solusinya nggak sih?

54:51- Ya harusnya ya. - Iya, sebaiknya.

54:55Kasih solusi ya. Kita lihat di yang lain ya. Itu kan contoh ini kan. Ini ada warning. Ini warning ya, bukan error ya.

55:03- Error semuanya berarti. - Error semua.

55:07Lagi down ya berarti ya. Jadi nggak bisa demo.

55:11Setiap demo itu pasti error ya.

55:15Chrome versi 126.

55:19Satu lagi yang menarik adalah tentang web GPU.

55:24Wait, wait, wait. Kalau ada saingannya dari sisi gedung sebelah.

55:36Ada yang bikin NPM-nya.

55:40- NPM. Ini community library ya. - Oh community notes itu.

55:48Community library NPM package untuk bisa ngedetect debugger di DevTool.

55:56- Jadi kalau ada error bisa pakai open. - Terparti ya?

56:00- Iya, terparti. Mirip lah. - Kalau ini first party.

56:04Eh, tapi gue bisa nih. Baik-baik aja. Coba ya share screen gimana caranya.

56:10Wait, gimana caranya. Share screen. Chrome tab.

56:18- Mungkin Chrome saya yang error. - Window.

56:25- Kanari sih, Chrome yang masih dijalan kan kanari tuh. - Iya, kanari masih banyak error ya.

56:31- Pakai yang dev, kalau saya kan yang dev lebih stabil sedikit daripada kanari. - Itu bisa.

56:37- Ini apa? Chrome apa? Stable? - Ini stable. Chrome 125 stable.

56:43- Ini biasa? - Iya, biasa 125.

56:47Jangan-jangan begitu didemoin gak bisa nih. Coba kita lihat ini.

56:51- Understand this warning. - Yang error aja.

56:55- Ya bentar. - Weee, keren.

57:00Error with permission policy occurs when bla-bla-bla in this case.

57:08The error occurs because the browser does not fix the error, bla-bla-bla.

57:17- There are some additional tips. Jadi dikasih tips. Coba ya kita lihat. - Coba-coba.

57:21Wait, data used to understand this message. Jadi transparan ya.

57:26Ya ini data ini saja yang dikirimkan. - Data yang dipakai buat konteks.

57:34- Yang dikirimkan ke Jemenainya, cuma data itu saja.

57:38- Secara sederhana sebenarnya ini apa ya, memudahkan kita daripada copy paste ke Gemini atau Pneka, atau chat GPT kan.

57:47- Ke Stack Overflow dan lain-lain. - Ini pakai Jemenai Flash kan ya.

57:55Kalau nggak salah. - Flash itu yang bisa di embed ya?

57:59- Paling ringan. Iya paling ringan. - Paling ringan.

58:02- Di embed di dalam browser, di dalam Chrome sendiri ya? - Iya.

58:08- Oh, jadi semakin gede dong ya. - Iya, kemungkinan ya.

58:15Nah ini nih. Content security policy, ad blocker, privacy settings.

58:22Eh tadi apa URL-nya yang buat nge-check? - Di private chat.

58:29Bubble Jingle.

58:48Coba nama itunya NJ Bobba. - Dibikinya pakai angular ya.

58:55- Iya, dari namanya. Yaa fail to fetch. Nah coba.

59:03- Harus ini ya, harus ada yang diaktifkan ya ininya ya, flag-nya ya. - Iya, flag-nya.

59:13- Hah, nggak, ini nggak aktifin flag apa pun. - Waktu uji-coba kan harus kan.

59:23- Waktu ini kemarin. - Oh iya.

59:27- Has been blocked by course policy. - Oke, mau bisa nih.

59:33The error message indicates that the browser has resource, but the server hosting that resource has not provided the server-nya.

59:47Course adalah blablabla. Oh dikasih ininya lagi, code snippet-nya buat akses.

59:54Ya beneran dikasih code-nya, server-nya harus. - Disarankan untuk update si server-nya ya.

1:00:03- Pake header ini. - Dulu gue pas sebelum ngerti cost itu apa, pas develop juga pake extension sih.

1:00:23Kenceng, keren kusingnya. Kusing sendiri. Data used to understand this message.

1:00:33- Cuma ini yang dikirimkan ke Gemini ya, berarti ya data itu ya, data error-nya ya.

1:00:39- Udah nih, error-nya pilihannya satu ini doang. - Udah.

1:00:45- Oke. Update terakhir dari saya itu adalah yang cukup lumayan ini ya.

1:00:56Kalau teman-teman ngikutin web GPU, sekarang udah bisa jalanin LLM.

1:01:06- Demo, oke. - Demo, demo, demo.

1:01:11- Ada demo-nya di bawah, tenang-tenang. - Oke.

1:01:15- Itu berarti di browser kan ya, pake GPU. - Di browser, jadi semuanya jalan di browser.

1:01:19Asli lihat ini web GPU. Ini contohnya nih, kita bisa pilih GEMA misalkan,

1:01:26mau yang berapa, 2B, nggak tau nih apa bedanya ya. - Yang 2B aja 2B. - Oke.

1:01:41- What is course? Oh, nggak bisa dienter. Nggak bisa dienter, nggak bisa di-send.

1:01:50- Oh belum, dia lagi patching. - Wah, habis nih bandwidth.

1:01:56- Ini gabungan dari web GPU sama WASMD ya, kalau nggak salah.

1:02:02Ada GitHub-nya juga, jadi kalau teman-teman mau jalanin model-model LLM3, GEMA atau Mistral,

1:02:10yang open ya, yang open access itu, sekarang bisa pakai web GPU.

1:02:15- Gede banget ya kalau misalnya minta user download, kalau nggak salah, GEMA itu 2GB deh,

1:02:25kalau nggak salah, yang kecilnya ya. - Ustah.

1:02:28- Yang flash ya. Tapi belum ada ya GEMA yang flash ya, baru ada Gemini flash ya.

1:02:36- Baru Gemini yang flash, GEMA nggak ada yang flash. - Belum ada.

1:02:42- Models with 1K suffix signify 1024 context length, lowering 2-3GB VRAM.

1:02:54Feel free to start trying with those. Yang -1. Yang ini ya berarti ya, salah kita, salah pilih.

1:03:03- Itu ditanya. Yang kecil aja, cari yang kecil. - Udah keburu download apa, nggak bisa diulang?

1:03:15Refresh aja. - Iya tuh. Download lagi.

1:03:20- Udah lama aja, oh udah. Biarin. Apa itu? - Biarin ya. Error.

1:03:26- Not enable. You can try, look. Tadi bisa. Apakah gara-gara yang -1. - The model.

1:03:36- Oh bisa lanjut. Wow, keren. Berarti di local, gimana aja download ya, local storage ya?

1:03:46Oh itu ada pernyataan dari Tomoto. Bagus tapi berat nggak sih webnya, case study-nya gimana?

1:03:53Ada banyak case study-nya. - Nah di I/O kemarin, ada itunya.

1:03:58Maksudnya itu salah satu konten yang banyak juga di I/O kemarin. Cuma saya nggak ngerti.

1:04:06Coba deh buka tuh, di private chat. Itu ada artiklenya sama ada videonya dari I/O kemarin.

1:04:13- Privacy. Yang pertama dan yang utama adalah privacy. Data tidak dikirim ke server.

1:04:19Datanya hanya di client. Jadi data customer itu aman. Availability.

1:04:27- Bisa kalau mau bikin PWA. - Dan downloadnya sekali ya.

1:04:32Ya, downloadnya kan sekali. Habis itu udah, kecuali kita clear cache kan ya.

1:04:37- Ya kalau download jadi kayak PWA kan, atau di embed, bisa jadi kan?

1:04:43- Sekali download doang. - Oke sebentar. Ini downloadnya dimana ya?

1:04:49Application? Local storage?

1:04:53- Nggak sih. Set storage? Eh nggak sih set storage beda. Set storage beda lagi.

1:05:03- Ini, ini, ini. - Itu wasm. Config wasm.

1:05:13- Beda ya? - Ini? Gede-gede ini?

1:05:17- Iya itu tuh modelnya tuh. Betul. Betul sekali. Modelnya satu-satu.

1:05:24Ada dua tuh. Satu lagi modelnya. Click-click yang bawah tuh modelnya. Itu kan wasmnya.

1:05:29Satu lagi modelnya. Ini dia. Ini modelnya juga di ini namanya, apa istilahnya ya, di split, di chunk.

1:05:45Ini nggak satu finish. Pakai NVIDIA laptopnya. Keren banget.

1:05:54- Ini PC, yang ini PC. - Keren banget.

1:05:59- Bukan laptop. Satu giga loh downloadnya. Coba ya, what is this?

1:06:06- Explain. - Explain about course.

1:06:11- About course. Like? - Like I'm 5. Terus dia jawab,

1:06:18anak umur 5 tahun nggak usah ngurusin course. Main layangan di luar sana.

1:06:28- Ini jalannya lokal. Keceng kan. Itu salah satu keunggulannya.

1:06:37- Kan nggak perlu khawatir, nggak bisa ngabisin token ya.

1:06:41- Coba-coba. Bisa nggak ini Mas Riza? Sesuatu yang real life ini. Tunggu selesai dulu deh.

1:06:48Real life question, contohnya.

1:06:55Bukan, bukan. Gini aja, yang lebih umum aja. Please compare between Toyota Innova Xenics hybrid

1:07:14versus Toyota Yaris Cross Hybrid with a table... versus, versus Yaris Cross Hybrid.

1:07:28- Yaris Toyota juga kan? - Iya.

1:07:31Yaris Cross Hybrid with specification table and comprehensive.

1:07:44Comprehensive table. Comprehensive table for the specification.

1:08:09Nah, coba. Pengen tahu.

1:08:19- Gak bisa. - Ah, gak ada.

1:08:22- Harus kasih. Harus kasih. - Mobil lama, mobil lama.

1:08:25- Mobil lama, mobil lama. - Nggak bisa yang gitu-gitu.

1:08:28Kita harus provide sendiri. Kayaknya ada data-nya.

1:08:30- Iya, nggak ada dia data-nya. - Kan ini yang di-compress.

1:08:34Nggak usah minta apa-apa macam. Suruh nulis resep coba.

1:08:39- Resep apa? - Ya terserah.

1:08:42- Gado-gado, gado-gado. - Gado-gado, gado, gado.

1:08:48- Nggak bisa. - Tapi dia AD sih. Tahu dia tuh resipi.

1:08:58- Iya, bener-bener. - Diskriminasional.

1:09:04- Ini nggak inklusif dia. - Iya, mau inklusif 100 giga.

1:09:11Ini 1 giganya.

1:09:19- Iya, pakai gemini baru bisa ya. Bener, bener, bener.

1:09:23Ini ringan loh, web-nya ringan. Jadi pas proses download-nya aja

1:09:29yang mungkin agak berat tergantung. - Ya, download-nya 1 giga.

1:09:32Makanya di video yang IO itu juga ada tuh. Coba deh buka.

1:09:36- Coba baca bawahnya itu. Preview-nya 17 token per second.

1:09:41Lumayan cepat loh. Maksudnya untuk web ya.

1:09:44Untuk web sih oke lah. - 11,3 token per second.

1:09:50Token itu kayak satu kata kan. - Sekian kata.

1:09:54- Sekian kata lah ya. Sekian kata. Sekian kata.

1:09:56- Bukan sih. Token itu konteks sih. Tergantung konteks.

1:10:05Satu kata yang bermakna itu lebih tepatnya token.

1:10:12Bisa jadi itu 2 kata, bisa jadi 3 kata, tapi satu konteks yang bermakna itu token.

1:10:17Ada stable diffusion juga yang versi web. Keren sekali.

1:10:23- Daruh lagi. - Satu-tiga lagi.

1:10:28- Udah cukup. Ini harus pakai Chrome Canary ya demo.

1:10:33Langsung generate ya. Ini bisa di-click. - Iya, download tuh.

1:10:39- Anyway. - Lagi di-click.

1:10:43- Kalau kita lihat gambar besarnya, berarti ini bakal makin banyak ya.

1:10:49Besok-besok AI on-device, yang khususnya yang di-browser.

1:10:54Makanya itu ada si video AIO yang tadi kan. Practical tips untuk AI on-device.

1:11:00- Ada tutorialnya gak sih Mas Jay? Apa itu jadi ininya gue ya?

1:11:04Tertarik juga gue untuk ngulik. - Nah buat materi IOX.

1:11:09- Ada use case satu lagi yang kepikiran nih.

1:11:12Kalau kita bikin Chrome extension, terus pakai web GPU LLM, jadi bisa lokal.

1:11:18- Bisa. - Gak perlu konteks server.

1:11:21- Berarti bisa pakai Chrome extension 3 tuh, version 3 sekaligus.

1:11:25- Sekaligus. Jadi 2 topik tuh.

1:11:28Gimana cara bikin Chrome extension yang versi 3 plus menggunakan LLM.

1:11:34- Yang bawa model. - Oh berarti 3 topik, bukan GPU.

1:11:37- 3 topik langsung. - Nah kan itu juga udah di-improve kan,

1:11:42Wasm sama web GPU. Ada tuh, coba buka artikelnya tuh.

1:11:47- Oke. Kalian pada mau ini topik apa?

1:11:52- Belum dapet ide, kontek ganti, terus ini tiap ngobrol ganti topik.

1:11:57- Justru kita mau ngobrolin malam ini supaya dapet ide.

1:12:01- Dapet ide topik. - Buat AIO Extended.

1:12:05- Ini ya. Accelerate web with, accelerating web AI.

1:12:13- Jadi Wasm sama web GPU-nya tuh kayak semacam di revamp lah.

1:12:18Diperkuat sih untuk memproses yang kayak gini.

1:12:26Maksudnya berarti kan ini bakal, kedepannya makin banyak dipakai ya, makin kamen.

1:12:31- Nah ini di-enhance lah. - Asik sih, karena gue pernah bikin

1:12:37yang sama, yang jaman dulu yang masih pakai TensorFlow.js.

1:12:42- TF Lite, kalau yang on-defense.

1:12:45- Iya pakai TensorFlow.js, modelnya gue compare ke TF Lite

1:12:52dan dibuat jadi Wasm, di-load-nya pakai Wasm.

1:12:56Jadi kayaknya mau menghirupkan lagi ke ulikan jaman dulu.

1:13:02Ambil nggak ya? - Jadi kalau misalkan...

1:13:06- Jalan-jalan Mas Liza mau ambil ini? - Enggak.

1:13:09- Mas Liza mau ambil ini? Belum? - Enggak.

1:13:12Mungkin akan membahas tentang web GPU tapi nggak sampai sini.

1:13:18Tadinya rencananya itu pengen banget bahas tentang web GPU, terus hello world lah web GPU.

1:13:25Cuman kan nggak ada use case ya, kecuali gamers gitu yang bikin game, gitu kan.

1:13:30Ada. Kalau ini kayaknya masih bingung dengan...

1:13:34- Itu yang skeleton... - Gampang ngading GPU masalahnya.

1:13:37- Skeleton dance itu aja yang kayak tangannya bisa...

1:13:41- Yang TensorFlow. - Kalau mau ngambil silahkan.

1:13:45Jadi in general, ini ya jadi parasitekturnya.

1:13:51Kalau misalkan kita biasa pakai TensorFlow.js itu dia running-nya di CPU kan.

1:13:56Kalau ada GPU available, mungkin dia akan lari ke sini.

1:14:00Sederhananya gitu. - Berarti tergantung device-nya user kan ya?

1:14:05- Betul. Ada Wasm-nya dia. - Oke.

1:14:12- Menarik ya. - Kalau si itu udah bikin squash bisa upscale.

1:14:22Bisa upscale image atau nggak sih dia? Atau dia cuma downscale?

1:14:26- Bisa, bisa. - Bisa upscale?

1:14:29- Downscale. - Upscale?

1:14:31Apa gue bikin itu aja ya, pakai GPU bikin upscale image ya?

1:14:36Satu contoh aja. Upscale pakai AI.

1:14:42- Kaboom.js. Kaboom.js itu apa? Tomato?

1:14:48- Kayak pernah dengar kaboom. - Buat game ya? Game engine ya?

1:14:53- Coba buka. - Game Programming Library.

1:14:58- Iya, Canvas. Betul, pernah dengar ini.

1:15:01Ada satu game engine yang mau mengadopsi web GPU namanya apa ya? Lupa.

1:15:09Kemarin itu udah sempet kita bahas sekilas kalau nggak salah.

1:15:13- Genian ya itu? Ini si kaboom. - Iya.

1:15:17- Bukan. - Bukan, bukan. Yang lain, yang lain.

1:15:20Apa ya?

1:15:25Coba tanya si Jemana.

1:15:31Buat game engine?

1:15:37Ada 2D-nya, ada 3D-nya. Game engine.

1:15:42Game engine. Kok nggak ada Haiku? Bukan.

1:15:48Kokos 2D? Kokos.

1:15:52Bener nggak kokos?

1:15:56- Kayak baru pernah dengar. - Benar, benar, ini kokos.

1:16:012022. Kokos kreatornya yang pakai web GPU ya?

1:16:15Kata si akun Phaser tuh. Phaser kah?

1:16:27Phaser? Bukan. Ini kokos, bener kokos.

1:16:31Yaitu berarti game bikinannya bisa di compile untuk web.

1:16:39- Kreator berarti ininya ya? - IDE-nya.

1:16:47Waktu gamenya nggak tahu bisa di compile ke mana gitu ya?

1:16:51Itu kayaknya tadi maksudnya dia bisa mengekspor game yang dibikin di situ, di Kreator itu untuk web deh maksudnya.

1:16:58Kalau lihat dari penjelasan di paragraf paling bawah tadi.

1:17:02Jadi mungkin bisa di deploy, bisa di publish untuk web game hasil buatan di kokos Kreator itu.

1:17:10Oh bener, bener, bener. Coba kita lihat.

1:17:14Iya bener, ini ada ni. Ada, apa namanya, ada screenshot-nya. Platform, web, desktop.

1:17:27Tapi ini benar-benar itu ya, game engine yang full blown ya, semua yang lengkap gitu ya.

1:17:40Kokos 2DX. Ada 2D, ada 3D-nya berarti.

1:17:45For building web desktop.

1:17:59Tapi pertanyaannya, kalau misalkan device user-nya nggak punya GPU?

1:18:07- Iya nggak. - Nggak kuat. Pake CPU.

1:18:15Terus tulis, not supported.

1:18:17Bukan, jadi fallback kan tadi ada yang di diagramnya Mas Liza?

1:18:22Oh itu bisa otomatis jalan di main thread JavaScript biasa ya?

1:18:28- Harusnya ya. - Oh, belum pernah party soalnya.

1:18:34Apa, webmlc.ai? Coba buka di laptop masing-masing. Bisa apa nggak yang tidak ada GPU-nya?

1:18:44Harusnya bisa. Karena Gemini, eh Gema kan nggak terlalu besar ya.

1:18:50Nggak terlalu berat lah gitu. Masih bisa dijalankan di CPU gitu maksudnya.

1:18:59Oh tapi dari segi bahasa, sama persis ya berarti?

1:19:04Skript-nya interaksi sama engine-nya itu aplikasi web GPU itu nggak ngaruh ya berarti sama aja.

1:19:16Benar juga. Apakah berpengaruh atau nggak? Itu yang pengen di eksplor sebenarnya.

1:19:25Maksudnya apa ada hal yang bisa diakses atau nggak bisa gitu?

1:19:30Kalau dari web GPU misalnya bisa akses grafik yang kayak gimana gitu.

1:19:36Itu harus coba sih ya.

1:19:39Iya, ya itu. Kan sekarang ada bahasa-bahasa pemrograman yang running langsung untuk GPU kan?

1:19:47Karena berbeda kan, arsitekturnya berbeda kan.

1:19:50Jadi kemungkinan web GPU kalau mau itu ya jalannya dengan bahasa pemrograman yang berbeda.

1:19:58Nggak bisa kayak aplikasi kita yang udah kita pikir 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, ya makanya kayaknya nggak bisa deh.

1:20:14Iya, beda dunia kayaknya.

1:20:17Oke, ada lagi yang menarik? Topik-topik yang menarik yang mau disampaikan?

1:20:27Kalau yang CSSQI dari Mbak Unar bagus nggak?

1:20:30Banyak, banyak banget. Kayaknya kita bikin episode, nggak semua sih, masih banyak lagi.

1:20:37Besok-besok aja bikin episode terpisah, nambah-nambahin topik kan.

1:20:41Nggak, soalnya banyak tapi perintilan kecil-kecil. Kalau yang paling notable ya itu tadi nesting.

1:20:48Terus view transition juga yang multi-page.

1:20:53Nah itu yang khusus UI satu episode sendiri aja itu.

1:20:59Spekulasi rules juga kita belum bahas nih yang di browser ya, yang buat fitur browser-nya.

1:21:06Itu bisa dibahas lebih dalam. Iya banyak lah sebenarnya topik yang paling banyak justru dari UI kan.

1:21:15Salah satu yang banyak. Cuman kecil-kecil ya perintilan ya.

1:21:19Iya banyak.

1:21:22Oke, gimana cukup malam ini?

1:21:28-Sip, cukup. Udah satu setengah jam juga kan? -Iya. Kayaknya udah kepanjangan.

1:21:36Mau saya ditungguin ya si stable infusion ya. -Mau mandi.

1:21:40-Bisa selesai. Masih 21% bisa ditungguin.

1:21:43Oke, kalau gitu. Terima kasih banyak buat semuanya yang sudah meramaikan malam hari ini.

1:21:48Mudah-mudahan udah kebayang ya topik-topik menarik yang dibahas di Google I/O.

1:21:55Kalau teman-teman punya topik menarik juga, untuk dibahas lebih lanjut, boleh ke GitHub-nya kita?

1:22:02-Belum. -Mana dia? Belum. Sabar.

1:22:05Ini, kesana.ins/ngobroinweb.

1:22:08-Jadi Heng gara-gara dong ke stable infusion lah.

1:22:11-Siapa tahu bisa jadi inspirasi buat saya atau Ivan atau Eka untuk membahas di Google I/O Extended

1:22:20di kota-kota terdekat teman-teman ya.

1:22:22-Terdekat atau terjauh? -Karena kita masih bingung mau bahasa apa.

1:22:25Kalau Eka mau bahas view transition lagi, masa itu lagi-itu lagi.

1:22:31-Tahun lalu dia. Ada yang baru. -Saya mau bahas Wasm juga ada tambahan.

1:22:36Tapi masa Wasm lagi, pengen yang lain.

1:22:39Kita lihat aja nanti gimana.

1:22:42Videonya juga belum semua kita tonton karena banyak banget.

1:22:45Justru obrolan malam hari ini yang bikin siapa tahu ide-nya muncul dari sini

1:22:52dan siapa tahu ide-nya muncul dari teman-teman juga.

1:22:55Untuk malam ini segitu dulu aja.

1:22:58Kita ketemu lagi minggu depan dengan topik-topik yang berbeda.

1:23:02Selamat malam. Selamat istirahat. Bye bye.

1:23:05Bye bye.