Modern Web UI
Ringkasan Episode
Bantu KoreksiEpisode ini berangkat dari satu keluhan yang sangat spesifik: web UI jadi berantakan begitu fitur LLM ditempelkan ke aplikasi yang sudah ada. Riza bercerita soal Google Drive yang tiba-tiba menyisipkan blok ringkasan AI di tengah hasil pencarian sehingga terjadi layout shift dan salah klik — CLS lama yang jadi relevan lagi gara-gara AI. Contoh lain, antarmuka chat sebetulnya melawan kebiasaan web: konten terbaru muncul di bawah, bukan di atas seperti Twitter, jadi butuh scroll-to-bottom otomatis dan penanganan tombol Enter di textarea yang biasanya gratis kalau memakai pustaka jadi. Di pembuka juga sempat disinggung Interactivity API di WordPress yang polanya mirip HTMX atau Livewire untuk filter, pencarian dan paginasi, serta Chrome DevTools MCP yang skill debug LCP-nya sudah bisa mengejar skor Lighthouse 100 dalam dua kali putaran. Bagian utamanya adalah Modern Web Guidance, yang dirilis tim Chrome DevRel di IO Connect Shanghai. Yang menarik, ini bukan pustaka dan bukan tool, melainkan sekumpulan agent skill berformat standar — bisa dipakai dari Claude Code, Codex, Antigravity atau harness apa pun. Isinya semacam RAG untuk dokumentasi web platform: pencarian semantik lokal memakai model TensorFlow.js hemat CPU dengan tokenizer BERT, cosine similarity, dan vektor yang sudah di-precompute saat build, jadi tanpa jaringan dan tanpa API key. Panduannya dipecah kecil-kecil per topik — CSS, UI atoms, UI behaviors, UI components, layout, performance, security, privacy — dan dimuat progressive disclosure, sehingga context window tidak habis. Secara default ia menargetkan Baseline widely available, yaitu fitur yang sudah ada di semua mesin browser standar selama 30 bulan terakhir, dan ia paham polyfill serta fallback untuk progressive enhancement. Mereka lalu mempraktikkannya langsung di repositori situs Ngobrolin WEB: meminta karusel CSS untuk daftar episode terbaru di homepage. Agennya membaca test case lebih dulu sebelum menulis kode, lalu mengambil panduan carousel-slide-effect dan carousel-snap-highlight. Prompt pertama masih menghasilkan karusel yang bergantung pada JavaScript; setelah diminta ulang secara eksplisit, hasilnya jalan dengan JavaScript dimatikan. Selipan penting lain: CSS clamp(), min() dan max() untuk fluid sizing tanpa breakpoint keras — contoh nyatanya mengecilkan jarak antar menu navigasi sebelum berubah jadi hamburger, dengan fluid.tw dan Utopia sebagai rujukan — serta peringatan keamanan bahwa skill itu cuma berkas Markdown yang bisa saja menyuruh agen membaca .env dan mengirimkannya keluar, jadi bacalah isinya sebelum menjalankan npx apa pun.
Poin-poin Utama
- •Menempelkan fitur LLM ke aplikasi lama memunculkan lagi masalah web UI klasik: blok ringkasan AI di hasil pencarian Google Drive menyebabkan layout shift (CLS) dan salah klik
- •Modern Web Guidance dari tim Chrome DevRel bukan pustaka atau tool, melainkan sekumpulan agent skill berformat standar yang bisa dipakai dari Claude Code, Codex, Antigravity atau harness mana pun
- •Cara kerjanya seperti RAG untuk dokumentasi web platform: pencarian semantik lokal dengan model TensorFlow.js, tokenizer BERT, cosine similarity dan vektor yang sudah di-precompute — tanpa jaringan dan tanpa API key
- •Secara default ia menargetkan Baseline widely available, yaitu fitur yang sudah ada di semua mesin browser standar selama 30 bulan terakhir, lengkap dengan pengetahuan soal polyfill dan fallback untuk progressive enhancement
- •Demo langsung di repositori Ngobrolin WEB: agennya membaca test case dulu, mengambil panduan carousel-slide-effect dan carousel-snap-highlight, dan baru pada prompt kedua menghasilkan karusel yang tetap jalan saat JavaScript dimatikan
- •CSS clamp(), min() dan max() memberi fluid sizing tanpa breakpoint keras — dipakai untuk mengecilkan jarak antar menu navigasi sebelum berubah jadi hamburger, dengan fluid.tw dan Utopia sebagai rujukan
- •Peringatan keamanan: agent skill hanyalah berkas Markdown yang bisa menyuruh agen membaca .env lalu mengirimkannya ke luar, jadi baca isinya dulu sebelum menjalankan npx apa pun
Dapatkan hanya di domainesia. Halo, halo. Halo. Selamat malam semuanya.
Keren sekali. Sehat ya. Apa kabar, Mas?
Kabar baik-baik. Kabar baik-baik saja. Ada apa yang baru?
Yang baru apa ya? Kemarin habis ngisi di Bandung. IOS.
Iya. Saya enggak bisa. Hari Minggu ternyata ya acaranya hari Minggu dan ramai 130 orang.
Wih, lumayan. Heeh. Ternyata ee apa? Karena GD langganan udah ke dibuking ke Surabaya ya, makanya kebagian kita.
Iya. Yaudah bikin pencetlah. Pencet apa? Oh, hilang. Bentar ya.
Iya ya. Ini ni fising dulu.
Ini nih. Iya. Oh, di situ.
Iya, ada anak di samping lagi mau nonton.
Jadi, mereka tuh cuma dia tuh cuma bisa nonton antara habis makan.
Oh, ada screen time ya? Ada habis makan sampai sebelum tidur aja.
Bentar lagi, Mas. Ya, paling jam 09.30 sudah kelar.
Oke. Oke. Heeh. Dirimu apa yang baru? Ada yang baru, apa yang baru?
Ada kabar-kabar apa atau lagi ngerjain apa? Lagi ada ee teknologi apa yang bisa di-share atau isu apa yang bisa di-share. Enggak
boleh ya? Mm isu apa ya? Enggak ada.
Isu enggak ada cuma enggak ada ya?
Ya, lagi sibuk-sibuk aja dengan kerjaan sehari-hari yang jadi sultan ya, jadi konsultan maksudnya.
Iya, konsultan. Jadi sultan. Em itu aja sih ya. Hidupnya hidupnya konsultan itu kan dari project ke project, project ke project.
Hm. Namun serunya em yang enaknya kan kita dapat apa istilahnya case-case baru, baru hal-hal yang baru yang bisa kita
ee kerjakan. Contohnya ee kalau di WordPress itu kan ada satu API yang baru ya itu namanya baru-baru
amat sih cuman baru mulai di-pick up lah ya kita pakainya itu yang ee namanya interactivity API.
Oke. Em jadi seperti HTMX lah ya. HTMX. HTMX tapi over wire.
Cuman ini overlay API. Oh iya, ada wire juga kan.
Iya sama aja cuman cuma komponen komponen patch apa satu fragmen itu dikirimkan sudah dibuild in dari backend
dari server. Iya. Nah, cara build-nya sedikit berbeda cuman sudah disediain sama si WP. Jadi kita mainan saya lagi project terus
mengintroduce ah mainan ini ah jadi ee meskipun server side atau kayak apa ya masih kayak traditional WordPress kalau
diklik pindah halaman tapi ada beberapa fitur yang kayak filter searching I itu pagination sudah saya sudah saya
bikin dia interactivity ya seru juga sih mainan kayak gitu itu ee hal-hal lain ya apa tugas saya sebagai
GDI Webformance sudah diambil alih sama AI e sama Chrome MCP.
Lihat transkrip lengkap (689 segmen lagi)
Iya, Chrome MCP khususnya skill-nya si Chrome def tool ee dibaging LCP namanya. Udah.
Hm. Apa yang dia temukan saya lihat ee 90% benar. Sudahlah.
Iya. Ih, kemarin kan di live streaming juga nyobain kan bikin landing page sederhana terus habis itu coba looping.
Coba looping. Pokoknya tasnya adalah tolong kerjain ee light house-nya harus sampai 100 semua.
Kalau belum lanjut apa optimize lagi.
Optimize lagi. Baru dua dua kali looping udah 100 semua.
Hebat ya itu ya. Landing page sih. Landing page kayaknya itu enggak ada yang ini enggak ada image
enggak ada macam-macam. Sudah harus bersiap-siap jadi apa namanya profesi saya diambil alih oleh AI.
Anti graffiti. GDE anti graffiti lah.
Emang ada enggak tahu ya. Begitulah ceritanya. Itulah yang baru. Cuman em ya enggak ada kabar-kabar yang menarik.
Kalau dari saya hidupnya bisnis as usual.
Bisnis as usual. B itu kan bahasa-bahasa enterprise. Kalau klien enterprise ketemunya ee gimana minggu ini? Business as usual.
Business as usual. B. B. Tulisannya BU aja gitu.
Hmm. Artinya baik-baik saja ya. Apa maksudnya? Nothing new ya.
Nothing new. Just tuh kayak di enterprise itu eh stabil itu adalah pencapaian hal yang bagus. Iya.
Justru itu yang dicari ya. Iya.
Hm. Kedengaran enggak sih anak gua ketawa?
Enggak apa-apa sedikit. Amanlah. Amanlah ya.
Heeh. Ini kita lagi nunggu narasumber belum datang ya. Jadi kita basa-basi dulu teman-teman di chat ee yang di
Linkin Heeh. yang di YouTube ee yang di internet boleh siapa-sapa boleh yang ketemu Mas Riza minggu lalu siapa
acungkan jempol enggak ada enggak ada yang nonton ya jadi kemarin itu yang unik adalah kan awalnya rown-nya tuh ada Mas Danang
i kan di awal dia dikasih waktu berapa menit gitu ee terus begitu Begitu briefing malam katanya Mas Danang cancel
yang di Bandung kan dia di Surabaya.
Jadi teman-teman speaker iya teman-teman speaker yang tadinya dapat jatah 40 menit jadi 60 menit ya gitu pintu malamnya coba
akhirnya ngakalin gimana caranya. Oh, ya udahlah buka buka kolom pertanyaan aja.
Kan ee kebetulan e beberapa minggu yang lalu sempat iseng bikin kayak slido buat ngumpulin pertanyaan tapi buat sendiri,
punya sendiri gitu kan. Akhirnya cobain cobain ternyata banyak juga yang nanya akhirnya 20 menit kosong itu kita tanya
jawab dari itu dari slide yang apa dari tanya jawab dari form itu. Jadi ya lama-lama slido bangkrut juga ini
semua SAS kayaknya semua SAS kayaknya pada ketar-ketir ya.
Oh ini ada yang nonton ternyata Mas Farizal datang ya? Datang. Wah mantap mantap.
Wah, ini dari Linkin semua, Mas Amril juga.
Wah, banyak yang dari Linkin sekarang ya.
Connectin ke Linkin saya gimana ya?
Entar bisa enggak? Bisa enggak sih stream ke Linkin multistream?
Oh, bisa. Belum coba sih. Belum coba sih.
Ya, next time mungkin bisa. Heeh, next time lah. Bisa dicoba biar makin banyak aja exposure-nya.
Yes. Iya. Kemarin saya enggak survei lagi siapa yang nonton ee yang suka nonton ngobrolin web. Saya cuman bilang ee kita
ada acara di Selasa malam sama GDE web eh dua GDE web lain Ivan sama Eka gitu.
Mudah-mudahan ada yang nonton dari sana udah ada kan satu minimal satu lah ya convert minimal satu.
Oke, sambil menunggu narasumber kita ee saya mau kasih info dulu bahwa ee episode kali ini kita masih kolaborasi
bareng Dominesia. Udah 17 episode kita bareng di ya sebelumnya sih sudah juga kan, tapi ini yang kedua kali dan sudah episode 17
episode. Jadi buat teman-teman yang mau berlangganan atau mau apa namanya? mau ee publish-publish aplikasi vibe coding-nya gitu ya. Kalau sekarang kan
udah apa namanya udah gampang gitu ya bikin aplikasi gitu ya. Nah, jangan lupa di deploy. Deploy-nya bisa ke mm Dominia
teman-teman bisa pakai cloud VPS Dominesia ada diskon 50%. Kode promonya ngobrolin VPSDN. Ini mana? Ee enggak ada. Kok enggak ada? Sebentar saya masih
bingung ini cara pakainya ini ya. Bukan bukan widget bukan notes.
Enggak ada belum ada. Oh ini dia promo code ngobrolin VPSDN. Ternyata di caption VPSDN.
Kita baru pindah tools soalnya. Iya diskonnya berlaku untuk semua paket, semua siklus. kondo promonya bisa dipakai lebih dari satu kali dan enggak
perlu ganti ee account kalau sudah punya ya.
Nah, ada yang menarik juga dari Domensia ini fitur baru. Kalau teman-teman mau dengan gampang eh dari vibe coding apa
pakai coding agent terus mau deploy ke hosting Nimbus Dominesia itu sekarang sudah mendukung MCP. Jadi tinggal bilang
aja sama coding agent-nya kalau udah connect MCP tolong diplay ke Dominesia tentunya pakai autentikasi dan lain-lain ya. Bisa teman-teman cobain
diskonnya 15% promo code-nya ngobrolin MCP seperti itu. Terima kasih dominesia.
Semoga ee bermanfaat buat teman-teman juga yang mau ee hosting-hosting atau mau publish aplikasinya. Kalau ada yang punya aplikasi yang ee apa karya yang
bisa di-share ya boleh di-share juga di sini atau di ee GetHub kita gitu ya.
Mulistam ke Linkin. Tapi bukan Linkin-nya Ivan. Ivan pengin ee stream juga ke Linkin. Kalau ini memang ada
dua, ke YouTube sama ke Linkin.
Kalau dulu kalau dulu kan pakai itu apa namanya?
Streamyard cuma bisa satu kalau enggak salah kan satu channel satu. Saya enggak bisa ke Muti YouTube, enggak bisa ke Muti.
Satu Linkin, satu YouTube tuh bisa tuh.
Cuman iya enggak tahu kalau stream ini bisa kedua Linkin enggak gitu. Kita lihat ya.
Pengangguran. Waduh pengangguran. Pengacara dong. Mudah-mudahan segera dapat rezeki, dapat kerjaan baru ya. Lancar-lancar semuanya cair-cair.
Ya, sambil menunggu ada yang lagi macul. Eh, malam hari ini kita mau bahas sebenarnya tentang web UI. Jadi, apa yang baru-baru
gitu dari web UI ya. Eh, kita sudah lama enggak bahas ee terakhir kapan ya kita bahas web UI ya?
Waktu kayaknya waktu bahas CSS WAP deh.
Iya, enggak sih? CSSP ya. CSS 2026 dan kita belum belum belum bahas baseline juga sih tapi kita coba bahas
yang waktu CS SS kan kita ada hal-hal yang menarik ya kayak yang karusel over dialog ya eh scroll driven animation jadi kayaknya
menarik deh e web UI ini juga apa ee kita belum apa ya bukan belum ya kayaknya materi-materi yang
sekarang yang berhubungan dengan web UI itu belum terlalu banyak dikaitkan dengan bagaimana membangun aplikasi ee berbasis maksudnya yang ada fitur
LLM-nya kan kita kadang-kadang agak berbeda ya ee penanganannya ya. Saya pernah ketemu tuh satu kasus ketika buka
Google Drive. He. Jadi ada shift layout pada saat musers dia tiba-tiba ada kayak nambahin AI di tengah-tengahnya gitu jadi turun. Saya
mau klik tiba-tiba udah ke bawah gitu.
CLS dong salah klik. Iya makanya itu hal-hal yang gitu kan praktiknya kan jadi ya CLS-nya sudah lama cuman karena kasus ada A-nya
jadi ee jadi hot lagi kan. Jadi perlu dibahas lagi kan diingatkan kutip Aya AI-nya salah ini ya salah coordinate
ya enggak sih dia ini apa dia loading kayak apa skeleton loading dulu tapi kan dia nurun turun ininya kontennya ke bawah
jadi ya kadang-kadang harus di itu Google loh maksudnya produknya Google gitu loh tapi ya gitulah makanya ee Eh menarik
juga dibahas kayak web UI eh dikaitkan dengan membangun aplikasi berbasis AI atau LLM gitu. Misalkan kayak chat. Chat
kelihatan sederhana kan kalau kita pakai library gampang kan? Oh taruh textbook di bawah terus di atasnya tinggal scroll
ke bawah. Tapi kan kalau itu kan bukan bukan khasnya web kan. Web biasanya kan yang paling atas yang baru kan. Kalau
ini yang paling bawah yang baru kan.
Jadi kita kan setiap kali ada hal yang baru, dia scroll ke bawah otomatis atau enggak atau kita tambahin button di
tengah-tengah kalau kita klik eh apa eh go to button turun ke bawah gitu. Benar enggak?
Eh ini contohnya chat yang ada di live stream ini kalau ada yang baru munculnya dari bawah. Iya bawah.
Di bawah. Iya. Kalau web biasa kan sebenarnya enggak begitu kan konsepnya kan. maksudnya web yang kita kenal dulu
lah misalkan kayak Twitter. Twitter yang baru di atas dong, enggak di bawah dong sosial media ya kan
dia enggak perlu scroll to bottom kan justru dia perlunya eh go to top gitu kan kembalikan.
Oh iya latest post latest post itu kan yang paling atas sebenarnya ya.
Betul. Let us post. Nah, ketika ada LLM ini jadi semuanya formatnya chatbot. Nah, itu mungkin menarik juga dibahas gimana UI atau
performance dan lain-lain ee apa namanya? dikaitkan dengan itu gitu.
Karena kalau kita pakai library mah gampang udah jadi gitu kan. Tapi kalau misalkan kita buat dari awal tuh berasa tuh oh
harus scroll ke bawah dulu kalau ada yang baru. Terus misalkan ee teks areanya kalau di-enter enggak bisa turun
ke bawah. Gimana caranya supaya bisa enter? Ya harus pakai keyboard ee apa namanya event gitu-gitu kan. Sama yang
tadi yang saya alami itu ee CLS. CLS-nya memang sudah sering dibahas, tapi ketika ada tambahan fitur kan kadang-kadang
kita enggak bikin aplikasi baru untuk ee LLM kan. Kadang-kadang kita integrasi aplikasi yang lama tambahin LLM tiba-tiba oh ada shifting nih, oh ada
ini, ada itu gitu. Jadi perlu di evaluasi lagi gitu ya. coba ya.
Apalagi yang pernah kejadian ya. Saya baru dapat itu sih kemarin. Kesal juga tuh yah kok turun ke bawah gitu.
yang kejadian enggak kalau ee Oh, ini saya pernah adopsi eh text to speech kan kayaknya biasa
kayak text to speech itu kan ini ya ee untuk konten ya biasanya text to speech heeh ee diembed jadi kayak play button jadi
kayak podcast kalau dan itu pakainya bukan LLM sih kayak ya memang dia pakai AI untuk bisa jadi keluarin suara yang
I tapi sudah di-upload ya audionya ya.
I ya dia akan ee apa sebenarnya integrasinya aja sih. Integrasinya kita kan cuma nambahin button ya button
di page itu nanti buttonnya itu yang akan maksudnya si service-nya itulah yang akan membaca konten kita, mensesizing
supaya kontennya bisa dibaca dengan benar. Cuma ada bawa satu kejadian cuman minor sih yang ee karena struktur HTML atau batas yang
mana konten itu akhirnya harusnya ads enggak dibaca tapi malah kebaca.
Hm. Oke ya. itu ada kayak filter-filter yang kayak gitu tuh yang harus di di bukan filter eh bukan ads yang ini ya bukan
ads yang kayak adsense yang yang loading belakangan ini mungkin ads yang kayak dia taruh banner atau taruh konten
sendiri ads yang di konten gitu jadi makanya di dalam kontennya iya ee sebenarnya subscribe form sih sebenarnya
kayak dia untuk minta subscribe cuman jadi kebaca sebagai konten.
Oh, yang kayak gini kan si eh si si-nya yang harus kita kasih tahu ini HTML ini bukan
bukan konten loh, bisa dikip gitu cuma ya harus integrasinya lebih lebih hati-hati aja ya. Ee namun so far ya kalau zaman dulu
itu memberikan ee mengirimkan konten atau si terpati servis baca konten kita kadang bisa salah. Tapi sekarang sih udah jago sih
dia sudah tahu yang mana beneran konten mana sidebar mana navigation sudah tahu.
Nah itu sudah tahu ya perkembangan zaman sekarang sudah canggih ya.
Canggih canggih ya. Sebentar. Nah, ini narasumbernya udah datang.
Dari tadi nunggu di backstage. Sor, sor, sor.
Takut kepotong nanti malah lupa. Heeh.
Lagi seru kelihatannya. Apa itu tadi?
Ini bahas tentang UI loh. Kok enggak bisa muncul ininya? Eh, apa namanya?
Loh, loh, loh, loh. Kok hang chatnya?
Nah, cek chatnya hang. Anyway, tadi kita bahas bagaimana? Nah, ini tadi. Sori, berarti kita bahas ini dulu. ee bahas
bagaimana ee apa ya antisipasi UI, web UI ketika kita implementasi LLM.
Contohnya tadi saya ngalamin ee pas Google Drive pas lagi search tiba-tiba dia jadi turun gitu karena ada
summarize-nya, ada AI something-nya gitu lagi loading kan. Terus juga kalau misalkan kita perhatikan chat kan sebenarnya chat itu kita harus itu bukan
natural web kan. Kalau web scrolling biasanya kan atas bawah. Kalau chat kan dia otomatis langsung yang baru di bawah
gitu kan. Nah itu kan kita harus scroll to down dulu kan kalau ada apa ee ada chat baru
ee scrollingnya kita turunin ke bawah kan enggak bisa otomatis kan gitu. H yang hal-hal kayak gitu kayaknya ada
hubungannya juga sama web UI sekarang gitu yang modern gitu sih.
Nah, kalau penemuan menarik dari eh apa itu Links JS tuh apa sih? Belum pakai Links JS. Wah, tadinya kita mau bahas
loh, Mas Agus. Saya udah planning sama Mas siapa tuh yang di Tokopedia?
Dendy. Iya, Mas Dendy. Tapi kemudian mendengar mendengar kabar sudah sudah kena lay off, saya enggak enak jadinya mau ngajar mau ngejar
nanti malah trauma. Wah, gara-gara link CS gua di lay.
Masa sih? Sampai segitu beliau dapat apa dapat employer baru. Siapa tahu pakai link CS juga di sana. LS.
Jadi semua dichat doain aja Mas employer baru yang lebih oke walaupun kemungkinan enggak ya karena LS ini adalah produknya dari Bite Dance ya.
Oh itu tuh internal. Iya jadi si Bite Dance itu ee membajak orang React Native untuk bikin. Jadi
orang Facebook dibajak sama dia, disuruh bikin sendiri yang lebih lebih modern dan lebih cepat performansnya. Iya, Bu.
I internal dan kemudian di open source.
Kata Mas Dendi sih bagus ya karena katanya Tokopedia sekarang udah satu cod semuanya antara web sama web, mobile dan app ya semuanya udah
satu web udah satu bas. Irasinasinya kelar di lay.
Aduh kan biar ke linknya jadi orangor sana orang mainland didatangin ke sini buat lanjutin karena udah tahu teknologinya.
Oh, Mas Agus mau boleh nanti kita ini ya boleh yuk tanya soalnya. Heeh.
Soalnya kita enggak ngerti nih link CS ini gimana dan perkembangannya ee di Indonesia tuh gimana. Karena yang pakai
baru ketahuan baru Tokopedia dan Tokopedia akhir-akhir ini juga performance-nya kurang bagus kan itu penyebabnya apa kita enggak tahu ya.
Jadi ditinggalkan sekarang banyak bugsnya banyak bugs-nya mungkin gara-gara migrasi itu kali kurang lancar kali migrasinya ya.
Bahkan sampai paymentnya juga kadang semua orang yang tahu semua orang yang tahu tentang base-nya udah jangan-jangan udah di layah
dicabut. Oke. Heeh. Sedih. Oke. Kita mau bahas apa nih untuk web UI?
Kembali ke topik. Oh, moderasi masih anget. Coba buka kan tadi ada ada tuh. Jadi, jadi sebetulnya kalau soal
kalau bahas web UI atau ee CSS, fitur-fitur CSS kan kita sudah lumayan sering ya, tapi ya yang sering jadi halangan kan ee
rata-rata webdve pada umumnya, kecuali yang NIS yang beneran emang follow banget, Mas. Ada Margal, Mbak Una dan
lain-lain ya. di luar itu kan nis di luar itu pada umumnya kan webdve juga satu entah enggak terlalu suka, enggak
terlalu tertarik CSS atau mungkin ee terutama yang full stack ee juga enggak sempat kan enggak ada waktunya buat
ngedalamin apa fitur-fitur terbaru. Terus kadang masalah yang terjadi kan kita enggak tahu apa namanya ya misalnya view transition ya. Kalau view
transition mungkin masih agak eh familiar lah karena itu eh apa di native pun juga ada ya cuma misalnya dialog
popitu tool tip misalnya kita tahunya namanya tool tip padahal namanya ternyata popo over atau mungkin scroll driven animation itu kan apa ya
maksudnya kalau yang enggak terlalu ngikutin kan ee sulit buat ngulik ee apa, jadi aku harus pakai apa gitu eh aku harus e
integrate fitur web UI baru di website ini tuh apa. Jadi salah satu yang menarik sih ini nih di IO Connect ee
Shanghai kemarin kemarin ya ini salah satu yang ee ya kayak rilis major tapi ini kelihatannya marking apa
ya kayak poin menarik di perkembangan webdrive juga deh baru pernah lihat ee ini yang di launching bukan tools bukan
library tapi sekumpulan skill agen skill ok jadi bukan ini bukan modern web guidance itu ee bukan fitur web PTI tapi agen
skill ya kayak agen skill biasa aja itu bisa diinstall kalau pakai enggak harus apa enggak harus pakai anti graffiti ya
pakai cloud code atau codex atau coding agent atau harness apapun ya bisa karena mengikuti standar apa format standar
agen skill itu. Jadi apakah eh apa itu modern web gu nah terus skill-nya isinya apa? ee itu ee skill ini membantu ee web
developer mengadopsi ee apa? mengadopsi fitur-fitur web platform terbaru dan di sini ya nanti ee ini open source
jadi nanti tinggal ee enggak usah nanti sih sekarang tinggal lihat ee lihat dashboard-nya. Tapi itu contoh-contoh query-nya deh. Scroll dikit ke atas
isinya apa? Scroll ke atas. Ee contohnya dulu. Jadi apa intinya sih yang itu tadi kayak performance ee kan
kita enggak tahu tuh ee istilahnya kita enggak tahu misalnya kita enggak tahu istilah CLS atau apalah image rasio CSS.
Nah, ya kita bisa pakai natural language.
Ada yang pernah pakai clen cllan enggak?
Clen claim. K clim. Heeh. Ada detail aja ada CL A MP kan klaim.
Iya. CSS klaim. Tahu enggak? Tahu enggak?
Enggak. Kim enggak tahu jumlah baris gitu enggak? klaim di CSS.
Jadi dia bisa apa ee bikin range range Heeh.
Jadi gua oke Mas Lisa nanya sesuatu yang baru ya kan. Jadi gua lagi suka pakai clan ee meskipun cara pakainya diajarin oleh
cloud code. Jadi kasusnya begini eh anggap kita punya screen size 1800 piksel. ya 1000.
Oke. Terus kontainer size-nya kita yang di tengah itu mungkin kita set maksimal 1600 ya. 1600.
Jadi kan ada sisanya 100100 tuh.
Nah, apa yang terjadi kalau misalnya kalau kita set max kalau kita makin besar screen size-nya kan ke 2000 tentu
kan kita stay di 1500 itu kan eh 1000 berapa 1000 ya 1500 lah ya stay di tengah kan kontennya kan. Nah kalau kita
misalnya kurusin atau kecilin screen-nya maka yang terjadi kan layar kita harus bisa responsif.
Jadi dia ee kalau misalnya kita bikin break pointnya dia makin kecil, makin kecil, makin kecil dan dia sampai tahap
tertentu akan shift kek gitu kayak jomplang gitu klek gitu. Nah, pakai claim kita bisa nge-define kayak jadi
range kalau misalnya em anggap ada menu, ada navigation menu ya, ternyata di screen tertentu menunya itu kalau kita punya
apa ya istilahnya gutter ya space-nya itu gutter ya istilahnya ee jarak antara menu di tengah-tengah ya gap
jarak jarak antara menu kan ada menu menu item A, menu item B, menu item C gitu ya. Kalau misalnya kita atur screen
size si-nya itu kan tetap i kan.
Nah, yang terjadi kalau misalnya kita ee screen-nya kita kecilin bisa terjadi kalau kita pakai flex itu kan turun ke
ee layar ke second row sebelum dia terjadi menjadi hamburger sebelum. Jadi kan kita bisa set kalau misalnya sudah sampai
screen breakp-nya yang kecil ya hamburger. Tapi kalau belum sampai ke hamburger kan jadi turun atau menunya nambah kan bisa jadi
turun. Nah kita bisa set pakai clim.
Kalau screen saya ikut ini ikut mengecil kita bisa set juga itu inya itu si jaraknya si antara menu itu mengecil
juga. Oh bisa kayak fleksibel. Ngomong-ngomong k buka itu link di chat.
Iya, sebentar. Nah, Eka udah pernah bawain ya tahun lalu?
Iya. Skipskip aja terus. Skip terus sampai bosan. Skip sampai tengah. E, next-n aja terus.
Enggak bisa dilihat ininya full-nya apa.
Ee pencet O. Pencet O. Heeh.
Oh, gitu. Heeh. Nah, terus ya udah cari sampai ke Nah, functions bukan bukan reveal JS.
Oh, bukan ini. Bukan. Next. Nah, ya gitulah itu enggak penting. Nah, terus next intinya next.
Ini dia klem klem. Oh, klem panah ke bawah.
Down arrow errow panah ke bawah ya. Itu ada min, ada max, ada clim ya.
Itu tadi udah udah dijelasin sama Ivan kan. Ya udah panjang lebar.
Hah? Itu intinya tuh ken intinya ketiganya adalah cara atau function untuk ee menghitung eh fluid sizing tanpa kita harus ee
mendefinisikan hard break point. Jadi mana yang menanglah kalau ya sesuai namanya min yang yang terkecil yang menang max yang terbesar yang menang
klaim di kita tentuin batas atas batas bawah ya udah dia dia ngitung dia mengcalculate sisanya.
Keren, keren, keren. Nah, down arrow lagi.
Panah ke bawah lagi. Ke bawah lagi.
Nah, bawah lagi. Terus yang yang dulu dulu pakai ee dulu pas pertama nyoba sebelum bikin buat talk ini dulu tuh yang sebal tuh e mikir
urutannya min sama max mana yang lebih kecil ya kan enggak tahu. Tapi justru the point kan kita enggak tahu. kita
enggak bisa ee kan kita enggak tahu di awal website kita bakal dibuka dari viewport ukuran berapa. Jadi ya udah
kita enggak usah mikir biar browser yang ngitung.
Iya tuh ker si kalau kita mainin screen-nya kayak gini si si teksnya itu enggak ikut turun kan. Kalau aslinya tanpa klaim dia
bisa ee enggak mengecil ya? Enggak mengecil ya?
Iya ke wap kan? Iyaap ke bawah.
Ada salah satu contohnya yang saya e contoh nyata yang sedang saya kerjakan barusan saya benerin 2 hari lalu yaitu
navigation. Kalau kalau dia screennya dikecilin sebelum terjadi hamburger saya ikut dia ngikut mengecil eh gutter size-nya atau ya padding size lah.
Gutter no it's gutter size ya namanya antara e jarak antara menu item di tengah-tengah itu ikut mengecil. Jadi
enggak enggak selalu sama gitu. Hm.
Jadi bisa bisa menyesuaikan responsif. Nah, bahkan ada framework-nya sih. Framework buat apa? Eh, kayak gini responsive eh
sizes. Pencet arrow bawah. Nah, luid.tw.
Wih, TW itu apa? Twin. Oh, iya ya. pakai Twin tapi kayak plugin aja buat ng-set itu sama dikasih beberapa
kayak sensible defaults gitu loh reasonable defaults.
Hmm. Ini Utopia ini saudaranya si Eka nih.
Sama-sama FYI suaranya keluar keluarga besar FYI ya.
Emang semua FY semua yang pakai semua yang pakai domain FYI saudara bukannya itu ini ya harus dari keluarga
ningra tertentu bukan iya apaan itu itu TLD yang paling murah lagi. Salah satu TLD yang paling murah
dtw dong yang gratis. Hah? Emang TW gratis? DT dulu dulu kan gratis ya dulu ya zaman dulu ya. TKT tk Tela. Oh
TK TK TK I salah. Promosi apa? Promosi pulaunya dia kan.
Ada-ada aja ya. Oke. Menarik ya.
Nah, lagi-lagi kalau misalnya belum tahu tentang fitur itu ya ini kan karena sudah tahu kan tinggal cari. Nah, bisa
pakai ini tanya dijawab sama dia sama AI. Kalau kita pakai skill ini klaim itu kalau saya enggak tahu sama sekali
harus bisa. Harusnya bisa lah ini ee dari contoh-contohnya lihat aja jadi kayak security.
Oke. Gimana kita menggambarkan? Oh, saya mau ini responsif teksnya. Misalkan kayak tadi ya, contoh ya.
Yang ini saya mau eh teksnya responsif.
Kalau size-nya mengecil, e font size-nya juga ikut mengecil dan tidak turun ke bawah. Dibikin persen kali sama dia. Enggak ya?
Iya. Kalau nah itu kalau enggak pakai skills eh kalau enggak pakai skills modern web guidance ya bisa dijamin
enggak eh apa hampir pasti solusinya aneh kan. install library eksternal i installat cuma buat mungkin ada fitur
itu enggak tahu tapi kalau ya buka aja eh gitub eh repoonya modern web guidance skill bentar enggak ada di sini gitub-nya ada
masa enggak ditaruh sih ada di atas coba GitHub noh ada nih atasnya paling atas dia tuh nah terus walaupun skill-nya ada ratusan
apa ee berapa rapi Ya, ratusan refleks banget ya sih berapa skill tadi kita manggilnya satu gitu ya.
Heeh. Jadi enggak usah takut menu-menuin apa konteks window karena skill. MD-nya cuma satu terus dia punya ya kayak dia
dia punya CLI sendiri. Coba nih buka yang buka skills folder skills modern webgu guidance skill.md-nya.
Nah, yang apa? Eh, agent skill itu kan dioad di dalam coding harness pakai progressive disclosure kan. Jadi, eh
artinya enggak seluruh file skill itu enggak seluruh seisi reboad semua karena bisa habis token kita.
Yang di-load cuma itu modern apa? Cuma meta e cuma frontnya ini apa udah ada research tuh.
Oh dia manggil gini ya. Baca ya dia baca aja ke bawah banyak.
Nah tuh cuma baca aja description-nya.
Trigger immediately for bla bla bla.
Do not trigger for eh search tool for model kayak daftar isinya lah ya indeksnya ya.
Jadi kalau kita pakai ee asal kita pakai LM apapun yang enggak jelek-jelek amat harusnya sih bisa ngikutin instruksi
ini. Ya emang ada Lel yang jelek-jelek amat pakai Haiku 3 kali Gemini 2.5 udah deprated maksudnya. H iya atau
apalah yang enggak standar atau pokoknya model yang masih enggak bisa ngitung huruf R di kata stroberi yang masih
enggak tahu kalau mau cuci mobilnya harus dibawa ya gitulah ee logiknya turun.
Saya pernah tuh sekali nge-post itu di Twitter. Jadi saya cobain kan di cilot e GitHub Copilot terus saya tulis apa tunjukin screenshot
dia enggak bisa ee huruf R di stwberry dia enggak bisa ngitung dua dia bilang jawabnya. Saya screenshot taruh di
Twitter dihujat loh sama siapa? Kita enggak bisa menilai coding agent hanya dari suruh menghitung stroberi.
Lah ngitung stroberi aja enggak bisa gimana coding gimana yang lebih abstrak?
Dihujat loh. Ada yang menghujat gitu loh. Sedih banget orang cuma bercandaan doang padahal kok ada basernya ya. Aneh banget.
Ada mahasiswa-mahasiswa yang dapat account gratis.
Iya, mungkin. Saya enggak tahu itu siapa juga saya enggak kenal.
Atau jangan-jangan itu AI soalnya dijawabnya bahasa Inggris. Curiganya sih.
Nah, iya. Coba coba coba di-reply tanya strawberry-nya berapa? Jangan-jangan dia juga enggak bisa jawab soalnya.
Oh, iya ya. Begitu ada mulai yang kayak gitu-gitu tuh biasanya kalau saya curigai ada postingan atau ada komentar
AI saya langsung tanya are in strawberry.
Kalau e apa gardilnya enggak dipasang kan?
Heeh. Kalau gardernya enggak dipasang udah selesai. Ini apa nih? NPX ya. Itu sebenarnya jadi skill itu cuma
ee buat manggil ya, cuma buat kriteria filter teknologi apa yang di-support sama sebetulnya ada ee script-nya sendiri.
Ee ya jalanin aja tuh kalau enggak pakai kita enggak harus install agen skill-nya sih. Bahkan coba aja kalau mau coba buka aja
terminal. Eh nih oke komennya ada di terminal di project apa nih?
Iya, folder kosong aja. Itu aja si apa? Project ngobrolin web.
Ngolin web ya. Heeh. Oke. Ngobrolin web. Eh, pindah screen dulu ya. Bentar ya. Pindah screen ke sini.
Eh, kelihatan kan? Iya. Nah, ini.
Sah. Nah, sambil pindah screen sambil scroll aja ke atas tadi kan itu jadi ee anggap aja kita ngikutin instruksi yang
di skill.m. Scroll ke atas tadi yang di GitHub-nya.
Oh, yang di GitHub. Oke, kita coba ya langsung demo nih yang di atas ini.
I kalau e ya dari atas saja maksudnya in the real world ini kan interaksi ini bakal dilakukan oleh coding agent kita,
coding harness kita. Tapi karena kita lagi pengin nyoba cara kerjanya gimana, ya udah kita ikutin aja nih. Kita scroll
aja ke bawah. When to use.
Eh, must use the skill at the start of bla bla bla before creating bla bla bla.
Ya udah, scroll ke bawah. Nah, yang penting sih usage instruction-nya sih kalau pengin lihat cara kerjanya.
Modern web guidance letus search query skill version. Dia akan jalanin. Dia akan jalanin ini sih.
Jalanin iya ee itu copy aja sampai search NPX bla bla bla.
Ini. Heeh. Ini skill version-nya option enggak usah dipakai. Iya.
Oke. Ini eh salah kan? Ini. H.
Query-nya apa? Nah, query-nya ganti aja tadi. Eh, tadinya aja ee ya enggak jangan justru pakai natural language.
Oh, natural language. How to make how to make my text size flexible.
Tex size flexible. Flexible but also set maximum size and minimum size. Nah, bisa enggak dia cari gitu?
Bisa sih pakai natural language. Coba aja. Bisa enggak ya? Mestinya bisa.
Eh, PNPX loh. Kan kita udah pakai work tree. Jadi untuk menghindari kebanyakan note modul pakainya PNPM aja.
Tuh, tuh tuh. Nah, pakai intensi dia nge-resolve beberapa.
Nah, cuma enggak enggak muncul similarity searchnya enggak dapat ya.
Cara kerjanya kayak gitu. Jadi ada similarity-nya ee dihitung similarity-nya sama yang eh query kita, Guys. Ee tadi apa ya? Saya tadi kan
sempat nge-prom kan kata-kata saya gimana caranya supaya teksnya eh follow the screen size without
make the text apa turun ke bawah itu apa ya urap ya turun ke bawah kan karena terlalu besar
kan eh terlalu kecil udah muat lagi kan ini kontainernya kan.
H to large or small gini apa?
Without making the text too large or small?
Reven text wrapping. Oh, text wpping.
Tex wrap. Terus text wrap balance. Oh, tex.
Gara-gara ada rap itu jadi dia ambilnya yang rap ya. Ini berarti dia sistemnya pakai similarity ya.
Heeh. Dia pakai vektor. Heeh. Dia punya sistem vektor ya. Ya udah itu kalau seberapa persepsi sih ya nasib-nasiban
ya. Cuma yang jelas e responnya adalah array array isinya fitur native web platform. Jadi ee ini lebih ke apa
penangkal semua harus apa kita minta apapun yang UI diinstallinwin sama CN sih lebih ke itu. Coba kalau requestnya
yang simpel-simpel lah misalnya how to make CSS only karusel. Karusel.
Oke. How to make chest as only carosell gini ya?
Carell. Heeh. Iya. Terminalnya pakai western.
Saya terminalnya pakai western bukan barang siang.
Hah? Apa hubungannya? Terminal. Terminal. Terminalus flesetan.
Sound effect. Terminal. Terminal blok M kayak premen dongkrongnya di terminal.
Iya dong anak terminal kita. Visually highlight the current. Oh bukan description ya ini ya.
Ya itu. Heeh. Kan ada ID-nya snap highlight feature shes ya. Intinya cara kerjanya gitu. Heeh. balik ke GitHub-nya
tadi. Nah, itu kan step one itu udah dikasih example output sih. Contoh output-nya kan kayak gitu tuh. Ada ID, description,
yang penting sih ada itunya similarity-nya bla bla bla. Terus kalau mau nglist semua juga bisa. Jadi kalau search kalau
mungkin query-nya terlalu aneh, search result-nya enggak jelas atau enggak ada match-nya atau similarity-nya terlalu rendah, bisa dilist untuk ngelist semua
yang ratusan itu. H. Nah, terus next kan berarti kita udah dapat ID-nya ya. Ya udah, habis itu
retrieve aja ee berdasarkan ID-nya tadi.
Coba aja salah satu atau dua.
Retrieve berdasarkan ID yang tadi ya.
Heeh. Ini kalau ada background sound begini kena enggak sih nanti Mas Rizah?
Ya emang ada background sound ya?
Hah? Enggak ada. Itu si Eka punya background sound.
Oh masuk ya? Masuk. Bukannya ada standar volumenya ya? Jadi kalau misalnya kayak jalan di mall atau di mana
engak sini bisa kedetect enggak masuk.
Kok jadi ini kok yang kecopy? Nah, ini PNPX modern web guidance retrieval apa tadi? Carusel Snap highlight itu aja
tadi. Karusel dash. Heeh. Karusel dash ini ya. E heeh.
Oke. Ini. Heeh. Oh, langsung ngasih contoh baca detailnya semua. Jadi kayak kayak R aja sih
biar agen kita ngerti ee apa best practice e web platform.
Jadi kayak Rag gitu ya, kayak RG. Rag.
Rag bukan kaya emang lagi sih bukan kaya lagi rag beneran tapi dibikinin oleh tim Google defrail dan dimaintain kan harusnya
harusnya dimaintain dan sebenarnya bukan punya apa ee bukan Chrome doang kan Chromium jadi ee apa kontributornya tuh timnya Edge juga sama
ini consult ke apa sih eh mailing listmailing list-nya W3 itu loh yang bikin standards, web standards. Jadi
tetap minta input dari komunitas. Hm.
Ya udah sih, sisanya sih sebetulnya ya ya gitu-gitu aja. G instal aja langsung.
Iya. Kalau diinstall boleh ya kan? Biar bisa biar bisa lihat isinya.
Coba biar bisa nyoba ya. Jadi sebenarnya ini sekalian bikin aja coba buka ngobrolin dulu ngobrol ngobrol./web.
kayaknya ada yang saya mau bikin karusel tapi enggak jadi.
Enggak pakai slash web ya? Iya. Iya.
Kalau slash web jualan baju. Iya juga ya.
Belum jadi. Ini maksudnya jangan di ee kita bikin ee karusel.
Mau bikin karusel? Iya. Coba ini episode terbaru dibikin karusel maybe.
Oke berarti ini di clone dulu ya. Kok enggak usah di NPX aja kan cara pakainya?
Hah? Enggak pakai skill lah. Iya maksudnya dia untuk Oh langsung di sini NPX saja kodenya npx saja.
Coba cari ini. Lihat back ke website-nya.
Heeh. Yang tadi bukan yang was in CSS itu loh modern web CSS-nya. Iya lah.
Eh mana sih? Lah kok itu ini itu kanan kanan itu di kanan eh atas itu tuh tuh tuh tuh oh iya i
al installation method iya sih biasanya kalau nginstal skill saya langsung dari skill dmmd-nya aja saya ambil enggak enggak nginstal kayak
gini oh biasanya udah atur atur atur ya terserah bebas ya enggak apa-apalah ini pengecualian PNPM dong eh PNP X bukan?
Oh iya lupa ya. Benar juga.
W kalau pakai clock coat atau semacamnya bisa ada pluginnya sih tapi ya itu rapper doang.
Pakai apa, Mas Risa? Hm pakai anti graffiti lah.
Kayaknya udah ada deh ganti graffiti di atas. Udah anti grafiti grafiti udah kan ini kan di sini kan
itu di atas kan ada satu. Eh, standard.
Agents kan itu agents.md. Kalau yang ini eh do agents kalau yang ini yang aneh-aneh nih yang aneh-aneh yang
enggak mau pakai standar. Heeh. Udah enggak usah ya langsung aja.
Project base. Project aja. Sim link apa nih? Installation method sim. Copy all to all agent. Sim link aja.
Prosed. Oke, pakai ai. Wis keren.
Suruh login nih pasti. You are currently not in.
Terminal. Loh, kok terminal? Ya udah, terminal. Yes, I agree to improve. No, enggak bisa ya.
Bisa harusnya. Nah, bisa terus habis itu ke mana?
Enter enggak? Udah ini enter nih.
Oh ya. Ee panah ke bawah.
Oh ini ada lagi ya di bawahnya ya ternyata ya.
Elah kok jadi pusing amat ya.
Heeh. Ah yes i trust. Oke sudah ya. Udah kan udah dapat nih. Belum udah login berarti.
Terus skill kita lihat listnya ya. Ada enggak?
Ada tuh. Oh tuh ada kan.
Langsung aja. Oke, langsung gimana? Eh, I want to implement CSS carusel.
Carusel Scarosel for new episode. New episode on the homepage. Gitu aja.
Gini sekalian test drive T game ini 37 flash ya.
Oh, ini. Oh, iya ya. Ketahuan jarang buka.
Wih, udah kelar cepat amat. baru reading dia kepanggil kan tapi dia berhasil menginfo ini npx enggak bisa diubah ya Pnpx gitu ya
enggak apa-apa sih ya udahlah yes aja kecuali npm-nya dihapus ya enggak dipakai sama sekali ya di ini aja next time di
simlink alias alias di alias di alias iya iya alias dia berhasil mendapatkan indeks astro dan episode card nih npm test
nah lihat tuh tadi yang diretrieve adalah carusel slide effect sama karusel snap highlight itu kan yang tadi kita buka kan
jadi kita baca speknya tuh yang di Oh oh oh oh dia baca test case-nya kita dulu tuh Mas
I sebelum ngoding Dingin. Keren juga nih. Si contoh yang bagus ya. Contoh yang bagus ya.
Iya. Baca dulu test case-nya kalau ada tesnya.
Kalau enggak ada ya buat dulu ya.
Nah, tuh search carusel references-nya. Eh, jadi intinya sih kan karena web UI itu kan cepat banget dan relatif baru
dan kontennya enggak banyak. Kalau misalnya bergantung ke training data atau cuma arbitrary web search yang muncul ya jaquery nanti tiba-tiba kita
minta ke rusel dibikinin jackery. Jadi ini kayak rak bukan kayak ya ini rak untuk mengarahkan ee ini
mengarahkan ke dokumentasi web platform yang up to date.
Wih, sudah jadi aja play cuma yesyes aja biarin si baru jalanin play fitur menarik.
Eh, fitur menariknya adalah dia otomatis paham baseline. Jadi apa? Eh, by default kalau kita enggak ng-request yang di fitur yang diimplement adalah
baseline widely available. Jadi enggak usah takut tiba-tiba dibikinin pakai apa sih UI aneh-aneh yang belum launching di
browser apapun. Rasanya mirip ini ya? Mirip si cloud code ya. Apa memang begitu ya standarnya sekarang ya? Kayak pattern-nya ya.
Standar pattern si ini ee coding agent yang di terminal.
Hm. Iya. Iya. Familiar X aja sih. Iya.
Familia X aja. dia leading. Jadi pasti orang pada ngikutin yang familiar pasti ngikutin.
Plus kodenya udah bocor sekali. Jadi kayaknya orang pada ngambil open source enggak sengaja ya?
Heeh. Ini nih. Bentar. Mana ya? Uh. Sambil buka ini. Eh eh. Salah.
Ini playide pasti lama nih kita.
Coba cari materi yang lain dulu.
E scroll ke bawah. Cari aja bagian interpreting browser support and fullbacks. Nah, itu dia.
Jadi, eh dia punya dia otomatis punya akses ke database baseline yang terupdate. Asik kan?
By default baseline widely available yang digunakan yaitu fitur-fitur yang udah masuk di seluruh browser engine standar selama
eh 30 bulan terakhir 2 seteng tahun terakhir itu udah baseline. Maksudnya pakai baseline kan?
Iya. The e all guides assume baseline widely available. Tapi kita bisa request maksudnya kita bilang misalnya kita
kendorin eh apa kita bikin lebih loose baseline newly available enggak apa-apa ya bisa kita perintah pakai natural
language ya bisa kita custom bukannya artinya kalau sudah basel dia sudah udah sudah stabil di dua major
browser terakhir ya. Sekarang beda whly available sekarang parameternya 30 bulan terakhir.
Karena alasannya dua dua major version itu kan eh kan enggak bisa diatur Safari mau rilis dua major version jaraknya
berapa lama eh apa Firefox berapa lama.
Oke, sepertinya udah bunyi tadi. Oh, create.
Ternyata bunyi. Minta minta izin permisi.
Permisi dia ting tong. Misi. Gua mau nulis nih bunyi lagi.
Accept all. Enggak bisa. Enggak ada.
Yolo. Enggak ada. Yolo. Shift tab. Oh, enggak pakai enggak pakai ini kali enggak pakai.
Yes. Edis tuh. Nah, udah kurang yolo kita. Kurang yolo.
Nah, terus selain baseline dia udah punya pengetahuan tentang polyfil.
Polyfill atau fallback. Eh, senang banget ini. Polyfil ya.
Eh, by default dia akan dia ngazy load dia bisa dia paham lazy load polyfeld.
Jadi kalau apa progressive enhancement kalau misalnya eh browsernya support ya udah pakai fitur yang baru. Kalau enggak
support lazy load polyfill. Jadi eh apa itu kan best practice ya lagi-lagi itu kan itu nich mungkin kalau yang bukan
orang crown end ya enggak tahu juga pengin pengin nerapin best practice pun enggak tahu keyword-nya apa dan nyari
mungkin enggak sempat. Nah, ini terus kalau cuma apa ngandalin training data LLM atau apa web search random nanti
hasilnya aneh-aneh. Jadi di grounding ee diatur pakai skill ini. Tapi bisa kita custom juga tuh kayak apa tuh Safari
17.4 eh 174 atau never recommend or implement polyfill ya bisa kita atur. Tapi by default e sangat reasonable sih widely
available terus bakal ada fallback atau polyfel.
Kalau emang ada. Oke. Itu gimana? N ada permisi lagi.
Iya. Ternyata masih tapi build doang.
Udah selesai. Udah selesai dong. Jadi penasarannya
lama ya. build to finish. Coba npm run def.
NPM run build. PM run. Eh, PNPM kan ini.
PNPM def ya. Kalau ini apa?
Oh, jalanin lagi. Lay right. Habis dibuild.
Ya udah. Ini udah jalan belum? Mana sih?
Wih, jadi bingung lihatnya. Yes. Kita lihat dua-duanya.
Hah? Yesja. Ah, duuanya. Kayaknya harus itu deh. Yes and always low bla bla bla. Apa? Gak tahu.
Oh, error apa ini? Tuh PNP misal enggak ada. Hah? Oh, approve build-nya PM.
Yes. And yang mana? Yang ini apa? Yang ini yang nomor dua. Nomor ini yang nomor dua kayaknya deh mungkin
ya. Nomor dua ya. Iya. Ini apa ini? Approve. Ini yang build dia mau pakai itu. Iya. Build-nya
buat yang build apa pakai shar apa pakai worker di ES build ya?
Bu kayaknya kita punya deh. Y bu dia kan enggak pakai cloud flir.
Heeh. Eh cloud pakai cloud. Eh oh kita di worker ya. Work static ya.
Wer dia enggak apa-apa sih. Kalau cuma buat de enggak apa-apa dong harusnya.
Iya ini banyak amat ya. Iya iya. Semua enggak bisa ya? Ya semua mungkin bisa cuma kita enggak tahu
caranya. Udah ya. Oke. Ini apa? Summary itu tadi laporannya. Ya udah.
Iya udah berarti udah nih. Oh coba local host 4321.
Mana? Wih ini weh. Iya. ini CSS bro. Eh coba bisa dislike enggak?
Inspect dulu bener atau enggak. Jangan-jangan Jack nih. Bisa. Tapi pakai shift, Pak.
Iya. Hah? Pakai keyboard. Maksudnya pakai mouse di slide gitu bisa enggak?
Bisa. Mouse pakai shift tapi pencet shift pakai scroll.
Oh, kalau di drag drag enggak bisa.
Oh, enggak bisa drag. Di sininya bisa nih. Di sini bisa nih.
Oh, enggak bisa juga. Enggak bisa juga.
Kurang karos. Simpel kar. Iya kan kita enggak minta harus bisa ini, harus bisa itu.
Itu pakai karus waper dia tadi.
Mana di atas itu data karus item. Data kas item.
Coba matiin JavaScript. Gak jalan dong astronya. Eh jalan nih ya di ini e shift tanda tanya komen shift P.
Komen shift P. Iya. Disable script.
Disable. I reload. Oh, reload. Ih, yang bikin yang bikin web-nya siapa nih? C pakai tarp Jalak J. Ininya tetap
di sini ininya nih. Nih. Iya. Aneh ya.
Scrollnya next next-nya enggak jalan. Scrollnya enggak jalan tapi fungsinya jalan. Eh, diklik enggak bisa juga ya, P? Berarti enggak belum bisa dong.
Tapi bisa scroll. Eh, kalau ini close kalau scroll ini berarti kan bukan JavaScript itu kan apa namanya istilahnya
step itu kan step kok ke sini bukan itu kan overflow.
I want carosel can run without JavaScript.
Ayo lu dimarahin sama majikan. Paya ah.
Paya ah. Enggak asik. Banyak mintanya lagi.
Jawab apa tuh? Hah? Jawab apa si itu?
cari lagi. Pure CSS carusel angor exploring zero JS carusel.
Ah, masa dia enggak tahu sih CSS carusel. Ah, enggak sih apa terlalu baru ya?
E kecewa penonton. Bentar sambil coba lihat itunya dong.
Belum apa tuh? Sambil coba lihat GitHub-nya aja.
Gitub-nya ya. Lihat aja ada guide-nya atau enggak.
Coba buka file explorer yang di enggak yang tadi aja.
Back. File explorer ini ya. Nah buka yang di kiri.
G ada CSS enggak ada. Cari aja karusel.
Ini ada slide effect, snap highlight.
Udah dia pakai tuh tadi dua.
Iya. Ini set effect isinya apa?
Buka aja entar butuh lagi. Cuma yang seru dari maksudnya yang menarik dari sini ini beneran kayak
dipecah fiturnya. nya dipecah-pecah jadi kecil sih. Nah, perkara manjur manjur atau enggak sih ya perlu di test drive
yang banyak tapi ininya kayak guides ada UI atoms ada apa tuh UI atoms, UI behavior, security, privacy, performance, UI
componen, layout. Jadi yang di folder CSS tuh malah cuma yang pure apa CSStax-nya.
Tapi iya keren sih dari sisi build-nya keren sih bikinnya nge-breakdown konsep-konsepnya kayak apa ui component visual design
dan lazy load kan kayak only load skill-nya on demand dibutuhin jadi enggak menu-menu dan gak bikin halu
semantik search dulu bagusnya itu jadi enggak dimasukin semuanya CS apa skillnya nya seram banget kalau dimasukin semuanya
tuh langsung jatah seminggu habis itu.
Iya udah katanya coba aja manjur atau enggak.
Wih, ada tambahan ini nih. Bisa diklik coba. E masih ke-disable enggak itu JavaScriptnya ini ya? Ini JavaScript disable bukan ada
tanda seru ini apa maksudnya? Iya. JavaScript is disable.
Is disable. Oke. We terus diklik bisa enggak? Bisa.
Bisa. Weh. Harus dua kali promping tapi ya.
Harus dua kali. Tapi yang boleh juga engak harusnya kan itu udah kita mention di awal.
Oh kita ngpromptingnya kurang pure CSS yang bisa run meskipun.
Iya. Kalau projectnya Mas Arya tuh di di agents.m-nya tuh ada ditulis progressive enhancement can run without JavaScript.
Nah, itu jadi agen MD itu gimana? Prom engineering-nya aja berarti kan ya.
Iya. Ini kita belum tahu cara pakainya aja.
Ini jalan ya scroll-nya enggak jalan. Oh jalan. Oke, keren. Keren.
Boleh juga nih. Kita sudah bahas ini minggu lalu, cuman baru kali ini di kita praktikkan ya pas.
Heeh. Sama kita belum lihat cara kerjanya kan ee yang urutannya tadi ee gimana dia nyari terus ada kayak vektor similarity-nya,
confidence atau apa itu ya. Nah, terus ini bagus gitu kayak detail banget. Is it a complex page or
component structure with rows? Bla bla bla. Jadi, eh yang jadi bukan cuma daftar fitur-fiturnya apa aja eh cuma
dikaitin ke behavior-nya. Jadi harapannya sih membantu kalau kita prompting pakai natural language tapi kita enggak tahu exactly namanya apa.
Hmm. Tapi saya penasaran ini dia pakai konsep apa ya modern web guide guidance ini ya.
NPX-nya vektor sih ya itu pasti kan bisa ngitungity 0 koma bla bla bla tapi markd.
Oh iya sih e RG-nya pakai markdown ya.
Ada enggak dia ya di situ juga sih pasti tuh SRC. Oh beda ya SRC ya?
Enggak tahu mana sih engak? Iya sama ininya gitupnya sama. Oh, beda ini modern web guidance di sini. Modern
web guidance SRC. Tapi di bagian mananya ya?
Ya udahlah nanti. Eh, bin bin bin kalau eh ke package package untuk jason-nya dulu.
Lihat bin I lihat binnya ke mana tuh. BINGD.ts.
Berarti ke gd.ts. GD itu apa ya?
I don't know. Google developer. Nah, inilah inilah yang dijalankan oleh si NPX itu.
Cel guides FS guide. Berarti JD itu guide guide directory completion completion yang searching-nya mana ya?
Dia punya data cari aja search eh query kan query kan query kan dia iya ini.
Oh itu doang ya itu argumennya argumennya dijalanin di mana ya?
Pasti lagi pengin nyari pengin nyari ini kan pengin nyari ke mana sih dia caranya ngelakukan iya lakukan cuman tias tadi
vektor database-nya itu kan heeh pengin tahu dia pakai apa. Oh iya, kita lihat ini aja. Package Jason-nya
aja ya. Dia pakai apa nih teknologinya?
Harusnya enggak enggak ada yang aneh-aneh sih.
Mm dia aja pakai PNPM nih.
Mana? Oh ini devendenci browser compact CSS elemen enggak ada kan?
Berarti di dalam sini semua sih sebenarnya.
Apa manual pakai apa? Pakai BM BM25. Eh BM25 ya.
Enggak enggak tahu. Vektor ini lagi ngapain?
Ini lagi ngulik-ngulik eh skill modern web guide. Bukan skill, bukan skill-nya, tapi database reference-nya ya kan?
Iya. Lagi ngulik ya. Dari situ kan kita ngulik-ngulik ini dia pakai teknologi apa. Search-nya enggak bisa ya harus
login ya. Gimana kalau cemplungin ke cloud atau Codex aja suruh nyari ini manggil apa?
Vektor itu request kalau dicemplungin berarti harus kita harus ini ya harus clon ya clon clone aja tapi enggak usah install
oke plugin maksudnya gimana sih di kita clown buka cloud atau codex atau anti grafiti atau apun di situ. Heeh.
Terus suruh nanya-nanya kita tanya-tanya explore this code base if I run. Eh tadi apa?
Oh bisa juga pakai ini. Enggak ada yang pernah ini ya? Notebook LM sudah berubah kan namanya?
Gua cuma notebook. Heeh. Iya tapi bisa buat ngecek repo buat belajar repo bisa.
Dia kan RG nih dia. How this project do similarity search kan lebih cepat kan?
Iya. Enggak tahu bisa jawab atau enggak ya.
Harusnya bisa sambil menjawab pertanyaan. Lebih worth it belajar si plus atau rus?
belajar aja dua-dua plus atau ras.
Kalau bagi saya ya belajar dua-dua yang mana yang nyangkut, yang suka hatinya ke mana hati ke situlah.
Kenapa harus si+? Kenapa enggak si aja?
Karena yang plus itu lebih banyak kan plus-plnya itu maksudnya yang plus itu yang membedakan C dan C+
kan banyak abstraction lagi, banyak library library tambahan.
Oh, berarti berarti C++ di bawahnya plus lagi. Jadi C sharp kan bentuknya kan tambah tanda tambahnya ada empat
plusnya berarti lebih bagus lagi tuh si shark itu daripada si plus minus.
Ih, soalnya tadi pakai tensor flow JS. Tuh, pertanyaan saya sebenarnya ini, kenapa sih plus-plak mengejar OOP-nya?
Sedangkan RAS kan bukan OOP, kenapa si+ enggak sih aja gitu yang prosedural tuh?
Susah loh belajar belajar OOP di C++ itu source yang kiri itu tutup aja kalau enggak perlu. Iya. Nah, clean.
Nah, itu tuh offline CPU efficient tensor flow JS.
Tensor flow JS. Seriously, tapi dia enggak bisa poin ke modelnya.
Dia cuma ng-recap dari Redme. Em, dia enggak bisa disuruh cari kodenya yang mana. Terakhir gua pakai sih enggak
bisa. Oh, iya enggak bisa ya. Ini ini. Eh, ini ya. Local semantic search.
Eh the tool match the query to the best guide using an offline CPU efficient T of L JS model. No networks, no API keys.
Nah, kan kita pengin tahu nih mana kan I mana tensor flow JS modelnya enggak kletek. Kalau notebook LM
modern web guidance RC tanya agi aja lagi.
Tadi pertanyaannya apa? Copy aja lagi. Yes.
Enggak bisa langsung ini ya. Yolo.
Minus-minus yolo ya. Iya. Itu kalau zom ya. Kalau agi enggak tahu ya. Belum tentu ada fitur yolonya.
Nah, itu bisa tuh TFJS tuh. TFJS embeder. Nah, embeder.
Transformer berarti dia jalanin e TFJS di lokal ya?
Iya. Oh iya i ya. Oh pakai itu similarity.
Iya iya i ya. Yang kayak saya waktu workshop di Surabaya juga keli pakai bukan ts ya transformer.
Waduh waduh paling cepat amat. Wah ada operasi matematikanya nih. Cosin similarity. Cosin similarity standar.
Standar ya. cosin similarity ya. Tapi ada precompute vectornya sudah di dia kasih tuh berarti sudah dibuild.
Udah dibuild ya tinggal dipanggil aja ya berarti ya.ts.
Ah jadi cepat. Iya makanya cepat.
Canggih. Canggih. Kalau enggak kan komputer kita yang ng ngfektorin dulu.
Iya iya iya iya iya iya.
Makanya tadi ada versinya kan bisa pakai flag ee versi yang mana?
Very factorization. Oh, fungsinya itu ya berarti ya. Vector similarity search and ranking prescription local tensor flow JS graf modelnya bisa
dibuka file-nya tuh tfs-emb gimana cara bukanya?
Tokenizes using bird tokenizer diklik enggak bisa kebuka ya?
Enggak. Yang kebuka video itu video player. Soalnya TS itu kan eh extension-nya video kan dulu dulu aneh. MPG MPEG TS itu.
Nah, terus ketuan sering ngebajak ngebajak filmes itu bukannya trade starter kaskus gan.
Iya juga. Iya juga anak. Terima kasih banget nih.
Cek cek kulkas ada cendol yang nonton pasti enggak tahu.
TS-nya dikasih ucapan terima kasih sama dikirimin hijau-ijau.
Masa yang nonton enggak tahu cendol.
Minuman yang yang nonton tahunya kendol minuman masih sekarang boba jangan dikasih boba maca sekarang bukan boba mas udah udah
udah telat zaman ah ma ketinggalan ya ketinggalannya udah dua kali orang masih makan cendol dikasihnya boba salah ya
boba udah ketinggalan juga ya maca ya udah ketinggalan maca sekarang oh depan dekat rumah saya ada baru buka tuh
maca maca sih gitu tulisannya. Ini beneran apa?
Beneran? Iya benar maca sih gitu.
Oh iya makrub orang Bekasi unik-unik ya.
Harga vintage obrolannya. Bukan cuman obrolannya, orangnya juga vintage.
Emang orang vintage plus agak vint tapi tahu kan berarti relate dong tahu dong berarti Anda tahu ya itu satu doang yang tahu sisanya
sisanya diam kan karena enggak tahu kita ngomong ini. Dua dua dua minimal dua lah.
Dua. Heeh. U+ tuh tahu kan?
Oke, sudah terjawab ke berarti ya itunya dari cepat sektornya.
Iya. I jadi teman juga pesan pesannya tersirat juga bagi teman-teman kalau lihat satu skill ya dibaca aja dulu
kayak I kayak yang dilakukan Eka yang dilakukan Mas Riza baca dulu isi dalam perutnya biar tahu apa
makanya tadi saya reluctan mau instal NPX karena kan kalau NPX kita enggak tahu yang diinstal apa aja kan. Makanya
saya lebih prefer download zip-nya atau download skill MD-nya terus ada guides-nya itu. Nah, itu aja yang diambil biasanya sih kalau saya ya.
Lah bahkan sebagi prosesnya lebih lama sebelum kita install tadi kan kita emang udah ngikutin skill.md-nya kan. Jadi ya
iya tapi kan waktu jalanin NPS-nya kita enggak tahu dia nginstal apa aja kan gitu maksudnya ya. Cuma maksud saya teman-tan
teman-teman yang sama yang maksudnya enggak pengin nginstall, enggak pengin langsung nginstall ya kalau tadi kan buat keperluan demo. Tapi ya maksud saya
itu valid-falit aja kan mungkin karena enggak pengin nginstall langsung atau karena mau dicombine sama referensi pribadi kan bisa aja.
Ya udah kayak tadi aja berarti coba aja langsung komennya mana yang sekiranya cocok lihat di Kopas aja. Eh, terus
misalnya mau jadiin satu sama workflow project kita biar jalan e ng-load-nya sekali aja ya di apa tadi coba jalan
satu persatu. Kalau penasaran yang dipanggil apa ya kayak tadi aja tinggal diclone terus suruh ee AI cari kodenya
yang mana. Bahkan kalau kita pengin cuma ngopi apa kita pengin nge-customize embedernya satu persatu juga bisa kan ya
karena Iya. skill itu cuma file mark down tex bebas di iya copy dijalanin dites di dan dibaca sesuai keperluan
iya markdown itu kan enak dibaca ya jadi bahayanya apa ketika misalkan tadi ya markdown dia menjalankan script tertentu
bisa aja dia bilang patch apa ee coba lihat d invv terus patch ke iya biasanya contohnya evil.com/sing
dipost gitu inv kita bocor gitu Jadi kalau ada skill markdown coba dibaca aja dulu.
Itulah pesan-pesanpesannya hari ini. Hati-hati. Hati-hati. Topik jadi topik defest menarik tuh. Security security dunia.
Oh, banyak ya yang bisa dikulik ya.
Iya dari sisi sekuritas ya. Heeh.
Protect yourself. C. from AI. Eh, nah yang si modern web guidance ini ada satu lagi nih yang menarik selain di
luar perkara skill-nya ya ini kan apa kalau isi skill-nya kan tadi bisa kita modif aja udah sesuka kita isinya tadi
guide-guide-nya juga udah kita lihat ada satu lagi kalau AI kan enggak bisa LLM kan enggak bisa testing ya karena apa
noneterministic walaupun sama-sama bisa bikin karusel kodenya kan enggak bisa dicek karuselnya exactly kayak gimana jadi e untuk menguji kualitasnya itu
pakai Eval. Dia udah ada Eval-nya juga.
Coba buka di ya yang tadi itu ee GitHub yang GitHub. Oke.
He ini scroll ke bawah ada enggak ya?
Evile nih. Nah itu dia. Iya. Jadi udah ada. Iya.
udah ada kodenya juga sama udah ada contoh-contoh ee maksudnya udah ada itunya sih kayak hasil EVALnya dan
terbukti ee jadi mereka tuh kayak NB AB testing pakai model-model yang flagship lah pakai apa eh Codex enggak tahulah apalagi pokoknya
eh LLM standar jadi dicoba task yang sama tanpa skill ini dan dengan skill ini terus terbukti kayak peningkatan
terus habis itu digrading ee ee dinilai dikasih penilaian.
Nah, itu dia. Oh, ini dia detailnya.
Test case-nya juga ada kayaknya di kitab-nya cuma lupa di mana. Intinya sih peningkatan. Jadi apa kalau kita enggak
pakai skill ini, kita cuma bilang buatin karusel yang bisa si SS only tanpa JavaScript mungkin hasilnya agak ngacau,
belum tentu bisa memenuhi. Tapi kalau pakai skill ini apa bisa bisa memenuhinya kannya jauh lebih besar.
Iya betul. Saya juga menyarankan kalau teman-teman misalkan mau ee apa mana sih ee model yang lebih bagus, mana sih coding agent
yang bagus gitu ya, bikin evaluator seperti ini atau benchmark sendiri.
Jangan berdasarkan benchmark yang di ee apa nih, Bro?
Yang ada Iya, yang di ada di internet ya.
Itu karena karena tergantung tasnya juga kan yang kita butuh.
Iya. Code base-nya juga berbeda. Kalau misalkan kayak saya enggak bilang benchmark SW bench itu jelek, enggak gitu. Cuman itu kan generik kan umum
yang hal-hal yang umum yang diteskan.
Kalau ini kan spesifik kita maunya ngetes web standar gitu. Jadi ee dan ada juga beberapa lm model yang mengoptimize si benchmark
ini. Jadi benchmarknya itu bagus gitu.
State padding. State padding apa namanya? Benchmarks ya?
benchmarksing. Nah, itu jadi benchmarksing. Oh, ya.
Iya, benchmarksing. Jadi, dia bagus tuh kayak SEO, SEO aplikasi-aplikasi ee stat bola itu loh kayak sofa score
atau apa eh passing-nya banyak banget.
Jadi skor e skornya bagus padahal backp semua.
Ah, useless ini kan kalau ini emang kalau ini apa ya? Berdasarkan purpose-nya kan kalau di konteks ini kan
bisa mengadopsi fitur web platform yang modern atau enggak. Nah, itu kan case-case-nya didefinisiin sesuai kebutuhan itu.
Ini render should be fast with.
Oke, ada lagi yang mau dibahas cukup.
Oke, kita rangkum dulu. Jadi malam hari ini sebenarnya kita bahas cukup banyak sih ya yang kita bahas ya. Yang pertama
tentang web UI. Hah? Ngalor ngidul.
Ngalor ngidung. Webi ada namanya juga namanya juga ngobrolin web.
Iya. Terus kita bahas tentang ee apa klaim tadi ya? Klaim Minmax dan apa tadi? ee CSS yang mulai mengubah dirinya
menjadi bahasa pemrograman karena ada if, ada kondisi, ada function, ada for loop. Ada for loop ada enggak? Belum ya?
Belum. Enggak ada. Enggak ada ya?
Tapi ada looping. Ada deh looping ada.
Ada kan CSS ada ya? Coba ya.
Tuh. Tapi misalnya nih kita ng-render eh sudo apa? Sudo konten pakai angka.
Oh enggak ada. Enggak ada. Enggak ada.
Ada dia dia deskrip e apa deskriptif ya apa deskriptif imperatif sama deklaratif deklaratif deklaratif biasanya kan enggak ada for loop ya
ya ada juga sih for loop-nya bentuknya kayak map gitu map filter reduce kan ada bro ada repe css bro css bro
bahas css keetrigger gitu ada repeatung ada repeat Iya. Tuh kan ketahuan kan kita yang enggak pernah main CSS tahunya
Telwin aja. Ya lah itu ngobrol aja sama AI sebelumnya udah install yang tadi modern web guidance dulu.
Iya. Terus juga kita udah explore ini ya eh modern web guidance e gimana cara instalnya, cara pakainya. Terus juga
kita sampai ke dalam ya apa istilahnya eh digging the rabbit hole.
nyari itunya nyari embednya. Iya. Apa namanya tadi? Ternyata dia melakukan semantik search terhadap dokumen yang ee disediakan yang guides itu ya. Jadi,
tapi dia udah punya itunya tar yang tadi di target gazet-nya itu dia udah punya database-nya h yang isinya vektor jadi enggak enggak ee
nge-compile dari awal lagi. I tapi ya kalau kalau tertarik bisa di reverse engineering sih itu kan udah
diekspos semuanya. Gampang sih ngobrol sama pasti dikasih NJS dan Telwin. Ya dilawan dong instol itu aja dilawan apa lu
dilawan di agents.m MD bilang, "Never use next JS."
Udah selesai kan dia dilawan aja.
Ya, itu tadi sama AI. Kalau install skill yang tadi jadi pintar regendnya. Heeh.
Heeh. Malah ngis Angular GS dia enggak anti framework dia si Mod Guidance tadi.
Anti framework. Iya iya iya. Ya, dia agnostik ya. Agnostik ya.
Enggak beraliran dong kalau agnostik itu.
Iya. Dia enggak ikut agama, enggak ikut agama Astro, enggak ikut enggak ikut enggak. Dia ikut semua membenarkan semua dia. Justru
dia open minded. Open minded. Iya. Oke. Kalau yang serius di deskripsinya ee tadi ya pokoknya dia bilang dia fokus di fitur-fitur yang
sudah di-support di native web platform yaitu bla bla bla kan tadi sudah banyak jadi ada yang enggak peduli
soal. Iya. Iya. Iya. Agama Meta Framework-nya.
Agama Meta Framework. Iya. Sekarang framework juga udah enggak peduli ya.
Kalau dulu kan kita ngikutinnya ini ya update eh framework. Ada framework baru setiap minggunya. Dulu kan kalau
sekarang agen agen harness dan agen ID ini setiap setiap jam. model baru setiap bulannya riset token. Setiap bulan ada
promo-promo itu. Eh, barusan open ada itu kan ada reset token.
Reset token lagi. Jadi ini lagi ya bubar jadi gatal ya. Pengin pakai ya. Oh iya kita mau bubar sebenarnya. Heeh.
Jadi terima kasih buat teman-teman semua yang sudah meramaikan. Kenapa Ivan?
Pilih itu dong. Pilih spinway. Oh iya pick minggu depan ya?
Iya minggu depan mau bahas apa?
Pik topik mana dia? Ini hasil vibe coding kita.
Kalau enggak salah kita vi coding ini di waktu di itu kan ya waktu di live juga ya yang versi awalnya.
Iya iya. Spin the wheel. Iya.
Bedah buku. Wah. Eh, ini buku siapa nih?
Mana T cari aja Mas Riza?
Panduan kod bukan? Oh, Anas. Ada ada ininya enggak? Ada PDF atau harus beli? Kalau kalau enggak kok anak ini kayaknya
salah salah salah salah salah. Kok gambarnya cewek agak ini undersore-nya enggak kebawa.
Coba diedit. Diedit. Diedit. Diedit edit.
Oh iya edit ya. Takut salah ya?
Iya. Wah belum sign in. Nanti aja saya edit ini. Oh iya.
Kalau sign in password-nya apa? Password-nya 123.
123. Password-nya order dulu passwordnya. Ya udah Bu. Ini sering ke sering ke ini nih.
Ada bukunya berarti bisa bisa di-download maksudnya atau perlu beli?
Beli enggak apa-apa diart aja tuh kayaknya perlu.
Yuk mau coba kontak ya. Coba kontak ya sekalian promo. Oke kalau gitu kita coba kontak. Kalau enggak nanti kita pikirkan
topik yang lain. Oke terima kasih. Selamat malam. Selamat istirahat. Sampai jumpa minggu depan.
Bye bye. Apakah Anda baru pertama kali melihat tayangan dan halaman ini atau mungkin telah kesekian kali melihat untuk
membandingkan kembali dengan lainnya? Jika Anda mencari tahu mengenai layanan web hosting terbaik, kami pastikan Anda berada di tempat yang tepat.
Dengan domainesia, dapatkan pengalaman menggunakan layanan hosting yang lebih baik dengan SSD berperform tinggi dalam infrastruktur cloud yang telah
dioptimalkan untuk kebutuhan personal maupun bisnis. Teknologi ini memungkinkan Anda memperoleh layanan yang lebih stabil serta proteksi dari
korupsi data. Hosting Domain Asia juga telah mendukung NGS, Python, Ruby, Go, PHP, Java, serta Binary Linux. Lebih
dari 200.000 pelanggan telah mempercayakan layanan hosting di domainia. Kepercayaan yang kami jaga dengan garansi uptime 99,9% serta garansi uang kembali 100%.
Buat website Anda lebih mendunia, segera beralih ke web posting Domaesia. Yeah.
Deskripsi asli dari YouTube
🕸️ Selasa malam waktunya #ngobrolinweb Mari membahas fitur-fitur Web UI terbaru. Termasuk kumpulan agent skill dari tim Google Chrome yaitu Modern Web Guidance. Penasaran? Mari kita kulik sama-sama di sesi kali ini. Sesi ini terselenggara berkat kerjasama dengan Domainesia! 📦 Langganan Cloud VPS Turbo? Gunakan kode: NGOBROLINVPSDN → 50% OFF, bisa digunakan berkali-kali! Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
3 Jun 2026
Liputan langsung Google I/O
Episode ini adalah liputan langsung Google I/O dari sudut pandang orang yang hadir di lokasi. Tamunya Pak Dika, yang ber...
6 Sep 2023
Ngobrolin AI
Episode ini mengambil sudut berbeda dari kebanyakan pembicaraan soal AI: bukan apakah ia akan menggantikan kita, melaink...
21 Jan 2026
Agentic AI
Episode ini membahas tentang Agentic AI, menjelaskan perbedaan mendasar antara AI/LLM biasa dengan Agent AI. Diskusi ini...
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 .