Ngobrolin Web API Baru
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.
Halo, halo, halo. Selamat malam.
Selamat malam.
Selamat hari selasa seperti biasa.
Bertemu lagi dengan kita bertiga. Ada Eka, ada Ivan, ada Riza.
Kali ini Eka udah muncul.
Kali ini Eka udah muncul, setahun minggu lalu kabur, menghilang.
Wah, seru banget ya kemarin ya.
Yah, semuanya.
Serius, itu gak ada topik, justru rame.
Pertanyaannya gak habis-habis.
Tapi banyakan curhat ya kita ya.
Banyakan curhat.
Jadi kita nanti mau merancangakan
sesekali tanpa topik, jadi ya
get in touch sama ini aja, sama
temen-temen semua ya.
Temen-temen yang penonton.
Malah lebih seru, biar tau kondisi di lapangan.
Besok lagi dong.
Karena fungsi.
Iya, mustahil besok-besok.
Ya, bikin seri kayak gitu.
Mustahil bikin.
Iya, kita rencananya bikin seri.
Ada diskusi santai, ada fundamental.
Nah, kira-kira malam ini kita bahas apa ya.
Trend ini.
Yang akan ngetrend ya.
Yang sedang ngetrend atau yang akan ngetrend ke depannya gitu ya.
Jadi malam ini kita akan bahas beberapa
Lihat transkrip lengkap (1905 segmen lagi)
web API, baik itu HTML,
CSS, ataupun JavaScript.
Yang disediakan oleh browser.
Jadi web API ini bukan
REST API ya. Bukan
service.
Kayak Swapie, bukan ya.
Ini API
yang bisa kita gunakan secara
untuk programming.
Ya, bisa buat macam-macam.
Contohnya.
Local storage itu.
Storage API lebih tepatnya.
Storage API,
Performance API,
Observer API,
Ya kan?
Dan lain-lain.
Dan ini sebetulnya,
semua API ini,
bedanya dengan produk lain mungkin ya.
Maksudnya,
fitur-fitur yang khusus browser,
ini beda web API ini kan
berdasarkan standar namanya
spesifikasi. Jadi,
landasannya itu spesifikasi teknis.
Jadi API ini fungsinya blablabla.
Terus,
jadi kayak semacam test case lah.
Kalau
user melakukan ini,
atau kalau misalnya inputnya seperti ini,
maka prosesnya akan seperti ini.
Jadi, itu belum implementasi.
Nggak ada kodingannya sama sekali.
Cuma spesifikasi teknis.
Nah, masing-masing browser,
pertama, bebas
memutuskan untuk mau pakai atau nggak,
mengadopsi atau nggak,
kedua, kodingannya gimana,
implementasi di masing-masing
browser engine, ya bebas
di masing-masing browser. Cuma
harus berlandaskan si spek itu.
Oke, 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, nggak
boleh di-share.
Siapa dulu? Eka dulu ya, Eka?
Yang menarik, yang menarik.
Paling banyak catatan.
Nah, yang dibahas duluan malah
bukan yang dicatatan itu.
Sebenarnya paling menarik tetap View Transitions
sih. Nggak, itu kan dari tahun lalu
soalnya. Ini kan
topiknya adalah web API baru.
Nah, kalau View Transitions
itu senangkan pribadi aja
sih dari Defeze tahun lalu.
Topiknya, topik tau gue
bahas itu dan sampai
sekarang udah masuk semua
browser yang level 1. Level
1 itu yang client-side.
Nah, cuma kalau yang level 2,
yang server-side lah ya,
antar dokumen, antar link,
tuh sayangnya ya masih belum
terlalu. Tapi udah mulai
ada, ya, udah ada update baru
cuma kalau dari browser lain. Maksudnya
server-side gimana?
Maksudnya antar dokumen.
Antar dokumen, antar
antar path
dalam...
Jadi kalau misalnya
mengunjungi
page yang lain,
dia bisa
nge-transition.
Ya, bisa transition tanpa client-side
JavaScript. Ya, bisa
dikasih. Maksudnya kita define transisinya
seperti apa, tapi tanpa hijack
client-side routing. Nggak usah
pake router client-side.
Itu yang level 2. Cuma
belum semua browser...
Si Chrome-nya sudah bisa?
Chrome bisa. Si Chrome sudah bisa.
Demo, demo, demo.
Belum, besok-besok.
Oke.
Pengen tuh gue liat.
Itu khusus aja
front-end
front-end magic
part 2. Kan kita pernah tuh dulu.
Besok-besok lagi.
Nah, ini yang baru, yang
di topik ini juga front-end magic juga sih.
Popover.
Popover itu sebetulnya
malah implementasinya
bisa dijadikan modal atau toast
atau apapun yang muncul
nongol di layar.
Kan modal itu sudah muncul
duluan kan?
Modal, dialog.
Dialog.
Ini bedanya sama dialog apa?
Beda spesifikasinya. Cuma
nggak tahu sih. Kalau gue liatnya mirip-mirip juga.
Ya, beda peruntukan aja.
Kayaknya buat hal-hal yang lebih kecil
sama kayak
buat apa?
Nanti, ada demo-nya
di bawah.
Ininya dulu tentang si API-nya dulu.
Ini tuh sebenarnya
kalau yang di Chrome Only, udah dari
2 tahun yang lalu sih.
2 atau 3 tahun lalu punya kontennya
Mas Adam Erjel sama
Mbak Una, itu
bahas ini udah lama banget.
Cuma yang bikin menarik
sekarang tuh udah baseline.
Sudah diadopsi oleh
versi stabil semua
browser, 2 versi terakhir.
Ini berarti udah aman untuk digunakan ya?
Ya, tetep-tetep
tergantung user base kita sih.
Aman atau enggak,
kan tergantung actual user kita.
Cuma ya, apa?
User generic pada
umumnya, udah lumayan lah.
Maksudnya, udah cukup tinggi lah.
2 versi terakhir.
2 versi stabil terakhir.
Koncept popover
versus model
versus dialog, segala macem tuh
penjelasannya itu tuh.
Cuma sebetulnya
ngerti nggak ngerti juga sih.
Popover is being shown,
the rest of the page is
non-interactive.
Kita nggak bisa interaksi di
elemen lain,
autofocus, apa fokusnya
dikunci ke dalam situ,
itu model.
Kalau non-modal, oh gitu,
baru ngerti sekarang malah bedanya.
Kalau model, itu pop-up
yang kita dipaksa dikunci, fokusnya
di situ harus berinteraksi dulu.
Jadi contohnya kayak
cookie consent atau apalah,
kan kita nggak boleh lanjut,
sampai kita nyelsain itu,
menutup itu.
Kalau non-modal, itu
pop-up juga muncul
di atas layar, tapi
kita cuekin boleh, kita bisa berinteraksi
dengan sisa isi halaman.
Nah kalau popover API
ini non-modal,
ya jadi itu kayak
toast atau apalah, tooltip,
atau semacamnya, tau kan misalnya
apa, ada
fitur baru, terus sering liat kan
kita icon I gitu,
terus kita click atau hover di situ,
suka muncul penjelasannya.
Itu bukan hal yang kritikal yang harus
memaksa user nyelesain interaksi
di situ, baru lanjut ke tempat lain kan,
itu kayak opsional aja.
Oke,
iya iya iya, itu bedanya.
Nah ini kan sebenarnya
penggunaan apa, ini
pattern UI yang umum banget ya,
selama puluhan,
belasan tahun tuh, kita kayak
harus pakai, ya kalau iseng,
kalau kelebihan waktu dan tenaga bisa
bikin sendiri, atau yang lebih
realistis, kita harus cari-cari
apa, library
atau package yang diinstall biar bisa
bikin fitur ini, terus
mengganggu performance juga kan.
Bikin gini pakai
apa ya namanya, swiper,
eh bukan swiper apa namanya,
library JS yang untuk
bikin popover-poover gini.
Popster ya,
popster ada juga ya.
Toaster.
Toaster?
Popas
apa ya?
Itu mah di UI
Component Library apapun, ada sih.
Gua lupa dulu ada yang
sering gua pake dulu tuh, apa namanya.
Nah, PTU ya,
ini demo-nya demo
khas developer banget deh, secara
estetis tuh,
kurang. Kurang,
cuma maksudnya,
terus apa
sense of estetiknya ya, begitulah.
Cuma maksudnya apa, kan yang penting bisa
bisa nunjukin bahwa
itu bisa, ini bisa
dipencet berkali-kali, coba generate
success toast lagi deh.
Generate fail.
Generate fail toast.
Nah, kan. Oh, yang ini
maksudnya.
Ya, boleh dipake buat itu,
boleh dipake buat misalnya itu tadi
information tooltip atau
apapun lah, yang pop-up,
yang non-model,
yang itu tadi enggak, enggak
ngunci fokus, enggak menghalangi interaksi
tempat lain.
Usap menu.
Wih, jaman kapan
banget ini, jamannya,
inget gak? Jamannya DHTML.
Dynamic HTML, DHTML.
Itu apa sih? Dulu tuh pernah baca,
cuma nggak ngerti sama sekali, terus mikir, ah udah,
apakah tuh gini-gininya, DHTML ya?
Iya,
basically.
Iya, maksudnya itu, apa sih ya?
Iya, HTML kan
ada transisi kan, transisi
antara halaman
web, menuju ke
web application kan,
aplikasi web. Nah, di tengah-tengah itu
kan ada orang yang punya
kreativitas untuk bikin hal-hal
yang tadinya halaman web, tapi
udah mulai dinamis, kayak tampilin
menu, ada apa,
yang kayak hamburger menu diklik ke
kanan, pokoknya yang interaktif,
tapi jaman dulu kan masih
belum terlalu banyak hal-hal yang
seperti itu, karena JavaScript tidak digunakan
untuk itu.
Itu sih ya, apa masih ada website-nya?
Itu
bahasa tersendiri,
atau gimana? Enggak,
cuma HTML ketambahin animasi,
itu artinya dynamic HTML. Iya, gitu aja
sebenarnya. Oh, gitu doang.
Oh, tapi itu JavaScript, bahasa
client-site-nya.
Bisa jadi CSS?
Bisa jadi.
Nah, ini coba
kalau demo
demo pop-over
yang enak di mata,
coba deh. Kalo buatannya Mas,
Adam Erjel itu biasanya bagus.
Oh,
oh iya, kalau dia mah
jago CSS, pasti bagus.
Kita coba ya.
Oh,
Twitter?
Ada link-nya,
link CodePen-nya. Oh, ada link-nya.
Tadi nge-search doang sih.
Random.
Oh,
connection,
connection,
ini ya,
minimal pop-over demo
animated if supported.
Oh, animated if supported.
Ya, karena itu kan,
itu biasa. Maksudnya HTML
CSS biasa.
Mau dianimasi ya, animasi CSS.
Progressive ya.
Progressive enhancement.
Enhancement. Oh, ini
tip,
gitu doang. Cek, gitu doang.
Ini bikinnya banyak lho,
opacity. Nggak, itu kan
buat animasinya.
Fade in, fade out. Oh, ininya
tag-nya pop-over
target ya, pop-over target.
Target sama dengan MyToolTip.
MyToolTip.
Dia bakal cari elemen HTML
apapun yang ID-nya
sesuai. MyToolTip. Coba tulis yang
kanyang deh.
Isi tip-nya diganti Lorem Ipsum
Doloresit Amet, gitu. Yang bawah.
Yang bawah?
Oh, isi tip-nya yang bawah.
Loh, kok ilang?
Render.
Render ulang.
Tip-tip-tip punyi
hujan, punyi hujan.
Punyi hujan.
Oke,
finish. Oh, masih lagi.
Udah.
Oh.
Nah, kan emang segitu.
Tapi ini ya, apa namanya?
Habis itu,
bentuknya diatur
sama si
CSS. Ya, CSS. Terserah
diaturnya gimana kan.
Oh, JavaScript-nya bahkan nggak ada sama sekali ya.
Ini pure HTML
dan CSS-nya.
Kecuali mungkin kalau yang
kayak tadi itu toast yang bisa
apa, positioning-nya
tadi
sesuai jumlah toast-nya.
Ya nggak tahu pokoknya kalau mau di-enhance
pakai
JavaScript, mungkin bisa. Tapi yang nggak
perlu, nggak harus.
Iya, ini minimal banget sih demo-nya.
Orang judulnya aja
minimal demo.
Oke, ini
basically udah support banget ya.
Udah kan baseline tadi
udah masuk baseline. Udah bisa
dipakai.
Dari 2023 udah bisa ya?
Baseline dari 2023?
Udah 2024 itu?
Nggak, masuk baseline-nya
April kemarin, bulan lalu.
Tapi kan masuk baseline itu
kalau sudah, apa, dua
versi stabil terakhir. Semua
browser major.
Browser, hmm.
Nah, berarti
kan sebenarnya udah dari tahun lalu itu.
Cuma baru April kemarin.
Opera Android aja udah bisa nih.
Opera Android ini, Opera Mini bukan? Beda ya?
Bukan, kayaknya bukan deh.
Opera Mini tuh nggak pakai browser
engine, apa? Nggak pakai rendering
engine yang mainstream,
yang masuk akal tuh nggak masuk akal.
Sama sekali itu, Opera Mini.
Mereka punya bahasa sendiri.
O-B-M-L.
O-B-R-A-B-R-O-S-E-R.
Itu nggak enak banget itu.
Nggak bisa sih.
Bisa, biar cepat mereka bikin
SSR sendiri.
Kita ngomongin di HTML kan,
ini ada ini-nya
ternyata. Ada pengertiannya.
Dynamic HTML.
Ini style animasinya
aja retro.
Collection of technologies
used together to create interactive
and animated website using a combination
of static markup language,
client side scripting, and presentation
definition language such CSS and DOM.
Jadi sebenarnya ya
HTML yang sekarang.
Ya semua UI work sekarang kayak gitu kan?
Iya.
Cuma dulu kan belum.
Jadi ini menarik juga kita bahas
untuk ini ya, untuk
apa? Sesi
khusus nostalgia ya.
D-H-T-M-L.
Kita balik lagi.
Nggak nyambung sih. Cuma jadi kepikiran
mungkin sekian 10 tahun dari
sekarang AI atau machine learning
pun udah nggak ada term-nya
tersendiri. Jangan-jangan.
Karena udah kayak dianggap wajar
semua produk digital, semua software
mungkin udah
pakai unsur AI
atau machine learning. Jadi
jangan-jangan udah nggak ada term-nya lagi.
D-H-T-M-L. Karena
ekspektasi standarnya kayak gitu.
Sama kayak PWA juga.
PWA juga udah kurang
terdengar kan?
Karena semua udah.
Sudah melakukan praktek-praktek itu.
Ngomong-ngomong PWA nih
PWA sama
ini bukan web API sih. Sebenarnya fitur
ya fitur web baru.
Ini juga belum lama nih
sekitar bulan lalu. Chrome
bikin
website
yang nggak memenuhi
heuristik, apa kriteria PWA
sekarang juga bisa di-install.
Seru ya?
Bentar cari
beritanya. Ya sambil lanjut aja bahas
yang lain.
Kalau dari
Ivan, ini ada
API apa? Web
Vitals ya. Web Vitals.
Kalau saya bukan
khusus yang web
API tetapi
mau
waru-waru aja. Ini Web Vitals
4.0
library-nya ya. Library Web Vitals
ini bukan yang buat di web API.
Tapi library untuk Web Vitals JS
mau
release soon. Release
candidate ya.
Sebelumnya kan
versi 3.5. Ini
library Web Vitals
yang sebenarnya
zoom in. Zoom
in lho.
Sebenarnya Web
Vitals ini adalah
wrapper untuk
dari performance API
dari web performance API
untuk mempermudah kita melihat
OK CLS-nya berapa, INP-nya
berapa, LCP-nya berapa
TTFB. Nggak semua itu.
Ini kan core Web Vitals nih yang dia
bikin. Web Vitals yang lain
ada. Kayak
FCP-nya. Apapun yang kalian
lihat di Lighthouse
itu menggunakan ini
yang sama gitu. Script
yang sama. Underlying
level of-nya itu ya?
Under the hood dia pakai ini.
Lighthouse itu kayak front-end-nya aja.
Iya.
Untuk collect datanya. Jadi
kalau kalian mau collect data saya pakai ini
untuk collect data
saya sendiri. Dan yang
langsung saya push
ke Google Analytic.
Nanti saya proses sendiri dari
Google Analytic. Saya proses
ke BigQuery. Terus nanti
bisa lihat. Nggak ush sih. Nggak sampai
BigQuery, BigQuery-an. Saya pakai Google Analytic
reporting. Sudah bisa
lihat. Oh CLS-nya berapa,
INP-nya berapa, LCP-nya berapa
persatuan waktu
yang saya mau kerjakan.
Iya. Dia kan
releasing 4.0
which is major update.
Apa yang ditambahkan yang pastinya
INP?
Kan INP yang baru itu
Vital yang baru yang
tidak disahkan
sebagai pengganti
total... Sudah.
Sebagai pengganti total
blocking time.
Atau
first input delay.
First input delay atau total blocking time
nanti diganti jadi namanya
interaction to next pane.
Update dari Web Vital Library ini
sudah bisa menghitung
INP.
INP itu lab. Berarti lab ya?
Bukan user.
Nggak harus nunggu interaksi user.
Interaction to next pane.
Dua-duanya ya.
During page load, dia bisa
menghitung INP-nya berapa.
Kalau kita scroll,
interaction to next pane cycle-nya,
dia bisa lagi menghitung berapa.
Sama kayak CLS.
Kalau CLS itu selama
page-nya hidup, CLS-nya tetap dihitung
nanti yang maksimalnya kita tidak tahu.
INP sama juga seperti itu.
Seminggu lagi kata
mas Barry Pollard
kira-kira kalau nggak ada feedback
yang major akan
jadi resmi
4.0
nanti semua ini update
ke page.
Page Web Dev ke update.
Terus kemudian Lighthouse
yang di Chrome juga ke update.
Wah, menarik.
Ini berarti
raper
dari
web performance API ya?
Kalau mau hitung sendiri dari performance
API bisa. Low level-nya berarti
performance API ini ya.
Salah satunya yang digunakan
Node.js walaupun yang tadi
yang di web lighthouse itu buat
browser kan ya?
Iya. Betul.
Node.js pakai juga? Wah, seru ya.
Node.js
bikin juga.
Tapi pakai
API yang sama, maksudnya underlying
API-nya, dia sebenarnya pakai
library yang sama?
Mungkin bukan library, tapi
mungkin pakai
lebih tepatnya pakai
spek yang sama.
Ya, spesifikasi yang sama.
Tapi kan
Node.js itu kan V8
nggak ngaruh ya?
Ya, tetap pakai spek yang sama.
Beda, V8 kan runtime.
Bukan? Iya runtime, mesinnya
mesinnya, ya engine-nya.
Ini pakai performance.
ini bukan beda.
Itu sudah lama ada performance
total, cuman apa yang
diukur mungkin
beda. Coba kita lihat
perbedaannya.
Performance.measure
performance observer
Ini sama nggak?
Performance observer ada juga di web
API. Apa saya kembali-kembali
sekarang ya? Sebelumnya mungkin ini
nggak ada, tetapi di web ada.
Performance.now itu
ya performance
maksudnya performance.now itu sebelum
di web udah ada lama.
Cuma yang saya belum tahu
di Node ada? Mungkin
nggak ada sebenarnya. Mungkin.
Jadi kalau pun sebelumnya nggak ada
ya orang apa, maintainernya
Node kan tim yang Node
ngeliat, oh iya ternyata itu
relevan dan berguna buat diadopsi ke
Node JS. Bagus lah. Maksudnya kan jadi makin
streamline ya. Kayak dulu tuh
ingat banget, bingung banget kenapa
fetch bisa di browser,
tapi kalau di server nggak ada fetch.
Harus install Node fetch atau
semacamnya. Ini kan kasusnya mirip
kan? Cuma di bidang
measure mengukur
performance. Cara pakai
sama persis loh ini. Nggak ada beda
sih ya. Berarti speknya sama.
Saya curiganya Node JS
sekarang-sekarang ini memang
sedang mendekatkan diri dengan web
standar ya. Fetch udah
diinclude. Kemudian
web socket
mulai mau diinclude.
Nggak tahu udah apa belum. Beberapa
IPA-IPA yang standarnya
web juga diadaptasi
juga ke Node JS.
Kalau gitu
bagus lah. Jadi bisa diukur juga
dengan, berarti JavaScript
yang sama bisa dipakai di
masih syntax yang sama
bisa dipakai di server.
Walaupun pengukurannya
mungkin
berbeda ya. Dimensinya
berbeda ya. Iya yang diukur
lain. Beda alam.
Beda alam.
Beda alam tapi syntaxnya sama.
Oke.
Next, apa lagi
nih? Kalau dari saya tadi
web performance API. Nah, ada yang
menarik lagi nih. Ini nggak tahu ya. Tapi ini
belum jadi API. Ini baru proposal.
Proposal. Nah, kita dulu pernah ya
di episode entah berapa.
Kita bahas proses dari
pertama mengajukan proposal sampai
di apa? Adopsi jadi
standar ya. Entah episode
berapa. Cari sendiri. Nah, ini
berarti statusnya masih stage
one ya. Stage 1.
Iya, masih stage 1. Jadi
ceritanya
JavaScript ingin menambahkan
type annotation atau
Wow. Ini pasti
bahan perdebatan
banget nih.
Di tiber atau di apa? Hacker news.
Orang pasti pada... Waduh waduh waduh. Bisa jadi
kontroversi.
Tujuannya adalah
Oh, biar
kalau misalnya apa?
Gak perlu transpilasi.
Type bisa langsung jalan
di browser ya.
Oh.
Ini juga sekaligus
apa ya, sekaligus
membuat Node.js
kembali berkembang. Karena kan
yang membuat orang
berapa ya, contohnya
saya kemarin pengen pakai TypeScript
tapi males pakai TypeScript compiler
karena agak lambat.
Jadi saya memilih pakai antara Deno atau Boon
karena by default mereka udah bisa
transpilasi, udah bisa kompilasi ke
TypeScript, gak perlu pakai
transpilasi kan.
Kalau ini udah di-approved, kemungkinan besar Node.js
juga kena efeknya
dan mungkin bisa jadi native
TypeScript bisa jadi native, gak perlu
ada transpilasi lagi, transpiral
lagi.
Oh, tapi paragraf satu itu menarik ya
yang atas.
Kalimat kedua nya
"To be checked by a type
checker that is external
to JavaScript." Jadi maksudnya
JavaScriptnya
sendiri gak dipaksa untuk jadi opinionated
mengadopsi
TypeScript atau Flow.
Maksudnya behavior type checkingnya
gak perlu punya opinion
tentang itu, yaudah kalau runtime
di-check-in aja, dianggap
comment. Cuma berarti kan
kalau misalnya
berarti kita harus semacam
mendefinisikan type checker external
pas lagi mau
jalanin type checkingnya.
Semacam jazz doc atau semacam Flow
kali ya, bukan bahasa
super script seperti
TypeScript kan.
Kita lihat lagi contohnya nih.
Coba kalau gue mengerti maksudnya
misalnya variable itu
didefinisikan type-nya
integer, berarti dia gak ini ya
sebenernya gak peduli ya.
Cuma bisa
menerima warning aja
kayaknya. Gak error, maksudnya itu
gak dianggap sebagai syntax error.
Syntax error, hanya warning.
Kalau sekarang
syntax error ya.
Kalau sekarang.
Berarti
di-ignore.
Ya.
Kalau pakai jazz doc kan kayak gini kan.
Kayak yang pertama ini kan.
Kalau proposalnya diterima
nanti akan jadi seperti ini.
Tetapi
misalnya pun
calon time salah, P1nya salah.
Jika calon time. Gak masalah.
Seperti sekarang ya.
Ini hanya untuk
warning pada saat
development aja.
Alias gak berisik
kayak compiler, kayak transportnya
TypeScript itu.
Oh TypeScript keren.
Ya, TypeScript calon time.
Ininya compilernya
berisik tuh kalau salah.
Kalau kita pengen dugaan gue kan
maksudnya masing-masing developer terserah
mau install, mau
tools itu kalau di-register.
Pakai string, pakai apa gitu.
Atau mau yang loose, gitu kan bisa ya.
Bebas ya.
Oke, oke.
Ada lagi, nextnya, nextnya.
Ya, terus ke bawahnya.
Coba lihat. Ke bawahnya.
Ke bawahnya, ya maksudnya apa.
Proposalnya. Proposalnya.
Sama pakai titik 2 ya.
Menirip-mirip TypeScript, ya berarti.
Klete standard deh.
Lanjut.
Oh, ini yang nanti
yang agak susah banget ini.
Iya, tapi jadi susah banget, Tar.
Itu kan ada titik 2.
Di-kira objek ya?
Iya.
Di-kira objek ya?
Bisa di-kira objek, bisa di-kira
kondisional.
Kan tanda tanya, bla, bla, bla,
titik 2, gitu kan.
Oh, ya.
Classes is
binary.
Iya.
Ah, itu urusannya
si programmer browser lah yang mikirin itu.
Iya. Kan dibayar sama Google,
sama apa, sama Apple,
sama Firefox.
Belum tentu juga diterima ini, proposalnya.
Ini cukup kontroversi sih.
Pasti akan ada produk-produk.
Sama pihak browser.
Karena malu se-implementnya.
Minta tolong
aja sama Microsoft.
Nanti yang duluan,
itu Microsoft Edge yang duluan.
Karena kan TypeScript dikembangkan di Microsoft, kan.
Sisa satu entiti.
No, tadi
pas di jalan
juga sempat dengar podcast, kan.
Kenapa TypeScript itu
jarang ada tools
yang kayak misalkan type checking only.
Terus ternyata, kata,
enggak tahu ya ini benar atau enggak ya.
Bisa di-check kebenarannya atau
kalau salah tolong dikoreksi.
Katanya TypeScript itu tidak
open untuk spesifikasinya
itu secara bahasa enggak ada.
Enggak di-open mungkin sama Microsoft.
Oh gitu.
Iya. Jadi tools-tools seperti
Biome yang, apa,
yang baru kayak Linter, gitu.
Dia mau ngecek TypeScript, itu
terus itu, menebak-nebak
sendiri.
Jadi enggak ada
spesifikasinya seperti JavaScript.
Kalau kita mau bikin
parser untuk JavaScript, kan, udah ada spesifikasinya, kan.
Kita mau bikin engine untuk JavaScript.
Ya, kita tinggal mengikutin aja.
Ya, kalau TypeScript enggak ada.
Berarti emang semi, apa ya?
Semi tertutup lah, ya.
Semi closed source, ya. Semi tertutup.
Bukan tertutup kodeonya, tapi
cara kerjanya.
Apa prinsip kerjanya?
Harus melihat source code-nya, kan,
bukan spesifikasinya.
Ya, begitulah.
Nah, scroll ke
yang menarik ke bawah, FAQ-nya
tuh. Kalau misalnya, kalau yang
kodingan ini sih, ya udahlah, kayak gitu
intinya, paham lah.
Ada FAQ-nya. Benar.
Di bawah? Di bawah lagi? Di bawah lagi.
Assertion, Generics,
ada Generics juga.
TipeScript lah. Ini intinya
TypeScript semua sih.
Ada disk-nya, apa?
Intinya TypeScript.
JSX-nya omitted.
Ada yang up for debate.
Itu juga menarik. Ambient file, apa?
DTS.
Function overload.
Class info.
Kayaknya
surem deh. Kaga lolos kayaknya.
Cuma, ya udah.
Cuma, ini...
Eh, dari kapan?
Lanjut, lanjut, lanjut.
Oh, 3 tahun yang lalu.
Udah 3 tahun ya.
Ini opsiional.
Jadi argumen. Maksudnya argumennya
proposal ini.
Ada kebutuhan dari Ecosystem
ini solusinya
tanpa mengharuskan semua
developer untuk
package type checking.
Blablabla.
Terus, yang paragraf 3
itu menarik. Apa?
Bukan perkara JavaScript
harus punya type. Atau nggak sih?
Cuma, apa? Kalo mau pake type,
gimana caranya? Gimana cara
apa? Bekerja
JavaScript bisa bekerja dengan
type.
Oke.
Seru ya.
Maksudnya, ini argumen dari
sudut pandangnya si proposal ini.
Terus, kenapa nggak
bikin type system sekalian
di TC39?
Di apa?
Badan yang membuat
ECMAScript.
Blablabla.
Ini, ini.
Wireless Goal Around Web Compatibility.
Don't Break The Web.
Jadi, secara implicit,
ini kayaknya
kita dikasih tau nggak akan
JavaScript nggak bakal
bisa berubah so drastis itu ya.
Entah itu perkara type, atau apapun
ke depannya, nggak bakal bisa
ada perubahan drastis. Karena
nanti nggak backwards compatible kan.
Yes.
Kenapa nggak bikin dua rantai aja di Game Browser ya?
Bener lah.
Nggak jadi bentrop.
Nggak bisa.
Sama-sama
ngamodify dong.
Jadi ngaco.
Atau yang 171?
Iya.
Butuh jQuery 2 sama jQuery 3
nanti.
Nanti ada yang bikin
toolsnya.
Dua-duanya panggil jQuery.
All hail jQuery.
Oke, oke.
Lanjut, lanjut, lanjut. Kita lanjut.
Ke mana lagi nih?
Apa ya yang menarik ya?
Specification itu tuh.
Sorry, apa?
Speculation.
Speculation rules API.
Speculation rules. Nah, ini juga baru nih.
Menarik nih.
Wah, ini baru banget ya.
Fresh from the oven.
Ini ada videonya juga ya?
Nggak jeselin.
Iya.
Pernah kita undang ke sini ya kan?
Bukan jengkelin ya.
Jengkelin.
Mau diundang jengkelin?
TV show jaman kapan.
Nah, intinya
ini untuk mengkustomize
behavior pre-render atau
prefetch. Kan dulu kita semua ditaruh
link tag tuh.
Terus ada yang
obsolete ya. Pre-render kayaknya
terus agak bingung
behaviornya antar
satu path dan lainnya.
Nah, ini dibikin kayak
satu block untuk mengatur
behavior
pre-fetch atau
pre-render yang kita mau dan
semacam prioritas.
Ini kayak
si browser bisa
diberikan power
untuk
nge-prediksi.
Meng-speculate apakah
link itu akan
di-click atau nggak?
Di-click atau nggak.
Perlu di-pre-fetch atau nggak?
Di-pre-fetch atau tidak.
Jadi browser yang akan menghitung
opportunity itu
probability itu
berdasarkan history
yang ada di browser
kalian sendiri.
Jadi nggak ada hubungannya
sama tepati. Jadi berdasarkan
kita
punya behavior sendiri.
Berarti ini kayak
apa ya?
Kayak recommendation system ya?
Ini pakai AI yang ada
di filmnya nih.
Lebih tepatnya seperti
Guest.js pernah dengar nggak?
Guest.js.
Itu buatannya Google juga
itu dulu. Guest.js
bukan, bukan pakai S, pakai S.
S-nya menebar-menebar.
Iya, iya, iya. Salah, salah, salah.
Ini
salah satu level yang pernah
saya mau
coba
untuk client project, tapi
nggak berhasil saya.
Bukan berhasil saya.
Karena harus
koneksi, iya harus
koneksi ke itu, harus koneksi ke
Google Analytics.
Jadi
data Google Analytics kita, kita kasih
masukin ke
koneksi ke
ke
library ini, nanti
dia koneksi
langsung.
Ribet lah
setupnya.
Oh, udah ada buat Next.js juga sebenarnya ya.
Hmm, hmm.
Oh, oke.
Dan ini kan, contohnya
semua...
Lanjut, lanjut, lanjut.
Iya, itu kan contohnya semua kan
rata-rata kan sudah pakai Webpack, atau GSP
segala sebagainya. Kan saya kan static side ya,
pakai WordPress dan setupnya jadi
ribet. Karena
bukan, bukan kayak
prefetching yang seperti SPI gitu kan.
Jadi
sebenarnya saya pakai yang static gini
gitu, dan dibelakangnya itu nggak pakai
Node. Jadinya ribet.
Setupnya.
Gak ada.
Iya.
Sedangkan saya PHP.
Sudahlah.
Nah, kalau pakai ini nih
Spekulasi.
Ini semuanya
di Web.
Jadi, prefetching dan
prerender si Web-nya yang menentukan
berdasarkan...
Kita coba langsung lihat ke example-nya deh.
Nah, ini dia.
Prerender when,
where, and
make this
/lockout
or no prerender.
Kalau prefetch,
kalau url-nya
nesh.html atau nesh2.html.
Enak ya.
Ini kan bisa dibedakan secara sintek.
Ini bisa dibedakan setiap halaman
kan. Jadi kita bisa build
rule itu berdasarkan
server-side
render. Jadi misalnya
saat lagi di page apa, saya bisa kasih
rule itu.
Saya di-reading page.
Maka yang saya kasih rule-nya
prefetch atau prerender
thank you page. Karena siapa tahu sudah selesai
waktu dia muncul thank you page cepat.
Kita bisa di next page-nya.
Karena kita yang define dari CC server.
Menarik, menarik.
Kalau artikel yang lebih enak
dilihat, itu tuh di
chat. Gimana, gimana?
Ke ini dulu deh.
Bahannya Eka dulu.
Spekulation, rules
improvement.
Menunggu loading. Yang menarik
buat saya ini nih, bagian ini nih.
And so makes sense for multi-page application
rather than single-page application. Karena kan
sekarang trend-nya itu kan menuju
ke MPA kan, balik ke MPA kan.
Banyak
framework.
Dengan ada react server
component lah, ada swell kit,
ada quick, ada macem-macem kan.
Ada astro juga.
Jadi dengan
si pengembang web
juga dia melihat, wah ini kayaknya
trend-nya menuju MPA, makes sense. Akhirnya
dibuat lah spekulation rules
API ini. Mungkin gitu ya.
Dan kalau pun pakai
kalau pun ada client-side routing-nya
nih, kayak misalnya next.js gitu ya kan.
Kalau misalnya emang supported
bisa pakai client-side routing. Tapi kan
sebetulnya itu SSR juga kan.
Jadi bisa dianggap bisa punya
behavior MPA juga.
Benar, benar, benar.
Ditambah lagi dengan
transition API.
Udah deh, lengkap.
Iya.
Document rules.
Rules-nya dalam bentuk script
begini ya, apa?
A list of urls.
Jadi nggak dirender sama browser.
Ya kan?
Diskip, diskip.
Dan juga nggak di, script ini kan
dia nggak, waktu di page load dia nggak
dipeduliin.
Gak blocking ya.
Gak blocking.
Gak blocking sama sekali.
Gak blocking di DOM-nya, cuma ngasih tahu
ke si browser-nya sendiri.
Apa?
Mesin, mekanisme browser-nya.
Oh, bisa pakai SSSelector
tadi.
Menarik.
Berarti kita bisa ngasih link itu, bisa kita, oh
link ini, di prerender.
Bisa link itu nggak dia?
Bisa.
Karena kalau lockout di prerender, dia
ke lockout terus.
Iya kan?
Iya, benar.
Kan kalau link lockout-nya di prerender
di belakang, dia bakal ke lockout terus.
Dia manggil, manggil lockout.
Iya, dia bakal manggil.
Oke.
Berarti harus hati-hati saja ya?
Bisa prerender ini,
bisa prerender.
Mungkin ini opt-in nggak sih?
By default, ya nggak kan?
By default, ya nggak ada.
Nggak ada speculation.
Apa itu? Oh, ke atas-katas ada
warning-nya tuh, warning.
Oh, yang merah, yang merah.
Caution.
Terus dia itu over-speculation.
Terus dia home-in.
CPU cost.
Dia baca dari mana?
Oh, dia baca dari history
di browser kita, ya?
Bukan hati-hati kalau
terlalu banyak yang kita speculate
untuk minta di prerender.
Misalnya satu halaman kita, mungkin halaman kita
yellow pages.
Yellow pages, ya kan?
Terus kemudian ada sepuluh rebulling.
Masih kita prerender semua, ya?
Nggak didos reper kita
sendiri, kan?
Maksudnya gitu.
Dan browser-nya juga kan,
apa, main thread-nya mungkin kerjanya
di extra, ya? Karena nge-check satu-per-satu
ini, wah, ini relevan nggak ya?
Perlu di-pre-hedge atau prerender
atau nggak?
Ini keren nih, kalau misalnya kita
keren nih, kalau misalnya
prerender ini
digabungkan dengan
Intersection Observer kali ya
atau Legi Load. Jadi semakin
orang, ingat nggak
kalau misalnya kita yang pakai
Twitter, kalau scroll-scroll
baru dia muncul, ya kan?
Kan kalau pakai ini
mungkin dia nggak di...
Bukan. Maksudnya
hanya link yang ada
di above the fold itu yang muncul
itu yang
di-pre-render.
Jadi nggak usah sampe
semua, iya.
Nggak tahu ya, mungkin saya bisa
saya nanti bisa feedback
kali itu.
Dikombanya sama View
Transition yang level 2.
Seneng banget tuh.
Cocok, cocok.
SSR udah kayak...
Nanti lama-lama, bisa apa?
Hampir nggak bisa dibedain
sama SPA, ya kan? Karena di-click
sekejapnya udah diambil
duluan, langsung feed-in
feed-out.
Sepertinya memang trennya di sana.
Trennya memang diarahkan kesana
jadi diarahkan kesana.
Ada bedanya atas sama bawah.
Ini Chrome Only.
Atas sama bawah.
Oh, source. Ada source.
Source document.
Kalau di bawah apa? Nggak ada source.
Nggak ada source-nya.
Baca penyelesaian apa di atas?
Make the source key optional
since... Oh, nggak harus
pakai source. Karena bisa di
infer dari
URL atau
where. Oh, gitu.
These two speculation
rules are identical. Ini dianggap
sama. Karena
udah ada where-nya, browser bisa
mengkalkulasi sendiri.
Bisa ngira-ngira sendiri
jenis source-nya itu apa.
Nggak masih pakai script, lho.
Bisa pakai HTTP header, lho. Turun, turun.
Bisa pakai HTTP header.
Oh, iya ini bawah ya? Iya.
Itu.
Oh. Ini
berarti di web
server-nya, ya?
Iya. Jadi kayak
ini, kayak manifest.json.
Kayak. Manifest.
Jadi kayak manifest.
Alright.
Scroll ke bawah.
Ini seru sih. Udah ada beberapa yang
mengadopsi.
Walaupun masih
baru ya. Dan
masih bisa satu domain, kan ya.
Nggak bisa cross-domain, kan.
Oh, harus yang original.
Iya. Coba-coba-coba.
Di Glitch.
Entar
habis lho ininya. Tethering-nya.
Udah warning. Buka ini dong.
Buka. Buka-buka. Buka-sambil buka
DevTools Network.
Sambil buka YouTube.
DevTools.
DevTools.
Network, ya.
Iya.
Terus,
kalau kita hover.
Dia akan muncul, gitu ya.
Nggak sih.
Mana?
Coba-coba reload.
Oh, iya. Reload dulu, ya.
Sudah.
Common Fruit.
Oh, ini masih common fruit.
Mana?
Ini bukan Chrome-nya.
Udah Chrome 124
belum?
Ini Chrome Kanari.
Kanari.
Oh.
126.
Kenapa ya nggak bisa? Coba-coba.
Gue jadi penasaran.
API supported in this browser supported.
Edit speculation rule.
Rule-nya disuruh dibuat sendiri, gitu.
Bukan, bukan. Sudah ada.
Sudah edit.
Sudah ada, kan?
Moderate.
Kemudian, ini di application.
Bukan di network.
Oh, gitu.
Application. Eh, application mana ya?
Application.
Speculation.
Bukan, ada speculation
Re-load.
Oh, bisa.
Di-rolls, di-rolls, di-rolls.
Coba-coba.
Rolls, rolls.
Oh, bukan.
Refresh. Reload.
Ini ada warning.
Speculation-nya, coba.
18, not trigger.
Coba rule-set dipencet aja.
Oh, itu udah trigger.
Speculation.
Speculation.
Nah.
Wah.
Jadi, kalau
Olive di-click,
maka dia udah langsung render, ya.
404.
Nggak ada, beneran.
Oh, pantesan failure.
Nggak ada, nggak ada.
Itu contoh aja, ya.
Contoh behavior-nya aja.
Coba ke, ya, Kiwi.
Yang 404, yang...
Ini nggak, Kiwi nggak.
Oh.
Tuh, itu pakai ini.
Halaman ini pakai Web Vital ini.
Halaman tadi.
Iya, iya, iya.
Ini kayaknya satu halaman merangkap
demo macem-macem API baru, ya.
Kayaknya mau lagi
persiapan Google I/O ini.
I/O.
Oh, ini teaser,
berarti ya. Teaser, ya.
Iya.
Ternyata episode-nya adalah
episode teaser untuk Google I/O
2024
tentang web, ya. Kita nggak tahu, kita sendiri
nggak tahu topiknya apa. Masih coming soon.
Tapi kita hanya mereka-mereka.
Ini pasti masuk, deh.
Iya, kayaknya masuk, nih.
Oh.
Iya, iya, iya.
Berarti ini ditambahin baru, ya.
Ada background service sendiri, ya.
Jadi, sebagai background service.
Kita kayaknya biar kan, kita jarang-jarang
gitu liat tab application juga.
Maksudnya nggak sampe
ngintip apa. Kita asumsinya
kan network, ya. Asumsinya
network kan. Ternyata nggak ada.
Ternyata behavior baru,
ini kayak di stream line,
di satu tempat terpisah.
Nah, balik ke
screen yang tadi, deh. Yang apa?
Developer Chrome.com. Yang
blog, blog post.
Blog post
yang ini, ya. Yang
ini.
Iya. Nah, scroll ke bawah.
Bawah lagi.
Nah, ini yang penting, yang platform support.
Apa? Atas sedikit.
Masih lagi
proses standarisasi.
Jadi, seneng boleh, tapi jangan seneng-seneng
amat. We are also working
hard to standardize the API
lewat WICG.
Jadi, masih dalam proses.
Kalau misalnya mau tau apa, diskusi-diskusinya,
ya. Mungkin itu bisa di
click. Sudah
ada WordPress.
Udah ada plug-innya.
Spekulasi mode udah ada.
Wow. Cepet sekali.
Ini spekulatif juga.
Sebenernya kan belum diadopsi
banyak rosar, ya. Spekulasi aja
udah bikin plug-innya.
Nah, terus yang
yang seru,
Chrome. Kenapa
itu?
Ya, itu udah adopsi juga. Scroll aja ke bawah.
Oh, Astro udah?
Oh, wow.
Cuma, mungkin partial.
Akamai, CDN, Nitro Pack.
Experimental.
Tapi, ya, seru sih.
Dulu pun waktu view transition API
yang level 1, itu sama satu yang pertama kali
mengadopsi
meta framework itu Astro yang paling
terdepan.
Paling pertama.
Baru launching 4.2, kan?
Baru launching kan dia
ini 4.2?
Januari sih.
Oh, Januari 4.2?
Masih experimental ya?
Iya, experimental.
Ini soalnya
Januari...
Januari kemarin. Masih
experimental. Yang kemarin apa?
4.4 ya yang baru dia?
Gak tau.
Empat sekian lah.
Iya, intinya udah.
Membaikin ini ya. Define config
untuk mengadopsinya.
Refresh to experimental, client prerender true.
Nice. Coba tuh contoh
penggunaannya. Scroll ke bawah.
If document
prerendering, render disabled.
Oke.
Sederhana.
Seru sih, Astro itu salah satu
meta framework yang
aktif
mengadopsi standard web
API.
Jadi punya approach yang beda ya. Kalau Next.js kan
semua dia bikin sendiri.
Ya walaupun, eventually, kalau web API
ada, ya akhirnya di
streamline juga. Cuma kalau Astro
pendekatannya
jemput dulu lah ke web API yang baru
yang masih experimental pun dipake.
Cuma, di mereka
juga experimental juga. Jadi gak
ngeganggu
yang stable.
Oke.
Udah ya.
Lanjut. Satu lagi atau dua
lagi. Nah, kalau dari saya
ada ini nih.
JSON module.
Apa tuh?
JSON module itu kalau
dulu ataupun sekarang
kalau misalkan kita mau import dari
JSON kan harus pakai
bundler kan ya.
Biasanya kalau dari webpack itu ada
extensionnya
untuk loading JSON.
Nah, ini sudah
native.
Bisa baca JSON.
Bisa baca JSON.
Oh, import dari JSON bukan?
Ini import dari JSON.
Jadi kalau kita punya JSON data
kita bisa langsung, gak perlu pakai plugin.
Gak perlu pakai
bundler.
Gak perlu JSON parse.
Gak perlu JSON parse.
Betul.
Motivasi ya itu.
Biar bisa emang import JSON file.
Iya.
Kalau yang begini-gini semua pasti
langsung setuju. Kalau yang tadi
type system.
Terlalu opinionated.
Soalnya.
Betul.
Ada orang yang suka, tapi di sisi yang lain
kita, si web ini harus tetap
menjaga
kompatibilitasnya kan. Tetap harus bisa membuka
web dari tahun kapan.
Jadi agak berat sih itu.
Bakal ada gak sih
di Obsolete gitu?
At some point.
Ya, kalau pun Obsolete gak boleh
breaking kan. Kayak misalnya
Markli atau Blink gitu.
Gak jalan, tapi kan gak ngerusak.
Eh, tapi kemarin ada tuh
yang Obsolete.
Kemarin ada yang Obsolete.
Ada.
Bukan Markli, temennya Markli.
Center.
Center. Oh iya.
Tapi kan gak breaking.
Kalau cuma HTML tag ya gampang ya.
Cuma kalau misalnya apa?
Iya, kalau udah ada yang pake Center.
Gimana tuh?
Ya gak apa-apa, di render jadi kosong kali.
Maksudnya di render div biasa.
Ini kan.
Deprecated.
Bukan maksudnya.
Bukan Obsolete.
Nggak, deprecated
no longer recommended
dosal. Oh iya, bakal dihilangkan.
Yang dipake gitu.
Bakal dihilangkan kan.
Dihilangkan dari web standard.
Hilangkan.
Terus kenapa Markli tetap
exist ya?
Karena bagus.
Bagus? Bukannya accessibilitynya
kurang bagus?
Ya, biar backwards
compatible aja sih.
Bagus di jamannya.
Bagus di jamannya.
Karena masih banyak yang pakai. Ternyata Center itu
gak banyak yang pakai ya.
Orang udah pakai, mungkin udah
pada pakai
line center aja kali ya.
Udah pakai grid.
Jadi udah lebih ini ya kali ya.
Udah lebih banyak. Iya banyak yang
banyak alternatif CSS-nya.
Kalau Markli bisa pakai animasi, tapi kan
repot. Gak bisa balik lagi.
Iya, benar-benar.
Oke, oke.
Jadi, ya.
Mana tadi? Kita balik lagi ke
ini ya?
Udah, gitu aja.
Ya, sederhana sih. Cuman
impact-nya lumayan.
Udah lah, sudah.
Berguna sekali.
Kalau kita misalkan mau
load dummy data, gitu ya.
Dummy datanya dalam bentuk JSON. Atau bukan
dummy data aja. Mungkin data yang
diimport dari gimana gitu kan.
File-nya dalam bentuk JSON.
Kita punya config custom atau
semacamnya. Iya, config, betul.
Bisa dibaca langsung, bisa diimport
langsung. Malah import, eh,
kalau import CSS itu
JSON modul ya istilahnya ya?
Oh iya, sama ya. Ini JSON modul.
Ada syntaxnya sendiri.
Iya, benar-benar.
Status stage 3.
Belum berarti ya?
Udah lah, udah.
Tapi udah hampir, udah tinggal
potong Vita aja.
Tunggu peresmian aja. Isunya apa nih
istunya? Masih ada isu.
Because feedback.
Should name JSON modul import
be a parser. Itu berapa tahun
ini lah? 2022 sih.
Oh iya. Ini
last month.
Iya, udah aman lah ya ini ya.
Mentar lagi ya. Aman lah. Stage 3 tuh
kan udah hampir pasti.
Itu lulus.
Alright.
Ada lagi, ada lagi yang menarik-menarik?
Itu deh, apa?
Minor.
Minor, tapi lumayan sih yang set HTML.
Set HTML?
Iya.
Oke.
Ini ya.
Nah, cuma ini kepakainya cuma
untuk kalau kita pakai
custom element alias
web component.
Web component.
Baru dengar ini nih. Maksudnya
udah pernah dengar beberapa hari lalu nih set
HTML. Unsaved.
Unsaved.
Kalau HTML biasa kan pakai inner HTML aja kan
misalnya kita mau
manipulate mengabit suatu dom.
Ya, apa?
Blah, div, mydiv, dot
inner HTML sama dengan HTML.
Isi HTML-nya.
Tapi kalau custom element alias
web component kan gak bisa tuh.
Nah, sekarang jadi bisa.
Gitu doang sih intinya.
Kalau misalnya kita mau bikin shadow
dom harus pakai unsaved ini.
Ya kan? Kalau nggak diparsing.
Oh, iya kalau nggak diparsing.
Iya, iya. Ini ya.
Replacement
untuk inner HTML.
Replacement.
Ya,
behavior-nya sama kayak
inner HTML. Cuma
ya itu bisa buat
custom element. Gitu.
Jadi kalau kita pakai buat HTML
biasa juga bisa.
Iya, maksudnya kalau kita punya
custom element.
Misalnya
oh, ya kayak
kayak
date picker, date ya date
custom element. Tapi datenya sudah di-support.
Kalau yang kita bikin sendiri gak bisa
kalau pakai inner HTML. Dia harus
pakai HTML unsaved ini.
HTML unsaved.
Oke, oke.
Jadi kayak itu, jadi kayak
si react aja.
Iya, tahu kan. Dangerous
reset.
Dangerous reset HTML.
Dangerous reset HTML.
Cuma ini trend yang
kocak tapi menarik sih.
Ini juga, kan sebenarnya itu
behavior-nya sama kayak inner HTML.
Cuma bisa, apa, dengan tambahan bisa
pakai web component, custom
element. Cuma sekarang jadi ada
unsaved-nya gitu. Maksudnya, apa,
buat menekankan bahwa silahkan
kalau misalnya datenya dari
sumber datenya ada unsur
eksternal, ya silahkan sanitize sendiri.
Apa, bukan urusan kami.
Kayak dari segi sintaksnya.
Memang jadi, ingat react itu sih
dangerously set inner
HTML. Dulu tuh pas pertama kali
belajar, terus pakai tuh kayak,
"Ini bercanda apa beneran?" Dangerously
set inner
HTML.
Iya.
Banyak tuh.
Kalau react itu dia memang
ciri hasilnya gitu ya. Huru besar semua. Terus kadang-kadang
ada yang mau deprecated, dia tulis dulu kan.
Will be deprecated, bla-bla-bla kan.
Biar gak
banyak yang pakai.
Dulu kan kalau line terakhir itu
ada yang gak boleh dihapus,
ada komennya.
If you delete this, the sky will fall.
Atau apa-apanya, ada komen,
ada bagian yang gak boleh
delete.
Lupa.
Oke.
Oke. Nah,
ada lagi web API yang baru?
Di 2024 atau sebelumnya?
Ini aja. Belum kesampaian.
Interop aja.
Siapa tahu ada yang menarik.
Yang Zoom.
Kita udah bahas Interop 2024
belum ya?
Udah kayaknya. Kan sempat yang kita bahas
apa yang akan masuk di Interop 2024
itu pernah. Sudah, sudah, sudah.
JPEC,
JPEC Excel,
itu sempat di
tempat mode ini,
tapi gak, gak, gak, gak,
gak.
2024 ya?
Itu di link gue kan ada, tuh.
Oh, di chat, chat,
private chat.
Oke.
Yang sudah stable aja
atau
kita bahas.
Yang mengenaskan tuh
custom property.
Di Firefox.
Ini kayak gimana?
Firefox gak mau ya.
Ayo.
Ayo lah.
CSS custom property.
Far.
Variable.
Serius.
Firefox gak mau.
Gak, yang apa dulu kan
banyak nih bagiannya. Coba aja.
Nah, itu add property animation.
Jadi yang buat animasi atau buat
apa? Oh, gak ada
apa?
Tau yang mana dia.
Variable untuk
maksudnya kan
CSS custom property tuh banyak.
Add property, add property
gitu loh.
Oh, decorator.
Decorator.
Kayak decorator gini kan.
Kayak decorator, bukan decorator.
Kayak, kayak.
Ada banyak, kan.
Ada berapa.
Gak, gak itu.
Property cascade.
Property.
Oh, dia gak support.
Property, property schedule.
Semua gak.
Ya, itu kelihatannya 1.
Mesti 1 paket deh. Maksudnya itu fitur-fitur
yang sebenarnya harus kerja bareng, kan.
Padahal Firefox dulu tuh
kalau soal CSS, apa
image-nya, apa
identiknya. Firefox yang paling
pertama ya. Kayak grid dulu.
Chrome pun belum support grid.
Firefox udah support duluan.
Ini gaman apa ya?
Ini Linux. Ini apa ya?
Itu Chrome
di Linux, maksudnya.
Yang ini?
Kayak React gitu, tapi bukan sih.
Kayak Logo React.
Windows, bukan.
Apa ini?
Task Cluster Logo.
Task Cluster.
Apa itu Task Cluster?
Coba aja.
Runner-nya dia kali.
Tahu deh.
Apa lagi?
Interop 24/O ini ya?
Yang tadi ya?
Atau TPS URL
socket tuh kayaknya udah
stable tuh.
Firefox sama Safari yang
paling duluan?
Popover tadi udah kita bahas ya.
CSS nesting juga nyaris.
Ini experimental loh.
Top experimental.
Kalau mau top stable,
itu, itu, itu.
CSS nesting tuh
soon kayaknya. Coming soon
to the most stable.
Index DB udah
bisa dibilang udah ya selesai ya.
Udah selesai.
Ini ya.
Firefox udah duluan.
Firefox, Safari paling atif.
Cuma nyusul kok.
Tadi kan experimentan
udah hampir selesai.
Oke.
Text udah balanced.
Firefox udah duluan.
Iya.
Oke.
Oke, sip. Ada lagi?
Mari kita tidur.
Mari kita tidur.
Ya, jadi itu dia.
Mungkin daftar
apa ya? Web API baru.
Atau yang tidak terlalu baru.
Yang bisa dicoba.
Atau baru masuk baseline.
Baru stabil di semua
browser.
Bahkan tadi kita bahas yang top annotation
itu bahkan masih stage 1 artinya
masih perdebatan, tapi belum tahu.
Cuma ya itu bisa jadi kontroversi
dan menarik dikutih ya.
Tapi menarik buat
lihat cara mikirnya, maksudnya argumentnya.
Terus kayak pro kontranya.
Kalaupun nanti nggak diadopsi,
kita punya
kita punya insight ke situ lah.
Mau update sekalian?
Hari ini.
Kemarin kan gue nyoba
Paski.
Waktu tahun lalu, waktu ngasih
presentasi, Paski itu masih
nge-bug di Firefox.
Dan belum support. Bahkan fatal error.
Sekarang sudah
lancar jaya.
Paski sudah lancar jaya
di Firefox. Iya.
Web Auton
sudah stabil.
Sudah stabil di Firefox.
Thank you Firefox.
Akhirnya saya bisa.
Begitu sudah coba, sudah bisa?
Oke, berarti sedang
mempersiapkan beberapa materi.
Iya materinya
saya kerjakan ini proposal, jadi
saya mau submit salin ke klien.
Ayo, makin pasti.
Gopi saya.
Dua tahun lalu
saya mulai kerjakan,
setahun lalu saya promosikan. Sekarang baru bisa
dipakai.
Tau lalu, itu semua tentang
Paski WordPress lagi nih.
Iya.
Oke.
Nah.
Mudah-mudahan, apa ya. Masih banyak sih
yang bisa kita kulik sih sebenarnya.
Cuman ini yang menurut kita menarik ya.
Kalau menurut teman-teman apa. Yang dinanti
nanti apa sih. Boleh
dikolom komentar. Meskipun kita tidak live.
Tapi kita akan baca.
Komentar juga boleh kita
teman-teman kirimkan
kesana.in. Silahkan ngobrolin web.
Topik
atau narasumber atau
apapun. Bisa kirim kesana
nanti kita diskusi-diskusi juga.
Jadi untuk malam ini, sekian
dulu.
Kita ketemu lagi minggu depan.
Mudah-mudahan minggu depan kita bisa live. Karena ini
tidak live. Tadi lupa ngomong ya.
Langsung masuk ke
materi. Ya, malam ini kita tidak live.
Karena satu dan lain hal.
Nanti mudah-mudahan
minggu depan kita bisa live lagi dengan
topik yang berbeda. Kalau gitu, udahan dulu.
Selamat malam. Selamat
istirahat. Bye-bye.
Bye.
Deskripsi asli dari YouTube
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.
Episode Terkait
1 Apr 2025
Ngobrolin Lebaran
Episode ini adalah ucapan Selamat Idul Fitri dari tim Ngobrolin WEB. Eka, Ivan, dan Rizah memberikan salam Lebaran denga...
9 Agu 2023
Ngobrolin URL
Episode ini bagian dari niat baru mereka: menyelipkan topik yang benar-benar mendasar setidaknya sebulan sekali, alih-al...
12 Feb 2025
Optimasi Performa JS
Episode ini membahas tentang tips dan trik optimasi performa JavaScript, khususnya penggunaan atribut async, defer, dan ...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .