Ngobrolin Web API Baru - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://ksana.in/ngobrolinweb ----------------------------------------------------------------------------------- Bergabung menjadi anggota elit di kanal ini: https://www.youtube.com/channel/UCHhAlFGFCGgIusQkQIqJLYw/join Donasi dapat meningkatkan kualitas kanal ini: 💰 https://karyakarsa.com/rizafahmi/tip 💸 https://saw Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Ringkasan Episode
Bantu KoreksiEpisode ini membahas berbagai Web API baru yang sedang trending atau akan menjadi tren di tahun 2024. Diskusi dimulai dengan penjelasan tentang apa itu Web API—bukan REST API melainkan API yang disediakan oleh browser seperti Storage API, Performance API, dan Observer API yang berlandaskan pada spesifikasi teknis. Beberapa API yang dibahas meliputi View Transition API yang kini sudah mencapai level 1 (client-side) dan sedang menuju level 2 (server-side), Popover API yang kini telah menjadi baseline dan bisa digunakan tanpa JavaScript murni untuk membuat tooltip atau toast non-modal, serta Web Vitals 4.0 yang menambahkan metrik INP (Interaction to Next Paint) sebagai pengganti First Input Delay. Selain itu, episode juga menyinggung proposal TypeScript type annotations untuk JavaScript yang masih dalam tahap perdebatan (stage 1) dan kontroversial karena berpotensi mengubah cara kerja JavaScript secara drastis. Speculation Rules API juga dibahas sebagai fitur baru yang memungkinkan browser untuk melakukan prefetch dan prerender secara cerdas berdasarkan perilaku pengguna, yang sangat relevan dengan tren kembalinya Multi-Page Application (MPA) dengan adanya server-side rendering. Diskusi diakhiri dengan JSON module import yang kini berstatus stage 3, memungkinkan import file JSON langsung tanpa bundler, serta setHTML API sebagai alternatif innerHTML untuk web components.
Poin-poin Utama
- •View Transition API Level 2 - Memungkinkan transisi antar halaman (MPA) tanpa client-side routing, membuat website multi-page terasa secepat single-page application.
- •Popover API - API native browser untuk elemen pop-up non-modal (tooltip, toast, menu) tanpa perlu library tambahan, sudah masuk baseline 2023 dan didukung semua browser modern.
- •Web Vitals 4.0 - Library terbaru untuk mengukur Core Web Vitals dengan dukungan INP (Interaction to Next Paint) yang menggantikan First Input Delay.
- •Speculation Rules API - API baru untuk mengontrol perilaku prefetch dan prerender berdasarkan prediksi browser, sangat berguna untuk Multi-Page Application.
- •JSON Modules - Memungkinkan import file JSON langsung tanpa bundler atau plugin tambahan, sudah mencapai Stage 3 dan hampir resmi menjadi standar.
- •setHTML API - Pengganti innerHTML untuk custom elements/web components dengan fitur sanitasi bawaan untuk keamanan.
- •Type Annotations Proposal - Usulan kontroversial untuk menambahkan type annotation langsung di JavaScript tanpa transpilasi, masih tahap Stage 1 dan menjadi perdebatan di komunitas.
0:00Halo halo halo selamat malam selamat malam selamat hari selasa seperti biasa bertemu lagi
0:25dengan kita bertiga ada
0:26Eka, ada Ivan, ada Riza
0:28iya, kali ini Eka
0:30udah muncul
0:31kali ini Eka udah muncul, setelah minggu lalu
0:34kabur, menghilang
0:36wah seru banget ya kemarin
0:38ya, semua
0:41serius
0:42itu gak ada topik, justru rame
0:44pertanyaannya gak habis-habis
0:47tapi banyakkan
0:49curhat ya kita ya
0:50banyakkan curhat
0:51jadi kita nanti mau merancangkan
0:54sesekali tanpa topik
0:59jadi ya get in touch sama
1:01ini aja sama teman-teman
1:03semua ya teman-teman yang penonton
1:05malah lebih seru
1:06biar tau kondisi di lapangan
1:08besok lagi dong
1:09ya maksudnya besok-besok
1:13bikin
1:14bikin seri kayak gitu
1:16iya kita rencana bikin seri
1:19ada diskusi santai
1:21ada fundamental
1:23Nah kira-kira malam ini kita bahas apa ya?
Lihat transkrip lengkap
1:28Trending
1:29Yang lagi yang akan ngetrend ya
1:32Yang sedang ngetrend atau yang akan ngetrend ke depannya gitu ya
1:35Jadi malam ini kita akan bahas beberapa web API
1:40Baik itu HTML, CSS ataupun JavaScript
1:44Yang disediakan oleh browser
1:49Jadi web API ini bukan REST API ya
1:53bukan service kayak apa ya swapi bukan ya bukan ya ini API yang bisa kita gunakan secara apa untuk
2:03programming ya bisa buat macem-macem contohnya local storage itu ya storage API lebih tepatnya
2:14Storage API, Performance API, Observer API, observer kan ada banyak.
2:24Dan ini sebetulnya semua API ini bedanya dengan produk lain mungkin ya,
2:31maksudnya fitur-fitur yang khusus browser, ini beda web API ini kan berdasarkan standar,
2:39namanya spesifikasi, jadi landasannya itu spesifikasi teknis.
2:43Jadi API ini fungsinya bla bla bla
2:45Terus jadi kayak semacam test case lah
2:49Kalau user melakukan ini
2:52Atau kalau misalnya inputnya seperti ini
2:55Maka prosesnya akan seperti ini
2:57Jadi itu belum implementasi
2:59Nggak ada codingannya sama sekali
3:01Cuma spesifikasi teknis
3:03Nah masing-masing browser
3:05Pertama bebas mutusin untuk mau pakai atau nggak
3:09Mengadopsi atau nggak
3:11Kedua, coding-annya gimana implementasi di masing-masing browser engine ya bebas terserah masing-masing browser.
3:18Cuma harus berlandaskan si spek itu.
3:23Oke, oke. Nah kira-kira di 2024 ini teman-teman punya apa ya, punya web API baru yang udah dipakai atau yang menarik, yang kira-kira menarik, gak boleh di-share?
3:41siapa dulu Eka dulu ya kak yang menarik yang dibahas duluan malah bukan yang dicatatkan itu
3:53sebet paling menarik tetap transition sih enggak itu kan dari tahun lalu soalnya ini kan topiknya
3:59adalah web API baru Nah kalau kalau view transition itu seneng-seneng pribadi aja sih
4:05dari devest tahun lalu topiknya topik togo bahas itu dan sampai sekarang sekarang udah masuk semua
4:13browser yang level 1 level 1 itu yang client-side cuma kalau yang level 2 yang apa server-side
4:21lah ya antar dokumen antar link tuh sayangnya ya masih belum terlalu tapi udah mulai ada ya
4:28udah ada update baru cuma kalau dari berasanya selesai gimana maksudnya antar dokumen antar
4:35dokumen antar antar part dalam jadi kalau misalnya ikhlas.com mengunjungi page yang lain dia klik
4:49bisa ngetransisinya slash full iya bisa transition tanpa client JavaScript ya bisa Maksudnya kita define transitionnya seperti apa tapi tanpa hijack client routing nggak usah pakai router client
5:02itu yang level 2
5:04cuma belum semua browser
5:06si Chrome-nya sudah bisa?
5:08Chrome bisa, bisa pakai flag
5:11demo, demo, demo
5:13belum, besok-besok
5:15oke, pengen tuh gue liat tuh
5:18di itu khusus aja CSS dan apa pokoknya front-end front-end Magic part 2 kan kita pernah tuh dulu
5:26nah ini yang baru ini yang yang di topik ini juga front-end Magic juga sih popover
5:34sebetulnya malah implementasinya ya bisa dijadiin model atau toast atau apapun lah
5:42yang muncul nongol di layar nah ini ini modal itu udah muncul duluan kan modal tapi ya dialog-dialog
5:51dialog-dialog ya ini bedanya bedanya sama dia lupa beda spesifikasinya cuma enggak tahu sih
5:59kalau gue lihatnya mirip-mirip juga ya beda peruntukan aja kayaknya buat hal-hal yang
6:04lebih kecil sama kayak buat apa nanti ada demonya dibawa ininya dulu tentang si epinya dulu ini tuh
6:16sebenarnya kalau yang di Chrome only udah dari dua tahun yang lalu sih dua atau tiga tahun lalu
6:22punya kontennya Mas ada mergel sama Mbak Una itu bahas ini udah lama banget cuma yang bikin menarik
6:31sekarang tuh udah baseline sudah diadopsi oleh versi stabil semua browser dua versi terakhir
6:39ya itu sudah berarti udah aman untuk digunakan ya Iya tetap tergantung user base kita sih aman
6:50atau enggaknya kan tergantung actual user kita cuma ya apa user generic pada umumnya udah lumayan
6:59nah mose udah cukup tinggi lah 22 versi terakhir dua versi stabil terakhir Nah tetap apa konsep
7:11konsep popover versus model versus dialog segala macem tuh penjelasannya itu tuh cuma sebetulnya
7:21ngerti-ngerti juga sih Oh pop popover is being shown the rest of the page is non-interactive
7:28tidak bisa kita nggak bisa interaksi di elemen lain autofocus dikunci ke dalam situ itu modal
7:38Nah kalau non modal Oh gitu baru ngerti sekarang malah bedanya kalau modal itu pop-up yang kita
7:46dipaksa dikunci fokusnya disitu harus berinteraksi dulu jadi contohnya kayak apa cookie consent atau
7:53apalah kan kita nggak boleh lanjut sampai kita nyelesaikan itu, menutup itu.
7:58Kalau non-modal, itu ya pop-up juga muncul di atas layar,
8:04tapi ya kita cuekin boleh, kita bisa berinteraksi dengan sisa isi halaman.
8:09Nah, kalau pop-over API ini non-modal.
8:14Ya, jadi itu kayak toast atau apalah tooltip atau semacamnya.
8:18Tahu kan misalnya ada fitur baru terus sering melihat kan kita icon i gitu.
8:25Nah terus misalnya kita klik atau hover di situ suka muncul penjelasannya.
8:28Kan itu bukan hal yang kritikal yang harus memaksa user nyelesaikan interaksi di situ baru lanjut ke tempat lain kan.
8:35Itu kayak opsional aja.
8:38Oke.
8:39Iya, iya, iya.
8:40Itu bedanya.
8:41Nah ini kan sebenarnya penggunaan apa?
8:44ini pattern UI yang umum
8:47banget ya, selama puluhan
8:49belasan tahun tuh kita kayak
8:50harus pake, ya harus
8:52kalau iseng, kalau kelebihan waktu dan tenaga
8:54bisa bikin sendiri, atau
8:56yang lebih realistis, kita harus cari-cari
8:59apa, library
9:01atau package yang di install biar bisa
9:03bikin fitur ini
9:04terus mengganggu performance juga kan
9:07bikin gini
9:09pake apa ya namanya, swiper
9:11eh bukan swiper, apa namanya
9:12library.js yang untuk
9:15bikin popover-popover gini
9:17popster ya
9:19popster ada juga ya
9:20popster
9:21pop
9:25apa ya
9:27itu mah di UI
9:31component library apapun ada sih
9:33gue lupa dulu ada yang sering
9:37gue pake dulu tuh apa namanya
9:39nah btw
9:41udah ini bingungnya demo khas developer banget deh secara estetis tuh kureng kureng nggak ada sesuai dengan terus apa sense of of estetiknya ya begitulah cuma mau saya apa kan yang penting bisa bisa nunjukin bahwa itu bisa ini bisa dipencet berkali coba generate
10:03sukses tos lagi deh generate file Hai nge-generate file tos nah kan Oh yang ini maksudnya ia boleh
10:14dipakai buat itu boleh dipakai buat misalnya itu tadi information tooltip atau apapun lah yang
10:20pop-up yang non model yang itu tadi enggak enggak ngunci fokus enggak menghalangi interaksi tempat
10:27lain usap menu Woi zaman kapan banget ini jamannya inget gak jamannya DHTML dulu pernah
10:38kita yang ya iya iya dulu pernah baca cuma nggak ngerti sama sekali terus mikir udah nggak bakat
10:45begini-ginian DHTML ya Iya ya dihapus ya iya masa itu apa sih ya iya html kan berhenti ada
10:56transisi dan transisi antara halaman-halaman web menuju ke web application kan aplikasi
11:04Nah di tengah-tengah itu kan ada orang yang punya kreativitas untuk bikin hal-hal yang tadinya halaman web tapi udah mulai dinamis.
11:12Kayak tampilin menu, ada yang kayak hamburger menu di klik ke kanan gitu.
11:18Pokoknya yang interaktif gitu.
11:19Tapi zaman dulu kan masih belum terlalu banyak hal-hal yang seperti itu.
11:23Karena JavaScript tidak digunakan untuk itu.
11:27Itu sih ya.
11:27Nah maksudnya apa? Itu bahasa tersendiri atau gimana?
11:34enggak cuma HTML ketambahan animasi itu punya dynamic ya gitu aja Oh gitu doang Oh tapi bahasa
11:43klien saatnya mencet bisa jadi CSS bisa jadi atau nah ini coba kalau kalau demo demo popover yang
11:56enak di mata coba deh kalau buatannya Mas Adam rjl itu biasanya bagus Oh oh iya kalau dia puh
12:05dia mah jago CSS pasti bagus kita coba ya hab oh Twitter ada linknya link kopennya ada linknya
12:17tadi nge-search doang sih
12:19random
12:21connection
12:25connection
12:27ini ya minimal popover demo
12:31animated if supported
12:32oh animated if supported
12:35ya karena itu kan
12:36itu kan itu biasa
12:38maksudnya HTML CSS biasa
12:40mau di animasi ya
12:42animasi CSS
12:43progressive enhancement
12:46enhancement Oh ini tip gitu doang cek itu doang ini bikinnya banyak lho opacity nggak
12:56itu kan buat animasinya fade-in fade-out ini oh ininya tag-nya popover target ya popover
13:04popover target sama dengan mytooltip mytooltip dia bakal cari elemen HTML apapun yang id-nya
13:13sesuai microtip coba tulis yang panjang deh tip isi tipnya diganti lorem ipsum dolor sit amet
13:20gitu yang bawah yang bawah yang bawah loh kok hilang render-render uang tip-tip punya hujan
13:33punya ujian dan aku punya ujian Oke finish Oh masih lagi dah Oh akan emang segitu tapi
13:48ini ya apa namanya habis itu lihat bentuknya diatur sama sih CSS terserah diatur yang gimana
13:58Oh javascriptnya bahkan gak ada sama sekali ya ini pure HTML dan CSS ya
14:04Kecuali mungkin kalau yang kayak tadi itu toast yang bisa positioningnya
14:11Tadi sesuai jumlah toastnya
14:14Ya gak tau pokoknya kalau mau di enhance pakai javascript mungkin bisa
14:20Tapi ya gak perlu gak harus
14:22Iya ini minimal banget sih demonya
14:25orang judulnya minimal demo Oke ini udah masuk baseline udah bisa dipakai 2023 udah bisa ya baseline 2023 udah 2024 itu enggak masuk baseline April kemarin bulan lalu tapi kan masuk baseline itu kalau sudah dua versi stabil terakhir
14:56semua browser major
14:58nah berarti kan sebenarnya udah dari tahun lalu itu
15:05cuma baru April kemarin
15:06opera android aja udah bisa nih
15:08opera android ini opera mini bukan?
15:10bukan ya? beda ya?
15:12bukan kayaknya bukan deh opera mini itu enggak pakai browser engine apa enggak pakai rendering
15:17engine yang mainstream yang masuk akal tuh enggak masuk akal sama sekali itu mereka punya bahasa
15:25sendiri obml oprah browser merkap paling besar itu enak banget itu bisa bisa biar mereka bikin
15:37sendiri gimana ngomongin di HTML kan ini ada ada ada ininya ternyata pada pengertiannya
15:45dynamic HTML ini style animasinya aja retro collection of Technologies used together to
15:57create interactive and animated website using a combination of static markup languages client
16:01scripting and presentation definition language CSS and DOM ini sebenarnya ya sekarang ya Cuman
16:14dulu kan belum jadi kita bahas untuk ini ya untuk apa sesi khusus nostalgia ya oke apa nggak nyambung
16:29cuma jadi kepikiran mungkin sekian puluh tahun dari sekarang eh atau mesin learning pun udah
16:36nggak ada termnya tersendiri jangan-jangan karena udah kayak dianggap wajar semua produk digital
16:42semua software mungkin udah udah pakai unsur eh atau mesin learning jadi jangan-jangan nggak ada
16:50termnya lagi ya ini ke si DHTML karena ekspektasi standarnya kayak gitu itu udah ya sama juga
16:57juga udah kurang terdengarkan karena semua sudah sudah melakukan praktek-praktek itu ya ngomong
17:07ke Ali eh TWA sama weks ini bukan web.api sih sebenarnya fitur ya fitur web baru eh ini juga
17:16belum lama nih sekitar bulan lalu Chrome bikin eh apa sih web website yang enggak memenuhi heuristik
17:25kriteria PWA sekarang juga bisa di-install seru ya Oh iya bentar cari itunya cari beritanya ya
17:34sambil lanjut aja bahas yang lain Oke kalau dari Ivan ini ada API apa web Vitals ya web Vitals
17:44kalau saya bukan khusus yang webpress, eh webpress lagi bukan web API tetapi mau waru-waru aja ini web vital 4.0
17:56library nya ya library web vital ini bukan yang buat di web API tapi library untuk web vital JS
18:03mau release soon, release kandidat ya
18:08sebelumnya kan versi 3,5 ini library web Vitals yang sebenarnya wrapper
18:17zoom in bete web zoom in dong
18:19sebenarnya web Vitals ini adalah wrapper untuk dari performance API
18:30dari web performance API untuk mempermudah kita melihat oke CLS nya berapa
18:35INP nya berapa
18:37LCP nya berapa
18:39TTF, gak semua itu
18:40Ini kan core web fighter nih yang dia tunjukin
18:43Web fighter yang lain ada
18:45Kayak FCP nya
18:47Apapun yang kalian lihat di
18:49Lighthouse itu menggunakan
18:51Ada semua disini
18:52Ini yang sama gitu, script yang sama
18:55Underlying
18:56Underlying level V nya itu ya berarti
18:59Under the hood nya seperti ini
19:01Lighthouse tuh kayak front end nya aja
19:02Iya
19:03untuk collect data ini
19:05jadi kalau kalian mau collect data
19:07saya pakai ini
19:09untuk collect data saya sendiri
19:12dan langsung saya
19:13push ke google
19:16analitik
19:16saya proses sendiri dari
19:18saya proses ke bigquery
19:22terus nanti bisa lihat
19:23gak sampai bigquery
19:25saya pakai google analitik
19:27reporting sudah bisa lihat
19:29oh CLS saya berapa, INP saya berapa
19:32saya berapa persatuan waktu yang saya mau kerjakan
19:36ya dia kan di list 4.0
19:43All, which is major update. Apa yang ditambahkan? Yang pastinya INP.
19:49Kan INP yang baru tuh, quite vital yang baru, yang tidak disahkan sebagai pengganti total blocking time.
20:03Atau first input delay.
20:06first input delay atau total
20:09blocking time itu diganti jadi namanya
20:11interaction to next pane
20:13update dari web vital library
20:17ini sudah bisa menghitung
20:19INP
20:20INP itu lab berarti lab ya
20:25bukan user
20:26gak harus nunggu interaksi user
20:28interaction to next pane
20:32dua-duanya ya
20:37kan kalau during page load
20:40dia bisa menghitung INP nya berapa
20:42kalau kita scroll
20:44interaction to next pain cycle nya
20:46dia bisa lagi hitung berapa
20:47sama kayak CLS
20:49kalau CLS kan selama
20:52pagenya hidup
20:53CLS nya tetap dihitungkan nanti yang maksimalnya
20:56kita tak tau
20:57INP sama juga seperti itu
21:00Seminggu lagi kata Mas Barry Pollard
21:05Kira-kira kalau nggak ada feedback yang major
21:07Akan jadi resmi 4.0
21:13Ya nanti semuanya update itu page
21:15Kayak page web dev ke update
21:19Terus kemudian lighthouse yang di chrome juga ke update
21:24Pake ini
21:26Wah menarik
21:29ini berarti eh rapper di dari web performance API ya?
21:37kalau mau hitung sendiri dari performance API bisa
21:42low levelnya berarti performance API ini ya?
21:45salah satunya yang digunakan aja ya walaupun yang tadi yang apa yang di webhackers itu buat browser kan ya
21:53ya betul pakai juga seru ya bikin juga pakai API yang sama masai underlying API nya dia
22:06sebenarnya pakai library yang sama coba mungkin ke library tapi mungkin pakai lebih tepatnya
22:14pakai spek yang sama ah ya spesifikasi yang sama tapi kan jes itu kan V8 enggak ngaruh ya enggak
22:25ngaruh enggak ngaruh ya tetap pakai spek yang sama beda V8 kan runtime bukan ya runtime ya
22:31mesinnya mesinnya ya engine-nya ya ini pakai performance normal ini bukan itu sudah lama
22:38performance total cuman apa yang diukur mungkin apa yang diukur beda ada coba kita lihat perbedaannya
22:47performance.measure performance observer ini sama nggak? performance observer ada juga di web API
22:57apa saya kembali-kembali sekarang ya sebelumnya mungkin ini enggak ada tetapi di web ada ya
23:04performance.now itu
23:06iya performance
23:08maksudnya performance.now itu sebelum
23:11di web udah ada lama
23:12cuma yang saya belum tau
23:15di node ada gak?
23:16mungkin gak ada
23:17jadi kalaupun sebelumnya gak ada
23:21ya orang apa maintainernya
23:23node kan timnya node
23:24ngeliat oh ya ternyata itu relevan
23:27dan berguna buat diadopsi ke node.js
23:29bagus lah, maksudnya kan jadi makin streamline
23:31kayak dulu tuh
23:32bingung banget kenapa fetch bisa di browser tapi kalau di server nggak ada fetch
23:38harus install not fetch atau semacamnya
23:42ini kan kasusnya mirip kan cuma di bidang measure apa mengukur performa
23:47cara pakai sama persis loh ini nggak ada beda sama yang JS
23:52berarti speknya sama
23:53saya curiganya Node.js sekarang-sekarang ini memang sedang mendekatkan diri dengan web standar ya
24:00fetch udah di-include kemudian web socket mulai mau di-include nggak tahu udah apa belum
24:08nah beberapa API-API yang standarnya web juga diadaptasi juga ke node.js
24:15kalau gitu baguslah jadi bisa diukur juga dengan berarti javascript yang sama bisa dipakai di
24:23masih di yang sama dengan server walaupun pengukurannya mungkin berbeda ya ininya dimensinya
24:33berbeda ya Iya yang diukur lain beda alam berbeda beda alam tapi sintaksnya sama oke next apalagi nih kalau
24:46dari saya tadi udah web of humans API ada yang menarik lagi nih ini enggak tahu ya tapi ini
24:51belum jadi API ini baru proposal proposal kita dulu pernah ya di episode entah berapa kita bahas
24:58proses dari pertama mengajukan proposal sampai di apa adopsi jadi standar ya entah episode berapa
25:05cari sendiri nah ini berarti statusnya masih stage one ya stage 1 ya masih stage 1 jadi ceritanya
25:14eh ECMAScript ingin menambahkan type annotation atau wah ini pasti bahan perdebatan banget nih
25:24di Twitter atau di Hacker News orang pasti pada bisa jadi kontroversi ya tujuannya adalah
25:32Oh biar kalau misalnya apa nggak perlu transpilasi type bisa langsung jalan di browser ya
25:41ini juga sekaligus apa ya sekaligus membuat node.js kembali berkembang karena kan yang
25:54membuat orang yang berapa ya contohnya saya kemarin pengen pakai typescript tapi males
26:00pakai typescript compiler karena agak lambat jadi saya memilih pakai antara denu atau bun
26:05karena by default mereka udah bisa transpilasi udah bisa kompilasi ke typescript nggak perlu
26:10pakai transpilasi kan gitu kan kalau ini udah di approve kemungkinan besar node.js juga kena
26:16efeknya dan mungkin bisa jadi native typescript bisa jadi native nggak perlu ada transpilasi lagi
26:22transpire lagi Oh tapi paragraf satu itu menarik deh yang atas blablabla kalimat keduanya lebih
26:31cek by type checker netis nor external to JavaScript jadi maksudnya JavaScript nya
26:38JavaScript nya sendiri enggak dipaksa untuk jadi opinionated mengadopsi typescript atau
26:45flow moshe apa behavior type checking nya enggak enggak perlu punya opini tentang itu ya udah kalau
26:51runtime dicuekin aja yang komen cuma berarti kan kalau misalnya apa berarti kita harus semacam
26:59mendefinisikan type checker eksternal kan pas lagi mau jalanin type check-in semacam
27:07jasdok atau semacam flow kali ya bukan bahasa yang di bahasa superscript seperti typescript
27:13kita lihat lagi contohnya nih
27:16coba kalau gue mengerti maksudnya
27:18misalnya variable itu
27:21didepensikan type-nya
27:22integer, berarti dia gak ini ya
27:25sebenarnya gak peduli ya
27:26cuma bisa menerima
27:29warning aja
27:30gak error, maksudnya itu
27:33gak dianggap sebagai syntax error
27:34syntax error, hanya warning
27:37oh, kalau sekarang
27:38kalau sekarang syntax error ya
27:41kalau sekarang
27:42jalan-jalan kalau ya begitu batik Oh batik diignore gitu ya Oh iya kalau pakai jesdo
27:50kan kayak gini kan Iya kayak yang pertama ini kan Nah kalau proposalnya diterima nanti akan
27:56jadi seperti ini nah tapi oke tetapi string tapi miskipun dirantai salah pesatunya salah
28:05enggak ada masalah ini hanya untuk warning develop pada saat development aja
28:14alias enggak berisik kayak compiler kayak transpolnya si typescript itu
28:23ini nya kompilernya berisik tuh kalau salah kalau kita ingin diganggu kan ya maksudnya masing-masing
28:33developer terserah mau install mau apa pake tools itu kalau direset dulu gitu atau mau yang loose
28:41kelihatan bisa ya bebas ya Oke oke ada lagi nextnya nextnya terus ke bawahnya coba lihat
28:51ke bawahnya ke bawahnya ya maksudnya apa? Deskripsinya kayak gimana? sama pakai titik
28:59ya ini yang nanti ya tapi jadi susah banget ntar itu kan ada dikira objek
29:21bisa dikira objek, bisa dikira kondisional
29:25kan tanda tanya
29:28bla bla bla
29:29titik dua gitu kan oh yeah sedangkan kalau tanda tanya titik ya ah itu urusannya si
29:41programmer browser lah yang mikirin itu
29:43akan dibayar sama google
29:45sama apa sama apple sama
29:47firefox
29:48belum tentu juga diterima ini proposalnya ini
29:51cukup kontroversi sih pasti akan
29:53ada product
29:54sama pihak browser
29:56karena males implementnya
29:59nanti yang duluan nanti itu Microsoft Edge yang duluan karena kan typescript dikembangkan di
30:08Microsoft kan, sisa satu entity. Tadi pas di jalan juga sempat dengar podcast kan ada apa kenapa
30:20typescript itu jarang ada tools yang kayak misalkan type checking only terus ternyata kata nggak tahu
30:27ini bener atau enggak ya bisa ditek benerannya atau kalau salah tolong dikoreksi katanya typescript
30:34itu tidak open untuk spesifikasinya tuh bahas secara bahasa enggak ada enggak di open mungkin
30:41sama Microsoft ya jadi terus seperti biome yang yang apa yang baru kayak linter gitu dia mau
30:50cek typescript itu biar itu menebak-nebak sendiri jadi enggak ada spesifikasinya seperti JavaScript
30:59kalau kita mau bikin parser untuk JavaScript kan udah ada spesifikasinya kan gitu kan kita
31:04mau bikin engine ya kita tinggal ngikutin aja ya typescript enggak ada berarti emang semi apa ya
31:13Hai semi-semi close-up lah ya ya semeter tutup bukan tertutup kodenya tapi cara kerjanya ya
31:24prinsip kerjanya harus melihat source code-nya kan bukan spesifikasi ya begitulah scroll ke yang
31:33menarik ke bawah efeknya tuh kalau misal kalau yang kodingan ini sih ya udahlah kayak gitu
31:39artinya pahamlah ada efeknya di bawah-bawah lagi hausian generik suhu ada jenis gaya
31:48berita script lain intinya type script semua sih ada di sini
31:54omit it cuy Ken ada yang up for debate itu juga menarik ambien file apa DTS
32:04function overload
32:06ini kue peh
32:10kayaknya surem deh
32:11kagak lolos kayaknya
32:13yaudah
32:14lanjut lanjut
32:18lanjut lanjut
32:20oh 3 tahun yang lalu
32:22udah 3 tahun ya
32:23nah
32:25ini optional
32:29jadi argumen, saya argumennya proposal ini
32:31ada kebutuhan dari ekosistem
32:35ini solusinya
32:37tanpa mengharuskan semua developer
32:39untuk pakai type checking
32:41terus yang paragraf ketiga
32:47menarik
32:47bukan perkara javascript
32:51harus punya type atau enggak sih
32:52cuma kalau mau pakai type
32:55gimana caranya
32:56gimana cara
32:57bekerja javascript bisa bekerja dengan
33:00type
33:01oke seru ya masih ini argumen dari sudut pandangnya si proposal ini terus Kenapa
33:13enggak bikin type system sekalian jadi TC 39 di apa itu nya ya badan yang membuat ECMAScript
33:22ini nih is wrong wireless go around web compatibility
33:29jadi secara implicit ini kayaknya kayak kita dikasih tahu nggak akan
33:37gak JavaScript nggak bakal bisa berubah sederastis itu ya entah itu perkara type
33:43atau apapun kedepannya nggak bakal bisa ada perubahan drastis karena nanti nggak
33:48backwards compatible kan Yes bikin dua rantai banyak di browser ya gede lah bentrok nggak jadi
33:57bentrok bisa antara satu sama-sama sama-sama modifi dong ngaco nanti yang satu iya butuh
34:09jokowi 2 sama jokowi 3 nanti nanti ada bikin terus ya oke oke lanjut lanjut lanjut kita lanjut ke mana lagi nih apa ya yang menarik ya spesifikasi itu tuh sorry apa
34:35speculation
34:35speculation rules API
34:38speculation rules nah ini juga baru nih menarik nih
34:41wah ini baru banget ya
34:43baru banget
34:44fresh from the oven
34:46ini ada videonya juga ya
34:51jaseline
34:51iya
34:53pernah kita undang kekian bukan jengkelin ya jeslin itu zaman jengkelin TV show zaman kapan
35:05intinya ini untuk mengkustomize behavior prirender atau privets kan dulu kita semua ditaruh link
35:13apa link teks tuh terus ada yang di ada yang obsolete ya prirender kayaknya terus agak bingung
35:20buat behaviornya antara satu path dan lainnya.
35:26Nah, ini dibikin kayak satu blok untuk mengatur behavior pre-fetch
35:32atau pre-render yang kita mau dan semacam prioritas lah,
35:36semacam urutannya.
35:39Si browser bisa diberikan power untuk nge-prediksi,
35:45meng-spekulasi apakah link itu akan di klik atau enggak, di-render, di-prefetch atau tidak.
35:59Jadi browser yang akan menghitung opportunity itu, probability itu berdasarkan history yang ada di browser kalian sendiri.
36:10jadi gak ada hubungannya sama
36:13terparti jadi berdasarkan
36:15berdasarkan kita punya
36:17behavior sendiri
36:19berarti ini kayak
36:21apa ya
36:22recommendation system ya
36:25ini pake AI
36:26lebih tepatnya
36:29seperti
36:29guest js pernah denger gak
36:32ya ya pernah
36:34itu buatannya google juga
36:37itu dulu guest js
36:39bukan pakai S
36:41S nya menebak
36:42iya iya iya salah
36:44ini
36:46salah satu library yang pernah
36:49saya mau
36:49coba
36:53untuk client project tapi
36:55gak berhasil saya
36:57ini
36:58karena harus
37:01konek ke
37:02harus konek ke itu harus konek ke
37:05google analytics
37:06jadi
37:08data Google Analytics kita
37:10kita kasih, masukin ke
37:12connect ke
37:14ke library ini
37:18nanti
37:19dia connect langsung
37:22yang
37:23ribet lah setupnya
37:26oh, udah ada buat next.js
37:28sebenarnya ya
37:29oke
37:32dan ini kan
37:34contohnya semua
37:35lanjut lanjut lanjut
37:38ya itu kan contohnya semua kan rata-rata kan sudah pakai webpack atau Gatsby segala sesuatu
37:44saya kan static saja pakai WordPress dan setupnya jadi ribet karena bukan bukan kayak prefetchingnya
37:52seperti SPA gitu kan jadi sebenarnya saya pakai yang static gini gitu dan di belakangnya itu
37:58pakai note jadinya ribet tetap nggak ada ya dengan PHP sudah lah nah kalau pakai ini nih
38:13spekulasi ini semuanya di web jadi prefetching dan prerender si webnya yang menentukan berdasarkan
38:24kita coba langsung ke example nya deh
38:27ini dia
38:30prerender
38:34when, where
38:36and make
38:38slash log out
38:41or no prerender
38:42kalau prefetch
38:45kalau url nya
38:47next.html atau next2html
38:49enak ya
38:52Ini bisa dibedakan setiap halaman kan, jadi kita bisa nge-build role itu berdasarkan server site render.
39:03Jadi misalnya saat lagi di page apa, saya bisa kasih role itu, saya di landing page, maka yang saya kasih role-nya pre-fade atau pre-render thank you page.
39:15Karena siapa tau sudah selesai, waktu dia muncul thank you page, cepet.
39:19karena kita yang
39:26dari sisi server
39:27nah
39:28hmm
39:31menarik menarik menarik
39:32nah ini juga
39:33kalau artikel yang lebih enak dilihat itu tuh di chat
39:38gimana gimana
39:39oke
39:40ya ke ini dulu deh
39:42ke bahannya Eka dulu
39:44nah speculation rules improvement
39:48sambil nunggu loading
39:50yang menarik buat saya ini nih bagian ini nih
39:52bagian ini nih and so make sense for multi-page application rather than single-page application
39:56karena kan sekarang trennya tekan menuju ke MP kan balik ke MPN banyak Iya dengan ada react server
40:07komponen lah ada spell kit ada quick ada macam-macam kan ada Astro juga jadi dengan apa
40:15si si pengembang web juga dia melihat Wah nih kayaknya terakhir menuju MP3 make sense akhirnya
40:21dibuatlah spekulasi nge-roll API ini mungkin gitu ya dan kalau pakai kalaupun ada client-side
40:29routingnya neke mesin XJS gitu ya akan kalau misalnya emang support it bisa pakai client-side
40:34routing tapi kan sebetulnya itu SSR juga kan jadi bisa dianggap bisa punya bingung VR MP juga
40:40benar-benar ditambah lagi dengan apa tadi ya transition API udah deh lengkap Iya dokumen
40:53rules rules nya dalam bentuk script begini ya apa jesen jadi nggak ngerender sama browser ya
41:02kan diskip diskip dan juga enggak di script ini kan dia enggak waktu di-paste dia nggak
41:09dipeduliin gitu kayaknya blablabla dicoyokin nggak blocking nggak blocking sama sekali
41:16nggak blocking di domnya cuma ngasih tahu ke si browsernya sendiri apa mesin mekanisme
41:24Browsernya
41:25Oh bisa pakai CSS selector
41:29Tadi
41:29Oh menarik
41:31Berarti kita bisa ngasih link itu
41:33Oh saya mau link ini
41:35Di pre-render
41:37Link itu gak ada
41:38Bisa
41:40Karena kalau logout di pre-render
41:42Dia ke logout terus
41:44Iya kan
41:46Iya bener
41:48Kan kalau link logoutnya di pre-render di belakang
41:51Dia bakal ke logout terus
41:52Dia manggil logout
41:54Oke berarti bisa bisa prerender ini mungkin ini ini op-in gak sih by default yang enggak kan
42:08maksudnya enggak by default yang ada enggak ada spekulasi Woi apa itu Oh katas katas ada
42:15warning-warning Oh ya merah-merah kosong ini oferspesialisasi itu over-reviewing CPU kos dia
42:28baca dari mana Oh dia baca dari history browser kita ya bukan hati-hati kalau terlalu banyak yang
42:35kita spekulat dan untuk mint untuk minta dipercaya masalah satu halaman kita mungkin halaman kita
42:41yellow pages yellow pages ya kan terus kemudian ada 10.000 link masih kita pre-render semua ya
42:49ngedos ngedos server kita sendiri kan maksudnya gitu dan browsernya juga kan apa main threadnya
42:58mungkin kerjanya jadi ekstra ya karena ngecek satu persatu ini wah ini relevan nggak ya perlu
43:03freehatch atau prerender atau enggak
43:05ini keren nih
43:12kalau misalnya kita
43:13keren nih kalau misalnya ini
43:14prerender ini
43:16digabungkan dengan
43:18intersection observer kali ya
43:21atau lazy load
43:22jadi semakin orang
43:23ingat nggak kalau misalnya kita yang pakai
43:26kayak twitter kalau scroll
43:28baru dia muncul
43:30kan kalau pakai ini
43:32bukan maksudnya hanya link yang ada di above the fold itu yang muncul itu yang
43:44tidak usah sampai semua iya mungkin saya bisa saya nanti bisa feedback kalau itu
43:56dikombainya sama view transition yang level 2
44:00wah seneng banget tuh
44:03MPA, SSR udah kayak nanti lama-lama
44:08hampir gak bisa dibedain sama SPA ya kan
44:12karena di klik nih secepatnya udah diambil duluan
44:15langsung fade in fade out iya seperti ini memang trendnya memang diarahkan ke sana kali ya diarahkan ke sana perbedaannya atas sama bawah ini chrome only atas sama bawah ya lihat oh source ada
44:33source-sourcenya dokumen kalau di bawah apa enggak ada source-nya baca penjelasan lah di atas
44:40make the source key optional
44:44since, oh gak harus
44:46pakai source, karena bisa
44:48di-invert dari
44:50URL atau
44:52where, oh gitu
44:54these two speculation
44:57rules are identical
44:58ini dianggap sama
44:59karena udah ada where-nya, browser bisa
45:02mengkalkulasi sendiri
45:04bisa ngira-ngira sendiri
45:07jenis source-nya itu apa
45:08nggak masih pakai script lo bisa pakai http header loh turun tuh bisa pakai
45:14Oh iya iya itu ah ini etik di webserver ya Iya jadi kayak ini kayak manifest.com Jason
45:29Hai adik manifest di kayak manifest
45:32Alright Scroll ke bawah ini seru sih udah ada beberapa yang mengadopsi walaupun masih
45:45baru ya dan hanya masih bisa satu domain kan ya nggak bisa juga cross-domein kan
45:51ya coba coba coba di klits
45:57ntar habis lo ininya cateringnya
46:02udah warning buka buka buka sambil buka DevTools Network sambil buka YouTube
46:12terus kalau kita over dia akan muncul gitu ya
46:26makasih ya kita coba coba reload Oh ya dulu ya
46:35sudah ini common fruit Oh ini masih kamu
46:45over its link to the render it mana ini bukan chrome-nya udah Chrome 124 belum
46:58ini bukan chrome kanari kanari oh 126 126 malah kenapa ya nggak bisa coba-coba
47:09coba ke jadi penasaran api support in this browser support edit speculation rule-rule
47:18yang suruh dibuat sendiri gitu bukan bukan sudah ada sudah sudah edit aja kan moderate
47:26kemudian ini di application bukan di Network Oh gitu eh application mana ya
47:35speculation Oh ada spekulasi ya ya
47:41bisa di-roll di-roll di-roll
47:47ini ada warning
47:56ya speculation coba 18 not trigger ya baru ruleset dipencet aja kamu itu udah teringat
48:05ke-16 juga oh speculation speculation nah ini jadi kalau olive diklik maka dia udah langsung
48:18render ya 404 enggak ada beneran contoh behaviornya coba ke yang 404 yang ini enggak
48:38tapi enggak tahu itu pakai ini halaman ini pakai website ini Iya iya iya iya
48:48ini kan merangkap demo macem-macem API baru ya lagi persiapan lagi persiapan
48:56Google I o ini biasanya Oh ini teaser berarti ya teaser ya ternyata episode
49:07adalah episode teaser untuk Google Ayo 2024 tentang web ya kita enggak tahu kita sendiri enggak tahu topiknya apa masih coming soon tapi kita ini pasti masuk deh Oh iya iya iya iya berarti ini ditambahin baru ya ada background service sendiri ya
49:29kita asumsinya kan network ya asumsinya network
49:41ternyata behavior baru ini kayak di-streamline di satu tempat terpisah
49:49balik ke screen yang tadi deh yang developer chrome.com yang blog post
49:56blog post yang ini ya
49:59yang ini
50:01ya nah scroll ke bawah
50:07bawah lagi
50:09Nah ini yang penting platform support
50:11Apa? Atas sedikit
50:12Masih lagi proses
50:15Standarisasi
50:16Jadi seneng boleh tapi jangan seneng-seneng
50:19Amat
50:19We are also working hard to standardize the API
50:23Lewat WICG
50:24Jadi masih dalam proses
50:26Kalau misalnya pengen tau diskusi-diskusinya
50:29Ya mungkin itu bisa di
50:30Klik
50:31Sudah ada wordpress
50:34Sudah ada wordpress
50:35Sudah ada pluginnya
50:38spekulasi mudah ada Wow cepet sekali ini sebab ini tingkatnya spekulatif juga sebenarnya belum
50:47diadopsi banyak browser ya spekulasi aja udah bikin lagi aja saya percaya sama yang seru
50:55Kenapa tuh ya itu pada adopsi juga Scroll aja ke bawah Oh Astro udah Wow cuma mungkin
51:06experimental tapi ya seru sih dulu pun waktu view transition API yang level 1 itu salah satu yang
51:17pertama kali mengadopsi meta framework itu astro yang paling terdepan paling pertama baru-baru
51:26launching 4.2 kan berlunching kan dia ini poin 2 Januari sih masih eksperimental ini soalnya
51:41yang Januari kemarin 4 poin berapa ya 4.4 ya yang baru ya enggak tahu 4 sekian lah ya intinya udah
51:54nama ini ya define config untuk konfigurasinya
51:57prefetch to experimental client prerender true
52:00nice coba tuh contoh penggunaannya scroll ke bawah
52:05if the document prerendering render disable
52:11oke sederhana
52:14seru sih astro itu salah satu meta framework yang
52:19aktif mengadopsi standar web API
52:23jadi punya approach yang beda ya kalau next.js kan dia semua dia bikin sendiri ya walaupun
52:29eventually kalau web API nya ada ya akhirnya di apa streamline juga cuma kalau astro pendekatannya
52:35apa kejemput bola lah ke web API yang baru yang masih experimental pun dipakai ya cuma di di
52:42jadi mereka juga experimental juga jadi enggak ngeganggu yang stable
52:48uh oke mudah ya lanjut satu lagi atau dua lagi Nah kalau dari saya ada ini nih apa Jason modul
53:00apa touch Jason modul itu kalau dulu atau pun sekarang kalau misalkan kita mau import dari
53:09jesen kan harus pakai bundler kan ya at bander biasanya kalau dari webpack itu ada extensionnya
53:16untuk loading jesen nah ini sudah netizen untuk bisa bahkan untuk bisa batu bisa baca jason
53:25udah import-import dari jason bukan import dari jason Jadi kalau kita punya jesen data kita bisa
53:35langsung nggak perlu pakai plugin nggak perlu pakai bander ya nggak perlu Jason pars enggak
53:44perlu desain betul Wah ini dulu bagian dari import atribus proposal apalagi itu bad it
53:52was resolved waktu meeting musim 4 tahun lalu Juli 2020 disepakati dipecah jadi proposal yang
54:00beda nice motivasi yaitu biar bisa bang biar bisa mengimpor jason file ya kalau yang begini semua pasti langsung setuju kalau yang tadi type apa type terlalu berani netik opinionated soal betul betul ada orang yang suka tapi di
54:24sisi yang lain kan kita si web ini harus menjaga tetap menjaga kompatibilitasnya kan tetap harus
54:30bisa membuka web dari tahun kapan gitu kan jadi agak berat sih bakal bakal ada enggak sih di
54:37obsolete gitu at some point Iya kalaupun obsolete nggak boleh breaking kan kayak
54:44misalnya Markli atau apa bling gitu enggak enggak jalan tapi kan enggak
54:49rusak kalau tapi kemarin ada tuh yang obsolete kemarin ada yang obsolete
54:54Iya ada ada ada ada bukan Marky temennya Marky center center center oh iya
55:03tapi kan gak breaking kalau cuma HTML tag ya gampang ya cuma kalau misalnya apa Iya kalau
55:10udah ada yang pakai center browser gimana tuh ya nggak papa di render jadi kosong kali masih
55:15di render div biasa ini kan kita ngerender element diperkirkan maksudnya bukan asole
55:25hilangkan nggak deprikated no longer recommended dosa Oh ya bakal dihilangkan dipakai itu bakal
55:33dihilangkan kan dihilangkan dari webstandard akan dihilangkan terus kenapa market tetap tetap
55:41eksis ya karena bagus bagus karena masih banyakannya accessibility nya kurang bagus
55:48ya lebih kompetibel aja sih dengan resiko masih bagus di zamannya bagus di zaman karena masih
55:57banyak yang pakai ternyata center itu enggak banyak yang pakai orang udah pakai mungkin udah
56:03udah pada pakai excel line center aja udah pakai bagri jadi udah lebih ini ya kali ya udah lebih
56:11Iya banyak yang mau saya banyak alternatif CSSnya.
56:15Kalau Markui bisa pakai animasi tapi kan repot.
56:17Nggak bisa balik lagi.
56:19Iya benar-benar.
56:21Oke oke.
56:23Jadi ya.
56:25Mana tadi? Kita balik lagi ke ini ya.
56:28Jason ya.
56:29Udah gitu aja.
56:31Ya sederhana sih.
56:32Cuman impactnya lumayan.
56:35Iya.
56:36Udah loh.
56:38Berguna sekali.
56:39kalau kita misalkan mau load dummy data gitu ya, dummy datanya dalam bentuk JSON
56:44atau bukan dummy data aja, mungkin data yang diimport dari gimana gitu kan,
56:48filenya dalam bentuk JSON.
56:50Kita punya config custom atau semacamnya.
56:53Iya, config, betul. Bisa dibaca langsung, bisa diimport langsung.
56:58Malah import, eh kalau import CSS itu CSS module ya istilahnya ya?
57:03Oh iya, sama ya.
57:04Iya, ada syntax CSS module.
57:07Iya, iya, iya. Benar, benar.
57:08status stage 3 stage 3 belum berada udah tapi udah hampir udah tinggal tinggal tunggu potong
57:17kita aja tunggu peresmian isunya apa nih isunya masih ada isu because feedback should name Jason
57:26module import by be a part of tahun lalu gila 2022 sih Oh iya ini last month ya udah aman
57:36ya ini ya bentar lagi ya aman lah stage 3 tuh kan udah apa hampir pasti ya itu lolos Alright
57:45ada lagi ada lagi yang menarik-menarik itu deh apa minor minor tapi lumayan sih yang HTML
57:53set HTML ya oke nah ini ya Nah cuma ini kepakainya cuma untuk kalau kita pakai
58:07custom element alias webcomponent komponen baru dengar ini masih udah pernah dengar
58:16beberapa hari lalu nih set HTML handset save kalau HTML biasa kan pakai inner HTML aja kan
58:23kita mau memanipulasi mengupdate suatu DOM ya apa bla div mydiv.innerhtml sama dengan HTML
58:33isi HTML nya tapi kalau custom element alias web component kan nggak bisa tuh nah sekarang jadi
58:40bisa udah gitu doang sih intinya contohnya kalau misalnya kita bikin shadow-shadow DOM harus pakai
58:46unsafe ini ya kan kalau nggak diparsing Oh ya kalau nggak diparsing ya ini ya
58:52replacement for inner HTML replacement
59:00ya it behavior nya sama kayak inner HTML cuma yaitu bisa buat
59:09custom element gitu jadi mau kalau kita pakai buat HTML biasa juga bisa
59:14ya maksudnya kalau kita punya custom element misalnya oh ya kayak apa kayak date picker
59:25date ya date custom element tapi date kan sudah disupport kalau yang kita bikin sendiri nggak
59:30bisa kalau pakai inner HTML dia harus pakai HTML unshift ini HTML unshift oke oke jadi kayak
59:40do itu jadi kayak siriak aja set HTML dangerously set HTML cuma ini trend yang kocak tapi menarik
59:54ini juga, kan sebenarnya
59:56itu behaviornya sama kayak inner HTML
59:58cuma bisa, dengan tambahan
1:00:00bisa pakai web component
1:00:02custom element, cuma sekarang jadi
1:00:04ada unsafe-nya gitu, maksudnya
1:00:06buat menekankan bahwa
1:00:08silahkan kalau misalnya datanya
1:00:10dari sumber datanya ada
1:00:12unsur eksternal, silahkan
1:00:14sanitize sendiri, bukan urusan kami
1:00:16kayak dari segi
1:00:18sintaksnya, yang emang jadi
1:00:20ngetriak gitu sih, dangerously
1:00:22set inner HTML
1:00:23TML dulu pas pertama kali belajar terus pakai tokek ini bercanda beneran ada dangerous riset
1:00:30apa inner.tml banyak tuh kalau ria gitu dia memang ciri khasnya gitu ya huruf besar semua
1:00:40terus kadang-kadang ada yang mau depresi dia tulis dulu kan will be depresi tetap belakang
1:00:45biar enggak enggak banyak yang cuma di dalam kodenya apa sih dulu kan kalau lain terakhir
1:00:51ada yang gak boleh dihapus
1:00:53ada komennya
1:00:54if you delete this, the sky will fall
1:00:57atau apapunnya ada komen
1:00:58ada bagian yang gak boleh di
1:01:00delete
1:01:01oke
1:01:04oke
1:01:07nah ada lagi web API yang baru
1:01:10di 2024 atau sebelumnya
1:01:13ini aja
1:01:13belum kesampaian
1:01:15interop aja
1:01:17yang menarik
1:01:19yang Zoom. Oh iya, kita udah bahas Interop 2024 belum ya?
1:01:24Udah kayaknya kan sempet yang kita bahas apa yang akan masuk di Interop 2024 itu pernah sudah sudah sudah ada jpeg excel itu sempat di sempat mau di ini tapi gak di ini
1:01:41interop 2024 ya
1:01:44itu di link gue kan ada tuh
1:01:47oh di chat
1:01:49di comment
1:01:49di chat oke
1:01:56yang sudah stable aja atau ke-13 yang mengenaskan tuh custom property di Firefox kayak gimana
1:02:12ya mungkin yang masih yang kan suka degenerasi terbaru enggak yang apa dulu kan banyak nih
1:02:31bagiannya coba aja Nah itu at property animation jadi yang buat animasi atau buat apa enggak ada
1:02:38atau yang mana ya variable untuk memasukkan eh banyak at property at property gitu loh
1:02:52oh oh decorator decorator kayak decorator gini kan kayak decorator bukan decorator kaya kaya
1:03:01ada banyak kan ada beberapa mau dia eh enggak enggak itu enggak ini propertika skate properti
1:03:13Oh dia enggak enggak support properti properti schedule semua enggak ya itu kelihatan satu
1:03:20musik satu paket deh maksudnya itu fitur-fitur yang sebenarnya harus kerja barengan pada Firefox
1:03:27itu tuh kalau soal CSS apa image-nya apa identiknya Firefox yang paling pertama ya
1:03:33kayak grid dulu Chrome pun belum support grid Firefox udah support duluan
1:03:38ini gambar apa ya ini ini Linux ini apa ya itu Chrome di Linux maksudnya yang ini
1:03:48kayak react gitu tapi bukan sih kayak logo ria kau Windows bukan apa ini stas cluster logo pas cluster coba aja
1:04:08Hai pasarnya dia kali tahu deh hehehe apalagi interop 2.2.2.4 ini ya yang tadi ya
1:04:19atau TPS yoram for socket tuh kayaknya batik udah mau udah udah stabil tuh Firefox sama
1:04:32Safari yang paling duluan over tadi udah kita bahas ya udah hampir CSS nesting juga nyaris
1:04:44ini ini experimental loh top XO ya kalau mau tetap stable itu tetap tetap nah stables CSS
1:05:00itu Sun kayak coming soon to the most
1:05:03soon ya ya
1:05:04index DB udah
1:05:06bisa dibilang udah ya selesai ya
1:05:09udah
1:05:09ini ya
1:05:14just kasihan
1:05:15powerfox safari
1:05:20paling aktif cuma nyusul kok
1:05:22tadi kan yang dikatakan
1:05:24sudah hampir
1:05:26sudah selesai
1:05:27oke
1:05:30x-rap balance
1:05:32airfox udah duluan
1:05:35iya
1:05:36oke
1:05:38oke, sip
1:05:42ada lagi?
1:05:45hmm, udah dulu
1:05:46mari kita tidur
1:05:46ya, jadi
1:05:52itu dia, mungkin
1:05:54daftar apa ya, web API
1:05:56baru, atau yang tidak terlalu baru
1:05:58yang bisa dicoba
1:05:59ya tapi mungkin baru masuk baseline baru stabil di semua bahkan tadi kita bahas yang tapi
1:06:09notasi itu bahkan masih setiap satu artinya masih perdebatan tapi belum tahu cuman yaitu bisa jadi kontroversi dan menarik diikuti ya tapi menarik buat cara mikirnya maksudnya argumennya terus kayak pro kontranya
1:06:22ya ya ya
1:06:23kalaupun nanti gak diadopsi kita punya ya kayak kita punya insight ke situlah
1:06:29mau update sekalian hari ini kemarin gua itu kemarin kan gua nyoba paski
1:06:36kan waktu tahun lalu
1:06:38waktu ngasih presentasi paski itu
1:06:40masih ngebug di firefox
1:06:42dan belum support
1:06:44bahkan fatal error
1:06:45sekarang sudah lancar jaya
1:06:47pasti sudah lancar jaya
1:06:50di firefox
1:06:51web outen
1:06:54web outen
1:06:56sudah stabil
1:06:57sudah stabil di firefox
1:06:59thank you firefox
1:07:01akhirnya saya bisa
1:07:02begitu sudah coba udah bisa
1:07:04Oke, berarti sedang mempersiapkan beberapa materi.
1:07:10Iya, materinya saya kerjakan ini proposal,
1:07:12jadi saya mau submit-submit ke klien.
1:07:15Ayo, nanti pasti.
1:07:18Mantap, mantap.
1:07:20Dua tahun lalu saya mulai kerjakan,
1:07:22setahun lalu saya promosikan, sekarang baru bisa dipakai.
1:07:25Tahun lalu talknya event semua tentang paski WordPress lagi nih.
1:07:30Iya.
1:07:30Iya oke nah mudah-mudahan apa ya masih banyak sih yang bisa kita kulik sih sebenarnya cuman ini yang
1:07:41yang menurut kita menarik ya kalau menurut teman-teman apa yang dinanti-nanti apa sih
1:07:45boleh di kolom komentar meskipun kita tidak live tapi kita akan baca ya komentar juga boleh kita
1:07:53teman-teman kirimkan ke kesana.inselasengobrodenweb
1:07:56topik atau narasumber
1:08:00atau apapun bisa kirim
1:08:02ke sana nanti kita diskusi-diskusi juga
1:08:04jadi untuk malam ini
1:08:06sekian dulu
1:08:07kita ketemu lagi minggu depan
1:08:10mudah-mudahan minggu depan kita bisa live karena ini
1:08:12tidak live tadi lupa ngomong ya
1:08:14langsung masuk
1:08:16ke materi ya malam ini
1:08:18kita tidak live karena satu dan lain hal
1:08:21nanti mudah-mudahan
1:08:23minggu depan kita bisa live lagi dengan topik yang berbeda.
1:08:26Kalau gitu, udahan dulu.
1:08:27Selamat malam. Selamat istirahat.
1:08:30Bye-bye.
Suka episode ini?
Langganan untuk update episode terbaru setiap Selasa malam!
Episode Terkait
13 Mei 2025
Web Performance Update - Ngobrolin WEB
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...
21 Mei 2024
Inovasi Web dari Google I/O 2024 - Ngobrolin WEB
Penasaran dengan perkembangan terbaru di dunia web yang diperkenalkan oleh Google pada konferensi tahunan mereka, Google...
21 Mei 2025
Ngobrolin React Server Component
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. ...