Ngobrolin Web API Baru - Ngobrolin WEB

1:39web API, baik itu HTML,

1:42CSS, ataupun JavaScript.

1:45Yang disediakan oleh browser.

1:49Jadi web API ini bukan

1:52REST API ya. Bukan

1:54service.

1:56Kayak Swapie, bukan ya.

1:58Ini API

2:00yang bisa kita gunakan secara

2:02untuk programming.

2:04Ya, bisa buat macam-macam.

2:06Contohnya.

2:08Local storage itu.

2:10Storage API lebih tepatnya.

2:14Storage API,

2:16Performance API,

2:18Observer API,

2:21Ya kan?

2:23Dan lain-lain.

2:25Dan ini sebetulnya,

2:27semua API ini,

2:29bedanya dengan produk lain mungkin ya.

2:31Maksudnya,

2:33fitur-fitur yang khusus browser,

2:35ini beda web API ini kan

2:37berdasarkan standar namanya

2:39spesifikasi. Jadi,

2:41landasannya itu spesifikasi teknis.

2:43Jadi API ini fungsinya blablabla.

2:45Terus,

2:47jadi kayak semacam test case lah.

2:49Kalau

2:51user melakukan ini,

2:53atau kalau misalnya inputnya seperti ini,

2:55maka prosesnya akan seperti ini.

2:57Jadi, itu belum implementasi.

2:59Nggak ada kodingannya sama sekali.

3:01Cuma spesifikasi teknis.

3:03Nah, masing-masing browser,

3:05pertama, bebas

3:07memutuskan untuk mau pakai atau nggak,

3:09mengadopsi atau nggak,

3:11kedua, kodingannya gimana,

3:13implementasi di masing-masing

3:15browser engine, ya bebas

3:17di masing-masing browser. Cuma

3:19harus berlandaskan si spek itu.

3:21Oke, oke. Nah,

3:25kira-kira di 2024 ini,

3:27teman-teman punya

3:29apa ya, punya web API

3:31baru yang udah

3:33dipakai atau yang

3:35menarik, yang kira-kira menarik, nggak

3:37boleh di-share.

3:39Siapa dulu? Eka dulu ya, Eka?

3:43Yang menarik, yang menarik.

3:45Paling banyak catatan.

3:47Nah, yang dibahas duluan malah

3:51bukan yang dicatatan itu.

3:53Sebenarnya paling menarik tetap View Transitions

3:55sih. Nggak, itu kan dari tahun lalu

3:57soalnya. Ini kan

3:59topiknya adalah web API baru.

4:01Nah, kalau View Transitions

4:03itu senangkan pribadi aja

4:05sih dari Defeze tahun lalu.

4:07Topiknya, topik tau gue

4:09bahas itu dan sampai

4:11sekarang udah masuk semua

4:13browser yang level 1. Level

4:151 itu yang client-side.

4:17Nah, cuma kalau yang level 2,

4:19yang server-side lah ya,

4:21antar dokumen, antar link,

4:23tuh sayangnya ya masih belum

4:25terlalu. Tapi udah mulai

4:27ada, ya, udah ada update baru

4:29cuma kalau dari browser lain. Maksudnya

4:31server-side gimana?

4:33Maksudnya antar dokumen.

4:35Antar dokumen, antar

4:37antar path

4:39dalam...

4:41Jadi kalau misalnya

4:43mengunjungi

4:45page yang lain,

4:47dia bisa

4:49nge-transition.

4:51Ya, bisa transition tanpa client-side

4:53JavaScript. Ya, bisa

4:55dikasih. Maksudnya kita define transisinya

4:57seperti apa, tapi tanpa hijack

4:59client-side routing. Nggak usah

5:01pake router client-side.

5:03Itu yang level 2. Cuma

5:05belum semua browser...

5:07Si Chrome-nya sudah bisa?

5:09Chrome bisa. Si Chrome sudah bisa.

5:11Demo, demo, demo.

5:13Belum, besok-besok.

5:15Oke.

5:17Pengen tuh gue liat.

5:19Itu khusus aja

5:21front-end

5:23front-end magic

5:25part 2. Kan kita pernah tuh dulu.

5:27Besok-besok lagi.

5:29Nah, ini yang baru, yang

5:31di topik ini juga front-end magic juga sih.

5:33Popover.

5:35Popover itu sebetulnya

5:37malah implementasinya

5:39bisa dijadikan modal atau toast

5:41atau apapun yang muncul

5:43nongol di layar.

5:45Kan modal itu sudah muncul

5:47duluan kan?

5:49Modal, dialog.

5:51Dialog.

5:53Ini bedanya sama dialog apa?

5:55Beda spesifikasinya. Cuma

5:59nggak tahu sih. Kalau gue liatnya mirip-mirip juga.

6:01Ya, beda peruntukan aja.

6:03Kayaknya buat hal-hal yang lebih kecil

6:05sama kayak

6:07buat apa?

6:09Nanti, ada demo-nya

6:11di bawah.

6:13Ininya dulu tentang si API-nya dulu.

6:15Ini tuh sebenarnya

6:17kalau yang di Chrome Only, udah dari

6:192 tahun yang lalu sih.

6:212 atau 3 tahun lalu punya kontennya

6:23Mas Adam Erjel sama

6:25Mbak Una, itu

6:27bahas ini udah lama banget.

6:29Cuma yang bikin menarik

6:31sekarang tuh udah baseline.

6:33Sudah diadopsi oleh

6:35versi stabil semua

6:37browser, 2 versi terakhir.

6:39Ini berarti udah aman untuk digunakan ya?

6:45Ya, tetep-tetep

6:47tergantung user base kita sih.

6:49Aman atau enggak,

6:51kan tergantung actual user kita.

6:53Cuma ya, apa?

6:55User generic pada

6:57umumnya, udah lumayan lah.

6:59Maksudnya, udah cukup tinggi lah.

7:012 versi terakhir.

7:032 versi stabil terakhir.

7:05Koncept popover

7:13versus model

7:15versus dialog, segala macem tuh

7:17penjelasannya itu tuh.

7:19Cuma sebetulnya

7:21ngerti nggak ngerti juga sih.

7:23Popover is being shown,

7:25the rest of the page is

7:27non-interactive.

7:29Kita nggak bisa interaksi di

7:31elemen lain,

7:33autofocus, apa fokusnya

7:35dikunci ke dalam situ,

7:37itu model.

7:39Kalau non-modal, oh gitu,

7:41baru ngerti sekarang malah bedanya.

7:43Kalau model, itu pop-up

7:45yang kita dipaksa dikunci, fokusnya

7:47di situ harus berinteraksi dulu.

7:49Jadi contohnya kayak

7:51cookie consent atau apalah,

7:53kan kita nggak boleh lanjut,

7:55sampai kita nyelsain itu,

7:57menutup itu.

7:59Kalau non-modal, itu

8:01pop-up juga muncul

8:03di atas layar, tapi

8:05kita cuekin boleh, kita bisa berinteraksi

8:07dengan sisa isi halaman.

8:09Nah kalau popover API

8:11ini non-modal,

8:13ya jadi itu kayak

8:15toast atau apalah, tooltip,

8:17atau semacamnya, tau kan misalnya

8:19apa, ada

8:21fitur baru, terus sering liat kan

8:23kita icon I gitu,

8:25terus kita click atau hover di situ,

8:27suka muncul penjelasannya.

8:29Itu bukan hal yang kritikal yang harus

8:31memaksa user nyelesain interaksi

8:33di situ, baru lanjut ke tempat lain kan,

8:35itu kayak opsional aja.

8:37Oke,

8:39iya iya iya, itu bedanya.

8:41Nah ini kan sebenarnya

8:43penggunaan apa, ini

8:45pattern UI yang umum banget ya,

8:47selama puluhan,

8:49belasan tahun tuh, kita kayak

8:51harus pakai, ya kalau iseng,

8:53kalau kelebihan waktu dan tenaga bisa

8:55bikin sendiri, atau yang lebih

8:57realistis, kita harus cari-cari

8:59apa, library

9:01atau package yang diinstall biar bisa

9:03bikin fitur ini, terus

9:05mengganggu performance juga kan.

9:07Bikin gini pakai

9:09apa ya namanya, swiper,

9:11eh bukan swiper apa namanya,

9:13library JS yang untuk

9:15bikin popover-poover gini.

9:17Popster ya,

9:19popster ada juga ya.

9:21Toaster.

9:23Toaster?

9:25Popas

9:27apa ya?

9:29Itu mah di UI

9:31Component Library apapun, ada sih.

9:33Gua lupa dulu ada yang

9:37sering gua pake dulu tuh, apa namanya.

9:39Nah, PTU ya,

9:41ini demo-nya demo

9:43khas developer banget deh, secara

9:45estetis tuh,

9:47kurang. Kurang,

9:49cuma maksudnya,

9:51terus apa

9:53sense of estetiknya ya, begitulah.

9:55Cuma maksudnya apa, kan yang penting bisa

9:57bisa nunjukin bahwa

9:59itu bisa, ini bisa

10:01dipencet berkali-kali, coba generate

10:03success toast lagi deh.

10:05Generate fail.

10:07Generate fail toast.

10:09Nah, kan. Oh, yang ini

10:11maksudnya.

10:13Ya, boleh dipake buat itu,

10:15boleh dipake buat misalnya itu tadi

10:17information tooltip atau

10:19apapun lah, yang pop-up,

10:21yang non-model,

10:23yang itu tadi enggak, enggak

10:25ngunci fokus, enggak menghalangi interaksi

10:27tempat lain.

10:29Usap menu.

10:31Wih, jaman kapan

10:33banget ini, jamannya,

10:35inget gak? Jamannya DHTML.

10:37Dynamic HTML, DHTML.

10:39Itu apa sih? Dulu tuh pernah baca,

10:43cuma nggak ngerti sama sekali, terus mikir, ah udah,

10:45apakah tuh gini-gininya, DHTML ya?

10:47Iya,

10:49basically.

10:51Iya, maksudnya itu, apa sih ya?

10:53Iya, HTML kan

10:55ada transisi kan, transisi

10:57antara halaman

10:59web, menuju ke

11:01web application kan,

11:03aplikasi web. Nah, di tengah-tengah itu

11:05kan ada orang yang punya

11:07kreativitas untuk bikin hal-hal

11:09yang tadinya halaman web, tapi

11:11udah mulai dinamis, kayak tampilin

11:13menu, ada apa,

11:15yang kayak hamburger menu diklik ke

11:17kanan, pokoknya yang interaktif,

11:19tapi jaman dulu kan masih

11:21belum terlalu banyak hal-hal yang

11:23seperti itu, karena JavaScript tidak digunakan

11:25untuk itu.

11:27Itu sih ya, apa masih ada website-nya?

11:29Itu

11:31bahasa tersendiri,

11:33atau gimana? Enggak,

11:35cuma HTML ketambahin animasi,

11:37itu artinya dynamic HTML. Iya, gitu aja

11:39sebenarnya. Oh, gitu doang.

11:41Oh, tapi itu JavaScript, bahasa

11:43client-site-nya.

11:45Bisa jadi CSS?

11:47Bisa jadi.

11:49Nah, ini coba

11:51kalau demo

11:53demo pop-over

11:55yang enak di mata,

11:57coba deh. Kalo buatannya Mas,

11:59Adam Erjel itu biasanya bagus.

12:01Oh,

12:03oh iya, kalau dia mah

12:05jago CSS, pasti bagus.

12:07Kita coba ya.

12:09Oh,

12:11Twitter?

12:13Ada link-nya,

12:15link CodePen-nya. Oh, ada link-nya.

12:17Tadi nge-search doang sih.

12:19Random.

12:21Oh,

12:23connection,

12:25connection,

12:27ini ya,

12:29minimal pop-over demo

12:31animated if supported.

12:33Oh, animated if supported.

12:35Ya, karena itu kan,

12:37itu biasa. Maksudnya HTML

12:39CSS biasa.

12:41Mau dianimasi ya, animasi CSS.

12:43Progressive ya.

12:45Progressive enhancement.

12:47Enhancement. Oh, ini

12:49tip,

12:51gitu doang. Cek, gitu doang.

12:53Ini bikinnya banyak lho,

12:55opacity. Nggak, itu kan

12:57buat animasinya.

12:59Fade in, fade out. Oh, ininya

13:01tag-nya pop-over

13:03target ya, pop-over target.

13:05Target sama dengan MyToolTip.

13:07MyToolTip.

13:09Dia bakal cari elemen HTML

13:11apapun yang ID-nya

13:13sesuai. MyToolTip. Coba tulis yang

13:15kanyang deh.

13:17Isi tip-nya diganti Lorem Ipsum

13:19Doloresit Amet, gitu. Yang bawah.

13:21Yang bawah?

13:23Oh, isi tip-nya yang bawah.

13:25Loh, kok ilang?

13:27Render.

13:29Render ulang.

13:31Tip-tip-tip punyi

13:33hujan, punyi hujan.

13:35Punyi hujan.

13:37Oke,

13:39finish. Oh, masih lagi.

13:41Udah.

13:43Oh.

13:45Nah, kan emang segitu.

13:47Tapi ini ya, apa namanya?

13:49Habis itu,

13:51bentuknya diatur

13:53sama si

13:55CSS. Ya, CSS. Terserah

13:57diaturnya gimana kan.

13:59Oh, JavaScript-nya bahkan nggak ada sama sekali ya.

14:01Ini pure HTML

14:03dan CSS-nya.

14:05Kecuali mungkin kalau yang

14:07kayak tadi itu toast yang bisa

14:09apa, positioning-nya

14:11tadi

14:13sesuai jumlah toast-nya.

14:15Ya nggak tahu pokoknya kalau mau di-enhance

14:17pakai

14:19JavaScript, mungkin bisa. Tapi yang nggak

14:21perlu, nggak harus.

14:23Iya, ini minimal banget sih demo-nya.

14:25Orang judulnya aja

14:27minimal demo.

14:31Oke, ini

14:33basically udah support banget ya.

14:35Udah kan baseline tadi

14:37udah masuk baseline. Udah bisa

14:39dipakai.

14:41Dari 2023 udah bisa ya?

14:43Baseline dari 2023?

14:45Udah 2024 itu?

14:47Nggak, masuk baseline-nya

14:49April kemarin, bulan lalu.

14:51Tapi kan masuk baseline itu

14:53kalau sudah, apa, dua

14:55versi stabil terakhir. Semua

14:57browser major.

14:59Browser, hmm.

15:01Nah, berarti

15:03kan sebenarnya udah dari tahun lalu itu.

15:05Cuma baru April kemarin.

15:07Opera Android aja udah bisa nih.

15:09Opera Android ini, Opera Mini bukan? Beda ya?

15:11Bukan, kayaknya bukan deh.

15:13Opera Mini tuh nggak pakai browser

15:15engine, apa? Nggak pakai rendering

15:17engine yang mainstream,

15:19yang masuk akal tuh nggak masuk akal.

15:21Sama sekali itu, Opera Mini.

15:23Mereka punya bahasa sendiri.

15:25O-B-M-L.

15:27O-B-R-A-B-R-O-S-E-R.

15:29Itu nggak enak banget itu.

15:31Nggak bisa sih.

15:33Bisa, biar cepat mereka bikin

15:37SSR sendiri.

15:39Kita ngomongin di HTML kan,

15:41ini ada ini-nya

15:43ternyata. Ada pengertiannya.

15:45Dynamic HTML.

15:49Ini style animasinya

15:51aja retro.

15:53Collection of technologies

15:55used together to create interactive

15:57and animated website using a combination

15:59of static markup language,

16:01client side scripting, and presentation

16:03definition language such CSS and DOM.

16:05Jadi sebenarnya ya

16:07HTML yang sekarang.

16:09Ya semua UI work sekarang kayak gitu kan?

16:11Iya.

16:13Cuma dulu kan belum.

16:15Jadi ini menarik juga kita bahas

16:17untuk ini ya, untuk

16:19apa? Sesi

16:21khusus nostalgia ya.

16:23D-H-T-M-L.

16:25Kita balik lagi.

16:29Nggak nyambung sih. Cuma jadi kepikiran

16:31mungkin sekian 10 tahun dari

16:33sekarang AI atau machine learning

16:35pun udah nggak ada term-nya

16:37tersendiri. Jangan-jangan.

16:39Karena udah kayak dianggap wajar

16:41semua produk digital, semua software

16:43mungkin udah

16:45pakai unsur AI

16:47atau machine learning. Jadi

16:49jangan-jangan udah nggak ada term-nya lagi.

16:51D-H-T-M-L. Karena

16:53ekspektasi standarnya kayak gitu.

16:55Sama kayak PWA juga.

16:57PWA juga udah kurang

16:59terdengar kan?

17:01Karena semua udah.

17:03Sudah melakukan praktek-praktek itu.

17:05Ngomong-ngomong PWA nih

17:09PWA sama

17:11ini bukan web API sih. Sebenarnya fitur

17:13ya fitur web baru.

17:15Ini juga belum lama nih

17:17sekitar bulan lalu. Chrome

17:19bikin

17:21website

17:23yang nggak memenuhi

17:25heuristik, apa kriteria PWA

17:27sekarang juga bisa di-install.

17:29Seru ya?

17:31Bentar cari

17:33beritanya. Ya sambil lanjut aja bahas

17:35yang lain.

17:37Kalau dari

17:39Ivan, ini ada

17:41API apa? Web

17:43Vitals ya. Web Vitals.

17:45Kalau saya bukan

17:47khusus yang web

17:49API tetapi

17:51mau

17:53waru-waru aja. Ini Web Vitals

17:554.0

17:57library-nya ya. Library Web Vitals

17:59ini bukan yang buat di web API.

18:01Tapi library untuk Web Vitals JS

18:03mau

18:05release soon. Release

18:07candidate ya.

18:09Sebelumnya kan

18:11versi 3.5. Ini

18:13library Web Vitals

18:15yang sebenarnya

18:17zoom in. Zoom

18:19in lho.

18:21Sebenarnya Web

18:23Vitals ini adalah

18:25wrapper untuk

18:27dari performance API

18:31dari web performance API

18:33untuk mempermudah kita melihat

18:35OK CLS-nya berapa, INP-nya

18:37berapa, LCP-nya berapa

18:39TTFB. Nggak semua itu.

18:41Ini kan core Web Vitals nih yang dia

18:43bikin. Web Vitals yang lain

18:45ada. Kayak

18:47FCP-nya. Apapun yang kalian

18:49lihat di Lighthouse

18:51itu menggunakan ini

18:53yang sama gitu. Script

18:55yang sama. Underlying

18:57level of-nya itu ya?

18:59Under the hood dia pakai ini.

19:01Lighthouse itu kayak front-end-nya aja.

19:03Iya.

19:05Untuk collect datanya. Jadi

19:07kalau kalian mau collect data saya pakai ini

19:09untuk collect data

19:11saya sendiri. Dan yang

19:13langsung saya push

19:15ke Google Analytic.

19:17Nanti saya proses sendiri dari

19:19Google Analytic. Saya proses

19:21ke BigQuery. Terus nanti

19:23bisa lihat. Nggak ush sih. Nggak sampai

19:25BigQuery, BigQuery-an. Saya pakai Google Analytic

19:27reporting. Sudah bisa

19:29lihat. Oh CLS-nya berapa,

19:31INP-nya berapa, LCP-nya berapa

19:33persatuan waktu

19:35yang saya mau kerjakan.

19:39Iya. Dia kan

19:41releasing 4.0

19:43which is major update.

19:45Apa yang ditambahkan yang pastinya

19:47INP?

19:49Kan INP yang baru itu

19:51Vital yang baru yang

19:53tidak disahkan

19:55sebagai pengganti

19:57total... Sudah.

19:59Sebagai pengganti total

20:01blocking time.

20:03Atau

20:05first input delay.

20:07First input delay atau total blocking time

20:09nanti diganti jadi namanya

20:11interaction to next pane.

20:13Update dari Web Vital Library ini

20:17sudah bisa menghitung

20:19INP.

20:21INP itu lab. Berarti lab ya?

20:25Bukan user.

20:27Nggak harus nunggu interaksi user.

20:29Interaction to next pane.

20:35Dua-duanya ya.

20:37During page load, dia bisa

20:41menghitung INP-nya berapa.

20:43Kalau kita scroll,

20:45interaction to next pane cycle-nya,

20:47dia bisa lagi menghitung berapa.

20:49Sama kayak CLS.

20:51Kalau CLS itu selama

20:53page-nya hidup, CLS-nya tetap dihitung

20:55nanti yang maksimalnya kita tidak tahu.

20:57INP sama juga seperti itu.

20:59Seminggu lagi kata

21:03mas Barry Pollard

21:05kira-kira kalau nggak ada feedback

21:07yang major akan

21:09jadi resmi

21:114.0

21:13nanti semua ini update

21:15ke page.

21:17Page Web Dev ke update.

21:19Terus kemudian Lighthouse

21:23yang di Chrome juga ke update.

21:25Wah, menarik.

21:29Ini berarti

21:31raper

21:33dari

21:35web performance API ya?

21:37Kalau mau hitung sendiri dari performance

21:41API bisa. Low level-nya berarti

21:43performance API ini ya.

21:45Salah satunya yang digunakan

21:47Node.js walaupun yang tadi

21:49yang di web lighthouse itu buat

21:51browser kan ya?

21:53Iya. Betul.

21:55Node.js pakai juga? Wah, seru ya.

21:57Node.js

21:59bikin juga.

22:01Tapi pakai

22:03API yang sama, maksudnya underlying

22:05API-nya, dia sebenarnya pakai

22:07library yang sama?

22:09Mungkin bukan library, tapi

22:11mungkin pakai

22:13lebih tepatnya pakai

22:15spek yang sama.

22:17Ya, spesifikasi yang sama.

22:19Tapi kan

22:21Node.js itu kan V8

22:23nggak ngaruh ya?

22:25Ya, tetap pakai spek yang sama.

22:27Beda, V8 kan runtime.

22:29Bukan? Iya runtime, mesinnya

22:31mesinnya, ya engine-nya.

22:33Ini pakai performance.

22:35ini bukan beda.

22:37Itu sudah lama ada performance

22:39total, cuman apa yang

22:41diukur mungkin

22:43beda. Coba kita lihat

22:45perbedaannya.

22:47Performance.measure

22:51performance observer

22:53Ini sama nggak?

22:55Performance observer ada juga di web

22:57API. Apa saya kembali-kembali

22:59sekarang ya? Sebelumnya mungkin ini

23:01nggak ada, tetapi di web ada.

23:03Performance.now itu

23:05ya performance

23:09maksudnya performance.now itu sebelum

23:11di web udah ada lama.

23:13Cuma yang saya belum tahu

23:15di Node ada? Mungkin

23:17nggak ada sebenarnya. Mungkin.

23:19Jadi kalau pun sebelumnya nggak ada

23:21ya orang apa, maintainernya

23:23Node kan tim yang Node

23:25ngeliat, oh iya ternyata itu

23:27relevan dan berguna buat diadopsi ke

23:29Node JS. Bagus lah. Maksudnya kan jadi makin

23:31streamline ya. Kayak dulu tuh

23:33ingat banget, bingung banget kenapa

23:35fetch bisa di browser,

23:37tapi kalau di server nggak ada fetch.

23:39Harus install Node fetch atau

23:41semacamnya. Ini kan kasusnya mirip

23:43kan? Cuma di bidang

23:45measure mengukur

23:47performance. Cara pakai

23:49sama persis loh ini. Nggak ada beda

23:51sih ya. Berarti speknya sama.

23:53Saya curiganya Node JS

23:55sekarang-sekarang ini memang

23:57sedang mendekatkan diri dengan web

23:59standar ya. Fetch udah

24:01diinclude. Kemudian

24:03web socket

24:05mulai mau diinclude.

24:07Nggak tahu udah apa belum. Beberapa

24:09IPA-IPA yang standarnya

24:11web juga diadaptasi

24:13juga ke Node JS.

24:15Kalau gitu

24:17bagus lah. Jadi bisa diukur juga

24:19dengan, berarti JavaScript

24:21yang sama bisa dipakai di

24:23masih syntax yang sama

24:25bisa dipakai di server.

24:27Walaupun pengukurannya

24:29mungkin

24:31berbeda ya. Dimensinya

24:33berbeda ya. Iya yang diukur

24:35lain. Beda alam.

24:37Beda alam.

24:39Beda alam tapi syntaxnya sama.

24:41Oke.

24:43Next, apa lagi

24:45nih? Kalau dari saya tadi

24:47web performance API. Nah, ada yang

24:49menarik lagi nih. Ini nggak tahu ya. Tapi ini

24:51belum jadi API. Ini baru proposal.

24:53Proposal. Nah, kita dulu pernah ya

24:55di episode entah berapa.

24:57Kita bahas proses dari

24:59pertama mengajukan proposal sampai

25:01di apa? Adopsi jadi

25:03standar ya. Entah episode

25:05berapa. Cari sendiri. Nah, ini

25:07berarti statusnya masih stage

25:09one ya. Stage 1.

25:11Iya, masih stage 1. Jadi

25:13ceritanya

25:15JavaScript ingin menambahkan

25:17type annotation atau

25:19Wow. Ini pasti

25:21bahan perdebatan

25:23banget nih.

25:25Di tiber atau di apa? Hacker news.

25:27Orang pasti pada... Waduh waduh waduh. Bisa jadi

25:29kontroversi.

25:31Tujuannya adalah

25:33Oh, biar

25:35kalau misalnya apa?

25:37Gak perlu transpilasi.

25:39Type bisa langsung jalan

25:41di browser ya.

25:43Oh.

25:45Ini juga sekaligus

25:47apa ya, sekaligus

25:49membuat Node.js

25:51kembali berkembang. Karena kan

25:53yang membuat orang

25:55berapa ya, contohnya

25:57saya kemarin pengen pakai TypeScript

25:59tapi males pakai TypeScript compiler

26:01karena agak lambat.

26:03Jadi saya memilih pakai antara Deno atau Boon

26:05karena by default mereka udah bisa

26:07transpilasi, udah bisa kompilasi ke

26:09TypeScript, gak perlu pakai

26:11transpilasi kan.

26:13Kalau ini udah di-approved, kemungkinan besar Node.js

26:15juga kena efeknya

26:17dan mungkin bisa jadi native

26:19TypeScript bisa jadi native, gak perlu

26:21ada transpilasi lagi, transpiral

26:23lagi.

26:25Oh, tapi paragraf satu itu menarik ya

26:27yang atas.

26:29Kalimat kedua nya

26:31"To be checked by a type

26:33checker that is external

26:35to JavaScript." Jadi maksudnya

26:37JavaScriptnya

26:39sendiri gak dipaksa untuk jadi opinionated

26:41mengadopsi

26:43TypeScript atau Flow.

26:45Maksudnya behavior type checkingnya

26:47gak perlu punya opinion

26:49tentang itu, yaudah kalau runtime

26:51di-check-in aja, dianggap

26:53comment. Cuma berarti kan

26:55kalau misalnya

26:57berarti kita harus semacam

26:59mendefinisikan type checker external

27:01pas lagi mau

27:03jalanin type checkingnya.

27:07Semacam jazz doc atau semacam Flow

27:09kali ya, bukan bahasa

27:11super script seperti

27:13TypeScript kan.

27:15Kita lihat lagi contohnya nih.

27:17Coba kalau gue mengerti maksudnya

27:19misalnya variable itu

27:21didefinisikan type-nya

27:23integer, berarti dia gak ini ya

27:25sebenernya gak peduli ya.

27:27Cuma bisa

27:29menerima warning aja

27:31kayaknya. Gak error, maksudnya itu

27:33gak dianggap sebagai syntax error.

27:35Syntax error, hanya warning.

27:37Kalau sekarang

27:39syntax error ya.

27:41Kalau sekarang.

27:43Berarti

27:45di-ignore.

27:47Ya.

27:49Kalau pakai jazz doc kan kayak gini kan.

27:51Kayak yang pertama ini kan.

27:53Kalau proposalnya diterima

27:55nanti akan jadi seperti ini.

27:57Tetapi

28:01misalnya pun

28:03calon time salah, P1nya salah.

28:05Jika calon time. Gak masalah.

28:07Seperti sekarang ya.

28:09Ini hanya untuk

28:11warning pada saat

28:13development aja.

28:15Alias gak berisik

28:19kayak compiler, kayak transportnya

28:21TypeScript itu.

28:23Oh TypeScript keren.

28:25Ya, TypeScript calon time.

28:27Ininya compilernya

28:29berisik tuh kalau salah.

28:31Kalau kita pengen dugaan gue kan

28:33maksudnya masing-masing developer terserah

28:35mau install, mau

28:37tools itu kalau di-register.

28:39Pakai string, pakai apa gitu.

28:41Atau mau yang loose, gitu kan bisa ya.

28:43Bebas ya.

28:45Oke, oke.

28:47Ada lagi, nextnya, nextnya.

28:49Ya, terus ke bawahnya.

28:51Coba lihat. Ke bawahnya.

28:53Ke bawahnya, ya maksudnya apa.

28:55Proposalnya. Proposalnya.

28:57Sama pakai titik 2 ya.

28:59Menirip-mirip TypeScript, ya berarti.

29:01Klete standard deh.

29:03Lanjut.

29:07Oh, ini yang nanti

29:09yang agak susah banget ini.

29:11Iya, tapi jadi susah banget, Tar.

29:15Itu kan ada titik 2.

29:17Di-kira objek ya?

29:19Iya.

29:21Di-kira objek ya?

29:23Bisa di-kira objek, bisa di-kira

29:25kondisional.

29:27Kan tanda tanya, bla, bla, bla,

29:29titik 2, gitu kan.

29:31Oh, ya.

29:33Classes is

29:35binary.

29:37Iya.

29:39Ah, itu urusannya

29:41si programmer browser lah yang mikirin itu.

29:43Iya. Kan dibayar sama Google,

29:45sama apa, sama Apple,

29:47sama Firefox.

29:49Belum tentu juga diterima ini, proposalnya.

29:51Ini cukup kontroversi sih.

29:53Pasti akan ada produk-produk.

29:55Sama pihak browser.

29:57Karena malu se-implementnya.

29:59Minta tolong

30:01aja sama Microsoft.

30:03Nanti yang duluan,

30:05itu Microsoft Edge yang duluan.

30:07Karena kan TypeScript dikembangkan di Microsoft, kan.

30:09Sisa satu entiti.

30:11No, tadi

30:15pas di jalan

30:17juga sempat dengar podcast, kan.

30:19Kenapa TypeScript itu

30:21jarang ada tools

30:23yang kayak misalkan type checking only.

30:25Terus ternyata, kata,

30:27enggak tahu ya ini benar atau enggak ya.

30:29Bisa di-check kebenarannya atau

30:31kalau salah tolong dikoreksi.

30:33Katanya TypeScript itu tidak

30:35open untuk spesifikasinya

30:37itu secara bahasa enggak ada.

30:39Enggak di-open mungkin sama Microsoft.

30:41Oh gitu.

30:43Iya. Jadi tools-tools seperti

30:45Biome yang, apa,

30:47yang baru kayak Linter, gitu.

30:49Dia mau ngecek TypeScript, itu

30:51terus itu, menebak-nebak

30:53sendiri.

30:55Jadi enggak ada

30:57spesifikasinya seperti JavaScript.

30:59Kalau kita mau bikin

31:01parser untuk JavaScript, kan, udah ada spesifikasinya, kan.

31:03Kita mau bikin engine untuk JavaScript.

31:05Ya, kita tinggal mengikutin aja.

31:07Ya, kalau TypeScript enggak ada.

31:09Berarti emang semi, apa ya?

31:13Semi tertutup lah, ya.

31:15Semi closed source, ya. Semi tertutup.

31:19Bukan tertutup kodeonya, tapi

31:21cara kerjanya.

31:23Apa prinsip kerjanya?

31:25Harus melihat source code-nya, kan,

31:27bukan spesifikasinya.

31:29Ya, begitulah.

31:31Nah, scroll ke

31:33yang menarik ke bawah, FAQ-nya

31:35tuh. Kalau misalnya, kalau yang

31:37kodingan ini sih, ya udahlah, kayak gitu

31:39intinya, paham lah.

31:41Ada FAQ-nya. Benar.

31:43Di bawah? Di bawah lagi? Di bawah lagi.

31:45Assertion, Generics,

31:47ada Generics juga.

31:49TipeScript lah. Ini intinya

31:51TypeScript semua sih.

31:53Ada disk-nya, apa?

31:55Intinya TypeScript.

31:57JSX-nya omitted.

31:59Ada yang up for debate.

32:01Itu juga menarik. Ambient file, apa?

32:03DTS.

32:05Function overload.

32:07Class info.

32:09Kayaknya

32:11surem deh. Kaga lolos kayaknya.

32:13Cuma, ya udah.

32:15Cuma, ini...

32:17Eh, dari kapan?

32:19Lanjut, lanjut, lanjut.

32:21Oh, 3 tahun yang lalu.

32:23Udah 3 tahun ya.

32:25Ini opsiional.

32:29Jadi argumen. Maksudnya argumennya

32:31proposal ini.

32:33Ada kebutuhan dari Ecosystem

32:35ini solusinya

32:37tanpa mengharuskan semua

32:39developer untuk

32:41package type checking.

32:43Blablabla.

32:45Terus, yang paragraf 3

32:47itu menarik. Apa?

32:49Bukan perkara JavaScript

32:51harus punya type. Atau nggak sih?

32:53Cuma, apa? Kalo mau pake type,

32:55gimana caranya? Gimana cara

32:57apa? Bekerja

32:59JavaScript bisa bekerja dengan

33:01type.

33:03Oke.

33:05Seru ya.

33:07Maksudnya, ini argumen dari

33:09sudut pandangnya si proposal ini.

33:11Terus, kenapa nggak

33:13bikin type system sekalian

33:15di TC39?

33:17Di apa?

33:19Badan yang membuat

33:21ECMAScript.

33:23Blablabla.

33:25Ini, ini.

33:27Wireless Goal Around Web Compatibility.

33:29Don't Break The Web.

33:31Jadi, secara implicit,

33:33ini kayaknya

33:35kita dikasih tau nggak akan

33:37JavaScript nggak bakal

33:39bisa berubah so drastis itu ya.

33:41Entah itu perkara type, atau apapun

33:43ke depannya, nggak bakal bisa

33:45ada perubahan drastis. Karena

33:47nanti nggak backwards compatible kan.

33:49Yes.

33:51Kenapa nggak bikin dua rantai aja di Game Browser ya?

33:53Bener lah.

33:55Nggak jadi bentrop.

33:57Nggak bisa.

33:59Sama-sama

34:01ngamodify dong.

34:03Jadi ngaco.

34:05Atau yang 171?

34:07Iya.

34:09Butuh jQuery 2 sama jQuery 3

34:11nanti.

34:13Nanti ada yang bikin

34:15toolsnya.

34:17Dua-duanya panggil jQuery.

34:19All hail jQuery.

34:21Oke, oke.

34:25Lanjut, lanjut, lanjut. Kita lanjut.

34:27Ke mana lagi nih?

34:29Apa ya yang menarik ya?

34:31Specification itu tuh.

34:33Sorry, apa?

34:35Speculation.

34:37Speculation rules API.

34:39Speculation rules. Nah, ini juga baru nih.

34:41Menarik nih.

34:43Wah, ini baru banget ya.

34:45Fresh from the oven.

34:47Ini ada videonya juga ya?

34:51Nggak jeselin.

34:53Iya.

34:55Pernah kita undang ke sini ya kan?

34:57Bukan jengkelin ya.

34:59Jengkelin.

35:01Mau diundang jengkelin?

35:03TV show jaman kapan.

35:05Nah, intinya

35:07ini untuk mengkustomize

35:09behavior pre-render atau

35:11prefetch. Kan dulu kita semua ditaruh

35:13link tag tuh.

35:15Terus ada yang

35:17obsolete ya. Pre-render kayaknya

35:19terus agak bingung

35:21behaviornya antar

35:23satu path dan lainnya.

35:25Nah, ini dibikin kayak

35:27satu block untuk mengatur

35:29behavior

35:31pre-fetch atau

35:33pre-render yang kita mau dan

35:35semacam prioritas.

35:37Ini kayak

35:39si browser bisa

35:41diberikan power

35:43untuk

35:45nge-prediksi.

35:47Meng-speculate apakah

35:49link itu akan

35:51di-click atau nggak?

35:53Di-click atau nggak.

35:55Perlu di-pre-fetch atau nggak?

35:57Di-pre-fetch atau tidak.

35:59Jadi browser yang akan menghitung

36:01opportunity itu

36:03probability itu

36:05berdasarkan history

36:07yang ada di browser

36:09kalian sendiri.

36:11Jadi nggak ada hubungannya

36:13sama tepati. Jadi berdasarkan

36:15kita

36:17punya behavior sendiri.

36:19Berarti ini kayak

36:21apa ya?

36:23Kayak recommendation system ya?

36:25Ini pakai AI yang ada

36:27di filmnya nih.

36:29Lebih tepatnya seperti

36:31Guest.js pernah dengar nggak?

36:33Guest.js.

36:35Itu buatannya Google juga

36:37itu dulu. Guest.js

36:39bukan, bukan pakai S, pakai S.

36:41S-nya menebar-menebar.

36:43Iya, iya, iya. Salah, salah, salah.

36:45Ini

36:47salah satu level yang pernah

36:49saya mau

36:51coba

36:53untuk client project, tapi

36:55nggak berhasil saya.

36:57Bukan berhasil saya.

36:59Karena harus

37:01koneksi, iya harus

37:03koneksi ke itu, harus koneksi ke

37:05Google Analytics.

37:07Jadi

37:09data Google Analytics kita, kita kasih

37:11masukin ke

37:13koneksi ke

37:15ke

37:17library ini, nanti

37:19dia koneksi

37:21langsung.

37:23Ribet lah

37:25setupnya.

37:27Oh, udah ada buat Next.js juga sebenarnya ya.

37:29Hmm, hmm.

37:31Oh, oke.

37:33Dan ini kan, contohnya

37:35semua...

37:37Lanjut, lanjut, lanjut.

37:39Iya, itu kan contohnya semua kan

37:41rata-rata kan sudah pakai Webpack, atau GSP

37:43segala sebagainya. Kan saya kan static side ya,

37:45pakai WordPress dan setupnya jadi

37:47ribet. Karena

37:49bukan, bukan kayak

37:51prefetching yang seperti SPI gitu kan.

37:53Jadi

37:55sebenarnya saya pakai yang static gini

37:57gitu, dan dibelakangnya itu nggak pakai

37:59Node. Jadinya ribet.

38:01Setupnya.

38:03Gak ada.

38:05Iya.

38:07Sedangkan saya PHP.

38:09Sudahlah.

38:11Nah, kalau pakai ini nih

38:13Spekulasi.

38:15Ini semuanya

38:17di Web.

38:19Jadi, prefetching dan

38:21prerender si Web-nya yang menentukan

38:23berdasarkan...

38:25Kita coba langsung lihat ke example-nya deh.

38:27Nah, ini dia.

38:31Prerender when,

38:35where, and

38:37make this

38:39/lockout

38:41or no prerender.

38:43Kalau prefetch,

38:45kalau url-nya

38:47nesh.html atau nesh2.html.

38:49Enak ya.

38:53Ini kan bisa dibedakan secara sintek.

38:55Ini bisa dibedakan setiap halaman

38:57kan. Jadi kita bisa build

38:59rule itu berdasarkan

39:01server-side

39:03render. Jadi misalnya

39:05saat lagi di page apa, saya bisa kasih

39:07rule itu.

39:09Saya di-reading page.

39:11Maka yang saya kasih rule-nya

39:13prefetch atau prerender

39:15thank you page. Karena siapa tahu sudah selesai

39:17waktu dia muncul thank you page cepat.

39:19Kita bisa di next page-nya.

39:23Karena kita yang define dari CC server.

39:27Menarik, menarik.

39:33Kalau artikel yang lebih enak

39:35dilihat, itu tuh di

39:37chat. Gimana, gimana?

39:39Ke ini dulu deh.

39:43Bahannya Eka dulu.

39:45Spekulation, rules

39:47improvement.

39:49Menunggu loading. Yang menarik

39:51buat saya ini nih, bagian ini nih.

39:53And so makes sense for multi-page application

39:55rather than single-page application. Karena kan

39:57sekarang trend-nya itu kan menuju

39:59ke MPA kan, balik ke MPA kan.

40:01Banyak

40:03framework.

40:05Dengan ada react server

40:07component lah, ada swell kit,

40:09ada quick, ada macem-macem kan.

40:11Ada astro juga.

40:13Jadi dengan

40:15si pengembang web

40:17juga dia melihat, wah ini kayaknya

40:19trend-nya menuju MPA, makes sense. Akhirnya

40:21dibuat lah spekulation rules

40:23API ini. Mungkin gitu ya.

40:25Dan kalau pun pakai

40:27kalau pun ada client-side routing-nya

40:29nih, kayak misalnya next.js gitu ya kan.

40:31Kalau misalnya emang supported

40:33bisa pakai client-side routing. Tapi kan

40:35sebetulnya itu SSR juga kan.

40:37Jadi bisa dianggap bisa punya

40:39behavior MPA juga.

40:41Benar, benar, benar.

40:43Ditambah lagi dengan

40:45transition API.

40:47Udah deh, lengkap.

40:49Iya.

40:51Document rules.

40:53Rules-nya dalam bentuk script

40:55begini ya, apa?

40:57A list of urls.

40:59Jadi nggak dirender sama browser.

41:01Ya kan?

41:03Diskip, diskip.

41:05Dan juga nggak di, script ini kan

41:07dia nggak, waktu di page load dia nggak

41:09dipeduliin.

41:11Gak blocking ya.

41:13Gak blocking.

41:15Gak blocking sama sekali.

41:17Gak blocking di DOM-nya, cuma ngasih tahu

41:19ke si browser-nya sendiri.

41:21Apa?

41:23Mesin, mekanisme browser-nya.

41:25Oh, bisa pakai SSSelector

41:29tadi.

41:31Menarik.

41:33Berarti kita bisa ngasih link itu, bisa kita, oh

41:35link ini, di prerender.

41:37Bisa link itu nggak dia?

41:39Bisa.

41:41Karena kalau lockout di prerender, dia

41:43ke lockout terus.

41:45Iya kan?

41:47Iya, benar.

41:49Kan kalau link lockout-nya di prerender

41:51di belakang, dia bakal ke lockout terus.

41:53Dia manggil, manggil lockout.

41:55Iya, dia bakal manggil.

41:57Oke.

41:59Berarti harus hati-hati saja ya?

42:01Bisa prerender ini,

42:03bisa prerender.

42:05Mungkin ini opt-in nggak sih?

42:07By default, ya nggak kan?

42:09By default, ya nggak ada.

42:11Nggak ada speculation.

42:13Apa itu? Oh, ke atas-katas ada

42:15warning-nya tuh, warning.

42:17Oh, yang merah, yang merah.

42:19Caution.

42:21Terus dia itu over-speculation.

42:23Terus dia home-in.

42:25CPU cost.

42:27Dia baca dari mana?

42:29Oh, dia baca dari history

42:31di browser kita, ya?

42:33Bukan hati-hati kalau

42:35terlalu banyak yang kita speculate

42:37untuk minta di prerender.

42:39Misalnya satu halaman kita, mungkin halaman kita

42:41yellow pages.

42:43Yellow pages, ya kan?

42:45Terus kemudian ada sepuluh rebulling.

42:47Masih kita prerender semua, ya?

42:49Nggak didos reper kita

42:51sendiri, kan?

42:53Maksudnya gitu.

42:55Dan browser-nya juga kan,

42:57apa, main thread-nya mungkin kerjanya

42:59di extra, ya? Karena nge-check satu-per-satu

43:01ini, wah, ini relevan nggak ya?

43:03Perlu di-pre-hedge atau prerender

43:05atau nggak?

43:07Ini keren nih, kalau misalnya kita

43:13keren nih, kalau misalnya

43:15prerender ini

43:17digabungkan dengan

43:19Intersection Observer kali ya

43:21atau Legi Load. Jadi semakin

43:23orang, ingat nggak

43:25kalau misalnya kita yang pakai

43:27Twitter, kalau scroll-scroll

43:29baru dia muncul, ya kan?

43:31Kan kalau pakai ini

43:33mungkin dia nggak di...

43:35Bukan. Maksudnya

43:39hanya link yang ada

43:41di above the fold itu yang muncul

43:43itu yang

43:45di-pre-render.

43:47Jadi nggak usah sampe

43:49semua, iya.

43:51Nggak tahu ya, mungkin saya bisa

43:53saya nanti bisa feedback

43:55kali itu.

43:57Dikombanya sama View

43:59Transition yang level 2.

44:01Seneng banget tuh.

44:03Cocok, cocok.

44:05SSR udah kayak...

44:07Nanti lama-lama, bisa apa?

44:09Hampir nggak bisa dibedain

44:11sama SPA, ya kan? Karena di-click

44:13sekejapnya udah diambil

44:15duluan, langsung feed-in

44:17feed-out.

44:19Sepertinya memang trennya di sana.

44:21Trennya memang diarahkan kesana

44:23jadi diarahkan kesana.

44:25Ada bedanya atas sama bawah.

44:27Ini Chrome Only.

44:29Atas sama bawah.

44:31Oh, source. Ada source.

44:33Source document.

44:35Kalau di bawah apa? Nggak ada source.

44:37Nggak ada source-nya.

44:39Baca penyelesaian apa di atas?

44:41Make the source key optional

44:45since... Oh, nggak harus

44:47pakai source. Karena bisa di

44:49infer dari

44:51URL atau

44:53where. Oh, gitu.

44:55These two speculation

44:57rules are identical. Ini dianggap

44:59sama. Karena

45:01udah ada where-nya, browser bisa

45:03mengkalkulasi sendiri.

45:05Bisa ngira-ngira sendiri

45:07jenis source-nya itu apa.

45:09Nggak masih pakai script, lho.

45:11Bisa pakai HTTP header, lho. Turun, turun.

45:13Bisa pakai HTTP header.

45:15Oh, iya ini bawah ya? Iya.

45:17Itu.

45:19Oh. Ini

45:21berarti di web

45:23server-nya, ya?

45:25Iya. Jadi kayak

45:27ini, kayak manifest.json.

45:29Kayak. Manifest.

45:31Jadi kayak manifest.

45:33Alright.

45:37Scroll ke bawah.

45:39Ini seru sih. Udah ada beberapa yang

45:41mengadopsi.

45:43Walaupun masih

45:45baru ya. Dan

45:47masih bisa satu domain, kan ya.

45:49Nggak bisa cross-domain, kan.

45:51Oh, harus yang original.

45:53Iya. Coba-coba-coba.

45:55Di Glitch.

45:57Entar

46:01habis lho ininya. Tethering-nya.

46:03Udah warning. Buka ini dong.

46:07Buka. Buka-buka. Buka-sambil buka

46:09DevTools Network.

46:11Sambil buka YouTube.

46:13DevTools.

46:15DevTools.

46:17Network, ya.

46:19Iya.

46:21Terus,

46:23kalau kita hover.

46:25Dia akan muncul, gitu ya.

46:27Nggak sih.

46:29Mana?

46:31Coba-coba reload.

46:33Oh, iya. Reload dulu, ya.

46:35Sudah.

46:43Common Fruit.

46:45Oh, ini masih common fruit.

46:47Mana?

46:53Ini bukan Chrome-nya.

46:55Udah Chrome 124

46:57belum?

46:59Ini Chrome Kanari.

47:01Kanari.

47:03Oh.

47:05126.

47:07Kenapa ya nggak bisa? Coba-coba.

47:09Gue jadi penasaran.

47:13API supported in this browser supported.

47:15Edit speculation rule.

47:17Rule-nya disuruh dibuat sendiri, gitu.

47:19Bukan, bukan. Sudah ada.

47:21Sudah edit.

47:23Sudah ada, kan?

47:25Moderate.

47:27Kemudian, ini di application.

47:29Bukan di network.

47:31Oh, gitu.

47:33Application. Eh, application mana ya?

47:35Application.

47:37Speculation.

47:39Bukan, ada speculation

47:41Re-load.

47:43Oh, bisa.

47:45Di-rolls, di-rolls, di-rolls.

47:47Coba-coba.

47:49Rolls, rolls.

47:51Oh, bukan.

47:53Refresh. Reload.

47:55Ini ada warning.

47:57Speculation-nya, coba.

47:5918, not trigger.

48:01Coba rule-set dipencet aja.

48:03Oh, itu udah trigger.

48:05Speculation.

48:07Speculation.

48:09Nah.

48:11Wah.

48:13Jadi, kalau

48:15Olive di-click,

48:17maka dia udah langsung render, ya.

48:19404.

48:21Nggak ada, beneran.

48:23Oh, pantesan failure.

48:25Nggak ada, nggak ada.

48:27Itu contoh aja, ya.

48:29Contoh behavior-nya aja.

48:31Coba ke, ya, Kiwi.

48:33Yang 404, yang...

48:37Ini nggak, Kiwi nggak.

48:39Oh.

48:41Tuh, itu pakai ini.

48:43Halaman ini pakai Web Vital ini.

48:45Halaman tadi.

48:47Iya, iya, iya.

48:49Ini kayaknya satu halaman merangkap

48:51demo macem-macem API baru, ya.

48:53Kayaknya mau lagi

48:55persiapan Google I/O ini.

48:57I/O.

48:59Oh, ini teaser,

49:01berarti ya. Teaser, ya.

49:03Iya.

49:05Ternyata episode-nya adalah

49:07episode teaser untuk Google I/O

49:092024

49:11tentang web, ya. Kita nggak tahu, kita sendiri

49:13nggak tahu topiknya apa. Masih coming soon.

49:15Tapi kita hanya mereka-mereka.

49:17Ini pasti masuk, deh.

49:19Iya, kayaknya masuk, nih.

49:21Oh.

49:23Iya, iya, iya.

49:25Berarti ini ditambahin baru, ya.

49:27Ada background service sendiri, ya.

49:29Jadi, sebagai background service.

49:31Kita kayaknya biar kan, kita jarang-jarang

49:33gitu liat tab application juga.

49:35Maksudnya nggak sampe

49:37ngintip apa. Kita asumsinya

49:39kan network, ya. Asumsinya

49:41network kan. Ternyata nggak ada.

49:43Ternyata behavior baru,

49:45ini kayak di stream line,

49:47di satu tempat terpisah.

49:49Nah, balik ke

49:51screen yang tadi, deh. Yang apa?

49:53Developer Chrome.com. Yang

49:55blog, blog post.

49:57Blog post

49:59yang ini, ya. Yang

50:01ini.

50:03Iya. Nah, scroll ke bawah.

50:05Bawah lagi.

50:09Nah, ini yang penting, yang platform support.

50:11Apa? Atas sedikit.

50:13Masih lagi

50:15proses standarisasi.

50:17Jadi, seneng boleh, tapi jangan seneng-seneng

50:19amat. We are also working

50:21hard to standardize the API

50:23lewat WICG.

50:25Jadi, masih dalam proses.

50:27Kalau misalnya mau tau apa, diskusi-diskusinya,

50:29ya. Mungkin itu bisa di

50:31click. Sudah

50:33ada WordPress.

50:35Udah ada plug-innya.

50:39Spekulasi mode udah ada.

50:41Wow. Cepet sekali.

50:43Ini spekulatif juga.

50:45Sebenernya kan belum diadopsi

50:47banyak rosar, ya. Spekulasi aja

50:49udah bikin plug-innya.

50:51Nah, terus yang

50:53yang seru,

50:55Chrome. Kenapa

50:57itu?

50:59Ya, itu udah adopsi juga. Scroll aja ke bawah.

51:01Oh, Astro udah?

51:03Oh, wow.

51:05Cuma, mungkin partial.

51:07Akamai, CDN, Nitro Pack.

51:09Experimental.

51:11Tapi, ya, seru sih.

51:13Dulu pun waktu view transition API

51:15yang level 1, itu sama satu yang pertama kali

51:17mengadopsi

51:19meta framework itu Astro yang paling

51:21terdepan.

51:23Paling pertama.

51:25Baru launching 4.2, kan?

51:27Baru launching kan dia

51:29ini 4.2?

51:31Januari sih.

51:33Oh, Januari 4.2?

51:35Masih experimental ya?

51:37Iya, experimental.

51:39Ini soalnya

51:41Januari...

51:43Januari kemarin. Masih

51:45experimental. Yang kemarin apa?

51:474.4 ya yang baru dia?

51:49Gak tau.

51:51Empat sekian lah.

51:53Iya, intinya udah.

51:55Membaikin ini ya. Define config

51:57untuk mengadopsinya.

51:59Refresh to experimental, client prerender true.

52:01Nice. Coba tuh contoh

52:03penggunaannya. Scroll ke bawah.

52:05If document

52:09prerendering, render disabled.

52:11Oke.

52:13Sederhana.

52:15Seru sih, Astro itu salah satu

52:17meta framework yang

52:19aktif

52:21mengadopsi standard web

52:23API.

52:25Jadi punya approach yang beda ya. Kalau Next.js kan

52:27semua dia bikin sendiri.

52:29Ya walaupun, eventually, kalau web API

52:31ada, ya akhirnya di

52:33streamline juga. Cuma kalau Astro

52:35pendekatannya

52:37jemput dulu lah ke web API yang baru

52:39yang masih experimental pun dipake.

52:41Cuma, di mereka

52:43juga experimental juga. Jadi gak

52:45ngeganggu

52:47yang stable.

52:49Oke.

52:51Udah ya.

52:53Lanjut. Satu lagi atau dua

52:55lagi. Nah, kalau dari saya

52:57ada ini nih.

52:59JSON module.

53:01Apa tuh?

53:03JSON module itu kalau

53:05dulu ataupun sekarang

53:07kalau misalkan kita mau import dari

53:09JSON kan harus pakai

53:11bundler kan ya.

53:13Biasanya kalau dari webpack itu ada

53:15extensionnya

53:17untuk loading JSON.

53:19Nah, ini sudah

53:21native.

53:23Bisa baca JSON.

53:25Bisa baca JSON.

53:27Oh, import dari JSON bukan?

53:29Ini import dari JSON.

53:31Jadi kalau kita punya JSON data

53:35kita bisa langsung, gak perlu pakai plugin.

53:37Gak perlu pakai

53:39bundler.

53:41Gak perlu JSON parse.

53:43Gak perlu JSON parse.

53:45Betul.

53:47Motivasi ya itu.

54:07Biar bisa emang import JSON file.

54:09Iya.

54:11Kalau yang begini-gini semua pasti

54:13langsung setuju. Kalau yang tadi

54:15type system.

54:17Terlalu opinionated.

54:19Soalnya.

54:21Betul.

54:23Ada orang yang suka, tapi di sisi yang lain

54:25kita, si web ini harus tetap

54:27menjaga

54:29kompatibilitasnya kan. Tetap harus bisa membuka

54:31web dari tahun kapan.

54:33Jadi agak berat sih itu.

54:35Bakal ada gak sih

54:37di Obsolete gitu?

54:39At some point.

54:41Ya, kalau pun Obsolete gak boleh

54:43breaking kan. Kayak misalnya

54:45Markli atau Blink gitu.

54:47Gak jalan, tapi kan gak ngerusak.

54:49Eh, tapi kemarin ada tuh

54:51yang Obsolete.

54:53Kemarin ada yang Obsolete.

54:55Ada.

54:57Bukan Markli, temennya Markli.

54:59Center.

55:01Center. Oh iya.

55:03Tapi kan gak breaking.

55:05Kalau cuma HTML tag ya gampang ya.

55:07Cuma kalau misalnya apa?

55:09Iya, kalau udah ada yang pake Center.

55:11Gimana tuh?

55:13Ya gak apa-apa, di render jadi kosong kali.

55:15Maksudnya di render div biasa.

55:17Ini kan.

55:19Deprecated.

55:21Bukan maksudnya.

55:23Bukan Obsolete.

55:25Nggak, deprecated

55:27no longer recommended

55:29dosal. Oh iya, bakal dihilangkan.

55:31Yang dipake gitu.

55:33Bakal dihilangkan kan.

55:35Dihilangkan dari web standard.

55:37Hilangkan.

55:39Terus kenapa Markli tetap

55:41exist ya?

55:43Karena bagus.

55:45Bagus? Bukannya accessibilitynya

55:47kurang bagus?

55:49Ya, biar backwards

55:51compatible aja sih.

55:53Bagus di jamannya.

55:55Bagus di jamannya.

55:57Karena masih banyak yang pakai. Ternyata Center itu

55:59gak banyak yang pakai ya.

56:01Orang udah pakai, mungkin udah

56:03pada pakai

56:05line center aja kali ya.

56:07Udah pakai grid.

56:09Jadi udah lebih ini ya kali ya.

56:11Udah lebih banyak. Iya banyak yang

56:13banyak alternatif CSS-nya.

56:15Kalau Markli bisa pakai animasi, tapi kan

56:17repot. Gak bisa balik lagi.

56:19Iya, benar-benar.

56:21Oke, oke.

56:23Jadi, ya.

56:25Mana tadi? Kita balik lagi ke

56:27ini ya?

56:29Udah, gitu aja.

56:31Ya, sederhana sih. Cuman

56:33impact-nya lumayan.

56:35Udah lah, sudah.

56:37Berguna sekali.

56:39Kalau kita misalkan mau

56:41load dummy data, gitu ya.

56:43Dummy datanya dalam bentuk JSON. Atau bukan

56:45dummy data aja. Mungkin data yang

56:47diimport dari gimana gitu kan.

56:49File-nya dalam bentuk JSON.

56:51Kita punya config custom atau

56:53semacamnya. Iya, config, betul.

56:55Bisa dibaca langsung, bisa diimport

56:57langsung. Malah import, eh,

56:59kalau import CSS itu

57:01JSON modul ya istilahnya ya?

57:03Oh iya, sama ya. Ini JSON modul.

57:05Ada syntaxnya sendiri.

57:07Iya, benar-benar.

57:09Status stage 3.

57:11Belum berarti ya?

57:13Udah lah, udah.

57:15Tapi udah hampir, udah tinggal

57:17potong Vita aja.

57:19Tunggu peresmian aja. Isunya apa nih

57:21istunya? Masih ada isu.

57:23Because feedback.

57:25Should name JSON modul import

57:27be a parser. Itu berapa tahun

57:29ini lah? 2022 sih.

57:31Oh iya. Ini

57:33last month.

57:35Iya, udah aman lah ya ini ya.

57:37Mentar lagi ya. Aman lah. Stage 3 tuh

57:39kan udah hampir pasti.

57:41Itu lulus.

57:43Alright.

57:45Ada lagi, ada lagi yang menarik-menarik?

57:47Itu deh, apa?

57:49Minor.

57:51Minor, tapi lumayan sih yang set HTML.

57:53Set HTML?

57:57Iya.

57:59Oke.

58:01Ini ya.

58:03Nah, cuma ini kepakainya cuma

58:05untuk kalau kita pakai

58:07custom element alias

58:09web component.

58:11Web component.

58:13Baru dengar ini nih. Maksudnya

58:15udah pernah dengar beberapa hari lalu nih set

58:17HTML. Unsaved.

58:19Unsaved.

58:21Kalau HTML biasa kan pakai inner HTML aja kan

58:23misalnya kita mau

58:25manipulate mengabit suatu dom.

58:27Ya, apa?

58:29Blah, div, mydiv, dot

58:31inner HTML sama dengan HTML.

58:33Isi HTML-nya.

58:35Tapi kalau custom element alias

58:37web component kan gak bisa tuh.

58:39Nah, sekarang jadi bisa.

58:41Gitu doang sih intinya.

58:43Kalau misalnya kita mau bikin shadow

58:45dom harus pakai unsaved ini.

58:47Ya kan? Kalau nggak diparsing.

58:49Oh, iya kalau nggak diparsing.

58:51Iya, iya. Ini ya.

58:55Replacement

58:57untuk inner HTML.

58:59Replacement.

59:01Ya,

59:03behavior-nya sama kayak

59:05inner HTML. Cuma

59:07ya itu bisa buat

59:09custom element. Gitu.

59:11Jadi kalau kita pakai buat HTML

59:13biasa juga bisa.

59:15Iya, maksudnya kalau kita punya

59:17custom element.

59:19Misalnya

59:21oh, ya kayak

59:23kayak

59:25date picker, date ya date

59:27custom element. Tapi datenya sudah di-support.

59:29Kalau yang kita bikin sendiri gak bisa

59:31kalau pakai inner HTML. Dia harus

59:33pakai HTML unsaved ini.

59:35HTML unsaved.

59:37Oke, oke.

59:39Jadi kayak itu, jadi kayak

59:41si react aja.

59:43Iya, tahu kan. Dangerous

59:45reset.

59:47Dangerous reset HTML.

59:49Dangerous reset HTML.

59:51Cuma ini trend yang

59:53kocak tapi menarik sih.

59:55Ini juga, kan sebenarnya itu

59:57behavior-nya sama kayak inner HTML.

59:59Cuma bisa, apa, dengan tambahan bisa

1:00:01pakai web component, custom

1:00:03element. Cuma sekarang jadi ada

1:00:05unsaved-nya gitu. Maksudnya, apa,

1:00:07buat menekankan bahwa silahkan

1:00:09kalau misalnya datenya dari

1:00:11sumber datenya ada unsur

1:00:13eksternal, ya silahkan sanitize sendiri.

1:00:15Apa, bukan urusan kami.

1:00:17Kayak dari segi sintaksnya.

1:00:19Memang jadi, ingat react itu sih

1:00:21dangerously set inner

1:00:23HTML. Dulu tuh pas pertama kali

1:00:25belajar, terus pakai tuh kayak,

1:00:27"Ini bercanda apa beneran?" Dangerously

1:00:29set inner

1:00:31HTML.

1:00:33Iya.

1:00:35Banyak tuh.

1:00:37Kalau react itu dia memang

1:00:39ciri hasilnya gitu ya. Huru besar semua. Terus kadang-kadang

1:00:41ada yang mau deprecated, dia tulis dulu kan.

1:00:43Will be deprecated, bla-bla-bla kan.

1:00:45Biar gak

1:00:47banyak yang pakai.

1:00:49Dulu kan kalau line terakhir itu

1:00:51ada yang gak boleh dihapus,

1:00:53ada komennya.

1:00:55If you delete this, the sky will fall.

1:00:57Atau apa-apanya, ada komen,

1:00:59ada bagian yang gak boleh

1:01:01delete.

1:01:03Lupa.

1:01:05Oke.

1:01:07Oke. Nah,

1:01:09ada lagi web API yang baru?

1:01:11Di 2024 atau sebelumnya?

1:01:13Ini aja. Belum kesampaian.

1:01:15Interop aja.

1:01:17Siapa tahu ada yang menarik.

1:01:19Yang Zoom.

1:01:21Kita udah bahas Interop 2024

1:01:23belum ya?

1:01:25Udah kayaknya. Kan sempat yang kita bahas

1:01:27apa yang akan masuk di Interop 2024

1:01:29itu pernah. Sudah, sudah, sudah.

1:01:31JPEC,

1:01:33JPEC Excel,

1:01:35itu sempat di

1:01:37tempat mode ini,

1:01:39tapi gak, gak, gak, gak,

1:01:41gak.

1:01:432024 ya?

1:01:45Itu di link gue kan ada, tuh.

1:01:47Oh, di chat, chat,

1:01:49private chat.

1:01:51Oke.

1:01:53Yang sudah stable aja

1:01:59atau

1:02:01kita bahas.

1:02:03Yang mengenaskan tuh

1:02:07custom property.

1:02:09Di Firefox.

1:02:11Ini kayak gimana?

1:02:13Firefox gak mau ya.

1:02:15Ayo.

1:02:17Ayo lah.

1:02:19CSS custom property.

1:02:21Far.

1:02:23Variable.

1:02:25Serius.

1:02:27Firefox gak mau.

1:02:29Gak, yang apa dulu kan

1:02:31banyak nih bagiannya. Coba aja.

1:02:33Nah, itu add property animation.

1:02:35Jadi yang buat animasi atau buat

1:02:37apa? Oh, gak ada

1:02:39apa?

1:02:41Tau yang mana dia.

1:02:43Variable untuk

1:02:45maksudnya kan

1:02:47CSS custom property tuh banyak.

1:02:49Add property, add property

1:02:51gitu loh.

1:02:53Oh, decorator.

1:02:55Decorator.

1:02:57Kayak decorator gini kan.

1:02:59Kayak decorator, bukan decorator.

1:03:01Kayak, kayak.

1:03:03Ada banyak, kan.

1:03:05Ada berapa.

1:03:07Gak, gak itu.

1:03:09Property cascade.

1:03:11Property.

1:03:13Oh, dia gak support.

1:03:15Property, property schedule.

1:03:17Semua gak.

1:03:19Ya, itu kelihatannya 1.

1:03:21Mesti 1 paket deh. Maksudnya itu fitur-fitur

1:03:23yang sebenarnya harus kerja bareng, kan.

1:03:25Padahal Firefox dulu tuh

1:03:27kalau soal CSS, apa

1:03:29image-nya, apa

1:03:31identiknya. Firefox yang paling

1:03:33pertama ya. Kayak grid dulu.

1:03:35Chrome pun belum support grid.

1:03:37Firefox udah support duluan.

1:03:39Ini gaman apa ya?

1:03:41Ini Linux. Ini apa ya?

1:03:43Itu Chrome

1:03:45di Linux, maksudnya.

1:03:47Yang ini?

1:03:49Kayak React gitu, tapi bukan sih.

1:03:53Kayak Logo React.

1:03:55Windows, bukan.

1:03:57Apa ini?

1:04:01Task Cluster Logo.

1:04:03Task Cluster.

1:04:05Apa itu Task Cluster?

1:04:07Coba aja.

1:04:09Runner-nya dia kali.

1:04:11Tahu deh.

1:04:13Apa lagi?

1:04:15Interop 24/O ini ya?

1:04:17Yang tadi ya?

1:04:19Atau TPS URL

1:04:27socket tuh kayaknya udah

1:04:29stable tuh.

1:04:31Firefox sama Safari yang

1:04:33paling duluan?

1:04:35Popover tadi udah kita bahas ya.

1:04:37CSS nesting juga nyaris.

1:04:43Ini experimental loh.

1:04:49Top experimental.

1:04:51Kalau mau top stable,

1:04:55itu, itu, itu.

1:04:59CSS nesting tuh

1:05:01soon kayaknya. Coming soon

1:05:03to the most stable.

1:05:05Index DB udah

1:05:07bisa dibilang udah ya selesai ya.

1:05:09Udah selesai.

1:05:11Ini ya.

1:05:15Firefox udah duluan.

1:05:17Firefox, Safari paling atif.

1:05:21Cuma nyusul kok.

1:05:23Tadi kan experimentan

1:05:25udah hampir selesai.

1:05:29Oke.

1:05:31Text udah balanced.

1:05:33Firefox udah duluan.

1:05:35Iya.

1:05:37Oke.

1:05:39Oke, sip. Ada lagi?

1:05:43Mari kita tidur.

1:05:47Mari kita tidur.

1:05:49Ya, jadi itu dia.

1:05:53Mungkin daftar

1:05:55apa ya? Web API baru.

1:05:57Atau yang tidak terlalu baru.

1:05:59Yang bisa dicoba.

1:06:01Atau baru masuk baseline.

1:06:03Baru stabil di semua

1:06:05browser.

1:06:07Bahkan tadi kita bahas yang top annotation

1:06:09itu bahkan masih stage 1 artinya

1:06:11masih perdebatan, tapi belum tahu.

1:06:13Cuma ya itu bisa jadi kontroversi

1:06:15dan menarik dikutih ya.

1:06:17Tapi menarik buat

1:06:19lihat cara mikirnya, maksudnya argumentnya.

1:06:21Terus kayak pro kontranya.

1:06:23Kalaupun nanti nggak diadopsi,

1:06:25kita punya

1:06:27kita punya insight ke situ lah.

1:06:29Mau update sekalian?

1:06:31Hari ini.

1:06:33Kemarin kan gue nyoba

1:06:35Paski.

1:06:37Waktu tahun lalu, waktu ngasih

1:06:39presentasi, Paski itu masih

1:06:41nge-bug di Firefox.

1:06:43Dan belum support. Bahkan fatal error.

1:06:45Sekarang sudah

1:06:47lancar jaya.

1:06:49Paski sudah lancar jaya

1:06:51di Firefox. Iya.

1:06:53Web Auton

1:06:55sudah stabil.

1:06:57Sudah stabil di Firefox.

1:06:59Thank you Firefox.

1:07:01Akhirnya saya bisa.

1:07:03Begitu sudah coba, sudah bisa?

1:07:05Oke, berarti sedang

1:07:07mempersiapkan beberapa materi.

1:07:09Iya materinya

1:07:11saya kerjakan ini proposal, jadi

1:07:13saya mau submit salin ke klien.

1:07:15Ayo, makin pasti.

1:07:17Gopi saya.

1:07:19Dua tahun lalu

1:07:21saya mulai kerjakan,

1:07:23setahun lalu saya promosikan. Sekarang baru bisa

1:07:25dipakai.

1:07:27Tau lalu, itu semua tentang

1:07:29Paski WordPress lagi nih.

1:07:31Iya.

1:07:33Oke.

1:07:35Nah.

1:07:37Mudah-mudahan, apa ya. Masih banyak sih

1:07:39yang bisa kita kulik sih sebenarnya.

1:07:41Cuman ini yang menurut kita menarik ya.

1:07:43Kalau menurut teman-teman apa. Yang dinanti

1:07:45nanti apa sih. Boleh

1:07:47dikolom komentar. Meskipun kita tidak live.

1:07:49Tapi kita akan baca.

1:07:51Komentar juga boleh kita

1:07:53teman-teman kirimkan

1:07:55kesana.in. Silahkan ngobrolin web.

1:07:57Topik

1:07:59atau narasumber atau

1:08:01apapun. Bisa kirim kesana

1:08:03nanti kita diskusi-diskusi juga.

1:08:05Jadi untuk malam ini, sekian

1:08:07dulu.

1:08:09Kita ketemu lagi minggu depan.

1:08:11Mudah-mudahan minggu depan kita bisa live. Karena ini

1:08:13tidak live. Tadi lupa ngomong ya.

1:08:15Langsung masuk ke

1:08:17materi. Ya, malam ini kita tidak live.

1:08:19Karena satu dan lain hal.

1:08:21Nanti mudah-mudahan

1:08:23minggu depan kita bisa live lagi dengan

1:08:25topik yang berbeda. Kalau gitu, udahan dulu.

1:08:27Selamat malam. Selamat

1:08:29istirahat. Bye-bye.

1:08:31Bye.